/* ========== About OKAZUのエリア ========== */

.about {
  /* =========  2カラムのレイアウト  ====== */
  padding-bottom: 0;
  .layout-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 60px;
    margin-bottom: 160px;
    @media (width <= 800px) {
      grid-template-columns: 1fr;
      max-width: 400px;
      margin: 0 auto;
      .image {
        order: 1;
      }
      .text {
        order: 2;
      }
    }
  }

  .image {
    /* ========== 画像サイズ指定 ======== */
    border-radius: 40px;
    overflow: hidden;
    img {
      width: 100%;
      aspect-ratio: 5 / 4;
      object-fit: cover;
    }
  }
  /* =========== テキストスタイル =========== */
  .text {
    img {
      height: 100px;
    }
    h3 {
      font-size: 28px;
      font-weight: 700;
      margin-top: 20px;
      @media (width <= 800px) {
        font-size: 18px;
        font-weight: 500;
        margin-top: -10%;
      }
    }
    p {
      margin-top: 30px;
      letter-spacing: 1.5px;
      line-height: 1.5;
      @media (width <= 800px) {
        font-size: 14px;
        font-weight: 300;
      }
    }
  }
}

.layout-menu:last-child {
  margin-bottom: 20px;
}

/* ========= hero-menu画像エリア ========*/
.hero-menu {
  height: 450px;
  background-image: url(../images/menu-img-1.jpg);
  background-size: cover;
  @media (width <= 800px) {
    max-width: 100％;
    height: 350px;
    object-fit: contain;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.container:nth-child(even) {
  background-color: #f3f1ee;
  max-width: 1160px;
  margin: 0 auto 0;
  padding: 40px 0 40px 0;
}

.container-width {
  max-width: 1440px;
  margin-bottom: 0;
  background-color: #f3f1ee;
}