@charset "utf-8";
/* ==========================================================================
   cmn.css
   header / メニュー / footer / 共通パーツ
   ※ スマホ基準で書き、PC（900px 以上）は @media で上書きする。
   ※ setting.css のリセットで body は text-align:center。
      左揃えにしたい箇所は明示的に text-align:left を指定する。
   ========================================================================== */

/* ==========================================================================
   リセット由来の調整
   ========================================================================== */

/* リセットの * { margin: 0 auto } は flex / grid の子で
   余白を食い合ってしまうため、該当箇所だけ打ち消す */
.header > *,
.header__inner > *,
.breadcrumb__list > *,
.hamburger > *,
.menu__link > *,
.sns > *,
.sec-ttl__jp > *,
.btn-more > *,
.labels > *,
.card-list > *,
.card__meta > *,
.shorts__track > *,
.short-list > *,
.info__meta > *,
.ext > *,
.cta__inner > *,
.cta__btns > *,
.cta__btn > *,
.footer__inner > *,
.fnav > *,
.fnav__link > * {
	margin-inline: 0;
}

/* ==========================================================================
   header
   ========================================================================== */
.header {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--c-bg);
}

/* 最上部の黒帯 */
.header__bar {
	height: 1rem;
	background: var(--c-bar);
}

.header__inner {
	display: flex;
	align-items: center;
	padding: 4rem var(--pad) 4.7rem;
}

.header__logo {
	width: 35.6rem;
	line-height: 1;
}

.header__logo a { display: block; }
.header__logo img { width: 100%; }

@media screen and (min-width: 900px) {
	.header__inner {
		padding: 3.5rem 5.1rem 1.8rem;
	}

	.header__logo { width: 37.8rem; }
}

/* --- パンくず ---------------------------------------------------------- */
/* スマホ：ヘッダー下の帯 ／ PC：最上部の黒帯の中 */
.breadcrumb {
	order: 3;
	height: 3.6rem;
	margin-inline: var(--pad);
	padding-inline: 1.4rem;
	font-size: var(--fz-bread);
	font-weight: 500;
	line-height: 3.6rem;
	color: var(--c-white);
	background: var(--c-bar);
	overflow: hidden;
}

.breadcrumb__list {
	display: flex;
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.breadcrumb__list::-webkit-scrollbar { display: none; }

.breadcrumb__item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "";
	width: 1px;
	height: 1.15em;
	margin-inline: .6em;
	background: currentColor;
	opacity: .7;
}

@media screen and (min-width: 900px) {
	.breadcrumb {
		position: absolute;
		inset: 0 0 auto;
		height: 2rem;
		margin-inline: 0;
		line-height: 2rem;
	}
}

/* --- ハンバーガー ------------------------------------------------------ */
.hamburger {
	position: fixed;
	top: 5.4rem;
	right: var(--pad);
	z-index: var(--z-hamburger);
	display: grid;
	place-items: center;
	width: 10.2rem;
	height: 3.6rem;
	background: var(--c-white);
	border: 1px solid var(--c-hairline);
	border-radius: 999px;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.hamburger__line {
	grid-area: 1 / 1;
	width: 4.8rem;
	height: max(.16rem, 1px);
	background: var(--c-black);
	transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.hamburger__line:nth-child(1) { transform: translateY(-.38rem); }
.hamburger__line:nth-child(2) { transform: translateY(.38rem); }

.hamburger.is-open .hamburger__line:nth-child(1) { transform: rotate(12deg); }
.hamburger.is-open .hamburger__line:nth-child(2) { transform: rotate(-12deg); }

/* マウスオーバー（PCのみ）：黒地に白線。メニューを開いている間（×表示）は白のまま */
@media screen and (min-width: 900px) and (hover: hover) {
	.hamburger:not(.is-open):hover {
		background-color: var(--c-bar);
		border-color: var(--c-bar);
	}

	.hamburger:not(.is-open):hover .hamburger__line { background-color: var(--c-white); }
}

@media screen and (min-width: 900px) {
	.hamburger {
		top: 4.4rem;
		right: 4.2rem;
	}
}

/* --- メニュー ---------------------------------------------------------- */
/* スマホ：全画面 ／ PC：右側のパネル（PC はデザインが無いためスマホ版を元に作成） */
.menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-menu);
	padding: 14rem var(--pad) 8rem;
	color: var(--c-white);
	background: var(--c-bg-dark);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), visibility var(--dur), transform var(--dur) var(--ease);
}

.menu.is-open {
	opacity: 1;
	visibility: visible;
}

.menu__item,
.menu__list:last-of-type {
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px 4px);
	background-repeat: no-repeat;
	background-size: 100% 1px;
}

