/* recruit.css — 講師募集（/recruit/*）専用コンポーネント
   Recruit UI-2 Version 1.1 準拠。tokens.css の値は変更せず、既存トークンのみで構成する。
   読み込みは講師募集系ページのみ（inc/enqueue.php で条件分岐）。
*/

/* 大学別ページへの内部リンク（フッター直前・控えめ。カード化しない） */
/* 文字色修正（2026-07-30）：--stoneは--bg/--bg-card/--bg-ruledいずれに対しても
   WCAG AA通常文字基準（4.5:1）を満たさないため、既存トークンの中から--ink-midへ変更した
   （--ink-midは3背景とも7.14〜8.94:1でAAを満たす。4節に実測値）。
   下線（text-decoration:underline）は維持し、色だけに依存しないリンク識別性を保つ。
   hoverは--forest（サイト共通のCTA hover挙動と同じ「濃くする」方向、9.98〜12.50:1）。
   focus-visibleは新規追加。既存の--sageアウトライン（.popura-recruit-form内）は
   非文字コントラスト基準（3:1）を--bg/--bg-ruledに対して満たさないため踏襲せず、
   3背景すべてで3:1を上回る--mossを採用した（4.78〜5.98:1）。 */
.popura-recruit-university-links{
	font-size:.8rem;
	color:var(--ink-mid);
	text-align:center;
	padding:var(--space-3) 0;
	margin:0;
}
.popura-recruit-university-links a{ color:var(--ink-mid); text-decoration:underline; }
.popura-recruit-university-links a:hover{ color:var(--forest); }
.popura-recruit-university-links a:focus-visible{ outline:2px solid var(--moss); outline-offset:2px; }

/* ラベル（FV上部の小見出し） */
.popura-recruit-eyebrow{
	display:inline-block;
	font-size:.8rem;
	font-weight:700;
	color:var(--moss);
	background:var(--bg-card);
	border:1px solid var(--sage);
	border-radius:999px;
	padding:4px 14px;
	margin-bottom:var(--space-2);
}

/* FV（2カラム：コピー／写真） */
.popura-recruit-hero{ background:var(--sage-pale); }
.popura-recruit-hero__inner{
	display:flex;
	flex-direction:column;
	gap:var(--space-4);
}
.popura-recruit-hero__copy{ text-align:left; }
.popura-recruit-hero__title{
	font-size:1.9rem;
	line-height:1.35;
	font-weight:700;
	letter-spacing:.01em;
	color:var(--forest);
	margin:0 0 var(--space-2);
}
.popura-recruit-hero__lead{
	font-size:1rem;
	color:var(--ink-mid);
	margin:0 0 var(--space-3);
}

/* 対応エリア表示（誇張を避けた事実表記。ピンアイコンで視線を止める） */
.popura-recruit-hero__areas{
	display:flex;
	align-items:flex-start;
	gap:6px;
	font-size:.85rem;
	color:var(--ink-mid);
	margin:0 0 var(--space-2);
}
.popura-recruit-hero__areas-icon{
	flex:0 0 auto;
	width:16px; height:16px;
	color:var(--moss);
	margin-top:2px;
}
.popura-recruit-hero__areas-icon svg{ width:100%; height:100%; }

/* 3つの特徴バッジ（時給・頻度・未経験可を一目で） */
.popura-recruit-badges{
	display:flex;
	flex-wrap:wrap;
	gap:var(--space-1);
	margin:0 0 var(--space-3);
}
.popura-recruit-badge{
	display:inline-block;
	font-size:.85rem;
	font-weight:700;
	color:var(--forest);
	background:var(--bg-card);
	border:1px solid var(--sage);
	border-radius:999px;
	padding:6px 14px;
	box-shadow:var(--shadow);
}

/* 指導時給の補足（バッジで既に要点は伝わっているため、CTAの後ろに小さな注記として配置） */
.popura-recruit-hero__wage-note{
	font-size:.8rem;
	color:var(--ink-mid);
	margin:var(--space-2) 0 0;
}
.popura-recruit-hero__wage-label{
	font-weight:700;
	color:var(--forest);
	margin-right:4px;
}
.popura-recruit-hero__media{ text-align:center; }
.popura-recruit-hero__media img{
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow);
}
@media (min-width:768px){
	.popura-recruit-hero__inner{
		flex-direction:row;
		align-items:center;
		text-align:left;
	}
	.popura-recruit-hero__copy{ flex:1 1 55%; }
	.popura-recruit-hero__media{ flex:1 1 45%; }
	.popura-recruit-hero__title{ font-size:2.4rem; line-height:1.3; }
}

/* 見出し（Recruit専用・短く太く） */
.popura-recruit-heading{
	font-size:1.45rem;
	line-height:1.45;
	font-weight:700;
	color:var(--forest);
}
@media (min-width:768px){
	.popura-recruit-heading{ font-size:1.75rem; }
}

