@charset "UTF-8";
/* ==========================================================================
   40キャリア — ベーススタイル
   先方由来の style.css を置き換えるための器。
   2026-09-19: 本番4ページで実際に効いている 227 ルールだけを、元の順序・元の
   文字列のまま取り出した段階。ここから塊ごとに自前の実装へ書き換えていく。
   ⚠ 媒体クエリの並び順を変えないこと（max-width が重なっていて後ろが勝つ）。
   進捗と作戦は _HANDOFF_hp.md §8 を見る。
   ========================================================================== */
/* ==========================================================================
   塊1 — 土台（2026-09-19 自前実装）
   ここが動くと全ページ・全セクションが動く。触る前に必ず回帰検証を通す。
   ========================================================================== */

/* --- スクロール演出 --------------------------------------------------------
   画面に入った要素を下から浮かび上がらせる。
   c40.js が読み込み時に .animation_js を、交差時に .is_active を付ける。
   浮かび上がる距離は --animation-y、遅らせ幅は --animation-delay で
   個別に上書きできる（既定値は下の var() のフォールバック）。
   -------------------------------------------------------------------------- */
@keyframes fade_in_up {
  from { opacity: 0; transform: translate3d(0, var(--animation-y, calc(0.32 * var(--module))), 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.animation.animation_js { will-change: filter; }

/* JSが動いている環境でだけ隠す。JSが無ければ最初から見えたままにする */
.animation.animation_js.fade_in_up { opacity: 0; }

/* 🔴 animation の一括指定は animation-delay を 0 に戻す。
      個別の遅らせ幅は必ずこの「後ろの行」で入れること。順序を入れ替えない。 */
.animation.animation_js.fade_in_up.is_active {
  animation: .8s fade_in_up forwards;
  animation-delay: var(--animation-delay);
}

/* --- 基準寸法と色 ----------------------------------------------------------
   🔴 --module がこのサイトの唯一の寸法基準。余白も文字サイズもすべてこの倍数で書く。
      PC 6.51vw / SP 13.021vw。画面幅に対する比率なので、幅が変われば全部が等比で動く。
      px を直接書かないこと。1か所でも px を混ぜると、そこだけ拡大縮小に追従しなくなる。
   -------------------------------------------------------------------------- */
:root {
  --module: 6.51vw;
  --spacing: .03em;

  /* 40キャリアの配色（深いティール × テラコッタ） */
  --color-red:        #B45F2B;
  --color-navy:       #12574F;
  --color-blue:       #2E7C72;
  --color-pale-blue:  #EAF3F0;
  --color-light-blue: #CADFDA;
  --color-text: var(--color-navy, #000);
  --grad-red:   linear-gradient(#B45F2B, #8A4520);
  --grad-medal: radial-gradient(50% 50% at 50% 50%, #2E7C72, #0B3B35);

  /* ページ内リンクで飛んだとき、固定ヘッダーの下に潜らせない */
  scroll-behavior: smooth;
  scroll-padding-top: calc(0.8 * var(--module));
}

@media screen and (max-width: 768px) {
  :root {
    --module: 13.021vw;
    scroll-padding-top: calc(1.1 * var(--module));
  }
}

/* --- リセット --------------------------------------------------------------
   letter-spacing を全要素に配るのは意図的。--spacing を1か所変えれば
   サイト全体の字間が動く。
   -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  list-style: none;
  letter-spacing: var(--spacing, 0);
}

/* 擬似要素は * に含まれないので個別に書く。
   🔴 ここを落とすと、幅を calc(100% - ...) で取っている飾り（FVのメダルの輪郭など）が
      content-box 計算になって消える。2026-09-19 に実際に消した。 */
*::before,
*::after {
  box-sizing: border-box;
  letter-spacing: var(--spacing, 0);
}

/* 画像は常に親幅いっぱい。font-size:0 は img の下に出る行間の隙間を消すため。
   🔴 img に em で寸法を書くときは font-size: 1em を必ず併記すること。
      この font-size:0 に食われて高さ0になる（ロゴで実際にやらかした）。 */
img,
video {
  font-size: 0;
  line-height: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

picture { display: block; }

/* --- 本文 ------------------------------------------------------------------
   フッターを最下部に貼り付けるため body を縦フレックスにしている。
   -------------------------------------------------------------------------- */
body {
  font-family: "Noto Sans JP", Helvetica, Arial, "Hiragino Sans", YuGothic, "Yu Gothic medium", sans-serif;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  font-size: calc(0.18 * var(--module));
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

@media screen and (max-width: 768px) {
  body { font-size: calc(0.27 * var(--module)); }
}

/* メニューを開いているあいだ背面をスクロールさせない（c40.js が付け外しする） */
body.body_overflow { overflow: hidden; }

/* --- 文字まわりの既定値 ---------------------------------------------------- */
small  { font-weight: normal; }
strong { font-weight: bolder; }

/* 🔴 :where() は詳細度が 0。ここを a { } に書き換えると (0,0,1) になり、
      後続の個別指定に勝ってしまう箇所が出る。必ず :where() のまま書くこと。 */
:where(a) {
  color: currentColor;
  text-decoration: none;
}

@media screen and (min-width: 769px) {
  :where(a) { transition: opacity .4s; }
  :where(a):hover { opacity: .8; }
}

/* --- ボタンの土台 ----------------------------------------------------------
   個別のボタン（btn_header / btn_cta）は --btn-* を上書きするだけでよい。
   🔴 ここも :where() で詳細度 0 にしてある。書き換えないこと。
   -------------------------------------------------------------------------- */
:where([class^="btn_"]) {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 16em;
  white-space: nowrap;
  width: var(--btn-w);
  min-height: var(--btn-h);
  padding: var(--btn-pd, 1em);
  font-size: var(--btn-fz);
  font-weight: var(--btn-fw, bold);
  color: var(--btn-c, #fff);
  background: var(--btn-bg, var(--grad-red));
}
/* --- ヘッダーのボタン（無料相談の予約） ------------------------------------
   土台は :where([class^="btn_"])。ここは寸法と余白の上書きだけ。
   -------------------------------------------------------------------------- */
.btn_header {
  --btn-fz: calc(0.16 * var(--module));
  --btn-pd: 0.8em;
  gap: .64em;
}
@media screen and (max-width: 768px) {
  .btn_header {
    --btn-fz: calc(0.2 * var(--module));
    --btn-pd: 0.64em;
  }
}

/* 右端の矢印 */
.btn_header::after {
  content: "";
  background: url("../img/c40/deco/arrow-right.svg") no-repeat center/contain;
  width: calc(0.16 * var(--module));
  height: calc(0.16 * var(--module));
}
@media screen and (max-width: 768px) {
  .btn_header::after {
    width: calc(0.24 * var(--module));
    height: calc(0.24 * var(--module));
  }
}

/* 左端の丸バッジ（「無料」）。em はこの要素の font-size 基準なので、
   SP で font-size を変えると円の大きさも一緒に動く。 */
.btn_header .span1 {
  display: grid;
  place-content: center;
  width: 2.72em;
  height: 2.72em;
  border-radius: 50%;
  font-size: 76%;
  color: var(--color-red);
  background: #fff;
}
@media screen and (max-width: 768px) {
  .btn_header .span1 {
    font-size: 88%;
    width: 3.2em;
    height: 3.2em;
  }
}
/* --- CTAのボタン -----------------------------------------------------------
   土台は :where([class^="btn_"])。ここは寸法と背景の上書きだけ。
   ⚠ かつては右下に人物のシルエット（先方由来の img_analy-deco_4.png）を薄く
     敷いていた。2026-09-20 に外した（河田判断）。文字が読みやすくなる。
   -------------------------------------------------------------------------- */
.btn_cta {
  --btn-pd: calc(0.18 * var(--module)) calc(0.32 * var(--module));
  --btn-bg: var(--grad-red);
  line-height: 1.36;
  gap: calc(0.16 * var(--module));
}
@media screen and (max-width: 768px) {
  .btn_cta {
    --btn-w: calc(6.912 * var(--module));
    --btn-h: calc(1.28 * var(--module));
  }
}

/* 右端の矢印 */
.btn_cta::after {
  content: "";
  background: url("../img/c40/deco/arrow-right.svg") no-repeat center/contain;
  width: calc(0.24 * var(--module));
  height: calc(0.24 * var(--module));
}
@media screen and (max-width: 768px) {
  .btn_cta::after {
    width: calc(0.35 * var(--module));
    height: calc(0.35 * var(--module));
  }
}

/* 「40歳以上の転職に 特化」を左右のカギ括弧飾りで挟む */
.btn_cta .span1 { display: flex; }

.btn_cta .span1::before,
.btn_cta .span1::after {
  content: "";
  background: url("../img/c40/deco/laurel.svg") no-repeat center/contain;
  width: 1.44em;
}

/* 右側は同じ画像を左右反転して使う */
.btn_cta .span1::after { transform: scaleX(-1); }

.btn_cta .span2 {
  display: grid;
  text-align: center;
}

/* ⚠ 下の2つの @media は同じ条件だが、1つにまとめないこと。
     元の並び順を保つための決まり（§9-5）。 */
@media screen and (max-width: 768px) {
  .btn_cta .span2 { --fz-small: calc(0.18 * var(--module)); }
}
@media screen and (max-width: 768px) {
  .btn_cta .span3 { --fz-h6: calc(0.26 * var(--module)); }
}

/* 「無料」の大きい文字 */
.btn_cta .span4 {
  font-size: 162%;
  font-weight: 600;
  line-height: 1.04;
  vertical-align: -0.064em;
}
@media screen and (max-width: 768px) {
  .btn_cta .span5 { font-size: calc(0.24 * var(--module)); }
}

.btn_cta .span7 { display: block; }
@media screen and (max-width: 768px) {
  .btn_cta .span7 { --fz-small: calc(0.24 * var(--module)); }
}
/* --- 文字サイズの階段 ------------------------------------------------------
   どの段も --module の倍数。
   🔴 font-size を直接書かず var(--fz-*, 既定値) の形を保つこと。
      個別の箇所が --fz-h6 などを上書きして、その場所だけ大きさを変えている
      （例: .btn_cta .span3）。直接値にすると、その上書きが効かなくなる。
   ⚠ @media を1つにまとめない。max-width が重なっていて後ろが勝つ並びを保つ。
   -------------------------------------------------------------------------- */
.fz_h2 { font-size: var(--fz-h2, calc(0.44 * var(--module))); }
@media screen and (max-width: 768px) {
  .fz_h2 { --fz-h2: calc(0.55 * var(--module)); }
}

.fz_h3 { font-size: var(--fz-h3, calc(0.37 * var(--module))); }
@media screen and (max-width: 768px) {
  .fz_h3 { --fz-h3: calc(0.45 * var(--module)); }
}

.fz_h4 { font-size: var(--fz-h4, calc(0.31 * var(--module))); }
@media screen and (max-width: 768px) {
  .fz_h4 { --fz-h4: calc(0.38 * var(--module)); }
}

.fz_h5 { font-size: var(--fz-h5, calc(0.25 * var(--module))); }
@media screen and (max-width: 768px) {
  .fz_h5 { --fz-h5: calc(0.34 * var(--module)); }
}

.fz_h6 { font-size: var(--fz-h6, calc(0.21 * var(--module))); }
@media screen and (max-width: 768px) {
  .fz_h6 { --fz-h6: calc(0.29 * var(--module)); }
}

.fz_small { font-size: var(--fz-small, calc(0.16 * var(--module))); }
@media screen and (max-width: 768px) {
  .fz_small { --fz-small: calc(0.22 * var(--module)); }
}

/* --- 書体・太さ ------------------------------------------------------------ */
.ff_serif { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif; }
.fw_bold  { font-weight: bolder; }
.fw_900   { font-weight: 900; }

/* 約物を半角幅に詰める（「40歳からの」の鉤括弧まわりなど） */
.fs_halt {
  -webkit-font-feature-settings: "halt";
  font-feature-settings: "halt";
}

/* --- 色のユーティリティ ---------------------------------------------------- */
.red,
.required { color: var(--color-red); }
.blue     { color: var(--color-blue); }

/* --- PC / SP の出し分け ---------------------------------------------------- */
@media screen and (min-width: 769px) {
  .pc_hide { display: none !important; }
}
@media screen and (max-width: 768px) {
  .sp_hide { display: none !important; }
}
/* ==========================================================================
   塊3 — CTA（2026-09-19 自前実装）
   LP内に3箇所出る。使い回しが多く、単独で完結している。

   🔴 ここで外した指定（実測で「消しても1pxも動かない」ことを確認済み）:
      ・先方の写真背景 img_analy-cta_bg_1.png / _sp_1.png
        → c40.css の .analy-cta が background を丸ごと差し替えている
      ・.analy-cta_header picture の幅（PC/SPとも）
        → c40.css が持っている
      ・.analy-cta_content h3 の grid-column: 1/3
        → c40.css が 1 / -1 にしている（列組みを1列に変えたため）
      ・.analy-cta_content と .analy-cta_content_text_list の SP 用 padding / gap
        → 🔴 生成テーマ（c40-theme-a.css）が非メディア指定で打ち消していて、
          実際には効いていなかった。**現状の見た目を保つため復活させない。**
          ⚠ 本来の意図どおり SP で余白を広げたい場合は河田に相談（§9-9）
   ========================================================================== */

/* --- CTAブロック本体 -------------------------------------------------------
   背景は c40.css が持っている（--color-blue → --color-navy の縦グラデに
   薄い模様を ::before で重ねる）。ここでは余白の基準だけ渡す。
   -------------------------------------------------------------------------- */
.c40-cta {
  --pt: calc(0.8 * var(--module));
  --pr: 0;
}
@media screen and (max-width: 768px) {
  .c40-cta { --pt: calc(0.72 * var(--module)); }
}

/* イラストと文章の並び。PC は横並び、SP は縦積み */
.c40-cta_header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0.32 * var(--module));
}
@media screen and (max-width: 768px) {
  .c40-cta_header { flex-direction: column; }
}

.c40-cta_header_text {
  display: grid;
  justify-items: center;
  gap: calc(0.32 * var(--module));
}

/* SP はイラストに文章を食い込ませる（負のマージン）。
   position: relative はイラストより前面に出すため */
@media screen and (max-width: 768px) {
  .c40-cta_header_text {
    /* 🔴 先方は文章が3行だったので -1.6 でも収まったが、40キャリアは4行あり
       1行目がイラストの足元に重なっていた（2026-09-20 河田指摘）。
       食い込みを浅くして重なりを解消する。 */
    margin-top: calc(-0.55 * var(--module));
    position: relative;
  }
}

.c40-cta_header_text h2 {
  display: grid;
  justify-items: start;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .c40-cta_header_text h2 { justify-items: center; }
}

/* 「全国どこからでもオンラインで参加できます」の白帯 */
.c40-cta_header_text h2 .span1 {
  padding: .16em 1em;
  border-radius: calc(0.02 * var(--module));
  color: var(--color-text);
  background: #fff;
}

.c40-cta_header_text h2 .span2 { margin-top: calc(0.24 * var(--module)); }

/* 「あなたの書類をその場で添削し」の下線 */
.c40-cta_header_text h2 .span3 { border-bottom: 1px solid; }

/* --- 白いカード ------------------------------------------------------------
   ⚠ 列組みは c40.css が 1fr に変えている（先方は2列）。ここでは書かない。
   -------------------------------------------------------------------------- */
.c40-cta_content {
  display: grid;
  place-content: center;
  width: min(calc(10.08 * var(--module)), 90%);
  margin: calc(0.64 * var(--module)) auto 0;
  padding-block: calc(0.32 * var(--module)) calc(0.4 * var(--module));
  gap: calc(0.24 * var(--module)) calc(0.32 * var(--module));
  border-radius: calc(0.16 * var(--module));
  background: linear-gradient(104deg, #CADFDA, #F2F8F6 24%, #FFFFFF 56%, #F2F8F6 80%, #CADFDA);
}

.c40-cta_content h3 {
  display: grid;
  place-items: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c40-cta_content h3 { gap: calc(0.12 * var(--module)); }
}

/* 「参加された方が」の丸帯 */
.c40-cta_content h3 .span1 {
  --spacing: .24em;
  position: relative;
  padding: .16em 1.6em;
  border-radius: 16em;
  color: #fff;
  background: var(--color-text);
}

/* 丸帯の下に出る小さな三角。四角を clip-path で三角に切っている */
.c40-cta_content h3 .span1::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -1px);
  width: calc(0.08 * var(--module));
  height: calc(0.06 * var(--module));
  background: var(--color-text);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
@media screen and (max-width: 768px) {
  .c40-cta_content h3 .span1::before {
    width: calc(0.18 * var(--module));
    height: calc(0.14 * var(--module));
  }
}

/* --- カードの本文 ---------------------------------------------------------- */
.c40-cta_content_text h4 { text-align: center; }

/* 見出しを左右の斜線で挟む */
.c40-cta_content_text h4 .span2 {
  display: flex;
  justify-content: center;
  gap: 1em;
}
@media screen and (max-width: 768px) {
  .c40-cta_content_text h4 .span2 { gap: .64em; }
}

.c40-cta_content_text h4 .span2::before,
.c40-cta_content_text h4 .span2::after {
  content: "";
  width: 1px;
  background: var(--color-text);
  transform-origin: top;
}
@media screen and (max-width: 768px) {
  .c40-cta_content_text h4 .span2::before,
  .c40-cta_content_text h4 .span2::after {
    margin-block: .4em .16em;
  }
}

.c40-cta_content_text h4 .span2::before { transform: rotate(-24deg); }
.c40-cta_content_text h4 .span2::after  { transform: rotate(24deg); }

/* --- 持ち帰れるものの箇条書き ---------------------------------------------- */
.c40-cta_content_text_list {
  display: grid;
  place-content: center;
  margin-top: calc(0.08 * var(--module));
  padding: calc(0.12 * var(--module));
  border-radius: calc(0.08 * var(--module));
  background: rgba(46, 124, 114, .08);
}

.c40-cta_content_text_list li {
  position: relative;
  padding-left: 1.44em;
  margin-block: .16em;
}

/* 行頭のチェック */
.c40-cta_content_text_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: .8em;
  height: .8em;
  background: url("../img/c40/deco/check.svg") no-repeat center/contain;
}
/* ==========================================================================
   塊2 — ヘッダー / フッター（2026-09-19 自前実装）
   4ページ共通。ここが通れば /law/ /privacy/ /reserve/ は土台＋これでほぼ完成する。
   ========================================================================== */

/* --- ヘッダー --------------------------------------------------------------
   常に最前面に固定。中身は「ロゴ」と「予約ボタン」の2つだけ。
   🔴 position: fixed なので、下層ページ（c40.css の .c40-legal / .c40-reserve）の
      上余白には必ずこの高さ（PC 0.8×module / SP 1.1×module）を足し込むこと。
      足りないと見出しがヘッダーに潜り込む（実際にやらかしている）。
   -------------------------------------------------------------------------- */
.c40-header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: calc(0.8 * var(--module));
  padding-inline: calc(0.32 * var(--module));
}
@media screen and (max-width: 768px) {
  .c40-header { height: calc(1.1 * var(--module)); }
}

/* 背景の帯。最初は透明で、少しスクロールすると c40.js が body に .body_sticky を
   付けて浮かび上がる。
   ⚠ 要素そのものではなく擬似要素に背景を持たせているのは、opacity を動かしたときに
     中身（ロゴ・ボタン）まで一緒に透けないようにするため。 */
.c40-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-pale-blue), var(--color-pale-blue) 40%, var(--color-light-blue));
  opacity: 0;
  transition: .8s;
}

.body_sticky .c40-header::before { opacity: 1; }

/* ロゴ（サービスロゴ＋「40歳以上に特化した転職塾」のタグ） */
.c40-header_logo {
  display: flex;
  align-items: center;
  gap: calc(0.08 * var(--module)) calc(0.24 * var(--module));
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c40-header_logo {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 中身は画像。font-size: 0 は img の下に出る行間の隙間をつぶすため */
.c40-header_logo dt {
  width: calc(2.16 * var(--module));
  font-size: 0;
}

/* タグ。枠線の色を指定していないのは意図的で、currentColor（＝本文色）になる */
.c40-header_logo dd {
  --spacing: .2em;
  padding: .32em 1em;
  border: 1px solid;
  font-size: calc(0.15 * var(--module));
  background: #fff;
}

/* --- フッター --------------------------------------------------------------
   margin-top: auto で、本文が短いページでも最下部に貼り付く（body が縦フレックス）。
   -------------------------------------------------------------------------- */
.c40-footer {
  margin-top: auto;
  overflow: hidden;
}

/* 🔴 背景は c40.css の .analy-footer_content が持っている（濃ティールのグラデ）。
      ここでは背景を書かない。両方に書くとどちらが効いているか分からなくなる。 */
.c40-footer_content {
  position: relative;
  display: grid;
  align-content: center;
  justify-content: start;
  gap: calc(0.32 * var(--module));
  min-height: calc(3.28 * var(--module));
  padding: calc(0.24 * var(--module)) max(5%, (100% - calc(12 * var(--module))) * 0.5);
}
@media screen and (max-width: 768px) {
  .c40-footer_content { padding-block: calc(0.88 * var(--module)); }
}

/* ロゴ＋リンクの並び。PC は横並び、SP は縦積み */
.c40-footer_content dl {
  display: flex;
  align-items: center;
  gap: calc(0.24 * var(--module));
}
@media screen and (max-width: 768px) {
  .c40-footer_content dl {
    flex-direction: column;
    align-items: start;
  }
}

.c40-footer_content dt {
  width: calc(2.76 * var(--module));
  font-size: 0;
}
@media screen and (max-width: 768px) {
  .c40-footer_content dt { width: calc(3.76 * var(--module)); }
}

/* リンク3本（無料相談会のご予約 / プライバシーポリシー / 特定商取引法に基づく表記）。
   ⚠ 本数を増やすときは repeat(3, auto) も直すこと。 */
.c40-footer_content ul {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: calc(0.12 * var(--module)) calc(0.4 * var(--module));
  font-size: calc(0.14 * var(--module));
}
@media screen and (max-width: 768px) {
  .c40-footer_content ul {
    grid-template-columns: auto;
    font-size: calc(0.22 * var(--module));
  }
}

/* --- コピーライトの帯 ------------------------------------------------------
   左右の余白はフッター本体と同じ式。片方だけ変えると縦のラインがずれる。
   -------------------------------------------------------------------------- */
.c40-footer_copy {
  padding: calc(0.24 * var(--module)) max(5%, (100% - calc(12 * var(--module))) * 0.5);
  color: #fff;
  background: #0B3B35;
}

.c40-footer_copy small {
  display: block;
  font-size: calc(0.12 * var(--module));
}
@media screen and (max-width: 768px) {
  .c40-footer_copy small { font-size: calc(0.18 * var(--module)); }
}
/* ==========================================================================
   塊4 — FV（2026-09-19 自前実装）
   独立しているが、画像と文字の重なりが多いので慎重に。

   🔴 ここで外した指定（実測で「消しても1pxも動かない」ことを確認済み）:
      ・.analy-fv_content_text2 dd .span2 / .span3 の font-size
        → c40.css が両方とも 150% に置き換えている

   ⚠ 逆に「計算値は動かないが残したもの」もある。判定を鵜呑みにしないこと:
      ・.analy-fv_img figure の opacity: 0
        → 計算値が 1 なのは fade_in_up アニメーションが終わった後の値だから。
          消すとアニメーションが始まる前に一瞬見えてしまう
      ・.analy-fv_content_text2 dd の font-size
        → 消しても同じ値になるのは body の文字サイズと偶然一致しているだけ。
          body 側を変えた瞬間にメダルの文字が道連れになる
   ========================================================================== */

/* --- FV全体 ----------------------------------------------------------------
   左に文字、右に人物写真。SP は縦積み。
   padding-left は「中身を最大12モジュール幅に収め、余りを左に寄せる」式。
   -------------------------------------------------------------------------- */
.c40-fv {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(7.68 * var(--module));
  padding-left: max(0px, (100% - calc(12 * var(--module))) * 0.5);
  overflow: hidden;
  border-bottom: calc(0.32 * var(--module)) solid;
  background: linear-gradient(90deg, var(--color-pale-blue), var(--color-pale-blue) 40%, var(--color-light-blue));
}
@media screen and (max-width: 768px) {
  .c40-fv {
    flex-direction: column;
    padding-block: calc(1.1 * var(--module)) calc(0.8 * var(--module));
  }
}

/* --- 人物写真 --------------------------------------------------------------
   背後に丸い飾りを ::before で敷く。
   ⚠ img_analy-fv_bg_1.svg は先方由来の画像。差し替え待ち（site/TODO-images.md）。
   -------------------------------------------------------------------------- */
.c40-fv_img {
  position: relative;
  z-index: 1;
}

.c40-fv_img::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: calc(7.57 * var(--module));
  height: calc(6.19 * var(--module));
  background: url("../img/c40/deco/fv-blobs.svg") no-repeat center/contain;
}

/* 先方は写真を4枚重ねて切り替えていた。40キャリアは1枚だけ（河田判断 2026-09-18）。
   ⚠ 2枚目以降を戻すときのために、重ね方（absolute / opacity:0）は残してある。
     1枚目だけ :nth-child(1) で通常フローに戻す。 */
.c40-fv_img figure {
  position: absolute;
  opacity: 0;
  max-width: 100%;
}

.c40-fv_img figure:nth-child(1) {
  position: static;
  width: calc(7.74 * var(--module));
}

/* --- 文字側 ---------------------------------------------------------------- */
.c40-fv_content {
  display: grid;
  justify-items: start;
  padding-top: calc(0.48 * var(--module));
}

/* 「40歳からのマンツーマン転職塾」 */
.c40-fv_content h1 {
  display: grid;
  line-height: 1.12;
  font-size: calc(0.63 * var(--module));
  margin-top: calc(0.16 * var(--module));
}
@media screen and (max-width: 768px) {
  .c40-fv_content h1 { font-size: calc(0.71 * var(--module)); }
}

.c40-fv_content h1 .span2 {
  font-size: 136%;
  font-weight: 600;
  line-height: 1.04;
  vertical-align: -0.016em;
  margin-right: .064em;
}

/* 「40」の数字だけ大きく */
.c40-fv_content h1 .span3 {
  font-size: 184%;
  vertical-align: -0.016em;
}

/* 「マンツーマン」は字間を詰める */
.c40-fv_content h1 .span5 { --spacing: -.03em; }

/* --- 見出しの上に乗る2行 --------------------------------------------------- */
.c40-fv_content_text1 {
  display: grid;
  font-size: calc(0.24 * var(--module));
  font-weight: bold;
  line-height: 1.44;
}
@media screen and (max-width: 768px) {
  .c40-fv_content_text1 { font-size: calc(0.26 * var(--module)); }
}

.c40-fv_content_text1 dt {
  display: flex;
  align-items: center;
  gap: calc(0.16 * var(--module));
}

/* 「40代・50代からの転職」の右に伸びる横線。右へ向かって薄くなる。
   ⚠ 2つ目の色は --color-navy の 40% 不透明度。変数側を変えたらここも直すこと。 */
.c40-fv_content_text1 dt::after {
  content: "";
  height: 1px;
  flex: auto;
  background: linear-gradient(90deg, var(--color-navy), rgba(18, 87, 79, 0.4));
}

.c40-fv_content_text1 dt .span2 {
  font-size: 182%;
  font-weight: 600;
  vertical-align: -0.064em;
}

.c40-fv_content_text1 dd .span1 {
  font-size: 120%;
  display: inline-block;
}

/* --- コース名とメダル ------------------------------------------------------ */
.c40-fv_content_text2 {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-top: calc(0.32 * var(--module));
  font-weight: bold;
}

.c40-fv_content_text2 dt {
  position: relative;
  padding: calc(0.08 * var(--module)) calc(0.16 * var(--module));
  font-size: calc(0.23 * var(--module));
}
@media screen and (max-width: 768px) {
  .c40-fv_content_text2 dt { font-size: calc(0.26 * var(--module)); }
}

/* 白い下敷き。右側をメダルの下に少し潜り込ませるため 100% より広くしている */
.c40-fv_content_text2 dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: calc(100% + .16 * var(--module));
  height: 100%;
  background: #fff;
}

.c40-fv_content_text2 dt .span1 { font-size: 130%; }
.c40-fv_content_text2 dt .span2 { margin-inline: .16em; }

/* 「初回相談 無料」のメダル */
.c40-fv_content_text2 dd {
  position: relative;
  display: grid;
  place-content: center;
  place-items: center;
  width: calc(1.52 * var(--module));
  height: calc(1.52 * var(--module));
  padding-top: calc(0.08 * var(--module));
  border-radius: 50%;
  font-size: calc(0.18 * var(--module));
  line-height: 1.04;
  color: #fff;
  background: var(--grad-medal);
}
@media screen and (max-width: 768px) {
  .c40-fv_content_text2 dd {
    width: calc(1.7 * var(--module));
    height: calc(1.7 * var(--module));
    font-size: calc(0.2 * var(--module));
  }
}

/* メダルの内側の細い輪郭。
   🔴 width/height が calc(100% - ...) なので、box-sizing: border-box（塊1の
      *::before,*::after）が効いていないと消える。2026-09-19 に実際に消した。 */
.c40-fv_content_text2 dd::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - .04 * var(--module));
  height: calc(100% - .04 * var(--module));
  border-radius: 50%;
  border: 1px solid;
  opacity: .8;
  pointer-events: none;
}

