@charset "UTF-8";
/* ==========================================================================
   LiO 凛桜 — 台湾の輸入業者向けサイト（第2版）
   ベース：Pattern 49 Jewelry「漆黒の世界観とスポットライトの演出家」
     - 49から残したもの：暗い地／全面写真に地色のグラデーション／中央の大きな題字／
       DISCOVER の落ちる線／スティッキー・ストーリー（暗く落とした写真＋放射状の影）／
       3:4 の写真グリッド／細い枠のボタン／中央揃えのフッター
     - 変えたもの：漆黒 #000 → チラシの森の緑を深くした色。そこへ「光が差す」
       （チラシ中央の明るいミントを放射状の光として重ねる）。差し色はラベルの紅、線は金
   ※ #000 は使っていない。最も暗い色は #16302D（深い森の緑）
   ========================================================================== */

@font-face{font-family:'Cormorant';src:url(../fonts/cormorant.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Cormorant';src:url(../fonts/cormorant-italic.woff2) format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'Cinzel';src:url(../fonts/cinzel-500.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  /* 地（チラシの縁の緑 #5B917E を深く落としたもの） */
  --forest-0:#3A695F;
  --forest-1:#46786C;
  --forest-2:#568E80;
  /* 光（チラシ中央の明るいミント #AFE0DE） */
  --light:#AFE0DE;
  --sage:#5B917E;       /* チラシの地 */
  --band:#3F7F8E;       /* チラシの「発売中」の帯 */
  --paper:#F7F5F0;      /* チラシの白いフッター */
  --text:#EEF4F1;
  --text-2:rgba(244,248,246,.86);
  --ink:#1D3B37;
  --red:#A3265A;        /* ラベルの LiO の紅 */
  --red-d:#861C49;
  --gold:#C2A874;
  --gold-l:#F1E4BE;
  --font-lat:'Cormorant',serif;
  --font-cap:'Cinzel',serif;
  --font-tc:'Noto Serif TC','Noto Serif CJK TC',serif;
  --font-jp:'Noto Serif JP','Noto Serif CJK JP',serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--forest-1);color:var(--text);font-family:var(--font-tc);line-height:1.9;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.lat{font-family:var(--font-lat);font-variant-numeric:lining-nums}
.cin{font-family:var(--font-cap);letter-spacing:.2em}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:760px}
.center{text-align:center}

/* 光：各セクションの上から差し込む放射状の光（49のスポットライトを、明るい光として） */
.product,.makers,.terms,.faq,.contact{position:relative;isolation:isolate}
.product::before,.makers::before,.terms::before,.faq::before,.contact::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(175,224,222,.20) 0%,rgba(175,224,222,.06) 45%,transparent 72%)}

