@charset "utf-8";


#main .hero-list{ display: flex; position: relative; z-index: -1; }
#main .hero-list .item{ flex: 1; transform: translateY(80%); transition: opacity 0.8s ease-in, transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1.000); }
#main .hero-list .item:nth-child(even){ transform: translateY(-80%); }
#main .hero-list.show .item:nth-child(n){ transform: translateY(0); }
#main .hero-list .item img{ width: 100%; height: auto; }
#main .hero-list.show .item:nth-child(2){ transition-delay: 0.2s; }
#main .hero-list.show .item:nth-child(3){ transition-delay: 0.4s; }
#main .section01~.section{ margin-top: 100px; }
#main .section .section-header{ position: relative; }
#main .section .section-header::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/common/cmn_bg01.webp) center 0 repeat; background-size: 224px 259px; }
#main .section .section-header::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%); }
#main .section01 .section-header,
#main .section03 .section-header{ background: linear-gradient(to right, #124e5d 0%, #628897 38%, #628897 62%, #124e5d 100%); }
#main .section02 .section-header{ background: linear-gradient(to right, #2d4f72 0%, #5a7490 38%, #5a7490 62%, #2d4f72 100%); }
#main .section .section-header .txt-body{ padding: 90px 5% 100px; text-align: center; position: relative; z-index: 10; color: #ffffff;  }
#main .section .section-header .txt-body .en{ color: inherit; font-size: 32px; line-height: 1.2; max-width: 628px; margin: 0 auto; background: linear-gradient(to right, rgba(45,79,114,0) 0%, rgba(45,79,114,1) 15%, rgba(45,79,114,1) 85%, rgba(45,79,114,0) 100%); font-family: YakuHanMP, 'EB Garamond', 'Cormorant Garamond', 'Noto Serif JP', serif; font-weight: 400; padding: 5px 0; }
#main .section .section-header .txt-body .copy{ color: inherit; font-size: 34px; line-height: 1.5; margin-top: 50px; }
#main .section .section-header .txt-body .txt{ color: inherit; font-size: 20px; line-height: 2.4; margin-top: 20px; }
#main .section .section-content{ padding: 80px 5% 0; }
#main .section01 .section-content .train-feature{ display: flex; justify-content: space-between; max-width: 1144px; margin: 0 auto; }
#main .section01 .section-content .train-feature .item{ width: 47.6399%; }
#main .section01 .section-content .train-feature .item .station{ font-size: 26px; line-height: 1.5; color: #2d4f72; }
#main .section01 .section-content .train-feature .item .station .marker{ font-size: 140%; line-height: 1; }
#main .section01 .section-content .train-feature .item .photo{ margin-top: 20px; }
#main .section01 .section-content .train-feature .item .txt{ font-size: 24px; line-height: 1.5; margin-top: 20px; }
#main .section01 .section-content .train-feature .item .distance{ font-size: 17px; line-height: 1.5; }
#main .section01 .section-content .train-feature .item .distance .s-size{ font-size: 82%; }
#main .section01 .section-content .train-route{ max-width: 1178px; margin: 80px auto 0; }
#main .section01 .section-content .train-about{ max-width: 1270px; margin: 80px auto 0; }
#main .section01 .section-content .train-about .copy{ font-size: 34px; line-height: 1.3; color: #2d4f72; text-align: center; font-weight: 600; }
#main .section01 .section-content .train-about .copy .marker{ font-size: 140%; line-height: 1; }
#main .section01 .section-content .train-about .list-item{ margin-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; }
#main .section01 .section-content .train-about .list-item .item{ width: 31.4961%; text-align: center; }
#main .section01 .section-content .train-about .list-item .item:nth-child(n+4){ margin-top: 50px; }
#main .section01 .section-content .train-about .list-item .item .name{ font-size: 21px; line-height: 1.5; border-bottom: 1px solid #757575; padding: 10px 0; margin-bottom: 10px; }
#main .section01 .section-content .train-about .list-item .item .min{ font-size: 20px; line-height: 1.5; }
#main .section01 .section-content .train-about .list-item .item .min .inner{ display: inline-block; }
#main .section01 .section-content .train-about .list-item .item .min .num{ font-size: 150%; line-height: 1; color: #3c6f79; }
#main .section01 .section-content .train-note{ max-width: 1270px; margin: 120px auto 0; border: 1px solid #2d4f72; position: relative; box-sizing: border-box; padding: 70px 20px 20px; }
#main .section01 .section-content .train-note .head-body{ position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); background-color: #ffffff; text-align: center; padding: 0 15px; }
#main .section01 .section-content .train-note .head-body .sub{ font-size: 28px; line-height: 1.3; white-space: nowrap; }
#main .section01 .section-content .train-note .head-body .head{ font-size: 45px; line-height: 1.2; color: #2d4f72; font-weight: 600; white-space: nowrap; }
#main .section01 .section-content .train-note .split-view{ display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; }
#main .section01 .section-content .train-note .split-view .photo-body{ flex: 1; }
#main .section01 .section-content .train-note .split-view .photo-body .photo:nth-child(n+2){ margin-top: 20px; }
#main .section01 .section-content .train-note .split-view .txt-body{ width: 420px; margin-right: 20px; }
#main .section01 .section-content .train-note .split-view .txt-body .name{ font-size: 34px; line-height: 1.5; color: #2d4f72; font-weight: 600; }
#main .section01 .section-content .train-note .split-view .txt-body .distance{ font-size: 18px; line-height: 1.7; }
#main .section01 .section-content .train-note .split-view .txt-body .copy{ font-size: 25px; line-height: 1.32; border-top: 1px solid #2d4f72; padding-top: 10px; margin-top: 10px; }
#main .section01 .section-content .train-note .split-view .txt-body .txt{ font-size: 18px; line-height: 1.7; margin-top: 30px; }
#main .section01 .section-content .train-note .split-view .txt-body .list-item{ margin-top: 30px; }
#main .section01 .section-content .train-note .split-view .txt-body .list-item .item{ background-color: #2d4f72; text-align: center; }
#main .section01 .section-content .train-note .split-view .txt-body .list-item .item:nth-child(n+2){ margin-top: 10px; }
#main .section01 .section-content .train-note .split-view .txt-body .list-item .item img{ max-width: 410px; }
#main .section01 .section-content .train-note .split-view .txt-body .caption{ font-size: 14px; line-height: 1.7; margin-top: 20px; }
#main .section02 .section-content .bus-about{ max-width: 1210px; margin: 0 auto; border: 1px solid #2d4f72; position: relative; box-sizing: border-box; padding: 30px; border-radius: 10px; }
#main .section02 .section-content .bus-about .split-view{ display: flex; justify-content: space-between; }
#main .section02 .section-content .bus-about .split-view .item01{ width: 50.4355%; position: relative; }
#main .section02 .section-content .bus-about .split-view .item02{ width: 46.9512%; }
#main .section02 .section-content .bus-about .split-view .item .icon-body{ display: flex; justify-content: flex-start; height: 102px; padding-bottom: 38px; box-sizing: content-box; }
#main .section02 .section-content .bus-about .split-view .item .icon-body .icon{ width: 102px; margin-right: 20px; }
#main .section02 .section-content .bus-about .split-view .item .photo{ margin-left: 122px; margin-top: 20px; }
#main .section02 .section-content .bus-about .split-view .item .txt .block{ display: block; }
#main .section02 .section-content .bus-about .split-view .item01 .txt{ font-size: 27px; line-height: 1.5; }
#main .section02 .section-content .bus-about .split-view .item01 .txt .line{ font-size: 63%;  }
#main .section02 .section-content .bus-about .split-view .item01 .txt .tail{ font-size: 80%; }
#main .section02 .section-content .bus-about .split-view .item01 .txt .s-size{ font-size: 66%; }
#main .section02 .section-content .bus-about .split-view .item01 .txt .walk{ position: relative; }
#main .section02 .section-content .bus-about .split-view .item01 .txt .num{ color: #2d4f72; }
#main .section02 .section-content .bus-about .split-view .item01 .txt .num .marker{ font-size: 194%; line-height: 1; color: inherit; }
#main .section02 .section-content .bus-about .split-view .item01 .txt .walk .distance{ position: absolute; left: 0; top: 100%; white-space: nowrap; font-size: 59%; }
#main .section02 .section-content .bus-about .split-view .item01 .arrow{ position: absolute; left: 100%; bottom: 0; width: 109px; margin: 0 0 120px 20px; }
#main .section02 .section-content .bus-about .split-view .item02 .icon-body{ align-items: center; }
#main .section02 .section-content .bus-about .split-view .item02 .txt{ font-size: 33px; line-height: 1.5; }
#main .section02 .section-content .bus-about .split-view .item02 .txt .line{ font-size: 51%;  }
#main .section02 .section-content .bus-about .split-view .item02 .txt .tail{ font-size: 80%; }
#main .section02 .section-content .bus-about .split-view .item02 .txt .s-size{ font-size: 66%; }
#main .section02 .section-content .bus-about .split-view .item02 .txt .num{ color: #2d4f72; }
#main .section02 .section-content .bus-about .split-view .item02 .txt .marker{ font-size: 159%; line-height: 1; color: inherit; }
#main .section03 .view img{ width: 100%; height: auto; }
#main .section03 .section-content .car-route{ max-width: 1081px; margin: 0 auto; }
#main .section03 .list-item{ max-width: 1270px; margin: 80px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; }
#main .section03 .list-item .item{ width: 31.4961%; text-align: center; }
#main .section03 .list-item .item:nth-child(n+4){ margin-top: 50px; }
#main .section03 .list-item .item .name{ font-size: 21px; line-height: 1.5; border-bottom: 1px solid #757575; padding: 10px 0; margin-bottom: 10px; }
#main .section03 .list-item .item .name .word{ display: inline-block; }
#main .section03 .list-item .item .min{ font-size: 20px; line-height: 1.5; }
#main .section03 .list-item .item .min .inner{ display: inline-block; }
#main .section03 .list-item .item .min .num{ font-size: 150%; line-height: 1; color: #3c6f79; }
#main .section03 .list-item .item .min .num .s-size{ font-size: 60%; color: inherit; }


