:root{
  --bg:#ffffff; --bg2:#f6f7f8; --card:#fff; --ink:#26282b; --sub:#6b7280; --line:#e1e5eb;
  --brand:#d6000f; --brand-d:#b90915;     /* オタツー コーポレートカラー（レッド #d6000f） */
  --cta:#d6000f; --cta-d:#b90915;          /* 行動喚起（同じコーポレートレッド） */
  --en:#d6000f;                            /* セクション英字見出し色 */
  /* カテゴリカラー（コーポレートレッドを主役に、補助色で誌面の彩りを担保） */
  --c-komatta:#d6000f; --c-ai:#ef8a3c; --c-hikaku:#5b6470; --c-shukyaku:#e0608a; --c-cvr:#9b3b54; --c-mall:#d9a441;
  --radius:10px; --shadow:0 5px 20px rgba(20,30,50,.06);
  --maxw:1200px;        /* コンテンツ最大幅（少し広げて余白の窮屈さを解消） */
  --edge:4rem;          /* フルブリード時の左右余白 */
}
*{box-sizing:border-box}
html{font-size:62.5%}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter","Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif; font-size:clamp(1.5rem,1.42rem + .25vw,1.65rem); line-height:1.8; -webkit-font-smoothing:antialiased;}
a{color:var(--brand-d); text-decoration:none}
a:hover{opacity:.85}
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(--line); position:sticky; top:0; z-index:50}
.site-header .wrap{max-width:none; padding:0 var(--edge)}   /* ← ヘッダーだけ全幅に */
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:2rem; height:6.4rem}
.brand{display:flex; flex-direction:row; align-items:center; gap:1.1rem; color:var(--ink)}
.brand-mark{width:4.8rem; height:4.8rem; flex:none; color:var(--brand)}
.brand-text{display:flex; flex-direction:column; line-height:1.12}
.brand-main{font-size:2.1rem; font-weight:900; letter-spacing:.01em}
.brand-main b{color:var(--brand)}
.brand-sub{font-size:1.05rem; color:var(--sub); font-weight:600; letter-spacing:.08em}
.header-right{display:flex; align-items:center; gap:1rem}
.search{display:flex; align-items:center; background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:.2rem .4rem .2rem 1.4rem}
.search input{border:0; background:transparent; font-size:1.25rem; width:17rem; outline:none; color:var(--ink)}
.search button{border:0; background:transparent; cursor:pointer; font-size:1.3rem; padding:.4rem .8rem}
.hbtn{display:inline-block; padding:1rem 1.7rem; border-radius:7px; font-size:1.3rem; font-weight:700; white-space:nowrap}
.hbtn.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.hbtn.ghost:hover{border-color:var(--brand)}
.hbtn.primary{background:var(--cta); color:#fff; box-shadow:0 4px 12px rgba(232,81,47,.28)}
.hbtn.primary:hover{background:var(--cta-d); opacity:1}
.hbtn.lg{padding:1.4rem 2.6rem; font-size:1.5rem}
.hbtn.ghost-light{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.75)}
.gnav{border-top:1px solid var(--line); background:#fff}
.gnav .wrap{display:flex; gap:2.8rem; height:4.4rem; align-items:center; justify-content:center}
.gnav a{color:var(--ink); font-size:1.35rem; font-weight:700}
.gnav a:hover{color:var(--cta); opacity:1}

/* ===== section heading（news / pick up 風） ===== */
.sec-head{text-align:center; margin:4.2rem 0 2.2rem}
.sec-head .en{display:block; font-family:"Outfit",sans-serif; font-size:clamp(3rem,2.2rem + 2.4vw,4.2rem); font-weight:800; font-style:italic; color:var(--en); letter-spacing:.02em; line-height:1}
.sec-head .ja{display:inline-block; margin-top:.6rem; font-size:1.25rem; color:var(--sub); letter-spacing:.24em; font-weight:700}

/* ===== hero slider（フルブリード：画面幅いっぱい） ===== */
.hero{background:var(--bg2); 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:12px}
.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:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); color:var(--ink); transition:transform .18s}
.feature:hover{transform:translateY(-4px); opacity:1}
.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:900; font-size:2.3rem; line-height:1.38; text-shadow:0 2px 10px rgba(0,0,0,.18)}
.feature-body{padding:1.5rem 1.9rem 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:50%; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); 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:1rem; height:1rem; border-radius:50%; background:#cfd6dd; border:0; cursor:pointer; padding:0}
.dot.on{background:var(--cta)}

