/* ============================================================
   マルイチ上平水産 — スタイルシート v2
   デザイン改定 2026-06
   フォント : Zen Kaku Gothic New（見出し）/ M PLUS Rounded 1c（本文）
   ============================================================ */

/* ── 1. デザイントークン ──────────────────────────────────── */
:root {
  /* メインカラー（2026-06 鮮やか化リニューアル：くすんだ青＋紺 → 鮮やかなオーシャンブルー） */
  --blue:        #1A8FD1;   /* 海・空ブルー（主役・くすみを取り鮮やかに） */
  --blue-mid:    #5FB6E4;   /* やや明るい水色 */
  --blue-bg:     #E6F4FC;   /* セクション薄水色背景 */
  --blue-deep:   #1577B8;   /* hover / active */
  --navy:        #15709E;   /* 締め色・見出し・濃色帯（紺 → 鮮やかな深い青に置換） */

  /* アクセント（使いどころを絞る） */
  --coral:       #A54842;   /* 和風の赤アクセント（価格・強調1〜2箇所） */

  /* 下地 */
  --cream:       #FCF8F0;   /* 生成り・和紙背景 */
  --cream-mid:   #F5EDE1;   /* やや濃い生成り */
  --white:       #FFFFFF;

  /* テキスト */
  --text:        #1E2A3A;
  --text-muted:  #627080;

  /* ボーダー */
  --border:      #DDE8F0;

  /* その他 */
  --star:        #F5A623;
  --line-green:  #06C755;

  /* レイアウト */
  --maxw:        1120px;

  /* 角丸 */
  --radius:      10px;    /* カード・写真 */
  --radius-sm:    6px;    /* 小カード */
  --radius-btn:  999px;   /* ボタン（ピル型） */

  /* シャドウ */
  --shadow-blue: 0 16px 45px rgba(21,112,158,0.16);
  --shadow-soft: 0 8px 26px rgba(21,112,158,0.09);
  --shadow-card: 0 3px 14px rgba(21,112,158,0.07);

  /* モーション/イージングトークン (D-0) */
  --dur-fast:    .18s;
  --dur:         .35s;
  --dur-slow:    .7s;
  --ease:        cubic-bezier(.22, .8, .32, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .5, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; }
}

/* ── 2. リセット ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 12%, rgba(116,185,220,.13) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 8%, rgba(165,72,66,.08) 0 1px, transparent 2px),
    linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  background-size: 28px 28px, 36px 36px, auto;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── 3. 共通レイアウト ─────────────────────────────────── */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* セクション背景リズム（クリーム → 白 → 水色 → クリーム → ネイビー …） */
.section      { padding: 96px 0; }
.section--white { background: var(--white); }
.section--cream { background: var(--cream); }
.section--blue  { background: var(--blue-bg); }
.section--navy  { background: linear-gradient(160deg, #1C85C2 0%, #16719F 52%, #125E8C 100%); color: var(--white); }

.section,
.page-hero {
  isolation: isolate;
}

.section > .container,
.page-hero > .container {
  position: relative;
  z-index: 1;
}

.section::before,
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.section--white::before,
.page-hero::before {
  background:
    radial-gradient(ellipse at 8% 14%, rgba(116,185,220,.12), transparent 38%),
    radial-gradient(ellipse at 92% 78%, rgba(45,127,181,.10), transparent 34%),
    repeating-radial-gradient(circle at 18% 24%, transparent 0 17px, rgba(45,127,181,.105) 18px 20px, transparent 21px 35px);
  background-size: auto, auto, 132px 72px;
  opacity: .72;
}

.section--cream::before {
  background:
    radial-gradient(ellipse at 80% 12%, rgba(165,72,66,.08), transparent 36%),
    radial-gradient(ellipse at 12% 78%, rgba(45,127,181,.11), transparent 42%),
    repeating-linear-gradient(172deg, transparent 0 34px, rgba(45,127,181,.075) 35px 37px, transparent 38px 72px);
  opacity: .75;
}

.section--blue::before {
  background:
    radial-gradient(ellipse at 15% 18%, rgba(255,255,255,.68), transparent 36%),
    radial-gradient(ellipse at 86% 22%, rgba(255,255,255,.45), transparent 34%),
    repeating-radial-gradient(circle at 50% 100%, transparent 0 21px, rgba(45,127,181,.13) 22px 24px, transparent 25px 44px);
  background-size: auto, auto, 150px 82px;
  opacity: .8;
}

.section--navy::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 28%, rgba(255,255,255,.10) 0 2px, transparent 3px),
    repeating-linear-gradient(170deg, transparent 0 38px, rgba(255,255,255,.06) 39px 41px, transparent 42px 82px);
  background-size: 90px 90px, 124px 124px, auto;
  opacity: .72;
}

