@charset "UTF-8";
/* swell_child/assets/store-table-202610141100.css （functions.php から読み込み）
   ============================================================
   記事内テーブルの体裁 2026-10-14 / MASAMEDIA

   [1] 基本装飾  … .post_content 内の全テーブル（JS不要）
                   枠線・角丸・余白・ゼブラ・語中改行の抑止。
                   列数は変えないので、JSが動かなくてもここだけが効く＝崩れない。
   [2] 縦積み    … store-table.js が店舗情報テーブルと判定して
                   .js-store-info-table を付けた2列テーブルのみ。
                   スマホでラベルを上・値を下に積む。
                   メニュー表・料金表・3列以上の表には付かない。

   記事本文（post_content）は一切書き換えずCSSとJSのみで対応する。
   ============================================================ */

/* ============================================================
   [1] 基本装飾（全テーブル・JS不要）
   ============================================================ */

/* 外枠。figure は SWELL が overflow:auto を持っているので触らない
   （横に収まらない表はカード内でスクロールでき、ページ自体は横に伸びない） */
.post_content figure.wp-block-table,
.post_content table:not(figure *) {
  background-color: #fff;
  border: 1px solid #e3e3dc;
  border-radius: 12px;
}
.post_content table:not(figure *) {
  overflow: hidden;
}

.post_content table:not(.wp-calendar-table) {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: .95em;
  line-height: 1.75;
}

/* セル共通。SWELLの td,th{word-break:break-all} を打ち消す
   （break-all は「清末鞍馬2/丁目5-17」のように数字の途中で改行してしまう）。
   overflow-wrap:anywhere なので、長いURLなど必要なときだけ途中で折り返す。 */
.post_content table:not(.wp-calendar-table) > * > tr > * {
  border: 0 !important;
  border-bottom: 1px solid #eeeee7 !important;
  padding: .72em .95em;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: anywhere;
}
.post_content table:not(.wp-calendar-table) > * > tr:last-child > * {
  border-bottom: 0 !important;
}
.post_content table:not(.wp-calendar-table) a {
  overflow-wrap: anywhere;
}

/* ゼブラ。既定の #f0f0f0 は濃いので薄い色に差し替える */
.post_content table:not(.wp-calendar-table) > tbody > tr:nth-child(odd) {
  background-color: #faf9f3;
}
.post_content table:not(.wp-calendar-table) > tbody > tr:nth-child(even) {
  background-color: #fff;
}

/* 3列以上（料金表・比較表）は縦の区切りも残す。:has() 非対応なら区切り無しになるだけ */
@supports selector(:has(*)) {
  .post_content table:not(.wp-calendar-table):has(tr > :nth-child(3)) > * > tr > * + * {
    border-left: 1px solid #eeeee7 !important;
  }
  /* 列が多いので余白は少し詰める */
  .post_content table:not(.wp-calendar-table):has(tr > :nth-child(4)) > * > tr > * {
    padding: .6em .7em;
  }
}

/* ============================================================
   [2] 店舗情報テーブルだけの表示（store-table.js がクラスを付けたとき）
   ============================================================ */

/* PC・タブレット：ラベル列の幅を確保して「営業/時間」のような割れを防ぐ。
   幅指定だけで nowrap は使わないので、長いラベルは折り返して横に溢れない。 */
.post_content table.js-store-info-table > :is(tbody, tfoot) > tr > :first-child {
  width: 11em;
  font-weight: 700;
  color: #5f5a52;
  background-color: transparent;
}

@media (max-width: 599px) {

  /* ラベルを上、値を下に積む */
  .post_content table.js-store-info-table,
  .post_content table.js-store-info-table > *,
  .post_content table.js-store-info-table > * > tr,
  .post_content table.js-store-info-table > * > tr > * {
    display: block;
  }
  .post_content table.js-store-info-table {
    width: 100%;
    font-size: 1em;
  }
  .post_content table.js-store-info-table > * > tr > * {
    width: auto !important;
    min-width: 0 !important;
    border: 0 !important;
    padding: 0;
    background-color: transparent !important;
  }

  /* 1項目＝1ブロック */
  .post_content table.js-store-info-table > :is(tbody, tfoot) > tr {
    padding: .72em 1.05em .82em;
    border-top: 1px solid #eeeee7;
  }
  .post_content table.js-store-info-table > :is(tbody, tfoot) > tr:first-child {
    border-top: 0;
  }

  /* ラベル（小さく・太く・淡く）→ 値（本文サイズ） */
  .post_content table.js-store-info-table > :is(tbody, tfoot) > tr > :first-child {
    margin-bottom: .1em;
    font-size: .8em;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    color: #8a857c;
  }
  .post_content table.js-store-info-table > :is(tbody, tfoot) > tr > :last-child {
    font-size: 1em;
    line-height: 1.7;
    color: inherit;
  }

  /* 見出し行（thead）は1本の帯にまとめる */
  .post_content table.js-store-info-table > thead > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1em .7em;
    padding: .5em 1.05em;
    background-color: var(--thead-color--bg, var(--color_main));
    color: var(--thead-color--txt, #fff);
  }
  .post_content table.js-store-info-table > thead > tr > * {
    font-size: .82em;
    font-weight: 700;
    line-height: 1.6;
    color: inherit;
  }
}