@charset "UTF-8";
/* ==========================================================================
   theme-b.css — 案B：プロフェッショナル・ビジュアル型
   ホワイト基調 × ディープグリーン／深いターコイズ
   大判のビフォーアフター写真が主役。余白を広く取り、見出しは明朝で洗練を出す。
   ========================================================================== */

.theme-b {
  /* --- カラー --- */
  --c-primary: #0e4a3c;
  --c-primary-dark: #08322a;
  --c-primary-light: #2c6b5b;
  --c-accent: #0e7c7b;
  --c-accent-dark: #0a5f5e;
  --c-cv: #c2410c;
  --c-cv-dark: #9a3412;
  --c-line: #06c755;
  --c-bg: #ffffff;
  --c-bg-alt: #f5f7f5;
  --c-bg-dark: #0e4a3c;
  --c-text: #20302b;
  --c-text-sub: #61736c;
  --c-text-invert: #ffffff;
  --c-border: #dde5e1;
  --c-error: #d92d20;

  /* --- フォント（2026-08-24 指示・案Bの全ページ共通） ---

     **タイトルとメニュー以外はすべて Noto Sans JP。**

       Zen Kaku Gothic New … FVのキャッチ／セクションタイトル（h2）／h1
                             ＋ ヘッダーとドロワーのメニュー
       Noto Sans JP ……… それ以外すべて（カードの小見出し h3・h4 を含む）

     カードの小見出しまで本文側に寄せたいので、**h1〜h6 の既定（--ff-heading）は
     Noto Sans JP にしておき**、残したいものだけ下の一覧で --ff-title に戻している。

     はじめは /service/ だけの指定として service-b.css に置いていたが（ログ140）、
     2026-08-24 にトップへも広げる指示があったため**ここへ引き上げた**（ログ153）。
     home-b.css と service-b.css の同じ指定は削除済み。**増やすならここ1か所に書く。**

     いったん Sawarabi Gothic にしたが、ウェイトが400しか無く 700 が
     ブラウザの合成太字になってしまうため、100〜900 が揃う Noto Sans JP に変更した。

     **このファイルは案Aの index.html / service/index.html も読み込んでいる。**
     ただし body が theme-a なので .theme-b の指定は当たらない。
     下のセレクタ一覧も .theme-b でスコープして二重に守っている。
     フォントを増やしたときは、案BのHTML（index-b.html / service/index-b.html）の
     Google Fonts の link も忘れずに足すこと。 */
  --ff-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo", sans-serif;
  --ff-heading: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo", sans-serif;
  --ff-num: var(--ff-body);

  /* タイトルとメニューにだけ使う */
  --ff-title: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo", sans-serif;

  /* --- 形状：角丸を大きく、影で浮かせる --- */
  --radius: 8px;
  --radius-lg: 16px;
  --shadow: 0 4px 16px rgba(14, 74, 60, 0.08);
  --shadow-lg: 0 12px 32px rgba(14, 74, 60, 0.14);

  /* --- 余白を1段階広く取り、1画面あたりの情報量を減らす --- */
  --section-py: var(--space-8);
}

@media (min-width: 768px) {
  .theme-b {
    --section-py: var(--space-9);
  }
}

/* Zen Kaku Gothic New を残すところ。**ここを増減させれば切り分けを変えられる。**

   ヘッダーとドロワーは全ページ共通のパーツなので、ここに置くことで
   トップとサービスページで見え方が食い違わない（2026-08-24／ログ153）。

   トップ　　　… .b-fv__catch（FVキャッチ h1）／.b-intro__title（導入 h2）／
                 .b-sechead__title（セクションタイトル h2×4）
   サービス　　… .b-svc-hero__title（h1）／.b-svc-sec__title（セクションタイトル h2×9）
                 ※ .b-svc-hero__catch は service-b.css 側に自前の指定がある

   .theme-b でスコープしているのは、このファイルを案Aのページも読み込んでいるため。
   スコープが無いと、--ff-title が未定義のまま var() が解決できずに font-family が
   壊れる。 */
.theme-b .b-fv__catch,
.theme-b .b-intro__title,
.theme-b .b-sechead__title,
.theme-b .b-svc-hero__title,
.theme-b .b-svc-sec__title,
.theme-b .b-header__nav-link,
.theme-b .b-header__cta,
.theme-b .drawer__link,
.theme-b .b-drawer__cta {
  font-family: var(--ff-title);
}

.theme-b h1,
.theme-b h2,
.theme-b h3 {
  font-weight: var(--fw-title);
}

/* --- 見出しは中央揃え。細い区切り線を下に添える --- */
.theme-b .section-head {
  text-align: center;
}

.theme-b .section-head__title {
  position: relative;
  padding-bottom: var(--space-4);
}

.theme-b .section-head__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 1px;
  background-color: var(--c-accent);
  transform: translateX(-50%);
}

.theme-b .section-head__lead {
  max-width: 46em;
  margin-inline: auto;
}

/* --- ファーストビュー：写真が主役。テキストは下部に絞る --- */
.theme-b .hero {
  position: relative;
  color: var(--c-text-invert);
  /* FV写真の受領前でも成立するよう、下地に深緑を敷いておく */
  background-color: var(--c-primary-dark);
}

.theme-b .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.theme-b .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 50, 42, 0.88) 0%, rgba(8, 50, 42, 0.35) 55%, rgba(8, 50, 42, 0.15) 100%);
}

.theme-b .hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 78vh;
  padding-block: var(--space-8) var(--space-6);
}

.theme-b .hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: 6px 16px;
  margin-bottom: var(--space-4);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  font-size: var(--fs-xs);
  font-weight: var(--fw-label);
  letter-spacing: 0.06em;
}

.theme-b .hero__title {
  max-width: 20em;
  font-family: var(--ff-heading);
  font-size: var(--fs-hero);
  font-weight: var(--fw-title);
  line-height: var(--lh-hero);
}

.theme-b .hero__title em {
  font-style: normal;
  color: #7fd1c8;
}

.theme-b .hero__lead {
  max-width: 40em;
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.88);
}

/* 案Bでは箇条書きを詰めず、1行にまとめて余白を活かす */
.theme-b .hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
}

.theme-b .hero__point {
  position: relative;
  padding-left: 16px;
}

.theme-b .hero__point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #7fd1c8;
}

.theme-b .hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.theme-b .hero__stats .stats {
  background-color: transparent;
  border: none;
  gap: var(--space-3);
}

.theme-b .hero__stats .stats__item {
  background-color: transparent;
  padding: 0;
  align-items: flex-start;
  text-align: left;
}

.theme-b .hero__stats .stats__value {
  color: #fff;
  font-size: clamp(26px, 5vw, 34px);
}

.theme-b .hero__stats .stats__label {
  color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 768px) {
  .theme-b .hero__actions {
    flex-direction: row;
  }
}

/* --- 写真は角丸＋影で浮かせる --- */
.theme-b .card {
  border-color: transparent;
  box-shadow: var(--shadow);
}

.theme-b a.card:hover {
  box-shadow: var(--shadow-lg);
}

.theme-b .ba__frame {
  box-shadow: var(--shadow-lg);
}

/* --- 実績数値は罫線グリッドをやめ、余白で区切る --- */
.theme-b .stats {
  background-color: transparent;
  border: none;
  gap: var(--space-4);
}

.theme-b .stats__item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding-block: var(--space-5);
}

/* --- ステップ番号は控えめに --- */
.theme-b .step::before {
  color: var(--c-primary-light);
  opacity: 0.5;
}