/* =========================================
   PINEWAVE MATCHA - style.css
   レイアウト（幅・高さ）: vw指定（1440px時にデザイン値と一致）
   フォント・余白（font-size / margin / padding / gap）: px固定
   ========================================= */

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: #fdfced;
}

body {
  width: 100%;
  background-color: #fdfced;
  color: #000000;
  font-family: 'Noto Sans JP', 'Open Sans', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

/* 2026-08-20 追加
   上のリセットは padding は消すが border は消さないため、
   ブラウザ既定で border を持つ要素が「枠線だけ」の状態で描画される。
   実際 WordPress側のお問い合わせフォームでは、中身が空の <fieldset> が
   既定の border:2px groove だけ残り、カード上部に
   グレー/白/グレー/白の4pxの線として出ていた
   （実機実測：カード上端から28.0px＝padding-topの位置、色 #6C6C6C と #FFFFFF）。
   このサイトのデザインでは fieldset / legend を使わないので枠線を消す。 */
fieldset {
  border: 0;
  min-width: 0;
}

legend {
  display: block;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ---- Section Divider ---- */
/* 2026-08-19 変更前は margin:0 8.125% / width:83.75% で上限がなく、
   本文が頭打ちになったあとも点線だけ伸び続けていた
   （1920px時：点線1608px vs トップの本文1197px）。
   1440px時の1206pxで止める。ABOUTページだけは .about-sec と完全一致させる
   別ルール（.about hr.section-divider）を about.css 側に持っている。 */
hr.section-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  width: min(83.75%, 1206px);
  margin: 0 auto;
}

/* ---- Shared section head ---- */
.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.section-head__leaf {
  width: 2.639vw;   /* 38px */
  height: 4.722vw;  /* 68px */
  flex-shrink: 0;
}

.section-head__text-img {
  height: auto;
  width: auto;
}

.why .section-head__text-img {
  width: 29.583vw; /* 426px */
}

.menu-section .section-head__text-img {
  width: 25.417vw; /* 366px */
}

.schedule .section-head__text-img {
  width: min(21.667vw, 312px); /* 312px */
}

.instagram .section-head__text-img {
  height: 47px;
  width: auto;
}

/* ---- 2026-10-27 トップの各セクション見出し（茶筅）の左位置を NEWS に揃える ----
   【変更前】見出し行は各セクションの左パディングの位置にそのまま置いていた
     （margin-left なし）。1440px時の茶筅の x（実測）:
       NEWS 156 / CONCEPT 130 / WHY 126 / MENU 148 / SCHEDULE 120 / INSTAGRAM 148
     NEWS だけ Figma どおり本文より 26px 内側にあり、下のセクションとずれて見えていた。
     （依頼者から「NEWS より下の見出しの位置がずれている」と指摘）
   【デザイン】Figma「TOPページ（最終確定版）再」では見出しが本文より内側にあり、
     茶筅の x は NEWS 156 / CONCEPT 158 / WHY 155 / MENU 152 / SCHEDULE 167 / INSTAGRAM 176。
   【対応】全セクションの茶筅を NEWS と同じ位置
     「max(130px, (画面幅 − 1197px) ÷ 2) + 26px」（1440px時 156px）に揃える。
     各セクションは左パディングの基準値が違う（130/126/148/120/148px）ので、
     その差を margin-left で埋める。SCHEDULE・INSTAGRAM は Figma より
     それぞれ 11px・20px 左になるが、揃えることを優先した。
     ※ここだけ 100% ではなく 100vw を使う（見出し行の % は画面幅にならないため）。
       両方の max() が同じ側を取る 1449px 以下と 1497px 以上では差は打ち消し合うので、
       スクロールバー幅の影響は出ない。
     1024px以下は全セクションの左パディングが同じ値になるので、そこでは 0 に戻す。 */
.concept__deco-row {
  margin-left: min(1.806vw, 26px);
}

.why .section-head {
  margin-left: calc(min(1.806vw, 26px) + max(130px, (100vw - 1197px) / 2) - max(126px, (100vw - 1197px) / 2));
}

.menu-section .section-head,
.instagram .section-head {
  margin-left: calc(min(1.806vw, 26px) + max(130px, (100vw - 1197px) / 2) - max(148px, (100vw - 1197px) / 2));
}

.schedule .section-head {
  margin-left: calc(min(1.806vw, 26px) + max(130px, (100vw - 1197px) / 2) - max(120px, (100vw - 1200px) / 2));
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 1.389vw; /* 20px */
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}

.btn:hover { opacity: 0.85; }

/* 標準グリーン（69px） */
.btn--green {
  background-color: #7fa03a;
  color: #ffffff;
  height: 4.792vw;      /* 69px */
  min-width: 14.583vw;  /* 210px */
  padding: 0 24px;
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 20px;
}

/* 幅広グリーン（93px） */
.btn--green-large {
  background-color: #6f8f3a;
  color: #ffffff;
  height: 6.458vw;      /* 93px */
  min-width: 22.569vw;  /* 325px */
  padding: 0 32px;
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 24px;
  border-radius: 1.389vw;
}

/* ABOUTボタン（2行） */
.btn--about {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #6f8f3a;
  color: #ffffff;
  width: min(15.903vw, 229px);   /* 229px */
  height: min(4.792vw, 69px);   /* 69px */
  border-radius: min(1.389vw, 20px);
  gap: 2px;
  margin-left: auto;
}

.btn--about__label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: #ffffff;
}

.btn--about__arrow {
  position: absolute;
  right: 18px;
  top: 43%;
  transform: translateY(-50%);
  font-family: 'Noto Serif JP', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
}

.btn--about__sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #fdfced;
  line-height: 1;
}

.btn__arrow {
  font-family: 'Noto Serif JP', sans-serif;
  font-weight: 500;
  font-size: 24px;
}


/* =========================================
   HEADER
   ========================================= */
/* ---- 2026-08-19 768〜1100px帯のレイアウト崩れを修正 -------------
   【変更前】
     .header            height: 8.056vw
     .header__nav-left  left: 13.681vw / bottom: 32px / gap: 40px
     .header__nav-about left: calc(58.33% + 27px) / bottom: 32px
     .header__contact-btn left: calc(75% + 9.5px) / width: 12.361vw
                          height: 4.792vw / font-size: 16px
     .header__logo-link top: 20px / width,height: 12.167vw
     ＋ @media(max-width:1024px) で header:72px、nav-left:20px、
        logo:100px、btn:11.5vw×40px 等に固定値で上書き
   【問題】
     1. 1024→1025で左ナビ 20px→150px、ヘッダー高 72px→89px と不連続
     2. Aboutの文字がお問い合わせボタンに重なる（768〜1024で3〜13px）
     3. ボタンが内容より小さく、文字が枠外へ（768で6px）、
        outline-offset:-8px の点線に文字が重なる
   【方針】
     絶対配置＋固定px/vwの混在をやめ、768pxと1440pxの design 値を
     直線で結ぶ式にして全幅で連続させる。
     右側（About＋ボタン）は flex でまとめ、重なりを原理的に起こさない。
     ボタンは内容に合わせて伸びるようにし、点線は内容に応じて内側量を調整。
   ---------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  /* 768→72px / 1440→116px、1440px超は従来どおり 8.056vw */
  height: max(calc(6.548vw + 21.7px), 8.056vw);
  background-color: #fdfced;
  filter: drop-shadow(0px 0.278vw 0.278vw rgba(0, 0, 0, 0.25));
  overflow: visible;
}

/* 左ナビ（Home / Menu / Schedule） */
/* 左ナビ・右グループとも「画面の端」ではなく「中央のロゴ」を基準に置く。
   変更前は左が left:13.681vw、右が right:11.979vw の外側基準だったため、
   幅によってロゴとの間隔が左94〜109px／右42〜89pxと非対称に開いていた。
   1440pxの設計値（左63px／右61px）は左右ほぼ均等でロゴに寄っており、
   中央基準にするとその関係が全幅で保たれる。
     ロゴの半径 = max(50px, 6.0835vw)   （ロゴ幅 max(100px,12.167vw) の半分）
     ロゴとの間隔 = max(24px, 4.3vw)     （1440→61.9px ≒ 設計の61〜63px） */
.header__nav-left {
  position: absolute;
  left: auto;
  right: calc(50% + max(50px, 6.0835vw) + max(24px, 4.3vw));
  bottom: max(16px, min(calc(2.381vw - 2.3px), 2.222vw));
  display: flex;
  align-items: flex-end;
  gap: max(20px, min(calc(2.976vw - 2.9px), 2.778vw));
}

/* About＋お問い合わせボタンを1つの塊として、ロゴの右隣に配置する。
   flex なので互いに重なることがない。 */
.header__nav-right {
  position: absolute;
  right: auto;
  left: calc(50% + max(50px, 6.0835vw) + max(24px, 4.3vw));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: max(12px, min(calc(0.818vw + 5.7px), 1.215vw));
}

.header__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #6f8f3a;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  /* 768→13px / 1024px以上は従来どおり16px */
  font-size: clamp(13px, calc(1.172vw + 4px), 16px);
  line-height: 1.25;
}

.header__nav-icon {
  width: auto;
  /* 上限を付けると1440px超で頭打ちになるため下限のみ。1440→23px */
  height: max(14px, 1.597vw);
}

/* PINEWAVEMATCHAについて（left = 58.33% + 27px） */
.header__nav-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #6f8f3a;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 1.111vw, 16px); /* 1440pxで16px、狭い画面では縮小してContactボタンと重ならないように */
  line-height: 1.25;
  white-space: nowrap;
}

/* お問い合わせボタン（left = 75% + 9.5px） */
.header__contact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* 内容に合わせて伸びるようにし、文字が枠外へ出ないようにする */
  width: auto;
  min-width: max(120px, 12.361vw);   /* 1440→178px */
  padding: 0 14px;
  /* 中身（アイコン＋文字）は px 寄りで縮みにくいので、ボタンの高さは
     768→52px / 1440→69px の直線で確保する。1440px以上は従来の 4.792vw。 */
  height: max(calc(2.53vw + 32.6px), 4.792vw);
  background-color: #6f8f3a;
  border-radius: 1.389vw;
  box-shadow: 0 0.278vw 0.278vw rgba(0, 0, 0, 0.25);
  outline: 1px dashed #fdfced;
  /* ボタンが小さいときは点線を内側に入れすぎない（文字と重なるため） */
  outline-offset: max(-8px, -0.556vw);
  color: #fdfced;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  /* 768→12px / 1024px以上は従来どおり16px */
  font-size: clamp(12px, 1.563vw, 16px);
}

.header__contact-icon {
  width: auto;
  height: max(12px, 1.597vw);
}

/* ロゴ：中央絶対配置・円形・ヘッダー下に飛び出す */
.header__logo-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: max(10px, 1.389vw);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(100px, 12.167vw);
  height: max(100px, 12.167vw);
  border-radius: 50%;
  background-color: #fdfced;
}

.header__logo-img {
  width: max(68px, 9.722vw);   /* 140px ≈ 69% of circle */
  height: auto;
  object-fit: contain;
}


/* =========================================
   HERO
   ========================================= */
.hero {
  position: relative;
  width: 100%;
  /* 波canvasはheroの下端に固定され、山は下端の68px上に来る。
     一方でヒーロー内の文字・ボタンはpx基準で幅ほど伸びないため、
     単純な vw 指定（旧: 57.986vw）だと幅が狭いほど波がボタンに迫り、
     768px付近では重なってしまっていた。
     ボタン下端は実測で およそ 0.51 × 幅 − 6px の位置に来るので、
       高さ = 0.51 × 幅 + 195px
     とすると、768〜1440pxで常に約132pxの余白を確保できる。
     ※写真(1389x1132)は object-position: center top で下側だけを
       トリミングしているため、81.5vw までは高さを増やすほど
       車の下部が見えてくる。上式は全幅でその範囲内に収まる。 */
  height: calc(51vw + 195px);
  overflow: visible; /* 波canvasをCONCEPTセクションのハイビスカスに重ねるため */
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden; /* heroのoverflow:visibleによる背景のはみ出しを防ぐ */
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero__overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 41.667vw;  /* 600px */
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.hero__stamp {
  margin-top: min(213px, 14.792vw);  /* 213px — 広い画面は固定213pxで上に保ち、狭い画面のみ比例で上げて波形への潜り込みを防止 */
  width: 12.986vw;       /* 187px */
  height: auto;
  margin-bottom: 9px;
  flex-shrink: 0;
}

.hero__stamp-img {
  width: 12.986vw;
  height: auto;
  object-fit: contain;
}

.hero__headline {
  width: 36.528vw;  /* 526px — SVG自然幅 */
  flex-shrink: 0;
}

.hero__headline-img {
  width: 36.528vw;
  height: auto;
  object-fit: contain;
  /* ---- 2026-08-20 写真と見出しのコントラスト対策 ----
     見出しはクリーム色（#fdfced）で、背景写真の空・海・砂浜など
     明るい部分に重なると輪郭が埋もれる。
     SP(390px)の実機スクリーンショットを解析したところ、
       1行目 Organic Matcha : 輪郭の37.0%が、大きな文字の基準(3.0)を下回る
       2行目 by the Coast   : 同 24.3%
       ※ 最も明るい所ではコントラスト比1.40（ほぼ同化）
     文字そのもの（デザイナー支給のSVG）は一切加工せず、
     drop-shadow で輪郭のすぐ外側にうっすら暗い縁を作って浮かせる。
     drop-shadow は矩形ではなく画像の不透明部分の形に沿うので、
     文字のまわりだけに影が付く。
     1つ目 = 輪郭を締める近い影 / 2つ目 = 全体を浮かせる柔らかい影。
     暗い背景（キッチンカー等）の上ではほとんど視認されない。
     すぐ下のタグラインが元から持っている
     text-shadow: 0 1px 4px rgba(0,0,0,0.35) と同じ考え方。 */
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.50))
          drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28));
}

/* ---- 2026-08-20 Windowsで見出し画像と日本語が重なる問題を修正 ----
   【現象】WindowsではFVの「by the Coast」と「心地いいものは、自然に近い。」が
     一部重なる。Macでは起きない。
   【原因】font-family が 'Open Sans', sans-serif だけで、日本語フォントの指定が
     抜けていた。Open Sansには日本語のグリフが無いため、日本語部分だけ
     OS標準フォントに落ちる（Mac=ヒラギノ / Windows=游ゴシック・メイリオ）。
     さらに line-height を指定していなかったため、行の高さがそのフォントの
     ascent/descent 任せになり、環境ごとに文字の縦位置が変わっていた。
     このテキストは margin-top:-17px で見出し画像の下端に食い込ませているので、
     その差がそのまま重なりの差になる。
     ・現在のフォールバック : ascent 22.0 / descent 3.0 → 行の高さ約25px
     ・Noto Sans JP         : ascent 29.0 / descent 7.0 → 行の高さ約36px
   【対応】サイトが既に読み込んでいる Noto Sans JP を指定して、どの環境でも
     同じフォント・同じ字形にする（他のテキストは元から同じ指定）。
     あわせて line-height を明示し、行の高さをフォントに依存させない。
     line-height:1 は現在の行の高さ(約25px)と同じなので、下のボタンの位置も動かない。

   ---- 2026-08-22 追記：margin-top を修正して重なりを解消 ----
   【現象】Mac/Windowsを問わず、768〜1800px付近で「by the Coast」の
     yの下部と日本語が重なる。
   【原因】見出しSVG(526x141)の下側の透明余白はわずか1.95%
     （1440px時で2.8px）しかないのに、margin-top:-17px で
     それを大きく超えて引き上げていた。全幅で実測した文字同士の隙間:
       390px -3.8 / 768px -14.9 / 1440px -12.9 / 1920px -12.0 / 2560px -10.8
     すべてマイナス＝重なっている状態だった。
   【対応】固定pxの引き上げをやめる。見出し画像は vw で伸縮するので、
     固定pxだと画面幅によって食い込み量が変わってしまう。
     max(2px, 0.2vw) の正の余白にして、どの幅でも必ず隙間ができるようにする。 */
.hero__tagline {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.736vw, 25px); /* 25px at 1440px、縮小時も比例して小さくなる */
  line-height: 1;
  color: #ffffff;
  text-align: center;
  align-self: center;
  letter-spacing: 0;
  margin-top: max(2px, 0.2vw);
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.hero__btn {
  margin-top: min(88px, 6.111vw);   /* 88px — 広い画面は固定88px、狭い画面のみ比例で詰める */
}

.hero__deco-flowers {
  position: absolute;
  right: 0;
  top: 80px;
  width: 15.278vw;
}

.hero__flower-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 波形ライン（Canvas） */
.hero__wave-canvas {
  position: absolute;
  bottom: -50px; /* 波をCONCEPTセクションのハイビスカスに重ねる */
  left: 0;
  z-index: 4;
  pointer-events: none;
  display: block;
}


/* =========================================
   NEWS
   2026-10-26 追加（Figma「TOPページ（最終確定版）再」947:133）
   FVの直後に置く。数値は1440px時のFigma実測値（フレーム左上基準）:
     茶筅 156,1025 38x68 ／ NEWS画像 204,1038 150x42 ／「お知らせ」222,1093 28px
     日付 x404 Open Sans Bold 28px #63a028 ／ ラベル x586 90x33 角丸15 Bold 20px
     タイトル x700 Regular 20px ／ 下線 x394〜1188 1px #63a028 行ピッチ77px
     注記 x418 20px ／ ボタン 902,1412 286x69 角丸20 #6f8f3a SemiBold 22px
     区切り線 y1556 → CONCEPTの茶筅 y1601
   ========================================= */
.news {
  position: relative;
  /* 縦位置: Figmaでは NEWS の茶筅（y1025）が、変更前デザインの
     CONCEPT の茶筅（y1012）より13px下にある。heroの高さはFigmaから
     意図的に変えてあるため絶対値ではなく、変更前の CONCEPT の茶筅位置
     （hero下端から 80px + 40px = 120px）に13pxを足し、
     下の margin-top:-1px ぶんを加えて 133px とした。
     下側は ボタン下端(1481) → 区切り線(1556) の75px。 */
  padding: 133px 0 75px;
  /* .concept と同じ手当て（hero下端の小数pxで細い線が出るのを塞ぐ）。
     hero の直後に来るセクションに必要なので、NEWS がある間はこちらが担う。 */
  background-color: #fdfced;
  margin-top: -1px;
}

.news__inner {
  display: flex;
  align-items: flex-start;
  padding: 0 max(130px, calc((100% - 1197px) / 2)); /* .concept__inner と同じ */
}

/* 見出し列: 本文列の開始位置（x394）までの幅 = 394 - 130 = 264px */
.news__head {
  flex: 0 0 min(18.333vw, 264px);
  display: flex;
  align-items: flex-start;
  gap: min(0.694vw, 10px);              /* 10px: 茶筅右端194 → NEWS 204 */
  padding-left: min(1.806vw, 26px);     /* 26px: 茶筅 x156 - 130 */
}

