@charset "utf-8";
/* = PC Setting
-------------------------------------------------------------- */
body {
  color: #faf2bb;
}
body:before {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: url("../img/pc/pc_bg.png") repeat-x top/auto , linear-gradient(#f8dc60, #faf2bb);
}
body:after {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: #faf2bb;
  z-index: -1;
}
#wrapper {
  width: 600px;
  margin: 0 auto;
  text-align: center;
}
.aside-left,
.aside-rignt {
  display: flex;
}
.aside-left {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: calc((100vw - 600px)/2);
  height: 80vh;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.aside-rignt {
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  width: calc((100vw - 600px)/2);
  height: 80vh;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.aside-rignt img {
  width: 400px
}
.aside-left img {
  width: 330px
}
@media screen and (max-width:1080px) {
  .aside-left,
  .aside-rignt { opacity: 0; transition: 0.2s;}
}

/* = ローディング
-------------------------------------------------------------- */
#loading { position: fixed; z-index: 999; top: 0; left: 0; right: 0; margin: auto; width: 600px; height: 100vh; background:#050505; background-size: contain; visibility: visible;}
#loading.is-active {
  opacity: 0;
  visibility: hidden;
}
#loading .door_bg img {
    position: absolute;
    animation-fill-mode: forwards;
}
#loading .door_bg img:nth-of-type(1) {
	opacity: 1;
}
#loading .door_bg img:nth-of-type(2) {
    animation-delay: 1.5s;
	opacity: 0;
    animation-name: door;
    animation-duration: 0.2s;
}
#loading .door_bg img:nth-of-type(3) {
    animation-delay: 1.7s;
	opacity: 0;
    animation-name: door;
    animation-duration: 0.2s;
}
#loading .door_bg img:nth-of-type(4) {
    animation-delay: 1.9s;
	opacity: 0;
    animation-name: door;
    animation-duration: 0.2s;
}
#loading .door_bg img:nth-of-type(5) {
    animation-delay: 2.3s;
	opacity: 0;
    animation-name: door;
    animation-duration: 0.2s;
}
#loading .door{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 90;
}
@keyframes door {
      0% { opacity: 0;}
    100% { opacity: 1;}
}

/* = header
-------------------------------------------------------------- */
header { position: relative; background: url("../img/header_bg.png"); background-repeat: no-repeat; background-size: 100%; padding-top: 142.8%; z-index: 50;}
header .linkbtn { position: absolute; width: 85.2%; left: 4%; top: 50%;}

/* = nav
-------------------------------------------------------------- */
#nav li { position: absolute; top: 74.5%; animation: btnWaves 8s infinite}
#nav li:nth-of-type(1) { width: 25%; left: 0%; animation-delay: 3.5s;}
#nav li:nth-of-type(2) { width: 25%; left: 25%; animation-delay: 3.7s;}
#nav li:nth-of-type(3) { width: 25%; left: 50%; animation-delay: 3.9s;}
#nav li:nth-of-type(4) { width: 25%; right: 0%; animation-delay: 4.1s;}
@keyframes btnWaves {
    0% { transform: translate(0, 0);}
    2% { transform: translate(0, -8px);}
    4% { transform: translate(0, 0);}
}

/* = cp
-------------------------------------------------------------- */
#cp { margin-top: -15%; background-image: url(../img/bg_repeat_gl.png); background-size: 100%; background-repeat: repeat-y; z-index: 40;}
#cp #cp_header { position: relative; z-index: 30; padding-top: 320.1%;}
#cp .cp_01 { position: absolute; left: 0; right: 0; margin: auto; top: -5.5%; z-index: 10;}
#cp .cp_02 { position: absolute; left: 0; right: 0; margin: auto; top: 31.8%; z-index: 20;}
#cp .linkbtn01 { position: absolute; width: 76.8%; left: 0; right: 0; margin: auto; top: 47.2%; z-index: 30;}
#cp .cp_bg { position: absolute; left: 0; right: 0; margin: auto; top: 38%; z-index: 10;}
#cp .cp_balloon { position: absolute; left: 0; right: 0; margin: auto; top: 63.5%; z-index: 30;}
#cp .cp_03 { position: absolute; width: 94.1%; left: 0; right: 0; margin: auto; top: 54.3%; z-index: 20;}
#cp #accordion { position: relative; z-index: 99; margin-top: 2%;}
#cp dd { width: 90.1%; margin: auto; display: none; padding-bottom: 4%;}
#cp .toggledown { width: 76.9%; margin: auto; padding: 0.2% 0 0 0;}
.toggledown a:nth-of-type(1) { display: block;}
.toggledown a:nth-of-type(2) { display: none;}
.toggledown.open a:nth-of-type(1) { display: none;}
.toggledown.open a:nth-of-type(2) { display: block;}
#cp #cp_footer {margin-top: -18%; position: relative; z-index: 30; padding-top: 98.6%;}
#cp .cp_04 { position: absolute; left: 0; right: 0; margin: auto; top: 6%; z-index: 10;}
#cp .linkbtn02 { position: absolute; width: 76.8%; left: 0; right: 0; margin: auto; top: 76%; z-index: 10;}