/* 🔴 .span2 / .span3 の「文字サイズ」は c40.css が持っている（両方 150%）。
      ⚠ ただし font-weight はこちらが持つ。2026-09-19 に font-size と一緒に
        巻き添えで消してしまい、600 -> 700 になっていた（明朝が 600/700 を
        持たないためピクセル比較では出ず、計算値の比較で見つかった）。 */
.c40-fv_content_text2 dd .span2 { font-weight: 600; }
/* ==========================================================================
   塊10 — セクション共通の余白（2026-09-19 自前実装）
   すべてのセクションがこの `.analy-sec` を併せ持つ。余白は4方向とも変数で受け、
   個々のセクションが --pt / --pr / --pb / --pl を上書きして調整する。
   ⚠ --pb は既定で --pt に、--pl は既定で --pr に落ちる。この入れ子を崩さない。
     崩すと、上下だけ / 左右だけ指定しているセクションが全部ずれる。
   ⚠ 左右の余白は「中身を最大12モジュール幅に収め、余りを均等に振る」式。
   ========================================================================== */
.c40-sec {
  padding:
    var(--pt, calc(0.96 * var(--module)))
    var(--pr, max(5%, (100% - calc(12 * var(--module))) * 0.5))
    var(--pb, var(--pt, calc(0.96 * var(--module))))
    var(--pl, var(--pr, max(5%, (100% - calc(12 * var(--module))) * 0.5)));
}
@media screen and (max-width: 768px) {
  .c40-sec { --pt: calc(0.72 * var(--module)); }
}

