@charset "utf-8"; /* detailページ固有CSS */ :root{ --coral:#ff5a70;--coral-soft:#fff1f3;--green:#17a77a;--green-soft:#eaf8f3; --navy:#22313f;--text:#333;--muted:#777;--line:#eadfda;--bg:#fcfbfa;--card:#fff; } *{box-sizing:border-box} body{margin:0;font-family:var(--sgn-font-body);background:var(--bg);color:var(--text);line-height:1.7}.page{max-width:1220px;margin:auto;padding-bottom:88px}.logo{display:flex;gap:12px;align-items:center}.logo-mark{width:44px;height:44px;border:2px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--coral);font-size:24px}.logo-title{font-weight:800;font-size:24px}.logo-sub{font-size:12px;color:#555}.breadcrumb{padding:18px 28px;color:var(--text-light);font-size:13px}.layout{display:grid;grid-template-columns:1fr;gap:24px;padding:0 28px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:20px;box-shadow:0 8px 24px rgba(80,45,25,.04)}.hero img,.gallery img,.map img{width:100%;display:block;border-radius:12px;object-fit:cover}.hero{position:relative}.hero img{height:285px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.chip{font-size:12px;background:var(--green-soft);color:var(--green);border-radius:999px;padding:4px 10px;font-weight:700}.chip.coral{background:var(--coral-soft);color:var(--coral)}.chips>.chip:nth-child(1){background:#fff4f7;color:#e9547b;border:1px solid #f2b8c7}.chips>.chip:nth-child(2){background:#fff8ef;color:#ed922b;border:1px solid #f2c98f}.chips>.chip:nth-child(3){background:#f7fbf2;color:#79a94e;border:1px solid #bcd89f}.chips>.chip:nth-child(4){background:#f1fbfa;color:#42a29f;border:1px solid #9fd2cf}.info-tag{display:inline-block;margin-left:6px;padding:3px 9px;border-radius:999px;background:var(--coral-soft);color:var(--coral);border:1px solid #ffcfd6;font-size:12px;font-weight:800;line-height:1.4;vertical-align:middle}h1{font-size:38px;margin:8px 0 2px}.rating{display:flex;align-items:center;gap:14px;font-weight:700;margin:10px 0}.stars{color:var(--coral);letter-spacing:3px}.lead{font-weight:600;margin:12px 0 22px}.subsidy{border:1px solid #cfe4d5;background:linear-gradient(135deg,#fffef9,#fff);border-radius:18px;padding:20px;box-shadow:0 6px 18px rgba(72,120,85,.08)}.subsidy-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.subsidy-head-icon{width:52px;height:52px;border:1px dashed #91c7a1;border-radius:50%;display:grid;place-items:center;background:#f5fbf6;font-size:27px;line-height:1}.subsidy-title{color:#44301b;font-weight:800;font-size:24px;letter-spacing:.03em}.subsidy-title em{color:#ef7f86;font-style:normal;font-size:1.2em}.subsidy .municipality-chip{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0 64px;padding:6px 13px;border-radius:10px;background:#edf7ef;color:#44935f;font-weight:800;font-size:13px}.subsidy-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;border:1px solid #eee8df;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.05)}.subsidy-grid>div{position:relative;background:#fff;padding:18px 14px;text-align:center}.subsidy-grid>div+div{border-left:1px dashed #c9dfcf}.subsidy-item-icon{width:58px;height:58px;margin:0 auto 9px;border-radius:50%;display:grid;place-items:center;background:#eff8f1;font-size:29px;line-height:1}.subsidy-grid strong{display:block;color:#4b351f;font-size:14px;margin-bottom:7px}.amount{font-size:23px;font-weight:800;color:#ef7f86}.period{font-size:21px;font-weight:800;color:#43945d}.subsidy-grid small{display:block;margin-top:6px;color:#6f6a64}.subsidy-footer{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;border-radius:12px;background:#fff7df;color:#5f4930;font-size:12px;line-height:1.6}.subsidy-footer-icon{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ffe5a2;font-size:18px}.subsidy-detail-link{display:inline-flex;align-items:center;gap:4px;margin-left:auto;flex:0 0 auto;border:1px solid #e8e2d9;border-radius:10px;padding:9px 13px;background:#fff;color:#398d55;font-weight:800;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.07)}@media(max-width:600px){.subsidy{padding:16px}.subsidy-head{gap:9px}.subsidy-head-icon{width:44px;height:44px;font-size:23px}.subsidy-title{font-size:19px}.subsidy .municipality-chip{margin-left:53px}.subsidy-grid{grid-template-columns:1fr}.subsidy-grid>div{padding:15px 12px}.subsidy-grid>div+div{border-left:0;border-top:1px dashed #c9dfcf}.subsidy-item-icon{width:50px;height:50px;font-size:25px}.amount,.period{font-size:19px}.subsidy-footer{align-items:flex-start;flex-wrap:wrap}.subsidy-detail-link{width:100%;margin-left:0;justify-content:center}}.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.btn{border:1px solid var(--coral);border-radius:8px;padding:13px 16px;background:#fff;color:var(--coral);font-weight:800;text-align:center;text-decoration:none;display:block}.btn.primary{background:var(--coral);color:#fff;grid-column:1/-1}.section-title{font-size:20px;font-weight:800;margin:0 0 14px}.info-list{display:grid;gap:11px}.info-row{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:start}.info-label{color:var(--green);font-weight:800;font-size:14px}.info-value{font-size:14px;font-weight:600}.usage-condition-note{margin:14px 0 0;padding:11px 12px;border-radius:10px;background:#fff4e8;border:1px solid #f4d6b3;color:#77583a;font-size:12px;line-height:1.7}.usage-condition-note-link{display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer}.usage-condition-note-link:hover{background:transparent}.usage-condition-note-link:focus-visible{outline:3px solid rgba(239,102,124,.28);outline-offset:2px}.usage-condition-note-link strong{color:var(--coral);text-decoration:underline;text-underline-offset:2px}.usage-condition-note-link .note-arrow{float:right;color:var(--coral);font-weight:900;font-size:15px}.more{display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--green);font-weight:800;margin-top:16px}.note{font-size:12px;color:#777;margin-top:10px}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .gallery-item{position:relative;overflow:hidden;border-radius:12px;background:#f4efec;min-width:0} .gallery-item.main{grid-column:1/-1;height:250px} .gallery-item.small{height:132px} .gallery-item img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;transition:transform .25s ease} .gallery-item:hover img{transform:scale(1.025)} .gallery-label{position:absolute;left:9px;bottom:9px;max-width:calc(100% - 18px);padding:5px 9px;border-radius:999px;background:rgba(34,49,63,.72);color:#fff;font-size:12px;font-weight:800;line-height:1.3;backdrop-filter:blur(3px)} .gallery-section-cardless{ margin:0 0 20px; padding:22px 0 24px; border-top:0; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fffaf7 0%,#fff 100%); } .gallery-section-cardless .title-row{padding:0 2px 14px} .gallery-section-cardless .section-title{margin:0} .gallery-section-cardless .gallery{padding:0} @media(max-width:700px){ .gallery{gap:7px}.gallery-item.main{height:210px}.gallery-item.small{height:112px}.gallery-label{font-size:11px;left:7px;bottom:7px;padding:4px 8px} .gallery-section-cardless{margin-left:-4px;margin-right:-4px;padding:18px 4px 20px} .gallery-section-cardless .title-row{padding-bottom:12px} }.title-row{display:flex;justify-content:space-between;align-items:center}.score{font-size:48px;color:var(--coral);font-weight:900}.review{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.review:first-of-type{border-top:0;margin-top:0;padding-top:0} .staff-section-cardless{ margin:0 0 20px; padding:22px 0 24px; border-top:0; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff 0%,#fffaf7 100%); } .staff-section-cardless .title-row{padding-bottom:14px} .staff-feature{margin-top:12px;padding:18px;border:1px solid #eadfd9;background:linear-gradient(145deg,#fffaf7,#fff)} .staff-head{display:grid;grid-template-columns:92px 1fr;gap:15px;align-items:center} .staff-photo{width:92px;height:92px;border-radius:50%;overflow:hidden;background:#ffe8e3;display:grid;place-items:center;font-size:42px;border:4px solid #fff;box-shadow:0 5px 15px rgba(91,63,48,.12)} .staff-photo img{width:100%;height:100%;object-fit:cover} .staff-name{font-size:19px;font-weight:900;line-height:1.35;color:var(--sgn-ink-head)} .staff-role{margin-top:3px;font-size:13px;color:var(--green);font-weight:900} .staff-career{margin-top:5px;font-size:12px;color:#766b66} .staff-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .staff-badge{padding:4px 11px;border:1px solid transparent;border-radius:999px;background:#eef8f3;color:var(--green);font-size:12px;line-height:1.75;font-weight:900} .staff-message{position:relative;margin:16px 0 14px;padding:14px 15px 14px 38px;border-radius:12px;background:#fff2ef;color:var(--sgn-ink-body);font-size:14px;line-height:1.8;font-weight:700} .staff-message:before{content:'“';position:absolute;left:13px;top:5px;color:var(--coral);font-size:32px;font-family:serif;line-height:1} .staff-others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .map img{height:150px}.bottom-cta{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:12px;display:flex;gap:12px;justify-content:center;z-index:20}.bottom-cta .btn{width:180px}.page-tabs{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:none;overflow:hidden;margin:18px 0 20px;position:sticky;top:82px;z-index:9}.page-tab{padding:9px 2px;text-align:center;font-size:12px;color:#555;text-decoration:none;font-weight:800}.page-tab .ico{display:block;font-size:20px;line-height:1.1;margin-bottom:2px}.page-tab.active{color:var(--coral);background:#fff7f9}.page-tab:not(:last-child){border-right:1px solid var(--line)} @media(max-width:900px){.page-tabs{top:73px}.layout{grid-template-columns:1fr;padding:0 16px}.breadcrumb{padding:14px 16px}.hero img{height:230px}h1{font-size:32px}.staff-head{grid-template-columns:78px 1fr;gap:12px}.staff-photo{width:78px;height:78px}.staff-others{grid-template-columns:1fr}.bottom-cta .btn{width:auto;flex:1}.info-row{grid-template-columns:92px 1fr}} @media(max-width:520px){.price-cards{grid-template-columns:1fr}.section-head{align-items:flex-start;gap:8px;flex-direction:column}.guide-item{grid-template-columns:64px 1fr 16px}.guide-illust{height:54px;font-size:28px}} .tab-panel.is-hidden{display:none} @media(max-width:900px){} @media(max-width:900px){.price-detail-panel .page-title{font-size:26px}.price-detail-panel .service-grid{gap:8px}.price-detail-panel .service{font-size:12px}.price-detail-panel .service img{width:58px;height:58px}.price-detail-panel .plan-amount{font-size:25px}.price-detail-panel .price-title-row{gap:14px}.price-detail-panel{padding:16px}} .embedded-tab-frame{width:100%;height:1px;min-height:0;border:0;border-radius:14px;background:#fff;display:block;overflow:hidden} /* 料金・口コミ・設備・助成金の各タブは、もとは iframe で埋め込んでいた（2026-08-06にDOM展開へ変更）。 旧 iframe の枠にあたる .tabdoc の見た目は、detail.html 側の #〇〇-doc で指定している （ここに書くと詳細度で負けるため）。中身のCSSは #〇〇-doc に閉じ込めてあるので外へは漏れない。 高さはブラウザ任せになり、JSでの高さ合わせが不要になった＝タブ下の空白が出なくなる */ #coupon-section{margin-top:0!important;padding-top:0!important}.included+#coupon-section{margin-top:16px!important} /* 基本情報：施設のこだわり（左画像・右テキスト） */ .preference-card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:22px 0 24px;overflow:visible;border-top:1px solid var(--line)} .preference-lead{margin:0 0 16px;color:#746760;font-size:13px} .preference-list{display:grid;gap:12px} .preference-row{display:grid;grid-template-columns:180px 1fr;min-height:132px;border:1px solid #eee2dc;border-radius:13px;background:#fff;overflow:hidden;box-shadow:0 4px 14px rgba(80,45,25,.04)} .preference-image{width:100%;height:100%;min-height:132px;object-fit:cover;display:block} .preference-copy{padding:16px 18px;display:flex;flex-direction:column;justify-content:center} .preference-copy h3{margin:0 0 6px;font-size:17px;line-height:1.45;color:var(--navy);font-weight:900} .preference-copy p{margin:0;color:#625953;font-size:13px;line-height:1.75} .preference-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .preference-tag{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:11px;font-weight:800} .preference-tag.coral{background:var(--coral-soft);color:var(--coral)} @media(max-width:600px){ .preference-row{grid-template-columns:116px 1fr;min-height:128px} .preference-image{min-height:128px} .preference-copy{padding:12px 13px} .preference-copy h3{font-size:15px;margin-bottom:4px} .preference-copy p{font-size:12px;line-height:1.6} .preference-tags{margin-top:7px;gap:4px} .preference-tag{font-size:10px;padding:2px 7px} } /* 画面幅からのはみ出し防止 */ html,body{width:100%;max-width:100%} html{overflow-x:clip} body{overflow-x:clip} .page,.layout,main,.tab-panel,.card,.subsidy,.nearby-facilities{min-width:0;max-width:100%} img,video,svg,canvas,iframe{max-width:100%} .embedded-tab-frame{width:100%!important;max-width:100%!important;overflow:hidden} .logo,.logo>div,.info-value,.title-row>*,.nearby-facilities-head>div{min-width:0} h1,h2,h3,p,.info-value,.nearby-card-name,.nearby-card-area{overflow-wrap:anywhere;word-break:break-word} @media(max-width:700px){.logo{gap:8px}.logo-mark{width:38px;height:38px;flex:0 0 38px}.logo-title{font-size:19px}.logo-sub{font-size:10px;line-height:1.35} .breadcrumb{white-space:nowrap;overflow-x:auto;scrollbar-width:none}.breadcrumb::-webkit-scrollbar{display:none} .layout{width:100%;padding-left:12px;padding-right:12px}.card{padding:16px} .subsidy{padding:14px}.subsidy-grid{grid-template-columns:1fr}.subsidy-grid div{padding:12px}.amount,.period{font-size:17px} .actions{grid-template-columns:1fr}.btn.primary{grid-column:auto} .page-tabs{width:100%;grid-template-columns:repeat(5,minmax(0,1fr));top:67px}.page-tab{font-size:10px;padding:6px 1px;line-height:1.3;overflow-wrap:anywhere}.page-tab .ico{font-size:18px} .nearby-facilities-head{align-items:flex-start}.nearby-card{flex-basis:calc(100vw - 64px);max-width:310px} .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery img{height:92px} .bottom-cta{padding:10px 8px;gap:8px}.bottom-cta .btn{min-width:0;padding:11px 6px;font-size:12px} } /* タブのスクロール追従を無効化 */ /* main はページ直下の1つだけを対象にする。素の main だと、タブ内へ展開した 玉井さんデザインの
にも背景が当たってしまう（2026-08-06） */ .layout,.layout>main,.page{overflow:visible!important;background:#fcfbfa!important} .tab-panel{overflow:visible!important;background:transparent!important} /* 2026-09-30 白→透明。ページの地色 #fcfbfa に揃える */ .page-tabs{ position:static!important; top:auto!important; z-index:30!important; align-self:start; isolation:isolate; } @media(max-width:380px){ .layout{padding-left:8px;padding-right:8px}.card{padding:14px}.page-tab{font-size:9px}.page-tab .ico{font-size:17px} .info-row{grid-template-columns:78px minmax(0,1fr);gap:8px}.info-tag{display:block;width:max-content;max-width:100%;margin:4px 0 0} } /* ── タブ・各セクションのスクロール位置（2026-08-06） ───────────────── 共通ヘッダーは position:sticky で常に画面上部に残る。 タブの href="#..." も JS の scrollIntoView も対象の上端を画面上端に合わせるため、 そのままではタブやセクション見出しがヘッダーの下へ潜り込む。 scroll-margin-top で上に余白を確保して回避する（アンカー・scrollIntoView の両方に効く）。 --header-h には detail.html のスクリプトがヘッダーの実測高さを入れている。 */ .page-tabs, #basic-info,#access, #basic-panel,#pricing-panel,#reviews-panel,#features-panel,#access-panel{ scroll-margin-top:calc(var(--header-h,107px) + 14px); } @media(max-width:700px){ /* スマホはタブ自体がヘッダー直下へ追従するため、タブの高さぶんも空ける */ #basic-info,#access, #basic-panel,#pricing-panel,#reviews-panel,#features-panel,#access-panel{ /* 261005b #3 でタブの高さを変えたので変数から計算する（52px固定だった頃の 62px の置き換え）。 固定時の .page-tabs は タブ46px ＋ 上padding 8px ＝ 54px になるので、 その 8px も足す（Codexレビュー指摘2）。 なお 2026-10-05 時点ではこの値を使う経路が無い：ハッシュで開く場合はスクロールが起きず（y=0）、 タブのクリックは .page-tabs 側の scroll-margin-top（header+10px）で動く。将来の保険 */ scroll-margin-top:calc(var(--header-h,60px) + var(--sgn-tab-h,46px) + 8px + 10px); } .page-tabs{scroll-margin-top:calc(var(--header-h,60px) + 10px)} } /* 近くの施設までスクロールしたら追従タブを非表示 */ .page-tabs{transition:opacity .2s ease,visibility .2s ease,transform .2s ease} .page-tabs.is-nearby-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px)} .page-tabs.is-sticky-fixed{position:fixed!important;margin:0!important;z-index:30!important} .page-tabs-sticky-placeholder{display:none} .page-tabs-sticky-placeholder.is-active{display:block} @media(max-width:700px){ .page-tabs.is-sticky-fixed{ /* 共通ヘッダー（sticky）の下にぴったり付ける。高さはJSが実測して代入する */ top:var(--header-h,58px)!important; left:0!important; width:100vw!important; max-width:none!important; box-sizing:border-box!important; padding:8px 16px 0!important; background:#FCFBFA!important; } .page-tabs.is-sticky-fixed::after{ left:0!important; right:0!important; } } /* 料金・クーポン／口コミタブの不要な空白を除去 */ #pricing-panel,#reviews-panel{margin:0!important;padding:0!important;} #pricing-panel .embedded-tab-frame,#reviews-panel .embedded-tab-frame{ display:block!important; width:100%!important; height:1px; min-height:0!important; margin:0!important; padding:0!important; border:0!important; vertical-align:top!important; } /* 基本情報：SNSアイコン */ .sns-info-row{align-items:center} .sns-icons{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 5px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .sns-icons::-webkit-scrollbar{display:none} .sns-icon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;color:#fff;text-decoration:none;box-shadow:0 4px 10px rgba(34,49,63,.13);transition:transform .18s ease,box-shadow .18s ease} .sns-icon:hover{transform:translateY(-2px);box-shadow:0 7px 14px rgba(34,49,63,.18)} .sns-icon:focus-visible{outline:3px solid rgba(255,90,112,.3);outline-offset:3px} .sns-line{background:#06c755}.sns-line span{font-size:9px;font-weight:900;letter-spacing:-.4px} .sns-instagram{background:linear-gradient(135deg,#833ab4,#fd1d1d 58%,#fcb045)} .instagram-camera{width:21px;height:21px;border:2px solid #fff;border-radius:6px;position:relative} .instagram-camera:before{content:"";position:absolute;width:7px;height:7px;border:2px solid #fff;border-radius:50%;left:5px;top:5px} .instagram-camera:after{content:"";position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;right:3px;top:3px} .sns-x{background:#111}.sns-x span{font-size:23px;font-weight:700;line-height:1} .sns-facebook{background:#1877f2}.sns-facebook span{font:900 27px/1 Arial,sans-serif;margin-top:5px} .sns-youtube{background:#ff0000}.youtube-play{font-size:18px;margin-left:2px} @media(max-width:380px){.sns-icons{gap:7px}.sns-icon{width:38px;height:38px;flex-basis:38px;border-radius:10px}} /* 基本情報・利用条件：参考画像に合わせた2列テーブル */ #basic-info .info-list,.usage-condition-list{ display:block; overflow:hidden; border:1px solid #eadfda; border-radius:12px; background:#fff; } #basic-info .info-list > .section-title{ margin:0; padding:14px 18px; border-bottom:1px solid #eadfda; } #basic-info .info-row,.usage-condition-row{ display:grid; grid-template-columns:160px minmax(0,1fr); gap:0; align-items:stretch; padding:0; border:0; border-bottom:1px solid #eadfda; } #basic-info .info-row:last-child,.usage-condition-row:last-child{border-bottom:0} #basic-info .info-label,.usage-condition-label{ display:flex; align-items:center; gap:9px; min-height:54px; padding:13px 16px; border-right:1px solid #eadfda; background:#fffaf8; color:#5f514b; font-size:13px; font-weight:900; line-height:1.6; } /* 261021 玉井さん 13:02 ⑷：値の太さ 600→400（この下の注意の行2つも）。Noto Sans JP は 600 を読み込んでいないので、600 は 700 の字で描かれ太く見えていた。自己負担額の金額（.usage-copay-amount 800）はそのまま */ #basic-info .info-value,.usage-condition-value{ min-width:0; display:flex; align-items:center; min-height:54px; padding:13px 18px; color:var(--text); font-size:14px; font-weight:400; line-height:1.75; background:#fff; } #basic-info .sns-info-row{align-items:stretch;border-bottom:0!important} #basic-info .sns-info-row .info-value{align-items:center} .usage-conditions-card{ position:relative; overflow:visible; border-color:#eadfda; background:#fff; } .usage-conditions-card:before{display:none} #basic-info > .section-title,.usage-conditions-card > .section-title{ padding-left:18px; padding-right:18px; } .usage-badges{display:flex;flex-wrap:wrap;gap:7px} .usage-badge{ display:inline-flex; align-items:center; min-height:29px; padding:4px 11px; border-radius:999px; background:var(--green-soft); border:1px solid #c9e9df; color:#168260; font-size:12px; font-weight:900; } .usage-condition-row.is-warning .usage-condition-icon{background:#fff0f3;color:var(--coral)} .usage-condition-row.is-warning .usage-condition-label{color:#5f514b} .usage-condition-row.is-warning .usage-condition-value{color:var(--text)!important;font-weight:400} .usage-warning{display:inline;padding:0;border:0;border-radius:0;background:transparent;color:var(--text)!important;font-weight:400} .usage-conditions-card .usage-condition-note{margin-top:16px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#555} @media(max-width:700px){ #basic-info .info-row,.usage-condition-row{grid-template-columns:112px minmax(0,1fr)} #basic-info .info-label,.usage-condition-label{min-height:50px;padding:11px 10px;font-size:12px;gap:6px} #basic-info .info-value,.usage-condition-value{min-height:50px;padding:11px 12px;font-size:13px} .usage-badge{font-size:11px;min-height:27px;padding:3px 9px} .staff-badge{font-size:11px;min-height:27px;padding:3px 9px} } @media(max-width:380px){ #basic-info .info-row, .usage-condition-row{grid-template-columns:96px minmax(0,1fr)} #basic-info .info-label, .usage-condition-label{padding:10px 8px} #basic-info .info-value, .usage-condition-value{padding:10px} } /* 基本情報・利用条件：最外周カードのみ削除 */ #basic-info,.usage-conditions-card{ padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; } /* こだわり：1つのブランドストーリー型セクション */ .preference-story{ margin:0 0 20px; padding:24px 0 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fffaf7 0%,#fff 100%); } .preference-story-heading{margin-bottom:16px} .preference-story-heading .section-title{margin-bottom:5px} .preference-story-visual{position:relative;overflow:hidden;border-radius:18px;min-height:360px;background:#f4eee9} .preference-story-visual img{width:100%;height:360px;display:block;object-fit:cover} .preference-story-copy{ position:relative; margin:0;padding:24px 0 8px; max-width:760px; padding:20px 22px; background:transparent; box-shadow:none; } .preference-story-copy h4{margin:0 0 8px;color:var(--navy);font-size:24px;line-height:1.45;font-weight:900} .preference-story-copy p{margin:0;color:var(--sgn-ink-body);font-size:13px;line-height:1.85} @media(max-width:700px){ .preference-story{padding:20px 0 23px} .preference-story-visual{min-height:auto;border-radius:15px} .preference-story-visual img{height:230px} .preference-story-copy{position:relative;max-width:none;margin:0;padding:18px 0 0} .preference-story-copy h4{font-size:19px} .preference-story-copy p{font-size:12px;line-height:1.75} } @media(max-width:480px){ .coupon-embedded > .content{padding:20px 16px;} .coupon-embedded .heading h1{font-size:22px;} } /* 料金iframe直後に余白を作らない */ #pricing-panel .embedded-tab-frame{margin:0;padding:0;vertical-align:bottom;} #pricing-panel #pricing-frame{min-height:0!important;} #pricing-panel .coupon-embedded{margin-top:0!important;} #pricing-panel .coupon-embedded > .content{padding-top:0!important;} .nearby-facilities{margin:0 0 20px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 8px 24px rgba(80,45,25,.04)} .nearby-facilities-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .nearby-facilities-title{margin:0;font-size:20px;font-weight:900;color:var(--navy)} .nearby-facilities-sub{margin:2px 0 0;color:var(--muted);font-size:12px} .nearby-slider-controls{display:flex;gap:8px;flex:0 0 auto} .nearby-slider-btn{width:36px;height:36px;border:1px solid #ffd3dc;border-radius:50%;background:#fff;color:var(--coral);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s} .nearby-slider-btn:hover{background:var(--coral-soft)} .nearby-slider-btn:disabled{opacity:.35;cursor:default} /* 2026-09-05 c2_4: .facility-card の hover は translateY(-6px) なので上に 8px の余白を取る（overflow-x:auto のため上端が切れる）。margin-top:-6px で見た目の位置は従来の padding-top:2px と同じ */ .nearby-slider{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;margin-top:-6px;padding:8px 2px 10px;overscroll-behavior-inline:contain;scrollbar-width:none} .nearby-slider::-webkit-scrollbar{display:none} /* 2026-09-05 c2_4: カードの中身はトップ「注目の施設」と同じ .facility-card（common.css）に置き換えた。 ここに残すのはスライダー（scroll-snap）用の .nearby-card と距離バッジだけ。 PC は幅を 260px に揃える（flex-basis を指定しないと .nearby-card の min(310px,82vw) が勝つ）。SP（≤700px）は従来の 84%／calc(100vw - 64px) のまま */ .nearby-card{flex:0 0 min(310px,82vw);scroll-snap-align:start} .nearby-distance{position:absolute;right:9px;bottom:9px;background:rgba(34,49,63,.82);color:#fff;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800} @media(min-width:701px){.nearby-slider .facility-card{width:260px;flex-basis:260px}} .nearby-slider-hint{text-align:center;color:#68737d;font-size:11px;margin-top:2px;display:none} @media(max-width:700px){ .nearby-facilities{padding:16px 14px} .nearby-slider-controls{display:none} .nearby-card{flex-basis:84%} .nearby-slider-hint{display:block} } /* スマホでローカルHTMLを直接開く場合の表示安定化 */ /* hidden だと body がスクロールコンテナになりヘッダーの sticky が死ぬため clip を使う */ html,body{width:100%;max-width:100%;margin:0;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{min-width:0} .page,.layout,main,.tab-panel,.card,.subsidy,.actions{width:100%;max-width:100%;min-width:0} img,svg,video,canvas,iframe{max-width:100%;height:auto} .embedded-tab-frame{display:block;width:100%!important;max-width:100%!important;min-width:0!important;border:0!important;overflow:hidden!important;background:#fff} .page-tabs{max-width:100%;min-width:0;transform:translateZ(0);-webkit-transform:translateZ(0)} .page-tab{min-width:0;overflow:hidden;text-overflow:ellipsis} .info-value,.preference-text,.nearby-card{overflow-wrap:anywhere;word-break:break-word} @media(max-width:600px){ .page{padding-bottom:92px} .layout{padding-left:12px!important;padding-right:12px!important} .breadcrumb{padding-left:16px!important;padding-right:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .logo-title{font-size:19px!important}.logo-sub{font-size:10px!important}.logo-mark{width:38px!important;height:38px!important} .facility-headline h1,#pricing-coupon-content h1{font-size:27px!important;line-height:1.35} .card{padding:16px!important;border-radius:12px} .subsidy{padding:14px!important}.subsidy-grid{grid-template-columns:1fr!important;gap:12px!important;border:0!important;border-radius:0!important;overflow:visible!important;background:transparent!important;box-shadow:none!important}.subsidy-grid>div{border:1px solid #eee8df!important;border-radius:12px!important;box-shadow:0 3px 10px rgba(0,0,0,.04)!important}.subsidy-grid>div+div{border-left:1px solid #eee8df!important;border-top:1px solid #eee8df!important} .actions{grid-template-columns:1fr!important}.actions .btn{grid-column:auto!important} .page-tabs{top:calc(var(--header-h,61px) + 8px)!important;margin:14px 0 16px!important;border-radius:8px} .page-tab{font-size:10px!important;padding:8px 1px!important;line-height:1.25}.page-tab .ico{font-size:17px!important} .bottom-cta{padding:8px!important;gap:6px!important}.bottom-cta .btn{font-size:12px!important;padding:10px 5px!important;min-width:0!important} .embedded-tab-frame{min-height:1px!important} } @media(max-width:360px){ .layout{padding-left:8px!important;padding-right:8px!important} .page-tab{font-size:9px!important}.page-tab .ico{font-size:16px!important} } /* 表示中の各タブ本文とタブメニューを一体化 */ .page-tabs:has(~ .tab-panel:not(.is-hidden)){margin-bottom:0!important;border-radius:10px 10px 0 0!important;border-bottom-color:var(--line)!important} .tab-panel:not(.is-hidden){margin-top:0!important} .tab-panel:not(.is-hidden) > .embedded-tab-frame{margin-top:0!important;border-top:0!important;border-radius:0 0 14px 14px!important} @media(max-width:600px){ .page-tabs:has(~ .tab-panel:not(.is-hidden)){border-radius:8px 8px 0 0!important} .tab-panel:not(.is-hidden) > .embedded-tab-frame{border-radius:0 0 12px 12px!important} } /* 施設詳細：お知らせ以降のサイドバー（本文＝近くの施設の下に縦積み）。 2026-09-05 c2_1: SP でも「おすすめのプラン」3枚と「無料掲載バナー」を近くの施設の直下に出す。 子要素の見た目は媒体クエリの外へ移した（値は変えていない）。 261021 玉井さん 21:44：PC だけに出していたアクセスのカード #sidebar-access を消したので、そのカードの CSS も外した */ .facility-detail-sidebar{display:block;margin-top:32px} .facility-detail-lower-layout{display:block} @media(min-width:901px){ .page{max-width:1140px} .layout{display:block;padding:0 24px 60px} .layout>main{min-width:0} .facility-detail-lower-layout{display:block;margin-top:0} .facility-detail-main-content{min-width:0} .facility-detail-sidebar{display:block;position:static;margin-top:32px} /* 予約するは追従CTAで常時表示する（PCでも隠さない） */ .bottom-cta{display:flex} } @media(max-width:900px){ .facility-detail-lower-layout{display:block} } @media(max-width:700px){ .facility-detail-sidebar{margin-top:20px} } :root{--coral:#e85f73!important;--coral-soft:#fff1f3!important;--green:#2d9b7f!important;--green-soft:#edf8f4!important;--navy:var(--sgn-ink-head)!important;--text:var(--sgn-ink-body)!important;--muted:#68737d!important;--line:#e9e2dc!important;--bg:#fcfbfa!important;--card:#fff!important} body{background:var(--bg)!important;color:var(--text)!important;-webkit-font-smoothing:antialiased} a,button{min-height:44px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(22,104,199,.32)!important;outline-offset:3px} .card{border-color:var(--line)!important;box-shadow:none!important;border-radius:12px!important} .hero img{border-radius:14px!important}.chips{margin:16px 0 10px!important}.chip{border-radius:7px!important;padding:5px 10px!important}.chip.coral{background:var(--green-soft)!important;color:var(--green)!important} /* h1 は「施設名」と「クーポン一覧」の2箇所だけ。素の h1 だと、タブ内へ展開した 玉井さんデザインの見出しにも当たってしまうため、対象を明示する（2026-08-06） */ .facility-headline h1,#pricing-coupon-content h1{color:var(--navy)!important;letter-spacing:-.025em}.rating{gap:10px!important}.stars{color:#e39a16!important}.lead{color:var(--sgn-ink-body)!important} .subsidy{border-color:#bfdfd4!important;background:linear-gradient(135deg,var(--green-soft),#fff)!important}.subsidy-title{color:var(--green)!important}.amount{color:var(--coral)!important} .actions{gap:10px!important}.btn{border-radius:10px!important;min-height:50px!important}.btn.primary{background:var(--coral)!important;border-color:var(--coral)!important}.btn:not(.primary){background:#fff!important} .page-tabs{border-radius:10px!important;box-shadow:none!important;border:0!important;background:transparent!important;overflow-x:auto!important;grid-template-columns:repeat(5,minmax(112px,1fr))!important;scrollbar-width:none}.page-tabs::-webkit-scrollbar{display:none}.page-tab{min-height:52px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;border:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;border-radius:10px 10px 0 0!important;background:#F7F7F7!important;color:#D86874!important}.page-tab.active{background:#D86874!important;color:#fff!important;border-bottom-color:var(--line)!important} .page-tabs.is-sticky-fixed{background:#FCFBFA!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .section-title{color:var(--navy)!important;font-size:22px!important;line-height:1.4}.section-title:before{display:none!important} #basic-info .info-list,.usage-condition-list{border-color:var(--line)!important;border-radius:12px!important}.info-label,.usage-condition-label{background:#fcf5f5!important;color:var(--sgn-ink-body)!important;border-color:var(--line)!important}.info-value,.usage-condition-value{border-color:var(--line)!important;color:var(--text)!important} .usage-conditions-card{margin-top:40px!important}.usage-badge{border-radius:7px!important}.usage-badge:nth-child(1){background:#fff4f7!important;color:#e9547b!important;border-color:#f2b8c7!important}.usage-badge:nth-child(2){background:#fff8ef!important;color:#ed922b!important;border-color:#f2c98f!important}.usage-badge:nth-child(3){background:#f7fbf2!important;color:#79a94e!important;border-color:#bcd89f!important} .preference-story,.gallery-section-cardless,.staff-section-cardless{margin-top:44px!important;padding-top:28px!important;border-color:var(--line)!important;background:transparent!important}.preference-story-visual{border-radius:14px!important}.preference-story-copy{padding:20px 0 0!important}.preference-story-copy h4:not(.tabdoc h4){color:var(--navy)!important} .gallery-item{border-radius:12px!important}.gallery-label{border-radius:7px!important}.staff-feature{border-radius:12px!important;box-shadow:none!important}.staff-photo{border-radius:50%!important}.staff-badge,.preference-tag{border-radius:7px!important} .map{margin-top:44px!important}.more{border-radius:10px!important} .bottom-cta{box-shadow:0 -4px 18px rgba(48,38,32,.08)!important} @media(min-width:901px){.facility-detail-lower-layout{display:block!important}.facility-detail-main-content{max-width:none!important}.facility-detail-sidebar{position:static!important;margin-top:32px!important}} @media(max-width:700px){.layout{padding-left:16px!important;padding-right:16px!important}.hero img{height:230px!important}.page-tabs{margin-left:-16px!important;margin-right:-16px!important;width:calc(100% + 32px)!important;border-left:0!important;border-right:0!important;border-radius:0!important}.page-tab{font-size:11px!important;padding:5px 8px!important}.actions{grid-template-columns:1fr!important}.btn.primary{grid-column:auto!important}.section-title{font-size:20px!important}.card{padding:16px!important}.subsidy-grid{grid-template-columns:1fr!important}.subsidy-grid div{text-align:left!important}.info-row,.usage-condition-row{grid-template-columns:108px minmax(0,1fr)!important}.info-label,.usage-condition-label{padding:12px 10px!important}.info-value,.usage-condition-value{padding:12px!important}.bottom-cta{padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}} /* 基本情報見出し罫線・基本情報タブ内見出し位置の調整 */ #basic-info .info-list > .section-title{ position:relative; z-index:1; margin-left:-1px; margin-right:-1px; background:#fff; } .preference-story-heading{ padding-left:18px; } .preference-story-copy{ padding-left:18px!important; } .gallery-section-cardless .title-row .section-title,.staff-section-cardless .title-row .section-title{ padding-left:18px; } #access > .section-title{ margin-left:-4px; } @media(max-width:700px){ #access > .section-title{ margin-left:2px; } } /* 基本情報タブ：小見出し左側のピンク線 */ #basic-panel .section-title{ display:flex!important; align-items:center!important; gap:10px; } #basic-panel .section-title:before{ content:""; display:block!important; width:4px; height:22px; flex:0 0 4px; background:var(--coral); border-radius:2px; } /* 5つのタブと表示中タブ本文の左右位置を統一 */ .page-tabs,.tab-panel:not(.is-hidden){ width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; } .page-tabs{ grid-template-columns:repeat(5,minmax(0,1fr))!important; overflow:hidden!important; } @media(max-width:700px){ .page-tabs{ width:100%!important; margin-left:0!important; margin-right:0!important; } .page-tab{ min-width:0!important; padding-left:2px!important; padding-right:2px!important; } } /* スマホ画面：タブの位置を維持したまま、表示中のタブ本文のみ画面幅いっぱいに広げる */ @media(max-width:700px){ .tab-panel:not(.is-hidden){ width:calc(100% + 32px)!important; max-width:none!important; margin-left:-16px!important; margin-right:-16px!important; } } /* スマホ画面：タブ位置は維持し、下線のみ枠線と同じ1pxで画面幅いっぱいに表示 */ @media(max-width:700px){ .page-tabs{ overflow:visible!important; border-bottom:0!important; } .page-tabs::after{ content:""; position:absolute; left:-16px; right:-16px; bottom:0; height:1px; background:var(--line); pointer-events:none; } } /* スマホ画面：こだわり・写真ギャラリー・スタッフ紹介・口コミ・アクセスを基本情報テーブルと同じ左右幅に統一 */ @media(max-width:700px){ .preference-story, .gallery-section-cardless, .staff-section-cardless, #basic-reviews, #access, #facility-posts{ width:auto!important; margin-left:16px!important; margin-right:16px!important; box-sizing:border-box!important; } } /* スマホ画面のみ：5つの施設詳細タブを固定ヘッダー直下に追従 */ @media(max-width:700px){ .page-tabs{ position:-webkit-sticky!important; position:sticky!important; top:calc(var(--header-h,61px) + 8px)!important; z-index:30!important; } } /* スマホ画面：「料金・クーポン」タブの画面外へのはみ出しを防止 */ @media(max-width:700px){ .page-tabs .page-tab{ box-sizing:border-box!important; min-width:0!important; max-width:100%!important; } .page-tabs .page-tab:nth-child(2){ padding-left:0!important; padding-right:0!important; font-size:9px!important; letter-spacing:-0.03em!important; white-space:nowrap!important; } } #access .access-address-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 6px} #access .access-address-text{min-width:0;font-weight:700;color:var(--ink)} #access .access-address-text{font-size:14px} @media(max-width:700px){ #access .access-address-text{font-size:13px} } /* 261021 玉井さん 13:02 ⑴：最寄り駅・駐車場の行を、下のアクセスのカード（.detail-sidebar-route）と同じ 12px・灰色・太字なしに。住所の行はそのまま */ #access > p{font-size:12px;line-height:1.6;color:var(--muted)} #access > p strong{font-weight:400} #access .access-copy-button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--green);width:32px;height:32px;padding:0;cursor:pointer} #access .access-copy-button svg{width:16px;height:16px;display:block} #access .access-copy-button:focus-visible{outline:2px solid var(--green);outline-offset:2px} /* 261021 玉井さん 21:44：「Googleマップで見る」を、消した下のアクセスのカードのボタンと同じ緑の地・白い文字に（PC・スマホとも。大きさはそのまま） */ #access .more{background:var(--green);border-color:var(--green);color:#fff} #pricing-panel{ --pricing-accent:#df6174;--pricing-accent-hover:#cc5065;--pricing-accent-soft:#fff3f5; --pricing-mint:#2f927c;--pricing-mint-soft:#eef8f4;--pricing-ink:#283744; --pricing-muted:#6c747b;--pricing-border:#e7e0da;--pricing-note:#f6f3ef; background-color:#fff; } #pricing-panel .embedded-tab-frame{background-color:#fff} #pricing-panel .coupon-embedded{margin:0;padding:24px 0 0;border-top:1px solid var(--pricing-border);background:transparent} #pricing-panel .coupon-embedded > .content{padding:0!important;max-width:none} #pricing-panel .coupon-embedded .heading{display:flex;align-items:center;gap:10px;margin:0 0 4px} #pricing-panel .coupon-embedded .heading .ico{display:none} #pricing-panel .coupon-embedded .heading h1{margin:0;color:var(--pricing-ink);font-size:22px;letter-spacing:-.02em} #pricing-panel .coupon-embedded .intro{margin:0 0 20px;color:var(--pricing-muted);font-size:13px;line-height:1.8} #pricing-panel .coupon-embedded .card{box-shadow:none} #pricing-panel .coupon-embedded .coupon{position:relative;margin:0 0 14px;padding:20px;border:1px solid var(--pricing-border);border-radius:12px;background:#fff;box-shadow:none;overflow:hidden} #pricing-panel .coupon-embedded .coupon:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pricing-accent)} #pricing-panel .coupon-embedded .coupon.orange{background:#fff;border-color:var(--pricing-border)} #pricing-panel .coupon-embedded .coupon .badge{display:inline-flex;margin:0 0 10px;padding:3px 9px;border-radius:999px;background:var(--pricing-accent-soft);color:var(--pricing-accent);font-size:11px;font-weight:900} #pricing-panel .coupon-embedded .coupon h2{margin:0 0 6px;color:var(--pricing-ink);font-size:19px!important;line-height:1.4} #pricing-panel .coupon-embedded .coupon h2 + h2{color:var(--pricing-accent);font-size:26px!important;letter-spacing:-.02em} #pricing-panel .coupon-embedded .coupon p{margin:0 0 14px;color:var(--pricing-muted);font-size:13px;line-height:1.75} #pricing-panel .coupon-embedded .expire{margin:0 0 16px;padding:10px 0;border-top:1px solid var(--pricing-border);border-bottom:1px solid var(--pricing-border);color:var(--pricing-muted);font-size:11px;line-height:1.55} #pricing-panel .coupon-embedded .expire b{color:var(--pricing-ink);font-size:13px} #pricing-panel .coupon-embedded .coupon .btn{display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid #e6a7b2;border-radius:9px;background:#fff!important;color:var(--pricing-accent)!important;font-weight:900;text-decoration:none} #pricing-panel .coupon-embedded .coupon .btn:hover{border-color:var(--pricing-accent);background:var(--pricing-accent-soft)!important} /* ── A-4 クーポンをチケット型の1行リストへ（2026-08-06／玉井さん案） ───────────── */ #pricing-panel .coupon-embedded .coupon-list{display:flex;flex-direction:column;gap:10px;margin:0} #pricing-panel .coupon-embedded .coupon-row{ display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:14px;align-items:center; padding:14px 16px;border:1px solid var(--pricing-border);border-radius:12px;background:#fff; color:inherit;text-decoration:none;transition:border-color .15s ease,background .15s ease; } #pricing-panel .coupon-embedded .coupon-row:hover{border-color:var(--pricing-accent);background:var(--pricing-accent-soft)} #pricing-panel .coupon-embedded .coupon-row:focus-visible{outline:2px solid var(--pricing-accent);outline-offset:2px} /* 左のチケットアイコン。種別（type-first/weekday/repeat）にかかわらず配色は共通 */ #pricing-panel .coupon-embedded .coupon-ico{ display:grid;place-items:center;width:54px;height:54px;border-radius:12px;font-size:25px;line-height:1; background:var(--pricing-accent-soft); } #pricing-panel .coupon-embedded .coupon-main{display:flex;flex-direction:column;min-width:0;gap:3px} #pricing-panel .coupon-embedded .coupon-head{display:flex;flex-wrap:wrap;align-items:center;gap:7px} #pricing-panel .coupon-embedded .coupon-label{ padding:2px 7px;border-radius:4px;background:var(--pricing-accent);color:#fff; font-size:9.5px;font-weight:900;letter-spacing:.1em;line-height:1.6; } #pricing-panel .coupon-embedded .coupon-cond{color:var(--pricing-muted);font-size:12px;font-weight:700;line-height:1.6} #pricing-panel .coupon-embedded .coupon-amount{color:var(--pricing-accent);font-size:21px;font-weight:900;letter-spacing:-.02em;line-height:1.3} #pricing-panel .coupon-embedded .coupon-desc{color:var(--pricing-muted);font-size:12px;line-height:1.7} #pricing-panel .coupon-embedded .coupon-side{display:flex;align-items:center;gap:11px;flex:0 0 auto} #pricing-panel .coupon-embedded .coupon-expire{display:flex;align-items:center;gap:8px;margin-top:2px;color:var(--pricing-muted);font-size:12px;line-height:1.6} #pricing-panel .coupon-embedded .coupon-tag{flex:0 0 auto;padding:2px 7px;border:1px solid #f0cbd2;border-radius:5px;background:var(--pricing-accent-soft);color:var(--pricing-accent);font-size:10px;font-weight:700;line-height:1.6} /* 丸い矢印ボタン。> の文字だと縦位置がずれるため border で描く */ #pricing-panel .coupon-embedded .coupon-go{ position:relative;flex:0 0 auto;width:30px;height:30px;border-radius:50%; border:1px solid var(--pricing-accent);background:#fff; } #pricing-panel .coupon-embedded .coupon-go:before{ content:'';position:absolute;left:calc(50% - 3px);top:50%;width:7px;height:7px; border:solid var(--pricing-accent);border-width:1.5px 1.5px 0 0; transform:translateY(-50%) rotate(45deg); } @media(max-width:600px){ #pricing-panel .coupon-embedded .coupon-row{grid-template-columns:44px minmax(0,1fr) 30px;gap:11px;padding:13px 14px} #pricing-panel .coupon-embedded .coupon-ico{width:44px;height:44px;font-size:21px} #pricing-panel .coupon-embedded .coupon-amount{font-size:19px} } #pricing-panel .coupon-embedded .steps,#pricing-panel .coupon-embedded .notice{margin:34px 0 0;padding:24px 0 0;border:0;border-top:1px solid var(--pricing-border);border-radius:0;background:transparent;box-shadow:none} #pricing-panel .coupon-embedded .notice{padding:24px 0 0;border:0;border-top:1px solid var(--pricing-border);border-radius:0;background:transparent} @media(min-width:760px){ #pricing-panel .coupon-embedded > .content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px} /* A-4で1行リストにしたため、クーポン一覧と併用注記も全幅で並べる（2026-08-06） */ #pricing-panel .coupon-embedded .heading,#pricing-panel .coupon-embedded .intro,#pricing-panel .coupon-embedded .coupon-list,#pricing-panel .coupon-embedded .steps,#pricing-panel .coupon-embedded .notice{grid-column:1/-1} #pricing-panel .coupon-embedded .coupon{margin:0} } @media(max-width:600px){ #pricing-panel .coupon-embedded{padding-top:20px} #pricing-panel .coupon-embedded .coupon{padding:18px 17px} } /* 料金・クーポンタブ内の切り替えタブ */ #pricing-panel .pricing-subtabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:16px 0 24px;border:1px solid #ddd;border-radius:0;overflow:hidden;background:#fff} #pricing-panel .pricing-subtab{min-height:48px;padding:10px 12px;border:0;border-right:1px solid #ddd;background:#fff;color:#323232;box-shadow:inset 0 -1px #ddd;font:inherit;font-weight:800;cursor:pointer} #pricing-panel .pricing-subtab:last-child{border-right:0} #pricing-panel .pricing-subtab.is-active{background:#fff;color:var(--primary);box-shadow:inset 0 -3px var(--primary)} #pricing-panel .pricing-subtab:hover{color:var(--primary)} #pricing-panel .pricing-subtab:focus-visible{outline:3px solid rgba(223,97,116,.25);outline-offset:-3px} #pricing-panel .pricing-subtab-panel.is-hidden{display:none!important} /* ===== 詳細ページの左右端をヘッダー(.container:max-width 1140px / padding 24px)と揃える ===== */ @media(min-width:901px){ .page{max-width:1140px!important;margin-left:auto!important;margin-right:auto!important} .layout{padding-left:24px!important;padding-right:24px!important} .breadcrumb{max-width:1140px;margin:0 auto;padding-left:24px!important;padding-right:24px!important} } /* ===== 総合評価の満足度ゲージ（検索一覧と統一。SVG・左から右へ・両端丸） ===== */ .rating-gauge-inline{display:flex;align-items:center;gap:16px;margin:10px 0 4px;flex-wrap:wrap} .rating-gauge-inline .gauge{width:150px;height:88px;position:relative;flex:0 0 auto} .rating-gauge-inline .gauge svg{width:100%;height:auto;display:block;overflow:visible} .rating-gauge-inline .gauge-bg{fill:none;stroke:#f7e3e6;stroke-width:16;stroke-linecap:round} .rating-gauge-inline .gauge-fg{fill:none;stroke:var(--coral);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} .rating-gauge-inline .gauge .score{position:absolute;left:0;right:0;bottom:0;text-align:center;color:var(--coral);font-size:31px;font-weight:800;line-height:1} .rating-gauge-inline .gauge .score span{font-size:17px} .rating-gauge-inline .gauge-meta .gauge-label{display:block;font-weight:800;font-size:14px;color:var(--navy)} .rating-gauge-inline .gauge-meta .gauge-reviews{display:block;font-size:13px;color:var(--muted);margin-top:3px} @media(max-width:600px){ .rating-gauge-inline{gap:12px} .rating-gauge-inline .gauge{width:126px;height:74px} .rating-gauge-inline .gauge .score{font-size:26px} .rating-gauge-inline .gauge .score span{font-size:14px} } /* ===== 施設名の右側に満足度ゲージを配置 ===== */ .facility-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap} .facility-headline{flex:1 1 auto;min-width:0} .facility-headline .chips{margin-top:14px} .facility-headline h1{margin:8px 0 2px} .facility-head-row .rating-gauge-inline{flex:0 0 auto;margin:8px 0 0;align-items:center} @media(max-width:900px){ /* 狭い画面は従来どおり縦積み */ .facility-head-row{display:block} .facility-head-row .rating-gauge-inline{margin:10px 0 4px} } /* ===== 「近くの施設」の送りボタンを正円に（従来は @media(max-width:480px) 内にのみ定義があり、PCで効いていなかった） ===== PC限定で囲う。囲わないと 389行目の @media(max-width:700px){.nearby-slider-controls{display:none}} より 後ろに来るため SP でも送りボタンが出て、スワイプ案内文と二重になる（2026-09-05 第2弾 F4） */ @media(min-width:701px){ .nearby-slider-controls{display:flex;gap:8px;flex:0 0 auto} .nearby-slider-btn{box-sizing:border-box;width:38px;height:38px;min-width:38px;min-height:38px;padding:0;flex:0 0 auto;border:1px solid #ffd3dc;border-radius:50%;background:#fff;color:var(--coral);font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s} .nearby-slider-btn:hover{background:var(--coral-soft);border-color:var(--coral)} .nearby-slider-btn:disabled{opacity:.35;cursor:default} } /* 下向き三角: ⌄ 文字だと縦位置がズレるため border で描画し中央に揃える */ .has-caret{position:relative} .has-caret::after{content:"";display:inline-block;width:0;height:0;margin-left:7px;vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.75} /* ===== タブの表示切替をPCでも効かせる ===== .tab-panel.is-hidden{display:none} が @media(max-width:520px) 内にしか無く、 PCでは全パネルが同時表示されタブが切り替わらなかった */ .tab-panel.is-hidden{display:none!important} /* ===== タブ・パネルの幅を本文と揃える ===== @media(min-width:901px) で .page-tabs が margin:-16px / width:calc(100% + 32px) と 親より広げられており、上部のCTAやカードより横にはみ出していた */ @media(min-width:901px){ .page-tabs{margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100%!important} .facility-detail-main-content{max-width:100%!important} .tab-panel,.tab-content{margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100%!important} } /* ›/‹ は字面が下寄りで縦位置が揃わない上、コーナー切り出し(border+回転)方式も 視覚上の重心とボックス中心がズレるため、上下対称な三角形(border trick)で描く。 上下のborderが同じ太さなので、box自体が常にちょうど中央になる */ .arw{display:inline-block;width:0;height:0;vertical-align:middle;border-top:.24em solid transparent;border-bottom:.24em solid transparent;border-left:.32em solid currentColor;flex:0 0 auto} .arw-l{transform:rotate(180deg)} .page-btn .arw,.nearby-slider-btn .arw{border-top-width:5px;border-bottom-width:5px;border-left-width:6px} /* ===== 施設情報タブ「口コミ」（2026-09-05 c2_2）===== 口コミタブ（detail.html の #reviews-doc-style）のカードと同じ値を #basic-reviews スコープで写している。 reviews-doc-style 側は触らない。値を変えるときは両方を揃える。 .basic-reviews-list の color / font-family は、施設情報タブの他の本文と書体・色が食い違うので指定しない （2026-09-05 第2弾 F2。line-height:normal だけカードの行間を口コミタブと揃えるために残す）。 本文 p の色だけは、継承だと body の #34404a になって同タブの本文より黒くなるため、 同タブの本文と同じ #766b66 を明示する。見出し h4 / .meta は本文より濃いままで良い。 margin-top:44px は直前のスタッフ紹介との間隔を、後続のアクセス（.map{margin-top:44px}）と揃えるため */ #basic-reviews{margin-top:44px} #basic-reviews .basic-reviews-list{line-height:normal} #basic-reviews .basic-reviews-list *{box-sizing:border-box} /* detail.css 30行目の旧 .review（border-top / padding-top / margin-top）は id 付きセレクタの方が強いので当たらない */ #basic-reviews .review{position:relative;border:1px solid #e7e7e7;border-radius:10px;margin:10px 0;padding:16px 14px 14px 62px;background:#fff} #basic-reviews .avatar{position:absolute;left:14px;top:16px;width:38px;height:38px;border-radius:50%;background:#f1f1f1;display:grid;place-items:center;font-size:26px} #basic-reviews .meta{font-size:13px;font-weight:400;margin-bottom:6px} #basic-reviews .date{position:absolute;right:14px;top:18px;color:#666;font-size:12px} #basic-reviews .sgn-reviews-rating{color:#ff9d00;font-size:18px;font-weight:800} #basic-reviews .sgn-reviews-rating b{color:#ef5b7a;font-size:14px;margin-left:8px} #basic-reviews .plan-tag{position:absolute;right:14px;top:48px;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:700} #basic-reviews .stay{background:#ffeef3;color:#ef5b7a} #basic-reviews .day{background:#fff3df;color:#ee8a1a} #basic-reviews .visit{background:#e7f7f4;color:#55b7a5} #basic-reviews .review h4{font-size:16px;margin:10px 0 8px;color:var(--sgn-ink-head)} #basic-reviews .review p{font-size:13px;line-height:1.75;margin:0 0 10px;color:var(--sgn-ink-body)} #basic-reviews .review-facts{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:0 0 10px} #basic-reviews .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:#ffeef3;color:#ef5b7a} #basic-reviews .fact i{font-style:normal;font-size:12px;line-height:1} #basic-reviews .fact--no{background:#f1f1f1;color:#777} #basic-reviews .fact--best{background:#e6f7f4;color:#159b89} #basic-reviews .fact--best b{font-weight:800;margin-left:2px} #basic-reviews .basic-reviews-more{margin-top:16px} @media(max-width:520px){ #basic-reviews .review{padding-left:14px;padding-top:62px} #basic-reviews .avatar{top:14px} #basic-reviews .date{top:22px} #basic-reviews .plan-tag{top:48px} } /* ===== 2026-09-05 表示崩れの修正（第1弾）===== */ /* スマホで料金・クーポン／口コミタブだけ右へ16pxはみ出していた。 .tab-panel:not(.is-hidden) の width:calc(100% + 32px) は margin-left:-16px とセットで全幅にする指定だが、この2枚は #pricing-panel,#reviews-panel{margin:0!important} で相殺が消え幅だけ残るため。 この2枚は親の幅に戻す（左右の余白が基本情報タブと同じ16pxになる） */ @media(max-width:700px){ #pricing-panel, #reviews-panel{ width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; } } /* クーポンの「ご利用方法」「ご注意事項」を料金タブ本文と同じ 「区切り線＋◾見出し＋リスト（箱なし）」に揃える。 スマホは .card{padding:16px!important} が当たるので !important で上書きする */ #pricing-panel .coupon-embedded .steps, #pricing-panel .coupon-embedded .notice{ padding-left:0!important; padding-right:0!important; padding-bottom:0!important; /* 486行の .card{border-radius:12px!important} が当たると区切り線の両端が丸まる */ border-radius:0!important; } /* 区切り線→◾見出しの間は料金タブのジャンル境界（.plan-category-card の padding-top 36px / SP 30px）に合わせる。「ご利用方法」と「ご注意事項」で 値が違うと、同じ見た目の見出しが2つ並んだときに片方だけ線に近く見える */ #pricing-panel .coupon-embedded .steps, #pricing-panel .coupon-embedded .notice{padding-top:36px!important} #pricing-panel .coupon-embedded .steps .sgn-h4, #pricing-panel .coupon-embedded .notice .sgn-h4{margin-top:0} @media(max-width:600px){ #pricing-panel .coupon-embedded .steps, #pricing-panel .coupon-embedded .notice{padding-top:30px!important} } /* ===== 2026-09-07 スマホの左右の余白（第2弾）===== */ /* スマホは表示中のタブ本文だけ画面幅いっぱいに広げているため、 見出し・リード文・本文が画面の左端にくっついていた（実測: 施設情報の見出し 0px、 助成金申請 2px、設備・持ち物 0px）。料金・クーポンと口コミは第1弾で親の幅へ 戻し済みなので、残る3枚をそろえて左右16pxの余白を作る。 ・施設情報タブ: 基本情報・利用条件のカードは端まで伸ばしたままにしたいので （カード内側に16pxの余白があり文字は端に付かない）、見出しのかたまり （.sgn-tab-head）にだけ左右16pxを入れる ・助成金申請／設備・持ち物タブ: 中身がまるごと端に寄っているので、 料金・口コミと同じく本文全体を親の幅（左右16px内側）へ戻す */ @media(max-width:700px){ #basic-panel .sgn-tab-head{padding-left:16px;padding-right:16px} #access-panel, #features-panel{ width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; } } /* 助成金申請タブの3列の料金表だけは、本文が32px狭くなると横スクロールが出る （390px で 表380px > 枠354px）。見出しセルを1px小さく・左右の余白を詰めて 354px に収める。折り返しは word-break:keep-all で「通常料金／（税込）」のように 語のまとまりで切る（既定のままだと「（税／込）」と括弧の中で切れる）。 390px では1行のまま収まり、360px 以下でのみ2行になる */ @media(max-width:700px){ #subsidy-doc .sgn-table--cols thead th{ white-space:normal!important; word-break:keep-all!important; font-size:11px!important; padding-left:8px!important; padding-right:8px!important; } #subsidy-doc .sgn-table--cols td{padding-left:10px!important;padding-right:10px!important} } /* ===== 2026-09-07 画面下の追従CTA ===== */ /* スクロール中、タブが追従CTAの帯へ重なって手前に描かれていた。 スマホのタブは position:sticky / z-index:30、CTA は z-index:20 のため。 実測（390x844）ではスクロール 950〜1050px でタブがCTAの上に乗り、 CTAの帯の最前面が .page-tab（＝ボタンが押せない）になっていた。 画面に固定するCTAは常に手前に置く（back-to-top は 150 なのでその下） */ .bottom-cta{z-index:40!important} /* 追従CTAのボタンだけ文字が上に寄っていた（実測: 高さ50pxに対し文字の中心が4px上）。 .btn は display:block で min-height:50px だけを持つため、1行の文字が上端に付く。 .actions のボタンは中身が高さいっぱいなのでズレていない */ .bottom-cta .btn{display:flex;align-items:center;justify-content:center} /* ===== 2026-09-28 施設詳細の上部（9/18MTG・9/23受領HTML） ===== */ /* おすすめ（PR設定）。色は検索結果の .badge-recommend（--gold）に合わせた仮の色。No.28の色調整で確定させる */ .chip.recommend{background:#f2b322!important;color:#fff!important} /* 3ボタン：PCはキャッチコピーの右に小さく、スマホはタブの下（.actions-sp） */ .facility-lead-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin:12px 0 22px} .facility-lead-row .lead{flex:1 1 360px;min-width:0;margin:0} /* 398行の .actions{width:100%} が効くと改行してキャッチの下へ落ちるので auto に戻す */ .actions.actions-pc{display:flex!important;flex:0 0 auto;width:auto;gap:8px!important;margin:0 0 0 auto} .actions.actions-pc .btn{display:flex;align-items:center;justify-content:center;min-height:38px!important;padding:7px 14px!important;font-size:13px;white-space:nowrap} .actions.actions-sp{display:none!important} @media(max-width:700px){ .facility-lead-row{display:block} .actions.actions-pc{display:none!important} .actions.actions-sp{display:grid!important;margin:0 0 14px} } /* タブの下に移したお知らせ・スマホの3ボタン。タブ本文（.tab-panel）と同じ白地にして、 タブ → この枠 → 本文 が途切れずにつながって見えるようにする */ .detail-under-tabs{padding:16px 0 0;background:transparent} /* 2026-09-30 白→透明。タブの箱と同じくページの地色に揃える */ @media(max-width:700px){ .detail-under-tabs{margin:0 -16px;padding:16px 16px 0} } /* 委託施設カード（「助成金でお得に利用できます」の置き換え）。値は受領HTMLのまま。 変数は :root に置かずカードに閉じる（稼働CSSの :root が既に7箇所あるため） */ .subsidy-card{ --subsidy-pink:#f23868; --subsidy-pink-dark:#ec285b; --subsidy-pink-line:#f6a9bd; --subsidy-pink-pale:#fff7f9; --subsidy-text:var(--sgn-ink-body); --subsidy-muted:#4d5c67; margin:0 0 24px; padding:28px 24px 26px; color:var(--subsidy-text); background:linear-gradient(135deg,#fff9fb 0%,var(--subsidy-pink-pale) 100%); border:1px solid #f9c5d2; border-radius:20px; } .subsidy-card__header{display:flex;align-items:center;gap:12px} .subsidy-card__info-icon{ display:grid; flex:0 0 42px; width:42px; height:42px; place-items:center; color:#fff; background:linear-gradient(145deg,#f63b70,var(--subsidy-pink-dark)); border-radius:50%; } .subsidy-card__info-icon svg{width:24px;height:24px} .subsidy-card__title{ margin:0; color:var(--subsidy-pink-dark); font-size:clamp(20px,5.3vw,28px); font-weight:700; line-height:1.45; letter-spacing:.01em; } .subsidy-card__description{margin:24px 0 0;color:var(--subsidy-text);font-size:16px;line-height:1.9} .subsidy-card__body{margin-top:24px;padding-top:24px;border-top:1px solid #f7d6df} .subsidy-card__heading{ display:flex; align-items:center; gap:10px; margin:0; color:var(--sgn-ink-head); font-size:20px; font-weight:700; line-height:1.5; } .subsidy-card__heading::before{flex:0 0 5px;width:5px;height:28px;content:"";background:var(--subsidy-pink);border-radius:999px} .subsidy-card__municipalities{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0;list-style:none} .subsidy-card__municipality{ min-width:96px; padding:10px 17px; color:var(--subsidy-pink-dark); background:#fff; border:1px solid var(--subsidy-pink-line); border-radius:999px; font-size:16px; font-weight:700; line-height:1.35; text-align:center; } /* 自治体は2段まで。3段目以降は JS が is-over を付けて隠し、「全自治体を見る」で開く（開いたら閉じない） */ .subsidy-card__municipality.is-over{display:none} .subsidy-card__more{ display:inline-flex; align-items:center; gap:8px; margin:2px 0 0; padding:4px 2px; color:var(--subsidy-pink-dark); background:none; border:0; font:inherit; font-size:15px; font-weight:700; line-height:1.5; cursor:pointer; } .subsidy-card__more[hidden]{display:none} .subsidy-card__more svg{width:13px;height:8px} .subsidy-card__more:hover,.subsidy-card__more:focus-visible{text-decoration:underline;text-underline-offset:3px} /* ボタンは a,button{min-height:44px}（485行）で箱が高く、文字の上下が空くため、外側の余白で詰める */ .subsidy-card__more + .subsidy-card__note{margin-top:6px} .subsidy-card__municipalities:focus{outline:none} .subsidy-card__note{margin:20px 0 0;color:var(--subsidy-muted);font-size:13px;line-height:1.7} .subsidy-card__link{ display:flex; position:relative; align-items:center; justify-content:center; gap:10px; width:100%; min-height:58px; margin-top:22px; padding:13px 46px 13px 18px; color:var(--subsidy-pink-dark); background:#fff; border:1.5px solid var(--subsidy-pink); border-radius:14px; font-size:16px; font-weight:700; line-height:1.5; text-align:center; text-decoration:none; transition:background-color .2s ease,color .2s ease; } .subsidy-card__link:hover,.subsidy-card__link:focus-visible{color:#fff;background:var(--subsidy-pink);outline:none} .subsidy-card__arrow{position:absolute;top:50%;right:20px;width:10px;height:18px;transform:translateY(-50%)} @media(max-width:480px){ .subsidy-card{padding:22px 18px 20px;border-radius:16px} .subsidy-card__header{align-items:flex-start;gap:10px} .subsidy-card__info-icon{flex-basis:34px;width:34px;height:34px;margin-top:1px} .subsidy-card__info-icon svg{width:20px;height:20px} .subsidy-card__title{font-size:20px;line-height:1.5} .subsidy-card__description{margin-top:18px;font-size:14px;line-height:1.8} .subsidy-card__body{margin-top:20px;padding-top:20px} .subsidy-card__heading{font-size:17px} .subsidy-card__heading::before{height:24px} .subsidy-card__municipalities{gap:8px;margin-top:16px} .subsidy-card__municipality{min-width:0;padding:8px 14px;font-size:14px} .subsidy-card__more{margin-top:0;font-size:14px} .subsidy-card__more + .subsidy-card__note{margin-top:4px} .subsidy-card__note{margin-top:16px;font-size:12px} .subsidy-card__link{min-height:54px;margin-top:18px;padding-right:40px;font-size:14px} .subsidy-card__arrow{right:17px} } /* 利用条件へ移した自己負担額の目安。ピンクのままか黒に揃えるかは No.29 で決める。 値の欄は既定が display:flex で、金額・自治体・注記が横3列に割れるため block に戻す。 ラベルはスマホの108px列で「安」1文字だけ折り返すので、 の位置（自己負担額／の目安）でだけ折る */ .usage-condition-value.usage-copay{display:block} .usage-copay-label{word-break:keep-all} .usage-copay-amount{color:var(--coral);font-weight:800} .usage-copay-note{display:block;margin-top:2px;color:var(--muted);font-size:12px} /* 施設名の上のタグは .chips>.chip:nth-child(1〜4) で色と枠線を番号で当てている（9行）。 「おすすめ」を4番目に入れたため、番号に頼らず2つのタグの枠線をクラスで当て直す */ .chips>.chip.recommend{border:1px solid #f2b322} .chips>.chip.coral{border:1px solid #9fd2cf} /* 5個になり、スマホで「助成金対象」だけ2段目に落ちていた（390pxで 合計338+間隔32=370 > 358）。 左右の余白と間隔を詰めて1段に収める */ @media(max-width:420px){ .facility-headline .chips{gap:6px!important} .facility-headline .chips>.chip{padding:5px 7px!important} } @media(max-width:370px){ .facility-headline .chips{gap:5px!important} .facility-headline .chips>.chip{padding:5px 6px!important} } /* 委託施設カードの見出し：受領HTMLは481px以上で最大28px。h1 が600px以下で27pxに下がるため、 481〜600pxで見出しが施設名より大きくなる。600px以下は受領HTMLのスマホ値（20px）に揃える */ @media(max-width:600px){ .subsidy-card__title{font-size:20px;line-height:1.5} /* 見出しと同じ20pxにならないよう、小見出しも受領HTMLのスマホ値に揃える */ .subsidy-card__heading{font-size:17px} .subsidy-card__heading::before{height:24px} } /* 見出し・キャッチの最終行が「す」「す。」の1〜2文字だけになるのを避ける（文章は施設ごとに変わるため改行位置の指定では防げない）。 pretty では2〜3文字残ったため balance で行の長さを揃え、auto-phrase で文節の切れ目で折る（未対応ブラウザは従来どおり） */ .subsidy-card__title,.facility-lead-row .lead{text-wrap:balance;word-break:auto-phrase} /* PCの3ボタン：701〜808pxでキャッチの下へ落ちていたため、キャッチの基準幅を詰める。 701〜900px はタッチ端末の幅なので、サイト共通の押せる高さ44pxに揃える */ .facility-lead-row .lead{flex-basis:240px} @media(min-width:701px) and (max-width:900px){ .actions.actions-pc .btn{min-height:44px!important} } /* スマホの「料金」タブだけ9px・字間詰めになっていた（「料金・クーポン」を収めるための 632行の指定）。 名前が短くなったので他のタブと同じ大きさに戻す */ @media(max-width:700px){ .page-tabs .page-tab:nth-child(2){ padding-left:2px!important; padding-right:2px!important; font-size:11px!important; letter-spacing:normal!important; } } /* 2026-09-30 玉井さん指示（8/30 PDF「施設情報タブ」）と、その後の調整 ・基本情報を口コミの後ろへ移したので、タブ直下の利用条件は上余白を詰め、基本情報には他のセクションと同じ44pxを付ける ・こだわりは写真だけを左上と右下で大きく丸め、本文はベージュの箱から出してページの地色の上に置く（見本どおり） ・スタッフ紹介・口コミ・アクセス・近くの施設の外枠を外す（中の口コミ1件ずつの枠は残す） ・セクションの区切りは罫線を使わず44pxの空白だけにそろえ、見出しの左端もそろえる（見本どおり） */ #basic-panel .sgn-tab-head + .usage-conditions-card{margin-top:0!important} #basic-info{margin-top:44px!important} .preference-story,.gallery-section-cardless,.staff-section-cardless{padding-top:0!important;padding-bottom:0!important;border-top:0!important;border-bottom:0!important} .preference-story-heading{padding-left:0!important} .gallery-section-cardless,.gallery-section-cardless .title-row{padding-left:0!important;padding-right:0!important} .preference-story-visual{border-radius:0!important;background:transparent!important;overflow:visible!important;min-height:0!important} .preference-story-visual img{border-radius:96px 0!important} .preference-story-copy{padding:20px 0 0!important} .staff-feature{border:0!important;padding:0!important;background:transparent!important} #basic-reviews,#access,#facility-posts{border:0!important;border-radius:0!important;padding:0!important;background:transparent!important} .nearby-facilities{margin-top:44px!important;border:0!important;border-radius:0!important;padding:0!important;background:transparent!important;box-shadow:none!important} /* 利用条件の注記：行全体のボタンをやめ、「詳しくは各プラン詳細をご覧ください。」の文字だけをリンクにした（右端の矢印も削除）。見た目は旧 .usage-condition-note-link strong と同じ。 スマホで語の途中（「各プ／ラン」など）で折れないよう、リンクはひとまとまりで折り返す */ @media(max-width:700px){ .preference-story-visual img{border-radius:56px 0!important} #basic-info{padding-top:0!important;padding-bottom:0!important} .usage-conditions-card{padding-bottom:0!important} } /* 2026-09-30 玉井さん指示（9/30）：委託施設の枠を助成金タブの先頭へ移し、キャッチコピーを消した。 空いた分、施設名の右の満足度ゲージを大きくする。数字は施設名（38／32／27px）より大きくしない */ @media(min-width:901px){ .facility-head-row .rating-gauge-inline .gauge{width:180px;height:106px} .facility-head-row .rating-gauge-inline .gauge .score{font-size:34px} .facility-head-row .rating-gauge-inline .gauge .score span{font-size:19px} } @media(min-width:601px) and (max-width:900px){ .facility-head-row .rating-gauge-inline .gauge{width:165px;height:97px} } @media(max-width:600px){ .facility-head-row .rating-gauge-inline .gauge{width:138px;height:81px} } /* 助成金タブの先頭の委託施設枠。上のお知らせ枠と間を空け、タイトルはタブの見出し「助成金申請」（24／21px）より小さくする */ #access-panel > .subsidy-card{margin-top:22px} #access-panel .subsidy-card__title{font-size:20px} /* 2026-10-01 玉井さん指示（9/30。8/20 PDF「料金・プランタブ」右側の画像）：プランカードを作り直し（.pr-card）。 左＝名前・説明・「項目名｜テキスト」の行、右＝価格の箱＋ボタン。 助成金対象は種別の3色・アイコン・通常料金・詳細を見る（種別ページ）。 文字色は項目名チップの地（--pr-soft）の上で4.5:1以上になる濃さ（宿泊4.64／通所4.73／訪問5.09／ピンク4.91）。 コースメニュー／教室・交流会は写真を左に置き、色はピンク・価格の箱は白（PDFの「ピンク色はなしで白に統一」）。 価格の箱はカードの中に浮いた角丸の箱（PDFの画像）。 旧 .plan-card のCSSは detail.html 内の #pricing-doc の