@charset "utf-8";
/* トップページ固有CSS */
/* ===== HERO ===== */
.hero{position:relative;height:80vh;min-height:580px;overflow:hidden}
/* 2026-08-04 A-2: 絞り込みを開くとフォームが縦に伸びる。固定高のままだと overflow:hidden で切れるため、
開いている間だけ高さをコンテンツに追従させる（背景画像は inset:0 なので一緒に伸びる） */
.hero.is-expanded{height:auto;min-height:80vh}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s}
.hero-slide.active{opacity:1}
/* 2026-08-04 C-2: 縦長の画面では横が大きく切り取られ被写体が分からなくなるため、上寄りで見せる */
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
/* 2026-08-04 C-2: 全面に濃い黒を敷くと写真が判別できないため、文字が乗る下半分だけを暗くする。
文字の可読性は text-shadow を強めて確保している */
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.22) 34%,rgba(0,0,0,.48) 100%);display:flex;align-items:center;justify-content:center;padding:60px 24px 24px}
.hero-content{width:100%;max-width:720px;text-align:center;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--primary-light);padding:8px 20px;border-radius:50px;font-size:.82rem;font-weight:600;margin-bottom:10px;border:1px solid rgba(233,84,123,.2);color:var(--primary)}
.hero-badge .material-icons-outlined{font-size:16px}
.hero-badge--img{background:rgba(255,255,255,.94);border:0;padding:8px 22px;border-radius:20px;margin-bottom:16px}
.hero-badge--img img{display:block;height:72px;width:auto}
.hero-sub{font-family:var(--sgn-font-head);font-size:2rem;font-weight:700;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6),0 2px 16px rgba(0,0,0,.45);margin-bottom:12px;line-height:1.5;letter-spacing:.04em}
/* ===== HERO SEARCH ===== */
.hero-search{background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-radius:var(--radius-xl);padding:14px 14px 12px;box-shadow:0 8px 40px rgba(0,0,0,.25)}
/* ── A-2 検索フォームの再構成（2026-08-04／玉井さん案） ─────────────────
地域・条件の2枠 → キーワード → 選択済みチップ → 絞り込み開閉 → 全幅の検索ボタン。
参考画像はサウナイキタイの青系のため、配色は産後ケアマップのピンク系に置き換えている。 */
.hs-pick{
display:grid;grid-template-columns:44px minmax(0,1fr) 28px;gap:12px;align-items:center;width:100%;
margin-bottom:8px;padding:11px 13px;border:2px solid var(--border);border-radius:var(--radius);
background:#fff;font-family:inherit;text-align:left;cursor:pointer;
transition:border-color .15s ease,background .15s ease;
}
.hs-pick:hover{border-color:var(--primary);background:var(--primary-pale)}
.hs-pick:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.hs-pick-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--primary-light)}
.hs-pick-ico .material-icons-outlined{font-size:21px;color:var(--primary)}
.hs-pick-body{display:flex;flex-direction:column;min-width:0;gap:1px}
.hs-pick-label{font-size:.7rem;font-weight:700;color:var(--text-muted);letter-spacing:.06em}
.hs-pick-value{font-size:.95rem;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ＋は文字だと縦位置がずれるため border で描く */
.hs-pick-add{position:relative;width:28px;height:28px;border-radius:50%;background:var(--primary-light)}
.hs-pick-add:before,.hs-pick-add:after{content:'';position:absolute;left:50%;top:50%;background:var(--primary);transform:translate(-50%,-50%)}
.hs-pick-add:before{width:12px;height:2px}
.hs-pick-add:after{width:2px;height:12px}
.hs-keyword{display:flex;align-items:center;gap:9px;margin:0 0 9px;padding:0 13px;border:2px solid var(--border);border-radius:var(--radius);background:#fff}
.hs-keyword .material-icons-outlined{font-size:20px;color:var(--text-muted);flex:0 0 auto}
.hs-keyword input{flex:1;min-width:0;border:0;padding:12px 0;font-size:.9rem;font-family:inherit;background:transparent;outline:none;color:var(--text)}
.hs-keyword:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(233,84,123,.08)}
/* 選択済みの条件 */
.hs-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 9px}
.hs-chip{
display:inline-flex;align-items:center;gap:6px;padding:5px 7px 5px 11px;border-radius:50px;
background:var(--primary-light);color:var(--primary);font-size:.78rem;font-weight:700;line-height:1.6;
}
.hs-chip-x{
position:relative;width:17px;height:17px;border:0;border-radius:50%;background:rgba(233,84,123,.22);
cursor:pointer;flex:0 0 auto;padding:0;
}
.hs-chip-x:before,.hs-chip-x:after{content:'';position:absolute;left:50%;top:50%;width:8px;height:1.5px;background:var(--primary)}
.hs-chip-x:before{transform:translate(-50%,-50%) rotate(45deg)}
.hs-chip-x:after{transform:translate(-50%,-50%) rotate(-45deg)}
.hs-chip-x:hover{background:rgba(233,84,123,.36)}
.hs-chip-x:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
/* 絞り込みの開閉 */
.hs-more{
display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin:0 0 9px;padding:9px 0;
border:0;border-radius:var(--radius);background:transparent;color:var(--primary);
font-family:inherit;font-size:.83rem;font-weight:700;cursor:pointer;
}
.hs-more:hover{background:var(--primary-pale)}
.hs-more:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.hs-more-caret{position:relative;width:12px;height:12px}
.hs-more-caret:before{
content:'';position:absolute;left:1px;top:2px;width:8px;height:8px;
border:solid var(--primary);border-width:0 1.7px 1.7px 0;transform:rotate(45deg);transition:transform .18s ease;
}
.hs-more[aria-expanded="true"] .hs-more-caret:before{transform:rotate(-135deg);top:5px}
.hs-refine{margin:0 0 9px;padding:12px 13px;border-radius:var(--radius);background:var(--primary-pale)}
.hs-refine-label{margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--text-muted)}
.hs-refine-tags{display:flex;flex-wrap:wrap;gap:6px}
.hs-tag{
padding:6px 12px;border:1px solid var(--border);border-radius:50px;background:#fff;
color:var(--text);font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;line-height:1.6;
}
.hs-tag:hover{border-color:var(--primary);color:var(--primary)}
.hs-tag.is-on{border-color:var(--primary);background:var(--primary);color:#fff}
.hs-tag:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.hs-refine-all{
display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:10px 0 0;padding:9px 0;
border:1px solid var(--primary);border-radius:var(--radius);background:#fff;color:var(--primary);
font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
}
.hs-refine-all:hover{background:var(--primary-light)}
.hs-refine-all-caret{position:relative;width:12px;height:12px}
.hs-refine-all-caret:before{content:'';position:absolute;left:1px;top:2px;width:8px;height:8px;border:solid var(--primary);border-width:1.7px 1.7px 0 0;transform:rotate(45deg)}
/* 検索ボタンは横幅いっぱい */
.hs-submit{
display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;
border:0;border-radius:50px;background:var(--primary);color:#fff;
font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.02em;cursor:pointer;
box-shadow:0 6px 18px rgba(233,84,123,.32);transition:background .15s ease;
}
.hs-submit:hover{background:var(--primary-dark)}
.hs-submit:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px}
.hs-submit .material-icons-outlined{font-size:21px}
.hero-search-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.hero-search-card{background:#fff;border:2px solid var(--border);border-radius:var(--radius-lg);padding:14px 10px;text-align:center;cursor:pointer;transition:all .25s}
.hero-search-card:hover{border-color:var(--primary);background:var(--primary-pale);transform:translateY(-2px)}
.hero-search-card-icon{width:auto;height:26px;background:none;border-radius:0;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.hero-search-card-icon .material-icons-outlined{font-size:26px;color:var(--primary)}
.hero-search-card h3{font-size:.82rem;font-weight:700;color:var(--sgn-ink-head);margin-bottom:2px}
.hero-search-card p{font-size:.68rem;color:var(--text-muted)}
.hero-keyword{display:flex;gap:8px}
.hero-keyword input{flex:1;border:2px solid var(--border);border-radius:var(--radius);padding:11px 14px;font-size:.88rem;font-family:inherit;outline:none;transition:border-color .2s;background:#fff;color:var(--text)}
.hero-keyword input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(233,84,123,.08)}
/* ===== SITE DESCRIPTION BAR ===== */
.site-desc{background:var(--primary);color:#fff;padding:16px 0;text-align:center}
.site-desc p{font-size:.88rem;letter-spacing:.08em;font-weight:500}
.site-desc strong{font-weight:700;font-size:.95rem}
.site-desc--link{background:#fff;color:var(--text);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0}
/* 261005b 玉井さん10/2指示#2：枠（囲み線）と背景を外す。帯じたいの上下線（.site-desc--link）は残す。
ホバーで背景・枠・影が戻らないよう、ホバー側も下線と矢印の色だけにする */
.site-desc-link{display:inline-flex;align-items:center;gap:12px;padding:10px 22px;background:none;border:0;border-radius:999px;color:var(--text);font-size:1rem;font-weight:600;letter-spacing:.04em;text-decoration:none}
.site-desc-link strong{color:var(--primary-dark);font-size:1.15rem;font-weight:700}
.site-desc-link{cursor:pointer;transition:none}
.site-desc-link:hover{background:none;border:0;transform:none;box-shadow:none}
.site-desc-link:hover .site-desc-arrow{background:var(--primary-dark)}
.site-desc-link:hover .site-desc-text{text-decoration:underline;text-underline-offset:3px}
.site-desc-icon{height:40px;width:auto;flex:0 0 auto}
.site-desc-arrow{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.site-desc-arrow .material-icons-outlined{font-size:22px}
.site-desc-text{flex:1 1 auto;min-width:0;text-align:left;line-height:1.5}
.site-desc-text .nw{display:inline-block;white-space:nowrap}
@media(max-width:480px){
.site-desc--link{padding:12px 0}
.site-desc-link{font-size:.95rem;gap:10px;width:100%;justify-content:center;padding:10px 0}
.site-desc-link strong{font-size:1.08rem}
/* 261005b #2：スマホは文字を中央寄せ。
文字の箱は左（アイコン42.5＋gap10＝52.5）と右（矢印28＋gap10＝38）で 14.5px 非対称なため、
text-align:center だけでは箱の中心が画面中心より 7.25px 右にいた（実測 390／375／320 すべて同値）。
右へ 14.5px 足すと箱が 52.5〜W-52.5 になり、中心が画面中心 W/2 と一致する */
.site-desc-text{text-align:center;margin-right:14.5px}
.site-desc-icon{height:34px}
.site-desc-arrow{width:28px;height:28px}
.site-desc-arrow .material-icons-outlined{font-size:20px}
}
/* 261006 玉井さん10/5指示
J1：帯の上下の細い線も消す（261005b で残していた分）。
F4：ピンと「＞」を文字に近づける。スマホは文字の箱が横いっぱいに伸びていたため、
ピン→文字 60px／文字→＞ 75px 空いていた（390px 実測）。
2行を1行ずつのブロックにして箱を文字の幅まで縮め、ピン・文字・＞の3つをまとめて中央に置く。
箱が文字幅になったので、261005b の中央補正（margin-right:14.5px）は不要になる */
.site-desc--link{border-top:0;border-bottom:0}
.site-desc-link{gap:8px}
@media(max-width:480px){
.site-desc-link{width:auto;max-width:100%;gap:8px}
.site-desc-text{flex:0 1 auto;margin-right:0}
.site-desc-text .nw{display:block}
}
/* ===== SEARCH CARDS ===== */
.search-section{padding:56px 0 40px;background:var(--bg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 24px;border-radius:var(--radius);font-size:.88rem;font-weight:700;border:none;cursor:pointer;transition:all .25s;font-family:inherit}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(233,84,123,.25)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-lg{padding:14px 28px;font-size:.95rem}
.btn-pill{border-radius:50px}
/* ===== SECTION COMMON (dual-life-iju style) ===== */
.section{padding:72px 0}
.section-header{text-align:center;margin-bottom:44px}
.section-title-en{font-family:'Cormorant Garamond',serif;font-size:.82rem;color:var(--primary);letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px;font-weight:500}
.section-title-jp{font-family:var(--sgn-font-head);font-size:1.6rem;font-weight:900;color:var(--sgn-ink-head);line-height:1.5}
.section-title-jp small{display:block;font-size:.88rem;font-weight:400;color:var(--text-light);margin-top:6px;font-family:var(--sgn-font-body)}
.section-divider{width:40px;height:2px;background:var(--primary);margin:14px auto 0;border-radius:1px}
.section-row-header .section-header{text-align:left;margin-bottom:0}
/* 2026-09-05: セクション末尾の「もっと見る」（PICK UP・REVIEWS）。PICK UP の container は padding:0 なので左右余白を自前で持つ */
.section-more{text-align:center;margin-top:36px}
.section-more .btn{min-width:260px}
.section-more .material-icons-outlined{font-size:18px}
.pickup-section .section-more{padding:0 24px;margin-top:6px}
/* ===== HOW TO USE (dual-life-iju WHAT YOU CAN DO style) ===== */
.howto-section{background:var(--primary);color:#fff;padding:80px 0 60px;position:relative;overflow:hidden}
.howto-section::before{content:'';position:absolute;top:-100px;right:-80px;width:400px;height:400px;background:rgba(255,255,255,.04);border-radius:50%}
.howto-section::after{content:'';position:absolute;bottom:-120px;left:-60px;width:300px;height:300px;background:rgba(255,255,255,.03);border-radius:50%}
.howto-section .section-title-en{color:rgba(255,255,255,.5)}
.howto-section .section-title-jp{color:#fff}
.howto-section .section-title-jp small{color:rgba(255,255,255,.7)}
.howto-section .section-divider{background:rgba(255,255,255,.4)}
.howto-grid{position:relative;z-index:1;max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap-column:40px;column-gap:40px}
.howto-item{position:relative}
.howto-item.left{grid-column:1}
.howto-item.right{grid-column:2;margin-top:60px}
.howto-card-wrap{background:url(../img/ptn-pink.png) repeat;border-radius:calc(var(--radius-lg) + 8px);padding:10px}
.howto-card{background:#fff;border-radius:var(--radius-lg);padding:28px;color:var(--text)}
.howto-card-top{display:flex;align-items:flex-start;gap:16px}
.howto-card-text{flex:1}
.howto-card-num{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;background:var(--primary);border-radius:50%;color:#fff;margin-bottom:14px;line-height:1;box-shadow:0 4px 12px rgba(233,84,123,.3)}
.howto-card-num .step-label{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.howto-card-num .step-num{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600}
.howto-card h3{font-size:1.15rem;font-weight:900;font-family:var(--sgn-font-head);color:var(--sgn-ink-head);margin-bottom:8px}
.howto-card p{font-size:.82rem;color:var(--text-light);line-height:1.8;margin-bottom:16px}
.howto-card .howto-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 20px;background:var(--primary-light);color:var(--primary);border-radius:50px;font-size:.8rem;font-weight:700;transition:all .2s}
.howto-card .howto-btn:hover{background:var(--primary);color:#fff}
.howto-illust{flex-shrink:0}
.howto-illust img{width:120px;height:120px;object-fit:contain}
/* ===== CARE TYPES ===== */
.care-section{background:var(--bg-alt)}
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.care-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:all .35s;cursor:pointer;border:2px solid var(--border);display:flex;flex-direction:column;padding:0}
.care-card:hover{box-shadow:var(--shadow-hover);border-color:var(--primary);transform:translateY(-3px)}
.care-card-img-area{position:relative;height:220px;overflow:hidden}
.care-card-img-area img{width:100%;height:100%;padding-top:14px;object-fit:contain;object-position:center bottom}
.care-card-type{position:absolute;top:12px;left:12px;color:#fff;font-size:.72rem;font-weight:700;padding:5px 14px;border-radius:50px}
.care-card-content{padding:20px;flex:1;display:flex;flex-direction:column}
.care-card-content h3{font-size:1.25rem;font-weight:900;font-family:var(--sgn-font-head);margin-bottom:12px}
.care-features{list-style:none;margin-bottom:14px}
.care-features li{font-size:.78rem;color:var(--text-light);display:flex;gap:6px;padding:3px 0;line-height:1.6}
.care-features li b{color:var(--text-muted);font-weight:600;flex-shrink:0;min-width:52px}
.care-card-link{display:flex;justify-content:flex-end;align-items:center;gap:4px;font-size:.82rem;color:var(--text-muted);font-weight:600;margin-top:auto}
/* ===== PICKUP ===== */
.pickup-section{background:var(--white);overflow-x:clip}
.pickup-section>.container{max-width:100%;padding:0}
.pickup-section .section-header{padding:0 24px}
.pickup-swiper{padding:10px 20px 30px;position:relative;overflow:visible}
.pickup-swiper .slick-list{overflow:visible;padding-top:8px}
.pickup-swiper .facility-card{width:260px;height:auto;margin-right:22px}
/* 261009 玉井さん 22:25 L2：施設名に2行分の高さ（min-height:2.8em）を取っていて、1行の名前の下が空いていた。施設詳細の近くの施設と同じく名前の高さだけにする。2行で切る指定はそのまま */
.pickup-swiper .fc-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* .facility-card 本体（.fc-img/.fc-badges/.badge/.fc-body/.fc-area/.fc-name/.fc-rating/.safety-badge/.review-count）は
2026-09-05 に common.css へ移動した（施設詳細の「近くの施設」でも使うため）。ここに残すのはトップ固有の fav ボタンだけ */
.fc-fav{position:absolute;top:8px;right:8px;width:32px;height:32px;background:rgba(255,255,255,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;border:none;transition:transform .2s}
.fc-fav .material-icons-outlined{font-size:18px;color:#E91E63;transition:transform .3s}
.fc-fav.active{background:#E91E63}
.fc-fav.active .material-icons-outlined{color:#fff;transform:scale(1.2)}
/* ===== FACILITY CARD: SEARCH LIST (検索後一覧) 5項目 ===== */
.search-result-list{display:flex;flex-direction:column;gap:16px;max-width:800px;margin:0 auto}
.facility-card-list .fc-img{flex:0 0 200px;height:160px;overflow:hidden}
.facility-card-list .fc-img img{width:100%;height:160px;object-fit:cover;min-height:unset}
.facility-card-list .fc-body{flex:1;overflow:hidden;padding:14px 16px;display:flex;flex-direction:column;justify-content:center}
/* ===== GENRE (sauna-ikitai style categories) ===== */
.genre-section{background:#f7f7f7}
.genre-groups{display:flex;flex-direction:column;gap:24px}
.genre-accordion{border-bottom:none}
.genre-label{font-size:.95rem;font-weight:700;color:var(--sgn-ink-head);margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--primary-light);display:flex;align-items:center;gap:8px}
.genre-label .material-icons-outlined{font-size:20px;color:var(--primary)}
.genre-label .accordion-arrow{display:none}
.genre-content{max-height:none;overflow:visible}
.genre-grid{display:flex;flex-wrap:wrap;gap:6px 12px}
/* 2026-08-20: ページ下部のテキストリンク型に限定する（`.genre-grid` の子のみ）。
限定前は素の `.genre-item` だったためモーダル内のボタン型にも当たり、
hover の `border:none` が `.modal .genre-item` の枠線を消していた。
枠が1.5px→0になる分だけ中の文字が動き、カーソルを通すたびにガタついていた */
.genre-grid .genre-item{display:inline;padding:0;border:none;border-radius:0;background:none;font-size:.88rem;font-weight:400;color:var(--sgn-ink-body);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#ccc;cursor:pointer;transition:color .15s,text-decoration-color .15s}
.genre-grid .genre-item:hover{color:var(--primary);background:none;border:none;text-decoration-color:var(--primary)}
.genre-grid .genre-item .material-icons-outlined{display:none}
.genre-grid .genre-item::after{content:none}
/* ===== REVIEWS ===== */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review-card{background:var(--white);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);border:1px solid var(--border);transition:all .3s;cursor:pointer}
.review-card:hover{box-shadow:var(--shadow-hover);border-color:var(--primary-light)}
.review-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.review-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--primary-light)}
.review-name{font-size:.85rem;font-weight:700}
.review-info{font-size:.72rem;color:var(--text-muted)}
.review-safety{display:inline-flex;align-items:center;gap:4px;background:var(--primary-light);padding:4px 12px;border-radius:50px;font-size:.78rem;font-weight:700;color:var(--primary);margin-bottom:10px}
.review-text{font-size:.82rem;color:var(--text-light);line-height:1.9;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.review-facility{margin-top:10px;font-size:.75rem;color:var(--primary);font-weight:600}
.review-location{display:flex;align-items:center;gap:3px;font-size:.72rem;color:var(--text-muted);margin-top:4px}
.review-location .material-icons-outlined{font-size:13px}
/* ===== BANNER ===== */
.banner-section{padding:0}
.banner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:48px 0;align-items:stretch}
.banner-item{border-radius:var(--radius-lg);overflow:hidden;position:relative;cursor:pointer;transition:all .3s;height:190px}
.banner-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.banner-item img{width:100%;height:100%;display:block;object-fit:cover;object-position:top}
/* ===== SUBSIDY ===== */
.subsidy-banner{background:linear-gradient(135deg,var(--primary-light) 0%,#FFF8E1 50%,#FFF3E0 100%);border-radius:var(--radius-xl);padding:48px;display:flex;align-items:center;gap:40px;position:relative;overflow:hidden}
.subsidy-banner::before{content:'';position:absolute;width:250px;height:250px;background:rgba(233,84,123,.05);border-radius:50%;top:-80px;right:-40px}
.subsidy-text{flex:1;position:relative;z-index:1}
.subsidy-text h3{font-family:var(--sgn-font-head);font-size:1.4rem;margin-bottom:10px}
.subsidy-text p{font-size:.88rem;color:var(--text-light);margin-bottom:20px;line-height:1.9}
.subsidy-img{flex:0 0 260px;position:relative;z-index:1}
.subsidy-img img{border-radius:var(--radius-lg);width:100%;height:auto;box-shadow:var(--shadow)}
/* ===== BLOG (with tabs) ===== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-card{display:block;text-decoration:none;color:inherit;background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:all .35s;border:1px solid var(--border);cursor:pointer}
.blog-card:hover{box-shadow:var(--shadow-hover);border-color:var(--primary-light);transform:translateY(-2px)}
.blog-card:hover .blog-img img{transform:scale(1.04)}
.blog-img{height:170px;overflow:hidden}
.blog-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.blog-body{padding:16px}
.blog-cat{font-size:.72rem;color:var(--primary);font-weight:700;margin-bottom:6px;background:var(--primary-light);display:inline-block;padding:2px 10px;border-radius:4px}
.blog-title{font-size:.88rem;font-weight:600;line-height:1.6;margin-bottom:8px;color:var(--sgn-ink-head)}
.blog-date{font-size:.72rem;color:var(--text-muted)}
.blog-more{text-align:center;margin-top:32px}
.blog-more-btn{display:inline-block;padding:12px 32px;border-radius:50px;border:1.5px solid var(--primary);color:var(--primary);background:var(--white);font-weight:700;font-size:.9rem;text-decoration:none;transition:all .2s}
.blog-more-btn:hover{background:var(--primary);color:#fff}
/* ===== NEWS ===== */
.news-section{background:var(--bg-alt)}
.news-list{max-width:800px;margin:0 auto}
.news-item{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--border);align-items:baseline}
.news-date{font-size:.78rem;color:var(--text-muted);flex-shrink:0;min-width:100px}
.news-tag{font-size:.7rem;padding:3px 10px;border-radius:50px;font-weight:700;flex-shrink:0}
.news-tag.info{background:var(--primary-light);color:var(--primary)}
.news-tag.update{background:#E8F5E9;color:#2E7D32}
.news-tag.campaign{background:#FFF3E0;color:#E65100}
.news-text{font-size:.85rem;color:var(--text)}
/* 261026 行（a）を詳細へのリンクにしたので、行のどこに乗っても題名の色を変える（元 .news-text:hover。お知らせ一覧の .nw-* と同じ） */
.news-item:hover .news-text{color:var(--primary)}
/* ===== CTA ===== */
.cta-section{position:relative;padding:80px 0;color:#fff;text-align:center;overflow:hidden}
.cta-bg{position:absolute;inset:0}
.cta-bg img{width:100%;height:100%;object-fit:cover}
/* 261006 A3 旧ピンク（#C4687A→#A8566A）から文字用のピンク（#ca3660→#ad2b51）へ。白文字が 3.15〜3.79:1 だった
261007 玉井さん 10/7 指示：統一したピンク（予約するボタンの色 #e85f73→hover の #d94f64）へ */
.cta-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,95,115,.92),rgba(217,79,100,.9))}
.cta-content{position:relative;z-index:1}
.cta-content h2{font-family:var(--sgn-font-head);font-size:1.7rem;margin-bottom:12px}
.cta-content p{opacity:.9;margin-bottom:28px;line-height:1.8;font-size:.92rem}
.cta-btns{display:flex;gap:14px;justify-content:center}
.btn-white{background:#fff;color:var(--primary);padding:16px 36px;border-radius:50px;font-weight:700;font-size:.95rem;border:none;cursor:pointer;font-family:inherit;transition:all .25s;box-shadow:0 4px 16px rgba(0,0,0,.1)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);padding:16px 36px;border-radius:50px;font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit;transition:all .2s}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
/* 261106 「施設運営者の方へ」のボタンを button から a（施設掲載ページへのリンク）にした。a は body の line-height 1.8 を継ぐので、button と同じ高さに戻す。
PC の横並びでは白いボタンが隣の枠 2px の分だけ引き伸ばされ、a は文字を上に寄せる（button は縦の中央）ので、中身を中央に置く（ミテクレ実測：白の文字が 2px 上にずれていた） */
.cta-btns a{display:flex;align-items:center;justify-content:center;line-height:normal}
/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
.facility-grid{grid-template-columns:1fr}
.care-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.review-grid{grid-template-columns:repeat(2,1fr)}
.banner-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
.header-right{display:none}.header-nav{display:none}.hamburger{display:flex}
.hero{height:calc(100svh - 60px);min-height:unset}
.hero-overlay{padding:0px 16px 24px;align-items:center}
.hero-sub{font-size:1.4rem}
.hero-badge--img img{height:60px}
.hero-search{padding:16px 14px 14px}
.hero-search-cards{gap:8px}
.hero-search-card{padding:12px 6px}
.hero-search-card p{display:none}
.hero-search-card-icon{height:22px;margin-bottom:8px}
.hero-search-card-icon .material-icons-outlined{font-size:22px}
.hero-search-card h3{font-size:.75rem}
.hero-keyword{flex-direction:column;gap:8px}
.howto-grid{grid-template-columns:1fr;max-width:420px}
.howto-item.left,.howto-item.right{grid-column:1;margin-top:0}
.howto-item+.howto-item{margin-top:24px}
.howto-card{position:relative;padding-top:24px}
.howto-card-top{flex-direction:column;gap:8px}
.howto-card-text{flex:none}
/* 2026-09-05: STEP丸（64px・上24px/左28px）と同じ内寄せ・同じ中心高さに揃える（丸の中心 y=56 ＝ 20+36） */
.howto-illust{position:absolute;top:20px;right:28px}
.howto-illust img{width:72px;height:72px}
.howto-card .howto-btn{display:flex;justify-content:center}
/* 2026-08-20: SPで中央揃えだったテキストを左詰へ（改行位置を揃えるため） */
.howto-card-text{text-align:left}
.care-grid{display:grid;grid-template-columns:1fr;gap:16px}
.care-card-img-area{height:160px}
.genre-groups{gap:0}
.genre-accordion{border-bottom:none}
.genre-label{padding:14px 0 10px;cursor:pointer;user-select:none;margin-bottom:0}
.genre-label .accordion-arrow{display:block;margin-left:auto;font-size:20px;transition:transform .3s}
.genre-accordion:not(.open) .genre-content{max-height:0;overflow:hidden}
.genre-accordion.open .genre-content{padding:16px 0 20px}
.genre-accordion.open .accordion-arrow{transform:rotate(180deg)}
/* 注目の施設：縦型カード（No.11・13） */
.pickup-swiper .facility-card{flex-direction:column;width:260px;min-height:340px}
.pickup-swiper .fc-img{flex:none;height:150px;width:100%}
.pickup-swiper .fc-img img{min-height:150px;height:150px;width:100%;object-fit:cover}
.pickup-swiper .fc-body{flex:1;overflow:hidden}
/* 検索後一覧カード */
.facility-card-list{width:100%}
.facility-card-list .fc-img{flex:0 0 110px;height:130px;overflow:hidden}
.facility-card-list .fc-img img{width:100%;height:130px;object-fit:cover;min-height:unset}
.facility-card-list .fc-body{overflow:hidden}
.fc-rating{flex-direction:column;gap:4px}
.review-grid{grid-template-columns:1fr}
.banner-grid{grid-template-columns:1fr}
.subsidy-banner{flex-direction:column;padding:28px}
/* 2026-08-20: SPで中央揃えだったテキストを左詰へ */
.subsidy-text{text-align:left}
/* 2026-09-05: SPでは本文の
を無効にして1段落で流す（PCの2文改行は維持） */
.subsidy-text p br{display:none}
.subsidy-img{flex:none;width:100%}
.blog-grid{grid-template-columns:1fr}
.cta-btns{flex-direction:column;align-items:center}
.footer-brand{text-align:center}
.footer-brand .logo{justify-content:center}
.footer-grid{grid-template-columns:repeat(3,1fr);gap:16px}
.footer-brand{grid-column:1/-1}
.section{padding:56px 0}
.section-title-jp{font-size:1.3rem}
.section-more .btn{width:100%;max-width:320px}
.news-item{flex-wrap:wrap;gap:8px}
/* 261026 題名は常に日付・ラベルの下の段へ（入るかどうかで行ごとに形が変わり、左端がそろわなかった。ミテクレ実測） */
.news-text{flex-basis:100%}
.modal-area-grid{grid-template-columns:repeat(3,1fr)}
.modal-body{padding:20px 10px 0}
.modal .genre-item{padding:5px}
}
@media(max-width:480px){
.search-cards{grid-template-columns:repeat(3,1fr);gap:8px}
.search-card{padding:14px 8px}
.search-card-icon{width:40px;height:40px;margin-bottom:8px}
.search-card-icon .material-icons-outlined{font-size:20px}
.search-card h3{font-size:.78rem}
.search-card p{display:none}
.hero-dots{display:none}
.facility-card{width:88vw;max-width:320px}
.fc-img{flex:0 0 100px}
.pickup-swiper{padding:10px 40px 20px}
.fc-img img{min-height:140px}
.fc-eval{gap:4px}
.eval-item{font-size:.65rem}
.eval-val{font-size:.7rem;min-width:auto}
.fc-tags{gap:3px}
.fc-tag{font-size:.65rem;padding:2px 7px}
.modal-area-grid{grid-template-columns:repeat(3,1fr)}
.footer-grid{grid-template-columns:1fr}
}
/* ===== 2026-09-05 表示崩れの修正（第1弾）===== */
/* 「もっと見る」だけ他のピンク丸ピルより3px高かった（55.36px）。
が body の line-height:1.8 を継承して行高27.36pxになっていたため。
normal だと行高22pxで50pxになり今度は2px低い（このボタンだけアイコンが18px。
基準のピンク丸ピルは24pxアイコンで行高24px）ので、行高を24pxに合わせて52pxにする */
.section-more .btn{line-height:24px}
/* スマホでPICK UPのボタン上の余白がREVIEWSより10px狭かった。
スライダーの padding-bottom 20px と合わせて36pxに揃える */
@media(max-width:480px){
.pickup-section .section-more{margin-top:16px}
}
/* 2026-10-05 種別カードを支給画像（文字・ボタン込み）へ。画像の中に枠と影があるので外側には付けない */
.care-grid--img{align-items:start}
.care-img-card{display:block;border-radius:var(--radius-lg);transition:transform .3s}
.care-img-card img{display:block;width:100%;height:auto}
.care-img-card:hover{transform:translateY(-3px)}
.care-img-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* 261106 バナー3枚を a にした（リンクを付けて戻した）。キーボードの枠を、ほかのカード（common.css の .blog-card など）と同じピンクの輪に */
.banner-item:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media(max-width:768px){
.care-grid--img .care-img-card{max-width:400px;width:100%;margin:0 auto}
}
/* 2026-10-05 バナーを支給画像へ。文字が入っているので高さ固定で切らず、縦横比のまま出す */
.banner-grid{align-items:start}
.banner-item{height:auto}
.banner-item img{height:auto;object-fit:initial}
/* 261009 花弥さん：3つのバナーの高さをそろえる。支給画像の縦横比が 1.775／1.818／1.811 で違い、横に並べると高さが最大5px ずれていた。箱を同じ縦横比（900:500）にし、画像は箱いっぱいに cover（切れるのは上下か左右の 1〜2px） */
.banner-item{aspect-ratio:900/500}
.banner-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* 261010 花弥さん：まだ高さがバラバラに見える。箱は3枚とも同じ寸法（1280幅で353.3×196.3）だが、支給画像の縁が白（253〜254）で
ページの地色（--bg）に溶け、波や円の飾りが届く範囲で大きさが違って見えていた（画面上 353×199／約340×193）。
注目の施設カード（.facility-card）と同じ枠線と影で箱の輪郭を出す。2枚目は角が透過なので地を白に */
.banner-item{background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow)}
/* 261010 花弥さん「不具合は常時修正」：
・ホバーで枠線の色が変わらなかった。枠線・角丸・影・浮き方（-2px）が同じコラムカード（.blog-card:hover）と同じ色へ
・769〜1024px の 2 列で 3 枚目が下段の左に 1 枚だけ寄っていた。同じ大きさのまま中央へ */
.banner-item:hover{border-color:var(--primary-light)}
@media(min-width:769px) and (max-width:1024px){
.banner-grid>.banner-item:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc((100% - 16px)/2)}
}
/* ===================================================================
2026-10-06 玉井さん 10/4・10/5 指示
=================================================================== */
/* --- P1 FV：リボン柄の見本（261005/1d615510….png）に合わせる ----------------
背景は支給画像（SP 848×1854／PC 1672×941）。明るい背景になったので、
暗い重ね・白文字・文字の影をやめて、見本どおり濃い文字にする。
キャッチの大きさは見本の実測（390px幅で約28px）。320px でも1行に収まるよう vw で縮める */
.hero--ribbon{background:#fdf7ef}
.hero--ribbon .hero-slide picture,
.hero--ribbon .hero-slide img{display:block;width:100%;height:100%}
.hero--ribbon .hero-slide img{object-fit:cover;object-position:center}
.hero--ribbon .hero-overlay{background:none}
.hero-badge--no1{display:block;margin:0 auto 14px;padding:0;background:none;border:0;border-radius:0}
.hero-badge-link{display:inline-block;line-height:0;text-decoration:none}
.hero-badge-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.hero-badge--no1 .hero-badge-link{width:300px;max-width:80%;vertical-align:top}
.hero-badge--no1 img{display:block;width:100%;max-width:100%;height:auto;margin:0 auto}
.hero--ribbon .hero-sub{color:var(--sgn-ink-head);text-shadow:none;font-size:1.75rem;line-height:1.45;letter-spacing:.02em;margin-bottom:24px}
.hero--ribbon .hero-search{background:#fff;backdrop-filter:none;border-radius:26px;padding:14px;box-shadow:0 6px 24px rgba(160,90,100,.12)}
.hero--ribbon .hero-search-card{border:1.5px solid var(--sgn-stay-line);border-radius:18px;background:#fff}
/* 261007 玉井さん 10/7 指示：種別ではないピンク（枠・ハート）は統一したピンク（--primary）へ */
.hero--ribbon .hero-search-card:hover{border-color:var(--primary);background:var(--sgn-stay-soft)}
.hero--ribbon .hero-search-card-icon .material-icons-outlined{color:var(--primary)}
.hero--ribbon .hero-keyword input{background:#f8f5f5;border:1.5px solid var(--sgn-stay-line);border-radius:16px}
.hero--ribbon .hero-keyword input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(232,95,115,.12)}
@media(max-width:768px){
.hero-badge--no1{margin-bottom:12px}
.hero-badge--no1 .hero-badge-link{width:220px}
.hero--ribbon .hero-sub{font-size:clamp(1.2rem,6vw,1.5rem);margin-bottom:18px}
.hero--ribbon .hero-search{padding:12px}
.hero--ribbon .hero-search-card{padding:14px 4px}
.hero--ribbon .hero-search-card h3{font-size:clamp(12px,3.4vw,14px)}
.hero--ribbon .hero-keyword input{padding:13px 14px}
.hero--ribbon .hero-keyword .btn{width:100%;padding:14px}
}
/* --- N10 ご利用の流れ → 見本「できること」の5ステップ ------------------------
カードの高さは5枚とも同じにする（grid-auto-rows:1fr ＝ いちばん高いカードにそろう）。
見出しは1行で読めるようスマホでは全幅、説明文とボタンの右にイラストを置く。
.canmap-text は display:contents にして、見出し・説明・ボタンをカードのグリッドへ直接並べている */
.canmap-section{background:#fdf0f2;padding:64px 0 56px}
/* 261007 見出しは .section-header（トップの他の見出しと同じ形）に替えたので、.canmap-title 一式は今は使っていない */
.canmap-title{text-align:center;margin:0 0 30px}
.canmap-title span{position:relative;display:inline-block;padding:12px 36px;border-radius:999px;background:#fbdfe5;color:var(--primary-dark);font-family:var(--sgn-font-head);font-weight:700;font-size:1.5rem;line-height:1.4;letter-spacing:.04em}
.canmap-title span::before,
.canmap-title span::after{content:"";position:absolute;top:50%;width:18px;height:2px;border-radius:2px;background:#f0a3b4}
.canmap-title span::before{right:calc(100% + 10px)}
.canmap-title span::after{left:calc(100% + 10px)}
.canmap-list{list-style:none;max-width:860px;margin:0 auto;padding:0;display:grid;grid-auto-rows:1fr;row-gap:28px}
.canmap-card{
position:relative;display:grid;grid-template-columns:minmax(0,1fr) 210px;
grid-template-areas:"head illust" "desc illust" "btn illust";grid-template-rows:auto auto 1fr;
column-gap:16px;align-content:center;
background:#fff;border:1.5px solid #f4c9d2;border-radius:18px;padding:22px 22px 22px 26px
}
/* カードの間の点線 */
.canmap-card + .canmap-card::before{content:"";position:absolute;left:50%;top:-29px;height:28px;border-left:3px dotted #f2a9b9;transform:translateX(-50%)}
.canmap-text{display:contents}
.canmap-head{grid-area:head;display:flex;align-items:center;gap:12px;margin:0 0 8px;color:var(--primary);font-family:var(--sgn-font-head);font-weight:700;font-size:1.3rem;line-height:1.4}
.canmap-num{flex:0 0 auto;display:inline-grid;place-items:center;min-width:50px;height:38px;padding:0 8px;border-radius:9px;background:#fde4ea;color:var(--primary-dark);font-family:var(--sgn-font-body);font-weight:800;font-size:1.35rem;line-height:1}
.canmap-desc{grid-area:desc;margin:0 0 14px;color:var(--sgn-ink-body);font-size:.95rem;line-height:1.75}
/* 改行位置は見本どおり（PCでも2行）。320px のように1行に収まらない幅では、その行の中で折り返す */
.canmap-desc .nw{display:block}
.canmap-btn{grid-area:btn;align-self:start;justify-self:start;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:250px;padding:11px 14px 11px 30px;border-radius:999px;background:var(--primary);color:#fff;font-weight:700;font-size:.95rem;line-height:1.4;transition:background .2s}
.canmap-btn:hover{background:var(--primary-dark)}
.canmap-btn .material-icons-outlined{font-size:20px}
.canmap-illust{grid-area:illust;align-self:center;display:flex;justify-content:center}
.canmap-illust img{width:auto;max-width:100%;height:auto;max-height:170px;object-fit:contain}
.canmap-foot{max-width:860px;margin:30px auto 0;display:flex;align-items:center;justify-content:center;gap:14px;padding:14px 20px;border-radius:999px;background:#fbe1e7;color:var(--primary-dark);font-weight:700;font-size:1rem;line-height:1.5}
/* 見出しの帯・番号の箱・最下部の帯は薄いピンクの地なので、#ca3660 では 3.99〜4.15:1 で足りない（ミテクレ実測）。濃い方（#ad2b51）にする
261007 玉井さん 10/7 指示で統一したピンクを予約するボタンの色へ。濃い方（--primary-dark）も #d94f64 に変わる */
.canmap-foot-heart{flex:0 0 auto;width:22px;height:22px;fill:var(--primary)}
.canmap-foot-text{border-left:1.5px solid #f1b3c1;padding-left:14px}
@media(max-width:600px){
.canmap-section{padding:44px 0 40px}
.canmap-title{margin-bottom:22px}
.canmap-title span{font-size:1.12rem;padding:10px 22px}
.canmap-list{row-gap:22px}
/* 261006b 見本（6ca927a2….png）どおり、スマホでも左に見出し・説明・ボタン、右にイラスト（カードの縦の中央）。
文字の列は390pxで約220px。説明は 11.5px にして見本の改行位置（1行15〜18文字）で2行に収める。
収まらない行（04の「空き状況や〜」21文字）は下の text-wrap:balance で長さをそろえて折り返す。
ボタンは見本どおり文字を中央、＞を右端に置く
261007 玉井さん 10/7 指示「本文の改行の位置を01に合わせたい」：01 と同じく見本の位置で2行に収める。
04 の2行目（21文字・約242px）が 375〜414px で3行に折れていたので、イラストの列を 31% → 21% にして文字の列を広げる
（375px で文字の列 213 → 約246px。360px 以下は収まらないので、下の の位置で折る） */
.canmap-card{grid-template-columns:minmax(0,1fr) 21%;grid-template-areas:"head illust" "desc illust" "btn illust";grid-template-rows:auto auto 1fr;column-gap:6px;padding:14px 10px 14px 14px}
.canmap-btn{align-self:start}
.canmap-card + .canmap-card::before{top:-23px;height:22px}
.canmap-head{font-size:.95rem;gap:7px}
.canmap-num{min-width:36px;height:28px;font-size:1.02rem;border-radius:7px}
.canmap-desc{font-size:.72rem;margin-bottom:10px}
.canmap-btn{min-width:0;width:100%;position:relative;justify-content:center;padding:9px 28px;font-size:.85rem}
.canmap-btn .material-icons-outlined{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:18px}
.canmap-illust img{max-height:130px}
.canmap-foot{font-size:.8rem;gap:10px;padding:12px 14px;border-radius:18px}
.canmap-foot-heart{width:18px;height:18px}
.canmap-foot-text{padding-left:10px}
}
/* 1行に収まらない幅で最後の1文字だけ次の行へ落ちた（「施設を探／す」601〜615px、04の「す。」320〜340・610〜640px、
最下部の帯の「う」370〜380px。ミテクレ実測）。折り返すときは行の長さをそろえる */
/* 261006c balance は語の区切りを見ず「相／談」「自己負担／額」のように語の途中で切れた（ミテクレ 320〜365px）。auto-phrase で文節の切れ目で折る（Chrome 系。Safari は未対応で元の折り返しのまま） */
.canmap-head,.canmap-desc .nw,.canmap-foot-text{text-wrap:balance;word-break:auto-phrase}
/* 261007 iPhone の Safari は auto-phrase に対応しておらず、収まらない行が語の途中で折れていた。
説明文は top.html に入れた （文節の切れ目）だけで折る（Chrome も同じ位置になる）。それでも入りきらない語は最後の手段として途中で折る */
.canmap-desc .nw{word-break:keep-all;overflow-wrap:anywhere}
/* 261007 360〜369px（Android に多い幅）は文字の列が約233px で、04 の2行目（21文字）が 11.52px では入らず3行になった（ミテクレ実測 328〜369px）。
この幅だけ 11px にして2行に収める（21文字×11px＝231px）。328〜359px は 11px でも入らないので3行のまま（花弥さん決定） */
@media(min-width:360px) and (max-width:369px){.canmap-desc{font-size:11px}}
/* 351〜374px で 02 の見出しだけ2行になり5枚がそろわなかった（ミテクレ）。この幅だけ見出しを少し小さくする */
@media(max-width:374px){.canmap-head{font-size:.9rem}}
/* 320px では見出しの左右の飾り線が画面外へ 11px はみ出して横スクロールが出た（実測）。狭い幅では線を出さない */
@media(max-width:400px){
.canmap-title span::before,.canmap-title span::after{display:none}
}
/* --- N11 種別カードを新しい支給画像へ。スマホで画面いっぱい（358px）だったので少し小さく ---
スマホの幅は 300px を仮決め（もとは最大400px＝実質全幅） */
@media(max-width:768px){
.care-grid--img .care-img-card{max-width:300px}
}
/* --- N9 ママたちの声：施設詳細の口コミタブと同じ形にする ------------------------
値（文字の大きさ・色・余白）は detail.html の #reviews-doc の口コミカードを写している。
施設名・地域はカードの下端にそろえる（本文は4行で切るので、カードの高さは行数の差だけ揃う） */
.review-card--v2{display:flex;flex-direction:column}
/* 1行目に顔と日付、2行目に「30代・初産・宿泊型を利用」（口コミタブのスマホと同じ並び）。
3つを1行に並べると属性の欄が 152〜158px しかなく、「用」だけ次の行へ落ちた（375px・PC 3列で実測） */
.rv-head{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-areas:"av date" "meta meta";align-items:center;column-gap:10px;row-gap:8px;margin-bottom:8px}
.rv-avatar{grid-area:av;display:block;width:38px;height:38px;border-radius:50%}
.rv-meta{grid-area:meta;font-size:13px;font-weight:800;line-height:1.5;color:var(--text)}
.rv-date{grid-area:date;justify-self:end;font-size:12px;color:#666;white-space:nowrap}
.rv-facts{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px}
.rv-fact{display:inline-flex;align-items:center;gap:6px;border-radius:7px;padding:5px 10px;font-size:11.5px;font-weight:700;line-height:1.5;background:var(--sgn-stay-soft);color:var(--primary)}
.rv-fact i{font-style:normal;font-size:12px;line-height:1}
.rv-fact--best{background:var(--sgn-best-soft);color:var(--sgn-best-ink)}
.rv-fact--best b{font-weight:800;margin-left:2px}
/* 261006 フェーズ6：「安心して過ごせなかった」は灰色。施設詳細の口コミ（.fact--no）と同じ値 */
.rv-fact--no{background:#f1f1f1;color:#5c5c5c}
.rv-title{margin:0 0 6px;font-size:16px;font-weight:700;line-height:1.5;color:var(--sgn-ink-head)}
/* 文字色は口コミタブ（属性・タイトル・本文とも #222）にそろえる。トップの .review-text（#6b7b8d）は白地で 4.34:1 だった */
.review-card--v2 .rv-meta{color:var(--sgn-ink-body)}.review-card--v2 .rv-title{color:var(--sgn-ink-head)}
/* タイトルが「〜できまし／た！」のように最後の1文字だけ落ちる幅がある（320〜350・1025〜1055px） */
.review-card--v2 .rv-title{text-wrap:balance}
.review-card--v2 .review-text{font-size:13px;color:var(--sgn-ink-body)}
.review-card--v2 .review-facility{margin-top:auto;padding-top:10px}
/* 261007 玉井さん 10/7 指示：札を本文の下へ戻した。本文（.review-text）は下の余白を持たないので、施設詳細の本文の下の余白（10px）を札の上に付ける */
.review-card--v2 .rv-facts{margin:10px 0 0}
/* 261007 玉井さん 10/7 指示：口コミカードの外枠を施設詳細の口コミ（detail.css:819 角丸10px・影なし・枠 #e7e7e7）に合わせる。
余白（24px）と hover（押せるカードとしての反応）はそのまま。hover の影も施設詳細に無いので外し、枠の色だけ変える */
.review-card.review-card--v2{border-radius:10px;box-shadow:none;border:1px solid #e7e7e7}
.review-card.review-card--v2:hover{box-shadow:none;border-color:var(--sgn-stay-line)}
/* --- 「施設を探す」（#top-hero）の飛び先がヘッダー（sticky）の下に隠れないようにする --- 261009 #subsidy は L9 で削除 261009 20:00 L11 で #banner-subsidy を追加
ヘッダーの高さは実測で 1000px以上 108／769〜999px 131〜155（メニューが折り返すため）／768px以下 61 */
#top-hero,#banner-subsidy{scroll-margin-top:108px}
@media(max-width:999px){#top-hero,#banner-subsidy{scroll-margin-top:156px}}
@media(max-width:768px){#top-hero,#banner-subsidy{scroll-margin-top:61px}}
/* ===== 261008 玉井さん 10/8 指示 ===== */
/* L1 FV のバッジを助成金の画像（fv_badge_v1.webp 900×299）へ。幅は「No.1」のときと同じ（PC 300px／768px 以下 220px） */
/* L2 注記はトップ画像（FV 全体）の右下に小さく。背景は明るいリボン柄（#fdf7ef）なので濃い茶灰の文字 */
.hero-note{position:absolute;right:20px;bottom:12px;z-index:2;margin:0;font-size:12px;line-height:1.4;color:#5c4f4b;text-align:right}
@media(max-width:768px){
.hero-note{right:12px;bottom:6px;left:12px;font-size:11px}
}
/* L11・L21 トップの見出しを見本（PICK UP／注目の施設）の形へ。
英字：見本の細長い丸い字に近い Fredoka の幅75・400（ミテクレ 10/8 実測で端の丸さ・線・字間が見本とほぼ同じ）。
font-stretch:75% が無いと幅100で描かれる。字体は common.css の --sgn-font-en（--sgn-font-head はロゴ・モーダルも使うので分けた）。和文の色は見本とほぼ同じなので今のまま。
下線：太く短く、端を丸く。ピンクはサイトの統一ピンク（--primary） */
.section-title-en{font-family:var(--sgn-font-en);font-size:1.1rem;font-weight:400;font-stretch:75%;letter-spacing:.09em;line-height:1.4;margin-bottom:4px}
.section-divider{width:48px;height:3px;border-radius:3px;margin-top:12px}
@media(max-width:768px){
.section-title-en{font-size:.9rem}
.section-divider{width:40px;margin-top:10px}
}
/* L15 口コミの属性の行（宿泊型・生後2ヶ月）は本文と同じ太さ */
.rv-meta{font-weight:400}
/* L26 「安心して過ごせた」「1番良かったところ」はどの幅でも縦に並べる */
.rv-facts{flex-direction:column;align-items:flex-start}
/* L22 スマホ（768px 以下）の種別カードを見本の横長カードへ。PC は画像のカード（.care-grid--img）のまま */
.care-sp-list{display:none}
@media(max-width:768px){
.care-section .care-grid--img{display:none}
.care-sp-list{display:flex;flex-direction:column;gap:14px;max-width:440px;margin:0 auto}
.care-sp-card{--c:var(--sgn-stay);--c-soft:var(--sgn-stay-soft);--c-line:var(--sgn-stay-line);
position:relative;display:block;min-height:136px;border:1.5px solid var(--c-line);border-radius:16px;background:var(--c-soft);overflow:hidden;color:inherit;text-decoration:none}
.care-sp-card--day{--c:var(--sgn-day);--c-soft:var(--sgn-day-soft);--c-line:var(--sgn-day-line)}
.care-sp-card--visit{--c:var(--sgn-visit);--c-soft:var(--sgn-visit-soft);--c-line:var(--sgn-visit-line)}
.care-sp-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 0 14px 16px;max-width:64%}
.care-sp-name{display:flex;align-items:center;gap:6px;font-family:var(--sgn-font-head);font-size:1.4rem;font-weight:900;line-height:1.3;color:var(--c)}
.care-sp-name .material-icons-outlined{font-size:28px}
.care-sp-lead{margin:0;font-size:12.5px;font-weight:700;line-height:1.5;color:var(--sgn-ink-body)}
.care-sp-btn{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:7px 14px;border-radius:50px;background:var(--c);color:#fff;font-size:13px;font-weight:700;line-height:1.3;white-space:nowrap}
.care-sp-btn .material-icons-outlined{font-size:16px}
.care-sp-img{position:absolute;right:-6px;bottom:0;width:42%;max-width:170px;height:auto}
}
/* L23 注目の施設を中央に。centerMode（top.html のスライダー設定）で今のカードを真ん中に置く。
centerMode は .slick-list に inline の padding を付けるので、hover の持ち上がり用の上の余白（8px）は !important で残す */
.pickup-swiper .slick-list{padding-top:8px !important}
/* L22 ミテクレの検品（10/8）を受けた手直し
・一言の「に」だけが次の行へ落ちた（332〜408px）：top.html の の所でだけ折る
・一言が2行になる幅で宿泊だけカードが高くなった：3枚とも2行分の高さをとる
・261009 玉井さん 13:47 L14・L15：名前・一言・ボタンのかたまりをカードの縦の中央に置く（日帰り・訪問のボタンが上に寄っていた）
・261009 玉井さん 13:47 L12：日帰りのボタンの文字は玉井さんの指定で共通の白（.care-sp-btn）。白は 2.40:1（10/8 は濃い茶 #3b2606 にしていた）
・374px 以下でボタンが絵に重なった（320px で 22px）：その幅だけ絵とボタンを少し小さくする */
@media(max-width:768px){
.care-sp-card{min-height:144px;display:flex;align-items:center}
.care-sp-lead{word-break:keep-all;overflow-wrap:anywhere}
}
@media(max-width:374px){
.care-sp-img{width:34%}
.care-sp-lead{font-size:12px}
.care-sp-btn{padding:6px 11px;font-size:12px}
}
/* 261009 玉井さん 17:36 L4：スマホの宿泊型・訪問型の絵の高さを日帰り型にそろえる。3枚とも幅で大きさが決まり、縦横比（320×190・233・217）の差がそのまま高さの差になっていた。幅を日帰りの高さになる比で広げる（宿泊 ×233/190、訪問 ×233/217。最大幅も同じ比）。
375〜399px は、そろえると宿泊の絵がボタンに、訪問の絵が一言にかかるので、その幅だけ絵を 14px 右へずらす（右端が少し切れる） */
@media(max-width:768px){
.care-sp-card--stay .care-sp-img{width:calc(42% * 233 / 190);max-width:calc(170px * 233 / 190)}
.care-sp-card--visit .care-sp-img{width:calc(42% * 233 / 217);max-width:calc(170px * 233 / 217)}
}
@media(max-width:374px){
.care-sp-card--stay .care-sp-img{width:calc(34% * 233 / 190)}
.care-sp-card--visit .care-sp-img{width:calc(34% * 233 / 217)}
}
@media(min-width:375px) and (max-width:399px){
.care-sp-card--stay .care-sp-img,.care-sp-card--visit .care-sp-img{right:-20px}
}
/* 261009 玉井さん 20:00 L3：訪問型の絵は下の約1割で人物の体の下端が見えていた。訪問型だけ絵の高さの 10% 下げて、カードの下に隠す */
@media(max-width:768px){
.care-sp-card--visit .care-sp-img{transform:translateY(10%)}
}
/* 261009 ミテクレ：下げた分だけ訪問の絵の上端が宿泊・日帰りより約10px 低く見えた。訪問の絵を 1/0.9 倍に広げて、見えている上端を日帰りにそろえる（一言・ボタンへの重なり 0 を9幅で確認） */
@media(max-width:768px){
.care-sp-card--visit .care-sp-img{width:calc(42% * 233 / 217 / .9);max-width:calc(170px * 233 / 217 / .9)}
}
@media(max-width:374px){
.care-sp-card--visit .care-sp-img{width:calc(34% * 233 / 217 / .9)}
}
/* 261008 玉井さん 19:36 L5 スマホのボタンを全幅にし、ボタンのない04・05は空きの高さをなくす。
イラストは右上の同じ正方形へ。列は21%・最大66pxとして、説明文の幅を今より狭めない */
@media(max-width:600px){
.canmap-list{grid-auto-rows:auto}
.canmap-card{grid-template-columns:minmax(0,1fr) min(21%,66px);grid-template-areas:"head illust" "desc illust" "btn btn";grid-template-rows:auto auto auto}
.canmap-illust{align-self:start;width:100%;aspect-ratio:1}
.canmap-illust img{width:100%;height:100%;max-height:none;object-fit:contain}
}
/* 261008 玉井さん 21:41 L4：トップの注目の施設のアイコンも近くの施設と同じピンクに */
.pickup-section .facility-card .fc-area .material-icons-outlined,.pickup-section .facility-card .fc-meta dt .material-icons-outlined{color:var(--primary)}
/* 261009 玉井さん 01:09 L1：キャッチコピーを「エリアで選ぶ」（.hero-search-card h3＝Noto Sans JP 700・字間なし）に合わせる。10/8 21:41 L11 の 900 を置き換え */
.hero--ribbon .hero-sub{font-family:var(--sgn-font-body);font-weight:700;letter-spacing:normal}
/* 261009 玉井さん 01:09 L8：注記の「利用した場合」を途中で折らない・フッターのすぐ上の注記の欄（トップだけ） */
.nowrap{white-space:nowrap}
.top-notes{padding:24px 0}
.top-notes p{margin:0;font-size:12px;line-height:1.6;color:#5c4f4b;text-align:center}
#top-notes{scroll-margin-top:72px}
@media(min-width:769px){#top-notes{scroll-margin-top:118px}}
.top-notes p + p{margin-top:4px}
.top-notes-title{font-size:12px;font-weight:700}
.top-notes-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:var(--primary-ink)}
.top-notes-link .arw{display:inline-block;width:0;height:0;border-top:.24em solid transparent;border-bottom:.24em solid transparent;border-left:.32em solid currentColor}