@charset "utf-8";

* {
  box-sizing: border-box;
}
html {
  background: #282828
    url(/jp/forHome/mktcp/game/assets/images/bg/bg_pattern_dot_pc.svg)
    center/24px;
}
body {
  font-family: "DotGothic16", sans-serif;
  font-size: 4vw;
  color: #fff;
  height: 100vh;
  overflow: hidden;
  margin: auto;
}
body.is-adjusted {
  font-size: 2vh;
}
p,
h1,
h2,
h3,
h4 {
  line-height: 1.7;
}
img {
  max-width: 100%;
}

/* general
======================================== */
.full-width {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* btn
======================================== */
.btn-primary {
  display: block;
  background: url(/jp/forHome/mktcp/game/assets/images/bg/bg_btn.svg) no-repeat
    center/contain;
  width: 84vw;
  height: 17vw;
  line-height: 17vw;
  text-align: center;
  color: #fff;
  font-size: 5vw;
}
.is-adjusted .btn-primary {
  width: 100%;
  font-size: 2.7vh;
  height: auto;
  line-height: 9.5vh;
}
.btn-primary-modal {
  position: relative;
}
.btn-primary-modal-item {
  display: block;
  background: url(/jp/forHome/mktcp/game/assets/images/bg/bg_btn_modal.svg)
    no-repeat center/contain;
  width: 100%;
  height: auto;
  line-height: 6vh;
  line-height: 9.5vh;
  text-align: center;
  color: #fff;
  font-size: 5vw;
}
.is-adjusted .btn-primary-modal-item {
  font-size: 2.7vh;
}
.btn-secondary,
.btn-thirdiy {
  position: relative;
  display: block;
}
.btn-secondary-item,
.btn-thirdiy-line{
  width: 100%;
  text-align: center;
}
.btn-secondary-item{
  display: block;
  background-color: #53c2f1;
  color: #282828;
  padding: 2.2vh 4vw;
}
.btn-thirdiy-line{
  display:flex;
  align-items:center;
  justify-content:center;
  background: #00b900;
  color:#fff;
  padding: 0.65vh 4vw;
}
.btn-thirdiy-line img{
  width:40px;
  margin-right:7px;
}
.btn-secondary::before,
.btn-secondary::after,
.btn-thirdiy::before,
.btn-thirdiy::after,
.btn-secondary-item::before,
.btn-secondary-item::after,
.btn-thirdiy-line::before,
.btn-thirdiy-line::after {
  content: "";
  display: inline-block;
  width: 0.8vw;
  height: 0.8vw;
  background-color: #293044;
  position: absolute;
  z-index: 2;
}
.is-adjusted .btn-secondary::before,
.is-adjusted .btn-secondary::after,
.is-adjusted .btn-thirdiy::before,
.is-adjusted .btn-thirdiy::after,
.is-adjusted .btn-secondary-item::before,
.is-adjusted .btn-secondary-item::after,
.is-adjusted .btn-thirdiy-line::before,
.is-adjusted .btn-thirdiy-line::after {
  width: 3px;
  height: 3px;
}
.btn-secondary::before,
.btn-thirdiy::before {
  bottom: 0;
  left: 0;
}
.btn-secondary::after,
.btn-thirdiy::after{
  bottom: 0;
  right: 0;
}
.btn-secondary-item::before,
.btn-thirdiy-line::before{
  top: 0;
  left: 0;
}
.btn-secondary-item::after,
.btn-thirdiy-line::after{
  top: 0;
  right: 0;
}
.is-adjusted .btn-primary:hover,
.is-adjusted .btn-primary-modal:hover,
.is-adjusted .btn-secondary:hover,
.is-adjusted .btn-thirdiy:hover{
  opacity: 0.7;
  cursor: pointer;
}

/* text
======================================== */
.text,
.text-secondary,
.text-inner {
  color: #fff;
  position: relative;
  padding: 1px;
  margin: 1.6vw !important;
}
.is-adjusted .text,
.is-adjusted .text-inner {
  margin: 6px !important;
}
.text {
  background: #293044;
}
.text-inner {
  padding: 2vh 4vw;
  background: #293044;
}
.is-adjusted .text-inner {
  padding: 2vh 1.7vh;
}
.has-arrow .text-inner {
  padding: 2vh 4vw 3vh;
}
.is-adjusted .is-adjusted .text-inner,
.is-adjusted .has-arrow .text-inner {
  padding-left: 1.7vh;
  padding-right: 1.7vh;
}
.text::after,
.text-inner::before,
.text-inner::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.text::after {
  border: none;
  border-radius: 0;
  box-shadow: 0px -1.6vw #293044, -0.8vw -0.8vw #293044, 0px -9px #fff,
    0.8vw -0.8vw #293044, 0.8vw -1.6vw #fff, 1.6vw 0px #293044,
    1.6vw -0.8vw #fff, 9px 0px #fff, 0px 1.6vw #293044, 0.8vw 0.8vw #293044,
    0px 9px #fff, -1.6vw 0px #293044, -0.8vw 0.8vw #293044, -0.8vw 1.6vw #fff,
    -1.6vw 0.8vw #fff, -9px 0px #fff, -1.6vw -0.8vw #fff, -0.8vw -1.6vw #fff,
    0.8vw 1.6vw #fff, 1.6vw 0.8vw #fff;
  top: 0.8vw;
  right: 0.8vw;
  bottom: 0.8vw;
  left: 0.8vw;
}
.is-adjusted .text::after {
  box-shadow: 0px -6px #293044, -3px -3px #293044, 0px -9px #fff,
    3px -3px #293044, 3px -6px #fff, 6px 0px #293044, 6px -3px #fff,
    9px 0px #fff, 0px 6px #293044, 3px 3px #293044, 0px 9px #fff,
    -6px 0px #293044, -3px 3px #293044, -3px 6px #fff, -6px 3px #fff,
    -9px 0px #fff, -6px -3px #fff, -3px -6px #fff, 3px 6px #fff, 6px 3px #fff;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
}
.text-inner::before {
  border: none;
  border-radius: 0;
  box-shadow: 0px -0.8vw #293044, 0px -1.6vw #666, 0.8vw 0px #293044,
    0.8vw -0.8vw #666, 1.6vw 0px #666, 0px 0.8vw #293044, 0px 1.6vw #666,
    -0.8vw 0px #293044, -0.8vw 0.8vw #666, -1.6vw 0px #666, -0.8vw -0.8vw #666,
    0.8vw 0.8vw #666;
  top: 0.8vw;
  right: 0.8vw;
  bottom: 0.8vw;
  left: 0.8vw;
}
.is-adjusted .text-inner::before {
  box-shadow: 0px -3px #293044, 0px -6px #666, 3px 0px #293044, 3px -3px #666,
    6px 0px #666, 0px 3px #293044, 0px 6px #666, -3px 0px #293044, -3px 3px #666,
    -6px 0px #666, -3px -3px #666, 3px 3px #666;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
}
.text-secondary.text,
.text-secondary .text-inner {
  background: #435aa4;
}
.text-secondary.text::after {
  border: none;
  border-radius: 0;
  box-shadow: 0px -1.6vw #435aa4, -0.8vw -0.8vw #435aa4, 0px -9px #fff,
    0.8vw -0.8vw #435aa4, 0.8vw -1.6vw #fff, 1.6vw 0px #435aa4,
    1.6vw -0.8vw #fff, 9px 0px #fff, 0px 1.6vw #435aa4, 0.8vw 0.8vw #435aa4,
    0px 9px #fff, -1.6vw 0px #435aa4, -0.8vw 0.8vw #435aa4, -0.8vw 1.6vw #fff,
    -1.6vw 0.8vw #fff, -9px 0px #fff, -1.6vw -0.8vw #fff, -0.8vw -1.6vw #fff,
    0.8vw 1.6vw #fff, 1.6vw 0.8vw #fff;
  top: 0.8vw;
  right: 0.8vw;
  bottom: 0.8vw;
  left: 0.8vw;
}
.is-adjusted .text-secondary.text::after {
  box-shadow: 0px -6px #435aa4, -3px -3px #435aa4, 0px -9px #fff,
    3px -3px #435aa4, 3px -6px #fff, 6px 0px #435aa4, 6px -3px #fff,
    9px 0px #fff, 0px 6px #435aa4, 3px 3px #435aa4, 0px 9px #fff,
    -6px 0px #435aa4, -3px 3px #435aa4, -3px 6px #fff, -6px 3px #fff,
    -9px 0px #fff, -6px -3px #fff, -3px -6px #fff, 3px 6px #fff, 6px 3px #fff;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
}
.text-secondary .text-inner::before {
  border: none;
  border-radius: 0;
  box-shadow: 0px -0.8vw #435aa4, 0px -1.6vw #293044, 0.8vw 0px #435aa4,
    0.8vw -0.8vw #293044, 1.6vw 0px #293044, 0px 0.8vw #435aa4,
    0px 1.6vw #293044, -0.8vw 0px #435aa4, -0.8vw 0.8vw #293044,
    -1.6vw 0px #293044, -0.8vw -0.8vw #293044, 0.8vw 0.8vw #293044;
  top: 0.8vw;
  right: 0.8vw;
  bottom: 0.8vw;
  left: 0.8vw;
}
.is-adjusted .text-secondary .text-inner::before {
  box-shadow: 0px -3px #435aa4, 0px -6px #293044, 3px 0px #435aa4,
    3px -3px #293044, 6px 0px #293044, 0px 3px #435aa4, 0px 6px #293044,
    -3px 0px #435aa4, -3px 3px #293044, -6px 0px #293044, -3px -3px #293044,
    3px 3px #293044;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
}
.has-arrow .text-inner::after {
  width: 4vw;
  height: 1.35vh;
  background: url(/jp/forHome/mktcp/game/assets/images/icon/icon_arrow-bottom.png)
    no-repeat center/contain;
  right: 3vw;
  bottom: 1.2vh;
  opacity: 0;
}
.is-adjusted .has-arrow .text-inner::after {
  width: 1.8vh;
  right: 1.4vh;
}
.has-arrow.is-visible-arrow .text-inner::after {
  opacity: 1;
}
.js-text-anim .js-text-anim-target {
  opacity: 0;
}
.js-text-anim .js-text-anim-target span {
  opacity: 0;
}

/* how-to
======================================== */
.how-to-inner {
  padding: 4.5vh 8vw;
  position: relative;
  height: calc(100vh - 6vh - 4.8vh);
}
.is-adjusted .how-to-inner {
  padding: 4.5% 8%;
}
.how-to-inner::after {
  content: "";
  display: block;
  height: calc(100vh - 6vh - 4.8vh);
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.how-to-inner .text-secondary {
  width: 84vw;
  position: absolute;
  top: 4.5vh;
  left: calc(8vw - 1.6vw);
  z-index: 4;
}
.is-adjusted .how-to-inner .text-secondary {
  width: 84%;
  top: 4.5%;
  left: calc(8% - 1.6%);
}
#how-to-01 .choices {
  margin-top: 10vh;
}
.is-adjusted-iphone #how-to-01 .choices {
  margin-top: 7vh;
}
.is-adjusted #how-to-01 .btn-primary:hover {
  cursor: default;
  opacity: 1;
}
#how-to-02 .how-to-inner .text-secondary {
  top: 40%;
}
#how-to-02 .quiz-home-anim-inner {
  background-image: url(/jp/forHome/mktcp/game/assets/images/anim/anim_quiz_damage.gif);
}
.how-to-inner .is-front {
  z-index: 4;
}
.how-to-inner .choices .is-front span {
  background-color: #d32c16;
}
.how-to-inner .choices .is-front span::after {
  content: "";
  display: block;
  width: 20vw;
  height: 13.5vh;
  background: url(/jp/forHome/mktcp/game/assets/images/img/img_finger_01.png)
    no-repeat center/contain;
  position: absolute;
  top: 30%;
  right: 0;
}
.how-to-btn .btn-primary {
  position: relative;
}
.how-to-btn.is-front .btn-primary::after {
  content: "";
  display: block;
  position: absolute;
  width: 24vw;
  height: 11.2vh;
  background: url(/jp/forHome/mktcp/game/assets/images/img/img_finger_02.png)
    no-repeat center/contain;
  bottom: 75%;
  right: 0;
}
#how-to-02 .question-hp.is-front {
  position: absolute;
  top: 4.5%;
  right: 0;
}
#how-to-02 .question-hp.is-front .question-hp-hukidashi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48vw;
  height: 8.1vh;
  background: url(/jp/forHome/mktcp/game/assets/images/bg/bg_hukidashi_tutorial.svg)
    no-repeat center/contain;
  position: absolute;
  top: 0;
  right: 110%;
  font-size: 4.2vw;
  text-align: center;
  padding-right: 7vw;
  font-weight: normal;
  text-shadow: none;
}
.is-adjusted #how-to-02 .question-hp.is-front .question-hp-hukidashi {
  width: 29vh;
  height: 8vh;
  right: 110%;
  font-size: 1.9vh;
  padding-right: 5vh;
  top: 50%;
  transform: translateY(-50%);
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .is-adjusted #how-to-02 .question-hp.is-front .question-hp-hukidashi {
    font-size: 50%;
  }
}
#how-to-03 {
  height: calc(100vh - 6vh - 4.8vh);
  padding-top: 4vh;
}

