/*---------- mainvisual ----------*/
#mainvisual{
  background-color:#000;
  text-align:right;
  position: relative;
  top:0;
  left:0;
}
#mainvisual img{
  position: relative;
  top:0;
  right:0;
  z-index: 0;
}
#mainvisual > .title{
  font-size:80px;
  line-height:1.2;
  text-align:left;
  color:#fff;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 5px;
  position: absolute;
  top:18%;
  left:150px;
  z-index: 1;
}
#mainvisual > .subcopy{
  font-size:21px;
  line-height:1.7;
  text-align:left;
  color:#fff;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 2px;
  position: absolute;
  top:60%;
  left:150px;
  z-index: 1;
}



/*---------- contents ----------*/
#contents{
  width:1000px;
  overflow: hidden;
  clear: both;
}
.contents_wrapper{
  width:1000px;
  margin:50px 0;
  text-align: left;
  overflow: hidden;
  clear: both;
}
.contents_wrapper > .wrapper_l{width:430px;margin-right:70px;float: left;}
.contents_wrapper > .wrapper_r{width:500px;float: right;}

/*---- title & midashi ----*/
.subtitle{
  margin-top: 130px;
  font-size:35px;
  line-height:1.5;
  text-align: left;
  color:#000;
  letter-spacing: 2px;
  font-family: 'Open Sans', sans-serif;
  position: relative;
  top:0;
}
.subtitle:before,.subtitle:after{
  content: '';
  width:10px;
  height:30px;
  position: absolute;
}
.subtitle:before{background-color:#00936b;top:-45px;left:0;}
.subtitle:after{background-color:#c7c7c7;top:-35px;left:10px;}
.midashi{
  margin:55px 0 15px;
  font-size:23px;
  line-height:1.5;
  text-align: left;
  font-weight: bold;
  letter-spacing: 2px;
}

/*---- btn ----*/
.morebtn{
  border:3px solid #000;
  margin-top:30px;
  padding:12px 10px;
  width:174px;
  height:auto;
  font-size:16px;
  text-align: left;
  letter-spacing: 2px;
  font-family: 'Open Sans', sans-serif;
  position: relative;
  top:0;
  left:0;
}
.morebtn a{color:#000;display: block;}
.morebtn:after{
  content:'';
  position: absolute;
  top:17px;
  right:17px;
  width:12px;
  height:12px;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  border-radius: 2px;
  transform: rotate(45deg);
}


/*------------------------------
PC
------------------------------*/
@media screen and (min-width: 1020px){
  .pc_none{display:none;}
  #inbox{
    transform: translate(300px);
    transition: all 0.8s;
  }
  #inbox.open{transform: translate(0); }
  #mainvisual{width:100%;}
  #mainvisual img{width:850px;height:auto;box-sizing: border-box;}
}

/*------------------------------
 Tablet
------------------------------*/
@media (max-width: 1019px) and (min-width: 768px) {
  .sp_none{display:none;}
  
  /*---- mainvisual ----*/
  #mainvisual{padding-top:40%;}
  #mainvisual img{width:100%;}
  #mainvisual > .title{
    font-size:400%;
    line-height:1.2;
    text-align:center;
    color:#fff;
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 5px;
    position: absolute;
    top:28%;
    left:6%;
    z-index: 1;
  }
  #mainvisual > .title br{display:none;}
  #mainvisual > .subcopy{
    font-size:164%;
    line-height:1.5;
    text-align:center;
    letter-spacing: 1px;
    top:40%;
    left:24%;
    z-index: 1;
  }

  
  /*---- contents ----*/
  #contents{width:90%;padding:0 5%;}
  .contents_wrapper{width:100%;margin:30px 0;}
  .contents_wrapper > .wrapper_l,
  .contents_wrapper > .wrapper_r{width:100%;margin-right:0;clear:both;}
  .contents_wrapper > .wrapper_r{margin-top:30px;}
  
  /*---- title & midashi ----*/
  .subtitle{font-size:25px; margin-top: 50px;}
  .midashi{margin:35px 0 15px; font-size:130%;}
  
  
  
}


/*------------------------------
 Smartphone
------------------------------*/
@media only screen and (max-width:767px){
  .sp_none{display:none;}
  
  /*---- mainvisual ----*/
  #mainvisual{padding-top:0;}
  #mainvisual img{width:100%;}
  #mainvisual > .title{
    font-size:260%;
    line-height:1.2;
    text-align:center;
    color:#fff;
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 5px;
    position: absolute;
    top:25%;
    left:22%;
    z-index: 1;
  }
  #mainvisual > .subcopy{
    font-size:92%;
    line-height:1.2;
    text-align:center;
    letter-spacing: 1px;
    top:60%;
    left:18%;
    z-index: 1;
  }

  
  /*---- contents ----*/
  #contents{width:90%;padding:0 5%;}
  .contents_wrapper{width:100%;margin:30px 0;}
  .contents_wrapper > .wrapper_l,
  .contents_wrapper > .wrapper_r{width:100%;margin-right:0;clear:both;}
  .contents_wrapper > .wrapper_r{margin-top:30px;}
  
  /*---- title & midashi ----*/
  .subtitle{font-size:25px; margin-top: 50px;}
  .midashi{margin:35px 0 15px; font-size:130%;}
  
  
}