@charset "UTF-8";
/* ==========================================================================
   40キャリア — 自前スタイル
   style.css（先方由来）の後に読み込む。40キャリアで追加・差し替えた部品だけを
   ここに書く。先方CSSには手を入れない。
   最終的に style.css を自前コードへ置き換える際、このファイルが土台になる。
   単位は先方と同じ --module 系に揃える（PC: 6.51vw / SP: 13.021vw）。
   ========================================================================== */

/* --- テキストロゴ（先方のロゴSVGの置き換え） ------------------------------ */
.c40-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.04em;
  font-size: calc(0.3 * var(--module));
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-navy);
  white-space: nowrap;
}

/* サービスロゴのマーク（鳥）。ヘッダーとフッターにだけ入れる。
   🔴 sec01 の .c40-logo--intro には入れない（河田指示は「ヘッダーとフッターとファビコン」）。
      そのため CSS ではなく**マークアップ側で img を置くかどうか**を出し分けている。
   ⚠ style.css の `img { width:100%; height:auto }` に勝つため width/height を明示する。
   ⚠ .c40-logo は align-items: baseline なので、画像は align-self: center で中央に揃える。 */
.c40-logo_mark {
  flex: none;
  align-self: center;
  /* 🔴 style.css は `img { font-size: 0 }`。これを打ち消さないと、img に書いた em が
     すべて 0 になり **高さ0で消える**（実際にやらかした）。
     font-size: 1em は「親の font-size」を指すので、.c40-logo の文字サイズに揃う。 */
  font-size: 1em;
  width: auto;
  height: 1.4em;
  margin-right: 0.2em;
}

.c40-logo .ff_serif {
  font-size: 1.28em;
  font-weight: 600;
  color: var(--color-red);
}

.c40-logo--footer {
  font-size: calc(0.34 * var(--module));
}

@media screen and (max-width: 768px) {
  .c40-logo {
    font-size: calc(0.42 * var(--module));
  }
  .c40-logo--footer {
    font-size: calc(0.5 * var(--module));
  }
}

/* --- FV のメダル ----------------------------------------------------------
   先方は「90%」（2桁＋%）でメダル幅が決まっている。40キャリアは「1,000名」で
   文字数が増えるため、数字を縮めて1行に収める。 */
.c40-fv_content_text2 dd .span2 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
  font-size: 150%;
}

.c40-fv_content_text2 dd .span3 {
  font-size: 150%;
  letter-spacing: -0.02em;
}

/* --- sec01: intro（lifeshiftlab.jp トップの構成を踏襲・文言は独自） -------
   見出し2段 → 統計リード＋出典 → 悩みの吹き出し2枚 → などなど… →
   背景文＋定義文 → 締め＋ロゴ。

   先方の sec01 は「テキスト列 + CM動画列」の2カラムで、テキスト列の幅が
   4.96module（PCで約413px）に固定されている。動画を外したのに列幅がそのままで
   吹き出しが狭く、行が割れていた。1カラムに変えて全幅を使う。 */
.c40-opening_content {
  width: min(calc(10.08 * var(--module)), 90%);
}

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

.c40-intro_header {
  display: grid;
  gap: calc(0.06 * var(--module));
}

.c40-intro_sub {
  font-size: calc(0.28 * var(--module));
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-blue);
}

.c40-intro_main {
  font-size: calc(0.52 * var(--module));
  font-weight: 900;
  line-height: 1.35;
  color: var(--color-navy);
}

.c40-intro_lead {
  max-width: calc(9 * var(--module));
}

.c40-intro_lead_text {
  font-size: calc(0.19 * var(--module));
  font-weight: 500;
  line-height: 1.9;
}

.c40-intro_sup {
  font-size: 0.7em;
  vertical-align: super;
}

.c40-intro_lead_note {
  margin-top: calc(0.06 * var(--module));
  font-size: calc(0.13 * var(--module));
  font-weight: 400;
  line-height: 1.6;
  opacity: 0.72;
}

/* 悩みの吹き出し。原本は写真の上に吹き出し画像を重ねている。
   写真が未入手なので、いまは吹き出しだけを角丸パネルとして置く。
   尾は border トリックで作る（画像アセットを使わない）。 */
.c40-intro_cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(0.32 * var(--module));
  width: min(calc(8 * var(--module)), 100%);
}

.c40-intro_card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(1.2 * var(--module));
  padding: calc(0.24 * var(--module)) calc(0.16 * var(--module));
  border-radius: calc(0.16 * var(--module));
  background: #fff;
  box-shadow: 0 calc(0.03 * var(--module)) calc(0.16 * var(--module)) rgba(31, 59, 95, 0.12);
}

.c40-intro_card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 0;
  border-inline: calc(0.1 * var(--module)) solid rgba(0, 0, 0, 0);
  border-top: calc(0.12 * var(--module)) solid #fff;
  transform: translateX(-50%);
}

.c40-intro_speech {
  font-size: calc(0.24 * var(--module));
  font-weight: 700;
  line-height: 1.65;
  color: var(--color-navy);
}

.c40-intro_note {
  margin-top: calc(-0.12 * var(--module));
  font-size: calc(0.18 * var(--module));
  font-weight: 700;
  color: var(--color-blue);
}

.c40-intro_bottom {
  display: grid;
  justify-items: center;
  gap: calc(0.08 * var(--module));
  padding-top: calc(0.16 * var(--module));
}

.c40-intro_bottom_text {
  font-size: calc(0.24 * var(--module));
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-navy);
}

.c40-intro_accent {
  background: linear-gradient(rgba(0, 0, 0, 0) 62%, #ffe9a8 62%);
  color: var(--color-red);
}

.c40-intro_catch {
  margin-top: calc(0.08 * var(--module));
  font-size: calc(0.3 * var(--module));
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-blue);
}

.c40-logo--intro {
  margin-top: calc(0.08 * var(--module));
  font-size: calc(0.44 * var(--module));
}

@media screen and (max-width: 768px) {
  .c40-intro {
    gap: calc(0.4 * var(--module));
  }
  .c40-intro_sub {
    font-size: calc(0.34 * var(--module));
  }
  .c40-intro_main {
    font-size: calc(0.66 * var(--module));
  }
  .c40-intro_lead_text {
    font-size: calc(0.25 * var(--module));
  }
  .c40-intro_lead_note {
    font-size: calc(0.18 * var(--module));
  }
  .c40-intro_cards {
    grid-template-columns: 1fr;
    gap: calc(0.32 * var(--module));
    width: 100%;
  }
  .c40-intro_card {
    min-height: 0;
    padding: calc(0.3 * var(--module));
  }
  .c40-intro_speech {
    font-size: calc(0.32 * var(--module));
  }
  .c40-intro_note {
    margin-top: 0;
    font-size: calc(0.24 * var(--module));
  }
  .c40-intro_bottom_text {
    font-size: calc(0.3 * var(--module));
  }
  .c40-intro_catch {
    font-size: calc(0.38 * var(--module));
  }
  .c40-logo--intro {
    font-size: calc(0.58 * var(--module));
  }
}

/* --- CTA: マニュアル4冊の書影 → 持ち帰れる4つ ------------------------------
   先方は書影を扇状に重ねる（負のmargin＋交互のmargin-top）。テキストカードでは
   読めなくなるので、その段組みを打ち消す。
   さらに、先方は「書影」と「説明テキスト」を左右2カラムに並べる前提でグリッドが
   組まれている。テキストカードだと幅が半分しか取れず字が小さくなるので、
   両方を全幅に変えて上下に積む。ここが「見やすさ」の一番の効き所。 */
.c40-cta_content {
  grid-template-columns: 1fr;
}

.c40-cta_content h3,
.c40-cta_content .c40-takeaway,
.c40-cta_content .c40-cta_content_text {
  grid-column: 1 / -1;
  width: 100%;
}

.c40-takeaway {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: calc(0.16 * var(--module));
}

.c40-takeaway li,
.c40-takeaway li:nth-child(2n),
.c40-takeaway li:nth-child(2n + 1) {
  width: auto;
  margin-inline: 0;
  margin-top: 0;
}

/* カード本体: 上に番号の丸バッジ、次に動詞、最後に持ち帰るもの。
   3段の役割がひと目で分かるよう、動詞と説明のサイズ差をはっきりつける。 */
.c40-takeaway li {
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  gap: calc(0.08 * var(--module));
  padding: calc(0.26 * var(--module)) calc(0.16 * var(--module)) calc(0.24 * var(--module));
  border-radius: calc(0.12 * var(--module));
  background: #fff;
  box-shadow: 0 calc(0.03 * var(--module)) calc(0.16 * var(--module)) rgba(31, 59, 95, 0.14);
  text-align: center;
}