/* timer
======================================== */
.timer {
  margin-top: 3vh;
  position: relative;
  height: 2.2vh;
}
.timer::after {
  content: "";
  display: inline-block;
  position: absolute;
  border: none;
  border-radius: 0;
  box-shadow: 0px -0.8vw #293044, 0px -1.6vw #fff, 0.8vw 0px #293044,
    0.8vw -0.8vw #fff, 1.6vw 0px #fff, 0px 0.8vw #293044, 0px 1.6vw #fff,
    -0.8vw 0px #293044, -0.8vw 0.8vw #fff, -1.6vw 0px #fff, -0.8vw -0.8vw #fff,
    0.8vw 0.8vw #fff;
  top: 0.8vw;
  right: 0.8vw;
  bottom: 0.8vw;
  left: 0.8vw;
}
.is-adjusted .timer::after {
  box-shadow: 0px -3px #293044, 0px -6px #fff, 3px 0px #293044, 3px -3px #fff,
    6px 0px #fff, 0px 3px #293044, 0px 6px #fff, -3px 0px #293044, -3px 3px #fff,
    -6px 0px #fff, -3px -3px #fff, 3px 3px #fff;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
}
.timer-text {
  font-size: 3vw;
  color: #293044;
  background-color: #fff;
  width: 10.4vw;
  height: 2.2vh;
  line-height: 2.2vh;
  text-align: center;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border-right: 0.8vw solid #293044;
}
.is-adjusted .timer-text {
  font-size: 85%;
  width: 10.4%;
  border-right: 3px solid #293044;
}
.timer-bar {
  display: block;
  width: calc(100% - 13%);
  height: 2vh;
  background-color: #2ad43b;
  transform: translateX(10.4vw);
}
.is-adjusted .timer-bar {
  transform: translateX(4.8vh);
}

