@charset "utf-8";
/* =======================================================================================
	COMMON
======================================================================================= */


/* =======================================================================================
	PAGE 
======================================================================================= */
/* ------------------------------------------------------------------------
 trainRouteSection
------------------------------------------------------------------------ */
	.routePhContWrap{
	}

@media screen and (min-width: 1000.02px) {
	.trainRouteSection .captionWrap{
		width: 85.5%;
		margin-right: 0;
		margin-left: auto;
		padding-top: 1em;
	}
	.routePhContWrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.routePhContWrap .routePhTtl{
		width: 14.5%;
	}
	.routePhContWrap .routePhTtl span{
		writing-mode: vertical-rl;
		display: block;
		width: 75%;
		margin: 0 auto;
		letter-spacing: 0.15em;
	}
	.routePhContWrap .routePhBox{
		width: 85.5%;
	}
}
@media screen and (max-width: 1000px) {
	.trainRouteSection .captionWrap{
		padding: 1em;
		width: 100%;
	}
	.routePhContWrap .routePhTtl span{
		text-align: left;
		padding: 0 1em;
	}
}

/* routePhBox
-----------------------------------------*/
.routePhBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.routePhBox > *{
	width: 24.5%;
}
@media screen and (max-width: 736px) { /*{SP}*/
	.routePhBox > *{
		width: 49.75%;
		margin-bottom: .5%;
	}
	.routePhBox > * img {
    width: 100%;
    height: calc(94vw * 0.5);
    object-fit: cover;
    object-position: 50% 100%;
  }
}

/*phItem*/
	.routePhContWrap .routePhBox .phItem {
		position: relative;
	}
	.routePhContWrap .routePhBox .phItem .txtBox {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
	}
	.routePhContWrap .routePhBox .picBox {
		position: relative;
	}
	.routePhContWrap .txtBox .nameElement {
		text-align: center;
		--M-fluidFontSize-max-fontsize: 30;
		--M-fluidFontSize-min-fontsize: 28;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 1200;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		font-family: var(--site-font_family-en_1);
		color: rgba(255,255,255,1);
		letter-spacing: 0.1em;
		line-height: 1;
	}
	.routePhContWrap .txtBox .timeElement {
		margin-top:1em;
		text-align: center;
		font-family: var(--site-font_family-en_1);
		color: rgba(255,255,255,1);
		letter-spacing: 0;
		font-style: italic;
	}
	.routePhContWrap .txtBox .timeElement .minNum {
		margin-right: .05em;
		--M-fluidFontSize-max-fontsize: 60;
		--M-fluidFontSize-min-fontsize: 46;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 1200;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		font-family: var(--site-font_family-en);
		line-height: 1;
	}
	.routePhContWrap .txtBox .timeElement .min {
		margin-right: .1em;
		--M-fluidFontSize-max-fontsize: 24;
		--M-fluidFontSize-min-fontsize: 22;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 1200;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
	}
	
@media screen and (max-width: 1200px) { /*{belowTB}*/
	.routePhContWrap .txtBox .nameElement {
		--M-fluidFontSize-max-fontsize: 28;
		--M-fluidFontSize-min-fontsize: 22;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 736;
	}
	.routePhContWrap .txtBox .timeElement .minNum {
		--M-fluidFontSize-max-fontsize: 46;
		--M-fluidFontSize-min-fontsize: 36;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 736;
	}
	.routePhContWrap .txtBox .timeElement .min {
		margin-right: .1em;
		--M-fluidFontSize-max-fontsize: 22;
		--M-fluidFontSize-min-fontsize: 18;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 736;
	}
}
	
@media screen and (max-width: 736px) { /*{SP}*/
	.routePhContWrap .txtBox .nameElement {
		--M-fluidFontSize-max-fontsize: 28;
		--M-fluidFontSize-min-fontsize: 18;
		--M-fluidFontSize-max-viewport: 736;
		--M-fluidFontSize-min-viewport: 480;
	}
	.routePhWrap .txtBox .timeElement .minNum {
		--M-fluidFontSize-max-fontsize: 46;
		--M-fluidFontSize-min-fontsize: 32;
		--M-fluidFontSize-max-viewport: 736;
		--M-fluidFontSize-min-viewport: 480;
	}
	.routePhWrap .txtBox .timeElement .min {
		margin-right: .1em;
		--M-fluidFontSize-max-fontsize: 22;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 736;
		--M-fluidFontSize-min-viewport: 480;
	}
}



