@charset "utf-8";
/* =========================================================
   mk-howto.css ── 使い方記事の部品（4つ）
   2026-08-27
   ---------------------------------------------------------
   なぜ作るか（実測 2026-08-27）
     ・mk-fig 93個の中身が5種類に分かれていた
         プロンプト34 ／ 箇条29 ／ 図17 ／ その他11 ／ 出力2
       全部おなじ見た目。CSS41枚に pre / mk-fig の指定は0件だった。
       → 読者は「貼るもの」と「ただの箇条書き」を見分けられない。
     ・競合のAI使い方系96本は、画像0枚が1本もない。
       手本＝デパート Notion AI：手順1つに操作画面1枚＋altあり。
       （MACROMANの19枚はイラスト。枚数を追うと外す）
     ・番号付きリストは競合の93%が使用。うちの本文は0。
   ---------------------------------------------------------
   使う色は記事の既存色に合わせる： #017cc8（青）/ #0f1524（黒）
   ========================================================= */

/* ---------------------------------------------------------
   ① プロンプト枠 …… AIに貼り付ける文字列
   <div class="mk-prompt"><pre>…</pre></div>
   --------------------------------------------------------- */
.mk .mk-artgrid__main .mk-prompt{
  position:relative;
  margin:28px 0 32px;
  padding:44px 24px 22px;
  background:#f7fbfe;
  border:1px solid rgba(1,124,200,.28);
  border-left:3px solid #017cc8;
  border-radius:6px;
}
.mk .mk-artgrid__main .mk-prompt::before{
  content:"AIに貼り付ける文";
  position:absolute; top:0; left:0;
  padding:5px 12px;
  background:#017cc8; color:#fff;
  font-size:11px; font-weight:700;
  letter-spacing:.08em; line-height:1;
  border-radius:5px 0 6px 0;
}
.mk .mk-artgrid__main .mk-prompt pre,
.mk .mk-artgrid__main pre.mk-prompt{
  margin:0;
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:15px; line-height:1.9; color:#0f1524;
  white-space:pre-wrap; word-break:break-word;
}
/* pre 自体に付けた場合 */
.mk .mk-artgrid__main pre.mk-prompt{
  padding:44px 24px 22px;
}
/* 補足（この文の狙い、など） */
.mk .mk-artgrid__main .mk-prompt__note{
  margin:14px 0 0; padding-top:12px;
  border-top:1px dashed rgba(1,124,200,.3);
  font-size:13.5px; line-height:1.8; color:#5a6472;
}

/* ---------------------------------------------------------
   ② 操作画面 …… 実際に撮ったキャプチャ。手順1つに1枚
   <figure class="mk-shot">
     <img src="…" alt="○○する場面">
     <figcaption>…</figcaption>
   </figure>
   --------------------------------------------------------- */
.mk .mk-artgrid__main .mk-shot{
  margin:26px 0 34px;
}
.mk .mk-artgrid__main .mk-shot img{
  display:block; width:100%; height:auto;
  border:1px solid #dfe6e8;
  border-radius:6px;
  background:#fff;
}
.mk .mk-artgrid__main .mk-shot figcaption{
  margin:10px 0 0;
  font-size:13px; line-height:1.75; color:#5a6472;
  padding-left:14px;
  border-left:2px solid #dfe6e8;
}
/* 画面の中の「ここを見る」印 */
.mk .mk-artgrid__main .mk-shot__mark{
  display:inline-block;
  min-width:20px; height:20px; margin-right:6px;
  background:#e8452c; color:#fff;
  font-size:12px; font-weight:700; line-height:20px;
  text-align:center; border-radius:50%;
}

/* ---------------------------------------------------------
   ③ 手順 …… 連番。競合93%が番号付き
   <ol class="mk-steps"><li><strong>…</strong><p>…</p></li></ol>
   --------------------------------------------------------- */
