@charset "UTF-8";

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

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

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 440px auto;
    gap: 0 79px;

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

    /* ==== .u-head ==== */
    .u-head {
      grid-area: 1 / 1 / 2 / 3;
    }

    /* ==== picture ==== */
    .picture {
      grid-area: 2 / 1 / 7 / 2;
      margin-block-start: 70px;

      @media (width <= 768px) {
        block-size: 50vw;
        margin-block-start: calc((100 / 390) * 20 * 1vw);
        object-fit: cover;
        object-position: 0 -11vw;
      }
    }

    /* ==== .lead ==== */
    .lead {
      grid-area: 2 / 2 / 3 / 3;
      padding-block-start: 107px;
      font-size: 32px;
      font-weight: 400;
      color: var(--text-primary);

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

    /* ==== .body ==== */
    .body {
      grid-area: 3 / 2 / 5 / 3;
      align-self: flex-start;
      padding-block-start: 40px;

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

    /* ==== .author ==== */
    .author {
      display: block grid;
      grid-area: 5 / 2 / 6 / 3;
      gap: 15px;
      inline-size: fit-content;
      padding-block-start: 41px;
      margin-inline: auto 0;

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

      & h2 {
        text-align: left;
      }

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

        @media (width <= 768px) {
          gap: calc((100 / 390) * 18 * 1vw);
        }

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

        & dd {
          font-family: 'Yuji Syuku', system-ui;
          font-size: 32px;
          font-weight: 400;
          line-height: 1;
          color: #000;
          letter-spacing: 1.28px;

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

/* =====================
  philosophy
===================== */
.philosophy {
  padding-block: 152px 160px;
  background: white;

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

  /* ==== lead ==== */
  .lead {
    margin-block-start: 49px;
    font-size: 24px;
    font-weight: 400;
    color: #000;
    text-align: center;

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

  /* ==== item ==== */
  .item {
    position: relative;
    display: block grid;
    grid-template-columns: 1fr 430px;
    gap: 0 20px;
    margin-block-start: 40px;

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

    /* ==== list ==== */
    .list {
      display: grid block;
      gap: 192px;
      padding-block: 301px;
      counter-reset: number;

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

      & li {
        display: block grid;
        grid-template-rows: auto 1fr;
        gap: 10px;

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

        @media (width > 768px) {
          &:not(:last-child) {
            block-size: 100vh;
          }
        }

        @media (width <= 768px) {
          & p br {
            display: none;
          }
        }
      }

      /* ==== hgroup ==== */
      & hgroup {
        display: block grid;
        grid-auto-flow: column;
        gap: 31px;
        align-items: center;
        justify-content: flex-start;
        color: var(--sub);

        @media (width <= 768px) {
          grid-template-columns: auto 1fr;
          grid-auto-flow: unset;
          gap: calc((100 / 390) * 0 * 1vw) calc((100 / 390) * 10 * 1vw);
        }

        & span[lang='en'] {
          font-size: 44px;
          font-weight: 400;
          translate: 0 -5px;

          @media (width <= 768px) {
            grid-area: 1 / 2 / 2 / 3;
            font-size: calc((100 / 390) * 32 * 1vw);
            line-height: 1;
            translate: 0 0;
          }
        }

        &::before {
          font-family: var(--title);
          font-size: 30px;
          font-weight: 400;
          content: '0' counter(number);
          counter-increment: number;
        }

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

        & h3 {
          display: block flex;
          gap: 6px;
          font-size: 26px;
          font-weight: 500;

          @media (width <= 768px) {
            grid-area: 2 / 2 / 3 / 3;
            gap: calc((100 / 390) * 6 * 1vw);
            justify-content: flex-start;
            font-size: calc((100 / 390) * 13 * 1vw);
          }

          &::before {
            content: '(';
          }

          &::after {
            content: ')';
          }
        }
      }
    }

    /* ==== picture ==== */
    .picture {
      position: sticky;
      top: 180px;
      right: 0;
      margin-block-start: 141px;

      @media (width <= 768px) {
        position: unset;
        inset: unset;
        block-size: calc((100 / 390) * 140 * 1vw);
        margin-block-start: calc((100 / 390) * 40 * 1vw);
        object-fit: cover;
      }
    }
  }

  /* ==== logo-container ==== */
  .logo-container {
    padding-block: 220px 0;
    overflow: hidden;

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

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

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

    /* ==== hgroup ==== */
    & hgroup {
      position: relative;
      display: block grid;
      gap: 1px;
      justify-content: center;
      inline-size: 100cqi;
      margin-inline: calc(50% - 50cqi);

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

      &::before {
        position: absolute;
        inset-block-start: 30px;
        inset-inline: auto;
        display: block flow;
        inline-size: 100cqi;
        block-size: 1px;
        margin-inline: auto;
        content: '';
        background: #c9c9c9;
      }

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

      & span[lang='en'] {
        position: relative;
        z-index: 2;
        padding-inline: 19px;
        font-size: 35px;
        font-weight: 600;
        letter-spacing: 3.5px;
        background: white;

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

      & h3 {
        font-size: 20px;
        text-align: center;
        letter-spacing: 4px;

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

    /* ==== picture ==== */
    .picture {
      display: block flow;
      inline-size: 220px;
      margin-inline: auto;

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

    /* ==== body ==== */
    .body {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      color: #000;
      text-align: center;

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

/* =====================
  profile
===================== */
.profile {
  padding-block: 152px 161px;

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

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

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

/* =====================
  history
===================== */
.history {
  padding-block: 150px 161px;
  background: white;

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

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

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

/* =====================
  access
===================== */
.access {
  padding-block: 151px 199px;

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

  /* ==== iframe ==== */
  & iframe {
    display: block flow;
    inline-size: 100%;
    block-size: 520px;
    margin-block: 50px 29px;

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

  /* ==== address ==== */
  .address {
    display: block flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    color: #000;

    @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;
      }
    }

    .u-anchor {
      padding-inline: 31px 16px;
      font-weight: 400;
      letter-spacing: 0.48px;

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