/* BABYTTO 施設ページ
   記事12本で使ってきた見た目をそのまま移植する。
   SWELLのCSSと衝突しないよう、すべて .bb- から始めるクラスに閉じる。 */

/* 色は :root に置く。.bb の中だけに定義すると、.bb の外に出す要素
   （固定バーは </main> の後ろにある）で var() が解決できず、
   背景色が当たらないまま白文字だけが残る。実際にボタンが消えた。 */
:root{
  --bb-pink:#EE6683; --bb-pink-dark:#C93F55; --bb-pink-soft:#FDEFF2; --bb-pink-line:#F7CBD5;
  --bb-mint:#3FAF96; --bb-mint-soft:#E4F4F0; --bb-mint-deep:#2F8E79;
  --bb-amber:#E0A03A; --bb-amber-soft:#FDF2DF; --bb-amber-deep:#A9711A;
  --bb-ink:#3A3436; --bb-ink-soft:#635B5E; --bb-ink-mute:#948B8E;
  --bb-surface:#FFFFFF; --bb-rule:#F0E7EA;
  --bb-shadow:0 2px 10px rgba(200,150,165,.13);
  --bb-shadow-lg:0 4px 20px rgba(200,150,165,.16);
}
.bb{
  color:var(--bb-ink);
  line-height:1.9;
}

/* ダークモードの色切り替えは入れない。
   テーマ（SWELL）の背景は白のままなので、文字だけ薄い色に変わると読めなくなる。
   アーティファクト用に作った配色をそのまま持ち込んだのが原因だった。 */

/* カードの中は必ず白地・濃い文字にする（テーマ側の指定に負けないように） */
.bb .bb-card, .bb .bb-scroll, .bb .bb-tile{color:var(--bb-ink)}
.bb .bb-why, .bb-lead{color:var(--bb-ink-soft)}

.bb-crumb{font-size:12px;color:var(--bb-ink-mute);margin:0 0 10px}
.bb-crumb a{color:var(--bb-ink-mute);text-decoration:none}

/* 日本語は文字単位で折り返されるので、放っておくと「持っていけ／ば」のように
   語の途中で改行される。auto-phrase は文節の切れ目で折り返してくれる。

   ただし掛けるのは短いものだけ。リード文のように何文も続く text に掛けると、
   文節を割らないぶん行末が大きく空いて、途中で改行したように見える。 */
.bb-callout > b,.bb figcaption{word-break:auto-phrase}

/* ⚠️ auto-phrase は Chrome/Edge だけ。Safari と Firefox は未対応で、
   そこでは「ベビーベッ／ド」のように語の途中で折れる。
   ⚠️ しかも auto-phrase は「日本語と分かっている要素」にしか効かない。
   lang="ja" が無いページ（下書きプレビューがそうだった）では Chrome でも効かない。
   （2026-09-15 実測。`tools/scratch/linebreak.py` で幅390pxの折り返し位置を測った）

   見出しはブラウザ任せをやめて、折ってよい場所を <wbr> で指定する。
   keep-all で日本語の途中では折らせず、<wbr> のところだけで折る。
   overflow-wrap:anywhere は、1文節が1行に入りきらないときの逃げ道。
   <wbr> は tools/fix_heading_wrap.py が「。」「、」の後ろに入れる。 */
.bb-title,.bb-h2,.bb-card-title,
.bb .post_content h2,.bb .post_content h3{
  /* 2行で1組。上は全ブラウザに効き、下は Chrome/Edge だけが上書きする。
     Safari と Firefox は auto-phrase を知らないので下の行を捨て、keep-all が残る。
     ＝ Safari は <wbr> の場所だけで折る。Chrome はそれに加えて文節でも折れる。
     どちらも「語の途中では折らない」になる。 */
  word-break:keep-all;
  word-break:auto-phrase;
  overflow-wrap:anywhere}

.bb-title{font-size:clamp(23px,5.4vw,31px);line-height:1.55;font-weight:800;margin:0 0 12px;text-wrap:balance}
.bb-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--bb-ink-mute);margin:0 0 16px}
.bb-meta .bb-cat{background:var(--bb-pink);color:#fff;border-radius:99px;padding:3px 12px;font-weight:700}

.bb-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:0;list-style:none}
.bb-tags li{margin:0}
.bb-tags a,.bb-tags span{display:inline-block;background:var(--bb-pink-soft);border-radius:99px;
  padding:5px 13px;font-size:12px;color:var(--bb-pink-dark);font-weight:700;text-decoration:none}

/* text-wrap:pretty は英語のように「最後の1語だけが次の行に落ちる」のを防ぐ指定。
   日本語では、それを避けるために段落じゅうの行を短くそろえてしまい、
   どの行も右が大きく空いて、文字が左に寄って見える
   （箇条書きは対象外なので右端まで伸び、段落だけが短くなっていた。
     2026-09-01 オーナー指摘）。日本語は文字単位で折り返せるので、この指定は要らない。 */
