/* ============================================================
   RILAKS MORE 黒豆茶 — TANBA KYOTO
   Design: 墨と金、余白の奥行き。
   ============================================================ */

:root{
  --ink:        #0c0b09;
  --ink-2:      #100e0b;
  --ink-3:      #171410;
  --washi:      #ece4d3;
  --washi-2:    #e3dac6;
  --paper:      #1e1a14;
  --cream:      #e9e1d1;
  --cream-dim:  #a89d89;
  --gold:       #b0905f;
  --gold-2:     #d4b583;
  --gold-dim:   rgba(176,144,95,.55);
  --ruby:       #8e2f24;
  --line:       rgba(233,225,209,.13);
  --line-soft:  rgba(233,225,209,.07);
  --font-jp: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Cormorant Garamond", "Times New Roman", serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-2: cubic-bezier(.65,.05,0,1);

  /* ---- FV / Header（プロトタイプ tokens 準拠） ---- */
  --ink-950: #070605;
  --ink-900: #0b0908;
  --kinari-100: #f2ede1;
  --brass-400: #b39a68;
  --brass-500: #96814f;
  --text-hi:  #ece5d8;
  --text-mid: #b5aa99;
  --text-low: #7d7466;
  --line-dark:  rgba(236, 229, 216, 0.16);
  --line-dark-strong: rgba(236, 229, 216, 0.38);
  --font-display: "Shippori Mincho B1", "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-ui: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --frame-gutter: clamp(20px, 6vw, 96px);
  --ease-quiet: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ font-size:62.5%; scroll-behavior:auto; }
html,body{ overflow-x:clip; }
body{
  font-family:var(--font-jp);
  font-size:1.4rem;
  font-weight:400;
  line-height:2.1;
  letter-spacing:.05em;
  color:var(--cream);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-loading{ overflow:hidden; }
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--gold); color:var(--ink); }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#2b261d; border-radius:99px; }
:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }
.sp-only{ display:none; }

.v-text{ writing-mode:vertical-rl; text-orientation:mixed; }

/* media frames must always crop their contents */
.media-clip{ overflow:hidden; }

/* ---------- Grain ---------- */
.grain{
  position:fixed; inset:-50%; z-index:2000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;
  animation:grain 900ms steps(4) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-2%,1.4%); }
  50%{ transform:translate(1.6%,-1%); } 75%{ transform:translate(-1%,-1.8%); }
  100%{ transform:translate(0,0); }
}

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; z-index:5000;
  background:var(--ink);
  display:grid; place-items:center;
}
.loader-inner{ text-align:center; }
.loader-art{ width:min(190px,42vw); height:auto; margin:0 auto 4.5rem; overflow:visible; }
.ld-steam,.ld-cup,.ld-cup-line,.ld-saucer,
.ld-bag rect,.ld-bag line,.ld-bag ellipse,.ld-bag path{
  stroke-dasharray:600;
  stroke-dashoffset:600;
}
.ld-bag{ opacity:0; }
.loader-copy{
  font-size:1.7rem; font-weight:500; letter-spacing:.34em; text-indent:.34em;
  color:var(--cream);
}
.loader-copy span{ display:inline-block; }
.loader-brand{
  margin-top:2.6rem;
  font-family:var(--font-en); font-size:1.1rem; letter-spacing:.5em; text-indent:.5em;
  color:var(--gold); font-weight:500;
}
.loader-brand i{ font-style:normal; opacity:.55; }

/* ---------- Header（プロトタイプ準拠） ---------- */
.head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px clamp(20px, 4vw, 56px);
}
body.is-loading .head { opacity: 0; }
.head__logo { display: flex; align-items: center; text-decoration: none; }
.head__logoimg { height: clamp(44px, 4.6vw, 58px); width: auto; display: block; }
.head__cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-ui); font-size: 16px; letter-spacing: 0.26em; text-decoration: none;
  color: var(--text-hi); border: 1px solid var(--line-dark-strong); padding: 16px 28px 16px 36px;
  transition: background .45s var(--ease-quiet), color .45s var(--ease-quiet);
  background: rgba(11, 9, 8, 0.35); backdrop-filter: blur(4px);
}
.head__cta svg { width: 18px; height: 18px; flex: none; opacity: 0.9; }
.head__cta:hover { background: var(--kinari-100); color: var(--ink-900); }

/* hoverRoll（AO式テキストロール） */
.hr { display: inline-block; overflow: hidden; position: relative; vertical-align: middle; }
.hr > span { display: block; }
.hr > span + span { position: absolute; left: 0; top: calc(100% + 2px); }
a:hover .hr > span, button:hover .hr > span { animation: hr-roll 0.75s cubic-bezier(0.19, 1, 0.22, 1) 0s 1; }
@keyframes hr-roll {
  0% { transform: translateY(0); }
  100% { transform: translateY(calc(-100% - 2px)); }
}

/* ---------- Scroll progress ---------- */
.progress{
  position:fixed; right:clamp(12px,2vw,26px); top:50%; transform:translateY(-50%);
  width:1px; height:130px; background:rgba(233,225,209,.12); z-index:800;
}
.progress span{
  display:block; width:100%; height:100%;
  background:var(--gold); transform:scaleY(0); transform-origin:top;
}
body.is-loading .progress{ opacity:0; }

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1.55em 3.8em;
  border:1px solid var(--gold);
  background:var(--gold);
  color:var(--ink);
  font-size: 1.45rem;
  font-weight:500;
  letter-spacing:.34em;
  text-indent:.34em;
  overflow:hidden;
  white-space:nowrap;
  transition:color .5s;
}
.btn span{ position:relative; z-index:1; }
.btn .ico{
  width:1.25em; height:1.25em; margin-right:1.1em;
  position:relative; z-index:1; flex:none;
}
.btn::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  transform:translateY(102%); transition:transform .65s var(--ease);
}
.btn:hover{ color:var(--gold-2); }
.btn:hover::after{ transform:translateY(0); }

.btn--ghost{ background:transparent; color:var(--cream); border-color:var(--gold-dim); }
.btn--ghost::after{ background:var(--gold); }
.btn--ghost:hover{ color:var(--ink); }

/* ---------- Section common ---------- */
section{ position:relative; }
.sec-head{ position:relative; z-index:2; padding:0 6vw; }
.sec-label{
  display:flex;
  align-items:center;
  gap:1.8rem;
  font-size: 1.45rem;
}
.sec-label::before{
  content:""; width:4.6rem; height:1px; background:var(--gold); flex:none;
  transform-origin:left;
}
.sec-label .jp{ letter-spacing:.42em; color:var(--gold); white-space:nowrap; }
.sec-label .en{
  font-family:var(--font-en);
  font-weight:500;
  letter-spacing:.44em;
  text-transform:uppercase;
  color:var(--cream-dim);
  font-size: 1rem;
  /* white-space: nowrap; */
  line-height: 1.2;
}

[data-split]{ display:block; }
[data-split-head] > span{ display:block; }
[data-split] .ch, [data-split-head] .ch{ display:inline-block; }

/* graceful degradation when JS is off */
html:not(.js) .exp{ display:block; }
html:not(.js) .exp-side-inner{ position:static; margin-bottom:8vh; }
html:not(.js) .exp-tline, html:not(.js) .tstep-node{ display:none; }
html:not(.js) .tstep{ margin-bottom:10vh; }
html:not(.js) .moments-pin{ overflow-x:auto; }
html:not(.js) .moments-track{ height:auto; padding:12vh 6vw; }
html:not(.js) .story-frame{ display:none; }
html:not(.js) .fv__tate { opacity: 1; }
html:not(.js) .fv__frame { opacity: 1; }
html:not(.js) .mask > span { transform: none; }

/* ============================================================
   FIRST VIEW — プロトタイプ支給レイアウト準拠
   ============================================================ */

/* 額装の内枠（1pxの繊細な枠線） */
.framed-fine { position: relative; }
.framed-fine::before {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 2;
  border: 1px solid rgba(236, 229, 216, 0.10);
}
.framed-fine::after {
  content: ""; position: absolute; inset: 13px; pointer-events: none; z-index: 2;
  border: 1px solid rgba(179, 154, 104, 0.30);
}

