/* ============================================================
   校舎詳細ページ（#30 リニューアル版）
   design: editorial minimal / 余白・細罫線・大きなタイポ
   color:  ink(墨) × teal(#009c88系) ＋ CTAはピンク→オレンジのグラデ（free-trial LP と統一）
   font:   Noto Sans JP (JP) × Urbanist (Latin/数字)
   ============================================================ */

.sr {
	--ink: #17221f;
	--ink-soft: #4a5854;
	--paper: #fafaf7;
	--paper-tint: #f0f4f2;
	--line: #d9e2de;
	--teal: #009c88;
	--teal-deep: #00614f;
	--cta-grad: linear-gradient(90deg, #f64377, #f7a202);
	--cta-shadow: rgba(246, 67, 119, 0.32);
	--font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	--font-en: "Urbanist", "Noto Sans JP", sans-serif;
	--radius: 2px;
	--section-max: 1080px;

	font-family: var(--font-jp);
	color: var(--ink);
	background: var(--paper);
	line-height: 1.9;
	font-size: 16px;
	letter-spacing: 0.02em;
	overflow-x: clip;
}
.sr *,
.sr *::before,
.sr *::after { box-sizing: border-box; }
.sr img { max-width: 100%; height: auto; display: block; }
.sr a { color: inherit; }
.sr :target { scroll-margin-top: 96px; }

/* 既存グローバルCSS（pc.css の h2{text-align:center} 等）への防御 */
.sr h1,
.sr h2,
.sr h3 {
	text-align: left;
	background: none;
}
.sr .sr-endcta__title,
.sr .sr-section__title,
.sr .sr-feature__title { text-align: center; }

/* ---------- ボタン ---------- */
.sr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	padding: 1em 2.4em;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-decoration: none;
	border-radius: 999px;
	transition: transform 0.25s ease, filter 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.sr-btn--primary {
	background: var(--cta-grad);
	color: #fff;
	box-shadow: 0 8px 24px var(--cta-shadow);
}
/* `.sr a { color: inherit }`（0-1-1）に負けないよう a 付きで白字を確定させる */
.sr a.sr-btn--primary,
.sr a.sr-mobilebar__cta { color: #fff; }
.sr a.sr-mobilebar__tel { color: var(--teal-deep); }
.sr-btn--primary:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(247, 162, 2, 0.4);
}
.sr-btn--large { padding: 1.2em 3.2em; font-size: 17px; }
.sr-btn--small { padding: 0.6em 1.6em; font-size: 13px; box-shadow: none; }
.sr-btn--ghost {
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink);
	font-weight: 500;
}
.sr-btn--ghost:hover { border-color: var(--teal); color: var(--teal-deep); }
.sr-btn__arrow { font-family: var(--font-en); transition: transform 0.25s ease; }
.sr-btn--primary:hover .sr-btn__arrow { transform: translateX(4px); }

/* ============================================================
   HERO（構成型: 白背景＋矩形写真の右ブリード＋幾何アクセント）
   写真の絵力に頼らず、タイポ・余白・図形で画を組む
   ============================================================ */
