/*-------------------------------
base
-------------------------------*/
.clearfix:after {
  display: block;
  clear: both;
  content: " ";
}
.to {
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: 200%;
  white-space: nowrap;
}
.l-content_inner {
  padding-block: 30px;
}
.ap-campaign-game {
  max-width: 920px;
  margin-inline: auto;
  overflow: hidden;
  background-color: #f1f9fd;
}
.ap-campaign-game picture {
  display: block;
  line-height: 1;
}
.ap-campaign-game ul {
  margin: 0;
}
/*-------------------------------
contents
-------------------------------*/
.ap-campaign-game .contents {
  background-image: url(../images/game-start-bg_pc.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  padding-bottom: min(calc(45 / 920 * 100vw), 45px);
}
.ap-campaign-game .playing {
  background-image: url(../images/gamesite-bg_pc.jpg);
}

/*-------------------------------
contents_header
-------------------------------*/
.ap-campaign-game .contents .contents_header {
  position: relative;
  z-index: 1;
  padding-top: calc(80 / 920 * 100%);
  background: url(../images/game-start-star_pc.png) no-repeat center top
    min(calc(17 / 920 * 100vw), 17px) / calc(769 / 920 * 100%) auto;
}
.ap-campaign-game .playing .contents_header {
  background: url(../images/gamesite-star_pc.png) no-repeat center top
    min(calc(20 / 920 * 100vw), 17px) / calc(810 / 920 * 100%) auto;
}
.ap-campaign-game .contents .contents_header .logo {
  position: absolute;
  width: 101px;
  top: 5px;
  left: 5px;
}
.ap-campaign-game .contents_logo {
  padding-bottom: calc(17 / 920 * 100%);
  width: calc((696 / 920) * 100%);
  margin-inline: auto;
}
.ap-campaign-game .playing .contents_logo {
  padding-bottom: 0;
}
.ap-campaign-game .contents_lead {
  display: none;
  margin: calc((45 / 920) * 100%) auto 0;
  width: calc((446 / 920) * 100%);
  padding-bottom: calc((50 / 920) * 100%);
  opacity: 0;
}
.ap-campaign-game .contents .contents_chara {
  position: relative;
  opacity: 0;
}
.ap-campaign-game .contents .contents_chara img {
  width: 100%;
}
.ap-campaign-game .contents .contents_chara1 {
  position: absolute;
  top: 0;
  left: calc((60 / 920) * 100%);
  width: calc((171 / 920) * 100%);
  transform: translateY(calc(168 / 233 * -100%));
}
.ap-campaign-game .contents .contents_chara2 {
  position: absolute;
  top: 0;
  right: calc((60 / 920) * 100%);
  width: calc((192 / 920) * 100%);
  transform: translateY(calc(164 / 240 * -100%));
}
/*-------------------------------
game_start
-------------------------------*/
.ap-campaign-game .game_start {
  position: relative;
  width: calc((696 / 920) * 100%);
  height: 0;
  padding-top: calc(242 / 920 * 100%);
  margin: calc((13 / 920) * 100%) auto 0;
  background: url(../images/game-start_pc.png) no-repeat top center;
  background-size: 100% auto;
  opacity: 0;
}
.ap-campaign-game .game_start img {
  width: 100%;
}
.ap-campaign-game .game_start .game_startbtn {
  position: absolute;
  bottom: calc((35 / 242) * 100%);
  left: calc((178 / 696) * 100%);
  width: calc((340 / 696) * 100%);
}
/*-------------------------------
contents_inner
-------------------------------*/
.ap-campaign-game .contents .contents_inner {
  position: relative;
  display: none;
  width: calc(840 / 920 * 100%);
  padding-block: min(calc((25 / 920) * 100vw), 25px)
    min(calc((30 / 920) * 100vw), 30px);
  margin: 0 auto;
  background: #f39800;
  border-radius: 10px;
  z-index: 1;
}
/*-------------------------------
question
-------------------------------*/
.ap-campaign-game .contents .question {
  position: relative;
  width: calc((751 / 840) * 100%);
  margin-left: calc((54 / 840) * 100%);
  margin-bottom: calc((23 / 840) * 100%);
}
.ap-campaign-game .contents .question .question_item {
  position: absolute;
  top: calc((53 / 254) * 100%);
  left: calc((31 / 751) * 100%);
  width: calc((160 / 751) * 100%);
}
.ap-campaign-game .contents .question .question_item img {
  width: 100%;
}

.ap-campaign-game .contents .question .question_images {
  float: left;
  width: calc((222 / 751) * 100%);
  margin-right: calc((15 / 751) * 100%);
}
.ap-campaign-game .contents .question .question_images img {
  width: 100%;
}
.ap-campaign-game .contents .question .question_text {
  float: left;
  width: calc((514 / 751) * 100%);
}
.ap-campaign-game .contents .question .question_text img {
  width: 100%;
}

/*-------------------------------
 game-stage
-------------------------------*/
.ap-campaign-game .contents .game-stage {
  position: relative;
  width: calc(780 / 840 * 100%);
  padding-top: min(calc(232 / 920 * 100vw), 232px);
  margin-inline: auto;
  background: #fff;
  border-radius: 10px;
}
.ap-campaign-game .contents .game-stage #card li {
  width: calc(168 / 780 * 100%);
  cursor: pointer;
  -webkit-perspective: 1000;
  perspective: 1000;
}
.ap-campaign-game .contents .game-stage #card li.off,
.ap-campaign-game .contents .game-stage #card li.lock {
  pointer-events: none;
}
.ap-campaign-game .contents .game-stage #card img {
  width: 100%;
}
.ap-campaign-game .contents .game-stage #card .card1 {
  position: absolute;
  top: calc(30 / 232 * 100%);
  left: calc(32 / 780 * 100%);
}
.ap-campaign-game .contents .game-stage #card .card2 {
  position: absolute;
  top: calc(30 / 232 * 100%);
  left: calc(215 / 780 * 100%);
}
.ap-campaign-game .contents .game-stage #card .card3 {
  position: absolute;
  top: calc(30 / 232 * 100%);
  left: calc(398 / 780 * 100%);
}
.ap-campaign-game .contents .game-stage #card .card4 {
  position: absolute;
  top: calc(30 / 232 * 100%);
  left: calc(581 / 780 * 100%);
}
/*-------------------------------
 correct
-------------------------------*/
.ap-campaign-game .contents .correct {
  display: none;
}
.ap-campaign-game .contents .correct_inner {
  position: absolute;
  top: calc((144 / 564) * 100%);
  inset-inline: 0;
  margin-inline: auto;
  z-index: 1;
  width: calc(316 / 840 * 100%);
  height: calc((358 / 564) * 100%);
  background: url(../images/correct_bg.png) no-repeat center;
  background-size: 100% auto;
}
.ap-campaign-game .contents .correct_inner img {
  width: 100%;
}
.ap-campaign-game .contents .correct_inner .correct_btn {
  position: absolute;
  top: 93%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 78%;
}
.ap-campaign-game .contents .correct_inner .correct_images {
  position: absolute;
  top: 20%;
  left: 5%;
  width: 88%;
}
.ap-campaign-game .contents .correct_inner .correct_text {
  position: absolute;
  top: 76%;
  left: 10%;
  width: 80%;
}
.ap-campaign-game .contents .correct_inner .correct_item {
  position: absolute;
  top: 41%;
  left: -20%;
  width: 37%;
}
/*-------------------------------
 incorrect
-------------------------------*/
.ap-campaign-game .contents .incorrect {
  display: none;
}
.ap-campaign-game .contents .incorrect_inner {
  position: absolute;
  top: calc((156 / 564) * 100%);
  inset-inline: 0;
  margin-inline: auto;
  z-index: 1;
  width: calc(316 / 840 * 100%);
  height: calc((345 / 564) * 100%);
  background: url(../images/incorrect_bg.png) no-repeat center;
  background-size: 100% auto;
}
.ap-campaign-game .contents .incorrect_inner img {
  width: 100%;
}
.ap-campaign-game .contents .incorrect_inner .incorrect_btn {
  position: absolute;
  top: 92%;
  left: 30%;
  width: 39%;
}
.ap-campaign-game .contents .incorrect_inner .incorrect_item {
  position: absolute;
  bottom: calc((15.36 / 345) * 100%);
  right: calc((24.18 / 316) * -100%);
  width: calc((255 / 316) * 100%);
}
/*-------------------------------
complete
-------------------------------*/
.ap-campaign-game .contents .complete {
  display: none;
}
.ap-campaign-game .contents .complete_inner {
  position: absolute;
  top: calc((162 / 564) * 100%);
  inset-inline: 0;
  margin-inline: auto;
  z-index: 1;
  width: calc(316 / 820 * 100%);
  height: calc((339 / 564) * 100%);
  background: url(../images/complete_bg.png) no-repeat center;
  background-size: 100% auto;
}
.ap-campaign-game .contents .complete_inner img {
  width: 100%;
}
.ap-campaign-game .contents .complete_inner .complete_btn {
  position: absolute;
  top: 89%;
  left: 15%;
  width: 70.8%;
}

