:root{--navy:#37474F;--navy-2:#2F3D44;--teal:#2A75A8;--teal-d:#1F5C86;--teal-l:#EAF3FA;--mint:#9FCBEA;--bg:#F3F4F5;--text:#263238;--muted:#5A6670;--line:#DFE5E8;--card:#fff;
--sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
--round:"Zen Maru Gothic","Noto Sans JP","Hiragino Maru Gothic ProN",sans-serif;
--serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
--head:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.8;font-size:16px;font-family:var(--sans);overflow-wrap:anywhere}
a{color:var(--teal)}
a:hover{color:var(--teal-d)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.sample-banner{background:#fff3cd;color:#664d03;text-align:center;padding:8px 12px;font-size:14px}

/* ヘッダー */
.site-header{background:var(--navy);color:#fff}
.header-inner{padding-top:14px;padding-bottom:12px}
.logo{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.logo:hover{color:#fff}
.logo-mark{flex:none}
.logo-text{display:flex;flex-direction:column;line-height:1.25}
.logo-name{font-family:var(--head);font-weight:700;font-size:26px;letter-spacing:.01em;white-space:nowrap}
.logo-name b{color:var(--mint);font-weight:700}
.logo-sun{margin-left:4px;vertical-align:0}
.logo-sub{font-size:12px;color:#B6C2C8;letter-spacing:.06em;margin-top:2px}
.nav{background:var(--navy-2);border-top:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-inner::-webkit-scrollbar{display:none}
.nav a{color:#dfe7ee;text-decoration:none;font-size:15px;padding:10px 12px;white-space:nowrap}
.nav a:hover{color:#fff;background:rgba(255,255,255,.04)}
.nav a.active{color:#fff;font-weight:700;background:rgba(255,255,255,.12)}

/* レイアウト */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding-top:28px;padding-bottom:40px}
.page-title{font-family:var(--head);font-weight:900;font-size:28px;margin:0 0 16px;line-height:1.4;letter-spacing:.02em}
.page-title small{display:block;font-family:var(--sans);font-size:14px;color:var(--muted);font-weight:400;letter-spacing:0}
.day-head{margin-bottom:20px}
.day-head .page-title{margin:0}
.day-date{margin:0;color:var(--teal);font-weight:700;font-size:14px;letter-spacing:.04em}
.day-lead{margin:4px 0 0;color:var(--muted);font-size:15px}
h2{font-family:var(--head);font-size:20px;margin:32px 0 12px;display:flex;align-items:baseline;gap:10px}
h2::before{content:"";align-self:center;width:4px;height:1.1em;background:var(--teal);border-radius:2px}
.h-count{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--muted)}

/* 今日の注目 */
.featured{background:linear-gradient(180deg,var(--teal-l),#f4f8fb);border:1px solid #cfe0ee;border-radius:12px;padding:6px 18px 10px}
.featured h2{margin-top:16px}
.card.card-featured{position:relative;padding-left:60px}
.rank{position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;font-family:var(--head);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}

/* 記事カード */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:12px;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:#b8d4ea;box-shadow:0 2px 10px rgba(38,50,56,.06)}
.card h3{font-size:17px;margin:6px 0 6px;line-height:1.6}
.card h3 a{color:var(--text);text-decoration:none}
.card h3 a:hover{color:var(--teal);text-decoration:underline}
.card p{margin:6px 0}
.summary{font-size:15px;color:#2f3c43}
.why{font-size:14px;background:var(--teal-l);border-radius:8px;padding:8px 12px;margin-top:10px !important}
.why strong{display:inline-block;color:var(--teal-d);margin-right:8px}
.meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;color:var(--muted)}
.tag{background:var(--navy);color:#fff;border-radius:4px;padding:1px 8px;font-size:12px;line-height:1.7}
.tag-ai{background:#19448E}
.tag-security{background:#9b3b3b}
.tag-tech{background:#2E7D6B}
.source{font-weight:700;color:#37474F}
.card-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;margin-top:10px;font-size:13px}
.read{font-weight:700;text-decoration:none}
.read:hover{text-decoration:underline}
.ai{color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 10px;font-size:12px}
.more{text-align:right;font-size:14px;margin:4px 0 0}
.more a{text-decoration:none;font-weight:700}

/* 一覧・その他 */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{border:1px solid var(--teal);border-radius:999px;padding:2px 14px;text-decoration:none;font-size:14px;background:#fff}
.chip.active{background:var(--teal);color:#fff}
.pager{display:flex;justify-content:space-between;align-items:center;margin:28px 0 0;font-size:15px}
.pager a{text-decoration:none;font-weight:700}
.box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:16px}
.box h2{margin:0 0 8px;font-size:16px}
.box h2::before{height:1em}
.about{border-top:3px solid var(--teal)}
.plain{list-style:none;padding:0;margin:0}
.plain li{padding:4px 0}
.days li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:6px 0}
.days li:last-child{border-bottom:0}
.count{font-size:13px;color:var(--muted)}
.src-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.src-list li{background:var(--bg);border-radius:4px;padding:0 8px;font-size:13px;color:#37474F}
.archive li{border-bottom:1px solid var(--line);padding:10px 0}
.small{font-size:13px;color:var(--muted)}
.ad-slot{background:#e9edf0;color:#8a95a0;text-align:center;padding:60px 0;margin-bottom:16px;border-radius:8px}

/* フッター */
.site-footer{background:var(--navy);color:#D3DADD;padding:28px 0 18px;font-size:14px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer a.logo:hover{text-decoration:none}
.site-footer .small{color:#B6C2C8}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;margin-bottom:8px}
.footer-brand .logo-name{font-size:20px}
.footer-brand .logo-sun{width:20px;height:16px}
.footer-brand p{margin:6px 0 0}
.footer-links{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,auto);gap:4px 28px;align-content:start}
.site-footer .note{border-top:1px solid rgba(255,255,255,.1);padding-top:14px}

@media(max-width:820px){
  .layout{grid-template-columns:1fr;padding-top:20px}
  .page-title{font-size:23px}
  .logo-name{font-size:22px}
  .logo-mark{width:34px;height:34px}
  .card{padding:14px 14px}
  .card.card-featured{padding-left:52px}
  .rank{left:12px;top:14px;width:28px;height:28px;font-size:15px}
  .featured{padding:4px 10px 6px}
  .footer-links{grid-template-columns:1fr 1fr}
}

/* 固定ページ */
.prose h2{font-size:17px;margin:24px 0 8px}
.prose h2:first-child{margin-top:4px}
.prose ul{padding-left:1.4em}
.prose p,.prose li{font-size:15px}
table.info{border-collapse:collapse;width:100%}
table.info th,table.info td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top;font-size:15px}
table.info th{width:8em;white-space:nowrap;color:var(--muted);font-weight:600}
.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;border-radius:6px;padding:8px 18px}
.btn:hover{background:var(--teal-d);color:#fff}

/* アイコン（Google の Material Symbols）。読み込めなかったときに英字が見えないよう、幅を固定して隠す */
.ms{font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;font-size:1.25em;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;width:1em;height:1em;overflow:hidden;white-space:nowrap;vertical-align:-.22em;margin-right:.35em;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}
.nav a .ms{color:var(--mint);margin-right:.3em}
h2 .ms{color:var(--teal);align-self:center;margin-right:0}
.ms-title{color:var(--teal);font-size:1em;vertical-align:-.12em;margin-right:.3em}
.why .ms{color:#E08A3C;margin-right:.2em;font-size:1.2em}
.read .ms{font-size:1.1em;margin:0 0 0 .1em}
.ai .ms{font-size:1.1em;margin-right:.2em}
.card-featured .rank{box-shadow:0 2px 6px rgba(42,117,168,.3)}

/* サイドバー：やわらかい書体と、丸みのある箱 */
.side-col .box{border-radius:16px;border-color:var(--line);box-shadow:0 2px 8px rgba(38,50,56,.04)}
.side-col .box h2{font-family:var(--round);font-weight:700;font-size:16px;display:flex;align-items:center;gap:6px}
.side-col .box h2::before{display:none}
.about{border-top:1px solid var(--line)}
.side-text{font-family:var(--round);font-weight:500;font-size:14px;line-height:1.85;color:#37474F;margin:6px 0}
.side-text a{font-weight:700;text-decoration:none}
.days li a{font-family:var(--round);font-weight:500;text-decoration:none}
.src-list li{font-family:var(--round);font-weight:500;background:var(--teal-l);color:var(--teal-d);border-radius:999px;padding:1px 12px}
.featured h2::before,.cat-section h2::before{display:none}
.featured h2,.cat-section h2{gap:8px}

/* リンクにマウスを乗せたときの動き（halpost.com に合わせる）
   一覧のリンクは、ふだんは文字色（濃いグレー）で、乗せると青に変わる。「→」付きの案内リンクは、ふだんから青で、乗せると下線が出る。 */
.days li a{color:var(--text)}
.days li a:hover{color:var(--teal);text-decoration:none}
.side-col .rank-title:hover{text-decoration:none}
.side-text a:hover{text-decoration:underline;text-underline-offset:4px}
.nav a:hover{background:rgba(255,255,255,.2)}
.card:hover{border-color:var(--teal);box-shadow:0 6px 18px rgba(38,50,56,.08)}

/* トップページ：サイドバーなしの1カラム。区切りは、白と薄いグレーの背景を交互に入れて見せる（halpost.com・enagain.co.jp と同じ作り） */
.main-top{display:block}
.band{background:#fff;padding:36px 0 40px}
.band-alt{background:var(--bg)}
.band-in{padding-top:0;padding-bottom:0}
.band h2{margin-top:0}
.band .day-head{margin-bottom:0}
.band-end{padding:24px 0 32px;background:var(--bg)}
.more-left{text-align:left}
.more-left a{margin-right:20px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid .card{margin-bottom:0;display:flex;flex-direction:column}
.grid .card .card-foot{margin-top:auto;padding-top:10px}
.grid .card.card-featured{padding:56px 18px 16px}
.grid .card-featured .rank{left:18px;top:16px}
.band-alt .card{border-color:#e3e8eb}
.band-alt .card:hover{border-color:var(--teal)}
.band .grid-3 .card h3{font-size:16px}
@media(max-width:820px){.grid-2,.grid-3{grid-template-columns:1fr}.band{padding:28px 0 32px}}

/* サイドバーは、スクロールしても画面の上のほうについてくる（広い画面だけ） */
@media(min-width:821px){.side-col{position:sticky;top:16px;align-self:start}}

/* 注目ランキング（halpost.com の「人気記事」のような番号つきの一覧） */
.rank-list{list-style:none;margin:0;padding:0}
.rank-item{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.rank-item:last-child{border-bottom:0}
.rank-num{flex:none;width:2em;font-family:var(--head);font-weight:900;font-size:20px;line-height:1.4;color:#8a98a1}
.rank-top .rank-num{color:var(--teal)}
.rank-title{color:var(--text);text-decoration:none;font-weight:700;line-height:1.6}
.rank-title:hover{color:var(--teal);text-decoration:underline;text-underline-offset:4px}
.rank-meta{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.band .rank-list{background:#fff;border-radius:12px;padding:4px 20px;border:1px solid var(--line)}
.side-col .rank-item{padding:8px 0;gap:8px}
.side-col .rank-num{width:1.6em;font-size:16px}
.side-col .rank-title{font-size:13.5px;font-weight:500}
.cats .count{background:var(--bg);border-radius:999px;padding:0 10px;min-width:2.2em;text-align:center}

/* 今日の注目のカードに、カテゴリー名を出す */
.cat-label{font-weight:700;font-size:12px;border-radius:999px;padding:0 10px;line-height:1.8;border:1px solid currentColor}
.cat-label-ai{color:#19448E}
.cat-label-security{color:#9b3b3b}
.cat-label-tech{color:#2E7D6B}

/* 今日のポイント・共有ボタン・週のまとめ */
.digest{background:var(--card);border:1px solid #b8d4ea;border-radius:10px;box-shadow:0 2px 10px rgba(38,50,56,.06);padding:8px 20px 12px;margin:16px 0}
.digest h2{font-size:16px;margin:10px 0 6px}
.digest ul{margin:6px 0;padding-left:1.3em}
.digest li{font-size:15px;line-height:1.8;margin:2px 0}
.digest .small{margin:4px 0 2px}
.band .digest{margin:20px 0 0}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0}
.share-btn{font:inherit;font-size:13px;font-weight:700;line-height:1;padding:8px 14px;border-radius:6px;border:1px solid transparent;color:#fff;text-decoration:none;cursor:pointer}
.share-btn:hover{opacity:.85;text-decoration:none;color:#fff}
.share-x{background:#111}
.share-hatena{background:#1f6fb8}
.share-line{background:#2e9e4f}
.share-fb{background:#1877f2}
.share-copy{background:#fff;color:var(--text);border-color:var(--line)}
.share-copy:hover{color:var(--text);background:var(--bg);opacity:1}
.week-block{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 20px 14px;margin:16px 0}
.week-block h2{margin-top:14px}
.week-day h3{font-size:15px;margin:14px 0 4px;display:flex;justify-content:space-between;gap:8px}
.week-day h3 a{color:var(--text);text-decoration:none}
.week-day h3 a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:4px}
.week-day ul{margin:4px 0;padding-left:1.3em}
.week-day li{font-size:14.5px;line-height:1.8}
.week-block .rank-list{background:none;border:0;padding:0;border-radius:0}

/* サイト内検索・先頭へ戻るボタン */
.search-form{margin:8px 0 12px}
.search-form input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text)}
.search-form input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
#search-results .card{margin-top:12px}
.to-top{position:fixed;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--teal);box-shadow:0 2px 10px rgba(38,50,56,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:50}
.to-top[hidden]{display:none}
.to-top:hover{color:var(--teal-d);border-color:var(--teal)}
.to-top .ms{margin:0;font-size:28px;vertical-align:top}
.search-box{display:flex;margin:0 0 16px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(38,50,56,.04)}
.search-box:focus-within{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.search-box input{flex:1;min-width:0;border:0;font:inherit;font-size:16px;padding:10px 14px;background:transparent;color:var(--text);outline:0}
.search-box button{border:0;background:transparent;color:var(--teal);cursor:pointer;padding:0 12px;display:flex;align-items:center}
.search-box button:hover{color:var(--teal-d)}
.search-box .ms{margin:0;font-size:24px;vertical-align:top}
.main-top .search-box{max-width:420px}

/* 一覧のリンクは、ふだんは下線なし。乗せると文字色が青に変わる（サイドバーと同じ） */
.archive li a{color:var(--text);text-decoration:none;font-weight:700}
.archive li a:hover{color:var(--teal)}
.week-day .small a{text-decoration:none;font-weight:700}
.week-day .small a:hover{text-decoration:underline;text-underline-offset:4px}

/* ページの下の内部リンク */
.related{margin:28px 0 8px}
.related h2{font-size:16px;margin:0 0 10px}
.related .chip{background:#fff;padding:6px 16px}
.related .chip:hover{background:var(--teal-l);color:var(--teal-d)}

/* スマホのメニュー（ハンバーガー）。JS が動くときだけ、幅820px以下でたたむ */
.nav-toggle{display:none}
@media(max-width:820px){
  .js .header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .js .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);border-radius:10px;background:transparent;color:#fff;cursor:pointer;flex:none}
  .js .nav-toggle:hover{background:rgba(255,255,255,.12)}
  .js .nav-toggle .ms{margin:0;font-size:28px;vertical-align:top}
  .js .nav{display:none}
  .js .nav-open .nav{display:block}
  .js .nav-inner{flex-direction:column;gap:0;overflow:visible;padding-top:4px;padding-bottom:8px}
  .js .nav a{display:block;padding:14px 12px;font-size:16px;border-top:1px solid rgba(255,255,255,.08)}
  .js .nav a:first-child{border-top:0}
}