/* 七宝模様（FV背景ポイント） */
.wa-shippou {
  position: absolute; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23b39a68' stroke-opacity='0.5' stroke-width='0.9'%3E%3Ccircle cx='24' cy='24' r='24'/%3E%3Ccircle cx='0' cy='0' r='24'/%3E%3Ccircle cx='48' cy='0' r='24'/%3E%3Ccircle cx='0' cy='48' r='24'/%3E%3Ccircle cx='48' cy='48' r='24'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(closest-side, #000 12%, transparent 96%);
  mask-image: radial-gradient(closest-side, #000 12%, transparent 96%);
}
.wa-shippou--fv-tl {
  top: clamp(-90px, -7vw, -36px); left: clamp(-90px, -7vw, -36px);
  width: clamp(420px, 52vw, 840px); height: clamp(380px, 44vw, 700px);
  opacity: 0.28;
  -webkit-mask-image: radial-gradient(135% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 74%);
  mask-image: radial-gradient(135% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 74%);
}
.wa-shippou--fv-right {
  top: clamp(150px, 20vh, 260px); right: 0;
  width: clamp(180px, 20vw, 320px); height: clamp(360px, 46vh, 620px);
  opacity: 0.5;
}

.mask { display: block; overflow: hidden; }
.mask > span { display: inline-block; transform: translateY(110%); }

.fv {
  position: relative;
  padding: clamp(120px, 17vh, 190px) 0 0;
  max-width: 1680px; margin: 0 auto;
  background: transparent;
}
.fv__copy { position: relative; z-index: 2; padding-left: clamp(48px, 13vw, 260px); padding-right: var(--frame-gutter); max-width: 1280px; }
.fv__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.1vw, 48px);
  letter-spacing: 0.12em;
  line-height: 1.76;
  color: var(--text-hi);
}
.fv__sub {
  margin-top: clamp(0px, calc(3vh - 20px), 10px);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(16px, 1.5vw, 19px); letter-spacing: 0.3em; color: var(--text-mid);
}
.fv__tate {
  position: absolute; right: clamp(64px, calc(3vw + 50px), 102px); top: clamp(170px, 24vh, 280px);
  writing-mode: vertical-rl; font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 21px);
  letter-spacing: 0.34em; line-height: 2.4; color: var(--text-hi); opacity: 0;
  z-index: 2;
}
.fv__frame {
  --fv-l: 1;
  position: relative; z-index: 1; overflow: hidden; background: var(--ink-950);
  margin-top: calc(-1 * clamp(44px, 7vh, 92px) + 100px);
  margin-left: calc(clamp(80px, 12vw, 220px) * var(--fv-l));
  margin-right: calc(clamp(80px, 12vw, 220px) * var(--fv-l));
  aspect-ratio: 16 / 8.8;
  /* 動画はローダーカーテン後にJSでフェードイン（初期は透明） */
  opacity: 0;
  will-change: opacity;
  transform: translateZ(0);
}
.fv__video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: translateZ(0);
}
.fv__hint {
  position: absolute; left: var(--frame-gutter); bottom: clamp(-64px, -6vh, -32px); z-index: 3;
  font-family: var(--font-en); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-low);
  writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px;
}
.fv__hint::after { content: ""; width: 1px; height: 46px; background: linear-gradient(180deg, var(--text-low), transparent); animation: hint-drop 2.6s var(--ease-quiet) infinite; }
@keyframes hint-drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 900px) {
  .fv__tate { display: none; }
  .fv__frame { margin-left: 0; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fv__tate { opacity: 1 !important; }
  .fv__frame { opacity: 1 !important; }
  .mask > span { transform: none !important; }
  .fv__hint::after { animation: none; }
}

/* ============================================================
   PURCHASE STRIP
   ============================================================ */
.strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(2.4rem,4.8vw,6rem);
  padding:2.9rem 5vw;
  /* border-top:1px solid var(--line-soft); */
  border-bottom:1px solid var(--line-soft);
  background:var(--ink);
  position:relative;
  z-index:2;
  flex-wrap:wrap;
}
.strip-media{ width:62px; height:62px; overflow:hidden; border:1px solid var(--line); flex:none; }
.strip-media img{ width:100%; height:100%; object-fit:cover; }
.strip-name{ font-size:1.62rem; letter-spacing:.18em; }
.strip-name span{ color:var(--cream-dim); font-size:1.32rem; letter-spacing:.24em; }
.strip-price{ display:flex; align-items:baseline; gap:1.2rem; }
.strip-price .sp-lead{ font-size:1.38rem; letter-spacing:.14em; color:var(--cream); }
.strip-price b{
  font-family:var(--font-en); font-weight:600; font-size:2.52rem;
  color:var(--cream); letter-spacing:.06em;
}
.strip-price .sp-tail{ font-size:1.26rem; letter-spacing:.14em; color:var(--cream-dim); }
.strip .btn{ padding:1.44em 3.36em; font-size:1.38rem; }

/* ============================================================
   FLOATING CTA — PC右下パネル / SP右下コンパクト
   ============================================================ */
.float-cta{
  display:none;
  align-items:center;
  justify-content:space-between;
  z-index:900;
  background:var(--ink);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .55s var(--ease),
    transform .55s var(--ease),
    visibility .55s;
}
.float-cta__text{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
}
.float-cta__name{
  font-weight:500;
  letter-spacing:.14em;
  line-height:1.45;
  color:var(--cream);
  white-space:nowrap;
}
.float-cta__price{
  letter-spacing:.1em;
  line-height:1.45;
  color:var(--cream);
  white-space:nowrap;
}
.float-cta__price span{
  letter-spacing:.06em;
}
.float-cta__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  flex:none;
  background:var(--gold);
  color:var(--ink);
  font-weight:500;
  letter-spacing:.22em;
  white-space:nowrap;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.float-cta__btn .ico{
  width:1.15em;
  height:1.15em;
  flex:none;
}
.float-cta__btn:hover{
  background:var(--gold-2);
}

/* SP: 右下にコンパクト追従（FV通過後に表示） */
@media (max-width:820px){
  .float-cta{
    display:flex;
    position:fixed;
    right:max(16px, 4vw);
    bottom:max(16px, calc(12px + env(safe-area-inset-bottom, 0px)));
    left:auto;
    gap:0;
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;
    transform:translateY(16px);
  }
  .float-cta.is-shown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .float-cta__text{ display:none; }
  .float-cta__btn{
    padding:.95em 1.35em;
    font-size:1.22rem;
    letter-spacing:.16em;
    box-shadow:0 10px 28px rgba(0,0,0,.36);
  }
}

