/* pages/top.css — トップページ（front-page.php）忠実再現スタイル
   Figma「トップページ」17:3133 を基準に実装。
   方針：フォントサイズ・余白・色・行間・字間は tokens.css の変数を参照する。
        width/height 等のレイアウト寸法やアスペクト比は固有値のまま。
        矢印アイコンは data:image/svg+xml で埋め込むため、その中の色のみ
        CSS変数を使えず #674428 をハードコード（CSS仕様の制限）。
   画像は ../../images/top/ を参照（CSSファイルからの相対）。 */

/* ===== 共通 ============================================================== */
.top { color: var(--color-brown-text); }

/* .sp-br（SP専用改行）の定義は base.css に集約（共通コンポーネントでも使うため）。 */

/* base.css の section{margin-block:48px} を打ち消す（各セクションはpaddingで間隔管理） */
.top section { margin-block: 0; }

.top-inner {
  box-sizing: content-box; /* max-width はコンテンツ幅。paddingは外側に加算する */
  max-width: var(--layout-max); /* 1200px：基本のinner幅 */
  margin-inline: auto;
  padding-inline: clamp(var(--space-16), 5vw, var(--space-80)); /* 16px〜80px */
}
/* やや狭いinner幅（1040px）。実績/お知らせ/コラム/FAQ等のセクションで使う共通バリエーション */
.top-inner--medium { max-width: var(--layout-medium); }
.top-sec { position: relative; }

/* 見出し→本文の余白。top-inner はブロック組み（gap なし）のため、
   c-heading に下マージンを付与する（共通 .c-heading は余白を持たない方針）。 */
.top-inner > .c-heading { margin-bottom: var(--space-32); }

/* セクション内 z-index 基準 */
.has-texture { position: relative; }
.has-texture > * { position: relative; z-index: 1; }

/* 背景色 */
.bg-offwhite { background: var(--color-bg-offwhite); }
.bg-cream    { background: var(--color-bg-light-yellow); }
.bg-yellow   { background: var(--color-bg-yellow); }
.bg-white    { background: var(--color-white); }

/* 紙テクスチャ（Figma トップページ 76:25241）。.has-texture を併記したセクションにのみ、
   色を焼き込んだ紙テクスチャを 346.8×327.8px で直接フィル（multiply は使わない＝区切りと
   継ぎ目を出さない）。背景色は上の .bg-* がそのまま担う。透明な内側カード（.top-concern
   等の素の .has-texture）には適用されない。 */
.bg-offwhite.has-texture,
.bg-cream.has-texture {
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
}
.bg-offwhite.has-texture { background-image: url("../../images/common/tex-offwhite.webp"); }
.bg-cream.has-texture    { background-image: url("../../images/common/tex-yellow.webp"); }

/* セクション共通の縦余白 */
.top-sec--pad { padding-block: var(--space-80); }
.top-sec--pad-b { padding-bottom: var(--space-80); }

/* 波形ディバイダー（セクション末尾に全幅で置く画像素材）。
   波はセクションの下端に密着させ、下側の縦余白は「コンテンツと波の間」に置く。
   こうしないと padding-bottom が波の下に入り、波と次セクションの間に
   セクション背景色の余白（意図しない隙間）ができてしまう。 */
.top-wave { display: block; width: 100%; height: auto; }
.top-sec:has(> .top-wave:last-child) { padding-bottom: 0; }
.top-sec:has(> .top-wave:last-child) > .top-wave:last-child { margin-top: var(--space-80); }
/* 先頭に置く波（in-flow。上=前セクション色／下=透過で当セクション地が透ける webp）。
   セクション上端に密着させる。絶対配置の --out は対象外（当セクションのpaddingを保つ）。 */
.top-sec:has(> .top-wave:first-child:not(.top-wave--out)) { padding-top: 0; }
/* セクション外（上の前セクション側）に被せる波。お知らせ・コラム・CTA など、本文を押し下げず
   前セクションの下端余白に重ねたい場合に使う。.top-sec は position:relative。 */
.top-wave.top-wave--out {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  margin: 0;
}
/* 次セクション先頭の .top-wave--out が下端に被さるセクション用：
   波の高さ＋余白分、padding-bottom を広めに確保する（教室・Instagram・FAQ）。 */
.top-sec--pad-b-wide { padding-bottom: var(--space-160); }

/* セクション見出しは共通コンポーネント c-heading（components/section-heading.css）に統一。
   旧 .top-heading* は撤去。 */

/* 「もっと見る／一覧／CTA」ピルボタンは共通コンポーネント .c-morebtn
   （components/buttons.css）へ移管。トップ各所は .c-morebtn を使う
   （療育サービスの詳しく見るは .c-morebtn--offwhite）。 */
.top-actions { display: flex; justify-content: center; margin-top: var(--space-56); }

/* ===== S02 メインビジュアル ============================================= */
/* Figma 17:3134: 1440×721。写真(object-bottom)＋左白グラデ＋左寄せ見出し(縦中央)
   ＋下部イラスト帯＋最下部の波。ヘッダーは透過オーバーレイ(body.home)。 */
