/* ==========================================================================
   13b WHY — なぜ、この価格なのか
   料金表の手前で、金額の根拠を静かに渡す区間。
   年数を大きく置き、時間の重みを最初に見せる。
   ========================================================================== */

.aa-why{ overflow:hidden }

.aa-why__head{
	display:grid;
	justify-items:center;
	text-align:center;
	gap:.4em;
	margin-bottom:clamp(40px,7svh,96px);
}
.aa-why__label{
	font-family:var(--font-mono);
	font-size:var(--fs-label);
	letter-spacing:var(--ls-label);
	color:var(--c-signal);
	margin-bottom:1em;
}

/* 年数。ここが視線の起点になる */
.aa-why__years{
	display:flex;
	align-items:baseline;
	gap:.1em;
	line-height:.85;
}
.aa-why__years b{
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(5rem,18vw,13rem);
	letter-spacing:-.03em;
	background:linear-gradient(178deg,#fff 30%,var(--c-signal) 82%,transparent 112%);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}
.aa-why__years span{
	font-family:var(--font-display);
	font-weight:500;
	font-size:clamp(1.4rem,4vw,3rem);
	color:var(--fg-sub);
}

.aa-why__title{
	font-family:var(--font-display);
	font-weight:500;
	font-size:clamp(1.3rem,3.2vw,2.6rem);
	line-height:1.45;
	margin-top:.2em;
}
.aa-why__lead{
	margin-top:1.2em;
	color:var(--fg-sub);
	font-size:var(--fs-lead);
	max-width:46ch;
	line-height:2;
}

/* --- 3つの理由 --- */
.aa-why__list{
	display:grid;
	gap:1px;
	background:rgb(255 255 255 / .12);
	border-block:1px solid rgb(255 255 255 / .12);
	counter-reset:why;
}
.aa-why__item{
	position:relative;
	background:var(--bg);
	padding:clamp(28px,4vw,56px) 0 clamp(28px,4vw,56px) clamp(48px,7vw,110px);
	display:grid;
	gap:.8em;
	align-content:start;
	counter-increment:why;
}
/* 番号は輪郭だけで、控えめに */
.aa-why__item::before{
	content:counter(why,decimal-leading-zero);
	position:absolute;
	left:0;
	top:clamp(28px,4vw,56px);
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(1.4rem,2.6vw,2.2rem);
	line-height:1;
	color:transparent;
	-webkit-text-stroke:1px rgb(255 255 255 / .35);
}

.aa-why__item-title{
	font-family:var(--font-display);
	font-weight:500;
	font-size:clamp(1.15rem,2.2vw,1.8rem);
	line-height:1.5;
}
.aa-why__item-text{
	font-size:.95rem;
	line-height:2.05;
	color:var(--fg-sub);
	max-width:56ch;
}
/* 強調する一文。左に光の線を引いて、結論だと分かるようにする */
.aa-why__item-note{
	padding-left:1.2em;
	border-left:2px solid var(--c-signal);
	font-size:clamp(.95rem,1.3vw,1.1rem);
	line-height:2;
	color:var(--fg);
	max-width:52ch;
}

/* --- 締め --- */
.aa-why__conclusion{
	margin-top:clamp(40px,7svh,96px);
	text-align:center;
	font-family:var(--font-display);
	font-weight:500;
	font-size:clamp(1.05rem,2.2vw,1.7rem);
	line-height:1.9;
}
/* 1行目だけ光らせて、金額の話だと分かるようにする */
.aa-why__conclusion .aa-line:first-child{
	background:linear-gradient(100deg,#fff 20%,var(--c-signal) 62%,var(--c-halo) 92%);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

@media (max-width:599px){
	.aa-why__item{ padding-left:0; padding-top:clamp(24px,4vw,40px) }
	.aa-why__item::before{ position:static; display:block; margin-bottom:.3em }
}