@charset "utf-8";
/* 文字化け防止 */
/* CSS Document */

/* =========================
   Suifeel About Us (PC) - Luxury
   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;
}

/* ベース */

.AboutTitleBack{
	height: 450px;
	background:url(../commonImages/h1_img_About.png) center/cover no-repeat;
	margin:0 auto;
	width:100%;
	box-sizing: border-box;
	position: relative;
	margin: 0 auto 200px;
}

.AboutArea{
	padding: 0 5%;
	width: 100%;
	margin: auto;
	box-sizing: border-box;
}

/* Hero */
.AboutDetail{
	width: 90%;
	margin:auto;
	padding:0;
	box-sizing: border-box;
}

.AboutDetail_inner{
	width:90%;
	margin:0 auto;
	padding:5% 0;
	box-sizing: border-box;
}


.AboutDetail_TitleArea{
	width:100%;
}

.AboutDetail_TitleArea_lead{
	font-size: 22px;
	color: #7fcbea;
	font-weight: 600;
	text-align: center;
}

.AboutDetail_TitleArea_head{
	margin: 2% auto 0;
	font-size: 37px;
	color: #2F4565;
	font-weight: bold;
	text-align: center;
}

.AboutDetail_Text{
	margin:auto;
	padding: 5% 0;
}

.AboutDetail_Text p{
	font-size: 16px;
	line-height: 2.5;
}

.AboutBadge{
	display:inline-block;
	padding:10px 14px;
	border-radius:999px;
	font-size:12.5px;
	font-weight:900;
	letter-spacing:.04em;
	color:rgba(11,43,99,.95);
	background:rgba(11,43,99,.07);
	border:1px solid rgba(11,43,99,.18);
}

/* Hero Nav */
.AboutDetail_nav {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 30px 0;
}

.AboutDetail_nav_ul {
	font-size: 0;
	margin: 2% auto;
	text-align: center;
}

.AboutDetail_nav_li {
	display: inline-block;
	width: 24%;
	text-align: center;
	box-sizing: border-box;
	padding: 0 0 2%;
}

.AboutDetail_nav_li a {
	display: inline-block;
	width: 99%;
	font-size: 14px;
	font-weight: normal;
	padding-bottom: 5px;
	padding-top: 5px;
	text-align: center;
	color: rgba(0,0,0,0.5);
	border-radius: 5px;
	font-feature-settings: "palt";
	transition: 0.2s;
	border: 1px solid rgba(0,0,0,0.5);
}

.AboutDetail_nav_li a:hover {
	border: 1px solid rgba(0,0,0,0.5);
	background: #2F4565;
	color: #fff;
	opacity: 1;
}

.AboutDetail_nav_li a {
	display: inline-block;
	width: 90%;
	font-size: 14px;
	text-align: center;
	border-radius: 8px;
	transition: 0.2s;
}

/* コンテンツ幅 */
.AboutWrap{
	margin: 15px auto;
	width: 100%;
	box-sizing: border-box;
}

/* Section */
.AboutSection{
	padding: 2% 0;
	position: relative;
	margin: 5% auto auto;
}

.AboutSection.last{
	border-bottom:none;
	padding-bottom:26px;
}

.AboutSection_head{
	margin: 0 auto;
}

.AboutEyebrow{
	font-size: 20px;
	letter-spacing: .18em;
	color: #7fcbea;
	text-transform: uppercase;
	font-weight: bold;
}

.AboutH2{
	margin: 12px auto 0;
	font-size: 30px;
	color: #2F4565;
	font-weight:bold;
}

.AboutText{
	margin: 5% auto;
	font-size: 16px;
	line-height: 2.1;
	color: var(--muted);
}

.SuifeelExplanationArea {
	width: 100%;
	margin: 0 auto 5%;
}

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

.SuifeelExplanation_table_ul2 {
	display: table;
	width: 100%;
	margin:5% auto 0;
}

.Suifeel-table-left {
	display: table-cell;
	width: 50%;
}

.Suifeel-table-left img {
	width: 100%;
	border-radius: 10px;
}

.Suifeel-table-right {
	display: table-cell;
	width: 50%;
	vertical-align: top;
	text-align: right;
	padding: 0 2%;
	box-sizing: border-box;
}

.Suifeel-table-right img {
	width: 100%;
	border-radius: 10px;
}

.ExplanationDetail{
	width: 100%;
	margin: 0 auto;
	padding: 0 0;
	box-sizing: border-box;
}

.ExplanationDetail strong{
	font-size: 16px;
	font-weight:bold;
	line-height: 2.5;
	color: #2F4565;
}

.ExplanationDetail p{
	font-size: 14.5px;
	text-align: left;
	line-height: 2.5;
}

.ImageDescriptionArea{
	width: 100%;
	margin: 0 auto;
	padding: 2%;
	box-sizing: border-box;
}

.ImageDescriptionArea p{
	font-size: 12px;
	text-align: left;
	line-height: 2.2;
}

/* Cards */
.AboutGrid2{
	margin-top:22px;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
}

.AboutGrid3{
	margin-top:22px;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:18px;
}

.AboutCard{
	padding:22px 22px;
	border-radius:var(--radius-lg);
	background:var(--card);
	border:1px solid var(--line2);
//	box-shadow:var(--shadow2);
	position:relative;
	overflow:hidden;
}

.AboutCard:after{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(500px 220px at 10% 0%, rgba(11,43,99,.06), transparent 60%);
	pointer-events:none;
}

.AboutCard_t{
	font-size:16px;
	font-weight:900;
	letter-spacing:.04em;
	line-height:1.55;
	color: #2F4565;
}

.AboutCard_b{
	margin:2% auto;
}