.mk .mk-artgrid__main ol.mk-steps{
  counter-reset:mkstep;
  list-style:none;
  margin:26px 0 32px; padding:0;
}
.mk .mk-artgrid__main ol.mk-steps > li{
  counter-increment:mkstep;
  position:relative;
  margin:0; padding:0 0 24px 52px;
}
.mk .mk-artgrid__main ol.mk-steps > li::before{
  content:counter(mkstep);
  position:absolute; left:0; top:1px;
  width:32px; height:32px;
  background:#017cc8; color:#fff;
  font-size:14px; font-weight:700; line-height:32px;
  text-align:center; border-radius:50%;
}
/* 縦線でつなぐ（最後は引かない） */
.mk .mk-artgrid__main ol.mk-steps > li::after{
  content:""; position:absolute;
  left:15px; top:38px; bottom:6px; width:1px;
  background:rgba(1,124,200,.25);
}
.mk .mk-artgrid__main ol.mk-steps > li:last-child{ padding-bottom:0 }
.mk .mk-artgrid__main ol.mk-steps > li:last-child::after{ display:none }
/* 手順の見出しは <p class="mk-steps__t">。
   ★<strong> は使わない。mk-mix-article.css:577 で
     「太字をやめてマーカーにする（決定）」となっており、
     打ち消すとその決定を壊すため。 */
.mk .mk-artgrid__main ol.mk-steps > li > .mk-steps__t{
  display:block; margin:4px 0 10px !important;
  font-size:17px !important;
  font-weight:700 !important;   /* 本文pのw400(!important)を上書きする */
  line-height:1.5 !important;
  color:#0f1524 !important; background:none;
}
.mk .mk-artgrid__main ol.mk-steps > li > p{ margin:0 0 12px }
.mk .mk-artgrid__main ol.mk-steps .mk-prompt,
.mk .mk-artgrid__main ol.mk-steps .mk-output,
.mk .mk-artgrid__main ol.mk-steps .mk-shot{
  margin-left:0; margin-right:0;
}
/* 手順の中では余白を詰める */
.mk .mk-artgrid__main ol.mk-steps .mk-prompt{ margin-top:14px; margin-bottom:6px }

/* ---------------------------------------------------------
   ④ 出力・エラー …… AIが返してきたもの。①と見分ける
   <div class="mk-output"><pre>…</pre></div>
   エラーは <div class="mk-output mk-output--error">
   --------------------------------------------------------- */
.mk .mk-artgrid__main .mk-output{
  position:relative;
  margin:24px 0 30px;
  padding:44px 24px 22px;
  background:#f4f5f7;
  border:1px solid #dfe1e5;
  border-left:3px solid #949391;
  border-radius:6px;
}
.mk .mk-artgrid__main .mk-output::before{
  content:"AIの返答";
  position:absolute; top:0; left:0;
  padding:5px 12px;
  background:#6a7280; color:#fff;
  font-size:11px; font-weight:700;
  letter-spacing:.08em; line-height:1;
  border-radius:5px 0 6px 0;
}
.mk .mk-artgrid__main .mk-output--error{
  background:#fdf6f5;
  border-color:rgba(232,69,44,.25);
  border-left-color:#e8452c;
}
.mk .mk-artgrid__main .mk-output--error::before{
  content:"画面に出るエラー"; background:#e8452c;
}
.mk .mk-artgrid__main .mk-output pre{
  margin:0;
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:14.5px; line-height:1.85; color:#333;
  white-space:pre-wrap; word-break:break-word;
}

/* ---------------------------------------------------------
   既存 mk-fig ……「図・箇条」専用に戻す。枠を与える
   （型の説明書には「枠」と書いてあったのに、CSSが無かった）
   --------------------------------------------------------- */
.mk .mk-artgrid__main pre.mk-fig{
  margin:22px 0 28px;
  padding:20px 22px;
  background:#fafafa;
  border:1px solid #e5e5e5;
  border-radius:6px;
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:14.5px; line-height:1.9; color:#0f1524;
  white-space:pre-wrap; word-break:break-word;
  overflow-x:auto;
}

/* ---- スマホ ---- */
@media (max-width:768px){
  .mk .mk-artgrid__main .mk-prompt,
  .mk .mk-artgrid__main pre.mk-prompt,
  .mk .mk-artgrid__main .mk-output{ padding:40px 16px 18px }
  .mk .mk-artgrid__main ol.mk-steps > li{ padding-left:42px }
  .mk .mk-artgrid__main ol.mk-steps > li::before{
    width:28px; height:28px; line-height:28px; font-size:13px }
  .mk .mk-artgrid__main ol.mk-steps > li::after{ left:13px }
}