@media screen and (max-width: 1360px) {
	#main .section02 .section-content .bus-about .split-view .item .icon-body{ height: 7.5vw; padding-bottom: 2.7941vw; }
	#main .section02 .section-content .bus-about .split-view .item .icon-body .icon{ width: 7.5vw; margin-right: 1.4705vw; }
	#main .section02 .section-content .bus-about .split-view .item .photo{ margin-left: 8.9705vw; margin-top: 1.4705vw; }
	#main .section02 .section-content .bus-about .split-view .item01 .txt{ font-size: 1.9852vw; }
	#main .section02 .section-content .bus-about .split-view .item01 .arrow{ width: 8.0147vw; margin: 0 0 8.8235vw 1.4705vw; }
	#main .section02 .section-content .bus-about .split-view .item02 .txt{ font-size: 2.4264vw; }
}
@media screen and (max-width: 1023px) {
	#main .section01 .section-content .train-about .list-item .item{ width: 48%; }
	#main .section01 .section-content .train-about .list-item .item:nth-child(n+3){ margin-top: 50px; }
	#main .section01 .section-content .train-note{ padding: 70px 5% 5%; }
	#main .section01 .section-content .train-note .head-body .sub{ font-size: 24px; }
	#main .section01 .section-content .train-note .head-body .head{ font-size: 40px; }
	#main .section01 .section-content .train-note .split-view{ display: block; }
	#main .section01 .section-content .train-note .split-view .photo-body{ display: flex; justify-content: space-between; }
	#main .section01 .section-content .train-note .split-view .photo-body .photo{ width: 55%; }
	#main .section01 .section-content .train-note .split-view .photo-body .photo:nth-child(n+2){ margin-top: 0; width: 42%; }
	#main .section01 .section-content .train-note .split-view .photo-body .photo img{ width: 100%; height: auto; }
	#main .section01 .section-content .train-note .split-view .txt-body{ width: 100%; margin: 20px 0 0; }
	#main .section02 .section-content .bus-about .split-view{ display: block; }
	#main .section02 .section-content .bus-about .split-view .item{ width: 100%; }
	#main .section02 .section-content .bus-about .split-view .item02{ margin-top: 50px; }
	#main .section02 .section-content .bus-about .split-view .item .icon-body{ height: auto; padding-bottom: 10px; align-items: center; }
	#main .section02 .section-content .bus-about .split-view .item .icon-body .icon{ width: 102px; margin-right: 10px; }
	#main .section02 .section-content .bus-about .split-view .item .photo{ margin-left: 112px; margin-top: 0; }
	#main .section02 .section-content .bus-about .split-view .item .txt .block{ display: inline-block; }
	#main .section02 .section-content .bus-about .split-view .item .txt{ font-size: 27px; }
	#main .section02 .section-content .bus-about .split-view .item .txt .line{ display: block; }
	#main .section02 .section-content .bus-about .split-view .item01 .arrow{ position: absolute; left: 0; bottom: 0; width: 109px; margin: 0 0 0 30px; transform: rotate(90deg) translateX(-100%); transform-origin: 0 bottom; }
	#main .section02 .section-content .bus-about .split-view .item01 .photo{ margin-top: 20px; }
	#main .section03 .list-item .item{ width: 48%; }
	#main .section03 .list-item .item:nth-child(n+3){ margin-top: 50px; }
}