.top-mv {
  position: relative;
  min-height: 721px;
  display: flex; align-items: center;
  overflow: hidden;
  background: url("../../images/top/s02-mv-photo.webp") center top / cover no-repeat;
}
.top-mv::before { /* 左側が白く明るくなるグラデ（テキスト可読性） */
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to left,
    transparent 52.85%,
    color-mix(in srgb, var(--color-white) 45%, transparent) 72.16%);
}
.top-mv__inner {
  position: relative; z-index: 4;
  box-sizing: content-box; /* 1200px はコンテンツ幅。paddingは外側に加算する */
  width: 1200px; max-width: 100%;
  margin-inline: auto;
  padding: 0 clamp(var(--space-16), 5vw, var(--space-24));
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24);
}
.top-mv__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-brown-text);
  margin: 0;
  white-space: nowrap;
}
.top-mv__title span { display: block; }
.top-mv__sub {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  color: var(--color-brown-text);
  margin: 0;
  white-space: nowrap;
}
.top-mv__sub span { display: block; }
/* 下部イラスト帯（母子＋クレヨンの子ども）: 元グループ left98/幅1245 of 1440
   ※imgはwidth:autoだと固有幅(2x)で表示されはみ出すため、表示幅を実寸比で明示。
   　画像ソースは2x(2490px)のままなのでRetinaの精細さは維持される。 */
.top-mv__illust {
  position: absolute; z-index: 3; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  bottom: var(--space-8);
  width: 86.46%; max-width: 1238px; height: auto;
}
.top-mv__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 2;
  display: block;
  width: 100%; height: auto;
  pointer-events: none;
}
/* SP専用の写真要素（PCは .top-mv の背景画像で表示するため非表示） */
.top-mv__photo { display: none; }
/* SP専用のオフホワイト波形（PCはクリーム版 top-wave-mv を使うため非表示） */
.top-mv__wave--offwhite { display: none; }
/* SP専用：はじめの療育の手前に置くクリーム波形（PCは非表示） */
.top-intro-wave { display: none; }
@media (max-width: 900px) {
  .top-mv { min-height: 30rem; }
  .top-mv__title { font-size: clamp(var(--font-size-h2), 5vw, var(--font-size-h1)); white-space: normal; }
  .top-mv__sub { white-space: normal; }
}
/* SP（〜768px）：写真を上に積み、見出し・サブを下に中央寄せで置く縦構成。
   背景写真＋白グラデのPC構成は止め、写真を実要素（.top-mv__photo）で出す。 */
@media (max-width: 768px) {
  .top-mv {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* PCの背景写真shorthandを完全に打ち消し、写真下〜次セクション（オフホワイト）へ連続させる */
    background: var(--color-bg-offwhite) url("../../images/common/tex-offwhite.webp") top left / 346.8px 327.8px repeat;
  }
  .top-mv::before { display: none; }                 /* 白グラデのオーバーレイを無効化 */
  /* SPは波形もオフホワイト版に差し替え（クリーム版を隠す） */
  .top-mv__wave:not(.top-mv__wave--offwhite) { display: none; }
  .top-mv__wave--offwhite { display: block; }
  .top-mv__photo {
    order: 1;
    display: block;
    width: 100%;
    aspect-ratio: 375 / 300;      /* Figma SP のトリミング高さ。波形は下端へ被せる */
    object-fit: cover;
    object-position: center 32%;
  }
  .top-mv__wave {                                    /* 写真下端の白い波形 */
    order: 2;
    position: relative;
    left: 0; right: 0; bottom: auto;
    z-index: 2;
    margin-top: -6%;                                 /* 写真の下端へ波形を被せる */
  }
  .top-mv__illust {                                  /* 波形の上に横いっぱいに立つクレヨンの子どもたち */
    order: 3;
    position: relative;
    left: auto; bottom: auto;
    transform: none;
    width: 90%; max-width: none;
    margin: -11% auto 0;                             /* 波形の上端に子どもの足が乗る量だけ持ち上げる */
  }
  .top-mv__inner {
    order: 4;
    box-sizing: border-box;
    width: 100%; max-width: none;
    margin: 0;
    padding: var(--space-8) var(--space-16) var(--space-24);
    align-items: center;
    text-align: center;
    gap: var(--space-8);
  }
  /* Figma SP 実測：最長行「発達の土台から一歩ずつ」(11文字)=236px ＝ 約21px/字。
     h3-lg(21.3px) が一致。375pxで1行に収まる固定サイズにする。 */
  .top-mv__title {
    font-size: var(--font-size-h3-lg);
    letter-spacing: var(--letter-spacing-wide);
    white-space: normal;
  }
  .top-mv__sub { font-size: var(--font-size-xs); white-space: normal; }  /* Figma SP 実測 ~11.9px */
}

/* ===== S03 実績カウンター =============================================== */
.top-counter__title {
  text-align: center;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  margin: 0 0 var(--space-48);
}

/* ===== S04 はじめの療育 導入（中央テキスト＋写真ブロブ散らし）========= */
/* Figma 17:3266: 1440×974。中央に見出し+本文(max640)、写真3枚を左上/左中/右に
   ブロブ状で絶対配置。pt104/pb264。 */
.top-intro {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding-block: var(--space-80) var(--space-240);
  overflow: hidden;
  margin-top: var(--space-64);
}
.top-intro__inner {
  position: relative; z-index: 2;
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--space-16);
  text-align: center;
}
.top-intro__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  margin: 0 0 var(--space-48);
}
.top-intro__body {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
}
.top-intro__body p { margin: 0 0 var(--space-32); }
.top-intro__body p:last-child { margin-bottom: 0; }
/* 散らし配置の写真（ブロブ）。位置はFigma座標を%換算。
   クリップはFigmaの手描きベクター形状（mask）。マスクで box-shadow は切れるため
   drop-shadow フィルタ（マスク形状に沿う）で淡い影を付ける。 */