/* choice
======================================== */
.choices {
  margin-top: 3vh;
  counter-reset: li_count;
}
.choices li {
  margin-top: 3vh;
  position: relative;
}
.choices li::before,
.choices li::after,
.choices label::before,
.choices label::after {
  content: "";
  display: inline-block;
  width: 0.8vw;
  height: 0.8vw;
  background-color: rgb(41 48 68 / 0.9);
  position: absolute;
  z-index: 2;
}
.is-adjusted .choices li::before,
.is-adjusted .choices li::after,
.is-adjusted .choices label::before,
.is-adjusted .choices label::after {
  width: 3px;
  height: 3px;
}
.choices li::before {
  top: 0;
  left: 0;
}
.choices li::after {
  top: 0;
  right: 0;
}
.choices label::before {
  bottom: 0;
  left: 0;
}
.choices label::after {
  bottom: 0;
  right: 0;
}
.choices input {
  display: none;
}
.choices label span {
  display: block;
  background-color: #666;
  padding: 2.2vh 4vw;
  position: relative;
}
.choices label span::before {
  counter-increment: li_count;
  content: counter(li_count, upper-alpha) ". ";
}
.is-adjusted .choices label span {
  padding: 2.2vh 4%;
}
.choices label input:checked + span {
  background-color: #d32c16;
}
.is-adjusted .choices li span:hover {
  cursor: pointer;
  opacity: 0.7;
}
.is-adjusted #how-to-01 .choices li span:hover {
  cursor: default;
  opacity: 1;
}

