/* =========================================
   TOKENS
========================================= */
:root{
  --max: 1600px;

  /* colors */
  --navy-0:#2a679c;
  --navy-1:#104674;
  --gold:#b9931f;
  --wave-lt:#326ea1;   /* 左上波 */
  --wave-rb:#124064;   /* 右下波 */
  --text:#262626;
  --muted:#7a7a7a;

  /* layout */
  --container-padding: clamp(16px, 5vw, 40px);
  --gnav-h: 64px;
  --gold-w: clamp(260px, 22vw, 360px); /* 使うなら background-size に */

  /* fx */
  --radius:16px;
  --shadow:0 12px 34px rgba(0,0,0,.08);

  /* type */
  --ff-serif: "Zen Old Mincho", "Noto Serif JP", serif;
  --ff-sans: "Zen Kaku Gothic New", system-ui, -apple-system, "Noto Sans JP", sans-serif;
  --fz-hero: clamp(28px, 4.6vw, 48px);
  --fz-h2: clamp(34px, 5vw, 52px);

  /* hamburger */
  --bar-w: 24px;
  --bar-h: 2px;
  --bar-gap: 7px;
}

/* =========================================
   BASE
========================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body{
  margin:0;
  color:var(--text);
  font-family: var(--ff-serif);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
figure {margin: auto;}
a{ color:inherit; text-decoration:none; }
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}

/* 固定ナビの高さぶん、アンカー位置を補正 */
[id]{
  scroll-margin-top: calc(var(--gnav-h, 64px));
}

