/* トップページと一覧ページ。
   色とタイポは施設ページ（facility.css）の変数をそのまま使う。 */

/* テーマ（SWELL）の初期メインビジュアル（「さぁ、始めよう。」）と
   投稿スライダーはトップでは使わない。カスタマイザーは初期値のままなので、
   表示側で止めている。将来メインビジュアルを使うときはこの2行を消す。 */
/* SWELLは body ではなく #body_wrap にクラスを付けるので、.home で受ける */
.home #main_visual,
.home #post_slider{display:none}

.bb-home{padding-bottom:40px}

/* ===== ヒーロー =====
   文字を減らし、色と余白で見せる。サイトの答え方（◎○△×）を絵として置く。 */
/* スマホだと、ここだけで画面1枚ぶんを使い切っていた。
   探すためのパネルが最初の画面に入らず、スクロールしないと何もできない。
   言葉は変えず、余白と文字の大きさだけを詰めて、パネルを画面内に入れる。 */
.bb-hero{position:relative;overflow:hidden;border-radius:24px;margin:0 0 16px;
  padding:30px 22px 26px;
  background:linear-gradient(157deg,#FFF9FA 0%,#FCEAF0 44%,#FDF3E9 100%)}

/* ぼかした円で奥行きを出す。輪郭を出さないので写真がなくても平面に見えない */
.bb-hero-blob{position:absolute;border-radius:50%;pointer-events:none}
.bb-blob-1{width:19rem;height:19rem;right:-6.5rem;top:-7rem;filter:blur(46px);opacity:.5;
  background:radial-gradient(circle at 35% 35%,#F7A8BE 0%,#F9C9D6 60%,transparent 72%)}
.bb-blob-2{width:14rem;height:14rem;left:-5rem;bottom:-5.5rem;filter:blur(40px);opacity:.45;
  background:radial-gradient(circle at 60% 40%,#F8CE96 0%,#FBE3C2 60%,transparent 72%)}

/* ごく薄い点の地。紙のような手ざわりを出すためだけのもの */
.bb-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(201,63,85,.10) 1px,transparent 1px);
  background-size:16px 16px}

.bb-hero-body{position:relative}

.bb-hero-title{font-size:clamp(24px,6.4vw,38px);font-weight:800;line-height:1.3;
  letter-spacing:-.015em;margin:0 0 12px;color:var(--bb-ink)}
.bb-hero-title .bb-q{color:var(--bb-ink-mute);font-weight:700}
/* 蛍光ペンで引いたような下線。重なり順の指定が要らないので崩れない */
.bb-hero-title .bb-a{font-style:normal;color:var(--bb-pink-dark);white-space:nowrap;
  background:linear-gradient(transparent 56%,rgba(238,102,131,.26) 56%)}

.bb-hero-lead{font-size:14px;color:var(--bb-ink-soft);margin:0;line-height:1.75;
  max-width:26em;font-weight:500}

/* 画面が広いときは、文字を中央に寄せるのではなく、列そのものを中央に置く
   （幅の指定は wp_head の bb-layout でページの種類ごとに出している）。
   見出しだけ中央、本文は左、という混ざり方が起きないよう、揃えは左のままにする。
   広い画面ではヒーローの余白と文字を大きくして、間延びしないようにする。 */
/* ===== 絞り込みパネル =====
   白いカードを項目ごとに仕切る。選んだものはピンクで塗り、チェックを付ける。 */
.bb-finder{background:var(--bb-surface);border-radius:22px;margin:0 0 26px;overflow:hidden;
  box-shadow:0 4px 24px rgba(200,150,165,.18);
  /* 上部の固定ヘッダーに隠れないよう、飛んできたときに余白を取る */
  scroll-margin-top:84px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.bb-finder-ttl{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:800;
  color:#fff;margin:0;padding:16px 20px;border:0;background:var(--bb-pink);
  background-image:linear-gradient(100deg,var(--bb-pink) 0%,#F2839B 100%)}
.bb-finder-ttl::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.28);flex:0 0 8px}

.bb-field{margin:0;padding:18px 20px;border-bottom:1px solid var(--bb-rule)}
.bb-field-label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  color:var(--bb-ink-mute);margin:0 0 11px}
/* 都道府県と市区町村は必ず横に並べる。折り返すと、2つ選べることが伝わらない */
.bb-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bb-sel{min-width:0}
.bb-sel select{width:100%;font-size:14.5px;font-weight:700;color:var(--bb-ink);
  background:var(--bb-pink-soft);border:0;border-radius:11px;padding:11px 12px}
/* 都道府県を選ぶまでの市区町村。隠さず、押せないことが見て分かる形にする */
.bb-sel-off .bb-field-label{color:var(--bb-ink-mute);opacity:.6}
.bb-sel select:disabled{background:#F4F1F2;color:var(--bb-ink-mute);opacity:1}
.bb-note-area{grid-column:1 / -1;margin:2px 0 0}

/* 「複数選択可」の小さな印 */
.bb-multi{font-style:normal;display:inline-block;margin-left:8px;font-size:10.5px;
  font-weight:800;letter-spacing:.04em;color:var(--bb-pink-dark);
  background:var(--bb-pink-soft);border-radius:99px;padding:2px 8px;vertical-align:1px}

/* 月齢は3列×2段。件数を下に小さく置く */
.bb-age-btn{width:100%;font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--bb-pink-soft);border:2px solid transparent;border-radius:14px;
  padding:11px 6px;transition:background .15s,border-color .15s,transform .1s}
.bb-age-btn:active{transform:scale(.97)}
.bb-age-btn.bb-on{background:var(--bb-pink);border-color:var(--bb-pink-dark)}
.bb-age-btn.bb-on .bb-ages-name{color:#fff}
.bb-age-btn.bb-on .bb-ages-count{color:rgba(255,255,255,.85)}

.bb-conds{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.bb-conds li{margin:0}
.bb-cond-btn,.bb-cat-btn{font-family:inherit;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px;background:var(--bb-pink-soft);border:0;
  border-radius:99px;padding:9px 15px;font-size:13.5px;font-weight:700;color:var(--bb-ink-soft);
  transition:background .15s,color .15s,transform .1s}
.bb-cond-btn::before,.bb-cat-btn::before{content:"";width:14px;height:14px;border-radius:50%;
  background:var(--bb-surface);flex:0 0 14px;transition:background .15s}
.bb-cond-btn:active,.bb-cat-btn:active{transform:scale(.96)}
.bb-cond-btn.bb-on,.bb-cat-btn.bb-on{background:var(--bb-pink);color:#fff}
.bb-cond-btn.bb-on::before,.bb-cat-btn.bb-on::before{
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.2 2.2 4.8-5' fill='none' stroke='%23C93F55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}

.bb-field-note{font-size:11.5px;color:var(--bb-ink-mute);margin:11px 0 0;line-height:1.7}
.bb-field-note b{color:var(--bb-pink-dark)}

.bb-finder-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0;padding:16px 20px;background:var(--bb-pink-soft)}
.bb-result-count{font-size:22px;font-weight:800;color:var(--bb-pink-dark);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bb-result-count.bb-zero{color:var(--bb-ink-mute)}
.bb-reset{font-family:inherit;cursor:pointer;background:none;border:0;padding:0;
  font-size:12.5px;font-weight:700;color:var(--bb-ink-mute);text-decoration:underline}

.bb-relax{margin:0;background:var(--bb-amber-soft);padding:18px 20px;
  font-size:13.5px;color:var(--bb-ink-soft);line-height:1.8}
.bb-relax p{margin:0 0 12px}
.bb-relax b{color:var(--bb-ink)}
.bb-relax-btn{font-family:inherit;cursor:pointer;background:var(--bb-ink);color:#fff;
  border:0;border-radius:99px;padding:9px 20px;font-size:13px;font-weight:800}

.bb-hit[hidden]{display:none}
.bb-unsure{font-size:11.5px;font-weight:700;color:var(--bb-amber);margin:8px 0 0;
  padding:0 2px;line-height:1.6}

/* 施設ページの末尾に出す「同じ月齢で行ける、ほかの施設」 */
.bb-related{border-top:1px solid var(--bb-rule);margin-top:44px;padding-top:30px}
.bb-related .bb-cards{grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr))}
.bb-related-more{margin:18px 0 0;font-size:13.5px}
.bb-related-more a{color:var(--bb-pink-dark);font-weight:700;text-decoration:none}
.bb-related-more a:hover{text-decoration:underline}

.bb-index{border-top:1px solid var(--bb-rule);padding-top:28px}
.bb-index .bb-chips{margin-top:14px}

/* ===== 特集（まとめ記事） =====
   施設カードと同じ形にすると、施設の1件と見分けが付かない。
   横並びの帯にして、左上に「まとめ」と出す。 */
.bb-featured[hidden]{display:none}
.bb-feat-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.bb-feat{display:grid;grid-template-columns:clamp(8.5rem,26%,15rem) 1fr;gap:0;
  background:var(--bb-surface);border-radius:18px;overflow:hidden;
  box-shadow:var(--bb-shadow);text-decoration:none;color:var(--bb-ink)}
.bb-feat[hidden]{display:none}
.bb-feat:hover{box-shadow:var(--bb-shadow-lg)}
.bb-feat-photo{position:relative;min-height:100%;background:var(--bb-pink-soft)}
.bb-feat--nophoto{grid-template-columns:1fr}
.bb-feat-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bb-feat-body{padding:14px 16px;min-width:0}
.bb-feat-tag{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;font-size:11px;font-weight:800}
.bb-feat-tag span{background:var(--bb-pink-soft);color:var(--bb-pink-dark);
  border-radius:99px;padding:2px 9px}
.bb-feat-tag .bb-feat-mark{background:var(--bb-pink);color:#fff}
.bb-feat-title{font-size:15px;font-weight:800;line-height:1.5;margin:0;color:var(--bb-ink)}
.bb-feat-lead{font-size:12.5px;color:var(--bb-ink-soft);line-height:1.75;margin:6px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* 畳んである「ほかのまとめ」。開く前は1行しか場所を取らない */
.bb-feat-more{margin-top:12px}
.bb-feat-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:800;color:var(--bb-pink-dark);background:var(--bb-pink-soft);
  border-radius:99px;padding:9px 16px}
.bb-feat-more>summary::-webkit-details-marker{display:none}
.bb-feat-more>summary::after{content:"▾";font-size:11px;line-height:1}
.bb-feat-more[open]>summary::after{content:"▴"}
.bb-feat-more>summary:hover{box-shadow:var(--bb-shadow)}
.bb-feat-more .bb-feat-list{margin-top:12px}

/* 「ほかの◯件も見る」。カードの下に置く */
.bb-more{display:block;width:100%;margin:14px 0 0;cursor:pointer;border:0;
  font-family:inherit;font-size:14px;font-weight:800;color:var(--bb-pink-dark);
  background:var(--bb-pink-soft);border-radius:99px;padding:13px 16px}
.bb-more:hover{box-shadow:var(--bb-shadow)}
.bb-more[hidden]{display:none}
@media (max-width:22rem){
  .bb-feat{grid-template-columns:1fr}
  .bb-feat-photo{aspect-ratio:16/9;min-height:0}
}
.bb-pick{margin:0 0 40px}
.bb-pick-note{font-size:12.5px;color:var(--bb-ink-mute);line-height:1.8;margin:14px 0 0}

/* 月齢の選択。6区分を必ず3列×2段に並べる（画面幅で崩さない） */
.bb-ages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  max-width:30rem;margin:0;padding:0;list-style:none}
.bb-ages-grid li{margin:0}
.bb-ages-grid a{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--bb-surface);border:1.5px solid var(--bb-pink-line);border-radius:12px;
  padding:9px 6px;text-decoration:none;transition:background .15s,border-color .15s}
.bb-ages-grid a:hover,.bb-ages-grid a:focus-visible{background:var(--bb-pink-soft);
  border-color:var(--bb-pink)}
.bb-ages-name{font-size:13px;font-weight:800;color:var(--bb-ink);white-space:nowrap}
.bb-ages-count{font-size:10.5px;font-weight:700;color:var(--bb-ink-mute);
  font-variant-numeric:tabular-nums}

/* エリアは都道府県が親。市区町村はその下に一段下げる */
.bb-pref{margin:0 0 14px}
.bb-pref-main{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;
  color:var(--bb-ink);text-decoration:none;border-bottom:2px solid var(--bb-pink-line);
  padding-bottom:3px}
.bb-pref-main em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--bb-ink-mute);
  font-variant-numeric:tabular-nums}
.bb-pref-sub{margin-top:10px;padding-left:14px;border-left:2px solid var(--bb-rule)}

.bb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.bb-chips li{margin:0}
.bb-chips a{display:inline-flex;align-items:center;gap:7px;background:var(--bb-pink-soft);
  border-radius:99px;padding:8px 15px;font-size:13.5px;font-weight:700;
  color:var(--bb-pink-dark);text-decoration:none}
.bb-chips a:hover,.bb-chips a:focus-visible{background:var(--bb-pink-line)}
.bb-chips em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--bb-ink-mute);
  font-variant-numeric:tabular-nums}

