/*html{
  height:100%;
  overflow:hidden !important;
}
body{
  height:100%;
  overflow:auto !important;
}*/



*{box-sizing: border-box;}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.sub{
  margin-left:1em;
  text-indent:-1em;
  font-size:80%;
}

img{border-width:0;}
body{background-color:#FFF;margin:0;position:relative;font-size:16px;font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;}
#wrapper{width:100%;overflow-x:hidden;}
section{width:100%;position:relative;}
main,nav,.content,footer{
  width:100%;
  max-width:800px;
  padding:2%;
  margin:0 auto;
  display:block;
}

#pagetop{
  position:fixed;
  bottom:2%;
  right:2%;
  width:15%;
  max-width:120px;
  z-index:99;
  cursor:pointer;
  bottom:-40%;
}

#menu,
#spec{
  background-image:url(../images/common/bg2.jpg);
}
#menu{
  border:2px #000 solid;
  border-width:2px 0;
  z-index:5;
}


#menu nav{
  text-align:center;
  padding:0.6% 2%;
}
#menu nav>span,
#menu nav a{
  display:inline-block;
  width:32.5%;
  width:24.5%;
  text-align:center;
  text-decoration: none;
  font-size:150%;
  color:#FFF;
  text-shadow:0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 10px #000;
  position:relative;
  transform:scale(0.95,1);
  -ms-transform:scale(0.95,1);
  padding:2% 1%;
  background-color:rgba(0,0,0,0.5);
}

#menu nav>span{
  opacity:0.2;
}

/*#menu nav a[href^="#"]:after{
  content:"";
  display:block;
  width:0;
  height:0;
  border:10px rgba(0,0,0,0.5) solid;
  border-color:rgba(0,0,0,0.5) transparent transparent transparent;
  position: absolute;
  bottom:-20px;
  left:50%;
  transform:translate(-50%,0);
  -ms-transform:translate(-50%,0);
}*/

#menu nav a.check:before{
  content:"CHECK";
  display:block;
  background-color:#F00;
  color:#FF0;
  position: absolute;
  padding:0 7%;
  font-size:30%;
  top:-10%;
  left:50%;
  text-shadow:none;
  transform:translate(-50%,0);
  -ms-transform:translate(-50%,0);
  /*animation: blink 0.5s ease -0.1s infinite alternate;
  -ms-animation: blink 0.5s ease -0.1s infinite alternate;*/
}

@keyframes blink{
  0% {opacity: 0.2;}
  100% {opacity:1;}
}

#menu nav a.currentmenu{
  background-color:#FFF !important;
  text-shadow:none;
  color:#222;
}
#menu nav a.currentmenu:after{
  content:"";
  display:block;
  width:0;
  height:0;
  border:15px #FFF solid;
  border-color:#FFF transparent transparent transparent;
  position: absolute;
  bottom:-28px;
  left:50%;
  transform:translate(-50%,0);
  -ms-transform:translate(-50%,0);
}


#twitter,#banners{
  background-color:#e5e6e8;
  background:linear-gradient(to bottom,#d2d6df,#FFF);
}

#banners{
  padding:5%;
}

.banner_full,
.banner_double{
  width:100%;
  margin:0 auto;
  margin-top:1.7%;
  max-width:750px;
}
.banner_full img{
  display:block;
  width:100%;
  margin:1.7% 0;
}


.banner_double{
  letter-spacing:-0.3em;
}
.banner_double img{
  display:inline-block;
  width:49%;
  max-width:397px;
  margin:0;
}

.banner_double a:last-child img{
  margin-left:1.7%;
}

#twitter{
  padding-top:5%;
  margin-top:-0.2%;
}

#twitter .content{
  background-image:url(../images/twitter/image.png);
  background-repeat: no-repeat;
  background-size: 62% auto;
  background-position: top right;
}

#twitter #timeline{
  width:65%;
  border:1px #CCC solid;
  padding:0.3%;
  background-color:#FFF;
  margin-bottom:1%;
  border-radius:4px;
}
#twitter #timeline iframe{
  /*width:100% !important;*/
}
#twitter a img{
  width:65%;
}

h2{
  width:100%;
  text-align:center;
  color:#f14704;
  padding:5% 0;
  font-weight:bold;
  font-size:220%;
  text-shadow:0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 10px #000;
  line-height:1.2;
  position:relative;
  /*transform:scale(0.95,1);
  -ms-transform:scale(0.95,1);*/
}

