/* =========================================================
   .BX DXアドバイザリー LP
   - デザインに対する忠実再現を最優先
   - 色は暫定値（Figma正式値が出たら変数を差し替え）
   ========================================================= */

/* ===== Reset / Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', '游ゴシック', 'Yu Gothic', sans-serif;
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.75;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.4; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* ===== Variables ===== */
:root {
  /* メインカラー（Figma正式値） */
  --c-navy:       #2B3B53;
  --c-navy-deep:  #1F2C3F;
  --c-pink:       #FF3A5B;
  --c-pink-soft:  #FFE5EA;
  --c-lime:       #7FBD03;
  --c-lime-deep:  #6BA002;

  /* グレースケール */
  --c-bg:         #EFEFEF;
  --c-bg-soft:    #F5F5F5;
  --c-white:      #FFFFFF;
  --c-text:       #1A1A1A;
  --c-text-sub:   #555555;
  --c-text-mute:  #888888;
  --c-border:     #DDDDDD;

  /* レイアウト */
  --content-max:  1100px;
  --gap-section:  120px;
  /* デザインのカード類は全て直角。丸みが必要な箇所はその要素で個別に指定する。 */
  --radius:       0;
  --radius-lg:    0;

  /* タイポグラフィ：本文サイズの単一管理用
     - --fs-body  : 本文（カード本文・説明文・FAQ・箇条書きなど）
     - --fs-small : 補足（タグ・会社名・略歴・脚注など）
     - --fs-tiny  : ごく小さな注釈（CTA下のメッセージなど）
     値を変えるだけで全セクションに反映される */
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-tiny:      12px;

  /* CTAボタンの3色（赤→緑→紺 の階層） & ホバー色
     主＝3分でDX成熟度を診断する／副＝DXアドバイザーに無料相談してみる／第3＝セミナーに参加する */
  --cta-primary:         #FF3A5B;
  --cta-primary-hover:   #E63351;
  --cta-secondary:       #7FBD02;
  --cta-secondary-hover: #6BA002;
  --cta-tertiary:        #2B3B53;
  --cta-tertiary-hover:  #1F2C3F;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ===== Common ===== */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* セクション見出し（ピン＋テキスト） */
.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--c-navy);
  margin: 0 0 40px;
}
.section-title--light { color: var(--c-white); }
.section-title__pin {
  width: 24px;
  height: 33px;
}

/* マップピンアイコン */
.pin { display: inline-block; vertical-align: middle; }
.pin--pink { color: var(--c-pink); }
.pin--navy { color: var(--c-navy); }
.pin--lime { color: var(--c-lime); }

/* ロゴ（テキスト仮表示。正式SVGに置き換え予定） */
.logo-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-navy);
}
.logo-text--white { color: var(--c-white); }
.logo-text--large { font-size: 56px; }

