@charset "UTF-8";

.AllWrap{
  background: url(../img/common/bg.jpg);
  background-size: cover;
  min-width: 1080px;
  color:#FFF;
}
.AllWrap:before{
  content:url(../img/common/moon.png);
  position: absolute;
  right: 0;
  top: 0;
}
footer:before{
  content:"";
  position: absolute;
  bottom: 247px;
  display: block;
  width: 100%;
  background: url(../img/common/stage.png) center bottom no-repeat;
  height: 1000px;
  background-size:100% auto;
  z-index: 1;
}
a{
  color:#FFF;
  text-decoration:none;
}
a:hover{
  color:#FFF;
  text-decoration:underline;
}

nav{
  padding: 26px 0px 450px 24px;
  float: left;
  position:relative;
  z-index: 110;
}
nav a{
  transition:all 0.3s;
}
nav a:hover{
  opacity:0.7;
}

nav h1{
  margin: 0 0 26px;
}
nav .catch{
  margin:0 0 20px
}
.AllWrap nav h1{
  background: url(../img/common/left/logo_in.png) no-repeat;
  transition:all 0.3s;
}
.AllWrap nav h1:hover{
  opacity:0.7;
}

.AllWrap nav h1 img {
  opacity:0;
}
nav .catch{
  margin: 0 0 6px;
}
.AllWrap nav .catch{
/*   background: url(../img/common/left/bnr_package.png) no-repeat; */
  padding:0 0 5px
}
nav .grobal{
  background: url(../img/common/left/menu/menu_bg.png) no-repeat;
  padding: 44px 30px 60px;
  width: 180px;
}
nav .grobal li{
  display:block;
  text-align:center;
  background: url(../img/common/left/menu/menu_line.png) bottom no-repeat;
}
nav .grobal a{
  display:block;
  width: 160px;
  height: 16px;
  padding: 15px 10px 11px;
}
nav .grobal .sns a{
  display:inline;
  width: auto;
  padding: 0;
}
nav .grobal li.yet{
  padding: 13px;
}
nav .grobal li.yet img{
  opacity: 0.3;
}
nav .grobal li.sns{
  background:none;
}
nav .grobal li.sns p{
  display:inline-block;
  margin: 20px 8px 0;
}
nav .link{

}
nav .link p{
  margin: 0px 0 4px;
}
nav .link p:nth-child(3) {
  margin: 0px 0 10px;
}
.contents_in{
  width: 740px;
  margin:0 auto;
  padding-left: 260px;
  padding-bottom: 450px;
  z-index: 100;
  position: relative;
}

.contents_in h2{
  padding: 70px 0 40px;
  text-align:center;
  margin: 0 0 50px;
  background: url(../img/common/line_deco.png) center bottom no-repeat;
}
footer{
  clear:both;
  background:url(../img/bg.gif) center top repeat;
  padding:30px 0 30px;
  position: relative;
  z-index: 50;
}
footer::after {
  content: "";
  width: 100%;
  height: 6px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 3px solid #BBA441;
  border-bottom: 1px solid #BBA441;
  z-index: 1;
}
footer .link{
  text-align:center;
}
footer .link li{
  display:inline-block;
  transition:all 0.3s;
  margin:0 10px 20px;
  font-size:0;
}
footer .link li:hover{
  opacity:0.8;
}
.l-footer__userdata {
  display: block;
  text-align: center;
  margin-top: 30px;
  font-size: 12px;
}

.l-footer__userdata-link {
  text-decoration: underline;
}

.l-footer__userdata-link:hover {
  text-decoration: none;
}
footer .copy{
  text-align:center;
  margin:30px 0 0;
  color:#FFF;
  font-size:13px;
}
.notfound{
  text-align:center;
  padding:100px 0;
  font-size:18px;
  position: relative;
  z-index: 100;
}
.notfound p{
  margin:30px;
}
.notfound a{
  transition:0.3s all;
  display: block;
  width: 184px;
  margin: 0 auto;
}
.notfound a:hover{
  opacity:0.7;
}
.smp .contents_in{
  min-height:1150px;
}
/****************************************
Float Youtube
****************************************/

