@charset "utf-8";

.box1 {max-width: 1300px; width: 100%; margin: 0 auto 100px;}
.box1 figcaption {text-align: right; margin-top: 5px;}

.box2 {margin-bottom: 60px;}
.box2 .tit{text-align: center; line-height: 1.4; margin-bottom: 60px; font-size: 2.8rem;}
.box2 > figure {margin: 0 0 60px;}
.box2 .listImg figure{width: 16%;}

.box3 .heading{padding: 0 20px 20px; background: #efefef; line-height: 1; text-align: center;}
.box3 .distance{margin: 30px 0;}
.box3 .distance .col {width: 49%;}
.box3 .distance .col .item{margin-bottom: 10px; line-height: 1; align-items: baseline; min-height: 84px;}
.box3 .distance .col .item:last-child {margin-bottom: 0;}
.box3 .distance .col .item .left .fs-10 {margin-left: 16px; margin-top: 5px; line-height: 1.4;}
.box3 .distance .item .border {border: 1px solid #000; display: inline-block; margin-left: 50px; line-height: 1; padding: 2px 6px 6px; margin-top: 5px;}
.box3 .distance .item .lb {display: inline-block; background: black; color: white; line-height: 1; padding: 2px 6px 6px; position: relative; top: -4px;}
.box3 .distance .right .fs-20{position: relative; top: -2px;}
.box3>.caption{margin: 20px 0;}


/* MEDIA */

@media screen and (max-width: 768px) {

	.box1 {margin-bottom: 40px;}
	.box1 figcaption {padding: 0 5px; text-align: left;}
	
	.box2 .tit{margin-bottom: 30px; font-size: 2.2rem;}
	.box2 > figure {margin: 0 0 30px;}
	.box2 .listImg{row-gap: 30px;}
	.box2 .listImg figure{width: 31%;}

	.box3 .heading{padding: 10px 10px 20px;}
	.box3 .distance .col .item{min-height: auto; margin-bottom: 30px;}
	.box3 .distance .col .item .left{flex: 1;}
	.box3 .distance .col {width: 100%; margin-bottom: 40px;}
	.box3 .distance .col:last-child {margin-bottom: 0;}
	.box3 .distance .col:last-child .item .left {position: relative; width: 60%;}
	.box3 .distance .col:last-child .item .left .fs-10 {position: absolute; left: 0;}
}
@media screen and (max-width: 640px){
	.box2 .listImg figure{width: 48%;}
}

.box4{border: 1px solid #000; padding: 30px; border-radius: 20px; margin-top: 60px;}
.box4 ul li:nth-child(1){width: 64%;}
.box4 ul li:nth-child(1) h3{margin-bottom: 20px;}
.box4 ul li:nth-child(2){width: 31%;}
.box4 ul li:nth-child(2) .photo{margin-bottom: 10px;}
@media screen and (max-width: 640px){
	.box4{padding: 15px;}
	.box4 img{width: 100%;}
	.box4 ul li:nth-child(1){width: 100%; margin-bottom: 30px;}
	.box4 ul li:nth-child(2){width: 100%;}
	
}