/* ===========================
   Wagashi site – styles.css (replace)
   =========================== */

/* ---- Design tokens ---- */
:root{
  --maxw: 1360px;                         /* コンテンツ最大幅 */
  --header-h: 60px;                       /* ヘッダー想定高さ（JSが--sticky-topに同期） */
  --gutter: clamp(14px, 3.2vw, 40px);     /* レイアウト余白 */
  --section-pad: clamp(6px, 1.6vh, 16px); /* セクション上下余白 */
  --card-min: 230px;                      /* カード最小幅 */
  --visual-col: clamp(250px, 38vw, 560px);/* Sticky画像列幅 */
  --img-fit: cover;                       /* object-fit既定 */
  --radius: 18px;                         /* 角丸 */
  --shadow: 0 8px 24px rgba(0,0,0,.10);   /* 共通シャドウ */

  /* theme */
  --bg: #f7f4ee;
  --surface: #fffdf7;
  --text: #473b2d;
  --muted: #6f655b;
  --accent: #b88a44;
  --border: rgba(0,0,0,.08);
  --sticky-top: 0px;                      /* JSで実測ヘッダー高を同期 */
  --section-gap: 10px;
  --sticky-min: 60vh;                     /* Stickyセクション最小高さ */

  /* sticky制御（今回の肝） */
  --top-offset: 0px;      /* 見出しを固定するスクリーン上端位置（ヘッダー下にしたい時は var(--sticky-top) に） */
  --title-h: 52px;        /* h3のフォールバック高さ（JSで上書き） */
  --title-gap: 0px;       /* 見出し下端と画像カードの密着度（-1px〜-3pxでさらにピタ） */
  --copy-narrow: 0.92;    /* 説明文を画像より狭く（画像幅 × 0.92） */
}

/* ---- Base ---- */
*{ box-sizing:border-box; }
html{ font-size:clamp(15px,1.1vw + .5rem,18px); }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(184,138,68,.08), transparent 60%),
    repeating-linear-gradient(25deg, rgba(0,0,0,.03) 0 2px, transparent 2px 6px),
    var(--bg);
  background-attachment: fixed,fixed,scroll;
  font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;
  line-height:1.8;
  letter-spacing:.02em;
}
a{ color:inherit; text-decoration:none; transition: color .2s ease, background-color .2s ease; }
a:hover{ color:var(--accent); }
img{ display:block; max-width:100%; height:auto; }
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
}

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(to bottom, rgba(247,244,238,.9), rgba(247,244,238,.65));
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:min(var(--maxw),96vw);
  margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand img{ width:120px; height:auto; }
.nav{ display:flex; gap:18px; }
.nav a { font-size: clamp(10px, 1.4vw, 14px); }
.menu-btn{ display:none; }

/* ---- Hero ---- */
.hero{ position:relative; overflow:hidden; }
.hero-viewport{ position:relative; height:clamp(360px,60vh,720px); }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; background:center/cover no-repeat; }
.slide.active{ opacity:1; }
.hero-copy{ position:absolute; right:5%; bottom:3%; max-width:70%; pointer-events:none; text-align:right; }
.hero-copy h2{
  font-size:clamp(16px,3.6vw,30px);
  margin:0; font-weight:600; color:var(--accent);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.45);
  padding:.4em .8em; border-radius:12px; backdrop-filter:blur(3px);
}

/* Hero左右ナビ */
.slider-nav .nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width: clamp(32px, 6vw, 44px); height: clamp(32px, 6vw, 44px);
  display:grid; place-items:center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
  z-index: 5;
  transition: transform .10s ease, background .5s ease, opacity .2s ease;
  opacity: .95;
  line-height: 0;
}
.slider-nav .nav-btn:hover{ transform: translateY(-50%) scale(1.06); background: rgba(0,0,0,.38); }
.slider-nav .nav-btn:active{ transform: translateY(-50%) scale(.96); }
.slider-nav .nav-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.slider-nav .prev{ left: clamp(6px, 1.6vw, 14px); }
.slider-nav .next{ right: clamp(6px, 1.6vw, 14px); }
.slider-nav .nav-btn svg{ display:block; margin:auto; width:18px; height:18px; }

/* ---- Common sections ---- */
.lead{
  max-width:min(var(--maxw),96vw);
  margin:20px auto; padding:0 20px;
  text-align:center; color:var(--muted);
  font-size: clamp(13px, 1.0vw, 18px);
}
.news,.band,.seasonal{
  max-width:min(var(--maxw),96vw);
  margin:var(--section-gap) auto;
  padding:0 20px;
}

/* Card grid (汎用カード) */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap:16px;
  align-items:start;
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.card img{ aspect-ratio:4/3; object-fit:cover; }
.card .p{ padding:12px; font-size:.9rem; color:var(--muted); }

