@charset "utf-8";

/* =======================================================================================
	TEMPLATE
======================================================================================= */



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



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

/* areamapContainer
------------------------------------------------------------------------ */
	.areamapContainer {}

/* areamapBox
---------------------------------------------------- */
	.areamapBox {
		max-width: 1100px;
	}
	.areamapBox .pic {
		padding: 1em 0;
	}
@media screen and (max-width: 736px) {
	.areamapBox {
		width: 100%;
	}
	.areamapBox small.bltr {
		padding-left: .5em;
		padding-right: .5em;
	}
	
	/* ===== jsSwipeIt ===== */
	.areamapBox .jsSwipeIt .pic {
		padding: 1em;
	}
}


/* ------------------------------------------------------------------------
	trainAccWrap
------------------------------------------------------------------------ */
	.trainAccWrap {}

/* trainAccLayoutWrap
------------------------------------------------------------------------ */
	.trainAccLayoutWrap {
		display: flex;
		flex-wrap: wrap;
		gap: var(--site-marpad-XXXL) 0;
	}
@media screen and (max-width: 736px) {
	.trainAccLayoutWrap {
		gap: var(--site-marpad-M) 0;
	}
}

/* trainAreaPhWrap | 写真
---------------------------------------------------- */
	/* 共通設定
	----------------------- */
	.trainAreaPhDeco {
		flex-basis: 100%;
		position: relative;
		z-index: 0;
	}
	.trainAreaPhDeco::before {
		content: "";
		position: absolute;
		inset: 10% 0;
		z-index: -1;
		background: url("../images/share/bg_02.jpg") center center / 560px 420px repeat;
	}

	.trainAreaPhWrap {
		display: grid;
		grid-template: 
			"rowLarge rowLarge" auto
			"capWrap  rowSmall" auto /
			1fr calc(960 / 1600 * 100%);
		align-items: start;
		align-content: start;
		gap: min((170 / 1720 * 100vw), 170px) 0;
	}
	.trainAreaPhWrap .rowLarge {grid-area: rowLarge;}
	.trainAreaPhWrap .rowSmall {grid-area: rowSmall;}
	.trainAccCaptionPC {grid-area: capWrap;}

	.trainAreaPhWrap .row {
		width: 100%;
	}
	.trainAreaPhWrap .unit {
		position: relative;
	}
	.trainAreaPhWrap .unit .ph {
		width: 100%;
	}
	.trainAreaPhWrap .unit img {
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}
	.trainAreaPhWrap .unit .txtBox {
		line-height: 1;
		font-size: clamp(1.5rem, (25 / 1720 * 100vw), 2.5rem);
		letter-spacing: .1em;
	}
	.trainAreaPhWrap .unit .txtBox .en {
		display: flex;
		align-items: center;
		gap: 0 .5em;
		overflow-wrap: break-word; /* 長い英語対策 */
		font-family: var(--site-font_family-en_2);
		font-size: max(.9rem, .72em);
		letter-spacing: .07em;
	}
	.trainAreaPhWrap .unit .txtBox .en::after {
		content: "";
		flex: 0 0 2.5em;
		border-top: 1px solid currentColor;
	}
	.trainAreaPhWrap .unit .txtBox .nameBox {
		margin-top: .1em;
	}
	.trainAreaPhWrap .unit .txtBox .name {
		font-size: 1.36em;
	}
	.trainAreaPhWrap .unit .txtBox .minutes {
	}
	.trainAreaPhWrap .unit .txtBox .minutes .num {
		line-height: .9;
		color: rgba(var(--site-themeColor-accent_1), 1);
		font-family: var(--site-font_family-en_2);
		font-size: 2.16em;
	}
	.trainAreaPhWrap .unit .txtBox .minutes .subMinutes {
		display: inline-block;
		font-size: max(1rem, .8em);
	}
	/* 個別設定
	----------------------- */
	.trainAreaPhWrap .rowLarge {
		display: grid;
		grid-template-columns: calc(550 / 1600 * 100%) calc(550 / 1600 * 100%) 1fr;
		gap: 0 min((50 / 1600 * 100vw), 50px);
	}
	.trainAreaPhWrap :where(.rowLarge) .unit .ph {
		width: 100%;
		aspect-ratio: 550 / 680;
	}
	.trainAreaPhWrap :where(.rowLarge) .unit .txtBox {
		position: absolute;
		inset: 0 0 0 auto;
		height: fit-content;
		background: rgba(255, 255, 255, .9);
		margin-top: auto;
		margin-bottom: auto;
		padding: 1.3em 1.3em 1.3em 2em;
	}
	
	.trainAreaPhWrap .rowSmall {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		justify-content: end;
		gap: 0 min((30 / 1600 * 100vw), 30px);
	}
	.trainAreaPhWrap :where(.rowSmall) .unit .ph {
		width: 100%;
		aspect-ratio: 300 / 350;
	}
	.trainAreaPhWrap :where(.rowSmall) .unit .txtBox {
		margin-top: .4em;
	}
	
	.trainAccCaptionPC {
		align-self: center;
		margin-right: min((90 / 1600 * 100vw), 90px);
	}