/* 施設カード */
.bb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));gap:16px}
.bb-card-link{display:flex;flex-direction:column;background:var(--bb-surface);border-radius:18px;
  overflow:hidden;box-shadow:var(--bb-shadow);text-decoration:none;color:var(--bb-ink);
  transition:box-shadow .15s,transform .15s}
.bb-card-link:hover,.bb-card-link:focus-visible{box-shadow:var(--bb-shadow-lg);transform:translateY(-2px)}
.bb-card-photo{aspect-ratio:16/10;overflow:hidden;background:var(--bb-pink-soft)}
.bb-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bb-card-nophoto{display:flex;align-items:center;justify-content:center;color:var(--bb-pink-dark);font-weight:800;font-size:15px;letter-spacing:.08em}
.bb-card-body{padding:16px 18px 18px}
.bb-card-where{display:flex;flex-wrap:wrap;gap:8px;font-size:11.5px;color:var(--bb-ink-mute);
  font-weight:700;margin:0 0 7px}
.bb-card-title{font-size:16px;font-weight:800;line-height:1.55;margin:0 0 8px;color:var(--bb-ink);
  text-wrap:balance}
.bb-card-lead{font-size:13px;color:var(--bb-ink-soft);line-height:1.8;margin:0 0 12px}
.bb-card-ages{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.bb-card-age{font-size:11.5px;font-weight:800;border-radius:99px;padding:3px 10px;
  background:var(--bb-pink-soft);color:var(--bb-pink-dark)}
.bb-card-age.bb-best{background:var(--bb-mint-soft);color:var(--bb-mint)}

/* 掲載がないとき。空白のまま見せない */
.bb-empty{background:var(--bb-pink-soft);border-radius:18px;padding:26px 24px;
  font-size:14px;color:var(--bb-ink-soft);line-height:1.9}
.bb-empty p{margin:0 0 10px}
.bb-empty p:last-child{margin:0}
.bb-empty strong{color:var(--bb-ink)}
.bb-empty a{color:var(--bb-pink-dark);font-weight:700}

.bb-about{border-top:1px solid var(--bb-rule);padding-top:30px}
.bb-about p{font-size:14px;color:var(--bb-ink-soft)}
.bb-about-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 0}
.bb-about-links a{font-size:13px;color:var(--bb-pink-dark);font-weight:700;text-decoration:none}
.bb-about-links a:hover{text-decoration:underline}

