/* 二仙ツール 使い方とヒント（記事ページ・記事一覧の共通デザイン） */
:root {
  --ink:#1a2129;
  --muted:#5b6672;
  --ink-soft:#3b4550;
  --accent:#2f54d1;
  --accent-hover:#2745ad;
  --accent-soft:#eaf0ff;
  --bg:#ffffff;
  --surface2:#f6f8fa;
  --line:#d8dee5;
  --line-dash:#b7c1cc;
  --line-step:#c9d4ff;
  --caution-bg:#fdf3dd;
  --caution-ink:#7a4d05;
  --hint-bg:#e6f4ec;
  --hint-ink:#1d6b43;
  --w-text:720px;
  --w-wide:1040px;
  --gap-section:clamp(56px,8vw,88px);
  --font-ui:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic","Meiryo",system-ui,sans-serif;
}
*,*::before,*::after {
  box-sizing:border-box;
}
html {
  -webkit-text-size-adjust:100%;
  scroll-padding-top:1.5rem;
}
body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:17px;
  line-height:1.95;
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
img {
  max-width:100%;
  height:auto;
  display:block;
}
a {
  color:var(--accent);
  text-underline-offset:4px;
}
a:hover {
  color:var(--accent-hover);
}
a:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px;
}
main:focus-visible {
  outline:none;
}
p {
  margin:0 0 1em;
}
p:last-child {
  margin-bottom:0;
}
h1,h2,h3 {
  font-weight:700;
}
strong {
  font-weight:700;
}

/* ---------- 試作表示・スキップリンク ---------- */
.draft-notice {
  text-align:center;
  background:var(--ink);
  color:#fff;
  font-size:12px;
  line-height:1.6;
  padding:4px 16px;
  letter-spacing:.08em;
}
.skip-link {
  position:absolute;
  top:-100px;
  left:16px;
  background:#fff;
  padding:12px;
  z-index:5;
}
.skip-link:focus {
  top:12px;
}

/* ---------- ヘッダー・フッター（TOPページと同じ見た目） ---------- */
.site-header {
  background:#fff;
  border-bottom:1px solid var(--line);
}
.site-header__inner {
  max-width:var(--w-wide);
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 24px;
}
.brand {
  margin-right:auto;
}
.brand-name {
  margin:0;
  font-size:1.2rem;
  font-weight:700;
  line-height:1.3;
}
.brand-name a {
  color:var(--ink);
  text-decoration:none;
}
.brand-sub {
  margin:2px 0 0;
  font-size:.78rem;
  color:var(--muted);
  line-height:1.4;
}
.site-nav ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:0 18px;
  font-size:.85rem;
}
.site-nav a {
  color:var(--ink);
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  border-bottom:2px solid transparent;
}
.site-nav a:hover {
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.site-nav a.is-current {
  border-bottom-color:var(--accent);
}
.site-footer {
  background:var(--surface2);
  border-top:1px solid var(--line);
  font-size:.85rem;
  color:var(--muted);
}
.site-footer__inner {
  max-width:var(--w-wide);
  margin:0 auto;
  padding:20px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  align-items:center;
}
.site-footer p {
  margin:0 auto 0 0;
}
.site-footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:0 18px;
}
.site-footer nav a {
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

/* ---------- ページの骨組み ---------- */
main {
  flex:1;
  width:100%;
  max-width:var(--w-wide);
  margin:0 auto;
  padding:20px 20px 64px;
}
.breadcrumbs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:.8rem;
  color:var(--muted);
  margin:0 0 clamp(20px,4vw,36px);
}
.breadcrumbs a {
  color:var(--muted);
  text-decoration:none;
}
.breadcrumbs a:hover {
  color:var(--accent);
  text-decoration:underline;
}

