@charset "UTF-8";
/**
 * tools-page.css — 「ツールのページ」としての外枠（PHASE B / 2026-09-18）。
 *
 * 役割の分け方
 *   tools-embed.css    記事用の装飾を打ち消す（Cocoonに勝つための最小限）
 *   profit-calculator.css / fee-ledger.css   ツール本体の見た目
 *   このファイル       ページそのものを「読み物」から「道具」に変える
 *
 * なぜ必要か（2026-09-18 に 375×812 で実測した本番の値）
 *   H1 のすぐ下に シェアボタン6個（約118px）と投稿日が入り、
 *   さらに本文の導入2段落（約190px）が続くため、
 *   最初の入力欄が y=885 まで落ちていた。
 *   店頭で開いて 1画面目に入力できないので、道具としては使えない。
 *
 *   ここでやるのは3つだけ。
 *     1. 読み物用の部品（上下のシェアボタン・投稿日・アイキャッチ）をツールのページでは出さない
 *     2. 本文の並びを「ツール → 説明」にする（order。DOMは触らない）
 *     3. ページの地をツールと同じクリームに揃え、記事の白い紙面から切り替える
 *
 *   2 について: 順序を入れ替えても、先に来る2段落にはフォーカスできる要素が無いため、
 *   キーボードのタブ順と見た目の順序は食い違わない。
 *   読み上げは「説明 → ツール」のまま（初めての利用者には、この順が正しい）。
 *
 * 適用範囲
 *   body.sail-tool-page（inc/tools.php が付ける）だけ。
 *   ショートコードを置いていないページには1行も効かない。
 */

/* =====================================================================
   1. ページの地
   ===================================================================== */
body.sail-tool-page {
  background: #faf7f2;   /* profit-calculator.css の --pc-bg と同じクリーム */
}
body.sail-tool-page #content,
body.sail-tool-page .main,
body.sail-tool-page .article {
  background: transparent;
}
/* Cocoonの本文枠の白い紙面と影を外す。ツールが「紙の上の道具」に見えるようにする。 */
body.sail-tool-page .main {
  border: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
/* 2026-09-19（PASS 5）: 820px → 920px（約12%広げた）。
   1440pxで左右に310pxずつ空き、道具そのものが小さく見えていた。
   これ以上広げると入力と結果が離れて管理画面になるので、ここで止める。
   ツールより下の説明文は 42em のままなので、読む幅は変わらない。 */
body.sail-tool-page #content-in {
  max-width: 920px;
}