.news__head-leaf {
  width: min(2.639vw, 38px);   /* 38px */
  height: min(4.722vw, 68px);  /* 68px */
  object-fit: contain;
  flex-shrink: 0;
}

/* NEWS画像と「お知らせ」を縦に並べ、お知らせを画像の中央に揃える */
.news__head-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: min(0.903vw, 13px);      /* 13px: 茶筅 y1025 → NEWS y1038 */
}

.news__head-title {
  line-height: 0;
}

.news__head-img {
  width: min(10.417vw, 150px);  /* 150px */
  height: auto;
}

.news__head-sub {
  margin-top: 13px;                     /* NEWS下端 1080 → お知らせ 1093 */
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 38px;
  white-space: nowrap;
}

.news__body {
  flex: 1 1 auto;
  max-width: 794px;                     /* 下線の幅 x394〜1188 */
  padding-top: 13px;                    /* 1行目の日付 y1038 = NEWS画像と同じ高さ */
}

.news__list {
  list-style: none;
}

/* 1行 = 日付 / ラベル / タイトル。
   列幅は Figma の x座標の差: 日付 404→ラベル 586 = 182px、
   ラベル右端 676 → タイトル 700 = 24px。左の10pxは 下線 394 → 日付 404。
   上下は 下線から次の文字まで約29px、文字から下線まで約9px（行ピッチ77px）。 */
.news__item {
  display: grid;
  grid-template-columns: 182px auto 1fr;
  align-items: center;
  padding: 29px 10px 9px;
  border-bottom: 1px solid #63a028;
}

.news__item:first-child {
  padding-top: 0;
}

.news__date {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 38px;
  color: #63a028;
  white-space: nowrap;
}

/* ラベル。色は NEW / INFO / EVENT（カテゴリーのスラッグ）ごと。
   管理画面で追加したそれ以外のラベルは、この共通色で表示する。 */
.news__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  height: 33px;
  padding: 0 12px;
  margin-right: 24px;
  border-radius: 15px;
  background-color: #63a028;
  color: #ffffff;
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

.news__badge--new {
  background-color: #6f8f3a;
  color: #ffffff;
}

.news__badge--info {
  background-color: #99c455;
  color: #000000;
}

.news__badge--event {
  background-color: rgba(111, 143, 58, 0.7); /* #6f8f3a 不透明度70% */
  color: #ffffff;
}

/* ラベル未選択（「未分類」のみ）の行は、タイトルの開始位置だけ揃える */
.news__badge--none {
  visibility: hidden;
}

.news__title {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: #000000;
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .news__title--link:hover {
    text-decoration: underline;
  }
}

/* 注記 + ボタン。ボタン右端を下線の右端（x1188）に揃え、
   注記はボタンの34px左（868 → 902）。最終行の下線 1390 → ボタン 1412 = 22px */
.news__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px 34px;
  margin-top: 22px;
}

.news__note {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: #000000;
}

/* 「instagramを見る」ボタン: 文字 → ハイビスカス → 矢印 を左詰めで並べる。
   左21px（902→923）/ 右19px（矢印右端1169→1188）/ 花の後13px（1132→1145） */
.btn--news {
  justify-content: flex-start;
  gap: 0;
  flex-shrink: 0;
  /* 69px。文字はpx固定なので、vwだけだと768px幅で37pxまで縮み文字に対して窮屈になる。
     SPと同じ52pxを下限にする */
  height: max(52px, min(4.792vw, 69px));
  padding: 0 19px 0 21px;
  border-radius: min(1.389vw, 20px);    /* 20px */
  background-color: #6f8f3a;
  color: #ffffff;
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 22px;
}

.btn--news__icon {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.btn--news .btn__arrow {
  margin-left: 13px;
}

/* NEWS があるとき、CONCEPT は hero の直後ではなくなるので
   ・hero下端用の手当て（margin-top:-1px）を外す。残すと区切り線に1px重なり線を隠してしまう
   ・波に重ねる花は NEWS 側（.news__deco-flower）に出すので CONCEPT 側は隠す
   ・上余白は Figma の 区切り線 y1556 → 茶筅 y1601 = 45px に合わせる
     （.concept__left の padding-top 40px と合わせて45px。変更前: padding-top 80px）
   NEWS が0件で出力されないときは、これらは効かず変更前の表示のまま。 */
.news ~ .concept {
  margin-top: 0;
  padding-top: 5px;
}

.news ~ .concept .concept__deco-flower {
  display: none;
}

/* 1280px以下は見出しを上に積む。
   左に見出し列（264px）を置いたままだと、1100px幅でタイトル列が320px程度になり
   ほぼ全件が2行に折り返していた（768px幅では200px程度）。 */
@media (max-width: 1280px) {
  .news__inner {
    flex-direction: column;
    gap: 32px;
  }

  /* 2026-10-27 padding-left: 0 を削除（変更前は 1280px 以下で 0）。
     下のセクションの見出しも 1025px 以上では本文より 26px 内側に揃えたので、
     NEWS も同じ位置に残す。0 に戻すのは 1024px 以下（@media (max-width: 1024px) 側）。 */
  .news__head {
    flex-basis: auto;
  }

  .news__body {
    width: 100%;
    max-width: none;
    padding-top: 0;
  }
}


/* =========================================
   CONCEPT
   ========================================= */
.concept {
  position: relative;
  overflow: visible;
  padding: 80px 0;
  /* ---- 2026-08-20 波の下に細い線が出るのを塞ぐ ----
     【現象】スマホ実機（DPR3）でヒーローの波の下に1本細い線が見える。
     【調査】レイアウト上の隙間は 0.000px（hero下端＝concept上端で一致）。
       原因は hero の高さ calc(51vw + 195px) が小数pxになること。
         390px幅 → 563.000px（ぴったり）
         393px幅 → 566.898px ← 端末の物理ピクセルの途中で切れる
       写真の最下行が半透明に描かれ、クリーム背景と混ざって
       中間色の細い線として見えてしまう。
     【対応】CONCEPTセクションに背景色を付けて1px上に重ね、
       写真の最下行を塗りつぶす。ABOUTページの .about-intro で
       同じ現象に対して既に使っている手当てと同じ方法。
       波canvasは z-index:4 でこのセクションより前面に描かれるため、
       波の形は今までどおり見える。 */
  background-color: #fdfced;
  margin-top: -1px;
}

/* ---- 2026-08-19 トップページのコンテンツ幅を1440px相当で頭打ちにする ----
   【変更前】.concept__inner  padding: 0 130px
             .why__inner      padding: 0 126px
             .menu-section__inner / .instagram__inner  padding: 0 148px
     いずれも左右パディングが固定pxだけで上限がなく、本文が画面幅に比例して
     伸び続けていた。他ページは max-width で止まるため、広い画面でトップだけ
     極端に横長になっていた（実測・本文幅）:
       1440px : TOP 1180/1188/1144/1144  ABOUT 1197  MENU 1200
       1920px : TOP 1660/1668/1624/1624  ABOUT 1197  MENU 1200
       2560px : TOP 2300/2308/2264/2264  ABOUT 1197  MENU 1200
   【対応】左右パディングを max() にして、画面が広くなったら
     「(画面幅 − 1197px) ÷ 2」のほうを採用する。
     1197pxはABOUTページのコンテンツ幅（Figma実測値）に合わせた。
     各セクションの元の固定px値は max() の第1引数として残してあるので、
     頭打ちに達する幅（concept 1457px / why 1449px / menu・insta 1493px）
     までは従来とまったく同じ表示になる。 */
.concept__inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding: 0 max(130px, calc((100% - 1197px) / 2));
}

.concept__left {
  flex: 0 0 auto;
  width: min(43.819vw, 631px);    /* 631px */
  padding-top: 40px;
}

/* 花：ウェーブに重なる絶対配置（セクション上端基準）
   2026-10-26 .news__deco-flower を追加（NEWS があるときはそちらが hero 直下に来るため） */
.concept__deco-flower,
.news__deco-flower {
  position: absolute;
  left: max(9.028vw, calc((100% - 1197px) / 2)); /* 130px - 左パディングに合わせる */
  top: max(-3.958vw, -57px);      /* -57px - 花の中心が波の下端に重なる */
  width: min(7.986vw, 115px);     /* 115px */
  height: min(7.917vw, 114px);    /* 114px */
  object-fit: contain;
  z-index: 6;
}

/* CONCEPT装飾行（茶筅 + CONCEPTテキスト + 抹茶碗） */
.concept__deco-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

/* 茶筅アイコン（左端） */
.concept__deco-chasen {
  width: min(2.639vw, 38px);  /* 38px */
  height: min(4.722vw, 68px); /* 68px */
  object-fit: contain;
  flex-shrink: 0;
}

/* CONCEPTテキスト画像（中央） */
.concept__deco-concept-text {
  width: min(16.806vw, 242px); /* 242px */
  height: min(4.375vw, 63px); /* 63px */
  object-fit: contain;
}

/* 抹茶碗アイコン（右端） */
.concept__deco-bowl {
  width: min(5.208vw, 75px);  /* 75px */
  height: min(3.611vw, 52px); /* 52px */
  object-fit: contain;
  flex-shrink: 0;
}

.concept__heading {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.4;
  color: #000000;
  margin-bottom: 24px;
}

.concept__body {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0;
  color: #000000;
  margin-bottom: 40px;
}

.concept__right {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-start;
}

.concept__img-card {
  position: relative;
  width: min(35.069vw, 505px);    /* 505px */
  height: min(24.167vw, 348px);   /* 348px */
  background-color: #6f8f3a;
  border-radius: min(2.778vw, 40px); /* 40px */
  overflow: hidden;
  margin-top: 20px;
}

.concept__photo {
  width: min(32.431vw, 467px);  /* 467px */
  height: min(21.597vw, 311px); /* 311px */
  object-fit: cover;
  border-radius: min(2.778vw, 40px);
  position: absolute;
  top: 18px;
  left: 18px;
}

.concept__right-flowers {
  position: absolute;
  bottom: -60px;
  right: -40px;
  width: min(9.375vw, 135px);
}

.concept__flower {
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* =========================================
   WHY CHOOSE US
   ========================================= */
.why {
  padding: 60px 0 80px;
}

.why__inner {
  padding: 0 max(126px, calc((100% - 1197px) / 2));
  position: relative;
}

/* 2026-08-22 見出し→バッジ→サブタイトルの順に並び替えたのに合わせて余白を調整。
   【変更前】margin-bottom: 32px / padding-top: 20px
     （バッジがセクション先頭にあり、上は区切り線との間隔だった）
   【デザイン実測】バッジの高さを1.0としたときの比率
     見出し下端→バッジ上端 0.322 ／ バッジ下端→サブタイトル上端 0.622
     1440px時 = 21px / 40px、1920px時 = 25px / 49px */
.why__badges {
  display: flex;
  gap: 19px;
  margin-top: 21px;
  margin-bottom: 40px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.056vw;  /* 44px */
  padding: 0 20px;
  border: 2px solid #7fa03a;
  border-radius: 2.083vw; /* 30px */
  font-family: 'Noto Serif HK', serif;
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  background: transparent;
  line-height: 1;
}

.why__heading-wrap {
  margin-bottom: 40px;
}

.why__title {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 28px;
  color: #000000;
  /* 2026-08-22 バッジがすぐ上に来たので、間隔は .why__badges の
     margin-bottom で取る（変更前: margin-top: 8px） */
  margin-top: 0;
  text-align: center;
}

.why__cards {
  display: flex;
  gap: 30px;
  position: relative;
}

.why__card {
  flex: 1;
  min-height: 25.903vw; /* 373px */
  border: 5px solid #7fa03a;
  border-radius: 2.083vw; /* 30px */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 16px;
}

.why__card-img-wrap {
  width: 100%;
  padding: 22px 45px 0;
  box-sizing: border-box;
  overflow: hidden;
}

.why__card-img-wrap--vegan {
  position: relative;
  overflow: visible;
}

.why__vegan-deco {
  position: absolute;
  pointer-events: none;
}

.why__vegan-deco--leaves {
  width: 45%;
  top: -8%;
  left: -8%;
}

.why__vegan-deco--milk {
  width: 38%;
  bottom: -10%;
  right: -6%;
}

.why__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.833vw;
  display: block;
}

.why__card-title {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: min(1.667vw, 24px); /* 最大24px、それ以下はvwでスケール */
  color: #000000;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.why__card-text {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #000000;
  text-align: center;
  line-height: 1.6;
  padding: 0 12px;
}

.why__deco-br {
  position: absolute;
  right: -2.778vw;
  bottom: -2.778vw;
  width: 7.986vw;
  pointer-events: none;
}

.why__deco-leaf {
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* =========================================
   MENU PICKUP
   ========================================= */
.menu-section {
  padding: 60px 0 80px;
}

.menu-section__inner {
  padding: 0 max(148px, calc((100% - 1197px) / 2));
  position: relative;
}

.menu-section__heading-wrap {
  margin-bottom: 40px;
}

.menu-section__title {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 28px;
  color: #000000;
  margin-top: 8px;
  text-align: center;
}

.menu-section__cards {
  display: flex;
  gap: 30px;
  margin-bottom: 60px;
  position: relative;
}

.menu-card {
  flex: 1;
  /* height: 31.667vw;*/
  background-color: #6f8f3a;
  border-radius: 2.083vw; /* 30px */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 24px;
}

.menu-card__img-wrap {
  width: 17.5vw;    /* 252px */
  height: 17.361vw; /* 250px */
  border-radius: 2.778vw; /* 40px */
  overflow: hidden;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.menu-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-card__name {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #fdfced;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 2px;
}

.menu-card__size {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: #fdfced;
  text-align: center;
  margin-bottom: 8px;
}

.menu-card__desc {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fdfced;
  text-align: center;
  line-height: 1.7;
}

.menu-section__cta {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* ---- 2026-08-22 ハイビスカスがカード内の文字に重なる問題を修正 ----
   【変更前】left: -2.778vw（-40px）
     花の幅が 7.986vw あるため、右端がカード左端より 5.208vw 内側まで入り、
     説明文（カード左端＋20px から始まる）に重なっていた。実測の食い込み量:
       768px 20px / 1024px 33px / 1280px 47px / 1440px 55px / 1920px 80px
   【対応】花の右端がカード左端＋16px（説明文の始まりより4px手前）で
     止まるように左へずらす。left = 16px − 花の幅。
     カードの枠と余白には重なるので「あしらい」としての見え方は保つ。 */
.menu-section__deco-bl {
  position: absolute;
  left: calc(16px - 7.986vw);
  bottom: -2.778vw; /* -40px */
  width: 7.986vw;   /* 115px */
  pointer-events: none;
}

.menu-section__deco-leaf {
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: scaleX(-1);
}


/* =========================================
   SCHEDULE
   ========================================= */
.schedule {
  padding: 60px 0 80px;
  position: relative;
}

/* 2026-08-19 他セクションと同様に1440px相当で頭打ちにする
   （変更前: padding: 0 120px のみ。1920px時に本文1680px、2560px時に2320pxまで
     伸びていて、点線や他セクション(1197〜1200px)から大きくはみ出していた） */
.schedule__inner {
  padding: 0 max(120px, calc((100% - 1200px) / 2));
}

.schedule__heading-wrap {
  margin-bottom: 20px;
}

.schedule__title {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 32px;
  color: #000000;
  text-align: center;
}

.schedule__box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 3px dashed #6f8f3a;
  border-radius: min(2.083vw, 30px); /* 30px */
  padding: 40px 40px 60px 40px;
  position: relative;
  gap: 32px;
}

.schedule__content {
  display: flex;
  align-items: flex-start;
}

.schedule__calendar {
  flex: 0 0 auto;
  width: min(40.278vw, 580px); /* 580px */
  position: relative;
}

.schedule__calendar-img {
  width: min(40.278vw, 580px);
  height: min(40.278vw, 580px); /* 580×580 */
  object-fit: cover;
  border-radius: min(0.556vw, 8px);
}

.schedule__shopcard-deco {
  position: absolute;
  left: max(-3vw, -43.2px);
  bottom: max(-3vw, -43.2px);
  width: min(11.111vw, 160px); /* 160px */
  transform: rotate(-8.49deg);
  pointer-events: none;
}

.schedule__shopcard-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.schedule__vline {
  flex: 0 0 3px;
  width: 3px;
  background-color: #000;
  margin: 0 40px;
  align-self: stretch;
}

.schedule__map-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.schedule__map-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.schedule__map-title-img {
  height: min(2.708vw, 39px); /* 39px */
  width: auto;
  object-fit: contain;
}

.schedule__map-img-wrap {
  width: 100%;
  border: 10px solid #6f8f3a;
  border-radius: min(2.083vw, 30px);
  overflow: hidden;
}

.schedule__map-img {
  width: 100%;
  height: min(22.222vw, 320px); /* 320px */
  object-fit: cover;
  border-radius: min(2.083vw, 30px);
}

.schedule__address {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.schedule__access-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.schedule__addr-icon {
  width: min(2.222vw, 32px); /* 32px */
  height: min(2.222vw, 32px);
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 2px;
}

.schedule__access-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.schedule__access-title {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000000;
  line-height: 1.5;
}

.schedule__access-body {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  line-height: 1.6;
}

.schedule__deco-tr {
  position: absolute;
  right: max(-3vw, -43.2px);
  top: max(-3vw, -43.2px);
  width: min(9.375vw, 135px); /* 135px */
  pointer-events: none;
}

.schedule__deco-leaf {
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* =========================================
   INSTAGRAM / FOLLOW US
   ========================================= */
.instagram {
  padding: 60px 0 80px;
}

.instagram__inner {
  padding: 0 max(148px, calc((100% - 1197px) / 2));
}

.instagram__heading-wrap {
  margin-bottom: 40px;
}

.instagram__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: #000000;
  margin-top: 8px;
}

.instagram__icon {
  width: 2.708vw; /* 39px */
  height: 2.708vw;
  object-fit: contain;
  display: inline-block;
}

.instagram__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.instagram__item {
  border-radius: 2.083vw; /* 30px */
  overflow: hidden;
  height: 22.569vw; /* 325px */
  /* 投稿写真が入るまでの仮表示。実画像を入れると上に重なって隠れる */
  background-color: #d9d9d9;
}

.instagram__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -----------------------------------------------------------------
   2026-08-29 追加
   プラグイン「Instagram Feed」(Smash Balloon / instagram-feed) の
   出力を、上の .instagram__grid / .instagram__item と同じ見た目に揃える。

   【変更前】
     .instagram__item（空のdiv）を4個×2段そのまま並べていただけで、
     CSSの background-color: #d9d9d9 がグレーの箱として見えていた。
   【変更後】
     投稿があるときはプラグインが以下の構造を出力する。
       #sb_instagram > #sbi_images > .sbi_item > .sbi_photo_wrap > a.sbi_photo > img
     列数・余白・角丸・高さはプラグイン側の設定でも変えられるが、
     設定を触ると崩れるため、デザインの値はここで固定している。
   【!important を付けている理由】
     ・#sbi_images の gap は、プラグインが「画像スペーシング」設定から
       インラインstyleで書き込むため、通常の指定では勝てない
     ・.sbi_photo の height は、プラグインのJSが正方形になるよう
       インラインstyleで書き込む（本サイトは 281x325 とわずかに縦長）
   ----------------------------------------------------------------- */

/* 外側。左右の余白は .instagram__inner が持っているので打ち消す */
#sb_instagram {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 写真グリッド。変更前の .instagram__grid と同じ 4列 / 24px */
#sb_instagram #sbi_images {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  padding: 0 !important;
}

#sb_instagram #sbi_images .sbi_item {
  width: 100% !important;
}

/* 1枠。高さ・角丸・読み込み中のグレーは .instagram__item と同じ値 */
#sb_instagram .sbi_photo {
  height: 22.569vw !important; /* 325px */
  border-radius: 2.083vw;      /* 30px */
  overflow: hidden;
  background-color: #d9d9d9;
  transition: opacity 0.2s ease;
}

