/*
 * TOPページ（新デザイン時のみ）
 * セクションごとに地の色とレイアウトの型を変え、同じ型を繰り返さない。
 */

/* SWELL の #content の幅制限と余白を、TOPだけ外す（各セクションが自分で幅を持つ） */
.snw-front #content.l-content {
	max-width: none;
	margin: 0;
	padding: 0;
}
.snw-home > section { padding-block: var(--space-xl); }

/* ================= 01 HERO ================= */
.snw-hero {
	background: var(--snw-ivory);
	border-bottom: var(--rule);
	overflow: hidden;
}
.snw-hero__grid {
	display: grid;
	gap: var(--space-lg);
	align-items: center;
}
@media (min-width: 1024px) {
	.snw-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
}
.snw-hero__lead {
	margin: 0 0 var(--space-md);
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: var(--tracking-label);
	color: var(--snw-coral-ink);
}
.snw-hero__body { container-type: inline-size; }
.snw-hero__title {
	margin: 0;
	font-size: min(var(--font-size-display), 8.4cqi);
	word-break: keep-all;
	overflow-wrap: anywhere;
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: 0.01em;
	color: var(--snw-navy);
}
.snw-hero__text {
	max-width: 32em;
	margin: var(--space-md) 0 var(--space-lg);
	font-size: var(--font-size-lead);
	line-height: var(--leading-body);
	color: var(--snw-ink);
}
.snw-hero .snw-search { max-width: 36rem; }

/* 写真3枚：学ぶ → 臨床に立つ → 現場へ。スライドさせず同時に見せ、流れを一目で伝える */
.snw-hero__photos {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: var(--space-lg) 0 0;
	padding: 0;
	list-style: none;
}
.snw-hero__photo { margin: 0; }
.snw-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--snw-blue);
}
.snw-hero__photo--study img { object-position: 72% 50%; }
.snw-hero__photo--clinic img { object-position: 100% 50%; } /* 右端に寄せ、両肩まで収める */
.snw-hero__photo--field img { object-position: 100% 50%; } /* 右端に寄せ、トレーナーと選手の2人を収める */
.snw-hero__caption {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-xs);
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--snw-navy);
}
.snw-hero__caption::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--snw-coral);
}

@media (min-width: 1024px) {
	.snw-hero__visual { align-self: center; }
	/* 左に「学ぶ」を大きく、右に「臨床に立つ」「現場へ」を縦に。枠の比率を固定し、画面の高さで形が変わらないようにする */
	.snw-hero__photos {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		grid-template-rows: repeat(2, minmax(0, 1fr));
		gap: var(--space-sm);
		aspect-ratio: 6 / 5;
		margin: 0;
	}
	/* 写真1枚ずつに、紺みのある薄い影を落として背景から浮かせる（強い影は使わない） */
	.snw-hero__photo {
		position: relative;
		min-height: 0;
		box-shadow: 0 2px 4px rgba(24, 50, 74, 0.08), 0 12px 28px -8px rgba(24, 50, 74, 0.22);
	}
	.snw-hero__photo img { height: 100%; aspect-ratio: auto; }
	.snw-hero__photo--study { grid-row: 1 / span 2; }
	/* キャプションは写真の左下に重ね、写真どうしの間隔を揃える */
	.snw-hero__caption {
		position: absolute;
		left: 0;
		bottom: 0;
		margin: 0;
		padding: 6px 12px;
		background: var(--snw-ivory);
	}
}

/* ================= 02 CONCEPT ================= */
.snw-concept { background: var(--snw-ivory); }
.snw-concept__title {
	max-width: 18em;
	margin: 0;
	font-size: var(--font-size-h1);
	font-weight: 800;
	line-height: var(--leading-tight);
	color: var(--snw-navy);
}
.snw-concept__body {
	max-width: var(--measure);
	margin: var(--space-md) 0 var(--space-lg);
	font-size: var(--font-size-lead);
	line-height: var(--leading-body);
}
.snw-concept__body p { margin: 0 0 var(--space-sm); }

.snw-timeline {
	--dot: 14px;
	display: grid;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}