/* プレースホルダ（写真／イラスト未支給の可視化用） */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-text-mute);
  background: repeating-linear-gradient(
    45deg,
    #f4f4f4 0 10px,
    #ececec 10px 20px
  );
  border: 1px dashed #c8c8c8;
  border-radius: var(--radius);
  padding: 12px;
}
.placeholder--photo { color: #777; }
.placeholder--illust { color: #777; min-height: 120px; }
.placeholder--hero { width: 100%; height: 100%; }
.placeholder--bg {
  width: 100%; height: 100%;
  border: none;
  border-radius: 0;
  background: repeating-linear-gradient(
    45deg,
    #ededed 0 12px,
    #e3e3e3 12px 24px
  );
}

/* ===== ボタン =====
   3バリアント：.btn--primary（赤）／.btn--secondary（緑）／.btn--tertiary（紺）
   背景色は :root の --cta-* 変数で一元管理 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 360px;
  padding: 18px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
  transition: transform .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.btn--primary   { background: var(--cta-primary); }
.btn--primary:hover   { background: var(--cta-primary-hover); }
.btn--secondary { background: var(--cta-secondary); }
.btn--secondary:hover { background: var(--cta-secondary-hover); }
.btn--tertiary  { background: var(--cta-tertiary); }
.btn--tertiary:hover  { background: var(--cta-tertiary-hover); }

.btn__arrow {
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 14px;
  line-height: 1;
}

/* CTA注釈（ボタンの上に1行表示） */
.cta-note {
  margin: 0 0 16px;
  font-size: var(--fs-tiny);
  color: var(--cta-primary);
  text-align: center;
}

/* CTAグループ：3CTAをまとめるラッパ
   PC：横並び（赤→緑→紺）／SP：縦並び */
.cta-group {
  text-align: center;
}
.cta-group__buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.cta-group__buttons .btn {
  min-width: 280px;
  flex: 0 1 auto;
}

/* ====================================================
   HERO（画像1枚＋HTMLボタン重ね）
   ----------------------------------------------------
   調整ノブ：実画像が入った後に微調整するための変数。
   - --hero-cta-x   ボタン群の中心X（画像幅に対する%）
   - --hero-cta-y   ボタン群の上端Y（画像高さに対する%）
   - --hero-cta-w   ボタン群の幅
   PC値は元デザインから実測（X=66.6%, Y=75.4%）。
   実画像（hero_pc.png）配置後に必要に応じて±数%で調整する。
==================================================== */
.hero {
  position: relative;
  width: 100%;
  background: #f0eeec; /* ヒーロー画像と同系の背景。画像読み込み前後の境目を消す */
  overflow: hidden;     /* 画像が万一はみ出ても右側に隙間が出ないように */

  /* --- 調整ノブ（PC） --- */
  --hero-cta-x: 69%;
  --hero-cta-y: 82%;  /* 画像の縦中央〜やや下寄り。下半分の人物/スマホ画面と重なってもOK */
  --hero-cta-w: min(720px, 88vw);
}

.hero__image {
  display: block;
  width: 100%;
  margin: 0;
}
.hero__image-el {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top; /* 画像下のインライン余白を除去 */
}

.hero__cta-wrap {
  position: absolute;
  left: var(--hero-cta-x);
  top: var(--hero-cta-y);
  transform: translateX(-50%); /* X中心アンカー／Yは上端アンカー */
  width: var(--hero-cta-w);
  max-width: 86%;
  text-align: center;
  z-index: 2;
}

/* 3CTA横並び（赤→緑→紺）。PC は横、SP は縦に切替 */
.hero__cta-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
}
.hero__cta-buttons .btn {
  /* ヒーロー右側エリアに3つ収めるためコンパクト化 */
  min-width: 0;
  flex: 0 1 auto;
  font-size: 13px;
  padding: 12px 18px;
  gap: 8px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hero__cta-buttons .btn__arrow {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.hero__note {
  margin: 16px 0 0;          /* ボタン群の下に適度な余白 */
  font-size: var(--fs-tiny);
  color: var(--c-navy);      /* メインの紺色 */
  line-height: 1.6;
  text-align: center;        /* 3ボタンの中央に揃える */
}

/* ====================================================
   PAINS
==================================================== */
.pains {
  padding: 96px 0 80px;
  background: #fff;
}
.pains .section-title {
  font-size: 24px;
  margin-bottom: 48px;
}
.pains__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pain-card {
  background: var(--c-bg);
  border-radius: var(--radius);
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pain-card__top {
  /* 上：見出し的なリード文。中央揃え */
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-text);
  text-align: center;
}
.pain-card__illust {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.pain-card__bottom {
  /* 下：説明文。カード内で2行に収まる14px + 左揃え */
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-text-sub);
  margin-top: auto;
  text-align: left;
}

/* ====================================================
   MISSION（3層構造）
   [1] 上：グレー背景＋見出し
   [2] 中央：紺帯（mission_bg_person.jpg 全幅／左に人物入り画像／右側に白文字）
   [3] 下：グレー背景＋3カード（左上に紺三角）＋CTA
==================================================== */
.mission {
  background: var(--c-bg);
}

/* [1] 上 */
.mission__top {
  padding: 80px 0 40px;
  text-align: center;
}
.mission__pin {
  margin: 0 0 16px;
}
.mission__pin .pin {
  width: 24px; height: 33px;
}
.mission__heading {
  font-size: 26px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 0;
}

/* [2] 中央：紺帯（画像自体が2880x570で紺背景込み） */
.mission__band {
  position: relative;
  width: 100%;
  background-color: var(--c-navy); /* 画像読み込み前/失敗時の保険 */
  overflow: hidden;
}
.mission__band-bg {
  display: block;
  width: 100%;
  height: auto;
}
.mission__copy {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  width: 44%;
  max-width: 600px;
  color: #fff;
  /* 紺帯の中で堂々と読める存在感に：見出しに近い大きさ */
  font-size: clamp(16px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
  margin: 0;
  /* 装飾は一切付けない（白枠・影・アウトラインなど） */
  background: none;
  border: 0;
  outline: 0;
  box-shadow: none;
  text-shadow: none;
}

/* [3] 下 */
.mission__bottom {
  padding: 56px 0 80px;
}
.mission__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch; /* 子要素を行の高さいっぱいに伸ばす（デフォルト挙動を明示） */
}
.mission-card {
  position: relative;
  background: #fff;
  padding: 32px 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  text-align: center;
  /* 本文量が違っても3枚を視覚的に同じ高さに保つ */
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 左上の三角アクセント（紺） */
.mission-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 22px 22px 0 0;
  border-color: var(--c-navy) transparent transparent transparent;
}
.mission-card__title {
  font-size: 20px;
  color: var(--c-navy);
  margin-bottom: 16px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.mission-card__body {
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--c-text-sub);
  margin: 0;
}
.mission__cta {
  margin-top: 48px;
  text-align: center;
}

/* ====================================================
   PILLARS（3つの強み・Venn）
==================================================== */
.pillars {
  padding: 96px 0;
  background: #fff;
}
.pillars__title-mark {
  color: var(--c-navy);
}

/* Venn
   3円は「縁の部分だけ」重なる控えめな配置。中央に小さな三角形の交差領域。
   - 円の直径: 240px / 中心間距離: 200px（重なりは40px、直径の約17%）
   - 各円中央の白文字は他の円の色と重ならず、自分の円の色の上だけに乗る
   - 配置: 上 中心(240,120) / 左下 中心(140,293) / 右下 中心(340,293)
     ※等辺三角形（一辺200px）
*/
.venn {
  position: relative;
  width: 480px;
  height: 414px;
  margin: 32px auto 64px;
}
.venn__circle {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  mix-blend-mode: multiply;
}
.venn__circle--01 { background: var(--c-navy); top: 0;    left: 50%; transform: translateX(-50%); }
.venn__circle--02 { background: var(--c-pink); bottom: 0; left: 20px; }
.venn__circle--03 { background: var(--c-lime); bottom: 0; right: 20px; }
.venn__number {
  position: absolute;
  /* %指定で円サイズに連動。PC=240px時：top -12% = -28.8px / right -9% = -21.6px に相当 */
  top: -12%;
  font-size: 22px;
  font-weight: 700;
  mix-blend-mode: normal;
  letter-spacing: 0.04em;
}
.venn__circle--01 .venn__number { right: -9%;  color: var(--c-navy); }
.venn__circle--02 .venn__number { left:  -15%; color: var(--c-pink); }
.venn__circle--03 .venn__number { right: -15%; color: var(--c-lime-deep); }
.venn__label { mix-blend-mode: normal; }

/* 3列詳細：本文・箇条書きが間延びしないよう、内側のmax-widthを絞る */
.pillars__details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 920px;
  margin: 56px auto 0;
}
.pillar-detail__num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  line-height: 1;
}
.pillar-detail__num--01 { color: var(--c-navy); }
.pillar-detail__num--02 { color: var(--c-pink); }
.pillar-detail__num--03 { color: var(--c-lime-deep); }
.pillar-detail__title {
  font-size: 22px;
  margin-bottom: 16px;
  color: var(--c-text);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.pillar-detail__body {
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--c-text-sub);
  margin-bottom: 20px;
}
.pillar-detail__list li {
  font-size: var(--fs-body);
  line-height: 2;
  color: var(--c-text-sub);
  padding-left: 14px;
  position: relative;
}
.pillar-detail__list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* ====================================================
   PRACTITIONERS（実践者）
   背景＝オフィス写真（全面）／緑＝リードボックスのみ／カード＝白直角＋色付き縦線＋三角
==================================================== */
.practitioners {
  position: relative;
  /* オフィス背景写真。未配置時は同系の青グレーをフォールバック */
  background-color: #4d5a73;
  background-image: url('../design/assets/practitioner_bg_office.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.practitioners__inner {
  position: relative;
  z-index: 1;
  padding: 80px 24px 56px;
}

/* 見出し（白文字を写真の上に直接） */
.practitioners__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-size: 28px;
  color: #fff;
  letter-spacing: 0.04em;
  margin: 0 0 28px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.practitioners__heading .pin { width: 22px; height: 30px; }

/* リード文を囲むライム緑のボックス（直角／白文字） */
.practitioners__lead {
  max-width: 880px;
  margin: 0 auto 28px;
  background: var(--c-lime);
  color: #fff;
  padding: 26px 36px;
  text-align: center;
}
.practitioners__lead p {
  font-size: var(--fs-body);
  line-height: 2;
  font-weight: 500;
  margin: 0;
}

/* 3カード（縦に並ぶ横長カード） */
.practitioners__cards {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.practitioner-card {
  position: relative;
  background: #fff;
  padding: 22px 28px 22px 44px;
  display: grid;
  grid-template-columns: 56px 1fr 1.4fr;
  align-items: center;
  gap: 24px;
}
/* 左の太い縦線 */
.practitioner-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
}
/* 左上の三角アクセント（縦線と同色） */
.practitioner-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 22px 22px 0 0;
}
.practitioner-card--01::before { background: var(--c-navy); }
.practitioner-card--01::after  { border-color: var(--c-navy) transparent transparent transparent; }
.practitioner-card--02::before { background: var(--c-pink); }
.practitioner-card--02::after  { border-color: var(--c-pink) transparent transparent transparent; }
.practitioner-card--03::before { background: var(--c-lime); }
.practitioner-card--03::after  { border-color: var(--c-lime) transparent transparent transparent; }

.practitioner-card__num {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-navy);
  letter-spacing: 0.02em;
}
.practitioner-card__title {
  font-size: 19px;
  color: var(--c-text);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}