/* 時給強調コンポーネント */
.popura-recruit-stat-row{
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-2);
	margin-bottom:var(--space-3);
}
@media (min-width:768px){
	.popura-recruit-stat-row{ grid-template-columns:repeat(2,1fr); }
}
.popura-recruit-stat{
	background:var(--bg-card);
	border:1px solid var(--sage);
	border-radius:20px;
	box-shadow:var(--shadow);
	padding:var(--space-3);
	text-align:center;
}
.popura-recruit-stat__label{
	display:block;
	font-size:.9rem;
	color:var(--ink-mid);
	margin-bottom:var(--space-1);
}
.popura-recruit-stat__value{
	display:block;
	font-size:2.1rem;
	font-weight:700;
	color:var(--forest);
	line-height:1.2;
}
.popura-recruit-stat__unit{ font-size:1.1rem; font-weight:700; }
.popura-recruit-stat__note{
	font-size:.8rem;
	color:var(--stone);
	text-align:center;
	margin:0;
}

/* カード（働き方・大学カード共通のRecruit modifier） */
.popura-card--recruit{
	border-radius:20px;
	padding:var(--space-3);
	border:1px solid var(--sage-pale);
	transition:transform var(--transition);
}
@media (min-width:768px){
	.popura-card--recruit:hover{ transform:translateY(-2px); }
}

/* Project18: 共通画像ライブラリ（8カテゴリ）のセクション見出し画像。
   画像・見出し・本文は常に縦積み（スマホ／PC問わず）。
   2026-08-05 Image Library v1.0納品：縦長画像（アスペクト比0.47〜0.67）が中心のため、
   width:100%のみだとページが極端に縦長になる。max-height+object-fit:coverで表示上限を設ける
   （画像の実ファイルは加工しない。表示領域のみの調整）。 */
.popura-recruit-section-image{
	width:100%;
	max-height:440px;
	object-fit:cover;
	object-position:center;
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow);
	margin-bottom:var(--space-3);
}

/* Project18: 「家庭教師の仕事内容」内、縦3枚固定カード（週1回〜／未経験でも安心／学業・サークルと両立）。
   .popura-grid のみ（--2・--3修飾子を使わない）で、768px以上でも常に1カラム＝横並びにしない。
   画像は03_work_cardsの統合1枚を.popura-recruit-section-imageとしてこの直前に表示する。 */
.popura-recruit-workcards{ margin-top:var(--space-3); }

/* 対象講師カード（幅広い講師層） */
.popura-recruit-audience{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:var(--space-2);
}
@media (min-width:768px){
	.popura-recruit-audience{ grid-template-columns:repeat(3,1fr); }
}
.popura-recruit-audience__item{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:var(--space-1);
	text-align:center;
	padding:var(--space-2);
}
.popura-recruit-audience__icon{
	width:40px; height:40px;
	color:var(--moss);
}
.popura-recruit-audience__icon svg{ width:100%; height:100%; }
.popura-recruit-audience__label{ font-size:.9rem; font-weight:700; color:var(--forest); }

/* 応募フロー（ステップ） */
.popura-recruit-steps{
	display:flex;
	flex-direction:column;
	gap:var(--space-3);
}
.popura-recruit-step{
	display:flex;
	gap:var(--space-2);
	align-items:flex-start;
}
.popura-recruit-step__number{
	flex:0 0 auto;
	width:32px; height:32px;
	border-radius:50%;
	background:var(--moss);
	color:#fff;
	font-weight:700;
	display:flex; align-items:center; justify-content:center;
	font-size:.95rem;
}
.popura-recruit-step__title{
	font-weight:700;
	color:var(--forest);
	margin:0 0 4px;
}
.popura-recruit-step__text{
	color:var(--ink-mid);
	font-size:.9rem;
	margin:0;
}
@media (min-width:768px){
	.popura-recruit-steps{
		flex-direction:row;
		flex-wrap:wrap;
	}
	.popura-recruit-step{ flex:1 1 30%; flex-direction:column; text-align:center; align-items:center; }
}

/* 講師の声カード（写真4:3・準備中フォールバック対応） */
.popura-recruit-voice{
	background:var(--bg-card);
	border:1px solid var(--bg-ruled);
	border-radius:20px;
	box-shadow:var(--shadow);
	overflow:hidden;
}
.popura-recruit-voice__media{
	aspect-ratio:4/3;
	background:var(--bg-ruled);
	display:flex; align-items:center; justify-content:center;
	color:var(--stone);
	font-size:.85rem;
}
.popura-recruit-voice__media img{ width:100%; height:100%; object-fit:cover; }
.popura-recruit-voice__body{ padding:var(--space-3); }
.popura-recruit-voice__meta{ font-size:.8rem; color:var(--stone); margin-bottom:var(--space-1); }
.popura-recruit-voice__text{ font-size:.95rem; color:var(--ink); margin:0; }

/* 仮登録フォーム */
.popura-recruit-form label{ font-weight:700; color:var(--forest); font-size:.9rem; }
.popura-recruit-form input[type="text"]:focus,
.popura-recruit-form input[type="tel"]:focus,
.popura-recruit-form input[type="email"]:focus,
.popura-recruit-form select:focus{ outline:2px solid var(--sage); outline-offset:1px; }
.popura-field-error{ border-color:var(--seal) !important; }