.menu__list:last-of-type { background-position: left bottom; }

.menu__link {
	display: flex;
	align-items: center;
	height: 12.2rem;
	padding-left: 3.9rem;
	font-size: var(--fz-menu);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
	text-align: left;
}

.menu__list--sub .menu__link { height: 7.8rem; }

.menu__ico {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 3.2rem;
	margin-right: 1.7rem;
	--k: 1.39;
}

.menu__sns {
	margin-top: 5.2rem;
	gap: 3.8rem;
	--k: 1.42;
}

.menu-overlay { display: none; }

@media screen and (min-width: 900px) {
	.menu {
		left: auto;
		width: 56.7rem;
		transform: translateX(2rem);
	}

	.menu.is-open { transform: none; }

	.menu-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: calc(var(--z-menu) - 1);
		background: rgba(0, 0, 0, .5);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dur) var(--ease), visibility var(--dur);
	}

	.menu-overlay.is-open {
		opacity: 1;
		visibility: visible;
	}
}

/* --- アイコン（SVG画像） ---------------------------------------------- */
/* 幅は style="--w: 2.2" のようにデザイン上の px ÷ 10 で指定。--k は拡大率 */
.ico {
	flex-shrink: 0;
	width: calc(var(--w, 2) * var(--k, 1) * 1rem);
	height: auto;
}

/* --- SNS --------------------------------------------------------------- */
.sns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.2rem;
}

.sns a { display: block; }

/* ==========================================================================
   共通パーツ
   ========================================================================== */

/* --- セクション見出し -------------------------------------------------- */
/* 見出し内の余白は共通。見出し下の余白はセクションごとに個別指定する */
.sec-ttl {
	padding-inline: var(--pad);
	text-align: left;
}

.sec-ttl__en {
	font-family: var(--f-en);
	font-size: var(--fz-sec-en);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	font-feature-settings: normal;
	color: var(--c-black);
}

.sec-ttl__en em {
	font-style: normal;
	color: var(--c-red);
}

.sec-ttl__jp {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.2rem;
	font-size: var(--fz-sec-jp);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .1em;
}

/* 字間を詰める見出し（STUDENT REPORT） */
.sec-ttl__jp--tight { letter-spacing: .05em; }

@media screen and (min-width: 900px) {
	.sec-ttl { text-align: center; }

	.sec-ttl__jp {
		justify-content: center;
		margin-top: 1rem;
	}
}

/* --- 「一覧」ボタン ---------------------------------------------------- */
.more {
	padding-inline: var(--pad);
	text-align: left;
	line-height: 1;
}

