/*
 * AIビジネス・FDE養成プログラム LP 専用スタイル（/ai-fde-program/）
 *
 * このファイルは既存 LP 群（tokens.css / base.css / layout.css / components.css）とは
 * 独立している。配色体系もリセットも別物のため、意図的に一切読み込まない。
 *
 * 【レイアウトの基本方針】スマホ特化型・中央固定カラム
 *   全寸法を rem で記述し、1rem = 10px を基準に root font-size だけを切り替えることで
 *   3 つの幅レジームに対応する（Figma の SP 402px と PC 450px は 1.1194 倍の相似）。
 *     - 402px 未満  : font-size: calc(100vw / 40.2) …… デザインごと縮小して横溢れを防ぐ
 *     - 402px 以上  : font-size: 10px             …… カラム 40.2rem = 402px
 *     - 1440px 以上 : font-size: 11.194px         …… カラム 40.2rem = 450px（Figma PC 幅）
 *   62.5% ではなく px 固定にしているのは、ブラウザ既定フォントサイズが大きい環境で
 *   カラムがビューポートを溢れるのを避けるため（FV のコピーは画像に焼き込まれており
 *   そもそもリフローしないので、px 固定の不利益が小さい）。
 */

/* ============================================================
 * トークン
 * ============================================================ */
:root {
  --c-deep: #003843; /* ディープグリーン：メインカラー */
  --c-ivory: #f5f2e9; /* ウォーム・アイボリー：ベースカラー */
  --c-ivory-text: #f5f2e8; /* テキスト用アイボリー（Figma 上の実値） */
  --c-charcoal: #4e4549; /* チャコールグレー */
  --c-text: #494544; /* アイボリー面の本文色 */
  --c-text-sub: #4e4449; /* 補足テキスト色 */
  --c-note: #dee1ae; /* 濃紺面の細い罫線（淡い黄） */
  --c-brand: #33b2ba; /* GSchool ブランドカラー */
  --c-terracotta: #d75335; /* エナジー・テラコッタ：CTA */
  --c-cta-top: #d89137; /* CTA グラデーション上端 */
  --c-cta-bottom: #d65335; /* CTA グラデーション下端 */
  --c-cta-edge-top: #ffcc00; /* CTA 枠グラデーション上端 */
  --c-cta-edge-bottom: #742d1d; /* CTA 枠グラデーション下端 */

  /*
   * Figma の本文は和文・英数字とも Noto Sans JP で組まれている（Issue #66）。
   * Inter を先頭に置いていたため英数字だけ別書体になっていた。
   * 大きく見せる数字（3 / 55.8 / 2.3 など）だけは Figma でも Inter のため、
   * 該当箇所で個別に "Inter" を先頭に足している。
   */
  --font-base: "Noto Sans JP", "Inter", -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  --column: 40.2rem; /* カラム幅（SP 402px / PC 450px） */
  --header-h: 7.9rem; /* ヘッダー高さ（Figma 79px） */
}

/* ============================================================
 * リセット
 * ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: calc(100vw / 40.2);
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 402px) {
  html {
    font-size: 10px;
  }
}

@media (min-width: 1440px) {
  html {
    font-size: 11.194px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-deep);
  background-color: var(--c-deep);
  /* 左右余白に出る背景（グラデーション＋ノイズテクスチャ）。カラム外だけに見える。
   * 素材は縦方向のみのグラデーション（横方向の成分は皆無）なので、縦長に切り出した
   * 400x1500 の帯を横に敷き詰める。横方向の拡大が起きないためノイズが粗くならない。
   * 旧実装は 480x900 を cover で敷いており、1920px 幅では横 4 倍に拡大されていた。 */
  background-image: url("/assets/img/ai-fde-program/bg-texture.webp");
  background-size: auto 100%;
  background-position: center top;
  background-repeat: repeat-x;
  background-attachment: fixed;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* スクリーンリーダー専用（FV のコピーが画像に焼き込まれているため必須） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
 * カラム
 * ============================================================ */
.lp {
  position: relative;
  width: var(--column);
  margin-inline: auto;
  overflow: hidden; /* 斜め帯・はみ出し画像をカラム幅で切る */
  /*
   * ページ全体を貫く縦グラデーション。アイボリー面は x=28–375px に敷かれるため、
   * この色はその左右（幅 28px / 27px の帯）にだけ見える。
   * 停止位置は Figma のレンダリング画像から実測した絶対値（rem）で指定し、
   * background-size でページ全長（12759px）に固定する。
   */
  background-image: linear-gradient(
    180deg,
    #003843 0,
    #34a5ac 93.1rem,
    #33a4ab 111rem,
    #2f9da3 150rem,
    #2c959e 190rem,
    #288c95 240rem,
    #23828b 300rem,
    #1e7881 360rem,
    #15656e 500rem,
    #115c65 580rem,
    #094b55 740rem,
    #04404b 900rem,
    #023c47 980rem,
    #003844 1140rem,
    #003843 1275.9rem
  );
  background-repeat: no-repeat;
  background-size: 100% 1275.9rem;
}

/*
 * セクション内の画像はすべて Figma の実寸で明示指定するため、
 * リセットの max-width:100% を解除する（カラム幅を超える装飾があるため）。
 */
.sec img,
.fv img {
  max-width: none;
}

/* セクションは Figma の絶対座標を再現するため相対配置の箱にする。
   中の要素は通常フローで組み、テキスト編集で崩れないようにしている。 */
.sec {
  position: relative;
  width: 100%;
}

/* ============================================================
 * CTA ボタン（Figma 基準サイズ 380.375 x 78.483）
 *   --s で全体倍率を変える。ページ内 CTA は 1、メニュー内は 0.9506、
 *   開講予定セクションは 0.885（いずれも Figma 実測値）。
 * ============================================================ */
.cta {
  --s: 1;
  position: relative;
  display: block;
  width: calc(38.0375rem * var(--s));
  height: calc(7.8483rem * var(--s));
  margin-inline: auto;
}

/* 本体のピル（グラデーション塗り＋グラデーション枠＋オフセット影） */
.cta__pill {
  position: absolute;
  inset: calc(0.4rem * var(--s)) 0 0 0;
  border: calc(0.3rem * var(--s)) solid transparent;
  border-radius: calc(1.85rem * var(--s));
  background:
    linear-gradient(180deg, var(--c-cta-top) 0%, var(--c-cta-bottom) 100%) padding-box,
    linear-gradient(180deg, var(--c-cta-edge-top) 0%, var(--c-cta-edge-bottom) 100%) border-box;
  box-shadow: calc(0.4rem * var(--s)) calc(0.5rem * var(--s)) 0 rgba(31, 31, 31, 0.75);
}

