@charset "utf-8";
/* TOPページの手当て（2026-10-04）。
   ⚠ top.css は旧WordPressからそのまま写した生成物なので触らない。ここで上書きだけする。 */

/* 写真を外したカード（施設一覧・企業案内・お知らせ）。
   ⚠ .nav-list>li は PC幅で flex-direction:row / justify-content:space-between。
     写真が無い状態で放っておくと、文章が inner の 1500px いっぱいに伸びて1行が長くなりすぎる。
   ⚠ width:100% を必ず付ける。.nav-list>li は align-items:center なので、
     これが無いと**文章の短いカードだけ横幅が縮んで中央に寄り**、見出しが字下げして見える
     （お知らせのカードで踏んだ）。 */
.nav-list > li.no-photo .summary {
	width: 100%;
	max-width: 600px;
}
@media (min-width: 1025px) {
	.nav-list > li.no-photo {
		/* 写真があるカードと左端をそろえる。下の余白も写真の高さぶん要らなくなる */
		margin-bottom: 60px;
	}
	.nav-list > li.no-photo .summary {
		max-width: 700px;
	}
}

/* お知らせ（#top-news）。事業紹介の上に置いた新しいセクション。
   ⚠ .news-list の見た目は news.css にあるが、TOPは news.css を読まない。
     必要なぶんだけここに写す（news.css を TOP に足すと post-content などが丸ごと付いてくる）。 */
/* ⚠ 下の余白は #top-service のカーブより大きく取る。
     #top-service svg は top:-30px（561px〜 -50px、1025px〜 -100px）・z-index:2・fill:#FAFAFA で
     **前のセクションの上に覆いかぶさる**。余白が足りないと「お知らせを見る」のボタンが
     カーブに塗りつぶされて消える（実際に踏んだ）。 */
#top-news {
	padding: 50px 0 50px;
}
@media (min-width: 561px) {
	#top-news { padding-bottom: 70px; }
}
@media (min-width: 1025px) {
	#top-news { padding: 80px 0 130px; }
}
#top-news .news-list {
	/* ⚠ .inner は 1500px まで広がる。3件しか出さないので、罫線だけが長く伸びて間が抜ける */
	max-width: 900px;
	margin-bottom: 25px;
}
#top-news .news-list li a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	border-bottom: 1px solid #E8E8E8;
}
@media (min-width: 561px) {
	#top-news .news-list li a {
		flex-direction: row;
		align-items: baseline;
		gap: 20px;
	}
}
#top-news .news-list li a .date {
	flex-shrink: 0;
	color: #A2A4A7;
	font-size: 1.2rem;
}
#top-news .news-list li a .news-ttl {
	line-height: 1.6;
}
#top-news .news-empty {
	font-size: 1.4rem;
	margin-bottom: 25px;
}
#top-news .btn {
	margin: 0 auto;
}
@media (min-width: 1025px) {
	#top-news .btn { margin: 0; }
}

/* 採用情報（#top-recruit）に見出しを足したぶんの手当て（2026-10-04）。
   ⚠ .top-ttl-area .ttl-en::before の罫線は #2B2B2B。#top-recruit は背景 #313131・文字が白なので、
     そのままだと罫線が見えない。 */
#top-recruit .top-ttl-area .ttl-en::before {
	background: #FFF;
}

/* 実績（#top-stats）。お知らせと事業紹介のあいだ。案3「濃い帯で白抜き」（2026-10-05 本部が選択）。
   ⚠ 下の余白は #top-service のカーブ（top:-30/-50/-100px・z-index:2・fill:#FAFAFA）より
     大きく取る。足りないと4つ目の数字がカーブに塗りつぶされる（#top-news で踏んだのと同じ）。
     濃い地なので、カーブが帯の下側を削って波形に見える。これは狙いどおり。 */
#top-stats {
	background: #2B2B2B;
	color: #FFF;
	padding: 44px 0 60px;
}
@media (min-width: 561px) { #top-stats { padding-bottom: 80px; } }
@media (min-width: 1025px) { #top-stats { padding: 70px 0 150px; } }

#top-stats .stats-hd { text-align: center; margin-bottom: 28px; }
@media (min-width: 1025px) { #top-stats .stats-hd { margin-bottom: 40px; } }
#top-stats .stats-hd .en {
	font-size: 1.1rem; letter-spacing: .3em; color: #9A9A9A;
}
#top-stats .stats-hd h2 {
	margin-top: 8px; font-size: 2.2rem; font-weight: 600;
}
@media (min-width: 1025px) { #top-stats .stats-hd h2 { font-size: 2.8rem; } }

#top-stats .stats-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 0;
	max-width: 960px;
	margin: 0 auto;
}
@media (min-width: 835px) {
	#top-stats .stats-list { grid-template-columns: repeat(4, 1fr); gap: 0; }
}
#top-stats .stats-list li { text-align: center; padding: 0 8px; }
/* ⚠ 区切りは縦の細線。2列のときに左端へ線が出ないよう、4列のときだけ付ける */
@media (min-width: 835px) {
	#top-stats .stats-list li + li { border-left: 1px solid #4A4A4A; }
}

#top-stats .num {
	display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
/* ⚠ 数字は折り返さない。body の word-break:break-all で「4,0／00」と割れる */
#top-stats .num .n {
	font-size: 3.6rem; line-height: 1; white-space: nowrap;
}
@media (min-width: 1025px) { #top-stats .num .n { font-size: 5rem; } }
#top-stats .num .u {
	font-size: 1.2rem; color: #CFCFCF; white-space: nowrap;
}
#top-stats .lb {
	margin-top: 10px; font-size: 1.1rem; letter-spacing: .1em; color: #9A9A9A; line-height: 1.5;
}

/* 採用情報から写真（recruit.png）を外したぶんの手当て（2026-10-05）。
   ⚠ top.css の `.recruit` は PC幅で flex-direction:row / justify-content:space-between。
     写真が無いと .summary だけが残り、inner の 1500px いっぱいに文章が伸びて1行が長くなりすぎる。
     並べる相手が居ないので、そもそも flex をやめて幅を止める。 */
#top-recruit .recruit {
	display: block;
	max-width: none;
}
#top-recruit .recruit .summary {
	max-width: 760px;
}

/* ===== FC加盟募集（#top-fc）。2026-10-06 本部指示で採用情報の下に足した =====
 * ⚠ 採用情報（#top-recruit）は暗い帯。その直後なので、ここは白地に戻して軽くする。
 *   保護者が主な読み手のページなので、加盟募集を採用情報と同じ重さで出さない。 */
#top-fc { padding: 40px 0 10px; }
@media (min-width: 1025px) { #top-fc { padding: 80px 0 20px; } }
#top-fc .top-fc-body { display: grid; gap: 20px; align-items: center; }
@media (min-width: 835px) {
	#top-fc .top-fc-body { grid-template-columns: 1fr 1fr; gap: 40px; }
}
#top-fc .top-fc-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
#top-fc .summary p { line-height: 2; }
/* ⚠ .btn は margin:0。真ん中に置くには auto を入れ直す（2026-10-06 本部指示） */
#top-fc .summary .btn { margin: 24px auto 0; }