@charset "UTF-8";
/**
 * Main Stylesheet
 */
/**
 * Colors
==================== */
/**
 * Breakpoints
 ==================== */
/**
 * Design Sizes
==================== */
/**
 * Spacing Units
==================== */
/**
 * Font sizes
==================== */
/**
 * Font Families
==================== */
/**
 * vw変換
==================== */
/**
 * em変換
==================== */
/**
 * mixins
==================== */
/**
 * The new CSS reset
 * version 1.5.1 (last updated 1.3.2022)
==================== */
*:where(:not(iframe, canvas, img, video, svg, svg *, symbol *)) {
  all: unset;
  display: revert;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a,
button {
  cursor: revert;
}

b {
  font-weight: 600;
}

ol,
ul,
menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
}

table {
  border-collapse: collapse;
}

textarea {
  white-space: revert;
}

meter {
  appearance: revert;
}

::placeholder {
  color: unset;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  line-break: after-white-space;
}

:where([draggable=true]) {
  -webkit-user-drag: element;
}

:root {
  /**
   * Color variables
  ==================== */
  --clr-yellow: #FFD711;
  --clr-white: #fff;
  --clr-black: #222;
  --clr-bg: #fff;
  --clr-bluegray: #F4F5F8;
  --clr-gray2: #DADADA;
  --clr-gray3: #6b6d6f;
  --clr-gray4: #6e6e6e;
  --clr-gray5: #A0A0A0;
  --clr-imput-default: #525252;
  --clr-txt-default: #333;
  --clr-deep-orange: #F96221;
  --clr-imput-text: #626264;
  --clr-link-blue: #0017C1;
  --clr-system-blue: #007AFF;
  --clr-blue: #D9EDFF;
  --clr-prime: #d1003f;
  --clr-second: #fdd500;
  --clr-gray-light: #f7f7f7;
  --clr-gray-mid: #e7e7e7;
  --clr-gray-dark: #151515;
  --clr-success: #a3ca60;
  --clr-info: #0650cb;
  --clr-warning: #eaba5d;
  --clr-error: #dd3e34;
  --clr-text: #39464d;
  --clr-border: #c1c6c9;
  /**
   * Font size variables
  ==================== */
  --fs-sm: em(12);
  --fs-md: 1em;
  --fs-lg: em(24);
  /**
   * Font variables
  ==================== */
  --ff-default: sans-serif;
  --ff-en: sans-serif;
  --ff-ja: sans-serif;
}

html {
  font-family: var(--ff-default);
  font-size: var(--fs-md);
}

body {
  font-family: "Noto Sans JP", sans-serif;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.6;
}

a {
  text-decoration: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
}

img {
  height: auto;
  object-fit: contain;
}