/* ===== 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:1.8rem}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem}
.acard{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); color:var(--ink); transition:transform .18s}
.acard:hover{transform:translateY(-4px); opacity:1}
.acard .thumb{position:relative; aspect-ratio:16/9; display:grid; place-items:center; padding:1.4rem; text-align:center; overflow:hidden}
.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:900; font-size:1.5rem; line-height:1.38; text-shadow:0 2px 8px rgba(0,0,0,.16)}
.badge{position:absolute; top:.9rem; left:.9rem; background:rgba(0,0,0,.55); color:#fff; font-size:1rem; font-weight:700; padding:.25rem .8rem; border-radius:4px; letter-spacing:.02em}
.acard .body{padding:1.1rem 1.2rem 1.3rem; flex:1}
.metarow{display:flex; align-items:center; gap:.9rem; margin-bottom:.5rem; flex-wrap:wrap}
.cat{font-size:1.05rem; font-weight:800; padding:.2rem .7rem; border-radius:4px; color:#fff}
.metarow time{font-size:1.2rem; color:var(--sub)}
.metarow time::before{content:"📅 "; font-size:.95rem}
.acard h3{font-size:clamp(1.45rem,1.35rem + .35vw,1.65rem); font-weight:700; margin:0; line-height:1.55; color:var(--ink)}
.acard.soon{opacity:.62; pointer-events:none}
.acard.soon .badge{background:var(--cta)}

/* category color fills */
.t-komatta{background:linear-gradient(135deg,#d6000f,#ec3541)} .c-komatta{background:var(--c-komatta)}
.t-ai{background:linear-gradient(135deg,#ef8a3c,#f6b34d)} .c-ai{background:var(--c-ai)}
.t-hikaku{background:linear-gradient(135deg,#5b6470,#7c8694)} .c-hikaku{background:var(--c-hikaku)}
.t-shukyaku{background:linear-gradient(135deg,#e0608a,#ef85a8)} .c-shukyaku{background:var(--c-shukyaku)}
.t-cvr{background:linear-gradient(135deg,#9b3b54,#bd5a73)} .c-cvr{background:var(--c-cvr)}
.t-mall{background:linear-gradient(135deg,#d9a441,#ecc06a)} .c-mall{background:var(--c-mall)}

/* themed row heads（colored dot） */
.row-head{display:flex; align-items:center; gap:1rem; margin:2.8rem 0 1.4rem}
.row-head .dotc{width:1.1rem; height:1.1rem; border-radius:50%}
.row-head h2{font-size:clamp(1.9rem,1.6rem + 1vw,2.35rem); margin:0; font-weight:900; letter-spacing:.01em}
.row-head .more{margin-left:auto; font-size:1.25rem; font-weight:700; color:var(--cta)}

/* pick up */
.pickup{display:grid; grid-template-columns:.9fr 1.1fr; gap:2.6rem; align-items:center; padding:1rem 0}
.pickup-illust{background:linear-gradient(135deg,#fdecec,#f7f7f7); border-radius:14px; 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(--brand-d); font-weight:700; font-size:1.4rem}
.pick-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.pick-btn{display:flex; align-items:center; gap:1.1rem; background:#fff; border:1px solid var(--line); border-radius:9px; padding:1.3rem 1.5rem; box-shadow:var(--shadow); color:var(--ink); font-weight:700; font-size:1.4rem}
.pick-btn:hover{border-color:var(--brand); opacity:1; transform:translateY(-2px); transition:.15s}
.pick-btn .ic{font-size:1.9rem}
.pick-btn .ar{margin-left:auto; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--cta); color:#fff; display:grid; place-items:center; font-size:1.3rem}

/* CTA band（フルブリード） */
.cta-band{background:linear-gradient(135deg,var(--brand),var(--brand-d)); 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}

/* ===== footer ===== */
.site-footer{background:#1b212b; color:#aeb6c4; 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}
.foot-brand .brand-main b{color:#ff8393}
.foot-brand .brand-main span{font-size:1.05rem; color:#8d97a6; font-weight:600}
.foot-brand p{margin:1.1rem 0 0; line-height:1.9}
.foot-brand a{color:#cfd6e2}
.foot-col h4{color:#fff; font-size:1.25rem; letter-spacing:.12em; margin:0 0 1.1rem; border-bottom:1px solid #333b48; padding-bottom:.7rem}
.foot-col a{display:block; color:#aeb6c4; padding:.45rem 0}
.foot-col a:hover{color:#fff; opacity:1}
.foot-copy{border-top:1px solid #2a313c; padding:1.6rem 0; font-size:1.15rem; color:#7e8896}
.foot-copy .wrap{display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}

/* ===== article page（LIG風の読みやすさ：大きめ本文＋ゆったり行間＋画面幅連動の可変フォント） ===== */
.article-wrap{max-width:880px; margin:0 auto; padding:0 2rem}   /* LIG準拠：広めの本文幅 */
.breadcrumb{font-size:1.3rem; color:var(--sub); padding:2rem 0}
.breadcrumb a{color:var(--sub)}
.article{background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:0; margin:.5rem 0 3rem;
  font-size:clamp(1.7rem,1.5rem + .55vw,2rem); line-height:2}   /* LIG準拠：枠線なし・本文 約17〜20px・行間2.0 */
.article .tag{color:var(--cta); font-weight:800; font-size:1.4rem; letter-spacing:.02em}
.article h1{font-size:clamp(3rem,2.1rem + 3.2vw,4.4rem); line-height:1.4; margin:1rem 0 1.8rem; font-weight:900; letter-spacing:.01em}
.article .meta{color:var(--sub); font-size:1.35rem; border-bottom:1px solid var(--line); padding-bottom:1.8rem; margin-bottom:2.8rem}
/* アイキャッチ（1200×630を1枚／全デバイス自動最適化） */
.article-hero{margin:0 0 3rem; border-radius:14px; overflow:hidden; aspect-ratio:1200/630; background:var(--bg2)}
.article-hero img{width:100%; height:100%; object-fit:cover; display:block}
/* 本文中の図版（情報が欠けないよう原寸比でフル表示） */
.article-fig{margin:1.8rem 0 2.6rem}
.article-fig img{width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--line)}
.article-fig figcaption{margin-top:.8rem; font-size:1.3rem; color:var(--sub); text-align:center}
.article h2{font-size:clamp(2.6rem,1.9rem + 2.2vw,3.9rem); margin:2.1em 0 .7em; padding-left:1.3rem; border-left:6px solid var(--brand); line-height:1.45; font-weight:900}
.article h3{font-size:clamp(2rem,1.7rem + .9vw,2.45rem); margin:3rem 0 1.1rem; font-weight:700; line-height:1.5}
.article p{margin:1.5rem 0}
.article ul,.article ol{padding-left:2.4rem}
.article li{margin:.8rem 0; line-height:1.9}
.article strong{font-weight:700}
.lead{font-size:clamp(1.8rem,1.55rem + .7vw,2.05rem); line-height:1.9; color:#374151; font-weight:500}
.summary-box{background:#fdecec; border:1px solid #f3c9cd; border-radius:12px; padding:2.2rem 2.4rem; margin:2.2rem 0}
.summary-box h4{margin:0 0 1.1rem; color:var(--brand-d); font-size:clamp(1.6rem,1.45rem + .4vw,1.85rem)}
.summary-box ul{margin:0}
.checklist{list-style:none; padding:0}
.checklist li{padding-left:3.2rem; position:relative; margin:.9rem 0}
.checklist li::before{content:"✓"; position:absolute; left:0; top:.25rem; width:2.1rem; height:2.1rem; background:var(--brand); color:#fff; border-radius:6px; display:grid; place-items:center; font-size:1.3rem; font-weight:700}
.tip{background:#fff7ec; border:1px solid #f3dcb4; border-radius:12px; padding:2.2rem 2.4rem; margin:2.2rem 0}
.tip h4{margin:.2rem 0 1rem; color:#b5740f; font-size:clamp(1.55rem,1.45rem + .35vw,1.8rem)}
.prompt-box{background:#1c2230; color:#e7ecf3; border-radius:10px; padding:1.8rem 2rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.4rem; line-height:1.8; white-space:pre-wrap; overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; margin:1.8rem 0; font-size:clamp(1.45rem,1.35rem + .3vw,1.6rem)}
table.tbl th,table.tbl td{border:1px solid var(--line); padding:1.1rem 1.2rem; text-align:left; line-height:1.7}
table.tbl th{background:#f1f5f4}
/* 記事内CTA（緑→ブランドレッドのボックス） */
.cta{background:linear-gradient(135deg,var(--brand),var(--brand-d)); color:#fff; border-radius:14px; padding:clamp(2.2rem,1.4rem + 2vw,3.2rem) clamp(2rem,1rem + 2.4vw,3.4rem); margin:3.6rem 0}
.cta h3{margin:0 0 1rem; font-size:clamp(2rem,1.7rem + 1vw,2.4rem)}
.cta p{margin:0 0 2rem; opacity:.95; font-size:clamp(1.5rem,1.4rem + .3vw,1.7rem); line-height:1.85}
.cta .btns{display:flex; gap:1.2rem; flex-wrap:wrap}
.btn{display:inline-block; padding:1.3rem 2.6rem; border-radius:999px; font-weight:700; font-size:clamp(1.5rem,1.4rem + .3vw,1.65rem)}
.btn.primary{background:#fff; color:var(--brand-d)}
.btn.ghost{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7)}
.related{margin:3.4rem 0}
.related h3{font-size:clamp(1.7rem,1.5rem + .5vw,2rem); margin-bottom:1.4rem}
.related ul{list-style:none; padding:0; display:grid; gap:1.1rem}
.related li a{display:block; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.5rem 1.8rem; font-weight:600; font-size:clamp(1.45rem,1.35rem + .3vw,1.6rem); line-height:1.6}
.related li a:hover{border-color:var(--brand)}

/* ===== LIG風コンポーネント（目次・蛍光マーカー・ステップ図） ===== */
/* 目次（LIG準拠：枠なし・項目ごとに区切り線・番号つき） */
.toc{margin:3rem 0 4rem}
.toc-cb{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
.toc_title{display:flex; align-items:center; gap:.9rem; cursor:pointer; user-select:none; color:#2b2b2b; font-size:clamp(2rem,1.8rem + .5vw,2.4rem); font-weight:900; margin:0 0 1.2rem}
.toc_title::before{content:""; width:.55rem; height:2.4rem; background:var(--brand); border-radius:3px; flex:none}
/* 開閉トグル（開=マイナス / 閉=プラス） */
.toc-mark{position:relative; width:2rem; height:2rem; margin-left:auto; flex:none}
.toc-mark::before,.toc-mark::after{content:""; position:absolute; left:50%; top:50%; background:#555; transform:translate(-50%,-50%)}
.toc-mark::before{width:1.5rem; height:2px}
.toc-mark::after{width:2px; height:1.5rem; 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; border-top:1px solid rgba(40,40,40,.12); padding:1.5rem 0 1.2rem}
.toc_list>li:last-child{border-bottom:1px solid rgba(40,40,40,.12)}
.toc_list>li>a{position:relative; display:block; color:#333; font-weight:700; font-size:clamp(1.6rem,1.5rem + .3vw,1.8rem); padding-left:3.6rem; line-height:1.6}
.toc_list>li>a::before{content:counter(toc,decimal-leading-zero); position:absolute; left:0; top:.05em; color:var(--brand); font-weight:800; font-family:"Outfit",sans-serif; font-size:1.65rem}
.toc_list ul{list-style:none; margin:.8rem 0 .2rem; padding:0}
.toc_list ul li a{position:relative; display:block; color:#6e6e6e; font-weight:500; font-size:clamp(1.5rem,1.4rem + .3vw,1.65rem); padding:.5rem 0 .5rem 3.6rem; line-height:1.55}
.toc_list ul li a::before{content:"–"; position:absolute; left:1.7rem; color:#bbb}
.toc a:hover{color:var(--brand)}

/* 蛍光マーカー（LIGの marker-yellow 準拠） */
.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(--brand); color:#fff; border-radius:50%; display:grid; place-items:center; font-family:"Outfit",sans-serif; font-weight:800; font-size:1.9rem; z-index:1}
.steps>li::after{content:""; position:absolute; left:1.9rem; top:3.8rem; bottom:0; width:2px; 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:#f7f8fa; border:1px solid var(--line); border-left:5px solid var(--brand); border-radius:8px; 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(--brand-d)}
.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:4px solid var(--brand); border-radius:10px; 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(--brand); font-size:2.4rem; font-weight:900}

/* 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:10px; padding:1.8rem 2rem; background:#fff}
.compare-col .ttl{display:flex; align-items:center; gap:.7rem; font-weight:800; 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:800; flex:none}
.compare-col.good{border-color:#bfe0c8; background:#f4fbf6}
.compare-col.good .ttl{color:#1f9d55}
.compare-col.good .ttl::before{content:"○"; background:#27a866}
.compare-col.bad{border-color:#f3c9cd; background:#fdf5f5}
.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}

/* 番号つきポイントカード */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr)); gap:1.6rem; margin:3rem 0 2.6rem; counter-reset:card}
.card-item{counter-increment:card; background:#fff; border:1px solid var(--line); border-radius:10px; 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(--brand); color:#fff; border-radius:50%; display:grid; place-items:center; font-family:"Outfit",sans-serif; font-weight:800; font-size:1.7rem}
.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; gap:1.2rem; align-items:flex-start; border:1px solid; border-radius:10px; padding:1.7rem 2rem; margin:2.4rem 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:#fdecec; border-color:#f3c9cd} .callout-point h4{color:var(--brand-d)}
.callout-note{background:#eef4fb; border-color:#cfe0f3} .callout-note h4{color:#2c6fb5}
.callout-warn{background:#fff7ec; border-color:#f3dcb4} .callout-warn h4{color:#b5740f}

/* 数字の強調 */
.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:10px; padding:2rem 1.6rem; text-align:center}
.stat .num{font-family:"Outfit",sans-serif; font-weight:800; 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:4px solid var(--brand); background:#faf7f7; 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}

/* ===== 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:2rem} .gnav a{white-space:nowrap}
  .header-inner{height:5.8rem} .hbtn.ghost{display:none}
  .brand{gap:.8rem} .brand-mark{width:3.8rem; height:3.8rem}
  .brand-main{font-size:1.65rem; white-space:nowrap} .brand-sub{font-size:.95rem}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .grid4,.grid3{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr}
  .header-right .hbtn.primary{font-size:1.2rem; padding:.9rem 1.3rem}
  .brand-mark{width:3.4rem; height:3.4rem} .brand-main{font-size:1.5rem}
  .compare{grid-template-columns:1fr}
  .flow-item:not(:last-child)::after{content:"⌄"; right:auto; left:50%; top:auto; bottom:-1.5rem; transform:translateX(-50%)}
}