@charset "UTF-8";
/* CSS Document */

/*********************

	mainvisual

*********************/

#pageMainvisual figure figcaption {
  position: absolute;
  width: 90%;
  top: auto;
  bottom: 30px;
  left: auto;
  right: 20px;
  transform: translateY(0) translateX(0);
  -webkit- transform: translateY(0) translateX(0);
  text-align: right;
}
#pageMainvisual figure .H {
  width: 100%;
}
@media screen and (max-width: 768px) {
  #pageMainvisual figure figcaption {
    /*position: static;*/
		bottom: 0px;
    text-align: center;
    margin: 30px auto 0;
  }
  #pageMainvisual .note {
    top: 0;
  }
}
@media screen and (max-width: 480px) {
  #pageMainvisual figure .H img {
    margin: 5px;
    display: inline;
  }
}

/*********************

	contents

*********************/

#acc1 {
  margin: 50px auto;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #acc1 {
    margin-bottom: 1em;
  }
}

/*=====
	acc2
=====*/
#acc2 { margin: 0 auto 50px; }
#acc2 .routemap {
	float: left;
	width: 58%;
	max-width: 518px;
  position: relative;
}
#acc2 .routemap span{
  display: block;
  position: absolute; top:0; left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
#acc2 .train_access {
	float: right;
	width: 40%;
	margin: 0;
}
#acc2 .train_access figure {
	margin: 1em auto;
  max-width: 370px;
}
#acc2 .train_access ul {
	letter-spacing: -0.4em;
	margin: 0 -2%;
}
#acc2 .train_access li {
	letter-spacing: normal;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	margin: 0 0 1em;
	text-align: left;
}
#acc2 .train_access li img {
	max-width: 100%;
	max-height: 49px;
	width: auto;
	height: auto;
}
@media screen and (max-width: 768px) {
	#acc2 .routemap {
		width: 100%;
		float: none;
		max-width: 518px;
		margin: 20px auto 0;
	}
	#acc2 .train_access {
		width: 100%;
		float: none;
	}
	#acc2 .train_access li {
		border: 1px solid rgba(255,255,255,0.30);
		width: 47%;
		padding: 20px 20px 10px;
		margin: 1%;
		box-sizing: border-box;
	}
	
}
@media screen and (max-width: 480px) {
	#acc2 .train_access li {
		width: 98%;
		text-align: center;
	}
}

#train { margin: 0 auto 50px; padding-bottom: 50px; border-bottom: 1px solid #444444; }
#train .ttl_area { overflow: hidden; margin-bottom: 20px; }
#train .ttl_area .ttl { float: left; margin-right: 20px; }
#train ul { overflow: hidden; }
#train li { float: left; width: 31.25%; margin-right: 3.125%; margin-bottom: 30px; }
#train li:nth-child(3n) { margin-right: 0; }
#train li img { width: 100%; height: auto; }
#train li span { display: block; text-align: center; }
@media screen and (max-width: 876px) {
	#train li:nth-child(3n) { margin-right: 0; }
	#train li { float: left; width: 48%; margin-right: 3.125%; }
	#train li:nth-child(2n) { margin-right: 0; }
	#train li:nth-child(3) { margin-right: 3.125%; }
}
@media screen and (max-width: 768px) {
	#train .ttl_area .ttl { float: none; margin-right: 0; }
}
@media screen and (max-width: 480px) {
	#train li { float: none; width: 100%; margin-right: 0; }
	#train li:nth-child(3) { margin-right: 0; }
}



#resale { margin: 0 auto 80px; overflow: hidden; }
#resale .txtarea { float: left; width: 46%; }
#resale .img { float: right; width: 50%; max-width: 471px; }
#resale .img img { width: 100%; height: auto; }
#resale .note { clear: both; padding-top: 40px; }
@media screen and (max-width: 855px) {
	#resale .txtarea { float: none; width: 100%; }
	#resale .img { float: none; width: 100%; margin: 30px auto; }
}
@media screen and (max-width: 420px) {
	#resale { margin-bottom: 40px; }
}