/* PC: 右下追従 */
@media (min-width:821px){
  .float-cta{
    display:flex;
    gap:2.4rem;
    position:fixed;
    right:clamp(16px,2vw,28px);
    bottom:clamp(16px,2vw,28px);
    left:auto;
    padding:1.1rem 1.1rem 1.1rem 2.2rem;
    border:1px solid rgba(233,225,209,.42);
    box-shadow:0 10px 36px rgba(0,0,0,.38);
    transform:translateY(12px);
  }
  body:not(.is-loading) .float-cta{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .float-cta__name{ font-size:1.42rem; }
  .float-cta__price{ font-size:1.28rem; }
  .float-cta__btn{
    padding:1.05em 1.9em;
    font-size:1.32rem;
  }
}
@media (prefers-reduced-motion: reduce){
  .float-cta{ transition:none; }
  .float-cta.is-shown,
  body:not(.is-loading) .float-cta{ transform:none; }
}

/* ============================================================
   其の壱 WHY EAT — 墨に金の額装、縦の呼吸
   ============================================================ */
.why{
  background:var(--ink);
  padding: 20vh 0 4rem;
  overflow:hidden;
  /* border-bottom: 1px solid var(--line-soft); */
}
.why .sec-head{ margin-bottom:9vh; }
.why-texts{
  display:flex; flex-direction:row-reverse; justify-content:center;
  align-items:flex-start;
  gap:clamp(3.5rem,6vw,9rem);
  padding:0 6vw; margin-bottom:11vh;
}
.why-title{
  font-size:clamp(2.1rem,2.6vw,2.9rem);
  font-weight:600;
  letter-spacing:.2em;
  line-height:2.1;
  /* height:min(58vh,560px); */
}
.why-body{
  /* height:min(58vh,560px); */
  font-size:16px;
  line-height:2.5;
  letter-spacing:.08em;
  color:var(--cream-dim);
}
.why-body p + p{ margin-block-start:2.4rem; }
.why-sign{font-size: 2rem;letter-spacing:.26em;color:var(--gold);}
.why-frames{
  display:flex; align-items:stretch;
  gap:clamp(1.6rem,2.6vw,3.4rem);
  width:90vw; margin:0 auto;
  padding-bottom:4rem;
}
.why-fig{
  flex:1; min-width:0;
  aspect-ratio:4/4.5;
  border:1px solid rgba(176,144,95,.34);
  padding:12px;
  position:relative;
}
.why-fig img{ width:100%; height:100%; object-fit:cover; }
.why-fig figcaption{
  position:absolute; right:0; bottom:-3.4rem;
  font-size:1.05rem; letter-spacing:.3em; color:var(--cream-dim);
}
.why-pattern{
  flex:none; width:clamp(110px,13vw,180px);
  border-left:1px solid rgba(176,144,95,.34);
  border-right:1px solid rgba(176,144,95,.34);
  position:relative;
}
.why-pattern::before{
  content:""; position:absolute; inset:14px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cg fill='none' stroke='%23b0905f' stroke-width='.55'%3E%3Ccircle cx='0' cy='0' r='15'/%3E%3Ccircle cx='30' cy='0' r='15'/%3E%3Ccircle cx='0' cy='30' r='15'/%3E%3Ccircle cx='30' cy='30' r='15'/%3E%3Ccircle cx='15' cy='15' r='15'/%3E%3C/g%3E%3C/svg%3E");
  background-size:30px 30px;
  opacity:.55;
}

/* ============================================================
   其の弐 EXPERIENCE — 左に縦の目次、右に時系列
   ============================================================ */
.exp{
  background:var(--ink);
  padding:22vh 6vw 26vh;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(4rem,6vw,10rem);
  /* border-top:1px solid var(--line-soft); */
}
.exp-side{ min-width:0; }
.exp-side-inner{ position:sticky; top:12vh; }
.exp-main-label{ display:none; }
.exp-vcomp{
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-start;
  gap:clamp(1.8rem,2.6vw,3.6rem);
  margin-top: 7vh;
  justify-content: center;
}
.exp-vline{
  writing-mode:vertical-rl; white-space:nowrap;
  font-size:clamp(2.6rem,3.2vw,4.2rem); font-weight:600;
  letter-spacing:.2em; line-height:1;
  color:var(--cream);
  transition:opacity .8s var(--ease);
}
.exp-vline--2{ transform:translateY(clamp(2.4rem,4.5vh,5.4rem)); }
.exp-vline--3{ transform:translateY(clamp(4.8rem,9vh,10.8rem)); }
.exp-armed .exp-vline{ opacity:.22; }
.exp-armed .exp-vline.is-on{ opacity:1; }

.exp-main{ min-width:0; }
.exp-tlead{
  font-size:clamp(1.6rem,1.85vw,2.2rem); font-weight:500;
  letter-spacing:.16em; line-height:2.3; color:var(--cream);
  margin-bottom:9vh;
}
.exp-timeline{ position:relative; padding-left:clamp(4rem,4.6vw,6.8rem); }
.exp-tline{
  position:absolute; left:clamp(.8rem,1.4vw,2rem); top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, var(--gold) 6%, var(--gold) 94%, transparent);
  opacity:.4; transform:scaleY(0); transform-origin:top;
}
.tstep{ position:relative; margin-bottom:clamp(16rem,28vh,30rem); }
.tstep:last-child{ margin-bottom:0; }
.tstep-node{
  position:absolute; top:-1.4rem;
  left:calc(-1 * clamp(4rem,4.6vw,6.8rem) + clamp(.8rem,1.4vw,2rem));
  transform:translateX(-50%);
  font-family:var(--font-en); font-style:italic; font-size:1.4rem;
  letter-spacing:.14em; color:var(--gold);
  background:var(--ink); padding:.8rem .2rem;
  writing-mode:vertical-rl;
}
.tstep-media{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:#000;
}
.tstep-media::after{
  content:""; position:absolute; inset:10px; z-index:2; pointer-events:none;
  border:1px solid rgba(233,225,209,.14);
}
.tstep-media video{
  width:100%; height:100%; object-fit:contain; display:block;
}
.tstep-body{
  display:flex; align-items:center;
  gap:clamp(3rem,4vw,6.5rem);
  margin-top:clamp(2.6rem,4.5vh,4.8rem);
}
.tstep-kanji{
  flex:none;
  font-size:clamp(6.4rem,7vw,10.5rem); font-weight:600; line-height:1;
}
.tstep-kanji em{
  display:inline-block;
  font-family:var(--font-en); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem,1.5vw,1.9rem); letter-spacing:.12em; color:var(--gold);
  margin-left:2rem; transform:translateY(-.35em);
}
.tstep-text{
  font-size: 15.1px;
  line-height: 2.1;
  letter-spacing:.06em;
  color:var(--cream-dim);
  max-width:30em;
}

/* ============================================================
   其の参 DISCOVERY
   ============================================================ */
.discovery{ padding:22vh 0 24vh; background:var(--ink); }
.disc-title{
  padding:0 6vw; margin-top:7vh;
  font-size:clamp(2.4rem,4.2vw,4.6rem); font-weight:600;
  letter-spacing:.14em; line-height:2.05;
}
.disc-stage{
  position:relative;
  width:min(1150px,88vw); margin:14vh auto 0;
}
.disc-fig{ aspect-ratio:16/9; }
.disc-fig img{width:100%;height: 100%;object-fit:cover;}
.disc-notes{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(2.4rem,3.5vw,5rem);
  margin-top:5rem;
}
.disc-note h3{
  font-size: 1.9rem;
  font-weight:600;
  letter-spacing:.24em;
  color:var(--gold-2);
  margin-bottom:.8rem;
}
.disc-note h3::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold); margin-right:.9rem; vertical-align:.25em;
}
.disc-note p{font-size: 1.4rem;line-height:2.1;color:var(--cream-dim);}
.disc-note-line{
  display:block; width:4.2rem; height:1px; background:var(--gold-dim);
  margin-bottom:1.6rem; transform-origin:left;
}
.disc-copy{
  margin:14vh auto 0;
  text-align:center;
  font-size: 1.65rem;
  line-height:2.8;
  letter-spacing:.14em;
  color:var(--cream);
}

/* ============================================================
   其の肆 TASTE
   ============================================================ */
.taste{ padding:0 0 26vh; background:var(--ink); }
.taste-band{ height:74vh; overflow:hidden; position:relative; }
.taste-band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, transparent 22%, transparent 70%, rgba(12,11,9,.35) 100%);
}
.taste-band img{ width:100%; height:112%; object-fit:cover; }
.taste-a-text{
  position:relative; z-index:2;
  width:min(660px,86vw);
  margin:-24vh 6vw 0 auto;
  padding:clamp(3rem,5vw,6rem);
  background:rgba(14,12,10,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-soft);
}
.taste-a-text .sec-label{ margin-bottom:3.5rem; }
.taste-a-text h2{
  font-size:clamp(2.1rem,3.4vw,3.6rem); font-weight:600;
  letter-spacing:.12em; line-height:2.0; margin-bottom:2.6rem;
}
.taste-sub{
  font-size: 1.45rem;
  letter-spacing:.3em;
  color:var(--gold);
  margin-bottom:1.8rem;
}
.taste-copy{font-size: 1.45rem;line-height:2.5;color:var(--cream-dim);}
.taste-b{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:5vw;
  padding:0 6vw; margin-top:22vh; align-items:start;
}
.taste-fig{ aspect-ratio:3/2.6; }
.taste-fig img{ width:100%; height:100%; object-fit:cover; }
.taste-b-text{
  display:flex; flex-direction:row-reverse; gap:clamp(2.4rem,3vw,4rem); align-items:flex-start;
  justify-content:flex-end;
  padding-left:clamp(2rem,5vw,5.5rem);
}
.taste-b-text h2{
  font-size:clamp(2rem,2.7vw,3rem); font-weight:600;
  letter-spacing:.2em; line-height:2.4;
  height:auto;
  flex:none;
}
.taste-b-text p{
  font-size: 1.65rem;
  line-height:2.5;
  letter-spacing:.08em;
  color:var(--cream-dim);
  height:auto;
}

