/* ==========================================================================
   style.css — レイアウト・コンポーネント
   トークンは tokens.css の CSS 変数を参照する（値の直書き禁止）。
   セクションごとのスタイルは「セクション」見出しの下に追記していく。
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

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

/* ===== Layout utilities ===== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter-sp);
}

.section {
  padding-block: 48px;          /* SP */
  padding-inline: var(--gutter-sp);
}

/* 二重padding解消（全ブレークポイント共通）: .container を直下に持つ .section は外側paddingを
   外し、.container 自身の左右padding（SP=gutter-sp / PC=gutter）が gutter を担う。container が
   max-width で中央寄せ → ヘッダー/ヒーロー/MV と同じ縦ラインに揃う。.container を持たない
   section（profile 等）は .section の padding を維持 */
.section:has(> .container) { padding-inline: 0; }

/* 文節（意味のまとまり）で折り返すユーティリティ: .nb を付けた語句は途中で改行されず、
   語句の境目に置いた <wbr> でのみ改行される。→ 幅が狭いときだけ自然な位置で改行し、
   収まるときは1行のまま（PC/SP問わず・メディアクエリ不要）*/
.nb { white-space: nowrap; }

/* PC専用の整形改行: デザイン上PCだけ改行したい <br class="br-pc"> を、SPでは無効化して自然に流す */
@media (max-width: 767px) { br.br-pc { display: none; } }

/* 未実装プレースホルダ（中身が入るまで上下余白を出さず、空白帯を作らない）
   → 実装してコンテンツを入れたら、該当 id をこのリストから外すこと */
#stats,
#media {
  padding-block: 0;
}

.section-label {
  display: inline-block;
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: var(--lh-heading);
}

.section-desc {
  color: var(--color-text-muted);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-weight: 700;
  border: var(--border-width) solid transparent; /* secondary の枠線分と高さを揃える */
  border-radius: var(--radius-sm);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
}
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--color-accent);
  color: #fff;
  padding: 14px 28px;
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover { background: var(--color-accent-light); }
.btn--primary:active { background: var(--color-accent-dark); }

.btn--secondary {
  background: var(--color-bg);
  color: var(--color-accent);
  border-color: var(--color-accent);
  padding: 14px 28px;
}
.btn--secondary:hover { background: var(--color-surface); }

.btn--lg { padding: 12px 32px; font-size: 1rem; }

/* 回遊ボタン（非CTAの「詳細をみる／もっとみる／一覧をみる」系）の統一サイズ。
   新しい回遊ボタンは必ずこのクラスを使い、セクションごとにサイズを再定義しない。
   文脈側で上書きしてよいのはレイアウト（width:100% 等）だけ。 */
.btn--more {
  padding: 12px 24px;
  font-size: var(--fs-caption);
  min-width: 280px;
}

/* CTA アイコン（ダウンロード等の SVG）*/
.btn__icon { display: inline-flex; align-items: center; flex: none; }

/* ===== Card ===== */
.card {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* ==========================================================================
   セクション別スタイル（制作で追記していく）
   ========================================================================== */

/* ----- header ----- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: var(--border-width) solid var(--color-border);
}
/* WP管理バー表示時（ログイン中のみ）：固定ヘッダーを管理バーの高さ分だけ下げる。
   管理バーは fixed で top:0・html に margin-top:32px を付与するが、fixed の当ヘッダーは
   その影響を受けず top:0 のままズレるため。一般訪問者には影響しない。 */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: 64px;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-sp);
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-right: auto;
}
.site-header__logo-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--color-bg);
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-full);
  font-family: var(--font-serif);
  font-size: 16px;
}
.site-header__logo-text { font-size: 19px; white-space: nowrap; }

/* ナビ＋CTAのラッパー。PC/タブレットは display:contents で透過（gnav・ctas が
   site-header__inner の直接の子として並ぶ＝従来レイアウト）。SPドロワー時のみ実体化する */
.site-header__nav { display: contents; }

.gnav { display: none; }
.gnav__list { display: flex; align-items: center; gap: 24px; }
.gnav__item { position: relative; }
.gnav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 64px;
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.04em;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition);
}
.gnav__link:hover { color: var(--color-accent); }
/* ドロップダウン親のキャレット */
.has-dropdown > .gnav__link::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: translateY(-2px) rotate(45deg);
}

.gnav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: var(--z-overlay);
}
.gnav__item:hover > .gnav__dropdown,
.gnav__item:focus-within > .gnav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.gnav__dropdown a {
  display: block;
  padding: 10px 14px;
  font-size: var(--fs-caption);
  white-space: nowrap;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.gnav__dropdown a:hover { background: var(--color-surface); color: var(--color-accent); }

/* 2つのCTAは各ラベルの長さなりの幅にする。等幅にすると短い方のラベルとアイコンの間が間延びする。*/
.site-header__ctas { display: none; align-items: center; gap: 10px; }
.site-header__cta-sub,
.site-header__cta {
  padding: 9px 16px;
  font-size: var(--fs-caption);
  white-space: nowrap;
  box-shadow: none;
}
/* ラベルとアイコンの間隔は .btn の gap に任せる（margin-left:auto で右端に飛ばさない）*/

.site-header__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.site-header__toggle span {
  display: block;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* ===== モバイルドロワー（〜1023px）: ハンバーガーで gnav+CTA をヘッダー下に開く ===== */
@media (max-width: 1023px) {
  /* パネル本体（開いたときだけ実体化。閉時は display:contents のまま子が hidden）。
     .site-header は backdrop-filter を持つため fixed/absolute 子孫の包含ブロックになる。
     そこでヘッダー基準の absolute で「ヘッダー直下(top:100%)〜画面下端」に広げる */
  .site-header.is-nav-open .site-header__nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);       /* モバイルのアドレスバー分を考慮 */
    background: var(--color-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-md) var(--gutter-sp) calc(var(--space-2xl) + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .admin-bar .site-header.is-nav-open .site-header__nav {
    height: calc(100vh - 110px);
    height: calc(100dvh - 110px);
  }

  /* ナビ：縦積みリスト */
  .site-header.is-nav-open .gnav { display: block; }
  .site-header.is-nav-open .gnav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header.is-nav-open .gnav__item { position: static; border-bottom: var(--border-width) solid var(--color-border); }
  .site-header.is-nav-open .gnav__link {
    width: 100%;
    height: auto;
    justify-content: space-between;
    padding: 15px 4px;
    font-size: 1.0625rem;
  }
  /* ドロップダウン：モバイルはアコーディオン（初期は閉じ、.is-open で展開）*/
  .site-header.is-nav-open .gnav__dropdown {
    position: static;
    display: none;
    min-width: 0;
    margin: 0 0 10px;
    padding: 4px;
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-header.is-nav-open .gnav__item.is-open > .gnav__dropdown { display: flex; }
  .site-header.is-nav-open .gnav__dropdown a { white-space: normal; padding: 12px 14px; }
  /* 親キャレット：閉=下向き／開=上向き */
  .site-header.is-nav-open .has-dropdown.is-open > .gnav__link::after { transform: translateY(2px) rotate(-135deg); }

  /* CTA：ドロワー内で縦積み・全幅 */
  .site-header.is-nav-open .site-header__ctas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: var(--space-lg);
  }
  .site-header.is-nav-open .site-header__cta-sub,
  .site-header.is-nav-open .site-header__cta { justify-content: center; padding: 13px 16px; }

  /* ハンバーガー→×（span間 gap5px+高さ2px=中心間7px）*/
  .site-header.is-nav-open .site-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.is-nav-open .site-header__toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-nav-open .site-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 背面スクロールロック */
  body.nav-open { overflow: hidden; }
}

/* ----- hero ----- */
.hero {
  padding-top: 64px; /* fixed header分 */
  padding-bottom: 0;
  background: var(--color-surface);
}
.hero__main {
  display: grid;
  gap: var(--space-xl);
  padding-block: 42px; /* MV本体の上下余白（導入実績より下は白背景） */
}
.hero__body {
  padding: var(--space-xl) var(--gutter-sp) 0;
}
.hero__eyebrow { margin-bottom: 20px; }
.hero__eyebrow span {
  display: inline-block;
  padding: 6px 14px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
}
@media (min-width: 768px) {
  .hero__eyebrow span { font-size: var(--fs-caption); }
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
}
.hero__lead {
  margin-top: var(--space-md);
  max-width: 46ch;
  color: var(--color-text-muted);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) 28px;
  margin-top: 28px;
}
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* mv_A: 数値の間は罫線で仕切る（折返しの出るSPでは線なし）*/
@media (min-width: 768px) {
  .stat + .stat {
    border-left: var(--border-width) solid var(--color-border);
    padding-left: 28px;
  }
}
.stat__num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-accent);
}
.stat__unit { font-size: inherit; }
.stat__label { font-size: var(--fs-caption); color: var(--color-text-muted); margin-top: 2px; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: 24px;
}
.hero__actions .btn { flex: 1 1 auto; }
/* SP: 主CTA（無料相談）を上に。PC では DOM 順（無料相談=右）に戻す */
.hero__actions .btn--primary { order: -1; }

/* 吹き出し（サウナ王アバター＋白バルーン）*/
.hero__band {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.hero__band-avatar {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 2px solid var(--color-accent);
}
.hero__band-bubble {
  position: relative;
  padding: 10px 16px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.hero__band-bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 8px 9px 8px 0;
  border-color: transparent var(--color-bg) transparent transparent;
}
.hero__band-title { font-weight: 700; font-size: 0.875rem; }
.hero__band-sub { font-size: var(--fs-caption); color: var(--color-text-muted); }

/* hero media（ポートレート・写真は右端フルブリード）*/
.hero__media { display: flex; }
.hero__portrait {
  position: relative;
  width: 100%;
  display: flex;
}
.hero__portrait-ph {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 360px;
  /* 画像未配置時のフォールバック */
  background: linear-gradient(165deg, #8a6a55 0%, #5c4234 45%, #34211a 100%);
}
.hero__portrait-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center; /* 人物が右寄りのため右側を見せる */
}
.hero__portrait-cap {
  position: absolute;
  right: 20px; bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  background: rgba(26, 15, 15, 0.82);
  color: #fff;
  border-radius: var(--radius-sm);
}
.hero__portrait-cap strong { font-family: var(--font-serif); font-size: 0.9375rem; }
.hero__portrait-cap span { font-size: 0.75rem; color: rgba(255,255,255,0.8); }

/* hero 実績ロゴ帯（写真下端とフラッシュ・中央見出し＋飾り罫）*/
.hero__works {
  background: var(--color-bg);
  position: relative;
  z-index: 1; /* 導入実績帯を動画より前面にし、動画枠グローの下方向のはみ出しを隠す */
}
.hero__works-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 28px var(--gutter-sp) 8px;
}
/* ゴールドの文字＋外側へフェードする罫線（.media-marquee__headline と同じ見せ方）*/
.hero__works-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: 4px;
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gold);
}
.hero__works-head::before,
.hero__works-head::after {
  content: "";
  width: 56px;
  height: 1px;
}
.hero__works-head::before { background: linear-gradient(to left,  var(--color-gold), transparent); }
.hero__works-head::after  { background: linear-gradient(to right, var(--color-gold), transparent); }
.hero__works-head span { font-weight: 700; }
.works-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.works-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.works-strip__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* 画像未配置時のフォールバック */
  background: linear-gradient(160deg, #4a382f 0%, #2a1c16 100%);
  border-radius: var(--radius-md);
}
.works-strip__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 施設種別ラベル（コンサル実績 .work-card__tag と統一）。
   .works-strip__item span より詳細度を上げて muted/中央寄せ指定を上書き */
.works-strip__thumb .works-strip__tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: left;
  background: rgba(26, 16, 16, 0.66);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-sm);
}
.works-strip__item span {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-align: center;
}
/* 写真の下にロゴ（白背景なので黒・赤・カラーのロゴが映える）*/
.works-strip__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding-inline: 12px;
}
.works-strip__logo img {
  max-height: 50px;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}
/* 白一色のロゴ（SATOYAMA等）は白背景で見えないため黒に反転 */
.works-strip__logo--invert img { filter: brightness(0); }

/* ----- 導入実績ロゴマーキー（FLEXKEY風の自動スクロール）----- */
.works-marquee {
  overflow: hidden;
  /* 左右端をフェードアウト */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.works-strip--marquee {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 0; /* 隙間は各アイテムの margin-right で持たせ、translateX(-50%) を継ぎ目なくする */
  animation: works-marquee 60s linear infinite;
}
.works-strip--marquee .works-strip__item {
  flex: 0 0 auto;
  width: 200px;
  margin-right: var(--space-md);
}
@keyframes works-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* モーション無効設定の環境では停止して折り返し表示 */
@media (prefers-reduced-motion: reduce) {
  .works-strip--marquee { animation: none; flex-wrap: wrap; width: auto; }
}

/* ----- stats ----- */
/* ----- problem（課題提起）----- */
.problem { padding-top: 48px; }
.accent { color: var(--color-accent); }

/* 中央寄せの見出し（— PROBLEM — ＋ タイトル）*/
.section-head { text-align: center; margin-bottom: 40px; }
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-accent);
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}
.section-head .section-title { font-size: clamp(1.6rem, 3vw, 2.125rem); }

/* カードグリッド */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.problem-card {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.problem-card__aside {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 56px;
}
.problem-card__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--color-accent);
}
.problem-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--color-accent);
}
.problem-card__icon svg { width: 28px; height: 28px; }
.problem-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.problem-card__main { min-width: 0; }
.problem-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.problem-card__text {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* C案：中央イラスト＋左右の吹き出し */
/* カード形式（チェックボックス付き）*/
.problem-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.pcard {
  padding: 20px 22px;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(26, 16, 16, 0.04);
}
.pcard__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: var(--border-width) solid var(--color-border);
}
.pcard__num {
  flex: none;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--color-accent);
  position: relative;
  padding-right: 14px;
}
.pcard__num::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 22px;
  background: var(--color-border);
}
.pcard__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text);
}
.pcard__checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pcard__checks li {
  position: relative;
  padding-left: 30px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}
.pcard__checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  background: var(--color-accent);
  border-radius: 50%;
}
.pcard__checks li::after {
  content: "";
  position: absolute;
  /* 円の中心 (left:10px, top:12px) に重ねて上下左右中央へ配置 */
  left: 10px; top: 12px;
  width: 4px; height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

/* 結論バンド（赤グラデ＋月桂樹）*/
/* PROBLEM のしめ吹き出し（月次と共通の .month-saying を流用・CTAなし） */
.problem-saying { padding-top: 8px; padding-bottom: 64px; }

.problem-conclusion {
  margin-top: 48px;
  padding-block: 36px;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
}
.problem-conclusion__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 40px);
  max-width: var(--content-box);
  margin-inline: auto;
  padding-inline: var(--gutter-sp);
}
.problem-conclusion__laurel { height: 96px; width: auto; flex: none; }
.problem-conclusion__text {
  text-align: center;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.375rem);
  line-height: 1.5;
}
.problem-conclusion__lead { white-space: nowrap; }
.problem-conclusion__num {
  font-family: var(--font-num);
  font-size: 1.9em;
  margin-right: 2px;
  vertical-align: -0.08em;
}

/* ----- pain ----- */
/* ----- profile ----- */
.profile { background: var(--color-surface); }
.profile__inner {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}
.profile__head { margin-bottom: var(--space-xl); }
.profile__head-role {
  margin-top: var(--space-sm);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--color-text-muted);
}
.profile__head .section-title { margin-top: 2px; }
.profile__head .section-desc { margin-top: var(--space-sm); }

.profile__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* 左：ポートレート（写真の元比率 4:3 のまま表示）*/
.profile__portrait {
  position: relative;   /* 右下の名前ラベル（hero__portrait-cap 流用）の基準 */
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.profile__portrait-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg, var(--color-surface-2) 0 12px, var(--color-surface) 12px 24px);
}
.profile__portrait-img img {
  width: 100%;
  height: auto;
  display: block;
}
.profile__portrait-ph {
  font-size: var(--fs-caption);
  color: var(--color-text-muted-2);
  letter-spacing: 0.04em;
}

.profile__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.profile__role {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.profile__name {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  font-weight: 900;
  line-height: var(--lh-tight);
  margin-top: var(--space-xs);
}
.profile__name-king { color: var(--color-accent); }
.profile__lead {
  margin-top: var(--space-sm);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: 42em;
}

/* プロフィール項目（ラベル＋値）*/
.profile__facts {
  display: flex;
  flex-direction: column;
  border-top: var(--border-width) solid var(--color-border);
}
.profile__fact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-block: var(--space-md);
  border-bottom: var(--border-width) solid var(--color-border);
}
.profile__fact dt {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-text-muted);
}
.profile__fact dd {
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--color-text);
}
/* 数値強調の項目（テレビ/ラジオ/講演/視察/出版）*/
.profile__fact-num {
  display: inline-block;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-accent);
  margin-right: var(--space-sm);
}
.profile__fact-sub { color: var(--color-text-muted); }
/* 実績項目（コンサル実績／メディア出演）→ 各一覧への軽量な内部リンク */
.profile__fact-link {
  display: block;
  width: fit-content;
  margin-top: 6px;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}
.profile__fact-link:hover { text-decoration: underline; }
.profile__fact-link .btn__arrow { margin-left: 2px; }

