@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: inline-block; }

/* Hides from IE Mac */
* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

/* ---------- 初期 ---------- */
body {
  letter-spacing: 0;
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; }

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  line-height: 0;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none; }

a {
  text-decoration: none; }

strong {
  font-weight: bold; }

/* ---------- /共通部分 ---------- */
#jougetyuou {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto; }

#kadomaru {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px; }

#resbtn {
  -webkit-appearance: none; }

.ancr {
  position: relative;
  transition: 0.5s; }

.anca {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
  cursor: pointer; }

.ancr:hover {
  opacity: 0.75;
  transition: 0.5s;
  cursor: pointer; }

/* ---------- /参考タグ部分 ---------- */
@keyframes rerotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
@media screen and (max-width: 990px) {
  .pconly {
    display: none !important; }

  html {
    font-size: calc(1vw * 100 / 390); }

  main {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #fff;
    /*&::after {
    	position: absolute;
    	content: "";
    	position: fixed;
    	inset: 0;
    	mix-blend-mode: overlay;
    	pointer-events: none;
    	z-index: 9999;
    	background: url("../img/bg.webp")repeat;
    	background-size: 100% auto;
    }*/ }

  #sp_head {
    padding: 17rem 0 10rem;
    position: relative;
    z-index: 3;
    background: #fff;
    border-bottom: solid 1rem #cccccc; }
    #sp_head a {
      display: block; }
    #sp_head img {
      width: 50rem;
      margin: 0 auto;
      display: block; }

  #mv {
    position: relative;
    z-index: 2;
    padding: 36rem 0 0; }
    #mv h1 {
      width: 283rem;
      margin: 0 auto 432rem;
      position: relative;
      z-index: 2; }
    #mv .mv_box {
      width: 100%;
      padding: 40px 0 195rem;
      color: #2f2725;
      background: #fcc80e;
      position: relative;
      z-index: 4; }
      #mv .mv_box .mv_box_ttl {
        font-size: 29px;
        line-height: 1.482em;
        font-weight: 900;
        text-align: center; }
      #mv .mv_box .mv_box_txt {
        font-size: 15rem;
        line-height: 2.2em;
        font-weight: bold;
        text-align: center;
        margin: 30rem 0 60rem; }
      #mv .mv_box .mv_box_btn {
        width: 334rem;
        margin: 0 auto; }
        #mv .mv_box .mv_box_btn a {
          display: flex;
          justify-content: center;
          flex-direction: column;
          width: 100%;
          height: 98rem;
          box-sizing: border-box;
          font-size: 20rem;
          letter-spacing: 0.05em;
          line-height: 1.4325em;
          font-weight: 900;
          color: #fff;
          padding-left: 63rem;
          background: url("../img/mv_btn.png") no-repeat center;
          background-size: contain; }
          #mv .mv_box .mv_box_btn a div {
            width: 195rem;
            text-align: center; }
    #mv .mv_img {
      width: 864rem;
      position: absolute;
      top: 265rem;
      top: 580rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3; }
      #mv .mv_img .circle {
        animation: rerotate 160s linear infinite;
        position: relative; }
        #mv .mv_img .circle::before {
          position: absolute;
          content: "";
          width: 1333rem;
          height: 1425rem;
          top: -325rem;
          left: -233rem;
          background: url("../img/mv_circle_chara_03.png") no-repeat center;
          background-size: contain;
          z-index: 2; }
    #mv .mv_cloud {
      width: 472rem;
      position: absolute;
      left: -57rem;
      top: 23rem;
      z-index: 1; }

  /*ポンと飛び出てくるようなフェードイン*/
  .js-fadein {
    opacity: 0;
    scale: .9;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transition: opacity 0.7s 0.2s ease, scale 0.7s 0.2s cubic-bezier(0.44, 0.42, 0.24, 1.55);
    transition: opacity 0.7s 0.2s ease, scale 0.7s 0.2s cubic-bezier(0.44, 0.42, 0.24, 1.55); }
    .js-fadein.is-show {
      opacity: 1;
      scale: 1; }

  /*ひょこっと出てくるアニメーション*/
  .js-pop {
    opacity: 0;
    transition: 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform: translateY(100%); }
    .js-pop.is-show {
      transform: translateY(0) !important;
      opacity: 1; }

  #service {
    position: relative;
    z-index: 3; }
    #service::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 230rem;
      left: 0;
      top: -65rem;
      background: url("../img/service_bg.png") no-repeat;
      background-size: 100% auto;
      z-index: 3; }
    #service .bg {
      position: relative;
      z-index: 4;
      padding: 25rem 0 138rem;
      background: #fff; }
      #service .bg h2 {
        width: 332rem;
        margin: 0 auto; }
      #service .bg .service_txt {
        width: 330rem;
        margin: 15rem auto 25rem;
        font-size: 15rem;
        letter-spacing: 0.05em;
        line-height: 1.666em;
        font-weight: 600;
        color: #2f2725; }
      #service .bg .service_boxes {
        width: 344rem;
        margin: 0 auto 30rem; }
        #service .bg .service_boxes .service_box {
          width: 100%;
          height: 446rem;
          position: relative;
          box-sizing: border-box;
          padding-top: 275rem;
          color: #fff; }
          #service .bg .service_boxes .service_box:nth-child(n+2) {
            margin-top: 18rem; }
          #service .bg .service_boxes .service_box h3 {
            width: 266rem;
            margin: 0 auto 15rem;
            font-size: 26.67rem;
            line-height: 1.058em;
            font-weight: 900;
            position: relative;
            z-index: 3; }
            #service .bg .service_boxes .service_box h3 span {
              font-size: 11.2rem;
              vertical-align: super; }
          #service .bg .service_boxes .service_box .service_box_txt {
            width: 265rem;
            margin: 0 auto;
            font-size: 14rem;
            letter-spacing: 0.1em;
            font-feature-settings: "palt";
            line-height: 1.64em;
            font-weight: 500;
            position: relative;
            z-index: 3; }
          #service .bg .service_boxes .service_box .service_box_img {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0; }
      #service .bg .causion {
        width: 335rem;
        margin: 0 auto;
        font-size: 12rem;
        letter-spacing: 0.025em;
        line-height: 1.75em;
        color: #2f2725;
        font-feature-settings: "palt"; }
    #service .chara_img {
      width: 200rem;
      height: 135rem;
      position: absolute;
      top: -163rem;
      left: 111rem; }
      #service .chara_img .chara {
        width: 180rem;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2; }
      #service .chara_img .parts {
        width: 34rem;
        position: absolute;
        bottom: 10rem;
        left: 0;
        z-index: 4; }

  #learn {
    width: 100%;
    position: relative;
    z-index: 4; }
    #learn::before {
      position: absolute;
      content: "";
      width: 393rem;
      height: 327rem;
      left: -1rem;
      top: -72rem;
      background: url("../img/learn_bg_01.png") no-repeat;
      background-size: 100% auto;
      z-index: 4; }
    #learn::after {
      position: absolute;
      content: "";
      width: 497rem;
      height: 193rem;
      left: 50%;
      bottom: -33rem;
      transform: translateX(-50%);
      background: url("../img/learn_bg_02.png") no-repeat;
      background-size: 100% 100%;
      z-index: 5; }
    #learn .bg {
      padding: 0 0 70rem;
      position: relative;
      z-index: 6;
      background: #fcc80e; }
      #learn .bg h2 {
        font-size: 38rem;
        letter-spacing: 0.1em;
        line-height: 1.71em;
        font-weight: 900;
        color: #fff;
        text-align: center;
        font-feature-settings: "palt";
        margin-bottom: 10rem; }
        #learn .bg h2 .line {
          display: inline-block;
          background: url("../img/learn_ttl_line.png") repeat-x left top 95%;
          background-size: 100% 3px; }
      #learn .bg .causion {
        width: 280rem;
        margin: 0 auto 30rem;
        font-size: 12rem;
        line-height: 1.75em;
        color: #fff; }
      #learn .bg .learn_cont {
        position: relative;
        margin: 0 auto; }
        #learn .bg .learn_cont .cont_bg {
          box-sizing: border-box;
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% 100%;
          position: relative; }
          #learn .bg .learn_cont .cont_bg h3 {
            font-size: 26rem;
            line-height: 1.3em;
            font-weight: 800;
            color: #ec6622;
            text-align: center;
            margin-bottom: 15rem; }
          #learn .bg .learn_cont .cont_bg .learn_box_txt {
            font-size: 13rem;
            letter-spacing: 0.05em;
            line-height: 1.615em;
            font-weight: 500;
            color: #2f2725;
            margin-top: 20rem; }
        #learn .bg .learn_cont.cont01 {
          width: 345rem;
          margin-bottom: 60rem; }
          #learn .bg .learn_cont.cont01 .cont_bg {
            width: 100%;
            height: 541rem;
            background-image: url("../img/learn_cont_bg_01.png");
            padding-top: 45rem;
            position: relative;
            z-index: 5; }
            #learn .bg .learn_cont.cont01 .cont_bg .learn_box {
              width: 221rem;
              margin: 0 auto; }
          #learn .bg .learn_cont.cont01 .chara_img_03 {
            width: 93rem;
            height: 99rem;
            position: absolute;
            top: -25rem;
            right: 7rem; }
            #learn .bg .learn_cont.cont01 .chara_img_03 .chara {
              width: 93rem;
              position: absolute;
              top: 0;
              right: 0;
              z-index: 2; }
            #learn .bg .learn_cont.cont01 .chara_img_03 .parts {
              width: 16rem;
              position: absolute;
              bottom: 0;
              right: 8rem;
              z-index: 5;
              transform: rotate(-37deg); }
        #learn .bg .learn_cont.cont02 {
          width: 352rem;
          z-index: 8; }
          #learn .bg .learn_cont.cont02 .cont_bg {
            width: 100%;
            height: 812rem;
            background-image: url("../img/learn_cont_bg_02.png");
            padding-top: 60rem;
            position: relative;
            z-index: 5; }
            #learn .bg .learn_cont.cont02 .cont_bg .learn_box {
              width: 221rem;
              margin: 0 auto; }
              #learn .bg .learn_cont.cont02 .cont_bg .learn_box.box02 {
                width: 267rem;
                height: 370rem;
                margin-top: 30rem;
                box-sizing: border-box;
                padding: 42rem 42rem 0;
                background: url("../img/learn_box_bg.png") no-repeat;
                background-size: 100% 100%;
                position: relative; }
                #learn .bg .learn_cont.cont02 .cont_bg .learn_box.box02 .learn_box_ttl {
                  width: 174rem;
                  position: absolute;
                  top: 5px;
                  left: 5px; }
                #learn .bg .learn_cont.cont02 .cont_bg .learn_box.box02 h4 {
                  font-size: 17rem;
                  line-height: 1.41em;
                  font-weight: 800;
                  color: #ec6622;
                  margin-top: 15rem; }
                #learn .bg .learn_cont.cont02 .cont_bg .learn_box.box02 .learn_box_txt {
                  font-size: 13rem;
                  margin-top: 10rem; }
          #learn .bg .learn_cont.cont02 .chara_img_04 {
            width: 100rem;
            height: 93rem;
            position: absolute;
            top: -47rem;
            left: 22rem; }
            #learn .bg .learn_cont.cont02 .chara_img_04 .chara {
              width: 96rem;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2; }
            #learn .bg .learn_cont.cont02 .chara_img_04 .parts {
              width: 13rem;
              position: absolute;
              bottom: 28rem;
              right: 0;
              z-index: 5;
              transform: rotate(-96deg); }
      #learn .bg .dog {
        width: 81rem;
        position: absolute;
        bottom: -32rem;
        right: 30rem;
        z-index: 7; }
    #learn .chara_img_02 {
      width: 130rem;
      height: 79rem;
      position: absolute;
      top: -102rem;
      left: 22rem; }
      #learn .chara_img_02 .chara {
        width: 127rem;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2; }
      #learn .chara_img_02 .parts {
        width: 23rem;
        position: absolute;
        bottom: 6rem;
        left: 0;
        z-index: 4; }

  #set {
    padding: 90rem 0 200rem;
    padding: 90rem 0 30rem;
    position: relative;
    overflow: hidden; }
    #set::after {
      position: absolute;
      content: "";
      width: 482rem;
      height: 295rem;
      bottom: -209rem;
      left: 50%;
      transform: translateX(-50%);
      background: url("../img/set_bg.png") no-repeat center top;
      background-size: 100% auto;
      z-index: 3; }
    #set .set_subttl {
      font-size: 21rem;
      letter-spacing: 0.06em;
      line-height: 1.62em;
      font-weight: 600;
      color: #214475;
      text-align: center; }
    #set h2 {
      width: 330rem;
      margin: 25rem auto; }
    #set .set_txt {
      width: 320rem;
      margin: 0 auto 30rem;
      font-size: 14rem;
      letter-spacing: 0.1em;
      line-height: 1.71em;
      font-weight: 500;
      color: #2f2725;
      font-feature-settings: "palt"; }
    #set .set_img {
      width: 100%;
      position: relative; }
      #set .set_img .img01 {
        width: 220rem;
        margin-left: 63rem; }
      #set .set_img .img02 {
        width: 136rem;
        position: absolute;
        bottom: -36rem;
        right: 56rem; }
        #set .set_img .img02.anim-right {
          transform: translateX(100%);
          opacity: 0;
          transition: 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
          #set .set_img .img02.anim-right.is-show {
            transform: translateX(0);
            opacity: 1; }
    #set .set_btn {
      width: 334rem;
      margin: 84rem auto 170rem; }
      #set .set_btn a {
        display: block;
        width: 100%;
        height: 98rem;
        font-size: 20rem;
        letter-spacing: 0.1em;
        line-height: 1;
        color: #fff;
        font-weight: 800;
        box-sizing: border-box;
        padding: 40rem 0 0 75rem;
        background: url("../img/set_btn_bg.png") no-repeat;
        background-size: contain; }
    #set .copyright {
      font-size: 8rem;
      font-weight: 500;
      color: #fff;
      text-align: center;
      position: relative;
      z-index: 5; }
    #set .chara_img_05 {
      width: 105rem;
      height: 84rem;
      position: absolute;
      bottom: 36rem;
      left: 27rem; }
      #set .chara_img_05 .chara {
        width: 87rem;
        position: absolute;
        top: 0;
        left: 9rem;
        z-index: 2; }
      #set .chara_img_05 .parts {
        width: 105rem;
        position: absolute;
        top: 39rem;
        left: 0;
        z-index: 4; }
    #set .chara_img_06 {
      width: 89rem;
      height: 67rem;
      position: absolute;
      bottom: 48rem;
      left: 147rem; }
      #set .chara_img_06 .chara {
        width: 71rem;
        position: absolute;
        top: 0;
        left: 9px;
        z-index: 2; }
      #set .chara_img_06 .parts {
        width: 89rem;
        position: absolute;
        top: 27rem;
        left: 0;
        z-index: 4; }
    #set .chara_img_07 {
      width: 98rem;
      height: 85rem;
      position: absolute;
      bottom: 40rem;
      right: 34rem; }
      #set .chara_img_07 .chara {
        width: 82rem;
        position: absolute;
        top: 0;
        left: 8rem;
        z-index: 2; }
      #set .chara_img_07 .parts {
        width: 99rem;
        position: absolute;
        top: 46rem;
        left: 0;
        z-index: 4; } }
