html {
  scroll-behavior: smooth;
}

/*メインビジュアル*/

.service-fv{
	width: 100%;
    height: 420px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
	background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/12/CP_firstview_pc.png");
    background-position: center;
	display:flex;
	justify-content:center;
	align-items:center;
	background-position: bottom;
}

.service-fv h1{
	color:#E3D82A;
	font-size:80px;
	font-weight:900;
	text-align:center;
	line-height:4.5rem;
}

.service-sub-title{
	font-size:32px;
	color:#fff;
	display:block;
}

.service-top-bar{
	width: 100%;
	display:block;
    text-align: center;
    font-size: 23px;
    font-weight: 900;
    padding: 0.5em 0;
    background: linear-gradient(96deg, rgba(38, 135, 142, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(236, 227, 116, 1) 100%);
    color: #ffffff;
}

.service-cost-wrapper{
	display:flex;
	max-width:1000px;
	margin:0 auto;
	justify-content:space-between;
}

.service-cost-block{
	border:solid 2px #C2C2C2;
	width:30%;
}

.service-cost-block h3{
	background-color:#00a6b5;
	color:#fff;
	text-align:center;
	font-weight:900;
	font-size:20px;
	padding:0.5rem 0;
}

.cost-column{
	line-height:1.1rem;
	font-weight:900;
}

.service-amount{
	font-family: "Oswald", sans-serif;
	font-weight:900;
	font-style:normal;
	color:#D74646;
	font-size:40px;
}

.cost-column span{
	display:block;
	color:#D74646;
	font-size:18px;
}

.service-price{
	display:flex;
	align-items:center;
	width:90%;
	margin:0 auto;
	justify-content:space-around;
	margin-bottom:2rem;
	position:relative;
}

.service-amount{
	display:flex;
	align-items:center;
}

.excluding-tax{
	font-size:16px;
	margin-left:0.5rem;
}

.service-cost-content{
	padding:1rem;
}

.service-cost-content p{
	margin-bottom:3rem;
}

.plus-product{
	position:absolute;
	right:0;
	bottom:-1rem;
	color:#D74646;
	font-weight:900;
}

@media (max-width: 768px) {
	.service-cost-wrapper{
		flex-direction:column;
	}
	.service-cost-block{
		width:95%;
		margin:1rem auto;
	}
	
	.service-cost-block img{
		width:300px;
		margin:0 auto;
		display:block;
	}
	
	.service-price{
		width:65%;
	}
	
	.service-top-bar{
		font-size:14px;
	}
	
	.service-fv h1{
		font-size:40px;
	}
	
	.service-sub-title{
		font-size:20px;
		line-height:2rem;
	}
	
	.service-fv{
		background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/12/CP_firstview_sp-1.webp");
		height:300px;
	}
	
}



/*工事の流れ*/

.construction-flow{
	width:80%;
	max-width:1000px;
	margin:0 auto;
	padding:1rem 0;
}

.construction-flow h2,
.install-flow h2,
.payment h2{
	font-size:32px;
	font-weight:900;
	margin:2rem 0;
	border-bottom:2px solid #00a6b5;
}



.p-before-steps{
	margin-bottom:2rem;
}
.construction-flow li{
	margin-bottom:3rem;
	position:relative;
	border:2px solid #d3d3d3;
	border-radius:8px;
	padding:50px 30px;
	position: relative;
}

.construction-flow li::after {
  content: "";
  position: absolute;
  top: 100%; 
  left: 50%;
  transform: translateX(-50%); 
  border: 30px solid transparent; 
  border-top-color: #00a6b5; 
}

.construction-flow li:last-child::after {
  content: none;
}

.step-content img{
	width:90px;
	order:1;
}

.construction-flow h3{
	font-weight:900;
	font-size:20px;
	margin:0.5rem 0;
}

.step-content{
	display:flex;
	align-items:center;
	justify-content:space-around;
}

.step-right{
	width:60%;
	order:2;
}

.step-content span{
	display:block;
	text-align:center;
	width:fit-content;
	font-size:32px;
	font-weight:900;
	height:100%;
	border-right:2px solid #d3d3d3;
	padding-right:50px;
	padding-top:4rem;
	padding-bottom:4rem;
	order:0;
}

.step-content span::before{
	content:"STEP";
	display:block;
	width:fit-content;
	height:1rem;
	font-size:18px;
	margin-bottom:0.5rem;
}

.link-to-install-step{
	width:50%;
	font-weight:900;
	background-color:#D74646;
	color:#ffffff;
	padding:1rem 2rem;
	display:block;
	text-align:center;
	margin-top:1rem;
	border-radius:10px;
	
}

@media (max-width: 768px) {
	.link-to-install-step{
		width:95%;
		display:block;
		margin: 1rem auto;
	}
}



/*お支払い方法*/

.payment{
	width:80%;
	max-width:1000px;
	margin:2rem auto;
}

.payment-box{
	width:100%;
	border:2px solid #00a6b5;
	padding:4rem 2rem 2rem 2rem;
	position:relative;
	margin-bottom:2rem;
}

.payment-label{
	position:absolute;
	top:0;
	left:0;
	margin:auto;
	padding:0.5rem 0;
	display:block;
	width:200px;
	text-align:center;
	color:#fff;
	background-color:#00a6b5;
	font-weight:900;
}

.payment-box ul{
	display: grid;
  grid-template-columns: repeat(4, 1fr);
	gap:10px;
}

.payment-box ul > :nth-child(5) {
	grid-column: 1 / -1;
}

.payment-box li{
	text-align:center;
}	

.payment-box img{
	width:150px;
}

.payment-box a{
	display:block;
	width:fit-content;
	margin:1rem auto;
	font-size:18px;
}

.credit-card-link{
	margin-bottom:1rem!important;
}

.credit-card-box span{
	display:block;
	margin-bottom:1rem;
}

.card-brand-image{
	width:500px!important;
}

.card-brand-box{
	border:2px solid #00a6b5;
	padding:2rem;
	text-align:center;
	position:relative;
	margin-top:2rem;
}

.card-brand-box span{
	position:absolute;
	top:-1rem;
	right:0;
	left:0;
	margin: auto;
	display:block;
	background-color:#fff;
	width:fit-content;
	padding:0 2rem;
	color:#00a6b5;
}

.payment h3{
	border-left:4px solid #00a6b5;
	padding-left:1rem;
	margin-bottom:1rem;
	font-weight:900;
	font-size:20px;
}

.payment p{
	margin-bottom:2rem;
}

@media (max-width: 768px) {
	
	.payment-box{
		padding: 4rem 1rem 1rem 1rem;
	}
	
	.payment-box ul{
	grid-template-columns: repeat(2, 1fr);
}
	.payment-box a{
		font-size:13px;
		margin:0.5rem auto;
	}
	
	.payment-box img{
		width:100px;
	}

}



/*施工手順*/

.install-flow{
	width:80%;
	max-width:1000px;
	margin:0 auto;
}

.install-flow-block{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	width:100%;
	margin-bottom:5rem;
}

.install-flow-block img{
	width:200px;
}

.install-flow-blocks{
	margin-top:2rem;
}

.flow-image{
	width:40%;
	text-align:center;
}

.install-text{
	width:50%;
}

.install-text h3{
	font-size:20px;
	color:#00a6b5;
	font-weight:900;
	margin-bottom:1rem;
	position:relative;
	border-bottom:2px dashed #E3D82A;
}
.install-text h3::before{
	display:inline-block;
	width:fit-content;
	height:fit-content;
	font-size:22px;
	font-weight:900;
	color:#E3D82A;
	margin-right:0.5rem;
}

.install-1::before{
	content:"1";
}

.install-2::before{
	content:"2";
}

.install-3::before{
	content:"3";
}

.install-4::before{
	content:"4";
}

.install-5::before{
	content:"5";
}

.install-6::before{
	content:"6";
}

.install-7::before{
	content:"7";
}

.install-8::before{
	content:"8";
}

.install-9::before{
	content:"9";
}

.install-10::before{
	content:"10";
}

.install-11::before{
	content:"11";
}

.install-12::before{
	content:"12";
}

.install-13::before{
	content:"13";
}

.install-14::before{
	content:"14";
}

.install-text p{
	line-height:2rem;
}


@media (max-width: 768px) {
	.step-content{
		flex-direction:column;
		width:fit-content;
	}
	
	.step-content span{
		border-right:none;
		border-bottom:2px solid #d3d3d3;
		padding:0;
		height:fit-content;
		width:100%;
		text-align:center;
		margin-bottom:1rem;
	}
	
	.step-content img{
		margin-bottom:1rem;
	}
	
	.step-title{
		text-align:center;
		margin:0!important;
		margin-bottom:1rem!important;
	}
	
	.construction-flow li{
		padding:1rem;
	}
	
	.step-right{
		width:100%;
	}
	.step-right p{
		font-size:15px;	
	}
	.step-content span::before{
		margin:0 auto;
		height:auto;
	}
	
	.install-flow-block{
		flex-direction:column;
		width:95%;
		margin:1rem auto;
	}
	.install-text{
		width:100%;
	}
	.flow-image{
		width:70%;
		margin: 1rem auto;
	}
	
	
}