/* Recruit専用CTA（保護者向けcta.phpは使用しない） */
.popura-recruit-cta{ background:var(--sage-pale); text-align:center; }
.popura-recruit-cta__title{ margin-bottom:var(--space-2); }
.popura-recruit-cta__note{
	font-size:.85rem;
	color:var(--ink-mid);
	max-width:var(--content-max);
	margin:var(--space-2) auto 0;
}

/* =====================================================================
   ブランドカラー調整（大学個別ページ限定・2026-08-04 代表承認）
   対象は body.single-recruit のみ。tokens.css／layout.css／components.css は
   一切変更しない。既存の --forest 等の共有トークン名は上書きせず、
   専用の --rc-* 変数を新設する（ヘッダー等の共有要素への意図しない波及を避けるため）。
   例外：--bg-ruled のみ、大学ページ内の交互セクション背景（PHP側インライン
   style="background:var(--bg-ruled)"）にPHPを変更せず反映するため、
   body.single-recruit スコープ限定で値を再定義する（他ページには影響しない）。
   PHPロジック・HTML構造・文言は一切変更していない。
   ===================================================================== */
body.single-recruit,
body.popura-recruit-ui{
	--rc-heading:     #159A47;
	--rc-subgreen:    #5A8A3C;
	--rc-cta:         #56C770;
	--rc-cta-hover:   #159A47;
	--rc-gold:        #F9A825;
	--rc-bg:          #FBFAF5;
	--rc-bg-alt:      #F3EFE5;
	--rc-card-border: rgba(21,154,71,0.15);
	/* フッター背景（2026-08-26 代表指示で新保護者サイトの帯緑へ変更）。
	   growthup.club のページ見出し帯 bg-mainttl.svg の実色 #50C86C に合わせる。
	   経緯: #2E4A33（濃緑・規定違反）→ #57A05F（2026-08-12 B+規定色）→ 本値。 */
	--rc-footer-bg:   #50C86C;

	/* 交互セクション背景（PHP側インラインstyleが参照する既存トークンを、
	   このページ内でのみ再定義する。#ece5d8→#F3EFE5は近似色で他要素への影響は軽微）。 */
	--bg-ruled: var(--rc-bg-alt);

	background:var(--rc-bg);
}

/* 見出し */
body.popura-recruit-ui .popura-recruit-hero__title,
body.popura-recruit-ui .popura-recruit-heading{ color:var(--rc-heading); }
/* 時給の数字（2,000円〜／2,000〜3,000円）は濃緑(--forest)だと黒に見えるため
   見出しと同じブランド緑へ（2026-08-26 代表指示） */
body.popura-recruit-ui .popura-recruit-stat__value{ color:var(--rc-heading); }
body.popura-recruit-ui .popura-card__title,
body.popura-recruit-ui .popura-recruit-step__title{ color:var(--rc-subgreen); }
body.popura-recruit-ui .popura-recruit-hero__wage-label{ color:var(--rc-heading); }

/* FV背景・バッジ（2026-08-04 二回目調整：#FBFAF5ベース＋ごく薄い緑アクセント） */
body.popura-recruit-ui .popura-recruit-hero{
	background:
		radial-gradient(circle at 88% 12%, rgba(86,199,112,.10) 0%, transparent 42%),
		radial-gradient(circle at 8% 92%, rgba(21,154,71,.06) 0%, transparent 38%),
		var(--rc-bg);
}
body.popura-recruit-ui .popura-recruit-eyebrow,
body.popura-recruit-ui .popura-recruit-badge{
	border-color:var(--rc-heading);
	color:var(--rc-heading);
}

