/* ============================================================
 * common.css — 全ページ共通のデザイントークン
 * 各ページ個別CSS(front/service/trainer/...)と一緒に常時読み込まれます。
 * ============================================================ */

:root {
  /* 固定ページ・一覧・記事の「先頭セクション(パンくず)」の上余白。
     ヘッダー直下〜パンくずまでの距離。ここ1か所で全ページ調整できます。 */
  --page-pad-top: 32px;

  /* hero / page-head の下余白 と 直後セクションの上余白(デスクトップ)。
     hero直下の空きを 1か所で調整。実質の空き = この値 × 2(block-gapは別途0に)。 */
  --hero-section-gap: 48px;

  /* 下層ページ共通ヘッダー(.site-header)のロゴ高さ。ここ1か所で調整。 */
  --header-logo-h: 52px;

  /* メインカラム(コンテンツの最大幅)。お知らせ(.dt-news .grid)と同じ 1180px に
     揃えてあり、全セクションの左右の端が一致する。
     左右パディングが従来の 80px と一致するのは画面幅 1340px のときなので、
     下の @media は 1341px 以上で発火させて境界での飛びをなくしている。 */
  --content-max: 1180px;

  /* ヒーローなど「1440px を1枚のキャンバスとして中央に置く」ための基準幅。
     絶対配置の装飾(円・スカイバンド等)の位置をここから算出する。 */
  --canvas-w: 1440px;
}

/* ============================================================
 * メインカラム(1341px 以上でのみ作用)
 * 各セクションは背景を全幅に敷いたまま、内容だけを --content-max に収める。
 * body を付けて詳細度(0,1,1)を上げ、各ページCSSの padding 指定に勝たせる。
 * 1340px 以下では従来どおり左右 80px なので、境界で連続する。
 * ============================================================ */
@media (min-width: 1341px) {
  body .site-header,
  body .dt-news, body .dt-policy, body .dt-service, body .dt-trainer,
  body .dt-voice, body .dt-oyatsu, body .dt-ig-feed, body .dt-cta,
  body .hero, body .page-head, body .cta, body .reports, body .article-page,
  body .profile, body .philosophy, body .luke, body .credentials,
  body .counseling, body .courses, body .base-menu, body .dogrun,
  body .faq, body .channels, body .info, body .disclaimer,
  body .site-footer, body .dt-footer, body .mb-footer {
    padding-inline: calc((100% - var(--content-max)) / 2);
  }

}

/* TOPヒーローは全幅の背景に装飾を絶対配置しているため、セクションとは別枠で扱う。
   1440px のキャンバスを中央に置く形でオフセットするので、発火は 1441px 以上に限る
   (1440px 以下は流体スケールの既存指定が担当。ここで発火させると値が逆行して飛ぶ) */
@media (min-width: 1441px) {
  body .dt-hero .copy      { left:  calc((100% - var(--canvas-w)) / 2 + 110px); }
  body .dt-hero .circle    { right: calc((100% - var(--canvas-w)) / 2 - 160px); }
  body .dt-hero .sky-band  { width: calc((100% - var(--canvas-w)) / 2 + 853px); }
  body .dt-hero .indicator { right: calc((100% - var(--canvas-w)) / 2 + 280px); }
}/* ロゴ高さのレスポンシブ調整(値は --header-logo-h 1か所で連動) */
@media (max-width: 1199px) { :root { --header-logo-h: 48px; } }@media (max-width: 899px) { :root { --header-logo-h: 44px; } }@media (max-width: 559px) { :root { --header-logo-h: 38px; } }

/* hero / page-head の直後セクションの WordPress 既定 block-gap(24px)を除去。
   service / 体験レポート一覧 / トレーナー / FAQ 共通。 */
.hero + section,
.page-head + section {
  margin-block-start: 0;
}

/* 専用デザインを持たない通常の固定ページ(プライバシーポリシー等)の体裁。
   ※ 専用レイアウトのページ(.believe-page-plain)には適用しない。
   読みやすい本文幅・余白・タイポグラフィをここで一括管理。 */
/* WordPress ブロックテーマの既定縦余白の除去。
   .wp-site-blocks 直下の要素には margin-block-start:24px が付くため、
   2番目の子である <main>(ページ本体)がヘッダーから 24px 離れてしまう。
   これを 0 にして本体をヘッダー直下へ密着させる(右上の deco-block 余白ズレ対策)。 */