.ap-campaign-game .contents .complete_inner .onemore_btn {
  position: absolute;
  top: 77%;
  left: 15%;
  width: 68.8%;
}

.ap-campaign-game .contents .complete_inner .complete_item1 {
  position: absolute;
  top: 13%;
  left: 4%;
  width: 93.2%;
}
.ap-campaign-game .contents .complete_inner .complete_item2 {
  position: absolute;
  top: 22%;
  left: 21%;
  width: 58.2%;
}
/*-------------------------------
	copy
-------------------------------*/
.ap-campaign-game .contents .copy {
  margin-top: min(calc(45 / 920 * 100vw), 45px);
  margin-inline: auto;
  width: calc((757 / 920) * 100%);
}

/**********************************************************
	max-width: 768px
**********************************************************/
@media screen and (max-width: 767.98px) {
  /*-------------------------------
  base
  -------------------------------*/
  .l-content {
    padding-inline: 0;
  }
  .l-content_inner {
    padding-block: 0;
  }
  /*-------------------------------
  contents
  -------------------------------*/
  .ap-campaign-game .contents {
    background-image: url(../images/game-start-bg_sp.jpg);
    padding-bottom: calc((26 / 375) * 100vw);
  }
  .ap-campaign-game .playing {
    background-image: url(../images/gamesite-bg_sp.jpg);
    padding-bottom: calc((26 / 375) * 100vw);
  }
  .ap-campaign-game .contents .contents_header {
    padding-top: calc((20 / 375) * 100vw);
    background: url(../images/game-start-star_sp.png) no-repeat center top
      calc((5 / 375) * 100vw) / calc((338 / 375) * 100vw) auto;
  }
  .ap-campaign-game .playing .contents_header {
    background: url(../images/gamesite-star_sp.png) no-repeat center top
      calc((8 / 375) * 100vw) / calc((332 / 375) * 100vw) auto;
  }
  .ap-campaign-game .contents .contents_header .logo {
    width: calc((47 / 375) * 100vw);
    top: calc((10 / 375) * 100vw);
    left: calc((10 / 375) * 100vw);
  }
  .ap-campaign-game .contents_logo {
    width: calc((294 / 375) * 100vw);
    padding-bottom: calc((15 / 375) * 100vw);
  }
  .ap-campaign-game .game_start {
    width: calc((294 / 375) * 100vw);
    height: calc((103 / 375) * 100vw);
    margin-top: 0;
    background: url(../images/game-start_sp.png) no-repeat top center / contain;
  }
  .ap-campaign-game .game_start .game_startbtn {
    left: calc((75 / 375) * 100vw);
    width: calc((143 / 375) * 100vw);
    bottom: calc((17 / 375) * 100vw);
  }
  .ap-campaign-game .contents_lead {
    width: calc((269 / 375) * 100vw);
    margin-top: calc((15 / 375) * 100vw);
    padding-bottom: calc((119 / 375) * 100vw);
  }
  .ap-campaign-game .contents .contents_chara1 {
    left: calc((75 / 375) * 100vw);
    width: calc((112 / 375) * 100vw);
    margin-top: calc((109 / 375) * -100vw);
    transform: translateY(0);
  }
  .ap-campaign-game .contents .contents_chara2 {
    right: calc((69 / 375) * 100vw);
    width: calc((134 / 375) * 100vw);
    margin-top: calc((114 / 375) * -100vw);
    transform: translateY(0);
  }
  .ap-campaign-game .contents .contents_inner {
    width: calc((340 / 375) * 100vw);
    padding-block: calc((17 / 375) * 100vw) calc((10 / 375) * 100vw);
  }
  /*-------------------------------
  question
  -------------------------------*/
  .ap-campaign-game .contents .question {
    width: calc((305 / 375) * 100vw);
    margin-left: calc((22 / 375) * 100vw);
    margin-bottom: calc((7.43 / 375) * 100vw);
  }
  .ap-campaign-game .contents .question .question_item {
    top: calc((21 / 375) * 100vw);
    left: calc((11 / 375) * 100vw);
    width: calc((68 / 375) * 100vw);
  }
  .ap-campaign-game .contents .question .question_images {
    width: calc((90 / 375) * 100vw);
    margin-right: calc((4 / 375) * 100vw);
  }
  .ap-campaign-game .contents .question .question_text {
    width: calc((208 / 375) * 100vw);
  }
  /*-------------------------------
   game-stage
  -------------------------------*/
  .ap-campaign-game .contents .game-stage {
    position: relative;
    width: calc((320 / 375) * 100vw);
    padding-top: calc((326 / 375) * 100vw);
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
  }
  .ap-campaign-game .contents .game-stage #card li {
    width: calc((140 / 375) * 100vw);
    cursor: pointer;
    -webkit-perspective: 1000;
    perspective: 1000;
  }
  .ap-campaign-game .contents .game-stage #card li.off,
  .ap-campaign-game .contents .game-stage #card li.lock {
    pointer-events: none;
  }
  .ap-campaign-game .contents .game-stage #card img {
    width: 100%;
  }
  .ap-campaign-game .contents .game-stage #card .card1 {
    position: absolute;
    top: calc((15 / 375) * 100vw);
    left: calc((15 / 375) * 100vw);
  }
  .ap-campaign-game .contents .game-stage #card .card2 {
    position: absolute;
    top: calc((15 / 375) * 100vw);
    left: calc((165 / 375) * 100vw);
  }
  .ap-campaign-game .contents .game-stage #card .card3 {
    position: absolute;
    top: calc((168 / 375) * 100vw);
    left: calc((15 / 375) * 100vw);
  }
  .ap-campaign-game .contents .game-stage #card .card4 {
    position: absolute;
    top: calc((168 / 375) * 100vw);
    left: calc((165 / 375) * 100vw);
  }
  /*-------------------------------
   correct
  -------------------------------*/
  .ap-campaign-game .contents .correct {
    display: none;
  }
  .ap-campaign-game .contents .correct_inner {
    position: absolute;
    top: calc((170 / 375) * 100vw);
    z-index: 1;
    width: calc((210 / 375) * 100vw);
    height: calc((238 / 375) * 100vw);
    background: url(../images/correct_bg.png) no-repeat center;
    background-size: 100% auto;
  }
  .ap-campaign-game .contents .correct_inner img {
    width: 100%;
  }
  .ap-campaign-game .contents .correct_inner .correct_btn {
    position: absolute;
    top: calc((223 / 375) * 100vw);
    inset-inline: 0;
    margin-inline: auto;
    width: calc((158 / 375) * 100vw);
  }
  .ap-campaign-game .contents .correct_inner .correct_images {
    position: absolute;
    top: calc((43.68 / 375) * 100vw);
    left: calc((12 / 375) * 100vw);
    width: calc((184.8 / 375) * 100vw);
  }
  .ap-campaign-game .contents .correct_inner .correct_text {
    position: absolute;
    top: 75%;
    inset-inline: 0;
    margin-inline: auto;
  }
  .ap-campaign-game .contents .correct_inner .correct_item {
    position: absolute;
    top: calc((98.47 / 375) * 100vw);
    left: calc((39 / 375) * -100vw);
    width: calc((78 / 375) * 100vw);
  }
  /*-------------------------------
   incorrect
  -------------------------------*/
  .ap-campaign-game .contents .incorrect {
    display: none;
  }
  .ap-campaign-game .contents .incorrect_inner {
    position: absolute;
    top: calc((165.72 / 375) * 100vw);
    z-index: 1;
    width: calc((210 / 375) * 100vw);
    height: calc((230 / 375) * 100vw);
    background: url(../images/incorrect_bg.png) no-repeat center;
    background-size: 100% auto;
  }
  .ap-campaign-game .contents .incorrect_inner img {
    width: 100%;
  }
  .ap-campaign-game .contents .incorrect_inner .incorrect_btn {
    position: absolute;
    top: calc((216.3 / 375) * 100vw);
    inset-inline: 0;
    margin-inline: auto;
    width: calc((78.12 / 375) * 100vw);
  }
  .ap-campaign-game .contents .incorrect_inner .incorrect_item {
    position: absolute;
    top: calc((55.44 / 375) * 100vw);
    right: calc((16.08 / 375) * -100vw);
    width: calc((169.383 / 375) * 100vw);
  }
  /*-------------------------------
  complete
  -------------------------------*/
  .ap-campaign-game .contents .complete {
    display: none;
  }
  .ap-campaign-game .contents .complete_inner {
    position: absolute;
    top: calc((165.72 / 375) * 100vw);
    z-index: 1;
    width: calc((202.3 / 375) * 100vw);
    height: calc((212.15 / 375) * 100vw);
    background: url(../images/complete_bg.png) no-repeat center;
    background-size: 100% auto;
  }
  .ap-campaign-game .contents .complete_inner img {
    width: 100%;
  }
  .ap-campaign-game .contents .complete_inner .complete_btn {
    position: absolute;
    top: 89%;
    left: 15%;
    width: 70.8%;
  }
  .ap-campaign-game .contents .complete_inner .complete_item1 {
    position: absolute;
    top: 15%;
    left: 4%;
    width: 93.2%;
  }
  .ap-campaign-game .contents .complete_inner .complete_item2 {
    position: absolute;
    top: 22%;
    left: 21%;
    width: 58.2%;
  }
  .ap-campaign-game .contents .complete_inner .onemore_btn {
    top: 75%;
  }

  /*-------------------------------
  	copy
  -------------------------------*/
  .ap-campaign-game .contents .copy {
    width: calc((249 / 375) * 100vw);
    margin-top: calc((25 / 375) * 100vw);
    margin-inline: auto;
  }
}

/*-------------------------------
  モーダル
-------------------------------*/
.ap-campaign-game .contents .game_modal_bg {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
}

/*-------------------------------
  応募ボタン　アニメーション
-------------------------------*/
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-animation: rubberBand 1s both;
  animation: rubberBand 1s both;
}

@keyframes floating {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(-3%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

.floating {
  -webkit-animation: floating 3s infinite;
  animation: floating 3s infinite;
}

#contentsContainer .contentsInner {
  min-height: 280px;
}