:root{
  color-scheme:light;
  --bg:#fff; --surface:#fff; --ink:#111; --ink2:#3b3b3b; --mute:#6a6a6a; --line:#e6e6e3; --blush:#f6f6f4; --rose:#6a6a6a; --rose-text:#6a6a6a; --pop:#111; --deep:#1e1e1e;
  --f-body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Noto Sans JP","Meiryo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-display:var(--f-body); --f-latin:var(--f-display); --w-display:700;
  --gut:20px; --wrap:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;line-break:strict;word-break:auto-phrase;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3{font-family:var(--f-display);font-weight:var(--w-display);line-height:1.5;margin:0;letter-spacing:.02em}
/* 見出し：文節の区切り（<wbr>）だけで折り返し、行の横幅をいっぱいまで使う（バランス調整はしない） */
.card-h,.trow-h,.wk-h,.art-h,.rank-list a,.favnew .trow-h{word-break:keep-all;overflow-wrap:anywhere;text-wrap:wrap;line-break:strict}
p,li{text-wrap:pretty}
p{margin:0}
a{color:inherit;text-decoration-color:var(--line);text-underline-offset:.22em}
a:hover{text-decoration-color:var(--pop)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:2px}
img,svg{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}
.skip:focus{left:8px;top:8px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ヘッダー（中央寄せ） */
.site-head{background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:5}
.head-col{display:flex;flex-direction:column;align-items:center;padding-top:22px;position:relative}
.logo{display:flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1}
.logo-word{font-family:var(--f-latin);font-weight:600;font-size:clamp(22px,6vw,44px);letter-spacing:.14em;padding-left:.14em;white-space:nowrap;color:var(--ink);display:inline-flex;align-items:flex-end;gap:6px}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--pop);display:inline-block;margin-bottom:.32em;flex:none}
.logo-sub{font-family:var(--f-latin);font-weight:600;font-size:13px;letter-spacing:.5em;padding-left:.5em;margin-top:8px;color:var(--rose-text)}
.today{margin-top:14px;font-size:13px;color:var(--ink2);letter-spacing:.08em;line-height:1.5;text-align:center}
.gnav{display:flex;width:calc(100% + var(--gut)*2);margin:12px calc(var(--gut)*-1) 0;padding:0 calc(var(--gut) - 9px);overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line);}
.gnav a.gn-pc{display:none}
.gnav::-webkit-scrollbar{display:none}
.gnav a{flex:none;text-decoration:none;font-weight:400;font-size:15px;letter-spacing:.03em;padding:0 9px;position:relative;min-height:48px;display:inline-flex;align-items:center;color:var(--ink2)}
.gnav a[aria-current=page]{color:var(--ink);font-weight:500}
.gnav a[aria-current=page]::after{content:"";position:absolute;left:9px;right:9px;bottom:6px;height:2px;background:var(--pop)}
.gnav a:hover{color:var(--ink)}
.gnav a:hover::after{content:"";position:absolute;left:9px;right:9px;bottom:6px;height:2px;background:var(--pop)}

/* 部品 */
.tagrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0;line-height:1.4}
.cat{display:inline-flex;align-items:baseline;gap:10px;color:var(--rose-text)}
.cat b{font-family:var(--f-latin);font-weight:600;font-size:14px;letter-spacing:.18em}
.cat i{font-style:normal;font-size:13px;letter-spacing:.06em;color:var(--ink2)}
.new{display:inline-block;background:var(--pop);color:#2b2326;font-family:var(--f-latin);font-weight:600;font-size:12px;letter-spacing:.12em;line-height:1;padding:4px 7px 3px;border-radius:2px}
.chip-link{display:inline-flex;align-items:center;min-height:32px;font-size:13px;color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line)}
.chip-link:hover{border-bottom-color:var(--pop)}
.card-src{margin-top:8px;font-size:13px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:2px 14px;line-height:1.6}
.card-src .src{font-weight:500}
.card-src time{white-space:nowrap;color:var(--mute);color:#6f6466}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 24px;font:inherit;font-size:15px;font-weight:500;letter-spacing:.06em;color:var(--ink);background:var(--surface);border:1px solid var(--ink);border-radius:999px;text-decoration:none;cursor:pointer;line-height:1.2}
.btn:hover{box-shadow:inset 0 -3px 0 var(--pop)}
.btn svg{width:14px;height:14px;flex:none}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-primary:hover{box-shadow:inset 0 -3px 0 var(--pop)}
.btn[disabled]{opacity:.55;cursor:default}
.empty{color:var(--ink2);padding:24px 0}
.note{font-size:13px;color:var(--ink2);margin-top:14px;line-height:1.7}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin-bottom:30px}
.sec-en{font-family:var(--f-latin);font-weight:600;font-size:15px;letter-spacing:.36em;padding-left:.36em;color:var(--rose-text)}
.sec-head h2{font-size:22px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--ink2);margin-bottom:18px;line-height:1.5}
.crumb a{text-decoration:none;display:inline-flex;align-items:center;min-height:24px}.crumb a:hover{color:var(--ink);text-decoration:underline}