.c40-takeaway_no {
  display: grid;
  place-content: center;
  width: calc(0.46 * var(--module));
  height: calc(0.46 * var(--module));
  border-radius: 50%;
  background: var(--grad-medal);
  color: #fff;
  font-size: calc(0.2 * var(--module));
  font-weight: 600;
  line-height: 1;
}

.c40-takeaway_verb {
  font-size: calc(0.3 * var(--module));
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-navy);
}

.c40-takeaway_verb::after {
  content: "";
  display: block;
  width: calc(0.32 * var(--module));
  height: 2px;
  margin: calc(0.08 * var(--module)) auto 0;
  background: var(--color-red);
}

.c40-takeaway_text {
  align-self: start;
  font-size: calc(0.17 * var(--module));
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-blue);
}

@media screen and (max-width: 768px) {
  /* SPは2列。4列だと1行あたり6〜7文字になって折り返しが崩れる。 */
  .c40-takeaway {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(0.2 * var(--module));
  }
  .c40-takeaway li {
    padding: calc(0.32 * var(--module)) calc(0.16 * var(--module));
    gap: calc(0.1 * var(--module));
  }
  .c40-takeaway_no {
    width: calc(0.62 * var(--module));
    height: calc(0.62 * var(--module));
    font-size: calc(0.28 * var(--module));
  }
  .c40-takeaway_verb {
    font-size: calc(0.42 * var(--module));
  }
  .c40-takeaway_verb::after {
    width: calc(0.44 * var(--module));
  }
  .c40-takeaway_text {
    font-size: calc(0.23 * var(--module));
  }
}

/* --- sec04: サンプル注記 ---------------------------------------------------
   事例・お声はすべて架空。実データに差し替えるまで、この注記は絶対に外さない。 */
.c40-sample-note {
  max-width: calc(9 * var(--module));
  margin: calc(0.24 * var(--module)) auto 0;
  padding: calc(0.12 * var(--module)) calc(0.2 * var(--module));
  border-radius: calc(0.08 * var(--module));
  background: #fff4d6;
  font-size: calc(0.15 * var(--module));
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: #8a5a00;
}

.c40-sample-note strong {
  color: var(--color-red);
}

.c40-footer-note {
  text-align: center;
}

@media screen and (max-width: 768px) {
  .c40-sample-note {
    max-width: none;
    font-size: calc(0.22 * var(--module));
  }
}

/* --- sec06 point01: コーチの実写 → 匿名の役割パネル ------------------------
   架空・匿名の肩書に人物写真を当てない（実在の人物に見えてしまうため）。 */
.c40-coach {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: calc(0.14 * var(--module));
  border-radius: 50%;
  background: var(--color-pale-blue);
  text-align: center;
}

.c40-coach_role {
  font-size: calc(0.16 * var(--module));
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-blue);
}

@media screen and (max-width: 768px) {
  .c40-coach_role {
    font-size: calc(0.24 * var(--module));
  }
}

/* --- sec06 point02: 4職種 -------------------------------------------------- */
.c40-jobs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(0.12 * var(--module));
  width: 100%;
}

.c40-jobs li {
  display: flex;
  flex-direction: column;
  gap: calc(0.04 * var(--module));
  padding: calc(0.16 * var(--module));
  border-radius: calc(0.1 * var(--module));
  background: #fff;
  box-shadow: 0 0 calc(0.16 * var(--module)) rgba(33, 65, 105, 0.08);
}

.c40-jobs_name {
  font-size: calc(0.22 * var(--module));
  font-weight: 900;
  line-height: 1.3;
  color: var(--color-blue);
}

.c40-jobs_text {
  font-size: calc(0.14 * var(--module));
  font-weight: 500;
  line-height: 1.65;
}

@media screen and (max-width: 768px) {
  .c40-jobs {
    grid-template-columns: 1fr;
  }
  .c40-jobs_name {
    font-size: calc(0.3 * var(--module));
  }
  .c40-jobs_text {
    font-size: calc(0.21 * var(--module));
  }
}

/* --- sec06 point02 まとめ: 「転職成功率90%」の枠を文言に置き換え ------------ */
.c40-result dd .span1 {
  font-size: calc(0.44 * var(--module));
  line-height: 1.2;
}

@media screen and (max-width: 768px) {
  .c40-result dd .span1 {
    font-size: calc(0.56 * var(--module));
  }
}

/* --- sec07: 代表 ----------------------------------------------------------- */
.c40-ceo {
  max-width: calc(8 * var(--module));
  margin: calc(0.4 * var(--module)) auto 0;
  padding: calc(0.26 * var(--module)) calc(0.3 * var(--module));
  border-radius: calc(0.12 * var(--module));
  background: #fff;
  text-align: center;
}

.c40-ceo_role {
  font-size: calc(0.15 * var(--module));
  font-weight: 700;
  color: var(--color-blue);
}

.c40-ceo_name {
  margin-top: calc(0.04 * var(--module));
  font-size: calc(0.3 * var(--module));
  font-weight: 900;
  line-height: 1.3;
  color: var(--color-navy);
}

.c40-ceo_bio {
  margin-top: calc(0.12 * var(--module));
  line-height: 1.8;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .c40-ceo {
    max-width: none;
  }
  .c40-ceo_role {
    font-size: calc(0.22 * var(--module));
  }
  .c40-ceo_name {
    font-size: calc(0.44 * var(--module));
  }
}

/* --- sec08: 属性の数字 -----------------------------------------------------
   🔴 **以下は旧 sec08（.analy-sec08）用の死にコード。index.html からは参照されていない。**
   2026-09-18 に .c40-wfh（B案）へ置き換えたため。残してあるのは
     - theme-b.html（自動生成・まだ旧マークアップのまま）がまだ参照しているから
     - 旧版に戻したくなったときのため
   theme-b.html を再生成したら、このブロックごと削除してよい。
   対象: .c40-stat / .c40-remote_jobs / .c40-remote_note / .analy-sec08*
   --------------------------------------------------------------------- */
.c40-stat {
  font-size: calc(0.6 * var(--module));
  font-weight: 600;
  line-height: 1.2;
}

.c40-stat span {
  font-size: calc(0.22 * var(--module));
  font-weight: 700;
  color: var(--color-navy);
}

@media screen and (max-width: 768px) {
  .c40-stat {
    font-size: calc(0.78 * var(--module));
  }
  .c40-stat span {
    font-size: calc(0.3 * var(--module));
  }
}

/* ==========================================================================
   ステップ2の追加分（zapass / careerchange の構成を取り込んだ部品）
   ========================================================================== */

/* --- c40-why: 失敗パターンの命名 ＋ 他手段の名指し否定 ---------------------
   zapass §13-1 の ⑥⑦。位置は 実績（反証）→ ここ → 2軸（自社の型）。 */
.c40-why {
  background: linear-gradient(180deg, #fff, var(--color-pale-blue));
}

.c40-why_inner {
  width: min(calc(10.08 * var(--module)), 90%);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: calc(0.4 * var(--module));
  text-align: center;
}

.c40-why_head {
  display: grid;
  gap: calc(0.08 * var(--module));
}

.c40-why_head .span1 {
  font-weight: 700;
  color: var(--color-blue);
}

.c40-why_head .span2 {
  font-weight: 900;
  line-height: 1.4;
}

.c40-why_num {
  font-size: 1.32em;
  font-weight: 600;
  color: var(--color-red);
  margin-inline: 0.08em;
}

.c40-why_types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(0.2 * var(--module));
  width: 100%;
}

.c40-why_types li {
  display: grid;
  align-content: start;
  gap: calc(0.1 * var(--module));
  padding: calc(0.28 * var(--module)) calc(0.2 * var(--module));
  border-radius: calc(0.12 * var(--module));
  background: #fff;
  box-shadow: 0 calc(0.03 * var(--module)) calc(0.16 * var(--module)) rgba(31, 59, 95, 0.12);
  text-align: left;
}

.c40-why_type_name {
  position: relative;
  padding-bottom: calc(0.08 * var(--module));
  font-size: calc(0.24 * var(--module));
  font-weight: 900;
  line-height: 1.35;
  color: var(--color-navy);
}

.c40-why_type_name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(0.4 * var(--module));
  height: 2px;
  background: var(--color-red);
}

.c40-why_type_text {
  font-size: calc(0.155 * var(--module));
  font-weight: 500;
  line-height: 1.85;
}

