@charset "utf-8";

:root{
  --font-size--base: 10px;
  --animation--button--jump: -1rem;
  --width--contents: 500px;
  --max-width--modal: 450px;
  --min-width--modal: auto;
}

/* ==============================
PC用
*/
.bg__pc{
  position: fixed;
  width: 100%;
  height: 100%;
  /*min-height: 1080px;*/
  top: 0;
  left: 0;
  background-image: url("../img/pc_bg.jpg");
  background-position: center top;
}
.bg__pc:before{
  content: "";
  display: block;
  width: calc(var(--width--contents) + 8px);
  height: 100%;
  margin: auto;
  background-color: #fff;
  position: relative;
  z-index: 5;
  box-shadow: 0px 0px 15px 0px rgba(255, 84, 205, 0.6);
}
.pc_logo{
  left: 0;
}
.pc_logo img{
  width: calc(408px * 0.8);
}
.pc_qr{
  right: 0;
}
.pc_qr img{
  width: calc(263px * 0.8);
}
.pc_logo, .pc_qr {
  position: absolute;
  width: calc((100% - var(--width--contents)) / 2);
  height: 100%;
  top: 0;
  z-index: 1;
  position: fixed;
  display: flex;
}
.side_area{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* ==============================
common
*/
html{
    font-size: var(--font-size--base);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}
img, video{
  width: 100%;
}
a{
  font-size: 0;
}
a, :focus, .mission_item{
  outline: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.dn{
  visibility: hidden;
}
.contents{
  width: var(--width--contents);
  overflow: hidden;
  margin: auto;
  background: url("../img/bg.jpg") center / 100% auto;
  position: relative;
  z-index: 1;
}
.inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

section .content{
  position: relative;
}


.btn--n{
  width: 70%;
  margin: auto;
}
.btn--in{
  width: 73.529%;
  margin: auto;
}



/* ==============================
animation
*/
.js_fade{
  transform: translateY(4rem);
  opacity: 0;
}
.js_fade.is-active{
  animation: animationjs_fadeIn 0.4s ease both;
}
@keyframes animationjs_fadeIn{
  100% { transform: translateY(0); opacity: 1; }
}

.animation_jump{
  display: block;
  animation: animation__jump 4s 1s ease infinite;
}
@keyframes animation__jump{
  0% { translate: 0 0; }
  4.375% { translate: 0 -1.5rem; }
  8.75% { translate: 0 0; }
  13.125% { translate: 0 -1.5rem; }
  17.5% { translate: 0 0; }
  100% { translate: 0 0; }
}


/* ==============================
top
*/
#top .content{
  padding-bottom: 126.266%;
  background: url("../img/top/bg.jpg") no-repeat center / 100% auto;
}
#top .content > .inner:before{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 107.333%;
  background: url("../img/top/deco.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 2.5% auto 0;
  pointer-events: none;
  z-index: 1;
}
#top .content > .inner:after{
  content: "";
  display: block;
  width: 88.266%;
  padding-bottom: 88.266%;
  background: url("../img/top/frame.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 4.8% auto 0;
  pointer-events: none;
}
#top .content .inner{
  z-index: 1;
}
#top .main{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
#top h1{
  width: 77.866%;
  margin: 1.733% 0 0 14.6%;
}
#top .logo{
  width: 22%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 2.8% 0 0 2.133%;
}
#top .countdown{
  width: 100%;
  margin: 0 auto 0;
  position: relative;
}
#top .countdown:before{
  content: "";
  display: block;
  width: 56.133%;
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin: 1% 0 0 22%;
  padding-bottom: 36.533%;
}
#top .countdown.--10:before{ background-image: url("../img/top/countdown/10.png"); }
#top .countdown.--9:before{ background-image: url("../img/top/countdown/9.png"); }
#top .countdown.--8:before{ background-image: url("../img/top/countdown/8.png"); }
#top .countdown.--7:before{ background-image: url("../img/top/countdown/7.png"); }
#top .countdown.--6:before{ background-image: url("../img/top/countdown/6.png"); }
#top .countdown.--5:before{ background-image: url("../img/top/countdown/5.png"); }
#top .countdown.--4:before{ background-image: url("../img/top/countdown/4.png"); }
#top .countdown.--3:before{ background-image: url("../img/top/countdown/3.png"); }
#top .countdown.--2:before{ background-image: url("../img/top/countdown/2.png"); }
#top .countdown.--1:before{ background-image: url("../img/top/countdown/1.png"); }
#top .countdown.--0:before{
  width: 67.866%;
  padding-bottom: 35.6%;
  margin: 1% auto 0;
  background-image: url("../img/top/countdown/today.png");
}