.believe-page-main {
  margin-block-start: 0;
}

.believe-page-main:not(.believe-page-plain) {
  max-width: 880px;
  margin-inline: auto;
  padding: var(--page-pad-top) clamp(24px, 5vw, 40px) 96px;
}
.believe-page-main:not(.believe-page-plain) .believe-breadcrumb {
  font-size: 13px; color: var(--ink-sub, #8a8a8e);
  letter-spacing: 0.1em; margin-bottom: 20px;
}
.believe-page-main:not(.believe-page-plain) .believe-breadcrumb a {
  color: inherit; text-decoration: none;
}
.believe-page-main:not(.believe-page-plain) .believe-breadcrumb a:hover {
  text-decoration: underline;
}
.believe-page-main:not(.believe-page-plain) .believe-breadcrumb .sep {
  margin: 0 10px;
}
.believe-page-main:not(.believe-page-plain) .believe-breadcrumb .current {
  color: var(--pink-deep, #c27586);
}
.believe-page-main:not(.believe-page-plain) .believe-page-title,
.believe-page-main:not(.believe-page-plain) h1 {
  font-family: var(--font-serif, "Noto Serif JP", serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500; line-height: 1.5; letter-spacing: 0.04em;
  margin: 0 0 32px;
}
.believe-page-main:not(.believe-page-plain) h2 {
  font-size: clamp(20px, 2.6vw, 24px); font-weight: 600;
  line-height: 1.6; margin: 48px 0 14px;
}
.believe-page-main:not(.believe-page-plain) h3 {
  font-size: 18px; font-weight: 600; margin: 28px 0 10px;
}
.believe-page-main:not(.believe-page-plain) p,
.believe-page-main:not(.believe-page-plain) li {
  line-height: 1.95;
  /* 長いURL等がコンテンツ幅を超えても折り返す(横にはみ出して右に余白が出るのを防ぐ) */
  overflow-wrap: anywhere;
}
.believe-page-main:not(.believe-page-plain) ul,
.believe-page-main:not(.believe-page-plain) ol {
  padding-left: 1.4em;
}
.believe-page-main:not(.believe-page-plain) a {
  color: var(--pink-deep, #c27586);
  overflow-wrap: anywhere; word-break: break-word;
}

/* ============================================================
 * 共通 HERO(サービス / 体験レポート一覧で共有)
 * 旧: service.css と report-archive.css に同一コードが重複していたものを集約。
 * 各ページ固有の本文(.lead / .motto / .principles)は各CSSに残す。
 * レスポンシブ(@media)は各ページCSS側で上書き(common→page の読込順)。
 * ============================================================ */
  .hero {
    position: relative; background: var(--bg);
    padding: var(--page-pad-top) 80px var(--hero-section-gap); overflow: hidden;
    --hero-title-fs: 64px; /* h1サイズ。@mediaでこの変数だけ上書きすれば棒の位置も連動 */
  }
  .hero .deco-block {
    position: absolute; top: 0; right: 0;
    width: 540px; height: 100%;
    background: var(--pink-pale);
  }
  .hero .breadcrumb {
    position: relative; z-index: 2; margin-bottom: 56px;
    font-size: 13px; color: var(--ink-sub); letter-spacing: 0.1em;
  }
  .hero .breadcrumb a { color: inherit; text-decoration: none; }
  .hero .breadcrumb .sep { margin: 0 12px; color: var(--ink-mute); }
  .hero .breadcrumb .current { color: var(--pink-deep); }
  .hero .hero-grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.1fr 1fr;
    gap: 80px; align-items: center; /* 元デザイン(画像に対して縦中央) */
  }
  .hero h1 {
    font-family: var(--font-serif);
    font-size: var(--hero-title-fs); font-weight: 500;
    color: var(--ink); margin: 0;
    line-height: 1.4; letter-spacing: 0.04em;
  }
  .hero .accent-bar {
    width: 60px; height: 2px;
    background: var(--pink-deep); margin: 36px 0 28px;
    /* 明朝の先頭文字は字面に左余白(サイドベアリング)があり、棒だけ左に飛び出して
       見える。タイトルサイズ × ページ固有のベアリング比率(--hero-bar-bearing)
       ぶん右へ寄せて、文字のインク左端と棒の左端を揃える */
    margin-left: calc(var(--hero-title-fs) * var(--hero-bar-bearing, 0));
  }
  .hero .hero-img { position: relative; height: 460px; }
  .hero .hero-img .frame {
    position: absolute; inset: 0;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.10);
  }
  .hero .hero-img img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: center 40%;
  }

/* ============================================================
 * フッター内リンクの下線(全フッター共通: site / dt / mb)
 * 既定の下線は消し、ホバー時のみ下線を表示。
 * 列リンクは各ページCSSの .col-list a より高い詳細度で確実に上書き。
 * ============================================================ */
.site-footer a,
.dt-footer a,
.mb-footer a { text-decoration: none; }

.site-footer a:hover,
.dt-footer a:hover,
.mb-footer a:hover,
.site-footer .col-list a:hover,
.dt-footer .col-list a:hover,
.mb-footer .col-list a:hover { text-decoration: underline; }

/* ============================================================
 * モバイル ハンバーガーメニュー(共通ヘッダー .site-header)
 * デスクトップ: ボタン非表示・ナビ横並び(各ページCSS)
 * モバイル(≤768px): ナビをドロップダウン化し、ハンバーガーで開閉
 * ※ common は各ページCSSより先に読み込むため、ページCSSの .site-header nav 等を
 *    上回る詳細度(header.site-header ...)で確実に上書きする。
 * ============================================================ */
.site-header .believe-menu-toggle { display: none; }@media (max-width: 768px) {
  /* モバイルバーは TOP(.dt-header)と同じ1段レイアウト(高さ64・折り返しなし)。
     header.site-header(詳細度 0,1,1)で、後段の .site-header(max-width:899)の
     flex-wrap:wrap / min-height 指定を確実に上書きする。 */
  header.site-header {
    position: sticky;
    height: 64px; min-height: 0; padding: 0 22px;
    flex-wrap: nowrap; gap: 0;
  }
  header.site-header .logo img { height: 38px; }

  /* ハンバーガーボタン本体。3本バーの見た目と×への変形は下の共通ブロックで定義。 */
  .site-header .believe-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; margin-left: auto;
    background: transparent; border: 0; cursor: pointer; z-index: 2;
  }

  /* ナビをドロップダウンパネル化(フェード＋スライドダウンで開閉) */
  header.site-header nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 0;
    background: #fff; border-top: 1px solid var(--rule, #ece7e1);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    pointer-events: none;
  }
  header.site-header.is-open nav {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  }
  header.site-header nav a.nav-link {
    display: block; padding: 15px clamp(20px, 5vw, 32px); font-size: 16px;
  }
  header.site-header nav a.nav-link + a.nav-link,
  header.site-header nav a.contact-btn { border-top: 1px solid var(--rule, #ece7e1); }
  header.site-header nav a.contact-btn {
    display: block; margin: 12px clamp(20px, 5vw, 32px); padding: 13px 0;
    text-align: center; border-top: 0;
  }
}

/* ============================================================
 * ハンバーガーアイコン(3本バー)とアニメーション
 * TOP(.dt-menu-toggle)・下層(.believe-menu-toggle)で共通。
 *  - バーは縦に並べる(ボタン本体は各ヘッダー側で inline-flex 化)
 *  - メニューを開く(.is-open)と上下バーが回転して × に、中央バーは消える
 * ============================================================ */
/* 元のSVGアイコンの見た目に合わせる:細い線(1.5px)・幅20px・3本目は短く(13px)左寄せ・
   行間5px(=高さ1.5 + gap3.5)。中央バーが基準、3本目は margin-right で左端を揃える。 */
.believe-menu-toggle { flex-direction: column; gap: 3.5px; }

.believe-menu-toggle .bar {
  display: block; width: 20px; height: 1.5px; border-radius: 2px;
  background: var(--ink, #33363c);
  transition: transform .3s ease, opacity .2s ease, width .3s ease, margin .3s ease;
}
.believe-menu-toggle .bar:nth-child(3) { width: 13px; margin-right: 7px; }

/* 開くと × に(上下バーが中央で交差、3本目は幅を揃えて回転、中央バーは消える) */
.site-header.is-open .believe-menu-toggle .bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.site-header.is-open .believe-menu-toggle .bar:nth-child(2) { opacity: 0; }
.site-header.is-open .believe-menu-toggle .bar:nth-child(3) { width: 20px; margin-right: 0; transform: translateY(-5px) rotate(-45deg); }

/* 視差を抑える設定の利用者にはアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  .believe-menu-toggle .bar,
  .site-header nav { transition: none; }
}

/* ============================================================
 * 共通チロム(全下層ページ＋体験レポート共通)
 * 旧: 各ページCSSに同一コードが重複していたものを集約。
 * ヘッダー/フッター/リセット/:root/.page-head/.section-label 等。
 * ============================================================ */
:root {
    --bg: #fdfcfa;
    --bg-alt: #faf6f1;
    --paper: #ffffff;
    --ink: #33363c;
    --ink-sub: #8a8a8e;
    --ink-mute: #b8b3ad;
    --rule: #ece7e1;
    --pink: #e7a8b6;
    --pink-deep: #c27586;
    --pink-tint: #f7e9ec;
    --pink-pale: #fbf3f4;
    --sky: #b4d3dc;
    --sky-deep: #7fa6b2;
    --link: #3a72b0;
    --link-hover: #2b5685;
    --font-gothic: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Yu Gothic", sans-serif;
    --font-serif: "Noto Serif JP", "ヒラギノ明朝 ProN", "Yu Mincho", serif;
  }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    font-family: var(--font-gothic);
    color: var(--ink);
    font-feature-settings: "palt" 1;
  }
a { color: inherit; }
img { display: block; }
.site-header {
    position: sticky; top: 0; z-index: 50;
    padding: 20px 56px; height: 90px;
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid var(--rule);
  }
.site-header .logo { display: flex; align-items: center; text-decoration: none; }
.site-header .logo img { height: var(--header-logo-h); width: auto; }
.site-header nav {
    display: flex; gap: 28px; align-items: center;
    font-size: 16px; color: var(--ink); font-weight: 500;
  }
.site-header nav a.nav-link {
    color: inherit; text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
  }
.site-header nav a.nav-link.is-active {
    border-bottom-color: var(--pink-deep);
    color: var(--pink-deep);
  }
.site-header nav a.contact-btn {
    background: var(--pink-deep); color: #fff;
    padding: 11px 22px; border-radius: 999px;
    text-decoration: none; font-size: 15px; font-weight: 500;
    letter-spacing: 0.1em; margin-left: 8px;
  }

/* ============================================================
 * TOPページ専用スキン: 共通ヘッダー(.site-header)を、円形ヒーローの上に
 * 透過オーバーレイ(枠線なし・少し大きめ)として重ねる。旧 .dt-header の見た目。
 * ヒーローが全画面の円形になるデスクトップ幅(≥900px)でのみ適用し、
 * ≤899px(ヒーローがバナー化)では通常の白スティッキーヘッダーに戻す。
 * ============================================================ */
@media (min-width: 900px) {
  /* サイズ・余白・ロゴ/ナビのフォントは下層ページ(.site-header)と完全共通。
     TOPは「ヒーロー上に重ねる(absolute)・半透明・下線なし」の差分のみ。 */
  body.home .site-header {
    position: absolute; top: 0; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.82);
    border-bottom: none;
  }
}
.page-head {
    background: var(--bg);
    padding: var(--page-pad-top) 80px 48px;
    --hero-title-fs: 38px; /* h1サイズ。@mediaでこの変数だけ上書きすれば棒の位置も連動 */
  }