/* ============================================================
   其の伍 MOMENTS — horizontal gallery
   ============================================================ */
.moments{ background:var(--ink-2); }
.moments-pin{ overflow-x:auto; scrollbar-width:none; }
.moments-pin::-webkit-scrollbar{ display:none; }
html.js .moments-pin{ overflow:hidden; }
.moments-track{
  display:flex; align-items:center; gap:7vw;
  width:max-content; height:100vh; padding:0 7vw;
}
.moments-intro{ width:auto; min-width:320px; flex:none; }
.moments-intro .sec-label{ margin-bottom:3.5rem; }
.moments-intro-text{
  display:flex; flex-direction:row-reverse; gap:clamp(2rem,3vw,3.6rem);
  align-items:flex-start;
}
.moments-intro h2{
  font-size:clamp(2.2rem,3vw,3.4rem); font-weight:600;
  letter-spacing:.22em; line-height:2.5;
  margin:0; height:auto; flex:none;
}
.moments-intro-text p{
  font-size:1.55rem; line-height:2.5; letter-spacing:.08em;
  color:var(--cream-dim); height:auto;
}
.moments-panel{ width:56vw; flex:none; }
.moments-img{ height:62vh; overflow:hidden; background:#000; }
.moments-img img, .moments-img video{ width:112%; max-width:none; height:100%; object-fit:cover; }
.moments-panel figcaption{
  display:flex; align-items:baseline; gap:1.4rem; margin-top:2rem;
  font-size:1.3rem; letter-spacing:.3em; color:var(--cream);
}
.moments-panel figcaption span{
  font-family:var(--font-en); font-style:italic; font-size:1.3rem;
  color:var(--gold); letter-spacing:.1em;
}
.moments-end{ width:26vw; flex:none; display:grid; place-items:center; }
.moments-end p{
  font-size:clamp(1.8rem,2.2vw,2.6rem);
  font-weight:500;
  letter-spacing:.3em;
  line-height:2.8;
  color:var(--gold-2);
  margin-right: 12rem;
}

/* ============================================================
   其の陸 TOGETHER — occasions accordion
   ============================================================ */
.together{ padding:24vh 0; background:var(--ink); }
.tog-title{
  margin-top:6vh;
  font-size:clamp(2.2rem,3.6vw,3.8rem) ; font-weight:600;
  letter-spacing:.14em; line-height:2.0;
}
.tog-panels{
  display:flex; gap:2px; height:76vh; min-height:520px;
  margin-top:9vh;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.tog-panel{
  position:relative; flex:1; overflow:hidden; cursor:pointer;
  transition:flex 1.15s var(--ease);
  min-width:0;
}
.tog-panel.is-active{ flex:2.7; cursor:default; }
.tog-panel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  transition:transform 1.6s var(--ease), filter 1s;
  filter:brightness(.72) saturate(.92);
}
.tog-panel.is-active img{ transform:scale(1); filter:brightness(.9); }
.tog-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,11,9,.16) 30%, rgba(12,11,9,.88) 96%);
}
.tog-rail{
  position:absolute; right:1.6rem; top:50%; transform:translateY(-50%);
  font-size:1.35rem; letter-spacing:.34em; color:var(--cream);
  transition:opacity .5s;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.tog-panel.is-active .tog-rail{ opacity:0; }
.tog-body{
  position:absolute; left:clamp(1.8rem,3vw,3.6rem); right:clamp(1.8rem,3vw,3.6rem); bottom:clamp(1.8rem,3.4vh,3.6rem);
}
/* 子要素ごとに：消える側は速く、出る側は段階的に */
.tog-en, .tog-body h3, .tog-desc{
  opacity:0; transform:translateY(34px);
  transition:opacity .45s ease, transform .45s ease;
}
.tog-panel.is-active .tog-en{
  opacity:1; transform:translateY(0);
  transition:opacity .9s var(--ease) .34s, transform 1.05s var(--ease) .34s;
}
.tog-panel.is-active .tog-body h3{
  opacity:1; transform:translateY(0);
  transition:opacity .95s var(--ease) .46s, transform 1.1s var(--ease) .46s;
}
.tog-panel.is-active .tog-desc{
  opacity:1; transform:translateY(0);
  transition:opacity 1s var(--ease) .6s, transform 1.15s var(--ease) .6s;
}
.tog-en{
  font-family:var(--font-en); font-size:1.15rem; font-weight:500;
  letter-spacing:.42em; color:var(--gold-2); margin-bottom:1.2rem;
}
.tog-body h3{
  font-size:clamp(1.9rem,2.2vw,2.6rem); font-weight:600;
  letter-spacing:.12em; line-height:1.9; margin-bottom:1.4rem;
}
.tog-desc{
  font-size: 1.42rem;
  line-height:2.1;
  color:var(--cream-dim);
  max-width:34em;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tog-cta{ margin-top:9vh; text-align:center; }

/* ============================================================
   其の漆 STORY — roasting film
   (base = static & readable; enhanced pin with JS on PC + SP)
   ============================================================ */
.story{ background:#000; }
.story-pin{
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:16vh 0;
}
.story-media{ position:absolute; inset:0; }
.story-media video{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.9);
}
.story-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(12,11,9,.35) 18%, rgba(12,11,9,.5) 55%, var(--ink) 100%);
}
.story-frame{ display:none; }
.story-head{
  position:relative; z-index:4;
  display:flex; justify-content:space-between; align-items:flex-start; gap:3rem;
  padding:0 6vw;
}
.story-head h2{
  font-size:clamp(1.9rem,2.6vw,3rem); font-weight:600;
  letter-spacing:.24em; line-height:2.4;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.story-lines{ position:relative; z-index:3; margin-top:9vh; }
.story-line{
  width:min(760px,86vw); margin:0 auto 4.5rem;
  text-align:center;
  font-size:clamp(1.6rem,2.4vw,2.5rem); font-weight:500;
  letter-spacing:.16em; line-height:2.6;
  text-shadow:0 2px 26px rgba(0,0,0,.75);
}
.story-fin{
  width:min(820px,88vw); margin:7rem auto 0; text-align:center;
}
.story-fin .story-line{
  width:auto;
  font-size:clamp(1.9rem,3vw,3.2rem); letter-spacing:.2em;
  margin-bottom:2.4rem;
}
.story-fin .story-line.gold{ color:var(--gold-2); }

/* enhanced: pinned, line-by-line (JS — PC + SP) */
html.js .story{ height:270vh; }
html.js .story-pin{
  position:sticky; top:0; height:100vh; min-height:0;
  padding:0; display:block;
}
/* start brighter; darken after pin via GSAP（黒フィルターはピン後に濃く） */
html.js .story-media video{ transform:scale(1.12); filter:brightness(.92); }
html.js .story-shade{
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 16%, rgba(0,0,0,.82) 55%, #000 100%);
  opacity:0.28;
}
html.js .story-frame{
  display:block;
  position:absolute; inset:clamp(1.8rem,3.6vw,4.2rem); z-index:3;
  border:1px solid rgba(176,144,95,.4);
  pointer-events:none; opacity:0;
}
.story-frame .sc{ position:absolute; width:0; height:0; }
.story-frame .sc::before{
  content:""; position:absolute; left:-19px; top:0;
  width:39px; height:1px; background:rgba(176,144,95,.6);
}
.story-frame .sc::after{
  content:""; position:absolute; top:-19px; left:0;
  width:1px; height:39px; background:rgba(176,144,95,.6);
}
.story-frame .tl{ top:0; left:0; }
.story-frame .tr{ top:0; right:0; }
.story-frame .bl{ bottom:0; left:0; }
.story-frame .br{ bottom:0; right:0; }
html.js .story-head{
  position:absolute; top:0; left:0; right:0;
  padding:11vh 6vw 0;
}
html.js .story-head h2{ height:auto; }
html.js .story-lines{ position:absolute; inset:0; margin-top:0; }
html.js .story-line{
  position:absolute; left:50%; top:52%;
  transform:translate(-50%,-50%);
  margin:0; opacity:0;
}
html.js .story-fin{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  margin:0; opacity:0;
}
html.js .story-fin .story-line{
  position:static; transform:none; opacity:0;
}

/* ============================================================
   其の捌 CARE
   ============================================================ */
.care{ padding:24vh 0; background:var(--ink); }
.care-title{
  margin-top:6vh;
  font-size:clamp(2.2rem,3.6vw,3.8rem); font-weight:600;
  letter-spacing:.14em;
}
/* PCは1行、SPは「を、」のあとで改行 */
.care-title[data-split-head] > span{ display:inline; }
.care-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:4vw;
  padding:0 6vw; margin-top:10vh;
}
.care-no{
  display:flex; align-items:center; gap:1.6rem; margin-bottom:2.6rem;
}
.care-no i{
  font-family:var(--font-en); font-style:italic; font-weight:400;
  font-size:1.6rem; color:var(--gold);
}
.care-no::after{ content:""; flex:1; height:1px; background:var(--line); }
.care-item figure{ aspect-ratio:16/10.5; margin-bottom:3rem; }
.care-item figure img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.5s var(--ease);
}
.care-item figure:hover img{ transform:scale(1.05); }
.care-item h3{
  font-size: 1.75rem;
  font-weight:600;
  letter-spacing:.1em;
  line-height:1.95;
  margin-bottom:1.6rem;
}
.care-item > p{font-size: 1.45rem;line-height:2.3;color:var(--cream-dim);}
@media (min-width:1025px){
  .care-item:nth-child(2){ margin-top:5rem; }
  .care-item:nth-child(3){ margin-top:10rem; }
}