/* CTA（ページ内の.popura-cta全て。フッター上のCTAも含め統一） */
body.popura-recruit-ui .popura-cta{ background:var(--rc-cta); color:#fff; }
body.popura-recruit-ui .popura-cta:hover{ background:var(--rc-cta-hover); color:#fff; }

/* Recruit専用CTAセクション（フッター直前の緑ブロック）の背景 */
body.popura-recruit-ui .popura-recruit-cta{ background:var(--rc-bg-alt); }

/* カード（FAQ／関連大学／キャンパス／仕事内容・募集条件共通。--recruit修飾の有無を問わず対象） */
body.popura-recruit-ui .popura-card{ border-color:var(--rc-card-border); }
body.popura-recruit-ui .popura-recruit-step__number{ background:var(--rc-subgreen); }

/* FVの縦余白圧縮（モバイルのみ・約20%） */
@media (max-width:767px){
	body.popura-recruit-ui .popura-recruit-hero{ padding:calc(var(--space-5) * 0.8) 0; }
	body.popura-recruit-ui .popura-recruit-hero__inner{ gap:calc(var(--space-4) * 0.8); }
}

/* CTA下からパンくずまでの余白を減らす（隣接セレクタ。HTML変更不要） */
body.popura-recruit-ui .popura-recruit-hero + .popura-container{ padding-top:var(--space-3); }

/* フッター（大学ページ限定。footer.php・layout.cssは変更しない。文言は今回未変更） */
body.popura-recruit-ui .popura-footer{
	background:var(--rc-footer-bg);
	border-top:2px solid var(--rc-gold);
}
body.popura-recruit-ui .popura-footer__brand{ color:#fff; margin-bottom:var(--space-1); }
/* 2026-08-12：フッター背景変更に伴う可読性調整（2026-08-26 #50C86C 化で数値更新）。
   白文字 × #50C86C は約2.1:1 で、WCAG AA の通常文字基準（4.5:1）・大文字基準（3:1）
   のいずれにも届かない。新保護者サイトの帯と同一配色（白文字×#50C86C）に合わせる
   代表指示を優先し、背景は維持のうえ文字側で可能な限り補う：
   ・注記の白85%（2.74:1）→ 白100%（3.18:1）へ引き上げ、透過による低下をなくす
   ・リンクに下線を付け、色だけに依存しない識別性を確保する
   ・注記を13px→15px・line-height 1.9 とし、実際の読みやすさを上げる
   ※15pxはWCAGの「大文字」定義（24px通常／18.66px太字）には該当しないため、
   　注記・リンクは形式上AA通常基準を満たさない。ブランド規定色を維持する判断による
   　（2026-08-12 代表決定）。ロゴ行のみ20px太字＝AA大文字基準を満たす。 */
body.popura-recruit-ui .popura-footer a{
	color:#fff;
	text-decoration:underline;
}
body.popura-recruit-ui .popura-footer a:focus-visible{
	outline:2px solid #fff;
	outline-offset:2px;
}
body.popura-recruit-ui .popura-footer__note{
	color:#fff;
	font-size:15px;
}

/* =====================================================================
   ブランドデザイン調整 第2弾（2026-08-04 代表承認）
   引き続き body.single-recruit ・ recruit.css のみ。HTML・PHP・文言は無変更。
   ===================================================================== */

/* ③ カードデザイン改善：左に緑のアクセント線、角丸統一、影を弱める */
body.popura-recruit-ui .popura-card{
	border-left:4px solid var(--rc-cta);
	border-radius:16px;
	box-shadow:0 1px 6px rgba(21,154,71,.07);
}

/* ④ CTAの視認性改善：影と、ホバー時の動き・強調を追加
   （既存のtransform:translateY(-1px)はcomponents.cssの共有ルール。
   ここではbody.single-recruit限定でより明確な動き・影に上書きする） */
body.popura-recruit-ui .popura-cta{
	box-shadow:0 4px 14px rgba(86,199,112,.35);
	transition:background var(--transition), transform var(--transition), box-shadow var(--transition);
}
body.popura-recruit-ui .popura-cta:hover{
	box-shadow:0 6px 20px rgba(21,154,71,.4);
	transform:translateY(-2px);
}

/* ⑤ フッター：余白を広げ、行間を改善し、ロゴを目立たせる（HTMLは無変更） */
body.popura-recruit-ui .popura-footer{
	padding:var(--space-6) var(--space-3);
}
body.popura-recruit-ui .popura-footer__brand{
	font-size:1.25rem;
	font-weight:700;
	letter-spacing:.02em;
	margin-bottom:var(--space-2);
}
body.popura-recruit-ui .popura-footer__note{
	line-height:1.9;
	margin-top:var(--space-3);
}

/* =====================================================================
   Project20 FV v2（2026-08-05 代表承認）
   readyページのFVのみ再構成。すべて .popura-recruit-hero--v2 配下に限定し、
   非readyページ（旧Hero）のレイアウトへは一切影響させない。
   表示順：小ラベル → FV画像 → H1 → lead → 実リンクCTA → 補足文
   ===================================================================== */

/* 縦積みを維持（PCでも横並びに戻さない）。
   inner の gap は 0 に固定し、要素間の余白は各要素の margin で個別制御する。
   既存の body.single-recruit スコープのモバイル用 gap 指定（詳細度 0,2,1）に
   負けないよう、v2側も body.single-recruit を付けて詳細度を 0,3,1 に引き上げる。 */
body.single-recruit .popura-recruit-hero--v2 .popura-recruit-hero__inner{
	display:flex;
	flex-direction:column;
	gap:0;
}

/* 小ラベル → 画像 の間隔は 16px（PC・スマホ共通） */
body.single-recruit .popura-recruit-hero--v2 .popura-recruit-eyebrow{
	display:inline-block;
	align-self:flex-start;
	margin:0 0 16px;
}

/* FV画像：中央配置・3:2維持・画像 → H1 は 24px */
body.single-recruit .popura-recruit-hero--v2 .popura-recruit-hero__media{
	width:100%;
	max-width:1040px;
	margin:0 auto 24px;
	text-align:center;
}
.popura-recruit-hero--v2 .popura-recruit-hero__media img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:3 / 2;      /* 画像原寸も3:2のため実質的な切り抜きは発生しない */
	object-fit:cover;
	object-position:center;
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow);
}

/* 本文ブロック：読みやすい幅に制限 */
.popura-recruit-hero--v2 .popura-recruit-hero__copy{
	width:100%;
	max-width:720px;
	margin:0 auto;
	text-align:left;
}
.popura-recruit-hero--v2 .popura-recruit-hero__title{ margin:0 0 var(--space-2); }

/* PC（768px以上）：H1を大きく。横並びには戻さない。
   FV画像は最大720px（約720x480px）に抑え、実リンクCTAの全体が
   1440x900の初期画面に収まるようにする（2026-08-05 代表指示）。
   この720px指定はPC用メディアクエリ内に閉じ、タブレット・スマホには強制しない。 */
@media (min-width:768px){
	body.single-recruit .popura-recruit-hero--v2 .popura-recruit-hero__inner{ flex-direction:column; }
	/* Hero上下の余白を圧縮（48px→24px）。CTAを初期画面へ繰り上げるため */
	body.single-recruit .popura-recruit-hero--v2{ padding-top:24px; padding-bottom:32px; }
	body.single-recruit .popura-recruit-hero--v2 .popura-recruit-hero__media{
		max-width:720px;     /* 3:2のため表示は約720x480px。トリミングは発生しない */
		margin-bottom:20px;  /* 画像 → H1（24px→20px） */
	}
	body.single-recruit .popura-recruit-hero--v2 .popura-recruit-hero__title{
		font-size:2.0rem;
		line-height:1.26;
		margin:0 0 8px;      /* H1の下余白を圧縮 */
	}
	body.single-recruit .popura-recruit-hero--v2 .popura-recruit-hero__lead{
		margin:0 0 12px;     /* leadの下余白を圧縮 */
	}
}

/* スマホ：画像は現状維持（幅いっぱい・3:2）。横スクロールは発生させない */
@media (max-width:767px){
	body.single-recruit .popura-recruit-hero--v2 .popura-recruit-hero__media{ margin-bottom:24px; }
	body.single-recruit .popura-recruit-hero--v2 .popura-recruit-hero__title{ font-size:1.75rem; line-height:1.4; }
}

/* =====================================================================
   Project21 追従CTA（2026-08-05 代表承認）
   readyページのみ（single-recruit.php の ready 分岐でのみ出力される要素）。
   非readyページには .popura-recruit-sticky-cta 自体が存在しないため影響ゼロ。
   スコープは body.popura-recruit-ui（Recruit領域共通）。大学ページと地域ページの
   両方に効かせるため、body.single-recruit ではなくこちらに一本化している（2026-09-05）。
   表示制御は assets/js/recruit-sticky-cta.js が .is-visible を付け外しする。
   position:fixed のため通常フローに影響せず、CLSを発生させない。
   ===================================================================== */

body.popura-recruit-ui .popura-recruit-sticky-cta{
	position:fixed;
	z-index:900;
	opacity:0;
	visibility:hidden;
	pointer-events:none;              /* 非表示時はタップ・クリックを透過 */
	transition:opacity .25s ease, transform .25s ease;
}
body.popura-recruit-ui .popura-recruit-sticky-cta.is-visible{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}
/* 追従CTA内のボタンは既存 .popura-cta の見た目を継承しつつ、余白のみ整える */
body.popura-recruit-ui .popura-recruit-sticky-cta .popura-cta{
	margin:0;
	white-space:nowrap;
	box-shadow:0 4px 16px rgba(0,0,0,.18);
}

/* スマホ（〜767px）：画面下端の固定バー */
@media (max-width:767px){
	body.popura-recruit-ui .popura-recruit-sticky-cta{
		left:0; right:0; bottom:0;
		padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background:rgba(255,255,255,.96);
		border-top:1px solid var(--rc-card-border, #e3e8e3);
		transform:translateY(8px);
	}
	body.popura-recruit-ui .popura-recruit-sticky-cta.is-visible{ transform:translateY(0); }
	body.popura-recruit-ui .popura-recruit-sticky-cta .popura-cta{
		display:block;
		width:100%;
		text-align:center;
	}
	/* 固定バーでフッターが隠れないよう、readyページのみ下部に逃がしを作る */
	body.popura-recruit-ui .popura-footer{
		padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px));
	}
}