.page-head .breadcrumb {
    font-size: 13px; color: var(--ink-sub);
    letter-spacing: 0.1em; margin-bottom: 32px;
  }
.page-head .breadcrumb a { color: inherit; text-decoration: none; }
.page-head .breadcrumb .sep { margin: 0 12px; color: var(--ink-mute); }
.page-head .breadcrumb .current { color: var(--pink-deep); }
.page-head h1 {
    font-family: var(--font-serif);
    font-size: var(--hero-title-fs); font-weight: 500;
    color: var(--ink); margin: 0;
    line-height: 1.4; letter-spacing: 0.04em;
  }
.page-head .accent-bar {
    width: 48px; height: 2px;
    background: var(--pink-deep); margin: 24px 0 0;
    /* 明朝の先頭文字の左サイドベアリングぶん右へ寄せ、インク左端と棒を揃える */
    margin-left: calc(var(--hero-title-fs) * var(--hero-bar-bearing, 0));
  }
.site-footer {
    background: #2e2c2a; color: #fff;
    padding: 56px 80px 32px;
  }
.site-footer .top {
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: 48px; margin-bottom: 40px;
  }
.site-footer .brand img {
    height: 72px; width: auto; margin-bottom: 16px;
  }
.site-footer .addr {
    font-size: 15px; line-height: 2; opacity: 0.75;
  }