@media screen and (max-width: 1200px) {
	.trainAreaPhWrap {
		grid-template: 
			"rowLarge rowLarge" auto
			".        rowSmall" auto /
			1fr 85%;
	}
	.trainAreaPhWrap .unit .txtBox {
		font-size: clamp(1.5rem, (27.5 / 1720 * 100vw), 2.75rem);
	}
	/* 個別設定
	----------------------- */
	.trainAreaPhWrap .rowLarge {
		grid-template-columns: calc(500 / 1200 * 100%) calc(500 / 1200 * 100%) 1fr;
		gap: 0 min((35 / 1200 * 100vw), 35px);
	}
	.trainAccCaptionSP {
		margin-top: calc((50 / 1200 * 100vw) * -1);	/* ちょっと詰めたい */
	}
}
@media screen and (max-width: 736px) {
	.trainAreaPhDeco::before {
		inset: 15% 0 8%;
	}

	.trainAreaPhWrap {
		display: block;
	}

	.trainAreaPhWrap .row {
		display: block;
	}
	.trainAreaPhWrap .unit {
		margin-top: 30px;
	}
	.trainAreaPhWrap .unit .ph {
	}
	.trainAreaPhWrap .unit .txtBox {
		font-size: clamp(1.8rem, (18 / 375 * 100vw), 2.7rem);
	}
	.trainAreaPhWrap .unit .txtBox .en {
		font-size: max(.9rem, .666667em);
	}
	.trainAreaPhWrap .unit .txtBox .name {
		font-size: 1.222222em;
	}
	.trainAreaPhWrap .unit .txtBox .minutes .num {
		font-size: 2.3em;
	}
	.trainAreaPhWrap .unit .txtBox .minutes .subMinutes {
		font-size: max(1rem, .777778em);
	}
	/* 個別設定
	----------------------- */
	.trainAreaPhWrap .rowLarge {
		/*display: grid;
		grid-template-columns: calc(550 / 1600 * 100%) calc(550 / 1600 * 100%) 1fr;
		gap: 0 min((50 / 1600 * 100vw), 50px);*/
	}
	.trainAreaPhWrap :where(.rowLarge) .unit {
		width: 70%;
	}
	.trainAreaPhWrap :where(.rowLarge) .unit .ph {
		aspect-ratio: 280 / 320;
	}
	.trainAreaPhWrap :where(.rowLarge) .unit .txtBox {
		padding: 1.3em 1.3em;
	}
	.trainAreaPhWrap :where(.rowLarge) .unit:nth-of-type(even) {
		margin-left: auto;
	}
	.trainAreaPhWrap :where(.rowLarge) .unit:nth-of-type(even) .txtBox {
		inset: 0 auto 0 0;
	}
	
	.trainAreaPhWrap :where(.rowSmall) .unit {
		display: grid;
		/*grid-template-columns: repeat(2, 1fr);*/
		grid-template-columns: 50% auto;
		justify-content: start;
		align-items: center;
	}
	.trainAreaPhWrap :where(.rowSmall) .unit .ph {
		width: 100%;
		aspect-ratio: 190 / 154;
	}
	.trainAreaPhWrap :where(.rowSmall) .unit .txtBox {
		margin-top: revert;
		padding: .2em max(1em, 5vw);
	}
	.trainAreaPhWrap :where(.rowSmall) .unit .txtBox .minutes {
		display: inline-flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 0px 0px;
	}
	.trainAreaPhWrap :where(.rowSmall) .unit .txtBox .minutes .subMinutes {
		text-align: right;
		margin-top: .25em;
	}
	.trainAreaPhWrap :where(.rowSmall) .unit:nth-of-type(even) {
		grid-template-columns: auto 50%;
		justify-content: end;
	}
	.trainAreaPhWrap :where(.rowSmall) .unit:nth-of-type(even) .txtBox {
		order: -1;
	}
	
	.trainAccCaptionSP {
		/*margin-top: -20px;*/	/* ちょっと詰めたい */
		margin-top: 0;			/* 詰めない */
	}
}

