@charset "UTF-8";
/*
 * Easing
 * https://easings.net/
 */
@font-face {
  font-family: 'Local Noto Sans JP';
  src: local('Noto Sans JP');
}
:root {
  --color-primary: #ff0000;
  --color-secondary: #62aeb8;
  --color-body: #000;
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Roboto', sans-serif;
  --font-top-offset: 0.1em;
  --scale: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 1 / 390 * 100, 1.5px);
  --gradient: #cae68e -3.88%, #b0d899 15.14%, #62aeb8 52.83%, #075ea1 91.05%,
    #004e89 100.58%;
  --side-width: 16;
  --content-width: 390px;
}
@media screen and (min-width: 960px) {
  :root {
    --scale: min(var(--vw, 1vw) * 1 / 1280 * 100, 1.25px);
    --side-width: 88;
    --content-width: 1280px;
  }
}

@layer utility {
  @media screen and (max-width: 959.99px) {
    .pc-only {
      display: none;
    }
  }
  @media screen and (min-width: 960px) {
    .sp-only {
      display: none;
    }
  }
}
@layer page {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--scale) * 64);
    z-index: 1000;
  }
  @media screen and (min-width: 960px) {
    .header {
      top: calc(var(--scale) * 30);
      left: calc(var(--scale) * 24);
      width: auto;
      height: auto;
      background: transparent;
      -webkit-box-shadow: none;
      box-shadow: none;
      position: absolute;
    }
  }
  .header__inner {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    z-index: 2;
  }
  @media screen and (max-width: 959.99px) {
    .header__inner {
      background: #fff;
      border-radius: 0 0 calc(var(--scale) * 8) calc(var(--scale) * 8);
      padding-inline: calc(var(--scale) * 16);
    }
  }
  @media screen and (min-width: 960px) {
    .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;
      gap: calc(var(--scale) * 24);
    }
  }
  .header__logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: calc(var(--scale) * 16);
  }
  @media screen and (min-width: 960px) {
    .header__logo {
      -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;
      gap: calc(var(--scale) * 20);
    }
  }
  .header__logo-link {
    display: block;
    width: calc(var(--scale) * 121);
  }
  @media screen and (min-width: 960px) {
    .header__logo-link {
      width: calc(var(--scale) * 174);
    }
  }
  .header__logo-img {
    width: 100%;
    height: auto;
  }
  .header__logo-text {
    font-size: calc(var(--scale) * 12);
    line-height: 1.3;
    font-weight: 400;
  }
  @media screen and (min-width: 960px) {
    .header__logo-text {
      border-left: none;
      padding-left: 0;
      color: #fff;
    }
  }
  .header__nav {
    display: none;
  }
  @media screen and (min-width: 960px) {
    .header__nav {
      display: block;
    }
  }
  @media screen and (min-width: 960px) {
    .header__nav-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      gap: calc(var(--scale) * 8);
    }
  }
  .header__nav-item {
    display: block;
    line-height: 2;
  }
  .header__nav-link {
    font-size: calc(var(--scale) * 14);
    font-weight: 600;
    text-decoration: none;
    color: #000;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }
  @media screen and (min-width: 960px) {
    .header__nav-link {
      color: #fff;
    }
  }
  .header__nav-link:hover {
    color: var(--color-primary);
  }
  .header__cv {
    display: none;
  }
  @media screen and (min-width: 960px) {
    .header__cv {
      display: block;
      position: relative;
      left: calc(var(--scale) * -24);
      width: calc(var(--scale) * 184);
      text-align: center;
      background: #fff;
      border-radius: 0 0 calc(var(--scale) * 24) 0;
      padding: calc(var(--scale) * 4);
    }
  }
  .header__cv-label {
    font-size: calc(var(--scale) * 12);
    font-weight: 600;
    color: #000;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 2);
  }
  .header__cv-button {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--color-primary);
    color: #fff;
    font-size: calc(var(--scale) * 14);
    font-weight: 500;
    text-decoration: none;
    width: calc(var(--scale) * 176);
    height: calc(var(--scale) * 40);
    border-radius: calc(var(--scale) * 30);
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    padding-inline: calc(var(--scale) * 16);
  }
  @media (hover: hover) {
    .header__cv-button:hover {
      opacity: 0.7;
    }
  }
  .header__cv-button::before {
    content: '';
  }
  .header__cv-button::after {
    content: '';
    display: block;
    width: calc(var(--scale) * 14);
    height: calc(var(--scale) * 14);
    background: #fff;
    place-self: center end;
    -webkit-mask: url('../../../../img/icon_lupe_01.svg') no-repeat
      center/contain;
    mask: url('../../../../img/icon_lupe_01.svg') no-repeat center/contain;
  }
  .header__menu-trigger {
    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;
    gap: calc(var(--scale) * 6);
    width: calc(var(--scale) * 56);
    height: calc(var(--scale) * 30);
    background: var(--color-body);
    border-radius: 100vw;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  @media screen and (min-width: 960px) {
    .header__menu-trigger {
      display: none;
    }
  }
  .header__menu-trigger-bar {
    display: block;
    width: calc(var(--scale) * 32);
    height: 1px;
    background: #fff;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  }
  .is-menu-open .header__menu-trigger-bar:nth-child(1) {
    -webkit-transform: translateY(calc(var(--scale) * 4)) rotate(20deg);
    transform: translateY(calc(var(--scale) * 4)) rotate(20deg);
  }
  .is-menu-open .header__menu-trigger-bar:nth-child(2) {
    -webkit-transform: translateY(calc(var(--scale) * -4)) rotate(-20deg);
    transform: translateY(calc(var(--scale) * -4)) rotate(-20deg);
  }
  .header__sp-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: calc(var(--scale) * 64);
    border-radius: 0 0 calc(var(--scale) * 8) calc(var(--scale) * 8);
    background: #fff;
    opacity: 0;
    translate: 0 -120%;
    visibility: hidden;
    -webkit-transition: opacity 0.3s, visibility 0.3s,
      translate 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 0.3s, visibility 0.3s,
      translate 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
  }
  @media screen and (min-width: 960px) {
    .header__sp-nav {
      display: none;
    }
  }
  .is-menu-open .header__sp-nav {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }
  .header__sp-nav-inner {
    padding: calc(var(--scale) * 40) calc(var(--scale) * 42);
    min-height: 100%;
  }
  .header__sp-nav-list {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--scale) * 24);
    margin-bottom: calc(var(--scale) * 40);
  }
  .header__sp-nav-item {
    width: 100%;
    text-align: center;
  }
  .header__sp-nav-link {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    text-decoration: none;
    color: #000;
    line-height: 2;
    display: block;
  }
  .header__sp-nav-action {
    width: 100%;
    margin-top: auto;
  }
  .header__sp-nav-button {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    width: 100%;
    height: calc(var(--scale) * 64);
    border-radius: calc(var(--scale) * 70);
    gap: calc(var(--scale) * 16);
    font-size: calc(var(--scale) * 20);
    font-weight: 700;
    padding-inline: calc(var(--scale) * 18);
  }
  .header__sp-nav-button::before {
    content: '';
  }
  .header__sp-nav-button::after {
    content: '';
    width: calc(var(--scale) * 32);
    height: calc(var(--scale) * 32);
    background: #fff;
    -webkit-mask: url('../../../../img/icon_lupe_01.svg') no-repeat
      center/contain;
    mask: url('../../../../img/icon_lupe_01.svg') no-repeat center/contain;
    place-self: center end;
  }
}
@media screen and (max-width: 959.99px) {
  .header__fixed {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  .header__fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-inline: calc(var(--scale) * 24);
    z-index: 1000;
    translate: 0 -110%;
    -webkit-transition: translate 0.4s ease-in-out;
    transition: translate 0.4s ease-in-out;
  }
  .header__fixed-inner {
    height: calc(var(--scale) * 80);
    -ms-flex-line-pack: center;
    align-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    padding: 0 calc(var(--scale) * 24);
    background: #fff;
    border-radius: 0 0 calc(var(--scale) * 8) calc(var(--scale) * 8);
    max-width: calc(var(--scale) * 1232);
    margin-inline: auto;
  }
  .header__fixed-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: calc(var(--scale) * 24);
  }
  .header__fixed-logo img {
    width: calc(var(--scale) * 173);
  }
  .header__fixed-logo-text {
    font-size: calc(var(--scale) * 12);
    font-weight: 400;
    line-height: 1.5;
    color: #000;
  }
  .header__fixed-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: calc(var(--scale) * 16);
  }
  .header__fixed-nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: calc(var(--scale) * 12);
  }
  .header__fixed-nav ul a {
    color: #000;
    text-decoration: none;
    font-size: calc(var(--scale) * 12);
    font-weight: 600;
    line-height: 2;
    display: block;
    padding: calc(var(--scale) * 4);
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
}
@media screen and (min-width: 960px) and (hover: hover) {
  .header__fixed-nav ul a:hover {
    opacity: 0.7;
  }
}
@media screen and (min-width: 960px) {
  .header__fixed-cv {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: calc(var(--scale) * 4);
  }
  .header__fixed-cv-button {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(var(--scale) * 8);
    min-width: calc(var(--scale) * 136);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    color: #fff;
    font-size: calc(var(--scale) * 14);
    font-weight: 500;
    text-decoration: none;
    height: calc(var(--scale) * 40);
    border-radius: calc(var(--scale) * 30);
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    padding-left: calc(var(--scale) * 18);
    padding-right: calc(var(--scale) * 12);
  }
}
@media screen and (min-width: 960px) and (hover: hover) {
  .header__fixed-cv-button:hover {
    opacity: 0.7;
  }
}
@media screen and (min-width: 960px) {
  .header__fixed-cv-button span {
    position: relative;
    top: -0.05em;
  }
  .header__fixed-cv-button::after {
    content: '';
    display: block;
    width: calc(var(--scale) * 14);
    height: calc(var(--scale) * 14);
    background: #fff;
    place-self: center end;
    -webkit-mask: url('../../../../img/icon_lupe_01.svg') no-repeat
      center/contain;
    mask: url('../../../../img/icon_lupe_01.svg') no-repeat center/contain;
  }
  .header__fixed-cv-button.is-career {
    background: #fff;
    color: var(--color-primary);
  }
  .header__fixed-cv-button.is-career::after {
    background: var(--color-primary);
    -webkit-mask: url('../../../../img/icon_check_01.svg') no-repeat
      center/contain;
    mask: url('../../../../img/icon_check_01.svg') no-repeat center/contain;
  }
}

