/* ============================================================
   ツール解説ブロック共通スタイル
   （このツールでできること／使い方（3ステップ）／こんなときに役立ちます）

   使い方：各ツールの index.html の本体の下に

     <link rel="stylesheet" href="/assets/guide.css">
     <section class="toolguide" id="about"> … </section>

   を置くだけ。文字色・配色はページ側の --brand（pdf/csv/gazo/moji）または
   --accent（hikaku）を自動で拾う。どちらも持たないページ（atena）は
   <section class="toolguide" style="--g-ac:#2b6cb0;--g-ac-d:#1f4e79"> のように
   セクション側で指定する。

   自己完結（ページ側CSSに依存しない）にしてあるので、この1ファイルを
   直せば全ツールの解説の見た目がそろう。
   ============================================================ */

.toolguide{
  --g-ac: var(--brand, var(--accent, #4f46e5));
  --g-ac-d: var(--brand-dark, var(--accent-d, #3a31b8));

  /* body::after で背景画像を重ねているページ（pdf/gazo/moji等）で埋もれないように */
  position: relative; z-index: 1;

  max-width: 920px;
  margin: 36px auto 40px;
  padding: 30px 34px 34px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border, #dde3ee);
  color: #26303f;
  line-height: 1.95;
  text-align: left;
}

.toolguide h2{
  font-size: 20px; font-weight: 800; color: #1e2837;
  margin: 38px 0 14px; padding-bottom: 9px;
  border-bottom: 2px solid var(--g-ac); letter-spacing: .01em;
}
.toolguide h2:first-child{ margin-top: 0; }
.toolguide h3{ font-size: 16px; font-weight: 800; color: var(--g-ac-d); margin: 26px 0 8px; }
.toolguide p{ margin: 0 0 14px; font-size: 14.5px; }
.toolguide a{ color: var(--g-ac-d); }

/* ---------- 見出し直下の導入文・補足 ---------- */
.toolguide .g-lead{ margin: 0 0 16px; font-size: 15px; color: #3d4a5c; }
.toolguide .g-note{ font-size: 14px; color: #4d5a6d; }

/* ---------- できること：カードで一覧化 ---------- */
.toolguide .feat-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 12px; margin: 0 0 14px; padding: 0; list-style: none;
}
.toolguide .feat-grid li{
  margin: 0; background: #fff; border: 1px solid #e2e7f2; border-left: 3px solid var(--g-ac);
  padding: 14px 16px 15px; line-height: 1.8;
}
.toolguide .feat-grid .ft{
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 800; color: #1e2837; margin-bottom: 5px;
}
.toolguide .feat-grid .ico{ font-size: 17px; line-height: 1; flex: none; }
.toolguide .feat-grid .fd{ margin: 0; font-size: 13.5px; color: #4d5a6d; }

/* ---------- 使い方：番号を丸バッジに ---------- */
.toolguide .steps{
  list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; counter-reset: stp;
}
.toolguide .steps li{
  margin: 0; position: relative; padding: 14px 16px 15px 52px;
  background: #f7f8fc; border: 1px solid #e2e7f2; line-height: 1.85; font-size: 14px;
}
.toolguide .steps li::before{
  counter-increment: stp; content: counter(stp);
  position: absolute; left: 15px; top: 14px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--g-ac); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 24px; text-align: center;
}
.toolguide .steps b{ display: block; font-size: 14.5px; color: #1e2837; margin-bottom: 3px; }

/* ---------- こんなときに役立ちます：初期状態は閉じておく ---------- */
.toolguide .acc-group{ margin-bottom: 6px; }
.toolguide .acc{ border: 1px solid #e2e7f2; background: #fff; margin: 0 0 8px; }
.toolguide .acc > summary{
  cursor: pointer; list-style: none; position: relative;
  padding: 13px 40px 13px 16px; font-size: 14.5px; font-weight: 800; color: #1e2837; line-height: 1.6;
}
.toolguide .acc > summary::-webkit-details-marker{ display: none; }
.toolguide .acc > summary:hover{ background: #f4f6fc; color: var(--g-ac-d); }
.toolguide .acc > summary::after{
  content: ""; position: absolute; right: 17px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid #8b95a8; border-bottom: 2px solid #8b95a8;
  transform: rotate(45deg); transition: transform .15s;
}
.toolguide .acc[open] > summary{ background: #f4f6fc; border-bottom: 1px solid #e8ecf5; }
.toolguide .acc[open] > summary::after{ transform: rotate(-135deg); margin-top: -2px; }
/* summary 内の h3 は見出し階層の維持用。見た目は summary に合わせる */
.toolguide .acc > summary h3{ display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
/* 開いたときの1行目＝結論。その下に長い説明が続く */
.toolguide .acc .acc-body{ padding: 16px 18px 4px; }
.toolguide .acc .acc-body .acc-a{
  margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--g-ac);
  font-size: 14.5px; font-weight: 700; color: #1e2837; line-height: 1.8;
}
.toolguide .acc .acc-body > *:first-child{ margin-top: 0; }
.toolguide .acc .acc-body > p:last-child{ margin-bottom: 14px; }

/* ---------- 末尾の注意書き ---------- */
.toolguide .g-disclaimer{
  margin: 26px 0 0; padding: 14px 16px 15px;
  background: #f7f8fa; border: 1px solid #e2e7f2; border-left: 3px solid #b9c2d2;
  font-size: 12.5px; line-height: 1.9; color: #5a6779;
}
.toolguide .g-disclaimer .dt{ display: block; font-weight: 800; color: #46546a; margin-bottom: 3px; }
.toolguide .g-disclaimer p{ margin: 0; font-size: inherit; }
.toolguide .g-disclaimer a{ color: inherit; text-decoration: underline; }

@media (max-width: 640px){
  .toolguide{ padding: 20px 16px 24px; margin-top: 24px; }
  .toolguide h2{ font-size: 17px; }
  .toolguide h3{ font-size: 15px; }
  .toolguide p{ font-size: 14px; }
  .toolguide .g-lead{ font-size: 14px; }
  .toolguide .feat-grid{ grid-template-columns: 1fr; gap: 10px; }
  .toolguide .steps li{ padding-left: 46px; }
  .toolguide .acc > summary{ font-size: 14px; padding: 12px 36px 12px 14px; }
  .toolguide .acc .acc-body{ padding: 14px 14px 2px; }
  .toolguide .acc .acc-body .acc-a{ font-size: 14px; }
}

/* 印刷時は解説を出さない（宛名印刷など、印刷が主目的のツール対策） */
@media print{
  .toolguide{ display: none !important; }
}