/* PC（768px〜）：右下のフローティングボタン */
@media (min-width:768px){
	body.popura-recruit-ui .popura-recruit-sticky-cta{
		right:24px; bottom:24px;
		transform:translateY(8px);
	}
	body.popura-recruit-ui .popura-recruit-sticky-cta.is-visible{ transform:translateY(0); }
}

/* モーションを抑える設定の利用者にはアニメーションを無効化 */
@media (prefers-reduced-motion:reduce){
	body.popura-recruit-ui .popura-recruit-sticky-cta{ transition:none; transform:none; }
	body.popura-recruit-ui .popura-recruit-sticky-cta.is-visible{ transform:none; }
}

/* =====================================================================
   Project22 神戸学院大学ページ（正式基準ページ）整備（2026-08-12 代表承認）
   readyページのみに存在する要素だけを対象にする。既存セレクタは変更しない。
   すべて body.single-recruit スコープ内に閉じ、非readyページ・他ページへ影響させない。
   ===================================================================== */

/* --- 本文コンテナの左右余白の復元（既存不具合の修正） -------------------
   layout.css の宣言順により .popura-section{padding:var(--space-5) 0} が
   .popura-container{padding:0 var(--space-2)} を後勝ちで打ち消し、
   <div class="popura-container popura-section"> の左右パディングが 0 になっていた。
   スマホで本文・見出し・カードが画面端に密着するため復元する。
   layout.css は変更せず、readyページのみに付与した .popura-recruit-body に限定して当てる
   （非readyページ・Recruit TOP・他ページには影響しない）。 */
