@charset "utf-8";

/* 産後ケアマップ 共通CSS(リセット/変数/ヘッダー/フッター/モーダル) */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
/* overflow-x は hidden ではなく clip。hidden だと body がスクロールコンテナになり、
   ヘッダーの position:sticky が効かなくなる（clip はスクロールコンテナを作らない） */
/* 261008 書体は変数（--sgn-font-body・--sgn-font-head。このファイルの末尾の :root）から読む。変えるときは末尾の1行と Google Fonts の読み込み（header.tpl）だけ */
body{font-family:var(--sgn-font-body);color:var(--sgn-ink-body);background:#FFFBFC;line-height:1.8;overflow-x:clip}
a{text-decoration:none;color:inherit}ul{list-style:none}img{max-width:100%;height:auto;display:block}
.container{max-width:1140px;margin:0 auto;padding:0 24px}

:root{
  --primary:#C4687A;--primary-dark:#A8566A;--primary-light:#FDE8EE;--primary-pale:#FFF5F8;
  --accent:#D4956A;--accent-light:#FEF5E7;
  /* 261011 白地で 4.5:1 に届いていなかった（light #6B7B8D 4.34:1・muted #8E99A4 2.9:1）。濃淡の差は残して濃くする。
     muted は search.css の --color-muted・施設詳細の注記と同じ #68737d（4.84:1）。search.css:141 にも同じ定義がある
     261014 light #5B6B7D（5.46:1）は muted との差が 1.13:1 でほぼ同じ灰色だった。前の差（1.50:1）に戻すため #4B5869（7.24:1）。本文 #454545 よりは薄い */
  --text:var(--sgn-ink-body);--text-light:#4B5869;--text-muted:#68737D;
  --white:#FFF;--bg:#FFFBFC;--bg-alt:#FFF8FA;--border:#F0E0E4;
  --shadow:0 4px 20px rgba(0,0,0,.04);--shadow-hover:0 16px 40px rgba(0,0,0,.08);
  --radius:12px;--radius-lg:20px;--radius-xl:28px;
  /* ケア種別の3色（宿泊／通所（日帰り）／訪問）。バッジ・カードの種別色はここから引く。色の統一調整はここだけ変える */
  --type-stay:#4A7FA5;--type-day:#2E8078;--type-visit:#C89B2A;
}

/* ===== 261006 玉井さん10/5指示 A3：種別の色の統一（宿泊ピンク／日帰り黄／訪問みどり） =====
   ベースは施設詳細のトップ画像の下のタグ（detail.css:9 .chips の3色）。玉井さん指定。
   各色4つ：
     --sgn-xxx       そのタグの色（線・帯・塗り・大きい文字に使う）
     --sgn-xxx-ink   白・薄い背景の上に小さい文字で置くとき用。ベースのままだと 4.5:1 に届かないため同じ色相で濃くした
                     （白地で 宿泊 #e9547b=3.49→#ca3660=4.99／日帰り #ed922b=2.40→#9a5a0c=5.47／訪問 #79a94e=2.76→#4a7a2c=5.11。
                       タグの薄い背景の上でも 4.64／5.19／4.87 で 4.5:1 以上）
     --sgn-xxx-soft  薄い背景（タグの背景と同じ）
     --sgn-xxx-line  薄い枠線（タグの枠と同じ）
   サイト全体のピンク（--primary 系）も「統一感を出したい」の指示に合わせて宿泊のピンクへ寄せた。
   白文字を載せるボタンがあるので --primary は ink の値（白文字 4.99:1）。
   画面を見ていただいてから調整する前提の値（玉井さん了承済み）
   261007 玉井さん 10/7 指示（添付画像の色に戻す。花弥さん決定）：
     ・種別は文字もタグの色（ベース）にする → ink を3色ともベースと同じ値へ（白地で 3.49／2.40／2.76:1。読みやすさの 4.5:1 は下回る）
     ・統一したピンクは予約するボタンの色（10/5 までの --coral #e85f73。白文字 3.33:1）→ --primary。hover は検索の旧値 #d94f64
     ・施設詳細の「96%・1位」の2枠だけは除外（detail.css で #ca3660 のまま固定） */
:root{
  --sgn-stay:#e9547b;--sgn-stay-ink:#e9547b;--sgn-stay-soft:#fff4f7;--sgn-stay-line:#f2b8c7;
  --sgn-day:#ed922b;--sgn-day-ink:#ed922b;--sgn-day-soft:#fff8ef;--sgn-day-line:#f2c98f;
  --sgn-visit:#79a94e;--sgn-visit-ink:#79a94e;--sgn-visit-soft:#f7fbf2;--sgn-visit-line:#bcd89f;
  /* 口コミの「1番良かったところ」（種別ではないので緑とは別の青緑のまま。文字だけ 4.5:1 へ濃くした） */
  --sgn-best-ink:#127a6c;--sgn-best-soft:#e6f7f4;
  --type-stay:var(--sgn-stay-ink);--type-day:var(--sgn-day-ink);--type-visit:var(--sgn-visit-ink);
  --primary:#e85f73;--primary-dark:#d94f64;--primary-light:#fde4ec;--primary-pale:#fff4f7;
  /* 261028 下線の文字リンク・小さい太字の文字の色（白地で 4.99:1。--primary は 3.33:1 で足りない）。ボタン・枠線・タブ・タグは --primary のまま */
  --primary-ink:#ca3660;
}

/* ===== HEADER ===== */
.header{background:#fff;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(233,84,123,.08)}
.header-top{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--sgn-font-head);font-weight:700;font-size:1.25rem;color:var(--primary);white-space:nowrap;flex:0 0 auto}
.logo-img{height:40px;width:auto}
.header-right{display:flex;align-items:center;gap:18px}
.header-right a{font-size:.82rem;color:var(--text-light);display:flex;align-items:center;gap:4px;transition:color .2s}
.header-right a:hover{color:var(--primary)}
.header-right .material-icons-outlined{font-size:18px}
.h-btn{background:var(--primary);padding:8px 18px;border-radius:50px;color:#fff!important;font-size:.82rem;font-weight:600;transition:background .2s}
.h-btn:hover{background:var(--primary-dark)}
.header-nav{background:#fff;border-top:1px solid rgba(233,84,123,.06)}
.header-nav-inner{display:flex;gap:0}
.header-nav a{padding:10px 20px;font-size:.82rem;color:var(--text-light);font-weight:500;transition:all .2s;border-bottom:2px solid transparent}
.header-nav a:hover,.header-nav a.active{color:var(--primary);border-bottom-color:var(--primary)}
/* 261011 769〜999px は 7 項目が入りきらず、全部が「施設を／探す」のように 2 行に割れていた（ナビの高さ 44→67〜89px）。
   この幅だけ 12px・左右 7px・折り返しなしにする（769px で右端に 13px 余る。1000px 以上は前のまま） */
@media(min-width:769px) and (max-width:999px){.header-nav a{padding:10px 7px;font-size:.75rem;white-space:nowrap}}
/* 261106 公開の後に「施設掲載を考えている方へ」を戻して 7 項目。縦スクロールバーのある Windows の 1000〜1010px で全部が 2 行に割れた（ナビの高さ 47→70px・ミテクレ実測。1000px 以上で 1 行に並べるには約 947px 要る）。
   1000〜1079px だけ左右 16px・折り返しなしにする（1000px で約 45px、1080px で約 70px 余る。文字の大きさは前のまま） */
@media(min-width:1000px) and (max-width:1079px){.header-nav a{padding:10px 16px;white-space:nowrap}}
/* 261011 固定文言の語末 1〜2 文字落ちを、HTML に入れた <wbr>（文節の切れ目）の所でだけ折る。入りきらない語は最後の手段として中で折る */
.sgn-kp{word-break:keep-all;overflow-wrap:anywhere}
/* 261011 DB の文字（施設名・コラムの題名）で、最後の 1〜2 文字だけ次の行に落ちていた。文節で折る（会員側 member.css と同じ）。
   word-break の宣言だけにしておく。auto-phrase が効かないブラウザ（Safari）はこの宣言を捨てて今の折り方のまま。
   261014 施設詳細の h1・コラム詳細の題名にも入れる（語末落ちを直すと決定。語末落ち 71→32 件〈要素×幅〉）。
   引き換えに 320〜360px で「卒乳・断乳の／タイミングと進め方」のように 1 行目の右が 58〜63% 空く所が出る（文節では折れている）。
   text-wrap:pretty は最後の行が短くならないように折る指定。トップ・コラム一覧のカードの題名の「体を動か／すために」も「体を／動かすために」になる。
   前後の記事のリンク（.col-nav a）には入れない（右の空白が 25%→52% に増えた） */
.facility h2,.fc-name,.review-facility,.blog-title,.col-card-title,.col-nav a{word-break:auto-phrase}
.facility-headline h1,.col-article-title{word-break:auto-phrase;text-wrap:pretty}
.blog-title,.col-card-title{text-wrap:pretty}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.hamburger span{width:22px;height:2px;background:#2C3E50;border-radius:2px}

/* ===== FOOTER ===== */
.footer{background:#1B2631;color:#B0BEC5;padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.footer-brand .logo{color:#fff}
.footer-brand .logo-img{height:40px}
.footer-brand p{font-size:.78rem;margin-top:12px;line-height:1.7;color:#90A4AE}
.footer-col h3{color:#fff;font-size:.82rem;margin-bottom:14px;font-weight:700}
.footer-col a{display:block;font-size:.78rem;margin-bottom:6px;color:#90A4AE;transition:color .2s}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;text-align:center;font-size:.72rem;color:#8A9DAB}

/* ===== MOBILE MENU ===== */
.mobile-menu{display:none;position:fixed;inset:0;background:#fff;padding:80px 24px 24px;z-index:200;flex-direction:column;overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-close{position:absolute;top:18px;right:20px;font-size:28px;cursor:pointer;color:var(--text);background:none;border:none}
.mobile-menu a{display:block;padding:14px 0;font-size:1rem;color:var(--text);border-bottom:1px solid var(--border)}

/* ===== MODAL ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:var(--radius-xl);max-width:1000px;width:92%;max-height:80vh;position:relative;display:flex;flex-direction:column;overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px 36px 16px;flex-shrink:0;border-bottom:1px solid var(--border)}
.modal-close{background:none;border:none;cursor:pointer;font-size:24px;color:var(--text-muted);flex-shrink:0}
.modal h3{font-family:var(--sgn-font-head);font-size:1.2rem;color:var(--sgn-ink-head);margin:0}
.modal-body{overflow-y:auto;padding:20px 36px 0;flex:1}
.modal-area-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.modal-area-item{text-align:center;padding:12px 8px;border-radius:var(--radius);background:var(--primary-pale);font-size:.82rem;font-weight:600;color:var(--primary-dark);cursor:pointer;transition:all .2s;border:1.5px solid transparent;position:relative}
.modal-area-item:hover{background:var(--primary-light);border-color:var(--primary)}
.modal-area-item.checked{background:var(--primary);color:#fff;border-color:var(--primary)}
.modal-area-item .area-check{position:absolute;top:4px;right:4px;width:16px;height:16px;border:2px solid var(--border);border-radius:3px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}
.modal-area-item.checked .area-check{background:var(--primary);border-color:var(--primary)}
.modal-area-item span{display:block;font-size:.7rem;color:var(--text-muted);font-weight:400;margin-top:2px}
.modal-area-item.checked span{color:rgba(255,255,255,.8)}
.modal-cat-label{font-size:.82rem;color:var(--primary);font-weight:700;margin-bottom:10px;padding-bottom:6px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.modal-body>.modal-cat-label:first-child{margin-top:0;padding-top:0;border-top:none}
.modal-tag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:20px}
.modal .genre-item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:.82rem;font-weight:500;background:var(--white);color:var(--text);cursor:pointer;transition:all .2s;text-decoration:none;text-align:center;min-height:44px;user-select:none}
.modal .genre-item::after{display:none}
.modal .genre-item .material-icons-outlined{display:inline;font-size:16px;color:var(--primary)}
.modal .genre-item:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}
.modal .genre-item.checked{background:var(--primary);color:#fff;border-color:var(--primary)}
.modal .genre-item.checked::before{content:"check";font-family:'Material Icons Outlined';margin-right:4px;vertical-align:middle;font-size:14px}
.modal .genre-item.checked .material-icons-outlined{color:#fff}
/* 261023 特徴の名前は全角スペースの位置で .gi-line に分かれている（pubFeatureLines）。PC は1行で、行の間に全角スペースを出す。スマホの幅だけ行ごとに折る */
.modal .gi-line+.gi-line::before{content:"\3000"}
@media(max-width:600px){
  .modal .gi-line{display:block}
  .modal .gi-line+.gi-line::before{content:none}
}
.modal-submit{position:sticky;bottom:0;background:rgba(255,255,255,.85);padding:16px 0;border-top:1px solid var(--border);text-align:center;margin-top:20px}
.modal-submit .btn{width:100%;max-width:400px;padding:14px 28px;font-size:.95rem}

/* ===== FOCUS ===== */
.facility-card:focus-visible,.blog-card:focus-visible,.search-card:focus-visible,.review-card:focus-visible,.care-card:focus-visible,.genre-item:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.more-btn:focus-visible,.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ===== RESPONSIVE(共通) ===== */
@media(max-width:1024px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .header-right{display:none}.header-nav{display:none}.hamburger{display:flex}
  .footer-grid{grid-template-columns:repeat(2,1fr)}.footer-brand{grid-column:1/-1}
}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}.container{padding:0 16px}}

/* ===== ヘッダー保護リセット =====
   ページ固有CSS(search.css/detail.css)に残る旧 .header / .logo 定義が
   共通ヘッダーを上書きしてロゴが崩れるため、ここで打ち消す。
   ページCSSは common.css の後に読まれるので !important が必要。 */
.header{height:auto!important;min-height:0!important;display:block!important;padding:0!important;background:#fff!important;border-bottom:1px solid rgba(233,84,123,.08)!important;position:sticky!important;top:0!important;z-index:100!important;box-shadow:none!important;backdrop-filter:none!important}
.header .header-top{display:flex!important;align-items:center!important;justify-content:space-between!important;height:60px!important;padding:0 24px!important}
/* 261010 480px 以下は本文の .container が左右 16px（125 行）なのに、ヘッダーだけ上の !important で 24px のままで、ロゴが本文より 8px 内側にずれていた（公開側 8 ページとも）。本文と同じ 16px に */
@media(max-width:480px){.header .header-top{padding:0 16px!important}}
.header .logo{display:flex!important;align-items:center!important;gap:10px!important;width:auto!important;height:auto!important;flex:0 0 auto!important;border-radius:0!important;background:none!important;border:0!important;color:var(--primary)!important;font-size:1.25rem!important;white-space:nowrap!important;box-shadow:none!important}
.header .logo-img{height:40px!important;width:auto!important;display:block!important;max-width:none!important}
.footer .logo{display:flex!important;align-items:center!important;width:auto!important;height:auto!important;background:none!important;border:0!important;border-radius:0!important}
.footer .logo-img{height:40px!important;width:auto!important;display:block!important}
/* 261008 玉井さん（16:39）：フッターのロゴの白い下地をやめた（logo_v3.png は透過済み）。
   260915 の「白プレートの余白込みで 52px」の指定は消し、上の 40px（ヘッダーと同寸）のままにする */

/* ===== 全ページ共通：トップへ戻るボタン =====
   詳細ページ等の追従CTA(.bottom-cta)がある画面では、footer.tpl内のJSが
   実測した高さぶんこのボタンを押し上げ、CTAの上に重ねて配置する */
.back-to-top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid rgba(233,84,123,.25);box-shadow:0 4px 14px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;z-index:150;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,bottom .2s ease}
.back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:#fff1f3}
/* 261008 玉井さん指示：三角の角を少し丸く。footer.tpl の SVG（線の角を丸めた三角）を統一ピンクで塗る。大きさは border の三角（12×9）と同じくらい */
.back-to-top-arrow{display:block;width:14px;height:11px;color:var(--primary);margin-top:-1px}
@media(max-width:480px){.back-to-top{right:14px;width:42px;height:42px}}

/* ===== 見出し（2026-08-20 玉井さん指定デザイン。トップページを除く全ページで統一）=====
   H2 … タブ／ページの一番上の見出し。線は付けない
        （玉井さん「1番上の見出しも線になると変な感じになるので、1番上だけ線がないように」）
   H3 … セクション見出し。上に短い横線。「スペースを少し開けて、区切り線のようなイメージ」
        2026-10-01 玉井さん指示（10/1）で横線の上の余白を 40→60px（768px以下 32→48px）。施設情報タブ・近くの施設も detail.css で同じ値にそろえている
   H4 … 小見出し。◾ ベース。数字が要るところは番号バッジ
   線・バッジの色は --sgn-head-accent の1変数に集約している。色の統一調整時はここだけ変える。

   セレクタを列挙している理由：detail.html のタブ4つは #pricing-doc{all:initial} ＋
   #pricing-doc *{all:revert} で親CSSを遮断している（元 iframe の名残）。
   #pricing-doc *  の詳細度は (1,0,0)、#pricing-doc .sgn-h3 は (1,1,0) なので後者が勝つ。
   この列挙をやめると4タブに一切届かなくなる。消さないこと
   261006 A3：宿泊のピンク（--sgn-stay）へそろえた（もとは #EF5B7A）
   261007：統一したピンク（--primary・予約するボタンの色）へ */
:root{--sgn-head-accent:var(--primary)}

.sgn-h2,
#pricing-doc .sgn-h2,#reviews-doc .sgn-h2,#features-doc .sgn-h2,#subsidy-doc .sgn-h2{
  margin:0 0 10px;font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--sgn-ink-head)
}

.sgn-h3,
#pricing-doc .sgn-h3,#reviews-doc .sgn-h3,#features-doc .sgn-h3,#subsidy-doc .sgn-h3{
  position:relative;margin:60px 0 14px;padding-top:21px;
  font-size:22px;font-weight:700;line-height:1.4;color:var(--sgn-ink-head)
}
.sgn-h3::before,
#pricing-doc .sgn-h3::before,#reviews-doc .sgn-h3::before,
#features-doc .sgn-h3::before,#subsidy-doc .sgn-h3::before{
  content:"";position:absolute;top:0;left:0;
  width:42px;height:3px;background:var(--sgn-head-accent,#EF5B7A)
}
/* セクションの先頭に来たときは上の余白を詰める（区切り線が二重に見えるのを防ぐ） */
.sgn-h3:first-child,
#pricing-doc .sgn-h3:first-child,#reviews-doc .sgn-h3:first-child,
#features-doc .sgn-h3:first-child,#subsidy-doc .sgn-h3:first-child{margin-top:0}

/* ◾ は絵文字だと環境ごとに字形と色が変わるためCSSで描く
   261006 P3：サイズを玉井さん支給のサウナイキタイのスクショに合わせた（10px→13px・角丸2px・文字との間10px）。
   スクショ実測（@3x）：四角 39px＝13px／見出し文字の高さ 42px＝約16px／四角と文字の間 32px＝約10px */
.sgn-h4,
#pricing-doc .sgn-h4,#reviews-doc .sgn-h4,#features-doc .sgn-h4,#subsidy-doc .sgn-h4{
  display:flex;align-items:center;gap:10px;margin:26px 0 10px;
  font-size:17px;font-weight:700;line-height:1.5;color:var(--sgn-ink-head)
}
.sgn-h4::before,
#pricing-doc .sgn-h4::before,#reviews-doc .sgn-h4::before,
#features-doc .sgn-h4::before,#subsidy-doc .sgn-h4::before{
  content:"";flex:0 0 13px;width:13px;height:13px;background:currentColor;border-radius:2px
}

.sgn-h4-num,
#pricing-doc .sgn-h4-num,#reviews-doc .sgn-h4-num,#features-doc .sgn-h4-num,#subsidy-doc .sgn-h4-num{
  display:flex;align-items:center;gap:11px;margin:26px 0 10px;
  font-size:16px;font-weight:700;line-height:1.5;color:var(--sgn-ink-head)
}
.sgn-h4-num .sgn-num,
#pricing-doc .sgn-h4-num .sgn-num,#reviews-doc .sgn-h4-num .sgn-num,
#features-doc .sgn-h4-num .sgn-num,#subsidy-doc .sgn-h4-num .sgn-num{
  flex:0 0 27px;display:grid;place-items:center;width:27px;height:26px;border-radius:4px;
  background:var(--sgn-head-accent,#EF5B7A);color:#fff;
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0
}

/* タブ冒頭のタイトル＋説明文。施設情報タブだけ他の4タブと違って
   doc ブロック（自前CSSを持つ）ではないため、ここで受け持つ。
   説明文の値は他タブの実測（14px / line-height 1.8 / #444）に揃えている */
.sgn-tab-head{padding-top:12px;margin:0 0 22px}
/* 261005b #6 で説明文を削除したので .sgn-h2 の下余白は不要（見出しだけが入る箱になった）。
   あわせて .sgn-tab-lead{margin:0;font-size:14px;line-height:1.8;color:#444} を削除（使用0件） */
.sgn-tab-head .sgn-h2{margin:0}

@media(max-width:768px){
  .sgn-h2,
  #pricing-doc .sgn-h2,#reviews-doc .sgn-h2,#features-doc .sgn-h2,#subsidy-doc .sgn-h2{font-size:21px}
  .sgn-h3,
  #pricing-doc .sgn-h3,#reviews-doc .sgn-h3,#features-doc .sgn-h3,#subsidy-doc .sgn-h3{
    font-size:19px;margin-top:48px
  }
  .sgn-h4,
  #pricing-doc .sgn-h4,#reviews-doc .sgn-h4,#features-doc .sgn-h4,#subsidy-doc .sgn-h4{font-size:16px}
}

