を生成してこのクラスを付ける。
*
* --- 見た目を変えたい場合はここを編集 ---
* SVGファイル自体を差し替えると形が変わる
* ▼ 明るさを調整したい場合は filter: brightness() を変更
*/
.bubble-shine {
display: block;
-o-object-fit: contain;
object-fit: contain;
/* SVGに光のグロー感を足したい場合はコメントを外す
* filter: drop-shadow(0 0 4px rgba(255, 240, 180, 0.8)); */
}
/**
* .bubble-dot
* #F9C23D の丸いパーティクル。
* JS が を生成してこのクラスを付ける。
*
* --- 見た目を変えたい場合はここを編集 ---
* background-color : 丸の色 ▼
* box-shadow : グロー効果の色・強さ ▼
*/
.bubble-dot {
border-radius: 50%;
/* 丸の色: ▼ ここを変更 */
background-color: #F9C23D;
/* グロー効果: 第2引数がブラー半径、大きいほど広がる ▼ */
box-shadow: 0 0 4px 1px rgba(249, 194, 61, 0.8), 0 0 10px 2px rgba(249, 194, 61, 0.4);
}
header,
.hero,
main,
footer {
opacity: 0;
transition: opacity 0.9s ease;
}
body.is-loaded header,
body.is-loaded .hero,
body.is-loaded main,
body.is-loaded footer {
opacity: 1;
}
.loading-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: #FFD214;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.7s ease 0.2s;
}
.loading-overlay.is-done {
opacity: 0;
pointer-events: none;
}
.loading-inner {
display: flex;
flex-direction: column;
align-items: center;
}
.loading-title {
margin-top: 1rem;
font-family: "Noto Sans JP", sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.4em;
color: #fff;
text-transform: uppercase;
}
.loading-title::after {
content: "...";
animation: ld-blink 1.4s ease-in-out infinite;
display: inline-block;
}
@keyframes ld-blink {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.loading-percent {
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.1em;
min-width: 3em;
text-align: center;
}
.loading-overlay.--beer .loading-bar-outer {
display: none;
}
.loading-overlay.--beer .loading-beer-wrap {
display: flex;
}
.loading-overlay.--bar .loading-beer-wrap {
display: none;
}
.loading-overlay.--bar .loading-bar-outer {
display: block;
}
.loading-beer-wrap {
flex-direction: column;
align-items: center;
position: relative;
padding-top: 64px;
}
.loading-stream {
opacity: 0;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 7px;
height: 60px;
background: linear-gradient(to bottom, rgba(249, 194, 61, 0) 0%, #C97B00 100%);
border-radius: 4px;
animation: ld-stream-sway 0.35s ease-in-out infinite alternate;
transform-origin: top center;
}
@keyframes ld-stream-sway {
from {
transform: translateX(-60%) skewX(-3deg) scaleX(0.85);
}
to {
transform: translateX(-40%) skewX(3deg) scaleX(1.15);
}
}
.loading-mug {
position: relative;
width: 88px;
}
.loading-mug-body {
width: 80px;
height: 116px;
border: 4px solid #fff;
border-radius: 3px 3px 12px 12px;
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.12);
}
.loading-mug-handle {
position: absolute;
right: -20px;
top: 18px;
width: 20px;
height: 56px;
border: 4px solid #fff;
border-left: none;
border-radius: 0 12px 12px 0;
}
.loading-mug-base {
width: 92px;
height: 7px;
background: #fff;
border-radius: 0 0 8px 8px;
margin: 0 auto;
}
.loading-liquid {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0%;
background: linear-gradient(to top, #FFC304 0%, #FFFAEB 85%, #fff 100%);
transition: height 0.45s ease;
}
.loading-foam {
position: absolute;
left: -3px;
right: -3px;
height: 22px;
background: #fff;
border-radius: 12px 12px 0 0;
bottom: 0%;
display: none;
z-index: 2;
transition: bottom 0.45s ease;
overflow: visible;
}
.loading-foam::before {
content: "";
position: absolute;
top: -8px;
left: 0;
right: 0;
height: 14px;
background: radial-gradient(ellipse 14px 10px at 50% 80%, #fff 60%, transparent 100%);
animation: ld-foam-blob 1.8s ease-in-out infinite;
}
@keyframes ld-foam-blob {
0%,
100% {
transform: scaleY(1) scaleX(1);
}
50% {
transform: scaleY(1.25) scaleX(0.96);
}
}
.loading-bubble {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.65);
border-radius: 50%;
left: var(--x, 50%);
bottom: 2%;
animation: ld-bubble-rise var(--dur, 1.8s) ease-in var(--delay, 0s) infinite;
}
@keyframes ld-bubble-rise {
0% {
bottom: 2%;
opacity: 0.9;
transform: scale(1);
}
80% {
opacity: 0.4;
}
100% {
bottom: 95%;
opacity: 0;
transform: scale(0.6);
}
}
.loading-bar-outer {
width: 220px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 100px;
overflow: hidden;
}
.loading-bar {
height: 100%;
width: 0%;
background: #fff;
border-radius: 100px;
transition: width 0.35s ease;
position: relative;
overflow: hidden;
}
.loading-bar::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -60%;
width: 40%;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.55), transparent);
animation: ld-shimmer 1.6s ease-in-out infinite;
}
@keyframes ld-shimmer {
from {
left: -60%;
}
to {
left: 160%;
}
}
.deco {
position: absolute;
}
@media screen and (max-width: 639.98px) {
.deco {
transform: scale(2);
}
}
.deco.--hop {
width: 8%;
bottom: -4%;
left: -10%;
}
.deco.--beer {
width: 12%;
top: 4%;
right: -4%;
}
.deco.--wiener {
width: 16%;
bottom: -5%;
left: -7%;
}
.deco.--pretzel {
width: 12%;
top: 3%;
right: -3%;
}
.deco.--pipe {
width: 12%;
top: -3%;
right: -4%;
}
.deco.--rap {
width: 20%;
bottom: -6%;
left: -7%;
}
.deco.--mustache {
width: 10%;
top: 0%;
right: -1%;
}
.deco.--drum {
width: 13%;
bottom: -9%;
left: -3%;
}
/* ============================================================
画面右下固定バナー
============================================================ */
.floating-banner {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
width: 300px;
max-width: 45vw;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.floating-banner a {
display: block;
}
.floating-banner img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.floating-banner a:hover img {
transform: scale(1.02);
}
.floating-banner-close {
position: absolute;
top: -10px;
right: -10px;
width: 24px;
height: 24px;
background: #fff;
border: 1px solid #ddd;
border-radius: 50%;
font-size: 16px;
line-height: 1;
font-weight: bold;
color: #333;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
transition: background-color 0.2s, color 0.2s;
padding: 0;
z-index: 10000;
}
.floating-banner-close:hover {
background-color: #333;
color: #fff;
}
@media screen and (max-width: 639.98px) {
.floating-banner {
right: 12px;
bottom: 12px;
width: 160px;
max-width: 50vw;
}
.floating-banner-close {
top: -8px;
right: -8px;
width: 20px;
height: 20px;
font-size: 14px;
}
}
/*# sourceMappingURL=style.css.map */