#sb_instagram .sbi_photo img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  /* フッターのSNSアイコン（.footer__icon-link）と同じ薄まり方に揃える */
  #sb_instagram .sbi_photo:hover {
    opacity: 0.8;
  }
}

/* プラグインの「もっと見る」「フォロー」ボタンと、
   写真上に出るリンクの帯は使わない。
   このセクションには専用の「Instagramをチェック」ボタンが既にある。 */
#sb_instagram #sbi_load,
#sb_instagram .sbi_link {
  display: none !important;
}

.instagram__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}


/* =========================================
   FOOTER
   ========================================= */
.footer {
  position: relative;
  width: 100%;
  /* クリームを敷くことで波PNG透明部分が上のセクションと自然につながる */
  background-color: #fdfced;
  overflow: hidden;
}

/* 波PNG（透明部分→クリーム、緑部分→波形） */
.footer::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20.625vw; /* = 594/2880 × 100vw */
  background-image: url('../images/common/footer/footer_wave.png');
  background-size: 100% auto;
  background-position: top left;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* 波PNG終端より下を緑で塗りつぶす */
/* ---- 2026-08-22 環境によってフッターに横線が出る問題を修正 ----
   【現象】Windows環境などで、フッターの緑の中に横一直線のクリーム色の線が出る。
     Macでは出ないことが多い。
   【原因】波PNG(.footer::before)の下端と、緑の塗り(.footer::after)の
     継ぎ目に、フッター自身の背景色(#fdfced)が透けていた。
     波PNGは高さ 20.625vw、緑の塗りはその1px上から開始していたが、
     ディスプレイの拡大率が125%・150%など中途半端な環境では
     20.625vw が小数pxになり、1pxの重ねでは足りずに隙間が残っていた。
     （Macは等倍か2倍なので端数が出にくく、再現しにくい）
   【対応】重ねる量を大幅に増やす。波PNGは上から13.44vwの位置で
     全幅が緑になり、そこから下端まで完全に不透明な単色 #6F8F3A
     （CSSの緑と同一色）なので、18vw から塗り始めても波の形は変わらない。
     重なりは 2.625vw（1920px時50px / 390px時10px）確保される。 */
.footer::after {
  content: '';
  display: block;
  position: absolute;
  top: 18vw;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #6f8f3a;
  pointer-events: none;
  z-index: 0;
}

.footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  /* padding-top: 14vw clears the wave at all viewport sizes
     (wave height = 20.625vw, lowest curve ≈ 13vw from top) */
  padding: 8vw 120px 0;
}

.footer__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.footer__logo-illust {
  width: 12.708vw; /* 183px */
  height: auto;
  object-fit: contain;
}

.footer__desc {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #fdfced;
  line-height: 1.7;
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fdfced;
}

.footer__nav-dash {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: #fdfced;
  line-height: 1;
}

.footer__nav-img {
  height: 26px;
  width: auto;
  object-fit: contain;
}

.footer__right {
  display: flex;
  align-items: center;
  gap: 20px;
  align-self: flex-end;
}

/* 2026-08-22 アイコンを<a>で囲んだため、リンク自体には余白を持たせず
   画像と同じ大きさにする（インライン要素の下側の余白も消す）。
   これを入れないと gap:20px の間隔や縦位置がずれる。 */
.footer__icon-link {
  display: inline-flex;
  line-height: 0;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer__icon-link:hover {
    opacity: 0.75;
  }
}

.footer__stamp {
  width: 4.167vw; /* 60px */
  height: auto;
  object-fit: contain;
}

.footer__sns-icon {
  width: 4.375vw; /* 63px */
  height: auto;
  object-fit: contain;
}

.footer__copy {
  position: relative;
  z-index: 1;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #fdfced;
  text-align: center;
  padding-bottom: 24px;
}


/* =========================================
   HIBISCUS SWAY ANIMATION
   ========================================= */
/* スナップ→ホールド→スナップ→ホールドの繰り返し（GIF的カクつき） */
@keyframes hibiscus-sway {
  0%,  12% { transform: rotate(-8deg); }
  50%, 62% { transform: rotate(8deg); }
  100%     { transform: rotate(-8deg); }
}

/* translateY(-50%) を保持しつつ回転（separator flower用） */
@keyframes hibiscus-sway-translate {
  0%,  12% { transform: translateY(-50%) rotate(-8deg); }
  50%, 62% { transform: translateY(-50%) rotate(8deg); }
  100%     { transform: translateY(-50%) rotate(-8deg); }
}


/* 動きを減らす設定をしていないユーザーにのみ適用 */
@media (prefers-reduced-motion: no-preference) {

  /* 1. CONCEPTセクション上部（2026-10-26 NEWS があるときは NEWS 上部） */
  .concept__deco-flower,
  .news__deco-flower {
    animation: hibiscus-sway 2s linear infinite;
    transform-origin: bottom center;
    animation-delay: 0s;
  }

  /* 2. CONCEPTセクション右側 */
  .concept__right-flowers {
    animation: hibiscus-sway 2s linear infinite;
    transform-origin: bottom center;
    animation-delay: 0.2s;
  }

  /* 3. WHYセクション右下 */
  .why__deco-br {
    animation: hibiscus-sway 2s linear infinite;
    transform-origin: bottom center;
    animation-delay: 0.4s;
  }

  /* 4. MENUセクション左下（wrapperを揺らしてscaleX(-1)と干渉しない） */
  .menu-section__deco-bl {
    animation: hibiscus-sway 2s linear infinite;
    transform-origin: bottom center;
    animation-delay: 0.1s;
  }

  /* 5. SCHEDULEセクション右上 */
  .schedule__deco-tr {
    animation: hibiscus-sway 2s linear infinite;
    transform-origin: bottom center;
    animation-delay: 0.3s;
  }

  /* 6. MENUページ：カード右上 */
  .menu-pg-card-wrap__hibiscus {
    animation: hibiscus-sway 2s linear infinite;
    transform-origin: bottom center;
    animation-delay: 0.25s;
  }

  /* 7. MENUページ：Flavored Matcha 左 */
  .menu-pg-separator__flower {
    animation: hibiscus-sway-translate 2s linear infinite;
    transform-origin: bottom center;
    animation-delay: 0.1s;
  }

  /* 7b. MENUページ：偶数ブロック 最後カード右下 */
  .menu-pg-card-wrap__hibiscus-br {
    animation: hibiscus-sway 2s linear infinite;
    transform-origin: top right;
    animation-delay: 0.2s;
  }

  /* 8. MENUヒーロー：右上ハイビスカス */
  .menu-hero__deco-leaf-r {
    animation: hibiscus-sway 2s linear infinite;
    transform-origin: bottom center;
    animation-delay: 0.05s;
  }

  /* 9. MENUヒーロー：左ハイビスカス */
  .menu-hero__deco-leaf-l {
    animation: hibiscus-sway 2s linear infinite;
    transform-origin: bottom center;
    animation-delay: 0.3s;
  }

  /* 10. CONTACTページ：右上ハイビスカス */
  .contact-hero__hib--tr {
    animation: hibiscus-sway 2s linear infinite;
    transform-origin: bottom center;
    animation-delay: 0.15s;
  }

  /* 9. CONTACTページ：左下ハイビスカス */
  .contact-hero__hib--bl {
    animation: hibiscus-sway 2s linear infinite;
    transform-origin: bottom center;
    animation-delay: 0.35s;
  }

  /* 11・12. ABOUTページ：見出し左右の茶筅
     2026-08-19 揺れをなくす指定に変更したため削除。
     削除前:
       .about-intro__leaf--l   { animation: hibiscus-sway 2s linear infinite;
                                 transform-origin: bottom center; animation-delay: 0.1s; }
       .about-intro__leaf-wrap { animation: hibiscus-sway 2s linear infinite;
                                 transform-origin: bottom center; animation-delay: 0.3s; }
     ※ハイビスカス時代の名残で揺らしていたが、茶筅は静止させる。 */
}


/* =========================================
   RESPONSIVE — TABLET  (max-width: 1024px)
   ========================================= */
@media (max-width: 1024px) {

  /* ---- HEADER ----
     変更前はここで header:72px / logo:100px / nav-left:20px /
     btn:11.5vw×40px 等を固定値で上書きしていたが、1025px以上との
     段差とボタン内の文字あふれの原因になっていたため削除。
     現在はベース側の式が768〜1440pxを連続でカバーしている。
     ここでは角丸だけボタンの実サイズに合わせて補正する。 */
  .header__contact-btn {
    border-radius: 10px;
  }

  /* ---- NEWS ----
     2026-10-26 追加。見出しを上に積むレイアウトは上の @media (max-width: 1280px) 側。 */
  .news__inner {
    padding: 0 60px;
  }

  /* 2026-10-27 見出しの左位置揃え（ベース側の「見出し（茶筅）の左位置を NEWS に揃える」）を解除。
     1024px以下は全セクションの左パディングが同じなので、見出しは本文の左端に置く */
  .news__head {
    padding-left: 0;
  }

  .concept__deco-row,
  .why .section-head,
  .menu-section .section-head,
  .schedule .section-head,
  .instagram .section-head {
    margin-left: 0;
  }

  /* 文字はpx固定のため、PCの値のままだと768px幅でNEWS画像（vw）に対して
     「お知らせ」が大きすぎ、タイトルも1件おきに折り返していた。一段小さくする */
  .news__head-sub {
    margin-top: 8px;
    font-size: 20px;
    line-height: 28px;
  }

  .news__item {
    grid-template-columns: 150px auto 1fr;
    padding: 22px 10px 8px;
  }

  .news__date {
    font-size: 22px;
    line-height: 30px;
  }

  .news__badge {
    min-width: 76px;
    height: 28px;
    margin-right: 20px;
    border-radius: 14px;
    font-size: 16px;
  }

  .news__title {
    font-size: 18px;
  }

  .news__note {
    font-size: 16px;
  }

  /* ---- CONCEPT ---- */
  .concept__inner {
    padding: 0 60px;
    gap: 32px;
  }

  .concept__left {
    width: 45vw;
  }

  .concept__img-card {
    width: 38vw;
    height: 26vw;
  }

  .concept__photo {
    width: calc(38vw - 36px);
    height: calc(26vw - 36px);
  }

  /* ---- WHY ---- */
  .why__inner {
    padding: 0 60px;
  }

  .why__card-text {
    font-size: 15px;
  }

  /* ---- MENU ---- */
  .menu-section__inner {
    padding: 0 60px;
  }

  .menu-card__name {
    font-size: 22px;
  }

  .menu-card__size {
    font-size: 18px;
  }

  /* ---- SCHEDULE ---- */
  .schedule__inner {
    padding: 0 60px;
  }

  .schedule__calendar {
    width: 42vw;
  }

  .schedule__calendar-img {
    width: 42vw;
    height: 42vw;
  }

  /* ---- INSTAGRAM ---- */
  .instagram__inner {
    padding: 0 60px;
  }

  /* ---- FOOTER ---- */
  .footer__inner {
    padding: 14vw 60px 24px;
    gap: 32px;
  }

  .footer__logo-illust {
    width: 10vw;
  }

  .footer__stamp {
    width: 3.5vw;
  }

  .footer__sns-icon {
    width: 3.7vw;
  }
}


/* =========================================
   RESPONSIVE — SP  (max-width: 767px)
   ========================================= */