/* ===== リスト・表・流れ（2026-08-20 玉井さん指定／8/20確定：リストPC2列・SP1列、流れは数字、リストと表は分ける）=====
   セレクタを列挙している理由は見出しと同じ（#xxx-doc *{all:revert} の (1,0,0) に勝つため）。
   plan.html も common.css を読み #plan-doc{all:initial} で遮断しているので #plan-doc を含める。
   行頭の ✓／✕ と流れの番号は絵文字・文字を使わず CSS で描く（環境で字形が変わるため）。
   マークアップ規約:
     リスト   <ul class="sgn-list"><li>…</li></ul>  文章の箇条書きは class="sgn-list sgn-list--1col"
              対象外の並びは class="sgn-list sgn-list--ng"（✕・#999）
     表       <dl class="sgn-table"><div class="sgn-table-row"><dt class="sgn-table-th">…</dt><dd class="sgn-table-td">…</dd></div></dl>
     3列以上  <div class="sgn-table-scroll"><table class="sgn-table--cols"><thead><tr><th>…</th></tr></thead><tbody>…</tbody></table></div>
     流れ     <ol class="sgn-flow"><li class="sgn-flow-step"><div class="sgn-flow-body"><span class="sgn-flow-time">14:00</span><span class="sgn-flow-title">…</span></div></li></ol>
              時刻が無い手順は time を省き <h4 class="sgn-flow-title"> と <p class="sgn-flow-text">
     2カラム  <div class="sgn-okng"><div><h4 class="sgn-h4">対象</h4><ul class="sgn-list">…</ul></div><div>…<ul class="sgn-list sgn-list--ng">…</ul></div></div>
     備考     <p class="sgn-note">…</p> */

