/* ===========================
   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);   /* 共通シャドウ */

  /* washi 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セクション最小高さ */
}

/* ---- 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 ---- */
.seasonal > h3{
  position: sticky; top: 0; z-index: 10;
  margin: 0 0 14px; 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);
}


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

/* 器 */
.sticky-section{
  position: relative;
  padding-block: var(--section-pad);
  min-height: var(--sticky-min, 140svh); /* iOSのアドレスバー対策 */
  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(--sticky-top, var(--header-h, 60px)) + 12px);
  align-self: start;
  z-index: 1;
}

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

/* caption（画像と一体感を戻す：白＋薄い枠） */
.sticky-section .card .caption{
  margin-top: 10px;
  padding: clamp(10px,1.6vw,14px) clamp(12px,2vw,18px);
  background: #fffdf7;                               /* ← 白に統一 */
  color: var(--text);
  border: 1px solid rgba(0,0,0,.06);              /* ← 薄く */
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);         /* ← 軽めの影 */
  font-size: clamp(14px,1.8vw,18px);
  line-height: 1.7;
}

/* 説明ブロック */
.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; }

/* ===== 画像を右・説明を左にする（.image-right） ===== */
.sticky-section.image-right .grid{
  grid-template-columns: 1fr minmax(var(--card-min), var(--visual-col, 520px));
  grid-template-areas: "copy visual";
}
/* ※“中央側のライン”を右側に移したい場合は下を有効化
.sticky-section.image-right .sticky-copy .feature{
  border-left:0; border-right:3px solid rgba(184,138,68,.65);
}
*/

/* ---- レスポンシブ調整 ---- */
/* 中間帯：画像列をさらに絞る（2カラム維持） */
@media (max-width: 920px){
  :root{ --visual-col: clamp(220px, 34vw, 460px); }
}





/* スマホ：560px以下で1カラム化（stickyは維持） */
@media (max-width: 560px){
  :root{ --visual-col: clamp(280px, 88vw, 380px); }
  .sticky-section .grid{ display:block; }
  .sticky-section .card{
    position: sticky;
    top: calc(var(--sticky-top, var(--header-h, 56px)) + 8px);
    max-width: min(100%, var(--visual-col));
    margin-inline: auto;
    margin-bottom: 8px;
  }
}



/* 置き換え：SPは1カラムのGridにして最小幅を維持（.card と同じ性質） */
@media (max-width: 680px){
  .sticky-section .grid{
    display: grid;
    grid-template-columns: minmax(250px, 1fr); /* ★最小210pxを保証 */
    gap: clamp(12px, 3vw, 20px);
  }
  .sticky-section .card{
    position: sticky;
    top: calc(var(--sticky-top, var(--header-h, 56px)) + 8px);
    width: 100%;
    margin-inline: auto;
    margin-bottom: 8px;
  }
}

/* デフォルト（PC〜）：今までの箱型を維持 */
.sticky-section .card .caption{
  margin-top: 10px;
  padding: clamp(10px,1.6vw,14px) clamp(12px,2vw,18px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  font-size: clamp(14px,1.8vw,18px);
  line-height: 1.7;
  
}

/* SPは通常カードのトーンに合わせて“フラット”にする */
@media (max-width: 680px){
.sticky-section .card .caption{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 12px 0 0;
  font-size: .9rem;
  color: var(--muted);
  margin-top: 10px;
  padding: clamp(10px,1.6vw,14px) clamp(12px,2vw,18px);
  background: #fff;                               /* ← 白に統一 */
  color: var(--text);
  border: 1px solid rgba(0,0,0,.06);              /* ← 薄く */
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);         /* ← 軽めの影 */
  font-size: clamp(14px,1.8vw,18px);
  line-height: 1.7;
  }

  /* フォールバック（JSが測るまでの仮のh3高さ） */
:root{
  --title-h: 52px; /* お好みで。JSが上書きします */
  --title-gap: 0px; /* 必要なら -1px ～ -3px で“密着感”を出せます */
}

/* h3はヘッダー直下で止まる */
.seasonal > h3{
  position: sticky;
  top: calc(var(--sticky-top, var(--header-h, 60px)));
  z-index: 20;               /* 画像カードより上に */
  margin: 0;                 /* 下余白はゼロでOK（見出し直下ピッタリ） */
}

/* 画像カード：ヘッダー高 + h3の高さ だけオフセットして止まる */
.sticky-section .card{
  position: sticky;
  top: calc(
    var(--sticky-top, var(--header-h, 60px))
    + var(--title-h, 0px)
    + var(--title-gap, 0px)              /* 見出しとカードの間の最小クリアランス（好みで調整） */
  );
  z-index: 10;
}

}

@media (max-width: 680px){
  .sticky-section.image-right .sticky-copy{ order: -1; } /* 先に説明 */
}









/* ---- 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; }



/* ===== Mobile: sticky-section は 1カラム固定 ===== */
@media (max-width: 680px){
  :root{
    --visual-col: clamp(260px, 92vw, 460px);
    --title-gap: 0px; /* 微調整用: -1px〜-3px で更に密着 */
    --top-offset: 0px;  /* ヘッダー下に止めたい時は var(--sticky-top) に変える */
    --copy-narrow: 0.98;
  }

  /* h3 はヘッダー直下でピタッ */
  .seasonal > h3{
    top: calc(var(--sticky-top, var(--header-h, 56px)));
    margin: 0;
    position: sticky;
    top: var(--top-offset);    /* ← ここだけ見ておけばOK */
    z-index: 20;
    margin: 0;                 /* 余白で隙間が出ないようにゼロ */
  }

  .sticky-section .grid{ display:block; }

  /* 画像カード：ヘッダー高 + h3の実測高 (+微調整) で止める */
  .sticky-section .card{
    position: sticky;
    top: calc(
      var(--sticky-top, var(--header-h, 56px))
      + var(--title-h, 0px)
      + var(--title-gap, 0px)
    );
    max-width: min(100%, var(--visual-col));
    margin: 0 auto 10px;
    top: calc(var(--top-offset) + var(--title-h, 0px) + var(--title-gap, 0px));
    z-index: 10;
  }

  .sticky-section.image-right .grid{ display:block; }

  .sticky-section .sticky-copy .feature{
    min-height: initial;
    padding: 14px 16px;
  }

  /* ▼キャプションは“帯”だけに（別カード風を撤去） */
  .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);
  }

  .sticky-section .sticky-copy{
    max-width: calc(var(--visual-col) * var(--copy-narrow));
    margin-inline: auto;   /* 画像と同じく中央寄せ */
  }
}

/* MENUボタンの文字色をサイトと統一（iOSの既定も打ち消し） */
.menu-btn{
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

/* モバイル用の既存スタイルがある場合でも色だけは固定 */
@media (max-width: 800px){
  .menu-btn{ color: var(--text); }
}

/* ついでにホバー・フォーカス時の見た目も統一 */
.menu-btn:hover{ color: var(--accent); }
.menu-btn:active{ opacity: .9; }
.menu-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

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