/* ==========================================================================
   13a BENEFITS — 入れた翌日から、サロンが変わる。
   機能ではなく結果を語る区間。重要度の差を「大きさ」で示す二層構成。
   ========================================================================== */

/* --- 見出し --- */
.aa-benefits__head{ max-width:min(900px,100%); margin-bottom:clamp(36px,6svh,88px) }
.aa-benefits__title{
	font-family:var(--font-display);
	font-weight:500;
	font-size:clamp(1.5rem,3.6vw,3rem);
	line-height:var(--lh-tight);
}
/* 2行目（AOSが、利益をつくる。）だけ光を帯びる */
.aa-benefits__title .aa-line:last-child{
	background:linear-gradient(100deg, var(--c-ink) 24%, var(--c-signal) 62%, var(--c-halo) 92%);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

/* --- 大きく見せる項目 --- */
.aa-benefits__main{
	display:grid;
	gap:1px;
	background:var(--rule);
	border-block:1px solid var(--rule);
}

.aa-benefit{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:clamp(20px,3vw,52px);
	padding:clamp(28px,4vw,56px) 0;
	background:var(--bg);
	transition:background 400ms var(--ease-out);
}
.aa-benefit:hover{ background:#fff }

/* 番号は輪郭だけ。大きく置いて、視線の起点にする */
.aa-benefit__num{
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(2.2rem,5vw,4.2rem);
	line-height:.9;
	color:transparent;
	-webkit-text-stroke:1px var(--c-silver);
	transition:-webkit-text-stroke-color 400ms var(--ease-out);
}
.aa-benefit:hover .aa-benefit__num{ -webkit-text-stroke-color:var(--c-signal) }

.aa-benefit__body{ display:grid; gap:.8em; align-content:start; max-width:64ch }

.aa-benefit__title{
	font-family:var(--font-display);
	font-weight:500;
	font-size:clamp(1.15rem,2.2vw,1.9rem);
	line-height:1.5;
}
/* 一言目は本文より濃く、結論として読ませる */
.aa-benefit__lead{
	font-size:clamp(.95rem,1.2vw,1.1rem);
	line-height:1.95;
	color:var(--fg);
}
.aa-benefit__text{
	font-size:.9rem;
	line-height:1.95;
	color:var(--fg-sub);
}

/* --- 小さく並べる項目 --- */
.aa-benefits__sub{ margin-top:clamp(40px,7svh,96px) }
.aa-benefits__sub-label{
	font-family:var(--font-mono);
	font-size:var(--fs-label);
	letter-spacing:.12em;
	color:var(--fg-sub);
	margin-bottom:clamp(18px,3svh,32px);
}
.aa-benefits__sub-list{
	display:grid;
	gap:1px;
	background:var(--rule);
	border:1px solid var(--rule);
	grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.aa-benefits__sub-item{
	background:var(--bg);
	padding:clamp(16px,2vw,24px);
	display:grid;
	gap:.35em;
	align-content:start;
	transition:background 300ms var(--ease-out);
}
.aa-benefits__sub-item:hover{ background:#fff }
.aa-benefits__sub-name{ font-size:.95rem }
.aa-benefits__sub-text{ font-size:.78rem; color:var(--fg-sub); line-height:1.75 }

.aa-benefits .aa-button{ margin-top:clamp(32px,5svh,64px) }

@media (max-width:599px){
	.aa-benefit{ grid-template-columns:1fr; gap:.6em }
	.aa-benefit__num{ font-size:1.8rem }
}