:root {
  /* プライマリカラー */
  --color-primary-50: #d9ecf5;
  --color-primary-100: #aedbf0;
  --color-primary-200: #5bb6d9;
  --color-primary-300: #00a0e9;
  --color-primary-400: #3993bc;
  --color-primary-500: #2d7fa3;
  --color-primary-600: #1e7ca6;
  --color-primary-700: #0871a1;
  --color-primary-800: #065d88;
  --color-primary-900: #0a4c6b;

  /* セカンダリカラー */
  --color-secondary-50: #f7f9e6;
  --color-secondary-100: #eef5cd;
  --color-secondary-200: #ddeb9b;
  --color-secondary-300: #cce16a;
  --color-secondary-400: #bbd738;
  --color-secondary-500: #aacd06;
  --color-secondary-600: #88a405;
  --color-secondary-700: #667b04;
  --color-secondary-800: #445202;
  --color-secondary-900: #222901;

  /* グレースケール */
  --color-gray-50: #f0f0f0;
  --color-gray-100: #cfcfcf;
  --color-gray-200: #bcbcbc;
  --color-gray-300: #a9a9a9;
  --color-gray-400: #969696;
  --color-gray-500: #838383;
  --color-gray-600: #707070;
  --color-gray-700: #626262;
  --color-gray-800: #545454;
  --color-gray-900: #333333;

  /* 基本色 */
  --color-white: #ffffff;
  --color-black: #000000;

  /* フォント */
  --font-family-primary: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  --font-family-roboto: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans", sans-serif;

  /* レイアウト */
  --container-width-base: 1400px;
  --container-width-sm: 1200px;
  --container-width-xs: 960px;

  /* テキストサイズ */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.8125rem; /* 13px */
  --text-md: 0.9375rem; /* 15px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.3125rem; /* 21px */
  --text-2xl: 1.75rem; /* 28px */
  --text-3xl: 2rem; /* 32px */

  @media (width < 768px) {
    --text-xs: 0.625rem; /* 10px */
    --text-sm: 0.75rem; /* 12px */
    --text-md: 0.875rem; /* 14px */
    --text-lg: 1rem; /* 16px */
    --text-xl: 1.125rem; /* 18px */
    --text-2xl: 1.2rem; /* 19.2px */
    --text-3xl: 1.3rem; /* 20.8px */
  }
  @media (width < 480px) {
    --text-xs: 0.625rem; /* 10px */
    --text-sm: 0.75rem; /* 12px */
    --text-md: 0.875rem; /* 14px */
    --text-lg: 0.9375rem; /* 15px */
    --text-xl: 1.0625rem; /* 17px */
    --text-2xl: 1.15625rem; /* 18.5px */
    --text-3xl: 1.25rem; /* 20px */
  }

  /* 間隔 */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 1rem; /* 16px */
  --spacing-md: 1.5rem; /* 24px */
  --spacing-lg: 2rem; /* 32px */
  --spacing-xl: 3rem; /* 48px */
  --spacing-2xl: 4rem; /* 64px */
  --spacing-3xl: 5rem; /* 80px */
  --spacing-4xl: 6rem; /* 96px */
  --spacing-5xl: 8rem; /* 128px */

  @media (width < 768px) {
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem; /* 8px */
    --spacing-md: 0.75rem; /* 12px */
    --spacing-lg: 1rem; /* 16px */
    --spacing-xl: 1.5rem; /* 24px */
    --spacing-2xl: 2rem; /* 32px */
    --spacing-3xl: 2.5rem; /* 40px */
    --spacing-4xl: 3rem; /* 48px */
    --spacing-5xl: 4rem; /* 64px */
  }

  /* 行間 */
  --line-height-xs: 1.25;
  --line-height-sm: 1.62;
  --line-height-md: 1.77;
  --line-height-lg: 1.86;

  /* 字間 */
  --letter-spacing-none: 0em;
  --letter-spacing-md: 0.06em;

  /* z-index */
  --z-index-header: 200;
  --z-index-navMenu: 150;
  --z-index-sideText: 100;

  /* その他 */

  /* ↓javascriptで再設定 */
  --header-height: 90px;
}

@layer base, components, utilities;