.practitioner-card__body {
  font-size: var(--fs-body);
  color: var(--c-text-sub);
  line-height: 1.85;
  margin: 0;
}

/* 末尾の紺バンド（次セクションへのブリッジ）
   ・テキストは大太字、上下にしっかり余白
   ・矢印は白塗りつぶし▼で存在感、テキストとは十分離す */
.practitioners__bridge {
  position: relative;
  z-index: 1;
  background: var(--c-navy);
  color: #fff;
  text-align: center;
  padding: 56px 24px 64px;
}
.practitioners__bridge p {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  margin: 0;
}
.practitioners__bridge-arrow {
  display: block;
  margin-top: 28px;
  font-size: 26px;
  line-height: 1;
  color: #fff;
}

/* ====================================================
   ADVISORS
==================================================== */
.advisors {
  padding: 96px 0;
  background: #fff;
}
.advisors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}
.advisor-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.advisor-card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.advisor-card__tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--c-navy);
  color: #fff;
  font-size: var(--fs-small);
  padding: 4px 14px;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.advisor-card__name {
  font-size: 24px;
  letter-spacing: 0.06em;
  color: var(--c-text);
  margin-top: 2px;
}
.advisor-card__company {
  font-size: var(--fs-small);
  color: var(--c-text-mute);
  letter-spacing: 0.04em;
}
.advisor-card__bio {
  margin-top: 8px;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--c-text-sub);
}

