@charset "utf-8";

/* ==================================================================================================================
 特集ページレイアウトCSS
 ================================================================================================================== */
 /* 背景画像 */
 #article{
  position: relative;
  background: url(../../../img/contents_pc/lp/article1808_02/mainbg_01.jpg) no-repeat center top #fff;
  background-attachment: fixed;
  width: 100%;
}

/* 内側の表示サイズと影色 */
#article .articleInner{
  position: relative;
  width: 1600px;
  left: 50%;
  margin-left: -800px;
}

#article section{
  position: relative;
}

#article .box_02,
#article .box_03,
#article .box_04{
  width: 1280px;
  margin: 0 auto;
}

/* 各ゲームスタートボタン
------------------------------------------- */
/* 位置調整 */
#article [class^="box_0"] .btn{
  position: absolute;
  left: 50%;
  margin-left: -122px;
}
/* 画像調整 */
#article [class^="box_0"] .btn a{
  display: block;
  background: url(../../../img/contents_pc/lp/article1808_02/btn_01.png) no-repeat 0 0;
  background-size: cover;
  width: 245px;
  padding-top: 245px;
  height: 0;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  z-index: 10;
  -webkit-animation: btn_amine 5s ease 2s infinite both;
  animation: btn_amine 5s ease 2s infinite both;
}

@-webkit-keyframes btn_amine{
0% { -webkit-transform:scale(0.96) rotate(0deg);}
10% { -webkit-transform:scale(1) rotate(0deg);}
22% { -webkit-transform:scale(1) rotate(10deg);}
24% { -webkit-transform:scale(1) rotate(-10deg);}
26% { -webkit-transform:scale(1) rotate(10deg);}
28% { -webkit-transform:scale(1) rotate(-5deg);}
30% { -webkit-transform:scale(1) rotate(5deg);}
32%, 50% { -webkit-transform:scale(1) rotate(0deg);}
60%, 100%  { -webkit-transform:scale(0.96) rotate(0deg);}
}
@keyframes btn_amine{
0% { transform:scale(0.96) rotate(0deg);}
10% { transform:scale(1) rotate(0deg);}
22% { transform:scale(1) rotate(10deg);}
24% { transform:scale(1) rotate(-10deg);}
26% { transform:scale(1) rotate(10deg);}
28% { transform:scale(1) rotate(-5deg);}
30% { transform:scale(1) rotate(5deg);}
32%, 50% { transform:scale(1) rotate(0deg);}
60%, 100%  { transform:scale(0.96) rotate(0deg);}
}

#article .box_01 .btn{bottom: 450px;}
#article .box_05 .btn{bottom: 325px;}

/* hover */
#article [class^="box_0"] .btn a:hover{
  background-position: 0 -245px;
}

/* 固定にじよめちゃん
---------------------------------------------------------- */
#article .popupNijiyomecyan{
  position: fixed;
  bottom: -270px;
  left: 50%;
  margin-left: -660px;
  z-index: 1;
}

#article .popupNijiyomecyan .popupimg{
  background: url(../../../img/contents_pc/lp/article1808_02/nijiyome_popup.png) no-repeat 0 0;
  width: 197px;
  padding-top: 322px;
  height: 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  pointer-events: none;
}
@media screen and (max-width: 1050px){
#article .popupNijiyomecyan{
  left: -50px;
  margin-left: 0px;
}
}
#article .popupNijiyomecyan{
  /* transform: translateY(250px); */
  transition-duration: 0.3s;
}

#article .popupNijiyomecyan.disp{
  -webkit-animation: popup 0.2s ease 0s 1 both;
  animation: popup 0.2s ease 0s 1 both;
	display: none;
}
@-webkit-keyframes popup{
  0%  { -webkit-transform: translateY(0); }
  100%{ -webkit-transform: translateY(-160px);}
}
@keyframes popup{
  0%  { transform: translateY(0); }
  100%{ transform: translateY(-160px);}
}