@layer base {
  html,
  body {
    width: 100%;
  }

  body {
    font-family: var(--font-family-primary);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-md);
    font-size: var(--text-md);
    font-weight: 400;
    color: var(--color-gray-900);
    padding-block-start: var(--header-height); /* ヘッダー分の余白 */
  }

  a {
    @media (hover: hover) {
      &:hover {
        color: color-mix(in srgb, currentColor, var(--color-white) 20%);
      }
    }
  }

  mark {
    background-color: unset;
  }

  /* 記事コンテンツ用（CSSリセット） */
  .c-post-content {
    > h2,
    > h3,
    > h4,
    > h5,
    > h6 {
      margin: revert;
    }
    a {
      color: var(--color-primary-300);
      text-decoration: underline;
      text-underline-offset: 0.1em;
      text-decoration-thickness: 0.08em;
    }

    p {
      margin: revert;
    }

    ul,
    ol {
      list-style: revert;
      padding: revert;
      margin: revert;
    }
  }
}

@layer components {
  /* コンテナ */
  .c-container {
    --container-width: var(--container-width-base);
    --padding-size: var(--spacing-xl);
    width: 100%;
    max-width: calc(var(--container-width) + var(--padding-size) * 2);
    margin: 0 auto;
    padding: 0 var(--padding-size);
  }

  .c-container-sm {
    --container-width: var(--container-width-sm);
    --padding-size: var(--spacing-xl);
    width: 100%;
    max-width: calc(var(--container-width) + var(--padding-size) * 2);
    margin: 0 auto;
    padding: 0 var(--padding-size);
  }

  .c-container-xs {
    --container-width: var(--container-width-xs);
    --padding-size: var(--spacing-xl);
    width: 100%;
    max-width: calc(var(--container-width) + var(--padding-size) * 2);
    margin: 0 auto;
    padding: 0 var(--padding-size);
  }
  .c-container--noPadding {
    max-width: var(--container-width);
    padding: 0;
  }
  .c-container--twoColumn {
    display: grid;
    grid-template-columns: 994fr 321fr;
    direction: rtl;
    gap: var(--spacing-3xl);
    padding-block-end: var(--spacing-3xl);

    > * {
      direction: ltr;
    }

    @media (width < 1024px) {
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
    }
  }

  /* ヘッダー */
  .c-header {
    display: grid;
    grid-template-columns: 1fr auto;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-index-header);
    background-color: var(--color-white);
    padding-inline-start: 80px;

    @media (width < 1280px) {
      padding-inline-start: var(--spacing-md);
    }

    .c-header-logo {
      display: grid;
      align-items: center;
      margin-block: 0;
      padding-block: 0.75rem;
      > img {
        max-width: 43vw;
        height: auto;
      }
    }

    .c-header-nav {
      display: grid;
      grid-auto-flow: column;
      /* grid-template-columns: auto auto; */
      column-gap: var(--spacing-md);

      .c-header-nav-main {
        display: flex;
        flex-wrap: wrap;
        place-content: center end;

        > li a {
          display: inline-block;
          padding-inline: 0.8rem;
          padding-block: 0.2rem;
          font-size: 1.0625rem;
          font-weight: bold;

          @media (hover: hover) {
            &:any-link:hover {
              color: var(--color-primary-300);
            }
          }

          @media (width < 1580px) {
            font-size: var(--text-md);
          }
        }
      }

      .c-header-nav-sub {
        display: flex;
        place-items: center;

        > li :where(a, button) {
          display: grid;
          grid-template-rows: 3fr 2fr;
          place-items: center;
          width: 120px;
          height: 90px;
          font-size: var(--text-sm);
          font-weight: bold;

          text-align: center;
          line-height: 1.2;
          border: 0;
          padding-block-start: 0.3rem;
          padding-inline: 0;
          color: var(--color-white);

          &::before {
            --size: 3rem;
            content: "";
            display: inline-block;
            width: var(--size);
            height: var(--size);
            background-repeat: no-repeat;
            background-size: contain;
          }
          @media (hover: hover) {
            &:any-link:hover,
            &:enabled:hover {
              background-color: var(--color-secondary-500);
            }
          }
        }
        .c-header-nav-search {
          /* サイト内検索ボタン */
          background-color: var(--color-primary-300);
          &::before {
            background-image: url("../images/common/header-icon-01_x2.webp");
          }
        }

        .c-header-nav-order {
          /* 試験依頼ボタン */
          background-color: var(--color-primary-400);
          &::before {
            background-image: url("../images/common/header-icon-02_x2.webp");
          }
        }

        .c-header-nav-contact {
          /* お問い合わせボタン */
          background-color: var(--color-primary-700);
          &::before {
            background-image: url("../images/common/header-icon-03_x2.webp");
          }
        }
      }

      .c-header-hamburgerBtn {
        display: none;
        height: 100%;
        aspect-ratio: 1;

        .menuBtn {
          --size: 100%;
          --positiveColor: var(--color-primary-300);
          --negativeColor: var(--color-white);
          --border-distance: 0.7em;

          position: relative;
          background-color: var(--negativeColor);
          display: grid;
          place-items: center;
          width: var(--size);
          height: var(--size);
          padding-inline: 25%;
          border: none;

          > span.border {
            --borderSize: 2px;

            position: relative;
            background-color: var(--positiveColor);
            height: var(--borderSize);
            width: 100%;
            transition-duration: 0.3s;
            transition-timing-function: ease-out;
            transition-property: background-color;

            &::before,
            &::after {
              content: "";
              display: inline-block;
              position: absolute;
              inset: 0;
              background-color: var(--positiveColor);
              height: var(--borderSize);
              width: 100%;
              transition-duration: 0.3s;
              transition-timing-function: ease-out;
              transition-property: transform, background-color;
            }

            &::before {
              transform: translateY(var(--border-distance));
            }

            &::after {
              transform: translateY(calc(var(--border-distance) * -1));
            }
          }

          &:is(.js-isOpen) {
            > span.border {
              background-color: var(--negativeColor);

              &::before {
                transform: translateY(0) rotate(45deg);
              }
              &::after {
                transform: rotate(-45deg);
              }
            }
          }
        }
      }

      @media (width < 1110px) {
        .c-header-nav-main,
        .c-header-nav-sub {
          display: none;
        }
        .c-header-hamburgerBtn {
          display: block;
        }
      }
    }

    .c-header-searchForm {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-content: end;
      column-gap: 1.5em;
      align-items: center;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      overflow: hidden;
      background-color: var(--color-primary-300);
      padding-inline: 80px;

      > p {
        color: var(--color-white);
        justify-self: end;
      }

      form.gsc-search-box {
        display: flex;
        align-items: center;
        padding-block: var(--spacing-md);
        margin-bottom: 0 !important;

        table,
        tbody,
        tr,
        td,
        div.gsc-input-box {
          background-color: unset !important;
          border: none !important;
          padding: unset !important;
        }
        td.gsib_b {
          display: none !important;
        }

        input[type="text"] {
          padding: var(--spacing-xs) var(--spacing-md) !important;
          height: auto !important;
          margin: unset !important;
          border: none !important;
          border-radius: 10px 0 0 10px;
          background-color: var(--color-white);
          color: var(--color-gray-800);
          font-size: var(--text-md) !important;
        }

        button.gsc-search-button {
          background-color: var(--color-primary-50) !important;
          padding: var(--spacing-xs) var(--spacing-md) !important;
          border: none !important;
          border-radius: 0 10px 10px 0 !important;
          margin-inline-start: 0.5rem !important;
          font-size: var(--text-md) !important;
          font-weight: bold;
          white-space: nowrap;

          &::before {
            content: "検索する";
          }

          > svg {
            display: none !important;
          }

          @media (hover: hover) {
            &:enabled:hover {
              background-color: var(--color-primary-100);
            }
          }
        }
      }
    }
  }

  /* ナビゲーションメニュー */
  .c-navMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: var(--z-index-navMenu);
    overflow: hidden;
    padding-block-start: var(--header-height);
    background-color: var(--color-white);

    .c-navMenu-inner {
      display: grid;
    }

    .c-navMenu-searchForm {
      background-color: var(--color-primary-300);
      padding-inline: 1rem;
      padding-block: 0.5rem;

      > p {
        display: flex;
        column-gap: 0.3em;
        align-items: center;
        grid-column: 1 / -1;
        font-size: var(--text-md);
        color: var(--color-white);
        place-self: center;

        &::before {
          --size: 1.2em;
          content: "";
          display: block;
          background-color: var(--color-white);
          mask-image: url("../images/common/icon-search.svg");
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          width: var(--size);
          height: var(--size);
        }
      }

      form.gsc-search-box {
        display: grid;
        grid-template-columns: 1fr auto;
        row-gap: var(--spacing-sm);
        align-items: center;
        padding-block: var(--spacing-md);

        table,
        tbody,
        tr,
        td,
        div.gsc-input-box {
          background: unset !important;
          background-color: unset !important;
          border: none !important;
          padding: unset !important;
        }
        td.gsib_b {
          display: none !important;
        }

        input[type="text"],
        button {
          padding: var(--spacing-xs) var(--spacing-md) !important;
          height: auto !important;
          margin: unset !important;
          border: none !important;
          min-height: 2.5rem;
        }
        input[type="text"] {
          border: none;
          border-radius: 10px 0 0 10px;
          background-color: var(--color-white);
          color: var(--color-gray-800);
          width: 100%;
          font-size: 1.1rem;
        }

        button.gsc-search-button {
          background-color: var(--color-primary-50) !important;
          border: none !important;
          border-radius: 0 10px 10px 0 !important;
          margin-inline-start: 0.5rem !important;
          font-size: var(--text-md) !important;
          font-weight: bold;
          white-space: nowrap !important;
          letter-spacing: 0 !important;

          &::before {
            content: "検索する";
          }
          > svg {
            display: none !important;
          }

          @media (hover: hover) {
            &:enabled:hover {
              background-color: var(--color-primary-100);
            }
          }
        }
      }
    }

    .c-navMenu-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;

      > li a {
        display: grid;
        grid-template-rows: 3fr 2fr;
        place-items: center;
        font-size: var(--text-sm);
        font-weight: bold;
        text-align: center;
        line-height: 1.2;
        border: 0;
        padding-block: 0.7em 0.4em;
        padding-inline: 0;
        color: var(--color-white);

        &::before {
          --size: 2.3rem;
          content: "";
          width: var(--size);
          height: var(--size);
          background-repeat: no-repeat;
          background-size: contain;
        }
      }
      .c-navMenu-order {
        /* 試験依頼ボタン */
        background-color: var(--color-primary-400);
        &::before {
          background-image: url("../images/common/header-icon-02_x2.webp");
        }
      }

      .c-navMenu-contact {
        /* お問い合わせボタン */
        background-color: var(--color-primary-700);
        &::before {
          background-image: url("../images/common/header-icon-03_x2.webp");
        }
      }
    }

    .c-navMenu-list {
      display: grid;
      padding-inline: 1rem;

      > li a {
        text-align: center;
        display: block;
        padding: 1em;
        border-bottom: 1px dashed currentColor;
        font-size: 1.0625rem; /* 17px */
        font-weight: bold;
      }
    }
  }

  /* サイド追従テキスト */
  .c-side-text {
    position: fixed;
    top: 50%;
    right: var(--spacing-md);
    transform: translateY(-50%);
    z-index: var(--z-index-sideText);
    font-family: var(--font-family-roboto);
    font-size: var(--text-md);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-property: opacity, right, transform;

    @media (width < 768px) {
      font-size: var(--text-xs);
    }

    &.js-isSmall {
      opacity: 0.5;
      transform: translateY(-50%) scale(0.6);
      right: 0.3em;
    }
  }

  /* パンくずリスト */
  .c-breadcrumb {
    position: relative;
    padding: var(--spacing-sm) 0;
    background-color: var(--color-primary-50);
    font-size: var(--text-sm);

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      content: "";
      display: block;
      width: calc(120px * 3);
      height: 100%;
      background-color: var(--color-primary-100);

      @media (width < 1110px) {
        display: none;
      }
    }

    > ol {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;

      > li {
        line-height: 1em;

        > a {
          display: inline-flex;
          align-items: center;
          column-gap: 0.5rem;
          color: var(--color-primary-300);

          @media (hover: hover) {
            &:hover {
              color: var(--color-primary-200);
            }
          }

          &::after {
            --size: 0.7em;
            content: "";
            display: inline-block;
            width: var(--size);
            height: var(--size);
            background-color: currentColor;
            mask-image: url("../images/common/icon-breadcrumb-arrow.svg");
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
          }
        }
      }
    }
  }

  /* フッター */
  .c-footer {
    background-color: var(--color-primary-300);
    color: var(--color-white);
    padding-block-start: var(--spacing-2xl);
    padding-block-end: var(--spacing-sm);

    @media (width < 640px) {
      padding-block-start: var(--spacing-xl);
      padding-block-end: var(--spacing-2xl);
    }

    .c-footer-inner {
      display: grid;
      grid-template-columns: 1fr 2fr;
      grid-template-areas:
        "logo nav-main"
        "nav-sub nav-main"
        "copyright copyright";
      gap: var(--spacing-xl);

      @media (width < 1024px) {
        grid-template-columns: 1fr;
        grid-template-areas:
          "logo"
          "nav-sub"
          "copyright";
        justify-items: center;
        row-gap: var(--spacing-2xl);

        .c-footer-nav-main {
          display: none;
        }
      }
    }

    .c-footer-logo {
      grid-area: logo;
      display: grid;
      row-gap: var(--spacing-sm);
      align-items: center;
      margin-block: 0;

      > img {
        max-width: 46vw;
        background-color: var(--color-white);
        padding: 1rem;
      }

      > p {
        font-size: var(--text-sm);
      }
      @media (width < 1024px) {
        row-gap: 1rem;
        justify-items: center;
      }
    }
    .c-footer-nav-main {
      grid-area: nav-main;
      gap: var(--spacing-lg);
      font-weight: bold;
      font-size: 0.875rem; /* 14px */

      > ul {
        display: grid;
        grid-template-rows: auto auto auto auto auto 1fr;
        grid-template-columns: auto 1fr 1fr 1fr;
        grid-auto-flow: column;
        column-gap: var(--spacing-lg);
        row-gap: var(--spacing-sm);

        @media (width < 640px) {
          grid-template-columns: repeat(2, auto);
          grid-template-rows: unset;
          grid-auto-flow: row;
        }

        @media (hover: hover) {
          a:any-link:hover {
            color: var(--color-primary-100);
          }
        }
      }

      > ul ul {
        font-size: 0.8125rem; /* 13px */
        padding-inline-start: 0.3em;
        display: grid;
        row-gap: 0.5em;
        line-height: 1.5em;
        padding-block-start: 0.3em;

        > li a {
          padding-inline-start: 1em;
          display: inline-block;
          &::before {
            content: ">";
            padding-inline-end: 0.3em;
            margin-inline-start: -1em;
            font-size: 0.8em;
          }
        }
      }
    }

    .c-footer-nav-sub {
      place-self: center start;
      grid-area: nav-sub;
      > ul {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(3, auto);
        grid-template-columns: repeat(2, auto);
        column-gap: var(--spacing-lg);
        justify-content: start;
        font-size: 0.75rem; /* 12px */

        > li a {
          padding-inline-start: 1em;
          display: inline-block;
          &::before {
            content: ">";
            padding-inline-end: 0.2em;
            margin-inline-start: -1em;
          }
          @media (hover: hover) {
            &:any-link:hover {
              color: var(--color-primary-100);
            }
          }
        }
      }
      @media (width < 1024px) {
        place-self: center;
        > ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          column-gap: 1em;
          row-gap: var(--spacing-xs);

          > li a::before {
            content: "｜";
            padding-inline-end: 1em;
          }
          > li:first-child a::before {
            content: none;
            padding-inline-end: 0;
          }
        }
      }
    }
    .c-footer-copyright {
      grid-area: copyright;
      font-size: var(--text-xs);
      font-weight: bold;
      font-family: var(--font-family-roboto);
      text-transform: uppercase;
      letter-spacing: 0.25em;

      @media (width < 640px) {
        font-size: 9px;
        letter-spacing: 0.15em;
      }
    }
  }

  /* ヒーローセクション */
  .c-hero {
    display: grid;
    justify-items: center;
    padding-block: var(--spacing-4xl);
    padding-inline: var(--spacing-2xl);
    /* row-gap: var(--spacing-2xl); */

    .c-hero-mainText {
      font-size: var(--text-3xl);
      font-weight: bold;
      text-align: center;
      line-height: 1.5;
      padding-block-start: var(--spacing-3xl);
    }

    .c-hero-subText {
      font-size: var(--text-lg);
      text-align: center;
      line-height: 1.75;
      padding-block-start: var(--spacing-2xl);
    }

    .c-hero-badges {
      display: grid;
      place-items: center;
      row-gap: var(--spacing-sm);
      padding-block-start: var(--spacing-md);
    }

    .c-hero-badge {
      display: flex;
      justify-content: center;
      gap: 0.6em;
      flex-wrap: wrap;

      > li {
        background-color: var(--color-gray-50);
        padding: 0.1em var(--spacing-sm);
        font-size: var(--text-xs);
        /* min-width: 10em; */
        text-align: center;
      }
    }
    .c-hero-badge--blue li {
      background-color: var(--color-primary-100);
    }

    .c-hero-phone {
      display: flex;
      place-content: center;
      flex-wrap: wrap;
      align-items: center;
      column-gap: var(--spacing-xs);
      font-size: var(--text-lg);
      margin-block-start: var(--spacing-2xl);
      > a {
        display: flex;
        align-items: center;
        column-gap: 0.1em;
        font-size: 32px;
        font-weight: bold;
        font-family: var(--font-family-roboto);
        color: var(--color-primary-300);

        &::before {
          --size: 0.7em;
          content: "";
          display: inline-block;
          background-color: currentColor;
          mask-image: url("../images/common/icon-contact-phone.svg");
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          width: var(--size);
          height: var(--size);
        }
      }
    }

    .c-hero-mail {
      display: flex;
      place-content: center;
      flex-wrap: wrap;
      align-items: center;
      column-gap: var(--spacing-lg);
      font-size: var(--text-lg);
      > a {
        display: flex;
        align-items: center;
        column-gap: 0.3em;
        font-size: 1.3em;
        font-weight: bold;
        font-family: var(--font-family-roboto);
        color: var(--color-primary-300);

        &::before {
          --size: 0.9em;
          content: "";
          display: inline-block;
          background-color: currentColor;
          mask-image: url("../images/common/icon-contact-mail.svg");
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          width: var(--size);
          height: var(--size);
        }
      }
    }
  }

  /* ボタン */
  .c-button {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr auto;
    column-gap: 1em;
    align-items: center;
    padding: 1em 2em;
    background-color: var(--color-primary-400);
    border: 1px solid transparent;
    min-width: 19em;
    color: var(--color-white);
    font-size: var(--text-lg);
    font-weight: bold;
    text-align: center;
    text-decoration: none;

    &::after {
      --size: 1.2em;
      content: "";
      width: var(--size);
      height: var(--size);
      background-color: currentColor;
      mask: url("../images/common/icon-arrow-right.svg") center / contain
        no-repeat;
      display: inline-block;
    }

    @media (hover: hover) {
      &:hover {
        background-color: var(--color-secondary-500);
      }
    }
  }

  .c-button--light {
    background-color: var(--color-primary-300);
  }
  .c-button--dark {
    background-color: var(--color-primary-700);
  }
  .c-button--outline {
    color: var(--color-primary-300);
    border: 1px solid var(--color-primary-300);
    background-color: unset;

    @media (hover: hover) {
      &:hover {
        color: var(--color-white);
        background-color: var(--color-primary-300);
        border: 1px solid currentColor;
      }
    }
  }
  .c-button--bgWhite {
    background-color: var(--color-white);
  }
  .c-button--arrowDown {
    &::after {
      transform: rotate(90deg);
    }
  }
  .c-button--noIcon {
    column-gap: 0;
    &::after {
      content: none;
    }
  }
  .c-button--iconPDF {
    &::after {
      --size: 1.3em;
      background-color: currentColor;
      mask: url("../images/common/icon-file-pdf.svg") center / contain no-repeat;
    }
  }
  .c-button--sm {
    min-width: 18em;
    padding-block: 0.6em;
    padding-inline: var(--spacing-xl) var(--spacing-xs);
    font-size: var(--text-md);
  }
  .c-button--xs {
    min-width: unset;
    padding: var(--spacing-xs) var(--spacing-lg);
    font-size: var(--text-sm);
    &::after {
      --size: 1em;
    }
  }

  .c-button--disabled {
    background-color: var(--color-gray-300);
    border-color: var(--color-gray-300);
    color: var(--color-gray-100);
    cursor: not-allowed;
    pointer-events: none;
  }

  /* 見出し */
  .c-heading-lv1 {
    display: grid;
    place-items: center;
    row-gap: var(--spacing-md);
    /* font-size: var(--text-xl); */
    font-size: clamp(1rem, 0.907rem + 0.46vw, 1.313rem);
    font-weight: bold;
    margin-block: 0;

    &::before {
      order: -2;
      content: attr(data-label);
      display: block;
      /* font-size: 3.5rem; */
      font-size: clamp(1.25rem, 0.583rem + 3.33vw, 3.5rem);

      text-transform: uppercase;
      text-align: center;
      font-weight: 500;
      font-family: var(--font-family-roboto);
      color: var(--color-primary-300);
      letter-spacing: 0.12em;
      line-height: 1.25;
    }
    &::after {
      order: -1;
      content: "";
      display: inline-block;
      width: 3.25rem;
      height: 1px;
      background-color: currentColor;
    }
  }

  /* サイドメニュー */
  .c-sideMenu {
    --headerHeight: 90px;
    align-self: flex-start;
    position: sticky;
    top: calc(var(--headerHeight) + var(--spacing-lg));

    > header {
      font-size: var(--text-xl);
      font-weight: bold;
      text-align: center;
      display: grid;
      row-gap: var(--spacing-sm);
      padding: var(--spacing-sm);
      background-color: var(--color-gray-50);

      > .c-button {
        min-width: unset;
        font-size: var(--text-md);
        &::after {
          --size: 1em;
        }
      }
    }

    .c-sideMenu-list {
      button {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        width: 100%;
        padding: 1em var(--spacing-sm);
        border-width: 0 0 1px 0;
        border-style: solid;
        border-color: var(--color-gray-800);
        background-color: var(--color-white);

        .toggleIcon {
          --size: 1.2em;
          position: relative;
          display: inline-block;
          width: var(--size);
          height: var(--size);
          &::before,
          &::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%);
            content: "";
            display: inline-block;
            width: var(--size);
            height: 1px;
            background-color: var(--color-gray-900);
            transition-duration: 0.3s;
            transition-timing-function: ease-out;
            transition-property: transform;
          }
          &::after {
            transform: translateX(-50%) rotate(90deg);
          }
        }
        &.js-isOpen {
          background-color: color-mix(
            in srgb,
            var(--color-white),
            var(--color-primary-50) 30%
          );
          .toggleIcon {
            &::after {
              transform: translateX(-50%) rotate(0);
            }
          }
        }
      }
      ul {
        background-color: var(--color-white);

        overflow-y: hidden;
      }
      li > a {
        display: block;
        font-size: var(--text-sm);
        color: var(--color-primary-700);
        border-bottom: 1px dashed var(--color-gray-800);
        padding: 0.6rem var(--spacing-sm);
      }

      .c-sideMenu-list-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em 0.2em;

        /* 上下余白用疑似要素 */
        &::before,
        &::after {
          content: "";
          display: block;
          width: 100%;
          height: 0.5em;
        }

        > li a {
          display: inline-block;
          padding: 0.2em 0.5em;
          font-size: var(--text-xs);
          color: var(--color-primary-700);
          border: 1px solid currentColor;
        }
      }

      @media (hover: hover) {
        button:enabled:hover,
        a:any-link:hover {
          background-color: color-mix(
            in srgb,
            var(--color-white),
            var(--color-primary-50) 30%
          );
        }
      }
    }
  }

  /* 下部情報リンクセクション */
  .c-bottom-info {
    background-color: var(--color-gray-50);
    padding-block: var(--spacing-2xl);

    > div {
      display: grid;
      row-gap: var(--spacing-xl);
    }
    .c-bottom-info-title {
      font-size: var(--text-xl);
      font-weight: bold;
      text-align: center;
      color: var(--color-primary-300);
    }

    .c-bottom-info-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: var(--spacing-lg) var(--spacing-xl);

      > li a {
        display: flex;
        align-items: center;
        column-gap: 1em;
        background-color: var(--color-white);
        padding: var(--spacing-xs) var(--spacing-sm);

        &::before {
          --size: 3em;
          content: "";
          width: var(--size);
          height: var(--size);
          background-color: currentColor;
          mask: var(--url) center / contain no-repeat;
          display: inline-block;
        }
        @media (hover: hover) {
          &:hover {
            background-color: color-mix(
              in srgb,
              transparent,
              var(--color-primary-300) 10%
            );
          }
        }
      }
      > li:first-child {
        a {
          &::before {
            background: url(../images/common/icon-bottom-info-01.webp) center
              center / 90% auto no-repeat;
          }
        }
      }
    }
  }

  /* 下部企業情報リンクセクション */
  .c-companyInfo-links {
    padding-block: var(--spacing-5xl);
    ul {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-template-rows: repeat(3, auto);
      gap: var(--spacing-xl);

      li {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
      }
    }

    a {
      --padding: 2rem;
      display: grid;
      grid-template-rows: inherit;
      grid-row: span 3;
      justify-items: center;
      row-gap: var(--spacing-sm);
      background-color: var(--color-primary-50);

      @media (hover: hover) {
        &:any-link:hover {
          background-color: color-mix(
            in srgb,
            var(--color-primary-50),
            var(--color-primary-300) 5%
          );
        }
      }

      > p:nth-of-type(1) {
        font-size: var(--text-xl);
        font-weight: bold;
        text-align: center;
        padding-inline: var(--padding);
      }
      > p:nth-of-type(2) {
        font-size: var(--text-sm);
        padding-inline: var(--padding);
        padding-block-end: var(--padding);
        letter-spacing: var(--letter-spacing-md);
      }
    }
  }

  /* お問い合わせセクション */
  .c-contact {
    background: url(../images/common/contact-bg.webp) no-repeat center
      center/cover;
    color: var(--color-white);

    .c-contact-inner {
      display: grid;
      place-items: center;
      row-gap: var(--spacing-2xl);
      padding-block: var(--spacing-4xl);
    }

    .c-contact-title {
      text-transform: uppercase;
      font-family: var(--font-family-roboto);
      font-weight: 500;
      font-size: 56px;
      line-height: 1em;
      letter-spacing: 0.12em;

      @media (width < 768px) {
        font-size: 40px;
      }
      @media (width < 640px) {
        font-size: 32px;
      }
    }

    .c-contact-description {
      font-size: var(--text-3xl);
      line-height: 1.5;
      text-align: center;
    }
    .c-contact-links {
      display: flex;
      place-content: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
    }
    .c-contact-phone {
      display: flex;
      place-content: center;
      flex-wrap: wrap;
      align-items: center;
      column-gap: var(--spacing-xs);
      font-size: var(--text-lg);
      > a {
        display: flex;
        align-items: center;
        column-gap: 0.1em;
        font-size: 32px;
        font-weight: bold;
        font-family: var(--font-family-roboto);

        &::before {
          --size: 0.7em;
          content: "";
          display: inline-block;
          background-color: currentColor;
          mask-image: url("../images/common/icon-contact-phone.svg");
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          width: var(--size);
          height: var(--size);
        }
      }
    }
  }
  /* ページネーション */
  .c-pagination-wrapper {
    display: grid;
    justify-content: center;
    padding-block: var(--spacing-2xl);
  }
  .c-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;

    > li a,
    > li span {
      display: inline-block;
      padding: 0.6em 0.7em;
      font-size: var(--text-lg);
      font-family: var(--font-family-roboto);
      font-weight: bold;
      background-color: var(--color-primary-50);

      @media (hover: hover) {
        &:any-link:hover {
          background-color: var(--color-primary-100);
        }
      }
    }

    > li span {
      background-color: var(--color-primary-300);
      color: var(--color-white);
      pointer-events: none;
    }
  }
}

@layer utilities {
  /* ユーティリティクラス */
  .font-roboto {
    font-family: var(--font-family-roboto);
  }

  br:where(.xs, .sm, .md, .lg) {
    display: none;
  }
  @media (width < 640px) {
    br.xs {
      display: block;
    }
  }
  @media (640px <= width < 768px) {
    br.sm {
      display: block;
    }
  }
  @media (768px <= width < 1024px) {
    br.md {
      display: block;
    }
  }
  @media (1024px <= width) {
    br.lg {
      display: block;
    }
  }
}