/* 公式SNS（プロフィール画像の下・ボタンリンク）*/
.profile__sns { margin-top: var(--space-md); }
.profile__sns-label {
  font-family: var(--font-num);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.sns-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.sns-link {
  --brand: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 10px;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.sns-link:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.sns-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* ブランドカラーの角アイコン */
.sns-link__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #fff;
  background: var(--brand);
  border-radius: var(--radius-sm);
}
.sns-link__body {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.sns-link__name {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-text);
}
.sns-link__sub {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}
.sns-link__ext {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  color: var(--color-text-muted-2);
  transition: color var(--transition);
}
.sns-link:hover .sns-link__ext { color: var(--brand); }
/* 各SNSの公式ブランドカラー */
.sns-link--x         { --brand: #000000; }
.sns-link--instagram { --brand: #E4405F; }
.sns-link--tiktok    { --brand: #000000; }
.sns-link--line      { --brand: #06C755; }
/* Instagram は公式グラデーション */
.sns-link--instagram .sns-link__icon {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* 詳細ボタン（SNSの直下・2カラム分のフルワイド）*/
.profile__actions {
  margin-top: var(--space-sm);
}
.profile__more { width: 100%; }  /* サイズは .btn--more、幅だけカラムいっぱいに */
.profile__note {
  margin-top: var(--space-md);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ----- media marquee（数値→結論→ロゴの導線）----- */
.media-marquee { margin-top: var(--space-2xl); }

/* 結論コピー（主役の大見出し）＋数値の根拠 */
.media-marquee__lead {
  text-align: center;
  margin-bottom: var(--space-xl);
}
/* 中央寄せ＋両脇にフェードするゴールドの罫線（profile_D 風）*/
.media-marquee__headline {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1.9vw, 1.4375rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--lh-heading);
  color: var(--color-gold);
}
.media-marquee__headline::before,
.media-marquee__headline::after {
  content: "";
  flex: 1;
  height: 1px;
}
.media-marquee__headline::before { background: linear-gradient(to left,  var(--color-gold), transparent); }
.media-marquee__headline::after  { background: linear-gradient(to right, var(--color-gold), transparent); }
.media-marquee__headline span { flex: none; }

/* 数値の根拠（テレビ/ラジオ/出版）*/
.media-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
}
.media-stats__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  position: relative;
}
/* 項目間の縦区切り（折り返しのない md 以上でのみ表示）*/
.media-stats__item + .media-stats__item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-lg) / -2);
  top: 0.1em;
  bottom: 0.1em;
  width: 1px;
  background: var(--color-border);
  display: none;
}
.media-stats__label {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--color-text-muted);
}
.media-stats__num {
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}
.media-stats__num small {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text);
  margin-left: 2px;
}
.media-marquee__viewport {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
  /* 両端をフェードアウトさせて流入・流出を自然に */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.media-marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2xl);
  padding-right: var(--space-2xl); /* 2セット間の隙間を均一に（gap と同値）*/
  animation: media-marquee-scroll 48s linear infinite;
  will-change: transform;
}
/* 行間スペース。各行はトラック幅が違うため、見た目の速度(px/秒)を揃えるよう
   duration を概ね幅に比例させる（番組カード→40s／TV局=48s／ラジオ局→20s）。*/
.media-marquee__viewport + .media-marquee__viewport { margin-top: var(--space-lg); }
.media-marquee__viewport--cards .media-marquee__track { animation-duration: 40s; }
.media-marquee__viewport--radio .media-marquee__track { animation-duration: 20s; }

/* 番組サムネイル画像（16:9 カード）※許諾後に画像版を復活したとき用 */
.media-thumb {
  flex: none;
  width: 160px;
  height: 90px;
  overflow: hidden;
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}
.media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 出演メディア・掲載媒体：3カラム・インデックス表 */
.media-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 920px;
  margin: var(--space-md) auto 0;
}
/* 見出しは数値スタイル（ラベル＋大きな数字＋単位）*/
.media-cols__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-accent);
}
.media-cols__icon {
  width: 22px;
  height: 22px;
  align-self: center;
  object-fit: contain;
}
.media-cols__label {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--color-text-muted);
}
.media-cols__num {
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}
.media-cols__num small {
  margin-left: 2px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text);
}
.media-cols__col--radio .media-cols__head { border-bottom-color: var(--color-gold); }
.media-cols__col--radio .media-cols__num { color: var(--color-gold); }
.media-cols__col--book .media-cols__head { border-bottom-color: var(--color-text-muted); }
.media-cols__col--book .media-cols__num { color: var(--color-text-muted); }
.media-cols__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.media-cols__list li {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--color-text);
}
.media-cols__list li.is-more {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
/* ロゴは枠で仕切らずフラットに並べる（セルは不可視。サイズ枠を与えないと
   内在サイズを持たない viewBox のみの SVG が 0×0 に潰れるため固定する）*/
.media-marquee__item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 48px;
}
.media-marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@keyframes media-marquee-scroll {
  from { transform: translateX(0); }
  /* トラック幅 = 末尾 padding-right を含む border-box。-100% でちょうど 2 セット目が先頭に並びシームレス */
  to   { transform: translateX(-100%); }
}

/* ----- works（コンサル実績）----- */
.works__head { margin-bottom: var(--space-xl); }
.works__head .section-label,
.profile__head .section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.works__head .section-label::before,
.profile__head .section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}
.works__head .section-title { margin-top: 8px; }
.works__note {
  margin-top: 16px;
  font-size: var(--fs-caption);
  color: var(--color-text);
}

.works__group { margin-top: var(--space-2xl); }
.works__group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-lg);
}
.works__group-title::before {
  content: "";
  width: 5px;
  height: 1.1em;
  background: var(--color-accent);
  border-radius: 2px;
}

.works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.work-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}
.work-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.work-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
}
.work-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: rgba(26, 16, 16, 0.66);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-sm);
}
/* 画像は絶対配置で箱を満たす。in-flowだと縦長画像(4:3より正方形寄り)が箱を押し広げ縦横比が崩れるため。 */
.work-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 称号バッジ（日本初/日本一/世界一）。写真右下に大きめに置き、写真の下端にまたがらせて本文側へ張り出す */
.work-card__badge {
  position: absolute;
  right: 12px;
  bottom: 0;
  transform: translateY(30%);
  z-index: 2;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}
/* 直前の .work-card__media img（絶対配置・全面カバー）をバッジ画像では打ち消す */
.work-card__media .work-card__badge img { position: static; inset: auto; width: auto; height: 120px; object-fit: contain; }
/* クレスト版は従来どおり写真内の右下に小さく収める */
.work-card__badge--crest { bottom: 12px; transform: none; }
.work-card__media .work-card__badge--crest img { height: 100px; }
/* 煌びやか勲章版はリボン垂れの分だけ縦長なので、メダル部の見た目径を揃えるため少し大きく */
.work-card__media .work-card__badge--brilliant img { height: 140px; }
/* コーナーリボン版は写真の右上角に掛ける（リボン端の折り返しはカードの角丸clipで自然に切れる） */
.work-card__badge--ribbon { top: -2px; right: -2px; bottom: auto; transform: none; width: 56%; }
.work-card__media .work-card__badge--ribbon img { width: 100%; height: auto; }
.work-card__body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.work-card__pref {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.work-card__name {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
}
.work-card__desc {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.works__more { margin-top: var(--space-2xl); text-align: center; }
/* ボタンサイズは共通の .btn--more（回遊ボタン標準）を使用 */

/* ----- comparison（他社との比較）----- */
.comparison__head { margin-bottom: var(--space-xl); }
.comparison__head .section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.comparison__head .section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}
.comparison__head .section-title { margin-top: 8px; }

/* 狭い画面では横スクロールで表を保持（B案の比較表レイアウトを崩さない）*/
.comparison__scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}
.compare-table th,
.compare-table td {
  text-align: left;
  vertical-align: middle;
  padding: 16px 20px;
  line-height: 1.6;
}

/* 列幅 */
.compare-table__num { width: 56px; text-align: center; }
.compare-table__item { width: 184px; }

/* ヘッダー行 */
.compare-table thead th {
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* 行見出し（番号・比較項目）*/
.compare-table tbody .compare-table__num {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--color-text-muted);
}
.compare-table tbody .compare-table__item {
  font-weight: 700;
  color: var(--color-text);
}

/* 行区切り */
.compare-table tbody td,
.compare-table tbody th {
  border-bottom: var(--border-width) solid var(--color-border);
}

/* 勝ち列（楽楽HD）＝ 赤フルハイライト */
.compare-table thead .compare-table__win {
  text-align: center;
  color: #fff;
  background: var(--color-accent);
  border-bottom-color: var(--color-accent-dark);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.compare-table tbody .compare-table__win {
  color: #fff;
  font-weight: 500;
  background: var(--color-accent);
  border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.18);
}
.compare-table tbody tr:last-child .compare-table__win {
  border-bottom: 0;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* 他社列 ＝ グレーで沈める */
.compare-table tbody .compare-table__other {
  color: var(--color-text-muted);
  background: var(--color-surface);
}

/* セル内：マーク＋テキスト（table-cell を保ったまま整列）*/
.compare-cell {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
}
.compare-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.compare-mark--yes { color: var(--color-accent); background: #fff; }
.compare-mark--no {
  color: var(--color-text-muted);
  background: var(--color-surface-3);
}

/* クロージング帯（濃色フルワイド）*/
.comparison__closing {
  margin-top: var(--space-2xl);
  padding: 28px var(--space-lg);
  text-align: center;
  color: #fff;
  background: var(--color-dark);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.375rem);
  line-height: 1.6;
}

/* ----- menu（コンサルティングメニュー）----- */
.menu__head { margin-bottom: var(--space-xl); }
.menu__head .section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.menu__head .section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}
.menu__head .section-title { margin-top: 8px; }

/* 主軸3プラン: 上段=3ヘッダー／下段=共通業務(2カラム)＋月次顧問(1カラム) */
.plan-scope {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* 上段: ヘッダーカード（帯は3プランとも共通の赤）*/
.plan-head {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* ヘッダー帯は3プランとも共通の赤（メインアクセント）に統一 */
.plan-head--new,
.plan-head--renewal,
.plan-head--month { --plan-color: var(--color-accent); }
.plan-head__title {
  padding: 14px var(--space-md);
  background: var(--plan-color);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.plan-head__target {
  padding: 14px var(--space-lg);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.plan-head__label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--plan-color);
}

/* 下段: パネル（共通業務／月次顧問）*/
.plan-panel {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
}
.plan-panel__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-accent);
}
.plan-panel__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
}
.plan-panel__title strong { color: var(--color-accent); }
.plan-panel__tag {
  padding: 3px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}
.plan-panel__note {
  margin-top: var(--space-lg);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
/* 見出し直下に置く注記（Figma準拠：支援内容の前に共通の旨を明示）*/
.plan-panel__note--top { margin-top: 0; margin-bottom: var(--space-lg); }
.plan-panel__actions {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}
.plan-panel__btn { width: 100%; padding: 12px var(--space-md); font-size: 0.875rem; }

/* 対応業務カテゴリ（カラムパッキング：項目数が偏っても高さで自然に左右へ振り分ける）*/
.scope-grid {
  column-gap: var(--space-xl);
}
.scope-cat {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.scope-cat:not(:last-child) { margin-bottom: var(--space-lg); }
.scope-cat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.scope-cat__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-full);
  font-family: var(--font-num);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
}
.scope-cat__name {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 700;
}
.scope-cat__list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.scope-cat__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text);
}
.scope-cat__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
}
.scope-cat__list--month { gap: 10px; }
.scope-cat__list--month li { font-size: 0.875rem; }

/* 別案B: アコーディオン（先頭4件＋「ほか◯項目を見る」で展開）*/
.scope-more { margin-top: 8px; }
.scope-more__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  user-select: none;
}
.scope-more__toggle::-webkit-details-marker { display: none; }
.scope-more__toggle::after {
  content: "＋";
  font-family: var(--font-num);
  line-height: 1;
}
.scope-more[open] .scope-more__toggle::after { content: "−"; }
.scope-more__close { display: none; }
.scope-more[open] .scope-more__open { display: none; }
.scope-more[open] .scope-more__close { display: inline; }
.scope-cat__list--more { margin-top: 6px; }

/* 別案B: 比較用セクションの見出しバッジ（採否決定後に別案ごと削除する想定）*/
.menu--alt { background: rgba(0, 0, 0, 0.015); }
.altbadge {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--space-lg);
  padding: 12px 16px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  background: #fff;
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-md);
}
.altbadge__tag {
  flex: none;
  padding: 2px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

/* 別案C: 3プラン・カード型（おすすめ／得られること／主な支援で自己完結）*/
.plan-rich-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.plan-rich {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 0 var(--space-lg) var(--space-lg);
}
/* タイトルは赤背景の帯（白文字・中央）。カード幅いっぱいに敷き、上端に密着させる */
.plan-rich__title {
  margin: 0 calc(var(--space-lg) * -1) var(--space-lg);
  padding: 14px var(--space-md);
  background: var(--color-accent);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.plan-rich__head {
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.plan-rich__lead {
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-text);
}
.plan-rich__block { margin-bottom: var(--space-lg); }
.plan-rich__label {
  margin-bottom: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}
.plan-rich__check { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.plan-rich__check li {
  position: relative;
  padding-left: 27px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text);
}
.plan-rich__check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 700;
}
/* 「得られること」はラベルなしで、淡いアクセント背景のハイライトとしてUI表現する */
.plan-rich__text {
  padding: 13px 15px;
  background: rgba(200, 41, 42, 0.06);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--color-text);
}
.plan-rich__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.plan-rich__tags li {
  padding: 4px 11px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}
/* 「and more」タグ：ゴーストチップ（破線枠・淡色・塗りなし）。「＋」はCSSで付与 */
.plan-rich__tags li.is-more {
  color: var(--color-text-muted);
  background: transparent;
  border: 1px dashed var(--color-border);
  font-family: var(--font-num);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.plan-rich__tags li.is-more::before { content: "＋ "; }
.plan-rich__btn { width: 100%; margin-top: auto; }  /* サイズは .btn--more、幅だけカードいっぱいに */

@media (min-width: 768px) {
  .plan-rich-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
}
@media (min-width: 1024px) {
  .plan-rich-grid { gap: var(--space-lg); }
}

/* お試しコンサル帯 */
/* お試しコンサル帯（TOP #menu 内）。/menu/trial ページ側の .trial（後方3921で padding-top:
   calc(64px+space-2xl) 等を定義）とクラス名が衝突し上下paddingが肥大していたため、.menu 配下に
   スコープして特異度で確実に上書きする。上下は圧縮し、左右(space-xl)は直下の menu__contact 帯と揃える */
.menu .trial {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.trial__name { font-size: 1.25rem; font-weight: 700; }
.trial__amount {
  margin-top: 4px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-accent);
}
.trial__unit { font-size: 1.125rem; margin-left: 2px; }
.trial__tax { font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); }
.trial__note { margin-top: 8px; font-size: 0.75rem; color: var(--color-text-muted); }
.trial__catch { font-size: 1.0625rem; font-weight: 700; line-height: 1.6; }
.trial__desc { margin-top: 8px; font-size: 0.9375rem; line-height: 1.75; color: var(--color-text-muted); }
.trial__cta { align-self: flex-start; }  /* サイズは .btn--more */

/* 相談導線 */
.menu__contact {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}
.menu__contact-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.menu__contact-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex: none;
}
.menu__contact-desc {
  max-width: 40em;
  margin: 0 auto var(--space-lg);
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--color-text-muted);
}
.menu__contact-actions {
  display: inline-grid;
  grid-auto-flow: row;
  grid-auto-columns: 1fr;       /* 2つのCTAを等幅に（幅は長い方＝資料ダウンロードに揃う）*/
  gap: var(--space-sm);
}

/* ----- flow（コンサルティングの流れ）----- */
.flow__head .section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.flow__head .section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}
.flow__head { margin-bottom: var(--space-xl); }
.flow__head .section-title { margin-top: 8px; }

