/* 使い方ページ。色・ヘッダー・フッターは LP の style.css を使い、ここでは本文の配置だけを持つ。 */
.g-main{padding-block:8px 72px}
.g-crumbs{font-size:12px;color:var(--muted);margin:0 0 22px}
.g-crumbs a{text-decoration:none}.g-crumbs a:hover{text-decoration:underline}
.g-title{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.03em;line-height:1.4;margin:0}
.g-lead{font-size:16px;color:var(--muted);margin:12px 0 0}
/* 一覧 */
.g-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:40px}
.g-card{display:block;text-decoration:none}
.g-card img,.g-figure img{width:100%;aspect-ratio:36/25;background:#f4f6f3;border-radius:12px}
.g-card h2,.g-card h3{font-size:16px;line-height:1.55;letter-spacing:-.01em;margin:16px 0 0}
.g-card p{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.7}
.g-card:hover h2,.g-card:hover h3{text-decoration:underline;text-underline-offset:4px}
/* 記事 */
.g-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:56px;align-items:start;margin-top:48px;padding-top:40px;border-top:1px solid var(--line)}
.g-block h2{font-size:22px;letter-spacing:-.02em;margin:0 0 20px}
.g-block p{font-size:15px;margin:0 0 10px;line-height:1.8}
.g-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.g-steps li{counter-increment:s;position:relative;padding:0 0 22px 46px}
.g-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.g-steps li:not(:last-child)::after{content:"";position:absolute;left:14.5px;top:34px;bottom:4px;width:1px;background:var(--line)}
.g-steps b{display:block;font-size:16px;line-height:1.9}
.g-steps span{display:block;font-size:14px;color:var(--muted);line-height:1.7}
.g-figure figcaption{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.6}
.g-note{background:var(--ground);border-radius:12px;padding:22px 24px;margin-top:48px}
.g-note h2{font-size:15px;margin:0 0 8px}
.g-note ul{margin:0;padding-left:1.2em}
.g-note li{font-size:14px;line-height:1.8}
.g-next{margin-top:56px}
.g-next>h2{font-size:17px;margin:0}
.g-next .g-cards{grid-template-columns:repeat(3,minmax(0,1fr));max-width:860px;margin-top:18px;gap:20px}
.g-next .g-card h3{font-size:15px;margin-top:12px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
@media(max-width:860px){.g-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.g-card h2{font-size:14px}.g-card p{font-size:12px}.g-block{grid-template-columns:1fr;gap:24px;margin-top:36px;padding-top:30px}.g-main{padding-bottom:48px}.g-next .g-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}.g-next .g-card h3{font-size:13px}}
.g-video{max-width:320px;justify-self:center}.g-video video{display:block;width:100%;height:auto;border-radius:12px;background:#f4f6f3}.g-video figcaption{text-align:center}