/* 機能 03〜08 の実画面(HOME・B・C共通。2026-10-09 代表指示「商圏分析とかその他も実際の画面のほうがいいやろ」Issue #85)。
   ⚠️ 以前の実画面は大きな画面を丸ごと縮小して字が潰れていた。PCではカードを横幅いっぱいにし、画像は撮影時の幅
      (--w)より大きくも小さくもしすぎない。スマホはカード幅いっぱいに縦に並べる(横スクロールさせない)。
   ⚠️ 画像に aspect-ratio・object-fit を付けない(c.css の .c-f-shot img の切り抜きを受けないよう、figure に c-f-shot を付けていない)。 */
@media(min-width:768px){.c-f-list>.c-f:has(.c-f-real){grid-column:1/-1}}
.c-f-real{margin:0 0 12px}
.c-real-panels{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:flex-start}
.c-real-panel{flex:0 1 var(--w);max-width:100%;min-width:0}
.c-real-label{font-size:14px;font-weight:800;color:#007545;margin:0 0 6px}
.c-real-open{position:relative;display:block;width:100%;padding:0;border:1px solid #dfe7ea;border-radius:10px;background:#fff;overflow:hidden;cursor:zoom-in;font:inherit;color:inherit;text-align:left}
.c-real-open picture,.c-real-open img{display:block;width:100%;height:auto}
.c-real-zoom{position:absolute;right:8px;bottom:8px;background:#18242ccc;color:#fff;font-size:12px;font-weight:700;line-height:1.7;border-radius:999px;padding:1px 10px}
.c-real-open:focus-visible{outline:3px solid #e8a628;outline-offset:3px}
.c-f-real figcaption{font-size:13px;color:var(--muted);margin-top:8px}
@media(max-width:767px){.c-real-panel{flex-basis:100%}.c-real-panels{gap:14px}}
/* 拡大表示。どこを1回押しても閉じる(Escはブラウザ標準)。申込フォームのダイアログとは別の要素。 */
.c-shot-viewer{padding:0;margin:0;border:0;background:transparent;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;overflow:auto;overscroll-behavior:contain;cursor:zoom-out}
.c-shot-viewer::backdrop{background:#0b1418eb}
.c-shot-viewer img{display:block;max-width:none;height:auto;margin:60px auto 12px;background:#fff;border-radius:8px}
.c-shot-close{position:fixed;top:10px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.c-shot-close:focus-visible{outline:3px solid #e8a628;outline-offset:2px}
.c-shot-note{text-align:center;color:#fff;font-size:12px;margin:0 0 24px}