/* 上に重なる白ピル「まずはあなたの現在地をチェック」等 */
.cta__label {
  position: absolute;
  top: 0;
  left: calc(4.8775rem * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(29.308rem * var(--s));
  height: calc(2.6rem * var(--s));
  border: calc(0.2rem * var(--s)) solid var(--c-deep);
  border-radius: calc(1.3rem * var(--s));
  background-color: var(--c-ivory-text);
  color: var(--c-deep);
  font-size: calc(1.5rem * var(--s));
  letter-spacing: calc(0.15rem * var(--s));
  line-height: 1;
  white-space: nowrap;
}

/* 「無料で」の濃紺ピル */
.cta__free {
  position: absolute;
  top: calc(3.5rem * var(--s));
  left: calc(2.8375rem * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(7.3rem * var(--s));
  height: calc(2.9rem * var(--s));
  border-radius: calc(1.45rem * var(--s));
  background-color: var(--c-deep);
  color: var(--c-ivory-text);
  font-size: calc(1.6rem * var(--s));
  letter-spacing: calc(0.16rem * var(--s));
  line-height: 1;
}

.cta__text {
  position: absolute;
  top: calc(3.55rem * var(--s));
  left: calc(11.2975rem * var(--s));
  width: calc(21.5rem * var(--s));
  color: var(--c-ivory-text);
  font-size: calc(1.9rem * var(--s));
  letter-spacing: calc(0.19rem * var(--s));
  line-height: 1.16;
  white-space: nowrap;
}

.cta__chevron {
  position: absolute;
  top: calc(4.11rem * var(--s));
  left: calc(33.2975rem * var(--s));
  width: calc(1.561rem * var(--s));
  height: calc(1.514rem * var(--s));
  fill: var(--c-ivory-text);
}

@media (hover: hover) {
  .cta:hover .cta__pill {
    filter: brightness(1.06);
  }
}

.cta:active .cta__pill {
  transform: translate(calc(0.2rem * var(--s)), calc(0.25rem * var(--s)));
  box-shadow: calc(0.2rem * var(--s)) calc(0.25rem * var(--s)) 0 rgba(31, 31, 31, 0.75);
}

/*
 * CTA クリック計測用の data 属性を持つ要素の子孫要素は、クリックイベントを無効化する。
 * これにより、CTA のラベルが正しく計測されるようになる。
 */
[data-cta-location] * {
  pointer-events: none;
}

/* ============================================================
 * ヘッダー（Figma 0–79px）
 * ============================================================ */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background-color: var(--c-deep);
}

.lp-header__logos {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 20rem;
  height: 100%;
}

.lp-header__logo-gschool {
  position: absolute;
  top: 1.76rem;
  left: 2.3rem;
  width: 9.8rem;
  height: auto;
}

.lp-header__logo-gw {
  position: absolute;
  top: 4.6rem;
  left: 1.9rem;
  width: 10.45rem;
  height: auto;
}

.lp-burger {
  position: absolute;
  top: 2.875rem;
  right: 2.87rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2.88rem;
  height: 1.66rem;
}

/* 見た目は Figma 通りの細い 3 本線のまま、タップ領域だけ広げる */
.lp-burger::before {
  content: '';
  position: absolute;
  inset: -1.4rem -1.2rem;
}

.lp-burger__bar {
  display: block;
  width: 100%;
  height: 0.15rem;
  border-radius: 0.075rem;
  background-color: var(--c-ivory-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.lp-burger[aria-expanded='true'] .lp-burger__bar:nth-child(1) {
  transform: translateY(0.755rem) rotate(45deg);
}

.lp-burger[aria-expanded='true'] .lp-burger__bar:nth-child(2) {
  opacity: 0;
}

.lp-burger[aria-expanded='true'] .lp-burger__bar:nth-child(3) {
  transform: translateY(-0.755rem) rotate(-45deg);
}

/* ============================================================
 * メニュー（Figma「メニューバー（修正後）」300:276 / 407x457）
 * ============================================================ */
.lp-menu {
  position: absolute;
  top: var(--header-h);
  left: 0;
  z-index: 39;
  width: 100%;
  height: 45.7rem;
  border-radius: 0 0 1.5rem 1.5rem;
  background-color: var(--c-ivory);
  box-shadow: 0 0.6rem 1.2rem rgba(0, 56, 67, 0.25);
}

.lp-menu[hidden] {
  display: none;
}

.lp-menu__list {
  position: absolute;
  top: 4.4rem;
  left: 6rem;
}

.lp-menu__list a {
  display: block;
  color: var(--c-deep);
  font-size: 2rem;
  letter-spacing: 0.2rem;
  line-height: 1.35;
}

.lp-menu__list li + li {
  margin-top: 2.05rem;
}

.lp-menu__cta {
  --s: 0.9506;
  position: absolute;
  top: 36.17rem;
  left: 2.3rem;
  margin-inline: 0;
}

/* ============================================================
 * FV（Figma 79–620px）
 * ============================================================ */
.fv {
  position: relative;
  background-color: var(--c-deep);
}

.fv__slides {
  position: relative;
  width: 100%;
  aspect-ratio: 402 / 541;
  overflow: hidden;
}

.fv__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.fv__slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fv__slide {
    transition: none;
  }
}

/*
 * FV 画像には旧デザインの CTA が焼き込まれているため、Figma と同様に
 * 新 CTA を必ずその上へ重ねて隠す。6 種すべての焼き込み CTA
 * （上端 455px / 下端 525px / 左右 19–387px）を覆う位置に置いている。
 */
.fv__cta {
  position: absolute;
  top: 45rem;
  left: 1.0625rem;
  margin-inline: 0;
}

/*
 * ドットは FV 画像の下端（どのバリアントも余白になっている帯）に重ねる。
 * 別の帯として下に足すとページ全体の y 座標が Figma と 24px ずれるため。
 */
.fv__dots {
  position: absolute;
  bottom: 0.3rem;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: center;
  height: 1.4rem;
  padding: 0 0.9rem;
  transform: translateX(-50%);
  border-radius: 0.7rem;
  background-color: rgba(0, 56, 67, 0.4);
}

.fv__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: rgba(245, 242, 232, 0.45);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.fv__dot[aria-selected='true'] {
  background-color: var(--c-ivory-text);
  transform: scale(1.25);
}

/* ============================================================
 * 共通：アイボリーの内側パネル
 *   ページの大半は「左右に縦グラデーションの帯を残し、
 *   x=28–375px だけがアイボリー」という構造になっている。
 * ============================================================ */
.bg-panel {
  background: linear-gradient(
    90deg,
    transparent 0 2.8rem,
    var(--c-ivory) 2.8rem 37.5rem,
    transparent 37.5rem 100%
  );
}

/* ============================================================
 * 課題提起：AI時代の本質的なスキル（Figma 620–1140px）
 * ============================================================ */
.sec-skill {
  height: 52rem;
  color: var(--c-ivory-text);
}

/* 濃紺→ブランドカラーのグラデーション帯（ノイズテクスチャ込み・Figma 390:677） */
.sec-skill__band {
  position: absolute;
  top: 0;
  left: 0;
  width: 40.2rem;
  height: 27.3rem;
}

/* 雲の下に続くアイボリー面 */
.sec-skill__panel {
  position: absolute;
  top: 31.1rem;
  right: 2.7rem;
  bottom: 0;
  left: 2.8rem;
  background-color: var(--c-ivory);
}

.sec-skill__heading {
  position: absolute;
  top: 4.3rem;
  left: 6.7rem;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: 0.36rem;
  line-height: 6rem;
}

.sec-skill__sub {
  position: absolute;
  top: 17.5rem;
  left: 6.8rem;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.24rem;
  line-height: 1.58;
}

.sec-skill__rule {
  position: absolute;
  height: 0.1rem;
  background-color: rgba(245, 242, 232, 0.55);
}

.sec-skill__rule--upper {
  top: 9.8rem;
  left: -2rem;
  width: 24.4rem;
}

.sec-skill__rule--lower {
  top: 15.9rem;
  left: -5.2rem;
  width: 39.3rem;
}

/* 吹き出し（アイボリー面の上端をつくる雲形） */
.sec-skill__cloud {
  position: absolute;
  top: 21.4rem;
  left: -10.8rem;
  width: 61.5rem;
  height: 20.31rem;
}

.sec-skill__bubble {
  position: absolute;
  border-radius: 50%;
  background-color: var(--c-ivory);
}

.sec-skill__bubble--lg {
  top: 38.23rem;
  left: 1.83rem;
  width: 2.52rem;
  height: 2.36rem;
}

.sec-skill__bubble--sm {
  top: 40.06rem;
  left: 3.62rem;
  width: 1.16rem;
  height: 1.2rem;
}

.sec-skill__cloud-text {
  position: absolute;
  top: 29.2rem;
  left: 2.7rem;
  color: var(--c-text-sub);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.15rem;
  line-height: 1.67;
}

/* 3 職種の丸写真 */
.persona {
  position: absolute;
  top: 39.182rem;
}

.persona--office {
  left: 5.773rem;
}

.persona--sales {
  left: 16.151rem;
}

.persona--engineer {
  left: 26.652rem;
}

.persona__photo {
  position: relative;
  display: block;
  width: 8.5245rem;
  height: 8.9506rem;
  overflow: hidden;
  border-radius: 50%;
}

.persona__photo img {
  position: absolute;
  max-width: none;
}

.persona--office .persona__photo img {
  top: 0.109rem;
  left: -3.001rem;
  width: 13.2875rem;
  height: 8.8594rem;
}

.persona--sales .persona__photo img {
  top: 0.108rem;
  left: -4.39rem;
  width: 13.1017rem;
  height: 8.7355rem;
}

.persona--engineer .persona__photo img {
  top: 0.11rem;
  left: -2.503rem;
  width: 15.8681rem;
  height: 8.9258rem;
}

.persona__label {
  position: absolute;
  top: 9.558rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--c-deep);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* ============================================================
 * データ提示：AIの影響（Figma 1140–1297px）
 * ============================================================ */
.sec-stat {
  z-index: 2;
  height: 15.7rem;
  color: var(--c-ivory-text);
}

/* 濃紺の帯（下端が中央に向かって下がる形）。次セクションへ少し重なる */
.sec-stat__shape {
  position: absolute;
  top: 0;
  left: -2.3rem;
  width: 44.1rem;
  height: 18.1rem;
}

.sec-stat p {
  position: absolute;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.sec-stat__line1 {
  top: 2.8rem;
  left: 3.5rem;
}

.sec-stat__ai {
  font-size: 2.4rem;
}

.sec-stat__effect {
  font-size: 2rem;
}

.sec-stat__by {
  margin-left: 0.6rem;
  font-size: 1.3rem;
}

/* 行内に 2.4rem の「73%」を含むため、line-height:1 の行ボックスは 13px 側の文字より
   上に伸びる。Figma の 13px テキスト上端（セクション先頭から 72px）に合わせるには、
   その伸びしろ 9px を差し引いた位置を top にする。 */
.sec-stat__line2 {
  top: 6.3rem;
  left: 3.5rem;
  font-size: 1.3rem;
}

.sec-stat__pct {
  position: relative;
  margin-left: 0.4rem;
  font-size: 2.4rem;
}

.sec-stat__note-mark {
  position: absolute;
  top: -1rem;
  right: -1.2rem;
  font-size: 0.7rem;
  font-weight: 300;
}

.sec-stat__ga {
  margin-left: 0.4rem;
  font-size: 1.3rem;
}

.sec-stat__line3 {
  top: 10.2rem;
  left: 3.6rem;
  font-size: 1.8rem;
}

.sec-stat__tail {
  margin-left: 0.5rem;
  font-size: 1.3rem;
}

.sec-stat__rule {
  position: absolute;
  height: 0.1rem;
  background-color: var(--c-note);
}

.sec-stat__rule--1 {
  top: 5.8rem;
  left: -4rem;
  width: 16.2rem;
}

.sec-stat__rule--2 {
  top: 9rem;
  left: 27.7rem;
  width: 14.1rem;
}

.sec-stat__rule--3 {
  top: 12.6rem;
  left: -0.6rem;
  width: 27.4rem;
}

/* ============================================================
 * 共通：出典などの注釈テキスト
 * ============================================================ */
.sec-note {
  position: absolute;
  color: var(--c-text-sub);
  font-size: 0.7rem;
  font-weight: 300;
  line-height: 1.6;
  white-space: nowrap;
}

.sec-note ul {
  list-style: disc;
  padding-left: 1.05rem;
}

/* ============================================================
 * 問題提起：流行りの技術を追うだけでは（Figma 1297–1672px）
 * ============================================================ */
.sec-chase {
  height: 37.5rem;
}

.sec-chase__band {
  position: absolute;
  top: 0;
  left: -0.8rem;
  width: 43.7rem;
  height: 14.4rem;
  background-color: var(--c-charcoal);
}

.sec-chase__triangle {
  position: absolute;
  top: 1rem;
  left: 30.614rem;
  width: 6.0733rem;
  height: 5.525rem;
}

.sec-chase__mark {
  position: absolute;
  top: 1.12rem;
  left: 31.2rem;
  color: var(--c-charcoal);
  font-size: 4.8rem;
  font-weight: 700;
  letter-spacing: 0.48rem;
  line-height: 1.2;
}

.sec-chase__lead,
.sec-chase__strong {
  position: absolute;
  left: 3.8rem;
  color: var(--c-ivory-text);
  font-weight: 700;
  line-height: 1.55;
  white-space: nowrap;
}

.sec-chase__lead {
  top: 4.91rem;
  font-size: 1.6rem;
}

.sec-chase__strong {
  top: 8.23rem;
  font-size: 1.8rem;
  letter-spacing: 0.18rem;
}

.sec-chase__panel {
  position: absolute;
  top: 14.4rem;
  right: 2.7rem;
  bottom: 0;
  left: 2.8rem;
  background-color: var(--c-ivory);
}

.sec-chase__figure {
  position: absolute;
  top: 15.9rem;
  left: 3.8rem;
  width: 32.6rem;
  height: 12.8rem;
  margin: 0;
}

.sec-chase__figure img {
  width: 100%;
  height: 100%;
}

.sec-chase__note-mark {
  position: absolute;
  top: 0.4rem;
  left: 29.2rem;
  color: var(--c-ivory-text);
  font-size: 0.7rem;
  font-weight: 300;
  line-height: 1;
}

.sec-chase__note1 {
  top: 30.6rem;
  left: 5rem;
}

.sec-chase__note2 {
  top: 32.9rem;
  left: 5rem;
}

/* ============================================================
 * 共通：マーカー（Figma では #d9d9d9 に #eeff00 を 20% 重ねた色）
 * ============================================================ */
.hl {
  position: absolute;
  background-color: #dde1ae;
}

/* ============================================================
 * 問いかけ：スキルアップってなんだろう？（Figma 1672–1842px）
 * ============================================================ */
.sec-question {
  height: 17rem;
  color: var(--c-ivory-text);
}

.sec-question__band {
  position: absolute;
  top: 0;
  left: 0;
  width: 40.2rem;
  height: 17.28rem;
}

.sec-question__line1,
.sec-question__line2 {
  position: absolute;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-question__line1 {
  top: 5.5rem;
  left: 3.5rem;
}

.sec-question__line2 {
  top: 9.6rem;
  left: 6.6rem;
}

.sec-question__rule {
  position: absolute;
  height: 0.1rem;
  background-color: rgba(245, 242, 232, 0.55);
}

.sec-question__rule--1 {
  top: 8.3rem;
  left: -7.8rem;
  width: 37.7rem;
}

.sec-question__rule--2 {
  top: 12.3rem;
  left: 6.6rem;
  width: 37.7rem;
}

/* ============================================================
 * 必須スキル図（Figma 1842–2226px）
 * ============================================================ */
.sec-must {
  height: 38.4rem;
  color: var(--c-text-sub);
}

.sec-must__heading span {
  position: absolute;
  z-index: 1; /* マーカー(.hl)より前面に置く */
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-must__heading-1 {
  top: 4.3rem;
  left: 10.7rem;
  letter-spacing: 0.1rem;
}

.sec-must__heading-2 {
  top: 7.2rem;
  left: 6.9rem;
  letter-spacing: 0.2rem;
}

.sec-must__hl-heading {
  top: 8.7rem;
  left: 6.4rem;
  width: 27.2rem;
  height: 1.1rem;
}

.sec-must__cross {
  position: absolute;
  top: 18.73rem;
  left: 18.45rem;
  width: 3.368rem;
  height: 3.056rem;
}

/* スキルの箱（見出し帯＋本文） */
.skillbox {
  position: absolute;
}

.skillbox::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 56, 67, 0.3);
}

.skillbox__title {
  position: absolute;
  z-index: 1;
  color: var(--c-ivory-text);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.19;
  white-space: nowrap;
}

.skillbox p:not(.skillbox__title),
.skillbox__body {
  position: absolute;
  z-index: 1;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.54;
  white-space: nowrap;
}

.skillbox--biz,
.skillbox--ai {
  top: 12.3rem;
  width: 15.7rem;
  height: 12.4rem;
}

.skillbox--biz::after,
.skillbox--ai::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5rem;
  background-color: var(--c-deep);
}

.skillbox--biz {
  left: 4rem;
}

.skillbox--ai {
  left: 20.5rem;
}

.skillbox--biz .skillbox__title {
  top: 0.82rem;
  left: 2.24rem;
}

.skillbox--ai .skillbox__title {
  top: 0.71rem;
  left: 4.79rem;
}

.skillbox--biz .skillbox__line1 {
  top: 5.8rem;
  left: 1.5rem;
}

/* 鉤括弧を外して「問いへ構造化する」になった分、マーカーも文字幅に合わせて詰める
   （Figma と同じく文字の左右に 6–7px の余白が残る幅）。 */
.skillbox--biz .skillbox__hl-1 {
  top: 7.9rem;
  left: 1.2rem;
  width: 11.3rem;
  height: 1.8rem;
}

.skillbox--biz .skillbox__line2 {
  top: 7.8rem;
  left: 1.8rem;
}

.skillbox--ai .skillbox__line1 {
  top: 4.8rem;
  left: 2.4rem;
}

.skillbox--ai .skillbox__hl-1 {
  top: 6.9rem;
  left: 2.2rem;
  width: 7.2rem;
  height: 1.8rem;
}

.skillbox--ai .skillbox__line2 {
  top: 6.8rem;
  left: 2.6rem;
}

.skillbox--ai .skillbox__hl-2 {
  top: 9rem;
  left: 2.2rem;
  width: 12.2rem;
  height: 1.8rem;
}

.skillbox--ai .skillbox__line3 {
  top: 8.9rem;
  left: 2.4rem;
}

.skillbox--base {
  top: 25.4rem;
  left: 4rem;
  width: 32.2rem;
  height: 9.5rem;
}

.skillbox--base::before {
  background-color: rgba(78, 68, 73, 0.3);
}

.skillbox--base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.4rem;
  background-color: var(--c-charcoal);
}

.skillbox--base .skillbox__title {
  top: 0.74rem;
  left: 10.45rem;
}

.skillbox--base .skillbox__body {
  top: 4.2rem;
  left: 5.7rem;
  text-align: center;
}

.skillbox--base .skillbox__hl-base {
  top: 6.3rem;
  left: 5.3rem;
  width: 16.3rem;
  height: 1.8rem;
}

/* ============================================================
 * 共通：Figma で傾けられた要素
 *   Figma の座標は回転後のバウンディングボックス。中央寄せの箱に
 *   実寸の子要素を入れて回転させることで同じ見え方にする。
 * ============================================================ */
.rot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rot > * {
  flex: none;
  width: max-content;
  transform: rotate(-2.09deg);
}

/* ============================================================
 * 普遍的な力／突き抜けたビジネスパーソンに（Figma 2226–2454px）
 * ============================================================ */
.sec-universal {
  height: 22.8rem;
  color: var(--c-ivory-text);
}

.sec-universal__bar {
  position: absolute;
  top: 1.1rem;
  left: -1.3rem;
  width: 42.5rem;
  height: 5.2rem;
  background-color: var(--c-charcoal);
}

.sec-universal__bar-text {
  position: absolute;
  top: 2.86rem;
  left: 3.2rem;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.18rem;
  line-height: 1.22;
  white-space: nowrap;
}

/* 下端が中央でとがる濃紺の面 */
/* 透過グラデーション付きの帯画像（マーケ部ご提供）に差し替え。
   旧：CSS の単色／クリップパスで、グラデーションが再現できていなかった。
   素材は Figma の 450px 幅フレーム基準（402px カラムの 450/402 倍）のため、
   幅 40.2rem（＝カラム幅）に縮めて配置する。 */
.sec-universal__chevron {
  position: absolute;
  top: 0;
  left: 0;
  width: 40.2rem;
  height: 25.28rem;
  max-width: none;
}

.sec-universal__line1,
.sec-universal__line2 {
  position: absolute;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-universal__line1 {
  top: 8.3rem;
  left: 6.9rem;
}

/* テラコッタの帯（横方向グラデーション） */
.sec-universal__line2 {
  top: 12.2rem;
  left: 4.7rem;
}

/* テラコッタの帯（横方向グラデーション）。テキストの下に敷く */
.sec-universal__terra {
  position: absolute;
  top: 11.6rem;
  left: 2.7rem;
  width: 34.8rem;
  height: 3.6rem;
  background: linear-gradient(90deg, #d15134 0%, #742d1d 100%);
}

/* ============================================================
 * FDE の定義（Figma 2454–2706px）
 * ============================================================ */
/* 写真はセクション高さ（25.2rem）を 4.5rem 超えて次セクションへ食い込む。
   DOM 順では次セクションのアイボリー面（bg-panel）が上に来て写真の下が
   直線で切られていたため、このセクションを前面に出す（Issue #35） */
.sec-fde {
  z-index: 1;
  height: 25.2rem;
}

.sec-fde__bar {
  position: absolute;
  top: 0;
  left: -0.2rem;
  width: 40.4rem;
  height: 5.1rem;
  background-color: var(--c-deep);
}

.sec-fde__lead {
  position: absolute;
  top: 1.37rem;
  left: 4.1rem;
  width: 32rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.sec-fde__lead-1 {
  color: var(--c-ivory-text);
}

.sec-fde__lead-2 {
  color: #f8f974;
}

/* 写真の上端のぼかしが帯に重なって白くにじんでいたため、帯を写真より前面に置く。
   Figma でも帯の下端は直線で、写真はその下から始まる（Issue #35） */
.sec-fde__banner {
  position: absolute;
  z-index: 1;
  top: 5.1rem;
  left: -8.5rem;
  width: 57.2rem;
  height: 6.1rem;
  background-color: var(--c-cta-bottom);
  box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
}

.sec-fde__abbr,
.sec-fde__full {
  position: absolute;
  color: var(--c-ivory-text);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.sec-fde__abbr {
  top: 0.72rem;
  left: 14.5rem;
  font-size: 3.2rem;
  text-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
}

.sec-fde__full {
  top: 2.38rem;
  left: 21.3rem;
  font-size: 1.5rem;
}

.sec-fde__photo {
  position: absolute;
  top: 10rem;
  left: 21.8rem;
  width: 15.7rem;
  height: 19.7rem;
}

/* 周囲のぼかしを含む画像に差し替えたため、矩形で切り抜かず枠いっぱいに
   そのまま敷く（旧：横長写真を overflow: hidden で角の立った矩形に切り抜き） */
.sec-fde__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.sec-fde__desc1,
.sec-fde__desc2,
.sec-fde__desc3 {
  position: absolute;
  left: 5.4rem;
  z-index: 1;
  color: var(--c-text);
  font-weight: 700;
  line-height: 1.55;
  white-space: nowrap;
}

.sec-fde__desc1 {
  top: 16.54rem;
  font-size: 1.1rem;
}

.sec-fde__desc2 {
  top: 18.94rem;
  font-size: 1.4rem;
}

.sec-fde__desc3 {
  top: 21.64rem;
  font-size: 1.4rem;
}

.sec-fde__hl-1 {
  top: 19.5rem;
  left: 4.7rem;
  width: 9.3rem;
  height: 1.1rem;
}

.sec-fde__hl-2 {
  top: 22.4rem;
  left: 4.7rem;
  width: 19.9rem;
  height: 1.1rem;
}

/* ============================================================
 * 現場を経験してきたあなただからこそ（Figma 2706–2934px / -2.09度）
 * ============================================================ */
.sec-onestep {
  height: 22.8rem;
  color: var(--c-ivory-text);
}

.sec-onestep__pill {
  top: 3.534rem;
  left: -2.67rem;
  width: 40.3693rem;
  height: 5.74rem;
}

.sec-onestep__pill span {
  display: block;
  width: 40.2409rem;
  height: 4.2944rem;
  border-radius: 2rem;
  background-color: var(--c-deep);
}

.sec-onestep__pill-text {
  top: 4.7rem;
  left: 3.96rem;
  width: 29.75rem;
  height: 2.98rem;
}

.sec-onestep__pill-text p {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.16rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* 透過グラデーション付きの帯画像（マーケ部ご提供）に差し替え。
   旧：CSS の単色／クリップパスで、グラデーションが再現できていなかった。
   素材は Figma の 450px 幅フレーム基準（402px カラムの 450/402 倍）のため、
   幅 40.2rem（＝カラム幅）に縮めて配置する。 */
.sec-onestep__panel {
  position: absolute;
  top: -1.8rem;
  left: 0;
  width: 40.2rem;
  height: 28.85rem;
  max-width: none;
}

.sec-onestep__small {
  top: 10.64rem;
  left: 4.3rem;
  width: 12.25rem;
  height: 2.14rem;
}

.sec-onestep__small p {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.14rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* 下の罫線（.sec-onestep__rule）は Figma と同じ位置にあるが、この行だけ 11px 下がって
   いたため罫線が文字に重なっていた。Figma と同じ「セクション先頭から 2838-2857px」に戻す。 */
.sec-onestep__big {
  top: 12.44rem;
  left: 4.39rem;
  width: 32.86rem;
  height: 3.56rem;
}

.sec-onestep__big p {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-onestep__rule {
  top: 15.352rem;
  left: -13.793rem;
  width: 49.9882rem;
  height: 1.8242rem;
}

.sec-onestep__rule span {
  display: block;
  width: 50.0215rem;
  height: 0.05rem;
  background-color: var(--c-ivory-text);
}

/* -1.67度 傾き（GSchool プログラム帯まわり） */
.rot--program > * {
  transform: rotate(-1.67deg);
}

/* ============================================================
 * 教育ノウハウならGSchool（Figma 2934–3165px）
 * ============================================================ */
.sec-knowhow {
  height: 23.1rem;
  color: var(--c-text);
}

.sec-knowhow__heading span {
  position: absolute;
  z-index: 1;
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-knowhow__heading-1 {
  top: 0;
  left: 11.72rem;
}

.sec-knowhow__heading-2 {
  top: 2.8rem;
  left: 7.8rem;
}

.sec-knowhow__hl {
  top: 4.2rem;
  left: 7.1rem;
  width: 25.3rem;
  height: 1.1rem;
}

.sec-knowhow__cross {
  position: absolute;
  /* DOM 上あとに来る .trainbox--personal に右半分が隠れるため、カードより前面に出す */
  z-index: 2;
  top: 14.78rem;
  left: 18.45rem;
  width: 3.368rem;
  height: 3.056rem;
}

/* 法人向け／個人向け研修のカード */
.trainbox {
  position: absolute;
  top: 9.36rem;
  width: 15.8rem;
  height: 14rem;
  /* Figma と同じ 20px の角丸（コーナーの画素プロファイルを実測して決定） */
  border-radius: 2rem;
  background-color: #35a8af;
}

.trainbox--corp {
  left: 4rem;
}

.trainbox--personal {
  left: 20.4rem;
}

.trainbox__pill {
  position: absolute;
  top: -1.16rem;
  left: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.3rem;
  height: 2.4rem;
  background-color: #494544;
  color: var(--c-ivory-text);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.21;
  white-space: nowrap;
}

.trainbox p {
  position: absolute;
  z-index: 1;
  color: var(--c-ivory-text);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.21;
  white-space: nowrap;
}

.trainbox__note {
  font-size: 0.7rem;
  vertical-align: super;
}

.trainbox__bar {
  position: absolute;
  height: 2.1rem;
  background-color: var(--c-deep);
}

.trainbox--corp .trainbox__l1 {
  top: 2.64rem;
  left: 2.6rem;
}

.trainbox--corp .trainbox__l2 {
  top: 5.14rem;
  left: 2.6rem;
}

.trainbox--corp .trainbox__l3 {
  top: 7.51rem;
  left: 2.6rem;
}

.trainbox--corp .trainbox__l4 {
  top: 10.01rem;
  left: 2.6rem;
}

.trainbox--corp .trainbox__bar--1 {
  top: 7.34rem;
  left: 2.3rem;
  width: 9rem;
}

.trainbox--corp .trainbox__bar--2 {
  top: 9.84rem;
  left: 2.3rem;
  width: 9rem;
}

.trainbox--personal .trainbox__l1 {
  top: 2.54rem;
  left: 2.5rem;
}

.trainbox--personal .trainbox__l2 {
  top: 4.94rem;
  left: 2.5rem;
}

.trainbox--personal .trainbox__l3 {
  top: 7.54rem;
  left: 2.5rem;
}

.trainbox--personal .trainbox__l4 {
  top: 10.04rem;
  left: 2.5rem;
}

.trainbox--personal .trainbox__bar--1 {
  top: 7.34rem;
  left: 2.3rem;
  width: 11.4rem;
}

.trainbox--personal .trainbox__bar--2 {
  top: 9.84rem;
  left: 2.3rem;
  width: 10.3rem;
}

/* ============================================================
 * GSchool の AIビジネス・FDE養成プログラム（Figma 3165–3554px）
 * ============================================================ */
.sec-program {
  height: 38.9rem;
  color: var(--c-ivory-text);
}

.sec-program__note {
  top: 0.8rem;
  left: 6.6rem;
  font-weight: 400;
  white-space: normal;
}

/* 透過グラデーション付きの帯画像（マーケ部ご提供）に差し替え。
   旧：CSS の単色／クリップパスで、グラデーションが再現できていなかった。
   素材は Figma の 450px 幅フレーム基準（402px カラムの 450/402 倍）のため、
   幅 40.2rem（＝カラム幅）に縮めて配置する。 */
.sec-program__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 40.2rem;
  height: 22.07rem;
  max-width: none;
}

.sec-program__lead1,
.sec-program__lead2 {
  position: absolute;
  left: 3.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-program__lead1 {
  top: 8.7rem;
}

.sec-program__lead2 {
  top: 11.2rem;
}

.sec-program__bar {
  top: 15.25rem;
  left: -1.87rem;
  width: 43.82rem;
  height: 5.12rem;
}

.sec-program__bar span {
  display: block;
  width: 43.7242rem;
  height: 3.83402rem;
  background-color: #35a8af;
}

.sec-program__bar-text {
  top: 16.57rem;
  left: 3.7rem;
  width: 32.34rem;
  height: 2.85rem;
}

.sec-program__bar-text p {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* 傾き・影を含めてマーケ部ご提供の帯画像に差し替え（旧：CSS グラデーション＋回転）。
   等倍（533×169）で置くと帯の厚みが 153px になり、Figma の 138px より 11% 厚く、
   下へ 14px はみ出していた。厚みが合う 0.902 倍で配置する（Issue #40）。
   ※傾いた帯は上辺だけ合わせても縮尺の誤りが出ないため、厚みで検証すること */
.sec-program__banner {
  position: absolute;
  top: 19.057rem;
  left: -6.5rem;
  width: 48.08rem;
  height: 15.24rem;
  max-width: none;
}

.sec-program__logo {
  top: 19.09rem;
  left: 8.9rem;
  width: 19.4008rem;
  height: 11.2934rem;
}

.sec-program__logo img {
  display: block;
  width: 19.0959rem;
  height: 10.7414rem;
  filter: drop-shadow(0 0.4rem 0.4rem rgba(0, 0, 0, 0.25));
}

.sec-program__no {
  top: 24.11rem;
  left: 28.8rem;
  width: 2.07rem;
  height: 2.46rem;
}

.sec-program__no p {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 1.2;
  text-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.25);
}

/* 帯の中での縦位置が Figma より 0.9rem 下にずれていた（Issue #40）。
   ロゴ行「GSchool の」は Figma と一致しているため、この行だけを上げる */
.sec-program__title {
  top: 27.52rem;
  left: 2.9rem;
  width: 34.66rem;
  height: 3.51rem;
}

.sec-program__title p {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.21rem;
  line-height: 1.2;
  text-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

/* ============================================================
 * FDE養成プログラムの3つの特徴（Figma 3554–4171px）
 * ============================================================ */
.sec-features {
  height: 61.7rem;
  color: var(--c-text);
}

.sec-features__heading span {
  position: absolute;
  z-index: 1;
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-features__heading-1 {
  top: 0;
  left: 9.13rem;
}

.sec-features__heading-2 {
  top: 3.4rem;
  left: 4.9rem;
}

/* .sec-features__heading span（詳細度 0,1,1）に負けて font-size が効いて
   いなかったため、詳細度を上げて Figma と同じ大きさで表示する（Issue #41） */
.sec-features__heading .sec-features__num {
  top: 2.5rem;
  left: 24.9rem;
  color: var(--c-terracotta);
  font-family: "Inter", var(--font-base);
  font-size: 3.2rem;
  line-height: 1.2;
}

.sec-features__hl {
  top: 1.5rem;
  left: 8.8rem;
  width: 22.3rem;
  height: 1.1rem;
}

/* 写真とテキストを交互に配置する 3 ブロック */
.feature {
  position: absolute;
  left: 0;
  width: 100%;
}

.feature__panel {
  position: absolute;
  width: 36.9rem;
  height: 14.3rem;
  background-color: #ffffff;
}

.feature__photo {
  position: absolute;
  overflow: hidden;
}

.feature__photo img {
  position: absolute;
  max-width: none;
}

.feature__num {
  position: absolute;
  color: #35a8af;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.feature__title {
  position: absolute;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
}

.feature__body {
  position: absolute;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.feature__title,
.feature__body,
.feature__num {
  z-index: 1;
}

/* 01：写真が左、テキストが右 */
.feature--01 {
  top: 9.4rem;
}

.feature--01 .feature__panel {
  top: 0;
  left: 3.3rem;
}

.feature--01 .feature__photo {
  top: 0.1rem;
  left: -9.6rem;
  width: 32.01rem;
  height: 14.19rem;
}

.feature--01 .feature__photo img {
  top: -0.38rem;
  left: 4.02rem;
  width: 28.06rem;
  height: 15.78rem;
}

.feature--01 .feature__num {
  top: 0.86rem;
  left: 24.8rem;
}

.feature--01 .feature__title {
  top: 5.06rem;
  left: 24.8rem;
}

/* マーカー帯だけが Figma より 6-7px 上にあり、文字の上端を削って見えていた。
   文字側は Figma と一致しているため帯だけ下げる。 */
.feature--01 .feature__hl-1 {
  top: 6.1rem;
  left: 24.4rem;
  width: 11.6rem;
  height: 1.1rem;
}

.feature--01 .feature__hl-2 {
  top: 8.1rem;
  left: 24.5rem;
  width: 7rem;
  height: 1.1rem;
}

.feature--01 .feature__body {
  top: 9.52rem;
  left: 24.8rem;
}

/* 02：写真が右、テキストが左 */
.feature--02 {
  top: 25.3rem;
}

.feature--02 .feature__panel {
  top: 0.1rem;
  left: -1.3rem;
}

.feature--02 .feature__photo {
  top: 0;
  left: 21.3rem;
  width: 32.3rem;
  height: 14.31rem;
}

.feature--02 .feature__photo img {
  top: 0;
  left: -1.4rem;
  width: 26.17rem;
  height: 14.72rem;
}

.feature--02 .feature__num {
  top: 1rem;
  left: 2.2rem;
}

/* 1行目が鉤括弧で始まるぶん、ブラウザでは2行目だけが左に出てマーカーとずれる。
   padding-left で全体を右へ寄せ、text-indent で1行目だけ元に戻して
   2行目のみ 10px 右へずらす（Figma の 2行目開始位置 x=27 に一致）。 */
.feature--02 .feature__title {
  top: 5.3rem;
  left: 1.4rem;
  padding-left: 1rem;
  text-indent: -1rem;
}

.feature--02 .feature__hl-1 {
  top: 8.1rem;
  left: 2.1rem;
  width: 16.6rem;
  height: 1.1rem;
}

.feature--02 .feature__body {
  top: 9.9rem;
  left: 2.2rem;
}

/* 03：写真が左、テキストが右 */
.feature--03 {
  top: 41.4rem;
}

.feature--03 .feature__panel {
  top: 0;
  left: 6.2rem;
}

.feature--03 .feature__photo {
  top: 0;
  left: -11.2rem;
  width: 32.27rem;
  height: 14.3rem;
}

.feature--03 .feature__photo img {
  top: -0.38rem;
  left: 8.48rem;
  width: 30.53rem;
  height: 14.67rem;
}

.feature--03 .feature__num {
  top: 1rem;
  left: 23.4rem;
}

.feature--03 .feature__title {
  top: 5.2rem;
  left: 23.4rem;
}

.feature--03 .feature__hl-1 {
  top: 8.1rem;
  left: 23.1rem;
  width: 11.5rem;
  height: 1.1rem;
}

.feature--03 .feature__body {
  top: 9.8rem;
  left: 23.4rem;
}

/* CTA の細身バリエーション（ページ内の CTA②〜⑤で使う Figma の形） */
.cta--narrow {
  width: 36.16rem;
  height: 7.55rem;
}

.cta--narrow .cta__pill {
  inset: 0.86rem 0 0 0;
}

.cta--narrow .cta__label {
  left: 3.93rem;
}

.cta--narrow .cta__free {
  top: 3.41rem;
  left: 1.86rem;
  height: 3.1rem;
  border-radius: 1.55rem;
}

.cta--narrow .cta__text {
  top: 3.55rem;
  left: 10.36rem;
}

.cta--narrow .cta__chevron {
  top: 4.11rem;
  left: 32.36rem;
}

/* ============================================================
 * 自走力がなければ再現できない（Figma 4171–4522px）
 * ============================================================ */
.sec-repro {
  height: 35.1rem;
  color: var(--c-ivory-text);
}

/* 下端が中央でとがるチャコールの面 */
/* 下端の三角を含む帯画像。clip-path で作っていた頃は下端の三角が
   .sec-repro__panel に隠れていたため、z-index でパネルより前面に出す。
   帯より前に出したい要素（ピル・本文・イラスト）には z-index: 2 を与える。 */
.sec-repro__shape {
  position: absolute;
  z-index: 1;
  top: 1.52rem;
  left: 0;
  width: 40.2rem;
  height: 14.4rem;
}

.sec-repro__pill {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 5.7rem;
  width: 28.8rem;
  height: 3.7rem;
  border-radius: 2rem;
  background-color: #bdbcbc;
}

.sec-repro__pill-text {
  position: absolute;
  z-index: 2;
  top: 0.53rem;
  left: 10.6rem;
  color: var(--c-text);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-repro p {
  position: absolute;
  z-index: 2;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-repro__line1 {
  top: 5.65rem;
  left: 11.2rem;
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

.sec-repro__line2 {
  top: 8.8rem;
  left: 7.5rem;
  font-size: 2rem;
  letter-spacing: 0.1rem;
}

.sec-repro__panel {
  position: absolute;
  top: 12.82rem;
  left: 0;
  width: 40.2rem;
  height: 22.3562rem;
}

.sec-repro__goal {
  position: absolute;
  z-index: 2;
  top: 14.7rem;
  left: 27.5rem;
  width: 11rem;
  height: 11rem;
}

.sec-repro__line3 {
  top: 19.1rem;
  left: 5.1rem;
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

.sec-repro__line4 {
  top: 22.5rem;
  left: 5.2rem;
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

.sec-repro__terra {
  position: absolute;
  top: 26.1rem;
  left: -1.3rem;
  width: 33.3rem;
  height: 4.3rem;
  background-color: var(--c-cta-bottom);
}

.sec-repro__strong {
  top: 26.45rem;
  left: 5.08rem;
  font-size: 2.75rem;
  letter-spacing: 0.1375rem;
}

.sec-repro__tail {
  top: 27.7rem;
  left: 32.6rem;
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

/* ============================================================
 * ページ内 CTA セクション（写真＋濃紺オーバーレイ＋CTA）
 * ============================================================ */
.sec-cta {
  height: 22.8rem;
  color: var(--c-ivory-text);
}

/* 写真はセクション高さ（22.8rem）より 0.7rem 長く、Figma では次セクションへ
   食い込んで見える。DOM 順では次セクションのアイボリー面が上に来てしまい、
   境目に白い帯が出ていたため、このセクションを前面に出す。 */
.sec-cta--desk {
  z-index: 1;
}

.sec-cta__photo {
  position: absolute;
  top: 0;
  left: -4.2rem;
  width: 52.7rem;
  height: 23.5rem;
  object-fit: cover;
}

/* 写真とまったく同じ範囲を覆う。0.1rem 下げていたため写真の最上段 1px が
   暗くならず、明るい筋になって見えていた。 */
.sec-cta__overlay {
  position: absolute;
  top: 0;
  left: -2.6rem;
  width: 45.8rem;
  height: 23.5rem;
  background-color: rgba(0, 56, 67, 0.46);
}

.sec-cta__panel {
  position: absolute;
  top: 2.6rem;
  left: -1.2rem;
  width: 44rem;
  height: 9.2rem;
  background-color: rgba(0, 56, 67, 0.7);
}

.sec-cta__line1,
.sec-cta__line2 {
  position: absolute;
  z-index: 1;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-cta__line1 {
  top: 4.8rem;
  left: 10.5rem;
}

.sec-cta__line2 {
  top: 7.7rem;
  left: 2.6rem;
}

.sec-cta__marker {
  position: absolute;
  top: 8.8rem;
  left: 2rem;
  width: 35.7rem;
  height: 1.1rem;
  background-color: rgba(214, 83, 53, 0.7);
}

.sec-cta__button {
  position: absolute;
  top: 13.39rem;
  left: 1.94rem;
  margin-inline: 0;
}

/* -1.74度 傾き */
.rot--174 > * {
  transform: rotate(-1.74deg);
}

/* ============================================================
 * コアカリキュラム×強化カリキュラム（Figma 4750–5281px）
 * ============================================================ */
.sec-combo {
  height: 53.1rem;
  color: var(--c-ivory-text);
}

.sec-combo__head {
  position: absolute;
  top: 1.8rem;
  left: 0;
  width: 40.2rem;
  height: 15.6rem;
}

.sec-combo__core,
.sec-combo__adv,
.sec-combo__de {
  z-index: 1;
}

.sec-combo__core p,
.sec-combo__adv p {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.24rem;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-combo__core {
  top: 5.97rem;
  left: 3.93rem;
  width: 21.02rem;
  height: 4.39rem;
}

.sec-combo__adv {
  top: 9.84rem;
  left: 12.59rem;
  width: 21.02rem;
  height: 4.39rem;
}

.sec-combo__de {
  top: 10.09rem;
  left: 33.99rem;
  width: 2.11rem;
  height: 3.07rem;
}

.sec-combo__de p {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 1.2;
}

.sec-combo__chev {
  position: absolute;
  width: 9.85rem;
  height: 7.9rem;
}

.sec-combo__chev--1 {
  top: 6.096rem;
  left: 12.786rem;
}

.sec-combo__chev--2 {
  top: 3.946rem;
  left: 12.886rem;
  width: 10.4328rem;
  height: 11.7281rem;
  transform: rotate(73.01deg);
}

.sec-combo__terra {
  top: 15.71rem;
  left: -1.21rem;
  width: 42.54rem;
  height: 6.38rem;
}

.sec-combo__terra span {
  display: block;
  width: 42.3849rem;
  height: 4.8548rem;
  background: linear-gradient(90deg, #d65335 0%, #702b1c 100%);
}

.sec-combo__terra-text {
  top: 17.12rem;
  left: 4.62rem;
  width: 30.67rem;
  height: 3.57rem;
  z-index: 1;
}

.sec-combo__terra-text p {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* 2 枚のカード */
.combo-card {
  position: absolute;
  left: 4.2rem;
  width: 31.9rem;
}

.combo-card--core {
  top: 26.31rem;
  height: 9.7rem;
  background: linear-gradient(180deg, #35a8af 0%, #494544 100%);
}

.combo-card--adv {
  top: 38.81rem;
  height: 11rem;
  background: linear-gradient(180deg, #494544 0%, #003843 100%);
}

.combo-card__mark {
  position: absolute;
  top: 2.59rem;
  left: 1.4rem;
  width: 6.8rem;
  height: 2.2rem;
  background-color: var(--c-ivory-text);
}

.combo-card__num {
  position: absolute;
  z-index: 1;
  color: var(--c-text);
  font-family: "Inter", var(--font-base);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.combo-card--core .combo-card__num {
  top: 2.5rem;
  left: 1.9rem;
}

.combo-card__num--5 {
  top: 2.29rem;
  left: 6.2rem;
  color: var(--c-ivory-text);
  font-size: 2.4rem;
}

.combo-card p {
  position: absolute;
  z-index: 1;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.combo-card--core .combo-card__line1 {
  top: 2.81rem;
  left: 3.3rem;
  color: var(--c-text);
  font-size: 1.5rem;
  letter-spacing: 0.075rem;
}

.combo-card__line1-em {
  color: var(--c-ivory-text);
}

.combo-card--core .combo-card__line2 {
  top: 5.81rem;
  left: 4.4rem;
  font-size: 2rem;
  letter-spacing: 0.1rem;
}

.combo-card--adv .combo-card__line1 {
  top: 2.97rem;
  left: 7.82rem;
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

.combo-card--adv .combo-card__line3 {
  top: 5.8rem;
  left: 6.8rem;
  font-size: 2.2rem;
  letter-spacing: 0.11rem;
}

.sec-combo__arrow {
  position: absolute;
  top: 36rem;
  left: 4.2rem;
  width: 31.9rem;
  height: 2.5rem;
  background-color: #494544;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ============================================================
 * 学べば学ぶほど差がつく（Figma 5281–5576px）
 * ============================================================ */
.sec-gap {
  height: 29.5rem;
  color: var(--c-text);
}

/* Figma では写真の上下がぼけてアイボリー面に溶け込む。矩形に切り抜いただけだと
   上下が直線で切れて浮いてしまうため、マスクで上下をフェードさせる（Issue #115）。
   フェード量は Figma の画素から推定したアルファに合わせている（上 0→33% / 下 78%→100%）。 */
.sec-gap__photo {
  position: absolute;
  top: 1.2rem;
  left: 2.8rem;
  width: 34.8rem;
  height: 25.2rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 33%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 33%,
    #000 78%,
    transparent 100%
  );
}

.sec-gap__photo img {
  position: absolute;
  top: -12.5rem;
  left: -1rem;
  width: 36.27rem;
  height: 44.53rem;
  max-width: none;
}

.sec-gap__lead {
  position: absolute;
  top: 0;
  left: 5.6rem;
  z-index: 1;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.44;
  white-space: nowrap;
}

/* 2行目はマーカー（.sec-gap__hl-2 は x=163 から）の上に乗る位置まで下げる。
   7.7rem では x=139 から始まりマーカーの左に 24px はみ出していた。 */
.sec-gap__lead-2 {
  padding-left: 11.4rem;
}

.sec-gap__hl-1 {
  top: 1.1rem;
  left: 5.3rem;
  width: 15.1rem;
  height: 1.1rem;
}

.sec-gap__hl-2 {
  top: 3.4rem;
  left: 16.3rem;
  width: 18.5rem;
  height: 1.1rem;
}

.sec-gap__band {
  top: 17.19rem;
  left: -2.43rem;
  width: 47.35rem;
  height: 6.76rem;
}

.sec-gap__band span {
  display: block;
  width: 47.2rem;
  height: 5.08258rem;
  background-color: var(--c-deep);
  box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
}

.sec-gap__band-text {
  top: 18.59rem;
  left: 6.197rem;
  width: 27.81rem;
  height: 3.97rem;
  z-index: 1;
}

.sec-gap__band-text p {
  color: var(--c-ivory-text);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* 注釈番号（※1 など）の上付き表現 */
.sec-note-mark {
  font-size: 0.7rem;
  font-weight: 300;
  vertical-align: super;
}

/* ============================================================
 * 従来の学習 vs AI駆動学習（Figma 5576–6465px）
 * ============================================================ */
.sec-graph {
  height: 88.9rem;
  color: var(--c-text);
}

.sec-graph__chart {
  position: absolute;
  left: 2.8rem;
  width: 34.7rem;
}

.sec-graph__chart--1 {
  top: 0;
  height: 22.16rem;
}

.sec-graph__chart--2 {
  top: 33.5rem;
  height: 23.13rem;
}

/* グラフ画像に焼き込まれた見出し「従来の学習」「AI駆動学習」の右上に付く注釈番号。
   Figma 408:1171 / 408:1173（x=259 / y=5585・5920 / 11x8）。
   見出しはテラコッタの帯の上にあるため文字はアイボリー。 */
.sec-graph__chart-mark,
.sec-graph__curve-mark {
  position: absolute;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1;
}

.sec-graph__chart-mark {
  left: 25.9rem;
  color: var(--c-ivory-text);
}

.sec-graph__chart-mark--1 {
  top: 0.9rem;
}

.sec-graph__chart-mark--2 {
  top: 34.4rem;
}

/* 「学習曲線を73%短縮」の「73%」の右上（Figma 408:1176 / x=319, y=6022）。
   アイボリー面の上なので、画像側の本文と同じ色にする。 */
.sec-graph__curve-mark {
  top: 44.6rem;
  left: 31.9rem;
  color: var(--c-text);
}

/* 下端が中央でとがるチャコールの面 */
.sec-graph__panel {
  position: absolute;
  top: 24.3rem;
  left: 2.8rem;
  width: 34.7rem;
  height: 8.3rem;
  background-color: #494544;
  clip-path: polygon(0 0, 100% 0, 100% 73.6%, 50% 100%, 0 73.6%);
}

.sec-graph__panel-1,
.sec-graph__panel-2 {
  position: absolute;
  color: var(--c-ivory-text);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-graph__panel-1 {
  top: 25.74rem;
  left: 8.7rem;
  font-size: 1.2rem;
}

.sec-graph__panel-2 {
  top: 28.04rem;
  left: 9.5rem;
  font-size: 1.7rem;
}

/* Figma ではこの2本だけテラコッタ（#d65335）。間の
   「タスク完了スピードが約2.3倍に」の文字色と同じ。 */
.sec-graph__rule {
  position: absolute;
  left: 2.8rem;
  width: 34.7rem;
  height: 0.1rem;
  background-color: var(--c-cta-bottom);
}

.sec-graph__rule--1 {
  top: 59.2rem;
}

.sec-graph__rule--2 {
  top: 66.2rem;
}

.sec-graph__speed {
  position: absolute;
  top: 61.34rem;
  left: 4.9rem;
  color: var(--c-cta-bottom);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-graph__speed-num {
  position: absolute;
  top: 60.06rem;
  left: 25.4rem;
  color: var(--c-cta-bottom);
  font-family: "Inter", var(--font-base);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.sec-graph__speed-mark {
  position: absolute;
  top: 60.1rem;
  left: 30.5rem;
  color: var(--c-cta-bottom);
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1;
}

.sec-graph__stat {
  position: absolute;
  top: 63.9rem;
  z-index: 1;
  left: 14.7rem;
  color: var(--c-cta-bottom);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-graph__terra {
  position: absolute;
  top: 67.67rem;
  left: -0.1rem;
  width: 41.1rem;
  height: 7.4rem;
  background-color: var(--c-cta-bottom);
}

.sec-graph__big,
.sec-graph__big-unit,
.sec-graph__big-sub,
.sec-graph__right1,
.sec-graph__right2 {
  position: absolute;
  color: var(--c-ivory-text);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-graph__big {
  top: 68.5rem;
  left: 3.6rem;
  font-family: "Inter", var(--font-base);
  font-size: 3.2rem;
}

.sec-graph__big-unit {
  top: 69.99rem;
  left: 10.5rem;
  font-size: 1.6rem;
}

.sec-graph__big-mark {
  position: absolute;
  top: 68.7rem;
  left: 10.8rem;
  color: var(--c-ivory-text);
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1;
}

.sec-graph__big-sub {
  top: 71.78rem;
  left: 3.78rem;
  font-size: 1.6rem;
}

.sec-graph__right1 {
  top: 69.3rem;
  left: 15.7rem;
  font-size: 1.4rem;
}

.sec-graph__right2 {
  top: 71.3rem;
  left: 15.7rem;
  font-size: 1.6rem;
}

.sec-graph__note1 {
  top: 77.3rem;
  left: 6.8rem;
}

.sec-graph__note2 {
  top: 80.7rem;
  left: 6.8rem;
}

.sec-graph__note3 {
  top: 83.2rem;
  left: 6.8rem;
}

/* ============================================================
 * 成長の鍵（Figma 6465–6726px）
 * ============================================================ */
.sec-key {
  height: 26.1rem;
  color: var(--c-ivory-text);
}

/* 透過グラデーション付きの帯画像（マーケ部ご提供）に差し替え。
   旧：CSS の単色／クリップパスで、グラデーションが再現できていなかった。
   素材は Figma の 450px 幅フレーム基準（402px カラムの 450/402 倍）のため、
   幅 40.2rem（＝カラム幅）に縮めて配置する。 */
.sec-key__shape {
  position: absolute;
  top: -7.84rem;
  left: 0;
  width: 40.2rem;
  height: 36.98rem;
  max-width: none;
}

.sec-key__lead {
  position: absolute;
  top: 3.4rem;
  left: 3.3rem;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.09rem;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-key__rule {
  position: absolute;
  top: 6.1rem;
  left: -2.4rem;
  width: 37.7rem;
  height: 0.1rem;
  background-color: rgba(245, 242, 232, 0.55);
}

.sec-key__illust {
  position: absolute;
  top: 8.6rem;
  left: 3.9rem;
  width: 7.19672rem;
  height: 14.7886rem;
}

.sec-key__bubble {
  position: absolute;
  top: 9rem;
  left: 12.27rem;
  width: 24.9249rem;
  height: 8.54912rem;
}

.sec-key__tail {
  position: absolute;
  top: 12.05rem;
  left: 8.28rem;
  width: 5.17486rem;
  height: 1.09602rem;
}

/* 吹き出し内のテキスト（Figma で +3度 傾いている） */
.sec-key__hl,
.sec-key__text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-key__hl {
  top: 14.205rem;
  left: 14.879rem;
  width: 19.343rem;
  height: 2.0891rem;
}

.sec-key__hl span {
  display: block;
  width: 19.312rem;
  height: 1.1rem;
  transform: rotate(2.94deg);
  background-color: #dde1ae;
}

.sec-key__text {
  top: 10.33rem;
  left: 15.27rem;
  z-index: 1;
  width: 19.04rem;
  height: 5.79rem;
}

.sec-key__text p {
  flex: none;
  width: max-content;
  transform: rotate(3.05deg);
  color: var(--c-text);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* ============================================================
 * コアカリキュラム詳細（Figma 6726–7794px）
 * ============================================================ */
/* 3ヶ月めのパネルは下端の三角がセクション高さ（106.8rem）を超えて
   次セクションへ食い込む。DOM 順では次セクションの帯画像が上に来て
   三角が隠れてしまうため、このセクションを前面に出す。 */
.sec-core {
  z-index: 1;
  height: 106.8rem;
  color: var(--c-text);
}

.sec-core__heading {
  position: absolute;
  top: 0.07rem;
  left: 10.1rem;
  z-index: 1;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-core__hl {
  top: 1.4rem;
  left: 9.8rem;
  width: 20.9rem;
  height: 1.1rem;
}

.sec-core__intro {
  position: absolute;
  top: 4.34rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
  white-space: nowrap;
}

/* 1〜3ヶ月めのカード */
.month {
  position: absolute;
  background: linear-gradient(180deg, #e2edf8 0%, #d3e1eb 100%);
}

.month--1 {
  top: 13.9rem;
  left: 4.8rem;
  width: 30.7rem;
  height: 31.2rem;
  clip-path: polygon(0 0, 100% 0, 100% 81.47%, 48.9% 100%, 0 81.47%);
}

.month--2 {
  top: 44.3rem;
  left: 4.7rem;
  width: 30.7rem;
  height: 33.8rem;
  clip-path: polygon(0 0, 100% 0, 100% 83.39%, 50.4% 100%, 0 83.39%);
}

.month--3 {
  top: 77.2rem;
  left: 4.7rem;
  width: 30.8rem;
  height: 35.5rem;
  clip-path: polygon(0 0, 100% 0, 100% 80.97%, 50.4% 100%, 0 80.97%);
}

.month__head {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.7rem;
  color: var(--c-ivory-text);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.month--1 .month__head {
  background-color: #35a8af;
}

.month--2 .month__head {
  background-color: #3a6375;
}

.month--3 .month__head {
  background-color: var(--c-deep);
}

.month__title {
  position: absolute;
  left: 0;
  width: 100%;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

/* 1ヶ月めだけ 1 行に収めるため Figma では 18px。20px のままだと約 11% 大きく、
   タイトルが横に広がっていた（Issue #66）。2・3ヶ月めは 20px のままで一致する */
.month--1 .month__title {
  font-size: 1.8rem;
}

.month--1 .month__title {
  top: 5.7rem;
}

.month--2 .month__title,
.month--3 .month__title {
  top: 5.4rem;
}

.month__photo {
  position: absolute;
  left: 3.8rem;
  width: 23.2rem;
  height: 9.5rem;
  overflow: hidden;
}

.month__photo img {
  position: absolute;
  max-width: none;
}

.month--1 .month__photo {
  top: 10.1rem;
}

.month--1 .month__photo img {
  top: -1.7rem;
  left: -0.4rem;
  width: 24rem;
  height: 13.5rem;
}

.month--2 .month__photo {
  top: 12.7rem;
}

.month--2 .month__photo img {
  top: -0.5rem;
  left: 0.1rem;
  width: 23.1rem;
  height: 12.9rem;
}

.month--3 .month__photo {
  top: 12.5rem;
}

.month--3 .month__photo img {
  top: -0.6rem;
  left: -0.3rem;
  width: 23.6rem;
  height: 15.7rem;
}

.month__list {
  position: absolute;
  left: 0;
  width: 100%;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.month__list li + li {
  margin-top: 0.6rem;
}

.month--1 .month__list {
  top: 21.7rem;
}

.month--2 .month__list {
  top: 24.7rem;
}

.month--3 .month__list {
  top: 24.2rem;
}

/* ============================================================
 * 修了証の発行（Figma 7794–7900px）
 * ============================================================ */
.sec-cert {
  height: 10.6rem;
}

/* 透過グラデーション付きの帯画像（マーケ部ご提供）に差し替え。
   旧：CSS の単色／クリップパスで、グラデーションが再現できていなかった。
   素材は Figma の 450px 幅フレーム基準（402px カラムの 450/402 倍）のため、
   幅 40.2rem（＝カラム幅）に縮めて配置する。
   z-index は 3ヶ月めパネルの三角（.sec-core が z-index: 1）より前面に置くため。
   画像の帯は上端が直線なので、Figma と同じく三角の先端が切り込まない（Issue #33） */
.sec-cert__band {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0.7rem;
  width: 39.13rem;
  height: 12.78rem;
  max-width: none;
}

.sec-cert__text {
  position: absolute;
  z-index: 2;
  top: 4.78rem;
  left: 13.9rem;
  color: var(--c-ivory-text);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* ============================================================
 * GSchoolと従来の学習の違い（Figma 7900–8560px）
 * ============================================================ */
.sec-diff {
  height: 66rem;
}

.sec-diff__head {
  position: absolute;
  top: 6.74rem;
  left: 8.49rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23.22rem;
  height: 3.76rem;
  background-color: #494544;
  color: var(--c-ivory-text);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* 2×2 のポジショニングマップ */
.posmap {
  position: absolute;
  top: 10.53rem;
  left: 2.75rem;
  width: 34.7rem;
  height: 27.91rem;
  background-color: #ffffff;
}

.posmap__axis {
  position: absolute;
  color: var(--c-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  white-space: nowrap;
}

.posmap__axis--top {
  top: 1.63rem;
  left: 10.91rem;
  text-align: center;
}

.posmap__axis--left {
  top: 13.37rem;
  left: 2.06rem;
}

.posmap__axis--right {
  top: 13.37rem;
  left: 27.83rem;
}

.posmap__axis--bottom {
  top: 24.99rem;
  left: 11.87rem;
}

.posmap__line {
  position: absolute;
  background-color: #a4a2a1;
}

.posmap__line--v {
  top: 5.88rem;
  left: 17.02rem;
  width: 0.1rem;
  height: 17.95rem;
}

.posmap__line--h {
  top: 14.85rem;
  left: 8.37rem;
  width: 17.95rem;
  height: 0.1rem;
}

.posmap__bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.45rem;
  height: 5.67rem;
  border-radius: 50%;
  color: var(--c-ivory-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.posmap__bubble--eng {
  top: 7.08rem;
  left: 4.06rem;
  background-color: #727272;
}

.posmap__bubble--ai {
  top: 17.17rem;
  left: 16.14rem;
  background-color: #4a4a4a;
}

.posmap__bubble--gs {
  top: 5.78rem;
  left: 19.66rem;
  background-color: #35a8af;
}

/* ◎△ の比較 3 行 */
.compare {
  position: absolute;
  left: 0;
  width: 100%;
  height: 7.8rem;
}

.compare--trad-eng {
  top: 40.9rem;
}

.compare--trad-ai {
  top: 49.6rem;
}

.compare--gschool {
  top: 58.3rem;
}

.compare__card {
  position: absolute;
  top: 0;
  left: 13.1rem;
  width: 22.7rem;
  height: 7.8rem;
  border-radius: 1rem;
  background-color: #ffffff;
}

.compare__ellipse {
  position: absolute;
  top: 1.08rem;
  left: 3.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.45rem;
  height: 5.67rem;
  border-radius: 50%;
  color: var(--c-ivory-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.compare--trad-eng .compare__ellipse {
  background-color: #727272;
}

.compare--trad-ai .compare__ellipse {
  background-color: #4a4a4a;
}

.compare--gschool .compare__ellipse {
  background-color: #35a8af;
}

.compare__l1,
.compare__l2 {
  position: absolute;
  left: 17.5rem;
  z-index: 1;
  color: var(--c-text);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.23;
  white-space: nowrap;
}

.compare__l1 {
  top: 1.9rem;
}

.compare__l2 {
  top: 4.35rem;
}

/* ぶら下げ（margin-left: -1.8rem）にすると◎△が左の楕円に重なるため、
   Figma と同じくテキスト枠の内側に収める。 */
.compare__mark {
  display: inline-block;
  width: 1.8rem;
}

.compare__hl {
  left: 19.1rem;
  height: 1.1rem;
}

.compare__hl--1 {
  top: 2.4rem;
  width: 14.7rem;
}

.compare__hl--2 {
  top: 4.9rem;
  width: 8.4rem;
}

/* ============================================================
 * ビジネス×AIの本質的なスキルをご提供します（Figma 8560–8864px）
 * ============================================================ */
.sec-provide {
  height: 30.4rem;
  color: var(--c-ivory-text);
}

.sec-provide__wave {
  /* なみなみ・オレンジ帯・グラデーション・傾きをすべて含む 1 枚の帯画像。
     旧：波形 SVG＋水平な単色矩形（.sec-provide__terra）の 2 要素構成で、
     どちらも傾いていなかった */
  position: absolute;
  top: -2.46rem;
  left: 0;
  width: 40.2rem;
  height: 36.36rem;
  max-width: none;
}

.sec-provide__line1 {
  top: 9.99rem;
  left: 3.5rem;
  width: 30.65rem;
  height: 3.01rem;
  z-index: 1;
}

.sec-provide__line1 p {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-provide__line2 {
  /* 帯が Figma の正しい位置（厚み 50px）になったのに合わせ、文字も帯の中心へ */
  top: 13.77rem;
  left: 2.02rem;
  width: 36.88rem;
  height: 4.14rem;
  z-index: 1;
}

.sec-provide__line2 p {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-provide__line3 {
  top: 19.16rem;
  left: 25.1rem;
  width: 12.76rem;
  height: 2.36rem;
  z-index: 1;
}

.sec-provide__line3 p {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* ============================================================
 * 5つの強化カリキュラム（Figma 8864–9473px）
 * ============================================================ */
.sec-advanced {
  height: 60.9rem;
  color: var(--c-text);
}

.sec-advanced__heading span {
  position: absolute;
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-advanced__heading-1 {
  top: 0.01rem;
  left: 9.95rem;
}

.sec-advanced__heading-2 {
  top: 2.91rem;
  left: 10.67rem;
}

.sec-advanced__heading .sec-advanced__num {
  top: 1.97rem;
  left: 10.4rem;
  font-family: "Inter", var(--font-base);
  font-size: 2.832rem;
}

.advcard {
  position: absolute;
  left: 5.07rem;
  width: 30.05rem;
  height: 8.87rem;
  border: 0.1rem solid var(--c-deep);
  background-color: #ffffff;
}

.advcard--1 {
  top: 8.83rem;
}

.advcard--2 {
  top: 18.77rem;
}

.advcard--3 {
  top: 28.71rem;
}

.advcard--4 {
  top: 38.65rem;
}

.advcard--5 {
  top: 48.58rem;
}

.advcard__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  height: 3.1rem;
  background-color: var(--c-deep);
  color: var(--c-ivory-text);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.advcard__icon {
  width: 1.77727rem;
  height: 1.50801rem;
}

/* 見出し帯を除いた残りの高さいっぱいに広げ、その中で上下中央に置く。
   固定の padding-top だと枠の下寄りになっていた。 */
.advcard__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 3.1rem);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
  white-space: nowrap;
}

/* ============================================================
 * FDEとしての専門性・希少価値を高める（Figma 9473–9702px）
 * ============================================================ */
.sec-rarity {
  height: 22.9rem;
  color: var(--c-ivory-text);
}

.sec-rarity__shape {
  /* 傾き・グラデーションを含めてマーケ部ご提供の帯画像に差し替え
     （旧：CSS の単色矩形。傾いておらずグラデーションも無かった） */
  position: absolute;
  top: -1.85rem;
  left: 0;
  width: 40.2rem;
  height: 19.47rem;
  max-width: none;
}

.sec-rarity__illust {
  position: absolute;
  top: 1.73rem;
  left: 25.17rem;
  width: 13.33rem;
  height: 13.32rem;
  transform: rotate(-2.09deg);
}

.sec-rarity__lead {
  top: 6.1rem;
  left: 4.82rem;
  width: 18.56rem;
  height: 5.27rem;
  z-index: 1;
}

.sec-rarity__lead p {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  line-height: 2.3rem;
  white-space: nowrap;
}

.sec-rarity__terra {
  /* 同上。旧：水平なグラデーション矩形 */
  position: absolute;
  top: 11.26rem;
  left: 0;
  width: 40.2rem;
  height: 6.61rem;
  max-width: none;
}

/* 帯に対して 1.05rem 下寄りだった。Figma では文言の中心が帯の中心と一致する（Issue #54） */
.sec-rarity__strong {
  top: 12.97rem;
  left: 3.17rem;
  width: 33.96rem;
  height: 3.43rem;
  z-index: 1;
}

.sec-rarity__strong p {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.09rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* ============================================================
 * 成長が循環するエコシステム（Figma 9702–10401px）
 * ============================================================ */
.sec-eco {
  height: 69.9rem;
  color: var(--c-text);
}

.sec-eco__heading span {
  position: absolute;
  z-index: 1;
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-eco__heading-1 {
  top: 0;
  left: 8.9rem;
}

.sec-eco__heading-2 {
  top: 2.9rem;
  left: 4.1rem;
}

.sec-eco__hl {
  top: 4.4rem;
  left: 3.4rem;
  width: 33.2rem;
  height: 1.1rem;
}

.sec-eco__lead {
  position: absolute;
  top: 9.28rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.48;
  text-align: center;
  white-space: nowrap;
}

.sec-eco__diagram {
  position: absolute;
  left: 2.8rem;
  width: 34.7rem;
}

.sec-eco__diagram--1 {
  top: 15rem;
  height: 18.3rem;
}

.sec-eco__diagram--2 {
  top: 34.6rem;
  height: 33.4rem;
}

/* ============================================================
 * GSchoolへの無料登録でGWorkも無料（Figma 10401–10497px）
 * ============================================================ */
.sec-gwork {
  height: 9.6rem;
  color: var(--c-ivory-text);
}

.sec-gwork__band {
  position: absolute;
  top: 0;
  left: -0.3rem;
  width: 40.8rem;
  height: 8.8rem;
  background-color: #35a0a5;
}

.sec-gwork__hl {
  position: absolute;
  height: 2.2rem;
  background-color: var(--c-deep);
}

.sec-gwork__hl--1 {
  top: 2.1rem;
  left: 8.6rem;
  width: 20.7rem;
}

.sec-gwork__hl--2 {
  top: 4.6rem;
  left: 4.9rem;
  width: 13.8rem;
}

.sec-gwork__line1,
.sec-gwork__line2 {
  position: absolute;
  z-index: 1;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-gwork__line1 {
  top: 2.1rem;
  left: 8.95rem;
}

.sec-gwork__line2 {
  top: 4.55rem;
  left: 5.3rem;
}

/* ============================================================
 * これまでのGSchool受講生の声（Figma 10497–11099px）
 * ============================================================ */
.sec-voice {
  height: 60.2rem;
  color: var(--c-ivory-text);
}

/* 透過グラデーション付きの帯画像（マーケ部ご提供）に差し替え。
   旧：CSS の単色／クリップパスで、グラデーションが再現できていなかった。
   素材は Figma の 450px 幅フレーム基準（402px カラムの 450/402 倍）のため、
   幅 40.2rem（＝カラム幅）に縮めて配置する。 */
.sec-voice__shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 40.2rem;
  height: 61.37rem;
  max-width: none;
}

.sec-voice__heading {
  position: absolute;
  top: 7.8rem;
  left: 6rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* 3 枚目が右端で見切れるレイアウトを横スクロールで再現する */
.sec-voice__list {
  position: absolute;
  /* カードの中身が Figma より 6px 上にあり、年代の枠が上寄りに見えていた（Issue #57） */
  top: 14rem;
  left: 0;
  display: flex;
  gap: 1.6rem;
  width: 100%;
  padding: 0 1.3rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sec-voice__list::-webkit-scrollbar {
  display: none;
}

.voice {
  position: relative;
  flex: none;
  width: 17.4rem;
  /* 4 枚とも I.Aさんのカードと同じ高さに揃える（Issue #127）。
     以前は I.Aさんだけ 29.3rem で、他 3 枚が低く不揃いだった */
  height: 29.3rem;
  background-color: var(--c-ivory);
  scroll-snap-align: start;
}

.voice__photo {
  position: absolute;
  top: -0.43rem;
  left: 9.2rem;
  width: 8.7rem;
  height: 8.7rem;
  overflow: hidden;
}

.voice__photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 被写体に合わせて切り抜き済みの正方形画像をそのまま枠いっぱいに敷く。
     旧実装は横長写真を固定オフセットで切り抜いていたため、被写体の位置が
     異なる VOC ごとに見え方がずれていた（Issue #59） */
  object-fit: cover;
  max-width: none;
}

.voice__name {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding-left: 2.6rem;
  width: 9.2rem;
  height: 2.8rem;
  background-color: #494544;
  color: var(--c-ivory-text);
  font-size: 1.187rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.voice__name-suffix {
  margin-left: 0.2rem;
  font-size: 0.831rem;
}

.voice__age {
  position: absolute;
  top: 3.6rem;
  left: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 1.4rem;
  border: 0.1rem solid #494544;
  background-color: #d9d9d9;
  color: var(--c-text);
  font-size: 0.831rem;
  font-weight: 700;
  letter-spacing: 0.0831rem;
  line-height: 1;
}

.voice__label {
  position: absolute;
  left: 1.9rem;
  display: flex;
  align-items: center;
  /* justify-content 未指定＋左パディングだと文字が右へ寄り、枠からはみ出していた */
  justify-content: center;
  /* Figma のタグ幅は 49px。4.5rem では 4px 足りず文字のはみ出しが目立っていた */
  width: 4.9rem;
  height: 1.1rem;
  background-color: #494544;
  color: var(--c-ivory-text);
  font-size: 0.796rem;
  font-weight: 700;
  line-height: 1;
}

.voice__label--period {
  top: 5.6rem;
}

.voice__label--content {
  top: 10.1rem;
}

/* Figma では値の枠にも #494544 の 1px 枠線が付き、幅は中身に合わせて変わる。 */
.voice__value {
  position: absolute;
  left: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6rem;
  border: 0.1rem solid #494544;
  background-color: #d9d9d9;
  color: var(--c-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.voice__value--period {
  top: 6.6rem;
  width: 6.7rem;
  height: 2.8rem;
}

.voice__value--content {
  top: 11.13rem;
  /* 絶対配置＋width 未指定で shrink-to-fit にする。max-content だと
     border-box のぶん内側が足りず、意図しない位置で折り返してしまう。 */
  width: auto;
  max-width: 15rem;
  height: auto;
  min-height: 1.4rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.831rem;
  letter-spacing: 0.0831rem;
}

/* Figma では引用の一部だけ細字になっている。太字部分は .voice__quote の 700。 */
.voice__quote-thin {
  font-weight: 400;
}

.voice__quote {
  position: absolute;
  top: 14.39rem;
  left: 1.49rem;
  width: 14.5rem;
  color: var(--c-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
}

.sec-voice__note {
  position: absolute;
  /* カードの下端から少し離す（Issue #127 で 10px 下げる指定） */
  top: 44.6rem;
  left: 3.7rem;
  color: var(--c-ivory-text);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-voice__cta {
  position: absolute;
  top: 46.6rem;
  left: 2rem;
  margin-inline: 0;
}

/* ============================================================
 * ご受講の流れ／開講予定（Figma 11099–11769px）
 * ============================================================ */
.sec-flow {
  height: 67rem;
  color: var(--c-text);
}

.sec-flow__heading {
  position: absolute;
  top: 0.07rem;
  left: 9.48rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.step {
  position: absolute;
  left: 4.52rem;
  width: 31.16rem;
  border: 0.1rem solid #494544;
  border-radius: 1rem;
  background-color: var(--c-ivory);
}

.step--1 {
  top: 5.24rem;
  height: 9.19rem;
}

.step--2 {
  top: 16.72rem;
  height: 9.19rem;
}

.step--3 {
  top: 27.84rem;
  height: 10.95rem;
}

/* Figma より 2 割ほど大きかったため 1rem に。行送り 18px は維持する（Issue #60） */
.step__label {
  position: absolute;
  top: -0.1rem;
  left: -0.1rem;
  border-radius: 1rem 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.84rem;
  height: calc(100% + 0.2rem);
  background-color: #494544;
  color: var(--c-ivory-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  white-space: nowrap;
}

.step__body {
  position: absolute;
  top: 50%;
  left: 10.84rem;
  width: 20.32rem;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  white-space: nowrap;
}

.sec-flow__arrow {
  position: absolute;
  left: 15.77rem;
  width: 8.661rem;
  height: 1.34rem;
  background-color: #494544;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.sec-flow__arrow--1 {
  top: 14.33rem;
}

.sec-flow__arrow--2 {
  top: 25.83rem;
}

.schedule {
  position: absolute;
  top: 41.73rem;
  left: 5.36rem;
  width: 29.9rem;
  height: 12.6rem;
  overflow: hidden;
  border-radius: 1rem;
  /* 背景（アイボリー）と同色でフレームが見えなくなっていた（Issue #61） */
  background-color: #ffffff;
}

.schedule__head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.6rem;
  background-color: var(--c-deep);
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.schedule__main {
  padding-top: 1.4rem;
  color: var(--c-text);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.schedule__year,
.schedule__unit {
  font-size: 2rem;
}

/* 「年 　 月開講」の空白だけでは幅が足りず、絶対配置の「10」が「年」「月」に
   ぶつかっていた。半角スペース 2 つ分を広げて Figma の字間に合わせる */
.schedule__unit {
  word-spacing: 0.7rem;
}

.schedule__month {
  position: absolute;
  top: 5.3rem;
  left: 13.58rem;
  font-family: "Inter", var(--font-base);
  font-size: 3.2rem;
}

.schedule__sub {
  padding-top: 0.8rem;
  color: var(--c-text);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* 倍率は Figma の実測幅 320px に合わせた値。左右 0 + .cta の margin-inline: auto で
   カラム中央に揃える（従来は幅が 337px あり left 固定だったため、右にずれて見えていた）。 */
.sec-flow__cta {
  --s: 0.84;
  position: absolute;
  top: 58.01rem;
  right: 0;
  left: 0;
}

/* ============================================================
 * よくあるご質問（Figma 11769–12102px）
 * ============================================================ */
.sec-faq {
  height: 40.4rem;
  color: var(--c-ivory-text);
}

.sec-faq__shape {
  position: absolute;
  top: 0.09rem;
  left: -0.95rem;
  width: 41.322rem;
  height: 40.404rem;
  background-color: var(--c-deep);
}

.sec-faq__heading {
  position: absolute;
  top: 2.4rem;
  left: 15.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.faq {
  position: absolute;
  left: 2.8rem;
  width: 34.67rem;
  border-radius: 0.5rem;
  background-color: var(--c-ivory);
}

.faq--1 {
  top: 6rem;
  height: 7.2rem;
}

.faq--2 {
  top: 14.45rem;
  height: 7.2rem;
}

/* 回答が 1 行だった頃は 5.73rem だったが、文言変更で 2 行になったため
   他のカードと同じ 7.2rem にする。伸びた 1.47rem ぶん faq--4 も下げる（Issue #114） */
.faq--3 {
  top: 22.92rem;
  height: 7.2rem;
}

.faq--4 {
  top: 31.43rem;
  height: 7.2rem;
}

.faq__q,
.faq__a {
  position: relative;
  padding-right: 1.2rem;
  /* Figma はこの箇所を Noto Sans JP で組んでいる（Inter だと英字が広く溢れる） */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
}

.faq__q {
  color: var(--c-ivory-text);
}

.faq__a {
  color: var(--c-text);
}

.faq__q {
  display: flex;
  align-items: center;
  height: 2.83rem;
  padding-left: 3.55rem;
  border-radius: 0.5rem 0.5rem 0 0;
  background-color: #35a8af;
}

/* Q帯を除いた残りの高さいっぱいに広げ、その中で本文を上下中央に置く。
   固定の padding-top だと 1 行の faq--3 と 2 行の他とで中心がずれるため。 */
.faq__a {
  display: flex;
  align-items: center;
  height: calc(100% - 2.83rem);
  padding: 0 0 0 3.55rem;
  /* Figma の行送りは 15px（Q帯の 1.75 とは別） */
  line-height: 1.5;
}

.faq__mark {
  position: absolute;
  top: 0.6rem;
  left: 1.38rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.63rem;
  height: 1.63rem;
  border-radius: 50%;
  background-color: rgba(0, 56, 67, 0.55);
  color: var(--c-ivory-text);
  font-size: 1rem;
  line-height: 1;
}

.faq__mark--a {
  top: 0.9rem;
  background-color: var(--c-deep);
}

/* ============================================================
 * 最終CTA（Figma 12102–12432px）
 * ============================================================ */
.sec-cta--final {
  height: 25.9rem;
}

/* 写真は Figma のマスク（12172.7px から 475×225.2）に合わせて切り出す */
.sec-cta--final .sec-cta__photo-wrap {
  position: absolute;
  top: 0;
  left: -3.7rem;
  width: 47.5rem;
  height: 22.52rem;
  overflow: hidden;
}

.sec-cta--final .sec-cta__photo {
  top: -7.07rem;
  left: -2.05rem;
  width: 52.41rem;
  height: 31.99rem;
}

.sec-cta--final .sec-cta__overlay {
  top: 0;
  left: -3.2rem;
  width: 45.8rem;
  height: 22.5rem;
}

.sec-cta--final .sec-cta__panel {
  top: 1.8rem;
  left: -0.9rem;
}

.sec-cta--final .sec-cta__line1 {
  top: 3.9rem;
  left: 10.7rem;
}

.sec-cta--final .sec-cta__line2 {
  top: 6.8rem;
  left: 2.8rem;
}

.sec-cta--final .sec-cta__marker {
  top: 8rem;
  left: 2.3rem;
}

.sec-cta--final .sec-cta__button {
  top: 12.7rem;
  left: 2.1rem;
}

/* ============================================================
 * Zoho Forms の埋め込み
 *   高さは Figma のフォーム欄実測（PC 換算 約1237px）に合わせている。
 *   フォーム単体でスクロールが出ないようにするための指定。
 * ============================================================ */
.lp-form {
  padding: 4rem 0 3rem;
  background-color: #f5f5f5;
}

/* 高さは JS（initFormResize）が Zoho からの通知で上書きする。
   ここの値は通知が届かなかった場合の控え。402px 幅での実測 1694px を
   下回るとフォームが入り切らず、送信ボタンが iframe の内側スクロールでしか
   押せなくなるため、足りなくならない側に倒している（Issue #140）。 */
.lp-form iframe {
  display: block;
  width: 100%;
  height: 170rem;
  border: none;
}

/* ============================================================
 * フッター（Figma 12432–12759px）
 * ============================================================ */
.lp-footer {
  padding-top: 3.3rem;
  background-color: #f5f5f5;
  color: #000000;
}

.lp-footer__nav {
  position: relative;
  /* 24.5rem では下段グループ（規約関連／会社情報）の最終行がコピーライト帯に
     かかっていた。Figma の帯の位置（フッター上端から 317px）に合わせる */
  height: 28.4rem;
}

.lp-footer__group {
  position: absolute;
}

.lp-footer__group h2 {
  margin-bottom: 1.3rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* li 自身がフォント指定を持たず body の 14px/21px を継承していたため、
   a を 1rem にしていても行ボックスが 21px になり、リンクの行間が広がって
   下段グループ（規約関連／会社情報）と重なっていた（Issue #65） */
.lp-footer__group li {
  font-size: 1rem;
  line-height: 1.2;
}

.lp-footer__group li + li {
  margin-top: 1rem;
}

.lp-footer__group a {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

@media (hover: hover) {
  .lp-footer__group a:hover {
    text-decoration: underline;
  }
}

.lp-footer__group--service {
  top: 0;
  left: 6.5rem;
}

.lp-footer__group--gschool {
  top: 0;
  left: 23.7rem;
}

.lp-footer__group--terms {
  top: 14.2rem;
  left: 6.5rem;
}

.lp-footer__group--company {
  top: 14.2rem;
  left: 23.7rem;
}

.lp-footer__copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  background-color: #35a0a5;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ============================================================
 * 追従 CTA
 * ============================================================ */
.lp-sticky-cta {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  z-index: 30;
  margin-inline: 0;
  transform: translateX(-50%) translateY(140%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

.lp-sticky-cta.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .lp-sticky-cta {
    transition: none;
  }
}

/* ============================================================
 * PC シェル（1440px 以上）
 *   Figma「●PCサイズ」351:2 を 1440px 基準の px で組む。
 *   中央のカラムだけが rem でスケールし、シェルは画面端に固定する。
 * ============================================================ */
.pc-shell {
  display: none;
}

@media (min-width: 1440px) {
  .pc-shell {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    color: var(--c-ivory-text);
    pointer-events: none;
  }

  .pc-shell a {
    pointer-events: auto;
  }

  .pc-shell__band {
    position: absolute;
    /* 画像（1440x355）の縦中心を Figma と同じ 414.5px に固定し、幅いっぱいに
     * 相似拡大する。旧実装は height を 355px に固定して object-fit: cover で
     * 敷いていたため、1440px より広い画面では上下がトリミングされ、画像の
     * 一番上に達している帯の右端が切れていた（Issue #24）。 */
    top: 414.5px;
    left: 0;
    width: 100%;
    height: auto;
    max-width: none;
    transform: translateY(-50%);
  }

  .pc-shell__logos {
    position: absolute;
    top: 51px;
    left: 39px;
    display: block;
    width: 295px;
  }

  .pc-shell__logos img:first-child {
    display: block;
    width: 278px;
    height: auto;
    margin-left: 11px;
  }

  .pc-shell__logos img:last-child {
    display: block;
    width: 295px;
    height: auto;
    margin-top: 16px;
  }

  /* 右側の Contents ナビ */
  .pc-nav {
    position: absolute;
    top: 46px;
    right: 81px;
    width: 346px;
  }

  .pc-nav__title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2.8px;
    line-height: 1.2;
  }

  .pc-nav__title::after {
    content: '';
    display: block;
    width: 434px;
    height: 1px;
    margin-top: 17px;
    background-color: rgba(245, 242, 232, 0.5);
  }

  .pc-nav__list {
    margin-top: 28px;
  }

  .pc-nav__item + .pc-nav__item {
    margin-top: 14px;
  }

  .pc-nav__item a {
    position: relative;
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 40px 0 20px;
    border-radius: 4px;
    /* Figma の PCフレームでは各ボタンの下と右に濃い影が約7px落ちている */
    background-color: #35a8af;
    box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    transition: filter 0.2s ease;
  }

  .pc-nav__item--tall a {
    height: 80px;
  }

  @media (hover: hover) {
    .pc-nav__item a:hover {
      filter: brightness(1.1);
    }
  }

  .pc-nav__chevron {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 15.6px;
    height: 15.1px;
    transform: translateY(-50%);
    fill: var(--c-ivory-text);
  }

  /* 右下の CTA パネル */
  .pc-shell__cta {
    position: absolute;
    right: -5px;
    bottom: 106px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 541px;
    height: 191px;
  }

  .pc-shell__cta .cta {
    --s: 1.064;
    margin-inline: 0;
  }

  /* 最下部のフッター帯 */
  .pc-shell__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 108px;
    background-color: #35a8af;
  }

  .pc-shell__links {
    position: absolute;
    top: 29px;
    left: 31px;
    display: grid;
    grid-template-columns: 214px auto;
    gap: 11px 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
  }

  @media (hover: hover) {
    .pc-shell__links a:hover {
      text-decoration: underline;
    }
  }

  .pc-shell__copyright {
    position: absolute;
    top: 45px;
    right: 124px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
  }

  /* カラムはシェルより前面に置く */
  .lp {
    position: relative;
    z-index: 2;
  }

  /* PC ではヘッダー・ハンバーガー・追従 CTA を出さない（右下パネルが CTA を担う） */
  .lp-header,
  .lp-menu,
  .lp-sticky-cta {
    display: none;
  }
}

/* ============================================================
 * Thanks ページ（/ai-fde-program/thanks/ · Figma 475:49 / 402x874）
 * ============================================================ */
/* 背景は body に敷いたグラデーション画像（bg-texture.webp）を、カラムの内外どちらにも
   そのまま見せる（マーケ部ご指定・Issue #68）。
   .lp が持つ縦グラデーションだけを打ち消せば、body の背景が透けて 1 枚に見える。
   カラムの内と外で別々に敷くと、それぞれの高さを基準に拡大されて境目に段差が出るため、
   ここでは背景を「敷かない」ことで継ぎ目をなくしている。 */
.thanks-body {
  color: #000000;
}

.thanks {
  height: 87.4rem;
  background-image: none;
}

.thanks__sheet {
  position: absolute;
  top: 3.7rem;
  bottom: 1.7rem;
  left: 50%;
  width: 35.8rem;
  transform: translateX(-50%);
  background-color: rgba(245, 242, 232, 0.9);
}

.thanks__bar {
  position: absolute;
  top: 5.3rem;
  left: -1.3rem;
  width: 43.1rem;
  height: 6.5rem;
  background-color: var(--c-cta-bottom);
}

.thanks__title {
  position: absolute;
  top: 7.4rem;
  left: calc(50% - 15rem);
  color: var(--c-ivory-text);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.thanks__rule {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.35);
}

.thanks__rule--v {
  top: 16.6rem;
  left: 5.1rem;
  width: 0.1rem;
  height: 55rem;
}

.thanks__rule--h1 {
  top: 20.9rem;
  left: 5.2rem;
  width: 30.3rem;
  height: 0.1rem;
}

.thanks__rule--h2 {
  top: 38.8rem;
  left: 5.1rem;
  width: 25.6rem;
  height: 0.1rem;
}

.thanks__rule--h3 {
  top: 71.6rem;
  left: 5.1rem;
  width: 25.6rem;
  height: 0.1rem;
}

.thanks__step {
  position: absolute;
  left: 3.7rem;
  display: flex;
  align-items: center;
  padding-left: 2.1rem;
  width: 10rem;
  height: 3.5rem;
  border-radius: 2rem;
  background-color: var(--c-deep);
  color: var(--c-ivory-text);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.thanks__step--1 {
  top: 13.3rem;
}

.thanks__step--2 {
  top: 28.8rem;
}

.thanks__step--3 {
  top: 64.3rem;
}

.thanks__lead,
.thanks__text,
.thanks__note {
  position: absolute;
  left: 6.7rem;
}

.thanks__lead {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.3rem;
}

.thanks__lead--1 {
  top: 17.9rem;
}

.thanks__lead--2 {
  top: 33.2rem;
  white-space: nowrap;
}

.thanks__lead--3 {
  top: 68.9rem;
  white-space: nowrap;
}

.thanks__text {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 2.2rem;
}

.thanks__note {
  font-weight: 400;
}

.thanks__text a {
  text-decoration: underline;
}

/* 診断リンク・LINE リンクのタップ領域を 45px 確保する（Issue #136）。
   文字だけだと当たり判定が 21px しかなく、モバイルの推奨最小 44px を大きく下回る。
   絶対配置・Figma 準拠の座標を崩さないよう ::after で領域だけ広げ、
   直下が空いている下方向に厚みを寄せている（見た目は変わらない）。
   メールリンク（.thanks__text--3）は 2 行組みの 1 行目にあり、下方向の拡張が
   2 行目に被るため対象外。 */
.thanks__text--1 a,
.thanks__text--4 a {
  position: relative;
}

.thanks__text--1 a::after,
.thanks__text--4 a::after {
  content: '';
  position: absolute;
  inset: -0.4rem -0.5rem -2rem;
}

.thanks__text--1 {
  top: 22.2rem;
  font-size: 1.5rem;
  line-height: 2.3rem;
}

/* STEP2 の訴求文。罫線（38.8rem）と .thanks__text--2（47.9rem）の間の
   空きに、3行ぶん（22px×3）を上下ほぼ均等に収める。 */
.thanks__text--offer {
  top: 40.2rem;
  white-space: nowrap;
}

/* 【期間限定・半額】の訴求部分だけテラコッタにする */
.thanks__accent {
  color: var(--c-cta-bottom);
}

.thanks__text--2 {
  top: 47.9rem;
  white-space: nowrap;
}

.thanks__text--3 {
  top: 57.8rem;
  white-space: nowrap;
}

.thanks__text--4 {
  top: 72.6rem;
  white-space: nowrap;
}

.thanks__present {
  position: absolute;
  top: 20.6rem;
  left: 22rem;
  width: 23.8rem;
  height: 13.4rem;
  max-width: none;
  object-fit: cover;
}

.thanks__note {
  top: 32.3rem;
  left: 28.1rem;
  font-size: 0.7rem;
  line-height: 2.2rem;
  white-space: nowrap;
}