.textset{
  display:inline-block;
}
article{
  width:100%;
  text-align:left;
  color:#DDD;
  text-shadow:0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 10px #000;
  font-size:120%;
  line-height:1.8;
  /*transform:scale(0.95,1);
  -ms-transform:scale(0.95,1);*/
}

.link_bt{
  display:block;
  width:50%;
  padding:2% 5%;
  background-color:rgba(155,30,0,0.8);
  color:#DDD;
  text-align: center;
  text-decoration: none;
  border:1px #9a0909 solid;
  margin:10% auto 0;
  font-size:120%;
  /*transform:scale(0.95,1);
  -ms-transform:scale(0.95,1);*/
}

span.link_bt{
  color:#999;
  border:1px #666 solid;
  background-color:rgba(0,0,0,0.5);
}

span.link_bt>span{
  color:#FFF;
  font-weight:bold;
}


.content hr{
  height:1px;
  border:1px rgba(255,255,255,0.3) dotted;
  border-width:1px 0 0 0;
  width:100%;
  display:block;
  margin:7% 0;
}

figure{
  width:100%;
  margin:0 auto;
  padding:0;
  text-align:center;
  margin-top:3%;
}

figure a{
  display:inline-block;
  width:32%;
  position:relative;
  text-decoration: none;
}

figure a:after{
  content:"＋";
  display:block;
  color:#222;
  font-size:16px;
  width:20px;
  height:20px;
  line-height:20px;
  background-color:rgba(255,255,255,0.8);
  position:absolute;
  bottom:14px;
  right:5px;
  text-align:center;
  border:1px #333 solid;
  text-shadow:none;
}

figure img{
  border:1px #555 solid;
}
figure a img{
  width:100%;
}


#site_attention{
  background-color:#000;
  color:#DDD;
}


#spec{
  padding-bottom:4%;
}


#spec img#spec_package{
  float:left;
  width:22%;
}
#spec table{
  width:100%;
  border-collapse: collapse;
  color:#FFF;
  float:right;
  width:73%;
}
#spec table th,
#spec table td{
  padding:0.7% 1%;
  border:1px #555 dotted;
  border-width:1px 0 0;
}

#spec table tr:first-child th,
#spec table tr:first-child td{
  border-width:0;
}
#spec table th{
  width:120px;
  text-align:left;
  font-weight:normal;
}

#spec .sub{
  color:#BBB;
}

#spec h5{
  margin:0;
  padding:0;
  padding-top:2%;
  color:#FFF;
  font-size:200%;
  text-align:center;
}

img#banner_officialsite{
  width:100%;
  display:block;
  margin:0 auto;
  margin-bottom:5%;
  border:1px #555 solid;
  border-width:0 1px 1px 1px;
}


#spec #dl_price{
  /*background-color:#700;
  border:1px #920 solid;
  color:#FFA;*/
  background-color:#555;
  border:1px #777 solid;
  color:#989898;

  padding:2%;
  line-height:1.2;
}
.word{
  display:inline-block;
}

footer{
  text-align:center;
}
footer #links a{
  font-size:80%;
  text-decoration: none;
  color:#222;
}
footer #socialbuttons{
  text-align:center;
  margin:5% 0;
}
footer #socialbuttons img{
  width:20%;
  max-width:45px;
  margin:0 1%;
}

footer #copyright{
  font-size:75%;
}

footer #copyright img{
  max-width:465px;
  width:70%;
  margin-bottom:3%;
}

@media screen and (max-width:768px){
  /*#twitter .content{
    background-position:bottom right;
  }
*/
  #menu nav a{
    font-size:3vw;
  }
}

@media screen and (max-width:640px){
  body{font-size:14px;}
  .link_bt{
    width:60%;
  }

  #twitter #timeline iframe{
    height:350px !important;
  }

  /*#menu nav{
    padding:5% 2%;
  }*/
}

@media screen and (max-width:480px){
  #menu nav a{
    padding:5% 1%;
  }

  h2{
    font-size:5.5vw;
  }
  #twitter,.content{
    padding:5%;
  }
  #menu nav a{
    /*font-size:120%;*/
  }
  #menu nav a.check:before{
    font-size:20%;
  }
  #menu nav a:after{
    width:5px;
    height:5px;
    bottom:-7px;
  }
  #twitter .content{
    background-image:none;
  }
  #twitter #timeline{
    width:100%;
  }
  #twitter a img{
    width:100%;
  }


  #spec img#spec_package,
  #spec .sub{
    float:none;
    display:none;
  }
  #spec table{
    float:none;
    width:100%;
  }
}

@media screen and (max-width:360px){
  #menu{
    font-size:12px;
  }
  #menu nav a{
    /*font-size:100%;*/
  }
}