.bb-pick-foot{border-top:1px solid var(--bb-rule);padding-top:30px;margin-top:40px}
.bb-pager{margin:26px 0 0;font-size:14px}

/* ===== 画面が広いとき =====
   メディアクエリは詳しさ（specificity）を足さない。基本の指定より前に置くと、
   同じ強さのまま後ろの行に負けて、書いたのに効かない。
   PC向けの上書きは、必ずこのファイルの最後にまとめて置く。 */
@media (min-width:768px){
  /* 揃えは左に固定する。見出しだけ中央にすると、下の補足文と開始位置がずれる。
     広い画面で左に寄って見えていたのは、列そのものが左にあったためで、
     それは wp_head の bb-layout で列を中央に置いて直してある。 */
  .bb-hero{padding:52px 48px 48px;border-radius:28px;margin-bottom:26px;text-align:left}
  /* スマホ用の強制改行を消す。広い画面では自然に折り返させたほうが締まる */
  .bb-hero .bb-br{display:none}
  /* 幅を止めると、あと1文字ぶん入らずに「る。」だけが次の行に落ちる。
     止めずに、折り返すときは行の長さが揃うようにする。 */
  .bb-hero-title{font-size:clamp(28px,2.7vw,36px);margin-bottom:16px;
    max-width:none;text-wrap:balance}
  .bb-hero-lead{font-size:15px;line-height:1.95;max-width:none;margin-left:0}
  .bb-blob-1{width:26rem;height:26rem;right:-8rem;top:-9rem}
  .bb-blob-2{width:20rem;height:20rem;left:-7rem;bottom:-7rem}

  /* 月齢は6区分を1段に並べる。スマホ向けの「3列×2段・幅30remまで」のままだと、
     広い画面では選択肢だけが左半分に固まって見える。 */
  .bb-ages-grid{grid-template-columns:repeat(6,1fr);max-width:none}

  .bb-feat-body{padding:20px 24px}
  .bb-feat-title{font-size:17px}
  .bb-feat-lead{font-size:13.5px}
}