@charset "UTF-8";
@layer restricted, properties, theme, base, layouts, pages, components, utilities, override;
/*
使用例：
.element {
  // 通常の範囲指定
  @include range('sm', 'lg') {
    font-size: 1.2rem;
  }
  // Retina対応の範囲指定
  @include range('md', 'xl', true) {
    background-image: url('image@2x.jpg');
  }
  // betweenエイリアスの使用
  @include between('xs', 'md') {
    padding: 1rem;
  }
}
*/
@layer components {
  /* ==================================================
  * button
  ================================================== */
  .button {
    font-family: var(--font-aoto-bold);
    font-size: 1rem;
    color: var(--color-white);
    background-color: var(--color-base);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-column-gap: 0.3125rem;
       -moz-column-gap: 0.3125rem;
            column-gap: 0.3125rem;
    letter-spacing: 0;
    min-block-size: 4.5rem;
    padding-inline: 0.75em;
    border: solid 1px var(--color-base);
    border-radius: 9999px;
    overflow: clip;
    -webkit-transition: color 0.4s var(--ease-in-out-quart), background-color 0.4s var(--ease-in-out-quart), border-color 0.4s var(--ease-in-out-quart);
    transition: color 0.4s var(--ease-in-out-quart), background-color 0.4s var(--ease-in-out-quart), border-color 0.4s var(--ease-in-out-quart);
  }
  .button:not(:disabled) {
    cursor: pointer;
  }
  .button.--shadow {
    -webkit-box-shadow: 0.25rem 0.375rem 0 rgba(15, 46, 50, 0.1);
            box-shadow: 0.25rem 0.375rem 0 rgba(15, 46, 50, 0.1);
  }
  .button:has(i):has(i:first-child) {
    -webkit-padding-end: 2em;
            padding-inline-end: 2em;
  }
  .button:has(i):has(i:last-child) {
    -webkit-padding-start: 2em;
            padding-inline-start: 2em;
  }
  .button:has(.button__circle) {
    -webkit-column-gap: clamp(0.75rem, 0.653rem + 0.4vw, 1rem);
       -moz-column-gap: clamp(0.75rem, 0.653rem + 0.4vw, 1rem);
            column-gap: clamp(0.75rem, 0.653rem + 0.4vw, 1rem);
  }
  .button:has(.button__circle.icon-arrow-right) {
    min-block-size: 5.25rem;
  }
  .button .button__label {
    text-box: trim-both cap alphabetic;
  }
  .button .button__circle {
    font-size: 0.875rem;
    color: var(--color-base);
    background-color: var(--color-white);
    display: grid;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    aspect-ratio: 1;
    place-items: center;
    aspect-ratio: 1;
    block-size: 3rem;
    border-radius: 50%;
    overflow: clip;
    -webkit-transition: color 0.4s var(--ease-in-out-quart), background-color 0.4s var(--ease-in-out-quart);
    transition: color 0.4s var(--ease-in-out-quart), background-color 0.4s var(--ease-in-out-quart);
  }
  .button .icon-arrow-right {
    inline-size: 3.75rem;
    block-size: 3.75rem;
  }
  .button .icon-blank::before,
  .button .icon-download::before {
    display: inline-block;
    -webkit-transition: translate 0.4s var(--ease-in-out-quart), -webkit-box-shadow 0.4s var(--ease-in-out-quart);
    transition: translate 0.4s var(--ease-in-out-quart), -webkit-box-shadow 0.4s var(--ease-in-out-quart);
    transition: box-shadow 0.4s var(--ease-in-out-quart), translate 0.4s var(--ease-in-out-quart);
    transition: box-shadow 0.4s var(--ease-in-out-quart), translate 0.4s var(--ease-in-out-quart), -webkit-box-shadow 0.4s var(--ease-in-out-quart);
  }
  .button .icon-blank {
    font-size: 0.75rem;
  }
  .button .icon-blank::before {
    text-shadow: -3em 3em 0 currentColor;
  }
  .button .icon-download::before {
    text-shadow: 0 -3em 0 currentColor;
  }
  .button:focus-visible {
    color: var(--color-base);
    background-color: var(--color-white);
  }
  .button:focus-visible .button__circle {
    color: var(--color-white);
    background-color: var(--color-base);
    border-color: var(--color-base);
  }
  .button:focus-visible .icon-arrow-right::before {
    -webkit-animation: infinite hover 1s;
            animation: infinite hover 1s;
  }
  .button:focus-visible .icon-blank {
    color: var(--color-base);
  }
  .button:focus-visible .icon-blank::before {
    color: var(--color-white);
    translate: 3em -3em;
  }
  .button:focus-visible .icon-download::before {
    translate: 0 3em;
  }
  @media (any-hover: hover) {
    .button:hover {
      color: var(--color-base);
      background-color: var(--color-white);
      border-color: var(--color-base);
    }
    .button:hover .button__circle {
      color: var(--color-white);
      background-color: var(--color-base);
      border-color: var(--color-base);
    }
    .js-blocklink:hover .button .icon-arrow-right::before, .button:hover .icon-arrow-right::before {
      -webkit-animation: infinite hover 1s;
              animation: infinite hover 1s;
    }
    .js-blocklink:hover .button .icon-blank::before, .button:hover .icon-blank::before {
      translate: 3em -3em;
    }
    .js-blocklink:hover .button .icon-download::before, .button:hover .icon-download::before {
      translate: 0 3em;
    }
  }
  @-webkit-keyframes hover {
    0% {
      translate: 0 0;
      opacity: 1;
    }
    50% {
      translate: 100% 0;
      opacity: 0;
    }
    51% {
      translate: -100% 0;
      opacity: 0;
    }
    100% {
      translate: 0 0;
      opacity: 1;
    }
  }
  @keyframes hover {
    0% {
      translate: 0 0;
      opacity: 1;
    }
    50% {
      translate: 100% 0;
      opacity: 0;
    }
    51% {
      translate: -100% 0;
      opacity: 0;
    }
    100% {
      translate: 0 0;
      opacity: 1;
    }
  }
  @media (width < 40rem) {
    .button {
      font-size: clamp(0.875rem, 0.68rem + 0.8vw, 1rem);
      min-block-size: 3.25rem;
      padding-inline: 0.5714285714em;
    }
    .button.--shadow {
      -webkit-box-shadow: 0.125rem 0.25rem 0 rgba(15, 46, 50, 0.1);
              box-shadow: 0.125rem 0.25rem 0 rgba(15, 46, 50, 0.1);
    }
    .button:has(i):has(i:first-child) {
      -webkit-padding-end: 1.25rem;
              padding-inline-end: 1.25rem;
    }
    .button:has(i):has(i:last-child) {
      -webkit-padding-start: 1.25rem;
              padding-inline-start: 1.25rem;
    }
    .button:has(i) .button__circle {
      font-size: 0.75rem;
      block-size: 2.25rem;
    }
    .button:has(i) .button__circle.icon-arrow-right {
      inline-size: 3rem;
      block-size: 3rem;
    }
    .button:has(.button__circle.icon-arrow-right) {
      min-block-size: 4.5rem;
    }
  }
  @media (width < 24.375rem) {
    .button {
      font-size: 3.5897435897vw;
    }
  }
  .button--blue {
    background-color: var(--color-hover);
    border-color: var(--color-hover);
  }
  .button--blue:focus-visible {
    color: var(--color-hover);
    background-color: var(--color-white);
    border-color: var(--color-hover);
  }
  .button--blue:focus-visible .button__circle {
    color: var(--color-white);
    background-color: var(--color-hover);
  }
  @media (any-hover: hover) {
    .button--blue:hover {
      color: var(--color-hover);
      background-color: var(--color-white);
      border-color: var(--color-hover);
    }
    .button--blue:hover .button__circle {
      color: var(--color-white);
      background-color: var(--color-hover);
    }
  }
  .button--outline {
    font-size: 0.875rem;
    color: var(--color-hover);
    background-color: var(--color-white);
    border-color: var(--color-hover);
    min-block-size: clamp(2.5rem, 2.307rem + 0.79vw, 3rem);
  }
  .button--outline:has(i:last-child):has(.button__circle) {
    -webkit-padding-start: clamp(1.75rem, 1.46rem + 1.19vw, 2.5rem);
            padding-inline-start: clamp(1.75rem, 1.46rem + 1.19vw, 2.5rem);
    -webkit-padding-end: clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem);
            padding-inline-end: clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem);
  }
  .button--outline:focus-visible {
    color: var(--color-hover);
    background-color: var(--color-white);
    border-color: var(--color-hover);
  }
  .button--outline:focus-visible .button__circle {
    color: var(--color-white);
    background-color: var(--color-hover);
  }
  @media (any-hover: hover) {
    .button--outline:hover {
      color: var(--color-hover);
      background-color: var(--color-white);
      border-color: var(--color-hover);
    }
    .button--outline:hover .button__circle {
      color: var(--color-white);
      background-color: var(--color-hover);
    }
  }
  .button--outline .button__circle {
    color: var(--color-white);
    background-color: var(--color-hover);
    inline-size: clamp(1.75rem, 1.653rem + 0.4vw, 2rem) !important;
    block-size: clamp(1.75rem, 1.653rem + 0.4vw, 2rem) !important;
  }
  .button--outline .icon-blank {
    font-size: 0.6875rem;
  }
  .button--white {
    color: var(--color-base);
    background-color: var(--color-white);
    border-color: var(--color-base);
  }
  .button--white .button__circle {
    color: var(--color-white);
    background-color: var(--color-base);
  }
  .button--white:focus-visible {
    color: var(--color-white);
    background-color: var(--color-base);
  }
  .button--white:focus-visible .button__circle {
    color: var(--color-base);
    background-color: var(--color-white);
  }
  @media (any-hover: hover) {
    .button--white:hover {
      color: var(--color-white);
      background-color: var(--color-base);
    }
    .button--white:hover .button__circle {
      color: var(--color-base);
      background-color: var(--color-white);
    }
  }
  .button--nav {
    font-family: var(--font-aoto-debold);
    font-size: 0.875rem;
    background-color: var(--color-hover);
    min-block-size: 3rem;
    padding-inline: 1.25rem;
    border-color: var(--color-hover);
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
  }
  .button--nav:focus-visible {
    color: var(--color-hover);
    background-color: var(--color-white);
    border-color: var(--color-hover);
  }
  .button--nav .icon-blank {
    translate: 0 -0.1em;
  }
  .button--nav .icon-blank::before {
    -webkit-transition: color 0.05s var(--ease-in-out-quart), translate 0.4s var(--ease-in-out-quart), -webkit-box-shadow 0.4s var(--ease-in-out-quart);
    transition: color 0.05s var(--ease-in-out-quart), translate 0.4s var(--ease-in-out-quart), -webkit-box-shadow 0.4s var(--ease-in-out-quart);
    transition: color 0.05s var(--ease-in-out-quart), box-shadow 0.4s var(--ease-in-out-quart), translate 0.4s var(--ease-in-out-quart);
    transition: color 0.05s var(--ease-in-out-quart), box-shadow 0.4s var(--ease-in-out-quart), translate 0.4s var(--ease-in-out-quart), -webkit-box-shadow 0.4s var(--ease-in-out-quart);
  }
  .button--nav .button__label {
    text-box: trim-both cap alphabetic;
  }
  @media (any-hover: hover) {
    .button--nav:hover {
      color: var(--color-hover);
      background-color: var(--color-white);
      border-color: var(--color-hover);
    }
  }
  @media (width < 64rem) {
    .button--nav {
      min-block-size: 2.75rem;
    }
  }
  @media (width < 40rem) {
    .button--nav {
      font-size: 0.8125rem;
      min-block-size: 2.125rem;
    }
    .button--nav .icon-blank {
      font-size: 0.6875rem;
    }
  }
  @media (width < 24.375rem) {
    .button--nav {
      font-size: 3.5897435897vw;
    }
  }
}
@font-face {
  font-family: "icon";
  src: url("../icon/icon.eot?7hyj6k");
  src: url("../icon/icon.eot?7hyj6k#iefix") format("embedded-opentype"), url("../icon/icon.ttf?7hyj6k") format("truetype"), url("../icon/icon.woff?7hyj6k") format("woff"), url("../icon/icon.svg?7hyj6k#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-],
[class*=" icon-"] {
  font-family: "icon" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-link:before {
  content: "\e900";
}

.icon-arrow-up:before {
  content: "\e90c";
}

.icon-arrow-right:before {
  content: "\e901";
}

.icon-arrow-down:before {
  content: "\e90d";
}

.icon-arrow-left:before {
  content: "\e90e";
}

.icon-add:before {
  content: "\e902";
}

.icon-close:before {
  content: "\e903";
}

.icon-scroll:before {
  content: "\e904";
}

.icon-blank:before {
  content: "\e905";
}

.icon-download:before {
  content: "\e906";
}

.icon-x:before {
  content: "\e907";
}

.icon-facebook:before {
  content: "\e908";
}

.icon-line:before {
  content: "\e909";
}

.icon-note:before {
  content: "\e90a";
}

.icon-pinterest:before {
  content: "\e90b";
}

.font-icon {
  font-family: "Material Symbols Outlined";
  letter-spacing: 0;
}

@layer components {
  .modal:not(.is-open) {
    display: none;
  }
  .modal.is-open .modal__scroll__container {
    overflow: auto;
    overflow-x: hidden;
  }
  .modal .modal__overlay {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    inline-size: 100vw;
    z-index: 1000;
    position: fixed;
    inset: 0;
  }
  .modal .modal__scroll__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    inline-size: 100%;
    block-size: 100%;
    padding-block: 3.75rem;
    padding-inline: clamp(1.5rem, 0.631rem + 3.56vw, 3.75rem);
    overscroll-behavior-y: none;
    overflow: hidden;
  }
  .modal .modal__container {
    max-inline-size: 100%;
    min-block-size: 0;
    inline-size: -webkit-fit-content;
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    margin: auto;
    position: relative;
  }
  .modal .modal__content {
    background-color: #f8f7f2;
    max-inline-size: 100%;
    inline-size: 56.25rem;
    overflow-y: auto;
    border-radius: clamp(1.25rem, 1.057rem + 0.79vw, 1.75rem);
  }
  .modal .modal__close {
    font-size: 0.75rem;
    color: var(--color-white);
    background-color: var(--color-base);
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    inline-size: clamp(2.5rem, 2.017rem + 1.98vw, 3.75rem);
    border: solid 1px var(--color-base);
    border-radius: 9999px;
    position: absolute;
    top: calc(clamp(1rem, 0.807rem + 0.79vw, 1.5rem) * -1);
    right: calc(clamp(1rem, 0.807rem + 0.79vw, 1.5rem) * -1);
    cursor: pointer;
  }
  .modal .modal__close i {
    -webkit-transition: rotate 0.4s var(--ease-in-out-quart);
    transition: rotate 0.4s var(--ease-in-out-quart);
  }
  .modal .modal__close:focus-visible {
    color: var(--color-base);
    background-color: var(--color-white);
  }
  .modal .modal__close:focus-visible i {
    rotate: 180deg;
  }
  @media (any-hover: hover) {
    .modal .modal__close:hover {
      color: var(--color-base);
      background-color: var(--color-white);
    }
    .modal .modal__close:hover i {
      rotate: 180deg;
    }
  }
  .micromodal-slide:not(.is-open) {
    display: none;
  }
  .micromodal-slide[aria-hidden=false] .modal__overlay {
    -webkit-animation: mmfadeIn 0.3s var(--ease-out-quart);
            animation: mmfadeIn 0.3s var(--ease-out-quart);
  }
  .micromodal-slide[aria-hidden=false] .modal__container {
    -webkit-animation: mmslideIn 0.3s var(--ease-out-quart);
            animation: mmslideIn 0.3s var(--ease-out-quart);
  }
  .micromodal-slide[aria-hidden=true] .modal__overlay {
    -webkit-animation: mmfadeOut 0.3s var(--ease-out-quart);
            animation: mmfadeOut 0.3s var(--ease-out-quart);
  }
  .micromodal-slide[aria-hidden=true] .modal__container {
    -webkit-animation: mmslideOut 0.3s var(--ease-out-quart);
            animation: mmslideOut 0.3s var(--ease-out-quart);
  }
  .micromodal-slide .modal__container,
  .micromodal-slide .modal__overlay {
    will-change: transform;
  }
}
.modal-support .modal__content {
  display: grid;
  row-gap: clamp(2.5rem, 2.017rem + 1.98vw, 3.75rem);
  inline-size: 70rem;
  padding-block: clamp(2.5rem, 1.366rem + 4.65vw, 3.75rem) clamp(2rem, 0.842rem + 4.75vw, 5rem);
  padding-inline: clamp(1.25rem, 0.043rem + 4.95vw, 4.375rem);
}
.modal-support .support__title {
  font-family: var(--font-aoto-bold);
  font-size: clamp(1.375rem, 1.262rem + 0.47vw, 1.5rem);
  text-align: center;
}
.modal-support .support__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  row-gap: clamp(1.25rem, 0.574rem + 2.77vw, 3rem);
  -webkit-column-gap: clamp(20px, 20px + 10 * (100vw - 1400px) / -580, 40px);
     -moz-column-gap: clamp(20px, 20px + 10 * (100vw - 1400px) / -580, 40px);
          column-gap: clamp(20px, 20px + 10 * (100vw - 1400px) / -580, 40px);
}
.modal-support .support__item {
  font-family: var(--font-aoto-bold);
  font-size: clamp(0.875rem, 0.762rem + 0.47vw, 1rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-padding-after: 1rem;
          padding-block-end: 1rem;
  background-image: repeating-linear-gradient(90deg, rgba(3, 23, 92, 0.3), rgba(3, 23, 92, 0.3) 2px, transparent 2px, transparent 7px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 2px;
  position: relative;
}
.modal-support .support__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 0.5rem;
     -moz-column-gap: 0.5rem;
          column-gap: 0.5rem;
  block-size: 100%;
}
.modal-support .support__item a:focus-visible {
  text-decoration: underline;
}
@media (any-hover: hover) {
  .modal-support .support__item a:hover {
    text-decoration: underline;
  }
}
.modal-support .icon-blank {
  font-size: 0.8em;
}
.modal-support .icon-blank::before {
  display: inline-block;
  vertical-align: baseline;
}

.modal-font .modal__content {
  inline-size: 43.75rem;
  padding-inline: clamp(1.25rem, 0.767rem + 1.98vw, 2.5rem);
  padding-block: clamp(1.25rem, 0.767rem + 1.98vw, 2.5rem) 2.5rem;
}
.modal-font .font__image {
  background-color: #eee;
  aspect-ratio: 310/219;
}
.modal-font .font__content {
  -webkit-padding-before: clamp(1.25rem, 0.767rem + 1.98vw, 2.5rem);
          padding-block-start: clamp(1.25rem, 0.767rem + 1.98vw, 2.5rem);
}
.modal-font .font__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-column-gap: 0.5rem;
     -moz-column-gap: 0.5rem;
          column-gap: 0.5rem;
  row-gap: 1rem;
}
.modal-font .font__name {
  font-family: var(--font-aoto-bold);
  font-size: clamp(0.875rem, 0.762rem + 0.47vw, 1rem);
  color: var(--color-white);
  padding: 0.75rem;
  background-color: var(--color-base);
  border-radius: 0.25rem;
  text-box: trim-both cap alphabetic;
}
.modal-font .font__type {
  font-size: clamp(0.75rem, 0.637rem + 0.47vw, 0.875rem);
  padding: 0.5rem;
  border: solid 1px #9aa2be;
  border-radius: 0.25rem;
  text-box: trim-both cap alphabetic;
}
.modal-font .font__explanation {
  font-family: var(--font-aoto-bold);
  font-size: clamp(1.375rem, 1.035rem + 1.4vw, 1.75rem);
  line-height: 1.4;
  inline-size: 100%;
  word-break: keep-all;
  overflow-wrap: break-word;
  letter-spacing: 0.05em;
}
.modal-font .font__data {
  line-height: 1.6;
  -webkit-margin-before: clamp(2.25rem, 1.864rem + 1.58vw, 3.25rem);
          margin-block-start: clamp(2.25rem, 1.864rem + 1.58vw, 3.25rem);
}
.modal-font .font__data dt {
  font-family: var(--font-aoto-bold);
  font-size: clamp(1rem, 0.773rem + 0.93vw, 1.25rem);
  background-image: repeating-linear-gradient(90deg, rgba(3, 23, 92, 0.3), rgba(3, 23, 92, 0.3) 2px, transparent 2px, transparent 7px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 2px;
  -webkit-padding-after: 0.75rem;
          padding-block-end: 0.75rem;
}
.modal-font .font__data dt + dd {
  -webkit-margin-before: 1.25rem;
          margin-block-start: 1.25rem;
}
.modal-font .font__data dd {
  --_icon-size: 8px;
  font-size: clamp(0.938rem, 0.881rem + 0.23vw, 1rem);
  -webkit-margin-before: 0.75rem;
          margin-block-start: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 0.75rem;
     -moz-column-gap: 0.75rem;
          column-gap: 0.75rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.modal-font .font__data dd:before {
  display: block;
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  aspect-ratio: 1;
  inline-size: var(--_icon-size);
  -webkit-margin-before: calc((1.6em - var(--_icon-size)) / 2 - 1px);
          margin-block-start: calc((1.6em - var(--_icon-size)) / 2 - 1px);
  border: solid 1px currentColor;
  border-radius: 50%;
}
.modal-font .font__data dd + dt {
  -webkit-margin-before: clamp(2rem, 1.547rem + 1.86vw, 2.5rem);
          margin-block-start: clamp(2rem, 1.547rem + 1.86vw, 2.5rem);
}
.modal-font .font__data dd i {
  font-size: 0.9em;
  -webkit-margin-start: 0.1em;
          margin-inline-start: 0.1em;
}
.modal-font .font__data a {
  text-decoration: underline;
  color: #003cff;
}
.modal-font .font__data a:focus-visible {
  text-decoration: none;
}
@media (any-hover: hover) {
  .modal-font .font__data a:hover {
    text-decoration: none;
  }
}
.modal-font .font__secret {
  font-size: clamp(0.938rem, 0.881rem + 0.23vw, 1rem);
  background-color: #cdebec;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-margin-before: clamp(2rem, 1.547rem + 1.86vw, 2.5rem);
          margin-block-start: clamp(2rem, 1.547rem + 1.86vw, 2.5rem);
  padding: clamp(1.25rem, 0.797rem + 1.86vw, 1.75rem);
  border-radius: 0.75rem;
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict;
}
.modal-font .font__subtitle {
  font-family: var(--font-aoto-bold);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.modal-font .font__button {
  text-align: center;
  -webkit-margin-before: clamp(2rem, 1.32rem + 2.79vw, 2.75rem);
          margin-block-start: clamp(2rem, 1.32rem + 2.79vw, 2.75rem);
}
.modal-font.font1 .font__secret {
  background-color: #cdebec;
}
.modal-font.font2 .font__secret {
  background-color: #feea6d;
}
.modal-font.font3 .font__secret {
  background-color: #ffcdc0;
}
.modal-font.font4 .font__secret {
  background-color: #a9dca4;
}
.modal-font.font5 .font__secret {
  background-color: #d5cac1;
}

@media (width >= 40rem) {
  .modal-font .font__secret {
    -webkit-column-gap: 2.5rem;
       -moz-column-gap: 2.5rem;
            column-gap: 2.5rem;
  }
  .modal-font .font__list {
    background-image: repeating-linear-gradient(180deg, var(--color-base), var(--color-base) 2px, transparent 2px, transparent 7px);
    background-position: left top;
    background-repeat: repeat-y;
    background-size: 2px 100%;
    -webkit-padding-start: 2.5rem;
            padding-inline-start: 2.5rem;
  }
}
@media (width < 40rem) {
  .modal-font .font__secret {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 1rem;
  }
  .modal-font .font__subtitle {
    text-align: center;
  }
  .modal-font .font__info {
    row-gap: 0.5rem;
  }
  .modal-font .font__explanation {
    -webkit-margin-before: 0.5rem;
            margin-block-start: 0.5rem;
  }
  .modal-font .font__list {
    background-image: repeating-linear-gradient(90deg, rgba(3, 23, 92, 0.3), rgba(3, 23, 92, 0.3) 2px, transparent 2px, transparent 7px);
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 100% 2px;
    -webkit-padding-before: 1rem;
            padding-block-start: 1rem;
  }
  .modal-font .font__button .button {
    min-block-size: 3.75rem;
  }
  .modal-font .font__button .button .button__circle {
    block-size: 2.75rem;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
  .modal-font .font__button .button .button__label {
    inline-size: 100%;
  }
}
@media (width < 40rem) {
  .modal-font .font__explanation {
    font-size: 5.641025641vw;
  }
}
.modal-image .modal__content {
  background-color: var(--color-white);
  inline-size: 50rem;
  border-radius: clamp(1rem, 0.71rem + 1.19vw, 1.75rem);
}
.modal-image .font__image {
  background-color: #eee;
  padding: clamp(1.25rem, 0.767rem + 1.98vw, 2.5rem);
}
.modal-image .font__image img {
  inline-size: 100%;
}

@layer components {
  @-webkit-keyframes mmfadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes mmfadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @-webkit-keyframes mmfadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes mmfadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @-webkit-keyframes mmslideIn {
    from {
      -webkit-transform: scale(0.9);
              transform: scale(0.9);
    }
    to {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  @keyframes mmslideIn {
    from {
      -webkit-transform: scale(0.9);
              transform: scale(0.9);
    }
    to {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  @-webkit-keyframes mmslideOut {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    to {
      -webkit-transform: scale(0.9);
              transform: scale(0.9);
    }
  }
  @keyframes mmslideOut {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    to {
      -webkit-transform: scale(0.9);
              transform: scale(0.9);
    }
  }
}
@layer properties {
  :root {
    --vw: 1vw;
    --vh: 1vh;
    --font-aoto: "MFW-PAotoGothicStdN-Medium", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-aoto-light: "MFW-PAotoGothicStdN-ExLight", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-aoto-debold: "MFW-PAotoGothicStdN-DeBold", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-aoto-bold: "MFW-PAotoGothicStdN-Bold", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-aoto-eb: "MFW-PAotoGothicStdN-ExBold", "MFW-PAotoGothicStdN-Bold", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --color-theme: #cdede8;
    --color-base: #03175c;
    --color-background: #cdede8;
    --color-white: #fff;
    --color-hover: #003cff;
    --box-shadow: 3px 3px 0 rgba(15, 46, 50, 0.1);
    --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}
@layer base {
  /* ==================================================
  * body
  ================================================== */
  html {
    -ms-touch-action: manipulation;
        touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
  }
  body {
    font-family: var(--font-aoto);
    font-weight: 400;
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
    color: var(--color-base);
    background-color: var(--color-background);
    letter-spacing: 0.05em;
    min-block-size: calc(var(--vh) * 100);
    /* iOSのオーバースクロール無効化 */
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
  }
  :where(button),
  :where(a) {
    color: var(--color-base);
    -webkit-transition: color 0.3s var(--ease-in-out-quart), background-color 0.3s var(--ease-in-out-quart);
    transition: color 0.3s var(--ease-in-out-quart), background-color 0.3s var(--ease-in-out-quart);
  }
  :where(:focus-visible) {
    outline-color: var(--color-hover);
  }
  @media (width < 40rem) {
    body {
      letter-spacing: 0.03em;
    }
  }
  .js-lines {
    overflow: hidden;
  }
  .js-lines .line {
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
    opacity: 0;
    will-change: filter, opacity, transform;
  }
  /* JSで初期化が完了した要素 */
  .js-lines.is-init .line {
    /* JSが制御するのでCSSの初期値をリセット */
    -webkit-transform: none;
            transform: none;
    opacity: inherit;
  }
  /* ==================================================
  * wrapper
  ================================================== */
  .wrapper {
    overflow-x: clip;
    position: relative;
    z-index: 1;
  }
  body[style*="overflow:hidden;"] .wrapper .header,
  body[style*="overflow:hidden;"] .wrapper .stable, body[style*="overflow: hidden;"] .wrapper .header,
  body[style*="overflow: hidden;"] .wrapper .stable {
    overflow: auto;
    scrollbar-gutter: stable;
  }
  .wrapper:before {
    background-color: var(--color-background);
    background-size: clamp(56.125rem, 37.349rem + 77.03vw, 104.75rem), clamp(56.125rem, 37.349rem + 77.03vw, 104.75rem);
    display: block;
    content: "";
    inline-size: 100vw;
    block-size: 100dvh;
    z-index: 9998;
    position: fixed;
    inset: 0;
    -webkit-transition: opacity 0.4s var(--ease-out-quart) 0.2s, visibility 0s 0.6s;
    transition: opacity 0.4s var(--ease-out-quart) 0.2s, visibility 0s 0.6s;
  }
  body.is-loaded .wrapper:before {
    opacity: 0;
    visibility: hidden;
  }
  .header {
    inline-size: 100%;
    pointer-events: none;
    z-index: 1000;
    position: fixed;
    top: 1.25rem;
    left: 0;
    opacity: 0;
    translate: 0 -100%;
  }
  .header .header__container {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 0.75rem;
       -moz-column-gap: 0.75rem;
            column-gap: 0.75rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    block-size: 4rem;
    max-inline-size: 100%;
    inline-size: -webkit-fit-content;
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    margin-inline: auto;
    padding-block: 0.75rem;
    padding-inline: 1.5rem 0.75rem;
    border-radius: 9999px;
    pointer-events: auto;
  }
  .header .header__logo {
    inline-size: 9.875rem;
  }
  .header .header__title {
    font-size: 1rem;
    color: var(--color-black);
    letter-spacing: 0;
    translate: 0 5%;
  }
  .header .header__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 0.75rem;
       -moz-column-gap: 0.75rem;
            column-gap: 0.75rem;
  }
  .header.is-active {
    opacity: 1;
    translate: 0 0;
    -webkit-transition: opacity 0.8s var(--ease-out-quart) 1s, translate 0.8s var(--ease-out-back) 1s;
    transition: opacity 0.8s var(--ease-out-quart) 1s, translate 0.8s var(--ease-out-back) 1s;
  }
  .header .link {
    font-size: 0.875rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 0.25em;
       -moz-column-gap: 0.25em;
            column-gap: 0.25em;
  }
  .header .link:focus-visible {
    color: var(--color-hover);
  }
  @media (any-hover: hover) {
    .header .link:hover {
      color: var(--color-hover);
    }
  }
  .header .link .icon-blank {
    font-size: 0.8571428571em;
    translate: 0 -0.1em;
  }
  .header .link .label {
    text-box: trim-both cap alphabetic;
  }
  @media (width >= 64rem) {
    .header .header__links:before {
      display: block;
      content: "";
      block-size: 1.5rem;
      margin-inline: 1rem;
      -webkit-border-start: solid 1px #cdd1de;
              border-inline-start: solid 1px #cdd1de;
    }
  }
  @media (width < 64rem) {
    .header .header__container {
      block-size: 3.75rem;
    }
    .header .header__title {
      font-size: 0.8125rem;
    }
    .header .header__links {
      -webkit-margin-start: 0.5rem;
              margin-inline-start: 0.5rem;
    }
  }
  @media (width < 48rem) {
    .header .header__container {
      padding-inline: 1rem;
    }
  }
  @media (width < 40rem) {
    .header {
      top: 0.875rem;
    }
    .header .header__container {
      -webkit-column-gap: 0.5rem;
         -moz-column-gap: 0.5rem;
              column-gap: 0.5rem;
      block-size: 2.625rem;
    }
    .header .header__logo {
      inline-size: 7.5rem;
    }
    .header .header__title {
      font-size: 0.75rem;
    }
  }
  .footer {
    color: var(--color-white);
    background-color: var(--color-base);
    letter-spacing: 0;
    margin-inline: 1.25rem;
    -webkit-margin-before: 6.25rem;
            margin-block-start: 6.25rem;
    -webkit-margin-after: 1.25rem;
            margin-block-end: 1.25rem;
    padding-inline: 5rem;
    padding-block: 7.5rem 1.25rem;
    border-radius: 1.25rem;
    position: relative;
  }
  .footer .footer__wrapper {
    display: grid;
    row-gap: 2.5rem;
  }
  .footer .footer__wrapper a {
    -webkit-transition: opacity 0.2s var(--ease-in-out-quart);
    transition: opacity 0.2s var(--ease-in-out-quart);
  }
  .footer .footer__wrapper a:focus-visible {
    opacity: 0.5;
  }
  @media (any-hover: hover) {
    .footer .footer__wrapper a:hover {
      opacity: 0.5;
    }
  }
  .footer .footer__container {
    display: grid;
    row-gap: 3rem;
  }
  .footer .footer__border {
    -webkit-border-before: solid 1px rgba(255, 255, 255, 0.2);
            border-block-start: solid 1px rgba(255, 255, 255, 0.2);
  }
  .footer .footer__sitemap {
    display: grid;
    grid-template-columns: 1fr 23.3333333333% 23.3333333333% 23.3333333333%;
    -webkit-column-gap: 5.8333333333%;
       -moz-column-gap: 5.8333333333%;
            column-gap: 5.8333333333%;
    row-gap: 3rem;
  }
  .footer .footer__column {
    display: grid;
    row-gap: 2.5rem;
  }
  .footer .footer__logo {
    inline-size: 6.25rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .footer .footer__logo img {
    inline-size: 100%;
  }
  .footer .footer__links {
    font-size: 0.875rem;
    display: grid;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    row-gap: 1.5rem;
  }
  .footer .footer__links .icon-blank {
    font-size: 0.75rem;
    -webkit-margin-start: 0.25rem;
            margin-inline-start: 0.25rem;
  }
  .footer .footer__sns {
    font-size: 0.875rem;
    display: grid;
    row-gap: 0.875rem;
  }
  .footer .footer__sns li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -webkit-column-gap: 0.8571428571em;
       -moz-column-gap: 0.8571428571em;
            column-gap: 0.8571428571em;
  }
  .footer .footer__utility {
    font-size: 0.75rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-column-gap: 1.5rem;
       -moz-column-gap: 1.5rem;
            column-gap: 1.5rem;
    row-gap: 1.25rem;
  }
  .footer .footer__utility .icon-blank {
    font-size: 0.75rem;
    -webkit-margin-start: 0.25rem;
            margin-inline-start: 0.25rem;
  }
  .footer .footer__copyright {
    font-size: 0.75rem;
    text-align: center;
    letter-spacing: 0;
    opacity: 0.5;
  }
  .footer .footer__totop {
    font-family: var(--font-aoto-bold);
    font-size: 0.75rem;
    line-height: 1.38;
    position: absolute;
    top: -2.5rem;
    right: clamp(0.75rem, 0.074rem + 2.77vw, 2.5rem);
  }
  .footer .totop__button {
    color: var(--color-white);
    display: block;
    inline-size: 6.25rem;
    position: relative;
  }
  .footer .totop__button::before, .footer .totop__button::after {
    display: block;
    content: "";
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    -webkit-transition: scale 0.4s var(--ease-out-quart);
    transition: scale 0.4s var(--ease-out-quart);
  }
  .footer .totop__button::before {
    background-color: var(--color-base);
    inline-size: 100%;
  }
  .footer .totop__button::after {
    inline-size: calc(100% - 0.75rem);
    border: dashed 1px var(--color-white);
  }
  .footer .totop__button .totop__label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -webkit-column-gap: 0.5em;
       -moz-column-gap: 0.5em;
            column-gap: 0.5em;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .footer .totop__button:focus-visible::before, .footer .totop__button:focus-visible::after {
    scale: 1.1;
  }
  @media (any-hover: hover) {
    .footer .totop__button:hover::before, .footer .totop__button:hover::after {
      scale: 1.1;
    }
    .footer .totop__button:hover .totop__wrapper .icon-arrow-up::before {
      translate: 0 -100%;
    }
  }
  .footer .totop__wrapper {
    display: grid;
    row-gap: 0.25rem;
    place-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    aspect-ratio: 1;
    inline-size: 100%;
    position: relative;
    z-index: 1;
  }
  .footer .totop__wrapper .icon-arrow-up {
    overflow: clip;
  }
  .footer .totop__wrapper .icon-arrow-up::before {
    line-height: 2;
    display: block;
    text-shadow: 0 2em 0 currentColor;
    -webkit-transition: translate 0.4s var(--ease-in-out-quart);
    transition: translate 0.4s var(--ease-in-out-quart);
  }
  @media (width < 51.25rem) {
    .footer {
      -webkit-margin-before: 3.125rem;
              margin-block-start: 3.125rem;
      padding-inline: 2.5rem;
      -webkit-padding-before: 3rem;
              padding-block-start: 3rem;
    }
    .footer .footer__wrapper {
      row-gap: 3rem;
    }
    .footer .footer__sitemap {
      grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr));
    }
    .footer .footer__column:first-child {
      grid-column: 1/-1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      inline-size: 100%;
    }
    .footer .footer__sns {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-column-gap: 1.25rem;
         -moz-column-gap: 1.25rem;
              column-gap: 1.25rem;
    }
    .footer .footer__utility {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }
  }
  @media (width < 40rem) {
    .footer {
      margin-inline: 0.75rem;
      -webkit-margin-after: 0.75rem;
              margin-block-end: 0.75rem;
      padding-inline: 2rem;
      -webkit-padding-before: 2.5rem;
              padding-block-start: 2.5rem;
      -webkit-padding-after: 1.25rem;
              padding-block-end: 1.25rem;
    }
    .footer .footer__container {
      row-gap: 2.5rem;
    }
    .footer .footer__sitemap {
      row-gap: 1rem;
    }
    .footer .footer__column:first-child {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      row-gap: 1.75rem;
      -webkit-margin-after: 1.5rem;
              margin-block-end: 1.5rem;
    }
    .footer .footer__links {
      row-gap: 1rem;
    }
    .footer .footer__logo {
      inline-size: 100%;
    }
    .footer .footer__logo a {
      display: block;
      inline-size: 6.25rem;
      margin-inline: auto;
    }
    .footer .footer__sns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      inline-size: 100%;
    }
    .footer .footer__totop {
      font-size: 0.6875rem;
      top: -1.875rem;
    }
    .footer .totop__button {
      inline-size: 5rem;
    }
    .footer .totop__button::after {
      inline-size: calc(100% - 0.5rem);
    }
    .footer .totop__button .totop__label {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
    .footer .totop__wrapper {
      row-gap: 0rem;
    }
    .footer .footer__copyright {
      font-size: 0.625rem;
    }
  }
}
@layer components {
  .box {
    background-color: var(--color-white);
    border-radius: clamp(1.25rem, 1.057rem + 0.79vw, 1.75rem);
    overflow: clip;
    -webkit-box-shadow: 0.75rem 0.75rem 0 rgba(15, 46, 50, 0.1);
            box-shadow: 0.75rem 0.75rem 0 rgba(15, 46, 50, 0.1);
  }
  @media (width < 40rem) {
    .box {
      -webkit-box-shadow: 0.375rem 0.375rem 0 rgba(15, 46, 50, 0.1);
              box-shadow: 0.375rem 0.375rem 0 rgba(15, 46, 50, 0.1);
    }
  }
  .embla {
    display: grid;
    min-inline-size: 0;
    overflow: clip;
  }
  .embla:has(.embla__buttons) {
    -webkit-padding-after: 3px;
            padding-block-end: 3px;
  }
  .embla > * {
    min-inline-size: 0;
  }
  .embla .embla__viewport {
    -webkit-transform: none !important;
            transform: none !important;
  }
  .embla .embla__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* タッチスクロール用の最適化 */
    -webkit-overflow-scrolling: touch;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  .embla .embla__slide {
    min-width: 0;
    position: relative;
    will-change: transform;
  }
  .embla .embla__buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-column-gap: 2rem;
       -moz-column-gap: 2rem;
            column-gap: 2rem;
  }
  .embla .embla__pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 0.75rem;
       -moz-column-gap: 0.75rem;
            column-gap: 0.75rem;
  }
  .embla .embla__button {
    font-size: 0.75rem;
    color: var(--color-white);
    background-color: var(--color-base);
    display: grid;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: solid 1px var(--color-base);
    border-radius: 50%;
    cursor: pointer;
    overflow: clip;
    -webkit-transition: color 0.3s var(--ease-in-out-quart), background-color 0.3s var(--ease-in-out-quart);
    transition: color 0.3s var(--ease-in-out-quart), background-color 0.3s var(--ease-in-out-quart);
  }
  .embla .embla__button .icon-arrow-left,
  .embla .embla__button .icon-arrow-right {
    -webkit-transition: color 0.4s var(--ease-in-out-quart), translate 0.4s var(--ease-in-out-quart);
    transition: color 0.4s var(--ease-in-out-quart), translate 0.4s var(--ease-in-out-quart);
  }
  .embla .embla__button .icon-arrow-left {
    text-shadow: 3em 0 0 currentColor;
  }
  .embla .embla__button .icon-arrow-right {
    text-shadow: -3em 0 0 currentColor;
  }
  .embla .embla__button:focus-visible {
    color: var(--color-base);
    background-color: var(--color-white);
  }
  @media (any-hover: hover) {
    .embla .embla__button:hover {
      color: var(--color-base);
      background-color: var(--color-white);
    }
    .embla .embla__button:hover .icon-arrow-left {
      -webkit-animation: arrowLeft 1s var(--ease-in-out-quart) infinite;
              animation: arrowLeft 1s var(--ease-in-out-quart) infinite;
    }
    .embla .embla__button:hover .icon-arrow-right {
      -webkit-animation: arrowRight 1s var(--ease-in-out-quart) infinite;
              animation: arrowRight 1s var(--ease-in-out-quart) infinite;
    }
  }
  .embla .embla__dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 0.75rem;
       -moz-column-gap: 0.75rem;
            column-gap: 0.75rem;
  }
  .embla .embla__dots .embla__dot {
    background-color: var(--color-white);
    aspect-ratio: 1;
    inline-size: 0.5rem;
    border: solid 1px var(--color-base);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease, scale 0.2s ease;
    transition: background-color 0.2s ease, scale 0.2s ease;
  }
  .embla .embla__dots .embla__dot.is-selected {
    background-color: var(--color-base);
  }
  .embla .embla__dots .embla__dot:focus-visible {
    scale: 1.25;
  }
  @media (any-hover: hover) {
    .embla .embla__dots .embla__dot:hover {
      scale: 1.25;
    }
  }
  .embla .embla__dots .embla__dot:before {
    display: block;
    content: "";
    aspect-ratio: 1;
    inline-size: 300%;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .embla .embla__autoplay {
    font-size: 0.75rem;
    background-color: var(--color-white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    letter-spacing: 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    aspect-ratio: 1;
    inline-size: 1.5rem;
    border: solid 1px var(--color-base);
    border-radius: 50%;
    cursor: pointer;
  }
  .embla .embla__autoplay:focus-visible {
    color: var(--color-white);
    background-color: var(--color-base);
  }
  @media (any-hover: hover) {
    .embla .embla__autoplay:hover {
      color: var(--color-white);
      background-color: var(--color-base);
    }
  }
  @-webkit-keyframes arrowLeft {
    0% {
      translate: 0 0;
    }
    50%, 99% {
      translate: -3em 0;
    }
    100% {
      translate: 0 0;
    }
  }
  @keyframes arrowLeft {
    0% {
      translate: 0 0;
    }
    50%, 99% {
      translate: -3em 0;
    }
    100% {
      translate: 0 0;
    }
  }
  @-webkit-keyframes arrowRight {
    0% {
      translate: 0 0;
    }
    50%, 99% {
      translate: 3em 0;
    }
    100% {
      translate: 0 0;
    }
  }
  @keyframes arrowRight {
    0% {
      translate: 0 0;
    }
    50%, 99% {
      translate: 3em 0;
    }
    100% {
      translate: 0 0;
    }
  }
}
@layer pages {
  .kv {
    -webkit-padding-after: clamp(1.563rem, 1.321rem + 0.99vw, 2.188rem);
            padding-block-end: clamp(1.563rem, 1.321rem + 0.99vw, 2.188rem);
    inline-size: 100%;
    overflow: clip;
    position: relative;
    transform: translateZ(0);
    /* iOS最適化 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .kv .kv__overlay {
    background-color: #8ad6d5;
    pointer-events: none;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    z-index: 2;
    opacity: 0;
    will-change: opacity;
    position: absolute;
    inset: 0;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  .kv .kv__inner {
    position: relative;
  }
  .kv .kv__image {
    opacity: 0;
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
  }
  .kv .kv__image img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    /* iOS向け画像最適化 */
    -webkit-user-drag: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .kv.is-active .kv__image {
    opacity: 1;
    scale: 1;
    will-change: opacity, scale;
    -webkit-transition: opacity 1s var(--ease-in-out-quart), scale 3s var(--ease-out-quart);
    transition: opacity 1s var(--ease-in-out-quart), scale 3s var(--ease-out-quart);
  }
  .main__container {
    background-color: var(--color-background);
    position: relative;
    z-index: 1;
  }
  .scroll {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 0.25rem;
       -moz-column-gap: 0.25rem;
            column-gap: 0.25rem;
    block-size: 0;
  }
  .scroll::before, .scroll::after {
    display: block;
    content: "";
    background-image: repeating-linear-gradient(90deg, #03175c, #03175c 2px, transparent 2px, transparent 4px);
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 100% 1px;
    inline-size: 100%;
    block-size: 1px;
    clip-path: inset(100%);
  }
  .scroll .scroll__arrow {
    font-size: 1rem;
    color: var(--color-white);
    background-color: var(--color-base);
    display: grid;
    place-items: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    inline-size: 4.25rem;
    aspect-ratio: 1;
    border-radius: 9999px;
    scale: 0;
  }
  .scroll .scroll__arrow .icon-scroll {
    opacity: 0;
    -webkit-animation: infinite scroll 1.6s;
            animation: infinite scroll 1.6s;
  }
  body:has(.kv.is-active) .scroll::before, body:has(.kv.is-active) .scroll::after {
    clip-path: inset(0);
    -webkit-transition: clip-path 0.8s var(--ease-in-out-quart) 0.2s;
    transition: clip-path 0.8s var(--ease-in-out-quart) 0.2s;
  }
  body:has(.kv.is-active) .scroll .scroll__arrow {
    scale: 1;
    -webkit-transition: scale 0.8s var(--ease-out-back);
    transition: scale 0.8s var(--ease-out-back);
  }
  body:has(.kv.is-active) .scroll .scroll__arrow .icon-scroll {
    opacity: 1;
    -webkit-transition: opacity 0.8s var(--ease-in-out-quart) 0.6s;
    transition: opacity 0.8s var(--ease-in-out-quart) 0.6s;
  }
  @media (width < 40rem) {
    .scroll .scroll__arrow {
      inline-size: 3.125rem;
    }
  }
  @-webkit-keyframes scroll {
    0% {
      scale: 1 0.6;
      translate: 0 -100%;
      opacity: 0;
    }
    20% {
      scale: 1;
      opacity: 1;
    }
    70% {
      translate: 0 0;
    }
    80% {
      scale: 1;
      opacity: 1;
    }
    100% {
      scale: 1 0.6;
      translate: 0 100%;
      opacity: 0;
    }
  }
  @keyframes scroll {
    0% {
      scale: 1 0.6;
      translate: 0 -100%;
      opacity: 0;
    }
    20% {
      scale: 1;
      opacity: 1;
    }
    70% {
      translate: 0 0;
    }
    80% {
      scale: 1;
      opacity: 1;
    }
    100% {
      scale: 1 0.6;
      translate: 0 100%;
      opacity: 0;
    }
  }
  .intro {
    background-color: #f8f7f2;
    -webkit-padding-before: clamp(4.063rem, 3.17rem + 3.66vw, 6.375rem);
            padding-block-start: clamp(4.063rem, 3.17rem + 3.66vw, 6.375rem);
  }
  .intro .intro__container {
    display: grid;
    row-gap: clamp(2rem, 1.035rem + 3.96vw, 4.5rem);
    position: relative;
    z-index: 2;
  }
  .intro .intro__content {
    padding-inline: clamp(2.5rem, -2.606rem + 7.98vw, 4.375rem);
  }
  .intro .intro__center {
    display: grid;
    row-gap: clamp(1.75rem, 1.653rem + 0.4vw, 2rem);
    max-inline-size: -webkit-fit-content;
    max-inline-size: -moz-fit-content;
    max-inline-size: fit-content;
    margin-inline: auto;
  }
  .intro .intro__title {
    font-family: var(--font-aoto-eb);
    font-size: clamp(2.625rem, 0.125rem + 3.91vw, 3.25rem);
    line-height: 1;
    white-space: nowrap;
  }
  .intro .intro__title .line-mask {
    -webkit-border-after: solid 1px currentColor;
            border-block-end: solid 1px currentColor;
  }
  .intro .intro__title .line-mask:nth-child(n+2) {
    -webkit-margin-before: 0.4em;
            margin-block-start: 0.4em;
  }
  .intro .intro__title .line {
    text-box: trim-both cap alphabetic;
    padding-block: 0.4615384615em;
  }
  .intro .intro__text {
    font-size: clamp(1rem, 0.855rem + 0.59vw, 1.375rem);
    line-height: 1.8;
    -webkit-margin-before: clamp(0.5rem, 0.307rem + 0.79vw, 1rem);
            margin-block-start: clamp(0.5rem, 0.307rem + 0.79vw, 1rem);
    opacity: 0;
    translate: 0 50%;
  }
  .intro .intro__notes {
    font-size: 0.875rem;
    opacity: 0;
  }
  .intro .intro__slider__outer {
    min-inline-size: 0;
  }
  .intro .intro-embla {
    pointer-events: none;
    opacity: 0;
  }
  .intro .intro-embla .embla__slide {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 clamp(9rem, 1.971rem + 28.84vw, 16.75rem);
            flex: 0 0 clamp(9rem, 1.971rem + 28.84vw, 16.75rem);
    -webkit-margin-end: clamp(2.25rem, 1.478rem + 3.17vw, 4.25rem);
            margin-inline-end: clamp(2.25rem, 1.478rem + 3.17vw, 4.25rem);
  }
  .intro .intro-embla .embla__slide img {
    inline-size: 100%;
  }
  .intro .intro__slider {
    opacity: 0;
  }
  .intro.is-active .intro__text {
    opacity: 1;
    translate: 0 0;
    will-change: opacity, translate;
    -webkit-transition: opacity 1s var(--ease-out-quart) 0.5s, translate 1s var(--ease-out-quart) 0.5s;
    transition: opacity 1s var(--ease-out-quart) 0.5s, translate 1s var(--ease-out-quart) 0.5s;
  }
  .intro.is-active .intro__notes {
    opacity: 1;
    -webkit-transition: opacity 1s var(--ease-in-out-quart) 0.8s;
    transition: opacity 1s var(--ease-in-out-quart) 0.8s;
  }
  .intro.is-active .intro-embla {
    opacity: 1;
    will-change: opacity;
    -webkit-transition: opacity 1s var(--ease-out-quart) 0.8s;
    transition: opacity 1s var(--ease-out-quart) 0.8s;
  }
  @media screen and (min-width: 1696px) {
    .intro {
      -webkit-padding-before: min(0.0601415094 * var(--vw) * 100, 153px);
              padding-block-start: min(0.0601415094 * var(--vw) * 100, 153px);
    }
    .intro .intro__container {
      row-gap: min(0.0424528302 * var(--vw) * 100, 108px);
    }
    .intro .intro__title {
      font-size: min(0.0306603774 * var(--vw) * 100, 78px);
    }
    .intro .intro__text {
      font-size: min(0.0129716981 * var(--vw) * 100, 33px);
    }
    .intro .intro__notes {
      font-size: min(0.008254717 * var(--vw) * 100, 21px);
    }
  }
  @media (width < 64rem) {
    .intro .intro__title {
      font-size: clamp(1.75rem, -0.875rem + 5.47vw, 2.625rem);
    }
  }
  @media (width < 51.25rem) {
    .intro .intro__slider .swiper-slide {
      inline-size: clamp(9rem, 2.254rem + 27.67vw, 16.438rem) !important;
    }
  }
  @media (width < 40rem) {
    .intro .intro__content {
      padding-inline: 1.25rem;
    }
    .intro .intro__title {
      font-size: 1.875rem;
    }
    .intro .intro__text,
    .intro .intro__notes {
      text-align: left;
    }
  }
  @media (width < 24.375rem) {
    .intro .intro__title {
      font-size: 7.6923076923vw;
    }
  }
  .gallery:not(.is-overflow) > * {
    position: sticky;
  }
  .gallery:not(.is-overflow) > *:not(:last-child):after {
    display: block;
    content: "";
    z-index: 10;
    opacity: var(--sticky-progress);
    pointer-events: none;
    position: absolute;
    inset: 0;
  }
  .gallery:not(.is-overflow) > *:nth-child(1) {
    top: calc(clamp(1.938rem, 0.876rem + 4.36vw, 4.688rem) * -1);
  }
  .gallery:not(.is-overflow) > *:nth-child(1):after {
    background-color: #8ad6d5;
  }
  .gallery:not(.is-overflow) > *:nth-child(2) {
    top: 20px;
  }
  .gallery:not(.is-overflow) > *:nth-child(2):after {
    background-color: #cdede8;
  }
  .gallery:not(.is-overflow) > *:nth-child(3) {
    top: 40px;
  }
  .gallery:not(.is-overflow) > *:nth-child(3):after {
    background-color: #feea6d;
  }
  .gallery:not(.is-overflow) > *:nth-child(4) {
    top: 60px;
  }
  .gallery:not(.is-overflow) > *:nth-child(4):after {
    background-color: #ffcdc0;
  }
  .gallery:not(.is-overflow) > *:nth-child(5) {
    top: 80px;
  }
  .gallery:not(.is-overflow) > *:nth-child(5):after {
    background-color: #a9dca4;
  }
  .gallery:not(.is-overflow) > *:nth-child(6) {
    top: 100px;
  }
  .gallery:not(.is-overflow) > *:nth-child(6):after {
    background-color: #d5cac1;
  }
  .index {
    background-color: #8ad6d5;
    -webkit-margin-before: -4.375rem;
            margin-block-start: -4.375rem;
    padding-block: clamp(3.875rem, 1.751rem + 8.71vw, 9.375rem) clamp(2.5rem, 1.052rem + 5.94vw, 6.25rem);
    -webkit-border-before: dotted 1px var(--color-base);
            border-block-start: dotted 1px var(--color-base);
    position: relative;
  }
  .index:has(.index__item:nth-child(5)) {
    -webkit-padding-after: clamp(3.625rem, 2.418rem + 4.95vw, 6.75rem);
            padding-block-end: clamp(3.625rem, 2.418rem + 4.95vw, 6.75rem);
  }
  .index .index__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    letter-spacing: 0;
    max-inline-size: 120rem;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 0.043rem + 4.95vw, 4.375rem);
  }
  .index .index__title {
    font-family: var(--font-aoto-bold);
    font-size: clamp(3.75rem, 2.785rem + 3.96vw, 6.25rem);
    line-height: 0.7;
  }
  .index .index__ruby {
    font-size: clamp(1rem, 0.952rem + 0.2vw, 1.125rem);
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-orientation: mixed;
    -webkit-font-feature-settings: initial;
            font-feature-settings: initial;
    letter-spacing: 0.16em;
  }
  .index .index__body {
    -webkit-margin-before: clamp(2.25rem, 1.671rem + 2.38vw, 3.75rem);
            margin-block-start: clamp(2.25rem, 1.671rem + 2.38vw, 3.75rem);
    padding-inline: 4.375rem;
  }
  .index .index__items {
    --radius: min(4 / 1400 * 100vw, 4px * 1.26984126984127);
    --slide-width: min(288 / 1400 * 100vw, 288px * 1.26984126984127);
    --slide-height: min(416 / 1400 * 100vw, 416px * 1.26984126984127);
    --slide-spacing: 0;
    display: grid;
    grid-template-columns: var(--slide-width) var(--slide-width) var(--slide-width) var(--slide-width);
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    row-gap: clamp(2rem, 0.992rem + 4.13vw, 5.375rem);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-inline-size: 100rem;
    inline-size: 100%;
    margin-inline: auto;
    -webkit-filter: drop-shadow(8px 6px 0 #7dc5c4);
            filter: drop-shadow(8px 6px 0 #7dc5c4);
  }
  .index .index__items:has(.index__item:nth-child(5)) {
    grid-template-rows: 1fr -webkit-max-content;
    grid-template-rows: 1fr max-content;
  }
  .index .index__item {
    min-inline-size: 0;
  }
  .index .index__item:nth-child(1) .index__embla {
    background-color: #cdede8;
    -webkit-mask: url("../img/index_mask_01.svg") no-repeat center center;
            mask: url("../img/index_mask_01.svg") no-repeat center center;
    -webkit-mask-size: 100%;
            mask-size: 100%;
  }
  .index .index__item:nth-child(1) .index__num {
    color: #cdede8;
    top: min(3.4285714286vw, 60.9523809524px);
    left: max(-1vw, -17.7777777778px);
  }
  .index .index__item:nth-child(1) .index__catch {
    left: 0;
    bottom: min(0.5714285714vw, 10.1587301587px);
  }
  .index .index__item:nth-child(1) .index__catch li:nth-child(n+2) {
    background-color: #cdede8;
  }
  .index .index__item:nth-child(2) .index__embla {
    background-color: #feea6d;
    -webkit-mask: url("../img/index_mask_02.svg") no-repeat center center;
            mask: url("../img/index_mask_02.svg") no-repeat center center;
    -webkit-mask-size: 100%;
            mask-size: 100%;
  }
  .index .index__item:nth-child(2) .index__num {
    color: #feea6d;
    top: min(3.1428571429vw, 55.873015873px);
    right: max(-0.2857142857vw, -5.0793650794px);
  }
  .index .index__item:nth-child(2) .index__catch {
    left: 0;
    bottom: min(0.5714285714vw, 10.1587301587px);
  }
  .index .index__item:nth-child(2) .index__catch li:nth-child(n+2) {
    background-color: #feea6d;
  }
  .index .index__item:nth-child(3) .index__embla {
    background-color: #ffcdc0;
    -webkit-mask: url("../img/index_mask_03.svg") no-repeat center center;
            mask: url("../img/index_mask_03.svg") no-repeat center center;
    -webkit-mask-size: 100%;
            mask-size: 100%;
  }
  .index .index__item:nth-child(3) .index__num {
    color: #ffcdc0;
    bottom: min(0.5714285714vw, 10.1587301587px);
    left: max(-0.2857142857vw, -5.0793650794px);
  }
  .index .index__item:nth-child(3) .index__catch {
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-orientation: mixed;
    -webkit-font-feature-settings: initial;
            font-feature-settings: initial;
    top: min(1.8571428571vw, 33.0158730159px);
    right: 0;
    letter-spacing: 0.15em;
  }
  .index .index__item:nth-child(3) .index__catch li:nth-child(n+2) {
    background-color: #ffcdc0;
  }
  .index .index__item:nth-child(4) .index__embla {
    background-color: #a9dca4;
    -webkit-mask: url("../img/index_mask_04.svg") no-repeat center center;
            mask: url("../img/index_mask_04.svg") no-repeat center center;
    -webkit-mask-size: 100%;
            mask-size: 100%;
  }
  .index .index__item:nth-child(4) .index__num {
    color: #a9dca4;
    top: min(2.9285714286vw, 52.0634920635px);
    right: min(0.8571428571vw, 15.2380952381px);
  }
  .index .index__item:nth-child(4) .index__catch {
    left: 0;
    bottom: min(1.8571428571vw, 33.0158730159px);
  }
  .index .index__item:nth-child(4) .index__catch li:nth-child(n+2) {
    background-color: #a9dca4;
  }
  .index .index__item:nth-child(5) {
    --slide-width: min(910 / 1400 * 100vw, 910px * 1.26984126984127);
    --slide-height: min(200 / 1400 * 100vw, 200px * 1.26984126984127);
    grid-column: 1/-1;
    inline-size: 100%;
  }
  .index .index__item:nth-child(5) .index__button {
    inline-size: var(--slide-width);
    margin-inline: auto;
  }
  .index .index__item:nth-child(5) .index__embla {
    background-color: #d5cac1;
    -webkit-mask: url("../img/index_mask_05.svg") no-repeat center center;
            mask: url("../img/index_mask_05.svg") no-repeat center center;
    -webkit-mask-size: 100%;
            mask-size: 100%;
  }
  .index .index__item:nth-child(5) .index__num {
    color: #d5cac1;
    top: min(0.8571428571vw, 15.2380952381px);
    left: 0rem;
  }
  .index .index__item:nth-child(5) .index__catch {
    bottom: max(-1.4285714286vw, -25.3968253968px);
    left: min(4.8571428571vw, 86.3492063492px);
  }
  .index .index__item:nth-child(5) .index__catch li:nth-child(n+2) {
    background-color: #d5cac1;
  }
  .index .index__item:nth-child(5) .index__arr {
    right: min(5.7142857143vw, 101.5873015873px);
    bottom: max(-1.4285714286vw, -25.3968253968px);
  }
  .index .index__item:not(:nth-child(3)) .index__catch li:nth-child(1) {
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .index .index__item:not(:nth-child(3)) .index__catch li:nth-child(1).round {
    border-radius: var(--radius) var(--radius) var(--radius) 0;
  }
  .index .index__item:not(:nth-child(3)) .index__catch li:nth-child(n+2) {
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .index .index__item:not(:nth-child(3)) .index__catch li:nth-child(n+2).round {
    border-radius: 0 var(--radius) var(--radius) var(--radius);
  }
  .index .index__item:nth-child(3) .index__catch li:nth-child(1) {
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .index .index__item:nth-child(3) .index__catch li:nth-child(1).round {
    border-radius: 0 var(--radius) var(--radius) var(--radius);
  }
  .index .index__item:nth-child(3) .index__catch li:nth-child(n+2) {
    border-radius: var(--radius) 0 0 var(--radius);
  }
  .index .index__item:nth-child(3) .index__catch li:nth-child(n+2).round {
    border-radius: var(--radius) 0 var(--radius) var(--radius);
  }
  .index .index__button {
    display: block;
    position: relative;
  }
  .index .index__button:focus-visible .embla__parallax__img {
    scale: 1.1;
  }
  .index .index__button:focus-visible .index__arr {
    color: var(--color-base);
    background-color: var(--color-white);
  }
  .index .index__button:focus-visible .index__arr .icon-arrow-down {
    translate: 0 3em;
  }
  @media (any-hover: hover) {
    .index .index__button:hover .embla__parallax__img {
      scale: 1.1;
    }
    .index .index__button:hover .index__arr {
      color: var(--color-base);
      background-color: var(--color-white);
    }
    .index .index__button:hover .index__arr .icon-arrow-down {
      translate: 0 3em;
    }
  }
  .index .index__button .embla__slide {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 var(--slide-width);
            flex: 0 0 var(--slide-width);
    min-inline-size: 0;
    block-size: var(--slide-height);
  }
  .index .index__button .embla__slide img {
    inline-size: var(--slide-width);
  }
  .index .index__button .embla__parallax {
    block-size: 100%;
    overflow: clip;
  }
  .index .index__button .embla__parallax__layer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    will-change: transform;
  }
  .index .index__button .embla__parallax__img {
    display: block;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(115% + var(--slide-spacing) * 2);
            flex: 0 0 calc(115% + var(--slide-spacing) * 2);
    -o-object-fit: cover;
       object-fit: cover;
    max-inline-size: none;
    inline-size: 100%;
    block-size: var(--slide-height);
    -webkit-transition: scale 0.5s var(--ease-out-quart);
    transition: scale 0.5s var(--ease-out-quart);
  }
  .index .index__num {
    inline-size: min(6vw, 106.6666666667px);
    position: absolute;
    z-index: 1;
    opacity: 0;
    scale: 0.6;
    -webkit-transition: opacity 0.8s var(--ease-out-quart), scale 0.8s var(--ease-out-quart);
    transition: opacity 0.8s var(--ease-out-quart), scale 0.8s var(--ease-out-quart);
  }
  .index .index__catch {
    font-family: var(--font-aoto-bold);
    font-size: min(1.4285714286vw, 25.3968253968px);
    line-height: 1;
    white-space: nowrap;
    z-index: 1;
    position: absolute;
    clip-path: polygon(0 0, 0 0, 0 0);
    -webkit-transition: clip-path 0.8s var(--ease-out-quart);
    transition: clip-path 0.8s var(--ease-out-quart);
  }
  .index .index__catch li {
    background-color: var(--color-white);
    text-box: trim-both cap alphabetic;
    padding: 0.6em 0.5em;
    inline-size: -webkit-fit-content;
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    border: solid 1px var(--color-base);
  }
  .index .index__catch li:nth-child(n+2) {
    -webkit-margin-before: -1px;
            margin-block-start: -1px;
  }
  .index .index__arr {
    font-size: min(0.8571428571vw, 15.2380952381px);
    color: var(--color-white);
    background-color: var(--color-base);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    aspect-ratio: 1;
    inline-size: min(3.4285714286vw, 60.9523809524px);
    border: solid 1px var(--color-base);
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    scale: 0.6;
    position: absolute;
    right: 0;
    bottom: 0;
    overflow: clip;
    -webkit-transition: color 0.3s var(--ease-in-out-quart), background-color 0.3s var(--ease-in-out-quart), opacity 0.6s var(--ease-out-quart) 1s, scale 0.6s var(--ease-out-quart) 1s;
    transition: color 0.3s var(--ease-in-out-quart), background-color 0.3s var(--ease-in-out-quart), opacity 0.6s var(--ease-out-quart) 1s, scale 0.6s var(--ease-out-quart) 1s;
  }
  .index .index__arr .icon-arrow-down {
    text-shadow: 0 -3em 0 currentColor;
    -webkit-transition: translate 0.4s var(--ease-in-out-quart);
    transition: translate 0.4s var(--ease-in-out-quart);
  }
  .index .index__icon {
    pointer-events: none;
  }
  .index .index__icon li {
    position: absolute;
  }
  .index .index__icon li.index__icon--1 {
    inline-size: min(9.5vw, 168.8888888889px);
    left: min(2.2857142857vw, 40.6349206349px);
    bottom: min(2.1428571429vw, 38.0952380952px);
  }
  .index .index__icon li.index__icon--2 {
    inline-size: min(6.4285714286vw, 114.2857142857px);
    right: min(9vw, 160px);
    bottom: min(7vw, 124.4444444444px);
  }
  .index .index__icon li.index__icon--3 {
    inline-size: min(8vw, 142.2222222222px);
    right: min(2.2857142857vw, 40.6349206349px);
    bottom: min(1.8571428571vw, 33.0158730159px);
  }
  .index .index__icon li img {
    inline-size: 100%;
  }
  .index.is-active .index__item .index__num {
    opacity: 1;
    scale: 1;
  }
  .index.is-active .index__item .index__catch {
    clip-path: polygon(0 0, 200% 0, 0 200%);
  }
  .index.is-active .index__item:nth-child(1) .index__num,
  .index.is-active .index__item:nth-child(1) .index__catch {
    -webkit-transition-delay: 0.4s;
            transition-delay: 0.4s;
  }
  .index.is-active .index__item:nth-child(2) .index__num,
  .index.is-active .index__item:nth-child(2) .index__catch {
    -webkit-transition-delay: 0.5s;
            transition-delay: 0.5s;
  }
  .index.is-active .index__item:nth-child(3) .index__num,
  .index.is-active .index__item:nth-child(3) .index__catch {
    -webkit-transition-delay: 0.6s;
            transition-delay: 0.6s;
  }
  .index.is-active .index__item:nth-child(4) .index__num,
  .index.is-active .index__item:nth-child(4) .index__catch {
    -webkit-transition-delay: 0.7s;
            transition-delay: 0.7s;
  }
  .index.is-active .index__item:nth-child(5) .index__num,
  .index.is-active .index__item:nth-child(5) .index__catch {
    -webkit-transition-delay: 0.8s;
            transition-delay: 0.8s;
  }
  .index.is-active .index__item .index__arr {
    scale: 1;
    opacity: 1;
  }
  @media (width < 80rem) {
    .index {
      -webkit-margin-before: calc(clamp(2.125rem, 0.084rem + 8.37vw, 4.375rem) * -1);
              margin-block-start: calc(clamp(2.125rem, 0.084rem + 8.37vw, 4.375rem) * -1);
    }
    .index .index__header {
      -webkit-column-gap: clamp(0.75rem, 0.523rem + 0.93vw, 1rem);
         -moz-column-gap: clamp(0.75rem, 0.523rem + 0.93vw, 1rem);
              column-gap: clamp(0.75rem, 0.523rem + 0.93vw, 1rem);
    }
    .index .index__items {
      --radius: 4px;
      --slide-width: 36.34146341463415vw;
      --slide-height: 28.04878048780488vw;
      grid-template-columns: var(--slide-width) var(--slide-width);
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-column-gap: 8.2926829268vw;
         -moz-column-gap: 8.2926829268vw;
              column-gap: 8.2926829268vw;
      row-gap: 7.3170731707vw;
    }
    .index .index__item:nth-child(1) .index__embla {
      -webkit-mask-image: url("../img/index_mask_01@tablet.svg");
              mask-image: url("../img/index_mask_01@tablet.svg");
    }
    .index .index__item:nth-child(1) .index__num {
      top: 2.4390243902vw;
      left: -1.2195121951vw;
    }
    .index .index__item:nth-child(1) .index__catch {
      bottom: 0;
    }
    .index .index__item:nth-child(2) .index__embla {
      -webkit-mask-image: url("../img/index_mask_02@tablet.svg");
              mask-image: url("../img/index_mask_02@tablet.svg");
    }
    .index .index__item:nth-child(2) .index__num {
      top: 2.0731707317vw;
      right: -0.487804878vw;
    }
    .index .index__item:nth-child(2) .index__catch {
      bottom: 1.4634146341vw;
    }
    .index .index__item:nth-child(3) .index__embla {
      -webkit-mask-image: url("../img/index_mask_03@tablet.svg");
              mask-image: url("../img/index_mask_03@tablet.svg");
    }
    .index .index__item:nth-child(3) .index__num {
      bottom: 0.243902439vw;
      left: 2.4390243902vw;
    }
    .index .index__item:nth-child(3) .index__catch {
      top: 0;
    }
    .index .index__item:nth-child(3) .index__catch li:nth-child(2).round {
      border-radius: 0 0 0.25rem 0.25rem;
    }
    .index .index__item:nth-child(3) .index__arr {
      right: -1.4634146341vw;
    }
    .index .index__item:nth-child(4) .index__embla {
      -webkit-mask-image: url("../img/index_mask_04@tablet.svg");
              mask-image: url("../img/index_mask_04@tablet.svg");
    }
    .index .index__item:nth-child(4) .index__num {
      top: 2.4390243902vw;
      right: 2.1951219512vw;
    }
    .index .index__item:nth-child(4) .index__catch {
      bottom: 1.9512195122vw;
    }
    .index .index__item:nth-child(5) {
      --slide-width: 62.92682926829268vw;
      --slide-height: 19.51219512195122vw;
    }
    .index .index__item:nth-child(5) .index__embla {
      -webkit-mask-image: url("../img/index_mask_05@tablet.svg");
              mask-image: url("../img/index_mask_05@tablet.svg");
    }
    .index .index__item:nth-child(5) .index__num {
      top: 1.4634146341vw;
      left: 1.7073170732vw;
    }
    .index .index__item:nth-child(5) .index__catch {
      left: 4.6341463415vw;
      bottom: -1.9512195122vw;
    }
    .index .index__item:nth-child(5) .index__arr {
      right: 3.4146341463vw;
      bottom: -1.7073170732vw;
    }
    .index .index__num {
      inline-size: 7.4390243902vw;
    }
    .index .index__catch {
      font-size: 2.1951219512vw;
    }
    .index .index__arr {
      font-size: 1.4634146341vw;
      inline-size: 4.8780487805vw;
    }
  }
  @media (width < 51.25rem) {
    .index .index__icon {
      display: none;
    }
  }
  @media (width < 48rem) {
    .index .index__body {
      padding-inline: 6.4vw;
    }
    .index .index__items {
      --slide-width: calc(285 / 375 * 100vw);
      --slide-height: calc(201 / 375 * 100vw);
      grid-template-columns: 1fr;
    }
    .index .index__item {
      inline-size: var(--slide-width);
    }
    .index .index__item:nth-child(even) {
      -webkit-margin-start: auto;
              margin-inline-start: auto;
    }
    .index .index__item:nth-child(1) .index__embla {
      -webkit-mask-image: url("../img/index_mask_01@sp.svg");
              mask-image: url("../img/index_mask_01@sp.svg");
    }
    .index .index__item:nth-child(1) .index__num {
      top: 3.2vw;
      left: -2.6666666667vw;
    }
    .index .index__item:nth-child(1) .index__arr {
      right: 1.8666666667vw;
      bottom: 3.7333333333vw;
    }
    .index .index__item:nth-child(1) .index__catch {
      bottom: 0vw;
    }
    .index .index__item:nth-child(2) .index__embla {
      -webkit-mask-image: url("../img/index_mask_02@sp.svg");
              mask-image: url("../img/index_mask_02@sp.svg");
    }
    .index .index__item:nth-child(2) .index__num {
      top: 8.5333333333vw;
      left: -3.2vw;
      right: auto;
    }
    .index .index__item:nth-child(2) .index__arr {
      right: 1.6vw;
      bottom: 7.4666666667vw;
    }
    .index .index__item:nth-child(2) .index__catch {
      left: -3.2vw;
      bottom: 3.2vw;
    }
    .index .index__item:nth-child(3) .index__embla {
      -webkit-mask-image: url("../img/index_mask_03@sp.svg");
              mask-image: url("../img/index_mask_03@sp.svg");
    }
    .index .index__item:nth-child(3) .index__num {
      top: 4.2666666667vw;
      left: -1.6vw;
      bottom: auto;
    }
    .index .index__item:nth-child(3) .index__arr {
      bottom: 7.4666666667vw;
      left: -0.5333333333vw;
      right: auto;
    }
    .index .index__item:nth-child(3) .index__catch {
      top: 2.6666666667vw;
      right: 3.2vw;
      letter-spacing: 0.1em;
    }
    .index .index__item:nth-child(4) .index__embla {
      -webkit-mask-image: url("../img/index_mask_04@sp.svg");
              mask-image: url("../img/index_mask_04@sp.svg");
    }
    .index .index__item:nth-child(4) .index__num {
      top: 5.8666666667vw;
      left: -3.7333333333vw;
    }
    .index .index__item:nth-child(4) .index__arr {
      right: 1.6vw;
      bottom: 10.6666666667vw;
    }
    .index .index__item:nth-child(4) .index__catch {
      bottom: 7.4666666667vw;
      left: -3.7333333333vw;
    }
    .index .index__item:nth-child(5) {
      --slide-width: calc(291 / 375 * 100vw);
      --slide-height: calc(144 / 375 * 100vw);
    }
    .index .index__item:nth-child(5) .index__embla {
      -webkit-mask-image: url("../img/index_mask_05@sp.svg");
              mask-image: url("../img/index_mask_05@sp.svg");
    }
    .index .index__item:nth-child(5) .index__button {
      -webkit-margin-start: 0;
              margin-inline-start: 0;
    }
    .index .index__item:nth-child(5) .index__num {
      top: 2.1333333333vw;
      left: 0;
    }
    .index .index__item:nth-child(5) .index__catch {
      left: auto;
      bottom: -3.7333333333vw;
      right: 0;
    }
    .index .index__item:nth-child(5) .index__arr {
      bottom: -3.7333333333vw;
      left: 4.2666666667vw;
    }
    .index .index__num {
      inline-size: 16.2666666667vw;
      -webkit-text-stroke-width: 1px;
    }
    .index .index__num::before {
      font-size: 0.5em;
    }
    .index .index__catch {
      font-size: 4.2666666667vw;
    }
    .index .index__arr {
      font-size: 3.2vw;
      inline-size: 10.6666666667vw;
    }
  }
  .fonts {
    -webkit-padding-before: clamp(1.75rem, 0.012rem + 7.13vw, 6.25rem);
            padding-block-start: clamp(1.75rem, 0.012rem + 7.13vw, 6.25rem);
    -webkit-padding-after: clamp(3rem, 1.262rem + 7.13vw, 7.5rem);
            padding-block-end: clamp(3rem, 1.262rem + 7.13vw, 7.5rem);
    -webkit-border-before: dotted 1px var(--color-base);
            border-block-start: dotted 1px var(--color-base);
  }
  .fonts .fonts__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    letter-spacing: 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-inline-size: 120rem;
    inline-size: 100%;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 0.043rem + 4.95vw, 4.375rem);
  }
  .fonts .fonts__header__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 1.25rem;
       -moz-column-gap: 1.25rem;
            column-gap: 1.25rem;
    inline-size: 100%;
  }
  .fonts .fonts__num {
    font-family: var(--font-aoto-eb);
    font-size: clamp(5.25rem, 4.19rem + 2.07vw, 6rem);
    color: var(--color-white);
    line-height: 0.7;
    letter-spacing: 0;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: var(--color-base);
    translate: 0 10%;
  }
  .fonts .fonts__num:before {
    font-size: 0.7083333333em;
    content: "#";
    display: inline;
  }
  .fonts .fonts__titles {
    display: grid;
    row-gap: 0.5rem;
  }
  .fonts .fonts__title {
    font-family: var(--font-aoto-bold);
    font-size: clamp(2.25rem, 1.897rem + 0.69vw, 2.5rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
  }
  .fonts .fonts__catch {
    font-size: 1.125rem;
    line-height: 1.4;
    opacity: 0;
    -webkit-transition: opacity 0.8s var(--ease-out-quart) 0.2s;
    transition: opacity 0.8s var(--ease-out-quart) 0.2s;
  }
  .fonts .fonts__body {
    -webkit-margin-before: clamp(1.5rem, 0.776rem + 2.97vw, 3.375rem);
            margin-block-start: clamp(1.5rem, 0.776rem + 2.97vw, 3.375rem);
  }
  .fonts .fonts__button {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    text-align: center;
  }
  .fonts .fonts-embla {
    row-gap: clamp(1.5rem, 1.114rem + 1.58vw, 2.5rem);
  }
  .fonts .fonts-embla .embla__slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #f8f7f2;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 24.75rem;
            flex: 0 0 24.75rem;
    -webkit-box-shadow: 0.625rem 0.625rem 0 rgba(15, 46, 50, 0.1);
            box-shadow: 0.625rem 0.625rem 0 rgba(15, 46, 50, 0.1);
    -webkit-margin-end: 2.25rem;
            margin-inline-end: 2.25rem;
    border-radius: 1rem;
    overflow: clip;
    position: relative;
  }
  .fonts .card__button {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    padding: 0.5rem 0.5rem 5.5rem;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
  }
  .fonts .card__button:focus-visible .card__image img {
    scale: 1.1;
  }
  .fonts .card__button:focus-visible .card__zoom {
    color: var(--color-base);
    background-color: var(--color-white);
    rotate: 90deg;
    pointer-events: none;
  }
  @media (any-hover: hover) {
    .fonts .card__button:hover .card__image img {
      scale: 1.1;
    }
    .fonts .card__button:hover .card__zoom {
      color: var(--color-base);
      background-color: var(--color-white);
      rotate: 90deg;
    }
  }
  .fonts .card__image {
    border-radius: 0.5rem;
    overflow: clip;
  }
  .fonts .card__image img {
    aspect-ratio: 380/343;
    display: block;
    inline-size: 100%;
    -webkit-transition: scale 0.5s var(--ease-out-quart);
    transition: scale 0.5s var(--ease-out-quart);
  }
  .fonts .card__type {
    -webkit-box-shadow: 1px -1px 0 #f8f7f2;
            box-shadow: 1px -1px 0 #f8f7f2;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
  }
  .fonts .type__label {
    font-size: 0.875rem;
    background-color: #f8f7f2;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-orientation: mixed;
    -webkit-font-feature-settings: initial;
            font-feature-settings: initial;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    block-size: 2.375rem;
    padding-inline: 1rem;
    border-radius: 0 0 0 8px;
  }
  .fonts .type__round {
    aspect-ratio: 1;
    inline-size: 10px;
    position: absolute;
  }
  .fonts .type__round::after {
    display: block;
    content: "";
    width: 200%;
    height: 200%;
    position: absolute;
    border-radius: 50%;
    -webkit-box-shadow: 10px -10px 0 0 #f8f7f2;
            box-shadow: 10px -10px 0 0 #f8f7f2;
    top: 0;
    right: 0;
  }
  .fonts .type__round--top {
    top: 0.5rem;
    left: -10px;
  }
  .fonts .type__round--bottom {
    bottom: -10px;
    right: 0.5rem;
  }
  .fonts .card__fonts {
    font-family: var(--font-aoto-bold);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
    letter-spacing: 0;
    z-index: 2;
    position: absolute;
    left: 1rem;
    bottom: 1rem;
  }
  .fonts .card__fonts > * {
    inline-size: -webkit-fit-content;
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    text-box: trim-both cap alphabetic;
  }
  .fonts .card__fonts dt {
    font-size: 0.875rem;
    color: var(--color-white);
    background-color: var(--color-base);
    padding: 0.75rem 0.625rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }
  .fonts .card__fonts dt.round {
    border-bottom-right-radius: 0.5rem;
  }
  .fonts .card__fonts dt.round + dd {
    border-top-right-radius: 0 !important;
  }
  .fonts .card__fonts dd {
    font-size: 1.3125rem;
    background-color: var(--color-white);
    padding: 1rem 0.625rem;
    border: solid 1px var(--color-base);
    -webkit-transition: background-color 0.4s var(--ease-out-quart);
    transition: background-color 0.4s var(--ease-out-quart);
  }
  .fonts .card__fonts dd:nth-of-type(1) {
    border-top-right-radius: 0.5rem;
  }
  .fonts .card__fonts dd:nth-of-type(1).round {
    border-bottom-right-radius: 0.5rem;
  }
  .fonts .card__fonts dd:nth-of-type(2) {
    -webkit-margin-before: -1px;
            margin-block-start: -1px;
    border-radius: 0 0 0.5rem 0.5rem;
  }
  .fonts .card__fonts dd:nth-of-type(2).round {
    border-top-right-radius: 0.5rem;
  }
  .fonts .card__zoom {
    font-size: 0.75rem;
    color: var(--color-white);
    background-color: var(--color-base);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    aspect-ratio: 1;
    inline-size: 3rem;
    border: solid 1px var(--color-base);
    border-radius: 50%;
    position: absolute;
    right: 0.75rem;
    bottom: 1rem;
    -webkit-transition: color 0.4s var(--ease-out-quart), background-color 0.4s var(--ease-out-quart), rotate 0.4s var(--ease-out-quart);
    transition: color 0.4s var(--ease-out-quart), background-color 0.4s var(--ease-out-quart), rotate 0.4s var(--ease-out-quart);
  }
  .fonts .card__wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(357px, 100%), 1fr));
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: clamp(1.25rem, 0.864rem + 1.58vw, 2.25rem);
    max-inline-size: 61.25rem;
    margin-inline: auto;
  }
  .fonts .card__wrapper .card {
    background-color: #f8f7f2;
    -webkit-box-shadow: 0.625rem 0.625rem 0 rgba(15, 46, 50, 0.1);
            box-shadow: 0.625rem 0.625rem 0 rgba(15, 46, 50, 0.1);
    max-inline-size: 29.5rem;
    inline-size: 100%;
    margin-inline: auto;
    border-radius: 1rem;
    position: relative;
    overflow: clip;
  }
  .fonts .card__wrapper .card .card__button {
    padding: 0.5rem 0.5rem clamp(1rem, 0.903rem + 0.4vw, 1.25rem);
  }
  .fonts .card__wrapper .card__button {
    display: grid;
    row-gap: clamp(1rem, 0.903rem + 0.4vw, 1.25rem);
  }
  .fonts .card__wrapper .card__image img {
    aspect-ratio: 228/131;
  }
  .fonts .card__wrapper .card__name {
    font-size: clamp(0.813rem, 0.788rem + 0.1vw, 0.875rem);
    color: var(--color-white);
    background-color: var(--color-base);
    text-box: trim-both cap alphabetic;
    padding-block: 0.8571428571em;
    padding-inline: 0.7142857143em;
    border-radius: 0.5714285714em;
    z-index: 1;
    position: absolute;
    top: 1rem;
    left: 1rem;
  }
  .fonts .card__wrapper .card__zoom__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 0.5rem;
       -moz-column-gap: 0.5rem;
            column-gap: 0.5rem;
  }
  .fonts .card__wrapper .card__zoom__wrapper .card__zoom__label {
    font-size: 0.875rem;
    text-box: trim-both cap alphabetic;
  }
  .fonts .card__wrapper .card__zoom__wrapper .card__zoom {
    position: static;
  }
  .fonts.is-active .fonts__catch {
    opacity: 1;
  }
  @media screen and (min-width: 1696px) {
    .fonts .fonts__header {
      padding-inline: calc(0.0412735849 * var(--vw) * 100);
    }
    .fonts .fonts__header__inner {
      -webkit-column-gap: calc(0.0117924528 * var(--vw) * 100);
         -moz-column-gap: calc(0.0117924528 * var(--vw) * 100);
              column-gap: calc(0.0117924528 * var(--vw) * 100);
    }
    .fonts .fonts__num {
      font-size: min(0.0566037736 * var(--vw) * 100, 144px);
    }
    .fonts .fonts__titles {
      row-gap: min(0.0047169811 * var(--vw) * 100, 12px);
    }
    .fonts .fonts__title {
      font-size: min(0.0235849057 * var(--vw) * 100, 60px);
    }
    .fonts .fonts__catch {
      font-size: min(0.0106132075 * var(--vw) * 100, 27px);
    }
    .fonts .fonts__body {
      -webkit-margin-before: calc(0.0318396226 * var(--vw) * 100);
              margin-block-start: calc(0.0318396226 * var(--vw) * 100);
    }
    .fonts .fonts-embla {
      row-gap: calc(0.0235849057 * var(--vw) * 100);
    }
    .fonts .fonts-embla .embla__slide {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 calc(0.233490566 * var(--vw) * 100);
              flex: 0 0 calc(0.233490566 * var(--vw) * 100);
      -webkit-box-shadow: calc(0.0058962264 * var(--vw) * 100) calc(0.0058962264 * var(--vw) * 100) 0 rgba(15, 46, 50, 0.1);
              box-shadow: calc(0.0058962264 * var(--vw) * 100) calc(0.0058962264 * var(--vw) * 100) 0 rgba(15, 46, 50, 0.1);
      -webkit-margin-end: calc(0.0212264151 * var(--vw) * 100);
              margin-inline-end: calc(0.0212264151 * var(--vw) * 100);
      border-radius: calc(0.0094339623 * var(--vw) * 100);
    }
    .fonts .card__button {
      padding: calc(0.0047169811 * var(--vw) * 100) calc(0.0047169811 * var(--vw) * 100) calc(0.0518867925 * var(--vw) * 100);
    }
    .fonts .card__image {
      border-radius: calc(0.0047169811 * var(--vw) * 100);
    }
    .fonts .type__label {
      font-size: calc(0.008254717 * var(--vw) * 100);
      block-size: calc(0.0224056604 * var(--vw) * 100);
      padding-inline: calc(0.0094339623 * var(--vw) * 100);
      border-radius: 0 0 0 calc(0.0047169811 * var(--vw) * 100);
    }
    .fonts .type__round {
      inline-size: calc(0.0058962264 * var(--vw) * 100);
    }
    .fonts .type__round::after {
      -webkit-box-shadow: calc(0.0058962264 * var(--vw) * 100) calc(0.0058962264 * var(--vw) * 100 * -1) 0 0 #f8f7f2;
              box-shadow: calc(0.0058962264 * var(--vw) * 100) calc(0.0058962264 * var(--vw) * 100 * -1) 0 0 #f8f7f2;
    }
    .fonts .type__round--top {
      top: calc(0.0047169811 * var(--vw) * 100);
      left: calc(0.0058962264 * var(--vw) * 100 * -1);
    }
    .fonts .type__round--bottom {
      bottom: calc(0.0058962264 * var(--vw) * 100 * -1);
      right: calc(0.0047169811 * var(--vw) * 100);
    }
    .fonts .card__fonts {
      left: calc(0.0094339623 * var(--vw) * 100);
      bottom: calc(0.0094339623 * var(--vw) * 100);
    }
    .fonts .card__fonts dt {
      font-size: calc(0.008254717 * var(--vw) * 100);
      padding: calc(0.0070754717 * var(--vw) * 100) calc(0.0058962264 * var(--vw) * 100);
      border-top-left-radius: calc(0.0047169811 * var(--vw) * 100);
      border-top-right-radius: calc(0.0047169811 * var(--vw) * 100);
    }
    .fonts .card__fonts dd {
      font-size: calc(0.0123820755 * var(--vw) * 100);
      padding: calc(0.0094339623 * var(--vw) * 100) calc(0.0058962264 * var(--vw) * 100);
    }
    .fonts .card__fonts dd:nth-of-type(1) {
      border-top-right-radius: calc(0.0047169811 * var(--vw) * 100);
    }
    .fonts .card__fonts dd:nth-of-type(1).round {
      border-bottom-right-radius: calc(0.0047169811 * var(--vw) * 100);
    }
    .fonts .card__fonts dd:nth-of-type(2) {
      border-radius: 0 0 calc(0.0047169811 * var(--vw) * 100) calc(0.0047169811 * var(--vw) * 100);
    }
    .fonts .card__fonts dd:nth-of-type(2).round {
      border-top-right-radius: calc(0.0047169811 * var(--vw) * 100);
    }
    .fonts .card__zoom {
      font-size: calc(0.0070754717 * var(--vw) * 100);
      inline-size: calc(0.0283018868 * var(--vw) * 100);
      right: calc(0.0070754717 * var(--vw) * 100);
      bottom: calc(0.0094339623 * var(--vw) * 100);
    }
    .fonts .card__wrapper {
      grid-template-columns: 1fr 1fr;
      gap: calc(0.0212264151 * var(--vw) * 100);
      max-inline-size: calc(0.5778301887 * var(--vw) * 100);
    }
    .fonts .card__wrapper .card {
      -webkit-box-shadow: calc(0.0058962264 * var(--vw) * 100) calc(0.0058962264 * var(--vw) * 100) 0 rgba(15, 46, 50, 0.1);
              box-shadow: calc(0.0058962264 * var(--vw) * 100) calc(0.0058962264 * var(--vw) * 100) 0 rgba(15, 46, 50, 0.1);
      max-inline-size: calc(0.2783018868 * var(--vw) * 100);
      border-radius: calc(0.0094339623 * var(--vw) * 100);
    }
    .fonts .card__wrapper .card .card__button {
      padding: calc(0.0047169811 * var(--vw) * 100) calc(0.0047169811 * var(--vw) * 100) clamp(1rem, 0.903rem + 0.4vw, 1.25rem);
    }
    .fonts .card__wrapper .card__button {
      row-gap: calc(0.0117924528 * var(--vw) * 100);
    }
    .fonts .card__wrapper .card__name {
      font-size: calc(0.008254717 * var(--vw) * 100);
      padding-block: 0.8571428571em;
      padding-inline: 0.7142857143em;
      border-radius: 0.5714285714em;
      top: calc(0.0094339623 * var(--vw) * 100);
      left: calc(0.0094339623 * var(--vw) * 100);
    }
    .fonts .card__wrapper .card__zoom__wrapper {
      -webkit-column-gap: calc(0.0047169811 * var(--vw) * 100);
         -moz-column-gap: calc(0.0047169811 * var(--vw) * 100);
              column-gap: calc(0.0047169811 * var(--vw) * 100);
    }
    .fonts .card__wrapper .card__zoom__wrapper .card__zoom__label {
      font-size: calc(0.008254717 * var(--vw) * 100);
    }
  }
  @media (width < 80rem) {
    .fonts .fonts__header__inner {
      -webkit-padding-end: 0;
              padding-inline-end: 0;
    }
    .fonts .fonts__footer {
      -webkit-margin-before: clamp(2rem, 1.773rem + 0.93vw, 2.25rem);
              margin-block-start: clamp(2rem, 1.773rem + 0.93vw, 2.25rem);
    }
  }
  @media (width < 51.25rem) {
    .fonts .fonts__num {
      font-size: clamp(3rem, 0.959rem + 8.37vw, 5.25rem);
      translate: none;
    }
    .fonts .fonts__title {
      font-size: clamp(1.625rem, 1.058rem + 2.33vw, 2.25rem);
    }
    .fonts .fonts__catch {
      font-size: clamp(1rem, 0.887rem + 0.47vw, 1.125rem);
    }
    .fonts .fonts-embla .embla__slide {
      -webkit-margin-end: clamp(1rem, -0.134rem + 4.65vw, 2.25rem);
              margin-inline-end: clamp(1rem, -0.134rem + 4.65vw, 2.25rem);
      -webkit-box-shadow: clamp(0.375rem, 0.148rem + 0.93vw, 0.625rem) clamp(0.375rem, 0.148rem + 0.93vw, 0.625rem) 0 rgba(15, 46, 50, 0.1);
              box-shadow: clamp(0.375rem, 0.148rem + 0.93vw, 0.625rem) clamp(0.375rem, 0.148rem + 0.93vw, 0.625rem) 0 rgba(15, 46, 50, 0.1);
    }
    .fonts .card__wrapper .card {
      -webkit-box-shadow: clamp(0.375rem, 0.148rem + 0.93vw, 0.625rem) clamp(0.375rem, 0.148rem + 0.93vw, 0.625rem) 0 rgba(15, 46, 50, 0.1);
              box-shadow: clamp(0.375rem, 0.148rem + 0.93vw, 0.625rem) clamp(0.375rem, 0.148rem + 0.93vw, 0.625rem) 0 rgba(15, 46, 50, 0.1);
    }
  }
  @media (width < 40rem) {
    .fonts .fonts__header__inner {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      row-gap: 0.75rem;
    }
    .fonts .fonts__num {
      -webkit-text-stroke: 1px var(--color-base);
    }
    .fonts .fonts-embla .embla__slide {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 77.6vw;
              flex: 0 0 77.6vw;
    }
    .fonts .fonts-embla .card__button {
      -webkit-padding-after: 16.8vw;
              padding-block-end: 16.8vw;
    }
    .fonts .fonts__button .button {
      block-size: 3.75rem;
    }
    .fonts .type__label {
      font-size: 3.7333333333vw;
      block-size: 8vw;
      padding-inline: 3.2vw;
    }
    .fonts .card__fonts {
      left: 0.75rem;
      bottom: 0.75rem;
    }
    .fonts .card__fonts dt {
      font-size: 3.4666666667vw;
      padding: 2.4vw 2.1333333333vw;
    }
    .fonts .card__fonts dd {
      font-size: 4.2666666667vw;
      padding: 3.2vw 2.1333333333vw;
    }
    .fonts .card__zoom {
      inline-size: 9.6vw;
      right: 0.5rem;
      bottom: 0.75rem;
    }
    .fonts .card__wrapper .card {
      max-inline-size: none;
      inline-size: 100%;
      margin-inline: 0;
    }
    .fonts .card__wrapper .card__name {
      font-size: 3.4666666667vw;
    }
    .fonts .card__wrapper .card__zoom__wrapper {
      -webkit-column-gap: 2.1333333333vw;
         -moz-column-gap: 2.1333333333vw;
              column-gap: 2.1333333333vw;
    }
    .fonts .card__wrapper .card__zoom__wrapper .card__zoom__label {
      font-size: 3.7333333333vw;
    }
  }
  #fonts1 {
    background-color: #cdede8;
  }
  #fonts1 .card__button:focus-visible .card__fonts dd {
    background-color: #cdede8;
  }
  @media (any-hover: hover) {
    #fonts1 .card__button:hover .card__fonts dd {
      background-color: #cdede8;
    }
  }
  #fonts2 {
    background-color: #feea6d;
  }
  #fonts2 .card__button:focus-visible .card__fonts dd {
    background-color: #feea6d;
  }
  @media (any-hover: hover) {
    #fonts2 .card__button:hover .card__fonts dd {
      background-color: #feea6d;
    }
  }
  #fonts3 {
    background-color: #ffcdc0;
  }
  #fonts3 .card__button:focus-visible .card__fonts dd {
    background-color: #ffcdc0;
  }
  @media (any-hover: hover) {
    #fonts3 .card__button:hover .card__fonts dd {
      background-color: #ffcdc0;
    }
  }
  #fonts4 {
    background-color: #a9dca4;
  }
  #fonts4 .card__button:focus-visible .card__fonts dd {
    background-color: #a9dca4;
  }
  @media (any-hover: hover) {
    #fonts4 .card__button:hover .card__fonts dd {
      background-color: #a9dca4;
    }
  }
  #fonts5 {
    background-color: #d5cac1;
  }
  #fonts5 .fonts__body {
    padding-inline: clamp(1.25rem, 0.043rem + 4.95vw, 4.375rem);
  }
  #fonts5 .card__button:focus-visible .card__fonts dd {
    background-color: #d5cac1;
  }
  @media (any-hover: hover) {
    #fonts5 .card__button:hover .card__fonts dd {
      background-color: #d5cac1;
    }
  }
  @media screen and (min-width: 1696px) {
    #fonts5 .fonts__body {
      padding-inline: calc(0.0412735849 * var(--vw) * 100);
    }
  }
  .part1 {
    color: var(--color-white);
    background-color: #195ee8;
    text-align: center;
    position: relative;
    overflow: clip;
  }
  .part1::after {
    background-color: #195ee8;
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.85;
    -webkit-transition: opacity 0.5s var(--ease-out-quart);
    transition: opacity 0.5s var(--ease-out-quart);
  }
  .part1 .part1__background {
    inline-size: 100%;
    block-size: 200%;
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
  }
  .part1 .part1__background img {
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
    inline-size: 100%;
    block-size: 100%;
    -webkit-transition: scale 0.5s var(--ease-out-quart);
    transition: scale 0.5s var(--ease-out-quart);
  }
  .part1 .part1__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    row-gap: clamp(1rem, 0.614rem + 1.58vw, 2rem);
    block-size: 360px;
    position: relative;
    z-index: 1;
  }
  .part1 .part1__title {
    font-family: var(--font-aoto-debold);
    font-size: 2rem;
  }
  .part1 + .other {
    -webkit-margin-before: clamp(3.75rem, 1.819rem + 7.92vw, 8.75rem);
            margin-block-start: clamp(3.75rem, 1.819rem + 7.92vw, 8.75rem);
  }
  .part1 .button--white {
    border: none !important;
  }
  @media (any-hover: hover) {
    .part1:has(.button:hover)::after {
      opacity: 0.65;
    }
    .part1:has(.button:hover) .part1__background img {
      scale: 1.1;
    }
  }
  @media screen and (min-width: 1920px) {
    .part1 .part1__body {
      block-size: clamp(30rem, 8.75rem + 17.71vw, 51.25rem);
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1920px) {
    .part1 .part1__body {
      block-size: clamp(22.5rem, 2.308rem + 23.08vw, 30rem);
    }
  }
  @media screen and (min-width: 1696px) {
    .part1 .part1__body {
      row-gap: min(0.0188679245 * var(--vw) * 100, 40.6349206349px);
    }
    .part1 .part1__title {
      font-size: min(0.0188679245 * var(--vw) * 100, 40.6349206349px);
    }
  }
  @media (width < 64rem) {
    .part1 .part1__body {
      max-block-size: 22.5rem;
      block-size: min(30lvh, 462px);
      min-block-size: 14.5rem;
    }
  }
  @media (width < 51.25rem) {
    .part1 .part1__title {
      font-size: clamp(1.25rem, 0.57rem + 2.79vw, 2rem);
    }
  }
  @media (width < 40rem) {
    .part1 .part1__background {
      block-size: 300%;
    }
    .part1 .part1__body {
      max-block-size: none;
      block-size: calc(0.5948717949 * var(--vw) * 100);
    }
  }
  .part2 {
    text-align: center;
    -webkit-margin-before: clamp(3.75rem, 1.819rem + 7.92vw, 8.75rem);
            margin-block-start: clamp(3.75rem, 1.819rem + 7.92vw, 8.75rem);
    padding-inline: clamp(2.5rem, -2.606rem + 7.98vw, 4.375rem);
  }
  .part2 .part2__outer {
    margin-inline: calc(clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem) * -1);
    padding-inline: clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem);
    -webkit-padding-after: clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem);
            padding-block-end: clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem);
    overflow: clip;
    opacity: 0;
    clip-path: inset(100%);
  }
  .part2 .part2__container {
    -webkit-box-shadow: clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem) clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem) 0 rgba(15, 46, 50, 0.1);
            box-shadow: clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem) clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem) 0 rgba(15, 46, 50, 0.1);
    max-inline-size: 100rem;
    margin-inline: auto;
    padding-block: clamp(3rem, 0.957rem + 3.19vw, 3.75rem);
    padding-inline: clamp(2.5rem, -2.606rem + 7.98vw, 4.375rem);
    border-radius: clamp(1.25rem, 1.057rem + 0.79vw, 1.75rem);
    position: relative;
    overflow: clip;
  }
  .part2 .part2__background {
    position: absolute;
    inset: 0;
  }
  .part2 .part2__background img {
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
    inline-size: 100%;
    block-size: 100%;
    -webkit-transition: scale 0.5s var(--ease-out-quart);
    transition: scale 0.5s var(--ease-out-quart);
  }
  .part2 .part2__inner {
    position: relative;
    z-index: 1;
  }
  .part2 .part2__title {
    font-family: var(--font-aoto-bold);
    font-size: clamp(1.5rem, 1.307rem + 0.79vw, 2rem);
  }
  .part2 .part2__body {
    -webkit-margin-before: 2.5rem;
            margin-block-start: 2.5rem;
  }
  .part2 .part2__items {
    inline-size: -webkit-fit-content;
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    margin-inline: auto;
  }
  .part2 .part2__item {
    display: grid;
    row-gap: clamp(0.75rem, 0.653rem + 0.4vw, 1rem);
  }
  .part2 .part2__border {
    -webkit-border-before: dotted 2px var(--color-base);
            border-block-start: dotted 2px var(--color-base);
  }
  .part2 .part2__subtitle {
    font-family: var(--font-aoto-debold);
    font-size: clamp(1rem, 0.903rem + 0.4vw, 1.25rem);
  }
  .part2 .part2__number {
    font-family: var(--font-aoto-debold);
    font-size: clamp(0.875rem, 0.73rem + 0.59vw, 1.25rem);
    -webkit-margin-before: 0.8em;
            margin-block-start: 0.8em;
    letter-spacing: 0;
  }
  .part2 .part2__number li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -webkit-column-gap: 0.5em;
       -moz-column-gap: 0.5em;
            column-gap: 0.5em;
  }
  .part2 .part2__number strong {
    font-family: var(--font-aoto-bold);
  }
  .part2 .part2__number strong.num {
    font-size: clamp(2.5rem, 1.824rem + 2.77vw, 4.25rem);
    line-height: 0.7;
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
  .part2 .part2__number strong.offer {
    font-size: clamp(1.125rem, 0.884rem + 0.99vw, 1.75rem);
  }
  .part2 .part2_footer {
    -webkit-margin-before: 3.75rem;
            margin-block-start: 3.75rem;
  }
  .part2:has(.button:focus-visible) img {
    scale: 1.1;
  }
  @media (any-hover: hover) {
    .part2:has(.button:hover) .part2__background img {
      scale: 1.1;
    }
  }
  .part2.is-active .part2__outer {
    opacity: 1;
    clip-path: inset(0);
    will-change: opacity, clip-path;
    -webkit-transition: opacity 1.6s var(--ease-out-quart), clip-path 1.2s var(--ease-out-quart);
    transition: opacity 1.6s var(--ease-out-quart), clip-path 1.2s var(--ease-out-quart);
  }
  @media (width < 40rem) {
    .part2 {
      padding-inline: 1.25rem;
    }
    .part2 .part2__outer {
      padding-inline: 0.375rem;
    }
    .part2 .part2__container {
      padding-block: 2.5rem;
      padding-inline: 1.75rem;
    }
    .part2 .part2__body {
      -webkit-margin-before: 1.75rem;
              margin-block-start: 1.75rem;
    }
    .part2 .part2_footer {
      -webkit-margin-before: 2.5rem;
              margin-block-start: 2.5rem;
    }
    .part2 .part2__button .button {
      min-block-size: 3.75rem !important;
      -webkit-padding-start: 2rem !important;
              padding-inline-start: 2rem !important;
    }
  }
  @media (width < 24.375rem) {
    .part2 .part2__container {
      padding-block: 10.2564102564vw;
      padding-inline: 7.1794871795vw;
    }
    .part2 .part2__title {
      font-size: 6.1538461538vw;
    }
    .part2 .part2__subtitle {
      font-size: 4.1025641026vw;
    }
    .part2 .part2__number {
      font-size: 3.5897435897vw;
    }
    .part2 .part2__number strong.num {
      font-size: 10.2564102564vw;
    }
    .part2 .part2__number strong.offer {
      font-size: 4.6153846154vw;
    }
  }
  .other {
    -webkit-margin-before: calc(1.5rem - clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem));
            margin-block-start: calc(1.5rem - clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem));
    padding-inline: clamp(2.5rem, -2.606rem + 7.98vw, 4.375rem);
  }
  .other .other__container {
    max-inline-size: 100rem;
    margin-inline: auto;
  }
  .other .other__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -webkit-column-gap: clamp(0.75rem, -0.31rem + 2.07vw, 1.5rem);
       -moz-column-gap: clamp(0.75rem, -0.31rem + 2.07vw, 1.5rem);
            column-gap: clamp(0.75rem, -0.31rem + 2.07vw, 1.5rem);
  }
  .other .other__item {
    background-color: var(--color-white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: clamp(1rem, 0.647rem + 0.69vw, 1.25rem);
    -webkit-box-shadow: clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem) clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem) 0 rgba(15, 46, 50, 0.1), clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem) clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem) 0 rgba(15, 46, 50, 0.1);
            box-shadow: clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem) clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem) 0 rgba(15, 46, 50, 0.1), clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem) clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem) 0 rgba(15, 46, 50, 0.1);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    padding: clamp(1rem, 0.614rem + 1.58vw, 2rem);
    border-radius: 1.25rem;
    cursor: pointer;
    opacity: 0;
    scale: 0.8;
    -webkit-transition: opacity 0.8s var(--ease-out-quart), scale 0.8s var(--ease-out-quart), background-color 0.2s var(--ease-out-quart);
    transition: opacity 0.8s var(--ease-out-quart), scale 0.8s var(--ease-out-quart), background-color 0.2s var(--ease-out-quart);
  }
  .other .other__item:nth-child(2) {
    -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
  }
  .other .other__item:nth-child(3) {
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
  .other .other__item:focus-visible:nth-child(1) {
    background-color: #ffe1d9;
  }
  .other .other__item:focus-visible:nth-child(2) {
    background-color: #cbeac8;
  }
  .other .other__item:focus-visible:nth-child(3) {
    background-color: #fef3ac;
  }
  .other .other__item:focus-visible .other__icon {
    scale: 1.1;
  }
  @media (any-hover: hover) {
    .other .other__item:hover:nth-child(1) {
      background-color: #ffe1d9;
    }
    .other .other__item:hover:nth-child(2) {
      background-color: #cbeac8;
    }
    .other .other__item:hover:nth-child(3) {
      background-color: #fef3ac;
    }
    .other .other__item:hover .other__icon {
      scale: 1.1;
    }
  }
  .other .other__sub {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: clamp(0.625rem, 0.48rem + 0.59vw, 1rem);
  }
  .other .other__icon {
    inline-size: clamp(4.25rem, 3.864rem + 1.58vw, 5.25rem);
    -webkit-transition: scale 0.4s var(--ease-out-quart);
    transition: scale 0.4s var(--ease-out-quart);
  }
  .other .other__title {
    font-family: var(--font-aoto-bold);
    font-size: clamp(1.125rem, 0.98rem + 0.59vw, 1.5rem);
    line-height: 1.4;
  }
  .other .other__note img {
    inline-size: clamp(5.75rem, 4.278rem + 6.04vw, 9.563rem);
  }
  .other .other__subtitle {
    font-size: clamp(0.813rem, 0.788rem + 0.1vw, 0.875rem);
  }
  .other.is-active .other__item {
    opacity: 1;
    scale: 1;
  }
  @media (width < 51.25rem) {
    .other {
      -webkit-margin-before: calc(1.25rem - clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem));
              margin-block-start: calc(1.25rem - clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem));
    }
    .other .other__item {
      -webkit-box-shadow: clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem) clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem) 0 rgba(15, 46, 50, 0.1);
              box-shadow: clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem) clamp(0.375rem, 0.327rem + 0.2vw, 0.5rem) 0 rgba(15, 46, 50, 0.1);
    }
  }
  @media (width < 40rem) {
    .other {
      -webkit-margin-before: calc(2.5rem - clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem));
              margin-block-start: calc(2.5rem - clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem));
      padding-inline: 1.25rem;
    }
    .other .other__wrapper {
      grid-template-columns: 1fr;
      row-gap: 0.75rem;
    }
    .other .other__item {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      text-align: left;
      -webkit-column-gap: 1.625rem;
         -moz-column-gap: 1.625rem;
              column-gap: 1.625rem;
      padding-inline: 1.25rem;
      border-radius: 1rem;
    }
  }
  @media (width < 24.375rem) {
    .other .other__item {
      -webkit-column-gap: 6.6666666667vw;
         -moz-column-gap: 6.6666666667vw;
              column-gap: 6.6666666667vw;
    }
    .other .other__icon {
      inline-size: 17.4358974359vw;
    }
    .other .other__title {
      font-size: 4.6153846154vw;
    }
  }
  .plan {
    text-align: center;
    -webkit-margin-before: 1.5rem;
            margin-block-start: 1.5rem;
    padding-inline: clamp(2.5rem, -2.606rem + 7.98vw, 4.375rem);
  }
  .plan .plan__container {
    background-color: var(--color-white);
    display: grid;
    -webkit-box-shadow: clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem) clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem) 0 rgba(15, 46, 50, 0.1);
            box-shadow: clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem) clamp(0.375rem, 0.278rem + 0.4vw, 0.625rem) 0 rgba(15, 46, 50, 0.1);
    max-inline-size: 100rem;
    margin-inline: auto;
    padding-block: clamp(3rem, 1.94rem + 2.07vw, 3.75rem);
    padding-inline: clamp(1.75rem, -1.961rem + 7.24vw, 4.375rem);
    border-radius: clamp(1.25rem, 1.057rem + 0.79vw, 1.75rem);
    position: relative;
    opacity: 0;
    scale: 0.8;
    -webkit-transition: opacity 0.8s var(--ease-out-quart), scale 0.8s var(--ease-out-quart);
    transition: opacity 0.8s var(--ease-out-quart), scale 0.8s var(--ease-out-quart);
  }
  .plan .plan__icon {
    pointer-events: none;
  }
  .plan .plan__icon li {
    position: absolute;
  }
  .plan .plan__icon li.plan__icon--1 {
    inline-size: clamp(8rem, 1.991rem + 11.72vw, 12.25rem);
    top: clamp(28px, 28px + 10 * (100vw - 1400px) / -580, 38px);
    right: clamp(0.75rem, -0.31rem + 2.07vw, 1.5rem);
  }
  .plan .plan__icon li.plan__icon--2 {
    inline-size: clamp(6.5rem, 3.142rem + 6.55vw, 8.875rem);
    bottom: clamp(1.563rem, 1.209rem + 0.69vw, 1.813rem);
    left: clamp(1.875rem, 0.991rem + 1.72vw, 2.5rem);
  }
  .plan .plan__header {
    display: grid;
    row-gap: clamp(0.5rem, 0.307rem + 0.79vw, 1rem);
  }
  .plan .plan__title {
    font-family: var(--font-aoto-bold);
    font-size: clamp(1.5rem, 1.21rem + 1.19vw, 2.25rem);
  }
  .plan .plan__notes {
    font-size: clamp(0.875rem, 0.827rem + 0.2vw, 1rem);
  }
  .plan .plan__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -webkit-column-gap: clamp(0.75rem, 0.043rem + 1.38vw, 1.25rem);
       -moz-column-gap: clamp(0.75rem, 0.043rem + 1.38vw, 1.25rem);
            column-gap: clamp(0.75rem, 0.043rem + 1.38vw, 1.25rem);
    -webkit-margin-before: clamp(1.25rem, 0.574rem + 2.77vw, 3rem);
            margin-block-start: clamp(1.25rem, 0.574rem + 2.77vw, 3rem);
  }
  .plan .plan__item {
    background-color: #d8ecff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    row-gap: clamp(1rem, 0.71rem + 1.19vw, 1.75rem);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-inline: clamp(1.25rem, -0.517rem + 3.45vw, 2.5rem);
    padding-block: clamp(1rem, 0.71rem + 1.19vw, 1.75rem) clamp(1.5rem, 1.403rem + 0.4vw, 1.75rem);
    border-radius: clamp(1rem, 0.903rem + 0.4vw, 1.25rem);
    -webkit-transition: opacity 0.6s var(--ease-out-quart), translate 0.4s var(--ease-out-quart), scale 0.6s var(--ease-out-quart);
    transition: opacity 0.6s var(--ease-out-quart), translate 0.4s var(--ease-out-quart), scale 0.6s var(--ease-out-quart);
    opacity: 0;
    scale: 1.1;
    cursor: pointer;
  }
  .plan .plan__item:nth-child(1) {
    -webkit-transition-delay: 0.3s, 0s, 0.3s;
            transition-delay: 0.3s, 0s, 0.3s;
  }
  .plan .plan__item:nth-child(2) {
    -webkit-transition-delay: 0.4s, 0s, 0.4s;
            transition-delay: 0.4s, 0s, 0.4s;
  }
  .plan .plan__item:nth-child(3) {
    -webkit-transition-delay: 0.5s, 0s, 0.5s;
            transition-delay: 0.5s, 0s, 0.5s;
  }
  .plan .plan__item:has(.button:focus-visible) {
    translate: 0 -12px;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
  }
  @media (any-hover: hover) {
    .plan .plan__item:hover, .plan .plan__item:has(.button:hover) {
      translate: 0 -12px;
      -webkit-transition-delay: 0s;
              transition-delay: 0s;
    }
  }
  .plan .plan__txt1 {
    font-size: clamp(0.875rem, 0.827rem + 0.2vw, 1rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: clamp(0.625rem, 0.504rem + 0.5vw, 0.938rem);
       -moz-column-gap: clamp(0.625rem, 0.504rem + 0.5vw, 0.938rem);
            column-gap: clamp(0.625rem, 0.504rem + 0.5vw, 0.938rem);
    row-gap: clamp(0.75rem, 0.605rem + 0.59vw, 1.125rem);
  }
  .plan .plan__txt1:before, .plan .plan__txt1:after {
    display: block;
    content: "";
    grid-row: 2;
    grid-column: span 1;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    block-size: clamp(0.5rem, 0.428rem + 0.3vw, 0.688rem);
    -webkit-border-before: solid 1px var(--color-base);
            border-block-start: solid 1px var(--color-base);
    -webkit-transform: skew(-45deg);
            transform: skew(-45deg);
  }
  .plan .plan__txt1:after {
    -webkit-border-start: solid 1px var(--color-base);
            border-inline-start: solid 1px var(--color-base);
  }
  .plan .plan__txt1 .plan__label {
    grid-column: 1/-1;
  }
  .plan .plan__subtitle {
    font-family: var(--font-aoto-bold);
    font-size: clamp(1.125rem, 0.595rem + 1.03vw, 1.5rem);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    letter-spacing: 0.1em;
  }
  .plan .plan__footer {
    -webkit-margin-before: clamp(1.75rem, 1.267rem + 1.98vw, 3rem);
            margin-block-start: clamp(1.75rem, 1.267rem + 1.98vw, 3rem);
  }
  .plan.is-active .plan__container {
    opacity: 1;
    scale: 1;
  }
  .plan.is-active .plan__item {
    opacity: 1;
    scale: 1;
  }
  @media (width < 51.25rem) {
    .plan {
      -webkit-margin-before: 1.25rem;
              margin-block-start: 1.25rem;
    }
    .plan .plan__wrapper {
      grid-template-columns: 1fr;
      row-gap: 0.75rem;
    }
    .plan .plan__container {
      padding-inline: clamp(1.063rem, 0.439rem + 2.56vw, 1.75rem);
    }
    .plan .plan__item:has(.button:focus-visible) {
      translate: 0 -8px;
    }
  }
  @media (width < 51.25rem) and (any-hover: hover) {
    .plan .plan__item:has(.button:hover) {
      translate: 0 -8px;
    }
  }
  @media (width < 48rem) {
    .plan .plan__icon {
      display: none;
    }
  }
  @media (width < 40rem) {
    .plan {
      -webkit-margin-before: 2.5rem;
              margin-block-start: 2.5rem;
      padding-inline: 1.25rem;
    }
  }
  .sub {
    -webkit-margin-before: clamp(2.5rem, 1.535rem + 3.96vw, 5rem);
            margin-block-start: clamp(2.5rem, 1.535rem + 3.96vw, 5rem);
  }
  .share {
    text-align: center;
  }
  .share .share__container {
    display: grid;
    row-gap: 1.5rem;
  }
  .share .share__title {
    font-family: var(--font-aoto-bold);
    font-size: 1.25rem;
  }
  .share .share__button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
  }
  .share .share__button li {
    background-color: var(--color-white);
    border-radius: 50%;
    position: relative;
  }
  .share .share__button li a {
    font-size: 1.5rem;
    color: var(--color-white);
    background-color: var(--color-base);
    letter-spacing: 0;
    display: grid;
    place-items: center;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    inline-size: 3rem;
    block-size: 3rem;
    border: solid 1px transparent;
    border-radius: 50%;
    -webkit-transition: color 0.3s var(--ease-in-out-quart), background-color 0.3s var(--ease-in-out-quart), border-color 0.3s var(--ease-in-out-quart);
    transition: color 0.3s var(--ease-in-out-quart), background-color 0.3s var(--ease-in-out-quart), border-color 0.3s var(--ease-in-out-quart);
  }
  .share .share__button li a:has(.icon-x) {
    background-color: var(--color-black);
  }
  .share .share__button li a:has(.icon-facebook) {
    background-color: #0866ff;
  }
  .share .share__button li a:has(.icon-line) {
    background-color: #4cc764;
  }
  .share .share__button li a:has(.icon-link) {
    font-size: 1.125rem;
  }
  .share .share__button li a:focus-visible {
    opacity: 0.6;
  }
  @media (any-hover: hover) {
    .share .share__button li a:hover {
      background-color: var(--color-white);
    }
    .share .share__button li a:hover:has(.icon-x) {
      color: var(--color-black);
      border-color: var(--color-black);
    }
    .share .share__button li a:hover:has(.icon-facebook) {
      color: #0866ff;
      border-color: #0866ff;
    }
    .share .share__button li a:hover:has(.icon-line) {
      color: #4cc764;
      border-color: #4cc764;
    }
    .share .share__button li a:hover:has(.icon-link) {
      color: var(--color-base);
      border-color: var(--color-base);
    }
  }
  .share .share__button .share__copy {
    font-size: 0.75rem;
    background-color: var(--color-white);
    display: none;
    white-space: nowrap;
    padding: 0.25rem 0.75rem;
    -webkit-box-shadow: 0.125rem 0.125rem 0 rgba(15, 46, 50, 0.1);
            box-shadow: 0.125rem 0.125rem 0 rgba(15, 46, 50, 0.1);
    border-radius: 9999px;
    position: absolute;
    top: -0.5rem;
    left: 50%;
    translate: -50% -100%;
  }
  @media (width < 40rem) {
    .share .share__container {
      row-gap: 1rem;
    }
    .share .share__title {
      font-size: clamp(1rem, 0.61rem + 1.6vw, 1.25rem);
    }
  }
  @media (width < 24.375rem) {
    .share .share__title {
      font-size: 4.1025641026vw;
    }
  }
  .past {
    text-align: center;
    -webkit-margin-before: clamp(5rem, 1.962rem + 6.33vw, 7.5rem);
            margin-block-start: clamp(5rem, 1.962rem + 6.33vw, 7.5rem);
    overflow: clip;
  }
  .past .past__container {
    display: grid;
    max-inline-size: 100%;
  }
  .past .past__title {
    font-family: var(--font-aoto-bold);
    font-size: 2rem;
  }
  .past .past__embla {
    row-gap: clamp(1.25rem, 1.057rem + 0.79vw, 1.75rem);
    -webkit-padding-before: clamp(1.25rem, 1.057rem + 0.79vw, 1.75rem);
            padding-block-start: clamp(1.25rem, 1.057rem + 0.79vw, 1.75rem);
  }
  .past .past__embla .embla__slide {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 22.5rem;
            flex: 0 0 22.5rem;
    -webkit-margin-end: 20px;
            margin-inline-end: 20px;
  }
  .past .past__embla .embla__slide img {
    inline-size: 100%;
    border-radius: 0.75rem;
    -webkit-transition: translate 0.4s ease;
    transition: translate 0.4s ease;
  }
  .past .past__embla .embla__slide a {
    display: block;
  }
  .past .past__embla .embla__slide a:focus-visible img {
    translate: 0 -0.625rem;
  }
  @media (any-hover: hover) {
    .past .past__embla .embla__slide a:hover img {
      translate: 0 -0.625rem;
    }
  }
  .past .past__embla .embla__buttons {
    -webkit-column-gap: clamp(1.25rem, 0.574rem + 2.77vw, 3rem);
       -moz-column-gap: clamp(1.25rem, 0.574rem + 2.77vw, 3rem);
            column-gap: clamp(1.25rem, 0.574rem + 2.77vw, 3rem);
  }
  .past .past__embla .embla__button {
    inline-size: 3rem;
    block-size: 3rem;
  }
  @media (width < 40rem) {
    .past {
      -webkit-margin-before: clamp(3.75rem, 1.8rem + 8vw, 5rem);
              margin-block-start: clamp(3.75rem, 1.8rem + 8vw, 5rem);
    }
    .past .past__title {
      font-size: clamp(1.5rem, 0.72rem + 3.2vw, 2rem);
    }
    .past .past__embla .embla__slide {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 80vw;
              flex: 0 0 80vw;
      -webkit-margin-end: 16px;
              margin-inline-end: 16px;
    }
    .past .past__embla .embla__button {
      inline-size: 2.5rem;
      block-size: 2.5rem;
    }
  }
  @media (width < 24.375rem) {
    .past .past__title {
      font-size: 6.1538461538vw;
    }
  }
  .floatnav {
    -webkit-margin-before: 3.75rem;
            margin-block-start: 3.75rem;
    pointer-events: none;
    z-index: 999;
    position: sticky;
    bottom: 0.625rem;
    opacity: 0;
    translate: 0 100%;
  }
  .floatnav .floatnav__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 0.5rem;
       -moz-column-gap: 0.5rem;
            column-gap: 0.5rem;
  }
  .floatnav .floatnav__item {
    pointer-events: auto;
  }
  .wrapper.is-active .floatnav {
    opacity: 1;
    translate: 0 0;
    -webkit-transition: opacity 0.8s var(--ease-out-quart) 1s, translate 0.8s var(--ease-out-back) 1s;
    transition: opacity 0.8s var(--ease-out-quart) 1s, translate 0.8s var(--ease-out-back) 1s;
  }
}