/* ── 4. 見出しスタイル ─────────────────────────────────── */
/* 見出しフォント = Zen Kaku Gothic New（ヒューマニスト系ゴシック） */
.section-title {
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.section-title--white { color: var(--white); }

.section-eyebrow {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.section-eyebrow--white { color: rgba(255,255,255,.7); }

/* 波線アンダーライン（SVG inline） */
.wave-line {
  display: block;
  margin: 0 auto 44px;
  width: 100px;
  height: 12px;
  overflow: visible;
}

/* ── 5. プレースホルダー画像 ──────────────────────────── */
/* 写真差し替え後の img 共通スタイル */
.photo-card img,
.product-photo img,
.scene-photo img,
.company-photo img,
.page-hero-img img,
.scene-thumb img,
.gift-card-img img,
.page-hero-photo img,
.contact-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.review-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.sales-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.ph {
  background: linear-gradient(135deg, #d8e8f0 0%, #b8cfde 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7a9ab0;
  font-size: 12px;
  font-family: monospace;
  border-radius: inherit;
}
.ph--warm {
  background: linear-gradient(155deg, #f5d9b0 0%, #e8a870 25%,
    #d06840 45%, #a03820 65%, #c87050 82%, #f0d8b8 100%);
  color: rgba(255,255,255,.6);
}

/* ── 6. ボタン ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 28px;
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
  white-space: nowrap;
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .06s; }
.btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ① LINEメイン（最重要・緑ソリッド） */
.btn--line  { background: var(--line-green); color: var(--white); box-shadow: 0 4px 16px rgba(6,199,85,.26); }
.btn--line:hover { box-shadow: 0 8px 24px rgba(6,199,85,.36); background: #05b54e; }
/* ② 直接購入（コーラルソリッド） */
.btn--buy  { background: var(--coral);      color: var(--white); box-shadow: 0 4px 16px rgba(165,72,66,.24); }
.btn--buy:hover { box-shadow: 0 8px 24px rgba(165,72,66,.36); }
.btn--blue-outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--navy  { background: var(--navy);       color: var(--white); }
.btn--navy-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--white { background: var(--white);      color: var(--navy); }
.btn--white-outline { background: rgba(255,255,255,.12); color: var(--white); border-color: rgba(255,255,255,.55); backdrop-filter: blur(4px); }
/* ③ 控えめ相談（薄緑アウトライン） */
.btn--line-soft { background: rgba(6,199,85,.07); color: #058a3c; border: 1.5px solid rgba(6,199,85,.42); font-weight: 500; }
.btn--line-soft:hover { background: rgba(6,199,85,.15); border-color: var(--line-green); }
.btn--line-soft::before { background: rgba(6,199,85,.12); }

.btn .btn-icon { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.btn .btn-line-img { width: 20px; height: 20px; flex-shrink: 0; border-radius: 4px; }

/* ── 7. ヘッダー / ナビ ────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background:
    linear-gradient(90deg, rgba(255,255,255,.96), rgba(239,249,253,.94)),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(45,127,181,.06) 23px 24px, transparent 25px 44px);
  border-bottom: 1px solid rgba(45,127,181,.22);
  box-shadow: 0 1px 12px rgba(18,59,99,.08);
  backdrop-filter: blur(8px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-img {
  height: 48px; width: auto;
  display: block; object-fit: contain;
  flex-shrink: 0;
  padding: 0; margin: 0;
}

.global-nav ul {
  display: flex; align-items: center; gap: 2px;
}
.global-nav a {
  font-size: 13px; font-weight: 500;
  color: rgba(18,59,99,.72);
  padding: 6px 9px;
  border-radius: 6px;
  transition: color .18s;
  white-space: nowrap;
}
.global-nav a:hover { color: var(--navy); }
.global-nav a.active {
  color: var(--navy); font-weight: 700;
  border-bottom: 2px solid var(--coral);
  padding-bottom: 4px;
}
.global-nav .nav-cta {
  background: var(--coral);
  color: var(--white) !important;
  border-radius: var(--radius-btn);
  padding: 7px 18px;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(165,72,66,.25);
}
.global-nav .nav-cta:hover { color: var(--white); }

/* ハンバーガー */
.hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 8px; width: 40px; height: 40px;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* モバイルメニュー */
.mobile-menu {
  display: none;
  position: fixed; top: 64px; left: 0; right: 0;
  background: rgba(252,248,240,.98);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  z-index: 99;
  padding: 12px 0;
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { display: flex; flex-direction: column; }
.mobile-menu a {
  display: block; padding: 12px 24px;
  font-size: 14px; font-weight: 500; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:hover, .mobile-menu a.active { color: var(--coral); background: var(--blue-bg); }

/* ── 8. 波形区切り ─────────────────────────────────────── */
/* ── 主役の波（3層重ねアニメーション） ── */
.wave-band {
  position: relative;
  height: 80px;
  overflow: hidden;
  line-height: 0;
  margin-top: -1px;
}
.wave-band--lg { height: 120px; }

.wave-l {
  position: absolute;
  bottom: 0; left: 0;
  width: 200%;   /* 2880px: 半周スクロールでシームレスループ */
  height: 100%;
}
.wave-l--back  { opacity: 0.4; }
.wave-l--mid   { opacity: 0.65; }
.wave-l--front { opacity: 1; }

/* 次セクションの背景色をレイヤーに適用 */
.wave-band--to-white .wave-l path { fill: #FFFFFF; }
.wave-band--to-blue  .wave-l path { fill: #EAF7FC; }
.wave-band--to-cream .wave-l path { fill: #FCF8F0; }
.wave-band--to-navy  .wave-l path { fill: #1C88C8; }

@keyframes wave-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .wave-l { animation: none !important; }
}

/* ── 9. ヒーロー ────────────────────────────────────────── */
.hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 42%, rgba(235,247,252,.76) 100%),
    radial-gradient(ellipse at 78% 42%, rgba(116,185,220,.46), transparent 42%),
    radial-gradient(ellipse at 88% 8%, rgba(255,255,255,.9), transparent 36%),
    var(--cream);
  position: relative; overflow: hidden;
}

/* 背景のやわらかい光（装飾） */
.hero-glow-blue {
  position: absolute; top: 58px; right: 0;
  width: 52%; height: 420px; border-radius: 0;
  background: radial-gradient(ellipse at 72% 50%, rgba(45,127,181,.18), transparent 48%);
  pointer-events: none; z-index: 0;
  opacity: .82;
}
.hero-glow-warm {
  position: absolute; bottom: 82px; left: -80px;
  width: 360px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(165,72,66,.08) 0%, transparent 68%);
  pointer-events: none; z-index: 0;
}
.hero::before {
  content: '';
  position: absolute; top: 38px; left: 32px;
  width: min(42vw, 520px); height: 170px;
  background:
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(45,127,181,.13) 33px 35px, transparent 36px 64px);
  mask-image: radial-gradient(ellipse at 50% 100%, black 0 56%, transparent 57%);
  opacity: .36;
  pointer-events: none; z-index: 0;
}
.hero::after {
  content: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  gap: 40px;
  padding: 72px 32px 0;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative; z-index: 1;
  min-height: 520px;
}

.hero-text { padding-bottom: 80px; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  color: var(--navy); letter-spacing: .1em;
  margin-bottom: 22px;
}
.hero-tag::before {
  content: '';
  display: inline-block; width: 20px; height: 2px;
  background: var(--coral); border-radius: 2px;
}

.hero-h1 {
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.28;
  margin-bottom: 24px;
}
.hero-h1 .line-sm {
  display: block; font-size: 31px; font-weight: 700;
  color: var(--navy); margin-bottom: 4px;
}
.hero-h1 .line-lg {
  display: block; font-size: clamp(36px, 3.8vw, 48px); letter-spacing: .03em;
}
.hero-h1 .accent-coral { color: var(--coral); }

/* 筆文字タイトル（コーラル上段＋白主文の2レイヤー・書き順アニメ） */
.hero-h1--img { margin-bottom: 20px; }
.hero-title-stack {
  position: relative;
  display: block;
  width: 100%;
  max-width: clamp(360px, 44vw, 660px);   /* 大きめにして主役感を出す */
  aspect-ratio: 2172 / 724;               /* 画像の縦横比でレイヤーを重ねる */
  margin-bottom: 6px;
  /* 写真の上でも沈まないよう、文字形に沿った影でコントラスト確保 */
  filter: drop-shadow(0 2px 9px rgba(0,0,0,.45));
}
.htl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  /* 柔らかいブラシ縁（広いフェザー）で、左→右になめらかに書く */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(100deg, #000 0 34%, transparent 64% 100%);
          mask-image: linear-gradient(100deg, #000 0 34%, transparent 64% 100%);
  -webkit-mask-size: 205% 100%; mask-size: 205% 100%;
  -webkit-mask-position: 100% 0;  mask-position: 100% 0;   /* 最初は隠れている */
}
/* 書き順に順送り：上段 → 海の恵みを、 → 大切な人へ。ease で滑らかに */
.htl--top { animation: hero-handwrite 1.1s cubic-bezier(.4,.05,.35,1) .25s forwards; }
.htl--l2  { animation: hero-handwrite 1.5s cubic-bezier(.4,.05,.35,1) 1.0s forwards; }
.htl--l3  { animation: hero-handwrite 1.5s cubic-bezier(.4,.05,.35,1) 2.1s forwards; }
@keyframes hero-handwrite {
  to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } /* 全部現れる */
}
/* 動きを減らす設定では最初から全表示 */
@media (prefers-reduced-motion: reduce) {
  .htl {
    animation: none !important;
    -webkit-mask-image: none; mask-image: none;
  }
}

.hero-lead {
  font-size: 15px; line-height: 2.0;
  color: rgba(18,59,99,.72);
  max-width: 380px;
  margin-bottom: 36px;
}
/* SP のみ表示される1行サブテキスト（PC では非表示） */
.hero-sub { display: none; }

.hero-btns { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* 右：フォトカード列 */
.hero-photo-col {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
}

.photo-card {
  width: 100%; height: 460px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-blue);
  position: relative;
  border: 6px solid rgba(255,255,255,.84);
}

/* ── ヒーロー写真クロスフェード（3枚を時間で切り替え）────────────── */
.hero-slideshow .hero-slide {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: hero-fade 24s infinite cubic-bezier(.4,0,.2,1);
}
/* 3枚クロスフェード（24sループ・1/3ずつずらし／表示順 1→2→3）
   keyframe は phase0 で表示中のため、負の delay が大きいほど後に登場する。
   ⇒ 2枚目を -16s、3枚目を -8s にすることで 1→2→3 の自然な順番になる。 */
.hero-slideshow .hero-slide:nth-child(1) { animation-delay:   0s; }
.hero-slideshow .hero-slide:nth-child(2) { animation-delay: -16s; }
.hero-slideshow .hero-slide:nth-child(3) { animation-delay:  -8s; }

@keyframes hero-fade {
  0%,  25%   { opacity: 1; }   /* 表示 → 保持（約1/3） */
  33.33%     { opacity: 0; }   /* フェードアウト */
  91.66%     { opacity: 0; }   /* 待機 */
  100%       { opacity: 1; }   /* フェードイン */
}

/* モーション抑制時はアニメーションせず1枚目だけ表示 */
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow .hero-slide { animation: none; opacity: 0; }
  .hero-slideshow .hero-slide:first-child { opacity: 1; }
}

/* 3D冷凍バッジ */
.badge-circle {
  position: absolute; top: -16px; right: 20px; z-index: 3;
  width: 132px; height: 132px;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 64%, transparent 65%),
    repeating-radial-gradient(circle, transparent 0 55px, rgba(45,127,181,.58) 56px 58px, transparent 59px 63px);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--navy); text-align: center;
  padding: 10px; line-height: 1.5;
  box-shadow: 0 6px 24px rgba(18,59,99,.16);
}
.badge-circle .b-sm  { font-size: 9px; font-weight: 500; opacity: .8; }
.badge-circle .b-main {
  font-size: 11.5px; font-weight: 700;
  color: var(--coral); line-height: 1.4;
  margin: 2px 0;
}
.badge-circle .b-sub { font-size: 8.5px; opacity: .72; }

/* 作り手カード（写真左下） */
.maker-card {
  position: absolute; bottom: 28px; left: -20px; z-index: 3;
  background: rgba(255,255,255,.92);
  border-radius: var(--radius-sm);
  padding: 11px 16px 11px 11px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(45,127,181,.22);
  display: flex; align-items: center; gap: 11px;
  min-width: 200px;
}
.maker-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #c8dfe8 0%, #8ab8cc 100%);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--blue-bg);
}
.maker-avatar svg { width: 26px; height: 26px; fill: #4A8FA8; }
.maker-name  { font-size: 13px; font-weight: 700; color: var(--navy); }
.maker-title { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

/* ── 10. お悩みセクション ──────────────────────────────── */
.worries-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.worry-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 24px 14px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s;
}
.worry-card:hover { box-shadow: var(--shadow-soft); }
.worry-icon {
  width: 52px; height: 52px;
  background: var(--blue-bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-size: 24px;
}
.worry-text { font-size: 13px; color: var(--text); line-height: 1.55; }

/* ── 11. 選ばれる理由 ─────────────────────────────────── */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.reason-card {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 28px 20px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 10px;
}
.reason-icon-wrap {
  width: 52px; height: 52px;
  background: var(--blue-bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.reason-name {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--navy);
}
.reason-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; }

/* ── 12. 商品紹介 + 料金 ──────────────────────────────── */
.products-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* 左：商品紹介 */
.product-eyebrow { font-size: 12px; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.product-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 24px; font-weight: 500; color: var(--navy);
  margin-bottom: 12px;
}
.product-lead { font-size: 14px; color: var(--text-muted); line-height: 1.85; margin-bottom: 20px; }
.product-photo {
  width: 100%; aspect-ratio: 4/3;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-soft);
  margin-bottom: 20px;
}

/* 右：料金 */
.pricing-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.pricing-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 20px; font-weight: 700; color: var(--navy);
}
.pricing-note { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
.pricing-cards { display: flex; flex-direction: column; gap: 14px; }

.pricing-card {
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.pricing-label {
  display: inline-block;
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 11px; font-weight: 700;
  padding: 3px 12px;
  border-radius: var(--radius-btn);
  margin-bottom: 8px;
}
.pricing-label--popular {
  background: var(--navy);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pricing-label--popular svg { fill: var(--coral); flex-shrink: 0; }
.pricing-name { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.pricing-people { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.pricing-price {
  font-size: 30px; font-weight: 700;
  color: var(--coral); line-height: 1;
  margin-bottom: 2px;
}
.pricing-price span { font-size: 14px; font-weight: 400; }
.pricing-tax { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

/* ── 13. 大切なシーン（ネイビー）─────────────────────── */
.scene-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.scene-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 28px; font-weight: 500;
  color: var(--white); line-height: 1.4;
  margin-bottom: 18px;
}
.scene-lead { font-size: 14px; line-height: 2.0; color: rgba(255,255,255,.82); }
.scene-photo {
  width: 100%; aspect-ratio: 4/3;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

/* ── 14. ご購入の流れ ─────────────────────────────────── */
.flow-steps {
  display: flex; align-items: flex-start;
  justify-content: center; flex-wrap: wrap;
  gap: 0;
}
.flow-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 12px; }
.flow-icon {
  width: 68px; height: 68px;
  background: var(--blue-bg);
  border-radius: 50%;
  border: 2.5px solid var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 10px;
}
.flow-num { font-size: 11px; font-weight: 700; color: var(--blue); margin-bottom: 3px; }
.flow-name { font-size: 13px; font-weight: 700; color: var(--navy); }

.flow-arrow {
  font-size: 20px; font-weight: 700;
  color: var(--blue); padding: 0 4px;
  flex-shrink: 0; align-self: flex-start;
  margin-top: 23px; /* アイコン中央揃え */
}

/* ── 15. 販売実績 ─────────────────────────────────────── */
.sales-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
}
.sales-card {
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  padding: 28px 24px;
  display: flex; gap: 18px; align-items: center;
  box-shadow: var(--shadow-card);
}
.sales-icon {
  width: 76px; height: 76px; border-radius: var(--radius-sm);
  overflow: hidden; flex-shrink: 0;
}
.sales-name { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.sales-note { font-size: 13px; color: var(--text-muted); line-height: 1.65; }

/* ── 16. レビューカード ──────────────────────────────── */
.reviews-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.review-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.review-header { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.review-avatar {
  width: 54px; height: 54px;
  border-radius: 50%; flex-shrink: 0; overflow: hidden;
  border: 2px solid var(--blue-bg);
}
.review-meta-name { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.review-stars { color: var(--star); font-size: 15px; letter-spacing: 2px; }
.review-body { font-size: 13px; color: #4A5A6A; line-height: 1.75; margin-bottom: 14px; }
.review-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.review-tag {
  background: var(--blue-bg); color: var(--blue);
  border-radius: var(--radius-btn);
  padding: 3px 12px; font-size: 12px; font-weight: 500;
}

/* ── 17. FAQ カード（トップページ 2列）─────────────────── */
.faq-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.faq-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.faq-q, .faq-a { display: flex; align-items: flex-start; gap: 12px; }
.faq-q { margin-bottom: 10px; }
.faq-q-badge {
  width: 28px; height: 28px; background: var(--navy);
  color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; flex-shrink: 0; margin-top: 1px;
}
.faq-a-badge {
  width: 28px; height: 28px; background: var(--blue);
  color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; flex-shrink: 0; margin-top: 1px;
}
.faq-q-text { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.5; }
.faq-a-text { font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* ── 18. FAQアコーディオン（FAQ専用ページ）─────────────── */
.faq-accordion { display: flex; flex-direction: column; gap: 10px; max-width: 800px; margin: 0 auto; }
.faq-item { border: 1.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--white); }
.faq-question {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 20px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--navy);
  background: none; border: none; width: 100%; text-align: left;
  transition: background .18s;
}
.faq-question:hover { background: var(--blue-bg); }
.faq-question::before {
  content: 'Q';
  width: 30px; height: 30px; background: var(--navy);
  color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; flex-shrink: 0;
}
.faq-toggle { margin-left: auto; font-size: 20px; color: var(--blue); flex-shrink: 0; transition: transform .3s; }
.faq-item.is-open .faq-toggle { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 20px 18px 64px; font-size: 14px; color: var(--text-muted); line-height: 1.85; }
.faq-answer.is-open { display: block; }

/* ── 19. 会社情報 ─────────────────────────────────────── */
.company-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.company-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.company-lead { font-size: 14px; color: var(--text-muted); line-height: 1.85; margin-bottom: 20px; }
.company-info-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.company-info-row { display: flex; align-items: flex-start; gap: 12px; }
.company-info-icon {
  width: 32px; height: 32px; background: var(--blue-bg);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 15px; margin-top: 1px;
}
.company-info-label { font-size: 11px; font-weight: 700; color: var(--blue); display: block; }
.company-info-value { font-size: 14px; color: var(--text); line-height: 1.55; }
.company-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.company-photo {
  aspect-ratio: 1/1; border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow-card);
}

/* ── 20. フッター ─────────────────────────────────────── */
.site-footer { background: linear-gradient(180deg, #1C88C8 0%, #1878B4 42%, #1470A6 100%); color: var(--white); }
.footer-main { padding: 52px 0 36px; }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-logo { display: flex; align-items: center; }
.logo-img--footer {
  height: 30px; width: auto; display: block; object-fit: contain;
  filter: grayscale(1) contrast(2) invert(1);
  mix-blend-mode: screen;
  opacity: 0.9;
}
.footer-info { font-size: 13px; line-height: 1.9; opacity: .8; }
.footer-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.footer-nav-grid a { font-size: 13px; opacity: .78; transition: opacity .18s; padding: 3px 0; display: block; }
.footer-nav-grid a:hover { opacity: 1; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 14px 0;
}
.footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.footer-bottom-left { display: flex; align-items: center; gap: 16px; }
.footer-bottom-logo { display: flex; align-items: center; gap: 8px; opacity: .7; }
.logo-img--footer-sm {
  height: 18px; width: auto; display: block; object-fit: contain;
  filter: grayscale(1) contrast(2) invert(1);
  mix-blend-mode: screen;
}
.footer-bottom-address { font-size: 11px; opacity: .52; }
.footer-bottom-nav { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-bottom-nav a { font-size: 11px; opacity: .52; transition: opacity .18s; }
.footer-bottom-nav a:hover { opacity: 1; }
.footer-copyright { font-size: 11px; opacity: .4; text-align: right; }

/* ── 21. サブページ ヒーロー ──────────────────────────── */
.page-hero {
  background: var(--cream);
  padding: 56px 0 48px;
  position: relative; overflow: hidden;
}
.page-hero-inner {
  display: grid; grid-template-columns: 1fr 260px; gap: 32px; align-items: center;
}
.page-hero-breadcrumb { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.page-hero-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 36px; font-weight: 500;
  color: var(--navy); line-height: 1.3; margin-bottom: 12px;
}
.page-hero-lead { font-size: 14px; color: var(--text-muted); line-height: 1.85; }
.page-hero-photo { border-radius: var(--radius); overflow: hidden; }
.page-hero-photo .ph { width: 100%; aspect-ratio: 4/3; }

/* ── 22. レスポンシブ ──────────────────────────────────── */
@media (max-width: 1024px) {
  .reasons-grid     { grid-template-columns: repeat(2,1fr); }
  .worries-grid     { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 768px) {
  .global-nav { display: none; }
  .hamburger  { display: flex; }

  .hero-inner          { grid-template-columns: 1fr; }
  .hero-h1 .line-lg    { font-size: 36px; }
  .hero-text           { padding-bottom: 32px; }

  .products-pricing    { grid-template-columns: 1fr; }
  .scene-inner         { grid-template-columns: 1fr; }
  .reviews-grid        { grid-template-columns: 1fr; }
  .sales-grid          { grid-template-columns: 1fr; }
  .company-grid        { grid-template-columns: 1fr; }
  .footer-inner        { grid-template-columns: 1fr; }
  .reasons-grid        { grid-template-columns: repeat(2,1fr); }
  .worries-grid        { grid-template-columns: repeat(2,1fr); }
  .faq-cards           { grid-template-columns: 1fr; }
  .flow-steps          { flex-direction: column; }
  .flow-arrow          { transform: rotate(90deg); margin-top: 0; }
  .page-hero-inner     { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section             { padding: 56px 0; }

  /* スマホでのみ非表示にする要素 */
  .sp-hide             { display: none !important; }
}

@media (max-width: 480px) {
  .reasons-grid    { grid-template-columns: repeat(2,1fr); }
  .worries-grid    { grid-template-columns: repeat(2,1fr); }
  .hero-h1 .line-lg { font-size: 30px; }
  .hero-h1 .line-sm { font-size: 20px; }
  .section-title   { font-size: 22px; }
}

/* ── 23. 波形セクション（下端 padding を 0 にして波と密着させる） ──── */
.wave-section { padding-bottom: 0 !important; position: relative; overflow: hidden; }

/* ── 24. フォント比較バナー（確認用・確定後は削除） ──── */
.font-compare-bar {
  background: #1E2A3A;
  color: white;
  padding: 20px 32px;
  position: relative;
}
.font-compare-label {
  font-size: 11px; opacity: .6; letter-spacing: .05em;
  margin-bottom: 16px;
}
.font-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.font-compare-item { padding: 16px 20px; background: rgba(255,255,255,.06); border-radius: 10px; }
.font-compare-name { font-size: 11px; opacity: .55; margin-bottom: 6px; font-family: monospace; }
.font-compare-demo { line-height: 1.3; color: white; }
.font-compare-demo .demo-sm { display: block; font-size: 16px; opacity: .7; margin-bottom: 2px; }
.font-compare-demo .demo-lg { display: block; font-size: 32px; }
.font-compare-demo .demo-coral { color: #E07A55; }
.font-compare-close-btn {
  position: absolute; top: 12px; right: 20px;
  background: rgba(255,255,255,.1); border: none; color: rgba(255,255,255,.6);
  font-size: 12px; padding: 4px 10px; border-radius: 4px;
  cursor: pointer; font-family: inherit;
}
.font-compare-close-btn:hover { background: rgba(255,255,255,.2); color: white; }

/* ── 25. 商品ページ専用 ───────────────────────────── */

/* ページヒーロー（サブページ共通 拡張版 — 画像つき2列） */
.page-hero-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.page-hero-text { padding: 56px 0 0; }
.page-hero-img-col { display: flex; align-items: flex-end; }
.page-hero-img {
  width: 100%; aspect-ratio: 4/3;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-blue);
  position: relative;
}

/* 特長アイコン行 */
.features-strip {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.feature-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
  width: 180px;
}
.feature-icon-wrap {
  width: 64px; height: 64px;
  background: var(--blue-bg);
  border-radius: 50%;
  border: 2px solid var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.feature-name {
  font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.4;
}
.feature-desc { font-size: 12px; color: var(--text-muted); line-height: 1.55; }

/* 商品一覧 3カード横並び */
.product-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.product-list-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 0.5px solid var(--border);
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.product-list-card:hover { box-shadow: var(--shadow-blue); }
.product-list-card--popular {
  border: none;
  outline: none;
  background: #FBF0EE;
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
  transform: scale(1.04);
  position: relative;
  z-index: 2;
  overflow: visible;        /* バッジがカード上辺に重なれるよう */
  padding-top: 28px;        /* 絶対配置バッジの分の余白 */
  transition: box-shadow .2s, transform .2s;
}
.product-list-card--popular:hover {
  box-shadow: 0 20px 44px rgba(0,0,0,.20);
  transform: scale(1.04) translateY(-4px);
}
/* overflow:visible になったため画像コーナーを個別にクリップ */
.product-list-card--popular .product-card-photo {
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.product-card-ribbon {
  position: relative;
  background: var(--blue-bg);
  padding: 8px 12px;
  font-size: 11px; font-weight: 700; color: var(--blue);
  text-align: center;
}
.product-card-ribbon--popular {
  /* ピル型バッジ：カード上辺に14px重なる */
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #A32D2D;
  color: #fff;
  opacity: 1;
  border-radius: 20px;
  white-space: nowrap;
  padding: 6px 22px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  z-index: 3;
}
.product-card-ribbon--popular::before {
  display: none;
}
.popular-badge-main {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #fff;
}
.popular-badge-main svg { fill: #fff; flex-shrink: 0; }
.popular-badge-sub {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.88);
  font-weight: 400;
}

.product-card-photo {
  width: 100%; aspect-ratio: 4/3;
  overflow: hidden;
}
.product-card-body {
  padding: 24px 24px 28px;
  display: flex; flex-direction: column; flex: 1;
}
.product-card-name {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 18px; font-weight: 700; color: var(--navy);
  margin-bottom: 4px;
}
.product-card-serving {
  font-size: 12px; color: var(--text-muted); margin-bottom: 12px;
  line-height: 1.5;
}
.product-card-desc {
  font-size: 13px; color: var(--text-muted); line-height: 1.7;
  margin-bottom: 14px; flex: 1;
}
.product-card-price {
  font-size: 32px; font-weight: 700; color: var(--coral);
  line-height: 1; margin-bottom: 2px;
}
.product-card-price span { font-size: 15px; font-weight: 400; }
.product-card-tax { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }

/* 商品詳細 3列 */
.product-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}
.info-block {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 24px;
}
.info-block-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 15px; font-weight: 700; color: var(--navy);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.info-row {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; color: var(--text);
  padding: 6px 0; border-bottom: 1px solid var(--blue-bg);
  line-height: 1.55;
}
.info-row:last-child { border-bottom: none; }
.info-label {
  font-weight: 700; color: var(--navy);
  flex-shrink: 0; min-width: 72px;
}
.info-icon-row {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--text);
  padding: 8px 0; border-bottom: 1px solid var(--blue-bg);
  line-height: 1.55;
}
.info-icon-row:last-child { border-bottom: none; }
.info-icon {
  font-size: 18px; flex-shrink: 0; margin-top: 1px;
}
.info-icon-text { flex: 1; }
.info-icon-text strong { color: var(--navy); font-weight: 700; display: block; margin-bottom: 2px; }

.warning-row {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: #555;
  padding: 6px 0; border-bottom: 1px solid var(--blue-bg);
  line-height: 1.6;
}
.warning-row:last-child { border-bottom: none; }
.warning-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ギフト・配送サポート */
.gift-support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}
.gift-card {
  text-align: center;
}
.gift-card-img {
  width: 100%; aspect-ratio: 3/2;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.gift-card-name {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 15px; font-weight: 700; color: var(--navy);
  margin-bottom: 6px;
}
.gift-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* LINE CTAバナー */
.line-cta-banner {
  background: var(--white);
  border: 2px solid var(--line-green);
  border-radius: var(--radius);
  padding: 40px 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.line-cta-text {}
.line-cta-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 22px; font-weight: 700; color: var(--navy);
  margin-bottom: 8px;
}
.line-cta-lead { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; }
.line-cta-btns { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.line-cta-phone {
  width: 140px;
  aspect-ratio: 9/16;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* レスポンシブ追加 */
@media (max-width: 1024px) {
  .product-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .gift-support-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .page-hero-2col     { grid-template-columns: 1fr; }
  .features-strip     { gap: 12px; }
  .feature-item       { width: 140px; }
  .product-cards-grid { grid-template-columns: 1fr; }
  .product-info-grid  { grid-template-columns: 1fr; }
  .gift-support-grid  { grid-template-columns: 1fr; }
  .line-cta-banner    { grid-template-columns: 1fr; padding: 28px 24px; }
  .line-cta-phone     { display: none; }
  /* SP: 人気カードは scale 解除、背景+影のみで強調 */
  .product-list-card--popular {
    transform: none !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.14) !important;
  }
  .product-list-card--popular:hover {
    transform: translateY(-3px) !important;
  }
}

/* ── トップページ限定: 商品カード横スライド (#pricing) ── */
/* products.html の通常 .product-cards-grid には影響させない（--slider のみ対象） */
.slider-hint { display: none; }          /* PCでは非表示 */
@media (max-width: 768px) {
  .product-cards-grid--slider {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 24px 16px 14px;             /* top は人気バッジ(top:-14px)が切れない余白 */
    margin-inline: -16px;                /* 端まで気持ちよくスクロール */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;               /* Firefox スクロールバー非表示 */
  }
  .product-cards-grid--slider::-webkit-scrollbar { display: none; }
  .product-cards-grid--slider .product-list-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
  /* 横スライド内では拡大すると見切れるので無効化（リボン＋背景色で強調） */
  .product-cards-grid--slider .product-list-card--popular {
    transform: none;
  }
  .slider-hint {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'M PLUS Rounded 1c', sans-serif;
  }
}

/* ── 26. 会社概要ページ専用 ─────────────────────────── */

/* 代表メッセージ */
.ceo-section {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
}
.ceo-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 3/4;
}
.ceo-eyebrow {
  font-size: 12px; font-weight: 700; color: var(--blue);
  letter-spacing: .04em; margin-bottom: 10px;
}
.ceo-heading {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 30px; font-weight: 700; color: var(--navy);
  line-height: 1.35; margin-bottom: 20px;
}
.ceo-heading .accent { color: var(--blue); }
.ceo-body {
  font-size: 14px; line-height: 1.95; color: var(--text-muted);
  margin-bottom: 24px;
}
.ceo-signature {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px;
}
.ceo-sig-label { font-size: 11px; color: var(--text-muted); }
.ceo-sig-name  { font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 18px; font-weight: 500; color: var(--navy); }

/* 会社の想い 4列グリッド */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.value-card {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 24px 16px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.value-icon {
  width: 56px; height: 56px;
  background: var(--blue-bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin: 0 auto 12px;
}
.value-name {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--navy);
  margin-bottom: 6px;
}
.value-desc { font-size: 12px; color: var(--text-muted); line-height: 1.65; }

/* 加工風景・取扱風景 */
.scene-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: start;
}
.scene-row--reverse { grid-template-columns: 2fr 1fr; }
.scene-label {
  font-size: 12px; font-weight: 700; color: var(--blue);
  letter-spacing: .04em; margin-bottom: 8px;
}
.scene-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 20px; font-weight: 700; color: var(--navy);
  margin-bottom: 12px; line-height: 1.4;
}
.scene-desc { font-size: 14px; color: var(--text-muted); line-height: 1.85; }

/* 青帯（section--navy）上の「大切なシーンに選ばれています」は白＋太字＋影で視認性を確保
   （上の .scene-title が var(--navy) で上書きされ青帯に青文字になる問題への対策） */
.section--navy .scene-title {
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(8,48,78,.45);
}
.section--navy .scene-lead { color: rgba(255,255,255,.92); }

.photos-3col {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.photos-2col {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.scene-thumb {
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4/3;
}

/* アクセスセクション */
.access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.map-placeholder {
  width: 100%; aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1.5px solid var(--border);
  background: var(--blue-bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  color: var(--text-muted); font-size: 13px; text-align: center;
}

/* 下部 CTA バナー */
.page-bottom-cta {
  background: var(--blue-bg);
  border-radius: var(--radius);
  padding: 36px 40px;
  text-align: center;
  border: 1.5px solid var(--border);
}
.page-bottom-cta-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 18px; font-weight: 700; color: var(--navy);
  margin-bottom: 24px;
}
.page-bottom-cta-btns {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ceo-section       { grid-template-columns: 1fr; }
  .ceo-photo         { max-width: 240px; }
  .values-grid       { grid-template-columns: repeat(2, 1fr); }
  .scene-row         { grid-template-columns: 1fr; }
  .scene-row--reverse { grid-template-columns: 1fr; }
  .access-grid       { grid-template-columns: 1fr; }
  .photos-3col       { grid-template-columns: repeat(2, 1fr); }
  .page-bottom-cta   { padding: 28px 20px; }
}

/* ── 27. お問い合わせ・フォーム ──────────────────────── */

/* LINE先行バナー */
.line-first-banner {
  background: #f0fbf4;
  border: 2px solid var(--line-green);
  border-radius: var(--radius);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.line-first-text { flex: 1; min-width: 220px; }
.line-first-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 17px; font-weight: 700; color: var(--navy);
  margin-bottom: 4px;
}
.line-first-desc { font-size: 13px; color: var(--text-muted); }
.line-first-badges {
  display: flex; gap: 16px; flex-wrap: wrap;
}
.line-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--navy);
}
.line-badge-icon { font-size: 18px; }

/* フォーム + 連絡先 2列 */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}

/* フォーム */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-size: 13px; font-weight: 700; color: var(--navy);
  display: flex; align-items: center; gap: 6px;
}
.form-required {
  background: var(--coral); color: white;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
}
.form-optional {
  background: var(--blue-bg); color: var(--blue);
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
}
.form-input,
.form-select,
.form-textarea {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  transition: border-color .18s, box-shadow .18s;
  width: 100%;
  appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46,136,200,.12);
}
.form-textarea { resize: vertical; min-height: 140px; line-height: 1.7; }
.form-select { background-image: none; background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }

.form-agree {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--text-muted); line-height: 1.6;
  cursor: pointer;
}
.form-agree input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0;
  accent-color: var(--blue); margin-top: 1px;
}
.form-agree a { color: var(--blue); text-decoration: underline; }

/* 連絡先パネル */
.contact-info-panel {
  background: var(--blue-bg);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.contact-info-panel-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 15px; font-weight: 700; color: var(--navy);
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--border);
}
.contact-info-item {
  display: flex; align-items: flex-start; gap: 12px;
}
.contact-info-icon {
  width: 36px; height: 36px;
  background: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 16px;
  box-shadow: var(--shadow-card);
}
.contact-info-label {
  font-size: 11px; font-weight: 700; color: var(--blue);
  display: block; margin-bottom: 2px;
}
.contact-info-value { font-size: 14px; color: var(--navy); font-weight: 500; line-height: 1.5; }
.contact-info-sub  { font-size: 12px; color: var(--text-muted); }

/* よくある問い合わせ例 */
.inquiry-examples {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.inquiry-card {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 20px 16px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.inquiry-icon { font-size: 28px; margin-bottom: 10px; display: block; }
.inquiry-name { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.inquiry-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

@media (max-width: 1024px) {
  .inquiry-examples { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .contact-layout    { grid-template-columns: 1fr; }
  .line-first-banner { flex-direction: column; gap: 16px; }
  .inquiry-examples  { grid-template-columns: repeat(2, 1fr); }
}

/* LINE優先大カード */
/* 全幅グリーンストライプ（枠なし・角丸なし） */
.line-priority-strip {
  background: linear-gradient(120deg, #009f42 0%, #06C755 50%, #00d460 100%);
  padding: 56px 0;
}
/* 内側レイアウト（コンテナ内） */
.line-priority-inner {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 40px;
  align-items: center;
}
.line-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.22);
  color: white;
  font-size: 11px; font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.line-priority-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 30px; font-weight: 700;
  color: white; line-height: 1.3;
  margin-bottom: 10px;
}
.line-priority-sub {
  font-size: 15px; color: rgba(255,255,255,.9);
  line-height: 1.75; margin-bottom: 28px;
}
.line-priority-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 36px;
}
.line-priority-list li {
  font-size: 14px; color: white;
  display: flex; align-items: flex-start; gap: 8px;
}
.line-priority-list li::before {
  content: '✓';
  font-weight: 700;
  background: rgba(255,255,255,.3);
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0; margin-top: 1px;
}
.btn--line-white {
  background: white;
  color: #06C755;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.btn--line-white:hover { background: #f0fbf4; }
.line-priority-visual {
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.18));
}
.line-brand-icon {
  width: 120px; height: 120px;
  background: rgba(255,255,255,0.22);
  border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

/* 「または」区切り */
.contact-divider {
  display: flex; align-items: center; gap: 20px;
  margin: 52px 0 44px;
  color: var(--text-muted); font-size: 13px; font-weight: 500;
}
.contact-divider::before,
.contact-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* フォームセクション見出し補足 */
.form-section-lead {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.75;
  padding: 12px 18px 12px 20px;
  background: var(--cream);
  border-left: 3px solid var(--blue-mid);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 28px;
}

/* メールアプリ注意書き */
.mailto-notice {
  background: #FFFBEF;
  border: 1px solid #F5A623;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 13px; color: var(--text);
  line-height: 1.8; margin-bottom: 28px;
}
.mailto-notice strong { color: var(--navy); }
.mailto-notice a { color: var(--blue); font-weight: 500; }

/* フォーム近くの電話・LINE ショートカット */
.form-contact-shortcuts {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.form-shortcut-tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--navy);
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-btn);
  background: white; text-decoration: none;
}
.form-shortcut-tel:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 768px) {
  .line-priority-strip { padding: 40px 0; }
  .line-priority-inner { grid-template-columns: 1fr; }
  .line-priority-visual { display: none; }
  .line-priority-title { font-size: 22px; }
}

/* ── 28. 配送・返品ページ ───────────────────────────── */
.shipping-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.shipping-card {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 24px 16px;
  text-align: center;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--border);
}
.shipping-card-icon { font-size: 32px; margin-bottom: 10px; display: block; }
.shipping-card-name { font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.shipping-card-value { font-size: 20px; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.shipping-card-desc { font-size: 12px; color: var(--text-muted); }

.shipping-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

.shipping-block { }
.shipping-block-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--navy);
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 3px solid var(--blue);
}
.shipping-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text); line-height: 1.65;
}
.shipping-item:last-child { border-bottom: none; }
.shipping-item-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.shipping-item-text strong { font-weight: 700; color: var(--navy); display: block; margin-bottom: 2px; }

@media (max-width: 1024px) { .shipping-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  {
  .shipping-features { grid-template-columns: repeat(2, 1fr); }
  .shipping-info-grid { grid-template-columns: 1fr; }
}

/* ── 29. プライバシー・特商法ページ ─────────────────── */
.policy-article {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.policy-section { }
.policy-section-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.policy-section-num {
  width: 32px; height: 32px;
  background: var(--blue); color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.policy-section-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 17px; font-weight: 700; color: var(--navy);
}
.policy-body { font-size: 14px; color: var(--text); line-height: 1.9; padding-left: 44px; }
.policy-body ul { padding-left: 1em; margin-top: 8px; }
.policy-body li { margin-bottom: 4px; }

.policy-company-box {
  max-width: 800px; margin: 0 auto;
  background: var(--blue-bg);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  padding: 24px;
}
.policy-company-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 15px; font-weight: 700; color: var(--navy);
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border);
}

/* 特商法テーブル */
.legal-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
.legal-table th, .legal-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
  line-height: 1.7;
}
.legal-table th {
  width: 28%; background: var(--blue-bg);
  font-weight: 700; color: var(--navy);
  white-space: nowrap;
}
.legal-table td { background: var(--white); color: var(--text); }
.legal-table tr:last-child th,
.legal-table tr:last-child td { border-bottom: none; }

.legal-notice-box {
  background: #fff8f5;
  border: 1.5px solid var(--coral);
  border-radius: var(--radius-sm);
  padding: 24px;
  margin-top: 32px;
}
.legal-notice-title {
  font-size: 15px; font-weight: 700; color: var(--coral);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.legal-notice-body { font-size: 13px; color: var(--text); line-height: 1.85; }

/* ── SVGアイコン 統一スタイル（Heroicons v2 Outline）── */

/* 大型アイコン円（特長・理由・価値・フロー） */
.worry-icon svg,
.reason-icon-wrap svg,
.value-icon svg,
.feature-icon-wrap svg {
  width: 28px; height: 28px;
  stroke: var(--blue);
  display: block;
}
.flow-icon svg {
  width: 30px; height: 30px;
  stroke: var(--blue);
  display: block;
}

/* UI小型アイコン（連絡先） */
.company-info-icon svg,
.contact-info-icon svg {
  width: 18px; height: 18px;
  stroke: var(--blue);
  display: block;
}

/* shipping カードアイコン */
.shipping-card-icon svg {
  width: 36px; height: 36px;
  stroke: var(--blue);
  display: block;
  margin: 0 auto;
}
/* shipping アイテムアイコン */
.shipping-item-icon svg {
  width: 20px; height: 20px;
  stroke: var(--blue);
  display: block;
}
.shipping-item-icon.icon-check svg { stroke: #16a34a; }
.shipping-item-icon.icon-warn  svg { stroke: #d97706; }

/* お問い合わせ例アイコン */
.inquiry-icon svg {
  width: 32px; height: 32px;
  stroke: var(--blue);
  display: block;
  margin: 0 auto;
}

/* ボタン内 SVGアイコン（stroke 対応） */
.btn .btn-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  display: block;
}
.btn .btn-icon[fill="none"] { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* レビュー星評価 */
.review-stars {
  display: flex; gap: 2px; margin-bottom: 8px;
  color: var(--star);
}
.review-stars svg {
  width: 16px; height: 16px;
  fill: var(--star);
  display: block;
}

/* products.html 詳細・注意アイコン */
.info-icon svg {
  width: 20px; height: 20px;
  stroke: var(--blue);
  display: block;
}
.warning-icon svg {
  width: 16px; height: 16px;
  stroke: #d97706;
  display: block;
}
.info-block-title svg {
  width: 18px; height: 18px;
  stroke: var(--blue);
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

/* インライン小アイコン（注意書き内など） */
.icon-inline {
  width: 16px; height: 16px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ==========================================
   v3 デザイン改定: カードレス + 水産装飾
   2026-06
   ========================================== */

/* ── カードボックス除去 ───────────────────── */

/* お悩みカード: 白枠・影をやめてナンバー+テキストのみ */
.worry-card {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 16px 10px;
}
.worry-card:hover { box-shadow: none; }

/* お悩み番号バッジ（アイコン円の代替） */
.worry-num {
  width: 44px; height: 44px;
  background: var(--navy);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 13px; font-weight: 700;
  color: white;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* 選ばれる理由: 白ボックス → 左アクセントライン */
.reason-card {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-left: 3px solid rgba(46,136,200,.32);
  padding: 16px 16px 16px 20px;
}
/* --blue 背景上のアイコン円は白みがかりに */
.section--blue .reason-icon-wrap { background: rgba(255,255,255,.55); }

/* 販売実績カード: 下線のみ・左右余白なし */
.sales-card {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(46,136,200,.22);
  padding: 20px 4px;
}
.sales-card:last-child { border-bottom: none; }
.sales-grid { gap: 0; }

/* ご購入の流れ: アイコン円の枠を軽く */
.flow-icon {
  border-width: 1.5px;
  border-color: rgba(46,136,200,.35);
  background: rgba(234,245,251,.7);
}

/* ── 会社写真グリッド: 非対称レイアウト ──────── */
.company-photo-grid {
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr 1fr;
  min-height: 320px;
  gap: 10px;
}
.company-photo:first-child { grid-row: 1 / 3; aspect-ratio: unset; }
.company-photo:nth-child(2),
.company-photo:nth-child(3) { aspect-ratio: unset; }
.company-photo:nth-child(4) { display: none; }

/* ── scene-photo: 角丸を控えめに ─────────────── */
.scene-photo { border-radius: var(--radius-sm); }

/* scene-photo は写真全体を見せる（端を切らない）。
   固定の 4/3 をやめ、画像本来の比率で高さを自動にする */
.scene-photo { aspect-ratio: auto; }
.scene-photo img { height: auto; object-fit: contain; }

/* ==========================================
   装飾システム v6 — 統一ルール（2026-06）
   ==========================================

   使う装飾は以下の3種類のみ。
   1. 主役の波   → .wave-band（上部で定義済み）
   2. 地紋アクセント → .deco-seigaiha（青海波・コーナーのみ・3箇所まで）
   3. 見出し波線 → .wave-line（既定義）

   廃止: wave-float-deco / bubble-deco / arc-deco /
         bg-seigaiha / bg-seigaiha-lg / bg-sazanami / bg-bubbles
   ========================================== */

/* ── 地紋アクセント（青海波・コーナー断片のみ）── */
.deco-seigaiha {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 240px;
  height: 180px;
  background-image:
    repeating-radial-gradient(circle at 50% 100%, transparent 0 22px, rgba(45,127,181,.18) 23px 25px, transparent 26px 45px);
  background-size: 52px 52px;
}
.deco-seigaiha--tr {
  top: 0; right: 0;
  mask-image: radial-gradient(ellipse 90% 90% at 95% 5%, white 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 95% 5%, white 0%, transparent 65%);
}
.deco-seigaiha--br {
  bottom: 100px; right: 0;
  mask-image: radial-gradient(ellipse 90% 90% at 95% 95%, white 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 95% 95%, white 0%, transparent 65%);
}
.deco-seigaiha--tl {
  top: 0; left: 0;
  mask-image: radial-gradient(ellipse 90% 90% at 5% 5%, white 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 5% 5%, white 0%, transparent 65%);
}
.deco-seigaiha--bl {
  bottom: 100px; left: 0;
  mask-image: radial-gradient(ellipse 90% 90% at 5% 95%, white 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 5% 95%, white 0%, transparent 65%);
}

/* ==========================================
   v8: アイコン主役レイアウト（2026-06）
   お悩み + 選ばれる理由 の両セクション
   ========================================== */

/* ── お悩みカード ─────────────────────────── */
.worry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 8px 16px;
  gap: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(239,249,253,.42)),
    repeating-radial-gradient(circle at 20% 18%, transparent 0 13px, rgba(45,127,181,.10) 14px 15px, transparent 16px 28px);
  border: 1px solid rgba(45,127,181,.18);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(18,59,99,.045);
}
.worry-card:hover { box-shadow: 0 6px 18px rgba(18,59,99,.08); }
.worry-icon {
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px;
}
.worry-icon svg {
  width: 44px; height: 44px;
  stroke: var(--navy);
  color: var(--navy);
  display: block;
}
.worry-num {
  display: block;
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  opacity: 0.6;
  letter-spacing: 0.15em;
  margin: 0 0 7px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  flex-shrink: unset;
}
.worry-text {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.55;
}

/* ── セクション橋渡し ─────────────────────── */
.section-bridge {
  text-align: center;
  margin-top: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  position: relative;
  line-height: 1.6;
}
.section-bridge::before {
  content: '';
  display: block;
  width: 1px;
  height: 28px;
  background: var(--blue);
  opacity: 0.45;
  margin: 0 auto 14px;
}

/* ── 選ばれる理由カード ───────────────────── */
.reason-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px;
  gap: 10px;
  background: rgba(255,255,255,.43);
  border: 1px solid rgba(45,127,181,.16);
  border-left: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(18,59,99,.045);
}
.reason-icon-wrap {
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reason-icon-wrap .reason-icon-svg,
.reason-icon-svg {
  width: 52px; height: 52px;
  color: var(--navy);
  stroke: var(--navy);
  display: block;
}
.reason-name { font-size: 16px; }
.section--blue .reason-icon-wrap { background: none; }

/* ── 会社の想い / レビュー value-card も同方針 ── */
.value-card {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 12px;
  gap: 8px;
}
.value-icon {
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 4px;
}
.value-icon svg {
  width: 48px; height: 48px;
  stroke: var(--navy);
  color: var(--navy);
  display: block;
}
.value-name {
  font-size: 15px;
}
.section--white .value-icon svg { stroke: var(--blue); color: var(--blue); }

/* ── SP: お悩み5枚目（奇数最終）を全幅センタリング ── */
@media (max-width: 768px) {
  .worries-grid > .worry-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 200px;
    margin: 0 auto;
  }
}

/* ==========================================
   ボタン 海エフェクト
   ホバー: 波が下から満ちてくる
   タップ/クリック: 水面の波紋 (JSと連携)
   ========================================== */

/* ── ホバー波 ─────────────────────────── */
.btn::before {
  content: '';
  position: absolute;
  left: -10%;
  width: 120%;
  height: 78%;
  bottom: 0;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateY(106%);
  transition: transform 0.52s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
}
.btn:hover::before {
  transform: translateY(0);
}
.btn:active::before {
  transform: translateY(115%);
  transition-duration: 0.1s;
}

/* アウトラインボタンは波の色を青みに */
.btn--blue-outline::before,
.btn--navy-outline::before {
  background: rgba(46, 136, 200, 0.10);
}

/* ==========================================
   提案C: 食卓バナー（商品セクション直前）
   ========================================== */
.food-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 6;
  overflow: hidden;
}
.food-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}
.food-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(23, 58, 94, 0.68) 0%,
    rgba(23, 58, 94, 0.38) 48%,
    transparent 72%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6% 0 7%;
}
.food-banner-sub {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  margin-bottom: 10px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
.food-banner-main {
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 22px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  text-shadow: 0 1px 8px rgba(0,0,0,0.18);
}
@media (max-width: 768px) {
  .food-banner { aspect-ratio: 4 / 3; }
  .food-banner-overlay {
    background: linear-gradient(
      180deg,
      transparent 20%,
      rgba(23, 58, 94, 0.72) 65%,
      rgba(23, 58, 94, 0.82) 100%
    );
    justify-content: flex-end;
    padding: 0 6% 8% 6%;
  }
}

/* ── モバイル追従LINEボタン ────────────────────────────── */
.line-float {
  position: fixed;
  bottom: 20px;
  right: 14px;
  z-index: 990;
  display: none; /* SP(~768px)のみ表示 */
  align-items: center;
  gap: 7px;
  background: var(--line-green);
  color: white;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 999px;
  box-shadow: 0 4px 22px rgba(6,199,85,.40);
  text-decoration: none;
  transition: opacity .3s, transform .3s;
  letter-spacing: .02em;
}
.line-float img { width: 22px; height: 22px; }
.line-float.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
@media (max-width: 768px) { .line-float { display: flex; } }

/* contactページ LINE PNGビジュアル */
.line-brand-img {
  width: 120px;
  height: 120px;
  border-radius: 28px;
  display: block;
}

/* ご購入の流れ後 CTA */
.flow-cta {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-top: 40px; padding-top: 36px;
  border-top: 1px solid var(--border);
}

/* 各ページ下部 CTA 帯 */
.cta-band {
  background: var(--navy);
  padding: 64px 0 60px;
  text-align: center;
}
.cta-band-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700; color: white;
  line-height: 1.5; margin-bottom: 6px;
}
.cta-band-sub {
  font-size: 14px; color: rgba(255,255,255,.60);
  margin-bottom: 32px; line-height: 1.75;
}
.cta-band-btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
@media (max-width: 480px) {
  .cta-band { padding: 48px 0 44px; }
  .cta-band-btns { flex-direction: column; align-items: center; }
  .cta-band-btns .btn { width: 88%; justify-content: center; }
  .line-float { right: 10px; bottom: 16px; font-size: 12.5px; padding: 10px 16px; }
}

/* ==========================================
   和風水彩トーン調整（参考画像の雰囲気）
   構成は変えず、背景・装飾・質感のみを強化。
   ========================================== */

.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(45,127,181,.42), rgba(165,72,66,.32), transparent);
  pointer-events: none;
}

body:not(:has(:target)) .global-nav a[href*="#"].active {
  color: rgba(18,59,99,.72);
  font-weight: 500;
  border-bottom-color: transparent;
}

.logo-img {
  filter: saturate(.92) contrast(1.04);
}

.section-title,
.page-hero h1,
.page-hero-text h1,
.page-hero-text h2,
.hero-h1,
.product-title,
.pricing-title,
.scene-title,
.food-banner-main,
.cta-band-title {
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif !important;
  letter-spacing: .04em;
}

.page-hero h1 {
  color: var(--navy) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

.page-hero-text h1,
.page-hero-text h2 {
  color: var(--navy) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

.section-title::after,
.page-hero h1::after,
.page-hero-text h1::after {
  content: '';
  display: block;
  width: 92px;
  height: 12px;
  margin: 12px auto 0;
  background:
    radial-gradient(circle at 8px 6px, transparent 0 4px, rgba(45,127,181,.75) 4.5px 5.5px, transparent 6px),
    radial-gradient(circle at 28px 6px, transparent 0 4px, rgba(45,127,181,.75) 4.5px 5.5px, transparent 6px);
  background-size: 40px 12px;
  opacity: .78;
}

.section-title::after {
  display: none;
}

.page-hero h1::after,
.page-hero-text h1::after {
  display: block;
  margin-left: 0;
  margin-right: 0;
}

.wave-line path {
  stroke: var(--blue);
  stroke-width: 2;
}

.hero-inner {
  min-height: 555px;
}

.hero-text {
  padding-bottom: 96px;
}

.hero-photo-col::before {
  content: none;
}

.photo-card::after,
.product-photo::after,
.scene-photo::after,
.page-hero-photo::after,
.company-photo::after,
.sales-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.20), transparent 36%, rgba(18,59,99,.08));
  pointer-events: none;
}