.sr-hero {
	position: relative;
	min-height: 76vh;
	display: flex;
	align-items: center;
	/* ヘッダーを透明・重ね置きにするぶん上に余白を取る（PCヘッダー高120px） */
	padding: 168px 0 96px;
	background: var(--paper);
}
/* 透かしブランド文字（左下・ティールのアウトライン） */
.sr-hero__brand {
	position: absolute;
	left: -0.04em;
	bottom: -0.14em;
	margin: 0;
	font-family: var(--font-en);
	font-weight: 800;
	font-size: clamp(72px, 13vw, 180px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(0, 156, 136, 0.34);
	user-select: none;
	pointer-events: none;
}
.sr-hero__grid {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 6fr 6fr;
	gap: 56px;
	align-items: center;
}
.sr-hero__content { max-width: 560px; }
.sr-hero__grades {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	animation: sr-rise 0.8s 0.1s ease-out both;
}
.sr-hero__grades li {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 0.35em 1.1em;
	color: var(--teal-deep);
	background: #fff;
	border: 1px solid var(--teal);
	border-radius: 999px;
}
.sr-hero__label {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--teal-deep);
	animation: sr-rise 0.8s 0.2s ease-out both;
}
.sr-hero__title {
	margin: 0;
	font-size: clamp(38px, 5.4vw, 64px);
	font-weight: 900;
	line-height: 1.18;
	letter-spacing: 0.04em;
	color: var(--ink);
	animation: sr-rise 0.9s 0.3s ease-out both;
}
.sr-hero__access {
	margin: 16px 0 0;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
	animation: sr-rise 0.9s 0.45s ease-out both;
}
.sr-hero__cta {
	margin-top: 34px;
	animation: sr-rise 0.9s 0.6s ease-out both;
}
/* --- 写真まわり --- */
.sr-hero__visual {
	position: relative;
	/* 画面右端までブリード。616px = コンテナ内容幅1232の半分。
	   %基準はグリッドエリア幅になり右カラムでは使えないため、ビューポート基準で計算する */
	margin-right: min(calc(616px - 50vw), -24px);
}
.sr-hero__photo { position: relative; margin: 0; z-index: 1; }
.sr-hero__photo img {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 10px 0 0 10px;
	animation: sr-photoin 1.1s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* 丸抜きサブ写真（メイン写真の左下にオーバーラップ） */
.sr-hero__sub {
	position: absolute;
	left: -56px;
	bottom: -44px;
	width: clamp(120px, 13vw, 180px);
	margin: 0;
	z-index: 2;
	animation: sr-subin 1s 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sr-hero__sub img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 6px solid var(--paper);
	box-shadow: 0 16px 40px rgba(23, 34, 31, 0.16);
}
/* ティールの三角（写真の右上角にオーバーラップ） */
.sr-hero__tri {
	position: absolute;
	top: -46px;
	right: min(7vw, 110px);
	width: 118px;
	height: 118px;
	z-index: 2;
	background: linear-gradient(135deg, var(--teal), #3ec8b4);
	clip-path: polygon(10% 20%, 100% 0, 64% 100%);
	animation: sr-subin 1s 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* 右端は写真とかぶって見えづらいため、無地背景の左下に置く（中央下は浮遊ピルと衝突） */
.sr-hero__scroll {
	position: absolute;
	left: 36px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: 0.4em;
	color: var(--ink-soft);
	writing-mode: vertical-rl;
	padding-bottom: 72px;
	z-index: 3;
}
.sr-hero__scroll::after {
	content: "";
	width: 1px;
	height: 64px;
	background: linear-gradient(to bottom, rgba(23, 34, 31, 0.5), transparent);
	animation: sr-scrollcue 2.2s ease-in-out infinite;
}
/* タブレット幅ではヒーローが縮んでCTAボタンと重なるため出さない */
@media (max-width: 1100px) {
	.sr-hero__scroll { display: none; }
}
@keyframes sr-scrollcue {
	0%   { transform: scaleY(0); transform-origin: top; }
	45%  { transform: scaleY(1); transform-origin: top; }
	55%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes sr-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes sr-photoin {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes sr-subin {
	from { opacity: 0; transform: translateY(24px) scale(0.92); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* 大きなアウトライン円（ヒーロー左下からメッセージ方向へはみ出す装飾） */
.sr-hero::after {
	content: "";
	position: absolute;
	left: -150px;
	bottom: -280px;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(0, 156, 136, 0.3);
	border-radius: 50%;
}

/* ============================================================
   QUICK FACTS（ヒーロー直下の要点帯）
   ============================================================ */
/* ヒーローの左端に幅を揃えた浮遊ピル（半透明白＋ブラー）。全幅帯をやめて分断感をなくす */
.sr-facts {
	position: relative;
	z-index: 5;
	max-width: 1280px;
	margin: -36px auto 0;
	padding: 0 24px;
}
.sr-facts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(217, 226, 222, 0.7);
	border-radius: 999px;
	box-shadow: 0 20px 48px rgba(23, 34, 31, 0.09);
}
.sr-facts__item {
	padding: 14px 32px;
	border-left: 1px solid var(--line);
}
.sr-facts__item:first-child { border-left: none; }
.sr-facts__item dt {
	font-family: var(--font-en);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.28em;
	color: var(--teal);
	margin: 0 0 2px;
}
.sr-facts__item dd {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}
.sr-facts__item dd span { display: block; }
.sr-facts__tel {
	font-family: var(--font-en);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--ink);
}

/* ============================================================
   ANCHOR NAV（A: ヒーロー直下sticky帯 / B: フローティングピル）
   ============================================================ */
.sr-nav__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: var(--section-max);
	margin: 0 auto;
	padding: 10px 24px;
}
/* 幅が足りないときは校舎名だけを省略記号で切り詰め、ナビ項目とCTAは縮ませない
   （長い校舎名×6項目でナビが2行に折り返すのを防ぐ） */
.sr-nav__name {
	margin: 0;
	font-weight: 900;
	font-size: 15px;
	white-space: nowrap;
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sr-nav__list {
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
	list-style: none;
	margin: 0 auto 0 0;
	padding: 0;
}
.sr-nav__list a {
	display: block;
	padding: 0.5em 1em;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sr-nav__inner > .sr-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}
.sr-nav__list a:hover { background: var(--paper-tint); color: var(--teal-deep); }

/* スクロール後に降りてくるフローティングピル */
.sr .sr-nav {
	position: fixed;
	top: 14px;
	left: 50%;
	z-index: 50;
	width: min(920px, calc(100% - 32px));
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(217, 226, 222, 0.9);
	border-radius: 999px;
	box-shadow: 0 12px 40px rgba(23, 34, 31, 0.12);
	transform: translate(-50%, -140%);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sr .sr-nav.is-shown { transform: translate(-50%, 0); }
.sr .sr-nav__inner { padding: 8px 12px 8px 24px; }

/* SPではアンカーナビ自体を出さない（下部バーに集約） */
@media (max-width: 767px) {
	.sr-nav { display: none; }
}

/* ============================================================
   セクション共通
   ============================================================ */
/* 装飾図形をセクション境界を跨いで見せるため overflow は切らない（横方向は .sr 側で clip 済み） */
.sr-section { position: relative; padding: 104px 0; }
/* ティントは各セクションの斜め帯（::after 等）で表現するため、ベタ塗りは廃止 */
.sr-section--tint { background: none; }
.sr-section__inner {
	position: relative;
	z-index: 1;
	max-width: var(--section-max);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- セクション背景の装飾（図形はセクション境界を跨いで連続表示） ----------
   各セクションの背景は透明にし、::before/::after の図形は overflow を切らずに
   隣のセクションへはみ出させる。コンテンツは .sr-section__inner の z-index:1 が常に上 */

/* 校舎長メッセージ: セクション全体を覆う大きな斜め三角（ティールグラデ・文字は白抜き） */
#message::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -120px; /* 頂点はピルに軽くかかる高さまで */
	bottom: -400px; /* ティント面と同じ座標箱（平行を保証） */
	width: 110vw;
	transform: translateX(-50%);
	background: linear-gradient(160deg, #00a58f, #016450);
	/* 不等辺三角形: 頂点(左上・FV食い込み) → 右中腹(右から約15%) → 左下(次セクションへ) */
	clip-path: polygon(34% 0%, 106% 45%, 0% 83.5%);
	/* 隣接セクションの装飾（STAFFの斜め帯等）に隠れないよう上のレイヤーへ */
	z-index: 1;
}
/* ::after(z1)はDOM順でinnerより後になるため、文字側をさらに上へ */
#message .sr-section__inner { z-index: 2; }
/* ピルと三角が重なりすぎないよう、FVとの間に余白を取る */
#message {
	margin-top: 80px;
}
#message::before { /* 三角形の下辺と平行なティント面（三角の下だけ背景色を変える） */
	content: "";
	position: absolute;
	left: 50%;
	top: -120px;
	bottom: -400px;
	width: 110vw;
	transform: translateX(-50%);
	background: var(--paper-tint);
	clip-path: polygon(106% 46.5%, 0% 85%, 0% 100%, 106% 100%);
}
/* 三角の上に載る文字を白抜きに */
#message .sr-section__label { color: rgba(255, 255, 255, 0.9); }
#message .sr-section__label span { background: #fff; color: var(--teal-deep); }
#message .sr-section__label::before,
#message .sr-section__label::after { background: rgba(255, 255, 255, 0.6); }
#message .sr-section__title { color: #fff; }
#message .sr-message__name { color: #fff; }
#message .sr-message__name span { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
#message .sr-message__text { color: rgba(255, 255, 255, 0.94); }

/* アドバイザー: フラットなティント（斜めの導入はメッセージ側のティント面が担う） */
#staff { background: var(--paper-tint); }
/* ギャラリー: 右上のアウトライン円（STAFFの帯を跨ぐ） */
#gallery::before {
	content: "";
	position: absolute;
	right: 6%;
	top: -60px;
	width: 160px;
	height: 160px;
	border: 1px solid rgba(0, 156, 136, 0.28);
	border-radius: 50%;
}
/* アクセス: 情報エリアは斜めにせず、まっすぐなティント面できちっと見せる */
#access { background: var(--paper-tint); }
.sr-section__inner--wide { max-width: 1280px; }
.sr-section__inner--narrow { max-width: 800px; }
.sr-section__head {
	margin-bottom: 56px;
	text-align: center;
}
.sr-section__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 16px;
	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.3em;
	color: var(--teal);
}
/* 番号はティール地×白字のチップにして視認性を確保 */
.sr-section__label span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	background: var(--teal);
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 0.05em;
	border-radius: var(--radius);
}
.sr-section__label::before,
.sr-section__label::after {
	content: "";
	flex: 0 0 40px;
	height: 1px;
	background: var(--teal);
	opacity: 0.5;
}
.sr-section__title {
	margin: 0;
	font-size: clamp(26px, 3.6vw, 38px);
	font-weight: 900;
	letter-spacing: 0.05em;
	line-height: 1.3;
}
.sr-section__lead {
	margin: 14px 0 0;
	font-size: 15px;
	color: var(--ink-soft);
}
/* 補足文（本文寄りの長文リード）: 読みやすい行長に抑えて中央寄せ */
.sr-section__lead--sub {
	margin-top: 10px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	font-size: 13.5px;
	line-height: 2;
	text-align: left;
}

/* ---------- スクロールリビール ---------- */
.sr-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.sr-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   校舎長メッセージ
   ============================================================ */
.sr-message {
	display: grid;
	/* 本文(左)を三角の懐に収め、写真(右)はエッジを跨がせる */
	grid-template-columns: 7fr 5fr;
	gap: 64px;
	align-items: start;
}
.sr-message__photo { order: 2; }
.sr-message__body { order: 1; }
.sr-message__photo {
	position: relative;
	/* 右へ少しブリードさせて三角の右頂点の欠片を裏に隠す */
	margin: 0 -36px 0 0;
}
.sr-message__photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
}
.sr-message__name {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 900;
}
.sr-message__name span {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--teal-deep);
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 0.2em 1em;
}
.sr-message__body {
	/* 三角形の左辺・右下辺からはみ出さないよう、開始位置と幅を調整 */
	padding-left: 96px;
	max-width: 620px; /* padding込み（実質本文幅 約520px） */
}
.sr-message__text {
	margin: 0;
	font-size: 16px;
	line-height: 2.2;
	color: var(--ink-soft);
}

