@charset "utf-8";

/* =======================================================================================
	COMMON
======================================================================================= */

	.pege_other_layout{
		position: relative;
	}
	.pege_other_layout::after{
		content: "";
		position: absolute;
		z-index: -1;
		background: var(--site-pattern-lightGray);
		width: 100%;
		height: 56%;
		bottom: 0;
	}
@media screen and (max-width: 900px) {
	.pege_other_layout::after{
		height: 50%;
	}
}
@media screen and (max-width: 600px) {
	.pege_other_layout::after{
		height: 45%;
	}
}


/*--------------------------
	スワイプ 
--------------------------- */
.routeMapBox .js_swipeMe_active .js_swipeMeInnerBox,
.trainrouteMapBox .js_swipeMe_active .js_swipeMeInnerBox {
  /* スクロール方向を右から左に設定 */
  direction: rtl; /* */
}
.trainrouteMapBox .js_swipeMe_active .js_swipeMeInnerBoxOverlay, .trainrouteMapBox .js_swipeMe_active .js_swipeMeInnerBox img {
  width: 250%;
	padding: 10px 20px 10px 5px;
}


/* =======================================================================================
	PAGE
======================================================================================= */

/* ---------------------------------------------------------------
position_other_layout
--------------------------------------------------------------- */

/*routeMapCont
-------------------------------------*/
	.routeMapCont {
		max-width: 1400px;
		margin: var(--site-marpad-M) auto 0;
		width: 94%;
	}
@media screen and (max-width: 600px) {
	.routeMapCont {
		margin: var(--site-marpad-S) auto 0;
	}
}


/*stationPhotos
-------------------------------------*/
	.stationPhotos ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.stationPhotos ul li{
		width: 16.5%;
		/*margin-bottom: 1.25%;*/
		position: relative;
	}
/*	.stationPhotos ul li .picBox{
		position: relative;
	}*/
	.stationPhotos ul li .txtBox {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		z-index: 1;
		color:#fff;
		display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /*height: 100vh; *//* 親要素の高さを確保 */
	}
	.stationPhotos ul li .txtBox .name {
		display: inline-block;
		writing-mode: vertical-rl;
		text-align: center;
		--M-fluidFontSize-max-fontsize: 30;
		--M-fluidFontSize-min-fontsize: 18;
		--M-fluidFontSize-max-viewport: 1400;
		--M-fluidFontSize-min-viewport: 900;
		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-serif);
		text-shadow: 1px 1px 3px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.64);

	}
@media screen and (max-width: 900px) {
	.stationPhotos ul li{
		width: 32.5%;
		margin-bottom: 1.25%;
	}
	.stationPhotos ul li .txtBox .name {
		--M-fluidFontSize-max-fontsize: 22;
		--M-fluidFontSize-min-fontsize: 15;
		--M-fluidFontSize-max-viewport: 900;
		--M-fluidFontSize-min-viewport: 600;
	}
	.stationPhotos ul li .picBox img{
		width: 100%;
		height: calc(40vw * 0.5);
		object-fit: cover;
		object-position: 100% 0;
	}
}
@media screen and (max-width: 600px) {
	.stationPhotos{
		width: 100%!important;
	}
/*	.stationPhotos ul li{
		width: 49.5%;
	}*/
	.stationPhotos ul li .txtBox .name {
		--M-fluidFontSize-max-fontsize: 15;
		--M-fluidFontSize-min-fontsize: 14;
		--M-fluidFontSize-max-viewport: 600;
		--M-fluidFontSize-min-viewport: 480;
	}
	.stationPhotos ul li .picBox img{
		height: calc(50vw * 0.5);

	}
/*	.stationPhotos ul li .txtBox .name {
		writing-mode: unset !important;
	}*/
	
}





/* ---------------------------------------------------------------
access_importantSection
--------------------------------------------------------------- */

/* 共通
--------------------*/
.access_importantSection [class*="station-"] {
	padding: var(--site-marpad-XL) 0;
}

.access_importantSection [class*="station-"] .picBox{
	position: relative;
}
.access_importantSection [class*="station-"] .txtBox .hTxt{
	text-align: left!important;
	margin-bottom: 0;
}
.access_importantSection [class*="station-"] .txtBox .hTxt em{
	font-family: var(--site-font_family-en_1);
	--M-fluidFontSize-max-fontsize: 60;
	--M-fluidFontSize-min-fontsize: 40;
	--M-fluidFontSize-max-viewport: 1200;
	--M-fluidFontSize-min-viewport: 600;
	--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (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))), var(--M-fluidFontSize-max-fontsize) * .1rem );

	display: inline-block;
	min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
	line-height: 1;
	/*color: inherit;*/
	/*color: rgba(var(--site-variationColor-heading-light), 1);*/
	font-size: var(--M-fluidFontSize-fontSize);
	letter-spacing: .1em;
	padding: 0;
}
.access_importantSection [class*="station-"] .txtBox .txt{
	margin-top: 2em;
}


