/* ===== INDEX (硬めトーン:ネイビー基調) ===== */
:root{
  --ink-deep:#0d1b2a;
  --ink-mid:#1b2a40;
  --ink-soft:#33475d;
  --line-deep:#1f3552;
  --steel:#2f4a6b;
  --steel-2:#3d5a7d;
  --rule:#c9d3df;
  --mono:"JetBrains Mono","Consolas","SFMono-Regular","Menlo",monospace;
}

body{
  background:#f4f6f9;
  color:var(--ink-mid);
}

/* ===== HERO ===== */
.idx-hero{
  background:
    linear-gradient(90deg,rgba(13,27,42,.96) 0%,rgba(13,27,42,.84) 43%,rgba(13,27,42,.34) 100%),
    linear-gradient(180deg,rgba(19,36,61,.45) 0%,rgba(27,47,77,.75) 100%),
    url("assets/network-hero.png") center/cover no-repeat;
  color:#e6edf5;
  min-height:560px;
  padding:82px 28px 72px;
  text-align:left;
  border-bottom:1px solid #2a3f5f;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.idx-hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(127,179,217,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,179,217,.05) 1px,transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}
.idx-hero-inner{width:100%;max-width:1180px;margin:0 auto;position:relative;z-index:1}
.idx-hero .kicker{
  font-family:var(--mono);font-size:13.5px;letter-spacing:.2em;
  color:#7fb3d9;font-weight:700;margin-bottom:18px;
  display:inline-block;padding:5px 12px;border:1px solid rgba(127,179,217,.46);border-radius:2px;background:rgba(13,27,42,.68);
}
.idx-hero h1{
  font-size:42px;font-weight:800;letter-spacing:.01em;line-height:1.4;color:#fff;
  border-left:4px solid #4a8cc7;padding-left:20px;
  text-shadow:0 2px 18px rgba(0,0,0,.38);
}
.idx-hero h1 small{display:block;font-size:18px;color:#a8b9d0;font-weight:600;margin-top:8px;letter-spacing:.05em}
.idx-sub{color:#d0dcea;font-size:16.5px;margin:22px 0 0;line-height:1.95;max-width:820px;text-shadow:0 2px 16px rgba(0,0,0,.34)}

.idx-actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.idx-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 26px;border-radius:3px;
  font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.06em;
  text-decoration:none;transition:.15s;border:1px solid transparent;
}
.idx-cta.primary{background:#4a8cc7;color:#fff;border-color:#4a8cc7}
.idx-cta.primary:hover{background:#5fa0db}
.idx-cta.ghost{background:transparent;color:#cdd9e9;border-color:#3d5a7d}
.idx-cta.ghost:hover{background:rgba(74,140,199,.12);color:#fff;border-color:#4a8cc7}
.idx-cta::after{content:"→";font-family:inherit}

/* ===== SECTION COMMON ===== */
.section{max-width:1180px;margin:56px auto 0;padding:0 28px}
.section-head{margin-bottom:24px;border-bottom:2px solid var(--ink-deep);padding-bottom:12px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.section-head .num{font-family:var(--mono);font-size:13.5px;color:#5f7c9e;letter-spacing:.2em;font-weight:700}
.section-head h2{font-size:25px;font-weight:800;color:var(--ink-deep);letter-spacing:.02em}
.section-head .sub{font-size:15px;color:var(--ink-soft);margin-left:auto}

/* ===== FEATURES ===== */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.feat-card{
  --feat-bg:#fff;
  --feat-bg-2:#f9fbfd;
  background:linear-gradient(145deg,var(--feat-bg) 0%,var(--feat-bg-2) 100%);
  padding:28px 24px;transition:.15s;
}
.feat-card:nth-child(1){--feat-bg:#eef7ff;--feat-bg-2:#fbfdff}
.feat-card:nth-child(2){--feat-bg:#eef9f4;--feat-bg-2:#fbfefc}
.feat-card:nth-child(3){--feat-bg:#fff7e9;--feat-bg-2:#fffdf8}
.feat-card:hover{filter:saturate(1.04);box-shadow:inset 0 0 0 999px rgba(255,255,255,.22)}
.feat-num{font-family:var(--mono);font-size:13px;color:#5f7c9e;letter-spacing:.18em;font-weight:700;margin-bottom:12px}
.feat-title{font-size:17.5px;font-weight:800;color:var(--ink-deep);margin-bottom:10px;line-height:1.5}
.feat-desc{font-size:15px;color:var(--ink-soft);line-height:1.85}

/* ===== BAND (3-LAYER CURRICULUM) ===== */
.band{background:#fff;border:1px solid var(--rule);padding:0}
.band-head{
  display:flex;align-items:center;gap:22px;
  padding:26px 28px;
  color:#e6edf5;
  border-bottom:1px solid var(--rule);
  position:relative;overflow:hidden;
}
.band-head::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none;
}
.band-mark{
  flex:0 0 auto;font-size:26px;font-weight:800;letter-spacing:.06em;
  padding:10px 18px;border:2px solid rgba(255,255,255,.32);border-radius:3px;
  background:rgba(0,0,0,.22);position:relative;z-index:1;
  white-space:nowrap;color:#fff;
}
.band-meta{position:relative;z-index:1}
.band-name{font-size:24px;font-weight:800;letter-spacing:.02em;line-height:1.4;color:#fff;margin:0}
.band-sub{font-size:14.5px;color:#cfdbe9;line-height:1.75;margin:6px 0 0}
.band-sub b{color:#fff;font-weight:800}

.band-l1 .band-head{background:linear-gradient(120deg,#1a4d80 0%,#2a6aa3 100%)}
.band-l2 .band-head{background:linear-gradient(120deg,#1f5e47 0%,#2f8160 100%)}
.band-l3 .band-head{background:linear-gradient(120deg,#5e2820 0%,#9a3a2c 100%)}
.band-sup .band-head{background:linear-gradient(120deg,#2f4a6b 0%,#4a6685 100%)}

.band-body{padding:24px 28px 30px}

.cluster-head{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:800;color:var(--ink-deep);
  letter-spacing:.05em;
  margin:24px 0 12px;padding-bottom:8px;
  border-bottom:1px dashed var(--rule);
}
.band-body > .cluster-head:first-child{margin-top:6px}
.cluster-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:12px;height:24px;border-radius:0;
  font-family:inherit;font-size:0;font-weight:800;
  background:transparent;color:#5f7c9e;
}
.cluster-mark::before{
  content:"・";
  font-size:19px;
  line-height:1;
}
.band-l1 .cluster-mark{background:transparent;color:#2a6aa3}
.band-l2 .cluster-mark{background:transparent;color:#246a4f}
.band-l3 .cluster-mark{background:transparent;color:#88382e}
.band-sup .cluster-mark{background:transparent;color:#3d5a7d}

.topic-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  margin-bottom:6px;
}
.topic-card{
  --topic-bg:#fff;
  --topic-bg-2:#f8fafc;
  --topic-bar:#dbe4ee;
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding:16px;
  background:
    linear-gradient(90deg,var(--topic-bar) 0 5px,transparent 5px),
    linear-gradient(145deg,var(--topic-bg) 0%,var(--topic-bg-2) 100%);
  color:var(--ink-deep);
  text-decoration:none;
  transition:.12s;
  min-height:78px;
  position:relative;
}
.topic-card:hover:not(.todo){
  background:
    linear-gradient(90deg,var(--topic-bar) 0 5px,transparent 5px),
    linear-gradient(145deg,var(--topic-bg) 0%,#fff 100%);
  box-shadow:0 10px 24px rgba(31,53,82,.12);
  z-index:4;
}

/* 一覧ではレイヤごとのまとまりを優先し、背景色はごく薄くする */
.band-l1 .topic-card{--topic-bg:#f6fbff;--topic-bg-2:#ffffff;--topic-bar:#bdd5ec}
.band-l2 .topic-card{--topic-bg:#f7fbf9;--topic-bg-2:#ffffff;--topic-bar:#bfd9cd}
.band-l3 .topic-card{--topic-bg:#fff8f6;--topic-bg-2:#ffffff;--topic-bar:#e2c5bf}
.topic-num{
  flex:0 0 auto;font-family:var(--mono);font-size:13px;font-weight:800;
  color:#fff;background:#2f4a6b;padding:5px 10px;border-radius:2px;letter-spacing:.06em;
  min-width:34px;text-align:center;
}
.band-l1 .topic-num{background:#2a6aa3}
.band-l2 .topic-num{background:#246a4f}
.band-l3 .topic-num{background:#88382e}
.band-sup .topic-num{background:#3d5a7d;font-size:11px;letter-spacing:.04em}

.topic-ttl{
  flex:1 1 170px;font-size:14.5px;font-weight:700;line-height:1.45;color:var(--ink-deep);
}
.topic-actions{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
}
.topic-start,
.topic-go{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  color:#5f7c9e;
  padding:3px 7px;
  border:1px solid #dbe4ee;
  border-radius:2px;
  background:#f8fafc;
}
.topic-start{
  color:#8a5a12;
  background:#fff8ea;
  border-color:#e3c277;
}
.band-l1 .topic-start,
.band-l2 .topic-start,
.band-l3 .topic-start{background:#fff8ea;border-color:#e3c277;color:#8a5a12}
.topic-card:not(.todo) .topic-go{color:#2a6aa3}
.topic-card:not(.todo) .topic-go::after{content:""}
.topic-card:not(.todo) .topic-start:hover{
  background:#fff2cf;
  border-color:#cf9f38;
}
.topic-card:not(.todo) .topic-go:hover{
  background:#eaf4ff;
  border-color:#aac7e6;
}

.topic-outline{
  display:none;
  position:absolute;
  top:70px;
  left:16px;
  right:16px;
  flex-wrap:wrap;
  gap:5px 6px;
  margin:0;
  padding:10px;
  color:#5f7c9e;
  font-size:11.5px;
  line-height:1.5;
  background:#fff;
  border:1px solid #c7d8ea;
  box-shadow:0 14px 28px rgba(31,53,82,.16);
  z-index:20;
  pointer-events:none;
}
.topic-go:hover + .topic-outline{
  display:flex;
}
.topic-outline span{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:3px 7px;
  border:1px solid #dbe4ee;
  background:#f8fafc;
  border-radius:2px;
}
.topic-card.todo{cursor:not-allowed;background:#f7f9fc}
.topic-card.todo .topic-num{background:#b0bcc8;color:#fff}
.topic-card.todo .topic-ttl{color:#7d8b9b}
.topic-card.todo .topic-go{color:#a4b1bd}

.band + .band{margin-top:32px}

@media (max-width:700px){
  .band-head{flex-direction:column;align-items:flex-start;gap:14px;padding:22px}
  .band-mark{font-size:24px;padding:8px 14px}
  .band-name{font-size:20px}
  .band-body{padding:18px 18px 22px}
  .topic-grid{grid-template-columns:1fr}
  .topic-ttl{font-size:14px}
  .topic-outline{top:68px;left:12px;right:12px}
}

/* ===== STATS ===== */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.stat-item{background:#fff;padding:26px 22px;text-align:left}
.stat-item .num{font-family:var(--mono);font-size:36px;font-weight:800;color:var(--ink-deep);letter-spacing:-.01em;line-height:1.1}
.stat-item .lbl{font-size:13px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-top:8px}

/* ===== VISUAL OVERVIEW ===== */
.idx-visual-section{margin-top:34px}
.idx-visual-showcase{
  margin:0;
  background:#fff;
  border:1px solid var(--rule);
  border-top:3px solid #4a8cc7;
}
.idx-visual-showcase img{
  width:100%;
  aspect-ratio:16/7;
  object-fit:cover;
  object-position:center;
}
.idx-visual-showcase figcaption{
  padding:14px 18px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-soft);
  border-top:1px solid var(--rule);
  background:#f8fafc;
}

/* ===== BOTTOM CTA ===== */
.idx-bottom-cta{
  background:
    linear-gradient(90deg,rgba(13,27,42,.96),rgba(19,36,61,.88)),
    url("assets/network-hero.png") center 62%/cover no-repeat;
  color:#e6edf5;
  margin:72px 0 0;padding:64px 28px;
  border-top:3px solid #4a8cc7;
}
.idx-bottom-cta-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.idx-bottom-cta h2{font-size:25px;font-weight:800;letter-spacing:.02em}
.idx-bottom-cta p{color:#b8c5d6;font-size:15.5px;margin-top:8px;line-height:1.8}
.idx-bottom-cta .idx-actions{margin-top:0;margin-left:auto}

/* ===== FOOTER ===== */
.page-footer{
  background:#0d1b2a;color:#7c8da4;
  padding:28px;
  border-top:1px solid #1f3552;
  font-family:var(--mono);font-size:13.5px;letter-spacing:.04em;
}
.page-footer-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.page-footer nav{display:flex;gap:22px}
.page-footer a{color:#7c8da4;text-decoration:none}
.page-footer a:hover{color:#cdd9e9}

@media (max-width:700px){
  .idx-hero{min-height:520px;padding:48px 22px;background-position:58% center}
  .idx-hero h1{font-size:30px}
  .idx-hero h1 small{font-size:15.5px}
  .idx-sub{font-size:15px}
  .idx-visual-showcase img{aspect-ratio:4/3}
  .idx-bottom-cta-inner .idx-actions{margin-left:0;margin-top:14px}
}