.product-photo,
.scene-photo,
.page-hero-photo,
.company-photo,
.sales-icon {
  position: relative;
  border: 5px solid rgba(255,255,255,.78);
  box-shadow: var(--shadow-soft);
}

.worries-grid,
.reasons-grid,
.pricing-cards,
.reviews-grid,
.faq-cards,
.sales-grid,
.product-cards-grid,
.shipping-features,
.value-grid {
  position: relative;
  z-index: 1;
}

.pricing-card,
.review-card,
.faq-card,
.faq-item,
.product-list-card,
.shipping-feature,
.value-card,
.line-cta-banner,
.page-bottom-cta {
  background:
    linear-gradient(180deg, rgba(255,255,255,.91), rgba(255,255,255,.78)),
    radial-gradient(ellipse at 15% 0%, rgba(116,185,220,.16), transparent 42%);
  border-color: rgba(45,127,181,.24);
  box-shadow: 0 4px 18px rgba(18,59,99,.07);
}

.pricing-card {
  border-left: 4px solid rgba(45,127,181,.42);
}

.pricing-card[style*="var(--navy)"] {
  border-color: rgba(165,72,66,.58) !important;
  border-left-color: var(--coral) !important;
}

.pricing-price,
.product-card-price {
  color: var(--coral);
}