/* 2つの入口（並列・等高）。SP は縦積み、md+ で横並び */
.flow__entries {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.flow-entry {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
}
.flow-entry__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}
.flow-entry__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.flow-entry__price-main {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
}
.flow-entry__price-sub {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}
.flow-entry__desc {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* 合流・前進を示すコネクタ（下向きシェブロン。メモ文言は出さない）*/
.flow__connector {
  display: flex;
  justify-content: center;
  padding-block: var(--space-md);
}
.flow__arrow {
  width: 13px;
  height: 13px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
}

/* 合流後のステップ＝お見積もり（幅を絞ってファネルを表現）*/
.flow__step {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.flow__estimate {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
}
.flow__step-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
}
.flow__step-desc {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.8;
}

/* ゴール＝コンサルティング開始（さらに幅を絞った濃色バー）*/
.flow__start {
  max-width: 460px;
  margin-inline: auto;
  padding: 20px;
  text-align: center;
  color: #fff;
  background: var(--color-dark);
  border-radius: var(--radius-md);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}

/* セクション末CTA */
/* 画像入りパターン。SP=画像とテキストを縦並び／PCは横並び（下部メディアクエリで上書き）。
   画像は固定アスペクト比 3:2（お見積もりと入口カードで統一）で、画像側が高さを決める */
.flow-entry--media {
  display: grid;
  grid-template-columns: 1fr;   /* SP: 縦並び（画像が上・テキストが下）*/
  padding: 0;
  overflow: hidden;
}
.flow-entry__media { background: var(--color-surface-2); aspect-ratio: 3 / 2; }
.flow-entry__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flow-entry--media .flow-entry__body {
  padding: var(--space-md) var(--space-lg);
}

.flow__estimate--media {
  display: grid;
  grid-template-columns: 1fr;   /* SP: 縦並び */
  padding: 0;
  overflow: hidden;
  text-align: left;
}
.flow__estimate-media { background: var(--color-surface-2); aspect-ratio: 3 / 2; }
.flow__estimate-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flow__estimate--media .flow__estimate-body {
  padding: var(--space-lg);
}

/* ----- media ----- */
/* ----- voice ----- */

/* ----- cta（最終CTA：左右2分割・ウインドウ幅いっぱい）----- */
.final-cta {
  display: grid;
  grid-template-columns: 1fr;   /* SP は縦積み */
}
.final-cta__col {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 88px) var(--gutter-sp);
}
.final-cta__col--download { background: var(--color-dark); color: #fff; }
.final-cta__col--contact {
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #fff;
}
.final-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin-inline: auto;
}

/* 背景の薄い英字（Download / Contact）*/
.final-cta__bgtext {
  position: absolute;
  left: -2px;
  top: -0.62em;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(3.2rem, 8vw, 5.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.09);
  white-space: nowrap;
  pointer-events: none;
}

.final-cta__title {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.125rem);
  line-height: 1.45;
}
.final-cta__desc {
  margin: 16px 0 28px;
  font-size: 0.9375rem;
  line-height: 1.85;
}
.final-cta__col--download .final-cta__desc { color: rgba(255, 255, 255, 0.72); }
.final-cta__col--contact .final-cta__desc { color: rgba(255, 255, 255, 0.92); }

/* ボタン */
.final-cta__btn {
  min-width: 264px;
  padding: 15px 28px;
  font-size: 1rem;
}
/* 資料DL＝枠線（サブ）*/
.final-cta__btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.final-cta__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}
/* 無料相談＝白塗り（主・最も目立たせる）*/
.final-cta__btn--solid {
  background: #fff;
  color: var(--color-accent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.final-cta__btn--solid:hover { background: var(--color-surface); }

/* ----- ota（教材「サウナ経営の教科書」バナー：フルブリード写真背景）----- */
.ota {
  background-color: #140d0d;
  background-image:
    linear-gradient(90deg, rgba(18, 11, 11, 0.94) 0%, rgba(18, 11, 11, 0.82) 42%, rgba(18, 11, 11, 0.5) 100%),
    url("../img/ota-bg.jpg");
  background-size: cover;
  background-position: center;
}
.ota__inner {
  max-width: var(--content-box);
  margin-inline: auto;
  padding: 48px var(--gutter-sp);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
  color: #fff;
}
.ota__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.ota__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}
.ota__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.32;
  margin-top: 12px;
}
.ota__desc {
  margin-top: 16px;
  max-width: 38em;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.86);
}

/* 4テーマ（21の法則ティーザー）*/
.ota__themes-lead {
  margin-top: 24px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.92);
}
.ota__themes-lead strong { color: #fff; font-weight: 700; }
.ota__themes {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 30em;
}
.ota__theme {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: var(--border-width) solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
}
.ota__theme-num {
  flex: none;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-accent-light, #E0573A);
  letter-spacing: 0.02em;
}
.ota__theme-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
}
.ota__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
  margin-top: 24px;
}
/* 控えめなCTA（濃色背景なので白枠アウトライン）*/
.ota__cta {
  padding: 12px 24px;
  font-size: var(--fs-caption);
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
}
.ota__cta:hover { background: #fff; color: var(--color-text); border-color: #fff; }

.ota__media { align-self: center; }
.ota__book {
  width: clamp(160px, 42vw, 220px);
  height: auto;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.5));
}

/* ----- footer ----- */

/* ==========================================================================
   レスポンシブ（モバイルファースト）
   ========================================================================== */

/* ----- md: 768px〜 ----- */
@media (min-width: 768px) {
  .section { padding-inline: var(--gutter); }
  .container { padding-inline: var(--gutter); }
  /* 二重padding解消ルール（.section:has(> .container)）はベース側に定義済みで全幅に効く */

  .site-header__inner { padding-inline: var(--gutter); }

  .hero__body { padding-inline: var(--gutter); }
  .hero__works-inner { padding-inline: var(--gutter); }

  .ota__inner { padding-inline: var(--gutter); }
  .ota__themes { grid-template-columns: 1fr 1fr; gap: 12px; max-width: 34em; }

  /* 2つのCTAを等幅に（幅は長い方＝資料ダウンロードに揃う）*/
  .hero__actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .hero__actions .btn--primary { order: 0; }

  .works-strip { grid-template-columns: repeat(6, 1fr); }

  /* 最終CTA: 左右2分割（ウインドウ幅いっぱい）*/
  .final-cta { grid-template-columns: 1fr 1fr; }
  .final-cta__inner { padding-inline: var(--gutter); max-width: calc(460px + var(--gutter) * 2); }
  /* 左（資料DL）のタイトル「…心得7選」がPCで折り返さないよう、右paddingを詰めて
     テキスト幅を確保する（460px→508px。自然幅≈497pxが1行に収まる）。
     右（無料相談）は鏡像で中央側=左paddingを0にし、2カラムを左右対称に揃える。*/
  .final-cta__col--download .final-cta__inner { padding-right: 0; }
  .final-cta__col--contact  .final-cta__inner { padding-left: 0; }

  /* flow: 2つの入口を横並びに（カードは縦積みバナーのまま2列に並べる。入口カードの
     「画像左・テキスト右」は幅が十分広いデスクトップ=1024px〜でのみ有効にする） */
  .flow__entries { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .flow-entry:not(.flow-entry--media) { padding: var(--space-xl) var(--space-2xl); }
  /* お見積もり: 768〜は単独カードで横幅が広いので画像左・テキスト右にできる。
     画像はカード高いっぱい（aspect-ratio解除・object-fit:coverで充填、下部余白なし） */
  .flow__estimate--media { grid-template-columns: minmax(0, 240px) 1fr; }
  .flow__estimate-media { aspect-ratio: auto; }
  .flow__estimate--media .flow__estimate-body { padding: var(--space-lg) var(--space-xl); }

  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-cards { grid-template-columns: repeat(2, 1fr); }

  .works-grid { grid-template-columns: repeat(2, 1fr); }

  /* menu: 対応業務を2カラムにパッキング、新規/リニューアルの詳細ボタンを横並び */
  .scope-grid { column-count: 2; }
  .plan-panel--scope .plan-panel__actions { grid-template-columns: 1fr 1fr; }

  /* menu: お試し帯を横並び、相談ボタンを横並び */
  .menu .trial {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }
  .trial__price { flex: none; }
  .trial__body { flex: 1; }
  .trial__cta { align-self: center; flex: none; }
  .menu__contact-actions { grid-auto-flow: column; }

  /* profile: 項目をラベル＋値の横並びに */
  .profile__fact {
    grid-template-columns: 132px 1fr;
    gap: var(--space-md);
    align-items: baseline;
  }

  /* media: 数値の根拠は1行に収まるので縦区切りを表示 */
  .media-stats__item + .media-stats__item::before { display: block; }

  /* media: 案Bの3カラム・インデックス表 */
  .media-cols { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
}

/* ----- lg: 1024px〜 ----- */
@media (min-width: 1024px) {
  .section { padding-block: 64px; }
  .problem { padding-top: 64px; }
  /* 直前が中央ボタン／ボックスで終わるため上余白を詰める（直前の下余白で間隔は十分）*/
  .comparison { padding-top: 32px; }
  .flow { padding-top: 32px; }

  .gnav { display: block; }
  .site-header__ctas { display: inline-flex; }
  .site-header__toggle { display: none; }

  /* ota: テキスト左／書影右の横並びバナー */
  .ota__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
    padding: 64px var(--gutter);
  }
  .ota__body { flex: 1; }
  .ota__media { flex: none; align-self: center; }
  .ota__book { width: clamp(200px, 18vw, 250px); }

  /* 左=コピー／右=写真。全体を 1280 コンテンツ内に収める（写真はブリードさせず、右端をコンテンツ右端に揃える。右の余白は背景）*/
  .hero__main {
    max-width: var(--content-box);
    margin-inline: auto;
    padding-inline: var(--gutter);
    grid-template-columns: minmax(0, 1fr) clamp(400px, 38%, 520px);
    gap: var(--space-2xl);
    align-items: stretch;
  }
  .hero__body {
    align-self: center;
    padding: var(--space-lg) 0;
  }
  .hero__media { min-height: 520px; }
  .hero__portrait-ph { min-height: 100%; }

  .problem-grid { grid-template-columns: repeat(3, 1fr); }
  .problem-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .works-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }

  /* menu: 上段3ヘッダー＋下段(共通業務=左2カラム分／月次顧問=右1カラム分) */
  .plan-scope { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg) var(--space-xl); }
  .plan-panel--scope { grid-column: 1 / 3; }
  .plan-panel--month { grid-column: 3 / 4; }
  /* PC: 月次顧問パネルはカード最下部にボタンを配置（隣の共通業務パネルと高さを揃える）*/
  .plan-panel--month .plan-panel__actions { margin-top: auto; }

  /* profile: 写真（左）＋詳細（右）の2カラム。左右の高さを揃える */
  .profile__body {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-2xl);
  }
  .profile__aside {
    flex: none;
    width: 520px;
    display: flex;
    flex-direction: column;
  }
  /* 画像は元比率のまま。カラム高さには追従させない */
  .profile__portrait { flex: none; }
  /* プロフィール項目（表）は左カラムに対して上下中央配置 */
  .profile__detail {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ----- xl: 1280px〜（入口カード＝画像左・テキスト右。3カードを同一高さ・同比率に統一）----- */
@media (min-width: 1280px) {
  /* 入口カード2枚＋お見積もりを同じ固定高さ(min-height)に揃え、画像は同じ列幅(290px)で
     高さいっぱいに充填（object-fit:cover・下部余白なし）。→ 全カードが同じ縦横比(約1.5)で並ぶ。
     入口カードは価格＋説明で本文が高いので縦paddingを詰め、テキストは縦中央寄せ。
     1279px以下は縦積みバナー（狭い横並びだと画像が縦長化しテキストも窮屈になるため） */
  .flow-entry--media,
  .flow__estimate--media {
    grid-template-columns: minmax(0, 290px) 1fr;
    min-height: 205px;   /* 入口カード本文(最大約195px)より余裕を持たせ、全カードを確実に同高に */
  }
  .flow-entry__media,
  .flow__estimate-media { aspect-ratio: auto; }
  .flow-entry--media .flow-entry__body,
  .flow__estimate--media .flow__estimate-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px var(--space-xl);
  }
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Benefits（コンサル導入で得られること / #benefits）— Profile と同じ明色背景 × 白カード
   ========================================================================== */
.benefits {
  padding-block: 48px;                 /* SP */
  background: var(--color-surface);    /* Profile と同じオフホワイト */
}

/* ---- カードグリッド ---- */
.benefits-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.bcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 22px 24px;
  background: var(--color-bg);
  border-top: 3px solid var(--color-accent);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* 番号（大）＋下の短い赤線 */
.bcard__num {
  position: relative;
  font-family: var(--font-num);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.bcard__num::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--color-accent);
}

.bcard__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3em;            /* 2行ぶんを確保し、アイコン・区切り線の位置を全カードで揃える */
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 18px;
}

.bcard__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
}
.bcard__icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* 説明（上に区切り線・左寄せ） */
.bcard__text {
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  text-align: left;
  font-size: var(--fs-caption);
  line-height: 1.85;
  color: var(--color-text-muted);
}

/* ---- 締めの一文 ---- */
.benefits__closing {
  margin-top: 36px;
  text-align: center;
  font-weight: 500;
  line-height: 1.9;
  color: var(--color-text);
}
.benefits__closing-accent {
  font-weight: 700;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 1px;
}

@media (min-width: 768px) {
  .benefits-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  .benefits { padding-block: 64px; }
  .benefits-cards { grid-template-columns: repeat(5, 1fr); gap: 22px; }
  .bcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .bcard { transition: none; }
  .bcard:hover { transform: none; }
}

/* ==========================================================================
   Footer（S13 / template-parts/footer）— 濃色背景・ブランド＋5カラム＋カラフルSNS
   ========================================================================== */
.site-footer {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 64px 28px;
}

/* ---- 上段: ブランド ＋ リンク ---- */
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.footer-brand__name {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-accent);
}
.footer-brand__tagline {
  margin-top: 16px;
  font-size: var(--fs-caption);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.6);
}

/* ブランド下の公式SNS（PROFILE の .sns-link を流用。白カード＋ブランドカラーアイコン）*/
.footer-sns {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.sns-link--community { --brand: #B8862A; }

/* ---- リンク5カラム ---- */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* SP: 2カラム */
  gap: 28px 24px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-col__title {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}
.footer-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.footer-col__list a {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
}
.footer-col__list a:hover {
  color: var(--color-accent-light);
  padding-left: 4px;
}
.footer-col__list a:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 2px;
}

/* ---- 下段: コピーライト ---- */
.site-footer__bottom {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}
.site-footer__copy {
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 768px) {
  .footer-nav { grid-template-columns: repeat(3, 1fr); gap: 36px 32px; }
}
@media (min-width: 1024px) {
  /* ブランドを左、リンク群を右に配置 */
  .footer-top {
    grid-template-columns: minmax(280px, 1fr) 2.3fr;
    gap: 56px;
    align-items: start;
  }
  .footer-nav {
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
    padding-top: 0;
    border-top: 0;
  }
}


/* ============================================================
   hero 拡張: 対応業種タグ（pill）＋and more / 実績数値を写真直下に横1列 /
   PCで「導入実績」まで1画面に収めるコンパクト化
   ============================================================ */
/* 対応業種タグ */
.hero__biztags { margin-top: 14px; }
.hero__biztags-label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-family: var(--font-serif); font-weight: 700; font-size: .9rem; letter-spacing: .04em; color: var(--color-text); }
.hero__biztags-label::before { content: ""; width: 4px; height: 1.05em; background: var(--color-accent); border-radius: 2px; }
.hero__biztags-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.biztag { display: inline-flex; align-items: center; padding: 5px 12px; font-family: var(--font-sans); font-size: .78rem; font-weight: 700; line-height: 1; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-accent); border-radius: var(--radius-full); }
.biztag--more { color: #fff; background: var(--color-accent); border-color: var(--color-accent); font-family: var(--font-num); font-weight: 700; letter-spacing: .04em; }

/* コピー圧縮・余白詰め */
.hero__lead { font-size: .85rem; line-height: 1.6; margin-top: 10px; max-width: 36em; }
.hero__band { margin-top: 10px; }
.hero__band-title { font-size: .82rem; }
.hero__band-sub { font-size: .72rem; }
.hero__actions { margin-top: 12px; }

/* 実績数値：プロフィール写真の直下に横1列（画像幅にフィット）*/
.hero__media { flex-direction: column; }
.hero__stats--undermedia { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0; margin-top: 0; padding: 16px 0; background: var(--color-surface); border-top: 1px solid var(--color-border); }
.hero__stats--undermedia .stat { flex: 1 1 0; min-width: 0; padding: 0; }
.hero__stats--undermedia .stat + .stat { border-left: 1px solid var(--color-border); padding-left: 0; }
.hero__stats--undermedia .stat__num { font-size: 1.4rem; }
.hero__stats--undermedia .stat__label { font-size: .62rem; white-space: nowrap; }
/* 実績を月桂冠バッジ（.newmv__awards 流用）で写真直下に中央・横一列配置（1行ギリギリまで大きく）。
   2クラス指定で .newmv__awards の flex-wrap:wrap / gap を上書き */
.newmv__awards.hero__awards { flex-wrap: nowrap; justify-content: center; gap: 0 4px; margin-top: 0; padding: 12px 0 2px; }
.hero__awards .newmv__award { gap: 0; }
.hero__awards .newmv__award-body { min-width: 92px; }  /* ヒーローは文字が小さめなので本文幅も狭めで統一 */
.hero__awards .newmv__laurel { height: 56px; }
.hero__awards .newmv__award-label { font-size: 0.72rem; white-space: nowrap; }
.hero__awards .newmv__award-value { font-size: 1.6rem; }
.hero__awards .newmv__award-unit { font-size: 0.88rem; }
.hero__awards .newmv__award-pre { font-size: 0.88rem; }

@media (min-width: 1024px) {
  .hero__body { padding-block: 12px; }
  .hero__title { font-size: clamp(32px, 3.1vw, 42px); }
  .hero__works-inner { padding-block: 12px 4px; }
  .hero__media { min-height: auto; }
  .hero__portrait { flex: 1; }
  .hero__portrait-ph { min-height: 340px; }
}


/* ============================================================
   MV: 写真をビューポート全面にフルブリードし、テキストを上に乗せる
   （左＝コピー／PC＝右にゴールドフレームの縦動画／SP＝動画をMV背景全面に）
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--color-text); /* 画像読込前のフォールバック */
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center; /* 人物を右側に寄せ、左のコピー面を空ける */
}
/* 可読性確保のオーバーレイ。SPは上下方向、PCは左から右へ抜くグラデーション */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 15, 15, 0.80) 0%, rgba(26, 15, 15, 0.70) 55%, rgba(26, 15, 15, 0.58) 100%);
}

