@charset "utf-8";

:root {

}

@media (prefers-color-scheme: dark) {
	:root {

	}
}

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

		--Access_Iframe_aspect-ratio: 3 / 4;

		--DivTraffic_DivName_flex-basis: 100%;
		--DivTraffic_DivInner_padding: 0 var(--Size_06) var(--Size_06);
		--DivTraffic_DivName_border-radius: var(--Border-radius_S) var(--Border-radius_S) 0 0;
		--DivTraffic_DivRoot_Strong_flex-basis: 100%;

		--Access_Ul_Li_flex-basis: var(--Size_140);

	}
}

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

		--Access_Iframe_aspect-ratio: 16 / 9;

		--DivTraffic_DivInner_padding: 0 var(--Size_06) var(--Size_06);
		--DivTraffic_DivName_border-radius: var(--Border-radius_S) var(--Border-radius_S) 0 0;
		--DivTraffic_DivRoot_Strong_flex-basis: auto;

		--Access_Ul_Li_flex-basis: var(--Size_200);

	}
}

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

		--Access_Iframe_aspect-ratio: 16 / 9;

		--DivTraffic_DivInner_padding: var(--Size_02) 0;
		--DivTraffic_DivName_border-radius: var(--Border-radius_S) var(--Border-radius_L) var(--Border-radius_L) var(--Border-radius_S);
		--DivTraffic_DivRoot_Strong_flex-basis: auto;

		--Access_Ul_Li_flex-basis: var(--Size_200);

	}
}

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

		--Access_Iframe_aspect-ratio: 16 / 9;

		--DivTraffic_DivInner_padding: var(--Size_02) 0;
		--DivTraffic_DivName_border-radius: var(--Border-radius_S) var(--Border-radius_L) var(--Border-radius_L) var(--Border-radius_S);
		--DivTraffic_DivRoot_Strong_flex-basis: auto;

		--Access_Ul_Li_flex-basis: var(--Size_200);
	}
}

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

		--Access_Iframe_aspect-ratio: 16 / 4.5;

		--DivTraffic_DivInner_padding: var(--Size_02) 0;
		--DivTraffic_DivName_border-radius: var(--Border-radius_S) var(--Border-radius_L) var(--Border-radius_L) var(--Border-radius_S);
		--DivTraffic_DivRoot_Strong_flex-basis: auto;

		--Access_Ul_Li_flex-basis: var(--Size_220);
	}
}


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

		--Access_Iframe_aspect-ratio: 16 / 4.5;

		--DivTraffic_DivInner_padding: var(--Size_02) 0;
		--DivTraffic_DivName_border-radius: var(--Border-radius_S) var(--Border-radius_L) var(--Border-radius_L) var(--Border-radius_S);
		--DivTraffic_DivRoot_Strong_flex-basis: auto;

		--Access_Ul_Li_flex-basis: var(--Size_240);
	}
}







/* ーーーーーーーーーーーーーーーーーーーー
ガイド
ーーーーーーーーーーーーーーーーーーーー */

section#contents.access {
	& .main_image {
		position: relative;
		height: var(--MainImage_height);
		background: url('https://ihubjpn.com/wp-content/uploads/header01.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		& div {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: var(--MainImage_Div_padding);
			width: 100%;
			height: 100%;
			color: var(--Color_FF100);
			font-size: var(--Size_12);
			background: var(--Color_1D080);
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
	地図
ーーーーーーーーーーーーーーーーーーーー */

section#contents.access {
	& .wrap {
		& iframe {
			width: 100%;
			border-radius: var(--Border-radius_S);
			aspect-ratio: var(--Access_Iframe_aspect-ratio);
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
	路線
ーーーーーーーーーーーーーーーーーーーー */

section#contents.access {
	& .wrap {
		& #traffic {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			gap: var(--Size_03);
			& input {
				display: none;
			}
			& label {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: var(--Size_03);
				padding: var(--Size_03) var(--Size_08);
				font-size: var(--Size_08);
				color: var(--Color_FF100);
				line-height: 1;
				background: var(--Color_1D100);
				border-radius: var(--Border-radius_L);
				cursor: pointer;
				transition: var(--Transition_04s);
				-o-transition: var(--Transition_04s);
				-moz-transition: var(--Transition_04s);
				-webkit-transition: var(--Transition_04s);
			}
			& label:before {
				content: '\f238';
				display: flex;
				justify-content: center;
				align-items: center;
				width: var(--Size_10);
				color: var(--Color_1D100);
				font-size: var(--Size_06);
				line-height: 1;
				font-family: "Font Awesome 6 Free";
				font-weight: 900;
				background: var(--Color_FF100);
				border-radius: var(--Border-radius_L);
				aspect-ratio: 1 / 1;
			}
			& label:hover {
				background: var(--Color_A100);
			}
		}
		& .tab_content {
			display: none;
			flex-wrap: wrap;
			flex-direction: column;
			gap: var(--Size_06);
			margin: var(--Size_09) 0 0;
			width: 100%;
			clear: both;
			border-radius: var(--Border-radius_S);
		}
	}
}
		

#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content,
#tab6:checked ~ #tab6_content,
#tab7:checked ~ #tab7_content,
#tab8:checked ~ #tab8_content {
	display: flex;
	transition: var(--Transition_04s);
	-o-transition: var(--Transition_04s);
	-moz-transition: var(--Transition_04s);
	-webkit-transition: var(--Transition_04s);
}

div#traffic input:checked + .tab_item {
	background: var(--Color_A100);
}



