@charset "UTF-8";

/* =====================
  mv
===================== */
.mv {
  position: relative;
  block-size: 100svh;
  overflow: clip;

  /* bg */
  .unit[data-id='1'] {
    display: block;

    & 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%;
    }
  }

  /* catch */
  .unit[data-id='2'] {
    position: absolute;
    bottom: 40px;
    left: 90px;
    max-inline-size: 726px;

    @media not all and (width >= 768px) {
      position: absolute;
      inset: unset;
      top: 50%;
      left: 50%;
      inline-size: calc((100 / 750) * 632 * 1vw);
      max-inline-size: calc((100 / 750) * 632 * 1vw);
      translate: -50% -50%;
    }
  }

  /* banner */
  .banner {
    position: absolute;
    right: 0;
    bottom: 40px;
    inline-size: 232px;

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

/* =====================
  news
===================== */
.news {
  position: relative;
  display: grid;
  grid-template-columns: 191px 1fr auto;
  align-items: center;
  padding-inline: 30px;
  background: #e8e8e8;

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

  @media not all and (width >= 768px) {
    grid-template-columns: auto auto auto;
    padding-inline: 5vw;
  }

  /* title */
  & hgroup {
    display: grid;
    grid-auto-flow: column;
    gap: 12px;
    align-items: baseline;
    justify-content: flex-start;
    block-size: 100%;
    padding-block: 20px;
    border-right: 1px solid #d1d1d1;

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

    & [lang='en'] {
      display: grid;
      align-items: center;
      block-size: 100%;
      font-family: var(--title);
      font-size: 26px;
      font-weight: 600;
      line-height: 1;
      color: var(--orange);

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

    & h2 {
      margin-block: calc((1em - 1lh) / 2);
      font-size: 12px;
      color: #888;

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

  /* body */
  .body {
    & a {
      display: grid;
      grid-auto-flow: column;
      gap: 28px;
      align-items: center;
      justify-content: flex-start;
      padding-block: 20px;
      padding-inline: 44px;

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

      & time {
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        color: #888;

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

      & p {
        max-inline-size: 600px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        line-height: 1;
        color: #888;
        white-space: nowrap;

        @media not all and (width >= 768px) {
          display: -webkit-box;
          max-inline-size: calc((100 / 750) * 538 * 1vw);
          overflow: hidden;
          -webkit-line-clamp: 2;
          font-size: calc((100 / 750) * 24 * 1vw);
          line-height: 1.83;
          color: var(--black);
          white-space: unset;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  /* more */
  .more {
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px;
    align-items: center;
    font-family: var(--title);
    font-size: 18px;

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

    @media not all and (width >= 768px) {
      position: absolute;
      top: calc((100 / 750) * 22 * 1vw);
      right: calc((100 / 750) * 40 * 1vw);
      gap: calc((100 / 750) * 10 * 1vw);
      font-size: calc((100 / 750) * 28 * 1vw);

      &::before {
        inline-size: calc((100 / 750) * 28 * 1vw);
        aspect-ratio: 1;
      }
    }
  }
}

/* =====================
  brand
===================== */
.brand {
  /* intro */
  .u-inner[data-id='1'] {
    display: grid;
    gap: 0 141px;
    justify-content: flex-start;
    padding-block: 90px 60px;

    @media not all and (width >= 768px) {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-block: calc((100 / 750) * 130 * 1vw) calc((100 / 750) * 90 * 1vw);
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }

    & hgroup {
      grid-area: 1 / 1 / 3 / 2;

      @media not all and (width >= 768px) {
        justify-content: flex-start;
        margin-block-end: calc((100 / 750) * 30 * 1vw);
        text-align: left;

        & span[lang='en'] {
          @media not all and (width >= 768px) {
            &::after {
              margin-inline: 0 auto;
            }
          }
        }

        & h2 {
          text-align: left;
        }
      }
    }

    & h3 {
      grid-area: 1 / 2 / 2 / 3;
      margin-block: calc((1em - 1lh) / 2);
      font-family: var(--yumin);
      font-size: 28px;
      font-weight: 600;

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

    & p {
      grid-area: 2 / 2 / 3 / 3;
      max-inline-size: 683px;
      margin-block: calc((1em - 1lh) / 2);

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

  /* wrap */
  .wrap {
    background-image: url('../img/top/brand/bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

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

    @media not all and (width >= 768px) {
      background-image: url('../img/top/brand/bg_sp.png');
    }

    .u-inner {
      max-inline-size: 1150px;
    }

    & ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-flow: column;
      color: white;

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

      & li {
        position: relative;
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
        gap: 60px;
        padding-block: 110px;

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

        & hgroup {
          display: grid;
          gap: 16px;
          justify-content: center;
          text-align: center;

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

          & [lang='en'] {
            margin-block: calc((1em - 1lh) / 2);
            font-family: var(--title);
            font-size: 32px;
            font-weight: 600;
            line-height: 1;

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

          & h3 {
            margin-block: calc((1em - 1lh) / 2);
            font-size: 14px;
            line-height: 1;

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

        & img {
          display: block;
          margin-inline: auto;
        }

        &:nth-child(1) {
          padding-inline: 0 71px;

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

          & img {
            inline-size: 272px;

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

        &:nth-child(2) {
          padding-inline: 71px 0;

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

          & img {
            inline-size: 292px;

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

        & p {
          max-inline-size: 510px;
          margin-block: calc((1em - 1lh) / 2);
          margin-inline: auto;

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

        .u-anchor {
          margin-inline: auto;
        }

        & + li {
          border-left: 1px solid #fff;

          @media not all and (width >= 768px) {
            border-top: 1px solid #fff;
            border-left: unset;
          }
        }
      }
    }
  }
}

/* =====================
  recommend
===================== */
.recommend {
  padding-block: 107px 130px;

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

  .u-head {
    position: relative;

    &::before {
      position: absolute;
      bottom: 0;
      left: -41px;
      inline-size: 243px;
      block-size: 92px;
      content: '';
      background-image: url('../img/common/illust.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

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

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

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

  .u-anchor {
    margin-block-start: 60px;
    margin-inline: auto;

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