@charset "UTF-8";

.main {
  /* =====================
    message
  ===================== */
  .article[data-id='1'] {
    padding-block: 36px 0;

    @media (width <= 768px) {
      padding-block: 0 19vw;
    }

    /* =====================
      message contents
    ===================== */
    .message .u-inner {
      display: block grid;
      grid-template-columns: 1fr 400px;
      gap: 0 60px;

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

      /* ==== head ==== */
      .head {
        position: relative;
        inset-block-start: 90px;
        z-index: 2;
        display: block grid;
        grid-area: 1 / 1 / 2 / 3;
        inline-size: fit-content;
        font-family: var(--yumin);
        font-size: 18px;
        font-weight: 600;

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

        /* h1 */
        .title {
          position: absolute;
          inset-block-end: 0;
          inset-inline-start: 15px;

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

        &::before {
          position: relative;
          inset-block-start: 4px;
          inset-inline-start: -106px;
          inline-size: 374px;
          aspect-ratio: 374 / 164;
          content: '';
          background-image: url('../img/company/message/text.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }

        @media (width <= 768px) {
          &::before {
            inset-block-start: 0;
            inset-inline-start: -4vw;
            inline-size: calc((100 / 390) * 213 * 1vw);
          }
        }
      }

      /* ==== picture ==== */
      .picture {
        grid-area: 2 / 1 / 5 / 2;
        block-size: 430px;
        margin-inline: calc(50% - 50vw) 0;

        @media (width <= 768px) {
          block-size: 40vw;
          margin-inline: calc(50% - 50vw);
        }

        & img {
          inline-size: 100%;
          block-size: 100%;
          object-fit: cover;
          object-position: right top;
        }
      }

      /* ==== .catch ==== */
      .catch {
        grid-area: 2 / 2 / 3 / 3;
        align-self: flex-start;
        margin-block: 0 calc((1em - 1lh) / 2);
        margin-block-end: 46px;
        font-family: var(--yumin);
        font-size: 40px;
        font-weight: 600;
        line-height: 1.4;

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

        & span {
          display: block flow;

          @media (width <= 768px) {
            display: inline;
          }
        }
      }

      /* ==== .body ==== */
      .body {
        grid-area: 3 / 2 / 4 / 3;
        align-self: flex-start;
        margin-block: calc((1em - 1lh) / 2);
        margin-block-end: 41px;
        font-weight: 400;

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

      /* ==== author ==== */
      .author {
        display: block grid;
        grid-area: 4 / 2 / 5 / 3;
        gap: 7px;
        align-items: flex-end;
        align-self: flex-start;
        justify-content: flex-end;
        block-size: fit-content;
        padding-block-start: 0;

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

        .text {
          align-self: flex-end;
        }

        & dl {
          display: block flex;
          gap: 20px;
          align-items: center;

          @media (width <= 768px) {
            gap: 1em;
          }
        }

        & dt {
          margin-block: calc((1em - 1lh) / 2);
          line-height: 1;

          @media (width > 768px) {
            translate: 0 2px;
          }
        }

        & dd {
          margin-block: calc((1em - 1lh) / 2);
          font-family: 'Yuji Syuku', serif;
          font-size: 32px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 1.28px;

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

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

      @media (width <= 768px) {
        padding-block: 16vw 0;
      }

      /* ==== hgroup ==== */
      & hgroup {
        position: relative;
        display: block grid;
        gap: 10px;
        margin-block-end: 50px;
        text-align: center;

        @media (width <= 768px) {
          gap: calc((100 / 390) * 10 * 1vw);
          margin-block-end: calc((100 / 390) * 20 * 1vw);
        }

        &::before,
        &::after {
          position: absolute;
          inset-block-start: 16px;
          inline-size: 36.1%;
          block-size: 1px;
          content: '';
          background: #c9c9c9;
        }

        @media (width <= 768px) {
          &::before,
          &::after {
            inset-block-start: calc((100 / 390) * 12 * 1vw);
            inline-size: 23.1%;
          }
        }

        &::before {
          inset-inline-start: 0;
        }

        &::after {
          inset-inline-end: 0;
        }

        & [lang='en'] {
          position: relative;
          display: block flow;
          margin-block: calc((1em - 1lh) / 2);
          font-family: var(--oswald);
          font-size: 35px;
          font-weight: 500;
          line-height: 1;
          text-align: center;
          text-transform: uppercase;
          letter-spacing: 14px;

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

        .title {
          font-family: var(--yumin);
          font-size: 18px;
          font-weight: 600;
          letter-spacing: 7.2px;

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

      /* ==== lead ==== */
      & .lead {
        max-inline-size: 1120px;
        padding-block: 30px 27px;
        padding-inline: 40px;
        margin-inline: auto;
        font-family: var(--yumin);
        font-size: 22px;
        font-weight: 400;
        line-height: 1.65;
        background: white;
        border: 1px solid #e1e1e1;
        box-shadow: 0 0 18px 0 rgb(0 0 0 / 10%);

        @media (width <= 768px) {
          max-inline-size: calc((100 / 390) * 360 * 1vw);
          padding-block: 3vw;
          padding-inline: calc((100 / 390) * 16 * 1vw);
          font-size: calc((100 / 390) * 14 * 1vw);
          line-height: 2.1;
          text-align: center;
        }
      }
    }
  }

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

    @media (width <= 768px) {
      padding-block: 16vw;
    }

    /* ==== u-head ==== */
    .u-head {
      margin-block-end: 64px;

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

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

    @media (width <= 768px) {
      padding-block: 16vw;
    }

    /* ==== u-head ==== */
    .u-head {
      margin-block-end: 64px;

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

  /* =====================
    access
  ===================== */
  .access {
    padding-block: 150px 160px;
    overflow: clip;
    background: var(--bg);

    @media (width <= 768px) {
      padding-block: 16vw;
    }

    /* ==== u-head ==== */
    .u-head {
      margin-block-end: 64px;

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

    /* ==== iframe ==== */
    & iframe {
      display: block flow;
      width: 100vw;
      block-size: 520px;
      margin-block-end: 32px;
      margin-inline: calc(50% - 50vw);

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

    /* ==== address ==== */
    .address {
      display: block flex;
      align-items: center;
      justify-content: space-between;
      padding-inline-end: 4px;

      @media (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: calc((100 / 390) * 24 * 1vw);
        align-items: flex-start;
        align-items: center;
        justify-content: center;
        padding-inline: 0;
        text-align: center;

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

    /* ==== anchor ==== */
    .u-anchor {
      @media (width > 768px) {
        translate: 0 -2px;
      }
    }
  }
}