/* ====================================================
   SEMINAR BANNER（アドバイザー直後）
   バナー画像はチラシビジュアル＋下に3CTA
==================================================== */
.seminar-banner {
  padding: 64px 0 72px;
  background: #fff;
}
.seminar-banner__media {
  display: block;
  max-width: 1040px;
  margin: 0 auto;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.seminar-banner__media:hover {
  opacity: 0.94;
  transform: translateY(-2px);
}
.seminar-banner__media img {
  display: block;
  width: 100%;
  height: auto;
}
/* 紹介エリア（バナー画像直下）：タイトル→サブ→本文→メタ */
.seminar-banner__intro {
  max-width: 800px;
  margin: 56px auto 0;
  text-align: center;
}
.seminar-banner__title {
  font-size: 26px;
  color: var(--c-navy);
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 0 0 16px;
}
.seminar-banner__subcopy {
  font-size: var(--fs-small);
  color: var(--c-text-sub);
  letter-spacing: 0.08em;
  margin: 0 0 24px;
}
.seminar-banner__body {
  font-size: 16px;
  line-height: 2;
  color: var(--c-text);
  letter-spacing: 0.04em;
  margin: 0 0 28px;
}
.seminar-banner__meta {
  font-size: var(--fs-small);
  color: var(--c-text-mute);
  line-height: 1.9;
  letter-spacing: 0.04em;
  margin: 0;
}

/* 紹介エリア直下の単一CTA */
.seminar-banner__cta {
  margin-top: 40px;
  text-align: center;
}

/* ====================================================
   PROCESS
==================================================== */
.process {
  background: var(--c-bg);
}
.process__band {
  position: relative;
  padding: 80px 0 88px;
  background: var(--c-bg);
  overflow: hidden;
}
.process__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../design/assets/process_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.process__band .container {
  position: relative;
  z-index: 1;
}
.process__lead {
  text-align: center;
  font-size: var(--fs-body);
  color: var(--c-text-sub);
  line-height: 1.9;
  margin-bottom: 40px;
}
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.process-step {
  background: var(--c-navy);
  color: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.process-step__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.process-step__title {
  font-size: 17px;
  text-align: center;
  padding: 18px 12px 8px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.process-step__body {
  font-size: var(--fs-small);
  line-height: 1.85;
  padding: 0 16px 24px;
  color: rgba(255, 255, 255, 0.86);
}
.process__footer {
  margin-top: 32px;
  text-align: center;
  font-size: var(--fs-body);
  color: var(--c-text);
  letter-spacing: 0.04em;
}

/* ====================================================
   PROGRAM
==================================================== */
.program {
  padding: 96px 0 88px;
  background: #fff;
}
.program__lead {
  text-align: center;
  font-size: var(--fs-body);
  color: var(--c-text-sub);
  margin-bottom: 48px;
}
.program__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.program-card {
  background: var(--c-navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 36px 24px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.program-card__letter {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.program-card__title {
  font-size: 22px;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.program-card__body {
  font-size: var(--fs-small);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.86);
  margin-top: 8px;
}

.program__domains {
  margin-top: 56px;
  text-align: center;
}
.program__domains-label {
  font-size: var(--fs-body);
  color: var(--c-text-sub);
  margin-bottom: 8px;
}
.program__domains-list {
  font-size: var(--fs-body);
  color: var(--c-text);
  letter-spacing: 0.04em;
  line-height: 1.9;
}

.program__cta {
  margin-top: 48px;
  text-align: center;
}

/* ====================================================
   FAQ
==================================================== */
.faq {
  padding: 96px 0 80px;
  background: var(--c-bg);
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
}
.faq-item {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item__q {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  font-size: var(--fs-body);
  color: var(--c-text);
  position: relative;
}
.faq-item__label {
  font-weight: 700;
  font-size: 18px;
  color: var(--c-navy);
  width: 18px;
  flex-shrink: 0;
}
.faq-item__label--a { color: var(--c-pink); }
.faq-item__text { flex: 1; line-height: 1.6; }
.faq-item__toggle {
  width: 16px; height: 16px;
  position: relative;
  flex-shrink: 0;
}
.faq-item__toggle::before,
.faq-item__toggle::after {
  content: "";
  position: absolute;
  background: var(--c-text-sub);
  top: 50%; left: 50%;
}
.faq-item__toggle::before {
  width: 16px; height: 2px;
  transform: translate(-50%, -50%);
}
.faq-item__toggle::after {
  width: 2px; height: 16px;
  transform: translate(-50%, -50%);
  transition: opacity .2s var(--ease);
}
.faq-item[open] .faq-item__toggle::after { opacity: 0; }

.faq-item__a {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 4px 28px 20px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-text);
}

.faq__footnote {
  margin-top: 36px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-text-sub);
}

/* ====================================================
   FOOTER
==================================================== */
.site-footer {
  background: var(--c-navy);
  color: #fff;
  padding: 56px 0;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
}
.site-footer__logo-img { display: block; width: 200px; height: auto; }
.site-footer__info {
  margin: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 8px;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.site-footer__info > div {
  display: contents;
}
.site-footer__info dt {
  color: rgba(255, 255, 255, 0.7);
}
.site-footer__info dt::after { content: "："; }
.site-footer__info dd { margin: 0; }

/* ====================================================
   レスポンシブ（〜768px：スマホ）
==================================================== */
@media (max-width: 768px) {
  :root {
    --gap-section: 72px;
  }
  .container { padding: 0 20px; }

  .section-title { font-size: 20px; }

  .btn { min-width: 0; width: 100%; max-width: 360px; font-size: 15px; padding: 16px 20px; gap: 12px; }
  /* SPでは3CTAを縦並び・全幅 */
  .cta-group__buttons { flex-direction: column; align-items: center; gap: 12px; }
  .cta-group__buttons .btn { width: 100%; min-width: 0; }
  .hero__cta { min-width: 0; }

  /* HERO（SP：画像とCTAを縦並びにし、絶対配置を解除して画像の下にCTAを置く） */
  .hero {
    --hero-cta-w: 320px;
    padding-bottom: 20px; /* 全体をコンパクトに */
  }
  .hero__cta-wrap {
    /* PCの絶対配置を解除して、画像の下に普通に流す */
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    margin: 10px 20px 0; /* 画像直下に詰める */
  }
  .hero__cta-buttons {
    flex-direction: column;
    gap: 6px; /* ボタン同士の間隔を詰める */
    max-width: 360px;
    margin: 0 auto;
  }
  .hero__cta-buttons .btn {
    width: 100%;
    font-size: 14px;
    padding: 14px 20px;
    white-space: normal;
  }
  .hero__cta-buttons .btn__arrow { width: 24px; height: 24px; font-size: 13px; }
  .hero__note {
    font-size: var(--fs-tiny);
    white-space: normal;
    margin: 8px auto 0; /* ボタンとの間隔を詰める */
    max-width: 360px;
    text-align: center;
  }

  /* PAINS */
  .pains { padding: 72px 0 64px; }
  .pains__grid { grid-template-columns: 1fr; }

  /* MISSION */
  .mission__top { padding: 64px 0 32px; }
  .mission__heading { font-size: 19px; line-height: 1.6; padding: 0 12px; }
  /* 紺帯：SPでは透過PNG（mission_bg_person_sp.png）を紺背景の上に中央配置 */
  .mission__band {
    background: var(--c-navy); /* 透過画像の背景になる紺色 */
    padding-top: 32px;
  }
  .mission__band-bg {
    /* PCのwidth:100%/object-fitを上書き。SPは自然サイズで中央寄せ */
    display: block;
    width: auto;
    max-width: 280px;
    height: auto;
    margin: 0 auto;
    object-fit: initial;
    object-position: initial;
  }
  .mission__copy {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    padding: 20px 24px 36px;
    margin: 0;
    text-align: center;
    font-size: 17px;
    line-height: 1.75;
  }
  .mission__bottom { padding: 40px 0 64px; }
  .mission__cards { grid-template-columns: 1fr; gap: 16px; }
  .mission__cta { margin-top: 32px; }

  /* PILLARS */
  .pillars { padding: 72px 0; }
  /* SP用のVenn：直径160px、中心間130pxの等辺三角形（overlap 30px）。
     venn幅290px・高さ273pxでバランスを取り、番号がコンテナ内に収まる余白を確保 */
  .venn { width: 290px; height: 273px; margin: 16px auto 40px; }
  .venn__circle { width: 160px; height: 160px; font-size: 14px; }
  .venn__circle--01 { left: 50%; transform: translateX(-50%); }
  .venn__circle--02 { left: 0; }
  .venn__circle--03 { right: 0; }
  /* SPでは番号を円により近づける（%は円サイズ基準なので自動連動） */
  .venn__number { font-size: 16px; }
  .venn__circle--01 .venn__number { right: -6%; }
  .venn__circle--02 .venn__number { left:  -10%; }
  .venn__circle--03 .venn__number { right: -10%; }
  .pillars__details { grid-template-columns: 1fr; gap: 32px; max-width: 480px; }
  /* SPでも 01/02/03 と 見出しは横並び（PCと同様）。本文・箇条書きは下に流す */
  .pillar-detail {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 8px;
    align-items: center;
  }
  .pillar-detail__num {
    grid-row: 1;
    grid-column: 1;
    font-size: 42px;
    line-height: 1;
    margin: 0;
  }
  .pillar-detail__title {
    grid-row: 1;
    grid-column: 2;
    font-size: 18px;
    margin: 0;
  }
  .pillar-detail__body {
    grid-column: 1 / -1;
    margin: 8px 0 12px;
  }
  .pillar-detail__list {
    grid-column: 1 / -1;
  }

  /* PRACTITIONERS */
  .practitioners__inner { padding: 64px 20px 48px; }
  /* 見出しが「支／援」など末尾1文字孤立しないよう、フォント控えめ＋text-wrap: balance */
  .practitioners__heading {
    font-size: 18px;
    line-height: 1.5;
    padding: 0 6px;
    text-wrap: balance;
  }
  /* リードボックス：余白を確保し、本文を14pxにして「。」孤立を防ぐ */
  .practitioners__lead { padding: 22px 16px; }
  .practitioners__lead p {
    font-size: 14px;
    line-height: 1.85;
    text-wrap: pretty;
  }
  .practitioner-card {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 4px;
    padding: 16px 18px 16px 32px;
  }
  .practitioner-card::before { width: 5px; }
  .practitioner-card::after { border-width: 18px 18px 0 0; }
  .practitioner-card__num { grid-row: 1 / span 2; align-self: center; font-size: 20px; }
  .practitioner-card__title { font-size: 17px; }
  .practitioner-card__body { font-size: 14px; }
  .practitioners__bridge { padding: 44px 16px 48px; }
  .practitioners__bridge p { font-size: 18px; line-height: 1.6; }
  .practitioners__bridge-arrow { margin-top: 22px; font-size: 22px; }

  /* ADVISORS */
  .advisors { padding: 72px 0; }
  .advisors__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .advisor-card__name { font-size: 20px; }

  /* PROCESS */
  .process__band { padding: 56px 0 64px; }
  .process__steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .process-step__title { font-size: 15px; }
  .process-step__body { font-size: 13px; padding: 0 14px 20px; }

  /* PROGRAM */
  .program { padding: 72px 0 64px; }
  .program__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .program-card { padding: 28px 18px 24px; }
  .program-card__title { font-size: 20px; }
  .program__domains-list { font-size: 13px; line-height: 2; }

  /* FAQ */
  .faq { padding: 72px 0 56px; }
  .faq-item__q, .faq-item__a { padding-left: 18px; padding-right: 18px; gap: 14px; font-size: 15px; }

  /* FOOTER */
  .site-footer { padding: 40px 0 32px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__logo-img { width: 140px; }
  .site-footer__info { grid-template-columns: 100px 1fr; font-size: 13px; }
}

@media (max-width: 480px) {
  .advisors__grid { grid-template-columns: 1fr; }
  .program__grid { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: 1fr; }
}

/* セミナーバナー紹介エリア SP */
@media (max-width: 768px) {
  .seminar-banner__intro { margin-top: 40px; }
  .seminar-banner__title { font-size: 19px; }
  .seminar-banner__subcopy { font-size: 13px; margin-bottom: 20px; }
  .seminar-banner__body { font-size: 14px; line-height: 1.95; margin-bottom: 24px; }
  .seminar-banner__meta { font-size: 12.5px; line-height: 1.85; }
  .seminar-banner__cta { margin-top: 28px; }
}

/* ====================================================
   STICKY CTA BAR（スクロール追従／LPのみ）
   ヒーロー通過後に画面下部にフェードイン、終端付近でフェードアウト
==================================================== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);

  /* 既定は非表示（is-visible で表示） */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.sticky-cta[hidden] { display: none; }
.sticky-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sticky-cta__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sticky-cta__buttons {
  display: flex;
  flex: 1;
  gap: 10px;
  justify-content: center;
}
.sticky-cta__btn {
  /* 既存.btnを継承しつつ、追従バー用にコンパクト化 */
  min-width: 0;
  flex: 0 1 auto;
  font-size: 13px;
  padding: 10px 16px;
  gap: 8px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: none; /* バー自体に影があるため重ねない */
}
.sticky-cta__btn .btn__arrow {
  width: 20px;
  height: 20px;
  font-size: 11px;
}

.sticky-cta__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.05);
  border: 0;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-text-sub);
  transition: background .15s ease, color .15s ease;
  padding: 0;
}
.sticky-cta__close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--c-text);
}
.sticky-cta__close:focus-visible {
  outline: 2px solid var(--cta-primary);
  outline-offset: 2px;
}

/* SP（≤768px）：3CTA縦並びで全て表示。長文ボタンの可読性を優先 */
@media (max-width: 768px) {
  .sticky-cta { padding: 10px 12px; }
  .sticky-cta__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .sticky-cta__buttons {
    flex-direction: column;
    width: 100%;
    gap: 6px;
  }
  .sticky-cta__btn {
    width: 100%;
    font-size: 13px;
    padding: 10px 14px;
  }
  .sticky-cta__btn .btn__arrow {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }
  /* ×ボタンを縦並びの一番上・右端に配置 */
  .sticky-cta__close {
    order: -1;
    align-self: flex-end;
    width: 26px;
    height: 26px;
    font-size: 14px;
  }
}

/* ====================================================
   SEMINAR PAGE（seminar.html）
   LPと同じデザインシステムを流用
==================================================== */
.seminar-header {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
.seminar-header__inner {
  display: flex;
  align-items: center;
}
.seminar-header__logo img {
  display: block;
  height: auto;
}

/* ページタイトル */
.seminar-hero {
  padding: 72px 0 56px;
  text-align: center;
  background: #fff;
}
.seminar-hero__eyebrow {
  font-size: var(--fs-small);
  color: var(--c-text-sub);
  letter-spacing: 0.12em;
  margin: 0 0 12px;
}
.seminar-hero__title {
  font-size: 32px;
  color: var(--c-navy);
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin: 0 0 24px;
}
.seminar-hero__title-mark {
  display: inline-block;
  color: var(--cta-primary);
}
.seminar-hero__lead {
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--c-text-sub);
  max-width: 760px;
  margin: 0 auto;
}

/* 紹介エリア（タイトル→紹介→チラシ→申込み の自然な流れの中央ブロック） */
.seminar-intro {
  padding: 16px 0 64px;
  background: #fff;
  text-align: center;
}
.seminar-intro .container {
  max-width: 800px;
}
.seminar-intro__subcopy {
  font-size: var(--fs-small);
  color: var(--c-text-sub);
  letter-spacing: 0.08em;
  margin: 0 0 28px;
}
.seminar-intro__body {
  font-size: 17px;
  line-height: 2.1;
  color: var(--c-text);
  letter-spacing: 0.04em;
  margin: 0 0 32px;
}
.seminar-intro__meta {
  font-size: var(--fs-small);
  color: var(--c-text-mute);
  line-height: 1.95;
  letter-spacing: 0.04em;
  margin: 0;
}

/* チラシ */
.seminar-flyer {
  padding: 40px 0 80px;
  background: var(--c-bg);
}
.seminar-flyer .container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.seminar-flyer__item {
  margin: 0;
  width: 100%;
  max-width: 1040px;
}
.seminar-flyer__item img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.seminar-flyer__caption {
  margin-top: 12px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-text-sub);
  letter-spacing: 0.04em;
}

/* チラシ下の案内文 */
.seminar-flyer__note {
  margin: 24px 0 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-text-sub);
  letter-spacing: 0.04em;
}