/* ==========================================================================
   塊9 — sec01 / sec07（2026-09-19 自前実装）

   🔴 ここで外した指定（全幅・4ページで「消しても1pxも動かない」ことを確認済み）:
      ・.analy-sec01_content の幅（PC/SPとも）と text-align
        → c40.css が 10.08モジュールに広げている（動画を外して1カラムにしたため）
   ========================================================================== */

/* --- sec01（導入） ---------------------------------------------------------
   ⚠ 背景SVGは色替え版（img/theme-a/）を直接読む。生成テーマ側の上書きに
     頼らない形にしてある。
   -------------------------------------------------------------------------- */
.c40-opening {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0.4 * var(--module)) calc(0.96 * var(--module));
  background: url("../img/c40/deco/section-blobs.svg") no-repeat center/cover;
}
@media screen and (max-width: 768px) {
  .c40-opening {
    flex-direction: column;
    background-image: url("../img/c40/deco/section-blobs-sp.svg");
  }
}

/* 🔴 .analy-sec01_content の幅は c40.css が持っている。ここでは書かない。 */
/* ==========================================================================
   塊7 — sec03「円の図」（2026-09-19 自前実装）
   独立したセクション。見出しと、中央の円の図（c40.css の .c40-ring 系）。

   🔴 ここで外した指定（両方の状態・全幅で「消しても1pxも動かない」ことを確認済み）:
      ・.analy-sec03 の SP 用 --pt
        → 生成テーマ（c40-theme-a.css）が非メディア指定で打ち消していて、
          実際には効いていなかった。現状の見た目を保つため復活させない（§9-9）
      ・.analy-sec03_content の margin-top / padding-block、
        .analy-sec03_content h3 の color / background / padding
        → この要素は .c40-ring_wrap / .c40-ring_title でもあり、c40.css が持っている
   ========================================================================== */