@media (max-width: 767px) {

  /* ---- HEADER ---- */
  .header {
    height: 56px;
  }

  /* SP ではナビを非表示（WordPress 化時にハンバーガーで実装予定） */
  .header__nav-left,
  .header__nav-right,
  .header__nav-about,
  .header__contact-btn {
    display: none;
  }

  .header__logo-link {
    top: 6px;
    width: 72px;
    height: 72px;
  }

  .header__logo-img {
    width: 48px;
  }

  /* ---- SECTION DIVIDER ---- */
  hr.section-divider {
    margin: 0 24px;
    width: calc(100% - 48px);
  }

  /* ---- SECTION HEAD 共通 ---- */
  .section-head__leaf {
    width: 20px;
    height: 36px;
  }

  .why .section-head__text-img        { width: 54vw; }
  .menu-section .section-head__text-img { width: 48vw; }
  .schedule .section-head__text-img   { width: 42vw; }
  .instagram .section-head__text-img  { height: 28px; }

  /* ---- ボタン ---- */
  .btn--green {
    height: 48px;
    min-width: 160px;
    font-size: 16px;
    border-radius: 12px;
  }

  .btn--green-large {
    height: 56px;
    min-width: 220px;
    font-size: 18px;
    border-radius: 12px;
  }

  .btn--about {
    width: 200px;
    height: 52px;
    border-radius: 12px;
    margin: 0 auto;
  }

  .btn--about__label { font-size: 20px; }
  .btn--about__sub   { font-size: 11px; }

  /* ---- HERO ---- */
  /* ---- 2026-08-23 SPのファーストビューの高さを見直し ----
     【変更前】height: 130vw
       背景写真は 1389x1132（縦横比 0.815）。object-fit:cover なので
       heroが写真の比率より縦長だと左右が切り取られる。130vwでは
       390px時に左右116pxずつ切れ、トラックの先端と右のヤシが隠れていた。
     【対応】写真が全幅で入る高さ＝ 81.5vw（＝1132/1389）を基本にする。
       ただしSPは中のコンテンツ（スタンプ・見出し・ボタン）の一部が
       固定pxのため、狭い幅では81.5vwに収まりきらず波と重なってしまう。
       そこで「写真基準の81.5vw」と「コンテンツが収まる高さ」の
       大きい方を採る。内訳:
         スタンプ上余白26 + 下余白4 + タグライン14 + ボタン上余白18
         + ボタン48 + 波32 + 余裕2  = 144px（固定分）
         スタンプ20vw + 見出し20.37vw(=76vw x 141/526) = 40.37vw（可変分）
       「波32」は波の山（クリームの最上部）がhero下端から何px上に来るか。
       2026-08-23 にSPの波を細かく（振幅33.3→16px）したため 72→32 に減った。
       これにより360px以上で写真が全幅表示される。 */
  .hero {
    height: max(81.5vw, calc(40.37vw + 144px));
  }

  /* 波canvasはSPで高さ34px（PCは170px）。
     波は canvas の中央を基準に上下±振幅で描かれるため、
     谷の位置 = canvas上端 + 高さ/2 + 振幅。
     SP（高さ34・振幅16）: 谷 = 17 + 16 = 33 → bottom:-1px のとき
     ちょうど hero 下端に谷が来る。山は hero 下端の32px上。
     2026-08-23 変更前は 高さ72・振幅33.3 で、谷69.3・山2.7だった。 */
  /* 2026-08-20 変更前は bottom: 0（canvas下端＝hero下端＝写真下端が一致）。
     3つの境界が同じ小数px位置に重なるため、写真の最下行が半透明に
     描かれて細い線に見えていた。1px下にずらし、canvasの不透明な
     クリームで写真の下端を確実に覆う。 */
  .hero__wave-canvas {
    bottom: -1px;
  }

  .hero__overlay {
    width: 84vw;
  }

  /* 2026-08-23 heroを低くしたぶん、上下の余白を詰める
     （変更前: margin-top 48px / margin-bottom 8px）
     ヘッダーのロゴ円の下端がhero上端から22pxなので、26pxで4pxの隙間を確保。 */
  .hero__stamp {
    margin-top: 26px;
    width: 20vw;
    margin-bottom: 4px;
  }

  .hero__stamp-img {
    width: 20vw;
  }

  .hero__headline {
    width: 76vw;
  }

  .hero__headline-img {
    width: 76vw;
  }

  /* 2026-08-22 SPもベース側の max(2px, 0.2vw) に統一（変更前: -6px）。
     SPでも実測で3.8px重なっていたため。 */

  /* ---- 2026-08-23 SPのファーストビューのボタンを小さくする ----
     heroを低くしたことでボタンが相対的に大きく見え、波との余白も
     詰まっていたため、SPのFVボタンだけ一回り小さくする。
     【変更前】.btn--green の SP値をそのまま使用
       高さ48px / 最小幅160px / 文字16px / 左右余白24px / 上余白18px
     【変更後】高さ40px / 最小幅120px / 文字15px / 左右余白18px / 上余白14px
       文言も「メニューを見る」→「メニュー」に短縮（.hero__btn-suffix を非表示）
     これでボタンの高さが8px減り、波までの余白がその分広がる。 */
  .hero__btn {
    margin-top: 14px;
    height: 40px;
    min-width: 120px;
    padding: 0 18px;
    font-size: 15px;
    gap: 8px;
  }

  .hero__btn-suffix {
    display: none;
  }

  .hero__btn .btn__arrow {
    font-size: 18px;
  }

  .hero__deco-flowers {
    width: 26vw;
    top: 40px;
  }

  /* ---- NEWS ----
     2026-10-26 追加。SPデザインはFigmaに無いため、PCの要素をそのまま縦に積んだ。
     1行目に「日付＋ラベル」、2行目に「タイトル」（2026-10-26 依頼者了承）。
     上余白は SP の CONCEPT の茶筅位置（hero下端から 40px + 16px）に揃えた。 */
  .news {
    padding: 57px 0 40px;
  }

  .news__inner {
    gap: 20px;
    padding: 0 24px;
  }

  .news__head {
    gap: 8px;
  }

  .news__head-leaf {
    width: 20px;
    height: 36px;
  }

  /* 他の見出し画像のSP幅（WHY 54vw / MENU 48vw / SCHEDULE 42vw）と同じ縮尺 */
  .news__head-img {
    width: 20vw;
  }

  /* NEWS画像（高さ 20vw × 42/150 = 5.6vw）を茶筅（36px）の上下中央に */
  .news__head-text {
    padding-top: calc(18px - 2.8vw);
  }

  .news__head-sub {
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
  }

  .news__item {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "date  badge"
      "title title";
    justify-items: start;
    gap: 6px 12px;
    padding: 14px 4px 12px;
  }

  .news__item:first-child {
    padding-top: 0;
  }

  .news__date {
    grid-area: date;
    font-size: 16px;
    line-height: 24px;
  }

  .news__badge {
    grid-area: badge;
    min-width: 56px;
    height: 22px;
    padding: 0 8px;
    margin-right: 0;
    border-radius: 11px;
    font-size: 12px;
  }

  .news__badge--none {
    display: none;
  }

  .news__title {
    grid-area: title;
    font-size: 15px;
    line-height: 1.6;
  }

  .news__cta {
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
  }

  .news__note {
    font-size: 13px;
    text-align: center;
  }

  .btn--news {
    height: 52px;
    padding: 0 18px 0 22px;
    border-radius: 12px;
    font-size: 17px;
  }

  .btn--news__icon {
    width: 26px;
    height: 26px;
  }

  .btn--news .btn__arrow {
    margin-left: 10px;
    font-size: 20px;
  }

  /* 区切り線からの余白を、SPの他セクション（WHY: 40px）に揃える
     （24px + .concept__left の padding-top 16px。変更前: 40px） */
  .news ~ .concept {
    padding-top: 24px;
  }

  /* ---- CONCEPT ---- */
  .concept {
    padding: 40px 0 48px;
  }

  .concept__inner {
    flex-direction: column;
    padding: 0 24px;
    gap: 28px;
  }

  .concept__left {
    width: 100%;
    padding-top: 16px;
  }

  /* 2026-10-26 .news__deco-flower を追加 */
  .concept__deco-flower,
  .news__deco-flower {
    left: 16px;
    top: -28px;
    width: 52px;
    height: 52px;
  }

  .concept__deco-row {
    margin-bottom: 14px;
  }

  .concept__deco-chasen {
    width: 20px;
    height: 36px;
  }

  .concept__deco-concept-text {
    width: 36vw;
    height: auto;
  }

  .concept__deco-bowl {
    width: 30px;
    height: 20px;
  }

  .concept__heading {
    font-size: 21px;
    margin-bottom: 16px;
  }

  .concept__body {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 28px;
  }

  .concept__right {
    width: 100%;
  }

  .concept__img-card {
    width: 100%;
    height: 58vw;
    border-radius: 20px;
  }

  .concept__photo {
    width: calc(100% - 32px);
    height: calc(58vw - 32px);
    border-radius: 20px;
    top: 16px;
    left: 16px;
  }

  .concept__right-flowers {
    bottom: -24px;
    right: -12px;
    width: 52px;
  }

  /* ---- WHY ---- */
  .why {
    padding: 40px 0 56px;
  }

  .why__inner {
    padding: 0 24px;
  }

  .why__badges {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;    /* 2026-08-22 並び替えに伴い追加 */
    margin-bottom: 24px;
  }

  .badge {
    height: 36px;
    font-size: 16px;
    padding: 0 14px;
    border-radius: 18px;
  }

  .why__heading-wrap {
    margin-bottom: 24px;
  }

  .why__title {
    font-size: 20px;
  }

  .why__cards {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .why__card {
    min-height: unset;
    border-radius: 20px;
    width: 100%;
    max-width: 480px;
  }

  .why__card-img-wrap {
    padding: 16px 20px 0;
  }

  .why__card-title {
    font-size: 18px;
  }

  .why__card-text {
    font-size: 14px;
  }

  .why__deco-br {
    display: none;
  }

  /* ---- MENU ---- */
  .menu-section {
    padding: 40px 0 56px;
  }

  .menu-section__inner {
    padding: 0 24px;
  }

  .menu-section__title {
    font-size: 20px;
  }

  .menu-section__cards {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
    align-items: center;
  }

  .menu-card {
    border-radius: 20px;
    padding: 24px 20px 20px;
    width: 100%;
    max-width: 480px;
  }

  .menu-card__img-wrap {
    width: 56vw;
    height: 56vw;
    border-radius: 20px;
  }

  .menu-card__name {
    font-size: 22px;
  }

  .menu-card__size {
    font-size: 16px;
  }

  .menu-card__desc {
    font-size: 14px;
  }

  .menu-section__deco-bl {
    display: none;
  }

  /* ---- SCHEDULE ---- */
  .schedule {
    padding: 40px 0 56px;
  }

  .schedule__inner {
    padding: 0 24px;
  }

  .schedule__title {
    font-size: 20px;
  }

  .schedule__box {
    padding: 24px 20px 36px;
    border-radius: 20px;
    gap: 20px;
  }

  .schedule__content {
    flex-direction: column;
    gap: 20px;
  }

  .schedule__calendar {
    width: 100%;
  }

  .schedule__calendar-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .schedule__vline {
    display: none;
  }

  .schedule__map-area {
    width: 100%;
  }

  .schedule__map-img {
    height: 52vw;
  }

  .schedule__addr-icon {
    width: 22px;
    height: 22px;
  }

  .schedule__access-title {
    font-size: 14px;
  }

  .schedule__access-body {
    font-size: 12px;
  }

  .schedule__deco-tr,
  .schedule__shopcard-deco {
    display: none;
  }

  /* ---- INSTAGRAM ---- */
  .instagram {
    padding: 40px 0 56px;
  }

  .instagram__inner {
    padding: 0 24px;
  }

  .instagram__title {
    font-size: 22px;
  }

  .instagram__icon {
    width: 26px;
    height: 26px;
  }

  .instagram__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
  }

  .instagram__item {
    height: 44vw;
    border-radius: 16px;
  }

  /* 2026-08-29 プラグイン出力も同じ 2列 / 12px / 44vw に揃える。
     プラグイン自身は 640px以下で2列・480px以下で1列にする指定を持っているが、
     本サイトのSPは767px以下で2列固定なので、ここで上書きする。 */
  #sb_instagram #sbi_images {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  #sb_instagram .sbi_photo {
    height: 44vw !important;
    border-radius: 16px;
  }

  .instagram__cta {
    margin-top: 28px;
  }

  /* ---- FOOTER ---- */
  .footer__inner {
    flex-direction: column;
    align-items: center;
    padding: 14vw 24px 20px;
    gap: 24px;
  }

  .footer__left {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .footer__logo-illust {
    width: 80px;
  }

  .footer__desc {
    text-align: center;
    font-size: 13px;
  }

  .footer__nav {
    align-items: center;
  }

  .footer__right {
    align-self: center;
  }

  .footer__stamp {
    width: 48px;
  }

  .footer__sns-icon {
    width: 48px;
  }

  .footer__copy {
    font-size: 12px;
    padding-bottom: 20px;
  }
}

/* ---- 2026-08-23 FVのボタンとキャッチコピーの間隔（450〜767px）----
   【変更前】767px以下は一律 margin-top: 14px。
     450px以下では画面が狭くバランスが取れているが、
     450pxを超えるとFV自体が大きくなるのに間隔が14pxのままで詰まって見える。
     さらに768pxでベース値 min(88px, 6.111vw)=46.9px に跳ね上がり、
     767px→768px で 14px→47px の段差ができていた。
   【変更後】450pxで14px、767pxで46.9pxになる一次式にして、
     450pxの境目でも768pxの境目でも値が連続するようにする。
       margin = 14 + (幅 - 450) × (46.93 - 14) / (767 - 450)
              = 幅 × 0.10388 - 32.75
     実測: 450px→14.0 / 500px→19.2 / 600px→29.6 / 700px→40.0 / 767px→46.9
   ボタン下端からhero下端までは450pxで84px、767pxで214pxあるので、
   間隔を広げても波のあしらいに近づきすぎることはない。 */
@media (min-width: 450px) and (max-width: 767px) {
  .hero__btn {
    margin-top: calc(10.388vw - 32.75px);
  }
}





/* =========================================
   HAMBURGER BUTTON  (SP のみ表示)
   ========================================= */
.hamburger-btn {
  display: none;
}

@media (max-width: 767px) {
  .hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 150;
  }

  .hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #6f8f3a;
    border-radius: 1px;
  }
}


/* =========================================
   SP NAVIGATION MODAL
   ========================================= */
.sp-nav-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  background-color: #6f8f3a;
  display: flex;
  flex-direction: column;
  padding: 72px 44px 56px;
  overflow-y: auto;
  /* 非表示状態 */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.sp-nav-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* 閉じるボタン（×） */
.sp-nav-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-nav-modal__close span {
  position: absolute;
  width: 22px;
  height: 2px;
  background-color: #fdfced;
  border-radius: 1px;
}

.sp-nav-modal__close span:first-child { transform: rotate(45deg); }
.sp-nav-modal__close span:last-child  { transform: rotate(-45deg); }

/* ナビ一覧 */
.sp-nav-modal__nav {
  flex: 1;
  align-self: center; /* ブロック全体を横方向に中央寄せ */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* 各アイテムの左端を揃える */
  /* 2026-08-28 項目が4→5に増えたことによる高さの再配分。
     変更前: gap: 28px（4項目時）
     変更前の実測: 390px幅で 1項目 65px（英字30 + gap14 + 日本語21）、
     項目群の高さ = 65*4 + 28*3 = 344px。
     5項目のまま28pxを維持すると 65*5 + 28*4 = 437px となり、
     モーダル全体の必要高が 729px（padding72+56 / ロゴ40+124）になる。
     iPhone 8 Plus 等の 736px 端末で残り7pxしかなく下部ロゴが接触するため、
     24px に詰めて必要高を 705px に戻した（余裕31px）。 */
  gap: 24px;
}

.sp-nav-modal__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 英字は画像（余白なしで切り出し済み）のため、テキスト実装時に
     line-height が作っていた下側の空き分をここで補う。
     変更前: 3px（テキスト実装時） → 4px → 14px（画像実装） */
  gap: 14px;
  color: #fdfced;
  text-decoration: none;
}

.sp-nav-modal__item:active {
  opacity: 0.7;
}

/* ---- 2026-08-19 SPナビのサイズ調整 ----------------------------
   【変更前】
     .sp-nav-modal__en  font-size: 52px（固定）
     .sp-nav-modal__ja  font-size: 14px
     .sp-nav-modal__item gap: 3px
   【変更前に確認した問題】
     1. 52px固定のため画面幅に追随せず、最長語「Schedule」の占有率が
        430px:53% / 390px:58% / 360px:63% / 320px:71% と大きく変動していた
     2. 320x568 で下部ロゴが画面外へ62pxはみ出していた
        （360x640 でも余裕10pxしかなく、実機では見切れる可能性が高い）
     3. 英字52px : 日本語14px = 3.7倍 と差が開きすぎ、
        実際に読まれる日本語がキャプションのように見えていた
   【変更方針】
     390px を基準に英字をワンサイズ下げ（52px → 44px）、
     さらに vw で可変化して小さい端末でも比率を保つ。
     11.28vw = 44 / 390。下限34px / 上限44px。
     日本語は15pxに上げ、比を 2.9倍に詰めた。
   ------------------------------------------------------------- */
/* ---- 2026-08-19 英字を画像実装へ --------------------------------
   ヘッダー・フッターの英字が画像なのに対し、ここだけテキスト実装
   （Abril Fatface）だったため、サイト全体の字形に揃えた。
   【変更前】
     マークアップ: <span class="sp-nav-modal__en">Menu</span>
     CSS: font-family: 'Abril Fatface', 'Noto Serif JP', serif;
          font-size: clamp(34px, 11.28vw, 44px);
          line-height: 1.05;
          letter-spacing: -0.01em;
   【画像の作り方】※再生成が必要になった場合の手順
     フッターの footer_nav_*.png はクリーム色だが文字高44px程度しかなく、
     この表示サイズ(30px)では高DPI端末でぼやける。そのため
     images/top/header/nav_*.svg に埋め込まれた4096x2304のラスター
     （文字高343-344px・緑#6F8F3A）を切り出し、アルファを保ったまま
     RGBをクリーム#FDFCEDに置換、文字高120pxに縮小して
     images/common/spnav/spnav_*.png として書き出した。
     4枚とも文字高が揃っているので、height指定だけで大きさが揃う。
   【サイズ】
     変更前のテキスト44px時の「Schedule」の幅192pxに合わせ、
     画像の文字高を30pxとした（実測191px）。
     可変幅の指定はテキスト時の比率をそのまま踏襲している。
   ------------------------------------------------------------- */
.sp-nav-modal__en {
  display: block;
  height: clamp(23.18px, 7.69vw, 30px);
  width: auto;
}

.sp-nav-modal__ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #fdfced;
  letter-spacing: 0.05em;
}

/* 下部ロゴ */
.sp-nav-modal__logo {
  display: flex;
  justify-content: center;
  /* 2026-08-28 項目が4→5に増えた分、ナビとロゴの間隔も詰めた。
     変更前: padding-top: 40px */
  padding-top: 32px;
  flex-shrink: 0;
}

/* 2026-08-23 ロゴをトップページへのリンク化。
   丸の見た目は .sp-nav-modal__logo-circle のままにしたいので、
   a はレイアウトに影響しないブロックとしてかぶせるだけにする。
   ホバーの薄まりはフッターのアイコン（.footer__icon-link）と同じ仕様。 */
.sp-nav-modal__logo-link {
  display: block;
  border-radius: 50%;
  line-height: 0;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sp-nav-modal__logo-link:hover {
    opacity: 0.8;
  }
}

.sp-nav-modal__logo-circle {
  width: 124px;
  height: 124px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-nav-modal__logo-circle img {
  width: 86px;
  height: auto;
  object-fit: contain;
}

/* 画面高が低い端末（iPhone SE 等）では余白とロゴを詰めて
   下部ロゴが画面外に出ないようにする。
   変更前はこの指定がなく、320x568 で62pxはみ出していた。
   変更前の値 → padding: 72px 44px 56px / nav gap: 28px /
                logo padding-top: 40px / logo-circle: 124px */
/* 2026-08-28 しきい値を 700px → 720px に変更。
   変更前(700px)のままだと、項目5つに増えた後のベース値の必要高 710px に対し
   viewport 701〜709px の範囲だけがベース値のまま収まらなくなるため、
   ベース値を使う範囲を必ず 720px 超に限定した。 */
@media (max-height: 720px) {
  .sp-nav-modal {
    padding: 56px 44px 40px;
  }

  .sp-nav-modal__nav {
    gap: 20px;
  }

  .sp-nav-modal__logo {
    padding-top: 24px;
  }

  .sp-nav-modal__logo-circle {
    width: 100px;
    height: 100px;
  }

  .sp-nav-modal__logo-circle img {
    width: 70px;
  }
}

/* 2026-08-28 追加。項目が4→5に増えたことで、上の max-height:700px だけでは
   画面高が特に低い端末を吸収しきれなくなったため、もう一段詰める指定を足した。
   【変更前（この指定がなかった時）の実測・計算】
     max-height:700px の値（padding 56/40・nav gap 20px・item gap 14px・
     ロゴ padding-top 24px・丸100px）のまま5項目にすると必要高は
       320x568 → 598px（28pxはみ出す）
       390x599 → 625px（26pxはみ出す ※実測 scrollHeight 625 / clientHeight 599）
     となり、下部ロゴが画面外に出てモーダルがスクロールしていた。
   【変更後】
     320x568 → 518px（余裕50px） / 390x599 → 545px（余裕54px）
   ロゴの丸は max-height:720px の100pxをそのまま継承する（これ以上は縮めない）。
   667px 端末は max-height:720px の値（必要高 619px）のままで収まるので触っていない。
   【しきい値の決め方】各ブランチの必要高（390px幅での実測値）は
     ベース値 710px / max-height:720px 630px / この指定 550px。
   次のブランチの必要高を必ず下回るよう 720px・660px を採用し、
   どの画面高でもスクロールが出ない状態にした。 */
@media (max-height: 660px) {
  .sp-nav-modal {
    padding: 40px 44px 28px;
  }

  .sp-nav-modal__nav {
    gap: 14px;
  }

  .sp-nav-modal__item {
    gap: 10px;
  }

  .sp-nav-modal__logo {
    padding-top: 16px;
  }
}

/* =========================================
   MENU PAGE
   ========================================= */

/* ---- Menu Hero ---- */
.menu-hero {
  position: relative;
  width: 100%;
  height: 47.292vw; /* 681/1440 */
  overflow: visible; /* 茶碗・ロゴマークが下にはみ出して見えるよう */
  background-color: #fdfced;
}

/* 日射しの背景 (opacity 0.3)
   新画像(2880×1104)は放射パターンが端から端まで広がっている */
.menu-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/menu/hero_bg.png');
  background-size: cover;
  background-position: center bottom;
  z-index: 0;
  pointer-events: none;
}

/* PINEWAVE MATCHA MENU 見出し - 全フレーム画像からクロップ
   Figma: w=672px h=157px at top=297px, centered
   Image(2160×1215): displayed 1031×582px, offset(-192px,-154px) */
.menu-hero__heading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 20.625vw;        /* 297/1440 */
  width: 46.667vw;      /* 672/1440 */
  height: 10.903vw;     /* 157/1440 */
  background-image: url('../images/menu/menu_heading.png');
  /* 画像を文字だけに切り詰めたため、拡大＋オフセットでの切り出しは不要になった。
     変更前: background-size: 71.597vw 40.417vw / position: -13.333vw -10.694vw */
  background-size: 46.439vw auto;
  background-position: 0.058vw 0.291vw;
  background-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* 右上リーフ装飾 - Pinewave73 at left:1083.5px top:150px size:173×170px
   Image(2880×1620): displayed 738×414px, offset(-332px,-107px) */