/* ============================================================
   VOICE
   ============================================================ */
.voice{ padding:22vh 0; background:var(--ink-2); }
.voice-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2.5vw;
  padding:0 6vw; margin-top:9vh;
}
.voice-card{
  position:relative;
  border:1px solid var(--line-soft);
  background:rgba(233,225,209,.015);
  padding:5.5rem 3.2rem 3.6rem;
}
.voice-card::before{
  content:"“";
  position:absolute; top:1.2rem; left:2.4rem;
  font-family:var(--font-en); font-size:7rem; line-height:1;
  color:var(--gold); opacity:.3;
}
.voice-card:nth-child(2){ transform:translateY(3.5rem); }
.voice-card:nth-child(3){ transform:translateY(7rem); }
.voice-lead{
  font-size: 1.85rem;
  font-weight:600;
  letter-spacing:.1em;
  line-height:1.9;
  margin-bottom:2.2rem;
  color:var(--cream);
}
.voice-text{font-size: 1.35rem;line-height:2.3;color:var(--cream-dim);margin-bottom:2.8rem;}
.voice-card footer{
  font-size:1.15rem; letter-spacing:.26em; color:var(--gold);
  display:flex; align-items:center; gap:1.2rem;
}
.voice-card footer::before{ content:""; width:2.6rem; height:1px; background:var(--gold-dim); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding:22vh 0; background:var(--ink); }
.faq-list{ width:min(880px,88vw); margin:8vh auto 0; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:2.5rem; padding:3rem .8rem;
  text-align:left;
  font-size:1.45rem; font-weight:500; letter-spacing:.1em;
  transition:color .4s, padding-left .5s var(--ease);
}
.faq-q:hover{ color:var(--gold-2); padding-left:1.6rem; }
.faq-q i{
  position:relative; flex:none; width:15px; height:15px;
  transition:transform .6s var(--ease);
}
.faq-q i::before,.faq-q i::after{
  content:""; position:absolute; background:var(--gold);
  left:50%; top:50%; transform:translate(-50%,-50%);
}
.faq-q i::before{ width:15px; height:1px; }
.faq-q i::after{ width:1px; height:15px; transition:opacity .4s; }
.faq-item.is-open .faq-q{ color:var(--gold-2); }
.faq-item.is-open .faq-q i{ transform:rotate(180deg); }
.faq-item.is-open .faq-q i::after{ opacity:0; }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .75s var(--ease); }
.faq-a > p{
  overflow:hidden; min-height:0;
  padding:0 .8rem;
  font-size:1.3rem; line-height:2.3; color:var(--cream-dim);
  transition:padding .6s var(--ease);
}
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-item.is-open .faq-a > p{ padding-bottom:3.2rem; }

/* ============================================================
   LINEUP
   ============================================================ */
.lineup{padding: 20vh 0;background:var(--ink);}
.lineup-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2.5vw;
  padding:0 6vw; margin-top:9vh;
  align-items:stretch;
}
.prod{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--line-soft);
  padding:2.8rem;
  background:rgba(233,225,209,.015);
  transition:border-color .6s, transform .8s var(--ease);
}
.prod:hover{ border-color:rgba(176,144,95,.35); transform:translateY(-6px); }
.prod-fig{ aspect-ratio:4/3.1; margin-bottom:2.8rem; }
.prod-fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease);
}
.prod:hover .prod-fig img{ transform:scale(1.05); }
.prod-en{
  font-family:var(--font-en); font-size:1.1rem; font-weight:500;
  letter-spacing:.42em; color:var(--gold); margin-bottom:1rem;
}
.prod-name{ font-size:1.7rem; font-weight:600; letter-spacing:.08em; margin-bottom:1.2rem; }
.prod-name span{ font-size:1.2rem; color:var(--cream-dim); letter-spacing:.14em; }
.prod-desc{
  font-size:1.22rem;
  line-height:2.2;
  color:var(--cream-dim);
  margin-bottom: 0.6rem;
  flex:1;
}
.prod-price{margin-bottom: 1.6rem;display:flex;align-items:baseline;gap:.8rem;}
.prod-price b{
  font-family:var(--font-en); font-weight:600; font-size:3rem;
  letter-spacing:.04em; color:var(--cream);
}
.prod-price span{ font-size:1.1rem; color:var(--cream-dim); letter-spacing:.16em; }
.prod-btn{ width:100%; }
.prod--feature{
  border-color:rgba(176,144,95,.5);
  background:linear-gradient(180deg, rgba(176,144,95,.09), rgba(176,144,95,.015) 55%);
}
.prod-badge{
  position:absolute; top:-1.3rem; left:2.8rem; z-index:2;
  background:var(--gold); color:var(--ink);
  font-size:1.05rem; font-weight:600; letter-spacing:.3em; text-indent:.3em;
  padding:.55em 1.4em;
}
.lineup-biz{
  margin-top:8vh; text-align:center;
  font-size:1.25rem; letter-spacing:.14em; color:var(--cream-dim);
}
.lineup-biz a{
  color:var(--gold-2); border-bottom:1px solid var(--gold-dim);
  padding-bottom:.2em; margin-left:1em;
  transition:color .4s, border-color .4s;
}
.lineup-biz a:hover{ color:var(--cream); border-color:var(--cream); }

/* ============================================================
   FOR BUSINESS — 金の額縁
   ============================================================ */
.business{
  padding:26vh 6vw;
  background:var(--ink-2);
  border-top:1px solid var(--line-soft);
  text-align:center;
}
.biz-frame{
  position:relative;
  width:min(880px,90vw); margin:0 auto;
  border:1px solid rgba(176,144,95,.45);
  padding:clamp(5rem,9vh,8.5rem) clamp(2.6rem,6vw,7rem);
}
.biz-frame::before{
  content:""; position:absolute; inset:12px; pointer-events:none;
  border:1px solid rgba(176,144,95,.22);
}
.biz-cross{ position:absolute; width:0; height:0; }
.biz-cross::before{
  content:""; position:absolute; left:-19px; top:0;
  width:39px; height:1px; background:rgba(176,144,95,.6);
}
.biz-cross::after{
  content:""; position:absolute; top:-19px; left:0;
  width:1px; height:39px; background:rgba(176,144,95,.6);
}
.bc-tl{ top:0; left:0; }
.bc-tr{ top:0; right:0; }
.bc-bl{ bottom:0; left:0; }
.bc-br{ bottom:0; right:0; }
.biz-side{
  position:absolute; right:-3.6rem; top:3.4rem;
  writing-mode:vertical-rl;
  font-family:var(--font-en); font-size:1.1rem; font-weight:500;
  letter-spacing:.5em; color:var(--gold-dim);
}
.business .sec-label{ justify-content:center; }
.business .sec-label::before{ display:none; }
.business h2{
  margin-top:4.5vh;
  font-size:clamp(2.4rem,4vw,4.2rem); font-weight:600; letter-spacing:.16em;
}
.biz-lead{ margin-top:4rem; font-size:1.5rem; letter-spacing:.2em; color:var(--gold-2); }
.biz-copy{
  margin:3.2rem auto 6rem;
  font-size:1.3rem; line-height:2.6; color:var(--cream-dim); max-width:44em;
}

