/* ****************************************************
mixin
**************************************************** */
/* center */
/* opacity */
/* text length */
/* transition */
/* break point */
/* for Coding */
/* ****************************************************
color set
**************************************************** */
/* ****************************************************
font
**************************************************** */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/* ****************************************************
basic
**************************************************** */
body {
  overflow: hidden;
  font-size: 62.5%;
  line-height: 1.8;
  margin: 0;
  font-family: 'Noto Sans Japanese', sans-serif;
  color: #5CD9FF; }
  body a {
    text-decoration: none;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    color: #333; }
    body a:hover {
      opacity: 0.4;
      filter: alpha(opacity=40); }
  body img {
    vertical-align: middle; }

.delay0_5 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s; }

.delay1 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s; }

.delay1_5 {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s; }

  .delay2 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s; }

/* ****************************************************
contents
**************************************************** */
.wrapper_pc {
  width: 100vw;
  height: 100vh;
  background: -webkit-gradient(linear, left top, right top, from(#fff757), color-stop(50%, #fff757), color-stop(50%, #fff), to(#fff));
  background: -webkit-linear-gradient(left, #fff757 0%, #fff757 50%, #fff 50%, #fff 100%);
  background: -o-linear-gradient(left, #fff757 0%, #fff757 50%, #fff 50%, #fff 100%);
  background: linear-gradient(90deg, #fff757 0%, #fff757 50%, #fff 50%, #fff 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .wrapper_pc .contents {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .wrapper_pc .contents .left_side,
    .wrapper_pc .contents .right_side {
      width: 50%; }
      .wrapper_pc .contents .left_side img,
      .wrapper_pc .contents .right_side img {
        width: 100%; }
    .wrapper_pc .contents .left_side {
      position: relative; }
      .wrapper_pc .contents .left_side p {
        width: 100%;
        padding: 0;
        margin: 0; }
        .wrapper_pc .contents .left_side p.bg {
          text-align: center;
          position: relative;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
        .wrapper_pc .contents .left_side p.logo {
          width: 17.2%;
          position: absolute;
          top: 4.8%;
          left: 20.5%; }
        .wrapper_pc .contents .left_side p.i01 {
          width: 36.9%;
          position: absolute;
          top: 12.3%;
          left: 32.9%;
          opacity: 0; }
        .wrapper_pc .contents .left_side p.i02 {
          width: 65.9%;
          position: absolute;
          top: 31.6%;
          left: 14.3%;
          opacity: 0; }
        .wrapper_pc .contents .left_side p.i03 {
          width: 54.9%;
          position: absolute;
          top: 83.6%;
          left: 22.5%;
          opacity: 0; }
      .wrapper_pc .contents .left_side ul.sns {
        list-style-type: none;
        padding: 0;
        margin: 0;
        width: 36%;
        position: absolute;
        top: 5.5%;
        right: 20%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between; }
        .wrapper_pc .contents .left_side ul.sns li {
          width: 32%; }
    .wrapper_pc .contents .right_side .swiper-wrapper .swiper-slide p {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      margin: 0;
      opacity: 0; }
      .wrapper_pc .contents .right_side .swiper-wrapper .swiper-slide p.bg {
        opacity: 1; }
        .wrapper_pc .contents .right_side .swiper-wrapper .swiper-slide p.bg img {
          width: 100%;
          height: auto; }
      .wrapper_pc .contents .right_side .swiper-wrapper .swiper-slide p img {
        width: 100%; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page2 p.i01 {
      width: 66.7%;
      position: absolute;
      top: 69.2%;
      left: 16.7%;
      opacity: 0; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page3 p.i01 {
      width: 17.8%;
      position: absolute;
      top: 41.4%;
      left: 43.5%;
      opacity: 0; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page3 p.i02 {
      width: 53.3%;
      position: absolute;
      top: 78.8%;
      left: 22.5%;
      opacity: 0; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page4 p.i01 {
      width: 51.7%;
      position: absolute;
      top: 80.0%;
      left: 24.3%;
      opacity: 0; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page5 p.i01 {
      width: 65.3%;
      position: absolute;
      top: 54.4%;
      left: 16.7%;
      opacity: 0; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page6 p.i01 {
      width: 65.3%;
      position: absolute;
      top: 55.5%;
      left: 16.7%;
      opacity: 0; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page7 section.quiz p.i01 {
      width: 51.7%;
      position: absolute;
      top: 34.8%;
      left: 24.3%;
      opacity: 1; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page7 section.quiz p.i02 {
      width: 23.6%;
      position: absolute;
      top: 40.0%;
      left: 47.1%; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page7 section.quiz ul {
      padding: 0;
      margin: 0;
      list-style-type: none;
      width: 41.7%;
      position: absolute;
      top: 70.0%;
      left: 29.2%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap; }
      .wrapper_pc .contents .right_side .swiper-wrapper .page7 section.quiz ul li {
        width: 47.5%;
        cursor: pointer; }
        .wrapper_pc .contents .right_side .swiper-wrapper .page7 section.quiz ul li img {
          width: 100%; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page7 section.green p.i01, .wrapper_pc .contents .right_side .swiper-wrapper .page7 section.orange p.i01 {
      width: 51.7%;
      position: absolute;
      top: 34.8%;
      left: 24.3%;
      cursor: pointer;
      opacity: 1; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page7 section.green p.fault {
      width: 24.2%;
      position: absolute;
      top: 39.0%;
      left: 37.6%;
      opacity: 1; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page7 section.orange p.true {
      width: 24.0%;
      position: absolute;
      top: 39.0%;
      left: 39.8%;
      opacity: 1; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page7 section.visible {
      display: block; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page7 section.unvisible {
      display: none; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page8 p.i01 {
      width: 55.6%;
      position: absolute;
      top: 78.3%;
      left: 20.3%;
      opacity: 0; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page9 p.i01, .wrapper_pc .contents .right_side .swiper-wrapper .page11 p.i01 {
      width: 19.4%;
      position: absolute;
      top: 18.5%;
      left: 40.4%;
      opacity: 0; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page10 p.i01 {
      width: 58.4%;
      position: absolute;
      top: 77.8%;
      left: 17.4%;
      opacity: 0; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page12 p.i01 {
      width: 28.3%;
      position: absolute;
      top: 44.3%;
      left: 36.2%;
      opacity: 0; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page12 p.B02 {
      width: 31.1%;
      position: absolute;
      top: 63.4%;
      left: 34.8%;
      opacity: 0; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page12 p.i02 {
      width: 35.6%;
      position: absolute;
      top: 69.1%;
      left: 32.4%;
      opacity: 0; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page12 p.logo {
      width: 29.7%;
      position: absolute;
      top: 81.3%;
      left: 35.7%;
      opacity: 1; }
    .wrapper_pc .contents .right_side .swiper-wrapper .page12 ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      position: absolute;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap; }
      .wrapper_pc .contents .right_side .swiper-wrapper .page12 ul.B01 {
        width: 51.4%;
        top: 50.1%;
        left: 24.3%;
        opacity: 0; }
        .wrapper_pc .contents .right_side .swiper-wrapper .page12 ul.B01 li {
          width: 31.1%; }
      .wrapper_pc .contents .right_side .swiper-wrapper .page12 ul.sns {
        width: 46.4%;
        top: 74.6%;
        left: 27.4%;
        opacity: 0; }
        .wrapper_pc .contents .right_side .swiper-wrapper .page12 ul.sns li {
          width: 32%; }

.wrapper_sp {
  display: none; }

@media (max-width: 639px) {
  body {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    body .wrapper_pc {
      display: none; }
    body .wrapper_sp {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      body .wrapper_sp .contents {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
        body .wrapper_sp .contents .swiper-wrapper {
          padding-bottom: 0; }
          body .wrapper_sp .contents .swiper-wrapper .swiper-slide {
            -webkit-box-sizing: border-box;
            box-sizing: border-box; }
            body .wrapper_sp .contents .swiper-wrapper .swiper-slide p {
              width: 95%;
              margin-left: 2.5%; }
              body .wrapper_sp .contents .swiper-wrapper .swiper-slide p img {
                width: 100%; }
          body .wrapper_sp .contents .swiper-wrapper .page1 ul.sns {
            list-style-type: none;
            padding: 0;
            margin: 0;
            width: 47.5%;
            position: absolute;
            top: 5.5%;
            left: 45%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between; }
            body .wrapper_sp .contents .swiper-wrapper .page1 ul.sns li {
              width: 32%;
              height: auto; }
              body .wrapper_sp .contents .swiper-wrapper .page1 ul.sns li img {
                width: 100%; }
          body .wrapper_sp .contents .swiper-wrapper .page1 p.logo {
            width: 24.415%;
            position: absolute;
            top: 3.8%;
            left: 5.51%; }
          body .wrapper_sp .contents .swiper-wrapper .page1 p.i01 {
            width: 52.535%;
            position: absolute;
            top: 11.3%;
            left: 21.85%;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page1 p.i02 {
            width: 90.345%;
            position: absolute;
            top: 29.8%;
            left: 0;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page1 p.i03 {
            width: 78.185%;
            position: absolute;
            top: 81.2%;
            left: 7.79%;
            opacity: 0; }
            body .wrapper_sp .contents .swiper-wrapper .page1 p.i04 {
              width: 28.5%;
              position: absolute;
              top: 40%;
              left: 33.25%;
              opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page2 p.i01 {
            width: 95%;
            position: absolute;
            top: 67.7%;
            left: 0;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page3 p.i01 {
            width: 25.46%;
            position: absolute;
            top: 39.9%;
            left: 38.285%;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page3 p.i02 {
            width: 76%;
            position: absolute;
            top: 76.8%;
            left: 8.36%;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page4 p.i01 {
            width: 73.72%;
            position: absolute;
            top: 77.4%;
            left: 10.925%;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page5 p.i01 {
            width: 93.1%;
            position: absolute;
            top: 52.9%;
            left: 0;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page6 p.i01 {
            width: 93.1%;
            position: absolute;
            top: 53.7%;
            left: 0;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page7 section.quiz p.i01 {
            width: 73.625%;
            position: absolute;
            top: 32.8%;
            left: 10.925%;
            opacity: 1; }
          body .wrapper_sp .contents .swiper-wrapper .page7 section.quiz p.i02 {
            width: 33.63%;
            position: absolute;
            top: 38.5%;
            left: 43.415%; }
          body .wrapper_sp .contents .swiper-wrapper .page7 section.quiz ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
            width: 59.375%;
            position: absolute;
            top: 70.0%;
            left: 21.3%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap; }
            body .wrapper_sp .contents .swiper-wrapper .page7 section.quiz ul li {
              width: 47.5%;
              cursor: pointer; }
              body .wrapper_sp .contents .swiper-wrapper .page7 section.quiz ul li img {
                width: 100%; }
          body .wrapper_sp .contents .swiper-wrapper .page7 section.green p.i01, body .wrapper_sp .contents .swiper-wrapper .page7 section.orange p.i01 {
            width: 73.625%;
            position: absolute;
            top: 32.8%;
            left: 10.925%;
            cursor: pointer;
            opacity: 1; }
          body .wrapper_sp .contents .swiper-wrapper .page7 section.green p.fault {
            width: 34.485%;
            position: absolute;
            top: 37.5%;
            left: 29.925%;
            opacity: 1; }
          body .wrapper_sp .contents .swiper-wrapper .page7 section.orange p.true {
            width: 34.105%;
            position: absolute;
            top: 37.5%;
            left: 32.965%;
            opacity: 1; }
          body .wrapper_sp .contents .swiper-wrapper .page7 section.visible {
            display: block; }
          body .wrapper_sp .contents .swiper-wrapper .page7 section.unvisible {
            display: none; }
          body .wrapper_sp .contents .swiper-wrapper .page8 p.i01 {
            width: 79.23%;
            position: absolute;
            top: 76.0%;
            left: 5.13%;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page9 p.i01, body .wrapper_sp .contents .swiper-wrapper .page11 p.i01 {
            width: 27.74%;
            position: absolute;
            top: 17.1%;
            left: 33.82%;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page10 p.i01 {
            width: 83.22%;
            position: absolute;
            top: 76.0%;
            left: 1.045%;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page12 p.i01 {
            width: 40.28%;
            position: absolute;
            top: 42.4%;
            left: 27.93%;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page12 p.B02 {
            width: 44.365%;
            position: absolute;
            top: 61.7%;
            left: 25.84%;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page12 p.i02 {
            width: 50.635%;
            position: absolute;
            top: 66.2%;
            left: 22.42%;
            opacity: 0; }
          body .wrapper_sp .contents .swiper-wrapper .page12 p.logo {
            width: 42.275%;
            position: absolute;
            top: 78.3%;
            left: 27.075%;
            opacity: 1; }
          body .wrapper_sp .contents .swiper-wrapper .page12 ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            position: absolute;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap; }
            body .wrapper_sp .contents .swiper-wrapper .page12 ul.B01 {
              width: 73.245%;
              top: 49.2%;
              left: 13.5%;
              opacity: 0; }
              body .wrapper_sp .contents .swiper-wrapper .page12 ul.B01 li {
                width: 31.1%; }
                body .wrapper_sp .contents .swiper-wrapper .page12 ul.B01 li img {
                  width: 100%; }
            body .wrapper_sp .contents .swiper-wrapper .page12 ul.sns {
              width: 66.12%;
              top: 73.0%;
              left: 16.14%;
              opacity: 0; }
              body .wrapper_sp .contents .swiper-wrapper .page12 ul.sns li {
                width: 32%; }
                body .wrapper_sp .contents .swiper-wrapper .page12 ul.sns li img {
                  width: 100%; } }

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  display: none !important; }