.contents-page {
  width: 80%;
  margin: 0 auto;
  margin: 10vh auto 0;
}



@media(max-width:768px) {
  .contents-page {
    width: 98%;
    margin: 0 auto;
    margin: 10vh auto 0;
  }
}

h1.page-title {
  position: relative;
  line-height: 1.4;
  padding: 0.25em 1em;
  display: inline-block;
}

h1.page-title:before, h1.page-title:after {
  content: '';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

h1.page-title:before {
  border-left: solid 1px #2289ff;
  border-top: solid 1px #2289ff;
  top: 0;
  left: 0;
}

h1.page-title:after {
  border-right: solid 1px #2289ff;
  border-bottom: solid 1px #2289ff;
  bottom: 0;
  right: 0;
}

.menu-category {
  padding: 2rem;
  width: 90%;
  margin: 0 auto;
}

.menu-grid {
  margin: 20vh auto 40vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}


.menu-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  padding: 5vh;
}

.menu-item.menu-box {
  margin-bottom: 20vh;
  background-color: #ffffff3d;
}

.menu-item.index {
  padding: 0;
}

.menu-item:hover {
  transform: translateY(-5px);
}

.menu-item .index_title {
  margin: 10px;
  font-weight: bold;
}

.menu-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ───────────────────────────────────────────────
   レイアウト本体
─────────────────────────────────────────────── */
.menu_ex_box_two {
  display: flex;
  flex-wrap: wrap;
  gap: 3%;
  margin-top: 20px;
  margin-bottom: 5vh;
  align-items: flex-start;
}

/* ───────────────────────────────────────────────
   画像ブロック：4:3 の枠をつくる → cover でクロップ
─────────────────────────────────────────────── */
.menu_ex_box_inbox_img {
  width: 32%;
  aspect-ratio: 4/3;
  /* ★ 横 : 縦 = 4 : 3 に変更 */
  overflow: hidden;
  flex-shrink: 0;
}

.menu_ex_box_inbox_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ───────────────────────────────────────────────
   テキストブロック
─────────────────────────────────────────────── */
.menu_ex_box_inbox_text {
  width: 65%;
  padding: 0.5vw;
  line-height: 2;
}

.menu_ex_box_inbox_text p {
  width: 100%;
}

.contents-page.about .menu_ex_box_inbox_text {
  width: 100%;
}

.contents-page.about .menu_ex_list {
  list-style: none;
  margin: 0;
}

