@charset "utf-8";

/*==================================================
  対応工事のご紹介（service）
  ※ eyecatch / pan / WHY(inc01) / CONTACT(inc02) は共通（admin.css）
  ※ セクション名は img フォルダ名に対応：
     contents01 = 見出し＋工事項目（img/service/contents01/）
     contents02 = 対応エリア（img/service/contents02/）
==================================================*/

/* ヒーロー背景（共通eyecatchの .eye_img にページ画像を指定） */
.eyecatch_inc .eye_img{
	background-image: url(../img/service/eye01.jpg);
}
@media only screen and (max-width: 767px){
	.eyecatch_inc .eye_img{
		background-image: url(../img/service/eye01_sp.jpg);
	}
}

/*==================================================
  contents01（見出し＋工事項目）
==================================================*/
.contents01{
	width: 100%;
}

/* 見出し部 */
.contents01_head{
	width: 100%;
	padding: 10.6rem 0 0;
}
.contents01_head_inner{
	width: 120rem;
	margin: 0 auto;
}
.contents01_head_ttl{
	font-size: 3.3rem;
	line-height: 3.4rem;
	letter-spacing: calc((40/1000)*1em);
	color: #2b2b2b;
}
.contents01_head_lead{
	margin-top: 4.2rem;
	font-size: 1.5rem;
	line-height: 3.4rem;
	letter-spacing: calc((20/1000)*1em);
	color: #2b2b2b;
}
.contents01_nav{
	margin-top: 3.2rem;
	display: flex;
	gap: 1.3rem;
}
.contents01_nav > li > a{
	height: 3.9rem;
	padding: 0 2.7rem;
	display: flex;
	align-items: center;
	background: #ffffff;
	border: 1px solid #d5dbd7;
	border-radius: 2rem;
	font-size: 1.5rem;
	letter-spacing: calc((20/1000)*1em);
	color: #235a32;
	position: relative;
	transition: all .3s;
}
/* ページ内リンク用・下向き「＞」キャレット（XD：緑#235a32・1px）。テキスト右にインライン配置 */
.contents01_nav > li > a::after{
	content: '';
	width: 0.8rem;
	height: 0.8rem;
	margin: 0 0 0 1.2rem;
	border-right: 1px solid #235a32;
	border-bottom: 1px solid #235a32;
	transform: rotate(45deg);
	transition: border-color .3s;
}
.contents01_nav > li > a:hover{
	background: #235a32;
	border-color: #235a32;
	color: #ffffff;
}
.contents01_nav > li > a:hover::after{
	border-color: #ffffff;
}

