.htn-wrap{container-type:inline-size;margin:0 0 20px}
.htn-wrap--gut{margin:12px 12px 18px}
.hth-strip{display:none!important}
.htn-box{border-radius:16px;overflow:hidden;box-shadow:0 14px 30px -16px rgba(20,33,61,.6)}
.htn{position:relative;border-radius:16px 16px 0 0;overflow:hidden;color:#fff;font-family:inherit;line-height:1.55;padding:14px 16px 16px 24px;display:grid;gap:12px;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(224,122,60,.22),transparent 55%),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(125deg,#14213d 0%,#1b2e52 58%,#2a2335 100%);
  box-shadow:none}
.htn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(#e07a3c,#c2521f);z-index:1}
.htn a{text-decoration:none;box-shadow:none}

.htn__hd{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.htn__id{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.htn__eb{font-size:11px;letter-spacing:.16em;font-weight:800}
.htn__name{font-size:21px;font-weight:800;letter-spacing:.02em;line-height:1.25}
.htn__date{font-size:12px;display:inline-flex;align-items:center;gap:6px}
.htn__dot{width:8px;height:8px;border-radius:50%;background:#43d17a;display:inline-block;animation:htnpulse 2s infinite}
@keyframes htnpulse{0%{box-shadow:0 0 0 0 rgba(67,209,122,.6)}70%{box-shadow:0 0 0 8px rgba(67,209,122,0)}100%{box-shadow:0 0 0 0 rgba(67,209,122,0)}}

.htn__btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(#f7c85e,#e9a227);font-weight:800;font-size:15px;border-radius:99px;padding:11px 20px;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(233,162,39,.95),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .15s}
.htn__btn:hover{transform:translateY(-1px)}
.htn__btn span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#1b2333;font-size:13px;transition:transform .2s}
.htn__btn:hover span{transform:translateX(3px)}
.htn__btn--sp{display:none}

.htn__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.htn__tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.htn__tiles--1{grid-template-columns:minmax(0,1fr)}
.htn__tile{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;min-height:124px;padding:12px 14px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);overflow:hidden;transition:background .15s,border-color .15s,transform .15s}
.htn__tile:hover,.htn__tile:focus-visible{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);transform:translateY(-1px);outline:none}
.htn__k{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap;overflow:hidden}
.htn__k b{font-size:10.5px;font-weight:800;border-radius:5px;padding:1px 7px;line-height:1.6;flex:none}
.htn__k em{font-style:normal;font-size:11px;margin-left:auto;padding-left:6px}
.k-cu .htn__k b{background:#c2521f}.k-mat .htn__k b{background:#b8860b}.k-news .htn__k b{background:#2e6fd8}
.htn__big{font-size:38px;font-weight:800;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:4px;position:relative;z-index:1}
.htn__big small{font-size:14px;font-weight:600;margin-left:4px;letter-spacing:0}
.htn__chg{font-size:12.5px;font-weight:800;position:relative;z-index:1}
.htn__spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:46px;opacity:.95}
.htn__cd{font-size:38px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:4px}
.htn__cd small{font-size:15px;font-weight:700;margin:0 3px}
.htn__t1{font-size:15px;font-weight:800;line-height:1.35}
.htn__t1 i{font-style:normal;font-size:11.5px;font-weight:600;margin-left:8px}
.htn__t2{font-size:12px;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.htn__head{font-size:17px;font-weight:800;line-height:1.45;margin-top:6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.htn__more{margin-top:auto;font-size:12px;font-weight:700}

.htn__pg{display:none;justify-content:center;gap:6px}
.htn__pg i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
.htn__pg i.is-on{background:#f3b23c}

@container (max-width:640px){
  .htn{padding:12px 12px 14px 18px;gap:10px;border-radius:14px}
  .htn__hd .htn__btn{display:none}
  .htn__btn--sp{display:flex;justify-content:center;width:100%;padding:11px 14px}
  .htn__eb{display:none}
  .htn__name{font-size:18px}
  .htn__id{justify-content:space-between;width:100%}
  .htn__tiles,.htn__tiles--2,.htn__tiles--1{display:block;position:relative;height:132px}
  .htn__tile{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;pointer-events:none}
  .htn__tile.is-on{opacity:1;transform:none;pointer-events:auto}
  .htn__pg{display:flex}
}
@media (prefers-reduced-motion:reduce){.htn__dot{animation:none}.htn__tile,.htn__btn{transition:none}}

/* テーマのリンク色・文字色に負けないよう固定 */
.htn-wrap .htn a,.htn-wrap .htn a:visited,.htn-wrap .htn a:hover,.htn-wrap .htn a:focus{color:#fff!important;text-decoration:none!important}
.htn-wrap .htn .htn__name,.htn-wrap .htn .htn__big,.htn-wrap .htn .htn__cd,.htn-wrap .htn .htn__t1,.htn-wrap .htn .htn__head{color:#fff!important}
.htn-wrap .htn .htn__k,.htn-wrap .htn .htn__date,.htn-wrap .htn .htn__big small,.htn-wrap .htn .htn__t2,.htn-wrap .htn .htn__t1 i,.htn-wrap .htn .htn__k em{color:#c9d3e6!important}
.htn-wrap .htn .htn__cd small{color:#ffe2a6!important}
.htn-wrap .htn .htn__cd{color:#ffcf5c!important}
.htn-wrap .htn .htn__eb{color:#f3b23c!important}
.htn-wrap .htn .htn__more{color:#9fc4ff!important}
.htn-wrap .htn .htn__chg.up{color:#ffb3a8!important}
.htn-wrap .htn .htn__chg.dn{color:#9fd8ff!important}
.htn-wrap .htn a.htn__btn,.htn-wrap .htn a.htn__btn:visited{color:#1b2333!important}
.htn-wrap .htn .htn__btn span{color:#f6c255!important}

/* 資料をひらく（トップの入口） */
.htn-lib{background:#f4f6fa;border:1px solid #dfe5ee;border-top:0;border-radius:0 0 16px 16px;padding:12px 16px 14px 24px;position:relative}
.htn-lib::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:#e8d9c8}
.htn-lib__hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.htn-lib__t{font-size:15px;font-weight:800;border-left:4px solid #c2521f;padding-left:8px;line-height:1.3}
.htn-lib__s{font-size:12px}
.htn-lib__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.htn-lt{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center;background:#fff;border:1px solid #e1e6ee;border-radius:11px;padding:8px 9px;min-width:0;transition:border-color .15s,transform .15s,box-shadow .15s}
.htn-lt:hover,.htn-lt:focus-visible{border-color:var(--a,#14213d);transform:translateY(-1px);box-shadow:0 6px 14px -10px rgba(20,33,61,.5);outline:none}
.htn-lt__ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(0,0,0,.12)),var(--a,#14213d);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px -4px var(--a,#14213d)}
.htn-lt__ic svg{width:20px;height:20px}
.htn-lt__tx{min-width:0;display:grid}
.htn-lt__tx b{font-size:12.5px;letter-spacing:-.01em;font-weight:800;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htn-lt__tx em{font-style:normal;font-size:10.5px;font-weight:700;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htn-lt--all{background:#14213d;border-color:#14213d;--a:#c2521f}
.htn-lt.is-here{opacity:.5;pointer-events:none}
@container (max-width:1050px){.htn-lib__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (max-width:760px){.htn-lib__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:640px){
  .htn-box{border-radius:14px}
  .htn{border-radius:14px 14px 0 0}
  .htn-lib{padding:10px 0 12px 18px;border-radius:0 0 14px 14px}
  .htn-lib__s{display:none}
  .htn-lib__grid{grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x proximity;padding-right:12px;scrollbar-width:none}
  .htn-lib__grid::-webkit-scrollbar{display:none}
  .htn-lt{scroll-snap-align:start}
}
.htn-wrap .htn-lib .htn-lib__t{color:#14213d!important}
.htn-wrap .htn-lib .htn-lib__s{color:#5b6577!important}
.htn-wrap .htn-lib a.htn-lt,.htn-wrap .htn-lib a.htn-lt:visited,.htn-wrap .htn-lib a.htn-lt:hover{text-decoration:none!important;box-shadow:none}
.htn-wrap .htn-lib .htn-lt__tx b{color:#1b2333!important}
.htn-wrap .htn-lib .htn-lt__tx em{color:var(--a,#5b6577)!important}
.htn-wrap .htn-lib .htn-lt--all .htn-lt__tx b{color:#fff!important}
.htn-wrap .htn-lib .htn-lt--all .htn-lt__tx em{color:#f3b23c!important}
@media (prefers-reduced-motion:reduce){.htn-lt{transition:none}}

/* いま読まれています・ランキング */
.htn-rd{background:#fff;border:1px solid #dfe5ee;border-top:0;padding:14px 16px 14px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 22px;position:relative}
.htn-rd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:#d6dde8}
.htn-rd__seg{display:none}
.htn-rd__p{min-width:0;display:flex;flex-direction:column;gap:8px}
.htn-rd__hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.htn-rd__t{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:800;border-left:4px solid #14213d;padding-left:8px;line-height:1.3}
.htn-rd__live{width:8px;height:8px;border-radius:50%;background:#e2554a;display:inline-block;animation:htnpulse2 1.6s infinite}
@keyframes htnpulse2{0%{box-shadow:0 0 0 0 rgba(226,85,74,.55)}70%{box-shadow:0 0 0 7px rgba(226,85,74,0)}100%{box-shadow:0 0 0 0 rgba(226,85,74,0)}}
.htn-rd__s{font-size:12px;font-variant-numeric:tabular-nums}
.htn-rd__tabs,.htn-rd__rg{display:inline-flex;gap:4px;flex-wrap:wrap}
.htn-rd__rg{margin-left:auto}
.htn-rd button{font:inherit;font-size:11.5px;font-weight:700;line-height:1.5;border-radius:99px;padding:3px 10px;cursor:pointer;border:1px solid #d6dde8;background:#fff;transition:background .15s,border-color .15s}
.htn-rd__tabs button.is-on{background:var(--g,#14213d);border-color:var(--g,#14213d)}
.htn-rd__rg button.is-on{background:#14213d;border-color:#14213d}
.htn-rd__list{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:none}
.htn-rd__list li{margin:0;padding:0;border-bottom:1px dashed #e3e8f0;list-style:none}
.htn-rd__list li:last-child{border-bottom:0}
.htn-rd__list li::before,.htn-rd__list li::marker{content:none;display:none}
.htn-rd__a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 4px;border-radius:6px;transition:background .15s}
.htn-rd__list--rank .htn-rd__a{grid-template-columns:26px minmax(0,1fr) auto}
.htn-rd__a:hover,.htn-rd__a:focus-visible{background:#f3f6fb;outline:none}
.htn-rd__ti{font-size:13.5px;font-weight:700;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htn-rd__m{display:inline-flex;gap:6px;align-items:center;font-size:11px;white-space:nowrap}
.htn-rd__m b{font-weight:800;font-variant-numeric:tabular-nums}
.htn-rd__m span{border:1px solid #e1e6ee;border-radius:99px;padding:0 7px;max-width:9em;overflow:hidden;text-overflow:ellipsis}
.htn-rd__no{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;font-size:12px;font-weight:800;background:#eef2f7;font-variant-numeric:tabular-nums}
.htn-rd__no--1{background:linear-gradient(#f7c85e,#e9a227)}.htn-rd__no--2{background:linear-gradient(#e6ebf2,#b9c3d1)}.htn-rd__no--3{background:linear-gradient(#efc2a0,#c98a5a)}
.htn-rd__v{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.htn-rd__ph{padding:10px 4px;font-size:12.5px}
.htn-rd__more{align-self:flex-end;font-size:12px;font-weight:700}
@container (max-width:760px){
  .htn-rd{grid-template-columns:minmax(0,1fr);padding:12px 12px 12px 18px}
  .htn-rd__seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#eef2f7;border-radius:99px;padding:3px}
  .htn-rd .htn-rd__seg button{border:0;background:transparent;padding:6px 8px;font-size:12.5px}
  .htn-rd .htn-rd__seg button.is-on{background:#14213d}
  .htn-rd__p{display:none}
  .htn-rd__p.is-on{display:flex}
  .htn-rd__p .htn-rd__t{display:none}
  .htn-rd__rg{margin-left:0}
  .htn-rd__ti{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .htn-rd__a{grid-template-columns:minmax(0,1fr)}
  .htn-rd__list--rank .htn-rd__a{grid-template-columns:24px minmax(0,1fr) auto}
  .htn-rd__list li:nth-child(n+4){display:none}
}
@media (prefers-reduced-motion:reduce){.htn-rd__live{animation:none}.htn-rd__a,.htn-rd button{transition:none}}
.htn-wrap .htn-rd .htn-rd__t{color:#14213d!important}
.htn-wrap .htn-rd .htn-rd__s,.htn-wrap .htn-rd .htn-rd__m,.htn-wrap .htn-rd .htn-rd__ph,.htn-wrap .htn-rd .htn-rd__v{color:#5b6577!important}
.htn-wrap .htn-rd .htn-rd__m b{color:#c2521f!important}
.htn-wrap .htn-rd a.htn-rd__a,.htn-wrap .htn-rd a.htn-rd__a:visited,.htn-wrap .htn-rd a.htn-rd__a:hover{text-decoration:none!important;box-shadow:none}
.htn-wrap .htn-rd .htn-rd__ti{color:#1b2333!important}
.htn-wrap .htn-rd .htn-rd__no{color:#1b2333!important}
.htn-wrap .htn-rd a.htn-rd__more,.htn-wrap .htn-rd a.htn-rd__more:visited{color:#1f5fa8!important;text-decoration:none!important}
.htn-wrap .htn-rd button{color:#3b4658!important}
.htn-wrap .htn-rd button.is-on{color:#fff!important}
.htn-wrap .htn-lib{border-radius:0 0 16px 16px}