/* ========================================================= components.css — 横断的に再利用する UI 部品 （セクション固有の装飾は各テンプレートのインラインに残す方針） ========================================================= */ /* ---- 主要CTAボタン（teal） ---- */ .cs-cta{ width:100%;border:none;background:var(--cs-primary);color:#fff;cursor:pointer; padding:14px 16px;border-radius:16px;box-shadow:var(--cs-shadow-cta); display:flex;flex-direction:column;align-items:center;gap:3px; text-decoration:none;text-align:center; } .cs-cta:hover{color:#fff;filter:brightness(1.02)} .cs-cta[aria-disabled="true"]{opacity:.55;pointer-events:none;box-shadow:none} .cs-cta__main{font-weight:900;font-size:16px;line-height:1.35} .cs-cta__sub{font-size:11px;font-weight:700;letter-spacing:.1em;opacity:.95} /* ---- セクション見出し ---- */ .cs-eyebrow{display:block;font-size:12px;font-weight:700;color:var(--cs-primary-deep);letter-spacing:.06em;margin-bottom:6px} .cs-sec-head{text-align:center;margin-bottom:20px} .cs-sec-head h2{font-size:22px;font-weight:900;color:var(--cs-ink);line-height:1.45;margin:0 0 8px} .cs-sec-head p{margin:0;font-size:12.5px;color:var(--cs-sub);line-height:1.6} /* ---- タグ（保険適用 等のピル） ---- */ .cs-pill{display:inline-block;background:var(--cs-mint);color:var(--cs-primary-ink);font-weight:700;font-size:11.5px;padding:5px 12px;border-radius:var(--cs-r-pill)} /* マーカー下線 */ .cs-mark{background:linear-gradient(transparent 62%,var(--cs-hl) 62%)} /* リスト右矢印 */ .cs-arrow{flex:none;color:var(--cs-arrow);font-size:20px;font-weight:900;line-height:1} /* ---- アコーディオン（SEO / FAQ 共通） ---- */ .cs-acc{border-radius:var(--cs-r-md);background:#fff} .cs-acc + .cs-acc{margin-top:10px} .cs-acc__q{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;padding:15px 16px;cursor:pointer;text-align:left;font-family:inherit;font-size:13.5px;font-weight:800;color:var(--cs-ink);line-height:1.5} .cs-acc__q .cs-acc__mark{margin-left:auto;flex:none;color:var(--cs-primary-deep);font-size:18px;font-weight:900;transition:transform .25s} .cs-acc[open] .cs-acc__q .cs-acc__mark,.cs-acc__q[aria-expanded="true"] .cs-acc__mark{transform:rotate(45deg)} .cs-acc__body{padding:0 16px 15px;font-size:13px;line-height:1.85;color:var(--cs-body)} /* ---- ドロワー内ナビ ---- */ .cs-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px} .cs-drawer__close{background:var(--cs-mint);border:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--cs-primary-ink);font-size:16px;font-weight:900;line-height:1} .cs-drawer__body{overflow-y:auto;flex:1;padding:0 18px 24px} .cs-drawer__cta{display:flex;flex-direction:column;gap:10px;margin-bottom:20px} .cs-drawer__links{display:flex;flex-direction:column;border-top:1px solid var(--cs-line-2)} .cs-drawer__links a{display:flex;justify-content:space-between;align-items:center;padding:14px 2px;border-bottom:1px solid var(--cs-line-2);font-size:13.5px;font-weight:700;color:var(--cs-ink)} .cs-drawer__group{margin-top:20px} .cs-drawer__group-t{font-size:11px;font-weight:800;color:var(--cs-primary-deep);letter-spacing:.04em;margin-bottom:10px} .cs-drawer__tags{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12.5px;font-weight:500} .cs-drawer__tags a{color:var(--cs-body-2)} /* body スクロールロック（ドロワー展開時） */ .cs-app.is-drawer-open{overflow:hidden} /* ---- 休診・受付停止時のCTA表記（非活性） ---- */ .cs-cta--closed{background:#eef2f1;color:#7d8d89;cursor:default;pointer-events:none;box-shadow:none;border:1px solid #dbe8e4} .cs-cta--closed .cs-cta__main{color:#5a6e6a;font-weight:800} .cs-cta--closed .cs-cta__sub{color:#9aa5a1;opacity:1;font-weight:600;letter-spacing:normal} /* ---- 薬剤チップ（クリックでスライド連動・アクティブ強調） ---- */ .cs-med-chip{transition:background .15s,color .15s,border-color .15s} .cs-med-chip.is-active{background:#0f9b8e !important;color:#fff !important;border-color:#0f9b8e !important} /* ---- 薬剤ページ 禁忌など医療リスト（赤い箇条ドットで明確な箇条書きに） ---- */ .cs-med-list ul{list-style:none;padding-left:2px;margin:0} .cs-med-list li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.9;color:#6b3a38;margin:2px 0} .cs-med-list li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:#d0453f} /* ---- 本文リストの視認性（base.css が list-style:none のため中点を補う） ---- .cs-med-list（既に赤中点あり）は :not() で対象外＝二重中点を防止。 中点は先頭行に上寄せ配置＋ぶら下げインデントで、複数行にまたがる項目も自然に折り返す。 */ .cs-abody:not(.cs-med-list) ul:not(.cs-longlist){list-style:none;margin:8px 0 14px;padding-left:2px} .cs-abody:not(.cs-med-list) ul:not(.cs-longlist) > li{position:relative;padding-left:16px;margin:6px 0;line-height:1.85} .cs-abody:not(.cs-med-list) ul:not(.cs-longlist) > li::before{content:"";position:absolute;left:3px;top:.68em;width:6px;height:6px;border-radius:50%;background:#2bb3a4} .cs-abody:not(.cs-med-list) ol{list-style:decimal;margin:8px 0 14px;padding-left:1.5em} .cs-abody:not(.cs-med-list) ol > li{margin:6px 0;line-height:1.85} /* ---- 長文（複数行）を含む文章リスト：チェックリスト様式（緑チェックマーク＋カード） ---- 生成側が