/*
Theme Name: 手放す台帳
Theme URI: https://tebanasu-daicho.com
Author: あやかカンパニー
Description: 個人事業主向け業務手放し比較サイト「手放す台帳」の専用テーマ。業務を計測するダッシュボードとしてのデザイン。
Version: 3.1.0
Text Domain: tebanasu
*/

:root{
  --bg:#F4F3EF;
  --surface:#FFFFFF;
  --ink:#20211F;
  --ink-soft:#666762;
  --line:#D9D9D3;
  --brand:#C94A35;
  --brand-deep:#8F3025;
  --brand-pale:#F2DED8;
  --positive:#28745B;
  --caution:#B87828;
  --warning:#B44738;
  --r:6px;
  --font-display:'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  --font-body:'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);
  background-image:
    linear-gradient(rgba(32,33,31,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,33,31,.045) 1px, transparent 1px);
  background-size:48px 48px;
  color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.8;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{color:inherit}
img{max-width:100%;height:auto}
h1,h2{text-wrap:balance}
.colon{color:var(--brand)}

/* ヘッダー */
.masthead{border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:30}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 24px}
.brand{font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:.01em;text-decoration:none;color:var(--ink)}
.brand span{font-weight:400}
.stamp{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-soft);
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.pulse{width:5px;height:5px;background:var(--brand);flex:none;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* 見出し・導入部 */
.hero{padding:56px 0 32px;border-bottom:1px solid var(--line)}
.eyebrow{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-soft);
  margin:0 0 16px;text-transform:uppercase;
}
h1{font-family:var(--font-display);font-weight:900;font-size:clamp(28px,5.2vw,42px);line-height:1.4;margin:0 0 18px;color:var(--ink)}
h1 em{font-style:normal;color:var(--brand)}
.lede{color:var(--ink-soft);margin:0;max-width:38em;font-size:15px}

/* 結論カード（PAY LINE） */
.verdict{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 28px 28px;margin:32px 0 16px;
}
.v-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
.v-name{font-family:var(--font-display);font-size:clamp(22px,4.2vw,28px);font-weight:700;margin:0 0 8px;line-height:1.4;color:var(--ink)}
.v-why{font-size:14px;color:var(--ink-soft);margin:0 0 26px;max-width:36em}
.v-payline{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin:0 0 24px}
.v-payline-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.v-payline-hm{font-family:var(--font-mono);font-size:clamp(40px,7vw,58px);font-weight:600;line-height:1;color:var(--ink);margin:0 0 10px;font-variant-numeric:tabular-nums}
.v-payline-note{font-size:13.5px;color:var(--ink-soft);margin:0}
.v-meta{display:flex;flex-wrap:wrap;gap:32px;margin:0 0 26px}
.v-meta dt{font-family:var(--font-body);font-size:11px;letter-spacing:.03em;color:var(--ink-soft);margin-bottom:5px}
.v-meta dd{margin:0;font-family:var(--font-mono);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.cta{
  display:inline-block;background:var(--ink);color:#FBFAF8;text-decoration:none;font-weight:700;font-size:14.5px;
  padding:13px 26px;border-radius:4px;transition:.15s;border:none;cursor:pointer;font-family:var(--font-body);
}
.cta:hover{background:var(--brand)}
.cta:focus-visible,.chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cta-sub{font-family:var(--font-body);font-size:11.5px;color:var(--ink-soft);margin:10px 0 0}
.pr-tag{font-family:var(--font-mono);font-size:10px;color:var(--ink-soft);letter-spacing:.03em;border:1px solid var(--line);border-radius:3px;padding:2px 6px}

/* 無料枠 */
.freeband{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r);padding:22px 24px;margin:34px 0}
.freeband h2{font-family:var(--font-display);font-size:18px;margin:0 0 4px;font-weight:700}
.freeband p.s{font-size:13px;color:var(--ink-soft);margin:0 0 18px}
.freelist{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.freeitem{background:var(--surface);padding:16px 17px}
.freeitem b{display:block;font-size:15px;margin-bottom:4px;font-family:var(--font-display);font-weight:700}
.freeitem span{font-size:12.5px;color:var(--ink-soft);display:block;margin-bottom:13px;line-height:1.6}
.mini{display:block;text-align:center;background:var(--ink);color:#FBFAF8;text-decoration:none;font-size:13px;font-weight:700;padding:10px;border-radius:4px}
.mini:hover{background:var(--brand)}

h2.sec{font-family:var(--font-display);font-weight:700;font-size:21px;margin:56px 0 6px;padding-top:24px;border-top:1px solid var(--line)}
p.sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 22px}

/* 業種タブ */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{
  font:inherit;font-family:var(--font-body);font-size:13.5px;cursor:pointer;background:var(--surface);
  border:1px solid var(--line);color:var(--ink-soft);padding:7px 15px;border-radius:4px;transition:.15s;
}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FBFAF8}

