/*
Theme Name: LOICX チアダンススクール
Theme URI: https://loicx-girls.com/
Author: LOICX
Description: LOICX☆チアダンススクール公式サイト用カスタムクラシックテーマ。Elementor廃止・Secure Custom Fields（SCF / ACF互換）でフィールドをPHPコード管理。校舎CPT（school）+ エリアタクソノミー（school_area）を1テンプレで描画。
Version: 2.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: loicx
*/

/* =========================================================================
 * ビジュアル層 再構築（2026-06-03〜）。Figma実データと1対1照合して積み上げる。
 * 確定トークン（配色hex / Noto Sans JP / 1440・1120・160幅）は CLAUDE.md 参照。
 * フレーム1440 / コンテンツ1120 / 左右マージン160。
 * ========================================================================= */

/* ---- design tokens ----------------------------------------------------- */
:root {
	--primary:      #E80F47;  /* ブランドピンク */
	--secondary:    #F45981;
	--base:         #FFF4F7;  /* 淡ピンク背景 */
	--white:        #FFFFFF;
	--black:        #393939;  /* 本文文字 */
	--ink-strong:   #1C1C1C;

	/* クラス色 */
	--enjoy:        #FFB700;  /* エンジョイ＝アンバー */
	--technic:      #FF7700;
	--cheerleads:   #4059DA;
	--youth:        #3DD4F6;

	/* hero帯（エンジョイ専用オレンジ。左端サンプリングで確定） */
	--hero-orange-top: #FF8C00;
	--hero-orange:     #FF9D00;

	/* 補助 */
	--cream:        #FFFBF2;  /* plans背景の薄いクリーム帯 */
	--footer-bg:    #FEF3F8;  /* フッターの薄ピンク背景 */
	--placeholder:  #D9D9D9;
	--placeholder2: #EDEDED;
	--placeholder3: #E9E9E9;
	--divider:      #F7DCE3;
	--avatar:       #DFDFDF;
	--grey-text:    #515151;

	/* レイアウト */
	--loicx-max:    1120px;
	--loicx-side:   160px;

	/* 既定アクセント（ページで上書き） */
	--accent:       var(--enjoy);
}

/* ページ別アクセント */
.loicx-accent--pink       { --accent: var(--primary); }
.loicx-accent--enjoy      { --accent: var(--enjoy); }
.loicx-accent--technic    { --accent: var(--technic); }
.loicx-accent--cheerleads { --accent: var(--cheerleads); }
.loicx-accent--youth      { --accent: var(--youth); }
.loicx-accent--plain      { --accent: var(--white); }

/* ---- base reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	color: var(--black);
	background: var(--white);
	line-height: 1.6;
	font-feature-settings: "palt" 1;
	letter-spacing: .05em;
	overflow-x: clip;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }

/* 中央コンテンツ枠（1120px・左右160px相当） */
.loicx-container {
	width: 100%;
	max-width: var(--loicx-max);
	margin-inline: auto;
	padding-inline: 24px;
}

/* =========================================================================
 * ★ 共通ユーティリティ（新ページは“手書きで再導出せず”これを再利用すること）
 *   ここを直せば全ページ直る＝同じ翻訳ミス（stroke細い/全幅でない/skewが回転/アーチ深さ）の再発防止。
 *   Figma修正指示まとめ.md「★制作前ルール」と対応。既存ページは制定前のため個別実装（無改変）。
 * ========================================================================= */

/* 袋文字見出し：白塗り＋アクセント色フチ。
   ★必ずこのクラスを使う（strokeを手書きしない／Figma strokeWeightを直書きしない）。
   理由: -webkit-text-stroke＋paint-order:stroke fill は内側半分がfillに隠れる＝指定値の半分しか見えない。
   Figma strokeWeight 2px（=可視2px狙い）→ CSSは 4px。色はページの --accent を継承。 */
.loicx-outline {
	color: var(--white);
	-webkit-text-stroke: 4px var(--accent);
	paint-order: stroke fill;
}

/* 全幅（フルブリード）：親の幅に縛られず“ビューポート端まで”。1440でも1920でも端まで出る。
   ★全幅セクション（FV/intro帯など）は必ずこれ。max-width親の中でも100vwで突き抜ける。
   フロー要素用（position不要）。中の内容は別途 .loicx-container 等で中央寄せする。 */
.loicx-fullbleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* 視覚非表示（スクリーンリーダー/検索エンジン向けテキスト）：
   FVが画像・スライダーでテキスト見出しを置けないページのh1等に使う（LOICX TOPのh1で使用）。
   display:none だと読み上げ・SEOとも無効になるためクリップ方式。レイアウトへの影響ゼロ。 */
.loicx-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 平行四辺形クリップ：写真・帯の傾き。★“回転(rotate)”ではなくこれ（角丸0pxの平行四辺形）。
   skew量は --loicx-skew で（Figma実測。多くは14%。テクニック系8%）。 */
.loicx-skew {
	--loicx-skew: 14%;
	clip-path: polygon(var(--loicx-skew) 0, 100% 0, calc(100% - var(--loicx-skew)) 100%, 0 100%);
}

/* ドーム状アーチ（中央が上に膨らむ・上下とも上凸）。
   ★セクション下端/上端のアーチはこれ。サジッタ（弧の高さ）＝幅×約13%（Figma実測比。--loicx-arch-ratio）。
   使い方: アーチを出す要素の直下に <span class="loicx-arch"></span> を置き、親に position:relative。
   塗り色は currentColor（背景に載せたい色を color: で指定）。SVGの二次ベジェで上凸。 */
.loicx-arch {
	--loicx-arch-ratio: .13;
	position: absolute; left: 0; bottom: 0;
	width: 100%; aspect-ratio: 1 / var(--loicx-arch-ratio);
	background:
		radial-gradient(ellipse 50% 100% at 50% 100%, currentColor 99.5%, transparent 100%);
	pointer-events: none;
}

/* =========================================================================
 * ヘッダー（Figma Group59 / x20 y20 1400×80）
 *   ロゴ左上 + 右に白ピル（br70/影）内に nav(Bold16) + Primary体験予約ボタン
 *   オレンジhero上に重なる（absolute）。
 * ========================================================================= */
.site-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 50;
}
.site-header__inner {
	max-width: 1400px;
	margin-inline: auto;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.site-header__logo { flex: none; }
.site-header__logo img { width: 140px; height: 53px; object-fit: contain; }

.site-nav {
	display: flex;
	align-items: center;
	gap: 50px;
	background: var(--white);
	border-radius: 70px;
	box-shadow: 0 10px 25px rgba(0,0,0,.1);
	padding: 10px 10px 10px 50px;
	height: 80px;
}
.site-nav__links {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0; padding: 0;
}
.site-nav__links a {
	position: relative;
	font-weight: 700;
	font-size: 16px;
	color: var(--grey-text);
	white-space: nowrap;
	transition: color .2s linear;
}
/* ホバー／アクティブ時：文字色Primary＋下線グラデ（左→右に描画）＋流れ星（★がポップ）。
   動きは参考サイト(demo.17-project.net/loicx/ の custom-star-menu)と同一。
   下線=::before（gradient・scaleX 0→1・transform-origin:left・transition .3s）
   流れ星=::after（★・scale 0→1・バウンス cubic-bezier(.175,.885,.32,1.275)・transition .3s） */
.site-nav__links a::before {
	content: "";
	position: absolute;
	left: 50%; bottom: -12px;
	width: calc(100% + 6px); height: 2px;
	transform: translateX(-50%) scaleX(0);
	transform-origin: left center;
	opacity: 0;
	transition: transform .3s, opacity .3s;
	z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, rgba(232,15,71,0) 0%, var(--primary) 100%);
}
.site-nav__links a::after {
	content: "★";
	position: absolute;
	right: -7px; bottom: -18px;
	font-size: 14px; line-height: 1;
	color: var(--primary);
	opacity: 0;
	transform: scale(0);
	transition: .3s cubic-bezier(.175, .885, .32, 1.275);
	z-index: 2; pointer-events: none;
}
.site-nav__links a:hover,
.site-nav__links a.is-active { color: var(--primary); }
.site-nav__links a:hover::before,
.site-nav__links a.is-active::before { opacity: 1; transform: translateX(-50%) scaleX(1); }
.site-nav__links a:hover::after,
.site-nav__links a.is-active::after { opacity: 1; transform: scale(1); }
.site-nav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 220px; height: 60px;
	background: var(--primary);
	color: var(--white);
	font-weight: 800;
	font-size: 20px;
	border-radius: 50px;
	white-space: nowrap;
}
/* モバイルメニュー（犬＋MENU）/オーバーレイはPCでは非表示 */
.loicx-menu-btn, .loicx-nav-overlay { display: none; }
/* PCでは .site-nav__drawer はラッパーとして透過（子要素を直接 .site-nav の flex 子にする）。
   ドロワー上部の「ロゴ＋×」バーは SP 限定なので PCでは非表示。 */
.site-nav__drawer { display: contents; }
.site-nav__drawer-head { display: none; }
/* SP限定の改行（PCでは無効＝1行） */
.loicx-sp-br { display: none; }
/* PC限定の改行（SPでは無効＝自然な折り返しに任せる。テキスト側は {PCBR} トークン） */
.loicx-pc-br { display: inline; }

/* =========================================================================
 * セクション共通
 * ========================================================================= */
.sec { position: relative; }

/* =========================================================================
 * hero（色帯＋透かし英字＋見出し＋リード＋マスコット）
 * ========================================================================= */
.sec-hero {
	position: relative;
	overflow: hidden;
	padding-top: 200px;   /* ヘッダー(100) + Figma本文開始y200相当 */
	padding-bottom: 405px;/* 下のオレンジ余白（下三角形apex≒y999／画像box overlap用） */
}
.sec-hero--enjoy {
	/* Figma実体: ベース単色 #FF9D00（node1:588 Rectangle42）＋ Group10(node1:589)の
	   濃いオレンジ(#FF8C00)左くさび装飾を実書き出し画像で上に重ねる ＋ 下シェブロン。 */
	background-color: var(--hero-orange);
	background-image: url(assets/enjoy-fv-deco.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100% auto;
	/* 下端は通常の四角（参照ページ /loicx/enjoy/ 準拠で逆三角=下シェブロンを廃止）。
	   base の padding-bottom:405px は三角頂点用なので、四角向けに縮める。 */
	padding-bottom: 110px;
}
/* チアリーズ大会クラス hero：Figma「各クラスカラーリング」のFV背景=#566EED（明るい青）。
   ※アクセント色#4059DA(--cheerleads)は袋文字/ラベル/装飾用で、FV背景とは別色。フラット四角。 */
.sec-hero--cheerleads {
	background-color: #566EED;
	background-image: url(assets/cheerlys-fv-deco.png);   /* 参照ページと同じFV背景デコ（Group-60＝青2トーンの折り）。 */
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100% auto;
	/* FV下端を逆三角（下向きシェブロン）に＝下に画像を置くため、画像がこの頂点に食い込む。
	   参照実測: 端 y780 → 中央apex y978（深さ198px）。box下端をapexまで伸ばしclipで両端を198px上げる。 */
	padding-bottom: 348px;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 198px), 50% 100%, 0 calc(100% - 198px));
}
/* ユース(中高生)クラス hero：FV背景=Figma「各クラスカラーリング」のJr-YOUTH FVデコ(Group61＝水色#3DD4F6+下シェブロン)＋
   左上の英字透かし(JUNIOR YOUTH CLASS)の2画像。デコは下端がシェブロン（白角=透過）なので地色は敷かない。 */
.sec-hero--youth {
	background-color: #3DD4F6;   /* Figma各クラスカラーリング Jr-YOUTH FV基色（デコは上に乗る#03BBE4の折り。デコ角は透過＝基色が出る）。 */
	background-image: url(assets/youth-fv-deco.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	/* FV下に画像があるため下端を逆三角（下向きシェブロン）に。画像が頂点に食い込む。 */
	padding-bottom: 240px;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 150px), 50% 100%, 0 calc(100% - 150px));
}
.loicx-accent--youth .sec-hero__watermark {
	top: 0; left: 0; width: 848px; height: auto; aspect-ratio: 848 / 564;
	font-size: 0;
	background: url(assets/youth-watermark.png) no-repeat top left / contain;
}
.loicx-accent--youth .sec-hero__image { width: 300px; }
.loicx-accent--youth .sec-image { margin-top: -200px; }   /* 逆三角の頂点に画像を食い込ませる */
/* FV下画像は参照ページ準拠でポートレート450×600・中央寄せ（標準は1120幅16:9）。 */
.loicx-accent--youth .sec-image__figure { width: 450px; max-width: 100%; aspect-ratio: 450 / 600; margin-inline: auto; }
/* intro（プロとしてのふるまいまで学ぶ中高生クラス）の見出し色＝参照準拠 #03BBE4（Jr-YOUTHの濃い色）。center/profileは除外。 */
.loicx-accent--youth .sec-rich-text:not(.sec-rich-text--center):not(.sec-rich-text--profile):not(.sec-rich-text--accordion) .sec-rich-text__title { color: #03BBE4; }
/* 「…ご入会いただけます！」＝薄い水色#EAFBFFの角丸ピル＋#03BBE4文字（参照ac8430d準拠）。 */
.youth-join-pill { display: inline-block; background: #EAFBFF; color: #03BBE4; border-radius: 50px; padding: 6px 18px; font-size: 15px; font-weight: 600; line-height: 1.55; }
/* youthのクラス概要は右に単一写真(_MG_7796_)を表示（ポラロイドコラージュではなく1枚）。 */
.loicx-accent--youth .sec-spec__images {
	display: block;
	width: 440px; height: auto; aspect-ratio: 3 / 2;
	background: url(assets/youth-spec-mg7796.jpg) center/cover no-repeat;
	border-radius: 16px;
}
.loicx-accent--youth .sec-spec__images > * { display: none; }   /* コラージュ/装飾スパンは出さない */
/* 講師プロフィール：PCは画像左・見出し+本文右（gridでmediaが2行スパン）。SPは見出し→画像→本文の順。 */
.sec-rich-text--profile .loicx-container.sec-profile__row {
	display: grid; grid-template-columns: 400px 1fr;
	grid-template-areas: "media head" "media body";
	column-gap: 48px; row-gap: 16px; align-items: center;
}
.sec-profile__media { grid-area: media; align-self: center; }
.sec-profile__head { grid-area: head; align-self: end; }
.sec-profile__body { grid-area: body; }
.sec-profile__media img { width: 100%; height: auto; border-radius: 12px; display: block; }
/* 見出しはクラス概要(spec)と同じ＝小見出し(ユースクラス相当・accent36px)＋袋文字タイトル(クラス概要相当・白+accent縁48px)。 */
.sec-profile__eyebrow { font-weight: 700; font-size: 36px; color: var(--accent); letter-spacing: .05em; margin-bottom: 6px; }
.sec-profile__title { font-weight: 700; font-size: 48px; letter-spacing: .05em; color: var(--white); -webkit-text-stroke: 4px var(--accent); paint-order: stroke fill; margin: 0 0 24px; }
/* プロフィール本文は薄ピンクの角丸ボックス（参照ページ準拠）。 */
.sec-profile__body { background: var(--base); border-radius: 16px; padding: 28px 32px; }
/* 中央寄せ見出し＋本文（例: ＼ プロチアダンサー輩出経歴 ／）。見出しは「OGからのメッセージ」と同じ袋文字(白+accent縁48px)。 */
.sec-rich-text--center .sec-rich-text__title { text-align: center; font-weight: 900; font-size: 48px; letter-spacing: .05em; color: var(--white); -webkit-text-stroke: 4px var(--accent); paint-order: stroke fill; }
.sec-rich-text--center .sec-rich-text__body { text-align: center; }
/* FVキャラは縦長(344x500)のため、enjoy(435px幅=横長)と同程度の見た目になるよう幅を縮小。 */
.loicx-accent--cheerleads .sec-hero__image { width: 300px; }
/* 画像をFV逆三角の頂点に食い込ませる（参照: 画像上端y627＝apex-351）。 */
.loicx-accent--cheerleads .sec-image { margin-top: -351px; }
/* cheerlysのFV下画像は参照ページ準拠で 767px幅・中央寄せ（標準は container 幅いっぱい1120）。16:9は維持。 */
.loicx-accent--cheerleads .sec-image__figure { width: 767px; max-width: 100%; margin-inline: auto; }
/* 受賞歴（テクニックボタン直後のrich_text）の見出し＝参照準拠で中央寄せ＋チアリーズ色(#4059DA)＋36px。本文リストは左寄せのまま。 */
.loicx-accent--cheerleads .sec-button + .sec-rich-text .sec-rich-text__title { text-align: center; color: var(--accent); font-size: 36px; }
/* 受賞歴セクション上部に参照準拠のドーム型アーチ装飾（#566EED・全幅・上辺フラット/下辺凸・深さ143px）。
   ::before で section 内に重ねるため、section は position:relative＋上部にアーチ分の余白を確保。 */
.loicx-accent--cheerleads .sec-button + .sec-rich-text { position: relative; padding-top: 300px; }
.loicx-accent--cheerleads .sec-button + .sec-rich-text::before {
	content: "";
	position: absolute; top: 60px; left: 0; width: 100%; height: 143px;
	background: #566EED;            /* 上辺フラット＋下辺凸のドーム＝楕円下半分でclip（深さ143px=参照実測）。 */
	clip-path: ellipse(50% 100% at 50% 0);
	pointer-events: none;
}
/* 受賞歴「続きを読む」型アコーディオン（JS不要・PC/SP共通）。
   既定＝固定高で途中(CHEERLYS Lily 3期生)まで表示＋下グラデ→「続きを読む」で全文＋「閉じる」。
   SP-教室詳細「選ばれる理由」(.sch-reasons__fold)と同方式。 */
.sec-rich-text--accordion .loicx-container { gap: 0; }
.sec-rich-text--accordion .sec-rich-text__title { margin: 0; }
.rt-acc__cb { display: none; }
.rt-acc__fold { position: relative; margin-top: 28px; }
.rt-acc__body { max-height: 300px; overflow: hidden; }      /* CHEERLYS Lily 3期生(本文内y169-223)まで鮮明に表示、その下(Star)にフェード */
.rt-acc__fade {
	position: absolute; left: 0; right: 0; bottom: 0; height: 80px;   /* Lily群の下(y220-)からフェード→Starを淡く隠す */
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 92%);
	pointer-events: none;
}
.rt-acc__more {
	display: flex; align-items: center; justify-content: center;
	width: 240px; max-width: 100%; margin: 24px auto 0; padding: 15px 40px;
	background: var(--accent); border-radius: 50px; color: var(--white);
	font-size: 18px; font-weight: 800; line-height: 1.1; cursor: pointer; user-select: none;
}
.rt-acc__more .t-close { display: none; }
.rt-acc__cb:checked ~ .rt-acc__fold .rt-acc__body { max-height: none; }
.rt-acc__cb:checked ~ .rt-acc__fold .rt-acc__fade { display: none; }
.rt-acc__cb:checked ~ .rt-acc__more .t-open { display: none; }
.rt-acc__cb:checked ~ .rt-acc__more .t-close { display: inline; }
/* チアリーズFVの透かし英字＝参照ページ準拠の「CHEERLYS / CLASS」2行画像（淡ラベンダー）。
   他クラスのアクセント色テキスト透かしと違い、cheerlysは専用画像を使う（テキストは font-size:0 で隠す）。
   実測: 左上(left:0/top:5)・CHEERLYS上段が幅約900px、PNGアスペクト1113:368。 */
.loicx-accent--cheerleads .sec-hero__watermark {
	top: 5px;
	left: 0;
	width: 900px;
	height: auto;
	aspect-ratio: 1113 / 368;
	font-size: 0;
	background: url(assets/cheerlys-watermark.png) no-repeat top left / contain;
}
.sec-hero__watermark {
	position: absolute;
	top: 28px; left: -11px;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 224px;
	line-height: .9;
	color: color-mix(in srgb, var(--accent) 30%, transparent);   /* クラス別：透かしはアクセント色30%（enjoy=アンバー / cheerlys=青 等） */
	white-space: pre;
	pointer-events: none;
	z-index: 0;
}
.sec-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}
.sec-hero__body { width: 542px; max-width: 100%; }
.sec-hero__title {
	font-weight: 800;
	font-size: 70px;
	line-height: 1.1;
	color: var(--white);
	margin-bottom: 40px;
}
.sec-hero__lead {
	font-weight: 800;
	font-size: 30px;
	line-height: 1.5;
	color: var(--white);
}
.sec-hero__image { flex: none; width: 435px; transform: translateY(-60px); }  /* Figma: マスコは本文より上(y144)。下の画像boxと重ねない（レイアウト高さは変えない） */
.sec-hero__image img { width: 100%; height: auto; }
/* FVバナー（全幅・テキスト焼き込み画像）。旧サイト準拠でヘッダーは上に重なる（header=absolute）。 */
.sec-hero--banner { padding: 0; overflow: hidden; line-height: 0; }
.sec-hero__banner { display: block; width: 100%; height: auto; }
/* 中央見出し/バナー直後の画像、または enjoy角FV直後の画像：enjoy hero用の-440pxタックを解除。 */
.sec-hero--banner ~ .sec-image,
.sec-rich-text--center + .sec-image { margin-top: 14px; }
.sec-hero--enjoy + .sec-image { margin-top: 40px; }   /* enjoy角FV(チェブロン無し)直後はタック不要 */

/* FAQ ページのメイン画像：旧サイトFV(800×855)は縦長
   →figureを縦長比に＋containで全景表示（PCは中央400px、SPは全幅）。 */
.page-frequently-asked-questions .sec-image__figure { aspect-ratio: 800 / 855; max-width: 400px; margin-inline: auto; background: transparent; border-radius: 16px; }
.page-frequently-asked-questions .sec-image__figure img { object-fit: contain; }
.page-frequently-asked-questions .sec-image__figure::before { display: none; }
/* 講師募集ページのフライヤーバナー(ネイティブ1536×701)：等倍以下で表示しボケ回避 */
.iw-flyer-banner { margin: 0 auto; max-width: 1120px; }
.iw-flyer-banner img { width: 100%; height: auto; border-radius: 14px; display: block; }
.iw-flyer-section.sec-rich-text { padding-top: 40px; padding-bottom: 0; }

/* 保護者の声ページのメイン画像：横長バナー(1920×1001=安心の総合評価97.4%) */
.page-messages-from-parents .sec-image__figure { aspect-ratio: 1920 / 1001; max-width: 960px; margin-inline: auto; background: transparent; border-radius: 16px; }
.page-messages-from-parents .sec-image__figure img { object-fit: contain; }
.page-messages-from-parents .sec-image__figure::before { display: none; }

/* FVタイトル「保護者からの／メッセージ」をPC・SPともに改行（titleの\nを反映） */
.page-messages-from-parents .sec-hero__title { white-space: pre-line; }
/* メイン画像と声カードの間に余白を追加 */
.page-messages-from-parents .sec-image + .sec-rich-text { padding-top: 80px; }

/* =========================================================================
 * 保護者からのメッセージ専用ページ（/messages-from-parents/）
 *   校舎ページの .sch-voices/.sch-voice デザインをそのまま流用し全15件を縦並びで表示
 *   校舎ページ前提の白ドームアーチ＋上方向transformは無効化（FAQ同様）
 * ========================================================================= */
.page-messages-from-parents .sec-rich-text { padding: 40px 0 80px; background: var(--base); }
.page-messages-from-parents .sec-rich-text__body { text-align: left; }
/* wpautopが <span class="sch-voice__q"> を <p>…</p> でラップする結果、
   斜め(-3deg)が水平に見える問題への対策（保護者の声ページ専用・他ページ影響なし）。
   「Qタブを含む<p>だけ」を対象に余白を整え、Qタブ本体に display:inline-block を明示。
   <p class="sch-voice__a">（回答段落）には触らず、回答間の余白は維持する。 */
.page-messages-from-parents .sch-voice__card p:has(> .sch-voice__q) {
	margin: 22px 0 6px;     /* タブ上=回答との間に余裕。下=次の回答との距離 */
	padding: 0;
	line-height: 1;
}
.page-messages-from-parents .sch-voice__card p:has(> .sch-voice__q):first-child { margin-top: 0; }
.page-messages-from-parents .sch-voice__card .sch-voice__q { display: inline-block; }
/* PC: 2列grid（カード間に十分な余白）／SP: 1列縦並び */
.voices-page-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 100px 40px; max-width: 1200px; margin: 0 auto; }
/* .sch-voice の校舎ページ前提のmargin-top:50を無効化（gridのgapで管理） */
.voices-page-wrap .sch-voice { margin: 0; width: 100%; max-width: none; }
/* カード内の「声カード本体」と「アバター+名前」の間に余白追加（誰の声か明確に） */
.voices-page-wrap .sch-voice .sch-voice__person { margin-top: 32px; }

/* 案1：カード＋名前を淡いピンク枠で1グループ化（保護者の声・「どの声か」を明確化）
   カード本体(.sch-voice__card)・名前(.sch-voice__name)は無変更。枠を足すだけ。
   PC/SP共通で適用。SPの左右paddingは下の max-width:768px で縮小（カードが細くなりすぎない）。 */
.page-messages-from-parents .voices-page-wrap .sch-voice {
	box-sizing: border-box;
	background: #FBE7EF;
	border-radius: 32px;
	padding: 64px 40px 36px;
}

/* PC: detailsは grid アイテム1個＝gridの2列全幅を占有し、内部で再度2列gridに。
   PCもSPと同じアコーディオン（2026-07-17）＝閉時は inner の先頭2枚（通算7・8枚目）
   だけ表示して計8件、「もっと見る」で残りを展開。SPは従来どおり6件＋アコーディオン。 */