@media (prefers-color-scheme: dark) {
  body.sail-tool-page { background: #1c1a18; }
}

/* =====================================================================
   2. 読み物用の部品を出さない
   ===================================================================== */
/* シェアボタン（上・下とも）。道具のページで最初に目に入る要素ではない。 */
body.sail-tool-page .sns-share,
body.sail-tool-page .sns-follow,
/* 投稿日。料金の「最終確認日」はツールの中に出るので、ここの日付は誤解のもとになる。 */
body.sail-tool-page .date-tags,
body.sail-tool-page .article-header .eye-catch-wrap,
body.sail-tool-page .author-info,
body.sail-tool-page .entry-categories-tags {
  display: none;
}

/* =====================================================================
   3. 上部の詰め
   ---------------------------------------------------------------------
   375×812 で最初の入力欄が y=515 まで落ちていた（2026-09-18 実測）。
   内訳は、Cocoonの余白60px・見出しの上下padding29px・キャラクターの行24px。
   道具のページでは、この「読み物のための余白」を削って1画面目を入力に使う。
   本文（ツールより下の説明）は元の余白のままにする。
   ===================================================================== */
/* サイトの説明文（キャッチフレーズ）。ロゴとサイト名は残すので、ブランドは消えない。
   道具のページの1画面目は入力に使いたいので、ここだけ出さない。 */
body.sail-tool-page .tagline {
  display: none;
}
/* 2026-09-20（STAGE 1）さらに詰めた理由。
   このページの見出しは「せどり利益計算ツール（販路別の手取り比較）」で、
   375pxでは2行になる。そのぶん、入力欄の下に置いた「答えの置き場」
   （売ったあとに残る利益／— 円／売値を入れると、ここに出ます。）が
   画面の折り返しの外へ落ちていた（実測で 25px はみ出し）。
   1画面目で「答えがどこに出るか」が見えることは、初心者が最初に迷う点なので、
   読み物用の余白のほうを削ってそちらを取る。
   見出しを短くすれば根本解決だが、それはWordPressの投稿タイトルの話なので
   ここではやらない（P2）。 */
body.sail-tool-page #content { padding-top: 0; margin-top: 4px; }
body.sail-tool-page .main { padding-top: 2px; }
body.sail-tool-page .entry-content { margin-top: 4px; }

body.sail-tool-page .article-header {
  margin-bottom: 0;
  padding-top: 0;
}
body.sail-tool-page h1.entry-title {
  margin: 0 0 4px;
  padding: 0 0 6px;
  font-size: clamp(21px, 5.2vw, 30px);
  line-height: 1.3;
  letter-spacing: .01em;
  color: #12294d;              /* Design v2.3 の紺 */
}
@media (prefers-color-scheme: dark) {
  body.sail-tool-page h1.entry-title { color: #eee8e0; }
}

/* =====================================================================
   4. 本文の並び替え（ツールを先に）
   ===================================================================== */
body.sail-tool-page .entry-content {
  display: flex;
  flex-direction: column;
}
body.sail-tool-page .entry-content > .sail-tool {
  order: -1;
  margin: 0 0 32px;
}
/* ツールより下は「詳しく知りたい人向けの説明」。本文として素直に読める幅に絞る。 */
body.sail-tool-page .entry-content > :not(.sail-tool) {
  max-width: 42em;
  width: 100%;
  align-self: center;
}

/* =====================================================================
   5. ツール一覧（/tools/）— 「せどりで迷ったときの道具箱」
   ---------------------------------------------------------------------
   カード2枚を並べない。「何を確認したいか」への答えを2つ置くだけにする。
   見出しの下に太い紺の罫線を引き、選択肢そのものを大きなリンクとして扱う。
   ===================================================================== */
.sail-hub {
  --hub-navy: #12294d;
  --hub-ink: #2b2622;
  --hub-ink-soft: #5f574f;
  --hub-amber: #f0a92c;
  --hub-line: #e6ded3;
  --hub-paper: #ffffff;

  max-width: 640px;
  margin: 8px 0 0;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: var(--hub-ink);
}
@media (prefers-color-scheme: dark) {
  .sail-hub {
    --hub-navy: #c7d6ea;
    --hub-ink: #eee8e0;
    --hub-ink-soft: #bdb4aa;
    --hub-line: #3a3530;
    --hub-paper: #26231f;
  }
}

.sail-hub__ask {
  margin: 0 0 2px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--hub-navy);
  letter-spacing: .01em;
}

.sail-hub__choice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon body go";
  column-gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 16px 2px;
  border-top: 2px solid var(--hub-navy);
  color: inherit;
  text-decoration: none;
}
.sail-hub__choice + .sail-hub__choice { border-top-width: 1px; border-top-color: var(--hub-line); }
.sail-hub__choice:last-child { border-bottom: 2px solid var(--hub-navy); }

.sail-hub__icon {
  grid-area: icon;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-top: 2px;
  border-radius: 10px;
  background: var(--hub-paper);
  border: 1px solid var(--hub-line);
  color: var(--hub-navy);
}
.sail-hub__icon svg { width: 21px; height: 21px; }

.sail-hub__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sail-hub__want {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--hub-navy);
}
.sail-hub__desc {
  font-size: .87rem;
  line-height: 1.7;
  color: var(--hub-ink-soft);
}
/* 2026-09-18（PASS 4）：行の中に「利益計算→」という2つ目の名前を置いていた。
   見出しが既に行き先を言っているので、同じことを別の言葉で二度言っているだけで、
   しかも「押すのはこの小さい文字だけ」に見えていた。
   矢印1つに変えて、押す場所は行そのものだと分かるようにする。 */
.sail-hub__go {
  grid-area: go;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hub-line);
  font-size: 1rem;
  font-weight: 700;
  color: var(--hub-navy);
  transition: background .18s ease, border-color .18s ease;
}
.sail-hub__choice:hover .sail-hub__go,
.sail-hub__choice:focus-visible .sail-hub__go {
  background: var(--hub-amber);
  border-color: var(--hub-amber);
  color: #12294d;
}
.sail-hub__choice:focus-visible { outline: 2px solid var(--hub-navy); outline-offset: 3px; }

@media (min-width: 640px) {
  .sail-hub__choice { column-gap: 18px; }
}