@charset "UTF-8";

.pre-inc main.pagehead {
	background: url("../img/access/main_image.jpg") no-repeat;
	background-size: cover;
	height: 600px;
	width: 100%;
}
.pre-inc main.pagehead.on{
}
/* tablist */
.pre-inc #tablist{
	padding-top: 50px;
}
.pre-inc .building_tab {
  margin-bottom: 0px;
}

/* access */
.pre-inc .access{
	padding: 60px 0 0;
}
.pre-inc .access .building_tab{
	margin-bottom: 80px;
}
.pre-inc .access_wideimage{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 50px;
}
.pre-inc .access_wideimage .wideimageitem:nth-child(1) { flex: 452; }
.pre-inc .access_wideimage .wideimageitem:nth-child(2) { flex: 390; }
.pre-inc .access_wideimage .wideimageitem:nth-child(3) { flex: 579; }
.pre-inc .access_wideimage .wideimageitem:nth-child(4) { flex: 499; }
.pre-inc .access_wideimage .wideimageitem img{
	width: 100%;
}

/* route */
.pre-inc .route{
	font-family: "Zen Old Mincho", YakuHanMP, "游明朝体", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
	padding: 60px 0;
}
.pre-inc .routemapflex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.pre-inc .routemapflex .flexleft{
	width: 310px;
}
.pre-inc .routemapflex .flexright{
	flex: 1;
	margin-left: 15px;
}
.pre-inc .station{
	margin-bottom: 20px;
}
.pre-inc .station .stationline{
	border-bottom: 1px solid #333;
	font-size: clamp(11px,1.4vw,14px);
	padding-bottom: 6px;
	margin-bottom: 10px;
}
.pre-inc .station .routeinfo{
	display: inline-block;
}
.pre-inc .station .routeinfo .stationroute{
	font-size: clamp(24px,2.8vw,24px);
	letter-spacing: 0.08em;
}
.pre-inc .station .routeinfo .stationroute span{
	font-size: clamp(18px,3.6vw,30px);
	letter-spacing: 0.08em;
}
.pre-inc .station .routeinfo .stationroute strong{
	font-family: "EB Garamond", "Zen Old Mincho", YakuHanMP, "游明朝体", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
	color: #9f0000;
	font-size: clamp(40px,5vw,56px);
	letter-spacing: 0;
	line-height: 0;
}
.pre-inc .station .routeinfo .distance{
	font-size: clamp(10px,1.3vw,13px);
	text-align: right;
}
/* routesearch */
.pre-inc .routesearch{
	color: #FFF;
	background: #828284;
	padding: 50px;
}
.pre-inc .routesearch .inner{
	max-width: 830px;
	margin: 0 auto;
}
.pre-inc .routesearch_label{
	display: flex;
	align-items: center;
}
.pre-inc .routesearch_label::after{
	background: #FFF;
	content: "";
	display: block;
	height: 1px;
	width: 100%;
	max-width: 100px;
	margin-left: 10px;
}
.pre-inc .routesearch_head h2{
	font-size: clamp(18px,2.4vw,24px);
	margin: 10px 0 20px;
}
.pre-inc .searchform{
	display: flex;
	margin-top: 20px;
}
.pre-inc .searchform .start{
	width: calc(320 / 830 * 100%);
	display: flex;
  align-items: center;
  column-gap: 10px;
}
.pre-inc .searchform .goal{
	width: calc(274 / 830 * 100%);
	display: flex;
  align-items: center;
  column-gap: 10px;
	margin-left: 20px;
}
.pre-inc .searchform .searchform_btnwrap{
	width: calc(200 / 830 * 100%);
	margin-left: auto;
}
.pre-inc .searchform .searchform_input {
	flex: 1;
}
.pre-inc .searchform .searchform_input input {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 0;
  font-size: clamp(18px,2.4vw,24px);
  font-family: "Zen Old Mincho", YakuHanMP, "游明朝体", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  letter-spacing: 0.2em;
  padding: 0;
  text-align: center;
}
.pre-inc .searchform .searchform_btn{
	border: none;
  width: 100%;
  height: 50px;
  background: #000;
  color: #a9a9a9;
	font-family: "Zen Old Mincho", YakuHanMP, "游明朝体", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  font-size: clamp(14px,1.6vw,16px);
}

/* forstation */
.pre-inc .forstation{
	padding: 80px 0;
}
.pre-inc .forstation_flex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	column-gap: 13px;
	padding: 0 20px;
	max-width: 1920px;
	margin: 0 auto;
}
.pre-inc .forstation_flex .forlabel{
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 10px;
}
.pre-inc .forstation_flex .forlabel::after{
	background: #000;
	content: "";
	display: block;
	height: 1px;
	margin-left: 10px;
	flex: 1;
}
.pre-inc .forstation_flex .stationgroup{
	flex: 1;
}
.pre-inc .forstation_flex .stationgroup .inflex{
	display: flex;
	justify-content: space-between;
	column-gap: 13px;
}
.pre-inc .forstation_flex .stationgroup .fleximg{
	margin-bottom: 10px;
}