/* 画像（出典元は直接表示・切り抜かない・上に何も重ねない／自社画像は切り抜いてよい） */
.fig{display:block;margin:0}
.fig-link{display:block;text-decoration:none}
.pic{display:block;position:relative;aspect-ratio:3/2;background:var(--blush);overflow:hidden}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.pic img.is-own{object-fit:cover}
/* 会社のアイコン：白地の真ん中に余白つきで置く（切り抜かない・引き伸ばさない） */
.pic-logo{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.pic img.is-logo{inset:22%;width:56%;height:56%;object-fit:contain}
.credit{margin-top:6px;font-size:12px;line-height:1.5;color:var(--mute);color:#6f6466}
.credit a{color:inherit;text-decoration-color:var(--line)}
.credit a:hover{color:var(--ink)}
.credit-x{margin-left:10px}

/* カード */
.card{display:flex;flex-direction:column;min-width:0}
.card-h{font-size:18px;line-height:1.6;margin-top:8px}
.card-h a,.trow-h a{text-decoration:none}
.card-h a:hover,.trow-h a:hover{text-decoration:underline;text-decoration-color:var(--pop);text-decoration-thickness:2px}
.card-md .card-h{font-size:20px}
.card-lead .card-h{font-size:clamp(24px,6.4vw,38px);line-height:1.5;margin-top:10px}
.card-lead-p{margin-top:14px;color:var(--ink2);font-size:16px;line-height:1.9}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 28px}
.front{padding-top:28px;padding-bottom:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.front-side{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
.latest{padding-top:44px;padding-bottom:56px}
.latest .sec-head,.more .sec-head{border-top:1px solid var(--line);padding-top:36px}
.latest .sec-head{border-top:0;padding-top:0}
.latest{border-top:1px solid var(--line);margin-top:24px;padding-top:44px}

/* トップ下部 */
.more{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;padding-top:12px;padding-bottom:56px}
.rank-tabs{display:flex;justify-content:center;gap:4px;margin-bottom:6px}
.rank-tabs button{min-height:44px;padding:0 20px;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink2);cursor:pointer;position:relative}
.rank-tabs button[aria-selected=true]{color:var(--ink);font-weight:500}
.rank-tabs button[aria-selected=true]::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--pop)}
.rank-cap{display:none;font-size:14px;color:var(--ink2);margin:14px 0 4px}
.no-js .rank-tabs{display:none}.no-js .rank-panel[hidden]{display:block}.no-js .rank-cap{display:block}
.rank-list{list-style:none;margin:0;padding:0}
.rank-list li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.rank-n{flex:none;width:26px;font-family:var(--f-latin);font-size:30px;font-weight:600;line-height:1;color:var(--rose);font-feature-settings:"tnum" 1}
.rank-list a{text-decoration:none;font-family:var(--f-display);font-weight:var(--w-display);line-height:1.65;font-size:16px}
.rank-list a:hover{text-decoration:underline;text-decoration-color:var(--pop);text-decoration-thickness:2px}
.cat-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.cat-grid-lg{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cat-tile{display:flex;flex-direction:column;gap:4px;justify-content:center;padding:18px 18px;min-height:96px;height:100%;background:var(--surface);border:1px solid var(--line);text-decoration:none}
.cat-tile:hover{background:var(--blush);border-color:var(--rose)}
.cat-tile b{font-family:var(--f-latin);font-weight:600;font-size:13px;letter-spacing:.2em;color:var(--rose-text)}
.cat-name{font-family:var(--f-display);font-weight:var(--w-display);font-size:16px;line-height:1.5}
.cat-n{font-size:13px;color:var(--ink2)}
.more-ent{margin-top:48px}
.tag-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tag{display:inline-flex;gap:10px;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);background:var(--surface);border-radius:999px;text-decoration:none;font-size:14px}
.tag span{font-size:12px;color:var(--ink2)}
.tag:hover{border-color:var(--rose);background:var(--blush)}
.more-link{text-align:center;margin-top:18px;font-size:14px}
.more-link a{display:inline-flex;align-items:center;min-height:44px}
.trust{list-style:none;margin:0;padding:36px 0 56px;border-top:1px solid var(--line);display:grid;gap:22px;grid-template-columns:minmax(0,1fr);text-align:center}
.trust strong{display:block;font-family:var(--f-display);font-weight:var(--w-display);font-size:16px;margin-bottom:4px}
.trust span{font-size:14px;color:var(--ink2);line-height:1.8}