.c40-why_sub {
  font-size: calc(0.3 * var(--module));
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-navy);
}

.c40-why_compare {
  display: grid;
  gap: calc(0.12 * var(--module));
  width: 100%;
  text-align: left;
}

.c40-why_compare dl {
  display: grid;
  grid-template-columns: calc(2.6 * var(--module)) 1fr;
  align-items: center;
  gap: calc(0.2 * var(--module));
  padding: calc(0.2 * var(--module)) calc(0.24 * var(--module));
  border-radius: calc(0.1 * var(--module));
  background: rgba(255, 255, 255, 0.85);
}

.c40-why_compare dt {
  font-size: calc(0.19 * var(--module));
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-blue);
}

.c40-why_compare dd {
  font-size: calc(0.155 * var(--module));
  font-weight: 500;
  line-height: 1.85;
}

.c40-why_close {
  display: grid;
  gap: calc(0.06 * var(--module));
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  .c40-why_inner {
    gap: calc(0.48 * var(--module));
  }
  .c40-why_types {
    grid-template-columns: 1fr;
    gap: calc(0.24 * var(--module));
  }
  .c40-why_type_name {
    font-size: calc(0.34 * var(--module));
  }
  .c40-why_type_text,
  .c40-why_compare dd {
    font-size: calc(0.23 * var(--module));
  }
  .c40-why_sub {
    font-size: calc(0.38 * var(--module));
  }
  .c40-why_compare dl {
    grid-template-columns: 1fr;
    gap: calc(0.08 * var(--module));
  }
  .c40-why_compare dt {
    font-size: calc(0.28 * var(--module));
  }
}

/* --- c40-before: 申込直前の不安除去（zapass §13-1 の ⑱） ------------------
   解析書が「一番真似る価値がある」とした型。CTAの直前に置く。 */
.c40-before {
  background: #fff;
}

.c40-before_inner {
  width: min(calc(9 * var(--module)), 90%);
  margin-inline: auto;
  display: grid;
  gap: calc(0.4 * var(--module));
}

.c40-before_head {
  display: grid;
  gap: calc(0.08 * var(--module));
  text-align: center;
}

.c40-before_head .span1 {
  font-weight: 700;
  color: var(--color-blue);
}

.c40-before_head .span2 {
  font-weight: 900;
  line-height: 1.4;
}

.c40-before_steps {
  display: grid;
  gap: calc(0.16 * var(--module));
}

.c40-before_steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: calc(0.2 * var(--module));
  padding: calc(0.24 * var(--module)) calc(0.28 * var(--module));
  border-radius: calc(0.12 * var(--module));
  background: var(--color-pale-blue);
}

.c40-before_no {
  display: grid;
  place-content: center;
  width: calc(0.44 * var(--module));
  height: calc(0.44 * var(--module));
  border-radius: 50%;
  background: var(--grad-medal);
  color: #fff;
  font-size: calc(0.19 * var(--module));
  font-weight: 600;
  line-height: 1;
}

/* 「最初の15分」のような時間ラベル。見出しの頭に小さく置く。 */
.c40-before_time {
  display: inline-block;
  margin-right: calc(0.12 * var(--module));
  padding: 0.16em 0.7em;
  border-radius: 16em;
  background: var(--color-red);
  color: #fff;
  font-size: calc(0.15 * var(--module));
  font-weight: 700;
  line-height: 1.4;
  vertical-align: 0.14em;
  white-space: nowrap;
}

.c40-before_t {
  font-size: calc(0.22 * var(--module));
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-navy);
}

.c40-before_d {
  margin-top: calc(0.06 * var(--module));
  font-size: calc(0.155 * var(--module));
  font-weight: 500;
  line-height: 1.85;
}

.c40-before_note {
  font-size: calc(0.15 * var(--module));
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  opacity: 0.8;
}

@media screen and (max-width: 768px) {
  .c40-before_steps li {
    gap: calc(0.16 * var(--module));
    padding: calc(0.28 * var(--module)) calc(0.24 * var(--module));
  }
  .c40-before_no {
    width: calc(0.58 * var(--module));
    height: calc(0.58 * var(--module));
    font-size: calc(0.26 * var(--module));
  }
  .c40-before_t {
    font-size: calc(0.3 * var(--module));
  }
  .c40-before_time {
    display: block;
    width: fit-content;
    margin: 0 0 calc(0.1 * var(--module));
    font-size: calc(0.21 * var(--module));
    vertical-align: baseline;
  }
  .c40-before_d,
  .c40-before_note {
    font-size: calc(0.22 * var(--module));
  }
}

/* --- SP下部の固定CTAバー（careerchange §3-7 / zapass §13-5） --------------
   tenshoku には無いが、careerchange と zapass の両方が持っている。
   40キャリアの読者はSP主体なので効く。 */
.c40-fixedbar {
  display: none;
}

@media screen and (max-width: 768px) {
  .c40-fixedbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: block;
    padding: calc(0.16 * var(--module)) calc(0.24 * var(--module))
      max(calc(0.16 * var(--module)), env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    box-shadow: 0 calc(-0.02 * var(--module)) calc(0.2 * var(--module)) rgba(31, 59, 95, 0.16);
  }

  .c40-fixedbar_btn {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: calc(0.04 * var(--module)) calc(0.16 * var(--module));
    padding: calc(0.16 * var(--module)) calc(0.24 * var(--module));
    border-radius: 16em;
    background: var(--grad-red);
    box-shadow: 0 calc(0.04 * var(--module)) calc(0.2 * var(--module)) rgba(215, 41, 84, 0.32);
    color: #fff;
    text-decoration: none;
  }

  .c40-fixedbar_free {
    grid-row: 1 / 3;
    display: grid;
    place-content: center;
    width: calc(0.62 * var(--module));
    height: calc(0.62 * var(--module));
    border-radius: 50%;
    background: #fff;
    color: var(--color-red);
    font-size: calc(0.24 * var(--module));
    font-weight: 900;
    line-height: 1;
  }

  .c40-fixedbar_main {
    font-size: calc(0.3 * var(--module));
    font-weight: 900;
    line-height: 1.2;
  }

  .c40-fixedbar_sub {
    font-size: calc(0.19 * var(--module));
    font-weight: 700;
    line-height: 1.2;
    opacity: 0.92;
  }

  /* バーと重複するのでヘッダーのボタンはSPで隠す（zapass の判断を踏襲）。
     フッターがバーに隠れないよう下に余白を足す。 */
  .c40-header_btn {
    display: none;
  }

  .c40-footer {
    padding-bottom: calc(1.8 * var(--module));
  }
}

/* --- sec03: 悩みの図（zapass の PROBLEM セクションのデザインを流用） --------
   骨格は3点: ①濃いティールのグラデ地 ②細い円の周囲にピル型カードを配置し中央に見出し
   ③ピルは半透明＋左にアイコンの丸。
   zapass は5項目だが40キャリアは3項目なので、円周を120度ずつに割る。
   SPでは縦積み（zapass も SP は縦積み）。 */
