@charset "UTF-8";

/* =====================
  company トップ
===================== */
.company[data-type='index'] .main {
  .u-bg {
    padding-block: 130px;

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

  & ul {
    display: grid;
    grid-auto-flow: column;
    gap: 30px;
    align-items: flex-start;
    justify-content: flex-start;

    @media not all and (width >=768px) {
      grid-auto-flow: row;
      gap: calc((100 / 750) * 90 * 1vw);
    }

    & li {
      position: relative;
      display: grid;
      gap: 20px;
      margin-block-start: calc(50px * var(--index, 0));

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 35 * 1vw) calc((100 / 750) * 40 * 1vw);
        margin-block-start: 0;
      }

      & img {
        grid-area: 1 / 1 / 1 / 3;
        inline-size: 353px;
        aspect-ratio: 1 / 1;

        @media not all and (width >=768px) {
          inline-size: 100%;
          block-size: auto;
          aspect-ratio: 16 / 9;
          object-fit: cover;
        }
      }

      & hgroup {
        display: grid;
        grid-area: 2 / 1 / 2 / 1;
        gap: 20px;

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

        & [lang='en'] {
          font-family: var(--title);
          font-size: 36px;
          font-weight: 600;
          line-height: 1;
          letter-spacing: 1.44px;
          -webkit-text-stroke-width: 0.77px;
          -webkit-text-stroke-color: white;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 60 * 1vw);
            letter-spacing: calc((100 / 750) * 1.44 * 1vw);
            -webkit-text-stroke-width: calc((100 / 750) * 0.77 * 1vw);
          }
        }

        & h2 {
          margin-block: calc((1em - 1lh) / 2);
          font-family: var(--yumin);
          font-size: 16px;
          font-weight: 600;
          color: #7b7b7b;

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

      & .icon {
        display: grid;
        grid-area: 2 / 2 / 2 / 2;
        place-content: center;
        inline-size: 60px;
        aspect-ratio: 1 / 1;
        margin-inline: auto 0;
        background: white;
        border-radius: calc(infinity * 1px);

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

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

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

      & a {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        inline-size: 100%;
        block-size: 100%;
      }
    }
  }
}