.c40-reality {
  --pt: calc(0.8 * var(--module));
  overflow: hidden;
  background: linear-gradient(#fff, #EFEDE7);
}

/* --- 見出し ---------------------------------------------------------------- */
.c40-reality_header { text-align: center; }

.c40-reality_header h2 .span2 { display: block; }
@media screen and (max-width: 768px) {
  .c40-reality_header h2 .span2 { --fz-h4: calc(0.45 * var(--module)); }
}

.c40-reality_header h2 .span3 {
  font-size: 156%;
  line-height: 1.12;
  vertical-align: -0.032em;
}
@media screen and (max-width: 768px) {
  .c40-reality_header h2 .span3 { font-size: 144%; }
}

/* 「3.5%」の数字だけグラデーションで塗る。
   ⚠ 文字を背景で塗りつぶす手法なので、background-clip と text-fill-color の
     4行がセットで必要。1行でも欠けると文字が透明のまま消える。 */
.c40-reality_header h2 .span4 {
  display: inline-block;
  background: linear-gradient(#B45F2B 32%, #6E3316);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  text-fill-color: rgba(0, 0, 0, 0);
}

.c40-reality_header h2 .span5 {
  font-size: 176%;
  line-height: 1.12;
  vertical-align: -0.032em;
}
@media screen and (max-width: 768px) {
  .c40-reality_header h2 .span5 { font-size: 144%; }
}

.c40-reality_header p { margin-top: 1em; }

/* 出典の注記。🔴 この一文と出典は spec/lp-numbers-verification.md と対で管理する */
.c40-reality_header p small {
  display: block;
  margin-top: .64em;
  font-size: 68%;
}

/* --- 円の図の器 ------------------------------------------------------------
   余白は c40.css の .c40-ring_wrap が持っている。ここは重なり順と並べ方だけ。
   -------------------------------------------------------------------------- */
.c40-reality_content {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: calc(0.24 * var(--module));
}
@media screen and (max-width: 768px) {
  .c40-reality_content { gap: calc(0.4 * var(--module)); }
}

/* 図の背後に敷く大きな円 */
.c40-reality_content::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: calc(6 * var(--module));
  height: calc(6 * var(--module));
  border-radius: 50%;
  background: rgba(18, 87, 79, .06);   /* --color-navy の6% */
}
@media screen and (max-width: 768px) {
  .c40-reality_content::before { margin-top: calc(0.32 * var(--module)); }
}

/* 見出しの角丸だけここに残す（色と余白は c40.css の .c40-ring_title） */
.c40-reality_content h3 { border-radius: calc(0.04 * var(--module)); }

/* 図より少し遅れて浮かび上がらせる */
.c40-reality_content p { --animation-delay: .8s; }
@media screen and (max-width: 768px) {
  .c40-reality_content p { text-align: center; }
}
/* ==========================================================================
   塊6 — sec05「2軸」（2026-09-19 自前実装）
   独立したセクション。2つのカードを中央の飾りで挟む構成。

   🔴 ここで外した指定（両方の状態・全幅で「消しても1pxも動かない」ことを確認済み）:
      ・.analy-sec05_content_point dl の SP 用 padding-left / width
        → 生成テーマ（c40-theme-a.css）が非メディア指定で打ち消していて、
          実際には効いていなかった。現状の見た目を保つため復活させない（§9-9）
   ========================================================================== */

/* 上から薄い色が落ちてくる背景。z-index:1 は ::before の飾りを背面に回すため */
.c40-axes {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(var(--color-light-blue), #fff);
}

/* SP だけ、左上に大きなぼかし円を敷いて奥行きを出す */
@media screen and (max-width: 768px) {
  .c40-axes::before {
    content: "";
    position: absolute;
    left: calc(3.12 * var(--module));
    top: calc(-1.36 * var(--module));
    z-index: -1;
    width: calc(6.6 * var(--module));
    height: calc(6.6 * var(--module));
    border-radius: 50%;
    background: hsla(0, 0%, 100%, .72);
    filter: blur(calc(0.8 * var(--module)));
  }
}

.c40-axes h2 {
  display: grid;
  gap: calc(0.16 * var(--module));
  text-align: center;
  white-space: nowrap;
}

/* 🔴 SP では nowrap を解除する。
   先方の文言は短くて nowrap でも収まったが、40キャリアの文言
   「その理由は、40代の転職に特化した」は SP 幅に収まらず、
   右端が画面外に出て文字が切れていた（2026-09-20 河田指摘）。
   ⚠ nowrap のままだと grid のトラックが中身の最長行まで広がるので、
     上の丸帯（.span1）も一緒に右へずれる。両方これで直る。 */
@media screen and (max-width: 768px) {
  .c40-axes h2 { white-space: normal; }
}

/* 見出しの上に乗る丸帯 */
.c40-axes h2 .span1 {
  position: relative;
  justify-self: center;
  padding: .16em 1.6em;
  border-radius: 16em;
  color: #fff;
  background: var(--color-text);
}

/* 丸帯の下の小さな三角（CTAの三角とは向きが逆） */
.c40-axes h2 .span1::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -1px);
  width: calc(0.12 * var(--module));
  height: calc(0.1 * var(--module));
  background: var(--color-text);
  clip-path: polygon(100% 0, 0 0, 50% 100%);
}

