@charset "UTF-8";

/*
 * MERVELTA 無料ツール（/free-tools/）共通CSS
 *
 * 正本の考え方：
 *   - 色・余白・タイポグラフィは style.css の :root トークンと
 *     .articles-page / .articles-header / .static-page を canonical として流用する。
 *     ここでは「ツール固有のUI部品」だけを定義し、サイト共通の値を再定義しない。
 *   - ツールUIは4ページ共通の component として定義し、各HTMLへ複製しない
 *     （KNOWN-FAILURES `F027`：共通UIを各ページへ複製すると貼り忘れが起きる）。
 *   - 状態は色だけで区別せず、必ずテキストまたは形でも判別できるようにする。
 *
 * 読み込み元：free-tools/ 配下の8ページ。
 */

/* ============================================================
   ツールパネル
   ============================================================ */
.tool-panel {
  padding: 22px 22px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: 14px;
}

.tool-panel + .tool-panel {
  margin-top: 18px;
}

.tool-panel__title {
  margin: 0 0 4px;
  color: var(--color-primary-deep);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.55;
}

.tool-panel__desc {
  margin: 0 0 16px;
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.8;
  word-break: normal;
  line-break: strict;
}

/* ============================================================
   入力フィールド
   ============================================================ */
.tool-field + .tool-field {
  margin-top: 16px;
}

.tool-field__label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-primary-deep);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
}

.tool-field__hint {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.75;
  word-break: normal;
  line-break: strict;
}

.tool-textarea,
.tool-input,
.tool-select {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid #c9d8ea;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.8;
}

.tool-textarea {
  min-height: 180px;
  resize: vertical;
  word-break: normal;
  line-break: strict;
}

.tool-textarea[readonly] {
  color: #2b3d57;
  background: #f1f6fc;
}

.tool-input {
  min-height: 46px;
}

.tool-select {
  min-height: 46px;
  /* iOS Safari の独自装飾を抑えつつ、矢印は残す */
  background-image: none;
}

.tool-textarea:focus-visible,
.tool-input:focus-visible,
.tool-select:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 2px;
}

/* エラーは色だけで示さない。枠線＋テキストの両方で伝える。 */
.tool-input[aria-invalid="true"],
.tool-select[aria-invalid="true"] {
  border-color: #c0392b;
  border-width: 2px;
}

/* ============================================================
   横並びの入力行（和暦変換の 元号 + 年 など）
   ============================================================ */
.tool-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.tool-inline > .tool-field {
  min-width: 0;
  margin-top: 0;
  flex: 1 1 140px;
}

.tool-inline > .tool-field--era {
  flex: 1 1 170px;
}

/* ============================================================
   操作ボタン列
   ------------------------------------------------------------
   ボタンそのものは style.css の .blog-button を canonical として使う。
   ここでは並べ方と、操作結果のフィードバック行だけを定義する。
   ============================================================ */
.tool-actions {
  display: flex;
  margin-top: 16px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tool-actions .blog-button {
  min-height: 44px;
  padding-inline: 18px;
  gap: 8px;
  font-size: 0.9375rem;
}

.tool-actions .blog-button[disabled] {
  color: #8d9bb2;
  background: #e9eff6;
  border-color: #dae3ee;
  cursor: default;
}

/* 操作結果（コピーしました／戻しました など）。文字で伝える。 */
.tool-actions__status {
  min-height: 1.6em;
  color: var(--color-primary-bright);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
}

.tool-actions__status[data-state="failed"] {
  color: #c0392b;
}

/* ============================================================
   集計結果（文字数カウンター）
   ============================================================ */
.tool-result {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line-strong);
}

.tool-result__title {
  margin: 0 0 12px;
  color: var(--color-primary-deep);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}

.tool-stats {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
}

.tool-stat {
  min-width: 0;
  padding: 12px 10px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  text-align: center;
}

.tool-stat__label {
  display: block;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
}

.tool-stat__value {
  display: block;
  margin-top: 2px;
  color: var(--color-primary-deep);
  font-size: 1.5rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.tool-stat__unit {
  margin-left: 2px;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* ============================================================
   変換結果（和暦・西暦変換）
   ============================================================ */
.tool-output {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 10px;
}

.tool-output__value {
  margin: 0;
  color: var(--color-primary-deep);
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.5;
  word-break: normal;
  line-break: strict;
}

.tool-output__note {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.75;
  word-break: normal;
  line-break: strict;
}

/* エラーは「⚠」相当のラベル文言とセットで出す。色だけに依存しない。 */
.tool-output[data-state="error"] {
  border-color: #e3b4ad;
  background: #fdf5f4;
}

.tool-output[data-state="error"] .tool-output__value {
  color: #a5342a;
  font-size: 1rem;
  font-weight: 700;
}

/* ============================================================
   チェックボックス群（改行・空白一括整形）
   ============================================================ */
.tool-checks {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 2px;
  list-style: none;
}

.tool-check {
  display: flex;
  min-height: 44px;
  padding: 6px 4px;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.7;
  cursor: pointer;
  word-break: normal;
  line-break: strict;
}

.tool-check input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--color-primary-bright);
}

.tool-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.tool-fieldset__legend {
  margin-bottom: 4px;
  padding: 0;
  color: var(--color-primary-deep);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
}

/* ============================================================
   タスク表（今日の優先順位メーカー）
   ------------------------------------------------------------
   table要素は使わない。390pxでは縦積みカード、768px以上で
   行グリッドへ切り替えるため、DOMを作り替えずCSSだけで両対応する。
   ============================================================ */
