/*
Theme Name: SWELL CHILD
Theme URI: https://swell-theme.com/
Description: SWELL専用の子テーマ（イエナアカデミー トップページ）。親テーマSWELLの機能を継承しつつ、front-page.phpでトップページをフルカスタム実装します。
Author: LIQUID
Author URI: https://swell-theme.com/
Template: swell
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: swell_child
*/

/* ============================================================
   注意: 以下は static-prototype/css/style.css を統合（直書き）。
   見た目はプロト（Figma一致版）と完全等価。改変禁止。
   画像参照は functions.php / front-page.php 側で
   get_stylesheet_directory_uri()/assets/img に解決される。
   （本CSS内に画像URLのハードコードは無いため置換不要）
   ============================================================ */

/* ============================================================
   イエナアカデミー トップページ
   静的プロトタイプ CSS（BEM）
   Figma: 1440 × 8683 / PCピクセルパーフェクト基準
   ------------------------------------------------------------
   構成:
   0. トークン / リセット / 共通
   1. ヘッダー / ドロワー
   2. ヒーロー
   3. 入塾説明会バナー
   4. Our Mission
   5. 3導線カード
   6. コース紹介
   7. Our Features
   8. お客様の声
   9. BLOG
   10. 英語教育CI
   11. フッター
   12. レスポンシブ（※SP/タブレット暫定：クライアントデザイン待ち）
   ============================================================ */

/* ============================================================
   0. トークン / リセット / 共通
   ============================================================ */
:root {
  /* カラー */
  --c-navy:        #003984;
  --c-navy-2:      #002e6b;  /* #037 相当の濃ネイビー */
  --c-navy-3:      #002961;
  --c-navy-4:      #012556;
  --c-navy-5:      #001e47;
  --c-navy-6:      #001b40;
  --c-text:        #333333;
  --c-sub:         #707070;
  --c-bg:          #f8f8f8;
  --c-border:      #e3e5ea;
  --c-line:        #d9d9d9;
  --c-white:       #ffffff;

  /* フォント */
  --f-zen:    'Zen Kaku Gothic New', sans-serif;
  --f-barlow: 'Barlow', sans-serif;
  --f-noto:   'Noto Sans JP', sans-serif;

  /* レイアウト */
  --container:    1440px;
  --gutter:       60px;   /* Figma基準左右余白 */

  /* ニューモーフィズム影（ピル/ボタン） */
  --shadow-pill: 0 4px 4px 0 var(--c-border), -3px -3px 5px 0 #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; scroll-padding-top: 140px; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--f-zen);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; }
h1, h2, h3, p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 英字セクションラベル（ Xxx ） */
.label {
  font-family: var(--f-barlow);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1.6px;
  color: var(--c-navy);
}
.label--white { color: var(--c-white); }

/* ピルボタン -------------------------------------------------- */
/* Figma忠実: ドットは「ピル左端から固定px・縦中央」に絶対配置し、
   テキストはドットに依存せずピル全幅で中央寄せにする（テキスト相対のgap方式をやめる）。
   各ピルの左オフセットは --dot-x で個別指定（Figma Ellipse x − ボタン x）。 */
.pill {
  --dot-x: 24px;           /* w176/w200系の標準オフセット */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  border-radius: 22px;
  font-family: var(--f-barlow);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;          /* テキストの上下中央化（baseline下がり防止） */
  letter-spacing: 0.6px;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
/* ピル内テキストもライン高1で中央に揃える */
.pill > :not(.pill__dot) { line-height: 1; }
.pill__dot {
  position: absolute;
  left: var(--dot-x);
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-navy);
  flex-shrink: 0;
}
.pill__dot--light { background: var(--c-white); }
.pill--light {
  background: var(--c-bg);
  color: var(--c-text);
  box-shadow: var(--shadow-pill);
}
.pill--navy {
  background: var(--c-navy);
  color: var(--c-white);
  box-shadow: var(--shadow-pill);
}
.pill:hover { transform: translateY(-1px); opacity: .92; }

/* ============================================================
   1. ヘッダー / ドロワー
   ============================================================ */
.header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 120px;
  background: var(--c-white);
  z-index: 120;   /* ドロワー(z110)より上。ハンバーガーを常にクリック可能にする */
}
/* Figma忠実: header__inner を 1440px 中央固定の絶対座標キャンバスにする。
   nav各項目・CTA・ハンバーガーは Figma の left/top をそのまま絶対配置する */
.header__inner {
  position: relative;
  max-width: var(--container);
  height: 100%;
  margin-inline: auto;
}
/* ロゴ: Figma left≈67 / top≈5 / w198 */
.header__logo {
  position: absolute;
  left: 67px;
  top: 50%;
  transform: translateY(-50%);
}
.header__logo img { width: 198px; height: auto; }

/* グローバルナビ: 各項目を Figma の絶対座標で配置（text top48 / 12px / Zen Medium / #333） */
.global-nav { position: static; }
/* Figma text top48。lh1のボックス上端が+7pxずれるため41pxで視覚位置を48に合わせる
   （CTAピルのテキスト中心と水平を揃える） */
.global-nav__item {
  position: absolute;
  top: 41px;
}
.global-nav__item--home    { left: 660px; }
.global-nav__item--about   { left: 726px; }
.global-nav__item--courses { left: 798px; }
.global-nav__item--school  { left: 890px; }
.global-nav__item--news    { left: 970px; }
.global-nav__link {
  font-family: var(--f-zen);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--c-text);
  white-space: nowrap;
  line-height: 1;
  transition: color .2s ease;
}
.global-nav__link:hover { color: var(--c-navy); }

/* CTAピル: Figma box w136 h28 r14 / 体験box left1050 / 保護者box left1198 / box top43 */
.header__cta { position: static; }
.header__pill {
  --dot-x: 16px;      /* Figma: box left1050, dot left1066 = +16 */
  position: absolute;
  top: 43px;
  width: 136px;
  height: 28px;
  padding: 0 16px;
  justify-content: center;
  font-family: var(--f-zen);
  font-weight: 500;
  border-radius: 14px;
}
.header__pill--trial    { left: 1050px; }
.header__pill--guardian { left: 1198px; }