.AboutCard_b p{
	font-size:13.5px;
	line-height:2.0;
	color:rgba(12,19,32,.78);
}

/* KPI */
.AboutKpi{
	margin-top:22px;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:18px;
}

.AboutKpi_item{
	padding:22px;
	border-radius:var(--radius-lg);
	background:
		linear-gradient(180deg, rgba(11,43,99,.08), rgba(255,255,255,.72));
	border:1px solid rgba(11,43,99,.14);
//	box-shadow:0 14px 34px rgba(12,19,32,.08);
}

.AboutKpi_label{
	font-size: 15px;
	letter-spacing: .18em;
	color: rgba(11,43,99,.82);
	text-transform: uppercase;
}

.AboutKpi_value{
	margin-top:12px;
	font-size:20px;
	font-weight:900;
	letter-spacing:.02em;
}

.AboutKpi_note{
	margin-top:6px;
	font-size:13px;
	line-height:1.9;
	color:rgba(12,19,32,.70);
}

/* Sub note */
.AboutSubNote{
	margin: 5% auto auto;
	padding: 16px 18px;
	border-radius: var(--radius-md);
	background: rgba(12,19,32,.03);
	border: 1px solid var(--line2);
	text-align: left;
}

.AboutSubNote p{
	font-size:13px;
	line-height:1.9;
	color:rgba(12,19,32,.74);
}

/* Steps */
.AboutSteps{
	margin-top:22px;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:18px;
}

.AboutStep{
	padding:22px;
	border-radius:var(--radius-lg);
	background:var(--card);
	border:1px solid var(--line2);
//	box-shadow:var(--shadow2);
	position:relative;
	overflow:hidden;
}

.AboutStep:after{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(520px 240px at 15% 0%, rgba(11,43,99,.06), transparent 62%);
	pointer-events:none;
}

.AboutStep_n{
	font-size:36px;
	font-weight:900;
	letter-spacing:.06em;
	color:rgba(11,43,99,.18);
	line-height:1;
}

.AboutStep_t{
	margin-top: 10px;
	font-size: 25px;
	font-weight: 900;
	color: #2F4565;
}

.AboutStep_b{
	margin-top:12px;
	font-size:14.5px;
	line-height:2.0;
	color:rgba(12,19,32,.78);
}

/* CTA */
.AboutCta{
//	display: flex;
//	gap: 12px;
//	flex-wrap: wrap;
	text-align: center;
	margin: 50px auto;
}

.AboutCtaBtn{
	display: inline-block;
	padding: 14px 20px;
	border-radius: 25px;
	text-decoration: none;
	font-weight: 900;
	letter-spacing: .05em;
	border: 1px solid rgba(11,43,99,.20);
	background: linear-gradient(180deg, #0b2b63, #081f45);
	color: #fff;
	box-shadow: 0 18px 36px rgba(12,19,32,.16);
	transition: .25s;
	width:70%;
	font-size: 16px;
	margin: 10px;
}

.AboutCtaBtn:hover{
	transform:translateY(-1px);
	opacity:.96;
}

.AboutCtaBtn.ghost{
	background:rgba(255,255,255,.92);
	color:rgba(11,43,99,.94);
	border:1px solid rgba(11,43,99,.22);
	box-shadow:0 14px 28px rgba(12,19,32,.10);
}

.AboutMediaHero{
	margin: 15px auto;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.AboutMediaHero img{
	width:100%;
}

.AboutMediaPlaceholder{
	min-height:240px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:22px;
	text-align:center;
}

.AboutMediaPlaceholder_t{
	font-size:14px;
	font-weight:900;
	letter-spacing:.06em;
	color:rgba(12,19,32,.88);
}

.AboutMediaPlaceholder_s{
	margin-top:8px;
	font-size:12px;
	line-height:1.85;
	color:rgba(12,19,32,.62);
	max-width:760px;
}

/* 動画 */
.AboutVideo{
	margin-top:18px;
	border-radius:var(--radius-lg);
	overflow:hidden;
	border:1px solid rgba(12,19,32,.14);
	box-shadow:0 18px 44px rgba(12,19,32,.14);
	background:#000;
}

.sec_video .p-movie__youtube {
	width:100%;
	margin: auto;
}
.p-movie__youtube {
	width: 80%;
	margin: auto;
	padding: 1%;
	background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
	text-align: center;
	border-radius: 25px;
}
/* =========================
   Evidence (certificate) section
   ========================= */
#about_evidence .AboutText p {
	margin: 0 0 14px;
	line-height: 1.9;
}

#about_evidence .AboutGrid3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin-top: 18px;
}

/* Card polish */
#about_evidence .AboutCard {
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* Keep existing typography but tighten */
#about_evidence .AboutCard_t {
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Certificate image block */
#about_evidence .AboutCard_b img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	margin-top: 12px;
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

/* CTA area alignment */
#about_evidence .AboutCta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

/* Ghost buttons consistency */
#about_evidence .AboutCtaBtn.ghost {
	border: 1px solid rgba(0,0,0,0.18);
	background: transparent;
}

/* Small note */
#about_evidence .AboutSubNote p {
	margin: 0;
	line-height: 1.8;
	opacity: 0.88;
}
/* Evidence image width control */
.EvidenceLeft35 { width: 35%; }

/* Tablet/Sp: force natural stacking */
@media (max-width: 1080px) {
	.EvidenceLeft35 { width: auto; }
}

.br-sp {
    display: none;
}

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

/* Anchor offset for fixed header */
.AboutSection{
	scroll-margin-top: 120px;
}

img{
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none; /* iOS長押しメニュー抑止 */
	pointer-events: none; /* クリックや右クリック自体を無効化（必要なら外す） */
}

body {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-touch-callout: none; /* iOS長押し抑止 */
}