/* リスト（行だけ）。既定の行頭は ✓ */
.sgn-list,
#pricing-doc .sgn-list,
#reviews-doc .sgn-list,
#features-doc .sgn-list,
#subsidy-doc .sgn-list,
#plan-doc .sgn-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:0}
.sgn-list>li,
#pricing-doc .sgn-list>li,
#reviews-doc .sgn-list>li,
#features-doc .sgn-list>li,
#subsidy-doc .sgn-list>li,
#plan-doc .sgn-list>li{position:relative;margin:0;padding:6px 0 6px 22px;font-size:14px;line-height:1.7;color:var(--text)}
/* ::before は doc ブロック内で *::before{all:revert} により content-box に戻るので box-sizing を明示（外と同じ 10×5 にする） */
.sgn-list>li::before,
#pricing-doc .sgn-list>li::before,
#reviews-doc .sgn-list>li::before,
#features-doc .sgn-list>li::before,
#subsidy-doc .sgn-list>li::before,
#plan-doc .sgn-list>li::before{content:"";box-sizing:border-box;position:absolute;left:2px;top:.9em;width:10px;height:5px;border-left:2px solid var(--sgn-head-accent,#EF5B7A);border-bottom:2px solid var(--sgn-head-accent,#EF5B7A);transform:rotate(-45deg)}
/* 文章の箇条書き（注意事項など）は2列だと折返しが増えるので1列 */
.sgn-list--1col,
#pricing-doc .sgn-list--1col,
#reviews-doc .sgn-list--1col,
#features-doc .sgn-list--1col,
#subsidy-doc .sgn-list--1col,
#plan-doc .sgn-list--1col{grid-template-columns:minmax(0,1fr)}
/* 対象外の並び。✕ は ✓ と同じ 2px 線を ::before/::after の2本で描く。.sgn-list と併用する。
   top は ✓ 側（.sgn-list>li::before の .9em）と同じ量だけ下げる。
   助成金申請タブの「対象／対象外」は左右2カラムで並ぶので、片方だけずらすと段差になる */