/* ------------------------------------------------------------------------
 startSection
------------------------------------------------------------------------ */
	.startSection{
		padding: var(--site-marpad-XXL) 0 0;
	}
/* startMainWrap
-----------------------------------------*/
	.startMainWrap {
	}
	.startMainWrap .picBox {
	}
	.startMainWrap .txtBox {
		background: url("../images/share/bg_bk.jpg") top center / 100% repeat-y;
		color: rgba(var(--site-themeColor-base_text-reverse), 1); 
		text-align: center; 
		padding: clamp(30px, (30 / 1000 * 100vw), 50px) ;
	}

@media screen and (max-width: 736px) { /*{SP}*/
	.startMainWrap .picBox img{
		width: 100%;
		object-fit: cover;
		aspect-ratio: 3 / 1;
		object-position: 60% 100%;
	}
	.startMainWrap .txtBox {
		width: 100%;
		padding-top:var(--site-marpad-L);
		padding-left: calc(((100% - var(--site-sizeContentWide-M))/ 2));
	}
}



/* oedoRouteWrap
------------------------------------------------------*/
@media screen and (max-width: 736px) { /*{SP}*/
	.oedoRouteWrap {

	}
}

/* oedoTimeWrap
------------------------------------------------------*/
	.oedoTimeWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.oedoTimeWrap .txtBox {
		width: 34.92%;
		text-align: center;
	}
	.oedoTimeWrap .txtBox .station {
		padding-bottom:0.5em;
		margin-bottom:0.5em;
		font-size:1.6em;
		line-height: 1;
		border-bottom: 1px solid #555;
	}
	.oedoTimeWrap .txtBox .time {
		font-size:1.2em;
	}
	.oedoTimeWrap .txtBox .start {
		padding: 0.5em 0.3em 0.8em;
		font-size:1.2em;
		line-height: 1;
		color:#fff;
		background: #ab194c;
	}
	.oedoTimeWrap .txtBox .start .num {
		font-size:2em;
		margin-left:0.1em;
	}
	.oedoTimeWrap .picBox {
		width: 60.31%;
	}

@media screen and (max-width: 736px) { /*{SP}*/
	.oedoTimeWrap {
		flex-direction: column-reverse;
	}
	.oedoTimeWrap .txtBox {
		width: 100%;
		margin-top:1em;
	}
	.oedoTimeWrap .picBox {
		width: 100%;
	}
}



/* oedoMeritWrap
------------------------------------------------------*/
	.oedoMeritWrap .oedoMeritBg {
		background:rgba(var(--site-themeColor-base), .05);
		padding: clamp(60px, (60 / 1000 * 100vw), 80px) 0
	}
	.oedoMeritWrap .oedoMeritBg:nth-child(2) {
		background: none;
	}
	.oedoMeritWrap .oedoMeritRouteWrap{
		width: 100%!important;
		display: block;
	}

	/* txtBox */
	.oedoMeritWrap .oedoMeritBox .txtBox .title {
		padding-bottom:1.5em;
		line-height: 1;
	}
	.oedoMeritWrap .oedoMeritBox .txtBox .title .num {
		font-size:6rem;
		font-family: var(--site-font_family-en);
		color: rgba(var(--site-themeColor-accent_01), 1); 
		line-height: .8;
		margin-bottom: 0.2em;
	}
	.oedoMeritWrap .oedoMeritBox .txtBox .title .num .sTxt {
		font-size:1.6rem;
	}
	.oedoMeritWrap .oedoMeritBox .txtBox .title .ja {
		font-size:3.6rem;
	}
	.oedoMeritWrap .oedoMeritBox .txtBox .ttl {
		font-size:1.3em;
		margin-bottom:0.5em;
	}
@media screen and (min-width: 736.02px) { 
	.oedoMeritWrap .oedoMeritBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-end;
	}
	.oedoMeritWrap .oedoMeritBox > * {
		width: 47.61%;
	}
	.oedoMeritWrap .oedoMeritBg:nth-child(2) .oedoMeritBox{
		flex-direction: row-reverse;
	}
}

