@charset "UTF-8";
/* a modern css reset
============================================ */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class],
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
  margin: 0;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px);
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* base
================================================ */
body {
  width: 100%;
  max-width: 100%;
  background: #fff;
  color: #333;
  overflow-x: hidden;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", " Meiryo", sans-serif;
}

* {
  position: relative;
}

a:hover {
  filter: brightness(1.2);
}

input[type=text],
input[type=email],
input[type=submit] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-family: inherit;
  font-size: 1em;
  padding: 0.4em 0.8em;
  width: 100%;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=submit]:focus {
  outline: none;
}

@media only screen and (max-width: 834px) {
  img,
picture {
    max-width: 100%;
  }
}
/* utility
============================================ */
/* text */
.t-left {
  text-align: left;
}

.t-right {
  text-align: right;
}

.t-center {
  text-align: center;
}

.ft-b {
  font-weight: bold;
}

.ft-n {
  font-weight: normal;
}

/* indent */
.indent {
  padding-left: 1em;
  text-indent: -1em;
}

.pc {
  display: block;
}

@media only screen and (max-width: 834px) {
  .pc {
    display: none;
  }
}
.pc-inline-block {
  display: inline-block;
}

@media only screen and (max-width: 834px) {
  .pc-inline-block {
    display: none;
  }
}
.pc-d-flex {
  display: flex;
}

@media only screen and (max-width: 834px) {
  .pc-d-flex {
    display: none;
  }
}
.sp {
  display: none;
}

@media only screen and (max-width: 834px) {
  .sp {
    display: block;
  }
}
.sp-d-inline-block {
  display: none;
}

@media only screen and (max-width: 834px) {
  .sp-d-inline-block {
    display: inline-block;
  }
}
.sp-d-flex {
  display: none;
}

@media only screen and (max-width: 834px) {
  .sp-d-flex {
    display: flex;
  }
}
.w100 {
  width: 100%;
}

/* component
================================================ */
.sec::before {
  display: block;
  content: "";
  width: 100%;
  height: 14px;
  transform: translateY(-50%);
  background: url(../image/line.png) repeat-x top center/auto 14px;
}

.sec-ttl {
  text-align: center;
  margin: -65px auto 0;
  width: 23.375%;
  min-width: 374px;
}

.sec-ttl img {
  width: 100%;
}

@media only screen and (max-width: 834px) {
  .sec-ttl {
    width: 70%;
    min-width: inherit;
    margin: -13% auto 0;
    min-width: auto;
  }
}
.js-show {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  visibility: hidden;
  opacity: 0;
  will-change: transform, opacity, visibility;
}

.js-show.is-show {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0) !important;
}

.js-show-short {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  visibility: hidden;
  opacity: 0;
  will-change: transform, opacity, visibility;
}

.js-show-short.is-show {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0) !important;
}

.js-show-mv {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  visibility: hidden;
  opacity: 0;
  will-change: transform, opacity, visibility;
}

.js-show-mv.is-show {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0) !important;
}

/* header / menu
================================================ */
nav {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 1;
}

nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 834px) {
  .btn-menu {
    position: fixed;
    top: 10px;
    right: 10px;
    align-items: center;
    justify-content: center;
    z-index: 99;
    width: 60px;
    height: 60px;
  }
  .btn-menu .close {
    display: none;
    width: 30px;
    height: 30px;
  }
  .btn-menu.is-open .open {
    display: none;
  }
  .btn-menu.is-open .close {
    display: block;
  }
  nav {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    left: auto;
    width: 75.6%;
    max-width: 360px;
    padding: 70px 0 40px;
    background: url(../image/sp/menu_bg.png) top center/567px 42px;
  }
  nav ul {
    flex-wrap: wrap;
    width: 70%;
    margin: 0 auto;
  }
  nav ul li {
    width: 100%;
    margin-bottom: 10px;
  }
  nav ul img {
    width: 100%;
  }
}
/* main
================================================ */
.main {
  width: 100%;
}

/* mv
================================================ */
.mv {
  overflow: hidden;
  width: 100%;
  min-height: 812px;
  padding-top: 50.75%;
  background: url(../image/mv_bg.png) no-repeat top center/auto 100%;
}

.mv > * {
  position: absolute;
}

