:root{
  --bg:#ffffff; --bg2:#f6f6f4; --card:#fff; --ink:#111214; --sub:#75797f; --line:#e6e6e3;
  --brand:#d6000f; --brand-d:#b90915;     /* オタツー コーポレートレッド（アクセント限定） */
  --cta:#111214; --cta-d:#000;             /* 行動喚起は黒（HYPEBEAST流）。赤はCTA帯だけ */
  --en:#111214;                            /* セクション英字見出し＝黒 */
  /* カテゴリカラー（ドット表示用。UIの地色には使わない） */
  --c-komatta:#d6000f; --c-ai:#e07f2e; --c-hikaku:#5b6470; --c-shukyaku:#d95884; --c-cvr:#9b3b54; --c-mall:#c3922e; --c-event:#22894e; --c-news:#2f7db5; --c-cart:#12909e;
  --radius:4px; --shadow:none;
  --maxw:1200px;
  --edge:4rem;
}
*{box-sizing:border-box}
html{font-size:62.5%}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Meiryo",sans-serif; font-size:clamp(1.5rem,1.42rem + .25vw,1.65rem); line-height:1.8; -webkit-font-smoothing:antialiased;}
a{color:var(--ink); text-decoration:none}
a:hover{opacity:.7}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 2.4rem}

