@charset "UTF-8";
/* ============================================================
   DOTWINE ブランドサイト style.css
   指示書 v1.2 準拠 / モバイルファースト
   目次
     00. トークン（色・タイポ・余白）
     01. ベース / リセット
     02. タイポグラフィ・ユーティリティ
     03. 共通コンポーネント（container / sec-head / btn / fig / spec / chip / dot / icon）
     04. アニメーション（reveal）
     10. HEADER + DRAWER
     11. HERO
     12. STATEMENT
     13. THE NAME（名前の由来）
     14. STORY
     15. TERROIR
     16. WINES
     17. CALENDAR
     18. ROADMAP
     19. SHOP
     20. SUPPORT
     21. INSTAGRAM
     22. CONTACT（お問い合わせフォーム）
     23. FOOTER
     24. SP追従CTA
   ============================================================ */

/* ===== 00. トークン ===== */
:root{
  /* Base */
  --c-paper:      #F7F5F0;
  --c-paper-alt:  #EDE9E1;
  --c-ink:        #1C1A17;
  --c-ink-70:     #55504A;
  --c-ink-45:     #8C867E;
  --c-line:       #D9D3C8;
  /* Brand */
  --c-moss:       #46543F;
  --c-moss-lt:    #7C8B6B;
  --c-wine:       #6B2B3A;
  --c-gold:       #B39758;
  /* Overlay */
  --c-overlay:    rgba(28,26,23,.38);
  --c-white:      #FFFFFF;

  /* フォント */
  --f-jp: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-en: "Cormorant Garamond", "Zen Old Mincho", serif;

  /* 余白・レイアウト */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px;
  --sp-5:64px; --sp-6:96px; --sp-7:140px;
  --gutter:24px;
  --w-content:1120px;
  --w-narrow:720px;
  --w-wide:1440px;
  --radius:2px;

  /* 比率プリセット */
  --r-hero: 3/4;
  --r-card: 4/3;
  --r-tall: 3/4;
  --r-square: 1/1;

  /* ドット（点）モチーフ ― DOT＝小さな点 */
  --dot-s: 4px;
  --dot-m: 8px;
  --dot-l: 14px;
  --dot-color: var(--c-moss);
  --dot-accent: var(--c-wine);   /* 「いま」「あなた」を示す点のみ */

  /* その他 */
  --header-h: 64px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (min-width:768px){ :root{ --r-hero:16/9; } }
@media (min-width:1024px){ :root{ --gutter:48px; --header-h:80px; } }

/* ===== 01. ベース / リセット ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--f-jp);
  font-weight:400;
  line-height:2;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
body.is-locked{ overflow:hidden; }
h1,h2,h3,p,dl,dd,figure,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img,picture,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
strong{ font-weight:600; }

:focus-visible{ outline:2px solid var(--c-moss); outline-offset:3px; }
.skip-link{
  position:absolute; left:var(--sp-2); top:-100px; z-index:200;
  padding:12px 20px; background:var(--c-ink); color:var(--c-paper);
  font-size:14px; transition:top .2s;
}
.skip-link:focus{ top:var(--sp-2); }

/* 写真の上に白文字を乗せる場合のオーバーレイ */
.overlay-grad{
  background:linear-gradient(180deg, rgba(28,26,23,.15) 0%, rgba(28,26,23,.55) 100%);
}

/* ===== 02. タイポグラフィ ===== */
.en{ font-family:var(--f-en); font-weight:400; letter-spacing:.14em; }
.nw{ display:inline-block; }

.t-hero{ font-size:clamp(30px,5.4vw,56px); letter-spacing:.06em; line-height:1.55; font-weight:500; }
.t-hero-en{ font-size:clamp(13px,1.3vw,16px); letter-spacing:.30em; line-height:1.6; }
.t-label{ font-size:clamp(11px,1.05vw,12px); letter-spacing:.28em; line-height:1.4; text-transform:uppercase; }
.t-h2{ font-size:clamp(24px,3.6vw,38px); letter-spacing:.06em; line-height:1.6; font-weight:500; }
.t-h3{ font-size:clamp(18px,2vw,22px); letter-spacing:.05em; line-height:1.7; font-weight:500; }
.t-body{ font-size:clamp(15px,1.2vw,16px); letter-spacing:.04em; line-height:2; color:var(--c-ink-70); }
.t-cap{ font-size:clamp(12px,1.05vw,13px); letter-spacing:.06em; line-height:1.8; color:var(--c-ink-45); }
.t-num{ font-size:clamp(34px,4.2vw,46px); letter-spacing:.02em; line-height:1.1; font-weight:500; }

/* ===== 03. 共通コンポーネント ===== */
.sec{ padding:var(--sp-5) 0; position:relative; }
.sec--paper{ background:var(--c-paper); }
@media (min-width:1024px){ .sec{ padding:var(--sp-7) 0; } }

.container{ width:100%; max-width:calc(var(--w-content) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow{ max-width:calc(var(--w-narrow) + var(--gutter)*2); }
.container--wide{ max-width:calc(var(--w-wide) + var(--gutter)*2); }

/* 見出しブロック */
.sec-head{ margin-bottom:var(--sp-4); }
.sec-head .t-label{ display:flex; align-items:center; gap:8px; color:var(--c-moss); }
.sec-head .t-label .rule{ display:block; width:24px; height:1px; background:var(--c-moss); margin-right:4px; }
.sec-head .t-h2{ margin-top:var(--sp-2); }
.sec-head__lead{ margin-top:var(--sp-2); max-width:34em; }
.sec-head--center{ text-align:center; }
.sec-head--center .t-label{ display:inline-flex; }
.sec-head--center .sec-head__lead{ margin-inline:auto; }
.sec-head--onimg .t-label{ color:var(--c-white); }
.sec-head--onimg .t-label .dot{ background:var(--c-white); }
.sec-head--onimg .t-label .rule{ background:var(--c-white); }
.sec-head--onimg .t-h2{ color:var(--c-white); }
@media (min-width:1024px){ .sec-head{ margin-bottom:var(--sp-5); } }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; min-width:44px; padding:0 32px;
  border-radius:var(--radius);
  font-size:14px; letter-spacing:.1em; line-height:1.4; text-align:center;
  border:1px solid transparent;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
@media (min-width:1024px){ .btn{ min-height:58px; } }
.btn--primary{ background:var(--c-ink); color:var(--c-paper); border-color:var(--c-ink); }
.btn--primary:hover{ background:transparent; color:var(--c-ink); }
.btn--ghost{ background:transparent; color:var(--c-ink); border-color:var(--c-ink); }
.btn--ghost:hover{ background:var(--c-ink); color:var(--c-paper); }
.btn--onimg{ background:transparent; color:var(--c-white); border-color:var(--c-white); }
.btn--onimg:hover{ background:var(--c-white); color:var(--c-ink); }
.btn--onink{ background:var(--c-paper); color:var(--c-ink); border-color:var(--c-paper); }
.btn--onink:hover{ background:transparent; color:var(--c-paper); }
.ext{ font-size:.85em; }

/* 図版 */
.fig{ position:relative; }
.fig img{ width:100%; height:auto; object-fit:cover; }
.fig figcaption{ margin-top:var(--sp-1); }
.fig__tag,.fig__badge{
  position:absolute; left:var(--sp-2); top:var(--sp-2); z-index:2;
  padding:6px 12px; font-size:10px; letter-spacing:.22em; line-height:1;
  background:rgba(28,26,23,.78); color:var(--c-white);   /* 明るい写真の上でも読める濃度 */
}
/* 明るい写真の上でも確実に読めるよう、濃色の下地＋生成りの文字。金は枠線のアクセントとして残す */
.fig__badge{
  background:rgba(28,26,23,.92); border:1px solid var(--c-gold); color:var(--c-paper);
  padding:7px 14px; font-size:11px; letter-spacing:.2em;
}

/* データ表示 */
.spec{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-4); margin-top:var(--sp-3);
  padding:var(--sp-3) 0; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.spec__item dt{ color:var(--c-ink-45); }
.spec__item dd{ display:flex; align-items:baseline; gap:.15em; margin-top:6px; }
.spec__unit{ font-size:13px; letter-spacing:.06em; color:var(--c-ink-45); }
.spec__approx{ font-size:15px; color:var(--c-ink-45); margin-right:.1em; }
.spec__word{ font-size:22px; letter-spacing:.06em; line-height:1.4; }

/* 品種チップ（角丸を許可する唯一の要素） */
.chips{ display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; gap:8px; margin-top:var(--sp-3); }
.chip{
  padding:6px 14px; border:1px solid var(--c-line); border-radius:999px;
  font-size:clamp(12px,1.05vw,13px); letter-spacing:.06em; line-height:1.6; color:var(--c-ink-70);
}

/* ドット（点）
   ※ 使ってよいのは「点に意味がある場所」だけ:
      セクションラベル頭 / #name / #terroir / #calendar / #roadmap / #support / ロゴ・favicon
      背景の水玉や区切りの装飾には使わないこと。 */
.dot{
  display:inline-block; border-radius:50%;
  width:var(--dot-m); height:var(--dot-m);
  background:var(--dot-color); flex:none;
}
.dot--s{ width:var(--dot-s); height:var(--dot-s); }
.dot--l{ width:var(--dot-l); height:var(--dot-l); }
.dot--open{ background:transparent; border:1.5px solid var(--dot-color); }  /* 未来 */
.dot--accent{ background:var(--dot-accent); }
.dot--accent.dot--open{ border-color:var(--dot-accent); }

/* ===== 04. アニメーション ===== */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ===== 10. HEADER ===== */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  transition:background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header__inner{
  height:100%; max-width:calc(var(--w-wide) + var(--gutter)*2); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:var(--sp-3);
}
.header__logo{ position:relative; display:block; height:30px; margin-right:auto; }
.header__logo-img{ display:block; height:100%; width:auto; transition:opacity .4s var(--ease); }
.header__logo-img--light{ filter:drop-shadow(0 1px 8px rgba(28,26,23,.45)); }  /* 明るい空の上でも輪郭が出るように */
.header__logo-img--dark{ position:absolute; left:0; top:0; opacity:0; }
.header[data-state="scrolled"] .header__logo-img--light{ opacity:0; }
.header[data-state="scrolled"] .header__logo-img--dark{ opacity:1; }
@media (min-width:1024px){ .header__logo{ height:36px; } }
.header__nav{ display:none; }
.header__cta{ display:none; }
.header[data-state="top"]{ color:var(--c-white); }
.header[data-state="scrolled"]{
  background:color-mix(in srgb, var(--c-paper) 88%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom-color:var(--c-line); color:var(--c-ink);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .header[data-state="scrolled"]{ background:var(--c-paper); }
}

.header__burger{
  width:44px; height:44px; margin-right:-10px; position:relative; flex:0 0 auto;
}
.header__burger span{
  position:absolute; left:11px; width:22px; height:1px; background:currentColor;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.header__burger span:nth-child(1){ top:19px; }
.header__burger span:nth-child(2){ top:25px; }
.header__burger[aria-expanded="true"]{ color:var(--c-white); }
.header__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

@media (min-width:1024px){
  .header__nav{ display:flex; gap:var(--sp-4); font-size:12px; letter-spacing:.22em; }
  .header__nav a{ position:relative; padding:6px 0; }
  .header__nav a::after{
    content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
  }
  .header__nav a:hover::after{ transform:scaleX(1); }
  .header__cta{ display:inline-flex; min-height:44px; padding:0 22px; font-size:12px; }
  .header[data-state="top"] .header__cta{ background:transparent; color:var(--c-white); border-color:var(--c-white); }
  .header[data-state="top"] .header__cta:hover{ background:var(--c-white); color:var(--c-ink); }
  .header__burger{ display:none; }
}

/* ドロワー */
.drawer{
  position:fixed; inset:0; z-index:95; background:var(--c-ink); color:var(--c-paper);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--sp-5);
  padding:var(--header-h) var(--gutter) var(--sp-5);
  opacity:0; transition:opacity .35s var(--ease);
}
.drawer[hidden]{ display:none; }
.drawer.is-open{ opacity:1; }
.drawer__nav{ display:flex; flex-direction:column; gap:var(--sp-4); text-align:center; }
.drawer__nav a{ display:block; padding:4px 0; }
.drawer__nav .en{ display:block; font-size:20px; letter-spacing:.24em; }
.drawer__jp{ display:block; margin-top:6px; font-size:12px; letter-spacing:.1em; color:var(--c-ink-45); }
.drawer__foot{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.drawer__ig{ font-size:12px; letter-spacing:.22em; }

/* ===== 11. HERO ===== */
.sec--hero{
  position:relative; padding:0;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; color:var(--c-white);
}
.hero__media{ position:absolute; inset:-8% 0; z-index:0; will-change:transform; }
.hero__media picture,.hero__media img{ width:100%; height:100%; }
.hero__media img{ object-fit:cover; object-position:center 55%; }
.hero__overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(28,26,23,.15) 0%, rgba(28,26,23,.55) 100%);
}
.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:calc(var(--w-content) + var(--gutter)*2); margin-inline:auto;
  padding:0 var(--gutter) calc(var(--sp-6) + 12px);
}
.hero__eyebrow{ opacity:0; animation:heroIn .9s var(--ease) .2s forwards; }
.hero__copy{ margin-top:var(--sp-3); opacity:0; animation:heroIn .9s var(--ease) .35s forwards; }
.hero__copy .nw{ display:block; }
.hero__lead{ margin-top:var(--sp-3); color:rgba(255,255,255,.92); max-width:30em; opacity:0; animation:heroIn .9s var(--ease) .5s forwards; }
.hero__btn{ margin-top:var(--sp-4); opacity:0; animation:heroIn .9s var(--ease) .65s forwards; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

.hero__scroll{
  position:absolute; left:50%; bottom:var(--sp-2); z-index:3; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.3em; color:var(--c-white); padding:8px 12px;
}
.hero__scroll i{ display:block; width:1px; height:48px; background:rgba(255,255,255,.7); transform-origin:top; animation:scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(.2); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(.2); opacity:.4; } }

@media (min-width:768px){
  .hero__inner{ padding-bottom:var(--sp-6); }
  .hero__copy .nw{ display:inline-block; }
  .hero__scroll{ left:var(--gutter); transform:none; align-items:flex-start; }
}

/* ===== 12. STATEMENT ===== */
.sec--statement{ background:var(--c-paper); padding-block:var(--sp-6); text-align:center; }
@media (min-width:1024px){ .sec--statement{ padding-block:var(--sp-7); } }
.statement__ruby{ display:block; margin-top:10px; letter-spacing:.2em; }
.statement__body{ margin-top:var(--sp-4); }
.statement__body .t-body + .t-body{ margin-top:var(--sp-3); }

/* ===== 13. THE NAME（名前の由来） ===== */
.sec--name{ background:var(--c-paper); padding-block:var(--sp-6); }
@media (min-width:1024px){ .sec--name{ padding-block:var(--sp-7); } }
.name__field{ position:relative; height:240px; margin-bottom:var(--sp-5); }
.name__field canvas{ display:block; width:100%; height:100%; }
.name__body{ margin-top:var(--sp-4); text-align:center; }
.name__body > * + *{ margin-top:var(--sp-3); }
.name__list{ margin-top:var(--sp-3); }
.name__list li + li{ margin-top:2px; }
.name__close{ margin-top:var(--sp-5) !important; }
@media (min-width:1024px){
  .name__field{ height:320px; margin-bottom:var(--sp-6); }
  .name__close{ margin-top:var(--sp-6) !important; }
}

/* ===== 14. STORY ===== */
.sec--story{ background:var(--c-paper-alt); }
.story__block + .story__block{ margin-top:var(--sp-5); }
.story__fig img{ aspect-ratio:var(--r-card); }
.story__text{ margin-top:var(--sp-3); }
.story__num{ color:var(--c-ink-45); line-height:1; }
.story__text .t-h3{ margin-top:var(--sp-1); }
.story__text .t-body{ margin-top:var(--sp-2); }
@media (min-width:1024px){
  .story__block{ display:grid; grid-template-columns:6fr 6fr; gap:var(--sp-5); align-items:center; }
  .story__block + .story__block{ margin-top:var(--sp-6); }
  .story__block--rev .story__fig{ order:2; }
  .story__text{ margin-top:0; }
}

/* ===== 15. TERROIR ===== */
.sec--terroir{ background:var(--c-paper); }
.terroir__grid{ display:grid; gap:var(--sp-5); }
/* カードは figure / ラベル / 見出し / ステータス / スペック / 品種チップ / 一文 の7行構成。
   PCでは subgrid で左右のカードの行を共有し、品種チップの上端を必ず揃える。 */
.card{ display:grid; grid-template-rows:auto auto auto auto auto auto auto; align-content:start; }
.card__fig{ margin-bottom:var(--sp-3); }
.card__fig img{ aspect-ratio:var(--r-card); }
.card > .t-label{ color:var(--c-moss); }
.card > .t-h3{ margin-top:6px; }
.card__status{ margin-top:var(--sp-1); color:var(--c-ink-70); }
.card__status--next{ color:var(--c-gold); }
.card__lead{ margin-top:var(--sp-3); align-self:start; }
.terroir__note{ margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--c-line); }
@media (min-width:1024px){
  .terroir__grid{ grid-template-columns:repeat(2,1fr); column-gap:var(--sp-5); grid-template-rows:repeat(7,auto); }
  .card{ grid-row:span 7; grid-template-rows:subgrid; }
  .terroir__note{ margin-top:var(--sp-5); }
}
/* subgrid 非対応環境では通常フロー（行は揃わないが崩れない） */
@supports not (grid-template-rows: subgrid){
  @media (min-width:1024px){
    .terroir__grid{ grid-template-rows:auto; }
    .card{ grid-row:auto; grid-template-rows:none; }
  }
}

/* ===== 16. WINES ===== */
.sec--wines{ position:relative; color:var(--c-white); padding-block:var(--sp-6); overflow:hidden; }
.wines__media{ position:absolute; inset:0; z-index:0; }
.wines__media picture,.wines__media img{ width:100%; height:100%; object-fit:cover; }
.sec--wines::after{
  content:""; position:absolute; inset:0; z-index:1;
  /* 全面に白文字が乗るセクションのため、コントラスト比4.5:1を確保できる濃度にする */
  background:linear-gradient(180deg, rgba(28,26,23,.58) 0%, rgba(28,26,23,.80) 100%);
}
.wines__inner{ position:relative; z-index:2; text-align:center; }
.wines__lead{ max-width:var(--w-narrow); margin-inline:auto; }
.wines__lead .t-body{ color:rgba(255,255,255,.9); }
.wines__note{ margin-top:var(--sp-3); color:rgba(255,255,255,.75) !important; }
.wines__list{ display:grid; gap:var(--sp-3); margin-top:var(--sp-5); }
.wines__item{ padding:var(--sp-3) var(--sp-2); border-top:1px solid rgba(255,255,255,.32); }
.wines__item .t-label{ color:var(--c-white); }
.wines__item .t-body{ margin-top:10px; color:rgba(255,255,255,.9); }
.wines__credit{ margin-top:var(--sp-4); color:rgba(255,255,255,.6) !important; }
@media (min-width:768px){ .wines__list{ grid-template-columns:repeat(3,1fr); gap:var(--sp-4); } }
@media (min-width:1024px){ .sec--wines{ padding-block:var(--sp-7); } }

/* ===== 17. CALENDAR（畑の一年 / 四季4ブロック） ===== */
.sec--calendar{ background:var(--c-paper-alt); }

.season-grid{
  list-style:none; margin:var(--sp-5) 0 0; padding:0;
  display:grid; grid-template-columns:1fr; gap:32px;
}
.season{ position:relative; }
.season .dot{ display:block; }
.season .t-label{ margin-top:var(--sp-2); color:var(--c-moss); }
.season__term{
  margin-top:6px; font-size:15px; letter-spacing:.06em; line-height:1.4; color:var(--c-ink-45);
}
.season__term .en{ font-size:22px; letter-spacing:.04em; margin-right:.15em; }

.season__tasks{ list-style:none; margin:var(--sp-3) 0 0; padding:0; }
.season__tasks li{
  padding:10px 0;
  border-top:1px solid var(--c-line);
  font-size:14px; line-height:1.7;
}
.season__tasks li:last-child{ border-bottom:1px solid var(--c-line); }
.season__note{
  display:inline-block; margin-left:.6em;
  font-size:clamp(12px,1.05vw,13px); letter-spacing:.06em; color:var(--c-ink-45);
}

/* 「春へ」＝一年が巡ることの表示。縦積みでは意味を成さないためPCのみ */
.season__loop{ display:none; }

.calendar__foot{ margin-top:var(--sp-4); }

@media (min-width:768px){
  .season-grid{ grid-template-columns:repeat(2,1fr); gap:40px 32px; }
}
@media (min-width:1024px){
  .season-grid{ position:relative; grid-template-columns:repeat(4,1fr); gap:36px; margin-top:var(--sp-6); }
  /* 4つの点を1本の罫線でつなぐ（#roadmap と同じ見た目） */
  .season-grid::before{
    content:""; position:absolute; left:4px; right:0; top:4px; height:1px; background:var(--c-line);
  }
  .season .dot{ position:relative; z-index:1; }
  .season__loop{
    display:flex; align-items:center; gap:8px;
    position:absolute; right:0; top:-4px;
    padding-left:10px; background:var(--c-paper-alt); color:var(--c-ink-45);
  }
  .season__loop::before{ content:""; display:block; width:20px; height:1px; background:var(--c-line); }
  .calendar__foot{ margin-top:var(--sp-6); }
}

/* ===== 18. ROADMAP ===== */
.sec--roadmap{ background:var(--c-paper); }
.road{ position:relative; margin-top:var(--sp-4); }
.road::before{ content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1px; background:var(--c-line); }
.road__item{ position:relative; padding:var(--sp-2) 0 var(--sp-3) var(--sp-4); }
/* ノードは #name と同じ .dot を共有する（点が集まっていくことの実例） */
.road__dot{ position:absolute; left:7px; top:calc(var(--sp-2) + 12px); transform:translate(-50%,-50%); }
.road__item.is-now .road__dot{ box-shadow:0 0 0 5px rgba(107,43,58,.14); }
.road__year{ display:flex; align-items:baseline; gap:.6em; font-size:clamp(26px,3.4vw,34px); color:var(--c-ink); }
.road__season{ font-size:11px; letter-spacing:.22em; color:var(--c-ink-45); }
.road__season--now{ color:var(--c-wine); }
.road__text{ margin-top:6px; }
.road__item.is-goal .road__year{ color:var(--c-wine); font-size:clamp(32px,4.4vw,46px); }
.road__item.is-goal .road__text{ display:inline-block; border-bottom:1px solid var(--c-wine); padding-bottom:4px; color:var(--c-ink); }
@media (min-width:1024px){
  .road{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-3); margin-top:var(--sp-5); }
  .road::before{ left:0; right:0; top:7px; bottom:auto; width:auto; height:1px; }
  .road__item{ padding:var(--sp-4) var(--sp-2) 0 0; }
  .road__dot{ left:7px; top:7px; }
}