.btn-more {
	display: inline-flex;
	align-items: center;
	height: 3.4rem;
	padding: 0 2.7rem 0 1.9rem;
	font-size: var(--fz-btn);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .05em;
	background: var(--c-white);
	border: 1px solid var(--c-hairline);
	border-radius: 999px;
	transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn-more::before {
	content: "";
	flex-shrink: 0;
	width: .85rem;
	height: .85rem;
	margin: 0 .8rem 0 0;
	border-top: .3rem solid var(--c-red);
	border-right: .3rem solid var(--c-red);
	transform: translateX(-.25rem) rotate(45deg);
}

@media screen and (min-width: 900px) {
	.more { text-align: center; }
}

/* 外部リンク：文字の後ろに別ウィンドウのアイコン */
.btn-more__ext {
	flex-shrink: 0;
	width: 1.1rem;
	margin-left: .8rem;
	transition: filter var(--dur) var(--ease);
}

/* マウスオーバー（PCのみ）：黒地に白文字 */
@media screen and (min-width: 900px) and (hover: hover) {
	.btn-more:hover .btn-more__ext { filter: brightness(0) invert(1); }

	.btn-more:hover {
		opacity: 1;
		color: var(--c-white);
		background-color: var(--c-bar);
		border-color: var(--c-bar);
	}
}

/* --- カテゴリーラベル（テキスト） -------------------------------------- */
.labels {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.label {
	display: inline-flex;
	align-items: center;
	height: 2.2rem;
	padding: 0 1.6rem .1em;
	font-size: var(--fz-label);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
	white-space: nowrap;
	color: var(--c-white);
	background: var(--c-navy);
	border-radius: 999px;
}

.label--type  { background: var(--c-blue); }
.label--topic { background: var(--c-green); }

@media screen and (min-width: 900px) {
	.label {
		height: 2.6rem;
		padding-inline: 1.9rem;
	}
}

/* --- 再生ボタン（サムネイル画像とは別パーツ） -------------------------- */
.play {
	position: absolute;
	inset: 0;
	width: 19%;
	height: auto;
	margin: auto;
	pointer-events: none;
}

/* --- カード ------------------------------------------------------------ */
.card { min-width: 0; }

.card__link {
	display: block;
	text-align: left;
}

.card__thumb {
	position: relative;
	aspect-ratio: 3056 / 1793;
	overflow: hidden;
	border-radius: var(--radius-card);
	isolation: isolate;
}

.card__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) {
	.card__link:hover { opacity: 1; }
	.card__link:hover .card__img { transform: scale(var(--zoom-thumb)); }
}

.card__meta { margin-top: 2.1rem; }

.card__date {
	display: block;
	margin-top: 1.2rem;
	font-family: var(--f-num);
	font-size: var(--fz-date);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	font-feature-settings: normal;
}

.card__ttl {
	margin-top: .3rem;
	font-size: var(--fz-card-ttl);
	font-weight: 300;
	line-height: var(--lh-card-ttl);
	text-align: justify;
}

@media screen and (min-width: 900px) {
	.card__meta { margin-top: 2.4rem; }
	.card__date { margin-top: 1.4rem; }
	.card__ttl  { margin-top: .4rem; }
}

/* ラベルが無いカードは日付の上の余白を取る */
.card .card__meta > .card__date:first-child { margin-top: 0; }

/* --- カード一覧：スライダー型 ------------------------------------------ */
/* スマホ：横スクロール（スワイプ） ／ PC：1行に入る枚数だけ表示 */
.card-list--slider {
	display: flex;
	gap: 2.8rem;
	padding-inline: var(--pad);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pad);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.card-list--slider::-webkit-scrollbar { display: none; }

.card-list--slider > .card {
	flex: 0 0 26.4rem;
	scroll-snap-align: start;
}

@media screen and (min-width: 900px) {
	.card-list--slider {
		display: grid;
		grid-template-columns: repeat(auto-fit, 30.5rem); /* 1行に満たないときは中央に寄せる */
		justify-content: center;
		grid-template-rows: auto;
		grid-auto-rows: 0;
		gap: 0 4rem;
		overflow: hidden;
	}
}

/* --- カード一覧：グリッド型（一覧ページ） ------------------------------ */
.card-list--grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 4.8rem;
	padding-inline: var(--pad);
}

/* スマホの一覧ページはラベルと日付を横並びにする */
.card-list--grid .card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1.4rem;
	margin-top: 1.8rem;
}

.card-list--grid .card__date { margin-top: 0; }
.card-list--grid .card__ttl  { margin-top: .9rem; }

@media screen and (min-width: 900px) {
	.card-list--grid {
		grid-template-columns: repeat(auto-fit, 30.5rem); /* 1行に満たないときは中央に寄せる */
		justify-content: center;
		gap: 5.9rem 4rem;
	}

	.card-list--grid .card__meta {
		display: block;
		margin-top: 2.4rem;
	}

	.card-list--grid .card__date { margin-top: 1.4rem; }
	.card-list--grid .card__ttl  { margin-top: .4rem; }
}

/* --- ショート動画 ------------------------------------------------------ */
.short { min-width: 0; }

.short__link {
	position: relative;
	display: block;
}

.short__thumb {
	aspect-ratio: 2679 / 4763;
	overflow: hidden;
	border-radius: var(--radius-short);
	isolation: isolate;
}

.short__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) {
	.short__link:hover { opacity: 1; }
	.short__link:hover .short__img { transform: scale(var(--zoom-thumb)); }
}

/* サムネイル左下に重ねるラベル */
.short .labels {
	position: absolute;
	left: 1.5rem;
	bottom: 1.5rem;
	gap: .4rem;
}

.short .label {
	height: 2rem;
	padding-inline: 1.3rem;
	font-size: var(--fz-label-short);
}

/* 自動で横に流れるスライダー（setting.js） */
.shorts {
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.shorts::-webkit-scrollbar { display: none; }

.shorts__track {
	display: flex;
	gap: 4.8rem;
	width: max-content;
	padding-inline: 2.4rem;
}

.shorts__track > .short { flex: 0 0 26.8rem; }

@media screen and (min-width: 900px) {
	.shorts__track {
		gap: 4.3rem;
		padding-inline: 2.15rem;
	}
}

/* --- INFORMATION 一覧 --------------------------------------------------- */
.info-box {
	margin-inline: var(--pad);
	padding: 5.6rem 3.5rem 5.5rem;
	background: var(--c-white);
}

.info-list__item + .info-list__item {
	margin-top: 2.2rem;
	padding-top: 3.3rem;
	background: repeating-linear-gradient(90deg, var(--c-text) 0 3px, transparent 3px 6px) no-repeat left top / 100% 1px;
}

.info {
	display: block;
	text-align: left;
}

.info__meta {
	display: flex;
	align-items: center;
	gap: 1.3rem;
}

.info__cat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 8.45rem;
	height: 2.2rem;
	padding: 0 1.2rem .1em;
	font-size: var(--fz-info-cat);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	color: var(--c-white);
	background: var(--c-text);
	border-radius: 999px;
}

