/* =========================================================
   AI導入参謀 — デザイン v3（2026-10-07）
   参考：MESON Media（明るいグレーの地・太字を使わない・余白だけで区切る・アクセントは青1色）
   文字の下限：本文16px（記事17px）／補足14px／ラベル13px（html は 62.5% → 1.6rem＝16px）
   ========================================================= */
:root{
  --paper:#F2F2F0; --paper2:#E8E8E5; --white:#FFFFFF;
  --ink:#1E1E1E; --text:#1E1E1E; --sub:#6B6B6B; --line:#D9D9D5; --rule:#1E1E1E;
  --bg:var(--paper); --bg2:var(--paper2); --card:var(--white);
  --accent:#3F51F2; --accent-line:rgba(63,81,242,.45);
  --brand:var(--accent); --brand-d:#2F3FCC; --cta:var(--ink); --en:var(--ink);
  /* カテゴリのスペクトル（ロゴの縦じまとサムネイルの地にだけ使う） */
  --c-komatta:#E8553D; --c-event:#F2994A; --c-ai:#EDBE2A; --c-mall:#8CC152;
  --c-hikaku:#2FA38A; --c-cart:#3A86C8; --c-shukyaku:#7A68D0; --c-news:#E04E8B; --c-cvr:#9B3B54;
  --radius:0; --shadow:none;
  --maxw:120rem; --edge:3.2rem;
  --f-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-en:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --f-body:"DM Sans","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{font-size:62.5%}
body{margin:0; background:var(--paper); color:var(--text); font-family:var(--f-body);
  font-size:1.6rem; line-height:1.75; letter-spacing:.02em; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
a{color:var(--ink); text-decoration:none}
a:hover{opacity:.6}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--f-body); color:var(--ink); font-weight:500; text-wrap:balance; word-break:auto-phrase}
p{text-wrap:pretty}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--edge)}
.num,time{font-family:var(--f-en); font-variant-numeric:tabular-nums}

/* カテゴリ名（青の文字だけ。チップは付けない） */
.cat{display:inline-block; font-size:1.4rem; font-weight:400; color:var(--accent); letter-spacing:.02em; white-space:nowrap; background:none; padding:0}
.cat::before{content:none}
.c-komatta,.c-event,.c-ai,.c-mall,.c-hikaku,.c-cart,.c-shukyaku,.c-news,.c-cvr{}
.ptag{display:none}

/* ===== header（透明・ロゴ左・ナビ右） ===== */
.site-header{background:transparent}
.hd{display:flex; align-items:center; justify-content:space-between; gap:3.2rem; min-height:9.6rem; max-width:var(--maxw); margin:0 auto; padding:0 var(--edge)}
.brand-h1{margin:0; font:inherit}
.brand{display:flex; align-items:center; gap:1.2rem; color:var(--ink); flex:none}
.brand:hover{opacity:1}
.brand-mark{display:inline-flex; gap:.25rem; height:3.8rem; align-items:stretch}
.brand-text{display:flex; flex-direction:column; gap:.5rem}
.brand-mark i{width:.45rem}
.brand-name{font-family:var(--f-jp); font-size:2.2rem; font-weight:700; letter-spacing:.06em; line-height:1; white-space:nowrap}
.brand-sub{font-size:1.3rem; color:var(--sub); letter-spacing:.04em; white-space:nowrap}
.gnav{display:flex; align-items:center; gap:2.2rem}
.gnav a{font-size:1.5rem; font-weight:400; color:var(--ink); white-space:nowrap; letter-spacing:.02em}
.gnav a[aria-current="page"]{color:var(--accent)}
.gnav .search-link{display:inline-flex; align-items:center; gap:.6rem; height:3.6rem; padding:0 1.6rem; border:1px solid var(--line); border-radius:3.6rem; font-size:1.4rem; color:var(--sub)}
.gnav .search-link:hover{opacity:1; border-color:var(--ink); color:var(--ink)}
.gnav .search-link svg{width:1.5rem; height:1.5rem}

