/* ご利用ガイド（予約アプリの本文をそのまま掲載）。配色はサイトのトーンに合わせる */
.gd-page { max-width: 760px; margin: 0 auto 40px; padding: 0 16px; }
.gd-inner { --line: #e3dcda; --ink: #2e2926; --brown: #806d6d; --accent: #b89590; color: #2e2926; font-size: .95rem; line-height: 1.8; }
.gd-inner p { margin: 0 0 8px; }
.ct-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 0 0 14px; }
.ct-h { margin: 0 0 8px; font-size: 1.02rem; color: var(--ink); padding-left: 9px; border-left: 4px solid var(--accent); }
.ct-sh { margin: 14px 0 6px; font-size: 0.92rem; color: var(--brown); }
.ct-list { margin: 0; padding-left: 1.3em; font-size: 0.92rem; line-height: 1.8; }
.ct-note { font-size: 0.82em; color: #888; }
.gd-img { display: block; width: 100%; height: auto; border-radius: 10px; margin: 4px 0 10px; border: 1px solid var(--line); }
.gd-p { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.75; }
.gd-shot { width: min(250px, 72%); margin: 8px auto 6px; }
.gd-p:last-child { margin-bottom: 0; }
.gd-warn { color: #b3261e; font-weight: 700; font-size: 0.88em; }
.gd-no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #8d6fa4; color: #fff; font-size: 0.9rem; font-weight: 800; margin-right: 6px; vertical-align: -0.35em; }
.gd-lead { background: #f8f1fa; border: 1.5px solid #d5c2e0; }
.gd-lead .ct-h { border-left-color: #8d6fa4; }
.gd-flowbox { display: flex; align-items: stretch; gap: 4px; }
.gd-fb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #fff; border: 1.5px solid #c9b3d6; border-radius: 10px; padding: 9px 2px; text-align: center; font-size: 0.72rem; font-weight: 700; line-height: 1.35; color: #24242e; }
.gd-fb .gd-no { margin-right: 0; }
.gd-arrow { align-self: center; color: #8d6fa4; font-size: 0.85rem; flex: 0 0 auto; }
.gd-steps { margin: 0 0 10px; padding-left: 1.5em; font-size: 0.92rem; line-height: 1.8; }
.gd-steps li { margin-bottom: 4px; }
.gd-act { display: block; width: 100%; margin: 6px 0 4px; padding: 13px; background: var(--brown); color: #fff; border: none; border-radius: 10px; font-size: 0.98rem; font-weight: 700; font-family: inherit; cursor: pointer; }
.gd-act:active { opacity: 0.88; }
.gd-act.ghost { background: #fff; color: var(--brown); border: 1px solid var(--line); }
@media (max-width: 600px) { .gd-page { padding: 0 12px; } }