.sgn-list--ng>li::before,.sgn-list--ng>li::after,
#pricing-doc .sgn-list--ng>li::before,#pricing-doc .sgn-list--ng>li::after,
#reviews-doc .sgn-list--ng>li::before,#reviews-doc .sgn-list--ng>li::after,
#features-doc .sgn-list--ng>li::before,#features-doc .sgn-list--ng>li::after,
#subsidy-doc .sgn-list--ng>li::before,#subsidy-doc .sgn-list--ng>li::after,
#plan-doc .sgn-list--ng>li::before,#plan-doc .sgn-list--ng>li::after{content:"";position:absolute;left:6px;top:calc(.9em - 2px);width:2px;height:12px;border:0;background:#999;transform:rotate(45deg)}
.sgn-list--ng>li::after,
#pricing-doc .sgn-list--ng>li::after,
#reviews-doc .sgn-list--ng>li::after,
#features-doc .sgn-list--ng>li::after,
#subsidy-doc .sgn-list--ng>li::after,
#plan-doc .sgn-list--ng>li::after{transform:rotate(-45deg)}

/* 備考の段落（表・リストの下に添える注記） */
.sgn-note,
#pricing-doc .sgn-note,
#reviews-doc .sgn-note,
#features-doc .sgn-note,
#subsidy-doc .sgn-note,
#plan-doc .sgn-note{margin:10px 0 0;font-size:12px;line-height:1.7;color:#555}