#floatBg {
  background: #000;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: none;
  opacity: 0.9;
}
#YoutubeBg{
  position:fixed;
  left: 50%;
  top:50%;
  margin: -270px 0 0 -480px;
  z-index: 1000;
  background: #000;
  height: 540px;
  width: 960px;
  opacity: 0;
  display:none\9;
}
#YoutubeWrap{
  position:fixed;
  left: 50%;
  top:50%;
  margin: -270px 0 0 -480px;
  z-index: 9999;
  background: #000;
  height: 394px;
}
#movieWrapfloatBg {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  text-align:center;
  z-index:9999;
}
#movieWrap .floatImage{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -255px 0 0 -350px;
}
#movieWrap .floatImage p{
}
#movieWrap .floatImage p.btn_close2{
  margin:30px 0;
  cursor: pointer;
}
#movieWrap .floatImage .mainImage{
  height:550px;
  opacity:0;
}
#movieWrap .floatImage .mainImage img{
  height:550px;
}
#banner_area{
    position: absolute;
    top: 240px;
    margin: 0 23px;
}
#banner_area li{
    float: left;
    margin: 15px;
}
.btn_close{
  display:block;
  position: fixed;
  top: 50%;
  left:50%;
  cursor:pointer;
  margin: -270px 0 0 500px;
  z-index: 9999;
}
#ImageWrap{
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  text-align:center;
  z-index:9999;
}
#ImageWrap .floatImage{
  height: 600px;
  width:100%;
  position: absolute;
  top: 50%;
  margin: -335px 0 0 0;
}
#ImageWrap .floatImage p{
  margin:10px 0;
}
#ImageWrap .floatImage p.btn_close2{
  margin:30px 0;
  cursor: pointer;
}
#ImageWrap .floatImage .mainImage{
  height:550px;
  opacity:0;
}
#ImageWrap .floatImage .mainImage img{
  height:550px;
}
.linerFloatTop{
  width: 700px;
  height: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #ddd;
  margin: -185px 0 0 -350px;
  overflow:hidden;
}
.linerFloatTop .synapse{
  width:10%;
  height:1px;
  background:#23d1de;
  position:absolute;
  left:-10%;
}
.linerFloatBottom{
  width: 700px;
  height: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #ddd;
  margin: 260px 0 0 -350px;
  overflow:hidden;
}
.linerFloatBottom .synapse{
  width:10%;
  height:1px;
  background:#23d1de;
  position:absolute;
  right:-10%;
}
.star__wrap{
  position:absolute;
  top: 150px;
  left: 20px;
  min-width: 1000px;
  overflow: hidden;
  height: 100%;
}
.star {
  display:block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#FFF;
  top:100px;
  left:400px;
  position:relative;
  transform-origin:100% 0;
  animation:star-ani 5s infinite ease-out;
  animation-direction: normal;
  opacity:0;
  display: none\9;
}
.star:after {
  content:'';
  position:absolute;
  top:0px;
  left:4px;
  border:2px solid #F00;
  border-width:2px 150px 2px 150px;
  border-color:transparent transparent transparent #FFF;
  transform:rotate(-45deg) translate3d(1px, -1px, 0);
  transform-origin:0% 100%;
  animation:shooting-ani 5s infinite  ease-out;
  animation-direction: normal;
  display: none\9;
}

.hiro {
  top:150px;
  left:500px;
  background:#2d66a9 ;
  animation-delay:1.3s;
}
.hiro:after {
  border-color:transparent transparent transparent #2d66a9 ;
  animation-delay:1.3s;
}

.koji {
  top: 20px;
  left: 530px;
  background:#7f338e;
  animation-delay:1.5s;
}
.koji:after {
  border-color:transparent transparent transparent #7f338e ;
  animation-delay:1.5s;
}