.menu-hero__deco-leaf-r {
  position: absolute;
  left: 75.243vw;       /* 1083.5/1440 */
  top: 10.417vw;        /* 150/1440 */
  width: 12.014vw;      /* 173/1440 */
  height: 11.806vw;     /* 170/1440 */
  background-image: url('../images/menu/deco_leaf.png');
  background-size: 51.25vw 28.75vw;     /* 738/1440 × 414/1440 */
  background-position: -23.056vw -7.431vw; /* -332/1440 × -107/1440 */
  background-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* 左下リーフ装飾 - Pinewave73 at left:219px top:405px size:83×82px
   Image(2880×1620): displayed 354×200px, offset(-159px,-52px) */
.menu-hero__deco-leaf-l {
  position: absolute;
  left: 15.208vw;       /* 219/1440 */
  top: 28.125vw;        /* 405/1440 */
  width: 5.764vw;       /* 83/1440 */
  height: 5.694vw;      /* 82/1440 */
  background-image: url('../images/menu/deco_leaf.png');
  background-size: 24.583vw 13.889vw;   /* 354/1440 × 200/1440 */
  background-position: -11.042vw -3.611vw; /* -159/1440 × -52/1440 */
  background-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* 茶碗イラスト - Pinewave771 at left:945px top:517px size:321×255px
   Image(1920×1080): displayed 1213×683px, offset(-457px,-165px) */
.menu-hero__deco-teabowl {
  position: absolute;
  left: 65.625vw;       /* 945/1440 */
  top: 35.903vw;        /* 517/1440 */
  width: 22.292vw;      /* 321/1440 */
  height: 17.708vw;     /* 255/1440 */
  background-image: url('../images/menu/deco_teabowl.png');
  background-size: 84.236vw 47.431vw;   /* 1213/1440 × 683/1440 */
  background-position: -31.736vw -11.458vw; /* -457/1440 × -165/1440 */
  background-repeat: no-repeat;
  z-index: 6;           /* フィルター(5)より上に出す */
  pointer-events: none;
}

/* 花装飾（回転）- Pinewave781 at left:938px top:480px size:91×125px rotate:-13.59deg
   Image(1920×1080): displayed 533×298px, offset(-245px,-94px) */
.menu-hero__deco-flower {
  position: absolute;
  left: 65.139vw;       /* 938/1440 */
  top: 33.333vw;        /* 480/1440 */
  width: 6.319vw;       /* 91/1440 */
  height: 8.681vw;      /* 125/1440 */
  background-image: url('../images/menu/deco_flower.png');
  background-size: 36.993vw 20.694vw;   /* 533/1440 × 298/1440 */
  background-position: -17.014vw -6.528vw; /* -245/1440 × -94/1440 */
  background-repeat: no-repeat;
  transform: rotate(-13.59deg);
  z-index: 7;           /* 茶碗(6)よりさらに前に */
  pointer-events: none;
}

/* ヒーロー下部の波形
   画像(4096×2304)の波コンテンツは最下部に集中。
   background-imageでbottom配置してコンテンツ部分だけを表示 */
.menu-hero__wave {
  position: relative;
  width: 100%;
  height: 19.93vw;        /* 画像 2880×574px → 1440px幅で287px = 19.93vw */
  margin-top: -5.5vw;    /* 波のカーブをヒーロー下端に合わせる */
  margin-bottom: -12vw;    /* タブの位置を保つため余分なクリーム領域を吸収 */
  background-image: url('../images/menu/hero_wave_bottom.png');
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 2;            /* タブより下のレイヤー */
  pointer-events: none;
}

/* ---- Filter Tabs ---- */
.is-hidden { display: none !important; }

.menu-pg-section,
hr.section-divider {
  transition: opacity 0.6s ease-in;
}

.menu-filter {
  position: relative;
  z-index: 5;
  background-color: #fdfced;
  padding: 32px 0 40px;
}

/* Figma: タブは左端146px(10.139vw)から開始、中央寄せではない
   ---- 2026-08-19 1440px超でタブだけ取り残される問題を修正 ----
   【変更前】max-width / margin の指定がなく、常に画面の左端から146pxの位置に
     タブが並んでいた。一方その下の .menu-pg-section__inner は
     max-width:1440px + margin:0 auto で中央寄せになるため、
     画面が広いほど両者が離れていった（実測・左端の位置）:
       1440px : タブ146px / セクション120px（差26px＝デザインどおり）
       1920px : タブ146px / セクション360px（差214px）
       2560px : タブ146px / セクション680px（差534px）
   【対応】セクションと同じ外枠（max-width:1440px + 中央寄せ）を持たせる。
     パディングはそのままなので、どの幅でもデザインどおりの26pxのずれを保つ。
     1440px以下は外枠が効かないので表示は従来と完全に同じ。 */
.menu-filter__inner {
  display: flex;
  gap: 17px;            /* Figma実測ギャップ */
  padding: 0 min(10.139vw, 146px); /* 1440px以上では146px固定 */
  max-width: 1440px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* ---- 2026-08-23 SP専用のあしらい（茶碗＋茶筅＋波）----
   SPではファーストビューを低くするため、FV内の .menu-hero__deco-teabowl が
   画面外に出てしまう。その代わりにメニューバッジの右下へ置き直す要素。
   PC・タブレットでは使わないので非表示にしておく。 */
.menu-filter__deco {
  display: none;
}

/* Figma: h=44px border=2px border-radius=30px font-semibold 20px */
.menu-filter__tab {
  height: 44px;
  padding: 0 14px;
  border: 2px solid #6f8f3a;
  border-radius: 30px;
  background-color: #fdfced;
  color: #000;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  line-height: 1;
  white-space: nowrap;
}

.menu-filter__tab.is-active,
.menu-filter__tab:hover {
  background-color: #6f8f3a;
  color: #fdfced;
}

/* ---- Menu Page Sections ---- */
.menu-pg-section {
  padding: 48px 0 64px;
}

.menu-pg-section__inner {
  padding: 0 min(8.333vw, 120px);  /* 1440px以上では120px固定 */
  max-width: 1440px;
  margin: 0 auto;
}

.menu-pg-section__head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

/* セクションリーフアイコン - Pinewave2410 at 37.896×67.873px
   Image(2880×1620): displayed 271×153px, offset(-103px,-41px) */
.menu-pg-section__leaf {
  flex-shrink: 0;
  width: 2.632vw;       /* 37.896/1440 */
  height: 4.714vw;      /* 67.873/1440 */
  background-image: url('../images/menu/section_leaf.png');
  background-size: 18.819vw 10.625vw;   /* 271/1440 × 153/1440 */
  background-position: -7.153vw -2.847vw; /* -103/1440 × -41/1440 */
  background-repeat: no-repeat;
}

/* セクション見出し画像 - 各セクション別クロップ */
.menu-pg-section__heading-img {
  flex-shrink: 0;
  background-repeat: no-repeat;
}

/* DRINK: Pinewave711 size=214×60px
   Image(2160×1215): displayed 759×426px, offset(-282px,-163px) */
#drink .menu-pg-section__heading-img {
  width: 14.861vw;      /* 214/1440 */
  height: 4.167vw;      /* 60/1440 */
  background-image: url('../images/menu/heading_drink.png');
  /* 変更前: background-size: 52.708vw 29.583vw / position: -19.583vw -11.319vw */
  background-size: 14.544vw auto;
  background-position: 0.085vw 0.485vw;
}

/* ALCOHOL: Pinewave751 size=332×46px
   Image(2160×1215): displayed 951×532px, offset(-319px,-147px) */
#alcohol .menu-pg-section__heading-img {
  width: 23.056vw;      /* 332/1440 */
  height: 3.194vw;      /* 46/1440 */
  background-image: url('../images/menu/heading_alcohol.png');
  /* 変更前: background-size: 66.042vw 36.944vw / position: -22.153vw -10.208vw */
  background-size: 22.381vw auto;
  background-position: 0.442vw 0.005vw;
}

/* SEASONAL: Pinewave911 size=361×57px
   Image(1920×1080): displayed 724×410px, offset(-200px,-113px) */
#seasonal .menu-pg-section__heading-img {
  width: 25.069vw;      /* 361/1440 */
  height: 3.958vw;      /* 57/1440 */
  background-image: url('../images/menu/heading_seasonal.png');
  /* 変更前: background-size: 50.278vw 28.472vw / position: -13.889vw -7.847vw */
  background-size: 24.327vw auto;
  background-position: 0.383vw 0.305vw;
}

/* 新規カテゴリ追加時のフォールバック
   ※ heading画像がない場合は非表示にして title だけ表示 */
.menu-pg-section:not(#drink):not(#alcohol):not(#seasonal) .menu-pg-section__heading-img {
  display: none;
}

/* Figma: font-semibold 32px text-black */
.menu-pg-section__title {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 32px;
  color: #000;
}

/* ---- Subsections & Separator ---- */
.menu-pg-subsection + .menu-pg-subsection {
  margin-top: 85px;
}

/* カード装飾ラッパー（ハイビスカスを card 外に浮かせる） */
.menu-pg-card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

.menu-pg-card-wrap > .menu-pg-card {
  flex: 1;
}

/* ---- 2026-08-20 PREMIUMバッジ ---------------------------------------
   管理画面「メニュー詳細」の PREMIUM表示 にチェックを入れたメニューだけ、
   カード左上に重ねて表示する。
   .menu-pg-card は overflow:hidden（写真を角丸に切り抜くため）なので、
   カードの外にはみ出すバッジは .menu-pg-card-wrap 側に置いている。
   【デザイン実測】2026-08-20 高解像度のカンプで山崎・白州の2枚を計測。
     文字（緑の輪郭）の実寸から元画像の縮尺を逆算し、キャンバス寸法に換算した。
       カード幅        624px / 622px
       バッジのキャンバス幅 195px / 194px → カード幅の 31.3% / 31.2%
       カード左端より      49px 左      → カード幅の 7.9% / 8.0%
       カード上端より      33px / 28px 上 → バッジ高の 35.9% / 30.5%
     （上方向は2枚で少しばらついているので中間の34%を採用）
   top は % だとカードの高さ基準になり、カードごとに高さが変わって
   ずれてしまうため、translateY（バッジ自身の高さ基準）で上げている。
   ※ 初回は解像度の低いカンプで測ったため 幅27.6% / 左5.1% / 上36% としており、
     デザインより約13%小さかった。 */
.menu-pg-card-wrap__premium {
  position: absolute;
  z-index: 3;
  top: 0;
  left: -7.8%;
  width: 31.3%;
  height: auto;
  transform: translateY(-34%);
  pointer-events: none;
}

/* ---- 2026-08-20 カード脇のハイビスカスをカード基準の比率に変更 ----
   【変更前】
     __hibiscus     { top:-40px; right:-24px; width:5.694vw; }
     __hibiscus-br  { bottom:-30px; right:-20px; width:5.5vw; }
   【問題】大きさが vw（画面幅基準）なのに対し、カードからの離れ方は px 固定。
     SPは1カラムでカードが画面幅いっぱいまで広がるため、両者の関係が崩れていた。
       1440px : 花82px（カード幅の14.0%）／右24px・上40px 離れる
        768px : 花44px（カード幅の13.9%）／右24px・上40px
        390px : 花22px（カード幅の 6.3%）／右24px・上40px
                → 花より離れる距離のほうが大きく、カードから完全に浮いていた
   【対応】大きさも離れ方も「カード幅に対する％」で指定し直す。
     ％のmarginは上下も含めて必ず「包含ブロックの幅」基準で解決されるので、
     どの画面幅でも1440px時と同じ見え方になる。
     transform ではなく margin を使うのは、この2つに揺れアニメーション
     （hibiscus-sway ＝ transform: rotate）が掛かっており、transform を
     使うと打ち消し合ってしまうため。 */
.menu-pg-card-wrap__hibiscus {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -6.83%;      /* -40px / カード幅586px */
  margin-right: -4.10%;    /* -24px / 586px */
  width: 14%;              /* 82px / 586px */
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.menu-pg-card-wrap__hibiscus-br {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: -5.12%;   /* -30px / 586px */
  margin-right: -3.41%;    /* -20px / 586px */
  width: 13.5%;            /* 79px / 586px */
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.menu-pg-separator {
  position: relative;
  text-align: center;
  margin-bottom: 32px;
}

.menu-pg-separator::before,
.menu-pg-separator::after {
  content: none;
}

.menu-pg-separator__flower {
  position: absolute;
  left: 0;
  top: 20px; /* separator上端から20px = 上下カードから均等60pxの中心 */
  /* 2026-08-20 変更前は width: 8.472vw（画面幅基準）。
     カード類と同じくコンテンツ幅に対する％に統一する（1440px時122pxで同値） */
  width: 10.17%;  /* 122px / コンテンツ幅1200px */
  height: auto;
  pointer-events: none;
  transform: translateY(-50%);
}

/* Figma: font-bold 30px text-black */
.menu-pg-separator__text {
  display: inline-block;
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #000;
  white-space: nowrap;
  border-top: 2.5px dotted #d97070;
  border-bottom: 2.5px dotted #d97070;
  padding: 8px 16px;
}

/* ---- Card Grid ---- */
/* Figma: column-gap=29px row-gap=24px */
/* 2026-08-20 カードの高さを揃える。
   【変更前】grid-auto-rows の指定がなく、各行が中の文章量に応じた高さになっていた
     （実測・自然な高さの範囲）
        390px : 107〜237px   768px : 260〜349px
       1024px : 168〜257px  1440px : 196〜278px
   grid-auto-rows: 1fr にすると、そのグリッド内の全カードが
   「一番高いカード」に揃う。高さを固定値で決め打ちしないので、
   管理画面で長い説明文を入れても文字が切れることはない。 */
.menu-pg-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  column-gap: 29px;
  row-gap: 24px;
}

/* カード: 通常=クリーム背景・黒テキスト、ホバー=緑背景・クリームテキスト */
.menu-pg-card {
  display: flex;
  min-height: 0;
  border: 3px solid #6f8f3a;
  border-radius: 40px;
  overflow: hidden;
  background-color: #fdfced;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}


/* Figma: photo wrap ≈ 179/585 = 30.6%
   position: relative + 写真をabsoluteにすることで
   写真のアスペクト比がカード高さに影響しない */
.menu-pg-card__photo-wrap {
  flex: 0 0 30.6%;
  position: relative;
  overflow: hidden;
}

.menu-pg-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-pos, center 48%);
  transform: scale(var(--photo-scale, 1.05));
  transform-origin: center center;
  transition: transform 0.25s ease;
  /* 推奨アップロードサイズ: 600×800px（3:4 縦長）でそのまま綺麗に表示されます */
}


.menu-pg-card__body {
  flex: 1;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}

/* Figma: font-bold 28px — px固定（1440px超でも拡大しない） */
.menu-pg-card__en {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #000;
  line-height: 1.2;
  transition: color 0.25s ease;
}


/* Figma: 21px for long English names */
.menu-pg-card__en--sm {
  font-size: 21px;
}

/* Figma: font-semibold 20px */
.menu-pg-card__ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #333;
  line-height: 1.35;
  transition: color 0.25s ease;
}


/* Figma: font-semibold 20px (same as ja) */
.menu-pg-card__size {
  font-weight: 600;
  font-size: 20px;
}

/* Figma: font-normal 16px — 省略なし・全文表示 */
.menu-pg-card__desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #444;
  line-height: 1.7;
  transition: color 0.25s ease;
}


/* ---- 2026-08-20 カードのホバー反転を768px以上限定にする ----
   【変更前】以下5つのルールがブレークポイントの外（＝全幅共通）にあった。
     .menu-pg-card:hover                       背景を緑・枠線を透明に
     .menu-pg-card:hover .menu-pg-card__photo  写真をさらに1.1倍
     .menu-pg-card:hover .menu-pg-card__en     文字をクリーム色に
     .menu-pg-card:hover .menu-pg-card__ja     同上
     .menu-pg-card:hover .menu-pg-card__desc   同上
   【問題】カードにリンクは付いていないのに、SPではタップで :hover が
     発火し、色が反転したまま残ってしまう。
   【対応】まとめてメディアクエリに入れ、条件を満たさない環境では
     一切適用しない。打ち消し用のルールを別に書くと通常時の色を
     二重管理することになるため、元のルール自体を囲む形にしている。
   【条件】2026-08-20 タブレットも除外し、マウス操作のPCだけに限定した。
     （変更前は min-width: 768px のみで、iPad等のタッチ端末では
       タップで反転したまま残る問題が残っていた）
     hover: hover  … ポインタを乗せた状態を維持できる端末
     pointer: fine … マウス／トラックパッドなど精密なポインタがある端末
     の2つを満たす場合だけ有効。タッチ端末は両方とも満たさない。
     pointer: fine を併記しているのは、一部のAndroid端末が
     hover: hover を誤って true と申告するため。 */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .menu-pg-card:hover {
    background-color: #6f8f3a;
    border-color: transparent;
  }

  .menu-pg-card:hover .menu-pg-card__photo {
    transform: scale(calc(var(--photo-scale, 1.05) + 0.1));
  }

  .menu-pg-card:hover .menu-pg-card__en,
  .menu-pg-card:hover .menu-pg-card__ja {
    color: #fdfced;
  }

  .menu-pg-card:hover .menu-pg-card__desc {
    color: rgba(253, 252, 237, 0.88);
  }
}

/* ---- Menu Page: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  .menu-hero {
    height: 56.25vw;
  }

  .menu-filter__inner {
    padding: 0 60px;
  }

  .menu-filter__tab {
    font-size: 16px;
    height: 40px;
  }

  .menu-pg-section__inner {
    padding: 0 60px;
  }

  .menu-pg-section__head {
    gap: 14px;
    margin-bottom: 28px;
  }

  .menu-pg-section__title {
    font-size: 24px;
  }

  .menu-pg-separator__text {
    font-size: 22px;
  }

  .menu-pg-cards {
    column-gap: 16px;
    row-gap: 16px;
  }

  /* Tablet: フォントを縮小して2カラムカードに収まるよう調整 */
  .menu-pg-card__en        { font-size: 22px; }
  .menu-pg-card__en--sm    { font-size: 17px; }
  .menu-pg-card__ja,
  .menu-pg-card__size      { font-size: 16px; }
  .menu-pg-card__desc      { font-size: 13px; }

}