/* trainRouteMap01Box | 路線図
---------------------------------------------------- */
	.trainRouteMap01Box {
		order: -1;
		max-width: 1060px;
	}
@media screen and (max-width: 736px) {
	.trainRouteMap01Box {
		order: revert;
		width: 100%;
	}
	.trainRouteMap01Box small.bltr {
		padding-left: .5em;
		padding-right: .5em;
	}
	/* ===== jsSwipeIt ===== */
	.trainRouteMap01Box .jsSwipeIt .pic {
		padding: 1em 2em;
	}
}

/* trainAccCaption** | 注釈（PC用、SP用分かれています。）
---------------------------------------------------- */
	.trainAccCaptionPC {	display: block;}
	.trainAccCaptionSP {	display: none;}
@media screen and (max-width: 1200px) {
	.trainAccCaptionPC {	display: none;}
	.trainAccCaptionSP {	display: block;}
}





/* ------------------------------------------------------------------------
	carAccWrap
------------------------------------------------------------------------ */
	.carAccWrap {}

	.carAccSection {}

/* carAccMain
------------------------------------------------------------------------ */
	.carAccMain {
		width: 100%;
		aspect-ratio: 1600 / 350;
	}
	.carAccMain img {
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: 50% 35%;
	}
@media screen and (max-width: 736px) {
	.carAccMain {
		width: 100%;
		aspect-ratio: 375 / 160;
	}
}

/* carMapWrap
------------------------------------------------------------------------ */
	.carMapWrap {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
		gap: 0 calc(60 / 1260 * 100%);
	}
	.carMapWrap .mapBox {}
	.carMapWrap .txtBox {
		line-height: 1.35;
		font-size: clamp(1.45rem, (16 / 1400 * 100vw), 1.6rem);
		letter-spacing: .14em;
	}
	.carMapWrap .txtBox small {
		font: inherit;
	}
	.carMapWrap .txtBox ul {}
	.carMapWrap .txtBox li {
		display: flex;
		align-items: baseline;
		gap: 0 .5em;
	}
	.carMapWrap .txtBox li + li {
		margin-top: 1.5em;
	}
	.carMapWrap .txtBox li::before {
		content: "";
		flex: 0 0 1.8em;
		border-top: 1px solid currentColor;
		translate: 0 -.4em;
	}
	.carMapWrap .txtBox li .mainTxt {}
	.carMapWrap .txtBox li .lowerPhrase {
		display: inline-block;
	}
	.carMapWrap .txtBox li .name {
		font-size: 1.375em;
	}
	.carMapWrap .txtBox li .name small {
		font-size: .727273em;
	}
	.carMapWrap .txtBox li .note {}
	.carMapWrap .txtBox li .note small {
		display: inline-block;
		line-height: 1.5;
		font-size: max(1rem, .75em);
	}
	.carMapWrap .txtBox .carTxtCap {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		line-height: 1.5;
		font-size: max(1rem, .75em);
		margin-top: 4em;
		letter-spacing: .1em;
	}
@media screen and (max-width: 1200px) {
	.carMapWrap {
		grid-template-columns: 1fr;
		gap: 30px 0;
		max-width: 750px;
	}
	.carMapWrap .txtBox .carTxtCap {
		justify-content: flex-start;
	}
}
@media screen and (max-width: 736px) {
	.carMapWrap .mapBox {
		width: 100%;
	}
	.carMapWrap .mapBox small.bltr {
		padding-left: .5em;
		padding-right: .5em;
	}
	.carMapWrap .txtBox {
		font-size: 1.4rem;
		letter-spacing: .09em;
	}
	.carMapWrap .txtBox li {
		display: block;
	}
	.carMapWrap .txtBox li::before {
		content: none;
	}
	.carMapWrap .txtBox li .mainTxt {
		padding-bottom: .15em;
		padding-left: .5em;
		border-left: 2px solid currentColor;
	}
	.carMapWrap .txtBox li .note {
		padding-left: calc(.5em + 2px);
	}
	.carMapWrap .txtBox .carTxtCap {
		justify-content: flex-end;
		margin-top: 3em;
	}
	/* ===== jsSwipeIt ===== */
	.carMapWrap .mapBox .jsSwipeIt .pic {
		width: 150%;
		padding: 1em;
	}
}
@media screen and (max-width: 480px) {
	.carMapWrap .txtBox li .lowerPhrase {
		display: block;
	}
}



