@charset "UTF-8";

/* =====================
  main
===================== */
.main::before {
  position: absolute;
  inset-block-start: var(--header-height);
  inset-inline: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 2254px;
  pointer-events: none;
  content: '';
  background-image: url('../img/company/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  @media (width <=768px) {
    inset-block-start: 0;
    height: calc((100 / 390) * 4208 / 2 * 1vw);
    background-image: url('../img/company/bg_sp.webp');
  }
}

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

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

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

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

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

  /* ==== img ==== */
  .img {
    position: relative;
    grid-row: 1 / 4;
    grid-column: 1 / 2;

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

    img {
      @media (width <=768px) {
        object-fit: cover;
      }
    }

    &::before {
      position: absolute;
      inset-block-start: -6.1vw;
      inset-inline-start: -7.8vw;
      inline-size: 671px;
      aspect-ratio: 671 / 118;
      pointer-events: none;
      content: '';
      background-image: url('../img/company/message/text.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;

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

  /* ==== catch ==== */
  .catch {
    position: relative;
    z-index: 2;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    margin-block-start: 109px;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 1.7px;

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

  /* ==== body ==== */
  .body {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    margin-block-start: 28px;

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

  /* ==== author ==== */
  .author {
    display: block grid;
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    gap: 10px;
    margin-block-start: 41px;
    margin-inline: auto 0;

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

    .site {
      font-size: 15px;
      font-weight: 400;
      color: #111;

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

    dl {
      display: block flex;
      gap: 17px;
      align-items: center;
      margin-block-start: -16px;

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

      dt {
        color: #111;
        translate: 0 0;

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

      dd {
        font-family: 'Yuji Syuku', serif;
        font-size: 32px;
        font-weight: 400;
        letter-spacing: 1.28px;

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

/* =====================
  profile
===================== */
.profile {
  padding-block: 146px 160px;
  background: white;

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

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

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

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

  /* ==== sales-item ==== */
  .sales-item {
    display: block grid;
    grid-template-columns: 135px 1fr;
    gap: 21px 0;

    @media (width <=768px) {
      grid-template-columns: 1fr;
      gap: var(--nudge-2);
    }

    section {
      display: block grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      align-items: self-start;

      h3 {
        @media (width <=768px) {
          padding-block-end: 1vw;
          margin-block-end: 1vw;
          border-block-end: 1px dashed color-mix(in srgb, #a8a8a8 50%, #fff 50%);
        }
      }
    }

    ul {
      display: block grid;

      @media (width <=768px) {
        margin-inline-start: 1em;

        li {
          padding-inline-start: 1em;
          text-indent: -0.8em;
        }

        li::before {
          margin-inline-end: 0.5em;
          content: '-';
        }
      }
    }
  }

  /* ==== col-list ==== */
  .col-list {
    display: block grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px 5px;

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

/* =====================
  history
===================== */
.history {
  padding-block: 146px 160px;
  background: var(--bg-light-green);

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

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

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

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

/* =====================
  access
===================== */
.access {
  padding-block: 146px 161px;
  overflow: clip;

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 1fr auto;

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

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

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

  /* ==== iframe ==== */
  iframe {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    inline-size: 100vw;
    min-block-size: 500px;
    margin-block-start: 39px;
    margin-inline: calc(50% - 50cqi);

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

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

    @media (width <=768px) {
      inline-size: 100%;
      margin-block-start: var(--nudge-3);
      text-align: center;
    }

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

      @media (width <=768px) {
        display: block flex;
        gap: var(--nudge-2);
        justify-content: center;
        inline-size: 100%;
        margin-inline: auto;
        font-size: calc((100 / 390) * 14 * 1vw);
        font-weight: 400;
      }
    }

    .tel-fax {
      display: block flex;
      gap: 2px;
      margin-block-start: -10px;

      @media (width <=768px) {
        display: block flex;
        gap: var(--nudge-1);
        justify-content: center;
        margin-block-start: 0;
        font-size: calc((100 / 390) * 14 * 1vw);
        font-weight: 400;

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

      @media (width > 768px) {
        span+span::before {
          margin-inline-end: 1px;
          content: '／';
        }
      }
    }
  }

  .u-anchor {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    align-self: flex-start;

    @media (width > 768px) {
      padding-block: 19px;
      padding-inline: 34px;
    }

    margin-block-start: 41px;

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