/* ---- Menu Page: SP (≤ 767px) ---- */
@media (max-width: 767px) {
  /* ---- 2026-08-23 SPのファーストビューを低くする ----
     【変更前】height: 110vw
       日射しのイラストが縦に伸びて見えていた。
     【対応】74vw に下げて太陽が横広に見える構図にする。
       見出し・ハイビスカスの位置（top: 28vw / 8vw / 40vw）は
       vw指定なのでそのままで同じ見え方になる。
       FV下部にあった茶碗のあしらいは高さに収まらなくなるため、
       .menu-filter__deco としてバッジの右下に置き直す（下記）。 */
  .menu-hero {
    height: 74vw;
  }

  .menu-hero__heading {
    top: 28vw;
    width: 75vw;
    height: 17.52vw;
    /* 変更前: background-size: 115.24vw 65.04vw / position: -21.45vw -17.22vw */
    background-size: 74.746vw auto;
    background-position: 0.104vw 0.462vw;
  }

  .menu-hero__deco-leaf-r {
    left: 68vw;
    top: 8vw;
    width: 20vw;
    height: 19.6vw;
    background-size: 85.22vw 47.84vw;
    background-position: -38.36vw -12.38vw;
  }

  .menu-hero__deco-leaf-l {
    left: 4vw;
    top: 40vw;
    width: 9.6vw;
    height: 9.5vw;
    background-size: 40.93vw 23.15vw;
    background-position: -18.4vw -6.02vw;
  }

  /* 2026-08-23 FVを74vwに下げたことで収まらなくなったため非表示。
     代わりに .menu-filter__deco をバッジの右下に出す。
     （変更前は left:55vw / top:68vw / 幅37.13vw で表示していた） */
  .menu-hero__deco-teabowl,
  .menu-hero__deco-flower {
    display: none;
  }

  /* ---- SP専用あしらい：メニューバッジの右 ----
     2026-08-23 経緯
     (1) 当初は .menu-filter の下端を基準に絶対配置していたが、
         バッジが2行→1行になる幅（約447px）で位置が上がり
         「期間限定」バッジに重なった。幅も30vw固定で700px付近では過大。
     (2) そこで通常フローでバッジの「下」に置き、幅は min(30vw,128px) で頭打ちに。
         → 今度はバッジとの上余白（6px）が狭すぎ、
           逆に見出しまでの下余白（24+28=52px）が広すぎた。
     【現在の方針】
       ・下余白は .menu-filter の padding-bottom を 24px→8px に縮小
         （見出しまで 52px→36px）
       ・バッジ最終行の右に空きがある幅帯（〜446px / 580px〜）では
         margin-top:-36px（バッジ1行ぶん）で引き上げ、最終行の右へ横並びにする
         → 下記の別メディアクエリで指定
       ・最終行が画面幅いっぱいになる 447〜579px だけは横に置けないので
         下に置き、上余白を 6px→24px に広げて接触を避ける
     スプライトの切り出しは vw ではなく要素サイズに対する％で指定し、
     どの大きさでも同じ絵柄が出るようにしている。 */
  .menu-filter__deco {
    display: block;
    position: relative;
    /* 2026-08-23 「もう少し小さく」の要望で 30vw/128px → 26vw/110px（約14%縮小） */
    width: min(26vw, 110px);
    aspect-ratio: 30 / 23.83;
    margin: 24px 4vw 0 auto;
    pointer-events: none;
  }

  .menu-filter__deco-bowl {
    position: absolute;
    inset: 0;
    background-image: url('../images/menu/deco_teabowl.png');
    background-size: 378.07% 268%;
    background-position: 51.22% 38.54%;
    background-repeat: no-repeat;
  }

  .menu-filter__deco-flower {
    position: absolute;
    right: 71.33%;
    bottom: 60.83%;
    width: 28.33%;
    aspect-ratio: 8.5 / 11.69;
    background-image: url('../images/menu/deco_flower.png');
    background-size: 585.88% 238.24%;
    background-position: 55.47% 54.39%;
    background-repeat: no-repeat;
    transform: rotate(-13.59deg);
  }

  /* 2026-08-23 あしらいと「ドリンクメニュー」見出しの間が広すぎたため下余白を縮小。
     （変更前: padding: 20px 0 24px → 見出しまで 24+28=52px）
     　→ 8px に縮小して 36px
     　→ さらに詰める要望で 4px に。上余白 20px は波のあしらいとの
     　　重なり回避のため据え置き。 */
  .menu-filter {
    padding: 20px 0 4px;
  }

  /* 2026-08-23 バッジ直後のセクション（DRINK）だけ上余白を詰める。
     .menu-pg-section の padding-top は 28px だが、あしらい下端から
     見出しまでが 4+28=32px でまだ広いため、先頭セクションのみ 12px にして
     合計 16px にする。区切り線の下に続く2番目以降のセクションは 28px のまま。 */
  .menu-filter + .menu-pg-section {
    padding-top: 12px;
  }

  .menu-filter__inner {
    gap: 8px;
    padding: 0 20px;
  }

  .menu-filter__tab {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 18px;
  }

  .menu-pg-section {
    padding: 28px 0 36px;
  }

  /* 2026-08-20 変更前は padding: 0 20px。カードが画面幅いっぱいに
     見えてしまうため、ABOUTページのSP（コンテンツ幅86%）と同じ余白にそろえる。
     390px時: 左右20px → 27.3px、カード幅 350px → 335px */
  .menu-pg-section__inner {
    padding: 0 7%;
  }

  /* 2026-08-20 SPは1カラムでカードが画面端いっぱいまで広がるため、
     PCと同じ左7.8%（390px時27px）だとバッジが画面外にはみ出す。
     ページ左右余白は20px固定なのに % はカード幅（＝画面幅）に比例して
     増えてしまうので、はみ出し量を14pxで頭打ちにする。
     これで320〜767pxのどの幅でも画面左端から6px内側に収まる。 */
  .menu-pg-card-wrap__premium {
    left: max(-4%, -14px);
  }

  .menu-pg-section__head {
    gap: 8px;
    margin-bottom: 16px;
  }

  /* SP: 見出し要素を固定サイズで表示 */
  .menu-pg-section__leaf {
    width: 20px;
    height: 36px;
    background-size: 143px 81px;
    background-position: -54px -22px;
  }

  #drink .menu-pg-section__heading-img {
    width: 107px;
    height: 30px;
    /* 変更前: background-size: 379px 213px / position: -141px -81px */
    background-size: 105px auto;
    background-position: 0px 4px;
  }

  #alcohol .menu-pg-section__heading-img {
    width: 166px;
    height: 23px;
    /* 変更前: background-size: 475px 266px / position: -159px -73px */
    background-size: 161px auto;
    background-position: 4px 0px;
  }

  #seasonal .menu-pg-section__heading-img {
    width: 180px;
    height: 28px;
    /* 変更前: background-size: 362px 205px / position: -100px -56px */
    background-size: 175px auto;
    background-position: 3px 3px;
  }

  .menu-pg-section__title {
    font-size: 15px;
  }

  .menu-pg-separator {
    gap: 12px;
    margin-bottom: 16px;
  }

  .menu-pg-separator__text {
    font-size: 15px;
  }

  .menu-pg-subsection + .menu-pg-subsection {
    margin-top: 24px;
  }

  .menu-pg-cards {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 12px;
  }

  .menu-pg-card {
    height: auto;
    min-height: 26vw;
    border-radius: 5vw;
  }

  .menu-pg-card__photo-wrap {
    flex: 0 0 34%;
  }

  .menu-pg-card__body {
    padding: 12px 14px;
    gap: 2px;
  }

  .menu-pg-card__en {
    font-size: 15px;
  }

  .menu-pg-card__en--sm {
    font-size: 13px;
  }

  .menu-pg-card__ja,
  .menu-pg-card__size {
    font-size: 13px;
  }

  .menu-pg-card__desc {
    font-size: 11px;
  }
}

/* ---- 2026-08-23 SPあしらいをバッジ最終行の右へ引き上げる幅帯 ----
   バッジ最終行の右端（実測）と、あしらいに必要な幅（min(30vw,128px)+右余白4vw）の関係:
     320〜446px : 最終行は「アルコール/期間限定」または「期間限定」で右端 201px以下
                  → 右に十分な空きがあるので横に並べられる
     447〜579px : 4つが1行に並び右端が 427px 固定。
                  447pxでは右の空きが20pxしかなく、579pxでも
                  あしらい(110px)+右余白(4vw)を置くと間隔が20px未満
                  → 横並び不可（下に置く）
     580px〜767px: バッジ右端との間に 20px 以上の空きができ横に並べられる
                  （あしらいを110pxに縮小したぶん、しきい値が600px→580pxに下がった）
   引き上げ量の考え方:
     バッジ1行ぶん = 36px 引き上げると、あしらいの箱の上端が最終行の上端にそろう。
     ただし茶筅（.menu-filter__deco-flower）は箱の上端より外にはみ出しており、
     実測で描画上端が箱上端の 9.6px 上（366px時）にある。
     そのため -36px だと茶筅の先端が1行上のバッジ下端を 1.6px 食い込んでいた。
     2026-08-23 「茶筅とバッジの隙間をもう少し空けたい」の要望に合わせ、
     13px 下げて -23px に変更（変更前: -36px）。
     これで茶筅の描画上端が1行上のバッジ下端から約 11px 下がる。 */
@media (max-width: 446px), (min-width: 580px) and (max-width: 767px) {
  .menu-filter__deco {
    margin-top: -23px;
  }
}



/* =========================================
   CONTACT PAGE
   ========================================= */

/* ---- Hero ---- */
.contact-hero {
  position: relative;
  padding: 135px 0 60px;
  text-align: center;
  overflow: hidden;
}

/* 右側ハイビスカス装飾 */
.contact-hero__deco-flower {
  position: absolute;
  top: 105px;
  right: calc(41.67% - 66px); /* Figma: left calc(58.33%+46.17px) */
  width: 43px;
  height: 42px;
  background-image: url('../images/common/deco_hibiscus_s.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* CONTACT + お問い合わせ 見出しグループ（ハイビスカス絶対配置の基準） */
.contact-hero__heading-group {
  position: relative;
  display: inline-block;
  text-align: center;
  margin-bottom: 28px;
}

/* ハイビスカス共通 */
.contact-hero__hib {
  position: absolute;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* 右上：CONTACT の右上 */
.contact-hero__hib--tr {
  top: -27px;
  right: -65px;
}

/* 左：お問い合わせ の左横（CONTACTが60px + margin16px → お問い合わせ開始76px） */
/* お問い合わせ中央 = 76 + (35*1.3/2) ≈ 99px → 花の top = 99 - 22 = 77px */
.contact-hero__hib--bl {
  top: 77px;
  left: -44px;
}

.contact-hero__en {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 60px;
  color: #6f8f3a;
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.contact-hero__ja {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 35px;
  color: #6f8f3a;
  line-height: 1.3;
  margin-bottom: 28px;
}

.contact-hero__desc {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #000;
  line-height: 1.7;
}

/* ---- FAQ ---- */
.contact-faq {
  padding: 0 0 52px;
}

.contact-faq__pill-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.contact-faq__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 55px;
  border: 2px solid #6f8f3a;
  border-radius: 30px;
  background-color: #fdfced;
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #000;
}

.contact-faq__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 73.47vw; /* 1058px at 1440px */
  max-width: 1058px;
  margin: 0 auto;
}

.contact-faq__item {
  display: flex;
  align-items: center;
  min-height: 96px;
  border: 2px dashed #6f8f3a;
  border-radius: 20px;
  padding: 12px 15px;
  gap: 0;
}

.contact-faq__q-side {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 35%;
  flex-shrink: 0;
  padding-right: 16px;
}

.contact-faq__q-marker,
.contact-faq__a-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-faq__q-icon {
  width: 45px;
  height: 33px;
  object-fit: contain;
}

.contact-faq__a-icon {
  width: 43px;
  height: 33px;
  object-fit: contain;
}

.contact-faq__q-text {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #000;
  line-height: 1.45;
}

.contact-faq__a-side {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 65%;
}

.contact-faq__a-text {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #000;
  line-height: 1.6;
}

/* ---- Section divider for contact page ---- */
hr.contact-divider {
  margin: 0 8.125%;
}

/* ---- Contact Form Section ---- */
.contact-form-section {
  padding: 52px 0 0;
}

.contact-form-section__pill-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.contact-form-section__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 313px;
  height: 55px;
  border: 2px solid #6f8f3a;
  border-radius: 30px;
  background-color: #fdfced;
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #000;
}

/* グリーンカード */
.contact-form-section__card {
  width: 69.44vw; /* 1000px at 1440px */
  max-width: 1000px;
  margin: 0 auto;
  background-color: #6f8f3a;
  border-radius: 40px;
  padding: 44px 52px 52px;
}

/* ---- Form ---- */
.contact-form,
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* CF7プレースホルダー */
.wpcf7-form-control::placeholder {
  color: #8e8e93;
}

/* CF7スピナー（送信中ローディング）*/
.wpcf7-spinner {
  position: static;
  margin-left: 8px;
  vertical-align: middle;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

.contact-form__label {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #fdfced;
  line-height: 1.3;
}

.contact-form__required {
  color: #fdfced;
}

/* 入力フィールド共通 */
.contact-form__input,
.contact-form__select,
.contact-form__textarea,
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
  width: 100%;
  background-color: #fdfced;
  border: 3px solid #6f8f3a;
  border-radius: 20px;
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #000;
  outline: none;
  transition: border-color 0.2s;
}

.contact-form__input,
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel {
  height: 76px;
  padding: 0 24px;
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus,
.wpcf7-form-control:focus {
  border-color: #4a6527;
}

/* プレースホルダー */
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: #8e8e93;
}

/* CF7のフィールドラッパー（spanをblockに変更してwidth:100%を機能させる）
   ---- 2026-08-20 セレクトの▼が縦中央に来ない問題への対応 ----
   【現象】WordPress側だけ、お問い合わせ種別のセレクト右の▼が下寄りになる。
   【原因】▼（.contact-form__select-arrow）は position:absolute で
     top:50% / translateY(-50%) により基準の箱の縦中央に置いている。
     静的サイトは .contact-form__select-wrap（position:relative）が
     セレクトと同じ高さなので中央に来る（実測ずれ0.0px）。
     CF7はセレクトを .wpcf7-form-control-wrap で包むが、この要素には
     position が無いため基準の箱がセレクトの箱と一致しなくなる。
   【対応】このラッパーを position:relative にして基準の箱にする。
     あわせてセレクトを display:block にして、インライン要素がベースライン上に
     置かれることで生じる下側の余白をなくし、ラッパーの高さを
     セレクトの高さとぴったり一致させる。
     これで▼が「CF7のラッパーの中」にあっても「その外側」にあっても
     どちらの入れ子でもセレクトの縦中央に来る。 */
.wpcf7-form-control-wrap {
  display: block;
  position: relative;
}

.wpcf7-form-control.wpcf7-select {
  display: block;
}

/* セレクトボックス */
/* ---- 2026-08-20 ▼がセレクトの縦中央に来ない問題の修正 ----
   ▼は position:absolute + top:50% で「.contact-form__select-wrap の縦中央」に
   置いている。静的サイトはこの箱の高さ＝セレクトの高さなので中央に来る。
   一方 Contact Form 7 はフォーム設定の内容に自動整形（wpautop）をかけ、
   改行を <br /> に変換して出力する。
     <div class="contact-form__select-wrap">
       [select* inquiry-type ...]        ← ここの改行が <br /> になる
       <span class="contact-form__select-arrow">▼</span>
     </div>
   その結果ラッパーの高さがセレクトより高くなり（実測で最大48px増）、
   50%の位置がセレクトの中心より下にずれていた。
   （実機の実測でも▼はセレクト中心の約11px下＝<br>1つ分の高さの半分）
   line-height:0 にすると <br> や改行の空白が作る行ボックスの高さが0になり、
   ラッパーの高さがセレクトの高さと一致する。
   ▼自身は line-height:1 を持っているので表示に影響しない。 */
.contact-form__select-wrap {
  position: relative;
  display: block;
  line-height: 0;
}

.contact-form__select-wrap br {
  display: none;
}

.contact-form__select,
.wpcf7-form-control.wpcf7-select {
  height: 76px;
  padding: 0 56px 0 24px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.contact-form__select-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #8e8e93;
  pointer-events: none;
  line-height: 1;
}

/* テキストエリア */
.contact-form__textarea,
.wpcf7-form-control.wpcf7-textarea {
  height: 283px;
  padding: 20px 24px;
  resize: vertical;
  line-height: 1.7;
}

.contact-form__textarea::placeholder {
  color: #8e8e93;
}

/* 送信ボタン */
.contact-form__submit-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.contact-form__submit,
.wpcf7-form-control.wpcf7-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 261px;
  height: 76px;
  background-color: #000;
  border: none;
  border-radius: 20px;
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 25px;
  color: #fdfced;
  cursor: pointer;
  transition: opacity 0.2s;
}

/* ---- 2026-08-20 CF7の送信ボタンを中央寄せする ----
   静的サイトは送信ボタンを .contact-form__submit-wrap
   （display:flex / justify-content:center）で囲んで中央に置いているが、
   Contact Form 7 は [submit] をこのラッパーで囲まずに出力するため、
   テーマ側では中央寄せが効かず左寄せになっていた。
   ボタン自体は width:261px の display:flex（ブロックレベル）なので、
   左右マージンを auto にすれば親の中で中央に来る。
   静的サイト側はすでに flex で中央寄せ済みで、flexアイテムの auto マージンも
   同じく中央に配置されるため、見た目は変わらない。 */
.wpcf7-form-control.wpcf7-submit {
  margin-left: auto;
  margin-right: auto;
}

.contact-form__submit:hover,
.wpcf7-form-control.wpcf7-submit:hover {
  opacity: 0.8;
}

/* ---- 2026-08-20 CF7が本来隠している要素を隠す ----------------------
   テーマは functions.php で `add_filter( 'wpcf7_load_css', '__return_false' )`
   としてCF7のCSSを読み込まない設定にしている。デザインを自前で当てるための
   設定だが、CF7が自前でやっている「隠すべき要素を隠す指定」まで無効になり、
   緑カードの上部に白／グレー／クリームの3pxの線が出ていた。
   実機スクリーンショットでの実測: 幅36.5〜356.7px（＝カードの内容幅と一致）、
   高さ3px、上から白1px・グレー1px・クリーム1px。
   CF7側の該当指定をテーマで肩代わりする。

   1. 読み上げ用の領域（フォーム先頭に出力される。目には見せない） */
.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 2. 素のスタイルのまま出力される <hr>（既定の inset ボーダーが線に見える）。
      このサイトで使う横線は .section-divider / .contact-divider だけ */
.wpcf7 hr,
.contact-form-section__card hr:not([class]) {
  display: none;
}

/* 3. 送信前の空の応答メッセージ枠。CF7 5.4以降は aria-hidden が付かなくなり、
      既存の [aria-hidden="true"] の指定では隠れなくなっていた */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7-response-output:empty {
  display: none;
}

/* CF7 エラー・成功メッセージ */
.wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 20px;
  border: none !important; /* CF7デフォルトの border: 2px solid #ff0000 を上書き */
  border-radius: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  text-align: center;
}

/* 初期状態（未送信）は非表示 */
.wpcf7-response-output[aria-hidden="true"] {
  display: none;
}

.wpcf7-mail-sent-ok {
  background-color: rgba(253, 252, 237, 0.2);
  border: 2px solid #fdfced !important;
  color: #fdfced;
}

.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked,
.wpcf7-validation-errors {
  background-color: rgba(255, 80, 80, 0.15);
  border: 2px solid #ff9090 !important;
  color: #fdfced;
}

.wpcf7-not-valid-tip {
  color: #ffdddd;
  font-size: 14px;
  margin-top: 4px;
  display: block;
}

/* ---- Thank You ---- */
.contact-thankyou {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 60px 0 40px;
  position: relative;
}

.contact-thankyou__text {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #000;
  line-height: 1.5;
}

.contact-thankyou__deco {
  position: relative;
  width: 118px;
  height: 112px;
  flex-shrink: 0;
}

.contact-thankyou__leaf {
  width: 118px;
  height: auto;
  object-fit: contain;
  transform: rotate(1.38deg);
}


/* =========================================
   CONTACT — TABLET (max-width: 1024px)
   ========================================= */