/* ---- Section title（sticky） ---- */
.seasonal > h3{
  position: sticky;
  top: var(--top-offset);              /* ← 上端ピタ */
  z-index: 20;
  margin: 0;                           /* 下の隙間は .grid 側で作る */
  padding: 10px 14px;
  color: var(--text);
  background:
    linear-gradient(180deg,#fff7ec,#f2e7d6),
    repeating-linear-gradient(13deg, rgba(120,90,60,.045) 0 1.5px, transparent 1.5px 7px),
    repeating-linear-gradient(-17deg, rgba(120,90,60,.035) 0 1.5px, transparent 1.5px 9px);
  border: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
  scroll-margin-top: calc(var(--sticky-top, var(--header-h)) + 10px); /* アンカー着地用 */
}

/* 初期表示時だけ見出し下に余白（stick時は影響なし） */
#seasonal-1 > .grid,
#features    > .grid { margin-top: clamp(10px, 2vw, 22px); }

/* ===========================
   Sticky Scrollytelling（統一）
   =========================== */

/* 器 */
.sticky-section{
  position: relative;
  padding-block: var(--section-pad);
  min-height: var(--sticky-min, 140svh);
  overflow: visible;
}

/* PC：左=画像 / 右=説明 */
.sticky-section .grid{
  display: grid;
  grid-template-columns: minmax(var(--card-min), var(--visual-col, 520px)) 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  grid-template-areas: "visual copy";
}
.sticky-section .card{        grid-area: visual; }
.sticky-section .sticky-copy{ grid-area: copy;   }

/* 画像カード：見出しの下端でピタ止まり */
.sticky-section .card{
  position: sticky;
  top: calc(var(--top-offset) + var(--title-h) + var(--title-gap));
  align-self: start;
  z-index: 10;
}

/* 画像 */
.sticky-section .card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 説明ブロック */
.sticky-copy .feature{
  margin:14px 0 22px;
  min-height: clamp(220px, 34vh, 460px);
  padding:16px 18px;
  border-left:3px solid rgba(184,138,68,.65);
  background:rgba(184,138,68,.07);
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.sticky-copy .feature h4{ margin:0 0 8px; font-size:clamp(16px,1.6vw,20px); }
.sticky-copy .feature p{ margin:0; color:var(--muted); line-height:1.7; }

/* 説明は画像より狭く */
.sticky-section .sticky-copy{
  max-width: calc(var(--visual-col) * var(--copy-narrow));
}
.sticky-section .sticky-copy .feature{ width:100%; }

/* 画像を右にする場合（.image-right） */
.sticky-section.image-right .grid{
  grid-template-columns: 1fr minmax(var(--card-min), var(--visual-col, 520px));
  grid-template-areas: "copy visual";
}

/* ---- レスポンシブ ---- */

/* 中間帯 */
@media (max-width: 920px){
  :root{ --visual-col: clamp(220px, 34vw, 460px); }
}

/* モバイル（<=680px） */
@media (max-width: 680px){
  :root{ --visual-col: clamp(260px, 92vw, 460px); }

  /* 1カラム化（DOM順に縦積み） */
  .sticky-section .grid{ display:block; }

  /* 画像カードは中央寄せ・sticky位置はPCと同式 */
  .sticky-section .card{
    max-width: min(100%, var(--visual-col));
    margin: 0 auto 10px;
  }

  /* 説明も画像と同じ中心線に */
  .sticky-section .sticky-copy{
    max-width: calc(var(--visual-col) * var(--copy-narrow));
    margin-inline: auto;
  }

  /* キャプションは“帯だけ”（別カード風は無し） */
  .sticky-section .card .p{
    margin: 0;
    padding: 12px 14px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--muted);
  }

  /* image-right でも必ず縦積み */
  .sticky-section.image-right .grid{ display:block; }
}

/* ---- details / footer ---- */
details{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
  padding:14px 16px;
  margin:10px 0;
}
summary{ cursor:pointer; font-weight:600; }
summary::-webkit-details-marker{ display:none; }

footer{ border-top:1px solid var(--border); margin-top:80px; }
.footer-inner{
  max-width:min(var(--maxw),96vw);
  margin:0 auto;
  padding:24px 20px;
  color:var(--muted);
  font-size:.9rem;
  display:grid;
  gap:8px;
}

/* ---- small screen nav ---- */
@media (max-width: 800px){
  .menu-btn{
    display:inline-flex;
    border:1px solid var(--border);
    background:transparent;
    padding:8px 12px;
    border-radius:999px;
  }
  .nav{
    display:none;
    position:absolute; top:60px; right:16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    flex-direction:column;
    padding:8px;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:10px 12px; border-radius:10px; }
  .nav a:hover{ background:rgba(0,0,0,.04); }
}

/* ---- motion preference ---- */
@media (prefers-reduced-motion:reduce){
  .slide{ transition:none; }
}

/* ===========================
   Access page extensions
   =========================== */
.breadcrumb{
  max-width:min(var(--maxw),96vw);
  margin:0 auto;
  padding:16px 20px;
  font-size:.95rem;
  color:var(--muted);
}
.breadcrumb a{ text-decoration:none; }
.breadcrumb a:hover{ color:var(--accent); text-decoration: underline; }
.breadcrumb .sep{ opacity:.4; margin-inline:10px; }

.hero-figure{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  background:var(--surface);
}
.hero-figure img{ width:100%; height:auto; display:block; }

.access-grid{ display:grid; gap:20px; grid-template-columns:1.2fr 1fr; }
@media(max-width:920px){ .access-grid{ grid-template-columns:1fr; } }

.access-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

.map-embed{
  aspect-ratio:16/10;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.map-embed iframe{ inline-size:100%; block-size:100%; border:0; }

/* Buttons */
.btns{ display:flex; flex-wrap:wrap; gap:12px; margin-block:12px 0; }
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.7em 1em; border-radius:999px; text-decoration:none;
  border:1px solid var(--border); box-shadow:var(--shadow);
  background:#fff; color:#111;
}
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Notes */
.note{ font-size:.92rem; opacity:.9; }

/* おしながきカード画像の枠ズレ防止（強制 4:3・中央トリミング） */
#features .card img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
}