/*train-station*/
#acc_train{ margin: 0 auto 50px; padding-bottom: 40px; border-bottom: 1px solid #444444; }
#acc_train .ttl_area { overflow: hidden; margin-bottom: 20px;}
#acc_train .ttl_area .ttl { float: left; margin-right: 20px; }
#acc_train .station_l2 li{
  float: left;
  width:47.916666666666667%;
  margin: 0 0 40px 4.166666666666667%;
  text-align: center;
}
#acc_train .station_l2 li:first-child{ margin-left: 0;}
#acc_train .station_l2 li img{max-width: 460px;}

#acc_train .station_l3 li{
  float: left;
  width:31.25%;
  margin: 0 0 0 3.125%;
  text-align: center;
}
#acc_train .station_l3 li:first-child{ margin-left: 0;}
#acc_train .station_l3 li img{max-width:300px;}

@media screen and (max-width: 768px) {
  #acc_train .station_l2 li{
    width:100%;
    margin: 0 0 40px 0;
    float: none;
  }
  #acc_train .station_l3 li{
    width:46%;
    margin: 20px 2%;
  }
  #acc_train .station_l3 li:first-child{ margin-left: 2%;}
}
@media screen and (max-width: 480px) {
  #acc_train .station_l3 li{
    width:100%;
    margin: 40px 0;
    float: none;
  }
  #acc_train .station_l3 li:last-child{margin-bottom: 0;}
}



/*air line*/
#acc_airline { margin: 0 auto 50px; padding-bottom: 50px; border-bottom: 1px solid #444444; }
#acc_airline .ttl_area { overflow: hidden; margin-bottom: 20px;}
#acc_airline .ttl_area .ttl { float: left; margin-right: 20px; }
#acc_airline ul { overflow: hidden; }
#acc_airline li { float: left; width: 50%; margin-bottom: 30px;}
#acc_airline li img { width: 100%; height: auto; display: block;}
#acc_airline li.fLeft{width:50%; position: relative;}
#acc_airline li.fLeft .note{position: absolute; top:1em; left: 1em; color:#FFFFFF;}
#acc_airline li.fRight{width:47.604166666666667%; margin-left: 2.395833333333333%;}
#acc_airline li.fRight img{max-width: 457px; display: block; margin: 2em auto 0;}
#acc_airline li span { display: block; text-align: left; }
#acc_airline .airline_l1{margin-top: -5%;}

@media screen and (max-width: 768px) {
	#acc_airline .ttl_area .ttl { float: none; margin-right: 0; }
  #acc_airline li.fLeft{ float: none; width: 100%; margin-left: 0; z-index: -1;}
  #acc_airline li.fRight{ float: none; width: 90%; margin-left: 5%; margin-top: -20%;  }
  #acc_airline .airline_l1{margin-top: 0%;}
}
@media screen and (max-width: 480px) {}


/*taxi*/
#acc_taxi { margin: 0 auto 50px; padding-bottom: 50px; border-bottom: 1px solid #444444; }
#acc_taxi .ttl_area { overflow: hidden; margin-bottom: 20px;}
#acc_taxi .ttl_area .ttl { float: left; margin-right: 20px; }
#acc_taxi ul { overflow: hidden; }
#acc_taxi li { float: left; width: 50%; margin-bottom: 30px;}
#acc_taxi li img { width: 100%; height: auto; display: block; margin: 0 auto;}
#acc_taxi li.fLeft{width:50%; position: relative;}
#acc_taxi li.fLeft img{/*max-width:480px;*/}
#acc_taxi li.fLeft .note{ padding: 1em 0;}
#acc_taxi li.fRight{width:47.604166666666667%; margin-left: 2.395833333333333%; position: relative;}
#acc_taxi li.fRight p {margin-top: -15%;width:94%; margin-left: 3%; margin-bottom: 2em;}
#acc_taxi li.fRight img{display: block; margin: 0em auto 0;}
#acc_taxi li.fRight .taxi_time{max-width:460px;}
#acc_taxi li.fRight .note{position: absolute; top:1em; right: 1em; color:#FFFFFF;}
#acc_taxi li span { display: block; text-align: left; }

