@charset "utf-8";
/* 文字化け防止 */
/* =========================
   Suifeel About Us (TB)
   Replace whole file
========================= */

:root{
	--ink:#0c1320;
	--muted:rgba(12,19,32,.72);
	--line:rgba(12,19,32,.10);
	--line2:rgba(12,19,32,.06);
	--card:#ffffff;
	--bg1:#f6f7fb;
	--bg2:#ffffff;
	--accent:#0b2b63;
	--accent2:#123c86;
	--shadow1:0 18px 50px rgba(12,19,32,.10);
	--shadow2:0 10px 26px rgba(12,19,32,.08);
	--radius-xl:26px;
	--radius-lg:20px;
	--radius-md:16px;
}

/* =========================
   Layout
========================= */

.AboutTitleBack{
	height: 360px;
	margin: 0 auto 140px;
	background-position: center;
}

.AboutArea{
	padding: 0;
	margin: 200px auto auto;
}

.AboutDetail{
	width: 94%;
}

.AboutDetail_inner{
	width: 94%;
	padding: 5.5% 0;
}

/* =========================
   Hero Typography
========================= */

.AboutDetail_TitleArea_lead{
	font-size: 20px;
}

.AboutDetail_TitleArea_head{
	font-size: 32px;
	margin: 2.5% auto 0;
}

.AboutDetail_Text{
	padding: 4.5% 0;
}

.AboutDetail_Text p{
	font-size: 15.5px;
	line-height: 2.35;
}

/* =========================
   Hero Nav
========================= */

.AboutDetail_nav{
	padding: 22px 0;
}

.AboutDetail_nav_ul{
	margin: 3% auto 0;
}

.AboutDetail_nav_li{
	width: 32%;
	padding: 0 0 2.2%;
}

.AboutDetail_nav_li a{
	width: 92%;
	font-size: 13.5px;
	padding-top: 7px;
	padding-bottom: 7px;
	border-radius: 10px;
}

/* =========================
   Sections
========================= */

.AboutSection{
	padding: 2.5% 0;
	margin: 6% auto auto;
}

.AboutEyebrow{
	font-size: 18px;
}

.AboutH2{
	font-size: 26px;
}

.AboutText{
	font-size: 15.5px;
	line-height: 2.05;
}

/* =========================
   Explanation Table -> Stack
   (PC: display:table / TB: stack)
========================= */

.SuifeelExplanation_table_ul{
	display: block;
	width: 100%;
	margin: 5% auto;
}

.Suifeel-table-left,
.Suifeel-table-right{
	display: block;
	width: 100%;
}

.Suifeel-table-right{
	padding: 0;
	text-align: left;
	margin: 5% auto;
}

.ExplanationDetail{
	padding: 0;
}

.ExplanationDetail p{
	font-size: 14.5px;
	line-height: 2.35;
}

.ExplanationDetail strong{
	font-size: 14.5px;
	line-height: 2.35;
}

/* =========================
   Cards / Grids
========================= */

.AboutGrid2{
	grid-template-columns: 1fr;
	gap: 16px;
}

.AboutGrid3{
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.AboutCard{
	padding: 20px;
	border-radius: var(--radius-lg);
}

.AboutCard_t{
	font-size: 15.5px;
}

.AboutCard_b{
	font-size: 14.5px;
	line-height: 1.95;
}

/* =========================
   KPI / Steps
========================= */

.AboutKpi{
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.AboutKpi_item{
	padding: 20px;
}

.AboutKpi_label{
	font-size: 14px;
}

.AboutKpi_value{
	font-size: 18px;
}

.AboutKpi_note{
	font-size: 12.8px;
}

.AboutSteps{
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.AboutStep{
	padding: 20px;
}

.AboutStep_n{
	font-size: 34px;
}

.AboutStep_t{
	font-size: 22px;
}

.AboutStep_b{
	font-size: 14.5px;
	line-height: 1.95;
}

/* =========================
   Sub Note
========================= */

.AboutSubNote{
	padding: 14px 16px;
}

.AboutSubNote p{
	font-size: 12.8px;
}

/* =========================
   Media / Video
========================= */

.p-movie__youtube{
	width: 100%;
	border-radius: 22px;
}

/* =========================
   CTA
========================= */

.AboutCta{
	margin: 42px auto;
}

.AboutCtaBtn{
	width: 46%;
	font-size: 15.5px;
	padding: 14px 18px;
	border-radius: 24px;
}

/* =========================
   Evidence overrides (keep your PC polish)
========================= */

#about_evidence .AboutGrid3{
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

#about_evidence .AboutCta{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.EvidenceLeft20{
	width: auto; /* PCの20%はTBで解除 */
}

.AboutGlobalNote{
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 16px;
}

.AboutList li{
	font-size: 13.2px;
	line-height: 1.95;
}