@keyframes scale {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 100;
  src: url("../../assets/fonts/notosansjp/NotoSansJP-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 200;
  src: url("../../assets/fonts/notosansjp/NotoSansJP-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 300;
  src: url("../../assets/fonts/notosansjp/NotoSansJP-DemiLight.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url("../../assets/fonts/notosansjp/NotoSansJP-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  src: url("../../assets/fonts/notosansjp/NotoSansJP-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: url("../../assets/fonts/notosansjp/NotoSansJP-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  src: url("../../assets/fonts/notosansjp/NotoSansJP-Black.woff2") format("woff2");
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
@media (max-width: 767px) {
  .header {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.1333333333vw 6.4vw 2.1333333333vw;
    border-radius: 0 0 4.2666666667vw 4.2666666667vw;
    background-color: var(--clr-bg);
  }
}
.header__inner {
  background-color: var(--clr-bg);
  padding: 1.6666666667vw 2.7777777778vw 2.4305555556vw 2.7777777778vw;
  border-radius: 0 0 1.6666666667vw 0;
  display: flex;
  flex-direction: column;
  gap: 0.8333333333vw;
}
@media (max-width: 1020px) {
  .header__inner {
    padding: 3.3854166667vw 2.6041666667vw 3.3854166667vw 5.2083333333vw;
    border-radius: 0 0 3.125vw 0;
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .header__inner {
    padding: 2.1333333333vw 4.2666666667vw 2.1333333333vw 2.1333333333vw;
    border-radius: 0;
    gap: 1.6vw;
    flex-direction: row;
    align-items: center;
    z-index: 10;
    background-color: transparent;
  }
}
.header__title {
  width: max-content;
  font-size: 0.8333333333vw;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 1px;
}
@media (max-width: 1020px) {
  .header__title {
    font-size: 1.3020833333vw;
  }
}
@media (max-width: 767px) {
  .header__title {
    font-size: 2.6666666667vw;
  }
}
.header__logo {
  width: 12.7777777778vw;
  height: 3.4722222222vw;
  object-fit: contain;
}
@media (max-width: 1020px) {
  .header__logo {
    width: 16.9270833333vw;
    min-height: 4.5572916667vw;
    height: auto;
  }
}
@media (max-width: 767px) {
  .header__logo {
    width: 27.7333333333vw;
    height: 7.4666666667vw;
  }
}
.header__nav {
  position: fixed;
  top: 1.3888888889vw;
  right: 1.6666666667vw;
  display: flex;
  align-items: center;
  gap: 1.1111111111vw;
  padding: 0.5555555556vw 1.1111111111vw;
  background-color: var(--clr-bg);
  border-radius: 4.1666666667vw;
  visibility: hidden;
  transition: 0.3s;
}
@media (min-width: 1021px) {
  .header__nav {
    opacity: 0;
  }
}
@media (max-width: 1020px) {
  .header__nav {
    top: 0;
    right: 0;
    padding: 1.5625vw;
    border-radius: 0 3.125vw 0 3.125vw;
    gap: 1.0416666667vw;
    opacity: 1;
    visibility: visible;
  }
}
@media (max-width: 767px) {
  .header__nav {
    display: none;
  }
}
.header__nav.is-active {
  opacity: 1;
  visibility: visible;
}
.header__nav-list {
  display: flex;
  gap: 0.8333333333vw;
}
@media (max-width: 1020px) {
  .header__nav-list {
    gap: 0;
  }
}
.header__nav-item {
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.0347222222vw;
  padding: 0.2777777778vw 0.5555555556vw;
  border-radius: 1.6666666667vw;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .header__nav-item {
    font-size: 2.0833333333vw;
    padding: 0.5208333333vw 1.0416666667vw;
    border-radius: 3.125vw;
  }
}
.header__nav-item:hover {
  background-color: var(--clr-black);
  color: var(--clr-white);
}
.header__nav-cta {
  padding: 0.6944444444vw 1.1111111111vw;
  border-radius: 1.6666666667vw;
  background-color: var(--clr-black);
  color: var(--clr-white);
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.0347222222vw;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .header__nav-cta {
    font-size: 1.8229166667vw;
    padding: 0.78125vw 3.125vw;
    border-radius: 3.125vw;
  }
}
.header__nav-cta:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}
@media (min-width: 768px) {
  .header__button {
    display: none;
  }
}
@media (max-width: 767px) {
  .header__button {
    position: relative;
    width: 6.4vw;
    height: 6.4vw;
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 999;
  }
}
@media (max-width: 767px) {
  .header__button span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6.4vw;
    height: 0.5333333333vw;
    background-color: #000000;
    transform: translateX(-50%);
  }
}
@media (max-width: 767px) {
  .header__button span:first-child {
    transform: translate(-50%, calc(-50% - 0.5rem));
    transition: transform 0.3s ease;
  }
}
@media (max-width: 767px) {
  .header__button span:nth-child(2) {
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
  }
}
@media (max-width: 767px) {
  .header__button span:last-child {
    transform: translate(-50%, calc(-50% + 0.5rem));
    transition: transform 0.3s ease;
  }
}
@media (max-width: 767px) {
  .header__button.active span:first-child {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}
@media (max-width: 767px) {
  .header__button.active span:nth-child(2) {
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .header__button.active span:last-child {
    transform: translate(-50%, -50%) rotate(45deg);
  }
}
@media (min-width: 768px) {
  .header__wrap {
    display: none;
  }
}
@media (max-width: 767px) {
  .header__wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s, visibility 0s 0.3s;
    opacity: 0;
    visibility: hidden;
  }
}
@media (max-width: 767px) {
  .header__wrap.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0s;
  }
}
@media (max-width: 767px) {
  .header__wrap.active .header__wrap-nav {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s 0.1s, visibility 0s 0.1s;
  }
}
@media (max-width: 767px) {
  .header__wrap-nav {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: var(--clr-bg);
    margin: 0 0 0 auto;
    overflow: scroll;
    opacity: 0;
    visibility: hidden;
    padding: 30.9333333333vw 6.4vw 0;
    transition: opacity 0.3s, visibility 0s 0.3s;
  }
}
@media (max-width: 767px) {
  .header__wrap-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.2666666667vw;
  }
}
@media (max-width: 767px) {
  .header__wrap-item {
    font-size: 4.8vw;
    font-weight: 700;
    line-height: 150%;
    padding: 1.0666666667vw 2.1333333333vw;
  }
}
@media (max-width: 767px) {
  .header__btn {
    padding: 4.2666666667vw 3.2vw;
    border-radius: 6.4vw;
    background-color: var(--clr-black);
    color: var(--clr-white);
    font-size: 4.8vw;
    font-weight: 700;
    line-height: 140%;
    display: inline-flex;
    justify-content: center;
    width: 87.2vw;
  }
}

.footer {
  background-color: var(--clr-black);
  color: var(--clr-white);
  padding: 2.7777777778vw 2.7777777778vw 1.1111111111vw;
}
@media (max-width: 1020px) {
  .footer {
    padding: 5.2083333333vw 5.2083333333vw 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .footer {
    padding: 6.4vw 6.4vw 2.1333333333vw;
  }
}
.footer__inner {
  max-width: 88.8888888889vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .footer__inner {
    max-width: 89.5833333333vw;
    padding: 0;
  }
}
@media (max-width: 767px) {
  .footer__inner {
    max-width: 89.3333333333vw;
    gap: 6.4vw;
  }
}
.footer__contents {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer__logo {
  width: 23.125vw;
}
@media (max-width: 1020px) {
  .footer__logo {
    width: 43.359375vw;
  }
}
@media (max-width: 767px) {
  .footer__logo {
    width: 78.6666666667vw;
  }
}
.footer__logo a {
  display: block;
}
.footer__logo img {
  width: 100%;
}
.footer__list {
  display: flex;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .footer__list {
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .footer__list {
    gap: 4.2666666667vw;
    flex-direction: column;
  }
}
.footer__link {
  font-size: 0.9722222222vw;
  font-weight: 500;
  line-height: 1.5;
  color: var(--clr-white);
  text-decoration: none;
}
@media (max-width: 1020px) {
  .footer__link {
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .footer__link {
    font-size: 3.2vw;
  }
}
.footer__link:hover {
  text-decoration: underline;
}
.footer__copyright {
  font-size: 0.6944444444vw;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 1020px) {
  .footer__copyright {
    font-size: 1.3020833333vw;
  }
}
@media (max-width: 767px) {
  .footer__copyright {
    font-size: 2.6666666667vw;
  }
}

.layout {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.layout__main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout__footer {
  margin-top: auto;
}

.breadcrumb {
  padding: 1.3888888889vw 0;
  font-size: 0.9722222222vw;
}
@media (max-width: 1020px) {
  .breadcrumb {
    padding: 1.0416666667vw 0 3.125vw;
  }
}
@media (max-width: 767px) {
  .breadcrumb {
    padding: 4.2666666667vw 0;
  }
}
.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 94.4444444444vw;
  margin: 0 auto;
}
@media (max-width: 1020px) {
  .breadcrumb__list {
    max-width: 89.5833333333vw;
  }
}
@media (max-width: 767px) {
  .breadcrumb__list {
    max-width: 89.3333333333vw;
  }
}
.breadcrumb__item {
  display: flex;
  align-items: center;
}
.breadcrumb__item:not(:last-child)::after {
  content: ">";
  margin: 0 0.6944444444vw;
  font-size: 0.9722222222vw;
}
@media (max-width: 1020px) {
  .breadcrumb__item:not(:last-child)::after {
    margin: 0 1.3020833333vw;
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .breadcrumb__item:not(:last-child)::after {
    margin: 0 2.6666666667vw;
    font-size: 3.7333333333vw;
  }
}
.breadcrumb__item:last-child .breadcrumb__current {
  color: var(--clr-gray4);
  text-decoration: none;
}
.breadcrumb__link {
  color: var(--clr-black);
  text-decoration: underline;
  transition: 0.3s;
  font-size: 0.9722222222vw;
  font-weight: 500;
  line-height: 150%;
}
@media (max-width: 1020px) {
  .breadcrumb__link {
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .breadcrumb__link {
    font-size: 3.7333333333vw;
  }
}
.breadcrumb__link:hover {
  opacity: 0.6;
}
.breadcrumb__current {
  color: var(--clr-black);
  text-decoration: underline;
  font-size: 0.9722222222vw;
  font-weight: 500;
  line-height: 150%;
}
@media (max-width: 1020px) {
  .breadcrumb__current {
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .breadcrumb__current {
    font-size: 3.7333333333vw;
  }
}

.button {
  --btn-bg: var(--clr-white);
  --btn-text: var(--clr-black);
  --btn-border: var(--clr-white);
  --btn-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  --btn-shadow-hover: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  padding: 0.8em 1em;
  display: grid;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
.button:hover {
  box-shadow: var(--btn-shadow-hover);
}

.button__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.button {
  /**
   * theme
   */
  /**
   * size
   */
}
.button.-prime {
  --btn-bg: var(--clr-prime);
  --btn-text: var(--clr-white);
  --btn-border: var(--clr-prime);
}
.button.-second {
  --btn-bg: var(--clr-second);
  --btn-text: var(--clr-black);
  --btn-border: var(--clr-second);
}
.button.-small {
  padding: 0.5em 0.5em;
}
.button.-large {
  padding: 1.5em 2em;
}

.card {
  background-color: var(--clr-imput-default);
  padding: 5.5555555556vw 8.3333333333vw;
  position: relative;
}
@media (max-width: 1020px) {
  .card {
    padding: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .card {
    padding: 10.6666666667vw 5.3333333333vw 12.8vw;
  }
}
.card__inner {
  background-color: var(--clr-white);
  border-radius: 1.6666666667vw;
  padding: 5.5555555556vw 6.25vw 0;
  position: relative;
}
@media (max-width: 1020px) {
  .card__inner {
    padding: 5.2083333333vw 5.2083333333vw 0;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .card__inner {
    padding: 10.6666666667vw 6.4vw 0;
    border-radius: 6.4vw;
  }
}
.card__content {
  display: flex;
  flex-direction: column;
  gap: 3.3333333333vw;
  align-items: flex-start;
  padding-bottom: 5.5555555556vw;
}
@media (max-width: 1020px) {
  .card__content {
    gap: 5.2083333333vw;
    padding-bottom: 10.4166666667vw;
  }
}
@media (max-width: 767px) {
  .card__content {
    gap: 10.6666666667vw;
    padding-bottom: 34.1333333333vw;
  }
}
.card__title {
  display: inline;
  margin: 0 auto;
  font-size: 3.3333333333vw;
  font-weight: 900;
  line-height: 1.2;
  color: var(--clr-black);
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #ffd400 75.83%);
}
@media (max-width: 1020px) {
  .card__title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .card__title {
    font-size: 6.4vw;
  }
}
.card__list {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .card__list {
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .card__list {
    gap: 2.1333333333vw;
  }
}
.card__list-item {
  display: flex;
  align-items: center;
  gap: 0.5555555556vw;
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .card__list-item {
    gap: 1.0416666667vw;
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .card__list-item {
    font-size: 4.8vw;
  }
}
.card__list-item img {
  width: 1.6666666667vw;
  height: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .card__list-item img {
    width: 3.125vw;
    height: 3.125vw;
    margin: 1.0416666667vw;
  }
}
.card__desc {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .card__desc {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .card__desc {
    font-size: 4.2666666667vw;
  }
}
.card__image {
  width: 22.0138888889vw;
  height: 17.8472222222vw;
  position: absolute;
  bottom: 0;
  right: 6.25vw;
}
@media (max-width: 1020px) {
  .card__image {
    width: 19.2708333333vw;
    height: 15.625vw;
    bottom: 0;
    right: 1.3020833333vw;
  }
}
@media (max-width: 767px) {
  .card__image {
    width: 34.1333333333vw;
    height: 27.7333333333vw;
    bottom: 0;
    right: 6.4vw;
  }
}
.card__btn {
  padding: 0.8333333333vw 2.7777777778vw;
  border-radius: 6.875vw;
  background-color: var(--clr-black);
  color: var(--clr-white);
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 150%;
  transition: 0.3s;
}
.card__btn:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}

.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "fuji-icons" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon.-up:before {
  content: "\e900";
}
.icon.-arrow-forward:before {
  content: "\e901";
}
.icon.-arrow-back:before {
  content: "\e902";
}
.icon.-backward:before {
  content: "\e903";
}
.icon.-forward:before {
  content: "\e904";
}
.icon.-car:before {
  content: "\e905";
}
.icon.-trash-x:before {
  content: "\e906";
}
.icon.-sun:before {
  content: "\e907";
}
.icon.-crawn:before {
  content: "\e908";
}
.icon.-trash:before {
  content: "\e909";
}
.icon.-home:before {
  content: "\e90a";
}
.icon.-star-o:before {
  content: "\e90b";
}
.icon.-close:before {
  content: "\e90c";
}
.icon.-left-v:before {
  content: "\e90d";
}
.icon.-right-v:before {
  content: "\e90e";
}
.icon.-plus:before {
  content: "\e90f";
}
.icon.-minus:before {
  content: "\e910";
}
.icon.-first:before {
  content: "\e911";
}
.icon.-last:before {
  content: "\e912";
}
.icon.-left:before {
  content: "\e913";
}
.icon.-right:before {
  content: "\e914";
}
.icon.-down:before {
  content: "\e915";
}
.icon.-question:before {
  content: "\e916";
}
.icon.-box:before {
  content: "\e918";
}
.icon.-business:before {
  content: "\e919";
}
.icon.-shop:before {
  content: "\e91a";
}
.icon.-user:before {
  content: "\e91b";
}
.icon.-cart:before {
  content: "\e91c";
}
.icon.-lang:before {
  content: "\e91d";
}
.icon.-search:before {
  content: "\e91e";
}
.icon.-check:before {
  content: "\e91f";
}
.icon.-info:before {
  content: "\e920";
}
.icon.-backspace:before {
  content: "\e921";
}
.icon.-star:before {
  content: "\e922";
}
.icon.-badge-star:before {
  content: "\e923";
}
.icon.-badge-check:before {
  content: "\e924";
}
.icon.-tire:before {
  content: "\e917";
}
.icon.-size-2 {
  font-size: 2px;
}
.icon.-size-4 {
  font-size: 4px;
}
.icon.-size-6 {
  font-size: 6px;
}
.icon.-size-8 {
  font-size: 8px;
}
.icon.-size-10 {
  font-size: 10px;
}
.icon.-size-12 {
  font-size: 12px;
}
.icon.-size-14 {
  font-size: 14px;
}
.icon.-size-16 {
  font-size: 16px;
}
.icon.-size-18 {
  font-size: 18px;
}
.icon.-size-20 {
  font-size: 20px;
}
.icon.-size-22 {
  font-size: 22px;
}
.icon.-size-24 {
  font-size: 24px;
}
.icon.-size-26 {
  font-size: 26px;
}
.icon.-size-28 {
  font-size: 28px;
}
.icon.-size-30 {
  font-size: 30px;
}
.icon.-size-32 {
  font-size: 32px;
}
.icon.-size-34 {
  font-size: 34px;
}
.icon.-size-36 {
  font-size: 36px;
}
.icon.-size-38 {
  font-size: 38px;
}
.icon.-size-40 {
  font-size: 40px;
}

.link {
  --link-color: #000;
  --link-bg-color: #fff;
  --link-border-color: #ccc;
  --link-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  color: var(--link-color);
  background: var(--link-bg-color);
  display: flex;
  align-items: center;
}
.link__title {
  white-space: pre;
}
.link.-nav-main {
  font-size: 14px;
  font-weight: 600;
  padding: 15px 0;
  border-bottom: 1px solid var(--link-border-color);
  justify-content: space-between;
}
.link.-nav-sub {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  gap: 4px;
  border-radius: 2px;
  box-shadow: var(--link-shadow);
}
.link.-sp-header {
  font-weight: 600;
  padding: 8px;
}

/**
 * Colors
==================== */
/**
 * Breakpoints
 ==================== */
/**
 * Design Sizes
==================== */
/**
 * Spacing Units
==================== */
/**
 * Font sizes
==================== */
/**
 * Font Families
==================== */
/**
 * vw変換
==================== */
/**
 * em変換
==================== */
/**
 * mixins
==================== */
.breadcrumb {
  padding: 1.3888888889vw 0;
  font-size: 0.9722222222vw;
}
@media (max-width: 1020px) {
  .breadcrumb {
    padding: 1.0416666667vw 0 3.125vw;
  }
}
@media (max-width: 767px) {
  .breadcrumb {
    padding: 4.2666666667vw 0;
  }
}
.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 94.4444444444vw;
  margin: 0 auto;
}
@media (max-width: 1020px) {
  .breadcrumb__list {
    max-width: 89.5833333333vw;
  }
}
@media (max-width: 767px) {
  .breadcrumb__list {
    max-width: 89.3333333333vw;
  }
}
.breadcrumb__item {
  display: flex;
  align-items: center;
}
.breadcrumb__item:not(:last-child)::after {
  content: ">";
  margin: 0 0.6944444444vw;
  font-size: 0.9722222222vw;
}
@media (max-width: 1020px) {
  .breadcrumb__item:not(:last-child)::after {
    margin: 0 1.3020833333vw;
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .breadcrumb__item:not(:last-child)::after {
    margin: 0 2.6666666667vw;
    font-size: 3.7333333333vw;
  }
}
.breadcrumb__item:last-child .breadcrumb__current {
  color: var(--clr-gray4);
  text-decoration: none;
}
.breadcrumb__link {
  color: var(--clr-black);
  text-decoration: underline;
  transition: 0.3s;
  font-size: 0.9722222222vw;
  font-weight: 500;
  line-height: 150%;
}
@media (max-width: 1020px) {
  .breadcrumb__link {
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .breadcrumb__link {
    font-size: 3.7333333333vw;
  }
}
.breadcrumb__link:hover {
  opacity: 0.6;
}
.breadcrumb__current {
  color: var(--clr-black);
  text-decoration: underline;
  font-size: 0.9722222222vw;
  font-weight: 500;
  line-height: 150%;
}
@media (max-width: 1020px) {
  .breadcrumb__current {
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .breadcrumb__current {
    font-size: 3.7333333333vw;
  }
}

.button {
  --btn-bg: var(--clr-white);
  --btn-text: var(--clr-black);
  --btn-border: var(--clr-white);
  --btn-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  --btn-shadow-hover: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  padding: 0.8em 1em;
  display: grid;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
.button:hover {
  box-shadow: var(--btn-shadow-hover);
}

.button__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.button {
  /**
   * theme
   */
  /**
   * size
   */
}
.button.-prime {
  --btn-bg: var(--clr-prime);
  --btn-text: var(--clr-white);
  --btn-border: var(--clr-prime);
}
.button.-second {
  --btn-bg: var(--clr-second);
  --btn-text: var(--clr-black);
  --btn-border: var(--clr-second);
}
.button.-small {
  padding: 0.5em 0.5em;
}
.button.-large {
  padding: 1.5em 2em;
}

.card {
  background-color: var(--clr-imput-default);
  padding: 5.5555555556vw 8.3333333333vw;
  position: relative;
}
@media (max-width: 1020px) {
  .card {
    padding: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .card {
    padding: 10.6666666667vw 5.3333333333vw 12.8vw;
  }
}
.card__inner {
  background-color: var(--clr-white);
  border-radius: 1.6666666667vw;
  padding: 5.5555555556vw 6.25vw 0;
  position: relative;
}
@media (max-width: 1020px) {
  .card__inner {
    padding: 5.2083333333vw 5.2083333333vw 0;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .card__inner {
    padding: 10.6666666667vw 6.4vw 0;
    border-radius: 6.4vw;
  }
}
.card__content {
  display: flex;
  flex-direction: column;
  gap: 3.3333333333vw;
  align-items: flex-start;
  padding-bottom: 5.5555555556vw;
}
@media (max-width: 1020px) {
  .card__content {
    gap: 5.2083333333vw;
    padding-bottom: 10.4166666667vw;
  }
}
@media (max-width: 767px) {
  .card__content {
    gap: 10.6666666667vw;
    padding-bottom: 34.1333333333vw;
  }
}
.card__title {
  display: inline;
  margin: 0 auto;
  font-size: 3.3333333333vw;
  font-weight: 900;
  line-height: 1.2;
  color: var(--clr-black);
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #ffd400 75.83%);
}
@media (max-width: 1020px) {
  .card__title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .card__title {
    font-size: 6.4vw;
  }
}
.card__list {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .card__list {
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .card__list {
    gap: 2.1333333333vw;
  }
}
.card__list-item {
  display: flex;
  align-items: center;
  gap: 0.5555555556vw;
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .card__list-item {
    gap: 1.0416666667vw;
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .card__list-item {
    font-size: 4.8vw;
  }
}
.card__list-item img {
  width: 1.6666666667vw;
  height: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .card__list-item img {
    width: 3.125vw;
    height: 3.125vw;
    margin: 1.0416666667vw;
  }
}
.card__desc {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .card__desc {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .card__desc {
    font-size: 4.2666666667vw;
  }
}
.card__image {
  width: 22.0138888889vw;
  height: 17.8472222222vw;
  position: absolute;
  bottom: 0;
  right: 6.25vw;
}
@media (max-width: 1020px) {
  .card__image {
    width: 19.2708333333vw;
    height: 15.625vw;
    bottom: 0;
    right: 1.3020833333vw;
  }
}
@media (max-width: 767px) {
  .card__image {
    width: 34.1333333333vw;
    height: 27.7333333333vw;
    bottom: 0;
    right: 6.4vw;
  }
}
.card__btn {
  padding: 0.8333333333vw 2.7777777778vw;
  border-radius: 6.875vw;
  background-color: var(--clr-black);
  color: var(--clr-white);
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 150%;
  transition: 0.3s;
}
.card__btn:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}

.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "fuji-icons" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon.-up:before {
  content: "\e900";
}
.icon.-arrow-forward:before {
  content: "\e901";
}
.icon.-arrow-back:before {
  content: "\e902";
}
.icon.-backward:before {
  content: "\e903";
}
.icon.-forward:before {
  content: "\e904";
}
.icon.-car:before {
  content: "\e905";
}
.icon.-trash-x:before {
  content: "\e906";
}
.icon.-sun:before {
  content: "\e907";
}
.icon.-crawn:before {
  content: "\e908";
}
.icon.-trash:before {
  content: "\e909";
}
.icon.-home:before {
  content: "\e90a";
}
.icon.-star-o:before {
  content: "\e90b";
}
.icon.-close:before {
  content: "\e90c";
}
.icon.-left-v:before {
  content: "\e90d";
}
.icon.-right-v:before {
  content: "\e90e";
}
.icon.-plus:before {
  content: "\e90f";
}
.icon.-minus:before {
  content: "\e910";
}
.icon.-first:before {
  content: "\e911";
}
.icon.-last:before {
  content: "\e912";
}
.icon.-left:before {
  content: "\e913";
}
.icon.-right:before {
  content: "\e914";
}
.icon.-down:before {
  content: "\e915";
}
.icon.-question:before {
  content: "\e916";
}
.icon.-box:before {
  content: "\e918";
}
.icon.-business:before {
  content: "\e919";
}
.icon.-shop:before {
  content: "\e91a";
}
.icon.-user:before {
  content: "\e91b";
}
.icon.-cart:before {
  content: "\e91c";
}
.icon.-lang:before {
  content: "\e91d";
}
.icon.-search:before {
  content: "\e91e";
}
.icon.-check:before {
  content: "\e91f";
}
.icon.-info:before {
  content: "\e920";
}
.icon.-backspace:before {
  content: "\e921";
}
.icon.-star:before {
  content: "\e922";
}
.icon.-badge-star:before {
  content: "\e923";
}
.icon.-badge-check:before {
  content: "\e924";
}
.icon.-tire:before {
  content: "\e917";
}
.icon.-size-2 {
  font-size: 2px;
}
.icon.-size-4 {
  font-size: 4px;
}
.icon.-size-6 {
  font-size: 6px;
}
.icon.-size-8 {
  font-size: 8px;
}
.icon.-size-10 {
  font-size: 10px;
}
.icon.-size-12 {
  font-size: 12px;
}
.icon.-size-14 {
  font-size: 14px;
}
.icon.-size-16 {
  font-size: 16px;
}
.icon.-size-18 {
  font-size: 18px;
}
.icon.-size-20 {
  font-size: 20px;
}
.icon.-size-22 {
  font-size: 22px;
}
.icon.-size-24 {
  font-size: 24px;
}
.icon.-size-26 {
  font-size: 26px;
}
.icon.-size-28 {
  font-size: 28px;
}
.icon.-size-30 {
  font-size: 30px;
}
.icon.-size-32 {
  font-size: 32px;
}
.icon.-size-34 {
  font-size: 34px;
}
.icon.-size-36 {
  font-size: 36px;
}
.icon.-size-38 {
  font-size: 38px;
}
.icon.-size-40 {
  font-size: 40px;
}

.link {
  --link-color: #000;
  --link-bg-color: #fff;
  --link-border-color: #ccc;
  --link-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  color: var(--link-color);
  background: var(--link-bg-color);
  display: flex;
  align-items: center;
}
.link__title {
  white-space: pre;
}
.link.-nav-main {
  font-size: 14px;
  font-weight: 600;
  padding: 15px 0;
  border-bottom: 1px solid var(--link-border-color);
  justify-content: space-between;
}
.link.-nav-sub {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  gap: 4px;
  border-radius: 2px;
  box-shadow: var(--link-shadow);
}
.link.-sp-header {
  font-weight: 600;
  padding: 8px;
}

.top-main__visual {
  position: relative;
  padding: 2.7777777778vw 2.7777777778vw 0;
}
@media (max-width: 1020px) {
  .top-main__visual {
    padding: 5.2083333333vw 5.2083333333vw 0;
  }
}
@media (max-width: 767px) {
  .top-main__visual {
    padding: 18.4vw 0 0;
  }
}
.top-main__visual-swiper {
  width: 94.4444444444vw;
  height: 48.6111111111vw;
}
@media (max-width: 1020px) {
  .top-main__visual-swiper {
    width: 100%;
    height: 93.75vw;
  }
}
@media (max-width: 767px) {
  .top-main__visual-swiper {
    height: 160vw;
  }
}
.top-main__visual-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top-main__visual-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
  align-items: flex-start;
}
@media (max-width: 1020px) {
  .top-main__visual-content {
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-main__visual-content {
    gap: 3.4666666667vw;
  }
}
.top-main__visual-content {
  position: absolute;
  top: 12.5vw;
  left: 5.2777777778vw;
}
@media (max-width: 1020px) {
  .top-main__visual-content {
    top: 21.875vw;
    left: 6.7708333333vw;
  }
}
@media (max-width: 767px) {
  .top-main__visual-content {
    top: 29.3333333333vw;
    left: 2.9333333333vw;
  }
}
.top-main__catchcopy {
  margin-left: 4.1666666667vw;
}
@media (max-width: 1020px) {
  .top-main__catchcopy {
    display: none;
  }
}
@media (max-width: 767px) {
  .top-main__catchcopy {
    display: block;
    margin-left: 4.8vw;
  }
}
.top-main__catchcopy p {
  color: var(--clr-white);
  font-size: 3.8888888889vw;
  font-weight: 900;
  line-height: 150%;
  letter-spacing: 0.1388888889vw;
  filter: drop-shadow(0px 0px 1.3888888889vw rgba(0, 0, 0, 0.7)) drop-shadow(0px 0.1388888889vw 0.8333333333vw rgba(0, 0, 0, 0.6));
}
@media (max-width: 1020px) {
  .top-main__catchcopy p {
    font-size: 6.25vw;
    filter: drop-shadow(0px 0px 2.6041666667vw rgba(0, 0, 0, 0.7)) drop-shadow(0px 0.2604166667vw 1.5625vw rgba(0, 0, 0, 0.6));
  }
}
@media (max-width: 767px) {
  .top-main__catchcopy p {
    font-size: 9.6vw;
    filter: drop-shadow(0px 0px 2.6666666667vw rgba(0, 0, 0, 0.7)) drop-shadow(0px 0.5333333333vw 1.6vw rgba(0, 0, 0, 0.6));
    letter-spacing: 0.5333333333vw;
  }
}
.top-main__catchcopy p span {
  font-size: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-main__catchcopy p span {
    font-size: 2.8645833333vw;
  }
}
@media (max-width: 767px) {
  .top-main__catchcopy p span {
    font-size: 6.4vw;
  }
}
.top-main__catchcopy.-tb {
  display: none;
}
@media (max-width: 1020px) {
  .top-main__catchcopy.-tb {
    display: block;
    margin-left: 6.9010416667vw;
  }
}
@media (max-width: 767px) {
  .top-main__catchcopy.-tb {
    display: none;
  }
}
.top-main__ranking {
  width: 32.8472222222vw;
  height: 6.3888888889vw;
}
@media (max-width: 1020px) {
  .top-main__ranking {
    width: 61.5885416667vw;
    height: 11.9791666667vw;
  }
}
@media (max-width: 767px) {
  .top-main__ranking {
    width: 94.4vw;
    height: 24.8vw;
  }
}
.top-main__menu {
  display: flex;
  align-items: center;
  gap: 1.1111111111vw;
  padding: 0.5555555556vw 1.1111111111vw;
  background-color: var(--clr-bg);
  border-radius: 4.1666666667vw;
}
@media (max-width: 1020px) {
  .top-main__menu {
    display: none;
  }
}
.top-main__menu-list {
  display: flex;
  gap: 0.8333333333vw;
}
.top-main__menu-item {
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.0347222222vw;
  padding: 0.2777777778vw 0.5555555556vw;
  border-radius: 1.6666666667vw;
  transition: 0.3s;
}
.top-main__menu-item:hover {
  background-color: var(--clr-black);
  color: var(--clr-white);
}
.top-main__menu-cta {
  padding: 0.6944444444vw 1.1111111111vw;
  border-radius: 1.6666666667vw;
  background-color: var(--clr-black);
  color: var(--clr-white);
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.0347222222vw;
  transition: 0.3s;
}
.top-main__menu-cta:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}
.top-main__cta {
  padding: 0.8333333333vw 2.7777777778vw;
  border-radius: 6.875vw;
  border: 1px solid var(--clr-black);
  background-color: var(--clr-black);
  color: var(--clr-white);
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 150%;
  position: absolute;
  top: 6.9444444444vw;
  right: 4.4444444444vw;
  z-index: 10;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .top-main__cta {
    display: none;
  }
}
.top-main__cta:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}
.top-main__note {
  position: absolute;
  bottom: 1.6666666667vw;
  left: 4.4444444444vw;
  width: 55vw;
  padding: 0.6944444444vw;
  border-radius: 1.1111111111vw;
  background-color: rgba(34, 34, 34, 0.6);
  color: var(--clr-white);
  font-size: 0.8333333333vw;
  font-weight: 400;
  z-index: 1;
}
@media (max-width: 1020px) {
  .top-main__note {
    bottom: 1.6927083333vw;
    left: 6.7708333333vw;
    width: 41.2760416667vw;
    padding: 1.3020833333vw;
    border-radius: 2.0833333333vw;
    font-size: 1.3020833333vw;
  }
}
@media (max-width: 767px) {
  .top-main__note {
    display: none;
  }
}
.top-main__number {
  width: 45.7638888889vw;
  height: 5.8333333333vw;
  display: flex;
  margin: 3.0555555556vw auto 0;
}
@media (max-width: 1020px) {
  .top-main__number {
    width: 61.9791666667vw;
    height: 8.7239583333vw;
    margin: 6.25vw auto 0;
  }
}
@media (max-width: 767px) {
  .top-main__number {
    display: none;
  }
}

.top-about {
  position: relative;
  padding: 5.5555555556vw 0 6.9444444444vw;
}
@media (max-width: 1020px) {
  .top-about {
    padding: 5.859375vw 0 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-about {
    padding: 0;
  }
}
.top-about__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.8888888889vw;
  padding: 8.3333333333vw 0;
}
@media (max-width: 1020px) {
  .top-about__inner {
    padding: 15.625vw 0;
    gap: 3.7760416667vw;
  }
}
@media (max-width: 767px) {
  .top-about__inner {
    padding: 10.6666666667vw 0;
    gap: 6.4vw;
  }
}
.top-about__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/img_message-bg.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.6;
  z-index: -1;
}
@media (max-width: 767px) {
  .top-about__inner::before {
    background-image: url("../../assets/img/img_message-bg-sp.webp");
  }
}
.top-about__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4861111111vw;
}
@media (max-width: 1020px) {
  .top-about__header {
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .top-about__header {
    gap: 0.8vw;
  }
}
.top-about__header .top-about__logo {
  width: 26.4583333333vw;
  height: 7.1527777778vw;
}
@media (max-width: 1020px) {
  .top-about__header .top-about__logo {
    width: 32.421875vw;
    height: 8.7239583333vw;
  }
}
@media (max-width: 767px) {
  .top-about__header .top-about__logo {
    width: 39.2vw;
    height: 11.2vw;
  }
}
.top-about__header .top-about__title {
  font-size: 2.2222222222vw;
  font-weight: 700;
  color: var(--clr-black);
  line-height: 1.5;
}
@media (max-width: 1020px) {
  .top-about__header .top-about__title {
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-about__header .top-about__title {
    font-size: 4.2666666667vw;
  }
}
.top-about__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3888888889vw;
}
@media (max-width: 1020px) {
  .top-about__content {
    gap: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .top-about__content {
    gap: 4.2666666667vw;
  }
}
.top-about__lead {
  font-family: "Noto Sans CJK JP", sans-serif;
  font-size: 2.7777777778vw;
  font-weight: 700;
  color: var(--clr-black);
  line-height: 1.8;
  text-align: center;
}
@media (max-width: 1020px) {
  .top-about__lead {
    font-size: 3.6458333333vw;
  }
}
@media (max-width: 767px) {
  .top-about__lead {
    font-size: 5.3333333333vw;
  }
}
.top-about__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3888888889vw;
}
@media (max-width: 1020px) {
  .top-about__flow {
    gap: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .top-about__flow {
    gap: 4.2666666667vw;
  }
}
.top-about__flow-text {
  display: flex;
  align-items: center;
  gap: 0.5555555556vw;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 1020px) {
  .top-about__flow-text {
    gap: 0;
  }
}
.top-about__flow-text span {
  font-size: 2.7777777778vw;
  font-weight: 700;
  color: var(--clr-black);
  line-height: 180%;
}
@media (max-width: 1020px) {
  .top-about__flow-text span {
    font-size: 3.6458333333vw;
  }
}
@media (max-width: 767px) {
  .top-about__flow-text span {
    font-size: 5.3333333333vw;
  }
}
.top-about__highlight {
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #FFD400 75.83%);
}
.top-about__flow-desc {
  display: flex;
  align-items: baseline;
  gap: 1.1111111111vw;
  justify-content: center;
}
@media (max-width: 1020px) {
  .top-about__flow-desc {
    gap: 0;
  }
}
.top-about__flow-desc span {
  font-family: "Noto Sans CJK JP", sans-serif;
  font-size: 2.7777777778vw;
  font-weight: 700;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-about__flow-desc span {
    font-size: 3.6458333333vw;
  }
}
@media (max-width: 767px) {
  .top-about__flow-desc span {
    font-size: 5.3333333333vw;
  }
}
.top-about__facility {
  position: relative;
  z-index: 2;
  background: var(--clr-bluegray);
  border-radius: 1.6666666667vw;
  padding: 2.7777777778vw 0;
  max-width: 94.4444444444vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.3333333333vw;
  margin-top: 6.9444444444vw;
}
@media (max-width: 1020px) {
  .top-about__facility {
    padding: 5.2083333333vw 10.4166666667vw;
    gap: 3.125vw;
    max-width: 89.5833333333vw;
    margin-top: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-about__facility {
    padding: 10.6666666667vw 5.3333333333vw;
    gap: 6.4vw;
    max-width: 94.6666666667vw;
    margin-top: 5.3333333333vw;
  }
}
.top-about__facility-title {
  font-size: 2.7777777778vw;
  font-weight: 700;
  color: var(--clr-black);
  line-height: 1.5;
}
@media (max-width: 1020px) {
  .top-about__facility-title {
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-about__facility-title {
    font-size: 8.5333333333vw;
  }
}
.top-about__facility-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.6666666667vw;
  width: 80.625vw;
  height: 26.5277777778vw;
  align-items: self-start;
}
@media (max-width: 1020px) {
  .top-about__facility-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.6041666667vw;
    width: 68.75vw;
    height: 42.578125vw;
    place-items: flex-start;
  }
}
@media (max-width: 767px) {
  .top-about__facility-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10.6666666667vw 5.3333333333vw;
    width: 78.6666666667vw;
    height: 189.6vw;
  }
}
@media (min-width: 1021px) {
  .top-about__facility-grid .top-about__facility-card:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
  }
}
@media (min-width: 1021px) {
  .top-about__facility-grid .top-about__facility-card:nth-child(7) {
    grid-column: 3;
    grid-row: 2;
  }
}
@media (min-width: 1021px) {
  .top-about__facility-grid .top-about__facility-card:nth-child(8) {
    grid-column: 4;
    grid-row: 2;
  }
}
.top-about__facility-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4166666667vw;
}
@media (max-width: 1020px) {
  .top-about__facility-card {
    gap: 0.78125vw;
  }
}
@media (max-width: 767px) {
  .top-about__facility-card {
    gap: 1.6vw;
  }
}
.top-about__facility-card img {
  width: 100%;
  height: 9.0277777778vw;
  object-fit: cover;
  border-radius: 1.3888888889vw;
}
@media (max-width: 1020px) {
  .top-about__facility-card img {
    height: 13.0208333333vw;
    border-radius: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .top-about__facility-card img {
    height: 26.6666666667vw;
    border-radius: 5.3333333333vw;
  }
}
.top-about__facility-label {
  font-size: 1.25vw;
  font-weight: 500;
  color: var(--clr-black);
  line-height: 1.5;
  letter-spacing: 1px;
  text-align: center;
}
@media (max-width: 1020px) {
  .top-about__facility-label {
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .top-about__facility-label {
    font-size: 4.2666666667vw;
  }
}
@media (max-width: 1020px) {
  .top-about__facility-label span {
    font-size: 1.3020833333vw;
  }
}
@media (max-width: 767px) {
  .top-about__facility-label span {
    font-size: 3.2vw;
  }
}
.top-about__facility-note {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.9444444444vw;
  font-weight: 700;
  color: var(--clr-black);
  line-height: 1.5;
}
@media (max-width: 1020px) {
  .top-about__facility-note {
    font-size: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .top-about__facility-note {
    font-size: 6.4vw;
    text-align: center;
  }
}

.top-flow {
  background-color: var(--clr-gray2);
  padding: 6.9444444444vw 8.3333333333vw;
  position: relative;
}
@media (max-width: 1020px) {
  .top-flow {
    padding: 10.4166666667vw 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-flow {
    padding: 10.6666666667vw 5.3333333333vw;
  }
}
.top-flow::before {
  content: "";
  position: absolute;
  bottom: -2.1527777778vw;
  right: 50%;
  transform: translateX(50%);
  width: 3.6805555556vw;
  height: 2.7777777778vw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='40' viewBox='0 0 53 40' fill='none'%3E%3Cpath d='M22.7377 38.0476C24.8055 40.6508 28.1637 40.6508 30.2315 38.0476L51.4057 11.3914C52.9276 9.47547 53.3743 6.62241 52.5471 4.12339C51.72 1.62436 49.8011 -1.38496e-07 47.6506 -2.3287e-07L5.30206 -2.09131e-06C3.16809 -2.18496e-06 1.23263 1.62436 0.405506 4.12339C-0.421612 6.62241 0.0415722 9.47546 1.54693 11.3914L22.7212 38.0476L22.7377 38.0476Z' fill='%23DADADA'/%3E%3C/svg%3E") center/53px no-repeat;
  background-repeat: no-repeat;
}
@media (max-width: 1020px) {
  .top-flow::before {
    bottom: -4.0364583333vw;
    width: 5.2083333333vw;
    height: 6.7708333333vw;
  }
}
@media (max-width: 767px) {
  .top-flow::before {
    bottom: -5.8666666667vw;
    width: 14.1333333333vw;
    height: 10.6666666667vw;
  }
}
.top-flow__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.5555555556vw;
}
@media (max-width: 1020px) {
  .top-flow__inner {
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-flow__inner {
    gap: 10.6666666667vw;
  }
}
.top-flow__header {
  display: flex;
  align-items: center;
  gap: 0.8333333333vw;
}
@media (max-width: 1020px) {
  .top-flow__header {
    gap: 0;
  }
}
.top-flow__header img {
  width: 7.9166666667vw;
  height: 7.9166666667vw;
  margin-top: -4.0972222222vw;
  margin-left: -10.9722222222vw;
}
@media (max-width: 1020px) {
  .top-flow__header img {
    width: 5.2083333333vw;
    height: 5.2083333333vw;
    margin-top: -9.8958333333vw;
    margin-left: -2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .top-flow__header img {
    display: none;
  }
}
.top-flow__title {
  font-size: 1.6666666667vw;
  font-weight: 700;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-flow__title {
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-flow__title {
    font-size: 4.8vw;
  }
}
.top-flow__content {
  display: flex;
  gap: 4.4444444444vw;
}
@media (max-width: 1020px) {
  .top-flow__content {
    gap: 8.3333333333vw;
    flex-direction: column;
    width: 89.5833333333vw;
  }
}
@media (max-width: 767px) {
  .top-flow__content {
    gap: 10.6666666667vw;
    width: 89.3333333333vw;
  }
}
.top-flow__card {
  display: flex;
  flex-direction: column;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-flow__card {
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-flow__card {
    gap: 6.4vw;
  }
}
.top-flow__card-header {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-flow__card-header {
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .top-flow__card-header {
    gap: 2.1333333333vw;
    align-items: center;
  }
}
.top-flow__card-label {
  font-size: 1.3888888889vw;
  font-weight: 500;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-flow__card-label {
    font-size: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .top-flow__card-label {
    font-size: 4.2666666667vw;
  }
}
.top-flow__card-title {
  font-size: 2.2222222222vw;
  font-weight: 700;
  color: var(--clr-black);
  line-height: 1.5;
  letter-spacing: -0.03em;
}
@media (max-width: 1020px) {
  .top-flow__card-title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-flow__card-title {
    font-size: 7.4666666667vw;
    text-align: center;
  }
}
.top-flow__card-body {
  display: flex;
  align-items: center;
  gap: 1.25vw;
}
@media (max-width: 1020px) {
  .top-flow__card-body {
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .top-flow__card-body {
    gap: 2.1333333333vw;
  }
}
.top-flow__card-balloon {
  position: relative;
  background-color: var(--clr-bluegray);
  padding: 1.6666666667vw 2.2222222222vw;
  border-radius: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-flow__card-balloon {
    padding: 2.0833333333vw 3.125vw;
    border-radius: 3.125vw;
    width: 74.0885416667vw;
  }
}
@media (max-width: 767px) {
  .top-flow__card-balloon {
    padding: 4.2666666667vw 6.4vw;
    border-radius: 5.3333333333vw;
    width: 62.9333333333vw;
  }
}
.top-flow__card-balloon p {
  font-size: 1.25vw;
  font-weight: 600;
  line-height: 1.8;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-flow__card-balloon p {
    font-size: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .top-flow__card-balloon p {
    font-size: 4.8vw;
  }
}
.top-flow__card-balloon::after {
  content: "";
  position: absolute;
  right: -0.6944444444vw;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 0.8333333333vw 0 0.8333333333vw 0.9722222222vw;
  border-color: transparent transparent transparent var(--clr-bluegray);
}
@media (max-width: 1020px) {
  .top-flow__card-balloon::after {
    right: -1.0416666667vw;
    border-width: 1.5625vw 0 1.5625vw 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .top-flow__card-balloon::after {
    right: -2.1333333333vw;
    border-width: 3.2vw 0 3.2vw 3.7333333333vw;
  }
}
.top-flow__card-person {
  width: 5.5555555556vw;
  height: 5.5555555556vw;
}
@media (max-width: 1020px) {
  .top-flow__card-person {
    width: 13.0208333333vw;
    height: 13.0208333333vw;
  }
}
@media (max-width: 767px) {
  .top-flow__card-person {
    width: 21.3333333333vw;
    height: 21.3333333333vw;
  }
}

.top-service {
  padding: 6.9444444444vw 0;
  background-color: var(--clr-bluegray);
}
@media (max-width: 1020px) {
  .top-service {
    padding: 10.4166666667vw 0;
  }
}
@media (max-width: 767px) {
  .top-service {
    padding: 21.3333333333vw 5.3333333333vw 10.6666666667vw;
  }
}
.top-service__inner {
  max-width: 83.3333333333vw;
  margin: 0 auto;
  padding: 0 1.3888888889vw;
}
@media (max-width: 1020px) {
  .top-service__inner {
    max-width: 89.453125vw;
    padding: 0;
  }
}
@media (max-width: 767px) {
  .top-service__inner {
    max-width: 89.3333333333vw;
  }
}
.top-service__header {
  text-align: center;
  margin-bottom: 6.9444444444vw;
}
@media (max-width: 1020px) {
  .top-service__header {
    margin-bottom: 10.4166666667vw;
  }
}
@media (max-width: 767px) {
  .top-service__header {
    margin-bottom: 21.3333333333vw;
  }
}
.top-service__header-sub {
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
  margin-bottom: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-service__header-sub {
    font-size: 3.125vw;
    margin-bottom: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-service__header-sub {
    font-size: 4.2666666667vw;
    margin-bottom: 6.4vw;
  }
}
.top-service__title {
  font-weight: 700;
  color: #222;
  display: inline-flex;
  flex-direction: column;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-service__title {
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-service__title {
    gap: 2.1333333333vw;
  }
}
.top-service__title-main {
  font-size: 2.2222222222vw;
  line-height: 1.5;
}
@media (max-width: 1020px) {
  .top-service__title-main {
    font-size: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .top-service__title-main {
    font-size: 4.2666666667vw;
  }
}
.top-service__title-wrap {
  display: inline-flex;
}
@media (max-width: 1020px) {
  .top-service__title-wrap {
    flex-direction: column;
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-service__title-wrap {
    gap: 2.1333333333vw;
  }
}
.top-service__title-highlight {
  display: inline-flex;
  font-size: 3.3333333333vw;
  line-height: 1.2;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #FFD400 75.83%);
  padding: 0 0.6944444444vw;
}
@media (max-width: 1020px) {
  .top-service__title-highlight {
    font-size: 5.2083333333vw;
    padding: 0;
    width: fit-content;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .top-service__title-highlight {
    font-size: 8.5333333333vw;
    padding: 0 2vw;
  }
}
.top-service__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.4444444444vw;
  margin-bottom: 6.9444444444vw;
}
@media (max-width: 1020px) {
  .top-service__content {
    grid-template-columns: repeat(1, 1fr);
    gap: 7.2916666667vw;
  }
}
@media (max-width: 767px) {
  .top-service__content {
    gap: 12.8vw;
  }
}
.top-service__card {
  text-align: center;
}
@media (max-width: 1020px) {
  .top-service__card {
    display: flex;
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-service__card {
    gap: 6.4vw;
    align-items: center;
  }
}
.top-service__card-icon {
  width: 9.7222222222vw;
  height: 9.7222222222vw;
  margin: 0 auto 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-service__card-icon {
    width: 13.0208333333vw;
    height: 13.0208333333vw;
    margin: 0 auto 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-service__card-icon {
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    margin: 0;
  }
}
.top-service__card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 1020px) {
  .top-service__card-icon img {
    min-width: 13.0208333333vw;
    height: 13.0208333333vw;
  }
}
@media (max-width: 767px) {
  .top-service__card-icon img {
    min-width: 21.3333333333vw;
    height: 21.3333333333vw;
  }
}
.top-service__card-textarea {
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-service__card-textarea {
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-service__card-textarea {
    gap: 2.1333333333vw;
  }
}
.top-service__card-title {
  font-size: 2.2222222222vw;
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  text-align: left;
}
@media (max-width: 1020px) {
  .top-service__card-title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-service__card-title {
    font-size: 6.4vw;
  }
}
.top-service__card-text {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
  text-align: left;
}
@media (max-width: 1020px) {
  .top-service__card-text {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-service__card-text {
    font-size: 4.2666666667vw;
  }
}

.top-value {
  position: relative;
  height: 100%;
}
.top-value__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  z-index: -1;
}
.top-value__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/img/img_value.webp");
  background-size: cover;
  background-position: center;
  z-index: -1;
}
@media screen and (max-width: 1024px) {
  .top-value__bg {
    background-image: url("../../assets/img/img_value-tb.webp");
  }
}
@media (max-width: 767px) {
  .top-value__bg {
    background-image: url("../../assets/img/img_value-sp.webp");
  }
}

.top-trouble {
  padding: 52.4305555556vw 0 5.5555555556vw;
}
@media (max-width: 1020px) {
  .top-trouble {
    padding: 124.8697916667vw 0 10.4166666667vw;
  }
}
@media (max-width: 767px) {
  .top-trouble {
    padding: 213.3333333333vw 5.3333333333vw 12.8vw;
  }
}
.top-trouble__inner {
  max-width: 83.3333333333vw;
  margin: 0 auto;
  padding: 5.5555555556vw 6.25vw 0;
  background-color: var(--clr-bg);
  border-radius: 1.6666666667vw;
  text-align: center;
}
@media (max-width: 1020px) {
  .top-trouble__inner {
    max-width: 89.5833333333vw;
    padding: 5.2083333333vw 5.2083333333vw 10.4166666667vw;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-trouble__inner {
    max-width: 89.3333333333vw;
    padding: 10.6666666667vw 5.3333333333vw 34.1333333333vw;
    border-radius: 6.4vw;
  }
}
.top-trouble__content {
  max-width: 70.8333333333vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 3.3333333333vw;
}
@media (max-width: 1020px) {
  .top-trouble__content {
    max-width: 79.1666666667vw;
    position: relative;
    margin-top: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-trouble__content {
    max-width: 76.5333333333vw;
    margin-top: 10.6666666667vw;
  }
}
.top-trouble__title {
  font-size: 3.3333333333vw;
  font-weight: 900;
  line-height: 1.2;
  color: #222;
  display: inline;
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #FFD400 75.83%);
}
@media (max-width: 1020px) {
  .top-trouble__title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-trouble__title {
    font-size: 8.5333333333vw;
  }
}
.top-trouble__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-trouble__body {
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-trouble__body {
    gap: 6.4vw;
  }
}
.top-trouble__text {
  text-align: left;
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-trouble__text {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-trouble__text {
    font-size: 4.2666666667vw;
  }
}
.top-trouble__cta {
  display: inline-block;
  padding: 0.8333333333vw 1.6666666667vw;
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-white);
  background-color: var(--clr-black);
  border: 1px solid var(--clr-black);
  border-radius: 6.875vw;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .top-trouble__cta {
    padding: 1.5625vw 3.125vw;
    font-size: 2.6041666667vw;
    border-radius: 12.890625vw;
  }
}
@media (max-width: 767px) {
  .top-trouble__cta {
    padding: 4.2666666667vw 8.5333333333vw;
    font-size: 4.2666666667vw;
    border-radius: 26.4vw;
  }
}
.top-trouble__cta:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}
.top-trouble__image {
  width: 22.0138888889vw;
  height: 17.8472222222vw;
}
@media (max-width: 1020px) {
  .top-trouble__image {
    width: 26.0416666667vw;
    height: 21.09375vw;
    position: absolute;
    right: 2.9947916667vw;
    bottom: -10.4166666667vw;
  }
}
@media (max-width: 767px) {
  .top-trouble__image {
    width: 34.1333333333vw;
    height: 27.7333333333vw;
    position: absolute;
    right: 0;
    bottom: -34.1333333333vw;
  }
}
.top-trouble__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.top-features {
  padding: 52.4305555556vw 0 41.6666666667vw;
}
@media (max-width: 1020px) {
  .top-features {
    padding: 91.1458333333vw 0 49.4791666667vw;
  }
}
@media (max-width: 767px) {
  .top-features {
    padding: 216.5333333333vw 0 80vw;
  }
}
.top-features__inner {
  max-width: 83.3333333333vw;
  margin: 0 auto;
  padding: 0 1.3888888889vw;
}
@media (max-width: 1020px) {
  .top-features__inner {
    max-width: 89.5833333333vw;
    padding: 0;
  }
}
@media (max-width: 767px) {
  .top-features__inner {
    max-width: 89.3333333333vw;
    padding: 0;
  }
}
.top-features__title-wrapper {
  width: 58.4722222222vw;
  padding: 1.6666666667vw 0;
  text-align: center;
  background-color: var(--clr-bg);
  margin: 0 auto;
  border-radius: 1.6666666667vw 1.6666666667vw 0 0;
}
@media (max-width: 1020px) {
  .top-features__title-wrapper {
    width: 57.2916666667vw;
    padding: 2.0833333333vw 0;
    border-radius: 3.125vw 3.125vw 0 0;
  }
}
@media (max-width: 767px) {
  .top-features__title-wrapper {
    width: 76.8vw;
    padding: 4.2666666667vw 0;
    border-radius: 6.4vw 6.4vw 0 0;
  }
}
.top-features__title {
  font-size: 2.7777777778vw;
  font-weight: 700;
  line-height: 150%;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-features__title {
    font-size: 5.2083333333vw;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .top-features__title {
    font-size: 8.5333333333vw;
  }
}
.top-features__content, .top-features__function, .top-features__realization {
  padding: 5.5555555556vw 2.7777777778vw;
  background-color: var(--clr-bg);
  border-radius: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-features__content, .top-features__function, .top-features__realization {
    padding: 5.2083333333vw 3.125vw;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-features__content, .top-features__function, .top-features__realization {
    padding: 6.4vw 5.3333333333vw;
    border-radius: 6.4vw;
  }
}
.top-features__content {
  display: flex;
  flex-direction: column;
  gap: 5.5555555556vw;
}
@media (max-width: 1020px) {
  .top-features__content {
    gap: 10.4166666667vw;
  }
}
@media (max-width: 767px) {
  .top-features__content {
    gap: 10.6666666667vw;
  }
}
.top-features__item {
  display: flex;
  gap: 2.7777777778vw;
  align-items: center;
  flex-direction: row-reverse;
}
@media (max-width: 1020px) {
  .top-features__item {
    gap: 3.125vw;
    flex-direction: column-reverse;
  }
}
@media (max-width: 767px) {
  .top-features__item {
    gap: 10.6666666667vw;
    padding-top: 12.8vw;
  }
}
.top-features__item-image {
  flex-shrink: 0;
  width: 32.5694444444vw;
}
@media (max-width: 1020px) {
  .top-features__item-image {
    width: 46.484375vw;
  }
}
@media (max-width: 767px) {
  .top-features__item-image {
    width: 78.4vw;
  }
}
.top-features__item-body {
  display: flex;
  flex-direction: column;
  gap: 2.2222222222vw;
  position: relative;
  width: 29.8611111111vw;
}
@media (max-width: 1020px) {
  .top-features__item-body {
    gap: 4.1666666667vw;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .top-features__item-body {
    gap: 6.4vw;
  }
}
.top-features__item-person {
  width: 8.3333333333vw;
  position: absolute;
}
.top-features__item-person.-first {
  top: 5.4166666667vw;
  right: 5.4861111111vw;
}
.top-features__item-person.-second {
  top: 5.4166666667vw;
  right: 0.9722222222vw;
}
.top-features__item-person.-third {
  top: 5.4861111111vw;
  right: 3.1944444444vw;
}
@media (max-width: 1020px) {
  .top-features__item-person {
    width: 15.625vw;
  }
  .top-features__item-person.-first {
    top: 2.2135416667vw;
    right: 16.1458333333vw;
  }
  .top-features__item-person.-second {
    top: 10.8072916667vw;
    right: 28.125vw;
  }
  .top-features__item-person.-third {
    top: 4.5572916667vw;
    right: 15.625vw;
  }
}
@media (max-width: 767px) {
  .top-features__item-person {
    width: 21.3333333333vw;
  }
  .top-features__item-person.-first {
    top: -12.8vw;
    right: 50%;
    transform: translateX(50%);
  }
  .top-features__item-person.-second {
    top: -12.8vw;
    right: 50%;
    transform: translateX(50%);
  }
  .top-features__item-person.-third {
    top: -12.8vw;
    right: 50%;
    transform: translateX(50%);
  }
}
.top-features__item-title {
  display: flex;
  flex-direction: column;
  gap: 0.5555555556vw;
}
@media (max-width: 1020px) {
  .top-features__item-title {
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-features__item-title {
    gap: 2.1333333333vw;
  }
}
.top-features__item-number {
  font-family: "Poppins", sans-serif;
  font-size: 2.7777777778vw;
  font-weight: 700;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-features__item-number {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-features__item-number {
    font-size: 8.5333333333vw;
  }
}
.top-features__item-text {
  font-size: 2.2222222222vw;
  font-weight: 700;
  color: var(--clr-black);
  line-height: 1.5;
}
@media (max-width: 1020px) {
  .top-features__item-text {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-features__item-text {
    font-size: 7.4666666667vw;
  }
}
.top-features__item-desc {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-features__item-desc {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-features__item-desc {
    font-size: 4.2666666667vw;
  }
}
.top-features__function {
  display: flex;
  flex-direction: column;
  gap: 5.5555555556vw;
  margin-top: 8.3333333333vw;
}
@media (max-width: 1020px) {
  .top-features__function {
    gap: 5.2083333333vw;
    margin-top: 13.0208333333vw;
  }
}
@media (max-width: 767px) {
  .top-features__function {
    gap: 10.6666666667vw;
    margin-top: 21.3333333333vw;
  }
}
.top-features__function-item {
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-features__function-item {
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-features__function-item {
    gap: 6.4vw;
  }
}
.top-features__function-title {
  font-size: 2.2222222222vw;
  font-weight: 700;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-features__function-title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-features__function-title {
    font-size: 6.4vw;
  }
}
.top-features__function-content {
  display: flex;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-features__function-content {
    gap: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-features__function-content {
    gap: 6.4vw;
    flex-direction: column;
  }
}
.top-features__function-image {
  flex-shrink: 0;
  width: 31.3888888889vw;
}
@media (max-width: 1020px) {
  .top-features__function-image {
    width: 39.0625vw;
  }
}
@media (max-width: 767px) {
  .top-features__function-image {
    width: 37.0666666667vw;
  }
}
.top-features__function-image img {
  width: 31.3888888889vw;
  height: 18.8888888889vw;
  object-fit: cover;
  border-radius: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-features__function-image img {
    width: 39.0625vw;
    height: 23.4375vw;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-features__function-image img {
    width: 37.0666666667vw;
    height: 26.6666666667vw;
    border-radius: 6.4vw;
  }
}
.top-features__function-body {
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-features__function-body {
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-features__function-body {
    gap: 6.4vw;
  }
}
.top-features__function-list {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-features__function-list {
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-features__function-list {
    gap: 2.1333333333vw;
  }
}
.top-features__function-list-item {
  display: flex;
  align-items: center;
  gap: 0.5555555556vw;
  font-size: 1.6666666667vw;
  font-weight: 700;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-features__function-list-item {
    gap: 1.0416666667vw;
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-features__function-list-item {
    gap: 2.1333333333vw;
    font-size: 4.8vw;
  }
}
.top-features__function-list-item img {
  width: 1.1111111111vw;
  height: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-features__function-list-item img {
    width: 2.0833333333vw;
    height: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-features__function-list-item img {
    width: 4.2666666667vw;
    height: 4.2666666667vw;
  }
}
.top-features__function-desc {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-features__function-desc {
    font-size: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-features__function-desc {
    font-size: 4.2666666667vw;
  }
}
.top-features__function-desc span {
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #FFD400 75.83%);
  font-weight: 900;
}
.top-features__function-expand {
  background-color: var(--clr-bluegray);
  border-radius: 1.6666666667vw;
  padding: 1.6666666667vw;
  text-align: center;
  font-size: 2.7777777778vw;
  font-weight: 700;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-features__function-expand {
    font-size: 3.125vw;
    padding: 3.125vw;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-features__function-expand {
    font-size: 6.4vw;
    padding: 6.4vw;
    border-radius: 6.4vw;
  }
}
.top-features__realization {
  display: flex;
  flex-direction: column;
  gap: 6.9444444444vw;
  align-items: center;
  margin-top: 8.3333333333vw;
}
@media (max-width: 1020px) {
  .top-features__realization {
    gap: 5.2083333333vw;
    margin-top: 13.0208333333vw;
  }
}
@media (max-width: 767px) {
  .top-features__realization {
    gap: 10.6666666667vw;
    margin-top: 21.3333333333vw;
  }
}
.top-features__realization-content {
  display: flex;
  flex-direction: column;
  gap: 6.9444444444vw;
}
@media (max-width: 1020px) {
  .top-features__realization-content {
    gap: 13.0208333333vw;
  }
}
@media (max-width: 767px) {
  .top-features__realization-content {
    gap: 21.3333333333vw;
  }
}
.top-features__realization-item {
  display: flex;
  gap: 2.7777777778vw;
  align-items: center;
}
@media (max-width: 1020px) {
  .top-features__realization-item {
    gap: 6.25vw;
    flex-direction: column-reverse;
  }
}
@media (max-width: 767px) {
  .top-features__realization-item {
    gap: 6.4vw;
  }
}
.top-features__realization-item--reverse {
  flex-direction: row-reverse;
}
@media (max-width: 1020px) {
  .top-features__realization-item--reverse {
    flex-direction: column-reverse;
  }
}
.top-features__realization-image {
  flex-shrink: 0;
}
.top-features__realization-image.-first {
  width: 37.3611111111vw;
}
@media (max-width: 1020px) {
  .top-features__realization-image.-first {
    width: 100%;
  }
}
.top-features__realization-image.-first img {
  width: 37.3611111111vw;
  height: 34.2361111111vw;
  object-fit: cover;
}
@media (max-width: 1020px) {
  .top-features__realization-image.-first img {
    width: 100%;
    height: 100%;
  }
}
.top-features__realization-image.-second {
  width: 34.0277777778vw;
}
@media (max-width: 1020px) {
  .top-features__realization-image.-second {
    width: 100%;
  }
}
.top-features__realization-image.-second img {
  width: 34.0277777778vw;
  height: 21.875vw;
  object-fit: cover;
}
@media (max-width: 1020px) {
  .top-features__realization-image.-second img {
    width: 100%;
    height: 100%;
  }
}
.top-features__realization-image.-third {
  width: 28.8888888889vw;
}
@media (max-width: 1020px) {
  .top-features__realization-image.-third {
    width: 100%;
  }
}
.top-features__realization-image.-third img {
  width: 28.8888888889vw;
  height: 17.6388888889vw;
  object-fit: cover;
  border-radius: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-features__realization-image.-third img {
    width: 100%;
    height: 100%;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-features__realization-image.-third img {
    border-radius: 6.4vw;
  }
}
.top-features__realization-body {
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-features__realization-body {
    gap: 3.125vw;
    flex-direction: row;
  }
}
@media (max-width: 767px) {
  .top-features__realization-body {
    gap: 4.2666666667vw;
    flex-direction: column;
  }
}
.top-features__realization-header {
  display: flex;
  gap: 1.1111111111vw;
  flex-direction: column;
}
@media (max-width: 1020px) {
  .top-features__realization-header {
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-features__realization-header {
    gap: 4.2666666667vw;
  }
}
.top-features__realization-point {
  display: flex;
  align-items: baseline;
}
.top-features__realization-point-en {
  font-family: "Poppins", sans-serif;
  font-size: 1.25vw;
  font-weight: 700;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-features__realization-point-en {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-features__realization-point-en {
    font-size: 4.2666666667vw;
  }
}
.top-features__realization-point-num {
  font-family: "Poppins", sans-serif;
  font-size: 2.2222222222vw;
  font-weight: 700;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-features__realization-point-num {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-features__realization-point-num {
    font-size: 8.5333333333vw;
  }
}
.top-features__realization-title {
  font-size: 2.2222222222vw;
  font-weight: 700;
  color: var(--clr-black);
  line-height: 1.5;
}
@media (max-width: 1020px) {
  .top-features__realization-title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-features__realization-title {
    font-size: 6.4vw;
  }
}
.top-features__realization-desc {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-features__realization-desc {
    font-size: 2.34375vw;
    width: 40.1041666667vw;
  }
}
@media (max-width: 767px) {
  .top-features__realization-desc {
    font-size: 4.2666666667vw;
    width: 100%;
  }
}
.top-features__realization-desc span {
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #FFD400 75.83%);
  font-weight: 900;
}
.top-features__banner {
  padding: 16.6666666667vw 0 16.6666666667vw;
}
@media (max-width: 1020px) {
  .top-features__banner {
    padding: 31.25vw 0 31.25vw;
  }
}
@media (max-width: 767px) {
  .top-features__banner {
    padding: 64vw 0 64vw;
  }
}

.top-demon {
  background-color: var(--clr-bluegray);
  padding: 5.5555555556vw 8.3333333333vw;
}
@media (max-width: 1020px) {
  .top-demon {
    padding: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-demon {
    padding: 10.6666666667vw 5.3333333333vw;
  }
}
.top-demon__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-demon__inner {
    gap: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-demon__inner {
    flex-direction: column;
    gap: 6.4vw;
  }
}
.top-demon__content {
  display: flex;
  flex-direction: column;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-demon__content {
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-demon__content {
    gap: 6.4vw;
  }
}
.top-demon__header {
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-demon__header {
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-demon__header {
    gap: 6.4vw;
  }
}
.top-demon__header h2 {
  text-align: center;
}
.top-demon__title {
  font-size: 3.3333333333vw;
  font-weight: 900;
  line-height: 1.2;
  color: var(--clr-black);
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #FFD400 75.83%);
  padding: 0 0.6944444444vw;
  display: inline;
}
@media (max-width: 1020px) {
  .top-demon__title {
    font-size: 4.1666666667vw;
    padding: 0;
  }
}
@media (max-width: 767px) {
  .top-demon__title {
    font-size: 8.5333333333vw;
  }
}
.top-demon__desc {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-demon__desc {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-demon__desc {
    font-size: 4.2666666667vw;
    text-align: center;
  }
}
.top-demon__cta {
  display: inline-block;
  padding: 0.8333333333vw 1.6666666667vw;
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-white);
  background-color: var(--clr-black);
  border: 1px solid var(--clr-black);
  border-radius: 6.875vw;
  width: fit-content;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .top-demon__cta {
    padding: 2.0833333333vw 4.1666666667vw;
    font-size: 2.34375vw;
    border-radius: 12.890625vw;
  }
}
@media (max-width: 767px) {
  .top-demon__cta {
    padding: 4.2666666667vw 8.5333333333vw;
    font-size: 4.2666666667vw;
    border-radius: 26.4vw;
    display: none;
    margin: 0 auto;
  }
}
.top-demon__cta:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}
.top-demon__cta.-sp {
  display: none;
}
@media (max-width: 767px) {
  .top-demon__cta.-sp {
    display: inline-flex;
  }
}
.top-demon__image {
  flex-shrink: 0;
  width: 26.8055555556vw;
}
@media (max-width: 1020px) {
  .top-demon__image {
    width: 30.46875vw;
  }
}
@media (max-width: 767px) {
  .top-demon__image {
    width: 64vw;
  }
}
.top-demon__image img {
  width: 100%;
}

.top-introduction {
  position: relative;
  height: 100%;
}
.top-introduction__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  z-index: -1;
}
.top-introduction__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/img/img_introduction.webp");
  background-size: cover;
  background-position: center;
  z-index: -1;
}
@media (max-width: 767px) {
  .top-introduction__bg {
    background-image: url("../../assets/img/img_introduction-sp.webp");
  }
}

.top-achieve {
  padding: 6.9444444444vw 8.3333333333vw;
}
@media (max-width: 1020px) {
  .top-achieve {
    padding: 10.4166666667vw 5.2083333333vw 39.0625vw;
  }
}
@media (max-width: 767px) {
  .top-achieve {
    padding: 139.2vw 5.3333333333vw 80vw;
  }
}
.top-achieve__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.5555555556vw;
}
@media (max-width: 1020px) {
  .top-achieve__inner {
    gap: 10.4166666667vw;
  }
}
@media (max-width: 767px) {
  .top-achieve__inner {
    gap: 10.6666666667vw;
  }
}
.top-achieve__header {
  background-color: var(--clr-white);
  padding: 1.1111111111vw 2.2222222222vw;
  border-radius: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-achieve__header {
    padding: 2.0833333333vw 4.1666666667vw;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-achieve__header {
    padding: 4.2666666667vw 8.5333333333vw;
    border-radius: 6.4vw;
  }
}
.top-achieve__title {
  font-size: 2.7777777778vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-achieve__title {
    font-size: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-achieve__title {
    font-size: 8.5333333333vw;
  }
}
.top-achieve__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.7777777778vw;
  width: 100%;
}
@media (max-width: 1020px) {
  .top-achieve__content {
    grid-template-columns: repeat(1, 1fr);
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-achieve__content {
    gap: 6.4vw;
  }
}
.top-achieve__card {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
  padding: 1.6666666667vw;
  border: 1px solid var(--clr-gray2);
  border-radius: 1.6666666667vw;
  background-color: var(--clr-white);
}
@media (max-width: 1020px) {
  .top-achieve__card {
    padding: 2.0833333333vw;
    border-radius: 3.125vw;
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-achieve__card {
    padding: 4.2666666667vw;
    border-radius: 6.4vw;
    gap: 4.2666666667vw;
  }
}
.top-achieve__card-img {
  width: 100%;
  height: 13.1944444444vw;
  object-fit: cover;
  border-radius: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-achieve__card-img {
    height: 27.34375vw;
    border-radius: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-achieve__card-img {
    height: 53.3333333333vw;
    border-radius: 4.2666666667vw;
  }
}
.top-achieve__card-content {
  display: flex;
  flex-direction: column;
  gap: 0.6944444444vw;
}
@media (max-width: 1020px) {
  .top-achieve__card-content {
    gap: 3.125vw;
    flex-direction: row;
  }
}
@media (max-width: 767px) {
  .top-achieve__card-content {
    gap: 10.6666666667vw;
  }
}
.top-achieve__card-body {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-achieve__card-body {
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-achieve__card-body {
    gap: 4.2666666667vw;
  }
}
.top-achieve__card-header {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-achieve__card-header {
    gap: 2.0833333333vw;
  }
}
.top-achieve__card-category {
  font-size: 0.9722222222vw;
  font-weight: 500;
  line-height: 1.6;
  color: var(--clr-black);
  background-color: var(--clr-bluegray);
  padding: 0.2777777778vw 1.6666666667vw;
  border-radius: 69.375vw;
  width: fit-content;
}
@media (max-width: 1020px) {
  .top-achieve__card-category {
    font-size: 1.8229166667vw;
    padding: 0.5208333333vw 3.125vw;
    border-radius: 130.078125vw;
  }
}
@media (max-width: 767px) {
  .top-achieve__card-category {
    font-size: 3.2vw;
    padding: 1.0666666667vw 6.4vw;
    border-radius: 266.4vw;
  }
}
.top-achieve__card-company {
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-achieve__card-company {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-achieve__card-company {
    font-size: 4.8vw;
  }
}
.top-achieve__card-desc {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
  height: 8.8888888889vw;
  overflow: hidden;
}
@media (max-width: 1020px) {
  .top-achieve__card-desc {
    font-size: 2.0833333333vw;
    height: auto;
  }
}
@media (max-width: 767px) {
  .top-achieve__card-desc {
    font-size: 4.2666666667vw;
  }
}
.top-achieve__card-cta {
  display: block;
  padding: 0.8333333333vw 1.6666666667vw;
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
  background-color: var(--clr-white);
  border: 1px solid var(--clr-black);
  border-radius: 1.6666666667vw;
  text-align: center;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .top-achieve__card-cta {
    padding: 1.0416666667vw 3.125vw;
    font-size: 1.8229166667vw;
    border-radius: 12.890625vw;
    width: 29.9479166667vw;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .top-achieve__card-cta {
    padding: 4.2666666667vw 8.5333333333vw;
    font-size: 4.2666666667vw;
    border-radius: 26.4vw;
    width: 100%;
  }
}
.top-achieve__card-cta:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}
.top-achieve__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.8333333333vw 1.6666666667vw;
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-white);
  background-color: var(--clr-black);
  border: 1px solid var(--clr-black);
  border-radius: 69.375vw;
  transition: 0.3s;
  width: 23.6111111111vw;
}
@media (max-width: 1020px) {
  .top-achieve__cta {
    padding: 2.0833333333vw 4.1666666667vw;
    font-size: 2.34375vw;
    border-radius: 130.078125vw;
    width: 38.8020833333vw;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .top-achieve__cta {
    padding: 4.2666666667vw 8.5333333333vw;
    font-size: 4.2666666667vw;
    border-radius: 266.4vw;
    width: 79.4666666667vw;
  }
}
.top-achieve__cta:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}

.top-price {
  background-color: var(--clr-bluegray);
  padding: 5.5555555556vw 8.3333333333vw;
}
@media (max-width: 1020px) {
  .top-price {
    padding: 10.4166666667vw 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-price {
    padding: 10.6666666667vw 5.3333333333vw;
  }
}
.top-price__inner {
  display: flex;
  flex-direction: column;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-price__inner {
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-price__inner {
    gap: 10.6666666667vw;
  }
}
.top-price__title {
  font-size: 2.7777777778vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
  text-align: center;
}
@media (max-width: 1020px) {
  .top-price__title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-price__title {
    font-size: 7.4666666667vw;
  }
}
.top-price__desc {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-price__desc {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-price__desc {
    font-size: 4.2666666667vw;
  }
}
.top-price__highlight {
  margin-top: 0.5555555556vw;
  display: inline-block;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #ffd400 75.83%);
}
@media (max-width: 1020px) {
  .top-price__highlight {
    margin-top: 0.5208333333vw;
  }
}
@media (max-width: 767px) {
  .top-price__highlight {
    margin-top: 1.0666666667vw;
    display: initial;
  }
}
.top-price__card {
  display: flex;
  align-items: center;
  gap: 2.7777777778vw;
  padding: 2.7777777778vw;
  background-color: var(--clr-white);
  border-radius: 1.6666666667vw;
  width: 100%;
}
@media (max-width: 1020px) {
  .top-price__card {
    padding: 5.2083333333vw;
    border-radius: 3.125vw;
    gap: 3.125vw;
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .top-price__card {
    padding: 6.4vw;
    border-radius: 6.4vw;
    gap: 6.4vw;
  }
}
.top-price__card-left {
  display: flex;
  align-items: center;
  gap: 1.1111111111vw;
  padding-right: 2.2222222222vw;
  border-right: 1px solid var(--clr-gray2);
}
@media (max-width: 1020px) {
  .top-price__card-left {
    gap: 2.0833333333vw;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--clr-black);
    width: 79.1666666667vw;
    justify-content: center;
    padding-bottom: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-price__card-left {
    gap: 0;
    width: 100%;
    flex-direction: column;
    padding-bottom: 4.2666666667vw;
  }
}
.top-price__card-title {
  font-size: 1.1111111111vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
  background-color: var(--clr-bluegray);
  padding: 0.5555555556vw 1.6666666667vw;
  border-radius: 69.375vw;
  width: max-content;
}
@media (max-width: 1020px) {
  .top-price__card-title {
    font-size: 2.0833333333vw;
    padding: 1.0416666667vw 3.125vw;
    border-radius: 130.078125vw;
  }
}
@media (max-width: 767px) {
  .top-price__card-title {
    font-size: 3.7333333333vw;
    padding: 2.1333333333vw 6.4vw;
    border-radius: 266.4vw;
  }
}
.top-price__card-price {
  display: flex;
  align-items: baseline;
}
.top-price__card-price-number {
  font-size: 5vw;
  font-weight: 900;
  line-height: 1.2;
  color: var(--clr-black);
  display: inline-block;
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #FFD400 75.83%);
}
@media (max-width: 1020px) {
  .top-price__card-price-number {
    font-size: 9.375vw;
  }
}
@media (max-width: 767px) {
  .top-price__card-price-number {
    font-size: 19.2vw;
  }
}
.top-price__card-price-unit {
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-price__card-price-unit {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-price__card-price-unit {
    font-size: 4.2666666667vw;
  }
}
.top-price__card-right {
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-price__card-right {
    gap: 3.125vw;
    width: 79.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-price__card-right {
    gap: 6.4vw;
    width: 100%;
  }
}
.top-price__card-subtitle {
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-price__card-subtitle {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-price__card-subtitle {
    font-size: 4.8vw;
  }
}
.top-price__card-list {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
  gap: 0.5555555556vw 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-price__card-list {
    gap: 0.9114583333vw 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-price__card-list {
    grid-template-rows: repeat(8, 1fr);
    grid-auto-flow: column;
    gap: 4.2666666667vw;
  }
}
.top-price__card-list-item {
  display: flex;
  align-items: center;
  gap: 0.5555555556vw;
  font-size: 1.1111111111vw;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--clr-black);
  width: max-content;
}
@media (max-width: 1020px) {
  .top-price__card-list-item {
    gap: 1.0416666667vw;
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .top-price__card-list-item {
    gap: 2.1333333333vw;
    font-size: 4.2666666667vw;
  }
}
.top-price__card-list-item img {
  width: 1.1111111111vw;
  height: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-price__card-list-item img {
    width: 2.0833333333vw;
    height: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-price__card-list-item img {
    width: 4.2666666667vw;
    height: 4.2666666667vw;
  }
}
.top-price__note {
  font-size: 1.1111111111vw;
  font-weight: 500;
  line-height: 1.6;
  color: var(--clr-gray3);
}
@media (max-width: 1020px) {
  .top-price__note {
    font-size: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-price__note {
    font-size: 4.2666666667vw;
  }
}

.top-process {
  padding: 5.5555555556vw 8.3333333333vw 20.8333333333vw;
}
@media (max-width: 1020px) {
  .top-process {
    padding: 10.4166666667vw 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-process {
    padding: 10.6666666667vw 5.3333333333vw 80vw;
  }
}
.top-process__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-process__inner {
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-process__inner {
    gap: 10.6666666667vw;
  }
}
.top-process__header {
  background-color: var(--clr-white);
  padding: 1.1111111111vw 2.2222222222vw;
  border-radius: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-process__header {
    padding: 2.0833333333vw 4.1666666667vw;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-process__header {
    padding: 4.2666666667vw 8.5333333333vw;
    border-radius: 6.4vw;
  }
}
.top-process__title {
  font-size: 2.7777777778vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-process__title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-process__title {
    font-size: 7.4666666667vw;
    text-align: center;
  }
}
.top-process__content {
  display: flex;
  align-items: center;
  gap: 0.5555555556vw;
  width: 100%;
}
@media (max-width: 1020px) {
  .top-process__content {
    gap: 1.0416666667vw;
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .top-process__content {
    gap: 2.1333333333vw;
  }
}
.top-process__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6666666667vw;
  padding: 1.6666666667vw;
  border: 1px solid var(--clr-bluegray);
  border-radius: 1.6666666667vw;
  background-color: var(--clr-white);
  flex: 1;
  align-self: stretch;
}
@media (max-width: 1020px) {
  .top-process__card {
    width: 100%;
    gap: 2.0833333333vw;
    padding: 3.125vw 5.2083333333vw;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-process__card {
    gap: 4.2666666667vw;
    padding: 6.4vw;
    border-radius: 6.4vw;
  }
}
.top-process__card-step {
  font-size: 2.2222222222vw;
  font-weight: 900;
  line-height: 1.5;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-process__card-step {
    font-size: 3.6458333333vw;
  }
}
@media (max-width: 767px) {
  .top-process__card-step {
    font-size: 7.4666666667vw;
  }
}
.top-process__card-step span {
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 1020px) {
  .top-process__card-step span {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-process__card-step span {
    font-size: 4.2666666667vw;
  }
}
.top-process__card-icon {
  width: 3.3333333333vw;
  height: 3.3333333333vw;
}
@media (max-width: 1020px) {
  .top-process__card-icon {
    width: 5.2083333333vw;
    height: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-process__card-icon {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
  }
}
.top-process__card-body {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-process__card-body {
    gap: 2.0833333333vw;
    align-items: center;
  }
}
@media (max-width: 767px) {
  .top-process__card-body {
    gap: 4.2666666667vw;
  }
}
.top-process__card-title {
  font-size: 1.5277777778vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-process__card-title {
    text-align: center;
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-process__card-title {
    font-size: 6.4vw;
  }
}
.top-process__card-desc {
  font-size: 1.1111111111vw;
  font-weight: 500;
  line-height: 1.8;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-process__card-desc {
    text-align: center;
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-process__card-desc {
    font-size: 4.2666666667vw;
  }
}
.top-process__arrow {
  width: 0.9027777778vw;
  height: 1.0416666667vw;
}
@media (max-width: 1020px) {
  .top-process__arrow {
    transform: rotate(90deg);
    width: 1.6927083333vw;
    height: 1.953125vw;
  }
}
@media (max-width: 767px) {
  .top-process__arrow {
    width: 3.4666666667vw;
    height: 4vw;
  }
}
.top-process__summary {
  background-color: var(--clr-bluegray);
  border-radius: 1.6666666667vw;
  padding: 2.2222222222vw;
  margin-top: 5.5555555556vw;
  position: relative;
  width: 100%;
}
@media (max-width: 1020px) {
  .top-process__summary {
    padding: 2.734375vw 5.2083333333vw;
    margin-top: 5.2083333333vw;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-process__summary {
    padding: 3.4666666667vw 7.4666666667vw 5.3333333333vw;
    margin-top: 11.4666666667vw;
    border-radius: 6.4vw;
  }
}
.top-process__summary::before {
  content: "";
  position: absolute;
  top: -2.0833333333vw;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 1.3888888889vw 2.0833333333vw 1.3888888889vw;
  border-color: transparent transparent var(--clr-bluegray) transparent;
}
@media (max-width: 1020px) {
  .top-process__summary::before {
    top: -1.5625vw;
    border-width: 0 2.6041666667vw 3.90625vw 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .top-process__summary::before {
    top: -3.2vw;
    border-width: 0 5.3333333333vw 8vw 5.3333333333vw;
  }
}
.top-process__summary-inner {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 1.6666666667vw;
  font-weight: 700;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-process__summary-inner {
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-process__summary-inner {
    font-size: 6.4vw;
    flex-direction: column;
    align-items: center;
  }
}
.top-process__summary-highlight {
  display: inline-block;
  font-size: 2.7777777778vw;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #ffd400 75.83%);
}
@media (max-width: 1020px) {
  .top-process__summary-highlight {
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-process__summary-highlight {
    font-size: 6.4vw;
  }
}
.top-process__summary-large {
  font-size: 3.8888888889vw;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 1020px) {
  .top-process__summary-large {
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-process__summary-large {
    font-size: 6.4vw;
  }
}

.top-faq {
  padding: 5.5555555556vw 16.6666666667vw;
}
@media (max-width: 1020px) {
  .top-faq {
    padding: 10.4166666667vw 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-faq {
    padding: 21.3333333333vw 6.4vw;
  }
}
.top-faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-faq__inner {
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-faq__inner {
    gap: 10.6666666667vw;
  }
}
.top-faq__title {
  font-size: 2.7777777778vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-faq__title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-faq__title {
    font-size: 6.4vw;
  }
}
.top-faq__content {
  display: flex;
  flex-direction: column;
  gap: 2.2222222222vw;
  width: 100%;
}
@media (max-width: 1020px) {
  .top-faq__content {
    gap: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-faq__content {
    gap: 8.5333333333vw;
  }
}
.top-faq__item {
  border: 1px solid var(--clr-black);
  border-radius: 1.6666666667vw;
  padding: 1.1111111111vw 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-faq__item {
    padding: 2.0833333333vw 5.2083333333vw;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-faq__item {
    padding: 6.4vw;
    border-radius: 6.4vw;
  }
}
.top-faq__item-question {
  display: flex;
  align-items: center;
  gap: 1.1111111111vw;
  cursor: pointer;
  position: relative;
}
@media (max-width: 1020px) {
  .top-faq__item-question {
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-faq__item-question {
    gap: 4.2666666667vw;
  }
}
.top-faq__item-question span {
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1020px) {
  .top-faq__item-question span {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-faq__item-question span {
    font-size: 4.2666666667vw;
  }
}
.top-faq__item-q {
  font-size: 2.2222222222vw !important;
  font-weight: 700;
  line-height: 1;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-faq__item-q {
    font-size: 4.1666666667vw !important;
  }
}
@media (max-width: 767px) {
  .top-faq__item-q {
    font-size: 8.5333333333vw !important;
  }
}
.top-faq__item-toggle {
  width: 1.8055555556vw;
  height: 1.8055555556vw;
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin-left: auto;
  position: relative;
}
@media (max-width: 1020px) {
  .top-faq__item-toggle {
    width: 3.3854166667vw;
    height: 3.3854166667vw;
  }
}
@media (max-width: 767px) {
  .top-faq__item-toggle {
    width: 6.4vw;
    height: 6.4vw;
  }
}
.top-faq__item-toggle::before, .top-faq__item-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5277777778vw;
  height: 0.2777777778vw;
  background-color: var(--clr-black);
  transform: translate(-50%, -50%);
  transition: transform 0.3s;
}
@media (max-width: 1020px) {
  .top-faq__item-toggle::before, .top-faq__item-toggle::after {
    width: 2.8645833333vw;
    height: 0.5208333333vw;
  }
}
@media (max-width: 767px) {
  .top-faq__item-toggle::before, .top-faq__item-toggle::after {
    width: 5.8666666667vw;
    height: 1.0666666667vw;
  }
}
.top-faq__item-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.top-faq__item.is-open .top-faq__item-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.top-faq__item-answer {
  padding: 1.6666666667vw 0 0 3.3333333333vw;
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
  display: none;
}
@media (max-width: 1020px) {
  .top-faq__item-answer {
    padding: 3.125vw 0 0 5.2083333333vw;
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-faq__item-answer {
    padding: 4.2666666667vw 0 0 14.4vw;
    font-size: 4.2666666667vw;
  }
}

.top-banner {
  background-color: var(--clr-imput-default);
  padding: 5.5555555556vw 8.3333333333vw;
  position: relative;
}
@media (max-width: 1020px) {
  .top-banner {
    padding: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-banner {
    padding: 10.6666666667vw 5.3333333333vw 12.8vw;
  }
}
.top-banner::after {
  content: "";
  position: absolute;
  bottom: -2.0833333333vw;
  left: 50%;
  transform: translateX(-50%);
  width: 3.6805555556vw;
  height: 2.7777777778vw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='40' viewBox='0 0 53 40' fill='none'%3E%3Cpath d='M22.7377 38.0476C24.8055 40.6508 28.1637 40.6508 30.2315 38.0476L51.4057 11.3914C52.9276 9.47547 53.3743 6.62241 52.5471 4.12339C51.72 1.62436 49.8011 -1.38496e-07 47.6506 -2.3287e-07L5.30206 -2.09131e-06C3.16809 -2.18496e-06 1.23263 1.62436 0.405506 4.12339C-0.421612 6.62241 0.0415722 9.47546 1.54693 11.3914L22.7212 38.0476L22.7377 38.0476Z' fill='%23525252'/%3E%3C/svg%3E") center/cover no-repeat;
}
@media (max-width: 1020px) {
  .top-banner::after {
    bottom: -3.6458333333vw;
    width: 6.9010416667vw;
    height: 4.9479166667vw;
  }
}
@media (max-width: 767px) {
  .top-banner::after {
    bottom: -7.4666666667vw;
    width: 14.1333333333vw;
    height: 10.1333333333vw;
  }
}
.top-banner__inner {
  background-color: var(--clr-white);
  border-radius: 1.6666666667vw;
  padding: 5.5555555556vw 6.25vw 0;
  position: relative;
}
@media (max-width: 1020px) {
  .top-banner__inner {
    padding: 5.2083333333vw 5.2083333333vw 0;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-banner__inner {
    padding: 10.6666666667vw 6.4vw 0;
    border-radius: 6.4vw;
  }
}
.top-banner__content {
  display: flex;
  flex-direction: column;
  gap: 3.3333333333vw;
  align-items: flex-start;
  padding-bottom: 5.5555555556vw;
}
@media (max-width: 1020px) {
  .top-banner__content {
    gap: 5.2083333333vw;
    padding-bottom: 10.4166666667vw;
  }
}
@media (max-width: 767px) {
  .top-banner__content {
    gap: 10.6666666667vw;
    padding-bottom: 34.1333333333vw;
  }
}
@media (max-width: 767px) {
  .top-banner__content h2 {
    text-align: center;
  }
}
.top-banner__title {
  display: inline;
  margin: 0 auto;
  font-size: 3.3333333333vw;
  font-weight: 900;
  line-height: 1.2;
  color: var(--clr-black);
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #ffd400 75.83%);
}
@media (max-width: 1020px) {
  .top-banner__title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-banner__title {
    font-size: 6.4vw;
  }
}
.top-banner__list {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-banner__list {
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .top-banner__list {
    gap: 2.1333333333vw;
  }
}
.top-banner__list-item {
  display: flex;
  align-items: center;
  gap: 0.5555555556vw;
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-banner__list-item {
    gap: 1.0416666667vw;
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-banner__list-item {
    font-size: 4.8vw;
  }
}
.top-banner__list-item img {
  width: 1.6666666667vw;
  height: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-banner__list-item img {
    width: 3.125vw;
    height: 3.125vw;
    margin: 1.0416666667vw;
  }
}
.top-banner__desc {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-banner__desc {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-banner__desc {
    font-size: 4.2666666667vw;
  }
}
.top-banner__image {
  width: 22.0138888889vw;
  height: 17.8472222222vw;
  position: absolute;
  bottom: -5.5555555556vw;
  right: 6.25vw;
}
@media (max-width: 1020px) {
  .top-banner__image {
    width: 19.2708333333vw;
    height: 15.625vw;
    bottom: 0;
    right: 1.3020833333vw;
  }
}
@media (max-width: 767px) {
  .top-banner__image {
    width: 34.1333333333vw;
    height: 27.7333333333vw;
    bottom: 0;
    right: 6.4vw;
  }
}

.top-contact {
  padding: 6.6666666667vw 8.8888888889vw 7.2222222222vw;
  background-color: var(--clr-bluegray);
}
@media (max-width: 1020px) {
  .top-contact {
    padding: 10.4166666667vw 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-contact {
    padding: 10.6666666667vw 6.4vw;
  }
}
.top-contact__inner {
  background-color: var(--clr-white);
  padding: 2.7777777778vw 11.8055555556vw 4.4444444444vw;
  border-radius: 1.3888888889vw;
}
@media (max-width: 1020px) {
  .top-contact__inner {
    padding: 5.2083333333vw 4.1666666667vw 8.3333333333vw;
    border-radius: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .top-contact__inner {
    padding: 10.6666666667vw 4.2666666667vw 17.0666666667vw;
    border-radius: 5.3333333333vw;
  }
}
.top-contact__header {
  text-align: center;
  padding: 1.6666666667vw 0;
  margin-bottom: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-contact__header {
    padding: 3.125vw 0;
    margin-bottom: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-contact__header {
    padding: 6.4vw 0;
    margin-bottom: 6.4vw;
  }
}
.top-contact__title {
  font-size: 2.7777777778vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-contact__title {
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-contact__title {
    font-size: 8.5333333333vw;
  }
}
.top-contact__desc {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--clr-black);
  margin-top: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-contact__desc {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-contact__desc {
    font-size: 4.2666666667vw;
    text-align: start;
  }
}
.top-contact__form {
  display: flex;
  flex-direction: column;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-contact__form {
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form {
    gap: 10.6666666667vw;
  }
}
.top-contact__form-group {
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .top-contact__form-group {
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-group {
    gap: 6.4vw;
  }
}
.top-contact__form-title {
  font-size: 1.9444444444vw;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .top-contact__form-title {
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-title {
    font-size: 6.4vw;
  }
}
.top-contact__form-item {
  display: flex;
  flex-direction: column;
  gap: 0.5555555556vw;
}
@media (max-width: 1020px) {
  .top-contact__form-item {
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-item {
    gap: 2.1333333333vw;
  }
}
.top-contact__form-item label {
  display: flex;
  align-items: center;
  gap: 0.5555555556vw;
  font-size: 0.9722222222vw;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--clr-txt-default);
}
@media (max-width: 1020px) {
  .top-contact__form-item label {
    gap: 1.0416666667vw;
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-item label {
    gap: 2.1333333333vw;
    font-size: 3.7333333333vw;
  }
}
.top-contact__form-required {
  font-size: 0.8333333333vw;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--clr-white);
  background-color: var(--clr-deep-orange);
  padding: 0.0694444444vw 0.2777777778vw;
  border-radius: 0.2777777778vw;
}
@media (max-width: 1020px) {
  .top-contact__form-required {
    font-size: 1.5625vw;
    padding: 0.1302083333vw 0.5208333333vw;
    border-radius: 0.5208333333vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-required {
    font-size: 3.2vw;
    padding: 0.2666666667vw 1.0666666667vw;
    border-radius: 1.0666666667vw;
  }
}
.top-contact__form-required-text {
  font-size: 0.8333333333vw;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.15px;
  color: var(--clr-imput-text);
}
@media (max-width: 1020px) {
  .top-contact__form-required-text {
    font-size: 1.5625vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-required-text {
    font-size: 3.2vw;
  }
}
.top-contact input[type=text],
.top-contact input[type=email],
.top-contact input[type=tel],
.top-contact textarea {
  border: 1px solid var(--clr-imput-default);
  border-radius: 0.5555555556vw;
  padding: 0.8333333333vw 1.1111111111vw;
  font-size: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-contact input[type=text],
  .top-contact input[type=email],
  .top-contact input[type=tel],
  .top-contact textarea {
    font-size: 2.0833333333vw;
    padding: 1.953125vw 2.0833333333vw;
    border-radius: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .top-contact input[type=text],
  .top-contact input[type=email],
  .top-contact input[type=tel],
  .top-contact textarea {
    font-size: 4.2666666667vw;
    padding: 4vw 4.2666666667vw;
    border-radius: 2.1333333333vw;
  }
}
.top-contact input[type=text]:focus,
.top-contact input[type=email]:focus,
.top-contact input[type=tel]:focus,
.top-contact textarea:focus {
  border: 2px solid var(--clr-yellow);
  outline: none;
}
.top-contact textarea {
  resize: vertical;
}
.top-contact__form-message-count {
  font-size: 0.8333333333vw;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.15px;
  color: var(--clr-imput-text);
  text-align: right;
}
@media (max-width: 1020px) {
  .top-contact__form-message-count {
    font-size: 1.5625vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-message-count {
    font-size: 3.2vw;
  }
}
.top-contact__form-privacy {
  display: flex;
  align-items: center;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .top-contact__form-privacy {
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-privacy {
    gap: 4.2666666667vw;
  }
}
.top-contact__form-privacy-inner {
  display: flex;
  align-items: center;
  gap: 1.1111111111vw;
  position: relative;
}
@media (max-width: 1020px) {
  .top-contact__form-privacy-inner {
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-privacy-inner {
    gap: 4.2666666667vw;
  }
}
.top-contact__form-privacy-inner label {
  font-size: 1.1111111111vw;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--clr-black);
  cursor: pointer;
}
@media (max-width: 1020px) {
  .top-contact__form-privacy-inner label {
    font-size: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-privacy-inner label {
    font-size: 4.2666666667vw;
  }
}
.top-contact__form-privacy-inner label a {
  color: var(--clr-link-blue);
  text-decoration: underline;
}
.top-contact__form-privacy-inner label a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 14.5833333333vw;
  transform: translateY(-50%);
  width: 1.3888888889vw;
  height: 1.3888888889vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.6667 12.6666H3.33333V3.33325H8V1.99992H3.33333C2.59667 1.99992 2 2.59659 2 3.33325V12.6666C2 13.4033 2.59667 13.9999 3.33333 13.9999H12.6667C13.4033 13.9999 14 13.4033 14 12.6666V7.99992H12.6667V12.6666ZM9.33333 1.99992V3.33325H11.7133L5.52667 9.51992L6.48 10.4733L12.6667 4.28659V6.66659H14V1.99992H9.33333Z' fill='%230017C1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
}
@media (max-width: 1020px) {
  .top-contact__form-privacy-inner label a::after {
    width: 2.6041666667vw;
    height: 2.6041666667vw;
    left: 27.34375vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-privacy-inner label a::after {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    top: 27%;
    left: 54.6666666667vw;
  }
}
.top-contact__form-privacy-inner label span {
  margin-left: 2.0833333333vw;
}
@media (max-width: 1020px) {
  .top-contact__form-privacy-inner label span {
    margin-left: 3.125vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-privacy-inner label span {
    margin-left: 6.4vw;
  }
}
.top-contact__form-checkbox {
  position: relative;
  width: 1.3888888889vw;
  height: 1.3888888889vw;
  appearance: none;
  background: var(--clr-white);
  border: solid 0.1388888889vw var(--clr-black);
  border-radius: 0.2777777778vw;
  box-shadow: 0 0 0 0 transparent;
  cursor: pointer;
}
@media (max-width: 1020px) {
  .top-contact__form-checkbox {
    width: 2.6041666667vw;
    height: 2.6041666667vw;
    border-radius: 0.5208333333vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-checkbox {
    width: 5.3333333333vw;
    min-width: 5.3333333333vw;
    height: 5.3333333333vw;
    border-radius: 1.0666666667vw;
  }
}
.top-contact__form-checkbox:checked {
  background: var(--clr-system-blue);
  border: solid 0.1388888889vw var(--clr-system-blue);
}
.top-contact__form-checkbox:checked:before {
  position: absolute;
  top: 0.1388888889vw;
  left: 0.4166666667vw;
  transform: rotate(50deg);
  width: 0.4166666667vw;
  height: 0.8333333333vw;
  border-right: 0.1388888889vw solid var(--clr-white);
  border-bottom: 0.1388888889vw solid var(--clr-white);
  content: "";
}
@media (max-width: 1020px) {
  .top-contact__form-checkbox:checked:before {
    width: 0.78125vw;
    height: 1.5625vw;
    top: 0.390625vw;
    left: 1.0416666667vw;
    border-right: 0.2604166667vw solid var(--clr-white);
    border-bottom: 0.2604166667vw solid var(--clr-white);
  }
}
@media (max-width: 767px) {
  .top-contact__form-checkbox:checked:before {
    width: 1.6vw;
    height: 3.2vw;
    top: 0.8vw;
    left: 2.1333333333vw;
    border-right: 0.5333333333vw solid var(--clr-white);
    border-bottom: 0.5333333333vw solid var(--clr-white);
  }
}
.top-contact__form-submit {
  text-align: center;
}
.top-contact__form-submit button {
  width: 23.6111111111vw;
  background-color: var(--clr-black);
  color: var(--clr-white);
  border: 1px solid var(--clr-black);
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.8333333333vw 1.6666666667vw;
  border-radius: 69.375vw;
  cursor: pointer;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .top-contact__form-submit button {
    width: 44.2708333333vw;
    font-size: 2.6041666667vw;
    padding: 1.5625vw 3.125vw;
    border-radius: 130.078125vw;
  }
}
@media (max-width: 767px) {
  .top-contact__form-submit button {
    width: 79.4666666667vw;
    font-size: 4.2666666667vw;
    padding: 3.2vw 8.5333333333vw;
    border-radius: 266.4vw;
  }
}
.top-contact__form-submit button:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}

.top-message {
  padding: 11.1111111111vw 0;
  background: url("../../assets/img/img_about-bg.webp") no-repeat center center/cover;
  color: var(--clr-white);
}
@media (max-width: 1020px) {
  .top-message {
    padding: 15.625vw 0;
  }
}
@media (max-width: 767px) {
  .top-message {
    padding: 21.3333333333vw 0;
  }
}
@media (max-width: 767px) {
  .top-message {
    padding: 10.6666666667vw 0;
    background-image: url("../../assets/img/img_about-bg-sp.webp");
  }
}
.top-message__inner {
  max-width: 83.3333333333vw;
  margin: 0 auto;
  padding: 0 1.3888888889vw;
  text-align: center;
}
@media (max-width: 1020px) {
  .top-message__inner {
    max-width: 89.5833333333vw;
    padding: 0;
  }
}
@media (max-width: 767px) {
  .top-message__inner {
    max-width: 79.4666666667vw;
    padding: 0;
  }
}
.top-message__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .top-message__content {
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .top-message__content {
    gap: 10.6666666667vw;
  }
}
.top-message__title {
  font-size: 3.3333333333vw;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 1020px) {
  .top-message__title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .top-message__title {
    font-size: 7.4666666667vw;
  }
}
.top-message__text {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
}
@media (max-width: 1020px) {
  .top-message__text {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .top-message__text {
    font-size: 4.2666666667vw;
  }
  .top-message__text br {
    display: none;
  }
}
.top-message__cta {
  display: inline-block;
  padding: 1.1111111111vw 2.2222222222vw;
  width: 20.6944444444vw;
  margin-top: 1.3888888889vw;
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-white);
  border: 1px solid var(--clr-white);
  border-radius: 6.875vw;
  text-decoration: none;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .top-message__cta {
    width: 38.8020833333vw;
    font-size: 2.34375vw;
    padding: 2.0833333333vw 4.1666666667vw;
    border-radius: 12.890625vw;
  }
}
@media (max-width: 767px) {
  .top-message__cta {
    width: 79.4666666667vw;
    font-size: 4.2666666667vw;
    padding: 4.2666666667vw 8.5333333333vw;
    border-radius: 26.4vw;
  }
}
.top-message__cta:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.js-loaded-fadein {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.js-loaded-fadein.is-loaded {
  opacity: 1;
}

.js-scroll-animation > * {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-scroll-animation > .is-animated {
  opacity: 1;
  transform: translateY(0);
}

.case__mv {
  padding: 2.7777777778vw 2.7777777778vw 0;
  position: relative;
}
@media (max-width: 1020px) {
  .case__mv {
    padding: 5.2083333333vw 5.078125vw 0;
  }
}
@media (max-width: 767px) {
  .case__mv {
    padding: 0;
  }
}
.case__mv-img {
  width: 100%;
  height: 100%;
}
.case__mv-title {
  position: absolute;
  top: 50%;
  right: 18.6111111111vw;
  transform: translateY(-50%);
  color: var(--clr-black);
  font-size: 3.3333333333vw;
  font-weight: 900;
  line-height: 120%;
  text-align: center;
}
@media (max-width: 1020px) {
  .case__mv-title {
    top: 35%;
    right: 50%;
    transform: translate(50%, -50%);
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .case__mv-title {
    font-size: 8.5333333333vw;
  }
}
.case__mv-cta {
  position: absolute;
  top: 4.4444444444vw;
  right: 6.9444444444vw;
  padding: 0.8333333333vw 1.6666666667vw;
  border-radius: 6.875vw;
  background-color: var(--clr-black);
  color: var(--clr-white);
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 150%;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .case__mv-cta {
    display: none;
  }
}
.case__mv-cta:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}
.case__content {
  max-width: 83.3333333333vw;
  width: 100%;
  margin: 0 auto;
  padding: 2.7777777778vw 0 5.5555555556vw;
}
@media (max-width: 1020px) {
  .case__content {
    max-width: 89.5833333333vw;
    padding: 5.2083333333vw 0;
  }
}
@media (max-width: 767px) {
  .case__content {
    max-width: 89.3333333333vw;
    padding: 6.4vw 0;
  }
}
.case__content-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5555555556vw;
  margin-bottom: 3.3333333333vw;
}
@media (max-width: 1020px) {
  .case__content-header {
    gap: 1.0416666667vw;
    margin-bottom: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .case__content-header {
    gap: 2.1333333333vw;
    margin-bottom: 10.6666666667vw;
  }
}
.case__content-sub {
  width: 8.8888888889vw;
  height: 1.875vw;
}
@media (max-width: 1020px) {
  .case__content-sub {
    width: 16.6666666667vw;
    height: 3.515625vw;
  }
}
@media (max-width: 767px) {
  .case__content-sub {
    width: 34.1333333333vw;
    height: 7.2vw;
  }
}
.case__content-title {
  color: var(--clr-black);
  font-size: 2.7777777778vw;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1020px) {
  .case__content-title {
    font-size: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .case__content-title {
    font-size: 10.6666666667vw;
  }
}
.case__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.8888888889vw 1.6666666667vw;
  margin-bottom: 3.8888888889vw;
}
@media (max-width: 1020px) {
  .case__list {
    grid-template-columns: repeat(1, 1fr);
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .case__list {
    gap: 10.6666666667vw;
  }
}
.case__item-link {
  display: block;
  color: var(--clr-black);
  text-decoration: none;
}
@media (max-width: 1020px) {
  .case__item-link {
    display: flex;
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .case__item-link {
    flex-direction: column;
    gap: 6.4vw;
  }
}
.case__item-img {
  width: 25.1388888889vw;
  height: 14.6527777778vw;
}
@media (max-width: 1020px) {
  .case__item-img {
    min-width: 37.7604166667vw;
    width: 37.7604166667vw;
    height: 22.0052083333vw;
  }
}
@media (max-width: 767px) {
  .case__item-img {
    width: 89.3333333333vw;
    height: 60.5333333333vw;
  }
}
.case__item-img img {
  width: 25.1388888889vw;
  height: 14.6527777778vw;
  object-fit: cover;
  border-radius: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .case__item-img img {
    border-radius: 2.0833333333vw;
    width: 37.7604166667vw;
    height: 22.0052083333vw;
  }
}
@media (max-width: 767px) {
  .case__item-img img {
    border-radius: 4.2666666667vw;
    width: 89.3333333333vw;
    height: 60.5333333333vw;
  }
}
.case__item-body {
  padding: 1.1111111111vw 2.2222222222vw;
}
@media (max-width: 1020px) {
  .case__item-body {
    padding: 0;
  }
}
@media (max-width: 767px) {
  .case__item-body {
    padding: 0 5.3333333333vw;
  }
}
.case__item-tag {
  display: inline-block;
  background-color: var(--clr-bluegray);
  border-radius: 69.375vw;
  padding: 0.2777777778vw 1.6666666667vw;
  font-size: 0.9722222222vw;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .case__item-tag {
    padding: 0.5208333333vw 3.125vw;
    font-size: 2.0833333333vw;
    margin-bottom: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .case__item-tag {
    padding: 1.0666666667vw 6.4vw;
    font-size: 3.7333333333vw;
    margin-bottom: 4.2666666667vw;
  }
}
.case__item-title {
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .case__item-title {
    font-size: 3.125vw;
    margin-bottom: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .case__item-title {
    font-size: 7.4666666667vw;
    margin-bottom: 4.2666666667vw;
  }
}
.case__item-text {
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin-bottom: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .case__item-text {
    font-size: 2.34375vw;
    margin-bottom: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .case__item-text {
    font-size: 4.8vw;
    margin-bottom: 4.2666666667vw;
  }
}
.case__item-btn {
  border: 1px solid #222;
  border-radius: 1.6666666667vw;
  padding: 0.8333333333vw 1.6666666667vw;
  text-align: center;
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .case__item-btn {
    border-radius: 3.125vw;
    padding: 1.5625vw 3.125vw;
    font-size: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .case__item-btn {
    border-radius: 26.4vw;
    padding: 3.2vw 8.5333333333vw;
    font-size: 4.8vw;
  }
}
.case__item-btn:hover {
  background-color: var(--clr-yellow);
}
.case__pagination-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2777777778vw;
}
@media (max-width: 1020px) {
  .case__pagination-list {
    gap: 0.5208333333vw;
  }
}
@media (max-width: 767px) {
  .case__pagination-list {
    gap: 1.0666666667vw;
  }
}
.case__pagination-item a,
.case__pagination-item span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.2222222222vw;
  height: 2.2222222222vw;
  border-radius: 999px;
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  color: var(--clr-black);
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .case__pagination-item a,
  .case__pagination-item span {
    width: 4.1666666667vw;
    height: 4.1666666667vw;
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .case__pagination-item a,
  .case__pagination-item span {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    font-size: 4.8vw;
  }
}
.case__pagination-item a:hover {
  background-color: var(--clr-black);
  color: var(--clr-white);
}
.case__pagination-item.is-active a {
  background-color: var(--clr-black);
  color: var(--clr-white);
}
.case__detail-head {
  display: flex;
  gap: 2.7777777778vw;
  align-items: center;
  padding: 2.7777777778vw 2.7777777778vw 0;
  position: relative;
}
@media (max-width: 1020px) {
  .case__detail-head {
    padding: 15.625vw 5.2083333333vw 0;
    flex-direction: column-reverse;
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .case__detail-head {
    padding: 32vw 6.4vw 0;
    gap: 6.4vw;
  }
}
.case__detail-img {
  width: 51.6666666667vw;
  height: 37.7777777778vw;
  border-radius: 1.6666666667vw;
  object-fit: cover;
}
@media (max-width: 1020px) {
  .case__detail-img {
    width: 100%;
    height: 61.0677083333vw;
    border-radius: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .case__detail-img {
    width: 86.4vw;
    height: 59.4666666667vw;
    border-radius: 4.2666666667vw;
  }
}
.case__detail-header {
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .case__detail-header {
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .case__detail-header {
    gap: 6.4vw;
  }
}
.case__detail-title {
  width: 34.375vw;
  font-size: 2.7777777778vw;
  font-weight: 700;
  line-height: 160%;
}
@media (max-width: 1020px) {
  .case__detail-title {
    width: 100%;
    font-size: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .case__detail-title {
    font-size: 8.5333333333vw;
  }
}
.case__detail-meta {
  display: flex;
  gap: 0.5555555556vw;
  align-items: center;
}
@media (max-width: 1020px) {
  .case__detail-meta {
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .case__detail-meta {
    gap: 2.1333333333vw;
  }
}
.case__detail-tag {
  display: inline-block;
  background-color: var(--clr-bluegray);
  border-radius: 69.375vw;
  padding: 0.2777777778vw 1.6666666667vw;
  font-size: 0.9722222222vw;
  font-weight: 500;
  line-height: 160%;
}
@media (max-width: 1020px) {
  .case__detail-tag {
    border-radius: 130.078125vw;
    padding: 0.5208333333vw 3.125vw;
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .case__detail-tag {
    border-radius: 266.4vw;
    padding: 1.0666666667vw 6.4vw;
    font-size: 3.7333333333vw;
  }
}
.case__detail-name {
  font-size: 2.2222222222vw;
  font-weight: 700;
  line-height: 160%;
}
@media (max-width: 1020px) {
  .case__detail-name {
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .case__detail-name {
    font-size: 5.3333333333vw;
  }
}
.case__detail-cta {
  position: absolute;
  top: 1.6666666667vw;
  right: 6.9444444444vw;
  padding: 0.8333333333vw 1.6666666667vw;
  border-radius: 6.875vw;
  background-color: var(--clr-black);
  color: var(--clr-white);
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 150%;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .case__detail-cta {
    display: none;
  }
}
.case__detail-cta:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}
.case__detail-content {
  background-color: var(--clr-bluegray);
  padding: 2.7777777778vw 0 5.5555555556vw;
  position: relative;
}
@media (max-width: 1020px) {
  .case__detail-content {
    padding: 3.125vw 0;
  }
}
@media (max-width: 767px) {
  .case__detail-content {
    padding: 6.4vw 0 10.6666666667vw;
  }
}
.case__detail-container {
  max-width: 80.5555555556vw;
  margin: 0 auto;
  display: flex;
  gap: 2.7777777778vw;
  align-items: flex-start;
}
@media (max-width: 1020px) {
  .case__detail-container {
    max-width: 79.1666666667vw;
    flex-direction: column;
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .case__detail-container {
    gap: 10.6666666667vw;
  }
}
.case__detail-main {
  background-color: var(--clr-white);
  flex: 1;
  max-width: 59.1666666667vw;
  width: 100%;
  border-radius: 1.6666666667vw;
  padding: 2.7777777778vw;
  display: flex;
  flex-direction: column;
  gap: 5.5555555556vw;
}
@media (max-width: 1020px) {
  .case__detail-main {
    max-width: 100%;
    border-radius: 3.125vw;
    padding: 5.2083333333vw;
    gap: 10.4166666667vw;
  }
}
@media (max-width: 767px) {
  .case__detail-main {
    border-radius: 6.4vw;
    padding: 10.6666666667vw 5.3333333333vw;
    gap: 21.3333333333vw;
  }
}
.case__detail-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5555555556vw;
  margin-bottom: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .case__detail-section-header {
    gap: 1.0416666667vw;
    margin-bottom: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .case__detail-section-header {
    gap: 2.1333333333vw;
    margin-bottom: 6.4vw;
  }
}
.case__detail-section-label {
  width: auto;
  height: 1.875vw;
}
@media (max-width: 1020px) {
  .case__detail-section-label {
    height: 3.515625vw;
  }
}
@media (max-width: 767px) {
  .case__detail-section-label {
    height: 6.4vw;
  }
}
.case__detail-section-title {
  color: var(--clr-black);
  font-size: 2.7777777778vw;
  font-weight: 700;
  line-height: 150%;
  text-align: center;
}
@media (max-width: 1020px) {
  .case__detail-section-title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .case__detail-section-title {
    font-size: 8.5333333333vw;
  }
}
.case__detail-section-content {
  display: flex;
  gap: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .case__detail-section-content {
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .case__detail-section-content {
    gap: 6.4vw;
    flex-direction: column;
  }
}
.case__detail-section-content--single {
  flex-direction: column;
}
.case__detail-section-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .case__detail-section-text {
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .case__detail-section-text {
    gap: 6.4vw;
  }
}
.case__detail-section-subtitle {
  color: var(--clr-black);
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1020px) {
  .case__detail-section-subtitle {
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .case__detail-section-subtitle {
    font-size: 6.4vw;
  }
}
.case__detail-section-description {
  color: var(--clr-black);
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.02em;
}
@media (max-width: 1020px) {
  .case__detail-section-description {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .case__detail-section-description {
    font-size: 4.8vw;
  }
}
.case__detail-section-image {
  width: 17.7083333333vw;
  height: 22.2916666667vw;
  border-radius: 1.1111111111vw;
  overflow: hidden;
}
@media (max-width: 1020px) {
  .case__detail-section-image {
    width: 26.0416666667vw;
    height: 32.8125vw;
    border-radius: 1.5625vw;
  }
}
@media (max-width: 767px) {
  .case__detail-section-image {
    width: 100%;
    height: 85.6vw;
    border-radius: 4.2666666667vw;
  }
}
.case__detail-section-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case__detail-highlight-text {
  display: inline;
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75%, rgb(255, 212, 0) 75%);
  color: var(--clr-black);
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 150%;
  padding: 0.1388888889vw 0;
}
@media (max-width: 1020px) {
  .case__detail-highlight-text {
    font-size: 3.125vw;
    padding: 0.2604166667vw 0;
    letter-spacing: -1px;
  }
}
@media (max-width: 767px) {
  .case__detail-highlight-text {
    font-size: 6.4vw;
    padding: 0.5333333333vw 0;
  }
}
.case__detail-image {
  width: 100%;
  height: 28.8194444444vw;
  border-radius: 1.1111111111vw;
  object-fit: cover;
}
@media (max-width: 1020px) {
  .case__detail-image {
    height: 54.0364583333vw;
    border-radius: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .case__detail-image {
    height: 53.6vw;
    border-radius: 4.2666666667vw;
  }
}
.case__detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case__detail-share-area {
  width: 53.6111111111vw;
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .case__detail-share-area {
    width: 100%;
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .case__detail-share-area {
    gap: 6.4vw;
  }
}
.case__detail-divider {
  width: 100%;
  max-width: 46.6666666667vw;
  height: 1px;
  border: none;
  background-color: var(--clr-gray5);
  margin: 0;
}
@media (max-width: 1020px) {
  .case__detail-divider {
    max-width: 100%;
  }
}
.case__detail-share-buttons {
  display: flex;
  gap: 0.5555555556vw;
}
@media (max-width: 1020px) {
  .case__detail-share-buttons {
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .case__detail-share-buttons {
    gap: 2.1333333333vw;
  }
}
.case__detail-share-btn {
  display: flex;
  align-items: center;
  gap: 0.5555555556vw;
  padding: 0.2777777778vw 1.1111111111vw 0.2777777778vw 0.5555555556vw;
  border: 1px solid var(--clr-black);
  border-radius: 1.6666666667vw;
  background-color: var(--clr-white);
  color: var(--clr-black);
  text-decoration: none;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .case__detail-share-btn {
    gap: 1.0416666667vw;
    padding: 0.5208333333vw 2.0833333333vw 0.5208333333vw 1.0416666667vw;
    border-radius: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .case__detail-share-btn {
    gap: 2.1333333333vw;
    padding: 1.0666666667vw 4.2666666667vw 1.0666666667vw 2.1333333333vw;
    border-radius: 4.2666666667vw;
  }
}
.case__detail-share-btn img {
  width: 1.6666666667vw;
  height: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .case__detail-share-btn img {
    width: 3.125vw;
    height: 3.125vw;
  }
}
@media (max-width: 767px) {
  .case__detail-share-btn img {
    width: 6.4vw;
    height: 6.4vw;
  }
}
.case__detail-share-btn span {
  font-size: 0.9722222222vw;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1020px) {
  .case__detail-share-btn span {
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .case__detail-share-btn span {
    font-size: 3.7333333333vw;
  }
}
.case__detail-share-btn:hover {
  background-color: var(--clr-yellow);
}
.case__detail-sidebar {
  width: 18.6111111111vw;
  flex-shrink: 0;
}
@media (max-width: 1400px) {
  .case__detail-sidebar {
    position: sticky;
    top: 3.4722222222vw;
    right: 0;
  }
}
@media (max-width: 1020px) {
  .case__detail-sidebar {
    position: static;
    width: 100%;
  }
}
.case__detail-other {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .case__detail-other {
    gap: 2.0833333333vw;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .case__detail-other {
    gap: 6.4vw;
    width: 100%;
  }
}
.case__detail-other-header {
  display: flex;
  align-items: center;
  gap: 0.5555555556vw;
}
@media (max-width: 1020px) {
  .case__detail-other-header {
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .case__detail-other-header {
    gap: 2.1333333333vw;
  }
}
.case__detail-other-icon {
  width: 1.6666666667vw;
  height: 1.6666666667vw;
}
@media (max-width: 1020px) {
  .case__detail-other-icon {
    width: 3.125vw;
    height: 3.125vw;
  }
}
@media (max-width: 767px) {
  .case__detail-other-icon {
    width: 6.4vw;
    height: 6.4vw;
  }
}
.case__detail-other-title {
  color: var(--clr-black);
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1020px) {
  .case__detail-other-title {
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .case__detail-other-title {
    font-size: 6.4vw;
  }
}
.case__detail-other-cases {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .case__detail-other-cases {
    gap: 2.0833333333vw;
    width: 100%;
    max-width: 100%;
    flex-direction: row;
  }
}
@media (max-width: 767px) {
  .case__detail-other-cases {
    gap: 4.2666666667vw;
    flex-direction: column;
  }
}
.case__detail-case-btn {
  display: block;
  width: 18.6111111111vw;
  padding: 1.1111111111vw;
  border: 1px solid #A0A0A0;
  border-radius: 1.6666666667vw;
  background-color: var(--clr-white);
  color: var(--clr-black);
  text-decoration: none;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .case__detail-case-btn {
    width: 100%;
    padding: 2.0833333333vw 1.0416666667vw 2.0833333333vw 2.0833333333vw;
    border-radius: 3.125vw;
  }
}
@media (max-width: 767px) {
  .case__detail-case-btn {
    padding: 4.2666666667vw 2.1333333333vw 4.2666666667vw 6.4vw;
    border-radius: 6.4vw;
  }
}
.case__detail-case-btn:hover {
  background-color: var(--clr-yellow);
}
.case__detail-case-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .case__detail-case-info {
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .case__detail-case-info {
    gap: 0;
  }
}
.case__detail-case-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5555555556vw;
}
@media (max-width: 1020px) {
  .case__detail-case-meta {
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .case__detail-case-meta {
    gap: 2.1333333333vw;
  }
}
.case__detail-case-tag {
  display: inline-block;
  background-color: var(--clr-bluegray);
  border-radius: 69.375vw;
  padding: 0.2777777778vw 1.6666666667vw;
  font-size: 0.9722222222vw;
  font-weight: 500;
  line-height: 160%;
  width: fit-content;
}
@media (max-width: 1020px) {
  .case__detail-case-tag {
    padding: 0.5208333333vw 3.125vw;
    font-size: 1.8229166667vw;
  }
}
@media (max-width: 767px) {
  .case__detail-case-tag {
    padding: 1.0666666667vw 6.4vw;
    font-size: 3.7333333333vw;
  }
}
.case__detail-case-name {
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1020px) {
  .case__detail-case-name {
    font-size: 2.34375vw;
    white-space: nowrap;
  }
}
@media (max-width: 767px) {
  .case__detail-case-name {
    font-size: 4.8vw;
  }
}
.case__detail-case-arrow {
  width: 2.2222222222vw;
  height: 2.2222222222vw;
  flex-shrink: 0;
}
@media (max-width: 1020px) {
  .case__detail-case-arrow {
    width: 4.1666666667vw;
    height: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .case__detail-case-arrow {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
  }
}

.about__mv {
  padding: 2.7777777778vw 2.7777777778vw 0;
  position: relative;
}
@media (max-width: 1020px) {
  .about__mv {
    padding: 3.125vw 5.2083333333vw 0;
  }
}
@media (max-width: 767px) {
  .about__mv {
    padding: 0;
  }
}
.about__mv-img {
  width: 100%;
  height: 100%;
}
.about__mv-content {
  position: absolute;
  top: 13.75vw;
  right: 8.3333333333vw;
  display: flex;
  flex-direction: column;
  gap: 1.6666666667vw;
  width: 33.9583333333vw;
}
@media (max-width: 1020px) {
  .about__mv-content {
    top: 16.796875vw;
    right: 50%;
    transform: translateX(50%);
    width: 84.375vw;
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .about__mv-content {
    top: 32vw;
    width: 87.2vw;
    gap: 6.4vw;
  }
}
.about__mv-title {
  color: var(--clr-black);
  font-size: 3.3333333333vw;
  font-weight: 900;
  line-height: 120%;
  text-align: center;
}
@media (max-width: 1020px) {
  .about__mv-title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .about__mv-title {
    font-size: 8.5333333333vw;
  }
}
.about__mv-text {
  color: var(--clr-black);
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.5px;
}
@media (max-width: 1020px) {
  .about__mv-text {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .about__mv-text {
    font-size: 4.8vw;
  }
}
.about__mv-cta {
  position: absolute;
  top: 4.4444444444vw;
  right: 6.9444444444vw;
  padding: 0.8333333333vw 1.6666666667vw;
  border-radius: 6.875vw;
  background-color: var(--clr-black);
  color: var(--clr-white);
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 150%;
  transition: 0.3s;
}
@media (max-width: 1020px) {
  .about__mv-cta {
    display: none;
  }
}
.about__mv-cta:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}
.about__vision {
  background: linear-gradient(180deg, #D9EFFF 0%, #F2F9FF 100%);
  padding: 6.9444444444vw 9.7222222222vw 8.6111111111vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.5555555556vw;
}
@media (max-width: 1020px) {
  .about__vision {
    padding: 10.4166666667vw 5.2083333333vw 10.4166666667vw;
    gap: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .about__vision {
    padding: 10.6666666667vw 6.4vw;
    gap: 10.6666666667vw;
  }
}
.about__vision-header {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1111111111vw;
  width: 100%;
}
@media (max-width: 1020px) {
  .about__vision-header {
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .about__vision-header {
    gap: 4.2666666667vw;
  }
}
.about__vision-subtitle {
  height: 1.875vw;
}
@media (max-width: 1020px) {
  .about__vision-subtitle {
    height: 3.515625vw;
  }
}
@media (max-width: 767px) {
  .about__vision-subtitle {
    height: 7.2vw;
  }
}
.about__vision-title {
  display: inline-flex;
  color: var(--clr-black);
  font-size: 3.3333333333vw;
  font-weight: 900;
  line-height: 120%;
  background: linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #FFD400 75.83%);
}
@media (max-width: 1020px) {
  .about__vision-title {
    font-size: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .about__vision-title {
    font-size: 10.6666666667vw;
    display: inline;
  }
}
.about__vision-body {
  display: flex;
  align-items: center;
  gap: 3.8888888889vw;
  width: 100%;
}
@media (max-width: 1020px) {
  .about__vision-body {
    gap: 5.2083333333vw;
    align-items: flex-start;
  }
}
@media (max-width: 767px) {
  .about__vision-body {
    flex-direction: column;
    gap: 10.6666666667vw;
  }
}
.about__vision-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5555555556vw;
}
@media (max-width: 1020px) {
  .about__vision-content {
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .about__vision-content {
    gap: 2.1333333333vw;
  }
}
.about__vision-stat {
  display: flex;
  margin-bottom: 0.5555555556vw;
  color: var(--clr-black);
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 220%;
}
@media (max-width: 1020px) {
  .about__vision-stat {
    flex-wrap: wrap;
    margin-bottom: 1.0416666667vw;
    font-size: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .about__vision-stat {
    margin-bottom: 2.1333333333vw;
    font-size: 4.8vw;
  }
}
.about__vision-stat-number {
  display: inline-flex;
  align-items: center;
  background: var(--underline, linear-gradient(180deg, rgba(255, 212, 0, 0) 75.83%, #FFD400 75.83%));
  color: var(--clr-black);
  font-weight: 700;
  line-height: 140%;
}
.about__vision-text {
  color: var(--clr-black);
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 200%;
}
@media (max-width: 1020px) {
  .about__vision-text {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .about__vision-text {
    font-size: 4.8vw;
  }
}
.about__vision-img {
  width: 39.0277777778vw;
  height: 43.4027777778vw;
  background-color: var(--clr-white);
  border-radius: 1.3888888889vw;
  object-fit: cover;
}
@media (max-width: 1020px) {
  .about__vision-img {
    width: 42.4479166667vw;
    height: 47.1354166667vw;
    border-radius: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .about__vision-img {
    width: 97.8666666667vw;
    height: 86.1333333333vw;
    border-radius: 5.3333333333vw;
  }
}
.about__story {
  max-width: 80.5555555556vw;
  width: 100%;
  margin: 0 auto;
  padding: 6.9444444444vw 0;
}
@media (max-width: 1020px) {
  .about__story {
    max-width: 89.5833333333vw;
    padding: 10.4166666667vw 0;
  }
}
@media (max-width: 767px) {
  .about__story {
    max-width: 87.2vw;
    padding: 10.6666666667vw 0;
  }
}
.about__story-section {
  background-color: var(--clr-bluegray);
  border-radius: 1.6666666667vw;
  padding: 2.7777777778vw;
  display: flex;
  gap: 3.8888888889vw;
  width: 100%;
}
@media (max-width: 1020px) {
  .about__story-section {
    padding: 4.1666666667vw;
    gap: 5.2083333333vw;
    border-radius: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .about__story-section {
    padding: 10.6666666667vw 6.4vw;
    gap: 10.6666666667vw;
    border-radius: 6.4vw;
    flex-direction: column;
  }
}
.about__story-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1111111111vw;
  margin-bottom: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .about__story-header {
    gap: 2.0833333333vw;
    margin-bottom: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .about__story-header {
    gap: 4.2666666667vw;
    margin-bottom: 6.4vw;
  }
}
.about__story-subtitle {
  height: 1.875vw;
}
@media (max-width: 1020px) {
  .about__story-subtitle {
    height: 3.515625vw;
  }
}
@media (max-width: 767px) {
  .about__story-subtitle {
    height: 7.2vw;
  }
}
.about__story-title {
  color: var(--clr-black);
  font-size: 3.3333333333vw;
  font-weight: 900;
  line-height: 120%;
  text-align: center;
  margin: 0;
}
@media (max-width: 1020px) {
  .about__story-title {
    font-size: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .about__story-title {
    font-size: 10.6666666667vw;
    text-align: start;
  }
}
.about__story-content {
  display: flex;
  gap: 5.5555555556vw;
  width: 80.5555555556vw;
}
@media (max-width: 1020px) {
  .about__story-content {
    flex-direction: column;
    gap: 5.2083333333vw;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .about__story-content {
    gap: 10.6666666667vw;
  }
}
.about__story-img {
  width: 24.7222222222vw;
  height: 32.7777777778vw;
  border-radius: 1.3888888889vw;
  object-fit: cover;
}
@media (max-width: 1020px) {
  .about__story-img {
    width: 39.0625vw;
    height: 51.8229166667vw;
    border-radius: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .about__story-img {
    width: 87.2vw;
    height: 58.6666666667vw;
    border-radius: 5.3333333333vw;
  }
}
.about__story-text {
  color: var(--clr-black);
  font-size: 1.25vw;
  font-weight: 400;
  line-height: 200%;
}
@media (max-width: 1020px) {
  .about__story-text {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .about__story-text {
    font-size: 4.8vw;
  }
}
.about__story-text span {
  font-weight: 700;
}
.about__story-quote {
  background-color: var(--clr-blue);
  border-radius: 1.6666666667vw;
  padding: 1.6666666667vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-black);
  font-size: 2.2222222222vw;
  font-weight: 700;
  line-height: 150%;
  width: 100%;
  margin: 3.3333333333vw 0 5.5555555556vw;
}
@media (max-width: 1020px) {
  .about__story-quote {
    border-radius: 0.5208333333vw;
    padding: 3.125vw;
    font-size: 3.125vw;
  }
}
@media (max-width: 767px) {
  .about__story-quote {
    border-radius: 6.4vw;
    padding: 6.4vw;
    font-size: 4.2666666667vw;
    text-align: center;
  }
}
.about__story-personal {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .about__story-personal {
    gap: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .about__story-personal {
    gap: 6.4vw;
  }
}
.about__story-personal-text {
  color: var(--clr-black);
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.02778em;
}
@media (max-width: 1020px) {
  .about__story-personal-text {
    font-size: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .about__story-personal-text {
    font-size: 4.8vw;
  }
}
.about__story-personal-img {
  width: 24.7222222222vw;
  height: 30.5555555556vw;
  border-radius: 1.3888888889vw;
  object-fit: cover;
}
@media (max-width: 1020px) {
  .about__story-personal-img {
    width: 39.0625vw;
    height: 48.3072916667vw;
    border-radius: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .about__story-personal-img {
    width: 74.6666666667vw;
    height: 92.2666666667vw;
    border-radius: 3.2vw;
  }
}
.about__story-author {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
}
@media (max-width: 1020px) {
  .about__story-author {
    gap: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .about__story-author {
    gap: 4.2666666667vw;
  }
}
.about__story-company {
  color: var(--clr-black);
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 150%;
  margin: 0;
}
@media (max-width: 1020px) {
  .about__story-company {
    font-size: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .about__story-company {
    font-size: 5.3333333333vw;
  }
}
.about__story-name {
  color: var(--clr-black);
  font-size: 1.6666666667vw;
  font-weight: 700;
  line-height: 150%;
  margin: 0;
}
@media (max-width: 1020px) {
  .about__story-name {
    font-size: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .about__story-name {
    font-size: 4.8vw;
  }
}
.about__company {
  background-color: var(--clr-bluegray);
  padding: 8.3333333333vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 1020px) {
  .about__company {
    padding: 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .about__company {
    padding: 10.6666666667vw;
  }
}
.about__company-card {
  background-color: var(--clr-white);
  border-radius: 1.6666666667vw;
  padding: 2.7777777778vw 5.5555555556vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.3333333333vw;
  width: 100%;
  max-width: 83.3333333333vw;
}
@media (max-width: 1020px) {
  .about__company-card {
    border-radius: 3.125vw;
    padding: 5.2083333333vw;
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .about__company-card {
    border-radius: 6.4vw;
    padding: 10.6666666667vw 2.6666666667vw;
    gap: 6.4vw;
  }
}
.about__company-title {
  color: var(--clr-black);
  font-size: 2.2222222222vw;
  font-weight: 700;
  line-height: 150%;
  text-align: center;
  margin: 0;
}
@media (max-width: 1020px) {
  .about__company-title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .about__company-title {
    font-size: 8.5333333333vw;
  }
}
.about__company-info {
  display: flex;
  flex-direction: column;
  gap: 1.1111111111vw;
  width: 100%;
}
@media (max-width: 1020px) {
  .about__company-info {
    gap: 2.34375vw;
  }
}
@media (max-width: 767px) {
  .about__company-info {
    gap: 4.2666666667vw;
  }
}
.about__company-item {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .about__company-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.0416666667vw;
  }
}
@media (max-width: 767px) {
  .about__company-item {
    gap: 2.1333333333vw;
  }
}
.about__company-label {
  color: var(--clr-black);
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 200%;
  margin: 0;
  min-width: 8.3333333333vw;
  flex-shrink: 0;
}
@media (max-width: 1020px) {
  .about__company-label {
    font-size: 2.34375vw;
    min-width: auto;
  }
}
@media (max-width: 767px) {
  .about__company-label {
    font-size: 4.8vw;
  }
}
.about__company-value {
  color: var(--clr-black);
  font-size: 1.25vw;
  font-weight: 400;
  line-height: 180%;
  margin: 0;
  flex: 1;
}
@media (max-width: 1020px) {
  .about__company-value {
    font-size: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .about__company-value {
    font-size: 4.8vw;
  }
}

.terms {
  max-width: 83.3333333333vw;
  width: 100%;
  margin: 0 auto;
  padding: 9.7222222222vw 0 5.5555555556vw;
}
@media (max-width: 1020px) {
  .terms {
    max-width: 89.5833333333vw;
    padding: 5.2083333333vw 0 5.2083333333vw;
  }
}
@media (max-width: 767px) {
  .terms {
    padding: 28.5333333333vw 0 8.5333333333vw;
  }
}
.terms__inner {
  display: flex;
  flex-direction: column;
  gap: 2.7777777778vw;
}
@media (max-width: 1020px) {
  .terms__inner {
    gap: 3.125vw;
  }
}
@media (max-width: 767px) {
  .terms__inner {
    gap: 6.4vw;
  }
}
.terms__title {
  text-align: center;
  color: var(--clr-black);
  margin-top: 0.5555555556vw;
  font-size: 2.2222222222vw;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1020px) {
  .terms__title {
    font-size: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .terms__title {
    font-size: 8.5333333333vw;
  }
}
.terms__tab-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 6.5277777778vw;
}
@media (max-width: 1020px) {
  .terms__tab-container {
    height: 16.1458333333vw;
  }
}
@media (max-width: 767px) {
  .terms__tab-container {
    height: 31.7333333333vw;
  }
}
.terms__tab-header {
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 150%;
  width: 50%;
  height: max-content;
  text-align: center;
  padding: 1.1111111111vw 1.6666666667vw;
  border: 1px solid var(--clr-black);
  background-color: var(--clr-black);
  color: var(--clr-white);
  cursor: pointer;
  transition: 0.3s;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1020px) {
  .terms__tab-header {
    font-size: 2.6041666667vw;
    padding: 2.0833333333vw 3.125vw;
  }
}
@media (max-width: 767px) {
  .terms__tab-header {
    font-size: 4.2666666667vw;
    padding: 2.1333333333vw 4.2666666667vw;
  }
}
.terms__tab-header.-left {
  border-radius: 1.6666666667vw 0 0 0;
}
@media (max-width: 1020px) {
  .terms__tab-header.-left {
    border-radius: 3.125vw 0 0 0;
  }
}
@media (max-width: 767px) {
  .terms__tab-header.-left {
    border-radius: 6.4vw 0 0 0;
  }
}
.terms__tab-header.-right {
  border-radius: 0 1.6666666667vw 0 0;
}
@media (max-width: 1020px) {
  .terms__tab-header.-right {
    border-radius: 0 3.125vw 0 0;
  }
}
@media (max-width: 767px) {
  .terms__tab-header.-right {
    border-radius: 0 6.4vw 0 0;
  }
}
.terms__tab-header.active {
  padding: 2.2222222222vw 1.6666666667vw;
  border-radius: 1.6666666667vw 1.6666666667vw 0 0;
  background-color: var(--clr-white);
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .terms__tab-header.active {
    padding: 4.1666666667vw 3.125vw;
    border-radius: 3.125vw 3.125vw 0 0;
    height: 16.1458333333vw;
  }
}
@media (max-width: 767px) {
  .terms__tab-header.active {
    padding: 4.2666666667vw;
    border-radius: 6.4vw 6.4vw 0 0;
    height: 31.7333333333vw;
  }
}
.terms__content {
  display: none;
}
.terms__content.show {
  display: block;
}
.terms__content-container {
  padding: 5.5555555556vw 6.9444444444vw;
  display: flex;
  flex-direction: column;
  gap: 2.2222222222vw;
  border: 1px solid var(--clr-black);
  border-radius: 0 0 1.6666666667vw 1.6666666667vw;
  border-top: none;
}
@media (max-width: 1020px) {
  .terms__content-container {
    padding: 5.2083333333vw;
    border-radius: 0 0 3.125vw 3.125vw;
  }
}
.terms__content-sub {
  font-size: 1.3888888889vw;
  font-weight: 700;
  line-height: 150%;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .terms__content-sub {
    font-size: 2.6041666667vw;
  }
}
@media (max-width: 767px) {
  .terms__content-sub {
    font-size: 5.3333333333vw;
  }
}
.terms__content-text {
  font-size: 1.1111111111vw;
  font-weight: 500;
  line-height: 180%;
  color: var(--clr-black);
}
@media (max-width: 1020px) {
  .terms__content-text {
    font-size: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .terms__content-text {
    font-size: 4.2666666667vw;
  }
}
.terms__content-end {
  font-size: 1.1111111111vw;
  font-weight: 500;
  line-height: 180%;
  color: var(--clr-black);
  text-align: end;
}
@media (max-width: 1020px) {
  .terms__content-end {
    font-size: 2.0833333333vw;
  }
}
@media (max-width: 767px) {
  .terms__content-end {
    font-size: 4.2666666667vw;
  }
}

.only-pc {
  display: block;
}
@media (max-width: 1020px) {
  .only-pc {
    display: none;
  }
}

.only-tb {
  display: none;
}
@media (max-width: 1020px) {
  .only-tb {
    display: block;
  }
}

.only-sp {
  display: none;
}
@media (max-width: 767px) {
  .only-sp {
    display: block;
  }
}

.other-tb {
  display: block;
}
@media (max-width: 1020px) {
  .other-tb {
    display: none;
  }
}
@media (max-width: 767px) {
  .other-tb {
    display: block;
  }
}

.only-pc-tb {
  display: block;
}
@media (max-width: 767px) {
  .only-pc-tb {
    display: none;
  }
}

.tb {
  display: none;
}
@media (max-width: 1020px) {
  .tb {
    display: block;
  }
}
@media (max-width: 767px) {
  .tb {
    display: none;
  }
}

/* ──────────────────────────────────────────
   Contact Form 7 のマークアップに対応させる
────────────────────────────────────────── */
/* 1) CF7 標準CSSを無効化*/
/* 2) wpcf7-wrap を普通のブロックに */
.top-contact__form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* 3) input/textarea を 100% 幅に */
.top-contact__form-input,
.top-contact__form-textarea {
  width: 100%;
  padding: 0.8em;
  border: 1px solid var(--clr-border);
  border-radius: 4px;
  box-sizing: border-box;
}

/* ボタンをブロックにしてセンター寄せ */
.top-contact__form .wpcf7-form-control.wpcf7-submit {
  display: block;
  margin: 2em auto 0; /* 上に少し余白、左右は自動で中央に */
  padding: 1.3vw 8vw;
  background-color: var(--clr-black);
  color: var(--clr-white);
  font-size: 1.3em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.top-contact__form .wpcf7-form-control.wpcf7-submit:hover {
  background-color: var(--clr-yellow);
  color: var(--clr-black);
}

.top-contact .wpcf7-form input[type=checkbox],
.top-contact .wpcf7-form input[type=radio] {
  all: revert;
  display: inline-block; /* ブラウザ標準のインラインブロック */
  appearance: auto; /* 標準UIを復活 */
  -webkit-appearance: auto; /* Safari 用 */
  -moz-appearance: auto; /* Firefox 用 */
  width: 1em;
  height: 1em;
  margin: 0 0.5em 0 0;
}

/* CF7 acceptance ラッパー全体 */
.top-contact__form .wpcf7-acceptance {
  margin: 1em 0;
  font-size: 16px;
}

.top-contact__form .wpcf7-acceptance input[type=checkbox] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-radius: 4px;
  background: #fff;
  position: relative;
  cursor: pointer;
}

.top-contact__form .wpcf7-acceptance input[type=checkbox]:checked {
  background: var(--clr-system-blue);
  border-color: var(--clr-system-blue);
}

.top-contact__form .wpcf7-acceptance input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 6px;
  height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(50deg);
}

/* ラベル文言 */
.top-contact__form .wpcf7-acceptance .wpcf7-list-item-label {
  vertical-align: middle;
  margin-left: 0.5em;
}

/* ──────────────────────────────────────────
   CF7 acceptance のスタイル調整
────────────────────────────────────────── */
/* ベースの文字サイズ */
.top-contact__form .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 1.2vw !important;
}

@media (max-width: 1020px) {
  .top-contact__form .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 2vw !important;
  }
}
@media (max-width: 767px) {
  .top-contact__form .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 3.2vw !important;
  }
}
/* 4) リンク部分だけ色を変える */
.top-contact__form .wpcf7-acceptance .wpcf7-list-item-label a {
  color: var(--clr-link-blue);
  text-decoration: underline;
}

/* 5) ラベルテキストとの隙間 */
.top-contact__form .wpcf7-acceptance .wpcf7-list-item-label {
  vertical-align: middle;
  margin-left: 0.5em;
}

.wpcf7-response-output {
  color: red;
}

span.wpcf7-not-valid-tip {
  color: red;
}

.screen-reader-response {
  display: none !important;
}

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