.mv-inner {
  width: 50%;
  min-width: 770px;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.mv .logo {
  transform: translate3d(0, 20%, 0);
  transition-duration: 0.8s;
  transition-delay: 0.9s;
  width: 34.4155844156%;
  top: 46.7980295567%;
  left: 0;
  z-index: 1;
}

.mv-chara {
  position: absolute;
}

.mv-chara.is-show {
  transform: translate3d(0, 0, 0);
}

.mv .chara01 {
  width: 96.3636363636%;
  left: 0;
  right: 0;
  top: 6.157635468%;
  margin: auto;
}

.mv .chara02 {
  transform: translate3d(0, 20%, 0);
  transition-duration: 0.5s;
  transition-delay: 0.1s;
  width: 25.3246753247%;
  right: 0;
  top: 28.3251231527%;
}

.mv .chara03 {
  transform: translate3d(0, 20%, 0);
  transition-duration: 0.5s;
  transition-delay: 0.2s;
  width: 33.5064935065%;
  right: 18.5185185185%;
  top: 36.9458128079%;
}

.mv .chara04 {
  transform: translate3d(0, 20%, 0);
  transition-duration: 0.5s;
  transition-delay: 0.3s;
  width: 30.3896103896%;
  left: 13.8888888889%;
  top: 27.0935960591%;
}

.mv .chara05 {
  transform: translate3d(0, 20%, 0);
  transition-duration: 0.5s;
  transition-delay: 0.4s;
  width: 37.5324675325%;
  left: 32.4074074074%;
  top: 40.6403940887%;
}

.mv .chara06 {
  transform: transte3d(0, 10%, 0);
  transition-duration: 0.5s;
  transition-delay: 0.5s;
  width: 25.5844155844%;
  right: 12.962962963%;
  top: 54.1871921182%;
}

.mv .chara07 {
  transform: translate3d(0, -50%, 0);
  transition-duration: 0.6s;
  transition-delay: 0.7s;
  width: 31.0185185185%;
  left: 11.1111111111%;
  top: 2.4630541872%;
}

.mv .link {
  display: flex;
  position: absolute;
  right: 10%;
  bottom: 20.9359605911%;
}

.mv .release {
  position: absolute;
  bottom: 7.7586206897%;
  left: 0;
  right: 0;
  text-align: center;
}

.mv .dl {
  position: absolute;
  bottom: 7.7586206897%;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 63.5064935065%;
  padding: 2.5% 0 1.5%;
  gap: 2.5%;
  background: url(../image/dl_box.png) no-repeat top center/100%;
}

.mv .dl li {
  width: 41.5132924335%;
}

.mv .dl.is-fixed {
  position: fixed;
  bottom: 0;
  z-index: 99;
  max-width: 489px;
  padding: 22px 0 18px;
}

.mv .dl a {
  display: block;
  width: 100%;
}

.mv .dl a img {
  width: 100%;
}

@media only screen and (max-width: 834px) {
  .mv {
    width: 100%;
    height: auto;
    aspect-ratio: 750/1257;
    background: url(../image/sp/mv_bg.png) no-repeat top center/100%;
    padding: 3% 40px;
    min-height: inherit;
  }
  .mv-inner {
    width: 100%;
    min-width: inherit;
  }
  .mv .logo {
    width: 41.3333333333%;
    top: 47.7326968974%;
    left: 4%;
    z-index: 1;
  }
  .mv .logo img {
    width: 100%;
  }
  .mv .chara01 {
    top: 11.9331742243%;
  }
  .mv .chara02 {
    width: 26.2666666667%;
    right: -2%;
    top: 27.446300716%;
  }
  .mv .chara03 {
    width: 34.6666666667%;
    right: 11.6%;
    top: 35.0039777247%;
  }
  .mv .chara04 {
    width: 33.3333333333%;
    left: 13.8666666667%;
    top: 30.230708035%;
  }
  .mv .chara05 {
    width: 42%;
    left: 34.6666666667%;
    top: 36.5950676213%;
  }
  .mv .chara06 {
    width: 28.5333333333%;
    right: 8.6666666667%;
    top: 53.3015115354%;
  }
  .mv .chara07 {
    width: 31.6%;
    left: 10%;
    top: 3.1821797932%;
  }
  .mv .link {
    width: 88%;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 19.0930787589%;
    justify-content: flex-end;
  }
  .mv .link li {
    width: 33.3333333333%;
  }
  .mv .link li img {
    width: 100%;
  }
  .mv .release {
    width: 65%;
    margin: 0 auto;
  }
  .mv .dl {
    width: 93%;
    bottom: 7.1599045346%;
    padding: 4% 0;
  }
  .mv .dl.is-fixed {
    padding: 4% 0;
  }
}
/* camp
================================================ */
.camp {
  padding-bottom: 100px;
  background: url(../image/camp_bg.png) no-repeat top center/2200px auto;
}

.camp-inner {
  width: 577px;
  margin-left: auto;
  margin-right: auto;
}

.camp-box {
  text-align: center;
  padding: 5.4744525547% 0 1.8248175182%;
  width: 100%;
  aspect-ratio: 824/1096;
  background: url(../image/camp_box_bg.png) no-repeat top center/100% 100%;
}

.camp-box-ttl {
  width: 79.6116504854%;
  margin-bottom: 1.8248175182%;
}

.camp-box01 {
  width: 74.5145631068%;
  transform: translateY(30%);
  transition-duration: 0.6s;
}

.camp-box02 {
  width: 76.4563106796%;
  transform: translateY(30%);
  transition-duration: 0.6s;
}

.camp-box03 {
  width: 79.854368932%;
  margin-left: 4%;
  transform: translateY(30%);
  transition-duration: 0.6s;
}

.camp-box04 {
  width: 80.8252427184%;
  margin-left: 4%;
  z-index: 1;
  transform: translateY(30%);
  transition-duration: 0.6s;
}

.camp-box05 {
  width: 82.4029126214%;
  margin-top: 1.8%;
  z-index: 1;
  transform: translateY(30%);
  transition-duration: 0.6s;
}

.camp-box-lead {
  font-size: 13px;
}

.camp-chara {
  position: absolute;
  width: 56.432038835%;
  right: 82.5242718447%;
  bottom: -13%;
  transform: translate3d(-40%, -40%, 0);
  transition-duration: 0.6s;
}

@media only screen and (max-width: 834px) {
  .camp {
    padding-bottom: 10%;
    background: url(../image/sp/camp_bg.png) repeat-y top left/100% auto;
  }
  .camp-box {
    aspect-ratio: 824/1150;
  }
  .camp-inner {
    width: 93.8666666667%;
    min-width: inherit;
  }
  .camp-chara {
    position: absolute;
    width: 50%;
    right: 64%;
    bottom: -5%;
  }
}
@media only screen and (max-width: 600px) {
  .camp-box-lead {
    font-size: 10px;
  }
}
/* twitter
================================================ */
.twitter {
  padding-bottom: 90px;
  background: url(../image/twitter_bg.png) repeat-y top center/2200px auto;
}

.twitter-inner {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding-top: 7%;
  margin-top: -3.5%;
}

.twitter-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 398px;
  height: 467px;
  margin: 0 auto;
  background: url(../image/twitter_box.png) no-repeat center/100%;
}