.label{font-family:var(--font-cap);font-size:13px;letter-spacing:.32em;color:var(--gold-l);text-align:center;margin-bottom:14px}
.sec-title{font-size:clamp(26px,3.2vw,36px);font-weight:500;letter-spacing:.16em;text-align:center;color:#fff;margin-bottom:26px}
.sec-title::after{content:'';display:block;width:1px;height:40px;background:linear-gradient(var(--gold),transparent);margin:22px auto 0}
.lead{text-align:center;color:var(--text-2);font-size:16px;margin:0 auto 64px;max-width:720px}
.note{font-size:13px;color:var(--text-2);margin-top:14px}

/* ---------- ボタン（49の細枠ボタン＋紅の塗り） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 38px;font-size:15px;letter-spacing:.16em;border:1px solid transparent;transition:all .4s;cursor:pointer;font-family:var(--font-tc)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px rgba(163,38,90,.35)}
.btn-red:hover{background:var(--red-d);transform:translateY(-2px)}
.btn-line{border-color:rgba(238,244,241,.6);color:#fff;background:transparent}
.btn-line:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-sm{padding:9px 22px;font-size:13px}
.btn-wide{width:100%;padding:18px;font-size:17px;margin-top:10px}

/* ---------- ローダー（49：脈打つロゴ＋光のにじみ） ---------- */
.loader{position:fixed;inset:0;background:radial-gradient(ellipse at center,var(--forest-2),var(--forest-0));z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .8s ease,visibility .8s}
.loader.is-hidden{opacity:0;visibility:hidden}
.loader-logo{font-family:var(--font-lat);font-size:48px;color:#fff;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1;text-shadow:0 0 24px rgba(175,224,222,.8)}}

/* ---------- ヘッダー（49：透明→スクロールでぼかし） ---------- */
.navbar{position:fixed;top:0;left:0;width:100%;padding:26px 48px;display:flex;align-items:center;gap:32px;z-index:1000;transition:background .4s,padding .4s}
.navbar.is-scrolled{background:rgba(33,68,63,.84);backdrop-filter:blur(10px);padding:14px 48px}
.navbar-brand{display:flex;align-items:baseline;gap:8px;color:#fff}
.navbar-brand .lat{font-size:30px;line-height:1;font-weight:500}
.navbar-brand small{font-family:var(--font-jp);font-size:12px;letter-spacing:.3em;color:var(--text-2)}
.navbar-menu{display:flex;gap:28px;margin-left:auto;font-size:14px;letter-spacing:.1em}
.navbar-menu a{color:var(--text-2);transition:color .3s}
.navbar-menu a:hover{color:#fff}

.pamphlet-ribbon{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:999;background:rgba(247,245,240,.96);color:var(--ink);font-size:14px;padding:10px 44px 10px 20px;box-shadow:0 10px 30px rgba(8,20,18,.25);max-width:calc(100% - 32px);border-left:3px solid var(--red)}
.ribbon-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--ink);font-size:18px;cursor:pointer}

/* ---------- 1. ヒーロー（49：全面写真が下で地色に溶ける／チラシ：上に白い題字） ---------- */
.hero{position:relative;isolation:isolate;height:100vh;height:100svh;min-height:680px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden;text-align:center}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--sage)}
.hero-image{width:100%;height:100%;object-fit:cover;object-position:50% 62%;animation:slowZoom 22s infinite alternate linear;filter:saturate(.85) brightness(1)}
@keyframes slowZoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
/* 49は黒へ落とす → ここは森の緑へ落とす。上下を深く、中央は光が当たって明るい */
.hero-bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(70,120,108,0) 84%,var(--forest-1) 100%),
  radial-gradient(ellipse 38% 46% at 50% 56%,rgba(175,224,222,0) 0%,rgba(33,68,63,.08) 60%,rgba(33,68,63,.36) 100%),
  linear-gradient(to bottom,rgba(33,68,63,.42) 0%,rgba(33,68,63,.02) 32%,rgba(33,68,63,.02) 64%,rgba(70,120,108,.8) 90%,var(--forest-1) 100%)}
/* 上から差すスポットライト */
.hero-light{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  conic-gradient(from 180deg at 50% -8%,transparent 0deg,rgba(220,245,240,.16) 162deg,rgba(220,245,240,.22) 180deg,rgba(220,245,240,.16) 198deg,transparent 360deg);
  mix-blend-mode:screen;animation:beam 9s ease-in-out infinite alternate}