/* 対象／対象外の2カラム。PC 2列・SP 1列。中のリストは ✓／✕ を縦に並べるので1列 */
.sgn-okng,
#pricing-doc .sgn-okng,
#reviews-doc .sgn-okng,
#features-doc .sgn-okng,
#subsidy-doc .sgn-okng,
#plan-doc .sgn-okng{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;margin:0}
.sgn-okng>*,
#pricing-doc .sgn-okng>*,
#reviews-doc .sgn-okng>*,
#features-doc .sgn-okng>*,
#subsidy-doc .sgn-okng>*,
#plan-doc .sgn-okng>*{min-width:0}
.sgn-okng .sgn-list,
#pricing-doc .sgn-okng .sgn-list,
#reviews-doc .sgn-okng .sgn-list,
#features-doc .sgn-okng .sgn-list,
#subsidy-doc .sgn-okng .sgn-list,
#plan-doc .sgn-okng .sgn-list{grid-template-columns:minmax(0,1fr)}

/* 表（列と行）。施設情報タブの基本情報・利用条件（detail.css L217-263 / L501 / L509）の実効値をそのまま共通化 */
.sgn-table,
#pricing-doc .sgn-table,
#reviews-doc .sgn-table,
#features-doc .sgn-table,
#subsidy-doc .sgn-table,
#plan-doc .sgn-table{display:block;overflow:hidden;margin:0;border:1px solid #e9e2dc;border-radius:12px;background:#fff}
.sgn-table-row,
#pricing-doc .sgn-table-row,
#reviews-doc .sgn-table-row,
#features-doc .sgn-table-row,
#subsidy-doc .sgn-table-row,
#plan-doc .sgn-table-row{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:stretch;margin:0;border-bottom:1px solid #e9e2dc}
.sgn-table-row:last-child,
#pricing-doc .sgn-table-row:last-child,
#reviews-doc .sgn-table-row:last-child,
#features-doc .sgn-table-row:last-child,
#subsidy-doc .sgn-table-row:last-child,
#plan-doc .sgn-table-row:last-child{border-bottom:0}
.sgn-table-th,
#pricing-doc .sgn-table-th,
#reviews-doc .sgn-table-th,
#features-doc .sgn-table-th,
#subsidy-doc .sgn-table-th,
#plan-doc .sgn-table-th{display:flex;align-items:center;margin:0;min-height:54px;padding:13px 16px;border-right:1px solid #e9e2dc;background:#fcf5f5;color:var(--sgn-ink-body);font-size:13px;font-weight:900;line-height:1.6}
.sgn-table-td,
#pricing-doc .sgn-table-td,
#reviews-doc .sgn-table-td,
#features-doc .sgn-table-td,
#subsidy-doc .sgn-table-td,
#plan-doc .sgn-table-td{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0;min-height:54px;padding:13px 18px;background:#fff;color:var(--text);font-size:14px;font-weight:600;line-height:1.75}

/* 3列以上の表（<table> 版）。色・文字は .sgn-table と同じ値。th は thead でも行見出しでも同じ塗り。
   SP は .sgn-table-scroll（overflow-x:auto）の中で横スクロールさせる。角丸は table の overflow:hidden で切る */