#top .play{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 82.4% auto 0;
}
#top .information{
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 0 -12.5% 0;
  width: 100%;
  padding-bottom: 35.2%;
  background: url("../img/top/info.png") no-repeat center / 100% auto;
}
#top .information p{
  width: 75.466%;
  margin: 16% 0 0 1.733%;
  z-index: 2;
  position: relative;
}
#top .info__chara{
  width: 38.4%;
  position: absolute;
  top: 0;
  right: 0;
  margin: 1.4% -8.2% 0 0;
  animation: animation__yura 4.5s 1s infinite;
}
@keyframes animation__yura{
	0% { 
    transform: rotate(0deg);
    transform-origin: bottom right;
  }
	10% {
    transform: rotate(2deg);
    transform-origin: bottom right;
  }
  14.9%{
    transform-origin: bottom right;
  }
	15% {
    transform: rotate(0deg);
    transform-origin: bottom left;
  }
  25% {
    transform: rotate(-2deg);
    transform-origin: bottom left;
  }
  29.9%{
    transform-origin: bottom left;
  }
  30% {
    transform: rotate(0deg);
    transform-origin: bottom right;
  }

  40% {
    transform: rotate(2deg);
    transform-origin: bottom right;
  }
  44.9%{
    transform-origin: bottom right;
  }
	45% {
    transform: rotate(0deg);
    transform-origin: bottom left;
  }
  55% {
    transform: rotate(-2deg);
    transform-origin: bottom left;
  }
  59.9%{
    transform-origin: bottom left;
  }
  60% {
    transform: rotate(0deg);
    transform-origin: bottom right;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: bottom center;
  }
}
.info__eff > img{
  position: absolute;
  top: 0;
  right: 0;
}
.kira--01{ width: 5.466%; margin: 9% 28.5% 0 0; animation: animation__kira 0.7s infinite alternate ease; }
.kira--02{ width: 3.866%; margin: 8.3% 0.5% 0 0; animation: animation__kira  0.6s infinite alternate-reverse ease; }
.kira--03{ width: 3.866%; margin: 26.4% 25.2% 0 0; animation: animation__kira 0.7s infinite alternate-reverse ease; }
@keyframes animation__kira{
	0% { opacity: 0; }
	20% { opacity: 0; }
	100% { opacity: 1; }
}


/* ==============================
comment
*/
#comment{
  margin-top: 25.066%;
}
#comment .content:before{
  content: "";
  display: block;
  width: 23.066%;
  padding-bottom: 17.066%;
  background: url("../img/comment/deco_bk.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: -7.8% 0 0 4%;
  pointer-events: none;
}
#comment .content:after{
  content: "";
  display: block;
  width: 98%;
  padding-bottom: 112%;
  background: url("../img/comment/deco.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: -6.2% 0 0 1%;
  pointer-events: none;
}
#comment .frame{
  width: 95.2%;
  padding-bottom: 102.8%;
  background: url("../img/comment/frame.png") no-repeat center / 100% auto;
  margin: auto;
  position: relative;
}
#comment h2{
  width: 89.075%;
  margin: -2.4% auto 0;
}
.cmt__main{
  width: 85.294%;
  margin: 9.866% auto 0;
}
.cmt__name{
  width: 43.557%;
  margin: 2% auto 0;
}



