@charset "utf-8";
/* ==========================================================================
   top.css
   トップページ専用。
   ※ 各セクションの上下の余白は共通化せず、デザインに合わせて個別に指定している。
   ========================================================================== */

/* リセットの * { margin: 0 auto } を flex / grid の子で打ち消す */
.fv__inner > *,
.fv__sub > *,
.fv__nav > * {
	margin-inline: 0;
}

/* ==========================================================================
   FV
   ========================================================================== */

/* --- サムネイル（画像＋文字は画像。ラベルはテキスト、再生ボタン・バッジは別画像） --- */
.fv__thumbs { padding-inline: var(--pad); }

.fv-thumb {
	position: relative;
	display: block;
}

.fv-thumb__img {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4.8rem;
	isolation: isolate;
}

.fv-thumb__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-zoom) var(--ease);
}

/* マウスオーバー（PCのみ）：枠はそのままで画像だけ拡大。ラベル・バッジ・再生ボタンは拡大しない */
@media screen and (min-width: 900px) and (hover: hover) {
	.fv-thumb:hover { opacity: 1; }
	.fv-thumb:hover .fv-thumb__img img { transform: scale(var(--zoom-thumb)); }
}

.fv-thumb .play { width: 13.7%; }

.fv-thumb .labels {
	position: absolute;
	top: 1.6rem;
	left: 1.8rem;
	gap: .5rem;
}

.fv-thumb .label { font-size: var(--fz-label-fv); }

.fv-thumb__badge {
	position: absolute;
	top: -2rem;
	right: -1.1rem;
	width: 7.2rem;
	transform-origin: 22% 88%; /* 吹き出しのしっぽ側を基点にする */
	transition: transform .25s var(--ease);
}

/* マウスオーバー（PCのみ）：サムネイルに乗るとバッジがぴょこっと大きくなる（1 → 1.25 → 1.18 → 1.2） */
@media screen and (min-width: 900px) and (hover: hover) {
	.fv-thumb:hover .fv-thumb__badge {
		transform: scale(1.2);
		animation: badge-pop .5s ease-out;
	}
}

@keyframes badge-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.25); }
	75%  { transform: scale(1.18); }
	100% { transform: scale(1.2); }
}

/* 「視聴No.1」バッジはほかよりはみ出しが大きい */
.fv-thumb .fv-thumb__badge--no1 { right: -1.7rem; }

.fv__sub {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3.2rem;
	margin-top: 3.1rem;
}

.fv-thumb--sub .fv-thumb__img {
	aspect-ratio: 16 / 9; /* YouTube のサムネイルと同じ比率（デザインは正方形） */
	border-radius: 2.8rem;
}

.fv-thumb--sub .play { width: 29.3%; }

.fv-thumb--sub .labels {
	top: 1.4rem;
	flex-direction: column;
	align-items: flex-start;
}

/* --- コピー・リード --------------------------------------------------- */
.fv__body { margin-top: 9rem; }

.fv__catch {
	width: 27.3rem;
	margin-inline: auto;
}

.fv__lead {
	margin-top: 4.2rem;
	padding-inline: 6.4rem;
	font-size: var(--fz-lead);
	font-weight: 300;
	line-height: 1.6;
	text-align: justify;
}

.fv__lead .br-pc { display: none; }

.fv__strong {
	margin-top: 4.2rem;
	font-size: var(--fz-lead-strong);
	font-weight: 700;
	line-height: 1.5;
}

/* --- 丸ボタン（中身は画像） ------------------------------------------- */
.fv__nav {
	display: flex;
	justify-content: center;
	gap: 2.3rem;
	margin-top: 5.8rem;
}

.fv-circle {
	display: grid;
	place-items: center;
	width: 21.8rem;
	height: 21.8rem;
	background: var(--c-white);
	border: 1px solid var(--c-hairline);
	border-radius: 50%;
}

/* --x / --y は丸の中での位置の微調整 */
.fv-circle img {
	width: calc(var(--w) * 1rem);
	transform: translate(var(--x, 0), var(--y, 0));
	transition: transform var(--dur-zoom) var(--ease);
}

.fv-circle--about img    { --x: -.3rem; --y: .6rem; }
.fv-circle--reporter img { --x: .25rem; }

