@charset "UTF-8";

/* =====================
  Custom Property
===================== */
:root {
  /* debug */
  --debug: false;

  /* color */
  --white: #fff;
  --primary: #0e41a4;
  --color-text-primary: #1d1d1d;
  --main: #44bade;
  --black: #282828;
  --sub: #fee847;
  --blue: #003f97;
  --red: #d33b42;
  --sky: #239fd4;
  --yellow: #ddbc00;
  --green: #3fb964;
  --d_green: #117b30;
  --d_yellow: #9c8400;
  --d_sky: #0876a6;
  --d_red: #9e181e;
  --back: #f1fcff;
  --grey: #bebebe;
  --grey03: #f5f5f5;
  --grey02: #e9e9e9;

  /* font */
  --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;
  --sanserif: 'Noto Sans JP', sans-serif;
  --title: 'Signika Negative', sans-serif;

  /* icon */
  --icon-mail: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="21" viewBox="0 0 32 21" fill="none"><path d="M31.9355 19.4313C31.9355 20.1423 31.3626 20.7273 30.6576 20.7273H1.2779C0.576858 20.7273 0 20.1463 0 19.4313V1.29596C0 0.580949 0.572852 0 1.2779 0H30.6616C31.3626 0 31.9395 0.580949 31.9395 1.29596V19.4354L31.9355 19.4313ZM16.3163 12.2852L29.0913 4.51352C29.4117 4.31852 29.5159 3.89601 29.3236 3.57507C29.1313 3.25006 28.7147 3.14444 28.3942 3.33944L15.9677 10.8999L3.54127 3.33538C3.22079 3.14037 2.80818 3.246 2.61589 3.57101C2.4236 3.89601 2.52776 4.31852 2.84823 4.50946L15.6232 12.2812C15.7314 12.3462 15.8516 12.3787 15.9717 12.3787C16.0919 12.3787 16.2121 12.3462 16.3203 12.2812L16.3163 12.2852Z" fill="currentColor"/></svg>');
  --icon-mail-small: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="20" viewBox="0 0 28 20" fill="none"> <path d="M28 18.7495C28 19.4355 27.4977 20 26.8796 20H1.12042C0.50577 20 0 19.4394 0 18.7495V1.25049C0 0.560564 0.502258 0 1.12042 0H26.8831C27.4977 0 28.0035 0.560564 28.0035 1.25049V18.7534L28 18.7495ZM14.3056 11.8542L25.5063 4.35515C25.7873 4.16699 25.8786 3.75931 25.71 3.44963C25.5414 3.13602 25.1761 3.0341 24.8951 3.22227L14 10.5174L3.10487 3.21835C2.82388 3.03018 2.46212 3.1321 2.29353 3.44571C2.12494 3.75931 2.21626 4.16699 2.49724 4.35123L13.6979 11.8503C13.7928 11.913 13.8981 11.9443 14.0035 11.9443C14.1089 11.9443 14.2142 11.913 14.3091 11.8503L14.3056 11.8542Z" fill="white"/> </svg>');
  --icon-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="7" viewBox="0 0 15 7" fill="none"> <path d="M7.02441 6.02539L14.0488 1.70313L13 5.68248e-07L7.02441 3.67676L1.04883 4.58457e-08L-7.4446e-08 1.70312L7.02441 6.02539Z" fill="currentColor"/> </svg>');
  --icon-arrow-thin: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="12" viewBox="0 0 6 12" fill="none"> <path d="M5.02246 5.79395L0.808594 0L0 0.587891L3.78613 5.79395L0 11L0.808594 11.5879L5.02246 5.79395Z" fill="currentColor"/> </svg>');
  --icon-arrow-thin-small: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="26" viewBox="0 0 12 26" fill="none"> <path d="M11.0498 12.5996L1.59961 0L0 1.19922L8.5498 12.5996L0 24L1.59961 25.1992L11.0498 12.5996Z" fill="currentColor"/> </svg>');
  --icon-breadcrumb: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="13" viewBox="0 0 5 13" fill="none"> <path d="M0 11.739L3.64 6.058L0 0.377L0.819 0L4.68 6.058L0.819 12.116L0 11.739Z" fill="currentColor"/> </svg>');
  --icon-blank: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M11.43 0H7.25485C6.94015 0 6.68499 0.255166 6.68499 0.569878C6.68499 0.88459 6.94015 1.13976 7.25485 1.13976H10.0544L4.95748 6.23679C4.73488 6.45916 4.73488 6.82016 4.95748 7.04253C5.06889 7.15394 5.2145 7.20954 5.36034 7.20954C5.50618 7.20954 5.65201 7.15394 5.7632 7.04253L10.8601 1.94526V4.74511C10.8601 5.05982 11.1153 5.31498 11.43 5.31498C11.7447 5.31498 11.9999 5.05982 11.9999 4.74511V0.569878C11.9999 0.255166 11.7447 0 11.43 0Z" fill="currentColor" /> <path d="M10.1506 6.07025C9.8359 6.07025 9.58074 6.32541 9.58074 6.64013V10.8607H1.13973V2.41954H5.36024C5.67494 2.41954 5.9301 2.16438 5.9301 1.84966C5.9301 1.53495 5.67494 1.27979 5.36024 1.27979H0.569867C0.255161 1.27979 0 1.53495 0 1.84966V11.4304C0 11.7451 0.255161 12.0002 0.569867 12.0002H10.1506C10.4653 12.0002 10.7205 11.7451 10.7205 11.4304V6.63989C10.7205 6.32518 10.4653 6.07002 10.1506 6.07002V6.07025Z" fill="currentColor" /> <clipPath id="clip0_2761_12074"> <rect width="12" height="12" fill="currentColor" /> </clipPath> </svg>');

  /* ease */
  --slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
  --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);
  --easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
  --easeOutBounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* ==== project ==== */
  --header-height: 81px;
}

