@charset "UTF-8";

/* =====================
  Custom properties
===================== */
:root {
  --black: #111;
  --blue: #1c75d1;
  --deepblue: #003b85;
  --water: #e9f1f2;
  --yumin: 'Yu Mincho Demibold', 'YuMincho Demibold', '游明朝', 'Yu Mincho Regular', 'Yu Mincho', 'YuMincho Medium', serif;
  --yugo: '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ ゴシック', sans-serif;
  --author: 'Yuji Syuku', system-ui;
  --title: 'Outfit', sans-serif;
  --icon-mail: url('data:image/svg+xml,<svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.375 0C2.47989 0 1.62145 0.355579 0.988515 0.988515C0.355579 1.62145 0 2.47989 0 3.375V13.125C0 14.0201 0.355579 14.8785 0.988515 15.5115C1.62145 16.1444 2.47989 16.5 3.375 16.5H17.625C18.5201 16.5 19.3785 16.1444 20.0115 15.5115C20.6444 14.8785 21 14.0201 21 13.125V3.375C21 2.47989 20.6444 1.62145 20.0115 0.988515C19.3785 0.355579 18.5201 0 17.625 0H3.375ZM19.5 4.05225L10.5 8.898L1.5 4.05225V3.375C1.5 2.87772 1.69754 2.40081 2.04917 2.04917C2.40081 1.69754 2.87772 1.5 3.375 1.5H17.625C18.1223 1.5 18.5992 1.69754 18.9508 2.04917C19.3025 2.40081 19.5 2.87772 19.5 3.375V4.05225ZM1.5 5.7555L10.1445 10.4108C10.2538 10.4696 10.3759 10.5004 10.5 10.5004C10.6241 10.5004 10.7462 10.4696 10.8555 10.4108L19.5 5.7555V13.125C19.5 13.6223 19.3025 14.0992 18.9508 14.4508C18.5992 14.8025 18.1223 15 17.625 15H3.375C2.87772 15 2.40081 14.8025 2.04917 14.4508C1.69754 14.0992 1.5 13.6223 1.5 13.125V5.7555Z" fill="currentColor"/></svg>');
  --icon-circle: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5.5" stroke="currentColor"/><circle cx="6" cy="6" r="3" fill="currentColor"/></svg>');
  --icon-arrow-circle: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none"><circle cx="30" cy="30" r="29.5" transform="matrix(-1 0 0 1 60 0)" stroke="currentColor"/><path d="M33.3333 38.3332L25 29.9998L33.3333 21.6665" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --icon-plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="41" viewBox="0 0 40 41" fill="none"><line x1="20.5" y1="0.500061" x2="20.5" y2="40.5001" stroke="currentColor"/><line x1="40" y1="21.0001" x2="2.42633e-06" y2="21.0001" stroke="currentColor"/></svg>');
  --icon-home: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none"><path d="M12.7309 5.90169L6.82435 0.131418C6.78182 0.0897586 6.73131 0.056708 6.6757 0.0341577C6.62009 0.0116074 6.56047 0 6.50027 0C6.44006 0 6.38045 0.0116074 6.32484 0.0341577C6.26923 0.056708 6.21872 0.0897586 6.17619 0.131418L0.26959 5.90169C0.0975112 6.06991 0 6.29843 0 6.53675C0 7.03163 0.411555 7.43397 0.917752 7.43397H1.5401V11.5514C1.5401 11.7995 1.74516 12 1.99898 12H5.58252V8.85972H7.18858V12H11.0016C11.2554 12 11.4604 11.7995 11.4604 11.5514V7.43397H12.0828C12.3266 7.43397 12.5603 7.34005 12.7324 7.17041C13.0894 6.81994 13.0894 6.25216 12.7309 5.90169Z" fill="currentColor"/></svg>');
  --icon-zoom: url('data:image/svg+xml,<svg height="200" width="200" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 5.75a.75.75 0 0 1 .75.75v3.25h3.25a.75.75 0 0 1 0 1.5h-3.25v3.25a.75.75 0 0 1-1.5 0v-3.25H6.5a.75.75 0 0 1 0-1.5h3.25V6.5a.75.75 0 0 1 .75-.75Z" fill="currentColor"/><path d="M0 10.5C0 4.701 4.701 0 10.5 0S21 4.701 21 10.5c0 2.63-.967 5.033-2.564 6.875l4.344 4.345a.749.749 0 1 1-1.06 1.06l-4.345-4.344A10.459 10.459 0 0 1 10.5 21C4.701 21 0 16.299 0 10.5Zm10.5-9a9 9 0 0 0-9 9a9 9 0 0 0 9 9a9 9 0 0 0 9-9a9 9 0 0 0-9-9Z" fill="currentColor"/></svg>');
  --icon-cross: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" viewBox="0 0 53 53" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M26.6683 24.6931L14.6475 12.6723L13.2333 14.0865L25.2541 26.1073L12.5262 38.8353L13.9404 40.2495L26.6683 27.5216L39.3962 40.2495L40.8105 38.8353L28.0825 26.1073L40.1034 14.0865L38.6891 12.6723L26.6683 24.6931Z" fill="currentColor"/></svg>');
  --inner: 1120px;
  --header-height: 130px;

  /* ==== アニメーション easing関数 ==== */
  --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
  --easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
  --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
  --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
  --easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
}