/* direct */
.pre-inc #direct{
	background: #224142;
	padding: 80px 0;
}
.pre-inc #direct p{
	color: #FFF;
}
.pre-inc #direct .section_head{
	color: #FFF;
}
.pre-inc #direct .section_head h2.section_ttl{
	color: #FFF;
	margin-bottom: 20px;
}
.pre-inc #direct .section_head .lead_text{
	text-align: center;
	margin-bottom: 40px;
}
.pre-inc #direct .station_area{
	max-width:1920px;
	margin:0 auto;
}
.pre-inc #direct .station_img_wrap{
	display: flex;
}
.pre-inc #direct .station_img_wrap li h4 {
    font-size: clamp(24px, 4vw, 60px);
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.9), 0 0 0.15em rgba(0, 0, 0, 0.9);
    position: absolute;
    left: 3%;
    bottom: 15%;
}
.pre-inc #direct .station_img_wrap li h4.kansai{
    left: unset;
    right: 3%;
}
.pre-inc #direct .station_img_wrap li p {
    line-height: 1;
    color: #fff;
    position: absolute;
    left: 3%;
    bottom: 2%;
    filter: drop-shadow(0 0 0.05em rgba(0, 0, 0, 0.9)) drop-shadow(0 0 0.1em rgba(0, 0, 0, 0.9));
    font-size: clamp(24px, 3vw, 32px);
}
.pre-inc #direct .station_img_wrap li p.kansai {
    left: unset;
    right: 3%;
}
.pre-inc #direct .station_img_wrap li p strong {
    font-size: 1.5em;
}
.pre-inc #direct .note {
    font-size: 13px;
    text-align:right;
    margin-top:1em;
}

@media screen and (max-width: 1600px) {
	.pre-inc .station .routeinfo .stationroute {
		font-size: clamp(20px,2.8vw,24px);
		letter-spacing: 0.04em;
	}
	.pre-inc .station .routeinfo .stationroute span {
		font-size: clamp(16px,2.2vw,32px);
		letter-spacing: 0.08em;
	}
	.pre-inc .station .routeinfo .stationroute strong {
  	font-size: clamp(32px,5vw,50px);
	}
}
@media screen and (max-width: 1300px) {
	.pre-inc .forstation_flex .forlabel{
		font-size: clamp(13px,1.5vw,15px);
	}
	.pre-inc .station .routeinfo .stationroute {
		font-size: clamp(16px,2vw,18px);
		letter-spacing: 0.04em;
	}
	.pre-inc .station .routeinfo .stationroute span {
		font-size: clamp(14px,2.4vw,28px);
		letter-spacing: 0.08em;
	}
	.pre-inc .station .routeinfo .stationroute strong {
  	font-size: clamp(26px,4vw,40px);
	}
	.pre-inc #direct .station_img_wrap li h4 {
	    bottom: 15%;
	}
	.pre-inc #direct .station_img_wrap li p {
	    font-size: clamp(24px, 3vw, 24px);
	}
}
@media screen and (max-width: 1160px) {
	.pre-inc .forstation_flex .forlabel{
		font-size: clamp(11px,1.3vw,13px);
	}
	.pre-inc .station .routeinfo .stationroute {
		font-size: clamp(14px,2vw,24px);
		letter-spacing: 0.04em;
	}
	.pre-inc .station .routeinfo .stationroute span {
		font-size: clamp(12px,2.4vw,28px);
		letter-spacing: 0.08em;
	}
	.pre-inc .station .routeinfo .stationroute strong {
  	font-size: clamp(20px,3.2vw,32px);
	}
}
@media screen and (max-width: 768px) {
	.pre-inc .access_wideimage {
    flex-wrap: wrap;
  }
	.pre-inc .access_wideimage .wideimageitem:nth-child(1),
	.pre-inc .access_wideimage .wideimageitem:nth-child(2),
	.pre-inc .access_wideimage .wideimageitem:nth-child(3),
	.pre-inc .access_wideimage .wideimageitem:nth-child(4){ width: 50%; flex: none;aspect-ratio: 4 / 3;}
	.pre-inc .access_wideimage .wideimageitem figure {
		width: 100%;
		height: 100%;
	}
	.pre-inc .access_wideimage .wideimageitem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
	.pre-inc .routesearch {
		padding: 25px 15px;
	}
	.pre-inc .searchform {
		display: flex;
		flex-wrap: wrap;
	}
	.pre-inc .searchform .start,.pre-inc .searchform .goal{
		width: 100%;
		margin: 5px 0;
	}
	.pre-inc .searchform .searchform_input{
		width: 240px;
	}
	.pre-inc .searchform .searchform_input input{
		width: 240px;
	}
	.pre-inc .searchform .searchform_btnwrap {
		width: 90%;
		margin: 10px auto;
	}
	.pre-inc .forstation_flex{
		padding: 0 10px;
	}
	.pre-inc .route {
		padding: 30px 0;
	}
	.pre-inc .routemapflex .flexleft {
		width: 100%;
		display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
	}
	.pre-inc .routemapflex .flexleft .station {
		width: 49%;
	}
	.pre-inc .routemapflex .flexright {
		flex: none;
		width: 100%;
		margin-left: 0;
	}
	.pre-inc .forstation{
		padding: 40px 0;
	}
	.pre-inc .forstation_flex .stationgroup {
		flex: none;
		width: 100%;
	}
	.pre-inc .forstation_flex .forlabel{
		font-size: clamp(13px,1.5vw,15px);
	}
	.pre-inc .station .routeinfo .stationroute {
		font-size: clamp(16px,2.2vw,22px);
		letter-spacing: 0.04em;
	}
	.pre-inc .station .routeinfo .stationroute span {
		font-size: clamp(20px,2vw,20px);
		letter-spacing: 0.08em;
	}
	.pre-inc .station .routeinfo .stationroute strong {
  	font-size: clamp(26px,4vw,40px);
	}
	.pre-inc #direct{
		padding: 40px 0;
	}
	.pre-inc #direct .station_img_wrap{
		display: unset;
	}
	.pre-inc #direct .note {
	    font-size: 12px;
	    text-align:left;
	    margin-top:1em;
	    padding:0 1em;
	}
	
}