.c40-ring_wrap {
  position: relative;
  margin-top: calc(0.48 * var(--module));
  padding: calc(0.72 * var(--module)) calc(0.4 * var(--module)) calc(0.64 * var(--module));
  border-radius: calc(0.2 * var(--module));
  background: linear-gradient(112deg, #1c4b4e 0%, #0e292c 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* 元CSSの .analy-sec03_content h3 が青帯を付けてくるので詳細度で上書きする */
.c40-ring_wrap .c40-ring_title {
  background: none;
  padding: 0;
  margin: 0;
  font-size: calc(0.3 * var(--module));
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
}

.c40-ring {
  position: relative;
  width: min(calc(4.2 * var(--module)), 100%);
  aspect-ratio: 1 / 1;
  margin: calc(0.4 * var(--module)) auto 0;
  display: grid;
  place-items: center;
}

/* 中央の細い円 */
.c40-ring_circle {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(198, 214, 215, 0.45);
  border-radius: 50%;
}

.c40-ring_center {
  position: relative;
  z-index: 1;
  font-size: calc(0.26 * var(--module));
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
}

.c40-ring_items {
  position: absolute;
  inset: 0;
}

.c40-ring_item {
  position: absolute;
  display: flex;
  align-items: center;
  gap: calc(0.12 * var(--module));
  padding: calc(0.1 * var(--module)) calc(0.22 * var(--module)) calc(0.1 * var(--module)) calc(0.1 * var(--module));
  border: 1px solid rgba(198, 214, 215, 0.28);
  border-radius: 16em;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  text-align: left;
}

.c40-ring_item .c40-ring_name {
  max-width: calc(2.25 * var(--module));
}

/* 120度ずつ: 上 / 右下 / 左下 */
.c40-ring_item--1 {
  top: 0;
  left: 50%;
  transform: translate(-50%, -10%);
}

.c40-ring_item--2 {
  right: 0;
  bottom: 2%;
  transform: translate(62%, 0);
}

.c40-ring_item--3 {
  left: 0;
  bottom: 2%;
  transform: translate(-62%, 0);
}

.c40-ring_icon {
  display: grid;
  place-content: center;
  flex: none;
  width: calc(0.4 * var(--module));
  height: calc(0.4 * var(--module));
  border-radius: 50%;
  background: #608284;
  color: #fff;
}

.c40-ring_icon svg {
  width: calc(0.2 * var(--module));
  height: calc(0.2 * var(--module));
}

.c40-ring_body {
  display: grid;
  gap: 0.1em;
}

.c40-ring_no {
  font-size: calc(0.13 * var(--module));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: #c6d6d7;
}

.c40-ring_name {
  font-size: calc(0.18 * var(--module));
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

.c40-ring_close {
  display: grid;
  gap: calc(0.06 * var(--module));
  margin-top: calc(0.4 * var(--module));
}

.c40-ring_close_sub {
  font-size: calc(0.2 * var(--module));
  font-weight: 700;
  color: #c6d6d7;
}

.c40-ring_close_main {
  justify-self: center;
  padding: 0.1em 0.5em;
  background: #fff;
  font-size: calc(0.32 * var(--module));
  font-weight: 900;
  line-height: 1.5;
  color: #0e292c;
}

@media screen and (max-width: 768px) {
  /* SPは円をやめて縦積み（zapass も SP は縦積み）。
     ピルを絶対配置のまま縮めると文字が潰れる。 */
  .c40-ring_wrap {
    padding: calc(0.56 * var(--module)) calc(0.28 * var(--module));
  }

  .c40-ring_wrap .c40-ring_title {
    font-size: calc(0.38 * var(--module));
  }

  .c40-ring {
    width: 100%;
    aspect-ratio: auto;
    display: block;
    margin-top: calc(0.4 * var(--module));
  }

  .c40-ring_circle {
    display: none;
  }

  .c40-ring_center {
    font-size: calc(0.4 * var(--module));
  }

  .c40-ring_items {
    position: static;
    display: grid;
    gap: calc(0.16 * var(--module));
    margin-top: calc(0.32 * var(--module));
  }

  .c40-ring_item .c40-ring_name {
    max-width: none;
  }

  .c40-ring_item,
  .c40-ring_item--1,
  .c40-ring_item--2,
  .c40-ring_item--3 {
    position: static;
    transform: none;
    inset: auto;
    border-radius: calc(0.16 * var(--module));
    padding: calc(0.2 * var(--module));
    white-space: normal;
  }

  .c40-ring_icon {
    width: calc(0.62 * var(--module));
    height: calc(0.62 * var(--module));
  }

  .c40-ring_icon svg {
    width: calc(0.3 * var(--module));
    height: calc(0.3 * var(--module));
  }

  .c40-ring_no {
    font-size: calc(0.19 * var(--module));
  }

  .c40-ring_name {
    font-size: calc(0.26 * var(--module));
  }

  .c40-ring_close_sub {
    font-size: calc(0.26 * var(--module));
  }

  .c40-ring_close_main {
    font-size: calc(0.4 * var(--module));
  }
}

/* --- 旧 sec08: 在宅（フルリモート）の集約セクション【死にコード】 ----------
   🔴 **以下は旧 sec08（.analy-sec08）用の死にコード。index.html からは参照されていない。**
   2026-09-18 に .c40-wfh（B案）へ置き換えたため。残してあるのは
     - theme-b.html（自動生成・まだ旧マークアップのまま）がまだ参照しているから
     - 旧版に戻したくなったときのため
   theme-b.html を再生成したら、このブロックごと削除してよい。
   対象: .c40-stat / .c40-remote_jobs / .c40-remote_note / .analy-sec08*
   ---------------------------------------------------------------------
   フルリモートの訴求はページ内に散らさず、ここ1箇所に集めた（河田指示 2026-09-18）。 */
.c40-remote_jobs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(0.1 * var(--module));
}

.c40-remote_jobs li {
  padding: calc(0.14 * var(--module)) calc(0.12 * var(--module));
  border-radius: calc(0.08 * var(--module));
  background: var(--color-pale-blue);
  font-size: calc(0.2 * var(--module));
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  color: var(--color-blue);
}

.c40-remote_note {
  margin-top: calc(0.12 * var(--module));
  line-height: 1.85;
}

/* 「40・50代」は数字と記号が混ざるので、記号だけ小さくして間延びを防ぐ */
.c40-stat span {
  font-size: calc(0.22 * var(--module));
  font-weight: 700;
  color: var(--color-navy);
}

@media screen and (max-width: 768px) {
  .c40-remote_jobs {
    gap: calc(0.14 * var(--module));
  }
  .c40-remote_jobs li {
    font-size: calc(0.28 * var(--module));
  }
  .c40-stat span {
    font-size: calc(0.3 * var(--module));
  }
}

/* --- 旧 sec08 のレイアウト調整【死にコード】 -------------------------------
   🔴 **以下は旧 sec08（.analy-sec08）用の死にコード。index.html からは参照されていない。**
   2026-09-18 に .c40-wfh（B案）へ置き換えたため。残してあるのは
     - theme-b.html（自動生成・まだ旧マークアップのまま）がまだ参照しているから
     - 旧版に戻したくなったときのため
   theme-b.html を再生成したら、このブロックごと削除してよい。
   対象: .c40-stat / .c40-remote_jobs / .c40-remote_note / .analy-sec08*
   ---------------------------------------------------------------------
   先方の sec08 は「円グラフ3枚」を置く前提のグリッド（2列・各セルは中央寄せの
   小さな箱）。40キャリアは文章とリストを入れたので、そのままだと
   ・4職種が左半分に2×2で寄り、右の説明文とのバランスが崩れる
   ・年代カードだけ中身が少なく、下に大きな空きができる
   ・見出し帯の幅が中身によってバラつく
   となる。カードの見た目（白・角丸・濃紺の見出し帯）は変えずに、
   中の並びと寸法だけ整える。 */
.c40-sec08_content {
  gap: calc(0.24 * var(--module));
}

.c40-sec08_content .data1 {
  grid-column: 1 / 3;
}

.c40-sec08_content_data {
  gap: calc(0.2 * var(--module));
  padding: calc(0.32 * var(--module));
}

/* 見出し帯は中身の幅に引っ張られないよう、中央に固定幅で置く */
.c40-sec08_content_data h4 {
  justify-self: center;
  white-space: normal;
  text-align: center;
}

/* data1: 「4職種を横一列」→「説明文」の縦積みにする（左右2分割をやめる） */
.c40-sec08_content_data.data1 {
  grid-template-columns: 1fr;
  justify-items: stretch;
}

/* 元CSSは h4 に grid-column:1/3 を当てており、これが暗黙の2列目を作って
   「4職種」と「説明文」を左右に割ってしまう。3つとも全幅に固定して縦積みにする。 */
.c40-sec08_content_data.data1 h4,
.c40-sec08_content_data.data1 .data1_content1,
.c40-sec08_content_data.data1 .data1_content2 {
  grid-column: 1 / -1;
}

/* 元ルールが .data1 .data1_content1 に固定幅 3.64module と justify-self:end を
   当てているので、同じ深さで打ち消す。ul の 2 列指定も同様。 */
.c40-sec08_content_data.data1 .data1_content1,
.c40-sec08_content_data.data1 .data1_content2 {
  width: 100%;
  justify-self: stretch;
}

.c40-sec08_content_data.data1 .data1_content1 ul.c40-remote_jobs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(0.12 * var(--module));
  white-space: normal;
}

.c40-sec08_content_data.data1 .data1_content1 ul.c40-remote_jobs li {
  padding: calc(0.16 * var(--module)) calc(0.08 * var(--module));
  border-radius: calc(0.08 * var(--module));
  background: var(--color-pale-blue);
  font-size: calc(0.2 * var(--module));
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  color: var(--color-blue);
}

/* 4職種の中黒（元ルール .data1 .data1_content1 li::before）を消す */
.c40-sec08_content_data.data1 .data1_content1 .c40-remote_jobs li::before {
  content: none;
}

.c40-sec08_content_data.data1 .data1_content2 p {
  background: none;
  text-align: center;
  line-height: 1.9;
}

/* data2 / data3 も「左にテキスト・右に円グラフ」の2列前提で、
   見出しと本文に width:min(2module,100%) の固定幅が当たっている。
   グラフを置かないので、1列・全幅に戻す。 */
.c40-sec08_content_data.data2,
.c40-sec08_content_data.data3 {
  grid-template-columns: 1fr;
  grid-template-rows: none;
  align-items: start;
  justify-content: stretch;
  column-gap: 0;
}

.c40-sec08_content_data.data2 > *,
.c40-sec08_content_data.data3 > * {
  grid-column: 1 / -1;
}

.c40-sec08_content_data.data2 h4,
.c40-sec08_content_data.data2 p,
.c40-sec08_content_data.data3 h4,
.c40-sec08_content_data.data3 p {
  width: auto;
}

.c40-sec08_content_data.data2 {
  align-content: center;
}

.c40-sec08_content_data.data3 {
  align-content: start;
}

/* 先方は p を薄い箱にして中央寄せするが、文章が入ると読みにくい。
   文章系は背景を外す。 */
.c40-sec08_content_data p {
  background: none;
}

.c40-sec08_content_data.data3 p {
  text-align: left;
  line-height: 1.95;
}

.c40-remote_note {
  margin-top: calc(0.04 * var(--module));
  opacity: 0.86;
}

/* 「40・50代」。記号と単位が別行に落ちないよう1行固定。 */
.c40-stat {
  white-space: nowrap;
  text-align: center;
  line-height: 1.1;
}

.c40-stat span {
  font-size: calc(0.28 * var(--module));
  vertical-align: 0.1em;
}

@media screen and (max-width: 768px) {
  .c40-sec08_content {
    grid-template-columns: 1fr;
  }
  .c40-sec08_content .data1,
  .c40-sec08_content h3 {
    grid-column: 1 / -1;
  }
  .c40-sec08_content_data.data1 .data1_content1 ul.c40-remote_jobs {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(0.14 * var(--module));
  }
  .c40-sec08_content_data.data1 .data1_content1 ul.c40-remote_jobs li {
    font-size: calc(0.28 * var(--module));
  }
  .c40-stat span {
    font-size: calc(0.36 * var(--module));
  }
}

/* --- CTA: 持ち帰れるもの（大きく1つ ＋ 小さく3つ） -------------------------
   4つ横並びだと「ぱっと見でメリットが分からない」ため、
   いちばん強い1つ（その場で書き換わった職務経歴書）だけを大きく出し、
   残り3つは下のチェックリストに落とした（河田指示 2026-09-18）。
   .c40-takeaway（4カード）はもう使っていないが、戻せるようCSSは残してある。 */
.c40-hero {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: calc(0.14 * var(--module));
  padding: calc(0.4 * var(--module)) calc(0.32 * var(--module));
  border-radius: calc(0.14 * var(--module));
  background: #fff;
  box-shadow: 0 calc(0.04 * var(--module)) calc(0.24 * var(--module)) rgba(11, 59, 53, 0.14);
  text-align: center;
}

.c40-hero_label {
  padding: 0.2em 1.2em;
  border-radius: 16em;
  background: var(--color-text);
  color: #fff;
  font-size: calc(0.16 * var(--module));
  font-weight: 700;
  line-height: 1.4;
}

.c40-hero_main {
  display: grid;
  gap: calc(0.04 * var(--module));
}

.c40-hero_sub {
  font-size: calc(0.26 * var(--module));
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-blue);
}