/* MV動画（縦9:16）。SPでは背景写真の上に全面で重ね（SP画面比率とほぼ一致するためクロップなしで映える）、
   PCではグリッド右カラムのゴールドフレームに収める。写真は動画読込前のフォールバックを兼ねる */
.hero__movie {
  position: absolute;
  inset: 0;
  z-index: -1; /* .hero__bg より後段のDOMのため、写真の上・テキストの下に描画される */
  overflow: hidden;
}
.hero__movie-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* SPの可読性オーバーレイ（.hero__bg::after と同じ上下グラデーション） */
.hero__movie::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 15, 15, 0.80) 0%, rgba(26, 15, 15, 0.70) 55%, rgba(26, 15, 15, 0.58) 100%);
}
/* 動きを抑えたい環境では動画を出さず、写真フルブリード（確定済みデザイン）にフォールバック */
@media (prefers-reduced-motion: reduce) {
  .hero__movie { display: none; }
}

/* SP: ヒーローの月桂冠バッジも画面幅いっぱいに3等分（下層MVと同じ挙動）。
   本文幅を最広「400社以上」基準で統一し、3つの見た目の横幅を揃える。 */
@media (max-width: 767px) {
  .newmv__awards.hero__awards {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    width: 100%;
  }
  .hero__awards .newmv__award { flex: 1 1 0; min-width: 0; justify-content: center; gap: 0; }
  .hero__awards .newmv__award-body { min-width: clamp(55px, 17vw, 86px); gap: 3px; }
  .hero__awards .newmv__laurel { height: clamp(34px, 11.5vw, 58px); }
  .hero__awards .newmv__award-label { font-size: clamp(0.54rem, 2.6vw, 0.8rem); white-space: nowrap; }
  .hero__awards .newmv__award-value { font-size: clamp(0.95rem, 4.6vw, 1.6rem); line-height: 1; white-space: nowrap; }
  .hero__awards .newmv__award-unit,
  .hero__awards .newmv__award-pre { font-size: clamp(0.6rem, 2.4vw, 0.78rem); }
}

/* MV本体は写真・動画の上：文字を白系に */
.hero__title,
.hero__biztags-label { color: #fff; }
.hero__lead { color: rgba(255, 255, 255, 0.86); }
.hero__awards .newmv__award-label { color: rgba(255, 255, 255, 0.86); }
/* 業種タグ・吹き出しは白地のまま（写真上でも読める）*/

/* 人物クレジット */
.hero__credit {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  background: rgba(26, 15, 15, 0.6);
  border-radius: var(--radius-sm);
  color: #fff;
}
.hero__credit strong { font-family: var(--font-serif); font-size: 0.9375rem; }
.hero__credit span { font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); }

@media (min-width: 1024px) {
  /* PC: SNSショート動画風MV。全面写真＋濃いオーバーレイの暗いアンビエント背景に、
     角丸＋ソフトグローの縦動画プレイヤーを浮かせる */
  .hero__bg::after {
    background:
      radial-gradient(150% 130% at 50% 42%, rgba(0, 0, 0, 0) 70%, rgba(12, 6, 5, 0.05) 100%),
      linear-gradient(100deg, rgba(21, 11, 9, 0.80) 0%, rgba(21, 11, 9, 0.56) 46%, rgba(26, 14, 11, 0.16) 68%, rgba(26, 14, 11, 0.04) 100%);
  }
  .hero__main { position: relative; }
  /* 動画は絶対配置のため1カラムに戻し、コピーは右の動画分（高さ×9/16 ≒ 320px＋余白）を空ける */
  .hero__main { grid-template-columns: minmax(0, 1fr); }
  .hero__body { max-width: calc(100% - 420px); }
  /* 動画プレイヤー: 右端に上下いっぱい（ヘッダー直下〜導入実績帯まで）。幅は 9:16 から自動算出 */
  .hero__movie {
    /* コンテンツ幅(--content-box=1349px)の右端に合わせる。超ワイドでは中央寄せに追従し、
       ビューポートがコンテンツ幅以下のときは 0（＝画面右端）で頭打ち */
    inset: 0 auto 0 auto;
    right: max(0px, calc((100% - var(--content-box)) / 2));
    z-index: auto;
    width: auto;
    aspect-ratio: 9 / 16;
    padding: 0;
    background: none;
    overflow: hidden; /* 動画を安定した矩形にクリップ（再生中の縁のちらつき対策）*/
    transform: translateZ(0); /* 独自レイヤー化してクリップを安定させる */
    /* 動画枠: 赤グローのみ（パターンE採用）。内側の明るいコア＋外側の広いハローの2層。
       下方向のはみ出しは .hero__works の z-index で隠す */
    box-shadow: 0 0 26px 3px rgba(200, 41, 42, 0.9), 0 0 66px 14px rgba(200, 41, 42, 0.6);
  }
  /* 共通: SP用オーバーレイ(::after/::before)はPCでは打ち消す／letterbox地は黒。
     動画をわずかに拡大してコンテナ(overflow:hidden)からはみ出させ、ちらつく動画自身の縁を
     切り落とす → 見える外周は安定したクリップ矩形になり、再生中に周りがガタつくのを防ぐ。
     枠・グローは動画ではなくコンテナ(.hero__movie)側に載せる（パターンE＝赤グローのみで確定）*/
  .hero__movie::after,
  .hero__movie::before { content: none; }
  .hero__movie-video {
    border-radius: 0;
    background: #000;
    transform: scale(1.04);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  /* 左カラムに移したので月桂冠バッジも左揃え */
  .newmv__awards.hero__awards { justify-content: flex-start; padding: 14px 0 4px; }
}


/* ============================================================
   新規開業ページ /menu/new/
   ============================================================ */

/* ---- S1 MV（背景ビジュアル＋左テキスト）---- */
.newmv {
  position: relative;
  /* 左を明るく残して暗線図面・模型を右に見せる横グラデ＋写真 */
  background-image:
    linear-gradient(100deg,
      rgba(248, 244, 241, 0.97) 0%,
      rgba(248, 244, 241, 0.92) 32%,
      rgba(248, 244, 241, 0.58) 54%,
      rgba(248, 244, 241, 0.12) 74%,
      rgba(248, 244, 241, 0) 100%),
    url("../img/new-mv.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right center;
  background-size: cover, cover;
  border-bottom: 1px solid var(--color-border);
  /* 上＝fixedヘッダー(64px)＋TOP MVと同じ上余白(--space-xl)で揃える。左右は内側の .container が担う */
  padding-top: calc(64px + var(--space-xl));
  padding-bottom: var(--space-xl);
}
/* リニューアル支援：新規開業と同トーンの別ビジュアルに差し替え（グラデ構造は共通、画像のみ差し替え）*/
.page-renewal .newmv {
  background-image:
    linear-gradient(100deg,
      rgba(248, 244, 241, 0.97) 0%,
      rgba(248, 244, 241, 0.92) 32%,
      rgba(248, 244, 241, 0.58) 54%,
      rgba(248, 244, 241, 0.12) 74%,
      rgba(248, 244, 241, 0) 100%),
    url("../img/renewal-mv.jpg");
}
/* 月次顧問：運営改善（数値・診断）を象徴する別ビジュアルに差し替え（グラデ構造は共通、画像のみ差し替え）*/
.page-month .newmv {
  background-image:
    linear-gradient(100deg,
      rgba(248, 244, 241, 0.97) 0%,
      rgba(248, 244, 241, 0.92) 32%,
      rgba(248, 244, 241, 0.58) 54%,
      rgba(248, 244, 241, 0.12) 74%,
      rgba(248, 244, 241, 0) 100%),
    url("../img/month-mv.jpg");
}
.newmv__container { width: 100%; }
.newmv__inner { max-width: 600px; text-align: left; margin-right: auto; }
/* アイブロウ：赤＋短い線の小ラベル */
.newmv__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}
.newmv__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--color-accent);
}
/* H1（ページタイトル）：最大・極太のヒーロー見出し */
.newmv__service {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-weight: 900;
  line-height: 1.28;
  font-size: clamp(1.75rem, 4.6vw, 2.6rem);
  letter-spacing: 0.01em;
  color: var(--color-text);
}
/* キャッチコピー：サンセリフ・小さめ・ミュートで主従を明確化 */
.newmv__title {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.85;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: var(--color-text-muted);
}
.newmv__lead {
  margin-top: 16px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}
.newmv__points {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 12px;
}
.newmv__point {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(26, 16, 16, 0.06);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
}
/* チェック：コンサルティングメニュー（.pcard__checks）と同形状＝赤い塗り円＋白抜きチェック */
.newmv__check {
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
  background: var(--color-accent);
  border-radius: 50%;
  font-size: 0;            /* 中の ✓ テキストを隠す（白抜きはCSSで描画）*/
}
.newmv__check::after {
  content: "";
  position: absolute;
  left: 10px; top: 10px;
  width: 4px; height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
/* 実績：月桂冠（左右の月桂樹で数値を挟む）3点 */
.newmv__awards {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.newmv__award {
  display: flex;
  align-items: center;
  gap: 2px;
}
.newmv__laurel { height: 64px; width: auto; flex: none; }
.newmv__award-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  line-height: 1.05;
  min-width: 100px;   /* 3バッジで本文幅を統一→月桂冠の位置(=見た目の幅)が揃う（最広「400社以上」基準）*/
}
.newmv__award-label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted); /* 濃グレー（ラベル）*/
}
.newmv__award-pre {
  font-size: 0.9rem;   /* 「業界」＝ 社以上 等の単位と同じ小さめサイズ */
  font-weight: 700;
  margin-right: 2px;   /* No.1 と横並び（前置） */
}
.newmv__award-value {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.85rem;
  color: var(--color-gold); /* ゴールド（値）月桂樹と統一 */
}
.newmv__award-unit { font-size: 0.9rem; font-weight: 700; margin-left: 1px; }
/* SP: 下層ページ（ota/new/renewal/month）の月桂冠バッジは、画面幅いっぱいに3つを均等配置する。
   各バッジ＝画面幅の1/3（flex:1）とし、月桂樹・文字サイズは画面幅に追従（clamp）して拡大する。
   ヒーロー版(.hero__awards …)は上のSPブロックが特異度で勝つため影響しない */
@media (max-width: 767px) {
  /* :not(.hero__awards) で下層MVだけに限定（TOPヒーローの月桂冠には波及させない）*/
  .newmv__awards:not(.hero__awards) {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    width: 100%;
  }
  .newmv__awards:not(.hero__awards) .newmv__award { flex: 1 1 0; min-width: 0; justify-content: center; gap: 0; }
  /* 3バッジの本文幅を最広「400社以上」基準で統一→月桂冠の左右位置＝見た目の横幅が揃う */
  .newmv__awards:not(.hero__awards) .newmv__award-body { min-width: clamp(55px, 17vw, 86px); gap: 3px; }
  .newmv__awards:not(.hero__awards) .newmv__laurel { height: clamp(34px, 11.5vw, 58px); }
  .newmv__awards:not(.hero__awards) .newmv__award-label { font-size: clamp(0.54rem, 2.6vw, 0.8rem); white-space: nowrap; }
  .newmv__awards:not(.hero__awards) .newmv__award-value { font-size: clamp(0.95rem, 4.6vw, 1.6rem); line-height: 1; white-space: nowrap; }
  .newmv__awards:not(.hero__awards) .newmv__award-unit,
  .newmv__awards:not(.hero__awards) .newmv__award-pre { font-size: clamp(0.6rem, 2.4vw, 0.78rem); }
}
.newmv__actions {
  margin-top: 26px;
  display: inline-grid;
  grid-auto-flow: row;          /* SP=縦積み。PC(≥768)で横並び */
  grid-auto-columns: 1fr;       /* 2つのCTAを等幅に（幅は長い方に揃う）*/
  gap: 12px;
}
/* SP: 画像は薄く敷き、上から白を強めに乗せて暗文字の可読性を確保 */
@media (max-width: 767px) {
  .newmv {
    background-image:
      linear-gradient(180deg,
        rgba(248, 244, 241, 0.95) 0%,
        rgba(248, 244, 241, 0.88) 55%,
        rgba(248, 244, 241, 0.78) 100%),
      url("../img/new-mv.jpg");
    background-position: center, center right;
  }
  .newmv__inner { max-width: 100%; }
}
@media (min-width: 768px) {
  .newmv { min-height: 460px; padding-bottom: var(--space-2xl); }  /* 下に存在感。上は base の calc(64px+xl) を維持 */
  .newmv__lead { font-size: 1rem; }
}

/* ---- S2 開業までに、決めるべきこと（#tasks）---- */
.tasks__lead {
  margin-top: 14px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}
.tasks__visual {
  margin: 0 auto;
  max-width: 920px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.tasks__visual img { display: block; width: 100%; height: auto; }

.tasks__phases {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.tasks__phase {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.tasks__phase-name {
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}
.tasks__phase-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.tasks__phase-list li {
  position: relative;
  padding-left: 14px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text);
}
.tasks__phase-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* 「＋まだある」カード（一覧は一部であることを示す）*/
.tasks__phase--more {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  text-align: center;
  background: var(--color-surface);
  border-style: dashed;
  border-color: var(--color-accent);
}
.tasks__more-plus {
  align-self: center;
  font-family: var(--font-num);
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-accent);
}
.tasks__more-text {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--color-text);
}
.tasks__more-sub {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
@media (min-width: 768px) {
  .tasks__phase--more { grid-column: 1 / -1; }
}

.tasks__closing { margin-top: 36px; text-align: center; }
/* #tasks のしめ吹き出し（月次PROBLEMの吹き出しを流用。3行メッセージ向けに微調整） */
.tasks__closing .month-saying { margin-top: 0; }
.tasks__closing .month-saying__bubble {
  font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem; line-height: 1.85; text-align: left;
}
.tasks__closing .month-saying__bubble strong {
  font-weight: 700; font-size: inherit;
}
.tasks__cta { margin-top: var(--space-lg); }
.tasks__cta { margin-top: 22px; }

@media (min-width: 768px) {
  .tasks__phases { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 1024px) {
  .tasks__phases { grid-template-columns: repeat(4, 1fr); }
}

/* =======================================================================
   /menu/new 追加セクション（Figma node 16-2 準拠）
   PROBLEM / RISK / ABOUT / REASON / BENEFITS / WORKS / VOICE / SERVICE / FLOW / FAQ / CTA
   ======================================================================= */
.np-section--alt { background: #f7f5f2; }
.np-lead { margin: 14px auto 0; max-width: 760px; font-size: 0.9375rem; line-height: 1.8; color: var(--color-text-muted); }
.np-narrow { max-width: 880px; }
.np-center { text-align: center; }
.np-subhead { display: flex; align-items: center; gap: 12px; margin: var(--space-xl) 0 var(--space-md); font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; }
.np-subhead::before { content: ""; flex: none; width: 5px; height: 1.1em; background: var(--color-accent); border-radius: 2px; }
.np-note { margin-top: var(--space-lg); font-size: 0.8125rem; line-height: 1.8; color: var(--color-text-muted); }
.np-leadout { margin: var(--space-xl) auto 0; text-align: center; font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; }
.np-leadout strong { color: var(--color-accent); }

/* メッセージ（しめ・引用） */
.np-message {
  margin: var(--space-xl) auto 0; max-width: 860px;
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-bg); border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; line-height: 1.8;
  box-shadow: var(--shadow-card);
}
.np-message strong { color: var(--color-accent); }

/* REASON：理由8点を画像付きカードで（01〜08）。番号は画像左上のゴールドメダリオン＋画像下グラデ */
.reason-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.reason-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.reason-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.reason-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(184, 134, 42, 0.06), transparent 60%),
    var(--color-surface);
}
.reason-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.reason-card:hover .reason-card__media img { transform: scale(1.05); }
/* 画像下部の薄グラデ（重厚感・番号との一体感）*/
.reason-card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, transparent 55%, rgba(26, 16, 16, 0.26));
}
.reason-card__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.reason-card__ph span { font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); }
/* 画像左上のゴールドメダリオン番号 */
.reason-card__num {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(184, 134, 42, 0.55);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  font-family: var(--font-serif); font-weight: 900; font-size: 1.15rem; line-height: 1;
  color: var(--color-gold);
}
.reason-card__body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.reason-card__title { font-size: 1rem; font-weight: 700; line-height: 1.5; margin-bottom: 8px; }
.reason-card__text { font-size: 0.8125rem; line-height: 1.7; color: var(--color-text-muted); }
@media (min-width: 640px) {
  .reason-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .reason-cards { grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
}

/* 汎用カードグリッド */
.np-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); list-style: none; }
.np-card {
  background: var(--color-bg); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-lg);
}
.np-num {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--font-num); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-accent);
}
.np-card__title { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; line-height: 1.5; margin-bottom: 8px; }
.np-card__text { font-size: 0.8125rem; line-height: 1.8; color: var(--color-text-muted); }

