/* ------------------------------
TOP PAGE
------------------------------ */
.header {
  position: sticky; left: 0; top:0; width: 100%;
  & .content {
    width: 100%; max-width: 1000px; box-sizing: border-box; padding: 10px;
    & .logo__box {
      flex-basis: 22.6%;
    }
    & .contact__box {

    }
  }
}
.navigation {
  position: sticky; left: 0; top:0; width: 100%;
}

.hero__image {
  margin: 0 0 20px 0;
  & .content {
    width: 100%; max-width: 1000px; box-sizing: border-box; padding: 10px; margin: 0 auto;
    & .hero__box {
      display: grid; grid-template-rows: 60px 1fr 1fr 1fr; grid-template-columns: 1fr 280px; margin: 0 0 20px 0;
      & .mv {
        grid-row:1 / 5; grid-column: 1 / 2;
        & figure {
          width: 100%; height: 100%;
          & img {
            width: 100%; height: 100%; object-fit: cover;
          }
        }
      }
      & h3 {
        grid-row: 1 / 2; grid-column: 2 / 3;  display: flex; align-items: center; flex-wrap: wrap; justify-content: center; font-size: var(--px18); border: var(--green01) solid 1px; font-weight: normal;
      }
      & a {
        display: block; grid-column:  2 / 3;border: var(--green01) solid 1px; border-top: none; padding: 10px 10px 10px 40px; text-decoration: none; font-feature-settings: "palt";
        & .title {
          display: block; font-size: var(--px24); text-shadow: 2px 2px 1px #ccc;
        }
        & .sub__title {
          display: block; font-size: var(--px18);
        }
        & .description {
          display: block; font-size: var(--px12);
        }
        &:nth-of-type(1) {
          grid-row: 2 / 3;
        }
        &:nth-of-type(2) {
          grid-row: 3 / 4;
        }
        &:nth-of-type(3) {
          grid-row: 4 / 5;
        }
      }
    }
    & .hero__text {
      font-size: var(--px16); color: var(--red01); font-weight: bold;
    }
  }

}