.sgn-table-scroll,
#pricing-doc .sgn-table-scroll,
#reviews-doc .sgn-table-scroll,
#features-doc .sgn-table-scroll,
#subsidy-doc .sgn-table-scroll,
#plan-doc .sgn-table-scroll{margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.sgn-table--cols,
#pricing-doc .sgn-table--cols,
#reviews-doc .sgn-table--cols,
#features-doc .sgn-table--cols,
#subsidy-doc .sgn-table--cols,
#plan-doc .sgn-table--cols{width:100%;margin:0;border-collapse:separate;border-spacing:0;border:1px solid #e9e2dc;border-radius:12px;overflow:hidden;background:#fff;color:var(--text)}
.sgn-table--cols th,.sgn-table--cols td,
#pricing-doc .sgn-table--cols th,#pricing-doc .sgn-table--cols td,
#reviews-doc .sgn-table--cols th,#reviews-doc .sgn-table--cols td,
#features-doc .sgn-table--cols th,#features-doc .sgn-table--cols td,
#subsidy-doc .sgn-table--cols th,#subsidy-doc .sgn-table--cols td,
#plan-doc .sgn-table--cols th,#plan-doc .sgn-table--cols td{margin:0;padding:13px 16px;border-right:1px solid #e9e2dc;border-bottom:1px solid #e9e2dc;text-align:left;vertical-align:middle}
.sgn-table--cols th:last-child,.sgn-table--cols td:last-child,
#pricing-doc .sgn-table--cols th:last-child,#pricing-doc .sgn-table--cols td:last-child,
#reviews-doc .sgn-table--cols th:last-child,#reviews-doc .sgn-table--cols td:last-child,
#features-doc .sgn-table--cols th:last-child,#features-doc .sgn-table--cols td:last-child,
#subsidy-doc .sgn-table--cols th:last-child,#subsidy-doc .sgn-table--cols td:last-child,
#plan-doc .sgn-table--cols th:last-child,#plan-doc .sgn-table--cols td:last-child{border-right:0}
.sgn-table--cols tbody tr:last-child th,.sgn-table--cols tbody tr:last-child td,
#pricing-doc .sgn-table--cols tbody tr:last-child th,#pricing-doc .sgn-table--cols tbody tr:last-child td,
#reviews-doc .sgn-table--cols tbody tr:last-child th,#reviews-doc .sgn-table--cols tbody tr:last-child td,
#features-doc .sgn-table--cols tbody tr:last-child th,#features-doc .sgn-table--cols tbody tr:last-child td,
#subsidy-doc .sgn-table--cols tbody tr:last-child th,#subsidy-doc .sgn-table--cols tbody tr:last-child td,
#plan-doc .sgn-table--cols tbody tr:last-child th,#plan-doc .sgn-table--cols tbody tr:last-child td{border-bottom:0}
.sgn-table--cols th,
#pricing-doc .sgn-table--cols th,
#reviews-doc .sgn-table--cols th,
#features-doc .sgn-table--cols th,
#subsidy-doc .sgn-table--cols th,
#plan-doc .sgn-table--cols th{background:#fcf5f5;color:var(--sgn-ink-body);font-size:13px;font-weight:900;line-height:1.6}
.sgn-table--cols td,
#pricing-doc .sgn-table--cols td,
#reviews-doc .sgn-table--cols td,
#features-doc .sgn-table--cols td,
#subsidy-doc .sgn-table--cols td,
#plan-doc .sgn-table--cols td{padding:13px 18px;background:#fff;color:var(--text);font-size:14px;font-weight:600;line-height:1.75}

/* 流れ ❶ー❷ー❸。番号は CSS カウンタ、縦線は ::after。絵文字は使わない */
.sgn-flow,
#pricing-doc .sgn-flow,
#reviews-doc .sgn-flow,
#features-doc .sgn-flow,
#subsidy-doc .sgn-flow,
#plan-doc .sgn-flow{list-style:none;margin:0;padding:0;counter-reset:sgn-step}
.sgn-flow-step,
#pricing-doc .sgn-flow-step,
#reviews-doc .sgn-flow-step,
#features-doc .sgn-flow-step,
#subsidy-doc .sgn-flow-step,
#plan-doc .sgn-flow-step{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:14px;align-items:start;margin:0;padding:0 0 18px}
.sgn-flow-step:last-child,
#pricing-doc .sgn-flow-step:last-child,
#reviews-doc .sgn-flow-step:last-child,
#features-doc .sgn-flow-step:last-child,
#subsidy-doc .sgn-flow-step:last-child,
#plan-doc .sgn-flow-step:last-child{padding-bottom:0}
.sgn-flow-step::before,
#pricing-doc .sgn-flow-step::before,
#reviews-doc .sgn-flow-step::before,
#features-doc .sgn-flow-step::before,
#subsidy-doc .sgn-flow-step::before,
#plan-doc .sgn-flow-step::before{counter-increment:sgn-step;content:counter(sgn-step);width:26px;height:26px;border-radius:50%;background:var(--sgn-head-accent,#EF5B7A);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.sgn-flow-step:not(:last-child)::after,
#pricing-doc .sgn-flow-step:not(:last-child)::after,
#reviews-doc .sgn-flow-step:not(:last-child)::after,
#features-doc .sgn-flow-step:not(:last-child)::after,
#subsidy-doc .sgn-flow-step:not(:last-child)::after,
#plan-doc .sgn-flow-step:not(:last-child)::after{content:"";position:absolute;left:12px;top:26px;bottom:0;width:2px;background:var(--sgn-head-accent,#EF5B7A)}
.sgn-flow-body,
#pricing-doc .sgn-flow-body,
#reviews-doc .sgn-flow-body,
#features-doc .sgn-flow-body,
#subsidy-doc .sgn-flow-body,
#plan-doc .sgn-flow-body{min-width:0;padding-top:2px}
.sgn-flow-time,
#pricing-doc .sgn-flow-time,
#reviews-doc .sgn-flow-time,
#features-doc .sgn-flow-time,
#subsidy-doc .sgn-flow-time,
#plan-doc .sgn-flow-time{display:inline-block;min-width:52px;margin-right:10px;color:var(--sgn-head-accent,#EF5B7A);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.sgn-flow-title,
#pricing-doc .sgn-flow-title,
#reviews-doc .sgn-flow-title,
#features-doc .sgn-flow-title,
#subsidy-doc .sgn-flow-title,
#plan-doc .sgn-flow-title{display:inline;margin:0;font-size:15px;font-weight:700;line-height:1.6;color:var(--sgn-ink-head)}
.sgn-flow-text,
#pricing-doc .sgn-flow-text,
#reviews-doc .sgn-flow-text,
#features-doc .sgn-flow-text,
#subsidy-doc .sgn-flow-text,
#plan-doc .sgn-flow-text{margin:3px 0 0;font-size:13px;line-height:1.7;color:var(--sgn-ink-body)}