/* ===== 見出し（太字なし・余白で区切る） ===== */
.sh{display:flex; align-items:baseline; justify-content:space-between; gap:2rem; margin:0 0 3.2rem}
.sh h2{font-size:clamp(2.2rem,1.9rem + .8vw,2.8rem); font-weight:500; line-height:1.4; letter-spacing:.03em; margin:0}
.sh .k{display:none}
.sh .more{flex:none; font-size:1.4rem; color:var(--sub); white-space:nowrap}
.sh .more::after{content:" →"}
.sec-head{margin:6.4rem 0 3.2rem}
.sec-head .en{display:none}
.sec-head .ja{display:block; font-size:clamp(2.2rem,1.9rem + .8vw,2.8rem); font-weight:500; color:var(--ink)}
.row-head{display:flex; align-items:baseline; gap:1.2rem; margin:4.8rem 0 2.4rem}
.row-head h2{font-size:2.2rem; margin:0; font-weight:500}
.row-head .more{margin-left:auto; font-size:1.4rem; color:var(--sub)}

/* ===== ピル（絞り込み・カテゴリ） ===== */
.pills{display:flex; flex-wrap:wrap; gap:1rem 1rem; margin:0; padding:0; list-style:none}
.pills a,.cat-pills a{display:inline-flex; align-items:center; gap:.6rem; min-height:3.2rem; padding:0 1.4rem; border:1px solid var(--accent-line); border-radius:3.2rem;
  font-size:1.4rem; color:var(--accent); background:transparent; white-space:nowrap}
.pills a:hover,.cat-pills a:hover{opacity:1; background:var(--accent); color:var(--white)}
.pills a.on,.cat-pills a.all{background:var(--accent); border-color:var(--accent); color:var(--white)}
.pills .cnt,.cat-pills .cnt{font-family:var(--f-en); font-size:1.3rem; opacity:.75}
.cat-pills{display:flex; flex-wrap:wrap; gap:1rem; justify-content:flex-start; margin:0 0 2.4rem}

/* ===== buttons ===== */
.btn-line,.hbtn{display:inline-flex; align-items:center; justify-content:center; gap:.8rem; min-height:4.8rem; padding:0 2.8rem;
  border:1px solid var(--ink); border-radius:4.8rem; background:transparent; color:var(--ink); font-size:1.5rem; font-weight:400; white-space:nowrap}
.btn-line::after,.hbtn::after{content:"→"; font-family:var(--f-en)}
.btn-line:hover,.hbtn:hover{opacity:1; background:var(--ink); color:var(--paper)}
.btn-line.solid,.hbtn.primary{background:var(--ink); color:var(--paper)}
.btn-line.solid:hover,.hbtn.primary:hover{background:transparent; color:var(--ink)}