/* PCではラッパーは透明（display:contents）。各写真の絶対配置はセクション基準のまま。 */
.top-intro__photos { display: contents; }
.top-intro__photo {
  position: absolute; z-index: 1;
  display: block;
  -webkit-mask: no-repeat center / 100% 100%;
          mask: no-repeat center / 100% 100%;
}
/* picture 内の実画像はブロブ枠いっぱいに敷く（PC/SPで src を出し分け） */
.top-intro__photo-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 位置はFigma 76:25374（フレーム1440×732）座標を、見出しを基準にセクション(=1440×714)へ換算。
   tl/r はFigmaのマスク済みブロブをそのまま書き出した透過画像（クリップ内包・mask不要）。 */
.top-intro__photo--tl { /* 左上：スタッフ（Figma書き出しの透過ブロブ。mask不要）*/
  left: 12.95%; top: 2.74%; width: 15.18%; aspect-ratio: 438 / 460;
  -webkit-mask: none; mask: none; /* 形は画像に内包 */
}
.top-intro__photo--bl { /* 左中：男児（Figma書き出しの透過ブロブ。左に見切れ）*/
  left: -6.6%; top: 30.5%; width: 23.89%; aspect-ratio: 688 / 659;
  -webkit-mask: none; mask: none; /* 形は画像に内包 */
}
.top-intro__photo--r { /* 右：女児（Figma書き出しの透過ブロブ。右端ではみ出し）*/
  left: 73.40%; top: 20.66%; width: 30.17%; aspect-ratio: 869 / 720;
  -webkit-mask: none; mask: none; /* 形は画像に内包 */
}
/* あしらい（Figma 17:3266 の装飾ブロブ。薄く端に散らす。位置は1440×815フレームを%換算）*/
.top-intro__deco {
  position: absolute; z-index: 1; height: auto;
  opacity: 1; pointer-events: none;
}
/* Figma 76:25374 のあしらいは3つ（右上D1 / 左上D2 / 左下中D3）。
   左下の男児写真位置に重なるD4は写真で隠れるため描画しない。位置は実測bboxをFigmaへ合わせた値。 */
.top-intro__deco--b { left: 87.99%; top: -6.12%; width: 21.9%; transform: skewX(2.99deg); }                      /* D1 右上 */
.top-intro__deco--d { left: -16.86%; top: 0.34%; width: 23.1%; transform: rotate(147.72deg) skewX(2.99deg); }   /* D2 左上 */
.top-intro__deco--e { left: 8.37%;  top: 39.3%; width: 23.1%; transform: rotate(147.72deg) skewX(2.99deg); }    /* D3 左下中 */
@media (max-width: 768px) { .top-intro__deco { display: none; } } /* モバイルは装飾ブロブを省略 */
/* SP：写真3枚を見出しの上に、Figma SP（76:15417 / 375×120 の帯）どおりの寸法・位置で配置。
   ラッパー .top-intro__photos を 375:120 のアスペクト帯にし、3枚を帯内に絶対配置（重なり・段差を再現）。 */
@media (max-width: 768px) {
  .top-intro-wave { display: block; margin-bottom: -1px; }   /* クリーム波形を表示（次セクションと隙間なく接続）*/
  .top-intro {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: var(--space-8);
    min-height: 0;
    margin-top: 0;                 /* 波形と直結（off-whiteの隙間を作らない）*/
    padding-block: var(--space-8) var(--space-80);
  }
  /* 写真の帯（Figma 76:15417：375×120）。3枚の絶対配置の基準ボックスになる。 */
  .top-intro__photos {
    display: block;
    position: relative;
    width: 100%;
    max-width: 375px;
    margin-inline: auto;
    aspect-ratio: 375 / 120;
  }
  /* 各写真は帯内に絶対配置。left/top/width は Figma 値（375×120）を%換算。高さは自然比。 */
  .top-intro__photo {
    position: absolute;
    height: auto;
    aspect-ratio: auto;
  }
  .top-intro__photo--tl { left: 0.79%;  top: 0;      width: 34.45%; }  /* class（左・最大）  Figma 129.2×114.3 @ x2.97,y0 */
  .top-intro__photo--bl { left: 39.87%; top: 39.49%; width: 21.88%; }  /* staff（中・下段）  Figma 82.0×76.7 @ x149.5,y47.4 */
  .top-intro__photo--r  { left: 63.20%; top: 3.77%;  width: 28.63%; }  /* girl-right（右）   Figma 107.4×98.1 @ x237.0,y4.5 */
  .top-intro__inner {
    width: 100%;
    margin-top: var(--space-16);
    padding-inline: 0;
  }
  .top-intro__title { font-size: var(--font-size-h3); margin-bottom: var(--space-24); }  /* Figmaコード 18.29px */
  .top-intro__body { font-size: var(--font-size-h5); line-height: 1.8; }  /* Figmaコード 14.22px */
  .top-intro__body p { margin-bottom: var(--space-16); }
}

/* ===== S05 お悩み別3ブロック =========================================== */
/* Figma 17:3289: 白地。各行はクリームカード(#FFFCEE/border6/角丸16/p24)を
   120pxインデントでジグザグ配置。写真は固定334×200のブロブ。 */
