/* ===== Athlab FV & Approach v2（design-v2 準拠） ===== */
.alfv {
	--navy: #1e3048;
	--navy-2: #3a4a60;
	--teal: #2a86a8;
	--gray: #9aa4b0;
	--green: #1fa64a;
	--green-d: #178a3c;
	--bg: #f5f5f3;
	--mincho: "Shippori Mincho", "Yu Mincho", serif;
	--serif: "Cormorant Garamond", "Shippori Mincho", serif;
	--sans: "Montserrat", "Noto Sans JP", sans-serif;
	position: relative; width: 100%; max-width: none; margin: 0; padding: 0; clear: both;
	font-family: var(--mincho); color: var(--navy); line-height: 1.6; text-align: left;
	overflow: hidden;
}
.alfv *, .alfv *::before, .alfv *::after { box-sizing: border-box; }
.alfv p, .alfv h1, .alfv h2, .alfv h3, .alfv ol, .alfv li { margin: 0; padding: 0; }
.alfv a { text-decoration: none; }
.alfv i, .alfv em { font-style: normal; }
.alfv img { max-width: none; border: 0; }
.alfv section.alfv-hero, .alfv section.alfv-ap { margin: 0; padding: 0; width: auto; max-width: none; float: none; }

/* ---------- HERO ---------- */
.alfv .alfv-hero {
	position: relative; isolation: isolate;
	height: clamp(520px, 56.3vw, 860px);
	background: linear-gradient(180deg, #6f8fae 0%, #c9d8e4 45%, #9fb6c6 80%, #6e8fa6 100%);
}
.alfv .alfv-hero__bg { position: absolute; inset: 0; z-index: -1; margin: 0; }
.alfv .alfv-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 15%; }
/* 文字側をほんのり明るくして可読性を確保 */
.alfv .alfv-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(90deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.18) 38%, rgba(255,255,255,0) 55%);
}

.alfv .alfv-hero__inner {
	position: relative; z-index: 2;
	width: min(52%, 640px);
	padding: clamp(26px, 3.4vw, 48px) 0 0 clamp(20px, 8.3vw, 120px);
}
.alfv .alfv-hero__eyebrow {
	display: flex; align-items: center; gap: 22px;
	font: 500 clamp(10px, 1.05vw, 13px)/1 var(--sans); letter-spacing: .22em; color: var(--navy-2);
	margin-left: calc(-1 * clamp(0px, 4vw, 52px));
}
.alfv .alfv-hero__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--navy-2); }

.alfv .alfv-catch {
	margin-top: clamp(22px, 3vw, 40px);
	font-family: "Yomogi", cursive; font-weight: 400;
	font-size: clamp(36px, 5.6vw, 76px); line-height: 1.32; letter-spacing: .02em; color: var(--navy);
	text-shadow: 0 0 18px rgba(255,255,255,.55);
}
.alfv .alfv-catch span { display: block; white-space: nowrap; }
.alfv .alfv-catch__l1 { transform: rotate(-4deg); transform-origin: left center; margin-left: -.15em; }
.alfv .alfv-catch__l2, .alfv .alfv-catch__l3 { padding-left: .3em; }

.alfv .alfv-sub {
	margin-top: clamp(16px, 2.2vw, 30px); padding-left: .4em;
	font: 500 clamp(16px, 1.9vw, 24px)/1.65 var(--mincho); letter-spacing: .08em; color: var(--navy);
	text-shadow: 0 0 12px rgba(255,255,255,.7);
}