@media(max-width:768px){
  .sgn-list,
  #pricing-doc .sgn-list,
  #reviews-doc .sgn-list,
  #features-doc .sgn-list,
  #subsidy-doc .sgn-list,
  #plan-doc .sgn-list{grid-template-columns:minmax(0,1fr)}
  .sgn-okng,
  #pricing-doc .sgn-okng,
  #reviews-doc .sgn-okng,
  #features-doc .sgn-okng,
  #subsidy-doc .sgn-okng,
  #plan-doc .sgn-okng{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  .sgn-table-row,
  #pricing-doc .sgn-table-row,
  #reviews-doc .sgn-table-row,
  #features-doc .sgn-table-row,
  #subsidy-doc .sgn-table-row,
  #plan-doc .sgn-table-row{grid-template-columns:108px minmax(0,1fr)}
  .sgn-table-th,
  #pricing-doc .sgn-table-th,
  #reviews-doc .sgn-table-th,
  #features-doc .sgn-table-th,
  #subsidy-doc .sgn-table-th,
  #plan-doc .sgn-table-th{min-height:50px;padding:12px 10px;font-size:12px}
  .sgn-table-td,
  #pricing-doc .sgn-table-td,
  #reviews-doc .sgn-table-td,
  #features-doc .sgn-table-td,
  #subsidy-doc .sgn-table-td,
  #plan-doc .sgn-table-td{min-height:50px;padding:12px;font-size:13px}
  /* <table> 版はセルを折り返さず、はみ出す分を .sgn-table-scroll で横スクロール */
  .sgn-table--cols th,.sgn-table--cols td,
  #pricing-doc .sgn-table--cols th,#pricing-doc .sgn-table--cols td,
  #reviews-doc .sgn-table--cols th,#reviews-doc .sgn-table--cols td,
  #features-doc .sgn-table--cols th,#features-doc .sgn-table--cols td,
  #subsidy-doc .sgn-table--cols th,#subsidy-doc .sgn-table--cols td,
  #plan-doc .sgn-table--cols th,#plan-doc .sgn-table--cols td{white-space:nowrap}
  .sgn-table--cols th,
  #pricing-doc .sgn-table--cols th,
  #reviews-doc .sgn-table--cols th,
  #features-doc .sgn-table--cols th,
  #subsidy-doc .sgn-table--cols th,
  #plan-doc .sgn-table--cols th{padding:12px 10px;font-size:12px}
  .sgn-table--cols td,
  #pricing-doc .sgn-table--cols td,
  #reviews-doc .sgn-table--cols td,
  #features-doc .sgn-table--cols td,
  #subsidy-doc .sgn-table--cols td,
  #plan-doc .sgn-table--cols td{padding:12px;font-size:13px}
}

/* ===== 施設カード（トップ「注目の施設」の .facility-card 群。2026-09-05 top.css から移動）=====
   施設詳細の「近くの施設」でも同じカードを使うため共通化した。
   種別バッジの色は :root の --sgn-stay / --sgn-day / --sgn-visit 系から引く（261007 まで --type-*。色の統一調整は :root だけ変える）。
   トップ・一覧固有の指定（.pickup-swiper .facility-card の幅、.fc-fav、.facility-card-list、SP調整）は top.css に残している */
.facility-card{display:flex;width:260px;height:100%;flex-direction:column;background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:all .35s;border:1px solid var(--border);cursor:pointer;position:relative}
.facility-card:hover{box-shadow:var(--shadow-hover);border-color:var(--primary);transform:translateY(-6px)}
.fc-img{flex:none;height:180px;width:100%;position:relative;overflow:hidden}
.fc-img img{width:100%;height:180px;object-fit:cover;min-height:unset;transition:transform .4s}
.facility-card:hover .fc-img img{transform:scale(1.03)}
.fc-badges{position:absolute;top:12px;left:12px;display:flex;flex-wrap:wrap;gap:6px}
/* 261007 玉井さん指示：濃い地に白文字 → 添付画像のタグ（薄い地＋タグの色の文字＋枠線。施設詳細の .chips と同じ形）。
   トップの注目の施設と施設詳細の近くの施設の両方が変わる。枠線の 1px 分だけ余白を減らして高さを変えない */
.badge{padding:4px 11px;border-radius:50px;font-size:.72rem;font-weight:700;border:1px solid transparent}
.badge-stay{background:var(--sgn-stay-soft);color:var(--sgn-stay);border-color:var(--sgn-stay-line)}
.badge-day{background:var(--sgn-day-soft);color:var(--sgn-day);border-color:var(--sgn-day-line)}
.badge-visit{background:var(--sgn-visit-soft);color:var(--sgn-visit);border-color:var(--sgn-visit-line)}
.fc-body{flex:1;padding:18px;display:flex;flex-direction:column}
.fc-area{font-size:.72rem;color:var(--text-muted);display:flex;align-items:center;gap:3px}
.fc-area .material-icons-outlined{font-size:14px}
/* 261007 住所が2行に折れたとき、ピンが2行の間に浮かないよう1行目の高さにそろえる。
   ピンの行の高さを文字の1行分（.72rem × 1.8）にしてあるので、1行のときの見え方は変わらない。
   駅（.fc-station・詳細の「近くの施設」）は途中で折らず、折れるときは駅ごと2行目へ送る */
.fc-area{align-items:flex-start;line-height:1.8}
.fc-area .material-icons-outlined{line-height:calc(.72rem * 1.8)}
.fc-area .fc-station{white-space:nowrap}
.fc-name{font-size:1rem;font-weight:700;margin:4px 0 10px;line-height:1.4;color:var(--sgn-ink-head)}
.fc-rating{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:auto;padding-top:10px}
.safety-badge{display:inline-flex;align-items:center;gap:4px;background:var(--primary-light);padding:6px 16px;border-radius:50px;font-size:1rem;font-weight:700;color:var(--primary)}
.review-count{font-size:.72rem;color:var(--text-light)}
/* 2026-09-30 玉井さん指示（8/19 PDF「トップページ」の注目の施設）：対象月齢・利用料金・口コミの3行と、安心満足度の帯。
   詳細の「近くの施設」も同じカード。新しい指定は .facility-card の中だけに効かせる */
