@charset "UTF-8";

/* ページ構成
---------------------------------------------------------- */
#app333_06 {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #fff url(../../../img/contents_pc/lp/app333/app333_06_bg.jpg) no-repeat center top fixed;
}

#app333_06 section[class^="box0"] {
  position: relative;
  width: 1920px;
  left: 50%;
  margin-left: -960px;
}

#app333_06 section[class^="box0"] > img {
  vertical-align: bottom;
}

/* pタグ共通 */
#app333_06 section[class^="box0"] p {
  position: absolute;
}

/* h1タグ共通 */
#app333_06 section[class^="box0"] h1 {
  padding-top: 250px;
  width: 1920px;
  height: 0;
  line-height: 200%;
  overflow: hidden;
}

/* ボタン
---------------------------------------------------------- */
#app333_06 section[class^="box0"] a {
  background: url(../../../img/contents_pc/lp/app333/app333_06_btn.png) 0 0;
  position: absolute;
  width: 200px;
  height: 0;
  z-index: 30;
  line-height: 99em;
  overflow: hidden;
  padding-top: 200px;
}

/* 表示調整 */
#app333_06 section.box01 a {
  top: 153px;
  left: 60px;
}
#app333_06 section.box04 a {
  background-position: 400px 0;
  left: 60px;
}
#app333_06 section.box05 a {
  background-position: 207px 0;
}

/* マウスオーバー */
#app333_06 section.box01 a:hover {
  background-position: 0 -199px;
}
#app333_06 section.box04 a:hover {
  background-position: 400px -199px;
}
#app333_06 section.box05 a:hover {
  background-position: 207px -199px;
}

/* 位置調整 */
#app333_06 section.box01 p.btn {
  bottom: 584px;
  left: 50%;
  margin-left: 128px;
}
#app333_06 section.box04 p.btn {
  bottom: 279px;
  left: 50%;
  margin-left: -115px;
}
#app333_06 section.box05 p.btn {
  bottom: 215px;
  left: 50%;
  margin-left: 199px;
}

#app333_06 section[class^="box0"] p.btn::before {
  content: "";
  display: block;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 105px;
  left: 15px;
  margin: 0 auto;
  background: url(../../../img/contents_pc/lp/app333/app333_06_base.png) no-repeat 0 0;
  background-size: 300px 300px;
  z-index: 29;
  -webkit-animation: mecaRotate 4s cubic-bezier(0.05,1.16,0.97,1.12) infinite both;
  animation: mecaRotate 4s cubic-bezier(0.05,1.16,0.97,1.12) infinite both;
}
@-webkit-keyframes mecaRotate {
  0%,5% {
    -webkit-transform: rotate(0deg);
  }
  25%,30% {
    -webkit-transform: rotate(90deg);
  }
  50%,55% {
    -webkit-transform: rotate(180deg);
  }
  75%,80% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes mecaRotate {
  0%,5% {
    transform: rotate(0deg);
  }
  25%,30% {
    transform: rotate(90deg);
  }
  50%,55% {
    transform: rotate(180deg);
  }
  75%,80% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#app333_06 section.box04 p.btn::before {
  top: -49px;
  left: 8px;
}
#app333_06 section.box05 p.btn::before {
  top: -48px;
  left: -44px;
}

/* box01
---------------------------------------------------------- */

#app333_06 section.box01 h1 {
  background: url(../../../img/contents_pc/lp/app333/app333_06_main_01.png) no-repeat 0 0;
}


/* box02
---------------------------------------------------------- */

#app333_06 section.box02 h1 {
  background: url(../../../img/contents_pc/lp/app333/app333_06_main_05.png) no-repeat 0 0;
}


/* box03
---------------------------------------------------------- */
#app333_06 section.box03 h1 {
  background: url(../../../img/contents_pc/lp/app333/app333_06_main_09.png) no-repeat 0 0;
}

/* box04
---------------------------------------------------------- */
#app333_06 section.box04 h1 {
  background: url(../../../img/contents_pc/lp/app333/app333_06_main_13.png) no-repeat 0 0;
}

#app333_06 .chr-pic ul li[class^="chara0"] {
  position: absolute;
  top: 0;
}

#app333_06 .area-chara {
  background: url(../../../img/contents_pc/lp/app333/app333_06_chr-item_02.png) no-repeat 0 0;
  padding-top: 680px;
  width: 1920px;
  height: 0;
  line-height: 200%;
  overflow: hidden;
  position: absolute;
  top: -1%;
}

#app333_06 .item01 {
  background: url(../../../img/contents_pc/lp/app333/app333_06_chr-item_01.png) no-repeat 0 0;
  padding-top: 680px;
  width: 1920px;
  height: 0;
  line-height: 200%;
  overflow: hidden;
  z-index: 3;
  position: absolute;
  top: -8px;
  left: 18px;
}


#app333_06 .chr-pic .on {
  display: block!important;
  opacity: 1;
}

#app333_06 .chr-tmb ul {
  position: absolute;
  top: 350px;
  z-index: 5;
  left: 50%;
  margin-left: -250px;
}

#app333_06 .chr-tmb ul li {
  display: block;
  position: relative;
  width: 157px;
  height: 0;
  overflow: hidden;
  list-style-type: none;
  cursor: pointer;
  left: -140px;
  top: -40px;
  padding-top: 159px;
}
#app333_06 .chr-tmb ul li:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 164px;
  background: url(../../../img/contents_pc/lp/app333/app333_06_chr-btn.png) no-repeat;
  content: "";
}
#app333_06 .chr-tmb ul .tmb01:after {
  background-position: 0 0;
}
#app333_06 .chr-tmb ul .tmb02:after {
  background-position: -189px 0;
}
#app333_06 .chr-tmb ul .tmb03:after {
  background-position: -368px 0;
}
#app333_06 .chr-tmb ul .tmb04:after {
  background-position: -540px 0;
}
#app333_06 .chr-tmb ul .tmb05:after {
  background-position: -710px 0;
}

#app333_06 .chr-tmb ul .tmb01.on:after,
#app333_06 .chr-tmb ul .tmb01:hover:after {
  background-position: 0 -165px;
}
#app333_06 .chr-tmb ul .tmb02.on:after,
#app333_06 .chr-tmb ul .tmb02:hover:after {
  background-position: -189px -165px;
}
#app333_06 .chr-tmb ul .tmb03.on:after,
#app333_06 .chr-tmb ul .tmb03:hover:after {
  background-position: -368px -165px;
}
#app333_06 .chr-tmb ul .tmb04.on:after,
#app333_06 .chr-tmb ul .tmb04:hover:after {
  background-position: -540px -165px;
}
#app333_06 .chr-tmb ul .tmb05.on:after,
#app333_06 .chr-tmb ul .tmb05:hover:after {
  background-position: -710px -165px;
}

#app333_06 .chr-tmb ul .tmb02 {
  top: -199px;
  left: 19px;
}
#app333_06 .chr-tmb ul .tmb03 {
  left: 178px;
  top: -358px;
}
#app333_06 .chr-tmb ul .tmb04 {
  top: -344px;
  left: -140px;
}
#app333_06 .chr-tmb ul .tmb05 {
  top: -503px;
  left: 19px;
}

.chr-pic ul li {
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  opacity: 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, .chr-pic ul li {
    transition: all 0.5s ease 0s;
    opacity: 0;
  }
}


/* box05
---------------------------------------------------------- */
#app333_06 section.box05 h1 {
  background: url(../../../img/contents_pc/lp/app333/app333_06_main_16.png) no-repeat 0 0;
}