.snw-timeline::before { /* 一本の線 */
	content: "";
	position: absolute;
	left: calc(var(--dot) / 2 - 1px);
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--snw-navy);
}
.snw-timeline__item { position: relative; padding-left: calc(var(--dot) + var(--space-sm)); }
.snw-timeline__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: var(--dot);
	height: var(--dot);
	border: 2px solid var(--snw-navy);
	border-radius: 50%;
	background: var(--snw-ivory);
}
.snw-timeline__item.is-open::before { background: var(--snw-coral); border-color: var(--snw-coral); }
.snw-timeline__name { display: block; font-weight: 700; color: var(--snw-navy); }
.snw-timeline__text { display: block; font-size: var(--font-size-sm); color: var(--snw-muted); }

@media (min-width: 768px) {
	.snw-timeline { grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); padding-top: calc(var(--dot) + var(--space-sm)); }
	.snw-timeline::before { left: 0; right: -2vw; top: calc(var(--dot) / 2 - 1px); bottom: auto; width: auto; height: 2px; }
	.snw-timeline__item { padding-left: 0; }
	.snw-timeline__item::before { top: calc((var(--dot) + var(--space-sm)) * -1); }
	/* 線は「その先」で途切れず、画面の外へ続く */
	.snw-timeline__item.is-open::after {
		content: "";
		position: absolute;
		top: calc((var(--dot) + var(--space-sm)) * -1 + var(--dot) / 2 - 5px);
		right: -2vw;
		width: 10px;
		height: 10px;
		border-top: 2px solid var(--snw-navy);
		border-right: 2px solid var(--snw-navy);
		transform: rotate(45deg);
	}
}

/* ================= 03 YOUR STAGE ================= */
.snw-stage { background: var(--snw-white); }
.snw-stage__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) {
	.snw-stage__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
}
.snw-stage__note { margin: var(--space-sm) 0 0; color: var(--snw-muted); line-height: var(--leading-body); }
.snw-stage__list { margin: 0; padding: 0; list-style: none; border-top: var(--rule-strong); }
.snw-stage__item { border-bottom: var(--rule); }
.snw-stage__link {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "label arrow" "lead arrow";
	align-items: center;
	gap: 4px var(--space-md);
	padding: var(--space-md) 0;
	color: var(--snw-ink);
	text-decoration: none;
}
.snw-stage__label { grid-area: label; font-size: var(--font-size-h3); font-weight: 700; color: var(--snw-navy); }
.snw-stage__lead { grid-area: lead; font-size: var(--font-size-sm); color: var(--snw-muted); line-height: 1.7; }
.snw-stage__link .snw-arrow { grid-area: arrow; color: var(--snw-navy); }
.snw-stage__link:hover .snw-arrow { transform: translateX(6px); }
.snw-stage__link:hover .snw-stage__label { color: var(--snw-coral-ink); }
.snw-stage__link.is-disabled .snw-stage__label { color: var(--snw-muted); }

/* ================= 04 JOURNEY ================= */
.snw-journey { background: var(--snw-blue); }
.snw-journey__note { margin: var(--space-sm) 0 var(--space-lg); max-width: var(--measure); line-height: var(--leading-body); }
.snw-journey__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
	scrollbar-width: thin;
	scrollbar-color: var(--snw-navy) transparent;
}
.snw-journey__track {
	--dot: 16px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(180px, 220px);
	gap: 0;
	width: max-content;
	margin: 0;
	padding: 0 var(--gutter) var(--space-md);
	list-style: none;
	position: relative;
}
.snw-journey__track { padding-inline: max(var(--gutter), calc((100cqi - var(--wrap)) / 2)); }
.snw-journey__viewport { container-type: inline-size; }
.snw-journey__step {
	position: relative;
	padding: 0 var(--space-md) 0 0;
	scroll-snap-align: start;
}
.snw-journey__step::before { /* ステップ間をつなぐ線 */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(1.5rem + var(--space-sm) + var(--dot) / 2 - 1px);
	height: 2px;
	background: var(--snw-navy);
}
.snw-journey__step:last-child::before { right: 50%; }
.snw-journey__num {
	display: block;
	height: 1.5rem;
	font-family: var(--font-accent);
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--snw-navy-700);
}
.snw-journey__dot {
	position: relative;
	display: block;
	width: var(--dot);
	height: var(--dot);
	margin: var(--space-sm) 0 var(--space-md);
	border: 2px solid var(--snw-navy);
	border-radius: 50%;
	background: var(--snw-blue);
}
.snw-journey__step:has(a) .snw-journey__dot { background: var(--snw-navy); }
.snw-journey__step:last-child .snw-journey__dot { background: var(--snw-coral); border-color: var(--snw-coral); }
.snw-journey__title {
	display: block;
	font-size: var(--font-size-h3);
	font-weight: 700;
	line-height: var(--leading-heading);
	color: var(--snw-navy);
}
a.snw-journey__title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--snw-coral);
}
a.snw-journey__title:hover { text-decoration-color: var(--snw-navy); }
.snw-journey__text { display: block; margin-top: var(--space-2xs); font-size: var(--font-size-sm); line-height: 1.7; }

