/*▼▼　施工エリア　▼▼*/
.container.area01 .inner {
	width:100%;
	max-width:1200px;
	margin:70px auto 50px;
}
.container.area01 .inner h2 {
	text-align:center;
	font-size:36px;
	color:#ff671c;
	font-weight:700;
	margin:0 0 40px;
}
.container.area01 .inner h2 span {
	font-size:0.67em;
	display:block;
	color:#ffb621;
	font-weight:900;
}
.container.area01 .inner h3 {
	width:4em;
	width:fit-content;
	margin:0 auto 35px;
	font-weight:700;
	font-size:32px;
	padding:0 0 0.3em;
	border-bottom:dotted 5px #f2982a;
}
.container.area01 .inner h3 br {display:none;}
.container.area01 .inner p {
	text-align:center;
	line-height:1.8;
}

.container.area02 {padding:70px 0 0;}
.container.area02 .inner {
	margin:0 auto;
	width:100%;
	background-color:#fff6eb;
}
.container.area02 .inner .flex_wp {
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0 auto;
	width:100%;
	max-width:1000px;
}
.container.area02 .inner .flex_wp .bx1 {
	width:50%;
	margin:0;
}
.container.area02 .inner .flex_wp .bx1 h3 {
	font-size:38px;
	font-weight:700;
	color:#ff5d1f;
	margin:0 0 1em;
	padding:0;
}
.container.area02 .inner .flex_wp .bx1 dl dt h4 {
	font-size:24px;
	border-bottom:solid 1px #ccc;
	padding:0 0 0.5em;
	margin:0 0 0.5em;
	font-weight:600;
}
.container.area02 .inner .flex_wp .bx1 dl dd {
	font-size:18px;
	padding:0 0 2.5em;
}
.container.area02 .inner .flex_wp .bx1 dl dd a {
	color:#1b63bc;
	border-bottom:solid 1px #1b63bc;
}
.container.area02 .inner .flex_wp .bx2 {
	padding:0 0 0 1em;
	width:50%;
	height:auto;
	aspect-ratio:1;
	position:relative;
}
.container.area02 .inner .flex_wp .bx2 img {
	width:120%;
	max-width:unset;
	position:absolute;
	margin:auto;
	top:-50%;
	bottom:-50%;
	left:30px;
}
.container.area02 .inner p {
	margin:0 0 2.5em 2.2em;
	line-height:1.8;
}

