/* ============================================================ TOBIRA studio — SIGNATURE CHASSIS v1 (2026-08-11) 長尺1枚もの用の共通土台。色・書体・固有演出は各店の shop.css で上書きする。 藍染坐忘 demo の品質を土台化したもの（モーション/品質の型のみ共有）。 ============================================================ */ /* ---------- tokens (店ごとに shop.css で上書き) ---------- */ :root{ --ink:#0d0f12; /* 背景 */ --ink-2:#151920; /* 一段明るい面 */ --paper:#f3f0ea; /* 文字色 */ --muted:#9aa3ad; /* 補助文字 */ --line:rgba(243,240,234,.14); --accent:#c8a24a; --accent-2:#e3c377; --maxw:1180px; --pad:clamp(20px,5vw,64px); --sans:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic',sans-serif; --serif:'Zen Old Mincho','Hiragino Mincho ProN','Yu Mincho',serif; --disp:var(--serif); --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--ink);color:var(--paper); font-family:var(--sans);font-size:17px;line-height:1.85;font-weight:400; letter-spacing:.02em;overflow-x:hidden; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit} h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.34;letter-spacing:.01em;margin:0} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} /* ---------- a11y ---------- */ .skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--accent);color:#000; padding:12px 20px;border-radius:0 0 8px 0;font-weight:700} .skip:focus{left:0} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- 初期状態を隠すのは JS が生きている時だけ ---------- html.js-anim は のインラインscriptが付ける。 JSが落ちていれば何も隠れない＝最初から全部読める（アプリ内ブラウザ対策）。 ⚠️ ヒーローとローダーは CSS アニメーションだけで完結させる。 最初に見える部分を CDN の GSAP に依存させない（CDNが遅い/落ちると本文が出ない）。 */ .js-anim .reveal{opacity:0;transform:translateY(30px)} .js-anim .reveal-l{opacity:0;transform:translateX(-28px)} .reveal,.reveal-l{will-change:opacity,transform} @keyframes riseUp{from{transform:translateY(105%)}to{transform:translateY(0)}} @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes loaderOut{to{transform:translateY(-100%);visibility:hidden}} /* ヒーロー：CSSだけで立ち上がる（JSが無くても必ず出る） */ .js-anim [data-split] .l>span{animation:riseUp 1.05s .12s both var(--ease)} .js-anim .hero .eyebrow{animation:fadeUp .85s .34s both var(--ease)} .js-anim .hero-lead{animation:fadeUp .95s .48s both var(--ease)} .js-anim .hero-meta{animation:fadeUp .95s .6s both var(--ease)} /* ---------- loader（CSSだけで開いて閉じる） ---------- */ #loader{position:fixed;inset:0;z-index:9000;background:var(--ink); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px} .js-anim #loader{animation:loaderOut .6s 1.55s both cubic-bezier(.7,0,.2,1)} #loader .lname{overflow:hidden;font-family:var(--disp);font-size:clamp(22px,5vw,40px);letter-spacing:.06em} #loader .lname span{display:block} .js-anim #loader .lname span{animation:riseUp .6s both var(--ease)} #loader .lsub{font-size:12px;letter-spacing:.34em;color:var(--muted)} .js-anim #loader .lsub{animation:fadeUp .5s .28s both var(--ease)} #loader .lbar{width:min(240px,52vw);height:2px;background:var(--line);overflow:hidden} #loader .lbar i{display:block;height:100%;background:var(--accent);transform-origin:left} .js-anim #loader .lbar i{animation:barIn 1.2s .18s both cubic-bezier(.5,0,.2,1)} #lnum{font-size:11px;letter-spacing:.2em;color:var(--muted)} /* ---------- nav ---------- */ #nav{position:fixed;top:0;left:0;right:0;z-index:800;display:flex;align-items:center; justify-content:space-between;padding:16px var(--pad);transition:background .4s,backdrop-filter .4s,border-color .4s; border-bottom:1px solid transparent} #nav.solid{background:rgba(13,15,18,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line)} #nav .brand{font-family:var(--disp);font-size:15px;letter-spacing:.14em;text-decoration:none} #nav .links{display:flex;gap:26px} #nav .links a{font-size:13px;letter-spacing:.1em;text-decoration:none;color:var(--muted); min-height:44px;display:inline-flex;align-items:center;transition:color .3s} #nav .links a:hover{color:var(--paper)} #burger{display:none;width:48px;height:48px;background:none;border:0;cursor:pointer;padding:12px} #burger span{display:block;height:1.5px;background:var(--paper);margin:5px 0;transition:transform .35s,opacity .3s} #burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} #burger.open span:nth-child(2){opacity:0} #burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} #menu{position:fixed;inset:0;z-index:790;background:var(--ink);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .4s} #menu.open{opacity:1;pointer-events:auto} #menu a{font-family:var(--disp);font-size:26px;text-decoration:none;padding:14px 20px;min-height:48px} @media(max-width:820px){#nav .links{display:none}#burger{display:block}} /* ---------- layout ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .narrow{max-width:760px} section{position:relative;padding:clamp(76px,11vw,150px) 0} .eyebrow{font-size:11px;letter-spacing:.32em;color:var(--accent);text-transform:uppercase; display:block;margin-bottom:22px} .eyebrow.ja{letter-spacing:.22em;text-transform:none} h2.big{font-size:clamp(26px,4.2vw,46px);margin-bottom:28px} h3.mid{font-size:clamp(19px,2.4vw,26px);margin-bottom:14px} .lead{font-size:clamp(16px,1.7vw,19px);line-height:1.95;color:#ded9d0} .small{font-size:14px;color:var(--muted);line-height:1.8} .rule{height:1px;background:var(--line);border:0;margin:0} /* ---------- hero ---------- */ .hero{min-height:100svh;display:flex;align-items:flex-end;padding-bottom:clamp(48px,8vw,96px); position:relative;overflow:hidden} .hero-bg{position:absolute;inset:-8% 0 -8% 0;z-index:0} .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.5} .hero-bg::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(13,15,18,.72) 0%,rgba(13,15,18,.35) 42%,var(--ink) 100%)} .hero .wrap{position:relative;z-index:2;width:100%} .hero h1{font-size:clamp(30px,5.6vw,68px);line-height:1.26;margin-bottom:26px} [data-split] .l{display:block;overflow:hidden} [data-split] .l>span{display:block} .hero-lead{max-width:640px;font-size:clamp(15px,1.7vw,18px);line-height:1.95;color:#ddd8cf} .hero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;font-size:12px; letter-spacing:.14em;color:var(--muted)} .hero-meta span{display:inline-flex;align-items:center;gap:8px} .hero-meta span::before{content:'';width:5px;height:5px;background:var(--accent);border-radius:50%} /* ---------- 画像（カーテンリビール） ---------- */ .ph{position:relative;overflow:hidden;background:var(--ink-2)} .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.14)} .js-anim .ph .rev{position:absolute;inset:0;background:var(--ink);transform-origin:top;z-index:2} .ph .rev{position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:top;z-index:2} .ph.tall{aspect-ratio:3/4} .ph.wide{aspect-ratio:16/9} .ph.sq{aspect-ratio:1/1} /* ---------- grid ---------- */ .grid{display:grid;gap:clamp(20px,3.4vw,48px)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center} @media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}} @media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}} /* ---------- card ---------- */ .card{background:var(--ink-2);border:1px solid var(--line);padding:clamp(22px,3vw,34px); transition:border-color .4s,transform .5s var(--ease)} .card:hover{border-color:var(--accent);transform:translateY(-4px)} .card .n{font-size:11px;letter-spacing:.24em;color:var(--accent);display:block;margin-bottom:12px} /* ---------- 数字 ---------- */ .stat{border-top:1px solid var(--line);padding-top:22px} .stat b{display:block;font-family:var(--disp);font-size:clamp(34px,6vw,64px);line-height:1; font-weight:600;color:var(--paper)} .stat b .u{font-size:.38em;margin-left:6px;color:var(--muted)} .stat .k{display:block;margin-top:12px;font-size:12.5px;letter-spacing:.1em;color:var(--muted)} /* ---------- 商品 ---------- */ .beer{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:start; padding:24px 0;border-bottom:1px solid var(--line)} .beer .thumb{aspect-ratio:3/4;overflow:hidden;background:var(--ink-2)} .beer .thumb img{width:100%;height:100%;object-fit:cover} .beer h4{font-size:17px;margin-bottom:6px} .beer .spec{font-size:12px;letter-spacing:.06em;color:var(--accent);margin-bottom:8px} .beer .desc{font-size:14.5px;line-height:1.8;color:#c9c4bc} .beer .price{font-family:var(--disp);font-size:19px;white-space:nowrap;padding-left:10px} .beer .price small{display:block;font-size:11px;color:var(--muted);letter-spacing:.1em;margin-top:4px} @media(max-width:640px){ .beer{grid-template-columns:72px 1fr;gap:14px} .beer .price{grid-column:2;padding-left:0;font-size:17px} } /* ---------- CTA ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px; min-height:52px;padding:0 34px;background:var(--accent);color:#0d0f12; font-weight:700;font-size:15px;letter-spacing:.06em;text-decoration:none;border:0;cursor:pointer; transition:background .3s} .btn:hover{background:var(--accent-2)} .btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--line)} .btn.ghost:hover{border-color:var(--accent);background:transparent} .cta{text-align:center} .cta h2{margin-bottom:20px} .cta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px} /* スマホ下部固定CTA */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:700;display:none; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(13,15,18,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line)} .sticky-cta .btn{width:100%} @media(max-width:820px){.sticky-cta{display:block}body{padding-bottom:74px}} /* ---------- FAQ ---------- */ details{border-bottom:1px solid var(--line);padding:20px 0} summary{cursor:pointer;font-size:16px;font-weight:700;list-style:none; display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:center} summary::-webkit-details-marker{display:none} summary::after{content:'+';color:var(--accent);font-size:22px;line-height:1} details[open] summary::after{content:'−'} details p{margin-top:14px;font-size:15px;color:#c9c4bc} /* ---------- footer / 注記 ---------- */ footer{border-top:1px solid var(--line);padding:52px 0 40px;font-size:13px;color:var(--muted)} .note{background:var(--ink-2);border:1px solid var(--line);border-left:3px solid var(--accent); padding:20px 24px;font-size:13.5px;line-height:1.85;color:#bdb8b0} .age{font-size:12px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line); padding:10px 16px;display:inline-block;margin-top:18px} /* ---------- カーソル（PCのみ） ---------- */ #cursor,#cursorDot{position:fixed;top:0;left:0;pointer-events:none;z-index:9500; border-radius:50%;mix-blend-mode:difference;margin:-100px 0 0 -100px;display:none} #cursor{width:34px;height:34px;border:1px solid var(--paper);transition:width .3s,height .3s} #cursorDot{width:5px;height:5px;background:var(--paper);margin:-102.5px 0 0 -102.5px} #cursor.hover{width:58px;height:58px} @media(hover:hover) and (pointer:fine){#cursor,#cursorDot{display:block}} /* ---------- 進捗バー（汎用） ---------- */ .bar{height:3px;background:var(--line);overflow:hidden;margin-top:12px} .bar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left} /* ---------- reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} html{scroll-behavior:auto} .js-anim .reveal,.js-anim .reveal-l{opacity:1;transform:none} .ph img{transform:none} }