@media not all and (width >= 768px) {
  :root {
    --inner: 100%;
    --header-height: calc((100 / 750) * 120 * 1vw);
  }
}

@layer style {
  html,
  body {
    font-family: var(--yugo);
    font-weight: 500;
    line-height: 1.8;
    color: var(--black);
  }

  @media not all and (width >= 768px) {
    html,
    body {
      font-weight: normal;
    }
  }

  @media print, screen and (width >= 768px) {
    body {
      min-inline-size: 1300px;
    }

    .sp {
      display: none;
    }
  }

  @media not all and (width >= 768px) {
    .pc {
      display: none;
    }
  }

  main {
    min-block-size: 80svh;
    padding-block-start: var(--header-height);
  }

  /* p */
  p {
    line-height: 2.12;
  }

  /* =====================
    hover
  ===================== */
  @media (any-hover: hover) {
    .hover-op {
      transition: opacity 250ms ease 0s;
      will-change: opacity;

      &:hover {
        opacity: 0.6;
      }
    }
  }

  /* =====================
    utility
  ===================== */
  .mincho {
    font-family: var(--mincho);
  }

  .fwb {
    font-weight: bold;
  }

  .tac {
    text-align: center;
  }

  [lang='en'] {
    font-family: var(--title);
    font-weight: 400;
    letter-spacing: 0.88px;
    word-break: break-all;

    @media not all and (width >= 768px) {
      letter-spacing: calc((100 / 750) * 1.12 * 1vw);
    }
  }

  [data-type='uppercase'] {
    text-transform: uppercase;
    letter-spacing: unset;
  }

  .u-inner {
    inline-size: 100%;
    max-inline-size: var(--inner);
    margin-inline: auto;
    transition: inline-size 250ms ease 0s;

    @media not all and (width >= 1000px) {
      inline-size: 100%;
      padding-inline: 40px;
      margin-inline: 0;
    }

    @media not all and (width >= 768px) {
      inline-size: var(--inner);
      padding-inline: unset;
      margin-inline: auto;
    }
  }

  /* =====================
    lenis
  ===================== */
  html.lenis,
  html.lenis body {
    block-size: auto;
  }

  .lenis.lenis-smooth {
    scroll-behavior: auto !important;

    &[data-lenis-prevent] {
      overscroll-behavior: contain;
    }
  }

  .lenis.lenis-stopped {
    overflow: hidden;

    & iframe {
      pointer-events: none;
    }
  }

  /* =====================
    u-anchor
  ===================== */
  .u-anchor {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding-block: 14px;
    padding-inline: 39px;
    color: white;
    background: var(--blue);
    border: 3px solid var(--blue);
    border-radius: calc(infinity * 1px);
    transition: all 250ms ease 0s;
  }

  .u-anchor:not([data-type='contact']) {
    gap: 16px;
    padding-block: 16px;
    padding-inline: 17px;
    font-family: var(--yugo);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08px;

    @media not all and (width >=768px) {
      gap: calc((100 / 750) * 19 * 1vw);
      padding-block: calc((100 / 750) * 22 * 1vw);
      padding-inline: calc((100 / 750) * 22 * 1vw);
      font-size: calc((100 / 750) * 24 * 1vw);
    }

    &::before {
      display: block;
      inline-size: 26px;
      aspect-ratio: 1 / 1;
      content: '';
      background-image: url('../img/common/arrow.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media not all and (width >=768px) {
      &::before {
        inline-size: calc((100 / 750) * 40 * 1vw);
      }
    }

    @media (any-hover: hover) {
      &:hover {
        color: var(--blue);
        background: white;

        &::before {
          background-image: url('../img/common/arrow-on.svg');
        }
      }
    }
  }

  .u-anchor[data-type='contact'] {
    gap: 10px;
    padding-block: 7px;
    font-size: 22px;

    &::before {
      display: block;
      inline-size: px;
      width: 21px;
      height: 17px;
      aspect-ratio: 1 / 1;
      content: '';
      background-color: currentcolor;
      mask-image: var(--icon-mail);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }

    @media (any-hover: hover) {
      &:hover {
        color: var(--blue);
        background: white;

        &::before {
          background-image: url('../img/common/arrow-on.svg');
        }
      }
    }
  }

  .u-anchor[data-type='map'] {
    gap: 16px;
    padding-block: 16px;
    padding-inline: 17px;
    font-family: var(--yugo);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08px;

    @media not all and (width >=768px) {
      gap: 2.8vw;
      padding-block: 3vw;
      padding-inline: 3.2vw;
      font-size: calc((100 / 750) * 24 * 1vw);
    }

    &::before {
      display: block;
      background-image: url('../img/common/blank.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }

  /* =====================
    u-link
  ===================== */
  .u-link {
    display: grid;
    grid-auto-flow: column;
    gap: 8px;
    align-items: center;
    align-self: flex-start;
    justify-content: flex-start;
    font-size: 12px;
    font-weight: bold;
    transition: all 250ms ease 0s;

    @media not all and (width >=768px) {
      gap: calc((100 / 750) * 14 * 1vw);
      align-self: center;
      font-size: calc((100 / 750) * 24 * 1vw);
    }

    @media (any-hover: hover) {
      &:hover {
        color: var(--blue);

        &::after {
          translate: 10% 0;
        }
      }
    }

    &::after {
      inline-size: 22px;
      aspect-ratio: 1 / 1;
      content: '';
      background-image: url('../img/common/link.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transition: inherit;
    }

    @media not all and (width >=768px) {
      &::after {
        inline-size: calc((100 / 750) * 50 * 1vw);
      }
    }
  }

  /* =====================
    u-title
  ===================== */
  .u-title {
    display: grid;
    gap: 3px;
    word-break: break-all;

    @media not all and (width >=768px) {
      gap: calc((100 / 750) * 7 * 1vw);
      margin-block-end: 5.7vw;
    }

    & :where(h2, h1) {
      display: grid;
      grid-auto-flow: column;
      gap: 9px;
      align-items: center;
      justify-content: flex-start;
      font-size: 18px;
      font-weight: bold;
      color: var(--blue);

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 18.6 * 1vw);
        font-size: calc((100 / 750) * 28 * 1vw);
      }

      &::before {
        display: block;
        inline-size: 12px;
        aspect-ratio: 1 / 1;
        content: '';
        background-color: currentcolor;
        mask-image: var(--icon-circle);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
      }

      @media not all and (width >=768px) {
        &::before {
          inline-size: calc((100 / 750) * 20 * 1vw);
        }
      }
    }

    & [lang='en'] {
      font-size: 66px;
      font-weight: 600;
      line-height: 1;

      @media not all and (width >=768px) {
        font-size: calc((100 / 750) * 80 * 1vw);
      }
    }
  }

  .u-title[data-color='white'] {
    & :where(h2, h1),
    & [lang='en'] {
      color: white;
    }
  }

  .u-title[data-type='center'] {
    justify-content: center;

    & :where(h2, h1) {
      justify-content: center;

      &::after {
        display: block;
        inline-size: 12px;
        aspect-ratio: 1 / 1;
        content: '';
        background-color: currentcolor;
        mask-image: var(--icon-circle);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
      }

      @media not all and (width >=768px) {
        &::after {
          inline-size: calc((100 / 750) * 20 * 1vw);
          margin-inline-start: calc((100 / 750) * 9 * 1vw);
        }
      }
    }
  }

  /* =====================
    u-breadcrumb
  ===================== */
  .u-breadcrumb {
    --_margin: 15px;

    @media not all and (width >=768px) {
      --_margin: calc((100 / 750) * 30 * 1vw);
    }

    display: flex;
    flex-wrap: wrap;
    gap: var(--_margin);
    align-items: center;
    justify-content: flex-end;
    padding-block: 20px;
    padding-inline-end: 30px;
    font-size: 12px;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 26.7 * 1vw);
      padding-inline: calc((100 / 750) * 19 * 1vw);
      font-size: calc((100 / 750) * 22 * 1vw);
    }

    & :where(a, span) {
      display: grid;
      grid-auto-flow: column;
      gap: 6px;
      align-items: center;
      justify-content: flex-start;
      line-height: 1;

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 10 * 1vw);
        font-weight: 500;
      }
    }

    & a[href='/']::before {
      display: block;
      inline-size: 13px;
      aspect-ratio: 1 / 1;
      content: '';
      background-color: #c1d9ed;
      mask-image: var(--icon-home);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }

    @media not all and (width >=768px) {
      & a[href='/']::before {
        display: none;
      }
    }

    .item + .item::before {
      display: inline-flex;
      margin-inline-end: var(--_margin);
      content: '›';
    }
  }

  /* =====================
    u-mv
  ===================== */
  .u-mv {
    position: relative;
    padding-block-start: 64px;
    padding-inline: 120px;
    overflow: hidden;
    background-image: url('../img/common/bg.webp');
    background-repeat: no-repeat;
    background-size: cover;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 35 * 1vw) 0;
      padding-inline: calc((100 / 750) * 40 * 1vw);
      background-image: url('../img/common/bg_sp.webp');
      background-position: 0 0;
      background-size: contain;
    }

    & hgroup {
      display: grid;
      gap: 44px;
      justify-content: flex-start;
      margin-block-end: 93px;

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 32 * 1vw);
        margin-block-end: 9.6vw;
      }

      & [lang='en'] {
        position: relative;
        display: block;
        width: fit-content;
        font-size: 22px;
        line-height: 1;
        color: var(--blue);
        letter-spacing: 2px;

        @media not all and (width >=768px) {
          font-size: calc((100 / 750) * 33 * 1vw);
        }
      }

      & [lang='en']::before {
        position: absolute;
        top: 50%;
        right: 110%;
        z-index: -1;
        inline-size: 100%;
        width: 100vw;
        block-size: 1px;
        content: '';
        background-color: currentcolor;
      }

      @media not all and (width >=768px) {
        & [lang='en']::before {
          right: 107%;
        }
      }

      h1 {
        font-size: 44px;
        font-weight: bold;
        line-height: 1;

        @media not all and (width >=768px) {
          font-size: calc((100 / 750) * 56 * 1vw);
        }
      }
    }

    & p {
      margin-block-end: 28px;

      @media not all and (width >=768px) {
        margin-block-end: calc((100 / 750) * 40 * 1vw);
        font-size: calc((100 / 750) * 26 * 1vw);
        line-height: 1.76;
      }
    }

    .nav {
      display: grid;
      grid-template-columns: 1fr minmax(auto, 200px);
      grid-auto-flow: column;
      gap: 21px;
      align-items: center;
      justify-content: flex-start;

      @media not all and (width >=768px) {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        gap: calc((100 / 750) * 49 * 1vw);
        justify-content: flex-start;
        margin-block: 9.8vw;
      }

      .img {
        display: block;
        block-size: 496px;
        margin-inline: calc(50% - 50vw) 0;

        @media not all and (width >=768px) {
          align-self: flex-start;
          inline-size: calc((100 / 750) * 710 * 1vw);
          block-size: calc((100 / 750) * 370 * 1vw);
          margin-inline: calc(50% - 50vw) 0;
        }

        & img {
          inline-size: 100%;
          block-size: 100%;
          object-fit: cover;
          object-position: center;
        }
      }
    }

    &::after {
      position: absolute;
      top: 13px;
      right: 5px;
      z-index: -1;
      inline-size: 549px;
      aspect-ratio: 549 / 384;
      pointer-events: none;
      content: '';
      background-image: url('../img/common/text.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media not all and (width >=768px) {
      &::after {
        top: 2.7vw;
        right: 0;
        inline-size: calc((100 / 750) * 334 * 1vw);
      }
    }
  }

  /* =====================
    u-nav
  ===================== */
  .u-nav {
    margin-inline-start: 40px;

    @media not all and (width >=768px) {
      margin-inline-start: 0;
    }

    ul {
      display: grid;
      gap: 29px;
      justify-content: flex-start;
      font-size: 15px;

      @media not all and (width >=768px) {
        display: flex;
        flex-wrap: wrap;
        gap: 3.1vw 5.6vw;
        justify-content: start;
        font-size: calc((100 / 750) * 26 * 1vw);
      }

      li {
        display: inherit;
        grid-template-columns: subgrid;

        button {
          display: inherit;
          grid-auto-flow: column;
          gap: 10px;
          align-items: flex-start;
          justify-content: flex-start;

          @media not all and (width >= 768px) {
            gap: calc((100 / 750) * 9 * 1vw);
          }

          &::before {
            display: block;
            inline-size: 26px;
            aspect-ratio: 1 / 1;
            content: '';
            background-image: url('../img/common/arrow-on.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            rotate: 0 0 1 90deg;
            transition: inline-size 250ms ease 0s;
          }

          @media not all and (width >=768px) {
            &::before {
              inline-size: calc((100 / 750) * 36 * 1vw);
              translate: 0 0.5vw;
            }
          }
        }
      }
    }
  }

  /* =====================
    .u-table
  ===================== */
  .u-table {
    inline-size: 1000px;
    margin-inline: auto;

    @media not all and (width >=768px) {
      inline-size: 100%;
    }

    :where(th, td) {
      padding-block: 23px;
      padding-inline: 9px;
      line-height: 1.625;
      border-block: 1px solid #d2d2d2;

      @media not all and (width >=768px) {
        padding-block: 5.2vw;
        padding-inline: 0;
        font-size: calc((100 / 750) * 24 * 1vw);
      }
    }

    th {
      inline-size: 250px;

      @media not all and (width >=768px) {
        inline-size: calc((100 / 750) * 150 * 1vw);
      }

      font-weight: bold;
      border-block-color: var(--blue);
    }

    td {
      padding-inline: 6px;

      @media not all and (width >=768px) {
        padding-inline: 2.4vw;
        font-weight: 500;

        & a {
          color: var(--blue);
          text-decoration: underline;
        }
      }
    }
  }

  /* =====================
    header
  ===================== */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 90px auto;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    min-block-size: var(--header-height);
    padding-block: 21px 20px;
    padding-inline: 30px;
    font-size: 15px;
    font-weight: bold;
    pointer-events: none;
    background: white;
    transition: all 250ms ease 0s;

    & svg {
      transition: inherit;
    }

    @media not all and (width >=768px) {
      display: block;
      block-size: var(--header-height);
      padding-block: 2.2vw;
      padding-inline: 2.6vw;
    }

    .logo {
      width: fit-content;
      pointer-events: auto;

      .logo-mark1 {
        fill: #303727;
      }

      .logo-mark2 {
        fill: #1c75d1;
      }

      .logo-text {
        fill: #242424;
      }

      @media not all and (width >=768px) {
        display: block;
        inline-size: calc((100 / 750) * 90 * 1vw);
      }
    }

    .nav {
      display: grid;
      grid-auto-flow: column;
      align-items: center;
      pointer-events: auto;

      @media not all and (width >=768px) {
        display: none;
      }

      & ul {
        display: inherit;
        grid-auto-flow: inherit;
        align-items: center;
        block-size: 100%;
        margin-inline-end: 20px;

        & li {
          position: relative;
          block-size: 100%;

          &::after {
            position: absolute;
            bottom: 0;
            left: 50%;
            display: block;
            width: 0;
            height: 2px;
            content: '';
            background: var(--blue);
            border-radius: calc(infinity * 1px);
            translate: -50% 0;
            transition: width 250ms ease 0s;
            will-change: width;
          }

          @media (any-hover: hover) {
            &:hover {
              &::after {
                width: 100%;
              }
            }
          }
        }

        & a {
          display: grid;
          place-content: center;
          block-size: inherit;
          padding-inline: 20px;
        }
      }

      .sdgs {
        display: grid;
        place-content: center;
        block-size: 100%;
        margin-right: 24px;
      }
    }
  }

  @media print, screen and (width >=768px) {
    body.isHeaderColor .header {
      min-block-size: calc(var(--header-height) - 55px);
      padding-block: 0;

      & svg {
        inline-size: 60px;
      }
    }
  }

  @media not all and (width >=768px) {
    body:not(.touch-menu-on) .header,
    body:not(.touch-menu-on) .sp-menu {
      top: calc(var(--header-height) * -1);
    }
  }

  /* =====================
    footer
  ===================== */
  .footer {
    position: relative;
    display: block;
    color: white;
    background: var(--blue);

    & nav {
      display: grid;
      grid-template-areas:
        'logo nav'
        'address sub';
      grid-template-rows: auto auto;
      align-items: flex-start;
      padding-block: 63px 40px;
      padding-inline: 60px;

      @media not all and (width >=768px) {
        display: grid;
        grid-template-areas:
          'nav'
          'sub'
          'logo'
          'address';
        grid-auto-flow: row;
        padding-block: calc((100 / 750) * 109 * 1vw) 15.2vw;
        padding-inline: 0;
      }
    }

    & nav .unit[data-id='1'] {
      display: grid;
      grid-area: nav;
      grid-auto-flow: column;
      gap: 18.6px;
      align-items: flex-start;
      justify-content: flex-end;

      @media not all and (width >=768px) {
        display: block;
        padding-inline: calc((100 / 750) * 80 * 1vw);
        font-size: calc((100 / 750) * 40 * 1vw);
      }

      & li {
        position: relative;
        display: grid;
        grid-auto-flow: row;
        align-items: flex-start;
        min-inline-size: 110px;

        @media not all and (width >=768px) {
          display: block;
          inline-size: 100%;
          cursor: pointer;

          &:not(:has(button)) {
            -webkit-tap-highlight-color: rgb(0 0 0 / 20%);
          }

          & + li {
            margin-top: 2.9vw;
          }

          a {
            display: block;
          }

          &:not(:has(button)) a::after {
            position: absolute;
            top: 50%;
            left: 50%;
            display: block;
            inline-size: 100%;
            block-size: 100%;
            content: '';
            translate: -50% -50%;
          }

          &:has(button) {
            margin-top: 5vw;

            a[data-hidden='true'] {
              display: none;
            }
          }

          & button {
            position: relative;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            justify-content: space-between;
            inline-size: 100%;
            appearance: none;

            @media not all and (width >=768px) {
              cursor: pointer;
            }

            &[data-toggle='true'] {
              &::after {
                display: block;
                inline-size: calc((100 / 750) * 37 * 1vw);
                aspect-ratio: 1 / 1;
                content: '';
                background-image: url('../img/common/plus.svg');
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                transition: all 250ms ease 0s;
              }
            }
          }

          &.on {
            & button {
              &::after {
                rotate: 0 0 1 -45deg;
              }
            }

            a[data-hidden='true'] {
              display: grid;
            }
          }
        }

        @media print, screen and (width >=768px) {
          &:has([href='/']) {
            display: none;
          }
        }

        [lang='en'] {
          margin-block-end: 11px;
          font-size: 22px;
          line-height: 1;

          @media not all and (width >=768px) {
            margin-block-end: 1.3vw;
            font-size: calc((100 / 750) * 40 * 1vw);
          }
        }

        @media print, screen and (width >=768px) {
          button {
            pointer-events: none;
          }
        }

        & hgroup {
          display: inherit;
          width: inherit;
          cursor: text;

          @media not all and (width >=768px) {
            width: 100%;
          }

          & a {
            display: grid;
            grid-auto-flow: column;
            gap: 0.5em;
            align-items: flex-start;
            justify-content: flex-start;
            font-size: 13px;

            @media not all and (width >=768px) {
              gap: 1.1vw;
              width: 100%;
              padding-inline-start: calc((100 / 750) * 39 * 1vw);
              font-size: calc((100 / 750) * 26 * 1vw);
              line-height: 1.6;
            }

            &::before {
              content: '-';
            }

            & + a {
              margin-block-start: 2px;
            }
          }
        }
      }
    }

    & nav .unit[data-id='2'] {
      display: grid;
      grid-area: sub;
      grid-auto-flow: column;
      gap: 30px;
      align-self: flex-end;
      justify-content: flex-end;
      font-size: 13px;
      color: #d6d6d6;

      @media not all and (width >=768px) {
        gap: 7.9vw;
        justify-content: center;
        margin-top: 14.9vw;
        font-size: calc((100 / 750) * 24 * 1vw);
      }
    }

    & nav .logo {
      display: grid;
      grid-area: logo;
      inline-size: fit-content;
      margin-block-start: 6px;
      fill: white;

      @media not all and (width >=768px) {
        justify-content: center;
        inline-size: calc((100 / 750) * 160 * 1vw);
        margin-block-start: 14.5vw;
        margin-inline: auto;
      }

      .logo-text {
        fill: white;
      }
    }

    & nav .address {
      display: grid;
      grid-area: address;
      margin-block-start: 20px;
      font-size: 15px;
      line-height: 2;

      @media not all and (width >=768px) {
        margin-block-start: 6.6vw;
        font-size: calc((100 / 750) * 24 * 1vw);
        line-height: 1.83;
        text-align: center;

        a {
          text-decoration: underline;
        }
      }

      address {
        display: grid;
        grid-auto-flow: row;

        @media not all and (width >=768px) {
          grid-auto-flow: column;
          gap: 1.5vw;
          justify-content: center;
        }
      }
    }

    &::before {
      position: absolute;
      top: 6px;
      left: 0;
      inline-size: 60px;
      aspect-ratio: 1 / 1;
      pointer-events: none;
      content: '';
      background: var(--blue);
      translate: 0 -100%;
    }

    @media not all and (width >=768px) {
      &::before {
        display: none;
      }
    }

    small {
      display: grid;
      place-content: center;
      padding-block: 23px 16px;
      font-size: 12px;
      line-height: 1;
      color: #afafaf;
      letter-spacing: 1.2px;
      border-top: 1px solid #75927d;

      @media not all and (width >=768px) {
        padding-block: 5vw;
        font-size: calc((100 / 750) * 22 * 1vw);
        letter-spacing: calc((100 / 750) * 2.2 * 1vw);
      }
    }
  }

  /* =====================
    to-top
  ===================== */
  .to-top {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    display: grid;
    place-content: center;
    inline-size: 60px;
    block-size: 54px;
    pointer-events: none;
    cursor: pointer;
    background: var(--blue);
    opacity: 0;
    translate: 0 -100%;
    transition: opacity 600ms ease 0s;

    @media not all and (width >=768px) {
      inline-size: calc((100 / 750) * 80 * 1vw);
      block-size: calc((100 / 750) * 80 * 1vw);
    }

    & img {
      transition: translate 250ms ease 0s;

      @media not all and (width >=768px) {
        inline-size: calc((100 / 750) * 27 * 1vw);
        aspect-ratio: 1 / 1;
      }
    }

    @media (any-hover: hover) {
      &:hover {
        & img {
          translate: 0 -3px;
        }
      }
    }

    &.fixed {
      position: fixed;
      top: unset;
      bottom: 0;
      translate: unset;
    }

    @media not all and (width >=768px) {
      &:not(.fixed) {
        top: 1px;
      }
    }
  }

  body.isHeaderColor .to-top {
    pointer-events: auto;
    opacity: 1;
  }

  /* =====================
    sp-menu
  ===================== */
  .sp-menu,
  .sp-nav {
    display: none;
  }

  @media not all and (width >= 768px) {
    .menu-on {
      overflow: clip;

      body {
        overflow: clip;
      }
    }

    .sp-menu {
      position: fixed;
      top: 0;
      right: 0;
      z-index: calc(1 / 0);
      display: grid;
      place-content: center;
      inline-size: calc((100 / 750) * 120 * 1vw);
      aspect-ratio: 1 / 1;
      cursor: pointer;
      background: var(--blue);
      transition: top 250ms ease 0ms;
      will-change: top;

      &::before {
        display: block;
        inline-size: calc((100 / 750) * 53 * 1vw);
        block-size: calc((100 / 750) * 62 * 1vw);
        content: '';
        background-image: url('../img/common/menu.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    }

    .menu-on .sp-menu {
      &::before {
        inline-size: calc((100 / 750) * 52 * 1vw);
        block-size: calc((100 / 750) * 70 * 1vw);
        background-image: url('../img/common/close.svg');
      }
    }

    .sp-nav {
      top: var(--header-height);
      right: -100vw;
      z-index: -1;
      pointer-events: none;
      background: color-mix(in srgb, var(--blue) 100%, transparent 5%);
      opacity: 0;
    }

    .menu-on .sp-nav {
      right: 0;
      z-index: 11;
      pointer-events: auto;
      opacity: 1;
      transition: right 450ms var(--easeOutExpo) 0s, background 250ms ease 450ms;
      will-change: right, background, z-index, opacity;
    }

    .sp-nav {
      position: fixed;
      display: block;
      inline-size: 100%;
      block-size: 100dvh;
      color: white;

      .inner {
        block-size: inherit;
        padding-block: calc((100 / 750) * 91.1 * 1vw) calc((100 / 750) * 40 * 1vw);
        overflow-y: auto;

        & ul {
          display: grid;
          gap: 0 11.2vw;
          padding-inline: calc((100 / 750) * 76 * 1vw);
          margin-block-end: 10.4vw;
          font-size: calc((100 / 750) * 30 * 1vw);
          font-weight: bold;

          & a {
            display: block;
            padding-block: calc((100 / 750) * 23.8 * 1vw);
          }

          & li.child {
            .unit {
              display: grid;
              grid-template-columns: 1fr auto;
              grid-auto-flow: column;
              gap: 15vw;
              align-items: center;
              justify-content: flex-start;

              & button {
                display: grid;
                place-content: center;

                & svg {
                  inline-size: calc((100 / 750) * 56 * 1vw);
                  aspect-ratio: 1 / 1;
                  rotate: 0 0 1 45deg;
                  transition: rotate 250ms ease 0s;
                }
              }
            }
          }

          & li.child > a {
            display: none;
            padding-block: 0;
            padding-inline: 5.5vw 0;
            font-size: calc((100 / 750) * 26 * 1vw);
            font-weight: normal;

            &::before {
              content: '-';
            }
          }

          & li.child.on {
            .unit button svg {
              rotate: 0 0 1 0deg;
            }
          }

          & li.child.on > a[hidden] {
            display: grid;
            grid-auto-flow: column;
            gap: 1vw;
            align-items: center;
            justify-content: flex-start;
          }
        }

        .unit[data-id='2'] {
          display: grid;
          grid-auto-flow: column;
          gap: calc((100 / 750) * 50 * 1vw);
          justify-content: center;
          margin-block-end: calc((100 / 750) * 45 * 1vw);
          font-size: calc((100 / 750) * 24 * 1vw);
        }
      }
    }
  }

  body.company header ul li:has([href='/company/']),
  body.business header ul li:has([href='/business/']),
  body.works header ul li:has([href='/works/']),
  body.recruit header ul li:has([href='/recruit/']) {
    pointer-events: none;

    &::after {
      width: 100%;
    }
  }

  body:not(.top, .contact, .entry)::after {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
    pointer-events: none;
    content: '';
    background: #fff;
    opacity: 1;
    transition: all 600ms ease-in-out 100ms;
  }

  .pageshow body::before {
    opacity: 0;
  }

  .pageshow body::after {
    opacity: 0;
  }
}