/* RISK：ブロック見出し（失敗事例／8原因 共通） */
.risk-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--space-lg); }
.risk-head__en { font-family: var(--font-num); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; color: var(--color-accent); }
.risk-head__title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.risk-head__note { font-size: 0.75rem; color: var(--color-text-muted); }
.risk-head--dark .risk-head__en { color: var(--color-gold); }
.risk-head--dark .risk-head__title { color: #fff; }
.risk-head--dark .risk-head__note { color: rgba(255, 255, 255, 0.55); }
.risk-head--center { align-items: center; text-align: center; }

/* RISK：失敗事例（ダーク調書パネル。投資→結果のフローで見せる） */
.risk-fail {
  position: relative;
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
  background:
    radial-gradient(circle at 88% -20%, rgba(200, 41, 42, 0.32), transparent 55%),
    linear-gradient(155deg, var(--color-dark-2), var(--color-dark) 65%);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(26, 15, 15, 0.22);
}
.risk-fail .risk-head { position: relative; }
.risk-cases { list-style: none; }
.risk-case { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
.risk-case + .risk-case { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.risk-case__no {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-num); font-weight: 700; font-size: 1.375rem; line-height: 1;
  color: var(--color-gold);
}
.risk-case__no-label { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.42); }
.risk-case__inv, .risk-case__res { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; line-height: 1.6; }
.risk-case__inv { color: rgba(255, 255, 255, 0.9); }
.risk-case__res { font-weight: 700; color: #FFA9A9; }
.risk-case__amt { font-style: normal; font-weight: 700; color: var(--color-gold); }
.risk-case__tag {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; margin-top: 1px; padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-sm);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}
.risk-case__tag--res { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }
.risk-case__ar { display: none; }
@media (min-width: 768px) {
  .risk-fail { padding: var(--space-xl) var(--space-xl) var(--space-md); }
  .risk-case { grid-template-columns: 76px 1fr 30px 1fr; align-items: center; gap: 16px; }
  .risk-case__no { flex-direction: column; align-items: center; gap: 5px; font-size: 1.5rem; }
  .risk-case__ar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--radius-full);
    background: var(--color-accent); color: #fff; font-weight: 700; font-size: 0.875rem;
  }
}

/* RISK：失敗事例 → 8原因 をつなぐアロー */
.risk-connector { display: flex; flex-direction: column; align-items: center; }
.risk-connector__tail {
  width: 0; height: 0;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  border-top: 20px solid var(--color-dark);
}

/* RISK：8原因（見出し＋✕リストを1枚のカードにまとめる） */
.risk-causes-block { margin-top: var(--space-xl); }
.risk-causes-card {
  background: var(--color-bg); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden;
}
.risk-causes-card__head {
  margin-bottom: 0; padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.risk-causes {
  list-style: none; display: grid; grid-template-columns: 1fr;
}
.risk-cause {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px;
  border-top: 1px dotted var(--color-border);
  transition: background var(--transition);
}
.risk-cause:first-child { border-top: none; }
.risk-cause:hover { background: rgba(200, 41, 42, 0.03); }
.risk-cause__x {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-full);
  background: rgba(200, 41, 42, 0.09); color: var(--color-accent);
  font-size: 0.6875rem; font-weight: 700;
}
.risk-cause__text { font-size: 0.875rem; line-height: 1.7; }
@media (min-width: 768px) {
  .risk-causes { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
  .risk-cause:nth-child(2) { border-top: none; }
  .risk-cause:nth-child(odd) { border-right: 1px dotted var(--color-border); }
}

/* ABOUT（5フェーズ） */
.about-flow { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-md); counter-reset: none; }
.about-step { background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-lg); display: flex; flex-direction: column; }
.about-step__ph { font-family: var(--font-num); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-accent); }
.about-step__title { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; margin: 8px 0; }
.about-step__text { font-size: 0.8125rem; line-height: 1.75; color: var(--color-text-muted); flex: 1; }
.about-step__deliv { margin-top: 12px; padding-top: 12px; border-top: 1px dotted var(--color-border); font-size: 0.75rem; line-height: 1.6; color: var(--color-text); }
.about-step__deliv span { display: block; font-weight: 700; font-size: 0.625rem; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 2px; }

/* BENEFITS の現場の変化リスト */
.np-changes { margin-top: var(--space-xl); background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-lg) var(--space-xl); }
.np-changes__label { font-family: var(--font-serif); font-size: 0.9375rem; font-weight: 700; margin-bottom: var(--space-md); }
.np-changes__list { list-style: none; }
.np-changes__list li { position: relative; padding: 6px 0 6px 24px; font-size: 0.8125rem; line-height: 1.6; }
.np-changes__list li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--color-accent); font-weight: 700; font-size: 0.75rem; }

/* =======================================================================
   BENEFITS（/menu/new）ダーク版：番号フォールドカード＋現場の変化＋しめバー
   ======================================================================= */
.bf {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-text);
}
/* 明色セクション：ごく淡い暖色の陰影のみ（他セクションと同じライト基調） */
.bf__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 94% -8%, rgba(184, 134, 42, 0.06), transparent 42%),
    radial-gradient(circle at 4% 100%, rgba(200, 41, 42, 0.04), transparent 42%);
}
.bf__inner { position: relative; z-index: 1; }

.bf__head { text-align: center; }
.bf__eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-family: var(--font-num); font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: 0.24em; color: var(--color-accent);
}
.bf__eyebrow::before, .bf__eyebrow::after {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.75;
}
.bf__title { color: var(--color-text); }
.bf__lead {
  margin: 14px auto 0; max-width: 760px;
  font-size: 0.9375rem; line-height: 1.9; color: var(--color-text-muted);
}
.bf__lead strong { color: var(--color-accent); font-weight: 700; }

/* 4枚カード（オフホワイトの紙）：番号は左上の赤フォールド */
.bf-cards {
  list-style: none; margin: var(--space-xl) 0 0;
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
}
.bf-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.bf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
/* 左上の赤フォールド */
.bf-card::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  border-style: solid; border-width: 68px 68px 0 0;
  border-color: var(--color-accent) transparent transparent transparent;
}
.bf-card__no {
  position: absolute; top: 8px; left: 10px; z-index: 2;
  font-family: var(--font-num); font-weight: 700; font-size: 1.25rem; line-height: 1;
  color: #fff;
}
.bf-card__icon { color: var(--color-gold); height: 60px; display: flex; align-items: center; justify-content: center; }
.bf-card__icon svg { width: 52px; height: 52px; display: block; }
.bf-card__icon img { width: 60px; height: 60px; object-fit: contain; display: block; }
.bf-card__title {
  margin-top: var(--space-md);
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; line-height: 1.5;
  color: var(--color-text);
}
.bf-card__rule { width: 34px; height: 2px; margin: 10px 0 12px; background: var(--color-accent); border-radius: 2px; }
.bf-card__text { font-size: 0.8125rem; line-height: 1.85; color: var(--color-text-muted); }

/* ＋α：数字に現れにくい「現場の変化」ライトパネル（白カード＋ゴールド飾り見出し） */
.bf-changes {
  margin-top: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.bf-changes__label {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: var(--space-md); text-align: center;
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; color: var(--color-gold);
}
.bf-changes__label::before, .bf-changes__label::after {
  content: ""; flex: 1; max-width: 90px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(184, 134, 42, 0.6), transparent);
}
.bf-changes__list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 2px; }
.bf-changes__list li {
  position: relative; padding: 7px 0 7px 30px;
  font-size: 0.875rem; line-height: 1.6; color: var(--color-text);
}
.bf-changes__list li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff; border-radius: var(--radius-full);
  font-size: 0.625rem; font-weight: 700; line-height: 1;
}

/* しめ：権威付き引用（ゴールド引用符＋大セリフ＋サウナ王 太田の署名） */
.bf-quote {
  margin: var(--space-2xl) auto 0; max-width: 800px;
  padding: 0 var(--space-md); text-align: center;
}
.bf-quote__mark {
  display: block; font-family: var(--font-serif); font-weight: 700;
  font-size: 4.25rem; line-height: 0.55; color: var(--color-gold); opacity: 0.5;
}
.bf-quote__text {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 1.95rem); line-height: 1.6; letter-spacing: 0.01em;
  color: var(--color-text);
}
.bf-quote__text strong { color: var(--color-accent); font-weight: 700; }
.bf-quote__sub {
  margin-top: var(--space-md);
  font-size: 0.9375rem; line-height: 1.9; color: var(--color-text-muted);
}
.bf-quote__by {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: var(--space-lg);
}
.bf-quote__laurel { height: 44px; width: auto; flex: none; }
.bf-quote__by-body { display: flex; flex-direction: column; gap: 3px; }
.bf-quote__by-name {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.1875rem; color: var(--color-text);
}
.bf-quote__by-title {
  margin-left: 8px; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--color-gold);
}
.bf-quote__by-role { font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--color-text-muted); }

@media (min-width: 640px) {
  .bf-cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .bf-changes__list { grid-template-columns: 1fr 1fr; column-gap: var(--space-2xl); }
}
@media (min-width: 1024px) {
  .bf-cards { grid-template-columns: repeat(4, 1fr); }
  /* TOP BENEFITS は5項目 → 横1列5カラム */
  .bf-cards--5 { grid-template-columns: repeat(5, 1fr); }
}

/* WORKS */
.np-work { background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.np-work__img { aspect-ratio: 4 / 3; background: #ece8e3; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 0.75rem; }
.np-work__meta { margin: 14px var(--space-md) 0; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--color-text-muted); }
.np-work__title { margin: 4px var(--space-md) 0; font-family: var(--font-serif); font-size: 1rem; font-weight: 700; }
.np-work__badge { display: inline-block; margin: 8px var(--space-md) 0; padding: 2px 10px; font-size: 0.6875rem; font-weight: 700; color: #fff; background: var(--color-accent); border-radius: var(--radius-full); }
.np-work__text { margin: 8px var(--space-md) var(--space-md); font-size: 0.8125rem; line-height: 1.7; color: var(--color-text-muted); }
.np-center { margin-top: var(--space-xl); text-align: center; }

/* SERVICE */
.svc-grid { list-style: none; columns: 1; column-gap: var(--space-2xl); background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-xl); }
.svc-cat { break-inside: avoid; background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: var(--space-xl); }
.svc-cat__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 1rem; font-weight: 700; color: var(--color-text); margin-bottom: 14px; }
.svc-cat__num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border: 1.5px solid var(--color-accent); border-radius: 50%; font-family: var(--font-num); font-size: 0.75rem; font-weight: 700; color: var(--color-accent); line-height: 1; }
.svc-cat__list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.svc-cat__list li { position: relative; padding-left: 20px; font-size: 0.8125rem; line-height: 1.6; color: var(--color-text); }
.svc-cat__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-accent); font-weight: 700; }
.svc-terms { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.svc-term { background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: 14px var(--space-lg); }
.svc-term__k { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 4px; }
.svc-term__v { font-size: 0.875rem; line-height: 1.7; }
.svc-term__v strong { color: var(--color-accent); }
.svc-trial { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-xl); background: #f7f5f2; border-radius: var(--radius-md); padding: var(--space-lg) var(--space-xl); }
/* 背景が同色（alt=クリーム）のセクションでは白カード＋影で浮かせて同化を防ぐ */
.np-section--alt .svc-trial,
.np-section--alt .menu__contact { background: var(--color-bg); box-shadow: var(--shadow-card); }
.svc-trial__price { flex: none; }
.svc-trial__price-label { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; margin-bottom: 6px; }
.svc-trial__price-main { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.svc-trial__price-num { font-family: var(--font-num); font-size: 1.875rem; line-height: 1; color: var(--color-accent); }
.svc-trial__price-tax { font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); }
.svc-trial__price-note { margin-top: 6px; font-size: 0.75rem; color: var(--color-text-muted); }
.svc-trial__catch { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.svc-trial__desc { font-size: 0.8125rem; line-height: 1.7; color: var(--color-text-muted); }
.svc-trial__btn { align-self: flex-start; }

/* FLOW */
.np-flow { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-md); counter-reset: none; }
.np-flow__step { background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-lg); }
.np-flow__n { font-family: var(--font-num); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-accent); }
.np-flow__title { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; margin: 6px 0; }
.np-flow__price { display: inline-block; margin-bottom: 8px; padding: 2px 10px; font-size: 0.6875rem; font-weight: 700; color: var(--color-text); background: #ece8e3; border-radius: var(--radius-full); }
.np-cta-block { margin-top: var(--space-xl); text-align: center; }
.np-cta-block__lead { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; margin-bottom: var(--space-md); }
.np-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
.np-actions--center { justify-content: center; }

/* FAQ */
.np-faq { display: flex; flex-direction: column; gap: 10px; }
.np-faq__item { background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: 0 var(--space-lg); box-shadow: var(--shadow-card); }
.np-faq__item summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; font-size: 0.9375rem; position: relative; padding-right: 28px; }
.np-faq__item summary::-webkit-details-marker { display: none; }
.np-faq__item summary::after { content: "＋"; position: absolute; right: 0; top: 14px; color: var(--color-accent); font-weight: 700; }
.np-faq__item[open] summary::after { content: "−"; }
.np-faq__item p { margin: 0 0 16px; font-size: 0.875rem; line-height: 1.8; color: var(--color-text-muted); }

/* 最終CTA */
.np-finalcta { background: var(--color-accent); color: #fff; padding-block: 64px; }
.np-finalcta__title { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 700; margin-bottom: 14px; }
.np-finalcta__lead { font-size: 0.9375rem; line-height: 1.9; margin-bottom: var(--space-xl); opacity: 0.95; }
.np-finalcta .btn--primary { background: #fff; color: var(--color-accent); border-color: #fff; }
.np-finalcta .btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }

@media (min-width: 768px) {
  .np-cards { grid-template-columns: repeat(2, 1fr); }
  .about-flow { grid-template-columns: repeat(5, 1fr); }
  .svc-grid { columns: 2; }
  .svc-terms { grid-template-columns: repeat(2, 1fr); }
  .np-flow { grid-template-columns: repeat(3, 1fr); }
  .svc-trial { flex-direction: row; align-items: center; gap: var(--space-xl); }
  .svc-trial__price { width: auto; min-width: 160px; }
  .svc-trial__body { flex: 1; }
  .svc-trial__btn { align-self: center; flex: none; }
}
@media (min-width: 1024px) {
  .np-cards--4 { grid-template-columns: repeat(4, 1fr); }
  .np-cards--3 { grid-template-columns: repeat(3, 1fr); }
  .svc-grid { columns: 3; }
  .np-changes__list { columns: 2; column-gap: var(--space-2xl); }
  .np-changes__list li { break-inside: avoid; }
}

/* 見出しの赤/黒の塗り分け（赤字混在）を単色化。MV（.newmv__service・.hero__title）は
   対象外＝赤を維持する。セクション見出しは全ページで単色にそろえる。 */
.section-title .accent { color: inherit; }


/* ============================================================
   /menu/month — 月次顧問コンサルティング 専用
   （固有: MV / PROBLEM / SOFT-POWER / ABOUT / GOAL / SERVICE支援項目）
   実績・流れ・CTA・比較・BENEFITS・VOICE は TOP/共通クラスを流用
   ============================================================ */

/* S1 MV は新規開業/リニューアルと共通の .newmv を使用（背景画像のみ .page-month .newmv で差し替え） */

/* ---- S2 PROBLEM：天秤メタファー（ハード投資 ⇄ ソフト改善）---- */
/* 見出しは左寄せ・リード文は見出しの下 */
.month-problem__head { max-width: 1120px; margin: 0 auto var(--space-xl); }
.month-problem__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: var(--font-num); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em;
  color: var(--color-accent);
}
.month-problem__eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--color-accent); }
.month-problem__title {
  font-family: var(--font-serif); font-size: clamp(1.5rem, 3.4vw, 2.125rem); font-weight: 900;
  line-height: 1.42; margin-bottom: 16px;
}
.month-problem__title .accent { color: inherit; }
.month-problem__lead { max-width: 760px; font-size: 0.9375rem; line-height: 1.9; color: var(--color-text-muted); }