/* ここがページで一番大きい約束。下線はアクセント色の帯で受ける。 */
.c40-hero_big {
  position: relative;
  display: inline-block;
  padding-bottom: calc(0.1 * var(--module));
  font-size: calc(0.56 * var(--module));
  font-weight: 900;
  line-height: 1.35;
  color: var(--color-text);
}

.c40-hero_big::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: calc(0.06 * var(--module));
  border-radius: 16em;
  background: var(--color-red);
  transform: translateX(-50%);
}

.c40-hero_note {
  font-size: calc(0.16 * var(--module));
  font-weight: 500;
  line-height: 1.9;
}

@media screen and (max-width: 768px) {
  .c40-hero {
    padding: calc(0.44 * var(--module)) calc(0.28 * var(--module));
    gap: calc(0.18 * var(--module));
  }
  .c40-hero_label {
    font-size: calc(0.22 * var(--module));
  }
  .c40-hero_sub {
    font-size: calc(0.3 * var(--module));
  }
  .c40-hero_big {
    font-size: calc(0.62 * var(--module));
  }
  .c40-hero_note {
    font-size: calc(0.22 * var(--module));
    text-align: left;
  }
}

/* --- sec06: 上部の写真をやめて色面にする ----------------------------------
   先方は sec06 の上端にオフィス写真を敷き、その高さ分だけ padding-top を
   7.04module 取っている。写真を外すと同じ高さの空白が残るので、
   テーマ色の面＋幾何学模様に置き換えたうえで、余白も実際の見た目に合わせる。 */
.c40-sec06 {
  --pt: calc(1.2 * var(--module));
  background: url("../img/c40/deco/section-blobs.svg") no-repeat center top / 100% auto,
    linear-gradient(180deg, var(--color-pale-blue) 0%, #fff 42%);
}

@media screen and (max-width: 768px) {
  .c40-sec06 {
    --pt: calc(1.6 * var(--module));
    background-image: url("../img/c40/deco/section-blobs-sp.svg"),
      linear-gradient(180deg, var(--color-pale-blue) 0%, #fff 34%);
  }
}

/* --- sec03 の締めを受ける返し -----------------------------------------------
   「条件を下げるしかない？」に対する返答。元は事例セクションの見出し
   「いいえ。40キャリアでは〜」が受けていたが、そのセクションを最下部へ
   移したため受け手がなくなっていた（河田指示 2026-09-18）。
   円のパネルの外・白地の上に置き、次章（2軸）への橋にする。 */
.c40-answer {
  display: grid;
  justify-items: center;
  gap: calc(0.1 * var(--module));
  margin-top: calc(0.48 * var(--module));
  text-align: center;
}

.c40-answer_no {
  font-size: calc(0.56 * var(--module));
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-red);
}

.c40-answer_text {
  font-size: calc(0.3 * var(--module));
  font-weight: 900;
  line-height: 1.6;
  color: var(--color-text);
}

@media screen and (max-width: 768px) {
  .c40-answer {
    margin-top: calc(0.56 * var(--module));
    gap: calc(0.12 * var(--module));
  }
  .c40-answer_no {
    font-size: calc(0.72 * var(--module));
  }
  .c40-answer_text {
    font-size: calc(0.36 * var(--module));
  }
}

/* --- sec07（代表メッセージ）の背景写真をやめる -----------------------------
   先方は背景に実写を2枚敷いている:
     ・右上  = 実在の3人がPCを見る写真（PCに Life Shift Lab のロゴが写り込み）
     ・下半分 = 社員100人超の集合写真（中央の人物が LIFE SHIFT LAB の看板を掲示）
   実在の人物と他社ロゴが入っており、ページで最も公開リスクが高かった。
   写真をやめ、テキストが主役の面にする（河田判断 2026-09-18・A案）。

   写真ぶんの余白（下 6.24module）がそのままだと巨大な空白が残るので、
   中身に合わせて詰め、左寄せだった配置を中央に寄せ直している。
   猪熊の実写が入手できたら、代表カードの上に1枚だけ足せばよい。 */
/* 🔴 かつては `.webp .c40-message` を併記して、先方CSSの `.webp .analy-sec07`
      （詳細度が高い）を打ち消していた。その先方ルールを撤去したので不要になった。
      2026-09-19 に併記をやめ、Modernizr も外した。 */
.c40-message {
  --pt: calc(1.6 * var(--module));
  /* 代表プロフィールを外したぶん、下余白を詰める（2026-09-18） */
  --pb: calc(0.72 * var(--module));
  justify-items: center;
  gap: calc(0.4 * var(--module));
  background-image: url("../img/c40/deco/section-blobs.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  background-color: transparent;
}

/* 背景色は別レイヤーで持つ。模様と二重に敷く */
.c40-message::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--color-pale-blue) 0%, #fff 38%, var(--color-pale-blue) 100%);
}

.c40-message {
  position: relative;
  z-index: 0;
  text-align: center;
}

/* 見出しの下に細い区切りを入れて、本文との段差をつくる */
.c40-message h2 {
  position: relative;
  padding-bottom: calc(0.24 * var(--module));
}