/* ============================================================
   アドバイザー
   ============================================================ */
/* 名前・コメントなしのシンプル構成（丸抜き写真＋大学名＋出身高校）。
   25〜30人在籍する校舎もあるためコンパクトなグリッドにする */
.sr-advisors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
/* コメントが入るためカード型に */
.sr-advisor {
	background: #fff;
	border-radius: 14px;
	padding: 28px 22px 24px;
	box-shadow: 0 10px 30px rgba(23, 34, 31, 0.06);
}
/* リビールの時間差 */
.sr-advisor:nth-child(2) { transition-delay: 0.08s; }
.sr-advisor:nth-child(3) { transition-delay: 0.16s; }
.sr-advisor:nth-child(4) { transition-delay: 0.24s; }
.sr-advisor__photo {
	width: min(140px, 72%);
	margin: 0 auto 14px;
}
.sr-advisor__photo img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}
.sr-advisor__univ {
	margin: 0;
	font-size: 19px;
	font-weight: 900;
	line-height: 1.4;
}
.sr-advisor__dept {
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--teal-deep);
}
/* 所属チップ（出身高校・部活）: 「同じ高校/部活の先輩」を探す視線が引っかかる主役級の扱い */
.sr-advisor__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}
.sr-advisor__tag {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 0.5em 1em;
	border-radius: 999px;
}
.sr-advisor__tag--hs {
	background: rgba(0, 156, 136, 0.1);
	color: var(--teal-deep);
}
.sr-advisor__tag--club {
	border: 1px solid var(--line);
	color: var(--ink-soft);
}
.sr-advisor__comment {
	position: relative;
	margin: 16px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--ink-soft);
	text-align: left;
	/* 1行目だけ引用符（::before）の右横から始めて「“ コメント…」の引用らしい見た目にする */
	text-indent: 17px;
}
/* 引用符は文字グリフだと環境のフォントで幅が変わる（和文フォールバックだと全角幅で本文に被る）ため、
   固定サイズのSVGマスクで描画する */