#article .popupNijiyomecyan .popuptext{
    position: absolute;
    background: rgba(255,255,255,0.95);
    border: 2px solid;
    width: 210px;
    padding: 10px;
    border-radius: 5px;
    top: 70px;
    left: 190px;
    text-align: center;
    font-size: 17px;
    line-height: 1.2em;
    font-weight:  bold;
}

#article .popupNijiyomecyan .popuptext span{
  color: #ff0000;
}

#article .popupNijiyomecyan .popuptext span.attention{
  font-size: 12px;
  color: #1e00ff;
}

#article .popupNijiyomecyan .popuptext:after{
  content: "";
  position:  absolute;
  display: inline-block;
  width: 0;
  height: 0;
  top: 31px;
  left: -11px;
  border: solid;
  border-width: 7px 10px 7px 0;
  border-color: transparent rgb(51, 51, 51) transparent transparent;
}


/* loading-anime
-------------------------------------------- */
.fadeInDown {
  -webkit-animation: fadeInDown 2s both;
  animation: fadeInDown 2s both;
}
@keyframes fadeInDown {
0%  { opacity: 0; transform: translateY(-20px);}
100%{ opacity: 1; transform: translateY(0);}
}
@keyframes fadeInDown {
0%  { opacity: 0; transform: translateY(-20px);}
100%{ opacity: 1; transform: translateY(0);}
}

/* box_01
-------------------------------------------- */
/* box_02
-------------------------------------------- */
#article .box_02{
  margin-top: -180px;
}

/* -------- キャラ切り替え箇所 -------- */
/* 全体位置指定 */
#article .box_02 .charaInfoContainer{
  position: absolute;
  top: 0;
  width: 1000px;
  left: 50%;
  margin-left: -500px;
}

/* キャラ選択矢印 */
#article .box_02 .selectBtnBox{
  position: absolute;
  top: 220px;
  width: 960px;
  left: 50%;
  margin-left: -480px;
}

#article .box_02 .selectBtnBox .btnLeft,
#article .box_02 .selectBtnBox .btnRight{
  position: absolute;
  display: block;
  width: 86px;
  padding-top: 87px;
  height: 0;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  top: 55px;
  cursor: pointer;
  z-index: 10;
}
#article .box_02 .selectBtnBox .btnLeft{
  background: url(../../../img/contents_pc/lp/article1808_02/arrow_left.png) no-repeat 0 0;
  left: 0;
}
#article .box_02 .selectBtnBox .btnRight{
  background: url(../../../img/contents_pc/lp/article1808_02/arrow_right.png) no-repeat 0 0;
  right: 0;
}

#article .box_02 .selectBtnBox .btnLeft:hover,
#article .box_02 .selectBtnBox .btnRight:hover{
  opacity: 0.8;
  margin-top: 1px;
}

/* 左 */
#article .box_02 .selectBtnBox .btnLeft {
  -webkit-animation: allow_left_pop 3s ease 0s infinite;
  animation: allow_left_pop 3s ease 0s infinite;
}
/* 左 */
#article .box_02 .selectBtnBox .btnRight{
  -webkit-animation: allow_right_pop 3s ease 0s infinite;
  animation: allow_right_pop 3s ease 0s infinite;
}
@-webkit-keyframes allow_left_pop {
  0% {    -webkit-transform: translateX(0%);  }
  2% {    -webkit-transform: translateX(-10%);  }
  4% {    -webkit-transform: translateX(0%);  }
  6% {    -webkit-transform: translateX(-10%);  }
  8% {    -webkit-transform: translateX(0%);  }
  10% {    -webkit-transform: translateX(-10%);  }
  12%,100% {    -webkit-transform: translateX(0%);  }
}
@keyframes allow_left_pop {
  0% {    transform: translateX(0%);  }
  2% {    transform: translateX(-10%);  }
  4% {    transform: translateX(0%);  }

  6% {    transform: translateX(-10%);  }
  8% {    transform: translateX(0%);  }
  10% {    transform: translateX(-10%);  }
  12%,100% {    transform: translateX(0%);  }
}
@-webkit-keyframes allow_right_pop {
  0% {    -webkit-transform: translateX(0%);  }

  2% {    -webkit-transform: translateX(10%);  }
  4% {    -webkit-transform: translateX(0%);  }
  6% {    -webkit-transform: translateX(10%);  }
  8% {    -webkit-transform: translateX(0%);  }
  10% {    -webkit-transform: translateX(10%);  }
  12%,100% {    -webkit-transform: translateX(0%);  }
}
@keyframes allow_right_pop {
  0% {    transform: translateX(0%);  }
  2% {    transform: translateX(10%);  }
  4% {    transform: translateX(0%);  }
  6% {    transform: translateX(10%);  }
  8% {    transform: translateX(0%);  }
  10% {    transform: translateX(10%);  }
  12%,100% {    transform: translateX(0%);  }
}