.top-concerns { display: flex; flex-direction: column; gap: var(--space-32); } /* 幅は .top-inner--medium で制御 */
.top-concern {
  display: flex; align-items: center; gap: var(--space-32);
  /* 背景：ライトイエロー地のクレヨン紙テクスチャ（テクスチャ規約・346.8×327.8px タイル）。
     フラット塗りではなくテクスチャ付き。 */
  background-color: var(--color-bg-light-yellow);
  background-image: url("../../images/common/tex-yellow.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
  /* 手描き（クレヨン）の枠を border-image で適用（top/top-concern-border.webp）。
     クリーンな solid 線では出ないため。中央は透過＝背景がそのまま見える。 */
  border-image: url("../../images/top/top-concern-border.webp") 44 / 20px round;
  border-radius: var(--radius-md);
  padding: var(--space-24);
  overflow: hidden;
}
/* 奇数行=右に120pxインデント＆写真左 / 偶数行=左に120px＆写真右 */
.top-concern:nth-child(odd)  { margin-right: var(--space-120); }
.top-concern:nth-child(even) { margin-left: var(--space-120); flex-direction: row-reverse; }
.top-concern__media { position: relative; flex: 0 0 340px; min-width: 0; }
/* 積み木ブロック（別素材をabsoluteで写真の角に重ねる） */
.top-concern__blocks {
  position: absolute; z-index: 2; height: auto;
  pointer-events: none; bottom: 0px;
}
.top-concern:nth-child(1) .top-concern__blocks { width: 74px; left: 0px; }
.top-concern:nth-child(2) .top-concern__blocks { width: 40px; right: 0px; }
.top-concern:nth-child(3) .top-concern__blocks { width: 59px; left: 0px; }
.top-concern__photo {
  /* Figma書き出しのクリップ済みブロブ（透過）。形は画像内包のためmask不要、自然比率で表示。
     picture ラッパー。中の img を枠いっぱいに敷く（PC/SPで src を出し分け）。*/
  display: block; width: 340px; min-width: 0; height: auto;
}
.top-concern__photo img { display: block; width: 100%; height: auto; }
.top-concern__body { flex: 1; min-width: 0; max-width: 560px; }
.top-concern__eyebrow {
  /* PC：1行表示。下線は親にまとめて引き、span 間で途切れさせない。 */
  display: inline-block;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-8);
  background: url("../../images/common/underline.png") left bottom / 100% 4px no-repeat;
  padding-bottom: var(--space-4);
}
.top-concern__eyebrow span {
  display: inline;                /* PC は行内に並べ、下線は親が担当（連続した1本に）。 */
}
.top-concern__title {
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-wide);
  margin: 0 0 var(--space-16);
}
.top-concern__text {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  margin: 0;
}
@media (max-width: 900px) {
  .top-concern:nth-child(odd),
  .top-concern:nth-child(even) { margin-inline: 0; flex-direction: column; }
  .top-concern__media { flex-basis: auto; width: 100%; }
  .top-concern__photo { width: 100%; }
}
/* SP：Figma SP は「写真を左に float＋見出しが写真の右、本文は写真下へ回り込む」コンパクトカード。
   flexを解除し写真をfloatさせて本文を回り込ませる（縦積み・右カラム固定にしない）。 */
@media (max-width: 768px) {
  .top-concerns { gap: var(--space-16); }
  .top-concern,
  .top-concern:nth-child(odd),
  .top-concern:nth-child(even) {
    display: block;            /* flexを解除（写真をfloatして本文を回り込ませる）*/
    margin-inline: 0;
    padding: var(--space-12);
    text-align: left;
  }
  .top-concern__media {
    float: left;
    width: 24%;
    margin: 0 var(--space-12) var(--space-8) 0;
  }
  .top-concern__photo { width: 100%; }
  .top-concern__blocks { display: none; }   /* SPでは積み木ブロックの装飾を省略 */
  .top-concern__body { display: block; max-width: none; }
  /* SP：span ごとに改行して積み、行ごとに下線を引く（親の下線は解除）。 */
  .top-concern__eyebrow {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    font-size: var(--font-size-h6);                                       /* Figmaコード 12.8px */
    margin-bottom: var(--space-4);
    background: none;
    padding-bottom: 0;
  }
  .top-concern__eyebrow span {
    display: inline-block;
    background: url("../../images/common/underline.png") left bottom / 100% 2px no-repeat;
    padding-bottom: var(--space-4);
  }
  .top-concern__title { font-size: var(--font-size-h5); letter-spacing: normal; margin: 0 0 var(--space-8); }
  .top-concern__text { font-size: var(--font-size-h6); line-height: var(--line-height-base); clear: both;}
}

/* ===== S04b IPPO積み木レタリング帯（Figma 17:3286）==================== */
/* イラスト(透過)と波形ディバイダー(白)を分離。クリーム地→白の橋渡し。 */
.top-ippo-divider { position: relative; }
.top-ippo-divider__wave {
  display: block; width: 100%; height: auto;
  position: relative; z-index: 1;
}
.top-ippo-divider__wave img { display: block; width: 100%; height: auto; }
.top-ippo-divider__lettering { /* IPPO積み木＋子どものイラスト（波の上に重ね、上にはみ出す）*/
  position: absolute; z-index: 2;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 721px; height: auto; /* Figma Frame1837 幅=721px */
  bottom: 38%;
  pointer-events: none;
}
/* SP：レタリングは Figma SP（76:15436）の配置ボックス 308×88（@375フレーム）を再現する。
   width=308/375≒82.13%、aspect-ratio=308/88、object-fit:contain で Figma と同じ収め方にする
   （素材のアスペクト差は contain が吸収し、Figma レンダリングと一致）。縦位置も Figma 値に合わせる。 */
@media (max-width: 768px) {
  .top-ippo-divider__lettering {
    width: 82.13%;
    aspect-ratio: 308 / 88;
    object-fit: contain;
    bottom: 22.4%;   /* Figma: 波(375×76)の下端から17px ≒ 22.4% 上 */
  }
}

