@charset "UTF-8";
/* =================================
   TopPage
==================================== */
:root {
  --main-text-color: #000;
  --sub-text-color: #313131;
  --main-color:#CC4F82;
  --secondary-color:#00A5B1;
  --line-color: #00B900;
  --base-bg-color:#F1EDE9;
  --bg-color-01:#CEE4E0;
}

.cf {
  *zoom: 1;
}
.cf:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

form ::-webkit-input-placeholder {
  color: #C6C6C6;
}
form :-moz-placeholder {
  opacity: 1;
  color: #C6C6C6;
}
form ::-moz-placeholder {
  opacity: 1;
  color: #C6C6C6;
}
form :-ms-input-placeholder {
  color: #C6C6C6;
}

::-moz-selection {
  color: var(--main-color);
  background: rgba(255, 255, 255, 0.7);
}

::selection {
  color: var(--main-color);
  background: rgba(255, 255, 255, 0.7);
}

/*==============================
TOP contents
==============================*/
.l-mv {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
}
.l-mv:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  z-index: -1;
}
.l-mv:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  z-index: -1;
}
.l-mv .mv-txt {
  position: relative;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.l-mv .mv-txt-copy {
  font-weight: 700;
  text-align: center;
}
.l-mv .mv-txt-copy span {
  color: var(--main-color);
}
.l-mv .mv-txt-body {
  font-weight: 700;
  text-align: center;
}
.l-mv .mv-btnlist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.75em 2.875em;
  position: relative;
  z-index: 1;
}
.l-mv .mv-btnlist li {
  max-width: 400px;
}
.l-mv .mv-btnlist a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.6em;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
  align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.5625em;
  font-weight: 700;
  color: #fff;
  border-radius: 2em;
  overflow: hidden;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.l-mv .mv-btnlist a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #fff;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