.bb p{margin:0 0 16px}
.bb-lead{font-size:16.5px;color:var(--bb-ink-soft)}

/* PR表記。景品表示法上、読み飛ばせない大きさで本文の前に置く。
   目立たせすぎると記事の顔がPRになるので、色はグレー系にとどめる。 */
/* flexで組むと「PR」と本文が別々の行の箱になり、行頭がそろわなかった。
   ふつうの段落の中に、印を1文字ぶん先に置くだけの形にする。 */
.bb-pr{font-size:12.5px;line-height:1.85;color:var(--bb-ink-mute);
  background:#F7F4F5;border-radius:12px;padding:12px 15px;margin:0 0 18px;
  text-align:left}
.bb-pr-tag{display:inline-block;background:var(--bb-ink-mute);color:#fff;font-weight:700;
  font-size:11px;letter-spacing:.06em;border-radius:5px;padding:2px 7px;
  margin-right:8px;vertical-align:1px}
.bb-pr a{color:var(--bb-ink-soft)}

.bb-h2{font-size:20px;font-weight:800;margin:40px 0 16px;line-height:1.5;text-wrap:balance;
  display:flex;align-items:center;gap:10px}
.bb-h2::before{content:"";width:6px;height:22px;border-radius:99px;background:var(--bb-pink);flex:0 0 6px}

.bb-card{background:var(--bb-surface);border-radius:18px;padding:20px 22px;box-shadow:var(--bb-shadow);margin:0 0 20px}

/* 行に色を敷いているので、左右の余白は同じだけ空ける。
   セルの余白を右にだけ付けていたため、文字が行の左端にくっついて
   「左に寄っている」ように見えていた（2026-09-01 オーナー指摘）。 */
.bb-scroll{overflow-x:auto;margin:0 0 22px;background:var(--bb-surface);border-radius:18px;
  box-shadow:var(--bb-shadow);padding:6px 6px}
.bb-scroll table{border-collapse:collapse;width:100%;font-size:14px;min-width:20rem;margin:0}
.bb-scroll td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--bb-rule);
  vertical-align:middle;background:none}
.bb-scroll td:first-child{padding-left:14px}
.bb-scroll td:last-child{padding-right:14px}
.bb-scroll tr:last-child td{border-bottom:0}
.bb-age{font-weight:800;white-space:nowrap;width:5.4rem;font-size:13.5px}
/* 年齢表の ◎○△×。⚠️ **文字ではなく図形（SVG）で描いている。**
   フォントが描く字面（ink）は記号ごとに大きさがまるで違う。font-size で
   打ち消す手（2026-09-16／◎32px・○58px・×48px）は、**そのとき描いていた
   フォントでしか合わなかった。**端末でフォントが変わると、今度は ○ だけが
   極端に大きくなる。2026-09-21、オーナーのスクリーンショットで実際にそうなった。
   **30×30に固定した図形にすれば、フォントに左右されない。**
   色は currentColor で .bb-m-b / .bb-m-l から拾う。
   ⚠️ 図形の定義は includes/cards.php の babytto_mark_svg()。
   ⚠️ draft_preview.py の MARK_SVG も同じ図形にする。 */
.bb-mark{text-align:center;width:3.6rem;line-height:0}
.bb-mark .bb-mk{display:block;margin:0 auto}
.bb-why{color:var(--bb-ink-soft);font-size:13.5px;line-height:1.75}
.bb-m-b{color:var(--bb-mint)} .bb-m-l{color:var(--bb-ink-mute)}
.bb-scroll tr.bb-on{background:var(--bb-pink-soft)}

.bb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.4rem,1fr));gap:10px;margin:0 0 22px}
.bb-tile{background:var(--bb-surface);border-radius:16px;padding:15px 14px;text-align:center;box-shadow:var(--bb-shadow)}
.bb-tile .bb-t{font-size:13px;font-weight:800;margin-bottom:4px}
.bb-tile .bb-s{font-size:12px;font-weight:700;line-height:1.6}
.bb-tile .bb-s .bb-l{display:block}
.bb-tile .bb-s .bb-c{display:inline-block;max-width:100%;word-break:auto-phrase}
.bb-s.bb-yes{color:var(--bb-mint)} .bb-s.bb-cond{color:var(--bb-amber)} .bb-s.bb-no{color:var(--bb-ink-mute)}

.bb-callout{border-radius:16px;padding:17px 20px;font-size:14.5px;color:var(--bb-ink-soft);margin:0 0 18px}
.bb-callout.bb-warn{background:var(--bb-amber-soft)}
.bb-callout.bb-tip{background:var(--bb-mint-soft)}
.bb-callout > b{color:var(--bb-ink);display:block;margin-bottom:6px;font-size:15px}
.bb-callout p b{color:var(--bb-ink)}

/* ===== 画面下の予約バー（スマホのみ） =====
   記事の途中で「行ける」と判断した瞬間に押せるようにするためのもの。
   金額は出さない。変動制の施設が多く、古い金額を見せる危険があるため、
   代わりに「◯歳以下は無料」を出す（めったに変わらず、赤ちゃん連れに直結する）。 */