.month-problem { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); max-width: 1120px; margin: 0 auto; align-items: center; }
.month-problem__scale { order: -1; }
.month-problem__scale img { width: 100%; height: auto; border-radius: var(--radius-md); }
.month-problem__side {
  background: var(--color-bg); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-lg) var(--space-xl);
}
.month-problem__label {
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border);
}
.month-problem__label--red { color: var(--color-accent); }
.month-problem__list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.month-problem__list li { position: relative; padding-left: 26px; font-size: 0.8438rem; line-height: 1.6; }
.month-problem__ic { position: absolute; left: 0; top: 1px; display: inline-flex; }
.month-problem__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.month-problem__list--x li { color: var(--color-text-muted); }
.month-problem__list--x .month-problem__ic { color: var(--color-text-muted); }
.month-problem__list--o .month-problem__ic { color: var(--color-accent); }
.month-problem__bar { margin-top: 16px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 700; line-height: 1.5; text-align: center; }
.month-problem__bar--dark { background: var(--color-dark); color: #fff; }
.month-problem__bar--red { background: var(--color-accent); color: #fff; }
/* SP：カード左右の余白と帯の余白を詰め、帯テキストが変な位置で折り返さないように */
@media (max-width: 600px) {
  .month-problem__side { padding-left: var(--space-md); padding-right: var(--space-md); }
  .month-problem__bar { padding-left: 8px; padding-right: 8px; word-break: keep-all; }
}
/* 締め：MVと同じ「サウナ王イラスト＋吹き出し」 */
.month-saying {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  max-width: 780px; margin: var(--space-xl) auto 0;
}
.month-saying__action { margin-top: var(--space-lg); text-align: center; }
.month-saying__mascot {
  flex: none; width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  background: #fff; border: 2px solid var(--color-accent); box-shadow: var(--shadow-card);
}
.month-saying__bubble {
  position: relative; padding: 18px 28px;
  background: var(--color-bg); border: 2px solid var(--color-accent); border-radius: 22px;
  box-shadow: 0 6px 20px rgba(200, 41, 42, 0.1);
  font-family: var(--font-serif); font-size: 1rem; font-weight: 700; line-height: 1.6;
}
.month-saying__bubble strong { color: var(--color-accent); }
/* REASONセクション末尾の吹き出し＋CTA（PROBLEMの吹き出しを流用） */
.reason-cta { margin-top: var(--space-2xl); text-align: center; }
.reason-cta__bubble { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; line-height: 1.9; text-align: left; }
.reason-cta__actions { display: inline-grid; grid-auto-flow: row; grid-auto-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
/* PC：CTA2ボタンを横並びに（等幅は grid-auto-columns:1fr で担保）。
   ※ .newmv__actions / .reason-cta__actions のベース宣言より後に置くこと。
   前方（min-width:768px の別ブロック）に書くと、同一詳細度でベースの row が後勝ちして効かない。 */
@media (min-width: 768px) {
  .newmv__actions,
  .reason-cta__actions { grid-auto-flow: column; }
}
/* しっぽ（縁取り付き）：::before＝赤い外側、::after＝白い内側 */
.month-saying__bubble::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  border-style: solid; border-width: 11px 14px 11px 0;
  border-color: transparent var(--color-accent) transparent transparent;
}
.month-saying__bubble::after {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  border-style: solid; border-width: 8px 11px 8px 0;
  border-color: transparent var(--color-bg) transparent transparent;
}
@media (max-width: 640px) {
  .month-saying { flex-direction: column; gap: 0; }
  .month-saying__bubble { margin-top: 16px; text-align: center; }
  .month-saying__bubble::before {
    left: 50%; top: -14px; transform: translateX(-50%);
    border-width: 0 14px 14px 14px; border-color: transparent transparent var(--color-accent) transparent;
  }
  .month-saying__bubble::after {
    left: 50%; top: -10px; transform: translateX(-50%);
    border-width: 0 11px 11px 11px; border-color: transparent transparent var(--color-bg) transparent;
  }
}
@media (min-width: 900px) {
  .month-problem { grid-template-columns: 1fr 1.15fr 1fr; }
  .month-problem__scale { order: 0; }
}

/* 強調コピー（PROBLEM/COMPARISON/SERVICE 共通の引用ブロック） */
.month-quote {
  max-width: 860px; margin: var(--space-xl) auto 0;
  background: var(--color-bg); border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: var(--shadow-card);
  padding: var(--space-lg) var(--space-xl);
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; line-height: 1.7; text-align: center;
}
.month-quote--left { margin-top: 0; text-align: left; font-size: 0.9375rem; font-weight: 400; line-height: 1.9; }

/* ---- ソフト改善の施策例（PROBLEMと統合。天秤の下のサブ見出し）---- */
.month-subhead { text-align: center; max-width: 780px; margin: var(--space-3xl) auto var(--space-xl); }
.month-subhead__title { font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 1.875rem); font-weight: 900; line-height: 1.4; }
.month-subhead__title .accent { color: inherit; }
.month-subhead__lead { margin-top: 12px; font-size: 0.9375rem; line-height: 1.9; color: var(--color-text-muted); }

/* ---- ソフト改善の施策例：4本柱カード ---- */
.month-note {
  max-width: 900px; margin: 0 auto var(--space-xl);
  background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  padding: 12px 18px; font-size: 0.8125rem; line-height: 1.8; color: var(--color-text-muted); text-align: center;
}
.month-note strong { color: var(--color-accent); }
.month-soft { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.month-soft__card {
  position: relative; display: flex; flex-direction: column; background: var(--color-bg);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.month-soft__media { position: relative; aspect-ratio: 16 / 9; background: #ece8e3; }
.month-soft__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.month-soft__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-lg) var(--space-xl); }
/* 施策例0N：画像左上のラベルバッジ（生成り地×金枠＋明朝／左に赤アクセント） */
.month-soft__num {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 9px 14px 11px;
  background: #FBF8F4;
  border: 1.5px solid var(--color-gold);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(26, 16, 16, 0.22);
}
.month-soft__num-lbl {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.14em; color: var(--color-dark);
  padding-bottom: 5px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(184, 134, 42, 0.55);
}
.month-soft__num-no {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 1.75rem; line-height: 1; color: var(--color-dark);
}
.month-soft__title { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.month-soft__aim { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 4px; }
.month-soft__label {
  display: inline-block; align-self: flex-start; margin: 16px 0 10px; padding: 2px 10px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-accent);
  background: rgba(200, 41, 42, 0.07); border-radius: var(--radius-full);
}
.month-soft__ex { list-style: none; display: flex; flex-direction: column; }
.month-soft__ex li { padding: 8px 0; border-top: 1px dotted var(--color-border); font-size: 0.8125rem; line-height: 1.7; color: var(--color-text); }
.month-soft__ex li:first-child { border-top: none; padding-top: 0; }
.month-soft__ex strong { color: var(--color-accent); font-weight: 700; }
@media (min-width: 768px) { .month-soft { grid-template-columns: repeat(2, 1fr); } }

/* ---- 施策事例：横長・左右交互 ---- */
.month-cases { list-style: none; display: flex; flex-direction: column; gap: var(--space-xl); }
.month-case {
  display: grid; grid-template-columns: 1fr; background: var(--color-bg);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.month-case__media { position: relative; aspect-ratio: 16 / 9; background: #ece8e3; }
.month-case__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.month-case__body { display: flex; flex-direction: column; padding: var(--space-lg) var(--space-xl); }
/* 施策番号：数字を大きく見せるチャプター表現（数字＋金のライン） */
.month-case__num {
  display: flex; align-items: center; align-self: flex-start; gap: 14px;
  margin-bottom: 8px;
  font-family: var(--font-num); font-weight: 800; font-size: 2.5rem; line-height: 1;
  color: var(--color-accent); letter-spacing: 0.01em;
}
.month-case__num::after {
  content: ""; width: 44px; height: 2px; background: var(--color-gold);
}
.month-case__title { font-family: var(--font-serif); font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 900; line-height: 1.45; }
.month-case__lead { margin-top: 12px; font-size: 0.9375rem; line-height: 1.9; color: var(--color-text); }
.month-case__body .month-soft__label { margin: 18px 0 8px; }
/* 施策リスト：他ページと同形状の「赤丸＋白抜きチェック」 */
.month-case__ex { list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px 26px; }
.month-case__ex li {
  position: relative; padding-left: 30px;
  font-size: 0.875rem; line-height: 1.6; color: var(--color-text);
}
.month-case__ex li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
  background: var(--color-accent); border-radius: 50%;
}
.month-case__ex li::after {
  content: ""; position: absolute; left: 10px; top: 12px; width: 4px; height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
.month-case__ex strong { color: var(--color-accent); font-weight: 700; }

@media (min-width: 900px) {
  .month-case { grid-template-columns: 4fr 6fr; }        /* 写真4 : コンテンツ6 */
  .month-case--rev { grid-template-columns: 6fr 4fr; }   /* 写真右でも比率は同じ */
  .month-case--rev .month-case__media { order: 2; }
  .month-case__media { aspect-ratio: auto; min-height: 100%; }
  .month-case__body { padding: var(--space-2xl); justify-content: center; }
  .month-case__ex { grid-template-columns: 1fr 1fr; }
}

/* ---- S4 ABOUT：月次サイクル（4ステップ→毎月ループ）---- */
.month-cycle { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.month-cycle__step {
  position: relative; background: var(--color-bg);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: var(--space-lg);
}
.month-cycle__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent); color: #fff;
  font-family: var(--font-num); font-size: 1rem; font-weight: 700; margin-bottom: 12px;
}
.month-cycle__title { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; line-height: 1.4; margin-bottom: 6px; }
.month-cycle__text { font-size: 0.8125rem; line-height: 1.75; color: var(--color-text-muted); }
.month-cycle__loop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: var(--space-lg); font-family: var(--font-serif); font-weight: 700; font-size: 0.9375rem; text-align: center;
}
.month-cycle__loop-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(200, 41, 42, 0.1); color: var(--color-accent); font-size: 1.125rem; font-weight: 700;
}
@media (min-width: 768px) {
  .month-cycle { grid-template-columns: repeat(4, 1fr); }
  .month-cycle__step + .month-cycle__step::before {
    content: "→"; position: absolute; top: 50%; left: calc(var(--space-md) / -2);
    transform: translate(-50%, -50%); color: var(--color-accent); font-weight: 700; font-size: 1rem;
  }
}

/* ---- S5 GOAL：3段の目標（ステップアップ）---- */
.month-goal { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-md); max-width: 920px; margin: 0 auto; }
.month-goal__step {
  position: relative; background: var(--color-bg);
  border: var(--border-width) solid var(--color-border); border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-lg) var(--space-xl);
}
.month-goal__badge { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-serif); font-size: 0.9375rem; font-weight: 700; color: var(--color-accent); margin-bottom: 8px; }
.month-goal__badge small { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-text-muted); }
.month-goal__title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin-bottom: 6px; }
.month-goal__text { font-size: 0.875rem; line-height: 1.7; color: var(--color-text-muted); }
@media (min-width: 768px) {
  .month-goal { grid-template-columns: repeat(3, 1fr); align-items: end; }
  /* 下がそろい、上に向かって段が上がる階段表現 */
  .month-goal__step--1 { margin-top: 48px; }
  .month-goal__step--2 { margin-top: 24px; }
  .month-goal__step--3 { margin-top: 0; }
}

/* ---- S6 WORKS：実績カードの写真プレースホルダ（要選定用）---- */
.work-card__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-size: 0.75rem; letter-spacing: 0.04em;
}

/* ---- S10 SERVICE：支援項目（2カラム箇条書き）---- */
.month-support {
  background: var(--color-bg); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-lg) var(--space-xl);
}
.month-support__list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0; }
.month-support__list li { position: relative; padding: 9px 0 9px 18px; font-size: 0.875rem; line-height: 1.6; border-top: 1px dotted var(--color-border); }
.month-support__list li:first-child { border-top: none; }
.month-support__list li::before { content: "・"; position: absolute; left: 0; top: 9px; color: var(--color-accent); font-weight: 700; }
@media (min-width: 768px) {
  .month-support__list { grid-template-columns: 1fr 1fr; column-gap: var(--space-2xl); }
  .month-support__list li:nth-child(2) { border-top: none; }
}

/* =======================================================================
   /menu/month — 「500項目の現状診断」とは（S3 DIAGNOSIS：診断票＋4ステップ）
   ======================================================================= */
/* SOLUTION：01診断 → 02改善サイクル → 03ゴール（横長カードを縦に3枚、下向きの金アローでつなぐ）*/
.sol-flow { display: flex; flex-direction: column; margin-top: var(--space-xl); }
.sol-phase { background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-lg); display: grid; grid-template-columns: 1fr; grid-template-areas: "head" "desc" "body"; }
.sol-phase__head { grid-area: head; display: flex; align-items: center; gap: 14px; }
.sol-phase__no { font-family: var(--font-num); font-weight: 900; font-size: 2.5rem; line-height: 1; color: var(--color-gold); }
.sol-phase__label { position: relative; padding-left: 14px; font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; line-height: 1.4; color: var(--color-text); }
.sol-phase__label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 1.5em; background: var(--color-gold); }
.sol-phase__desc { grid-area: desc; margin: 10px 0 var(--space-md); font-size: 0.83rem; line-height: 1.8; color: var(--color-text-muted); }
.sol-phase__body { grid-area: body; min-width: 0; }
/* カード間のコネクタは既存パーツ .flow__connector + .flow__arrow（FLOWと共通の赤シェブロン）を使用 */
/* デスクトップ：カード内は「見出し＋リード（左固定幅）／本文（右）」の2カラム */
@media (min-width: 900px) {
  .sol-phase { grid-template-columns: 280px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "head body" "desc body"; column-gap: var(--space-2xl); padding: var(--space-xl); }
  .sol-phase__desc { margin-bottom: 0; }
}
/* サイクルの締め：「毎月くり返す」ループノード（金・中央寄せ）*/
.diag-flow__loop { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.diag-flow__loop-icon { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--color-gold); background: var(--color-bg); color: var(--color-gold); }
.diag-flow__loop-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diag-flow__loop-t { font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; color: var(--color-gold); }
.diag-flow__loop-d { margin-top: 2px; font-size: 0.76rem; line-height: 1.6; color: var(--color-text-muted); }
/* PHASE 03 ゴール：左＝目標ラベルパネル（淡赤）／右＝タイトル＋説明 */
.sol-goals .month-goal { max-width: none; grid-template-columns: 1fr; gap: 14px; }
.sol-goals .month-goal__step { margin-top: 0; overflow: hidden; padding: 18px 20px; border-left: var(--border-width) solid var(--color-border); }
.sol-goals .month-goal__title { font-size: 1.15rem; }
@media (min-width: 900px) {
  .sol-goals .month-goal__step { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: auto auto; column-gap: 28px; align-items: center; padding: 16px 24px 16px 16px; }
  .sol-goals .month-goal__badge { grid-row: 1 / -1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-bottom: 0; padding: 12px 10px; background: rgba(200, 41, 42, 0.05); border-radius: 8px; font-size: 1rem; }
  .sol-goals .month-goal__badge small { padding: 2px 12px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); }
  /* バッジ縦パネルの高さで行が広がっても、タイトルと説明は中央で密着させる */
  .sol-goals .month-goal__title { margin-bottom: 0; align-self: end; padding-bottom: 4px; }
  .sol-goals .month-goal__text { margin: 0; align-self: start; }
}
/* 左：診断シート（抜粋）モック */
.diag-sheet { background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.diag-sheet__head { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 20px; background: var(--color-dark); color: #fff; }
.diag-sheet__head b { font-family: var(--font-serif); font-weight: 700; font-size: 0.9rem; line-height: 1.5; }
.diag-sheet__head small { opacity: 0.7; font-size: 0.72rem; white-space: nowrap; }
@media (min-width: 900px) {
  .diag-sheet__head { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; }
}
.diag-sheet__row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 20px; border-top: 1px dotted var(--color-border); font-size: 0.85rem; line-height: 1.5; color: var(--color-text); }
.diag-sheet__ck { flex: none; width: 22px; height: 22px; margin-top: 1px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-border); border-radius: 6px; font-size: 0.78rem; font-weight: 700; }
.diag-sheet__ck--y { border-color: var(--color-gold); color: var(--color-gold); }
.diag-sheet__ck--n { border-color: var(--color-accent); color: var(--color-accent); }
.diag-sheet__foot { padding: 12px 20px; border-top: 1px dotted var(--color-border); text-align: center; color: var(--color-text-muted); font-size: 0.76rem; word-break: keep-all; }
/* 改善サイクルの3ステップ（番号丸＋タイトル＋説明をひとつの淡色カードにまとめ、一体感を出す）*/
.diag-flow { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.diag-flow__step { background: var(--color-surface); border-radius: var(--radius-md); padding: 18px 20px; }
.diag-flow__chip { display: flex; align-items: center; gap: 12px; }
.diag-flow__no { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-accent); color: #fff; font-family: var(--font-num); font-weight: 700; font-size: 0.85rem; }
.diag-flow__t { font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; line-height: 1.5; color: var(--color-text); }
.diag-flow__d { margin-top: 10px; padding-top: 10px; border-top: 1px dotted var(--color-border); font-size: 0.8rem; line-height: 1.7; color: var(--color-text-muted); }
/* 横長カード内では3列に。締めのループノードは全幅中央 */
@media (min-width: 900px) {
  .diag-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
  .diag-flow__loop { grid-column: 1 / -1; }
}

/* =======================================================================
   /menu/trial — お試しコンサル（左＝説明／右＝申込フォーム sticky）
   ======================================================================= */
.trial { padding-top: calc(64px + var(--space-2xl)); padding-bottom: var(--space-3xl, 96px); background: var(--color-bg); }
.trial__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: start; }
.trial__main { min-width: 0; }

/* 左：見出し */
.trial__eyebrow { font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; color: var(--color-accent); }
.trial__title { margin-top: 10px; font-family: var(--font-serif); font-weight: 900; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.25; color: var(--color-text); }
.trial__title .accent { color: var(--color-accent); }
.trial__lead { margin-top: 16px; font-size: 0.95rem; line-height: 1.9; color: var(--color-text-muted); }