.sr-advisor__comment::before {
	content: "";
	position: absolute;
	top: 21px; /* 開き引用符はキャップハイト寄り（1行目のやや上）に置くのが組版の定石 */
	left: 0;
	width: 13px;
	height: 10px;
	background: var(--teal);
	opacity: 0.45;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") no-repeat center / contain;
	transform: rotate(180deg); /* 閉じ引用符パスを回して開き引用符（“）向きに */
}
/* --- 9人以上のときは slick カルーセル（rows:2）に切り替わる（school.js） --- */
.sr-advisors.slick-initialized {
	display: block;
	text-align: center;
}
.sr-advisors.slick-initialized .slick-list { margin: 0 -12px; }
.sr-advisors.slick-initialized .slick-slide > div { padding: 0 12px 24px; }
.sr-advisors .slick-dots {
	position: static;
	margin-top: 4px;
}
.sr-advisors .slick-dots li button:before {
	font-size: 10px;
	color: var(--teal);
	opacity: 0.25;
}
.sr-advisors .slick-dots li.slick-active button:before {
	color: var(--teal);
	opacity: 1;
}
.sr-advisors .slick-prev:before,
.sr-advisors .slick-next:before {
	color: var(--teal);
	font-size: 30px;
	opacity: 0.85;
}
.sr-advisors .slick-prev { left: -44px; }
.sr-advisors .slick-next { right: -44px; }
@media (max-width: 1380px) {
	.sr-advisors .slick-prev,
	.sr-advisors .slick-next { display: none !important; }
}