.site-footer .ig-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%;
    color: #fff; text-decoration: none;
  }
.site-footer .col-title {
    font-family: var(--font-serif);
    font-size: 15px; margin-bottom: 14px;
    color: var(--pink); letter-spacing: 0.2em;
  }
.site-footer .col-list {
    font-size: 15px; line-height: 2.2; opacity: 0.85;
  }
.site-footer .col-list a { color: inherit; text-decoration: none; }
.site-footer .bottom {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 14px; opacity: 0.5;
    display: flex; justify-content: space-between;
  }
.section-label { text-align: left; margin-bottom: 32px; }
.section-label.center { text-align: center; margin-bottom: 40px; }
.section-label h2 {
    font-family: var(--font-serif);
    font-size: 40px; font-weight: 500;
    color: var(--ink); margin: 0;
    line-height: 1.5; letter-spacing: 0.04em;
  }
.section-label.center .accent {
    width: 48px; height: 2px;
    background: var(--pink-deep);
    margin: 24px auto 0; opacity: 0.6;
  }@media (max-width: 1199px) {
.site-header { padding: 16px clamp(20px, 4vw, 56px); height: 80px; }
.site-header nav { gap: 20px; font-size: 15px; }
.page-head { padding: 48px clamp(24px, 5vw, 80px) 40px; }
.page-head { --hero-title-fs: 32px; }
.site-footer { padding: 48px clamp(24px, 5vw, 80px) 28px; }
.hero { padding: 100px clamp(24px, 5vw, 80px) 80px; }
.hero .deco-block { width: 38%; }
.hero { --hero-title-fs: clamp(36px, 5vw, 56px); }
.hero .hero-grid { gap: 48px; }
.hero .hero-img { height: 380px; }
}@media (max-width: 899px) {
.site-header {
      padding: 14px 20px; height: auto; min-height: 72px;
      flex-wrap: wrap; gap: 12px;
    }
.site-header nav {
      width: 100%; gap: 16px;
      font-size: 13px; flex-wrap: wrap;
      justify-content: flex-start;
    }
.site-header nav a.contact-btn {
      padding: 8px 16px; font-size: 13px; margin-left: 0;
    }
.page-head { padding: 32px 24px 32px; }
.page-head .breadcrumb { margin-bottom: 22px; }
.page-head { --hero-title-fs: 26px; }
.site-footer { padding: 40px 24px 24px; }
.site-footer .top {
      grid-template-columns: 1fr; gap: 32px; margin-bottom: 28px;
    }
.site-footer .bottom {
      flex-direction: column; gap: 8px;
      font-size: 13px;
    }
.hero {
      padding: 32px 24px 64px; /* 上余白は page-head(トレーナー)と統一 */
    }
.hero .deco-block { display: none; }
.hero .hero-grid {
      grid-template-columns: 1fr; gap: 40px;
    }
.hero .breadcrumb { margin-bottom: 36px; }
.hero { --hero-title-fs: clamp(30px, 6vw, 44px); }
.hero .hero-img { height: 280px; }
}@media (max-width: 559px) {
.site-header { padding: 12px 16px; }
.site-header nav { gap: 12px; font-size: 12px; }
.page-head { padding: 24px 16px 28px; }
.page-head { --hero-title-fs: 22px; }
.site-footer { padding: 32px 16px 20px; }
.site-footer .brand img { height: 56px; }
.site-footer .addr { font-size: 13px; }
.site-footer .col-list { font-size: 14px; }
.hero { --hero-title-fs: 30px; }
.hero .hero-img { height: 220px; }
}