/* ブロック（ABOUT / PRICE ほか） */
.trial-block { margin-top: var(--space-2xl); }
.trial-block--first { margin-top: var(--space-xl); }
/* 見出し：和文タイトル＋左の赤アクセントバー＋下の細ルール（英字ラベルは廃止） */
.trial-block__head { margin-bottom: 16px; }
.trial-block__title { position: relative; padding-left: 16px; font-family: var(--font-serif); font-weight: 700; font-size: 1.35rem; line-height: 1.4; color: var(--color-text); }
.trial-block__title::before { content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 4px; border-radius: 2px; background: var(--color-accent); }
.trial-block__desc { margin: -2px 0 14px; font-size: 0.9rem; line-height: 1.9; color: var(--color-text-muted); }

/* 仕様テーブル（dl） */
.trial-spec { background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.trial-spec__row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 20px; border-top: 1px dotted var(--color-border); font-size: 0.9rem; line-height: 1.7; }
.trial-spec__row:first-child { border-top: none; }
.trial-spec__row dt { font-family: var(--font-serif); font-weight: 700; color: var(--color-text); }
.trial-spec__row dd { color: var(--color-text-muted); }
.trial-spec--price .trial-spec__row--main { background: var(--color-surface); align-items: center; }
.trial-spec--price .trial-spec__row--main dd { color: var(--color-text); font-size: 1.05rem; }
.trial-spec--price .trial-spec__row--main dd strong { font-family: var(--font-serif); font-weight: 900; font-size: 1.6rem; color: var(--color-accent); }

/* こんな方におすすめ（チェックリスト） */
.trial-check { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.trial-check li { position: relative; padding: 12px 16px 12px 44px; background: var(--color-surface); border-radius: var(--radius-md); font-size: 0.9rem; line-height: 1.7; color: var(--color-text); }
.trial-check li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 9px; margin-top: -6px; border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(-45deg); }

/* 当日の流れ（既存 diag-flow カードを縦積み、間に赤シェブロン） */
.trial-flow .flow__connector { padding-block: 8px; }

/* よくある質問 */
.trial-faq { display: flex; flex-direction: column; gap: 12px; }
.trial-faq__item { background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 16px 20px; }
.trial-faq__q { position: relative; padding-left: 28px; font-family: var(--font-serif); font-weight: 700; font-size: 0.92rem; line-height: 1.6; color: var(--color-text); }
.trial-faq__q::before { content: "Q"; position: absolute; left: 0; top: 0; font-family: var(--font-num); font-weight: 700; font-size: 1rem; color: var(--color-accent); }
.trial-faq__a { position: relative; margin-top: 10px; padding-top: 10px; padding-left: 28px; border-top: 1px dotted var(--color-border); font-size: 0.85rem; line-height: 1.8; color: var(--color-text-muted); }
.trial-faq__a::before { content: "A"; position: absolute; left: 0; top: 10px; font-family: var(--font-num); font-weight: 700; font-size: 1rem; color: var(--color-gold); }

/* =======================================================================
   /download — 資料ダウンロード（案A：メイン主役＋セット特典）
   ※レイアウト土台は .trial* を流用。ここは資料固有パーツのみ。
   ======================================================================= */
/* メイン資料：表紙＋内容 */
.dl-main { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
/* 資料表紙（プレースホルダ。実PDF表紙差し替えまではこの意匠） */
.dl-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 3 / 4; max-width: 220px; padding: 24px 18px; text-align: center; color: #fff; background: linear-gradient(150deg, #a81f20 0%, var(--color-accent) 55%, #d8544f 100%); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.dl-cover__title { font-family: var(--font-serif); font-weight: 900; font-size: 1.5rem; line-height: 1.4; }
/* 資料の紹介文（目次リストに代えて1本のコピーで訴求） */
.dl-copy { font-size: 0.95rem; line-height: 2; color: var(--color-text); }
.dl-copy + .dl-copy { margin-top: 12px; }
.dl-copy strong { font-weight: 700; color: var(--color-accent); }
.dl-note { margin-top: 14px; font-size: 0.76rem; color: var(--color-text-muted); }
/* サブ資料：セット特典カード */
.dl-sub { position: relative; display: flex; align-items: center; gap: 18px; margin-top: var(--space-xl); padding: 20px 22px; background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.dl-sub__badge { position: absolute; top: -12px; left: 20px; padding: 4px 14px; font-family: var(--font-serif); font-weight: 700; font-size: 0.75rem; color: #fff; background: var(--color-gold); border-radius: 999px; box-shadow: var(--shadow-card); }
.dl-sub__cover { flex: none; width: 60px; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(150deg, #7a5a1c, var(--color-gold)); border-radius: 6px; }
.dl-sub__cover-tag { font-family: var(--font-num); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.12em; }
.dl-sub__title { font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; color: var(--color-text); }
.dl-sub__desc { margin-top: 6px; font-size: 0.83rem; line-height: 1.7; color: var(--color-text-muted); }
@media (min-width: 900px) {
  .dl-main { grid-template-columns: 220px 1fr; gap: var(--space-2xl); align-items: start; }
  .dl-main__lead { margin-bottom: 14px; }
}

/* 右：申込フォームカード */
.trial__aside { min-width: 0; }
.rrform { background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.rrform__head { padding: 22px 24px; background: var(--color-accent); color: #fff; text-align: center; }
.rrform__title { font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; }
.rrform__sub { margin-top: 6px; font-size: 0.8rem; color: rgba(255,255,255,0.85); }
.rrform__body { padding: 22px 24px 24px; }

/* CF7 フィールド */
.rrform__grid { display: flex; flex-direction: column; gap: 16px; }
.rrform .wpcf7-form-control-wrap { display: block; }
/* flexカラムにして、CF7タグ前後の改行（空白テキストノード）が余分な行間を作るのを防ぐ */
.rrform__field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rrform__label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.85rem; color: var(--color-text); }
.rrform__req { padding: 2px 8px; background: var(--color-accent); color: #fff; font-family: var(--font-sans); font-size: 0.65rem; font-weight: 700; border-radius: 4px; letter-spacing: 0.02em; }
.rrform__opt { padding: 2px 8px; background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); font-family: var(--font-sans); font-size: 0.65rem; font-weight: 700; border-radius: 4px; }
.rrform__input { width: 100%; padding: 11px 13px; font-size: 16px; line-height: 1.5; color: var(--color-text); background: #fff; border: 1.5px solid var(--color-border); border-radius: 8px; -webkit-appearance: none; appearance: none; transition: border-color 0.15s, box-shadow 0.15s; }
.rrform__input::placeholder { color: #b9b3ab; }
.rrform__input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(200, 41, 42, 0.12); }
.rrform__textarea { min-height: 108px; resize: vertical; }
.rrform__hint { font-size: 0.76rem; line-height: 1.5; color: var(--color-text-muted); }
/* 郵便番号→住所 自動入力の状態メッセージ（検索中／該当なし／エラー） */
.rrform__zipmsg { display: block; margin-top: 4px; font-size: 0.76rem; line-height: 1.5; color: var(--color-text-muted); }
.rrform__zipmsg[data-state="warn"] { color: var(--color-accent); }
.rrform__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
/* チェックボックス群（関心のあるサービス等） */
.rrform__checks .wpcf7-list-item { display: inline-block; margin: 0 8px 0 0; }
.rrform__checks .wpcf7-list-item-label { font-size: 0.85rem; color: var(--color-text); }
.rrform__checks input[type="checkbox"],
.rrform__checks input[type="radio"] { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; accent-color: var(--color-accent); }

/* 同意チェック */
.rrform__consent { margin: 18px 0 0; font-size: 0.85rem; line-height: 1.6; color: var(--color-text); }
.rrform__consent .wpcf7-list-item { margin: 0; }
.rrform__consent label { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.rrform__consent input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--color-accent); }
.rrform__consent a { color: var(--color-accent); text-decoration: underline; }

/* 送信完了後のダウンロードパネル（資料DL専用） */
.rrform__ready { margin-top: 16px; padding: 18px; background: rgba(58, 138, 79, 0.08); border: 1.5px solid #3a8a4f; border-radius: 10px; }
.rrform__ready-t { font-size: 0.88rem; line-height: 1.7; font-weight: 700; color: #2f6f40; margin-bottom: 12px; }
.rrform__dl { display: flex; align-items: center; gap: 10px; padding: 13px 16px; margin-top: 8px; font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; color: #fff; background: var(--color-accent); border-radius: 8px; text-decoration: none; transition: background 0.15s; }
.rrform__dl:hover { background: #a81f20; }
.rrform__dl-ic { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.2); border-radius: 50%; font-size: 0.9rem; }

/* 送信ボタン */
.rrform__submit-wrap { margin: 18px 0 0; }
.rrform__submit { width: 100%; padding: 15px 20px; font-family: var(--font-serif); font-weight: 700; font-size: 1rem; color: #fff; background: var(--color-accent); border: none; border-radius: 10px; cursor: pointer; transition: background 0.15s, transform 0.05s; }
.rrform__submit:hover { background: #a81f20; }
.rrform__submit:active { transform: translateY(1px); }
.rrform__note { margin-top: 14px; font-size: 0.78rem; line-height: 1.7; color: var(--color-text-muted); text-align: center; }
.rrform__missing { padding: 20px; text-align: center; color: var(--color-text-muted); }

/* CF7 バリデーション/応答メッセージ */
.rrform .wpcf7-not-valid-tip { margin-top: 5px; font-size: 0.78rem; color: var(--color-accent); }
.rrform .wpcf7-not-valid { border-color: var(--color-accent) !important; }
.rrform .wpcf7-response-output { margin: 16px 0 0 !important; padding: 12px 14px !important; font-size: 0.82rem; line-height: 1.6; border-radius: 8px; border-width: 1.5px !important; }
.rrform .wpcf7 form.sent .wpcf7-response-output { border-color: #3a8a4f !important; background: rgba(58, 138, 79, 0.08); color: #2f6f40; }
.rrform .wpcf7 form.invalid .wpcf7-response-output,
.rrform .wpcf7 form.failed .wpcf7-response-output { border-color: var(--color-accent) !important; background: rgba(200, 41, 42, 0.06); color: var(--color-accent); }
.rrform .wpcf7-spinner { margin: 0 auto; display: block; }

/* デスクトップ：2カラム＋フォーム sticky 追従 */
@media (min-width: 900px) {
  .trial__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
  .trial__aside { position: sticky; top: calc(64px + var(--space-lg)); }
}

/* =======================================================================
   /works — コンサル実績 一覧（カードはTOPの .work-card を流用）
   ======================================================================= */
.works-archive { padding-top: calc(64px + var(--space-lg)); padding-bottom: var(--space-3xl, 96px); background: var(--color-bg); }
.works-archive__head { margin-bottom: var(--space-xl); }
.works-archive__title { font-family: var(--font-serif); font-weight: 900; font-size: clamp(1.8rem, 4.5vw, 2.5rem); line-height: 1.25; color: var(--color-text); }
.works-archive__lead { margin-top: 12px; font-size: 0.95rem; line-height: 1.8; color: var(--color-text-muted); }
.works-archive__note {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-accent-dark);
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 6px 6px 0;
}
/* 一覧の締め：「他にも多数」を示すセンター寄せノート（PCは両脇に細い罫線） */
.works-archive__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: var(--space-2xl);
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}
/* 横幅に余裕のあるタブレット以上：文字を少し大きく＋両脇に細い罫線 */
@media (min-width: 768px) {
  .works-archive__more { font-size: 0.95rem; letter-spacing: 0.02em; }
  .works-archive__more::before,
  .works-archive__more::after {
    content: "";
    flex: 0 0 44px;
    height: 1px;
    background: var(--color-border);
  }
}

/* 絞り込み */
.works-filter { padding-bottom: var(--space-lg); }
.works-filter__label { font-family: var(--font-num); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--color-text-muted); }
.works-filter__tabs { display: flex; gap: 24px; margin-top: 10px; border-bottom: 1px solid var(--color-border); }
.works-filter__tab { position: relative; padding: 8px 2px 12px; font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; color: var(--color-text-muted); background: none; border: none; cursor: pointer; }
.works-filter__tab.is-active { color: var(--color-text); }
.works-filter__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-accent); }
/* ピル群：既定は非表示、アクティブ軸のみ表示 */
.works-filter__pills { display: none; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.works-filter__pills.is-active { display: flex; }
.wpill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; font-size: 0.85rem; font-weight: 700; color: var(--color-text); background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: 999px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.wpill:hover { border-color: var(--color-accent); }
.wpill.is-active { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }
.wpill__n { font-family: var(--font-num); font-size: 0.75rem; opacity: 0.75; }
.wpill.is-active .wpill__n { opacity: 0.9; }

/* 件数バー */
.works-archive__meta { margin: var(--space-lg) 0 var(--space-md); }
.works-archive__count { font-size: 0.85rem; color: var(--color-text-muted); }
.works-archive__count span { font-family: var(--font-num); font-weight: 700; font-size: 1.05rem; color: var(--color-text); }
.works-archive__empty { padding: var(--space-2xl) 0; text-align: center; color: var(--color-text-muted); }
/* .work-card は display:flex のため [hidden] が効かない。絞り込みで非表示にできるよう明示 */
.work-card[hidden] { display: none; }
/* カード全体を詳細ページへのリンクに（TOPは非リンクだが一覧はクリックで詳細へ） */
.work-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.work-card__link .work-card__name { transition: color var(--transition); }
.work-card:hover .work-card__name { color: var(--color-accent); }

/* メディア出演実績：2カラムのリスト行（works-archive の枠組みを共用） */
.media-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; }
/* 詳細ページを持たない（クリックできない）ため、hover時の浮き上がり演出は付けない */
.media-item { display: flex; align-items: flex-start; gap: 16px; padding: 14px 18px; background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.media-item[hidden] { display: none; }
.media-item__thumb { position: relative; flex: none; width: clamp(112px, 30%, 152px); aspect-ratio: 4 / 3; background: var(--color-surface); border-radius: var(--radius-sm); overflow: hidden; }
/* 画像未登録時：カテゴリアイコンをオフホワイト面の中央に。主役の写真より控えめに見せる */
.media-item__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* 後段の .media-item__thumb img（width/height:100%）に負けないよう詳細度を上げる */
.media-item__thumb .media-item__ph img { width: 38%; height: auto; object-fit: contain; opacity: 0.7; }
.media-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 書影など縦長画像：トリミングせず枠内に全体を収める（誌名が切れないように） */
.media-item__thumb--portrait img { object-fit: contain; padding: 6px; box-sizing: border-box; }
.media-item__body { min-width: 0; }
.media-item__cat { font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); }
.media-item__title { margin-top: 4px; font-family: var(--font-serif); font-weight: 700; font-size: 1.12rem; line-height: 1.45; letter-spacing: 0.01em; color: var(--color-text); }
/* 説明文はタイトルより小さく・淡くしてメリハリを出す */
.media-item__text { margin-top: 7px; font-size: 0.82rem; line-height: 1.7; color: var(--color-text-muted); }
.media-item__date { margin-top: 6px; font-family: var(--font-num); font-size: 0.78rem; color: var(--color-text-muted); }
@media (min-width: 768px) {
  .media-list { grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
}

/* =======================================================================
   共通パーツ（投稿系ページで使い回す土台）
   - page-header：パンくず＋eyebrow＋H1＋リード＋注記
   - breadcrumb ：パンくず
   - c-heading  ：赤アクセントバーの統一見出し（H2/H3）
   - entry-content：本文prose（編集者が書いた本文を自動でブランド装飾）
   ======================================================================= */
/* --- パンくず --- */
.breadcrumb { margin-bottom: 16px; }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; font-size: 0.78rem; color: var(--color-text-muted); }
.breadcrumb__item { display: flex; align-items: center; gap: 8px; }
.breadcrumb__item + .breadcrumb__item::before { content: "›"; color: var(--color-text-muted); font-weight: 700; }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* パンくずバー（ヘッダー直下の全幅帯）。
   fixedヘッダー(64px)分は margin-top でよけ、帯（背景）自体はヘッダー下端から下だけに置く。
   padding は上下対称。 */
.breadcrumb-bar { margin-top: 64px; padding: 13px 0; background: var(--color-surface); }
.breadcrumb-bar .breadcrumb { margin-bottom: 0; }
/* パンくずバーの直後に来るセクションは、ヘッダー分の上余白を持たない（バーで確保済み） */
.section.has-breadcrumb-bar { padding-top: var(--space-xl); }

/* --- ページヘッダー --- */
.page-header { margin-bottom: var(--space-xl); }
.page-header__eyebrow { font-family: var(--font-serif); font-weight: 700; font-size: 0.9rem; color: var(--color-accent); margin-bottom: 8px; }
.page-header__title { font-family: var(--font-serif); font-weight: 900; font-size: clamp(1.8rem, 4.5vw, 2.5rem); line-height: 1.25; color: var(--color-text); }
.page-header__lead { margin-top: 12px; font-size: 0.95rem; line-height: 1.8; color: var(--color-text-muted); }
.page-header__note { margin-top: 8px; font-size: 0.8rem; line-height: 1.7; color: var(--color-text-muted); }

/* --- 統一見出しコンポーネント（赤アクセントバー） --- */
.c-heading { position: relative; padding-left: 16px; font-family: var(--font-serif); font-weight: 700; font-size: 1.35rem; line-height: 1.4; color: var(--color-text); }
.c-heading::before { content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 4px; border-radius: 2px; background: var(--color-accent); }
.c-heading--sub { font-size: 1.12rem; padding-left: 14px; }

/* --- 本文 prose（.entry-content 配下のタグを自動でブランド装飾） --- */
.entry-content { font-size: 1rem; line-height: 1.95; color: var(--color-text); }
.entry-content > :first-child { margin-top: 0; }
.entry-content p { margin-top: 1.2em; }
/* h2＝案C（ミニマル明朝＋アクセント下線）／h3＝案B（左の赤バー） */
.entry-content h2 { position: relative; margin-top: 2.6em; margin-bottom: 1em; padding-bottom: 0.5em; font-family: var(--font-serif); font-weight: 700; font-size: 1.8rem; line-height: 1.35; letter-spacing: 0.02em; color: var(--color-text); }
.entry-content h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.4em; height: 3px; background: var(--color-accent); }
.entry-content h2:first-child { margin-top: 0; }
.entry-content h3 { margin-top: 1.9em; margin-bottom: 0.5em; padding-left: 14px; border-left: 3px solid var(--color-accent); font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; line-height: 1.4; color: var(--color-text); }
.entry-content h4 { margin-top: 1.5em; font-family: var(--font-serif); font-weight: 700; font-size: 1.02rem; color: var(--color-text-muted); }
.entry-content ul, .entry-content ol { margin-top: 1.2em; padding-left: 1.4em; }
.entry-content ul { list-style: none; padding-left: 0; }
.entry-content ul > li { position: relative; padding-left: 1.5em; margin-top: 0.5em; }
.entry-content ul > li::before { content: ""; position: absolute; left: 0.2em; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.entry-content ol > li { margin-top: 0.5em; }
.entry-content a { color: var(--color-accent); text-decoration: underline; }
.entry-content strong { font-weight: 700; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.entry-content figure { margin-top: 1.5em; }
/* 複数写真を1枚に合成した画像は角丸なし */
.entry-content figure.rr-flat img { border-radius: 0; }
.entry-content figcaption { margin-top: 8px; font-size: 0.8rem; color: var(--color-text-muted); text-align: center; }
.entry-content blockquote { margin-top: 1.5em; padding: 16px 20px; background: var(--color-surface); border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm); color: var(--color-text-muted); }
.entry-content blockquote p { margin-top: 0.6em; }
.entry-content blockquote > :first-child { margin-top: 0; }
.entry-content table { width: 100%; margin-top: 1.5em; border-collapse: collapse; font-size: 0.92rem; }
.entry-content th, .entry-content td { padding: 10px 14px; border: 1px solid var(--color-border); text-align: left; }
.entry-content th { background: var(--color-surface); font-weight: 700; }
.entry-content hr { margin: 2em 0; border: none; border-top: 1px solid var(--color-border); }

/* --- コンサル実績 詳細（single-works） --- */
.works-single { padding-top: calc(64px + var(--space-lg)); padding-bottom: var(--space-3xl, 96px); background: var(--color-bg); }
.works-single__inner { max-width: 820px; }
.works-single__hero { margin-bottom: var(--space-xl); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.works-single__hero img { width: 100%; height: auto; display: block; }
.works-single__summary { margin-bottom: var(--space-2xl); background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.works-single__row { display: grid; grid-template-columns: 160px 1fr; border-top: 1px solid var(--color-border); font-size: 0.92rem; line-height: 1.7; }
.works-single__row:first-child { border-top: none; }
.works-single__row dt { display: flex; align-items: center; padding: 16px 20px; background: var(--color-surface); font-family: var(--font-serif); font-weight: 700; color: var(--color-text); }
.works-single__row dd { display: flex; align-items: center; padding: 16px 24px; color: var(--color-text-muted); }
.works-single__row--result dd { color: var(--color-accent); font-weight: 700; }
@media screen and (max-width: 600px) {
  .works-single__row { grid-template-columns: 110px 1fr; }
  .works-single__row dt { padding: 14px 14px; }
  .works-single__row dd { padding: 14px 16px; }
}
.works-single__back { margin-top: var(--space-2xl); }
.works-single__back a { color: var(--color-accent); text-decoration: none; font-weight: 700; font-size: 0.9rem; }
.works-single__back a:hover { text-decoration: underline; }

/* --- コンサル実績 詳細：関連事例（こちらの事例も読まれています） --- */
.works-related { padding-block: var(--space-3xl, 96px); background: var(--color-surface); }
.works-related__head { margin-bottom: var(--space-xl); }
.works-related__head .section-label { display: inline-flex; align-items: center; gap: 12px; }
.works-related__head .section-label::before { content: ""; width: 28px; height: 1px; background: var(--color-accent); }
.works-related__head .section-title { margin-top: 8px; font-size: clamp(1.4rem, 3vw, 1.8rem); }
/* サーフェス背景上でもカードが沈まないよう軽い影を付ける */
.works-related .work-card { box-shadow: var(--shadow-card); }

/* --- コンサル実績 詳細：サービス誘導 --- */
.works-service { padding-block: var(--space-3xl, 96px); background: var(--color-bg); }
/* 直前セクションが白背景のページ用（前後との交互リズムはページ側で選ぶ） */
.works-service--surface { background: var(--color-surface); }
.works-service__head { margin-bottom: var(--space-xl); }
.works-service__head .section-label { display: inline-flex; align-items: center; gap: 12px; }
.works-service__head .section-label::before { content: ""; width: 28px; height: 1px; background: var(--color-accent); }
.works-service__head .section-title { margin-top: 8px; font-size: clamp(1.4rem, 3vw, 1.8rem); }
.works-service__lead { margin-top: 12px; font-size: 0.95rem; line-height: 1.8; color: var(--color-text-muted); }
.works-service__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.service-nav-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-lg);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
}
.service-nav-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.service-nav-card__title { font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; line-height: 1.4; }
.service-nav-card__lead { flex: 1; font-size: 0.875rem; line-height: 1.7; color: var(--color-text-muted); }
.service-nav-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700; color: var(--color-accent); }
.service-nav-card:hover .service-nav-card__link { text-decoration: underline; }
@media screen and (min-width: 768px) {
  .works-service__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   プロフィール詳細（page-profile / TOP S3 の詳細版）
   プロフィール本体は TOP の .profile__* を流用。ここはページ固有の器のみ定義。
   ========================================================================== */
.profile-page { background: var(--color-bg); }
.profile-page .profile__inner { max-width: var(--content); margin-inline: auto; }

/* 経歴（プロフィール本体の下）：テキスト（prose）＋右に現場写真 */
.profile-bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 780px;
  margin-top: var(--space-2xl);
  scroll-margin-top: 80px; /* 固定ヘッダー分。TOPからの #bio 遷移で見出しが隠れないように */
}
.profile-bio__media { margin: 0; }
.profile-bio__media img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
@media (min-width: 1024px) {
  .profile-bio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: stretch;
    gap: var(--space-2xl);
    max-width: none;
  }
  .profile-bio__text { max-width: 720px; }
  /* 写真は左テキストと同じ高さ（行の高さはテキスト側だけで決まり、写真は枠いっぱいに cover 表示） */
  .profile-bio__media { position: relative; }
  .profile-bio__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* 温浴業への思い（オフホワイト帯・読み物幅） */
.profile-story { background: var(--color-surface); }
.profile-story__inner { max-width: 780px; margin-inline: auto; }
.profile-story__head { margin-bottom: var(--space-xl); }
.profile-story__head .section-title { margin-top: 2px; }
.profile-story__note { margin-top: var(--space-sm); font-size: var(--fs-caption); line-height: 1.8; color: var(--color-text-muted); }

/* ==========================================================================
   コラム記事パーツ（page-noconsultant ほか読み物ページ共通で使ってよい）
   記事シェル（breadcrumb-bar / page-header / works-single__inner / entry-content）は
   コンサル実績詳細（single-works）と共通。ここは追加パーツのみ。
   ========================================================================== */
/* 質問ボックス（読者に投げかける一文を大きく見せる） */
.noc-question {
  margin: var(--space-lg) 0 var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}
.noc-question__label {
  display: inline-block;
  margin-bottom: var(--space-sm);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}
.noc-question__text {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 700;
  line-height: var(--lh-heading);
}

/* 番号カード（「その1〜その5」の箇条を1枚ずつカードで見せる） */
.noc-rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: var(--space-lg) 0 var(--space-xl);
}
.noc-rule {
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.noc-rule__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-accent);
}
.noc-rule__num {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 700;
  font-size: var(--fs-caption);
  color: var(--color-accent);
}
.noc-rule__num b { font-family: var(--font-num); font-size: 1.7rem; line-height: 1; }
.noc-rule__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.5;
}
.noc-rule__body p { margin-top: 0.8em; font-size: 0.95rem; line-height: 1.9; }
.noc-rule__body p:first-child { margin-top: 0; }

/* 記事末の誘導ボタン */
.noc-actions { margin-top: var(--space-xl); text-align: center; }

/* 導入実績カード（本文直下・works カードを流用） */
.profile-works { margin-top: var(--space-2xl); }
.profile-works__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-lg); }
.profile-works__note { font-size: var(--fs-caption); color: var(--color-text-muted); }
.profile-works__more { margin-top: var(--space-xl); text-align: center; }

/* メディア出演サマリ（プロフィールセクション内・TOPと同じマーキー見出しを流用） */
.profile-media__actions { margin-top: var(--space-xl); text-align: center; }

/* =======================================================================
   /ota/ — サウナ経営の教科書 教材LP
   MV(.newmv)・チェックリスト(.trial-check)・BENEFITS(.bf)・仕様表(.trial-spec)・
   フォーム(.rrform)・FAQ(.np-faq)・最終CTA(TOP .ota)・回遊(.service-nav-card) は共通クラスを流用。
   ここはページ固有（書影付きMV / 21の法則目次 / 誌面サンプル / 著者コンパクト版 /
   価格カード / モバイル追従CTA）のみ定義。接頭辞 otalp-（TOP .ota との衝突回避）。
   ======================================================================= */

/* ---- MV：背景をサウナ写真(ota-bg)に差し替え（グラデ構造は .newmv と共通） ---- */
.page-ota .newmv {
  background-image:
    linear-gradient(100deg,
      rgba(248, 244, 241, 0.97) 0%,
      rgba(248, 244, 241, 0.92) 32%,
      rgba(248, 244, 241, 0.6) 54%,
      rgba(248, 244, 241, 0.28) 74%,
      rgba(248, 244, 241, 0.14) 100%),
    url("../img/ota-bg.jpg");
}
.otamv { display: flex; flex-direction: column; gap: var(--space-xl); }
.otamv__body { flex: 1; }
.otamv__media { align-self: center; }
.otamv__book {
  width: clamp(170px, 40vw, 300px);
  height: auto;
  filter: drop-shadow(0 20px 36px rgba(26, 16, 16, 0.35));
}

/* 価格（税込を主表示） */
.otamv__price { margin-top: 24px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.otamv__price-label { font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); }
.otamv__price-num { font-family: var(--font-serif); font-weight: 900; font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1; color: var(--color-accent); }
.otamv__price-unit { font-size: 0.95rem; font-weight: 700; color: var(--color-text); }

/* ---- アンカー：固定ヘッダー分のオフセット ---- */
.page-ota #index,
.page-ota #order { scroll-margin-top: 80px; }

/* ---- TARGET ---- */
.otalp-target { margin-top: var(--space-xl); }

/* ---- INDEX：21の法則の目次（第1〜第21法則の開閉式リスト） ---- */
.otalp-cur {
  max-width: 920px; margin: var(--space-xl) auto 0;
  background: var(--color-bg); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden;
}
.otalp-cur__item + .otalp-cur__item { border-top: 1px solid var(--color-border); }
/* 行：左＝赤の番号ブロック（行の高さいっぱい）／中＝法則名／右＝＋−トグル */
.otalp-cur__summary {
  display: flex; align-items: stretch; cursor: pointer; list-style: none;
  transition: background var(--transition);
}
.otalp-cur__summary::-webkit-details-marker { display: none; }
.otalp-cur__summary:hover { background: var(--color-surface); }
.otalp-cur__no {
  flex: none; width: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-num, var(--font-sans)); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
}
.otalp-cur__title {
  flex: 1; display: flex; align-items: center; min-height: 60px; padding: 14px 16px;
  font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; line-height: 1.5; color: var(--color-text);
}
/* ＋／−アイコン（open で横棒だけ残す） */
.otalp-cur__icon { flex: none; position: relative; align-self: center; width: 16px; height: 16px; margin-right: 20px; }
.otalp-cur__icon::before,
.otalp-cur__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--color-accent);
  transform: translate(-50%, -50%);
}
.otalp-cur__icon::before { width: 16px; height: 2px; }
.otalp-cur__icon::after { width: 2px; height: 16px; transition: transform var(--transition), opacity var(--transition); }
.otalp-cur__item[open] .otalp-cur__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.otalp-cur__item[open] .otalp-cur__summary { background: var(--color-surface); }
.otalp-cur__body {
  padding: 4px 20px 20px 60px; background: var(--color-surface);
  font-size: 0.875rem; line-height: 1.9; color: var(--color-text-muted);
}