@media (max-width: 1024px) {
  .contact-hero {
    padding: 100px 40px 48px;
  }

  .contact-hero__en {
    font-size: 48px;
  }

  .contact-hero__ja {
    font-size: 28px;
  }

  .contact-hero__desc {
    font-size: 18px;
  }

  .contact-faq__list {
    width: 90%;
  }

  .contact-faq__q-text {
    font-size: 16px;
  }

  .contact-faq__a-text {
    font-size: 15px;
  }

  .contact-form-section__card {
    width: 90%;
    padding: 36px 36px 44px;
  }
}


/* =========================================
   CONTACT — SP (max-width: 767px)
   ========================================= */
@media (max-width: 767px) {
  .contact-hero {
    padding: 64px 24px 40px;
  }

  .contact-hero__deco-flower {
    display: none;
  }

  .contact-hero__hib {
    width: 30px;
    height: 30px;
  }

  .contact-hero__hib--tr {
    right: -38px;
    top: -17px;
  }

  .contact-hero__hib--bl {
    top: 40px;
    bottom: auto;
    left: -20px;
  }

  .contact-hero__en {
    font-size: 36px;
  }

  .contact-hero__ja {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .contact-hero__desc {
    font-size: 15px;
    text-align: left;
  }

  .contact-faq {
    padding: 0 0 40px;
  }

  .contact-faq__pill {
    width: 160px;
    height: 46px;
    font-size: 16px;
  }

  .contact-faq__list {
    width: calc(100% - 48px);
    gap: 12px;
  }

  .contact-faq__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px;
    min-height: unset;
  }

  .contact-faq__q-side {
    width: 100%;
    padding-right: 0;
  }

  .contact-faq__a-side {
    width: 100%;
  }

  .contact-faq__q-text {
    font-size: 15px;
  }

  .contact-faq__a-text {
    font-size: 14px;
  }

  .contact-form-section {
    padding: 40px 0 0;
  }

  .contact-form-section__pill {
    width: 230px;
    height: 46px;
    font-size: 16px;
  }

  .contact-form-section__card {
    width: calc(100% - 32px);
    border-radius: 24px;
    padding: 28px 20px 36px;
  }

  .contact-form__label {
    font-size: 16px;
  }

  .contact-form__input,
  .contact-form__select,
  .wpcf7-form-control.wpcf7-text,
  .wpcf7-form-control.wpcf7-email,
  .wpcf7-form-control.wpcf7-tel,
  .wpcf7-form-control.wpcf7-select {
    height: 56px;
    font-size: 16px;
    border-radius: 14px;
  }

  .contact-form__textarea,
  .wpcf7-form-control.wpcf7-textarea {
    height: 200px;
    font-size: 16px;
    border-radius: 14px;
  }

  .contact-form__submit,
  .wpcf7-form-control.wpcf7-submit {
    width: 180px;
    height: 56px;
    font-size: 18px;
    border-radius: 14px;
  }

  .contact-thankyou {
    flex-direction: column;
    padding: 48px 24px 32px;
    text-align: center;
  }

  .contact-thankyou__text {
    font-size: 18px;
  }

  /* 2026-08-20 SPではフッター冒頭に同じ波＋茶筅のロゴが入るため、
     縦並びになると同じ絵が2つ続いてしまう。
     （変更前は PC と同じく .contact-thankyou__deco を表示していた）
     PC・タブレットでは文言の右横に並ぶので従来どおり表示する。 */
  .contact-thankyou__deco {
    display: none;
  }
}

/* =========================================
   ページ上部へ戻るボタン（全デバイス）
   2026-08-20 追加
   - 最初に見えていた1画面ぶんをスクロールし終えたあたりで
     ふわっと浮かび上がる（JSで .is-visible を付ける）
   - 画面右下に固定。ボタン自体が44〜52pxと小さく、
     コンテンツは中央寄せなので他の要素には掛からない
   - 重なり順は 200。ヘッダー(100)より前、SPナビのモーダル(500)より後ろなので、
     メニューを開いている間は自動的にモーダルの下に隠れる
   - SPは少し小さくして端に寄せ、iPhoneのホームバーに掛からないよう
     env(safe-area-inset-bottom) を加算する
   ========================================= */
.to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid #fdfced;
  border-radius: 50%;
  background-color: rgba(111, 143, 58, 0.88);
  color: #fdfced;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease,
              visibility 0.35s, background-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top__icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* マウス操作の環境だけホバーを効かせる（タッチ端末でタップ後に色が残らないように） */
@media (hover: hover) and (pointer: fine) {
  .to-top:hover {
    background-color: #6f8f3a;
  }
}

@media (max-width: 767px) {
  .to-top {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
  }

  .to-top__icon {
    width: 20px;
    height: 20px;
  }
}

/* 動きを減らす設定の端末ではフェードのみ（浮き上がりなし） */
@media (prefers-reduced-motion: reduce) {
  .to-top {
    transform: none;
    transition: opacity 0.2s linear, visibility 0.2s linear;
  }
}


/* =========================================
   PAGE TRANSITION OVERLAY
   ========================================= */

/* フェードアウト時（JSがis-outを付与） */
.pg-transition.is-out {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.45s ease, visibility 0s 0.45s !important;
}

/* ロゴのふわふわアニメーション */
.pg-transition__logo {
  animation: pg-logo-float 1.4s ease-in-out infinite;
}

@keyframes pg-logo-float {
  0%, 100% { transform: translateY(0px)   scale(1);    }
  50%       { transform: translateY(-14px) scale(1.05); }
}



/* =========================================
   ABOUT US ページ（page-about.php）
   ※トップページのファーストビュー(.hero)には非干渉
   ========================================= */
/* =========================================
   PINEWAVE MATCHA - about.css (ABOUT US ページ)
   レイアウト（幅・高さ・border-radius）: vw指定（1440px時にデザイン値と一致）
   フォント・余白（font-size / margin / padding / gap）: px固定
   主要カラー: 背景 #fdfced / グリーン #6f8f3a / クリーム #fdfced
   ========================================= */

/* ---- 共通ラッパー ---- */
.about {
  width: 100%;
  overflow-x: hidden;
}

/* セクション内のコンテンツ幅（Figma: 横ライン幅 1197px / 1440px = 83.125%） */
.about-sec {
  width: 83.125vw;        /* 1197px */
  max-width: 1197px;
  margin: 0 auto;
  padding: 28px 0 40px;
}

/* ---- 2026-08-19 区切り線をコンテンツ幅にそろえる ------------------
   【変更前】ABOUTページの hr.section-divider には style.css の
     hr.section-divider { margin: 0 8.125%; width: 83.75%; }
   がそのまま効いていた。これはビューポート幅に比例して伸び続けるのに対し、
   .about-sec は max-width:1197px で頭打ちになるため、幅が離れていた。
     1440px : 点線1206px / セクション1197px（+9px）
     1568px : 点線1313px / セクション1197px（+116px）
     1920px : 点線1608px / セクション1197px（+411px）
     1024px : 点線 858px / セクション 901px（-43px）
      768px : 点線 643px / セクション 676px（-33px）
      390px : 点線 342px / セクション 335px（+7px）
   デザイン（Figma node 796-243）では点線と3セクションのコンテンツ幅は同じ
   ため、.about 配下だけ .about-sec と完全に同じ式にそろえる。 */
.about hr.section-divider {
  width: 83.125vw;
  max-width: 1197px;
  margin: 0 auto;
}


/* ---- 見出しピル（Ingredients / Our story / Values / Voice） ---- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12.778vw;        /* 184px */
  height: 3.056vw;        /* 44px */
  background-color: #6f8f3a;
  border: 2px solid #6f8f3a;
  border-radius: 2.083vw; /* 30px */
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #fdfced;
  line-height: 1;
}

/* ---- セクション小見出し（当店の有機抹茶について / 大切にしていること） ---- */
.about-sec__subtitle {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #000000;
  margin-top: 16px;
}

.about-sec__subtitle--center {
  text-align: center;
}

/* =========================================
   HERO
   ========================================= */
.about-hero {
  position: relative;
  width: 100%;
  height: 52.153vw;       /* 751px */
  overflow: hidden;
}

/* ---- 2026-08-19 背景の位置調整 --------------------------------
   【変更前】
     .about-hero__bg { width:100%; height:100%; object-fit:cover; }
     （transform 指定なし）
   【理由】
     中央の茶筅の結び目（画像の縦36.7〜39.4%）が「ABOUT US」の
     文字（PC:42.7〜55.6% / SP:44〜54.5%）より上に出てしまい、
     丸い玉が露出して不自然だった。
   【なぜ object-position ではなく transform か】
     画像 2880x1502 = 1.9174 と、ヒーロー枠 100vw x 52.153vw = 1.9174 が
     完全に一致しているため縦の切り取り余地がゼロで、object-position を
     変えても1pxも動かない。SPも縦は全体表示（横だけ切れる）。
     そこで上端を固定したまま拡大し、相対的に下へ送っている。
   【拡大率 1.25 の根拠】
     結び目が文字の帯に完全に入る条件は PC:1.186以上 / SP:1.222以上。
     両立する最小値に余裕を持たせて 1.25 とした（拡大は最小限に留める）。
     結果: 結び目 45.0〜49.4%。PC 上2.3%/下6.2%、SP 上1.0%/下5.1%。
   【横ずらし -2.13% の根拠】
     文字は装飾書体で縦線の太さが約3.8%しかなく、結び目（約8.8%）を
     完全に隠すことは幾何学的に不可能。そこで結び目の中心を最も太い
     縦線（文字画像内53.7%の位置）に重ね、遮蔽された見え方にする。
     PC・SPとも同じ縦線に乗る値を選定（PC 53.7% / SP 54.0%）。
     覆える割合は PC 43% / SP 49%。
     横方向の余裕は PC±12.5% / SP±26.7% あるため追加拡大は不要。
   ------------------------------------------------------------- */
.about-hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 上端を固定したまま拡大し、結び目を文字の帯に送る。
     さらに左へ2.13%ずらして、結び目の中心が文字の縦線に重なるようにする。
     translateX は scale 後の座標系に効くので 2.13 / 1.25 = 1.70% を指定。 */
  transform: scale(1.25) translateX(-1.7%);
  transform-origin: center top;
}

.about-hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.about-hero__title-img {
  width: 50vw;            /* 728px @ 1456px */
  height: auto;
}

.about-hero__wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 8.333vw;        /* 120px */
  display: block;
}

/* =========================================
   INTRO TITLE（PINEWAVEMATCHAについて）
   ========================================= */
.about-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 56px 16px 40px;
  background-color: #fdfced;  /* ヒーロー波の下端に写真が1px透ける切れ目を隠す */
  margin-top: -1px;
  position: relative;
}

.about-intro__title {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: #6f8f3a;
  text-align: center;
  line-height: 1.2;
}

.about-intro__leaf {
  width: 3.410vw;         /* 49px（茶筅アイコン 49.1 x 87.9） */
  height: auto;
  flex-shrink: 0;
}

.about-intro__leaf-wrap {
  display: inline-flex;
  flex-shrink: 0;
}

/* =========================================
   INGREDIENTS
   ========================================= */
.ingredients__row {
  display: flex;
  align-items: flex-start;
  gap: min(5.139vw, 74px);    /* 74px (image x607 -> text x681) */
  margin-top: 24px;
}

/* ---- 2026-08-19 影の二重がけを解消 ------------------------------
   【変更前】
     .ingredients__img-card { width: 31.806vw; height: 18.611vw;
                              max-width: 458px; max-height: 268px;
                              border-radius: min(2.083vw, 30px);
                              overflow: hidden;
                              box-shadow: 0 0.278vw 0.278vw rgba(0,0,0,0.25); }
     .ingredients__img      { width: 100%; height: 100%; object-fit: cover; }
   【問題】
     ingredients_tea.png は画像自体に影が焼き込まれている
     （932x552のうち写真は8〜923px、周囲の透明マージンが影）。
     そこへCSSでも角丸＋影を付けていたため、
     「写真の影 → 土台のような枠 → さらに影」と三重に見えていた。
     ※影が焼き込まれているのはこの画像だけ。他はCSSの影が正しい。
   【対応】
     角丸・切り抜き・box-shadow をやめ、画像をそのまま表示する。
     写真部分が従来と同じ458pxで出るよう、影のマージン込みの
     466px（= 458 x 932/916）を指定している。 */
.ingredients__img-card {
  flex-shrink: 0;
  width: 32.361vw;           /* 466px（写真458px＋焼き込み影のマージン） */
  max-width: 466px;
}

.ingredients__img {
  display: block;
  width: 100%;
  height: auto;
}

.ingredients__list {
  flex: 1;
  margin: 0;
  padding-top: 12px;
}

.ingredients__item {
  display: flex;
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.99);
  line-height: 1;
  margin-bottom: 23px;    /* 47px 行ピッチ - 文字高 */
}

.ingredients__item:last-child { margin-bottom: 0; }

.ingredients__item dt {
  font-weight: 600;
  white-space: nowrap;
}

.ingredients__item dd {
  margin: 0;
  font-weight: 400;
}

.ingredients__note {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.99);
  text-align: center;
  line-height: 1.5;
  margin-top: 24px;
}

/* =========================================
   OUR STORY
   ========================================= */
/* カードは .about-sec（最大1197px）と同幅。
   横方向は「カード幅に対する %」で指定し、1197px時にデザイン値と一致させる
   （.about-sec が max-width で止まるため vw は使わない）。
   余白は px 固定、文字だけ 1440px 未満で縮むよう clamp() を使う。 */

/* 緑のカード本体 */
.our-story__body {
  position: relative;
  margin-top: 24px;
  /* 下 = フレームのインセット28px + 本文最終行とフレームの間 30px */
  padding: 59px 0 58px;
  background-color: #6f8f3a;
  border-radius: 40px;
}

/* 内側のクリーム色フレーム */
.our-story__frame {
  position: absolute;
  top: 29px;
  bottom: 28px;
  right: 2.841%;                /* 34px */
  left: 2.841%;                 /* 34px */
  border: 2px solid #fdfced;
  border-radius: 30px;
  pointer-events: none;
}

/* 見出しピル */
.our-story__heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 60.819%;               /* 728px */
  min-height: 72px;
  margin: 0 auto;
  background-color: #fdfced;
  border: 2px solid #6f8f3a;
  border-radius: 999px;
}

.our-story__heading-logo {
  width: 47.376%;               /* 343px（ピルの内寸724pxに対して） */
  height: auto;
}

.our-story__heading-text {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 1.944vw, 28px);
  color: #63a028;
  line-height: 1.2;
  white-space: nowrap;
}

/* サーフボード＋本文 */
.our-story__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-top: 26px;
  padding-left: 3.843%;         /* 46px */
}

/* 以下の % は .our-story__row のコンテンツ幅（1197 - 46 = 1151px）基準 */
.our-story__board {
  width: 11.744%;               /* 135px */
  height: auto;
  flex-shrink: 0;
  margin-right: 1.201%;         /* 14px */
}

.our-story__text {
  width: 76.455%;               /* 880px */
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 1.528vw, 22px);
  line-height: 1.364;
  color: #fdfced;
}

.our-story__text p + p {
  margin-top: 1.364em;          /* 空行1行分 */
}

/* 右下のスタンプ */
.our-story__stamp {
  position: absolute;
  right: 7.602%;                /* 91px */
  bottom: 73px;
  width: 15.038%;               /* 180px */
  height: auto;
  pointer-events: none;
}

/* =========================================
   VALUES
   ========================================= */
.values {
  position: relative;
}

/* ---- 2026-08-19 カード4枚の幅をコンテンツ幅に対する比率で指定し直す ----
   【変更前】
     .values__grid { grid-template-columns: repeat(2, 31.042vw);
                     column-gap: 3.681vw; row-gap: 1.25vw; }
     .value-card   { width: 31.042vw; height: 16.875vw;
                     border-radius: 1.667vw;
                     box-shadow: 0 0.278vw 0.278vw rgba(0,0,0,.25); }
   【問題】カードは vw なので画面幅に比例して伸び続けるのに対し、
     .about-sec（＝他セクションのコンテンツ幅）は max-width:1197px で
     止まる。そのため 1440px を超えるとカードのほうが太くなっていた。
       1440px : カード4枚 947px / コンテンツ 1197px（79.1%）
       1568px : カード4枚1031px / コンテンツ 1197px（86.2%）
       1920px : カード4枚1263px / コンテンツ 1197px（105.5%＝はみ出し）
   【デザイン実測】Figma node 796-243（1440px アートボード）
     カード4枚とも W447 / H243、回転 ±1〜1.5deg
     回転を除いた中心座標: 上段 447.6・938.3 / 下段 480.4・970.6
       → カード間隔 43.5px（53px ではなかった）
       → 4枚合計 937.5px ＝ コンテンツ幅1197px の 78.32%
       → 下段のずれ 32.5px（従来 32px。実質同じ）
   【対応】横方向は .about-sec に対する % で指定して常に 78.32% を保つ。
     縦方向（高さ・角丸・影）は % が使えないので min() で 1440px 相当を上限に。 */
.values__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 37.343%); /* 447px / 1197px */
  justify-content: center;
  column-gap: 3.634%;          /* 43.5px / 1197px */
  row-gap: min(1.25vw, 18px);  /* 18px */
  margin-top: 32px;
}

.value-card {
  position: relative;
  z-index: 1;              /* 装飾ハイビスカスより前面 */
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;                        /* グリッド列（＝コンテンツ幅の37.343%） */
  height: min(16.875vw, 243px);       /* 243px */
  padding: 0 24px 0 27px;
  background-color: var(--card-bg);
  border-radius: min(1.667vw, 24px);  /* 24px */
  box-shadow: 0 min(0.278vw, 4px) min(0.278vw, 4px) rgba(0, 0, 0, 0.25);
}


.value-card--rot-l { transform: rotate(-1.5deg); }
.value-card--rot-r { transform: rotate(1.5deg); }

/* 2026-08-19 デザインでは下段2枚が上段より右にずれている。
   カード中心で実測したところ 32.5px（1440px時）。
   変更前は上下段が同じ横位置に揃っていた。
   2026-08-19 追記：カード幅を頭打ちにしたのに合わせ、ずれ量も
   1440px 相当（32.5px）で頭打ちにする（変更前 2.24vw = 上限なし）。 */
.value-card:nth-of-type(3),
.value-card:nth-of-type(4) {
  left: min(2.257vw, 32.5px);
}

/* 2026-08-19 カード幅を頭打ちにしたので、中の写真も同じく頭打ちにする
   （変更前：width:11.319vw / height:13.056vw / border-radius:2.083vw、上限なし） */
.value-card__img-wrap {
  flex-shrink: 0;
  width: min(11.319vw, 163px);         /* 163px */
  height: min(13.056vw, 188px);        /* 188px */
  border-radius: min(2.083vw, 30px);   /* 30px */
  overflow: hidden;
}

.value-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.value-card__text {
  flex: 1;
}

.value-card__title {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.99);
  line-height: 1.2;
  margin-bottom: 16px;
}

.value-card__desc {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  line-height: 1.55;
}