/* ===== S05b 写真コラージュ帯（Figma 17:3333・テキストなし）============ */
.top-collage {
  width: 100%; max-width: 1440px;
  margin-inline: auto;
}
/* Figmaのコラージュ帯を1枚に統合。写真のベクタークリップ・配置はFigma書き出しに内包。
   picture ラッパー。中の img を全幅で敷く（PC/SPで src を出し分け）。 */
.top-collage__img { display: block; width: 100%; height: auto; }
.top-collage__img img { display: block; width: 100%; height: auto; }
/* SP でも写真コラージュ帯を表示（Figma SP は3枚の写真行として見せる）。 */

/* ===== S06 土台の療育リード ============================================ */
.top-doudai {
  display: flex; align-items: flex-start; gap: var(--space-56);
  /* 背景：ライトイエロー地のクレヨン紙テクスチャ（346.8×327.8px タイル） */
  background-color: var(--color-bg-light-yellow);
  background-image: url("../../images/common/tex-yellow.webp");
  background-repeat: repeat; background-position: top left; background-size: 346.8px 327.8px;
  /* 手描き（クレヨン）の枠を border-image で適用（.top-concern と共通の top/top-concern-border.webp）。
     中央は透過＝テクスチャ背景がそのまま見える。 */
  border-image: url("../../images/top/top-concern-border.webp") 44 / 20px round;
  border-radius: var(--radius-md); padding: var(--space-40);
  overflow: hidden;
  /* 幅は親 .top-inner--medium（1040px）で制御 */
}
.top-doudai__body {
  flex: 1; min-width: 0; 
  display: flex; flex-direction: column; gap: var(--space-24);
}
.top-doudai__title {
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-wide);
  margin: 0;
}
.top-doudai__text {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}
.top-doudai__text p { margin: 0; }
.top-doudai__text p + p { margin-top: var(--space-24); } /* 空行相当の段落間 */
.top-doudai__action { text-align: right; }
.top-doudai__photo {
  /* Figma書き出しのクリップ済み縦長ブロブ（透過）。mask不要、自然比率で表示。*/
  flex: 0 0 267px; align-self: center;
  width: 267px; max-width: 267px; min-width: 0; height: auto;
}
/* 土台カード上の積み木アイコン（PCは非表示。SPの中央見出しレイアウトでのみ出す）。 */
.top-doudai__icon { display: none; }
@media (max-width: 768px) {
  /* SP：写真は省略し、積み木アイコン＋見出し中央・本文・全幅ボタンの縦構成（Figma SP）。 */
  .top-doudai { flex-direction: column; padding: var(--space-24) var(--space-16); gap: var(--space-16); }
  .top-doudai__photo { display: none; }
  .top-doudai__body { gap: var(--space-16); }
  .top-doudai__icon {
    display: block;
    width: 70px; height: 51px;        /* s06-doudai-blocks.webp 67×49 の比率 */
    margin: 0 auto;
    background: url("../../images/top/s06-doudai-blocks.webp") center / contain no-repeat;
  }
  /* アイコン↔見出しは head の gap で制御（body の gap=16px とは独立して詰める）。 */
  .top-doudai__head { display: flex; flex-direction: column; gap: 0; }
  .top-doudai__title { font-size: var(--font-size-h4); text-align: center; }  /* Figma SP 実測 ~16px */
  .top-doudai__text { font-size: var(--font-size-h6); line-height: 1.7; }  /* Figmaコード 12.8px */
  .top-doudai__text p + p { margin-top: var(--space-16); }
  .top-doudai__action { text-align: center; margin-top: 16px;}
}

/* ===== S07 ippoの療育サービス 大型カード2枚 ============================ */
.top-services { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-32); }
.top-service {
  /* 手描きの枠を border-image で適用（top/top-service-border.webp・1014×1028・透過）。
     クリーンな solid 線では出ないため。中央は透過＝テクスチャ背景がそのまま見える。 */
  border-image: url("../../images/top/top-service-border.webp") 20 / 10px round;
  border-radius: var(--radius-lg); padding-top: var(--space-32); overflow: hidden; text-align: center;
}
/* 緑/水色カードは「テクスチャ付きの緑/水色」（Figma実測 緑=rgb19,146,88 / 水色=rgb22,137,177）。
   tex-green/tex-blue を 346.8×327.8px タイルで直接フィル。 */
.top-service--green {
  background-color: var(--color-accent-green-deep);
  background-image: url("../../images/common/tex-green.webp");
  background-repeat: repeat; background-position: top left; background-size: 346.8px 327.8px;
}
.top-service--blue {
  background-color: var(--color-accent-blue);
  background-image: url("../../images/common/tex-blue.webp");
  background-repeat: repeat; background-position: top left; background-size: 346.8px 327.8px;
}
.top-service__photo {
  /* Figma書き出しのクリップ済みブロブ（透過）。mask不要、自然比率で表示。*/
  width: 300px; margin-inline: auto; display: block; height: auto; /* Figma: 写真288px / カード504px ≈ 57% */
}
.top-service__body {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-32);
  padding: var(--space-24) var(--space-32) var(--space-32); color: var(--color-white);
}
.top-service__title {
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-wide);
  margin: 0;
}
.top-service__text {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  margin: 0;
}
/* 療育サービスカードの「詳しく見る」は共通 .c-morebtn--offwhite（buttons.css）を使用。 */
/* SP：Figma SP は2カラムのまま。写真・本文・ボタンを列幅に収まるよう縮小する。 */
@media (max-width: 768px) {
  .top-services { gap: var(--space-12); }
  /* SP専用の手描き枠（top-service-border_sp.webp・336×518・透過）。 */
  .top-service {
    border-image: url("../../images/top/top-service-border_sp.webp") 20 / 10px round;
  }
  .top-service { padding-top: var(--space-8); }
  .top-service__photo { display: none; }   /* SPでは療育サービスカードの写真を非表示 */
  .top-service__body { padding: var(--space-16); gap: var(--space-16);height: 100%; }
  .top-service__title {
    font-size: var(--font-size-h4);   /* Figma SP 実測 ~15.7px */
    line-height: var(--line-height-base);
    /* 両カードで見出しの高さを2行分に揃える（1行の児発も2行分を確保し、本文・ボタン位置を合わせる）*/
    min-height: calc(2em * var(--line-height-base));
    display: flex; align-items: center; justify-content: center; text-align: center;
  }
  .top-service__text { font-size: var(--font-size-h6); flex: 1; }  /* Figmaコード 12.8px */
  /* c-morebtn の既定 min-width:17.5rem は狭い2カラムからはみ出すため解除し全幅に */
  .top-service .c-morebtn {
    min-width: 0;
    width: 100%;
    font-size: var(--font-size-h6);
    padding-right: calc(var(--space-8) + 2rem);
    padding-left: var(--space-8);
  }
}

