/**
 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
 * http://cssreset.com
 * Copyright 2012 Yahoo! Inc. All rights reserved.
 * http://yuilibrary.com/license/
 */
/*
  TODO will need to remove settings on HTML since we can't namespace it.
  TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
  color:#000;
  background:#FFF;
}
/*
  TODO remove settings on BODY since we can't namespace it.
*/
/*
  TODO test putting a class on HEAD.
    - Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin:0;
  padding:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,
img {
  border:0;
}
/*
  TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style:normal;
  font-weight:normal;
}

ol,
ul {
  list-style:none;
}

caption,
th {
  text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size:100%;
  font-weight:normal;
}
q:before,
q:after {
  content:'';
}
abbr,
acronym {
  border:0;
  font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
  vertical-align:text-top;
}
sub {
  vertical-align:text-bottom;
}
input,
textarea,
select {
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
  *font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
  color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }

/* style.css */

/* -------------------- */
/* base
/* -------------------- */
body{
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}
li{
  list-style:none;
}
a{
    text-decoration: none;
    color:#fff;
}
img{
  width:100%;
  vertical-align: bottom;
}
main {
  padding-top: 90px; /* ヘッダーの後ろに要素が隠れないようにするため */
}



/* -------------------- */
/* header
/* -------------------- */
header {
  width: 100%; /* 幅いっぱいを指定 */
  height: 60px; /* 高さを50pxに指定 */
  background: rgb(58, 58, 58); /* 背景色にグレーを指定 */
  padding: 20px 20px; /* ヘッダーに上下左右それぞれ余白を指定 */
  box-sizing: border-box; /* padding分を含んで幅を100%にするため */
  position: fixed; /* ウィンドウを基準に画面に固定 */
  top: 0; /* 上下の固定位置を上から0pxにする */
  left: 0; /* 左右の固定位置を左から0pxにする */
  display: flex; /* 中の要素を横並びにする */
  align-items: center; /* 中の要素を上下中央に並べる */
  z-index: 99;
  float: left;
}

.header-nav .nav-list{
  /* navの横並び */
  display: flex;
  line-height:50px;
}

header .header-nav .nav-list li{
/* メニューそれぞれに間隔をあけるため */
    margin-left: 40px;
    text-align: center;
}

.nav-list {
  font: 20px ;
  font:bold ;
}