.contents-page.about .menu_ex_list li {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.contents-page.about .label {
  flex: 0 0 8em; /* ラベルの固定幅。必要に応じて調整 */
  font-weight: bold;
}

.contents-page.about .description {
  flex: 1 1 calc(100% - 8em);
  padding-left: 0.5em;
}

@media screen and (max-width: 485px) {
  .contents-page.about .menu_ex_list li {
    flex-direction: column;
  }

  .contents-page.about .label,
  .contents-page.about .description {
    flex: 1 1 100%;
    padding-left: 0; /* インデント解除 */
  }

  .contents-page.about .label {
    margin-bottom: 0.3em; /* ラベルと本文の間に少し余白 */
  }
}

/* ───────────────────────────────────────────────
   スマホ：縦並び
─────────────────────────────────────────────── */
@media(max-width:768px) {

  .menu_ex_box_inbox_img,
  .menu_ex_box_inbox_text {
    width: 100%;
  }

  .menu_ex_box_inbox_img {
    margin-bottom: 2rem;
  }
}

/* ───────────────────────────────────────────────
   IE フォールバック
─────────────────────────────────────────────── */
@supports not (aspect-ratio:4/3) {
  .menu_ex_box_inbox_img {
    position: relative;
  }

  .menu_ex_box_inbox_img::before {
    content: "";
    display: block;
    padding-top: 75%;
    /* 3 ÷ 4 ×100 = 75% */
  }

  .menu_ex_box_inbox_img img {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.menu-item.index img {
  width: 100%;
  /* 横幅をカードにフィット */
  aspect-ratio: 5 / 3;
  /* 横:縦 = 3:4 */
  object-fit: cover;
  /* カード枠いっぱいにトリミング */
  display: block;
}

/* ───────────────────────────────────────────────
   ➊ ３枚横並びレイアウト
─────────────────────────────────────────────── */
.menu_ex_box_three {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  /* 段落ちしても整う一律の余白 */
  margin-bottom: 5vh;
}

/* ───────────────────────────────────────────────
   ➋ 各カードの箱
─────────────────────────────────────────────── */
.menu_ex_box_three_box {
  width: 32%;
  /* ３カラム（100 − gap×2 ≒ 32%×3） */
  display: flex;
  flex-direction: column;
  /* キャプションを画像の下に配置 */
}

/* ───────────────────────────────────────────────
   ➌ 画像：横４×縦３の比率を CSS で強制
─────────────────────────────────────────────── */
.menu_ex_box_three_box img {
  width: 100%;
  aspect-ratio: 4/3;
  /* 横 : 縦 = 4 : 3 ←★キモ */
  height: auto;
  /* 比率計算に任せる            */
  object-fit: cover;
  /* 余白ゼロで中央トリミング   */
  display: block;
  /* 行間ギャップを解消         */
}

/* ───────────────────────────────────────────────
   ➍ キャプション
─────────────────────────────────────────────── */
.menu_ex_box_three_box p {
  font-size: .85rem;
  margin-top: .5rem;
}

/* ───────────────────────────────────────────────
   ➎ スマホ：２枚 → １枚と段階的に崩す
─────────────────────────────────────────────── */
@media(max-width:768px) {
  .menu_ex_box_three_box {
    width: 48%;
  }

  /* ２カラム */
}

@media(max-width:480px) {
  .menu_ex_box_three_box {
    width: 100%;
  }

  /* １カラム */
}

/* ───────────────────────────────────────────────
   ➏ IE11 フォールバック（aspect-ratio 非対応対策）
─────────────────────────────────────────────── */
@supports not (aspect-ratio:4/3) {
  .menu_ex_box_three_box img {
    width: 100%;
    height: auto;
  }

  /* 画像が 4:3 以外でも縦横比は元画像に依存（クロップ不可）になります。
     もし厳密に 4:3 を死守したい場合は、<figure> を増やして
     padding-top:75% ハックを適用してください。 */
}

.menu_ex_box_one {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.menu_ex_box_text {
  width: 100%;
}

.menu_ex_box_text ul {
  list-style-type: disc;
  padding-left: 20px;
}

.menu_ex_list {
  background: #e7e7e7;
  border-radius: 8px;
  padding: 20px;
}

.menu_ex_box_inbox_text.under {
  margin-top: 20px;
  width: 100%;
}

.menu_ex_box_inbox_text.text_box {
  margin-bottom: 20px;
  width: 100%;
}

.h2_menu_ex_title {
  font-size: 2rem;
  margin-bottom: 10px;
}


.h3_menu_ex_title {
  font-size: 1.5rem;
  /* 任意のサイズに調整 */
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 10px;
  /* アイコンとテキストの間隔 */
  border-bottom: dotted 2px #42a6ed;
}

.h3_menu_ex_title .icon {
  height: 1.5rem;
  /* フォントサイズに比例 */
  width: auto;
  display: inline-block;
}

.menu_ex_box_inbox_img.yoko_scroll {
  width: 32%;
}

.menu_ex_box_inbox_img.yoko_scroll .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}
@media(max-width:480px) {
.h2_menu_ex_title {
  font-size: 1.5rem;
}
.h3_menu_ex_title {
  font-size: 1.4rem;
}
}



@media(max-width:768px) {
  .menu-grid {
    grid-template-columns: 1fr;
  }

  .menu_ex_box_inbox_img.yoko_scroll {
    width: 100%;
  }


  .menu_ex_box_two, .menu_ex_box_three {
    flex-direction: column;
  }
}