.pricing-label,
.review-tag,
.product-card-ribbon {
  background: rgba(234,247,252,.88);
  color: var(--navy);
}

.pricing-label--popular {
  background: var(--coral);
  color: var(--white);
}

.flow-icon,
.worry-icon,
.reason-icon-wrap,
.company-info-icon,
.faq-q-badge,
.faq-a-badge {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

.food-banner::after {
  content: none;
}

.food-banner-overlay {
  background: linear-gradient(100deg, rgba(18,59,99,.76) 0%, rgba(18,59,99,.42) 48%, rgba(18,59,99,.05) 78%);
}

.cta-band,
.site-footer {
  background:
    linear-gradient(180deg, #1C88C8 0%, #1878B4 42%, #1470A6 100%),
    repeating-linear-gradient(160deg, transparent 0 36px, rgba(255,255,255,.05) 37px 39px, transparent 40px 78px);
}

@media (max-width: 768px) {
  .hero-inner {
    min-height: auto;
    padding-top: 44px;
  }

  .hero-text {
    padding-bottom: 28px;
  }

  .hero-h1 .line-sm {
    font-size: 25px;
  }

  .hero-h1 .line-lg {
    font-size: 39px;
  }

  .hero-photo-col::before {
    inset: 0 -12% -8%;
  }
}

@media (max-width: 480px) {
  .hero-h1 .line-sm {
    font-size: 21px;
  }

  .hero-h1 .line-lg {
    font-size: 31px;
    letter-spacing: .02em;
  }

.worry-card,
  .reason-card {
    border-radius: 10px;
  }
}

.section--white::before,
.page-hero::before {
  opacity: .22;
}

.section--cream::before {
  opacity: .26;
}

.section--blue::before {
  opacity: .24;
}

.section--navy::before {
  opacity: .36;
}

.worry-card,
.reason-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(249,253,255,.44)),
    repeating-radial-gradient(circle at 20% 18%, transparent 0 18px, rgba(45,127,181,.055) 19px 20px, transparent 21px 38px);
}

/* ==========================================
   静的な和風装飾への整理
   動くCSS波は残し、説明アイコンを写真・罫線・番号表現へ整理。
   ========================================== */