/* ============================================================
 * 共通CTA(全ページ共通: 「まずは、愛犬のこと聞かせてください。」)
 * 旧: service/trainer/faq/report各所に重複。trainer版を正規として集約。
 * マークアップは動的ブロック believe/cta(<!-- wp:believe/cta /-->)。
 * ============================================================ */
.cta .lead-note {
    font-family: var(--font-serif);
    font-size: 14px; color: var(--pink-deep);
    letter-spacing: 0.2em; margin-bottom: 14px;
  }
.cta .buttons {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  }
.cta .img-wrap {
    width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  }
.cta .img-wrap img {
    /* 899px以下で枠が横長(16/11)に変わると画像の縦61.6%しか映らない。
       上寄り(27%)にして人物の頭が切れないようにする。PCの4/5枠では
       画像の方が横長なので高さは全部映り、この縦位置指定は影響しない */
    width: 100%; height: 100%; object-fit: cover; object-position: center 27%;
  }
.cta { background: var(--bg); padding: 120px 80px; }
.cta .panel {
    background: var(--paper); padding: 72px 80px;
    display: grid; grid-template-columns: 1.2fr 1fr;
    gap: 72px; align-items: center;
    border: 1px solid var(--rule);
  }
.cta h2 {
    font-family: var(--font-serif);
    font-size: 36px; font-weight: 500;
    color: var(--ink); margin: 0 0 24px;
    line-height: 1.5; letter-spacing: 0.04em;
  }