@media screen and (min-width: 900.02px)  {
	.access_importantSection [class*="station-"] .contbox{
	display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  align-items:flex-end;
	}
	.access_importantSection [class*="station-"]:nth-child(even) .contbox {
	  flex-direction: row-reverse;
	}
	.access_importantSection [class*="station-"] .contbox > *{
		width: 48%;
	}
}

@media screen and (min-width: 600.02px) and (max-width: 900px) {
	.access_importantSection [class*="station-"] .contbox{
		max-width: 640px;
		margin-right: auto;
		margin-left: 30px;
	}
	.access_importantSection [class*="station-"]:nth-child(even)  .contbox{
		margin-right: 30px;
		margin-left: auto;
	}
}
@media screen and (max-width: 900px) {
	.access_importantSection [class*="station-"] .txtBox{
		margin-top: 2em;
	}
}


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

}



/* ---------------------------------------------------------------
trainAccessSection
--------------------------------------------------------------- */
	.trainRoutelistWrap{
		margin-top:  var(--site-marpad-XL) ;
	}
	.trainRouteBox {
		display: flex;
		flex-wrap: wrap;
		gap: 35px 2.808988%;
	}
	.trainRouteBox li {
		flex: 0 0 31.460674%;
	}
	.trainRouteBox .routeMain {
		--M-fluidFontSize-max-fontsize: 15.4;
		--M-fluidFontSize-min-fontsize: 14;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 600;
		--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (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))), var(--M-fluidFontSize-max-fontsize) * .1rem );

		display: flex;
		flex-wrap: wrap;
		justify-content:center;
		align-items: baseline;
		min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
		line-height: 1.4;
		font-size: var(--M-fluidFontSize-fontSize);
		letter-spacing: .05em;
		padding-bottom: .4em;
		border-bottom: 1px dotted rgba(var(--site-themeColor-text_darkGray), 1);
	}
	.trainRouteBox .routeMain .station {
		font-size: 1.299em;
		margin-right: 0.5em;
	}
	.trainRouteBox .routeMain .station .nameKakko {}
	.trainRouteBox .routeMain .time {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: baseline;
	}
	.trainRouteBox .routeMain .time .direct {}
	.trainRouteBox .routeMain .time .commuting {}
	.trainRouteBox .routeMain .time .commuting .num {
		line-height: .8;
		font-size: 2.597em;
		font-family: var(--site-font_family-en_1);
	}
	.trainRouteBox .routeMain .time .duringDay {
		font-size: 1.2rem;
	}
	.trainRouteBox .routeMain .time .duringDay .num {}
	.trainRouteBox .routeDetails {
		line-height: 1.4;
		font-size: 1.2rem;
		letter-spacing: normal;
		padding: .7em 0 .8em;
		text-align: center;
	}
	.trainRouteBox .routeDetails .duringDayDetail {}

@media screen and (max-width: 1200px) {
	.trainRouteWrap {
		max-width: 700px;
	}
	.trainRouteBox {
		display: flex;
		flex-wrap: wrap;
		gap: 30px 4%;
	}
	.trainRouteBox li {
		flex: 0 0 48%;
	}
}
@media screen and (min-width: 600.02px) and (max-width: 800px) {
	.trainRouteBox .routeMain .station {
		display: block;
		width: 100%;
		text-align: center;
		margin-right: 0;
	}
}
@media screen and (max-width: 600px) {
	.trainRoutelistWrap{
		margin-top:  var(--site-marpad-S) ;
	}
	.trainRouteBox {
		display: block;
	}
	.trainRouteBox li {
		width: 100%;
		padding: 4vw 2.5vw;
		background: rgba(255, 255, 255, .1);
	}
	.trainRouteBox li:nth-of-type(even) {
		background: rgba(var(--site-themeColor-text_darkGray), .05);
	}
	.trainRouteBox .routeMain {
		--M-fluidFontSize-max-fontsize: 17;
		--M-fluidFontSize-min-fontsize: 14;
		--M-fluidFontSize-max-viewport: 600;
		--M-fluidFontSize-min-viewport: 360;
	}
}



/* ---------------------------------------------------------------
airport_busSection
--------------------------------------------------------------- */
/*共通*/
.mainPicWrap{
	margin-bottom:var(--site-marpad-L);
	position: relative;
}


