@charset "UTF-8";
/* CSS Document */

/*----- PAGE-CAPTION -----*/

.page-caption{
	font-size:1.25rem;
	line-height:35px;
	font-weight:bold;
	
	color:#000;
	
	text-align: left;
	margin-bottom:10px;
}

.page-caption br{
	display:none;
}

@media only screen and (min-width: 768px){
	
	.page-caption{
		font-size:1.5rem;
		line-height:40px;
		
		text-align: center;
		margin-bottom:15px;
	}
	
	.page-caption br{
		display:inline;
	}
	
}

@media only screen and (min-width: 1024px){
	
	.page-caption{
		font-size:2.0rem;
		line-height:50px;
		
		margin-bottom:20px;
	}
	
}

/*----- BRANCH -----*/

.branch{
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	
	width:100%;
}

.branch div.thumbnail{
	width:355px;
	margin:0 auto 20px;
	position: relative;
}

.branch div.thumbnail::before{
	display:block;
	content:"";
	
	width:100%;
	box-sizing: border-box;
	padding-top:100%;
}

.branch div.thumbnail img.map{
	display:block;
	
	width:100%;
	
	position: absolute;
	top:0;
	left:0;
	
	object-fit: cover;
	object-position: center;
}

.branch div.thumbnail p.spot{
	display:block;
	
	width:30px;
	height:30px;
	
	background-image: url("_assets/img/icon_place.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	
	font-size:0;
	line-height:30px;
	
	position: absolute;
	
	z-index: 10;
}

.branch div.thumbnail p.spot.tokyo{
	top:60%;
	right:33.5%;
}

.branch div.thumbnail p.spot.kumamoto{
	bottom:13.5%;
	left:9.5%;
}

.branch div.thumbnail div.lineup{
	display:block;
	
	position: absolute;
	
	background-color:rgba(0,170,205,0.10);
	color:#444;
	
	border-radius:2.5px;
}

.branch div.thumbnail div.lineup::after{
	display:block;
	content:"";
	
	background-color:#000;
	
	position: absolute;
}

.branch div.thumbnail div.lineup.tokyo{
	bottom:13.5%;
	right:0;
}

.branch div.thumbnail div.lineup.tokyo::after{
	width:45%;
	height:1px;
	
	left:-45%;
	top:0;
	bottom:0;
	
	margin:auto 0;
}

.branch div.thumbnail div.lineup.kumamoto{
	top:40%;
	left:0;
}

.branch div.thumbnail div.lineup.kumamoto::after{
	width:1px;
	height:125%;
	
	left:31.5%;	
	bottom:-125%;
}

.branch div.thumbnail div.lineup h6{
	font-size:1.0rem;
	line-height:30px;
	font-weight:bold;
	
	text-align: center;
	
	box-sizing: border-box;
	padding:0 10px;
	
	background-color:#0ac;
	color:#fff;
	
	border-top-left-radius: 2.5px;
	border-top-right-radius: 2.5px;
}

.branch div.thumbnail div.lineup ul{
	font-size:0.6rem;
	line-height:15px;
	
	box-sizing: border-box;
	padding:10px;
}

.branch div.thumbnail div.lineup ul li{
	display:block;
	
	box-sizing: border-box;
	padding-left:10px;
	position: relative;
}

.branch div.thumbnail div.lineup ul li::before{
	display:block;
	content:"・";
	
	position: absolute;
	top:0;
	left:0;
}

.branch div.text{
	width:100%;
}

.branch div.text div.child{
	width:100%;
	margin-bottom:20px;
}

.branch div.text div.child:last-child{
	margin-bottom:0;
}

.branch div.text div.child h4{
	font-size:1.0rem;
	line-height:30px;
	font-weight:bold;
	
	box-sizing: border-box;
	padding-left:30px;
	position: relative;
	
	color:#048;
}

.branch div.text div.child h4::before{
	display:block;
	content:"";
	
	width:30px;
	height:30px;
	
	position: absolute;
	top:0;
	left:0;
	
	background-image: url("../_assets-common/img/icon/048/icon_straight.webp");
	background-repeat: no-repeat;
	background-size: 50%;
	background-position: center;
}

.branch div.text div.child p{
	font-size:0.8rem;
	line-height:25px;
}

@media only screen and (min-width: 768px){
	
	.branch div.thumbnail{
		width:355px;
		margin-bottom:0;
	}
	
	.branch div.text{
		width:calc(100% - 355px);
		
		box-sizing: border-box;
		padding-left:20px;
	}
	
}

@media only screen and (min-width: 1024px){
	
	.branch div.thumbnail{
		width:480px;
		margin-bottom:0;
	}
	
	.branch div.thumbnail p.spot.tokyo{
		top:62.5%;
		right:34.5%;
	}
	
	.branch div.thumbnail p.spot.kumamoto{
		bottom:14.5%;
		left:10.5%;
	}
	
	.branch div.thumbnail div.lineup.tokyo{
		bottom:17.5%;
		right:5%;
	}
	
	.branch div.thumbnail div.lineup.tokyo::after{
		width:55%;
		left:-55%;
	}
	
	.branch div.thumbnail div.lineup.kumamoto{
		top:52.5%;
		left:3.0%;
	}
	
	.branch div.text{
		width:calc(100% - 480px);
		
		box-sizing: border-box;
		padding-left:20px;
	}
	
	.branch div.text div.child h4{
		font-size:1.25rem;
		line-height:35px;
		
		padding-left:35px;
	}
	
	.branch div.text div.child h4::before{
		width:35px;
		height:35px;
	}
	
	.branch div.text div.child p{
		font-size:1.0rem;
		line-height:30px;
	}
	
}

/*----- STATEMENT -----*/

.statement{
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	
	width:100%;
}

.statement div.thumbnail{
	width:100%;
	margin-bottom:20px;
	
	position: relative;
	
	border-radius: 5px;
	overflow: hidden;
}

.statement div.thumbnail::before{
	display:block;
	content:"";
	
	box-sizing: border-box;
	padding-top:100%;
}

.statement div.thumbnail img{
	display:block;
	
	width:100%;
	height:100%;
	
	position: absolute;
	top:0;
	left:0;
	
	object-fit: cover;
	object-position: center;
}

.statement div.text{
	width:100%;
}

.statement div.text h4{
	width:100%;
	margin-bottom:10px;
	
	font-size:1.5rem;
	line-height:40px;
	font-weight:bold;
	
	color:#0ac;
}

.statement div.text h4 br{
	display:none;
}

@media only screen and (min-width: 768px){
	
	.statement div.thumbnail{
		width:50%;
		margin-bottom:0;
	}
	
	.statement div.text{
		width:50%;
		
		box-sizing: border-box;
		padding-left:20px;
	}
	
}

@media only screen and (min-width: 1024px){
	
	.statement div.text h4 br{
		display:inline;
	}
	
}

/*----- COMMIT -----*/

.commit{
	width:100%;
}

.commit h4{
	width:100%;
	margin-bottom:20px;
	
	font-size:1.5rem;
	line-height:40px;
	font-weight:bold;
	
	color:#0ac;
}

.commitment{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	width:100%;
	
	background-color: rgba(0,170,205,0.10);
	color:#444;
	
	border-radius:5px;
}

.commitment div.child{
	width:100%;
	
	box-sizing: border-box;
	padding:20px 15px;
	padding-top:160px;
	position: relative;
	
	font-size:0.8rem;
	line-height:25px;
}

.commitment div.child::before{
	display:block;
	content:"";
	
	width:120px;
	height:120px;
	
	background-color:#fff;
	border-radius:120px;
	
	position: absolute;
	top:20px;
	left:0;
	right:0;
	
	margin:0 auto;
	
	background-repeat: no-repeat;
	background-size: 75%;
	background-position: center;
}

.commitment div.child:nth-child(1)::before{
	background-image: url("_assets/img/icon-commit01.webp");
}

.commitment div.child:nth-child(2)::before{
	background-image: url("_assets/img/icon-commit02.webp");
}

.commitment div.child:nth-child(3)::before{
	background-image: url("_assets/img/icon-commit03.webp");
}

.commitment div.child::after{
	display:block;
	content:"";
	
	width:calc(100% - 30px);
	height:1px;
	
	background-color:#fff;
	
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	
	margin:0 auto;
}

.commitment div.child:last-child::after{
	display:none;
}

.commitment div.child h6{
	font-size:1.0rem;
	line-height:30px;
	font-weight:bold;
	
	text-align: center;
	color:#048;
}

.commitment div.child h6::before{
	content:"（";
}

.commitment div.child h6::after{
	content:"）";
}

@media only screen and (min-width: 768px){
	
	.commit h4{
		text-align: center;
	}
	
	.commitment div.child{
		width:calc(100%/3);
	}
	
	.commitment div.child::after{
		width:1px;
		height:calc(100% - 30px);
		
		top:0;
		bottom:0;
		left:auto;
		right:0;
		
		margin:auto 0;
	}
	
}

@media only screen and (min-width: 1024px){
	
	.commitment div.child{
		font-size:1.0rem;
		line-height:30px;
		
		padding:25px 15px;
		padding-top:205px;
	}
	
	.commitment div.child::before{
		width:160px;
		height:160px;
		
		top:25px;
	}
	
	.commitment div.child h6{
		font-size:1.25rem;
		line-height:35px;
	}
	
}

/*----- RESULT -----*/

.result{
	width:100%;
}

.result div.child{
	width:100%;
	
	box-sizing: border-box;
	padding:15px 10px;
	position: relative;
}

.result div.child::after{
	display:block;
	content:"";
	
	width:100%;
	height:1px;
	
	background-color:#aaa;
	
	position: absolute;
	bottom:0;
	left:0;
}

.result div.child h4{
	font-size:1.0rem;
	line-height:30px;
	font-weight:bold;
	
	color:#048;
	
	box-sizing: border-box;
	padding-left:30px;
	position: relative;
}

.result div.child h4::before{
	display:block;
	content:"";
	
	width:30px;
	height:30px;
	
	position: absolute;
	top:0;
	left:0;
	
	background-image: url("../_assets-common/img/icon/048/icon_straight.webp");
	background-repeat: no-repeat;
	background-size:50%;
	background-position: center;
}

.result div.child ul{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

.result div.child ul li{
	display:block;
	width:100%;
	
	font-size:0.8rem;
	line-height:25px;
	
	box-sizing: border-box;
	padding:0 10px;
	padding-left:75px;
	position: relative;
}

.result div.child ul li.date{
	padding-left:50px;
}

.result div.child ul li::before{
	display:block;
	content:"";
	
	position: absolute;
	top:0;
	left:0;
}

.result div.child ul li.where::before{
	content:"（施工場所）";
}

.result div.child ul li.how::before{
	content:"（工事内容）";
}

.result div.child ul li.date::before{
	content:"（日付）";
}

.result div.child p.btn{
	display:block;
	
	width:120px;
	height:30px;
	margin-top:10px;
}

.result div.child p.btn a{
	display:block;
	transition:0.25s;
}

.result div.child p.btn a:hover{
	opacity: 0.75;
	text-decoration: none;
}

.result div.child p.btn span{
	display:block;
	
	font-size:0.8rem;
	line-height:30px;
	
	background-color:#f80;
	color:#fff;
	
	box-sizing: border-box;
	padding:0 10px;
	padding-left:30px;
	position: relative;
	
	border-radius:2.5px;
}

.result div.child p.btn span::before{
	display:block;
	content:"";
	
	width:30px;
	height:30px;
	
	position: absolute;
	top:0;
	left:0;
	
	background-image: url("../_assets-common/img/icon/fff/icon_photo.webp");
	background-repeat: no-repeat;
	background-size:50%;
	background-position: center;
}

@media only screen and (min-width: 768px){
	
	.result div.child{
		padding-right:150px;
	}
	
	.result div.child ul li{
		width:auto;
	}
	
	.result div.child p.btn{
		margin-top:0;
		
		position: absolute;
		top:0;
		bottom:0;
		right:15px;
		
		margin:auto 0;
	}
	
}