.alfv .alfv-cta { margin-top: clamp(20px, 3vw, 40px); max-width: 380px; }
.alfv .alfv-btn {
	position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
	min-height: clamp(54px, 5.6vw, 70px); padding: 10px 28px;
	border-radius: 999px; color: #fff !important;
	background: linear-gradient(180deg, #27b354, var(--green) 55%, var(--green-d));
	box-shadow: 0 6px 18px rgba(10,70,35,.28);
	font: 600 clamp(16px, 1.7vw, 21px)/1 "Noto Sans JP", sans-serif; letter-spacing: .1em;
	transition: transform .2s, box-shadow .2s;
}
.alfv .alfv-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(10,70,35,.32); }
.alfv .alfv-btn__pin { width: 22px; height: 22px; fill: #fff; flex-shrink: 0; }
.alfv .alfv-btn__arrow { font-size: 1.1em; margin-left: 2px; }

.alfv .alfv-vert {
	position: absolute; z-index: 2; right: clamp(16px, 2.6vw, 40px); bottom: clamp(40px, 6vw, 90px);
	display: flex; flex-direction: column; align-items: center; gap: 7px;
	color: #fff; font: 500 clamp(8px, .85vw, 11px)/1 var(--sans); letter-spacing: .16em;
	text-shadow: 0 1px 6px rgba(0,30,60,.4);
}
.alfv .alfv-vert__brand { font: 400 clamp(15px, 1.7vw, 22px)/1 var(--serif); letter-spacing: .22em; margin-bottom: 10px; }

/* ---------- APPROACH ---------- */
.alfv .alfv-ap { background: var(--bg); }
.alfv .alfv-ap__inner { max-width: 960px; margin: 0 auto; padding: clamp(36px, 4.4vw, 60px) 20px clamp(18px, 2vw, 26px); text-align: center; }
.alfv .alfv-ap__eyebrow {
	display: flex; align-items: center; justify-content: center; gap: 36px;
	font: 500 clamp(12px, 1.3vw, 15px)/1 var(--sans); letter-spacing: .26em; color: var(--navy-2);
}
.alfv .alfv-ap__eyebrow::before, .alfv .alfv-ap__eyebrow::after { content: ""; width: clamp(40px, 6.5vw, 64px); height: 1px; background: #9aa6b3; }
.alfv .alfv-ap__title {
	margin-top: 14px; font: 500 clamp(26px, 3.6vw, 40px)/1.3 var(--mincho); letter-spacing: .12em; color: var(--navy);
}
.alfv .alfv-ap__title em {
	font: 500 1.28em/1 var(--serif); color: var(--teal); margin: 0 .06em 0 .14em; vertical-align: -.04em;
}
.alfv .alfv-ap__lead { margin-top: 12px; font: 500 clamp(12px, 1.4vw, 15px)/1.7 var(--mincho); letter-spacing: .08em; color: var(--navy-2); }

.alfv .alfv-ap__list { list-style: none; margin-top: clamp(22px, 3vw, 36px); display: grid; gap: 18px; text-align: left; }
.alfv .alfv-card {
	position: relative; display: grid; grid-template-columns: 140px 1fr 36%;
	min-height: 160px; list-style: none;
	background: rgba(255,255,255,.92); border-radius: 6px; overflow: hidden;
	box-shadow: 0 4px 20px rgba(30,48,72,.07);
}
.alfv .alfv-card__side { padding: 16px 0 14px 26px; }
.alfv .alfv-card__no {
	display: block; font: italic 300 clamp(38px, 4.4vw, 50px)/1 var(--serif); color: var(--gray); letter-spacing: .02em;
}
.alfv .alfv-card__no i { font-style: normal; font-weight: 300; font-size: .7em; margin-left: .35em; color: #b4bcc6; }
.alfv .alfv-card__icon { display: block; width: 78px; height: 78px; margin-top: 8px; }
.alfv .alfv-card__icon svg { width: 100%; height: 100%; fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.alfv .alfv-card__body { padding: 20px 12px 18px 10px; }
.alfv .alfv-card__en { font: 600 11px/1 var(--sans); letter-spacing: .2em; color: var(--teal); }
.alfv .alfv-card__title { margin-top: 12px; font: 500 clamp(19px, 2.3vw, 25px)/1.35 var(--mincho); letter-spacing: .06em; white-space: nowrap; color: var(--navy); }
.alfv .alfv-card__text { margin-top: 12px; font: 500 clamp(13px, 1.4vw, 15px)/1.7 var(--mincho); letter-spacing: .06em; color: var(--navy-2); }
.alfv .alfv-card__tag {
	position: relative; margin-top: 12px; padding-left: 18px;
	font: 700 clamp(12px, 1.3vw, 14px)/1.4 "Noto Sans JP", sans-serif; letter-spacing: .08em; color: var(--teal);
}
.alfv .alfv-card__tag::before { content: ""; position: absolute; left: 2px; top: .2em; bottom: .2em; width: 1.5px; background: var(--teal); }

.alfv .alfv-card__visual {
	background: #c9d6e0 no-repeat right center / cover;
	clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

/* 締め帯 */
.alfv .alfv-closing {
	position: relative; text-align: center; color: #fff;
	padding: clamp(36px, 4.6vw, 64px) 16px clamp(30px, 4vw, 52px);
	background: #5f7189 no-repeat center 70% / cover;
}
.alfv .alfv-closing::before { content: ""; position: absolute; inset: 0; background: rgba(20,32,50,.18); }
.alfv .alfv-closing > * { position: relative; }
.alfv .alfv-closing__text { font: 500 clamp(17px, 2.2vw, 26px)/1.7 var(--mincho); letter-spacing: .16em; text-shadow: 0 1px 10px rgba(0,0,0,.25); }
.alfv .alfv-closing__brand {
	display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 14px;
	font: 400 clamp(15px, 1.7vw, 20px)/1 var(--serif); letter-spacing: .3em;
}
.alfv .alfv-closing__brand::before { content: ""; width: 1px; height: 28px; background: rgba(255,255,255,.8); }

/* ---------- SP ---------- */
@media (max-width: 767px) {
	.alfv .alfv-hero { height: auto; min-height: 178vw; }
	.alfv .alfv-hero__bg img { object-position: center bottom; }
	.alfv .alfv-hero::before { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.15) 40%, rgba(255,255,255,0) 55%); }
	.alfv .alfv-hero__inner { position: static; width: 100%; padding: 26px 20px 0; }
	.alfv .alfv-hero__eyebrow { margin-left: 0; font-size: 10px; }
	.alfv .alfv-catch { margin-top: 18px; font-size: 10.4vw; }
	.alfv .alfv-sub { font-size: 4.3vw; margin-top: 12px; }
	.alfv .alfv-cta { position: absolute; left: 20px; right: 20px; bottom: 24px; margin: 0; max-width: none; }
	.alfv .alfv-btn { min-height: 58px; font-size: 17px; }
	.alfv .alfv-vert { display: none; }

	.alfv .alfv-ap__inner { padding-left: 14px; padding-right: 14px; }
	.alfv .alfv-ap__eyebrow { gap: 16px; }
	.alfv .alfv-ap__title { font-size: 6.6vw; letter-spacing: .04em; }
	.alfv .alfv-ap__lead { font-size: 3.1vw; letter-spacing: .02em; }
	.alfv .alfv-card { grid-template-columns: 76px 1fr; min-height: 0; }
	.alfv .alfv-card__side { padding: 16px 0 10px 14px; }
	.alfv .alfv-card__no { font-size: 34px; }
	.alfv .alfv-card__icon { width: 54px; height: 54px; }
	.alfv .alfv-card__body { padding: 16px 14px 18px 4px; }
	.alfv .alfv-card__en { font-size: 9.5px; letter-spacing: .14em; }
	.alfv .alfv-card__title { font-size: 18px; letter-spacing: .04em; }
	.alfv .alfv-card__text { font-size: 13px; }
	.alfv .alfv-card__text br { display: none; }
	.alfv .alfv-card__visual { grid-column: 1 / -1; aspect-ratio: 334 / 158; clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); }
}
@media (max-width: 767px) { .alfv .alfv-card__title { white-space: normal; } }

/* SP：文字を上の明るい空に、写真を下に（写真は上端をフェード） */
@media (max-width: 767px) {
	.alfv .alfv-hero { height: auto; min-height: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #eef2f4 0%, #dfe6eb 60%, #c9d4db 100%); }
	.alfv .alfv-hero::before { display: none; }
	.alfv .alfv-hero__inner { order: 1; position: relative; z-index: 2; }
	.alfv .alfv-hero__bg { order: 2; position: relative; inset: auto; z-index: 0; margin-top: -56px;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32%); mask-image: linear-gradient(180deg, transparent 0, #000 32%); }
	.alfv .alfv-hero__bg img { width: 100%; height: auto; object-fit: initial; }
	.alfv .alfv-cta { z-index: 3; }
	.alfv .alfv-catch, .alfv .alfv-sub { text-shadow: none; }
}
@media (max-width: 767px) {
	.alfv .alfv-hero__inner { position: static; }
	.alfv .alfv-hero__eyebrow, .alfv .alfv-catch, .alfv .alfv-sub { position: relative; z-index: 2; }
	.alfv .alfv-sub { margin-bottom: 8px; }
}