/* ============================================================
   CLOSING
   ============================================================ */
.closing{ height:100vh; min-height:620px; overflow:hidden; }
.closing-media{ position:absolute; inset:0; }
.closing-media video{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); }
.closing-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(12,11,9,.45) 30%, rgba(12,11,9,.55) 70%, var(--ink) 100%);
}
.closing-inner{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4.8rem; text-align:center;
}
.closing-copy{
  display:flex; flex-direction:row-reverse; align-items:flex-start;
  gap:clamp(2.8rem,4vw,5rem);
}
.closing-inner h2{
  display:flex; flex-direction:column; align-items:flex-start;
  font-size:clamp(2rem,2.9vw,3.2rem); font-weight:600;
  letter-spacing:.26em; line-height:2.2;
  text-align:start; flex:none;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.closing-inner h2 > span{ display:block; }
.closing-inner p{
  display:flex; flex-direction:column; align-items:flex-start;
  font-size:1.28rem; line-height:2.4; letter-spacing:.18em;
  color:var(--cream-dim); text-align:start; flex:none;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.closing-inner p > span{ display:block; }
.closing-cta{ display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  border-top:1px solid var(--line-soft);
  background:var(--ink);
  padding:11vh 6vw 4.5vh;
}
.ft-top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:6vw;
  padding-bottom:9vh;
}
.ft-brand img{ width:172px; height:auto; margin-bottom:2.6rem; }
.ft-brand p{ font-size:1.25rem; line-height:2.5; color:var(--cream-dim); letter-spacing:.12em; }
.ft-head{
  font-family:var(--font-en); font-size:1.1rem; font-weight:500;
  letter-spacing:.44em; color:var(--gold); margin-bottom:2.4rem;
}
.ft-nav a{
  display:block; font-size:1.25rem; letter-spacing:.14em; color:var(--cream-dim);
  margin-bottom:1.4rem; transition:color .4s, padding-left .5s var(--ease);
}
.ft-nav a:hover{ color:var(--cream); padding-left:.8rem; }
.ft-company p:not(.ft-head){ font-size:1.25rem; line-height:2.5; color:var(--cream-dim); letter-spacing:.1em; }
.ft-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
  border-top:1px solid var(--line-soft); padding-top:3.2rem;
  font-size:1.1rem; letter-spacing:.2em; color:#6f675a;
}
.ft-mark{ font-family:var(--font-en); letter-spacing:.4em; }
.ft-mark i{ font-style:normal; opacity:.5; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .taste-b{ grid-template-columns:1fr; gap:6vh; }
  .taste-fig{ max-width:720px; }
  .exp{ gap:3.5rem; }
  .tstep-body{ gap:2.6rem; }
}
@media (max-width:1024px){
  /* EXP — PC同様の左スティッキー。縦書きは1本＋次が薄く待機 */
  .exp{
    grid-template-columns:auto minmax(0,1fr);
    gap:clamp(1.6rem,3.2vw,3rem);
    overflow:visible;
  }
  .exp-side{ width:auto; }
  .exp-side-inner{
    position:sticky;
    top:10vh;
    overflow:visible;
  }
  .exp-side-label{ display:none; }
  .exp-main-label{
    display:flex;
    margin-bottom:3.5vh;
  }
  /* 左枠の中央にアクティブ1本だけ（次の待機表示は出さない） */
  .exp-vcomp{
    position:relative;
    display:block;
    font-size:clamp(2.2rem,3.4vw,3.2rem);
    width:1em;
    min-height:11.5em;
    margin:0;
    gap:0;
    overflow:visible;
  }
  .exp-vline,
  .exp-vline--2,
  .exp-vline--3{
    position:absolute;
    top:0;
    left:50%;
    font-size:1em;
    opacity:0;
    pointer-events:none;
    transform:translate3d(-50%,0,0);
    transform-origin:center top;
    transition:opacity .85s var(--ease);
  }
  .exp-armed .exp-vline,
  .exp-armed .exp-vline.is-next,
  .exp-armed .exp-vline.is-prev{
    opacity:0;
    transform:translate3d(-50%,0,0);
  }
  .exp-armed .exp-vline.is-on{
    opacity:1;
    transform:translate3d(-50%,0,0);
    pointer-events:auto;
    z-index:2;
  }
  .voice-grid{ grid-template-columns:1fr; width:min(640px,88vw); margin-left:auto; margin-right:auto; padding:0; }
  .voice-card:nth-child(2),.voice-card:nth-child(3){ transform:none; }
  .care-grid{ grid-template-columns:1fr; width:min(640px,88vw); margin-left:auto; margin-right:auto; padding:0; gap:8vh; }
  .lineup-grid{grid-template-columns:1fr;width:min(560px,88vw);margin-left:auto;margin-right:auto;padding:0;gap: 3vh;}
  .prod{ transform:none !important; }
  .ft-top{ grid-template-columns:1fr; gap:6vh; }

  /* WHY — タブレットでも横に詰めすぎない */
  .why-texts{
    gap:clamp(2.8rem,5vw,5.5rem);
    padding:0 clamp(5vw,7vw,9vw);
  }
  .why-title{ font-size:clamp(1.7rem,2.4vw,2.4rem); line-height:2.25; }
  .why-body{ font-size:15px; }
}