.otalp-index-cta { margin-top: var(--space-xl); }

/* ---- BENEFITS 内：教材の使い方 ---- */
.otalp-usage { margin-top: var(--space-xl); }
.otalp-usage .np-subhead { text-align: center; }
.otalp-usage__list { margin-top: var(--space-md); }

/* ---- AUTHOR：LP用コンパクト版 ---- */
.otalp-author { margin-top: var(--space-xl); display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
.otalp-author__photo { margin: 0; }
.otalp-author__photo img { width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.otalp-author__role { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-text-muted); }
.otalp-author__name { margin-top: 6px; font-family: var(--font-serif); font-weight: 900; font-size: clamp(1.5rem, 3.4vw, 1.9rem); color: var(--color-text); }
.otalp-author__king { color: var(--color-accent); }
.otalp-author__lead { margin-top: 14px; font-size: 0.9rem; line-height: 1.9; color: var(--color-text-muted); }
.otalp-author__stats { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.otalp-author__stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; background: var(--color-surface); border-radius: var(--radius-md); text-align: center; }
.otalp-author__stat b { font-family: var(--font-serif); font-weight: 900; font-size: 1.25rem; color: var(--color-gold); }
.otalp-author__stat span { font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); }
.otalp-author__media { margin-top: var(--space-lg); font-size: 0.82rem; line-height: 1.8; color: var(--color-text-muted); }
.otalp-author__actions { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- PRICE：価格カード ---- */
.otalp-price {
  margin-top: var(--space-xl); padding: var(--space-xl) var(--space-lg); text-align: center;
  background: var(--color-bg); border: 2px solid var(--color-accent); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
.otalp-price__name { font-family: var(--font-serif); font-weight: 700; font-size: 1rem; color: var(--color-text); }
.otalp-price__value { margin-top: 8px; line-height: 1; }
.otalp-price__value b { font-family: var(--font-serif); font-weight: 900; font-size: clamp(2.6rem, 7vw, 3.6rem); color: var(--color-accent); }
.otalp-price__yen { font-size: 1.2rem; font-weight: 700; color: var(--color-text); }
.otalp-price__tax { font-size: 0.95rem; font-weight: 700; color: var(--color-text); }
.otalp-price__note { margin-top: 10px; font-size: 0.78rem; color: var(--color-text-muted); }
.otalp-spec { margin-top: var(--space-lg); }
.otalp-order { margin-top: var(--space-xl); }

/* ---- 最終CTA（TOP .ota のダークバナーをそのまま流用。価格を添えて購入ボタンへ） ---- */
.otalp-final__price { display: flex; align-items: baseline; gap: 4px; color: #fff; }
.otalp-final__price b { font-family: var(--font-serif); font-weight: 900; font-size: 2rem; line-height: 1; }
.otalp-final__price-unit { font-size: 0.9rem; font-weight: 700; }

/* ---- コンサル回遊 ---- */
.otalp-consult { margin-top: var(--space-xl); }

/* ---- モバイル追従CTA ---- */
.otalp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter-sp, 20px) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(26, 16, 16, 0.1);
}
.otalp-sticky__price { flex: none; font-size: 0.75rem; color: var(--color-text-muted); }
.otalp-sticky__price b { font-family: var(--font-serif); font-weight: 900; font-size: 1.3rem; color: var(--color-accent); }
.otalp-sticky__btn { flex: 1; justify-content: center; }
@media (max-width: 767px) {
  .page-ota { padding-bottom: 72px; } /* 追従バーと重ならない下余白 */
}

/* ---- md: 768px〜 ---- */
@media (min-width: 768px) {
  .otamv { flex-direction: row; align-items: center; gap: var(--space-2xl); }
  .otamv__media { align-self: center; }
  .otalp-cur__no { width: 52px; font-size: 1rem; }
  .otalp-cur__title { min-height: 64px; padding: 16px 20px; font-size: 1rem; }
  .otalp-cur__body { padding: 4px 24px 22px 72px; }
  .otalp-usage__list { grid-template-columns: repeat(3, 1fr); }
  .otalp-author { grid-template-columns: 340px 1fr; gap: var(--space-2xl); }
  .otalp-sticky { display: none; } /* 追従CTAはモバイルのみ */
}