@charset "UTF-8";

.sectionTitle {
	text-align: center;
}

/* modal */

@media screen and (max-width: 768px) {
	.modal__container {
		width: 100%;
		padding: 0;
	}

	.modal .p-caption {
		padding-right: 1em;
		padding-bottom: 1em;
	}
}

.has-busIcon::before {
	content: '';
	display: block;
	aspect-ratio: 1;
	background-color: #fff;
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}
.has-busIcon01::before {
	-webkit-mask-image: url(../img/icon_bus01.svg);
  mask-image: url(../img/icon_bus01.svg);
}
.has-busIcon02::before {
	-webkit-mask-image: url(../img/icon_bus02.svg);
  mask-image: url(../img/icon_bus02.svg);
}

/* bus
---------------------------------------------- */
.bus {
	padding-block: clamp(80px, 3.18rem + 7.77vw, 200px);
	z-index: 1;
}

.bus__copy {
	max-width: 100%;
	margin-top: 3em;
	text-align: center;
}

.bus__text {
	margin-top: 1.5em;
	text-align: center;
}

.busNav {
	max-width: 1340px;
	margin-top: 130px;
}

.busNavList {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px calc(80 / 1340 * 100%);
}

.busNavList__btn--01 {
	background-color: #2c926d;
}
.busNavList__btn--02 {
	background-color: #e9425b;
}

.busNavList__img {
	width: calc(240 / 630 * 100%);
}
.busNavList__img img {
	height: 100%;
	object-fit: cover;
}

.busNavList__Body {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.busNavList__name {
	width: 100%;
	color: #fff;
	font-size: clamp(15px, 0.31rem + 1.3vw, 30px);
	letter-spacing: 0.05em;
	text-align: center;
}
.busNavList__name::before {
	width: calc(40 / 390 * 100%);
	margin-inline: auto;
	margin-bottom: 10px;
}

.busBox {
	max-width: 1340px;
	background-color: rgb(255 255 255 / .5);
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0 0 0 / .05);
	border: 1px solid #ccc;
	margin-top: 80px;
}

.busBox__inner {
	padding: calc(79 / 1338 * 100%);
}

.busBox__title {
	font-size: clamp(18px, 0.62rem + 1.04vw, 30px);
	font-weight: 500;
	letter-spacing: 0.05em;
}
.busBox--01 .busBox__title {
	color: #2c926d;
}
.busBox--02 .busBox__title {
	color: #e9425b;
}
.busBox__title .text {
	display: flex;
	align-items: center;
	column-gap: .5em;
}
.busBox__title .text::before {
	width: calc(50 / 1180 * 100%);
}
.busBox--01 .busBox__title .text::before {
	background-color: #2c926d;
}
.busBox--02 .busBox__title .text::before {
	background-color: #e9425b;
}

.busMap {
	margin-top: 15px;
}
.busBox--02 .busMap {
	margin-top: 50px;
}

.busInfo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 80px;
	margin-inline: auto;
}
.busBox--01 .busInfo {
	gap: 30px calc(60 / 1180 * 100%);
}
.busBox--02 .busInfo {
	/* grid-template-columns: calc(500 / 1050 * 100%) calc(470 / 1050 * 100%); */
	gap: 30px calc(80 / 1050 * 100%);
	max-width: 1050px;
}
.busInfo img {
	width: 100%;
}

.busInfo02 {
	margin-top: 50px;
	margin-inline: auto;
}

.busInfo__item--start {
	width: calc(680 / 1050 * 100%);
}

.bus .sectionCircle {
	bottom: 0;
	right: 0;
	width: calc(1417 / 1920 * 100%);
	z-index: -1;
}

.bus__caption {
	max-width: 1340px;
	font-size: 12px;
	line-height: 1.4;
	margin-top: 1em;
	text-align: right;
}

@media screen and (max-width: 768px) {
	.bus__copy {
		width: 95%;
		letter-spacing: 0;
		margin-top: 1.5em;
	}

	.bus__text {
		text-align: left;
	}

	.busNav {
		max-width: 560px;
		margin-top: 60px;
	}

	.busNavList {
		grid-template-columns: 1fr;
	}

	.busNavList__img {
		width: calc(120 / 320 * 100%);
	}

	.busBox {
		/* width: calc(350 / 375 * 100%); */
		border-radius: 10px;
		margin-top: 60px;
	}

	.busBox__inner {
		padding: calc(29 / 348 * 100%);
	}

	.busBox__title .text::before {
		width: 30px;
	}

	.busMap {
		margin-top: 25px;
	}
	.busBox--02 .busMap {
		margin-top: 40px;
	}

	.busModal .swipeInner {
		padding-inline: 20px;
	}

	.busInfo {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin-top: 30px;
		/* padding-inline: calc(29 / 348 * 100%); */
	}
	.busInfo02 {
		max-width: 560px;
		margin-top: 30px;
	}

	.busInfo__item--holiday {
		width: calc(273 / 290 * 100%);
	}
	.busInfo__item--start {
		width: calc(240 / 290 * 100%);
	}

	.busMap .sp-modalIcon {
		top: -20px;
	}

	.bus .sectionCircle {
		width: calc(250 / 375 * 100%);
	}

	.bus__caption {
		max-width: 560px;
		font-size: 10px;
		text-align: left;
	}
}

/* car
---------------------------------------------- */
.car__copy {
	margin-top: 3em;
	text-align: center;
}

.carMap {
	max-width: 1400px;
	background-color: #fff;
	margin-top: 140px;
}

.carMap__inner {
	padding: calc(100 / 1400 * 100%);
}

.carMap__annotation {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: #e9425b;
	margin-top: 2em;
	text-align: center;
}

.carMapInfo {
	margin-top: 30px;
}

@media screen and (max-width: 768px) {
	.car__copy {
		width: 100%;
		margin-top: 2em;
	}

	.carMap {
		max-width: 560px;
		margin-top: 50px;
	}

	.carMap__inner {
		padding: calc(30 / 320 * 100%);
	}

	.carMap .sp-modalIcon {
		top: -20px;
		right: -20px;
	}

	.carMap__annotation {
		font-size: 10px;
		margin-top: 1em;
		padding-left: 1em;
		text-indent: -1em;
		text-align: left;
	}

	.carMapInfo {
		margin-top: 20px;
	}
}