.facility-card .fc-name{margin-bottom:6px}
.facility-card .fc-meta{margin:12px 0 14px;padding-top:12px;border-top:1px solid var(--border);display:grid;gap:7px}
.facility-card .fc-meta > div{display:grid;grid-template-columns:6.6em minmax(0,1fr);align-items:center;gap:6px;font-size:.78rem;line-height:1.4}
.facility-card .fc-meta dt{display:flex;align-items:center;gap:6px;color:var(--sgn-ink-body);font-weight:500}
.facility-card .fc-meta dt .material-icons-outlined{font-size:17px;color:var(--text-light)}
.facility-card .fc-meta dd{margin:0;color:var(--text);font-weight:500}
.facility-card .fc-satisfaction{display:flex;align-items:center;gap:6px;margin-top:auto;padding:8px 14px;border-radius:10px;background:var(--primary-light)}
.facility-card .fc-satisfaction .material-icons-outlined{font-size:20px;color:var(--primary)}
.facility-card .fc-satisfaction-label{font-size:.75rem;font-weight:700;color:#9E4E62}
.facility-card .fc-satisfaction-value{margin-left:auto;font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--primary)}
.facility-card .fc-satisfaction-value small{font-size:.6em;margin-left:1px}
/* 2026-09-30 玉井さん指示：おすすめタグ。検索結果（search.css の .badge-recommend）と同じ見た目で施設名の上に置く。
   色は検索結果と同じく仮（No.28 の色調整で一緒に変える） */
.facility-card .fc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.facility-card .badge-recommend{display:inline-block;background:#f2b322;color:#fff;border-radius:999px;padding:2px 5px;font-size:11px;font-weight:800;letter-spacing:.02em;line-height:1.45}
.facility-card .fc-tags + .fc-name{margin-top:0}
/* SPの施設名。カード共通なので top.css から移動（詳細の「近くの施設」にも同じ縮小を効かせる） */
@media(max-width:768px){
  .fc-name{font-size:.9rem}
}

/* 2026-10-05 玉井さん指示：助成金タブ・設備タブの小見出しの◾を黒→ピンクに。
   料金タブの◾は指示の対象外なので本文色のまま。サイズ（サウナイキタイ程度）は見本待ちで10pxのまま */
#features-doc .sgn-h4::before,#subsidy-doc .sgn-h4::before{background:var(--sgn-head-accent,#EF5B7A)}

/* ===== 261008 玉井さん 10/8 指示：書体を1か所で変えられるようにする（L6・L20） =====
   本文はトップ・会員・利用プランと同じ Noto Sans JP にそろえた（検索・施設詳細は端末の書体になっていた）。
   見出し用（--sgn-font-head）は今の Zen Maru Gothic。トップの見出しの英字（--sgn-font-en）は見本に近い Fredoka の幅75（font-stretch は top.css）。
   変えるときはこの3つと header.tpl の Google Fonts の読み込みだけ */
:root{--sgn-font-body:'Noto Sans JP',sans-serif;--sgn-font-head:'Zen Maru Gothic',sans-serif;--sgn-font-en:'Fredoka','Zen Maru Gothic',sans-serif}
/* ===== 261008 玉井さん（16:39 N6）：文字の色を1か所で変えられるようにする =====
   施設名・見出しは --sgn-ink-head、本文・項目名は --sgn-ink-body。--text・--navy・--color-text・--mb-text・各タブの色の変数はこの2つを指す。
   日付・件数・注記などの薄い灰色の補足、ピンク・種別の色、白、紺地の上の文字は対象外（今の色のまま） */
:root{--sgn-ink-head:#323232;--sgn-ink-body:#454545}

/* 261008 玉井さん 21:41 L2：フッターの地をミントの水玉の画像へ。地が明るくなるので文字は2つの文字の変数へ（10/8 N6 ではフッターを除いていた）。hover はピンクだとミントの地で 3.19:1 なので見出しの色＋下線（ミテクレ指摘） */
.footer{background:#d9e9e5 url(../img/footer_bg_pc.webp) center top/cover no-repeat;color:var(--sgn-ink-body)}
.footer-brand .logo,.footer-col h3{color:var(--sgn-ink-head)}
.footer-brand p,.footer-col a,.footer-bottom{color:var(--sgn-ink-body)}
.footer-bottom{border-top-color:rgba(0,0,0,.08)}
.footer-col a:hover{color:var(--sgn-ink-head);text-decoration:underline}
/* 261026 玉井さん 23:30：©の行にサイトマップ（A）。文字の大きさ・色は©と同じ。狭い幅では©の上の段へ */
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 20px}
.footer-bottom-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px}
.footer-bottom-links a{color:inherit}
.footer-bottom-links a:hover{color:var(--sgn-ink-head);text-decoration:underline}
@media(max-width:768px){.footer{background-image:url(../img/footer_bg_sp.webp)}}
/* 261009 玉井さん 20:00 L8〜L10：トップの注目の施設と施設詳細の近くの施設の、種別タグとおすすめの角を、施設詳細の画像の下のタグ（.chip）と同じ形に（丸→四角）。角は高さとの比を .chip（7px／32.4px）に合わせた。色はそのまま */
/* 261009 玉井さん 21:14 L3：大きさも .chip と同じに（文字12px・行の高さ1.7・上下5px・左右10px・枠1px で高さ 32.4px、角7px）。
   .chip は 420px 以下で左右7px、370px 以下で6px に詰めているので、それにも合わせる。色・太さはそのまま。
   おすすめは枠が無かったので、地と同じ色の枠で高さをそろえる（.chip.recommend と同じ作り） */
.facility-card .badge,.facility-card .badge-recommend{font-size:12px;line-height:1.7;padding:5px 10px;border-radius:7px}
.facility-card .badge-recommend{border:1px solid #f2b322;letter-spacing:normal}
@media(max-width:420px){.facility-card .badge{padding:5px 7px}}
@media(max-width:370px){.facility-card .badge{padding:5px 6px}}
/* 261009 玉井さん 22:25 L1：おすすめが大きすぎて施設名が小さく見えるので、おすすめだけ一回り小さく（12px・高さ32.4px → 11px・高さ約26.7px。角は高さとの比を保って6px）。種別タグは .chip と同じ大きさのまま */
.facility-card .badge-recommend{font-size:11px;padding:3px 8px;border-radius:6px}