@media screen and (max-width: 768px) {
	#main .section01~.section{ margin-top: 15%; }
	#main .section .section-header .txt-body{ padding: 10% 5%; }
	#main .section .section-header .txt-body .en{ font-size: 24px; }
	#main .section .section-header .txt-body .copy{ font-size: 28px; margin-top: 20px; }
	#main .section .section-header .txt-body .txt{ font-size: 14px; margin-top: 10px; }
	#main .section .section-content{ padding: 7% 5% 0; }
	#main .section01 .section-content .train-feature{ display: block; }
	#main .section01 .section-content .train-feature .item{ width: 100%; }
	#main .section01 .section-content .train-feature .item~.item{ margin-top: 7%; }
	#main .section01 .section-content .train-feature .item .station{ font-size: 20px; }
	#main .section01 .section-content .train-feature .item .photo{ margin-top: 10px; }
	#main .section01 .section-content .train-feature .item .photo img{ width: 100%; }
	#main .section01 .section-content .train-feature .item .txt{ font-size: 18px; margin-top: 10px; }
	#main .section01 .section-content .train-feature .item .distance{ font-size: 14px; }
	#main .section01 .section-content .train-route{ margin: 10% auto 0; }
	#main .section01 .section-content .train-about{ margin: 10% auto 0; }
	#main .section01 .section-content .train-about .copy{ font-size: 24px; }
	#main .section01 .section-content .train-about .list-item{ margin-top: 5%; }
	#main .section01 .section-content .train-about .list-item .item:nth-child(n+3){ margin-top: 7%; }
	#main .section01 .section-content .train-about .list-item .item .name{ font-size: 16px; padding: 5px 0; margin-bottom: 5px; }
	#main .section01 .section-content .train-about .list-item .item .min{ font-size: 16px; line-height: 1.5; }
	#main .section01 .section-content .train-note{ margin: 10% auto 0; padding: 5%; }
	#main .section01 .section-content .train-note .head-body{ position: relative; left: 0; transform: none; background-color: transparent; padding: 0; }
	#main .section01 .section-content .train-note .head-body .sub{ font-size: 18px; white-space: normal; }
	#main .section01 .section-content .train-note .head-body .head{ font-size: 28px; white-space: normal; }
	#main .section01 .section-content .train-note .split-view .photo-body{ display: block; margin-top: 10px; }
	#main .section01 .section-content .train-note .split-view .photo-body .photo{ width: 100%; }
	#main .section01 .section-content .train-note .split-view .photo-body .photo:nth-child(n+2){ margin-top: 10px; width: 100%; }
	#main .section01 .section-content .train-note .split-view .txt-body .name{ font-size: 28px; }
	#main .section01 .section-content .train-note .split-view .txt-body .distance{ font-size: 14px; }
	#main .section01 .section-content .train-note .split-view .txt-body .copy{ font-size: 18px; }
	#main .section01 .section-content .train-note .split-view .txt-body .txt{ font-size: 14px; margin-top: 10px; }
	#main .section01 .section-content .train-note .split-view .txt-body .list-item{ margin-top: 10px; }
	#main .section01 .section-content .train-note .split-view .txt-body .list-item .item:nth-child(n+2){ margin-top: 5px; }
	#main .section01 .section-content .train-note .split-view .txt-body .list-item .item img{ max-width: 410px; width: 70%; }
	#main .section01 .section-content .train-note .split-view .txt-body .caption{ font-size: 12px; margin-top: 10px; }
	#main .section02 .section-content .bus-about{ padding: 5%;  }
	#main .section02 .section-content .bus-about .split-view .item02{ margin-top: 10%; }
	#main .section02 .section-content .bus-about .split-view .item .icon-body .icon{ width: 20%; margin-right: 10px; }
	#main .section02 .section-content .bus-about .split-view .item .photo{ margin-left: 20%; padding-left: 10px; }
	#main .section02 .section-content .bus-about .split-view .item .txt{ flex: 1; font-size: 20px; }
	#main .section02 .section-content .bus-about .split-view .item .txt .line{ display: block; }
	#main .section02 .section-content .bus-about .split-view .item01 .arrow{ width: 20%; margin: 0 0 0 7%; }
	#main .section02 .section-content .bus-about .split-view .item01 .photo{ margin-top: 20px; }
	#main .section03 .list-item{ margin-top: 5%; }
	#main .section03 .list-item .item:nth-child(n+3){ margin-top: 7%; }
	#main .section03 .list-item .item .name{ font-size: 16px; padding: 5px 0; margin-bottom: 5px; }
	#main .section03 .list-item .item .min{ font-size: 16px; line-height: 1.5; }
}