@charset "utf-8";

/* =======================================================================================
	COMMON
======================================================================================= */
	.siteWrap {
		background-color: #f7f2ea;
	}
	.mainVisual {
		position: relative;
	}
	.pageThemeHeader .ptHeading {
		position: absolute;
		top: 10%;
		left: 50%;
		transform: translateX(-50%);
		/*margin-top: 0;
		padding-top: var(--site-marpad-L);*/
		border-bottom-color: rgba(255, 255, 255, .3);
	}
@media screen and (max-width: 900px) {
	.pageThemeHeader .ptHeading {
		text-align: center;
		border-bottom: 0px;
	}
}
	.pageThemeHeader .ptHeading .hWord {
		color: rgba(255, 255, 255, .7);
	}
	.pageThemeHeader .ptHeading .hTxt {
		color: #FFF;
	}

	.pageThemeHeader + section > .container {
		overflow: hidden;
		position: relative;
		background: url("../images/share/bg_top.png") top center no-repeat;
		background-size: 100% auto;
	}
	.pageThemeHeader + section > .container > *:first-child {
		position: relative;
		z-index: 2;
	}
 	.pageThemeHeader + section > .container::before {
		content: "";
		display: block;
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 80dvh;
		background: linear-gradient(to bottom, #f7f2ea 0%, transparent 30%);
	}

@media screen and (max-width: 900px) {
	.pageThemeHeader .ptHeading {
		top: 5%;
	}
}

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


	.generalColBox.js_swiperStation {
		text-align: center;
		--base-generalColBox-margin-column: 30px;
	}
	.generalColBox.js_swiperStation .stationPic {
		position: relative;
	}
	.generalColBox.js_swiperStation .stationMin {
		font-size: 1.3em;
	}
	.generalColBox.js_swiperStation .stationMin .stationName {
		font-size: 1.4em;
	}
	.generalColBox.js_swiperStation .stationMin .minNum {
		display: inline-block;
		color: #aa895e;
		font-style: italic;
		font-size: 1.8em;
		margin-right: 0.15em;
	}
	.generalColBox.js_swiperStation .stationUnit > small {
		display: block;
		text-align: left;
		background: rgba(0, 0, 0, .05);
		padding: 10px;
	}
	.generalColBox.js_swiperStation .js_swiperStationSlider {
		position: relative;
		min-width: 0;
	}
	/* *	pagination位置・prev/nextボタン（js_swiperNavBtn）、PC側スキャフォールド
	   *	（js_swiperSpCarousel）はswiper_setting.css参照。 */


@media print, screen and (min-width: 900.02px){
	.generalColBox.js_swiperStation .txtBox {
		text-align: center;
	}
}
@media screen and (max-width: 1200px) {
	.generalColBox.js_swiperStation .stationMin {
		font-size: 1.5vw;
	}
}
@media screen and (max-width: 900px) {
	.generalColBox.js_swiperStation {
		--base-generalColBox-margin-row: 20px;
	}
	.generalColBox.js_swiperStation .txtUnit {
		padding: 0 1.8em;
	}
	.generalColBox.js_swiperStation .stationPic img {
		width: 100%;
		max-width: none;
	}
	.generalColBox.js_swiperStation .stationMin {
		font-size: min(1.3em, 3.4vw);
	}
}
@media screen and (max-width: 600px) {
}






	.meguroLinePic {
		max-width: 1286px;
		--columnWidth: 1274px;

		display: grid;
		grid-template-areas:
			"sui sui meg aza ..."
			"sui sui meg iid iid"
			"... jim meg iid iid";
		grid-template-columns: calc(177 / var(--columnWidth) * 100%) calc(286 / var(--columnWidth) * 100%) calc(350 / var(--columnWidth) * 100%) calc(286 / var(--columnWidth) * 100%) calc(177 / var(--columnWidth) * 100%);
		grid-template-rows: 1fr auto 1fr;
		gap: 7px 6px;
	}
	.meguroLinePic .picBox {
		position: relative;
		overflow: hidden;
	}
	.meguroLinePic .picBox img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}
	.meguroLinePic .picBox.suidobashi {		grid-area: sui;}
	.meguroLinePic .picBox.meguro {			grid-area: meg;}
	.meguroLinePic .picBox.azabu {		grid-area: aza;}
	.meguroLinePic .picBox.jimbocho {	grid-area: jim;}
	.meguroLinePic .picBox.iidabashi {	grid-area: iid;}


	.meguroLinePic .picBox i {
		position: absolute;
		bottom: 0;
		color: #FFF;
		font-family: var(--site-font_family-en_1);
		font-size: 1.6em;
		letter-spacing: 0.1em;
	}
	.meguroLinePic .picBox i::before {
		content: "";
		display: block;
		position: absolute;
		z-index: 20;
		inset: 0;
		background: rgba(36, 123, 188, .8);
		mix-blend-mode: multiply;
	}
	.meguroLinePic .picBox.meguro i {		right: 0;	left: 0; padding: 0 0.8em;}
	.meguroLinePic .picBox.suidobashi i,
	.meguroLinePic .picBox.azabu i {		right: 0;	top:  0; padding: 0.8em 0;}
	.meguroLinePic .picBox.jimbocho i,
	.meguroLinePic .picBox.iidabashi i {	left: 0;	top: 0; padding: 0.8em 0;}

	.meguroLinePic .picBox i em {
		position: relative;
		z-index: 21;
	}
	.meguroLinePic .picBox:not(.meguro) i em {
		writing-mode: vertical-rl;
	}


@media screen and (max-width: 1300px) {
	.meguroLinePic .picBox i {		font-size: 1.8vw;	}
}
@media screen and (max-width: 800px) {
	.meguroLinePic {
		--columnWidth: 684px;
		grid-template-areas:
			"sui sui"
			"meg jim"
			"meg aza"
			"iid iid";
		grid-template-columns: calc(370 / var(--columnWidth) * 100%) calc(314 / var(--columnWidth) * 100%);
		grid-template-rows: auto auto auto auto;
	}
	.meguroLinePic .picBox i {		font-size: 3.8vw;	}
}


@media screen and (max-width: 736px) {
	.meguroTrainMapPic .js_swipeMeSwipeItem {
		width: 300%;
	}

}