@charset "utf-8";
/* =======================================================================================
	COMMON
======================================================================================= */
@media screen and (max-width: 736px) {
  .mainHeaderVisualWrap .pic img {
    margin-left: -29%;
  }
}
/* =======================================================================================
	PAGE 
======================================================================================= */

/*共通*/
/*picRouteWrap------------------*/
	.picRouteWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
	}
/*picRouteBox------------------*/
	.picRouteWrap .picRouteBox {
		width: 33.333%;
		position: relative;
	}

	@media screen and (max-width: 736px) { 
		.picRouteWrap .picRouteBox {
			width: 50%;
		}
		.picRouteWrap .picRouteBox:first-child {
			width: 100%;
		}
	}
	/*picBox------------------*/
	.picRouteWrap .picRouteBox .picBox {
		position: relative;
	}
	.picRouteWrap .picRouteBox .picBox .imgcapkeep {
		z-index: 3;
	}
	
	/*txtBox------------------*/
	.picRouteWrap .picRouteBox .txtBox {
		position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		z-index: 2;
	}
	.picRouteWrap .picRouteBox .name,
	.picRouteWrap .picRouteBox .time {
		text-align: center;
		font-family: var(--site-font_family-en_1);
		color: #fff;
	}
	/*name*/
	.picRouteWrap .picRouteBox .name {
		/*padding-top: clamp(20px, (25 / 1260 * 100vw), 25px);*/
		--M-fluidFontSize-max-fontsize: 32;
		--M-fluidFontSize-min-fontsize: 18;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 800;
		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)
		);
		line-height: 1;
		letter-spacing: 0.1em;
	}
	/*time*/
	.picRouteWrap .picRouteBox .time {
		padding-top:0.8em;
	}
	.picRouteWrap .picRouteBox .time .minNum {
		--M-fluidFontSize-max-fontsize: 45;
		--M-fluidFontSize-min-fontsize: 20;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 800;
		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)
		);
		line-height: 1;
	}
	.picRouteWrap .picRouteBox .time .min {
		display: inline-block;
		padding-left:0.1em;

		--M-fluidFontSize-max-fontsize: 25;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 800;
		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)
		);
		line-height: 1;
	}
	.picRouteWrap .picRouteBox .time .minSmall {
		display: inline-block;
		padding-left:0.3em;
		line-height: 1;
	}
@media screen and (max-width: 736px) {
	.picRouteWrap .picRouteBox {
		margin-top:1px;
	}
	.picRouteWrap .picRouteBox .picBox img {
		width: 100%;
		height: calc(94vw * 0.5);
		object-fit: cover;
		object-position: 50% 100%;
	}
	
	.picRouteWrap li:nth-of-type(2) .picBox img {
		object-position: 100% 30%;
	}
	.picRouteWrap li:nth-of-type(3) .picBox img {
		object-position: 100% 80%;
	}
	.picRouteWrap .picRouteBox .name {
		--M-fluidFontSize-max-fontsize: 20;
		--M-fluidFontSize-min-fontsize: 18;
		--M-fluidFontSize-max-viewport: 800;
		--M-fluidFontSize-min-viewport: 480;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
	}
	.picRouteWrap .picRouteBox .time .minNum {
		--M-fluidFontSize-max-fontsize: 30;
		--M-fluidFontSize-min-fontsize: 24;
		--M-fluidFontSize-max-viewport: 800;
		--M-fluidFontSize-min-viewport: 480;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
	}
	.picRouteWrap .picRouteBox .time .min {
		font-size: 1.4rem;
	}
	
}





/* ------------------------------------------------------------------------
trainAccSection
------------------------------------------------------------------------ */
/*inokashiraLineWrap
----------------------------------------------------------*/
	.inokashiraLineWrap .icon{
		margin: 0 auto 0.3em;
		display: block;
		text-align: center;
		max-width: 30px;
	}
	.inokashiraLineWrap .icon{
		margin: 0 auto 0.3em;
		display: block;
		text-align: center;
		max-width: 30px;
	}
	.inokashiraLineWrap .enHeading_S {
		color: #fff!important;
	}
	.inokashiraLineWrap .enHeading_S::after {
		display: none;
	}


/*inokashiraLineRoutemapBox------------------------*/
	.inokashiraLineRoutemapBox .routemapBox{
		margin-top:var(--site-marpad-XXS);
	}


/*inokashiratrainrouteCont------------------*/
	.inokashiratrainrouteCont .picRouteWrap .picRouteBox {
		width: 25%;
	}


