/*▼▼　工事の流れ　▼▼*/
.container.flow01 .inner {
	width:100%;
	max-width:1200px;
	margin:70px auto 50px;
}
.container.flow01 .inner h2 {
	text-align:center;
	font-size:36px;
	color:#ff671c;
	font-weight:700;
	margin:0 0 25px;
}
.container.flow01 .inner h2 span {
	font-size:0.67em;
	display:block;
	color:#ffb621;
	font-weight:900;
}
.container.flow01 .inner h3 {
	font-size:38px;
	font-weight:700;
	border-bottom:dotted 5px #f2982a;
	margin:0 auto 45px;
	padding:0 0 0.4em;
	width:14em;
	text-align:center;
}
.container.flow01 .inner h3 br {display:none;}
.container.flow01 .inner ul {
	display:flex;
	justify-content:center;
	align-items:center;
}
.container.flow01 .inner ul li.list {
	width:22%;
	max-width:250px;
}
.container.flow01 .inner ul li.arrow {
	width:2.2%;
	margin:0 15px;
}
.container.flow02 {padding:80px 0 0;}
.container.flow02 .inner .step {
	width:100%;
	max-width:1200px;
	margin:0 auto;
	position:relative;
	display:flex;
	justify-content:flex-end;
	align-items:stretch;
}
.container.flow02 .inner .step .num {
	font-size:32px;
	font-weight:700;
	color:#fff;
	background-color:#ff671c;
	position:absolute;
	top:0;
	left:0;
	padding:0.6em 1em;
	line-height:1;
	border-radius:10px;
	z-index:100;
}
.container.flow02 .inner img {
	width:100%;
	max-width:500px;
	position:absolute;
	top:2.5em;
	left:50px;
	z-index:10;
}
.container.flow02 .inner .wp {
	background-color:#fff6ea;
	border-radius:12px;
	width:61%;
	padding:80px 5% 90px 10%;
	position:relative;
	z-index:1;
	min-height:380px;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:center;
	align-content:center;
}
.container.flow02 .inner .wp h3 {
	font-size:38px;
	color:#ff4b16;
	margin:0 0 0.5em;
}
.container.flow02 .inner .wp p {
	font-size:18px;
	line-height:1.8;
	font-weight:500;
}
.container.flow02 .inner .arrow {
	width:35px;
	height:auto;
	aspect-ratio:1;
	border-right:dotted 5px #f2982a;
	border-bottom:dotted 5px #f2982a;
	margin:30px auto 50px;
	transform:rotate(45deg);
}
.container.flow02.another {
	padding:80px 0;
	background-color:#ff671c;
}
.container.flow02.another .inner .step .num {
	border:solid 3px #fff;
	background-color:#003aaf;
}

/*---▼お客様の声▼---*/
.container.voice {
	padding:110px 0 80px;
	background-color:#fff6ea;
}
.container.voice .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.voice .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.voice .inner h2 span {
	font-size:18px;
	position:relative;
	margin:0 0 3px;
}
.container.voice .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.voice .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.voice .inner h2 img {width:156px;}
.container.voice .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.voice .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.voice .inner .list {
	display:flex;
	width:100%;
	max-width:1100px;
	margin:60px auto;
	justify-content:space-between;
	align-items:flex-start;
	flex-direction:row-reverse;
}
.container.voice .inner .list li {
	width:30%;
	max-width:330px;
	text-align:center;
}
.container.voice .inner .list li a {
	display:flex;
	justify-content:stretch;
	align-content:space-between;
	width:100%;
	flex-direction:column;
	position:relative;
	z-index:10;
}
.container.voice .inner .list li a .thumbnail {
	width:100%;
	height:400px;
	position:relative;
	z-index:10;
	margin:0 0 20px;
	background-color:#fff;
}
.container.voice .inner .list li a .thumbnail img {
	width:auto;
	height:100%;
	object-fit:cover;
}
.container.voice .inner .list li a h3 {
	text-align:center;
	font-size:20px;
	font-weight:400;
	color:#fff;
	background-color:#165097;
	padding:1em 0;
	position:absolute;
	bottom:0;
	width:100%;
	line-height:1;
}
.container.voice .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.voice .inner .list li a .tag.item01 {
	background-color:#ff5d1f;
	color:#fff;
}
.container.voice .inner .list li a .tag.item02 {
	background-color:#15b500;
	color:#fff;
}

/*---▼施工事例▼---*/
.container.works {
	padding:110px 0;
	background-color:#fff;
}
.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;
}

.fadein {
	opacity:0;
	transform:translateY(70px);
	transition:.7s cubic-bezier(.25,.46,.45,.94);
}