.voices-more-wrap { grid-column: 1 / -1; display: flex; flex-direction: column; }
.voices-more-wrap > .voices-more-inner { order: 1; }
.voices-more-wrap > summary { order: 2; }
.voices-more-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 100px 40px; }
/* 「もっと見る/閉じる」ボタン（PC/SP共通） */
.voices-more-wrap > summary {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	width: 280px; max-width: 100%; margin: 80px auto 0; padding: 14px 0;
	background: #fff; border: 2px solid var(--primary); border-radius: 999px;
	color: var(--primary); font-weight: 800; font-size: 15px; cursor: pointer;
	list-style: none; transition: background-color .2s, color .2s;
}
.voices-more-wrap > summary::-webkit-details-marker { display: none; }
.voices-more-wrap > summary:hover { background: var(--primary); color: #fff; }
.voices-more-wrap > summary .t-close { display: none; }
.voices-more-wrap[open] > summary .t-open { display: none; }
.voices-more-wrap[open] > summary .t-close { display: inline; }
/* PCの「先頭2枚（通算7・8枚目）は閉時も表示」は loicx-voices-count.js が
   DOM移動で実現（PC時: inner先頭2枚を details の外＝.voices-page-wrap 直下へ移動、
   SP時: innerへ戻す）。閉じた<details>の中身をCSSで強制表示する方式は
   Chromeの ::details-content(content-visibility:hidden) では効かないため廃止。 */

@media (max-width: 768px) {
	/* FVは校舎風ピンクFVを共通ルールで適用済み（clip-path不要・SP高さは76.533vw） */
	.page-messages-from-parents .sec-rich-text { padding: 24px 0 56px; }
	/* SPは1列・カード間80pxで上下に明確な余白を確保 */
	.voices-page-wrap { grid-template-columns: 1fr; gap: 80px; max-width: none; }
	.voices-page-wrap .sch-voice .sch-voice__person { margin-top: 24px; }
	/* SPは幅が狭いので枠の左右paddingを縮小（カードが細くなりすぎない）＋角丸と上下paddingも小さく */
	.page-messages-from-parents .voices-page-wrap .sch-voice { padding: 44px 16px 28px; border-radius: 24px; }
	/* SP: details標準動作に任せる（閉じてる時は中身が隠れる）
	   PCで grid 強制したが、SPはUA stylesheet(details closed→子非表示)を効かせるため revert */
	.voices-more-wrap { display: block; grid-column: auto; }
	.voices-more-wrap:not([open]) > .voices-more-inner { display: none; }
	.voices-more-wrap[open] > .voices-more-inner { display: flex; flex-direction: column; gap: 80px; margin-top: 80px; }
	/* 開状態は flex column＋order で「閉じる」ボタンを末尾の声カードの下に移動 */
	.voices-more-wrap[open] { display: flex; flex-direction: column; }
	.voices-more-wrap[open] > .voices-more-inner { order: 1; }
	.voices-more-wrap[open] > summary { order: 2; margin: 80px auto 0; }
	/* ボタン本体のスタイルはPC/SP共通（上のベース定義）。SPは閉時の上余白のみ縮小 */
	.voices-more-wrap:not([open]) > summary { margin: 24px auto 0; }
}

/* =========================================================================
 * FAQページ（/frequently-asked-questions/）
 *   旧サイトのタブ形式を「上部ボタンジャンプ＋全ジャンル一覧」に再設計
 * ========================================================================= */
/* ジャンプボタンセクション（FV直下）：上下paddingを詰めて画像との余白を最小化 */
.page-frequently-asked-questions .faq-jumps-section { padding-top: 40px; padding-bottom: 24px; }
.page-frequently-asked-questions .faq-jumps-section + .sec-image { margin-top: 0; }

/* ジャンルジャンプボタン群（6つ） */
.faq-jump { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 auto; max-width: 920px; }
.faq-jump__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; padding: 14px 22px; background: #fff; color: color-mix(in srgb, var(--accent) 80%, #000); border: 2px solid var(--accent); border-radius: 999px; font-weight: 800; font-size: 15px; text-align: center; transition: background-color .2s, color .2s, transform .2s; }
.faq-jump__btn:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.faq-jump__btn::after { content: "▼"; margin-left: 8px; font-size: 12px; opacity: .7; }

/* ジャンル別リスト */
.faq-list { margin: 0 auto 72px; max-width: 880px; scroll-margin-top: 100px; }
.faq-list__title { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font-size: 28px; font-weight: 800; color: var(--accent); letter-spacing: .04em; }
.faq-list__title::before, .faq-list__title::after { content: ""; flex: 1; height: 3px; background: color-mix(in srgb, var(--accent) 35%, #fff); border-radius: 2px; }
.faq-list__title span { padding: 0 8px; white-space: nowrap; }
.faq-list__empty { text-align: center; color: #999; font-style: italic; padding: 40px 0; }

/* Q&Aアコーディオン */
.faq-item { background: #fff; border: 2px solid color-mix(in srgb, var(--accent) 25%, #fff); border-radius: 14px; margin-bottom: 14px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.faq-item__q { display: grid; grid-template-columns: 56px 1fr 32px; gap: 12px; align-items: start; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 800; font-size: 17px; line-height: 1.5; color: var(--black); transition: background-color .2s; }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { background: color-mix(in srgb, var(--accent) 5%, #fff); }
.faq-item__q::after { content: "＋"; justify-self: end; align-self: center; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 50%; font-size: 18px; font-weight: 800; transition: transform .25s; }
.faq-item[open] .faq-item__q::after { content: "−"; transform: rotate(180deg); }
.faq-item__qmark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--accent); color: #fff; border-radius: 50%; font-weight: 900; font-size: 22px; letter-spacing: 0; }
.faq-item__qtext { padding-top: 8px; }
/* A本文：wpautopが<div>と兄弟の<span>の周辺に<p>を挿入し grid 構造を壊すため、
   flex+wrapで包み、amark/atextを順序通り並べる。atextは flex:1 で幅を確保。 */
.faq-item__a { display: flex; flex-wrap: nowrap; gap: 12px; padding: 0 22px 22px; align-items: flex-start; }
.faq-item__amark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: color-mix(in srgb, var(--accent) 18%, #fff); color: color-mix(in srgb, var(--accent) 80%, #000); border-radius: 50%; font-weight: 900; font-size: 22px; }
.faq-item__atext { flex: 1 1 auto; min-width: 0; font-weight: 500; font-size: 16px; line-height: 1.75; color: var(--black); padding-top: 6px; }
.faq-item__atext p { margin: 0 0 1em; }
.faq-item__atext p:last-child { margin-bottom: 0; }
/* FAQ回答内のテキストリンクボタン（→ ◯◯はこちら 形式） */
.faq-link { margin: 12px 0 0; }
.faq-link__btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 8px 14px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: color-mix(in srgb, var(--accent) 80%, #000); border: 2px solid color-mix(in srgb, var(--accent) 45%, #fff); border-radius: 999px; font-weight: 800; font-size: 14px; line-height: 1.4; text-decoration: none; transition: background-color .2s, color .2s, transform .2s; }
.faq-link__btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateX(2px); }
.faq-link__arrow { font-weight: 900; font-size: 16px; }
/* wpautopが挿入する空の<p>を消す */
.faq-item__a > p:empty { display: none; }

/* 分岐型Q&A（直営スクール／カルチャースクールで回答が異なる場合）
   旧サイトはキャラ顔アイコンで識別だったが、色分け＋ラベル付きカードに改善 */
.faq-item__atext--split { padding-top: 0; }
.faq-split-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 14px; background: color-mix(in srgb, var(--accent) 10%, #fff); border-radius: 8px; color: color-mix(in srgb, var(--accent) 80%, #000); font-size: 13px; font-weight: 700; line-height: 1.5; }
.faq-split-note__icon { color: var(--accent); font-size: 16px; }
.faq-branches { display: grid; gap: 14px; }
.faq-branch { background: #fff; border-left: 6px solid; border-radius: 8px; padding: 14px 16px; box-shadow: 0 2px 4px rgba(0,0,0,.04); }
.faq-branch__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(0,0,0,.1); }
.faq-branch__icon { font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.faq-branch__icon img { width: 56px; height: 56px; padding: 4px; box-sizing: border-box; object-fit: contain; border-radius: 50%; display: block; background: #fff; }
.faq-branch--direct .faq-branch__icon img { width: 45px; height: 45px; padding: 4px; }
.faq-branch__label { font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.faq-branch__body { font-size: 15px; line-height: 1.75; color: var(--black); }
.faq-branch__body p { margin: 0 0 .8em; }
.faq-branch__body p:last-child { margin-bottom: 0; }
/* 直営スクール＝アクセント色(オレンジ)系 */
.faq-branch--direct { background: color-mix(in srgb, #FF7700 6%, #fff); border-left-color: #FF7700; }
.faq-branch--direct .faq-branch__label { color: #C24F00; }
/* カルチャースクール＝水色系（ユース色を流用） */
.faq-branch--culture { background: color-mix(in srgb, #3DD4F6 8%, #fff); border-left-color: #03BBE4; }
.faq-branch--culture .faq-branch__label { color: #0497B5; }
@media (max-width: 768px) {
	.faq-split-note { font-size: 12px; padding: 6px 10px; }
	.faq-branch { padding: 12px 12px; }
	.faq-branch__label { font-size: 13px; }
	.faq-branch__body { font-size: 13px; }
}

@media (max-width: 768px) {
	.faq-jump { gap: 8px; margin-bottom: 40px; }
	.faq-jump__btn { min-width: calc(50% - 4px); padding: 10px 14px; font-size: 13px; }
	.faq-list { margin-bottom: 48px; }
	.faq-list__title { font-size: 20px; gap: 8px; }
	.faq-item__q { grid-template-columns: 40px 1fr 24px; gap: 8px; padding: 14px 14px; font-size: 14px; }
	.faq-item__qmark { width: 32px; height: 32px; font-size: 16px; }
	.faq-item__q::after { width: 24px; height: 24px; font-size: 14px; }
	.faq-item__qtext { padding-top: 4px; }
	.faq-item__a { grid-template-columns: 40px 1fr; gap: 8px; padding: 0 14px 14px; }
	.faq-item__amark { width: 32px; height: 32px; font-size: 16px; }
	.faq-item__atext { font-size: 13px; padding-top: 2px; }
}

/* 募集要項などの項目表（rich_text 本文内 .loicx-jobtable）。アクセント色に追従。 */
.loicx-jobtable { width: 100%; border-collapse: collapse; margin: 8px auto 0; font-size: 15px; line-height: 1.7; text-align: left; }
.loicx-jobtable th, .loicx-jobtable td { border: 1px solid color-mix(in srgb, var(--accent) 35%, #fff); padding: 12px 14px; vertical-align: top; }
.loicx-jobtable th { width: 26%; white-space: nowrap; background: color-mix(in srgb, var(--accent) 12%, #fff); color: color-mix(in srgb, var(--accent) 78%, #000); font-weight: 800; }
.loicx-jobtable thead th { width: auto; text-align: center; }
.loicx-jobtable strong { color: color-mix(in srgb, var(--accent) 80%, #000); }
.loicx-jobtable__note { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--accent) 60%, #000); }
/* ライセンス報酬カード（rich_text 本文内 .loicx-license）：階段状の3カラム＝級バッジ＋条件＋報酬ピル */
.loicx-license { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px auto 18px; padding: 0; list-style: none; max-width: 760px; }
.loicx-license__row { display: grid; grid-template-columns: 96px 1fr 180px; align-items: center; gap: 18px; padding: 14px 18px; background: #fff; border: 2px solid color-mix(in srgb, var(--accent) 35%, #fff); border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.loicx-license__rank { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; height: 44px; padding: 0 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, #fff); color: color-mix(in srgb, var(--accent) 80%, #000); font-weight: 900; font-size: 20px; letter-spacing: .04em; }
.loicx-license__cond { font-size: 15px; line-height: 1.55; color: var(--black); }
.loicx-license__cond .start { display: inline-block; padding: 2px 10px; background: color-mix(in srgb, var(--accent) 14%, #fff); color: color-mix(in srgb, var(--accent) 80%, #000); border-radius: 6px; font-weight: 800; font-size: 14px; }
.loicx-license__pay { display: inline-flex; align-items: baseline; justify-content: center; min-height: 44px; padding: 6px 14px; background: var(--accent); color: #fff; border-radius: 999px; font-weight: 900; font-size: 18px; letter-spacing: .02em; }
.loicx-license__pay .unit { font-size: 13px; font-weight: 700; margin-left: 4px; opacity: .9; }
@media (max-width: 768px) {
	.loicx-license__row { grid-template-columns: 64px 1fr; grid-template-areas: "rank pay" "cond cond"; gap: 10px 12px; padding: 12px 14px; }
	.loicx-license__rank { grid-area: rank; font-size: 16px; min-width: 56px; height: 36px; padding: 0 10px; }
	.loicx-license__cond { grid-area: cond; font-size: 13px; }
	.loicx-license__pay { grid-area: pay; font-size: 15px; min-height: 36px; padding: 4px 10px; }
}
/* 「人気な理由」リスト等の rich_text 内 ul */
.loicx-page .sec-rich-text__body ul { margin: 0; padding-left: 1.4em; list-style: disc; text-align: left; }
.loicx-page .sec-rich-text__body li { margin: 4px 0; }

/* 業務報酬支給例 PC=表 / SP=カード切替（SP時のラベル無しブロック化を避けるため） */
.loicx-paycards { display: none; }
@media (max-width: 768px) {
	.loicx-jobtable.loicx-paytable { display: none; }
	.loicx-paycards { display: grid; gap: 14px; margin: 6px auto 12px; padding: 0; }
	.loicx-paycard { background: #fff; border: 2px solid color-mix(in srgb, var(--accent) 30%, #fff); border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
	.loicx-paycard__row { display: grid; grid-template-columns: 88px 1fr; gap: 8px 12px; padding: 6px 0; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 25%, #fff); font-size: 14px; line-height: 1.5; }
	.loicx-paycard__row:last-child { border-bottom: none; }
	.loicx-paycard__row .lbl { font-weight: 800; color: color-mix(in srgb, var(--accent) 78%, #000); font-size: 13px; align-self: center; }
	.loicx-paycard__row .val { font-weight: 700; color: var(--black); }
	.loicx-paycard__row--accent { background: color-mix(in srgb, var(--accent) 14%, #fff); margin: 4px -14px -12px; padding: 10px 14px; border-radius: 0 0 10px 10px; border-bottom: none; }
	.loicx-paycard__row--accent .val { color: color-mix(in srgb, var(--accent) 82%, #000); font-weight: 900; font-size: 16px; }
}

/* H3小見出し（業務報酬支給例など）＝spec_table eyebrow風（アクセント色・小さめ・中央寄せ）
   rich_text本文内に <h3 class="loicx-eyebrow"> を入れて使う。次の表との余白は詰める。
   上のテキスト（li/p）との間には十分な余白を確保（用途の切替えを視覚化）。 */
.loicx-eyebrow { display: block; text-align: center; font-weight: 700; font-size: 28px; color: var(--accent); letter-spacing: .05em; margin: 56px 0 6px; line-height: 1.3; }
.loicx-eyebrow + .loicx-jobtable, .loicx-eyebrow + table { margin-top: 4px; }
@media (max-width: 768px) {
	.loicx-eyebrow { font-size: 20px; margin-top: 40px; }
}

/* チア講師募集ページ：人気な理由セクションを薄背景でラップ
   （見出し＋本文の連続2セクションに .iw-reasons-bg を付け、上下の余白を分担して継ぎ目を消す） */
.iw-reasons-bg { background: color-mix(in srgb, var(--accent) 8%, #fff); }
.page-instructors-wanted .sec-rich-text.iw-reasons-head { padding-top: 80px; padding-bottom: 4px; }
.page-instructors-wanted .sec-rich-text.iw-reasons-body { padding-top: 0; padding-bottom: 80px; }
.iw-reasons-bg .sec-rich-text__title { margin-bottom: 0; }
.iw-reasons-body .sec-rich-text__body > ul:first-child { margin-top: 0; }
.iw-reasons-body .sec-rich-text__body { margin-top: 0; }
@media (max-width: 768px) {
	.iw-reasons-head { padding-top: 56px; }
	.iw-reasons-body { padding-bottom: 56px; }
}

/* 募集要項（求人）見出しの直下の表との余白を狭くする
   .sec-rich-text の padding:64px 0 を打ち消すため詳細度を上げて(.page-instructors-wanted) 0指定 */
.page-instructors-wanted .sec-rich-text.iw-jobhead { padding-bottom: 4px; }
.page-instructors-wanted .iw-jobhead + .sec-rich-text { padding-top: 0; }
.iw-jobhead .sec-rich-text__title { margin-bottom: 0; }

/* 「全国自宅近辺でも開校できます」セクションの本文を左寄せに（見出しは中央維持） */
.iw-closing .sec-rich-text__body { text-align: left; }
.iw-closing .sec-rich-text__body p { margin: 0 0 1em; }
.iw-closing .sec-rich-text__body p:last-child { margin-bottom: 0; }

/* 「人気な理由」見出しはPC・SPともに改行（rich_text--center内の <br class="loicx-sp-br"> をPCでも有効化） */
.iw-reasons-head .sec-rich-text__title .loicx-sp-br { display: inline; }
@media (max-width: 768px) {
	.loicx-jobtable, .loicx-jobtable tbody, .loicx-jobtable tr, .loicx-jobtable th, .loicx-jobtable td { display: block; width: auto; }
	.loicx-jobtable thead { display: none; }
	.loicx-jobtable th { border-bottom: none; }
	.loicx-jobtable td { border-top: none; }
	.loicx-license { font-size: 13px; }
	.loicx-license th, .loicx-license td { padding: 6px 8px; }
}
/* その中央見出し（「LOICX☆…新規開校」）の上下余白を調整（見出し→画像を詰める）。 */
.sec-rich-text--center:has(+ .sec-image) { padding-top: 40px; padding-bottom: 14px; }
/* SP：「LOICX☆チアダンススクール／新規開校」が2行で収まるようフォントを縮小（28pxだと1行目が折返し3行化） */
@media (max-width: 768px) {
	.sec-rich-text--center:has(+ .sec-image) .sec-rich-text__title { font-size: 22px; letter-spacing: .02em; }
}

/* =========================================================================
 * image（16:9 プレースホルダ／コンテンツ写真後差し）
 * ========================================================================= */
.sec-image {
	margin-top: -440px;   /* オレンジ下三角形の最深部に重ねる（Figma 画像box top y560） */
	z-index: 2;
}
.sec-image__figure {
	position: relative;
	width: 100%;
	aspect-ratio: 1120 / 630;
	background: var(--placeholder);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	overflow: hidden;
}
/* imgは figure 全面に絶対配置で敷く（flex中央寄せ＋プレースホルダ::beforeの影響で
   imgが上にズレて figure 下端のグレー背景が露出するのを防ぐ）。 */
.sec-image__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sec-image__figure::before {
	content: "";
	width: 185px; height: 185px;
	background: rgba(255,255,255,.0);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Z'/></svg>") center / contain no-repeat;
	background-color: #9a9a9a;
}
.sec-image__caption {
	font-size: 24px;
	color: var(--black);
	line-height: 1.2;
}

/* =========================================================================
 * rich_text（見出し＋本文・左寄せ）
 * ========================================================================= */
.sec-rich-text { padding: 64px 0; }
.sec-rich-text .loicx-container { display: flex; flex-direction: column; gap: 30px; }
.sec-rich-text__title {
	font-weight: 800;
	font-size: 24px;
	line-height: 1.5;
	color: var(--black);
}
.sec-rich-text__body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--black);
}
.sec-rich-text__body p { margin: 0 0 1em; }
.sec-rich-text__body p:last-child { margin-bottom: 0; }
/* 追加CSSクラス「rt-center」＝見出し・本文を中央揃えにするだけのユーティリティ。
   表示スタイル「center」は袋文字48pxの別デザインなので、書式を変えずに中央寄せしたい時はこちらを使う。
   （管理画面のリッチテキスト「追加CSSクラス（任意）」に rt-center と入力すれば適用） */
.sec-rich-text.rt-center .sec-rich-text__title,
.sec-rich-text.rt-center .sec-rich-text__body { text-align: center; }

/* =========================================================================
 * spec_table（クラス概要：中央見出し＋左ピル6行＋右ポラロイドコラージュ）
 * ========================================================================= */
.sec-spec { padding: 32px 0 64px; }
/* エンジョイは spec(クラス概要) が hero 直下のため、FVと見出しの間を +50px 空ける（enjoy限定）。 */
.loicx-accent--enjoy .sec-spec { padding-top: 82px; }
.sec-spec__head { text-align: center; margin-bottom: 30px; }
.sec-spec__eyebrow {
	font-weight: 700;
	font-size: 36px;
	color: var(--accent);
	letter-spacing: .05em;
	margin-bottom: 6px;
}
.sec-spec__title {
	font-weight: 700;
	font-size: 48px;
	letter-spacing: .05em;
	color: var(--white);
	-webkit-text-stroke: 4px var(--accent);
	paint-order: stroke fill;
}
.sec-spec__cols {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 30px;
}
.sec-spec__table {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1 1 auto;
	max-width: 830px;
}
.sec-spec__row {
	display: flex;
	align-items: center;
	gap: 30px;
}
.sec-spec__label {
	flex: none;
	align-self: center;          /* 行が高くてもラベルは伸ばさない（ピルを維持） */
	width: 210px;
	height: 57px;                /* Figma実測の高さ。完全ピルにする */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
	background: var(--accent);
	color: var(--white);
	font-weight: 800;
	font-size: 24px;
	border-radius: 999px;        /* 完全な角丸ピル（端が半円＝半径28.5px） */
	padding: 0 24px;
}
.sec-spec__value {
	font-size: 22px;
	line-height: 1.25;
	color: var(--black);
}
.sec-spec__value small,
.sec-spec__value .note { font-size: 16px; color: var(--black); }

/* 右の写真（1枚のみ挿入可）＋アンバー装飾カード。傾けて重ねる。 */
/* クラス概要の右コラージュ（Figma Group58 = 491×549）。
   写真3枚＋アンバー装飾3枚、全て同方向14%スキューの平行四辺形（回転ではない）。座標はFigma実値。 */
.sec-spec__images {
	position: relative;
	flex: none;
	width: 491px;
	height: 549px;
	align-self: flex-start;
	margin-top: 6px;
}
.sec-spec__images > * {
	position: absolute;
	clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
/* 装飾（純アンバー。写真が無くても出る） */
.sec-spec__deco--1 { left: 121px; top: 208px; width: 240px; height: 309px; background: var(--accent); z-index: 1; }                                       /* 1:638 #FFB700 */
.sec-spec__deco--2 { left: 0;     top: 105px; width: 121px; height: 156px; background: color-mix(in srgb, var(--accent) 70%, transparent); z-index: 2; }  /* 1:639 amber70% */
.sec-spec__deco--3 { left: 212px; top: 27px;  width: 121px; height: 156px; background: color-mix(in srgb, var(--accent) 70%, transparent); z-index: 6; }  /* 1:643 amber70%（最前面） */
/* 写真（プレースホルダ後差し＝WP添付ID） */
.sec-spec__photo--1 { left: 11px;  top: 138px; width: 240px; height: 309px; z-index: 3; }  /* 1:640 */
.sec-spec__photo--2 { left: 251px; top: 0;     width: 240px; height: 308px; z-index: 4; }  /* 1:641 */
.sec-spec__photo--3 { left: 180px; top: 344px; width: 159px; height: 205px; z-index: 5; }  /* 1:642 */
.sec-spec__photo { background: var(--placeholder3); object-fit: cover; display: block; }
/* エンジョイ：クラス概要コラージュに実写真を挿入（Figma Group58 1:640/641/642 ＝ enjoy-spec-01/02/03）。
   CSS相対URLはstyle.css基準＝assets/ なのでプレビュー・WP双方で同一パスが解決。.loicx-accent--enjoy でエンジョイ限定。 */
.loicx-accent--enjoy .sec-spec__photo--1 { background: center / cover no-repeat url(assets/enjoy-spec-01.jpg); }
.loicx-accent--enjoy .sec-spec__photo--2 { background: center / cover no-repeat url(assets/enjoy-spec-02.jpg); }
.loicx-accent--enjoy .sec-spec__photo--3 { background: center / cover no-repeat url(assets/enjoy-spec-03.jpg); }
/* チアリーズ：クラス概要コラージュに大会クラスの実写真を挿入。 */
.loicx-accent--cheerleads .sec-spec__photo--1 { background: center / cover no-repeat url(assets/cheerlys-spec-01.jpg); }
.loicx-accent--cheerleads .sec-spec__photo--2 { background: center / cover no-repeat url(assets/cheerlys-spec-02.jpg); }
.loicx-accent--cheerleads .sec-spec__photo--3 { background: center / cover no-repeat url(assets/cheerlys-spec-03.jpg); }

/* =========================================================================
 * gallery（中央袋文字見出し＋マスコ＋犬 → 全幅スキュー写真ストリップ）
 * ========================================================================= */
.sec-gallery { padding: 24px 0 64px; overflow-x: clip; }
.sec-gallery__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 19px;
	margin-bottom: 40px;
}
.sec-gallery__head .mascot { width: 132px; height: auto; }
.sec-gallery__head .dog    { width: 110px; height: auto; }
.sec-gallery__title {
	font-weight: 700;
	font-size: 48px;
	letter-spacing: .05em;
	color: var(--white);
	-webkit-text-stroke: 4px var(--accent);
	paint-order: stroke fill;
}
/* 全幅ストリップ：スキューした平行四辺形を横並び（同方向の傾き）。
   構成は「オレンジ(::before) ＋ 写真5枚 ＋ オレンジ(::after)」の7アイテム。
   ストリップ幅をビューポート比(116vw)にして7アイテムを flex:1 で等分 → 画面幅に応じて
   7つが一緒に縮み、左右オレンジは画面端で常に同じ割合だけ見切れる（写真と重ならない）。 */
.sec-gallery__strip {
	display: flex;
	align-items: flex-start;
	/* Figma 実測 (1440 viewport基準): アイテム240×359, gap29 → 全7アイテムでストリップ128.75vw.
	   レスポンシブ: 全てvw単位で viewport拡縮に追従。 アイテムwidthは flex:1 1 0 で均等分割。
	   1440時: 240×7 + 29×6 = 1854 = 128.75vw → アイテムwidth = (128.75vw - 6*gap) / 7 */
	gap: 2.014vw;       /* 29px @1440 = 29/1440*100 */
	width: 128.75vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding: 30px 0;
}
/* 7アイテム共通（写真・オレンジ装飾とも同サイズで一緒に伸縮）
   TOP講師紹介(.top-inst__photo)と同じ方式: <span> background-image + clip-path で
   平行四辺形フレーム+写真歪み無し+iOS Safari互換 (iPhone実機で動作確認済)。 */
.sec-gallery__strip > .sec-gallery__photo,
.sec-gallery__strip > .ph,
.sec-gallery__strip::before,
.sec-gallery__strip::after {
	content: "";
	flex: 1 1 0;
	min-width: 0;
	/* Figma実測: 各アイテム visual 240×359 @1440, 平行四辺形のスラント角 ≈ 6.4° (tan 0.112).
	   max-width撤去 → viewport拡縮にアイテム自身も追従。 aspect-ratioで高さは比例計算 */
	aspect-ratio: 240 / 359;
	display: block;
	/* polygon の左上 X% = (height × tan 6.4°) / width = (359 × 0.112) / 240 = 16.75% */
	clip-path: polygon(16.75% 0, 100% 0, 83.25% 100%, 0 100%);
}
.sec-gallery__strip > .ph { background: var(--placeholder3); }
.sec-gallery__strip > .sec-gallery__photo {
	background-size: cover;
	background-position: center;
	background-color: var(--placeholder3);   /* 画像読込前のチラつき防止 */
}
/* 左右端のオレンジ半装飾（::before=左/::after=右。flexの先頭・末尾アイテムになる） */
.sec-gallery__strip::before,
.sec-gallery__strip::after { background: var(--hero-orange); }
/* チアリーズ等：ギャラリー両端の装飾もクラスのアクセント色に合わせる（enjoyは従来のオレンジ維持）。 */
.loicx-accent--cheerleads .sec-gallery__strip::before,
.loicx-accent--cheerleads .sec-gallery__strip::after { background: var(--accent); }
/* Figma準拠ジグザグ (Group 47 (1).png 実測):
   ::before(左オレンジ)=下げ / 写真1=上 / 写真2=下げ / 写真3=上 / 写真4=下げ / 写真5=上 / ::after(右オレンジ)=下げ
   = ストリップ内 nth-child(odd) を 30px下げる。 */
.sec-gallery__strip > :nth-child(odd) { margin-top: 30px; }

/* =========================================================================
 * photo_grid（写真グリッド：5×5チェッカーボード。空セルは灰の市松＋中央カメラ）
 * ========================================================================= */
.sec-photogrid { padding: 70px 0; }
.sec-photogrid__grid {
	position: relative;
	max-width: var(--loicx-max); margin-inline: auto;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
	border-radius: 20px; overflow: hidden;
}
.sec-photogrid__cell { aspect-ratio: 1 / 1; }
/* 5列＝奇数のため nth-child の奇偶で自然に市松模様になる */
.sec-photogrid__cell:nth-child(odd)  { background: var(--placeholder); }   /* #D9D9D9 */
.sec-photogrid__cell:nth-child(even) { background: var(--placeholder2); }  /* #EDEDED */
.sec-photogrid__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* --- アコーディオン: PCは2行(5列×2=10セル)、SPは4セル(下のSPブロック)。超過分は「もっと見る」で展開 --- */
.sec-photogrid__cell:nth-child(n+11) { display: none; }   /* PC: 初期2行=10セル */
.sec-photogrid__toggle:checked ~ .sec-photogrid__grid .sec-photogrid__cell:nth-child(n+11) { display: block; }
.sec-photogrid__more { display: none; justify-content: center; margin: 24px 0 0; cursor: pointer; }
/* PCは2行を超える(11枚以上ある)ときだけ「もっと見る」を出す */
.sec-photogrid:has(.sec-photogrid__cell:nth-child(11)) .sec-photogrid__more { display: flex; }
.sec-photogrid__more .loicx-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 200px; padding: 14px 32px; border-radius: 50px;
	background: var(--primary); color: var(--white); font-weight: 800; font-size: 16px;
}
.sec-photogrid__more .t-close { display: none; }
.sec-photogrid__toggle:checked ~ .sec-photogrid__more .t-open { display: none; }
.sec-photogrid__toggle:checked ~ .sec-photogrid__more .t-close { display: inline-flex; }
.sec-photogrid__icon {   /* 空状態の中央カメラアイコン */
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
	width: 141px; height: 141px; background: var(--white);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Z'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Z'/></svg>") center / contain no-repeat;
}

/* =========================================================================
 * plans（プラン・料金：中央見出し＋2カード＋注記＋テクニック誘導バー）
 * ========================================================================= */
/* plans は薄いクリーム帯（Figma Union）の上に乗る。帯は上端・下端とも「上に盛り上がるアーチ」で、
   帯全体が上向きに反った一定幅のリボン（上下対称ではない）。
   - ::before = クリーム本体。上端を上凸アーチに（top角のborder-radius）。
   - ::after  = 白で下端を上凸に削る（bottom側に白の上凸アーチを重ね、クリーム下端を上向きアーチにする）。
   セクション内に収め（overflow:hidden）、上のギャラリーへは食い込ませない。 */
/* アーチ深さ(150px)より下余白(230px)を大きくして、最下部コンテンツ（テクニック誘導バー）が
   下端アーチの頂点より上に来るようにする（重なり防止）。 */
.sec-plans { position: relative; overflow: hidden; padding: 140px 0 230px; }
.sec-plans::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0;
	background: var(--cream);
	border-radius: 50% 50% 0 0 / 150px 150px 0 0;   /* 上端のみ上凸アーチ */
}
.sec-plans::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
	height: 150px; background: var(--white);
	border-radius: 50% 50% 0 0 / 150px 150px 0 0;   /* 白の上凸アーチで下端を上向きに削る */
}
/* Figma: プラングリッド=1120/カード540・テクニックボタン540。.loicx-containerはpadding24で内容1072px止まり
   →カードが516に縮みボタン540と不一致になる。内容をFigma厳密の1120pxにするため max-width を +48px(=1168)。 */
.sec-plans > .loicx-container { position: relative; z-index: 1; max-width: calc(var(--loicx-max) + 48px); }
.sec-plans__head { text-align: center; margin-bottom: 40px; }
.sec-plans__eyebrow {
	font-weight: 700; font-size: 36px; color: var(--accent);
	letter-spacing: .05em; margin-bottom: 6px;
}
.sec-plans__title {
	font-weight: 700; font-size: 48px; letter-spacing: .05em;
	color: var(--white); -webkit-text-stroke: 4px var(--accent); paint-order: stroke fill;
}
.sec-plans__grid {
	display: flex; gap: 40px; align-items: stretch; justify-content: center;
}
.plan {
	flex: 1 1 0; max-width: 540px;
	border-radius: 20px;
	padding: 50px 30px 40px;
	display: flex; flex-direction: column; align-items: center; gap: 30px;
	color: var(--white);
}
.plan--technic { background: var(--technic); }   /* スタンダード＝オレンジ */
.plan--enjoy   { background: var(--enjoy); }      /* ライト＝アンバー */
.plan__head { text-align: center; }
.plan__name { font-weight: 700; font-size: 36px; color: var(--white); }
.plan__price { font-weight: 800; color: var(--white); line-height: 1; margin-top: 8px; }
.plan__price .num  { font-size: 46px; font-weight: 600; }
.plan__price .unit { font-size: 24px; }
.plan__features {
	list-style: none; margin: 0; padding: 20px;
	background: var(--white); border-radius: 10px;
	width: 100%;
	display: flex; flex-direction: column; gap: 10px;
}
.plan__features li {
	display: flex; align-items: center; gap: 8px;
	background: #F8F8F8; border-radius: 5px; padding: 20px;
	font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--black);
}
.plan__features li::before {
	content: "★"; flex: none; font-size: 18px; color: var(--accent);
}
.plan--technic .plan__features li::before { color: var(--technic); }
.plan--enjoy   .plan__features li::before { color: var(--enjoy); }
/* スタンダード限定パーク（受け放題）＝カード色で強調 */
.plan--technic .plan__features li:last-child { color: var(--technic); font-weight: 800; }
.sec-plans__note {
	text-align: right; font-size: 14px; line-height: 1.3; color: var(--ink-strong);
	margin-top: 16px;
}
/* テクニック誘導バー＝教室詳細の .sch-plans__technic をそのまま流用（実Figmaグラフィック透かし＋正マスコット）。
   ここでは配置ラッパーのみ。ボタン本体スタイルは .sch-plans__technic（PC/SP）を参照（enjoy.htmlで同クラスを付与）。 */
.sec-plans__action { margin-top: 0; }
/* button セクション（テンプレ定義＝「中央リンク」）はボタンを中央寄せ。
   .sch-plans__technic（幅540固定）も .loicx-btn も中央に来る。 */
.sec-button { padding: 24px 0; }
.sec-button__inner { display: flex; justify-content: center; }
/* button セクション標準スタイル：ピンク塗りピル型（primary/お問い合わせ等の汎用CTA）。
   ghost は黄色塗り、technic は別途 .sch-plans__technic で定義済み。 */
.sec-button .loicx-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 320px; max-width: 100%; min-height: 64px;
	padding: 0 32px;
	background: var(--primary); color: var(--white);
	border: 2px solid var(--primary); border-radius: 50px;
	font-weight: 800; font-size: 18px; letter-spacing: .04em;
	text-decoration: none; transition: background-color .3s, color .3s;
}
.sec-button .loicx-btn:hover { background: var(--white); color: var(--primary); }
.sec-button .loicx-btn--ghost {
	background: #FFD600; color: var(--ink-strong, #222);
	border-color: #FFD600;
}
.sec-button .loicx-btn--ghost:hover { background: var(--white); color: #B58A00; border-color: #FFD600; }

/* =========================================================================
 * testimonials（生徒・保護者の声：中央見出し＋Q&A白カードのカルーセル）
 * ========================================================================= */
.sec-voices { padding: 32px 0 80px; overflow-x: clip; }
.sec-voices__head { text-align: center; margin-bottom: 30px; }
.sec-voices__rate { font-weight: 800; font-size: 36px; color: var(--accent); margin-bottom: 6px; }
.sec-voices__rate .big { font-size: 56px; }
.sec-voices__title {
	font-weight: 900; font-size: 48px; letter-spacing: .05em;
	color: var(--white); -webkit-text-stroke: 4px var(--accent); paint-order: stroke fill;
}
.sec-voices__viewport {
	position: relative;
	width: 100vw; left: 50%; transform: translateX(-50%);
}
.sec-voices__grid {
	display: flex; gap: 40px; align-items: flex-start;
	/* 横スクロール・スナップのスライダー。両端paddingで先頭/末尾カードも中央に止まる */
	padding: 10px max(16px, calc(50% - 380px)) 30px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	-ms-overflow-style: none; scrollbar-width: none;   /* スクロールバー非表示（矢印で操作） */
	overscroll-behavior-x: contain;
}
.sec-voices__grid::-webkit-scrollbar { display: none; }
.voice { flex: 0 0 760px; max-width: 760px; scroll-snap-align: center; }
.voice__card {
	background: var(--white); border-radius: 30px;
	box-shadow: 0 10px 40px rgba(0,0,0,.1);
	padding: 30px 50px 40px;
}
.voice__qa { margin: 0; }
.voice__qa dt {
	display: inline-block;
	background: var(--accent); color: var(--white);
	font-weight: 800; font-size: 20px; letter-spacing: .05em;
	padding: 10px 16px; border-radius: 2px;
	margin: 14px 0;
	transform: rotate(-3deg);   /* Figma 3° 反時計回り = CSS -3deg */
}
.voice__qa dt:first-child { margin-top: 0; }
.voice__qa dd {
	margin: 0; font-size: 16px; line-height: 1.7; color: var(--black);
}
.voice__person {
	display: flex; align-items: center; gap: 17px;
	margin: 18px 0 0 24px;
}
.voice__photo {
	flex: none; width: 100px; height: 100px; border-radius: 50%;
	background: var(--avatar);
	background-size: cover; background-position: center; background-repeat: no-repeat;   /* インライン background-image(アバター)を円にフィット */
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.voice__photo img { width: 100%; height: 100%; object-fit: cover; }
.voice__photo::after {
	content: ""; width: 40px; height: 40px;
	background: #b3b3b3;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm40-160h480L570-480 450-320l-90-120-120 160Z'/></svg>") center / contain no-repeat;
}
.voice__photo:has(img)::after { display: none; }   /* <img> が中にある場合はプレースホルダ・アイコンを非表示（旧 `img + ::after` は無効セレクタだったため修正） */
.voice__photo--filled::after { display: none; }   /* 背景画像でアバター指定時はプレースホルダ・アイコンを消す */
.voice__name { font-size: 20px; line-height: 1.4; color: var(--black); }
.sec-voices__nav {
	position: absolute; top: 200px; z-index: 5;
	width: 60px; height: 60px; border-radius: 80px; border: 0;
	background: center/cover no-repeat; cursor: pointer;
	font-size: 0; overflow: hidden;
}
.sec-voices__nav--prev { left: calc(50% - 410px); transform: translateX(-50%); background-image: url(assets/arrow-btn-prev.png); }
.sec-voices__nav--next { left: calc(50% + 410px); transform: translateX(-50%); background-image: url(assets/arrow-btn-next.png); }
.sec-voices__nav[disabled] { opacity: .35; cursor: default; pointer-events: none; }

/* =========================================================================
 * 共通フッター①: area_search（全国教室を探す）。ブランドのピンク固定。
 * ========================================================================= */
.sec-areasearch {
	background: var(--base);
	padding: 100px 0;
}
.sec-areasearch__card {
	max-width: var(--loicx-max);
	margin-inline: auto;
	background: var(--white);
	border-radius: 30px;
	box-shadow: 0 20px 60px rgba(232,15,71,.08);
	padding: 80px;
	display: flex;
	align-items: center;
	gap: 60px;
}
.area-promo { flex: 0 0 380px; text-align: center; }
.area-promo__badge {
	display: inline-block;
	background: var(--primary); color: var(--white);
	font-weight: 800; font-size: 18px; letter-spacing: .05em;
	padding: 12px 22px; border-radius: 2px;
	transform: rotate(-3deg);
}
.area-promo__lead {
	margin-top: 26px; white-space: nowrap;
	font-weight: 800; font-size: 30px; color: var(--primary); letter-spacing: .05em;
}
.area-promo__title {
	margin-top: 6px; white-space: nowrap;
	font-weight: 900; font-size: 40px; letter-spacing: .05em;
	color: var(--white); -webkit-text-stroke: 4px var(--primary); paint-order: stroke fill;
}
.area-promo__mascot { margin-top: 20px; }
.area-promo__mascot img { width: 180px; height: auto; }

.area-promo__search { flex: 1 1 auto; min-width: 0; }
/* 促し見出しはプロモ側に出すため、アコーディオン側の見出しは隠す */
.sec-areasearch .area-search__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.area-search__group { border-bottom: 1px solid var(--divider); }
.area-search__group:first-of-type { border-top: 1px solid var(--divider); }
.area-search__summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between;
	font-weight: 800; font-size: 22px; color: var(--primary); letter-spacing: .05em;
	padding: 22px 4px;
}
.area-search__summary::-webkit-details-marker { display: none; }
.area-search__summary::after {
	content: "+"; color: var(--primary); font-weight: 400; font-size: 26px; line-height: 1;
}
.area-search__group[open] .area-search__summary::after { content: "–"; }
/* 校舎ページ未作成エリア（例: 北信越・九州・沖縄）はラベルだけ表示し、開閉させない */
.area-search__group--empty .area-search__summary--empty {
	list-style: none; cursor: default;
	display: flex; align-items: center; justify-content: space-between;
	font-weight: 800; font-size: 22px; color: var(--primary); letter-spacing: .05em;
	padding: 22px 4px;
}
.area-search__group--empty .area-search__summary--empty::after {
	content: "+"; color: var(--primary); font-weight: 400; font-size: 26px; line-height: 1;
}
/* フッター文脈では件数は出さない（Figma準拠） */
.sec-areasearch .area-search__count { display: none; }
.area-search__prefs { list-style: none; margin: 0 0 16px; padding: 0 0 0 24px; display: grid; gap: 10px; }
.area-card__name { font-weight: 700; }
.area-search__online { margin: 26px 0 0; }
.area-search__online .loicx-btn {
	display: flex; align-items: center; justify-content: center;
	width: 100%; min-height: 64px; padding: 0 24px;
	background: var(--base); color: var(--primary);
	border: 2px solid var(--primary); border-radius: 50px;
	font-weight: 800; font-size: 18px;
	text-align: center;   /* SP幅で2行になったとき2行目も中央に揃える（2026-07-31） */
}

/* =========================================================================
 * 共通フッター②: マーキー＋CTA（ピンク）
 * ========================================================================= */
.loicx-marquee {
	background: var(--primary); color: var(--white);
	overflow: hidden; white-space: nowrap;
	padding: 18px 0;
	font-weight: 600; font-size: 16px; letter-spacing: .15em;
}
.loicx-marquee__inner { display: inline-block; }

.loicx-cta {
	position: relative; overflow: visible;
	background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
	padding: 70px 0 0;
}
/* ピンク背景のスウッシュ模様（Figma実画像） */
.loicx-cta::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: url(assets/cta-pink-pattern.png) center top/cover no-repeat;
	opacity: .9;
}
/* マーキー＋CTAをまとめるラッパ（星をマーキーに重ねて配置するため） */
.loicx-ctablock { position: relative; }
/* 黄色い星：Figma実測 node x683/y0・380×380（=画像そのまま）、回転は画像に内包済み */
.loicx-cta__star {
	position: absolute; z-index: 3; top: -7.78vw; left: 52%;   /* 黄色コア上端がマーキー帯上端より16px上＝Figma実測。1440で112px上げ=7.78vw（旧5.28vwは36px低かった） */
	width: 26.4%; max-width: 400px; aspect-ratio: 1 / 1;
	background: url(assets/cta-star.png) center/contain no-repeat;
	transform: rotate(-11.26deg);   /* Figma 11.26° = 反時計回り = CSS negative */
}
.loicx-cta__inner {
	max-width: var(--loicx-max); margin-inline: auto; padding-inline: 24px;
	position: relative; z-index: 2;
}
/* 見出し＋リードは右上がりに回転（Figma） */
.loicx-cta__copy {
	display: inline-block;
	transform: rotate(-3deg);   /* Figma実測（リード文重心回帰）≒ -2.7° */
	transform-origin: left center;
	margin: 10px 0 0 24px;
}
.loicx-cta__title { font-weight: 800; font-size: 48px; line-height: 1.3; color: var(--white); }
/* 各行の冒頭を少しずつ右へずらす階段状インデント（Figma実測 ≒ 0 / +8 / +16 / +32px） */
.loicx-cta__title span { display: block; }
.loicx-cta__title span:nth-child(2) { margin-left: 8px; }
.loicx-cta__title span:nth-child(3) { margin-left: 16px; }
.loicx-cta__lead { margin-top: 12px; margin-left: 32px; font-weight: 800; font-size: 18px; color: var(--white); }
/* ボタンは全幅(1120)・中央コンテンツ。淡色角丸バー＋太い枠線＋左に犬アイコン＋ピンク文字＋矢印丸。 */
.loicx-cta__actions { margin: 48px 0 0; }
.loicx-cta__actions .loicx-btn {
	display: flex; width: 100%; align-items: center; gap: 20px; justify-content: center;
	padding: 30px 56px;
	background: var(--base); color: var(--primary);
	border: 10px solid var(--divider);   /* #F7DCE3 の太枠 */
	border-radius: 20px;
	box-shadow: 0 12px 26px rgba(244,89,129,.45);
	font-weight: 800; font-size: 30px; letter-spacing: .08em;
}
.loicx-cta__btn-icon { flex: none; width: 56px; height: auto; }
.loicx-cta__actions .loicx-btn__arrow {
	flex: none;
	width: 36px; height: 36px; border-radius: 60px;
	border: 1px solid var(--primary); color: var(--primary);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 18px;
}
/* CTA下端＝中央が盛り上がるドーム（サジッタ125px・Figma node 1:1369上端実測）。色はフッターの薄ピンク。
   ★ドーム自体に星模様を表示し、ドームの角丸曲線で星の上部を自然にクリップ（Figma同様）。
   星画像はフッターと同位置(top)＝ドームが画像y0-125を、フッターがy125以降を表示して連続。 */
.loicx-cta::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	height: 125px;
	background: var(--footer-bg) url(assets/footer-stars-white.png) center top / 1440px auto no-repeat;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.loicx-cta__mascots {
	max-width: var(--loicx-max); margin: 44px auto 0; padding-inline: 24px;
	position: relative; z-index: 2;
}
.loicx-cta__mascots img { display: block; width: 100%; height: auto; }

/* =========================================================================
 * 共通フッター③: フッター本体（NAP＋SNS＋2列サイトマップ＋ピンク帯コピーライト）
 * ========================================================================= */
/* フッター背景＝薄ピンク #FEF3F8 ＋ Figma実画像の星模様（ピンクの星アウトライン＋バースト×3）。
   星はFigmaフレームでは「白い輪郭＋透明内部」で薄く描かれる（同imageRefでもヒーローのピンク輪郭と異なる）。
   node 1:1376 書き出し(ピンク)をピンク輪郭→白・白本体→透明に再彩色した footer-stars-white.png を使用。 */
.site-footer {
	/* 星はドーム(::after)が画像y0-125を表示済み → フッターはy125以降を表示（-125pxで連続）。 */
	background: var(--footer-bg) url(assets/footer-stars-white.png) center -125px / 1440px auto no-repeat;
}
.site-footer__inner {
	max-width: 1080px; margin-inline: auto; padding: 60px 24px;
	display: flex; gap: 60px; align-items: flex-start;
	justify-content: space-between;   /* ブランド左／サイトマップ右 */
}
.site-footer__brand { flex: 0 0 460px; }
.site-footer__logo img { width: 300px; height: auto; }
.site-footer__org {
	margin-top: 18px; font-weight: 800; font-size: 20px; color: var(--primary); letter-spacing: .03em;
}
.site-footer__nap {
	margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--black);
}
/* TELと受付時間は shrink-to-fit の箱に入れる＝受付時間をTELの幅の中央に置くため */
.site-footer__nap .tel-group { display: block; width: fit-content; margin-top: 6px; }
.site-footer__nap .tel { display: block; }
/* 電話番号の下の受付時間（文字色はTELと同じ・サイズだけ小さく・TELの中央下） */
.site-footer__nap .hours { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; text-align: center; }
.site-footer__sns { display: flex; gap: 10px; margin-top: 18px; }
.site-footer__sns a {
	flex: 1 1 0;
	display: flex; align-items: center; justify-content: center; gap: 6px;
	background: rgba(255,255,255,.8); border: 1px solid var(--divider);
	border-radius: 5px; padding: 8px 10px;
	font-size: 12px; color: var(--black);
}
/* SNSアイコン＝Figma実アイコンSVG（node 1:1392/1396/1400/1405・fill #393939）。旧・黒四角プレースホルダは廃止 */
.site-footer__sns .ico {
	flex: none; width: 14px; height: 14px;
	background: center / contain no-repeat;
}
.site-footer__sns .ico--instagram { background-image: url(assets/sns-instagram.svg); }
.site-footer__sns .ico--facebook  { background-image: url(assets/sns-facebook.svg); }
.site-footer__sns .ico--threads   { background-image: url(assets/sns-threads.svg); }
.site-footer__sns .ico--youtube   { background-image: url(assets/sns-youtube.svg); }
.site-footer__banner { display: block; margin-top: 18px; }
.site-footer__banner img { width: 100%; height: auto; border-radius: 10px; }
.site-footer__banner-ph {
	display: flex; align-items: center; justify-content: center;
	height: 140px; border-radius: 10px;
	background: linear-gradient(135deg, var(--primary), var(--secondary));
	color: var(--white); font-weight: 800; font-size: 22px;
}

.site-footer__sitemap { flex: 0 0 auto; display: flex; gap: 60px; align-items: flex-start; }
.footer-col { display: flex; flex-direction: column; gap: 60px; }   /* グループ間（GIRLS☆↔ダンススタジオ）60 */
.footer-col__group { display: flex; flex-direction: column; gap: 30px; }  /* 見出し↔リンク群 30 */
.footer-col__heading { font-weight: 800; font-size: 20px; color: var(--black); }
.footer-col__heading--en { font-weight: 700; }
.footer-col__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.footer-col__links a { font-size: 16px; color: var(--black); }

.site-footer__copy {
	background: var(--secondary); color: var(--white);
	padding: 22px 0;
}
.site-footer__copy-inner {
	max-width: 1080px; margin-inline: auto; padding-inline: 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.site-footer__copy .label { font-weight: 800; font-size: 20px; }
.site-footer__copy .rights { font-size: 14px; letter-spacing: .05em; }

/* =========================================================================
 * SP（スマホ）対応 — Figma SP（クラス紹介 1:279 / 設計幅375px）準拠の縦積みreflow。
 * 全幅で横はみ出し0pxを厳守。
 * ========================================================================= */
@media (max-width: 768px) {

	.loicx-container { padding-inline: 20px; }

	/* ---- ヘッダー: ロゴ＋「体験予約・相談」ボタン＋[犬画像＋MENU文字]（CSSドロワー/JS不要）---- */
	.site-header__inner { padding: 14px 16px; }
	.site-header__logo img { width: 116px; height: auto; }
	/* nav はピルをやめ、ヘッダーバー内の [体験予約ボタン][犬+MENU] の横並びに */
	.site-nav {
		background: none; box-shadow: none; border-radius: 0;
		padding: 0; height: auto; gap: 12px; align-items: center;
	}
	/* 体験予約・相談（常時表示・コンパクト） */
	.site-nav__cta { width: auto; height: auto; padding: 10px 20px; font-size: 16px; }
	/* 犬画像＋MENU文字（縦積み／MENUは白塗り＋Secondaryフチの袋文字） */
	.loicx-menu-btn {
		display: flex; flex-direction: column; align-items: center; gap: 5px;
		cursor: pointer; line-height: 1;
	}
	.loicx-menu-btn__dog { width: 40px; height: 29px; object-fit: cover; }
	.loicx-menu-btn__label {
		font-weight: 700; font-size: 12px; letter-spacing: .05em;
		color: var(--white); -webkit-text-stroke: 1.5px var(--secondary); paint-order: stroke fill;
	}
	/* 通常のハンバーガーアイコン（GIRLS☆/スタジオ等。犬アイコンなしのページ用） */
	.loicx-menu-btn__bars { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 20px; }
	.loicx-menu-btn__bars span { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 1px; }
	.loicx-menu-btn--plain { color: #1A1A1E; }
	.loicx-menu-btn--plain .loicx-menu-btn__label { -webkit-text-stroke: 0; font-weight: 800; }
	/* ドロワー本体は .site-nav__drawer。MENUで右からスライドイン。 */
	.site-nav__drawer {
		display: flex; flex-direction: column;
		position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
		width: 78vw; max-width: 300px; height: 100%;
		background: var(--white); box-shadow: -10px 0 30px rgba(0,0,0,.15);
		transform: translateX(100%); transition: transform .25s ease;
		overflow-y: auto;
	}
	.loicx-nav-toggle:checked ~ .site-nav .site-nav__drawer { transform: translateX(0); }
	/* ドロワー上部の「ロゴ＋×閉じる」帯（SP限定で表示） */
	.site-nav__drawer-head {
		display: flex; align-items: center; justify-content: space-between;
		flex: none;
		padding: 14px 18px;
		border-bottom: 1px solid #F2D8DD;
	}
	.site-nav__drawer-logo { display: block; line-height: 0; }
	.site-nav__drawer-logo img { height: 40px; width: auto; display: block; }
	/* × 閉じるボタン（label。チェックボックスをトグル＝閉じる） */
	.site-nav__close {
		display: block; width: 36px; height: 36px;
		position: relative; cursor: pointer;
		flex: none;
	}
	.site-nav__close::before,
	.site-nav__close::after {
		content: ""; position: absolute; left: 50%; top: 50%;
		width: 22px; height: 2px; background: var(--primary); border-radius: 2px;
	}
	.site-nav__close::before { transform: translate(-50%,-50%) rotate(45deg); }
	.site-nav__close::after  { transform: translate(-50%,-50%) rotate(-45deg); }
	/* ドロワー内のリンク群（fixed解除＝親のflex内で素直に縦並び） */
	.site-nav__links {
		flex-direction: column; align-items: flex-start; gap: 22px;
		padding: 24px 28px 28px;
	}
	.loicx-nav-toggle:checked ~ .loicx-nav-overlay {
		display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.4);
	}
	/* SP（ドロワー内）はホバー下線＋流れ星を出さない */
	.site-nav__links a::before, .site-nav__links a::after { display: none; }
	.loicx-sp-br { display: inline; }   /* SPでは改行を有効化 */
	.loicx-pc-br { display: none; }     /* PC限定の改行はSPでは無効化 */

	/* ---- hero: 中央寄せ＋マスコット下 ---- */
	.sec-hero { padding-top: 110px; padding-bottom: 150px;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 62px), 50% 100%, 0 calc(100% - 62px)); }
	/* エンジョイはFV下に画像が無いため、PC同様SPも逆三角なしのオレンジ四角に（下シェブロン無効化）。 */
	.loicx-accent--enjoy .sec-hero { clip-path: none; padding-bottom: 90px; }
	/* テクニックもFV直下が動画埋め込み＝食い込み画像が無いため、SPでも逆三角を解除して四角に。 */
	.loicx-accent--technic .sec-hero { clip-path: none; padding-bottom: 90px; }
	.sec-hero__watermark { font-size: 70px; top: 70px; }
	/* cheerlys専用の画像透かしはPC900px固定→SPはビューポート内に収める（横はみ出し防止）。 */
	.loicx-accent--cheerleads .sec-hero__watermark { width: 88vw; top: 40px; font-size: 0; }
	.loicx-accent--youth .sec-hero__watermark { width: 70vw; top: 40px; font-size: 0; }
	/* 講師プロフィールはSPで「見出し→画像→本文」の縦積み（写真の上に見出し） */
	.sec-rich-text--profile .loicx-container.sec-profile__row { grid-template-columns: 1fr; grid-template-areas: "head" "media" "body"; row-gap: 16px; }
	.sec-profile__media { width: 100%; }
	/* youth: SPのFVキャラは300px→200pxに縮小 */
	.loicx-accent--youth .sec-hero__image { width: 200px; }
	/* youth: SPは逆三角に食い込ませつつFVキャラと重ならない位置（キャラ下端の少し下）。PCの食い込み-200を上書き。 */
	.loicx-accent--youth .sec-image { margin-top: -140px; }
	/* youth: クラス概要のラベル・値をSPで中央寄せ＋表を全幅に（右の余白で左寄りに見えるのを防ぐ） */
	.loicx-accent--youth .sec-spec__table { width: 100%; max-width: 100%; }
	.loicx-accent--youth .sec-spec__label { text-align: center; justify-content: center; }
	.loicx-accent--youth .sec-spec__value { text-align: center; }
	/* youth: 講師プロフィール見出しをSPで中央寄せ */
	.sec-rich-text--profile .sec-profile__head { text-align: center; }
	/* ＼ プロチアダンサー輩出経歴 ／ はSPで長いので縮小 */
	.sec-rich-text--center .sec-rich-text__title { font-size: 28px; }
	.sec-hero__inner { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
	.sec-hero__body { width: 100%; }
	.sec-hero__title { font-size: 36px; margin-bottom: 18px; }
	.sec-hero__lead { font-size: 16px; }
	.sec-hero__image { width: 200px; transform: none; }   /* SPは縦積みのため引き上げなし */

	/* ---- image 16:9 ---- */
	.sec-image { margin-top: -120px; }
	/* cheerlys: SPのFV chevronは62pxと浅いため、PC用の深い食い込み(-351)は上書きして控えめに。 */
	.loicx-accent--cheerleads .sec-image { margin-top: -90px; }
	/* cheerlys FVキャラ: PC用300pxはSPでは大きすぎる→基準SPと同じ200pxに（参照SP実測=幅約199px）。 */
	.loicx-accent--cheerleads .sec-hero__image { width: 200px; }
	.sec-image__figure { border-radius: 14px; }
	.sec-image__figure::before { width: 110px; height: 110px; }
	.sec-image__caption { font-size: 18px; }

	/* ---- rich_text: 左寄せ ---- */
	.sec-rich-text { padding: 40px 0; }
	.sec-rich-text__title { font-size: 20px; }

	/* ---- spec: ラベル全幅バー＋内容下 ---- */
	.sec-spec { padding: 24px 0 40px; }
	.sec-spec__eyebrow { font-size: 24px; }
	.sec-spec__title { font-size: 44px; }
	.sec-spec__cols { flex-direction: column; gap: 24px; }
	/* SP: ラベルはセクション全幅の黄色バー（左右余白あり）＋テキストはすべて中央揃え（Figma SP準拠） */
	.sec-spec__row { flex-direction: column; align-items: stretch; gap: 8px; }
	.sec-spec__label {
		width: 100%; height: auto; min-height: 0; align-self: stretch;
		justify-content: flex-start;   /* flexコンテナのため text-align ではなくこれで左寄せ */
		border-radius: 999px; padding: 13px 20px; font-size: 20px; line-height: 1.2; text-align: left;
	}
	/* Figma: ラベル・説明とも左寄せ（説明は20px左インデントでラベル文字と頭を揃える） */
	.sec-spec__value { width: 100%; font-size: 18px; text-align: left; padding: 0 20px; }
	.sec-spec__images { display: none; }   /* SPでは右の写真コラージュは非表示（Figma SP準拠） */
	/* youthのクラス概要1枚写真はSPでも表示＝表の下に全幅で（横はみ出し防止） */
	.loicx-accent--youth .sec-spec__images { display: block; width: 100%; }

	/* ---- gallery: 見出し（マスコ＋犬が上／タイトル下）→ 写真4枚の2×2段差 ---- */
	.sec-gallery { padding: 16px 0 40px; }
	.sec-gallery__head {
		flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-end;
		gap: 12px; margin-bottom: 24px;
	}
	.sec-gallery__head .mascot { width: 80px; order: 1; }
	.sec-gallery__head .dog { width: 70px; order: 2; }
	.sec-gallery__title { order: 3; flex-basis: 100%; text-align: center; font-size: 32px; }
	/* 写真2×2（中2列・ほぼ全幅）＋ 両端の細い列に同サイズのオレンジを置き、端で大きく見切れさせる（Figma SP）。
	   Figma実測: 写真は高さ約260px・幅約185px・ほぼ全幅2列、右列が左列より約20px高い段差。 */
	/* SP: Figma 1:279 / 1:411 準拠の2段段違いコラージュ。
	   上段: 写真1 + 写真2 + 右オレンジ(見切れ)
	   下段: 左オレンジ(見切れ) + 写真3 + 写真4
	   写真5は SP では非表示。
	   写真歪み防止: transform:skewX は廃止し clip-path で平行四辺形フレーム。 */
	.sec-gallery__strip {
		position: relative; overflow: hidden;
		width: 100%; left: auto; transform: none;
		display: grid;
		grid-template-columns: 6px 1fr 1fr 6px;
		column-gap: 8px;
		row-gap: 12px;
		padding: 0;
		align-items: start;
	}
	.sec-gallery__strip > .sec-gallery__photo, .sec-gallery__strip > .ph {
		max-width: none; width: 100%; aspect-ratio: 185 / 260; height: auto;
		clip-path: polygon(17.3% 0, 100% 0, 82.7% 100%, 0 100%);  /* SP: 平行四辺形 (tan 7°ベース) */
	}
	.sec-gallery__strip > .sec-gallery__photo {
		background-size: cover; background-position: center; background-color: var(--placeholder3);
	}
	.sec-gallery__strip > :nth-child(1) { grid-area: 1 / 2; margin-top: 20px; }   /* 上段左 写真1: 段差で下げ */
	.sec-gallery__strip > :nth-child(2) { grid-area: 1 / 3; margin-top: 0; }      /* 上段右 写真2 */
	.sec-gallery__strip > :nth-child(3) { grid-area: 2 / 2; margin-top: 20px; }   /* 下段左 写真3: 段差で下げ */
	.sec-gallery__strip > :nth-child(4) { grid-area: 2 / 3; margin-top: 0; }      /* 下段右 写真4 */
	.sec-gallery__strip > :nth-child(5) { display: none; }                         /* SPは4枚 */
	.sec-gallery__strip::before, .sec-gallery__strip::after {
		display: block; content: ""; max-width: none; width: 150px;
		aspect-ratio: 185 / 260; background: var(--hero-orange);
		clip-path: polygon(17.3% 0, 100% 0, 82.7% 100%, 0 100%);
	}
	.sec-gallery__strip::after  { grid-area: 1 / 4; justify-self: start; margin-top: 80px; }  /* 上段右オレンジ: 右へ見切れ */
	.sec-gallery__strip::before { grid-area: 2 / 1; justify-self: end; margin-top: 0; }       /* 下段左オレンジ: 左へ見切れ */

	/* ---- plans: スタンダード→テクニック誘導→ライト→注記 の縦並び ---- */
	.sec-plans { padding: 100px 0 110px; }
	.sec-plans::before, .sec-plans::after { border-radius: 50% 50% 0 0 / 90px 90px 0 0; }
	.sec-plans::after { height: 90px; }
	.sec-plans__eyebrow { font-size: 24px; }
	.sec-plans__title { font-size: 44px; }
	.plan__name { font-size: 30px; }              /* SP: プラン名（Figma 30px・1行に収める） */
	.plan__price .num { font-size: 36px; }        /* SP: 価格 数値 */
	.plan__price .unit { font-size: 20px; }       /* SP: 円／月 */
	.sec-plans .loicx-container { display: flex; flex-direction: column; }
	.sec-plans__head { order: 0; }
	.sec-plans__grid { display: contents; }              /* カードを直下flexアイテム化して並び替え */
	.sec-plans__grid .plan--technic { order: 1; }        /* スタンダード */
	.sec-plans__action { order: 2; margin: 8px 0 28px; }    /* テクニック誘導（下に余白＝ライトと離す） */
	.sec-plans__grid .plan--enjoy { order: 3; }          /* ライト */
	.sec-plans__note { order: 4; }
	.plan { max-width: none; width: 100%; margin-bottom: 16px; }
	/* テクニックボタンSPは .sch-plans__technic のSPルール（width:100%/2行/マスコット余白）をそのまま流用 */

	/* ---- testimonials: 1枚 ---- */
	.sec-voices { padding: 24px 0 56px; }
	.sec-voices--pale { padding: 56px 0 80px; }   /* SP:上下アーチ(13vw≒51px)+余白 */
	.sec-voices__rate { font-size: 24px; }
	.sec-voices__rate .big { font-size: 34px; }
	.sec-voices__title { font-size: 40px; }   /* Figma SP ≒44px */
	.sec-voices__viewport { width: 100%; left: 0; transform: none; }
	/* SPはメッセージを1枚だけ中央に（左右のカードは画面外でクリップ＝見切れさせない） */
	.sec-voices__grid { gap: 24px; padding-inline: 6vw; }   /* SP: 88vwカードを中央スナップ（6vw+88vw+6vw） */
	.voice { flex: 0 0 88vw; max-width: 88vw; }
	.voice__card { padding: 24px 22px 28px; border-radius: 20px; }
	.voice__qa dt { font-size: 16px; }
	/* SP: 矢印は font-size:0 で記号(‹/›)を隠しピンク画像のみ表示。
	   左右の端（カードの外側マージン側）に縦中央で配置＝本文(カード内padding22pxの内側)に被らない。 */
	.sec-voices__nav { width: 44px; height: 44px; font-size: 0; top: 50%; bottom: auto; transform: translateY(-50%); }
	.sec-voices__nav--prev { left: 2px; right: auto; }
	.sec-voices__nav--next { left: auto; right: 2px; }

	/* ---- photo_grid: SPは2列・4セル(2×2)＋「もっと見る」。左右に余白（全幅にしない） ---- */
	.sec-photogrid { padding: 40px 20px; }
	.sec-photogrid__grid { border-radius: 12px; grid-template-columns: 1fr 1fr; }
	.sec-photogrid__cell:nth-child(n+5) { display: none; }   /* SPは初期4セル（2×2） */
	/* 「もっと見る」トグルで5枚目以降をその場で展開（リンク遷移ではない） */
	.sec-photogrid__toggle:checked ~ .sec-photogrid__grid .sec-photogrid__cell:nth-child(n+5) { display: block; }
	.sec-photogrid__icon { width: 80px; height: 80px; }
	/* SPは4枚を超える(5枚以上ある)ときだけ「もっと見る」を出す（PCの :has(11) をSP基準 :has(5) に上書き） */
	.sec-photogrid__more { display: none; margin: 20px 0 0; }
	.sec-photogrid:has(.sec-photogrid__cell:nth-child(5)) .sec-photogrid__more { display: flex; }

	/* ---- 共通フッター: area_search ---- */
	.sec-areasearch { padding: 48px 0; }
	.sec-areasearch__card { flex-direction: column; gap: 32px; padding: 36px 22px; border-radius: 20px; }
	.area-promo { flex: none; width: 100%; }
	.area-promo__lead { font-size: 22px; white-space: normal; }
	.area-promo__title { font-size: 30px; white-space: normal; }
	.area-search__summary,
	.area-search__group--empty .area-search__summary--empty { font-size: 18px; padding: 16px 4px; }

	/* ---- CTA ---- */
	.loicx-cta { padding: 48px 0 0; }
	/* Figma SP(1:2704)の黄色星＝101×101固定・位置はマーキー上端+31px/中心x224（PCの380×380・上スピルとは別）。 */
	.loicx-cta__star { width: 101px; height: 101px; max-width: none; left: 46.4%; right: auto; top: -15px; }   /* Figma SP(1:451): 星はマーキー帯にかかる＝CTAピンク上端より上。旧31pxは低すぎた */
	.loicx-cta__copy { margin-left: 12px; }   /* PCと同じ右上がり回転＋階段インデントを継承 */
	.loicx-cta__title { font-size: 30px; }
	.loicx-cta__lead { font-size: 14px; }     /* margin-left（階段インデント）はPCを継承 */
	.loicx-cta__actions { margin-top: 32px; text-align: center; }
	/* SP用ボタン：犬が上・テキスト下（中央）・矢印は右上（Figma SP_CTA_Button） */
	.loicx-cta__actions .loicx-btn {
		position: relative;
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		width: 88%; max-width: 360px; margin-inline: auto;
		gap: 10px; padding: 26px 30px;
		font-size: 20px; letter-spacing: .05em; border-width: 8px;
	}
	.loicx-cta__btn-icon { order: 0; width: 84px; }                      /* 犬：上・大きめ */
	.loicx-cta__btn-text { order: 1; text-align: center; white-space: nowrap; line-height: 1.4; }
	.loicx-cta__actions .loicx-btn__arrow { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); }  /* 矢印：右・上下中央 */
	.loicx-cta::after { height: 56px; border-radius: 50% 50% 0 0 / 56px 56px 0 0; background: var(--footer-bg); }  /* SPドームは無地（SP星は上端で切れないためドームに星不要。PC用星画像の継承をリセット） */
	/* 5マスコット：全幅で大きく */
	.loicx-cta__mascots { max-width: none; margin: 30px 0 0; padding-inline: 0; }

	/* ---- フッター本体: ロゴ・NAPは中央、サイトマップは全リンク1列 ---- */
	/* SPは専用の星模様（Figma node 1:2023＝ピンク星2つ。375幅基準） */
	.site-footer { background: var(--footer-bg) url(assets/footer-stars-sp-white.png) top center / 100% auto no-repeat; }
	.site-footer__inner { flex-direction: column; gap: 36px; padding: 44px 20px; }
	.site-footer__brand { flex: none; width: 100%; text-align: center; }   /* ロゴは中央 */
	.site-footer__logo img { width: 240px; }
	.site-footer__org, .site-footer__nap { text-align: left; }             /* 運営者名・住所は左寄せ */
	.site-footer__sns { flex-wrap: wrap; justify-content: center; }
	.site-footer__sns a { flex: 1 1 calc(50% - 5px); min-width: 0; }   /* 2×2折り返し・中央 */
	.site-footer__sitemap { flex-direction: column; flex: none; width: 100%; gap: 36px; }  /* 1列 */
	.footer-col { flex: none; width: 100%; gap: 36px; }
	/* コピーライト帯は横一列（改行しない） */
	.site-footer__copy-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; }
	.site-footer__copy .label { font-size: 15px; white-space: nowrap; }
	.site-footer__copy .rights { font-size: 10px; white-space: nowrap; }

	/* area_search: バッジはSPでは傾けない（PCのみ-3°）。犬を「お近くの教室を探す」の右横に */
	.area-promo__badge { transform: none; }
	.area-promo__head { display: flex; align-items: center; justify-content: center; gap: 6px; }
	.area-promo__mascot { margin-top: 0; }
	.area-promo__mascot img { width: 96px; }
}

/* =========================================================================
 * TOP（チアスクールTOP / cheer-school・accent=pink）
 *   Figma PC=1:2787（1440×9167）。FVピンク地 #F45981 は y0..1886、その中に
 *   FV(キャッチ)→導入リッチテキスト→stats が連続。area_search白カードが境界跨ぎ。
 *   実装方針: FV・intro は 1440 中央ステージに Figma 実座標で絶対配置（左右ブリード）。
 * ========================================================================= */

/* ---- FV（背景装飾 fv-bg ＋ キャッチ画像一式 fv-main：写真5枚＋バナー＋星） --- */
.top-fv {
	position: relative;
	background: var(--secondary);
	overflow: hidden;
	padding-top: 90px;          /* 絶対配置ヘッダーの逃げ（写真は header 下から） */
}
.top-fv__bg {
	position: absolute; inset: 0; z-index: 0;
	background: url(assets/fv-bg.webp) top center / cover no-repeat;
}
.top-fv__art {
	position: relative; z-index: 1; display: block;
	width: 100%;                      /* 全幅表示（1440上限なし） */
}
.top-fv__art img { display: block; width: 100%; height: auto; }

/* ---- FV続き：導入リッチテキスト（ピンク地・白文字・左寄せ） ------------- */
.top-intro { background: var(--secondary); position: relative; overflow: hidden; }
.top-intro__inner {
	position: relative;
	width: 100%;               /* 全幅（1920px等でも左右エッジまで） */
	min-height: 360px;
	padding: 30px 0 60px;
}
/* 左の縦長写真 240×308（左端から120pxブリード・平行四辺形） */
.top-intro__photo-left {
	position: absolute;
	left: -120px; top: 40px;
	width: 240px; height: 308px;
	overflow: hidden;
	clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);   /* 平行四辺形 14%offset（Figma実測値） */
}
.top-intro__photo-left img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
/* テキスト（x160、幅690px=18字×37.8px、ブラウザPALT非適用時の実測幅） */
.top-intro__body {
	position: absolute;
	left: 160px; top: 30px;
	width: 690px;
	color: var(--white);
}
.top-intro__title {
	font-size: 36px; font-weight: 800; line-height: 1.5; letter-spacing: .05em;
	margin-bottom: 24px;
	font-feature-settings: "palt" 1;
}
.top-intro__text { font-size: 16px; line-height: 1.7; letter-spacing: .05em; }
.top-intro__text strong { font-weight: 800; }
/* 右の3写真クラスタ（viewport 幅に連動して右端まで伸びる・平行四辺形）
   left:890px（text右端850px + 40px gap）right:-123px（右端ブリード）
   width:auto → 1440px時=673px / 1920px時=1153px で自動スケール
   各写真は % 配置（clip-path の14%も % 基準なので比率を維持） */
.top-intro__photos-right {
	position: absolute;
	left: 890px; right: -123px; top: 0;
	width: auto; height: 349px;
}
.top-intro__photos-right .ph {
	position: absolute;
	width: 35.66%; /* = 240 / 673 */
	height: 309px;
	object-fit: cover;
	display: block;
	clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
.top-intro__photos-right .ph--r0 { display: none; }               /* SP写真ストリップ用（PCではphoto-leftで表示） */
.top-intro__photos-right .ph--r1 { left: 0%;     top: 40px; }
.top-intro__photos-right .ph--r2 { left: 32.84%; top: 0; }
.top-intro__photos-right .ph--r3 { left: 64.34%; top: 40px; }

/* ---- stats（#EA4973角丸パネル on ピンク・白縦区切り＋左右マスコ） -------- */
.top-stats { position: relative; background: var(--secondary); padding-top: 42px; padding-bottom: 60px; }
.top-stats__panel {
	position: relative;
	max-width: var(--loicx-max);
	margin-inline: auto;
	background: #EA4973;
	border-radius: 30px;
	box-shadow: inset 0 20px 64px rgba(156,0,40,.4);
	padding: 60px 112px;
	display: flex;
	justify-content: center;
	align-items: flex-start;   /* 全列を上揃え → ラベル・数字が横一列に揃う（Figma: alignItems未指定=stretch+top積み） */
	gap: 70px;
	color: var(--white);
}
.top-stats__item { text-align: center; }
.top-stats__label { font-size: 24px; font-weight: 900; letter-spacing: .05em; margin-bottom: 18px; }
.top-stats__value { display: flex; align-items: flex-end; justify-content: center; gap: 4px; line-height: 1; }   /* Figma: alignItems: flex-end */
.top-stats__value .num { font-size: 100px; font-weight: 600; letter-spacing: 0; }
.top-stats__value .unit { font-size: 40px; font-weight: 900; }
.top-stats__value .unit2 { font-size: 34px; font-weight: 900; }
.top-stats__suffix { font-size: 34px; font-weight: 900; line-height: 1; margin-top: 4px; }
.top-stats__divider { width: 2px; height: 169px; flex-shrink: 0; background: var(--white); align-self: center; }   /* Figma: height:169px、縦中央配置 */
.top-stats__mascot { position: absolute; width: 160px; height: 200px; background: center/contain no-repeat; z-index: 2; }
.top-stats__mascot--l { left: max(0px, calc((100% - 1120px)/2 - 112px)); bottom: 14px; width: 162px; height: 176px; background-image: url(assets/stats-left.png); }
.top-stats__mascot--r { right: max(4px, calc((100% - 1120px)/2 - 120px)); top: -120px; width: 232px; height: 214px; background-image: url(assets/stats-right.png); }
.top-stats__mascot--j { display: none; }   /* SP専用：PC非表示 */

/* ---- area_search（pinktop変種：上半分ピンク→下pink-pale・白カード境界跨ぎ） -- */
.sec-areasearch--pinktop {
	background: linear-gradient(to bottom, var(--secondary) 0 50%, var(--base) 50% 100%);
	padding-top: 80px;
}
/* TOPのバッジは傾けず横一直線。幅は「お近くの教室を探す」（最も広い子＝タイトル）に合わせる */
.sec-areasearch--pinktop .area-promo {
	flex: 0 0 auto;
	display: inline-flex; flex-direction: column; align-items: center;
}
.sec-areasearch--pinktop .area-promo__badge {
	transform: none;
	display: block; align-self: stretch; text-align: center;
}

/* ---- features（3つの特徴・pink-pale地・ピンク斜め帯＋白アウトライン番号） ----- */
.top-features { position: relative; background: var(--base); padding: 160px 0 238px; overflow: hidden; }   /* 上160px=スウッシュ上端〜見出しの距離（Figma実測）。下238px=アーチ187+row03とのclearance51 */
/* 見出し背景の白いスウッシュ曲線（pale地の上を左下へ流れる白） */
.top-features__curve {
	position: absolute; top: 0; left: 0;   /* スウッシュ全形を表示（クリップしない）。見出しはpadding-topで160px下げ＝白の上に乗る */
	width: 72%; height: auto;          /* 1036/1440・実画像のスウッシュ */
	z-index: 0; pointer-events: none;
}
.top-features__head { position: relative; z-index: 1; text-align: center; margin-bottom: 40px; }
.top-features__eyebrow {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	font-size: 36px; font-weight: 700; color: var(--primary); letter-spacing: .05em;
}
.top-features__eyebrow strong { font-weight: 800; }
/* アウトライン星＋中央バースト（Figma実画像） */
.top-features__star {
	position: absolute; left: calc(100% + 20px); top: -38px;
	width: 96px; height: 96px;
	background: url(assets/features-star.png) center/contain no-repeat;
}
.top-features__title {
	margin-top: 4px;
	font-size: 48px; font-weight: 800; letter-spacing: .05em;
	color: var(--white); -webkit-text-stroke: 4px var(--primary); paint-order: stroke fill;
}

/* ===== 3つの特徴：独立した平行四辺形3本（-3°回転・フルブリード・左右交互） ===== */
/* 帯・写真・テキストすべて同方向 -3° に統一（Figma実測） */
.top-feat { position: relative; min-height: 384px; display: flex; align-items: center; margin-bottom: 28px; }
.top-feat--youth { margin-bottom: -28px; }   /* 02-03の間隔を他より少し狭く（約48px） */
.top-feat__band {
	position: absolute; top: 26px; bottom: 26px;   /* 帯を上下インセット→写真が上部にはみ出す */
	background: var(--secondary); transform: rotate(-3deg); z-index: 0;
}
/* 帯左端をcontent基準(50%-277px=Figmaフレームx443相当)に＝写真(content基準)と常にブリッジしレスポンシブで隙間が出ない */
.top-feat--right .top-feat__band { left: calc(50% - 277px); right: -120px; }   /* 右フレーム端まで */
.top-feat--left  .top-feat__band { left: -120px; right: calc(50% - 259px); }   /* 左フレーム端まで */

.top-feat__inner {
	position: relative; z-index: 2; width: 100%;
	max-width: var(--loicx-max); margin-inline: auto; padding: 0;
	display: flex; align-items: center; gap: 52px;
	transform: rotate(-3deg);   /* 写真・テキストも帯と同じ傾き */
}

/* テキスト（白） */
.top-feat__text { flex: 1 1 auto; color: var(--white); }
.top-feat__head { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.top-feat__num {
	font-size: 80px; font-weight: 700; line-height: 1; letter-spacing: .03em;
	color: transparent; -webkit-text-stroke: 2px var(--white); paint-order: stroke fill;
	flex: 0 0 auto;
}
.top-feat__ttl { font-size: 30px; font-weight: 700; line-height: 1.35; letter-spacing: .05em; }
.top-feat__body { font-size: 16px; line-height: 1.8; letter-spacing: .04em; }

/* 写真＝縦長256×321の同サイズ2枚（色ブロック＋写真）・角丸0px・色ブロックを左下にオフセット */
.top-feat__photo { position: relative; flex: 0 0 auto; width: 306px; height: 366px; }
.top-feat__accent {
	position: absolute; left: 0; top: 45px; width: 256px; height: 321px;
	border-radius: 0; z-index: 0;
	clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.top-feat__img {
	position: absolute; left: 50px; top: 0; width: 256px; height: 321px;
	border-radius: 0; background: #dcdcdc center/cover no-repeat;
	box-shadow: 0 10px 24px rgba(0,0,0,.14); z-index: 1;
	clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
	/* 写真・アンバーともinnerの-3°(=Figma回転3°)で平行。個別回転は付けない */
}
.top-feat__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* 01/03（右帯）写真を88px右へ＝Figma位置(img frame x298)で帯左端を111pxブリッジ。margin-topで色ブロックを帯下に35pxはみ出す（Figma） */
.top-feat--right .top-feat__photo { margin-left: 88px; }
.top-feat--left .top-feat__photo { margin-right: 150px; }
/* はみ出しはabsoluteなaccent/imgのtopで制御（行高さに影響しない＝帯は固定）。実測で35pxへ */
.top-feat--right .top-feat__accent { top: 72px; }   /* 01/03：色ブロックを帯の下に35px */
.top-feat--left  .top-feat__img    { top: -33px; }  /* 02：グレー写真を帯の上に35px */
.top-feat--enjoy   .top-feat__accent { background: var(--enjoy); }
.top-feat--youth   .top-feat__accent { background: var(--youth); }
.top-feat--primary .top-feat__accent { background: var(--primary); }

/* ---- class_cards（選べる4つのクラス！白地・2×2・4色カード） --------------- */
/* 上端＝中央が上に膨らむ放物線アーチ（Figma Union 1:2917／実測:中央+187px・端0・放物線。1440幅で187px＝13vw） */
.top-classcards { position: relative; background: var(--white); padding: 80px 0; scroll-margin-top: 100px; }
.top-classcards::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 13vw; pointer-events: none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 187' preserveAspectRatio='none'><path d='M0,187 Q720,-187 1440,187 Z' fill='%23FFFFFF'/></svg>") no-repeat;
	background-size: 100% 100%;
}
.top-cc__head { text-align: center; margin-bottom: 50px; }
.top-cc__eyebrow { font-size: 36px; font-weight: 800; color: var(--primary); letter-spacing: .05em; }
.top-cc__title {
	margin-top: 8px; font-size: 48px; font-weight: 900; letter-spacing: .05em;
	color: var(--white); -webkit-text-stroke: 4px var(--primary); paint-order: stroke fill;
}
.top-cc__title .num { font-size: inherit; font-weight: 700; }   /* Figma ts6: 数字「4」は他と同サイズ(48px)・Bold700。拡大しない */
.top-cc__grid {
	max-width: var(--loicx-max); margin-inline: auto; padding-inline: 24px;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;
}
.top-cc__card {
	position: relative; overflow: hidden;
	border-radius: 30px; padding: 109px 32px 30px;   /* 上=バンド70+39（Figma実測 spec開始y126→521px換算109）／左右=枠17+15／下=枠17+13 */
	min-height: 441px; color: var(--white);          /* Figma 508→521px換算 */
}
/* カード背景＝上が濃く下がbg色の縦グラデ（Figmaのinset影。実測：上端→bg色へ約40%で到達）。--cc-frameは上に重なる枠の色＝各クラスのベース色 */
.top-cc--enjoy      { background: linear-gradient(180deg, #FF8500 0%, #FFB700 40%); --cc-frame: #FFB700; }
.top-cc--technic    { background: linear-gradient(180deg, #FF2100 0%, #FF5900 40%); --cc-frame: #FF5900; }
.top-cc--cheerleads { background: linear-gradient(180deg, #1221BB 0%, #4059DA 40%); --cc-frame: #4059DA; }
.top-cc--youth      { background: linear-gradient(180deg, #008BCD 0%, #03BBE4 40%); --cc-frame: #03BBE4; }
/* グラデの上に重なる枠（太い上部バンド80px＋左右下20px・中央透明＝Figma実測600×508を当方521pxへ比例：上70px/枠17px） */
.top-cc__card::before {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	border: 17px solid var(--cc-frame); border-top-width: 70px;
	border-radius: 30px;
}
/* 英字透かし：枠の内側（上部バンドの下）に配置・最背面。グラデで見えにくいので視認性を上げた濃いめ色 */
.top-cc__watermark {
	position: absolute; z-index: 0; top: 76px; left: 20px; right: auto;
	font-family: "Noto Sans JP", sans-serif; font-weight: 900; font-size: 88px; line-height: .9;
	text-align: left; letter-spacing: .01em; pointer-events: none;
}
.top-cc--enjoy      .top-cc__watermark { color: rgb(255,168,0); }
.top-cc--technic    .top-cc__watermark { color: rgb(255,72,0); }
.top-cc--cheerleads .top-cc__watermark { color: rgb(50,72,209); }
.top-cc--youth      .top-cc__watermark { color: rgb(2,175,220); }
/* 本文を透かしより前面に */
.top-cc__spec, .top-cc__desc { position: relative; z-index: 1; }
/* クラス名は枠の上部バンド（ベタ塗り80px帯）の上に配置 */
.top-cc__name {
	position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 70px; margin: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 24px; font-weight: 900; letter-spacing: .05em; color: var(--white);
}
.top-cc__name strong { font-weight: 900; }
.top-cc__spec { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 247px; }
.top-cc__spec > div { display: flex; align-items: center; gap: 12px; }
.top-cc__spec dt {
	flex: none; width: 96px; text-align: center;
	background: var(--white); border-radius: 6px; padding: 5px 6px;
	font-size: 14px; font-weight: 800;
}
.top-cc--enjoy      .top-cc__spec dt { color: var(--enjoy); }
.top-cc--technic    .top-cc__spec dt { color: var(--technic); }
.top-cc--cheerleads .top-cc__spec dt { color: var(--cheerleads); }
.top-cc--youth      .top-cc__spec dt { color: var(--youth); }
.top-cc__spec dd { margin: 0; font-size: 18px; font-weight: 800; }
/* 説明文＝Figma fontSize20(521px換算17)・幅285(換算247)で左側に。右側に「詳しく見る」ボタンが並ぶ */
.top-cc__desc { position: relative; max-width: 247px; margin-top: 22px; font-size: 17px; line-height: 1.5; letter-spacing: .03em; }
/* マスコットは右・その下に「詳しく見る」ボタン（Figma準拠） */
/* マスコット：カードごとにFigmaノード実寸が異なる（521px換算）。頭をy120(≈最初のスペック)・ボタンと左揃え(left317)・最前面 */
.top-cc__mascot {
	position: absolute; z-index: 3; left: 317px; top: 120px;
	background: center/contain no-repeat;
}
.top-cc--enjoy      .top-cc__mascot { width: 191px; height: 174px; background-image: url(assets/cc-enjoy.png); }
.top-cc--technic    .top-cc__mascot { width: 165px; height: 217px; background-image: url(assets/cc-technic.png); }
.top-cc--cheerleads .top-cc__mascot { width: 149px; height: 217px; background-image: url(assets/cc-cheerlys.png); }
.top-cc--youth      .top-cc__mascot { width: 155px; height: 201px; background-image: url(assets/cc-youth.png); }
/* 「詳しく見る」：マスコットと左揃え(317)・幅をマスコ/Figma(189)に合わせ164・desc下端の高さ(top354) */
.top-cc__btn {
	position: absolute; left: 317px; top: 354px; right: auto; bottom: auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 164px; height: 44px; padding: 0 18px;
	background: var(--white); border-radius: 50px;
	font-size: 15px; font-weight: 800;
}
.top-cc--enjoy      .top-cc__btn { color: var(--enjoy); }
.top-cc--technic    .top-cc__btn { color: var(--technic); }
.top-cc--cheerleads .top-cc__btn { color: var(--cheerleads); }
.top-cc--youth      .top-cc__btn { color: var(--youth); }

/* ---- testimonials（enjoyの声カードと同一＋pale地・上下とも上凸アーチ背景） ---- */
/* 生徒・保護者の声：上端・下端とも「中央が上に膨らむ放物線アーチ」（Figma Union 1:2928上端pale / 1:2998下端white・深さ187px=13vw） */
.sec-voices--pale { position: relative; background: var(--base); padding: 140px 0 237px; overflow: hidden; }  /* 上=アーチ187+header／下=アーチ187+カードとの余白50 */
/* 上端：paleが class_cards白へ膨らむ＝白で上の角を放物線に削る */
.sec-voices--pale::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 13vw; z-index: 0; pointer-events: none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 187' preserveAspectRatio='none'><path d='M0,0 L1440,0 L1440,187 Q720,-187 0,187 Z' fill='%23FFFFFF'/></svg>") no-repeat;
	background-size: 100% 100%;
}
/* 下端：白（講師セクション）が pale へ膨らむ＝白の放物線ドーム */
.sec-voices--pale::after {
	content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 13vw; z-index: 0; pointer-events: none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 187' preserveAspectRatio='none'><path d='M0,187 Q720,-187 1440,187 Z' fill='%23FFFFFF'/></svg>") no-repeat;
	background-size: 100% 100%;
}
.sec-voices--pale > .loicx-container,
.sec-voices--pale .sec-voices__viewport { position: relative; z-index: 1; }

/* ---- instructors（講師紹介・幅1360・平行四辺形clip写真＋FIRST NAME） -------- */
.top-instructors { background: var(--white); padding: 80px 0 90px; overflow: hidden; }
.top-inst__head { text-align: center; margin-bottom: 50px; }
.top-inst__eyebrow { font-size: 36px; font-weight: 800; color: var(--primary); letter-spacing: .05em; }
.top-inst__title {
	margin-top: 4px; font-size: 48px; font-weight: 900; letter-spacing: .05em;
	color: var(--white); -webkit-text-stroke: 4px var(--primary); paint-order: stroke fill;
}
.top-inst__row {
	width: 1360px; max-width: 100%; margin-inline: auto; padding-inline: 16px;
	display: flex; justify-content: center; align-items: flex-start; gap: 16px;   /* 各画像の間に余白 */
}
.top-inst__card { margin: 0; flex: 1 1 0; min-width: 0; max-width: 264px; }   /* 可変幅（タブレットで縮小・見切れ防止） */
.top-inst__card--down { margin-top: 30px; }
.top-inst__photo {
	position: relative; display: block;
	width: 100%; aspect-ratio: 256 / 360;
	background: #cfcfcf;
	clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);   /* 平行四辺形（同方向スラント・緩やか） */
}
.top-inst__more { text-align: center; margin-top: 40px; }
.top-inst__more .loicx-btn-ghost { width: 400px; height: 60px; padding: 25px 40px; font-size: 18px; }
.top-inst__first {
	position: absolute; left: 9%; bottom: 6%;
	font-family: "Noto Sans JP", sans-serif; font-weight: 300; font-size: clamp(16px, 2vw, 30px); line-height: 1.05;
	color: var(--white); letter-spacing: .05em;
}
.top-inst__name {
	text-align: left; padding-left: 19px; margin-top: 20px;
	font-size: 16px; font-weight: 700; color: var(--secondary); letter-spacing: .03em;
}

/* ---- news（お知らせ＋コラム・2カラム） ------------------------------------ */
.top-news { background: var(--white); padding: 20px 0 150px; }   /* 下余白＝ニュースとフッター(CTA/マーキー)の距離。PCのみ（SPは下のmedia queryで60px） */
.top-news__inner {
	max-width: var(--loicx-max); margin-inline: auto; padding-inline: 24px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
}
/* Figma: ヘッダーは高さ114px・row・align-items center・gap16。テキスト(eyebrow+見出し)は gap20。 */
.top-news__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; min-height: 114px; }
.top-news__head > div { display: flex; flex-direction: column; gap: 20px; }
/* キャラ画像（Figma実値）: お知らせ=ピンクCジャンプ100×114 / コラム=犬100×74 */
.top-news__icon { flex: none; align-self: center; width: 100px; height: 114px; border-radius: 0; background: url(assets/stats-left.png) center/contain no-repeat; }
.top-news__icon--dog { background-image: url(assets/mascot-dog-pom.png); height: 74px; }
/* 行高タイト（line-height:1）＝Figmaの20px gapを実寸通りに見せる（line-heightで間延びさせない） */
.top-news__eyebrow { font-size: 20px; font-weight: 800; line-height: 1; color: var(--primary); letter-spacing: .05em; }
.top-news__title {
	font-size: 48px; font-weight: 900; line-height: 1; letter-spacing: .05em;
	color: var(--white); -webkit-text-stroke: 4px var(--primary); paint-order: stroke fill;
}
.top-news__list { list-style: none; margin: 0 0 26px; padding: 0; }
.top-news__list li {
	display: flex; align-items: center; gap: 18px;
	padding: 16px 0; border-bottom: 1px solid var(--divider);
}
.top-news__list li:first-child { border-top: 1px solid var(--divider); }
.top-news__photo { flex: none; display: block; overflow: hidden; width: 96px; height: 70px; border-radius: 12px; background: var(--placeholder2); }
/* サムネイルは箱いっぱいに敷く。指定が無いと元サイズ(150×150)のまま左寄せになり、
   右と下にプレースホルダの灰色が露出する（SPは箱が全幅170pxになるため特に目立つ） */
.top-news__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-news__item time { display: block; font-size: 14px; font-weight: 800; color: var(--secondary); letter-spacing: .05em; }
.top-news__item p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--black); }
.top-news__more { text-align: right; }
.loicx-btn-ghost {
	display: inline-flex; align-items: center; justify-content: center;
	width: 300px; max-width: 100%; height: 60px; padding: 0 28px;   /* Figma layout_3OCJSC: 300×60固定 */
	background: var(--white); color: var(--primary);
	border: 1px solid var(--primary); border-radius: 50px;
	font-size: 18px; font-weight: 800;   /* Figma style_WVARSK: 18px */
}

/* =========================================================================
 * ボタンのホバー（参考サイト demo.17-project.net/loicx/ と同一カラー）
 *   - ピンク塗りCTA（体験予約・相談）: bg #E80F47 → #FF5E87（参考ヘッダーCTAと同色）
 *   - 白/淡地＋色文字ボタン（詳しく見る/講師/一覧/オンライン/無料体験予約）:
 *       bg → rgba(255,255,255,.82)（参考の「詳しく見る」等のホバーと同一）
 * ========================================================================= */
.site-nav__cta { transition: background-color .3s, color .3s; }
.site-nav__cta:hover { background-color: #ff5e87; }

/* 色付き／濃い背景の上のボタン（詳しく見る=カード上・無料体験=ピンク帯上）：
   参考と同色 rgba(255,255,255,.82)。背景色が透けて見えるため変化が分かる。 */
.top-cc__btn,
.loicx-cta__actions .loicx-btn { transition: background-color .3s, color .3s; }
.top-cc__btn:hover,
.loicx-cta__actions .loicx-btn:hover { background-color: rgba(255, 255, 255, .82); }

/* 白地ボタン（講師/一覧/オンライン校）：白82%では見えないためピンク塗りつぶしに反転（ユーザー選択）。 */
.loicx-btn-ghost,
.area-search__online .loicx-btn { transition: background-color .3s, color .3s, border-color .3s; }
.loicx-btn-ghost:hover,
.area-search__online .loicx-btn:hover { background-color: var(--primary); color: var(--white); border-color: var(--primary); }

/* =========================================================================
 * TOP: SPレイアウト（≤768px）。SP Figma=2:2299 準拠。
 *   stats1列 / features写真上 / class_cards1列 / instructors2列 / news1列。
 *   FVは1440ステージを縮小表示（中央寄せ＋overflow clipで横はみ出し0px）。
 * ========================================================================= */
@media (max-width: 768px) {
	/* FV */
	.top-fv { padding-top: 70px; }

	/* 導入リッチテキスト: テキスト→4写真ストリップ の縦積み */
	.top-intro__inner { position: static; width: 100%; min-height: 0; padding: 28px 0 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
	.top-intro__photo-left { display: none; }
	.top-intro__body { position: static; width: 100%; order: 1; padding: 0 16px; }
	.top-intro__title { font-size: 22px; margin-bottom: 14px; }
	/* 4写真ストリップ: Group11(x=-29, w=433 in 375px frame) → 30px bleed両側 */
	.top-intro__photos-right { position: static; order: 2; width: calc(100% + 60px); margin-left: -30px; height: 170px; display: flex; align-items: flex-start; gap: 0; }
	.top-intro__photos-right .ph { position: static; left: auto; top: auto; flex: 1; height: 150px; object-fit: cover; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
	/* P4(r0)/P2(r2): y=20（20px下） / P1(r1)/P3(r3): y=0（上端） */
	.top-intro__photos-right .ph--r0,
	.top-intro__photos-right .ph--r2 { display: block; margin-top: 20px; }
	.top-intro__photos-right .ph--r1,
	.top-intro__photos-right .ph--r3 { margin-top: 0; }

	/* stats: 1列（Figma SP 1:2337 準拠） */
	.top-stats { padding: 36px 0 56px; }
	.top-stats__panel {
		flex-direction: column;
		justify-content: flex-start;   /* PC の center を上書き */
		align-items: stretch;          /* 各item を同幅にして左端x=30pxを統一 */
		gap: 40px;                     /* Figma Frame35 gap:40px */
		padding: 52px 31px;            /* Figma: top 50px / 左右 30px（375px→390px 換算） */
		border-radius: 30px;           /* Figma Rectangle85 borderRadius:30px */
		margin-inline: 0;              /* Figma: パネルはフレーム幅いっぱい（x=0 w=375） */
	}
	.top-stats__item { text-align: left; }           /* Figma SP: ラベル・数値すべて左寄せ（PCのcenter上書き） */
	.top-stats__value { justify-content: flex-start; } /* Figma SP: 数値も左端から（PCのcenter上書き） */
	.top-stats__divider { width: 100%; height: 2px; align-self: center; margin: 0; } /* Figma: sizing fill → 100% */
	.top-stats__value .num { font-size: 64px; }
	.top-stats__value .unit { font-size: 30px; }
	/* SP: マスコット表示（Figma 1:2336 / 1:2356 座標準拠） */
	.top-stats__mascot { display: block; }
	.top-stats__mascot--r { top: -50px; right: 0; left: auto; bottom: auto; width: 234px; height: 216px; } /* 1:2336: x=179.4 y=1175 → top=-48px right=0 */
	.top-stats__mascot--l { top: 329px; left: 245px; right: auto; bottom: auto; width: 130px; height: 100px; background-image: url(assets/mascot-dog-pom.png); } /* 1:2356: x=245 y=1477（bg top y=1223 → top=254×1.04=264px） PNG込み130×100 */
	.top-stats__mascot--j { display: block; top: 618px; left: -21px; right: auto; bottom: auto; width: 167px; height: 182px; background-image: url(assets/stats-jump.png); } /* 1:2580: x=-20 y=1759（y=1759-1223=536 ×1.04≈557px）左端はみ出し */
	.top-stats__suffix { text-align: right; } /* Figma SP: 「以上」はパネル右端（315px固定・RIGHT） */

	/* area_search: 上38%ピンク→pale */
	.sec-areasearch--pinktop { background: linear-gradient(to bottom, var(--secondary) 0 38%, var(--base) 38% 100%); }

	/* features SP: Figma 1:2299 実測準拠 */
	.top-features { padding: 44px 0 72px; }
	.top-features__curve { display: block; content: url(assets/features-curve-sp.png); width: 100%; }
	.top-features__eyebrow { font-size: 20px; }   /* Figma style_VJ4UCU fontSize:20 */
	.top-features__star { width: 56px; height: 56px; left: calc(100% - 6px); top: 30px; }
	.top-features__star i { width: 20px; height: 20px; }
	.top-features__title { font-size: 48px; }   /* Figma style_JT4TIJ fontSize:48 */
	/* 各featアイテム: 高さ=写真上端(0)〜帯下端。feat01/03: 66+522=588px、feat02: 66+439=505px */
	.top-feat { min-height: 588px; overflow: visible; align-items: flex-start; }
	.top-feat:not(:last-child) { margin-bottom: 7px; }   /* Figma: feat間の余白 7px */
	.top-feat--left { min-height: 505px; }
	/* 帯: feat top+66pxから開始（写真が0〜201pxに被さる）*/
	.top-feat__band { top: 66px; bottom: 0; transform: rotate(-3deg); }
	.top-feat--right .top-feat__band { left: 10px; right: -60px; }
	.top-feat--left  .top-feat__band { left: -60px; right: 10px; }
	/* inner: position:static → .top-feat__photo が .top-feat 基準で絶対配置される */
	.top-feat__inner { position: static; display: block; padding: 0; max-width: none; transform: none; min-height: 0; align-items: unset; gap: 0; flex-direction: unset; }
	/* 写真コラージュ: 167×201px、feat top右上に絶対配置。PNG に回転3°ベイク済みのため transform: none */
	.top-feat__photo,
	.top-feat--left .top-feat__photo,
	.top-feat--right .top-feat__photo { position: absolute; top: 0; bottom: auto; margin: 0; width: 167px; height: 201px; transform: none; z-index: 1; background-size: contain; background-repeat: no-repeat; background-position: top right; }
	.top-feat--right .top-feat__photo { right: 0; left: auto; }
	.top-feat--left  .top-feat__photo { right: 32px; left: auto; }   /* Figma: x=184 → right=(375-184-160.54)×1.04≈32px */
	/* SP: Figma書き出しPNG（回転3°ベイク済み） */
	.top-feat--enjoy   .top-feat__photo { background-image: url(assets/feat-photo-sp-01.png); }
	.top-feat--youth   .top-feat__photo { background-image: url(assets/feat-photo-sp-02.png); }
	.top-feat--primary .top-feat__photo { background-image: url(assets/feat-photo-sp-03.png); }
	/* inner spans はPNGに内包 → 非表示 */
	.top-feat__accent,
	.top-feat__img { display: none; }
	/* テキスト: feat top から130px下。Figmaグループ全体が3°回転のためテキストも同角度 */
	.top-feat__text { position: relative; z-index: 2; color: var(--white); padding: 130px 28px 32px; text-align: left; display: flex; flex-direction: column; gap: 30px; transform: rotate(-3deg); }
	.top-feat--right .top-feat__text { padding-left: 55px; }   /* Figma Frame76 x=55 */
	.top-feat--left  .top-feat__text { padding-left: 25px; }   /* Figma Frame77 x=25 */
	/* head: num(01)→ttl 縦積み gap:30px（Figma column layout） */
	.top-feat__head { flex-direction: column; align-items: flex-start; gap: 30px; margin-bottom: 0; }
	.top-feat__num { font-size: 80px; }   /* Figma fontSize:80 */
	.top-feat__ttl { font-size: 24px; }   /* Figma fontSize:24 */
	.top-feat__body { font-size: 16px; text-align: left; line-height: 1.7; }

	/* class_cards: 1列 */
	.top-classcards { padding: 50px 0; }
	.top-cc__eyebrow { font-size: 24px; }
	.top-cc__title { font-size: 48px; line-height: 1.1; margin-top: 30px; }
	.top-cc__title .num { font-size: inherit; }
	.top-cc__grid { grid-template-columns: 1fr; gap: 20px; padding-inline: 30px; }
	.top-cc__card { overflow: hidden; max-width: none; margin: 0; min-height: 423px; padding: 80px 0 24px; }
	.top-cc__card::before { border-top-width: 55px; }
	.top-cc__name { height: 55px; font-size: 20px; white-space: nowrap; }
	.top-cc__spec { max-width: 235px; margin-inline: auto; padding-left: 0; }
	.top-cc__spec > div { gap: 20px; }
	.top-cc__spec dt { width: 100px; font-size: 16px; padding: 12px 0; }
	.top-cc__spec dd { font-size: 18px; line-height: 1.2; }
	.top-cc__desc { max-width: 235px; margin-inline: auto; padding-left: 0; margin-top: 20px; font-size: 16px; line-height: 1.5; }
	.top-cc__mascot { left: auto; right: 0; top: auto; bottom: 0; }
	.top-cc--enjoy      .top-cc__mascot { width: 135px; height: 94px;  background-image: url(assets/cc-sp-enjoy.png); }
	.top-cc--technic    .top-cc__mascot { width: 113px; height: 110px; background-image: url(assets/cc-sp-technic.png); }
	.top-cc--cheerleads .top-cc__mascot { width: 103px; height: 103px; background-image: url(assets/cc-sp-cheerlys.png); }
	.top-cc--youth      .top-cc__mascot { width: 112px; height: 113px; background-image: url(assets/cc-sp-youth.png); }
	.top-cc__btn { display: flex; position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; width: 235px; height: 44px; padding: 0 0 0 30px; gap: 10px; justify-content: flex-start; font-size: 18px; margin: 24px auto 0; }
	.top-cc__btn::after { content: "→"; display: inline-block; font-size: 18px; line-height: 1; }

	/* instructors: 2列グリッド・y段違い（左=20px下・右=上端）・6px bleed */
	.top-instructors { padding: 50px 0 60px; }
	.top-inst__eyebrow { font-size: 20px; }
	.top-inst__title { font-size: 32px; }
	.top-inst__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 0; align-items: start; width: calc(100% + 12px); margin-left: -6px; padding-inline: 0; }
	.top-inst__card { flex: unset; max-width: none; margin-top: 20px; }
	.top-inst__card--down { margin-top: 0; }
	.top-inst__card + .top-inst__card { margin-left: 0; }
	.top-inst__photo { width: 100%; height: 295px; }
	.top-inst__name { font-size: 14px; padding-left: 10px; }

	/* news: 1列・アイテム縦積み（写真全幅・上部） */
	.top-news { padding: 10px 0 60px; }
	.top-news__inner { grid-template-columns: 1fr; gap: 38px; padding-inline: 16px; }
	.top-news__title { font-size: 32px; }
	.top-news__list li { flex-direction: column; align-items: stretch; gap: 10px; }
	.top-news__photo { flex: none; width: 100%; height: 170px; border-radius: 12px; }
	.top-news__more { text-align: center; }
	.top-news__more .loicx-btn-ghost { width: 100%; }
}

/* =========================================================================
 * 教室詳細（single-school）— Figma PC 1:950 準拠。
 *   フレーム1440 / コンテンツ1120 / 左右160。
 *   袋文字見出し＝白塗り＋Primaryフチ2px（CLAUDE.md確定）。
 *   配色: Primary#E80F47 / Secondary#F45981 / Base#FFF4F7 / 文字#393939。
 * ========================================================================= */

/* ---- セクション見出し（eyebrow + 袋文字タイトル） ---- */
.sch-secthead { display: flex; flex-direction: column; gap: 30px; }
.sch-secthead--center { align-items: center; text-align: center; }
.sch-secthead__eyebrow { font-size: 36px; font-weight: 700; color: var(--primary); line-height: 1; }
/* 袋文字はフチ可視2px。-webkit-text-strokeは内側半分がfill下に隠れるため Figma strokeWeight 2px → CSS 4px（.loicx-outline と同基準） */
.sch-secthead__title,
.sch-reasons__title,
.sch-voices__title,
.sch-plans__title {
	color: var(--white);
	-webkit-text-stroke: 4px var(--primary);
	paint-order: stroke fill;
	font-weight: 800;
	letter-spacing: .05em;
	line-height: 1.15;
}
.sch-secthead__title { font-size: 48px; }

/* ---- HERO（ピンク帯＋星装飾＋教室名） ---- */
/* Figma 1440フレームを viewport 中央に固定したステージ(.sch-hero__stage)上に、
   タイトル(Frame153 x159 y170)と星(実座標)を絶対配置する。これによりブラウザ幅に
   依らずFigma同一の位置関係（星は左右端からはみ出す／タイトルと重ならない）を再現し、
   旧実装(left:px を viewport 左基準)で起きた「星のみきれ」「タイトルと星の重なり」を解消。 */
.sch-hero {
	position: relative;
	z-index: 2;                    /* 帯下にはみ出す星をintroセクションの上に描画 */
	overflow-x: clip;              /* 横方向（フレーム左右端）は切る＝横スクロール防止 */
	overflow-y: visible;           /* 縦方向は星が帯下のコンテンツへスピル（Figma/参照同様） */
	height: 400px;                 /* Figma: ヒーロー帯=1440x400 */
	/* 背景はFigma "Mask group"(1:952) のベクター複合形状を書き出した正規アセット。
	   明#FF9DB6基調＋左の対角くさび(暗#FF83A3)＋左下#F45981三角。center寄せで
	   1440フレームをステージと一致させ、超過幅は地色#FF9DB6で自然に延長。 */
	background-color: #FF9DB6;
	background-image: url(assets/sch-hero-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 1440px 400px;
}
.sch-hero__stage {
	position: relative; width: 1440px; height: 400px;
	left: 50%; transform: translateX(-50%);   /* viewport中央に1440フレームを固定 */
}
.sch-hero__inner {
	position: absolute; left: 160px; top: 170px; z-index: 2;   /* Figma Frame153 x159 y170 */
	max-width: none; width: auto; margin: 0; padding: 0;
}
.sch-hero__title { font-size: 50px; font-weight: 800; color: var(--white); line-height: 1.2; }
.sch-hero__sub { font-size: 20px; color: var(--white); line-height: 1.6; margin-top: 6px; }
.sch-hero__star { position: absolute; z-index: 1; pointer-events: none; }
.sch-hero__star--left   { left: -241px; top: 103px; width: 532px; }   /* Figma 1:973 starp-white */
.sch-hero__star--right  { left: 1093px; top: 100px; width: 350px; }   /* Figma 1:975 starp-white */
.sch-hero__star--yellow { left: 1319px; top: 268px; width: 191px; }   /* Figma 1:974 star-2(黄) */

/* ノートPC幅（769〜1440px未満）でFV内のタイトル・星が見切れる対策。
   1440px固定ステージをやめ、stageをviewport幅100%にしてタイトルはコンテナ基準、
   星はviewport左右端基準で再配置。星のサイズも縮小して帯内に収める。 */
@media (min-width: 769px) and (max-width: 1439px) {
	.sch-hero__stage { width: 100%; left: 0; transform: none; }
	.sch-hero__inner {
		/* Figma 1440でtitleはx=160。狭幅でも最低160pxを保ち星の右端から十分離す。 */
		left: max(160px, calc((100% - 1120px) / 2));
		right: auto;
	}
	.sch-hero__star--left   { left: -120px; top: 110px; width: 380px; }
	.sch-hero__star--right  { left: auto; right: -40px; top: 100px; width: 260px; }
	.sch-hero__star--yellow { left: auto; right: -50px; top: 240px; width: 140px; }
}

/* コンテンツ枠をFigma厳密値に（max1168=内容1120 / 1440時に左右160）。
   ※共通フッター(area-search)の .loicx-container は据え置き＝.sch-detail配下のみ補正。 */
.sch-detail .loicx-container { max-width: 1168px; }

/* ---- 共通: 各セクションの縦リズム（base背景） ---- */
.sch-intro, .sch-video, .sch-map, .sch-reasons,
.sch-schedule, .sch-plans { background: var(--base); }
.sch-intro  { padding: 99px 0 0; }
.sch-video  { padding: 60px 0 0; }
.sch-map    { padding: 67px 0 0; }
.sch-reasons{ padding: 84px 0 286px; }          /* 画像下にピンク(base)余白＝声の白アーチが食い込む分（アーチ頂点-画像間100px: 286-186=100） */
.sch-reasons--novoice{ padding-bottom: 96px; }  /* 声セクション(白アーチ)が無い校舎＝食い込み分186pxが不要→詰める（テクニックページと同値） */
.sch-voices { background: var(--white); padding: 0 0 84px; }
.sch-schedule { padding: 100px 0 0; }
.sch-plans  { padding: 117px 0 237px; position: relative; overflow: visible; }
.sch-instructor { background: var(--white); padding: 0 0 100px; overflow-x: clip; }  /* 講師マスコットの右端はみ出しをフレーム端で切る（横スクロール防止） */
@media (min-width: 769px) {
	/* 見出しはアーチ頂点から140px下（Figma node1:962→1:1007）。プラン下端アーチ(187)の白い湾曲部へ47px食い込ませる。
	   ※負マージンだとinstructorの白背景ごと47px上がり、その平坦な上端がアーチ基線より上に出て肩の白横線になる→白背景はプラン基線(=アーチ基線)に据え置き、見出し＋ごあいさつだけtransformで47px上げ、margin-bottomで次セクションを同量引き上げる。 */
	.sch-instructor { margin-bottom: -17px; }   /* 頂点→見出しブロック ≈170px（ユーザー指示で140→もう少し余白を確保） */
	.sch-instructor .sch-secthead,
	.sch-instructor .sch-greeting { transform: translateY(-17px); }
}

/* ---- INTRO（見出し＋開校日/対応クラスのバッジ） ---- */
.sch-intro__title { font-size: 40px; font-weight: 800; color: var(--primary); line-height: 1.3; }
.sch-intro__meta { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; }
.sch-badges { display: flex; align-items: center; gap: 10px; }
.sch-badges__label {
	flex: none; width: 120px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--white); border: 1px solid var(--primary); border-radius: 100px;
	color: var(--primary); font-size: 16px; font-weight: 800;
}
.sch-day {
	flex: none; width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #CBCBCB; border-radius: 100px;
	color: var(--white); font-size: 16px; font-weight: 700;
}
.sch-class {
	height: 30px; padding: 0 15px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #CBCBCB; border-radius: 100px;
	color: var(--white); font-size: 16px; font-weight: 700; white-space: nowrap;
}
.sch-day.is-on, .sch-class.is-on { background: var(--primary); }

/* ---- 動画/地図見出し（星＋テキスト＋犬） ---- */
.sch-secttl { display: flex; align-items: center; justify-content: center; gap: 20px; }
.sch-secttl__star { width: 100px; height: 100px; object-fit: contain; }
.sch-secttl__dog  { width: 138px; height: 100px; object-fit: contain; }
.sch-secttl__text { font-size: 30px; font-weight: 800; color: var(--primary); }

/* 埋め込みプレースホルダ（YouTube/Map） */
.sch-embed {
	margin-top: 11px;
	width: 100%; height: 630px;
	background: var(--placeholder); border-radius: 20px;
	display: flex; align-items: center; justify-content: center;
	color: var(--white); font-size: 28px; font-weight: 700; text-align: center; line-height: 1.4;
}
.sch-embed--map { height: 448px; }
/* 実埋め込み（iframe）はプレースホルダ枠いっぱいに表示し角丸を継承 */
.sch-embed--video iframe,
.sch-embed--map iframe { width: 100%; height: 100%; border: 0; border-radius: 20px; display: block; }
.sch-embed--video, .sch-embed--map { padding: 0; overflow: hidden; }

/* ---- 地図住所 ---- */
.sch-map__addr {
	display: flex; align-items: center; justify-content: flex-start; gap: 10px;
	color: var(--primary); font-size: 18px; line-height: 1.4;
}
.sch-map__pin {
	flex: none; width: 28px; height: 39px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E80F47'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- 選ばれる理由 ---- */
.sch-reasons__title { font-size: 48px; }
.sch-reasons__list { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.sch-reason {
	background: var(--white); border-radius: 5px; padding: 30px;
	display: flex; align-items: center; justify-content: center;
	text-align: center; color: var(--black);
	font-size: 24px; font-weight: 800; line-height: 1.2;
}
.sch-reason--wide { min-height: 78px; }
.sch-reason-row { display: flex; gap: 20px; }
.sch-reason-row .sch-reason { flex: 1; }
.sch-reasons__image {
	margin-top: 40px;
	width: 100%; height: 380px;
	background: var(--placeholder); border-radius: 20px;
}
/* SP専用アコーディオン要素はPCでは無効/非表示（PCは全カード＋大画像を常時表示） */
.sch-br-sp { display: none; }
.sch-reasons__toggle { display: none; }
.sch-reasons__fold { position: relative; }
.sch-reasons__fade,
.sch-reasons__more { display: none; }
/* 声の総合満足度（参照ページ準拠でPCも見出し上に表示）。
   ※margin-topを入れるとマージン相殺でセクション上に隙間が漏れ、アーチ基線より上にbody白が出て肩の横線になる→0にして位置はtransformで作る（PC）。SPは別途14px。 */
.sch-voices__stat { display: block; text-align: center; color: var(--primary); font-weight: 800; font-size: 28px; line-height: 1; margin-top: 0; }
.sch-voices__stat b { font-size: 48px; }
.sch-only-sp { display: none; }

/* ---- 生徒・保護者の声 ---- */
/* 声セクション(白)の上端＝中央が上に盛り上がるアーチ。Figma Union(node1:1010)の実パスに一致させる。
   半楕円(border-radius)だと中央だけ尖って膨らみが強い→Figmaは「肩付き・中央約1/3が平坦」な3次ベジェ。サジッタ(膨らみ)187px。
   背景SVGをpreserveAspectRatio=none＋size100% 100%で全幅にストレッチ。 */
.sch-voices { position: relative; }
.sch-voices::before {
	content: ""; position: absolute; left: 0; right: 0; top: -186px; height: 187px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 187' preserveAspectRatio='none'%3E%3Cpath d='M0 187C211.413 68.0771 457.276 0 719.633 0C982.293 0 1228.42 68.2351 1440 187Z' fill='%23ffffff'/%3E%3C/svg%3E") top center / 100% 100% no-repeat;
	z-index: 0;
}
.sch-voices > .loicx-container { position: relative; z-index: 1; }
@media (min-width: 769px) {
	/* 見出しブロックをアーチ頂点から140px下に（Figma node1:1010→1:1022）。
	   アーチは.sch-voices自身の::beforeのため負マージンだとアーチごと動く→transformで中身だけ102px上げ、margin-bottomで次セクションを同量引き上げて下余白を不変に保つ。
	   セクション白背景の上端はアーチ基線に揃ったまま動かないので肩の白横線は出ない。SP(別レイアウト)には適用しない。 */
	.sch-voices > .loicx-container { transform: translateY(-72px); }   /* 頂点→見出し ≈170px（ユーザー指示で140→もう少し余白を確保） */
	.sch-voices { margin-bottom: -72px; }
}
.sch-voices__title { font-size: 48px; font-weight: 900; text-align: center; margin-top: 8px; }  /* 総合満足度の直下 */
.sch-voice { width: 760px; max-width: 100%; margin: 50px auto 0; }
/* 見出し直後の最初のカードは、見出し下端〜最初のQの余白=50px（ユーザー指定） */
.sch-voices__title + .sch-voice { margin-top: 95px; }
.sch-voice__card {
	position: relative; background: var(--white); border-radius: 30px;
	box-shadow: 0 10px 40px rgba(0,0,0,.1);
	padding: 0 60px 36px;
	display: flex; flex-direction: column; align-items: flex-start;
}
.sch-voice__q {
	background: var(--primary); color: var(--white);
	font-size: 20px; font-weight: 800; line-height: 1; padding: 14px;
	margin-left: -10px;
	transform: rotate(-3deg);     /* Figma実測 -3°（右上がり） */
	transform-origin: left center;
}
.sch-voice__q:first-child { margin-top: -25px; }
.sch-voice__a { font-size: 16px; color: var(--black); line-height: 1.7; margin: 18px 0 24px; }
.sch-voice__a:last-child { margin-bottom: 0; }
.sch-voice__person { display: flex; align-items: center; gap: 17px; margin-top: 20px; }
.sch-voice__avatar {
	flex: none; width: 100px; height: 100px; border-radius: 80px;
	background: var(--avatar) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E") center/40px no-repeat;
}
.sch-voice__name { font-size: 20px; color: var(--black); line-height: 1.4; }

/* ---- 体験申込ブロック（全幅ピンク＋4ボタン） ---- */
.sch-trial { background: var(--secondary); padding: 60px 0; }
.sch-trial__title {
	font-size: 30px; font-weight: 800; color: var(--white); text-align: center;
	margin-bottom: 50px; line-height: 1.4;
}
.sch-trial__grid {
	max-width: 1168px; margin-inline: auto; padding-inline: 24px;
	display: flex; flex-wrap: wrap; gap: 30px 35px; justify-content: center;
}
.sch-trial__btn {
	width: 542px; max-width: 100%; height: 120px;
	background: var(--base); border: 10px solid var(--divider); border-radius: 20px;
	box-shadow: 0 10px 20px rgba(244,89,129,.6);
	display: grid; grid-template-columns: 1fr 36px;
	grid-template-areas: "cls arrow" "act arrow";
	align-content: center; column-gap: 10px; padding: 0 20px;
}
.sch-trial__btn .cls { grid-area: cls; font-size: 22px; font-weight: 800; color: var(--black); letter-spacing: .1em; }
.sch-trial__btn .act { grid-area: act; font-size: 20px; font-weight: 800; color: var(--primary); letter-spacing: .1em; }
.sch-trial__btn .arrow {
	grid-area: arrow; align-self: center;
	width: 36px; height: 36px; border-radius: 60px;
	background: var(--white); border: 1px solid var(--primary);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--primary); font-size: 14px;
}

/* ---- レッスンスケジュール ---- */
.sch-schedule { position: relative; }
.sch-schedule__deco { position: absolute; top: 60px; right: 100px; width: 323px; height: 220px; z-index: 1; }
/* Figma実測: 3枚とも同方向・同角度のparallelogram（top-left=6%オフセット） */
.sch-schedule__deco .ph { position: absolute; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.sch-schedule__deco .ph--1 { left: 0;     top: 0;     width: 213px; height: 120px; background: rgba(244,89,129,.5); }
.sch-schedule__deco .ph--2 { left: 38px;  top: 40px;  width: 285px; height: 160px; background: var(--placeholder); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.sch-schedule__deco .ph--3 { left: 249px; top: 178px; width: 74px;  height: 42px;  background: rgba(244,89,129,.7); }
.sch-sched { display: flex; align-items: stretch; gap: 10px; margin-top: 30px; }
.sch-sched__day {
	flex: none; width: 50px; border-radius: 6px;
	background: var(--secondary); color: var(--white);
	font-size: 20px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.sch-sched__rows { flex: 1; display: flex; flex-direction: column; gap: 11px; }
.sch-sched__row {
	background: var(--white); border-radius: 5px; padding: 20px 30px;
	display: flex; align-items: center; gap: 23px;
}
.sch-sched__row .time { flex: none; width: 200px; font-size: 30px; font-weight: 600; color: var(--black); white-space: nowrap; }
.sch-sched__row .cls  { font-size: 24px; font-weight: 600; color: var(--black); }
.sch-sched__row .note { font-size: 16px; }

/* ---- プラン・料金 ---- */
.sch-plans__title { font-size: 48px; }
.sch-plans__sub { font-size: 20px; font-weight: 700; color: var(--primary); }
.sch-plan-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 40px; margin-top: 50px; }
.sch-plan {
	flex: 1 1 calc(50% - 20px); max-width: 540px; min-width: 0; border-radius: 20px;
	padding: 50px 30px 30px; color: var(--white);
	display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.sch-plan__box { margin-top: 10px; }
.sch-plan--standard { background: var(--technic); }
.sch-plan--light    { background: var(--enjoy); padding-bottom: 116px; }
.sch-plan__name { font-size: 36px; font-weight: 700; text-align: center; line-height: 1; }
.sch-plan__price { display: flex; align-items: baseline; justify-content: center; gap: 4px; line-height: 1; }
.sch-plan__price .num  { font-size: 46px; font-weight: 600; line-height: 1; }
.sch-plan__price .unit { font-size: 24px; font-weight: 800; line-height: 1; }
.sch-plan__box {
	align-self: stretch; background: var(--white); border-radius: 10px; padding: 20px;
	display: flex; flex-direction: column; gap: 10px;
}
.sch-plan__feat {
	background: #F8F8F8; border-radius: 5px; padding: 20px;
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 18px; font-weight: 700; color: var(--black); line-height: 1.3;
}
.sch-plan__feat i { font-style: normal; line-height: 1.7; }
.sch-plan--standard .sch-plan__feat i { color: var(--technic); }
.sch-plan--light .sch-plan__feat i { color: var(--enjoy); }
.sch-plan__feat--accent span { color: var(--technic); font-weight: 800; }
.sch-plans__note { font-size: 14px; color: var(--ink-strong); text-align: right; margin-top: 20px; }
.sch-plans__technic {
	position: relative; overflow: hidden; margin-top: 40px;
	display: flex; align-items: center;
	/* スタンダードカード(.sch-plan)の幅 calc((100% - 40px) / 2) と同一式・上限540px。
	   ノートPC幅でもプランカードからボタンがはみ出ないよう連動して縮む。 */
	width: calc((100% - 40px) / 2); max-width: 540px; height: 115px;
	background: linear-gradient(176deg, #FF5900 50%, #FF3C01 51%);
	border-radius: 10px; color: var(--white);
	/* 右パディング142pxはマスコット幅126px+余白16pxを確保。狭幅でも文字とマスコットが重ならない。 */
	font-size: 22px; font-weight: 800; padding: 0 142px 0 30px;
}
.sch-plans__technic::before {
	/* Figma 1:1297 書き出しPNGを白タイント変換(Python)してbg-imageで配置 */
	content: '';
	position: absolute; left: 0; top: 0;
	width: 308px; height: 115px;
	background: url(assets/technic-class-white.png) no-repeat left top / 308px 115px;
	pointer-events: none; z-index: 0;
}
.sch-plans__technic span { position: relative; z-index: 1; }
.sch-plans__technic img { position: absolute; right: 16px; bottom: 0; width: 126px; height: auto; z-index: 1; }
.sch-plans__arch {
	position: absolute; bottom: 0; left: 0;
	width: 100%; height: 187px;
	display: block; pointer-events: none;
}

/* ---- 担当講師のごあいさつ ---- */
.sch-greeting {
	position: relative;
	display: flex; align-items: center; justify-content: center; gap: 38px;
	width: max-content; max-width: 100%; margin: 50px auto 0;
}
.sch-greeting__figure { position: relative; flex: none; width: 593px; height: 581px; }
.sch-greeting__bg1  { position: absolute; left: 0;   top: 184px; width: 309px; height: 397px; background: rgba(244,89,129,.1); clip-path: polygon(14% 0%, 100% 0%, 86% 100%, 0% 100%); }
.sch-greeting__bg2  { position: absolute; left: 175px; top: 0;   width: 209px; height: 269px; background: rgba(244,89,129,.3); clip-path: polygon(14% 0%, 100% 0%, 86% 100%, 0% 100%); }
.sch-greeting__acc1 { position: absolute; left: 449px; top: 412px; width: 131px; height: 169px; background: var(--secondary); clip-path: polygon(14% 0%, 100% 0%, 86% 100%, 0% 100%); }
.sch-greeting__acc2 { position: absolute; left: 525px; top: 30px; width: 68px; height: 87px; background: var(--secondary); clip-path: polygon(14% 0%, 100% 0%, 86% 100%, 0% 100%); }
.sch-greeting__photo {
	position: absolute; left: 190px; top: 55px; width: 362px; height: 466px;
	background:
		linear-gradient(180deg, rgba(244,89,129,0) 50%, rgba(244,89,129,1) 100%),
		var(--placeholder);
	clip-path: polygon(14% 0%, 100% 0%, 86% 100%, 0% 100%);
}
.sch-greeting__pname {
	position: absolute; left: 19px; bottom: 15px;
	color: var(--white); font-size: 38px; font-weight: 200; line-height: 1; letter-spacing: .05em;
}
.sch-greeting__body { width: 740px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }

/* ノートPC幅(769〜1199)で左図形(593px固定)が本文枠を圧迫し画像が大きく見える問題を解消。
   figure 内部要素は絶対座標pxで配置されているため width 直接縮小は不可。
   2段ステップで transform: scale（top left基準）＋negative margin でレイアウト枠も連動して縮める。 */
@media (min-width: 1000px) and (max-width: 1199px) {
	.sch-greeting__figure {
		transform: scale(0.88);
		transform-origin: top left;
		margin-right: calc(593px * -0.12);
		margin-bottom: calc(581px * -0.12);
	}
}
@media (min-width: 769px) and (max-width: 999px) {
	.sch-greeting__figure {
		transform: scale(0.72);
		transform-origin: top left;
		margin-right: calc(593px * -0.28);
		margin-bottom: calc(581px * -0.28);
	}
}
.sch-greeting__who { display: flex; align-items: center; gap: 12px; color: var(--secondary); }
.sch-greeting__who .school { font-size: 16px; }
.sch-greeting__who .name { font-size: 21px; font-weight: 700; }
.sch-greeting__bubble {
	position: relative; background: #F8F8F8; border-radius: 20px; padding: 40px;
	font-size: 16px; color: var(--black); line-height: 1.5;
}
.sch-greeting__bubble p + p { margin-top: 1em; }
.sch-greeting__bubble::before {
	content: ""; position: absolute; left: -24px; top: 40px;
	border: 13px solid transparent; border-right-color: #F8F8F8; border-left: 0;
}
.sch-greeting__mascot { position: absolute; top: -10px; right: -30px; width: 130px; height: auto; z-index: 2; }

/* =========================================================================
 * 教室詳細 SP（≤768px）— 縦積みreflow。全幅で横はみ出し0px。
 * ========================================================================= */
@media (max-width: 768px) {
	.sch-secthead__title { font-size: 48px; line-height: 1.1; }  /* レッスン/スケジュール・担当講師の/ごあいさつ＝2行(Figma48) */
	.sch-secthead__eyebrow { font-size: 24px; }

	/* hero（Figma SP node 1:1631 / 帯=375×287・要素はvw=375基準で比例）
	   背景＝SP専用合成(Group10 1:1669・#F45981+#FF9DB6対角+左下透明)。透明部は白の素地が出る。
	   星は帯下端(287)をまたいで下のセクションへスピル → overflow:visible。 */
	.sch-hero {
		height: 76.533vw;               /* 帯=287/375 */
		padding: 34.667vw 0 0;          /* タイトル上端 y130 */
		overflow-x: clip;               /* 星は左右フレーム端で切る（Figma同様） */
		overflow-y: visible;            /* 星は帯下端をまたいで下へスピル */
		/* 地色＝Rectangle42(#F45981)。SP背景画像(Group10)の透明部はこの#F45981が透ける（=Figmaの重ね順） */
		background: #F45981 url(assets/sch-hero-bg-sp.png) top left / 100% auto no-repeat;
	}
	/* SPは viewport=フレームのため、PCの中央寄せステージ／絶対配置タイトルを解除し、
	   従来どおり vw 基準（星=vw座標・タイトル=コンテナpadding）で配置する。 */
	.sch-hero__stage { position: static; width: auto; height: auto; left: auto; transform: none; }
	.sch-hero__inner { position: static; left: auto; top: auto; max-width: none; }
	.sch-hero .loicx-container { padding-left: 8vw; padding-right: 8vw; }  /* タイトル左 x30 */
	.sch-hero__title { font-size: 36px; }
	.sch-hero__sub { font-size: 16px; }
	.sch-hero__star--left   { left: -14.133vw; top: 56.267vw; width: 36.347vw; }  /* x-53 y211 w136.3 */
	.sch-hero__star--right  { left: 72.533vw;  top: 55.733vw; width: 25.533vw; }  /* x272 y209 w95.75 */
	.sch-hero__star--yellow { left: 89.067vw;  top: 68vw;     width: 13.867vw; }  /* x334 y255 w52 */

	/* intro（Figma SP: 見出し20px → 開校日(白pill赤枠ラベル全幅＋曜日○30×30中央寄せ)
	   → 対応クラス(白pill赤枠ラベル全幅＋pill2列×2行・点灯Primary/非点灯#CBCBCB) ） */
	.sch-intro { padding-top: 48px; }
	.sch-intro__title { font-size: 20px; }
	.sch-intro__meta { gap: 30px; }                         /* 開校日ブロック↔対応クラスブロック */
	.sch-badges { flex-wrap: wrap; justify-content: center; gap: 10px; }
	.sch-badges__label { flex: 0 0 100%; width: auto; }     /* ラベルを全幅pillに（自分の行） */
	.sch-class { flex: 1 1 calc(50% - 5px); }               /* クラスpillは2列 */

	/* video/map見出し */
	.sch-secttl { gap: 10px; }
	.sch-secttl__text { font-size: 20px; }
	.sch-secttl__star { width: 64px; height: 64px; }
	.sch-secttl__dog { width: 90px; height: 64px; }
	.sch-embed { height: 210px; font-size: 18px; }
	.sch-embed--map { height: 220px; }

	/* reasons（Figma SP node 1:1831[閉] / 1:256[開]: 7枚縦積み＋続きを読むアコーディオン） */
	.sch-br-sp { display: inline; }                 /* SPの改行(<br class="sch-br-sp">)を全体で有効化 */
	.sch-only-pc { display: none; }
	.sch-only-sp { display: inline; }               /* テクニックボタンのSP文言「テクニッククラスの詳細を見る」 */
	.sch-reasons__title { font-size: 48px; }   /* Figma SP node1:1832=48px（32pxは小さすぎた） */
	.sch-reasons__list { gap: 10px; margin-top: 40px; }
	.sch-reason-row { flex-direction: column; gap: 10px; }
	.sch-reasons__list > *, .sch-reason-row .sch-reason { flex: none; }  /* max-height制限で潰れないよう自然高さを保持 */
	.sch-reason { font-size: 18px; padding: 20px 30px; line-height: 1.2; }
	.sch-reason--wide { min-height: 0; }

	/* 閉状態：上から約4枚＋base色グラデでフェード＋「続きを読む」 */
	.sch-reasons__list { max-height: 312px; overflow: hidden; }
	.sch-reasons__fade {
		display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 170px;
		background: linear-gradient(180deg, rgba(255,244,247,0) 0%, var(--base) 82%);
		pointer-events: none;
	}
	.sch-reasons__image { display: none; }          /* 写真は開いた時だけ表示 */
	.sch-reasons__more {
		display: flex; align-items: center; justify-content: center;
		width: 240px; max-width: 100%; margin: -56px auto 0; padding: 15px 40px;
		background: var(--primary); border-radius: 50px; color: var(--white);
		font-size: 18px; font-weight: 800; line-height: 1.1; cursor: pointer;
		position: relative; z-index: 2;
	}
	.sch-reasons__more .t-close { display: none; }

	/* 開状態：全7枚＋写真(315×180・角丸5)＋「閉じる」 */
	#sch-reasons-toggle:checked ~ .sch-reasons__fold .sch-reasons__list { max-height: none; }
	#sch-reasons-toggle:checked ~ .sch-reasons__fold .sch-reasons__fade { display: none; }
	#sch-reasons-toggle:checked ~ .sch-reasons__image {
		display: block; height: 48vw; border-radius: 5px; margin-top: 10px;
	}
	#sch-reasons-toggle:checked ~ .sch-reasons__more { margin-top: 24px; }
	#sch-reasons-toggle:checked ~ .sch-reasons__more .t-open { display: none; }
	#sch-reasons-toggle:checked ~ .sch-reasons__more .t-close { display: inline; }

	/* voices */
	/* 声: 見出し上に「総合満足度97.4%」(SPのみ)＋見出し3行(袋文字48px) */
	.sch-voices__stat { display: block; text-align: center; color: var(--primary); font-weight: 800; font-size: 24px; line-height: 1; margin-top: -24px; }
	.sch-voices__stat b { font-size: 34px; }
	.sch-voices__title { font-size: 48px; line-height: 1.15; margin-top: 10px; }
	.sch-voice__card { padding: 0 20px 24px; }
	.sch-voice__a { font-size: 15px; }

	/* 下端アーチ（Figma SP: サジッタ≒48.5px=幅の約13%=12.93vw の浅い弧）。
	   PCは1440幅で187px（同比率）だが固定値のためSPで深すぎ→幅比例に補正＋下paddingも縮小。 */
	.sch-reasons { padding-bottom: 72px; }
	.sch-voices::before { height: 12.93vw; top: calc(-12.93vw + 1px); }
	.sch-voices__stat { margin-top: 14px; }   /* 浅いアーチに合わせ、上に出さず帯の下に置く */
	.sch-plans { padding-bottom: 84px; }
	.sch-plans__arch { height: 12.93vw; }

	/* trial: 1列 */
	.sch-trial__title { font-size: 30px; }   /* Figma SP 30px・3行 */
	.sch-trial__grid { gap: 16px; }
	.sch-trial__btn { width: 100%; height: 96px; border-width: 6px; }
	.sch-trial__btn .cls { font-size: 20px; }   /* Figma SP node1:1649 クラス名=20px ExtraBold #393939 */
	.sch-trial__btn .act { font-size: 18px; }   /* 体験レッスン申し込み=18px ExtraBold Primary */

	/* schedule（Figma SP: 「水」＝上部の全幅ピンク帯[315×50・中央]＋行を下に縦積み） */
	.sch-schedule__deco { display: none; }
	.sch-sched { flex-direction: column; gap: 11px; }
	.sch-sched__day { width: auto; height: 50px; font-size: 20px; }   /* 縦バー→上部の全幅帯（align-items:stretchで横いっぱい） */
	.sch-sched__row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 18px; }
	.sch-sched__row .time { width: auto; font-size: 30px; }   /* Figma SP node1:1820 時刻=30px SemiBold600 */
	.sch-sched__row .cls { font-size: 20px; }                 /* Figma SP node1:1824 クラス名=20px SemiBold600（※詳細は16px=.note） */

	/* plans: 1列＋テクニックボタンをスタンダードとライトの間に配置
	   （Figma SP順: 見出し→スタンダード→テクニック→ライト→※注記）。
	   grid を display:contents で解除し、コンテナを flex+order で並べ替え。 */
	.sch-plans__title { font-size: 48px; }
	.sch-plans__sub { font-size: 16px; line-height: 1.4; }   /* Figma16px・「久屋大通本校は／…」2行に収める */
	.sch-plans > .loicx-container { display: flex; flex-direction: column; gap: 20px; }
	.sch-plan-grid { display: contents; }
	.sch-plans .sch-secthead { order: 0; }
	.sch-plan--standard { order: 1; }
	.sch-plans__technic { order: 2; width: 100%; margin-top: 0; font-size: 20px; padding: 0 134px 0 24px; }  /* 右はマスコット分を確保し文字を2行で左に収める */
	.sch-plans__technic span { line-height: 1.35; }
	.sch-plan--light { order: 3; padding-bottom: 30px; }
	.sch-plans__note { order: 4; text-align: left; margin-top: 0; }
	.sch-plan { width: 100%; padding: 30px 20px; }
	.sch-plan__name { font-size: 26px; }
	.sch-plan__price .num { font-size: 36px; }

	/* instructor: 縦積み（Figma SP: ブロックは左右30px余白[幅315]・who行は中央寄せ） */
	.sch-greeting { flex-direction: column; width: auto; margin-inline: 30px; gap: 24px; }
	.sch-greeting__figure { transform: scale(.6); transform-origin: top center; height: 360px; }
	.sch-greeting__body { width: 100%; }
	.sch-greeting__who { justify-content: center; }
	.sch-greeting__bubble::before { display: none; }
	.sch-greeting__mascot { display: none; }
}

/* =========================================================================
 * 全国一覧ページ（店舗検索 / Figma PC 1:1326・SP 1:2001）
 *   accent=Primary固定（店舗検索本体）。共通フッター(CTA→site footer)は footer.php。
 *   構成: hero → タブ(地方アンカー) → 注記バー → 地方ごと[袋文字見出し+星 / 県カード2列 /
 *         オンライン誘導バー] → オンライン校セクション。
 * ========================================================================= */
.natlist { background: var(--base); padding-bottom: 88px; }  /* Figma: 本文→フッター余白88px */
.natlist__inner { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }

/* ---- hero (1440×400 / bg=natlist-hero-bg.png + 星3) -------------------- */
.natlist__hero {
	position: relative;
	height: 400px;
	background: #FF9DB6 url(assets/natlist-hero-bg.png) center top / cover no-repeat;
	overflow: hidden;
}
/* 星はタイトルと同じ中央寄せ1120ボックス(.natlist__inner)基準に配置。
   左右の余白をpx固定にすることで、ビューポート幅が変わってもタイトルとの間隔(約44px)が一定＝
   狭い幅でも左星がタイトルに重ならない（Figma 1440: 左星x-241/右星右端x1443/黄右端x1510）。 */
.natlist__hero .natlist__inner { position: relative; z-index: 1; height: 100%; }
.natlist__star { position: absolute; z-index: 1; pointer-events: none; }
.natlist__star--l { left:  -401px; top: 103px; width: 533px; }  /* inner左 -401 = 1440でx-241 */
.natlist__star--r { right: -163px; top: 100px; width: 350px; }  /* inner右 +163 = 右端x1443 */
.natlist__star--y { right: -230px; top: 268px; width: 191px; }  /* inner右 +230 = 右端x1510 */
.natlist__star-sp { display: none; }   /* SP hero stars（≤768で表示） */
.natlist-br-sp { display: none; }      /* SP限定の改行 */
.natlist__title {
	position: absolute; top: 170px; left: 0; z-index: 2;
	color: var(--white);
	font-weight: 800;
	font-size: 50px;
	line-height: 1.3;
	letter-spacing: .05em;
}

/* ---- タブ（地方アンカー）＋注記バー ------------------------------------ */
.natlist__tabs {
	display: flex; flex-wrap: wrap; gap: 10px 20px;
	padding: 100px 0 0;               /* hero下 → tabs (Figma y500=hero400+100) */
	list-style: none; margin: 0;
}
.natlist__tabs > li { margin: 0; }
.natlist-tab,
.natlist__note {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	width: 360px; padding: 30px;
	background: var(--white); border-radius: 5px;
	box-shadow: 0 10px 40px rgba(244, 89, 129, .1);
	font-weight: 800; font-size: 24px; line-height: 1.2; color: var(--black);
}
.natlist__note {
	width: 100%; margin-top: 20px;
}
/* 語中で改行させたくない語に付ける共通ユーティリティ。
   2026-07-31「オンライン校」→「オンラインENJOY校」への改称で文字数が増え、
   SP幅で「オンライン／ENJOY校」のように途中で割れるのを防ぐ。 */
.loicx-nowrap { white-space: nowrap; }
/* flexボタン(.area-search__online .loicx-btn 等)の中でラベルを1つのフレックスアイテムに
   まとめるためのラッパ。分けると「自宅でレッスン！」と語が別アイテムになって崩れる。 */
.loicx-btn__label { display: block; }
.natlist__note-em { color: var(--primary); white-space: nowrap; }
.natlist__note-sep { padding: 0 .1em; }
.natlist-dl {                     /* 下向き矢印（タブ・注記） */
	flex: none; width: 12px; height: 12px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); margin-top: -4px;
}

/* ---- 地方セクション ---------------------------------------------------- */
.natlist__regions { display: flex; flex-direction: column; gap: 70px; padding: 60px 0 0; }
.natlist-region { display: flex; flex-direction: column; gap: 30px; }
.natlist-region__head { display: flex; align-items: center; gap: 10px; }
.natlist-region__star { flex: none; width: 50px; height: 48px; }
.natlist-region__title {
	font-weight: 800; font-size: 48px; line-height: 1.1; letter-spacing: .05em;
	color: var(--white);
	-webkit-text-stroke: 4px var(--primary); paint-order: stroke fill;  /* Figma実測=可視2px。stroke中央寄せで内側半分はfill下に隠れる→4pxで可視2px */
}

.natlist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.natlist-card {
	display: flex; align-items: center; gap: 30px;
	padding: 50px; background: var(--white); border-radius: 10px;
	box-shadow: 0 10px 40px rgba(244, 89, 129, .1);
}
.natlist-card__body { flex: 1 1 auto; display: flex; flex-direction: row; align-items: center; gap: 30px; }
.natlist-card__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 20px; }
.natlist-card__name { font-size: 24px; font-weight: 700; letter-spacing: .05em; color: var(--black); }
.natlist-card__name b { font-weight: 800; }
.natlist-card__note { font-size: 20px; font-weight: 700; letter-spacing: .05em; color: var(--black); }
.natlist-card__link { font-size: 16px; font-weight: 700; letter-spacing: .05em; color: var(--primary); }

/* 丸枠の右矢印ボタン */
.natlist-arrow {
	flex: none; width: 36px; height: 36px; border-radius: 60px;
	border: 1px solid var(--primary); background: var(--white);
	display: grid; place-items: center;
}
.natlist-arrow::before {
	content: ""; width: 8px; height: 8px;
	border-top: 2px solid var(--primary); border-right: 2px solid var(--primary);
	transform: translateX(-2px) rotate(45deg);
}
.natlist-arrow--sm { width: 24px; height: 24px; }
.natlist-arrow--sm::before { width: 6px; height: 6px; }

/* オンライン誘導バー（地方ごと） */
.natlist-online-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 30px 50px; background: var(--white); border-radius: 5px;
	box-shadow: 0 10px 40px rgba(244, 89, 129, .1);
	font-weight: 800; font-size: 24px; line-height: 1.2; color: var(--black);
}

/* ---- オンライン校セクション ------------------------------------------- */
.natlist-online { display: flex; flex-direction: column; gap: 30px; padding: 70px 0 0; }
.natlist-online__card {
	padding: 50px; background: var(--white); border-radius: 10px;
	box-shadow: 0 10px 40px rgba(244, 89, 129, .1);
	display: flex; flex-direction: column; gap: 20px;
}
.natlist-online__title { font-weight: 800; font-size: 30px; letter-spacing: .05em; color: var(--black); }
.natlist-online__lead { font-weight: 700; font-size: 20px; letter-spacing: .05em; color: var(--black); }
.natlist-online__pills { display: flex; gap: 30px; }
.natlist-pill {
	flex: 1 1 0; min-height: 94px; padding: 24px 30px;
	background: var(--base); border-radius: 5px;
	display: grid; place-items: center; text-align: center;
	font-weight: 800; font-size: 20px; line-height: 1.2; letter-spacing: .05em;
	color: var(--secondary);
}
.natlist-online__img {
	height: 350px; border-radius: 5px; background: var(--placeholder);
}
img.natlist-online__img {
	display: block; width: 100%; object-fit: cover;
}
.natlist-online__detail {
	display: flex; align-items: center; gap: 10px;
	font-weight: 700; font-size: 16px; letter-spacing: .05em; color: var(--primary);
}

/* ====================== SP (≤768) ====================== */
@media (max-width: 768px) {
	.natlist { padding-bottom: 51px; }     /* Figma SP: 本文→フッター余白51px */
	.natlist__inner { width: calc(100% - 60px); }

	.natlist__hero {
		height: 287px; min-height: 287px;
		background: #F45981 url(assets/natlist-hero-bg-sp.png) top center / 100% auto no-repeat;
		overflow-x: clip; overflow-y: visible;  /* 横はフレーム切り(はみ出し0px)／縦は星がFV下端から次セクション上にはみ出して見える（Figma準拠） */
	}
	.natlist__star { display: none; }      /* PC星はSPで非表示（SPは .natlist__star-sp） */
	.natlist__hero .natlist__inner { position: static; }
	.natlist__title {
		position: static; padding: 99px 0 0;
		font-size: 30px; line-height: 1.2;
	}
	.natlist-br-sp { display: inline; }
	/* SP hero stars（375フレーム基準・%で390にも追従）。z-index高めで次セクション上に重ねる */
	.natlist__star-sp { display: block; position: absolute; z-index: 5; }
	.natlist__star-sp--l { left: -14.1%; top: 73.5%;  width: 36.3%; }   /* x-53 y211 w136 */
	.natlist__star-sp--r { left: 72.5%;  top: 72.8%;  width: 25.5%; }   /* x272 y209 w96 */
	.natlist__star-sp--y { left: 89%;    top: 88.9%;  width: 13.9%; }   /* x334 y255 w52 */

	.natlist__tabs { flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 30px 0 0; }
	.natlist-tab { width: 100%; font-size: 24px; }
	/* 18px→16px / 24px→20px: 「オンラインENJOY校」への改称で1行に収まらなくなったため縮小（2026-07-31） */
	.natlist__note { font-size: 16px; line-height: 1.6; padding: 30px 24px; gap: 10px; }  /* 「全国どこからでも受講できる」を1行に収めるため横padding/gapを詰める */
	.natlist__note-lead { display: block; font-size: 24px; line-height: 1.2; }
	.natlist__note-sep { display: none; }

	.natlist__regions { gap: 50px; padding: 50px 0 0; }
	.natlist-region { gap: 20px; align-items: stretch; }
	.natlist-region__head { justify-content: flex-start; }
	.natlist-region__title { font-size: 36px; }

	.natlist-grid { grid-template-columns: 1fr; gap: 10px; }
	.natlist-card { padding: 30px; gap: 16px; }
	.natlist-card__body { gap: 16px; }
	.natlist-card__name { font-size: 24px; }
	.natlist-card__note { font-size: 16px; }   /* Figma SP=16px（PCは20px） */

	.natlist-online-bar { padding: 30px; font-size: 20px; line-height: 1.2; }

	.natlist-online { gap: 20px; padding: 50px 0 0; }
	.natlist-online__card { padding: 30px; }
	.natlist-online__lead { font-size: 16px; }
	.natlist-online__pills { flex-direction: column; gap: 10px; }
	.natlist-pill { width: 100%; }
}

/* =========================================================================
 * 都道府県ページ（taxonomy-school_area.php／school_area タクソノミー・子ターム）
 *   全国一覧(.natlist-*)と同じデザイン言語（ピンクhero＋白カード＋ソフトシャドウ）を流用。
 *   地方（親ターム）ビューは natlist-card/natlist-grid をそのまま流用（PHP側で指定）。
 * ========================================================================= */
.tax-area { background: var(--base); padding-bottom: 88px; }
.tax-area__hero {
	position: relative; overflow: hidden;
	padding: 150px 0 56px;
	background: linear-gradient(160deg, var(--primary) 0%, var(--secondary) 100%);
	text-align: center;
}
.tax-area__breadcrumb {
	margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.8);
}
.tax-area__breadcrumb a { text-decoration: underline; text-underline-offset: 2px; }
.tax-area__title {
	margin: 14px 0 0; color: var(--white); font-weight: 800; font-size: 40px; line-height: 1.3; letter-spacing: .04em;
}
.tax-area__lead {
	max-width: 720px; margin: 18px auto 0; padding: 0 24px;
	color: rgba(255,255,255,.95); font-size: 15px; line-height: 1.9;
}
.tax-area__image { max-width: 900px; margin: 30px auto 0; padding: 0 24px; }
.tax-area__image img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.25); }

.tax-area__body { padding-top: 70px; }
.tax-area__empty { text-align: center; font-size: 15px; color: var(--black); padding: 40px 0; }

.school-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.school-card {
	background: var(--white); border-radius: 10px; overflow: hidden;
	box-shadow: 0 10px 40px rgba(244, 89, 129, .12);
}
.school-card__link { display: flex; flex-direction: column; height: 100%; }
.school-card__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--base); }
.school-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.school-card__link:hover .school-card__thumb img { transform: scale(1.05); }
.school-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 28px; }
.school-card__name { font-size: 20px; font-weight: 800; letter-spacing: .04em; color: var(--black); }
.school-card__address { font-size: 13px; color: rgba(57,57,57,.7); line-height: 1.7; }
.school-card__more {
	margin-top: auto; align-self: flex-start;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 22px;
	background: var(--primary); color: var(--white);
	border-radius: 50px;
	font-size: 14px; font-weight: 700;
	transition: background-color .2s, transform .2s;
}
.school-card__more::after { content: "→"; font-weight: 800; }
.school-card__link:hover .school-card__more { background: var(--secondary); transform: translateX(2px); }

/* 都道府県ページ内の「全国教室を探す」導線見出し（テンプレ側で area-search 前に出す場合の共通見出し） */
.tax-area__more-title { margin: 0 0 20px; font-size: 22px; font-weight: 800; color: var(--black); text-align: center; }

@media (max-width: 768px) {
	.tax-area__hero { padding: 96px 0 36px; }
	.tax-area__title { font-size: 26px; }
	.tax-area__lead { font-size: 14px; }
	.tax-area__body { padding-top: 44px; }
	.school-card-grid { grid-template-columns: 1fr; gap: 18px; }
	.school-card__name { font-size: 18px; }
}

/* =========================================================================
 * テクニッククラス（固定ページ /technique/・専用テンプレ page-technique.php）
 *   旧サイト構成順を校舎ページ(.sch-*)デザイン流用で再現。FVはFigma クラス紹介(technic)。
 * ========================================================================= */
/* 配色：.sch-* は var(--primary)/var(--secondary) を使うので、ラッパーで technic 色に
   上書きしてセクション全体をオレンジ化（袋文字フチ・小見出し・声/講師の装飾色など）。 */
.tech-detail { --primary: #FF5900; --secondary: #FF7925; }

/* ---- FV（Figma クラス紹介・technic）：#FF7925 + 折りデコ + キャラ ---- */
/* 縦幅はエンジョイFV(約705px)に合わせる＝下余白を詰める（技キャラが縦長で背が高い分）。 */
.sec-hero--technic {
	background-color: #FF7925;
	background-image: url(assets/technic-fv-deco.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100% auto;
	padding-bottom: 34px;
}
.tech-detail .sec-hero__image { width: 360px; }   /* technicキャラは縦長(1155×1516)＝enjoy(435)より細く */

/* ---- 画像を縦に2枚並べる（スケジュール／料金） ---- */
.tech-imgstack { display: flex; flex-direction: column; align-items: center; gap: 36px; margin-top: 40px; }
.tech-imgstack img { display: block; width: 100%; max-width: 760px; height: auto; border-radius: 12px; }
.tech-imgstack--narrow img { max-width: 460px; border-radius: 0; }
/* 料金カード2枚：PCは左右並び／SPは上下（下のメディアクエリで縦積み） */
.tech-price-pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 28px; margin-top: 40px; }
.tech-price-pair img { display: block; width: calc(50% - 14px); max-width: 560px; height: auto; border-radius: 12px; }
/* スケジュール：各画像の上に週ラベル、画像群の下に注記（中央）＋下部余白 */
.tech-schedule { padding-bottom: 90px; }
.tech-schedule__block { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.tech-schedule__week { margin: 0; text-align: center; font-size: 24px; font-weight: 800; color: var(--technic); letter-spacing: .04em; }
.tech-schedule__note { margin-top: 30px; text-align: center; font-size: 14px; line-height: 1.7; color: var(--ink-strong); }

/* ---- レッスンで習う基本技一覧の表 ---- */
.loicx-skill-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 15px; line-height: 1.6; text-align: left; }
.loicx-skill-table th, .loicx-skill-table td { border: 1px solid #F1D3BE; padding: 10px 12px; vertical-align: top; }
.loicx-skill-table thead th { background: var(--base); color: var(--technic); font-weight: 800; white-space: nowrap; }
.loicx-skill-table td:nth-child(2), .loicx-skill-table td:nth-child(3) { white-space: nowrap; color: var(--technic); font-weight: 700; }
.loicx-skill-table tbody td:first-child { font-weight: 800; }

/* ---- 23技を3つ見せて「続きを読む」アコーディオン（CSSチェックボックス・JS不要） ---- */
/* 見出し上部に余白。fold高さ=ヘッダ46+3行（〜3つ目ジュッテ末205px）＝3つ目から下をグラデで隠す。 */
.tech-skills { padding-top: 80px; }
.tech-skills .sch-secthead { margin-bottom: 30px; }
.tech-skills__fold { position: relative; max-height: 205px; overflow: hidden; }
.tech-skills__toggle:checked ~ .tech-skills__fold { max-height: none; }
.tech-skills__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
.tech-skills__toggle:checked ~ .tech-skills__fold .tech-skills__fade { display: none; }
.tech-skills__more { display: block; width: 320px; max-width: 100%; margin: 24px auto 0; padding: 14px 0; text-align: center; cursor: pointer; border: 2px solid var(--technic); border-radius: 50px; color: var(--technic); font-weight: 800; font-size: 17px; transition: background-color .3s, color .3s; }
.tech-skills__more:hover { background: var(--technic); color: #fff; }
.tech-skills__more .t-close { display: none; }
.tech-skills__toggle:checked ~ .tech-skills__more .t-open { display: none; }
.tech-skills__toggle:checked ~ .tech-skills__more .t-close { display: inline; }

/* ---- 講師プロフィール：肩書きライン＋実績リスト ---- */
.tech-instructor .sch-greeting__bubble .role { color: var(--technic); font-weight: 800; margin-bottom: 6px; }
.tech-instructor .sch-greeting__bubble ul { margin: 0; padding-left: 1.3em; list-style: disc; }
.tech-instructor .sch-greeting__bubble li { margin: 2px 0; }
.tech-achieve__row { display: flex; }
.tech-achieve__year { flex: 0 0 74px; }

/* ---- 料金注記は中央揃え（.sch-plans__note は既定 right／SP left のため上書き） ---- */
.tech-plans .sch-plans__note { text-align: center; margin-top: 24px; }
/* ---- マット購入・月会費の追記ボックス（スポーツ保険注記の下） ---- */
.tech-plans__mat { max-width: 640px; margin: 28px auto 0; background: var(--base); border-radius: 16px; padding: 26px 32px; text-align: center; }
.tech-plans__mat-note { font-size: 16px; font-weight: 800; color: var(--primary); }
.tech-plans__mat-price { margin-top: 12px; font-size: 18px; font-weight: 700; color: var(--black); }
.tech-plans__mat-price span { color: var(--primary); font-weight: 800; white-space: nowrap; }
@media (max-width: 768px) {
	/* SPは .sch-plans__note が order:4 で最下部に回るため、追記ボックスは order:5 で注記の直下に置く */
	.tech-plans__mat { order: 5; padding: 22px 20px; }
	.tech-plans__mat-price { font-size: 16px; }
}

/* ---- 料金セクション最下部の「無料体験予約・ご相談」CTAボタン ---- */
.tech-plans__cta { text-align: center; margin-top: 36px; }

/* ---- プロ講師による個別レッスン（テキスト＋誘導ボタン・上部余白） ---- */
.tech-private { text-align: center; padding: 80px 0 60px; }
.tech-private__title { font-size: 36px; margin-bottom: 20px; }
.tech-private__lead { font-size: 18px; font-weight: 700; color: var(--black); margin-bottom: 28px; }
.tech-private__btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 44px; background: var(--technic); color: #fff; font-weight: 800; font-size: 18px; border-radius: 50px; box-shadow: 0 4px 15px rgba(207,72,0,.4); transition: opacity .3s; }
.tech-private__btn:hover { opacity: .88; }
.tech-recruit { padding-top: 60px; background: var(--base); }

/* ---- セクション順が校舎と異なるための余白・アーチ・配色補正 ---- */
/* schedule/plans の base(淡ピンク)背景を淡オレンジに（オレンジテーマと調和）。skill表thead等も連動。 */
.tech-detail { --base: #FFF1E8; }
/* 特徴(.sch-reasons)の下286px(声アーチ用)→講師が続くので縮小 */
.tech-detail .sch-reasons { padding-bottom: 96px; }
/* 料金(.sch-plans)の下237px(下端アーチ用)→アーチ無しなので縮小 */
.tech-plans { padding-bottom: 60px; }
.tech-plans .sch-plans__arch { display: none; }
/* 声(.sch-voices)：上が白セクションのためドームアーチ(::before)＋上方向transformは不要
   （これらが「続きを読む」ボタンに覆い被さりクリックを妨げていた）→無効化。上部に余白。 */
.tech-voices::before { display: none; }
.tech-voices { padding-top: 120px; }
@media (min-width: 769px) {
	.tech-voices > .loicx-container { transform: none; }
	.tech-voices { margin-bottom: 0; }
}
/* 講師(.sch-instructor)：見出し上部に余白 */
.tech-instructor { padding-top: 80px; }

/* ---- チア専用ポジショニングマット（特徴と講師の間・新規コンテンツ） ---- */
.tech-mat { padding-top: 80px; padding-bottom: 80px; }
/* 見出し＝キャッチ＋袋文字タイトル＋サブ見出しの3段。タイトルは長いので48→40pxに */
.tech-mat__head { gap: 14px; }
.tech-mat__catch { font-size: 24px; font-weight: 800; color: var(--primary); line-height: 1.4; }
.tech-mat__head .sch-secthead__title { font-size: 40px; }
.tech-mat__lead { font-size: 18px; font-weight: 500; color: #555; line-height: 1.7; }
.tech-mat__lesson { margin-top: 48px; }
.tech-mat__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tech-mat__photos img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; display: block; }
.tech-mat__text { margin-top: 36px; display: flex; flex-direction: column; gap: 18px; }
.tech-mat__text p { font-size: 18px; line-height: 1.9; color: var(--black); font-weight: 500; }
.tech-mat__about { margin-top: 72px; }
.tech-mat__subhead { text-align: center; font-size: 30px; font-weight: 800; color: var(--primary); line-height: 1.4; }
.tech-mat__aboutgrid { margin-top: 40px; display: grid; grid-template-columns: 440px 1fr; gap: 48px; align-items: start; }
.tech-mat__matfig img { width: 100%; border-radius: 20px; display: block; }
.tech-mat__abouttext { display: flex; flex-direction: column; gap: 18px; }
.tech-mat__abouttext p { font-size: 18px; line-height: 1.9; color: var(--black); font-weight: 500; }
.tech-mat__spec { margin-top: 8px; background: var(--base); border-radius: 16px; padding: 24px 28px; }
.tech-mat__spec-row { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,89,0,.18); }
.tech-mat__spec-row:last-child { border-bottom: none; }
.tech-mat__spec dt { flex: none; width: 86px; font-weight: 800; color: var(--primary); font-size: 16px; line-height: 1.7; }
.tech-mat__spec dd { flex: 1; font-size: 16px; line-height: 1.7; color: var(--black); }

/* ---- 横スライダー（講師＝一人ずつ／声＝1枚ずつ。CSS scroll-snap＋最小JS） ---- */
.tech-slider { position: relative; max-width: 1168px; margin: 40px auto 0; }
.tech-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.tech-slider__track::-webkit-scrollbar { display: none; }
/* min-width:0＝flexアイテムが内容(声760px/講師figure593px)まで広がるのを防ぐ（SPで幅超過→見切れ対策） */
.tech-slider__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; display: flex; justify-content: center; }
.tech-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 56px; height: 56px; border: none; border-radius: 50%; background: var(--technic); cursor: pointer; box-shadow: 0 4px 12px rgba(207,72,0,.35); transition: opacity .25s; }
.tech-slider__nav::before { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; border-top: 3px solid #fff; border-right: 3px solid #fff; }
.tech-slider__nav--prev { left: -6px; }
.tech-slider__nav--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.tech-slider__nav--next { right: -6px; }
.tech-slider__nav--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.tech-slider__nav[disabled] { opacity: .3; cursor: default; }
/* 声カードはスライド内で中央寄せ（既存 .sch-voice の margin auto を活かす） */
.tech-slider--voices .sch-voice { margin-top: 0; }
/* Qタブ(.sch-voice__q:first-child)が-25pxでカード上にはみ出す→トラックのoverflow-y(auto)で
   切れるため、トラック上部に余白を入れて見切れを防ぐ（保護者の声の一番上の見出し対策）。 */
.tech-slider--voices .tech-slider__track { padding-top: 60px; }
.tech-slider--instr .sch-greeting { margin-inline: auto; }
@media (max-width: 768px) {
	.tech-slider__nav { width: 44px; height: 44px; }
	.tech-slider__nav--prev { left: 2px; }
	.tech-slider__nav--next { right: 2px; }
	/* 講師figure(固定593×581)はSPでスライド幅を超え見切れる→実寸を縮小しスライド内に収める。
	   transform-origin:top left＋width/heightを縮尺値にして「レイアウト箱＝視覚」を一致させる。 */
	.tech-slider--instr .sch-greeting { width: 320px; max-width: calc(100vw - 40px); margin-inline: auto; gap: 16px; }
	.tech-slider--instr .sch-greeting__figure { transform: scale(.5); transform-origin: top left; width: 297px; height: 291px; margin: 0 auto; }
	.tech-slider--instr .sch-greeting__body { width: 100%; }
}

@media (max-width: 768px) {
	.tech-detail .sec-hero__image { width: 200px; }
	.loicx-skill-table { font-size: 13px; }
	.loicx-skill-table th, .loicx-skill-table td { padding: 7px 8px; }
	.tech-private__title { font-size: 26px; }
	.tech-imgstack--narrow img { max-width: 92%; }
	/* 料金カード2枚：SPは上下に縦積み */
	.tech-price-pair { gap: 24px; }
	.tech-price-pair img { width: 100%; max-width: 460px; }
	/* チア専用ポジショニングマット */
	.tech-mat { padding-top: 56px; padding-bottom: 56px; }
	.tech-mat__catch { font-size: 17px; }
	.tech-mat__head .sch-secthead__title { font-size: 28px; }
	.tech-mat__lead { font-size: 15px; }
	.tech-mat__lesson { margin-top: 32px; }
	.tech-mat__photos { grid-template-columns: 1fr; gap: 16px; }
	.tech-mat__text { margin-top: 28px; gap: 16px; }
	.tech-mat__text p,
	.tech-mat__abouttext p { font-size: 16px; line-height: 1.85; }
	.tech-mat__about { margin-top: 48px; }
	.tech-mat__subhead { font-size: 22px; }
	.tech-mat__aboutgrid { margin-top: 28px; grid-template-columns: 1fr; gap: 28px; }
	.tech-mat__matfig { max-width: 420px; margin: 0 auto; }
	.tech-mat__spec { padding: 20px; }
	.tech-mat__spec dt { width: 74px; font-size: 15px; }
	.tech-mat__spec dd { font-size: 15px; }
}

/* =========================================================================
 * 幼稚園課外教室ページ（/kindergarten/）
 *   FV=校舎ページ準拠のピンクスタイル（accent=pink）。Figma 1:950 と同じ
 *   ピンク背景＋3つの星装飾を multi-background で再現。本文の見出し・ボタン・装飾は
 *   accent=pink で自動的に Primary #E80F47 系へシフト。
 * ========================================================================= */
/* FV: 校舎ページの .sch-hero と同じピンク背景＋スター装飾。
   背景画像は要素boxでクリップされるため、スター3枚は ::after に分離して
   FV下端より下にスピルさせる（左大白星はFV下に最大235pxはみ出す）。
   ※ 同パターンは /messages-from-parents/ /frequently-asked-questions/ /instructors-wanted/
   /recruiting-requests-for-new-school-openings/ でも共有 */
.page-kindergarten .sec-hero,
.page-messages-from-parents .sec-hero,
.page-frequently-asked-questions .sec-hero,
.page-instructors-wanted .sec-hero,
.page-recruiting-requests-for-new-school-openings .sec-hero,
.page-instructor-introduction .sec-hero,
.page-contact .sec-hero {
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
	height: 400px;
	padding: 170px 0 0;
	background-color: #FF9DB6;
	background-image: url(assets/sch-hero-bg.png);
	background-position: center top;
	background-size: 1440px 400px;
	background-repeat: no-repeat;
	clip-path: none !important;
}
.page-kindergarten .sec-hero::after,
.page-messages-from-parents .sec-hero::after,
.page-frequently-asked-questions .sec-hero::after,
.page-instructors-wanted .sec-hero::after,
.page-recruiting-requests-for-new-school-openings .sec-hero::after,
.page-instructor-introduction .sec-hero::after,
.page-contact .sec-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	bottom: -250px;          /* 左大白星(top:103+h:532=635)がFV外+235にはみ出すぶんを内包 */
	z-index: 2;
	pointer-events: none;
	background-image:
		url(assets/star-yellow.png),
		url(assets/star-pink-white.png),
		url(assets/star-pink-white.png);
	/* viewport中央基準のoffset: Figma 1440座標(left:1319/1093/-241) − 720(=フレーム中央)。
	   背景画像の position は length値で「画像左端の絶対位置」となるため 50vw 起点で計算。
	   ※ %値だと(コンテナ幅 − 画像幅) ベースになり Figma 座標と合わない。 */
	background-position:
		calc(50vw + 599px) 268px,
		calc(50vw + 373px) 100px,
		calc(50vw - 961px) 103px;
	background-size:
		191px auto,
		350px auto,
		532px auto;
	background-repeat: no-repeat;
}
/* ノートPC幅: viewport端基準にスター位置を切替（校舎FVと同じ手法） */
@media (min-width: 769px) and (max-width: 1439px) {
	.page-kindergarten .sec-hero::after,
	.page-messages-from-parents .sec-hero::after,
	.page-frequently-asked-questions .sec-hero::after,
	.page-instructors-wanted .sec-hero::after,
	.page-recruiting-requests-for-new-school-openings .sec-hero::after,
	.page-instructor-introduction .sec-hero::after,
	.page-contact .sec-hero::after {
		bottom: -120px;       /* 左白星(380px)がFV下に最大90pxはみ出す */
		/* 黄星は校舎FV狭幅と同じく右端アンカー＋top基準でFV内に収める
		   （bottom -Npx指定だとpseudo範囲外でbg-clip境界で下半分が消えるため） */
		background-position:
			right -50px top 240px,
			right -40px top 100px,
			left -120px top 110px;
		background-size:
			140px auto,
			260px auto,
			380px auto;
	}
	/* 校舎FVと同じ：狭幅でも最低160pxの左padding（左スター右端から離す） */
	.page-kindergarten .sec-hero__inner,
	.page-messages-from-parents .sec-hero__inner,
	.page-frequently-asked-questions .sec-hero__inner,
	.page-instructors-wanted .sec-hero__inner,
	.page-recruiting-requests-for-new-school-openings .sec-hero__inner,
	.page-instructor-introduction .sec-hero__inner,
	.page-contact .sec-hero__inner {
		padding-left: max(160px, calc((100% - 1120px) / 2 + 24px));
	}
}
/* FVタイトルは2行構成。\nを反映するためpre-line＋PC/SP共に標準70/36pxから縮小 */
.page-kindergarten .sec-hero__title { font-size: 46px; line-height: 1.35; margin-bottom: 0; white-space: pre-line; color: #fff; }
.page-kindergarten .sec-hero__lead { color: #fff; }
.page-kindergarten .sec-hero__body,
.page-messages-from-parents .sec-hero__body,
.page-frequently-asked-questions .sec-hero__body,
.page-instructors-wanted .sec-hero__body,
.page-recruiting-requests-for-new-school-openings .sec-hero__body,
.page-contact .sec-hero__body { width: 100%; }
/* 保護者メッセージ/FAQ/講師募集/新規開校も校舎風ピンクFV：タイトル/リードを白文字に */
.page-messages-from-parents .sec-hero__title { color: #fff; }
.page-messages-from-parents .sec-hero__lead { color: #fff; }
.page-frequently-asked-questions .sec-hero__title { color: #fff; }
.page-frequently-asked-questions .sec-hero__lead { color: #fff; }
/* 新規開校はリードが2行のため、タイトル/リードを縮小してFV内に収める */
.page-recruiting-requests-for-new-school-openings .sec-hero__title { color: #fff; font-size: 54px; line-height: 1.2; margin-bottom: 16px; }
.page-recruiting-requests-for-new-school-openings .sec-hero__lead { color: #fff; font-size: 22px; line-height: 1.5; white-space: pre-line; }
.page-recruiting-requests-for-new-school-openings .sec-rich-text.ns-head { margin-top: 50px; padding-bottom: 40px; }
.page-recruiting-requests-for-new-school-openings .sec-rich-text.ns-head .sec-rich-text__body p { font-size: 24px; font-weight: 700; color: var(--primary); }
/* 講師募集はタイトル自体が2行(\n含む長文)のため、サイズを縮小しFV内に収める */
.page-instructors-wanted .sec-hero__title { color: #fff; font-size: 36px; line-height: 1.4; margin-bottom: 0; white-space: pre-line; }
.page-instructors-wanted .sec-hero__lead { color: #fff; }
.page-instructor-introduction .sec-hero__title { color: #fff; font-size: 46px; line-height: 1.3; margin-bottom: 10px; }
.page-instructor-introduction .sec-hero__lead { color: #fff; font-size: 16px; line-height: 1.7; }
.page-contact .sec-hero__title { color: #fff; font-size: 46px; line-height: 1.3; margin-bottom: 0; }
.page-kindergarten .sec-rich-text { padding: 60px 0 20px; background: var(--base); }
.page-kindergarten .sec-rich-text__body { text-align: left; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
/* メインバナー上の導入見出し */
.kg-intro-head {
	text-align: center; font-weight: 800; font-size: 30px; line-height: 1.55;
	color: var(--accent); margin: 0 0 28px; letter-spacing: .02em;
}
/* 画像ネイティブ768×512を等倍以下で表示してボケを回避 */
.kg-banner { margin: 0 auto 56px; max-width: 768px; }
.kg-banner img { width: 100%; height: auto; border-radius: 16px; display: block; }
/* YouTube埋め込み（16:9レスポンシブ） */
.kg-youtube {
	position: relative; width: 100%; max-width: 880px; margin: 16px auto 32px;
	aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
	box-shadow: 0 6px 18px rgba(0,0,0,.1);
}
.kg-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kg-section { margin: 0 auto 72px; }
/* 最終お問い合わせCTAの下余白を圧縮 */
.kg-section.kg-cta-band--last { margin-bottom: 8px; }
.kg-section__title {
	font-weight: 800; font-size: 30px; line-height: 1.4; text-align: center;
	color: var(--accent); margin: 0 0 24px; letter-spacing: .04em;
	display: flex; align-items: center; justify-content: center; gap: 14px;
}
.kg-section__title::before, .kg-section__title::after {
	content: ""; flex: 1; max-width: 80px; height: 3px;
	background: color-mix(in srgb, var(--accent) 35%, #fff); border-radius: 2px;
}
.kg-section__lead { text-align: center; font-size: 18px; margin: 0 0 24px; color: var(--black); font-weight: 600; }
.kg-section__note { font-size: 14px; color: #666; text-align: center; margin: 8px 0 16px; }
.page-kindergarten .kg-section p { line-height: 1.85; font-size: 16px; margin: 0 0 16px; }
/* PCのみ中央寄せ（SPは既定の左寄せ） */
@media (min-width: 769px) { .page-kindergarten .kg-center-pc { text-align: center; } }
.kg-callout {
	background: #fff; border-left: 5px solid var(--accent);
	padding: 18px 22px; border-radius: 10px; font-weight: 700; margin: 24px 0 0 !important;
}
/* 導入済みの幼稚園・保育園リスト */
.kg-kindergartens {
	background: #fff; border: 2px solid color-mix(in srgb, var(--accent) 25%, #fff);
	border-radius: 16px; padding: 26px 30px; text-align: center; font-weight: 700;
	line-height: 2 !important; margin: 0 !important; box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.kg-merits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 16px; }
.kg-merit {
	background: #fff; border: 2px solid color-mix(in srgb, var(--accent) 25%, #fff);
	border-radius: 16px; padding: 28px 24px; box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.kg-merit__title { color: var(--accent); font-weight: 800; font-size: 19px; margin: 0 0 12px; line-height: 1.4; }

.kg-cta-band {
	background: #fff; border-radius: 18px; padding: 36px 28px; text-align: center;
	box-shadow: 0 4px 14px rgba(0,0,0,.06); border: 2px solid color-mix(in srgb, var(--accent) 20%, #fff);
}
.kg-cta-band p { text-align: center; }
.kg-cta-btns { text-align: center; margin: 20px 0 0 !important; }
.kg-pill-btn {
	display: inline-block; padding: 16px 40px; background: var(--accent); color: #fff !important;
	border-radius: 999px; font-weight: 800; font-size: 17px; text-decoration: none;
	transition: transform .2s, background-color .2s; box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.kg-pill-btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 85%, #000); }

/* メリット見出し下の写真（ネイティブ1479×1109・PCは900px、SPは横幅100%） */
.kg-merits-image { margin: 8px auto 24px; max-width: 640px; }
.kg-merits-image img { width: 100%; height: auto; border-radius: 14px; display: block; }
/* 課外教室の様子は4枚に変更したため2×2グリッド */
.kg-photogrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; max-width: 900px; margin-left: auto; margin-right: auto; }
.kg-photogrid figure { margin: 0; }
.kg-photogrid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; display: block; }

.kg-voices-link { display: block; max-width: 480px; margin: 20px auto 0; transition: transform .2s; }
.kg-voices-link:hover { transform: scale(1.02); }
.kg-voices-link img { width: 100%; height: auto; border-radius: 14px; display: block; box-shadow: 0 4px 12px rgba(0,0,0,.08); }

/* 特徴セクションの見出し下バナー（ネイティブ768×367の等倍以下で表示） */
.kg-features-banner { margin: 16px auto 24px; max-width: 768px; }
.kg-features-banner img { width: 100%; height: auto; border-radius: 14px; display: block; }
.kg-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 16px; }
.kg-feature {
	background: #fff; border-radius: 14px; padding: 24px 26px;
	box-shadow: 0 2px 8px rgba(0,0,0,.05); border-top: 4px solid var(--accent);
}
.kg-feature h3 { color: var(--accent); font-weight: 800; font-size: 18px; margin: 0 0 10px; }
.kg-feature p { font-size: 15px; line-height: 1.75; margin: 0; }

.kg-tel { text-align: center; margin: 20px 0 0 !important; font-size: 16px; }
.kg-tel a {
	display: inline-block; margin-top: 6px; font-size: 32px; font-weight: 900;
	color: var(--accent); text-decoration: none; letter-spacing: .04em;
}
.kg-cta-note { text-align: center; font-size: 13px; color: #666; margin: 8px 0 0 !important; }

@media (max-width: 768px) {
	/* SP FV：背景画像は要素boxで切られるため、スター3枚は ::after pseudo に分離して
	   FV下端をまたいで .sec-rich-text 側へスピルさせる（校舎ページと同じ振る舞い）
	   ※ /messages-from-parents/ /frequently-asked-questions/ /instructors-wanted/
	   /recruiting-requests-for-new-school-openings/ も同パターン */
	.page-kindergarten .sec-hero,
	.page-messages-from-parents .sec-hero,
	.page-frequently-asked-questions .sec-hero,
	.page-instructors-wanted .sec-hero,
	.page-recruiting-requests-for-new-school-openings .sec-hero,
	.page-instructor-introduction .sec-hero,
	.page-contact .sec-hero {
		position: relative;
		height: 76.533vw;             /* 287/375 ＝ Figma SP帯 */
		padding: 34.667vw 0 0;        /* タイトル上端 y130/375 */
		overflow-x: clip;
		overflow-y: visible;
		background-color: #F45981;
		background-image: url(assets/sch-hero-bg-sp.png);
		background-position: top left;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	.page-kindergarten .sec-hero::after,
	.page-messages-from-parents .sec-hero::after,
	.page-frequently-asked-questions .sec-hero::after,
	.page-instructors-wanted .sec-hero::after,
	.page-recruiting-requests-for-new-school-openings .sec-hero::after,
	.page-instructor-introduction .sec-hero::after,
	.page-contact .sec-hero::after {
		content: '';
		position: absolute;
		inset: 0;
		bottom: -25vw;               /* 星下端(≒92vw)まで含むようFV下に拡張 */
		z-index: 2;
		pointer-events: none;
		background-image:
			url(assets/star-yellow.png),
			url(assets/star-pink-white.png),
			url(assets/star-pink-white.png);
		background-position:
			89.067vw 68vw,            /* 黄星 x334 y255 */
			72.533vw 55.733vw,        /* 右白星 x272 y209 */
			-14.133vw 56.267vw;       /* 左白星 x-53 y211 */
		background-size:
			13.867vw auto,            /* w52 */
			25.533vw auto,            /* w95.75 */
			36.347vw auto;            /* w136.3 */
		background-repeat: no-repeat;
	}
	.page-kindergarten .sec-hero__title { font-size: 26px; line-height: 1.45; margin-bottom: 0; }
	.page-messages-from-parents .sec-hero__title { font-size: 30px; line-height: 1.35; margin-bottom: 0; }
	.page-frequently-asked-questions .sec-hero__title { font-size: 36px; line-height: 1.2; margin-bottom: 8px; }
	.page-frequently-asked-questions .sec-hero__lead { font-size: 14px; }
	.page-instructors-wanted .sec-hero__title { font-size: 20px; line-height: 1.5; margin-bottom: 0; }
	.page-instructor-introduction .sec-hero__title { font-size: 30px; line-height: 1.3; margin-bottom: 6px; }
	.page-contact .sec-hero__title { font-size: 30px; line-height: 1.3; margin-bottom: 0; }
	.page-instructor-introduction .sec-hero__lead { font-size: 13px; line-height: 1.6; }
	.page-recruiting-requests-for-new-school-openings .sec-hero__title { font-size: 30px; line-height: 1.25; margin-bottom: 10px; }
	.page-recruiting-requests-for-new-school-openings .sec-hero__lead { font-size: 14px; line-height: 1.6; }
	.page-recruiting-requests-for-new-school-openings .sec-rich-text.ns-head .sec-rich-text__body p { font-size: 16px; }
	.page-kindergarten .sec-rich-text { padding: 32px 0 16px; }
	.page-kindergarten .sec-rich-text__body { padding: 0 16px; }
	.kg-intro-head { font-size: 19px; line-height: 1.55; margin-bottom: 22px; }
	.kg-banner { margin-bottom: 32px; }
	.kg-section { margin-bottom: 52px; }
	.kg-section.kg-cta-band--last { margin-bottom: 4px; }
	.kg-youtube { margin-bottom: 24px; border-radius: 10px; }
	.kg-section__title { font-size: 21px; gap: 8px; }
	.kg-section__title::before, .kg-section__title::after { max-width: 32px; height: 2px; }
	.kg-section__lead { font-size: 15px; }
	.page-kindergarten .kg-section p { font-size: 15px; line-height: 1.85; }
	.kg-kindergartens { padding: 22px 18px; line-height: 1.95 !important; }
	.kg-merits { grid-template-columns: 1fr; gap: 16px; }
	.kg-merit { padding: 22px 20px; }
	.kg-merit__title { font-size: 17px; }
	.kg-photogrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.kg-features { grid-template-columns: 1fr; gap: 14px; }
	.kg-feature { padding: 20px 22px; }
	.kg-cta-band { padding: 28px 18px; }
	.kg-pill-btn { padding: 14px 28px; font-size: 15px; }
	.kg-tel a { font-size: 26px; }
}

/* =========================================================================
 * 講師紹介ページ（/instructor-introduction/）
 *   1講師=1カード。名前3行（LOICX GIRLS☆／公認チアディレクター／〇〇）＋顔写真（円・全員同サイズ）
 *   ＋校舎名＋クラス別Picro体験申込ボタン。エリア見出しで区切る。accent=pink。
 * ========================================================================= */
/* FVは他ページ共通の校舎風ピンクFV（.page-instructor-introduction .sec-hero）を使用 */
.instr-br-sp { display: none; }

.instr-body { padding: 72px 0 80px; }
.instr-area {
	font-size: 32px; font-weight: 800; color: #fff; letter-spacing: .06em; text-align: center;
	background: linear-gradient(90deg, var(--primary), var(--secondary));
	border-radius: 12px; padding: 14px 28px; margin: 56px 0 32px; scroll-margin-top: 20px;
}
.instr-area:first-child { margin-top: 0; }

.instr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.instr-card {
	background: #fff; border: 2px solid color-mix(in srgb, var(--primary) 14%, #fff);
	border-radius: 20px; padding: 28px 24px; text-align: center;
	box-shadow: 0 4px 16px rgba(0,0,0,.05);
	display: flex; flex-direction: column; align-items: center;
}
.instr-card__photo {
	width: 150px; height: 150px; border-radius: 50%; overflow: hidden; flex: none;
	border: 3px solid var(--base); background: var(--base);
}
.instr-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.instr-card__name { margin-top: 18px; display: flex; flex-direction: column; gap: 4px; }
.instr-card__role { font-size: 13px; font-weight: 700; color: var(--secondary); line-height: 1.5; }
.instr-card__person { font-size: 22px; font-weight: 800; color: var(--primary); line-height: 1.3; }
.instr-card__schools { margin-top: 22px; width: 100%; display: flex; flex-direction: column; gap: 18px; }
.instr-school__name { font-size: 17px; font-weight: 800; color: var(--black); margin-bottom: 10px; }
.instr-note { font-size: 14px; font-weight: 700; color: #888; padding: 9px 16px; }
.instr-btn {
	display: block; width: 100%; box-sizing: border-box; margin-top: 8px;
	background: var(--primary); color: #fff !important; text-decoration: none;
	border-radius: 999px; padding: 11px 16px; font-size: 14px; font-weight: 700; line-height: 1.4;
	transition: opacity .2s, transform .2s;
}
.instr-btn:first-of-type { margin-top: 0; }
.instr-btn:hover { opacity: .9; transform: translateY(-1px); }

@media (max-width: 1024px) { .instr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
	.instr-grid { grid-template-columns: 1fr; gap: 20px; padding: 0 20px; }  /* SPは各カード両サイドに20px余白（見出しは全幅維持） */
	.instr-br-sp { display: inline; }
	.instr-body { padding: 56px 0 60px; }
	.instr-area { font-size: 25px; padding: 12px 18px; margin: 40px 0 24px; }
	.instr-card__person { font-size: 20px; }
}

/* =========================================================================
 * LOICX GIRLS☆ TOP（/about-loicx-girls/）
 *   旧サイト https://loicx-girls.com/about-loicx-girls/ を同コンテンツ・同印象の
 *   黒基調で再構成した bespoke ページ（.glp-*）。FVは旧動画→静止画
 *   （ネオン背景＋ロゴ＋巨大タイトル＋三角モチーフ）。
 *   ヘッダーはこのジャンルのみ .site-header--dark（黒ピル＋白リンク）。
 * ========================================================================= */
.glp { background: #0B0B0E; color: #fff; }
.glp-container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 24px; }

/* ---- 黒基調ヘッダー（LOICX GIRLSジャンル共通） ---- */
/* ロゴ＝フッター（girls-prefooter）と同じ丸エンブレム＋「LOICX GIRLS」テキスト */
.site-header--dark .site-header__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-header--dark .site-header__logo img { width: 48px; height: 48px; object-fit: contain; }
.site-header--dark .site-header__logo-text { font-size: 22px; font-weight: 900; letter-spacing: .04em; color: #ED2D69; text-shadow: 0 2px 10px rgba(0,0,0,.5); white-space: nowrap; }
/* ナビピル＝白背景×黒字（黒基調FVの上に白ピルで浮かせる）
   GIRLSはCTAボタンなし＝ベースの非対称padding(左50/右10)だと中身が右寄りに見えるため左右対称に */
.site-header--dark .site-nav { background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,.35); padding: 10px 45px; justify-content: center; }
.site-header--dark .site-nav__links a { color: #1A1A1E; }
.site-header--dark .site-nav__links a:hover,
.site-header--dark .site-nav__links a.is-active { color: #FF3D77; }
.site-header--dark .loicx-menu-btn__label { color: #fff; }
.site-header--dark .loicx-menu-btn--plain { color: #fff; }
@media (max-width: 768px) {
	/* SP: ナビバー自体は透過（MENUボタンのみ）。ドロワーはベースの白背景×黒字を継承 */
	.site-header--dark .site-nav { background: transparent; box-shadow: none; }
	.site-header--dark .site-header__logo img { width: 40px; height: 40px; }
	.site-header--dark .site-header__logo-text { font-size: 18px; }
	.site-header--dark .site-nav__drawer-logo { display: flex; align-items: center; gap: 8px; }
	.site-header--dark .site-nav__drawer-logo img { width: 32px; height: 32px; }
}

/* ---- 見出しトークン ---- */
.glp-eyebrow { font-size: 14px; font-weight: 800; letter-spacing: .35em; color: #fff; text-transform: uppercase; }
.glp-eyebrow span { color: #FF2D6B; }
.glp-eyebrow--center { text-align: center; }
.glp-eyebrow__arrow { color: #35E0FF; letter-spacing: 0; }
.glp-heading { font-size: 52px; font-weight: 800; letter-spacing: .08em; line-height: 1.25; color: #fff; margin-top: 18px; }
.glp-heading--center { text-align: center; }

/* ---- FV（静止画） ---- */
.glp-fv { position: relative; height: 92vh; min-height: 560px; max-height: 900px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #000; }
.glp-fv__bg {
	position: absolute; inset: 0;
	background: url(assets/girls/fv-lights.jpg) center / cover no-repeat;
	filter: saturate(1.25);
}
.glp-fv__bg::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(11,11,14,.92) 100%),
		radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);
}
/* 旧FVの三角モチーフ＝中央の逆三角（半透明ピンクの輪郭） */
.glp-fv__tri--down {
	position: absolute; left: 50%; bottom: -6vh; transform: translateX(-50%);
	width: 0; height: 0; z-index: 1; opacity: .85;
	border-left: 34vh solid transparent; border-right: 34vh solid transparent;
	border-top: 50vh solid rgba(237,17,87,.28);
	filter: drop-shadow(0 0 40px rgba(237,17,87,.35));
}
.glp-fv__inner { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.glp-fv__logo { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 6px 24px rgba(0,0,0,.6)); }
.glp-fv__title {
	margin-top: 14px;
	font-size: clamp(56px, 9vw, 128px); font-weight: 900; line-height: 1.02;
	letter-spacing: .04em; color: #ED1157;
	text-shadow: 0 4px 34px rgba(237,17,87,.45), 0 2px 8px rgba(0,0,0,.6);
}
.glp-fv__sub { margin-top: 16px; font-size: 15px; font-weight: 800; letter-spacing: .5em; color: #fff; text-indent: .5em; }
/* ---- WE ARE ---- */
.glp-weare { padding: 110px 0 90px; }
.glp-weare__grid { display: grid; grid-template-columns: 1fr 450px; gap: 70px; align-items: center; }
.glp-weare__body p:not(.glp-eyebrow) { margin-top: 24px; font-size: 15px; line-height: 2.05; color: #D9D9DE; }
.glp-weare__figure img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 20px 60px rgba(237,17,87,.18); }

/* ---- LOICX-MEMBER ---- */
.glp-member { padding: 40px 0 110px; }
.glp-member__grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: stretch; }
.glp-mcard {
	border-radius: 8px; padding: 44px 28px 40px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 26px;
	box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.glp-mcard--director { background: linear-gradient(160deg, #2A0E3F 0%, #12071F 70%); }
.glp-mcard--girls    { background: linear-gradient(160deg, #3F0E22 0%, #1B0610 70%); }
.glp-mcard--youth    { background: linear-gradient(160deg, #0E3F41 0%, #061A1E 70%); }
.glp-mcard__label { font-size: 15px; font-weight: 800; letter-spacing: .4em; text-indent: .4em; }
.glp-mcard--director .glp-mcard__label { color: #C25CFF; }
.glp-mcard--girls    .glp-mcard__label { color: #FF2D6B; }
.glp-mcard--youth    .glp-mcard__label { color: #35E0FF; }
.glp-mcard__photo { width: 100%; }
.glp-mcard__photo img { width: 100%; max-width: 300px; height: auto; display: block; margin-inline: auto; }
.glp-mcard__btn {
	margin-top: auto;
	display: inline-block; padding: 14px 44px; border-radius: 4px;
	color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none;
	transition: opacity .2s, transform .2s;
}
.glp-mcard--director .glp-mcard__btn { background: linear-gradient(90deg, #B317E6, #5A0FB4); }
.glp-mcard--girls    .glp-mcard__btn { background: linear-gradient(90deg, #ED1157, #8E0E86); }
.glp-mcard--youth    .glp-mcard__btn { background: linear-gradient(90deg, #12C7E0, #0E8FB4); }
.glp-mcard__btn:hover { opacity: .88; transform: translateY(-2px); }

/* ---- MOVIE ---- */
.glp-movies { padding: 20px 0 110px; }
.glp-movies__grid { margin-top: 54px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 28px; }
.glp-movie { margin: 0; }
.glp-movie--featured { grid-column: 1 / -1; max-width: 880px; width: 100%; margin-inline: auto; }
.glp-movie__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.glp-movie__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* サムネイル置換（ファサード）: クリックまでプレイヤーを読み込まない */
.glp-movie__facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; display: block; }
.glp-movie__facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s, opacity .3s; }
.glp-movie__facade:hover img { transform: scale(1.04); opacity: .88; }
.glp-movie__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	width: 72px; height: 72px; border-radius: 50%;
	background: rgba(237,17,87,.92); box-shadow: 0 8px 28px rgba(0,0,0,.45);
	transition: transform .2s, background .2s;
}
.glp-movie__play::after {
	content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%,-50%);
	width: 0; height: 0;
	border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
.glp-movie__facade:hover .glp-movie__play { transform: translate(-50%,-50%) scale(1.1); background: #ED1157; }
.glp-movie__title { margin-top: 12px; font-size: 14px; font-weight: 700; color: #D9D9DE; line-height: 1.6; text-align: center; }

/* ---- NBA出演（ピンク帯） ---- */
.glp-nba { background: #ED1157; padding: 90px 0; }
/* スポンサー募集/イベント出演依頼バナー（旧サイトTOP準拠: 2枚フラッシュ並び＋各右下にClick画像。
   Clickピルは旧サイト実DOM実測（getBoundingClientRect）＝300×107固定・バナー620幅の48.4%、
   バナー右下角から右+22px(3.55%)・下+20px(3.88%)オーバーハングする配置が正。
   ※スクショ目測だと小さく見える（ピンク斜め帯と同化）ため実DOM測定が正 */
.glp-nba__banners { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 56px; }
.glp-nba__banner { position: relative; display: block; }
.glp-nba__banner > img:first-child { width: 100%; height: auto; display: block; }
.glp-nba__banner-click { position: absolute; right: -3.55%; bottom: -3.88%; width: 48.4%; height: auto; transition: transform .2s; filter: drop-shadow(0 6px 14px rgba(0,0,0,.3)); }
.glp-nba__banner:hover .glp-nba__banner-click { transform: scale(1.06); }
.glp-nba__imgs { display: flex; justify-content: center; }
.glp-nba__imgs img { width: 100%; max-width: 860px; height: auto; display: block; border-radius: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.glp-nba__caption { margin-top: 40px; text-align: center; font-size: 22px; font-weight: 800; color: #fff; letter-spacing: .04em; }
.glp-nba__story { margin: 22px auto 0; max-width: 860px; text-align: center; font-size: 15px; line-height: 2.05; color: rgba(255,255,255,.95); }

/* ---- その他出演実績（コラージュ背景） ---- */
.glp-achv { background: url(assets/girls/collage-back.jpg) center / cover no-repeat; }
.glp-achv__overlay { background: rgba(255, 252, 250, .78); padding: 90px 0; }
.glp-achv__title { text-align: center; font-size: 26px; font-weight: 800; color: #E4004F; letter-spacing: .1em; }
.glp-achv__list { margin: 40px auto 0; max-width: 860px; list-style: none; padding: 0; }
.glp-achv__list li { text-align: center; font-size: 15px; font-weight: 700; color: #3A3A3A; line-height: 2.1; }

/* ---- 応援チーム／スポンサー ---- */
.glp-teams { background: #fff; padding: 90px 0 40px; }
.glp-teams__title { text-align: center; font-size: 22px; font-weight: 800; color: #333; line-height: 1.9; }
.glp-sponsors { background: #fff; padding: 40px 0 90px; }
.glp-sponsors__title { text-align: center; font-size: 22px; font-weight: 700; color: #444; letter-spacing: .06em; padding-top: 34px; border-top: 1px solid #ECECEC; }
.glp-logos { margin-top: 46px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 34px; }
.glp-logo { margin: 0; text-align: center; }
.glp-logo img { width: 100%; max-width: 200px; height: 120px; object-fit: contain; display: block; margin-inline: auto; }
.glp-logo figcaption { margin-top: 12px; font-size: 13px; color: #555; }
.glp-sponsors__tel-label { margin-top: 64px; text-align: center; font-size: 17px; color: #333; font-weight: 600; }
.glp-sponsors__tel { text-align: center; }
.glp-sponsors__tel a { font-size: 34px; font-weight: 800; color: #111; letter-spacing: .04em; }
/* 電話番号の下の受付時間は番号に寄せる＋太字＋文字色も番号と同じ #111
   （2026-08-13 ユーザー指示。詰めはフッターの2pxに合わせる） */
.glp-sponsors__tel + .glsub-hours { margin-top: 2px; font-weight: 700; color: #111; }

/* ---- 専用プレフッター（黒→ピンクグラデ） ---- */
.glp-prefoot { position: relative; overflow: hidden; background: linear-gradient(180deg, #0B0B0E 0%, #33071A 45%, #ED1157 100%); padding: 110px 0 130px; }
.glp-prefoot__tri {
	position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%);
	width: 0; height: 0; opacity: .55;
	border-left: 300px solid transparent; border-right: 300px solid transparent;
	border-bottom: 430px solid rgba(0,0,0,.6);
	filter: drop-shadow(0 0 50px rgba(255,60,110,.5));
}
.glp-prefoot__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.glp-prefoot__idblock { width: fit-content; } /* 幅=ロゴ行。事務局テキストはこの幅に対して中央（旧サイト準拠） */
.glp-prefoot__logo { margin-top: 26px; display: flex; align-items: center; gap: 16px; }
.glp-prefoot__logo img { flex: none; }
.glp-prefoot__logo span { font-size: 46px; font-weight: 900; letter-spacing: .04em; color: #ED2D69; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.glp-prefoot__org { margin-top: 18px; font-size: 14px; letter-spacing: .12em; color: #EDEDED; line-height: 1.9; text-align: center; }
.glp-prefoot__connect { text-align: center; }
.glp-prefoot__sns { margin: 26px 0 0; padding: 0; list-style: none; display: flex; justify-content: center; gap: 26px; }
.glp-prefoot__sns a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); transition: background .2s; }
.glp-prefoot__sns a:hover { background: rgba(255,255,255,.14); }
.glp-sns { width: 18px; height: 18px; background: center / contain no-repeat; filter: brightness(0) invert(1); }
.glp-sns--facebook  { background-image: url(assets/sns-facebook.svg); }
.glp-sns--twitter   { background-image: url(assets/sns-twitter.svg); }
.glp-sns--youtube   { background-image: url(assets/sns-youtube.svg); }
.glp-sns--instagram { background-image: url(assets/sns-instagram.svg); }
.glp-prefoot__msg { margin-top: 34px; font-size: 15px; line-height: 2.05; color: #F2F2F5; }
.glp-prefoot__msg strong { font-weight: 800; color: #fff; }
.glp-prefoot__action { margin-top: 34px; }
.glp-prefoot__btn {
	display: inline-block; padding: 16px 56px; background: #ED1157; border: 1px solid rgba(255,255,255,.35);
	color: #fff !important; font-weight: 800; font-size: 16px; text-decoration: none; border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: opacity .2s, transform .2s;
}
.glp-prefoot__btn:hover { opacity: .9; transform: translateY(-2px); }

/* ---- 黒コピーライトフッター（GIRLSページは共通サイトマップフッターを出さない） ---- */
.glp-footer { background: #0B0B0E; padding: 26px 24px; }
.glp-footer__logo { margin: 4px 0 14px; text-align: center; }
.glp-footer__logo img { width: 64px; height: 64px; display: inline-block; vertical-align: middle; }
.glp-footer__copy { text-align: center; font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.72); }

/* ---- SP ---- */
@media (max-width: 900px) {
	.glp-weare__grid { grid-template-columns: 1fr; gap: 44px; }
	.glp-weare__figure { max-width: 380px; margin-inline: auto; }
	.glp-member__grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
	.glp-nba__banners { grid-template-columns: 1fr; margin-bottom: 40px; }
}
@media (max-width: 768px) {
	.glp-heading { font-size: 34px; }
	.glp-eyebrow { font-size: 12px; letter-spacing: .25em; }
	.glp-fv { height: 78vh; min-height: 480px; }
	.glp-fv__logo { width: 84px; height: 84px; }
	.glp-fv__sub { font-size: 12px; letter-spacing: .35em; }
	.glp-fv__tri--down { border-left-width: 42vw; border-right-width: 42vw; border-top-width: 58vw; bottom: -8vw; }
	.glp-weare { padding: 70px 0 60px; }
	.glp-member { padding: 20px 0 70px; }
	.glp-movies { padding: 0 0 70px; }
	.glp-movies__grid { grid-template-columns: 1fr; gap: 30px; }
	.glp-nba { padding: 60px 0; }
	.glp-nba__caption { font-size: 17px; }
	.glp-nba__story { font-size: 13px; text-align: left; }
	.glp-movie__play { width: 56px; height: 56px; }
	.glp-movie__play::after { border-left-width: 17px; border-top-width: 11px; border-bottom-width: 11px; }
	.glp-achv__overlay { padding: 60px 0; }
	.glp-achv__list li { font-size: 13px; text-align: left; line-height: 1.9; padding-left: 1.2em; text-indent: -1.2em; margin-bottom: 8px; }
	.glp-teams { padding: 60px 0 24px; }
	.glp-teams__title { font-size: 18px; }
	.glp-sponsors { padding: 24px 0 60px; }
	.glp-logos { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
	.glp-logo img { height: 90px; }
	.glp-sponsors__tel a { font-size: 28px; }
	.glp-prefoot { padding: 70px 0 90px; }
	.glp-prefoot__grid { grid-template-columns: 1fr; gap: 54px; }
	.glp-prefoot__logo span { font-size: 34px; }
	.glp-prefoot__connect { text-align: center; }
	.glp-prefoot__sns { justify-content: center; }
}

/* =========================================================================
 * LOICX GIRLS☆ ダンサー紹介（/dancer-introduction/）
 *   旧サイト https://loicx-girls.com/dancer-introduction/ を同コンテンツ・同印象の
 *   黒基調で再構成した bespoke ページ（.glm-* ＝ .glp-* の姉妹ブロック）。
 *   アンカー #loicxmember / #director / #JUNIORYOUTH（GIRLS☆TOPのWatch Nowリンク先）。
 * ========================================================================= */
.glm { background: #0B0B0E; }
/* 固定ヘッダー分のアンカー逃げ */
.glm-girls, .glm-director, .glm-youth { scroll-margin-top: 96px; }

/* ---- FV（黒・タイトル） ---- */
.glm-fv { position: relative; height: 52vh; min-height: 380px; max-height: 560px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #000; }
.glm-fv__inner { position: relative; z-index: 2; text-align: center; padding: 0 24px 20px; }
.glm-fv__title {
	margin-top: 18px;
	font-size: clamp(40px, 5.6vw, 72px); font-weight: 900; line-height: 1.1;
	letter-spacing: .12em; color: #fff;
	text-shadow: 0 4px 34px rgba(237,17,87,.55), 0 2px 8px rgba(0,0,0,.6);
}

/* ---- LOICX GIRLS☆（#loicxmember） ---- */
.glm-girls { padding: 96px 0 0; }
.glm-lead { max-width: 900px; margin: 0 auto 22px; font-size: 15px; line-height: 2.05; color: #D9D9DE; text-align: center; }
.glm-girls .glp-heading { margin-top: 44px; }
.glm-pv { max-width: 880px; margin: 50px auto 0; }

/* メンバー1名＝全幅の明るいパステルグラデ背景帯（旧サイトの行背景 1-10.jpg / 1-12.jpg をそのまま。
   暗いオーバーレイは載せない＝旧サイト同様の明るいカラーリング。文字色は旧サイト実測 #212529 */
.glm-girl { margin-top: 90px; background: center / cover no-repeat #0B0B0E; }
.glm-girl + .glm-girl { margin-top: 0; }
.glm-girl__overlay { padding: 90px 0; }
.glm-girl__grid { display: grid; grid-template-columns: 380px 1fr; gap: 60px; align-items: start; }
.glm-girl__name { font-size: 44px; font-weight: 900; letter-spacing: .14em; color: #ED175B; text-align: center; }
.glm-girl__photo { margin-top: 22px; width: 100%; max-width: 350px; height: auto; display: block; margin-inline: auto; border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.glm-girl__profile { font-size: 15px; line-height: 2.05; color: #212529; }
.glm-girl__msg-label { margin-top: 26px; font-size: 16px; font-weight: 800; letter-spacing: .1em; color: #212529; }
.glm-girl__msg { margin-top: 8px; font-size: 15px; line-height: 2.05; color: #212529; }
/* Instagram誘導ピル（旧Facebookバナー画像の置き換え。2026-07-18） */
.glm-girl__sns {
	display: inline-flex; align-items: center; margin-top: 26px;
	background: #fff; border-radius: 999px; padding: 6px 24px 6px 7px;
	text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.22);
	transition: opacity .2s, transform .2s;
}
.glm-girl__sns:hover { opacity: .9; transform: translateY(-2px); }
.glm-girl__sns-ic {
	width: 44px; height: 44px; border-radius: 50%; flex: none;
	background: radial-gradient(circle at 30% 110%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
	display: grid; place-items: center;
}
.glm-girl__sns-ic::before {
	content: ''; width: 22px; height: 22px;
	background: url(assets/sns-instagram.svg) center / contain no-repeat;
	filter: brightness(0) invert(1);
}
.glm-girl__sns-handle { margin-left: 12px; font-size: 16px; font-weight: 700; color: #333; }

/* ---- DIRECTOR（#director） ---- */
.glm-director { padding: 100px 0 40px; }
.glm-dcard {
	position: relative; overflow: hidden;
	margin-top: 70px; padding: 54px 50px;
	display: grid; grid-template-columns: 400px 1fr; gap: 54px; align-items: center;
	background-color: #101017;
	border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
/* poly装飾＝薄い背面レイヤー（本文に被らないよう低opacity・角に逃がす） */
.glm-dcard__poly {
	position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .14;
	background-repeat: no-repeat; background-position: right -120px top -80px;
}
.glm-dcard--rev { grid-template-columns: 1fr 400px; }
.glm-dcard--rev .glm-dcard__poly { background-position: left -120px bottom -80px; }
.glm-dcard--rev .glm-dcard__photo { order: 2; }
.glm-dcard__photo, .glm-dcard__body { position: relative; z-index: 1; }
.glm-dcard__photo img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.glm-dcard__role { font-size: 15px; font-weight: 800; letter-spacing: .18em; line-height: 1.8; color: #C25CFF; }
.glm-dcard__role br { display: none; }
.glm-dcard__name { margin-top: 10px; font-size: 34px; font-weight: 900; letter-spacing: .06em; color: #fff; }
.glm-dcard__text { margin-top: 20px; font-size: 15px; line-height: 2.05; color: #D9D9DE; }
.glm-dcard__more { margin-top: 24px; }
.glm-dcard__more a { color: #FF2D6B; font-weight: 700; font-size: 15px; text-decoration: none; }
.glm-dcard__more a:hover { text-decoration: underline; }

/* ---- YOUTH・JUNIOR YOUTH（#JUNIORYOUTH） ---- */
.glm-youth { padding: 100px 0 120px; background: #fff; } /* 旧サイト同様の白背景（2026-07-18指示）。文字色も旧実測の#212529系に */
.glm-youth .glm-ycard__name { color: #212529; } /* 旧サイト実測=rgb(33,37,41)。白地では水色不可 */
.glm-youth .glm-ycard__desc { color: #212529; }
.glm-youth .glm-ycard__photo { box-shadow: 0 12px 30px rgba(0, 0, 0, .15); }
/* Satellite（LOICX GIRLS☆の下・3名カード。2026-07-18追加）
   背景はAINA/MIKI行と同じパステルグラデ（bg-member-aina.jpg流用＝AINA/MIKI/Satelliteで色柄が交互） */
.glm-satellite { padding: 90px 0; background: url(assets/girls/bg-member-aina.jpg) center / cover no-repeat #EDE6F5; }
.glm-satellite .glp-heading { color: #ED175B; } /* パステル地では白見出し不可視→AINA/MIKI名と同ピンク */
.glm-sat__grid { margin: 44px auto 0; max-width: 960px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.glm-sat__grid .glm-ycard__name { color: #ED2D69; } /* GIRLS本体ブロック配下＝ピンク（※.glm-ycard__name定義より後勝ちさせるため子孫セレクタで詳細度を上げる） */
.glm-sat__grid .glm-ycard__photo { box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }
.glm-youth__title { text-align: center; font-size: 44px; font-weight: 900; letter-spacing: .1em; color: #ED175B; }
.glm-youth__intro { max-width: 900px; margin: 44px auto 0; }
.glm-youth__intro p { margin-top: 20px; font-size: 15px; line-height: 2.05; color: #212529; text-align: center; } /* 白背景化に伴い旧サイト実測色 */
.glm-youth__note { font-weight: 800; color: #FF2D6B !important; }
.glm-youth__sub { margin-top: 80px; font-size: 30px; font-weight: 800; letter-spacing: .08em; color: #212529; } /* 白背景化に伴い変更 */
.glm-youth__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 20px; }
.glm-ycard { margin: 0; text-align: center; }
.glm-ycard__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.glm-ycard__name { margin-top: 14px; font-size: 15px; font-weight: 800; letter-spacing: .04em; color: #35E0FF; }
.glm-ycard__desc { margin-top: 8px; font-size: 12px; line-height: 1.85; color: #C9C9CF; text-align: left; }
/* メンバー欄の下＝旧バナー画像をやめてボタンリンクに（2026-08-12 ユーザー指示）。
   ボタン本体はGIRLS共通の .glsub-btn を流用（色の上書きは .glsub-btn--youth 側で。
   .glsub-btn より後に定義しないと背景色が後勝ちで上書きされる）。 */
.glm-youth__cta { margin-top: 90px; }

/* =========================================================================
 * LOICX GIRLS☆ 下層共通（.glsub-*）
 *   イベント出演依頼(/event-appearance-details/)・公式スポンサー募集
 *   (/official-sponsorship-opportunities/)等、黒基調テキストページの共通部品。
 *   FVは .glm-fv、白地ロゴ帯は .glp-teams/.glp-sponsors を流用。
 * ========================================================================= */
.glsub-sec { padding: 96px 0; scroll-margin-top: 96px; }
.glsub-sec--tight { padding-top: 20px; }
.glsub-heading-md { font-size: 40px; }
.glsub-br-sp { display: none; }
.glsub-lead { max-width: 900px; margin: 28px auto 0; font-size: 15px; line-height: 2.05; color: #D9D9DE; text-align: center; }
.glsub-lead strong { color: #FF2D6B; font-weight: 800; }
.glsub-lead small { font-size: 12px; color: rgba(255,255,255,.6); }
.glsub-note { max-width: 900px; margin: 18px auto 0; font-size: 13px; line-height: 1.9; color: rgba(255,255,255,.55); text-align: center; }
.glsub-body { max-width: 860px; margin-inline: auto; }
.glsub-body p { margin-top: 22px; font-size: 15px; line-height: 2.05; color: #D9D9DE; }
.glsub-banner { display: block; width: 100%; max-width: 640px; height: auto; margin: 56px auto 0; border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.glsub-banner--wide { max-width: 860px; }
.glsub-banner--top { margin-top: 0; } /* セクション先頭（見出しより上）に置く場合 */
.glsub-banner--gray-frame { border: 6px solid #C9C9CE; box-sizing: border-box; } /* オーディションページ：FV下画像のグレー枠（2026-07-28） */
.glsub-mt-lg { margin-top: 56px; }
.glsub-cta { margin-top: 48px; text-align: center; }
.glsub-btn {
	display: inline-block; padding: 18px 64px; background: #ED1157; border: 1px solid rgba(255,255,255,.35);
	color: #fff !important; font-weight: 800; font-size: 16px; text-decoration: none; border-radius: 4px;
	box-shadow: 0 10px 30px rgba(237,17,87,.35); transition: opacity .2s, transform .2s;
}
.glsub-btn:hover { opacity: .9; transform: translateY(-2px); }
/* ユースクラス誘導ボタン＝クラスカラー（Figma「各クラスカラーリング」Jr-YOUTH: FV #3DD4F6 / accent #03BBE4）。 */
.glsub-btn--youth {
	background: linear-gradient(90deg, #3DD4F6, #03BBE4);
	box-shadow: 0 10px 30px rgba(61, 212, 246, .35);
}
.glsub-list { max-width: 920px; margin: 44px auto 0; padding: 0; list-style: none; }
.glsub-list li { font-size: 14px; line-height: 1.95; color: #D9D9DE; padding-left: 1.5em; text-indent: -1.5em; margin-bottom: 8px; }
.glsub-list__sub { color: rgba(255,255,255,.65) !important; padding-left: 2.8em !important; }
.glsub-tel-label { margin-top: 60px; text-align: center; font-size: 15px; font-weight: 700; color: #D9D9DE; }
.glsub-tel { text-align: center; margin-top: 6px; }
.glsub-tel a { font-size: 34px; font-weight: 900; color: #fff; letter-spacing: .04em; text-decoration: none; }
.glsub-hours { margin-top: 10px; text-align: center; font-size: 13px; line-height: 1.9; color: #666; }
.glsub-lead--left { text-align: left; }
.glsub-link { color: #FF2D6B; font-weight: 700; }
/* お知らせ枠（オーディション延期等） */
.glsub-notice {
	max-width: 900px; margin: 36px auto 0; padding: 24px 28px;
	border: 1px solid rgba(255,45,107,.55); border-radius: 8px; background: rgba(237,17,87,.08);
	font-size: 14px; line-height: 2; color: #F2D8DF;
}
/* ★見出し＋段落＋●リスト（オーディション概要・スタジオ規約等） */
.glsub-outline { max-width: 900px; margin: 44px auto 0; }
.glsub-outline__h { max-width: 900px; margin: 44px auto 0; font-size: 20px; font-weight: 800; letter-spacing: .06em; color: #FF2D6B; }
.glsub-outline .glsub-outline__h:first-child { margin-top: 0; }
.glsub-outline__p { max-width: 900px; margin: 14px auto 0; font-size: 14px; line-height: 2; color: #D9D9DE; }
/* 中央寄せ版（ダンススタジオのラウンジ見出し・施設名。2026-08-13 ユーザー指示） */
.glsub-outline__h--center,
.glsub-outline__p--center { text-align: center; }
.glsub-outline__ul { max-width: 900px; margin: 14px auto 0; padding: 0; list-style: none; }
.glsub-outline__ul li { font-size: 14px; line-height: 2; color: #D9D9DE; padding-left: 1.4em; text-indent: -1.4em; margin-bottom: 6px; }

/* =========================================================================
 * LOICXトップ（統合TOP / .glhub-*・.glp-topics）
 *   チアダンススクール・LOICX GIRLS☆・LOICXダンススタジオへの3ライン導線カード、
 *   および LOICX TOPICS（最新情報）リスト。他要素は .glp-* / .glsub-* を流用。
 * ========================================================================= */
.glhub-cards-sec { padding: 70px 0 0; }
.glhub-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.glhub-card { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #0B0B0E; box-shadow: 0 16px 40px rgba(0,0,0,.4); text-decoration: none; transition: transform .2s ease; }
.glhub-card:hover { transform: translateY(-4px); }
.glhub-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0B0B0E; }
.glhub-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s ease; }
.glhub-card:hover .glhub-card__media img { transform: scale(1.06); }
.glhub-card__body { padding: 18px 20px 22px; }
.glhub-card__label { display: block; color: #fff; font-size: 19px; font-weight: 800; letter-spacing: .03em; }
.glhub-card:hover .glhub-card__label { color: #FF6FA0; }
.glhub-card__sub { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #FF6FA0; }

.glp-topics { background: #fff; padding: 90px 0 20px; }
.glp-topics__title { text-align: center; font-size: 26px; font-weight: 900; letter-spacing: .08em; color: #222; }
.glp-topics__list { max-width: 900px; margin: 40px auto 0; padding: 0; list-style: none; border-top: 1px solid #eaeaea; }
.glp-topics__item { border-bottom: 1px solid #eaeaea; }
/* 日付・NEW枠・タイトルを固定列にして、タイトルの開始位置を縦に揃える（NEW有無で揺れない）。 */
.glp-topics__item a { display: grid; grid-template-columns: 122px 46px 1fr; align-items: baseline; column-gap: 14px; padding: 18px 4px; text-decoration: none; }
.glp-topics__date { font-size: 14px; color: #999; }
.glp-topics__badge { align-self: center; }
.glp-topics__new { display: inline-block; background: #FF2D6B; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 3px; line-height: 1.2; }
.glp-topics__text { font-size: 16px; color: #333; line-height: 1.7; }
@media (max-width: 768px) {
	.glp-topics__item a { grid-template-columns: 104px 42px 1fr; column-gap: 8px; }
	.glp-topics__date { font-size: 12px; }
	.glp-topics__text { font-size: 14px; }
}
.glp-topics__item a:hover .glp-topics__text { color: #000; }

/* ---- FVスライダー（旧サイト準拠＝690×900の固定スライド・両隣が覗くセンター寄せカルーセル） ---- */
.glhub-slider { position: relative; background: #0b0b0e; overflow: hidden; padding: 44px 0; }
.glhub-slider__viewport { overflow: hidden; }
/* gapを入れるとスライダーの背景(#0b0b0e)が隙間として見えるため0。画像同士を密着させる（2026-07-29 ユーザー指示）。
   送り位置のJSは offsetLeft/offsetWidth の実測なのでgap変更に自動追従する。 */
.glhub-slider__track { display: flex; gap: 0; transition: transform .6s cubic-bezier(.45,.05,.2,1); will-change: transform; }
.glhub-slide { position: relative; flex: 0 0 600px; width: 600px; aspect-ratio: 600 / 800; overflow: hidden; background: #0b0b0e; opacity: .82; transition: opacity .5s ease; }
.glhub-slide.is-center { opacity: 1; }
.glhub-slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.glhub-slide__num { position: absolute; top: 22px; left: 44px; z-index: 2; font-size: 42px; font-weight: 900; font-style: italic; color: #171717; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255,255,255,.15); }
.glhub-slide__cap { position: absolute; left: 44px; bottom: 56px; z-index: 2; }
/* 影は強め。スタジオのスライドが白い室内写真＝オーバーレイ無しだと白文字が飛ぶため
   （2026-08-13 ユーザー選択：オーバーレイではなく影を濃くする）。輪郭用の近い影＋
   広がる影の2段。Viewは枠線も飛ぶので box-shadow / drop-shadow も併用。 */
.glhub-slide__title { margin: 0; color: #fff; font-family: "Courier New", monospace; font-size: 15px; font-weight: 700; line-height: 1.85; letter-spacing: .08em; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 2px 6px rgba(0,0,0,.85), 0 4px 18px rgba(0,0,0,.7); }
.glhub-slide__view { display: inline-block; margin-top: 16px; padding: 7px 30px; border: 1px solid rgba(255,255,255,.85); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .28em; text-indent: .28em; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 2px 6px rgba(0,0,0,.85); box-shadow: 0 2px 10px rgba(0,0,0,.55); }
/* ホバーで白背景に反転する時は影を消す（暗い滲みが出るため） */
a.glhub-slide__view:hover, a.glhub-slide__view:focus-visible { text-shadow: none; box-shadow: none; }
/* Viewはリンク（<a>）にもなる。span時と見た目を揃え、ホバーで反転させる。 */
a.glhub-slide__view { text-decoration: none; transition: background-color .2s ease, color .2s ease; }
a.glhub-slide__view:hover, a.glhub-slide__view:focus-visible { background: #fff; color: #0B0B0E; }
.glhub-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.32); border: 0; border-radius: 50%; color: #fff; font-size: 30px; line-height: 1; padding: 0 0 4px; cursor: pointer; opacity: .9; transition: background .2s ease, opacity .2s ease; }
.glhub-slider__arrow:hover { opacity: 1; background: rgba(232,15,71,.85); }
.glhub-slider__arrow--prev { left: 20px; }
.glhub-slider__arrow--next { right: 20px; }
.glhub-slider__thumbs { position: absolute; right: 18px; bottom: 16px; z-index: 3; display: flex; gap: 8px; }
.glhub-slider__thumb { width: 74px; height: 46px; padding: 0; border: 2px solid transparent; border-radius: 2px; overflow: hidden; cursor: pointer; background: #000; opacity: .7; transition: opacity .2s ease; }
.glhub-slider__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.glhub-slider__thumb.is-active { opacity: 1; border-color: #FF2D6B; }

/* ---- 3事業ライン（黒地・画像＋ロゴ＋見出し＋説明の行） ---- */
.glhub-lines { background: #0B0B0E; padding: 84px 0; }
.glhub-line { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.glhub-line + .glhub-line { margin-top: 72px; }
.glhub-line__media { display: block; overflow: hidden; border-radius: 2px; }
.glhub-line__media img { width: 100%; height: auto; display: block; transition: transform .35s ease; }
.glhub-line__media:hover img { transform: scale(1.05); }
.glhub-line__logolink { display: inline-block; }
.glhub-line__logo { max-width: 300px; max-height: 66px; width: auto; height: auto; display: block; margin: 4px 0 20px; }
.glhub-line__h { margin: 0 0 14px; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.glhub-line__h a { color: inherit; text-decoration: none; transition: color .2s ease; }
.glhub-line__h a:hover { color: #FF6FA0; }
.glhub-line__text { margin: 0; color: #d6d6d6; font-size: 14px; line-height: 1.95; }
.glhub-line__link { margin: 18px 0 0; }
.glhub-line__link a { color: #FF6FA0; font-size: 14px; font-weight: 700; text-decoration: none; }
.glhub-line__link a:hover { text-decoration: underline; }

/* ---- 運営会社（白地・2カラム。左:リスト灰ボックス／右:WSCロゴ＋写真2枚） ---- */
.glhub-company { background: #fff; padding: 84px 0; }
.glhub-company__grid { display: grid; grid-template-columns: 1fr 330px; gap: 48px; align-items: start; }
.glhub-company__h { margin: 0; font-size: 27px; font-weight: 800; color: #222; }
.glhub-company__name { margin: 12px 0 20px; font-size: 17px; font-weight: 800; color: #222; }
.glhub-company__name a { color: #222; text-decoration: none; }
.glhub-company__name a:hover { color: #E4004F; }
.glhub-company__box { background: #f5f5f5; padding: 30px 36px 34px; border-radius: 3px; }
.glhub-company__cat { margin: 22px 0 6px; font-size: 14px; font-weight: 800; color: #333; }
.glhub-company__cat:first-child { margin-top: 0; }
.glhub-company__list { list-style: none; margin: 0; padding: 0; }
.glhub-company__list li { font-size: 13px; color: #444; line-height: 1.95; }
.glhub-company__right { display: flex; flex-direction: column; gap: 20px; }
.glhub-company__logo { width: 82%; max-width: 280px; height: auto; margin: 0 auto 4px; display: block; }
.glhub-company__photo { width: 100%; height: auto; border-radius: 3px; display: block; }

@media (max-width: 900px) {
	.glhub-line { grid-template-columns: 220px 1fr; gap: 28px; }
	.glhub-company__grid { grid-template-columns: 1fr; gap: 32px; }
	.glhub-company__right { flex-direction: row; flex-wrap: wrap; justify-content: center; }
	.glhub-company__logo, .glhub-company__photo { width: 46%; max-width: 320px; }
}
@media (max-width: 768px) {
	.glhub-slide { flex-basis: 78vw; width: 78vw; }
	.glhub-slide__num { font-size: 30px; top: 14px; left: 20px; }
	.glhub-slide__cap { left: 20px; bottom: 40px; }
	.glhub-slider__thumbs { display: none; }
	.glhub-line { grid-template-columns: 1fr; gap: 18px; }
	.glhub-line__media img { max-width: 240px; margin: 0 auto; }
	.glhub-line__logo { margin-inline: auto; }
	.glhub-line__h, .glhub-line__text { text-align: left; }
	.glhub-company__right { flex-direction: column; }
	.glhub-company__logo, .glhub-company__photo { width: 100%; }
}

/* FV背景＝旧サイト実画像（loicx_girls.jpg）に差し替え／統合TOPは高さを控えめに */
.glhub-page .glp-fv__bg { background-image: url(assets/girls/hub-fv-old.jpg); background-position: center bottom; background-size: auto 80%; background-color: #000; }
.glhub-page .glp-fv { height: 58vh; min-height: 420px; max-height: 640px; }

/* 運営会社に添える旧サイト実写真3枚（WSCロゴ＋スタジオ内観2枚） */
.glhub-company-photos { max-width: 900px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.glhub-company-photos img { width: 100%; height: 200px; object-fit: contain; background: #fff; border-radius: 8px; display: block; }

/* ---- ダンススタジオ（.glst-*） ---- */
.glst-fv-sub { margin-top: 18px; font-size: 16px; font-weight: 700; letter-spacing: .08em; color: #fff; }
.glm-fv__inner .glsub-cta { margin-top: 30px; }
.glst-wides { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.glst-wides img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.glst-uses { margin-top: 34px; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.glst-uses img { width: 300px; max-width: 100%; height: auto; display: block; border-radius: 6px; }
/* 用途バナー＋実写真の縦ペア（旧サイト同順。2026-07-18） */
.glst-use { display: flex; flex-direction: column; gap: 14px; align-items: center; }
/* FV背景＝スタジオFVバナー（IMG_1934／左に濃グレー帯＝LOICX STUDIO・Luxury Studio・用途リストが焼き込み。
   2026-08-03 差し替え。旧=fv-studio.jpg / fv-studio-white.jpg）
   焼き込み文字が左端にあるため background-position は left 固定（右側をトリミング） */
.glst-page .glp-fv__bg { background-image: url(assets/girls/studio/fv-studio-luxury.jpg); background-position: left center; filter: none; }
/* FVは旧サイト（フルスクリーンRevSlider）同様に写真をしっかり見せる＝高さ拡大 */
.glst-page .glm-fv { height: 88vh; min-height: 560px; max-height: 1000px; }
/* 2026-08-05 ユーザー指示：暗幕（ビネット＋上下グラデ）は全廃。支給画像そのままの明るさで見せる。
   ＝ .glp-fv__bg::after の共通オーバーレイをスタジオページだけ無効化する
   （filter も上の宣言で none ＝ 彩度調整も掛けない）。文字の可読性は text-shadow のみで担保する。 */
.glst-page .glp-fv__bg::after { background: none; }
.glst-page .glm-fv__title { text-shadow: 0 4px 30px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.7); }
/* 小見出し（白＋ピンク）も明るい写真の上では沈むため影を付ける */
.glst-page .glm-fv__inner .glp-eyebrow { text-shadow: 0 2px 8px rgba(0,0,0,.85), 0 0 20px rgba(0,0,0,.6); }
/* FV写真を明るい実写（グレー加工なし）に差し替えたため白文字の影を強めて可読性を確保 */
.glst-page .glst-fv-sub { text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.75); }
/* FV中央のキャッチコピー（タイトル下） */
.glst-fv-catch {
	margin: 24px auto 0; max-width: 900px;
	font-size: clamp(17px, 2.1vw, 26px); font-weight: 700; line-height: 1.9; letter-spacing: .1em;
	color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 0 26px rgba(0,0,0,.6);
}
/* サブテキスト＋予約ボタンはFV最下部に配置 */
.glst-fv-bottom { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 2; text-align: center; padding: 0 24px; }
.glst-fv-bottom .glst-fv-sub { margin-top: 0; }
.glst-fv-bottom .glsub-cta { margin-top: 16px; }
/* 見取図・所在地の白背景（旧サイト準拠） */
.glst-white { background: #fff; }
.glst-white .glp-heading { color: #222; }
.glst-white .glst-addr { color: #333; }
.glst-white .glst-map { box-shadow: 0 14px 34px rgba(0,0,0,.18); }
/* 設備（白地セクション・カード） */
.glst-eq { background: #fff; padding: 90px 0; }
.glst-eq__title { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: .3em; text-indent: .3em; color: #E4004F; }
.glst-eq__grid { margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; }
.glst-eqcard { margin: 0; }
.glst-eqcard img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 8px; box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.glst-eqcard__name { margin-top: 16px; font-size: 17px; font-weight: 800; color: #222; }
.glst-eqcard__price { margin-left: 8px; font-size: 13px; font-weight: 700; color: #E4004F; }
.glst-eqcard__desc { margin-top: 8px; font-size: 13px; line-height: 1.9; color: #555; }
/* ラウンジ写真（1枚のみ・中央）。300pxではPCで小さすぎるという指摘→拡大したが、
   同じセクションの上の写真（.glsub-banner＝640px）と幅を揃えるのが正（2026-08-13 ユーザー指示）。
   元画像768×512なので640px表示は等倍以下＝拡大ボケなし。 */
.glst-lounge { margin-top: 24px; max-width: 640px; margin-inline: auto; }
.glst-lounge img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 8px; }
/* コロナ対策アコーディオン（旧サイトのvc_toggle準拠＝デフォルト閉・クリックで開閉） */
.glst-covid { max-width: 900px; margin: 44px auto 0; }
.glst-covid__summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 20px; font-weight: 800; letter-spacing: .06em; color: #FF2D6B; user-select: none; }
.glst-covid__summary::-webkit-details-marker { display: none; }
.glst-covid__summary::before { content: "❯"; flex: none; font-size: 18px; line-height: 1; transition: transform .2s ease; }
.glst-covid[open] .glst-covid__summary::before { transform: rotate(90deg); }
/* 地図 */
.glst-map { max-width: 900px; margin: 40px auto 0; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.glst-map iframe { display: block; width: 100%; height: 420px; border: 0; }
.glst-addr { text-align: center; font-weight: 700; }
/* レビュー */
.glst-score { margin-top: 30px; text-align: center; }
.glst-score__num { font-size: 44px; font-weight: 900; color: #fff; }
.glst-score__stars { margin-left: 14px; font-size: 22px; color: #FFC400; letter-spacing: .1em; }
.glst-score__note { display: block; margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.6); }
.glst-reviews { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.glst-review { background: #101017; border-radius: 10px; padding: 28px 30px; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.glst-review__stars { color: #FFC400; font-size: 15px; letter-spacing: .12em; }
.glst-review__title { margin-top: 10px; font-size: 17px; font-weight: 800; color: #fff; }
.glst-review__date { margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.5); }
.glst-review__body { margin-top: 12px; font-size: 14px; line-height: 1.95; color: #D9D9DE; }
.glst-review__who { margin-top: 12px; font-size: 12px; font-weight: 700; color: #FF2D6B; }

@media (max-width: 900px) {
	.glst-eq__grid { grid-template-columns: repeat(2, 1fr); }
	.glst-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.glsub-sec { padding: 64px 0; }
	.glsub-heading-md { font-size: 26px; }
	.glsub-br-sp { display: inline; }
	.glsub-lead, .glsub-body p { font-size: 14px; text-align: left; }
	.glsub-note { text-align: left; }
	.glsub-banner { margin-top: 40px; }
	.glsub-banner--top { margin-top: 0; }
	.glsub-list li { font-size: 13px; }
	.glsub-tel a { font-size: 28px; }
	.glsub-notice { padding: 18px 20px; font-size: 13px; }
	.glsub-outline__h { font-size: 17px; }
	.glhub-cards-sec { padding: 44px 0 0; }
	.glhub-cards { grid-template-columns: 1fr; gap: 18px; }
	.glhub-card__media { aspect-ratio: 16 / 10; }
	.glhub-company-photos { grid-template-columns: 1fr; gap: 14px; }
	.glhub-company-photos img { height: 180px; }
	.glp-topics { padding: 56px 0 10px; }
	.glp-topics__title { font-size: 21px; }
	.glp-topics__item a { padding: 14px 2px; }
	.glst-covid__summary { font-size: 17px; }
	.glst-wides { grid-template-columns: 1fr; gap: 16px; }
	.glst-eq { padding: 60px 0; }
	.glst-eq__grid { grid-template-columns: 1fr; }
	.glst-eq__title { font-size: 21px; }
	.glst-map iframe { height: 320px; }
	.glst-score__num { font-size: 34px; }
}

/* ---- SP ---- */
@media (max-width: 900px) {
	.glm-girl__grid { grid-template-columns: 1fr; gap: 40px; }
	.glm-dcard { grid-template-columns: 1fr; gap: 34px; padding: 40px 28px; }
	.glm-dcard--rev { grid-template-columns: 1fr; }
	.glm-dcard--rev .glm-dcard__photo { order: 0; }
	.glm-dcard__photo { max-width: 420px; margin-inline: auto; width: 100%; }
	.glm-youth__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.glm-fv { height: 44vh; min-height: 320px; }
	.glst-page .glm-fv { height: 68vh; min-height: 460px; max-height: 700px; }
	/* SPはcoverで大きく拡大され、左の焼き込み文字（用途リスト）が途中で切れる。
	   文字が入らない写真部分（壁の「LOICX GIRLS」ロゴ側）だけを見せる */
	.glst-page .glp-fv__bg { background-position: 55% center; }
	.glst-fv-catch { margin-top: 18px; font-size: 15px; line-height: 2; letter-spacing: .06em; }
	.glm-girls { padding-top: 64px; }
	.glm-lead { text-align: left; font-size: 14px; }
	.glm-pv { margin-top: 36px; }
	.glm-girl { margin-top: 64px; }
	.glm-girl__overlay { padding: 60px 0; }
	.glm-girl__name { font-size: 34px; }
	.glm-girl__profile, .glm-girl__msg { font-size: 14px; }
	.glm-director { padding: 64px 0 20px; }
	.glm-dcard { margin-top: 44px; }
	.glm-dcard__name { font-size: 26px; }
	.glm-dcard__text { font-size: 14px; }
	.glm-dcard__role br { display: inline; }
	.glm-youth { padding: 64px 0 80px; }
	.glm-satellite { padding: 60px 0; }
	.glm-sat__grid { grid-template-columns: 1fr; gap: 34px; max-width: 440px; }
	.glm-youth__title { font-size: 28px; }
	.glm-youth__intro p { text-align: left; font-size: 14px; }
	.glm-youth__sub { margin-top: 56px; font-size: 24px; }
	.glm-youth__grid { grid-template-columns: 1fr; gap: 34px; max-width: 440px; margin-inline: auto; }
	.glm-ycard__desc { font-size: 13px; }
	.glm-youth__cta { margin-top: 60px; }
}

/* =========================================================================
 * お問い合わせページ（/contact/）
 *   FV=校舎風ピンク＋3スター（上の共有セレクタ群に .page-contact 追加済み）。
 *   フォーム本体は Contact Form 7（slug=school-contact）＋ Conditional Fields。
 *   種別セレクトで [group] を出し分けるため、グループの表示/非表示は
 *   プラグイン側（.wpcf7cf-hidden）が制御する。ここでは見た目のみ定義。
 * ========================================================================= */
.contact-body { padding: 60px 0 96px; background: var(--base); }
.contact-lead {
	text-align: center; font-size: 16px; line-height: 1.9;
	margin: 0 0 36px; color: var(--black); font-weight: 600;
}
.contact-form-card {
	max-width: 860px; margin: 0 auto; background: #fff; border-radius: 20px;
	padding: 48px 56px 56px; box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
	border: 2px solid color-mix(in srgb, var(--accent) 18%, #fff);
}
.contact-form-missing { text-align: center; margin: 0; }

/* --- 種別ごとの案内ブロック（例: チアダンススクール用イベントの上部に出す注意書き） --- */
.cform-notice {
	margin: 0 0 28px; padding: 20px 24px;
	background: var(--base); border: 2px solid var(--primary); border-radius: 10px;
	font-size: 15px; font-weight: 600; line-height: 1.8; color: #333;
}
.cform-notice p { margin: 0; }
.cform-notice p + p { margin-top: 8px; }
.cform-notice a { color: var(--primary); font-weight: 800; text-decoration: underline; }
.cform-notice a:hover { text-decoration: none; }

/* --- フィールド共通 --- */
.cform-field { margin: 0 0 24px; }
.cform-field label { display: block; }
.cform-label {
	display: inline-flex; align-items: center; gap: 10px;
	font-weight: 800; font-size: 15px; color: var(--black); margin-bottom: 8px;
}
.cform-req, .cform-opt {
	display: inline-block; font-size: 11px; font-weight: 800; line-height: 1;
	padding: 4px 8px; border-radius: 4px; color: #fff;
}
.cform-req { background: var(--accent); }
.cform-opt { background: #b5b5b5; }
.cform-note { display: block; font-size: 12px; color: #888; margin-bottom: 6px; }

.cform input[type="text"],
.cform input[type="tel"],
.cform input[type="email"],
.cform input[type="date"],
.cform select,
.cform textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 16px;
	padding: 12px 16px; border: 2px solid #E9D3DA; border-radius: 10px;
	background: #FDFAFB; color: var(--black);
}
.cform input:focus, .cform select:focus, .cform textarea:focus {
	outline: none; border-color: var(--accent);
	background: #fff;
}
.cform ::placeholder { color: #A9A0A3; opacity: 1; }
.cform textarea { min-height: 140px; resize: vertical; }
.cform select { appearance: auto; cursor: pointer; }

/* チェックボックス（ある/ない） */
.cform .wpcf7-checkbox { display: inline-flex; gap: 28px; padding-top: 4px; }
.cform .wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.cform .wpcf7-checkbox label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.cform .wpcf7-checkbox input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }

/* 送信ボタン（サイト共通のピンクピル） */
.cform-submit { text-align: center; margin-top: 36px; }
.cform-submit input[type="submit"] {
	display: inline-block; padding: 18px 72px; background: var(--accent); color: #fff;
	border: 0; border-radius: 999px; font: inherit; font-weight: 800; font-size: 18px;
	cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
	transition: transform .2s, background-color .2s;
}
.cform-submit input[type="submit"]:hover {
	transform: translateY(-2px);
	background: color-mix(in srgb, var(--accent) 85%, #000);
}
.cform .wpcf7-spinner { display: block; margin: 12px auto 0; }

/* バリデーション/応答メッセージ */
.cform .wpcf7-not-valid { border-color: #dc3232 !important; }
/* エラーチップは absolute（フィールド間の余白24px内に重ねる）。
   通常フローに置くと、送信ボタンの mousedown（＝直前フィールドのblur）で
   チップが消えてボタンがずれ、mouseup が外れてクリック不成立になるため。 */
.cform .wpcf7-form-control-wrap { position: relative; display: block; }
.cform .wpcf7-not-valid-tip { position: absolute; top: calc(100% + 3px); left: 0; font-size: 13px; line-height: 1.3; color: #dc3232; margin: 0; }
.page-contact .wpcf7 form .wpcf7-response-output {
	margin: 28px 0 0; padding: 14px 18px; border-radius: 10px;
	border: 2px solid var(--accent); font-weight: 700; text-align: center;
}
.page-contact .wpcf7 form.sent .wpcf7-response-output { border-color: #2e9e5b; color: #2e9e5b; }
.page-contact .wpcf7 form.invalid .wpcf7-response-output,
.page-contact .wpcf7 form.failed .wpcf7-response-output { border-color: #dc3232; color: #dc3232; }

@media (max-width: 768px) {
	.contact-body { padding: 40px 0 64px; }
	.contact-lead { text-align: left; font-size: 14px; padding: 0 4px; }
	.contact-form-card { padding: 28px 18px 36px; border-radius: 16px; }
	.cform-label { font-size: 14px; }
	.cform input[type="text"],
	.cform input[type="tel"],
	.cform input[type="email"],
	.cform input[type="date"],
	.cform select,
	.cform textarea { font-size: 16px; padding: 12px 14px; }
	.cform-submit input[type="submit"] { width: 100%; padding: 16px 0; }
}

/* =========================================================================
 * お問い合わせページ LOICX GIRLS☆向け（/contact-form/ ＝旧サイトと同slug）
 *   GIRLS黒基調（.glm-fv）＋白いフォームカード（.contact-form-card / .cform 共通流用）。
 *   フォーム本体は CF7 slug=girls-contact（import-girls-contact-form.php）。
 *   種別3択（全般/イベント出演依頼/スポンサー募集）の出し分けは cf7cf が制御。
 * ========================================================================= */
.page-contact-form { --accent: #ED1157; } /* GIRLSブランドピンク（既定accent=enjoyの流入防止） */
/* 送信ボタン・入力欄の角丸はGIRLS共通ボタン（.glsub-btn=4px）に合わせる（学校向け/contact/の999px/10pxは維持） */
.page-contact-form .cform-submit input[type="submit"] { border-radius: 4px; }
.page-contact-form .cform input[type="text"],
.page-contact-form .cform input[type="tel"],
.page-contact-form .cform input[type="email"],
.page-contact-form .cform input[type="date"],
.page-contact-form .cform select,
.page-contact-form .cform textarea { border-radius: 4px; }
/* ダンススタジオ用お問い合わせ（/studio-contact/）: FVはスタジオ実写真（雰囲気をスタジオページに合わせる） */
/* お問い合わせはFVが低く(52vh)縦にトリミングされる＝左のLOICX STUDIOロゴが途中で切れるため、
   ロゴ無しの写真のみ版（fv-studio-plain.jpg）を使う */
.page-studio-contact .glp-fv__bg { background-image: url(assets/girls/studio/fv-studio-plain.jpg); filter: none; background-position: center center; }
.glcf-body { padding-bottom: 110px; }
.glcf-lead { max-width: 900px; margin: 0 auto 40px; font-size: 15px; line-height: 2.05; color: #D9D9DE; text-align: center; }
.glcf-card { border: 0; border-radius: 4px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); } /* 角丸はGIRLS共通の4px（SPの16pxも上書き） */
@media (max-width: 768px) {
	.glcf-card { border-radius: 4px; }
}
.page-contact-form .wpcf7 form .wpcf7-response-output {
	margin: 28px 0 0; padding: 14px 18px; border-radius: 10px;
	border: 2px solid var(--accent); font-weight: 700; text-align: center; color: var(--black);
}
.page-contact-form .wpcf7 form.sent .wpcf7-response-output { border-color: #2e9e5b; color: #2e9e5b; }
.page-contact-form .wpcf7 form.invalid .wpcf7-response-output,
.page-contact-form .wpcf7 form.failed .wpcf7-response-output { border-color: #dc3232; color: #dc3232; }
@media (max-width: 768px) {
	.glcf-body { padding-bottom: 72px; }
	.glcf-lead { text-align: left; font-size: 14px; padding: 0 4px; margin-bottom: 28px; }
}

/* ===================================================================== */
/*  投稿・コラム記事（single.php）— ピンク基調・記事プロース                   */
/* ===================================================================== */
.page-single { background: var(--white); }
/* ヘッダー(position:absolute・実測PC120px/SP74px)が記事タイトル/カテゴリに重なるため、
   ヘッダー高さ+余白ぶんのpadding-topを確保（2026-08-03。旧56px/40pxでは重なっていた） */
.page-single .post-hero { background: var(--base); padding: 160px 0 40px; }
/* GIRLS系カテゴリ（出演報告/LOICX GIRLS☆/オーディション）のお知らせ＝黒基調ヘッダーに合わせ
   ヒーローをGIRLSの黒に（黒ヘッダーの白MENU文字/ピンクロゴはピンク淡地だと沈むため）。
   本文は可読性優先で白のまま＝「黒マストヘッド＋白記事」の構成。 */
.page-single--girls .post-hero { background: #0B0B0E; }
.page-single--girls .post-title { color: #fff; }
.page-single--girls .post-date { color: #D9D9DE; }
.page-single--girls .post-cat { background: #ED1157; }
.page-single .post-hero__inner { max-width: 800px; margin: 0 auto; }
.post-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.post-cat { display: inline-block; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 999px; text-decoration: none; line-height: 1.4; }
.post-cat:hover { background: var(--secondary); }
.post-title { font-size: 32px; font-weight: 800; line-height: 1.5; color: var(--ink-strong); margin: 0 0 14px; }
.post-date { font-size: 14px; color: var(--grey-text); margin: 0; }
.post-thumb { max-width: 800px; margin: 32px auto 0; }
.post-thumb img { width: 100%; height: auto; border-radius: 12px; display: block; }

.post-content { max-width: 760px; margin: 40px auto 0; color: var(--black); font-size: 16px; line-height: 1.95; }
.post-content > *:first-child { margin-top: 0; }
.post-content p { margin: 0 0 1.6em; }
.post-content h2 { font-size: 26px; font-weight: 800; line-height: 1.5; color: var(--ink-strong); margin: 2.2em 0 .9em; padding: 0 0 .4em; border-bottom: 3px solid var(--primary); }
.post-content h3 { font-size: 21px; font-weight: 800; color: var(--primary); margin: 2em 0 .7em; }
.post-content h4 { font-size: 18px; font-weight: 700; color: var(--ink-strong); margin: 1.8em 0 .6em; }
.post-content h2:first-child, .post-content h3:first-child { margin-top: 0; }
.post-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.post-content a:hover { color: var(--secondary); }
.post-content strong { font-weight: 700; }
.post-content img, .post-content figure img { max-width: 100%; height: auto; border-radius: 10px; }
.post-content figure { margin: 1.8em 0; }
.post-content figcaption { font-size: 13px; color: var(--grey-text); text-align: center; margin-top: 8px; }
.post-content ul, .post-content ol { margin: 0 0 1.6em; padding-left: 1.5em; }
.post-content li { margin: 0 0 .5em; }
.post-content ul li { list-style: disc; }
.post-content ol li { list-style: decimal; }
.post-content blockquote { margin: 1.8em 0; padding: .6em 1.2em; border-left: 4px solid var(--secondary); background: var(--base); color: var(--grey-text); border-radius: 0 8px 8px 0; }
.post-content table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: 15px; }
.post-content th, .post-content td { border: 1px solid var(--divider); padding: 10px 14px; text-align: left; }
.post-content th { background: var(--base); font-weight: 700; }
.post-content hr { border: 0; border-top: 1px solid var(--divider); margin: 2.4em 0; }
.post-content .wp-block-image { margin: 1.8em 0; }
.post-content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.post-content iframe { max-width: 100%; }
.post-content .wp-block-embed__wrapper { max-width: 100%; }
/* 記事本文の幅100%指定ボタン（コラム記事下の共通誘導「> 近くの教室を探す」等）。
   テーマはGutenbergのblock CSSを読み込まないため width-100 が効かず、インラインの
   グラデ帯テキスト（リンク色ピンク）になっていた → ボタン体裁＋白文字をここで実装（2026-08-03）。 */
.post-content .wp-block-button.wp-block-button__width-100 { width: 100%; }
.post-content .wp-block-button.wp-block-button__width-100 .wp-block-button__link {
	display: block; width: 100%; box-sizing: border-box;
	padding: 16px 24px; border-radius: 8px; text-align: center;
	color: #fff; font-weight: 700; text-decoration: none;
}

.post-foot { max-width: 760px; margin: 56px auto 0; padding-bottom: 72px; }
.post-nav { display: flex; gap: 16px; justify-content: space-between; }
.post-nav__link { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-decoration: none; padding: 16px 18px; border: 1px solid var(--divider); border-radius: 12px; background: #fff; }
.post-nav__link:hover { background: var(--base); }
.post-nav__next { text-align: right; }
.post-nav__dir { font-size: 12px; color: var(--primary); font-weight: 700; }
.post-nav__ttl { font-size: 14px; color: var(--black); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.post-back { text-align: center; margin-top: 36px; }

@media (max-width: 768px) {
	.page-single .post-hero { padding: 108px 0 28px; }  /* SPヘッダー実測74px+余白 */
	.post-title { font-size: 24px; }
	.post-content { font-size: 15px; margin-top: 28px; }
	.post-content h2 { font-size: 21px; }
	.post-content h3 { font-size: 18px; }
	.post-nav { flex-direction: column; }
	.post-nav__next { text-align: left; }
}

/* ===================================================================== */
/*  投稿・コラム一覧（archive.php / category.php）— カードグリッド            */
/* ===================================================================== */
.arch-hero { background: var(--base); padding: 52px 0 44px; text-align: center; }
.arch-hero__title { font-size: 30px; font-weight: 800; color: var(--ink-strong); margin: 0; line-height: 1.4; }
.arch-hero__lead { margin: 12px 0 0; font-size: 15px; color: var(--grey-text); }
@media (max-width: 768px) { .arch-hero { padding: 36px 0 30px; } .arch-hero__title { font-size: 23px; } }
.arch-body { padding: 56px 0 80px; }
.arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
.arch-card { background: #fff; }
.arch-card__link { display: block; text-decoration: none; color: inherit; }
.arch-card__thumb { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--base); }
.arch-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.arch-card__link:hover .arch-card__thumb img { transform: scale(1.04); }
.arch-card__noimg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--base), #ffe3ec); }
.arch-card__body { padding: 14px 4px 0; }
.arch-card__cat { display: inline-block; font-size: 12px; font-weight: 700; color: var(--primary); margin: 0 0 8px; }
.arch-card__title { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ink-strong); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.arch-card__date { font-size: 13px; color: var(--grey-text); margin: 0; }

.arch-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 56px; }
.arch-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--divider); color: var(--black); font-size: 14px; font-weight: 700; text-decoration: none; }
.arch-pager a.page-numbers:hover { background: var(--base); }
.arch-pager .page-numbers.current { background: var(--primary); border-color: var(--primary); color: #fff; }
.arch-pager .page-numbers.dots { border: 0; background: transparent; }
.arch-empty { text-align: center; color: var(--grey-text); padding: 40px 0; }

@media (max-width: 900px) {
	.arch-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
@media (max-width: 768px) {
	.arch-body { padding: 36px 0 64px; }
	.arch-grid { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
	.arch-card__title { font-size: 14px; }
}
@media (max-width: 480px) {
	.arch-grid { grid-template-columns: 1fr; gap: 24px; }
	.arch-card__link { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; }
	.arch-card__thumb { aspect-ratio: 1 / 1; }
	.arch-card__body { padding: 0; }
	.arch-card__title { -webkit-line-clamp: 3; }
}