/* ---- 2026-08-19 Valuesの装飾ハイビスカスを作り直し ----------------
   【変更前】
     <img src="images/menu/deco_hibiscus_s.png" class="values__deco values__deco--l">
     <img src="images/menu/deco_hibiscus_l.png" class="values__deco values__deco--r">
     .values__deco    { position:absolute; z-index:-1; opacity:0.9; }
     .values__deco--l { width:6.5vw; left:-3vw; top:38%; }
     .values__deco--r { width:9vw;  right:-4vw; top:14%; }
   【問題】
     1. deco_hibiscus_s/l.png は名前に反して中身が茶筅と波のイラストで、
        ハイビスカスではなかった
     2. どちらも1920x1080のキャンバスに絵が小さく乗っているだけの画像を
        <img>でそのまま表示していたため、キャンバス全体が94x53pxに
        押し潰され、絵が10px程度になって実質見えていなかった
   【対応】
     menu/deco_leaf.png に入っていた613x599のハイビスカスを切り出して
     common/deco_hibiscus.png として用意し、3枚配置する。
     位置・大きさ・不透明度はデザインカンプから実測して算出:
       右上 262px / 左 203px / 右下 88px
       不透明度 23% / 34% / 60%（花びらの色から逆算） */
.values__deco {
  position: absolute;
  z-index: 0;              /* カードより背面（カードは z-index:1） */
  pointer-events: none;
}

/* 位置はすべて「カードの端からどれだけ出ているか」で指定する。
   2026-08-19 カード幅をコンテンツ幅に対する % に直したのに合わせて、
   装飾もグリッド幅（＝コンテンツ幅）に対する % に統一した。
   【変更前】カードだけが vw で伸び続けグリッドは1197pxで止まっていたため、
     中央(50%)を起点に vw で測る必要があった：
       --tr { width:16.26vw; left:calc(50% + 23.09vw); top:-5.88vw; }
       --l  { width: 8.90vw; left:calc(50% - 36.60vw); top:13.79vw; }
       --br { width: 6.18vw; left:calc(50% + 32.40vw); bottom:-0.88vw; }
   カードとグリッドが同じ比率で伸縮するようになったので、素の % で足りる。
   1440px（グリッド1197px）時のカード端：
     カード2(右上)の右端 = 1067.3 / カード3(左下)の左端 = 162.3
     カード4(右下)の右端 = 1099.8
   はみ出し量は変更前と同じ px を維持している（右上93 / 左86 / 右下50）。
   縦方向だけは % がグリッドの高さ基準になってしまうので min()/max() で
   1440px 相当を上限にする。 */

/* 右上：カード2の右へ93px はみ出す（カードの背面）
   2026-08-19 デザイン再計測により 18.67vw → 16.26vw → 19.557% に修正 */
.values__deco--tr {
  width: 19.557%;                /* 234px＝カード幅の52% */
  left: 77.381%;                 /* 926px */
  top: max(-5.88vw, -84.7px);    /* -85px */
  opacity: 0.23;
}

/* 左：カード3の左へ5.96vw・上へ4.34vw はみ出す（カードの背面）
   2026-08-19 デザイン再計測により 14.47vw → 8.90vw に修正。
   （初回計測は不鮮明なカンプで、隣接する要素まで拾って約1.6倍大きく出ていた） */
.values__deco--l {
  width: 10.710%;                /* 128px＝カード幅の29% */
  left: 6.395%;                  /* 77px（下段カードのずれ32.5px分を加算済み） */
  top: min(13.79vw, 198.6px);    /* 199px */
  opacity: 0.34;
}

/* 右下：カード4の右へ3.75vw・下へ1.5vw はみ出す。
   ここだけカードより前面に出す（z-index: 2） */
.values__deco--br {
  width: 7.435%;                 /* 89px＝カード幅の20% */
  left: 88.609%;                 /* 1061px（下段カードのずれ32.5px分を加算済み） */
  bottom: max(-0.88vw, -12.7px); /* -13px */
  opacity: 0.62;
  z-index: 2;
}

/* =========================================
   VOICE
   ========================================= */
.voice__lead {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  margin-top: 18px;
}

.voice__grid {
  display: grid;
  grid-template-columns: repeat(4, min(19.306vw, 278px));
  gap: min(1.667vw, 24px);
  justify-content: center;
  margin-top: 28px;
}

.voice-card {
  width: min(19.306vw, 278px);        /* 278px */
  min-height: min(19.028vw, 274px);   /* 274px */
  padding: 24px 26px;
  border: 3px solid #6f8f3a;
  border-radius: 2.778vw; /* 40px */
  background-color: transparent;
}

.voice-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.voice-card__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75vw;          /* 54px */
  height: 3.75vw;
  border-radius: 50%;
  background-color: #f8c0b6;
}

.voice-card__avatar img {
  width: 55%;
  height: auto;
}

/* ---- 2026-08-19 アバターアイコンを茶筅／湯呑みで別サイズにする ----
   【変更前】.voice-card__avatar img { width: 55%; } の1本だけで、
     茶筅も湯呑みも「元画像のキャンバス幅」を同じ55%にしていた。
     ところが2枚は余白の入り方がまったく違う：
       concept_leaf_small.png（茶筅）  キャンバス 76x136 / 絵 68x124（縦長）
       concept_shopcard.png（湯呑み）  キャンバス150x104 / 絵128x94（横長）
     そのため円の直径を1としたときの絵の実寸が
       茶筅   幅0.486 / 高0.889 ← 大きすぎて円からはみ出していた
       湯呑み 幅0.458 / 高0.333 ← 小さすぎた
     となり、2つの見た目の大きさが揃っていなかった。
   【デザイン実測】カンプのアバターを同じ方法で測った値（円の直径＝1）
       茶筅   幅0.404 / 高0.735
       湯呑み 幅0.711 / 高0.518
   【対応】絵の実寸がデザイン比になるキャンバス幅を画像ごとに逆算する。
       茶筅   0.404 ÷ (68/76)  = 45%
       湯呑み 0.711 ÷ (128/150) = 83%
     円のサイズはタブレット48px・SP44pxと変わるが、%指定なので追従する。 */
.voice-card__avatar .voice-card__avatar-icon--whisk { width: 45%; }
.voice-card__avatar .voice-card__avatar-icon--cup   { width: 83%; }

.voice-card__name {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: rgba(0, 0, 0, 0.99);
  line-height: 1.2;
}

.voice-card__region {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.99);
  line-height: 1.2;
  margin-top: 4px;
}

.voice-card__body {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  line-height: 1.55;
}

/* =========================================
   TABLET（max-width: 1024px）
   ========================================= */
@media (max-width: 1024px) {
  .about-sec {
    width: 88%;
    max-width: none;
    padding: 28px 0 36px;
  }

  /* 2026-08-19 区切り線をコンテンツ幅にそろえる
     （変更前は style.css の width:83.75% がそのまま効いていて、
       1024px時に点線858px / セクション901px と 43px 短かった） */
  .about hr.section-divider {
    width: 88%;
    max-width: none;
    margin: 0 auto;
  }


  .pill {
    width: 150px;
    height: 40px;
    border-radius: 22px;
    font-size: 20px;
  }

  .about-sec__subtitle { font-size: 26px; }
  .about-intro__title { font-size: 32px; }
  .about-intro__leaf { width: 39px; }   /* 高さ 70px 相当 */

  /* INGREDIENTS */
  .ingredients__img-card { width: 42%; }   /* 変更前: height: auto; aspect-ratio: 458/268 も指定 */
  .ingredients__row { gap: 32px; }
  /* 768〜1024pxの中間帯で1行に収まるよう vw で可変（〜904pxで縮小、それ以上は19px） */
  .ingredients__item { font-size: clamp(15px, 2.1vw, 19px); margin-bottom: 16px; }
  .ingredients__item dt,
  .ingredients__item dd { white-space: nowrap; }
  .ingredients__note { font-size: 18px; }

  /* OUR STORY */
  /* 下 = スタンプの下余白34px + スタンプ117px + 本文との間隔20px */
  .our-story__body { padding: 32px 0 171px; border-radius: 30px; }
  .our-story__frame { top: 20px; right: 22px; bottom: 20px; left: 22px; border-radius: 22px; }
  .our-story__heading {
    width: auto;
    max-width: calc(100% - 60px);
    min-height: 0;
    padding: 10px 24px;
  }
  .our-story__heading-logo { width: 200px; }
  .our-story__heading-text { font-size: 20px; }
  .our-story__row { margin-top: 20px; padding-left: 30px; }
  .our-story__board { width: 84px; margin-right: 14px; }
  .our-story__text { width: auto; flex: 1; min-width: 0; font-size: 16px; padding-right: 30px; }
  /* スタンプは本文に重ならないよう、カード下部の余白に置く */
  .our-story__stamp { right: 30px; bottom: 34px; width: 110px; }

  /* VALUES */
  /* 2026-08-19 変更前は .values__grid が width:100%（＝コンテンツ幅いっぱい）
     だったため、下段2枚を右にずらした分がそのままコンテンツ幅からはみ出し、
     区切り線より右へ飛び出していた（1024px時31px / 768px時23px）。
     ずれ量ぶんだけグリッドを詰めて、下段の右端がコンテンツ右端に一致するようにする。
     この幅ではPC同様の「カード4枚＝コンテンツ幅の78%」だと 768px時にカードが
     252pxまで小さくなり写真と本文が入らないため、比率はPCとそろえていない。 */
  .values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 20px;
    width: 97.3%;
  }
  .value-card {
    width: 100%;
    height: auto;
    min-height: 200px;
    padding: 20px;
    gap: 16px;
  }
  .value-card__img-wrap { width: 38%; height: auto; aspect-ratio: 163 / 188; border-radius: 18px; }
  .value-card__title { font-size: 18px; }
  .value-card__desc { font-size: 14px; }

  /* この幅ではカードが 1fr でグリッド幅いっぱいに広がるため、
     ベース側の % 指定（カード幅＝コンテンツ幅の37.343%前提）は使えない。
     グリッドに対する % で、デザインと同じ比率になるよう指定する。
     （カード幅に対して 幅 右上52% / 左29% / 右下20%、
       はみ出し 右上21% / 左19% / 右下11%）
     2026-08-19 グリッドを97.3%に詰めたぶん、カード基準で計算し直した。
     変更前: --tr {26.2% / 84.2%} --l {14.3% / -6.1%} --br {10.0% / 99.1%} */
  .values__deco--tr { width: 25.48%; left: 84.63%;  top: -17.5%; }
  .values__deco--l  { width: 13.96%; left: -6.53%;  top: 37.1%; }
  .values__deco--br { width: 9.68%;  left: 98.52%;  top: auto; bottom: -2.6%; }

  /* 下段のずれ。グリッドアイテムの % はグリッド領域（＝カード幅）基準で
     解決されるため、カード幅に対する % をそのまま指定する。
     デザインのずれ量はコンテンツ幅の2.715%（1440px時32.5px）なので、
     グリッドを97.3%に詰めた今のカード幅に対しては5.77%になる。
     （変更前 7.2%＝グリッドが100%だった頃の値） */
  .value-card:nth-of-type(3),
  .value-card:nth-of-type(4) { left: 5.77%; }

  /* VOICE */
  .voice__lead { font-size: 16px; }
  .voice__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .voice-card {
    width: 100%;
    min-height: 0;
    border-radius: 28px;
  }
  .voice-card__avatar { width: 48px; height: 48px; }
}

/* =========================================
   SP（max-width: 767px）
   ========================================= */
@media (max-width: 767px) {
  .about-sec {
    width: 86%;
    padding: 24px 0 32px;
  }

  /* 2026-08-19 区切り線をコンテンツ幅にそろえる
     （変更前は style.css の margin:0 24px / width:calc(100% - 48px) が
       効いていて、390px時に点線342px / セクション335px と 7px 長かった） */
  .about hr.section-divider {
    width: 86%;
    max-width: none;
    margin: 0 auto;
  }


  /* HERO */
  .about-hero { height: 64vw; }
  .about-hero__title-img { width: 70vw; }
  .about-hero__wave { height: 12vw; }

  /* INTRO */
  .about-intro { gap: 12px; padding: 40px 12px 28px; }
  /* ---- 2026-08-19 「PINEWAVEMATCHAについて」を1行に収める ----
     【変更前】font-size: 22px 固定。412px未満のデバイスでは必ず折り返し、
       「て」だけが2行目に落ちていた。
     【計算】この行で使える幅
         = 画面幅 − 左右パディング12px×2 − 茶筅27px×2 − gap12px×2
         = 画面幅 − 102px
       文字列の必要幅は 22px のとき 296.4px（＝文字サイズの13.473倍）だったので、
       1行に収まる上限は (画面幅 − 102) ÷ 13.473 ≒ 7.42vw − 7.57px。
       実測でも 320px:16.18 / 360px:19.15 / 375px:20.26 / 390px:21.38 と一致。
     【対応】フォント差でにじんでも折り返さないよう6%ほど余裕をみて 7.1vw − 7.6px。
       416px以上では従来どおり22pxで頭打ち、狭い端末でも15pxを下回らせない。 */
  .about-intro__title { font-size: clamp(15px, 7.1vw - 7.6px, 22px); }
  .about-intro__leaf { width: 27px; }   /* 高さ 48px 相当 */

  /* PILL / 見出し */
  .pill { width: 132px; height: 38px; border-radius: 20px; font-size: 18px; }
  .about-sec__subtitle { font-size: 20px; margin-top: 14px; }

  /* INGREDIENTS：縦積み */
  .ingredients__row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .ingredients__img-card { width: 100%; }
  .ingredients__list { padding-top: 0; }
  .ingredients__item { font-size: 15px; margin-bottom: 12px; line-height: 1.4; }
  .ingredients__note { font-size: 14px; text-align: left; }
  .ingredients__note br { display: none; }

  /* OUR STORY：本文は1カラム。サーフボードとスタンプはカード下部に並べる */
  /* 下 = 装飾の下余白32px + 装飾の高さ141px + 本文との間隔24px */
  .our-story__body { padding: 24px 0 197px; border-radius: 20px; }
  .our-story__frame { top: 12px; right: 14px; bottom: 12px; left: 14px; border-radius: 14px; }
  .our-story__heading {
    flex-direction: column;
    gap: 2px;
    max-width: calc(100% - 44px);
    min-height: 0;
    padding: 10px 16px;
    border-radius: 18px;
  }
  .our-story__heading-logo { width: 170px; }
  .our-story__heading-text { font-size: 15px; white-space: normal; text-align: center; }
  /* position: static にして、サーフボードの基準をカード(.our-story__body)にする */
  .our-story__row { display: block; position: static; margin-top: 16px; padding: 0 26px; }
  .our-story__text { width: auto; font-size: 14px; padding-right: 0; }
  .our-story__text br { display: none; }

  /* カード下部の装飾：サーフボードとスタンプを1つのグループとして中央に置く。
     縦横比が違うので、幅ではなく「高さ141px」で揃える。
     グループ幅 = ボード36 + 間隔22 + スタンプ130 = 188px
     → それぞれ left:50% から -94px / -36px ずらすと、グループの中心が
       セクションの中心に一致する */
  .our-story__board {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -94px;
    bottom: 32px;
    width: 36px;              /* 高さ 141px 相当 */
    margin-right: 0;
  }
  .our-story__stamp {
    left: 50%;
    right: auto;
    margin-left: -36px;
    bottom: 32px;
    width: 130px;             /* 高さ 139px 相当 */
  }

  /* VALUES：1カラム */
  /* ---- 2026-08-19 SPでもPCデザインを踏襲して傾き＋左右のガタつきを付ける ----
     【変更前】
       .value-card--rot-l, .value-card--rot-r { transform: none; }
       → カードが4枚とも幅いっぱい・回転なしで、きれいに縦一列に並んでいた
     【対応】
       ・カード幅を 94% にして、奇数枚目を左寄せ・偶数枚目を右寄せ
         （余った6%＝390px時20pxぶん、左右交互に振れる）
       ・回転はPCと同じ振り分け（1枚目と4枚目が左傾き、2・3枚目が右傾き）。
         SPはカードが小さく1.5degだと分かりにくいので 2deg にしている。
       ・回転後の見かけ幅 = 315*cos2° + 150*sin2° ≒ 320px < コンテンツ幅335px
         なので、はみ出しは起きない */
  .values__grid {
    grid-template-columns: 1fr;
    row-gap: 16px;
    margin-top: 24px;
    width: 100%;              /* タブレット側の 97.3% を戻す */
  }
  .value-card {
    width: 94%;
    min-height: 0;
    padding: 16px;
    gap: 14px;
    border-radius: 18px;
  }
  .value-card:nth-of-type(odd)  { justify-self: start; }
  .value-card:nth-of-type(even) { justify-self: end; }
  /* 2026-08-19 1カラムなので下段のずれは不要。
     変更前はタブレット用の left:7.2% が SP にも効いたままで、
     3枚目・4枚目のカードだけ右に24pxずれてコンテンツ幅からはみ出していた。 */
  .value-card:nth-of-type(3),
  .value-card:nth-of-type(4) { left: 0; }
  .value-card--rot-l { transform: rotate(-2deg); }
  .value-card--rot-r { transform: rotate(2deg); }
  .value-card__img-wrap { width: 40%; }
  .value-card__title { font-size: 17px; margin-bottom: 10px; }
  .value-card__desc { font-size: 13px; }

  /* ---- 2026-08-19 SPにもハイビスカスのあしらいを2枚だけ表示する ----
     【変更前】.values__deco { display: none; }（SPでは3枚とも非表示）
     縦一列なので、上段の右うしろと下段の左うしろに1枚ずつ置いて対角に散らす。
     PC同様どちらもカードの背面（z-index:0 / カードは z-index:1）。
     3枚目（右下・PCではカードの前面に出るもの）は、SPだと本文に
     かぶって読みづらくなるため引き続き非表示。 */
  .values__deco { display: block; }
  .values__deco--tr {
    width: 50%;
    left: 68%;      /* 右端から画面外へ抜けさせる（.about の overflow-x:hidden で切れる） */
    top: -4%;       /* 1枚目のカードの上にも少しはみ出させる */
    bottom: auto;
    opacity: 0.26;
  }
  .values__deco--l {
    width: 44%;
    left: -13%;     /* 左端から画面外へ抜けさせる */
    top: 58%;       /* 3枚目と4枚目の間あたり */
    bottom: auto;
    opacity: 0.32;
  }
  .values__deco--br { display: none; }

  /* VOICE：1カラム */
  .voice__lead { font-size: 14px; line-height: 1.6; }
  .voice__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
  }
  .voice-card {
    padding: 20px;
    border-radius: 24px;
  }
  .voice-card__avatar { width: 44px; height: 44px; }
  .voice-card__name { font-size: 17px; }
  .voice-card__region { font-size: 13px; }
  .voice-card__body { font-size: 13px; }
}