/* =====================
  profile
===================== */
.company[data-type='profile'] .main {
  .u-bg {
    padding-block: 90px 0;

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

      .u-inner:not(:has(.u-nav)) {
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }
    }
  }

  & article.profile {
    padding-block: 130px;

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

  & article.history {
    padding-block: 130px;
    background: var(--gray);

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

  .u-table {
    margin-block-start: 60px;

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

/* =====================
  philosophy
===================== */
.company[data-type='philosophy'] .main {
  .u-bg {
    padding-block: 90px 0;

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

      .u-inner:not(:has(.u-nav)) {
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }
    }
  }

  /* ==== about ==== */
  & article.about {
    padding-block: 130px 0;
    overflow: clip;

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

    & h1 {
      margin-block-end: 45px;
      font-family: var(--yumin);
      font-size: 30px;
      font-weight: bold;
      text-align: center;

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

    & p {
      text-align: center;
    }

    .marquee {
      display: flex;
      gap: 2px;
      inline-size: 100vw;
      block-size: 200px;
      margin-block-start: 90px;
      margin-inline: calc(50% - 50vw);
      pointer-events: none;

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

      &::before,
      &::after {
        display: block;
        flex-shrink: 0;
        inline-size: 1412px;
        block-size: 200px;
        content: '';
        background-image: url('../img/company/philosophy/01.png');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 1412px 200px;
        animation: 150s linear 0s infinite normal none running marquee;
      }

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

  /* ==== philosophy ==== */
  & article.philosophy {
    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 160 * 1vw) 0;
    }

    /* ==== PHILOSOPHY ==== */
    .wrap[data-id='1'] {
      position: relative;
      z-index: 2;
      display: grid;
      gap: 96px 15px;
      align-items: center;
      justify-content: center;
      padding-block: 130px 290px;

      @media not all and (width >=768px) {
        grid-auto-flow: row;
        gap: calc((100 / 750) * 0 * 1vw) 0;
        padding-block: 0 calc((100 / 750) * 160 * 1vw);
      }

      &::after {
        position: absolute;
        top: 41%;
        left: 50%;
        z-index: 1;
        display: block;
        inline-size: 590px;
        aspect-ratio: 1 / 1;
        content: '';
        background-image: url('../img/company/philosophy/logo.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        translate: -50% -50%;
      }

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

      & hgroup {
        position: relative;
        z-index: 2;
        grid-area: 1 / 1 / 1 / 3;

        @media not all and (width >=768px) {
          grid-area: unset;
        }
      }

      .unit[data-id='1'] {
        position: relative;
        z-index: 2;
        grid-area: 2 / 1 / 2 / 1;

        @media not all and (width >=768px) {
          grid-area: unset;
          margin-block: calc((100 / 750) * 80 * 1vw) calc((100 / 750) * 30 * 1vw);
        }

        & img {
          inline-size: 100%;
          block-size: auto;
          aspect-ratio: 16 / 9;
          object-fit: cover;
        }

        & span {
          display: block;
          font-family: var(--yumin);
          font-size: 44px;
          font-weight: bold;
          line-height: 1.52;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 37 * 1vw);
            line-height: 2;
            text-align: center;
          }

          & + span {
            padding-inline-start: 0.5em;

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

      .unit[data-id='2'] {
        position: relative;
        z-index: 2;
        grid-area: 2 / 2 / 2 / 2;
        max-inline-size: 492px;

        @media not all and (width >=768px) {
          grid-area: unset;
        }

        & p + p {
          margin-block-start: 1em;
        }
      }
    }

    /* ==== Management philosophy ==== */
    .wrap[data-id='2'] {
      padding-block: 130px;
      background-image: url('../img/company/philosophy/bg.png');
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;

      @media print, screen and (width >=768px) {
        background-attachment: fixed;
      }

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

      /* ==== 見出し ==== */
      & hgroup {
        display: grid;
        grid-auto-flow: column;
        gap: 32px;
        align-items: center;
        justify-content: flex-start;

        @media not all and (width >=768px) {
          grid-auto-flow: row;
          gap: calc((100 / 750) * 32 * 1vw);
        }

        & span[lang='en'] {
          font-family: var(--title);
          font-size: 34px;
          font-weight: 600;
          line-height: 1;
          letter-spacing: 2.04px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 74 * 1vw);
            line-height: 1.2;
            letter-spacing: calc((100 / 750) * 2.04 * 1vw);
            word-break: normal;
          }
        }

        & h1 {
          display: grid;
          grid-auto-flow: column;
          gap: 16px;
          align-items: center;
          font-family: var(--yumin);
          font-size: 18px;
          font-weight: 600;
          line-height: 1;
          letter-spacing: 1.08px;

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

          &::before {
            display: block;
            inline-size: 80px;
            block-size: 1px;
            content: '';
            background: #504d4b;
          }

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

      /* ==== 本文 ==== */
      .text {
        margin-block-start: 90px;

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

        & p + p {
          margin-block-start: 2em;
        }
      }
    }
  }
}

/* =====================
  group
===================== */
.company[data-type='group'] .main {
  .u-bg {
    padding-block: 90px 0;

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

      .u-inner:not(:has(.u-nav)) {
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }
    }
  }

  /* ==== about ==== */
  & article.about {
    padding-block: 130px;
    overflow: clip;

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

    & h1 {
      margin-block-end: 45px;
      font-family: var(--yumin);
      font-size: 30px;
      font-weight: bold;
      text-align: center;

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

    & p {
      text-align: center;
    }
  }

  /* ==== group ==== */
  & article.group {
    padding-block: 0 120px;
    background: var(--gray);

    @media not all and (width >=768px) {
      padding-block: 0 calc((100 / 750) * 160 * 1vw);

      .u-inner:not(:has(.u-nav)) {
        padding-inline: calc((100 / 750) * 0 * 1vw);
      }
    }

    /* ==== 見出し ==== */
    & hgroup {
      translate: 0 -40%;

      @media not all and (width >=768px) {
        translate: 0 -30%;
      }
    }

    /* ==== map ==== */
    .map {
      margin-block-end: 60px;
      text-align: center;

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

  /* ==== shop ==== */
  & article.shop {
    padding-block: 130px;

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

    & hgroup {
      margin-block-end: 60px;

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

    & p.unit[data-id='1'] {
      margin-block-end: 90px;

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

    /* ==== ul ==== */
    .shop-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 60px;
      justify-content: space-between;

      @media not all and (width >=768px) {
        grid-template-columns: repeat(1, 1fr);
      }

      & > li {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
        gap: 30px;

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

        /* 写真 */
        .img {
          position: relative;
          display: grid;
          align-items: flex-end;
          justify-content: flex-start;
          inline-size: 100%;
          block-size: 360px;

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

          & img {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: -1;
            inline-size: 100%;
            block-size: 100%;
            pointer-events: none;
            object-fit: cover;
            translate: -50% -50%;

            @media not all and (width >=768px) {
              position: unset;
              inset: unset;
              z-index: inherit;
              grid-row: 2 / 2;
              block-size: auto;
              translate: unset;
            }
          }

          & a {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: block;
            inline-size: 100%;
            block-size: 100%;
          }

          .mask {
            position: absolute;
            top: 50%;
            left: 50%;
            padding-block: 10px;
            padding-inline: 10px;
            font-size: 15px;
            font-weight: bold;
            line-height: 1.46;
            text-align: center;
            white-space: nowrap;
            background: rgb(0 0 0 / 50%);
            translate: -50% -50%;

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

          & h2 {
            display: grid;
            align-items: center;
            padding-block: 20px;
            padding-inline: 30px;
            font-size: 22px;
            font-style: normal;
            font-weight: 700;
            line-height: 1;
            color: white;
            background: rgb(0 0 0 / 80%);

            @media not all and (width >=768px) {
              grid-row: 1 / 1;
              inline-size: 100%;
              padding-block: calc((100 / 750) * 20 * 1vw);
              padding-inline: calc((100 / 750) * 30 * 1vw);
              font-size: calc((100 / 750) * 30 * 1vw);
              text-align: center;
              background: var(--gray);
            }
          }
        }

        /* 住所 */
        & address {
          padding-block: 14px;
          padding-inline: 20px;
          background: #2f2b2b;

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

          & span {
            display: block;
          }

          @media not all and (width >=768px) {
            a[href^='tel'] {
              color: var(--orange);
              text-decoration: underline;
            }
          }
        }

        /* sns */
        .sns {
          display: grid;
          grid-auto-flow: column;
          gap: 9px;
          align-items: center;
          justify-content: center;

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

          & li {
            inline-size: 27px;
            aspect-ratio: 1 / 1;

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

            & img {
              inline-size: 100%;
              opacity: 0.5;
            }
          }
        }
      }
    }

    &:nth-child(even) {
      background: var(--gray);

      @media not all and (width >=768px) {
        .shop-list {
          & > li {
            & .img {
              & h2 {
                background: var(--black);
              }
            }
          }
        }
      }
    }
  }
}