@media (hover: hover) {
  .l-mv .mv-btnlist a:hover:before, .l-mv .mv-btnlist a:active:before {
    opacity: 1;
  }
}
.l-mv .mv-btnlist svg {
  width: 1.36em;
}
.l-mv .mv-btnlist .primary a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: -webkit-gradient(linear, left top, right top, from(#C94C81), to(#FA7184));
  background: linear-gradient(90deg, #C94C81 0%, #FA7184 100%);
}
.l-mv .mv-btnlist .primary a:hover, .l-mv .mv-btnlist .primary a:active {
  color: var(--main-color);
}
.l-mv .mv-btnlist .primary a:hover .svg-camera, .l-mv .mv-btnlist .primary a:active .svg-camera {
  fill: var(--main-color);
}
.l-mv .mv-btnlist .line a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: var(--line-color);
}
.l-mv .mv-btnlist .line a:hover, .l-mv .mv-btnlist .line a:active {
  color: var(--line-color);
}
.l-mv .mv-btnlist .line a:hover .svg-line-txt, .l-mv .mv-btnlist .line a:active .svg-line-txt {
  fill: #fff;
}
.l-mv .mv-btnlist .line a:hover .svg-line-base, .l-mv .mv-btnlist .line a:active .svg-line-base {
  fill: var(--line-color);
}
.l-mv .mv-scroll {
  margin-top: 3.25em;
  font-size: 1.25em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--main-color);
  opacity: 0;
  -webkit-transition: opacity 1s 2s;
  transition: opacity 1s 2s;
}
.l-mv .mv-scroll:after {
  content: "";
  display: block;
  width: 0.8em;
  height: 0.8em;
  margin: auto;
  line-height: 1;
  background: url(../img/common/icon_arw_down.svg) no-repeat center;
}
.l-mv .mv-img {
  position: absolute;
  top: 0;
  width: 100%;
}
.l-mv .mv-img img {
  position: absolute;
  opacity: 0;
  -webkit-transform: translateY(-60px);
          transform: translateY(-60px);
  -webkit-transition: opacity 1.5s, -webkit-transform 1s;
  transition: opacity 1.5s, -webkit-transform 1s;
  transition: opacity 1.5s, transform 1s;
  transition: opacity 1.5s, transform 1s, -webkit-transform 1s;
}
.l-mv.start .mv-txt,
.l-mv.start .mv-scroll {
  opacity: 1;
}
.l-mv.start .mv-img img {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.l-mv.start .mv-img-01 {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.l-mv.start .mv-img-02 {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.l-mv.start .mv-img-03 {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.l-mv.start .mv-img-04 {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
.l-mv.start .mv-img-05 {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
@media only screen and (min-width: 768px) {
  .l-mv {
    min-width: 1100px;
    padding-top: 16.875em;
    padding-bottom: 11.25em;
  }
  .l-mv:before {
    background: url(../img/top/mv_bg.svg) no-repeat center bottom/cover;
  }
  .l-mv:after {
    background: url(../img/top/mv_bg_deco.png) no-repeat center top/max(1970px, 100%);
  }
  .l-mv .mv-txt {
    font-size: min(1em, 1.1cqw);
  }
  .l-mv .mv-txt-copy {
    font-size: 4.875em;
    line-height: 1.37;
  }
  .l-mv .mv-txt-body {
    margin-top: 2em;
    font-size: 1.75em;
    line-height: 1.857;
  }
  .l-mv .mv-btnlist {
    margin-top: min(4.875em, 10.14vw);
  }
  .l-mv .mv-btnlist li {
    width: 48%;
  }
  .l-mv .mv-btnlist a {
    padding: 0.625em 1.54em;
  }
  .l-mv .mv-img {
    left: -125px;
    right: -125px;
    margin: auto;
    min-width: 1350px;
  }
  .l-mv .mv-img-01 {
    top: 10em;
    left: 50%;
    margin-left: -44.7%;
    max-width: min(100%, 12.18cqw);
  }
  .l-mv .mv-img-02 {
    top: 24em;
    left: 50%;
    margin-left: -32.7%;
    max-width: min(100%, 19.36cqw);
  }
  .l-mv .mv-img-03 {
    top: 36em;
    left: 50%;
    margin-left: -39.2%;
    max-width: min(100%, 13.54cqw);
  }
  .l-mv .mv-img-04 {
    top: 19em;
    left: 50%;
    margin-left: 34.4%;
    max-width: min(100%, 5.81cqw);
  }
  .l-mv .mv-img-05 {
    top: 35em;
    left: 50%;
    margin-left: 25.2%;
    max-width: min(100%, 12.45cqw);
  }
  .l-mv .mv-img-06 {
    top: 12.5em;
    left: 50%;
    margin-left: 19.7%;
    max-width: min(100%, 12.45cqw);
  }
}
@media only screen and (max-width: 767px) {
  .l-mv {
    padding-top: min(16.25em, 59vw);
    padding-bottom: 31.63vw;
  }
  .l-mv:before {
    background: url(../img/top/sp_mv_bg.svg) no-repeat center bottom/cover;
  }
  .l-mv:after {
    background: url(../img/top/sp_mv_bg_deco.png) no-repeat center bottom/100%;
  }
  .l-mv .mv-txt-copy {
    font-size: min(3.58em, 9.31vw);
    line-height: 1.39;
  }
  .l-mv .mv-txt-body {
    margin-top: 0.9em;
    font-size: min(1.746em, 4.54vw);
    line-height: 1.857;
  }
  .l-mv .mv-btnlist {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 3.75em;
  }
  .l-mv .mv-btnlist li {
    width: 82%;
  }
  .l-mv .mv-btnlist a {
    padding: 0.425em 5%;
  }
  .l-mv .mv-img {
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
  }
  .l-mv .mv-img-01 {
    bottom: 5em;
    left: 16.6%;
    max-width: min(100%, 17.12vw);
  }
  .l-mv .mv-img-02 {
    bottom: 8em;
    left: 61%;
    max-width: min(100%, 24.54vw);
  }
  .l-mv .mv-img-03 {
    top: 9.3em;
    left: 70%;
    max-width: min(100%, 16.81vw);
  }
  .l-mv .mv-img-04 {
    display: none;
  }
  .l-mv .mv-img-05 {
    top: 5.2em;
    left: 46%;
    max-width: min(100%, 15.68vw);
  }
  .l-mv .mv-img-06 {
    top: 8em;
    left: 20%;
    max-width: min(100%, 12.27vw);
  }
}

.top-service {
  padding-bottom: min(5.625em, 11.7vw);
  overflow: hidden;
}
.top-service .top-service-ttl {
  padding-top: 2.1em;
  margin-bottom: 0.6em;
  font-weight: 700;
  line-height: 1.56;
  text-align: center;
  position: relative;
}
.top-service .top-service-ttl strong {
  color: var(--main-color);
}
.top-service .top-service-ttl:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: min(8em, 45cqw);
  height: 3.84em;
  background: url(../img/top/top_service_deco_01.svg) no-repeat left bottom/contain;
  z-index: -1;
}
.top-service .top-service-ttl:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: min(8em, 45cqw);
  height: 3.84em;
  background: url(../img/top/top_service_deco_02.svg) no-repeat right bottom/contain;
  z-index: -1;
}
.top-service .top-service-txt {
  margin-bottom: 2.77em;
  font-size: 1.125em;
  line-height: 1.77;
  text-align: center;
  font-weight: 700;
}
.top-service .top-servicelist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4.5em 4%;
  margin-bottom: 6.875em;
}
.top-service .top-servicelist li {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  max-width: 580px;
}
.top-service .top-servicelist-img {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
}
.top-service .top-servicelist-tag {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  top: 0.767em;
  right: 0;
  left: 0;
  margin: auto;
  padding: 0.325em 1.35em;
  font-weight: 500;
  font-size: clamp(1.25em, 2.25vw, 1.875em);
  line-height: 1.35;
  color: #fff;
  border-radius: 2em;
  max-inline-size: -webkit-max-content;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
}
.top-service .competition .top-servicelist-tag {
  background: -webkit-gradient(linear, left top, right top, from(#F492C7), to(#F874BC));
  background: linear-gradient(90deg, #F492C7 0%, #F874BC 100%);
}
.top-service .recital .top-servicelist-tag {
  background: -webkit-gradient(linear, left top, right top, from(#423CB5), to(#6D69D9));
  background: linear-gradient(90deg, #423CB5 0%, #6D69D9 100%);
}
.top-service .top-servicelist-en {
  position: absolute;
  bottom: -0.15em;
  text-transform: uppercase;
  width: 100%;
  line-height: 1;
  text-align: center;
  color: #fff;
  font-size: 3.25em;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}
.top-service .top-servicelist-txt .ttl {
  margin-top: 0.56em;
  margin-bottom: 0.56em;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.875em;
  line-height: 1.5;
}
.top-service .top-servicelist-txt .desc {
  color: #fff;
  line-height: 1.5625;
  font-weight: 500;
}
.top-service .top-servicelist-txt .more-btn a {
  width: 100%;
  max-width: 400px;
  padding-top: 0.875em;
  padding-bottom: 0.875em;
}
.top-service .top-servicelist-txt .more-btn a:after {
  border: 2px solid #fff;
  border-radius: 4em;
}
.top-service .top-infographics {
  display: grid;
  margin: 0 auto min(10.3125em, 21.45vw);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  container-type: inline-size;
  gap: 1.2cqw;
}
.top-service .top-infographics li {
  padding: 1em 1.5% 2em;
  display: grid;
  text-align: center;
  border-radius: 30px;
  background: #fff;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0.1em;
  line-height: 1.5;
}
.top-service .top-infographics-en {
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  color: var(--main-color);
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.5;
}
.top-service .top-infographics-icon {
  text-align: center;
  max-width: 80%;
  margin: auto;
}
.top-service .top-infographics-data {
  -ms-flex-item-align: center;
      align-self: center;
}
.top-service .top-infographics-data .num {
  color: var(--main-color);
  font-size: 3.125em;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  line-height: 1.5;
}
.top-service .top-infographics-data .unit {
  font-size: 1.875em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sub-text-color);
}
.top-service .top-infographics-data .point {
  font-size: 2.125em;
  font-weight: 700;
  color: var(--main-color);
}
.top-service .top-infographics-note {
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sub-text-color);
}
.top-service .top-features-header {
  position: relative;
}
.top-service .top-features-header:after {
  content: "";
  width: min(21.875em, 29cqw);
  height: 15.625em;
  position: absolute;
}
@media only screen and (min-width: 1401px) {
  .top-service .top-features-header:after {
    right: max(-220px, 223.077px - 23.077vw);
    top: max(-32px, 263.385px - 15.385vw);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1400px) {
  .top-service .top-features-header:after {
    right: -8.218%;
    top: 3em;
  }
}
.top-service .top-features-header:after {
  background: url(../img/top/top_features_character@2x.png) no-repeat center/contain;
}
.top-service .top-features-ttl {
  margin-bottom: 0.6em;
  font-size: min(3.125em, 7.125vw);
  font-weight: 700;
  color: #fff;
  line-height: 1.56;
  text-align: center;
}
.top-service .top-features-intro {
  margin-bottom: min(5em, 11.7vw);
  color: #fff;
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.77;
}
.top-service .top-featureslist-outer {
  container-type: inline-size;
  container-name: featureslist;
}
.top-service .top-featureslist {
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}
.top-service .top-featureslist li {
  padding: 3.85cqw 0;
  row-gap: 0.2em;
  background: rgba(255, 255, 255, 0.73);
  border: 1px solid #FFFFFF;
  backdrop-filter: blur(6.40534px);
  aspect-ratio: 1;
  border-radius: 50%;
}
.top-service .top-featureslist h4 {
  margin-bottom: 0.4em;
  font-size: clamp(1.25em, 3vw, 1.5625em);
  font-weight: 700;
  line-height: 1.5;
  color: var(--sub-text-color);
  text-align: center;
}
.top-service .top-featureslist-icon {
  text-align: center;
  max-width: 35%;
  margin: 0 auto;
}
.top-service .top-featureslist-txt {
  font-size: 0.8125em;
  line-height: 1.56;
  font-weight: 500;
  color: var(--sub-text-color);
  width: 68%;
  margin: 0 auto;
}
.top-service .top-featureslist-outer {
  position: relative;
  z-index: 2;
}
.top-service .top-featureslist-outer + .more-btn {
  margin-top: 4.0625em;
}
.top-service .top-features-deco {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: -4em;
  right: -4em;
  line-height: 1em;
  margin: auto;
  width: 8em;
  z-index: -1;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: min(20em, 50vw);
  text-transform: uppercase;
  text-align: center;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.19)), to(rgba(248, 228, 231, 0.19)));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.19) 0%, rgba(248, 228, 231, 0.19) 100%);
  color: rgba(0, 0, 0, 0);
  -webkit-background-clip: text;
          background-clip: text;
}
@media only screen and (min-width: 768px) {
  .top-service {
    min-width: 1100px;
    background-image: url(../img/top/top_service_bg_deco.png), url(../img/top/top_features_bg_deco.png);
    background-repeat: no-repeat;
    background-position: center top, center bottom;
    background-size: max(1920px, 100%);
  }
  .top-service .wrap {
    max-width: min(1380px + 12%);
  }
  .top-service .top-service-ttl {
    font-size: 3.125em;
  }
  .top-service .top-servicelist li {
    width: 48%;
  }
  .top-service .top-infographics {
    max-width: 1180px;
    grid-template-columns: repeat(4, 1fr);
  }
  .top-service .top-features-ttl {
    padding: 0 1.8em;
  }
  .top-service .top-features-intro {
    text-align: center;
  }
  .top-service .top-featureslist {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1370px;
    gap: 1.15cqw;
  }
  .top-service .top-featureslist li {
    font-size: clamp(0.9em, 1.1vw, 1em);
  }
}
@media only screen and (max-width: 767px) {
  .top-service {
    margin-top: -15vw;
    background: url(../img/top/top_service_bg_deco.png) repeat-y center top/125%;
  }
  .top-service .top-service-ttl {
    font-size: min(3.125em, 7.125vw);
  }
  .top-service .top-service-ttl:before {
    left: -8%;
  }
  .top-service .top-service-ttl:after {
    right: -8%;
  }
  .top-service .top-service-txt {
    max-inline-size: -webkit-max-content;
    max-inline-size: -moz-max-content;
    max-inline-size: max-content;
    margin-inline: auto;
    text-align: left;
  }
  .top-service .top-servicelist {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .top-service .top-servicelist-img {
    font-size: min(1em, 3.9vw);
  }
  .top-service .top-servicelist-txt .ttl {
    font-size: min(1.875em, 7.3vw);
  }
  .top-service .top-infographics {
    gap: 3cqw;
    grid-template-columns: repeat(2, 1fr);
  }
  .top-service .top-infographics li {
    font-size: min(1em, 2.7vw);
  }
  .top-service .top-features-header {
    padding-top: 14vw;
  }
  .top-service .top-features-header:after {
    width: 36vw;
    height: 27vw;
    right: -8%;
    top: 0;
  }
  .top-service .top-features-intro {
    text-align: left;
  }
  .top-service .top-featureslist {
    grid-template-columns: repeat(2, 1fr);
    gap: 4cqw;
  }
  @container featureslist (inline-size < 540px) {
    .top-service .top-featureslist {
      max-width: 70%;
      margin: auto;
      grid-template-columns: repeat(1, 1fr);
    }
    .top-service .top-featureslist li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
  }
  .top-service .top-features-deco {
    font-size: 20vw;
    top: 0;
    height: 1em;
  }
}
@media only screen and (max-width: 480px) {
  .top-service .top-featureslist {
    max-width: 100%;
    gap: 8cqw;
  }
}

.bg-active .top-service .top-service-ttl strong {
  color: #fff;
}

.top-partner {
  padding: min(5.325em, 11.076vw) 0 min(5em, 10.4vw);
  background: var(--bg-color-01);
  overflow: hidden;
}
.top-partner .wrap {
  max-width: calc(1448px + 12%);
}
.top-partner h3 {
  margin-bottom: 0.9em;
  font-size: min(1.9375em, 6.725vw);
  font-weight: 700;
  color: var(--sub-text-color);
  position: relative;
  z-index: 1;
}
.top-partner .top-partner-outer {
  position: relative;
}
.top-partner .top-partner-outer:after {
  content: "";
  position: absolute;
}
.top-partner .top-partner-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4vw 3%;
}
.top-partner .top-partner-list div {
  padding: 1.25em 1.6% 3em 4%;
  border: 6px solid #acd3cc;
  border-radius: 15px;
  background: #fff;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.top-partner .top-partner-list dt {
  color: #5ca497;
  font-weight: 700;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.65em;
}
.top-partner .top-partner-list dd {
  color: var(--sub-text-color);
}
.top-partner .top-partner-list li {
  font-size: 1.125em;
  line-height: 1.5;
  font-weight: 500;
}
.top-partner .top-partner-list li + li {
  margin-top: 0.5em;
}
.top-partner .top-partner-list li:last-child:after {
  content: "など";
}
.top-partner .top-partner-message {
  margin-top: 1.5em;
  color: var(--sub-text-color);
  font-weight: 500;
  font-size: 1.125em;
  line-height: 2;
}
@media only screen and (min-width: 768px) {
  .top-partner {
    min-width: 1100px;
  }
  .top-partner .top-partner-outer {
    padding-right: 13.8%;
  }
  .top-partner .top-partner-outer:after {
    width: 21.25em;
    height: 22.5em;
    left: 50%;
    margin-left: 37.5%;
    max-width: 20vw;
    top: 2em;
    background: url(../img/top/top_partner_character@2x.png) no-repeat center/contain;
  }
}
@media only screen and (max-width: 767px) {
  .top-partner .top-partner-outer {
    padding-top: 5vw;
  }
  .top-partner .top-partner-outer:after {
    width: 47vw;
    height: 30vw;
    right: -8%;
    top: -8vw;
    background: url(../img/top/sp_top_partner_character@2x.png) no-repeat center/contain;
  }
  .top-partner .top-partner-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .top-partner .top-partner-list div {
    padding: 2em 5%;
  }
  .top-partner .top-partner-list div:first-child dt {
    padding-right: 20vw;
  }
  .top-partner .top-partner-list li + li {
    margin-top: 1em;
  }
}

.top-works {
  padding: min(7.5em, 15.6vw) 0 min(6.875em, 14.3vw);
  overflow: hidden;
  background: var(--base-bg-color) url(../img/top/top_works_bg_deco.png) no-repeat center top;
}
.top-works .container-wrap {
  padding-right: 0;
}
.top-works .swiper .swiper-button-next {
  border-radius: 50%;
  width: clamp(2.5em, 5vw, 4.375em);
  height: clamp(2.5em, 5vw, 4.375em);
  right: 6%;
  background: rgba(255, 255, 255, 0.8) url(../img/top/slider_arw.svg) no-repeat center/contain;
}
.top-works .swiper .swiper-button-next svg {
  display: none;
}
.top-works .swiper-slide {
  width: 85%;
  max-width: 530px;
  -webkit-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;
  background: #fff;
  border-radius: 13px;
  height: auto;
}
@media (hover: hover) {
  .top-works .swiper-slide:hover, .top-works .swiper-slide.playing {
    color: #fff;
    background: #9296C2;
  }
  .top-works .swiper-slide:hover .tag, .top-works .swiper-slide.playing .tag {
    color: #9296c2;
    background: #fff;
  }
}
.top-works .top-works-movie {
  position: relative;
  aspect-ratio: 128/72;
  border-radius: 13px;
  -webkit-transition: border-radius 0.3s;
  transition: border-radius 0.3s;
  overflow: hidden;
}
.top-works .top-works-movie:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/common/icon_play.svg) no-repeat center/min(3.125em, 6.5vw);
  z-index: 3;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.top-works .top-works-movie .poster {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.top-works .top-works-movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.top-works .top-works-txt {
  padding: 1.875em 6.8%;
}
.top-works .top-works-txt .tag {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  margin-bottom: 1.75em;
  color: #fff;
  background: #9296C2;
  min-width: 100px;
  padding: 0.1875em 0.6em;
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 5px;
  -webkit-transition: color 0.3s, background 0.3s;
  transition: color 0.3s, background 0.3s;
}
.top-works .top-works-txt .ttl {
  font-size: 1.25em;
  font-weight: 700;
  color: var(--sub-text-color);
  line-height: 1.5;
}
.top-works .swiper-slide.playing .top-works-movie:after {
  opacity: 0;
  pointer-events: none;
}
.top-works .swiper-slide.playing .top-works-movie {
  border-radius: 0;
}
.top-works .swiper-slide.playing .poster {
  opacity: 0;
  pointer-events: none;
}
.top-works .more-btn {
  text-align: left;
}
@media only screen and (min-width: 768px) {
  .top-works {
    background-size: max(1920px, 100%);
    min-width: 1100px;
  }
  .top-works .swiper {
    min-width: 1100px;
  }
}
@media only screen and (max-width: 767px) {
  .top-works {
    background-size: 240%;
  }
}

.top-plan {
  position: relative;
  padding: min(5.25em, 10.92vw) 0;
  background: #fff;
  overflow: hidden;
}
.top-plan .top-plan-img {
  position: absolute;
  container-type: inline-size;
  margin: auto;
  width: 100%;
}
.top-plan .top-plan-img img:not(.plan-character) {
  opacity: 0;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
  -webkit-transition: opacity 1.5s, -webkit-transform 1s;
  transition: opacity 1.5s, -webkit-transform 1s;
  transition: opacity 1.5s, transform 1s;
  transition: opacity 1.5s, transform 1s, -webkit-transform 1s;
}
.top-plan .top-plan-img.visible img {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.top-plan .top-plan-img.visible .plan-img-01 {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
.top-plan .top-plan-img.visible .plan-img-02 {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.top-plan .top-plan-img.visible .plan-img-05 {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.top-plan .ttl-layout-02 {
  margin-bottom: 0;
}
.top-plan .top-plan-grid {
  display: grid;
  gap: 6vw 2.25%;
}
.top-plan .top-plan-item {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.top-plan .top-plan-item a {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0.9375em;
  color: var(--sub-text-color);
}
@media (hover: hover) {
  .top-plan .top-plan-item a:hover .course:not(.primary .course):not(.secondary .course), .top-plan .top-plan-item a:active .course:not(.primary .course):not(.secondary .course) {
    color: #fff;
    background: var(--sub-text-color);
  }
  .top-plan .top-plan-item a:hover .course:not(.primary .course):not(.secondary .course) ul li, .top-plan .top-plan-item a:active .course:not(.primary .course):not(.secondary .course) ul li {
    background-image: url(../img/common/icon_check_wht.svg);
  }
  .top-plan .top-plan-item a:hover .course:before, .top-plan .top-plan-item a:active .course:before {
    opacity: 0;
  }
}
.top-plan .top-plan-item .recommend {
  padding: 0.11em 1em;
  text-align: center;
  font-size: 1.5em;
  font-weight: 700;
  color: #fff;
  border-radius: 2em;
}
.top-plan .top-plan-item .course {
  background: #f2f2f2;
  border-radius: 11px;
  padding: 1.875em 0 3em;
  -webkit-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: 0;
}
.top-plan .top-plan-item .course-ttl {
  margin-bottom: 1em;
  padding: 0 3%;
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.top-plan .top-plan-item .course-note {
  margin-bottom: 2em;
  padding: 0 3%;
  max-inline-size: -webkit-max-content;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  margin-inline: auto;
  font-size: 0.9375em;
  line-height: 1.5;
  -ms-flex-item-align: center;
      align-self: center;
}
.top-plan .top-plan-item .course-price {
  border-top: 1px solid #bebebe;
  text-align: center;
  padding: 1em 3% 1.2em;
}
.top-plan .top-plan-item .course-price .num {
  font-weight: 700;
  font-family: "Inter", sans-serif;
  font-size: 2.1875em;
  line-height: 1.5;
}
.top-plan .top-plan-item .course-price .unit {
  font-size: 1.5625em;
  font-weight: 700;
  line-height: 1.5;
}
.top-plan .top-plan-item .course-price .txt {
  font-size: 2.0625em;
  font-weight: 700;
  line-height: 1.5;
}
.top-plan .top-plan-item ul {
  max-inline-size: -webkit-max-content;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  margin-inline: auto;
  min-width: 80%;
}
.top-plan .top-plan-item ul li {
  padding-left: 1.5em;
  line-height: 1.5;
  font-size: 1.125em;
  font-weight: 500;
  background: url(../img/common/icon_check_pnk.svg) no-repeat left 0.3em/1em;
}
.top-plan .top-plan-item ul li + li {
  margin-top: 1em;
}
.top-plan .top-plan-item.primary .recommend {
  background: var(--main-color);
}
.top-plan .top-plan-item.primary .course {
  background: transparent;
  border: 2px solid var(--main-color);
  -webkit-box-shadow: 0px 10px 0px rgba(204, 79, 130, 0.4);
          box-shadow: 0px 10px 0px rgba(204, 79, 130, 0.4);
}
.top-plan .top-plan-item.primary .course:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: -1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 1;
}
.top-plan .top-plan-item.primary .course:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F8E4E7));
  background: linear-gradient(180deg, #FFFFFF 0%, #F8E4E7 100%);
  z-index: -2;
}
.top-plan .top-plan-item.primary .course-price .num {
  color: var(--main-color);
}
.top-plan .top-plan-item.secondary .recommend {
  background: var(--secondary-color);
}
.top-plan .top-plan-item.secondary .course {
  background: #fff;
  border: 2px solid var(--secondary-color);
  -webkit-box-shadow: 0px 10px 0px rgba(0, 165, 177, 0.4);
          box-shadow: 0px 10px 0px rgba(0, 165, 177, 0.4);
}
.top-plan .top-plan-item.secondary .course:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: -1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 1;
}
.top-plan .top-plan-item.secondary .course:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left bottom, left top, from(#EDF8F9), to(#FFFFFF));
  background: linear-gradient(360deg, #EDF8F9 0%, #FFFFFF 100%);
  z-index: -2;
}
.top-plan .top-plan-item.secondary .course ul li {
  background-image: url(../img/common/icon_check_grn.svg);
}
.top-plan .top-plan-item.secondary .course-price .txt {
  color: var(--secondary-color);
}
@media only screen and (min-width: 768px) {
  .top-plan {
    min-width: 1100px;
  }
  .top-plan .top-plan-img {
    top: 6.3em;
    left: -240px;
    right: -240px;
    min-width: 1580px;
  }
  .top-plan .top-plan-img img:not(.plan-character) {
    position: absolute;
  }
  .top-plan .plan-img-01 {
    left: 50%;
    margin-left: -45.9%;
    max-width: min(100%, 5.1625cqw);
  }
  .top-plan .plan-img-02 {
    left: 50%;
    margin-left: -38.4%;
    max-width: min(100%, 8.489cqw);
  }
  .top-plan .plan-img-03 {
    left: 50%;
    top: 0.9em;
    margin-left: -27.9%;
    max-width: min(100%, 6.66cqw);
  }
  .top-plan .plan-img-05 {
    left: 50%;
    margin-left: 39.1%;
    max-width: min(100%, 5.104cqw);
  }
  .top-plan .plan-character {
    position: absolute;
    left: 50%;
    top: -2.1em;
    margin-left: 18.3%;
    max-width: min(100%, 17.76cqw);
  }
  .top-plan .top-plan-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .top-plan .top-plan-img {
    padding-bottom: 18vw;
    top: 0;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .top-plan .top-plan-img span {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    text-align: center;
  }
  .top-plan .plan-character {
    position: absolute;
    max-width: 341px;
    width: 36vw;
    bottom: -3vw;
    right: 0;
    left: 0;
    margin: auto;
  }
  .top-plan .top-plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .top-plan .top-plan-item {
    font-size: clamp(0.7em, 2.5vw, 1em);
  }
}
@media only screen and (max-width: 480px) {
  .top-plan .top-plan-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .top-plan .top-plan-item {
    font-size: 1em;
  }
  .top-plan .top-plan-item ul {
    min-width: 0;
  }
}

.top-voice {
  padding: min(5.6em, 11.648vw) 0 min(10em, 20.8vw);
  background: #fff url(../img/top/top_voice_bg_deco.png) no-repeat center top;
  container-type: inline-size;
  overflow: hidden;
}
.top-voice .ttl-layout-02 {
  margin-bottom: 4em;
}
.top-voice .top-voice-item {
  position: relative;
  -webkit-transition: opacity 1.2s, -webkit-transform 1s;
  transition: opacity 1.2s, -webkit-transform 1s;
  transition: transform 1s, opacity 1.2s;
  transition: transform 1s, opacity 1.2s, -webkit-transform 1s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  max-inline-size: -webkit-max-content;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
}
.top-voice .top-voice-item img {
  border-radius: 10px;
}
.top-voice .top-voice-txt {
  position: relative;
  padding: 3.125em 4.65% 1.875em;
  max-width: 770px;
  background: var(--base-bg-color);
  border-radius: 10px;
  font-size: clamp(0.75em, 1.9vw, 1em);
  z-index: 1;
}
.top-voice .top-voice-message {
  font-size: 1.4375em;
  font-weight: normal;
  font-weight: 500;
  line-height: 1.65;
  position: relative;
}
.top-voice .top-voice-message:before {
  position: absolute;
  content: "";
  width: 1.17em;
  height: 1em;
  left: -5%;
  top: -1em;
  background: url(../img/common/icon_wquotation_01.svg) no-repeat center/contain;
}
.top-voice .top-voice-message:after {
  position: absolute;
  content: "";
  width: 1.17em;
  height: 1em;
  right: -5%;
  bottom: -1em;
  background: url(../img/common/icon_wquotation_02.svg) no-repeat center/contain;
}
.top-voice .top-voice-user {
  margin-top: 1.35em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0 1.6em;
  margin-right: 2.3%;
}
.top-voice .top-voice-user .name {
  font-size: 1.375em;
  font-weight: 700;
  line-height: 1.5;
}
.top-voice .top-voice-user .tag {
  padding: 0.375em 1em;
  font-weight: 500;
  line-height: 1.5;
  color: #737373;
  background: #fff;
}
@media only screen and (min-width: 768px) {
  .top-voice {
    min-width: 1100px;
    background-size: max(1920px, 100%);
  }
  .top-voice .top-voice-txt {
    width: 60%;
  }
  .top-voice .photo01 {
    left: -3%;
  }
  .top-voice .photo01 img {
    max-width: min(100%, 41.25cqw);
  }
  .top-voice .photo02 {
    left: 47.16%;
    margin-top: max(-17.375em, -14.479cqw);
  }
  .top-voice .photo02 img {
    max-width: min(100%, 28.33cqw);
  }
  .top-voice .txt01 {
    margin-top: 3.625em;
    left: 50%;
    margin-left: -45.4%;
  }
  .top-voice .photo03 {
    left: 78.1%;
    margin-top: max(-11.8125em, -9.84375cqw);
  }
  .top-voice .photo03 img {
    max-width: min(100%, 18.229cqw);
  }
  .top-voice .photo04 {
    left: 48.28%;
    margin-top: max(-9.1875em, -7.65625cqw);
  }
  .top-voice .photo04 img {
    max-width: min(100%, 17.65cqw);
  }
  .top-voice .txt02 {
    margin-top: min(4.375em, 3.645cqw);
    left: 43.19%;
  }
  .top-voice .photo05 {
    left: 0;
    margin-top: max(-12.125em, -10.1cqw);
  }
  .top-voice .photo05 img {
    max-width: min(100%, 28.33cqw);
  }
  .top-voice .txt03 {
    margin-top: max(-7.06em, -5.88cqw);
    left: 28.3%;
  }
}
@media only screen and (max-width: 767px) {
  .top-voice {
    background-size: 240%;
    background-repeat: repeat-y;
  }
  .top-voice .top-voice-txt {
    width: 80%;
  }
  .top-voice .photo01 {
    left: -3%;
  }
  .top-voice .photo01 img {
    max-width: min(100%, 82.5cqw);
  }
  .top-voice .photo02 {
    left: 40%;
    margin-top: max(-17.375em, -14.479cqw);
  }
  .top-voice .photo02 img {
    max-width: min(100%, 56.66cqw);
  }
  .top-voice .txt01 {
    margin-top: min(3.625em, 7.54vw);
    left: 50%;
    margin-left: -45.4%;
  }
  .top-voice .photo03 {
    left: 70%;
    margin: 0;
    margin-top: max(-11.8125em, -9.84375cqw);
  }
  .top-voice .photo03 img {
    max-width: min(100%, 36.458cqw);
  }
  .top-voice .photo04 {
    left: 20%;
    margin-top: max(-9.1875em, -7.65625cqw);
  }
  .top-voice .photo04 img {
    max-width: min(100%, 35.3cqw);
  }
  .top-voice .txt02 {
    margin-top: min(4.375em, 3.645cqw);
    left: 20.19%;
  }
  .top-voice .photo05 {
    left: 0;
  }
  .top-voice .photo05 img {
    max-width: min(100%, 56.66cqw);
  }
  .top-voice .txt03 {
    margin-top: max(-7.06em, -3cqw);
    left: 10%;
  }
}

.top-faq {
  padding: min(7.5em, 15.6vw) 0 min(8.125em, 16.9vw);
}
.top-faq .top-faq-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3vw 2.5%;
}
.top-faq .ttl-layout-01 h2 {
  font-size: clamp(2.3em, 3.3vw, 2.5em);
}
@media only screen and (min-width: 768px) {
  .top-faq {
    min-width: 1100px;
  }
  .top-faq .top-faq-sub {
    width: 30%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .top-faq .top-faq-sub .more-btn {
    margin-top: auto;
    text-align: left;
  }
  .top-faq .top-faq-sub .more-btn a {
    font-size: clamp(1.07em, 1.5vw, 1.125em);
  }
  .top-faq .top-faq-main {
    width: 67.5%;
  }
}
@media only screen and (max-width: 767px) {
  .top-faq .top-faq-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .top-faq .top-faq-sub {
    display: contents;
  }
  .top-faq .ttl-layout-01 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .top-faq .top-faq-main {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .top-faq .more-btn {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}

.top-mascot {
  padding: min(6.25em, 13vw) 0;
  background: var(--bg-color-01);
  overflow: hidden;
}
.top-mascot .wrap {
  max-width: calc(1400px + 12.5%);
}
.top-mascot .top-mascot-outer {
  position: relative;
}
.top-mascot .top-mascot-outer:before {
  content: "";
  width: min(30.625em, 63vw);
  height: min(26.25em, 54vw);
  position: absolute;
  top: 0;
  left: -11.9%;
  background: url(../img/common/character_bg_01.png) no-repeat left top/contain;
}
.top-mascot .top-mascot-outer:after {
  content: "";
  width: min(30.625em, 63vw);
  height: min(26.25em, 54vw);
  position: absolute;
  bottom: 0;
  right: -11.9%;
  background: url(../img/common/character_bg_02.png) no-repeat left bottom/contain;
}
.top-mascot .top-mascot-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1em 4%;
  background: #fff;
  border: 2px solid #cfb0b0;
  border-radius: 15px;
  position: relative;
  z-index: 1;
  max-width: 86%;
  margin: auto;
}
.top-mascot .top-mascot-txt {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.top-mascot .top-mascot-txt .stl {
  margin-bottom: 0.3em;
  font-size: 1.25em;
  font-weight: 700;
  color: #aab3d0;
  line-height: 1.35;
}
.top-mascot .top-mascot-txt .name {
  padding-bottom: 0.65em;
  margin-bottom: 0.5em;
  font-size: 1.9375em;
  font-weight: 700;
  color: var(--sub-text-color);
  line-height: 1.35;
  position: relative;
}
.top-mascot .top-mascot-txt .name:after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  max-width: 585px;
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(#BFDBD9), to(#A6ACCE));
  background: linear-gradient(90deg, #BFDBD9 0%, #A6ACCE 100%);
}
.top-mascot .top-mascot-txt .desc {
  font-size: 1.125em;
  font-weight: 500;
  line-height: 2;
}
.top-mascot .top-mascot-btn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  aspect-ratio: 1;
  width: 10.77em;
  height: 10.77em;
  padding-bottom: 0.25em;
  font-size: 1.125em;
  font-weight: 700;
  text-align: center;
  color: #fff;
  line-height: 1.25;
  border-radius: 50%;
  background: var(--sub-text-color) url(../img/common/icon_arw_right.svg) no-repeat center bottom 1.6em/0.62em;
}
@media (hover: hover) {
  .top-mascot .top-mascot-btn a {
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
  }
  .top-mascot .top-mascot-btn a:hover, .top-mascot .top-mascot-btn a:active {
    background-color: #BD9D9F;
  }
}
@media only screen and (min-width: 768px) {
  .top-mascot {
    min-width: 1100px;
  }
  .top-mascot .top-mascot-box {
    padding: 2.225em 5%;
  }
  .top-mascot .top-mascot-img {
    max-width: 23%;
  }
}
@media only screen and (max-width: 767px) {
  .top-mascot .top-mascot-outer:before {
    top: -11vw;
  }
  .top-mascot .top-mascot-outer:after {
    bottom: -11vw;
  }
  .top-mascot .top-mascot-box {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 2.225em;
  }
  .top-mascot .top-mascot-img {
    width: 100%;
    text-align: center;
  }
  .top-mascot .top-mascot-img img {
    max-width: 50%;
  }
  .top-mascot .top-mascot-txt {
    font-size: min(1em, 2.4vw);
  }
  .top-mascot .top-mascot-txt .stl,
  .top-mascot .top-mascot-txt .name {
    text-align: center;
  }
  .top-mascot .top-mascot-btn {
    width: 100%;
  }
  .top-mascot .top-mascot-btn a {
    font-size: min(1em, 2.4vw);
    margin: auto;
  }
}

.top-column {
  padding: min(7.5em, 15.6vw) 0 min(8.125em, 16.9vw);
}
.top-column .top-column-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 2.5%;
}
.top-column .ttl-layout-01 h2 {
  font-size: clamp(2.3em, 3.3vw, 2.5em);
}
@media only screen and (min-width: 768px) {
  .top-column {
    min-width: 1100px;
  }
  .top-column .top-column-sub {
    width: 30%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .top-column .top-column-sub .more-btn {
    margin-top: auto;
    text-align: left;
  }
  .top-column .top-column-main {
    width: 67.5%;
  }
}
@media only screen and (max-width: 767px) {
  .top-column .top-column-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .top-column .top-column-sub {
    display: contents;
  }
  .top-column .ttl-layout-01 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .top-column .top-column-main {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .top-column .more-btn {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}