/* ===== S08 支援内容 6カード ============================================
   グリッドは共通コンポーネント components/support.css（.c-support）へ移設。
   front-page / about で共用（トップがマスター）。 */

/* ===== S08b 課外体験プログラム（Figma 17:3507）======================== */
.top-kagai { position: relative;}
.top-kagai__illust {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -10%);
  width: 216px; height: auto; z-index: 2; /* Figma 17:3508: 216×153 */
}
.top-kagai__heading {
  text-align: center;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  color: var(--color-brown-text);
  margin: var(--space-64) 0 var(--space-64);
}
.top-kagai__cards { display: flex; flex-direction: column; gap: var(--space-32); }
.top-kagai__card {
  display: flex; align-items: center; gap: var(--space-40);
  /* 手描き（クレヨン）の枠を border-image で適用（.top-concern と共通の top/top-concern-border.webp）。
     中身は白塗り（border 内側＝padding-box まで）。 */
  background: var(--color-white);
  background-clip: padding-box;               /* 枠線の外側に白がはみ出さないように */
  border-image: url("../../images/top/top-concern-border.webp") 44 / 20px round;
  border-radius: var(--radius-md);
  padding: var(--space-24) var(--space-32);
  overflow: hidden;
}
.top-kagai__photo {
  /* Figma書き出しのクリップ済みブロブ（透過・skewも画像に内包）。mask/skew不要、自然比率で表示。*/
  flex: 0 0 334px; width: 334px; min-width: 0; height: auto;
}
.top-kagai__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-24); }
.top-kagai__eyebrow {
  display: inline-block;          /* 幅は中のテキスト依存（top-concern__eyebrowと同様）*/
  align-self: flex-start;         /* flex column内で全幅に伸びるのを防ぐ */
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-brown-text);
  background: url("../../images/common/underline.png") left bottom / 100% 4px no-repeat;
  padding-bottom: var(--space-8);
}
.top-kagai__text {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  margin: 0;
}
/* SP：Figma SP は2カラム。各カードは「見出し→本文→写真（下端）」の縦構成。 */
@media (max-width: 768px) {
  .top-kagai__illust { width: 140px; position: static; transform: none; left: auto;margin: auto;display: block;}
  .top-kagai__heading { font-size: var(--font-size-h4); margin-block: var(--space-16) var(--space-32); }  /* Figmaコード 16px */
  .top-kagai__cards { flex-direction: row; gap: var(--space-12); align-items: stretch; }
  .top-kagai__card {
    flex: 1 1 0; min-width: 0;
    flex-direction: column-reverse;  /* 写真(先頭) を下、本文を上に */
    justify-content: flex-end;
    gap: var(--space-24);
    padding: var(--space-12);
  }
  .top-kagai__photo { flex: none; width: 100%; transform: none; }
  .top-kagai__body { gap: var(--space-8); }   /* SPはeyebrow〜本文の間隔を8pxに */
  .top-kagai__eyebrow { font-size: var(--font-size-h5); align-self: center; background-size: 100% 2px; }   /* SPは中央寄せ・下線2px */
  .top-kagai__text { font-size: var(--font-size-xs); line-height: var(--line-height-base); }  /* Figmaコード 11.6px */
}

/* ===== S09 教室のご紹介 ============================================== */
/* カルーセル（PC=3カラムグリッド / SP=中央スナップカルーセル）は共通コンポーネント
   components/rooms-carousel.css（.c-rooms）＋ template-parts/components/rooms-carousel.php
   ＋ assets/js/rooms-carousel.js へ移管。教室一覧ページ（kyoshitsu）と共用。 */

/* ===== S10 お知らせ ==================================================== */
.top-news__list { list-style: none; margin: 0; padding: 0; } /* 幅は .top-inner--medium で制御 */
.top-news__row {
  display: flex; align-items: center; gap: var(--space-24);
  padding: var(--space-24) 0; border-bottom: 1px solid var(--color-brown-text);
}
.top-news__date { flex: 0 0 auto; font-size: var(--font-size-h6); font-weight: var(--font-weight-bold); }
.top-news__tags { flex: 0 0 auto; display: flex; gap: var(--space-8); }
.top-news__title { flex: 1; font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); margin: 0; }
.top-news__title a { color: var(--color-brown-text); text-decoration: none; }
.top-badge {
  display: inline-block; background: var(--color-accent-green-deep); color: var(--color-white);
  border-radius: var(--radius-pill); padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); line-height: var(--line-height-base);
}
/* SP：日付＋カテゴリを1行目、タイトルを2行目に折り返し。Figma SP に合わせ小さく・詰める。 */
@media (max-width: 768px) {
  .top-news__list {
    margin-top: calc(var(--space-16) * -1);
  }
  .top-news__row { flex-wrap: wrap; gap: var(--space-8) var(--space-12); padding-block: var(--space-16); }
  .top-news__title { flex-basis: 100%; font-size: var(--font-size-sm); line-height: var(--line-height-base); }  /* Figmaコード 13.5px */
  .top-news__date { font-size: var(--font-size-h6); }
}