/* ハンバーガー: Figma right端 left1363 / top53 / w20 h10（PCでも表示） */
/* Figma Group2: w20 / 3本線（Line1 y1 / Line2 y6 / Line3 y11）= ピッチ5px・stroke2px・navy */
.hamburger {
  position: absolute;
  left: 1363px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;            /* 2px線×3 + gap3px×2 = 12px（Figma h12相当） */
  width: 24px;
  height: 24px;
  z-index: 120;   /* ドロワー(z110)より上。開放中もハンバーガーで閉じられるように */
}
.hamburger__bar {
  display: block;
  width: 20px;   /* Figma: w20 */
  height: 2px;
  background: var(--c-navy);   /* Figma: stroke #003984 */
  transition: transform .3s ease, opacity .3s ease;
}
/* 開放時は3本線の中央を消して上下を×に */
.hamburger.is-open .hamburger__bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburger.is-open .hamburger__bar:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger__bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ドロワー（※SP暫定：クライアントデザイン待ち） */
.drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(80vw, 320px);
  height: 100%;
  background: var(--c-white);
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
  transform: translateX(100%);
  transition: transform .3s ease;
  z-index: 110;
  padding: 100px 28px 40px;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer__list { display: flex; flex-direction: column; gap: 4px; }
.drawer__link {
  display: block;
  padding: 14px 8px;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--c-border);
}
.drawer__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.drawer__cta .pill { justify-content: center; width: 100%; }
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);   /* 背後コンテンツの透けを抑える */
  z-index: 105;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------
   WP管理バー対応（ログイン時のみ）
   ログイン時は WordPress が <body> に .admin-bar を付与し、
   <html> に margin-top:32px(PC) / 46px(≤782px) が入る。
   固定ヘッダー(.header top:0)は最上部のままなのに .hero は管理バー分押し下げられ、
   ヘッダー下端とKV上端の間に空白が出る。これを解消するため、
   .admin-bar のとき固定ヘッダー（とドロワー）を管理バー高さぶん下げる。
   ※ 未ログイン（.admin-bar 無し）には一切影響しない。
   ------------------------------------------------------------ */
.admin-bar .header { top: 32px; }
.admin-bar .drawer { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .header { top: 46px; }
  .admin-bar .drawer { top: 46px; }
}

/* ============================================================
   2. ヒーロー（Figma: y120 / 1440×698）
   ============================================================ */