/* = bingo
-------------------------------------------------------------- */
#bingo {
  padding-bottom: 5.33%;
  background: url(../img/bingo_bg.png) repeat-y;
  background-size: contain;
}
#bingo .bingotop {
  position: relative;
  padding-top: 154.4%;
}
#bingo .card {
  position: relative;
  padding-top: 112.93%;
  background: url(../img/bingo_card01.png) no-repeat;
  background-size: 100%;
}
#bingo .btn_bingo_top,
#bingo .btn_bingo,
#bingo .btn_bingo2{
  position: absolute;
  left: 0;
  right: 0;
  width: 76.8%;
  margin: auto;
}
#bingo .btn_bingo_top {
  top: 81.8%;
}
#bingo .btn_bingo {
  top: 37.31%;
}
#bingo .btn_bingo2 {
  top: 35.86%;
}
#bingo .bingotop h2 {
  position: absolute;
  top: 0%;
  left: 0;
  right: 0;
  width: 100%;
  margin: auto;
}


#bingo .howto {
  position: relative;
  background: url(../img/howto.png) no-repeat;
  background-size: 100%;
  margin-top: 10%;
}

#bingo .howto .movie {
  width: 78.93%;
  margin: 0 auto;
  padding-top: 34.67%;
}
#bingo .howto .detail {
  width: 94.67%;
  margin: 9.33% auto 0;
}
#bingo .howto .detail dt {
  width: 100%;
  cursor: pointer; /*デフォルトでは表示されないためマウスカーソルをリンクポインタ指定*/
}
#bingo .howto .detail dt:nth-of-type(1).open {
  content: url(../img/howto01_close.png); /*クリックしたらボタンの画像を切り替える*/
}
#bingo .howto .detail dt:nth-of-type(2).open {
  content: url(../img/howto02_close.png); /*クリックしたらボタンの画像を切り替える*/
}
#bingo .howto .detail dt:nth-of-type(3).open {
  content: url(../img/howto03_close.png); /*クリックしたらボタンの画像を切り替える*/
}
#bingo .howto .detail dd {
  position: relative;
  display: none; /*デフォルトでは詳細を非表示*/
}
#bingo .howto .detail dd .btn_bingo,
#bingo .howto .detail dd .btn_gacha_gray {
  position: absolute;
  left: 0;
  right: 0;
  width: 81.13%;
  margin: auto;
}
#bingo .howto .detail dd .btn_bingo {
  top: 7.65%;
}
#bingo .howto .detail dd .btn_gacha_gray {
  top: 44.59%;
}
#bingo .lineup {
  margin-top: -6.5%;
}
#bingo .lineup .lineup_footer {
  position: relative;
  padding-top: 100.33%;
  background: url(../img/lineup_catch.png) no-repeat;
  background-size: 100%;
}
#bingo .lineup .btn_bingo {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  width: 76.8%;
  margin: auto;
}
#bingo .lineup .lineup_terms {
  position: absolute;
  width: 74.67%;
  left: 0;
  right: 0;
  margin: auto;
}
#bingo .present {
  position: relative;
  padding-top: 107.3%;
}
#bingo .bingo_present {
  position: absolute;
  top: 3%;
  width: 86.9%;
  left: 0;
  right: 0;
  margin: auto;
}
#bingo .present .btn_bingo{
  position: absolute;
  top: 78%;
  width: 76.8%;
  left: 0;
  right: 0;
  margin: auto;
}

/* = xcp
-------------------------------------------------------------- */
#xcp { position: relative; background-image: url(../img/bg_repeat_gl.png); background-size: 100%; background-repeat: repeat-y; padding-bottom: 6%; }
#slide { margin-top: -3%;}
#xcp_01 { position: relative; z-index: 20;}
#xcp_01 .xcp_01 { width: 123%; z-index: 10; margin-left: -4%;}
#xcp_01 .linkbtn1 { position: absolute; width: 85%; left: 13.2%; top: 74%; z-index: 90;}
#xcp_01 .linkbtn2 { position: absolute; width: 58%; left: 14.3%; top: 92%; z-index: 90;}
#xcp_02 { position: relative; z-index: 10;}
#xcp_02 .xcp_02 { width: 123%; z-index: 10; margin-left: 2.5%;}
#xcp_02 .linkbtn1 { position: absolute; width: 85%; left: 20%; top: 74%; z-index: 90; }
#xcp_02 .linkbtn2 { position: absolute; width: 58%; left: 21.3%; top: 92%; z-index: 90;}
#slide .slick-list { padding: 0 15% 0 0!important;}
.prev_icon{ position: absolute; top: 50%; left: 0.5%; transform: translate(0,-50%); width: 16%; z-index: 80;}
.next_icon{ position: absolute; top: 50%; right: 0.5%; transform: translate(0,-50%); width: 16%; z-index: 80;}
.prev_icon.slick-disabled,.next_icon.slick-disabled { opacity: 0;}
.prev_icon.slick-disabled:before,.next_icon.slick-disabled:before { opacity: 1;}