/* airport-bus-timeWrap
--------------------------------------*/
.airport-bus-timeWrap{
	padding: var(--site-marpad-M) 0;
}
.airport-bus-timeBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.airport-bus-timeBox dl{
	width: 45%;
	text-align: center;
}
.airport-bus-timeBox dl dt{
	background: rgba(var(--site-variationColor-blackish), 1);
	padding: 0.5em;
	color: rgba(var(--site-variationColor-whitish), 1);
	margin-bottom: 1em;
}
.airport-bus-timeBox dl dd{
	margin-bottom: 30px;
	position: relative;
}
.airport-bus-timeBox dl dd::after {
	content: "";
	width: 7px;
	height: 13px;
	position: absolute;
	background: url("../images/share/ico_arrow_down.svg") center center / contain no-repeat;
	left: 50%;
	bottom: -22px;
}
.airport-bus-timeBox dl dd:last-child::after {
      display: none;
    }
.airport-bus-timeBox small{
	width: 100%;
	display: block;
	margin-top: 1em;
}



/* ---------------------------------------------------------------
shuttle_busSection
--------------------------------------------------------------- */
	.bus-introductionBox{
		margin-top:var(--site-marpad-L); 
		font-family: var(--site-font_family-sans);
	}

	/*共通*/
	.bus-introductionBox dl:not(:last-child){
		margin-bottom: 3em;
	}
	.bus-introductionBox dt{
		color: #17356c;
		border-bottom: 1px solid #17356c;
		text-align: left!important;
		margin-bottom: .5em;
		font-weight: 500;
	}
	[class*="bustype_"] dd {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 900;
		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)
		);
	}
	[class*="bustype_"] dd .ttl{
		color: #fff;
		font-size: 1.7rem;
	}
	[class*="bustype_"] dd .txt{
		background:rgba(255,255,255,0.7);
		padding: 1em;
	}

	[class*="bustype_"]:not(.bustype_airport) dd [class*="no0"]{
		padding: 0.1em 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	[class*="bustype_"] dd [class*="no0"] em{
		color: #17356c;
		font-weight: 600;
	}
	[class*="bustype_"] dd [class*="no0"] .graytxt{
		color: #8e8e8e;
		font-size: 1.4rem;
	}
	[class*="bustype_"] dd	[class*="no0"] .dbcircle{
		display: flex;
		line-height: 1.5;
	}
	[class*="bustype_"] dd	[class*="no0"] .dbcircle::before{
		content: '◉';
		display: block;
		margin-right: 0.3em;
		color: #17356c;
	}

	[class*="bustype_"] dd	[class*="no0"] .ekirouteneme{
		line-height: 1.3;
	}

@media screen and (max-width: 900px) {
	[class*="bustype_"] dd [class*="no0"] .graytxt {
	  font-size: 1.3rem;
	}
}

/* bustype_keisei
---------------------------------------*/
	.bustype_keisei	dd{
		display: flex;
		flex-wrap: wrap;
	}
	.bustype_keisei dd .ttl{
		width: 20%;
		background:#17356c;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.7rem;
	}
	.bustype_keisei dd .txt{
		width: 80%;
	}
@media screen and (max-width: 1000px) {
	.bustype_keisei	dd{
		display: block;
	}
	.bustype_keisei	dd > *{
		width: 100%!important;
	}
	.bustype_keisei dd .ttl {
	  padding: 0.5em;
	}
}



/* bustype_toei
---------------------------------------*/
	.bustype_toei dd .txt{
	}


/* bustype_airport
---------------------------------------*/
	.bustype_airport dt{
		color: #633069;
		border-bottom-color: #633069!important;
	}
	.bustype_airport dd{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.bustype_airport dd .bustype{
		width: 48%;
	}
	.bustype_airport dd .bustype .busneme{
		background: #633069;
		color: #fff;
		padding: 0.5em;
		text-align: center;
	}
	.bustype_airport dd .bustype [class*="no0"] {
		background:rgba(255,255,255,0.7);
		padding: 1em;
		text-align: center;
	}
	.bustype_airport dd .bustype [class*="no0"] .dbcircle {
		justify-content: center;
		color: #633069;
		font-weight: 600;
	}
	.bustype_airport dd .bustype [class*="no0"] .dbcircle::before{
		color: #633069;
	}
	.bustype_airport dd .bustype [class*="no0"] .stxt {
		font-size: 1.3rem;
		line-height: 1.6;
		display: block;
		margin-top: 0.5em;
	}

@media screen and (max-width: 800px) {
	.bustype_airport dd{
		display: block;
	}
	.bustype_airport dd > *{
		width: 100%!important;
	}
	.bustype_airport dd .bustype:first-child{
		margin-bottom: 1em;
	}
}









@media screen and (max-width: 1390px) {}
@media screen and (max-width: 1200px) {}
@media screen and (min-width: 900.02px) and (max-width: 1200px) {}
@media screen and (max-width: 900px) {}
@media screen and (max-width: 600px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 359.08px) {}