/* answer
======================================== */
.answer-modal {
  display: none;
}
.answer {
  position: relative;
  width: 80vw;
  min-height: 70vh;
  margin: auto;
  background: #293044;
  color: #fff;
}
.is-adjusted .answer {
  width: 80%;
}
.answer::before,
.answer::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.answer::before {
  width: calc(80vw - 1.6vw);
  height: 0.8vw;
  background: #53c2f1;
  left: 50%;
  bottom: 100%;
  z-index: 2;
  transform: translateX(-50%);
}
.is-adjusted .answer::before {
  width: calc(100% - 6px);
  height: 3px;
}
.answer.is-incorrect::before {
  background: #435aa4;
}
.answer::after {
  border: none;
  border-radius: 0;
  box-shadow: 0px -1.6vw #293044, -0.8vw -0.8vw #293044, 0px -9px #fff,
    0.8vw -0.8vw #293044, 0.8vw -1.6vw #fff, 1.6vw 0px #293044,
    1.6vw -0.8vw #fff, 9px 0px #fff, 0px 1.6vw #293044, 0.8vw 0.8vw #293044,
    0px 9px #fff, -1.6vw 0px #293044, -0.8vw 0.8vw #293044, -0.8vw 1.6vw #fff,
    -1.6vw 0.8vw #fff, -9px 0px #fff, -1.6vw -0.8vw #fff, -0.8vw -1.6vw #fff,
    0.8vw 1.6vw #fff, 1.6vw 0.8vw #fff;
  top: 0.8vw;
  right: 0.8vw;
  bottom: 0.8vw;
  left: 0.8vw;
}
.is-adjusted .answer::after {
  box-shadow: 0px -6px #293044, -3px -3px #293044, 0px -9px #fff,
    3px -3px #293044, 3px -6px #fff, 6px 0px #293044, 6px -3px #fff,
    9px 0px #fff, 0px 6px #293044, 3px 3px #293044, 0px 9px #fff,
    -6px 0px #293044, -3px 3px #293044, -3px 6px #fff, -6px 3px #fff,
    -9px 0px #fff, -6px -3px #fff, -3px -6px #fff, 3px 6px #fff, 6px 3px #fff;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
}
.answer-inner {
  position: relative;
  z-index: 2;
  height: 100%;
}
.answer-thumb {
  height: 28.5vh;
  background: #53c2f1;
}
.is-incorrect .answer-thumb {
  background: #435aa4;
}
.answer-thumb::before,
.answer-thumb::after {
  content: "";
  display: inline-block;
  background: #53c2f1;
  width: 0.8vw;
  height: calc(28.5vh - 0.8vw);
  position: absolute;
  top: 0.8vw;
  z-index: 2;
}
.is-adjusted .answer-thumb::before,
.is-adjusted .answer-thumb::after {
  width: 3px;
  height: calc(28.5vh - 3px);
  top: 3px;
}
.is-incorrect .answer-thumb::before,
.is-incorrect .answer-thumb::after {
  background: #435aa4;
}
.answer-thumb::after {
  left: 100%;
}
.answer-thumb::before {
  right: 100%;
}
.answer-thumb-inner {
  width: 100%;
  height: 100%;
  background-image: url(/jp/forHome/mktcp/game/assets/images/anim/anim_quiz_true.gif);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.answer-thumb-inner::after {
  content: "";
  display: block;
  width: calc(100% + 1.6vw);
  height: 15px;
  background: url(/jp/forHome/mktcp/game/assets/images/bg/bg_pattern_lattice_01.svg)
    repeat-x left/contain;
  position: absolute;
  left: -0.8vw;
  bottom: 0;
  z-index: 5;
}
.is-adjusted .answer-thumb-inner::after {
  width: 100%;
  left: 0;
}
.answer-body {
  background: #293044;
  height: calc(100% - 28.5vh);
  padding: 3vh 8vw 17vh;
  position: relative;
}
.is-adjusted .answer-body {
  padding: 3vh 8% 17vh;
}
.answer-corrects {
  text-align: center;
  font-size: 7.46vw;
  margin-bottom: 3vh;
}
.is-adjusted .answer-corrects {
  font-size: 200%;
}
.answer-corrects p {
  font-size: 4.8vw;
}
.is-adjusted .answer-corrects p {
  font-size: 57%;
}
.answer-corrects ul {
  font-size: 5.8vw;
  margin-top: 1vh;
  line-height: 1.7;
}
.is-adjusted .answer-corrects ul {
  font-size: 69%;
}
.answer-body .btn-primary-modal-outer {
  position: absolute;
  left: 50%;
  bottom: 5vh;
  transform: translateX(-50%);
  width: calc(100% - 16vw);
}
.is-adjusted .answer-body .btn-primary-modal-outer {
  width: calc(100% - 16%);
}
.answer-modal-btn {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
}
.is-adjusted .answer-modal-btn {
  width: 100%;
  bottom: 15vh;
}
.is-adjusted-iphone .answer-modal-btn {
  bottom: calc(4.8vh + 70px);
}
.answer-notes {
  font-size: 0.8em;
  margin-top: 1vh;
}

/* modaal
======================================== */
.modaal-content-container {
  padding: 5vh 0;
}
.modaal-inner-wrapper {
  padding: 0;
}
.modaal-container {
  background: none;
}
.is-adjusted .modaal-wrapper {
  left: 50%;
  transform: translateX(-50%);
  width: 56.2vh;
}

/* slick
======================================== */
.answer-slide-overlay {
  position: relative;
  margin-top: 3.75vh;
}
.answer-slide-overlay::before,
.answer-slide-overlay::after {
  content: "";
  display: block;
  width: 10vw;
  height: 40vh;
  position: absolute;
  top: 0;
  z-index: 9;
}
.is-adjusted .answer-slide-overlay::before,
.is-adjusted .answer-slide-overlay::after {
  width: 10%;
}
.answer-slide-overlay::before {
  background: linear-gradient(
    90deg,
    rgba(54, 65, 89, 0.5),
    rgba(54, 65, 89, 0)
  );
  left: 0;
}
.answer-slide-overlay::after {
  background: linear-gradient(
    -90deg,
    rgba(54, 65, 89, 0.5),
    rgba(54, 65, 89, 0)
  );
  right: 0;
  width: 14vw;
}
.is-adjusted .answer-slide-overlay::after {
  width: 14%;
}
.slick-slide {
  position: relative;
}
.answer-slide-body {
  padding: 0 5vw;
}
.is-adjusted .answer-slide-body {
  padding: 0 5%;
}
.answer-slide-alpha {
  display: inline-block;
  width: 12.8vw;
  height: 7.2vh;
  position: absolute;
  top: 0;
  left: 0;
  background: url(/jp/forHome/mktcp/game/assets/images/bg/bg_slick_alpha.png)
    no-repeat center/contain;
}
.is-adjusted .answer-slide-alpha {
  width: 12.8%;
}
.slick-center .answer-slide-alpha {
  background: url(/jp/forHome/mktcp/game/assets/images/bg/bg_slick_alpha-active.png)
    no-repeat center/contain;
}
.answer-slide-alpha span {
  display: block;
  text-align: center;
  font-size: 7.46vw;
  line-height: 6.8vh;
}
.is-adjusted .answer-slide-alpha span {
  font-size: 200%;
}
.slick-center .answer-slide-body img {
  border: 1.6vw solid #e54338;
}
.is-adjusted .slick-center .answer-slide-body img {
  border: 6px solid #e54338;
}
.slick-dotted.slick-slider {
  margin: 0;
  padding-bottom: 6vh;
}
.slick-dots {
  bottom: 0;
}
.slick-dots li {
  background-color: #666;
  width: 8vw;
  height: 4.5vh;
  position: relative;
}
.is-adjusted .slick-dots li {
  width: 8%;
}
.is-adjusted .slick-dots li:hover {
  cursor: pointer;
  opacity: 0.7;
}
.slick-dots li.slick-active {
  background-color: #d32c16;
}
.slick-dots li span {
  display: block;
  font-size: 4.8vw;
  line-height: 4.3vh;
}
.is-adjusted .slick-dots li span {
  font-size: 150%;
}
.slick-dots li::before,
.slick-dots li::after,
.slick-dots li span::before,
.slick-dots li span::after {
  content: "";
  display: inline-block;
  width: 0.8vw;
  height: 0.8vw;
  background-color: #293044;
  position: absolute;
  z-index: 2;
}
.is-adjusted .slick-dots li::before,
.is-adjusted .slick-dots li::after,
.is-adjusted .slick-dots li span::before,
.is-adjusted .slick-dots li span::after {
  width: 3px;
  height: 3px;
}
.slick-dots li::before {
  top: 0;
  left: 0;
}
.slick-dots li::after {
  top: 0;
  right: 0;
}
.slick-dots li span::before {
  bottom: 0;
  left: 0;
}
.slick-dots li span::after {
  bottom: 0;
  right: 0;
}
.slick-slide img {
  margin: auto;
}
.slick-prev,
.slick-next {
  width: 6.4vw;
  height: 4.5vh;
  top: 44%;
  z-index: 10;
}
.slick-prev {
  left: 7.4vw;
}
.slick-next {
  right: 7.4vw;
}
.slick-prev:before,
.slick-next:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
}
.slick-prev:before {
  background: url(/jp/forHome/mktcp/game/assets/images/icon/icon_arrow-slider-left.png)
    no-repeat center/contain;
}
.slick-next:before {
  background: url(/jp/forHome/mktcp/game/assets/images/icon/icon_arrow-slider-right.png)
    no-repeat center/contain;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0;
}
.is-adjusted .slick-prev {
  left: 7.4%;
}
.is-adjusted .slick-next {
  right: 6%;
  width: 6%;
}
.is-adjusted .slick-prev {
  left: 6%;
  width: 6%;
}

