@charset "utf-8";

/*========= 背景動画設定のCSS ===============*/


/*header設定*/

#mv_header {
  position: relative;
  /*ローディング画像などを表示す際の基点とするため指定*/
  height: auto;
  /*高さを全画面にあわせる*/
  text-align: center;
  color: #fff;
  /*ローディング画面時＆動画が表示されないときに表示する背景画像のレスポンシブ化*/
  background: url("../img/movie.jpg") no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 768px) {
  #mv_header {
    height: 100vh;
  }
}


/* ローディングアイコン設定 */

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}


/*jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示*/

#loading.disappear {
  display: none;
}

.mvMainCatch {
  max-width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mvMainCatch__img {
  max-width: 100%;
  width: 100%;
}

.main_copy_img {
  width: 100%;
}

@media only screen and (max-width: 768px) {
  .main_copy_img {
    width: 100%;
  }
}


/* youtube設定 */

#youtube-area {
  position: fixed;
  z-index: -999;
  /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0;
}


/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/

#youtube-area.appear {
  animation-name: PageAnimeAppear;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}

@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#youtube {
  /*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh;
  /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw;
  /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}


/*youtubeがクリックされないためのマスク*/

#youtube-mask {
  position: absolute;
  z-index: 2;
  /*下から2番目に表示*/
  top: 0;
  width: 100%;
  height: 100%;
}


/*youtube 上のロゴ */

h1 {
  position: absolute;
  z-index: 3;
  /*天地中央配置*/
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
width: 60%;
  /*色指定*/
  color: #fff;
  text-shadow: 0 0 15px #666;
}

@media only screen and (max-width: 768px) {
	
h1 {
  position: absolute;
  z-index: 3;
  /*天地中央配置*/
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
width: 80%;
  /*色指定*/
  color: #fff;
  text-shadow: 0 0 15px #666;
}	
	
}

/* トップページ メインビジュアル スライダー */
.mvLogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  max-width: 500px;
}

@media only screen and (max-width: 768px) {
  .mvLogo {
    width: 70%;
  }
}

.mvLogo img {
  max-width: 100%;
}

.mvSlider {
  position: relative;
  padding-top: 100px;
  height: 100%;
}

.mvSlider::after {
  content: "";
  background-color: rgba(0, 0, 0, .1);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
}

.mvSlider * {
  height: 100%;
  width: 100%;
}

.mvSlider__item img {
  object-fit: cover;
}

.mvSlider__item img {
  max-width: 100%;
}