/* ==============================
cm
*/
#cm{
  margin-top: 11.866%;
}
#cm .content:after{
  content: "";
  display: block;
  width: 96%;
  padding-bottom: 101.466%;
  background: url("../img/cm/deco.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: -6.2% 0 0 0.5%;
  pointer-events: none;
}
#cm .frame{
  width: 95.2%;
  padding-bottom: 90.533%;
  background: url("../img/cm/frame.png") no-repeat center / 100% auto;
  margin: auto;
  position: relative;
}
#cm h2{
  width: 92.156%;
  margin: 7.703% auto 0;
}
.cm__main{
  margin: 0 auto 0;
}
.cm__main p{
  width: 70.028%;
  margin: 14.705% auto 0;
}



/* ==============================
guide
*/
#guide{
  margin-top: 11.866%;
}
#guide .content:after{
  content: "";
  display: block;
  width: 98.933%;
  padding-bottom: 83.6%;
  background: url("../img/guide/deco.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: -5.4% 0 0 0.5%;
  pointer-events: none;
}
#guide .frame{
  width: 95.2%;
  padding-bottom: 77.333%;
  background: url("../img/guide/frame.png") no-repeat center / 100% auto;
  margin: auto;
  position: relative;
}
#guide h2{
  width: 69.607%;
  margin: 4.133% auto 0;
}
.guide__link{
  margin-top: 10%;
}



/* ==============================
present
*/
#present{
  margin-top: 11.866%;
}
#present .content:after{
  content: "";
  display: block;
  width: 98.533%;
  padding-bottom: 263.333%;
  background: url("../img/present/deco.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: -6% 0 0 1.5%;
  pointer-events: none;
}
#present .frame{
  width: 95.2%;
  padding-bottom: 252.4%;
  background: url("../img/present/frame.png") no-repeat center / 100% auto;
  margin: auto;
  position: relative;
}
#present h2{
  width: 89.775%;
  margin: 5.322% auto 0;
  position: relative;
  z-index: 1;
}
.pst__date{
  width: 82.773%;
  margin: 10.364% auto 0;
}
.pst__item{
  width: 90.616%;
  margin: 4.621% 0 0 5.6%;
  position: relative;
  z-index: 1;
}
.pst__get{
  margin-top: 3.361%;
}
.pst__attention{
  width: 88.095%;
  padding-bottom: 63.025%;
  position: relative;
  background: url("../img/present/frame_atn.png") no-repeat center / 100% auto;
  margin: 6.442% auto 0;
  position: relative;
}
.pst__howto{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 52.782%;
}
.pst__howto a{
  width: 36.248%;
  margin: 0 2%;
}



/* ==============================
footer
*/
footer{
  margin-top: 13.6%;
  position: relative;
}
.pagetop{
  width: 14.666%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -11.6% 2% 0 0;
}
.spec{
  width: 95.2%;
  margin: 0 auto 0;
}
.support{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 5.466% auto 0;
}
.support a{
  margin: 0 2.8%;
}
.support .btn__policy{
  width: 40.266%;
}
.support .btn__contact{
  width: 28.266%;
}
.copyright{
  width: 44.133%;
  margin: 0 auto 0;
  padding: 5% 0;
}



/* ==============================
modal
*/
.snlib--modal{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: auto;
  display: none;
  opacity: 0;
  z-index: 99999;
}
.snlib--modal .modal__outWrap{
  display: table;
  width: 100%;
  height: 100%;
}
.snlib--modal .modal__inWrap{
  display: table-cell;
  width: 100%;
  height: 100%;
  margin: 0 auto 0;    
  padding: 5rem 0 5rem;
  text-align: center;
  vertical-align: middle;
}
.snlib--modal .modal__content{
  width: 93.333%;
  max-width: var(--max-width--modal);
  min-width: var(--min-width--modal);
  background-color: #fff;
  box-sizing: border-box;
  text-align: initial;
  margin: auto;
  position: relative;
  padding: 2rem;
}


.---modal-aos .modal__content,
.---modal-ios .modal__content{
  width: 81.866%;
  padding: 0;
  background-color: initial;
}
.---modal-aos .modal__close_top,
.---modal-ios .modal__close_top{
  width: 14.332%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -5% -5% 0 0;
}
.---modal-aos .modal__close_bottom,
.---modal-ios .modal__close_bottom{
  width: 37.133%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto -22%;
}