@charset "utf-8";

:root {

}

/* モバイル　ALL */
@media screen and (max-width:480px) {
	:root {

		/* 地下鉄 */
		--Subway_border-radius: var(--Border-radius_S);
		--Subway_A_flex-basis: auto;
		--Subway_A_padding: var(--Size_06);
		--Subway_Em_padding: var(--Size_04) var(--Size_06) 0;
		--Subway_Strong_padding: var(--Size_04) var(--Size_06);

		/* マップ */
		--Access_iframe_aspect-ratio: 9 / 16;

		/* ルート */
		--SectionContents_UlAccess_Li: 84%;

	}
}

/* タブレット */
@media screen and (min-width:481px) and (max-width: 768px) {
	:root {

		/* 地下鉄 */
		--Subway_border-radius: var(--Border-radius_L);
		--Subway_A_flex-basis: var(--Size_100);
		--Subway_A_padding: 0 var(--Size_06);
		--Subway_Em_padding: var(--Size_04) 0;
		--Subway_Strong_padding: 0;

		/* マップ */
		--Access_iframe_aspect-ratio: 9 / 16;

		/* ルート */
		--SectionContents_UlAccess_Li: 60%;

	}
}

/* ノートパソコン */
@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {

		/* 地下鉄 */
		--Subway_border-radius: var(--Border-radius_L);
		--Subway_A_flex-basis: var(--Size_100);
		--Subway_A_padding: 0 var(--Size_06);
		--Subway_Em_padding: var(--Size_04) 0;
		--Subway_Strong_padding: 0;

		/* マップ */
		--Access_iframe_aspect-ratio: 16 / 9;

		/* ルート */
		--SectionContents_Iframe_Height: 36vw;
		--SectionContents_UlAccess_Li: 60%;

	}
}

/* ノートパソコン L */
@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {

		/* 地下鉄 */
		--Subway_border-radius: var(--Border-radius_L);
		--Subway_A_flex-basis: var(--Size_100);
		--Subway_A_padding: 0 var(--Size_06);
		--Subway_Em_padding: var(--Size_04) 0;
		--Subway_Strong_padding: 0;

		/* マップ */
		--Access_iframe_aspect-ratio: 16 / 9;

		/* ルート */
		--SectionContents_UlAccess_Li: 40%;

	}
}

/* 2K以上 */
@media screen and (min-width:1441px) and ( max-width:2560px) {
	:root {

		/* 地下鉄 */
		--Subway_border-radius: var(--Border-radius_L);
		--Subway_A_flex-basis: var(--Size_100);
		--Subway_A_padding: 0 var(--Size_06);
		--Subway_Em_padding: var(--Size_04) 0;
		--Subway_Strong_padding: 0;

		/* マップ */
		--Access_iframe_aspect-ratio: 16 / 9;

		/* ルート */
		--SectionContents_UlAccess_Li: 40%;

	}
}

/* 4K以上 */
@media screen and (min-width:2561px) {
	:root {

		/* 地下鉄 */
		--Subway_border-radius: var(--Border-radius_L);
		--Subway_A_flex-basis: var(--Size_100);
		--Subway_A_padding: 0 var(--Size_06);
		--Subway_Em_padding: var(--Size_04) 0;
		--Subway_Strong_padding: 0;

		/* マップ */
		--Access_iframe_aspect-ratio: 16 / 9;

		/* ルート */
		--SectionContents_UlAccess_Li: 40%;

	}
}








/* ーーーーーーーーーーーーーーーーーーーー
	リスト
	メトロ
ーーーーーーーーーーーーーーーーーーーー */

.traffic {
	display: flex;
	flex-direction: var(--Flex-direction_CRRRRR);
	align-items: stretch;
	gap: 0 var(--Size_06);
	margin: var(--Size_08) 0 0;
	width: 100%;
	background: #FFF;
	border-radius: var(--Subway_border-radius);
	overflow: hidden;
}

.traffic:nth-of-type(1) {
	margin: 0;
}

.traffic > a {
	flex-basis: var(--Subway_A_flex-basis);
	display: flex;
	align-items: center;
	gap: var(--Size_04);
	padding: var(--Subway_A_padding);
	color: #FFF;
	line-height: 1;
}

.traffic > .metro {
	background: #00a3d9;
}

.traffic .jr {
	background: #0a8c0d;
}

.traffic .toei {
	background: #00a040;
}