/* 一覧ページ */
.page-head{padding:40px 0 28px;border-bottom:1px solid var(--line);margin-bottom:40px;text-align:center}
.page-head .crumb{justify-content:center}
.page-h{font-size:clamp(26px,6.4vw,40px);line-height:1.45}
.page-lead{margin:14px auto 0;color:var(--ink2);max-width:42em}
.list-wrap{padding-bottom:72px}
.ent-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ent{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);text-decoration:none;min-height:64px}
.ent:hover{border-color:var(--rose);background:var(--blush)}
.ent-name{overflow-wrap:anywhere;font-family:var(--f-display);font-weight:var(--w-display);font-size:16px;grid-column:1;line-height:1.5}
.ent-n{font-size:13px;color:var(--rose-text);grid-column:2;grid-row:1}
.ent-latest{font-size:13px;color:var(--ink2);grid-column:1 / -1}

/* 記事 */
.art-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;padding-top:32px;padding-bottom:80px}
.art{min-width:0}
.fig-art{margin-bottom:6px}
.meta-lg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:6px}
.meta-lg .tagrow{margin:8px 0 0}
.art-h{font-size:clamp(25px,6.6vw,38px);line-height:1.55;margin-top:14px}
.art-date{margin-top:14px;color:var(--ink2);font-size:14px}
.art-sec{margin-top:36px}
.label{font-family:var(--f-latin);font-size:14px;font-weight:600;letter-spacing:.14em;color:var(--rose-text);margin-bottom:12px;display:block}
.art h2.label{font-family:var(--f-display);font-weight:var(--w-display);font-size:15px;letter-spacing:.08em}
.three{list-style:none;margin:0;padding:0;counter-reset:n}
.three li{counter-increment:n;display:grid;grid-template-columns:40px 1fr;gap:6px;padding:16px 0;border-top:1px solid var(--line);font-size:17px;line-height:1.9}
.three li:last-child{border-bottom:1px solid var(--line)}
.three li::before{content:counter(n);font-family:var(--f-latin);font-weight:600;font-size:26px;color:var(--rose);line-height:1.4}
.point{background:var(--surface);border-left:3px solid var(--pop);padding:20px 24px;box-shadow:0 0 0 1px var(--line);box-shadow:inset 0 0 0 0 transparent,0 0 0 1px var(--line)}
.point .label{color:var(--rose-text)}
.point p{font-size:17px;line-height:1.95}
.source{margin-top:36px;background:var(--surface);border:1px solid var(--line);padding:24px}
.src-dl{margin:0 0 20px;display:grid;gap:10px}
.src-dl div{display:grid;grid-template-columns:5.5em 1fr;gap:12px;font-size:15px;line-height:1.6}
.src-dl dt{color:var(--ink2)}
.src-dl dd{margin:0;font-weight:500}
.src-host{margin-top:10px;font-size:13px;color:var(--ink2);overflow-wrap:anywhere}
.src-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink2);line-height:1.8}
.art-tools{margin-top:28px;display:flex;flex-direction:column;gap:18px}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.share .label{margin:0 6px 0 0}
.fix{font-size:14px;color:var(--ink2)}
.art-side .sec-head{align-items:flex-start;text-align:left;border-top:1px solid var(--ink);padding-top:16px;margin-bottom:8px}
.trows{display:flex;flex-direction:column}
.trow{padding:16px 0;border-bottom:1px solid var(--line)}
.trow .tagrow{margin-top:0}
.trow-h{font-size:16px;line-height:1.65;margin-top:6px}