/* ---------- 記事の冒頭 ---------- */
.hero {
  max-width:820px;
  margin:0 auto;
  text-align:center;
}
.category {
  margin:0;
  display:inline-block;
  border:1px solid var(--accent);
  color:var(--accent);
  font-size:.8rem;
  font-weight:700;
  line-height:1.8;
  padding:1px 12px;
  border-radius:999px;
}
.hero h1 {
  font-size:clamp(1.7rem,4.6vw,2.7rem);
  line-height:1.4;
  margin:14px 0 16px;
  text-wrap:balance;
}
.lead {
  margin:0 auto;
  max-width:680px;
  color:var(--muted);
  text-align:left;
  text-wrap:pretty;
}
.eyecatch {
  width:100%;
  aspect-ratio:1280/670;
  object-fit:cover;
  margin:clamp(24px,4vw,40px) 0 0;
  border-radius:16px;
  background:var(--surface2);
}

/* ---------- 本文の幅（本文は720px、帯・並べる部品は1040px） ---------- */
.article-body > *,.article-body > section > * {
  max-width:var(--w-text);
  margin-left:auto;
  margin-right:auto;
}
.article-body > section {
  max-width:none;
  margin-top:var(--gap-section);
}
.article-body > :first-child {
  margin-top:clamp(32px,5vw,48px);
}
.article-body section > h2 {
  font-size:clamp(1.35rem,3.2vw,1.75rem);
  line-height:1.45;
  margin-bottom:24px;
  margin-top:0;
}
.article-body section > h2::before {
  content:"";
  display:block;
  width:32px;
  height:4px;
  border-radius:2px;
  background:var(--accent);
  margin-bottom:12px;
}
.article-body h3 {
  font-size:1.12rem;
  line-height:1.6;
  margin-top:36px;
  margin-bottom:8px;
}
.article-body h2 + h3 {
  margin-top:0;
}
.article-body > section > p:has(+ .split) {
  margin-bottom:24px;
}
.text-link {
  font-weight:700;
}

/* ---------- 目次 ---------- */
.toc {
  margin-top:28px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 24px;
}
.toc > p {
  margin:0 0 4px;
  font-size:.85rem;
  font-weight:700;
}
.toc ol {
  margin:0;
  padding-left:1.4em;
  font-size:.95rem;
  line-height:2;
}

/* ---------- 画像と文章を左右に並べる帯（画像は左。--reverse で右） ---------- */
.split {
  display:flex;
  flex-wrap:wrap;
  gap:24px 48px;
  align-items:center;
  background:var(--surface2);
  border-radius:16px;
  padding:clamp(20px,4vw,40px);
  margin-bottom:0;
}
.article-body .split {
  max-width:none;
}
.split--reverse {
  flex-direction:row-reverse;
}
.split__media {
  flex:1 1 280px;
  min-width:0;
  margin:0;
}
.split__text {
  flex:1.2 1 320px;
  min-width:0;
}
.split__media img,.split__media .placeholder {
  width:100%;
  max-width:380px;
  margin:0 auto;
  border-radius:12px;
}
.split__media img {
  background:#fff;
  border:1px solid var(--line);
}
.split__media figcaption {
  text-align:center;
}