.hero {
  position: relative;
  margin-top: 120px;   /* 固定ヘッダー分 */
  height: 698px;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.hero__copy {
  position: relative;
  max-width: var(--container);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__heading { margin: 0; font-weight: 300; }
.hero__line {
  position: absolute;
  display: block;
  font-family: var(--f-zen);
  font-weight: 300; /* Light */
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: 4.8px;
  color: var(--c-white);
  white-space: nowrap;
}
/* 1行目: top480 / 左 48%付近(calc(33.33%+114px)=594px) */
.hero__line--1 { top: 360px; left: 41.2%; }
/* 2行目: top587 / 左 中央付近(calc(50%+35px)=755px) */
.hero__line--2 { top: 467px; left: 52.4%; }

/* ============================================================
   3. 入塾説明会バナー（Figma: y1013 / 936×330・中央寄せ）
   ============================================================ */
/* Figma忠実: ピーク付きカルーセル。
   ビューポート幅 = 1440px（コンテンツ幅いっぱい・overflow hidden）。
   中央に 936×330 のアクティブスライド、左右に隣スライドが見切れて覗く。
   隙間ゼロで横一列に並べ、中央を画面中央に寄せる（gap 0）。 */
/* Figma: 左隣スライドは x-684、右隣は x2124（1440フレーム外）まで伸びる＝全幅(100vw)。
   ビューポート全幅で overflow hidden、アクティブ936pxを画面中央に。 */
.banner {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  margin: 195px 0 0;
  transform: translateX(-50%);   /* 親(max1440中央)から画面全幅へ引き伸ばし */
  height: 334px;            /* 330(画像) + 枠2px×2 */
  overflow: hidden;
}
.banner__viewport {
  position: static;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* トラック: アクティブスライド(936px)が画面中央(x252〜1188)に来るよう、
   左端を画面中央に置き、半スライド分戻して中央化 → 以降は936px刻みで移動 */
.banner__track {
  position: absolute;
  top: 0;
  left: 50%;                    /* トラック左端=画面中央(720) */
  display: flex;
  align-items: center;
  gap: 0;
  transform: translateX(-468px);  /* 先頭スライド中心(936/2)を画面中央へ。JSで -468-index*936 に更新 */
  transition: transform .4s ease;
}
/* 各スライドは Figma の 936px 固定。アクティブのみ枠線・隣は枠なしで見切れる */
.banner__slide {
  flex: 0 0 936px;
  width: 936px;
  max-width: 936px;
  /* Figma: 中央・左右ピーク含む全バナーに 2px solid #333 の枠線（is-active 限定をやめる） */
  border: 2px solid var(--c-text);
  box-sizing: border-box;
  transition: opacity .4s ease;
}
.banner__slide img { display: block; width: 100%; height: auto; }
.banner__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  z-index: 2;
}
.banner__arrow img { width: 50px; height: 50px; }
/* Figma: 左矢印(Group23) center≈256px / 右矢印(Group22) left1163 center≈1188px。
   中央936枠(x252〜1188)の左外/右端付近に丸矢印を重ねる */
.banner__arrow--prev { left: calc(50% - 468px - 14px - 50px); }
.banner__arrow--next { left: calc(50% + 468px - 37px); }
.banner__arrow--prev img { transform: rotate(180deg); }
.banner__dots {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.banner__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-line);
}
.banner__dot.is-active { background: var(--c-navy); }

/* ============================================================
   4. Our Mission（Figma: y1482〜）
   ============================================================ */
/* Figma: label/title top1482, text top1569, btn top1625。banner img下端1343 → label1482 = 139px
   実測でlabelが+4pxだったため135pxに補正 */
.mission { padding-top: 135px; }
/* 左列: label(54〜) + About btn(61,top1625)。右列: title(503) + text(507,top1569) */
.mission__grid {
  display: grid;
  /* 左列 ≒ 443px (右列 left503 − container内padding60 = 443), gap 0 */
  grid-template-columns: 443px 1fr;
  gap: 0;
}
.mission .label { letter-spacing: 1.6px; }  /* Barlow 16 / Figma tracking1.6 */
/* label(top0) と About btn(top1625-1482=143px) の縦間隔 */
.mission__head { display: flex; flex-direction: column; }
.mission__btn { margin-top: 115px; width: 176px; }  /* label下端(28)+115 ≒ btn top143 */
.mission__title {
  font-family: var(--f-zen);
  font-weight: 400;          /* Zen Regular */
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: 8.4px;
  color: var(--c-text);
  white-space: nowrap;       /* Figma: nowrap（右にはみ出しても1行） */
  margin: 0 0 28px;          /* title top1482 → text top1569 ≒ 87px(=39h+48) */
}
.mission__title { margin-bottom: 48px; }
.mission__text { max-width: 805px; }
.mission__text p {
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.6px;
  color: var(--c-sub);
}
/* Figma: Mission本文は連続1段落（段落間の空白なし）。改行は <br> でのみ制御 */

/* ============================================================
   5. 3導線カード（Figma: y1823 / 各480×480・隙間なし3分割）
   ============================================================ */
/* mission下端 → cards top1823。実測補正で149px（cards top1823に着地） */
.guides { margin-top: 149px; }
.guides__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.guide-card { position: relative; }
.guide-card__link {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.guide-card__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .5s ease;
}
/* Figma マスク位置から逆算した object-position（cover窓の開始位置 ÷ (cover幅-480)）
   card1: mask left0/720cover → 0% （左端）
   card2: mask 13.5px/720cover → 13.5/240 ≒ 6%
   card3: mask 78.9px/639cover → 78.9/159 ≒ 50% */
.guides__list > :nth-child(1) .guide-card__img { object-position: 0% center; }
/* Figma: card2(Consultation)/card3(Contact) はともに画像を水平反転(mirror)して配置。
   CSSの描画順は「object-fit cover の切り抜き → transform」。表示結果＝
   mirror( cover切り抜き(object-position) )。object-position を維持/調整したうえで
   scaleX(-1) を足すと各 ref と一致する。
   - card2: op70 + 反転 = ref-card-consultation.png（植木鉢=左 / 白シャツ人物=右）
   - card3: op50 + 反転 = ref-card-contact.png（セーター=左 / スマホ・手=左 / グリッド柄クッション=右）
   いずれも VRT（原画を op で480cover切り抜き→mirror した画像 vs ref を目視照合）で確定。 */
.guides__list > :nth-child(2) .guide-card__img {
  object-position: 70% center;
  transform: scaleX(-1);
}
.guides__list > :nth-child(3) .guide-card__img {
  object-position: 50% center;
  transform: scaleX(-1);
}
/* hover: card1 は通常拡大。card2/card3 は scaleX(-1) を維持したまま拡大（鏡像を保持） */
.guide-card__link:hover .guide-card__img { transform: scale(1.05); }
.guides__list > :nth-child(2) .guide-card__link:hover .guide-card__img,
.guides__list > :nth-child(3) .guide-card__link:hover .guide-card__img {
  transform: scaleX(-1) scale(1.05);
}
/* Figma: カードに暗幕オーバーレイは無し。ラベルはカード中央寄り(左端から約300px)・
   en=#003984(navy) / ja=#333 / 下線=#d9d9d9 / 矢印=白円ではなく細い円線+塗り三角(navy) */
.guide-card__body {
  position: absolute;
  /* Figma 480px基準の固定px(left:299/top:382)を%化し、中間幅でカード縮小に追従させる
     （pxのままだとカード(=VW/3)が縮んでもラベルが下にはみ出し隠れるため）。
     top 382/480=79.58%。
     left は 62.29%(=Figma 299/480) だが、狭いPC幅(1024付近)ではラベル幅(145px)が
     カード右端をはみ出し en文字がclipされるため、min(62.29%, 100%-150px)で
     最低150pxの表示領域を確保（1440=62.29%でFigma忠実、1024付近は自動で左寄せ）。 */
  left: min(62.29%, calc(100% - 150px));
  top: 79.58%;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
/* Figma個別座標補正（decoded.jsx 各ノード left/top から算出）:
   card1(Trial)  : en/ja/line left = 299 / en top = 382
   card2(Consult): en/ja/line left = 302 / en top = 379
   card3(Contact): en/ja/line left = 302 / en top = 379
   ※差は3px。Figmaの実数値に忠実化（クライアント指摘: カードラベル位置）。
   こちらも%化（left 302/480=62.92% / top 379/480=78.96%）。 */
.guides__list > :nth-child(2) .guide-card__body { left: min(62.92%, calc(100% - 150px)); top: 78.96%; }
.guides__list > :nth-child(3) .guide-card__body { left: min(62.92%, calc(100% - 150px)); top: 78.96%; }
.guide-card__en {
  font-family: var(--f-zen);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1.6px;
  color: var(--c-navy);          /* Figma #003984 */
  line-height: 1.3;
  margin-bottom: 11px;           /* en top2205 → ja top2232 ≒ 27px間隔 */
}
.guide-card__ja {
  position: relative;
  display: flex;
  align-items: center;
  width: 145px;                  /* 下線 w145 と揃える */
}
.guide-card__ja-text {
  font-family: var(--f-zen);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: var(--c-text);          /* Figma #333 */
  line-height: 1.4;
}
/* 下線（Figma line16/node1:51: ja下35px・w145。
   devmode画素サンプル=near-black、目視も濃色 → #333（カードja文字と同色）。
   従来 #d9d9d9 は誤りだったため修正） */
.guide-card__line {
  position: absolute;
  left: 0;
  top: 62px;                     /* en top0基準: ja(top27)下 → line top2267-2205=62 */
  width: 145px;
  height: 1px;
  background: var(--c-text);     /* #333 */
}
/* 矢印（Figma ellipse19: 塗りnavy円 size18 + polygon6: 白三角） */
.guide-card__arrow {
  position: absolute;
  right: -1px;                   /* circle left426 = ja left299 +127。ja幅145の右外側 */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: var(--c-navy);      /* 塗りつぶしnavy円 */
  border-radius: 50%;
}
.guide-card__tri {
  width: 0; height: 0;
  border-style: solid;
  border-width: 3px 0 3px 5px;
  border-color: transparent transparent transparent var(--c-white);  /* 白三角 */
  margin-left: 1px;
}

/* ============================================================
   6. コース紹介（Figma: y2480〜・濃ネイビー）
   ============================================================ */
.courses {
  margin-top: 177px;          /* cards下端2303 + 177 = courses bg top2480 */
  background: var(--c-navy);
  border-radius: 15px 15px 0 0;
  overflow: hidden;
}
/* Figma: bg top2480, label/title top2570(=90px), btn top2715, lead top2723, 帯top2860
   row1 top2860 = bg+380px。padding-top90 + content + padding-bottom101 で帯を2860に落とす
   （btn/leadのmargin-top+7に合わせ padding-bottomを-7して row1位置を維持） */
.courses__header { padding: 90px 0 101px; }
/* Figma構成:
   上段[label 左61 / title 左480] 同じtop2570
   下段[btn 左61 top2715 / lead 左480 top2723]
   左列幅 ≒ 420px(title left480 − container padding60 = 420) */
.courses__head-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  grid-template-areas:
    "label title"
    "btn   lead";
  column-gap: 0;
  row-gap: 0;
  margin-top: 0;
}
.courses .courses__header .label--white { grid-area: label; }  /* labelは別要素 */
.courses__title {
  grid-area: title;
  font-family: var(--f-zen);
  font-weight: 400;          /* Zen Regular */
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: 4.2px;
  color: var(--c-white);
  white-space: nowrap;       /* Figma: 1行 */
  margin: 0;
}
.courses__btn {
  --dot-x: 27px;      /* Figma: btn left61.18, dot left88.26 = +27 */
  grid-area: btn;
  justify-content: center;
  width: 226px;
  height: 44px;
  /* title top2570(h~46) → btn top2715 ≒ 106px下げ */
  margin-top: 106px;
  align-self: start;
  /* Figma node 1:109 にはshadow定義なし＝濃ネイビー背景上ではフラット。
     ニューモーフィズム白ハイライト影が濃背景で滲む問題（クライアント指摘）のため除去 */
  box-shadow: none;
}
.courses__lead {
  grid-area: lead;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.6px;
  color: var(--c-white);
  margin-top: 114px;   /* title top2570 → lead top2723 ≒ 153 − title高 ≈114 */
}

/* コース帯（濃淡で重なる行） */
/* Figma: コース名の縦ピッチ112px・丸角の重なり表現。
   height120 + margin-top-8 で 視覚ピッチ112pxを維持しつつ重なりを再現。
   row1先頭は重なり無し（margin-top0）でname top2896(=帯top2860+36) */
.course-row {
  display: flex;
  align-items: center;
  height: 120px;
  border-radius: 15px 15px 0 0;
  margin-top: -8px;
}
.course-row--1 { margin-top: 0; }
.course-row .container { display: flex; align-items: center; gap: 18px; }
/* Figma: 各コース名の左に小さな丸ドット（中黒「・」）。
   Figma実寸 w4.008 / h5。原寸レンダリングでは丸い点に見えるため、
   radiusを50%にして「丸い点」の見た目に忠実化（縦バーではない） */
.course-row__dot {
  width: 5px; height: 5px;
  background: var(--c-white);
  border-radius: 50%;
  flex-shrink: 0;
}
.course-row__name {
  font-family: var(--f-zen);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 3.6px;
  color: var(--c-white);
}
.course-row--1 { background: #003377;          }  /* Figma Rect49 = #037。ヘッダー帯#003984 と差別化 */
.course-row--2 { background: var(--c-navy-2); }
.course-row--3 { background: var(--c-navy-3); }
.course-row--4 { background: var(--c-navy-4); }
.course-row--5 { background: var(--c-navy-5); }
.course-row--6 { background: var(--c-navy-6); padding-bottom: 18px; }

/* ============================================================
   7. Our Features（Figma: y3715〜）
   ============================================================ */
/* features label top3715。courses下端からの余白を実測補正で167px（f01 media 3815着地） */
.features { padding-top: 167px; }
.features .label { margin-bottom: 80px; }

/* Figma media pitch: f01→f02=473 / f02→f03=487（平均480）。
   row高 = media380 + margin100 = 480 で平均ピッチに合わせる */
.feature {
  display: grid;
  grid-template-columns: 1fr 570px;
  gap: 0 90px;
  align-items: center;
  margin-bottom: 100px;
}
.feature--left { grid-template-columns: 570px 1fr; }
.feature:last-child { margin-bottom: 0; }   /* 最終featureの下余白はtestimonials側で管理 */
/* Figma: テキスト列はmedia上端より約77px下から開始（numがmedia中央よりやや上）。
   align中央だとnumが約24px上に出るため微補正 */
.feature__text { margin-top: 16px; }
.feature__media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
}
.feature__head {
  position: relative;
  padding-left: 110px;  /* Figma: num box(left0,w50) → title left110（番号50+余白60） */
  min-height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 28px;
}
.feature__num {
  position: absolute;
  left: 0; top: 0;
  width: 50px; height: 50px;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--f-noto);
  font-weight: 400;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature__title {
  font-family: var(--f-zen);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.45;
  color: var(--c-text);
}
.feature__desc {
  /* Figma: desc left≈172 = title left170 と揃え（num分110インデント） */
  padding-left: 110px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--c-text);
  margin-bottom: 30px;
  max-width: 697px;   /* desc幅 587 + padding110 ≒ 697 */
}
/* btnは num と同じ左端（インデントなし）。Figma: w176 h44 中央寄せ（コース紹介/校舎紹介） */
.feature__btn {
  display: inline-flex;
  width: 176px;
  height: 44px;
  justify-content: center;
}

