/* 全ページ共通：配色・共通ヘッダー・パンくず・ツールごとの色とアイコン・関連ツール */
:root{
  --bg: #F7F5EF;
  --panel: #FFFFFF;
  --panel-line: #E6E2D6;
  --ink: #2E2A24;
  --ink-soft: #82786C;
  --accent: #CC7A46;
  --accent-soft: #F4E3D2;
  --down: #2E8368;
  --down-soft: #E5F0E7;
  --brand: #3B5A72;
  --brand-soft: #E3EAF0;
  --radius: 4px;
}

/* ---- ツールごとの色（住み替え＝緑、売却＝オレンジ、ローン系＝紺）とアイコン ---- */
[data-tool="sumikae"]{ --tool:var(--down); --tool-soft:var(--down-soft); }
[data-tool="tedori"]{ --tool:var(--accent); --tool-soft:var(--accent-soft); }
[data-tool="kuriage"], [data-tool="kinri"], [data-tool="kariire"]{ --tool:var(--brand); --tool-soft:var(--brand-soft); }

[data-tool="sumikae"]{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12l7-6 7 6M4 10.5V19h10v-8.5M17 16h5M20 14l2 2-2 2'/%3E%3C/svg%3E"); }
[data-tool="tedori"]{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 7.5L12 12l3.5-4.5M12 12v5M9 12.5h6M9 15h6'/%3E%3C/svg%3E"); }
[data-tool="kuriage"]{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4M9 16l3-3 3 3'/%3E%3C/svg%3E"); }
[data-tool="kinri"]{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M5 15l5-5 3 3 6-7M15 6h4v4'/%3E%3C/svg%3E"); }
[data-tool="kariire"]{ --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5.5-6'/%3E%3C/svg%3E"); }

.tool-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:8px;
  background:var(--tool-soft);
  color:var(--tool);
}
.tool-icon{
  display:block;
  width:24px;
  height:24px;
  background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat;
}

/* ---- 共通ヘッダー ---- */
.site-header{
  background:var(--panel);
  border-bottom:1px solid var(--panel-line);
}
body[data-tool] .site-header{ border-bottom:3px solid var(--tool); }
.site-header-inner{
  max-width:920px;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px 16px;
  flex-wrap:wrap;
}
.site-header .site-name{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  color:var(--ink);
  text-decoration:none;
}
.site-header .site-name strong{ font-size:18px; font-weight:900; letter-spacing:.02em; color:var(--brand); }
.site-header .site-name span{ font-size:11.5px; color:var(--ink-soft); }
.site-header nav{ display:flex; gap:16px; font-size:13px; }
.site-header nav a{ color:var(--brand); text-decoration:none; }
.site-header nav a:hover{ text-decoration:underline; text-underline-offset:3px; }
.site-header a:focus-visible,
.breadcrumb a:focus-visible,
.tool-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- パンくず ---- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:12px;
  color:var(--ink-soft);
}
.breadcrumb a{ color:var(--brand); text-underline-offset:2px; }

/* ---- ツールページの見出しまわり ---- */
h1.tool-title{ display:flex; align-items:center; gap:12px; }
body[data-tool] .intro-box{ background:var(--tool-soft); border-left-color:var(--tool); }

/* ---- 関連ツール ---- */
.related{ margin-top:34px; }
.related > h2{ font-size:16px; font-weight:700; margin:0 0 10px; }
.tool-link{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-left:4px solid var(--tool);
  border-radius:var(--radius);
  padding:14px 18px;
  color:var(--ink);
  text-decoration:none;
}
.tool-link:hover{ border-color:var(--tool); }
.tool-link .text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.tool-link .lead{ font-size:12.5px; color:var(--ink-soft); }
.tool-link strong{ font-size:15.5px; }
.tool-link .arrow{ color:var(--tool); font-weight:700; }
.breadcrumb{ margin:0 0 12px; }