/***************************************
	PC版トップページ用CSS
	
	
***************************************/


/* サービスページのコンテンツ部分 */




	/* トップ画像 */
	
.service-overview-section{
	
}
	
.service-overview-section .service-overview-top-image-section{
	display:flex;
	flex-direction:row-reverse;
	justify-content:center;
	background-image: repeating-linear-gradient(135deg, transparent, transparent 40px, var(--color-blue-gray) 40px, var(--color-blue-gray) 80px);
}

.service-overview-section .service-overview-top-image-section .service-overview-top-image{
	width:100%;
	max-width:800px;
}

.service-overview-section .service-overview-top-image-section .service-overview-caption{
	width:100%;
	max-width:800px;
	background:rgba(255,255,255,0.9);
	display:flex;
	flex-direction:column;
	justify-content:center;
}


.service-overview-section .service-overview-top-image-section .service-overview-caption .service-overview-area-label{
	background:var(--color-main);
	color:#ffffff;
	display:flex;
	width:fit-content;
	padding:8px 16px;
	border-radius:300px;
	margin-bottom:10px;
	font-size:min(2vw , 20px);
	margin:0 max(10% , 40px);
}

.service-overview-section .service-overview-top-image-section .service-overview-caption .service-overview-catch{
	margin:20px max(10% , 40px);
}

.service-overview-section .service-overview-top-image-section .service-overview-caption .service-overview-catch p{
	font-size:min(2.2vw , 38px);
}

.service-overview-section .service-overview-top-image-section .service-overview-caption .service-overview-catch p .service-overview-catch-emphasis{
	color:var(--color-text-emphasis-red);
		font-size:min(4.4vw , 76px);
}



	/* サービス内容 */
	
.service-content-section{
	padding-bottom:40px;
}
	
.service-content-section ul.service-content-list{
	margin:40px auto 0;
	max-width:var(--container-width-narrow);
	padding:20px;
}

.service-content-section ul.service-content-list li{
	background:url('../img/icon/check-pale-orange.png') no-repeat;
	background-position:0 center;
	background-size:24px;
	font-size:20px;
	padding:0 0 0 38px;
	margin-bottom:20px;
}


.service-content-section dl.service-cost-example-data-list{
	max-width:var(--container-width-narrow);
	margin:20px auto;
	border-top:1px solid #bbbbbb;
}

.service-content-section dl.service-cost-example-data-list > div{
	display:flex;
	border-bottom:1px solid #bbbbbb;
}

.service-content-section dl.service-cost-example-data-list > div > dt{
	min-width:200px;
	max-width:200px;
	width:200px;
	border-left:1px solid #bbbbbb;
	border-right:1px solid #bbbbbb;
	padding:10px 20px;
	font-size:18px;
}

.service-content-section dl.service-cost-example-data-list > div > dd{
	flex-grow:1;
	border-right:1px solid #bbbbbb;
	padding:10px 20px;
	font-size:18px;
}




	/* 解決に向けたステップ */
	
.service-step-section{
	margin:60px auto;
	padding:0 40px;
	max-width:var(--container-width-middle);
}

.service-step-section h2.service-step-headline{
	color:var(--color-main);
	font-weight:normal;
	font-size:var(--font-size-h2);
	margin-bottom:40px;
}


.service-step-section ol.service-step-list{
	margin:0 auto;
	display:flex;
	flex-direction:column;
	width:fit-content;
}

.service-step-section ol.service-step-list > li{
	margin-bottom:20px;
	font-size:min(1.8vw , 26px);
	padding-bottom:60px;
	background:url('../img/icon/arrow-orange-down-wide.png') no-repeat;
	background-position:center 100%;
	background-size:auto 40px;
}

.service-step-section ol.service-step-list > li:nth-of-type(3){
	background:none;
}


.service-step-section ul.service-step-note-list{
	max-width:var(--container-width-narrow);
	display:flex;
	flex-direction:column;
	margin:0 auto 40px;
	width:fit-content;
}


.service-step-section ul.service-step-note-list > li{
	background:url('../img/icon/check-pale-orange.png') no-repeat;
	background-position:0 center;
	background-size:min(1.8vw , 26px);
	padding-left:min(2.8vw , 40px);
	font-size:min(1.6vw , 20px);
	margin-bottom:14px;
}



	/* 他のサービス一覧 */
	
.service-other-service-section ul.service-other-service-list{
	max-width:var(--container-width-middle);
	display:flex;
	flex-wrap:wrap;
	margin:0 auto;
	justify-content:center;
	padding:0 20px;
}

.service-other-service-section ul.service-other-service-list li{
	width:20%;
	margin:0 2.5% 40PX;
	text-align:center;
	font-size:18px;
}

.service-other-service-section ul.service-other-service-list li img{
	border-radius:1000px;
	margin-bottom:16px;
}


.service-other-service-section ul.service-other-service-list li a:hover img{
	opacity:0.7;
	transition:.3s;
}





	/* クロージング */
	
.service-closing-section{
	max-width:var(--container-width-middle);
	margin:40px auto 80px;
}

.service-closing-section .service-closing-catch{
	color:var(--color-main);
	max-width:var(--container-width-middle);
	text-align:center;
	margin:0 0 40px;
	font-size:var(--font-size-h3);
}

.service-closing-section ul.service-closing-reaction-list{
	display:flex;
	margin:0 20px;
}

.service-closing-section ul.service-closing-reaction-list li{
	width:100%;
	margin:0 20px;

}

.service-closing-section ul.service-closing-reaction-list li .service-closing-reaction-tel-number{
	border:3px solid #bbbbbb;
	text-align:center;
	font-size:min(2.8vw , 40px);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px 10px;
	border-radius:4px;
}

.service-closing-section ul.service-closing-reaction-list li .service-closing-reaction-tel-number img{
	height:min(2.8vw , 40px);
	margin-right:12px;
}

.service-closing-section ul.service-closing-reaction-list li a.service-closing-reaction-mail:link,
.service-closing-section ul.service-closing-reaction-list li a.service-closing-reaction-mail:visited{
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--color-link-button);
	color:#ffffff;
	font-size:min(2.8vw , 40px);
	padding:16px 10px;
	box-shadow:2px 2px 4px gray;
	border:3px solid var(--color-link-button);
	border-radius:4px;
}

.service-closing-section ul.service-closing-reaction-list li a.service-closing-reaction-mail:hover,
.service-closing-section ul.service-closing-reaction-list li a.service-closing-reaction-mail:active{
	background:var(--color-link-button-hover);
	color:#ffffff;
	border:3px solid var(--color-link-button-hover);
	text-decoration:none;
}

.service-closing-section ul.service-closing-reaction-list li .service-closing-reaction-mail img{
	height:min(2.8vw , 40px);
	margin-right:12px;
}

.service-closing-section ul.service-closing-reaction-list li .service-closing-reaction-infomation-note{
	color:#666666;
	font-size:14px;
	text-align:center;
	margin:10px auto 20px;
}