/* 共通：セミナー詳細ページの新規セクション見出し */
.seminar-section-title {
  text-align: center;
  font-size: 24px;
  color: var(--c-navy);
  letter-spacing: 0.06em;
  margin: 0 0 36px;
  line-height: 1.4;
}

/* ====================================================
   開催概要
==================================================== */
.seminar-overview {
  padding: 72px 0;
  background: #fff;
}
.seminar-overview__list {
  margin: 0 auto;
  max-width: 720px;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px 24px;
  padding: 28px 32px;
  background: var(--c-bg);
}
.seminar-overview__list > div { display: contents; }
.seminar-overview__list dt {
  color: var(--c-text-sub);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  align-self: start;
  padding-top: 2px;
}
.seminar-overview__list dt::after { content: "："; }
.seminar-overview__list dd {
  margin: 0;
  color: var(--c-text);
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* ====================================================
   カリキュラム（全11回）
   PC：1行 = 回 / 日付 / テーマ / 講師 のテーブル風
   SP：回・日付・講師 を上段、テーマを下段（横スクロール回避）
==================================================== */
.seminar-curriculum {
  padding: 72px 0;
  background: #fff;
}
.curriculum-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.curriculum-item {
  display: grid;
  grid-template-columns: 72px 110px 1fr 90px;
  gap: 16px;
  align-items: center;
  padding: 16px 22px;
  background: var(--c-bg);
}
.curriculum-item__num {
  font-weight: 700;
  color: var(--c-navy);
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
}
.curriculum-item__date {
  color: var(--c-text-sub);
  font-size: var(--fs-body);
}
.curriculum-item__theme {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--c-text);
  line-height: 1.6;
}
.curriculum-item__lecturer {
  color: var(--c-text-sub);
  font-size: var(--fs-small);
  text-align: right;
  letter-spacing: 0.04em;
}