/* マウスオーバー（PCのみ）：丸の枠はそのままで中の画像だけ拡大 */
@media screen and (min-width: 900px) and (hover: hover) {
	.fv-circle:hover { opacity: 1; }
	.fv-circle:hover img { transform: translate(var(--x, 0), var(--y, 0)) scale(var(--zoom-thumb)); }
}

@media screen and (min-width: 900px) {
	.fv__inner {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		max-width: 123.1rem;
		margin: 3.1rem auto 0;
		padding-right: 1.6rem;
	}

	.fv__thumbs {
		flex: 0 0 65.3rem;
		padding-inline: 0;
	}

	.fv-thumb__img { border-radius: 6rem; }

	.fv-thumb .labels {
		top: 2.1rem;
		left: 2.3rem;
		gap: .6rem;
	}

	.fv-thumb .label {
		height: 2.85rem;
		padding-inline: 1.9rem;
	}

	.fv-thumb__badge {
		top: -2.5rem;
		right: -1.4rem;
		width: 9.2rem;
	}

	.fv-thumb .fv-thumb__badge--no1 { right: -2.2rem; }

	.fv__sub {
		gap: 4.1rem;
		margin-top: 3.9rem;
	}

	.fv-thumb--sub .fv-thumb__img { border-radius: 3.6rem; }
	.fv-thumb--sub .labels { top: 1.8rem; }

	.fv__body {
		flex: 0 0 47.2rem;
		min-width: 0;
		margin-top: .6rem;
	}

	.fv__catch {
		position: relative;
		left: .8rem;
		width: 36.1rem;
	}

	.fv__lead {
		margin-top: 5.5rem;
		padding-inline: 0;
		line-height: 1.7;
		text-align: center;
		white-space: nowrap;
	}

	.fv__lead .br-pc { display: inline; }

	.fv__strong { margin-top: 4.3rem; }
	.fv__nav { margin-top: 4.7rem; }
}

/* ==========================================================================
   STUDENT REPORT
   ========================================================================== */
.top-report { margin-top: 11rem; }
.top-report .card-list { margin-top: 4.6rem; }
.top-report .more { margin-top: 4.2rem; }

@media screen and (min-width: 900px) {
	.top-report { margin-top: 13.2rem; }
	.top-report .card-list { margin-top: 5.2rem; }
	.top-report .more { margin-top: 4.5rem; }
}

/* ==========================================================================
   DISCOVER JSDF
   ========================================================================== */
.top-discover { margin-top: 13.9rem; }

.top-discover .card-list {
	margin-top: 5.1rem;
	--lh-card-ttl: 1.4;
}

.top-discover .more { margin-top: 4.7rem; }

@media screen and (min-width: 900px) {
	.top-discover { margin-top: 14.7rem; }
	.top-discover .card-list { margin-top: 6.5rem; }
	.top-discover .more { margin-top: 4.5rem; }
}

/* ==========================================================================
   INFORMATION
   ========================================================================== */
.top-info {
	margin-top: 9.2rem;
	padding: 8rem 0 10.3rem;
	background: var(--c-bg-gray);
}

.top-info .info-box { margin-top: 5.2rem; }
.top-info .more { margin-top: 3.6rem; }

@media screen and (min-width: 900px) {
	.top-info {
		margin-top: 13.5rem;
		padding: 10.5rem 0 10.6rem;
	}

	.top-info .info-box { margin-top: 5.4rem; }
	.top-info .more { margin-top: 4rem; }
}

/* ==========================================================================
   SHORTS
   ========================================================================== */
.top-shorts { margin-top: 9.6rem; }
.top-shorts .shorts { margin-top: 4.2rem; }
.top-shorts .more { margin-top: 5.3rem; }

@media screen and (min-width: 900px) {
	.top-shorts { margin-top: 12.2rem; }
	.top-shorts .shorts { margin-top: 4rem; }
	.top-shorts .more { margin-top: 4.8rem; }
}

/* ==========================================================================
   募集サイト／パンフレット／相談・応募（上の余白）
   ========================================================================== */
.cta { margin-top: 10.2rem; }

@media screen and (min-width: 900px) {
	.cta { margin-top: 13.5rem; }
}