/* ===== S11 Instagram =================================================== */
/* フィードはプラグイン（[instagram feed="1206"]）が描画。ラッパのみ用意。 */
.top-insta__feed { margin-top: var(--space-32); }

/* ===== S12 コラム ====================================================== */
/* PCは縦積みレイアウトのまま（5記事）。SP（〜768px）のみ2カラム・左寄せのカルーセル
   （ネイティブ scroll-snap でスワイプ＋左右矢印でページ送り。無限ループなし。
   先頭では左矢印・末尾では右矢印を非表示）。挙動は assets/js/columns-carousel.js。
   矢印の見た目は components/rooms-carousel.css（c-rooms）と揃える。 */
.top-columns-carousel { position: relative; }
.top-columns__viewport { position: relative; }
.top-columns__arrow { display: none; }  /* PCでは非表示 */
.top-columns { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-40); } /* 幅は .top-inner--medium で制御 */
.top-column { display: flex; gap: var(--space-40); }
.top-column:nth-child(n+3) { display: none; }  /* PCは先頭2記事のみ表示（SPカルーセルは全件） */
.top-column__thumb { flex: 0 0 360px; width: 360px; min-width: 0; aspect-ratio: 360 / 255; object-fit: cover; border-radius: var(--radius-sm); }
.top-column__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.top-column__date { font-size: var(--font-size-h6); font-weight: var(--font-weight-bold); margin: 0; }
.top-column__tags { display: flex; gap: var(--space-8); }
.top-column__title {
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin: 0;
}
.top-column__title a { color: var(--color-brown-text); text-decoration: none; }
.top-column__excerpt {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  margin: 0;
}
/* SP：2カラム・左寄せのカルーセル。各カードはサムネ上・テキスト下の縦構成（抜粋は省略）。
   ネイティブ scroll-snap でスワイプ、矢印で1ページ（＝2枚ぶん）送る。無限ループなし。 */
@media (max-width: 768px) {
  .top-columns {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  .top-columns::-webkit-scrollbar { display: none; }
  /* 2.1カラム＝3枚目が少し覗き、スクロール可能と分かる。
     2.1枚＋間のgap2つぶんを全幅に収める計算。左端スナップで左寄せスタート。 */
  .top-column {
    display: flex;  /* PC用 nth-child(n+3) の非表示を打ち消す（SPは全件カルーセル） */
    flex: 0 0 calc((100% - var(--space-12) * 2) / 2.1);
    flex-direction: column;
    gap: var(--space-8);
    scroll-snap-align: start;
  }
  .top-column__thumb { flex-basis: auto; width: 100%; }
  .top-column__body { gap: var(--space-8); }
  .top-column__title { font-size: var(--font-size-sm); }  /* Figmaコード 13.5px */
  .top-column__excerpt { display: none; }

  /* 左右矢印。viewport基準で「サムネイル高さの上下中央」に配置。
     サムネ高さはビューポート幅依存のため、JS が実測して --cols-arrow-top（px）に渡す
     （未設定時は 50% にフォールバック）。端では JS が hidden を付けて隠す。
     見た目は components/rooms-carousel.css（c-rooms）と統一。 */
  .top-columns__arrow {
    display: block;
    position: absolute; top: var(--cols-arrow-top, 50%); transform: translateY(-50%);
    z-index: 3;
    width: 40px; height: 40px; padding: 0;
    border: none; border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--color-white) 85%, transparent);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }
  .top-columns__arrow[hidden] { display: none; }  /* 端では非表示（先頭=左／末尾=右） */
  .top-columns__arrow--prev {
    left: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 8L10 12L14 16' stroke='%23674428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .top-columns__arrow--next {
    right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 8L14 12L10 16' stroke='%23674428' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* ===== S13 FAQ ======================================================== */
.top-faq { display: flex; flex-direction: column; gap: var(--space-16); } /* 幅は .top-inner--medium で制御 */
.top-faq__item { background: var(--color-white); border-radius: 10px; overflow: hidden; }
.top-faq__q {
  display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16); cursor: pointer;
  list-style: none; font-size: var(--font-size-body); font-weight: var(--font-weight-medium);
}
.top-faq__q::-webkit-details-marker { display: none; }
.top-faq__q::before {
  content: "Q"; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--color-accent-yellow); color: var(--color-white);
  font-weight: var(--font-weight-black); display: inline-flex; align-items: center; justify-content: center;
}
.top-faq__q::after {
  content: "＋"; margin-left: auto;
  font-size: var(--font-size-h3); font-weight: var(--font-weight-medium);
  color: var(--color-brown-text); line-height: 1;
}
.top-faq__item[open] .top-faq__q::after { content: "−"; }
.top-faq__a {
  display: flex; gap: var(--space-16); padding: 0 var(--space-16) var(--space-16);
  font-size: var(--font-size-body); line-height: var(--line-height-body);
}
.top-faq__a::before {
  content: "A"; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-white);
  color: var(--color-accent-yellow); font-weight: var(--font-weight-black);
  display: inline-flex; align-items: center; justify-content: center;
}
.top-faq__a-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.top-faq__a-body p { margin: 0; }
/* 料金ページ等への補足リンク（下線＋「こちら」を太字）。Figma 76:25063〜25066 */
.top-faq__link {
  align-self: flex-start;
  border-bottom: 1px solid var(--color-brown-text);
  color: var(--color-brown-text); text-decoration: none;
  font-weight: var(--font-weight-medium);
}
.top-faq__link span { font-weight: var(--font-weight-bold); }

