/* ============================================================
   解説ブロック（このツールでできること／使い方／FAQ）の共通スタイル
   使い方：対象の <section> に toolguide クラスを足し、
           ページ側の <style> より後ろでこのファイルを読み込む。
             <section class="guide toolguide">   … csv / gazo
             <section class="article toolguide"> … pdf / hikaku

   文字サイズ・配色の土台はページ側の .guide / .article を活かし、
   ここでは「幅を上の要素に揃える」「カード化」「たたむ」だけを足す。
   専用クラスにしてあるのは、hikaku が別用途で .guide を使っているため。
   ============================================================ */

.toolguide{
  /* ページごとのブランド色を拾う（pdf/csv/gazo は --brand、hikaku は --accent） */
  --g-ac: var(--brand, var(--accent, #4f46e5));
  --g-ac-d: var(--brand-dark, var(--accent-d, #3a31b8));
  /* 上の要素（ツール本体）に幅を合わせる。従来の 860px は上より細くて目立っていた */
  max-width: 920px;
}

/* ---------- 見出し直下の導入＋うさぎ ---------- */
.toolguide .feat-head{ display: flex; align-items: center; gap: 22px; margin: 0 0 16px; }
.toolguide .feat-head .g-lead{ margin: 0; font-size: 15px; color: #3d4a5c; }
.toolguide .feat-usagi{
  width: 124px; height: auto; flex: none; display: block;
}
.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;
  display: flex; align-items: center; gap: 16px;
}
.toolguide .steps .stxt{ flex: 1; min-width: 0; }
.toolguide .steps .step-usagi{
  width: 76px; height: auto; flex: none; display: block; align-self: center;
}
.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; }

/* ---------- 長い解説・FAQ：初期状態は閉じる ----------
   中身は HTML に残るので検索エンジンには従来どおり読まれる。 */
.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 .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{ padding: 16px 18px 4px; }
/* acc-a を置かず本文から始めるページ（/faq/）で、p の既定 margin-top が
   acc-body の padding に足されて上余白が二重になるのを防ぐ */
.toolguide .acc .acc-body > *:first-child{ margin-top: 0; }
.toolguide .acc .acc-body > p:last-child{ margin-bottom: 14px; }
.toolguide .acc .acc-body .faq-a{ padding-left: 0; }

/* ---------- 方式の比較表 ----------
   特定の製品名・企業名や、他社の料金・回数条件は書かない。
   「方式ごとの一般的な傾向」に限定することで、他社の条件変更で陳腐化せず、
   景品表示法上の比較広告の論点（実証されていない数値の掲載）も避けられる。 */
.toolguide .cmp-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 6px; }
.toolguide .cmp{
  border-collapse: collapse; width: 100%; min-width: 720px;
  background: #fff; font-size: 13.5px;
  /* 自動幅だと文章量の多い「はねつーる」列だけが極端に広がり、
     残り2列が細くなって「ソ／フト」のような不自然な折り返しになる。
     列幅を固定して3列を同じ幅に揃える。 */
  table-layout: fixed;
}
.toolguide .cmp th, .toolguide .cmp td{
  border: 1px solid #e2e7f2; padding: 9px 12px; text-align: left;
  vertical-align: top; line-height: 1.75;
  /* 日本語を文節の切れ目で折る（未対応ブラウザは従来どおりの折り返し） */
  word-break: auto-phrase; line-break: strict; overflow-wrap: break-word;
}
.toolguide .cmp thead th{ background: #f4f6fc; font-weight: 800; color: #1e2837; font-size: 13px; text-align: center; }
.toolguide .cmp thead th.me{ background: var(--g-ac); color: #fff; }
/* 1列目は項目名（最長13字のページに合わせる）、残り3列は等幅 */
.toolguide .cmp thead th:first-child{ width: 20%; }
.toolguide .cmp thead th:not(:first-child){ width: 26.66%; }
.toolguide .cmp tbody th{ background: #f7f8fc; font-weight: 800; color: #1e2837; }
.toolguide .cmp td.me{ background: #fbfcff; font-weight: 700; color: #1e2837;
  border-left: 2px solid var(--g-ac); border-right: 2px solid var(--g-ac); }
.toolguide .cmp tbody tr:last-child td.me{ border-bottom: 2px solid var(--g-ac); }
.toolguide .cmp-note{ font-size: 12.5px; color: #6b7585; line-height: 1.85; margin: 0 0 16px; }
@media (max-width: 640px){
  .toolguide .cmp{ font-size: 13px; }
  .toolguide .cmp th, .toolguide .cmp td{ padding: 8px 10px; }
  .toolguide .cmp-wrap::after{ content: ""; display: block; }
}

/* ---------- 末尾の注意書き ----------
   利用規約 第8条・第9条の要点を、断言的な説明文と同じ画面に置いておくための控えめな枠。 */
.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: 900px){
  .toolguide .feat-usagi{ width: 96px; }
  .toolguide .feat-head{ gap: 16px; }
}
@media (max-width: 640px){
  .toolguide .feat-head{ gap: 12px; margin-bottom: 14px; }
  .toolguide .feat-usagi{ width: 74px; }
  .toolguide .feat-head .g-lead{ font-size: 14px; }
  .toolguide .feat-grid{ grid-template-columns: 1fr; gap: 10px; }
  .toolguide .steps li{ gap: 10px; padding-left: 46px; }
  .toolguide .steps .step-usagi{ width: 56px; }
  .toolguide .acc > summary{ font-size: 14px; padding: 12px 36px 12px 14px; }
  .toolguide .acc .acc-body .acc-a{ font-size: 14px; }
  .toolguide .acc .acc-body{ padding: 14px 14px 2px; }
}