/* ===== header（編集メディア型：細帯＋センターワードマーク＋センターナビ） ===== */
.site-header{background:#fff; border-bottom:1px solid var(--ink)}
.header-top{border-bottom:1px solid var(--line)}
.ht-inner{display:flex; align-items:center; justify-content:space-between; gap:1.6rem; height:4rem; max-width:none; padding:0 var(--edge)}
.ht-tag{font-size:1.1rem; color:var(--sub); letter-spacing:.18em; font-weight:500}
.ht-right{display:flex; align-items:center; gap:1rem}
.header-main{display:flex; justify-content:center; padding:2.2rem 0 1.8rem}
.brand{color:var(--ink); text-align:center}
.brand-word{font-size:3.6rem; font-weight:800; letter-spacing:.14em; line-height:1}
.brand-word b{font-weight:800; color:var(--ink)}
.brand-word .bdot{color:var(--brand)}
.header-right{display:flex; align-items:center; gap:1rem}
.search{display:flex; align-items:center; background:transparent; border:1px solid var(--line); border-radius:2px; padding:.1rem .2rem .1rem 1.2rem}
.search input{border:0; background:transparent; font-size:1.2rem; width:16rem; outline:none; color:var(--ink)}
.search button{border:0; background:transparent; cursor:pointer; font-size:1.2rem; padding:.3rem .7rem; color:var(--sub)}
.hbtn{display:inline-block; padding:.8rem 1.6rem; border-radius:2px; font-size:1.2rem; font-weight:700; white-space:nowrap; letter-spacing:.06em}
.hbtn.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.hbtn.ghost:hover{border-color:var(--ink)}
.hbtn.primary{background:var(--ink); color:#fff}
.hbtn.primary:hover{background:#000; opacity:1}
.hbtn.lg{padding:1.4rem 2.6rem; font-size:1.5rem}
.hbtn.ghost-light{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.75)}
.gnav{border-top:1px solid var(--line); background:#fff}
.gnav .wrap{display:flex; gap:3.2rem; height:4.6rem; align-items:center; justify-content:center}
.gnav a{color:var(--ink); font-size:1.3rem; font-weight:500; letter-spacing:.04em}
.gnav a:hover{opacity:.6}
/* プルダウン（CSSのみ：hover＋focus-within） */
.gnav .dd{position:relative; height:100%; display:flex; align-items:center}
.gnav .dd-btn{display:flex; align-items:center; gap:.5rem; color:var(--ink); font-size:1.3rem; font-weight:500; letter-spacing:.04em; cursor:pointer}
.gnav .dd-caret{font-size:.9rem; color:var(--sub); transition:transform .18s}
.gnav .dd:hover .dd-caret,.gnav .dd:focus-within .dd-caret{transform:rotate(180deg)}
.gnav .dd-menu{position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  min-width:23rem; background:#fff; border:1px solid var(--ink); border-radius:0;
  box-shadow:0 10px 30px rgba(0,0,0,.08); padding:.6rem 0; z-index:60;
  opacity:0; visibility:hidden; transition:opacity .16s, transform .16s}
.gnav .dd:hover .dd-menu,.gnav .dd:focus-within .dd-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.gnav .dd-menu a{display:block; padding:.9rem 1.8rem; border-radius:0; font-size:1.3rem; font-weight:500; color:var(--ink); white-space:nowrap}
.gnav .dd-menu a:hover{background:var(--bg2); opacity:1}

/* ===== section heading（fashion-press風：英字黒＋和文小） ===== */
.sec-head{text-align:center; margin:4.6rem 0 2.4rem}
.sec-head .en{display:block; font-family:"Outfit","Helvetica Neue",sans-serif; font-size:clamp(2.6rem,2rem + 2vw,3.6rem); font-weight:700; font-style:normal; color:var(--en); letter-spacing:.04em; line-height:1; text-transform:uppercase}
.sec-head .ja{display:inline-block; margin-top:.8rem; font-size:1.2rem; color:var(--sub); letter-spacing:.28em; font-weight:500}

/* ===== hero slider ===== */
.hero{background:#fff; padding:2.6rem 0 3rem; overflow:hidden}
.slider{position:relative; max-width:none; margin:0 auto; padding:0 var(--edge)}
.slides-vp{overflow:hidden; border-radius:0}
.slides{display:flex; transition:transform .5s ease}
.slide{min-width:100%; display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; padding:.3rem}
.feature{display:flex; flex-direction:column; background:transparent; border:0; border-radius:0; overflow:hidden; box-shadow:none; color:var(--ink); transition:opacity .18s}
.feature:hover{transform:none; opacity:.85}
.feature-thumb{position:relative; aspect-ratio:16/6.4; display:grid; place-items:center; padding:2rem; text-align:center}
.feature-thumb .f-title{color:#fff; font-weight:800; font-size:2.3rem; line-height:1.38; text-shadow:0 2px 10px rgba(0,0,0,.18)}
.feature-body{padding:1.4rem 0 1.8rem}
.feature-body h2{font-size:clamp(1.8rem,1.55rem + .8vw,2.2rem); font-weight:700; margin:.6rem 0 0; line-height:1.5}
.slider .arrow{position:absolute; top:42%; transform:translateY(-50%); width:4.2rem; height:4.2rem; border-radius:0; background:#fff; border:1px solid var(--ink); box-shadow:none; font-size:1.8rem; cursor:pointer; z-index:3; color:var(--ink)}
.slider .prev{left:1rem} .slider .next{right:1rem}
.dots{display:flex; gap:.7rem; justify-content:center; align-items:center; margin-top:1.8rem; color:var(--sub); font-size:1.15rem; font-weight:700}
.dot{width:.9rem; height:.9rem; border-radius:50%; background:#d9d9d5; border:0; cursor:pointer; padding:0}
.dot.on{background:var(--ink)}

/* ===== article cards / grids（フラット：枠なし・影なし・余白で区切る） ===== */
.section{padding:0 0 1rem}
.section.alt{background:var(--bg2); padding-bottom:3rem; padding-top:.5rem}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:3rem 2.4rem}
.grid4{display:grid; grid-template-columns:repeat(3,1fr); gap:3rem 2.4rem}
.acard{display:flex; flex-direction:column; background:transparent; border:0; border-radius:0; overflow:visible; box-shadow:none; color:var(--ink); transition:opacity .15s}
.acard:hover{transform:none; opacity:1}
.acard:hover h3{text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px}
.acard .thumb{position:relative; aspect-ratio:16/9; display:grid; place-items:center; padding:0; text-align:center; overflow:hidden; background:var(--bg2)}
.acard .thumb img,.feature-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.feature-thumb{overflow:hidden}
.acard .thumb .t-title{color:#fff; font-weight:800; font-size:1.5rem; line-height:1.38; text-shadow:0 2px 8px rgba(0,0,0,.16)}
.badge{display:none}
.acard .body{padding:1.2rem 0 0; flex:1}
.metarow{display:flex; align-items:center; gap:1.1rem; margin-bottom:.5rem; flex-wrap:wrap}
.metarow .cat{font-size:1.1rem; font-weight:700; padding:0; border-radius:0; letter-spacing:.05em; display:inline-flex; align-items:center; gap:.55rem}
.metarow .cat::before{content:""; width:.8rem; height:.8rem; border-radius:50%; background:currentColor; flex:none}
.metarow time{font-size:1.15rem; color:var(--sub)}
.metarow time::before{content:""}
.acard h3{font-size:clamp(1.55rem,1.42rem + .4vw,1.75rem); font-weight:700; margin:0; line-height:1.6; color:var(--ink)}
.acard.soon{opacity:.62; pointer-events:none}

/* category colors：カードのメタ行はドット＋色文字（地色は使わない） */
.metarow .c-komatta{background:transparent; color:var(--c-komatta)}
.metarow .c-ai{background:transparent; color:var(--c-ai)}
.metarow .c-hikaku{background:transparent; color:var(--c-hikaku)}
.metarow .c-shukyaku{background:transparent; color:var(--c-shukyaku)}
.metarow .c-cvr{background:transparent; color:var(--c-cvr)}
.metarow .c-mall{background:transparent; color:var(--c-mall)}
.metarow .c-event{background:transparent; color:var(--c-event)}
.metarow .c-news{background:transparent; color:var(--c-news)}
.metarow .c-cart{background:transparent; color:var(--c-cart)}
/* サムネHTML内タイトル用の旧グラデ（画像化前の保険として残置） */
.t-komatta{background:linear-gradient(135deg,#d6000f,#ec3541)} .cat.c-komatta:not(.metarow .cat){}
.t-ai{background:linear-gradient(135deg,#ef8a3c,#f6b34d)}
.t-hikaku{background:linear-gradient(135deg,#5b6470,#7c8694)}
.t-shukyaku{background:linear-gradient(135deg,#e0608a,#ef85a8)}
.t-cvr{background:linear-gradient(135deg,#9b3b54,#bd5a73)}
.t-mall{background:linear-gradient(135deg,#d9a441,#ecc06a)}
.t-event{background:linear-gradient(135deg,#1f8f4e,#3fb56e)}
.t-news{background:linear-gradient(135deg,#25689a,#3f8ec4)}
.t-cart{background:linear-gradient(135deg,#0f7d8a,#2aa8b5)}
/* metarow外（一覧ページ見出し等）で .cat が使われた場合も同スタイル */
.cat{font-size:1.1rem; font-weight:700; padding:0; border-radius:0; color:var(--ink); background:transparent; display:inline-flex; align-items:center; gap:.55rem}
.cat.c-komatta{color:var(--c-komatta)} .cat.c-ai{color:var(--c-ai)} .cat.c-hikaku{color:var(--c-hikaku)}
.cat.c-shukyaku{color:var(--c-shukyaku)} .cat.c-cvr{color:var(--c-cvr)} .cat.c-mall{color:var(--c-mall)}
.cat.c-event{color:var(--c-event)} .cat.c-news{color:var(--c-news)} .cat.c-cart{color:var(--c-cart)}
.cat::before{content:""; width:.8rem; height:.8rem; border-radius:50%; background:currentColor; flex:none}

/* themed row heads（英字＋和文の編集部見出し） */
.row-head{display:flex; align-items:center; gap:1.2rem; margin:3.4rem 0 1.8rem; padding-bottom:1rem; border-bottom:1px solid var(--ink)}
.row-head .dotc{width:1rem; height:1rem; border-radius:50%}
.row-head h2{font-size:clamp(1.8rem,1.55rem + .9vw,2.2rem); margin:0; font-weight:700; letter-spacing:.02em}
.row-head .more{margin-left:auto; font-size:1.2rem; font-weight:700; color:var(--ink); letter-spacing:.08em}
.row-head .more:hover{opacity:.6}

/* pick up */
.pickup{display:grid; grid-template-columns:.9fr 1.1fr; gap:2.6rem; align-items:center; padding:1rem 0}
.pickup-illust{background:var(--bg2); border-radius:0; min-height:19rem; display:grid; place-items:center; text-align:center; padding:2rem}
.pickup-illust .big{font-size:4.2rem}
.pickup-illust p{margin:.6rem 0 0; color:var(--ink); font-weight:700; font-size:1.4rem}
.pick-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
.pick-btn{display:flex; align-items:center; gap:1.1rem; background:#fff; border:0; border-radius:0; padding:1.4rem 1.6rem; box-shadow:none; color:var(--ink); font-weight:600; font-size:1.35rem}
.pick-btn:hover{background:var(--bg2); opacity:1; transform:none}
.pick-btn .ic{display:none}
.pick-btn .ar{margin-left:auto; width:2.2rem; height:2.2rem; border-radius:0; background:transparent; color:var(--ink); display:grid; place-items:center; font-size:1.4rem}

/* CTA band（赤はここだけ主役で使う） */
.cta-band{background:var(--brand); color:#fff; margin-top:4rem}
.cta-band-inner{display:flex; align-items:center; justify-content:space-between; gap:2.4rem; padding:3rem var(--edge); flex-wrap:wrap; max-width:none}
.cta-band h3{font-size:2rem; margin:0 0 .7rem}
.cta-band p{margin:0; opacity:.95; font-size:1.4rem}
.cta-band-btns{display:flex; gap:1.2rem; flex-wrap:wrap}
.cta-band .hbtn.primary{background:#fff; color:var(--brand-d)}
.cta-band .hbtn.primary:hover{background:#f4f4f4}

/* ===== footer（黒） ===== */
.site-footer{background:#101113; color:#b9bcc2; padding:3.6rem 0 0; font-size:1.3rem; margin-top:0}
.site-footer .wrap{max-width:none; padding:0 var(--edge)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem; padding-bottom:2.8rem}
.foot-brand .brand-main{color:#fff; font-size:1.9rem; font-weight:800; letter-spacing:.12em}
.foot-brand .brand-main b{color:#fff}
.foot-brand .brand-main span{font-size:1.05rem; color:#8d97a6; font-weight:500}
.foot-brand p{margin:1.1rem 0 0; line-height:1.9}
.foot-brand a{color:#e0e2e6}
.foot-col h4{color:#fff; font-size:1.2rem; letter-spacing:.16em; margin:0 0 1.1rem; border-bottom:1px solid #2c2e33; padding-bottom:.7rem; font-weight:600}
.foot-col a{display:block; color:#b9bcc2; padding:.45rem 0}
.foot-col a:hover{color:#fff; opacity:1}
.foot-copy{border-top:1px solid #26282c; padding:1.6rem 0; font-size:1.15rem; color:#84878d}
.foot-copy .wrap{display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}

/* ===== article page（editorial：760px・16px/1.95・黒罫見出し） ===== */
.article-wrap{max-width:76rem; margin:0 auto; padding:4rem 2.4rem 9.6rem}
.breadcrumb{font-size:1.25rem; color:var(--sub); padding:0 0 1.8rem}
.breadcrumb a{color:var(--sub)}
.article{background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; margin:0;
  font-size:1.6rem; line-height:1.95; color:#1a1a1d}
.article .tag{display:inline-flex; align-items:center; gap:.6rem; font-size:1.15rem; font-weight:700; color:var(--brand-d);
  background:transparent; padding:0; border-radius:0; letter-spacing:.08em}
.article .tag::before{content:""; width:.8rem; height:.8rem; border-radius:50%; background:currentColor}
.article h1{font-size:clamp(2.6rem,3.6vw,3.6rem); font-weight:800; line-height:1.35; letter-spacing:-.01em; margin:1.4rem 0 1.2rem}
.article .meta{color:var(--sub); font-size:1.3rem; border:0; padding:0; margin:0 0 3.2rem}
.article h2{font-size:2.2rem; font-weight:700; margin:4.8rem 0 1.6rem; padding:0 0 1.1rem; border-left:0;
  border-bottom:1px solid var(--ink); letter-spacing:-.005em; line-height:1.5; scroll-margin-top:6rem}
.article h3{font-size:1.8rem; font-weight:700; margin:3.2rem 0 1.2rem; letter-spacing:-.005em; line-height:1.55; scroll-margin-top:6rem}
.article p{margin:1.6rem 0}
.article ul,.article ol{margin:1.6rem 0; padding-left:2.4rem}
.article li{margin:.8rem 0; line-height:1.85}
.article strong{font-weight:700}
.article code{background:var(--bg2); padding:.2rem .6rem; border-radius:3px; font-size:.92em; font-family:"SF Mono",Menlo,Consolas,monospace}
.lead{font-size:1.65rem; line-height:1.95; color:#1a1a1d}
/* アイキャッチ */
.article-hero{margin:0 0 3.2rem; border-radius:0; overflow:hidden; aspect-ratio:1200/630; background:var(--bg2);
  border:1px solid var(--line); box-shadow:none}
.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; border-radius:0; border:1px solid var(--line); box-shadow:none}
.article-fig figcaption{margin-top:1.2rem; font-size:1.3rem; color:var(--sub); font-weight:500; letter-spacing:.01em; line-height:1.6; text-align:center}
/* 3行まとめ */
.summary-box{background:var(--bg2); border:0; border-left:3px solid var(--ink); border-radius:0; padding:2rem 2.4rem; margin:2.4rem 0}
.summary-box h4{margin:0 0 1rem; color:var(--ink); font-size:1.4rem; letter-spacing:.08em}
.summary-box ul{margin:0}
/* 目次（モノクロの編集部スタイル） */
.toc{background:#fff; border:1px solid var(--line); border-top:2px solid var(--ink); border-left:1px solid var(--line);
  border-radius:0; padding:2.2rem 2.6rem; margin:2.8rem 0 3.6rem; box-shadow:none}
.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.25rem; font-weight:700; color:var(--ink); letter-spacing:.22em; margin:0 0 1.4rem}
.toc_title::before{content:""; width:1.8rem; height:1px; background:var(--ink); display:inline-block; flex:none}
.toc-mark{position:relative; width:1.8rem; height:1.8rem; margin-left:auto; flex:none}
.toc-mark::before,.toc-mark::after{content:""; position:absolute; left:50%; top:50%; background:#8a8a90; transform:translate(-50%,-50%)}
.toc-mark::before{width:1.3rem; height:2px}
.toc-mark::after{width:2px; 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:.7rem 0; padding:0 0 0 3.4rem; position:relative; border:0}
.toc_list>li:last-child{border:0}
.toc_list>li>a{display:block; color:#1a1a1d; font-weight:500; font-size:1.4rem; line-height:1.7; padding:0; transition:opacity .15s}
.toc_list>li>a::before{content:counter(toc,decimal-leading-zero); position:absolute; left:0; top:.15rem;
  font-family:"Outfit",sans-serif; font-weight:600; font-size:1.25rem; color:var(--sub); letter-spacing:.05em}
.toc_list ul{list-style:none; margin:.4rem 0 .2rem; padding:0}
.toc_list ul li a{display:block; color:var(--sub); font-weight:400; font-size:1.3rem; line-height:1.7; padding:.25rem 0 .25rem 1.2rem; position:relative}
.toc_list ul li a::before{content:"–"; position:absolute; left:0; color:#c9c9ce}
.toc a:hover{opacity:.6}
/* チェックリスト */
.checklist{list-style:none; padding:0}
.checklist li{padding-left:3rem; position:relative; margin:.8rem 0}
.checklist li::before{content:"✓"; position:absolute; left:0; top:.3rem; width:2rem; height:2rem; background:var(--ink); color:#fff; border-radius:2px; display:grid; place-items:center; font-size:1.2rem; font-weight:700}
/* AIヒント・プロンプト */
.tip{background:#fff7ec; border:1px solid #f0debc; border-radius:4px; padding:2rem 2.4rem; margin:2.4rem 0}
.tip h4{margin:.2rem 0 1rem; color:#a8690a; font-size:1.5rem}
.prompt-box{background:#17181b; color:#e7ecf3; border-radius:4px; padding:1.8rem 2rem; font-family:"SF Mono",Menlo,Consolas,monospace; font-size:1.35rem; line-height:1.8; white-space:pre-wrap; overflow-x:auto}
/* 表（editorial：黒罫ヘッダ） */
table.tbl{width:100%; border-collapse:collapse; margin:2.4rem 0; font-size:1.45rem; background:#fff;
  border-radius:0; overflow:hidden; box-shadow:none}
table.tbl thead{background:#fff}
table.tbl th{padding:1.2rem 1.6rem; text-align:left; font-weight:700; color:var(--ink); border-bottom:2px solid var(--ink); font-size:1.35rem; letter-spacing:.02em; border-left:0; border-right:0; border-top:0}
table.tbl td{padding:1.2rem 1.6rem; border-bottom:1px solid var(--line); border-left:0; border-right:0; border-top:0; 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:#fff; font-weight:700; border-bottom:2px solid var(--ink)}
/* 引用 */
.bq,.article blockquote{border-left:3px solid var(--ink); background:var(--bg2); padding:1.8rem 2.2rem; border-radius:0; margin:2.4rem 0; color:#1a1a1d}
.bq p:last-child{margin-bottom:0}
.bq cite{display:block; margin-top:.6rem; font-size:1.3rem; color:var(--sub); font-style:normal}
/* 記事内CTA（赤の使いどころ） */
.cta{background:var(--brand); color:#fff; border-radius:0; padding:2.8rem 3rem; margin:4rem 0 3rem}
.cta h3{margin:0 0 1rem; font-size:2rem; border:0; padding:0}
.cta p{margin:0 0 1.8rem; opacity:.95; font-size:1.5rem; 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:2px; font-weight:700; font-size:1.45rem}
.btn.primary{background:#fff; color:var(--brand-d)}
.btn.ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7)}
/* 関連記事 */
.related{margin:3.2rem 0 0}
.related h3{font-size:1.7rem; margin:0 0 1.4rem; padding-bottom:.9rem; border-bottom:1px solid var(--ink)}
.related ul{list-style:none; padding:0; margin:0; display:grid; gap:0}
.related li{margin:0}
.related li a{display:block; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:1.3rem .2rem; font-weight:500; font-size:1.45rem; line-height:1.6; color:var(--ink)}
.related li a:hover{opacity:.6}

/* ===== 記事内図解コンポーネント ===== */

/* 蛍光マーカー */
.article .marker{background:linear-gradient(transparent 62%,#fff48e 62%); padding:0 .12em; font-weight:700}

/* ステップ図（①→②→③ 縦並び・連結線つき） */
.steps{list-style:none; counter-reset:step; margin:2.6rem 0; padding:0}
.steps>li{counter-increment:step; position:relative; padding:.1rem 0 2.4rem 5.6rem; min-height:4rem}
.steps>li::before{content:counter(step); position:absolute; left:0; top:0; width:3.8rem; height:3.8rem; background:var(--ink); color:#fff; border-radius:50%; display:grid; place-items:center; font-family:"Outfit",sans-serif; font-weight:700; font-size:1.8rem; z-index:1}
.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.5rem + .5vw,2rem); font-weight:700; line-height:1.45}
.steps p{margin:0}

/* ポイント枠 */
.pointbox{background:var(--bg2); border:0; border-left:3px solid var(--ink); border-radius:0; padding:1.8rem 2.2rem; margin:2.2rem 0}
.pointbox h4{margin:0 0 .6rem; font-size:clamp(1.55rem,1.45rem + .35vw,1.8rem); color:var(--ink)}
.pointbox p:last-child{margin-bottom:0}

/* 横フロー（A → B → C） */
.flow{display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem; margin:2.6rem 0}
.flow-item{flex:1 1 0; min-width:13rem; background:#fff; border:1px solid var(--line); border-top:2px solid var(--ink); border-radius:0; padding:1.6rem 1.4rem; text-align:center; position:relative}
.flow-item h4{margin:.2rem 0 .4rem; font-size:clamp(1.5rem,1.4rem + .3vw,1.7rem)}
.flow-item p{margin:0; font-size:1.4rem; color:var(--sub); line-height:1.6}
.flow-item:not(:last-child)::after{content:"›"; position:absolute; right:-1.7rem; top:50%; transform:translateY(-50%); color:var(--ink); font-size:2.4rem; font-weight:700}
.flow-step{flex:1 1 0; min-width:13rem; background:#fff; border:1px solid var(--line); border-top:2px solid var(--ink); border-radius:0; padding:1.6rem 1.4rem; text-align:center; position:relative; font-size:1.4rem; line-height:1.6; font-weight:700}
.flow-step small{display:block; margin-top:.5rem; color:var(--sub); font-size:1.25rem; font-weight:400}
.flow-step:not(:last-child)::after{content:"›"; position:absolute; right:-1.7rem; top:50%; transform:translateY(-50%); color:var(--ink); font-size:2.4rem; font-weight:700}
.flow:has(.flow-arrow) .flow-step::after{display:none}
.flow-arrow{align-self:center; color:var(--ink); font-weight:700; font-size:2.2rem; flex:none}

/* OK / NG 比較 */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin:2.6rem 0}
.compare-col{border:1px solid var(--line); border-radius:0; padding:1.8rem 2rem; background:#fff}
.compare-col .ttl{display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:clamp(1.6rem,1.5rem + .3vw,1.8rem); margin-bottom:.8rem}
.compare-col .ttl::before{width:2.4rem; height:2.4rem; border-radius:50%; color:#fff; display:grid; place-items:center; font-size:1.5rem; font-weight:700; flex:none}
.compare-col.good{border-color:#bfe0c8; background:#f5faf6}
.compare-col.good .ttl{color:#1f7d47}
.compare-col.good .ttl::before{content:"○"; background:#27a866}
.compare-col.bad{border-color:#eccfd2; background:#fbf6f6}
.compare-col.bad .ttl{color:var(--brand-d)}
.compare-col.bad .ttl::before{content:"×"; background:var(--brand)}
.compare-col p:last-child{margin-bottom:0}
.compare>div{border:1px solid var(--line); border-radius:0; padding:1.8rem 2rem; background:#fff}
.compare>div>h4{display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:clamp(1.6rem,1.5rem + .3vw,1.8rem); margin:0 0 .8rem}
.compare-col.compare-good,.compare>.compare-good{border-color:#bfe0c8; background:#f5faf6}
.compare-col.compare-good h4,.compare>.compare-good h4{color:#1f7d47}
.compare-col.compare-bad,.compare>.compare-bad{border-color:#eccfd2; background:#fbf6f6}
.compare-col.compare-bad h4,.compare>.compare-bad h4{color:var(--brand-d)}

/* 番号つきポイントカード */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr)); gap:1.6rem; margin:3rem 0 2.6rem; counter-reset:card}
.cards>div{background:#fff; border:1px solid var(--line); border-radius:0; padding:1.8rem; position:relative}
.cards>div>h4{margin:0 0 .6rem; font-size:clamp(1.6rem,1.5rem + .3vw,1.8rem)}
.cards>div>p{margin:0; font-size:1.45rem; line-height:1.8}
.card-item{counter-increment:card; background:#fff; border:1px solid var(--line); border-radius:0; padding:2.2rem 1.8rem 1.8rem; position:relative}
.card-item::before{content:counter(card); position:absolute; top:-1.3rem; left:1.6rem; width:3.4rem; height:3.4rem; background:var(--ink); color:#fff; border-radius:50%; display:grid; place-items:center; font-family:"Outfit",sans-serif; font-weight:700; font-size:1.6rem}
.card-item h4{margin:.5rem 0 .5rem; font-size:clamp(1.6rem,1.5rem + .3vw,1.8rem)}
.card-item p{margin:0; font-size:1.45rem; line-height:1.8}

/* コールアウト（ポイント／補足／注意） */
.callout{display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-start; border:1px solid; border-radius:0; padding:1.7rem 2rem; margin:2.4rem 0}
.callout>h4{flex:1 1 100%; margin:0}
.callout>p{flex:1 1 100%; margin:0}
.callout .ico{font-size:2rem; line-height:1.3; flex:none}
.callout h4{margin:0 0 .4rem; font-size:clamp(1.55rem,1.45rem + .3vw,1.75rem)}
.callout p:last-child{margin-bottom:0}
.callout-point{background:#fbf5f5; border-color:#eccfd2} .callout-point h4{color:var(--brand-d)}
.callout-note{background:#f2f6fb; border-color:#d3e0ef} .callout-note h4{color:#2c6fb5}
.callout-warn{background:#fdf8ee; border-color:#f0debc} .callout-warn h4{color:#a8690a}

/* 数字の強調 */
.statbox{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.4rem; margin:2.6rem 0}
.stat{background:#fff; border:1px solid var(--line); border-radius:0; padding:2rem 1.6rem; text-align:center}
.stat .num{font-family:"Outfit",sans-serif; font-weight:700; color:var(--brand); font-size:clamp(3.2rem,2.4rem + 1.8vw,4.4rem); line-height:1}
.stat .lbl{margin-top:.6rem; font-size:1.4rem; color:var(--sub); line-height:1.6}

/* 引用 */
.bq{border-left:3px solid var(--ink); background:var(--bg2); margin:2.4rem 0; padding:1.6rem 2rem; color:#444}
.bq p:last-child{margin-bottom:0}
.bq cite{display:block; margin-top:.6rem; font-size:1.3rem; color:var(--sub); font-style:normal}

/* ===== top page 2.0 ===== */
/* ファーストビュー：大特集1枚＋右にコンパクト行 */
.fv{display:grid; grid-template-columns:1.55fr 1fr; gap:3rem; padding:3rem 0 1rem}
.fv-main{display:block; color:var(--ink)}
.fv-main .thumb{border-radius:0; overflow:hidden; aspect-ratio:1200/630; box-shadow:none; background:var(--bg2)}
.fv-main .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:opacity .3s}
.fv-main:hover .thumb img{transform:none; opacity:.9}
.fv-main h2{font-size:clamp(2.1rem,1.7rem + 1.3vw,3rem); font-weight:700; line-height:1.4; margin:1.4rem 0 .6rem; letter-spacing:-.01em}
.fv-main .desc{color:var(--sub); font-size:1.45rem; line-height:1.8; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.fv-side{display:flex; flex-direction:column; gap:0}
.fv-side .side-label{font-size:1.15rem; font-weight:700; color:var(--ink); letter-spacing:.22em; padding-bottom:1rem; border-bottom:1px solid var(--ink); margin-bottom:.4rem}
/* ミニ行（小サムネ＋タイトル） */
.mini{display:flex; gap:1.3rem; align-items:center; color:var(--ink); padding:1.2rem 0; border-bottom:1px solid var(--line)}
.mini .thumb{flex:none; width:11rem; aspect-ratio:16/9; border-radius:0; overflow:hidden; background:var(--bg2)}
.mini .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.mini h3{font-size:1.4rem; font-weight:600; line-height:1.5; margin:0 0 .3rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mini .m-meta{font-size:1.1rem; color:var(--sub)}
.mini .m-meta b{font-weight:700; margin-right:.8rem}
.mini:hover h3{text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px}
/* EC速報バー（新聞風テキスト行） */
.newsbar{background:#fff; border:1px solid var(--line); border-top:2px solid var(--ink); border-radius:0; box-shadow:none; padding:.6rem 2rem; margin:2.6rem 0}
.newsbar-row{display:flex; align-items:baseline; gap:1.4rem; padding:1.3rem 0; border-bottom:1px solid var(--line); color:var(--ink)}
.newsbar a.newsbar-row:last-of-type{border-bottom:0}
.newsbar-row time{flex:none; font-size:1.25rem; color:var(--sub); font-family:"Outfit",sans-serif; font-weight:500}
.newsbar-row .nb-cat{flex:none; font-size:1.05rem; font-weight:700; color:var(--c-news); background:transparent; border-radius:0; padding:0; display:inline-flex; align-items:center; gap:.5rem}
.newsbar-row .nb-cat::before{content:""; width:.7rem; height:.7rem; border-radius:50%; background:currentColor}
.newsbar-row .nb-title{font-size:1.45rem; font-weight:600; line-height:1.5}
.newsbar-row:hover .nb-title{text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px}
.newsbar-more{display:block; text-align:right; font-size:1.2rem; font-weight:700; color:var(--ink); padding:.9rem 0 .6rem; letter-spacing:.06em}
/* 番号付きランキング（2カラム） */
.ranklist{display:grid; grid-template-columns:1fr 1fr; gap:.4rem 3.2rem; margin:1.6rem 0}
.rankrow{display:flex; align-items:center; gap:1.4rem; padding:1.2rem 0; border-bottom:1px solid var(--line); color:var(--ink)}
.rankrow .no{flex:none; width:3rem; text-align:center; font-family:"Outfit",sans-serif; font-weight:600; font-size:2rem; color:#c9c9c5; line-height:1}
.rankrow:nth-child(1) .no,.rankrow:nth-child(2) .no,.rankrow:nth-child(3) .no{color:var(--brand)}
.rankrow .thumb{flex:none; width:9.6rem; aspect-ratio:16/9; border-radius:0; overflow:hidden; background:var(--bg2)}
.rankrow .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.rankrow h3{font-size:1.4rem; font-weight:600; line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rankrow:hover h3{text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px}
/* カテゴリダイジェスト */
.digest{display:grid; grid-template-columns:1.1fr 1fr; gap:2.6rem; align-items:start}
.digest-feat{display:block; color:var(--ink)}
.digest-feat .thumb{border-radius:0; overflow:hidden; aspect-ratio:16/9; box-shadow:none; background:var(--bg2)}
.digest-feat .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.digest-feat h3{font-size:1.7rem; font-weight:700; line-height:1.5; margin:1.1rem 0 .4rem}
.digest-feat .desc{color:var(--sub); font-size:1.35rem; line-height:1.75; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.digest-list{display:flex; flex-direction:column}
.txtrow{display:flex; align-items:baseline; gap:1.1rem; padding:1.35rem .2rem; border-bottom:1px solid var(--line); color:var(--ink)}
.txtrow .ar{flex:none; color:var(--ink); font-weight:700}
.txtrow h4{font-size:1.45rem; font-weight:600; line-height:1.55; margin:0}
.txtrow:hover h4{text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px}
.digest-more{display:inline-block; margin-top:1.2rem; font-size:1.25rem; font-weight:700; color:var(--ink); letter-spacing:.06em}
@media(max-width:900px){
  .fv{grid-template-columns:1fr}
  .ranklist{grid-template-columns:1fr}
  .digest{grid-template-columns:1fr}
}

/* ===== blog top（検索・ピル・ランキング） ===== */
.blog-head{padding:3.6rem 0 0}
.blog-head h1{font-size:clamp(2.8rem,2.2rem + 2vw,4rem); font-weight:800; margin:.6rem 0 1rem; letter-spacing:-.01em}
.blog-head .lede{color:var(--sub); font-size:clamp(1.5rem,1.4rem + .3vw,1.7rem); max-width:none; line-height:1.9}
.blog-search{margin:2.6rem auto 1.6rem; max-width:64rem}
.blog-search .box{display:flex; align-items:center; gap:1rem; background:#fff; border:1px solid var(--ink); border-radius:2px; padding:1.1rem 1.8rem; box-shadow:none}
.blog-search input{flex:1; border:0; outline:none; font-size:1.5rem; font-family:inherit; background:transparent; color:var(--ink)}
.blog-search .ic{font-size:1.6rem; color:var(--sub)}
.cat-pills{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin:0 0 1rem}
.cat-pills a{display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--line); border-radius:2px; padding:.7rem 1.5rem; font-size:1.3rem; font-weight:600; color:var(--ink)}
.cat-pills a:hover{border-color:var(--ink); opacity:1}
.cat-pills .cnt{background:var(--bg2); border-radius:2px; padding:.1rem .8rem; font-size:1.1rem; color:var(--sub); font-weight:700}
.cat-pills a.all{background:var(--ink); border-color:var(--ink); color:#fff}
.cat-pills a.all .cnt{background:rgba(255,255,255,.2); color:#fff}
/* 人気記事ランキング */
.rank-wrap{position:relative}
.rank-badge{position:absolute; top:0; left:0; z-index:2; width:3.6rem; height:3.6rem; border-radius:0;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  font-family:"Outfit",sans-serif; font-weight:700; font-size:1.5rem; box-shadow:none}
.rank-badge.r1{background:var(--brand)}
.rank-badge.r2{background:#3a3c40}
.rank-badge.r3{background:#6b6e73}
/* カードの説明文・日付 */
.acard .desc{font-size:1.35rem; color:var(--sub); line-height:1.7; margin:.7rem 0 0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.cat-lede{color:var(--sub); font-size:1.4rem; margin:-1rem 0 1.6rem}
.blog-search-none{display:none; text-align:center; color:var(--sub); padding:3rem 0}

/* ページネーション */
.pager{display:flex; gap:.9rem; justify-content:center; align-items:center; margin:4rem 0 1rem}
.pager a,.pager .cur,.pager .dots3{min-width:4.2rem; height:4.2rem; display:grid; place-items:center;
  border-radius:0; font-family:"Outfit",sans-serif; font-weight:600; font-size:1.5rem}
.pager a{background:#fff; border:1px solid var(--line); color:var(--ink)}
.pager a:hover{border-color:var(--ink); opacity:1}
.pager .cur{background:var(--ink); color:#fff}
.pager .dots3{color:var(--sub)}
.pager .pn{padding:0 1.6rem; font-family:inherit; font-size:1.35rem}

/* ===== responsive ===== */
@media(max-width:900px){
  :root{--edge:1.8rem}
  .grid4{grid-template-columns:1fr 1fr} .grid3{grid-template-columns:1fr 1fr}
  .slide{grid-template-columns:1fr} .slide .feature:nth-child(2){display:none}
  .pickup{grid-template-columns:1fr}
  .search{display:none} .gnav{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .gnav .wrap{justify-content:flex-start; gap:2.2rem} .gnav a{white-space:nowrap}
  .ht-inner{height:3.6rem}
  .ht-tag{font-size:1rem; letter-spacing:.1em}
  .header-main{padding:1.8rem 0 1.5rem}
  .brand-word{font-size:2.8rem}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  table.tbl{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  table.tbl th,table.tbl td{min-width:13rem}
}
@media(max-width:560px){
  .grid4,.grid3{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr}
  .ht-right .hbtn.primary{font-size:1.1rem; padding:.7rem 1.2rem}
  .brand-word{font-size:2.4rem}
  .compare{grid-template-columns:1fr}
  .flow-item:not(:last-child)::after{content:"⌄"; right:auto; left:50%; top:auto; bottom:-1.5rem; transform:translateX(-50%)}
}