/*=======================================
	セクションタイトル（WHAT'S / EFFECT / MUSIC）
	大理石の見出し + 背景写真 + 下部の帯テキスト

	■ 背景写真を差し替えるとき
	  images/whats_bg.jpg   … 「STRONG NATIONとは？」
	  images/effect_bg.jpg  … 「EFFECT」
	  images/video_bg.jpg   … 「MUSIC」
	  images/voice_bg.jpg   … 「VOICE」
	  を同じファイル名で上書きするだけ（文字は入れない）。
	  写真の見せたい位置がずれる場合は、下の --pos を調整する。
	  （例: 50% 20% = 横中央・縦は上寄り）

	■ 単位について
	  寸法は旧デザイン画像(幅2049px)の実寸 ÷ 30 を em で指定。
	  スマホは .ttl の font-size を縮小して全体を相似形にしている。
=======================================*/

.ttl {
	display: block;
	font-size: 1em;
	letter-spacing: 0;
}

/* ---------- 見出し部分（大理石 + 枠 + ライン） ---------- */
.ttl__head {
	display: block;
	position: relative;
	overflow: hidden;
	padding: var(--t) 0 var(--b);
	background: #f2f2f2 url(../images/marble.jpg) center top / 100% auto repeat-y;
}

/* 左上のライン */
.ttl__head::before,
.ttl__head::after {
	content: '';
	position: absolute;
	background: #000;
}

.ttl__head::before {
	left: 0;
	top: calc(var(--t) + 1.27em);
	width: 17.3em;
	height: 0.62em;
}

/* 右下のライン */
.ttl__head::after {
	right: 0;
	bottom: calc(var(--b) + 1.1em);
	width: 17.1em;
	height: 0.67em;
}

.ttl__frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38.3em;
	height: var(--fh);
	margin: 0 auto;
	border: max(1px, 0.08em) solid #000;
}

/* 英字タイトル（EFFECT / MUSIC / WHAT'S） */
.ttl__en {
	display: block;
	font-family: "Anton", "Bebas Neue", Impact, sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: var(--en);
	line-height: 1;
	letter-spacing: 0.01em;
	color: #000;
	text-transform: uppercase;
}

/* WHAT'S だけピンクのグラデーション */
.ttl--whats .ttl__en {
	background: linear-gradient(100deg, #fb2a5e 0%, #fc3b55 50%, #f5237a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	padding-right: 0.08em;
}

.ttl__logo--dark {
	display: block;
	width: 17.3em;
	height: auto;
	margin-top: 1.15em;
}

/* ---------- 写真部分 ---------- */
.ttl__photo {
	display: block;
	position: relative;
	height: var(--ph);
	background: #111 var(--img) var(--pos, 50% 50%) / cover no-repeat;
}

/* 下部の半透明の帯 */
.ttl__band {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 8.3em;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
}

/* 黄色の説明文（EFFECT / MUSIC） */
.ttl__lead {
	display: block;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	font-weight: 500;
	font-size: 1.47em;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: #f8f904;
	text-align: center;
}

.ttl__lead span {
	display: inline-block;
}

/* MUSIC は PC でも2行に折り返す（旧デザインと同じ） */
@media all and (min-width: 641px) {
	.ttl--video .ttl__lead {
		max-width: 40em;
	}
}

/* 「STRONG NATION とは？」 */
.ttl__logo--light {
	display: block;
	width: 14.5em;
	height: auto;
}

.ttl__ja {
	display: block;
	margin: 0.3em 0 0 1.4em;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	font-weight: 700;
	font-size: 2.3em;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* ---------- セクションごとの設定 ---------- */
.ttl--whats {
	--t: 4.67em;
	--b: 4.57em;
	--fh: 13.63em;
	--ph: 32.7em;
	--img: url(../images/whats_bg.jpg);
	--en: 3.8em;
	--pos: 50% 50%;
}

.ttl--effect {
	--t: 2.67em;
	--b: 2.47em;
	--fh: 6.07em;
	--ph: 34.7em;
	--img: url(../images/effect_bg.jpg);
	--en: 4.05em;
	--pos: 50% 50%;
}

.ttl--video {
	--t: 3.3em;
	--b: 1.87em;
	--fh: 6.03em;
	--ph: 34.6em;
	--img: url(../images/video_bg.jpg);
	--en: 4.15em;
	--pos: 50% 40%;
}

.ttl--voice {
	--t: 3em;
	--b: 2.9em;
	--fh: 6em;
	--ph: 34.6em;
	--img: url(../images/voice_bg.jpg);
	--en: 4.1em;
	--pos: 50% 50%;
}

/* ---------- スマホ ---------- */
@media all and (max-width: 640px) {
	.ttl {
		font-size: 0.525em;
	}

	.ttl--whats {
		--ph: 31.8em;
	}

	.ttl--effect,
	.ttl--video,
	.ttl--voice {
		--ph: 31.1em;
	}

	.ttl__band {
		height: 7.7em;
	}

	.ttl__lead {
		font-size: 2em;
	}
}


/*=======================================
	講師陣（INSTRUCTOR）

	■ 背景写真を差し替えるとき
	  images/instructor_bg.jpg を同じファイル名で上書き。
	  1920×1080（16:9）、上45%は黒のまま（見出し文字が載る）。
=======================================*/

.ir {
	background: #000;
	font-size: 1em;
}

.ir__photo {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000 url(../images/instructor_bg.jpg) center bottom / cover no-repeat;
}

/* 上の黒い部分（画像の上 44.9%）に見出しを載せる */
.ir__ttl {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 44.9%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ir__ghost {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: "Bebas Neue", "Anton", Impact, sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: var(--ghost);
	line-height: 1;
	letter-spacing: 0.13em;
	white-space: nowrap;
	color: #4d152f;
}

.ir__main {
	position: relative;
	font-weight: 800;
	font-size: var(--main);
	line-height: 1.3;
	letter-spacing: 0.03em;
	color: #fff;
}

/* 下の文言 + ボタン */
.ir__foot {
	padding: var(--foot-pad);
	background: #060000;
	text-align: center;
}

.ir__lead {
	max-width: 94vw;
	margin: 0 auto;
	font-weight: 800;
	font-size: var(--lead);
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: #fff;
}

.ir__lead span {
	display: inline-block;
}

.ir__lead em {
	font-style: normal;
	color: #e7357d;
}

.ir__btn {
	display: inline-block;
	margin-top: 1.4em;
	padding: 0.55em 2.2em;
	background: #e7357d;
	color: #060000;
	font-weight: 800;
	font-size: var(--btn);
	line-height: 1.4;
	text-decoration: none;
	transition: opacity 200ms ease;
}

.ir__btn:hover {
	opacity: 0.8;
}

.ir {
	--ghost: 12.3em;
	--main: 2.9em;
	--lead: 2.1em;
	--btn: 1.6em;
	--foot-pad: 3.2em 1em 3.8em;
}

@media all and (max-width: 640px) {
	.ir {
		font-size: 0.45em;
		--ghost: 9.4em;
		--main: 2.7em;
		--lead: 2.6em;
		--btn: 2.2em;
		--foot-pad: 3.2em 1em 3.6em;
	}
}