/* 工事項目（01/02/03） */
.contents01_body{
	width: 100%;
	padding: 14.7rem 0 0;
}
.contents01_body_inner{
	width: 120rem;
	margin: 0 auto;
}
.contents01_item{
	display: flex;
	justify-content: space-between;
	margin-bottom: 13.2rem;
}
.contents01_item:last-child{
	margin-bottom: 0;
}
.contents01_item_img{
	width: 60rem;
	flex-shrink: 0;
}
.contents01_item_img .ph.main{
	display: block;
	width: 60rem;
	height: 50.2rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 0 15rem 0 0;
}
.contents01_item_subs{
	margin-top: 0.5rem;
	display: flex;
	gap: 0.4rem;
}
.contents01_item_subs .ph{
	display: block;
	width: 29.8rem;
	height: 20rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.contents01_item_body{
	width: 51.8rem;
	flex-shrink: 0;
	padding-top: 4.2rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
.contents01_item_num{
	display: inline-block;
	font-size: 6.3rem;
	line-height: 1;
	letter-spacing: calc((27/1000)*1em);
	color: #235a32;
	vertical-align: baseline;
}
.contents01_item_en{
	display: inline-block;
	margin: 0.8rem 0 0;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: calc((27/1000)*1em);
	color: #235a32;
	vertical-align: baseline;
}
.contents01_item_ttl{
	margin-top: 3.9rem;
	font-size: 3.3rem;
	line-height: 3rem;
	letter-spacing: calc((40/1000)*1em);
	color: #2b2b2b;
}
.contents01_item_desc{
	margin-top: 2.4rem;
	font-size: 1.5rem;
	line-height: 3rem;
	letter-spacing: calc((20/1000)*1em);
	color: #2b2b2b;
}
.contents01_item_box{
	margin-top: 3.7rem;
	width: 100%;
}
.contents01_item_box_ttl{
	height: 4.4rem;
	padding: 0 0 0 1.5rem;
	display: flex;
	align-items: center;
	background: #f2f5f3;
	font-size: 1.8rem;
	letter-spacing: calc((40/1000)*1em);
	color: #235a32;
}
.contents01_item_box_txt{
	margin-top: 1.6rem;
	font-size: 1.5rem;
	line-height: 3rem;
	letter-spacing: calc((20/1000)*1em);
	color: #2b2b2b;
}

/*==================================================
  contents02（対応エリア）
==================================================*/
.contents02{
	width: 100%;
	margin-top: 15.9rem;
	height: 46.8rem;
	position: relative;
	z-index: 3;
}
.contents02::before{
	content: '';
	position: absolute;
	top: 0;
	left: 12rem;
	right: 0;
	/* 下端をfooter上部まで伸ばす。高さはadmin.jsが --area-bg-h に実測値をセット（未計算時は100%） */
	height: var(--area-bg-h, 100%);
	background: #f2f5f3;
	border-radius: 15rem 0 0 0;
	z-index: 0;
}
.contents02_inner{
	width: 120rem;
	height: 100%;
	margin: 0 auto;
	padding: 11.5rem 0 0 18.1rem;
	position: relative;
	z-index: 1;
}
.contents02_en{
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: calc((27/1000)*1em);
	color: #235a32;
}
.contents02_ttl{
	margin-top: 0.8rem;
	font-size: 3.3rem;
	line-height: 3.4rem;
	letter-spacing: calc((40/1000)*1em);
	color: #2b2b2b;
}
.contents02_catch{
	margin-top: 3.6rem;
	font-size: 3rem;
	line-height: 3.4rem;
	letter-spacing: calc((40/1000)*1em);
	color: #235a32;
}
.contents02_lead{
	margin-top: 2.4rem;
	margin-left: 0.8rem;
	font-size: 1.5rem;
	line-height: 3.4rem;
	letter-spacing: calc((20/1000)*1em);
	color: #2b2b2b;
}
.contents02_map{
	width: 48rem;
	height: 58rem;
	position: absolute;
	top: -5rem;
	left: 57.5rem;
	background-image: url(../img/service/contents02/item01.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 2;
}

/*==================================================
  共通セクションの本ページ用上書き（PC限定）
  ※SPは共通(admin.css)の挙動をそのまま使う
==================================================*/
@media only screen and (min-width: 768px){
	/* WHY(inc01)を対応エリア(.contents02)より前面へ。※本ページ限定（service.cssはこのページのみ読込） */
	.inc01{
		z-index: 10;
	}
	/* CONTACT(inc02)をWHY(inc01)へ重ねて上へ引き上げ、前面に。※本ページ限定 */
	.inc02{
		margin: -25.6rem 0 0;
		z-index: 10;
	}
}
/* SP：CONTACT(inc02)をWHY(inc01)へ134px重ねる（XD SP。TOPは重なり無しのため本ページ限定） */
@media only screen and (max-width: 767px){
	.inc01{
		z-index: 3;
	}
	.inc02{
		margin: -13.4rem 0 0;
		z-index: 3;
	}
}

/*==================================================
  SP（375基準・XD SP/対応工事のご紹介）
==================================================*/
@media only screen and (max-width: 767px){
	/* ---- contents01 見出し部（イントロ） ---- */
	.contents01_head{
		padding: 5rem 0 0;
	}
	.contents01_head_inner{
		width: 100%;
		padding: 0 2.8rem;
	}
	.contents01_head_ttl{
		font-size: 2.8rem;
		line-height: 4.5rem;
	}
	.contents01_head_lead{
		margin-top: 1.9rem;
		font-size: 1.5rem;
		line-height: 2.3rem;
	}
	.contents01_nav{
		margin-top: 4.6rem;
		flex-wrap: wrap;
		gap: 1.7rem 1.4rem;
	}
	.contents01_nav > li > a{
		height: 3.7rem;
		padding: 0 2.7rem;
		border-radius: 1.9rem;
		font-size: 1.4rem;
	}
	.contents01_nav > li > a::after{
		width: 0.7rem;
		height: 0.7rem;
		margin: 0 0 0 1rem;
	}

	/* ---- contents01 工事項目（縦積み） ---- */
	.contents01_body{
		padding: 7.2rem 0 0;
	}
	.contents01_body_inner{
		width: 100%;
		padding: 0 2.8rem;
	}
	.contents01_item{
		display: block;
		margin-bottom: 9.4rem;
	}
	.contents01_item_img{
		width: 100%;
	}
	.contents01_item_img .ph.main{
		width: 100%;
		height: 26.7rem;
		border-radius: 0 7rem 0 0;
	}
	.contents01_item_subs{
		margin-top: 0.2rem;
		gap: 0.4rem;
	}
	.contents01_item_subs .ph{
		width: calc((100% - 0.4rem) / 2);
		height: 10.6rem;
	}
	.contents01_item_body{
		width: 100%;
		padding-top: 3.6rem;
	}
	.contents01_item_num{
		font-size: 6rem;
	}
	.contents01_item_en{
		margin: 0.4rem 0 0;
		font-size: 1.4rem;
	}
	.contents01_item_ttl{
		margin-top: 3.1rem;
		font-size: 2.8rem;
		line-height: 2.8rem;
	}
	.contents01_item_desc{
		margin-top: 2.3rem;
		font-size: 1.4rem;
		line-height: 2.7rem;
	}
	.contents01_item_box{
		margin-top: 2.9rem;
	}
	.contents01_item_box_ttl{
		font-size: 1.8rem;
	}
	.contents01_item_box_txt{
		margin-top: 1.1rem;
		font-size: 1.4rem;
		line-height: 2.8rem;
	}

	/* ---- contents02 対応エリア ---- */
	.contents02{
		margin-top: 9.5rem;
		height: auto;
		z-index: 3;
	}
	.contents02::before{
		top: 0;
		left: 2.8rem;
		right: 0;
		border-radius: 7rem 0 0 0;
	}
	.contents02_inner{
		width: 100%;
		height: auto;
		padding: 6.3rem 2.8rem 8.8rem 7.7rem;
	}
	.contents02_en,
	.contents02_ttl,
	.contents02_catch,
	.contents02_lead{
		position: relative;
		z-index: 1;
	}
	.contents02_ttl{
		margin-top: 1.6rem;
		font-size: 3.2rem;
		line-height: 3.4rem;
	}
	.contents02_catch{
		margin-top: 2.4rem;
		font-size: 2.7rem;
		line-height: 3.8rem;
	}
	.contents02_lead{
		margin-top: 2.6rem;
		margin-left: 0;
		font-size: 1.4rem;
		line-height: 2.4rem;
	}
	.contents02_map{
		width: 25.8rem;
		height: 31.2rem;
		top: -5.7rem;
		left: 5.8rem;
		z-index: 0;
	}
}