/* C案だけのスタイル。共通は ../shared/base.css */

/* 固定ヘッダーの下に隠れないように */
#form, #price, #contact { scroll-margin-top: 72px; }

/* 押しやすさ：タップ領域を48px以上に（base.css はヘッダー38px・チップ44px） */
.sb-header .sb-btn { min-height: 48px; }
.sb-chip span { min-height: 48px; }

/* C案は画面下の固定CTAが無いので、フッター下の余白を詰める */
.sb-footer { padding-bottom: 40px; }

/* 1 FV */
.c-fv { padding-top: 32px; }
.c-fv__sub { margin: 12px 0 0; font-weight: 700; font-size: 15px; }
.c-fv__img { margin-top: 20px; min-height: 180px; }

/* 2 向いているお店 */
.c-fit li { font-weight: 500; }
.c-notice { margin: 20px 0 0; padding: 14px 16px; background: #fff; border-left: 4px solid var(--sb-blue); border-radius: 0 8px 8px 0; font-size: 14px; color: var(--sb-text); }

/* 3 料金 */
.c-plans { display: grid; gap: 12px; }
@media (min-width: 500px) { .c-plans { grid-template-columns: 1fr 1fr; } }
.c-plan { border: 1.5px solid var(--sb-line); border-radius: var(--sb-radius); padding: 16px; background: #fff; }
.c-plan__name { margin: 0; font-weight: 700; font-size: 16px; color: var(--sb-sub); }
.c-plan .sb-price { margin: 2px 0 10px; font-size: 15px; }
.c-plan__list { margin: 0; padding: 10px 0 0; list-style: none; border-top: 1px solid var(--sb-line); font-size: 14px; display: grid; gap: 4px; }
.c-plan__list li { position: relative; padding-left: 18px; }
.c-plan__list li::before { content: "・"; position: absolute; left: 0; color: var(--sb-blue); font-weight: 700; }
.c-common { margin-top: 14px; padding: 14px 16px; border-radius: var(--sb-radius); background: var(--sb-pale); }
.c-common__title { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.c-common__list { margin: 0; display: grid; gap: 6px; font-size: 14px; }
.c-common__list div { display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; }
.c-common__list dt { color: var(--sb-sub); }
.c-common__list dd { margin: 0; font-weight: 700; }

/* 4 流れ */
.c-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.c-flow::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--sb-line); }
.c-flow li { position: relative; display: flex; align-items: center; gap: 12px; }
.c-flow__no { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--grad-blue); color: #fff; font-weight: 700; display: grid; place-items: center; position: relative; }
.c-flow li > div { flex: 1; background: #fff; border: 1px solid var(--sb-line); border-radius: 8px; padding: 10px 14px; }
.c-flow b { display: block; }
.c-flow small { display: block; font-size: 12px; color: var(--sb-sub); }

/* 5 役割分担 */
.c-roles { display: grid; gap: 12px; }
.c-role { border-radius: var(--sb-radius); padding: 16px; }
.c-role ul { margin: 0; padding-left: 1.2em; font-size: 15px; }
.c-role li + li { margin-top: 4px; }
.c-role--shop { background: #fff; border: 1.5px solid var(--line); }
.c-role--sb { background: var(--sb-pale); border: 1.5px solid var(--sb-blue); }
.c-role--sb .sb-h3 { color: var(--sb-blue-dark); }
.c-role__note { margin: 10px 0 0; font-size: 13px; color: var(--sb-sub); }

/* 6 事例 */
.c-case__lead { margin: -4px 0 8px; font-size: 13px; color: var(--sb-sub); }
.sb-case__img { min-height: 0; }

/* 8 フォーム */
.c-quick { margin: -6px 0 14px; font-size: 14px; }
.c-quick a { font-weight: 700; display: inline-block; padding: 12px 0; }
.c-tel { margin: 16px 0 0; font-size: 13px; color: var(--sb-sub); text-align: center; }
.c-tel a { font-weight: 700; font-size: 16px; display: inline-block; padding: 12px 4px; }

/* 画像 */
.c-fv__img { display: block; width: 100%; height: auto; border-radius: 12px; }
.sb-case__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ===== v2（2026-11-10）テンプレ感を減らす上書き ===== */
.c-fv { border-bottom: 1px solid var(--line); }
.c-notice { background: none; border-left: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 14px 0 0; color: var(--sub); }
.c-plan { border-radius: 6px; border-width: 1px; }
.c-plan:last-child { border: 2px solid var(--text); }
.c-common { background: none; border-top: 2px solid var(--text); border-radius: 0; padding: 12px 0 0; }
.c-common__list { gap: 0; }
.c-common__list div { padding: 8px 0; border-bottom: 1px dotted var(--line); }
.c-flow { gap: 0; border-top: 2px solid var(--text); }
.c-flow::before { display: none; }
.c-flow li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.c-flow__no { width: 2.2em; height: auto; background: none; color: var(--blue-dark); display: block; }
.c-flow__no::before { content: "0"; }
.c-flow li > div { background: none; border: 0; padding: 0; }
.c-role { border-radius: 0; padding: 14px 0 0; }
.c-role--shop, .c-role--sb { background: none; border: 0; border-top: 2px solid var(--text); }
.c-role--sb .sb-h3 { color: var(--text); }

/* 11/11 夜：FVを実写写真に（管理画面は「できること」の下へ） */
.c-fv__photo { position: relative; margin: 18px -20px 0; }
.c-fv__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.c-fv__photo figcaption { position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.6); }
.c-fv__photo + .c-fv__sub { margin-top: 16px; }
.c-roles__shot { margin-top: 18px; }
.c-roles__shot img { max-width: 320px; margin: 0 auto; display: block; }
.c-roles__shot:last-of-type img { max-width: none; }