.c40-message h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(0.72 * var(--module));
  height: 3px;
  border-radius: 999px;
  background: var(--color-red);
  transform: translateX(-50%);
}

/* 本文も中央揃え（河田指示 2026-09-18）。
   行長が長いと中央揃えは読みにくくなるので、幅を 9.2 → 8.4module に詰めて
   1行あたりの文字数を減らしている。 */
.c40-message_text {
  width: min(calc(8.4 * var(--module)), 90%);
  text-align: center;
}

/* 代表カード。写真が入るまでは文字だけで立たせる */
.c40-ceo {
  width: min(calc(8.4 * var(--module)), 90%);
  margin-top: calc(0.16 * var(--module));
  border: 1px solid var(--color-light-blue);
  box-shadow: 0 calc(0.03 * var(--module)) calc(0.2 * var(--module)) rgba(11, 59, 53, 0.08);
}

.c40-ceo_role {
  letter-spacing: 0.08em;
}

.c40-ceo_name {
  position: relative;
  padding-bottom: calc(0.16 * var(--module));
  margin-bottom: calc(0.16 * var(--module));
}

.c40-ceo_name::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(0.48 * var(--module));
  height: 1px;
  background: var(--color-light-blue);
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .c40-message {
    --pt: calc(1.2 * var(--module));
    --pb: calc(0.6 * var(--module));
    gap: calc(0.48 * var(--module));
    background-image: url("../img/c40/deco/section-blobs-sp.svg");
  }

  .c40-message_text,
  .c40-ceo {
    width: 88%;
  }
}

/* --- sec07 本文の読みやすさ -------------------------------------------------
   写真をやめて文章だけになったので、そのままだと「長い文章の塊」に見える。
   各段落の1文目をリードとして立て、拾い読みできるようにする（河田指摘 2026-09-18）。 */
.c40-message_text .c40-msg_lead {
  display: block;
  margin-bottom: calc(0.1 * var(--module));
  font-size: 1.22em;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-navy);
}

.c40-message_text p + p {
  margin-top: calc(0.4 * var(--module));
}

@media screen and (max-width: 768px) {
  .c40-message_text .c40-msg_lead {
    font-size: 1.16em;
  }
}

/* --- CTA／フッターの人物を合成イラストに差し替えたことによる調整 -----------
   先方は実写（コーチ陣の集合写真・フッターの人物写真）。実在の人物が写っており
   公開できないため、ソコストの同一シリーズを並べて合成したイラストに置き換えた。
   背景のPNGも実写なので、色面＋幾何学模様に差し替える（河田判断 2026-09-18）。 */

/* CTA の背景写真をやめる。blend も不要になる */
.c40-cta {
  background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-navy) 100%);
  background-blend-mode: normal;
}

.c40-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/c40/deco/section-blobs.svg") no-repeat center top / 120% auto;
  opacity: 0.18;
  pointer-events: none;
}

.c40-cta {
  position: relative;
}

.c40-cta > * {
  position: relative;
  z-index: 1;
}

/* 合成イラストは実写より縦に余白がないので、少しだけ大きく取る */
.c40-cta_header picture {
  width: min(calc(6.8 * var(--module)), 100%);
}

/* --- フッター ---------------------------------------------------------------
   背景の実写をやめ、濃ティールの面に。人物イラストは右下に小さく置く。 */
.c40-footer_content {
  background: linear-gradient(100deg, var(--color-pale-blue) 0%, #fff 60%, var(--color-pale-blue) 100%);
}

/* イラスト素材が腿のあたりで直線的に切れているため、そのまま置くと
   下の濃色バー（コピーライト帯）に脚を食われて「見切れ」に見える。
   下端をグラデーションでフェードさせて、切り口を地に溶かす（河田判断 2026-09-18・#5）。 */
.c40-footer-people {
  width: calc(3.2 * var(--module));
  position: absolute;
  right: calc(1.2 * var(--module));
  bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%);
}

@media screen and (max-width: 768px) {
  .c40-cta_header picture {
    width: calc(7.6 * var(--module));
  }
  .c40-cta::before {
    background-image: url("../img/c40/deco/section-blobs-sp.svg");
    background-size: 160% auto;
  }
  .c40-footer_content {
    background-image: linear-gradient(160deg, var(--color-pale-blue) 0%, #fff 62%, var(--color-pale-blue) 100%);
  }
  .c40-footer-people {
    width: calc(3.4 * var(--module));
    right: calc(-0.1 * var(--module));
  }
}

/* --- 下段CTA帯（FAQ → フッターの間・河田指示 2026-09-18 #4） ----------------
   CTA①②（.analy-cta）は 990px のフルセクション。同じものを3本目に積むと重いので、
   ここは「見出し1行＋ボタン＋補足」だけの帯にする。背景は CTA と同じティールのグラデ＋模様。
   🔴 .c40-fixedbar は SP 専用なので、PC ではこの帯がページ最後のCTAになる。 */
.c40-ctaband {
  position: relative;
  overflow: hidden;
  padding: calc(0.52 * var(--module)) calc(0.4 * var(--module));
  background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-navy) 100%);
  color: #fff;
  text-align: center;
}

.c40-ctaband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/c40/deco/section-blobs.svg") no-repeat center center / 120% auto;
  opacity: 0.18;
  pointer-events: none;
}

.c40-ctaband_inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: calc(0.24 * var(--module));
}

.c40-ctaband_head {
  font-size: calc(0.3 * var(--module));
  font-weight: 900;
  line-height: 1.5;
}

.c40-ctaband_note {
  font-size: calc(0.17 * var(--module));
  font-weight: 700;
  opacity: 0.88;
}

@media screen and (max-width: 768px) {
  .c40-ctaband {
    padding: calc(0.66 * var(--module)) calc(0.3 * var(--module));
  }

  .c40-ctaband::before {
    background-image: url("../img/c40/deco/section-blobs-sp.svg");
    background-size: 160% auto;
  }

  .c40-ctaband_inner {
    gap: calc(0.32 * var(--module));
  }

  .c40-ctaband_head {
    font-size: calc(0.34 * var(--module));
    line-height: 1.45;
  }

  .c40-ctaband_note {
    font-size: calc(0.23 * var(--module));
  }
}


/* --- sec07 の上余白（河田指摘 2026-09-18） --------------------------------
   cc-embed の結果カード「納得の転職へ！」との間が空きすぎていたため、
   上だけ詰める。下は先方のまま（次のセクションとの間隔は変えない）。
   元は 1.6 × --module（PC 150px / SP 61px）。 */
.c40-message {
  padding-top: calc(0.9 * var(--module));
}

@media screen and (max-width: 768px) {
  .c40-message {
    padding-top: calc(0.62 * var(--module));
  }
}

/* ==========================================================================
   sec08（在宅）の作り直し = .c40-wfh（河田確定 2026-09-18・**B案を採用**）
   旧 .analy-sec08 を置き換えたもの。PC 1,162px → 640px。

   作り直した理由（旧 .analy-sec08 の問題）:
     1. 見出しが二重（「…希望されるのは/在宅で働ける仕事」＋「フルリモート…強みがあります」）
     2. 主張が2本混在（(a)在宅は狙える (b)相談者の属性データ）
     3. 一番効く一文（「無理ではなく狙える職種が限られているだけ」）が中段に埋もれていた
     4. 「40キャリアは特に強みがあります」は**裏取り未了**（§5 #2）なので落とした。
        フルリモート4職種の倍率が取れたら、そこで足す

   不採用にした A案 / C案 の文言は `spec/lp-compose.md` に保管してある。
   ========================================================================== */
.c40-wfh {
  padding: calc(1.05 * var(--module)) calc(0.4 * var(--module));
  background: linear-gradient(180deg, #fff 0%, var(--color-pale-blue) 100%);
  text-align: center;
}

.c40-wfh_inner {
  max-width: calc(9.2 * var(--module));
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: calc(0.3 * var(--module));
}

.c40-wfh_eyebrow {
  font-size: calc(0.22 * var(--module));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-blue);
}

.c40-wfh_head {
  font-size: calc(0.46 * var(--module));
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-navy);
}

.c40-wfh_head .red {
  color: var(--color-red);
}

.c40-wfh_lead {
  font-size: calc(0.21 * var(--module));
  font-weight: 700;
  line-height: 1.85;
}

.c40-wfh_jobs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(0.12 * var(--module));
  width: 100%;
}

