@charset "UTF-8";

/* =====================
  header active
===================== */
@layer style {
  .header .nav>ul {
    --active-anchor: --company;

    &::before {
      opacity: 1;
    }
  }
}

/* =====================
  message
===================== */
.message {
  padding-block: 119px;

  @media (width <=768px) {
    padding-block: var(--nudge-7);
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    padding-block: 79px 81px;
    border: 1px solid var(--primary);
    border-radius: 40px;

    @media (width > 768px) {
      max-inline-size: 1200px;
      padding-inline: 130px;
    }

    @media (width <=768px) {
      max-inline-size: calc(100% - calc((100 / 390) * 32 * 1vw));
      padding-block: var(--nudge-5);
      border-radius: calc((100 / 390) * 40 * 1vw);
    }
  }

  /* ==== body ==== */
  .body {
    display: block grid;
    gap: 23px;
    margin-block-start: 48px;
    font-size: 18px;

    @media (width <=768px) {
      gap: calc((100 / 390) * 21 * 1vw);
      margin-block-start: var(--nudge-4);
      font-size: calc((100 / 390) * 15 * 1vw);
    }

    p {
      line-height: 1.9;
    }
  }

  /* ==== dl ==== */
  dl {
    display: block flex;
    gap: 26px;
    align-items: center;
    justify-self: end;
    margin-block-start: 34px;
    font-size: 18px;

    @media (width <=768px) {
      gap: var(--nudge-2);
      margin-block-start: var(--nudge-4);
      font-size: calc((100 / 390) * 15 * 1vw);
    }

    dd {
      font-size: 24px;

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

/* =====================
  strength
===================== */
.strength {
  padding-block: 120px;
  background: var(--lightblue);

  @media (width <=768px) {
    padding-block: var(--nudge-7);
  }

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    justify-content: end;
  }

  /* ==== contents ==== */
  .contents {
    position: relative;
    max-inline-size: 904px;
    padding-block: 80px 78px;
    padding-inline: 120px;
    background: var(--white);
    border-radius: 40px;

    @media (width <=768px) {
      max-inline-size: 100%;
      padding-block: var(--nudge-5);
      padding-inline: calc((100 / 390) * 16 * 1vw);
      border-radius: calc((100 / 390) * 40 * 1vw);
    }
  }

  /* ==== .body ==== */
  .body {
    display: block grid;
    gap: 24px;
    margin-block-start: 48px;
    font-size: 18px;

    @media (width <=768px) {
      gap: calc((100 / 390) * 21 * 1vw);
      padding-block-end: var(--nudge-4);
      margin-block-start: var(--nudge-4);
      font-size: calc((100 / 390) * 15 * 1vw);
    }

    p {
      line-height: 1.9;
    }
  }

  /* ==== img ==== */
  img {
    position: absolute;
    border-radius: 40px;

    @media (width <=768px) {
      position: relative;
    }

    @media (width <=768px) {
      border-radius: calc((100 / 390) * 40 * 1vw);
    }

    @media (width > 768px) {
      &[data-id='1'] {
        inset-block-start: 114px;
        inset-inline-start: -217px;
      }

      &[data-id='2'] {
        inset-block-start: 381px;
        inset-inline-start: -384px;
      }
    }

    @media (width <=768px) {
      &[data-id='1'] {
        position: relative;
        z-index: 2;
        inline-size: 40vw;
      }

      &[data-id='2'] {
        display: block;
        inline-size: 60vw;
        margin-block-start: -24vw;
        margin-inline: auto 0;
      }
    }
  }
}

/* =====================
  philosophy
===================== */
.philosophy {
  padding-block: 120px;

  @media (width <=768px) {
    padding-block: var(--nudge-7);
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
  }

  /* ==== catch ==== */
  .catch {
    display: block flex;
    gap: 25px;
    align-items: center;
    justify-content: center;
    margin-block-start: 51px;
    font-size: 24px;
    font-weight: 500;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: 0;
      margin-block-start: var(--nudge-5);
      font-size: calc((100 / 390) * 18 * 1vw);
    }

    strong {
      font-size: 32px;

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

  /* ==== section ==== */
  section {
    display: block grid;
    align-items: start;
    padding-block: 48px;
    padding-inline: 80px;
    margin-block-start: 38px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 40px;

    @media (width <=768px) {
      padding-block: calc((100 / 390) * 32 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw);
      margin-block-start: var(--nudge-4);
      border-radius: calc((100 / 390) * 40 * 1vw);
    }

    &+section {
      margin-block-start: 40px;

      @media (width <=768px) {
        margin-block-start: var(--nudge-4);
      }
    }

    hgroup {
      display: block flex;
      gap: 32px;
      align-items: center;
      justify-content: center;

      @media (width <=768px) {
        display: block grid;
        gap: 0 3vw;
        align-items: center;
        justify-content: center;
      }

      p {
        display: block flex;
        gap: 10px;
        align-items: center;
        font-size: 24px;
        color: var(--primary);

        @media (width <=768px) {
          grid-row: 1 / 2;
          grid-column: 1 / 2;
          gap: 1.2vw;
          justify-self: flex-end;
          font-size: calc((100 / 390) * 16 * 1vw);
        }

        &::before {
          inline-size: 19px;
          aspect-ratio: 1 / 1;
          content: '';
          background-image: url('../img/about/philosophy/hgroup.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;

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

      [lang='en'] {
        @media (width <=768px) {
          grid-row: 1 / 2;
          grid-column: 2 / 3;
          align-self: end;
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }

      .title {
        font-size: 18px;

        @media (width <=768px) {
          grid-row: 2 / 2;
          grid-column: 1 / 3;
          font-size: calc((100 / 390) * 18 * 1vw);
          text-align: center;
        }
      }
    }

    .contents {
      padding-block: 41px;
      padding-inline: 110px;
      margin-block-start: 31px;
      background: white;
      border-radius: 20px;

      @media (width <=768px) {
        padding-block: calc((100 / 390) * 22 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
        margin-block-start: 31px;
        border-radius: calc((100 / 390) * 20 * 1vw);
      }

      &:has(dl) {
        padding-block: 41px 24px;
        padding-inline: 40px;

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

      p {
        font-size: 18px;
        text-align: center;

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

      dl {
        display: block grid;
        margin-block-start: -15px;
        font-size: 18px;

        @media (width <=768px) {
          inline-size: 100%;
          margin-block-start: 0;
          font-size: calc((100 / 390) * 15 * 1vw);
        }

        .tr {
          display: block grid;
          grid-template-columns: 192px auto;
          gap: 0 56px;
          align-items: center;
          padding-block: 22.6px;
          padding-inline: 40px;
          border-block-end: 2px dashed var(--gray_road);

          &:last-child {
            border-block-end-color: transparent;
          }

          @media (width <=768px) {
            display: block flex;
            flex-direction: column;
            gap: 4vw;
            padding-block: 6vw;
            padding-inline: calc((100 / 390) * 16 * 1vw);
          }
        }

        dt {
          display: block grid;
          place-content: center;
          padding-block: 8px;
          color: white;
          background: var(--primary);
          border-radius: 10px;

          @media (width <=768px) {
            inline-size: 100%;
            padding-block: var(--nudge-1);
            font-size: calc((100 / 390) * 16 * 1vw);
            border-radius: calc((100 / 390) * 10 * 1vw);
          }
        }

        dd {
          line-height: 1.9;

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

  section[data-id='1'] {
    background-image: url('../img/about/philosophy/bg1.webp');
  }

  section[data-id='2'] {
    background-image: url('../img/about/philosophy/bg2.webp');
  }

  section[data-id='3'] {
    background-image: url('../img/about/philosophy/bg3.webp');
  }

  section[data-id='4'] {
    background-image: url('../img/about/philosophy/bg4.webp');
  }
}

/* =====================
  outline
===================== */
.outline {
  padding-block: 120px;
  background: var(--primary);
  border-radius: 40px;

  @media (width <=768px) {
    padding-block: var(--nudge-7);
    border-radius: calc((100 / 390) * 40 * 1vw);
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 56px;

    @media (width <=768px) {
      gap: var(--nudge-4);
    }
  }

  /* ==== u-table ==== */
  .u-table {
    @media (width > 768px) {
      padding-block: 81px;
    }

    .address {
      grid-template-columns: auto;
      gap: 0;

      .tel-fax {
        display: block flex;
        gap: 17px;

        @media (width <=768px) {
          display: block flex;
          flex-direction: column;
          gap: 0;
        }

        p {
          display: block flex;
        }
      }
    }

    .list {
      li {
        display: block flex;
        gap: 17px;

        @media (width <=768px) {
          gap: var(--nudge-2);
        }
      }
    }
  }
}

/* =====================
  history
===================== */
.history {
  padding-block: 120px;

  @media (width <=768px) {
    padding-block: var(--nudge-7);
  }

  /* ==== history-list ==== */
  .history-list {
    position: relative;
    display: block grid;
    gap: 46px;
    padding-block: 99px 129px;
    padding-inline: 80px;
    margin-block-start: 50px;
    background: var(--lightblue);
    border-radius: 40px;

    @media (width <=768px) {
      gap: var(--nudge-5);
      padding-block: calc((100 / 390) * 42 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw);
      margin-block-start: var(--nudge-7);
      border-radius: calc((100 / 390) * 40 * 1vw);
    }

    &::before {
      position: absolute;
      inset-block-start: 116px;
      inset-inline-start: 296px;
      inline-size: 16px;
      block-size: 95.2%;
      content: '';
      background: linear-gradient(180deg, #fff 0%, #fff 97.81%, rgb(255 255 255 / 10%) 100%);
      border-radius: 20px 20px 0 0;

      @media (width <=768px) {
        inset-block-start: 14vw;
        inset-inline-start: 5vw;
        inline-size: calc((100 / 390) * 10 * 1vw);
        block-size: 98.2%;
        border-radius: calc((100 / 390) * 20 * 1vw) calc((100 / 390) * 20 * 1vw) 0 0;
      }
    }
  }

  .figure {
    display: block flex;
    flex-wrap: wrap;
    align-items: center;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: var(--nudge-2);

      img {
        inline-size: 70%;
      }
    }
  }

  .tr {
    display: block grid;
    grid-template-columns: 233px auto;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: 2vw;
      padding-inline-start: 8.8vw;
    }
  }

  dt {
    position: relative;
    display: block flex;
    align-items: center;
    align-self: flex-start;
    color: var(--primary);

    h3 {
      font-size: 32px;
      line-height: 1.1;

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

  dd {
    display: block grid;
    gap: 25px;
    padding-block-start: 9px;
    padding-inline-start: 55px;

    @media (width <=768px) {
      padding-inline-start: 0;
    }

    .pointer {
      position: relative;

      &::after {
        position: absolute;
        inset-block-start: 8px;
        inset-inline-start: -72px;
        inline-size: 16px;
        aspect-ratio: 1 / 1;
        content: '';
        background: var(--primary);
        border-radius: calc(infinity * 1px);

        @media (width <=768px) {
          inset-block-start: -8.2vw;
          inset-inline-start: -7.8vw;
          inline-size: calc((100 / 390) * 10 * 1vw);
        }
      }
    }

    h4 {
      font-size: 20px;

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

    h5 {
      font-size: 18px;

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

    section {
      display: block grid;
      gap: 24px;

      @media (width <=768px) {
        gap: var(--nudge-2);
      }
    }

    img {
      margin-inline-start: 40px;

      @media (width <=768px) {
        max-inline-size: 92%;
        margin-inline-start: 0;
      }
    }

    @media (width > 768px) {
      p {
        padding-inline-end: 60px;
        margin-block-start: -7px;
        font-size: 18px;
        line-height: 1.9;

        &[data-fz='16'] {
          font-size: 16px;
        }
      }
    }

    @media (width <=768px) {
      .u-anchor {
        margin-block-start: var(--nudge-1);
        margin-inline: auto 0;
      }
    }
  }

  @media (width <=768px) {
    [data-year='2021'] {
      section+section .pointer::after {
        inset-block-start: 2.6vw;
      }
    }
  }
}

/* =====================
  access
===================== */
.access {
  padding-block: 0 120px;

  @media (width <=768px) {
    padding-block: var(--nudge-7);
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 680px auto;
    gap: 0 57px;
    align-items: start;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: var(--nudge-4);
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }

  /* ==== iframe ==== */
  iframe {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    inline-size: 100%;
    block-size: 600px;

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

  /* ==== address ==== */
  .address {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    margin-block-start: 50px;
    font-size: 18px;

    @media (width <=768px) {
      inline-size: 100%;
      margin-block-start: 0;
      font-size: calc((100 / 390) * 15 * 1vw);
      text-align: center;
    }

    .location {
      display: block flex;
      gap: 19px;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: 0;
      }
    }

    .tel-fax {
      display: block grid;

      @media (width <=768px) {
        justify-content: center;
      }

      >span {
        display: block flex;
        gap: 0;
      }

      @media (width <=768px) {
        a[href^='tel'] {
          color: var(--primary);
          text-decoration: underline;
        }
      }
    }
  }

  /* ==== u-anchor ==== */
  .u-anchor {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    margin-block-start: 39px;

    @media (width <=768px) {
      margin-block-start: -4vw;
      margin-inline: auto;
    }
  }

  /* ==== station ==== */
  .station {
    display: block grid;
    grid-row: 4 / 5;
    grid-column: 2 / 3;
    gap: 19px;
    padding-block: 33px;
    padding-inline: 40px;
    margin-block-start: 42px;
    background-image: url('../img/about/access/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 40px;

    @media (width <=768px) {
      gap: var(--nudge-2);
      inline-size: 100%;
      padding-block: calc((100 / 390) * 32 * 1vw);
      padding-inline: calc((100 / 390) * 24 * 1vw);
      margin-block-start: 0;
      border-radius: calc((100 / 390) * 40 * 1vw);
    }

    .tr {
      display: block grid;
      font-size: 16px;

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

      dt {
        position: relative;
        padding-inline-start: 27px;
        color: var(--primary);

        @media (width <=768px) {
          padding-inline-start: 6vw;
        }

        &::before {
          position: absolute;
          inset-block-start: 3px;
          inset-inline-start: 0;
          inline-size: 19px;
          aspect-ratio: 19 / 21;
          content: '';
          background-image: url('../img/about/access/train.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;

          @media (width <=768px) {
            inset-block-start: 1.2vw;
            inline-size: calc((100 / 390) * 16 * 1vw);
          }
        }
      }

      dd {
        @media (width <=768px) {
          padding-inline-start: 6vw;
          font-size: calc((100 / 390) * 15 * 1vw);
        }
      }
    }
  }
}