/* ============================================================
   8. お客様の声（Figma: y5304〜 / カード700×300）
   ============================================================ */
/* Figma: testimonials label top5304。features最終(f03 media下端)からの余白を実測補正 */
.testimonials { padding-top: 121px; }
/* Figma準拠: 左 見出し列(60〜) / 右 カード列(left589 w700, 右側に91px空き) */
.testimonials .container {
  display: grid;
  grid-template-columns: 529px 700px;  /* card left589 = 60(padding)+529 */
  justify-content: start;
  gap: 0;
  align-items: start;
}
.testimonials__head { padding-top: 0; }
.testimonials__title {
  font-family: var(--f-zen);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: 2.8px;
  color: var(--c-text);
  /* Figma: label top5304 → title top5366 = 62px */
  margin: 34px 0 0;
}
/* Figma: お客様の声ボタン top5509 = title(top5366)から143px下 */
.testimonials__btn {
  margin-top: 59px;
  width: 200px;          /* Figma node 1:142: w200（従来176は誤り） */
  justify-content: center;
}
/* 右カラム（カード列 + ナビ矢印）
   Figma: label top5304 / title top5366 / voice1 top5366。
   カード列はタイトル行(62px下)から開始するので padding-top62 */
.testimonials__col { position: relative; padding-top: 62px; }
/* Figma Group170/171: ナビ矢印は右端 left1330(=container右余白外側)・上下に並ぶ。
   ▲(Group170=-90°回転) と ▼(Group171=+90°回転)。
   top5814/5852 = card1下端(5666)とcard2(5696)の間〜card2上部の右側。
   col基準: padding-top62 で voice1 開始。voice1 top0〜300 → 矢印は約448/486px位置 */
/* Figma実測: nav-up top5814 / nav-down top5852 / center x1330。
   col top = voice1(5366) − padding62 = 5304。up = 5814-5304 = 510px。
   arrow center1330・w20 → left1320 = col右端(1289)+31px → right:-31px */