/* ---------- 図・スクリーンショット ---------- */
.figure {
  margin-top:28px;
  margin-bottom:28px;
}
.figure img {
  border:1px solid var(--line);
}
.figure img,.figure .placeholder {
  border-radius:12px;
}
.figure--phone {
  max-width:200px;
}
.figure--phone img,.figure--phone .placeholder {
  border-radius:20px;
}
figcaption {
  font-size:.8rem;
  color:var(--muted);
  margin-top:8px;
  line-height:1.7;
}
.placeholder {
  aspect-ratio:4/3;
  background:repeating-linear-gradient(135deg,#fff 0 10px,#eef1f4 10px 20px);
  border:1px dashed var(--line-dash);
  display:grid;
  place-items:center;
  font-size:.78rem;
  color:var(--muted);
  text-align:center;
  padding:12px;
}
.figure--phone .placeholder {
  aspect-ratio:9/19;
}

/* ---------- 手順（丸い番号を縦線でつなぐ） ---------- */
.steps {
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:step;
}
.steps > li {
  counter-increment:step;
  display:grid;
  grid-template-columns:30px 1fr;
  gap:0 14px;
  padding-bottom:18px;
  background:linear-gradient(var(--line-step),var(--line-step)) 14px 30px / 2px 100% no-repeat;
}
.steps > li::before {
  content:counter(step);
  grid-column:1;
  grid-row:1 / span 9;
  width:30px;
  height:30px;
  border-radius:50%;
  border:2px solid var(--accent);
  background:#fff;
  color:var(--accent);
  font-weight:700;
  font-size:.9rem;
  line-height:1;
  display:grid;
  place-items:center;
  margin-top:.2em;
}
.steps > li:last-child {
  padding-bottom:0;
  background:none;
}
.steps > li:last-child::before {
  background:var(--accent);
  color:#fff;
}
.steps > li > * {
  grid-column:2;
}
.steps strong {
  display:block;
}
.steps p {
  margin:2px 0 0;
  font-size:.95rem;
}
/* 本文にそのまま置いた手順は、次の段落とのあいだを空ける（帯の中の手順には付けない） */
.article-body section > .steps {
  margin-bottom:28px;
}

/* ---------- 引用（質問文の例など、そのまま写して使う文章） ---------- */
.article-body blockquote {
  margin-top:28px;
  margin-bottom:28px;
  padding:18px 22px;
  background:var(--surface2);
  border-left:4px solid var(--accent);
  border-radius:0 12px 12px 0;
  color:var(--ink-soft);
  font-size:.95rem;
  line-height:1.85;
}

/* ---------- 二仙の吹き出し（要点・注意・ヒント） ---------- */
.bubble {
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-top:32px;
  margin-bottom:32px;
  --bubble-bg:var(--accent-soft);
  --bubble-ink:var(--accent);
}
.bubble--caution {
  --bubble-bg:var(--caution-bg);
  --bubble-ink:var(--caution-ink);
}
.bubble--hint {
  --bubble-bg:var(--hint-bg);
  --bubble-ink:var(--hint-ink);
  margin-top:20px;
}
.bubble__face {
  flex:0 0 auto;
  width:56px;
  height:56px;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  background:var(--bubble-bg);
}
.bubble__body {
  flex:1;
  min-width:0;
  background:var(--bubble-bg);
  border-radius:4px 16px 16px 16px;
  padding:14px 18px;
  font-size:.95rem;
}
.bubble__label {
  margin:0;
  font-size:.78rem;
  font-weight:700;
  color:var(--bubble-ink);
}
.bubble__title {
  margin:0;
  font-weight:700;
  color:var(--bubble-ink);
}
.bubble__body > * + * {
  margin-top:2px;
}
.bubble--point {
  gap:16px;
  align-items:flex-end;
}
.bubble--point .bubble__char {
  flex:0 0 auto;
  width:clamp(72px,14vw,104px);
}
.bubble--point .bubble__body {
  border-radius:16px 16px 16px 4px;
  padding:16px 20px;
  margin-bottom:12px;
  font-size:1rem;
}
.bubble--point .bubble__label {
  font-size:.8rem;
}
.bubble--point .bubble__text {
  margin-top:4px;
  font-size:1.08rem;
  font-weight:700;
  line-height:1.75;
}

/* ---------- 特徴（1つだけ／3つ並べる） ---------- */
.feature {
  margin-top:28px;
  margin-bottom:28px;
  display:flex;
  flex-wrap:wrap;
  gap:16px 24px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 24px;
}
.feature__media {
  flex:0 0 120px;
  aspect-ratio:1;
  border-radius:12px;
  border:1px solid var(--line);
  object-fit:cover;
}
.feature__text {
  flex:1 1 280px;
  min-width:0;
}
.feature__label,.feature-card__label {
  margin:0;
  font-size:.78rem;
  font-weight:700;
  color:var(--accent);
}
.article-body .feature h3 {
  margin:2px 0 6px;
  font-size:1.15rem;
  line-height:1.5;
}
.feature p {
  margin:0 0 6px;
  font-size:.95rem;
}
.feature a {
  font-weight:700;
  font-size:.93rem;
}
.feature-grid {
  background:var(--surface2);
  border-radius:16px;
  padding:clamp(20px,4vw,40px);
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.article-body .feature-grid {
  max-width:none;
}
.feature-card {
  flex:1 1 260px;
  min-width:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.feature-card__media {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-bottom:1px solid var(--line);
}
.feature-card__text {
  padding:16px 18px 18px;
}
.article-body .feature-card h3 {
  margin:2px 0 6px;
  font-size:1.08rem;
  line-height:1.5;
}
.feature-card p {
  font-size:.92rem;
  line-height:1.8;
}

/* ---------- ツール案内（大：手順の直後／小：記事の最後） ---------- */
.tool-cta {
  margin-top:32px;
  margin-bottom:32px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 24px;
}
.tool-cta__label {
  margin:0;
  font-size:.8rem;
  font-weight:700;
  color:var(--accent);
}
.tool-cta__name {
  margin:2px 0 4px;
  font-size:1.3rem;
  font-weight:700;
  line-height:1.5;
}
.tool-cta__desc {
  margin:0 0 16px;
  font-size:.93rem;
  color:var(--muted);
}
.button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4em;
  min-height:48px;
  padding:10px 22px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  line-height:1.5;
  text-align:center;
}
.button:hover {
  background:var(--accent-hover);
  color:#fff;
}
.tool-cta-end {
  margin-top:28px;
  background:var(--accent-soft);
  border-radius:16px;
  padding:20px 24px;
  display:flex;
  flex-wrap:wrap;
  gap:14px 20px;
  align-items:center;
}
.tool-cta-end__face {
  flex:0 0 auto;
  width:64px;
  height:64px;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  background:#fff;
}
.tool-cta-end__text {
  flex:1 1 240px;
  min-width:0;
}
.tool-cta-end__name {
  margin:0;
  font-size:1.1rem;
  font-weight:700;
  line-height:1.5;
}
.tool-cta-end__desc {
  margin:2px 0 0;
  font-size:.9rem;
  color:var(--ink-soft);
  line-height:1.7;
}
.tool-cta-end .button {
  flex:1 1 200px;
  padding:10px 20px;
}

/* ---------- 表 ---------- */
.table-scroll {
  border:1px solid var(--line);
  border-radius:12px;
  overflow-x:auto;
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:.93rem;
  line-height:1.7;
}
th,td {
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
}
th {
  padding:10px 14px;
  background:var(--surface2);
}
td {
  padding:12px 14px;
}
tbody tr:last-child td {
  border-bottom:0;
}
th:first-child {
  width:40%;
}
td:first-child {
  font-weight:600;
}
/* 3列以上の比較表：見出しの列を決まった幅にし、残りの列を同じ幅にそろえる。
   狭い画面では表を横にスクロールし、見出しの列は左に残して何の行か分かるようにする */
.table--compare {
  table-layout:fixed;
  min-width:600px;
}
.table--compare th:first-child {
  width:10em;
  position:sticky;
  left:0;
  z-index:1;
  box-shadow:inset -1px 0 0 var(--line);
}
.table--compare tbody th {
  padding:12px 14px;
}
.table--compare tbody tr:last-child th {
  border-bottom:0;
}
.table-scroll + p {
  margin-top:16px;
}

/* ---------- 記事の最後の回遊（関連記事・ツール紹介） ---------- */
.article-body > .more {
  max-width:none;
  margin-top:clamp(64px,9vw,96px);
  padding-top:clamp(32px,5vw,48px);
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:clamp(36px,5vw,48px);
}
.more h2 {
  margin:0 0 16px;
  font-size:1.2rem;
  line-height:1.5;
}
.related-list,.tool-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}
.tool-list {
  gap:12px;
}
.related-list > li,.tool-list > li {
  flex:1 1 280px;
  min-width:0;
  max-width:100%;
  display:flex;
}
.related-list > li {
  max-width:calc((100% - 40px) / 3);
}
.related-card {
  flex:1;
  color:var(--ink);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.related-card img {
  width:100%;
  aspect-ratio:1280/670;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:12px;
}
.related-card__title {
  font-size:1rem;
  font-weight:700;
  line-height:1.6;
  text-wrap:pretty;
}
.related-card:hover {
  color:var(--accent);
}
.tool-card {
  flex:1;
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
  color:var(--ink);
  text-decoration:none;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.tool-card:hover {
  border-color:var(--accent);
  color:var(--ink);
}
.tool-card__text {
  flex:1;
  min-width:0;
}
.tool-card__name {
  display:block;
  font-size:1rem;
  font-weight:700;
  line-height:1.6;
}
.tool-card__desc {
  display:block;
  margin-top:2px;
  font-size:.88rem;
  color:var(--muted);
  line-height:1.7;
}
.tool-card__arrow {
  color:var(--accent);
  font-weight:700;
  line-height:1.6;
}
.more .text-link {
  display:inline-block;
  margin-top:16px;
  font-size:.95rem;
}

/* ---------- 記事一覧 ---------- */
.index-hero {
  display:flex;
  gap:16px 24px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.index-hero__text {
  flex:1 1 360px;
  min-width:0;
}
.index-hero h1 {
  margin:0;
  font-size:clamp(1.7rem,4.6vw,2.5rem);
  line-height:1.4;
}
.index-hero .lead {
  margin:10px 0 0;
  max-width:640px;
}
.index-hero__char {
  flex:0 0 auto;
  width:clamp(72px,12vw,112px);
}
.featured {
  margin:clamp(24px,4vw,36px) 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:20px 40px;
  align-items:center;
  color:var(--ink);
  text-decoration:none;
  background:var(--surface2);
  border-radius:16px;
  padding:clamp(16px,3vw,28px);
}
.featured:hover {
  color:var(--accent);
}
.featured__img {
  flex:1.3 1 320px;
  min-width:0;
  width:100%;
  aspect-ratio:1280/670;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.featured__text {
  flex:1 1 280px;
  min-width:0;
}
.featured__label {
  display:block;
  font-size:.8rem;
  color:var(--accent);
  font-weight:700;
}
.featured__title {
  display:block;
  margin:6px 0 8px;
  font-size:clamp(1.25rem,3vw,1.6rem);
  font-weight:700;
  line-height:1.5;
  text-wrap:pretty;
}
.featured__desc,.card__desc {
  display:block;
  color:var(--muted);
}
.featured__desc {
  font-size:.93rem;
  line-height:1.8;
}
.article-cards {
  list-style:none;
  margin:clamp(36px,5vw,48px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:36px 24px;
}
.article-cards > li {
  flex:1 1 280px;
  min-width:0;
  max-width:calc((100% - 48px) / 3);
  display:flex;
}
.article-cards:empty {
  display:none;
}
.card {
  flex:1;
  color:var(--ink);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card:hover {
  color:var(--accent);
}
.card__img {
  width:100%;
  aspect-ratio:1280/670;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:12px;
}
.card__category {
  display:block;
  font-size:.75rem;
  color:var(--muted);
  font-weight:700;
}
.card__title {
  display:block;
  margin:2px 0 4px;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.6;
  text-wrap:pretty;
}
.card__desc {
  font-size:.88rem;
  line-height:1.75;
}

@media (max-width:640px) {
  .wide-only {
    display:none;
  }
  .related-list > li,.article-cards > li {
    max-width:100%;
  }
}
@media (max-width:940px) and (min-width:641px) {
  .related-list > li,.article-cards > li {
    max-width:calc((100% - 24px) / 2);
  }
}
@media print {
  .draft-notice,.site-nav,.site-footer nav,.skip-link,.more {
    display:none;
  }
  a {
    color:inherit;
  }
  .bubble,.tool-cta,.split,.steps > li {
    break-inside:avoid;
  }
}