.twitter-box-inner {
  width: 78%;
  height: 92%;
  background: #fff;
  overflow-y: scroll;
}

.twitter-chara {
  position: absolute;
}

.twitter-chara01 {
  left: 0;
  top: 70px;
  width: 20.5%;
  transform: translate3d(-40%, -40%, 0);
  transition-duration: 0.6s;
}

.twitter-chara02 {
  right: 4%;
  bottom: 37%;
  width: 22.25%;
  transform: translate3d(40%, -40%, 0);
  transition-duration: 0.6s;
}

.twitter-chara03 {
  right: 0;
  bottom: 0;
  width: 18.8333333333%;
  transform: translate3d(70%, -70%, 0);
  transition-duration: 0.6s;
}

@media only screen and (max-width: 834px) {
  .twitter {
    padding-bottom: 15%;
    background: url(../image/sp/twitter_bg.png) repeat-y top left/100% auto;
  }
  .twitter-box {
    width: 75%;
    height: auto;
    aspect-ratio: 398/467;
  }
  .twitter-box-inner {
    position: absolute;
  }
  .twitter-chara01 {
    top: 0;
    left: -2%;
  }
  .twitter-chara02 {
    right: 0;
    bottom: 40%;
  }
  .twitter-chara03 {
    right: 0;
    bottom: 5%;
  }
}
/* chara
================================================ */
.chara {
  padding-bottom: 60px;
  background: url(../image/chara_bg.png) repeat-y top center/auto 1028px;
}

