@charset 'UTF-8';

html{
  /*overflow: hidden;*/
    min-width:1200px;
  min-height: 850px;
}


body{
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  background: #f4f1f2;
  position: relative;
  height: 100vh;
  min-height: 850px;
  overflow-x: hidden;
  min-width: 1200px;
  background: url(../img/intro/bg_intro.jpg) center center no-repeat;
  background-size: cover;
}
body.is-fixed{
  position: fixed;
}
body.is-tokuhou{
  background: none;
}

.wrap{
  opacity: 0;
  transition: 0.8s ease;
}
.wrap.is-show{
  opacity: 1;
}
.is-home .wrap{
  display: flex;
  /*flex-direction: column;*/
}


.homeContainer{
  flex:1;
}

.loading{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background: 
    url(../img/common/loading.gif) center center no-repeat,
    url(../img/common/bg_credit.jpg) center center no-repeat;
  background-size: auto auto,cover;
}


/*---------------------------------
      home
----------------------------------*/
.homeBox{
  display: flex;
  min-height: 100vh;
}
.homeBox a{
  opacity: 1;
  transition: .4s;
}
.homeBox a:hover{
  opacity: .6;
}
.homeCenter{
  flex: 1;
  background: url(../img/home/img_mv_1.jpg) 0 -200px no-repeat;
  background-size: 100%;
  position: relative;
  opacity: 0;
}
/* .homeCenter.is-first{
  background-position: 0 -300px;
} */
.homeLeft{
  width: 380px;
  background: url(../img/home/bg_menu_1.png) 0 0 no-repeat;
  background-size: cover;
}
.homeRight{
  position: relative;
  padding: 20px;
  width: 250px;
  background: url(../img/home/bg_menu2_1.png) 0 0 no-repeat;
  background-size: cover;
}

.homeNavTit{
  padding: 50px 0 30px;
  text-align: center;
}
.homeNavTit img{
  width: 124px;
}
.homeNav{
  /*background: url(../img/home/bg_menu_2.png) 0 67px no-repeat;*/
  background: url(../img/home/bg_menu_2b.png) 0 67px no-repeat;
  background-size: 100%;
  height: 460px;
}
.homeNav ul{
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}
.homeNav li{
  margin: 0 4px;
  width: 46px;
}
.homeNav li a{
  margin-top: 0;
  display: block;
  cursor: pointer;
}
.homeNav li a:hover{
  margin-top: -20px;
  opacity: 1;
}
.homeNav2{
  padding: 0 16px 12px;
  display: flex;
  justify-content: space-between;
}
.homeNav2 li{
  width: 170px;
}
.homeNav3{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.homeNav3 li{
  width: 65px;
}
.homeNav3 li a{
  margin-top: 0;
  display: block;
}
.homeNav3 li a:hover{
  margin-top: -15px;
  opacity: 1;
}
.homeNav4{
  margin-bottom: 8px;
}
.homeSns{
  display: flex;
  justify-content: center;
  /*position: fixed;
  right: 0;
  bottom: 30px;
  width: 250px;
  margin: auto;
  position:fixed;*/
  margin: 50px auto;
  width: 212px;
  position: relative;
}
.homeSns li{
  margin: 0 2px;
}
.homeSns li:first-child{
  padding-top: 7px;
  margin-right: 4px;
}
.homeCopy{
  position: absolute;
  right: 0;
  bottom: 8px;
  margin: auto;
  font-size: 10px;
  color: #fff;
  width: 250px;
  text-align: center;
}
.homeLeftMovie{
  margin: 0 16px 12px;
  height: 276px;
  display: block;
  position: relative;
}
.homeLeftMovie > a{
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.homeLeftMovie > a:hover{
  opacity: 1;
}
.homeLeftMovie a:hover img{
  transform: scale(1.1);
}
.homeLeftMovieTit{
  position: relative;
  z-index: 2;
}
.homeLeftMovieTit img{
  transition: .4s;
}
.homeLeftMovieImg{
  margin-top: -20px;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 62.5%;
  position: relative;
  pointer-events: none;
}
.homeLeftMovieImg iframe,
.homeLeftMovieImg embed,
.homeLeftMovieImg object{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.homeMv{
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 131.9%;
  position: relative;
}
.homeMvTit{
  position: absolute;
  top: 2%;
  right: 0;
  left: 0;
  margin: auto;
  width: 81.6%;
  opacity: 0;
  text-align: center;
}
.homeMvImg2{
  position: absolute;
  top: 14%;
  right: 0;
  left: 0;
  margin: auto;
  width: 52.26%;
  opacity: 0;
}
.homeMvImg5{
  position: absolute;
  top: 13.2%;
  right: 1.0%;
  margin: auto;
  width: 16.8%;
  opacity: 0;
}
.homeMvImg3{
  position: absolute;
  top: 17%;
  left: 13%;
  margin: auto;
  width: 5.25%;
  transform: translateY(10px);
  opacity: 0;
}
.homeMvImg6{
  position: absolute;
  top: 67%;
  left: 0;
  right: 0;
  margin: auto;
  width: 17.2%;
  opacity: 0;
}