section#contents.access {
	& .wrap {
		& .tab_content {
			& .traffic {
				display: flex;
				flex-wrap: wrap;
				flex-direction: var(--Flex-direction_CCRRRR);
				background: var(--Color_F3100);
				border-radius: var(--Border-radius_S);
				box-shadow: 0 var(--Size_01) var(--Size_04) 0 var(--Color_1D020);
				overflow: hidden;
				& .name {
					display: flex;
					align-items: center;
					gap: var(--Size_06);
					padding: var(--Size_03) var(--Size_12) var(--Size_03) var(--Size_06);
					background: var(--Color_FF100);
					border-radius: var(--DivTraffic_DivName_border-radius);
					& img {
						height: var(--Size_10);
					}
					& em {
						color: var(--Color_FF100);
					}
				}
				& .root {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					gap: 0 var(--Size_06);
					padding:var(--Size_03);
					& em {
						font-size: var(--Size_10);
						color: var(--Color_1D100);
						font-weight: 600;
					}
					& strong {
						flex: 1;
						flex-basis: var(--DivTraffic_DivRoot_Strong_flex-basis);
						font-size: var(--Size_10);
						color: var(--Color_1D100);
						& b {
							font-size: var(--Size_10);
							font-weight: 600;
						}
					}
				}
			}

			/* JR 東北新幹線 */
			& .traffic.jr div.name {
				background: #378640;
			}

			/* JR 東北新幹線 */
			& .traffic.jr_touhoku div.name {
				background: #378640;
			}

			/* JR 上越新幹線 */
			& .traffic.jr_jyoetsu div.name {
				background: #378640;
			}

			/* JR 北陸新幹線 */
			& .traffic.jr_hokuriku div.name {
				background: #0072BA;
			}

			/* 東京メトロ */
			& .traffic.tokyometro div.name {
				background: #00a3d9;
			}

			/* 都営交通 */
			&.traffic.toeikotsu div.name {
				background: #00a040;
			}

			/* 京成電鉄 */
			&.traffic.keiseidentetsu div.name {
				background: var(--Color_FF100);
			}

			/* 小田急電鉄 */
			& .traffic.odakyudentetsu div.name em {
				color: #0087cd;
			}

			/* 京王電鉄 */
			&.traffic.keioudentetsu div.name em {
				color: #0f3675;
			}

			/* 京成電鉄 */
			& .traffic.keiseidentetsu div.name em {
				color: #005aaa;
			}

			/* 阪急 */
			& .traffic.hankyu div.name em {
				color: #c90729;
			}

			/* 阪神 */
			& .traffic.hanshin div.name em {
				color: #38ACB5;
			}

			/* 大阪メトロ */
			& .traffic.osakametro div.name {
				background: #1d2088;
			}
			
		}
	}
}

