/* ミエルーム「機能の使い方」ページ（mieroom/guide/*.html）
ブログ記事と同じ site.css の部品（post-hero / post-body / inline-cta）に、手順・実画面・関連機能を足す */
/* 見出しまわり：トップの機能カードと同じ線画を添える */
.g-head{display:flex;align-items:center;gap:18px;margin-top:4px}
.g-icon{width:132px;height:auto;flex:none;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.g-head-text{min-width:0}
.g-label{font-family:"Zen Kaku Gothic New";font-weight:900;font-size:12px;letter-spacing:.14em;color:var(--blue);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.g-opt{letter-spacing:.04em;font-size:11.5px;padding:3px 10px;border-radius:999px;background:var(--amber-soft);color:#8f5c00;border:1px solid #f1d9a8}
.g-page .post-hero h1{margin-top:6px}
.g-page h1 .ph,.g-page h2 .ph,.callout .ct .ph{display:inline-block} /* 「◯◯の使い方」「この機能で／できること」などの見出しを、文節の切れ目でだけ折り返す */
body{word-break:auto-phrase} /* 対応ブラウザ（Chrome・Edge など）では、本文も見出しもフッターも文節の切れ目で折り返す（「くださ／い。」を防ぐ）。Safari などは guide.js が補う */
.og{white-space:nowrap} /* 末尾の数文字を次の行に落とさない（ビルド時に付ける。フッターにも使う） */
.g-lead{margin:18px 0 0;font-size:16px;line-height:1.95;color:var(--ink-2);font-weight:500}
/* 実画面 */
.g-cover{max-width:920px;margin:28px auto 0;padding:0 24px}
.g-shot{margin:16px 0 4px}
.g-shot a{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;transition:transform .25s var(--ease-soft),box-shadow .25s}
.g-shot a:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.g-shot img{display:block;width:100%;height:auto}
.g-shot--tall a{max-width:340px;margin:0 auto}
.g-shot--hero{margin:0}
.g-note{margin:10px 0 0;font-size:12px;color:var(--ink-3);text-align:center}
/* メニューの場所 */
.g-where{margin:16px 0 0;padding:12px 16px;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;font-size:14px;line-height:1.8;color:var(--ink)}
.g-where .g-where-l{display:block;margin:0 0 2px;font-family:"Zen Kaku Gothic New";font-weight:900;font-size:12px;color:var(--blue-d);letter-spacing:.06em}
/* こんな困りごと：チェックではなく「!」の印 */
.post-body ul.g-pains li::before{background:var(--peach-soft)}
.post-body ul.g-pains li::after{content:"!";left:6px;color:var(--peach-d)}
/* 使い方の手順（記事本文の番号付きリストの自動番号は使わない） */
.post-body ol.g-steps{margin:10px 0 8px;gap:30px}
.post-body ol.g-steps li{padding-left:0;font-size:inherit}
.post-body ol.g-steps li::before{content:none}
.g-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.g-num{width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:"Zen Kaku Gothic New";font-weight:900;font-size:19px;box-shadow:0 8px 18px -8px rgba(20,160,133,.7)}
.post-body .g-step h3{margin:7px 0 6px;font-size:19px;line-height:1.5}
.post-body .g-step p{margin:0}
/* あわせて使いたい機能 */
.g-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.g-rel{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink);text-decoration:none;transition:transform .25s var(--ease-soft),box-shadow .25s}
.g-rel:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.g-rel img{display:block;width:100%;height:auto;aspect-ratio:3/2;border-bottom:1px solid var(--line)}
.g-rel-body{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;line-height:1.5}
.g-rel-no{font-family:"Zen Kaku Gothic New";font-weight:900;font-size:10.5px;letter-spacing:.12em;color:var(--blue)}
.g-rel-name{font-family:"Zen Kaku Gothic New";font-weight:900;font-size:15px}
.g-rel-catch{font-size:12px;color:var(--ink-3)}
.g-back{margin:26px 0 0;font-size:14px}
.g-page{padding-bottom:72px} /* 最後の申込ボックスとフッターの間をあける */
.g-back a{color:var(--blue-d);font-weight:700}
@media(max-width:680px){
.g-page{padding-bottom:48px}
.g-head{flex-direction:column;align-items:flex-start;gap:12px} /* スマホは線画を見出しの上に置いて、見出しの幅を広く取る */
.g-icon{width:112px;border-radius:12px}
.g-lead{font-size:15px}
.g-cover{padding:0 16px;margin-top:22px}
/* スマホは「番号＋見出し」を1行にして、説明文と画面は横幅いっぱいに使う */
.g-step{grid-template-columns:34px minmax(0,1fr);column-gap:10px;row-gap:8px}
.g-step-body{display:contents}
.g-num{width:34px;height:34px;font-size:16px;grid-row:1}
.post-body .g-step h3{grid-column:2;grid-row:1;align-self:center;font-size:17px;margin:0}
.post-body .g-step p,.g-step .g-shot{grid-column:1/-1}
.g-related{grid-template-columns:minmax(0,1fr);gap:10px}
.g-rel{flex-direction:row;align-items:center}
.g-rel img{width:116px;flex:none;border-bottom:0;border-right:1px solid var(--line)}
}
/* 見出し・質問・関連機能の名前は、行の長さをそろえて折り返す（2行目だけ短くならないように） */
.g-page summary,.post-body .g-step h3,.g-rel-name{text-wrap:balance}
/* ヘッダーの折り返し対策は共通の site.css に移した（2026-09-25） */
/* 末尾の申込ボックス：狭いスマホでボタンが箱の縁に付かないように、余白を詰めてボタンを箱の幅いっぱいにする */
@media(max-width:400px){
.inline-cta .box{padding:26px 20px}
.inline-cta .box .btn{width:100%;justify-content:center}
}