.testimonials__nav {
  position: absolute;
  top: 538px;            /* 実測補正: top510→actual5786、+28で5814 */
  right: -61px;          /* 実測補正: right-31→left1300、-30で1330（center1330） */
  display: flex;
  flex-direction: column;
  gap: 18px;             /* 5814→5852 = 38px間隔（h20+gap18） */
  z-index: 3;
}
.testimonials__arrow {
  width: 20px;
  height: 20px;
  transition: opacity .2s ease;
}
.testimonials__arrow img {
  width: 20px;
  height: 20px;
  display: block;
}
/* 右向き三角 → 上下向きに回転（Figma: Group170 -90° / Group171 +90°） */
.testimonials__arrow--up img   { transform: rotate(-90deg); }
.testimonials__arrow--down img { transform: rotate(90deg); }
.testimonials__arrow:hover { opacity: .7; }

.testimonials__list { display: flex; flex-direction: column; gap: 30px; }
.voice-card {
  position: relative;
  background: var(--c-white);
  min-height: 300px;
  width: 100%;
  /* Figma: title left51, text left40 → padding-left40。title top5412(card top5366)=46 */
  padding: 46px 50px 46px 40px;
}
.voice-card__title {
  position: absolute;       /* Figma: card top基準で固定（タイトル行数に依存させない） */
  top: 46px;                /* Figma: title top = card top+46（card1 5412-5366） */
  left: 51px;               /* text(40)より11px右=left51 */
  right: 50px;
  font-family: var(--f-zen);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--c-navy);
  margin: 0;
  max-width: 480px;
}
/* attr: Figma 国立小5年 left1072・top5454(card top5366=88)。アバター(right65,w83)の左横に右寄せ。
   card右1289 − attr右端1142 ≒ 147px */
.voice-card__attr {
  position: absolute;
  right: 163px;
  top: 88px;
  font-size: 12px;
  color: #000;
  white-space: nowrap;
}
/* Figma: line left853 w390 右端1243（card右1289-46）。色は Line17 = #003984 ネイビー
   （devmode/08-testimonials.png 下線芯のRGB実測 = rgb(0,57,132)=#003984）。
   下線は card top基準の絶対配置で固定（タイトル行数に依存させない）。
   Figma line top: card1=112(5478-5366) / card2=116(5812-5696) / card3=122(6155-6033)。
   下線はアバター(z-index2)の背後を通り、アバター本体に隠れる */
.voice-card__line {
  position: absolute;
  z-index: 1;
  top: 112px;               /* card1: Figma line top = card top+112 */
  right: 46px;              /* Figma 右端 = card右-46 */
  width: 390px;
  max-width: calc(100% - 80px);
  height: 1px;
  background: var(--c-navy);
}
.voice-card:nth-child(2) .voice-card__line { top: 116px; }
.voice-card:nth-child(3) .voice-card__line { top: 122px; }
/* avatar: Figma left1141 w83 → card右1289から65px。top5391(card5366=25) */
/* Figma node 1:153/160/167: アバターは下線(Line17)より前面に重なり、
   アバター本体(不透明部分)が下線右端を隠す＝下線がアバター左で止まって見える。
   実機では下線が前面に出てアバターに線がかかっていた（クライアント指摘）ため z-index で前面化 */
.voice-card__avatar {
  position: absolute;
  right: 65px;          /* Figma card1: right edge 1224 = card右1289-65 */
  top: 25px;
  width: 83px;          /* Figma card1: w83 / h87 */
  height: 87px;
  object-fit: cover;
  z-index: 2;           /* 下線(z1)より前面 → アバター胴体が下線を隠す */
}
/* Figma card2(1:160): left1143 w80 h89 → 右端1223 = card右1289-66。top offset27 */
.voice-card:nth-child(2) .voice-card__avatar {
  right: 66px;
  top: 27px;
  width: 80px;
  height: 89px;
}
/* Figma card3(1:167): left1143 w79 h88 → 右端1222 = card右1289-67。top offset34 */
.voice-card:nth-child(3) .voice-card__avatar {
  right: 67px;
  top: 34px;
  width: 79px;
  height: 88px;
}
/* text: title/lineを絶対配置にしたため text も card top基準で固定。
   Figma text top: card1=150(5516-5366) / card2=156(5852-5696) / card3=163(6196-6033)。
   left40(=padding-left)・w620 */
.voice-card__text {
  position: absolute;
  top: 150px;               /* card1: Figma text top = card top+150 */
  left: 40px;
  font-size: 12px;
  line-height: 1.85;
  color: #000;
  text-align: justify;
  width: 620px;
  max-width: calc(100% - 80px);
}
.voice-card:nth-child(2) .voice-card__text { top: 156px; }
.voice-card:nth-child(3) .voice-card__text { top: 163px; }

/* ============================================================
   9. BLOG（フッター内・濃ネイビー上）
   ============================================================ */
.footer {
  margin-top: 157px;          /* testimonials下端 → BLOG title6531 */
  background: var(--c-navy);
  border-radius: 17px 17px 0 0;
  color: var(--c-white);
  padding-top: 45px;
}
.blog { padding-top: 0; }
/* Figma: BLOG title6531 → cards6673 = 142px。head(title+sub)下に余白62px */
.blog__head { margin-bottom: 62px; }
.blog__title {
  font-family: var(--f-barlow);
  font-weight: 500;
  font-size: 48px;
  letter-spacing: 4.8px;
  color: var(--c-white);
  line-height: 1.1;
}
.blog__sub {
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--c-white);
  margin-top: 6px;
}
/* Figma: card w398 / 横gap50（card1 left72, card2 left520 → gap50）。
   container padding60基準。3枚で 398*3+50*2=1294 を左寄せ（card1 left72 = pad60+12） */
.blog__list {
  display: grid;
  grid-template-columns: repeat(3, 398px);
  gap: 50px;
  justify-content: start;
  padding-left: 12px;
}
.blog-card { background: var(--c-white); }
.blog-card__link { display: block; }
.blog-card__thumb {
  width: 100%;
  aspect-ratio: 398 / 252;
  object-fit: cover;
  background: var(--c-line);
}
/* Figma: card内コンテンツ左offset 18px（card left72 → tag/title/date left90） */
.blog-card__tag {
  display: inline-block;
  margin: 19px 0 0 18px;        /* thumb下端6934 → tag top6953 ≒ 19px */
  padding: 4px 18px;
  background: var(--c-navy);
  color: var(--c-white);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.6px;
  border-radius: 16px;
}
.blog-card__title {
  display: block;
  margin: 4px 18px 0;          /* tag下端 → title top ≒ 4px(Figma 6980→6984) */
  font-family: var(--f-zen);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--c-text);
  text-align: justify;
}
.blog-card__date {
  display: block;
  margin: 22px 18px 0;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--c-sub);
}
.blog-card__cats {
  display: flex;
  gap: 24px;
  margin: 18px 18px 28px;
}
.blog-card__cat {
  position: relative;
  padding-left: 20px;            /* 14px アイコン + 6px 余白 */
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--c-text);
}
/* Figma: ハッシュ文字ではなく #003984 のタグ型SVGアイコン（14×14, Vector 1:196） */
.blog-card__cat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("assets/img/tag-icon.svg") no-repeat center / contain;
}
/* Figma: 記事一覧ボタン box left607 w225 中央寄せ。top7247 = card下端から約63px */
.blog__more { text-align: center; margin-top: 86px; }
.blog__more .pill {
  --dot-x: 27px;      /* Figma: btn left607.5, dot left634.5 = +27 */
  width: 225px;
  height: 44px;
  justify-content: center;
  /* Figma node 1:180 にはshadow定義なし＝濃ネイビー背景上ではフラット。影除去 */
  box-shadow: none;
}

