/* menu-price-mod-13.css — ベースライン(自動読込・module-base.css前提)。編集せず上書きで調整。 */
@charset "UTF-8";

.mod_13_section .mod_13_title-wrap .mod_13_title {
  font-weight: bold;
}
.mod_13_section .mod_13_title-wrap .mod_13_title small,
.mod_13_section .mod_13_title-wrap .mod_13_title span {
  font-size: 0.875rem;
  font-weight: normal;
  display: block;
}
.mod_13_section .mod_13_content figure figcaption small,
.mod_13_section .mod_13_content figure figcaption span {
  font-size: 0.875rem;
  display: block;
  line-height: 1;
}
.mod_13_section .mod_13_content figure figcaption p {
  margin-bottom: 0.5em;
}
.mod_13_section.typeA .mod_13_title-wrap.inverse {
  background: var(--color-primary);
  padding: 2%; color: var(--color-on-primary); }
.mod_13_section.typeB .mod_13_title-wrap {
  position: relative;
  overflow: hidden;
}
.mod_13_section.typeB .mod_13_title-wrap .mod_13_bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: auto;
}
.mod_13_section.typeB .mod_13_title-wrap .mod_13_title {
  margin-top: 10%;
  padding: 0.5em;
  display: block;
  width: 90%;
  background: var(--color-primary); color: var(--color-on-primary); }
@media (max-width: 767px) {
  .mod_13_section.typeB .mod_13_title-wrap .mod_13_title {
    margin: 10% 0;
    width: 75%;
  }
}
.mod_13_section.typeB .mod_13_title-wrap .mod_13_title.inverse {
  color: var(--color-on-primary);
}
/* ── レイアウト強制 (2026-08-xx: 4カラムのサービスメニューがベースCSSのグリッド未解決で
   横並びにならず崩れる実害。base側の .row/.col の詳細度に依存せず、この部品専用の
   セレクタで確実にグリッド化する)。 ── */
.mod_13_section .row.tile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2.5rem; }
.mod_13_section .row.tile > .mod_13_title-wrap { flex: 0 0 100%; width: 100%; }
.mod_13_section .row.tile > .mod_13_content { flex: 1 1 100%; width: 100%; min-width: 0; }
.mod_13_section .mod_13_content .row.sp_image_cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  width: 100%;
}
.mod_13_section .mod_13_content .row.sp_image_cols > .col {
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  .mod_13_section .mod_13_content .row.sp_image_cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mod_13_section .mod_13_content .row.sp_image_cols { grid-template-columns: 1fr; }
}
/* ── 正規化追記 (2026-07-18 ユーザー指摘: テキスト/写真サイズが変) ── */
/* 3カラム画像の高さを揃える: .sp_image_cols の各 .col を flex 列にして figure を stretch */
.mod_13_section .mod_13_content .sp_image_cols { align-items: stretch; }
.mod_13_section .mod_13_content .sp_image_cols > .col figure { display: flex; flex-direction: column; flex: 1; }
.mod_13_section .mod_13_content figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; flex-shrink: 0; }
.mod_13_section .mod_13_content figure figcaption { font-size: var(--fs-body, 1.0625rem); line-height: 1.7; }
.mod_13_section .mod_13_content figure figcaption small,
.mod_13_section .mod_13_content figure figcaption span { font-size: var(--fs-small, 0.9375rem); line-height: 1.5; margin-top: 0.25em; }
.mod_13_section .mod_13_title-wrap .mod_13_title { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.4; }