/* = event
-------------------------------------------------------------- */
#event { position: relative;  background-image: url(../img/bg_repeat_bk.png); background-size: 100%; background-repeat: repeat-y; padding-top: 261.4%;}
#event .event_header { position: absolute; top: -1%; left: 0; right: 0; margin: auto;}
#event .event_01 { position: absolute; width: 96.8%; top: 9%; z-index: 20;}
#event .event_02 { position: absolute; width: 94.8%; top: 34%; left: 0; right: 0; margin: auto; z-index: 20;}
#event .event_balloon { position: absolute; top: 9.5%; left: 0; right: 0; margin: auto; z-index: 50;}
#event .event_bg { position: absolute; top: 19%; left: 0; right: 0; margin: auto; z-index: 10;}
#event .linkbtn { position: absolute; width: 76.8%; top: 90%; left: 0; right: 0; margin: auto; z-index: 20;}

/* = newtsum
-------------------------------------------------------------- */
#newtsum { position: relative; background-image: url(../img/bg_repeat_gl.png); background-size: 100%; background-repeat: repeat-y; padding-top: 157.7%;}
#newtsum .tsum_header { position: absolute; top: -1%; left: 0; right: 0; margin: auto;}
#newtsum .tsum_01 { position: absolute; width: 96%; top: 18%; left: 0; right: 0; margin: auto; z-index: 20;}
#newtsum .tsum_02 { position: absolute; width: 94.8%; top: 44%; left: 0; right: 0; margin: auto; z-index: 20;}
#newtsum .tsum_balloon { position: absolute; top: 34.5%; left: 0; right: 0; margin: auto; z-index: 50;}
#newtsum .tsum_bg { position: absolute; top: 80.7%; left: 0; right: 0; margin: auto; z-index: 10;}
#newtsum .linkbtn1 { position: absolute; width: 34.5%; left: 0; right: 0; margin: auto; top: 73.5%; z-index: 90;}
#newtsum .linkbtn2 { position: absolute; width: 76.8%; left: 0; right: 0; margin: auto; top: 84.4%; z-index: 90;}

/* = footer
-------------------------------------------------------------- */
footer { position: relative; background-image: url(../img/bg_repeat_bk.png); background-size: 100%; background-repeat: repeat-y; padding-top: 129.8%;}
footer .footer_bg { position: absolute; top: -15%; left: 0; right: 0; margin: auto;}
footer .sns_info { position: absolute; left: 0; right: 0; margin: auto; top: 18%; z-index: 20;}
footer .spec { position: absolute; width: 89%; top: 32%; left: 0; right: 0; margin: auto;}
footer .info { position: absolute; left: 0; right: 0; margin: auto; top: 90%; z-index: 20;}
footer .info li { display: inline-block; padding: 0 5%;}
footer .info li:nth-of-type(1) {width: 31.4%; }
footer .info li:nth-of-type(2) {width: 20%; }
footer .pagetop { position: absolute; width: 13.3%; right: 2%; top: 83%; z-index: 20;}
footer .footer_copy { position: absolute; width: 12.4%; top: 95%; left: 0; right: 0; margin: auto;}

/* = modal
-------------------------------------------------------------- */
video {width: 100%;}
.modal-movie {
    height: 100%;
    padding-top: 0;
}

.modal_close { position: absolute; top: 102%!important; left: 0!important; right: 0!important; margin: auto!important; width: 30%!important; z-index: 99;}
.modaal-container { width: 570px;}
.modal-terms-cover { color: #ffffff; font-size: 18px; line-height: 1.4;}
.modal-terms-cover a { color: #ffea5a;}
.modal-terms-inner { position: relative; width: auto;}
.modal-terms-contents { position: absolute; height: 73%; width: 84%; left:10%; right: 6%; margin: auto; padding-right: 4%;top: 18%; overflow: scroll; overflow-x: hidden; z-index: 98;}

/* = fadein
-------------------------------------------------------------- */
.fadeup{
    animation-name:fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeUpAnime{
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0);}
    }
.fadein{ opacity: 0; }