@media screen and (max-width: 1200px) { /*{belowTB}*/
	.oedoMeritWrap .oedoMeritBox .txtBox .title .num {
		--M-fluidFontSize-max-fontsize: 50;
		--M-fluidFontSize-min-fontsize: 40;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 736;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
	}
	.oedoMeritWrap .oedoMeritBox .txtBox .title .ja {
		--M-fluidFontSize-max-fontsize: 36;
		--M-fluidFontSize-min-fontsize: 26;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 736;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
	}
}

@media screen and (max-width: 736px) { /*{SP}*/
	.oedoMeritWrap .oedoMeritBox:not(:first-of-type) {
		margin-top:clamp(40px, (40 / 480 * 100vw), 60px);
		padding-top:clamp(40px, (40 / 480 * 100vw), 60px);
	}
	.oedoMeritWrap .oedoMeritBox .picBox {
		margin-top:25px;
	}
	.oedoMeritWrap .oedoMeritBox .txtBox .title {
		padding-bottom:1em;
	}
	.oedoMeritWrap .oedoMeritBox .txtBox .title .num{
		display: inline-block;
		margin-right: .5em;
		margin-bottom: 0;
		border-right: 1px solid #a3978b;
		padding-right: .4em;
	}
}






/* ------------------------------------------------------------------------
carAccSection
------------------------------------------------------------------------ */
	.carAccIntroBox{
		background: url("../images/share/bg_bk.jpg") top center / 100% repeat-y;
		color: rgba(var(--site-themeColor-base_text-reverse), 1);
	}
	.carAccIntroBox .txtBox{
		padding: clamp(30px, (30 / 1000 * 100vw), 50px);
	}

@media screen and (max-width: 736px) { /*{SP}*/
	.carAccSection .mainPic img {
		width: 100%;
		object-fit: cover;
		aspect-ratio: 3 / 1;
		object-position: 10% 100%;
	}
}

/* figWrap
-----------------------------------------*/
	.carAccSection .figWrap {
	}















/* highwaySection
-----------------------------------------*/
/*highwayWrap
---------------------*/
	.highwaySection .highwayWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
	}
	.highwaySection .highwayWrap .txtBox {
		width: 38%;
	}
	.highwaySection .highwayWrap .picBox {
		width: 56%;
	}

@media screen and (max-width: 1050px) { /*{belowTBs}*/

	.highwaySection .highwayWrap .txtBox {
		width: 65%;
	}
	.highwaySection .highwayWrap .picBox {
		margin-top:var(--site-marpad-M);
		text-align: center;
		width: 100%;
		max-width:600px;
		margin-left:auto;
		margin-right:auto;
	}
}
@media screen and (max-width: 736px) { /*{SP}*/
	.highwaySection .highwayWrap .txtBox {
		width: 100%;
	}
}

/*icWrap
---------------------*/
	.highwaySection .icWrap.generalColBox {
		--default-generalColBox-margin-t:	0px;
		--default-generalColBox-margin-lr:	0px;
		/*align-items: center;*/
		background: #373b3c;
	}
	.highwaySection .icWrap.generalColBox .txtBox {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--contentsUsePadding);
	}
	.highwaySection .icWrap.generalColBox .txtBox dd {
		border:0 solid rgba(var(--site-lineColor-accent), 1);
		border-width:0 0 1px;
		padding-bottom:0.5em;
		margin-top:0.8em;
	}
	
	
@media screen and (max-width: 1050px) { /*{belowTBs}*/
	.highwaySection .icWrap.generalColBox .picBox p {
		width:100%;
		height:100%;
	}
	.highwaySection .icWrap.generalColBox .picBox p img {
		object-fit: cover;
		height:100%;
		object-position:right bottom;
	}
}	
@media screen and (max-width: 900px) {
	.highwaySection .icWrap.generalColBox .txtBox .distance{
		display: block;
	}
}	
@media screen and (max-width: 736px) { /*{SP}*/
	.highwaySection .icWrap.generalColBox {
		flex-direction: column-reverse
	}
	.highwaySection .icWrap.generalColBox .txtBox .distance{
		display: inline-block;
	}
}
@media screen and (max-width: 480px) { /*{SPs}*/
	.highwaySection .icWrap.generalColBox .picBox p img {
		width: 100%;
		aspect-ratio: 630 / 400;
	}
	
	
	

}