@keyframes cloudFloat {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(20px); }
  100% {
    transform: translateY(0); } }
@media screen and (min-width: 991px) {
  html {
    overscroll-behavior-y: none; }

  body {
    height: 100%;
    position: relative; }

  .cloud_area {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 3;
    pointer-events: none; }
    .cloud_area .cloud {
      position: absolute;
      z-index: 3;
      animation: cloudFloat 8s ease-in-out 0s infinite alternate-reverse; }
      .cloud_area .cloud.cloud01 {
        width: 114px;
        width: 5.93vw;
        top: 2.55vw;
        top: calc(100vh * 50 / 1080);
        left: 16.875vw;
        animation-delay: .2s; }
      .cloud_area .cloud.cloud02 {
        width: 165px;
        width: 8.59vw;
        top: 15.26vw;
        top: calc(100vh * 293 / 1080);
        left: 1.71vw;
        animation-delay: .4s; }
      .cloud_area .cloud.cloud03 {
        width: 112px;
        width: 5.83vw;
        top: 9.322vw;
        top: calc(100vh * 179 / 1080);
        left: 52.34vw;
        animation-delay: .6s; }
      .cloud_area .cloud.cloud04 {
        width: 158px;
        width: 8.23vw;
        top: 7.03vw;
        top: calc(100vh * 135 / 1080);
        right: -1.822vw;
        animation-delay: .8s; }
      .cloud_area .cloud.cloud05 {
        width: 158px;
        width: 8.23vw;
        top: 36.56vw;
        top: calc(100vh * 701 / 1080);
        left: 9.375vw;
        animation-delay: 1s; }
      .cloud_area .cloud.cloud06 {
        width: 224px;
        width: 11.66vw;
        top: 26.56vw;
        top: calc(100vh * 513 / 1080);
        left: 44.48vw;
        animation-delay: 1.2s; }
      .cloud_area .cloud.cloud07 {
        width: 123px;
        width: 6.4vw;
        top: 23.22vw;
        top: calc(100vh * 444 / 1080);
        right: 7.29vw;
        animation-delay: 1.4s; }
      .cloud_area .cloud.cloud08 {
        width: 88px;
        width: 4.58vw;
        top: 23.22vw;
        top: calc(100vh * 757 / 1080);
        right: 1.56vw;
        animation-delay: 1.4s; }

  #pcarea {
    display: flex;
    justify-content: flex-end;
    background: #fcc80e;
    position: relative;
    position: fixed; }
    #pcarea .pcarea_left {
      position: fixed;
      left: 0;
      top: 0;
      height: 100vh;
      width: calc(100% - 717px);
      justify-content: center;
      display: flex;
      box-sizing: border-box;
      z-index: 3; }
    #pcarea .pcarea_right {
      width: 37.343%;
      min-width: 480px;
      position: relative; }
      #pcarea .pcarea_right main {
        width: 480px; }

  #pcarea {
    display: flex;
    justify-content: flex-end;
    background: #fcc80e;
    position: relative;
    /*&::after {
    	position: fixed;
    	content: "";
    	inset: 0;
    	mix-blend-mode: overlay;
    	pointer-events: none;
    	z-index: 10;
    	background: url("../img/bg_pc.webp")repeat;
    }*/ }
    #pcarea .pcarea_left {
      position: fixed;
      left: 0;
      top: 0;
      height: 100vh;
      width: calc(100% - 717px);
      width: calc(100% - max(37.343%, 480px));
      justify-content: center;
      display: flex;
      box-sizing: border-box;
      z-index: 3; }
      #pcarea .pcarea_left::before {
        position: absolute;
        content: "";
        width: 2550px;
        width: 132.8125vw;
        /*height: 214px;
        height: 11.14vw;*/
        height: 350px;
        height: 18.229vw;
        bottom: -150px;
        bottom: -7.81vw;
        left: -120px;
        left: -6.25vw;
        background: url("../img/pcarea_btm_bg_02.png") no-repeat center top;
        background-size: 100% auto;
        z-index: 3; }
      #pcarea .pcarea_left .pc_left_logo {
        width: 94px;
        width: 4.89vw;
        position: absolute;
        top: 2.81vw;
        left: 2.55vw; }
        #pcarea .pcarea_left .pc_left_logo a {
          display: block;
          width: 100%; }
      #pcarea .pcarea_left .pcarea_left_inner {
        width: 50%;
        max-width: 416px;
        justify-content: center;
        display: flex;
        align-items: center;
        height: 85vh; }
        #pcarea .pcarea_left .pcarea_left_inner .pc_left_box {
          width: 100%;
          max-width: min(100%, 35vh); }
        #pcarea .pcarea_left .pcarea_left_inner .pcarea_left_ttl {
          position: relative;
          width: 100%;
          margin-bottom: 38px; }
        #pcarea .pcarea_left .pcarea_left_inner .pcarea_left_menu_list {
          width: 246px;
          width: 59.136%;
          max-width: 100%;
          margin: 0 auto; }
          #pcarea .pcarea_left .pcarea_left_inner .pcarea_left_menu_list .pcarea_left_menu_list_ttl {
            width: 165px;
            max-width: 100%;
            margin: 0 auto 25px; }
          #pcarea .pcarea_left .pcarea_left_inner .pcarea_left_menu_list .pcarea_left_menu_list_link {
            width: 299px;
            max-width: 100%;
            margin-top: 20px; }
            #pcarea .pcarea_left .pcarea_left_inner .pcarea_left_menu_list .pcarea_left_menu_list_link a {
              display: block;
              width: 100%; }
      #pcarea .pcarea_left .pc_left_img {
        width: 89.443%;
        position: absolute;
        bottom: 51px;
        bottom: 2.44vw;
        left: 50%;
        transform: translateX(-50%); }
    #pcarea .pcarea_right {
      width: 717px;
      width: max(37.343%, 480px);
      position: relative; } }