/* ===== article cards（枠なし・余白だけ） ===== */
.section{padding:0 0 1rem}
.section.alt{background:var(--paper2)}
.grid3,.grid4,.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:6.4rem 4.8rem}
.acard{display:flex; flex-direction:column; color:var(--ink)}
.acard:hover{opacity:1}
.acard:hover .thumb img{opacity:.85}
.acard:hover h3{text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px}
.acard .thumb{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--paper2)}
.acard .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:opacity .2s}
.acard .body{padding:2rem 0 0; display:flex; flex-direction:column; gap:1.2rem}
.acard .cat-t{font-size:1.4rem; color:var(--accent)}
.acard :is(h2,h3){font-size:1.9rem; font-weight:400; margin:0; line-height:1.6; letter-spacing:.03em; color:var(--ink)}
.acard .desc{font-size:1.5rem; color:var(--sub); line-height:1.8; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.metarow{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin:0}
.metarow time,.acard time{font-size:1.4rem; color:var(--sub); letter-spacing:.04em}
.acard.soon{opacity:.6; pointer-events:none}
.badge{display:none}
.rank-wrap{position:relative}
.rank-badge{position:absolute; top:1.2rem; left:1.2rem; z-index:3; min-width:3.6rem; height:3.6rem; border-radius:3.6rem; background:var(--ink); color:var(--paper);
  display:grid; place-items:center; font-family:var(--f-en); font-size:1.5rem}

/* ===== footer（明るいグレー） ===== */
.site-footer{background:var(--paper2); color:var(--text); padding:6.4rem 0 0; font-size:1.4rem; margin-top:12rem}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:4rem; padding-bottom:5.6rem}
.foot-brand .brand-row{display:flex; align-items:center; gap:1.2rem}
.foot-brand .brand-mark{height:2.4rem}
.foot-brand .brand-main{font-family:var(--f-jp); font-size:2rem; font-weight:700; letter-spacing:.06em; color:var(--ink)}
.foot-brand p{margin:1.6rem 0 0; line-height:1.9; color:var(--sub)}
.foot-col .foot-h{font-family:var(--f-en); font-size:1.3rem; font-weight:500; letter-spacing:.08em; color:var(--sub); margin:0 0 1.4rem}
.foot-col a{display:block; color:var(--ink); padding:.45rem 0; font-size:1.4rem}
.foot-copy{border-top:1px solid var(--line); padding:2rem 0; font-size:1.3rem; color:var(--sub)}
.foot-copy .wrap{display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}