.tool-tasks {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.tool-tasks__head {
  display: none;
}

.tool-task {
  display: grid;
  min-width: 0;
  padding: 14px;
  gap: 10px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 10px;
}

.tool-task__name {
  min-width: 0;
}

.tool-task__meta {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tool-task__foot {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tool-task__done {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
}

.tool-task__done input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--color-primary-bright);
}

.tool-task__remove {
  min-height: 44px;
  padding: 6px 14px;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid #cfdae8;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.tool-task__remove:hover {
  color: #a5342a;
  border-color: #e3b4ad;
}

/* ============================================================
   4分類の結果（アイゼンハワーマトリクス相当）
   ============================================================ */
.tool-quadrants {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.tool-quadrant {
  min-width: 0;
  padding: 14px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 10px;
}

/* 分類は色だけで区別せず、左の線の太さと見出し文言でも区別する。 */
.tool-quadrant--do { border-left: 5px solid var(--color-primary-bright); }
.tool-quadrant--plan { border-left: 5px solid var(--color-teal); }
.tool-quadrant--delegate { border-left: 5px solid var(--color-yellow); }
.tool-quadrant--drop { border-left: 5px solid #b8c4d6; }

.tool-quadrant__title {
  margin: 0;
  color: var(--color-primary-deep);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.5;
}

.tool-quadrant__rule {
  margin: 2px 0 10px;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
}

.tool-quadrant__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-quadrant__list li {
  padding-block: 5px;
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

.tool-quadrant__list li + li {
  border-top: 1px dashed var(--color-line);
}

/* 完了は取り消し線＋「完了」ラベルの両方で示す（色だけに依存しない）。 */
.tool-quadrant__list li[data-done="true"] {
  color: var(--color-muted);
  text-decoration: line-through;
  text-decoration-color: #9fb0c6;
}

.tool-quadrant__done {
  margin-left: 6px;
  padding: 1px 6px;
  color: var(--color-primary-deep);
  background: var(--color-sky);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  vertical-align: 2px;
}

.tool-quadrant__empty {
  margin: 0;
  color: #8c99ad;
  font-size: 0.875rem;
  line-height: 1.7;
}

/* ============================================================
   今日の日付表示
   ============================================================ */
.tool-today {
  margin: 0 0 14px;
  color: var(--color-primary-deep);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   無料ツールアイコンの「見た目の大きさ」を1か所で決める
   ------------------------------------------------------------
   PNGは透明余白を含むため、canvas寸法では表示サイズが決まらない。
   実測（`convert -trim`）：
     テーマから探す `assets/images/topic-nav/*.png` … 実図形 = canvasの 0.617〜0.665（平均 0.643）
     無料ツール     `assets/images/free-tools/free-tool-*.png` … 実図形 = canvasの 0.480（正規化済み）
   同じ枠へ等倍で置くと、無料ツールだけ実図形が約23%小さく見える。これが
   「カードに対してアイコンが小さい」ことの root cause で、画像の再生成では
   なく「枠に対する実図形の比率」を合わせて直す。

   --free-tool-icon-fill = 目標比率 0.64 ÷ 実比率 0.48。
   5枚とも0.480へ正規化済みなので、この係数1つで全アイコンがそろう。
   アイコンごとの個別widthは持たせない。
   ------------------------------------------------------------ */
.tool-links--5up,
.tool-links-mobile--5up {
  --free-tool-icon-fill: 1.3333;
}

/* ------------------------------------------------------------
   TOP「無料ツール」セクション：5枠化の列組み
   ------------------------------------------------------------
   `.tool-links` の正本は style.css。ここでは5件になったことで必要になる
   差分（列数と、1200px以上での縦積み維持）だけを足す。
   4列前提の既存値は書き換えない。
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  .tool-links--5up { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  /* 5列になると1列あたり約150pxで、アイコン左＋ラベル右の横組みでは
     ラベル幅が約70pxまで落ち「文字数カウ／ンター」の語中折れが避けられない。
     組版正本（docs/japanese-typography-rules.md §C）は font-size 縮小より先に
     「親要素の利用可能幅」を見直すよう求めるため、幅を確保できる
     アイコン上・ラベル下の縦積み（768px〜1199pxと同じ形）を維持する。 */
  .tool-links--5up { gap: 4px; }

  .tool-links--5up .tool-links__inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-block: 2px;
    text-align: center;
  }

  .tool-links--5up .tool-links__icon { width: 64px; height: 64px; }
  .tool-links--5up .tool-links__body { min-height: 0; justify-items: center; }
  .tool-links--5up .tool-links__name { font-size: 13.5px; }
}

/* TOP（PC）：枠64px × 0.48 × 1.3333 ＝ 実図形 約41px。
   テーマから探すは枠62px × 0.643 ＝ 約40pxで、並べても差が出ない。
   transformなのでレイアウト幅は64pxのまま変わらない。 */
.tool-links--5up .tool-links__icon img {
  width: 100%;
  height: 100%;
  transform: scale(var(--free-tool-icon-fill));
  transform-origin: center;
}

/* TOP（768px以上）：見出し行の右端に「すべて見る →」を出す。
   home-mobile.css が全幅で .section-head__more を非表示にしているため、
   無料ツール欄だけ詳細度を1段上げて表示する（他セクションの非表示は変えない）。
   TOPは選抜枠なので、全件を載せた /free-tools/ への入口をPCでも見せる。
   768〜1199px：見出しと補足文の上下2段はそのままに、見出しの行の右端へ置く。
   1200px以上：「見出し＋右に補足」の1行はそのままに、行の右端へ置く。 */
@media (min-width: 768px) {
  .home-page .home-resources .section-head__more {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    color: #1763ba;
    font-family: 'Noto Sans JP', var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
  }

  .home-page .home-resources .section-head__more:hover { text-decoration: underline; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .home-page .home-resources .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: baseline;
  }

  .home-page .home-resources .section-head > .section-head__label,
  .home-page .home-resources .home-resources__intro { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .home-page .home-resources .home-resources__intro { order: 1; }
  .home-page .home-resources .section-head__more { order: 2; margin-left: auto; }
}

/* TOP スマホ版の3列カードを5枠へ。
   3列のまま5件並べると最終行が2件だけ左に寄って空きができるため、
   6分割グリッドにして「1行目3件 / 2行目2件」を常に横幅いっぱいへそろえる。
   home-mobile.css の 767px 以下ルールと同じ詳細度にし、読み込み順で上書きする。 */
@media (max-width: 767px) {
  .home-page .home-resources .tool-links-mobile--5up {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-page .home-resources .tool-links-mobile--5up > li {
    padding: 0;
    grid-column: span 2;
  }

  .home-page .home-resources .tool-links-mobile--5up > li:nth-child(4),
  .home-page .home-resources .tool-links-mobile--5up > li:nth-child(5) {
    grid-column: span 3;
  }

  /* カード全体をリンクにする。枠線・角丸は li 側が持ったままにする。 */
  .home-page .home-resources .tool-links-mobile--5up > li > a {
    display: flex;
    width: 100%;
    min-height: 88px;
    padding: 8px 4px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: inherit;
    text-align: center;
  }

  /* SPも同じ考え方で実図形の比率をそろえる。
     枠46px × 0.48 × 1.3333 ＝ 実図形 約29px（従来は27px枠 × scale(1.8) で約23px）。
     home-mobile.css の 27px / scale(1.8) を、同じ詳細度＋後勝ちで上書きする。 */
  .home-page .home-resources .tool-links-mobile--5up .tool-links-mobile__icon {
    width: 46px;
    height: 46px;
  }

  .home-page .home-resources .tool-links-mobile--5up .tool-links-mobile__icon img {
    transform: scale(var(--free-tool-icon-fill));
    transform-origin: center;
  }
}

/* ============================================================
   スマートフォン（767px以下）
   ============================================================ */
@media (max-width: 767px) {
  .tool-panel {
    padding: 16px 14px 18px;
    border-radius: 12px;
  }


  .tool-panel__title { font-size: 1.0625rem; }

  /* rows属性のままだとスマホで入力欄が画面の3分の1以上を占め、
     結果（集計・整形結果）が初回表示から押し出される。高さをCSSで抑える。
     resize: vertical は残してあるので、必要なら利用者が広げられる。 */
  .tool-textarea { height: 170px; min-height: 120px; font-size: 1rem; }

  /* 4枠を横並びのままにすると1枠あたり約75pxとなり、
     「空白を除く」が3行に割れるため2列へ落とす。 */
  .tool-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tool-stat__value { font-size: 1.375rem; }

  .tool-quadrants { grid-template-columns: minmax(0, 1fr); }

  .tool-actions .blog-button {
    padding-inline: 14px;
    flex: 1 1 auto;
    font-size: 0.875rem;
  }

  .tool-output__value { font-size: 1.1875rem; }
}

/* 重要度・緊急度は390px / 375pxでは2列に収まる（1列あたり約145px、
   最長ラベル「重要ではない」は約140px）。360pxを下回ると収まらないため、
   そこで初めて縦積みへ落とす。ここを広く取ると1タスク4行になり、
   スマホで一覧性が落ちる。 */
@media (max-width: 359px) {
  .tool-task__meta { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   768px以上：タスク行を1行グリッドへ
   ============================================================ */
@media (min-width: 768px) {
  .tool-tasks__head {
    display: grid;
    padding: 0 14px;
    grid-template-columns: minmax(0, 1fr) 132px 132px 96px 76px;
    gap: 10px;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
  }

  .tool-task {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 132px 132px 96px 76px;
    padding: 10px 14px;
  }

  .tool-task__meta {
    display: contents;
  }

  .tool-task__foot {
    display: contents;
  }

  .tool-task__done { justify-content: center; }
  .tool-task__remove { width: 100%; }
}

/* ============================================================
   動きの軽減
   ------------------------------------------------------------
   このページ群に自動再生・大きな移動の演出はない。
   hover時の微小なtransitionだけを止める。
   ============================================================ */
/* ============================================================
   Tool page（記事シェル版）／ `.tool-page--article`
   ------------------------------------------------------------
   Character Counter をVisual Canonicalとして4ツール共通化したもの。
   （Human Visual Approval済み：2026-09-20・PC / 390とも）
   一覧ページ `/free-tools/` も同じ記事シェルを使う（`--directory`）。
   `.tool-page--article` を持たないページへは一切効かない。

   Canonical の出どころ（推測値なし。実CSSの実測値を使う）
   - font / 本文 / H3 / list / link / FAQ
       = `.article-detail--standard`（style.css の Article Standard v1.0）
   - H2 の面（tinted box + 左罫 + 章番号なし）
       = 第12記事 `articles/chatgpt-business-efficiency/index.html`
         （PC: 27px / padding 17px 20px 18px / #eef5fc / border-left 5px #1763ba /
           radius 5px、SP: 23px / padding 2px 0 10px 12px / 下罫 #dce7f1 / radius 0）
   - 箱の質感 = white / 1px #e5eaf1 / radius 6px
       （第14記事がTOPのcard languageとして実測・記録した値）
   - note / caution = 共通の `.article-note--point` / `--caution` + `.article-callout-label`
   - FAQ = 第14記事と同じ `.article-faq--collapsible` DOM（SPアコーディオンは main.js）
   - closing nav = 共通componentの `.article-related`
   ============================================================ */

/* --- 面の幅：第12記事の実測は breadcrumb / header / intro / body とも 720px。
       ここを840pxのままにすると、H1の左端だけがツール本体より外へ出る。 --- */
.tool-page--article { font-family: 'Noto Sans JP', var(--font-sans); }

@media (min-width: 768px) {
  .tool-page--article .article-breadcrumb,
  .tool-page--article .article-header,
  .tool-page--article .article-intro {
    width: min(calc(100% - 48px), 720px);
  }
}

/* --- H2：第12記事の実測値（章番号は出さない） ---
       PC 27px/700/1.5、左罫5px #1763ba ＋ 下罫1px #dce7f1、背景なし。 */
.tool-page--article .article-content > section > h2 {
  margin-bottom: 26px;
  padding: 3px 0 12px 16px;
  color: #062855;
  background: transparent;
  border: 0;
  border-left: 5px solid #1763ba;
  border-bottom: 1px solid #dce7f1;
  border-radius: 0;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.5;
}

.tool-page--article .article-content > section > h2::before { content: none; }

/* --- 本文・リード・リストの行間はSPで1.85へ詰める（第12記事の実測値）。
       共通CSSの1.95は1カラムでは離れすぎる。 --- */
@media (max-width: 767px) {
  .tool-page--article .article-content p:not([class]),
  .tool-page--article .article-content li:not([class]),
  .tool-page--article .article-lead { line-height: 1.85; }
}

/* --- note / caution の本文級数を第12記事のcalloutへそろえる --- */
.tool-page--article .article-content .article-note p:not(.article-callout-label) {
  font-size: 1rem;
  line-height: 1.85;
}

/* --- Trust表示：主役にしない。リード直後に小さく置く --- */
.tool-page--article .tool-trust {
  display: flex;
  margin: 18px 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.tool-page--article .tool-trust li {
  padding: 3px 11px;
  color: #45536b;
  background: var(--color-white);
  border: 1px solid #e5eaf1;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.7;
}

/* ============================================================
   Tool Panel
   ------------------------------------------------------------
   「入力 → 操作 → 結果」の3段が順に読めるようにする。
   面は記事・TOPと同じ white / 1px #e5eaf1 / radius 6px。
   STEP見出しのような大げさな表示は足さない。
   ============================================================ */
.tool-page--article .tool-panel {
  margin-bottom: 8px;
  padding: 22px 24px 24px;
  background: var(--color-white);
  border: 1px solid #e5eaf1;
  border-radius: 6px;
}

.tool-page--article .tool-panel__head {
  display: flex;
  margin-bottom: 18px;
  padding-bottom: 16px;
  /* 説明文の行数が1〜3行とツールごとに違うため、中央ぞろえだとアイコンの
     高さが揃わない。タイトル行に合わせた上ぞろえで固定する。 */
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid #eef2f7;
}

/* アイコンは目印。図形はキャンバスの48%なので、枠を仕上がりサイズに合わせて
   1/0.48 ≒ 2.08倍で収める（transformなのでレイアウト幅は40pxのまま）。 */
.tool-page--article .tool-panel__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  margin-top: -2px;
  flex: none;
  align-items: center;
  justify-content: center;
}

.tool-page--article .tool-panel__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(2.0833);
  transform-origin: center;
}

.tool-page--article .tool-panel__headtext { min-width: 0; }

.tool-page--article .tool-panel__title {
  margin: 0;
  color: #062855;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.5;
}

.tool-page--article .tool-panel__desc {
  margin: 4px 0 0;
  color: #45536b;
  font-size: 0.9375rem;
  line-height: 1.75;
  word-break: normal;
  line-break: strict;
}

/* --- 入力 --- */
.tool-page--article .tool-field__label {
  margin-bottom: 8px;
  color: #062855;
  font-size: 0.9375rem;
  font-weight: 700;
}

.tool-page--article .tool-textarea {
  height: 210px;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid #c9d8ea;
  border-radius: 6px;
  /* 17px。iOSのズーム閾値(16px)を下回らせない。 */
  font-size: 1.0625rem;
  line-height: 1.8;
}

.tool-page--article .tool-textarea::placeholder {
  color: #7d8ca3;
  opacity: 1;
}

/* --- 操作：コピーをPrimary、全削除はOutline（既存の2段階をそのまま使う） --- */
.tool-page--article .tool-actions {
  margin-top: 14px;
  gap: 10px 12px;
}

.tool-page--article .tool-actions .blog-button {
  min-height: 48px;
  padding-inline: 20px;
  border-radius: 6px;
  font-size: 0.9375rem;
}

.tool-page--article .tool-actions__status {
  flex-basis: 100%;
  min-height: 0;
  color: #1763ba;
  font-size: 0.875rem;
}

.tool-page--article .tool-actions__status:empty { display: none; }

/* --- 結果：ツールの価値なので、面を変えて優先度を上げる --- */
.tool-page--article .tool-result {
  margin-top: 20px;
  padding: 16px 16px 18px;
  background: #f7fafd;
  border: 0;
  border-radius: 6px;
}

.tool-page--article .tool-result__title {
  margin: 0 0 12px;
  color: #1763ba;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.tool-page--article .tool-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tool-page--article .tool-stat {
  padding: 12px 8px 13px;
  background: var(--color-white);
  border: 1px solid #e5eaf1;
  border-radius: 6px;
}

.tool-page--article .tool-stat__label {
  color: #52667f;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}

.tool-page--article .tool-stat__value {
  margin-top: 4px;
  color: #062855;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.25;
}

/* --- 結果カードのラベルは2行になるものがある（「行数（改行ベース）」）。
       数値の開始行を4枚でそろえるため、ラベル側の高さを確保する。 --- */
.tool-page--article .tool-stat__label {
  display: block;
  min-height: 2.9em;
}

/* ============================================================
   ツール固有の操作UI（共通の面・級数の上に載せる）
   ------------------------------------------------------------
   DOMはツールごとに機能へ合わせて組む。ここで共通化するのは
   「入力部品の見え方」だけで、構造は各ページが決める。
   ============================================================ */

/* --- 入力部品：textareaと同じ枠・角丸・級数へそろえる --- */
.tool-page--article .tool-input,
.tool-page--article .tool-select {
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #c9d8ea;
  border-radius: 6px;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* --- 処理の選択（改行・空白の一括整形） --- */
.tool-page--article .tool-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.tool-page--article .tool-fieldset__legend {
  margin-bottom: 6px;
  padding: 0;
  color: #062855;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}

.tool-page--article .tool-checks {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 2px;
  list-style: none;
}

.tool-page--article .tool-check {
  display: flex;
  min-height: 44px;
  padding: 4px 2px;
  align-items: center;
  gap: 10px;
  color: #333;
  font-size: 1rem;
  line-height: 1.7;
  cursor: pointer;
  word-break: normal;
  line-break: strict;
}

.tool-page--article .tool-check input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: #1763ba;
}

/* --- 横並びの入力行（元号 + 年） --- */
.tool-page--article .tool-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.tool-page--article .tool-inline > .tool-field {
  min-width: 0;
  margin-top: 0;
  flex: 1 1 150px;
}

/* --- 変換結果：結果面のなかで数値を主役にする（集計カードと同じ考え方） --- */
.tool-page--article .tool-output {
  margin: 0;
  padding: 14px 16px 15px;
  background: var(--color-white);
  border: 1px solid #e5eaf1;
  border-radius: 6px;
}

.tool-page--article .tool-output__value {
  margin: 0;
  color: #062855;
  font-size: 1.625rem;
  font-weight: 900;
  line-height: 1.4;
  word-break: normal;
  line-break: strict;
}

.tool-page--article .tool-output__note {
  margin: 8px 0 0;
  color: #45536b;
  font-size: 0.9375rem;
  line-height: 1.75;
  word-break: normal;
  line-break: strict;
}

/* 未入力のときは案内文なので、結果の級数では出さない */
.tool-page--article .tool-output[data-state="empty"] .tool-output__value {
  color: #52667f;
  font-size: 1rem;
  font-weight: 500;
}

/* エラーは色だけで示さず、枠と文言の両方で伝える */
.tool-page--article .tool-output[data-state="error"] {
  background: #fdf5f4;
  border-color: #e3b4ad;
}

.tool-page--article .tool-output[data-state="error"] .tool-output__value {
  color: #a5342a;
  font-size: 1rem;
  font-weight: 700;
}

.tool-page--article .tool-input[aria-invalid="true"] {
  border-color: #c0392b;
  border-width: 2px;
}

/* --- タスク行（今日の優先順位メーカー） ---
   table要素は使わない。390pxは縦積みカード、768px以上で行グリッドへ
   切り替えるため、DOMを作り替えずCSSだけで両対応する。 */
.tool-page--article .tool-tasks {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.tool-page--article .tool-tasks__head { display: none; }

.tool-page--article .tool-task {
  display: grid;
  min-width: 0;
  padding: 13px;
  gap: 9px;
  background: var(--color-white);
  border: 1px solid #e5eaf1;
  border-radius: 6px;
}

.tool-page--article .tool-task__name { min-width: 0; }

.tool-page--article .tool-task__meta {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.tool-page--article .tool-task__foot {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tool-page--article .tool-task__done {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: #333;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
}

.tool-page--article .tool-task__done input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: #1763ba;
}

.tool-page--article .tool-task__remove {
  min-height: 44px;
  padding: 6px 16px;
  color: #52667f;
  background: transparent;
  border: 1px solid #cfdae8;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.tool-page--article .tool-task__remove:hover {
  color: #a5342a;
  border-color: #e3b4ad;
}

/* --- 4分類（アイゼンハワーマトリクス相当） --- */
.tool-page--article .tool-quadrants {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.tool-page--article .tool-quadrant {
  min-width: 0;
  padding: 14px 16px 15px;
  background: var(--color-white);
  border: 1px solid #e5eaf1;
  border-radius: 6px;
}

/* 分類は色だけで区別せず、左罫の色と見出し文言の両方で示す。
   意味色は記事の既存2色（#1763ba / #c69322）とグレーに限る。 */
.tool-page--article .tool-quadrant--do { border-left: 4px solid #1763ba; }
.tool-page--article .tool-quadrant--plan { border-left: 4px solid #3c9f9a; }
.tool-page--article .tool-quadrant--delegate { border-left: 4px solid #c69322; }
.tool-page--article .tool-quadrant--drop { border-left: 4px solid #b8c4d6; }

.tool-page--article .tool-quadrant__title {
  margin: 0;
  color: #062855;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.5;
}

.tool-page--article .tool-quadrant__rule {
  margin: 2px 0 10px;
  color: #52667f;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
}

.tool-page--article .tool-quadrant__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-page--article .tool-quadrant__list li {
  padding-block: 6px;
  color: #333;
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

.tool-page--article .tool-quadrant__list li + li { border-top: 1px dashed #e5eaf1; }

/* 完了は取り消し線＋「完了」ラベルの両方で示す（色だけに依存しない） */
.tool-page--article .tool-quadrant__list li[data-done="true"] {
  color: #52667f;
  text-decoration: line-through;
  text-decoration-color: #9fb0c6;
}

.tool-page--article .tool-quadrant__done {
  margin-left: 6px;
  padding: 1px 7px;
  color: #062855;
  background: #eaf4ff;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  vertical-align: 2px;
}

.tool-page--article .tool-quadrant__empty {
  margin: 0;
  color: #7d8ca3;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* --- 今日の日付 --- */
.tool-page--article .tool-today {
  margin: 0 0 10px;
  color: #1763ba;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

/* --- 768px以上：タスク行を1行グリッドへ --- */
@media (min-width: 768px) {
  .tool-page--article .tool-tasks__head {
    display: grid;
    padding: 0 13px;
    grid-template-columns: minmax(0, 1fr) 132px 132px 92px 76px;
    gap: 9px;
    color: #52667f;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
  }

  .tool-page--article .tool-task {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 132px 132px 92px 76px;
    padding: 9px 13px;
  }

  .tool-page--article .tool-task__meta,
  .tool-page--article .tool-task__foot { display: contents; }
  .tool-page--article .tool-task__done { justify-content: center; }
  .tool-page--article .tool-task__remove { width: 100%; padding-inline: 6px; }
}

/* 結果面（薄い青灰）の中の読み取り専用textareaは白にして、面から1段持ち上げる */
.tool-page--article .tool-result .tool-textarea[readonly] {
  color: #2b3d57;
  background: var(--color-white);
}

/* 補足が複数あるときは <br> で折らず箇条書きにする
   （組版正本 docs/japanese-typography-rules.md §A） */
.tool-page--article .tool-panel__note--list {
  margin-top: 16px;
  padding-left: 1.25em;
  list-style: disc;
}

.tool-page--article .tool-panel__note--list li + li { margin-top: 5px; }

/* ============================================================
   ツールDirectory（/free-tools/）のカード
   ------------------------------------------------------------
   面は white / radius 6px。2026-10-06のユーザー指示で、枠線をなくし
   サイト共通の影トークン（--shadow-soft、hoverは --shadow-soft-hover）で面を分ける。
   全カードを同じclassで処理し、ツールごとの個別指定を作らない。
   390pxは1列、768px以上は2列。どちらも「アイコン左 + 本文右」の横組みで、
   一覧としての走査性を優先する（PCで不要に巨大なカードにしない）。
   ============================================================ */
.tool-page--article .tool-directory {
  --free-tool-icon-fill: 1.3333;
  display: grid;
  margin: 0;
  padding: 0;
  gap: 12px;
  list-style: none;
}

.tool-page--article .tool-directory__item { min-width: 0; }

.tool-page--article .tool-directory__link {
  display: flex;
  height: 100%;
  padding: 16px;
  /* stretch のままにして、本文側がカード高さいっぱいに伸びるようにする。
     これで CTA の margin-top:auto が効き、2列に並べたときCTAの行がそろう。 */
  gap: 14px;
  color: inherit;
  background: var(--color-white);
  border: 0;
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: box-shadow var(--transition);
}

.tool-page--article .tool-directory__link:hover { box-shadow: var(--shadow-soft-hover); }
.tool-page--article .tool-directory__link:hover .tool-directory__name { color: #1763ba; }

/* アイコンは枠48px × 実図形0.48 × 1.3333 ＝ 約31px。
   TOPカード・詳細ページと同じ「枠に対する実図形の比率」でそろえる。 */
.tool-page--article .tool-directory__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  margin-top: -1px;
  flex: none;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
}

.tool-page--article .tool-directory__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--free-tool-icon-fill));
  transform-origin: center;
}

.tool-page--article .tool-directory__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.tool-page--article .tool-directory__name {
  color: #062855;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.5;
  word-break: normal;
  line-break: strict;
}

.tool-page--article .tool-directory__desc {
  color: #45536b;
  font-size: 0.9375rem;
  line-height: 1.8;
  word-break: normal;
  line-break: strict;
}

.tool-page--article .tool-directory__action {
  margin-top: auto;
  padding-top: 6px;
  color: #1763ba;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}

.tool-page--article .tool-directory__action::after {
  margin-left: 6px;
  content: "→";
}

@media (min-width: 768px) {
  .tool-page--article .tool-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tool-page--article .tool-directory { gap: 10px; }
  .tool-page--article .tool-directory__link { padding: 14px; gap: 12px; }
  .tool-page--article .tool-directory__icon { width: 44px; height: 44px; }
  .tool-page--article .tool-directory__name { font-size: 1.0625rem; font-weight: 700; }
  .tool-page--article .tool-directory__desc { font-size: 0.875rem; line-height: 1.75; }
  .tool-page--article .tool-directory__action { font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  .tool-page--article .tool-directory__link { transition: none; }
}

/* --- パネル下の補足：小さすぎるgray textにしない --- */
.tool-page--article .tool-panel__note {
  margin: 16px 0 0;
  padding-top: 14px;
  color: #45536b;
  border-top: 1px dashed #e5eaf1;
  font-size: 0.9375rem;
  line-height: 1.8;
  word-break: normal;
  line-break: strict;
}

/* --- 本文の始まりがツールに近づきすぎないようにする --- */
.tool-page--article .article-content > section:first-child {
  margin-top: 56px;
}

/* ============================================================
   Character Counter Pilot：スマートフォン（767px以下）
   ------------------------------------------------------------
   設計基準は390px。ファーストビュー付近で「入力 → 操作 → 結果の始まり」
   まで認識できる高さに収める。
   ============================================================ */
@media (max-width: 767px) {
  /* SPのH2実測値：22px / 900 / 1.5 / padding 2px 0 10px 12px / 左罫4px */
  .tool-page--article .article-content > section > h2 {
    margin-bottom: 16px;
    padding: 2px 0 10px 12px;
    background: transparent;
    border-left-width: 4px;
    border-bottom: 1px solid #dce7f1;
    border-radius: 0;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.5;
  }

  .tool-page--article .article-content > section { margin-top: 48px; padding-top: 28px; }
  .tool-page--article .article-content > section:first-child { margin-top: 40px; }

  .tool-page--article .tool-panel { padding: 16px 15px 18px; }
  .tool-page--article .tool-panel__head { margin-bottom: 14px; padding-bottom: 13px; gap: 10px; }
  .tool-page--article .tool-panel__icon { width: 34px; height: 34px; }
  .tool-page--article .tool-panel__title { font-size: 1.125rem; }
  .tool-page--article .tool-panel__desc { font-size: 0.875rem; }

  .tool-page--article .tool-textarea { height: 148px; }

  /* 390pxのボタン配置。
     既定は2列（1ボタン約155px）。ラベルが長く折り返すもの
     （「入力した文章をコピー」「保存内容をすべて削除」など）は
     `--stack` で全幅にする。文言を縮めて意味を曖昧にしない。 */
  .tool-page--article .tool-actions {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
  }

  .tool-page--article .tool-actions .blog-button {
    min-height: 48px;
    padding-inline: 10px;
    flex: 1 1 calc(50% - 4px);
    font-size: 0.9375rem;
  }

  .tool-page--article .tool-actions--stack .blog-button {
    flex-basis: 100%;
    padding-inline: 14px;
  }

  .tool-page--article .tool-result { margin-top: 16px; padding: 14px 13px 15px; }
  .tool-page--article .tool-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tool-page--article .tool-stat { padding: 10px 8px 11px; }
  .tool-page--article .tool-stat__value { font-size: 1.75rem; }
  .tool-page--article .tool-panel__note { margin-top: 14px; font-size: 0.875rem; }

  .tool-page--article .tool-stat__label { min-height: 2.9em; }
  .tool-page--article .tool-check { font-size: 0.9375rem; }
  .tool-page--article .tool-output__value { font-size: 1.375rem; }
  .tool-page--article .tool-quadrants { grid-template-columns: minmax(0, 1fr); }
  .tool-page--article .tool-task { padding: 12px; }

  /* 重要度・緊急度は390px / 375pxなら2列に収まる（1列約145px、
     最長ラベル「重要ではない」は約140px）。360px未満で初めて縦積みへ落とす。 */
  .tool-page--article .tool-input,
  .tool-page--article .tool-select { min-height: 46px; font-size: 1rem; }

  /* --- FAQのSPアコーディオン：第14記事（FAQ Visual Canonical）と同じ補正 ---
     共通CSSの ＋ は summary の padding-top + 1.72em に絶対配置されるため、
     質問が2行になると＋だけが質問の上の余白へ落ちる。第14記事と同じく
     summary を [本文 minmax(0,1fr)][アイコン 20px] の2列にしてから
     ＋を縦中央へ置く。共通CSSは変更しない。 */
  .tool-page--article .article-faq__summary {
    display: grid;
    padding-right: 0;
    align-items: center;
    column-gap: 8px;
    grid-template-columns: minmax(0, 1fr) 20px;
  }

  .tool-page--article .article-content .article-faq__summary .article-faq__q {
    margin: 0;
    grid-column: 1;
  }

  .tool-page--article .article-faq__summary::before,
  .tool-page--article .article-faq__summary::after {
    top: 50%;
    right: 4px;
    margin-top: -1px;
  }
}

@media (max-width: 359px) {
  .tool-page--article .tool-task__meta { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   スクショ図解メーカー（/free-tools/screenshot-annotator/）
   ------------------------------------------------------------
   画像エディタ固有の部品だけを定義する。面・入力欄・ボタンは
   上の Tool Panel / .blog-button をそのまま使う。
   .sa-drop / .sa-toolbar / .sa-group / .sa-chip / .sa-swatch / .sa-stage /
   .sa-canvas はスクショ整形メーカー・整理図メーカーも共有する（変更時は3ページを確認する）。
   選択中の道具・色・太さは aria-pressed と枠線の形で示し、
   色だけで状態を伝えない。
   ============================================================ */

/* --- 読み込み前：貼り付け・ドロップ先 --- */
.tool-page--article .sa-drop {
  display: grid;
  padding: 36px 20px;
  justify-items: center;
  gap: 8px;
  text-align: center;
  background: #f7fafd;
  border: 2px dashed #c9d8ea;
  border-radius: 6px;
}

/* display:grid が hidden 属性を上書きしないようにする */
.tool-page--article .sa-drop[hidden] { display: none; }

.tool-page--article .sa-drop[data-state="over"] {
  background: #eaf4ff;
  border-color: #1763ba;
  border-style: solid;
}

.tool-page--article .sa-drop__lead {
  margin: 0;
  color: #062855;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.7;
  word-break: normal;
  line-break: strict;
}

.tool-page--article .sa-drop__sub {
  margin: 0;
  color: #45536b;
  font-size: 0.875rem;
  line-height: 1.75;
  word-break: normal;
  line-break: strict;
}

.tool-page--article .sa-drop__pick {
  position: relative;
  min-height: 48px;
  margin-top: 8px;
  padding-inline: 24px;
  border-radius: 6px;
  cursor: pointer;
}

.tool-page--article .sa-drop__pick:focus-within {
  outline: 3px solid var(--color-yellow);
  outline-offset: 2px;
}

.tool-page--article kbd {
  display: inline-block;
  padding: 0 6px;
  color: #062855;
  background: #fff;
  border: 1px solid #c9d8ea;
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.85em;
  line-height: 1.6;
}

/* --- 編集エリアの見出し行（通常時は全画面ボタンだけを右に置く） --- */
.tool-page--article .sa-editor__head {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.tool-page--article .sa-editor__title {
  display: none;
  margin: 0;
  color: #062855;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.5;
}

.tool-page--article .sa-editor__fullscreen {
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 6px;
  font-size: 0.875rem;
}

/* --- ツールバー --- */
.tool-page--article .sa-toolbar {
  display: grid;
  gap: 10px;
}

.tool-page--article .sa-group {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tool-page--article .sa-group__label {
  width: 3em;
  flex: none;
  color: #062855;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
}

.tool-page--article .sa-chip {
  display: inline-flex;
  min-height: 40px;
  padding: 6px 12px;
  align-items: center;
  gap: 6px;
  color: #14243a;
  background: #fff;
  border: 1px solid #c9d8ea;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.tool-page--article .sa-chip:hover { border-color: #1763ba; }

.tool-page--article .sa-chip:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 2px;
}

/* 選択中：色＋太い枠＋背景の3つで示す */
.tool-page--article .sa-chip[aria-pressed="true"] {
  color: #062855;
  background: #eaf4ff;
  border-color: #1763ba;
  box-shadow: inset 0 0 0 1px #1763ba;
}

.tool-page--article .sa-chip[disabled] {
  color: #8d9bb2;
  background: #f4f7fb;
  border-color: #e5eaf1;
  cursor: default;
}

.tool-page--article .sa-chip svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-page--article .sa-swatch {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
}

/* canvas 側の COLORS（screenshot-annotator.js）と同じ値 */
.tool-page--article .sa-swatch--orange { background: #f5820b; }
.tool-page--article .sa-swatch--red { background: #e0302e; }
.tool-page--article .sa-swatch--blue { background: #1a6fd6; }
.tool-page--article .sa-swatch--black { background: #1b1f27; }

.tool-page--article .sa-line {
  width: 16px;
  flex: none;
  background: currentColor;
  border-radius: 2px;
}

.tool-page--article .sa-line--1 { height: 2px; }
.tool-page--article .sa-line--2 { height: 4px; }
.tool-page--article .sa-line--3 { height: 6px; }

/* --- テキスト内容・STEP帯 --- */
.tool-page--article .sa-options {
  display: grid;
  margin-top: 16px;
  padding-top: 16px;
  gap: 16px;
  border-top: 1px dashed #e5eaf1;
}

.tool-page--article .sa-band .tool-check { font-size: 0.9375rem; }

.tool-page--article .sa-band__fields {
  display: flex;
  margin-top: 6px;
  flex-wrap: wrap;
  gap: 12px;
}

.tool-page--article .sa-band__fields > .tool-field {
  min-width: 0;
  margin-top: 0;
}

.tool-page--article .sa-band__step { flex: 0 1 120px; }
.tool-page--article .sa-band__title { flex: 1 1 220px; }

.tool-page--article .sa-options .tool-input[disabled] {
  color: #8d9bb2;
  background: #f4f7fb;
}

/* --- 編集面 --- */
.tool-page--article .sa-stage {
  display: flex;
  margin-top: 16px;
  padding: 12px;
  justify-content: center;
  background:
    repeating-conic-gradient(#eef2f7 0 25%, #f7fafd 0 50%) 0 0 / 16px 16px;
  border: 1px solid #e5eaf1;
  border-radius: 6px;
}

/* 縦長の画像でもページをスクロールできる余地を残すため、高さを画面の7割までにする。
   座標変換は getBoundingClientRect 基準なので、表示サイズが変わっても位置はずれない。 */
.tool-page--article .sa-canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  background: #fff;
  box-shadow: 0 0 0 1px #dfe8f3;
  touch-action: none;
  cursor: default;
}

.tool-page--article .sa-canvas[data-tool]:not([data-tool="select"]) { cursor: crosshair; }

.tool-page--article .sa-keys {
  margin: 8px 0 0;
  color: #45536b;
  font-size: 0.8125rem;
  line-height: 1.8;
  word-break: normal;
  line-break: strict;
}

.tool-page--article .sa-status {
  margin: 12px 0 0;
}

/* 選択中の要素と操作のヒント。色ではなく文言で状態を伝える。 */
.tool-page--article .sa-selected {
  margin: 10px 0 0;
  color: #062855;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.7;
  word-break: normal;
  line-break: strict;
}

/* ============================================================
   全画面で編集
   ------------------------------------------------------------
   編集エリアを表示領域いっぱいへ固定する（Fullscreen APIは使わない）。
   PC：上に見出し行とツールバー、中央に画像、右に文字・STEP帯・保存。
   サイトヘッダー（z-index 100）より前面に出す。
   ============================================================ */
html.sa-fullscreen-open { overflow: hidden; }

.tool-page--article .sa-panel.is-fullscreen .sa-editor {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  padding: 12px 20px 16px;
  gap: 10px 20px;
  grid-template-areas:
    "head head"
    "tools tools"
    "stage side"
    "sel side"
    "keys side";
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  background: #fff;
}

.tool-page--article .sa-panel.is-fullscreen .sa-editor__head {
  margin: 0;
  padding-bottom: 10px;
  grid-area: head;
  justify-content: space-between;
  border-bottom: 1px solid #eef2f7;
}

.tool-page--article .sa-panel.is-fullscreen .sa-editor__title { display: block; }

.tool-page--article .sa-panel.is-fullscreen .sa-toolbar {
  display: flex;
  grid-area: tools;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.tool-page--article .sa-panel.is-fullscreen .sa-group__label { width: auto; }

.tool-page--article .sa-panel.is-fullscreen .sa-stage {
  min-height: 0;
  margin: 0;
  grid-area: stage;
  align-items: center;
}

.tool-page--article .sa-panel.is-fullscreen .sa-canvas { max-height: 100%; }

.tool-page--article .sa-panel.is-fullscreen .sa-selected { margin: 0; grid-area: sel; }
.tool-page--article .sa-panel.is-fullscreen .sa-keys { margin: 0; grid-area: keys; }

.tool-page--article .sa-panel.is-fullscreen .sa-side {
  min-height: 0;
  grid-area: side;
  overflow-y: auto;
}

.tool-page--article .sa-panel.is-fullscreen .sa-options {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.tool-page--article .sa-panel.is-fullscreen .sa-actions .blog-button { flex-basis: 100%; }

/* 全画面中は、操作結果を見出し行の中央に小さな通知として見せる
   （下端だとキーボード操作の説明に重なるため） */
.tool-page--article .sa-panel.is-fullscreen .sa-status {
  position: fixed;
  z-index: 2001;
  top: 14px;
  left: 50%;
  margin: 0;
  padding: 8px 18px;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #c9d8ea;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(6, 40, 85, 0.16);
  flex-basis: auto;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .tool-page--article .sa-drop { padding: 24px 14px; }
  .tool-page--article .sa-drop__lead { font-size: 1rem; }
  .tool-page--article .sa-drop__pick { width: 100%; }
  .tool-page--article .sa-keys { display: none; }
  .tool-page--article .sa-group__label { width: 100%; }
  .tool-page--article .sa-chip { padding-inline: 10px; }
  .tool-page--article .sa-stage { padding: 6px; }
  .tool-page--article .sa-actions .blog-button { flex-basis: 100%; }
  .tool-page--article .sa-editor__fullscreen { width: 100%; }

  /* SPの全画面：1列に積み、編集エリア全体を縦スクロールさせる。
     画像の枠は高さを固定し、その中で縮小表示する。 */
  .tool-page--article .sa-panel.is-fullscreen .sa-editor {
    display: block;
    padding: 10px 12px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .tool-page--article .sa-panel.is-fullscreen .sa-editor__head { margin-bottom: 10px; }
  .tool-page--article .sa-panel.is-fullscreen .sa-editor__fullscreen { width: auto; }
  .tool-page--article .sa-panel.is-fullscreen .sa-toolbar { display: grid; gap: 8px; }
  .tool-page--article .sa-panel.is-fullscreen .sa-group__label { width: 100%; }
  .tool-page--article .sa-panel.is-fullscreen .sa-stage { margin-top: 12px; }
  .tool-page--article .sa-panel.is-fullscreen .sa-canvas { max-height: 62vh; }
  .tool-page--article .sa-panel.is-fullscreen .sa-selected { margin-top: 10px; }
  .tool-page--article .sa-panel.is-fullscreen .sa-options { margin-top: 16px; }
  /* SPは見出し行に余白が無いため、通知は画面下に出す */
  .tool-page--article .sa-panel.is-fullscreen .sa-status {
    top: auto;
    bottom: 16px;
    max-width: calc(100vw - 32px);
    white-space: normal;
  }
}

/* ============================================================
   スクショ整形メーカー（/free-tools/screenshot-framer/）
   ------------------------------------------------------------
   貼り付け先・設定ボタン・プレビュー面はスクショ図解メーカーの
   .sa-* 部品を共有し、ここでは画像一覧・上端/下端カットと切り抜きの
   調整面・書き出しサイズの表示だけを定義する。
   ============================================================ */
.tool-page--article .sf-heading {
  margin: 0;
  color: #062855;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}

.tool-page--article .sf-heading__count {
  margin-left: 8px;
  color: #45536b;
  font-weight: 500;
}

.tool-page--article .sf-images__head {
  display: flex;
  margin-bottom: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.tool-page--article .sf-thumbs {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.tool-page--article .sf-thumb {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 8px;
  gap: 8px;
  align-content: start;
  background: #fff;
  border: 1px solid #e5eaf1;
  border-radius: 6px;
}

/* 調整中：枠の太さと文言（「調整中」）の両方で示す */
.tool-page--article .sf-thumb[data-active="true"] {
  border-color: #1763ba;
  box-shadow: inset 0 0 0 1px #1763ba;
}

.tool-page--article .sf-thumb__pick {
  display: grid;
  padding: 6px;
  justify-items: center;
  gap: 6px;
  color: #062855;
  background: #f7fafd;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  cursor: pointer;
}

.tool-page--article .sf-thumb__pick:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 2px;
}

/* 縦長・横長が混ざってもカードの高さがそろうよう、サムネイルは固定の枠に収める */
.tool-page--article .sf-thumb__frame {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: center;
}

.tool-page--article .sf-thumb__frame canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 0 0 1px #dfe8f3;
}

.tool-page--article .sf-thumb__label {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

.tool-page--article .sf-thumb__state {
  color: #45536b;
  font-size: 0.75rem;
  line-height: 1.4;
}

.tool-page--article .sf-thumb[data-active="true"] .sf-thumb__state {
  color: #062855;
  font-weight: 700;
}

.tool-page--article .sf-thumb__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tool-page--article .sf-thumb__chip {
  min-height: 36px;
  padding: 4px 8px;
  flex: 1 1 auto;
  justify-content: center;
  font-size: 0.8125rem;
}

/* --- 上端/下端カット・切り抜きの調整面 --- */
.tool-page--article .sf-adjust {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #e5eaf1;
}

.tool-page--article .sf-adjust[hidden] { display: none; }

.tool-page--article .sf-adjust__body {
  display: grid;
  margin-top: 10px;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.tool-page--article .sf-adjust__stage {
  display: flex;
  padding: 8px;
  justify-content: center;
  background:
    repeating-conic-gradient(#eef2f7 0 25%, #f7fafd 0 50%) 0 0 / 16px 16px;
  border: 1px solid #e5eaf1;
  border-radius: 6px;
}

/* ドラッグで切り抜くため、スクロール操作と取り合わないようにする */
.tool-page--article .sf-adjust__canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 50vh;
  touch-action: none;
  cursor: crosshair;
}

.tool-page--article .sf-adjust__controls {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.tool-page--article .sf-adjust__controls .tool-field { width: 100%; margin-top: 0; }

.tool-page--article .sf-cut {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-page--article .sf-cut__range {
  min-width: 0;
  flex: 1 1 auto;
  accent-color: var(--color-primary-bright);
}

.tool-page--article .sf-cut__number {
  width: 6em;
  flex: none;
}

.tool-page--article .sf-cut__hint { margin: 0; }

.tool-page--article .sf-cut__unit {
  color: #45536b;
  font-size: 0.875rem;
}

.tool-page--article .sf-crop-state {
  margin: 0;
  color: #062855;
  font-size: 0.875rem;
  line-height: 1.7;
  word-break: normal;
  line-break: strict;
}

/* --- 仕上がりの設定 --- */
.tool-page--article .sf-toolbar {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #e5eaf1;
}

/* canvas 側の BACKGROUNDS（screenshot-framer.js）と同じ値 */
.tool-page--article .sf-swatch--blue { background: #e8f1fc; box-shadow: inset 0 0 0 1px #c9d8ea; }
.tool-page--article .sf-swatch--gray { background: #eef0f3; box-shadow: inset 0 0 0 1px #c9d8ea; }
.tool-page--article .sf-swatch--beige { background: #f6efe3; box-shadow: inset 0 0 0 1px #c9d8ea; }
.tool-page--article .sf-swatch--white { background: #ffffff; box-shadow: inset 0 0 0 1px #c9d8ea; }

.tool-page--article .sf-options {
  display: grid;
  margin-top: 12px;
  gap: 12px;
}

.tool-page--article .sf-row-options[hidden],
.tool-page--article .sf-notes[hidden] { display: none; }

.tool-page--article .sf-date__month { max-width: 14em; }

.tool-page--article .sf-options .tool-input[disabled] {
  color: #8d9bb2;
  background: #f4f7fb;
}

.tool-page--article .sf-size {
  margin: 8px 0 0;
  color: #45536b;
  font-size: 0.8125rem;
  line-height: 1.7;
}

.tool-page--article .sf-privacy-check {
  margin: 12px 0 0;
  padding: 10px 12px;
  color: #062855;
  background: #fff8ec;
  border-left: 3px solid #f5820b;
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.75;
  word-break: normal;
  line-break: strict;
}

.tool-page--article .sf-status { margin: 12px 0 0; }

@media (max-width: 767px) {
  /* SPは3枚を横に並べると文言が折れるため、1枚ずつ横長の行にする */
  .tool-page--article .sf-thumbs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tool-page--article .sf-thumb {
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
  }
  .tool-page--article .sf-thumb__frame { height: 72px; }
  .tool-page--article .sf-thumb__tools { align-content: center; }
  .tool-page--article .sf-adjust__body { grid-template-columns: minmax(0, 1fr); }
  .tool-page--article .sf-actions .blog-button { flex-basis: 100%; }
}

/* ============================================================
   整理図メーカー（/free-tools/organize-chart/）
   ------------------------------------------------------------
   設定ボタン・プレビュー面は .sa-* 部品を共有する。ここでは入力欄の
   並べ方・文字数の表示・枠に収まらないときの知らせだけを定義する。
   収まらない欄は aria-invalid の枠線（tool-input の既存スタイル）と
   一覧の文言の両方で示し、色だけで伝えない。
   ============================================================ */
.tool-page--article .oc-fields {
  display: grid;
  margin-top: 16px;
  padding-top: 16px;
  gap: 14px;
  border-top: 1px dashed #e5eaf1;
}

.tool-page--article .oc-fields .tool-field { margin-top: 0; min-width: 0; }

.tool-page--article .oc-type-panel {
  display: grid;
  gap: 12px;
}

.tool-page--article .oc-type-panel[hidden],
.tool-page--article .oc-item[hidden] { display: none; }

.tool-page--article .oc-count { margin-top: 4px; }

/* 「ステップ数」などは3文字幅の共通ラベル枠に収まらないため、この行だけ幅を文字に合わせる */
.tool-page--article .oc-count .sa-group__label { width: auto; margin-right: 6px; }

/* 手順の説明（40文字）は2行で全文が見えるようにする */
.tool-page--article .tool-textarea.oc-textarea {
  height: auto;
  min-height: 0;
  resize: vertical;
}

.tool-page--article .oc-item__fields {
  display: grid;
  gap: 10px 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.tool-page--article .oc-type-panel > .oc-item__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tool-page--article .oc-item__fields--3 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); }

.tool-page--article .oc-item .tool-fieldset__legend { margin-bottom: 6px; }

/* ラベルの右端に「入力した文字数／上限」を出す */
.tool-page--article .oc-fields .tool-field__label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.tool-page--article .oc-counter {
  flex: none;
  color: #45536b;
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tool-page--article .oc-problems {
  margin-top: 16px;
  padding: 12px 14px;
  color: #062855;
  background: #fff8ec;
  border-left: 3px solid #f5820b;
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.75;
  word-break: normal;
  line-break: strict;
}

.tool-page--article .oc-problems[hidden] { display: none; }

.tool-page--article .oc-problems__lead { margin: 0; font-weight: 700; }

.tool-page--article .oc-problems ul { margin: 4px 0 0; padding-left: 1.4em; }

/* canvas 側の THEMES（organize-chart.js）と同じ値 */
.tool-page--article .oc-swatch--blue { background: #1763ba; }
.tool-page--article .oc-swatch--green { background: #1d7a4f; }
.tool-page--article .oc-swatch--orange { background: #b8530a; }

.tool-page--article .oc-actions { margin-top: 16px; }

.tool-page--article .oc-status { margin: 12px 0 0; }

@media (max-width: 767px) {
  .tool-page--article .oc-item__fields,
  .tool-page--article .oc-type-panel > .oc-item__fields,
  .tool-page--article .oc-item__fields--3 { grid-template-columns: minmax(0, 1fr); }
  .tool-page--article .oc-actions .blog-button { flex-basis: 100%; }
}