.container{
  width: min(100% - 32px, var(--max));
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.ff-sans{ font-family: var(--ff-sans); }

.btn-wrap {
  text-align: center;
}

.btn-wrap.right {
  text-align: right;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9em 1.8em; /* 横は少し広め */
  border-radius: 8px;   /* ←999pxをやめて角丸矩形に */
  color: #fff;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .05em;
  background: linear-gradient(135deg, #d5ae18, #b6961a);
  transition: background 0.6s ease, filter 0.6s ease; /* ゆっくり切り替え */
}

.btn:hover {
  background: linear-gradient(135deg, #f1d04a, #d5ae18);
  filter: brightness(1.1);
}

.btn::after {
  content: "\25B6"; /* ▶ */
  margin-left: .6em;
  font-size: .85em;
}

.btn-sold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9em 1.8em; /* 横は少し広め */
  border-radius: 8px;   /* ←999pxをやめて角丸矩形に */
  color: #fff;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .05em;
  background: linear-gradient(135deg, #c4c0b4, #aaa79a);
  transition: background 0.6s ease, filter 0.6s ease; /* ゆっくり切り替え */
}

/* =========================================
   GLOBAL NAV
========================================= */
.gnav{
  position:fixed; inset:0 0 auto 0;
  z-index:100; color:#fff;
  transition:background .28s ease, box-shadow .28s ease;
  overflow:clip;
}
.gnav__inner{
  position:relative;
  display:flex; align-items:center; gap:6%;
  min-height:var(--gnav-h);
}

/* top: 透明 + 金の波（コンテナ基準で揃える） */
.gnav.gnav--top{ background:transparent; }
.gnav.gnav--top .gnav__inner::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("/gourmand/img/patisi/nav_wave.png") no-repeat;
  background-position: auto center; /* ← ロゴと同期 */
  background-size:auto 100%; /* 画像の高さ=ヘッダー */
}
.gnav__logo, .gnav__nav, .gnav__toggle{ position:relative; z-index:1; }

/* scrolled: 金帯、波を消す */
.gnav.gnav--scrolled{ background:var(--gold); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.gnav.gnav--scrolled .gnav__inner::before{ content:none; }
.gnav.gnav--scrolled .gnav__logo img{ filter:brightness(0) invert(1); }

.gnav__nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:25px; flex:1; font-size:16px;
}
.gnav__list{ display:flex; gap:clamp(16px,2.5vw,36px); list-style:none; margin:0; padding:0; letter-spacing:.06em; }
.gnav__list a{ display:inline-block; padding:10px 2px; position:relative; }
.gnav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:1px;
  background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.gnav__list a:hover::after, .gnav__list a:focus-visible::after{ transform:scaleX(1); }
.gnav__sns{ display:flex; align-items:center; gap:14px; }
.gnav__sns a{ display:inline-flex; padding:6px; border-radius:8px; }
.gnav__sns a:hover{ background:rgba(255,255,255,.08); }

/* ハンバーガー：PCは出さない */
.gnav__toggle{ display:none !important; }

/* ---------- SP only ---------- */
@media (max-width:980px){
  /* 波はSPで消す */
  .gnav.gnav--top .gnav__inner::before{ background:none; content:none; }

  /* ハンバーガー出す */
  .gnav__toggle{
    position:relative; display:inline-block !important;
    width:44px; height:44px; border:0; background:transparent; color:#fff; padding:0; z-index:2;
    margin-left:auto;
  }
  .gnav__toggle-bar{
    position:absolute; left:50%; top:50%;
    width:var(--bar-w); height:var(--bar-h);
    transform:translate(-50%,-50%);
    background:#fff; border-radius:2px; transition:background .25s ease;
  }
  .gnav__toggle-bar::before,
  .gnav__toggle-bar::after{
    content:""; position:absolute; left:0; width:100%; height:var(--bar-h);
    background:#fff; border-radius:2px;
    transition:transform .25s ease, top .25s ease, bottom .25s ease, opacity .2s ease;
  }
  .gnav__toggle-bar::before{ top:calc(-1 * var(--bar-gap)); }
  .gnav__toggle-bar::after{  bottom:calc(-1 * var(--bar-gap)); }

  /* メニュー本体（ドロワー） */
  .gnav__nav{
    position:fixed; inset:64px 0 0 0;
    background:linear-gradient(180deg,var(--navy-0) 0%, var(--navy-1) 100%);
    padding:16px 20px 24px;
    display:grid; grid-template-columns:1fr; gap:20px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .gnav[aria-expanded="true"] .gnav__nav{
    transform:none; opacity:1; pointer-events:auto;
  }
  /* ✕ 変形 */
  .gnav[aria-expanded="true"] .gnav__toggle-bar{ background:transparent; }
  .gnav[aria-expanded="true"] .gnav__toggle-bar::before{ top:0; transform:rotate(45deg); }
  .gnav[aria-expanded="true"] .gnav__toggle-bar::after{ bottom:auto; top:0; transform:rotate(-45deg); }

  /* リスト縦積み */
  .gnav__list{ flex-direction:column; gap:6px; font-size:15px; }
  .gnav__list a{ padding:12px 0; }
  .gnav__sns{ justify-content:flex-start; }
}

/* =========================================
   HERO + INTRO（共通背景）
========================================= */
.hero-intro{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,var(--navy-0) 0%, var(--navy-1) 100%);
  overflow:hidden;
}

/* SVG 波（角防止：親で切り、外へオフセット） */
.wave{ position:absolute; inset:auto; pointer-events:none; z-index:0; will-change:transform; }
.wave svg{ width:100%; height:100%; display:block; }
.wave--lt{ color:var(--wave-lt); top:-10vw; left:-12vw; width:135vw; height:42vw; }
.wave--rb{ color:var(--wave-rb); right:-14vw; bottom:-12vw; width:160vw; height:50vw; }


@media (max-width:980px){
  .wave--lt{ top:-14vw; left:-18vw; width:170vw; height:50vw; }
  .wave--rb{ right:-18vw; bottom:-18vw; width:190vw; height:60vw; }
}

/* content */
.hero, .intro{ position:relative; z-index:1; background:transparent !important; color:#fff; }
.hero__inner{ display:grid; gap:24px; grid-template-columns:1.05fr .95fr; align-items:center; padding-block: clamp(64px, 10vw, 160px); }
.hero__kicker{ letter-spacing:.06em; opacity:.85; font-family: var(--ff-sans); }
.hero__title{ font-size:var(--fz-hero); letter-spacing:.06em; margin:.2em 0 .3em; }
.hero__title-en{ font-size:.6em; color:#cfe0ef; letter-spacing:.14em; }
.hero__lead{
  font-size:clamp(19px,1.6vw,31px);
  text-align: center;
  margin:.6em 0 1.2em; }
@media (max-width:980px){
  .hero__inner{ 
    margin-top: 12vw;
    gap: 15vw;
    grid-template-columns:1fr; 
    padding-block: clamp(56px, 12vw, 120px); }

  .hero__lead{
  font-size:clamp(23px,1.6vw,31px);
  text-align: center;
  margin:.6em 0 1.2em; }
}

.intro{ padding-block: 80px; }
.intro__grid{ display:grid; gap:24px; grid-template-columns:1fr 1fr; align-items:center; }
.intro__title{
  position: relative;
  display: inline-block; /* 背景がタイトルにフィット */
  z-index: 1;
  font-size:var(--fz-h2);
  letter-spacing: .3em;
  line-height: 1.6em;
  font-weight: 400;
  margin:0 0 .4em; 
}

.intro__title::after {
  content: "";
  position: absolute;
  right: 0px;
    bottom: 40px;
    width: 250px;
  height: 60px;
  background: url("/gourmand/img/patisi/the-opening.png") no-repeat;
  background-size: contain;
  z-index: -1;    /* テキストの後ろに配置 */
  pointer-events: none;
}

.intro__text p {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 400;
  line-height: 2.7em;
}

.intro__text .intro-read {
  font-size: clamp(20px, 2vw, 20px);
  font-weight: 400;
  line-height: 2.7em;
}

.intro__photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
@media (max-width:980px){ .intro__grid{ grid-template-columns:1fr; } }

/* ========== Hero 2カラム：左レイヤー3枚 / 右テキスト ========== */

/* 左右2カラム（既存 .hero__inner は流用） */
.hero__inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr; /* 左画像 / 右コピー */
  align-items:center;
  padding-block: clamp(64px, 10vw, 160px);
  padding-bottom: 0px;
  margin-bottom: 5%;
}

/* 左：ビジュアルの土台 */
.hero__visual{
  position:relative;
  min-height: min(48vw, 520px); /* レイヤーを重ねる余白 */
}

/* メイン画像 */
.hero__img{ position:relative; }
.hero__img--main{ z-index:1; }
.hero__img--main img{
  width:100%; height:auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 左上イラスト（独立パララックス） */
.hero__img--illust{
  position:absolute; z-index:2;
  top: -6%; left: -6%;
  width: clamp(120px, 14vw, 180px);
  pointer-events:none;
}
.hero__img--illust img{ width:100%; height:auto; }

/* 右下の切り抜き皿（独立パララックス） */
.hero__img--plate{
  position:absolute; z-index:2;
  right: -15%; bottom: -10%;
  width: clamp(220px, 28vw, 360px);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.25));
  pointer-events:none;
}
.hero__img--plate img{ width:100%; height:auto; }

/* 右：コピー側 */
.hero__content{
  position:relative;
  z-index:1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__badge{ max-width: clamp(240px, 26vw, 360px); }
.hero__badge img{ width:100%; height:auto; display:block; }

/* SP：縦積みと位置微調整 */
@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; padding-block: clamp(56px, 12vw, 120px); }
  .hero__visual{ min-height: min(62vw, 420px); order:1; }
  .hero__content{ order:2; }
  .hero__img--illust{ top:-8%; left:-10%; }
  .hero__img--plate{ right:-12%; bottom:-14%; width: clamp(200px, 46vw, 320px); }
  .hero__badge{ margin-inline:0; }
}

/* =========================================
   ABOUT
========================================= */
.section-red {
  position: relative;
  background: #b33a32;
  color: #fff;
  overflow: clip;
}

.section-red__content {
  position: relative;
  background: #b33a32;
  z-index: 1;
  padding-top: clamp(120px,10vw,220px);
  padding-bottom: clamp(80px,10vw,160px);
  text-align: center;
}

.section-red__content::before{
  content:"";
  position:absolute; inset:0;
  margin:auto;
  width: min(60vw, 640px);
  aspect-ratio: 3 / 2;
  background: url("/gourmand/img/patisi/patisi-logo.png") center / contain no-repeat;
  opacity: .1;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.section-red__content > *{
  position: relative;
  z-index: 1;
}

.section-red__content h3 {
  font-size: clamp(24px, 1.2vw, 32px);
  font-weight: 400;
  letter-spacing: .3em;
}

.section-red__content p {
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 2.3em;
}

/* セクションは相対基準にして前面重ねを許可 */
.statement { position: relative; overflow: clip; }

.statement__overlay{
  --overlay-left: 50%;
  --overlay-top: 17vw;
  width: min(90%, 820px);
  position: absolute;
  left: var(--overlay-left);
  top: var(--overlay-top);
  justify-content: center;
  transform: translate(-50%, 0);
  z-index: 3;
  display: grid;
  grid-auto-flow: row;
  gap: 10px;
  text-align: left;
  pointer-events: none; 
}

.statement__catch { pointer-events: auto; max-width: 60vw; }

.statement__catch{
  font-size: clamp(24px, 1.6vw, 32px);
  letter-spacing: .18em;
  line-height: 2.2;
  color: #fff;
}

.statement__icon{
  justify-self: center;
  width: clamp(64px, 8vw, 110px);
}

.statement__icon img {
  max-width: 200%;
  width: 150%;
}

/* SPで波に埋まりやすいので位置を少し下げるなど */
@media (max-width: 980px){
  .section-red__content {
  padding-top: clamp(280px,10vw,400px);
  }

  .statement__overlay{
    --overlay-left: 5vw;
    --overlay-top: 16vw;
    gap: 6px;
    width: 90vw;
  }
  .statement__catch{
    font-size: clamp(20px, 3.4vw, 24px);
    max-width: 75vw;
  }
}

/* 左上の波クリップ画像 */
.clip-photo{
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 320;
}

.clip-photo image{
  width:100%; height:100%;
  object-fit: cover;
}

@media (max-width: 980px){
  .clip-photo {
    width: 100%;
  }
}

/* ===== Lineup ===== */
.lineup{ background:#fffdfb; color:#262626; padding-block: clamp(48px,8vw,96px); }
.lineup__head{ text-align:center; margin-bottom: clamp(28px,4vw,48px); }
.lineup__title {
  margin: 0 0 .25em;
  text-align: center;
}
.lineup__title img {
  max-width: clamp(200px, 40vw, 360px);
  height: auto;
  display: inline-block;
}
.lineup__eyebrow{
  color:#b9931f; opacity:.85; margin:0 0 .6em;
  letter-spacing:.18em; font-size: clamp(12px,1.6vw,14px);
}
.lineup__lead{
  font-size: clamp(22px,2.2vw,26px);
  letter-spacing:.28em; color:#333; margin:0;
  margin-top: 2%;
}

/* item */
.lineup-item{
  display:grid; gap: clamp(16px,3vw,28px);
  grid-template-columns: .6fr .95fr;
  align-items: start;
  padding-block: clamp(22px,3.4vw,40px);
  border-bottom: 1px solid #eee;
}
.lineup-item:last-child{ border-bottom:0; }

.lineup-item__media{
  position:relative; border-radius: 12px; overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.lineup-item__media img{ width:100%; height:auto; display:block; }

.lineup-item__badge{
  position: absolute;
  left: 12px; top: 12px;
  display: grid; place-items: center;
  width: 100px; height: 100px;
  background: url("/gourmand/img/patisi/icon_pick_bg.svg") center/contain no-repeat;
  color: #326ea1; 
  font-weight: 500; 
  font-size: 23px; 
  line-height: 1.2;
  letter-spacing: .08em;
  text-align: center;
  pointer-events: none;
}

.lineup-item__body{ display:grid; gap: 10px; }
.lineup-item__tag{ color:#b9931f; letter-spacing:.18em; font-size: 16px; margin:0; }
.lineup-item__name{
  font-family: var(--ff-serif);
  font-size: clamp(24px,2.8vw,30px);
  letter-spacing:.28em;
  margin:0;
  font-weight: 500;
}
.lineup-item__price{
  color: #b9931f;
  font-family: var(--ff-serif);
  font-size: clamp(20px,2vw,22px);
  letter-spacing:.2em;
  margin:0;
  font-weight: 500;
}
.lineup-item__desc{ font-size: 17px; line-height:2; margin: 0; }
.lineup-item__notes{
  margin:.2em 0 1em; color: #dac77e; font-size:15px; line-height:1.9;
}
.lineup-item__notes li{ margin:.2em 0; }

.btn.btn--gold{
  background:
  linear-gradient(135deg,#d5ae18 0%, #b6961a 100%);
  color:#fff; letter-spacing:.2em;
  padding:.95em 1.6em;
  position:relative;
}
.btn.btn--gold::after{
  content:"\25B6"; /* ▶ */ font-size:.84em; margin-left:.8em; transform:translateY(.05em);
}
.btn.btn--gold:hover{
  background: linear-gradient(135deg,#e0b92b 0%, #a88718 100%);
  transition: background .35s ease;
}

/* SP */
@media (max-width: 980px){
  .lineup-item{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .btn-wrap.right{ text-align: center; }
}

/* ===== Afternoon ===== */
.afternoon{
  background: #fbf4ec;
  padding-block: clamp(48px,8vw,96px);
  color: #333;
}

/* heading */
.aft-head{ text-align:center; margin-bottom: clamp(18px,3.2vw,28px); }
.aft-title{
  font-family: var(--ff-serif);
  font-size: clamp(22px,3vw,30px);
  font-weight: 500;
  letter-spacing:.28em;
  line-height: 1.9;
  margin: 0;
}

/* hero 2col */
.aft-hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(16px,3vw,28px);
  align-items: start;
  margin: clamp(50px,6vw,80px) 0 clamp(30px,8vw,100px)
}
.aft-hero__photo{
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.aft-hero__photo img{ width:100%; height:auto; display:block; }

/* card */
.aft-card{
  padding: clamp(16px,2.6vw,24px);
  display:grid; gap: .75em;
}
.aft-card__badge{
  display:inline-block;
  padding: .6em .9em;
  background:#fffae9;
  border:1px solid #b63636;
  color:#b63636; border-radius:5px;
  font-size: 18px; letter-spacing:.12em;
  text-align: center;
}
.aft-card__title{
  font-family: var(--ff-serif);
  font-size: clamp(20px,2.4vw,28px);
  letter-spacing:.24em; margin:.2em 0;
}
.aft-card__text{ font-size: 18px; line-height: 2; margin:0; }
.aft-card__link a{
  display:inline-block;
  padding:.2em .45em;
  border-bottom: 2px solid #e7c66a;
  color:#b9931f;
}

/* thumbs 3 */
.aft-thumbs{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(12px,3vw,70px);
  margin-bottom: clamp(30px,8vw,100px);
}
.aft-thumb{
  overflow:hidden;
}
.aft-thumb img{ width:100%; height:auto; display:block; border-radius:12px; }
.aft-thumb figcaption{
  font-size: 17px; line-height:1.8; color:#555;
  padding: 10px 12px 12px;
}

/* CTA */
.btn-wrap--center{ justify-content:center; }

/* notes */
.aft-notes{ margin-top: clamp(18px,3vw,28px); }
.aft-notes__lead{
  text-align:center; color:#b9931f; margin:0 0 .8em;
  letter-spacing:.14em; font-size: clamp(16px,1.8vw,20px);
}
.aft-notes__cols{
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
  border-top:1px solid #eadfce; padding-top: 12px;
}
.aft-note{ list-style:none; margin:0; padding:0; color:#777; font-size:14px; line-height:1.9; }
.aft-note li + li{ margin-top:.2em; }

/* SP */
@media (max-width:980px){
  .aft-hero{ grid-template-columns:1fr; }
  .aft-thumbs{ grid-template-columns:1fr; }
  .aft-notes__cols{ grid-template-columns:1fr; }
  .aft-head{ margin-bottom: clamp(40px,3.5vw,60px); }
}

/* ===== Pairing section ===== */

:root{
  --w-container: 1000px;
  --color-text: #262626;
  --color-gold: #b9931f;
  --color-gold-dark: #a3821c;

  --pair-ribbon: #bdd2ed;        /* 青帯 */
  --pair-tea-bg: #ded3c9;        /* 茶帯 */
  --pair-card-bg: rgba(255,255,255,.85);

  --deco-left: url("/gourmand/img/patisi/img-item01.png");
  --deco-right: url("/gourmand/img/patisi/img-item02.png");
}

.pairing{
  margin: 0 auto clamp(24px,6vw,56px) ;
  padding: clamp( 0px,3vw,96px);
  color: var(--color-text);

  /* 漆喰＋左右の飾り（多層背景） */
  background-image:
    var(--deco-left),
    var(--deco-right),
    var(--texture);
  background-repeat:
    no-repeat,
    no-repeat,
    repeat;
  background-position:
    left  clamp(12px, 2.2vw, 20px)  top clamp(12px, 1.4vw, 6px),
    right clamp(12px, 2.2vw, 20px)  top clamp(10px, 1.0vw, 4px),
    0 0;
  background-size:
    clamp(64px, 10vw, 120px),
    clamp(80px, 12vw, 140px),
    420px;
}

/* ヘッダー */
.pairing__head{ text-align:center; margin-bottom: clamp(16px,4vw,48px); }
.pairing__eyebrow{ font: 500 14px/1.2 'var(--ff-base)', serif; letter-spacing:.2em; margin:0; }
.pairing__title{ font: 500 clamp(22px,3.2vw,30px)/1.3 'var(--ff-base)', serif; letter-spacing:.2em; margin:.25em 0 0; }
.pairing__lead{ color: var(--color-gold); font: 500 18px/1.6 'var(--ff-base)', serif; letter-spacing:.25em; margin:.3em 0 0; }

/* グリッド */
.pairing__grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(14px,2.6vw,24px);
}
@media (max-width: 767px){
  .pairing__grid{ grid-template-columns: 1fr; }
  .pairing{
    background-position:
      left 8px top 0,
      right 8px top 0,
      0 0;
    background-size:
      56px, 72px, 320px;
  }
}

/* カード */
.pairing-card{
  position: relative;
  background: var(--pair-card-bg);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  overflow: hidden;
  border-radius: 12px;
}
.pairing-card__media{ margin:0; }
.pairing-card__media img{
  display:block; width:100%; height:auto; object-fit: cover;
}

/* 青帯（商品名）＋ × を境目に重ねる */
.pairing-card__ribbon{
  position: relative; z-index: 2; 
  background: var(--pair-ribbon);
}
.pairing-card__name{
  text-align:center;
  padding: 18px 12px;
  font: 500 clamp(14px,1.6vw,16px)/1.4 'Zen Old Mincho', serif;
  letter-spacing:.08em;
}
.pairing-card__cross{
  position: absolute;
  left: 50%;
  bottom: calc(-1em);           /* はみ出し量は好みで */
  transform: translateX(-50%);
  font: 600 clamp(20px,2vw,24px)/1 var(--ff-base);
  color: #8f7f70;
  z-index: 3;                     /* いちばん前に */
  pointer-events: none;           /* クリックの邪魔をしない */
}

/* 茶帯（リンク・行まるごと） */
.pairing-card__tea{
  font-family: var(--ff-base);
  display:flex; justify-content:center; align-items:center; gap:.5em;
  position: relative; z-index: 1; 
  padding: 14px 36px 16px;
  background: var(--pair-tea-bg);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.pairing-card__tea::after{
 content: "\203A";                     /* › のUnicode */
  font-family: "Noto Sans JP","Segoe UI Symbol",system-ui,sans-serif; /* 擬似要素だけ別フォント */
  position:absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  color: var(--color-gold-dark);
}

/* 4桁コードだけ色替え */
.pairing-card__sku{
  color: var(--color-gold-dark);
  font-weight: 500;
  letter-spacing: .06em;
}

/* hover/focus */
.pairing-card__tea:hover{
  background: var(--color-gold);
  color: #fff;
}
.pairing-card__tea:hover::after{ color:#fff; }
.pairing-card__tea:hover .pairing-card__sku{ color:#fff; }
.pairing-card__tea:focus-visible{
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 2px;
}

/* 説明 */
.pairing-card__text{
  padding: 12px 14px 16px;
  font: 500 16px/2 'Zen Old Mincho', serif;
  color: var(--color-text);
}

/* ===== Singles ===== */
.singles{ background:#fdf8f1; color:#333; padding-block: clamp(52px,8vw,100px); }
.singles__title{
  text-align:center;
  font-family: var(--ff-serif);
  font-size: clamp(18px,2.4vw,24px);
  font-weight: 500;
  letter-spacing:.28em;
  margin: 0 0 clamp(20px,4vw,36px);
}

.singles-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.single{ display:grid; gap: .75em; }

/* 画像 */
.single__media{
  max-width: 400px;
  border-radius: 14px;
  overflow: hidden;
  background:#f7f7f7;
}
.single__media img{ width:100%; height:auto; display:block; }

/* タイトル・本文 */
.single__name{
  text-align:center;
  font-family: var(--ff-serif);
  font-size: clamp(20px,2vw,24px);
  font-weight: 500;
  letter-spacing:.3em;
  margin:.4em 0 .2em;
  color:#222;
}
.single__desc{
  font-size: 16px;
  line-height: 2;
  color:#444;
  margin:0;
}

/* 金色の箇条書き */
.single__features{
  list-style:none; margin:.4em 0 0; padding:0;
}
.single__features li{
  position:relative; padding-left:1.2em; margin:.35em 0;
}
.single__features li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.5em; height:.5em; border-radius:50%;
  background: var(--gold, #b9931f);
}

/* 注意書き */
.single__notes{
  list-style:none; padding:0; margin:.6em 0 0;
  color:#777; font-size:14px; line-height:1.9;
}

/* レスポンシブ */
@media (max-width: 1200px){
  .singles-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px){
  .singles-grid{ grid-template-columns: 1fr; } /* SPは1カラム */
}
@media (max-width: 640px){
  .single__desc{ font-size: 13px; }
}

/* ===== Stores / Accordion ===== */
.stores{ background:#fdf8f1; padding-block: clamp(40px,6vw,80px); }
.stores-wrap{ background: #fff; border-radius: 12px; padding: 5vw 3vw;}
.stores__title{
  text-align:center;
  font-family: var(--ff-serif);
  letter-spacing:.28em;
  font-size: clamp(22px,2.8vw,28px);
  font-weight: 500;
  margin:0 0 clamp(16px,3vw,28px);
}

/* 1レコード */
.acc{ border-top:1px dashed #e5d7bd; }
.acc:last-of-type{ border-bottom:1px dashed #e5d7bd; }

.acc__head{ margin:0; }
.acc__btn{
  width:100%; text-align:left; font-family: var(--ff-serif);
  padding: clamp(16px,2.4vw,20px) 48px clamp(10px,1.6vw,12px);
  background:transparent; border:0; cursor:pointer; color:#333;
  font-size: clamp(16px,1.8vw,18px); letter-spacing:.2em;
  display:block; position:relative;
}
.acc__btn:focus-visible{ outline:2px solid #9cc3e7; outline-offset:2px; }

.acc__icon{
  position:absolute; right:48px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
}
.acc__icon::before,
.acc__icon::after{
  content:""; position:absolute; left:50%; top:50%;
  width:14px; height:2px; border-radius:1px; background:var(--gold);
  transform: translate(-50%, -50%);
}
.acc__icon::after{ transform: translate(-50%, -50%) rotate(90deg); } /* + */
.acc__btn[aria-expanded="true"] .acc__icon::after{ opacity:0; }      /* − に */

.acc__panel{
  overflow:hidden; height:0; transition: height .35s ease;
}
.acc__panel.is-open{ height:auto; } /* JSで明示オープン時に一旦auto→固定処理 */

.stores__rows{
  display:grid; grid-template-columns: repeat(5,1fr);
  gap: clamp(10px,2vw,18px);
  padding: 0 48px clamp(18px,3vw,28px);
  align-items: start; 
}
@media (max-width:1100px){ .stores__rows{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:700px){
  .stores__rows{ grid-template-columns: repeat(2,1fr); }
  .acc__btn{
    padding: clamp(16px,2.4vw,20px) 60px clamp(10px,1.6vw,12px) 30px;
  }
  .acc__icon{
  right:30px;
  }
}
@media (max-width:520px){ .stores__rows{ grid-template-columns: 1fr; } }

.stores__col{ display:grid; }

.stores__badge{
  display:inline-block;
  padding:.35em .9em;
  background:#efe2b9;
  color:#7a6515;
  border-radius:6px;
  font-size: 13px;
  letter-spacing:.2em;
  width:max-content;
}

.stores__list{ list-style:none; margin:0; padding:0; color:#444; font-size:13px; line-height:1.9; }
.stores__list li{ position:relative; padding-left:1.1em; }
.stores__list li::before{
  content:"\2022"; /* • */ position:absolute; left:.1em; color:#b9931f; font-weight:700;
}

/* ===== Stores filter ===== */
.stores-filter{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  align-items: center;
  margin: 0 0 clamp(12px,2vw,18px);
}
@media (max-width: 860px){
  .stores-filter{ grid-template-columns: 1fr; }
}

.stores-filter__tabs{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.stores-filter__tabs [role="tab"]{
  appearance: none; border: 1px solid #e5d7bd;
  background: #fff; color: #7a6515;
  padding: 8px 12px; border-radius: 999px;
  font-size: 13px; letter-spacing: .05em; cursor: pointer;
}
.stores-filter__tabs [aria-selected="true"]{
  background: #efe2b9; border-color: #e0cfa1; color: #6b5713;
}

.stores-filter__search input{
  width: min(52ch, 100%);
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid #e5d7bd; background: #fff;
  font-size: 14px;
}

@media (min-width: 981px){
  .stores-filter{
    position: sticky;
    top: calc(var(--gnav-h, 64px) + 10px);
    z-index: 5;
    background: linear-gradient(#fff, #fff); /* 透け防止 */
    padding-block: 6px;
  }
}

/* === Footer === */
.site-footer{
  position: relative;
  color:#fff;
  background: linear-gradient(180deg, var(--navy-0) 0%, var(--navy-1) 100%);
  overflow: hidden; /* 波を切る */
  isolation: isolate;
}

.footer__bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.site-footer .wave{ position:absolute; inset:auto; width:100%; height:auto; }
.site-footer .wave svg{ width:100%; height:auto; display:block; }

/* 上側の薄い波（左上タイプ） */
.site-footer .wave--ft-top{
  color: var(--wave-lt);
  top:-14vw; left:-16vw;
  width:170vw; height:52vw;
}

/* 右下の濃い波 */
.site-footer .wave--ft-bottom{
  color: var(--wave-rb);
  right:-18vw; bottom:-16vw;
  width:190vw; height:60vw;
}

.footer__inner{
  position: relative;
  z-index:1;
  text-align:center;
  padding-block: clamp(72px, 12vw, 140px);
  display:grid;
  gap:14px;
  justify-items:center;
}

.footer__badge img{ display:block; width:min(200px, 40vw); height:auto; }

.footer__sns{ display:flex; gap:16px; margin-top:6px; }
.footer__sns-link{ display:inline-flex; padding:8px; border-radius:10px; }
.footer__sns-link:hover{ background: rgba(255,255,255,.09); }

.footer__brand{
  font: 700 clamp(22px, 3.6vw, 34px)/1 var(--ff-serif);
  letter-spacing:.18em;
  margin: 10px 0 0;
}
.footer__copy{
  opacity:.85;
  letter-spacing:.06em;
}

/* === Back to top === */
.to-top{
  position: fixed;
  right: clamp(12px, 2.2vw, 24px);
  bottom: clamp(12px, 2.2vw, 24px);
  width: 44px; height: 44px;
  border: 0; border-radius: 999px;
  color:#fff;
  background: linear-gradient(135deg, #d5ae18 0%, #b6961a 100%);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  cursor: pointer;
  z-index: 999;
  display: grid; place-items:center;
  transition: opacity .35s ease, transform .2s ease, filter .2s ease;
}
.to-top:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.to-top__arrow{ font-size: 18px; line-height: 1; transform: translateY(-1px); }

/* スクロール量に応じて出し入れ（「常時表示」にしたいならこの2つを削除） */
.to-top.is-hidden{ opacity:0; pointer-events:none; transform: translateY(8px); }

/* モーション無効環境 */
@media (prefers-reduced-motion: reduce){
  .to-top{ transition: none; }
}


/* =========================================
   FADE-IN
========================================= */
[data-animate]{ opacity:0; transform:translateY(16px); transition:opacity .45s ease, transform .45s ease; }
[data-animate].is-inview{ opacity:1; transform:none; }
[data-animate="fade-in"]{ transform:none; opacity:0; }
[data-animate="fade-in"].is-inview{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  [data-animate]{ opacity:1 !important; transform:none !important; transition:none !important; }
}