@media screen and (max-width: 768px) {
	#acc_taxi .ttl_area .ttl { float: none; margin-right: 0; }
  #acc_taxi li.fLeft{ float: none; width: 100%; margin-left: 0; z-index: -1;}
  #acc_taxi li.fRight{ float: none; width: 100%; margin-left: 0%; margin-top: 0%;  }
  #acc_taxi li.fRight p {margin-top: -15%;width:90%; margin-left: 5%;}
  #acc_taxi li.fRight .taxi_time{width:90%;}
  #acc_taxi li.fRight .note{position: absolute; top:1em; left: 1em; right:auto; color:#FFFFFF;}
  
}
@media screen and (max-width: 480px) {}


/*car*/
#acc_car { margin: 0 auto 50px; padding-bottom: 50px; border-bottom: 1px solid #444444; }
#acc_car .ttl_area { overflow: hidden; margin-bottom: 20px;}
#acc_car .ttl_area .ttl { float: left; margin-right: 20px; }
#acc_car ul { overflow: hidden; }
#acc_car li { float: left; width: 50%; margin-bottom: 30px;}
#acc_car li img { width: 100%; height: auto; display: block; margin: 0 auto;}
#acc_car li.fLeft{width:50%; position: relative;}
#acc_car li.fLeft .note{ position: absolute; bottom:1em; left: 1em;}
#acc_car li.fLeft .grd_screen{
  display: none;
  width:100%; height: 100%; position: absolute; top:0; left: 0;
  background-image: -moz-linear-gradient(    90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
  background-image: -ms-linear-gradient(     90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
}
#acc_car li.fRight{width:47.604166666666667%; margin-left: 2.395833333333333%; }
#acc_car li.fRight p {width:100%;margin-bottom: 2em;}
#acc_car li.fRight img{display: block; margin: 0em auto 0; width: 100%; max-width: 460px;}

@media screen and (max-width: 768px) {
	#acc_car .ttl_area .ttl { float: none; margin-right: 0; }
  #acc_car li.fLeft{
    float: none; width: 100%; margin-left: 0; z-index: -1;
  }
  #acc_car li.fLeft .note{ bottom:auto; top:1em; left: 1em;}
  #acc_car li.fLeft .grd_screen{display: block}
  #acc_car li.fRight{ float: none; width: 100%; margin-left: 0%; margin-top: 0%;  }
  #acc_car li.fRight p {margin-top: -15%;width:90%; margin-left: 5%;}
}
@media screen and (max-width: 480px) {}


/*bullettrain*/
#acc_bullettrain { margin: 0 auto 50px; padding-bottom: 50px; /*border-bottom: 1px solid #444444;*/ }
#acc_bullettrain .ttl_area { overflow: hidden; margin-bottom: 20px;}
#acc_bullettrain .ttl_area .ttl { float: left; margin-right: 20px; }
#acc_bullettrain ul { overflow: hidden; }
#acc_bullettrain li { float: left; width: 50%; margin-bottom: 30px;}
#acc_bullettrain li img { width: 100%; height: auto; display: block; margin: 0 auto;}
#acc_bullettrain li.fLeft{width:50%; position: relative;}
#acc_bullettrain li.fLeft .note{ position: absolute; bottom:1em; left: 1em;}
#acc_bullettrain li.fLeft .grd_screen{
  display: none;
  width:100%; height: 100%; position: absolute; top:0; left: 0;
  background-image: -moz-linear-gradient(    90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
  background-image: -ms-linear-gradient(     90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
}
#acc_bullettrain li.fRight{width:47.604166666666667%; margin-left: 2.395833333333333%; }
#acc_bullettrain li.fRight p {width:100%;margin-bottom: 2em;}
#acc_bullettrain li.fRight img{display: block; margin: 0em auto 0; width: 100%; max-width: 460px;}

@media screen and (max-width: 768px) {
	#acc_bullettrain .ttl_area .ttl { float: none; margin-right: 0; }
  #acc_bullettrain li.fLeft{
    float: none; width: 100%; margin-left: 0; z-index: -1;
  }
  #acc_bullettrain li.fLeft .note{ bottom:auto; top:1em; left: 1em;}
  #acc_bullettrain li.fLeft .grd_screen{display: block}
  #acc_bullettrain li.fRight{ float: none; width: 100%; margin-left: 0%; margin-top: 0%;  }
  #acc_bullettrain li.fRight p {margin-top: -15%;width:90%; margin-left: 5%;}
}
@media screen and (max-width: 480px) {}



/*future*/
#acc_future{background-color: #191919;padding: 20px 0; margin-bottom: 50px;}