.c40-wfh_jobs li {
  padding: calc(0.17 * var(--module)) calc(0.08 * var(--module));
  border: 2px solid var(--color-blue);
  border-radius: calc(0.1 * var(--module));
  background: #fff;
  font-size: calc(0.21 * var(--module));
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-blue);
}

.c40-wfh_close {
  font-size: calc(0.25 * var(--module));
  font-weight: 900;
  line-height: 1.7;
  color: var(--color-navy);
}

.c40-wfh_prev {
  font-size: calc(0.2 * var(--module));
  font-weight: 700;
  line-height: 1.95;
}

.c40-wfh_note {
  font-size: calc(0.16 * var(--module));
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-blue);
}

@media screen and (max-width: 768px) {
  .c40-wfh {
    padding: calc(0.9 * var(--module)) calc(0.3 * var(--module));
  }

  .c40-wfh_inner {
    max-width: none;
    gap: calc(0.34 * var(--module));
  }

  .c40-wfh_eyebrow {
    font-size: calc(0.28 * var(--module));
  }

  .c40-wfh_head {
    font-size: calc(0.44 * var(--module));
    line-height: 1.55;
  }

  .c40-wfh_lead {
    font-size: calc(0.28 * var(--module));
  }

  .c40-wfh_jobs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(0.16 * var(--module));
  }

  .c40-wfh_jobs li {
    font-size: calc(0.28 * var(--module));
  }

  .c40-wfh_close {
    font-size: calc(0.32 * var(--module));
  }

  .c40-wfh_prev {
    font-size: calc(0.27 * var(--module));
  }

  .c40-wfh_note {
    font-size: calc(0.23 * var(--module));
  }
}

/* ==========================================================================
   下層ページ（/law/ ・/privacy/）の共通レイアウト = .c40-legal
   LP と同じ header / footer を使い、本文だけをこの器に入れる。
   構成は lifeshiftlab.jp/law/ を踏襲した「項目名 → 内容」の2カラム。
   PC は項目名を左に固定幅で並べ、SP は上下に積む。
   ========================================================================== */
/* 🔴 .analy-header は position:fixed（高さ PC 0.8×--module / SP 1.1×--module）。
   上余白はヘッダーの高さを必ず足し込むこと。足りないと見出しがヘッダーに潜り込む。 */
.c40-legal {
  padding: calc(1.5 * var(--module)) calc(0.4 * var(--module)) calc(1.4 * var(--module));
  background: linear-gradient(180deg, #fff 0%, var(--color-pale-blue) 100%);
}

.c40-legal_inner {
  max-width: calc(9.6 * var(--module));
  margin-inline: auto;
}

.c40-legal_title {
  margin-bottom: calc(0.7 * var(--module));
  font-size: calc(0.46 * var(--module));
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  color: var(--color-navy);
}

.c40-legal_list {
  display: grid;
  grid-template-columns: calc(2.4 * var(--module)) 1fr;
  border-top: 1px solid rgba(18, 87, 79, 0.18);
  background: #fff;
}

.c40-legal_list > dt,
.c40-legal_list > dd {
  padding: calc(0.28 * var(--module)) calc(0.3 * var(--module));
  border-bottom: 1px solid rgba(18, 87, 79, 0.18);
  font-size: calc(0.18 * var(--module));
  line-height: 1.9;
}

.c40-legal_list > dt {
  background: rgba(18, 87, 79, 0.05);
  font-weight: 900;
  color: var(--color-navy);
}

/* グリッド項目の min-width は既定が auto なので、中の料金表がトラック幅を押し広げて
   ページごと横スクロールさせてしまう。0 にして .c40-legal_tablewrap 側で横スクロールさせる。 */
.c40-legal_list > dd,
.c40-legal_tablewrap {
  min-width: 0;
}

.c40-legal_list > dd > * + * {
  margin-top: calc(0.16 * var(--module));
}

.c40-legal_ul,
.c40-legal_ol {
  display: grid;
  gap: calc(0.08 * var(--module));
  padding-left: 1.4em;
}

.c40-legal_ul > li {
  list-style: disc;
}

.c40-legal_ol > li {
  list-style: decimal;
}

.c40-legal_note {
  font-size: 0.92em;
  color: var(--color-blue);
}

/* 掲載前に河田の確認が要る箇所。**公開前にこのクラスが0件であること** */
.c40-legal_todo {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.1em 0.5em;
  border-radius: 0.3em;
  background: #FFF0E4;
  color: #914B20;
  font-size: 0.86em;
  font-weight: 700;
}

.c40-legal_tablewrap {
  overflow-x: auto;
}

.c40-legal_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94em;
  line-height: 1.7;
}

.c40-legal_table th,
.c40-legal_table td {
  padding: calc(0.14 * var(--module)) calc(0.14 * var(--module));
  border: 1px solid rgba(18, 87, 79, 0.18);
  text-align: left;
  vertical-align: top;
}

.c40-legal_table thead th {
  background: rgba(18, 87, 79, 0.08);
  font-weight: 900;
  color: var(--color-navy);
  white-space: nowrap;
}

.c40-legal_table tbody th {
  background: rgba(18, 87, 79, 0.03);
  font-weight: 900;
  white-space: nowrap;
}

.c40-legal_foot,
.c40-legal_back {
  margin-top: calc(0.4 * var(--module));
  font-size: calc(0.18 * var(--module));
  line-height: 1.9;
}

.c40-legal_foot a,
.c40-legal_back a {
  color: var(--color-blue);
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  .c40-legal {
    padding: calc(1.7 * var(--module)) calc(0.3 * var(--module)) calc(1.1 * var(--module));
  }

  .c40-legal_inner {
    max-width: none;
  }

  .c40-legal_title {
    margin-bottom: calc(0.6 * var(--module));
    font-size: calc(0.46 * var(--module));
  }

  /* SP は1カラムに積む。項目名が帯、内容がその下。 */
  .c40-legal_list {
    grid-template-columns: 1fr;
  }

  .c40-legal_list > dt,
  .c40-legal_list > dd {
    padding: calc(0.24 * var(--module)) calc(0.26 * var(--module));
    font-size: calc(0.26 * var(--module));
  }

  .c40-legal_list > dt {
    border-bottom: 0;
  }

  .c40-legal_foot,
  .c40-legal_back {
    font-size: calc(0.26 * var(--module));
  }

  .c40-legal_table {
    min-width: calc(7.4 * var(--module));
  }

  /* 条文の中（第8条の外部サービス一覧など）に置く表は、li のインデントぶん
     使える幅が狭い。min-width をそのままにすると .c40-legal_tablewrap の
     横スクロールでは収まりきらず、ページごとはみ出す（2026-09-19 に実際そうなった）。
     見出しの折り返しも許可して、枠内に収める。 */
  .c40-legal_sec .c40-legal_table {
    min-width: calc(5.8 * var(--module));
  }

  .c40-legal_sec .c40-legal_table thead th {
    white-space: normal;
  }

  .c40-legal_ol > li {
    min-width: 0;
  }
}

/* --- /privacy/ で足した分（条文形式のページ） -------------------------------
   /law/ は「項目名 → 内容」の表だが、プライバシーポリシーは条文を積む形。
   器（.c40-legal）は共通で、中身だけこちらを使う。 */
.c40-legal_lead {
  margin-bottom: calc(0.5 * var(--module));
  font-size: calc(0.18 * var(--module));
  line-height: 2;
}

.c40-legal_sec {
  padding: calc(0.36 * var(--module)) calc(0.4 * var(--module));
  border-bottom: 1px solid rgba(18, 87, 79, 0.18);
  background: #fff;
}

.c40-legal_sec:first-of-type {
  border-top: 1px solid rgba(18, 87, 79, 0.18);
}

.c40-legal_sec > h2 {
  margin-bottom: calc(0.16 * var(--module));
  font-size: calc(0.22 * var(--module));
  font-weight: 900;
  line-height: 1.6;
  color: var(--color-navy);
}

.c40-legal_sec > p,
.c40-legal_sec .c40-legal_ol {
  font-size: calc(0.18 * var(--module));
  line-height: 1.95;
}

.c40-legal_sec .c40-legal_ol > li + li {
  margin-top: calc(0.1 * var(--module));
}

/* 入れ子の項番は (1)(2)… にする。法令・約款の書き方に合わせる。 */
.c40-legal_ol--paren {
  margin-top: calc(0.08 * var(--module));
  counter-reset: paren;
  padding-left: 0;
}

.c40-legal_ol--paren > li {
  list-style: none;
  padding-left: 2.2em;
  text-indent: -2.2em;
}