/* ============================================================
   通学元の高校（チップクラウド）
   ============================================================ */
/* STAFF のティントを引き継ぎ「人」の社会的証明ゾーンとして連続させる。
   上端は paper-tint そのまま（STAFF と継ぎ目なし）→ 下に向かってほんのりティール寄りに深める */
#schools {
	background: linear-gradient(180deg, var(--paper-tint) 0%, #e7f0ec 100%);
}
/* ネットワークの結節点モチーフ: ティールのドットグリッドをチップ群の背後にだけ淡く敷く
   （MSG network = 地域の高校とつながっている、のブランド表現） */
#schools::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(0, 156, 136, 0.2) 1.5px, transparent 1.6px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse 62% 75% at 50% 58%, #000 25%, transparent 72%);
	mask-image: radial-gradient(ellipse 62% 75% at 50% 58%, #000 25%, transparent 72%);
	pointer-events: none;
}
/* STAFF の直後に並ぶときだけ同一ゾーンとして上余白を詰める（STAFF 非表示時は通常余白） */
#staff + #schools { padding-top: 0; }
.sr-schools {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 10px;
	list-style: none;
	max-width: 880px;
	margin: 0 auto;
	padding: 0;
}
.sr-schools__chip {
	background: #fff;
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.03em;
	box-shadow: 0 2px 10px rgba(23, 34, 31, 0.05);
}

/* ============================================================
   ギャラリー（slickカルーセル。JS初期化前は横スクロールでフォールバック）
   ============================================================ */
.sr-gallery {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 4px 4px 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--teal) transparent;
}
.sr-gallery__item {
	flex: 0 0 min(560px, 82vw);
	scroll-snap-align: start;
}
/* --- slick 初期化後 --- */
.sr-gallery.slick-initialized {
	display: block;
	overflow: visible;
	padding: 4px 0 8px;
}
/* スライド間ギャップ: slick1.8はslideをdivでラップしliにwidth:100%を焼き込むため、
   ラッパーdivのpaddingでギャップを作る（liのmarginは効かない） */
.sr-gallery.slick-initialized .slick-list { margin: 0 -14px; }
.sr-gallery.slick-initialized .slick-slide > div { padding: 0 14px; }
.sr-gallery .slick-dots {
	position: static;
	margin-top: 20px;
}
.sr-gallery .slick-dots li button:before {
	font-size: 10px;
	color: var(--teal);
	opacity: 0.25;
}
.sr-gallery .slick-dots li.slick-active button:before {
	color: var(--teal);
	opacity: 1;
}
.sr-gallery .slick-prev:before,
.sr-gallery .slick-next:before {
	color: var(--teal);
	font-size: 30px;
	opacity: 0.85;
}
.sr-gallery .slick-prev { left: -44px; }
.sr-gallery .slick-next { right: -44px; }
@media (max-width: 1380px) {
	.sr-gallery .slick-prev,
	.sr-gallery .slick-next { display: none !important; }
}
.sr-gallery__item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
}
.sr-gallery__caption {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--ink-soft);
	padding-left: 14px;
	border-left: 2px solid var(--teal);
}