@layer page {
  .kv {
    overflow: hidden;
    position: relative;
    height: calc(var(--scale) * 640);
  }
  @media screen and (min-width: 960px) {
    .kv {
      height: calc(var(--scale) * 720);
    }
  }
  .kv__main {
    position: relative;
    height: 100%;
    margin-inline: auto;
    z-index: 2;
  }
  .kv__text {
    position: absolute;
    z-index: 4;
  }
  @media screen and (max-width: 959.99px) {
    .kv__text {
      top: calc(var(--scale) * 98);
      left: 0;
      right: 0;
      margin-inline: auto;
      text-align: center;
    }
  }
  @media screen and (min-width: 960px) {
    .kv__text {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      gap: calc(var(--scale) * 18);
      top: calc(var(--scale) * 26);
      right: calc(var(--scale) * 28);
      margin: 0;
    }
  }
  @media screen and (max-width: 959.99px) {
    .kv__text-01 {
      width: calc(var(--scale) * 183.3);
    }
  }
  @media screen and (min-width: 960px) {
    .kv__text-01 {
      width: calc(var(--scale) * 198.51);
    }
  }
  @media screen and (min-width: 960px) {
    .kv__text-02 {
      margin-top: calc(var(--scale) * 6);
    }
  }
  .kv__img-main {
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    z-index: 3;
    width: calc(var(--scale) * 317.85);
    bottom: calc(var(--scale) * 30);
  }
  @media screen and (min-width: 960px) {
    .kv__img-main {
      bottom: -1px;
      width: calc(var(--scale) * 511.33);
    }
  }
  .kv__imgs {
    position: relative;
    margin-inline: auto;
    width: calc(var(--scale) * 390);
  }
  @media screen and (min-width: 960px) {
    .kv__imgs {
      width: calc(var(--scale) * 1280);
    }
  }
  .kv__imgs img {
    position: absolute;
    z-index: 1;
    opacity: 0;
  }
  .kv__img-01 {
    width: calc(var(--scale) * 84.81);
    left: calc(var(--scale) * 29);
    top: calc(var(--scale) * 199);
  }
  @media screen and (min-width: 960px) {
    .kv__img-01 {
      width: calc(var(--scale) * 158.5);
      left: calc(var(--scale) * 236);
      top: calc(var(--scale) * 358);
    }
  }
  .kv__img-02 {
    width: calc(var(--scale) * 82.69);
    left: calc(var(--scale) * 258);
    top: calc(var(--scale) * 223);
  }
  @media screen and (min-width: 960px) {
    .kv__img-02 {
      width: calc(var(--scale) * 174.16);
      left: calc(var(--scale) * 862.23);
      top: calc(var(--scale) * 321.09);
    }
  }
  .kv__img-03 {
    width: calc(var(--scale) * 103.44);
    left: calc(var(--scale) * -12);
    top: calc(var(--scale) * 355);
  }
  @media screen and (min-width: 960px) {
    .kv__img-03 {
      width: calc(var(--scale) * 162.58);
      left: calc(var(--scale) * 25.86);
      top: calc(var(--scale) * 486);
    }
  }
  .kv__img-04 {
    width: calc(var(--scale) * 104.77);
    left: calc(var(--scale) * 294);
    top: calc(var(--scale) * 342);
  }
  @media screen and (min-width: 960px) {
    .kv__img-04 {
      width: calc(var(--scale) * 164.66);
      left: calc(var(--scale) * 1111.29);
      top: calc(var(--scale) * 424.29);
    }
  }
  .kv__img-05 {
    width: calc(var(--scale) * 100);
    left: calc(var(--scale) * 23);
    top: calc(var(--scale) * 430);
  }
  @media screen and (min-width: 960px) {
    .kv__img-05 {
      width: calc(var(--scale) * 180.37);
      left: calc(var(--scale) * 175);
      top: calc(var(--scale) * 619);
    }
  }
  .kv__img-06 {
    width: calc(var(--scale) * 106.1);
    left: calc(var(--scale) * 266);
    top: calc(var(--scale) * 403);
  }
  @media screen and (min-width: 960px) {
    .kv__img-06 {
      width: calc(var(--scale) * 166.75);
      left: calc(var(--scale) * 973.22);
      top: calc(var(--scale) * 578.15);
    }
  }
  .kv__bg-01,
  .kv__bg-02 {
    position: absolute;
    inset: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center top;
    object-position: center top;
    width: 100%;
    height: 100%;
  }
  .kv__bg-01 {
    z-index: 2;
    opacity: 0.6;
  }
  .kv__bg-02 {
    opacity: 0;
  }
  .kv__cv {
    display: none;
  }
  @media screen and (max-width: 959.99px) {
    .kv__cv {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      gap: calc(var(--scale) * 10);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: calc(var(--scale) * 368);
      margin-inline: auto;
      text-align: center;
      text-decoration: none;
      background: #fff;
      border-radius: calc(var(--scale) * 24) calc(var(--scale) * 24) 0 0;
      padding: calc(var(--scale) * 10) calc(var(--scale) * 14)
        calc(var(--scale) * 9);
      z-index: 5;
      -webkit-box-shadow: 0 0 calc(var(--scale) * 8) rgba(0, 0, 0, 0.15);
      box-shadow: 0 0 calc(var(--scale) * 8) rgba(0, 0, 0, 0.15);
    }
    .kv__cv.kv__cv--fixed {
      position: fixed;
      translate: 0 110%;
      -webkit-transition: translate 0.4s ease-in-out;
      transition: translate 0.4s ease-in-out;
    }
  }
  .kv__cv-label {
    font-size: calc(var(--scale) * 13);
    font-weight: 600;
    color: #000;
    line-height: 1.5;
    text-align: left;
  }
  .kv__cv-button {
    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;
    background: var(--color-primary);
    color: #fff;
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    text-decoration: none;
    width: calc(var(--scale) * 140);
    height: calc(var(--scale) * 38);
    border-radius: calc(var(--scale) * 30);
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .kv__cv-button span {
    display: inline-block;
    margin-top: calc(var(--scale) * -2);
  }
  .kv__cv-button::after {
    content: '';
    display: block;
    width: calc(var(--scale) * 20);
    height: calc(var(--scale) * 20);
    background: #fff;
    -webkit-mask: url('../../../../img/icon_lupe_01.svg') no-repeat
      center/contain;
    mask: url('../../../../img/icon_lupe_01.svg') no-repeat center/contain;
    margin-left: calc(var(--scale) * 8);
    margin-right: calc(var(--scale) * -11);
  }
}
.is-kv-pass .header__fixed {
  translate: 0 0;
}
.is-kv-pass .kv__cv--fixed {
  translate: 0 0;
}

@layer page {
  .message {
    color: #fff;
  }
  .message__recruit {
    margin: 0;
    font-weight: 700;
    font-size: calc(var(--scale) * 16);
    line-height: 1.5;
    text-align: center;
    padding-block: calc(var(--scale) * 12);
    background: -webkit-gradient(
      linear,
      right top,
      left top,
      from(var(--gradient))
    );
    background: linear-gradient(270deg, var(--gradient));
  }
  @media screen and (min-width: 960px) {
    .message__recruit {
      padding-block: calc(var(--scale) * 5);
      line-height: 2;
    }
  }
  .message__main {
    --message-group-height: 1496;
    --message-title-y: 445;
    overflow: hidden;
    position: relative;
    background: -webkit-gradient(
      linear,
      right top,
      left top,
      from(#4494b0),
      color-stop(50.33%, #68b1b6),
      color-stop(101.64%, #87c2a8)
    );
    background: linear-gradient(
      270deg,
      #4494b0 0%,
      #68b1b6 50.33%,
      #87c2a8 101.64%
    );
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-height: calc(var(--scale) * var(--message-group-height));
  }
  .message__main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../../../../img/bg_message_sp.jpg) no-repeat center top/100%
      auto;
    opacity: 0.05;
  }
  @media screen and (min-width: 960px) {
    .message__main {
      background: -webkit-gradient(
        linear,
        right top,
        left top,
        from(var(--gradient))
      );
      background: linear-gradient(270deg, var(--gradient));
    }
    .message__main::after {
      background: url(../../../../img/bg_message.jpg) no-repeat center top/100%
        auto;
    }
  }
  @media screen and (min-width: 960px) {
    .message__main {
      --message-group-height: 1157;
      --message-title-y: 220;
    }
  }
  .message__intro {
    position: absolute;
    z-index: 1;
    top: calc(var(--scale) * 34);
    width: calc(var(--scale) * 304.51);
    left: 0;
    right: 0;
    margin-inline: auto;
  }
  @media screen and (min-width: 960px) {
    .message__intro {
      display: none;
    }
  }
  .message__content {
    position: absolute;
    z-index: 1;
    top: calc(var(--scale) * var(--message-title-y));
    left: 0;
    right: 0;
    text-align: center;
  }
  .message__title {
    font-size: calc(var(--scale) * 40);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
  }
  @media screen and (min-width: 960px) {
    .message__title {
      line-height: 1.8;
    }
  }
  .message__keywords {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--scale) * var(--message-group-height));
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    margin-inline: auto;
  }
  @media screen and (min-width: 960px) {
    .message__keywords {
      width: calc(var(--scale) * 1280);
    }
  }
  .message__keyword {
    position: absolute;
    margin: 0;
    color: #fff;
    opacity: 0;
    font-weight: 700;
    white-space: nowrap;
  }
  @media screen and (max-width: 959.99px) {
    .message__keyword:nth-child(1) {
      left: calc(var(--scale) * 195);
      top: calc(var(--scale) * 237);
      font-size: calc(var(--scale) * 32);
      line-height: 1.6;
    }
    .message__keyword:nth-child(2) {
      left: calc(var(--scale) * 26);
      top: calc(var(--scale) * 295);
      font-size: calc(var(--scale) * 48);
      line-height: 1.2;
    }
    .message__keyword:nth-child(3) {
      left: calc(var(--scale) * 200);
      top: calc(var(--scale) * 380);
      font-size: calc(var(--scale) * 40);
      line-height: 1.8;
    }
  }
  @media screen and (max-width: 959.99px) and (700px <= width) {
    .message__keyword:nth-child(3) {
      left: calc(var(--scale) * 354);
    }
  }
  @media screen and (max-width: 959.99px) {
    .message__keyword:nth-child(4) {
      left: calc(var(--scale) * -30);
      top: calc(var(--scale) * 411);
      font-size: calc(var(--scale) * 24);
      line-height: 2;
    }
    .message__keyword:nth-child(5) {
      left: calc(var(--scale) * -107);
      top: calc(var(--scale) * 865);
      font-size: calc(var(--scale) * 40);
      line-height: 1.8;
    }
  }
  @media screen and (max-width: 959.99px) and (850px <= width) {
    .message__keyword:nth-child(5) {
      left: calc(var(--scale) * -10);
    }
  }
  @media screen and (max-width: 959.99px) {
    .message__keyword:nth-child(6) {
      left: calc(var(--scale) * 188);
      top: calc(var(--scale) * 915);
      font-size: calc(var(--scale) * 48);
      line-height: 1.2;
    }
  }
  @media screen and (max-width: 959.99px) and (720px <= width) {
    .message__keyword:nth-child(6) {
      left: calc(var(--scale) * 250);
    }
  }
  @media screen and (max-width: 959.99px) and (850px <= width) {
    .message__keyword:nth-child(6) {
      left: calc(var(--scale) * 400);
    }
  }
  @media screen and (max-width: 959.99px) {
    .message__keyword:nth-child(7) {
      left: calc(var(--scale) * 337);
      top: calc(var(--scale) * 852);
      font-size: calc(var(--scale) * 24);
      line-height: 2;
    }
  }
  @media screen and (max-width: 959.99px) and (850px <= width) {
    .message__keyword:nth-child(7) {
      left: calc(var(--scale) * 450);
    }
  }
  @media screen and (max-width: 959.99px) {
    .message__keyword:nth-child(8) {
      left: calc(var(--scale) * -115);
      top: calc(var(--scale) * 959);
      font-size: calc(var(--scale) * 24);
      line-height: 2;
    }
  }
  @media screen and (max-width: 959.99px) and (850px <= width) {
    .message__keyword:nth-child(8) {
      left: calc(var(--scale) * 30);
    }
  }
  @media screen and (min-width: 960px) {
    .message__keyword:nth-child(1) {
      left: calc(var(--scale) * 658);
      top: calc(var(--scale) * 46);
      font-size: calc(var(--scale) * 40);
      line-height: 1.8;
    }
    .message__keyword:nth-child(2) {
      left: calc(var(--scale) * 64);
      top: calc(var(--scale) * 110);
      font-size: calc(var(--scale) * 64);
      line-height: 1.2;
    }
    .message__keyword:nth-child(3) {
      left: calc(var(--scale) * 833);
      top: calc(var(--scale) * 190);
      font-size: calc(var(--scale) * 40);
      line-height: 1.8;
    }
    .message__keyword:nth-child(4) {
      left: calc(var(--scale) * 15);
      top: calc(var(--scale) * 214);
      font-size: calc(var(--scale) * 32);
      line-height: 1.6;
    }
    .message__keyword:nth-child(5) {
      left: calc(var(--scale) * 64);
      top: calc(var(--scale) * 496);
      font-size: calc(var(--scale) * 48);
      line-height: 1.2;
    }
    .message__keyword:nth-child(6) {
      left: calc(var(--scale) * 611);
      top: calc(var(--scale) * 472);
      font-size: calc(var(--scale) * 64);
      line-height: 2;
    }
    .message__keyword:nth-child(7) {
      left: calc(var(--scale) * 1123);
      top: calc(var(--scale) * 367);
      font-size: calc(var(--scale) * 32);
      line-height: 1.6;
    }
    .message__keyword:nth-child(8) {
      left: calc(var(--scale) * 344);
      top: calc(var(--scale) * 609);
      font-size: calc(var(--scale) * 32);
      line-height: 1.6;
    }
  }
}
@layer page {
  .comment {
    --overlap-height: 320;
    overflow: hidden;
    margin-top: calc(var(--scale) * var(--overlap-height) * -1);
    position: relative;
  }
  @media screen and (min-width: 960px) {
    .comment {
      --overlap-height: 340;
    }
  }
  .comment::before {
    content: '';
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(255, 255, 255, 0)),
      color-stop(99.19%, #fff)
    );
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 99.19%);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--scale) * var(--overlap-height));
  }
  .comment__inner {
    position: relative;
    z-index: 1;
  }
  .comment__title {
    padding-block: 0;
  }
  .comment__cards {
    display: grid;
    gap: calc(var(--scale) * 24);
    margin-top: calc(var(--scale) * -26);
  }
  @media screen and (min-width: 960px) {
    .comment__cards {
      margin-top: calc(var(--scale) * -20);
      grid-template-columns: repeat(2, 1fr);
      gap: 0 calc(var(--scale) * 24);
    }
  }
  .comment__card {
    background: #fff;
    padding: calc(var(--scale) * 34) calc(var(--scale) * 24)
      calc(var(--scale) * 47);
    border-radius: calc(var(--scale) * 8);
    -webkit-box-shadow: 0 0 calc(var(--scale) * 25) 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 calc(var(--scale) * 25) 0 rgba(0, 0, 0, 0.15);
  }
  @media screen and (min-width: 960px) {
    .comment__card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      padding: calc(var(--scale) * 26) calc(var(--scale) * 40)
        calc(var(--scale) * 75);
    }
  }
  .comment__card-title {
    color: var(--color-secondary);
    text-align: center;
    font-size: calc(var(--scale) * 20);
    font-weight: 700;
    line-height: 1.5;
    place-self: center;
    -ms-flex-line-pack: center;
    align-content: center;
    min-height: 1.6lh;
    margin-bottom: calc(var(--scale) * 28);
  }
  .comment__card-title small {
    display: block;
    font-size: calc(var(--scale) * 16);
  }
  @media screen and (min-width: 960px) {
    .comment__card-title {
      font-size: calc(var(--scale) * 24);
      margin-bottom: calc(var(--scale) * 20);
    }
  }
  .comment__card-profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: calc(var(--scale) * 16);
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: calc(var(--scale) * 12);
    line-height: 1.5;
  }
  @media screen and (min-width: 960px) {
    .comment__card-profile {
      margin-bottom: calc(var(--scale) * 16);
    }
  }
  .comment__card-profile dt,
  .comment__card-profile dd {
    margin: 0;
    line-height: 1.5;
  }
  .comment__card-icon {
    width: calc(var(--scale) * 73);
    min-width: calc(var(--scale) * 73);
  }
  .comment__card-icon img {
    width: 100%;
  }
  .comment__card-info {
    display: grid;
    grid-template-columns: 3em 1fr;
  }
  @media screen and (max-width: 959.99px) {
    .comment__card-info {
      font-size: calc(var(--scale) * 12);
      line-height: 1.3;
    }
  }
  .comment__card-info dd {
    padding-left: 1em;
  }
  .comment__card-info dd::before {
    content: '：';
    display: inline-block;
    margin-left: -1em;
  }
  .comment__card-tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(var(--scale) * 8) calc(var(--scale) * 4);
    margin-bottom: calc(var(--scale) * 30);
  }
  @media screen and (min-width: 960px) {
    .comment__card-tags {
      margin-bottom: calc(var(--scale) * 32);
    }
  }
  .comment__card-tag {
    border: 1px solid var(--color-secondary);
    border-radius: 100vw;
    color: var(--color-secondary);
    font-size: calc(var(--scale) * 12);
    font-weight: 600;
    padding: calc(var(--scale) * 5) calc(var(--scale) * 9);
  }
  .comment__card-body {
    display: grid;
    gap: calc(var(--scale) * 24);
  }
  .comment__card-section-title {
    color: var(--color-secondary);
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: calc(var(--scale) * 8);
  }
  .comment__graphs {
    margin-bottom: calc(var(--scale) * 60);
  }
  @media screen and (min-width: 960px) {
    .comment__graphs {
      margin-bottom: calc(var(--scale) * 119);
    }
  }
  .comment__graph {
    position: relative;
  }
  @media screen and (max-width: 959.99px) {
    .comment__graph {
      margin-top: calc(var(--scale) * 60);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph {
      min-height: calc(var(--scale) * 704);
      -ms-flex-line-pack: center;
      align-content: center;
      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;
    }
  }
  .comment__graph-title {
    text-align: center;
    font-size: calc(var(--scale) * 24);
    font-weight: 700;
    line-height: 2;
  }
  @media screen and (min-width: 960px) {
    .comment__graph-title.comment__graph-title--01 {
      margin-top: calc(var(--scale) * 20);
    }
  }
  .comment__graph-item {
    --_color: #d9f1f4;
    position: relative;
    border: calc(var(--scale) * 20) solid var(--_color);
    border-radius: calc(var(--scale) * 100);
    font-size: calc(var(--scale) * 16);
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
    -ms-flex-line-pack: center;
    align-content: center;
    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;
    padding: calc(var(--scale) * 15) calc(var(--scale) * 10);
    min-height: calc(var(--scale) * 110);
  }
  @media screen and (max-width: 959.99px) {
    .comment__graph-item {
      margin-top: calc(var(--scale) * 18);
      margin-inline: auto;
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph-item {
      position: absolute;
    }
  }
  .comment__graph-item::before {
    content: '';
    position: absolute;
    background: var(--_color);
  }
  .comment__graph-item.is-01,
  .comment__graph-item.is-05 {
    --_color: #e3f0fa;
  }
  .comment__graph-item.is-02,
  .comment__graph-item.is-04 {
    --_color: #d9f1f4;
  }
  .comment__graph-item.is-03 {
    --_color: #d7f1c7;
  }
  .comment__graph-item.is-01,
  .comment__graph-item.is-02 {
    width: calc(var(--scale) * 372);
    height: calc(var(--scale) * 190);
    border-radius: calc(var(--scale) * 100);
  }
  .comment__graph-item.is-01::before,
  .comment__graph-item.is-02::before {
    width: calc(var(--scale) * 44);
    height: calc(var(--scale) * 58);
  }
  @media screen and (max-width: 959.99px) {
    .comment__graph-item.is-01 {
      left: calc(var(--scale) * -7);
      margin-top: calc(var(--scale) * 46);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph-item.is-01 {
      right: calc(50% + var(--scale) * 11);
      top: calc(var(--scale) * 0);
    }
  }
  @media screen and (max-width: 959.99px) {
    .comment__graph-item.is-01::before {
      bottom: calc(100% + var(--scale) * 6);
      right: calc(var(--scale) * 62);
      -webkit-clip-path: polygon(0 0, 100% 100%, 0% 100%);
      clip-path: polygon(0 0, 100% 100%, 0% 100%);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph-item.is-01::before {
      top: calc(100% + var(--scale) * 6);
      right: calc(var(--scale) * 62);
      -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%);
      clip-path: polygon(0 0, 100% 0%, 100% 100%);
    }
  }
  @media screen and (max-width: 959.99px) {
    .comment__graph-item.is-02 {
      left: calc(var(--scale) * -7);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph-item.is-02 {
      left: calc(50% + var(--scale) * 13);
      top: calc(var(--scale) * 0);
    }
  }
  .comment__graph-item.is-02::before {
    -webkit-clip-path: polygon(0 0, 100% 0%, 0 100%);
    clip-path: polygon(0 0, 100% 0%, 0 100%);
    top: calc(100% + var(--scale) * 6);
  }
  @media screen and (max-width: 959.99px) {
    .comment__graph-item.is-02::before {
      left: calc(var(--scale) * 52);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph-item.is-02::before {
      left: calc(var(--scale) * 51);
    }
  }
  .comment__graph-item.is-03 {
    border-radius: calc(var(--scale) * 90);
  }
  @media screen and (max-width: 959.99px) {
    .comment__graph-item.is-03 {
      width: calc(var(--scale) * 300);
      height: calc(var(--scale) * 217);
      left: calc(var(--scale) * 29);
      margin-top: calc(var(--scale) * 45);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph-item.is-03 {
      width: calc(var(--scale) * 300);
      height: calc(var(--scale) * 217);
      right: calc(50% + var(--scale) * 235);
      bottom: calc(var(--scale) * 59);
    }
  }
  @media screen and (max-width: 959.99px) {
    .comment__graph-item.is-03::before {
      width: calc(var(--scale) * 44);
      height: calc(var(--scale) * 58);
      right: calc(var(--scale) * 40);
      bottom: calc(100% + var(--scale) * 5);
      -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 100% 100%, 0 100%);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph-item.is-03::before {
      width: calc(var(--scale) * 58);
      height: calc(var(--scale) * 44);
      left: calc(100% + var(--scale) * 5);
      bottom: calc(var(--scale) * 97);
      -webkit-clip-path: polygon(0 0, 100% 0%, 0 100%);
      clip-path: polygon(0 0, 100% 0%, 0 100%);
    }
  }
  .comment__graph-item.is-04 {
    width: calc(var(--scale) * 380);
    height: calc(var(--scale) * 161);
  }
  @media screen and (max-width: 959.99px) {
    .comment__graph-item.is-04 {
      left: calc(var(--scale) * -10);
      margin-top: calc(var(--scale) * 53);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph-item.is-04 {
      right: calc(50% - var(--scale) * 191);
      bottom: calc(var(--scale) * 0);
    }
  }
  .comment__graph-item.is-04::before {
    bottom: calc(100% + var(--scale) * 5);
    width: calc(var(--scale) * 44);
    height: calc(var(--scale) * 58);
    -webkit-clip-path: polygon(0 100%, 100% 0%, 100% 100%);
    clip-path: polygon(0 100%, 100% 0%, 100% 100%);
  }
  @media screen and (max-width: 959.99px) {
    .comment__graph-item.is-04::before {
      left: calc(var(--scale) * 54);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph-item.is-04::before {
      left: calc(var(--scale) * 54);
    }
  }
  .comment__graph-item.is-05 {
    width: calc(var(--scale) * 325);
    height: calc(var(--scale) * 172);
    border-radius: calc(var(--scale) * 72);
  }
  @media screen and (max-width: 959.99px) {
    .comment__graph-item.is-05 {
      left: calc(var(--scale) * 40);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph-item.is-05 {
      left: calc(50% + var(--scale) * 226);
      bottom: calc(var(--scale) * 90);
    }
  }
  .comment__graph-item.is-05::before {
    right: calc(100% + var(--scale) * 5);
    top: calc(var(--scale) * 25);
    width: calc(var(--scale) * 58);
    height: calc(var(--scale) * 44);
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%);
  }
  @media screen and (min-width: 960px) {
    .comment__graph--01 {
      min-height: calc(var(--scale) * 607);
      margin-top: calc(var(--scale) * 88);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph--02 {
      min-height: calc(var(--scale) * 583);
      margin-top: calc(var(--scale) * 113);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph--02 .comment__graph-item.is-03 {
      right: calc(50% + var(--scale) * 228);
      bottom: calc(var(--scale) * 83);
    }
    .comment__graph--02 .comment__graph-item.is-05 {
      left: calc(50% + var(--scale) * 210);
      bottom: calc(var(--scale) * 118);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph--03 {
      min-height: calc(var(--scale) * 583);
      margin-top: calc(var(--scale) * 112);
    }
  }
  @media screen and (min-width: 960px) {
    .comment__graph--03 .comment__graph-item.is-03 {
      right: calc(50% + var(--scale) * 204);
      bottom: calc(var(--scale) * 108);
    }
    .comment__graph--03 .comment__graph-item.is-05 {
      left: calc(50% + var(--scale) * 194);
      bottom: calc(var(--scale) * 147);
    }
  }
}
@layer page {
  .charm {
    padding-bottom: calc(var(--scale) * 80);
    overflow: hidden;
  }
  @media screen and (min-width: 960px) {
    .charm {
      padding-bottom: calc(var(--scale) * 160);
    }
  }
  .charm__img {
    margin: 0 calc(50% - var(--vw, 1vw) * 50);
    position: relative;
  }
  .charm__img img {
    display: block;
    margin-inline: auto;
  }
  .charm__img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: -webkit-gradient(
      linear,
      right top,
      left top,
      from(var(--gradient))
    );
    background: linear-gradient(270deg, var(--gradient));
    opacity: 0.7;
  }
  .charm__header {
    min-height: calc(var(--scale) * 60);
    -ms-flex-line-pack: center;
    align-content: center;
  }
  @media screen and (min-width: 960px) {
    .charm__header {
      margin-top: calc(var(--scale) * 30);
      margin-bottom: calc(var(--scale) * 10);
    }
  }
  @media screen and (max-width: 959.99px) {
    .charm__items {
      margin-inline: calc(var(--scale) * -16);
    }
  }
  .charm__item {
    margin-bottom: calc(var(--scale) * 24);
    background: url(../../../../img/bg_charn_point_01.jpg) no-repeat left
      top/cover;
    min-height: calc(var(--scale) * 434);
    border-radius: 0 0 calc(var(--scale) * 24) 0;
  }
  @media screen and (min-width: 960px) {
    .charm__item {
      display: grid;
      grid-template-columns: 44% 1fr;
      min-height: calc(var(--scale) * 280);
      margin-bottom: calc(var(--scale) * 16);
    }
  }
  .charm__item.is-01 {
    background: url(../../../../img/bg_charn_point_01_sp.jpg) no-repeat left
      top/cover;
  }
  @media screen and (min-width: 960px) {
    .charm__item.is-01 {
      background: url(../../../../img/bg_charn_point_01.jpg) no-repeat left
        top/cover;
    }
  }
  .charm__item.is-02 {
    background: url(../../../../img/bg_charn_point_02_sp.jpg) no-repeat left
      top/cover;
  }
  @media screen and (min-width: 960px) {
    .charm__item.is-02 {
      background: url(../../../../img/bg_charn_point_02.jpg) no-repeat left
        top/cover;
    }
  }
  .charm__item.is-03 {
    background: url(../../../../img/bg_charn_point_03_sp.jpg) no-repeat left
      top/cover;
  }
  @media screen and (min-width: 960px) {
    .charm__item.is-03 {
      background: url(../../../../img/bg_charn_point_03.jpg) no-repeat left
        top/cover;
    }
  }
  .charm__item-number {
    opacity: 0.7;
    color: #fff;
    font-family: var(--font-en);
    font-size: calc(var(--scale) * 40);
    font-weight: 700;
    line-height: 1;
    padding: calc(var(--scale) * 2);
  }
  @media screen and (min-width: 960px) {
    .charm__item-number {
      padding: calc(var(--scale) * 8);
    }
  }
  .charm__item-number b {
    display: block;
    font-size: calc(var(--scale) * 64);
    font-weight: 700;
    margin-top: calc(var(--scale) * -8);
  }
  .charm__item-content {
    padding: calc(var(--scale) * 30) calc(var(--scale) * 30);
    color: #fff;
    -ms-flex-item-align: center;
    align-self: center;
  }
  @media screen and (min-width: 960px) {
    .charm__item-content {
      padding: calc(var(--scale) * 43) calc(var(--scale) * 66);
      padding-left: 0;
    }
  }
  .charm__item-label {
    color: var(--color-primary);
    font-weight: 600;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 8);
  }
  .charm__item-title {
    font-size: calc(var(--scale) * 20);
    font-weight: 700;
    margin-bottom: calc(var(--scale) * 16);
  }
  .charm__item-text {
    line-height: 2;
  }
  .charm__recruitment {
    max-width: calc(var(--scale) * 890);
    margin-top: calc(var(--scale) * 40);
    margin-inline: auto;
  }
  @media screen and (min-width: 960px) {
    .charm__recruitment {
      margin-top: calc(var(--scale) * 80);
    }
  }
  .charm__recruitment-title {
    text-align: center;
    font-size: calc(var(--scale) * 24);
    font-weight: 700;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 16);
  }
  .charm__recruitment-text {
    text-align: center;
    margin-bottom: calc(var(--scale) * 48);
  }
  .charm__recruitment-content-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--scale) * 42) 0;
  }
  @media screen and (min-width: 960px) {
    .charm__recruitment-content-wrapper {
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
    }
  }
  @media screen and (min-width: 960px) {
    .charm__recruitment-content {
      -ms-flex-preferred-size: calc(var(--scale) * 388);
      flex-basis: calc(var(--scale) * 388);
    }
  }
  .charm__recruitment-list {
    margin-bottom: calc(var(--scale) * 24);
  }
  @media screen and (min-width: 960px) {
    .charm__recruitment-list {
      margin-bottom: calc(var(--scale) * 32);
    }
  }
  .charm__recruitment-item {
    display: grid;
    grid-template-columns: 1.75em 1fr;
    gap: calc(var(--scale) * 16);
    font-weight: 600;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 8);
  }
  .charm__recruitment-item::before {
    content: '';
    display: block;
    width: 1.75em;
    height: 1.75em;
    background: var(--color-primary);
    margin-top: 0.1em;
    -webkit-mask: url(../../../../img/icon_check_01.svg) no-repeat center
      center/contain;
    mask: url(../../../../img/icon_check_01.svg) no-repeat center center/contain;
  }
  .charm__recruitment-button {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    border-radius: 1000vh;
    border: 2px solid var(--color-primary);
    text-align: center;
    font-size: calc(var(--scale) * 20);
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    padding: calc(var(--scale) * 24) calc(var(--scale) * 17);
    color: var(--color-body);
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .charm__recruitment-button::before {
    content: '';
  }
  .charm__recruitment-button::after {
    content: '';
    width: 1.75em;
    height: 1.75em;
    background: var(--color-primary);
    -webkit-mask: url(../../../../img/icon_check_01.svg) no-repeat center
      center/contain;
    mask: url(../../../../img/icon_check_01.svg) no-repeat center center/contain;
    place-self: end;
  }
  @media (hover: hover) {
    .charm__recruitment-button:hover {
      opacity: 0.7;
    }
  }
  .charm__recruitment-button--red {
    background: var(--color-primary);
    color: #fff;
  }
  .charm__recruitment-button--red::after {
    background: #fff;
    -webkit-mask-image: url(../../../../img/icon_lupe_01.svg);
    mask-image: url(../../../../img/icon_lupe_01.svg);
  }
  .charm__recruitment-button-text {
    position: relative;
    top: var(--font-top-offset);
  }
}
@layer page {
  .explanation {
    background: -webkit-gradient(
      linear,
      right top,
      left top,
      from(var(--gradient))
    );
    background: linear-gradient(270deg, var(--gradient));
    overflow: hidden;
  }
  .explanation__header {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    -ms-flex-line-pack: center;
    align-content: center;
  }
  @media screen and (min-width: 960px) {
    .explanation__header {
      min-height: calc(var(--scale) * 168);
    }
  }
  .explanation__content {
    margin: 0 calc(50% - var(--vw, 1vw) * 50);
    padding: 0 calc(var(--vw, 1vw) * 50 - 50%);
    padding-bottom: calc(var(--scale) * 88);
    position: relative;
  }
  .explanation__content::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(min(var(--vw, 1vw), var(--svh, 1vh)) * 16 / 390 * 100);
    right: calc(min(var(--vw, 1vw), var(--svh, 1vh)) * 16 / 390 * 100);
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    margin-inline: auto;
    pointer-events: none;
  }
  @media screen and (min-width: 960px) {
    .explanation__content::before {
      left: calc(var(--vw, 1vw) * 88 / 1280 * 100);
      right: calc(var(--vw, 1vw) * 88 / 1280 * 100);
      max-width: calc((1280px - 176px) * 1.25);
    }
  }
  .explanation__content::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: calc(var(--scale) * 88);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    pointer-events: none;
  }
  @media screen and (max-width: 959.99px) {
    .explanation__content::after {
      left: calc(min(var(--vw, 1vw), var(--svh, 1vh)) * 16 / 390 * 100);
      right: calc(min(var(--vw, 1vw), var(--svh, 1vh)) * 16 / 390 * 100);
    }
  }
  .explanation__grid {
    display: grid;
    border-left: 1px solid #fff;
    grid-template-columns: repeat(2, 1fr);
  }
  @media screen and (min-width: 960px) {
    .explanation__grid {
      gap: calc(var(--scale) * 16) 0;
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .explanation__card {
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    color: #fff;
    text-align: center;
    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: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: calc(var(--scale) * 338);
    padding: calc(var(--scale) * 28) calc(var(--scale) * 2)
      calc(var(--scale) * 4);
  }
  @media screen and (min-width: 960px) {
    .explanation__card {
      border-top: 1px solid #fff;
      padding: calc(var(--scale) * 40) calc(var(--scale) * 8)
        calc(var(--scale) * 4);
    }
  }
  @media screen and (max-width: 959.99px) {
    .explanation__card.is-02 .explanation__card-icon {
      padding-top: calc(var(--scale) * 24);
    }
  }
  @media screen and (max-width: 959.99px) {
    .explanation__card.is-03 .explanation__card-icon {
      margin-bottom: calc(var(--scale) * 12);
    }
  }
  @media screen and (max-width: 959.99px) {
    .explanation__card.is-08 .explanation__card-icon {
      padding-top: 0;
      margin-bottom: calc(var(--scale) * 8);
    }
  }
  @media screen and (min-width: 960px) {
    .explanation__card.is-08 .explanation__card-icon {
      margin-top: calc(var(--scale) * -42);
    }
  }
  .explanation__card-label {
    font-weight: 600;
  }
  .explanation__card-value,
  .explanation__card-data-value {
    font-family: var(--font-en);
    font-size: f;
    font-size: calc(var(--scale) * 56);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
  }
  @media screen and (min-width: 960px) {
    .explanation__card-value,
    .explanation__card-data-value {
      font-size: calc(var(--scale) * 72);
    }
  }
  .explanation__card-value.is-small,
  .explanation__card-data-value.is-small {
    font-size: calc(var(--scale) * 48);
    margin-top: calc(var(--scale) * 6);
  }
  @media screen and (min-width: 960px) {
    .explanation__card-value.is-small,
    .explanation__card-data-value.is-small {
      font-size: calc(var(--scale) * 56);
    }
  }
  .explanation__card-value.is-midium,
  .explanation__card-data-value.is-midium {
    font-size: calc(var(--scale) * 48);
  }
  @media screen and (min-width: 960px) {
    .explanation__card-value.is-midium,
    .explanation__card-data-value.is-midium {
      font-size: calc(var(--scale) * 72);
    }
  }
  .explanation__card-unit {
    font-family: var(--font-jp);
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 1.5;
    margin-left: 0.1em;
  }
  @media screen and (min-width: 960px) {
    .explanation__card-unit {
      font-size: calc(var(--scale) * 20);
    }
  }
  .explanation__card-icon {
    margin-top: auto;
    padding-top: calc(var(--scale) * 42);
  }
  @media screen and (min-width: 960px) {
    .explanation__card-icon {
      margin-top: 0;
      padding-top: calc(var(--scale) * 10);
    }
  }
  .explanation__card-icon img {
    width: calc(var(--scale) * 139);
  }
  .explanation__card-note {
    font-size: calc(var(--scale) * 12);
    font-weight: 400;
    margin-top: calc(var(--scale) * 4);
  }
  .explanation__card-note:empty {
    height: 1lh;
  }
  .explanation__card-content {
    margin-top: auto;
    min-height: calc(var(--scale) * 240);
    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: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .explanation__card-data {
    display: grid;
    grid-template-columns: 3.7em 1fr;
    gap: calc(var(--scale) * 8) calc(var(--scale) * 1);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  @media screen and (min-width: 960px) {
    .explanation__card-data {
      grid-template-columns: auto 1fr;
      gap: 0 calc(var(--scale) * 4);
      padding-top: calc(var(--scale) * 16);
    }
  }
  @media screen and (max-width: 959.99px) {
    .explanation__card-data-label {
      font-size: calc(var(--scale) * 12);
    }
  }
}
@layer component {
  .environment__section + .environment__section {
    margin-top: calc(var(--scale) * 64);
  }
  @media screen and (min-width: 960px) {
    .environment__section + .environment__section {
      margin-top: calc(var(--scale) * 100);
    }
  }
}
@layer page {
  .environment {
    background: #f2f2f2;
    padding-top: calc(var(--scale) * 66);
    padding-bottom: calc(var(--scale) * 66);
  }
  @media screen and (min-width: 960px) {
    .environment {
      padding-top: calc(var(--scale) * 72);
      padding-bottom: calc(var(--scale) * 68);
    }
  }
  .environment__header {
    min-height: calc(var(--scale) * 80);
    -ms-flex-line-pack: center;
    align-content: center;
  }
  @media screen and (min-width: 960px) {
    .environment__header {
      min-height: calc(var(--scale) * 250);
    }
  }
  .environment__section-lead {
    text-align: center;
    line-height: 2;
  }
  .environment__voice {
    margin-top: calc(var(--scale) * 46);
  }
  .environment__voice-title {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 10);
  }
  .environment__voice-content {
    display: grid;
    gap: calc(var(--scale) * 16);
    margin-top: calc(var(--scale) * 32);
  }
  @media screen and (min-width: 960px) {
    .environment__voice-content {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .environment__voice-item {
    position: relative;
    border: calc(var(--scale) * 15) solid #d9f1f4;
    border-radius: calc(var(--scale) * 96);
    padding: calc(var(--scale) * 24);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--scale) * 16);
  }
  @media screen and (min-width: 960px) {
    .environment__voice-item {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      border-radius: calc(var(--scale) * 96);
      gap: calc(var(--scale) * 24);
    }
  }
  .environment__voice-profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: calc(var(--scale) * 8);
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  @media screen and (min-width: 960px) {
    .environment__voice-profile {
      gap: calc(var(--scale) * 16);
    }
  }
  .environment__voice-avatar {
    width: calc(var(--scale) * 64);
    height: calc(var(--scale) * 64);
    border-radius: 50%;
    overflow: hidden;
  }
  @media screen and (min-width: 960px) {
    .environment__voice-avatar {
      width: calc(var(--scale) * 73);
      height: calc(var(--scale) * 73);
    }
  }
  .environment__voice-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .environment__voice-message {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  .environment__voice-message-title {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 8);
  }
  .environment__voice-text {
    font-size: calc(var(--scale) * 14);
    line-height: 1.5;
    font-weight: 400;
  }
  .environment__support {
    margin-top: calc(var(--scale) * 24);
    margin-inline: auto;
    max-width: calc(var(--scale) * 744);
  }
  .environment__support-inner {
    background: #fff;
    padding: calc(var(--scale) * 24);
    border-radius: calc(var(--scale) * 8);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--scale) * 24);
  }
  @media screen and (min-width: 960px) {
    .environment__support-inner {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      padding: calc(var(--scale) * 40);
    }
  }
  .environment__support-img {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 243/161;
    overflow: hidden;
    border-radius: calc(var(--scale) * 4);
  }
  @media screen and (min-width: 960px) {
    .environment__support-img {
      width: calc(var(--scale) * 243);
    }
  }
  .environment__support-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .environment__support-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--scale) * 8);
  }
  @media screen and (min-width: 960px) {
    .environment__support-content {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
  }
  .environment__support-title {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 2;
  }
  .environment__support-text {
    font-size: calc(var(--scale) * 14);
    line-height: 1.5;
  }
  .environment__voice-welfare {
    margin-top: calc(var(--scale) * 64);
  }
  .environment__voice-welfare-title {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 32);
    text-align: center;
  }
  @media screen and (min-width: 960px) {
    .environment__voice-welfare-title {
      margin-bottom: calc(var(--scale) * 8);
    }
  }
  .environment__voice-welfare-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--scale) * 32);
  }
  @media screen and (min-width: 960px) {
    .environment__voice-welfare-items {
      grid-template-columns: repeat(3, 1fr);
      gap: calc(var(--scale) * 8) calc(var(--scale) * 24);
    }
  }
  .environment__voice-welfare-item {
    position: relative;
    border: calc(var(--scale) * 15) solid #d9f1f4;
    font-size: calc(var(--scale) * 14);
    line-height: 1.6;
    padding: calc(var(--scale) * 20) calc(var(--scale) * 18)
      calc(var(--scale) * 20) calc(var(--scale) * 34);
    border-radius: calc(var(--scale) * 117);
    min-height: calc(var(--scale) * 205);
    margin-top: calc(var(--scale) * 12);
  }
  @media screen and (min-width: 960px) {
    .environment__voice-welfare-item {
      margin-top: calc(var(--scale) * 35);
    }
  }
  .environment__voice-welfare-item::before {
    content: '';
    position: absolute;
    bottom: calc(100% + var(--scale) * 5);
    left: calc(var(--scale) * 66);
    width: calc(var(--scale) * 36);
    height: calc(var(--scale) * 48);
    background: #d9f1f4;
    -webkit-clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
    clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
  }
  .environment__voice-welfare-item:nth-child(3n + 1) {
    border-color: #d9f1f4;
  }
  .environment__voice-welfare-item:nth-child(3n + 1)::before {
    background-color: #d9f1f4;
  }
  .environment__voice-welfare-item:nth-child(3n + 2) {
    border-color: #d7f1c7;
  }
  .environment__voice-welfare-item:nth-child(3n + 2)::before {
    background-color: #d7f1c7;
  }
  .environment__voice-welfare-item:nth-child(3n) {
    border-color: #e3f0fa;
  }
  .environment__voice-welfare-item:nth-child(3n)::before {
    background-color: #e3f0fa;
  }
  .environment__voice-welfare-heading {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    margin-bottom: calc(var(--scale) * 8);
    line-height: 2;
  }
  .environment__voice-welfare-text {
    font-size: calc(var(--scale) * 14);
    line-height: 1.5;
    font-weight: 400;
  }
  .environment__voice-welfare-info {
    font-size: calc(var(--scale) * 12);
    line-height: 1.5;
    font-weight: 400;
  }
  .environment__public-system-title {
    margin-bottom: calc(var(--scale) * 16);
  }
  .environment__public-system-lead {
    text-align: left;
  }
  @media screen and (min-width: 960px) {
    .environment__public-system-lead {
      padding-left: calc(var(--scale) * 62);
    }
  }
  .environment__public {
    margin-top: calc(var(--scale) * 48);
  }
  .environment__public-title {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 24);
    text-align: center;
  }
  .environment__links {
    margin-top: calc(var(--scale) * 64);
    text-align: center;
  }
  .environment__links-title {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 8);
  }
  .environment__links-text {
    font-size: calc(var(--scale) * 14);
    line-height: 2;
    margin-bottom: calc(var(--scale) * 24);
  }
  .environment__links-buttons {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(calc(var(--scale) * 250), 1fr)
    );
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: calc(var(--scale) * 16);
  }
  @media screen and (min-width: 960px) {
    .environment__links-buttons {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      gap: calc(var(--scale) * 10);
    }
  }
}
@layer page {
  .environment__onboarding {
    margin-top: calc(var(--scale) * 40);
  }
  .environment__onboarding-points {
    display: grid;
    gap: calc(var(--scale) * 16);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  @media screen and (min-width: 960px) {
    .environment__onboarding-points {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .environment__onboarding-point {
    border-radius: 100%;
    width: calc(var(--scale) * 236);
    aspect-ratio: 1/1;
    background: #d9f1f4;
    text-align: center;
    padding: calc(var(--scale) * 20) calc(var(--scale) * 2);
  }
  .environment__onboarding-point-label {
    color: var(--color-secondary);
    font-family: var(--font-en);
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: calc(var(--scale) * 38);
  }
  .environment__onboarding-point-title {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 4);
  }
  .environment__onboarding-point-list {
    text-align: left;
    list-style: '・';
    padding-left: 1.25em;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .environment__onboarding-timeline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--scale) * 12);
    margin-top: calc(var(--scale) * 24);
  }
  @media screen and (min-width: 960px) {
    .environment__onboarding-timeline {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      gap: calc(var(--scale) * 5);
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }
  }
  .environment__onboarding-step {
    background: #fff;
    padding: calc(var(--scale) * 24);
    padding-bottom: calc(var(--scale) * 43);
    -webkit-clip-path: polygon(
      0 0,
      0 calc(100% - var(--scale) * 29),
      50% 100%,
      100% calc(100% - var(--scale) * 32),
      100% 0
    );
    clip-path: polygon(
      0 0,
      0 calc(100% - var(--scale) * 29),
      50% 100%,
      100% calc(100% - var(--scale) * 32),
      100% 0
    );
  }
  @media screen and (min-width: 960px) {
    .environment__onboarding-step {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      padding: calc(var(--scale) * 24) calc(var(--scale) * 32);
      padding-right: calc(var(--scale) * 53);
      -webkit-clip-path: polygon(
        0 0,
        calc(100% - var(--scale) * 29) 0,
        100% 50%,
        calc(100% - var(--scale) * 32) 100%,
        0 100%
      );
      clip-path: polygon(
        0 0,
        calc(100% - var(--scale) * 29) 0,
        100% 50%,
        calc(100% - var(--scale) * 32) 100%,
        0 100%
      );
    }
  }
  .environment__onboarding-step-title {
    font-weight: 600;
    line-height: 2;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: calc(var(--scale) * 10);
    padding-bottom: calc(var(--scale) * 4);
  }
  .environment__onboarding-step-list {
    list-style: '・';
    padding-left: 1.25em;
  }
}
@layer component {
  .environment__cards {
    display: grid;
    gap: calc(var(--scale) * 24);
  }
  @media screen and (min-width: 960px) {
    .environment__cards {
      grid-template-columns: repeat(2, 1fr);
    }
    .environment__cards.is-3cols {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .environment__card {
    padding: calc(var(--scale) * 24);
    border-radius: calc(var(--scale) * 8);
    background: #fff no-repeat right calc(var(--scale) * 12) center;
    background-size: auto 80%;
  }
  @media screen and (min-width: 960px) {
    .environment__card {
      padding: calc(var(--scale) * 40);
      padding: calc(var(--scale) * 40);
      background-size: auto calc(var(--scale) * 186);
    }
  }
  .environment__card.is-training-01 {
    background-image: url('../../../../img/icon_environment_training_01.svg');
  }
  .environment__card.is-training-02 {
    background-image: url('../../../../img/icon_environment_training_02.svg');
  }
  .environment__card.is-training-03 {
    background-image: url('../../../../img/icon_environment_training_03.svg');
  }
  .environment__card.is-training-04 {
    background-image: url('../../../../img/icon_environment_training_04.svg');
  }
  .environment__card.is-training-05 {
    background-image: url('../../../../img/icon_environment_training_05.svg');
  }
  .environment__card.is-training-06 {
    background-image: url('../../../../img/icon_environment_training_06.svg');
  }
  .environment__card.is-benefits-01 {
    background-image: url('../../../../img/icon_environment_benefits_01.svg');
  }
  .environment__card.is-benefits-02 {
    background-image: url('../../../../img/icon_environment_benefits_02.svg');
  }
  .environment__card.is-benefits-03 {
    background-image: url('../../../../img/icon_environment_benefits_03.svg');
  }
  .environment__card.is-benefits-04 {
    background-image: url('../../../../img/icon_environment_benefits_04.svg');
  }
  .environment__card-title {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 8);
  }
  .environment__card-title.is-primary {
    color: var(--color-primary);
  }
  .environment__card-text {
    font-weight: 400;
    line-height: 1.5;
  }
  .environment__card-text-note {
    font-size: calc(var(--scale) * 12);
    font-weight: 400;
    line-height: 1.3;
    margin-top: calc(var(--scale) * 8);
  }
}
@layer page {
  .environment__location-content {
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    row-gap: calc(var(--scale) * 24);
  }
  @media screen and (min-width: 960px) {
    .environment__location-content {
      grid-template-columns: calc(var(--scale) * 490) 1fr;
      padding-right: calc(var(--scale) * 12);
    }
  }
  .environment__location-map {
    margin-inline: calc(var(--scale) * 24);
  }
  .environment__location-map img {
    width: 100%;
  }
  @media screen and (max-width: 959.99px) {
    .environment__location-map {
      margin-block: calc(var(--scale) * 24);
    }
  }
  @media screen and (min-width: 960px) {
    .environment__location-map {
      margin-inline: calc(var(--scale) * 66);
    }
  }
  .environment__location-cards {
    display: grid;
    gap: calc(var(--scale) * 16);
  }
  @media screen and (min-width: 960px) {
    .environment__location-cards {
      grid-template-columns: repeat(2, 1fr);
      margin-top: calc(var(--scale) * 24);
    }
  }
  .environment__location-card {
    border-radius: calc(var(--scale) * 8);
    display: grid;
    grid-template-columns: calc(var(--scale) * 104) 1fr auto;
    gap: calc(var(--scale) * 16);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    overflow: hidden;
    padding: 0;
    padding-right: calc(var(--scale) * 16);
    border: 0;
    -webkit-box-shadow: 0 0 calc(var(--scale) * 20) 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 calc(var(--scale) * 20) 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .environment__location-card::after {
    content: '';
    width: calc(var(--scale) * 25);
    height: calc(var(--scale) * 25);
    background: url(../../../../img/icon_plus.png) no-repeat center
      center/contain;
  }
  @media (hover: hover) {
    .environment__location-card:hover {
      opacity: 0.7;
    }
  }
  .environment__location-card-img {
    display: block;
  }
  .environment__location-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .environment__location-card-title {
    color: var(--color-body);
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
  }
  .environment__location-card-title small {
    font-size: calc(var(--scale) * 14);
    font-weight: 400;
    display: block;
  }
}
@layer page {
  @layer component {
    .modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: calc(var(--scale) * 20);
      opacity: 0;
      pointer-events: none;
      -webkit-transition: opacity 0.3s;
      transition: opacity 0.3s;
    }
    .modal.is-active {
      opacity: 1;
      pointer-events: auto;
    }
    .modal__overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      -ms-scroll-chaining: none;
      overscroll-behavior: contain;
    }
    .modal__container {
      position: relative;
      background: #fff;
      border-radius: calc(var(--scale) * 16);
      -webkit-box-shadow: 0 0 calc(var(--scale) * 25) rgba(0, 0, 0, 0.15);
      box-shadow: 0 0 calc(var(--scale) * 25) rgba(0, 0, 0, 0.15);
      width: 100%;
      max-width: calc(var(--scale) * 1120);
      max-height: 90dvh;
      overflow-y: auto;
      z-index: 1;
      -webkit-transition: max-height 0.3s;
      transition: max-height 0.3s;
      -ms-scroll-chaining: none;
      overscroll-behavior: contain;
    }
    .modal__container::-webkit-scrollbar {
      width: 6px;
    }
    .modal__container::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 16px;
      margin-top: calc(var(--scale) * 16);
      margin-bottom: calc(var(--scale) * 16);
    }
    .modal__container::-webkit-scrollbar-thumb {
      background: #ccc;
      border-right: 2px solid transparent;
      background-clip: padding-box;
    }
    .modal__close-wrapper {
      width: 100%;
      position: fixed;
      text-align: right;
      padding-right: calc(var(--scale) * 40);
      pointer-events: none;
      max-width: calc(var(--vw) * 100 - var(--scale) * 20);
    }
    @media screen and (min-width: 960px) {
      .modal__close-wrapper {
        max-width: calc(var(--scale) * 1120);
        padding-right: calc(var(--scale) * 24);
      }
    }
    .modal__close {
      pointer-events: auto;
      margin-top: calc(var(--scale) * 20);
      margin-left: auto;
      width: calc(var(--scale) * 42);
      height: calc(var(--scale) * 32);
      background: none;
      border: none;
      cursor: pointer;
      z-index: 10;
      padding: 0;
    }
    @media screen and (min-width: 960px) {
      .modal__close {
        margin-top: calc(var(--scale) * 24);
      }
    }
    .modal__close img {
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }
    .modal__inner {
      padding: calc(var(--scale) * 48) calc(var(--scale) * 20)
        calc(var(--scale) * 32);
    }
    @media screen and (min-width: 960px) {
      .modal__inner {
        padding: calc(var(--scale) * 48) calc(var(--scale) * 64);
      }
    }
  }
  @layer page {
    .location__modal-header {
      margin-bottom: calc(var(--scale) * 32);
    }
    @media screen and (min-width: 960px) {
      .location__modal-header {
        margin-bottom: calc(var(--scale) * 52);
        margin-left: calc(var(--scale) * -24);
        margin-right: calc(var(--scale) * -40);
      }
    }
    .location__title {
      margin-bottom: 0 !important;
    }
    .location__modal-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: calc(var(--scale) * 40);
    }
    .location__intro {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: calc(var(--scale) * 24);
    }
    @media screen and (min-width: 960px) {
      .location__intro {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: calc(var(--scale) * 32);
      }
    }
    .location__intro-img {
      -ms-flex-negative: 0;
      flex-shrink: 0;
      width: 100%;
    }
    .location__intro-img img {
      display: block;
    }
    @media screen and (min-width: 960px) {
      .location__intro-img {
        width: calc(var(--scale) * 368);
      }
    }
    .location__intro-body > * + * {
      margin-top: calc(var(--scale) * 16);
    }
    .location__intro-title {
      font-size: calc(var(--scale) * 16);
      font-weight: 700;
      line-height: 2;
      color: var(--color-primary);
    }
    .location__intro-text {
      font-size: calc(var(--scale) * 14);
      line-height: 1.5;
    }
    .location__intro-tags {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      gap: calc(var(--scale) * 8);
    }
    .location__intro-tag {
      font-size: calc(var(--scale) * 12);
      font-weight: 400;
      padding: calc(var(--scale) * 4) calc(var(--scale) * 12);
      background: #ebebeb;
      border-radius: calc(var(--scale) * 24);
    }
    @media screen and (min-width: 960px) {
      .location__intro-tag {
        font-size: calc(var(--scale) * 14);
        padding: calc(var(--scale) * 5) calc(var(--scale) * 16);
      }
    }
    .location__button {
      width: 100%;
      max-width: calc(var(--scale) * 179);
    }
    @media screen and (max-width: 959.99px) {
      .location__button {
        max-width: none;
      }
    }
    .location__person {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: calc(var(--scale) * 24);
      padding: calc(var(--scale) * 24);
      background: rgba(98, 174, 184, 0.1);
      border-radius: calc(var(--scale) * 8);
    }
    @media screen and (min-width: 960px) {
      .location__person {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: calc(var(--scale) * 32);
        padding: calc(var(--scale) * 24) calc(var(--scale) * 20)
          calc(var(--scale) * 26) calc(var(--scale) * 24);
        background: rgba(98, 174, 184, 0.2);
      }
    }
    .location__person-info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: calc(var(--scale) * 12);
      -ms-flex-negative: 0;
      flex-shrink: 0;
    }
    @media screen and (min-width: 960px) {
      .location__person-info {
        width: calc(var(--scale) * 133);
        gap: calc(var(--scale) * 16);
        margin-top: calc(var(--scale) * 18);
      }
    }
    .location__person-img {
      width: calc(var(--scale) * 92);
      height: calc(var(--scale) * 92);
      border-radius: 50%;
      overflow: hidden;
      background: #62aeb8;
    }
    .location__person-img img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }
    .location__person-name {
      font-size: calc(var(--scale) * 14);
      line-height: 1.6;
      text-align: center;
    }
    .location__person-body {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: calc(var(--scale) * 8);
    }
    .location__person-title {
      font-size: calc(var(--scale) * 15);
      font-weight: 700;
      line-height: 1.8;
    }
    @media screen and (min-width: 960px) {
      .location__person-title {
        font-size: calc(var(--scale) * 16);
        line-height: 2;
      }
    }
    .location__person-text {
      font-size: calc(var(--scale) * 14);
      line-height: 1.5;
    }
    .location__footer {
      margin-top: calc(var(--scale) * 24);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }
  }
}
@layer page {
  .recruitment {
    padding-bottom: calc(var(--scale) * 66);
  }
  @media screen and (min-width: 960px) {
    .recruitment {
      padding-bottom: calc(var(--scale) * 166);
    }
  }
  .recruitment__inner {
    padding-top: calc(var(--scale) * 66);
  }
  @media screen and (min-width: 960px) {
    .recruitment__inner {
      padding-top: calc(var(--scale) * 141);
    }
  }
  @media screen and (max-width: 959.99px) {
    .recruitment__header {
      margin-bottom: calc(var(--scale) * 40);
    }
  }
  @media screen and (max-width: 959.99px) {
    .recruitment__title-en {
      font-size: calc(var(--scale) * 51);
    }
  }
  .recruitment__information {
    margin-top: calc(var(--scale) * 26);
  }
  .recruitment__information-header {
    margin-bottom: calc(var(--scale) * 24);
  }
  .recruitment__information-group {
    margin-top: calc(var(--scale) * 44);
  }
  @media screen and (min-width: 960px) {
    .recruitment__information-group {
      margin-top: calc(var(--scale) * 48);
      margin-inline: calc(var(--scale) * 56);
    }
  }
  @media screen and (min-width: 960px) {
    .recruitment__information-group.is-02 {
      margin-top: calc(var(--scale) * 88);
    }
  }
  .recruitment__information-group-title {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 16);
  }
  .recruitment__information-location-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: calc(var(--scale) * 10);
  }
  @media screen and (min-width: 960px) {
    .recruitment__information-location-list {
      gap: calc(var(--scale) * 16);
    }
  }
  @media screen and (max-width: 959.99px) {
    .recruitment__information-location-item {
      width: calc(50% - var(--scale) * 5);
    }
  }
  @media screen and (max-width: 959.99px) {
    .recruitment__information-location-link {
      width: 100%;
    }
  }
  @media screen and (min-width: 960px) {
    .recruitment__information-location-link {
      min-width: calc(var(--scale) * 267);
    }
  }
  .recruitment__information-open-card {
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  @media screen and (min-width: 960px) {
    .recruitment__information-open-card {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      gap: calc(var(--scale) * 32);
    }
  }
  .recruitment__information-open-image {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    aspect-ratio: 368/252;
  }
  @media screen and (min-width: 960px) {
    .recruitment__information-open-image {
      width: calc(var(--scale) * 368);
    }
  }
  .recruitment__information-open-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .recruitment__information-open-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--scale) * 16);
    padding-top: calc(var(--scale) * 16);
  }
  @media screen and (min-width: 960px) {
    .recruitment__information-open-body {
      padding-top: 0;
    }
  }
  .recruitment__information-open-text {
    font-size: calc(var(--scale) * 14);
    line-height: 1.5;
  }
  .recruitment__information-open-list {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 2;
  }
  .recruitment__information-open-action {
    margin-top: auto;
  }
  @media screen and (min-width: 960px) {
    .recruitment__information-open-button {
      width: calc(var(--scale) * 247);
    }
  }
  .recruitment__flow {
    margin-top: calc(var(--scale) * 64);
  }
  @media screen and (min-width: 960px) {
    .recruitment__flow {
      margin-top: calc(var(--scale) * 104);
    }
  }
  .recruitment__flow-header {
    margin-bottom: calc(var(--scale) * 40);
  }
  .recruitment__flow-wrapper {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .recruitment__flow-list {
    display: grid;
    gap: calc(var(--scale) * 16);
  }
  @media screen and (min-width: 960px) {
    .recruitment__flow-list {
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      grid-template-columns: repeat(3, 1fr);
      gap: calc(var(--scale) * 8);
    }
  }
  .recruitment__flow-item {
    background: #ededed;
    padding: calc(var(--scale) * 24) calc(var(--scale) * 16);
    border-radius: calc(var(--scale) * 8);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--scale) * 8);
  }
  .recruitment__flow-item-step {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: calc(var(--scale) * 8);
  }
  .recruitment__flow-item-step-circle {
    display: block;
    width: calc(var(--scale) * 12);
    height: calc(var(--scale) * 12);
    background: var(--color-primary);
    border-radius: 50%;
  }
  .recruitment__flow-item-step-number {
    color: var(--color-primary);
    font-size: calc(var(--scale) * 14);
    font-weight: 700;
    line-height: 2;
  }
  .recruitment__flow-item-title {
    font-size: calc(var(--scale) * 14);
    font-weight: 700;
    line-height: 2;
  }
  .recruitment__flow-item-text {
    font-size: calc(var(--scale) * 14);
    line-height: 1.5;
  }
  .recruitment__flow-note {
    font-size: calc(var(--scale) * 12);
    line-height: 1.5;
    margin-top: calc(var(--scale) * 16);
  }
  @media screen and (min-width: 960px) {
    .recruitment__flow-note {
      margin-top: calc(var(--scale) * 8);
    }
  }
}
@layer page {
  .cta {
    background: -webkit-gradient(
      linear,
      right top,
      left top,
      from(var(--gradient))
    );
    background: linear-gradient(270deg, var(--gradient));
    padding-top: calc(var(--scale) * 64);
    padding-bottom: calc(var(--scale) * 48);
    color: #fff;
  }
  @media screen and (min-width: 960px) {
    .cta {
      padding-top: calc(var(--scale) * 96);
    }
  }
  .cta__inner {
    text-align: center;
  }
  .cta__title {
    font-size: calc(var(--scale) * 32);
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: calc(var(--scale) * 16);
  }
  @media screen and (min-width: 960px) {
    .cta__title {
      margin-bottom: calc(var(--scale) * 20);
    }
  }
  .cta__text {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 32);
  }
  @media screen and (min-width: 960px) {
    .cta__text {
      margin-bottom: calc(var(--scale) * 42);
    }
  }
  .cta__actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--scale) * 42);
    margin-bottom: calc(var(--scale) * 48);
  }
  @media screen and (min-width: 960px) {
    .cta__actions {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      gap: calc(var(--scale) * 48);
      margin-bottom: calc(var(--scale) * 54);
    }
  }
  .cta__action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: calc(var(--scale) * 12);
  }
  .cta__action-text {
    font-size: calc(var(--scale) * 16);
    font-weight: 700;
    line-height: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: calc(var(--scale) * 18);
  }
  .cta__action-text::before,
  .cta__action-text::after {
    content: '';
    display: block;
    width: 2px;
    height: calc(var(--scale) * 35);
    background: #fff;
  }
  .cta__action-text::before {
    rotate: -30deg;
  }
  .cta__action-text::after {
    rotate: 30deg;
  }
  .cta__button {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: calc(var(--scale) * 16);
    border-radius: 1000vh;
    border: 2px solid var(--color-primary);
    background: #fff;
    text-align: center;
    font-size: calc(var(--scale) * 20);
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    padding: calc(var(--scale) * 24) calc(var(--scale) * 17);
    color: var(--color-body);
    width: 100%;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  @media screen and (min-width: 960px) {
    .cta__button {
      width: calc(var(--scale) * 388);
    }
  }
  .cta__button::before {
    content: '';
  }
  .cta__button::after {
    content: '';
    width: 1.75em;
    height: 1.75em;
    background: var(--color-primary);
    -webkit-mask: url(../../../../img/icon_check_01.svg) no-repeat center
      center/contain;
    mask: url(../../../../img/icon_check_01.svg) no-repeat center center/contain;
    place-self: end;
  }
  @media (hover: hover) {
    .cta__button:hover {
      opacity: 0.7;
    }
  }
  .cta__button-text {
    position: relative;
    top: var(--font-top-offset);
  }
  .cta__button--red {
    background: var(--color-primary);
    color: #fff;
  }
  .cta__button--red::after {
    background: #fff;
    -webkit-mask-image: url(../../../../img/icon_lupe_01.svg);
    mask-image: url(../../../../img/icon_lupe_01.svg);
  }
  .cta__site {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .cta__site-link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: calc(var(--scale) * 12);
    color: #fff;
    text-decoration: none;
    padding-bottom: calc(var(--scale) * 4);
    border-bottom: 1px solid #fff;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .cta__site-link::after {
    content: '';
    display: block;
    width: calc(var(--scale) * 14);
    height: calc(var(--scale) * 14);
    background: #fff;
    -webkit-mask: url('../../../../img/icon_external_01.svg') no-repeat
      center/contain;
    mask: url('../../../../img/icon_external_01.svg') no-repeat center/contain;
  }
  @media (hover: hover) {
    .cta__site-link:hover {
      opacity: 0.7;
    }
  }
  .cta__site-link-text {
    font-size: calc(var(--scale) * 14);
    font-weight: 600;
    line-height: 2;
  }
}
@layer page {
  .footer {
    background: #fff;
    padding-block: calc(var(--scale) * 40) calc(var(--scale) * 24);
  }
  @media screen and (max-width: 959.99px) {
    .footer {
      text-align: center;
      padding-bottom: calc(var(--scale) * 80);
    }
  }
  @media screen and (min-width: 960px) {
    .footer {
      padding-block: calc(var(--scale) * 54);
    }
  }
  .footer__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  @media screen and (min-width: 960px) {
    .footer__inner {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }
  }
  .footer__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--scale) * 24);
  }
  @media screen and (min-width: 960px) {
    .footer__info {
      gap: calc(var(--scale) * 12);
    }
  }
  .footer__logo img {
    width: calc(var(--scale) * 233.54);
    height: auto;
  }
  .footer__title {
    font-size: calc(var(--scale) * 14);
    font-weight: 400;
    line-height: 1.6;
  }
  .footer__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--scale) * 24);
    margin-block: calc(var(--scale) * 40);
  }
  @media screen and (min-width: 960px) {
    .footer__links {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      gap: calc(var(--scale) * 24);
      margin-block: 0;
    }
  }
  .footer__link-item {
    display: inline-block;
  }
  .footer__link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: calc(var(--scale) * 8);
    text-decoration: none;
    color: #000;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  .footer__link::after {
    content: '';
    display: block;
    width: calc(var(--scale) * 14);
    height: calc(var(--scale) * 14);
    background: #000;
    -webkit-mask: url('../../../../img/icon_external_01.svg') no-repeat
      center/contain;
    mask: url('../../../../img/icon_external_01.svg') no-repeat center/contain;
  }
  @media (hover: hover) {
    .footer__link:hover {
      opacity: 0.6;
    }
  }
  .footer__link-text {
    font-size: calc(var(--scale) * 12);
    font-weight: 600;
    line-height: 2;
  }
  .footer__copyright {
    font-size: calc(var(--scale) * 12);
    font-weight: 400;
    line-height: 1.3;
    margin-top: auto;
  }
  @media screen and (min-width: 960px) {
    .footer__copyright {
      width: 100%;
      text-align: right;
      margin-top: calc(var(--scale) * 24);
    }
  }
}
@layer component {
  .section__title {
    display: grid;
    grid-template-areas: 'main';
    place-items: center;
    padding-block: calc(var(--scale) * 20);
  }
  .section__title-en {
    grid-area: main;
    text-align: center;
    font-family: var(--font-en);
    font-size: calc(var(--scale) * 64);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    color: var(--color-secondary);
    opacity: 0.2;
  }
  @media screen and (min-width: 960px) {
    .section__title-en {
      font-size: calc(var(--scale) * 72);
    }
  }
  .section__title-ja {
    grid-area: main;
    color: #fff;
    text-align: center;
    font-size: calc(var(--scale) * 24);
    font-weight: 700;
    line-height: 2;
    color: var(--color-body);
  }
  .section__title.is-white .section__title-en {
    color: #fff;
    opacity: 0.3;
  }
  .section__title.is-white .section__title-ja {
    color: #fff;
  }
  .heading-01 {
    display: grid;
    grid-template-columns: calc(var(--scale) * 38) auto 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 calc(var(--scale) * 16);
    font-size: calc(var(--scale) * 24);
    font-weight: 700;
    line-height: 2;
    margin-bottom: calc(var(--scale) * 32);
  }
  @media screen and (min-width: 960px) {
    .heading-01 {
      margin-bottom: calc(var(--scale) * 48);
    }
  }
  .heading-01::before {
    content: '';
    width: calc(var(--scale) * 38);
    height: calc(var(--scale) * 26);
    background: var(--color-primary);
    -webkit-clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }
  .heading-01::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #8f8f8f;
  }
  .button-01 {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: calc(var(--scale) * 18);
    padding: calc(var(--scale) * 4.5) calc(var(--scale) * 14);
    border-radius: calc(var(--scale) * 32);
    border: 1px solid transparent;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .button-01 span {
    font-size: calc(var(--scale) * 14);
    font-weight: 600;
    line-height: 2;
    padding-bottom: var(--font-top-offset);
  }
  .button-01::after {
    content: '';
    display: block;
    width: calc(var(--scale) * 16);
    height: calc(var(--scale) * 16);
    background: currentColor;
    -webkit-mask: url('../../../../img/icon_external_01.svg') no-repeat
      center/contain;
    mask: url('../../../../img/icon_external_01.svg') no-repeat center/contain;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
  }
  .button-01--primary {
    background: var(--color-primary);
    color: #fff;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  @media (hover: hover) {
    .button-01--primary:hover {
      opacity: 0.7;
    }
  }
  .button-01--outlined {
    background: #fff;
    color: var(--color-body);
    border: 1px solid var(--color-primary);
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .button-01--outlined::after {
    background: var(--color-primary);
  }
  @media (hover: hover) {
    .button-01--outlined:hover {
      background: var(--color-primary);
      color: #fff;
      -webkit-transition: color 0.3, background 0.3s;
      transition: color 0.3, background 0.3s;
    }
    .button-01--outlined:hover::after {
      background: #fff;
    }
  }
  .button-01--lg {
    height: calc(var(--scale) * 70);
    border-radius: calc(var(--scale) * 24);
  }
  .button-01--lg span {
    font-size: calc(var(--scale) * 18);
  }
  @media screen and (min-width: 960px) {
    .button-01--lg {
      height: calc(var(--scale) * 87);
    }
  }
  .button-01--black {
    background: #000;
    color: #fff;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  @media (hover: hover) {
    .button-01--black:hover {
      opacity: 0.7;
    }
  }
}