@charset "UTF-8";
/*****************************************************
　実績詳細ページ専用スタイル
　common.css の変数・命名規則を踏襲
*****************************************************/

.eyebrow-left{justify-content:flex-start;}

/* ===== Tag / Date ===== */
.case-tagbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	max-width:1250px;
	margin:110px auto 0;
	padding:0 60px;
}
.case-tag span{
	background:var(--accent-lightblue);
	color:#fff;
	font-size:13px;font-size:1.3rem;
	font-weight:600;
	padding:7px 18px;
	border-radius:var(--radius-full);
}
.case-date{
	font-size:14px;font-size:1.4rem;
	color:var(--text-basic);
}

/* ===== Hero（タイトル＋写真） ===== */
.case-hero{
	display:flex;
	align-items:flex-start;
	gap:60px;
	max-width:1250px;
	width:100%;
	margin:24px auto 0;
	padding:0 60px;
}
.case-hero-main{flex:1;min-width:0;}
.case-hero h1{
	font-size:34px;font-size:3.4rem;
	font-weight:700;
	line-height:1.4;
	margin:0;
}
.case-hero .desc{
	line-height:1.9;
	margin:0 0 28px;
}
.case-hero-photo{
	width:44%;
	max-width:560px;
	flex-shrink:0;
	border-radius:var(--radius-lg);
	overflow:hidden;
}
.case-hero-photo img{
	width:100%;
	height:320px;
	object-fit:cover;
	display:block;
}

.case-hero-body{
	max-width:1250px;
	margin:28px auto 0;
	padding:0 60px;
	max-width:calc(1250px);
}
.case-company{
	font-size:22px;font-size:2.2rem;
	font-weight:700;
	margin:0;
}

/* ===== Meta table ===== */
.case-meta-table{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:20px 0;
	max-width:1250px;
	margin:50px auto 0;
	padding:28px 60px 0;
}
.case-meta-item{
	margin-right:12px;
	padding:10px 0;
}
.case-meta-item + .case-meta-item{
	border-left:1px solid #fff;
	padding-left:24px;
}
.case-meta-item dt{
	font-weight:600;
	color:var(--accent-lightblue);
	margin:0 0 10px;
}
.case-meta-item dd{
	font-size:14px;font-size:1.4rem;
	font-weight:600;
	color:var(--text-basic);
	line-height:1.6;
	margin:0;
}

/* ===== Before / After ===== */
.case-before-after{
	display:flex;
	align-items:flex-start;
	gap:40px;
	max-width:1250px;
	margin:90px auto 0;
	padding:0 60px;
}
.ba-col{flex:1;min-width:0;}
.ba-label{
	display:flex;
	align-items:baseline;
	gap:12px;
	margin:0 0 22px;
}
.ba-word{
	font-size:24px;font-size:2.4rem;
	font-weight:700;
	color:var(--accent-lightblue);
}
.ba-note{
	font-weight:600;
	color:var(--accent-lightblue);
}
.ba-list{margin:0;padding:0;}
.ba-list li{
	list-style:none;
	font-size:14px;font-size:1.4rem;
	color:var(--text-basic);
	padding-left:16px;
	position:relative;
	margin-bottom:12px;
}
.ba-list li:last-child{margin-bottom:0;}
.ba-list li::before{
	content:"・";
	position:absolute;left:-2px;top:0;
	color:var(--text-muted);
}
.ba-arrow{
	flex-shrink:0;
	width:28px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--text-secondary);
	margin-top:52px;
}
.ba-col p{
	line-height:2.1;
}

.case-stat-box{
	display:inline-flex;
	margin-top:28px;
	background:var(--accent-lightblue);
	border-radius:var(--radius-lg);
	overflow:hidden;
}
.case-stat-box .stat-cell{
	padding:20px 34px;
	text-align:center;
}
.case-stat-box .stat-cell:first-child{
	border-right:1px solid rgba(255,255,255,.4);
}
.case-stat-box .stat-label{
	font-size:12px;font-size:1.2rem;
	color:#fff;
	opacity:.9;
	margin:0 0 6px;
}
.case-stat-box .stat-value{
	font-size:22px;font-size:2.2rem;
	font-weight:700;
	color:#fff;
	margin:0;
}