.kaduki {
  top: 370px;
  left: 450px;
  background:#55aa4f;
  animation-delay:2.2s;
}
.kaduki:after {
  border-color:transparent transparent transparent #55aa4f;
  animation-delay:2.2s;
}
.shin {
  top: 0px;
  left: 720px;
  background:#e95257;
  animation-delay:2.5s;
}
.shin:after {
  border-color:transparent transparent transparent #e95257;
  animation-delay:2.5s;
}
.yukinojo {
  top: 290px;
  left: 760px;
  background:#436ea5;
  animation-delay:4.2s;
}
.yukinojo:after {
  border-color:transparent transparent transparent #436ea5;
  animation-delay:4.2s;
}
.taiga{
  top: 80px;
  left: 760px;
  background:#62b25d;
  animation-delay:3.3s;
}
.taiga:after {
  border-color:transparent transparent transparent #62b25d;
  animation-delay:3.3s;
}
.kakeru{
  top: 370px;
  left: 850px;
  background:#ef7931;
  animation-delay:3.7s;
}
.kakeru:after {
  border-color:transparent transparent transparent #ef7931;
  animation-delay:3.7s;
}
.minato{
  top: 0px;
  left: 970px;
  background:#61bde2;
  animation-delay:4.1s;
}
.minato:after {
  border-color:transparent transparent transparent #61bde2;
  animation-delay:4.1s;
}
.leo{
  top: 240px;
  left: 900px;
  background:#61bde2;
  animation-delay:5.3s;
}
.leo:after {
  border-color:transparent transparent transparent #ed6162;
  animation-delay:5.3s;
}
.yu{
  top: 470px;
  left: 1000px;
  background:#ed6498;
  animation-delay:5.6s;
}
.yu:after {
  border-color:transparent transparent transparent #ed6498;
  animation-delay:5.6s;
}
@-webkit-keyframes shooting-ani {
  0% {

  }
  50% {
    transform:scale(1) rotate(-45deg) translate(0px, 0px);
  }
  100% {
    transform:scale(0.5) rotate(-45deg) translate(0px, -1px);
  }
}
@-moz-keyframes shooting-ani {
  0% {

  }
  50% {
    transform:scale(1) rotate(-45deg) translate(0px, 0px);
  }
  100% {
    transform:scale(0.5) rotate(-45deg) translate(0px, -1px);
  }
}
@-ms-keyframes shooting-ani {
  0% {

  }
  50% {
    transform:scale(1) rotate(-45deg) translate(0px, 0px);
  }
  100% {
    transform:scale(0.5) rotate(-45deg) translate(0px, -1px);
  }
}
@-webkit-keyframes star-ani {
  0% {
    opacity:0;
    transform:scale(0) rotate(0) translate3d(0, 0, 0);
  }
  10% {
    opacity:1;
    transform:scale(1) rotate(0) translate3d(-200px, 200px, 0);
  }
  20% {
    opacity:0;
    transform:scale(1) rotate(0) translate3d(-300px, 300px, 0);
  }
  100% {
    opacity:0;
    transform:scale(1) rotate(0) translate3d(-300px, 300px, 0);
  }
}
@-moz-keyframes star-ani {
  0% {
    opacity:0;
    transform:scale(0) rotate(0) translate3d(0, 0, 0);
  }
  10% {
    opacity:1;
    transform:scale(1) rotate(0) translate3d(-200px, 200px, 0);
  }
  20% {
    opacity:0;
    transform:scale(1) rotate(0) translate3d(-300px, 300px, 0);
  }
  100% {
    opacity:0;
    transform:scale(1) rotate(0) translate3d(-300px, 300px, 0);
  }
}
@-ms-keyframes star-ani {
  0% {
    opacity:0;
    transform:scale(0) rotate(0) translate3d(0, 0, 0);
  }
  10% {
    opacity:1;
    transform:scale(1) rotate(0) translate3d(-200px, 200px, 0);
  }
  20% {
    opacity:0;
    transform:scale(1) rotate(0) translate3d(-300px, 300px, 0);
  }
  100% {
    opacity:0;
    transform:scale(1) rotate(0) translate3d(-300px, 300px, 0);
  }
}