.traffic > a:hover {
	background: var(--Color_C100);
}

.traffic a img {
	width: var(--Size_12);
}

.traffic em {
	display: flex;
	align-items: center;
	gap: var(--Size_02);
	padding: var(--Subway_Em_padding);
	color: var(--Color_1D100);
	line-height: 1;
}

.traffic em span {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: var(--Size_20);
	font-size: var(--Size_07);
	color: var(--Color_1D100);
	font-weight: 600;
	line-height: 1;
	border-radius: var(--Border-radius_L);
	aspect-ratio: 1 / 1;
}

.traffic em span sup {
	font-size: var(--Size_07);
	color: var(--Color_1D100);
	font-weight: 600;
	line-height: 1;
}

.traffic em .metro_M {
	border: 3px #f62d36 solid;
}

.traffic em .metro_F {
	border: 3px #9c5e30 solid;
}

.traffic em .toei_S {
	border: 3px #b0c124 solid;
}

.traffic em .keikyu_honsen {
	border: 3px #00a3e4 solid;
}

#shopinfo dl dd .subway em img {
	width: var(--Size_18);
}

.traffic strong {
	display: flex;
	align-items: center;
	gap: 0 var(--Gap4);
	padding: var(--Subway_Strong_padding);
	color: var(--Color_1D100);
	line-height: 1;
}

.traffic strong a i {
	color: var(--Color_1D100);
}

.traffic strong a:hover i {
	color: var(--Color_C100);
}








/* マップ */

iframe {
	margin: var(--Size_24) 0;
	width: 100%;
	border-radius: var(--Border-radius_S);
	aspect-ratio: var(--Access_iframe_aspect-ratio);
}






/* ルート */

ul.access {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: var(--Size_10);
	overflow: hidden;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	scroll-snap-align: start;
	-webkit-overflow-scrolling: touch;
}

ul.access::-webkit-scrollbar {
	width: var(--Size_40);
	height: var(--Size_10);
}

ul.access::-webkit-scrollbar-thumb {
	--bg-opacity: 1;
	background-color: var(--Color_E060);
	border-radius: var(--Size_40);
}

ul.access li {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: var(--SectionContents_UlAccess_Li);
	position: relative;
	margin: 0 var(--Size_30) 0 0;
	padding: var(--Size_10);
	background: var(--Color_A020);
	border-radius: var(--Border-radius_S);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	scroll-snap-align: center;
}

ul.access li:last-of-type {
	margin: 0;
}

ul.access li::after {
	position: absolute;
	top: 0;
	bottom: 0;
	right: -2rem;
	content: '';
	margin: auto;
	width: var(--Size_10);
	height: var(--Size_10);
	border-top: var(--Size_10) solid transparent;
	border-bottom: var(--Size_10) solid transparent;
	border-left: var(--Size_10) var(--Color_A080) solid;
}

ul.access li:last-of-type::after {
	position: absolute;
	right: 0;
	margin: 0;
	width: 0;
	height: 0;
	border-top: 0 transparent solid;
	border-bottom: 0 transparent solid;
	border-left: 0 var(--Color_A) solid;
}

ul.access li a {
	position: relative;
}

ul.access li a img {
	width: 100%;
	border-radius: var(--Border-radius_S);
	aspect-ratio: 1 / 1;
}

ul.access li a b {
	position: absolute;
	bottom: -.75rem;
	left: 0;
	display: inline-block;
	margin: 0;
	padding: var(--Size_02) var(--Size_10) var(--Size_06);
	color: var(--Color_1D080);
	font-size: var(--Size_18);
	font-weight: 600;
	line-height: 1;
	background-color: var(--Color_A);
	border-radius: var(--Size_40);
}

ul.access li a b::before {
	content: 'ROOT ';
	font-size: var(--Size_10);
	font-weight: 200;
}

ul.access li p {
	margin: 0;
	padding: var(--Size_10) 0 0;
}

ul.access li a:hover {
	opacity: .6;
}

p.susumu {
	position: relative;
	padding: var(--Size_02) var(--Size_10) var(--Size_20) var(--Size_02);
	font-size: var(--Size_08);
	color: var(--Color_FF080);
	border-top: 1px var(--Color_A) solid;
}

p.susumu::before {
	content: '';
	position: absolute;
	top: .3rem;
	right: -0.1rem;
	width: var(--Size_12);
	height: 1px;
	background: var(--Color_A);
	transform: rotate(-40deg);
}