/*future01*/
#acc_future01 {margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px solid #444444; }
#acc_future01 .ttl_area { overflow: hidden; margin-bottom: 30px;}
#acc_future01 .future_box ul { overflow: hidden; }
#acc_future01 .future_box li.fLeft{width:46.875%; float: left;}
#acc_future01 .future_box li.fRight{width:50%; float: right; text-align: center;}
#acc_future01 .future_box li.fRight .note{text-align: right; width:100%; display: block; padding:1em 0; max-width: 480px; margin: 0 auto;}
#acc_future01 .future_box li.fRight img{max-width:480px;}
@media screen and (max-width: 768px) {
  #acc_future01 .future_box li.fLeft { width:100%; float: none; }
  #acc_future01 .future_box li.fRight{ width:100%; float: none; }
}
@media screen and (max-width: 480px) {}


/*future02*/
#acc_future02 {margin-bottom: 50px; padding-bottom: 0px; /*border-bottom: 1px solid #444444;*/ }
#acc_future02 .ttl_area { overflow: hidden; margin-bottom: 20px;}
#acc_future02 .ttl_area .ttl { float: left; margin-right: 20px; }
#acc_future02 .future_box ul { overflow: hidden; }
#acc_future02 .future_box li.fLeft{width:40.625%; max-width: 480px; float: left; text-align: center;position: relative;}
#acc_future02 .future_box li.fLeft img{max-width:480px; }
#acc_future02 .future_box li.fLeft .note{position: absolute; bottom:1em; right:1em; color:#FFFFFF; display:block; width:100%; text-align: right;}
#acc_future02 .future_box li.fRight{width:56.25%; float: right; text-align: center; }
#acc_future02 .future_box li.fRight img{max-width:540px;}
@media screen and (max-width: 768px) {
  #acc_future02 .future_box li.fLeft { width:100%; float: none; margin-bottom: 30px; margin: 0 auto;}
  #acc_future02 .future_box li.fRight{ width:100%; float: none; margin-top: 20px;}
  #acc_future02 .future_box li.fRight img{max-width:480px;}
}
@media screen and (max-width: 480px) {}


/*future03*/
#acc_future03 {margin-bottom: 50px; padding-bottom:50px; border-bottom: 1px solid #444444; }
#acc_future03 .ttl_area { overflow: hidden; margin-bottom: 30px;}
#acc_future03 .future_box ul { overflow: hidden; text-align: center; }
#acc_future03 .future_box li.fLeft{width:79.166666666666667%; float: left; text-align: left; position: relative;}
#acc_future03 .future_box li.fRight{width:16.875%; float: right; }
#acc_future03 .future_box li.fRight .note{text-align: right; width:100%; display: block; padding:1em 0; max-width: 480px; margin: 0 auto;}
@media screen and (max-width: 768px) {
  #acc_future03 .future_box li.fLeft { width:65%;}
  #acc_future03 .future_box li.fRight{ width:30%;}
}
@media screen and (max-width: 480px) {
  #acc_future03 .future_box li.fLeft { width:100%; float: none; }
  #acc_future03 .future_box li.fRight img{max-width:162px;}
  #acc_future03 .future_box li.fRight{ width:100%; float: none; }
}

/*future04*/
#acc_future04 {margin-bottom: 20px; margin-top: 20px; padding-bottom:50px; }
#acc_future04 .ttl_area { overflow: hidden; margin-bottom: 30px;}
#acc_future04 .future_box ul { overflow: hidden; }
#acc_future04 .future_box li.fLeft{width:42.708333333333333%; float: left;}
#acc_future04 .future_box li.fRight{width:54.166666666666667%; float: right; text-align: center; }
#acc_future04 .future_box li.fRight .note{text-align: right; width:100%; display: block; padding:1em 0; max-width: 480px; margin: 0 auto;}
@media screen and (max-width: 768px) {
  #acc_future04 .future_box li.fLeft { width:100%; float: none;}
  #acc_future04 .future_box li.fRight img{max-width:520px;}
  #acc_future04 .future_box li.fRight{ width:100%; float: none;}
}
@media screen and (max-width: 480px) {
  #acc_future04 .future_box li.fLeft { width:100%; }
  #acc_future04 .future_box li.fRight{ width:100%; }
}