@charset "UTF-8";
/* ============================================================
HOURS BEER style.css
Figma: HB_20260825_01 / HOURSBEER_20260801_02 / HB_20250825_03
Desktop 1440 基準（コンテンツ幅 1200）
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600&family=Shippori+Mincho+B1:wght@400;600&family=Cinzel:wght@400&family=Actor&family=Lato:wght@400;700&display=swap');
:root{
--w2:1080px; /* 商品行・お知らせ以外の狭めのコンテンツ幅 */
--gold:#8d7846;
--text:#444444;
--bg:#f5f4f0;
--gray:#d9d9d9;
--c700:#f4da97;
--c900:#edc9c5;
--c1000:#a63742;
--f-mincho:"Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
--f-b1:"Shippori Mincho B1","Shippori Mincho","Yu Mincho","YuMincho",serif;
--f-trajan:"Trajan Pro","Cinzel","Times New Roman",serif;
--f-corbel:"Corbel","Lato","Segoe UI",sans-serif;
--f-actor:"Actor","Corbel","Lato",sans-serif;
--w:1200px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-text-size-adjust:100%}
body{
font-family:var(--f-mincho);
color:var(--text);
background:#fff;
line-height:1.7;
min-width:1200px;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;vertical-align:top}
a{color:inherit;text-decoration:none;transition:opacity .3s}
a:hover{opacity:.7}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
.inner{width:var(--w2);margin:0 auto} /* 基本は1080。TOPの商品行だけ1200 */
.top-beer .inner{width:var(--w)}
/* ---- 共通テキスト ---- */
.en-trajan{font-family:var(--f-trajan);font-weight:400}
.en-corbel{font-family:var(--f-corbel)}
.txt-gold{color:var(--gold)}
/* 見出しセット（英字 + 日本語 + 罫） */
.page-head__eyebrow{font-family:var(--f-corbel);font-weight:700;font-size:24px;line-height:1;color:var(--gold)}
.page-head__title{font-size:20px;line-height:29px;margin-top:24px;font-weight:400}
.page-head__rule{display:block;width:40px;height:2px;background:var(--gold);margin-top:24px}
/* ============================================================
HEADER
============================================================ */
/* 固定ヘッダー。TOPはFV上で白抜き → スクロールで白背景に切替（.is-scrolled はJS付与） */
body{padding-top:99px}
body.has-overlay{padding-top:0}
.site-header{
position:fixed;top:0;left:0;width:100%;min-width:1200px;z-index:100;height:99px;
background:rgba(255,255,255,.8);transition:background .3s;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); /* 透け感＋下のコンテンツをぼかして可読性を確保 */
}
.site-header .inner{
width:auto;display:flex;align-items:center;justify-content:space-between;
height:99px;padding:0 119px;
}
.site-header__logo{display:block;width:118px;height:61px}
.site-header__logo img{width:118px;height:61px;object-fit:contain}
.site-header .logo-light{display:none}
.gnav{display:flex;gap:24px}
.gnav a{font-size:14px;line-height:20px;letter-spacing:0;color:#000;transition:color .3s}
.gnav a.is-current{color:var(--gold)}
/* ドロップダウン（STORES） */
.gnav__item{position:relative}
.gnav__sub{
position:absolute;left:50%;top:100%;transform:translate(-50%,6px);min-width:230px;padding:14px 22px 16px;
background:rgba(255,255,255,.96);box-shadow:0 6px 20px rgba(0,0,0,.08);border-top:2px solid var(--gold);
opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
}
.gnav__sub::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px} /* ナビとの隙間でホバーが切れないように */
.gnav__item:hover .gnav__sub{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.gnav__sub li + li{margin-top:6px}
.gnav__sub a{display:block;font-size:13px;line-height:24px;color:var(--text)!important;white-space:nowrap;letter-spacing:.03em}
.gnav__sub a:hover{color:var(--gold)!important;opacity:1}
.site-header--overlay:not(.is-scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header--overlay:not(.is-scrolled) .gnav a{color:#fff}
.site-header--overlay:not(.is-scrolled) .gnav a.is-current{color:#fff;opacity:.7}
.site-header--overlay:not(.is-scrolled) .logo-dark{display:none}
.site-header--overlay:not(.is-scrolled) .logo-light{display:block}
.site-header.is-scrolled{box-shadow:0 1px 0 rgba(0,0,0,.04)}
/* パンくず */
.breadcrumb{
height:40px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);
display:flex;align-items:center;padding-left:119px; /* ヘッダーロゴの左端に揃える */
font-family:var(--f-corbel);font-size:12px;line-height:14px;color:var(--gold);
}
.breadcrumb a{color:var(--gold)}
.breadcrumb .sep{margin:0 1em}
/* パンくず無しページ用スペーサー */
.head-spacer{height:45px}
/* ============================================================
フローティング ONLINE SHOP タブ
============================================================ */
.float-tabs{
position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:50;
display:flex;flex-direction:column;align-items:flex-end;gap:8px;
transition:transform .4s ease,opacity .3s;
}
/* ONLINE SHOP（上） */
.float-shop{
width:41px;height:129px;background:var(--gold);color:#fff;
border-radius:8px 0 0 8px;
display:flex;align-items:center;justify-content:center;
}
.float-shop__txt{
font-family:var(--f-corbel);font-weight:700;font-size:16px;letter-spacing:.48px;line-height:19px;
writing-mode:vertical-rl;transform:rotate(180deg);height:107px;white-space:nowrap;
}
/* Instagram（下・別リンク） */
.float-ig{
width:41px;height:46px;background:var(--gold);
border-radius:8px 0 0 8px;
display:flex;align-items:center;justify-content:center;
}
.float-ig__ic{width:26px;height:26px}
.float-shop:hover,.float-ig:hover{opacity:.85}
/* TOPはFVの間は非表示（期間限定カードと被るため）→ FVを過ぎたら右からスライドイン */
body.has-overlay:not(.is-scrolled) .float-tabs{transform:translate(100%,-50%);opacity:0;pointer-events:none}
/* ============================================================
TOP FV
============================================================ */
.fv{position:relative;height:100vh;min-height:646px;overflow:hidden;background:url(../img/fv.jpg) center/cover no-repeat}
.fv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.shot-mode .fv{height:646px} /* 撮影確認用 */
/* 帯（FV最下部） */
.fv__bar{
position:absolute;left:0;bottom:0;width:100%;height:49px;background:var(--gold);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:14px;letter-spacing:.05em;z-index:2;
transition:background .3s;
}
.fv__bar{overflow:hidden}
.fv__bar:hover{opacity:1}
/* ホバーした瞬間だけ、グラデーション（左下：ゴールド → 右上：明るいゴールド）が右上方向にふわっと出て消える（0.9秒・1回） */
.fv__bar::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; /* 文字の下・帯背景の上 */
background:linear-gradient(to top right,#8d7846 0%,#a89364 45%,#cbb886 100%);
background-size:160% 160%;background-position:0% 100%;
opacity:0;
}
.fv__bar:hover::before{animation:barGrad .9s ease-out forwards}
@keyframes barGrad{
0%{opacity:0;background-position:0% 100%}
35%{opacity:1}
100%{opacity:0;background-position:100% 0%}
}
.fv__bar-arrow{font-family:var(--f-corbel);margin-left:1.5em;transition:transform .3s}
.fv__bar:hover .fv__bar-arrow{transform:translateX(4px)}
.fv__limited.is-hidden{display:none}
/* 期間限定カード（右下・左上だけ角丸） */
.fv__limited{
position:absolute;right:0;bottom:49px;z-index:2;width:360px;background:#fff;color:var(--text);
border-radius:40px 0 0 0;padding:26px 30px 22px 36px;
}
.fv__limited:hover{opacity:1}
.fv__limited-ttl{font-size:16px;line-height:1.5;letter-spacing:.05em}
.fv__limited-body{display:flex;align-items:center;gap:26px;margin-top:14px}
.fv__limited-body img{height:150px;width:auto;flex:none}
.fv__limited-txt{flex:1}
.fv__limited-txt ul li{font-size:14px;line-height:34px;letter-spacing:.1em}
.fv__limited-more{display:block;text-align:right;font-family:var(--f-corbel);font-size:14px;margin-top:10px;transition:transform .3s}
.fv__limited:hover .fv__limited-more{transform:translateX(4px)}
.fv__scroll{
position:absolute;left:60px;bottom:98px;width:19px;color:#fff;
display:flex;flex-direction:column;align-items:center;
font-family:var(--f-corbel);font-weight:700;font-size:16px;line-height:19px;
}
.fv__scroll span{writing-mode:vertical-rl;transform:rotate(180deg);height:58px;white-space:nowrap}
/* 文字：薄白ベースの上を白い光が流れる（文字はrotate(180)しているので線とは逆方向に動かして見た目を揃える） */
.fv__scroll span{
color:transparent;
background:linear-gradient(to bottom,
rgba(255,255,255,.6) 0%,rgba(255,255,255,.6) 30%,
#fff 45%,#fff 55%,
rgba(255,255,255,.6) 70%,rgba(255,255,255,.6) 100%);
-webkit-background-clip:text;background-clip:text;
background-size:100% 300%;background-position:0 0;
animation:scrollShine 2s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes scrollShine{
0%{background-position:0 0}
100%{background-position:0 100%}
}
/* 線：薄い白の線の上を、明るい白の光が上→下にすっと流れる */
.fv__scroll::after{
content:"";width:1px;height:80px;margin-top:13px;
background:linear-gradient(to bottom,
rgba(255,255,255,.3) 0%,rgba(255,255,255,.3) 30%,
#fff 45%,#fff 55%,
rgba(255,255,255,.3) 70%,rgba(255,255,255,.3) 100%);
background-size:100% 300%;background-position:0 100%;
animation:scrollLine 2s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes scrollLine{
0%{background-position:0 100%}
100%{background-position:0 0}
}
/* ---- TOP section01 ---- */
.top-intro{height:756px}
.top-intro .inner{position:relative;height:100%;width:var(--w2)}
.top-intro__copy{position:absolute;left:0;top:139px}
.top-intro__en{font-family:var(--f-trajan);font-size:32px;line-height:38px;white-space:nowrap}
.top-intro__ja{font-size:24px;line-height:35px;margin-top:15px}
.top-intro__body{position:absolute;left:0;top:303px;width:378px;font-size:14px;line-height:36px;white-space:nowrap}
.top-intro__body p + p{margin-top:36px}
/* 写真2枚のコラージュ: 横写真(左上・大)＋縦写真(右下・小・白フチ) */
.top-intro__photos{position:absolute;right:0;top:262px;width:585px;height:455px}
.top-intro__photo{position:absolute;object-fit:cover;display:block}
.top-intro__photo--a{left:0;top:0;width:420px;height:300px}
.top-intro__photo--b{right:0;top:140px;width:235px;height:315px;border:6px solid #fff;box-sizing:border-box;box-shadow:0 8px 24px rgba(0,0,0,.18)}
/* ---- TOP section02 商品 ---- */
.top-beer{padding-bottom:86px;overflow:hidden}
.beer-row{position:relative;height:477px}
.beer-row__can{position:absolute;left:60px;top:55px;width:300px;height:370px;display:flex;align-items:center;justify-content:center}
.beer-row__can > img{max-height:340px;width:auto}
.beer-row:nth-child(1) .beer-row__can > img{transform:rotate(8deg)}
.beer-row:nth-child(2) .beer-row__can > img{transform:rotate(-12deg)}
.beer-row:nth-child(3) .beer-row__can > img{transform:rotate(12deg)}
/* ---- 3D缶（展開ラベルを円筒に巻く） ----
実寸 φ66×H122mm → 174×340px。ラベル帯は写真の y86〜466 に相当（57px〜310px）
円周 2πr=547px、ラベルは円周の87%（476px）＋銀の継ぎ目 */
.can3d{position:relative;width:174px;height:340px;transform-origin:50% 50%}
.can3d__top{position:absolute;top:0;left:0;width:174px;height:57px;z-index:2}
.can3d__btm{position:absolute;bottom:0;left:0;width:174px;height:29px;z-index:2}
/* tilt：写真がやや俯瞰なので円筒も少し上から見た角度に（帯の上下端が弧になる） */
.can3d__tilt{
position:absolute;top:57px;left:50%;width:15.4px;height:254px;margin-left:-7.7px;
transform-style:preserve-3d;transform:rotateX(-7deg);
}
/* body：ラベル中央（時刻）が正面 = 204deg（面16付近を手前に） */
.can3d__body{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(204deg)}
.can3d__face{
position:absolute;left:0;top:0;width:15.4px;height:254px;backface-visibility:hidden;
background-color:#cfcfcb;background-repeat:no-repeat;background-size:476px 254px;
outline:1px solid transparent; /* 面の縁のアンチエイリアス線を抑える */
}
.can3d__body{-webkit-font-smoothing:antialiased}
.can3d__core{position:absolute;left:50%;top:12px;width:140px;height:230px;margin-left:-70px} /* 芯（JSで色指定・十字2枚）。輪郭・上下から透けないよう一回り小さく */
.can3d__shade{
position:absolute;top:57px;left:0;width:174px;height:254px;pointer-events:none;z-index:3;
background:linear-gradient(to right,
rgba(0,0,0,.34) 0%,rgba(0,0,0,.10) 16%,rgba(255,255,255,.22) 34%,rgba(255,255,255,.04) 50%,
rgba(0,0,0,.14) 74%,rgba(0,0,0,.46) 100%);
}
/* 元写真（同じ写真の縮小なので上下の縁と完全一致）。最後にクロスフェードで表示 */
.can3d__photo{position:absolute;inset:0;width:174px;height:340px;opacity:0;pointer-events:none;z-index:4}
.js-inview.is-in .can3d__photo{animation:canPhotoIn 2.4s linear forwards}
.js-inview.is-in .can3d__tilt,.js-inview.is-in .can3d__shade{animation:canPhotoOut 2.4s linear forwards}
@keyframes canPhotoIn{0%,82%{opacity:0}100%{opacity:1}}
@keyframes canPhotoOut{0%,82%{opacity:1}100%{opacity:0}}
/* 3D缶がアニメしない環境（reduced motion等）は写真を表示 */
@media (prefers-reduced-motion:reduce){.can3d__photo{opacity:1}.can3d__tilt,.can3d__shade{opacity:0}}
/* 転がりアニメ：立てたまま、ラベルを回しながら左から転がってきて、最後に少し傾く
傾き角は行ごとに --tilt（最終）/ --tilt-over（行き過ぎ）/ --tilt-back（戻り）で指定 */
/* 最後はまっすぐ（--tilt:0）。止まる瞬間だけ進行方向へ少し揺れて戻る */
.js-inview .can3d{opacity:0;transform-origin:50% 100%;--tilt:0deg;--tilt-over:4deg;--tilt-back:-1deg}
.beer-row--v2r .can3d{--tilt:0deg;--tilt-over:-4deg;--tilt-back:1deg}
.js-inview.is-in .can3d{animation:canRoll 2.4s cubic-bezier(.3,.7,.3,1) forwards}
.js-inview.is-in .can3d__body{animation:canSpin 2.4s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes canRoll{
0% {opacity:0;transform:translateX(-620px) rotate(0deg)}
8% {opacity:1}
62% {transform:translateX(0) rotate(0deg)}
78% {transform:translateX(0) rotate(var(--tilt-over))}
90% {transform:translateX(0) rotate(var(--tilt-back))}
100%{opacity:1;transform:translateX(0) rotate(var(--tilt))}
}
@keyframes canSpin{
0% {transform:rotateY(0deg)}
62% {transform:rotateY(540deg)}
100%{transform:rotateY(564deg)} /* 564 = 204 + 360 → 最後は時刻が正面 */
}
/* 旧：画像1枚のタンブル回転（3D缶にしていない行用） */
.js-inview .beer-row__can > img{transition:transform 1.4s cubic-bezier(.25,.9,.35,1),opacity .6s ease-out}
.js-inview:not(.is-in) .beer-row__can > img{opacity:0;transform:translate(-420px,-320px) rotate(-352deg)}
@media (prefers-reduced-motion:reduce){
.js-inview .beer-row__can > img{transition:none}
.js-inview .can3d,.js-inview.is-in .can3d,.js-inview.is-in .can3d__body{animation:none;opacity:1}
.fv__scroll::after,.fv__scroll span{animation:none}
}
.beer-row__txt{position:absolute;left:430px;top:83px;width:383px}
.beer-row__name{font-family:var(--f-corbel);font-size:32px;line-height:39px;color:var(--gold);white-space:nowrap}
.beer-row__name small{font-size:32px}
.beer-row__rule{display:block;width:90px;height:2px;background:var(--gold);margin-top:24px}
.beer-row__sub{font-family:var(--f-b1);font-size:16px;line-height:36px;margin-top:43px}
.beer-row__body{font-size:14px;line-height:24px;margin-top:43px;min-height:95px}
.more{
display:inline-flex;align-items:center;gap:14px;
font-family:var(--f-b1);font-weight:600;font-size:16px;line-height:23px;color:var(--gold);
}
.more::after{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.more--lg::after{width:13px;height:13px;transition:transform .7s ease-in-out,opacity .7s ease-in-out,box-shadow .7s ease-in-out;will-change:transform}
/* ホバー：●がふわっと大きく・薄く・周りがぼける */
.more--lg:hover{opacity:1}
.more--lg:hover::after{transform:scale(1.7);opacity:.55;box-shadow:0 0 0 6px color-mix(in srgb,currentColor 14%,transparent),0 0 18px 8px color-mix(in srgb,currentColor 22%,transparent)}
.more--dark{color:var(--text);font-size:16px;line-height:23px}
.beer-row__more{margin-top:28px}
/* 味チャート */
.chart{position:absolute;left:894px;top:100px;width:277px;height:277px}
.chart__lbl{
position:absolute;border:.5px solid var(--text);display:flex;align-items:center;justify-content:center;
font-size:14px;text-align:center;
}
.chart__lbl--t{left:84px;top:0;width:110px;height:27px;line-height:24px}
.chart__lbl--b{left:84px;top:250px;width:110px;height:27px;line-height:24px}
.chart__lbl--l{left:0;top:83px;width:27px;height:110px;line-height:18px}
.chart__lbl--r{left:250px;top:83px;width:27px;height:110px;line-height:18px}
.chart__ax-h{position:absolute;left:44px;top:138px;width:189px;height:.5px;background:var(--text)}
.chart__ax-v{position:absolute;left:139px;top:44px;width:.5px;height:189px;background:var(--text)}
/* 軸の両端の矢じり */
.chart__ax-h::before,.chart__ax-h::after,.chart__ax-v::before,.chart__ax-v::after{
content:"";position:absolute;width:7px;height:7px;border-top:.5px solid var(--text);border-right:.5px solid var(--text);
}
.chart__ax-h::before{left:0;top:-3.5px;transform:rotate(-135deg)}
.chart__ax-h::after{right:0;top:-3.5px;transform:rotate(45deg)}
.chart__ax-v::before{top:0;left:-3.5px;transform:rotate(-45deg)}
.chart__ax-v::after{bottom:0;left:-3.5px;transform:rotate(135deg)}
.chart__dot{position:absolute;width:26px;height:26px;border-radius:50%;left:181px;top:83px;animation:dotBreath 2.8s ease-in-out infinite}
/* さりげなく、ほわほわと呼吸するように（拡大縮小＋同色の薄い光が広がって消える） */
@keyframes dotBreath{
0%,100%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent)}
50%{transform:scale(1.3);opacity:.6;box-shadow:0 0 0 14px color-mix(in srgb,currentColor 0%,transparent)}
}
.chart__dot--700{color:var(--c700)}.chart__dot--900{color:var(--c900)}.chart__dot--1000{color:var(--c1000)}
@media (prefers-reduced-motion:reduce){.chart__dot{animation:none}}
.chart__dot--700{background:var(--c700)}
.chart__dot--900{background:var(--c900)}
.chart__dot--1000{background:var(--c1000)}
.top-beer__all{text-align:center;margin-top:0}
/* ---- 商品行 v2（Figma 1200×697：缶を大きく左、右にテキスト→チャート→view more） ---- */
.beer-row--v2{height:647px} /* 行間を詰める（元697） */
.beer-row--v2 .beer-row__can{left:90px;top:120px;width:300px;height:420px;transform:scale(1.22);transform-origin:50% 50%}
.beer-row--v2 .beer-row__txt{left:515px;top:89px;width:507px}
.beer-row--v2 .beer-row__sub{margin-top:24px;line-height:36px} /* 罫線と本文の上下中央（上下24pxずつ） */
.beer-row--v2 .beer-row__body{margin-top:24px;min-height:0}
.beer-row--v2 .chart{left:552px;top:343px;transform:scale(.8);transform-origin:0 0} /* 277→222px、中心は本文の中央（x=663）に揃える */
/* v2：ラベル文字と枠を大きく（軸の長さはそのまま）。数値は scale(.8) 前の値 */
.beer-row--v2 .chart__lbl{font-size:17px}
.beer-row--v2 .chart__lbl--t,.beer-row--v2 .chart__lbl--b{left:73px;width:131px;height:32px;line-height:30px}
.beer-row--v2 .chart__lbl--b{top:245px}
.beer-row--v2 .chart__lbl--l,.beer-row--v2 .chart__lbl--r{top:73px;width:32px;height:131px;line-height:21px}
.beer-row--v2 .chart__lbl--r{left:245px}
.beer-row--v2 .beer-row__more{position:absolute;left:880px;top:443px;margin:0}
/* v2r：左右反転（テキスト左・缶右）。缶は右から転がってくる */
.beer-row--v2r .beer-row__can{left:810px}
.beer-row--v2r .beer-row__txt{left:178px}
.beer-row--v2r .chart{left:178px} /* 本文・サブタイトルと左揃え */
.beer-row--v2r .beer-row__more{left:506px}
.js-inview.beer-row--v2r.is-in .can3d{animation-name:canRollR}
.js-inview.beer-row--v2r.is-in .can3d__body{animation-name:canSpinR}
@keyframes canRollR{
0% {opacity:0;transform:translateX(620px) rotate(0deg)}
8% {opacity:1}
62% {transform:translateX(0) rotate(0deg)}
78% {transform:translateX(0) rotate(var(--tilt-over))}
90% {transform:translateX(0) rotate(var(--tilt-back))}
100%{opacity:1;transform:translateX(0) rotate(var(--tilt))}
}
@keyframes canSpinR{
0% {transform:rotateY(0deg)}
62% {transform:rotateY(-540deg)}
100%{transform:rotateY(-516deg)} /* -516 ≡ 204 → 最後は時刻が正面 */
}
/* 矢印：横線＋上側だけの矢じり（Figma参照） */
.more--arrow{gap:12px}
.more--arrow::after{
content:"";width:24px;height:10px;border-radius:0;
background:url("data:image/svg+xml;utf8,") no-repeat center/contain;
transition:transform .3s;
}
.more--arrow:hover::after{transform:translateX(4px)}
/* ---- TOP section03 ---- */
.top-links{height:644px;padding-top:67px}
.top-links .inner{display:flex;justify-content:space-between;width:var(--w2)}
.top-links__item{position:relative;display:block;width:460px;height:459px;overflow:hidden}
.top-links__item:hover{opacity:1}
.top-links__item + .top-links__item{width:468px;height:462px}
.top-links__item img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.top-links__item:hover img{transform:scale(1.06)} /* ホバーで枠内ズーム */
.top-links__box{
position:absolute;left:0;width:240px;height:120px;background:rgba(0,0,0,.7);color:#fff;
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.top-links__box b{font-weight:400;font-size:24px;line-height:24px}
.top-links__box span{font-size:14px;line-height:24px;margin-top:16px}
/* ---- TOP section04 NEWS ---- */
.top-news{width:872px;margin:0 auto;height:664px} /* 「一覧を見る」の下に余白 */
.sec-ttl{
width:193px;height:193px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.sec-ttl b{font-family:var(--f-trajan);font-weight:400;font-size:20px;line-height:24px}
.sec-ttl span{font-size:12px;line-height:24px;margin-top:8px}
.news-list--top li{border-top:1px solid var(--text)}
.news-list--top li:last-child{border-bottom:1px solid var(--text)}
.news-list--top a{display:block;height:84px;padding:16px 0 16px 26px}
.news-list--top time{display:block;font-size:11px;line-height:24px}
.news-list--top p{font-size:14px;line-height:24px;margin-top:4px}
.top-news__all{text-align:center;padding-top:46px}
/* ============================================================
共通 CTA（ONLINE STORE / WHOLE SALE / WHERE TO DRINK & BUY）
============================================================ */
/* 横幅は section03（工場紹介/代表の想い）と同じ 1200px に揃える。左右バナーは上の画像と同じ 510 / 518 */
.cta{padding:84px 0}
.cta__wrap{width:var(--w2);margin:0 auto}
.cta__row{display:flex;justify-content:space-between}
.cta__bnr{overflow:hidden;
position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
background-position:center;background-size:cover;background-repeat:no-repeat;color:var(--text);
}
.cta__bnr--sm{width:520px;height:240px;border:.5px solid var(--text)} /* 2枚で1080、間40px */
.cta__bnr--online{background-image:url(../img/bnr_online.jpg)}
.cta__bnr--wholesale{background-image:url(../img/bnr_wholesale.jpg)}
.cta__bnr--lg{width:var(--w2);height:243px;border:.5px solid var(--text);margin-top:40px; /* 上2枚の間隔(40px)と統一 */background-image:url(../img/bnr_stores.jpg);color:#fff}
.cta__bnr b{font-family:var(--f-trajan);font-weight:400;font-size:24px;line-height:24px;white-space:nowrap}
.cta__bnr span{font-size:14px;line-height:24px;margin-top:8px;white-space:nowrap}
/* ============================================================
FOOTER
============================================================ */
.site-footer{height:414px;padding-top:14px}
.site-footer .inner{position:relative;height:100%;width:var(--w2)} /* 周りのセクション幅(1080)に合わせる */
.site-footer__logo{position:absolute;left:-1px;top:-6px;width:110px;height:57px}
.site-footer__logo img{width:110px;height:57px;object-fit:contain}
.site-footer__cols{position:absolute;left:0;top:99px;width:100%;height:193px}
.site-footer__addr{position:absolute;left:0;top:0;font-size:13px;line-height:24px;font-style:normal}
.site-footer__sns{display:flex;gap:5px;margin-top:12px}
.site-footer__sns a{width:22px;height:22px}
.site-footer__sns img{width:22px;height:22px}
.site-footer__nav{position:absolute;top:0;font-size:12px;line-height:17px}
.site-footer__nav--1{left:306px}
.site-footer__nav--2{left:497px}
.site-footer__nav li{margin-bottom:17px}
.site-footer__nav li.sub{margin-bottom:7px}
.site-footer__nav li:has(+ .sub){margin-bottom:7px}
.site-footer__nav li.sub:has(+ li:not(.sub)){margin-bottom:17px}
.site-footer__contact{position:absolute;right:0;top:0;width:193px;height:193px;border:.5px solid var(--text);transition:background .4s ease,color .4s ease}
.site-footer__contact:hover{opacity:1;background:var(--text);color:#fff} /* ホバーで黒白反転 */
.site-footer__contact .sec-ttl{width:100%;height:100%}
/* ============================================================
下層共通
============================================================ */
/* ページ冒頭（左テキスト・右画像） */
.lead{position:relative}
.lead .inner{position:relative}
.lead__txt{position:absolute;left:0}
.lead__body{font-size:14px;margin-top:44px}
.lead__body p + p{margin-top:28px}
.lead__img{position:absolute;right:0;object-fit:cover}
.lead__ttl{font-size:20px;line-height:29px;font-weight:400}
/* 帯付きページタイトル（shop / news） */
.page-title{background:var(--bg);height:200px;padding-top:47px}
.page-title--center{text-align:center}
.page-title--center .page-head__rule{margin-left:auto;margin-right:auto}
/* 白/生成り交互セクション（brewery / philosophy） */
.story{position:relative;height:676px}
.story--bg{background:var(--bg)}
.story .inner{position:relative;height:100%}
.story__txt{position:absolute;top:169px;width:637px}
.story__txt--l{left:0}
.story__txt--r{left:443px}
.story__txt .lead__ttl + .page-head__rule{margin-top:24px}
.story__body{font-size:14px;line-height:28px;margin-top:40px}
.story__body p + p{margin-top:28px}
.story__img{position:absolute;top:119px;width:399px;height:419px;object-fit:cover}
.story__img--l{left:0}
.story__img--r{right:0}
.story--photo{background:url(../img/brewery_wide.jpg) center/cover no-repeat}
.story--photo::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.story--photo .story__img{top:146px}
/* ============================================================
ABOUT
============================================================ */
.about-lead{height:575px}
.about-lead .lead__txt{top:47px;width:500px}
.about-lead .lead__body{line-height:36px;width:500px}
.about-lead__photos{position:absolute;left:540px;top:192px;display:flex;gap:40px} /* 1080幅用：写真250×2＋間40 */
.about-lead__photo{width:250px}
.about-lead__photo img{width:250px;height:156px;object-fit:cover}
.about-lead__photo p{font-size:13px;line-height:24px;margin-top:11px}
/* 定番3種 カード */
.lineup{background:var(--bg);height:auto;padding:97px 0 96px} /* 高さ固定をやめ、下余白を確保 */
.lineup--white{background:#fff}
.lineup__ttl{font-size:20px;line-height:29px;font-weight:400}
.lineup__lead{font-family:var(--f-b1);font-size:14px;line-height:20px;margin-top:30px}
.lineup__cards{display:flex;gap:45px;margin-top:53px}
.card{position:relative;display:block;width:330px;min-height:353px;background:#fff;padding:36px;color:inherit} /* 内側余白は上下左右36pxで統一 */
a.card:hover{opacity:1}
.lineup--white .card{background:var(--bg)}
.card--tall{min-height:389px;padding-bottom:66px}
.card__time{font-family:var(--f-actor);font-size:44px;line-height:53px;color:var(--gold)} /* 左揃え（本文と同じ左端） */
.card__sub{font-family:var(--f-b1);font-weight:600;font-size:14px;line-height:20px;margin-top:28px;height:45px}
.card__rule{display:block;width:40px;height:2px;background:var(--gold);margin-top:28px}
.card__body{font-size:14px;line-height:24px;margin-top:31px;min-height:120px} /* 紹介文は4〜5行想定：5行分（120px）を常に確保して read more の位置を固定 */
.card__can{position:absolute;right:72px;top:36px;width:76px;height:149px;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.3,1);transform-origin:50% 90%}
.card:hover .card__can{transform:rotate(-7deg)} /* 枠ホバーで缶が少し傾く */
.card__more{position:absolute;right:36px;bottom:26px}
.lineup__all{text-align:center;margin-top:49px}
/* ============================================================
BEER
============================================================ */
.beer-lead{height:538px}
.beer-lead .lead__txt{top:47px;width:637px}
.beer-lead .lead__body{line-height:28px;width:637px}
.beer-lead .lead__img{top:47px;width:399px;height:419px}
.lineup--beer{height:auto;padding:75px 0 84px}
.lineup--beer .lineup__cards{margin-top:51px}
/* ============================================================
BEER DETAIL
============================================================ */
.detail{background:var(--bg);height:854px}
.detail .inner{position:relative;height:100%}
.detail__name{position:absolute;left:53px;top:39px;font-family:var(--f-corbel);font-size:32px;line-height:39px;color:var(--gold);white-space:nowrap}
.detail__rule{position:absolute;left:53px;top:102px;width:90px;height:2px;background:var(--gold)}
.detail__btn{
position:absolute;left:356px;top:44px;width:156px;height:38px;background:#fff;border:1px solid var(--gold);
display:flex;align-items:center;justify-content:center;gap:12px;
font-family:var(--f-corbel);font-weight:700;font-size:16px;line-height:19px;color:var(--gold);
}
.detail__btn i{width:18px;height:18px;border-radius:50%;background:var(--gold);position:relative}
.detail__btn i::after{
content:"";position:absolute;left:5px;top:6px;width:5px;height:5px;border-top:1.5px solid #fff;border-right:1.5px solid #fff;transform:rotate(45deg);
}
.detail__head{position:absolute;left:53px;top:142px;font-family:var(--f-b1);font-weight:600;font-size:20px;line-height:29px;color:#000}
.detail__body{position:absolute;left:53px;top:226px;width:459px;font-size:14px;line-height:24px;color:#000}
.detail__feat{position:absolute;left:53px;top:389px;display:flex;gap:60px;color:#000}
.detail__feat li{text-align:center;font-size:14px;line-height:24px;min-width:98px}
.detail__feat i{display:block;width:89px;height:89px;border-radius:50%;background:var(--gray);margin:12px auto 0}
.detail__spec{position:absolute;left:53px;top:597px;font-size:14px;line-height:24px;color:#000}
.detail__photo{position:absolute;left:596px;top:39px;width:440px;height:551px;background:#fff;display:flex;align-items:center;justify-content:center}
.detail__photo img{height:410px;width:auto}
.detail__thumbs{position:absolute;left:596px;top:617px;display:flex;gap:15px}
.detail__thumbs li{position:relative;width:76px;height:76px;background:var(--gray)}
.detail__thumbs li:first-child::after{content:"ほかの写真";position:absolute;left:4px;top:26px;font-size:14px;line-height:24px;color:#000;white-space:nowrap}
/* ============================================================
BREWERY / PHILOSOPHY
============================================================ */
.story-lead{height:538px}
.story-lead .lead__txt{top:47px;width:637px}
.story-lead .lead__body{line-height:28px;width:637px}
.story-lead .lead__img{top:47px;width:399px;height:398px}
/* ============================================================
STORES（DRINK & BUY）
============================================================ */
.stores{padding:74px 0 60px}
.stores__group + .stores__group{margin-top:48px}
.stores__area{
font-size:14px;line-height:24px;padding-left:20px;border-left:2px solid var(--gold);
}
.stores table{margin-top:24px;border-top:1px solid var(--text)}
.stores th,.stores td{border-bottom:1px solid var(--text);text-align:left;vertical-align:middle;padding:0 0 0 0}
.stores th{font-family:var(--f-b1);font-weight:600;font-size:14px;line-height:24px;height:52px}
.stores td{height:57px;font-size:14px}
.stores .c-area{width:108px}
.stores .c-name{width:292px}
.stores .c-addr{width:320px}
.stores td.c-addr{font-size:12px;line-height:19px}
.stores .c-tel{width:180px}
.stores td.c-tel{font-size:16px;letter-spacing:.5px;font-family:var(--f-corbel)}
.stores .c-ic{width:90px}
.stores .c-ic:last-child{width:90px}
.stores th.c-tel,.stores th.c-ic,.stores td.c-tel,.stores td.c-ic{text-align:center}
.stores th.c-ic{text-align:center;padding-left:0}
.ic-round{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--c700);position:relative}
.ic-round--buy{background:var(--c900)}
.ic-round img{position:absolute;left:5px;top:5px;width:14px;height:14px}
/* ============================================================
NEWS
============================================================ */
.news{padding:40px 0 50px}
.news-list{border-top:1px solid var(--text)}
.news-list li{border-bottom:1px solid var(--text)}
.news-list a{display:flex;align-items:center;height:72px;position:relative;padding-left:24px}
/* 日付左の縦線：ホバーで上から下へ伸びて出現（全行） */
.news-list a::before{content:"";position:absolute;left:0;top:16px;width:2px;height:40px;background:var(--gold);transform:scaleY(0);transform-origin:50% 0;transition:transform .3s ease}
.news-list a:hover::before{transform:scaleY(1)}
.news-list a:hover{opacity:1}
.news-list time{font-family:var(--f-corbel);font-weight:700;font-size:14px;width:104px;flex:none}
.tag{
display:inline-flex;align-items:center;justify-content:center;width:98px;height:18px;background:#e8e7e3;
font-family:var(--f-corbel);font-weight:700;font-size:11px;line-height:1;color:var(--text);flex:none;
}
.news-list p{font-size:14px;line-height:24px;margin-left:46px}
.pager{display:flex;justify-content:center;gap:28px;margin-top:40px;font-family:var(--f-corbel);font-size:17px}
.pager .is-current{color:var(--gold)}
.article{padding:40px 0 60px}
.article__meta{display:flex;align-items:center;gap:22px;padding-left:16px;border-left:2px solid var(--gold);height:28px}
.article__meta time{font-family:var(--f-corbel);font-weight:700;font-size:14px}
.article__ttl{font-size:20px;line-height:29px;font-weight:400;margin-top:44px}
.article__body{font-size:14px;line-height:24px;margin-top:20px;width:560px}
.article__body p + p{margin-top:24px}
.article__body img{display:block;width:412px;height:310px;object-fit:cover;margin:30px 0 24px}
.article__nav{display:flex;justify-content:center;gap:60px;margin-top:68px;font-size:16px}
/* ============================================================
CONTACT
============================================================ */
.contact{padding:56px 0 70px}
.contact__lead{font-size:14px;line-height:28px;text-align:center}
.form{width:760px;margin:48px auto 0;border-top:1px solid var(--text)}
.form__row{display:flex;border-bottom:1px solid #d9d9d9;padding:22px 0}
.form__row dt{width:220px;flex:none;font-size:14px;line-height:44px;letter-spacing:.05em}
.form__row dd{flex:1}
.req{
display:inline-block;margin-left:10px;padding:0 6px;font-size:10px;line-height:18px;vertical-align:middle;
color:#fff;background:var(--gold);border-radius:2px;letter-spacing:.05em;
}
.form input[type="text"],.form input[type="email"],.form input[type="tel"],.form textarea{
width:100%;font-family:inherit;font-size:14px;line-height:1.6;color:var(--text);
padding:10px 14px;background:var(--bg);border:1px solid #e3e1db;border-radius:0;appearance:none;-webkit-appearance:none;
transition:border-color .3s,background .3s;
}
.form input[type="text"],.form input[type="email"],.form input[type="tel"]{height:44px}
.form textarea{resize:vertical;min-height:180px}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--gold);background:#fff}
.form ::placeholder{color:#b5b3ad}
.form__radios{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:11px}
.form__radios label,.form__agree label{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:22px;cursor:pointer}
.form input[type="radio"],.form input[type="checkbox"]{
appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;border:1px solid var(--text);background:#fff;flex:none;cursor:pointer;
}
.form input[type="radio"]{border-radius:50%}
.form input[type="radio"]:checked{border-color:var(--gold);box-shadow:inset 0 0 0 3px #fff;background:var(--gold)}
.form input[type="checkbox"]:checked{border-color:var(--gold);background:var(--gold) url("data:image/svg+xml;utf8,") center/12px no-repeat}
.form__agree{text-align:center;margin-top:32px}
.form__agree a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.form__submit{text-align:center;margin-top:28px}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:14px;width:280px;height:56px;
font-family:inherit;font-size:15px;letter-spacing:.15em;color:#fff;background:var(--gold);border:1px solid var(--gold);cursor:pointer;
transition:background .3s,color .3s;
}
.btn i{width:24px;height:10px;background:url("data:image/svg+xml;utf8,") no-repeat center/contain;transition:transform .3s}
.btn:hover{background:#fff;color:var(--gold)}
.btn:hover i{background-image:url("data:image/svg+xml;utf8,");transform:translateX(4px)}
/* ステップ表示（入力→確認→完了） */
.steps{display:flex;justify-content:center;gap:0;margin-bottom:40px}
.steps li{
position:relative;width:120px;text-align:center;font-size:12px;letter-spacing:.1em;color:#b5b3ad;padding-top:26px;
}
.steps li::before{
content:"";position:absolute;left:50%;top:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;
border:1px solid #d9d9d9;background:#fff;box-sizing:border-box;
}
.steps li + li::after{content:"";position:absolute;left:-50%;right:50%;top:8px;height:1px;background:#d9d9d9;z-index:-1}
.steps li.is-current{color:var(--gold)}
.steps li.is-current::before{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3px #fff}
/* 確認画面 */
.form--confirm .form__row dd{font-size:14px;line-height:24px;padding:10px 0;min-height:44px}
.form--confirm .form__row dd.is-multiline{white-space:pre-wrap}
.form__submit--2{display:flex;justify-content:center;gap:20px}
.btn--ghost{background:#fff;color:var(--gold)}
.btn--ghost:hover{background:var(--gold);color:#fff}
/* 完了画面 */
.thanks{width:760px;margin:0 auto;text-align:center}
.thanks__ttl{font-size:20px;line-height:29px;letter-spacing:.05em}
.thanks__body{font-size:14px;line-height:28px;margin-top:24px}
.thanks__tel{font-size:14px;line-height:28px;margin-top:20px;color:var(--gold)}
.thanks .form__submit{margin-top:48px}
.contact__tel{width:760px;margin:64px auto 0;padding:32px 0;border-top:1px solid #d9d9d9;text-align:center}
.contact__tel-ttl{font-size:14px;letter-spacing:.1em}
.contact__tel-num{font-family:var(--f-mincho);font-size:30px;line-height:1.3;color:var(--gold);margin-top:8px;letter-spacing:.08em}
.contact__tel-note{font-size:12px;margin-top:6px}
/* CTAバナー：ホバーで背景画像が枠内で少しズーム（背景を疑似要素に複製して拡大） */
.cta__bnr::after{content:"";position:absolute;inset:0;background:inherit;transition:transform .8s cubic-bezier(.2,.7,.3,1);z-index:0}
.cta__bnr:hover{opacity:1}
.cta__bnr:hover::after{transform:scale(1.06)}
.cta__bnr b,.cta__bnr span{position:relative;z-index:1}
/* TOP NEWS 見出しは BREWERY/PHILOSOPHY のタイトルと同じ 24px */
.top-news .sec-ttl b{font-size:24px}
/* 「WHERE TO DRINK & BUY」白文字の可読性：ドロップシャドウ */
.cta__bnr--lg b,.cta__bnr--lg span{text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.35)}
.about-lead .page-head__title{white-space:nowrap} /* 幅500でも1行に */
/* ============================================================
TOP 期間限定ブロック（定番3行の下）
============================================================ */
.limited{
display:flex;align-items:center;width:var(--w2);height:260px;margin:0 auto 70px;
background:var(--bg);position:relative;overflow:hidden;color:var(--text);
}
.limited:hover{opacity:1}
.limited__tag{
flex:none;width:64px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
border-right:.5px solid #d9d9d9;font-family:var(--f-corbel);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--gold);
writing-mode:vertical-rl; /* 縦書き（日本語が正立するよう回転しない） */
}
.limited__tag span{font-family:var(--f-mincho);font-weight:400;font-size:12px;letter-spacing:.2em;color:var(--text)}
.limited__can{flex:none;height:200px;width:auto;margin:0 20px 0 44px;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.limited:hover .limited__can{transform:translateY(-4px) rotate(-3deg)}
.limited__txt{flex:1;padding:0 40px 0 20px}
.limited__name{font-family:var(--f-corbel);font-size:32px;line-height:1.2;color:var(--gold)}
.limited__sub{font-family:var(--f-b1);font-size:15px;line-height:24px;margin-top:8px}
.limited__body{font-size:13px;line-height:22px;margin-top:10px;max-width:420px}
.limited__more{margin-top:14px}
.limited__photo{flex:none;width:340px;height:260px;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.limited:hover .limited__photo{transform:scale(1.05)}
/* カード全体のホバーで read more の矢印を動かす（read more 単体のホバーは無し） */
a.card:hover .card__more::after{transform:translateX(4px)}
/* ============================================================
スクロール出現アニメ（main.js が .js-fade を付与 → 画面に入ると .is-in）
transform ではなく translate プロパティを使い、既存の transform（チャート縮小等）と干渉させない
============================================================ */
.js-fade{opacity:0;translate:0 36px;transition:opacity 1s cubic-bezier(.2,.6,.3,1),translate 1s cubic-bezier(.2,.6,.3,1)} /* 動き大きめ：36px */
.js-fade.is-in{opacity:1;translate:0 0}
.limited.js-fade{transition:opacity 1s cubic-bezier(.2,.6,.3,1),translate 1s cubic-bezier(.2,.6,.3,1)}
@media (prefers-reduced-motion:reduce){.js-fade{opacity:1;translate:none;transition:none}}
/* ============================================================
オープニングローダー（TOP）
流れ：グラス → 缶が来て傾く → 注ぐ（液面が上がる） → 缶が去る → 文章2行ふわっと → 全体ふわっと消える
============================================================ */
body.is-loading{overflow:hidden}
.loader{
position:fixed;inset:0;z-index:1000;background:var(--bg);color:var(--text);
display:flex;align-items:center;justify-content:center;
transition:opacity 1s ease,visibility 0s linear 1s;
}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__inner{text-align:center;position:relative;z-index:1}
/* 背景に薄く大きめのロゴ（透かし） */
.loader__logo{position:absolute;left:50%;top:50%;width:520px;height:auto;margin-top:-235px;translate:-50% -50%;opacity:0;animation:logoIn 1.6s .1s ease forwards;pointer-events:none} /* アニメーションの上（上端に少しかぶる位置） */
@keyframes logoIn{to{opacity:.07}}
/* ステージ 360×360。時間軸は全て 5s のキーフレーム（%=秒×20）で共通管理
0.2-0.9 グラス出現 / 0.6-1.4 缶が右上から来る / 1.5-2.0 グラス右へ14°・缶-40°に傾く /
2.0-4.0 注ぐ（液面上昇） / 4.0-4.6 缶が起きてグラス右に着地・グラスまっすぐ */
.pour{position:relative;width:360px;height:360px;margin:0 auto 56px} /* 文字との間隔 */
/* グラス 124×220（左40・下0）。底を軸に傾く */
.pour__glass{position:absolute;left:40px;bottom:0;width:124px;height:220px;transform-origin:50% 100%;opacity:0;animation:glassTilt 5s ease-in-out forwards}
@keyframes glassTilt{
0%,4%{opacity:0;rotate:0deg}
18%{opacity:1;rotate:0deg}
30%{rotate:0deg}
40%{rotate:14deg}
80%{rotate:14deg}
92%,100%{opacity:1;rotate:0deg}
}
.pour__glass-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* ボウルの内側の形を座標で指定（画像マスクは file:// で読めないため） */
.pour__mask{
position:absolute;inset:0;
clip-path:polygon(17.5% 3%,18.5% 5%,19% 8%,19% 12%,18% 16%,16% 20%,14% 25%,11.5% 30%,9% 35%,7% 40%,6.5% 45%,7% 50%,9.5% 55%,12% 58%,15.5% 61%,18% 62.4%,22% 63.4%,30% 64.1%,40% 64.5%,50% 64.6%,60% 64.5%,70% 64.1%,78% 63.4%,82% 62.4%,84.5% 61%,87.5% 58%,90% 55%,92.5% 50%,93% 45%,92.5% 40%,90.5% 35%,88% 30%,85.5% 25%,83.5% 20%,82% 16%,81% 12%,80.5% 8%,81% 5%,82% 3%);
}
/* ビール：グラスが傾いても液面が水平に見えるよう逆回転。乗算でガラスの質感を残す */
.pour__beer{
position:absolute;left:-30%;right:-30%;bottom:30%;height:0;transform-origin:50% 100%; /* 下端はclip-pathの丸い底に任せるため、ボウル底より下から始める */
background:linear-gradient(to bottom,#f3d78f,#e9bf5f 60%,#d9a94a);mix-blend-mode:multiply;
animation:beerRise 1.9s 2.05s cubic-bezier(.3,.6,.4,1) forwards,beerLevel 5s ease-in-out forwards;
}
@keyframes beerRise{0%{height:4%}100%{height:48.5%}}
@keyframes beerLevel{0%,30%{rotate:0deg}40%{rotate:-14deg}80%{rotate:-14deg}92%,100%{rotate:0deg}}
.pour__foam{
position:absolute;left:0;right:0;top:-9px;height:12px;background:#fff6e0;mix-blend-mode:normal;
box-shadow:0 2px 3px rgba(150,110,40,.25);opacity:0;animation:fadeIn .5s 2.4s ease forwards;
}
/* 缶 105×205：最終位置はグラスの右（左220・下0）に立つ。注ぐ時はグラスと重ならない位置（中心 266,210）で-40° */
.pour__can{
position:absolute;left:220px;bottom:0;width:105px;height:205px;z-index:1;transform-origin:50% 50%;opacity:0;
animation:canPour 5s cubic-bezier(.4,.1,.3,1) forwards;
}
@keyframes canPour{
0%,12%{opacity:0;transform:translate(120px,-40px) rotate(0deg)}
28%{opacity:1;transform:translate(16px,-64px) rotate(0deg)}
40%{transform:translate(16px,-64px) rotate(-40deg)}
80%{transform:translate(16px,-64px) rotate(-40deg)}
92%,100%{opacity:1;transform:translate(0,0) rotate(0deg)}
}
@keyframes fadeIn{to{opacity:1}}
.loader__txt{font-size:17px;line-height:2;letter-spacing:.12em;opacity:0;translate:0 12px;transition:opacity 1s ease,translate 1s ease}
.loader.is-t1 .loader__txt--1,.loader.is-t2 .loader__txt--2{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.loader{display:none}}