/* 申込みCTA */
.seminar-apply {
  padding: 80px 0;
  text-align: center;
  background: #fff;
}
.seminar-apply__title {
  font-size: 28px;
  color: var(--c-navy);
  margin: 0 0 16px;
  letter-spacing: 0.06em;
}
.seminar-apply__lead {
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--c-text-sub);
  margin: 0 0 36px;
}
.seminar-apply__btn {
  min-width: 380px;
  font-size: 18px;
  padding: 22px 36px;
}

/* 問い合わせ */
.seminar-contact {
  padding: 64px 0 80px;
  text-align: center;
  background: var(--c-bg);
}
.seminar-contact__title {
  font-size: 24px;
  color: var(--c-navy);
  margin: 0 0 16px;
  letter-spacing: 0.06em;
}
.seminar-contact__lead {
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--c-text-sub);
  margin: 0 0 20px;
}
.seminar-contact__email {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  color: var(--cta-primary);
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--cta-primary);
  padding-bottom: 2px;
}
.seminar-contact__email:hover {
  color: var(--cta-primary-hover);
  border-color: var(--cta-primary-hover);
}

@media (max-width: 768px) {
  .seminar-hero { padding: 48px 0 40px; }
  .seminar-hero__title { font-size: 22px; }
  .seminar-hero__lead { font-size: 14px; }

  .seminar-intro { padding: 8px 0 48px; }
  .seminar-intro__subcopy { font-size: 13px; margin-bottom: 20px; }
  .seminar-intro__body { font-size: 15px; line-height: 1.95; margin-bottom: 24px; }
  .seminar-intro__meta { font-size: 12.5px; line-height: 1.9; }

  .seminar-flyer { padding: 32px 0 56px; }
  .seminar-flyer .container { gap: 32px; }

  .seminar-apply { padding: 56px 0; }
  .seminar-apply__title { font-size: 22px; }
  .seminar-apply__btn { min-width: 0; width: 100%; max-width: 360px; font-size: 15px; padding: 18px 24px; }

  .seminar-contact { padding: 48px 0 56px; }
  .seminar-contact__title { font-size: 20px; }
  .seminar-contact__email { font-size: 17px; }

  /* セミナー詳細ページ：新規セクションSP対応 */
  .seminar-flyer__note { margin-top: 20px; font-size: 13px; }
  .seminar-section-title { font-size: 19px; margin-bottom: 28px; }

  /* 開催概要：定義リストの幅とパディングを縮小 */
  .seminar-overview { padding: 56px 0; }
  .seminar-overview__list {
    grid-template-columns: 76px 1fr;
    gap: 10px 16px;
    padding: 22px 20px;
  }
  .seminar-overview__list dt { font-size: 13px; }
  .seminar-overview__list dd { font-size: 14px; line-height: 1.7; }

  /* カリキュラム：1行→2行レイアウト（横スクロール回避） */
  .seminar-curriculum { padding: 56px 0; }
  .curriculum-item {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "num date lecturer"
      "theme theme theme";
    gap: 8px 12px;
    padding: 14px 16px;
  }
  .curriculum-item__num { grid-area: num; font-size: 15px; }
  .curriculum-item__date { grid-area: date; font-size: 14px; }
  .curriculum-item__lecturer { grid-area: lecturer; font-size: 13px; }
  .curriculum-item__theme {
    grid-area: theme;
    font-size: 14px;
    padding-top: 10px;
    margin-top: 2px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    line-height: 1.55;
  }
}