.container.area03 {padding:50px 0;}
.container.area03 .inner {
	width:100%;
	max-width:1200px;
	margin:0 auto;
}
.container.area03 .inner dl {margin:0 0 50px;}
.container.area03 .inner dl dt {
	display:flex;
	justify-content:flex-start;
	align-items:flex-end;
	border-bottom:dotted 1px #000;
	margin:0 0 15px;
	padding:0 0 15px;
}
.container.area03 .inner dl dt h2 {
	font-size:32px;
	font-weight:400;
	position:relative;
}
.container.area03 .inner dl dt h2::after {
	content:"";
	display:block;
	width:110%;
	height:10px;
	background-color:#ffd9ac;
	position:absolute;
	bottom:-2px;
	z-index:-1;
	transform:skewX(-20deg);
	margin:auto;
	left:-50%;
	right:-50%;
}
.container.area03 .inner dl dt p {font-size:18px;}
.container.area03 .inner dl dt a {
	font-size:14px;
	display:block;
	width:fit-content;
	margin:5px 0 0 auto;
	position:relative;
}
.container.area03 .inner dl dt a::before {
	content:"";
	display:block;
	width:21px;
	height:21px;
	border-radius:50vw;
	background:url(https://www.keio1-kyuto.com/wp-content/themes/keio1-kyuto/assets/images/arrow01.png) no-repeat;
	background-color:#ff5d1f;
	background-size:48%;
	background-position:68% 50%;
	position:absolute;
	left:-25px;
	top:-50%;
	bottom:-50%;
	margin:auto;
}
.container.area03 .inner dl dd p.name {
	font-size:18px;
	line-height:2;
}

/*---▼エリア詳細▼---*/
.container.area03.detail {padding:50px 0 100px;}
.container.area01.detail .inner h3 {text-align:center;}
.container.area01.detail .inner h3 br {display:initial;}
.container.area01.detail .inner p {margin:0 0 50px;}
.container.area01.detail .inner .img_wp {
	width:100%;
	max-width:1200px;
	margin:0 auto;
}
.container.area03.detail .inner dl dt a {display:none;}
.container.area03.detail .inner ul {
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	margin:0 0 35px;
}
.container.area03.detail .inner ul::after {
	content:"";
	display:block;
	width:59.5%;
}
.container.area03.detail .inner ul li {
	width:19%;
	margin:0 0 8px;
}
.container.area03.detail .inner ul li a {
	display:block;
	font-size:16px;
	position:relative;
	background-color:#f7f7f7;
	padding:1em 0 1.1em 1.2em;
	line-height:1;
}
.container.area03.detail .inner ul li a::after {
	content:"";
	display:block;
	background-color:#ff6700;
	width:10px;
	height:auto;
	aspect-ratio:1;
	position:absolute;
	right:1px;
	bottom:1px;
	border-top:solid 5px #f7f7f7;
	border-left:solid 5px #f7f7f7;
	border-right:solid 5px #ff6700;
	border-bottom:solid 5px #ff6700;
}
.container.area03.detail .inner .dtl_btn {
	display:block;
	width:80%;
	max-width:550px;
	background-color:#fff;
	text-align:center;
	font-size:22px;
	font-weight:600;
	line-height:1;
	margin:0 auto;
	padding:1em 0 1.2em;
	border-radius:60px;
	position:relative;
	border:solid 3px #229907;
}
.container.area03.detail .inner .dtl_btn::after {
	content:"▼";
	position:absolute;
	left:18px;
	font-size:0.8em;
	transform:rotateZ(90deg);
	margin:auto 0;
	top:-50%;
	bottom:-50%;
	line-height:0;
	width:1em;
	height:1em;
	color:#229907;
}


/*---▼施工事例▼---*/
.container.works {
	padding:110px 0;
	background-color:#fff6ec;
}
.container.works .inner h2 {
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	font-weight:700;
	font-size:38px;
	position:relative;
	width:fit-content;
	margin:0 auto;
}
.container.works .inner h2::after {
	content:"";
	display:block;
	width:51px;
	height:81px;
	position:absolute;
	top:-1em;
	right:-1.6em;
	background:url('https://www.keio1-kyuto.com/wp-content/themes/keio1-kyuto/assets/images/kuma01.png') no-repeat;
	background-size:contain;
}
.container.works .inner h2 span {
	font-size:18px;
	position:relative;
	margin:0 0 3px;
}
.container.works .inner h2 span::before {
	content:"";
	display:block;
	width:10px;
	height:16px;
	position:absolute;
	left:-0.7em;
	bottom:-0.1em;
	background:url('https://www.keio1-kyuto.com/wp-content/themes/keio1-kyuto/assets/images/mark01a.png') no-repeat;
	background-size:contain;
}
.container.works .inner h2 span::after {
	content:"";
	display:block;
	width:10px;
	height:16px;
	position:absolute;
	right:-0.7em;
	bottom:-0.1em;
	background:url('https://www.keio1-kyuto.com/wp-content/themes/keio1-kyuto/assets/images/mark01b.png') no-repeat;
	background-size:contain;
}
.container.works .inner h2 img {width:156px;}
.container.works .inner .dtl_btn {
	display:block;
	width:20em;
	background-color:#229907;
	color:#fff;
	text-align:center;
	font-size:22px;
	line-height:1;
	margin:0 auto;
	padding:1em 0 1.2em;
	border-radius:60px;
	position:relative;
}
.container.works .inner .dtl_btn::after {
	content:"▼";
	position:absolute;
	right:18px;
	font-size:0.8em;
	transform:rotateZ(-90deg);
	margin:auto 0;
	top:-50%;
	bottom:-50%;
	line-height:0;
	width:1em;
	height:1em;
}
.container.works .inner .list {
	display:flex;
	width:100%;
	max-width:1200px;
	margin:60px auto;
	justify-content:space-between;
	align-items:flex-start;
	flex-direction:row-reverse;
}
.container.works .inner .list li {
	width:30%;
	max-width:350px;
}
.container.works .inner .list li a {
	display:flex;
	justify-content:stretch;
	align-content:space-between;
	width:100%;
	flex-direction:column;
	position:relative;
	z-index:10;
}
.container.works .inner .list li a .thumbnail {
	width:100%;
	height:auto;
	aspect-ratio:1;
	overflow:hidden;
	border:solid 7px #f1f4f7;
	position:relative;
	z-index:10;
	margin:0 0 20px;
	display:flex;
	justify-content:center;
	align-items:flex-start;
}
.container.works .inner .list li a .thumbnail img {
	width:auto;
	max-width:none;
	height:auto;
	position:absolute;
	top:0;
	margin:auto;
}
.container.works .inner .list li a .thumbnail img.hori {height:100%;}
.container.works .inner .list li a .thumbnail img.vert {width:100%;}
.container.works .inner .list li a h3 {
	text-align:justify;
	font-size:20px;
	line-height:1.6;
	font-weight:400;
	margin:0 0 0.5em;
}
.container.works .inner .list li a .tag {
	display:block;
	border-radius:3px;
	background-color:#eee;
	width:fit-content;
	line-height:1;
	padding:0.3em 1em 0.5em;
	font-weight:500;
}
.container.works .inner .list li a .tag.item01 {
	background-color:#ff5d1f;
	color:#fff;
}
.container.works .inner .list li a .tag.item02 {
	background-color:#15b500;
	color:#fff;
}

/* メディアクエリ
------------------------------------------------------------------*/
@media print, screen and (max-width:1300px){
	/*---▼エリア一覧▼---*/
	.container.area02 .inner .flex_wp {
		width:78vw;
		max-width:unset;
	}
	.container.area03 .inner {padding:0 25px;}

	/*---▼エリア詳細▼---*/
	.container.area01.detail .inner .img_wp {padding:0 25px;}

	/*---▼施工事例▼---*/
	.container.works .inner .list {padding:0 25px;}
}
@media print, screen and (max-width:1200px){
	/*---▼エリア一覧▼---*/
	.container.area02 .inner .flex_wp {
		width:90vw;
		justify-content:flex-start;
	}
	.container.area02 .inner .flex_wp .bx1 {padding:5vw 0;}
	.container.area02 .inner .flex_wp .bx1 h3 {
		font-size:3.1vw;
		margin:0 0 0.6em;
	}
	.container.area02 .inner .flex_wp .bx1 dl dt h4 {font-size:1.9vw;}
	.container.area02 .inner .flex_wp .bx1 dl dd {font-size:1.43vw;}
	.container.area02 .inner .flex_wp .bx2 {width:40%;}

	/*---▼エリア詳細▼---*/
}
@media print, screen and (max-width:1000px){
	/*---▼エリア一覧▼---*/
	.container.area01 {padding:0 25px;}
	.container.area02 .inner .flex_wp .bx1 {
		width:45%;
		padding:5vw 0 2.5vw;
	}
	.container.area02 .inner .flex_wp .bx1 h3 {font-size:3.6vw;}
	.container.area02 .inner .flex_wp .bx1 dl dt h4 {
		font-size:2.4vw;
		margin:0 0 0.1em;
	}
	.container.area02 .inner .flex_wp .bx1 dl dd {
		font-size:1.8vw;
		line-height:2;
		padding:0 0 1.5em;
	}
	.container.area02 .inner .flex_wp .bx2 {width:45%;}

	/*---▼エリア詳細▼---*/
	.container.area01.detail .inner .img_wp {
		position:relative;
		width:100%;
		height:400px;
		overflow:hidden;
		padding:0;
	}
	.container.area01.detail .inner .img_wp img {
		max-width:unset;
		width:auto;
		height:100%;
		position:absolute;
		margin:auto;
		left:-50%;
		right:-50%;
	}
	.container.area03.detail .inner ul li {width:24%;}
	.container.area03.detail .inner ul::after {width:24%;}
}
@media print, screen and (max-width:900px){
	/*---▼エリア詳細▼---*/
	.container.area01.detail .inner p br {display:none;}
}
@media print, screen and (max-width:768px){
	/*---▼エリア一覧▼---*/
	.container {overflow:initial;}
	.container.area01 {padding:0 5vw;}
	.container.area01 .inner {margin:15vw auto 10vw;}
	.container.area01 .inner h2 {
		font-size:8vw;
		margin:0 0 1.2em;
	}
	.container.area01 .inner h3 {text-align:center;}
	.container.area01 .inner h3 br {display:initial;}
	.container.area01 .inner p {
		font-size:4.2vw;
		text-align:left;
	}
	.container.area02 {padding:0;}
	.container.area02 .inner {
		margin:0 auto 5vw;
		padding:5vw;
	}
	.container.area02 .inner p {
		margin:0 0 2.5em 0.8em;
		font-size:4.2vw;
		line-height:2;
	}
	.container.area02 .inner .flex_wp {
		width:100%;
		flex-wrap:wrap;
	}
	.container.area02 .inner .flex_wp .bx1 {width:100%;}
	.container.area02 .inner .flex_wp .bx1 h3 {font-size:8.2vw;}
	.container.area02 .inner .flex_wp .bx1 dl dt h4 {font-size:5.4vw;}
	.container.area02 .inner .flex_wp .bx1 dl dd {
		font-size:4.2vw;
		line-height:2.4;
	}
	.container.area02 .inner .flex_wp .bx2 {
		width:100%;
		padding:0 0 5vw;
	}
	.container.area02 .inner .flex_wp .bx2 img {
		position:unset;
		width:100%;
	}
	.container.area03 .inner {padding:0 5vw;}
	.container.area03 .inner dl dt {
		flex-wrap:wrap;
		margin:0 0 3vw;
		padding:0 0 3vw;
	}
	.container.area03 .inner dl dt h2 {font-size:6.2vw;}
	.container.area03 .inner dl dt p {
		font-size:3.2vw;
		line-height:1;
	}
	.container.area03 .inner dl dt a {
		font-size:3.2vw;
		line-height:1;
	}
	.container.area03 .inner dl dt a::before {
		width:1.6em;
		height:1.6em;
		left:-5.6vw;
	}
	.container.area03 .inner dl dd p.name {font-size:4vw;}

	/*---▼エリア詳細▼---*/
	.container.area01.detail .inner {margin:15vw auto 0;}
	.container.area01.detail .inner h3 {
		font-size:7.4vw;
		margin:0 0 0.7em;
	}
	.container.area01.detail .inner h3 br {display:none;}
	.container.area01.detail .inner p {
		margin:0 0 12vw;
		text-align:justify;
	}
	.container.area01.detail .inner .img_wp {
		height:auto;
		aspect-ratio:3 / 2.3;
		text-align:center;
		display:flex;
		justify-content:center;
	}
	.container.area01.detail .inner .img_wp img {
		left:unset;
		right:unset;
	}
	.container.area03.detail .inner ul {margin:0 0 10vw;}
	.container.area03.detail .inner ul li {width:48%;}
	.container.area03.detail .inner .dtl_btn {
		width:90%;
		font-size:5.4vw;
		padding:0.8em 0 1em;
	}
	.container.area03.detail .inner .dtl_btn {font-size:4.8vw;}

	/*---▼施工事例▼---*/
	.container.works .inner h2 img {width:120px;}
	.container.works .inner h2 span {font-size:3.8vw;}
	.container.works .inner h2::after {
		top:-0.9em;
		right:-1.5em;
		width:13vw;
		height:auto;
		aspect-ratio:51 / 81;
	}
	.container.works .inner .dtl_btn {
		width:90%;
		font-size:5.4vw;
		padding:0.8em 0 1em;
	}
	.container.works {padding:20vw 0 15vw;}
	.container.works .inner .list {
		flex-wrap:wrap;
		padding:0 5vw;
		margin:10vw auto 5vw;
	}
	.container.works .inner .list li {
		width:100%;
		max-width:unset;
		margin:0 0 5vw;
	}
	.container.works .inner .list li a {
		flex-direction:initial;
		flex-wrap:wrap;
		justify-content:space-between;
		align-items:flex-start;
	}
	.container.works .inner .list li a .thumbnail {
		width:40%;
		border-width:1vw;
		margin:0;
	}
	.container.works .inner .list li a .wp {width:57%;}
	.container.works .inner .list li a .wp h3 {
		font-size:5vw;
		line-height:1.4;
	}

}