@media only screen and (width <= 768px) {
  :root {
    --header-height: calc((100 / 390) * 61 * 1vw);
  }
}

/* =====================
  container context
===================== */
@container style(--debug:true) {
  * {
    outline: 1px solid tomato;

    &::before,
    &::after {
      outline: 1px solid tomato;
    }

    &:focus {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }
  }
}

/* =====================
  animation
===================== */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes marquee-reverse {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes scrollable {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-25%);
  }
}

@keyframes show-up-text {
  0% {
    opacity: 0;
    translate: 0 100%;
  }

  100% {
    opacity: 1;
    translate: 0 0%;
  }
}

@layer style {
  /* =====================
    common
  ===================== */
  html,
  body {
    font-family: var(--sanserif);
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-primary);

    @media (width <= 768px) {
      font-size: calc((100 / 390) * 16 * 1vw);
    }
  }

  body {
    @media (width > 768px) {
      min-inline-size: 1440px;
    }
  }

  @media (width > 768px) {
    .sp {
      display: none;
    }
  }

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

  /* p */
  :where(p, li, dt, dd, th, td) {
    line-height: 1.8;
  }

  /* =====================
    header
  ===================== */
  .header {
    position: sticky;
    inset: 16px auto 0;
    z-index: 22;
    display: block grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    max-inline-size: calc(100% - 16px * 2);
    padding-block: 7px;
    padding-inline: 40px 16px;
    margin-inline: auto;
    background: var(--white);
    border-radius: calc(infinity * 1px);
    box-shadow: 0 0 8px 0 rgb(24 80 93 / 12%);

    @media only screen and (width <= 768px) {
      inset: calc((100 / 390) * 16 * 1vw) auto 0;
      max-inline-size: calc(100% - calc((100 / 390) * 16 * 1vw) * 2);
      padding-block: calc((100 / 390) * 14 * 1vw) calc((100 / 390) * 21 * 1vw);
      padding-inline: calc((100 / 390) * 31 * 1vw);
      box-shadow: 0 0 calc((100 / 390) * 8 * 1vw) 0 rgb(24 80 93 / 12%);
    }

    /* ==== logo ==== */
    .logo {
      inline-size: fit-content;

      @media only screen and (width <= 768px) {
        .picture {
          display: block flow;
          inline-size: calc((100 / 390) * 204 * 1vw);
          block-size: calc((100 / 390) * 26 * 1vw);
        }
      }
    }

    /* ==== nav ==== */
    .nav {
      display: block flex;
      gap: 46px;
      align-items: center;
      block-size: 100%;

      @media only screen and (width <= 768px) {
        display: none;
      }

      /* ==== main list ==== */
      & > ul {
        display: inherit;
        gap: 52px;
        align-items: center;
        block-size: inherit;
        margin-inline-end: -1px;

        & > li {
          position: relative;
          display: block grid;
          grid-template-columns: 1fr auto;
          gap: 9px 4px;
          align-items: center;
          block-size: inherit;
          cursor: pointer;

          & a {
            display: block grid;
            gap: 13px;
            align-self: unset;
            justify-content: center;
            block-size: 100%;
            text-align: center;

            .title {
              align-self: flex-end;
              font-size: 18px;
              font-weight: 500;
              line-height: 1;
            }

            & [lang='en'] {
              position: relative;
              font-size: 15px;
              font-weight: 500;
              line-height: 1;
              color: #a2a2a2;
              translate: 0 -4px;

              &::before {
                position: absolute;
                inset-inline-start: 50%;
                z-index: -1;
                display: none;
                inline-size: 18px;
                aspect-ratio: 1 / 1;
                margin-inline: auto;
                content: '';
                background: var(--sub);
                border-radius: calc(infinity * 1px);
                translate: -50% -2px;
              }
            }
          }

          &:has(.child) {
            margin-inline-end: 9px;

            &::after {
              display: block flow;
              inline-size: 15px;
              aspect-ratio: 15 / 7;
              content: '';
              background-color: var(--main);
              mask-image: var(--icon-arrow);
              mask-repeat: no-repeat;
              mask-position: center;
              mask-size: contain;
              translate: 6px -4px;
            }

            @media (any-hover: hover) {
              &:hover {
                .wrap {
                  grid-template-rows: 1fr;
                }
              }
            }
          }
        }
      }

      /* ==== wrap ==== */
      .wrap {
        position: absolute;
        inset-block-start: 100%;
        inset-inline-start: -2%;
        display: block grid;
        grid-template-rows: 0fr;
        background: var(--white);
        border-radius: 20px;
        box-shadow: 0 0 8px 0 rgb(24 80 93 / 12%);
        transition: grid-template-rows 0.2s ease-out;
        will-change: grid-template-rows;
      }

      /* ==== child ==== */
      .child[data-nest='1'] {
        display: block grid;
        gap: 8px;
        inline-size: max-content;
        max-inline-size: 195px;
        padding-inline: 24px;
        overflow: hidden;
        text-align: left;

        & > li {
          position: relative;
          display: block grid;

          &:first-child {
            padding-block-start: 18px;
          }

          &:last-child {
            padding-block-end: 18px;
          }

          & > a {
            position: relative;
            justify-content: flex-start;
            padding-inline-start: 11px;
            font-size: 15px;

            &::before {
              position: absolute;
              inset-block-start: 7px;
              inset-inline-start: 0;
              inline-size: 6px;
              aspect-ratio: 6 / 12;
              content: '';
              background-color: var(--main);
              mask-image: var(--icon-arrow-thin);
              mask-repeat: no-repeat;
              mask-position: center;
              mask-size: contain;
            }
          }
        }
      }

      /* ==== child-nest-2 ==== */
      .child[data-nest='2'] {
        display: block grid;
        padding-inline-start: 10px;
        margin-block: 6px;
        font-size: 13px;

        & > li {
          & > a {
            position: relative;
            padding-inline: 12px 5px;
            line-height: 1.4;
            text-align: left;

            &::before {
              position: absolute;
              inset-block-start: 0;
              inset-inline-start: 0;
              content: '・';
            }
          }
        }
      }
    }

    /* ==== .sdgs ==== */
    .sdgs {
      margin-inline-end: 3px;
    }

    /* ==== .contact ==== */
    .contact {
      display: block grid;
      place-content: center;
      inline-size: 66px;
      aspect-ratio: 1 / 1;
      background: var(--main);
      border-radius: calc(infinity * 1px);

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

  /* ==== current ==== */
  body[data-page='top'] .header .nav > ul > li[data-id='home'],
  body[data-page='company'] .header .nav > ul > li[data-id='company'],
  body[data-page='business'] .header .nav > ul > li[data-id='business'],
  body[data-page='merchandise'] .header .nav > ul > li[data-id='merchandise'],
  body[data-page='recruit'] .header .nav > ul > li[data-id='recruit'] {
    & > a span[lang='en']::before {
      display: block flow;
    }
  }

  /* =====================
    main
  ===================== */
  .main {
    margin-block-start: calc(var(--header-height) * -1);
  }

  /* =====================
    aside
  ===================== */
  .aside {
    padding-block: 99px 101px;
    padding-inline: 67px 92px;
    color: var(--white);
    background-image: url('../img/_common/footer.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media only screen and (width <= 768px) {
      padding-block: calc((100 / 390) * 64 * 1vw) calc((100 / 390) * 76 * 1vw);
      padding-inline: calc((100 / 390) * 32 * 1vw);
      background-image: url('../img/_common/footer_sp.webp');
    }

    @media (width > 768px) {
      background-attachment: fixed;
    }

    /* ==== inner ==== */
    .inner {
      display: block grid;
      grid-template-columns: auto auto 1fr;
      gap: 81px 0;
      align-items: center;
      justify-content: center;
      max-inline-size: 1360px;
      margin-inline: auto;

      @media only screen and (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: calc((100 / 390) * 29 * 1vw);
      }

      /* ==== .u-hgroup ==== */
      .u-hgroup {
        grid-area: 1 / 1 / 2 / 2;

        @media only screen and (width <= 768px) {
          gap: calc((100 / 390) * 0 * 1vw);
          margin-inline-start: 0;
          text-align: center;

          &::before {
            inset-inline-start: 3.7vw;
          }
        }
      }

      /* .body */
      .body {
        grid-area: 1 / 2 / 2 / 3;
        align-self: flex-end;
        padding-inline-start: 65px;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.8;

        @media only screen and (width <= 768px) {
          padding-inline-start: 0;
          margin-block: calc((1em - 1lh) / 2);
          font-size: calc((100 / 390) * 15 * 1vw);
        }
      }

      /* .u-anchor */
      .u-anchor {
        grid-area: 1 / 3 / 2 / 4;
        place-self: flex-end flex-end;
        padding-inline-start: 29px;
        translate: 0 2px;

        @media only screen and (width <= 768px) {
          place-self: center;
          inline-size: calc((100 / 390) * 316 * 1vw);
          padding-block: calc((100 / 390) * 14.3 * 1vw);
          padding-inline: calc((100 / 390) * 23 * 1vw) calc((100 / 390) * 18 * 1vw);
          margin-block-start: calc((100 / 390) * 2 * 1vw);
          translate: unset;
        }
      }

      /* ==== card ==== */
      .card {
        display: block grid;
        grid-area: 2 / 1 / 3 / 4;
        grid-template-columns: repeat(3, 1fr);
        gap: 33px;
        justify-content: center;
        padding-inline: 53px 28px;

        @media only screen and (width <= 768px) {
          display: block grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 4.2vw;
          padding-inline: unset;
          margin-block-start: calc((100 / 390) * 25 * 1vw);
        }

        & section {
          display: block grid;
          grid-template-rows: subgrid;
          grid-row: span 2;
          gap: 45px;
          padding-block: 36px 40px;
          text-align: center;
          border: 1px solid var(--white);
          border-radius: 20px;

          @media only screen and (width <= 768px) {
            display: block flex;
            flex-direction: column;
            gap: 7.2vw;
            justify-content: center;
            padding-block: 5.8vw 7.6vw;
            text-align: center;
          }

          /* ==== head ==== */
          .head {
            display: block grid;
            gap: 9px;

            @media only screen and (width <= 768px) {
              display: block flex;
              flex-wrap: wrap;
              gap: 4.7vw;
              align-items: center;
              justify-content: center;
            }

            /* catch */
            .catch {
              font-size: 20px;
              font-weight: 600;
              line-height: 1.5;

              @media only screen and (width <= 768px) {
                font-size: calc((100 / 390) * 16 * 1vw);
              }
            }

            /* h2 */
            & h2 {
              font-size: 32px;
              font-weight: 600;
              line-height: 1.5;

              @media only screen and (width <= 768px) {
                font-size: calc((100 / 390) * 16 * 1vw);
              }

              &:has(img) {
                inline-size: 100%;
              }
            }
          }

          /* unit */
          .unit {
            display: block grid;
            align-items: flex-start;
            margin-block: calc((1em - 1lh) / 2);

            @media only screen and (width <= 768px) {
              gap: 5.4vw;
            }

            /* tel */
            .tel {
              display: block grid;
              gap: 9px;
              align-self: flex-start;
              margin-block: calc((1em - 1lh) / 2) 16px;
              font-size: 24px;
              font-weight: 500;

              @media only screen and (width <= 768px) {
                gap: 0;
                margin-block: calc((1em - 1lh) / 2);
                font-size: calc((100 / 390) * 20 * 1vw);
                font-weight: 400;
              }

              /* telephone */
              & a[href^='tel:'] {
                display: block grid;
                grid-auto-flow: column;
                gap: 9px;
                align-items: center;
                justify-content: center;
                margin-block: calc((1em - 1lh) / 2);

                @media only screen and (width <= 768px) {
                  gap: 3.1vw;
                }

                &::before {
                  display: block flow;
                  inline-size: 29px;
                  aspect-ratio: 29 / 23;
                  content: '';
                  background-image: url('../img/_common/icon/tel.svg');
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: contain;
                  translate: -1px 1px;
                }

                @media only screen and (width <= 768px) {
                  &::before {
                    inline-size: calc((100 / 390) * 21 * 1vw);
                    aspect-ratio: 21 / 17;
                    translate: 0 0.1vw;
                  }
                }
              }
            }

            /* text */
            .text {
              display: block grid;
              gap: 8px;
              align-self: flex-start;
              font-size: 14px;

              @media only screen and (width <= 768px) {
                gap: 1.7vw;
                font-size: calc((100 / 390) * 13 * 1vw);
              }

              .head {
                font-size: 16px;

                @media only screen and (width <= 768px) {
                  font-size: calc((100 / 390) * 13 * 1vw);
                }
              }

              & p {
                margin-block: calc((1em - 1lh) / 2);
              }
            }
          }

          &[data-id='2'] {
            .head {
              @media only screen and (width <= 768px) {
                gap: 3.9vw 4.7vw;
              }
            }

            .unit {
              @media only screen and (width <= 768px) {
                gap: 3.1vw;
              }
            }

            .unit .tel {
              margin-block-end: 14px;

              @media only screen and (width <= 768px) {
                gap: 3.3vw;
                margin-block-end: 0;
              }
            }
          }

          &[data-id='3'] {
            .unit {
              @media only screen and (width <= 768px) {
                gap: 3.1vw;
              }
            }

            .unit .tel {
              margin-block-end: 0;

              @media only screen and (width <= 768px) {
                margin-block-end: unset;
              }
            }
          }
        }
      }
    }
  }

  /* =====================
    footer
  ===================== */
  .footer {
    padding-block: 72px 32px;
    padding-inline: 80px;
    background: #f4f5f9;

    & [data-visibility='hidden'] {
      display: none;
    }

    @media only screen and (width <= 768px) {
      padding-block: 18.5vw calc((100 / 390) * 24 * 1vw);
      padding-inline: calc((100 / 390) * 32 * 1vw);
    }

    /* ==== inner ==== */
    .inner {
      display: block grid;
      padding-inline: 40px;

      @media only screen and (width <= 768px) {
        padding-inline: calc((100 / 390) * 17 * 1vw) calc((100 / 390) * 0 * 1vw);
      }

      @media only screen and (width <= 768px) {
        display: block flex;
        flex-direction: column;
      }
    }

    /* ==== nav ==== */
    .nav {
      grid-area: 1 / 2 / 4 / 3;
      justify-self: flex-end;

      & > ul {
        display: block grid;
        gap: 32px 117px;

        @media (width > 768px) {
          grid-template-rows: repeat(2, max-content);
          grid-auto-rows: auto;
          grid-auto-columns: max-content;
          grid-auto-flow: column;
        }

        @media only screen and (width <= 768px) {
          grid-template-columns: repeat(2, 1fr);
          gap: 13.8vw 0;
          justify-content: space-between;
        }

        & > li {
          display: block grid;
          align-items: flex-start;

          @media (width > 768px) {
            &[data-id='home'],
            &[data-id='company'] {
              grid-column: 1;
            }

            &[data-id='business'] {
              grid-row: span 4;
              grid-column: 2;
              translate: 21px 0;
            }

            &[data-id='merchandise'],
            &[data-id='recruit'],
            &[data-id='contact'] {
              grid-column: 3;
            }
          }

          @media only screen and (width <= 768px) {
            &[data-id='business'],
            &[data-id='merchandise'] {
              translate: 0 1vw;
            }
          }

          &:nth-child(even) {
            @media only screen and (width <= 768px) {
              padding-inline-start: 7.8vw;
            }
          }

          /* a */
          & a {
            display: block grid;
            gap: 1px;
            align-items: flex-start;
            font-weight: 500;

            @media only screen and (width <= 768px) {
              gap: 0;
            }

            /* title */
            .title {
              font-size: 18px;
              font-weight: 500;
              color: var(--blue);

              @media only screen and (width <= 768px) {
                font-size: calc((100 / 390) * 18 * 1vw);
              }
            }

            /* [lang=en] */
            & [lang='en'] {
              font-family: var(--sanserif);
              font-size: 14px;
              font-weight: 500;
              line-height: 1;
              color: var(--grey);

              @media only screen and (width <= 768px) {
                font-size: calc((100 / 390) * 14 * 1vw);
              }
            }
          }
        }
      }

      /* ==== child ==== */
      .child {
        display: block grid;
        gap: 8px;
        max-inline-size: 150px;
        margin-block-start: 18px;
        font-size: 15px;
        color: #4c4c4c;

        @media only screen and (width <= 768px) {
          display: block grid;
          gap: 8px;
          max-inline-size: 100%;
          margin-block-start: 4.9vw;
          font-size: calc((100 / 390) * 15 * 1vw);
        }

        & ul {
          padding-inline-start: 10px;
          margin-block: 6px;
          font-size: 13px;

          @media only screen and (width <= 768px) {
            padding-inline-start: calc((100 / 390) * 10 * 1vw);
            margin-block: calc((100 / 390) * 6 * 1vw);
            font-size: calc((100 / 390) * 13 * 1vw);
          }

          & li a {
            position: relative;
            padding-inline: 12px 5px;
            line-height: 1.4;

            @media only screen and (width <= 768px) {
              padding-inline: calc((100 / 390) * 14 * 1vw) calc((100 / 390) * 5 * 1vw);
            }

            &::before {
              position: absolute;
              inset-block-start: 0;
              inset-inline-start: 0;
              content: '・';
            }

            @media only screen and (width <= 768px) {
              &::before {
                inset-inline-start: 0.4vw;
              }
            }
          }
        }
      }
    }

    /* ==== sub-nav ==== */
    .sub-nav {
      display: block flex;
      grid-area: 4 / 2 / 5 / 3;
      gap: 91px;
      justify-content: flex-end;
      inline-size: fit-content;
      margin-block-start: 42px;
      margin-inline: auto 0;
      font-size: 15px;
      font-weight: 400;
      color: #797979;

      @media only screen and (width <= 768px) {
        display: block grid;
        gap: 8.6vw 16.8vw;
        justify-content: flex-start;
        margin-block-start: 19.2vw;
        margin-inline: unset;
        font-size: calc((100 / 390) * 13 * 1vw);

        & img {
          inline-size: calc((100 / 390) * 153 * 1vw);
          block-size: calc((100 / 390) * 19 * 1vw);
        }

        & [data-id='1'] {
          grid-area: 1 / 1 / 2 / 3;
          justify-self: start;
        }

        & [data-id='2'] {
          grid-area: 2 / 1 / 3 / 2;
          justify-self: start;
        }

        & [data-id='3'] {
          grid-area: 2 / 2 / 3 / 3;
          justify-self: start;
        }
      }
    }

    /* ==== logo ==== */
    .logo {
      grid-area: 1 / 1 / 2 / 2;
      inline-size: fit-content;
      padding-block-start: 8px;

      @media only screen and (width <= 768px) {
        padding-block-start: calc((100 / 390) * 57 * 1vw);
        margin-inline: 3.9vw auto;

        & img {
          inline-size: calc((100 / 390) * 245 * 1vw);
          block-size: calc((100 / 390) * 31 * 1vw);
        }
      }
    }

    /* ==== address ==== */
    .address {
      display: block grid;
      grid-area: 2 / 1 / 3 / 2;
      gap: 0;
      align-self: flex-start;
      inline-size: fit-content;
      margin-block: 32px 40px;
      color: var(--black);

      @media only screen and (width <= 768px) {
        margin-block: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 32 * 1vw);
        margin-inline-start: 4vw;
        font-size: calc((100 / 390) * 13 * 1vw);
      }

      & address {
        display: block flex;
        gap: 20px;

        @media only screen and (width <= 768px) {
          gap: calc((100 / 390) * 15 * 1vw);
        }
      }

      .tel {
        display: block flex;
        gap: 32px;

        @media only screen and (width <= 768px) {
          gap: calc((100 / 390) * 25 * 1vw);

          & a[href^='tel:'] {
            color: var(--blue);
            text-decoration: underline;
          }
        }
      }
    }

    /* ==== u-anchor ==== */
    .u-anchor {
      grid-area: 3 / 1 / 4 / 2;
      inline-size: fit-content;
      padding-inline: 40px 23px;

      @media only screen and (width <= 768px) {
        gap: calc((100 / 390) * 9 * 1vw);
        padding-block: calc((100 / 390) * 15 * 1vw);
        padding-inline: 5.7vw 1.6vw;
        margin-inline-start: 3.9vw;
      }
    }

    /* ==== copyright ==== */
    .copyright {
      display: block flow;
      padding-block-start: 26px;
      padding-inline-end: 44px;
      margin-block-start: 38px;
      font-size: 12px;
      font-weight: 400;
      color: color-mix(in srgb, #848484, transparent 60%);
      text-align: right;
      border-block-start: 1px solid #c3d2d9;

      @media only screen and (width <= 768px) {
        padding-block-start: 4.6vw;
        padding-inline-end: 7.8vw;
        margin-block-start: 7.9vw;
        font-size: calc((100 / 390) * 10 * 1vw);
        text-align: center;
      }
    }
  }

  /* =====================
    sp-menu
  ===================== */
  .sp-menu {
    position: fixed;
    inset-block-start: 6vw;
    inset-inline-end: 6vw;
    z-index: 22;
    display: block grid;
    inline-size: calc((100 / 390) * 46 * 1vw);
    aspect-ratio: 1 / 1;
    background: var(--main);
    border-radius: calc(infinity * 1px);

    &::before {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      display: block grid;
      inline-size: calc((100 / 390) * 24 * 1vw);
      block-size: calc((100 / 390) * 15 * 1vw);
      content: '';
      border-block: 1px solid var(--white);
      translate: -50% -50%;
      transition: all 250ms ease 0s;
    }

    &::after {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      display: block grid;
      inline-size: calc((100 / 390) * 24 * 1vw);
      block-size: calc((100 / 390) * 1 * 1vw);
      min-block-size: 1px;
      content: '';
      background: var(--white);
      translate: -50% -50%;
      transition: all 250ms ease 0s;
    }

    @media (width > 768px) {
      display: none;
    }
  }

  .menu-on .sp-menu {
    &::before {
      inset-block-start: 5.5vw;
      inset-inline-start: 2.5vw;
      display: block grid;
      inline-size: calc((100 / 390) * 27 * 1vw);
      block-size: calc((100 / 390) * 1 * 1vw);
      min-block-size: 1px;
      content: '';
      background: var(--white);
      border: none;
      rotate: 0 0 1 45deg;
      translate: unset;
    }

    &::after {
      inset-block-start: 5.5vw;
      inset-inline-start: 2.5vw;
      display: block grid;
      inline-size: calc((100 / 390) * 27 * 1vw);
      content: '';
      background: var(--white);
      rotate: 0 0 1 135deg;
      translate: unset;
    }
  }

  /* =====================
    sp-nav
  ===================== */
  .sp-nav {
    position: fixed;
    inset: 0;
    z-index: 21;
    margin-inline: auto;
    pointer-events: none;
    background: var(--main);
    border-radius: 0 0 calc((100 / 390) * 50 * 1vw) calc((100 / 390) * 50 * 1vw);
    opacity: 0;
    translate: 0 -100%;
    will-change: translate;

    @media (width > 768px) {
      display: none;
    }

    /* ==== inner ==== */
    .inner {
      max-block-size: 100svh;
      padding-block: 30.2vw 10vw;
      padding-inline: calc((100 / 390) * 50 * 1vw);
      overflow-y: scroll;
    }

    /* ==== nav ==== */
    .nav {
      & > ul {
        display: block grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5.8vw 0;
        justify-content: space-between;

        & > li {
          display: block grid;
          align-items: flex-start;

          &[data-id='business'],
          &[data-id='merchandise'] {
            translate: 0 1vw;
          }

          &:nth-child(even) {
            @media only screen and (width <= 768px) {
              padding-inline-start: 9.9vw;
            }
          }

          /* a */
          & a {
            display: block grid;
            gap: 0.4vw;
            align-items: flex-start;

            /* title */
            .title {
              font-size: calc((100 / 390) * 15 * 1vw);
              font-weight: 500;
              color: var(--black);
            }

            /* [lang=en] */
            & [lang='en'] {
              font-family: var(--sanserif);
              font-size: calc((100 / 390) * 13 * 1vw);
              font-weight: 500;
              line-height: 1;
              color: var(--white);
            }
          }
        }
      }

      /* ==== child ==== */
      .child {
        display: block grid;
        gap: calc((100 / 390) * 9 * 1vw);
        max-inline-size: 100%;
        margin-block-start: 4.9vw;
        font-size: calc((100 / 390) * 14 * 1vw);
        font-weight: 500;
        color: var(--black);

        & ul {
          padding-inline-start: calc((100 / 390) * 10 * 1vw);
          margin-block: calc((100 / 390) * 9.5 * 1vw) calc((100 / 390) * 7 * 1vw);
          font-size: calc((100 / 390) * 13 * 1vw);

          & li a {
            position: relative;
            padding-inline: calc((100 / 390) * 14 * 1vw) calc((100 / 390) * 5 * 1vw);
            font-size: calc((100 / 390) * 12 * 1vw);
            line-height: 1.4;

            &::before {
              position: absolute;
              inset-block-start: 0;
              inset-inline-start: 0;
              content: '・';
            }

            @media only screen and (width <= 768px) {
              &::before {
                inset-inline-start: 0.4vw;
              }
            }
          }
        }
      }
    }

    /* ==== sub-nav ==== */
    .sub-nav {
      display: block grid;
      gap: 6.2vw 10.2vw;
      justify-content: flex-start;
      inline-size: fit-content;
      margin-block-start: 14.1vw;
      margin-inline: unset;
      font-size: calc((100 / 390) * 12 * 1vw);
      font-weight: 400;
      color: var(--white);

      & img {
        inline-size: calc((100 / 390) * 153 * 1vw);
        block-size: calc((100 / 390) * 19 * 1vw);
      }

      & [data-id='1'] {
        grid-area: 1 / 1 / 2 / 3;
        justify-self: start;
        padding-block: 2vw 2.4vw;
        padding-inline: 2.5vw;
        background: var(--white);
      }

      & [data-id='2'] {
        grid-area: 2 / 1 / 3 / 2;
        justify-self: start;
      }

      & [data-id='3'] {
        grid-area: 2 / 2 / 3 / 3;
        justify-self: start;
      }
    }
  }

  /* Menu on */
  .menu-on .sp-nav {
    pointer-events: auto;
    opacity: 1;
    translate: 0 0;
    transition: translate 250ms ease 0s;
  }

  body:not([data-page='top'], [data-page='contact'], [data-page='entry'], [data-page='recruit'])::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;
  }

  html.menu-on {
    overflow: hidden;
  }
}