/* ===== S14 見学・体験CTA ============================================== */
.top-cta {
  display: flex; align-items: center; justify-content: center; gap: var(--space-80);
  padding-block: var(--space-80) var(--space-200);
}
.top-cta__illust { flex: 0 0 auto; width: 21rem; max-width: 80%; min-width: 0; }
.top-cta__body { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-40); }
.top-cta__heading { display: flex; flex-direction: column; gap: var(--space-8); }
.top-cta__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  margin: 0;
}
.top-cta__sub {
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-wide);
  margin: 0;
}
@media (max-width: 768px) {
  .top-cta { flex-direction: column; gap: var(--space-32); padding-block: var(--space-24) var(--space-64); }
  .top-cta__illust { max-width: 60%; margin-inline: auto; display: block; }
  .top-cta__body { align-items: center; text-align: center; gap: var(--space-24); }
  .top-cta__title { font-size: var(--font-size-h3); }  /* Figmaコード 18.29px */
  .top-cta__sub { font-size: var(--font-size-h5); }
}

/* =====================================================================
   スマートフォン（SP）共通レスポンシブ
   Figma SP「修正稿_トップページ」76:15284（375px）基準。各セクション固有の
   レスポンシブは上の各ブロック内に置き、ここは横断的な調整のみを集約する。
   ===================================================================== */
@media (max-width: 768px) {

  /* 左右パディングをFigma SP基準（16px）に。clamp上限の18.75pxより詰めて本文幅を確保 */
  .top-inner { padding-inline: var(--space-16); }

  /* --- セクション縦余白を圧縮（PCは80/160/200/240px） --- */
  .top-sec--pad        { padding-block: var(--space-48); }
  .top-sec--pad-b      { padding-bottom: var(--space-32); }
  .top-sec--pad-b-wide { padding-bottom: var(--space-80); }
  .top-sec:has(> .top-wave:last-child) > .top-wave:last-child { margin-top: var(--space-32); }

  /* --- 「一覧／もっと見る」ボタンはほぼ全幅・上余白も圧縮 --- */
  .top-actions { margin-top: var(--space-24); }

  /* --- S03 実績カウンター：3カラムのまま枠付きで小型化（Figma SP は白カード維持） --- */
  .top-counter__title { font-size: var(--font-size-h3); margin-bottom: var(--space-32); }  /* Figma SP 実測 ~17.7px */
  .top .c-counter__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  .top .c-counter__card { padding: var(--space-16) var(--space-4) var(--space-8); }
  /* SP：アイコンは43×43pxのエリアに比率維持(contain)で中央表示。
     カウンター各カードのインラインstyle（icon_h/icon_y 等のPC用調整）を上書きするため !important。 */
  .top .c-counter__icon {
    width: 43px !important;
    height: 43px !important;
    top: -6px !important;
    object-fit: contain;
  }
  .top .c-counter__num {
    min-height: 0;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-h2-lead);
  }
  .top .c-counter__num small { font-size: var(--font-size-h5); }  /* Figmaコード 14.22px */
  .top .c-counter__num small.c-counter__unit--sm { font-size: var(--font-size-h6); }
  .top .c-counter__label { margin-top: 0; font-size: var(--font-size-xs); }  /* Figmaコード 11.68px */
  .top .c-counter__note { font-size: var(--font-size-2xs); text-align: center; margin-top: var(--space-8)}  /* Figmaコード 10.6px・SPは中央揃え */

  /* --- セクション見出し（c-heading）：Figma SP は小さめ（PCのh2=32pxは大きすぎる） --- */
  .top .c-heading__title { font-size: var(--font-size-h3); }  /* Figmaコード 18.29px（全セクション見出し）*/
  .top .c-heading__icons { width: 64px; height: 42px; margin-bottom: var(--space-4); }
  .top-inner > .c-heading { margin-bottom: var(--space-24); }

  /* --- S08 支援内容：2カラム（Figma SP。component 既定の600px→1カラムを上書き） --- */
  .top .c-support { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }

  /* --- S03 実績カウンター：SPはクリーム→オフホワイト基調に（MVと連続させる） --- */
  .top-sec--sp-offwhite.bg-cream { background-color: var(--color-bg-offwhite); }
  .top-sec--sp-offwhite.bg-cream.has-texture { background-image: url("../../images/common/tex-offwhite.webp"); }
  .top .c-support__title { font-size: var(--font-size-h5); }  /* Figmaコード 14.22px */
  .top .c-support__text  { font-size: var(--font-size-h6); }  /* Figmaコード 12.8px */

  /* S09 教室カードのSP文字サイズは components/rooms-carousel.css（.c-rooms 内）が担当。 */

  /* --- 各種ボタン（c-morebtn）：Figmaコード 12.8px --- */
  .top .c-morebtn { font-size: var(--font-size-h6); }

  /* --- バッジ（カテゴリ）：Figmaコード 9.5px --- */
  .top .top-badge { font-size: var(--font-size-3xs); }

  /* --- S13 FAQ：設問・回答ともFigmaコード 14.22px --- */
  .top-faq__q { font-size: var(--font-size-h5); }
  .top-faq__a { font-size: var(--font-size-h5); }
}