@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";
@layer reset, tokens, base, layout, components, contents, page, operational;

@layer reset {
  /*
   * Layer: Reset
   * ---------------------
   * ブラウザデフォルトのスタイルをリセット
   * すべての要素のマージン、パディング、ボックスサイズを
   * リセットし、統一されたベースラインを提供します
   */
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :where([hidden]:not([hidden="until-found"])) {
    display: none !important;
  }

  :where(html) {
    -webkit-text-size-adjust: none;
    tab-size: 2;
    scrollbar-gutter: stable;
    interpolate-size: allow-keywords;
    line-height: 1.5;
  }

  :where(html:has(dialog:modal[open])) {
    overflow: clip;
  }

  @media (prefers-reduced-motion: no-preference) {
    :where(html:focus-within) {
      scroll-behavior: smooth;
    }
  }

  :where(body) {
    line-height: inherit;
    font-family: system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  :where(button) {
    all: unset;
  }

  :where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
  }

  :where(textarea) {
    resize: block;
  }

  :where(button, label, select, summary, [role="button"], [role="option"]) {
    cursor: pointer;
  }

  :where(:disabled, label:has(> :disabled, + :disabled)) {
    cursor: not-allowed;
  }

  :where(a) {
    color: inherit;
    text-underline-offset: 0.2ex;
  }

  :where(ul, ol) {
    list-style: none;
  }

  :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
  }

  :where(img, picture, svg, video) {
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }

  :where(h1, h2, h3) {
    line-height: calc(1em + 0.5rem);
  }

  :where(hr) {
    border: none;
    border-block-start: 1px solid;
    color: inherit;
    block-size: 0;
    overflow: visible;
  }

  :where(dialog, [popover]) {
    border: none;
    background: none;
    color: inherit;
    inset: unset;
    max-width: unset;
    max-height: unset;
    overflow: unset;
  }

  /* :where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
    display: none !important;
  } */

  :where(:focus-visible) {
    outline: 3px solid CanvasText;
    box-shadow: 0 0 0 5px Canvas;
    outline-offset: 1px;
  }

  :where(:focus-visible, :target) {
    scroll-margin-block: 8vh;
  }

  :where(.visually-hidden:not(:focus-within, :active)) {
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    border: 0 !important;
    user-select: none !important;
  }
}

@layer tokens {
  /*
   * Layer: Tokens
   * ---------------------
   * グローバル変数の定義
   * カラー、フォント、スペーシング等のデザイントークンを
   * CSS変数として宣言します
   */

  :root {
    /* ===========================
     基本カラー
     =========================== */
    --color-white: #fff;
    --color-gray: #f5f6f7;
    --color-corporate-menu: #02a0e9;
    --color-corporate-entry: #04a0e9;
    --color-corporate: #00a0e9;
    --color-corporate-gradient: #4ac6ff;
    --color-corporate-light: #49c6ff;
    --color-career: #05cae9;
    --color-intern: #217fd1;
    --color-corporate-dark: #253751;
    --color-label: #071830;
    --color-black: #000;
    --color-text: #333;
    --color-note: #999;
    --color-border: #d8d8d8;
    --color-entry-background: #ecf2fa;
    --color-english-text: #ecf2fa;
    --color-accent: #e03e2d;

    /* ===========================
     グラデーション
     =========================== */
    --color-gradient-vertical: linear-gradient(var(--color-corporate-gradient) 0%, var(--color-corporate) 50%, var(--color-corporate-gradient) 100%);
    --color-gradient-horizontal: linear-gradient(270deg, var(--color-corporate-gradient) 0%, var(--color-corporate) 25%, var(--color-corporate) 50%, var(--color-corporate-gradient) 100%);
    --color-bg-gradient-vertical: linear-gradient(var(--color-white) 0%, var(--color-gray) 100%);

    /* ===========================
     z-index
     =========================== */
    --z-index-header: 1000;
    --z-index-hamburger: calc(var(--z-index-header) + 2);
    --z-index-menu-overlay: calc(var(--z-index-header) + 1);
    --z-index-modal: calc(var(--z-index-header) + 1);
    --z-index-normal: 10;
    --z-index-normal-2: calc(var(--z-index-normal) + 1);
    --z-index-base-2: calc(var(--z-index-base) + 1);
    --z-index-base: 0;
    --z-index-negative: -1;

    /* ===========================
     フォント設定
     =========================== */
    --font-family-ja: "Noto Sans JP", sans-serif;
    --font-family-en: "Roboto", sans-serif;

    /* ===========================
     フォントの太さ
     =========================== */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ===========================
     単位調整
     =========================== */
    --rem: 1rem / 16;
    --vw: 1600;
    --vw-tab: 1600;
  }

  @media (width <= 767.9999px) {
    :root {
      --vw: 375;
    }
  }

  @media (width <= 1100.9999px) {
    :root {
      --vw-tab: 375;
    }
  }

  :root {
    /* ===========================
     コンテンツ幅と余白
     =========================== */
    --content-padding: min(calc(120 / var(--vw) * 100vw), 120px);
    --content-width: 1200px;
  }

  @media (width <= 767.9999px) {
    :root {
      --content-padding: 15px;
    }
  }

  :root {
    /* ===========================
     ヘッダー高さ
     =========================== */
    --header-height: 160px;
  }

  @media (width <= 767.9999px) {
    :root {
      --header-height: 90px;
    }
  }

  :root {
    /* ===========================
     スピード
     =========================== */
    --card-transition-speed: 0.8s;
    --button-transition-speed: 0.7s;
    --link-transition-speed: 0.5s;
  }
}

@layer base {
  /*
   * Layer: Base
   * ---------------------
   * サイト共通の基本設定
   * html, body, フォント設定、リンクスタイル、
   * 画像の基本設定など、サイト全体で共通して
   * 使用する基本的なスタイルを定義します
   */

  body {
    font-family: var(--font-family-ja);
    font-size: calc(16 * var(--rem));
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    line-height: 1.6;
    background-color: var(--color-white);
  }

  img {
    max-width: 100%;
    height: auto;
  }

  :where(a) {
    text-decoration: none;
  }
  :where(a:not([class])) {
    color: var(--color-corporate);
  }

  @media (any-hover: hover) {
    :where(a:not([class])):hover {
      text-decoration: underline;
    }
  }
}

@layer layout {
  /*
    * Layer: Layout
    * ---------------------
    * ランドマークのスタイリング
    * ヘッダー、フッター、メインナビゲーション、
    * パンくずリストなど、サイトの主要な
    * レイアウト要素のスタイルを定義します
    */

  .recruit-header {
    --padding-inline: 30px;

    position: fixed;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    padding-inline: var(--padding-inline);
    z-index: var(--z-index-header);
    height: var(--header-height);
  }

  @media (width <= 767.9999px) {
    .recruit-header {
      --padding-inline: 15px;
    }
  }

  .logo-area {
    --gap: 15px;

    display: flex;
    align-items: center;
    gap: var(--gap);
  }

  @media (width <= 767.9999px) {
    .logo-area {
      --gap: 6px;
    }
  }

  @media (width <= 767.9999px) {
    .logo-area img {
      display: block;
      width: 91px;
    }
  }

  .logo-area h1 {
    --font-size: 30;
    --font-weight: var(--font-weight-bold);

    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight);
    color: var(--color-black);
    font-family: var(--font-family-en);
  }

  @media (width <= 767.9999px) {
    .logo-area h1 {
      --font-size: 10;
      --font-weight: 600;
    }
  }

  .button-area {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .entry-button {
    --width: 100px;
    --height: 100px;
    --gap: 10px;
    --font-size: 20;

    font-size: calc(var(--font-size) * var(--rem));
    background: var(--color-gradient-vertical);
    color: var(--color-white);
    font-weight: bold;
    text-align: center;
    width: var(--width);
    height: var(--height);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height: 1.3;
    letter-spacing: 0.05em;
    gap: var(--gap);
    background-position: 50% 0%;
    background-size: auto 200%;
    transition: background-position var(--link-transition-speed) ease;
  }
  @media (any-hover: hover) {
    .entry-button:hover {
      background-position: 0 -100%;
    }
  }

  @media (width <= 767.9999px) {
    .entry-button {
      --width: 60px;
      --height: 60px;
      --gap: 5px;
      --font-size: 12;
    }

    .entry-button img {
      width: 20px;
      height: 16px;
    }
  }

  .menu-button {
    --width: 100px;
    --height: 100px;
    --gap: 10px;
    --font-size: 20;

    font-size: calc(var(--font-size) * var(--rem));
    background-color: var(--color-gray);
    color: var(--color-corporate-menu);
    font-weight: bold;
    text-align: center;
    width: var(--width);
    height: var(--height);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height: 1.3;
    letter-spacing: 0.05em;
    gap: var(--gap);
    transition: background-color var(--link-transition-speed) ease;
  }

  @media (width <= 767.9999px) {
    .menu-button {
      --width: 60px;
      --height: 60px;
      --gap: 5px;
      --font-size: 12;
    }
  }
  .menu-button::before {
    --width: 30px;
    --height: 25px;

    content: "";
    display: block;
    width: var(--width);
    height: var(--height);
    mask-image: url("/assets/recruit/image/common/icon-menu-01.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--color-corporate-menu);
  }

  @media (width <= 767.9999px) {
    .menu-button::before {
      --width: 19px;
      --height: 16px;
    }
  }

  @media (any-hover: hover) {
    .menu-button:hover {
      color: var(--color-white);
      background-color: var(--color-corporate-menu);
    }
    .menu-button:hover::before {
      background-color: var(--color-white);
    }
  }

  .main-nav {
    --width: 700px;
    --padding: 130px 200px 130px 70px;

    position: fixed;
    top: 0;
    right: 0;
    width: var(--width);
    height: 100dvh;
    box-shadow: -4px 0 20px rgb(0 0 0 / 10%);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: var(--z-index-hamburger);
    padding: var(--padding);
    overflow-y: auto;
    background-image: url("/assets/recruit/image/common/bg_menu.png");
    background-image: image-set(url("/assets/recruit/image/common/bg_menu.webp") type("image/webp"), url("/assets/recruit/image/common/bg_menu.png") type("image/png"));
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    background-color: var(--color-white);
    visibility: hidden;
  }
  .main-nav[data-global-navigation="true"] {
    opacity: 0;
    visibility: hidden;
  }
  @media (width <= 767.9999px) {
    .main-nav {
      --width: 100%;
      --padding: 105px 15px 15px 15px;
    }
  }
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: var(--z-index-menu-overlay);
    opacity: 0;
    visibility: hidden;
  }

  .main-nav[data-global-navigation="open"] {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .main-nav[data-global-navigation="open"] + .menu-overlay[data-menu-overlay] {
    opacity: 1;
    visibility: visible;
    background-color: rgb(0 0 0 / 50%);
  }

  .main-nav[data-global-navigation="closed"] {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  }
  .main-nav[data-global-navigation="closed"] + .menu-overlay[data-menu-overlay] {
    opacity: 0;
    visibility: hidden;
    background-color: transparent;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
  }
  body:has(.main-nav[data-global-navigation="open"]) {
    overflow: hidden;
    overscroll-behavior: none;
  }
  body:has(.main-nav[data-global-navigation="open"])::-webkit-scrollbar {
    display: none;
  }
  body:has(.entry-dialog[open])::-webkit-scrollbar {
    display: none;
  }

  .recruit-nav-item {
    border-top: 1px solid var(--color-border);
  }
  .recruit-nav-item:last-child {
    border-bottom: 1px solid var(--color-border);
  }

  .recruit-nav-link {
    --padding: 15px 90px 30px 0;
    display: block;
    padding: var(--padding);
    font-weight: var(--font-weight-bold);
    position: relative;
  }
  @media (width <= 767.9999px) {
    .recruit-nav-link {
      --padding: 15px 90px 25px 0;
    }
  }
  .recruit-nav-link::after {
    --right: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: var(--right);
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background-image: url("/assets/recruit/image/common/icon-arrow-01.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transition: right var(--link-transition-speed) ease;
  }
  @media (width <= 767.9999px) {
    .recruit-nav-link::after {
      --right: 20px;
    }
  }
  @media (any-hover: hover) {
    .recruit-nav-link:hover::after {
      --right: 10px;
    }
  }
  .recruit-nav-link > .en {
    --font-size: 36;
    color: var(--color-corporate);
    font-size: calc(var(--font-size) * var(--rem));
  }
  @media (width <= 767.9999px) {
    .recruit-nav-link > .en {
      --font-size: 26;
    }
  }
  .recruit-nav-link > .ja {
    --font-size: 16;
    display: block;
    color: var(--color-text);
    font-size: calc(var(--font-size) * var(--rem));
  }
  @media (width <= 767.9999px) {
    .recruit-nav-link > .ja {
      --font-size: 14;
    }
  }

  .nav-close-button {
    --width: 100px;
    --height: 100px;
    --font-size: 20;
    --padding-top: 35px;
    --right: 30px;
    --top: 30px;

    background-color: var(--color-gray);
    font-size: calc(var(--font-size) * var(--rem));
    color: var(--color-corporate);
    cursor: pointer;
    width: var(--width);
    height: var(--height);
    font-weight: bold;
    letter-spacing: 0.06em;
    position: absolute;
    right: var(--right);
    top: var(--top);
    text-align: center;
    padding-top: var(--padding-top);
    box-sizing: border-box;
    font-family: var(--font-family-en);
    transition: background-color var(--link-transition-speed) ease, color var(--link-transition-speed) ease;
  }
  @media (any-hover: hover) {
    .nav-close-button:hover {
      color: var(--color-white);
      background-color: var(--color-corporate);
    }
  }
  .nav-close-button::before {
    --width: 30px;
    --height: 3px;
    --top: 38px;

    width: var(--width);
    height: var(--height);
    top: var(--top);
    content: "";
    background-color: currentcolor;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
  .nav-close-button::after {
    --width: 30px;
    --height: 3px;
    --top: 38px;

    width: var(--width);
    height: var(--height);
    top: var(--top);
    content: "";
    background-color: currentcolor;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
  }

  @media (width <= 767.9999px) {
    .nav-close-button {
      --width: 60px;
      --height: 60px;
      --padding-top: 25px;
      --font-size: 12;
      --right: 15px;
      --top: 15px;
    }

    .nav-close-button::before,
    .nav-close-button::after {
      --width: 19px;
      --height: 2px;
      --top: 20px;
    }
  }

  .recruit-nav-entry-title {
    margin-top: 70px;
    margin-bottom: 19px;
  }
  .recruit-nav-entry-title > .en {
    --font-size: 36;
    font-size: calc(var(--font-size) * var(--rem));
    color: var(--color-corporate-entry);
    font-weight: var(--font-weight-bold);
  }
  @media (width <= 767.9999px) {
    .recruit-nav-entry-title > .en {
      --font-size: 26;
    }
  }
  .recruit-nav-entry-title > .ja {
    --font-size: 16;
    font-size: calc(var(--font-size) * var(--rem));
    display: block;
    color: var(--color-text);
  }
  @media (width <= 767.9999px) {
    .recruit-nav-entry-title > .ja {
      --font-size: 14;
    }
  }

  .recruit-nav-entry-button {
    --font-size: 26;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 30px;
    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-top: 9px;
    position: relative;
    overflow: hidden;
  }

  @media (width <= 767.9999px) {
    .recruit-nav-entry-button {
      --font-size: 20;
    }
  }

  .recruit-nav-entry-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #00476e;
    transition: left var(--link-transition-speed) ease;
    z-index: 0;
  }

  .recruit-nav-entry-button.-new-graduate {
    background-color: var(--color-corporate-light);
  }
  .recruit-nav-entry-button.-career {
    background-color: var(--color-career);
  }
  .recruit-nav-entry-button.-intern {
    background-color: var(--color-intern);
  }

  @media (any-hover: hover) {
    .recruit-nav-entry-button:hover::before {
      left: 0;
    }
    .recruit-nav-entry-button:hover::after {
      margin-right: -10px;
    }
  }

  .recruit-nav-entry-button::after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-image: url("/assets/recruit/image/common/icon-arrow-02.svg");
    flex-shrink: 0;
    transition: margin-right var(--link-transition-speed) ease;
    position: relative;
    z-index: 1;
  }

  .recruit-nav-entry-button > span {
    position: relative;
    z-index: 1;
  }

  .entry-dialog {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    animation: dialog-fade-out 0.3s ease-out forwards;
  }
  .entry-dialog-content {
    --padding-inline: 80px;

    padding-inline: var(--padding-inline);
    max-width: 1100px;
    height: min(594px, 100vh);
    width: min(1100px, calc(100vw - var(--content-padding) * 2));
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0 20px rgb(0 0 0 / 50%);
  }

  @media (width <= 767.9999px) {
    .entry-dialog-content {
      --padding-inline: 15px;
      height: fit-content;
      max-width: 450px;
    }
  }

  .entry-dialog-content > .recruit-nav-entry-title {
    margin-top: 20px;
    margin-bottom: 0;
  }
  .entry-dialog[open] {
    animation: dialog-fade-in 0.3s ease-out forwards;
  }
  .entry-dialog[open]::backdrop {
    animation: backdrop-dialog-fade-in 0.3s ease-out forwards;
  }
  .entry-dialog-close {
    --width: 70px;
    --height: 70px;
    --top: 80px;
    --right: 80px;

    width: var(--width);
    height: var(--height);
    top: var(--top);
    right: var(--right);
    background-color: var(--color-border);
    border-radius: 50%;
    position: absolute;
    transition: opacity var(--link-transition-speed) ease;
  }

  @media (width <= 11549.9999px) {
    .entry-dialog-close {
      --top: 70px;
    }
  }

  @media (width <= 767.9999px) {
    .entry-dialog-close {
      --width: 60px;
      --height: 60px;
      top: 20px;
      right: 15px;
    }
  }
  @media (any-hover: hover) {
    .entry-dialog-close:hover {
      opacity: 0.8;
    }
  }
  .entry-dialog-close::before {
    --width: 30px;

    width: var(--width);
    content: "";
    height: 3px;
    background-color: currentcolor;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  @media (width <= 767.9999px) {
    .entry-dialog-close::before {
      --width: 20px;
    }
  }
  .entry-dialog-close::after {
    --width: 30px;

    content: "";
    width: var(--width);
    height: 3px;
    background-color: currentcolor;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  @media (width <= 767.9999px) {
    .entry-dialog-close::after {
      --width: 20px;
    }
  }
  @keyframes dialog-fade-in {
    0% {
      opacity: 0;
      display: none;
    }

    100% {
      opacity: 1;
      display: block;
    }
  }
  @keyframes dialog-fade-out {
    0% {
      opacity: 1;
      display: block;
    }

    100% {
      opacity: 0;
      display: none;
    }
  }
  @keyframes backdrop-dialog-fade-in {
    0% {
      background-color: rgb(0 0 0 / 0%);
    }

    100% {
      background-color: rgb(0 0 0 / 60%);
    }
  }
  .entry-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
  }
  @media (width <= 1159.9999px) {
    .entry-buttons {
      flex-direction: column;
    }
  }
  @media (width <= 767.9999px) {
    .entry-buttons {
      margin-bottom: 30px;
    }
  }
  .entry-buttons > .recruit-nav-entry-button {
    margin-top: 0;
    max-width: 300px;
  }
  @media (width <= 1159.9999px) {
    .entry-buttons > .recruit-nav-entry-button {
      max-width: 315px;
    }
  }

  .recruit-footer {
    --padding-top: 100px;
    --padding-bottom: 100px;

    padding: var(--padding-top) var(--content-padding) var(--padding-bottom);
    background-color: var(--color-white);
  }

  @media (width <= 767.9999px) {
    .recruit-footer {
      --padding-top: 50px;
      --padding-bottom: 50px;
    }
  }

  .recruit-footer-inner {
    max-width: var(--content-width);
    margin-inline: auto;
  }

  .footer-button {
    --font-size: 14;
    --padding-block: 8px;
    --margin-top: 30px;

    font-size: calc(var(--font-size) * var(--rem));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-medium);
    padding: var(--padding-block) 20px;
    border: 1px solid var(--color-border);
    border-radius: 25px;
    margin-top: var(--margin-top);
    transition: color var(--link-transition-speed) ease, background-color var(--link-transition-speed) ease, border-color var(--link-transition-speed) ease;
  }

  @media (width <= 767.9999px) {
    .footer-button {
      --padding-block: 10px;
      --margin-top: 20px;
    }
  }

  .footer-button::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 11px;
    margin-left: 19px;
    mask-image: url("/assets/recruit/image/common/icon-arrow-03.svg");
    background-color: var(--color-text);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: contain;
    transition: background-color var(--link-transition-speed) ease;
  }
  @media (any-hover: hover) {
    .footer-button:hover {
      color: var(--color-white);
      background-color: var(--color-corporate);
      border-color: var(--color-corporate);
    }
    .footer-button:hover::after {
      background-color: var(--color-white);
    }
  }
  .company-info {
    --margin-top: 30px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 25px;
    margin-top: var(--margin-top);
    font-size: calc(14 * var(--rem));
  }

  @media (width <= 767.9999px) {
    .company-info {
      --margin-top: 20px;
    }
  }
  .company-info > dd .representative {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
  }

  .copyright {
    --margin-top: 68px;

    display: block;
    margin-top: var(--margin-top);
    font-size: calc(12 * var(--rem));
    font-family: var(--font-family-en);
    color: var(--color-note);
    text-align: center;
    font-weight: var(--font-weight-medium);
  }

  @media (width <= 767.9999px) {
    .copyright {
      --margin-top: 48px;
    }
  }

  .copyright-footer {
    background-color: var(--color-white);
    text-align: center;
    color: var(--color-note);
    padding: 50px var(--content-padding);
    font-size: calc(12 * var(--rem));
    font-family: var(--font-family-en);
  }

  .copyright-footer > .copyright {
    margin-top: 0;
  }
  .copyright.-new-grad {
    --margin-bottom: 100px;

    margin-top: 0;
    margin-bottom: var(--margin-bottom);
  }
  @media (max-width: 767.9999px) {
    .copyright.-new-grad {
      --margin-bottom: 50px;
    }
  }

  .breadcrumb {
    --padding-top: 20px;
    --padding-left: 30px;

    padding-top: var(--padding-top);
    padding-left: var(--padding-left);
  }

  @media (width <= 767.9999px) {
    .breadcrumb {
      --padding-left: 15px;
      --padding-top: 10px;
    }
  }
  .breadcrumb-list {
    display: flex;
    align-items: center;
  }
  .breadcrumb-link::after {
    content: ">";
    display: inline-block;
    margin-inline: 2px;
    font-size: calc(10 * var(--rem));
    color: var(--color-note);
  }
  .breadcrumb-link,
  .breadcrumb-item {
    color: var(--color-note);
    font-size: calc(10 * var(--rem));
    font-weight: var(--font-weight-bold);
  }
}