/* ============================================================
   CTA帯（中盤）
   ============================================================ */
.sr-ctaband {
	background: linear-gradient(115deg, var(--teal-deep), var(--teal));
	color: #fff;
	padding: 72px 24px;
}
.sr-ctaband__inner {
	max-width: var(--section-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.sr-ctaband__copy {
	margin: 0;
	/* 上限24pxだとボタンユニットと合わせて inner(1080px) を約20px超えて折り返すため22pxに抑える */
	font-size: clamp(18px, 2.6vw, 22px);
	font-weight: 700;
	letter-spacing: 0.06em;
}
/* ボタン＋マイクロコピー（「＼ 無料！ ／」）の縦積みユニット */
.sr-ctaband__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.sr-ctaband__micro {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.92);
}
/* コピー(22px)＋ボタンユニットの必要幅は約1036px。それを下回る幅では折り返すため中央寄せに切り替える */
@media (max-width: 1084px) {
	.sr-ctaband__inner { justify-content: center; text-align: center; }
}

/* ============================================================
   よくあるご質問（details/summary のアコーディオン）
   ============================================================ */
.sr-faq {
	border-top: 1px solid var(--line);
}
.sr-faq__item {
	border-bottom: 1px solid var(--line);
}
.sr-faq__item summary {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 22px 44px 22px 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.6;
	cursor: pointer;
	list-style: none;
}
.sr-faq__item summary::-webkit-details-marker { display: none; }
.sr-faq__item summary::before {
	content: "Q";
	flex: 0 0 auto;
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: 800;
	color: var(--teal);
}
/* 開閉インジケーター（＋ → ×） */
.sr-faq__item summary::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(var(--teal), var(--teal)) center / 14px 1.5px no-repeat,
		linear-gradient(var(--teal), var(--teal)) center / 1.5px 14px no-repeat;
	transform: translateY(-50%);
	transition: transform 0.25s ease;
}
.sr-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.sr-faq__answer {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	padding: 0 24px 24px 0;
	font-size: 14px;
	line-height: 2;
	color: var(--ink-soft);
}
.sr-faq__answer::before {
	content: "A";
	flex: 0 0 auto;
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: 800;
	color: #f64377; /* CTAグラデの始点色（--cta-gradと揃える） */
}
.sr-faq__more {
	margin: 28px 0 0;
	text-align: center;
	font-size: 13.5px;
	color: var(--ink-soft);
}
.sr-faq__more a {
	color: var(--teal-deep);
	font-weight: 700;
	text-underline-offset: 3px;
}

/* ============================================================
   特長（free-trial LP と同じ見せ方: 中央画像＋マーカー付き説明文）
   ============================================================ */
.sr-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 72px 64px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sr-feature:nth-child(even) { transition-delay: 0.1s; }
.sr-feature__img {
	width: min(200px, 48%);
	margin: 0 auto 20px;
}
.sr-feature__img img {
	width: 100%;
	height: auto;
}
.sr-feature__title {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 0.04em;
}
.sr-feature__text {
	margin: 0;
	font-size: 14px;
	line-height: 2.1;
	color: var(--ink-soft);
}
/* 説明文の蛍光マーカー強調（free-trial の half-highlight 相当） */
.sr-marker {
	background: linear-gradient(to bottom, transparent 55%, rgba(255, 252, 107, 0.7) 55%);
	font-weight: 700;
	color: var(--ink);
}

/* ============================================================
   アクセス
   ============================================================ */
.sr-access {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
.sr-access__map img {
	width: 100%;
	border-radius: 6px;
	border: 1px solid var(--line);
	margin-bottom: 18px;
}
.sr-access__embed {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--line);
	margin-bottom: 18px;
	background: var(--paper-tint);
}
.sr-access__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.sr-access__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.sr-access__table th,
.sr-access__table td {
	padding: 16px 8px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
	line-height: 1.8;
}
.sr-access__table th {
	width: 9em;
	font-weight: 700;
	color: var(--teal-deep);
	white-space: nowrap;
}
.sr-access__table a { color: var(--ink); font-weight: 700; }

/* ============================================================
   エンドCTA
   ============================================================ */
