@charset "utf-8";

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



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

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

/*-------------------------------------------------------------------------------------  
townPlanningSection
-------------------------------------------------------------------------------------  */
	.townPlanningSection .townAreaBox {
		display: block;
		margin: 4em auto 0;
	}




/*-------------------------------------------------------------------------------------  
accessSection
-------------------------------------------------------------------------------------  */






/*-------------------------------------------------------------------------------------  
accessSection
-------------------------------------------------------------------------------------  */

/*trainAreaWrap ------------------------------  */
	.trainAreaWrap .ptHeading {
		text-align: center;
	}
	.trainAreaWrap .hTxt {
		text-align: center;
		display: inline-block;
		padding: .2em 3em;
	}
	.trainAreaPhBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.trainAreaPhUnit {
		width: 33%;
		position: relative;
		line-height: 1.35;
		color: #fff;
		margin-bottom: .5%;
	}
	.trainAreaPhUnit .imgcapkeep{
        font-size: 1rem;
        opacity: .75;
	}
	.trainAreaPhUnit .txt {
        position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
		font-family: var(--site-font_family-en_1);
		font-size: min((30 / 1200 * 100vw), 3rem);
		text-align: center;
		padding: .5em 1em;
		z-index: 2;
		background:rgba(0,0,0,0.53);
	}
	.trainAreaPhUnit .txt .station {
        font-size: 0.833em;
        letter-spacing: 0.02em;
	}
	.trainAreaPhUnit .txt .ja {
        font-size: 0.783em;
        letter-spacing: 0.02em;
		color: #fff4b5;
	}
	.trainAreaPhUnit .txt .time {
		min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
		font-size: max(1rem, .766667em);
		margin-top: .3em;
	}
	.trainAreaPhUnit .txt .time .num {
		line-height: 1;
		font-size: 1.826em;
		margin-right: .05em;
	}
	.trainAreaPhUnit .txt .time small {
        font-family: var(--site-font_family-en_1);
		min-height: 0.001vw;				/* for safari | font-sizeにclamp()使用時必須 */
		font-size: max(1rem, .738461em);
	}
	.trainAreaPhUnit .ph {
        position: relative;
	}
/*@media screen and (min-width: 700.02px)  {
	.trainAreaPhUnit:nth-child(n+4) {
		width: 24.5%;
	}
}*/
@media screen and (max-width: 700px) {
	.trainAreaPhUnit {
		width: 49.5%;
		margin-bottom: 1.5%;
	}
	.trainAreaPhUnit .txt {
		font-size: min((34 / 700 * 100vw), 4.4rem);
	}
    .trainAreaPhUnit .ph img{
		width: 100%;
		height: calc(110vw * 0.5);
		object-fit: cover;
		object-position: 50% 100%;
	}
}
@media screen and (max-width: 480px) {
	.trainAreaPhBox {
		justify-content: space-between;
		margin-top: 4.5vw;
	}
	.trainAreaPhUnit {
		width: 92%;
		margin-top: 4.5vw;
	}
    .trainAreaPhUnit:nth-of-type(1) .ph img {
		object-position: 100% 22%;
	}
    .trainAreaPhUnit:nth-of-type(2) .ph img {
		object-position: 100% 70%;
	}
    .trainAreaPhUnit:nth-of-type(3) .ph img {
		object-position: 100% 84%;
	}
	.trainAreaPhUnit:nth-of-type(4) .ph img {
		object-position: 100% 37%;
	}
	.trainAreaPhUnit:nth-of-type(2n) {
		margin-left: auto;
	}
	.trainAreaPhUnit .txt {
		font-size: max(2.1rem, 7.133vw);
	}
	.trainAreaPhUnit .txt .time {
		font-size: max(1.5rem, .869565em);
	}
	.trainAreaPhUnit .txt .time .num {
		font-size: 1.9em;
	}
	.trainAreaPhUnit .txt .time small {
		font-size: max(1.2rem, .6em);
	}
}







/*-------------------------------------------------------------------------------------  
locationSection
-------------------------------------------------------------------------------------  */
	.locSetUnitWrap{

	}
	.picUnitBox.generalColBox {
		/*--base-generalColBox-margin-row:	60px;*/
		--base-generalColBox-margin-column:	30px;
	}
	.picUnitBox .txtbox {
	}
	.picUnitBox .ttl {
		--M-fluidFontSize-max-fontsize: 20;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 900;
		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);
		line-height: 1.4;
		padding-top: 0.8em;
		text-align: left;
		display: block;
	}
	.picUnitBox .distance {
		font-size: 1.2rem;
		display: inline-block;
	}
	.picUnitBox .txt {
		display: block;
		margin-top: 1.5em;
	}