/* ランキング（計測リスト） */
.rank{background:var(--surface);border:1px solid var(--line);border-top:1px solid var(--line);margin-bottom:0;display:flex;gap:0}
.rank + .rank{border-top:none}
.rank:hover{background:#FAFAF8}
.rank.top{border-color:var(--brand)}
.rank.top + .rank{border-top:1px solid var(--line)}
.rk{flex:0 0 64px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 0}
.rk-n{font-family:var(--font-mono);font-size:24px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.rank.top .rk-n{color:var(--brand)}
.rk-l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-soft);margin-top:5px}
.rbody{flex:1;padding:18px 22px;min-width:0}
.rname{font-size:17px;font-weight:700;margin:0 0 3px;font-family:var(--font-display)}
.rcat{font-size:11px;color:var(--ink-soft);font-family:var(--font-mono);margin:0 0 11px;letter-spacing:.03em}
.rline{font-size:14px;margin:0 0 15px;color:var(--ink-soft)}
.rstats{display:flex;flex-wrap:wrap;gap:0;margin-bottom:16px;border-top:1px solid var(--line)}
.rstats div{padding:9px 20px 0 0;margin-right:20px}
.rstats dt{font-family:var(--font-body);font-size:10.5px;color:var(--ink-soft)}
.rstats dd{margin:0;font-family:var(--font-mono);font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.ractions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rcta{display:inline-block;background:var(--ink);color:#FBFAF8;text-decoration:none;font-weight:700;font-size:13.5px;padding:11px 22px;border-radius:4px;font-family:var(--font-body)}
.rcta:hover{background:var(--brand)}
.rcta.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.rcta.ghost:hover{border-color:var(--ink)}
.empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:40px 20px;text-align:center;color:var(--ink-soft)}
.empty b{display:block;color:var(--ink);margin-bottom:6px;font-family:var(--font-display)}

.tail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;margin:48px 0 0;text-align:center}
.tail h2{font-family:var(--font-display);font-size:21px;margin:0 0 8px;font-weight:700}
.tail p{font-size:14px;color:var(--ink-soft);margin:0 0 20px}

footer{border-top:1px solid var(--line);margin-top:48px;padding:26px 0 46px;font-size:12.5px;color:var(--ink-soft)}
.disclosure{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:14px 16px;margin-bottom:16px}

/* トップページ：業務一覧 */
.gyoumu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0;margin:22px 0;border:1px solid var(--line);border-bottom:none}
.gcard{background:var(--surface);border-bottom:1px solid var(--line);padding:22px;text-decoration:none;display:block;transition:.15s;position:relative}
.gcard:not(:last-child){border-right:1px solid var(--line)}
.gcard:hover{background:#FAFAF8}
.gnum{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft);letter-spacing:.05em;margin:0 0 12px}
.gcard h3{font-family:var(--font-display);font-size:17px;margin:0 0 7px;line-height:1.5;font-weight:700;color:var(--ink)}
.gcard .gind{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);margin:0 0 13px}
.gcard .gstats{display:flex;gap:18px}
.gcard .gstats dt{font-size:9.5px;letter-spacing:.03em;color:var(--ink-soft);font-family:var(--font-body)}
.gcard .gstats dd{margin:0;font-family:var(--font-mono);font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}