/* --- 白いカード ------------------------------------------------------------ */
.c40-axes_content {
  display: grid;
  place-content: center;
  place-items: center;
  gap: calc(0.4 * var(--module));
  margin-top: calc(0.56 * var(--module));
  padding-block: calc(0.4 * var(--module));
  border-radius: calc(0.1 * var(--module));
  background: #fff;
}

.c40-axes_content h3 {
  border-bottom: 1px solid;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c40-axes_content h3 { --fz-h5: calc(0.29 * var(--module)); }
}

/* --- 2つの箱と、その間の飾り ----------------------------------------------- */
.c40-axes_content_point {
  position: relative;
  display: flex;
  justify-content: center;
  gap: calc(1.04 * var(--module));
}
@media screen and (max-width: 768px) {
  .c40-axes_content_point { gap: calc(0.72 * var(--module)); }
}

/* 2つの箱の間に縦に入る飾り */
.c40-axes_content_point::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: calc(0.4 * var(--module));
  height: 100%;
  background: url("../img/c40/deco/cross.svg") no-repeat center/contain;
}

/* 箱。1つ目は明るい面、2つ目（dl+dl）は濃い面に反転させる */
.c40-axes_content_point dl {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  width: calc(2.96 * var(--module));
  height: calc(1.44 * var(--module));
  padding-left: calc(0.24 * var(--module));
  border-radius: calc(0.1 * var(--module));
  line-height: 1.36;
  font-weight: bold;
  background: radial-gradient(50% 50% at 50% 50%, #fff, #DDEEE9);
}

/* 箱の背後に薄く敷くアイコン */
.c40-axes_content_point dl::before {
  content: "";
  position: absolute;
  right: calc(0.12 * var(--module));
  top: 0;
  z-index: -1;
  width: calc(0.9 * var(--module));
  height: 100%;
  background: url("../img/c40/deco/axes-icon-reason.svg") no-repeat center/contain;
}

/* 2つ目の箱だけ色を反転 */
.c40-axes_content_point dl + dl { background: var(--grad-medal); }
.c40-axes_content_point dl + dl::before { background-image: url("../img/c40/deco/axes-icon-place.svg"); }
.c40-axes_content_point dl + dl dt {
  background: radial-gradient(50% 50% at 50% 50%, #fff, #DDEEE9);
  color: var(--color-text);
}
.c40-axes_content_point dl + dl dd { color: #fff; }

/* 左上にはみ出す丸い番号 */
.c40-axes_content_point dt {
  position: absolute;
  left: -.72em;
  top: -.72em;
  display: grid;
  place-content: center;
  width: 2.16em;
  height: 2.16em;
  border-radius: 50%;
  font-size: calc(0.25 * var(--module));
  color: #fff;
  background: var(--grad-medal);
}

.c40-axes_content_point dd { font-size: calc(0.31 * var(--module)); }

/* --- カード下の一文 -------------------------------------------------------- */
.c40-axes_content > p { text-align: center; }

.c40-axes_content > p .span2 {
  margin-inline: .32em;
  color: #fff;
  background: var(--color-red);
}
@media screen and (max-width: 768px) {
  .c40-axes_content > p .span2 { --fz-h4: calc(0.34 * var(--module)); }
}

.c40-axes_content > p .span3 {
  display: block;
  margin-top: .32em;
}
@media screen and (max-width: 768px) {
  .c40-axes_content > p .span3 {
    font-size: calc(0.18 * var(--module));
    margin-top: .8em;
  }
}

/* --- セクション末尾の一文 -------------------------------------------------- */
.c40-axes_footer {
  text-align: center;
  margin-top: calc(0.56 * var(--module));
}
@media screen and (max-width: 768px) {
  .c40-axes_footer .span2 { --fz-h4: calc(0.34 * var(--module)); }
}

.c40-axes_footer .span3 { border-bottom: 1px solid var(--color-red); }
/* --- sec07（代表メッセージ） -----------------------------------------------
   🔴 背景・余白・並べ方は c40.css が丸ごと持っている
      （`.analy-sec07, .webp .analy-sec07` の2セレクタで書いてある）。
      ここに残すのは並べ方の指定だけ。
      先方の背景写真4枚（img_analy-sec07_bg_*.png / .webp）への参照は外した。

   ⚠ これで `.webp` を使うルールは c40.css の1か所だけになった。
     そこを `.analy-sec07` 単独に直せば `js/vendor/modernizr-custom.js` を消せる。
     （c40.css は退避ページも読むので、この作業は全塊の完了後にまとめてやる）
   -------------------------------------------------------------------------- */
.c40-message { display: grid; }

@media screen and (max-width: 768px) {
  .c40-message h2 { --fz-h3: calc(0.55 * var(--module)); }
}

.c40-message_text { line-height: 1.84; }
@media screen and (max-width: 768px) {
  .c40-message_text { --fz-small: calc(0.27 * var(--module)); }
}

/* 🔴 段落間の余白は c40.css が持っている（0.4 × --module）。ここでは書かない。 */
/* ==========================================================================
   塊5 — sec10 FAQ（2026-09-19 自前実装）
   🔴 JSと連動する。c40.js が .is_js / .is_open を付け外しし、パネルの高さを
      直接いじる。CSS を触ったら開閉テスト（tools/check-faq.mjs）も必ず通す。

   🔴 ここで外した指定（両方の状態・全幅で「消しても1pxも動かない」ことを確認済み）:
      ・.analy-sec10_qa_a の SP 用 border-radius / padding-right / margin-bottom
        → 生成テーマ（c40-theme-a.css）が非メディア指定で打ち消していて、
          実際には効いていなかった。現状の見た目を保つため復活させない（§9-9）

   ⚠ 判定の注意（同じ間違いを繰り返さない）:
      ・開閉のどちらか一方の状態でしか測らないと、`.is_open` のルールを
        まるごと「死んでいる」と誤判定する。必ず両方の状態で測る
      ・transition が付いた要素は、宣言を外しても計算値が遷移中の値を返すので
        すぐには変わらない。測る前にトランジションを止める
   ========================================================================== */

.c40-faq h2 { text-align: center; }

/* 質問と回答の縦並び */
.c40-faq_qa {
  display: grid;
  gap: calc(0.16 * var(--module));
  width: min(calc(10.24 * var(--module)), 100%);
  margin: calc(0.32 * var(--module)) auto 0;
}

/* --- 開閉ボタン（質問の行そのもの） ---------------------------------------- */
.c40-faq_qa .toggle_btn.is_js {
  cursor: pointer;
  position: relative;
}

/* 右端の＋／×。閉じているときは＋、開くと回転して×になる */
.c40-faq_qa .toggle_btn.is_js .toggle_icon {
  position: absolute;
  right: calc(0.32 * var(--module));
  top: 50%;
  transform: translateY(-50%);
  width: calc(0.2 * var(--module));
  height: calc(0.2 * var(--module));
  transition: .4s;
}
@media screen and (max-width: 768px) {
  .c40-faq_qa .toggle_btn.is_js .toggle_icon {
    width: calc(0.35 * var(--module));
    height: calc(0.35 * var(--module));
    right: calc(0.12 * var(--module));
  }
}

/* ＋の2本の棒。::before が横棒、::after が縦棒 */
.c40-faq_qa .toggle_btn.is_js .toggle_icon::before,
.c40-faq_qa .toggle_btn.is_js .toggle_icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: calc(0.03 * var(--module));
  background: var(--color-blue);
  transition: .4s;
}
@media screen and (max-width: 768px) {
  .c40-faq_qa .toggle_btn.is_js .toggle_icon::before,
  .c40-faq_qa .toggle_btn.is_js .toggle_icon::after {
    height: calc(0.05 * var(--module));
  }
}

.c40-faq_qa .toggle_btn.is_js .toggle_icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いたとき: 全体を90度回し、横棒を消して「×」ではなく「−」に見せる */
.c40-faq_qa .toggle_btn.is_js.is_open .toggle_icon {
  transform: translateY(-50%) rotate(90deg);
}

.c40-faq_qa .toggle_btn.is_js.is_open .toggle_icon::before {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* --- 開閉するパネル --------------------------------------------------------
   高さは c40.js が直接指定する。ここは「はみ出しを隠す」役だけ。
   中身は高さの変化より少し遅れて浮かび上がらせる（.4s と .8s の差）。
   -------------------------------------------------------------------------- */
.c40-faq_qa .toggle_panel.is_js {
  overflow: hidden;
  transition: .4s;
}

.c40-faq_qa .toggle_panel.is_js > *,
.c40-faq_qa .toggle_panel.is_js::before {
  opacity: 0;
  transition: .8s;
}

.c40-faq_qa .toggle_panel.is_js.is_open > *,
.c40-faq_qa .toggle_panel.is_js.is_open::before {
  opacity: 1;
}

/* ⚠ この @media はここの位置のまま。上に動かすと上書き関係が変わる */
@media screen and (max-width: 768px) {
  .c40-faq_qa {
    margin-top: calc(0.56 * var(--module));
    gap: calc(0.24 * var(--module));
  }
}

/* --- 行頭の「Q」「A」 ------------------------------------------------------
   本文は明朝。左に絶対配置して、本文側は padding-inline で場所を空けている。
   -------------------------------------------------------------------------- */
.c40-faq_qa h3,
.c40-faq_qa_a { position: relative; }

.c40-faq_qa h3::before,
.c40-faq_qa_a::before {
  position: absolute;
  left: calc(0.28 * var(--module));
  width: 1em;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: calc(0.3 * var(--module));
  font-weight: 500;
  line-height: 1.04;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c40-faq_qa h3::before,
  .c40-faq_qa_a::before {
    font-size: calc(0.4 * var(--module));
    left: calc(0.16 * var(--module));
  }
}

.c40-faq_qa h3 { padding-inline: calc(0.72 * var(--module)); }

.c40-faq_qa h3::before {
  content: "Q";
  top: 0;
  color: var(--color-blue);
}

/* --- 回答の箱 --------------------------------------------------------------
   ⚠ SP 用の角丸・右余白・下余白は現在効いていないので書かない（上のコメント参照）。
   -------------------------------------------------------------------------- */
.c40-faq_qa_a {
  overflow: hidden;
  padding-inline: calc(0.8 * var(--module)) calc(0.48 * var(--module));
  margin-bottom: calc(0.24 * var(--module));
  border: 1px solid var(--color-light-blue);
  border-radius: calc(0.04 * var(--module));
  background: rgba(234, 243, 240, .16);   /* --color-pale-blue の16% */
}

.c40-faq_qa_a::before {
  content: "A";
  top: calc(0.24 * var(--module));
  color: var(--color-red);
}
@media screen and (max-width: 768px) {
  .c40-faq_qa_a::before { top: calc(0.28 * var(--module)); }
}

.c40-faq_qa_a p + p { margin-top: .32em; }

/* 箱の内側の上下余白。padding ではなく子要素の margin で取っている
   （パネルの高さ計算を c40.js がやるため、箱側に padding を入れない） */
.c40-faq_qa_a > *:first-child { margin-top: calc(0.24 * var(--module)); }
.c40-faq_qa_a > *:last-child  { margin-bottom: calc(0.24 * var(--module)); }