/* ===== article page（17px・行間1.95） ===== */
.article-wrap{max-width:76rem; margin:0 auto; padding:4rem var(--edge) 2rem}
.breadcrumb{font-size:1.4rem; color:var(--sub); padding:0 0 2.8rem}
.breadcrumb a{color:var(--sub)}
.article{font-size:1.7rem; line-height:1.95; color:var(--text)}
.article .tag{font-size:1.4rem}
.article h1{font-size:clamp(2.6rem,2.1rem + 1.4vw,3.4rem); font-weight:500; line-height:1.5; letter-spacing:.03em; margin:1.2rem 0 1.6rem}
.article .meta{color:var(--sub); font-size:1.4rem; margin:0 0 3.6rem}
.article h2{font-size:clamp(2.2rem,1.95rem + .6vw,2.6rem); font-weight:500; line-height:1.55; letter-spacing:.03em; margin:8rem 0 2.4rem; padding:0; border:0; scroll-margin-top:3rem}
.article h3{font-size:clamp(1.9rem,1.75rem + .3vw,2.1rem); font-weight:500; line-height:1.6; margin:5.6rem 0 1.6rem; scroll-margin-top:3rem}
.article h4{font-size:1.8rem; font-weight:500; line-height:1.6}
.article p{margin:1.8rem 0}
.article ul,.article ol{margin:1.8rem 0; padding-left:2.4rem}
.article li{margin:.8rem 0; line-height:1.9}
.article strong{font-weight:700; color:var(--ink)}
.article a:not([class]){color:var(--accent); text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px}
.article .toc a,.article .related a,.article .art-tools a{text-decoration:none; color:var(--ink)}
.article .toc a:hover{opacity:1; text-decoration:underline; text-underline-offset:.25em}
.article code{background:var(--paper2); padding:.2rem .6rem; font-size:.92em; font-family:"SF Mono",Menlo,Consolas,monospace}
.lead{font-size:1.8rem; line-height:1.95; color:var(--text)}
.article-hero{margin:0 0 4rem; overflow:hidden; aspect-ratio:1200/630; background:var(--paper2)}
.article-hero img{width:100%; height:100%; object-fit:cover; display:block}
.article-fig{margin:3.2rem 0; text-align:center}
.article-fig img{width:100%; height:auto; display:block}
.article-fig figcaption{margin-top:1.2rem; font-size:1.4rem; color:var(--sub); line-height:1.6}
.summary-box{background:var(--white); padding:2.8rem 3.2rem; margin:3.2rem 0}
.summary-box h4{margin:0 0 1.2rem; font-size:1.5rem; font-weight:500; color:var(--sub); letter-spacing:.06em}
.summary-box ul{margin:0}
.toc{background:var(--white); padding:2.8rem 3.2rem; margin:3.2rem 0 4.8rem}
.toc-cb{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.toc_title{display:flex; align-items:center; gap:.8rem; cursor:pointer; user-select:none; font-size:1.5rem; font-weight:500; color:var(--sub); letter-spacing:.08em; margin:0 0 1.4rem}
.toc-mark{position:relative; width:1.6rem; height:1.6rem; margin-left:auto; flex:none}
.toc-mark::before,.toc-mark::after{content:""; position:absolute; left:50%; top:50%; background:var(--sub); transform:translate(-50%,-50%)}
.toc-mark::before{width:1.3rem; height:1px}
.toc-mark::after{width:1px; height:1.3rem; transition:height .2s ease}
.toc-cb:checked ~ .toc_title .toc-mark::after{height:0}
.toc-cb:not(:checked) ~ .toc_list{display:none}
.toc_list{list-style:none; margin:0; padding:0; counter-reset:toc}
.toc_list>li{counter-increment:toc; margin:.6rem 0; padding:0 0 0 3.2rem; position:relative}
.toc_list>li>a{display:block; font-size:1.5rem; line-height:1.75}
.toc_list>li>a::before{content:counter(toc,decimal-leading-zero); position:absolute; left:0; top:.1rem; font-family:var(--f-en); font-size:1.4rem; color:var(--sub)}
.toc_list ul{list-style:none; margin:.4rem 0 .2rem; padding:0}
.toc_list ul li a{display:block; color:var(--sub); font-size:1.4rem; line-height:1.7; padding:.2rem 0 .2rem 1.4rem; position:relative}
.toc_list ul li a::before{content:"–"; position:absolute; left:0}
.checklist{list-style:none; padding:0}
.checklist li{padding-left:3rem; position:relative; margin:.9rem 0}
.checklist li::before{content:"✓"; position:absolute; left:0; top:.3rem; width:2rem; height:2rem; border:1px solid var(--accent); color:var(--accent); border-radius:2rem; display:grid; place-items:center; font-size:1.3rem}
.tip{background:var(--white); padding:2.4rem 2.8rem; margin:3.2rem 0}
.tip h4{margin:.2rem 0 1rem; font-size:1.6rem}
.prompt-box{background:var(--ink); color:#EDEDEA; padding:2rem 2.4rem; font-family:"SF Mono",Menlo,Consolas,monospace; font-size:1.4rem; line-height:1.8; white-space:pre-wrap; overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; margin:3.2rem 0; font-size:1.5rem; background:transparent}
table.tbl th{padding:1.3rem 1.6rem; text-align:left; font-weight:500; color:var(--ink); border-bottom:1px solid var(--ink); font-size:1.45rem}
table.tbl td{padding:1.3rem 1.6rem; border-bottom:1px solid var(--line); line-height:1.75}
table.tbl th,table.tbl td{word-break:keep-all; overflow-wrap:anywhere}
table.tbl th:first-child,table.tbl td:first-child{min-width:10em}
table.tbl tr:first-child th,table.tbl tr:first-child td{background:transparent; font-weight:500; color:var(--sub); border-bottom:1px solid var(--ink)}
.bq,.article blockquote{border-left:2px solid var(--line); background:transparent; padding:.4rem 0 .4rem 2.4rem; margin:3.2rem 0; color:var(--text)}
.bq p:last-child{margin-bottom:0}
.bq cite{display:block; margin-top:.6rem; font-size:1.4rem; color:var(--sub); font-style:normal}
.cta{background:var(--white); padding:3.2rem; margin:4rem 0 3rem}
.cta h3{margin:0 0 1rem; font-size:2rem}
.cta p{margin:0 0 1.8rem; font-size:1.6rem; line-height:1.85}
.cta .btns{display:flex; gap:1.2rem; flex-wrap:wrap}
.btn{display:inline-block; padding:1.2rem 2.4rem; border-radius:4.8rem; font-size:1.5rem}
.btn.primary{background:var(--ink); color:var(--paper)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--ink)}
.related{margin:6.4rem 0 0}
.related h3{font-size:1.8rem; font-weight:500; margin:0 0 1.2rem}
.related ul{list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
.related li{margin:0}
.related li a{display:block; border-bottom:1px solid var(--line); padding:1.6rem 0; font-size:1.6rem; line-height:1.65}
.related li a:hover{opacity:1; text-decoration:underline; text-underline-offset:.25em}

/* ===== 記事内図解コンポーネント（白い面＋余白） ===== */
.article .marker{background:linear-gradient(transparent 64%,rgba(63,81,242,.18) 64%); padding:0 .1em; font-weight:500}
.steps{list-style:none; counter-reset:step; margin:3.2rem 0; padding:0}
.steps>li{counter-increment:step; position:relative; padding:.1rem 0 2.8rem 5.6rem; min-height:4rem}
.steps>li::before{content:counter(step,decimal-leading-zero); position:absolute; left:0; top:0; width:3.8rem; height:3.8rem; border:1px solid var(--ink); border-radius:3.8rem; color:var(--ink); display:grid; place-items:center; font-family:var(--f-en); font-size:1.4rem; z-index:1; background:var(--paper)}
.steps>li::after{content:""; position:absolute; left:1.9rem; top:3.8rem; bottom:0; width:1px; background:var(--line)}
.steps>li:last-child{padding-bottom:0}
.steps>li:last-child::after{display:none}
.steps h4{margin:.4rem 0 .5rem; font-size:clamp(1.7rem,1.6rem + .3vw,1.9rem); font-weight:500; line-height:1.55}
.steps p{margin:0}
.pointbox{background:var(--white); padding:2.4rem 2.8rem; margin:2.8rem 0}
.pointbox h4{margin:0 0 .6rem; font-size:1.7rem; color:var(--accent)}
.pointbox p:last-child{margin-bottom:0}
.flow{display:flex; flex-wrap:wrap; gap:1.4rem 2.8rem; margin:3.2rem 0}
.flow-item,.flow-step{flex:1 1 0; min-width:13rem; background:var(--white); padding:2rem 1.6rem; text-align:center; position:relative}
.flow-item h4{margin:.2rem 0 .4rem; font-size:1.7rem}
.flow-item p{margin:0; font-size:1.4rem; color:var(--sub); line-height:1.65}
.flow-step{font-size:1.5rem; line-height:1.65}
.flow-step small{display:block; margin-top:.5rem; color:var(--sub); font-size:1.4rem}
.flow-item:not(:last-child)::after,.flow-step:not(:last-child)::after{content:"→"; position:absolute; right:-1.4rem; top:50%; transform:translate(50%,-50%); color:var(--sub); font-family:var(--f-en); font-size:1.6rem}
.flow:has(.flow-arrow) .flow-step::after{display:none}
.flow-arrow{align-self:center; color:var(--sub); font-size:1.8rem; flex:none}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin:3.2rem 0}
.compare>div,.compare-col{padding:2.4rem 2.6rem; background:var(--white)}
.compare-col .ttl,.compare>div>h4{display:flex; align-items:center; gap:.8rem; font-weight:500; font-size:1.7rem; margin:0 0 .8rem; color:var(--ink)}
.compare-col .ttl::before{width:2.2rem; height:2.2rem; border-radius:2.2rem; display:grid; place-items:center; font-size:1.3rem; flex:none}
.compare-col.good .ttl::before{content:"○"; border:1px solid #2F8A5B; color:#2F8A5B}
.compare-col.bad .ttl::before{content:"×"; border:1px solid #C23B26; color:#C23B26}
.compare-col.good .ttl,.compare>.compare-good h4{color:#2A7A50}
.compare-col.bad .ttl,.compare>.compare-bad h4{color:#B4361F}
.compare-col p:last-child{margin-bottom:0}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(22rem,1fr)); gap:1.6rem; margin:3.2rem 0; counter-reset:card}
.cards>div{background:var(--white); padding:2.4rem; position:relative}
.cards>div>h4{margin:0 0 .6rem; font-size:1.7rem}
.cards>div>p{margin:0; font-size:1.5rem; line-height:1.8}
.card-item{counter-increment:card}
.card-item::before{content:counter(card,decimal-leading-zero); display:block; font-family:var(--f-en); font-size:1.4rem; color:var(--sub); margin-bottom:.4rem}
.card-item h4{margin:0 0 .5rem; font-size:1.7rem}
.card-item p{margin:0; font-size:1.5rem; line-height:1.8}
.callout{display:flex; flex-wrap:wrap; gap:1rem; background:var(--white); padding:2.2rem 2.6rem; margin:2.8rem 0}
.callout>h4,.callout>p{flex:1 1 100%; margin:0}
.callout .ico{display:none}
.callout h4{font-size:1.7rem}
.callout-point h4{color:var(--accent)}
.callout-note h4{color:#2E6FB0}
.callout-warn h4{color:#A35A0A}
.statbox{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.6rem; margin:3.2rem 0}
.stat{background:var(--white); padding:2.4rem 2rem}
.stat .num{font-family:var(--f-en); font-weight:400; color:var(--ink); font-size:clamp(3.2rem,2.6rem + 1.6vw,4.4rem); line-height:1}
.stat .lbl{margin-top:.8rem; font-size:1.4rem; color:var(--sub); line-height:1.6}

/* ===== トップ ===== */
.home-pills{margin-top:.8rem; margin-bottom:6.4rem}
.top-sec{margin-top:12rem}
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:4.8rem}
.trio h2{font-size:2rem; font-weight:500; margin:0 0 1.6rem; display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.trio h2 a{font-size:1.4rem; font-weight:400; color:var(--sub)}
.trio h2 a::after{content:" →"}
.tl{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.tl li{border-bottom:1px solid var(--line)}
.tl a,.tl .row{display:grid; grid-template-columns:5.2rem 1fr; gap:1.2rem; padding:1.4rem 0; color:var(--ink); align-items:baseline}
.tl time,.tl .no{font-family:var(--f-en); font-size:1.4rem; color:var(--sub)}
.tl .t{font-size:1.5rem; line-height:1.7; word-break:auto-phrase}
.tl a:hover{opacity:1}
.tl a:hover .t{text-decoration:underline; text-underline-offset:.25em}
.tl .kind{font-size:1.3rem; color:var(--accent); margin-right:.6rem}
.tools-list{display:grid; grid-template-columns:repeat(3,1fr); gap:0 4.8rem; border-top:1px solid var(--line)}
.tools-list a{display:flex; flex-direction:column; gap:.6rem; padding:2.4rem 0; border-bottom:1px solid var(--line); color:var(--ink)}
.tools-list a:hover{opacity:1}
.tools-list a:hover b{text-decoration:underline; text-underline-offset:.25em}
.tools-list b{font-size:1.7rem; font-weight:500; line-height:1.55}
.tools-list span{font-size:1.4rem; line-height:1.75; color:var(--sub)}
.index-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:5.6rem 4.8rem}
.ix-h{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.2rem}
.ix-h a{font-size:1.7rem; font-weight:500}
.ix-h .cnt{font-family:var(--f-en); font-size:1.4rem; color:var(--sub)}
.ix ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.ix li a{word-break:auto-phrase; display:block; padding:1.1rem 0; border-bottom:1px solid var(--line); font-size:1.45rem; line-height:1.65; color:var(--ink)}
.ix li a:hover{opacity:1; text-decoration:underline; text-underline-offset:.25em}
.ix .all{display:inline-block; margin-top:1.2rem; font-size:1.4rem; color:var(--sub); white-space:nowrap}
.ix .all::after{content:" →"}
.all-cta{display:flex; justify-content:center; gap:1.6rem; flex-wrap:wrap; margin-top:8rem}

/* ===== 一覧・カテゴリ・検索ページ ===== */
.cat-guide{margin:3.2rem 0 0}
.cat-guide-intro{color:var(--text); font-size:1.6rem; line-height:1.85; margin:0 0 1.6rem}
.cat-guide-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(22rem,1fr)); gap:1.6rem}
.cat-guide-grid a{display:block; background:var(--white); padding:2rem 2.2rem; color:var(--ink)}
.cat-guide-grid a:hover{opacity:1}
.cat-guide-grid a:hover b{text-decoration:underline; text-underline-offset:.25em}
.cat-guide-grid a b{display:block; font-size:1.6rem; font-weight:500; margin-bottom:.4rem}
.cat-guide-grid a span{display:block; font-size:1.4rem; color:var(--sub); line-height:1.7}
.blog-head{padding-top:2.4rem; margin-bottom:5.6rem}
.blog-head h1{font-size:clamp(2.6rem,2.1rem + 1.4vw,3.4rem); font-weight:500; margin:.8rem 0 1.2rem; letter-spacing:.03em}
.blog-head .lede{color:var(--sub); font-size:1.6rem; line-height:1.9; max-width:46em; margin:0}
.blog-search{margin:2.8rem 0 2rem; max-width:64rem}
.blog-search .box{display:flex; align-items:center; gap:1rem; background:var(--white); border-radius:4.8rem; padding:1.2rem 2.2rem}
.blog-search input{flex:1; border:0; outline:none; font:inherit; font-size:1.6rem; background:transparent; color:var(--ink)}
.blog-search .ic{font-size:1.6rem; color:var(--sub)}
.cat-lede{color:var(--sub); font-size:1.5rem; margin:-1rem 0 1.6rem}
.blog-search-none{display:none; text-align:center; color:var(--sub); padding:3rem 0}
.pager{display:flex; gap:.8rem; justify-content:center; align-items:center; margin:8rem 0 1rem}
.pager a,.pager .cur,.pager .dots3{min-width:4.4rem; height:4.4rem; display:grid; place-items:center; font-family:var(--f-en); font-size:1.5rem; border-radius:4.4rem}
.pager a{color:var(--ink); border:1px solid var(--line)}
.pager a:hover{opacity:1; border-color:var(--ink)}
.pager .cur{background:var(--ink); color:var(--paper)}
.pager .dots3{color:var(--sub)}
.pager .pn{padding:0 1.8rem; font-family:var(--f-body); font-size:1.4rem}

/* ===== 記事下のデータ・ツール ===== */
.art-tools{margin:6.4rem 0 0; padding:2.8rem 3.2rem; background:var(--white)}
.art-tools h3{margin:0 0 1.2rem; font-size:1.8rem; font-weight:500}
.art-tools ul{list-style:none; margin:0; padding:0; display:grid; gap:0}
.art-tools li{margin:0}
.art-tools li a{display:block; padding:1.4rem 0; border-bottom:1px solid var(--line)}
.art-tools li:last-child a{border-bottom:0}
.art-tools li a:hover{opacity:1}
.art-tools li a:hover b{text-decoration:underline; text-underline-offset:.25em}
.art-tools b{display:block; font-size:1.6rem; font-weight:500; line-height:1.55}
.art-tools span{display:block; margin-top:.2rem; font-size:1.4rem; line-height:1.7; color:var(--sub)}
.art-tools-more{display:inline-block; margin-top:1.4rem; font-size:1.5rem; color:var(--accent)}

/* ===== responsive ===== */
@media(max-width:1100px){
  .index-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  :root{--edge:2rem}
  .grid3,.grid4,.cards3{grid-template-columns:1fr 1fr; gap:4.8rem 2.4rem}
  .trio,.tools-list{grid-template-columns:1fr; gap:4.8rem}
  .tools-list{gap:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .top-sec{margin-top:8rem}
}
@media(max-width:640px){
  .grid3,.grid4,.cards3,.index-grid{grid-template-columns:1fr}
  .home-pills{margin-bottom:4rem}
  .home-pills .pills{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--edge) * -1); padding:0 var(--edge)}
  .home-pills .pills::-webkit-scrollbar{display:none}
  .sh{margin-bottom:2.4rem}
  .foot-grid{grid-template-columns:1fr}
  table.tbl{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  table.tbl th,table.tbl td{min-width:13rem}
  .compare{grid-template-columns:1fr}
  .flow-item:not(:last-child)::after,.flow-step:not(:last-child)::after{content:"↓"; right:auto; left:50%; top:auto; bottom:-2.2rem; transform:translateX(-50%)}
  .article-wrap{padding-top:2.4rem}
  .summary-box,.toc,.pointbox,.callout,.tip,.art-tools{padding-left:2rem; padding-right:2rem}
}

/* ===== 読みやすさ改善 v4（2026-10-19）=====
   方針：文字を減らす・小さい文字をなくす・見出しは太字で本文と差をつける
   （v3の「太字を使わない」は写真ありきの作法だったため撤回） */
:root{--sub:#555555}
h1,h2,h3,h4{font-weight:700}
.sh h2,.sec-head .ja{font-size:clamp(2.4rem,2rem + 1vw,3.2rem); font-weight:700; letter-spacing:.02em}
.row-head h2{font-weight:700}
.sh .more,.trio h2 a,.ix .all{font-size:1.5rem}
/* 記事カード：要約文は出さず「カテゴリ・タイトル・日付」だけ */
.acard .desc{display:none}
.acard .body{gap:1rem}
.acard :is(h2,h3){font-size:clamp(1.8rem,1.7rem + .25vw,2rem); font-weight:700; line-height:1.55; letter-spacing:.02em}
.cards3{gap:5.6rem 4rem}
/* まず読みたい・AI速報は2列 */
.trio.duo{grid-template-columns:repeat(2,1fr); gap:6.4rem}
.trio h2{font-size:2.2rem; font-weight:700}
.tl a,.tl .row{padding:1.6rem 0}
.tl .t{font-size:1.6rem; line-height:1.65}
.tl time,.tl .no{font-size:1.5rem}
/* データ・ツール */
.tools-list b{font-size:1.8rem; font-weight:700}
.tools-list span{font-size:1.5rem}
/* カテゴリ別の記事 */
.ix-h a{font-size:1.8rem; font-weight:700}
.ix li a{font-size:1.6rem; line-height:1.6}
/* 記事ページの見出し */
.article h1,.article h2,.article h3,.article h4,.blog-head h1{font-weight:700}
.related h3,.steps h4,.compare-col .ttl,.compare>div>h4,.art-tools h3,.art-tools b,.cat-guide-grid a b{font-weight:700}
.summary-box h4,.toc_title{font-weight:700; color:var(--ink)}
@media(max-width:900px){ .trio.duo{grid-template-columns:1fr; gap:4.8rem} }
/* スマホ：1枚目だけ大きく、2枚目以降は「小さい画像＋タイトル」の横並びリスト */
@media(max-width:640px){
  :is(.cards3,.grid3,.grid4):has(.acard){gap:2.4rem}
  :is(.cards3,.grid3,.grid4) > :first-child:has(.acard){margin-bottom:1.6rem}
  :is(.cards3,.grid3,.grid4) > :not(:first-child) .acard{flex-direction:row; align-items:flex-start; gap:1.4rem; padding-top:2.4rem; border-top:1px solid var(--line)}
  :is(.cards3,.grid3,.grid4) > :not(:first-child) .thumb{flex:0 0 12.8rem}
  :is(.cards3,.grid3,.grid4) > :not(:first-child) .body{padding:0; gap:.6rem; min-width:0}
  :is(.cards3,.grid3,.grid4) > :not(:first-child) .acard :is(h2,h3){font-size:1.6rem; line-height:1.55}
  :is(.cards3,.grid3,.grid4) > :not(:first-child) .cat-t,:is(.cards3,.grid3,.grid4) > :not(:first-child) time{font-size:1.3rem}
}