.sr-endcta {
	background:
		radial-gradient(1200px 500px at 85% -10%, rgba(255, 255, 255, 0.14), transparent 65%),
		linear-gradient(160deg, #01453a, #00806f);
	color: #fff;
	padding: 120px 24px 128px;
	text-align: center;
}
.sr-endcta__label {
	margin: 0 0 14px;
	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.42em;
	color: rgba(255, 255, 255, 0.75);
}
.sr-endcta__title {
	margin: 0 0 20px;
	font-size: clamp(30px, 5vw, 48px);
	font-weight: 900;
	letter-spacing: 0.05em;
	text-wrap: balance;
}
.sr-endcta__text {
	margin: 0 0 44px;
	font-size: 15px;
	line-height: 2.2;
	color: rgba(255, 255, 255, 0.78);
}
.sr-endcta__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}
/* 主CTAと電話ボタンの横幅を揃える */
.sr-endcta__actions .sr-btn {
	width: min(420px, 100%);
}
.sr-endcta .sr-btn--ghost {
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}
.sr-endcta .sr-btn--ghost:hover { border-color: #fff; }

/* ============================================================
   SP下部固定バー（FV通過後に出現）
   ============================================================ */
.sr-mobilebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: none;
	gap: 10px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--line);
	transform: translateY(110%);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sr-mobilebar.is-shown { transform: translateY(0); }
