/* ============================================================
   TOP（index.html）専用：セキュリティ情報を前面に出す構成
   既存の style.css の変数・部品をそのまま使い、追加分だけ定義
   ============================================================ */

/* ---- hero（ブログ前面版） ---- */
.hero.blogfirst .wrap{grid-template-columns:1.05fr 1fr;gap:40px;padding:64px 24px 72px}
.hero.blogfirst h1{font-size:clamp(1.6rem,3.6vw,2.5rem)}
.hero.blogfirst h1 .nb{display:inline-block}
.hero.blogfirst p.lead{max-width:540px}
.hero-meta{display:flex;gap:26px;margin-top:28px;color:var(--muted);font-size:.8rem}
.hero-meta b{display:block;color:var(--head);font-size:1.5rem;line-height:1.2}

/* 最新記事パネル（ヒーロー右側） */
.latest-panel{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 22px 14px;box-shadow:var(--shadow-lg)}
.latest-panel .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.latest-panel .ph b{color:var(--head);font-size:1rem}
.latest-panel .ph .live{font-size:.7rem;font-weight:700;color:var(--teal-d);background:#e5f6f2;padding:3px 10px;border-radius:999px}
.latest-list{list-style:none;margin:0;padding:0}
.latest-list li{border-top:1px solid var(--line)}
.latest-list li:first-child{border-top:0}
.latest-list a{display:block;padding:13px 4px;transition:.15s}
.latest-list a:hover{background:var(--soft);border-radius:10px}
.latest-list .m{display:flex;gap:10px;align-items:center;font-size:.72rem;color:#8ea2b4;margin-bottom:3px}
.latest-list .s{color:var(--blue-d);font-weight:700}
.latest-list .t{color:var(--head);font-weight:700;font-size:.93rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.latest-panel .all{display:block;text-align:right;color:var(--blue-d);font-weight:700;font-size:.86rem;padding:8px 4px 4px}
.latest-panel .skeleton{height:46px;border-radius:10px;background:linear-gradient(90deg,#f2f6fa,#e9f0f6,#f2f6fa);margin:10px 0}

/* ---- シリーズ一覧 ---- */
.series-filter{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:-8px 0 26px}
.series-filter span{font-size:.78rem;font-weight:700;padding:5px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:#fff}
.grid-series{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.scard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 4px 14px rgba(74,124,164,.06);transition:.18s;display:flex;flex-direction:column}
.scard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfe6f4}
.scard .no{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.scard .no b{color:var(--blue-d);font-size:.74rem;letter-spacing:.14em}
.scard .no span{font-size:.68rem;font-weight:700;padding:2px 9px;border-radius:999px}
.scard .no .g1{color:#3283bb;background:#e7f3fb}
.scard .no .g2{color:#b0473c;background:#fdeeec}
.scard .no .g3{color:#3aa593;background:#e5f6f2}
.scard h3{margin:0 0 6px;font-size:1.02rem;line-height:1.5;color:var(--head)}
.scard p{margin:0 0 12px;color:var(--muted);font-size:.84rem;line-height:1.7;flex:1}
.scard .more{color:var(--blue-d);font-weight:700;font-size:.82rem}
.scard.special{background:linear-gradient(135deg,#f6fbfe,#effaf7);border-style:dashed}

.blog-cta{margin-top:30px}

/* ---- 書き手（プロフィール圧縮版） ---- */
.author .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.author .pcard{box-shadow:var(--shadow)}

/* ---- その他の情報発信 ---- */
.other .grid2 .fcard{text-align:left}

@media(max-width:880px){
  .hero.blogfirst .wrap{grid-template-columns:1fr;padding-top:46px;padding-bottom:52px}
  .grid-series{grid-template-columns:1fr}
  .author .wrap{grid-template-columns:1fr;gap:26px}
}
@media(min-width:881px) and (max-width:1060px){
  .grid-series{grid-template-columns:repeat(2,1fr)}
}