/* ============================================================
   10. 英語教育CI（Figma: y7432 / 白帯 1312×450）
   ============================================================ */
/* Figma: 白カード top7432 h450 left63 w1312。順序=タイトル→ロゴ→ボタン（中央寄せ）
   記事一覧ボタン下端 → CIカード top7432 の余白を実測補正 */
.ci { margin-top: 155px; }
.ci__inner {
  background: var(--c-white);
  border-radius: 0;
  /* card内: 英語教育の最高峰 top7531(=card top+99) / 広報ページ top7734 */
  padding: 99px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 450px;
}
.ci__title {
  font-family: var(--f-zen);
  font-weight: 500;
  font-size: 27px;
  letter-spacing: 1.35px;
  color: var(--c-text);
  margin: 0 0 40px;            /* title top7531 → logo領域 */
  order: 0;
}
/* ロゴ: viewBox 461×92(5:1)。preserveAspectRatio=none のため幅:高さ比をviewBoxに合わせる。
   Figma実測 約460px幅・中央。height:autoでviewBox比を維持 */
.ci__logo {
  width: 460px;
  height: auto;
  aspect-ratio: 461 / 92;
  margin: 0 0 17px;            /* logo下端 → 広報ページ top7734 */
  order: 1;
}
.ci__btn {
  --dot-x: 27px;      /* Figma: btn left607.5, dot left634.5 = +27 */
  order: 2;
  width: 225px;
  height: 44px;
  justify-content: center;
}

/* ============================================================
   11. フッターナビ（Figma: nav右 / logo中央 / ©縦書き左 / 体験右下 / 規約左下）
   ※ CI白帯下端7882 → nav top8062 ≒ margin180。nav-area内を絶対配置
   ============================================================ */
.footer__nav-area {
  position: relative;
  margin-top: 211px;   /* nav-area起点をFigma top8062に合わせる（実測8031→+30.8px補正） */
  /* Figma: nav-area top8062 → navy下端8683 = 621px。
     絶対配置の 体験ボタン(top518,h31.5)・規約links(top539,h~18) を内包し、
     さらに最終要素下に約62pxのnavy余白を確保（Figma: 規約下端8619 → navy 8683） */
  min-height: 621px;
  padding-bottom: 0;
}

/* ナビ（右寄せ・縦並び。Figma right端≈1377 → gutter60で1380） */
.footer__nav {
  position: absolute;
  top: 0;
  right: var(--gutter);
}
.footer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 23px;   /* Figma: 項目ピッチ45px（li行ボックス22px + gap23） */
}
/* li(list-item)はbody line-height1.75×16px継承で行ボックスが28pxに膨張し
   ピッチが52pxになりFigma45pxを超過→ナビ末尾がCTAと横並びに。
   li行ボックスをリンク相当(21px)に引き締め、gap23と合わせてピッチ45pxに是正 */
.footer__list li {
  line-height: 21px;
}
.footer__link {
  font-family: var(--f-zen);
  font-weight: 500;
  font-size: 12px;
  color: var(--c-white);
  transition: opacity .2s ease;
}
.footer__link:hover { opacity: .7; }
.footer__divider {
  width: 27px;
  height: 1px;
  background: rgba(255,255,255,.5);
  /* gap24で前後余白は確保。dividerは項目1つ分の位置に入る（Figma 8287/8444） */
}

/* ロゴ（中央配置・Figma top8288 ≒ nav-area top0(8062)から226px） */
.footer__logo {
  position: absolute;
  left: 50%;
  top: 226px;
  transform: translateX(-50%);
  text-align: center;
}
.footer__logo img { width: 223px; height: auto; }

/* ©（左端・縦書き回転。Figma left80 top8062 rotate-90） */
.footer__copy {
  position: absolute;
  left: 80px;     /* Figma left80（回転後の見た目位置で微調整） */
  top: 0;
  transform-origin: left top;
  transform: rotate(90deg) translateY(-100%);
  font-family: var(--f-zen);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--c-white);
  margin: 0;
}

/* 体験レッスン（右下。Figma box left1224 top8580 w153 h31.5。nav-area top8062基準で+518） */
.footer__cta {
  position: absolute;
  right: var(--gutter);   /* Figma box右端1377 → gutter60で1380 */
  top: 518px;             /* nav-area top8062 → 体験pill top8580 */
}
.footer__cta .pill {
  --dot-x: 18px;      /* Figma: box left1224, dot left1242 = +18 */
  height: 31.5px;
  width: 153px;
  justify-content: center;
  border-radius: 16px;
  /* Figma node 1:266 にはshadow定義なし＝濃ネイビー背景上ではフラット。影除去（クライアント指摘） */
  box-shadow: none;
}

/* 規約リンク（左下。Figma 会社概要left63 top8601 横並び｜区切り） */
.footer__sub {
  position: absolute;
  left: var(--gutter);   /* Figma left63 → gutter60 */
  top: 539px;            /* nav-area top8062 → 会社概要 top8601 */
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
}
.footer__sub-link {
  position: relative;
  font-family: var(--f-zen);
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--c-white);
}
.footer__sub li + li .footer__sub-link::before {
  content: "";
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 12px;
  background: rgba(255,255,255,.5);
}

/* ============================================================
   12. レスポンシブ
   ※ FigmaはPC1440版のみ支給。以下タブレット/SPは当方判断の暫定実装。
   ※ クライアントのSP/タブレットデザイン受領後に差し替え予定。
   ============================================================ */