@layer components {
  /*
    * Layer: Components
    * ---------------------
    * 再利用可能なUIコンポーネント
    * ボタン、カード、フォーム要素など、
    * ページ内で複数回使用される
    * UIコンポーネントのスタイルを定義します
    */

  .section-title {
    --font-size: 80;

    font-size: calc((var(--font-size)) * var(--rem));
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-en);
    position: relative;
    overflow: hidden;
    color: var(--color-corporate);
  }

  @media (width <= 767.9999px) {
    .section-title {
      --font-size: 40;
      line-height: 1;
    }
  }

  .section-title::after {
    --width: 40px;
    --margin-top: 35px;

    content: "";
    display: block;
    width: var(--width);
    height: 2px;
    background: linear-gradient(90deg, #00a0e9 0%, #00d6b2 50%, #00a0e9 100%);
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .section-title::after {
      --width: 30px;
      --margin-top: 30px;
    }
  }

  .section-title > .ja {
    --font-size: 24;

    display: block;
    line-height: 1.458;
    font-family: var(--font-family-ja);
    font-size: calc((var(--font-size)) * var(--rem));
    transform: translateY(10px);
    color: var(--color-text);
  }

  @media (width <= 767.9999px) {
    .section-title > .ja {
      --font-size: 16;
    }
  }

  .button {
    --font-size: 18;
    --width: 300px;
    --height: 60px;
    --border-radius: 30px;

    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-gradient-horizontal);
    background-position: 0% 50%;
    background-size: 200% auto;
    color: var(--color-white);
    font-size: calc(var(--font-size) * var(--rem));
    font-family: var(--font-family-en);
    width: var(--width);
    height: var(--height);
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    transition: background-position var(--button-transition-speed) ease;
    font-weight: 600;
  }
  .button::after {
    position: absolute;
    top: 50%;
    right: 31px;
    transform: translateY(-50%);
    content: "";
    display: block;
    width: 7px;
    height: 11px;
    background-image: url("/assets/recruit/image/common/icon-arrow-05.svg");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
    transition: right var(--button-transition-speed) ease;
  }
  @media (width <= 767.9999px) {
    .button {
      --width: 240px;
      margin-inline: auto;
    }
  }
  @media (any-hover: hover) {
    .button:hover {
      background-position: -100% 0;
    }
  }

  .entry-area {
    --padding-inline: var(--content-padding);
    --padding-block: 140px;
    --background-size: 92.57vw;
    --background-position: -1.67vw;

    background-color: var(--color-entry-background);
    padding-block: var(--padding-block);
    background-image: url("/assets/recruit/image/common/text-entry-01.svg");
    background-repeat: no-repeat;
    background-position: center bottom var(--background-position);
    background-size: var(--background-size);

    padding-inline: var(--padding-inline);
  }

  @media (width > 1440px) {
    .entry-area {
      --background-size: 1333px;
      --background-position: -24px;
    }
  }

  @media (width <= 767.9999px) {
    .entry-area {
      --padding-inline: 0;
      --padding-block: 42px 53px;
      --background-size: 85.33vw;
      --background-position: -2.13vw;
    }
  }
  .entry-footer-button {
    --border-radius: 30px;
    --min-height: 120px;
    --width: 100%;

    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 800px;
    width: var(--width);
    min-height: var(--min-height);
    border-radius: 60px;
    margin-inline: auto;
    padding: 10px 55px;
    background: var(--color-gradient-horizontal);
    background-position: 0% 50%;
    background-size: 200% auto;
    box-shadow: 0 10px 15px rgb(7 24 48 / 15%);
    color: var(--color-white);
    font-size: calc(30 * var(--rem));
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-en);
    transition: background-position var(--button-transition-speed) ease, box-shadow var(--button-transition-speed) ease;
  }

  @media (width <= 767.9999px) {
    .entry-footer-button {
      --min-height: 80px;
      --width: 81.33vw;
    }
  }
  .entry-footer-button::after {
    --right: 50px;

    z-index: 1;
    position: absolute;
    right: var(--right);
    top: 50%;
    transform: translateY(-50%);

    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url("/assets/recruit/image/common/icon-arrow-02.svg");
    background-size: contain;
    background-repeat: no-repeat;
    transition: right var(--button-transition-speed) ease;
  }

  @media (width <= 767.9999px) {
    .entry-footer-button::after {
      --right: 20px;
    }
  }

  .entry-footer-button:focus-visible {
    outline: 3px solid var(--color-text);
  }
  @media (any-hover: hover) {
    .entry-footer-button:hover {
      box-shadow: none;
    }
    .entry-footer-button:hover::after {
      right: 40px;
    }
  }
  .entry-footer-button.-new-grad {
    font-family: var(--font-family-ja);
  }

  @media (max-width: 767.9999px) {
    .entry-footer-button.-new-grad {
      font-size: calc(18 * var(--rem));
      width: calc(100% - var(--content-padding) * 2);
    }
  }
  .entry-footer-button.-intern {
    font-family: var(--font-family-ja);
    text-align: center;
  }

  @media (max-width: 767.9999px) {
    .entry-footer-button.-intern {
      font-size: calc(18 * var(--rem));
      width: calc(100% - var(--content-padding) * 2);
    }
  }
  @media (max-width: 430.9999px) {
    .entry-footer-button.-intern {
      padding-left: 20px;
    }
  }

  [data-fade-in] {
    overflow: hidden;
    opacity: 0;
    transform: translateY(3.66vw);
    will-change: opacity, transform;
  }

  [data-fade-in].is-fade-in {
    animation: fade-in-up 1s 0.4s forwards;
  }

  @keyframes fade-in-up {
    0% {
      opacity: 0;
      transform: translateY(3.66vw);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  [data-slider] {
    transition: transform 0.3s ease;
    cursor: grab;
    user-select: none; /* テキスト選択を無効化 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  /* ドラッグ中のカーソル */
  [data-slider]:active {
    cursor: grabbing;
  }

  [data-slider].is-transition {
    transition: transform 0.5s ease-in-out;
  }

  /* ドラッグ中はトランジションを無効化 */
  [data-slider]:not(.is-transition) {
    transition: none !important;
  }

  /* スライド内の画像のドラッグを無効化 */
  [data-slider] img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  /* aタグはクリック可能にする */
  [data-slider] a {
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  /* note-section PC時はスライド機能無効化 */
  @media (width >= 768px) {
    .note-section [data-slider] {
      cursor: default !important;
      transform: none !important;
      transition: none !important;
    }

    .note-section [data-slider]:active {
      cursor: default !important;
    }

    .note-section [data-slider] a {
      cursor: pointer !important;
    }
  }

  /* タッチデバイス用の調整 */
  @media (hover: none) and (pointer: coarse) {
    [data-slider] {
      cursor: default;
    }

    [data-slider]:active {
      cursor: default;
    }
  }

  .pages-section-title {
    --font-size: calc(56 * var(--rem));
    font-size: var(--font-size);
    font-weight: var(--font-weight-bold);
  }

  .pages-section-title::after {
    --margin-top: 35px;
    --width: 40px;

    margin-top: var(--margin-top);
    content: "";
    display: block;
    width: var(--width);
    height: 2px;
    background: linear-gradient(90deg, #00a0e9 0%, #00d6b2 50%, #00a0e9 100%);
  }
  @media (width <= 767.9999px) {
    .pages-section-title {
      --font-size: calc(30 * var(--rem));
    }
    .pages-section-title::after {
      --margin-top: 20px;
      --width: 30px;
    }
  }
  .pages-section-title.-new-grad {
    font-size: calc(30 * var(--rem));
  }

  .pages-mv-area {
    --padding-top: 93px;
    --padding-bottom: 102px;
    --padding-inline: 30px;
    --background-image: url("/assets/recruit/image/common/bg_title.png");

    background-image: var(--background-image);

    background-image: image-set(url("/assets/recruit/image/common/bg_title.webp") type("image/webp"), url("/assets/recruit/image/common/bg_title.png") type("image/png"));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    padding-inline: var(--padding-inline);
  }

  @media (width <= 767.9999px) {
    .pages-mv-area {
      --padding-top: 30px;
      --padding-bottom: 30px;
      --padding-inline: var(--content-padding);
    }
  }
  .pages-mv-title {
    --font-size: 100;

    font-family: var(--font-family-en);
    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    line-height: 1.32;
  }

  @media (width <= 767.9999px) {
    .pages-mv-title {
      --font-size: 50;
    }
  }
  .pages-mv-title.-new-grad {
    --font-size: 80;
    --padding-top: 136px;
    --padding-bottom: 136px;

    font-family: var(--font-family-ja);
    font-size: calc(var(--font-size) * var(--rem));
  }

  @media (width <= 767.9999px) {
    .pages-mv-title.-new-grad {
      --font-size: 40;
      --padding-top: 50px;
      --padding-bottom: 50px;
    }
  }
  .pages-mv-catchphrase {
    font-size: calc(18 * var(--rem));
    margin-top: 7px;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    line-height: 1.444;
  }

  .pages-section-title-and-text {
    --image-width: 96px;
  }
  .pages-section-title-and-text > .text {
    display: block;
    position: relative;
  }
  :is(.pages-section-title-and-text > .text) > img {
    position: relative;
    z-index: var(--z-index-base-2);
  }
  :is(.pages-section-title-and-text > .text)::after {
    content: "";
    display: block;
    width: calc(100% - 20px - var(--image-width));
    height: 1px;
    background-color: var(--color-border);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: var(--z-index-base);
  }
  .pages-section-title-and-text > .title {
    --font-size: 36;
    --margin-top: 35px;
    --font-weight: var(--font-weight-medium);
    --line-height: 1.556;

    display: block;
    font-size: calc(var(--font-size) * var(--rem));
    line-height: var(--line-height);
    font-weight: var(--font-weight);
    color: var(--color-corporate);
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .pages-section-title-and-text > .title {
      --font-size: 26;
      --margin-top: 18px;
    }
  }

  .pages-section-title-and-text.-message {
    --image-width: 79px;
    --margin-bottom: 32px;

    margin-bottom: var(--margin-bottom);
  }
  @media (width <= 767.9999px) {
    .pages-section-title-and-text.-message {
      --margin-bottom: 15px;
    }
  }
  .pages-section-title-and-text.-message > .title {
    --font-size: 56;
    --font-weight: var(--font-weight-semibold);
    --line-height: 1.25;
    --margin-top: 70px;
  }
  @media (width <= 767.9999px) {
    .pages-section-title-and-text.-message > .title {
      --margin-top: 23px;
      --font-size: 36;
    }
  }

  [data-cut-in] {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.7s cubic-bezier(0.86, 0, 0.07, 1);
    white-space: nowrap;
  }
  .is-animated[data-cut-in] {
    clip-path: inset(0 0% 0 0);
  }

  .people-slider-wrapper {
    --margin-top: 40px;
    margin-top: var(--margin-top);
    margin-right: calc(var(--content-padding) * -1);
  }

  @media (width <= 767.9999px) {
    .people-slider-wrapper {
      --margin-top: 20px;
    }
  }
  .people-slider {
    --gap: 10;

    display: flex;
    position: relative;
    gap: calc(var(--gap) / var(--vw) * 100vw);
  }

  @media (width <= 767.9999px) {
    .people-slider {
      --gap: 0;
    }
  }

  .people-slide-item {
    flex-shrink: 0;

    -webkit-filter: drop-shadow(20px 20px 15px rgb(0 0 0 / 16%));
    filter: drop-shadow(20px 20px 15px rgb(0 0 0 / 16%));
    will-change: filter;
    transition: filter var(--card-transition-speed) ease;
  }

  @media (any-hover: hover) {
    .people-slide-item:hover {
      -webkit-filter: drop-shadow(22px 22px 18px rgb(0 0 0 / 20%));
      filter: drop-shadow(22px 22px 18px rgb(0 0 0 / 20%));
    }
  }
  .slider-buttons {
    --gap: 10px;
    --position: absolute;

    display: flex;
    gap: var(--gap);
    position: var(--position);
    right: 0;
    bottom: 0;
  }
  .slider-buttons > .prev {
    transform: rotate(180deg);
  }
  @media (width <= 767.9999px) {
    .slider-buttons {
      --position: static;
      --gap: 5px;
      margin-top: 30px;
      justify-content: center;
    }
  }
  .slider-button {
    transition: opacity 0.3s ease;
  }
  @media (any-hover: hover) {
    .slider-button:hover {
      opacity: 0.8;
    }
  }
  @media (width <= 767.9999px) {
    .slider-button {
      width: 40px;
      height: 40px;
    }
  }

  .slider-button.is-disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  /* People Card */
  .people-card {
    --width: 420;
    --height: 522;
    --max-width: 420px;
    --clip-path-value: 6.19%;

    display: block;
    aspect-ratio: var(--width) / var(--height);
    max-width: var(--max-width);
    width: 100%;
    height: auto;
    overflow: hidden;
    clip-path: polygon(var(--clip-path-value) 0%, 100% 0%, calc(100% - var(--clip-path-value)) 100%, 0% 100%);
  }

  .people-card > img {
    transition: transform var(--card-transition-speed) ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media (any-hover: hover) {
    .people-card:hover img {
      transform: scale(1.1);
    }
  }
  @media (width <= 767.9999px) {
    .people-card {
      --width: 289;
      --height: 360;
      --max-width: 289px;
    }
  }
  .people-card {
    position: relative;
  }

  .people-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgb(255 255 255 / 0%) 50%, rgb(0 160 233 / 60%) 100%);
  }

  .people-card:focus-visible > img {
    transform: scale(1.1);
  }

  .people-card-titles {
    position: absolute;
    bottom: 5.75%;
    color: var(--color-white);
    left: 7.14%;
    padding-right: 7.14%;
    z-index: var(--z-index-normal);
  }
  .people-card-titles > .number {
    --font-size: 20;
    font-family: var(--font-family-en);
    font-style: italic;
    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
  }
  @media (width <= 767.9999px) {
    .people-card-titles > .number {
      --font-size: 14;
    }
  }
  .people-card-titles > .position {
    --font-size: 24;
    font-weight: var(--font-weight-bold);
    margin-top: 10px;
    font-size: calc(var(--font-size) * var(--rem));
    line-height: 1.458;
  }
  @media (width <= 767.9999px) {
    .people-card-titles > .position {
      --font-size: 16;
    }
  }
  .people-card-titles > .school {
    --font-size: 16;
    font-weight: var(--font-weight-medium);
    font-size: calc(var(--font-size) * var(--rem));
  }
  @media (width <= 767.9999px) {
    .people-card-titles > .school {
      --font-size: 12;
    }
  }
  .people-card-titles > .year {
    --font-size: 14;
    --margin-top: 30px;

    margin-top: var(--margin-top);
    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-medium);
  }
  @media (width <= 767.9999px) {
    .people-card-titles > .year {
      --font-size: 10;
      --margin-top: 20px;
    }
  }

  .category-section {
    --padding-top: 130px;
    --padding-bottom: 130px;

    padding-inline: var(--content-padding);
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    border-top: 1px solid var(--color-border);
  }

  @media (width <= 767.9999px) {
    .category-section {
      --padding-top: 56px;
      --padding-bottom: 56px;
    }
  }
  .category-card {
    --clip-path: polygon(4.26% 0%, 100% 0%, 95.74% 100%, 0% 100%);
    --aspect-ratio: 400 / 260;

    overflow: hidden;
    clip-path: var(--clip-path);
    position: relative;
    color: var(--color-white);
    width: 100%;
    height: auto;
    aspect-ratio: var(--aspect-ratio);
  }

  @media (width <= 1024px) {
    .category-card {
      --clip-path: none;
      --aspect-ratio: 345 / 150;
    }
  }
  .category-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(7 24 48 / 50%);
  }

  .category-cards {
    --grid-template-columns: repeat(3, 1fr);

    max-width: var(--content-width);
    margin-inline: auto;
    display: grid;
    grid-template-columns: var(--grid-template-columns);
  }
  @media (width <= 1024px) {
    .category-cards {
      --grid-template-columns: 1fr;
      row-gap: 10px;
    }
  }
  .category-cards:has(:nth-child(4):last-child) {
    --row-gap: 30px;
    --grid-template-columns: repeat(2, 1fr);

    gap: 15px;
    row-gap: var(--row-gap);
  }
  @media (width <= 1024px) {
    .category-cards:has(:nth-child(4):last-child) {
      --grid-template-columns: 1fr;
      --row-gap: 10px;
    }
  }
  .category-cards:has(:nth-child(4):last-child) > .category-card {
    --clip-path: polygon(2.4% 0%, 100% 0%, 97.6% 100%, 0% 100%);
    --aspect-ratio: 585 / 260;
  }
  @media (width <= 1024px) {
    .category-cards:has(:nth-child(4):last-child) > .category-card {
      --clip-path: none;
      --aspect-ratio: 345 / 150;
    }
  }

  .category-card-image {
    display: block;
    transition: transform var(--card-transition-speed) ease;
  }

  @media (width <= 1024px) {
    .category-card-image {
      width: 100%;
    }
  }
  .category-card-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .category-card:focus-visible .category-card-image {
    transform: scale(1.1);
  }
  @media (any-hover: hover) {
    .category-card:hover .category-card-image {
      transform: scale(1.1);
    }
  }

  .category-card-titles {
    --vw: 1335;
    --top: 18.08%;
    --left: min(calc(50 / var(--vw) * 100vw), 50px);

    position: absolute;
    top: var(--top);
    left: var(--left);
    z-index: var(--z-index-normal);
  }

  @media (width <= 1024px) {
    .category-card-titles {
      --top: 50%;
      --left: 5.8%;

      transform: translateY(-50%);
      width: calc(100% - 5.8%);
      padding-right: 60px;
    }
  }
  .category-card-titles > .en {
    --font-size: min(calc(40 / var(--vw) * 100vw), 40px);

    font-size: var(--font-size);
    font-family: var(--font-family-en);
    font-weight: 600;
  }

  @media (width <= 1024px) {
    .category-card-titles > .en {
      --font-size: 16px;
    }
  }
  .category-card-titles > .ja {
    --font-size: min(calc(16 / var(--vw) * 100vw), 16px);

    font-size: var(--font-size);
    font-weight: var(--font-weight-medium);
  }

  @media (width <= 1024px) {
    .category-card-titles > .ja {
      --font-size: 20px;
    }
  }
  .category-card-titles::after {
    --margin-top: min(calc(36 / var(--vw) * 100vw), 36px);
    --width: min(calc(30 / var(--vw) * 100vw), 30px);
    --height: min(calc(30 / var(--vw) * 100vw), 30px);

    position: absolute;
    content: "";
    display: inline-block;
    width: var(--width);
    height: var(--height);
    margin-top: var(--margin-top);
    background-image: url("/assets/recruit/image/common/icon-arrow-02.svg");
    background-size: contain;
    background-repeat: no-repeat;
  }

  @media (width <= 1024px) {
    .category-card-titles::after {
      --margin-top: 0;
      --width: 30px;
      --height: 30px;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
    }
  }
}

@layer contents {
  /*
   * Layer: Contents
   * ---------------------
   * コンテンツ要素間の余白設定
   * 記事本文、セクション間、リスト項目間など、
   * コンテンツ内での要素間の余白や
   * 基本的なタイポグラフィを定義します
   */

  .recruit-main {
    padding-top: var(--header-height);
  }

  .recruit-description {
    --line-height: 2.25;
    line-height: var(--line-height);
  }

  @media (width <= 767.9999px) {
    .recruit-description {
      --line-height: 1.875;
    }
  }
}

@layer page {
  /*
   * Layer: Page
   * ---------------------
   * ページ固有のスタイル
   * 特定のページにのみ適用される
   * スタイルを定義します
   * 例：採用ページ、お問い合わせページなど
   */

  /*
   * ===========================
   * トップページ専用スタイル
   * ===========================
   */

  .mv {
    --padding-bottom: calc(145 / var(--vw) * 100vw);

    margin-top: calc(var(--header-height) * -1);
    position: relative;
    background-color: var(--color-white);
    padding-top: var(--header-height);
    padding-bottom: var(--padding-bottom);
  }
  @media (width <= 767.9999px) {
    .mv {
      --padding-bottom: 0;
    }
  }

  .mv-slider-wrapper {
    overflow: hidden;
    position: relative;
    display: flex;
  }

  .mv-slider {
    --gap: 10;
    --animation-speed: 300s;

    display: flex;
    position: relative;
    gap: calc(var(--gap) / var(--vw) * 100vw);
  }

  .mv-slider:nth-child(1) {
    animation: slide-loop var(--animation-speed) -150s linear infinite;
  }
  .mv-slider:nth-child(2) {
    animation: slide-loop2 var(--animation-speed) linear infinite;
  }

  @keyframes slide-loop {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes slide-loop2 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-200%);
    }
  }

  @media (width <= 767.9999px) {
    .mv-slider {
      --gap: 0;
    }
  }

  .mv-slide-item {
    /* PCデザイン時のサイズを基準とする */
    --width: 470;
    --height: 630;
    --header-height: 90px;

    /* 縦横比を維持する */
    aspect-ratio: var(--width) / var(--height);

    /* 最大幅をビューポート幅に応じて設定 */
    width: min(calc(var(--width) / var(--vw) * 100vw), calc((100vh - var(--header-height)) * (var(--width) / var(--height))));

    /* 高さはaspect-ratioで自動的に設定される */
    height: auto;
    overflow: hidden;
    clip-path: polygon(4.26% 0%, 100% 0%, 95.74% 100%, 0% 100%);
    flex-shrink: 0;
  }

  @media (width <= 767.9999px) {
    .mv-slide-item {
      --width: 209;
      --height: 280;
      --header-height: 60px;
    }
  }

  .mv-slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をはみ出さずに収める */
  }

  .mv-lead {
    --position: absolute;
    --font-size: 50;
    --bottom: calc(30 + 145);
    --left: var(--content-padding);
    --display: inline-block;

    position: var(--position);
    display: var(--display);
    font-size: calc(var(--font-size) / var(--vw) * 100vw);
    font-weight: var(--font-weight-bold);
    bottom: calc(var(--bottom) / var(--vw) * 100vw);
    left: var(--left);
  }

  @media (width <= 767.9999px) {
    .mv-lead {
      --position: relative;
      --bottom: 0;
      --left: 0;
      --font-size: 26;
      --display: block;

      line-height: 1.385;
      padding: calc(27 / var(--vw) * 100vw) var(--content-padding) calc(13 / var(--vw) * 100vw);
    }
  }
  .mv-lead > span {
    clip-path: polygon(0.74% 0%, 100% 0%, 99.26% 100%, 0% 100%);
  }

  .mv-lead::after {
    --width: 424;
    --height: 130;
    --bottom: -80;
    --right: -240;
    --position: absolute;
    --background-position: center;

    content: "";
    display: block;
    position: var(--position);
    bottom: calc(var(--bottom) / var(--vw) * 100vw);
    right: calc(var(--right) / var(--vw) * 100vw);
    width: calc(var(--width) / var(--vw) * 100vw);
    height: calc(var(--height) / var(--vw) * 100vw);
    background-image: url("/assets/recruit/image/top/text-lead.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: var(--background-position);
    z-index: var(--z-index-normal);
  }
  @media (width <= 767.9999px) {
    .mv-lead::after {
      --width: 100%;
      --height: 57;
      --bottom: -2;
      --right: 0;
      --position: relative;
      --background-position: right;
      margin-top: calc((15 / var(--vw) * 100vw) * -1);
    }
  }

  .mv-lead span {
    --padding-block: 5;
    --padding-left: 30;
    --background-color: var(--color-white);

    padding-left: calc(var(--padding-left) / var(--vw) * 100vw);
    padding-block: calc(var(--padding-block) / var(--vw) * 100vw);
    background-color: var(--background-color);
    display: block;
  }

  @media (width <= 767.9999px) {
    .mv-lead span {
      --padding-block: 0;
      --padding-left: 0;
      --background-color: transparent;
    }
  }

  .mv-lead span + span {
    --margin-top: 5;

    margin-top: calc(var(--margin-top) / var(--vw) * 100vw);
  }

  @media (width <= 767.9999px) {
    .mv-lead span + span {
      --margin-top: 0;
    }
  }

  .information {
    --padding: 24px 30px 30px;
    --box-shadow: 30px;
    --margin-top: -50px;
    --max-width: 600px;
    --margin-left: var(--content-padding);

    margin-left: var(--margin-left);
    background-color: var(--color-white);
    padding: var(--padding);
    max-width: var(--max-width);
    box-shadow: 0 0 var(--box-shadow) rgb(0 0 0 / 10%);
    margin-top: var(--margin-top);
    position: relative;
    z-index: var(--z-index-normal);
  }

  @media (width <= 767.9999px) {
    .information {
      --box-shadow: 20px;
      --margin-left: 0;
      --margin-top: 0;
      --max-width: 100%;
      --padding: 24px 15px 30px;
    }
  }

  .information-title {
    --font-size: 20;

    font-size: calc(var(--font-size) * var(--rem));
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-bold);
  }

  .information-title::after {
    content: "";
    display: block;
    width: 10px;
    height: 2px;
    background-color: var(--color-corporate);
    margin-right: 8px;
    margin-top: 9px;
    vertical-align: middle;
  }
  .information-item {
    display: grid;
    grid-template: "time icon" auto "text icon" auto / 1fr auto;
    align-items: center;
    margin-top: 15px;
  }

  .information-item > .text {
    --font-size: 16;

    display: block;
    grid-area: text;
    font-size: calc(var(--font-size) * var(--rem));
    transition: color var(--link-transition-speed) ease;
  }

  .information-item > time {
    --font-size: 16;

    grid-area: time;
    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-en);
  }
  @media (any-hover: hover) {
    a.information-item[href]:hover > .text {
      color: var(--color-corporate);
    }
  }

  a.information-item[href]::after {
    --width: 30px;
    --height: 30px;

    grid-area: icon;
    content: "";
    display: block;
    width: var(--width);
    height: var(--height);
    background-image: url("/assets/recruit/image/common/icon-arrow-01.svg");
    background-repeat: no-repeat;
    background-size: contain;
    align-self: end;
  }

  @media (width <= 767.9999px) {
    a.information-item[href]::after {
      --width: 26px;
      --height: 26px;
    }
  }

  .parallax-section {
    --margin-top: -100px;
    --padding-top: 100px;
    margin-top: var(--margin-top);
    padding-top: var(--padding-top);
    padding-inline: var(--content-padding);
    overflow: hidden;
    position: relative;
  }
  @media (width <= 767.9999px) {
    .parallax-section {
      --margin-top: 0;
      --padding-top: 50px;
    }
  }

  .parallax-section::before {
    --background-image: url("/assets/recruit/image/top/bg_pc.png");

    display: block;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--background-image);

    background-image: image-set(url("/assets/recruit/image/top/bg_pc.webp") type("image/webp"), url("/assets/recruit/image/top/bg_pc.png") type("image/png"));
    background-repeat: no-repeat;
    background-size: cover;
    z-index: var(--z-index-negative);
  }
  @media (width <= 767.9999px) {
    .parallax-section::before {
      --background-image: url("/assets/recruit/image/top/bg_sp.png");
      background-image: image-set(url("/assets/recruit/image/top/bg_sp.webp") type("image/webp"), url("/assets/recruit/image/top/bg_sp.png") type("image/png"));
    }
  }

  .parallax-section > :where(section) {
    max-width: var(--content-width);
    margin-inline: auto;
  }

  /* message area */
  .message-section {
    --margin-top: 29px;
    --gap: 64px;
    --display: grid;

    margin-top: var(--margin-top);
    display: var(--display);
    grid-template-columns: 600fr 536fr;
    gap: var(--gap);
  }
  @media (width <= 767.9999px) {
    .message-section {
      --display: block;
      --margin-top: 0;
    }
  }

  .message-area {
    --margin-top: calc(120 / var(--vw) * 100vw);

    margin-top: var(--margin-top);
  }
  @media (width <= 767.9999px) {
    .message-area {
      --margin-top: 0;
    }
  }

  .message-area > p {
    --font-size: 18;
    --margin-top: 40px;
    --font-weight: var(--font-weight-bold);
    --line-height: 2;

    font-size: calc(var(--font-size) * var(--rem));
    line-height: var(--line-height);
    margin-top: var(--margin-top);
    font-weight: var(--font-weight);
  }

  @media (width <= 767.9999px) {
    .message-area > p {
      --font-weight: 400;
      --margin-top: 30px;
      --font-size: 16;
      --line-height: 1.875;
    }
  }
  .message-area > p + p {
    --margin-top: 20px;

    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .message-area > p + p {
      --margin-top: 15px;
    }
  }

  .message-images {
    --margin-right: calc(120 / var(--vw) * 100vw * -1);
    display: flex;
    margin-right: var(--margin-right);
    align-items: self-start;
  }

  @media (width <= 767.9999px) {
    .message-images {
      --margin-right: 0;
      margin-top: 60px;
      justify-content: center;
    }
  }
  .message-image {
    --max-width: 310px;
    --clip-path-value: 10%;
    --aspect-ratio: 310 / 645;

    aspect-ratio: var(--aspect-ratio);
    width: 100%;
    max-width: var(--max-width);
    height: auto;
    overflow: hidden;
    clip-path: polygon(var(--clip-path-value) 0%, 100% 0%, calc(100% - var(--clip-path-value)) 100%, 0% 100%);
    position: relative;
  }

  @media (width <= 767.9999px) {
    .message-image {
      --margin-right: 0;
      --max-width: calc(140 / var(--vw) * 100vw);
    }
  }

  .message-image + .message-image {
    --margin-left: calc(35 / var(--vw) * 100vw);
    margin-left: var(--margin-left);
  }

  @media (width <= 767.9999px) {
    .message-image + .message-image {
      --margin-left: 10px;
    }
  }
  .message-image:first-child {
    --margin-top: calc(190 / var(--vw) * 100vw);
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .message-image:first-child {
      --margin-top: 20px;
    }
  }
  .message-section .button {
    --margin-top: 60px;
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .message-section .button {
      --margin-top: 40px;
    }
  }

  .about-section {
    --margin-top: 148px;

    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .about-section {
      --margin-top: 60px;
    }
  }
  .about-section .about-picture {
    grid-area: picture;
  }
  @media (width <= 767.9999px) {
    .about-section .about-picture {
      margin-top: 20px;
      margin-inline: auto;
      width: calc(300 / var(--vw) * 100vw);
    }
  }

  .about-section-inner {
    --padding-top: 168px;
    --padding-bottom: 160px;
    --gap: min(53px, calc(53 / var(--vw) * 100vw));
    --display: grid;
    --margin-right: calc(50% - 50vw);
    --margin-left: -120px;
    --padding-inline: 120px;
    --grid-template-columns: 639px 508px;

    display: var(--display);
    grid-template-columns: var(--grid-template-columns);
    grid-template-areas:
      "title picture"
      "lead picture"
      "text picture"
      "button picture";
    column-gap: var(--gap);
    padding: var(--padding-top) var(--padding-inline) var(--padding-bottom);
    margin-right: var(--margin-right);
    margin-left: var(--margin-left);
    background-color: var(--color-white);
  }
  @media (width <= 1599px) {
    .about-section-inner {
      --grid-template-columns: 1fr 1fr;
      --margin-left: calc((var(--content-padding) / 2) * -1);
      --padding-inline: calc(var(--content-padding) / 2);
    }
  }

  @media (width <= 767.9999px) {
    .about-section-inner {
      --grid-template-columns: 1fr;
      --display: block;
      --padding-top: 47px;
      --padding-bottom: 60px;
      --margin-right: calc(var(--content-padding) * -1);
      --margin-left: auto;
      --padding-inline: var(--content-padding);
    }
  }

  .about-section-inner > .section-title {
    grid-area: title;
  }

  .about-lead {
    --font-size: 48;
    --margin-top: 35px;

    grid-area: lead;
    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-bold);
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .about-lead {
      --font-size: 30;
      --margin-top: 20px;
      line-height: 1.333;
    }
  }
  .about-section-description {
    --margin-top: 20px;

    grid-area: text;
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .about-section-description {
      --margin-top: 10px;
    }
  }
  .about-section .button {
    --margin-top: 60px;

    grid-area: button;
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .about-section .button {
      --margin-top: 40px;
    }
  }

  .people-section {
    --margin-top: -90;

    position: relative;
    margin-top: calc(var(--margin-top) / var(--vw) * 100vw);
  }

  @media (width <= 767.9999px) {
    .people-section {
      --margin-top: -55;
    }
  }
  .people-section > .button {
    --margin-top: 90px;
    margin-top: var(--margin-top);
    margin-inline: auto;
  }
  @media (width <= 767.9999px) {
    .people-section > .button {
      --margin-top: 40px;
    }
  }
  .people-section-description {
    --margin-top: 40px;

    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .people-section-description {
      --margin-top: 30px;
    }
  }

  /* culture */
  .culture-section {
    --margin-top: 92px;
    --margin-bottom: 100px;
    margin-top: var(--margin-top);
    margin-bottom: var(--margin-bottom);
  }

  @media (width <= 767.9999px) {
    .culture-section {
      --margin-top: 56px;
      --margin-bottom: 60px;
    }
  }

  .culture-section-description {
    --margin-top: 40px;
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .culture-section-description {
      --margin-top: 30px;
      --margin-bottom: 60px;
    }
  }
  .culture-cards {
    --margin-top: 40px;
    --grid-template-columns: repeat(3, 1fr);
    --gap: 15px;

    display: grid;
    grid-template-columns: var(--grid-template-columns);
    margin-top: var(--margin-top);
    gap: var(--gap);
  }
  @media (width <= 767.9999px) {
    .culture-cards {
      --margin-top: 20px;
      --grid-template-columns: 1fr;
      --gap: 10px;
    }
  }

  .culture-card-image {
    display: block;
    transition: transform var(--card-transition-speed) ease;
  }

  @media (width <= 767.9999px) {
    .culture-card-image {
      width: 100%;
    }
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .culture-card-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .culture-card {
    --clip-path-value: 3.33%;
    --clip-path: polygon(var(--clip-path-value) 0%, 100% 0%, calc(100% - var(--clip-path-value)) 100%, 0% 100%);
    --aspect-ratio: 400 / 260;

    overflow: hidden;
    clip-path: var(--clip-path);
    position: relative;
    color: var(--color-white);
    width: 100%;
    height: auto;
    aspect-ratio: var(--aspect-ratio);
  }

  @media (width <= 767.9999px) {
    .culture-card {
      --clip-path: none;
      --aspect-ratio: 345 / 150;
    }
  }
  .culture-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(7 24 48 / 50%);
  }
  @media (any-hover: hover) {
    .culture-card:hover .culture-card-image {
      transform: scale(1.1);
    }
  }
  .culture-card-titles {
    --vw: 1335;
    --top: 23.08%;
    --left: 15%;
    position: absolute;
    top: var(--top);
    left: var(--left);
    z-index: var(--z-index-normal);
  }

  @media (width <= 767.9999px) {
    .culture-card-titles {
      --top: 50%;
      --left: 5.8%;
      transform: translateY(-50%);
      width: calc(100% - 5.8%);
    }
  }
  .culture-card-titles > .en {
    --font-size: min(calc(20 / var(--vw) * 100vw), 20px);

    font-size: var(--font-size);
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-semibold);
  }

  @media (width <= 767.9999px) {
    .culture-card-titles > .en {
      --font-size: 16px;
    }
  }
  .culture-card-titles > .ja {
    --font-size: min(calc(28 / var(--vw) * 100vw), 28px);

    font-size: var(--font-size);
    font-weight: var(--font-weight-medium);
  }

  @media (width <= 767.9999px) {
    .culture-card-titles > .ja {
      --font-size: 20px;
    }
  }
  .culture-card-titles::after {
    --margin-top: min(calc(36 / var(--vw) * 100vw), 36px);
    --width: min(calc(30 / var(--vw) * 100vw), 30px);
    --height: min(calc(30 / var(--vw) * 100vw), 30px);

    position: absolute;
    content: "";
    display: inline-block;
    width: var(--width);
    height: var(--height);
    margin-top: var(--margin-top);
    background-image: url("/assets/recruit/image/common/icon-arrow-02.svg");
    background-size: contain;
    background-repeat: no-repeat;
  }

  @media (width <= 767.9999px) {
    .culture-card-titles::after {
      --margin-top: 0;
      --width: 30px;
      --height: 30px;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
    }
  }

  .culture-card:focus-visible .culture-card-image {
    transform: scale(1.1);
  }

  .note-section {
    --padding-top: 100px;
    --padding-bottom: 160px;

    padding: var(--padding-top) var(--content-padding) var(--padding-bottom);
    background-color: var(--color-white);
  }

  @media (width <= 767.9999px) {
    .note-section {
      --padding-top: 60px;
      --padding-bottom: 60px;
      overflow: hidden;
    }
  }

  .note-section-inner {
    max-width: var(--content-width);
    margin-inline: auto;
  }
  .note-section-inner > p {
    --margin-top: 40px;
    --text-align: center;

    margin-top: var(--margin-top);
    text-align: var(--text-align);
    font-weight: var(--font-weight-medium);
    line-height: 1.875;
  }

  @media (width <= 767.9999px) {
    .note-section-inner > p {
      --margin-top: 30px;
      --text-align: left;
    }
  }
  .note-title > img {
    margin-inline: auto;
  }
  .note-cards {
    --margin-top: 40px;
    --gap: 30px;
    --grid-template-columns: repeat(3, 1fr);

    display: grid;
    grid-template-columns: var(--grid-template-columns);
    grid-template-rows: repeat(5, auto);
    margin-top: var(--margin-top);
    column-gap: var(--gap);
  }
  @media (width <= 767.9999px) {
    .note-cards {
      --margin-top: 20px;
      --gap: 20px;
      --grid-template-columns: repeat(3, calc(255 / var(--vw) * 100vw));
    }
  }

  .note-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / 6;
    position: relative;
    width: 100%;
  }
  .note-card > h3 {
    --font-size: 22;
    --margin-top: 30px;

    font-size: calc(var(--font-size) * var(--rem));
    margin-top: var(--margin-top);
    font-weight: var(--font-weight-bold);
    line-height: 1.636;
  }

  @media (width <= 767.9999px) {
    .note-card > h3 {
      --font-size: 18;
      --margin-top: 20px;
    }
  }
  .note-card > .note-card-description {
    --margin-top: 15px;
    --line-clamp: 3;

    margin-top: var(--margin-top);
    line-height: 1.875;
    font-weight: var(--font-weight-medium);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-clamp);
    overflow: hidden;
  }

  @media (width <= 767.9999px) {
    .note-card > .note-card-description {
      --margin-top: 20px;
      --line-clamp: 5;
    }
  }
  @media (any-hover: hover) {
    .note-card:hover > .note-card-description {
      text-decoration: underline;
    }
  }
  .note-card > .note-card-date {
    --font-size: 14;
    --margin-top: 20px;
    font-size: calc(var(--font-size) * var(--rem));
    font-family: var(--font-family-en);
    margin-top: var(--margin-top);
    color: var(--color-note);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
  }

  @media (width <= 767.9999px) {
    .note-card > .note-card-date {
      --margin-top: 20px;
    }
  }

  :is(.note-card > .note-card-date)::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("/assets/recruit/image/common/icon-data-01.svg");
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
  }
  .note-card > .note-card-author {
    --margin-top: 30px;
    margin-top: var(--margin-top);
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-medium);
  }

  @media (width <= 767.9999px) {
    .note-card > .note-card-author {
      --margin-top: 20px;
    }
  }
  .note-card > .note-card-author img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border: 1px solid var(--color-border);
  }

  .loop-text-wrapper {
    --width: 2828;
    --margin-top: -40;

    overflow: hidden;
    width: calc(var(--width) / var(--vw) * 100vw);
    margin-top: calc(var(--margin-top) / var(--vw) * 100vw);
    aspect-ratio: 2828 / 287;
    height: auto;
    position: relative;
    line-height: 1;
    display: flex;
    margin-left: calc(-1 * var(--content-padding));
    margin-right: calc(-1 * var(--content-padding));
  }
  .loop-text-wrapper::before {
    content: "";
    mix-blend-mode: multiply;
    width: 100%;
    height: auto;
    display: block;
    white-space: nowrap;
    animation: loop-scroll-seamless 60s linear infinite;
    flex-shrink: 0;
    background-image: url("/assets/recruit/image/top/text-people-01.svg");
    background-repeat: no-repeat;
    background-size: contain;
  }
  .loop-text-wrapper::after {
    content: "";
    mix-blend-mode: multiply;
    width: 100%;
    height: auto;
    display: block;
    white-space: nowrap;
    animation: loop-scroll-seamless 60s linear infinite;
    flex-shrink: 0;
    background-image: url("/assets/recruit/image/top/text-people-01.svg");
    background-repeat: no-repeat;
    background-size: contain;
  }

  @media (width <= 767.9999px) {
    .loop-text-wrapper {
      --width: 1197;
      --margin-top: -10;
    }
  }

  @keyframes loop-scroll-seamless {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  /*
   * ===========================
   * about専用スタイル
   * ===========================
   */
  .about-mv-section {
    --padding-bottom: 236px;
    --background-image: url("/assets/recruit/image/aboutus/bg-about_pc.png");

    color: var(--color-white);
    background-image: var(--background-image);
    background-image: image-set(url("/assets/recruit/image/aboutus/bg-about_pc.webp") type("image/webp"), url("/assets/recruit/image/aboutus/bg-about_pc.png") type("image/png"));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding-bottom: var(--padding-bottom);
  }

  @media (width <= 767.9999px) {
    .about-mv-section {
      --padding-bottom: 100px;
      --background-image: url("/assets/recruit/image/aboutus/bg-about_sp.png");
      background-image: image-set(url("/assets/recruit/image/aboutus/bg-about_sp.webp") type("image/webp"), url("/assets/recruit/image/aboutus/bg-about_sp.png") type("image/png"));
    }
  }

  .about-mv-section > .breadcrumb .breadcrumb-link,
  .about-mv-section > .breadcrumb .breadcrumb-item,
  .about-mv-section > .breadcrumb .breadcrumb-link::after {
    color: var(--color-white);
  }

  .about-mv-inner {
    --grid-template-areas: "title image" "catchphrase image" "text image";
    --padding-top: 135px;

    display: grid;
    grid-template-areas: var(--grid-template-areas);
    padding-inline: var(--content-padding);
    padding-top: var(--padding-top);
    max-width: calc(var(--content-width) + var(--content-padding) * 2);
    margin-inline: auto;
    column-gap: 35px;
  }

  @media (width <= 767.9999px) {
    .about-mv-inner {
      --padding-top: 50px;
      --grid-template-areas: "title" "catchphrase" "text" "image";
    }
  }
  .about-mv-title {
    grid-area: title;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-en);
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: calc(30 * var(--rem));
    line-height: 1.25;
  }
  .about-mv-title::after {
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    background-color: var(--color-white);
  }
  .about-mv-catchphrase {
    --font-size: 80;
    grid-area: catchphrase;
    font-size: min(calc(var(--font-size) * var(--rem)), calc(var(--font-size) / var(--vw) * 100vw));
    line-height: 1.25;
    margin-top: 14px;
    font-weight: var(--font-weight-bold);
  }

  @media (width <= 767.9999px) {
    .about-mv-catchphrase {
      --font-size: 40;
    }
  }
  .about-about-mv-text-wrapper {
    grid-area: text;
  }
  .about-mv-text {
    --font-size: 18;
    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-bold);
    line-height: 2;
    margin-top: 30px;
    max-width: 617px;
  }
  .about-mv-text + .about-mv-text {
    margin-top: 20px;
  }
  @media (width <= 767.9999px) {
    .about-mv-text {
      --font-size: 16;
      margin-top: 20px;
    }
    .about-mv-text + .about-mv-text {
      margin-top: 15px;
    }
  }
  .about-mv-image {
    grid-area: image;
  }
  @media (width <= 767.9999px) {
    .about-mv-image {
      margin-top: 30px;
      margin-inline: auto;
      max-width: 508px;
      width: 100%;
    }
  }
  .about-images {
    --margin-top: -100px;
    --display: flex;

    max-width: calc(var(--content-width) + var(--content-padding) * 2);
    margin-inline: auto;
    padding-inline: var(--content-padding);
    display: var(--display);
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .about-images {
      --margin-top: -50px;
      --display: block;
    }
  }

  .about-image {
    --max-width: 620px;

    aspect-ratio: 620 / 400;
    width: 100%;
    max-width: var(--max-width);
    height: auto;
    overflow: hidden;
    clip-path: polygon(3.22% 0%, 100% 0%, 96.78% 100%, 0% 100%);
    align-self: self-start;
  }
  @media (width <= 767.9999px) {
    .about-image {
      --max-width: min(400px, 90%);
    }
  }
  .about-image:nth-child(2) {
    --margin-top: 210px;
    --margin-left: 40px;
    --max-width: 540px;

    clip-path: polygon(4.259% 0%, 100% 0%, 95.741% 100%, 0% 100%);
    max-width: var(--max-width);
    margin-top: var(--margin-top);
    margin-left: var(--margin-left);
    aspect-ratio: 540 / 348;
  }
  @media (width <= 767.9999px) {
    .about-image:nth-child(2) {
      --max-width: min(400px, 90%);
    }
  }
  @media (width <= 767.9999px) {
    .about-image:nth-child(2) {
      --margin-top: 30px;
      --margin-left: auto;
    }
  }
  .pages-section-title.-aboutus {
    --font-size: min(calc(56 * var(--rem)), calc(56 / var(--vw) * 100vw));
  }
  @media (width <= 767.9999px) {
    .pages-section-title.-aboutus {
      --font-size: calc(30 * var(--rem));
    }
  }
  .pages-section-title.-aboutus::before {
    --font-size: min(calc(200 * var(--rem)), calc(200 / var(--vw) * 100vw));

    font-size: var(--font-size);
    display: block;
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-medium);
    color: var(--color-english-text);
  }
  @media (width <= 767.9999px) {
    .pages-section-title.-aboutus::before {
      --font-size: 80px;
    }
  }

  .product-section {
    --margin-bottom: 130px;
    --margin-top: 84px;

    padding-inline: var(--content-padding);
    max-width: calc(var(--content-width) + var(--content-padding) * 2);
    margin-inline: auto;
    margin-top: var(--margin-top);
    margin-bottom: var(--margin-bottom);
  }

  @media (width <= 767.9999px) {
    .product-section {
      --margin-top: 56px;
      --margin-bottom: 50px;
    }
  }
  :is(.product-section > .pages-section-title)::before {
    --margin-left: calc(var(--content-padding) * -1 + 20px);
    content: "Product";
    margin-left: var(--margin-left);
  }
  @media (width <= 767.9999px) {
    :is(.product-section > .pages-section-title)::before {
      --margin-left: calc(var(--content-padding) * -1);
    }
  }
  .product-text {
    --margin-top: 40px;
    font-size: calc(16 * var(--rem));
    line-height: 2;
    margin-top: var(--margin-top);
    font-weight: var(--font-weight-medium);
  }
  @media (width <= 767.9999px) {
    .product-text {
      --margin-top: 30px;
    }
  }

  .product-image {
    margin-top: 40px;
  }
  .homes-area {
    --grid-template-columns: 570fr 510fr;
    --column-gap: 85px;
    --margin-top: 100px;
    --margin-bottom: 70px;

    display: grid;
    align-items: center;
    column-gap: var(--column-gap);
    grid-template-columns: var(--grid-template-columns);
    margin-top: var(--margin-top);
    margin-bottom: var(--margin-bottom);
  }

  .homes-area + .product-text {
    --margin-top: 70px;
  }
  @media (width <= 767.9999px) {
    .homes-area + .product-text {
      --margin-top: 30px;
    }
  }

  @media (width <= 767.9999px) {
    .homes-area {
      --grid-template-columns: 1fr;
      --column-gap: 0;
      --margin-top: 30px;
      --margin-bottom: 50px;

      row-gap: 50px;
    }

    .homes-area > h4 {
      max-width: 570px;
      margin-inline: auto;
    }
  }
  .homes-card-area {
    --grid-template-columns: 1fr 1fr;
    --margin-top: 40px;
    --gap: 40px;

    margin-top: 40px;
    display: grid;
    grid-template-columns: var(--grid-template-columns);
    gap: var(--gap);
  }

  @media (width <= 767.9999px) {
    .homes-card-area {
      --grid-template-columns: 1fr;
      --gap: 30px;
    }
  }
  .homes-card {
    --padding: 56px 44px 59px;

    display: block;
    border: 1px solid var(--color-border);
    padding: var(--padding);
    position: relative;
  }

  @media (width <= 767.9999px) {
    .homes-card {
      --padding: 30px 20px 50px 20px;
    }
  }

  .homes-card::after {
    --bottom: 20px;

    position: absolute;
    right: 20px;
    bottom: var(--bottom);
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-image: url("/assets/recruit/image/common/icon-arrow-01.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transition: all var(--link-transition-speed) ease;
  }

  @media (width <= 767.9999px) {
    .homes-card::after {
      --bottom: 15px;
    }
  }

  .homes-card > img {
    max-height: 104px;
    width: auto;
  }
  @media (any-hover: hover) {
    .homes-card:hover::after {
      right: 10px;
    }
  }
  .homes-card-title {
    --font-size: 30;
    --margin-top: 24px;

    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-bold);
    line-height: 1.533;
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .homes-card-title {
      --font-size: 22;
      --margin-top: 20px;
    }
  }
  .homes-card-text {
    margin-top: 24px;
    line-height: 2.25;
    font-weight: var(--font-weight-medium);
  }
  .aboutus-service-section {
    --margin-top: 180px;
    --grid-template-columns: 551fr 530fr;
    --column-gap: 67;

    max-width: calc(var(--content-width) + var(--content-padding) * 2);
    padding-inline: var(--content-padding);
    margin-inline: auto;
    margin-top: var(--margin-top);
    display: grid;
    grid-template-columns: var(--grid-template-columns);
    column-gap: min(calc(var(--column-gap) * var(--rem)), calc(var(--column-gap) / var(--vw) * 100vw));
  }

  @media (width <= 767.9999px) {
    .aboutus-service-section {
      --margin-top: 56px;
      --grid-template-columns: 1fr;
    }
  }
  :is(.aboutus-service-section .pages-section-title)::before {
    --margin-left: calc(var(--content-padding) * -1 + 20px);
    content: "Service";
    margin-left: var(--margin-left);
  }
  @media (width <= 767.9999px) {
    :is(.aboutus-service-section .pages-section-title)::before {
      --margin-left: calc(var(--content-padding) * -1);
    }
  }
  .aboutus-service-text {
    --line-height: 2.25;
    --margin-top: 40px;
    --max-width: 480px;

    margin-top: var(--margin-top);
    font-weight: var(--font-weight-medium);
    max-width: var(--max-width);
    line-height: var(--line-height);
  }

  @media (width <= 767.9999px) {
    .aboutus-service-text {
      --line-height: 2;
      --margin-top: 30px;
      max-width: 100%;
    }
  }
  .aboutus-service-image {
    --max-width: 630px;
    --margin-right: calc(var(--content-padding) * -1 + 20px);

    aspect-ratio: 630 / 460;
    max-width: var(--max-width);
    height: auto;
    overflow: hidden;
    clip-path: polygon(3.81% 0%, 100% 0%, 96.19% 100%, 0% 100%);
    align-self: self-start;
    margin-right: var(--margin-right);
  }
  @media (width <= 767.9999px) {
    .aboutus-service-image {
      --max-width: min(630px, 100%);
      --margin-right: 0;

      margin-top: 30px;
      margin-inline: auto;
    }
  }
  .aboutus-randd-section {
    --margin-bottom: 160px;
    --margin-top: 130px;
    --grid-template-columns: 510fr 600fr;
    --column-gap: 110;

    max-width: calc(var(--content-width) + var(--content-padding) * 2);
    padding-inline: var(--content-padding);
    margin-inline: auto;
    margin-top: var(--margin-top);
    margin-bottom: var(--margin-bottom);
    display: grid;
    grid-template-columns: var(--grid-template-columns);
    column-gap: min(calc(var(--column-gap) * var(--rem)), calc(var(--column-gap) / var(--vw) * 100vw));
  }

  @media (width <= 767.9999px) {
    .aboutus-randd-section {
      --margin-top: 56px;
      --margin-bottom: 50px;
      --grid-template-columns: 1fr;
    }
  }

  .aboutus-randd-section .pages-section-title {
    --margin-left: min(120px, calc(120 / var(--vw) * 100vw));

    margin-left: var(--margin-left);
  }
  @media (width <= 767.9999px) {
    .aboutus-randd-section .pages-section-title {
      --margin-left: 0;
    }
  }
  :is(.aboutus-randd-section .pages-section-title)::before {
    --margin-left: max(-120px, calc(120 / var(--vw) * 100vw * -1));
    content: "R&D";
    margin-left: var(--margin-left);
  }
  @media (width <= 767.9999px) {
    :is(.aboutus-randd-section .pages-section-title)::before {
      --margin-left: calc(var(--content-padding) * -1);
    }
  }
  .aboutus-randd-inner {
    --margin-top: 70px;
    --order: 2;

    order: var(--order);
    margin-top: var(--margin-top);
  }
  @media (width <= 767.9999px) {
    .aboutus-randd-inner {
      --order: unset;
      --margin-top: 0;
    }
  }
  .aboutus-randd-text {
    --line-height: 2.25;
    --margin-top: 40px;
    --margin-left: min(120px, calc(120 / var(--vw) * 100vw));
    --max-width: 480px;

    margin-top: var(--margin-top);
    font-weight: var(--font-weight-medium);
    max-width: var(--max-width);
    line-height: var(--line-height);
    margin-left: var(--margin-left);
  }

  @media (width <= 767.9999px) {
    .aboutus-randd-text {
      --line-height: 2;
      --margin-top: 30px;
      --margin-left: 0;
      max-width: 100%;
    }
  }
  .aboutus-randd-image {
    --max-width: 630px;
    --margin-left: calc(var(--content-padding) * -1 + 20px);

    aspect-ratio: 630 / 460;
    max-width: var(--max-width);
    height: auto;
    overflow: hidden;
    clip-path: polygon(3.81% 0%, 100% 0%, 96.19% 100%, 0% 100%);
    align-self: self-start;
    margin-left: var(--margin-left);
  }
  @media (width <= 767.9999px) {
    .aboutus-randd-image {
      --max-width: min(630px, 100%);
      --margin-left: 0;

      margin-top: 30px;
      margin-inline: auto;
    }
  }

  /*
   * ===========================
   * culture専用スタイル
   * ===========================
   */
  .office-section {
    --padding-top: 106px;
    --padding-bottom: 130px;

    padding-inline: var(--content-padding);
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    max-width: calc(var(--content-width) + var(--content-padding) * 2);
    margin-inline: auto;
  }

  @media (width <= 767.9999px) {
    .office-section {
      --padding-top: 30px;
      --padding-bottom: 56px;
    }
  }
  .office-text {
    --margin-top: 40px;
    --line-height: 2.25;

    font-size: calc(16 * var(--rem));
    line-height: var(--line-height);
    margin-top: var(--margin-top);
    font-weight: var(--font-weight-medium);
  }

  @media (width <= 767.9999px) {
    .office-text {
      --margin-top: 30px;
      --line-height: 1.875;
    }
  }
  .modal-gallery {
    --margin-right: 200px;
    --padding: 60px min(calc(85 / var(--vw) * 100vw), 85px);
    --margin-top: 40px;
    --gap: 20px;
    --min-height: 700px;

    display: block;
    width: 100%;
    border: 1px solid var(--color-border);
    padding: var(--padding);
    margin-top: var(--margin-top);
    margin-right: var(--margin-right);
    min-height: var(--min-height);
    gap: var(--gap);
  }
  @media (width <= 767.9999px) {
    .modal-gallery {
      --padding: 30px 15px;
      --margin-top: 30px;
      --margin-right: 0;
      --gap: 0;
      --min-height: auto;
    }
  }
  .modal-gallery-area-wrapper {
      --margin-top: 30px;

      margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .modal-gallery-area-wrapper {
      --margin-top: 20px;
    }
  }
  .modal-gallery-title {
    --font-size: 30;

    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-bold);
    color: var(--color-corporate);
  }

  @media (width <= 767.9999px) {
    .modal-gallery-title {
      --font-size: 24;
    }
  }
  .modal-gallery-address {
    --margin-top: 20px;

    line-height: 1.625;
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .modal-gallery-address {
      --margin-top: 10px;
    }
  }

  /* ギャラリーエリア */
  .modal-gallery-area {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-inline: auto;
  }

  .modal-gallery-area > a {
    aspect-ratio: 960 / 640;
  }

  .modal-gallery-area .gallery-large {
    grid-column: span 2;
    grid-row: span 2;
  }
  .modal-gallery-area .gallery-tall {
    grid-column: span 1;
    grid-row: span 2;
  }

  :is(.modal-gallery-area .gallery-tall) > a {
    aspect-ratio: 164 / 220;
  }

  .modal-gallery-area-02 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    margin-inline: auto;
  }

  .gallery-thumbnail-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 164 / 109;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .gallery-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
  }

  .gallery-tall .gallery-thumbnail-link {
    aspect-ratio: 164 / 220;
  }

  .gallery-large .gallery-thumbnail-link {
    aspect-ratio: 330 / 220;
  }

  .modal-title-area {
    margin-right: 10px;
    text-align: left;
  }

  .modal-note {
    font-size: calc(12 * var(--rem));
    margin-top: 10px;
  }

  .gallery-hidden-link {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
  }

  .growth-section {
    --padding-block: 143px 160px;
    --background-image: url("/assets/recruit/image/culture/bg.png");

    background-image: var(--background-image);
    background-image: image-set(url("/assets/recruit/image/culture/bg.webp") type("image/webp"), url("/assets/recruit/image/culture/bg.png") type("image/png"));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding-block: var(--padding-block);
    padding-inline: var(--content-padding);
    background-color: var(--color-gray);
  }

  @media (width <= 767.9999px) {
    .growth-section {
      --padding-block: 56px;
    }
  }
  .growth-section-inner {
    max-width: var(--content-width);
    margin-inline: auto;
  }
  .growth-section-inner > .pages-section-title {
    color: var(--color-black);
  }

  .growth-description {
    --margin-top: 40px;
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .growth-description {
      --margin-top: 30px;
      --margin-bottom: 60px;
    }
  }

  .growth-grid {
    --grid-template-columns: repeat(2, 1fr);
    --gap: 30px;
    --margin-top: 40px;

    margin-top: var(--margin-top);
    display: grid;
    grid-template-columns: var(--grid-template-columns);
    gap: var(--gap);
  }

  @media (width <= 767.9999px) {
    .growth-grid {
      --grid-template-columns: 1fr;
      --gap: 20px;
      --margin-top: 30px;
    }
  }

  .growth-item {
    --padding: 40px 30px;

    padding: var(--padding);
    background-color: var(--color-white);
  }

  @media (width <= 767.9999px) {
    .growth-item {
      padding: var(--content-padding);
    }
  }
  .growth-item-title .en {
    font-family: var(--font-family-en);
    font-size: calc(12 * var(--rem));
    font-weight: var(--font-weight-bold);
    color: var(--color-corporate);
    display: flex;
    align-items: center;
    line-height: 1;
  }

  :is(.growth-item-title .en)::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-corporate);
    margin-right: 5px;
  }
  .growth-item-title .ja {
    --font-size: 30;
    --margin-top: 25px;

    display: block;
    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-bold);
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .growth-item-title .ja {
      --font-size: 22;
      --margin-top: 5px;
    }
  }
  :is(.growth-item-title .ja) > .small {
    --font-size: 20;
    font-size: calc(var(--font-size) * var(--rem));
  }

  @media (width <= 767.9999px) {
    :is(.growth-item-title .ja) > .small {
      --font-size: 16;
      --margin-top: 10px;
    }
  }
  .growth-item-text {
    --margin-top: 20px;

    margin-top: var(--margin-top);
    line-height: 2;
  }
  @media (width <= 767.9999px) {
    .growth-item-text {
      --margin-top: 10px;
    }
  }

  .faq-section {
    --padding-top: 170px;
    --padding-bottom: 160px;

    padding-inline: var(--content-padding);
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    max-width: calc(var(--content-width) + var(--content-padding) * 2);
    margin-inline: auto;
  }

  @media (width <= 767.9999px) {
    .faq-section {
      --padding-top: 56px;
      --padding-bottom: 56px;
    }
  }

  .faq-description {
    --margin-top: 40px;

    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .faq-description {
      --margin-top: 20px;
    }
  }

  .faq-list {
    --margin-top: 40px;

    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .faq-list {
      --margin-top: 20px;
    }
  }

  .faq-question {
    --font-size: 18;
    --padding: 30px 100px 30px 50px;
    --gap: 20px;

    background-color: var(--color-gray);
    padding: var(--padding);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: calc(var(--font-size) * var(--rem));
    gap: var(--gap);
    font-weight: var(--font-weight-bold);
    position: relative;
    list-style: none;
    transition: background-color var(--link-transition-speed) ease;
  }

  @media (width <= 767.9999px) {
    .faq-question {
      --font-size: 16;
      --padding: 15px 50px 15px 15px;
      --gap: 15px;
    }
  }

  .faq-question::before {
    --right: 50px;
    --width: 25px;

    content: "";
    width: var(--width);
    height: 1px;
    background-color: var(--color-text);
    position: absolute;
    right: var(--right);
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }

  @media (width <= 767.9999px) {
    .faq-question::before {
      --right: 20px;
      --width: 20px;
    }
  }

  @media (any-hover: hover) {
    .faq-question:hover {
      background-color: var(--color-border);
    }
  }

  .faq-question::after {
    --right: 50px;
    --width: 25px;

    content: "";
    width: var(--width);
    height: 1px;
    background-color: var(--color-text);
    position: absolute;
    right: var(--right);
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.3s ease;
  }

  @media (width <= 767.9999px) {
    .faq-question::after {
      --right: 20px;
      --width: 20px;
    }
  }

  .faq-question::-webkit-details-marker {
    display: none;
  }

  .faq-question > span {
    --width: 59px;
    --height: 59px;
    --font-size: 26;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--width);
    height: var(--height);
    background-color: var(--color-corporate);
    font-size: calc(var(--font-size) * var(--rem));
    color: var(--color-white);
    border-radius: 50%;
    font-family: var(--font-family-en);
    font-weight: 600;
    transition: all 0.3s ease;
    flex-shrink: 0;
  }
  @media (width <= 767.9999px) {
    .faq-question > span {
      --width: 45px;
      --height: 45px;
      --font-size: 20;
    }
  }
  .faq-item {
    margin-top: 20px;
    transition: box-shadow 0.3s ease;
  }
  :is(.faq-item[open] .faq-question)::after {
    transform: translateY(-50%) rotate(0deg);
  }

  .faq-answer {
    --padding: 20px 100px 30px 50px;
    --gap: 20px;

    padding: var(--padding);
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    line-height: 1.625;
  }

  @media (width <= 767.9999px) {
    .faq-answer {
      --padding: 15px;
      --gap: 15px;
    }
  }

  .faq-answer > .faq-answer-label {
    --width: 59px;
    --height: 59px;
    --font-size: 26;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--width);
    height: var(--height);
    background-color: var(--color-label);
    font-size: calc(var(--font-size) * var(--rem));
    color: var(--color-white);
    border-radius: 50%;
    font-family: var(--font-family-en);
    font-weight: 600;
    transition: all 0.3s ease;
    flex-shrink: 0;
  }

  @media (width <= 767.9999px) {
    .faq-answer > .faq-answer-label {
      --width: 45px;
      --height: 45px;
      --font-size: 20;
    }
  }
  .faq-answer-text {
    --margin-top: 1em;
    margin-top: var(--margin-top);
  }
  @media (width <= 767.9999px) {
    .faq-answer-text {
      --margin-top: 0.5em;
    }
  }
  .faq-item[open] .faq-answer {
    animation: fade-in 0.9s ease;
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /*
   * ===========================
   * entry専用スタイル
   * ===========================
   */
  .recruitment-type-section {
    --padding-top: 115px;
    --padding-bottom: 160px;

    padding-inline: var(--content-padding);
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    max-width: calc(var(--content-width) + var(--content-padding) * 2);
    margin-inline: auto;
  }

  @media (width <= 767.9999px) {
    .recruitment-type-section {
      --padding-top: 30px;
      --padding-bottom: 56px;
    }
  }
  .selection-flow-section {
    --padding-top: 150px;
    --padding-bottom: 160px;

    padding-inline: var(--content-padding);
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    background-color: var(--color-gray);
  }

  @media (width <= 767.9999px) {
    .selection-flow-section {
      --padding-top: 56px;
      --padding-bottom: 56px;
    }
  }
  .selection-flow-section-text {
    --margin-top: 40px;
    margin-top: var(--margin-top);
    font-weight: var(--font-weight-medium);
  }
  @media (width <= 767.9999px) {
    .selection-flow-section-text {
      --margin-top: 30px;
    }
  }
  .selection-flow-section-inner {
    max-width: var(--content-width);
    margin-inline: auto;
  }
  .new-grad-job {
    --grid-template-columns: repeat(3, 1fr);
    --margin-top: 40px;
    --gap: 30px;

    grid-template-columns: var(--grid-template-columns);
    display: grid;
    gap: var(--gap);
    margin-top: var(--margin-top);
  }
  @media (width <= 1100.9999px) {
    .new-grad-job {
      --grid-template-columns: 1fr;
      --margin-top: 30px;
      --gap: 15px;
    }
  }
  .new-grad-job a {
    --padding: 83px 80px 83px 30px;
    --font-size: 24;

    padding: var(--padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-bold);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    gap: 10px;
    position: relative;
  }
  @media (width <= 1100.9999px) {
    .new-grad-job a {
      --padding: 43px 80px 43px 30px;
    }
  }
  @media (width <= 767.9999px) {
    .new-grad-job a {
      --padding: 30px 20px;
      --font-size: 20;
    }
  }
  :is(.new-grad-job a)::after {
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    background-image: url("/assets/recruit/image/common/icon-arrow-01.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transition: right var(--link-transition-speed) ease;
  }
  @media (any-hover: hover) {
    :is(.new-grad-job a):hover {
      text-decoration: none;
    }
    :is(.new-grad-job a):hover::after {
      right: 20px;
    }
  }
  .new-grad-details-list {
    margin-top: 20px;
  }
  .description-box {
    --margin-top: 40px;
    --padding: 50px;

    margin-top: var(--margin-top);
    background-color: var(--color-white);
    padding: var(--padding);
  }

  @media (width <= 767.9999px) {
    .description-box {
      --margin-top: 30px;
      --padding: 20px;
    }
  }
  .description-box > .title {
    font-size: calc(20 * var(--rem));
    font-weight: var(--font-weight-bold);
  }
  .description-box > .text {
    margin-top: 5px;
    font-weight: var(--font-weight-medium);
  }
  .description-box > .new-grad-details-list {
    margin-top: 24px;
  }
  .description-note {
    margin-top: 27px;
    line-height: 2.25;
    font-weight: var(--font-weight-medium);
  }
  .selection-flow-list {
    --margin-top: 80px;

    margin-top: var(--margin-top);
    display: flex;
    gap: 20px;
    position: relative;
  }
  @media (width <= 1024.9999px) {
    .selection-flow-list {
      flex-direction: column;
    }
  }
  .selection-flow-list::before {
    --display: block;

    content: "";
    position: absolute;
    display: var(--display);
    width: calc(100% - 30px);
    height: 1px;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-border);
    margin-bottom: 20px;
    z-index: var(--z-index-normal);
  }
  @media (width <= 1024.9999px) {
    .selection-flow-list::before {
      --display: none;
    }
  }
  .selection-flow-section-text + .selection-flow-list {
    --margin-top: 40px;
  }
  .selection-flow-item {
    --padding: 48px 16px 30px;

    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    padding: var(--padding);
    position: relative;
    width: 100%;
  }
  @media (width <= 1024.9999px) {
    .selection-flow-item {
      --padding: 15px 15px 15px 35px;
    }
  }
  .selection-flow-item::before {
    content: "";
    position: absolute;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    top: calc(25px - 4.5px);
    left: calc(16px - 4.5px);
    background-color: var(--color-corporate);
    margin-bottom: 20px;
    z-index: var(--z-index-normal-2);
  }
  @media (width <= 1024.9999px) {
    .selection-flow-item:not(:last-child)::after {
      content: "";
      position: absolute;
      display: block;
      width: 1px;
      height: calc(100% + 20px);
      top: 25px;
      left: 16px;
      background-color: var(--color-border);
      margin-bottom: 20px;
      z-index: var(--z-index-normal);
    }
  }
  .selection-flow-item > .step {
    --font-size: 16;

    display: block;
    font-size: calc(var(--font-size) * var(--rem));
    color: var(--color-corporate);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1em;
    font-family: var(--font-family-en);
  }
  @media (width <= 767.9999px) {
    .selection-flow-item > .step {
      --font-size: 12;
    }
  }
  .selection-flow-item > .step-number {
    --font-size: 40;

    display: block;
    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-bold);
    color: var(--color-corporate);
    line-height: 1;
    font-family: var(--font-family-en);
  }
  @media (width <= 767.9999px) {
    .selection-flow-item > .step-number {
      --font-size: 30;
    }
  }
  .selection-flow-item > .title {
    font-size: calc(20 * var(--rem));
    font-weight: var(--font-weight-bold);
    margin-top: 13px;
  }
  .selection-flow-item > .text {
    margin-top: 10px;
    line-height: 1.875;
  }
  .selection-flow-item > .text > a {
    color: var(--color-corporate);
  }
  .selection-flow-item > .sub-title {
    display: inline-block;
    font-weight: var(--font-weight-medium);
    background-color: var(--color-gray);
    padding: 3px 8px 5px;
    margin-top: 25px;
    border: 1px solid var(--color-border);
  }
  .selection-flow-item > .application-list {
    margin-top: 14px;
    line-height: 1.875;
  }
  .selection-flow-item > .note {
    margin-top: 14px;
    font-size: calc(14 * var(--rem));
  }
  .button-recruitment-form {
    --font-size: 30;
    --width: 800px;
    --height: 120px;
    --border-radius: 60px;
    --margin-top: 80px;
    --box-shadow: 0 10px 15px rgb(7 24 48 / 15%);

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-corporate);
    color: var(--color-white);
    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-bold);
    width: 100%;
    max-width: var(--width);
    height: var(--height);
    border-radius: var(--border-radius);
    position: relative;
    margin-inline: auto;
    padding: 10px 20px;
    margin-top: var(--margin-top);
    box-shadow: var(--box-shadow);
    transition: box-shadow var(--button-transition-speed) ease;
  }
  @media (width <= 767.9999px) {
    .button-recruitment-form {
      --margin-top: 56px;
      --font-size: 18;
      --height: 80px;

      margin-inline: auto;
    }
  }

  .button-recruitment-form.-intern {
    text-align: center;
    flex-wrap: wrap;
    padding-inline: 56px;
    height: auto;
    min-height: var(--height);
  }

  @media (max-width: 767.9999px) {
    .button-recruitment-form.-intern {
      font-size: calc(18 * var(--rem));
      width: calc(100% - var(--content-padding) * 2);
    }
  }
  @media (max-width: 430.9999px) {
    .button-recruitment-form.-intern {
      padding-left: 20px;
    }
  }

  .button-recruitment-form:focus-visible {
    outline: 3px solid var(--color-text);
  }
  @media (any-hover: hover) {
    .button-recruitment-form:hover {
      --box-shadow: none;
    }
  }
  .button-recruitment-form::after {
    --right: 50px;

    position: absolute;
    top: 50%;
    right: var(--right);
    transform: translateY(-50%);
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-image: url("/assets/recruit/image/common/icon-arrow-02.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transition: right var(--button-transition-speed) ease;
  }
  @media (any-hover: hover) {
    .button-recruitment-form:hover::after {
      --right: 40px;
    }
  }
  @media (width <= 767.9999px) {
    .button-recruitment-form::after {
      --right: 20px;
    }
  }
  @media (any-hover: hover) and (width <= 767.9999px) {
    .button-recruitment-form:hover::after {
      --right: 10px;
    }
  }
  .new-grad-details-mv-title {
    --font-size: 40;
    --padding-block: 51px;
    --padding-inline: 30px;

    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-bold);
    background-color: var(--color-gray);
    padding: var(--padding-block) var(--padding-inline);
    background-image: url("/assets/recruit/image/new-grad/icon-bg.svg");
    background-repeat: no-repeat;
    background-position: left 50px center;
    background-size: contain;
    background-blend-mode: multiply;
    color: var(--color-black);
  }
  @media (width <= 767.9999px) {
    .new-grad-details-mv-title {
      --font-size: 26;
      --padding-block: 30px;
      --padding-inline: 15px;
    }
  }
  .new-grad-details-section {
    --padding-top: 78px;
    --padding-bottom: 130px;

    padding-inline: var(--content-padding);
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    max-width: calc(997px + var(--content-padding) * 2);
    margin-inline: auto;
  }
  @media (width <= 767.9999px) {
    .new-grad-details-section {
      --padding-top: 30px;
      --padding-bottom: 56px;
    }
  }
  .new-grad-details-title {
    --font-size: 56;
    --padding-left: 56px;

    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-bold);
    position: relative;
    padding-left: var(--padding-left);
    line-height: 1.446;
  }
  @media (width <= 767.9999px) {
    .new-grad-details-title {
      --font-size: 30;
      --padding-left: 41px;
    }
  }
  .new-grad-details-title::before {
    --height: 81px;

    content: "";
    display: block;
    background-image: url("/assets/recruit/image/new-grad/icon-title.svg");
    width: 31px;
    height: var(--height);
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    left: 0;
  }

  @media (width <= 767.9999px) {
    .new-grad-details-title::before {
      --height: 43px;
    }
  }
  .new-grad-details-description {
    margin-top: 25px;
  }
  .new-grad-details-contents {
    --margin-top: 60px;

    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .new-grad-details-contents {
      --margin-top: 40px;
    }
  }
  .new-grad-details-contents + .new-grad-details-contents {
    --margin-top: 70px;

    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .new-grad-details-contents + .new-grad-details-contents {
      --margin-top: 40px;
    }
  }
  .new-grad-details-sub-title {
    font-size: calc(26 * var(--rem));
    font-weight: var(--font-weight-bold);
  }
  .new-grad-details-item {
    --grid-template-columns: 200px 1fr;

    grid-template-columns: var(--grid-template-columns);
    display: grid;
    border-top: 1px solid var(--color-border);
  }
  @media (max-width: 767.9999px) {
    .new-grad-details-item {
      --grid-template-columns: 1fr;
    }
  }
  .new-grad-details-item:last-child {
    border-bottom: 1px solid var(--color-border);
  }
  .new-grad-details-item > dt {
    --padding: 38px 40px;

    padding: var(--padding);
    background-color: var(--color-gray);
    font-weight: var(--font-weight-bold);
  }
  @media (max-width: 767.9999px) {
    .new-grad-details-item > dt {
      --padding: 13px 20px;
    }
  }
  .new-grad-details-item > dd {
    --padding: 38px 40px;

    padding: var(--padding);
    line-height: 1.875;
  }

  @media (max-width: 767.9999px) {
    .new-grad-details-item > dd {
      padding: 13px 20px;
    }
  }
  .map-link {
    color: var(--color-corporate);
    border: 1px solid var(--color-corporate);
    border-radius: 16px;
    padding-inline: 14px;
    display: inline-flex;
    margin-top: 7px;
    align-items: center;
    font-family: var(--font-family-en);
    transition: all var(--link-transition-speed) ease;
  }
  .map-link::before {
    width: 14px;
    height: 18px;
    margin-right: 3px;
    display: inline-block;
    content: "";
    mask-image: url("/assets/recruit/image/new-grad/icon-location-dot.svg");
    background-color: var(--color-corporate);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: contain;
    transition: all var(--link-transition-speed) ease;
  }
  @media (any-hover: hover) {
    .map-link:hover {
      color: var(--color-white);
      background-color: var(--color-corporate);
    }
    .map-link:hover::before {
      background-color: var(--color-white);
    }
  }
  .numbered-list {
    list-style: decimal;
    padding-left: 1.5em;
  }
  .contact-section {
    --margin-top: 90px;
    --padding: 50px;

    border: 1px solid var(--color-border);
    margin-top: var(--margin-top);
    padding: var(--padding);
  }

  @media (width <= 767.9999px) {
    .contact-section {
      --margin-top: 56px;
      --padding: 20px;
    }
  }
  .contact-list {
    --margin-top: 40px;

    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .contact-list {
      --margin-top: 20px;
    }
  }
  .contact-item {
    --grid-template-columns: 100px 1fr;

    display: grid;
    grid-template-columns: var(--grid-template-columns);
  }
  @media (width <= 767.9999px) {
    .contact-item {
      --grid-template-columns: 1fr;
    }
  }
  .contact-item:not(:first-child) {
    --margin-top: 5px;

    margin-top: var(--margin-top);
  }
  @media (width <= 767.9999px) {
    .contact-item:not(:first-child) {
      --margin-top: 10px;
    }
  }
  .contact-item > dt {
    background-color: var(--color-corporate-dark);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    padding: 8px 22px;
    align-self: flex-start;
  }
  .contact-item > dd {
    --padding: 8px 20px;
    padding: var(--padding);
  }
  @media (width <= 767.9999px) {
    .contact-item > dd {
      --padding: 8px 0;
    }
  }
  .salary-item {
    display: flex;
  }
  .salary-item > dt {
    margin-right: 3em;
  }
  .pages-section-title.-new-grad-details {
    color: var(--color-black);
    font-size: calc(26 * var(--rem));
  }

  .pages-section-title.-new-grad-details::after {
    --margin-top: 30px;

    margin-top: var(--margin-top);
  }

  @media (max-width: 767.9999px) {
    .pages-section-title.-new-grad-details::after {
      --margin-top: 20px;
    }
  }
  .link-mail {
    color: inherit;
    text-decoration: underline;
  }
  @media (any-hover: hover) {
    .link-mail:hover {
      color: var(--color-corporate);
    }
  }
  :is(.new-grad-details-item .list-disc) > li:not(:first-child) {
    margin-top: 10px;
  }
  .new-grad-details-item > dd > dl .list-disc {
    margin-top: 10px;
  }

  .list-disc > li {
    position: relative;
    padding-left: 1em;
  }

  :is(.list-disc > li)::before {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: "・";
  }
  .career-job {
    margin-top: 28px;
  }

  .career-job > li + li {
    margin-top: 16px;
  }

  .career-job > li > a {
    color: var(--color-text);
    position: relative;
    padding-left: 14px;
    font-weight: var(--font-weight-bold);
  }

  :is(.career-job > li > a)::before,
  :is(.career-job > li > a)::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 8px;
    height: 2px;
    background-color: var(--color-corporate);
    transform-origin: calc(100% - 1px) 50%;
  }

  :is(.career-job > li > a)::before {
    transform: rotate(42deg);
  }

  :is(.career-job > li > a)::after {
    transform: rotate(-42deg);
  }

  /*
   * ===========================
   * messageページ専用スタイル
   * ===========================
   */
  .message-page-article {
    --padding-top: 95px;
    --padding-bottom: 74px;
    --background-image: url("/assets/recruit/image/message/bg-message.png");

    padding: var(--padding-top) var(--content-padding) var(--padding-bottom);
    background-image: var(--background-image);

    background-image: image-set(url("/assets/recruit/image/message/bg-message.webp") type("image/webp"), url("/assets/recruit/image/message/bg-message.png") type("image/png"));
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
  }
  @media (width <= 1100.9999px) {
    .message-page-article {
      --padding-top: 50px;
      --padding-bottom: 56px;
    }
  }
  .message-page-section {
    --grid-template-columns: 1fr 1fr;
    --display: grid;

    display: var(--display);
    grid-template-columns: var(--grid-template-columns);
    max-width: var(--content-width);
    margin-inline: auto;
  }
  @media (width <= 1100.9999px) {
    .message-page-section {
      --grid-template-columns: 1fr;
      --display: block;
    }
  }

  .message-page-section > div:nth-child(1) {
    --margin-bottom: 158px;

    order: 1;
    margin-bottom: var(--margin-bottom);
  }
  @media (width <= 1100.9999px) {
    .message-page-section > div:nth-child(1) {
      --margin-bottom: 20px;
    }
  }

  .message-page-section > div:nth-child(3) {
    --margin-bottom: 97px;
    --margin-left: calc(58 / var(--vw-tab) * 100vw);

    order: 2;
    margin-left: var(--margin-left);
    margin-bottom: var(--margin-bottom);
  }
  @media (width <= 1100.9999px) {
    .message-page-section > div:nth-child(3) {
      --margin-left: 0;
      --margin-bottom: 0;
    }
  }

  .message-page-section > div:nth-child(4) {
    --margin-right: calc(81 / var(--vw-tab) * 100vw);
    --margin-top: -111px;

    order: 3;
    margin-right: var(--margin-right);
    margin-top: var(--margin-top);
  }
  @media (width <= 1100.9999px) {
    .message-page-section > div:nth-child(4) {
      --margin-right: 0;
      --margin-top: 24px;
    }
  }

  .message-page-section > div:nth-child(2) {
    --margin-bottom: 158px;

    order: 4;
    margin-bottom: var(--margin-bottom);
  }
  @media (width <= 1100.9999px) {
    .message-page-section > div:nth-child(2) {
      --margin-top: 0;
      --margin-bottom: 40px;
    }
  }

  .message-page-section > div:nth-child(5) {
    --margin-right: calc(var(--content-padding) * -1);
    --margin-top: -88px;

    order: 5;
    grid-column: 2 / 3;
    margin-left: auto;
    margin-top: var(--margin-top);
    margin-right: var(--margin-right);
  }
  @media (width <= 1100.9999px) {
    .message-page-section > div:nth-child(5) {
      --margin-right: 12px;
      --margin-top: -18px;
    }
  }
  .message-page-image {
    aspect-ratio: var(--aspect-ratio);
    width: calc(var(--width) / var(--vw-tab) * 100vw);
    height: auto;
    overflow: hidden;
    position: relative;
    clip-path: polygon(var(--clip-path) 0%, 100% 0%, var(--clip-path-2) 100%, 0% 100%);
  }
  .message-page-image.-large {
    --width: 480;
    --clip-path: 3.54%;
    --clip-path-2: 96.46%;
    --aspect-ratio: 480 / 340;
  }
  @media (width <= 1100.9999px) {
    .message-page-image.-large {
      --width: 200;
    }
  }
  .message-page-image.-small {
    --width: 250;
    --clip-path: 3.6%;
    --clip-path-2: 96.4%;
    --aspect-ratio: 250 / 175;
  }
  @media (width <= 1100.9999px) {
    .message-page-image.-small {
      --width: 148;
    }
  }
  .message-page-section > div:nth-child(3) > .message-page-image:nth-child(1) {
    --margin-right: calc(var(--content-padding) * -1);

    margin-left: auto;
    margin-right: var(--margin-right);
    z-index: var(--z-index-base-2);
  }
  @media (width <= 1100.9999px) {
    .message-page-section > div:nth-child(3) > .message-page-image:nth-child(1) {
      --margin-right: 0;
    }
  }
  .message-page-section > div:nth-child(3) > .message-page-image:nth-child(2) {
    --margin-top: -30px;

    margin-top: var(--margin-top);
  }
  @media (width <= 1100.9999px) {
    .message-page-section > div:nth-child(3) > .message-page-image:nth-child(2) {
      --margin-top: -55px;
    }
  }
  .message-page-section > div:nth-child(3) > .message-page-image:nth-child(3) {
    --margin-top: -25px;
    --margin-right: calc((65 / var(--vw-tab) * 100vw) * -1);

    margin-left: auto;
    margin-right: var(--margin-right);
    margin-top: var(--margin-top);
  }
  @media (width <= 1100.9999px) {
    .message-page-section > div:nth-child(3) > .message-page-image:nth-child(3) {
      --margin-top: -46px;
      --margin-right: 25px;
    }
  }
  .message-page-section > div:nth-child(4) > .message-page-image:nth-child(1) {
    --margin-left: calc(var(--content-padding) * -1);

    margin-right: auto;
    margin-left: var(--margin-left);
  }
  @media (width <= 1100.9999px) {
    .message-page-section > div:nth-child(4) > .message-page-image:nth-child(1) {
      --margin-left: 0;
    }
  }
  .message-page-section > div:nth-child(4) > .message-page-image:nth-child(2) {
    --margin-top: -40px;

    margin-left: auto;
    margin-top: var(--margin-top);
  }
  @media (width <= 1100.9999px) {
    .message-page-section > div:nth-child(4) > .message-page-image:nth-child(2) {
      --margin-top: -33px;
    }
  }
  .message-page-section > div:nth-child(4) > .message-page-image:nth-child(3) {
    --margin-top: -30px;
    --margin-left: calc(var(--content-padding) * -1);

    margin-right: auto;
    margin-left: var(--margin-left);
    margin-top: var(--margin-top);
  }
  @media (width <= 1100.9999px) {
    .message-page-section > div:nth-child(4) > .message-page-image:nth-child(3) {
      --margin-top: -35px;
      --margin-left: 22px;
    }
  }
  .message-mv-title {
    --font-size: 30;

    font-family: var(--font-family-en);
    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-semibold);
    color: var(--color-corporate);
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .message-mv-title::after {
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    background-color: var(--color-corporate);
  }
  .message-mv-catchphrase {
    --font-size: min(calc(48 * var(--rem)), calc(48 / 950 * 100vw));
    --margin-top: 60px;
    --margin-bottom: 46px;

    font-size: var(--font-size);
    font-weight: var(--font-weight-bold);
    line-height: 1.667;
    margin-top: var(--margin-top);
    margin-bottom: var(--margin-bottom);
  }
  @media (width <= 1100.9999px) {
    .message-mv-catchphrase {
      --margin-top: 20px;
      --margin-bottom: 20px;
      --font-size: calc(30 * var(--rem));
    }
  }
  .message-page-content:first-child {
    --margin-top: 50px;

    margin-top: var(--margin-top);
  }
  @media (width <= 1100.9999px) {
    .message-page-content:first-child {
      --margin-top: 0;
    }
  }
  .message-text {
    font-weight: var(--font-weight-medium);
    line-height: 2.25;
  }
  .message-text:not(:first-child) {
    --margin-top: 20px;

    margin-top: var(--margin-top);
  }
  .message-list {
    --margin-top: 24px;

    margin-top: var(--margin-top);
  }
  .message-list > li {
    font-weight: var(--font-weight-medium);
    line-height: 2.25;
  }
  .message-author {
    --margin-top: 44px;
    --text-align: right;

    margin-top: var(--margin-top);
    font-style: normal;
    text-align: var(--text-align);
  }
  @media (width <= 1100.9999px) {
    .message-author {
      --margin-top: 20px;
      --text-align: left;
    }
  }

  /*
   * ===========================
   * peopleページ専用スタイル
   * ===========================
   */
  .people-page-content {
    --margin-top: 134px;

    padding-inline: var(--content-padding);
    margin-top: var(--margin-top);
  }
  @media (width <= 767.9999px) {
    .people-page-content {
      --margin-top: 56px;
    }
  }
  .people-page-article {
    --padding-block: 100px;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-block: var(--padding-block);
    border-top: 1px solid var(--color-border);
  }
  @media (width <= 767.9999px) {
    .people-page-article {
      --padding-block: 40px;
    }
  }

  .people-page-link {
    --grid-template-columns: 560fr 590fr;

    display: grid;
    column-gap: 50px;
    grid-template-columns: var(--grid-template-columns);
    position: relative;
  }
  @media (width <= 767.9999px) {
    .people-page-link {
      --grid-template-columns: 1fr;
      row-gap: 40px;
    }
  }
  .people-page-link::after {
    position: absolute;
    right: 0;
    bottom: 0;

    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url("/assets/recruit/image/common/icon-arrow-01.svg");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
    transition: right var(--button-transition-speed) ease;
  }

  .people-page-image-wrapper {
    filter: drop-shadow(20px 20px 20px rgb(7 24 48 / 20%));
    transition: filter var(--button-transition-speed) ease;
    margin-inline: auto;
    transform: translateZ(0);
  }
  @media (any-hover: hover) {
    .people-page-link:hover > .people-page-image-wrapper {
      filter: none;
    }
    .people-page-link:hover::after {
      right: -20px;
    }

    @media (width <= 767.9999px) {
      .people-page-link:hover::after {
        right: 0;
      }
    }
  }

  .people-page-image {
    --max-width: 560px;
    aspect-ratio: 560 / 390;
    max-width: var(--max-width);
    height: auto;
    overflow: hidden;
    clip-path: polygon(3.57% 0%, 100% 0%, 96.43% 100%, 0% 100%);
  }
  .people-page-image > img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .people-page-number {
    --font-size: 20;
    --width: 102px;

    width: var(--width);
    height: auto;
    aspect-ratio: 102 / 36;
    background-color: var(--color-label);
    color: var(--color-white);
    font-style: italic;
    font-size: calc(var(--font-size) * var(--rem));
    font-family: var(--font-family-en);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--font-weight-medium);
    clip-path: polygon(1.96% 0%, 100% 0%, 98.04% 100%, 0% 100%);
  }
  @media (width <= 767.9999px) {
    .people-page-number {
      --font-size: 16;
      --width: 90px;
    }
  }

  .people-page-title {
    --font-size: 32;
    --margin-top: 24px;

    font-size: calc(var(--font-size) * var(--rem));
    line-height: 1.438;
    font-weight: var(--font-weight-bold);
    margin-top: var(--margin-top);
  }
  @media (width <= 767.9999px) {
    .people-page-title {
      --font-size: 23;
      --margin-top: 15px;
    }
  }

  .people-page-role {
    --font-size: 22;
    --margin-top: 32px;

    font-size: calc(var(--font-size) * var(--rem));
    line-height: 1.182;
    font-weight: var(--font-weight-medium);
    margin-top: var(--margin-top);
  }
  @media (width <= 767.9999px) {
    .people-page-role {
      --font-size: 20;
      --margin-top: 15px;
    }
  }

  .people-page-name {
    --font-size: 20;

    font-size: calc(var(--font-size) * var(--rem));
    font-weight: var(--font-weight-medium);
    margin-top: 9px;
  }
  @media (width <= 767.9999px) {
    .people-page-name {
      --font-size: 18;
    }
  }

  .people-page-join,
  .people-page-edu {
    font-weight: var(--font-weight-medium);
  }

  .people-page-lang {
    --margin-top: 32px;
    --padding-top: 20px;
    --display: flex;

    margin-top: var(--margin-top);
    border-top: 1px solid var(--color-border);
    padding-top: var(--padding-top);
    display: var(--display);
    align-items: flex-start;
    max-width: 400px;
    margin-right: 50px;
  }
  @media (width <= 767.9999px) {
    .people-page-lang {
      --margin-top: 15px;
      --padding-top: 15px;
      --display: block;
    }
  }

  .people-page-lang > dt {
    flex-shrink: 0;
    margin-right: 20px;
    position: relative;
    padding-left: 9px;
  }
  :is(.people-page-lang > dt)::before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background-color: var(--color-corporate);
    margin-right: 5px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .people-mv {
    --padding-inline: min(calc(80 / var(--vw) * 100vw), 80px);
    --background-size: cover;
    --background-position: center top;
    --margin-bottom: 45px;

    background-image: url("/assets/recruit/image/people/common/bg.png");

    background-image: image-set(url("/assets/recruit/image/people/common/bg.webp") type("image/webp"), url("/assets/recruit/image/people/common/bg.png") type("image/png"));
    background-repeat: no-repeat;
    background-size: var(--background-size);
    background-position: var(--background-position);
    position: relative;
    padding-inline: var(--padding-inline);
    margin-bottom: var(--margin-bottom);
  }
  @media (width <= 767.9999px) {
    .people-mv {
      --padding-inline: var(--content-padding);
      --background-position: center calc(247 / var(--vw) * 100vw);
      --background-size: contain;
      --margin-bottom: 0;
    }
  }
  .people-mv-image {
    --width: calc(910 / var(--vw) * 100vw);
    --margin-right: calc(min(calc(80 / var(--vw) * 100vw), 80px) * -1);
    --margin-left: auto;
    --clip-path: polygon(3.29% 0%, 100% 0%, 100% 100%, 0% 100%);

    aspect-ratio: 910 / 600;
    width: var(--width);
    height: auto;
    overflow: hidden;
    clip-path: var(--clip-path);
    margin-right: var(--margin-right);
    margin-left: var(--margin-left);
  }

  @media (width <= 767.9999px) {
    .people-mv-image {
      --width: calc(100% + var(--content-padding) * 2);
      --margin-right: calc(var(--content-padding) * -1);
      --margin-left: calc(var(--content-padding) * -1);
      --clip-path: unset;
    }
  }
  .people-mv-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .people-mv-title {
    --position: absolute;

    position: var(--position);
    z-index: var(--z-index-normal);
    left: min(calc(80 / var(--vw) * 100vw), 80px);
    top: calc(99 / var(--vw) * 100vw);
  }

  @media (width <= 767.9999px) {
    .people-mv-title {
      --position: static;

      margin-top: 23px;
    }
  }
  .people-mv-title > .interview {
    --font-size: max(calc(16 * var(--rem)), calc(16 / var(--vw) * 100vw));

    font-family: var(--font-family-en);
    font-size: var(--font-size);
    font-weight: var(--font-weight-medium);
    color: var(--color-corporate);
    display: block;
  }

  @media (width <= 767.9999px) {
    .people-mv-title > .interview {
      --font-size: calc(16 * var(--rem));
    }
  }
  :is(.people-mv-title > .lead) > span {
    --font-size: calc(40 / var(--vw) * 100vw);
    --background-color: var(--color-corporate);
    --padding-inline: calc(20 / var(--vw) * 100vw);
    --margin-top: calc(15 / var(--vw) * 100vw);

    color: var(--color-white);
    font-size: var(--font-size);
    font-weight: var(--font-weight-bold);
    background-color: var(--background-color);
    line-height: 2;
    display: inline-block;
    padding-inline: var(--padding-inline);
    clip-path: polygon(0.57% 0%, 100% 0%, 99.43% 100%, 0% 100%);
    margin-top: var(--margin-top);
  }
  @media (width <= 767.9999px) {
    :is(.people-mv-title > .lead) > span {
      --font-size: calc(18 * var(--rem));
      --padding-inline: 10px;
      --margin-top: 10px;
    }
  }
  :is(:is(.people-mv-title > .lead) > span) ~ span {
    --margin-top: calc(10 / var(--vw) * 100vw);
    margin-top: var(--margin-top);
  }
  @media (width <= 767.9999px) {
    :is(:is(.people-mv-title > .lead) > span) ~ span {
      --margin-top: 5px;
    }
  }
  .people-mv-box {
    --bottom: -73px;
    --position: absolute;
    --padding-top: calc(22 / var(--vw) * 100vw);
    --padding-left: calc(24 / var(--vw) * 100vw);
    --padding-bottom: calc(24 / var(--vw) * 100vw);

    border: 1px solid var(--color-label);
    background-color: var(--color-white);
    max-width: max(calc(440 / var(--vw) * 100vw), 300px);
    width: 100%;
    padding-top: var(--padding-top);
    padding-left: var(--padding-left);
    padding-bottom: var(--padding-bottom);
    position: var(--position);
    bottom: var(--bottom);
  }

  @media (width <= 767.9999px) {
    .people-mv-box {
      --position: relative;
      --bottom: unset;
      --padding-top: 15px;
      --padding-left: 15px;
      --padding-bottom: 15px;

      margin-top: 55px;
    }
  }
  .people-mv-box > :not(.number) {
    --padding-right: 30px;

    padding-right: var(--padding-right);
  }
  @media (width <= 767.9999px) {
    .people-mv-box > :not(.number) {
      --padding-right: 15px;
    }
  }
  .people-mv-box > .number {
    --width: calc(80 / var(--vw) * 100vw);
    --height: calc(36 / var(--vw) * 100vw);
    --font-size: calc(20 / var(--vw) * 100vw);

    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--width);
    height: var(--height);
    top: calc(var(--height) * -1);
    left: -1px;
    color: var(--color-white);
    background-color: var(--color-label);
    font-style: italic;
    font-size: var(--font-size);
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-medium);
  }
  @media (width <= 767.9999px) {
    .people-mv-box > .number {
      --width: 57px;
      --height: 30px;
      --font-size: calc(16 * var(--rem));
    }
  }
  .people-mv-box > .name {
    --font-size: max(calc(22 / var(--vw) * 100vw), 16px);
    font-size: var(--font-size);
    font-weight: var(--font-weight-bold);
  }
  @media (width <= 767.9999px) {
    .people-mv-box > .name {
      --font-size: calc(20 * var(--rem));
    }
  }
  .people-mv-box > .position,
  .people-mv-box > .school {
    --font-size: max(calc(16 / var(--vw) * 100vw), calc(10 * var(--rem)));

    font-size: var(--font-size);
  }
  @media (width <= 767.9999px) {
    .people-mv-box > .position,
    .people-mv-box > .school {
      --font-size: calc(15 * var(--rem));
    }
  }
  .people-mv-box > .year {
    --font-size: max(calc(16 / var(--vw) * 100vw), calc(10 * var(--rem)));
    margin-top: 1em;
    font-size: var(--font-size);
  }
  @media (width <= 767.9999px) {
    .people-mv-box > .year {
      --font-size: calc(15 * var(--rem));
    }
  }
  .people-mv-box > .lang {
    --margin-top: calc(16 / var(--vw) * 100vw);
    --font-size: max(calc(16 / var(--vw) * 100vw), 10px);

    margin-top: var(--margin-top);
    border-top: 1px solid var(--color-label);
    padding-top: var(--margin-top);
    display: flex;
    align-items: flex-start;
    font-size: var(--font-size);
  }
  @media (width <= 767.9999px) {
    .people-mv-box > .lang {
      --font-size: calc(15 * var(--rem));
      --margin-top: 15px;
    }
  }

  :is(.people-mv-box > .lang) > dt {
    flex-shrink: 0;
    margin-right: calc(5 / var(--vw) * 100vw);
    position: relative;
    padding-left: calc(9 / var(--vw) * 100vw);
  }
  :is(:is(.people-mv-box > .lang) > dt)::before {
    --margin-right: calc(5 / var(--vw) * 100vw);
    --width: calc(4 / var(--vw) * 100vw);
    --height: calc(4 / var(--vw) * 100vw);
    content: "";
    display: block;
    width: var(--width);
    height: var(--height);
    background-color: var(--color-corporate);
    margin-right: var(--margin-right);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  @media (width <= 767.9999px) {
    :is(:is(.people-mv-box > .lang) > dt)::before {
      --margin-right: 8px;
      --width: 4px;
      --height: 4px;
    }
  }

  .people-interview-section {
    --padding-top: 130px;
    --padding-bottom: 130px;

    padding: var(--padding-top) var(--content-padding) var(--padding-bottom);
  }
  @media (width <= 767.9999px) {
    .people-interview-section {
      --padding-top: 53px;
      --padding-bottom: 53px;
    }
  }
  .people-interview-section > * {
    max-width: 840px;
    margin: 0 auto;
  }
  .people-interview-section:nth-of-type(even) {
    background-color: var(--color-gray);
  }
  .people-interview-subtitle {
    --font-size: 22;
    --margin-top: 40px;
    --align-items: center;

    display: flex;
    align-items: var(--align-items);
    font-size: calc(var(--font-size) * var(--rem));
    line-height: 1.455;
    font-weight: var(--font-weight-bold);
    gap: 12px;
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .people-interview-subtitle {
      --font-size: 18;
      --margin-top: 30px;
      --align-items: flex-start;
    }
  }
  .people-interview-subtitle::before {
    --width: 20px;

    content: "";
    display: block;
    width: var(--width);
    height: 2px;
    background: linear-gradient(90deg, #00a0e9 0%, #00d6b2 50%, #00a0e9 100%);
    flex-shrink: 0;
  }

  @media (width <= 767.9999px) {
    .people-interview-subtitle::before {
      --width: 15px;

      margin-top: 0.7em;
    }
  }
  .people-interview-section > .people-interview-subtitle:first-child {
    margin-top: 0;
  }
  .people-interview-text {
    --margin-top: 18px;
    --line-height: 2.25;

    line-height: var(--line-height);
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .people-interview-text {
      --margin-top: 16px;
      --line-height: 1.875;
    }
  }
  .people-interview-image {
    --max-width: 1200px;
    --margin-block: 50px;

    aspect-ratio: 1200 / 600;
    width: 100%;
    max-width: var(--max-width);
    height: auto;
    overflow: hidden;
    margin-block: var(--margin-block);
    clip-path: polygon(2.5% 0%, 100% 0%, 97.5% 100%, 0% 100%);
  }

  @media (width <= 767.9999px) {
    .people-interview-image {
      --margin-block: 30px 15px;
    }
  }
  .people-other-section {
    --padding-top: 156px;
    --padding-bottom: 160px;

    overflow: hidden;
    padding: var(--padding-top) var(--content-padding) var(--padding-bottom);
  }

  @media (width <= 767.9999px) {
    .people-other-section {
      --padding-top: 56px;
      --padding-bottom: 56px;
    }
  }
  .people-other-section > * {
    max-width: var(--content-width);
    margin: 0 auto;
  }
  @media (width > 767px) {
    .people-other-section .people-slider-wrapper {
      margin-right: 0;
    }
    .people-other-section .people-slider {
      --gap: 0;
    }
    .people-other-section .people-slide-item {
      flex-shrink: 1;
    }
    .people-other-section .people-card {
      --max-width: 400px;
    }
    .people-other-section .people-card-titles {
      padding-right: 25px;
    }
    :is(.people-other-section .people-card-titles) > .position {
      font-size: max(calc(22 / var(--vw) * 100vw), calc(18 * var(--rem)));
    }
    :is(.people-other-section .people-card-titles) > .year {
      --margin-top: calc(30 / var(--vw) * 100vw);
    }
  }
  .people-other-title {
    --font-size: calc(40 * var(--rem));

    font-size: var(--font-size);
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-bold);
  }

  .people-other-title::after {
    --margin-top: 35px;
    --width: 40px;
    margin-top: var(--margin-top);
    content: "";
    display: block;
    width: var(--width);
    height: 2px;
    background: linear-gradient(90deg, #00a0e9 0%, #00d6b2 50%, #00a0e9 100%);
  }
  @media (width <= 767.9999px) {
    .people-other-title {
      --font-size: calc(30 * var(--rem));
    }
    .people-other-title::after {
      --margin-top: 20px;
      --width: 30px;
    }
  }

  /*
   * ===========================
   * contactページ専用スタイル
   * ===========================
   */
  .contact-page-section {
    --padding-top: 115px;
    padding-inline: var(--content-padding);
    padding-top: var(--padding-top);
    max-width: calc(840px + var(--content-padding) * 2);
    margin-inline: auto;
  }

  @media (width <= 767.9999px) {
    .contact-page-section {
      --padding-top: 30px;
    }
  }

  .c-table {
    --margin-top: 40px;
    margin-top: var(--margin-top);
    border-top: 1px solid #ebebeb;
    table-layout: fixed;
    width: 100%;
  }

  @media (width <= 767.9999px) {
    .c-table {
      --margin-top: 30px;
    }
  }

  .c-table tr th {
    border-bottom: 1px solid #ebebeb;
    padding: 25px 25px 25px 0;
    width: 180px;
    text-align: left;
    vertical-align: top;
  }

  @media (max-width: 1179px) {
    .c-table tr th {
      width: 25%;
    }
  }

  @media (max-width: 767px) {
    .c-table tr th {
      display: block;
      width: 100%;
      padding-top: 20px;
      padding-bottom: 0;
      border-bottom: none;
      font-size: calc(14 * var(--rem));
    }
  }

  @media (max-width: 767px) {
    .c-table tr td #birthday {
      width: 100%;
    }
  }

  .c-table tr td {
    border-bottom: 1px solid #ebebeb;
    padding: 25px 0;
    font-size: calc(15 * var(--rem));
  }

  @media (max-width: 767px) {
    .c-table tr td {
      display: block;
      width: 100%;
      padding-block: 15px;
      font-size: calc(14 * var(--rem));
    }
  }

  .frm_buttons {
    --margin-top: 60px;
    margin-inline: auto;
    margin-top: var(--margin-top);
  }

  @media (width <= 767.9999px) {
    .frm_buttons {
      --margin-top: 40px;
    }
  }

  .frm_buttons button {
    --font-size: 18;
    --width: 300px;
    --height: 60px;
    --border-radius: 30px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--color-gradient-horizontal);
    background-position: 0% 50%;
    background-size: 200% auto;
    color: var(--color-white);
    font-size: calc(var(--font-size) * var(--rem));
    font-family: var(--font-family-en);
    width: var(--width);
    height: var(--height);
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    transition: background-position var(--button-transition-speed) ease;
    font-weight: 600;
  }
  :is(.frm_buttons button)::after {
    position: absolute;
    top: 50%;
    right: 31px;
    transform: translateY(-50%);
    content: "";
    display: block;
    width: 7px;
    height: 11px;
    background-image: url("/assets/recruit/image/common/icon-arrow-05.svg");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
    transition: right var(--button-transition-speed) ease;
  }
  @media (width <= 767.9999px) {
    .frm_buttons button {
      --width: 240px;
      margin-inline: auto;
    }
  }
  @media (any-hover: hover) {
    :is(.frm_buttons button):hover {
      background-position: -100% 0;
    }
  }

  .frm_fit {
    width: 100%;
  }
}

@layer operational {
  /*
   * Layer: Operational
   * ---------------------
   * 一時的な上書きスタイル
   * 運用デリバリーを早めるために
   * 一時的にスタイルを上書きする
   * ユーティリティクラスを定義します
   */

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

  @media (width <= 767.9999px) {
    .pc-only {
      display: none;
    }
  }

  .text-accent {
    color: var(--color-accent);
  }

  /* lightboxのリキッド対応 */
  .lightboxOverlay {
    max-width: 100% !important;
  }

  .lb-dataContainer {
    max-width: calc(100% - 40px) !important;
  }

  .lb-outerContainer {
    max-width: calc(100vw - 40px) !important;
    height: auto !important;
  }

  .lightbox .lb-image {
    max-width: calc(100vw - 40px) !important;
    height: auto !important;
  }
}