/* ===== Step 01 / 02 / 03 ===== */
.case-step{
	max-width:1250px;
	margin:35px 60px 0;
	padding:50px 25px;
	border:6px solid var(--step-color, var(--border));
	border-radius:var(--radius-lg);
	position:relative;
}
.case-step.step-01{--step-color:#5ab8d9;}
.case-step.step-02{--step-color:#95bc9f;}
.case-step.step-03{--step-color:#eac34e;}
.case-step:after{
	content:'';
	display:block;
	width: 6px;
	height: 35px;
	position:absolute;
	bottom:-41px;
	left:70px;
	z-index:0;
}
.case-step.step-01:after{
	background: linear-gradient(to bottom, #5ab8d9, #95bc9f);
}
.case-step.step-02:after{
	background: linear-gradient(to bottom, #95bc9f, #eac34e);
}
.case-step h2{
	font-size:24px;font-size:2.4rem;
	font-weight:700;
	margin:0 0 30px;
}
.case-step-body{
	display:flex;
	gap:40px;
	align-items:flex-start;
}
.case-step.step-03 .case-step-body{
	flex-direction:row-reverse;
}
.case-step-photo{
	width:240px;
	flex-shrink:0;
	border-radius:var(--radius-lg);
	overflow:hidden;
}
.case-step-text h3{
	font-size:17px;font-size:1.7rem;
	font-weight:700;
	line-height:1.6;
	margin:0 0 10px;
}
.case-step-text p{
	color:var(--text-basic);
	line-height:1.85;
	margin:0;
}

/* ===== Related works ===== */
.case-related{
	max-width:1250px;
	width:100%;
	margin:110px auto 0;
	padding:0 60px;
}
.case-related-head{margin:0 0 40px;}
.case-related-head h3{
	font-size:26px;font-size:2.6rem;
	font-weight:700;
	margin:0;
}
.case-related .works-grid{
	display:flex;
	margin-left:0;margin-right:0;max-width:none;
}
.case-related .work-card{
	max-width:360px;
	width:34%;
}
.case-related .works-more{max-width:none;}

/* ===== サービス / コラム ナビカード ===== */
.case-nav-grid{
	display:flex;
	grid-template-columns:1fr 1fr;
	gap:2%;
	max-width:1000px;
	width:100%;
	margin:60px auto;
	padding:0 70px;
}
.case-nav-card{
	max-width:490px;
	width:49%;
}
.case-nav-card img{
	border-radius:var(--radius-lg);
	overflow:hidden;
}

/* ===================================================
	 Responsive: <=1024px -> 縦積み
=================================================== */
@media (max-width:1024px){
	.case-tagbar{padding:0 26px;margin-top:60px;}

	.case-hero{flex-direction:column-reverse;padding:0 26px;gap:24px;}
	.case-hero-photo{width:100%;max-width:none;}
	.case-hero-photo img{height:auto;aspect-ratio:16/10;}
	.case-hero h1{font-size:clamp(24px,6vw,30px);}
	.case-hero .desc{max-width:none;}

	.case-hero-body{padding:0 26px;}

	.case-meta-table{
		grid-template-columns:1fr 1fr;
		padding:24px 26px 0;
		gap:20px;
	}

	.case-before-after{flex-direction:column;padding:0 26px;gap:0;}
	.ba-arrow{
		transform:rotate(90deg);
		margin:20px 0;
	}
	.case-stat-box{width:100%;}
	.case-stat-box .stat-cell{flex:1;padding:18px 12px;}

	.case-step{margin:50px 20px 0;padding:30px 24px;width:auto;}
	.case-step-body{flex-direction:column;}
	.case-step.step-03 .case-step-body{flex-direction:column;}
	.case-step-photo{width:100%;}
	.case-step-photo img{height:auto;aspect-ratio:4/3;}

	.case-related{padding:0 26px;margin-top:80px;}
	.case-related-head h3{font-size:20px;}

	.case-nav-grid{flex-direction:column;gap:20px;padding:0 26px;}
	.case-nav-card{max-width:none;width:100%;}
	.case-nav-card img{margin:0 auto;}
}

@media (max-width:520px){
	.case-tagbar{padding:0 20px;}
	.case-hero{padding:0 20px;}
	.case-hero-body{padding:0 20px;}
	.case-meta-table{grid-template-columns:1fr 1fr;padding:24px 20px 0;}
	.case-before-after{padding:0 20px;}
	.case-step{margin-left:14px;margin-right:14px;padding:24px 18px;}
	.case-related{padding:0 20px;}
	.case-nav-grid{padding:0 20px;}s
}