@media screen and (min-width: 991px) and (max-width: 1285px) {
  #pcarea .pcarea_left {
    width: calc(100% - 480px); }
    #pcarea .pcarea_left::before {
      position: absolute;
      content: "";
      width: 198.44%;
      height: 18.229vw;
      bottom: -7.81vw;
      left: -9.33%;
      background: url("../img/pcarea_btm_bg_02.png") no-repeat center top;
      background-size: 100% auto;
      z-index: 3; }
  #pcarea .pcarea_right {
    width: 480px; } }
@media screen and (min-width: 991px) {
  body {
    position: relative; }

  main {
    width: 480px;
    overflow-x: hidden;
    background: #fff;
    position: relative;
    z-index: 5; }

  #sp_head {
    display: none; }

  #mv {
    position: relative;
    z-index: 2;
    padding: 44px 0 0; }
    #mv h1 {
      width: 348px;
      margin: 0 auto 531px;
      position: relative;
      z-index: 2; }
    #mv .mv_box {
      width: 100%;
      padding: 49px 0 240px;
      color: #2f2725;
      background: #fcc80e;
      position: relative;
      z-index: 3; }
      #mv .mv_box .mv_box_ttl {
        font-size: 35px;
        line-height: 1.482em;
        font-weight: 900;
        text-align: center; }
      #mv .mv_box .mv_box_txt {
        font-size: 18px;
        line-height: 2.2em;
        font-weight: bold;
        text-align: center;
        margin: 37px 0 74px; }
      #mv .mv_box .mv_box_btn {
        width: 411px;
        margin: 0 auto; }
        #mv .mv_box .mv_box_btn a {
          display: flex;
          justify-content: center;
          flex-direction: column;
          width: 100%;
          height: 120px;
          box-sizing: border-box;
          font-size: 24.6px;
          letter-spacing: 0.05em;
          line-height: 1.4325em;
          font-weight: 900;
          color: #fff;
          padding-left: 77px;
          background: url("../img/mv_btn.png") no-repeat center;
          background-size: contain;
          transition: 0.4s; }
          #mv .mv_box .mv_box_btn a:hover {
            transform: rotate(-4deg); }
          #mv .mv_box .mv_box_btn a div {
            width: 240px;
            text-align: center; }
    #mv .mv_img {
      width: 1062.7px;
      position: absolute;
      top: 713px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2; }
      #mv .mv_img .circle {
        animation: rerotate 160s linear infinite;
        position: relative; }
        #mv .mv_img .circle::before {
          position: absolute;
          content: "";
          width: 1638px;
          height: 1752px;
          top: -400px;
          left: -287px;
          background: url("../img/mv_circle_chara_03.png") no-repeat center;
          background-size: contain;
          z-index: 2; }
    #mv .mv_cloud {
      width: 580px;
      position: absolute;
      left: -70px;
      top: 28px;
      z-index: 1; }

  /*ポンと飛び出てくるようなフェードイン*/
  .js-fadein {
    opacity: 0;
    scale: .9;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transition: opacity 0.7s 0.2s ease, scale 0.7s 0.2s cubic-bezier(0.44, 0.42, 0.24, 1.55);
    transition: opacity 0.7s 0.2s ease, scale 0.7s 0.2s cubic-bezier(0.44, 0.42, 0.24, 1.55); }
    .js-fadein.is-show {
      opacity: 1;
      scale: 1; }

  /*ひょこっと出てくるアニメーション*/
  .js-pop {
    opacity: 0;
    transition: 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform: translateY(100%); }
    .js-pop.is-show {
      transform: translateY(0) !important;
      opacity: 1; }

  #service {
    position: relative;
    z-index: 3; }
    #service::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 283px;
      left: 0;
      top: -80px;
      background: url("../img/service_bg.png") no-repeat;
      background-size: 100% auto;
      z-index: 3; }
    #service .bg {
      position: relative;
      z-index: 4;
      padding: 31px 0 170px;
      background: #fff; }
      #service .bg h2 {
        width: 408px;
        margin: 0 auto; }
      #service .bg .service_txt {
        width: 330px;
        margin: 15px auto 25px;
        font-size: 15px;
        letter-spacing: 0.05em;
        line-height: 1.666em;
        font-weight: 600;
        color: #2f2725; }
      #service .bg .service_boxes {
        width: 406px;
        margin: 0 auto 37px; }
        #service .bg .service_boxes .service_box {
          width: 100%;
          height: 548px;
          position: relative;
          box-sizing: border-box;
          padding-top: 325px;
          color: #fff; }
          #service .bg .service_boxes .service_box:nth-child(n+2) {
            margin-top: 22px; }
          #service .bg .service_boxes .service_box h3 {
            width: 330px;
            margin: 0 auto 10px;
            font-size: 33px;
            line-height: 1.058em;
            font-weight: 900;
            position: relative;
            z-index: 3; }
            #service .bg .service_boxes .service_box h3 span {
              font-size: 13px;
              vertical-align: super; }
          #service .bg .service_boxes .service_box .service_box_txt {
            width: 326px;
            margin: 0 auto;
            font-size: 17px;
            letter-spacing: 0.1em;
            font-feature-settings: "palt";
            line-height: 1.64em;
            font-weight: 500;
            position: relative;
            z-index: 3; }
          #service .bg .service_boxes .service_box .service_box_img {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0; }
      #service .bg .causion {
        width: 412px;
        margin: 0 auto;
        font-size: 14.7px;
        letter-spacing: 0.025em;
        line-height: 1.75em;
        color: #2f2725;
        font-feature-settings: "palt"; }
    #service .chara_img {
      width: 246px;
      height: 166px;
      position: absolute;
      top: -200px;
      left: 136px; }
      #service .chara_img .chara {
        width: 221px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2; }
      #service .chara_img .parts {
        width: 42px;
        position: absolute;
        bottom: 12px;
        left: 0;
        z-index: 4; }

  #learn {
    width: 100%;
    position: relative;
    z-index: 4; }
    #learn::before {
      position: absolute;
      content: "";
      width: 483px;
      height: 402px;
      left: -1.5px;
      top: -88px;
      background: url("../img/learn_bg_01.png") no-repeat;
      background-size: 100% auto;
      z-index: 4; }
    #learn::after {
      position: absolute;
      content: "";
      width: 611px;
      height: 237px;
      left: 50%;
      bottom: -40px;
      transform: translateX(-50%);
      background: url("../img/learn_bg_02.png") no-repeat;
      background-size: 100% 100%;
      z-index: 5; }
    #learn .bg {
      padding: 0 0 86px;
      position: relative;
      z-index: 6;
      background: #fcc80e; }
      #learn .bg h2 {
        font-size: 47px;
        letter-spacing: 0.1em;
        line-height: 1.71em;
        font-weight: 900;
        color: #fff;
        text-align: center;
        font-feature-settings: "palt";
        margin-bottom: 12px; }
        #learn .bg h2 .line {
          display: inline-block;
          background: url("../img/learn_ttl_line.png") repeat-x left top 95%;
          background-size: 100% 4px; }
      #learn .bg .causion {
        width: 344px;
        margin: 0 auto 37px;
        font-size: 15px;
        line-height: 1.75em;
        color: #fff; }
      #learn .bg .learn_cont {
        position: relative;
        margin: 0 auto; }
        #learn .bg .learn_cont .cont_bg {
          box-sizing: border-box;
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% 100%;
          position: relative; }
          #learn .bg .learn_cont .cont_bg h3 {
            font-size: 32px;
            line-height: 1.3em;
            font-weight: 800;
            color: #ec6622;
            text-align: center;
            margin-bottom: 18px; }
          #learn .bg .learn_cont .cont_bg .learn_box_txt {
            font-size: 16px;
            letter-spacing: 0.05em;
            line-height: 1.615em;
            font-weight: 500;
            color: #2f2725;
            margin-top: 25px; }
        #learn .bg .learn_cont.cont01 {
          width: 424px;
          margin-bottom: 74px; }
          #learn .bg .learn_cont.cont01 .cont_bg {
            width: 100%;
            height: 665px;
            background-image: url("../img/learn_cont_bg_01.png");
            padding-top: 55px;
            position: relative;
            z-index: 5; }
            #learn .bg .learn_cont.cont01 .cont_bg .learn_box {
              width: 272px;
              margin: 0 auto; }
          #learn .bg .learn_cont.cont01 .chara_img_03 {
            width: 114px;
            height: 122px;
            position: absolute;
            top: -30px;
            right: 8px; }
            #learn .bg .learn_cont.cont01 .chara_img_03 .chara {
              width: 114px;
              position: absolute;
              top: 0;
              right: 0;
              z-index: 2; }
            #learn .bg .learn_cont.cont01 .chara_img_03 .parts {
              width: 19px;
              position: absolute;
              bottom: 0;
              right: 10px;
              z-index: 5;
              transform: rotate(-37deg); }
        #learn .bg .learn_cont.cont02 {
          width: 433px;
          z-index: 8; }
          #learn .bg .learn_cont.cont02 .cont_bg {
            width: 100%;
            height: 999px;
            background-image: url("../img/learn_cont_bg_02.png");
            padding-top: 74px;
            position: relative;
            z-index: 5; }
            #learn .bg .learn_cont.cont02 .cont_bg .learn_box {
              width: 272px;
              margin: 0 auto; }
              #learn .bg .learn_cont.cont02 .cont_bg .learn_box.box02 {
                width: 328px;
                height: 455px;
                margin-top: 37px;
                box-sizing: border-box;
                padding: 51px 51px 0;
                background: url("../img/learn_box_bg.png") no-repeat;
                background-size: 100% 100%;
                position: relative; }
                #learn .bg .learn_cont.cont02 .cont_bg .learn_box.box02 .learn_box_ttl {
                  width: 214px;
                  position: absolute;
                  top: 6px;
                  left: 6px; }
                #learn .bg .learn_cont.cont02 .cont_bg .learn_box.box02 h4 {
                  font-size: 21px;
                  line-height: 1.41em;
                  font-weight: 800;
                  color: #ec6622;
                  margin-top: 18px; }
                #learn .bg .learn_cont.cont02 .cont_bg .learn_box.box02 .learn_box_txt {
                  font-size: 16px;
                  margin-top: 12px; }
          #learn .bg .learn_cont.cont02 .chara_img_04 {
            width: 133px;
            height: 114px;
            position: absolute;
            top: -58px;
            left: 27px; }
            #learn .bg .learn_cont.cont02 .chara_img_04 .chara {
              width: 118px;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2; }
            #learn .bg .learn_cont.cont02 .chara_img_04 .parts {
              width: 16px;
              position: absolute;
              bottom: 34px;
              right: 0;
              z-index: 5;
              transform: rotate(-96deg); }
      #learn .bg .dog {
        width: 99px;
        position: absolute;
        bottom: -38px;
        right: 37px;
        z-index: 7; }
    #learn .chara_img_02 {
      width: 160px;
      height: 97px;
      position: absolute;
      top: -125px;
      left: 27px; }
      #learn .chara_img_02 .chara {
        width: 156px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2; }
      #learn .chara_img_02 .parts {
        width: 28px;
        position: absolute;
        bottom: 7px;
        left: 0;
        z-index: 4; }

  #set {
    padding: 110px 0 246px;
    padding: 110px 0 37px;
    position: relative;
    overflow: hidden; }
    #set::after {
      position: absolute;
      content: "";
      width: 593px;
      height: 363px;
      bottom: -257px;
      left: 50%;
      transform: translateX(-50%);
      background: url("../img/set_bg.png") no-repeat center top;
      background-size: 100% auto;
      z-index: 3; }
    #set .set_subttl {
      font-size: 26px;
      letter-spacing: 0.06em;
      line-height: 1.62em;
      font-weight: 600;
      color: #214475;
      text-align: center; }
    #set h2 {
      width: 406px;
      margin: 30px auto; }
    #set .set_txt {
      width: 394px;
      margin: 0 auto 37px;
      font-size: 17px;
      letter-spacing: 0.1em;
      line-height: 1.71em;
      font-weight: 500;
      color: #2f2725;
      font-feature-settings: "palt"; }
    #set .set_img {
      width: 100%;
      position: relative; }
      #set .set_img .img01 {
        width: 270px;
        margin-left: 77px; }
      #set .set_img .img02 {
        width: 167px;
        position: absolute;
        bottom: -44px;
        right: 69px; }
        #set .set_img .img02.anim-right {
          transform: translateX(100%);
          opacity: 0;
          transition: 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
          #set .set_img .img02.anim-right.is-show {
            transform: translateX(0);
            opacity: 1; }
    #set .set_btn {
      width: 410px;
      margin: 103px auto 209px; }
      #set .set_btn a {
        display: block;
        width: 100%;
        height: 120px;
        font-size: 24px;
        letter-spacing: 0.1em;
        line-height: 1;
        color: #fff;
        font-weight: 800;
        box-sizing: border-box;
        padding: 49px 0 0 92px;
        background: url("../img/set_btn_bg.png") no-repeat;
        background-size: contain;
        transition: 0.4s; }
        #set .set_btn a:hover {
          transform: rotate(-4deg); }
    #set .copyright {
      font-size: 10px;
      font-weight: 500;
      color: #fff;
      text-align: center;
      position: relative;
      z-index: 5; }
    #set .chara_img_05 {
      width: 129px;
      height: 103px;
      position: absolute;
      bottom: 44px;
      left: 33px; }
      #set .chara_img_05 .chara {
        width: 107px;
        position: absolute;
        top: 0;
        left: 11px;
        z-index: 2; }
      #set .chara_img_05 .parts {
        width: 129px;
        position: absolute;
        top: 48px;
        left: 0;
        z-index: 4; }
    #set .chara_img_06 {
      width: 109px;
      height: 82px;
      position: absolute;
      bottom: 59px;
      left: 181px; }
      #set .chara_img_06 .chara {
        width: 87px;
        position: absolute;
        top: 0;
        left: 11px;
        z-index: 2; }
      #set .chara_img_06 .parts {
        width: 109px;
        position: absolute;
        top: 33px;
        left: 0;
        z-index: 4; }
    #set .chara_img_07 {
      width: 120px;
      height: 104px;
      position: absolute;
      bottom: 49px;
      right: 42px; }
      #set .chara_img_07 .chara {
        width: 100px;
        position: absolute;
        top: 0;
        left: 10px;
        z-index: 2; }
      #set .chara_img_07 .parts {
        width: 120px;
        position: absolute;
        top: 57px;
        left: 0;
        z-index: 4; } }

/*# sourceMappingURL=style02.css.map */