@media screen and (min-width: 1050.02px) {
	/*name*/
	.inokashiratrainrouteCont .picRouteWrap .picRouteBox .name {
		/*padding-top: clamp(20px, (25 / 1260 * 100vw), 25px);*/
		--M-fluidFontSize-max-fontsize: 32;
		--M-fluidFontSize-min-fontsize: 22;
		--M-fluidFontSize-max-viewport: 1400;
		--M-fluidFontSize-min-viewport: 1050;
	}
	.inokashiratrainrouteCont .picRouteWrap .picRouteBox .time .minNum {
		--M-fluidFontSize-max-fontsize: 45;
		--M-fluidFontSize-min-fontsize: 40;
		--M-fluidFontSize-max-viewport: 1400;
		--M-fluidFontSize-min-viewport: 1050;
	}
	.inokashiratrainrouteCont .picRouteWrap .picRouteBox .time .min {
		--M-fluidFontSize-max-fontsize: 25;
		--M-fluidFontSize-min-fontsize: 20;
		--M-fluidFontSize-max-viewport: 1400;
		--M-fluidFontSize-min-viewport: 1050;
	}
}
@media screen and (min-width: 736.02px) and (max-width: 1050px) {
	.inokashiratrainrouteCont .picRouteWrap .picRouteBox .picBox img {
		height: calc(70vw * 0.5);
	}
	.inokashiratrainrouteCont .picRouteWrap .picRouteBox .name {
		--M-fluidFontSize-max-fontsize: 32;
		--M-fluidFontSize-min-fontsize: 26;
		--M-fluidFontSize-max-viewport: 1050;
		--M-fluidFontSize-min-viewport: 736;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
	}
	.inokashiratrainrouteCont .picRouteWrap .picRouteBox .time .minNum {
		--M-fluidFontSize-max-fontsize: 45;
		--M-fluidFontSize-min-fontsize: 40;
		--M-fluidFontSize-max-viewport: 1050;
		--M-fluidFontSize-min-viewport: 736;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
	}

}
@media screen and (max-width: 1050px) { 
		.inokashiratrainrouteCont .picRouteWrap .picRouteBox {
			width: 50%;
		}
	.inokashiratrainrouteCont .picRouteWrap .picRouteBox {
		margin-top:0px;
	}


}


/*keioLineCont
----------------------------------------------------------*/
	.keioLineCont .keioLineMeritBox{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top:  var(--site-marpad-XS) ;
	}
	.keioLineCont .keioLineMeritBox .item{
		width: 49.8%;
	}
	.keioLineCont .keioLineMeritBox .item .picBox {
		position: relative;
		background:url("../images/share/texture_bg02.jpg") center center;
	}
	.keioLineCont .keioLineMeritBox .item .txtBox {
		display: block;
	}
	.keioLineCont .keioLineMeritBox .item .ttl {
		border: 0px solid rgba(var(--site-themeColor-accent_2), 1);
		border-width: 3px 0 1px;
		padding: 0.5em 0;
		margin-top: 0.5em;
		color: rgba(var(--site-themeColor-accent_2), 1);
		font-weight: 500;
	}
	.keioLineCont .keioLineMeritBox .item .ttl .stxt{
		font-size: 0.75em;
		 line-height: 1.2;
	}
	.keioLineCont .keioLineMeritBox .item .merit{
		width: 82%;
		margin-top: 2em;
		margin: clamp(20px, (20 / 1050 * 100vw), 40px) auto 0;
	}
	.keioLineCont .keioLineMeritBox .item .cap{
		display: block;
		width: 100%;
		margin-top: 0.5em;
		line-height: 1.6;
	}
@media screen and (max-width: 1050px) { 
	.keioLineCont .keioLineMeritBox .item .merit{
		width: 92%;
	}
}
	@media screen and (max-width: 736px) { 
	.keioLineCont .keioLineMeritBox{
		display: block;
	}
	.keioLineCont .keioLineMeritBox .item{
		width: 100%;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
	.keioLineCont .keioLineMeritBox .item:first-child{
		margin-bottom: 3em;
	}
	.keioLineCont .keioLineMeritBox .item .ttl {
		margin-top: 5px;
	}

}








/*accTrainWra
----------------------------------------------------------*/
	.accTrainWrap .trainrouteCont h4 .hTxt{
		text-align: left;
		margin-bottom: 0.5em;
	}



/* ------------------------------------------------------------------------
carAccSection
------------------------------------------------------------------------ */



/* ------------------------------------------------------------------------
taxiAccSection
------------------------------------------------------------------------ */

	.taxiFareBox {
		background-color: rgba(0,0,0,0.05);
		padding: clamp(40px, (40 / 736 * 100vw), 80px)  ;
	}
	.taxiFareBox .fareList {
		line-height: 1.4;
		font-size: 1.06667em;
	}
	.taxiFareBox .fareList .unit {
		text-align: center;
	}
	.taxiFareBox .fareList .station {
		border-bottom: 1px solid #000;
		padding-bottom: 0.5em;
	}
	.taxiFareBox .fareList .station .name {
		display: inline-block;
		font-size: 1.625em;
		letter-spacing: .2em; 
	}

	.taxiFareBox .fareList .fare .kakaku {
		font-size: 2.411em;
		letter-spacing: .03em; 
		font-family: var(--site-font_family-en_1);
	}
	.taxiFareBox .capUnit {
		display: block;
		margin-top: 3em;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}

@media screen and (max-width: 736px) {
		.taxiFareBox .fareList {
		font-size: 1em;
	}
}