/* =========================================================
   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}