.bb-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;
  box-shadow:0 -3px 18px rgba(120,80,95,.13);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .26s cubic-bezier(.22,.9,.3,1)}
.bb-bar.bb-on{transform:translateY(0)}
.bb-bar-in{max-width:34rem;margin:0 auto;display:flex;align-items:center;gap:12px}
.bb-bar-txt{min-width:0;flex:1 1 auto}
.bb-bar-name{display:block;font-size:11px;color:var(--bb-ink-mute);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-bar-free{display:block;font-size:14.5px;font-weight:800;color:var(--bb-pink-dark);line-height:1.5}
.bb-bar-btn{flex:0 0 auto;background:var(--bb-pink);color:#fff;text-decoration:none;font-weight:800;
  font-size:14px;border-radius:99px;padding:13px 20px;white-space:nowrap;
  box-shadow:0 2px 10px rgba(238,102,131,.4)}
.bb-bar-btn:active{transform:scale(.97)}
/* テーマ（SWELL）の「上へ戻る」ボタンが固定バーの上に重なるので、
   バーが出ているあいだだけ上へ逃がす。クラスは facility-bar.js が付ける。 */
.bb-bar-open .p-fixBtnWrap{transform:translateY(-74px);transition:transform .26s cubic-bezier(.22,.9,.3,1)}
@media (min-width:900px){.bb-bar{display:none}
  .bb-bar-open .p-fixBtnWrap{transform:none}}
@media (prefers-reduced-motion:reduce){.bb-bar{transition:none}}
.bb-callout p{margin:0}

.bb-dl{margin:0}
.bb-f{display:grid;grid-template-columns:6.8rem 1fr;gap:3px 12px;padding:12px 0;
  border-bottom:1px solid var(--bb-rule);font-size:14px}
.bb-f:last-child{border-bottom:0}
.bb-f dt{color:var(--bb-ink-mute);font-weight:700;margin:0}
.bb-f dd{margin:0}
.bb-f dd small{display:block;color:var(--bb-ink-mute);font-size:12.5px;margin-top:3px}
.bb-f dd a{color:var(--bb-pink-dark);font-weight:700}

.bb-cta{display:flex;flex-direction:column;gap:10px;margin:24px 0 10px}
/* ⚠️ ボタンを小さくした（2026-09-22 オーナー指摘「購入ボタンが大きすぎる」）。
   施設名の長いところでラベルが2行になり、本文のなかで塊が大きく見えていた
   （横浜大世界アートリックミュージアムでスマホのスクリーンショット指摘）。
   幅を max-width で止め、padding と font-size を下げた。
   ⚠️ tools/draft_preview.py の .btn も同じ値にする。 */
.bb-btn{display:block;width:100%;max-width:22rem;margin:0 auto;box-sizing:border-box;
  text-align:center;padding:12px 20px;border-radius:99px;font-weight:800;
  font-size:14px;line-height:1.5;text-decoration:none;background:var(--bb-pink);color:#fff;
  box-shadow:var(--bb-shadow-lg)}
/* ボタンの文言の末尾の（…）は、ボタンの外に小さく添える（2026-09-28）。⚠️ draft_preview.py の .cta-note も同じ値 */
.bb-cta-note{margin:-2px 0 0;text-align:center;font-size:12px;font-weight:700;color:var(--bb-ink-mute);line-height:1.5;word-break:auto-phrase}
.bb-btn:hover{color:#fff;opacity:.92}
.bb-fine{font-size:12px;color:var(--bb-ink-mute);margin:0 0 34px;text-align:center}

.bb-agebar{background:var(--bb-pink-soft);border-radius:20px;padding:24px 20px;margin:36px 0 0;text-align:center}
.bb-agebar h2{font-size:16px;margin:0 0 4px;font-weight:800}
.bb-agebar p{font-size:13px;color:var(--bb-ink-soft);margin:0 0 16px}
.bb-ages{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;padding:0;margin:0}
.bb-ages li{margin:0}
.bb-ages a{display:inline-block;background:var(--bb-surface);border-radius:99px;padding:8px 16px;
  font-size:13px;font-weight:700;box-shadow:var(--bb-shadow);text-decoration:none;color:var(--bb-ink)}
.bb-ages a.bb-on{background:var(--bb-pink);color:#fff}

.bb-source{border-top:1px solid var(--bb-rule);margin-top:40px;padding-top:18px;font-size:12px;
  color:var(--bb-ink-mute);display:flex;flex-direction:column;gap:4px}

/* 著者欄（名前が設定されているときだけ出る） */
.bb-author{display:block;margin-top:12px;font-size:13px;line-height:1.7}
.bb-author-lb{font-size:11px;color:var(--bb-muted,#777);margin-right:6px}
.bb-author a{font-weight:700}
.bb-author-bio{display:block;font-size:12px;color:var(--bb-muted,#777)}