.cta p {
    font-size: 16px; color: var(--ink);
    line-height: 2.1; margin: 0 0 32px; letter-spacing: 0.02em;
  }
.cta .btn-tel {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--pink-deep); color: #fff;
    padding: 16px 28px; border-radius: 999px;
    font-size: 15px; font-weight: 500;
    text-decoration: none; letter-spacing: 0.1em;
  }
.cta .btn-ig {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px; border-radius: 999px;
    border: 1px solid var(--pink-deep);
    color: var(--pink-deep);
    font-size: 15px; font-weight: 500;
    text-decoration: none; letter-spacing: 0.1em;
  }
@media (max-width: 1199px) {
  .cta { padding: 96px clamp(24px, 5vw, 80px); }
  .cta .panel { padding: 56px clamp(28px, 4vw, 64px); gap: 48px; }
  .cta h2 { font-size: 30px; }
}
@media (max-width: 899px) {
  .cta { padding: 72px 24px; }
  .cta .panel { grid-template-columns: 1fr; gap: 36px; padding: 40px 24px; }
  .cta h2 { font-size: 26px; }
  .cta p { font-size: 15px; }
  .cta .img-wrap { aspect-ratio: 16 / 11; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 559px) {
  .cta { padding: 56px 16px; }
  .cta .panel { padding: 32px 20px; }
  .cta h2 { font-size: 22px; }
  .cta .btn-tel, .cta .btn-ig { padding: 12px 18px; font-size: 14px; }
}

/* ============================================================
 * 共通カード .report-card(体験レポートの一覧 & TOPの体験レポートで共有)
 * マークアップは believe_report_card_html()(inc/report.php)で生成。
 * グリッド(並べ方)は各文脈側(.reports .grid / .dt-voice .grid)。
 * ============================================================ */
.report-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(194, 81, 108, 0.18);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.report-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 48px -20px rgba(194, 81, 108, 0.28);
}
.report-card .photo { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.report-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.report-card:hover .photo img { transform: scale(1.05); }
.report-card .body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.report-card .who {
  padding: 12px 14px; margin: 0 0 16px;
  background: var(--pink-pale); border-radius: 10px;
  font-size: 14px; color: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.report-card .who .name { font-weight: 500; letter-spacing: 0.04em; }
.report-card .who .meta {
  color: var(--ink-sub); font-size: 13px; letter-spacing: 0.05em;
  text-align: right; line-height: 1.4;
}
.report-card .excerpt {
  font-size: 13px; color: var(--ink); line-height: 1.9;
  margin: 0; letter-spacing: 0.02em; flex: 1;
}

@media (max-width: 1199px) {
  .report-card .body { padding: 24px 22px 28px; }
  .report-card .excerpt { font-size: 12.5px; }
}
@media (max-width: 899px) {
  .report-card .body { padding: 20px 18px 24px; }
  .report-card .excerpt { font-size: 12px; line-height: 1.9; }
  .report-card .who { font-size: 13px; padding: 10px 12px; }
  .report-card .who .meta { font-size: 12px; }
}
@media (max-width: 559px) {
  .report-card .photo { aspect-ratio: 5 / 4; }
}

/* ============================================================
 * Courses Table (共通)
 * ------------------------------------------------------------
 * /service/ と / (TOP) の両方で使うコース料金テーブル。
 * 4行のコース(ベーシック/ミドル/アドバンス/マスター)を縦に並べ、
 * 各行に STEP 01〜04 ラベルと行間の下向き三角矢印で順番を示す。
 * ============================================================ */
.courses-table {
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.courses-table .row {
  display: grid; grid-template-columns: 1.4fr 1.8fr 150px 160px;
  align-items: center; gap: 8px;
}

.courses-table .row.head {
  background: var(--bg-alt); padding: 16px 24px;
  font-size: 13px; color: var(--ink-sub); letter-spacing: 0.25em;
}

.courses-table .row.head .right { text-align: right; }

.courses-table .row.body {
  padding: 36px 24px;
  border-top: 1px solid var(--rule);
}

/* step-divider が直前にある body 行はボーダーを消し、矢印を区切りとして使う。
   "head → border → body1 → ⌄ → body2 → ⌄ → body3 → ⌄ → body4" の流れ。 */
.courses-table .step-divider + .row.body { border-top: none; }

/* 行間の区切り: 両側に細いヘアライン、中央にピンクのシェブロン(SVG) を置く。
   "─── ⌄ ───" の見え方で、行間の境界を視覚的に整える。 */
.courses-table .step-divider {
  display: flex; align-items: center;
  gap: 22px;
  padding: 10px 32px 14px;
  background: var(--paper);
}

.courses-table .step-divider::before,
.courses-table .step-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

.courses-table .step-divider .arrow {
  flex: 0 0 auto;
  width: 48px; height: 20px;
  color: var(--pink-deep);
  display: block;
}

/* "STEP 01" 等の順序ラベル。コース名の上に控えめなピンクで添える。 */
.courses-table .step {
  font-family: var(--font-serif);
  font-size: 12px; color: var(--pink-deep);
  font-weight: 500; letter-spacing: 0.22em;
  margin-bottom: 8px; line-height: 1;
}

.courses-table .catch {
  font-size: 13px; color: var(--pink-deep);
  font-weight: 500; margin-bottom: 8px; letter-spacing: 0.1em;
}

.courses-table .label {
  font-family: var(--font-serif);
  font-size: 22px; color: var(--ink);
  font-weight: 500; letter-spacing: 0.05em; line-height: 1.4;
}

.courses-table .body-text {
  font-size: 15px; color: var(--ink);
  line-height: 1.9; padding-right: 24px; letter-spacing: 0.02em;
}

.courses-table .count {
  font-family: var(--font-serif);
  font-size: 22px; color: var(--ink);
  font-weight: 500; letter-spacing: 0.04em; margin-bottom: 4px;
}

.courses-table .term {
  font-size: 15px; color: var(--ink); letter-spacing: 0.05em;
}

.courses-table .price-cell { text-align: right; }

.courses-table .price-cell .price {
  font-family: var(--font-serif);
  font-weight: 500; color: var(--pink-deep);
  line-height: 1; letter-spacing: 0.01em; font-size: 34px;
}

.courses-table .price-cell .price .yen {
  font-size: 17px; margin-left: 2px;
}

.courses-table .price-cell .unit {
  font-size: 14px; color: var(--ink);
  margin-top: 8px; letter-spacing: 0.05em;
}

@media (max-width: 1199px) {
  .courses-table .row { grid-template-columns: 1.4fr 1.6fr 150px 160px; }
  .courses-table .label { font-size: 20px; }
  .courses-table .body-text { font-size: 14px; padding-right: 16px; }
  .courses-table .price-cell .price { font-size: 28px; }
}

@media (max-width: 899px) {
  .courses-table .row.head { display: none; }
  .courses-table .row.body {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title title"
      "desc  desc"
      "count price";
    gap: 16px 20px;
    padding: 28px 20px;
  }
  .courses-table .row.body > :nth-child(1) { grid-area: title; align-self: center; }
  .courses-table .row.body > :nth-child(2) { grid-area: desc; }
  .courses-table .row.body > :nth-child(3) { grid-area: count; }
  .courses-table .row.body > :nth-child(4) { grid-area: price; }
  .courses-table .step-divider { padding: 6px 20px 8px; gap: 16px; }
  .courses-table .step-divider .arrow { width: 38px; height: 16px; }
  .courses-table .step { font-size: 11px; margin-bottom: 6px; }
  .courses-table .label { font-size: 19px; }
  .courses-table .body-text { font-size: 14px; padding-right: 0; }
  .courses-table .count { font-size: 18px; }
  .courses-table .price-cell .price { font-size: 26px; }
}

@media (max-width: 559px) {
  .courses-table .row.body { padding: 24px 16px; }
  .courses-table .step-divider { padding: 2px 16px 4px; gap: 10px; }
}