/* スマホは縦のタイムラインにする（横スクロールより自然に読めるため） */
@media (max-width: 767px) {
	.snw-journey__viewport { overflow: visible; scroll-snap-type: none; }
	.snw-journey__track {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		width: auto;
		gap: var(--space-md);
		padding: 0 var(--gutter);
	}
	.snw-journey__step {
		display: grid;
		grid-template-columns: var(--dot) 1fr;
		grid-template-rows: auto auto;
		column-gap: var(--space-sm);
		padding: 0;
	}
	.snw-journey__step::before { left: calc(var(--dot) / 2 - 1px); right: auto; top: 0.5em; bottom: calc(var(--space-md) * -1); width: 2px; height: auto; }
	.snw-journey__step:last-child::before { display: none; }
	.snw-journey__num { display: none; }
	.snw-journey__dot { grid-row: 1; grid-column: 1; margin: 0.35em 0 0; }
	.snw-journey__title { grid-column: 2; }
	.snw-journey__text { grid-column: 2; }
}

/* ================= 05 STUDY ================= */
.snw-study { background: var(--snw-ivory); }
.snw-study__head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-lg); }
@media (min-width: 768px) {
	.snw-study__head { grid-template-columns: auto 1fr; align-items: end; gap: var(--space-lg); }
}
.snw-study__note { margin: 0; max-width: var(--measure); color: var(--snw-muted); line-height: var(--leading-body); }
.snw-subjects {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--rule-strong);
	border-left: var(--rule);
}
@media (min-width: 768px) { .snw-subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .snw-subjects { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.snw-subjects__item { border-right: var(--rule); border-bottom: var(--rule); }
.snw-subjects__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	min-height: 128px;
	padding: var(--space-md) var(--space-sm);
	text-decoration: none;
	color: var(--snw-ink);
	transition: background-color var(--duration-fast) var(--ease);
}
a.snw-subjects__link:hover { background: var(--snw-white); }
.snw-subjects__en {
	font-family: var(--font-accent);
	font-size: var(--font-size-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--snw-muted);
}
.snw-subjects__name { font-size: 1.0625rem; font-weight: 700; line-height: 1.5; color: var(--snw-navy); }
.snw-subjects__count { margin-top: auto; font-size: var(--font-size-xs); color: var(--snw-coral-ink); font-weight: 700; }
.snw-subjects__link.is-empty .snw-subjects__name { color: var(--snw-muted); }
.snw-subjects__link.is-empty .snw-subjects__count { color: var(--snw-muted); font-weight: 400; }

/* ================= 06 FEATURE（編集グリッド） ================= */
.snw-feature { background: var(--snw-white); }
.snw-feature__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-sm);
	border-bottom: var(--rule-strong);
}
.snw-feature__grid { display: grid; gap: var(--space-lg) var(--space-md); }
@media (min-width: 768px) {
	.snw-feature__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.snw-post--lead { grid-column: 1 / -1; }
	.snw-post--side { grid-column: span 3; }
	.snw-post--row { grid-column: span 2; }
}
@media (min-width: 1024px) {
	.snw-feature__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; }
	.snw-post--lead { grid-column: 1 / span 8; grid-row: span 2; }
	.snw-post--side { grid-column: 9 / span 4; }
	.snw-post--row { grid-column: span 4; }
}
.snw-post__link { display: block; height: 100%; color: var(--snw-ink); text-decoration: none; }
.snw-post__media { overflow: hidden; background: var(--snw-blue); aspect-ratio: 1200 / 630; }
.snw-post__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}
.snw-post__link:hover .snw-post__media img { transform: scale(1.03); }
.snw-post__body { padding-top: var(--space-sm); }
.snw-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px var(--space-sm);
	margin: 0 0 var(--space-xs);
	font-size: var(--font-size-xs);
	color: var(--snw-muted);
}
.snw-post__meta time { font-family: var(--font-accent); letter-spacing: 0.04em; }
.snw-post__cat { font-weight: 700; color: var(--snw-navy); }
.snw-tag-new {
	padding: 2px 8px;
	background: var(--snw-coral-ink); /* 白文字とのコントラストを確保するため濃いコーラル */
	color: var(--snw-white);
	font-family: var(--font-accent);
	font-weight: 700;
	letter-spacing: 0.06em;
}
.snw-post__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: var(--leading-heading);
	color: var(--snw-navy);
	text-wrap: pretty;
}
.snw-post__link:hover .snw-post__title { text-decoration: underline; text-decoration-color: var(--snw-coral); text-decoration-thickness: 2px; }
.snw-post--lead .snw-post__title { font-size: var(--font-size-h2); line-height: var(--leading-tight); }
.snw-post__excerpt { max-width: var(--measure); margin: var(--space-sm) 0 0; line-height: var(--leading-body); color: var(--snw-muted); }
.snw-post--row { padding-top: var(--space-sm); border-top: var(--rule); }

