@charset "utf-8";
/* 文字化け防止 */
/* =========================
   Suifeel About Us (SP)
   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: 240px;
	margin: 0 auto 90px;
	background-position: center;
}

.AboutArea{
	padding: 0 4%;
}

.AboutDetail{
	width: 100%;
}

.AboutDetail_inner{
	width: 100%;
	padding: 7% 0;
}

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

.AboutDetail_TitleArea_lead{
	font-size: 16px;
	line-height: 1.7;
}

.AboutDetail_TitleArea_head{
	font-size: 22px;
	line-height: 1.5;
	margin: 3.5% auto 0;
}

.AboutDetail_Text{
	padding: 5.5% 0;
}

.AboutDetail_Text p{
	font-size:15px;
	line-height: 2.15;
}

/* =========================
   Hero Nav (2 columns, tap friendly)
========================= */

.AboutDetail_nav{
	padding: 18px 0;
}

.AboutDetail_nav_ul{
	margin: 4% auto 0;
}

.AboutDetail_nav_li{
	width: 49%;
	padding: 0 0 10px;
}

.AboutDetail_nav_li a{
	width: 94%;
	font-size: 13px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 12px;
}

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

.AboutSection{
	padding: 4% 0;
	margin: 9% auto auto;
}

.AboutEyebrow{
	font-size: 16px;
	letter-spacing: .16em;
}

.AboutH2{
	font-size: 20px;
	line-height: 1.5;
}

.AboutText{
	font-size: 14.5px;
	line-height: 2.0;
}

/* =========================
   Explanation Table -> Stack
========================= */

.SuifeelExplanationArea{
	margin: 0 auto 8%;
}

.SuifeelExplanation_table_ul{
	display: block;
	width: 100%;
	margin: 6% auto;
	border-radius: 10px;
}

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

.Suifeel-table-right{
	padding: 12px 0 0;
	text-align: left;
}

.ExplanationDetail{
	padding: 0;
}

.ExplanationDetail p{
	font-size: 15px;
	line-height: 2.15;
}

.ExplanationDetail strong{
	font-size: 14.2px;
	line-height: 2.15;
}

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

.AboutGrid2,
.AboutGrid3{
	grid-template-columns: 1fr;
	gap: 14px;
}

.AboutCard{
	padding: 18px;
	border-radius: 18px;
}

.AboutCard_t{
	font-size: 15px;
	line-height: 1.5;
}

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

/* =========================
   KPI / Steps -> 1 column
========================= */

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

.AboutKpi_item{
	padding: 18px;
	border-radius: 18px;
}

.AboutKpi_label{
	font-size: 13px;
	letter-spacing: .14em;
}

.AboutKpi_value{
	font-size: 18px;
}

.AboutKpi_note{
	font-size: 12.8px;
}

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

.AboutStep{
	padding: 18px;
	border-radius: 18px;
}

.AboutStep_n{
	font-size: 30px;
}

.AboutStep_t{
	font-size: 18px;
}

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

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

.AboutSubNote{
	margin: 6% auto auto;
	padding: 14px 14px;
	border-radius: 16px;
}

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

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

.AboutMediaHero{
	margin: 10px auto;
}

.p-movie__youtube{
	width: 100%;
	border-radius: 18px;
	box-sizing: border-box;
}

/* =========================
   CTA (stack)
========================= */

.AboutCta{
	margin: 32px auto;
}

.AboutCtaBtn{
	width: 92%;
	font-size: 15px;
	padding: 14px 16px;
	border-radius: 24px;
	margin: 0 auto 10px;
}

.AboutCtaBtn.ghost{

}

/* =========================
   Evidence section
========================= */

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

#about_evidence .AboutCta{
	display: block;
}

.EvidenceLeft20,
.EvidenceLeft40{
	width: auto;
}

@media (max-width: 600px) {
.br-sp {
    display: block;
  }
}