/* ------------------------------------------------------------------------
	taxiAccWrap
------------------------------------------------------------------------ */
	.taxiAccWrap {}

	.taxiAccSection {}

/* taxiFareWrap
------------------------------------------------------------------------ */
	.taxiFareWrap {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
		gap: 0 calc(60 / 1260 * 100%);
	}
	.taxiFareWrap .taxiPicBox {
		aspect-ratio: 470 / 620;
	}
	.taxiFareWrap .taxiPicBox img {
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: 0% 50%;
	}
	.taxiFareWrap .taxiFareTxtBox {
		line-height: 1.35;
		font-size: clamp(1.75rem, (20 / 1000 * 100vw), 2rem);
		letter-spacing: .14em;
	}
	.taxiFareWrap .taxiFareTxtBox ul {
		max-width: 370px;
	}
	.taxiFareWrap .taxiFareTxtBox li {
	}
	.taxiFareWrap .taxiFareTxtBox li + li {
		margin-top: .9em;
		padding-top: .9em;
		border-top: 1px solid rgba(0, 0, 0, .42);
	}
	.taxiFareWrap .taxiFareTxtBox .station {
		font-size: 1.1em;
	}
	.taxiFareWrap .taxiFareTxtBox .station .name {
		font-size: 1.272727em;
	}
	.taxiFareWrap .taxiFareTxtBox .station .dist {
		display: inline-block;
		font-size: clamp(1.2rem, (14 / 1000 * 100vw), 1.4rem);
		letter-spacing: .1em;
	}
	.taxiFareWrap .taxiFareTxtBox .price {
		font-size: 1em;
	}
	.taxiFareWrap .taxiFareTxtBox .price .num {
		line-height: 1.2;
		font-size: 1.6em;
		letter-spacing: .05em;
	}
	.taxiFareWrap .taxiFareTxtBox .price .night {
		display: inline-block;
		font-size: clamp(1.2rem, (14 / 1000 * 100vw), 1.4rem);
		letter-spacing: .1em;
	}
@media screen and (max-width: 736px) {
	.taxiFareWrap {
		grid-template-columns: 1fr;
		gap: 10px 0;
		max-width: 750px;
	}
	.taxiFareWrap .taxiPicBox {
		aspect-ratio: 375 / 320;
		margin-left:	calc(-50vw + 50%);
		margin-right:	calc(-50vw + 50%);
	}
	.taxiFareWrap .taxiFareTxtBox {
		font-size: clamp(1.65rem, (17.75 / 375 * 100vw), 1.85rem);
		text-align: center;
	}
	.taxiFareWrap .taxiFareTxtBox ul {
		max-width: none;
	}
	.taxiFareWrap .taxiFareTxtBox li + li {
		margin-top: revert;
		padding-top: revert;
		border-top: none;
	}
	.taxiFareWrap .taxiFareTxtBox li:nth-of-type(n) {
		padding-top: .9em;
		padding-bottom: 1em;
	}
	.taxiFareWrap .taxiFareTxtBox li:nth-of-type(even) {
		color: rgba(var(--site-themeColor-main_text), 1);
		background: rgba(var(--site-themeColor-main), 1) var(--site-variationColor-pattern_gray);
	}
	.taxiFareWrap .taxiFareTxtBox .station {
		font-size: 1em;
	}
	.taxiFareWrap .taxiFareTxtBox .station .name {
		font-size: 1.44em;
	}
	.taxiFareWrap .taxiFareTxtBox .station .dist {
		font-size: max(1.1rem, .73em);
	}
	.taxiFareWrap .taxiFareTxtBox .price {
		font-size: 1em;
	}
	.taxiFareWrap .taxiFareTxtBox .price .num {
		font-size: 1.54em;
	}
	.taxiFareWrap .taxiFareTxtBox .price .night {
		font-size: max(1.1rem, .73em);
	}
}