/* メディアクエリ
------------------------------------------------------------------*/
@media print, screen and (max-width:1300px){
	/*▼▼　工事の流れ　▼▼*/
	.container.flow01 {padding:0 25px;}
	.container.flow02 {padding:80px 25px 0;}
	.container.flow02 .inner .step .num {font-size:2.5vw;}
	.container.flow02 .inner img {
		width:40vw;
		top:3.1vw;
		left:4vw;
	}
	.container.flow02 .inner .wp {
		width:57.5vw;
		padding:6.4vw 5vw 7vw 9.4vw;
		min-height:28.8vw;
	}
	.container.flow02 .inner .wp h3 {font-size:3vw;}
	.container.flow02 .inner .wp p {font-size:1.42vw;}
	.container.flow02.another {padding:80px 25px;}

	/*---▼施工事例▼---*/
	.container.works .inner .list {padding:0 25px;}
}
@media print, screen and (max-width:1100px){
	/*▼▼　工事の流れ　▼▼*/

	/*---▼お客様の声▼---*/
	.container.voice .inner .list {padding:0 25px;}
	.container.voice .inner .list li a .thumbnail {
		height:fit-content;
		aspect-ratio:2 / 2.4;
	}
}
@media print, screen and (max-width:1000px){
	/*▼▼　工事の流れ　▼▼*/
	.container.flow01 {padding:0 25px;}
	.container.flow01 .inner h3 {font-size:3.4vw;}
	.container.flow02 {padding:5vw 25px 0;}
	.container.flow02 .inner .step .num {
		font-size:2.1vw;
		border-radius:0.3em;
	}
	.container.flow02 .inner img {
		width:35vw;
		top:3.5vw;
	}
	.container.flow02 .inner .wp {padding:6.4vw 5vw 7vw 6.4vw;}
	.container.flow02 .inner .wp h3 {font-size:3.5vw;}
	.container.flow02 .inner .wp p {font-size:1.7vw;}
}
@media print, screen and (max-width:900px){
	.container.flow02 .inner .wp {padding:6.4vw 5vw 7vw 8.4vw;}
	.container.flow02 .inner .wp p {font-size:2vw;}
}
@media print, screen and (max-width:768px){
	/*▼▼　工事の流れ　▼▼*/
	.container {overflow:initial;}

	.container.flow01 {padding:0 2.5vw;}
	.container.flow01 .inner {margin:15vw auto 10vw;}
	.container.flow01 .inner h2 {
		font-size:8vw;
		margin:0 0 1.2em;
	}
	.container.flow01 .inner h3 {
		font-size:6.4vw;
		margin:0 auto 1.5em;
		width:9.4em;
	}
	.container.flow01 .inner h3 br {display:initial;}
	.container.flow01 .inner p {
		font-size:4.2vw;
		text-align:left;
	}
	.container.flow01 .inner ul {align-items:stretch;}
	.container.flow01 .inner ul li.list {width:100%;}
	.container.flow01 .inner ul li.list img {
		width:120%;
		max-width:unset;
		margin:0 0 0 -10%;
	}
	.container.flow01 .inner ul li.arrow {
		width:6vw;
		margin:0;
		position:relative;
		z-index:10;
	}
	.container.flow01 .inner ul li.arrow img {
		position:absolute;
		width:4vw;
		display:block;
		margin:auto;
		top:-50vw;
		bottom:-50vw;
		right:-50vw;
		left:-50vw;
		max-width:unset;
	}
	.container.flow02 {padding:5vw 2.5vw 0;}
	.container.flow02 .inner .step .num {font-size:4.2vw;}
	.container.flow02 .inner img {width:58vw;}
	.container.flow02 .inner .wp {
		margin:30vw 0 0;
		border-radius:2.5vw;
		width:100%;
		padding:9vw 8vw;
		min-height:55vw;
	}
	.container.flow02 .inner .wp h3 {font-size:6.2vw;}
	.container.flow02 .inner .wp p {font-size:4vw;}
	.container.flow02 .inner .arrow {margin:5vw auto 8vw;}
	.container.flow02.another {padding:12vw 5vw;}

	/*---▼お客様の声▼---*/
	.container.voice .inner h2 img {width:120px;}
	.container.voice .inner h2 span {font-size:3.8vw;}
	.container.voice .inner h2::after {
		top:-0.9em;
		right:-1.4em;
		width:13vw;
		height:auto;
		aspect-ratio:51 / 81;
	}
	.container.voice {padding:15vw 0;}
	.container.voice .inner .list {
		padding:0 2.5vw;
		margin:12vw auto 0;
		flex-wrap:wrap;
		justify-content:center;
	}
	.container.voice .inner .list li {
		width:46%;
		margin:0 2% 8vw;
	}
	.container.voice .inner .list li a .thumbnail {margin:0 0 2.5vw;}
	.container.voice .inner .list li a h3 {
		font-size:3.5vw;
		padding:0.7em 0.5em;
	}
	.container.voice .inner .dtl_btn {
		width:90%;
		font-size:5.4vw;
		padding:0.8em 0 1em;
	}

	/*---▼施工事例▼---*/
	.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;
	}
}