/* 開発例の詳しいページ（/examples/<slug>） */
.guide{padding:110px 7% 90px;background:linear-gradient(180deg,var(--cloud) 0,#fff 420px)}
.g-crumb ol{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12.5px;font-weight:700;color:var(--muted)}
.g-crumb li+li:before{content:"/";margin-right:10px;color:var(--line)}
.g-crumb a{color:var(--blue-600)}
.g-article{max-width:46em;margin:0 auto}
.g-no{display:inline-block;font-family:var(--font-latin);font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--blue-600)}
.g-head h1{margin:10px 0 18px;font-size:clamp(26px,3.2vw,40px);line-height:1.35;font-weight:900;letter-spacing:-.01em;color:var(--navy);word-break:auto-phrase;text-wrap:balance}
.g-lead{margin:0 0 14px;font-size:16.5px;line-height:2;color:var(--ink);word-break:auto-phrase}
.g-meta{margin:0 0 10px;font-size:12.5px;font-weight:700;color:var(--muted)}
.g-disclaimer{margin:0 0 22px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1.8;color:var(--muted);word-break:auto-phrase}
.g-cta{margin-bottom:8px}
.g-toc{margin:30px 0 8px;padding:20px 24px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.g-toc b{display:block;margin-bottom:8px;font-size:13px;color:var(--navy)}
.g-toc ol{margin:0;padding-left:1.4em;display:grid;gap:4px;font-size:14px}
.g-toc a{color:var(--blue-600)}
.g-sec{margin-top:44px;scroll-margin-top:100px}
.g-sec h2{margin:0 0 16px;padding-left:14px;border-left:4px solid var(--accent);font-size:clamp(21px,2.2vw,26px);line-height:1.45;font-weight:900;color:var(--navy);word-break:auto-phrase}
.g-sec p{margin:0 0 14px;font-size:16px;line-height:2;color:var(--ink);word-break:auto-phrase}
.g-sec ul{margin:0 0 14px;padding-left:1.3em;display:grid;gap:8px}
.g-sec li{font-size:16px;line-height:1.9;color:var(--ink);word-break:auto-phrase}
.g-ref{margin-left:3px;font-size:11px;font-weight:800;color:var(--blue-600);vertical-align:super;text-decoration:none}
.g-hours-v{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;padding:18px 22px;border-radius:18px;background:var(--navy);color:#fff}
.g-hours-v span{font-size:14px;font-weight:700;color:#CFE7FF;word-break:auto-phrase}
.g-hours-v b{font-size:24px;font-weight:900}
.g-hours-note{margin-top:10px!important;font-size:13px!important;line-height:1.8!important;color:var(--muted)!important}
.g-faq details{border-bottom:1px solid var(--line)}
.g-faq summary{display:flex;justify-content:space-between;gap:12px;padding:16px 0;font-size:16px;font-weight:800;color:var(--navy);cursor:pointer;list-style:none;word-break:auto-phrase}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq details[open] summary span{transform:rotate(45deg)}
.g-faq details p{margin:0 0 16px}
.g-src ol{margin:0;padding-left:1.4em;display:grid;gap:10px}
.g-src li{font-size:14px;line-height:1.7}
.g-src a{color:var(--blue-600);font-weight:700;word-break:break-word}
.g-src small{display:block;font-size:11.5px;color:var(--muted);word-break:break-all}
.g-end{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:52px;padding:28px;border-radius:24px;background:var(--cloud)}
.g-end p{flex-basis:100%;margin:0;font-size:15px;font-weight:700;color:var(--navy)}
@media(max-width:760px){.guide{padding:90px 16px 70px}.g-cta,.g-end .button{width:100%;justify-content:center}.g-sec p,.g-sec li,.g-faq summary{font-size:15px}.g-end{padding:20px}}
nav.g-toc,nav.g-crumb{display:block}
/* コラムの一覧・あわせて読む */
.col-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.col-list a{display:grid;gap:6px;padding:22px 24px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.col-list a:hover{border-color:var(--sky);box-shadow:var(--shadow-sm)}
.col-list b{font-size:18px;line-height:1.5;font-weight:900;color:var(--navy);word-break:auto-phrase}
.col-list span{font-size:14px;line-height:1.8;color:var(--muted);word-break:auto-phrase}
.col-list em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:13.5px;font-weight:800;color:var(--blue-600)}
.g-rel ul{list-style:none;padding:0;display:grid;gap:8px}
.g-rel a{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--blue-600)}