/* ===== 19. SHOP（読み物 → 商品グリッド12点 → CTA） ===== */
.sec--shop{ background:var(--c-paper-alt); }
.shop__read .t-body + .t-body{ margin-top:var(--sp-3); }

/* --- 商品ブロック --- */
.product-block{ margin-top:var(--sp-5); }
.product-block__title{ margin-bottom:var(--sp-4); }
.product-block__note{ margin-top:var(--sp-4); }
@media (min-width:1024px){
  .product-block{ margin-top:var(--sp-6); }   /* 本文の続きではなく別ブロックだと分かる余白 */
  .product-block__title{ margin-bottom:var(--sp-5); }
}

.product-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px 16px;
  justify-content:start;
}
@media (min-width:768px){ .product-grid{ grid-template-columns:repeat(3,1fr); gap:32px 24px; } }
@media (min-width:1024px){ .product-grid{ grid-template-columns:repeat(4,1fr); gap:40px 28px; } }

/* カード全体が1つのリンク。枠線・影・背景は付けない（余白だけで区切る） */
.pcard{
  display:grid; grid-template-rows:auto auto auto auto 1fr auto;  /* 価格を最下段に固定して縦位置を揃える */
  height:100%;
}
.pcard__img{
  position:relative; margin:0; overflow:hidden; background:var(--c-white);
}
.pcard__img img{
  width:100%; aspect-ratio:var(--r-square); object-fit:cover;
  transition:transform .4s var(--ease);
}
.pcard:hover .pcard__img img{ transform:scale(1.03); }
.pcard__badge{
  position:absolute; left:8px; top:8px; z-index:2;
  padding:4px 8px; font-size:10px; letter-spacing:.12em; line-height:1;
  border:1px solid var(--c-gold); color:var(--c-gold); background:var(--c-paper);
}
.pcard .t-label{ margin-top:var(--sp-2); color:var(--c-ink-45); }
.pcard__name{
  margin-top:6px; font-size:15px; letter-spacing:.04em; line-height:1.6; font-weight:500;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;  /* 2行まで */
}
.pcard:hover .pcard__name{ text-decoration:underline; text-underline-offset:4px; }
.pcard__origin{ margin-top:4px; }
.pcard__tags{ display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; gap:6px; margin-top:var(--sp-2); padding:0; list-style:none; }
.pcard__tags .chip{ padding:4px 10px; font-size:12px; }
.pcard__price{
  margin-top:var(--sp-2); display:flex; align-items:baseline; gap:.25em;
  font-variant-numeric:tabular-nums;
}
.pcard__price .en{ font-size:22px; letter-spacing:.02em; }
.pcard__price small{ font-size:11px; letter-spacing:.06em; color:var(--c-ink-45); }
/* SPは幅が狭いためタグを2つに減らす（3つ目が折り返して高さが崩れるのを防ぐ） */
@media (max-width:767px){ .pcard__tags li:nth-child(3){ display:none; } }
@media (min-width:1024px){ .pcard__name{ font-size:16px; } .pcard__price .en{ font-size:24px; } }

