@charset "utf-8";

#head_base{
 box-shadow: 0 0 10px 5px rgba(0,0,0,0.1);
}

#local_nav{
 display: block;
 width: 100%;
 height: 80px;
 box-shadow: 0 0 15px 5px rgba(0,0,0,0.3);
 position: relative;
 z-index: 5;
}
#local_nav ul{
 display: flex;
 flex-wrap: wrap;
 /* justify-content: space-around; */
 align-items: center;
 width: 100%;
 max-width: 1040px;
 height: 70%;
 padding-top: 0.8em;
 margin: 0 auto;
 color: #ff8600;
}
#local_nav ul a{
 color: #000;
 text-decoration: none;
}
#local_nav ul a:hover{
 opacity: 0.6;
 transition: 0.4s;
}
#local_nav ul li{
 margin: 0 1em;
 font-size: 1.3rem;
}

.back_btn{
 display: block;
 width: 34px;
 height: 34px;
 margin: 42px 0;
}
.back_btn:hover{
 opacity: 0.6;
 transition: 0.2s;
}

#contents_base .main_container h2{
 margin-top: 0;
}
.main_container h2 span{
 display: block;
 font-size: 2.0rem;
 color: #999;
}
#contents_base .main_container h3{
 font-size: 3.0rem;
}
#contents_base section{
 margin: 0 auto;
}
#contents_base h4{
 font-size: 2.2rem;
 margin: 0 0 20px;
}

div.loc_img{
 max-width: 520px;
 margin: 0 auto;
}
table.location-tbl{
 width: 100%;
 margin: 20px auto 70px;
 border: none;
 border-collapse: collapse;
 color: #fff;
}
table.location-tbl tr.cell1{
 background-color: #818f9a;
}
table.location-tbl tr.cell2{
 background-color: #656e75;
}
table.location-tbl tr.cell3{
 background-color: #0ca6be;
}
table.location-tbl tr.cell4{
 background-color: #026d81;
}
table.location-tbl thead{
 color: #000;
 background-color: #fff;
}
table.location-tbl th,
table.location-tbl td{
 padding: 1rem;
 border: 1px solid #fff;
 text-align: center;
 vertical-align: middle;
}
table.location-tbl th{
 font-weight: 600;
}

table.glance-tbl{
 width: 100%;
 margin: 0 auto;
 border: none;
 border-collapse: collapse;
 font-size: 1.7rem;
}
table.glance-tbl th,
table.glance-tbl td{
 padding: 1rem;
 border-bottom: 1px solid #d3d3d3;
}
table.glance-tbl tr:last-child th,
table.glance-tbl tr:last-child td{
 border-bottom: none;
}
table.glance-tbl th{
 font-weight: 800;
}
table.glance-tbl td::before{
 content: ":";
 margin-right: 0.6rem;
 margin-left: -1rem;
}

div.img_container{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
div.img_container figure{
 flex: 0 0 48%;
 margin-bottom: 40px;
}
div.img_container figure img{
 display: block;
 width: 100%;
}
div.img_container figcaption{
 padding: 1rem 0;
 font-weight: 400;
 font-size: 1.35rem;
}

ul.disc{
 font-size: 1.7rem;
}
ul.disc li{
 padding: 0 0 0 25px;
 margin: 0 0 2rem 0;
}
ul.disc li::before{
 content: "";
 display: inline-block;
 vertical-align: baseline;
 width: 15px;
 height: 15px;
 border-radius: 50%;
 background-color: #000;
 margin: 0 5px 0 -20px;
}
/*--------------------------------------------------------------
transportation
--------------------------------------------------------------*/
div.loc_trans_img{
  width: 100%;
}
p.sp_zoom{
 display: none;
}
h3.mont_trans{
  padding-top: 50px;
}
table.trans_location-tbl{
 width: 100%;
 margin: 20px auto 70px;
 border: none;
 border-collapse: collapse;
 color: #fff;
}
table.trans_location-tbl td:nth-child(1){
 background-color: #9aa5ae;
}
table.trans_location-tbl td:nth-child(2){
 background-color: #848b91;
}
table.trans_location-tbl thead{
 color: #000;
 background-color: #fff;
}
table.trans_location-tbl th,
table.trans_location-tbl td{
 padding: 1rem 1rem 1rem 3rem;
 border: 1px solid #fff;
 text-align: left;
 vertical-align: middle;
}
table.trans_location-tbl th{
 font-weight: 600;
}
table.trans_location-tbl th{
 font-weight: 600;
}
table.trans_location-tbl td:nth-child(1){
 width: 24%;
}
table.trans_location-tbl td:nth-child(2){
 width: 76%;
}


/*--------------------------------------------------------------
 Mobile view
--------------------------------------------------------------*/
@media only screen and (max-width: 760px) {
 #local_nav{
  display: none;
 }
 .back_btn{
  width: 20px;
  height: 20px;
  margin: 20px 5%;
 }
 #contents_base .main_container h2 span{
  font-size: 4vw;
 }
 #contents_base .main_container h3{
  font-size: 4.75vw;
 }
 #contents_base .main_container h4{
  font-size: 4.55vw;
 }
 table.location-tbl {
  margin: 10px auto 30px;
 }
 table.location-tbl th,
 table.location-tbl td{
  font-size: 3.45vw;
 }
 table.glance-tbl{
  font-size: 4vw;
 }

 div.img_container{
  flex-direction: column;
 }
 div.img_container figure{
  flex: 0 0 100%;
  margin: 0 auto 20px;
 }
 div.img_container figcaption {
  font-size: 3vw;
  padding: 0.5rem 0;
 }
 ul.disc{
  font-size: 4.45vw;
 }
 ul.disc li::before{
  width: 13px;
  height: 13px;
 }
 /*--------------------------------------------------------------
 transportation
 --------------------------------------------------------------*/
 p.sp_zoom {
  display: block;
  text-align: right;
  padding-top: 10px;
 }
 p.sp_zoom a{
  color: #000;
 }
 p.sp_zoom a::after{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  margin: 0 0 0 10px;
  background: url(../../images/zoom_icon.png) no-repeat 50% 50%;
  background-size: cover;
 }
 h3.mont_trans{
   padding-top: 30px;
 }
 table.trans_location-tbl {
  margin: 10px auto 30px;
 }
 table.trans_location-tbl th,
 table.trans_location-tbl td{
  font-size: 3.6vw;
  padding: 1rem 3rem;
  border: none;
  border-bottom: 1px solid #fff;
 }
 table.trans_location-tbl td:nth-child(1){
   width: 100%;
 }
 table.trans_location-tbl td:nth-child(2){
   width: 100%;
 }
 table.trans_location-tbl tr{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
 }
}