.dm {
  display: none !important;
}

.wave-l,
.line-float,
.btn {
  animation: none !important;
}

.wave-l {
  transform: none !important;
}

.section::after,
.page-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 150px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 14% 100%, rgba(45,127,181,.11), transparent 56%),
    radial-gradient(ellipse at 82% 100%, rgba(165,72,66,.07), transparent 48%),
    repeating-radial-gradient(circle at 50% 100%, transparent 0 26px, rgba(45,127,181,.075) 27px 29px, transparent 30px 55px);
  background-size: auto, auto, 180px 96px;
  opacity: .58;
}

.section--navy::after {
  background:
    radial-gradient(ellipse at 18% 100%, rgba(255,255,255,.10), transparent 58%),
    repeating-radial-gradient(circle at 50% 100%, transparent 0 26px, rgba(255,255,255,.07) 27px 29px, transparent 30px 55px);
  background-size: auto, 180px 96px;
  opacity: .5;
}

.wave-band {
  height: 56px;
  opacity: .75;
}

.wave-band--lg {
  height: 72px;
}

.wave-l--back {
  opacity: .22;
}

.wave-l--mid {
  opacity: .32;
}

.wave-l--front {
  opacity: .58;
}

.worry-icon,
.reason-icon-wrap,
.value-icon,
.feature-icon-wrap,
.company-info-icon,
.flow-icon,
.shipping-card-icon,
.shipping-item-icon,
.contact-info-icon,
.inquiry-icon,
.faq-q-badge,
.faq-a-badge {
  position: relative;
  width: 68px;
  height: 68px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  border: 1px solid rgba(45,127,181,.24);
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.95) 0 22%, rgba(255,255,255,.74) 23% 44%, transparent 45%),
    radial-gradient(circle at 56% 62%, rgba(45,127,181,.16) 0 34%, transparent 35%),
    linear-gradient(135deg, rgba(234,247,252,.9), rgba(255,255,255,.72));
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.38),
    0 7px 20px rgba(18,59,99,.08);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.worry-icon::before,
.reason-icon-wrap::before,
.value-icon::before,
.feature-icon-wrap::before,
.company-info-icon::before,
.flow-icon::before,
.shipping-card-icon::before,
.shipping-item-icon::before,
.contact-info-icon::before,
.inquiry-icon::before,
.faq-q-badge::before,
.faq-a-badge::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(45,127,181,.18);
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 19px, rgba(45,127,181,.14) 20px 21px, transparent 22px 38px);
  opacity: .68;
}

.worry-icon::after,
.reason-icon-wrap::after,
.value-icon::after,
.feature-icon-wrap::after,
.company-info-icon::after,
.flow-icon::after,
.shipping-card-icon::after,
.shipping-item-icon::after,
.contact-info-icon::after,
.inquiry-icon::after {
  content: '';
  position: absolute;
  right: 7px;
  bottom: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(165,72,66,.74);
  box-shadow: -9px 5px 0 rgba(165,72,66,.16);
}

.worry-icon svg,
.reason-icon-wrap svg,
.reason-icon-svg,
.value-icon svg,
.feature-icon-wrap svg {
  position: relative;
  z-index: 1;
  width: 34px !important;
  height: 34px !important;
  color: var(--navy);
  stroke: currentColor;
  stroke-width: 1.8;
}

.feature-icon-wrap svg,
.value-icon svg {
  display: block;
}

.company-info-icon,
.contact-info-icon,
.faq-q-badge,
.faq-a-badge {
  width: 34px;
  height: 34px;
  min-width: 34px;
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
}

.company-info-icon::before,
.contact-info-icon::before,
.faq-q-badge::before,
.faq-a-badge::before {
  inset: -4px;
}

.faq-q-badge,
.faq-a-badge {
  color: var(--navy);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.95) 0 24%, transparent 25%),
    linear-gradient(135deg, rgba(234,247,252,.95), rgba(255,255,255,.72));
}

.faq-a-badge {
  color: var(--coral);
}

.shipping-card-icon,
.shipping-item-icon,
.contact-info-icon,
.inquiry-icon {
  font-size: 0;
}

.shipping-card-icon::after,
.shipping-item-icon::after,
.contact-info-icon::after {
  right: 9px;
  bottom: 9px;
}

.shipping-card-icon::before,
.shipping-item-icon::before,
.contact-info-icon::before,
.inquiry-icon::before {
  content: '';
}

.shipping-card-icon {
  margin-bottom: 14px;
}

.shipping-card-icon + .shipping-card-name::before,
.shipping-item-icon + .shipping-item-text strong::before {
  content: '';
  display: block;
  width: 26px;
  height: 2px;
  margin: 0 auto 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--coral));
  opacity: .72;
}

.shipping-item-icon + .shipping-item-text strong::before {
  margin-left: 0;
}

.worry-card,
.reason-card,
.value-card,
.feature-item,
.shipping-card,
.inquiry-card,
.contact-info-panel,
.legal-notice-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(249,253,255,.58)),
    radial-gradient(ellipse at 20% 10%, rgba(45,127,181,.09), transparent 42%);
  border: 1px solid rgba(45,127,181,.18);
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(18,59,99,.055);
}

.feature-item {
  padding: 22px 14px 18px;
}

.shipping-card {
  border-color: rgba(45,127,181,.2);
}

.inquiry-icon {
  margin: 0 auto 14px;
}

.contact-info-icon {
  margin: 0;
  flex-shrink: 0;
}

.legal-notice-title::before,
.shipping-block-title::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: 9px;
  vertical-align: middle;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--coral));
}

.flow-icon {
  flex-shrink: 0;
}

.flow-icon svg {
  width: 30px;
  height: 30px;
}

/* ==========================================
   v9: SVGレス / 写真と水彩イラストの最終整理
   2026-06
   ========================================== */

:root {
  --ornament-image: url("../img/watercolor-seafood-ornament.png");
}

.hero::after,
.page-hero::after,
.section--cream::after,
.section--blue::after,
.section--white::after {
  content: none;
}

.section--navy::after,
.site-footer::after {
  display: none;
}

/* ─── CSS波（border-radiusモーフィング）+ 飛沫アニメーション ─── */
.wave-band {
  position: relative;
  height: 80px;
  overflow: visible;
  line-height: 0;
  margin-top: -1px;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
}
.wave-band--lg { height: 110px; }