/* キャラプロフィール表示 */
#article .box_02 .charaInfoBox{
  position:  absolute;
  width: 834px;
  top: 80px;
  left: 50%;
  margin-left: -417px;
}

#article .box_02 .charaInfoBox ul li{
  position: absolute;
  top: 0;
  display: none;
}
/* 位置微調整 */
#article .box_02 .charaInfoBox ul li.charaInfo02{
  top: 1px;
}

#article .box_02 .charaInfoBox ul li.on{
  display: block;
}

/* 音声再生ボタン */
#article .box_02 .charaInfoBox .audio_box{
  position: absolute;
  top: 310px;
  left: 150px;
  display: flex;
}
/* 位置微調整 */
#article .box_02 .charaInfoBox .charaInfo02 .audio_box{
  margin-top: -1px;
}

#article .box_02 .charaInfoBox .voice_a,
#article .box_02 .charaInfoBox .voice_b,
#article .box_02 .charaInfoBox .voice_c{
  display: block;
  background: url(../../../img/contents_pc/lp/article1808_02/voice_01.png) no-repeat 0 0;
  width: 53px;
  padding-top: 46px;
  height: 0;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  z-index: 10;
  margin-right:5px;
}

#article .box_02 .charaInfoBox .voice_b{
  background: url(../../../img/contents_pc/lp/article1808_02/voice_02.png) no-repeat 0 0;
}
#article .box_02 .charaInfoBox .voice_c{
  background: url(../../../img/contents_pc/lp/article1808_02/voice_03.png) no-repeat 0 0;
}


#article .box_02 .charaInfoBox .voice_a:hover,
#article .box_02 .charaInfoBox .voice_b:hover,
#article .box_02 .charaInfoBox .voice_c:hover{
  opacity: 0.8;
  margin-top: 1px;
}

/*キャラ選択アイコン*/
#article .box_02 .selectCharaBox{
  display: flex;
  justify-content: center;
  position: absolute;
  top: 485px;
  left: 50%;
  margin-left: -396px;
}
#article .box_02 .selectCharaBox [class^="chara0"]{
  display: block;
  background: url(../../../img/contents_pc/lp/article1808_02/icon_01.png) no-repeat 0 0;
  width: 149px;
  padding-top: 163px;
  height: 0;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  top: 55px;
  z-index: 0;
  margin-left: -17px;
  cursor: pointer;
}
#article .box_02 .selectCharaBox [class^="chara0"].on{
  margin-top: -10px;
}
#article .box_02 .selectCharaBox [class^="chara0"]:hover{
  margin-top: -10px;
}
#article .box_02 .selectCharaBox .chara00{ background-position: 0 0px;}
#article .box_02 .selectCharaBox .chara01{ background-position: 0 -170px;}
#article .box_02 .selectCharaBox .chara02{ background-position: 0 -340px;}
#article .box_02 .selectCharaBox .chara03{ background-position: 0 -510px;}
#article .box_02 .selectCharaBox .chara04{ background-position: 0 -680px;}
#article .box_02 .selectCharaBox .chara05{ background-position: 0 -850px;}


/* box_03
-------------------------------------------- */
#article .box_03{
  margin-top: 30px;
}

/* box_04
-------------------------------------------- */
/* box_05
-------------------------------------------- */