/* ---- 〜1439px: コンテンツを流体スケール（※1440pxがピクセルパーフェクト基準） ---- */
@media (max-width: 1439px) {
  :root { --gutter: 4.2vw; }

  /* ヘッダー: Figma絶対座標は1440px専用。1439px以下はフレックスへ戻し破綻防止（※暫定） */
  .header__inner {
    display: flex;
    align-items: center;
    padding-inline: var(--gutter);
  }
  .header__logo { position: static; transform: none; left: auto; }
  .global-nav { margin-left: auto; }
  .global-nav__list { display: flex; align-items: center; gap: 28px; }
  .global-nav__item { position: static; top: auto; }
  .header__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 28px;
  }
  .header__pill { position: static; left: auto; top: auto; }
  /* 1024〜1439pxではnav表示優先のためハンバーガーは隠す（PC1440のみFigma通り表示） */
  .hamburger { display: none; }

  .hero__line--1 { left: 38%; }
  .hero__line--2 { left: 46%; }   /* 右端に余裕を持たせ折り返しを防止 */
  .hero__line { font-size: clamp(38px, 3.6vw, 48px); }

  /* 右カラム見出しは nowrap で右端をはみ出すため、幅縮小分フォントを流体化 */
  .mission__grid { grid-template-columns: minmax(280px, 443px) 1fr; }
  .mission__title { font-size: clamp(20px, 1.95vw, 28px); letter-spacing: 0.3em; }
  .courses__head-grid { grid-template-columns: minmax(260px, 420px) 1fr; }
  .courses__title { font-size: clamp(20px, 1.95vw, 28px); letter-spacing: 0.15em; }
  /* お客様の声カードは右余白91pxを詰めて流体化 */
  .testimonials .container { grid-template-columns: minmax(0, 1fr) minmax(0, 700px); }
}

/* ---- タブレット 768〜1023px（※暫定） ---- */
@media (max-width: 1023px) {
  :root { --gutter: 32px; }

  /* ヘッダー: ナビ・CTAを隠してハンバーガー表示（絶対配置を解除し右端フロー配置へ） */
  .global-nav, .header__cta { display: none; }
  .hamburger {
    display: flex;
    position: static;
    left: auto;
    transform: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
  }
  .header { height: 80px; }
  .hero { margin-top: 80px; }
  html { scroll-padding-top: 100px; }

  /* ヒーロー: PCと同じ「空側(右上)にstagger絶対配置」構図をSP用の値で再現。
     人物は画面左約40%・空は右約60%なので、テキストを右寄り上方に置き人物への被りを避ける。
     （旧: static全幅・縦中央 → 人物に白文字が被って読めない問題を解消） */
  .hero { height: 56vw; min-height: 360px; }
  .hero__copy { display: block; }   /* flex-column-center をやめ、絶対配置の基準に戻す */
  .hero__line {
    position: absolute;
    white-space: nowrap;
    max-width: none;
    font-size: clamp(20px, 5.4vw, 30px);
    letter-spacing: 2px;
  }
  /* 右寄り上方にstagger（2行目を少し右下にずらす）。leftは空側=人物(左40%)より右 */
  .hero__line--1 { top: 26%; left: 44%; right: auto; margin: 0; }
  .hero__line--2 { top: 40%; left: 50%; right: auto; margin: 0; }

  /* バナー（SP暫定: ピーク無しの全幅1枚表示に切替） */
  .banner { margin-top: 80px; height: auto; }
  .banner__viewport { overflow: hidden; }
  .banner__track {
    position: static;
    left: auto;
    transform: translateX(0);  /* 全幅スライド送りに戻す（JSは static検知で -index*100%相当） */
  }
  .banner__slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    border-color: var(--c-text);  /* 全幅表示時は常に枠線あり */
  }
  .banner__arrow--prev { left: 0; }
  .banner__arrow--next { left: auto; right: 0; }
  .banner__arrow { width: 40px; height: 40px; }
  .banner__arrow img { width: 40px; height: 40px; }

  /* ミッション: 1カラム */
  .mission { padding-top: 100px; }
  .mission__grid { grid-template-columns: 1fr; gap: 24px; }
  .mission__head { flex-direction: column; gap: 30px; }
  .mission__btn { margin-top: 0; }
  /* SP暫定: タイトルは折り返し許可（nowrap解除）してはみ出し防止 */
  .mission__title { white-space: normal; letter-spacing: 4px; font-size: 24px; margin-bottom: 20px; }

  /* 3カード: 縦積み（SP暫定: フル幅カードなのでラベルは左下に再配置） */
  .guides { margin-top: 90px; }
  .guides__list { grid-template-columns: 1fr; }
  .guide-card__body { left: 40px; top: auto; bottom: 40px; }
  /* 詳細度バグ修正: ベースの nth-child(2)/(3)（詳細度0,3,0 / left:302 top:379）が
     上の (0,1,0) リセットに勝ち、SPでカード2/3のラベルがカード外(下)に落ちて隠れる。
     同詳細度(0,3,0)でカード1と同じ左下配置(bottom基準)に揃えて打ち消す。 */
  .guides__list > :nth-child(2) .guide-card__body,
  .guides__list > :nth-child(3) .guide-card__body { left: 40px; top: auto; bottom: 40px; }
  .guide-card__line { top: 62px; }

  /* コース（SP暫定: 1カラム縦積み label→title→btn→lead） */
  .courses { margin-top: 90px; }
  .courses__head-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "title" "lead" "btn";
    gap: 16px;
  }
  .courses__title { white-space: normal; font-size: 22px; letter-spacing: 2px; }
  .courses__btn { width: 100%; margin-top: 8px; }
  .courses__lead { margin-top: 0; }
  .course-row { height: 88px; border-radius: 0; margin-top: 0; }
  .course-row--1 { border-radius: 15px 15px 0 0; }
  .course-row__name { font-size: 20px; }

  /* 特色: 縦積み（画像→テキスト統一） */
  .features { padding-top: 90px; }
  .feature, .feature--left {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 70px;
  }
  .feature__media { order: -1; }
  .feature__title { font-size: 22px; }

  /* 声: 1カラム化 ＋ voice-card を絶対配置→通常フローへ（PC固定高前提の重なり崩れを解消） */
  .testimonials { padding-top: 80px; }
  .testimonials .container { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .testimonials__head { margin-bottom: 0; }
  .testimonials__col { min-width: 0; max-width: 100%; }
  .testimonials__nav { position: static; flex-direction: row; margin-bottom: 16px; justify-content: flex-end; }

  /* カードはフロー組みに戻す（title→attr→line→text を縦積み、avatarは右上へフロート） */
  .voice-card {
    width: 100%;
    min-height: 0;
    padding: 28px 24px 30px;
    display: block;
  }
  .voice-card__title {
    position: static;
    top: auto; left: auto; right: auto;
    max-width: none;
    /* アバター（右上フロート）と重ならないよう右に逃がす */
    padding-right: 96px;
    margin: 0 0 6px;
    font-size: 18px;
  }
  .voice-card__attr {
    position: static;
    top: auto; right: auto;
    padding-right: 96px;
    margin: 0 0 12px;
  }
  .voice-card__line {
    position: static;
    display: block;            /* SP: spanはinlineだとwidth/heightを無視して潰れる→blockで1px下線を表示 */
    top: auto; right: auto;
    width: 100%;
    max-width: none;
    margin: 0 0 16px;
  }
  .voice-card__avatar {
    position: absolute;
    right: 24px;
    top: 28px;
    width: 72px;
    height: auto;
  }
  .voice-card:nth-child(2) .voice-card__avatar,
  .voice-card:nth-child(3) .voice-card__avatar { right: 24px; top: 28px; width: 72px; height: auto; }
  .voice-card__text {
    position: static;
    top: auto; left: auto;
    width: 100%;
    max-width: none;
  }
  .voice-card:nth-child(2) .voice-card__text,
  .voice-card:nth-child(3) .voice-card__text { top: auto; }
  .voice-card:nth-child(2) .voice-card__line,
  .voice-card:nth-child(3) .voice-card__line { top: auto; }

  /* BLOG: 1カラム */
  .footer { margin-top: 80px; }
  .blog__list { grid-template-columns: 1fr; gap: 24px; }

  /* フッターナビ: 絶対配置を解除して縦積み（※SP暫定） */
  .footer__nav-area {
    position: static;
    min-height: 0;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 40px;
  }
  .footer__copy {
    position: static;
    transform: none;
    order: 5;
    font-size: 12px;
  }
  .footer__logo { position: static; transform: none; top: auto; left: auto; text-align: left; order: 0; }
  .footer__nav { position: static; top: auto; right: auto; order: 1; }
  .footer__list { align-items: flex-start; gap: 18px; }
  .footer__divider { align-self: stretch; }
  .footer__cta { position: static; right: auto; bottom: auto; order: 2; }
  .footer__sub { position: static; left: auto; bottom: auto; order: 3; flex-wrap: wrap; }
}