@keyframes beam{from{opacity:.65}to{opacity:1}}
.hero-top{padding-top:118px}
.hero-kicker{font-size:clamp(18px,2vw,24px);letter-spacing:.42em;color:#fff;text-shadow:0 2px 18px rgba(22,48,45,.55)}
.hero-title .lat{display:block;font-size:clamp(96px,13vw,180px);font-weight:500;line-height:.95;color:#fff;letter-spacing:.01em;text-shadow:0 4px 30px rgba(22,48,45,.45)}
.hero-sub{font-family:var(--font-jp);color:#fff;letter-spacing:.5em;font-size:15px;margin-top:6px;text-shadow:0 2px 12px rgba(22,48,45,.5)}
.hero-tagline{margin-top:18px;color:#fff;font-size:clamp(16px,1.6vw,20px);letter-spacing:.34em;text-shadow:0 2px 14px rgba(22,48,45,.6)}
.inline-cta{margin:64px auto 0;text-align:center;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;max-width:820px;padding:28px 24px;border-top:1px solid rgba(220,203,158,.28);border-bottom:1px solid rgba(220,203,158,.28)}
.inline-cta p{flex:1 1 100%;color:#fff;letter-spacing:.08em;font-size:16px;margin-bottom:4px}
.quote-tips{max-width:560px;margin:-36px auto 36px;padding:18px 22px;border:1px solid rgba(220,203,158,.35);background:rgba(175,224,222,.06)}
.quote-tips-t{color:var(--gold-l);font-size:14px;letter-spacing:.1em;margin-bottom:6px;text-align:center}
.quote-tips ol{list-style:none;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;counter-reset:q;color:#fff;font-size:15px}
.quote-tips li::before{counter-increment:q;content:counter(q);font-family:var(--font-lat);font-variant-numeric:lining-nums;color:var(--gold-l);margin-right:6px;font-size:18px}
.hero-bottom{position:absolute;left:0;right:0;bottom:86px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 6vw;text-align:left}
.hero-left{max-width:34vw}
.hero-left .chips{justify-content:flex-start;margin-bottom:0}
.hero-bottom .hero-btns{flex-direction:column;align-items:stretch;min-width:240px}
.hero-lead{font-size:clamp(16px,1.6vw,19px);letter-spacing:.08em;margin-bottom:20px;color:#fff}
.hero-lead strong{color:#fff;font-weight:600;border-bottom:1px solid var(--red);padding-bottom:2px}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:26px}
.chips li{border:1px solid rgba(220,203,158,.7);padding:4px 14px;font-size:14px;letter-spacing:.06em;color:#fff;background:rgba(22,48,45,.35);backdrop-filter:blur(4px)}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.reveal-text{opacity:0;transform:translateY(26px)}
body:not(.is-loading) .reveal-text{animation:fadeUp 1.5s cubic-bezier(.2,.8,.2,1) forwards}
.delay-1{animation-delay:.3s!important}.delay-2{animation-delay:.6s!important}.delay-3{animation-delay:.9s!important}
@keyframes fadeUp{to{opacity:1;transform:none}}
.scroll-indicator{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-2);font-size:10px}
.scroll-line{width:1px;height:46px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.scroll-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:#fff;animation:dropLine 2s infinite ease-in-out}
@keyframes dropLine{to{top:100%}}

/* ---------- 2. スティッキー・ストーリー（49の中核そのまま。影を緑に、中央に光） ---------- */
.story{position:relative;background:var(--forest-1)}
.sticky-container{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;z-index:1}
.sticky-visual{width:100%;height:100%}
.sticky-visual img{width:100%;height:100%;object-fit:cover;opacity:.6;filter:saturate(.85) brightness(.9);transition:opacity .6s ease-in-out}
.gradient-overlay{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 45%,rgba(175,224,222,.16) 0%,rgba(70,120,108,.34) 38%,rgba(70,120,108,.84) 78%,var(--forest-1) 100%)}
.scroll-content{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh;padding-bottom:40vh}
.story-intro{height:70vh;display:flex;flex-direction:column;justify-content:center}
.story-block{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 24px;opacity:.2;transform:scale(.95);filter:blur(4px);transition:all .6s cubic-bezier(.2,.8,.2,1)}
.story-block.is-active{opacity:1;transform:none;filter:none}
.story-no{font-size:22px;color:var(--gold-l);margin-bottom:18px}
.story-heading{font-size:clamp(24px,3vw,34px);letter-spacing:.16em;color:#fff;margin-bottom:28px;font-weight:500}
.story-text{font-size:clamp(15px,1.6vw,19px);line-height:2.2;max-width:680px;color:#fff;text-shadow:0 4px 12px rgba(22,48,45,.8)}

/* ---------- 3. 商品（49の SELECTED PIECES の3:4グリッド） ---------- */
.product{padding:150px 0 130px;background:var(--forest-1)}
.bot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:1000px;margin:0 auto}
.bot-card{text-align:center}
.bot-visual{aspect-ratio:3/4;overflow:hidden;background:var(--forest-2);margin-bottom:20px;position:relative}
.bot-visual img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform .8s,opacity .8s}
.bot-card:hover .bot-visual img{transform:scale(1.05);opacity:1}
.bot-type{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 35%,rgba(175,224,222,.38),var(--forest-2) 70%)}
.bot-type span{font-size:120px;color:rgba(255,255,255,.92);font-weight:500;text-shadow:0 0 40px rgba(175,224,222,.6)}
.bot-card h3{font-size:20px;letter-spacing:.2em;font-weight:500;color:#fff}
.bot-card p{font-size:13px;letter-spacing:.3em;color:var(--text-2)}

/* ---------- 4. 作り手（暗い地に、光を受けた細枠のカード） ---------- */
.makers{padding:130px 0;background:linear-gradient(180deg,var(--forest-1),var(--forest-0))}
.makers-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.maker{background:rgba(255,255,255,.04);border:1px solid rgba(220,203,158,.28);padding:46px 42px}
.maker .label{text-align:left}
.maker-name{font-size:26px;letter-spacing:.12em;font-weight:500;margin-bottom:4px;color:#fff}
.maker-place{color:var(--text-2);font-size:14px;margin-bottom:18px}
.maker p{color:var(--text)}
.awards{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:6px}
.awards li{font-family:var(--font-lat);font-size:17px;padding-left:22px;position:relative;color:var(--gold-l)}
.awards li::before{content:'';position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--gold)}
.maker .note{color:var(--text-2)}
.maker-photos{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin-bottom:26px}
.maker-photos img{width:100%;aspect-ratio:1/1;object-fit:cover}
.maker-photos .founder{object-position:44% 30%}
.sign{margin-top:18px;letter-spacing:.1em;color:#fff}
.sign small{color:var(--text-2)}

/* ---------- 5. 規格と条件 ---------- */
.terms{padding:130px 0;background:var(--forest-0)}
.terms-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.table-card{padding:40px;border:1px solid rgba(220,203,158,.3);background:linear-gradient(180deg,rgba(175,224,222,.07),rgba(255,255,255,.02))}
.table-card h3{font-size:18px;letter-spacing:.2em;margin-bottom:14px;color:var(--gold-l);font-weight:500}
.table-card dl div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(220,203,158,.22)}
.table-card dt{color:var(--text-2);font-size:15px;flex-shrink:0}
.table-card dd{text-align:right;font-size:16px;color:#fff}

/* ---------- 6. 流れ（チラシの「発売中」の帯の色） ---------- */
.flow{padding:130px 0;background:var(--band);color:#fff}
.flow .label{color:#fff;opacity:.8}
.flow .lead{color:rgba(255,255,255,.85)}
.flow-list{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.flow-list::before{content:'';position:absolute;top:34px;left:10%;right:10%;height:1px;background:rgba(255,255,255,.45)}
.flow-list li{text-align:center;padding:0 14px;position:relative}
.flow-no{display:flex;align-items:center;justify-content:center;width:68px;height:68px;margin:0 auto 18px;border-radius:50%;background:var(--band);border:1px solid rgba(255,255,255,.7);font-size:16px;color:#fff;position:relative;z-index:1;letter-spacing:.1em}
.flow-list li.is-key .flow-no{background:var(--red);border-color:var(--red)}
.flow-list h3{font-size:19px;letter-spacing:.14em;margin-bottom:8px;font-weight:500}
.flow-list p{font-size:14px;line-height:1.8;color:rgba(255,255,255,.88)}
.flow-list strong{border-bottom:1px solid #fff}
.flow .note{color:rgba(255,255,255,.8);margin-top:40px}

/* ---------- 7. FAQ ---------- */
.faq{padding:130px 0;background:var(--forest-1)}
.faq details{border-bottom:1px solid rgba(220,203,158,.25)}
.faq details:first-of-type{border-top:1px solid rgba(220,203,158,.25)}
.faq summary{list-style:none;cursor:pointer;padding:22px 56px 22px 8px;letter-spacing:.06em;position:relative;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'Q';font-family:var(--font-lat);color:var(--gold-l);font-size:22px;margin-right:14px}
.faq summary::after{content:'+';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--font-lat);font-size:26px;color:var(--gold-l);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 8px 22px 42px;color:var(--text-2)}

/* ---------- 8. 問い合わせ（光を受けた白い紙＝チラシのフッターの白） ---------- */
.contact{padding:130px 0;background:linear-gradient(180deg,var(--forest-1),var(--forest-0))}
.form{background:var(--paper);color:var(--ink);padding:46px;box-shadow:0 0 0 1px rgba(220,203,158,.4),0 30px 80px rgba(8,20,18,.35),0 0 120px rgba(175,224,222,.18)}
.form fieldset{border:0;margin-bottom:26px}
.form legend,.field>span{display:block;font-weight:600;letter-spacing:.06em;margin-bottom:10px;font-size:15px}
.form em{font-style:normal;font-size:11px;color:#fff;background:var(--red);padding:1px 7px;margin-left:6px;vertical-align:2px;letter-spacing:.1em}
.form small{font-weight:400;color:#5d7773}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opts label{cursor:pointer}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:inline-block;padding:10px 18px;border:1px solid rgba(29,59,55,.3);font-size:14px;transition:all .25s;background:#fff}
.opts input:checked+span{background:var(--forest-2);border-color:var(--forest-2);color:#fff}
.opts input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:block;margin-bottom:20px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid rgba(29,59,55,.28);background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--band)}
.agree{display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px;font-size:14px;cursor:pointer}
.agree input{margin-top:6px;width:18px;height:18px;accent-color:var(--forest-2)}
.agree a{color:var(--band);text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fmsg{margin-top:16px;font-size:15px;min-height:1em}
.fmsg.ok{color:var(--forest-2);background:#E6F1EC;padding:14px 16px;border-left:3px solid var(--band)}
.fmsg.ng{color:var(--red);background:#F8ECF0;padding:14px 16px;border-left:3px solid var(--red)}
.alt-contact{margin-top:30px;text-align:center;color:var(--text-2);font-size:15px}
.alt-contact a{color:#fff}

/* ---------- フッター（チラシ最下段の白い帯：Ligareロゴ＋店の情報） ---------- */
.footer{background:var(--paper);color:var(--ink);padding:60px 0 110px;border-top:4px solid var(--band)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:14px;padding:0 24px}
.footer-logo-img{margin-bottom:14px}
.footer-co{font-weight:600}
.warn{display:flex;align-items:center;gap:14px;margin:22px 0 6px;flex-wrap:wrap;justify-content:center}
.warn-box{border:2px solid var(--ink);padding:4px 14px;font-size:20px;font-weight:700;letter-spacing:.14em;font-family:'Noto Sans TC','Noto Sans CJK TC',sans-serif}
.warn span:last-child{font-size:16px;font-weight:600;font-family:'Noto Sans TC','Noto Sans CJK TC',sans-serif}
.age{font-size:13px;color:#5d7773}
.footer-nav{margin-top:14px;font-size:13px}
.footer-nav a{text-decoration:underline}
.copyright{margin-top:10px;font-size:12px;color:#5d7773;font-family:var(--font-cap);letter-spacing:.1em}

/* ---------- スクロールで出てくる ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1;transform:none}

.sticky-cta{display:none}

/* ---------- レスポンシブ ---------- */
@media (max-width:960px){
  .flow-list{grid-template-columns:1fr;gap:26px}
  .flow-list::before{top:0;bottom:0;left:34px;right:auto;width:1px;height:auto}
  .flow-list li{display:grid;grid-template-columns:68px 1fr;column-gap:18px;text-align:left;padding:0}
  .flow-no{grid-row:span 2;margin:0}
  .flow-list h3{align-self:end;margin-bottom:0}
}
@media (max-width:768px){
  .navbar,.navbar.is-scrolled{padding:12px 16px}
  .navbar-cta{display:none}
  .pamphlet-ribbon{bottom:16px;font-size:13px}
  .hero{height:auto;min-height:0;justify-content:flex-start}
  .hero-bg{bottom:auto;height:74vh;height:74svh}
  .hero-light{bottom:auto;height:74svh}
  .hero-image{object-position:50% 64%}
  .hero-top{position:absolute;top:0;left:0;right:0;padding-top:84px}
  .hero-title .lat{font-size:92px}
  .hero-kicker{font-size:16px}
  .hero-tagline{font-size:15px;letter-spacing:.24em}
  .inline-cta .btn{flex:1 1 100%}
  .hero-bottom{position:static;display:block;padding:66svh 16px 40px;width:100%;text-align:center}
  .hero-left{max-width:none}
  .hero-left .chips{justify-content:center;margin-bottom:22px}
  .hero-bottom .hero-btns{min-width:0}
  .hero-btns .btn{flex:1 1 100%}
  .scroll-indicator{display:none}
  .story-text br{display:none}
  .bot-grid{gap:10px}
  .bot-type span{font-size:52px}
  .bot-card h3{font-size:15px;letter-spacing:.1em}
  .bot-card p{font-size:9px;letter-spacing:.14em}
  .makers-grid,.terms-grid{grid-template-columns:1fr}
  .maker,.table-card{padding:30px 22px}
  .form{padding:28px 18px}
  .row2{grid-template-columns:1fr;gap:0}
  .wrap{padding:0 16px}
  .product,.makers,.terms,.flow,.faq,.contact{padding:96px 0}
  .lead br{display:none}
  .sticky-cta{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:900;background:var(--red);color:#fff;text-align:center;padding:15px;font-size:16px;letter-spacing:.14em;box-shadow:0 10px 28px rgba(8,20,18,.4);transition:transform .35s,opacity .35s}
  .sticky-cta.is-hidden{transform:translateY(140%);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.reveal-text{opacity:1;transform:none}
  .story-block{opacity:1;filter:none;transform:none}
}

/* ---- 2026-10-02 確定情報の反映 ---- */
.loader-logo img{display:block}
.brand-mark{height:26px;width:auto;display:block;align-self:center}
.hero-mark{display:block;margin:0 auto;height:clamp(84px,11.5vw,160px);width:auto;filter:drop-shadow(0 4px 30px rgba(22,48,45,.45))}
.lead.concept{margin-top:-28px;color:var(--gold-l)}
.enjoy{max-width:1000px;margin:64px auto 0;text-align:center}
.enjoy-title{font-size:22px;letter-spacing:.2em;font-weight:500;color:#fff;margin-bottom:22px}
.enjoy-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.enjoy-list li{border:1px solid rgba(220,203,158,.4);padding:22px 8px 18px;background:rgba(175,224,222,.05)}
.enjoy-list strong{display:block;font-size:20px;font-weight:500;letter-spacing:.14em;color:#fff}
.enjoy-list span{display:block;font-size:14px;letter-spacing:.14em;color:var(--text-2);margin-top:4px}
.stats{list-style:none;display:flex;justify-content:center;gap:72px;flex-wrap:wrap;margin:56px auto 0}
.stats li{text-align:center}
.stats b{font-size:64px;font-weight:500;line-height:1;color:var(--gold-l)}
.stats i{font-style:normal;font-size:18px;color:#fff;margin-left:4px}
.stats span{display:block;font-size:14px;color:var(--text-2);margin-top:8px;letter-spacing:.06em}
.alt-t{font-size:14px;letter-spacing:.1em;margin-bottom:12px}
.btn-lineapp{margin-bottom:16px}
.footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.footer .jp{font-family:var(--font-jp)}
@media (max-width:768px){
  .hero-mark{height:80px}
  .brand-mark{height:22px}
  .enjoy-list{gap:8px}
  .enjoy-list strong{font-size:15px;letter-spacing:.06em}
  .enjoy-list span{font-size:10px;letter-spacing:.06em}
  .stats{gap:36px}
  .stats b{font-size:48px}
  .lead.concept{margin-top:-16px}
}
.story-heading{text-shadow:0 2px 18px rgba(22,48,45,.9)}
.story-text{text-shadow:0 2px 14px rgba(22,48,45,.95),0 0 2px rgba(22,48,45,.8)}

/* ---- 2026-10-02 写真を増やす（受領素材） ---- */
.wide-photo{max-width:1000px;margin:0 auto 56px;aspect-ratio:21/9;overflow:hidden}
.wide-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 42%}
.enjoy{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center;text-align:left}
.enjoy-video video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:var(--forest-2);box-shadow:0 20px 60px rgba(8,20,18,.45)}
.cap{font-size:12px;color:var(--text-2);margin-top:8px;letter-spacing:.06em}
.enjoy-body .label{text-align:left}
.enjoy-list li{text-align:center}
.maker-photos-dist{grid-template-columns:1.3fr 1fr}
.sign-row{display:flex;align-items:center;gap:16px;margin-top:18px}
.sign-row .sign{margin-top:0}
.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 30%;flex:none;border:1px solid rgba(220,203,158,.5)}
.photo-strip{background:var(--forest-1);padding:0 0 110px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:1400px;margin:0 auto;padding:0 24px}
.strip figure{position:relative;aspect-ratio:3/4;overflow:hidden;margin:0}
.strip img,.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.strip figure:hover img,.mosaic figure:hover img{transform:scale(1.04)}
.strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;font-size:12px;letter-spacing:.1em;color:#fff;background:linear-gradient(180deg,transparent,rgba(22,48,45,.82))}
.journey{padding:130px 0;background:var(--forest-0)}
.journey .lead .lat{color:var(--gold-l);letter-spacing:.14em;font-size:1.1em}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:6px;max-width:1200px;margin:0 auto}
.mosaic figure{overflow:hidden;margin:0}
.m-a{grid-column:span 2;grid-row:span 2}
.m-b{grid-row:span 2}
.m-c{}
.m-d{}
.m-e{grid-row:span 2}
.m-f{grid-column:span 3;grid-row:span 2}
@media (max-width:900px){
  .enjoy{grid-template-columns:1fr;gap:28px;text-align:center}
  .enjoy-video{max-width:260px;margin:0 auto}
  .enjoy-body .label{text-align:center}
  .strip{grid-template-columns:repeat(2,1fr);padding:0 12px}
  .photo-strip{padding-bottom:70px}
  .journey{padding:90px 0}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;padding:0 12px}
  .m-a{grid-column:span 2;grid-row:span 2}
  .m-f{grid-column:span 1;grid-row:span 2}
  .wide-photo{aspect-ratio:16/10;margin-bottom:36px}
}

/* ---- 2026-10-02 動き（スクロール演出）。html に .mo-on が付いたときだけ有効。デザインと構成は変えない ---- */
.scroll-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold-l) 60%,var(--red));z-index:1200;pointer-events:none}
/* 見出し：1文字ずつ立ち上がる。下の細い線は上から伸びる */
.mo-on .mo-title{opacity:1!important;transform:none!important}
.mo-on .mo-title .wd{display:inline-block;white-space:nowrap}
.mo-on .mo-title .ch{display:inline-block;opacity:0;transform:translateY(.75em) rotate(5deg);transform-origin:0 100%;transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*42ms)}
.mo-on .mo-title.is-in .ch{opacity:1;transform:none}
.mo-on .sec-title.mo-title::after{transform:scaleY(0);transform-origin:50% 0;transition:transform 1.1s .55s cubic-bezier(.2,.8,.2,1)}
.mo-on .sec-title.mo-title.is-in::after{transform:scaleY(1)}
/* 英字ラベル：字間が締まりながら現れる */
.mo-on .mo-label{opacity:0;letter-spacing:.72em;transition:opacity 1.1s,letter-spacing 1.5s cubic-bezier(.2,.8,.2,1)}
.mo-on .mo-label.is-in{opacity:1;letter-spacing:.32em}
.mo-on .flow .mo-label.is-in{opacity:.8}
/* 写真：幕が上がるように現れ、中の写真はゆっくり寄りから引く */
.mo-on .mo-photo{clip-path:inset(0 0 calc(100% - 1px) 0);transition:clip-path 1.35s cubic-bezier(.65,0,.15,1);transition-delay:calc(var(--i,0)*120ms)}
.mo-on .mo-photo.is-in{clip-path:inset(0 0 0 0)}
.mo-on .mo-photo>img,.mo-on .mo-photo>video{scale:1.2;transition:scale 1.9s cubic-bezier(.2,.8,.2,1),transform .9s;transition-delay:calc(var(--i,0)*120ms),0s}
.mo-on .mo-photo.is-in>img,.mo-on .mo-photo.is-in>video{scale:1}
.mo-on img.mo-photo{scale:1.1;transition:clip-path 1.35s cubic-bezier(.65,0,.15,1),scale 1.9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*150ms)}
.mo-on img.mo-photo.is-in{scale:1}
/* 写真の中身がスクロールに合わせてゆっくりずれる */
.mo-on .mo-par>img{position:relative;top:-8%;height:116%;translate:0 var(--py,0px);will-change:translate}
/* まとまりの中の要素が順番に出る */
.mo-on .reveal{transition-delay:calc(var(--i,0)*110ms)}
.mo-on .mo-item{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*110ms)}
.mo-on .mo-item.is-in{opacity:1;transform:none}
.mo-on .table-card dl>div,.mo-on .awards li{opacity:0;transform:translateX(-18px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.3s + var(--i,0)*75ms)}
.mo-on .table-card.is-in dl>div,.mo-on .maker.is-in .awards li{opacity:1;transform:none}
.mo-on .enjoy-list li{opacity:0;transform:translateY(18px) scale(.96);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.35s + var(--i,0)*130ms)}
.mo-on .enjoy.is-in .enjoy-list li{opacity:1;transform:none}
.mo-on .bot-type span{display:inline-block;opacity:0;transform:scale(.6);filter:blur(8px);transition:opacity 1.2s,transform 1.4s cubic-bezier(.2,.8,.2,1),filter 1.2s;transition-delay:calc(.35s + var(--i,0)*110ms)}
.mo-on .bot-card.is-in .bot-type span{opacity:1;transform:none;filter:none}
/* 取引の流れ：線がスクロールに合わせて伸び、通った番号から灯る */
.flow-progress{position:absolute;top:34px;left:10%;right:10%;height:1px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.9);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
.mo-on .flow-list::before{opacity:.45}
.mo-on .flow-list .flow-no{transition:transform .7s cubic-bezier(.3,1.7,.5,1),box-shadow .6s,opacity .6s}
.mo-on .flow-list li h3,.mo-on .flow-list li p{transition:opacity .7s}
.mo-on .flow-list li:not(.is-on) .flow-no{transform:scale(.8);opacity:.6}
.mo-on .flow-list li:not(.is-on) h3,.mo-on .flow-list li:not(.is-on) p{opacity:.38}
.mo-on .flow-list li.is-on .flow-no{box-shadow:0 0 0 7px rgba(255,255,255,.14)}
/* スティッキーの写真：進むにつれてゆっくり寄る */
.mo-on #storyImage{scale:var(--z,1);will-change:scale}
/* 最初の画面：スクロールで写真が遅れて動き、文字が先に消える */
.mo-on .hero-bg,.mo-on .hero-light{translate:0 var(--hy,0px);will-change:translate}
.mo-on .hero-top{opacity:var(--ho,1);translate:0 var(--ht,0px)}
/* メニュー：今いるセクションに線 */
.navbar-menu a{position:relative}
.navbar-menu a::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--gold-l);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.navbar-menu a:hover::after,.navbar-menu a.is-current::after{transform:scaleX(1)}
.navbar-menu a.is-current{color:#fff}
/* 赤いボタン：光が横切る */
.btn-red{position:relative;overflow:hidden}
.btn-red::before{content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-20deg);transition:left .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.btn-red:hover::before,.inline-cta.is-in .btn-red::before{left:130%}
.inline-cta .btn-red::before{transition-delay:.6s}
@media (max-width:960px){
  .flow-progress{top:0;bottom:0;left:34px;right:auto;width:1px;height:auto;transform-origin:50% 0;transform:scaleY(var(--p,0))}
}
@media (prefers-reduced-motion:reduce){
  .scroll-progress,.flow-progress{display:none}
}

/* ---- 2026-10-02 ヘッダーメニュー：タブレット幅でも表示、スマホはハンバーガー ---- */
.nav-toggle{display:none}
.navbar-menu .menu-cta{display:none}
@media (max-width:1100px){
  .navbar{padding:20px 24px;gap:18px}
  .navbar.is-scrolled{padding:12px 24px}
  .navbar-menu{gap:16px;font-size:13px;letter-spacing:.04em}
  .navbar-cta{padding:10px 16px;font-size:13px;letter-spacing:.08em}
}
@media (max-width:768px){
  .navbar,.navbar.is-scrolled{padding:12px 16px}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;margin-left:auto;padding:0 10px;background:none;border:0;cursor:pointer;position:relative;z-index:2}
  .nav-toggle span{display:block;height:1px;background:#fff;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
  .navbar.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navbar.is-open .nav-toggle span:nth-child(2){opacity:0}
  .navbar.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .navbar.is-open{background:var(--forest-0)}
  .navbar-menu{position:absolute;left:0;top:100%;width:100%;height:calc(100vh - 100%);height:calc(100dvh - 100%);margin:0;padding:18px 28px 40px;display:flex;flex-direction:column;gap:0;font-size:17px;letter-spacing:.14em;background:var(--forest-0);overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
  .navbar.is-open .navbar-menu{visibility:visible;opacity:1;transform:none;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .navbar-menu a{display:block;padding:18px 4px;color:#fff;border-bottom:1px solid rgba(241,228,190,.22);opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
  .navbar.is-open .navbar-menu a{opacity:1;transform:none}
  .navbar.is-open .navbar-menu a:nth-child(1){transition-delay:.06s}
  .navbar.is-open .navbar-menu a:nth-child(2){transition-delay:.10s}
  .navbar.is-open .navbar-menu a:nth-child(3){transition-delay:.14s}
  .navbar.is-open .navbar-menu a:nth-child(4){transition-delay:.18s}
  .navbar.is-open .navbar-menu a:nth-child(5){transition-delay:.22s}
  .navbar.is-open .navbar-menu a:nth-child(6){transition-delay:.26s}
  .navbar.is-open .navbar-menu a:nth-child(7){transition-delay:.32s}
  .navbar-menu a::after{display:none}
  .navbar-menu a.is-current{color:var(--gold-l)}
  .navbar-menu .menu-cta{display:block;margin-top:28px;padding:16px;text-align:center;background:var(--red);border:0;color:#fff;letter-spacing:.16em}
  body.nav-open{overflow:hidden}
  body.nav-open .sticky-cta{transform:translateY(140%);opacity:0}
}