.chara-inner {
  max-width: 714px;
  margin-left: auto;
  margin-right: auto;
}

.chara-slider {
  width: 100%;
}

.chara-slider .swiper-button-next,
.chara-slider .swiper-button-prev {
  width: 44px;
  height: auto;
  aspect-ratio: 44/69;
  top: 48%;
  background-image: none;
}

.chara-slider .swiper-button-next:hover,
.chara-slider .swiper-button-prev:hover {
  cursor: pointer;
  filter: brightness(1.2);
}

.chara-slider .swiper-button-next:after,
.chara-slider .swiper-button-prev:after {
  display: none;
}

.chara-slider li {
  text-align: center;
}

.chara-slider-pagination .swiper-pagination-bullets {
  text-align: center;
  bottom: 20px !important;
}

.chara-slider-pagination .swiper-pagination-bullet {
  width: 20%;
  height: 100%;
  aspect-ratio: 160/181;
  background: none;
  opacity: 1;
  outline: none;
  margin: 0 !important;
}

.chara-slider-pagination .swiper-pagination-bullet:hover {
  cursor: pointer;
  filter: brightness(1.1);
}

.chara-slider-pagination .swiper-pagination-bullet img {
  display: inline;
}

@media only screen and (max-width: 834px) {
  .chara {
    background: url(../image/sp/chara_bg.png) repeat-y top center/100% auto;
    padding-bottom: 5%;
  }
  .chara-inner {
    max-width: 100%;
  }
  .chara-slider .swiper-button-next,
.chara-slider .swiper-button-prev {
    width: 5%;
  }
  .chara-slider .swiper-button-next {
    right: 1%;
  }
  .chara-slider .swiper-button-prev {
    left: 1%;
  }
  .chara-slider li img {
    width: 90%;
  }
  .chara-slider-pagination.swiper-pagination-bullets {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
  }
  .chara-slider-pagination .swiper-pagination-bullet {
    width: 18%;
  }
  .chara-slider-pagination .swiper-pagination-bullet img {
    display: inline;
  }
}
/* system
================================================ */
.system {
  background: url(../image/system_bg.png) repeat-y top center/auto 1195px;
  padding-bottom: 140px;
}

.system-inner {
  max-width: 630px;
  margin-left: auto;
  margin-right: auto;
}

.system-chara {
  position: absolute;
  top: 0;
  right: -18%;
  width: 46.5555555556%;
  transform: translate3d(40%, -40%, 0);
  transition-duration: 0.6s;
}

.system-slider {
  width: 100%;
}

.system-slider li {
  width: 100%;
  aspect-ratio: 900/744;
  text-align: center;
}

.system-slider li .img-main {
  width: 76.6666666667%;
  margin-left: -17%;
}

.system-slider .swiper-button-next,
.system-slider .swiper-button-prev {
  cursor: pointer;
  width: 30px;
  aspect-ratio: 50/60;
  top: 220px;
  background-image: none;
}

.system-slider .swiper-button-next:after,
.system-slider .swiper-button-prev:after {
  display: none;
}

.system-slider .swiper-button-next {
  right: 50px;
}

.system-slider .swiper-button-prev {
  left: 50px;
}