body.popura-recruit-ui .popura-recruit-body{
	padding-left:var(--space-2);
	padding-right:var(--space-2);
}

/* --- 上部CTA（画像バナー） -------------------------------------------
   画像全体をクリック可能にする。画像は width:100% / height:auto を基本とし、
   スマホで横にはみ出さないようにする（原寸1920x819のため縮小のみ発生）。 */
body.single-recruit .popura-recruit-cta-banner{
	text-align:center;
}
body.single-recruit .popura-recruit-cta-banner__link{
	display:block;
	max-width:520px;          /* ボタンとして自然な最大幅。PCで間延びさせない */
	margin:0 auto;
	border-radius:var(--radius-lg);
	transition:transform var(--transition), box-shadow var(--transition);
}
body.single-recruit .popura-recruit-cta-banner__image{
	display:block;
	width:100%;
	height:auto;              /* 原寸比を維持。max-heightで切り抜かない */
	border-radius:var(--radius-lg);
	box-shadow:0 4px 14px rgba(21,154,71,.22);
}
@media (min-width:768px){
	body.single-recruit .popura-recruit-cta-banner__link:hover{ transform:translateY(-2px); }
	body.single-recruit .popura-recruit-cta-banner__link:hover .popura-recruit-cta-banner__image{
		box-shadow:0 6px 20px rgba(21,154,71,.32);
	}
}
body.single-recruit .popura-recruit-cta-banner__link:focus-visible{
	outline:3px solid var(--rc-heading);
	outline-offset:3px;
}

/* --- 縦長の図解画像（4メリット／お仕事内容） --------------------------
   .popura-recruit-section-image は max-height:440px + object-fit:cover のため、
   文字が入った縦長の図解では下部が切れてしまう。--tall では切り抜かず全体を表示する。
   スマホファースト：横幅いっぱい・高さは原寸比。 */
body.popura-recruit-ui .popura-recruit-section-image--tall{
	max-height:none;
	object-fit:contain;
	height:auto;
	max-width:520px;          /* 縦長画像がPCで巨大化しないよう上限を設ける */
	margin-left:auto;
	margin-right:auto;
	display:block;
}

/* --- 小見出し（セクション内の区切り） --------------------------------- */
body.single-recruit .popura-recruit-subheading{
	font-size:1.05rem;
	font-weight:700;
	color:var(--rc-subgreen);
	margin:var(--space-3) 0 var(--space-2);
}

/* --- 勤務エリア（4アイコンカード） ------------------------------------
   スマホは2列。窮屈になる375px以下では1列へ落とす（ご指示どおり縦積み優先）。 */
body.single-recruit .popura-recruit-areas{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:var(--space-2);
}
@media (max-width:374px){
	body.single-recruit .popura-recruit-areas{ grid-template-columns:1fr; }
}
@media (min-width:768px){
	body.single-recruit .popura-recruit-areas{ grid-template-columns:repeat(4,1fr); }
}
body.single-recruit .popura-recruit-area{
	background:var(--bg-card);
	border:1px solid var(--rc-card-border);
	border-left:4px solid var(--rc-cta);
	border-radius:16px;
	box-shadow:0 1px 6px rgba(21,154,71,.07);
	padding:var(--space-2);
	text-align:center;
}
body.single-recruit .popura-recruit-area__icon{
	display:block;
	width:64px;
	height:auto;              /* 正方形1254pxを64pxへ縮小。はみ出さない */
	margin:0 auto var(--space-1);
}
body.single-recruit .popura-recruit-area__title{
	font-size:.95rem;
	font-weight:700;
	color:var(--rc-subgreen);
	margin:0 0 4px;
}
body.single-recruit .popura-recruit-area__text{
	font-size:.85rem;
	line-height:1.7;
	color:var(--ink-mid);
	margin:0;
}

/* =====================================================================
   Recruit UI統一（2026-08-24 代表指示）
   大学別Recruitページ（正本）に合わせて Recruit TOP / 仮登録フォーム /
   仮登録完了ページのレイアウトを揃える。新しい配色・新トークンは作らない。
   スコープは body.popura-recruit-ui（inc/template-helpers.php が付与。
   判定は popura_is_recruit_context()）。保護者サイトには一切出力されない。
   HTML構造・文言・SEO・計測は変更していない。
   ===================================================================== */