/* 固定ページ */
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:88px}
.doc-toc{display:flex;gap:8px;flex-wrap:wrap}
.doc-toc a{font-size:14px;text-decoration:none;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:999px;color:var(--ink2)}
.doc-toc a:hover{border-color:var(--rose);color:var(--ink)}
.doc{max-width:760px;min-width:0}
.doc>div{scroll-margin-top:24px}
.doc-sec{padding:0 0 36px}
.doc-sec h2{font-size:21px;margin-bottom:14px;padding-top:14px;border-top:1px solid var(--ink)}
.doc-sec p{margin-bottom:14px;color:var(--ink2)}
.doc-sec ul{margin:0 0 14px;padding-left:1.3em;color:var(--ink2)}
.doc-sec li{margin-bottom:6px}
.op-dl{margin:0;border-top:1px solid var(--line)}
.op-dl div{display:grid;grid-template-columns:8em 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.op-dl dt{color:var(--ink2)}.op-dl dd{margin:0;font-weight:500}
.tbl{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:20px;display:block;overflow-x:auto}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
.tbl th{font-size:13px;color:var(--ink2);background:var(--blush)}

/* フォーム */
.form{display:grid;gap:22px;max-width:640px}
.f-row{display:grid;gap:8px}
.f-row label,.f-set legend{font-weight:500;font-size:15px}
.form input[type=text],.form input[type=email],.form textarea{width:100%;font:inherit;font-size:16px;line-height:1.6;color:var(--ink);background:var(--surface);border:1px solid #d9cccb;border-radius:2px;padding:12px 14px;min-height:48px}
.form textarea{resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--rose);outline-offset:1px;border-color:var(--rose)}
.form [aria-invalid=true]{border-color:#b42318;background:#fff8f7}
.f-set{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.f-set legend{padding:0;margin-bottom:10px;float:left;width:100%}
.radio{position:relative;display:inline-flex}
.radio input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.radio span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #d9cccb;border-radius:999px;font-size:15px;background:var(--surface)}
.radio input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:inset 0 -3px 0 var(--pop)}
.radio input:focus-visible+span{outline:2px solid var(--rose);outline-offset:2px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.f-note{font-size:13px;color:var(--ink2);line-height:1.8}
.f-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.f-msg{font-size:14px;font-weight:500}
.f-msg.is-ok{color:#246b45}.f-msg.is-err{color:#b42318}

/* フッター（濃い色の帯） */
.site-foot{background:var(--deep);color:#e9dfdc;padding:52px 0 28px;margin-top:0}
.foot-grid{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
.foot-id{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.logo-foot{align-items:flex-start}
.logo-foot .logo-word{font-size:30px;color:#fff}
.logo-foot .logo-sub{color:#d9b8be}
.foot-id p{font-size:14px;color:#d8cdca;line-height:1.8}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 24px;align-content:flex-start}
.foot-nav a{font-size:14px;text-decoration:none;color:#f1e8e5;min-height:44px;display:inline-flex;align-items:center}
.foot-nav a:hover{text-decoration:underline;text-decoration-color:var(--pop);text-decoration-thickness:2px}
.foot-small{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:12px;color:#cbbfbc;line-height:1.7}

/* 640〜 */
@media (min-width:640px){
  :root{--gut:28px}
  .front-side{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ent-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 768〜1023：2列 */
@media (min-width:768px){
  .head-col{padding-top:30px}
  .gnav{width:auto;margin:6px 0 0;padding:0;border-top:0;justify-content:center;overflow-x:visible}
  .gnav a.gn-m{display:none}
  .gnav a.gn-pc{display:inline-flex}
  .gnav a{font-size:15px;letter-spacing:.08em;padding:0 18px}
  .gnav a[aria-current=page]::after,.gnav a:hover::after{left:18px;right:18px}
  .cat-grid-lg{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ent-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card-lead .card-h{font-size:34px}
}
/* 1024〜：PC専用（一面は2/3＋1/3・3列・記事は2カラム） */
@media (min-width:1024px){
  :root{--gut:40px}
  .head-col{padding-top:34px}
  .today{margin-top:16px}
  .gnav{margin-top:10px}
  .gnav a{padding:0 24px}
  .gnav a[aria-current=page]::after,.gnav a:hover::after{left:24px;right:24px}
  .front{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px;padding-top:44px;padding-bottom:36px;align-items:start}
  .front-side{grid-template-columns:minmax(0,1fr);gap:32px;border-left:1px solid var(--line);padding-left:48px}
  .card-lead .card-h{font-size:38px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 32px}
  .latest{padding-top:56px;padding-bottom:72px}
  .sec-head{margin-bottom:40px}
  .sec-head h2{font-size:26px}
  .more{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;padding-top:24px;padding-bottom:72px}
  .more-ent{margin-top:48px}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-grid-lg{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ent-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .page-head{padding:60px 0 40px}
  .art-grid{grid-template-columns:minmax(0,1fr) 320px;column-gap:80px;padding-top:44px}
  .art-side{position:sticky;top:24px;align-self:start}
  .art-h{font-size:40px}
  .doc-grid{grid-template-columns:220px minmax(0,1fr);column-gap:72px;align-items:start;justify-content:center}
  .doc-grid.doc-solo{grid-template-columns:minmax(0,760px);justify-content:center}
  .doc-toc{flex-direction:column;position:sticky;top:24px}
  .doc-toc a{border:0;border-left:2px solid var(--line);border-radius:0;background:transparent;padding:0 16px}
  .doc-toc a:hover{border-left-color:var(--pop)}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:72px}
}
@media (min-width:1440px){
  :root{--wrap:1360px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card-lead .card-h{font-size:42px}
  .art-grid{grid-template-columns:minmax(0,1fr) 340px}
}
@media (min-width:1800px){
  :root{--wrap:1500px;--gut:48px}
  .art-grid{grid-template-columns:minmax(0,1fr) 380px}
  .card-h{font-size:19px}
  .card-lead .card-h{font-size:46px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.more-rank[hidden]{display:none!important}
.more:has(.more-rank[hidden]){grid-template-columns:1fr!important}

/* ---- 読者が来る理由になる仕組み：気になる／お気に入り／今週のイベント ---- */
[hidden]{display:none!important}
.card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-top:8px}
.card-foot .card-src{margin-top:0}
.like,.fav{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:44px;padding:0 14px;font:inherit;font-size:14px;letter-spacing:.04em;line-height:1.2;color:var(--ink2);background:var(--surface);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.like{width:44px;height:44px;padding:0;gap:0;flex:none}
.like-i{font-size:22px}
.like:hover,.fav:hover{border-color:var(--rose);color:var(--ink)}
.like-i,.fav-i{font-size:18px;line-height:1;color:var(--rose)}
.like[aria-pressed=true],.fav[aria-pressed=true]{border-color:var(--rose);color:var(--rose-text);background:var(--blush)}
.like-row{display:flex}
.page-act{margin-top:18px;display:flex;justify-content:center}
.ent-li{display:flex;flex-direction:column;min-width:0}
.ent-li .ent{flex:1}
.fav-row{width:100%;border-radius:0;border-top:0;font-size:13px}

.hub{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;padding-top:44px;padding-bottom:44px;margin-top:24px;border-top:1px solid var(--line)}
.hub .sec-head{margin-bottom:22px}
.hub:not(:has(>:not([hidden]))){display:none}
.favnew{padding-top:44px;padding-bottom:12px;margin-top:24px;border-top:1px solid var(--line)}
.favnew .sec-head{margin-bottom:22px}
.favnew-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0 32px}
.wk-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:40px}
.wk-item{min-width:0;border-bottom:1px solid var(--line)}
.wk-list>.wk-item:first-child{border-top:1px solid var(--line)}
.wk-row{display:grid;grid-template-columns:minmax(0,1fr) 88px;grid-template-areas:"when pic" "h pic" "cred cred";column-gap:14px;align-content:start;padding:14px 0}
.wk-nopic{grid-template-columns:minmax(0,1fr);grid-template-areas:"when" "h"}
.wk-row .fig{display:contents}
.wk-row .fig-link{grid-area:pic;align-self:start}
.wk-row .pic{aspect-ratio:1/1}
.wk-row .credit{grid-area:cred;margin-top:0;font-size:12px}
.wk-when{grid-area:when;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;line-height:1.5;letter-spacing:.04em;color:var(--rose-text)}
.wk-date{font-weight:500;color:var(--ink)}
.wk-badge{display:inline-block;background:var(--pop);color:#2b2326;font-size:12px;font-weight:500;line-height:1;padding:4px 7px 3px;border-radius:2px;letter-spacing:.08em}
.wk-h{grid-area:h;font-size:16px;line-height:1.65;margin-top:4px}
.wk-h a{text-decoration:none}
.wk-h a:hover{text-decoration:underline;text-decoration-color:var(--pop);text-decoration-thickness:2px}
.hub-up{min-width:0}


@media (min-width:640px){
  .favnew-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
  .hub-up{grid-column:1/-1}
  .wk-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wk-list>.wk-item:nth-child(2){border-top:1px solid var(--line)}
  .hub:has(.hub-rank[hidden]){grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1024px){
  .hub{gap:72px;padding-top:52px;padding-bottom:52px}
  .favnew-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wk-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wk-list>.wk-item:nth-child(3){border-top:1px solid var(--line)}
}
@media (min-width:1280px){
}
@media (min-width:1440px){
}

/* ---- 会員（パスキーだけ） ---- */
.head-util{position:absolute;right:4px;top:4px;display:flex;align-items:center;margin:0}
.util{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:52px;min-height:48px;padding:2px 6px;font-size:11px;letter-spacing:.04em;line-height:1.2;text-decoration:none;color:var(--ink);white-space:nowrap}
.util-ic{width:24px;height:24px;display:block}
.util:hover{color:var(--rose-text)}
.foot-members{font-size:13px;letter-spacing:.06em}
.foot-members b{font-family:var(--f-latin);font-size:18px;font-weight:600;color:#fff;margin:0 2px;font-feature-settings:"tnum" 1}
.join-band{padding-top:44px;padding-bottom:12px;margin-top:24px}
.join-band-in{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:32px 22px;background:var(--surface);border-top:2px solid var(--ink);border-bottom:1px solid var(--line);text-align:center}
.join-band h2{font-size:22px}
.join-band-lead{margin-top:10px;font-size:14px;line-height:1.85;color:var(--ink2)}
.join-band-pts{list-style:none;margin:0 auto;padding:0;display:grid;gap:10px;max-width:520px;text-align:left}
.join-band-pts li{position:relative;padding-left:22px;font-size:14px;line-height:1.75}
.join-band-pts li::before{content:"";position:absolute;left:3px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--pop)}
.join-band-act{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.join-band-act .btn{min-width:150px}
.join{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;padding-bottom:88px}
.join-h{font-size:18px;margin-bottom:16px}
.join-pts{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:16px}
.join-pts li{display:flex;gap:14px;align-items:flex-start;line-height:1.75}
.join-n{flex:none;width:32px;height:32px;margin-top:-2px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-latin);font-weight:600;font-size:15px}
.join-steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:8px}
.join-steps li{counter-increment:s;position:relative;padding:14px 16px 14px 50px;border:1px solid var(--line);background:var(--surface);font-size:15px;line-height:1.6}
.join-steps li::before{content:counter(s);position:absolute;left:18px;top:50%;transform:translateY(-50%);font-family:var(--f-latin);font-weight:600;font-size:18px;color:var(--rose-text)}
.join-card{display:flex;flex-direction:column;gap:12px;padding:28px 22px;background:var(--surface);border:1px solid var(--ink)}
.join-card .join-h{margin-bottom:4px;text-align:center}
.btn-lg{width:100%;min-height:56px;font-size:16px}
.join-or{margin-top:10px;font-size:13px;color:var(--ink2);text-align:center}
.join-card .f-msg{min-height:1.5em;text-align:center}
.join-notes{list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:13px;line-height:1.8;color:var(--ink2)}
.join-notes li{position:relative;padding-left:1em}
.join-notes li::before{content:"・";position:absolute;left:0}
.my{padding-bottom:88px}
.my-guest,.my-left{padding:16px 0 48px;text-align:center;color:var(--ink2);line-height:1.85}
.my-guest-act{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.my-guest-act .btn{min-width:150px}
.my-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
.my-side{display:grid;gap:56px;align-content:start}
.my-head{display:flex;align-items:baseline;gap:10px;padding-top:16px;margin-bottom:6px;border-top:1px solid var(--ink)}
.my-head h2{font-size:20px}
.my-n{font-family:var(--f-latin);font-weight:600;font-size:16px;color:var(--rose-text)}
.my-favlist{list-style:none;margin:0;padding:0}
.my-fav{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;border-bottom:1px solid var(--line)}
.my-fav-n{display:inline-flex;align-items:center;min-height:44px;min-width:0;font-weight:500;text-decoration:none;overflow-wrap:anywhere}
a.my-fav-n:hover{text-decoration:underline;text-decoration-color:var(--pop);text-decoration-thickness:2px}
.btn-sm{flex:none;min-height:44px;padding:0 16px;font-size:13px}
.my-sub{font-size:15px;margin:32px 0 2px}
.my-lead{margin-top:8px;font-size:14px;line-height:1.85;color:var(--ink2)}
.my-cal-n{margin-top:12px;font-size:15px;font-weight:500}
.my-lbl{display:block;margin-top:18px;font-size:13px;color:var(--ink2)}
.my-url{display:block;width:100%;min-height:44px;margin-top:6px;padding:0 12px;font:inherit;font-size:13px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:0;text-overflow:ellipsis}
.my-cal-act{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.my-cal-act .btn{padding:0 10px;font-size:14px;letter-spacing:.03em;text-decoration:none}
.my-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:64px;padding-top:28px;border-top:1px solid var(--line)}
.my-foot .note{flex-basis:100%;margin-top:4px}
.btn-danger{color:#b42318;border-color:#b42318}
@media (min-width:768px){
  .join-band-in{padding:40px 40px}
  .join-card{padding:36px 32px}
}
@media (min-width:1024px){
  .head-util{position:absolute;top:18px;right:var(--gut);width:auto;margin:0}
  .head-col{position:relative}
  .join-band-in{grid-template-columns:minmax(0,1.1fr) minmax(0,1.25fr) auto;align-items:center;gap:48px;padding:40px 48px;text-align:left}
  .join-band-pts{margin:0}
  .join-band-act{flex-direction:column}
  .join{grid-template-columns:minmax(0,1fr) 420px;column-gap:80px;align-items:start;max-width:1160px}
  .join-card{position:sticky;top:24px}
  .my-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:72px;align-items:start}
}

/* ---- スマホ（〜639）：一覧は「左に見出し・右に小さな正方形の写真・下に発信元と日付」の行 ---- */
@media (max-width:639px){
  .grid,.front-side{gap:0}
  .front{gap:6px;padding-top:16px;padding-bottom:4px}
  .card-lead{padding-bottom:18px;border-bottom:1px solid var(--line)}
  .card:not(.card-lead){display:grid;grid-template-columns:minmax(0,1fr) 96px;grid-template-rows:auto 1fr auto auto;grid-template-areas:"tag pic" "h pic" "src pic" "cred like";column-gap:14px;padding:14px 0 10px;border-bottom:1px solid var(--line)}
  .card:not(.card-lead) .fig{display:contents}
  .card:not(.card-lead) .fig-link{grid-area:pic;align-self:start}
  .card:not(.card-lead) .pic{aspect-ratio:1/1}
  .card:not(.card-lead) .credit{grid-area:cred;margin-top:0;font-size:12px}
  .card:not(.card-lead) .tagrow{grid-area:tag;margin:0}
  .card:not(.card-lead) .card-h{grid-area:h;font-size:17px;line-height:1.6;margin-top:6px}
  .card:not(.card-lead) .card-foot{display:contents}
  .card:not(.card-lead) .card-src{grid-area:src;margin-top:6px;align-self:center;min-width:0}
  .card:not(.card-lead) .card-acts{grid-area:like;justify-self:end;margin-top:6px}
  .card:not(.card-lead) .cat b{display:none}
  .latest{padding-top:28px;margin-top:16px}
  .latest .sec-head{margin-bottom:6px}
  .list-wrap .grid{margin-top:-20px}
}

/* ---- 押せる所は44px以上（スマホ・タブレット） ---- */
.card-h a,.trow-h a,.wk-h a,.rank-list a{display:block}
.trow-h a,.wk-h a{min-height:44px;display:flex;align-items:center}
.chip-link{min-height:44px}
.fix a{display:inline-flex;align-items:center;min-height:44px}
.credit a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:1023px){
  .crumb a{min-height:44px}
  .crumb{margin-bottom:6px;align-items:center}
}
@media (max-width:639px){
  .card:not(.card-lead) .credit{display:flex;align-items:center}
}

/* 本文の文も文節で改行（BudouXの<wbr>を使う） */
.card-lead-p,.three li,.point p{word-break:keep-all;overflow-wrap:anywhere}

/* ---- ブランド一覧：区分ごと・かな順・名前で絞り込み・☆ ---- */
.bl-tools{display:grid;gap:12px;margin-bottom:8px}
.bl-search input{width:100%;min-height:48px;padding:0 16px;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px}
.bl-search input:focus{outline:2px solid var(--rose);outline-offset:1px;border-color:var(--rose)}
.bl-kinds{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut)*-1);padding:0 var(--gut)}
.bl-kinds::-webkit-scrollbar{display:none}
.bl-kinds a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);background:var(--surface);border-radius:999px;font-size:14px;text-decoration:none;color:var(--ink2)}
.bl-kinds a:hover{border-color:var(--rose);color:var(--ink)}
.bl-sec{margin-top:28px;scroll-margin-top:12px}
.bl-h{display:flex;align-items:baseline;gap:10px;font-size:20px;padding-top:14px;border-top:1px solid var(--ink)}
.bl-h span{font-family:var(--f-latin);font-size:15px;color:var(--rose-text)}
.bl-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
.bl{display:flex;align-items:center;gap:10px;min-height:56px;border-bottom:1px solid var(--line)}
.bl-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:56px;text-decoration:none}
.bl-name{font-family:var(--f-display);font-weight:var(--w-display);font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.bl-co{font-size:12px;color:var(--mute);line-height:1.4;overflow-wrap:anywhere}
.bl-n{flex:none;font-size:13px;color:var(--rose-text);white-space:nowrap}
.fav-icon{position:relative;flex:none;width:44px;min-width:44px;padding:0;border-radius:50%}
.fav-icon .fav-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fav-icon .fav-i{font-size:20px}
@media (min-width:640px){.bl-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
@media (min-width:1024px){.bl-list{grid-template-columns:repeat(3,minmax(0,1fr))}.bl-kinds{margin:0;padding:0;flex-wrap:wrap}.bl-tools{grid-template-columns:minmax(0,360px) 1fr;align-items:center}}
@media (min-width:1440px){.bl-list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ブランド一覧：区分ごとに畳む（スマホで長くなりすぎないよう 11/13） */
.bl-sum{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center}
.bl-sum::-webkit-details-marker{display:none}
.bl-sum .bl-h{flex:1}
.bl-sum::after{content:"＋";font-size:18px;color:var(--mute,#857A7C);padding-left:12px}
details[open]>.bl-sum::after{content:"－"}

/* 分類の札を写真に（11/13） */
.cat-tile.has-img{position:relative;overflow:hidden;padding:0;min-height:0;aspect-ratio:4/3;border:0;background:#2b2326;justify-content:flex-end}
.cat-tile.has-img .cat-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat-tile.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,22,25,.78) 0%,rgba(30,22,25,.25) 55%,rgba(30,22,25,0) 100%)}
.cat-tile.has-img .cat-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;padding:14px 14px 12px}
.cat-tile.has-img b{color:#fff;opacity:.85}
.cat-tile.has-img .cat-name{color:#fff;font-family:var(--f-head,serif);font-size:18px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.cat-tile.has-img .cat-n{color:rgba(255,255,255,.85);font-size:13px}
.cat-tile.has-img:hover .cat-bg{transform:scale(1.04)}
.cat-tile.has-img:hover{background:#2b2326}

/* 記事カードの💬（みんなの声へ1タップ）と♡を並べる */
.card-acts{display:inline-flex;align-items:center;gap:6px;flex:none}
.cmt{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:14px;font-weight:700;font-feature-settings:"tnum" 1}
.cmt:hover{border-color:var(--ink)}
.cmt-i{width:18px;height:18px;flex:none}
.cmt-n:empty{display:none}

/* スマホの詰め方（Yahoo!ニュース・SmartNewsの記事画面の寸法に合わせる：見出し21px前後・本文16px/行間1.7・左右16px） */
@media (max-width:767px){
  :root{--gut:16px}
  body{line-height:1.7}
  .head-col{padding-top:14px}
  .today{margin-top:8px}
  .gnav{margin-top:8px}
  .gnav a{min-height:44px}
  .sec-head{margin-bottom:16px}
  .sec-head h2{font-size:19px}
  .sec-en{font-size:13px}
  .front{padding-top:16px;padding-bottom:12px;gap:24px}
  .front-side{gap:20px}
  .grid{gap:24px}
  .latest{margin-top:12px;padding-top:24px;padding-bottom:32px}
  .latest .sec-head,.more .sec-head{padding-top:20px}
  .more{gap:28px;padding-bottom:32px}
  .card-h{font-size:16.5px;line-height:1.5;margin-top:6px}
  .card-md .card-h{font-size:18px}
  .card-lead .card-h{font-size:clamp(21px,5.8vw,26px);line-height:1.45;margin-top:8px}
  .card-lead-p{margin-top:8px;font-size:15px;line-height:1.7}
  .tagrow{margin-top:8px}
  .rank-list li{padding:11px 0;gap:12px}
  .rank-n{font-size:22px;width:20px}
  .rank-list a{font-size:15px;line-height:1.55}
  .cat-tile{min-height:72px;padding:12px 14px}
  .trust{padding:24px 0 32px;gap:14px}
  .page-head{padding:20px 0 16px;margin-bottom:20px}
  .page-h{font-size:clamp(21px,5.8vw,26px)}
  .page-lead{margin-top:8px}
  .list-wrap{padding-bottom:40px}
  .ent{padding:12px 14px;min-height:56px}
  .crumb{margin-bottom:10px}
  .art-grid{gap:32px;padding-top:12px;padding-bottom:40px}
  .art-h{font-size:clamp(20px,5.6vw,24px);line-height:1.45;margin-top:8px}
  .art-date{margin-top:6px;font-size:13px}
  .art-sec{margin-top:20px}
  .label{font-size:13px;margin-bottom:6px}
  .art h2.label{font-size:14px}
  .three li{grid-template-columns:22px 1fr;gap:4px;padding:10px 0;font-size:16px;line-height:1.7}
  .three li::before{font-size:17px;line-height:1.7}
  .point{padding:12px 14px}
  .point p{font-size:16px;line-height:1.7}
  .source{margin-top:20px;padding:14px}
  .src-dl{margin-bottom:12px;gap:6px}
  .src-dl div{font-size:14px;gap:8px}
  .art-tools{margin-top:18px;gap:12px}
  .art-side .sec-head{padding-top:12px}
  .trow{padding:11px 0}
  .trow-h{font-size:15px;line-height:1.55}
  .doc-sec{padding-bottom:20px}
  .doc-sec h2{font-size:18px;margin-bottom:8px}
  .site-foot{padding:32px 0 20px}
  .foot-grid{gap:20px}
  .wk-row{padding:10px 0}
  .wk-when{font-size:13px}
  .wk-h{font-size:15.5px;line-height:1.5;margin-top:2px}
  .trow-h{margin-top:2px}
  .trow .card-src,.card-src{margin-top:4px;font-size:12.5px;line-height:1.5}
  .share{gap:8px}
  .share .btn{min-height:40px;padding:0 16px;font-size:14px}
  .sec-en{letter-spacing:.28em}
  .cat b{font-size:12.5px}
}


/* 写真の無い行（自社画像を持たないテーマ）：見出しを横いっぱいに */
@media (max-width:639px){
  .card.card-noimg:not(.card-lead){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "h h" "src like"}
}