.wave-band--to-white { --wc: #ffffff; }
.wave-band--to-blue  { --wc: #eaf5fb; }
.wave-band--to-cream { --wc: #faf7f0; }
.wave-band--to-navy  { --wc: #1C88C8; }  /* フッター先頭の鮮やかな青に合わせる（旧紺 #173a5e から変更） */

/* 後波：半透明 */
.wave-band::before {
  content: '';
  position: absolute;
  bottom: 0; left: -10%;
  width: 120%; height: 100%;
  background: var(--wc, #fff);
  opacity: 0.42;
  border-radius: 58% 42% 0 0 / 48% 56% 0 0;
  animation: wave-back 13s ease-in-out infinite;
  will-change: border-radius, transform;
}

/* 前波：主役 */
.wave-band::after {
  content: '';
  position: absolute;
  bottom: 0; left: -15%;
  width: 130%; height: 100%;
  background: var(--wc, #fff);
  border-radius: 44% 56% 0 0 / 55% 45% 0 0;
  animation: wave-front 8s ease-in-out infinite;
  will-change: border-radius, transform;
}

@keyframes wave-back {
  0%   { border-radius: 58% 42% 0 0 / 48% 56% 0 0; transform: translateX(-4%);  }
  35%  { border-radius: 45% 55% 0 0 / 60% 40% 0 0; transform: translateX(3%);   }
  65%  { border-radius: 64% 36% 0 0 / 44% 56% 0 0; transform: translateX(-2%);  }
  100% { border-radius: 58% 42% 0 0 / 48% 56% 0 0; transform: translateX(-4%);  }
}

@keyframes wave-front {
  0%   { border-radius: 44% 56% 0 0 / 55% 45% 0 0; transform: translateX(3%);   }
  30%  { border-radius: 56% 44% 0 0 / 43% 57% 0 0; transform: translateX(-5%);  }
  60%  { border-radius: 38% 62% 0 0 / 62% 38% 0 0; transform: translateX(2%);   }
  100% { border-radius: 44% 56% 0 0 / 55% 45% 0 0; transform: translateX(3%);   }
}

/* 飛沫コンテナ */
.wave-foam {
  position: absolute;
  bottom: 28px;
  left: 0; right: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}

/* 飛沫水玉 */
.foam-drop {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}
.foam-drop--lg { animation: splash-lg ease-out infinite; }
.foam-drop--sm { animation: splash-sm ease-out infinite; }

@keyframes splash-lg {
  0%   { opacity: 0;    transform: translate(0, 0)                  scale(0.2);  }
  8%   { opacity: 0.85; transform: translate(0, -8px)               scale(1);    }
  45%  { opacity: 0.72; transform: translate(var(--dx, 0px), -36px) scale(0.78); }
  80%  { opacity: 0.22; transform: translate(var(--dx, 0px), -60px) scale(0.35); }
  100% { opacity: 0;    transform: translate(var(--dx, 0px), -72px) scale(0.05); }
}

@keyframes splash-sm {
  0%   { opacity: 0;    transform: translate(0, 0)                  scale(0.3);  }
  10%  { opacity: 0.68; transform: translate(0, -4px)               scale(1);    }
  52%  { opacity: 0.45; transform: translate(var(--dx, 0px), -22px) scale(0.65); }
  100% { opacity: 0;    transform: translate(var(--dx, 0px), -42px) scale(0.1);  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-band::before, .wave-band::after { animation: none !important; }
  .foam-drop { display: none !important; }
}

/* 旧SVG要素 */
.wave-svg, .wave-l { display: none !important; }

/* CSS内のSVG背景を使わない */
.deco-seigaiha {
  background-image:
    repeating-radial-gradient(circle at 50% 100%, transparent 0 22px, rgba(45,127,181,.18) 23px 25px, transparent 26px 45px);
}

.form-select {
  background-image: none !important;
}

/* info アイコン系は引き続き非表示（F section 対象外） */
.company-info-icon,
.contact-info-icon,
.shipping-card-icon,
.shipping-item-icon,
.inquiry-icon {
  display: none !important;
}

.worries-grid,
.reasons-grid,
.features-strip,
.values-grid,
.shipping-features,
.inquiry-examples {
  gap: clamp(18px, 3vw, 36px);
}

.worries-grid {
  counter-reset: worry;
}

.worry-card {
  counter-increment: worry;
}

.worry-num {
  width: auto;
  height: auto;
  margin: 0 0 12px;
  color: var(--coral);
  background: transparent;
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 16px;
  letter-spacing: .12em;
  opacity: 1;
}

.worry-num::before {
  content: '';
  display: block;
  width: 42px;
  height: 2px;
  margin: 0 auto 8px;
  background: linear-gradient(90deg, var(--blue), var(--coral));
  border-radius: 2px;
}

.features-strip {
  counter-reset: feature;
}

.feature-item {
  counter-increment: feature;
}

.feature-item::before {
  content: counter(feature, decimal-leading-zero);
  display: block;
  color: var(--coral);
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .08em;
  margin-bottom: 4px;
}

.flow-steps {
  counter-reset: flow;
}

.flow-step {
  counter-increment: flow;
  position: relative;
}

.flow-step::before {
  content: 'STEP ' counter(flow);
  display: block;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.company-info-row::before,
.contact-info-item::before,
.shipping-item::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: -8px 5px 0 rgba(45,127,181,.22);
  flex: 0 0 auto;
  margin-top: .65em;
}

/* 四角枠カードの印象を消し、余白と罫線のリズムに変更
   ※ worry-card / reason-card / sales-card は E-1/2/6 でカード復活のため除外 */
.value-card,
.feature-item,
.shipping-card,
.inquiry-card,
.pricing-card,
.review-card,
.faq-card,
.faq-item,
.product-list-card,
.info-block,
.policy-company-box,
.legal-notice-box,
.line-cta-banner,
.line-first-banner,
.contact-info-panel,
.page-bottom-cta {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.value-card,
.feature-item,
.shipping-card,
.inquiry-card {
  padding: 10px 4px 18px;
  border-bottom: 1px solid rgba(45,127,181,.18) !important;
}

.value-card,
.feature-item,
.shipping-card,
.inquiry-card {
  text-align: left;
  align-items: flex-start;
}

.value-card::before,
.shipping-card::before,
.inquiry-card::before {
  content: '';
  display: block;
  width: 52px;
  height: 2px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, var(--blue), var(--coral));
  border-radius: 2px;
}

.feature-name,
.reason-name,
.value-name,
.shipping-card-name,
.inquiry-name {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  letter-spacing: .04em;
}

.pricing-cards,
.faq-cards,
.faq-accordion,
.reviews-grid,
.product-cards-grid {
  gap: clamp(18px, 3vw, 34px);
}

.pricing-card,
.review-card,
.faq-card,
.faq-item,
.product-list-card,
.info-block,
.policy-company-box,
.legal-notice-box,
.contact-info-panel {
  padding: 0 0 22px !important;
  border-bottom: 1px solid rgba(45,127,181,.2) !important;
}

.review-card {
  position: relative;
  padding-left: 36px !important;
}

.review-card::before {
  content: '“';
  position: absolute;
  left: 0;
  top: -10px;
  color: rgba(165,72,66,.42);
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
}

.review-stars {
  display: inline-flex;
  gap: 0;
  color: var(--coral);
  letter-spacing: .08em;
}

.review-stars::before {
  content: '★★★★★';
  font-size: 13px;
}

.faq-card {
  display: grid;
  gap: 12px;
}

.faq-q-badge,
.faq-a-badge {
  width: auto;
  height: auto;
  min-width: 0;
  margin-top: 0;
  color: var(--navy);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 18px;
}

.faq-a-badge {
  color: var(--coral);
}

.faq-q-badge::before,
.faq-a-badge::before {
  display: none;
}

.faq-item {
  overflow: visible;
}

.faq-question {
  padding: 20px 0;
  border-bottom: 1px solid rgba(45,127,181,.16);
}

.faq-question:hover {
  background: transparent;
  color: var(--blue-deep);
}

.faq-question::before {
  width: auto;
  height: auto;
  color: var(--navy);
  background: transparent;
  border-radius: 0;
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 18px;
}

.faq-answer {
  padding: 4px 0 22px 38px;
}

.product-list-card {
  overflow: visible;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.product-list-card:hover {
  box-shadow: none;
}

.product-card-ribbon {
  background: transparent;
  padding: 0 0 10px;
  text-align: left;
  color: var(--blue);
  border-bottom: 1px solid rgba(45,127,181,.18);
}

/* 詳細度 0,2,0：後方の .product-card-ribbon { background:transparent } を確実に上書き */
.product-card-ribbon.product-card-ribbon--popular {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #A32D2D !important;
  color: #fff !important;
  opacity: 1 !important;
  border-radius: 20px;
  white-space: nowrap;
  padding: 6px 22px 5px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  z-index: 3;
  border-bottom: none;
  text-align: center;
}

.product-card-photo {
  border: 6px solid rgba(255,255,255,.78);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  margin: 18px 0 0;
}

.product-card-body {
  padding: 18px 0 0;
}

.line-cta-banner,
.line-first-banner,
.page-bottom-cta {
  background: none !important;
  border-top: 1px solid rgba(45,127,181,.18) !important;
  border-bottom: 1px solid rgba(45,127,181,.18) !important;
}

.line-first-banner {
  padding: 30px 0;
}

.page-bottom-cta {
  padding: 42px 0;
}

.section-title::after {
  display: block;
}

@media (max-width: 768px) {
  .value-card,
  .feature-item,
  .shipping-card,
  .inquiry-card {
    text-align: center;
    align-items: center;
  }

  .review-card {
    padding-left: 24px !important;
  }

  .line-cta-banner,
  .line-first-banner {
    background-size: 420px auto !important;
    background-position: right bottom !important;
  }
}

/* 見出し下はSVGや曖昧な丸模様ではなく、明確な和風の波文字にする */
.section-title::after,
.page-hero h1::after,
.page-hero-text h1::after {
  content: '〜〜〜';
  display: block !important;
  width: auto;
  height: auto;
  margin: 10px auto 0;
  background: none !important;
  color: var(--blue);
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  opacity: .82;
}

.page-hero h1::after,
.page-hero-text h1::after {
  margin-left: 0;
  margin-right: 0;
}

/* ───────────────────────────────────────────────
   ヒーロー：写真上のドット模様を除去
   ─────────────────────────────────────────────── */
.hero-glow-blue {
  /* repeating-radial-gradientのドットを除去し、やわらかいグローだけ残す */
  background: radial-gradient(ellipse at 72% 50%, rgba(45,127,181,.18), transparent 48%);
}
.hero::after {
  display: none !important;
}

/* ───────────────────────────────────────────────
   FAQプレビュー（index.html）
   ボックスを廃止 → 罫線 + タイポグラフィ主体
   ─────────────────────────────────────────────── */

/* グリッド: 縦横の仕切り線のみ */
/* ─── FAQ カードリデザイン ─── */
.faq-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border-top: none;
}
.faq-card {
  background: #fff !important;
  border: 1px solid rgba(45,127,181,.16) !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 14px rgba(0,60,120,.06) !important;
  padding: 24px !important;
  transition: box-shadow .2s, background .2s;
}
.faq-card:hover {
  background: #f5f9fe !important;
  box-shadow: 0 5px 20px rgba(0,60,120,.1) !important;
}
.faq-card:nth-child(odd) {
  border-right: 1px solid rgba(45,127,181,.16) !important;
}
.faq-card:nth-child(even) {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.faq-card:nth-child(3),
.faq-card:nth-child(4) {
  border-bottom: 1px solid rgba(45,127,181,.16) !important;
}

/* Q/A バッジ → 小型タグスタイル（テキストと高さを揃える） */
.faq-q-badge,
.faq-a-badge {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  letter-spacing: .04em !important;
  width: auto !important;
  height: auto !important;
  min-width: auto !important;
  box-shadow: none !important;
}
.faq-q-badge::before,
.faq-a-badge::before {
  display: none !important;
}
.faq-q-badge {
  color: #fff !important;
  background: var(--blue) !important;
  border: none !important;
}
.faq-a-badge {
  font-size: 12px !important;
  color: var(--coral) !important;
  background: rgba(165,72,66,.07) !important;
  border: 1px solid rgba(165,72,66,.28) !important;
  opacity: 1 !important;
}

/* Q行: 左ラインを廃止 → 下区切り線に変更 */
.faq-q {
  border-left: none !important;
  padding-left: 0 !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(45,127,181,.1) !important;
  align-items: flex-start !important;
}
.faq-a {
  border-left: none !important;
  padding-left: 0 !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
.faq-q-text {
  font-size: 15px !important;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
}
.faq-a-text {
  font-size: 13px !important;
  color: var(--text-muted);
  line-height: 1.8 !important;
}

@media (max-width: 767px) {
  .faq-cards {
    grid-template-columns: 1fr;
  }
  .faq-card {
    padding: 20px !important;
  }
  .faq-card:nth-child(even) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .faq-card:nth-child(3) {
    border-bottom: 1px solid rgba(45,127,181,.16) !important;
  }
}

/* ───────────────────────────────────────────────
   hero-photo-col の seigaiha 同心円アークを除去
   （写真と模様が重なって見えにくいため）
   ─────────────────────────────────────────────── */
.hero-photo-col::before {
  content: none !important;
}

/* ─── P0-4: 会社情報テーブル（company.html） ─── */
.company-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.company-table th,
.company-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.company-table th {
  width: 130px;
  background: var(--blue-bg);
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
}
.company-table tr:last-child th,
.company-table tr:last-child td { border-bottom: none; }
@media (max-width: 480px) {
  .company-table th { width: 88px; padding: 11px 12px; font-size: 13px; }
  .company-table td { padding: 11px 12px; font-size: 13px; }
}

/* ─── P1-7: prefers-reduced-motion でマーキー停止 ─── */
@media (prefers-reduced-motion: reduce) {
  .reviews-track {
    animation: none !important;
    flex-wrap: wrap !important;
    width: auto !important;
  }
  .reviews-track .review-card[aria-hidden="true"] { display: none !important; }
}

/* ─── P0-7b: 代表写真なし時の1カラム代表メッセージ ─── */
.ceo-section--no-photo {
  display: block !important;
  max-width: 680px;
  margin: 0 auto;
}

/* ─── P1-9: tel: リンクのスタイル統一 ─── */
a[href^="tel"] {
  color: inherit;
  text-decoration: none;
}
a[href^="tel"]:hover { text-decoration: underline; }

/* ─── お客様の声 横スクロールマーキー（カードスタイル） ─── */
.reviews-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  margin: 0 -32px;
  padding: 20px 0;
}
.reviews-track {
  display: flex;
  width: max-content;
  animation: reviews-scroll 36s linear infinite;
}
.reviews-track:hover,
.reviews-track:focus-within {
  animation-play-state: paused;
}
.reviews-track .review-card {
  width: 340px !important;
  flex-shrink: 0 !important;
  margin-right: 28px !important;
  /* カードスタイル — フラット化 !important ルールを上位セレクターで上書き */
  background: #fff !important;
  border: 1px solid rgba(45,127,181,.18) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 18px rgba(0,60,120,.08) !important;
  padding: 28px 22px 22px 52px !important;
}
.reviews-track .review-card::before {
  top: 14px !important;
  left: 16px !important;
}
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 767px) {
  .reviews-marquee { margin: 0 -16px; }
  .reviews-track .review-card {
    width: 272px !important;
    margin-right: 20px !important;
  }
}

/* ─── D-2: フォーカスリング（キーボード操作） ─── */
a:focus-visible,
.faq-question:focus-visible,
.hamburger:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── D-3: スクロールリビール ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* 人気カードは reveal 対象外だが、JS古いキャッシュへのフォールバック */
.product-list-card--popular.reveal,
.product-list-card--popular.reveal.is-visible {
  opacity: 1 !important;
  transform: scale(1.04) !important;
  transition: box-shadow .2s, transform .2s !important;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════
   E: セクション別デザイン差別化 (v12)
   ══════════════════════════════════════════════════════ */

/* ─── E-0: 見出し B型（左寄せ + 縦バー）/ C型（英字ラベル）─── */
.section-head--left {
  text-align: left;
  border-left: 4px solid var(--blue);
  padding-left: 16px;
}
.section-head--left .section-title {
  text-align: left;
  font-size: clamp(20px, 2.4vw, 24px);
  margin-bottom: 4px;
}
.section-head--left .section-eyebrow { text-align: left; }

.section-head--en .section-eyebrow {
  font-family: 'Noto Serif JP', serif;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--coral);
}

/* ─── E-1: お悩みカード → 吹き出し型 ─── */
.worry-card {
  position: relative;
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 22px 18px 18px !important;
  box-shadow: var(--shadow-card) !important;
  border-bottom: none !important;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.worry-card::before { display: none !important; }
.worry-card::after {
  content: '';
  position: absolute;
  bottom: -9px; left: 28px;
  width: 16px; height: 16px;
  background: var(--white);
  border-right: 1.5px solid var(--border);
  border-bottom: 1.5px solid var(--border);
  transform: rotate(45deg);
  z-index: 1;
}
.worry-card:nth-child(odd)  { transform: rotate(-.6deg); }
.worry-card:nth-child(even) { transform: rotate(.6deg); }
.worry-card:hover {
  transform: rotate(0) translateY(-3px);
  box-shadow: 0 8px 22px rgba(18,59,99,.10) !important;
}
.worry-icon {
  display: flex !important;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  color: var(--blue);
  margin-bottom: 8px;
}
.worry-icon svg { width: 28px; height: 28px; }
.worry-num {
  width: auto !important; height: auto !important;
  background: transparent !important;
  color: var(--coral) !important;
  font-family: 'Noto Serif JP', serif !important;
}
.worry-num::before { display: none !important; }

/* ─── E-2: 選ばれる理由 → アイコン白カード + 番号バッジ ─── */
.reasons-grid { counter-reset: reason; }
.reason-card {
  counter-increment: reason;
  position: relative;
  background: var(--white) !important;
  border-radius: var(--radius) !important;
  padding: 28px 22px !important;
  box-shadow: var(--shadow-card) !important;
  border-bottom: none !important;
  text-align: center;
  align-items: center;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.reason-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(18,59,99,.10) !important;
}
.reason-card::before { display: none !important; }
.reason-card::after {
  content: counter(reason, decimal-leading-zero);
  position: absolute; top: 16px; right: 18px;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px; color: rgba(45,127,181,.35);
  letter-spacing: .08em;
}
.reason-icon-wrap {
  display: flex !important;
  width: 56px; height: 56px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--blue-bg);
  color: var(--blue);
  margin: 0 auto 14px;
  flex-shrink: 0;
}
.reason-icon-wrap svg { width: 28px; height: 28px; }

/* ─── E-3: 5つの特長 → 番号ストリップ ─── */
.features-strip { position: relative; }
.features-strip::before {
  content: '';
  position: absolute; top: 11px; left: 4%; right: 4%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(45,127,181,.35) 12%, rgba(45,127,181,.35) 88%, transparent);
}
.feature-item { counter-increment: feature; }
.feature-item::before {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--white);
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  color: var(--blue);
  font-size: 12px;
  position: relative; z-index: 1;
  margin-bottom: 10px;
  width: 24px !important; height: 24px !important;
  background: var(--white) !important; border-radius: 50% !important;
}
@media (max-width: 768px) {
  .features-strip::before { display: none; }
}

/* ─── E-4: ご購入の流れ → 円形アイコン + 破線コネクタ ─── */
.flow-icon {
  display: flex !important;
  width: 68px; height: 68px;
  align-items: center; justify-content: center;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
  color: var(--blue);
  box-shadow: 0 4px 14px rgba(18,59,99,.10);
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-fast) var(--ease);
}
.flow-icon svg { width: 30px; height: 30px; }
.flow-step:hover .flow-icon {
  transform: translateY(-4px) scale(1.06);
  background: var(--blue-bg);
}
.flow-arrow {
  color: transparent !important;
  flex: 1;
  min-width: 32px;
  height: 0 !important;
  border: none !important;
  border-top: 2px dashed rgba(45,127,181,.45) !important;
  align-self: flex-start;
  margin-top: 34px;
  position: relative;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.flow-arrow::after {
  content: '';
  position: absolute; right: -2px; top: -5px;
  border: 4px solid transparent;
  border-left-color: rgba(45,127,181,.6);
}
@media (max-width: 768px) {
  .flow-steps { flex-direction: column; align-items: center; }
  .flow-arrow {
    border-top: none !important;
    border-left: 2px dashed rgba(45,127,181,.45) !important;
    height: 28px !important; min-width: 0;
    margin: 0 auto; flex: none;
  }
  .flow-arrow::after {
    right: -5px; top: auto; bottom: -2px;
    border: 4px solid transparent;
    border-top-color: rgba(45,127,181,.6);
    border-left-color: transparent;
  }
}

/* ─── E-5: 会社の想い（--statement）→ アイコン左・テキスト右グリッド ─── */
.values-grid--statement {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.values-grid--statement .value-card {
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  gap: 0 18px !important;
  align-items: start;
  text-align: left !important;
  padding: 18px 0 22px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(45,127,181,.18) !important;
  border-radius: 0 !important;
}
.values-grid--statement .value-card:last-child {
  border-bottom: none !important;
}
.values-grid--statement .value-card::before,
.values-grid--statement .value-card::after {
  display: none !important;
}
.values-grid--statement .value-icon {
  display: flex !important;
  width: 64px !important;
  height: 64px !important;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--blue-bg);
  color: var(--navy);
  grid-row: 1 / 3;
  flex-shrink: 0;
}
.values-grid--statement .value-icon svg {
  width: 34px !important;
  height: 34px !important;
}
.values-grid--statement .value-name {
  grid-column: 2;
  grid-row: 1;
  margin-top: 4px;
}
.values-grid--statement .value-desc {
  grid-column: 2;
  grid-row: 2;
}

/* ─── F section: オリジナルアイコン アクセントカラー ─── */
.ico-dot  { fill: var(--coral, #E07A55); stroke: none; }
.ico-wave { stroke: var(--blue, #2E88C8); stroke-width: 2; fill: none; }

/* ─── F section: feature-icon-wrap 復活 ─── */
.feature-icon-wrap {
  display: flex !important;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--blue-bg);
  color: var(--blue);
  margin: 0 auto 8px;
  flex-shrink: 0;
}
.feature-icon-wrap svg {
  width: 28px;
  height: 28px;
}

/* ─── E-6: 販売実績 → 白カード ─── */
.sales-card {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 18px 20px !important;
  box-shadow: var(--shadow-card) !important;
  display: flex; gap: 16px; align-items: center;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.sales-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(18,59,99,.10) !important;
}

/* ─── E-7: FAQ Q/A バッジ → coral(Q) / blue(A) 対話型 ─── */
.faq-q-badge {
  width: 28px !important; height: 28px !important;
  color: var(--white) !important;
  background: var(--coral) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center; justify-content: center;
  font-family: inherit !important;
  font-size: 12px !important; font-weight: 900; flex-shrink: 0;
}
.faq-a-badge {
  width: 28px !important; height: 28px !important;
  color: var(--white) !important;
  background: var(--blue) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center; justify-content: center;
  font-family: inherit !important;
  font-size: 12px !important; font-weight: 900; flex-shrink: 0;
}
.faq-q { border-left: 3px solid var(--coral) !important; padding-left: 8px !important; }
.faq-a { border-left: 3px solid var(--blue)  !important; padding-left: 8px !important; }


/* ================================================================
   G-series: SP 実機テスト修正（2026-06）
   ================================================================ */

/* ── G-1: SP ファーストビュー（横長スライドショー・全画面にしない）── */
@media (max-width: 768px) {
  .hero { position: relative; overflow: hidden; }

  /* 縦積み：テキスト → 横長写真 */
  .hero-inner {
    display: block !important;
    position: relative;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 24px 0 !important;
    box-sizing: border-box;
  }

  .hero-text {
    position: relative !important;
    z-index: 2;
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 16px 0 24px !important;
  }

  /* 写真の上に乗らないので文字は通常の濃色に戻す */
  .hero-tag              { color: var(--blue) !important; }
  .hero-tag::before      { background: var(--blue) !important; }
  .hero-h1 .line-sm,
  .hero-h1 .line-lg      { color: var(--navy) !important; text-shadow: none !important; }
  .hero-h1 .accent-coral { color: var(--coral) !important; }
  .hero-lead             { color: var(--text-muted) !important; max-width: none !important; }
  .hero-btns             { flex-direction: column !important; gap: 10px !important; }
  .hero-btns .btn        { width: 100% !important; justify-content: center !important; }

  /* 横長スライドショー（通常フロー・全画面背景にしない）*/
  .hero-photo-col {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    display: block !important;
    width: 100% !important;
    flex: none !important;
    margin-top: 8px;
  }
  .hero-photo-col::after { content: none !important; }   /* 全画面用の暗幕を消す */

  .photo-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;          /* ← 横長 */
    border: 5px solid rgba(255,255,255,.92) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-blue) !important;
    overflow: hidden;
  }
  .photo-card::after { content: none !important; }
  .hero-slideshow .hero-slide {
    object-position: center 58% !important;
  }

  /* バッジは写真の右上隅に小さく載せる */
  .badge-circle {
    position: absolute !important;
    z-index: 3 !important;
    top: -12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: 86px !important;
    height: 86px !important;
  }
  .badge-circle .b-main { font-size: 9px !important; }

  .maker-card { display: none !important; }

  /* ヘッダーは通常の不透明表示に戻す（写真オーバーレイをやめたため）*/
  .site-header {
    background: var(--white) !important;
    backdrop-filter: none !important;
  }
  .site-header.is-scrolled {
    box-shadow: 0 2px 18px rgba(18,59,99,.10) !important;
  }
}

/* G-1: スクロールキュー（SP のみ表示）*/
.scroll-cue {
  display: none;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 28px; height: 46px;
  border: 2px solid rgba(255,255,255,.70);
  border-radius: 14px;
  text-decoration: none;
}
.scroll-cue-bar {
  display: block;
  width: 2px; height: 8px;
  background: rgba(255,255,255,.90);
  border-radius: 2px;
  margin: 7px auto 0;
  animation: scroll-cue-drop 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-drop {
  0%   { transform: translateY(0);    opacity: 1; }
  75%  { transform: translateY(18px); opacity: 0; }
  76%  { transform: translateY(0);    opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
@media (max-width: 768px)               { .scroll-cue { display: block; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue-bar { animation: none; } }


/* ── G-2: フロー縦コネクタ 矢頭を下向きに修正 ───────────────── */
@media (max-width: 768px) {
  .flow-arrow::after {
    right: auto !important;
    left: -4px !important;
    top: auto !important;
    bottom: -5px !important;
    border: 5px solid transparent !important;
    border-top-color: rgba(45,127,181,.65) !important;
    border-left-color: transparent !important;
  }
}


/* ── G-3: 追従 LINE ボタン: FV 内は非表示、スクロール後に表示 ── */
@media (max-width: 768px) {
  .line-float {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
    transition: opacity .4s ease, transform .4s ease !important;
  }
  .line-float.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
  .line-float.is-hidden {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
  }
}


/* ── G-4: 理由カード SP 折返し修正 ─────────────────────────── */
@media (max-width: 768px) {
  .reason-card           { padding: 20px 14px !important; }
  .reason-name           { font-size: 13px !important;
                           word-break: keep-all;
                           overflow-wrap: anywhere; }
  .reason-icon-wrap svg  { width: 32px !important; height: 32px !important; }
  .value-name            { font-size: 13px !important;
                           word-break: keep-all;
                           overflow-wrap: anywhere; }
}


/* ── G-5: お悩みカード SP 折返し修正 ───────────────────────── */
@media (max-width: 768px) {
  .worry-text { word-break: keep-all; overflow-wrap: anywhere; }
}


/* ── G-6: レビューマーキー タッチデバイス スワイプ対応 ────────── */
@media (hover: none) {
  .reviews-marquee {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .reviews-track {
    animation: none !important;
    width: max-content;
    transform: none !important;
  }
  .reviews-track .review-card[aria-hidden="true"] { display: none !important; }
  .reviews-track .review-card { scroll-snap-align: start; }
}


/* ── G-7: フッターナビ・販売カード テキスト折返し修正 ──────── */
@media (max-width: 768px) {
  .footer-nav-grid a {
    font-size: 12px;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .footer-bottom-nav a {
    font-size: 11px;
    word-break: keep-all;
  }
}
.sales-name { word-break: keep-all; overflow-wrap: anywhere; }


/* ── G-8: SP container 余白・hero clamp・フォントスタック ────── */
@media (max-width: 480px) {
  .container { padding: 0 20px !important; }
}

@media (max-width: 768px) {
  .hero-h1 .line-lg { font-size: clamp(28px, 8.5vw, 39px) !important; }
  .hero-h1 .line-sm { font-size: clamp(19px, 5.5vw, 25px) !important; }
}

/* G-8: hero-h1 フォントスタック Noto Serif JP 優先 */
.hero-h1 {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif !important;
}

/* ── G-2b: フロー矢印 rotate(90deg) との衝突を解消 ─────────── */
/* L916 の transform: rotate(90deg) を完全リセットし border-left 縦線で描画 */
@media (max-width: 768px) {
  .flow-arrow {
    transform: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 32px !important;
    flex: none !important;
    margin: 0 auto !important;
    border-top: none !important;
    border-left: 2px dashed rgba(45,127,181,.50) !important;
    align-self: auto !important;
  }
  .flow-arrow::after {
    right: auto !important;
    left: -5px !important;
    top: auto !important;
    bottom: -6px !important;
    border: 5px solid transparent !important;
    border-top-color: rgba(45,127,181,.70) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
  }
}

/* ── SP: 地の文・リード系 <br> 非表示（自然折返しに委ねる）──── */
@media (max-width: 768px) {
  .hero-lead br,
  .scene-lead br { display: none; }
  /* 商品カードリボンの長文ラベル折返し防止 */
  .product-card-ribbon { font-size: 10px; word-break: keep-all; }
}

/* ── SP FV エントランスエフェクト ────────────────────────────── */
/* 写真: Ken Burns（G-1実装済み）+ テキスト／バッジ フェードイン */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero-tag  { animation: hero-elem-in .6s ease .30s both; }
  .hero-h1   { animation: hero-elem-in .6s ease .48s both; }
  .hero-lead { animation: hero-elem-in .6s ease .64s both; }
  .hero-btns { animation: hero-elem-in .6s ease .78s both; }

  /* バッジ: ポップイン + 軽い回転 */
  .badge-circle { animation: badge-pop-in .55s cubic-bezier(.34,1.56,.64,1) .90s both; }
}

@keyframes hero-elem-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes badge-pop-in {
  from { opacity: 0; transform: scale(.45) rotate(-10deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0deg);  }
}


/* ================================================================
   H-series: 文言・レイアウト・ビジュアル修正（2026-06）
   ================================================================ */

/* ── H-2: 「大切な人と、特別な食卓を」 導入コピー格上げ ────── */
.gift-lead-copy {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  color: rgba(255,255,255,.94);
  letter-spacing: .12em;
  margin-bottom: 4px;          /* 見出し下の余白を詰める */
  font-feature-settings: "palt";
}


/* ── H-3: FAQ Q/A レイアウト 決定版（過去パッチをすべて上書き）── */
.faq-q,
.faq-a {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 12px !important;
  border-left: none !important;
  padding-left: 0 !important;
  text-align: left !important;
}
.faq-q {
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(45,127,181,.12) !important;
}
.faq-q-badge,
.faq-a-badge {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  background-image: none !important;
  box-shadow: none !important;
}
.faq-q-badge { background: var(--coral) !important; color: #fff !important; }
.faq-a-badge { background: var(--blue)  !important; color: #fff !important; }
.faq-q-badge::before,
.faq-a-badge::before { display: none !important; content: none !important; }
.faq-q-text {
  flex: 1 !important;
  font-size: 16px !important;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6 !important;
  margin: 0 !important;
  text-align: left !important;
  padding-top: 4px;
}
.faq-a-text {
  flex: 1 !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  text-align: left !important;
  padding-top: 5px;
}


/* ── H-3b: 人気No.1 バッジ フォントサイズ調整（ベースCSSに集約済み） ── */

/* ── H-4: フードバナー「商品ラインナップを見る」ボタン全幅バグ修正 ── */
.food-banner-overlay .btn { align-self: flex-start; }


/* ── H-5: 全ボタン ぷっくり立体化 ────────────────────────── */
.btn {
  background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 48%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -3px 0 rgba(0,0,0,.13),
    0 4px 10px rgba(18,59,99,.16);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.50),
    inset 0 -3px 0 rgba(0,0,0,.13),
    0 7px 16px rgba(18,59,99,.22);
}
.btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.18),
    0 2px 5px rgba(18,59,99,.12);
  transition-duration: .06s;
}

/* LINE 緑ボタン */
.btn--line {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.50),
    inset 0 -3px 0 rgba(0,92,40,.38),
    0 4px 12px rgba(6,199,85,.32);
}
.btn--line:hover {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,92,40,.38),
    0 7px 18px rgba(6,199,85,.42);
}

/* 購入コーラルボタン */
.btn--buy {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.32),
    inset 0 -3px 0 rgba(96,32,28,.42),
    0 4px 12px rgba(165,72,66,.32);
}
.btn--buy:hover {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.36),
    inset 0 -3px 0 rgba(96,32,28,.42),
    0 7px 18px rgba(165,72,66,.42);
}

/* 白ボタン */
.btn--white {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.90),
    inset 0 -3px 0 rgba(18,59,99,.10),
    0 4px 12px rgba(18,59,99,.14);
}
.btn--white:hover {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.90),
    inset 0 -3px 0 rgba(18,59,99,.10),
    0 7px 18px rgba(18,59,99,.22);
}

/* アウトライン系は立体を弱めに */
.btn--white-outline,
.btn--line-soft {
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 8px rgba(18,59,99,.10);
}
.btn--white-outline:hover,
.btn--line-soft:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 5px 12px rgba(18,59,99,.16);
}

/* SP専用スクリム: SP以外では非表示 */
.hero-scrim { display: none; }

/* ── H-7: ヒーローLINEボタン フラット化（H-5の立体化を打ち消す） ── */
.hero-btn-line {
  background-image: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
}
.hero-btn-line:hover {
  background-image: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22) !important;
}
.hero-btn-line:active {
  background-image: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.16) !important;
}

/* ══════════════════════════════════════════════════════
   H-6: SP ヒーロー 差分調整（G-1 横長レイアウトに統一）
   旧・全画面（フルブリード＋黒幕＋白文字）の指定は廃止し、
   G-1 の横長スライドショー＋濃色テキストに合わせる。
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ① 全画面用の高さ指定を解除（通常フローで縦積み） */
  .hero-inner {
    min-height: 0 !important;
    max-height: none !important;
  }
  .hero-text {
    min-height: 0 !important;
    max-height: none !important;
    justify-content: flex-start !important;
    padding: 16px 0 24px !important;
  }

  /* ② 写真を暗くする黒幕（スクリム）は不要 */
  .hero-photo-col::after { background: none !important; }
  .hero-scrim { display: none !important; }

  /* ③ バッジは写真右上に表示（G-1 のスタイルを使用） */
  .badge-circle { display: flex !important; }

  /* ④ hero-lead は隠し、1行サブを濃色で表示 */
  .hero-lead { display: none !important; }
  .hero-sub {
    display: block !important;
    color: var(--text-muted) !important;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 18px;
  }

  /* ⑤ サブCTA: 濃色のテキストリンク（折り返し許可） */
  .hero-sub-cta {
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--blue-deep) !important;
    font-size: 13px !important;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 4px 0 !important;
    width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .hero-sub-cta::before { display: none; }
  .hero-sub-cta:hover {
    background: none !important;
    box-shadow: none !important;
    color: var(--navy) !important;
  }

  /* ⑥ スクロール促進アニメーション: 非表示 */
  .scroll-cue { display: none !important; }

}

