@charset "utf-8";

/*****************************
common.css
*****************************/
/*---------------------

PC

-----------------------*/
.sp_view {
  display: none !important;
}

.pc_view {
  display: block;
}

/*---------------------
フェード ローディング
-----------------------*/
#top_fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 989;
}

.loading_icon {
  position: fixed;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  left: 50%;
  top: 50%;
}

.loading_wrap {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0;
  top: 0;
  transform-origin: center center;
}

.trans {
  opacity: 0;
}

/*---------------------
ナビゲーション
-----------------------*/
#nav_pc {
  position: relative;
  height: 70px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-image: url(../img/menu/back_menu.jpg);
  z-index: 1;
}

.nav_pc_btn {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* ホームボタン */
.bt_home {
  background: url('../img/menu/home_over.png') no-repeat center top;
  background-size: 92px auto;
}

.bt_home img {
  transition: 0.2s;
}

.bt_home:hover img {
  opacity: 0;
}

/* ニュースボタン */
.bt_news {
  background: url('../img/menu/news_over.png') no-repeat center top;
  background-size: 100px auto;
  margin-left: -10px;
}

.bt_news img {
  transition: 0.2s;
}

.bt_news:hover img {
  opacity: 0;
}

/* 作品情報ボタン */
.bt_atm {
  background: url('../img/menu/atm_over.png') no-repeat center top;
  background-size: 250px auto;
  margin-left: -15px;
}

.bt_atm img {
  transition: 0.2s;
}

.bt_atm:hover img {
  opacity: 0;
}

.bt_caststaff {
  background: url(../img/menu/caststaff_over.png) no-repeat center top;
  background-size: 175px auto;
  margin-left: -15px;
}

.bt_caststaff img {
  transition: 0.2s;
}

.bt_caststaff:hover img {
  opacity: 0;
}

/* レコードボタン */
.bt_record {
  background: url(../img/menu/record_over.png) no-repeat center top;
  background-size: 220px auto;
  margin-left: -15px;
}

.bt_record img {
  transition: 0.2s;
}

.bt_record:hover img {
  opacity: 0;
}

/* コメントボタン */
.bt_comments {
  background: url(../img/menu/comments_over.png) no-repeat center top;
  background-size: 155px auto;
  margin-left: -15px;
}

.bt_comments img {
  transition: 0.2s;
}

.bt_comments:hover img {
  opacity: 0;
}

/* チケットボタン */
.bt_tickets {
  background: url(../img/menu/theaters_over.png) no-repeat center top;
  background-size: 135px auto;
  margin-left: -10px;
}

.bt_tickets img {
  transition: 0.2s;
}

.bt_tickets:hover img {
  opacity: 0;
}

/* Blu-ray digitalボタン */
.bt_digital_dvd {
  background: url('../img/menu/digital&blu-ray_over.png') no-repeat center top;
  background-size: 224px auto;
}

.bt_digital_dvd img {
  transition: 0.2s;
}

.bt_digital_dvd:hover img {
  opacity: 0;
}

/* SNSボタン */
#pc_sns {
  position: absolute;
  display: flex;
  top: 0;
  right: 30.5px;
}

/* TikTok */
.pc_tiktok {
  background: url(../img/menu/pc_tiktok_over.png) no-repeat top center;
  background-size: 50px auto;
}

.pc_tiktok img {
  transition: 0.2s;
}

.pc_tiktok:hover img {
  opacity: 0;
}

/*---------------------

SP

-----------------------*/
@media screen and (min-width: 0px) and (max-width: 800px) {
  .sp_view {
    display: block !important;
  }

  .pc_view {
    display: none !important;
  }

  /*---------------
	ローディング
	-----------------*/
  .loading_wrap {
    position: fixed;
    width: 50px;
    height: 50px;
    left: 44%;
    top: 45%;
  }

  .loading_wrap:after {
    width: 46px;
    height: 46px;
    top: 2px;
    left: 2px;
  }

  .loading_wrap2 {
    position: fixed;
    width: 50px;
    height: 50px;
    left: 44%;
    top: 45%;
  }

  .loading_wrap2:after {
    width: 46px;
    height: 46px;
    top: 2px;
    left: 2px;
  }

  /*---------------------
	SP_ナビゲーション
	-----------------------*/
  #navi_sp {
    position: fixed;
    width: 100%;
    right: 0;
    top: -150%;
    z-index: 900;
    background: #000;
    height: 100%;
    overflow: auto;
  }

  .menu_title {
    margin-bottom: 13% !important;
  }

  .open_sp {
    position: fixed;
    top: 60px;
    left: 0;
    height: 0%;
    width: 15%;
    padding-bottom: 15%;
    z-index: 10;
  }

  .close_sp {
    position: absolute;
    top: 0;
    left: 0%;
    height: 0%;
    width: 15%;
  }

  .menu_item_sp {
    position: absolute;
    top: 710px;
    z-index: 10;
  }

  .menu_title_sp {
    margin: 40px 0;
  }

  #navi_sp ul {
    margin-top: 12.87%;
    padding-bottom: 16%;
  }

  #navi_sp li {
    width: 100% !important;
    margin-bottom: 0%;
  }

  /* 劇場リンクボタン */
  .sp_ticket_bottom {
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 100%;
  }
}

/*---------------
flareアニメーション
-----------------*/
.flares_pc,
.flares_pc2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.flares_pc span,
.flares_pc2 span {
  position: relative;
}

@media screen and (min-width: 0px) and (max-width: 800px) {

  .flares_sp,
  .flares_sp2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .flares_sp span,
  .flares_sp2 span {
    position: relative;
  }
}

@keyframes flare-anim {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  75% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}