/* ============================================================
   KOMORE — Komorebi Luxury Design System
   Quiet Japanese editorial luxury for a single-farm gyokuro brand.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Shippori+Mincho:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap');

:root{
  /* — palette — */
  --sumi:      #1b201b;   /* near-black ink green */
  --sumi-soft: #2a312a;
  --ink:       #303730;   /* body text on light */
  --ink-mute:  #6c7368;   /* secondary text */
  --washi:     #f4f0e7;   /* warm paper */
  --washi-2:   #ece6d8;   /* deeper paper */
  --line:      #d9d2c2;   /* hairlines on light */
  --tea:       #33422f;   /* deep tea green */
  --tea-mid:   #586b4d;
  --sage:      #97a585;
  --brass:     #ab854a;   /* accent gold */
  --brass-lt:  #c4a36a;
  --cream:     #f8f5ee;

  /* — 今すぐ買うボタン：サイト共通で確定した色 — */
  --buy:       #728a5a;   /* finalized buy-button green */
  --buy-hover: color-mix(in oklab, var(--sumi) 78%, var(--washi)); /* 少し薄めのホバー */

  /* subpage hero wash — melds out of the header (washi) at the top, settles to a
     calm, faintly cooler cream at the content line. Quieter than a flat beige slab. */
  --page-hero-bg:
    radial-gradient(125% 95% at 85% 0%, rgba(171,133,74,.055), transparent 55%),
    linear-gradient(180deg, var(--washi) 0%, #efece1 52%, #e8e6d6 100%);

  /* — type — */
  --serif:  'Shippori Mincho', 'Cormorant Garamond', serif;
  --display:'Cormorant Garamond', 'Shippori Mincho', serif;
  --sans:   'Zen Kaku Gothic New', system-ui, sans-serif;

  /* — rhythm — */
  --gut: clamp(20px, 5vw, 80px);   /* page side gutter */
  --maxw: 1280px;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--washi);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.85;
  letter-spacing:.02em;
  font-size:16px;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* paper grain — barely-there texture */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ——— typography helpers ——— */
.eyebrow{
  font-family:var(--sans); font-weight:400; font-size:.72rem;
  letter-spacing:.42em; text-transform:uppercase; color:var(--brass);
}
.eyebrow.on-dark{ color:var(--brass-lt); }
.vline{ /* vertical rule mark */
  display:block; width:1px; height:64px; background:var(--brass); margin:0 auto;
}
.jp-vertical{ writing-mode:vertical-rl; text-orientation:mixed; }

h1,h2,h3{ font-weight:400; line-height:1.2; letter-spacing:.04em; margin:0; }
.display{
  font-family:var(--display); font-weight:300;
  font-size:clamp(3.4rem, 11vw, 9rem); line-height:.95; letter-spacing:.01em;
}
.serif-h{ font-family:var(--serif); font-weight:500; }

/* ——— layout ——— */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }

/* Checkoutを開く前に販売条件を確認できる共通案内。商品ページと法定表記で同じ見た目を使う。 */
.sales-guide{ margin-top:1.6rem; padding:1.2rem 1.3rem; border:1px solid var(--line); background:var(--washi-2); }
.sales-guide__title{ margin:0 0 .9rem; font-family:var(--serif); font-size:1rem; font-weight:600; letter-spacing:.06em; color:var(--tea); }
.sales-guide__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem 1.25rem; margin:0; }
.sales-guide__list > div{ min-width:0; }
.sales-guide__list dt{ margin:0 0 .2rem; font-size:.7rem; font-weight:600; letter-spacing:.12em; color:var(--brass); }
.sales-guide__list dd{ margin:0; font-size:.84rem; line-height:1.65; color:var(--ink); }
.sales-guide__list a{ color:var(--tea); text-decoration:underline; text-underline-offset:.18em; }
.sales-guide__payment{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.sales-guide__payment p{ margin:0 0 .65rem; font-size:.78rem; line-height:1.65; color:var(--ink-mute); }
.card-brands{ display:block; width:min(100%,34.8rem); height:auto; }
.price-currency{ display:block; margin-top:.3rem; font-family:var(--sans); font-size:.64rem; font-weight:400; letter-spacing:.1em; color:var(--ink-mute); }
@media(max-width:560px){
  .sales-guide__list{ grid-template-columns:1fr; gap:.65rem; }
  .sales-guide{ padding:1rem; }
}
section{ position:relative; z-index:2; }

/* ——— buttons ——— */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:400; font-size:.82rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:1.05em 2.2em; border:1px solid var(--sumi); color:var(--sumi);
  background:transparent; cursor:pointer; transition:.45s cubic-bezier(.2,.7,.2,1);
  border-radius:4px;
}
.btn:hover{ background:var(--sumi); color:var(--washi); }
/* 遷移ボタンのホバー反応：わずかに浮き上がる（テキストリンク化した変種は除外） */
.btn:not(.bb-links .btn):hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(27,32,27,.16); }
.btn--ghost-light{ border-color:rgba(244,240,231,.5); color:var(--washi); }
.btn--ghost-light:hover{ background:var(--washi); color:var(--sumi); border-color:var(--washi); }
.btn .arr{ transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.btn:hover .arr{ transform:translateX(5px); }

/* ——— unified text link: 文字＋矢印（ヒーロー2枚目「先行予約をみる →」に統一） ———
   色は currentColor で文脈（明背景＝濃文字／暗背景＝washi）に追従。
   ホバー時は色を変えず、矢印が右へ4pxスライド＋下線が濃くなる。 */
.s-link{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-weight:400; font-size:.92rem; letter-spacing:.18em;
  text-transform:none; color:inherit; background:none;
  border:0; border-radius:0; padding:0 0 .25em;
  border-bottom:1px solid color-mix(in srgb, currentColor 50%, transparent);
  cursor:pointer; transition:border-color .4s, color .4s;
}
.s-link:hover{ background:none; color:inherit; border-bottom-color:currentColor; }
.s-link .arr{ display:inline-block; transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.s-link:hover .arr{ transform:translateX(4px); }
/* 一覧へ戻る等の左矢印リンクは左へスライド */
.s-link--back:hover .arr{ transform:translateX(-4px); }

.link-underline{
  position:relative; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:3px;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.link-underline:hover::after{ transform:scaleX(1); }

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--gut); transition:.5s ease;
  mix-blend-mode:normal;
}
.site-head.is-dark{ color:var(--washi); }
.site-head.is-light{ color:var(--sumi); }
.site-head.scrolled{
  background:var(--washi); color:var(--sumi);
  padding-block:1rem; border-bottom:1px solid var(--line);
  box-shadow:0 1px 30px rgba(27,32,27,.05);
}
.brand-mark{
  font-family:var(--display); font-weight:400; font-size:1.5rem;
  letter-spacing:.32em; padding-left:.32em;
}
.brand-mark small{ display:block; font-family:var(--sans); font-size:.5rem; letter-spacing:.5em; opacity:.7; margin-top:2px; }
.nav{ display:flex; align-items:center; gap:clamp(1.4rem,3vw,3rem); }
.nav a{ font-size:1rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400; }
.nav a .jp{ display:block; font-size:.62rem; letter-spacing:.18em; opacity:.6; text-transform:none; margin-top:1px; }
.nav-cart{ display:flex; align-items:center; gap:.5em; }

/* hamburger toggle (hidden on wide screens) */
.nav-toggle{
  display:none; position:relative; z-index:70;
  width:30px; height:22px; padding:0; margin:0; border:0; background:none;
  cursor:pointer; color:inherit; flex:0 0 auto;
}
.nav-toggle .nt-bar{
  position:absolute; left:0; right:0; height:1.5px; background:currentColor;
  transition:transform .4s cubic-bezier(.4,0,.1,1), opacity .25s ease, background-color .3s;
}
.nav-toggle .nt-bar:nth-child(1){ top:2px; }
.nav-toggle .nt-bar:nth-child(2){ top:50%; transform:translateY(-50%); }
.nav-toggle .nt-bar:nth-child(3){ bottom:2px; }

/* backdrop behind the drawer */
.nav-scrim{
  display:none; position:fixed; inset:0; z-index:55;
  background:rgba(15,19,15,.42); opacity:0; pointer-events:none;
  transition:opacity .45s ease; backdrop-filter:blur(2px);
}

@media (max-width:1080px){
  /* ▼ 重要：.site-head の backdrop-filter は fixed 子孫の“包含ブロック”を
     ヘッダー自身（高さ ≈114px）に変えてしまい、ドロワー(.nav)とスクリム(.nav-scrim)が
     その中に閉じ込められて縦に潰れ、メニュー内スクロールが発生していた。
     モバイルではフィルタを外し、fixed の基準をビューポートへ戻す。 */
  .site-head, .site-head.scrolled, .site-head.is-dark, .site-head.is-light{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:var(--washi);
  }
  .nav{
    position:fixed; top:0; right:0; bottom:0;
    height:100dvh;
    width:min(84vw,380px);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:calc(var(--gut) + 2.6rem) clamp(1.8rem,5vw,3rem) 3rem;
    background:var(--washi); color:var(--sumi);
    transform:translateX(100%);
    transition:transform .55s cubic-bezier(.4,0,.1,1);
    box-shadow:-24px 0 70px rgba(15,19,15,.18);
    z-index:60; overflow-y:auto;
  }
  .nav a{
    padding:1.15rem 0; font-size:.92rem; letter-spacing:.2em;
    border-bottom:1px solid var(--line); color:var(--sumi);
  }
  .nav a:first-child{ border-top:1px solid var(--line); }
  .nav a .jp{ font-size:.66rem; opacity:.55; margin-top:3px; }

  .nav-toggle{ display:block; }
  .nav-scrim{ display:block; }

  /* open state (class toggled on .site-head) */
  .nav-open .nav{ transform:translateX(0); }
  .nav-open .nav-scrim{ opacity:1; pointer-events:auto; }
  .nav-open .nav-toggle .nt-bar{ background:var(--sumi); }
  .nav-open .nav-toggle .nt-bar:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
  .nav-open .nav-toggle .nt-bar:nth-child(2){ opacity:0; }
  .nav-open .nav-toggle .nt-bar:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg); }
}
body.nav-lock{ overflow:hidden; }

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-foot{ background:var(--sumi); color:var(--washi); position:relative; z-index:2; }
.foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem; padding-block:clamp(3.5rem,7vw,6rem); border-bottom:1px solid rgba(244,240,231,.14); }
.foot-col .foot-subhead{ margin-top:2.2rem; }
.foot-top .brand-mark{ font-size:2.2rem; }
.foot-col h4{ font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-lt); font-weight:400; margin:0 0 1.3rem; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; }
.foot-col a{ font-size:.9rem; letter-spacing:.05em; color:rgba(244,240,231,.75); transition:.3s; }
.foot-col a:hover{ color:var(--washi); }
.foot-social{ flex-direction:row !important; flex-wrap:wrap; gap:.75rem !important; align-items:center; }
.foot-social li{ display:block; }
.foot-social a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:1px solid rgba(244,240,231,.26); border-radius:50%; color:rgba(244,240,231,.75); transition:.3s; }
.foot-social a:hover{ color:var(--washi); border-color:rgba(244,240,231,.6); background:rgba(244,240,231,.06); }
.foot-social svg{ width:18px; height:18px; display:block; }
.foot-hours{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.foot-hours li{ display:flex; justify-content:space-between; gap:1.2rem; font-size:.9rem; letter-spacing:.05em; color:rgba(244,240,231,.75); }
.foot-hours li span:last-child{ color:rgba(244,240,231,.5); white-space:nowrap; }
.foot-bot{ display:flex; justify-content:space-between; align-items:center; padding-block:1.8rem; font-size:.72rem; letter-spacing:.12em; color:rgba(244,240,231,.5); flex-wrap:wrap; gap:1rem; row-gap:1.1rem; }
.foot-legal{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.4rem; width:100%; order:-1;
  padding:0 0 1.4rem; margin:0 0 .4rem; border-bottom:1px solid rgba(244,240,231,.12); list-style:none; }
.foot-legal li{ display:flex; align-items:center; }
.foot-legal a{ font-family:var(--sans); font-size:.74rem; letter-spacing:.12em; color:rgba(244,240,231,.7); transition:color .3s; }
.foot-legal a:hover{ color:var(--washi); }
.foot-tagline{ font-family:var(--serif); font-size:1.05rem; line-height:1.9; color:rgba(244,240,231,.82); max-width:34ch; margin-top:1.4rem; font-weight:400; letter-spacing:.04em; }
@media (max-width:1040px){ .foot-top{ grid-template-columns:repeat(3,1fr); } .foot-brand{ grid-column:1 / -1; } }
@media (max-width:760px){ .foot-top{ grid-template-columns:1fr 1fr; } .foot-top .brand-mark{ grid-column:1/-1; } }
/* normalize the footer on every page — keep it immune to page-level body overrides
   (e.g. story pages set body{--maxw:none} and .story p{color:var(--ink)}) */
.site-foot{ --maxw:1440px; --gut:clamp(20px,5vw,80px); }
body .site-foot .wrap{ max-width:1440px; }
.site-foot .foot-tagline{ font-size:1.05rem; line-height:1.9; letter-spacing:.04em; color:rgba(244,240,231,.82); margin:1.4rem 0 0; max-width:none; white-space:nowrap; }

/* ——— image slot base styling ——— */
image-slot{ background:var(--washi-2); display:block; }
/* The component ships a default :host{height:160px}. Every slot here is either
   full-bleed (height:100% / absolute, set by page rules that win on later order)
   or sized by aspect-ratio — so release the fixed height globally. */
image-slot[id]{ height:auto; }
.site-foot image-slot{ background:var(--sumi-soft); }

/* ——— reveal on scroll ——— */
.reveal{ opacity:0; transform:translateY(-26px); transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; } .reveal.d2{ transition-delay:.24s; } .reveal.d3{ transition-delay:.36s; } .reveal.d4{ transition-delay:.48s; }

/* utility */
.center{ text-align:center; }
.muted{ color:var(--ink-mute); }
.measure{ max-width:48ch; }
@media (prefers-reduced-motion:reduce){ .reveal{ transition:none; opacity:1; transform:none; } html{ scroll-behavior:auto; } }