/* --- 本文コンテナの左右余白（スマホで本文が画面端に密着する不具合の修正） ---------
   layout.css の宣言順により .popura-section{padding:var(--space-5) 0} が
   .popura-container{padding:0 var(--space-2)} を後勝ちで打ち消すため、
   <div class="popura-container popura-section"> の左右paddingが 0 になっていた。
   大学別ページは .popura-recruit-body で個別に復元済みだったが、
   TOP・仮登録フォーム・完了ページ・conditions・faq には付いていなかった。
   layout.css は変更せず、Recruit領域のみ復元する（値は大学別ページと同じ16px）。
   section背景は全幅のまま・中のcontent containerにだけ余白を持たせる構造を維持する。 */
body.popura-recruit-ui .popura-container.popura-section{
	padding-left:var(--space-2);
	padding-right:var(--space-2);
}

/* --- スマホのFV見出し（不自然な1文字折返しの解消） ------------------------
   固定1.9rem（30.4px）では「講師登録（仮登録）はこちら」（13文字）が
   375pxで343pxの本文幅に収まらず、最後の「ら」だけが2行目に落ちていた。
   大学別ページ（--v2）は body.single-recruit スコープで1.75rem固定＝詳細度が
   高いため、この指定では上書きされない（正本の見た目は変わらない）。
   下限1.55rem・上限1.75rem（大学別ページと同値）で、375〜430pxのどの幅でも
   13文字が1行に収まる。PC（768px以上）は既存の2.4remを維持する。 */
@media (max-width:767px){
	body.popura-recruit-ui .popura-recruit-hero__title{
		font-size:clamp(1.55rem, 6.6vw, 1.75rem);
		line-height:1.4;
	}
}

/* --- FV写真枠（写真未設定でも余白を作らない） -----------------------------
   archive-recruit.php は写真が無いとき .popura-recruit-hero__media を出力しない。 */
body.popura-recruit-ui .popura-recruit-hero__media:empty{ display:none; }
body.popura-recruit-ui .popura-recruit-hero__media img{
	height:auto;
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow);
}

/* --- Recruit TOPのFV写真（2026-08-24 縦ポスター→2026-08-26 横長3:2へ） -----
   TOP画像は 01_fv_v4（3:2横長・画像内ロゴなし）。見出し・サブコピー・3カードが
   焼き込まれているため cover での切り抜きは禁止（contain 維持）。
   :not(--v2) で大学別ページ側の既存指定と明確に分ける方針は据え置き。
   写真が未設定なら .popura-recruit-hero__media 自体が出力されないので影響ゼロ。 */
body.popura-recruit-ui .popura-recruit-hero:not(.popura-recruit-hero--v2) .popura-recruit-hero__media{
	width:100%;
	text-align:center;
}
body.popura-recruit-ui .popura-recruit-hero:not(.popura-recruit-hero--v2) .popura-recruit-hero__media img{
	width:auto;
	max-width:100%;
	margin:0 auto;
	object-fit:contain;   /* 縦横比を保ち、絶対に切り抜かない */
}
@media (max-width:767px){
	/* ポスター型の画像なのでFVの先頭に置く（コピー・CTAの後ろへ回さない）。
	   HTMLの順序は変えずCSSのorderだけで入れ替える。 */
	body.popura-recruit-ui .popura-recruit-hero:not(.popura-recruit-hero--v2) .popura-recruit-hero__media{
		order:-1;
		margin-bottom:var(--space-1);
	}
	/* 画面の過半を超えないよう高さで上限をかける（縮小のみ・切り抜きなし） */
	body.popura-recruit-ui .popura-recruit-hero:not(.popura-recruit-hero--v2) .popura-recruit-hero__media img{
		max-height:56vh;
	}
}
@media (min-width:768px){
	/* PCは「FV画像だけ」を先頭に全幅表示し、コピーは画像の下へ置く
	   （2026-08-26 代表指示。従来の2カラム＝コピー左／写真右を廃止）。
	   HTMLの順序は変えず、モバイルと同じくCSSのorderだけで入れ替える。 */
	body.popura-recruit-ui .popura-recruit-hero--poster .popura-recruit-hero__inner{
		flex-direction:column;
		align-items:stretch;
	}
	body.popura-recruit-ui .popura-recruit-hero--poster .popura-recruit-hero__media{
		order:-1;
		flex:0 0 auto;
	}
	body.popura-recruit-ui .popura-recruit-hero:not(.popura-recruit-hero--v2) .popura-recruit-hero__media img{
		width:100%;
		max-width:100%;
		height:auto;
		max-height:none;   /* 全幅表示（コンテナ最大1080px→約720px高）。containのまま切り抜きなし */
	}
}