/* =========================================================
   画像なしで分かりやすくする部品（2026-08-27 追加）
   ---------------------------------------------------------
   実測でわかったこと
     ・うちの12章のうち3章が「文字だけ」（向かないケース／
       よくある質問／うまくいかないとき）
     ・競合で画像3枚以下の119本を調べたが、表もulも
       画像が多い記事より少ない＝真似しても解決しない
   → 画像の代わりは「文章を足すこと」ではなく
     「文章のかたちを、意味のかたちに合わせること」
   ========================================================= */

/* ---------------------------------------------------------
   ⑤ 画面の見た目を文字で作る（UIモック）
   <div class="mk-ui">
     <p class="mk-ui__bar">Copilot に依頼</p>
     <div class="mk-ui__body">…</div>
   </div>
   --------------------------------------------------------- */
.mk .mk-artgrid__main .mk-ui{
  margin:26px 0 32px;
  border:1px solid #d9dee5;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 3px rgba(15,21,36,.06);
}
.mk .mk-artgrid__main .mk-ui__bar{
  margin:0 !important;
  padding:9px 14px !important;
  background:#f2f4f7;
  border-bottom:1px solid #e3e7ec;
  font-size:12.5px !important;
  font-weight:700 !important;
  color:#5a6472 !important;
  letter-spacing:.04em;
}
/* 信号機の点（Excelらしさではなく「画面である」印） */
.mk .mk-artgrid__main .mk-ui__bar::before{
  content:"";
  display:inline-block;
  width:8px; height:8px;
  margin:0 30px 2px 2px;      /* 右の余白で残り2つ分をよける */
  border-radius:50%;
  background:#cfd6de;
  box-shadow:13px 0 0 #cfd6de, 26px 0 0 #cfd6de;
  vertical-align:middle;
}
.mk .mk-artgrid__main .mk-ui__body{ padding:16px 16px 14px }
.mk .mk-artgrid__main .mk-ui__body p{ margin:0 0 8px }
.mk .mk-artgrid__main .mk-ui__body p:last-child{ margin-bottom:0 }
/* 入力欄に見せる */
.mk .mk-artgrid__main .mk-ui__input{
  padding:11px 14px !important;
  border:1px solid #c9d2dc;
  border-radius:6px;
  background:#fbfcfd;
  font-size:14.5px !important;
  color:#0f1524 !important;
  line-height:1.8 !important;
}
/* セル（表計算の見た目） */
.mk .mk-artgrid__main .mk-cells{
  width:100%; border-collapse:collapse;
  font-size:13.5px; font-variant-numeric:tabular-nums;
}
.mk .mk-artgrid__main .mk-cells th,
.mk .mk-artgrid__main .mk-cells td{
  border:1px solid #dfe3e8; padding:7px 10px; text-align:left;
  color:#0f1524;
}
.mk .mk-artgrid__main .mk-cells thead th{
  background:#eef1f5; font-weight:700; color:#5a6472;
  font-size:12px; text-align:center;
}
.mk .mk-artgrid__main .mk-cells tbody th{
  background:#f6f8fa; font-weight:400; color:#8a94a2;
  text-align:center; width:38px;
}
.mk .mk-artgrid__main .mk-cells .is-hit{ background:#fdecea; font-weight:700 }
.mk .mk-artgrid__main .mk-cells .is-new{ background:#eaf5fd }

/* ---------------------------------------------------------
   ⑥ 前後で比べる（左右2枚）
   <div class="mk-ba">
     <div class="mk-ba__x"><p class="mk-ba__t">…</p>…</div>
     <div class="mk-ba__o"><p class="mk-ba__t">…</p>…</div>
   </div>
   --------------------------------------------------------- */
.mk .mk-artgrid__main .mk-ba{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin:26px 0 32px;
}
.mk .mk-artgrid__main .mk-ba > div{
  padding:38px 16px 16px;
  border-radius:8px;
  position:relative;
  font-size:14.5px; line-height:1.85;
}
.mk .mk-artgrid__main .mk-ba__x{ background:#fdf6f5; border:1px solid rgba(232,69,44,.22) }
.mk .mk-artgrid__main .mk-ba__o{ background:#f2fbf6; border:1px solid rgba(30,150,90,.22) }
.mk .mk-artgrid__main .mk-ba > div .mk-ba__t{
  position:absolute; top:0; left:0;
  margin:0 !important; padding:5px 12px !important;
  font-size:11.5px !important; font-weight:700 !important;
  color:#fff !important; letter-spacing:.06em;
  border-radius:7px 0 6px 0;
}
.mk .mk-artgrid__main .mk-ba__x .mk-ba__t{ background:#e8452c }
.mk .mk-artgrid__main .mk-ba__o .mk-ba__t{ background:#1e965a }
.mk .mk-artgrid__main .mk-ba p{ margin:0 0 8px }
.mk .mk-artgrid__main .mk-ba p:last-child{ margin-bottom:0 }

/* ---------------------------------------------------------
   ⑦ 判断の分かれ道（YES / NO）
   <ul class="mk-fork"><li><b>…</b><span>→ …</span></li></ul>
   --------------------------------------------------------- */
.mk .mk-artgrid__main ul.mk-fork{
  list-style:none; margin:24px 0 30px; padding:0;
  border-top:1px solid #e5e8ec;
}
.mk .mk-artgrid__main ul.mk-fork > li{
  display:grid; grid-template-columns:1fr auto;
  gap:16px; align-items:baseline;
  margin:0; padding:14px 4px;
  border-bottom:1px solid #e5e8ec;
  font-size:15px; line-height:1.7;
}
.mk .mk-artgrid__main ul.mk-fork > li > b{
  font-weight:400 !important; color:#0f1524 !important;
  background:none !important;
}
.mk .mk-artgrid__main ul.mk-fork > li > span{
  font-size:14px; font-weight:700; white-space:nowrap;
  color:#017cc8;
}
.mk .mk-artgrid__main ul.mk-fork > li > span.is-no{ color:#8a94a2 }

/* ---------------------------------------------------------
   ⑧ Q&A（よくある質問を「文字だけ」から救う）
   <dl class="mk-qa"><dt>…</dt><dd>…</dd></dl>
   --------------------------------------------------------- */
.mk .mk-artgrid__main dl.mk-qa{ margin:24px 0 30px }
.mk .mk-artgrid__main dl.mk-qa dt{
  position:relative;
  margin:0; padding:14px 0 8px 34px;
  font-size:16px; font-weight:700; line-height:1.6; color:#0f1524;
  border-top:1px solid #e5e8ec;
}
.mk .mk-artgrid__main dl.mk-qa dt:first-child{ border-top:0; padding-top:0 }
.mk .mk-artgrid__main dl.mk-qa dt::before{
  content:"Q"; position:absolute; left:0; top:13px;
  width:24px; height:24px; line-height:24px; text-align:center;
  background:#017cc8; color:#fff; border-radius:50%;
  font-size:12px; font-weight:700;
}
.mk .mk-artgrid__main dl.mk-qa dt:first-child::before{ top:-1px }
.mk .mk-artgrid__main dl.mk-qa dd{
  margin:0 0 6px; padding:0 0 14px 34px;
  font-size:15px; line-height:1.95; color:#253a4f;
}

/* ---------------------------------------------------------
   ⑨ 結論の1行（章の頭に置く。見出し直後は結論＝実測59%）
   <p class="mk-point">…</p>
   --------------------------------------------------------- */
.mk .mk-artgrid__main p.mk-point{
  margin:0 0 20px !important;
  padding:14px 18px !important;
  background:#f7fbfe;
  border-left:3px solid #017cc8;
  border-radius:0 6px 6px 0;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.75 !important;
  color:#0f1524 !important;
}

@media (max-width:768px){
  .mk .mk-artgrid__main .mk-ba{ grid-template-columns:1fr }
  .mk .mk-artgrid__main ul.mk-fork > li{ grid-template-columns:1fr; gap:4px }
  .mk .mk-artgrid__main ul.mk-fork > li > span{ white-space:normal }
  .mk .mk-artgrid__main .mk-cells{ font-size:12.5px }
}