a{
  color:rgb(255, 255, 255);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
a:visited{
  color:rgb(255, 255, 255);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
a:hover {
  color: #f7f331;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}





.burger-btn{
  display: none;
}



.burger-btn{
  display: none;
}

/* ------------------ */
/* fv
/* ------------------ */
.fv{
  height:90vh;
  background-color:#141414;
  background-image: url(../img/fv-bgi@2x.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}
.main-copy{
   font-size: 50px;
   color: #fff;
   font-weight: bold;
   border:2px solid #fff;
   padding: 34px 42px;
}

/* ------------------ */
/* about
/* ------------------ */
.section-title{
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 70px;
}
h3{
  font-size: 2.4rem;
  font-weight: bold;
  line-height:2;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.section-wrapper{
  padding:100px 10% 50px; 
  
}




@media screen and (max-width:768px){
  /* ----------------------- */
  /* base_sp
  /* ----------------------- */
  

  /* ------------------ */
  /* humberger-menu */
  /* ------------------ */
  .header{
      padding: 0 5%;
  }
  .burger-btn{
      display: block;
      width: 39px;
      height: 39px;
      position: relative;
      z-index: 3;
  /*   codepenの挙動のため */
    background-color:transparent;
    border:none;
    }
    .bar{
      width: 20px;
      height: 1px;
      display: block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
    }
    .bar_top{
      top: 10px;
    }
    .bar_mid{
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .bar_bottom{
      bottom: 10px;
    }
    .burger-btn.close .bar_top{
      transform: translate(-50%,10px) rotate(45deg);
      transition: transform .3s;
    }
    .burger-btn.close .bar_mid{
      opacity: 0;
      transition: opacity .3s;
    }
    .burger-btn.close .bar_bottom{
      transform: translate(-50%,-8px) rotate(-45deg);
      transition: transform .3s;
    }
    .nav-wrapper{
      display: none;
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2;/*キービジュアルと.btn_triggerとの重なりの前後関係を調整*/
     }
     .header-nav{
        width: 100%;
        height: 100%;
        background-color:rgb(58,58,58);
        z-index: 2;
      }
     .header-nav .nav-list{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
      }
      .header-nav .nav-item{
        margin-right: 0;
        margin-bottom: 40px;
      }
  
  /* ------------------ */
  /* fv */
  /* ------------------ */
  .main-copy{
    font-size: 30px;
  }
  
  /* ------------------ */
  /* about h3:大見出し h4:中見出し*/
  /* ------------------ */

h3 {
  font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
  line-height: 1.3;
}
.section-wrapper{
  padding:100px 5% 50px;  
}

h4 {
  font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
  line-height: 1.3;
}
@media (min-width: 1200px) {/* 1200px以上*/
  h3 {
      font-size: 1rem;/* 36px*/
  }
  h4 {
      font-size: 2.4rem;/* 24px*/
  }
}
@media screen and (max-width: 640px) {/* 640px以下*/
  body{
  line-height: 2;
  }
  h3{
      font-size: 1rem;/* 24px*/
  }
  h4 {
      font-size: 2rem;/* 20px*/
  }

}
}
.section-title2{
text-align: center;

}
.section-wrapper2{
background-color: black;
color: white;
}


.about-title1{
text-align: center;

}
/******1　モノクロのこだわり*******/

.box1{
margin:10%;
}

h6 {
  font-size: 2vw;
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  border: 2px solid rgb(255, 255, 255);
}

h6:before {
  position: absolute;
  top: -150%;
  left: -75px;
  width: 200px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: rgb(255, 255, 255);
}

h6 span {
  font-size: 40px;
  font-size: 4rem;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 3px;
  padding-left: 16px;
  color: rgb(0, 0, 0);
}

/******フッター****/
.footer{
  background: rgb(58, 58, 58); /* 背景色にグレーを指定 */
  color: white;
  text-align: center;
 }

/* PC用のCSSはメディアクエリの外に記述する */

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
  .footer{
    background: rgb(58, 58, 58); /* 背景色にグレーを指定 */
    color: white;
    text-align: center;
    font-size: 20%;
   }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
  .footer{
    background: rgb(58, 58, 58); /* 背景色にグレーを指定 */
    color: white;
    text-align: center;
    font-size: 20%;
   }
}

/***map***/

.map{
  padding: 0.5em 1em ;
  margin: 2em 10em;
  background-color:#ffffff;/*背景色*/
  border:1px solid rgb(58,58,58);/*枠線*/
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
  color:#000000;/*文字色*/
  
}


/*ポップアップここから*/
.popup_wrap input {
  display: none;
}

.popup_overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}

.popup_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}

.popup_content {
  position: relative;
  align-self: center;
  width: 90%;
  max-width: 45%;
  padding: 30px 30px 15px;
  box-sizing: border-box;
  background: #fff;
  line-height: 1.4em;
  transition: 0.5s;
}

.popup_content img {

max-width: 50%;
max-height: 30%;
}

.close_btn {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 30px;
  cursor: pointer;
}

.popup_wrap input:checked ~ .popup_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}

.open_btn {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 30px;
  margin:10px auto;
  padding: 8px 16px;
  color: #fff;
  background:#0c0d62;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  cursor: pointer;
  transition: .3s ease;

}
.open_btn:hover{
    background:#000;
    color:#fff;
    transition: .3s ease;
}
/*ポップアップココまで*/


/***map***/

.map2{
  padding: 0.5em 1em ;
  margin: 2em 10em;
  background-color:#ffffff;/*背景色*/
  border:1px solid rgb(58,58,58);/*枠線*/
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
  color:#000000;/*文字色*/
  
}
/*ポップアップここから2*/
.popup_wrap2 input {
  display: none;
}

.popup_overlay2 {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}

.popup_trigger2 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.popup_content2 {
  position: relative;
  text-align: center;
  align-self: center;
  width: 90%;
  max-width: 80%;
  padding: 30px 30px 15px;
  box-sizing: border-box;
  background: #fff;
  line-height: 1.4em;
  transition: 0.5s;
}

.popup_content2 img {

max-width: 50%;
max-height: 50%;
}

.close_btn2 {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 30px;
  cursor: pointer;
}

.popup_wrap2 input:checked ~ .popup_overlay2 {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}

.open_btn2 {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 30px;
  margin:10px auto;
  padding: 8px 16px;
  color: #fff;
  background:#0c0d62;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  cursor: pointer;
  transition: .3s ease;

}
.open_btn2:hover{
    background:#000;
    color:#fff;
    transition: .3s ease;
}
/*ポップアップココまで*/


.googlemap{
  background-color:#ffffff;/*背景色*/
  border:1px solid rgb(58,58,58);/*枠線*/
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
  color:#000000;/*文字色*/
  margin: 0.5em; 
  padding: 0.5em;
  box-sizing: border-box;
  max-width: 100rem;
}

.gmap {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  }

  .gmap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  }
  

.right-column1{
  background-color:#ffffff;/*背景色*/
  border:1px solid rgb(58,58,58);/*枠線*/
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
  color:#000000;/*文字色*/
  margin: 0.5rem; 
  padding: 1rem;
  box-sizing: border-box;
  width: 50%;
}

.right-column2{
  background-color:#ffffff;/*背景色*/
  border:1px solid rgb(58,58,58);/*枠線*/
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
  color:#000000;/*文字色*/
  margin: 0.5rem; 
  padding: 1rem;
  box-sizing: border-box;
  width: 50%;
}

.right-column3{
  background-color:#ffffff;/*背景色*/
  border:1px solid rgb(58,58,58);/*枠線*/
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
  color:#000000;/*文字色*/
  margin: 0.5rem; 
  padding: 1rem;
  box-sizing: border-box;
  width: 100%;
}

h10{
  font-size: 2em;
  text-align: center;
  }

h11{
  font-size: 2em;
  text-align: center;
  }

.right-column1 p{
padding: 20px;
font-size: 1rem;
}

.right-column2 p{
  padding: 20px;
  font-size: 1rem;
  }

.right-column3 p{
 padding: 20px;
 font-size: 1rem;
 }

.cut2{
  display: flex;
  margin:0%;
  padding:0%;
}



.train {

  padding-left: 30px;
  line-height: 20px;
  background: url(../img/train2.png) no-repeat;
}


.car {

  padding-left: 30px;
  line-height: 30px;
  background: url(../img/car2.png) no-repeat;
}

h18{
padding:0.75rem;

}

.download{
text-align: center;
}
.download a{
  text-decoration:none;
  text-align: center;
}

.dlb{
color:#fff;
width: 50%;
margin-left: 25%;
padding:5px;
margin-top:15px;
background-color:#0c0d62;
border-radius: 50px;
box-shadow:0px 2px 2px #999;
}




@media screen and (max-width: 959px) {
  .map{
    padding: 0.25em 0.5em ;
    margin: 1em 2em;
    background-color:#ffffff;/*背景色*/
    border:1px solid rgb(58,58,58);/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
    
  }
  .googlemap{
    background-color:#ffffff;/*背景色*/
    border:1px solid rgb(58,58,58);/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
    margin: 1rem; 
    padding: 1rem;
    box-sizing: border-box;
    max-width: 40rem;
  }

  .right-column1{
    background-color:#ffffff;/*背景色*/
    border:1px solid rgb(58,58,58);/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
    margin: 1rem; 
    padding: 1rem;
    box-sizing: border-box;
    max-width: 40rem;
  }

  .right-column2{
    background-color:#ffffff;/*背景色*/
    border:1px solid rgb(58,58,58);/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
    margin: 1rem; 
    padding: 1rem;
    box-sizing: border-box;
    max-width: 40rem;
  }
 h18{font-size:  2rem;
  }
 h10{font-size: 1.5rem;
    font-weight: bold;
 }
 h11{font-size: 1.5rem;
  font-weight: bold;
 }
  
  
  .popup_content {
    position: relative;
    align-self: center;
    width: 90%;
    max-width: 50%;
    padding: 15px 15px 7.5px;
    box-sizing: border-box;
    background: #fff;
    line-height: 1.4em;
    transition: 0.5s;
    font-size: 0.75rem;
  }
 
  .popup_overlay {
    display: flex;
    justify-content: center;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.5s, transform 0s 0.5s;
    transform: scale(0);
  }
  .map2{
    padding: 0.25em 0.5em ;
    margin: 1em 2em;
    background-color:#ffffff;/*背景色*/
    border:1px solid rgb(58,58,58);/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
    
  }

  .map h3{font-size: 1.5rem;
  }
  
  .map2 p{font-size: 1rem;
  }
  
  .map2 h3{font-size: 1.5rem;
  }
  
  .cut2 p{font-size: 0.6rem;
  }
  .section-title{font-size: 2rem;
    margin-bottom: 10px;
  }
  .cut2{
    display: flex;
  }
  }
  




@media screen and (max-width: 480px) {
  .map{
    padding: 0.25em 0.5em ;
    margin: 1em 2em;
    background-color:#ffffff;/*背景色*/
    border:1px solid rgb(58,58,58);/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
    
  }
  .googlemap{
    background-color:#ffffff;/*背景色*/
    border:1px solid rgb(58,58,58);/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
    margin: 0.25rem 0.07rem; 
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
  }

  .right-column1{
    background-color:#ffffff;/*背景色*/
    border:1px solid rgb(58,58,58);/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
    margin: 0.25rem 0.07rem; 
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;

  }

  .right-column2{
    background-color:#ffffff;/*背景色*/
    border:1px solid rgb(58,58,58);/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
    margin: 0.25rem 0.07rem; 
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
  }


  
  .popup_content {
    position: relative;
    align-self: center;
    width: 90%;
    max-width: 50%;
    padding: 15px 15px 7.5px;
    box-sizing: border-box;
    background: #fff;
    line-height: 1.4em;
    transition: 0.5s;
    font-size: 0.75rem;
  }
  h10{font-size: 1.15rem;
      font-weight: bold;
  }
  h11{font-size: 1.15rem;
    font-weight: bold;
}
.train {

  padding-left: 10px;
  line-height: 10px;
  background: url(../img/train3.png) no-repeat;
}


.car {

  padding-left: 10px;
  line-height: 10px;
  background: url(../img/car3.png) no-repeat;
}

.cut2 p{font-size: 0.5rem;
}
.section-title{font-size: 2rem;
  margin-bottom: 10px;
}


.map h3{font-size: 0.5rem;
}

.map2 p{font-size: 0.5rem;
}

.map2 h3{font-size: 0.5rem;
}

h18{font-size:  0.8rem;
}
  .popup_overlay {
    display: flex;
    justify-content: center;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.5s, transform 0s 0.5s;
    transform: scale(0);
  }
  .map2{
    padding: 0.25em 0.5em ;
    margin: 1em 2em;
    background-color:#ffffff;/*背景色*/
    border:1px solid rgb(58,58,58);/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
    
  }
  .cut2{
    display:block;
  }
  .right-column3 p{font-size: 0.2rem;
  }
  .right-column3 h18{font-size: 0.6rem;
  }
  

}