@charset "UTF-8";

/* =====================
  header active
===================== */
@layer style {
  [data-page='company'] .header ul {
    --active-anchor: --company;

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

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

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 400px 620px;
    gap: 0 100px;

    @media (width > 768px) {
      padding-inline: 80px;
    }

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

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

  /* ==== catch ==== */
  .catch {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    margin-block: 59px 66px;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.5;

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

  /* ==== img ==== */
  img {
    grid-row: 3 / 6;
    grid-column: 1 / 2;

    @media (width <=768px) {
      inline-size: 100%;
    }
  }

  /* ==== body ==== */
  .body {
    display: block grid;
    gap: 30px;

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

  /* ==== author ==== */
  .author {
    display: block grid;
    grid-row: 4 / 5;
    grid-column: 2 / 3;
    gap: 1px;
    inline-size: fit-content;
    margin-block-start: 39px;
    margin-inline: auto 0;
    font-size: 15px;

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

    dl {
      display: block flex;
      gap: 25px;
      align-items: center;
      margin-block: calc((1em - 1lh) / 2);

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

      dd {
        font-family: 'Yuji Syuku', serif;
        font-size: 32px;
        translate: -4px -1px;

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

  /* ==== link ==== */
  .link {
    grid-row: 5 / 6;
    grid-column: 1 / 3;
    padding-block: 55px 59px;
    margin-block-start: 111px;
    text-align: center;
    border: 1px solid #afb7bd;
    border-radius: 20px;

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

    h3 {
      font-size: 30px;
      font-weight: 600;

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

    p {
      margin-block-start: 25px;

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

    .anchor {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      inline-size: fit-content;
      padding-inline-start: 45px;
      margin-block-start: 30px;
      margin-inline: auto;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: var(--nudge-2);
        padding-inline-start: 0;
        margin-block-start: var(--nudge-3);

        a {
          inline-size: calc((100 / 390) * 265 * 1vw);
          margin-inline: auto;
          text-align: left;
        }
      }
    }
  }
}

/* =====================
  profile
===================== */
.profile {
  padding-block: 148px 160px;
  background: var(--bg2);

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

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

    @media (width > 768px) {
      padding-inline: 80px;
    }
  }

  /* ==== u-table ==== */
  .u-table {
    margin-block-start: 51px;

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

/* =====================
  access
===================== */
.access {
  padding-block: 148px 159px;

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

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

    @media (width > 768px) {
      padding-inline: 80px;
    }
  }

  /* ==== section-wrap ==== */
  .section-wrapper {
    display: block grid;
    gap: 99px;
    margin-block-start: 50px;

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

    section {
      position: relative;
      display: block grid;
      padding-block-start: 22px;

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

      &::before,
      &::after {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        display: block flow;
        inline-size: 100%;
        block-size: 2px;
        content: '';

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

      &::before {
        background: #e6e6e6;
      }

      &::after {
        inline-size: 40px;
        background: var(--primary);

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

      /* ==== h3 ==== */
      h3 {
        font-family: var(--serif);
        font-size: 26px;
        font-weight: 600;
        color: var(--primary);

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

    iframe {
      grid-row: 2 / 3;
      grid-column: 1 / 3;
      inline-size: 100%;
      block-size: 500px;
      margin-block: 29px 30px;

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

    h3 {
      grid-row: 1 / 2;
      grid-column: 1 / 3;
    }

    .address {
      display: block grid;
      grid-row: 3 / 4;
      grid-column: 1 / 2;
      inline-size: fit-content;
      margin-block-start: 5px;

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

      .location {
        display: block flex;
        gap: 20px;
        margin-block: calc((1em - 1lh) / 2);

        @media (width <=768px) {
          gap: 3vw;
          margin-block: unset;
        }
      }

      .tel-fax {
        display: block flex;
        gap: 3px;
        align-self: flex-start;
        margin-block: -10px calc((1em - 1lh) / 2);

        @media (width <=768px) {
          gap: 2vw;
          margin-block: unset;
        }

        span {
          display: block flex;
        }

        span+span::before {
          margin-inline-end: 4px;
          content: '／';

          @media (width <=768px) {
            margin-inline-end: 2vw;
          }
        }

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

    .u-anchor {
      grid-row: 3 / 4;
      grid-column: 2 / 3;
      justify-self: end;

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