section#contents.access {
	& .wrap {
		& .tab_content {
			& .list {
				display: flex;
				flex-wrap: wrap;
				gap: var(--Size_06);
				& .inner {
					display: flex;
					gap: var(--Size_03);
					padding: var(--Size_02) var(--Size_04) var(--Size_02) var(--Size_02);
					background: var(--Color_F3100);
					border-radius: var(--Border-radius_S);
					box-shadow: 0 var(--Size_01) var(--Size_04) 0 var(--Color_1D020);
					& .line {
						display: flex;
						align-items: center;
						& em {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							padding: 0 0 var(--Size_01);
							width: var(--Size_20);
							font-size: var(--Size_06);
							line-height: 1;
							background: var(--Color_FF100);
							aspect-ratio: 1 / 1;
							& span {
								font-size: var(--Size_08);
								line-height: 0.8;
							}
						}
					}
					& .root {
						display: flex;
						align-items: center;
						& em {
							font-size: var(--Size_08);
						}
					}
				}

				/* 山手線 */
				& .inner.yamanotesen div.line em {
					border: var(--Size_03) #85c023 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 中央線・総武線各駅停車 */
				& .inner.chuousoubusen_kakueki div.line em {
					border: var(--Size_03) #ffd400 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 中央線・青梅線・五日市線 */
				& .inner.chuousen_oume div.line em {
					border: var(--Size_03) #f15a22 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 湘南新宿ライン */
				& .inner.shomanshinjukuline div.line em {
					border: var(--Size_03) #e21f26 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 埼京線 */
				& .inner.saikyosen div.line em {
					border: var(--Size_03) #00AC9A solid;
					border-radius: var(--Border-radius_S);
				}

				/* 常磐線快速 */
				& .inner.jobansen_kaisoku div.line em {
					border: var(--Size_03) #36AE6E solid;
					border-radius: var(--Border-radius_S);
				}

				/* 京浜東北線・根岸線 */
				& .inner.keihintouhokusen div.line em {
					border: var(--Size_03) #00a7e3 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 宇都宮線（東北線）・高崎線 */
				&.inner.utsunomiyasen div.line em {
					border: var(--Size_03) #f68b1e solid;
					border-radius: var(--Border-radius_S);
				}

				/* 東北本線 */
				& .inner.touhokuhonsen div.line em {
					border: var(--Size_03) #3cb371 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 高崎線 */
				&.inner.ktakasakisen div.line em {
					border: var(--Size_03) #f68b1e solid;
					border-radius: var(--Border-radius_S);
				}

				/* 上野東京ライン */
				& .inner.uenotokyoline div.line em {
					color: var(--Color_FF100);
					background: #800080;
					border: var(--Size_03) #800080 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 東北新幹線 */
				& .inner.tohoku_shinkansen div.line em {
					border-top: var(--Size_08) #41934c solid;
					border-right: var(--Size_02) #41934c solid;
					border-bottom: var(--Size_02) #41934c solid;
					border-left: var(--Size_02) #41934c solid;
					border-radius: var(--Border-radius_S);
				}

				/* 上越新幹線 */
				& .inner.jhoetsu_shinkansen div.line em {
					border-top: var(--Size_08) #f58d79 solid;
					border-right: var(--Size_02) #f58d79 solid;
					border-bottom: var(--Size_02) #f58d79 solid;
					border-left: var(--Size_02) #f58d79 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 北陸新幹線 */
				& .inner.hokuriku_shinkansen div.line em {
					border-top: var(--Size_08) #6a3d98 solid;
					border-right: var(--Size_02) #6a3d98 solid;
					border-bottom: var(--Size_02) #6a3d98 solid;
					border-left: var(--Size_02) #6a3d98 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 東京メトロ銀座線 */
				& .inner.tokyometro_ginzasen div.line em {
					border: var(--Size_02) #ff9500 solid;
					border-radius: var(--Border-radius_L);
				}

				/* 東京メトロ 丸の内線 */
				& .inner.tokyometro_marunouchisen div.line em {
					border: var(--Size_02) #e60012 solid;
					border-radius: var(--Border-radius_L);
				}

				/* 東京メトロ 副都心線 */
				& .inner.tokyometro_fukutoshinsen div.line em {
					border: var(--Size_02) #9c5e31 solid;
					border-radius: var(--Border-radius_L);
				}

				/* 東京メトロ 日比谷線 */
				& .inner.tokyometro_hibiyasen div.line em {
					border: var(--Size_02) #b5b5ac solid;
					border-radius: var(--Border-radius_L);
				}

				/* 都営交通 新宿線 */
				& .inner.toeikotsu_shinjukusen div.line em {
					border: var(--Size_02) #6cbb5a solid;
					border-radius: var(--Border-radius_L);
				}

				/* 都営交通 大江戸線 */
				& .inner.toeikotsu_oedosen div.line em {
					border: var(--Size_02) #b6007a solid;
					border-radius: var(--Border-radius_L);
				}

				/* 小田急電鉄 小田原線 */
				& .inner.odakyudentetsu_odawarasen div.line em {
					border: var(--Size_02) #2288CC solid;
					border-radius: var(--Border-radius_L);
				}

				/* 京王電鉄 京王線 */
				& .inner.keioudentetsu_keiousen div.line em {
					border: var(--Size_02) #dd0077 solid;
					border-radius: var(--Border-radius_L);
				}

				/* 京成電鉄 本線 */
				& .inner.keiseidentetsu_honsen div.line em {
					border: var(--Size_02) #005aaa solid;
					border-radius: var(--Border-radius_L);
				}



				/* 大阪 ゆめ咲線 */
				& .inner.jr_yumesakisen div.line em {
					color: var(--Color_FF100);
					background: #0a318e;
					border: var(--Size_03) #0a318e solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 関西空港線 */
				& .inner.jr_kansaikukosen div.line em {
					color: var(--Color_FF100);
					background: #0072bc;
					border: var(--Size_03) #0072bc solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 阪和線 */
				& .inner.jr_hanwasen div.line em {
					background: #ff8e1f;
					border: var(--Size_03) #ff8e1f solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 大阪環状線 */
				& .inner.jr_osakakanjosen div.line em {
					color: var(--Color_FF100);
					background: #e80000;
					border: var(--Size_03) #e80000 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 大和路線 */
				& .inner.jr_yamatojisen div.line em {
					color: var(--Color_FF100);
					background: #00b178;
					border: var(--Size_03) #00b178 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 神戸線 */
				& .inner.jr_kobesen div.line em {
					color: var(--Color_FF100);
					background: #0072bc;
					border: var(--Size_03) #0072bc solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 宝塚線 */
				& .inner.jr_takarazukasen div.line em {
					background: #ffba00;
					border: var(--Size_03) #ffba00 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 福知山線 */
				& .inner.jr_fukuchiyamasen div.line em {
					background: #ffba00;
					border: var(--Size_03) #ffba00 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 播但線 */
				& .inner.jr_bantansen div.line em {
					border: var(--Size_03) #a52f5d solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 京都線 */
				& .inner.jr_kyotosen div.line em {
					color: var(--Color_FF100);
					background: #0072bc;
					border: var(--Size_03) #0072bc solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 おおさか東線 */
				& .inner.jr_osakahigashisen div.line em {
					color: var(--Color_FF100);
					background: #3b7293;
					border: var(--Size_03) #3b7293 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 東海道線 */
				& .inner.jr_toukaidosen div.line em {
					color: var(--Color_FF100);
					background: #0072bc;
					border: var(--Size_03) #0072bc solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 東西線 */
				& .inner.jr_osakatouzaisen div.line em {
					color: var(--Color_FF100);
					background: #ff1493;
					border: var(--Size_03) #ff1493 solid;
					border-radius: var(--Border-radius_S);
				}

				/* 大阪 阪急神戸線 */
				& .inner.hankyu_kobesen div.line em {
					border: var(--Size_02) #006fbc solid;
					border-radius: var(--Border-radius_L);
				}

				/* 大阪 阪急宝塚線 */
				& .inner.hankyu_takarazukasen div.line em {
					border: var(--Size_02) #ec6800 solid;
					border-radius: var(--Border-radius_L);
				}

				/* 大阪 阪急京都線 */
				& .inner.hankyu_kyotosen div.line em {
					border: var(--Size_02) #03af7a solid;
					border-radius: var(--Border-radius_L);
				}

				/* 大阪 阪神本線 */
				& .inner.hanshin_honsen div.line em {
					border: var(--Size_02) #1f64b1 solid;
					border-radius: var(--Border-radius_L);
				}

				/* 大阪 大阪メトロ 御堂筋線 */
				& .inner.osakametro_midousujisen div.line em {
					border: var(--Size_02) #e5171f solid;
					border-radius: var(--Border-radius_L);
				}

				/* 大阪 大阪メトロ 谷町線 */
				& .inner.osakametro_tanimachisen div.line em {
					border: var(--Size_02) #AA1B86 solid;
					border-radius: var(--Border-radius_L);
				}

				/* 大阪 大阪メトロ 堺筋線 */
				& .inner.osakametro_sakaisujisen div.line em {
					border: var(--Size_02) #B24321 solid;
					border-radius: var(--Border-radius_L);
				}

				/* 大阪 大阪メトロ 四つ橋線 */
				& .inner.osakametro_yotsuhashisen {
					& .line {
						& em {
							border: var(--Size_02) #0073BD solid;
							border-radius: var(--Border-radius_L);
						}
					}
				}
			}
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
   道順
ーーーーーーーーーーーーーーーーーーーー */

ul.access {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: var(--Size_12);
	overflow: hidden;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
}

ul.access li {
	flex-basis: var(--Access_Ul_Li_flex-basis);
	flex-grow: 0;
	flex-shrink: 0;
	margin: 0;
}

ul.access li a {
	display: inline-block;
}

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

ul.access li a b {
	position: absolute;
	top: var(--Size_06);
	left: var(--Size_06);
	align-items: flex-end;
	background-color: var(--Color_A100);
}

#cave ul.access li a b {
	background-color: var(--Color_CV100);
}

#cavex ul.access li a b {
	background-color: var(--Color_CX100);
}

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

section#contents ul.access li p {
	margin: 0;
	padding: var(--Size_10) 0 0;
	font-size: var(--Size_08);
}