/* ---- SP ≤767px（※暫定） ---- */
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  body { line-height: 1.7; }

  .header { height: 64px; }
  .header__logo img { width: 150px; }
  .hero { margin-top: 64px; height: 64vw; min-height: 280px; }
  /* ≤767: 絶対配置のまま（≤1023の構図を継承）、空エリアに収まるよう微調整。
     nowrap×小フォントで右上の空に2行stagger表示・人物(左約40%)非重複・右端はみ出し無し。
     letter-spacingを詰め、line2は右端に収まるleft値に。 */
  .hero__line { font-size: clamp(14px, 4.1vw, 20px); letter-spacing: 1px; }
  .hero__line--1 { top: 24%; left: 41%; }
  .hero__line--2 { top: 37%; left: 44%; }

  .banner__viewport { border-width: 1px; }
  .banner__dots { bottom: -22px; }

  .mission__title { font-size: 20px; letter-spacing: 2px; }

  .guide-card__body { left: 24px; top: auto; bottom: 24px; }
  /* 詳細度バグ修正（≤767）: ベースの nth-child(2)/(3) を同詳細度(0,3,0)で打ち消し、
     カード1と同じ左下配置に揃える（top:379 残留→カード外落ち を防止） */
  .guides__list > :nth-child(2) .guide-card__body,
  .guides__list > :nth-child(3) .guide-card__body { left: 24px; top: auto; bottom: 24px; }

  .course-row { height: 72px; }
  .course-row__name { font-size: 18px; letter-spacing: 2px; }
  .courses__title { font-size: 22px; letter-spacing: 2px; }

  .feature__title { font-size: 20px; }
  .feature__head { padding-left: 64px; }
  .feature__num { width: 42px; height: 42px; font-size: 20px; }

  .testimonials__title { font-size: 22px; letter-spacing: 1.5px; }
  /* SP: フロー組みのまま余白・サイズだけ詰める（≤1023の flow 指定を継承） */
  .voice-card { padding: 24px 16px 26px; }
  .voice-card__title { font-size: 16px; padding-right: 80px; }
  .voice-card__attr { padding-right: 80px; }
  .voice-card__avatar { width: 60px; right: 16px; top: 24px; }
  .voice-card:nth-child(2) .voice-card__avatar,
  .voice-card:nth-child(3) .voice-card__avatar { width: 60px; right: 16px; top: 24px; }

  .blog__title { font-size: 38px; }
  .blog-card__title { font-size: 17px; }

  .ci__title { font-size: 20px; text-align: center; letter-spacing: 1px; }
  /* CIロゴ: 460px固定だと375幅で左右がはみ出す → 余白を残して縮小 */
  .ci__inner { padding-left: 16px; padding-right: 16px; }
  .ci__logo { width: 100%; max-width: 280px; }
}

/* アクセシビリティ: モーション低減 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   13. 投稿一覧ページ（home.php / .blog-archive 名前空間）
   ------------------------------------------------------------
   サイトトーン（紺#003984 / Zen Kaku Gothic New）に合わせた簡素なリスト。
   blog-card 系コンポーネントは front-page と共通。グリッドのみ可変に上書き。
   ============================================================ */
.header--simple { position: sticky; }
.header--simple .header__inner { display: flex; align-items: center; justify-content: space-between; }

.blog-archive { padding-top: 160px; padding-bottom: 100px; min-height: 60vh; }
.blog-archive__head { margin-bottom: 48px; }
.blog-archive__head .label { margin-bottom: 8px; }
.blog-archive__title {
  font-family: var(--f-zen);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 4px;
  color: var(--c-navy);
}

/* 可変3カラム（fixed 398px の front-page グリッドを上書き） */
.blog-archive__list {
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  justify-content: stretch;
  padding-left: 0;
}
.blog-archive__list .blog-card {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
}

.blog-archive__pager {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 72px;
}
.blog-archive__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 20px;
  background: var(--c-white);
  box-shadow: var(--shadow-pill);
  font-family: var(--f-barlow);
  font-size: 14px;
  color: var(--c-text);
}
.blog-archive__pager .page-numbers.current {
  background: var(--c-navy);
  color: var(--c-white);
}

.blog-archive__empty {
  padding: 80px 0;
  text-align: center;
  color: var(--c-sub);
}

.blog-archive__footer {
  background: var(--c-navy);
  padding: 40px 0;
}
.blog-archive__footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blog-archive__copy {
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--c-white);
}

@media (max-width: 900px) {
  .blog-archive__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .blog-archive { padding-top: 120px; }
  .blog-archive__list { grid-template-columns: 1fr; }
  .blog-archive__title { font-size: 26px; }
}