.sr-mobilebar__tel {
	flex: 0 0 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--teal-deep);
	border: 1px solid var(--teal);
	border-radius: 999px;
	text-decoration: none;
}
.sr-mobilebar__tel svg { display: block; }
.sr-mobilebar__cta {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 0;
	background: var(--cta-grad);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 6px 18px var(--cta-shadow);
}
@media (max-width: 767px) {
	.sr-mobilebar { display: flex; }
	/* テーマ共通のSP固定ナビ・TOPボタンは校舎詳細では隠し、専用CTAバーに一本化 */
	.single-school #f_nav .box02 { display: none; }
	.single-school #f_nav .box01 { display: none; }
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 767px) {
	.sr { font-size: 15px; }
	.sr-hero {
		min-height: auto;
		padding: 100px 0 72px; /* SPヘッダー高70px + 余白 */
		background: linear-gradient(162deg, var(--paper) 76%, var(--paper-tint) 76.2%);
	}
	.sr-hero__grid { grid-template-columns: 1fr; gap: 40px; padding: 0 20px; }
	.sr-hero__visual { margin-right: -20px; }
	.sr-hero__content { max-width: none; }
	.sr-hero__title { font-size: clamp(34px, 9.6vw, 44px); }
	.sr-hero__photo img { aspect-ratio: 4 / 3; }
	.sr-hero__sub { left: 4px; bottom: -32px; width: 104px; }
	.sr-hero__sub img { border-width: 4px; }
	.sr-hero__tri { top: -26px; right: 14px; width: 68px; height: 68px; }
	/* ヘッダー（ロゴ・ハンバーガー）を避けて下げ、行を右寄せにして左側のチップ・見出しと視覚的に重ねない */
	.sr-hero__brand { font-size: 88px; bottom: auto; top: 92px; left: auto; right: -0.05em; text-align: right; -webkit-text-stroke-color: rgba(0, 156, 136, 0.14); }
	.sr-hero__scroll { display: none; }
	#message { margin-top: 40px; padding-top: 120px; }
	#message::before { display: none; }
	#message::after { bottom: -64px; }
	#staff { padding-top: 128px; }
	.sr-hero::after { width: 240px; height: 240px; left: -130px; bottom: -160px; }
	/* 下辺は水平ではなく右肩上がりの緩い斜めでSTAFFへ切り替える（左端=箱の底、右端は約5%高い） */
	#message::after { top: -16px; clip-path: polygon(62% 0%, -300% 115%, 330% 83.5%); }
	#gallery::before { display: none; }
	.sr-section { padding: 72px 0; }
	.sr-section__head { margin-bottom: 40px; }
	.sr-facts { margin: -20px auto 0; padding: 0 20px; }
	.sr-facts__grid {
		grid-template-columns: 1fr;
		border-radius: 24px;
		padding: 10px 24px;
	}
	.sr-facts__item {
		border-left: none;
		border-top: 1px solid var(--line);
		padding: 14px 0;
	}
	.sr-facts__item:first-child { border-top: none; }
	.sr-message { grid-template-columns: 1fr; gap: 36px; }
	.sr-message__photo { max-width: 300px; margin: 0 auto; }
	.sr-message__body { padding-left: 0; }
	.sr-message__name { justify-content: center; }
	/* SPは2列（カルーセルも2列×2段=1ページ4人）。カード幅170px前後に合わせてコンパクト化 */
	.sr-advisors { grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: none; margin: 0 auto; }
	.sr-advisor { padding: 20px 14px 18px; }
	.sr-advisor__univ { font-size: 15px; }
	.sr-advisor__dept { font-size: 11.5px; }
	/* 幅165pxではチップ2つが入るカードと入らないカードが混在するため、常に縦積みで統一 */
	.sr-advisor__tags { flex-direction: column; align-items: center; gap: 5px; }
	.sr-advisor__tag { font-size: 10.5px; padding: 0.45em 0.8em; }
	.sr-advisor__comment { font-size: 11.5px; line-height: 1.7; margin-top: 12px; padding-top: 14px; text-indent: 15px; }
	.sr-advisor__comment::before { top: 16px; width: 11px; height: 8.5px; }
	.sr-advisors.slick-initialized .slick-list { margin: 0 -6px; }
	.sr-advisors.slick-initialized .slick-slide > div { padding: 0 6px 12px; }
	.sr-schools { gap: 8px; }
	.sr-schools__chip { padding: 10px 16px; font-size: 13px; }
	.sr-faq__item summary { font-size: 14px; padding: 18px 36px 18px 0; }
	.sr-faq__answer { font-size: 13px; line-height: 1.9; padding: 0 0 20px; }
	/* SPはセクション高さ比のマスクが見出しに食い込むため、ドットをチップ群の帯だけに絞る */
	#schools::before {
		-webkit-mask-image: radial-gradient(ellipse 70% 46% at 50% 72%, #000 20%, transparent 78%);
		mask-image: radial-gradient(ellipse 70% 46% at 50% 72%, #000 20%, transparent 78%);
	}
	.sr-advisor__photo { width: min(120px, 78%); }
	.sr-features { grid-template-columns: 1fr; gap: 56px; }
	.sr-access { grid-template-columns: 1fr; gap: 36px; }
	/* 375px幅で「まずは、無料体験から。」を1行に収める（320px幅は2行許容） */
	.sr-endcta__title { font-size: 28px; }
	/* 下部バーぶんの余白 */
	.sr-endcta { padding-bottom: 160px; }
}

/* ============================================================
   校舎詳細ページ限定: ヘッダーの透明化
   ヒーローに重ねてスマートに見せる。構成・リンクは共通ヘッダーのまま、
   見た目だけのバリアント（サイト全体のヘッダー刷新は別Issue）
   ============================================================ */
.single-school header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: transparent;
}
/* 墨色SVGロゴ（functions.php のフィルタで差し替え）のサイズ調整 */
.single-school header .box01 img {
	height: 40px;
	width: auto;
}
.single-school ul#nav_fixed h1 img {
	height: 26px;
	width: auto;
}
.single-school ul#nav_fixed > li h1 { width: auto; margin-top: 22px; }
.single-school header .box01 span { color: #4a5854; }
.single-school header .box03 ul li,
.single-school header .box03 ul li a { color: #17221f; }
/* ボタン群: 通常ボタンはゴーストに、問い合わせはCTAグラデに統一 */
.single-school header .box02 .btn00 {
	background: transparent;
	border: 1px solid rgba(23, 34, 31, 0.35);
	color: #17221f;
}
.single-school header .box02 .btn00:hover { border-color: #009c88; color: #00614f; }
.single-school header .box02 .btn01 {
	background: linear-gradient(90deg, #f64377, #f7a202);
	color: #fff;
}
@media (max-width: 767px) {
	/* SP: ハンバーガーの白箱を透過（線はティールのまま見える） */
	.single-school ul#nav_fixed > li:last-child { background: transparent; }
	/* メニュー展開中は白箱に戻す（オーバーレイ上での視認性） */
	.single-school .open #nav-toggle { background: #fff; }
}

/* ============================================================
   モーション低減設定への配慮
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.sr-hero__photo img,
	.sr-hero__sub,
	.sr-hero__tri,
	.sr-hero__scroll::after { animation: none; }
	.sr-hero__grades,
	.sr-hero__label,
	.sr-hero__title,
	.sr-hero__access,
	.sr-hero__cta { animation-duration: 0.01s; animation-delay: 0s; }
	.sr-reveal { opacity: 1; transform: none; transition: none; }
}