/* --- CTAブロック --- */
.shop__cta{
  margin-top:var(--sp-5); padding:var(--sp-5) var(--sp-3);
  background:var(--c-ink); color:var(--c-paper); text-align:center;
}
.shop__cta-title{ color:var(--c-paper); }
.shop__cta .btn{ margin-top:var(--sp-3); }
.shop__cta-sub{ margin-top:var(--sp-3); color:rgba(247,245,240,.6); }
@media (min-width:1024px){ .shop__cta{ margin-top:var(--sp-6); padding:var(--sp-6) var(--sp-4); } }

/* ===== 20. SUPPORT ===== */
.sec--support{ background:var(--c-paper); }
.support__grid{ display:grid; gap:var(--sp-4); }
.support__card{
  padding:var(--sp-4) var(--sp-3); background:var(--c-paper-alt); text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.support__dot{ margin-bottom:var(--sp-3); }
.support__card .t-body{ margin-top:var(--sp-1); }
.support__link{
  margin-top:var(--sp-3); min-height:44px; display:inline-flex; align-items:center; gap:.4em;
  font-size:13px; letter-spacing:.14em; color:var(--c-ink);
  border-bottom:1px solid var(--c-line); transition:border-color .3s var(--ease);
}
.support__link:hover{ border-color:var(--c-ink); }
.support__copied{ margin-top:var(--sp-1); color:var(--c-moss); }
@media (min-width:768px){ .support__grid{ grid-template-columns:repeat(3,1fr); gap:var(--sp-3); } }

/* ===== 21. INSTAGRAM ===== */
.sec--instagram{ background:var(--c-paper-alt); }
.instagram__account{ margin-top:var(--sp-2); letter-spacing:.16em; }
.instagram__account a{ border-bottom:1px solid var(--c-line); }
.ig__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.ig__grid img{ aspect-ratio:var(--r-square); object-fit:cover; transition:opacity .3s var(--ease); }
.ig__grid a:hover img{ opacity:.82; }
.ig__cta{ margin-top:var(--sp-4); text-align:center; }
@media (min-width:768px){ .ig__grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1024px){ .ig__grid{ grid-template-columns:repeat(6,1fr); } }

/* ===== 22. CONTACT（お問い合わせフォーム） ===== */
.sec--contact{ background:var(--c-paper); }
.cform{ margin-top:var(--sp-5); }
/* ハニーポット: 画面外に飛ばさず clip で隠す（負の座標は横スクロールの原因になりうるため） */
.cform__hp{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.cform__row + .cform__row{ margin-top:var(--sp-3); }
.cform__label{
  display:block; margin-bottom:8px;
  font-size:13px; letter-spacing:.08em; line-height:1.6; color:var(--c-ink-70);
}
.cform__req{
  display:inline-block; margin-left:.5em; padding:2px 7px;
  font-size:10px; letter-spacing:.08em; color:var(--c-wine); border:1px solid var(--c-wine);
}
.cform__input{
  width:100%; padding:14px 16px;
  font-family:var(--f-jp); font-size:15px; letter-spacing:.04em; line-height:1.7; color:var(--c-ink);
  background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius);
  transition:border-color .3s var(--ease);
}
.cform__input:hover{ border-color:var(--c-ink-45); }
.cform__input:focus{ outline:none; border-color:var(--c-moss); box-shadow:0 0 0 2px rgba(70,84,63,.12); }
.cform__input:focus-visible{ outline:none; }
.cform__textarea{ resize:vertical; min-height:150px; }
.cform__select{ appearance:none; -webkit-appearance:none; padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--c-ink-45) 50%),linear-gradient(135deg,var(--c-ink-45) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.cform__note{ margin-top:var(--sp-3); }
.cform__note a{ border-bottom:1px solid var(--c-line); }
.cform__submit{ margin-top:var(--sp-4); text-align:center; }
.cform__submit .btn{ min-width:240px; }
.cform__status{ margin-top:var(--sp-2); min-height:1.8em; }
.cform__status[data-state="ok"]{ color:var(--c-moss); }
.cform__status[data-state="ng"]{ color:var(--c-wine); }
.cform.is-sent .cform__row,
.cform.is-sent .cform__note,
.cform.is-sent .cform__submit .btn{ display:none; }
@media (min-width:768px){
  .cform__row--half{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
}

/* ===== 23. FOOTER ===== */
.footer{ background:var(--c-ink); color:var(--c-paper); padding:var(--sp-5) 0 calc(var(--sp-5) + 64px); }
@media (min-width:768px){ .footer{ padding-bottom:var(--sp-5); } }
.footer__inner{ display:grid; gap:var(--sp-4); }
.footer__logo{ margin:0; }
.footer__logo img{ display:block; width:auto; height:58px; }
@media (min-width:1024px){ .footer__logo img{ height:66px; } }
.footer__tagline{ margin-top:var(--sp-2); color:rgba(247,245,240,.72); }
.footer__nav{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2) var(--sp-3); font-size:13px; letter-spacing:.08em; }
.footer__nav a{ color:rgba(247,245,240,.82); padding:4px 0; }
.footer__nav a:hover{ color:var(--c-paper); }
.footer__meta .t-cap{ color:rgba(247,245,240,.6); }
.footer__meta a{ border-bottom:1px solid rgba(247,245,240,.3); }
.footer__links{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-2); font-size:13px; letter-spacing:.1em; }
.footer__links a{ color:var(--c-paper); padding:6px 0; }
.footer__legal{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); margin-top:var(--sp-2); }
.footer__todo{ color:rgba(247,245,240,.45); }
.footer__age{ margin-top:var(--sp-3); }
.footer__copy{ margin-top:var(--sp-3); letter-spacing:.2em; }
@media (min-width:1024px){
  .footer{ padding-block:var(--sp-6); }
  .footer__inner{ grid-template-columns:4fr 4fr 4fr; gap:var(--sp-5); }
  .footer__nav{ grid-template-columns:1fr 1fr; }
}

/* ===== 24. SP追従CTA ===== */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90; height:64px;
  padding:6px var(--gutter); background:color-mix(in srgb, var(--c-paper) 92%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-top:1px solid var(--c-line);
  display:flex; align-items:center;
  transform:translateY(100%); transition:transform .35s var(--ease);
}
.sticky-cta[hidden]{ display:none; }
.sticky-cta.is-visible{ transform:none; }
.sticky-cta .btn{ width:100%; min-height:52px; font-size:13px; }
@media (min-width:768px){ .sticky-cta{ display:none !important; } }

/* アンカーリンクの着地位置（固定ヘッダー分） */
.sec, [id]{ scroll-margin-top: calc(var(--header-h) + 8px); }