@charset "utf-8"; /* searchページ固有CSS */ :root{--pink:#ef667c;--pink2:#fff3f6;--green:#66ad72;--teal:#2897a0;--gold:#f2b322;--ink:var(--sgn-ink-body);--muted:#6d6d6d;--line:#ece7e3;--bg:#fcfbfa} *{box-sizing:border-box} body{margin:0;background:#fcfbfa;color:var(--ink);font-family:var(--sgn-font-body);line-height:1.45} .header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#fff;border-bottom:1px solid #eee}.logo{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:linear-gradient(145deg,#dff7f1,#ffe8ee);display:grid;place-items:center;color:var(--pink);font-size:23px} main{padding:16px}.summary-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.summary-head h1{font-size:25px;margin:0;white-space:nowrap}.summary-head h1 em{font-style:normal;color:var(--pink)}.summary-text{font-size:13px;margin-top:4px} /* 260919: .filters（スマホだけに出ていた動かないモック4つ）を削除したため、その一式も外した */ .quick{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 14px}.chip{border:1px solid #ddd;background:#fff;border-radius:22px;padding:5px 10px;font-size:11px;font-weight:700}.chip.active-red{border-color:#f2a3b0;color:var(--pink)}.chip.active-green{border-color:#91c795;color:#4f9d5a;background:#f5fbf5} .list{display:grid;gap:12px} .card{background:#fff;border:1px solid #eee;border-radius:15px;padding:10px;display:grid;grid-template-columns:145px minmax(0,1fr);gap:12px;box-shadow:0 4px 14px rgba(0,0,0,.045);position:relative;min-height:188px;overflow:hidden} .photo-wrap{position:relative;width:145px;height:168px;align-self:stretch}.photo{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px} .facility{min-width:0;padding:2px 28px 0 0;display:flex;flex-direction:column;justify-content:flex-start}.service-type{align-self:flex-start;display:inline-block;border:1px solid #f1a4b1;color:var(--pink);border-radius:14px;padding:2px 8px;font-size:11px;font-weight:800;line-height:1.35}.service-type.day{border-color:#8bc58d;color:#4b9e55}.service-type.visit{border-color:#5db9bf;color:#258f97}.facility h2{font-size:18px;line-height:1.25;margin:5px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rating{color:var(--gold);font-weight:800;font-size:13px;white-space:nowrap}.rating span{color:#222}.rating small{color:#222;font-weight:600}.address{font-size:11px;color:#555;margin:3px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metrics{margin-top:10px;display:grid;grid-template-columns:1fr 1.2fr;gap:4px}.metric{min-width:0;min-height:46px;background:#fff;border:1px solid #eee;border-radius:7px;padding:5px 3px;text-align:center;font-size:8.5px;line-height:1.25;display:flex;flex-direction:column;justify-content:center}.metric b{display:block;font-size:11px;margin-top:3px;white-space:nowrap}.metric.price b{color:var(--pink);font-size:15px}.fav{position:absolute;right:16px;top:13px;color:var(--pink);font-size:26px;line-height:1} .pagination{display:flex;justify-content:center;gap:10px;margin:20px 0}.page-btn{width:36px;height:36px;border:1px solid #ddd;border-radius:50%;display:grid;place-items:center;background:#fff}.page-btn.active{background:var(--pink);color:#fff;border-color:var(--pink)}.notice{border:1px solid #f2c7cf;background:#fff8fa;border-radius:12px;padding:14px;font-size:12px;margin:8px 0 0} @media(max-width:400px){main{padding:14px 12px}.summary-head h1{font-size:22px}.card{grid-template-columns:132px minmax(0,1fr);gap:9px;min-height:182px;padding:9px}.photo-wrap{width:132px;height:196px}.facility{padding-right:24px}.facility h2{font-size:16px}.metric{font-size:8px}.metric b{font-size:10px}.metric.price b{font-size:13px}.fav{right:13px}} @media(max-width:350px){.card{grid-template-columns:116px minmax(0,1fr)}.photo-wrap{width:116px}.brand small{display:none}.quick{gap:5px}.chip{padding:4px 8px}.facility h2{font-size:15px}.address{font-size:10px}.rating{font-size:12px}} .facility-card-link{color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent} .facility-card-link:focus-visible{outline:3px solid rgba(239,102,124,.35);outline-offset:3px} .facility-card-link:active{transform:scale(.995)} /* 施設詳細を同一HTML内で開くためのオーバーレイ */ .detail-overlay{display:none;position:fixed;inset:0;z-index:9999;background:#fff;overflow:hidden} .facility-card-link{cursor:pointer;-webkit-tap-highlight-color:transparent} /* ===== PC版レイアウト：条件は上部の検索窓に集約し、一覧は全幅 ===== */ .desktop-shell{display:block} @media (min-width: 900px){ body{background:#fcfbfa} .header{height:78px;padding:0 28px;position:sticky;top:0;z-index:40} .desktop-shell{padding:24px 28px 36px} .desktop-shell > main{padding:0;min-width:0} .summary-head h1{font-size:30px} .quick{margin-top:14px} .list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .card{grid-template-columns:160px minmax(0,1fr);min-height:206px;padding:12px} .photo-wrap{width:160px;height:182px} .facility h2{font-size:18px} .notice{margin-bottom:0} } @media (min-width: 1150px){ .desktop-shell{padding-left:34px;padding-right:34px} .card{grid-template-columns:176px minmax(0,1fr)} .photo-wrap{width:176px} } /* 全体背景色統一：カード・ボタン・各要素の配色は維持 */ html,body,main,.layout,.page,.tab-panel,.tab-content,.facility-detail-main-content{background-color:#fcfbfa!important;} .image-load-error{background:#f3efec;color:#777} :root{ --color-primary:#e85f73;--color-primary-hover:#d94f64;--color-primary-soft:#fff1f3; --color-mint:#2d9b7f;--color-mint-soft:#edf8f4;--color-navy:var(--sgn-ink-head); --color-text:var(--sgn-ink-body);--color-muted:#68737d;--color-bg:#fcfbfa;--color-surface:#fff; --color-line:#e9e2dc;--color-focus:#1668c7; --radius-sm:8px;--radius-md:12px;--radius-lg:16px; --shadow-soft:0 8px 24px rgba(48,38,32,.07);--shadow-sticky:0 5px 16px rgba(48,38,32,.08); --space-1:8px;--space-2:16px;--space-3:24px;--space-4:40px;--space-5:64px; } html{scroll-behavior:smooth;background:var(--color-bg)} body{background:var(--color-bg);color:var(--color-text);line-height:1.65;-webkit-font-smoothing:antialiased} button,a,input,select{font:inherit} a,button{-webkit-tap-highlight-color:transparent} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--color-focus) 35%,transparent);outline-offset:3px} .header{border-color:var(--color-line);box-shadow:none} .logo{background:var(--color-mint-soft);color:var(--color-primary)} .summary-head h1,.facility h2{color:var(--color-navy)} .summary-text,.address{color:var(--color-muted)} main{padding:20px 18px} .summary-head{align-items:center}.summary-head h1{font-size:clamp(24px,6vw,30px);letter-spacing:-.02em}.summary-head h1 em{color:var(--color-primary)} .quick{flex-wrap:nowrap;overflow-x:auto;padding:4px 1px 10px;margin:2px 0 18px;scrollbar-width:none;overscroll-behavior-inline:contain}.quick::-webkit-scrollbar{display:none} /* 260919: バッジを一回り小さく（min-height 40→30px、上の .chip で 12→11px・padding 8/12→5/10px） */ .chip{flex:0 0 auto;min-height:30px;display:inline-flex;align-items:center;border-radius:var(--radius-sm);border-color:var(--color-line);font-weight:750;color:var(--color-text)} .chip.active-red{border-color:#efb3bd;color:var(--color-primary);background:var(--color-primary-soft)} .chip.active-green{border-color:#b7ddcf;color:var(--color-mint);background:var(--color-mint-soft)} .list{gap:16px} .card{border-color:var(--color-line);border-radius:var(--radius-md);box-shadow:none;padding:12px;min-height:192px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;background:#fff} .facility-card-link:hover,.card:hover{border-color:#dccfc6;box-shadow:var(--shadow-soft);transform:translateY(-1px)} .photo-wrap{border-radius:10px;overflow:hidden;background:#eee}.photo{border-radius:0;aspect-ratio:4/5} .facility{padding:2px 24px 0 0}.facility h2{font-size:18px;margin:7px 0 4px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .service-type{border-radius:6px;padding:3px 7px;background:var(--color-primary-soft);border-color:transparent;color:var(--color-primary)} .service-type.day,.service-type.visit{border-color:transparent}.service-type.day{background:var(--color-mint-soft);color:var(--color-mint)}.service-type.visit{background:#eef7f8;color:#267f87} .rating{color:#e39a16;font-size:13px}.rating span{color:var(--color-navy)}.rating small{color:var(--color-muted)} .address{font-size:12px;white-space:normal;line-height:1.5;margin-top:5px} .metrics{margin-top:auto;padding-top:10px;display:grid;grid-template-columns:1fr 1.15fr;gap:0;border-top:1px solid var(--color-line)} .metric{border:0;border-radius:0;min-height:48px;padding:4px 8px;background:transparent;text-align:left;font-size:10px;color:var(--color-muted)} .metric+ .metric{border-left:1px solid var(--color-line)}.metric b{font-size:12px;color:var(--color-text);white-space:normal}.metric.price b{font-size:15px;color:var(--color-primary)} .fav{right:12px;top:11px;color:var(--color-primary);font-size:25px} .pagination{gap:8px;margin:28px 0}.page-btn{border-radius:10px;border-color:var(--color-line);min-width:40px;height:40px}.page-btn.active{background:var(--color-primary);border-color:var(--color-primary)} .notice{border-color:#cde7de;background:var(--color-mint-soft);border-radius:var(--radius-md);padding:18px;color:#365a50} @media(max-width:520px){ main{padding:24px 0px 0px}.summary-head{align-items:flex-start}.summary-head h1{font-size:24px}.summary-text{font-size:12px} .card{grid-template-columns:minmax(118px,40%) minmax(0,60%);gap:12px;padding:10px;min-height:190px}.photo-wrap{width:100%;height:100%;min-height:170px}.facility{padding-right:21px}.facility h2{font-size:16px}.metrics{grid-template-columns:1fr}.metric+.metric{border-left:0;border-top:1px solid var(--color-line)} } @media(min-width:900px){ body{background:var(--color-bg)} .desktop-shell{padding:32px 34px 48px} .list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.card{grid-template-columns:172px minmax(0,1fr);min-height:218px;padding:13px}.photo-wrap{width:172px;height:190px} .facility h2{font-size:19px}.summary-head{padding-top:4px}.quick{margin-bottom:24px} } @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}} /* ===== 利用者満足度ゲージ（SVG・左から右へ・両端丸・下地の線なし） ===== */ .rating-gauge{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px 10px;grid-column:1/-1;border-top:1px solid var(--line)} .rating-title{font-weight:800;font-size:13px;color:var(--ink);margin-bottom:2px} .gauge{width:148px;height:86px;position:relative;margin-top:2px} .gauge svg{width:100%;height:auto;display:block;overflow:visible} .gauge-bg{fill:none;stroke:#f7e3e6;stroke-width:16;stroke-linecap:round} .gauge-fg{fill:none;stroke:var(--pink);stroke-width:16;stroke-linecap:round;stroke-dasharray:251.33;stroke-dashoffset:calc(251.33 * (1 - var(--gauge-pct,0) / 100));transition:stroke-dashoffset .8s ease} .gauge .score{position:absolute;left:0;right:0;bottom:0;text-align:center;color:var(--pink);font-size:30px;font-weight:800;line-height:1} .gauge .score span{font-size:16px} .rating-gauge .review-count{font-size:12px;color:var(--muted);margin-top:4px} @media(min-width:900px){ /* 1カラム横長カード：写真(小) | 施設情報(広) | 満足度ゲージ */ .list{grid-template-columns:1fr!important;gap:16px} .card{grid-template-columns:200px minmax(0,1fr) 168px!important;min-height:0!important;gap:18px 28px} .rating-gauge{grid-column:auto;border-top:0;border-left:1px solid var(--line);padding:14px 8px} .gauge{width:128px;height:74px} .gauge .score{font-size:26px} /* 施設名・住所を折り返さず広く使う */ .facility h2{font-size:19px;line-height:1.45;margin:2px 0 6px} .facility .address{white-space:normal} .metrics{grid-template-columns:auto auto;justify-content:start;gap:10px 26px} } /* ===== 施設写真は4:3で統一 ===== */ .card .photo-wrap{width:auto!important;height:auto!important;min-height:0!important;aspect-ratio:4/3;overflow:hidden;border-radius:10px;align-self:start} .card .photo{width:100%!important;height:100%!important;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:0} /* ===== 検索エリアの左右端をヘッダー(.container:max-width 1140px/padding 24px)に合わせる ===== */ .desktop-shell{max-width:1140px;margin-left:auto;margin-right:auto;padding-left:24px!important;padding-right:24px!important} @media(max-width:480px){ .desktop-shell{padding-left:16px!important;padding-right:16px!important} } /* ===== 上部検索窓（mockup/search-d-2.html のデザインを流用） ===== */ /* d-2 側の変数。ヘッダーと同じローズ系に合わせる 261011 --text-light・--text-muted は common.css:17 と同じ値へ（4.5:1 に届いていなかった。検索ページはここが後勝ち） */ :root{--primary:#c4687a;--primary-dark:#a8566a;--primary-light:#fde8ee;--primary-pale:#fff5f8;--text:var(--sgn-ink-body);--text-light:#4b5869;--text-muted:#68737d;--white:#fff;--border:#f0e0e4;--radius:12px;--radius-xl:28px} .header-right .material-icons-outlined{font-size:18px} .modal-area-item.checked{background:var(--primary);color:#fff;border-color:var(--primary)} .modal-area-item.checked .area-check{background:var(--primary);border-color:var(--primary)} .modal-area-item.checked span{color:rgba(255,255,255,.8)} .genre-item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:5px 10px;border:1.5px solid var(--border);border-radius:50px;font-size:.82rem;cursor:pointer;transition:all .2s;font-weight:500;background:var(--white)} .modal .genre-item{border-radius:var(--radius);min-height:44px;text-align:center;user-select:none;padding:10px 14px} .genre-item:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)} .genre-item .material-icons-outlined{font-size:16px;color:var(--primary)} .genre-item.checked{background:var(--primary);color:#fff;border-color:var(--primary)} .genre-item.checked::before{content:"check";font-family:'Material Icons Outlined';margin-right:0px;vertical-align:middle;font-size:14px} .genre-item.checked .material-icons-outlined{color:#fff} .breadcrumb-inner .material-icons-outlined{font-size:14px} /* ===== SEARCH CONDITION BAR ===== */ .search-bar{background:#fff;border-bottom:1px solid var(--border);padding:14px 0} .search-bar-inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .search-count{font-size:.85rem;font-weight:700;color:var(--text);white-space:nowrap} .search-count span{color:var(--primary);font-size:1.1rem} .active-tags{display:flex;flex-wrap:wrap;gap:6px;flex:1} .active-tag{display:inline-flex;align-items:center;gap:4px;background:var(--primary-light);color:var(--primary);border:1px solid rgba(233,84,123,.2);padding:4px 10px;border-radius:50px;font-size:.75rem;font-weight:600;cursor:default;transition:all .2s} .active-tag .material-icons-outlined{font-size:14px;cursor:pointer;opacity:.6;transition:opacity .2s} .active-tag .material-icons-outlined:hover{opacity:1} .active-tag .material-icons-outlined{font-size:14px} /* ===== SEARCH FORM ===== */ .search-form-bar{background:var(--white);border-bottom:1px solid var(--border);padding:16px 0} .search-form-field{flex:1;display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);border-radius:var(--radius);padding:10px 14px;background:#fff;transition:border-color .2s} .search-form-field:focus-within{border-color:var(--primary)} .search-form-field .material-icons-outlined{font-size:20px;color:var(--text-muted);flex-shrink:0} .search-form-field input{border:none;outline:none;font-size:.9rem;font-family:inherit;color:var(--text);width:100%;background:transparent} .search-form-field input::placeholder{color:var(--text-muted)} .search-form-btn{display:flex;align-items:center;gap:6px;padding:11px 24px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);font-size:.9rem;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .2s;flex-shrink:0} .search-form-btn:hover{background:var(--primary-dark)} .search-form-btn .material-icons-outlined{font-size:18px} .search-form-reset{display:flex;align-items:center;gap:4px;font-size:.8rem;color:var(--text-light);cursor:pointer;white-space:nowrap;background:none;border:none;font-family:inherit;padding:0;flex-shrink:0} .search-form-reset:hover{color:var(--primary)} .search-form-reset .material-icons-outlined{font-size:16px} .filter-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:.82rem;font-weight:600;color:var(--text);background:#fff;cursor:pointer;transition:all .2s;white-space:nowrap;font-family:inherit} .filter-btn:hover{border-color:var(--primary);color:var(--primary)} .filter-btn.active{background:var(--primary-light);color:var(--primary);border-color:var(--primary)} .filter-btn .material-icons-outlined{font-size:16px} /* === 都道府県・市区町村セレクター === */ .area-selector{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:12px} .area-selector-row{display:flex;align-items:flex-start;gap:0} .area-selector-row+.area-selector-row{border-top:1px solid var(--border)} .area-row-label{flex-shrink:0;width:90px;white-space:nowrap;padding:10px 12px;background:#e8e8e8;font-size:.8rem;font-weight:700;color:var(--sgn-ink-body);text-align:center;align-self:stretch;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border)} .area-row-body{flex:1;padding:10px 14px;min-width:0} .pref-body{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .pref-hint{font-size:.8rem;color:var(--text-muted)} .keyword-field{width:100%} .area-select{border:1.5px solid var(--border);border-radius:var(--radius);padding:7px 12px;background:#fff;font-size:.88rem;font-family:inherit;color:var(--text);outline:none;cursor:pointer;min-width:200px} .area-select:focus{border-color:var(--primary)} .city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 8px} .filter-group{margin-bottom:10px} .filter-group:last-child{margin-bottom:0} .filter-group-label{font-size:.75rem;font-weight:700;color:var(--primary);margin-bottom:6px} .plan-grid{display:flex;flex-wrap:wrap;gap:6px} .plan-item{border-radius:var(--radius);min-height:40px;user-select:none} .filter-btn-mobile .material-icons-outlined{font-size:18px} .fc-fav .material-icons-outlined{font-size:18px;color:#E91E63;transition:transform .3s} .fc-fav.active .material-icons-outlined{color:#fff;transform:scale(1.2)} .fc-area .material-icons-outlined{font-size:14px} .fc-coupon .material-icons-outlined{font-size:14px} .fc-distance .material-icons-outlined{font-size:14px} .float-filter-btn .material-icons-outlined{font-size:20px} /* ===== 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-title{font-family:var(--sgn-font-head);font-size:1.2rem;color:var(--sgn-ink-head);margin:0;font-weight:700} .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)} /* 260919: エリアモーダルは7列固定で、狭い画面では1セル32pxになり 県名が1文字ずつ縦に折り返していた（375pxでセル高129.9px・8行）。 トップは top.css:401 で3列に落としているが、検索ページは search.css を読むため その指定が効いていなかった。トップと同じ3列に揃える */ @media(max-width:768px){ .modal-area-grid{grid-template-columns:repeat(3,1fr)} .modal-body{padding:20px 10px 0} /* 260919: 狭い画面ではタグの文字を少し落として行数を減らす（.82rem だと 71項目中14項目が2行以上・最大4行。.75rem で1行に収まる項目が57→59、最大セル高 109→101px） */ .modal .genre-item{font-size:.75rem} } .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{border-top:none;margin-top:0;padding-top:0} .modal-tag-group{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .modal-tag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:20px} /* 260919: 条件モーダルの大見出し（種別／特徴）。中のカテゴリ名より一段上の見出し */ .modal-sec-label{ font-family:var(--sgn-font-head);font-size:1rem;color:var(--sgn-ink-head);font-weight:700; margin:22px 0 4px;padding-top:14px;border-top:2px solid var(--primary-light) } .modal-body>.modal-sec-label:first-child, #feature-modal-types>.modal-sec-label:first-child{margin-top:0;padding-top:0;border-top:none} /* 大見出しの直後は線が二重になるため、カテゴリ名の上罫線を外す */ .modal-sec-label+.modal-cat-label{border-top:none;margin-top:8px;padding-top:0} .genre-item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:5px 10px;border:1.5px solid var(--border);border-radius:50px;font-size:.82rem;cursor:pointer;transition:all .2s;font-weight:500;background:var(--white)} .modal .genre-item{border-radius:var(--radius);min-height:44px;text-align:center;user-select:none;padding:10px 14px} .genre-item:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)} .genre-item .material-icons-outlined{font-size:16px;color:var(--primary)} .genre-item.checked{background:var(--primary);color:#fff;border-color:var(--primary)} .genre-item.checked::before{content:"check";font-family:'Material Icons Outlined';margin-right:0px;vertical-align:middle;font-size:14px} .genre-item.checked .material-icons-outlined{color:#fff} .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} .pref-hint{font-size:.8rem;color:var(--text-muted)} .plan-grid{display:flex;flex-wrap:wrap;gap:6px} .plan-item{border-radius:var(--radius);min-height:40px;user-select:none} /* 検索一覧側との調整: 幅をヘッダーに揃える */ /* 検索窓は見出し行のトグルで開閉するため、帯としての装飾は持たせない */ .search-form-bar{margin:4px 0 14px} .summary-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:0 0 auto} @media(max-width:520px){.summary-actions{width:100%;margin-top:10px}} /* ヘッダー直下・右寄せの絞り込みトグル行（検索結果件数の行より上）。 トグルボタンは右寄せ、開いたパネル(.search-form-bar)はその下に全幅で表示する */ .search-toolbar{border-bottom:1px solid #DADADA;padding:12px 0 20px} .search-toolbar .container{max-width:1140px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:12px} .search-toolbar #filter-toggle-btn{align-self:flex-end} @media(max-width:480px){.search-toolbar .container{padding:0 16px}} /* モーダルのボタン。 260919: もとは #feature-modal 限定で書かれていたため、エリアモーダルの 「このエリアで絞り込む」だけ素の