.system-slider-pagination .swiper-pagination-bullet {
  width: 20%;
  height: 100%;
  aspect-ratio: 180/120;
  background: none;
  opacity: 1;
  border-radius: 0;
  outline: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.system-slider-pagination .swiper-pagination-bullet:hover {
  cursor: pointer;
  filter: brightness(1.2);
}

.system-slider-pagination .swiper-pagination-bullet.num2, .system-slider-pagination .swiper-pagination-bullet.num4 {
  transform: translateY(10%);
}

@media only screen and (max-width: 1000px) {
  .system-chara {
    width: 29.3333333333%;
    right: -5%;
  }
}
@media only screen and (max-width: 834px) {
  .system {
    background: url(../image/sp/system_bg.png) repeat-y top center/100% auto;
    padding-bottom: 18%;
  }
  .system-inner {
    width: 100%;
    overflow: hidden;
    max-width: inherit;
  }
  .system-slider .swiper-button-next,
.system-slider .swiper-button-prev {
    top: 40%;
    width: 7%;
  }
  .system-slider .swiper-button-next {
    right: 2%;
  }
  .system-slider .swiper-button-prev {
    left: 2%;
  }
  .system-slider li {
    width: 100%;
    height: auto;
  }
  .system-slider li .img-main {
    width: 90%;
  }
  .system-slider li .img-text01 {
    width: 95%;
  }
  .system-slider li .img-text02 {
    width: 65.3333333333%;
  }
  .system-slider li .img-text03 {
    width: 82%;
  }
  .system-slider li .img-text04 {
    width: 68%;
  }
  .system-slider li .img-text05 {
    width: 52%;
  }
  .system-slider-pagination.swiper-pagination-bullets {
    max-width: 91.3333333333%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* story
================================================ */
.story {
  background: url(../image/story_bg.png) repeat-y top center/auto 100%;
  margin-top: -120px;
  padding-bottom: 60px;
}

.story-inner {
  max-width: 910px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 70px 0 90px;
  overflow: hidden;
}

.story-chara01 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 16.3076923077%;
  transform: translate3d(-50%, -50%, 0);
  transition-duration: 0.6s;
}

.story-chara02 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 19.6923076923%;
  transform: translate3d(50%, -50%, 0);
  transition-duration: 0.6s;
}

.story-text01 {
  transform: translate3d(0, 40%, 0);
  transition-duration: 0.8s;
}

.story-text02 {
  transform: translate3d(0, 30%, 0);
  transition-duration: 0.8s;
}

@media only screen and (max-width: 834px) {
  .story {
    background: url(../image/sp/story_bg.png) no-repeat top 5% center/100% 100%;
    margin-top: 0;
    padding-bottom: 0;
  }
  .story-inner {
    padding: 40px 0 120px;
  }
  .story-text01 {
    width: 91%;
    z-index: 1;
  }
  .story-text02 {
    width: 78%;
    z-index: 1;
  }
  .story-chara01 {
    width: 19.2%;
  }
  .story-chara02 {
    right: -2%;
    width: 22%;
  }
}
/* form
================================================ */
.form {
  background: url(../image/form_bg.png) no-repeat top center/auto 1327px;
  padding: 20px 0 40px;
}

.form-inner {
  max-width: 873px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 40px 0 30px;
}

.form-box {
  width: 580px;
  background: url(../image/form_box_bg.png) no-repeat top center/100% 100%;
  padding: 50px 60px 40px;
  margin: 0 auto;
}

.form-ttl {
  z-index: 1;
  text-align: center;
}

.form-ttl img {
  display: inline;
}

.form-check-privacy {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  margin: 15px auto 0;
  max-width: 340px;
}

.form-check-privacy a {
  color: #fcee21;
}

.form-check-privacy input[type=checkbox] {
  opacity: 0;
  position: absolute;
  left: 0;
  width: 1.6em;
  height: 1.6em;
}

.form-check-privacy label {
  padding-left: 2.5em;
}

.form-check-privacy label:before {
  display: inline-block;
  content: "";
  width: 1.6em;
  height: 1.6em;
  border: 1px solid #1b1464;
  background: #fff;
  margin-right: 15px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.form-check-privacy label:hover {
  cursor: pointer;
}

.form-check-privacy input[type=checkbox]:checked + label:after {
  display: inline-block;
  content: "";
  background: url(../image/icon-check.svg) no-repeat center/100%;
  width: 1.6em;
  height: 1.6em;
  color: #1b1464;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.form-input-mail {
  margin: 30px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  font-size: 14px;
}

.form-input-mail .input-mail {
  background: #fff;
  border-radius: 30px;
  width: 71%;
}

.form-input-mail .input-mail:hover {
  cursor: pointer;
}

.form-input-mail .btn-submit {
  width: 26%;
  background: #1b1464;
  border-radius: 30px;
  color: #fff;
}

.form-input-mail .btn-submit:hover {
  cursor: pointer;
  filter: brightness(1.5);
}

.form-lead {
  z-index: 1;
}

.form-lead .ttl {
  text-align: center;
  color: #1b1464;
  font-size: 18px;
}

.form-lead .box {
  background: #fff;
  height: 230px;
  overflow-y: scroll;
  margin-top: 15px;
  padding: 1em;
  font-size: 13px;
}

.form-lead .box::-webkit-scrollbar {
  width: 17px;
}

.form-lead .box::-webkit-scrollbar-thumb {
  background: #1b1464;
}

.form-lead .box::-webkit-scrollbar-track, .form-lead .box::-webkit-scrollbar-track-piece {
  background: #cbcbcb;
}

.form-lead .box dl {
  margin-top: 2em;
}

.form-lead .box p {
  margin-top: 1em;
}

.form-lead .box ul {
  margin-top: 1em;
}

.form-lead .box .mt li {
  margin-top: 1em;
}

.form-lead .box li {
  text-indent: -1em;
  padding-left: 1em;
}

.form-chara01 {
  width: 21.4285714286%;
  position: absolute;
  top: 24%;
  left: 0;
  transform: translate3d(-40%, -40%, 0);
  transition-duration: 0.6s;
}

.form-chara02 {
  width: 22.0408163265%;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate3d(50%, -50%, 0);
  transition-duration: 0.6s;
}

.form-chara03 {
  width: 22.4489795918%;
  position: absolute;
  top: 18%;
  right: 0;
  transform: translate3d(50%, -50%, 0);
  transition-duration: 0.6s;
}

.form-chara04 {
  width: 14.2857142857%;
  position: absolute;
  bottom: 0;
  right: 2%;
  transform: translate3d(80%, -80%, 0);
  transition-duration: 0.6s;
}

@media only screen and (max-width: 834px) {
  .form {
    overflow: hidden;
    background: url(../image/sp/form_bg.png) no-repeat top center/100% auto;
    padding: 3% 0 4%;
  }
  .form-ttl {
    width: 90%;
    margin: 0 auto;
  }
  .form-box {
    width: 90%;
    max-width: 600px;
    height: auto;
    padding: 5% 5% 7%;
  }
  .form-check-privacy {
    font-size: 13px;
    margin: 15px auto 0;
    max-width: 250px;
  }
  .form-input-mail {
    margin: 30px auto;
    font-size: 12px;
  }
  .form-input-mail .input-mail {
    width: 68%;
  }
  .form-input-mail .btn-submit {
    width: 30%;
  }
  .form-lead .ttl {
    font-size: 16px;
  }
  .form-lead .box {
    font-size: 10px;
    height: 165px;
  }
  .form-lead .box::-webkit-scrollbar {
    width: 10px;
  }
  .form-chara01 {
    width: 20%;
    left: -3%;
    top: 25%;
  }
  .form-chara02 {
    width: 20%;
    top: 5%;
  }
  .form-chara03 {
    width: 22%;
    top: 20%;
    right: -4%;
  }
  .form-chara04 {
    width: 13%;
    right: 0;
    z-index: 1;
  }
}
/* footer
================================================ */
.footer {
  background: #00a9c6;
  padding: 30px 0 130px;
  color: #fff;
}

.footer::after {
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  display: block;
  content: "";
  width: 100%;
  height: 6px;
  background: url(../image/line_footer.png) repeat-x top left/400px auto;
}

.footer-inner {
  max-width: 952px;
  width: 100%;
  margin: 0 auto;
}

.footer .app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  margin: 0 auto;
}

.footer .app .lead {
  font-size: 14px;
  margin-left: 10px;
}

.footer .sns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px auto;
  gap: 20px;
}