/* ================= 07 CAREER ================= */
.snw-career { background: var(--snw-ivory-deep); }
.snw-career__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) {
	.snw-career__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); }
}
.snw-career__note { margin: var(--space-sm) 0 0; max-width: 24em; line-height: var(--leading-body); }
.snw-career__list {
	display: grid;
	gap: 0 var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.snw-career__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.snw-career__item { padding: var(--space-md) 0; border-top: var(--rule-strong); }
.snw-career__name { margin: 0 0 var(--space-xs); font-size: var(--font-size-h3); font-weight: 700; color: var(--snw-navy); }
.snw-career__text { margin: 0 0 var(--space-sm); line-height: var(--leading-body); }
.snw-career__soon { font-size: var(--font-size-sm); color: var(--snw-muted); }

/* ================= 08 PEOPLE ================= */
.snw-people { background: var(--snw-white); }
.snw-people__list { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }
@media (min-width: 768px) { .snw-people__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.snw-person__link { color: var(--snw-ink); text-decoration: none; }
.snw-person__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--snw-blue); }
.snw-person__media img { width: 100%; height: 100%; object-fit: cover; }
.snw-person__title { margin: var(--space-sm) 0 var(--space-xs); font-size: var(--font-size-h3); color: var(--snw-navy); }
.snw-people.is-placeholder { padding-block: var(--space-lg); background: var(--snw-ivory); }
.snw-people__admin {
	margin: 0;
	padding: var(--space-sm) var(--space-md);
	border: 1px dashed var(--snw-muted);
	font-size: var(--font-size-sm);
	color: var(--snw-muted);
}

/* ================= 09 ABOUT ================= */
/* 線はCONCEPTで使っているので、ここではロゴマークを据えて「誰が運営しているか」を見せる */
.snw-about { background: var(--snw-white); border-top: var(--rule); }
.snw-about__grid { display: grid; gap: var(--space-md); align-items: center; }
@media (min-width: 768px) {
	.snw-about__grid { grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); gap: var(--space-xl); }
}
.snw-about__mark { width: 96px; }
.snw-about__mark img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
	.snw-about__mark { width: 100%; }
}
.snw-about__title {
	margin: 0 0 var(--space-md);
	font-size: var(--font-size-h2);
	font-weight: 800;
	line-height: 1.5;
	color: var(--snw-navy);
}
.snw-about__body p { max-width: var(--measure); margin: 0 0 var(--space-lg); line-height: var(--leading-body); }