.c40-legal_ol--paren > li::before {
  counter-increment: paren;
  content: "(" counter(paren) ") ";
}

/* 第11条の中に置く小さな定義リスト（事業者情報） */
.c40-legal_list--compact {
  margin-top: calc(0.18 * var(--module));
  grid-template-columns: calc(1.8 * var(--module)) 1fr;
}

.c40-legal_list--compact > dt,
.c40-legal_list--compact > dd {
  padding: calc(0.18 * var(--module)) calc(0.22 * var(--module));
  font-size: calc(0.17 * var(--module));
}

.c40-legal_date {
  margin-top: calc(0.4 * var(--module));
  font-size: calc(0.17 * var(--module));
  color: var(--color-blue);
}

@media screen and (max-width: 768px) {
  .c40-legal_lead {
    font-size: calc(0.26 * var(--module));
  }

  .c40-legal_sec {
    padding: calc(0.34 * var(--module)) calc(0.26 * var(--module));
  }

  .c40-legal_sec > h2 {
    font-size: calc(0.3 * var(--module));
  }

  .c40-legal_sec > p,
  .c40-legal_sec .c40-legal_ol {
    font-size: calc(0.26 * var(--module));
  }

  .c40-legal_list--compact {
    grid-template-columns: 1fr;
  }

  .c40-legal_list--compact > dt,
  .c40-legal_list--compact > dd {
    font-size: calc(0.25 * var(--module));
  }

  .c40-legal_date {
    font-size: calc(0.24 * var(--module));
  }
}

/* --- /reserve/（無料個別相談会のご予約） -----------------------------------
   器は .c40-legal を流用し、予約ページ固有の部品だけここに足す。

   🔴 2026-09-19（2回目）: 河田指示「色以外のデザインはライフシフトラボを完全にまねる」。
      先方の予約ページ（app.lifeshiftlab.jp/appointments/tenshoku）は
      ヘッダー → 赤枠の注意 → カレンダー → フッター だけ。
      「相談会でやること」「ご予約の前に」等は reserve/_parked.html へ退避した。 */

/* 先方は注意ブロックがヘッダーのすぐ下に来る。
   .c40-legal の上余白は /law/ /privacy/ と共有なので、ここだけ上書きする。
   🔴 .analy-header は position: fixed（PC 0.8×module / SP 1.1×module）。
      ヘッダー高さを足し込まないと注意ブロックが潜り込む（`.c40-legal` で実際にやらかした）。 */
.c40-reserve {
  padding-top: calc(1.06 * var(--module));
}

.c40-reserve .c40-legal_inner + .c40-sec {
  margin-block: calc(0.7 * var(--module));
}

/* 冒頭の注意ブロック。寸法は先方の実測値をそのまま写し、色だけ40キャリアのものにする
   （先方 border/文字 #D2171E → var(--color-red)）。
   先方の実測（1440px）: border 1px / padding 8px 12px / margin-bottom 16px /
                        font-size 13.6px / line-height 1.8 / max-width 980px
   --module は 1440px で 93.74px なので、それぞれ 0.085 / 0.128 / 0.17 / 0.145 倍。 */
/* 🔴 注意喚起の赤は**ブランド色を使わない**（河田指示 2026-09-19）。
   --color-red（#B45F2B・テラコッタ）だと警告に見えず、意図が伝わらなかった。
   先方（ライフシフトラボ）と同じ #D2171E を使う。これは意味を持つ色であって
   テーマ色ではないので、テーマを切り替えても追従させない。 */
.c40-reserve_alert {
  --c40-alert: #D2171E;
  margin-bottom: calc(0.17 * var(--module));
  padding: calc(0.085 * var(--module)) calc(0.128 * var(--module));
  border: 1px solid var(--c40-alert);
  font-size: calc(0.145 * var(--module));
  line-height: 1.8;
}

.c40-reserve_alert_head {
  font-weight: 700;
  color: var(--c40-alert);
}

.c40-reserve_alert_list {
  padding-left: calc(0.26 * var(--module));
  list-style: disc;
}

.c40-reserve_alert_list > li {
  list-style: disc;
}

.c40-reserve_facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(0.12 * var(--module));
  margin-bottom: calc(0.34 * var(--module));
}

.c40-reserve_facts > li {
  padding: calc(0.12 * var(--module)) calc(0.24 * var(--module));
  border-radius: 16em;
  background: var(--color-navy);
  color: #fff;
  font-size: calc(0.18 * var(--module));
  font-weight: 900;
  line-height: 1.5;
}

.c40-reserve_facts > li span {
  font-size: 1.32em;
  font-weight: 900;
}

.c40-reserve_lead {
  margin-bottom: calc(0.5 * var(--module));
  font-size: calc(0.19 * var(--module));
  line-height: 2;
  text-align: center;
}

/* TimeRex のウィジェットは高さが自動で変わるので、min-height は付けない
   （付けると中身より背が高いときに白い帯が残る）。
   ⚠ 中の div の id `timerex_calendar` は TimeRex 側が要求するので変えない。
     見た目の調整はこの外側のラッパーで行う。 */
/* 🔴 PC は TimeRex のウィジェットを埋め込み、SP は TimeRex の予約ページへ遷移する
   （河田判断 2026-09-19）。
   理由: ウィジェットの iframe は **550px 固定**で 390px の画面でははみ出し、
         しかも scrolling="no" なので横スクロールも効かず、直近3日分ほどしか選べない。
         TimeRex 自身の予約ページは 390px で完璧に収まる（実測確認済み）。
   ⚠ 中の div の id `timerex_calendar` は TimeRex 側が要求するので変えない。 */
.c40-reserve_embed {
  border-radius: calc(0.16 * var(--module));
}

.c40-reserve_sp {
  display: none;
}

.c40-reserve_privacy {
  margin-top: calc(0.3 * var(--module));
  font-size: calc(0.16 * var(--module));
  line-height: 1.9;
  text-align: center;
}

.c40-reserve_privacy a,
.c40-reserve_note a {
  color: var(--color-blue);
  text-decoration: underline;
}

.c40-reserve_h2 {
  margin-bottom: calc(0.24 * var(--module));
  font-size: calc(0.32 * var(--module));
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
  color: var(--color-navy);
}

.c40-reserve_note {
  margin-top: calc(0.4 * var(--module));
  padding: calc(0.26 * var(--module));
  border-radius: calc(0.12 * var(--module));
  background: rgba(18, 87, 79, 0.06);
  font-size: calc(0.17 * var(--module));
  line-height: 1.9;
}

@media screen and (max-width: 768px) {
  .c40-reserve_facts > li {
    font-size: calc(0.25 * var(--module));
  }

  .c40-reserve_lead {
    font-size: calc(0.27 * var(--module));
    text-align: left;
  }

  /* 🔴 SP でもウィジェットを出す（河田判断 2026-09-19・2回目）。
     前回「SPでは 550px 固定ではみ出す」としたのは**デスクトップUAで測った誤診**。
     embed.js は幅ではなく navigator.userAgent でモバイルを判定し、
     モバイルのときは min-width: 550px を付けない。iPhone UA・390px で実測すると
     scrollWidth === clientWidth === 390 で完全に収まる。
     .c40-reserve_sp（旧・遷移ボタン）は reserve/_parked.html に退避済み。 */
  .c40-reserve_sp {
    display: grid;
    justify-items: center;
    gap: calc(0.2 * var(--module));
    padding: calc(0.5 * var(--module)) calc(0.3 * var(--module));
    border-radius: calc(0.16 * var(--module));
    background: #fff;
    text-align: center;
  }

  .c40-reserve_sp_sub {
    font-size: calc(0.24 * var(--module));
    font-weight: 700;
    opacity: 0.85;
  }

  .c40-reserve_privacy {
    font-size: calc(0.24 * var(--module));
  }

  /* SP のヘッダーは 1.1×module（390px で 56px）。その下に 16px 空ける。 */
  .c40-reserve {
    padding-top: calc(1.42 * var(--module));
  }

  /* 先方の SP は本文 14.82px に対し注意ブロックが約 12.6px（--module 比 0.248）。 */
  .c40-reserve_alert {
    margin-bottom: calc(0.3 * var(--module));
    padding: calc(0.16 * var(--module)) calc(0.2 * var(--module));
    font-size: calc(0.248 * var(--module));
  }

  .c40-reserve_alert_list {
    padding-left: calc(0.42 * var(--module));
  }

  .c40-reserve_h2 {
    font-size: calc(0.4 * var(--module));
  }

  .c40-reserve_note {
    font-size: calc(0.25 * var(--module));
  }
}