/* --- ポスター画像とH1の二重表示を防ぐ（2026-08-24 代表決定） ----------------
   FVポスター画像には見出しコピー「教えることで、教えられることがある。」が焼き込まれている。
   H1に同じ文言を置くと画面上で同一の一文が2回続いて表示されるため、
   画像が設定されているとき（.popura-recruit-hero--poster）だけH1を視覚的に隠す。
   **HTMLからは消さない**：テキストのまま残るので、検索エンジンにも
   スクリーンリーダーにも従来どおり見出しとして伝わる（画像の文言と完全に同一）。
   画像が未設定のときはこのクラスが付かないため、H1は従来どおり表示される。 */
body.popura-recruit-ui .popura-recruit-hero--poster .popura-recruit-hero__title{
	position:absolute;
	width:1px;
	height:1px;
	margin:-1px;
	padding:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}

/* --- 仮登録フォーム ------------------------------------------------------
   入力項目・validation・送信処理は変更していない。見た目のみ。
   ・font-size:16px … iOSでフォーカス時に画面が自動ズームするのを防ぐ（16px未満で発生）
   ・box-sizing … width:100%（インラインstyle）とpaddingの併用で横にはみ出さないようにする
   ・focus … 既存の text/tel/email/select と同じ輪郭を textarea にも付ける */
body.popura-recruit-ui .popura-recruit-form input[type="text"],
body.popura-recruit-ui .popura-recruit-form input[type="tel"],
body.popura-recruit-ui .popura-recruit-form input[type="email"],
body.popura-recruit-ui .popura-recruit-form select,
body.popura-recruit-ui .popura-recruit-form textarea{
	font-size:16px;
	font-family:inherit;
	line-height:1.6;
	color:var(--ink);
	background:var(--bg-card);
	box-sizing:border-box;
	max-width:100%;
}
body.popura-recruit-ui .popura-recruit-form textarea:focus{
	outline:2px solid var(--sage);
	outline-offset:1px;
}
/* ラジオ・チェックボックスは指で押せる大きさにし、ラベルと縦位置を揃える */
body.popura-recruit-ui .popura-recruit-form input[type="radio"],
body.popura-recruit-ui .popura-recruit-form input[type="checkbox"]{
	width:20px;
	height:20px;
	margin-right:8px;
	vertical-align:-4px;
	accent-color:var(--rc-cta);
}
/* 送信ボタン（.popura-cta）はスマホで幅いっぱい＝押し間違いと折返しを防ぐ */
@media (max-width:767px){
	body.popura-recruit-ui .popura-recruit-form button[type="submit"].popura-cta{
		display:block;
		width:100%;
	}
}

/* --- 完了ページ・TOPの中央寄せセクション -------------------------------
   .popura-content（最大760px）の中で更に .popura-section が入る構造のため、
   左右余白は親コンテナ側で担保する。ここでは行長だけ整える。 */
body.popura-recruit-ui .popura-content > .popura-section{
	padding-left:0;
	padding-right:0;
}

/* ========================================================================
   地域から探す導線（PHASE C.5）
   Recruit TOP と大学ページから地域ページへの内部リンク。
   **CTAではなく情報探索用**なので .popura-cta の見た目（塗りボタン）を使わず、
   既存の .popura-card--recruit と同じ枠線カードの体裁に揃える。
   スマホで押しやすいよう、リンク自体をカード全体に広げてタップ領域を確保する。
   配色は既存の --rc-* をそのまま使う（新色を足さない）。
   ===================================================================== */
body.popura-recruit-ui .popura-recruit-area-nav__list{
	list-style:none;
	margin:var(--space-3) 0 0;
	padding:0;
	display:grid;
	gap:var(--space-2);
}
@media (min-width:768px){
	body.popura-recruit-ui .popura-recruit-area-nav__list{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}
body.popura-recruit-ui .popura-recruit-area-nav__item{ margin:0; }
body.popura-recruit-ui .popura-recruit-area-nav__link{
	display:block;
	/* タップ領域を確保する（スマホ優先）。ボタンに見せないため塗りは使わない。 */
	padding:var(--space-3);
	min-height:44px;
	border:1px solid var(--sage-pale);
	border-radius:20px;
	background:#fff;
	text-decoration:none;
	color:var(--ink);
	transition:transform var(--transition), border-color var(--transition);
}
body.popura-recruit-ui .popura-recruit-area-nav__link:hover,
body.popura-recruit-ui .popura-recruit-area-nav__link:focus-visible{
	border-color:var(--rc-heading);
}
@media (min-width:768px){
	body.popura-recruit-ui .popura-recruit-area-nav__link:hover{ transform:translateY(-2px); }
}
body.popura-recruit-ui .popura-recruit-area-nav__name{
	display:block;
	font-weight:700;
	color:var(--rc-heading);
}
body.popura-recruit-ui .popura-recruit-area-nav__meta{
	display:block;
	margin-top:6px;
	font-size:.9rem;
	color:var(--ink);
	opacity:.8;
}
body.popura-recruit-ui .popura-recruit-area-nav__note{
	margin-top:var(--space-3);
	font-size:.95rem;
}