@media (max-width:820px){
  body{ font-size:1.35rem; }
  .sp-only{ display:block; }
  .progress{ display:none; }

  /* 購入ストリップ：画像を大きく・縦余白を詰めてコンパクトに */
  .strip{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "media name"
      "media price"
      "btn btn";
    align-items:center;
    column-gap:1.35rem;
    row-gap:.4rem;
    padding: 2.35rem 6vw 1.45rem;
  }
  .strip-media{
    grid-area:media;
    width:112px;
    height:112px;
    align-self:center;
  }
  .strip-name{
    grid-area:name;
    font-size:1.38rem;
    letter-spacing:.12em;
    line-height:1.4;
    align-self:end;
    padding-bottom:.1rem;
  }
  .strip-name span{ font-size:1.14rem; letter-spacing:.16em; }
  .strip-price{
    grid-area:price;
    gap:.55rem;
    align-self:start;
  }
  .strip-price .sp-lead{ font-size:1.18rem; }
  .strip-price b{ font-size:2rem; }
  .strip-price .sp-tail{ font-size:1.08rem; }
  .strip .btn{
    grid-area:btn;
    width:100%;
    margin-top: 1.1rem;
    padding:1em 2em;
    font-size:1.24rem;
  }

  /* WHY */
  .why{padding: 16vh 0 2vh;}
  .why-texts{
    flex-direction:row-reverse; justify-content:center;
    align-items:flex-start;
    gap:clamp(2.4rem,8vw,4rem);
    width:fit-content; max-width:100%;
    margin-left:auto; margin-right:auto;
    padding:0 11vw; margin-bottom:9vh;
    box-sizing:border-box;
  }
  .why-title{
    height:auto;
    font-size: clamp(1.35rem,4.6vw,2.25rem);
    line-height:2.45;
    letter-spacing:.16em;
  }
  .why-body{
    height:auto;
    font-size:12px;
    line-height:2.35;
  }
  .why-body p + p{ margin-block-start:1.7rem; }
  .why-break{ display:none; }
  .why-sign{font-size: 1.85rem;}
  .why-frames{flex-direction:column;gap: 1rem;width:90vw;padding-bottom:0;}
  .why-fig{ aspect-ratio:4/4.2; flex:none; }
  .why-pattern{
    width:100%; height:64px; flex:none;
    border-left:none; border-right:none;
    border-top:1px solid rgba(176,144,95,.34);
    border-bottom:1px solid rgba(176,144,95,.34);
  }
  .why-pattern::before{ inset:10px 14px; }
  .why-fig figcaption{ bottom:auto; top:calc(100% + 1.2rem); font-size:1rem; }

  /* EXP — 左スティッキー維持、枠中央にアクティブ1本のみ */
  .exp{
    padding: 9vh 4vw 3vh 6vw;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap: 3.65rem;
  }
  .exp-side-inner{ position:sticky; top:9vh; }
  .exp-main-label{ font-size:1.05rem; margin-bottom:3vh; }
  .exp-vcomp{
    font-size: clamp(2.3rem,9.4vw,4.3rem);
    width:1em;
    min-height:10.5em;
    margin:0;
  }
  .exp-vline,
  .exp-vline--2,
  .exp-vline--3{ font-size:1em; }
  .exp-tlead{ margin:0 0 7vh; font-size:1.35rem; line-height:2.15; }
  .exp-timeline{ padding-left:0; }
  .exp-tline, .tstep-node{ display:none; }
  .tstep{ margin-bottom:12vh; }
  .tstep-media{ aspect-ratio:16/9; }
  .tstep-body{ flex-direction:column; align-items:flex-start; gap:2rem; margin-top:3rem; }
  .tstep-kanji{font-size: clamp(6.2rem,14.1vw,7rem);}

  /* DISCOVERY */
  .discovery{ padding:16vh 0 18vh; }
  .disc-title{ line-height:1.9; }
  .disc-stage{ width:100%; margin-top:3.2vh; }
  .disc-fig{ aspect-ratio:16/9; }
  .disc-notes{
    grid-template-columns:1fr;
    gap:2rem;
    margin-top:2.6rem;
    padding:0 6vw;
  }
  .disc-note-line{ margin-bottom:1rem; }
  .disc-note h3{ margin-bottom:.45rem; }
  .disc-note p{ line-height:1.85; }
  .disc-copy{ margin-top:10vh; padding:0 6vw; text-align:left; font-size:1.35rem; }

  /* TASTE */
  .taste{padding-bottom: 9vh;}
  .taste-band{ height:52vh; }
  .taste-a-text{ margin:-12vh auto 0; padding:3.4rem 2.6rem; }
  .taste-b{grid-template-columns:1fr;gap:6vh;margin-top: 11vh;}
  .taste-b-text{ flex-direction:column; gap:3rem; }
  .taste-b-text h2{ writing-mode:horizontal-tb; height:auto; min-height:0; line-height:1.9; }
  .taste-b-text p{writing-mode:horizontal-tb;height:auto;max-width:none;font-size: 1.35rem;}

  /* MOMENTS — pinned horizontal (JS) / native swipe fallback (no-js) */
  .moments-pin{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .moments-pin::-webkit-scrollbar{ display:none; }
  html.js .moments-pin{ overflow:hidden; }
  .moments-track{ height:auto; padding:14vh 6vw; gap:10vw; }
  html.js .moments-track{ height:100svh; padding:0 6vw; gap:10vw; }
  .moments-intro{ width:74vw; }
  .moments-intro-text{ flex-direction:column; gap:2.4rem; }
  .moments-intro h2{ writing-mode:horizontal-tb; height:auto; line-height:1.9; }
  .moments-intro-text p{ writing-mode:horizontal-tb; font-size:1.35rem; }
  .moments-panel{ width:80vw; }
  .moments-img{ height:44vh; }
  .moments-end{ width:60vw; }
  .moments-end p{ writing-mode:horizontal-tb; height:auto; line-height:2; margin-right:6vw; }

  /* TOGETHER */
  .together{ padding:16vh 0; }
  .tog-panels{ flex-direction:column; height:auto; gap:2px; }
  .tog-panel{ height:22vh; min-height:150px; transition:height 1s var(--ease); flex:none; }
  .tog-panel.is-active{ height:64vh; flex:none; }
  .tog-rail{ writing-mode:horizontal-tb; right:auto; left:1.8rem; top:1.6rem; transform:none; }
  .tog-panel.is-active .tog-rail{ opacity:1; }
  .tog-desc{ -webkit-line-clamp:4; }

  /* STORY — JS時はPC同様ピン＋行フェード。no-js時のみ静止レイアウト */
  html.js .story{ height:240vh; }
  html.js .story-pin{ height:100svh; }
  html.js .story-frame{
    display:block !important;
    inset:clamp(1.2rem,4.2vw,2rem);
  }
  html.js .story-head{
    flex-direction:column;
    gap:2.2rem;
    padding: max(7vh,4.8rem) 10vw 0;
    width:100%;
    box-sizing:border-box;
  }
  html.js .story-head h2{
    writing-mode:horizontal-tb;
    height:auto;
    font-size: clamp(1.45rem,4.8vw,2.85rem);
    letter-spacing:.14em;
    line-height:2.1;
  }
  html.js .story-line{
    width:min(760px,88vw);
    font-size:clamp(1.28rem,4.2vw,1.55rem);
    letter-spacing:.1em; line-height:2.15;
    text-align:center;
  }
  html.js .story-fin{ width:min(820px,90vw); }
  html.js .story-fin .story-line{
    font-size:clamp(1.4rem,4.8vw,1.75rem);
    letter-spacing:.12em;
  }

  html:not(.js) .story{ height:auto; }
  html:not(.js) .story-pin{ position:relative; height:auto; min-height:100vh; display:flex; align-items:stretch; padding:18vh 0; }
  html:not(.js) .story-frame{ display:none !important; }
  html:not(.js) .story-head{ padding:0 6vw; flex-direction:column; gap:3rem; width:100%; box-sizing:border-box; }
  html:not(.js) .story-head h2{ writing-mode:horizontal-tb; height:auto; }
  html:not(.js) .story-lines{ position:relative; inset:auto; margin-top:10vh; padding:0 6vw; width:100%; box-sizing:border-box; }
  html:not(.js) .story-line,
  html:not(.js) .story-fin,
  html:not(.js) .story-fin .story-line{
    position:static; transform:none; opacity:1;
    width:100%; max-width:none; margin-left:0; margin-right:0;
    text-align:left;
  }
  html:not(.js) .story-line{
    margin-bottom:4rem;
    font-size:clamp(1.35rem,4.6vw,1.7rem);
    letter-spacing:.1em;
    line-height:2.2;
  }
  html:not(.js) .story-fin{ margin-top:6rem; width:100%; text-align:left; }
  html:not(.js) .story-fin .story-line{
    font-size:clamp(1.5rem,5.2vw,1.9rem);
    letter-spacing:.12em;
  }

  /* CARE / FAQ */
  .care,.voice,.faq{padding: 16vh 0 2vh;}
  .lineup{padding: 10vh 0;}
  .business{padding: 18vh 6vw 0;}
  .biz-frame{ padding:5rem 2.6rem; }
  .biz-side{ display:none; }

  /* CLOSING */
  .closing-inner{ padding:0 6vw; gap:3.2rem; }
  .closing-copy{
    flex-direction:column; align-items:center; gap:2.4rem;
  }
  .closing-inner h2{
    writing-mode:horizontal-tb; height:auto; min-height:0; line-height:1.9;
    align-items:center; text-align:center;
  }
  .closing-inner p{
    writing-mode:horizontal-tb; align-items:center; text-align:center;
    line-height:2.2; max-width:28em;
  }
  .closing-cta{ flex-direction:column; width:100%; }
  .closing-cta .btn{ width:100%; }

  .ft-bottom{ flex-direction:column; align-items:flex-start; }
}


/* ============================================================
   SP TUNABLE (max-width: 820px)
   DevTools から数値を入れるための空ルール置き場。
   上の RESPONSIVE（同820px）より後に書くので、ここが上書き優先。
   ============================================================ */
@media (max-width: 820px){
  /* ---- Base / Utility ---- */
  .grain{}
  .mask{}
  .framed-fine{}
  .btn{
    max-width: 100%;
}
  .btn--ghost{}
  .jp{}
  .en{}
  .v-text{}
  .media-clip{}
  .ico{}
  .light{}
  .sc{}
  .gold{}
  .sp-only{}

  /* ---- Loader ---- */
  .loader-inner{}
  .loader-art{}
  .ld-steam{}
  .s1{}
  .s2{}
  .ld-cup{}
  .ld-cup-line{}
  .ld-saucer{}
  .ld-bag{}
  .loader-copy{
    font-size: 1.6rem;
    letter-spacing: .14em;
}
  .loader-brand{}

  /* ---- Header ---- */
  .head{
    padding: 14px 16px;
  }
  .head__logo{}
  .head__logoimg{
    height: 34px;
  }
  .head__cta{
    font-size: 12px;
    gap: 8px;
    padding: 9px 14px 9px 18px;
    letter-spacing: 0.2em;
  }
  .head__cta svg{
    width: 14px;
    height: 14px;
  }

  /* ---- Progress / Float CTA ---- */
  .progress{}
  .float-cta{}
  .float-cta__text{}
  .float-cta__name{}
  .float-cta__price{}
  .float-cta__btn{
    padding: 1em 3.2em;
    font-size: 1.3rem;
    letter-spacing: 0.14em;
    border-radius: 0.3rem;
  }

  /* ---- FV ---- */
  .fv{
    padding-top: 92px;
  }
  .wa-shippou{}
  .wa-shippou--fv-tl{}
  .wa-shippou--fv-right{}
  .fv__copy{
    padding-left: 24px;
    padding-right: 20px;
  }
  .fv__title{
    font-size: clamp(26px, 7.2vw, 32px);
    letter-spacing: 0.1em;
    line-height: 1.65;
  }
  .fv__sub{
    margin-top: 6px;
    font-size: 13px;
    letter-spacing: 0.18em;
    white-space: nowrap;
  }
  .fv__tate{}
  .fv__frame{
    --fv-l: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    margin-top: calc(-1 * clamp(28px, 4vh, 48px) + 76px);
    aspect-ratio: 4 / 3;
  }
  .fv__video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.12);
  }
  .fv__hint{
    left: 0px;
  }

  /* ---- Strip ---- */
  .strip{}
  .strip-media{}
  .strip-name{}
  .strip-price{}
  .sp-lead{}
  .sp-tail{}

  /* ---- Section common ---- */
  .sec-head{}
  .sec-label{}

  /* ---- Why ---- */
  .why{}
  .why-texts{}
  .why-title{}
  .why-body{}
  .why-sign{}
  .why-frames{}
  .why-fig{}
  .why-pattern{}

  /* ---- Lineup / Product ---- */
  .lineup{}
  .lineup-grid{}
  .prod{}
  .prod-fig{}
  .prod-en{}
  .prod-name{}
  .prod-desc{}
  .prod-price{}
  .prod-btn{}
  .prod--feature{}
  .prod-badge{}
  .lineup-biz{
    margin-top: 3vh;
}

  /* ---- Experience ---- */
  .exp{}
  .exp-side{}
  .exp-side-inner{}
  .exp-side-label{}
  .exp-vcomp{}
  .exp-vline{}
  .exp-vline--2{}
  .exp-vline--3{}
  .exp-main{}
  .exp-main-label{}
  .exp-tlead{}
  .exp-timeline{}
  .exp-tline{}
  .tstep{}
  .tstep-node{}
  .tstep-media{}
  .tstep-vid{}
  .tstep-vid--kaoru{}
  .tstep-body{}
  .tstep-kanji{}
  .tstep-text{}
  .tstep-vid--nomu{}
  .tstep-vid--taberu{}

  /* ---- Discovery ---- */
  .discovery{}
  .disc-title{}
  .disc-stage{}
  .disc-fig{
    aspect-ratio: 1.5 / 1;
}
  .disc-notes{}
  .disc-note{}
  .disc-note-line{}
  .disc-copy{}

  /* ---- Taste ---- */
  .taste{}
  .taste-a{}
  .taste-band{}
  .taste-a-text{}
  .taste-sub{}
  .taste-copy{}
  .taste-b{}
  .taste-fig{}
  .taste-b-text{}

  /* ---- Moments ---- */
  .moments{}
  .moments-pin{}
  .moments-track{}
  .moments-intro{}
  .moments-intro-text{}
  .moments-panel{}
  .moments-img{}
  .moments-end{}

  /* ---- Together ---- */
  .together{
    padding-top: 1vh;
}
  .tog-title{}
  .tog-panels{}
  .tog-panel{}
  .tog-shade{}
  .tog-body{}
  .tog-en{}
  .tog-desc{}
  .tog-rail{}
  .tog-cta{}

  /* ---- Story ---- */
  .story{}
  .story-pin{}
  .story-media{}
  .story-shade{}
  .story-frame{}
  .story-head{}
  .story-lines{}
  .story-line{}
  .story-fin{}

  /* ---- Care ---- */
  .care{}
  .care-title{}
  .care-grid{
    margin-top: 5vh;
}
  .care-item{}
  .care-no{}

  /* ---- Voice ---- */
  .voice{}
  .voice-grid{}
  .voice-card{}
  .voice-lead{}
  .voice-text{}

  /* ---- FAQ ---- */
  .faq{}
  .faq-list{}
  .faq-item{}
  .faq-q{}
  .faq-a{}

  /* ---- Business ---- */
  .tl{}
  .tr{}
  .bl{}
  .br{}
  .business{}
  .biz-frame{}
  .biz-cross{}
  .bc-tl{}
  .bc-tr{}
  .bc-bl{}
  .bc-br{}
  .biz-side{}
  .biz-inner{}
  .biz-lead{}
  .biz-copy{}

  /* ---- Closing ---- */
  .closing{
    min-height: initial;
}
  .closing-media{}
  .closing-shade{}
  .closing-inner{}
  .closing-copy{}
  .closing-cta{}

  /* ---- Footer ---- */
  .footer{}
  .ft-top{}
  .ft-brand{}
  .ft-nav{}
  .ft-head{}
  .ft-company{}
  .ft-bottom{}
  .ft-mark{}

  /* ---- State ---- */
  .is-loading{}
  .is-active{}

}
/* ============================================================
   REDUCED MOTION — everything static & readable
   ============================================================ */