.info__date {
	font-family: var(--f-num);
	font-size: var(--fz-info-date);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	font-feature-settings: normal;
}

.info__ttl {
	margin-top: 1rem;
	font-size: var(--fz-info-ttl);
	line-height: 1.6;
	letter-spacing: .05em;
}

/* 「募集サイト」外部リンク表示 */
.ext {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	width: 9.9rem;
	height: 1.96rem;
	margin: .9rem 0 0;
	font-size: var(--fz-ext);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	color: var(--c-black);
	border: 1px solid var(--c-hairline);
	border-radius: 999px;
}

.ext__ico { width: .85rem; }

@media screen and (min-width: 900px) {
	.info-box {
		max-width: 110rem;
		margin-inline: auto;
		padding: 5.8rem 10rem 5.7rem;
	}

	.info-list__item + .info-list__item {
		margin-top: 2.4rem;
		padding-top: 3.2rem;
	}

	.info__ttl { margin-top: 1.6rem; }

	.ext {
		display: inline-flex;
		margin: -.2em 0 0 .8rem;
		vertical-align: middle;
	}
}

/* ==========================================================================
   募集サイト／パンフレット／相談・応募（全ページ共通）
   ※ 上の余白はページごとに個別指定する
   ========================================================================== */
.cta__inner { padding-inline: var(--pad); }

.cta__recruit {
	display: block;
	padding: 3.8rem 0 4.8rem;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-box);
}

.cta__recruit-txt  { width: 26.8rem; }

.cta__recruit-logo {
	width: 36.1rem;
	margin-top: 3.1rem;
}

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

.cta__btn {
	display: grid;
	place-items: center;
	height: 15.8rem;
	background: var(--c-bg-dark);
	border-radius: var(--radius-btn);
}

.cta__btn img { width: calc(var(--w) * 1.04 * 1rem); }

@media screen and (min-width: 900px) {
	.cta__inner {
		display: flex;
		justify-content: center;
		gap: 2.3rem;
	}

	.cta__recruit {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4.1rem;
		flex: 0 1 68.8rem;
		height: 15.2rem;
		padding: 0;
	}

	.cta__recruit-txt {
		width: 22.3rem;
		margin: 0;
	}

	.cta__recruit-logo {
		width: 31.2rem;
		margin: 0;
	}

	.cta__btns {
		display: flex;
		gap: 2.3rem;
		margin-top: 0;
	}

	.cta__btn {
		width: 23.3rem;
		height: 15.2rem;
	}

	.cta__btn img { width: calc(var(--w) * 1rem); }
}

/* ==========================================================================
   footer
   ========================================================================== */
.footer {
	margin-top: 4.7rem;
	color: var(--c-white);
	background: var(--c-bg-dark);
}

.footer__inner { padding: 7.8rem var(--pad) 8.7rem; }

.footer__logo {
	width: 35.6rem;
	margin-inline: auto;
}
.footer__logo a { display: block; }
.footer__logo img { width: 100%; }

.footer__sns { margin-top: 4rem; }

/* --- フッターナビ ------------------------------------------------------ */
.fnav {
	display: flex;
	justify-content: center;
	gap: 3.4rem;
	margin-top: 5.1rem;
}

.fnav__link {
	display: flex;
	align-items: center;
	height: 4.6rem;
	font-size: var(--fz-fnav);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
	white-space: nowrap;
}

.fnav__ico {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.3rem;
	margin-right: 1rem;
}

.footer__copy {
	display: grid;
	place-items: center;
	height: 8.2rem;
	font-family: var(--f-num);
	font-size: var(--fz-copy);
	font-weight: 500;
	padding-top: .5rem;
	line-height: 1.2;
	letter-spacing: .05em;
	font-feature-settings: normal;
	background: var(--c-black);
}

.footer__copy small { font-size: inherit; }

@media screen and (min-width: 900px) {
	.footer__inner {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap: 5.1rem;
		padding: 7rem var(--pad) 6.9rem;
	}

	.footer__brand { margin-top: 1.2rem; }
	.footer__logo  { width: 32.9rem; }
	.footer__sns   { margin-top: 2.7rem; }
	.fnav          { margin-top: 0; }
}