.footer .sns-btn {
  display: block;
}

.footer .nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer .nav li:not(:last-child) {
  display: flex;
  align-items: center;
}

.footer .nav li:not(:last-child):after {
  display: block;
  content: "/";
}

.footer .nav a {
  color: #fff;
  padding: 0 1.5em;
  font-size: 16px;
  display: block;
}

.footer .footer-copy {
  text-align: center;
  font-size: 13px;
  margin-top: 40px;
}

.footer .logo {
  width: 194px;
  position: absolute;
  right: 78%;
  bottom: 70px;
}

@media only screen and (max-width: 600px) {
  .footer {
    padding: 20px 0 25%;
  }
  .footer .app {
    width: 90%;
  }
  .footer .app img {
    width: 20%;
  }
  .footer .app .lead {
    font-size: 10px;
    margin-left: 10px;
  }
  .footer .sns {
    gap: 0;
    padding: 0 3%;
    margin: 10px auto;
  }
  .footer .logo {
    width: 30%;
    margin: 20px auto 10px;
    position: inherit;
    right: auto;
    left: auto;
    bottom: auto;
  }
  .footer .nav {
    flex-wrap: wrap;
  }
  .footer .nav a {
    font-size: 12px;
  }
  .footer .footer-copy {
    font-size: 10px;
    line-height: 1.5;
    margin-top: 20px;
  }
}