/* ============================================================
   スマホ縦長対策: 反復カードグリッドを横スクロール化（v9）
   PC（769px以上）は一切変更しない。トップ料金の
   .product-cards-grid--slider と同じ操作感で全ページ統一。
   対象: ギフトカード / お悩み / 販売実績 / お客様の声カード
   ============================================================ */
@media (max-width: 768px) {
  /* お客様の声カードは横スクロールにせず縦に積む（reviews.html・読みやすさ優先） */
  .gift-support-grid,
  .worries-grid,
  .sales-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 4px 16px 14px;
    margin-inline: -16px;            /* 端まで気持ちよくスクロール */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox */
    align-items: stretch;
  }
  .gift-support-grid::-webkit-scrollbar,
  .worries-grid::-webkit-scrollbar,
  .sales-grid::-webkit-scrollbar { display: none; }

  /* カード幅（次カードがちら見え＝スクロール可能の合図） */
  .gift-support-grid > * { flex: 0 0 80%; scroll-snap-align: center; }
  .sales-grid        > * { flex: 0 0 82%; scroll-snap-align: center; }
  .worries-grid      > * { flex: 0 0 44%; scroll-snap-align: center; }

  /* お客様の声：1カラムで縦積み（横長スクロールをやめる） */
  .reviews-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* お悩みカードは横スクロールのとき下マージン詰める */
  .worries-grid { padding-top: 4px; }
}

/* ============================================================
   PC ヒーロー: 写真を画面いっぱい（全幅・全面）に敷く（v10）
   スマホ（768px以下）は従来の縦積みレイアウトのまま変更しない
   ============================================================ */
