@charset "UTF-8";

/* =====================
  greeting
===================== */
.greeting {
  padding-block: 91px 120px;
  color: white;

  @media only screen and (width <= 768px) {
    padding-block: 15.7vw 17.9vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    grid-template-columns: 459px auto;
    gap: 30px 120px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 6vw;
    }
  }

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

  /* ==== picture ==== */
  .picture {
    grid-row: 2 / 4;
    grid-column: 1 / 2;
    margin-block-start: 29px;

    & img {
      border-radius: 20px;

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

  /* ==== catch ==== */
  .catch {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    margin-block-start: 18px;
    font-size: 26px;
    font-weight: 500;
    line-height: 2;

    @media only screen and (width <= 768px) {
      margin-block-start: 5.2vw;
      font-size: calc((100 / 390) * 23 * 1vw);
      line-height: 1.8;
    }
  }

  /* ==== body ==== */
  .body {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    font-size: 16px;
    line-height: 2;

    @media only screen and (width <= 768px) {
      margin-block-start: 0.6vw;
      font-size: calc((100 / 390) * 15 * 1vw);
    }
  }

  /* ==== author ==== */
  .author {
    display: block flex;
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    gap: 24px;
    align-items: baseline;
    margin-block-start: -8px;

    @media only screen and (width <= 768px) {
      gap: 4vw;
      margin-block-start: 0.9vw;
    }

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

    & dd {
      font-family: 'Yuji Boku', serif;
      font-size: 22px;
      font-weight: 400;

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

/* =====================
  outline
===================== */
.outline {
  padding-block: 91px 121px;

  @media only screen and (width <= 768px) {
    padding-block: 15.3vw 20.3vw;
  }

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

    @media only screen and (width <= 768px) {
      gap: 6.4vw;
    }
  }

  /* ==== address ==== */
  .address {
    display: block flex;
    gap: 16px;

    @media only screen and (width <= 768px) {
      display: block grid;
      gap: 0.2vw;
      padding-inline-end: 6vw;
      font-size: calc((100 / 390) * 16 * 1vw);
    }
  }

  /* ==== tel ==== */
  .tel {
    display: block flex;
    gap: 16px;

    @media only screen and (width <= 768px) {
      display: block grid;
      gap: 0;
      margin-block-start: 0;
      font-size: calc((100 / 390) * 16 * 1vw);
    }
  }
}

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

  @media only screen and (width <= 768px) {
    padding-block: 15.3vw 20.6vw;
  }

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

    @media only screen and (width <= 768px) {
      gap: 6.3vw;
    }

    &::after {
      position: absolute;
      pointer-events: none;
      content: '';
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media only screen and (width <= 768px) {
      &::after {
        inset-block-start: 2vw;
        inset-inline-end: 2vw;
        inline-size: calc((100 / 390) * 335 / 2 * 1vw);
        block-size: calc((100 / 390) * 303 / 2 * 1vw);
        background-image: url('../img/company/history/deco_sp.png');
      }
    }
  }

  /* ==== u-table ==== */
  .u-table {
    position: relative;
    z-index: 2;
  }
}

/* =====================
  access
===================== */
.access {
  padding-block: 91px 43px;
  background-image: url('../img/company/access/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  @media only screen and (width <= 768px) {
    padding-block: 15.3vw 20.6vw;
    background-image: url('../img/company/access/bg_sp.webp');
  }

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

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 8.3vw;
    }
  }

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

  /* ==== iframe ==== */
  & iframe {
    grid-row: 1 / 5;
    grid-column: 2 / 3;
    inline-size: 100%;
    block-size: 435px;
    margin-block-start: 5px;
    border-radius: 20px;

    @media only screen and (width <= 768px) {
      block-size: calc((100 / 390) * 280 * 1vw);
      margin-block-start: 5.8vw;
      border-radius: calc((100 / 390) * 20 * 1vw);
    }
  }

  /* ==== address ==== */
  .address {
    display: block grid;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    gap: 30px;

    @media only screen and (width <= 768px) {
      gap: 4.7vw;
      margin-block-start: -0.9vw;
    }

    /* ==== unit ==== */
    .unit {
      display: block grid;
      gap: 11px;

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

      /* ==== h3 ==== */
      & h3 {
        display: block flex;
        gap: 11px;
        align-items: center;
        font-weight: 500;

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

        &::before {
          content: '';
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }

        /* map */
        &[data-icon='map']::before {
          inline-size: 21px;
          block-size: 21px;
          background-image: url('../img/company/access/map.svg');
        }

        @media only screen and (width <= 768px) {
          &[data-icon='map']::before {
            inline-size: calc((100 / 390) * 19.25 * 1vw);
            block-size: calc((100 / 390) * 19.25 * 1vw);
            translate: 0.4vw 0;
          }
        }

        /* train */
        &[data-icon='train'] {
          translate: 3px 0;
        }

        &[data-icon='train']::before {
          inline-size: 17px;
          block-size: 21px;
          background-image: url('../img/company/access/train.svg');
          translate: 0 2px;
        }

        @media only screen and (width <= 768px) {
          &[data-icon='train']::before {
            inline-size: calc((100 / 390) * 15.12 * 1vw);
            block-size: calc((100 / 390) * 19.25 * 1vw);
          }
        }
      }

      /* ==== p ==== */
      & p {
        @media only screen and (width <= 768px) {
          line-height: 2;
        }
      }

      &:has(h3[data-icon='train']) {
        & p {
          margin-block-start: 3px;

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

          & + p {
            margin-block-start: -8px;

            @media only screen and (width <= 768px) {
              margin-block-start: -3vw;
            }
          }
        }
      }

      /* ==== unit1 ==== */
      &[data-id='1'] {
        & p {
          display: block flex;
          gap: 15px;

          @media only screen and (width <= 768px) {
            display: block grid;
            gap: 0;
          }
        }
      }

      /* ==== unit2 ==== */
      &[data-id='2'] {
        & p {
          display: block flex;

          @media only screen and (width <= 768px) {
            display: block grid;
            gap: 0;
          }

          & span + span::before {
            padding-inline: 4px;
            content: '/';

            @media only screen and (width <= 768px) {
              display: none;
            }
          }
        }
      }
    }
  }

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

    @media only screen and (width <= 768px) {
      margin-block-start: -0.4vw;
    }
  }
}