.howto{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin:30px 0}
.howto h2{font-family:var(--font-display);font-size:17px;margin:0 0 12px;font-weight:700}
.howto p{font-size:14px;color:var(--ink-soft);margin:0}
.howto code{font-family:var(--font-mono);background:var(--brand-pale);color:var(--brand-deep);padding:3px 8px;border-radius:4px;font-size:13.5px}

/* ブログ記事一覧カード（page-blog.php。.gyoumu-grid/.gcardを流用） */
.blog-excerpt{font-size:13px;color:var(--ink-soft);line-height:1.7;margin:0}

/* ブログ記事 個別ページ（single.php） */
.blog-hero{padding-bottom:24px}
.article-meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);margin:18px 0 0}
.prose{max-width:760px;margin:40px 0;font-size:16px;line-height:1.9;color:var(--ink)}
.prose h2{font-family:var(--font-display);font-weight:700;font-size:22px;margin:48px 0 16px;padding-top:20px;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:none}
.prose h3{font-family:var(--font-display);font-weight:700;font-size:18px;margin:32px 0 12px}
.prose p{margin:0 0 20px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:1.4em}
.prose li{margin:0 0 8px}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.prose blockquote{margin:0 0 20px;padding:4px 0 4px 18px;border-left:3px solid var(--line);color:var(--ink-soft);font-size:14.5px}
.prose strong{font-weight:700}
.prose code{font-family:var(--font-mono);background:var(--brand-pale);color:var(--brand-deep);padding:2px 6px;border-radius:3px;font-size:.9em}
.prose img{border:1px solid var(--line);border-radius:4px;margin:8px 0 20px}

/* 記事内の内部リンクCTA（比較ページへの送客ボックス） */
.blog-cta{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r);padding:18px 22px;margin:0 0 28px}
.blog-cta-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
.blog-cta-title{font-family:var(--font-display);font-weight:700;font-size:16px;margin:0 0 10px;color:var(--ink)}
.blog-cta-link{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:13.5px;color:var(--brand);text-decoration:none}
.blog-cta-link:hover{text-decoration:underline}

/* 内部リンク（2026-10-21）：メニュー・パンくず・比較ページ一覧 */
.gnav{display:flex;gap:20px;margin-left:auto;font-size:13.5px;font-weight:700}
.gnav a{text-decoration:none;color:var(--ink-soft);padding:4px 0;border-bottom:2px solid transparent}
.gnav a:hover,.gnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand)}
.crumbs{font-size:12px;color:var(--ink-soft);padding:18px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.crumb-sep{color:var(--line-strong,#c9c8c2)}
.crumbs + .hero{padding-top:28px}
.glinks{list-style:none;margin:16px 0 0;padding:0;border:1px solid var(--line);border-bottom:none;background:var(--surface)}
.glinks li{border-bottom:1px solid var(--line)}
.glinks a{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:14px 18px;text-decoration:none;font-weight:700;color:var(--ink)}
.glinks a span{font-weight:400;font-size:13px;color:var(--brand)}
.glinks a:hover{background:#FAFAF8}
.more{margin:0 0 8px;text-align:right;font-size:14px;font-weight:700}
.more a{color:var(--brand);text-decoration:none}
.more a:hover{text-decoration:underline}
.fnav{display:flex;gap:18px}
.fnav a{color:var(--ink-soft)}

@media(max-width:600px){
  .rank{flex-direction:column}
  .rk{flex:none;width:100%;flex-direction:row;gap:8px;padding:10px 0;border-right:none;border-bottom:1px solid var(--line)}
  .rk-n{font-size:20px}.rk-l{margin-top:0}
  .rcta{flex:1;text-align:center}
  .v-meta{gap:20px}
  .gcard:not(:last-child){border-right:none}
  .prose{font-size:15px}
  .stamp{display:none}
  .gnav{gap:14px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}