@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@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;
    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;
  }

  :where(summary) {
    display: block;
    list-style: none;
  }
  :where(summary::-webkit-details-marker) {
    display: none;
  }
}

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

  :root {
    /* ===========================
     基本カラー
     =========================== */
    --color-white: #fff;
    --color-corporate: #00a0e9;
    --color-corporate-dark: #117dae;
    --color-corporate-light: #e6f2f7;
    --color-corporate-lightest: #eef4f8;
    --color-black: #000;
    --color-text: #333;
    --color-border: #ebebeb;
    --color-border-light: #dbe0e4;
    --color-note: #888888;
    --color-link: #999999;

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

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

    /* ===========================
     基本単位
     =========================== */
    --rem: 1rem;

    /* ===========================
     フォントサイズ
     =========================== */
    --font-size-10: 0.625rem; /* 10px */
    --font-size-12: 0.75rem; /* 12px */
    --font-size-14: 0.875rem; /* 14px */
    --font-size-15: 0.9375rem; /* 15px */
    --font-size-16: 1rem; /* 16px */
    --font-size-18: 1.125rem; /* 18px */
    --font-size-20: 1.25rem; /* 20px */
    --font-size-22: 1.375rem; /* 22px */
    --font-size-24: 1.5rem; /* 24px */
    --font-size-28: 1.75rem; /* 28px */
    --font-size-32: 2rem; /* 32px */
    --font-size-36: 2.25rem; /* 36px */
    --font-size-40: 2.5rem; /* 40px */
    --font-size-46: 2.875rem; /* 46px */
    --font-size-64: 4rem; /* 64px */

    /* ===========================
     line-height
     =========================== */
    --line-height-tight: 1.2;
    --line-height-snug: 1.25;
    --line-height-normal: 1.45;
    --line-height-relaxed: 1.5;
    --line-height-loose: 1.7;
    --line-height-double: 2;

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

    /* ===========================
     コンテンツ幅と余白
     =========================== */
    --content-padding: clamp(20px, 8.33vw, 120px);
    --content-width: 1200px;

    /* ===========================
     アニメーションスピード
     =========================== */
    --card-transition-speed: 0.8s;
    --button-transition-speed: 0.7s;
    --link-transition-speed: 0.5s;
  }

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

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

  /*
   * ===========================
   * body
   * ===========================
   */
  body {
    --font-size: var(--font-size-16);

    font-family: var(--font-family-ja);
    font-size: var(--font-size);
    color: var(--color-text);
    background-color: var(--color-white);
    line-height: var(--line-height-double);
  }
  @media (width <= 767.9999px) {
    body {
      --font-size: var(--font-size-14);
    }
  }

  /*
   * ===========================
   * テキスト内リンク
   * ===========================
   */
  a {
    --color: var(--color-corporate);

    color: var(--color);
    text-decoration: underline;
  }
  @media (any-hover: hover) {
    a:hover {
      text-decoration: none;
    }
  }
}

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

  /*
   * ===========================
   * ヘッダー
   * ===========================
   */
  .l-header {
    --border: 20px;
    --padding: 148px 90px 100px;

    position: relative;
    border-top: var(--border) solid var(--color-white);
    border-right: var(--border) solid var(--color-white);
    border-left: var(--border) solid var(--color-white);
    padding: var(--padding);
    background-color: var(--color-corporate);
  }
  @media (width <= 767.9999px) {
    .l-header {
      --border: 10px;
      --padding: 73px 20px 64px;
      --text-align: center;

      text-align: var(--text-align);
    }
  }
  .l-header > .logo {
    --top: -20px;
    --left: -20px;
    --padding: 20px;

    position: absolute;
    background-color: var(--color-white);
    padding: var(--padding);
    box-sizing: content-box;
    top: var(--top);
    left: var(--left);
  }
  @media (width <= 767.9999px) {
    .l-header > .logo {
      --top: -8px;
      --left: -8px;
      --padding: 8px;

      width: 108px;
    }
  }
  .l-header > .title {
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
  }
  .l-header > .title > .en {
    --font-size: var(--font-size-20);
    --line-height: var(--line-height-tight);

    display: block;
    font-family: var(--font-family-en);
    font-size: var(--font-size);
    line-height: var(--line-height);
  }
  @media (width <= 767.9999px) {
    .l-header > .title > .en {
      --font-size: var(--font-size-16);
    }
  }
  .l-header > .title > .ja {
    --font-size: var(--font-size-40);
    --line-height: var(--line-height-normal);

    display: block;
    font-size: var(--font-size);
    line-height: var(--line-height);
  }
  @media (width <= 767.9999px) {
    .l-header > .title > .ja {
      --font-size: var(--font-size-28);
    }
  }

  /*
   * ===========================
   * フッター
   * ===========================
   */
  .l-footer {
    --padding-block: 80px;

    background-color: var(--color-white);
    padding: var(--padding-block) 20px;
    text-align: center;
  }
  @media (width <= 767.9999px) {
    .l-footer {
      --padding-block: 40px;
    }
  }
  .l-footer .logo {
    margin-inline: auto;
  }
  @media (width <= 767.9999px) {
    .l-footer .logo {
      width: 161px;
    }
  }
  .l-footer .nav {
    --column-gap: 32px;
    --margin-top: 40px;
    --font-size: var(--font-size-14);

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 17px;
    column-gap: var(--column-gap);
    margin-top: var(--margin-top);
    font-size: var(--font-size);
  }
  @media (width <= 767.9999px) {
    .l-footer .nav {
      --column-gap: 24px;
      --margin-top: 32px;
      --font-size: var(--font-size-12);
    }
  }
  .l-footer .nav > li {
    line-height: var(--line-height-normal);
  }
  .l-footer .nav > li > a {
    color: var(--color-note);
  }
  .l-footer .copyright > small {
    --font-size: var(--font-size-12);
    --margin-top: 48px;

    display: block;
    margin-top: var(--margin-top);
    font-size: var(--font-size);
    font-family: var(--font-family-en);
    line-height: var(--line-height-snug);
  }
  .l-footer .copyright > small {
    --font-size: var(--font-size-12);
    --margin-top: 48px;

    margin-top: var(--margin-top);
    font-size: var(--font-size);
    font-family: var(--font-family-en);
    line-height: var(--line-height-snug);
  }
  @media (width <= 767.9999px) {
    .l-footer .copyright > small {
      --font-size: var(--font-size-10);
      --margin-top: 41px;
    }
  }

  /*
   * ===========================
   * メイン
   * ===========================
   */
  .l-main {
    --padding-block: 95px 160px;
    --content-width: 784px;
    --padding-inline: var(--content-padding);

    padding-block: var(--padding-block);
    padding-inline: var(--padding-inline);
    max-width: calc(var(--content-width) + var(--content-padding) * 2);
    margin-inline: auto;
  }
  @media (width <= 767.9999px) {
    .l-main {
      --padding-block: 64px 80px;
    }
  }

  /*
   * ===========================
   * テキスト
   * ===========================
   */
  .l-main p + p {
    margin-top: 2em;
  }

  /*
   * ===========================
   * パンくず
   * ===========================
   */
  .l-breadcrumb {
    padding-inline: var(--content-padding);
    font-size: var(--font-size-12);
    color: var(--color-link);
    margin-top: 8px;
  }
  @media (width <= 767.9999px) {
    .l-breadcrumb {
      display: none;
    }
  }
  .l-breadcrumb > .list {
    display: flex;
    gap: 16px;
  }
  .l-breadcrumb > .list > .item {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .l-breadcrumb > .list > .item:not(:last-child):after {
    content: "";
    display: block;
    width: 1px;
    height: 18px;
    background-color: var(--color-link);
  }
  .l-breadcrumb > .list > .item a {
    text-decoration: none;
  }
  @media (any-hover: hover) {
    .l-breadcrumb > .list > .item a:hover {
      text-decoration: underline;
    }
  }
}
@layer components {
  /*
    * Layer: Components
    * ---------------------
    * 再利用可能なUIコンポーネント
    * ボタン、カード、フォーム要素など、
    * ページ内で複数回使用される
    * UIコンポーネントのスタイルを定義します
    */

  /*
   * ===========================
   * section title
   * ===========================
   */
  .c-section-title {
    --margin-bottom: 40px;

    font-weight: var(--font-weight-bold);
    position: relative;
    margin-bottom: var(--margin-bottom);
  }
  @media (width <= 767.9999px) {
    .c-section-title {
      --margin-bottom: 24px;
      text-align: center;
    }
  }
  .c-section-title > .en {
    --font-size: var(--font-size-20);
    --padding-top: 48px;

    position: relative;
    display: block;
    font-size: var(--font-size);
    font-family: var(--font-family-en);
    line-height: var(--line-height-tight);
    color: var(--color-corporate);
    padding-top: var(--padding-top);
  }
  @media (width <= 767.9999px) {
    .c-section-title > .en {
      --font-size: var(--font-size-16);
      --padding-top: 38px;
    }
  }
  .c-section-title > .en::before {
    --width: 60px;
    --height: 8px;
    --left: 0;

    content: "";
    display: block;
    width: var(--width);
    height: var(--height);
    background-color: var(--color-corporate);
    position: absolute;
    top: 0;
    left: var(--left);
  }
  @media (width <= 767.9999px) {
    .c-section-title > .en::before {
      --width: 40px;
      --height: 6px;
      --left: 50%;
      --top: 0;
      transform: translateX(calc(-50% - 20px));
    }
  }
  .c-section-title > .ja {
    --font-size: var(--font-size-46);

    display: block;
    line-height: var(--line-height-normal);
    font-size: var(--font-size);
    color: var(--color-corporate-dark);
  }
  @media (width <= 767.9999px) {
    .c-section-title > .ja {
      --font-size: var(--font-size-28);
    }
  }
  .c-section-title > .ja::before {
    --width: 60px;
    --height: 8px;
    --left: 60px;

    content: "";
    display: block;
    width: var(--width);
    height: var(--height);
    background-color: var(--color-corporate-dark);
    position: absolute;
    top: 0;
    left: var(--left);
  }
  @media (width <= 767.9999px) {
    .c-section-title > .ja::before {
      --width: 40px;
      --height: 6px;
      --left: 50%;
      transform: translateX(calc(-50% + 20px));
    }
  }
  /*
   * ===========================
   * block title
   * ===========================
   */
  .c-block-title {
    --font-size: var(--font-size-24);
    --margin-bottom: 58px;

    font-weight: var(--font-weight-bold);
    font-size: var(--font-size);
    line-height: var(--line-height-normal);
    position: relative;
    margin-bottom: var(--margin-bottom);
  }
  @media (width <= 767.9999px) {
    .c-block-title {
      --font-size: var(--font-size-20);
      --margin-bottom: 42px;
    }
  }
  .c-block-title::before {
    --width: 100%;
    --height: 2px;
    --left: 0;
    --bottom: -16px;

    content: "";
    display: block;
    width: var(--width);
    height: var(--height);
    background-color: var(--color-border);
    position: absolute;
    bottom: var(--bottom);
    left: var(--left);
  }
  .c-block-title::after {
    --width: 80px;
    --height: 2px;
    --left: 0;
    --bottom: -16px;

    content: "";
    display: block;
    width: var(--width);
    height: var(--height);
    background-color: var(--color-corporate);
    position: absolute;
    bottom: var(--bottom);
    left: var(--left);
  }

  /*
   * ===========================
   * リード
   * ===========================
   */
  .c-lead {
    --font-size: clamp(var(--font-size-22), 2.78vw, var(--font-size-40));
    --margin-bottom: 40px;

    display: block;
    font-size: var(--font-size);
    margin-bottom: var(--margin-bottom);
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-bold);
  }
  @media (width <= 767.9999px) {
    .c-lead {
      --font-size: var(--font-size-22);
      --margin-bottom: 24px;
      text-align: center;
    }
  }

  /*
   * ===========================
   * 注釈
   * ===========================
   */
  .c-note {
    --font-size: var(--font-size-12);
    --margin-top: 24px;

    display: block;
    font-size: var(--font-size);
    color: var(--color-note);
    margin-top: var(--margin-top);
    line-height: var(--line-height-relaxed);
  }
  @media (width <= 767.9999px) {
    .c-note {
      --font-size: var(--font-size-10);
      --margin-top: 16px;
    }
  }

  /*
   * ===========================
   * ボタン
   * ===========================
   */
  .c-button {
    --padding: 16px 16px 16px 40px;
    --font-size: var(--font-size-18);
    --border-radius: 100px;
    --width: 368px;

    display: flex;
    align-items: center;
    padding: var(--padding);
    font-size: var(--font-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    border-radius: var(--border-radius);
    text-align: center;
    text-decoration: none;
    background-color: var(--color-corporate);
    width: var(--width);
    transition: opacity var(--button-transition-speed) ease;
  }
  @media (width <= 767.9999px) {
    .c-button {
      --padding: 10px 20px 10px 32px;
      --width: 285px;
      margin-inline: auto;
    }
  }
  .c-button > span {
    --font-size: var(--font-size-12);
    font-size: var(--font-size);
    font-weight: var(--font-weight-normal);
  }
  .c-button > img {
    --width: 40px;
    --height: 40px;
    --padding: 8px;

    display: block;
    margin-left: auto;
    background-color: var(--color-white);
    padding: var(--padding);
    width: var(--width);
    height: var(--height);
    border-radius: 50%;
  }
  @media (width <= 767.9999px) {
    .c-button > img {
      --width: 24px;
      --height: 24px;
      --padding: 4.8px;
    }
  }
  @media (any-hover: hover) {
    .c-button:hover {
      opacity: 0.8;
    }
  }

  .c-close-button {
    --padding: 16px;
    --font-size: var(--font-size-18);
    --border-radius: 100px;
    --width: 368px;
    --margin-top: 48px;

    display: block;
    padding: var(--padding);
    font-size: var(--font-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    border-radius: var(--border-radius);
    text-align: center;
    text-decoration: none;
    background-color: var(--color-note);
    width: var(--width);
    box-sizing: border-box;
    margin-inline: auto;
    margin-top: var(--margin-top);
    transition: opacity var(--button-transition-speed) ease;
  }
  @media (width <= 767.9999px) {
    .c-close-button {
      --padding: 10px;
      --width: 275px;
      --margin-top: 40px;

      max-width: 100%;
    }
  }
  @media (any-hover: hover) {
    .c-close-button:hover {
      opacity: 0.8;
    }
  }

  /*
   * ===========================
   * リンク
   * ===========================
   */
  .c-link {
    --color: var(--color-corporate);
    --transition-speed: var(--link-transition-speed);

    color: var(--color);
    transition: color var(--transition-speed);
  }
  .c-link > img {
    --margin-left: 8px;
    display: inline-block;
    margin-left: var(--margin-left);
    vertical-align: middle;
  }
  @media (width <= 767.9999px) {
    .c-link > img {
      --margin-left: 6px;
      width: 16px;
      height: 16px;
    }
  }
  .c-link.-access {
    text-decoration: none;
    display: flex;
    align-items: center;
  }
  @media (any-hover: hover) {
    .c-link.-access:hover {
      opacity: 0.8;
    }
  }
  .c-link.-access::before {
    --margin-right: 8px;

    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(https://www.integral-t.co.jp//wp-content/themes/integral-t/assets/img/icon/icon-arrow-01.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: var(--margin-right);
  }
  @media (width <= 767.9999px) {
    .c-link.-access::before {
      --margin-right: 6px;
    }
  }

  /*
   * ===========================
   * リスト
   * ===========================
   */
  /* c-bullet-list */
  .c-bullet-list li {
    position: relative;
    padding-left: 18px;
  }
  .c-bullet-list li::before {
    content: "";
    background-color: #333;
    width: 3px;
    height: 3px;
    display: block;
    position: absolute;
    top: 1em;
    left: 5px;
  }

  /* c-decimal-list */
  .c-decimal-list {
    list-style: decimal;
    padding-left: 1em;
  }

  /* c-definition-list  */
  .c-definition-list {
    border-top: 1px solid var(--color-border-light);
  }
  .c-definition-list > .item {
    --grid-template-columns: 200px 1fr;
    --gap: 8px;
    --padding-block: 24px;

    display: grid;
    grid-template-columns: var(--grid-template-columns);
    gap: var(--gap);
    padding-block: var(--padding-block);
    border-bottom: 1px solid var(--color-border-light);
    line-height: var(--line-height-relaxed);
  }
  @media (width <= 767.9999px) {
    .c-definition-list > .item {
      --grid-template-columns: 1fr;
      --gap: 12px;
      --padding-block: 16px;
    }
  }
  .c-definition-list > .item > dt {
    font-weight: var(--font-weight-bold);
  }
  .c-definition-list > .item > dt > a {
    font-weight: var(--font-weight-normal);
    margin-top: 8px;
  }
  @media (width <= 767.9999px) {
    .c-definition-list > .item > dd {
      margin-left: 30px;
    }
  }
  .c-definition-list > .item > dd > .title {
    font-weight: var(--font-weight-bold);
  }
  .c-definition-list > .item > dd > .title:not(:first-of-type) {
    --margin-top: 24px;
    --padding-top: 24px;

    margin-top: var(--margin-top);
    padding-top: var(--padding-top);
    border-top: 1px solid var(--color-border-light);
  }
  @media (width <= 767.9999px) {
    .c-definition-list > .item > dd > .title:not(:first-of-type) {
      --margin-top: 16px;
      --padding-top: 16px;
    }
  }
  .c-definition-list > .item > dd > .text {
    --margin-top: 16px;

    margin-top: var(--margin-top);
  }
  @media (width <= 767.9999px) {
    .c-definition-list > .item > dd > .text {
      --margin-top: 4px;
    }
  }

  /*
   * ===========================
   * ダイアログ
   * ===========================
   */
  .c-dialog {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .c-dialog::backdrop {
    background-color: rgb(0 0 0 / 70%);
  }

  .c-dialog .dialog-content {
    --padding: var(--content-padding);
    --margin: clamp(80px, 8.33vw, 120px);

    position: absolute;
    background-color: var(--color-white);
    overflow-y: auto;
    height: calc(100svh - var(--margin) * 2);
    max-width: 992px;
    width: calc(100% - 50px);
    padding: var(--padding);
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - var(--margin)));
    margin-block: var(--margin);
  }

  @media (width <= 767.9999px) {
    .c-dialog .dialog-content {
      --padding: 64px 30px;
    }
  }

  @keyframes dialog-fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

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

    100% {
      background-color: rgb(0 0 0 / 70%);
    }
  }

  .c-dialog[open] {
    animation: dialog-fade-in 0.3s ease-out forwards;
  }

  .c-dialog[open]::backdrop {
    animation: backdrop-dialog-fade-in 0.3s ease-out forwards;
  }

  .dialog-close-button {
    --top: min(3.33vw, 48px);
    --left: calc(50% + min(44.58vw, 642px));
    --width: min(4.44vw, 64px);
    --height: min(4.44vw, 64px);
    --font-size: min(0.97vw, var(--font-size-14));
    --transform: translateX(-50%);
    --padding: 7px;

    display: block;
    position: absolute;
    top: calc(var(--top) - var(--padding));
    left: var(--left);
    width: var(--width);
    height: var(--height);
    font-size: var(--font-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    transition: opacity var(--button-transition-speed) ease;
    padding: var(--padding);
    transform: var(--transform);
  }

  @media (width <= 1269.9999px) {
    .dialog-close-button {
      --left: unset;
      --transform: translateY(-50%);
      --width: 44px;
      --height: 44px;
      --top: calc(
        50% -
        ((100svh - clamp(80px, 8.33vw, 120px) * 2) / 2) -
        var(--padding) -
        var(--height) /
        2
      );
      --font-size: var(--font-size-10);

      right: calc(20px - var(--padding));
    }
  }

  @media (any-hover: hover) {
    .dialog-close-button:hover {
      opacity: 0.8;
    }
  }

  .dialog-close-button > span {
    --top: min(3.47vw, 50px);

    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    top: var(--top);
  }

  @media (width <= 1269.9999px) {
    .dialog-close-button > span {
      --top: 22px;
    }
  }

  .dialog-close-button::before,
  .dialog-close-button::after {
    --height: min(6.25vw, 90px);

    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: var(--height);
    background-color: var(--color-white);
  }
  @media (width <= 1269.9999px) {
    .dialog-close-button::before,
    .dialog-close-button::after {
      --height: 44px;
    }
  }

  .dialog-close-button::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .dialog-close-button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /*
   * ===========================
   * ループスライダー
   * ===========================
   */
  .c-loop-slider-area {
    overflow: hidden;
    position: relative;
    display: flex;
    width: 100%;
    /* margin-left: calc(50% - 50vw); */
  }

  .c-loop-slider-area > .slider {
    --animation-speed: 300s;

    display: flex;
    position: relative;
  }

  .c-loop-slider-area > .slider:nth-child(1) {
    animation: slide-loop var(--animation-speed) -150s linear infinite;
  }
  .c-loop-slider-area > .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%);
    }
  }
  .c-loop-slider-area > .slider > .item {
    --aspect-ratio: 349 / 261;
    --width: 349px;

    aspect-ratio: var(--aspect-ratio);
    width: var(--width);
    height: auto;
    overflow: hidden;
    flex-shrink: 0;
    margin-inline: 4px;
  }

  @media (width > 2499px) {
    .c-loop-slider-area > .slider > .item {
      --width: 13.97vw;
    }
  }

  @media (width <= 767.9999px) {
    .c-loop-slider-area > .slider > .item {
      --width: 196px;
    }
  }

  .c-loop-slider-area > .slider > .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

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

  /*
   * ===========================
   * utility
   * ===========================
   */
  .u-mt-2em {
    margin-top: 2em;
  }
  .u-mt-sp80-pc160 {
    margin-top: 160px;
  }
  @media (width <= 767.9999px) {
    .u-mt-sp80-pc160 {
      margin-top: 80px;
    }
  }

  /*
   * ===========================
   * セクション間
   * ===========================
   */
  section:has(.c-block-title:first-child) + section:has(.c-block-title:first-child) {
    margin-top: 80px;
  }
}
@layer page {
  /*
   * Layer: Page
   * ---------------------
   * ページ固有のスタイル
   * 特定のページにのみ適用される
   * スタイルを定義します
   * 例：採用ページ、お問い合わせページなど
   */

  /*
   * ===========================
   * topページ専用スタイル
   * ===========================
   */
  .top {
    overflow-x: hidden;
  }
  .top .l-header {
    --padding: 56px;
    --background-image: url(https://www.integral-t.co.jp//wp-content/themes/integral-t/assets/img/top/mv-top-01_pc.jpg);

    display: flex;
    align-items: end;
    width: 100%;
    height: 100svh;
    background-image:
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%),
      var(--background-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: var(--border) solid var(--color-white);
  }
  @media (width <= 767.9999px) {
    .top .l-header {
      --padding: 20px;
      --text-align: left;
      --background-image: url(https://www.integral-t.co.jp//wp-content/themes/integral-t/assets/img/top/mv-top-01_sp.jpg);
    }
  }
  .top .l-header > .title > .en {
    --font-size: var(--font-size-14);
    --line-height: var(--line-height-double);
  }
  @media (width <= 767.9999px) {
    .top .l-header > .title > .en {
      --font-size: var(--font-size-10);
    }
  }
  .top .l-header > .title > .ja {
    --font-size: min(4.44vw, var(--font-size-64));
    --line-height: var(--line-height-snug);

    margin-top: 8px;
  }
  @media (width <= 767.9999px) {
    .top .l-header > .title > .ja {
      --font-size: var(--font-size-32);
    }
  }

  .top .l-main {
    --content-width: auto;
    --padding-block: 0;
    --padding-inline: 0;
  }
  .top .message {
    --display: flex;

    display: var(--display);
    gap: 40px;
  }
  @media (width <= 767.9999px) {
    .top .message {
      --display: block;
    }
  }
  .top .message-button {
    --padding: 35px 48px 35px 40px;
    --aspect-ratio: 784 / 160;
    --background-image: url(https://www.integral-t.co.jp//wp-content/themes/integral-t/assets/img/top/button-message-01_pc.jpg);

    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: var(--background-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: var(--aspect-ratio);
    width: 100%;
    position: relative;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    padding: var(--padding);
    box-sizing: border-box;
  }
  @media (width <= 767.9999px) {
    .top .message-button {
      --padding: 10px;
      --aspect-ratio: unset;
      --background-image: url(https://www.integral-t.co.jp//wp-content/themes/integral-t/assets/img/top/button-message-01_sp.jpg);

      height: 161px;
      max-width: 335px;
      margin-inline: auto;
    }
  }
  .top .message-button::after {
    position: absolute;
    left: 0;
    content: "";
    display: block;
    width: 12.24%;
    height: 100%;
    background-color: var(--color-corporate);
    opacity: 0.8;
  }
  .top .message-button > * {
    position: relative;
    z-index: var(--z-index-normal);
  }
  .top .message-button > .title > .en {
    --font-size: var(--font-size-36);

    display: block;
    font-size: var(--font-size);
    font-family: var(--font-family-en);
    line-height: var(--line-height-tight);
  }
  .top .message-button > .title > .ja {
    --font-size: var(--font-size-14);

    display: block;
    font-size: var(--font-size);
    line-height: var(--line-height-relaxed);
  }
  @media (width <= 767.9999px) {
    .top .message-button > .title > .ja {
      --font-size: var(--font-size-12);
      margin-top: 5px;
    }
  }
  .top .message-button > .text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-14);
  }
  @media (width <= 767.9999px) {
    .top .message-button > .text {
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
  }
  .top .message-button > .text > img {
    --width: 40px;
    --height: 40px;
    --padding: 8px;

    display: block;
    margin-left: auto;
    background-color: var(--color-white);
    padding: var(--padding);
    width: var(--width);
    height: var(--height);
    border-radius: 50%;
  }
  @media (width <= 767.9999px) {
    .top .message-button > .text > img {
      --width: 24px;
      --height: 24px;
      --padding: 4.8px;
    }
  }
  .top .message-button::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background-color: var(--color-text);
    opacity: 0.5;
    transition: opacity var(--button-transition-speed) ease;
  }
  @media (any-hover: hover) {
    .top .message-button:hover::before {
      opacity: 0.3;
    }
  }
  .top .message-dialog .name {
    --font-size: var(--font-size-24);

    margin-top: 0;
    font-size: var(--font-size);
    line-height: 1;
  }
  @media (width <= 767.9999px) {
    .top .message-dialog .name {
      --font-size: var(--font-size-20);
    }
  }
  .top .message-dialog .c-definition-list {
    --margin-top: 64px;
    margin-top: var(--margin-top);
  }
  @media (width <= 767.9999px) {
    .top .message-dialog .c-definition-list {
      --margin-top: 40px;
    }
  }

  .top .message-dialog .c-section-title {
    text-align: left;
  }

  .top .message-dialog .c-section-title > .en::before {
    left: 0;
    transform: translateX(0);
  }

  .top .message-dialog .c-section-title > .ja::before {
    left: 40px;
    transform: translateX(0);
  }

  .top .message-dialog .pict {
    --max-width: 240px;

    max-width: var(--max-width);
    flex-shrink: 0;
  }

  @media (width <= 767.9999px) {
    .top .message-dialog .pict {
      --max-width: 225px;

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

  .top .message-dialog .pict p {
    margin-top: 8px;
    text-align: right;
    font-size: var(--font-size-12);
    line-height: var(--line-height-normal);
  }

  .top .message-dialog .c-block-title {
    margin-top: 80px;
  }

  .top .our-business {
    --padding-bottom: 160px;

    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--padding-bottom);
  }

  @media (width <= 767.9999px) {
    .top .our-business {
      --padding-bottom: 80px;
    }
  }

  .top .our-business > .lead-area {
    --content-width: 1200px;
    --padding-block: 140px min(192px, 13.33vw);

    position: relative;
    padding-block: var(--padding-block);
    padding-inline: var(--content-padding);
    max-width: calc(var(--content-width) + var(--content-padding) * 2);
    margin-inline: auto;
  }
  @media (width <= 767.9999px) {
    .top .our-business > .lead-area {
      --padding-block: 75px 0;
    }
  }
  .top .our-business > .lead-area > .text {
    --width: min(32.778vw, 472px);

    width: var(--width);
  }
  @media (width <= 849.9999px) {
    .top .our-business > .lead-area > .text {
      --width: 100%;
    }
  }
  .top .our-business > .lead-area > .kv {
    --position: absolute;
    --transform: translateY(-50%);
    --top: 54%;
    --left: calc(var(--content-padding) + min(30vw, 432px));

    z-index: -1;
    position: var(--position);
    top: var(--top);
    left: var(--left);
    transform: var(--transform);
  }
  @media (width <= 849.9999px) {
    .top .our-business > .lead-area > .kv {
      --position: relative;
      --transform: translateX(-50%);
      --top: -67px;
      --left: 50%;

      width: min(calc(100% + var(--content-padding) * 2), 559px);
      height: 559px;
      overflow: hidden;
      display: block;
      margin-bottom: calc(-67px - 42px);
      max-inline-size: none;
    }
  }
  .top .our-business > .lead-area > .kv img {
    --width: min(66.67vw, 960px);
    --object-position: left center;

    display: block;
    width: var(--width);
    height: 100%;
    max-width: 960px;
    object-fit: cover;
    object-position: var(--object-position);
  }
  @media (width <= 849.9999px) {
    .top .our-business > .lead-area > .kv img {
      --width: 100%;
      --object-position: center;
    }
  }

  .top .area-accordion {
    --content-width: 1200px;

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

  .top .area-accordion:has([open]) {
    --min-height: 640px;

    min-height: var(--min-height);
  }

  @media (width <= 849.9999px) {
    .top .area-accordion:has([open]) {
      --min-height: unset;
    }
  }

  .top [name="business"] {
    --margin-left: auto;
    --width: min(40vw, 576px);
    --border-bottom: 1px solid var(--color-border);

    margin-left: var(--margin-left);
    width: var(--width);
    border-bottom: var(--border-bottom);
  }

  @media (width <= 849.9999px) {
    .top [name="business"] {
      --margin-left: unset;
      --width: auto;
    }
  }

  .top [name="business"]:first-child {
    border-top: 1px solid var(--color-border);
  }

  .top [name="business"] summary {
    --gap: 34px;
    --padding: 24px;
    --font-size: var(--font-size-20);

    display: flex;
    align-items: center;
    font-weight: var(--font-weight-bold);
    padding: var(--padding);
    font-size: var(--font-size);
    gap: var(--gap);
    line-height: var(--line-height-relaxed);
    transition: opacity var(--button-transition-speed) ease;
    list-style: none;
  }

  .top [name="business"] summary::-webkit-details-marker {
    display: none;
  }

  @media (any-hover: hover) {
    .top [name="business"]:hover summary {
      opacity: 0.8;
    }
  }

  @media (width <= 849.9999px) {
    .top [name="business"] summary {
      --gap: 16px;
      --font-size: var(--font-size-15);
      --padding: 20px;
    }
  }

  @media (width > 850px) {
    .top [name="business"][open]:hover summary {
      opacity: 1;
    }
  }

  .top [name="business"] summary::after {
    --icon-sizes: 40px;

    flex-shrink: 0;
    content: "";
    display: inline-block;
    margin-left: auto;
    width: var(--icon-sizes);
    height: var(--icon-sizes);
    background-image: url(https://www.integral-t.co.jp//wp-content/themes/integral-t/assets/img/icon/icon_accordion_open.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }

  @media (width <= 849.9999px) {
    .top [name="business"] summary::after {
      --icon-sizes: 24px;
    }
  }

  .top [name="business"][open] summary::after {
    background-image: url(https://www.integral-t.co.jp//wp-content/themes/integral-t/assets/img/icon/icon_accordion_close.svg);
  }

  .top [name="business"] summary .number {
    --font-size: var(--font-size-18);

    color: var(--color-corporate);
    font-size: var(--font-size);
    font-family: var(--font-family-en);
  }

  @media (width <= 849.9999px) {
    .top [name="business"] summary .number {
      --font-size: var(--font-size-14);
    }
  }

  .top [name="business"] > .content {
    padding: 0 40px 32px 80px;
  }

  @media (width <= 849.9999px) {
    .top [name="business"] > .content {
      padding: 0 20px 30px 42px;
    }
  }

  .top [name="business"][open] > .content {
    animation: accordion-open-animation 0.3s ease forwards;
  }

  @keyframes accordion-open-animation {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .top [name="business"] > .content > p {
    --font-size: var(--font-size-15);

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

  @media (width <= 849.9999px) {
    .top [name="business"] > .content > p {
      --font-size: var(--font-size-14);
    }
  }

  .top [name="business"] .image {
    --position: absolute;
    --height: 640px;
    --width: min(45.83vw, 880px);

    position: var(--position);
    top: 0;
    right: calc(min(40vw, 576px) + var(--content-padding) + min(7.22vw, 104px));
    height: var(--height);
    width: var(--width);
  }

  @media (width <= 849.9999px) {
    .top [name="business"] .image {
      --position: static;
      --height: auto;
      --width: 100%;

      margin-top: 24px;
    }
  }

  .top [name="business"] .image > img {
    --height: 100%;
    --object-fit: cover;
    --object-position: 44% top;

    width: 100%;
    object-position: var(--object-position);
    height: var(--height);
    object-fit: var(--object-fit);
  }

  @media (width <= 849.9999px) {
    .top [name="business"] .image > img {
      --height: auto;
      --object-fit: unset;
      --object-position: unset;
    }
  }

  .top .recruit {
    overflow: hidden;
  }

  .top .recruit > .inner {
    position: relative;
    --content-width: 1200px;
    max-width: calc(var(--content-width) + var(--content-padding) * 2);
    margin-inline: auto;
    padding-inline: var(--content-padding);
  }

  .top .recruit-content {
    --width: clamp(368px, 40vw, 576px);

    width: var(--width);
  }

  @media (width <= 767.9999px) {
    .top .recruit-content {
      --width: auto;
    }
  }

  .top .recruit-kv img {
    --position: absolute;
    --width: clamp(44.444vw, calc(640px + (100vw - 1440px) * 0.5), 880px);
    --max-width: 880px;
    --height: 640px;
    --object-fit: cover;
    --object-position: left center;

    display: block;
    top: 0;
    left: calc(50% + 80px);
    position: var(--position);
    width: var(--width);
    max-width: var(--max-width);
    height: var(--height);
    object-fit: var(--object-fit);
    object-position: var(--object-position);
  }

  @media (width <= 767.9999px) {
    .top .recruit-kv img {
      --position: static;
      --width: 100%;
      --min-width: auto;
      --height: auto;
      --object-fit: unset;
      --object-position: unset;

      margin-top: 40px;
    }
  }

  .top .company {
    --margin-top: 225px;

    background-color: var(--color-corporate-lightest);
    position: relative;
    margin-top: var(--margin-top);
  }
  @media (width <= 767.9999px) {
    .top .company {
      --margin-top: 94px;
    }
  }

  .top .company::before {
    content: "";
    width: 100%;
    height: 4.44vw;
    background-image: url(https://www.integral-t.co.jp//wp-content/themes/integral-t/assets/img/top/text-integral-t.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    top: -4.1vw;
    position: absolute;
  }

  .top .company > .inner {
    --content-width: 1200px;
    --padding-block: 160px 290px;

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

  @media (width <= 767.9999px) {
    .top .company > .inner {
      --padding-block: 80px 135px;
    }
  }

  .top .company > .inner {
    --display: grid;

    display: var(--display);
    grid-template-columns: 184px 1fr;
    gap: min(19.33%, 232px);
  }

  @media (width <= 989.9999px) {
    .top .company > .inner {
      --display: block;
    }
  }

  .top .company > .inner .c-definition-list {
    --margin-top: 48px;
    margin-top: var(--margin-top);
  }

  @media (width <= 989.9999px) {
    .top .company > .inner .c-definition-list {
      --margin-top: 40px;
    }
  }

  .top .c-loop-slider-area {
    transform: translateY(-130px);
    margin-bottom: -130px;
  }

  @media (width <= 767.9999px) {
    .top .c-loop-slider-area {
      transform: translateY(-65px);
      margin-bottom: -65px;
    }
  }

  /*
   * ===========================
   * contactページ専用スタイル
   * ===========================
   */
  .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: var(--font-size-14);
    }
  }

  @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: var(--font-size-15);
  }

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

  .frm_buttons {
    display: flex;
    justify-content: center;
    margin-inline: auto;
  }

  .frm_buttons button {
    --width: 300px;
    --height: 60px;
    --border-radius: 30px;
    --margin-top: 60px;

    display: block;
    margin-inline: 10px;
    margin-top: var(--margin-top);
    background-color: var(--color-corporate);
    background-position: 0% 50%;
    background-size: 200% auto;
    color: var(--color-white);
    font-size: var(--font-size-18);
    font-family: var(--font-family-en);
    width: var(--width);
    height: var(--height);
    border-radius: var(--border-radius);
    transition: opacity var(--button-transition-speed) ease;
    font-weight: 600;
  }
  @media (width <= 767.9999px) {
    .frm_buttons button {
      --width: 240px;
      --margin-top: 40px;
    }
  }
  @media (any-hover: hover) {
    :is(.frm_buttons button):hover {
      opacity: 0.8;
    }
  }

  .frm_fit {
    width: 100%;
  }
}
@layer operational {
  /*
   * Layer: Operational
   * ---------------------
   * 運用・保守用スタイル
   * デバッグ用の枠線表示や
   * 一時的なスタイル調整など、
   * 運用・保守に関連するスタイルを定義します
   */
}