html.no-motion .grain{ animation:none; }
html.no-motion .fv__hint::after{ animation:none; }
html.no-motion .fv__tate{ opacity:1; }
html.no-motion .fv__frame{ opacity:1; }
html.no-motion .mask > span{ transform:none; }
html.no-motion .exp{ display:block; padding:14vh 6vw; }
html.no-motion .exp-side-inner{ position:static; margin-bottom:6vh; }
html.no-motion .exp-side-label{ display:flex; }
html.no-motion .exp-main-label{ display:none; }
html.no-motion .exp-vcomp{
  display:flex; flex-direction:row-reverse; width:auto; min-height:0; font-size:inherit;
}
html.no-motion .exp-vline{
  position:static !important; opacity:1 !important; transform:none !important; font-size:clamp(2.2rem,4vw,3.2rem);
}
html.no-motion .tstep{ opacity:1 !important; filter:none !important; margin-bottom:8vh; }
html.no-motion .exp-tline, html.no-motion .tstep-node{ display:none; }
html.no-motion .moments-pin{ overflow-x:auto; }
html.no-motion .moments-track{ height:auto; padding:12vh 6vw; }
html.no-motion .story{ height:auto; }
html.no-motion .story-frame{ display:none !important; }
html.no-motion .story-pin{ position:relative; height:auto; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:16vh 0; }
html.no-motion .story-lines{ position:relative; inset:auto; margin-top:8vh; }
html.no-motion .story-line, html.no-motion .story-fin, html.no-motion .story-fin .story-line{
  position:relative; inset:auto; transform:none; opacity:1; margin:0 auto 4rem;
}
html.no-motion .tog-panel{ cursor:default; }
html.no-motion .tog-en, html.no-motion .tog-body h3, html.no-motion .tog-desc{
  opacity:1 !important; transform:none !important;
}
html.no-motion #loader{ display:none !important; }