/* header
======================================== */
.l-header {
  height: 6vh;
  display: flex;
  align-items: center;
  padding-left: 2vw;
  background-color: #fff;
}
.is-adjusted .l-header {
  padding-left: 2%;
}
.header-logo {
  max-height: 100%;
  height: 4.5vh;
}

/* footer
======================================== */
.l-footer {
  height: 4.8vh;
  background: #282828;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-cc {
  font-size: 2.4vw;
  font-family: "YuGothic", "游ゴシック体", "Yu Gothic", "游ゴシック",
    "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo", "メイリオ",
    "ＭＳ Ｐゴシック";
}
.is-adjusted .footer-cc {
  font-size: 80%;
}

/* main
======================================== */
.l-main {
  background: #293044;
  height: calc(100vh - 6vh - 4.8vh);
  overflow: hidden;
}
.main-inner {
  padding: 0 8vw;
  background: url(/jp/forHome/mktcp/game/assets/images/bg/bg_pattern_arrow.svg)
    center/6.7%;
}
.is-adjusted .main-inner {
  padding: 0 8%;
  position: relative;
}

/* section
======================================== */
.section {
  display: none;
}

/* opening
======================================== */
#opening {
  display: block;
  height: calc(100vh - 6vh - 4.8vh);
  text-align: center;
}
.opening-img {
  position: relative;
}
.opening-img .btn-primary {
  width: 80%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.opening-img .btn-primary {
  bottom: 6vh;
}
.is-adjusted-iphone .opening-img .btn-primary {
  bottom: 4vh;
}
#opening img {
  width: 100vw;
  margin: auto;
}
.is-adjusted #opening img {
  width: 100%;
}
.opeing-img-iphone {
  display: none;
}
.is-adjusted-iphone .opeing-img-iphone {
  display: block;
}
.is-adjusted-iphone .opeing-img-default {
  display: none;
}