@media (min-width: 769px) {
  .hero {
    position: relative;
    min-height: clamp(560px, calc(100vh - 72px), 880px);
    overflow: hidden;
  }
  /* 装飾グロー・地紋は写真で隠れるので消す */
  .hero-glow-blue,
  .hero-glow-warm { display: none !important; }
  .hero::before   { content: none !important; }

  /* hero-inner を非配置にし、内側の絶対配置子を .hero 基準（全幅）にする */
  .hero-inner {
    position: static !important;
    grid-template-columns: 1fr !important;
    align-items: center;
    min-height: clamp(560px, calc(100vh - 72px), 880px);
    padding: 0 32px !important;
  }

  /* 写真スライドショーをヒーロー全面に敷く */
  .hero-photo-col {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    z-index: 0 !important;
    margin: 0 !important;
  }
  .photo-card {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .photo-card::after { content: none !important; }
  .hero-slideshow .hero-slide { object-position: center 48%; }

  /* 読みやすさ用の暗幕（左濃→右薄）。既存 .hero-scrim を流用 */
  .hero-scrim {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
      rgba(10,32,55,.80) 0%, rgba(10,32,55,.56) 36%,
      rgba(10,32,55,.18) 68%, rgba(10,32,55,0) 100%);
    pointer-events: none;
  }

  /* テキストを写真の上に重ねる（白文字） */
  .hero-text {
    position: relative;
    z-index: 2;
    max-width: 560px;
    padding-bottom: 0 !important;
  }
  .hero-tag { color: #fff; }
  .hero-tag::before { background: var(--coral); }
  .hero-h1,
  .hero-h1 .line-sm,
  .hero-h1 .line-lg { color: #fff !important; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
  .hero-h1 .accent-coral { color: #ffd2bd !important; }
  .hero-lead {
    color: rgba(255,255,255,.92) !important;
    max-width: 460px;
    text-shadow: 0 1px 12px rgba(0,0,0,.42);
  }

  /* 品質バッジは右下へ配置（フォールドに被らないよう余白を確保） */
  .badge-circle {
    top: auto !important;
    bottom: 96px !important;
    right: 56px !important;
    left: auto !important;
  }
}

/* ============================================================
   スマホ縦長対策 第2弾（v11）
   ・ご購入の流れ / お取引の流れ（flow-steps）を横スクロール一列に
   ・商品について（product-info-grid）を横スクロールカードに
   PC（769px以上）は一切変更しない
   ============================================================ */
@media (max-width: 768px) {
  /* 流れ（STEP）を縦タイムライン → 横スクロールの一列へ */
  .flow-steps {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    gap: 10px;
    margin-inline: -16px;
    padding: 4px 16px 12px;
  }
  .flow-steps::-webkit-scrollbar { display: none; }
  .flow-step {
    flex: 0 0 auto !important;
    width: 102px;
    scroll-snap-align: center;
  }
  .flow-arrow { display: none !important; }   /* 横並びでは矢印を省略しスッキリ */

  /* 商品について（情報ブロック3枚）を縦積み → 横スクロールカードへ */
  .product-info-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin-inline: -16px;
    padding: 4px 16px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: stretch;
  }
  .product-info-grid::-webkit-scrollbar { display: none; }
  .product-info-grid > .info-block {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
}

/* ============================================================
   ボタン階層（ヒエラルキー）再設計 v12
   形＝ピル(999px)で統一。塗り/線/文字で 主役①・脇役②・控えめ④・補助③ を区別。
   緑(①④)は必ず LINE 関連の行動にのみ使用。コーラル塗りボタンは廃止。
   ※本ブロックはファイル末尾＝最後に適用され、既存の btn 定義を上書きする
   ============================================================ */

/* ① 主要：LINE 塗り緑（最も目立つ主役・最大サイズ） */
.btn--line {
  background: #06C755 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(6,199,85,.28) !important;
  padding: 15px 32px;
  font-size: 15px;
}
.btn--line:hover {
  background: #05b14a !important;
  box-shadow: 0 7px 20px rgba(6,199,85,.38) !important;
}

/* ② 副次：購入・回遊（ネイビー線・塗らない／hover でネイビー反転） */
.btn--buy {
  background: transparent !important;
  background-image: none !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy) !important;
  box-shadow: none !important;
  padding: 13px 28px;
}
.btn--buy:hover {
  background: var(--navy) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(23,58,94,.22) !important;
}
.btn--buy::before { background: rgba(23,58,94,.10); }

/* ④ 控えめ LINE：緑線・緑文字（LINEだが主役でない場面） */
.btn--line-soft {
  background: transparent !important;
  background-image: none !important;
  color: #058a3c !important;
  border: 1.5px solid #06C755 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.btn--line-soft:hover {
  background: rgba(6,199,85,.10) !important;
  box-shadow: none !important;
}
.btn--line-soft::before { background: rgba(6,199,85,.12); }

/* ③ 補助リンク：ボタン装飾なし・ネイビー文字＋›＋細下線（回遊リンク用） */
.link-arrow,
.btn--text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(23,59,94,.35);
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  transition: color .15s var(--ease), text-decoration-color .15s var(--ease);
}
.link-arrow:hover,
.btn--text:hover {
  color: #0d2740;
  text-decoration-color: var(--navy);
}

/* ヒーローは暗い全画面写真の上 → ② は白線に（PCのみ。SPは生成り背景なので既定のネイビー線） */
@media (min-width: 769px) {
  .hero-btns .btn--buy {
    color: #fff !important;
    border-color: rgba(255,255,255,.85) !important;
  }
  .hero-btns .btn--buy:hover {
    background: #fff !important;
    color: var(--navy) !important;
  }
}

/* ============================================================
   ヒーロー最終仕上げ v13（PC・スマホ共通）
   ・写真を背景に全面表示＋左→右スクリムで可読性確保
   ・高さ88vhで間延び解消／テキストは上下中央
   ・主役=白塗り「商品を見る」／副次=緑線「LINEで相談」
   本ブロックは末尾＝最後に適用。SPの旧スタックレイアウトも上書き。
   ============================================================ */
.hero {
  position: relative;
  min-height: 88vh;
  overflow: hidden;
}
.hero-glow-blue, .hero-glow-warm { display: none !important; }
.hero::before { content: none !important; }

/* hero-inner を非配置にして子の絶対配置を .hero 基準（全幅）に */
.hero-inner {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;   /* 上下中央 */
  align-items: flex-start !important;    /* 左揃え */
  grid-template-columns: none !important;
  min-height: 88vh !important;
  max-width: var(--maxw) !important;
  margin: 0 auto !important;
  padding: 88px 32px !important;
  box-sizing: border-box;
}

/* 写真スライドショーを全面に敷く */
.hero-photo-col {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  display: block !important;
  z-index: 0 !important;
  margin: 0 !important;
}
.photo-card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  border: none !important; border-radius: 0 !important;
  box-shadow: none !important;
  aspect-ratio: auto !important;
}
.photo-card::after { content: none !important; }
.hero-slideshow .hero-slide {
  object-fit: cover !important;
  object-position: center 50% !important;
}
/* 1枚目＝駒ヶ岳：空が広い構図なので下寄せにして「山・海・空」を1画面に収める */
.hero-slideshow .hero-slide:nth-child(1) { object-position: center 82% !important; }

/* スクリム（左→右の暗 ＋ 下端のごく薄い暗） */
.hero-scrim {
  display: block !important;
  position: absolute !important; inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(to bottom, transparent 70%, rgba(8,20,35,.16) 100%),
    linear-gradient(to right, rgba(8,20,35,.34) 0%, rgba(8,20,35,.10) 44%, transparent 70%) !important;
  pointer-events: none !important;
}

/* テキスト（写真の上・白文字） */
.hero-text {
  position: relative !important;
  z-index: 2 !important;
  max-width: 680px !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.hero-tag { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.4) !important; }
.hero-tag::before { background: var(--coral) !important; }
.hero-h1,
.hero-h1 .line-sm,
.hero-h1 .line-lg { color: #fff !important; text-shadow: 0 2px 18px rgba(0,0,0,.45) !important; }
.hero-h1 .accent-coral { color: var(--coral) !important; }   /* 北海道・森町から はコーラル維持 */
/* 見出しはPNG画像のため text-shadow が効かない → drop-shadow で影を付け、明るい写真でも視認性を確保 */
.htl { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 3px 12px rgba(0,0,0,.5)) !important; }
.hero-sub { display: none !important; }
.hero-lead {
  display: block !important;
  color: #ffffff !important;
  max-width: 440px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.45) !important;
}

/* ボタン：同じ幅・縦並び（主役上・LINE下）・左揃え */
.hero-btns {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 320px !important;
}
/* 主役：白塗り＋ネイビー文字（最も目立つ・大きめ） */
.hero-btn-main {
  background: #fff !important;
  background-image: none !important;
  color: var(--navy) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
  padding: 16px 28px !important;
  font-size: 15px !important;
  width: 100% !important;
  justify-content: center !important;
}
.hero-btn-main:hover {
  background: #eef3f8 !important;
  box-shadow: 0 7px 20px rgba(0,0,0,.26) !important;
}
/* 副次：緑線＋白文字（主役より一段弱く） */
.hero-btn-line {
  background: transparent !important;
  background-image: none !important;
  color: #fff !important;
  border: 1.5px solid #06C755 !important;
  box-shadow: none !important;
  padding: 16px 28px !important;
  font-size: 15px !important;
  width: 100% !important;
  justify-content: center !important;
}
.hero-btn-line:hover { background: rgba(6,199,85,.18) !important; }

/* スマホは少し低め＆余白調整 */
@media (max-width: 768px) {
  .hero { min-height: 80vh; }
  .hero-inner { min-height: 80vh !important; padding: 84px 24px !important; }
  .hero-btns { max-width: none !important; }
}

/* ヒーロー見出し: 全角スペースだけで改行（孤立文字・はみ出し防止） */
.hero-h1 .line-sm,
.hero-h1 .line-lg { word-break: keep-all; overflow-wrap: normal; }
.hero-text { max-width: 600px !important; }
@media (max-width: 768px) {
  /* 全角スペースで2行に割れる大きさに（孤立/見切れ防止） */
  .hero-h1 .line-lg { font-size: clamp(34px, 9vw, 40px) !important; }
}

/* ============================================================
   ヒーロー中央寄せリファイン v14（最後に適用・PC/SP共通）
   ・中身を中央揃えにして左右バランスを取る
   ・全体に暗オーバーレイ＋下端を濃くして可読性確保
   ・文字は clamp() で可変、ボタンは16px固定・タップしやすく
   ============================================================ */

/* 高さを少し詰めて、空の余白が上下に均等に分かれるように */
.hero { min-height: 92vh !important; }

/* 中身を上下・左右とも中央配置（上寄せをやめる） */
.hero-inner {
  align-items: center !important;          /* 横方向も中央へ */
  text-align: center !important;
  justify-content: center !important;       /* 上下中央 */
  max-width: 1100px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-top: 64px !important;             /* 上下対称にして空を均等に */
  padding-bottom: 64px !important;
}

/* テキストブロックを中央に（幅を明示しないと align-items:center で縮み、見出しの%が小さく出る） */
.hero-text {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.hero-tag {
  justify-content: center !important;       /* inline-flex を中央寄せ */
  margin-bottom: 14px !important;           /* eyebrow下 14px */
}
.hero-tag::before { display: none !important; }      /* 会社名左横の線を消す */

/* 見出し画像を主役サイズに（高さ auto で比率維持）＋見出し下 20px */
.hero-h1, .hero-h1--img { margin: 0 !important; }
.hero-title-stack {
  margin: 0 auto 20px !important;
  width: min(94%, 860px) !important;     /* はっきり大きく・主役 */
  max-width: none !important;
}

/* 説明文：2行・行間ゆったり・説明下（=ボタンとの間）24px */
.hero-lead {
  margin: 0 auto !important;
  max-width: 540px !important;
  font-size: clamp(13px, 1.6vw, 16px) !important;
  line-height: 1.7 !important;
}

/* CTA：中央寄せ・縦並び・幅を揃える（min 260px） */
.hero-btns {
  margin: 24px auto 0 !important;           /* 説明とボタンの間 24px */
  width: 100% !important;
  max-width: 300px !important;
  align-items: center !important;
  gap: 12px !important;
}
.hero-btn-main,
.hero-btn-line {
  width: 100% !important;
  min-width: 260px !important;              /* 2ボタンの幅を揃える */
  font-size: 15px !important;
  min-height: 46px !important;
  padding: 11px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* 主役（白塗り）に軽い影 */
.hero-btn-main { box-shadow: 0 4px 14px rgba(0,0,0,.18) !important; }

/* 全体の暗オーバーレイ（中央テキストの可読性／下端を濃く） */
.hero-scrim {
  background:
    linear-gradient(to bottom,
      rgba(20,12,8,.30) 0%,
      rgba(20,12,8,.34) 50%,
      rgba(20,12,8,.58) 100%) !important;
}

/* スマホ（〜768px） */
@media (max-width: 768px) {
  .hero { min-height: 84vh !important; }
  .hero-inner { min-height: 84vh !important; padding: 64px 20px 64px !important; justify-content: center !important; }
  /* 見出し画像は主役サイズ（幅92%・高さ auto） */
  .hero-title-stack { width: 92% !important; max-width: none !important; margin: 0 auto 18px !important; }
  /* キャッチコピーは2行で表示（短い文・中央） */
  .hero-sub { display: none !important; }
  .hero-lead {
    display: block !important;
    margin: 0 auto !important;
    max-width: 340px !important;
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.7 !important;
  }
  .hero-lead br { display: inline !important; }   /* 意図した2行で改行させる */

  /* 販売実績：横スワイプをやめ、3件すべて縦積みで表示 */
  .sales-grid {
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    scroll-snap-type: none !important;
  }
  .sales-card {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    padding: 16px 20px !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
    scroll-snap-align: none !important;
  }
  .sales-card:last-child { margin-bottom: 0 !important; }
  /* flex子のテキストを縮ませて折返し（右端はみ出し防止） */
  .sales-card > * { min-width: 0 !important; }
  .sales-name, .sales-note {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* ============================================================
   LINE特典バンド（商品カード下に1つ・3商品共通CTA）
   ============================================================ */
.line-perk-band {
  margin: 28px auto 0;
  max-width: 680px;
  background: #f0fbf4;
  border: 2px solid var(--line-green);
  border-radius: var(--radius);
  padding: 22px 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.line-perk-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
}
.line-perk-band .line-perk-btn {
  display: inline-flex;
  min-width: 280px;
  justify-content: center;
}
@media (max-width: 768px) {
  .line-perk-band { padding: 18px 16px; }
  .line-perk-band .line-perk-btn { min-width: 0; width: 100%; }
}

/* ============================================================
   大切な人に贈りたい（トップ・写真＋オーバーレイ見出し）
   ============================================================ */
.gift-feature-banner {
  position: relative;
  overflow: hidden;
  min-height: clamp(300px, 42vw, 460px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gift-feature-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: 0;
}
/* 可読性のための暗オーバーレイ（上下を濃く） */
.gift-feature-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(12,26,44,.58) 0%,
    rgba(12,26,44,.40) 45%,
    rgba(12,26,44,.62) 100%);
}
.gift-feature-content {
  position: relative; z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px;
  text-align: center;
  color: #fff;
}
.gift-feature-title {
  /* 「大切な人と、特別な食卓を」と同じ明朝系フォント */
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  margin-bottom: 16px;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
  font-feature-settings: "palt";
}
/* 上段「大切な人に贈りたい、」＝少し小さく */
.gift-feature-title .gft-sub {
  display: block;
  font-size: .64em;
  font-weight: 500;
  letter-spacing: .1em;
  margin-bottom: 8px;
  color: rgba(255,255,255,.92);
}
/* 下段「無添加・まるごと一尾造り」＝大きく */
.gift-feature-title .gft-main {
  display: block;
  font-size: 1.18em;
  line-height: 1.4;
}
/* 下段は常に1行（スマホでも改行させない） */
.gift-feature-title .gft-main {
  white-space: nowrap;
}
/* 「まるごと一尾造り」＝色を変えて強調 */
.gift-feature-title .gft-accent {
  color: #F6C56A;            /* 暖色ゴールドで強調（暗い写真上でも映える） */
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
  white-space: nowrap;
}
/* 狭いスマホでも1行に収まるよう、文字サイズ・字間を少し詰める */
@media (max-width: 480px) {
  .gift-feature-title { letter-spacing: .02em; }
  .gift-feature-title .gft-main { font-size: 1.05em; }
}
.gift-feature-desc {
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.95;
  color: rgba(255,255,255,.96);
  max-width: 600px;
  margin: 0 auto;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
@media (max-width: 768px) {
  .gift-feature-banner { min-height: 340px; }
  .gift-feature-content { padding: 40px 22px; }
}

/* インセット版（セクション内・カード状に角丸＋下マージン） */
.gift-feature-banner--inset {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  min-height: clamp(240px, 34vw, 380px);
  margin: 0 auto 36px;
}
.gift-feature-banner--inset .gift-feature-content { padding: 44px 24px; }
@media (max-width: 768px) {
  .gift-feature-banner--inset { min-height: 300px; }
  .gift-feature-banner--inset .gift-feature-content { padding: 36px 20px; }
}

/* ===== 業者様向け 取り扱い商品グリッド（v9・2026-06）===== */
/* 説明文なし・写真フレーム＋商品名のみ。スマホでも縦横に伸びすぎない2列。 */
.wholesale-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.wholesale-item {
  background: var(--white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--border);
  transition: box-shadow .2s, transform .2s;
}
.wholesale-item:hover {
  box-shadow: var(--shadow-blue);
  transform: translateY(-3px);
}
.wholesale-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;        /* 正方形フレームで縦に伸びすぎない */
  overflow: hidden;
  background: var(--cream-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wholesale-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wholesale-photo-ph {                /* 画像差し替え前のプレースホルダ */
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
  padding: 8px;
}
.wholesale-name {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  padding: 12px 8px 14px;
  line-height: 1.4;
}

/* タブレット：3列維持できる幅まで */
@media (max-width: 900px) {
  .wholesale-grid { gap: 14px; }
}
/* スマホ：2列・余白を詰めて縦に長くなりすぎないように */
@media (max-width: 600px) {
  .wholesale-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .wholesale-name { font-size: 13px; padding: 10px 6px 12px; }
}

/* ===== スマホの不自然な改行対策（v10・2026-06）===== */
/* 本文中のPC用手動改行（br.br-sp）はスマホで解除し、自然に折り返す */
@media (max-width: 768px) {
  br.br-sp { display: none; }
}
/* 行末に1〜2文字だけ残る「孤立行」をブラウザ側で抑制（対応ブラウザのみ・未対応でも無害） */
.section-title,
.page-bottom-cta-title,
.line-cta-title,
.scene-title,
.ceo-heading { text-wrap: balance; }
.gift-feature-desc,
.scene-lead,
.line-cta-lead,
.line-priority-sub,
.section-bridge,
.review-body,
.product-card-desc { text-wrap: pretty; }