/* how-to
======================================== */
#how-to {
  display: none;
}
.how-to-thumb {
  text-align: center;
  margin: 3.74vh auto 3vh;
  max-height: 38vh;
}
.how-to-thumb img {
  max-height: 38vh;
}

/* quiz-home
======================================== */
#quiz-home {
  position: relative;
  height: calc(100vh - 6vh - 4.8vh);
}
.quiz-home-anim {
  height: 59vh;
  margin-bottom: 4.2vh;
  background: #34ddeb;
}
.is-adjusted .quiz-home-anim {
  height: 59%;
}
.is-adjusted-iphone .quiz-home-anim {
  height: 47vh;
}
.quiz-home-anim-bg {
  background: url(/jp/forHome/mktcp/game/assets/images/bg/bg_line_cyber.svg)
    no-repeat center/cover;
  height: 100%;
}
.quiz-home-anim-inner {
  width: 100%;
  height: 100%;
  padding-top: 3vh;
  background-image: url(/jp/forHome/mktcp/game/assets/images/anim/anim_quiz_wait.gif);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.quiz-home-anim-inner::after {
  content: "";
  display: block;
  width: 100%;
  height: 4.5vh;
  background: url(/jp/forHome/mktcp/game/assets/images/bg/bg_pattern_lattice_02.svg)
    repeat-x left/contain;
  position: absolute;
  left: 0;
  bottom: -1px;
}
.quiz-home-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.question-cnt {
  background: url(/jp/forHome/mktcp/game/assets/images/bg/bg_queston.svg)
    no-repeat bottom/contain;
  color: #fff;
  width: 28.8vw;
  height: 5.4vh;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4.8vw;
  padding-bottom: 0.4vh;
  font-size: 5.4vw;
  font-weight: bold;
  text-shadow: 0px 4px 0px #293044;
}
.is-adjusted .question-cnt {
  width: 31.8%;
  padding-right: 4.8%;
  font-size: 200%;
}
.question-q {
  display: inline-block;
  margin-right: 2vw;
  font-size: 7.4vw;
}
.is-adjusted .question-q {
  font-size: 130%;
  margin-right: 6%;
}
.question-hp {
  background: url(/jp/forHome/mktcp/game/assets/images/bg/bg_hp.png) no-repeat
    center/contain;
  width: 19.2vw;
  height: 9vh;
  margin-right: 4.8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 8vw;
  text-shadow: 0px 4px 0px #293044;
}
.is-adjusted .question-hp {
  width: 19.2%;
  margin-right: 4.8%;
  font-size: 240%;
}

/* quiz
======================================== */
.quiz {
  display: none;
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  background: rgb(41 48 68 / 0.9)
    url(/jp/forHome/mktcp/game/assets/images/bg/bg_pattern_arrow.svg)
    center/6.7%;
  padding: 4.5vh 8vw;
  transform: translateY(100vh);
  transition: 0.4s;
}
.is-adjusted .quiz {
  width: 100%;
  padding: 4.5vh 8%;
}
.quiz-capture {
  display: block;
  margin-top: 3vh;
  text-align: center;
}

/* result
======================================== */
.body-result,
.result {
  height: auto !important;
  overflow: visible;
}
.result .main-inner {
  padding-top: 35px;
  padding-bottom: 95px;
  position: relative;
}
.result .main-inner.is-good {
  padding-bottom: 35px;
}
.result .main-inner::before {
  content: "";
  display: block;
  width: 100%;
  height: 15px;
  background: url(/jp/forHome/mktcp/game/assets/images/bg/bg_pattern_lattice_01.svg)
    repeat-x left/contain;
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
}
.resultAnim {
  text-align: center;
}
.result .text {
  line-height: 1.7;
}
.result .btn-primary,
.result .btn-secondary {
  margin-top: 4.5vh;
}
.result .btn-thirdiy{
  margin-top:2vh;
}
.result-good {
  position: fixed;
  right: 2.3vh;
  bottom: 3vh;
  z-index: 10;
}
.result-good:hover {
  cursor: pointer;
  opacity: 0.7;
}
.good-inner {
  position: relative;
}
.good-img,
.good-text {
  display: block;
  position: absolute;
}
.good-img {
  width: 11vh;
  right: 0;
  bottom: 2.3vh;
}
.good-text {
  width: 0;
  right: 6vh;
  bottom: 3.9vh;
  overflow: hidden;
}
.good-text.is-active {
  width: 35.4vh;
}
.good-text img {
  transform: translateX(100%);
  transition: 0.4s;
}
.good-text.is-active img {
  transform: translateX(0);
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .is-adjusted .good-text.is-active img {
    width: 35.4vh;
    height: 8vh;
  }
}

/* share
======================================== */
.share-title {
  font-size: 5.4vw;
  font-weight: bold;
  text-align: center;
  margin-top: 4.5vh;
}
.share-text{
  font-weight: bold;
  text-align: center;
  margin-top: 4.5vh;
}
.is-adjusted .share-title{
  font-size: 2.6vh;
}
.is-adjusted .share-text{
  font-size:2.2vh;
}
.share-title::before,
.share-title::after {
  content: "";
  display: inline-block;
  width: 2.4vw;
  height: 2.4vh;
}
.is-adjusted .share-title::before,
.is-adjusted .share-title::after {
  width: 5.4%;
}
.share-title::before {
  background: url(/jp/forHome/mktcp/game/assets/images/icon/icon_arrow-right.png)
    no-repeat left center/contain;
  margin-right: 2.66vw;
}
.is-adjusted .share-title::before {
  margin-right: 2.66%;
}
.share-title::after {
  background: url(/jp/forHome/mktcp/game/assets/images/icon/icon_arrow-left.png)
    no-repeat right center/contain;
  margin-left: 2.66vw;
}
.is-adjusted .share-title::after {
  margin-left: 2.66%;
}
.shares {
  display: flex;
  justify-content: space-between;
  margin-top: 3vh;
}
.shares li {
  width: 28.6%;
}
.is-adjusted .shares li:hover {
  cursor: pointer;
  opacity: 0.7;
}
.shares img {
  width: 100%;
}

/*margin*/
.mt0{margin-top:0;}