/* ============================================================
   12-juku.css
   メティ測定義塾
   読み込み順は index.html の <link> の並びが正。順番を変えると見た目が変わる。
   ============================================================ */
#juku{background:var(--paper);border-top:1px solid var(--line)}

.juku-hero{
  margin-top:36px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1.12fr .88fr;
  background:linear-gradient(145deg,var(--navy) 0%,var(--navy-mid) 100%);color:var(--white);
}
.juku-copy{padding:36px;position:relative;z-index:2}
.juku-copy .cap{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;color:#a9b4e4}
.juku-copy h3{
  margin:10px 0 14px;font-weight:900;letter-spacing:.04em;line-height:1.35;
  font-size:clamp(1.5rem,3.6vw,2.1rem);
}
.juku-copy h3 .y{color:var(--yellow)}
.juku-copy p{margin:0;color:#c5cdf0;font-size:.92rem}
.juku-meta{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.juku-meta div{border-left:3px solid var(--yellow);padding-left:12px}
.juku-meta .k{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;color:#9fabde}
.juku-meta .v{font-weight:900;font-size:.98rem}
.juku-meta .v small{display:block;font-weight:500;font-size:.76rem;color:#b7c0e8}

.juku-visual{
  position:relative;display:flex;align-items:center;justify-content:center;padding:30px;
  background:radial-gradient(circle at 52% 44%,rgba(255,255,255,.1),transparent 62%);
}
.juku-visual::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(300px,84%);aspect-ratio:1;border-radius:50%;
  border:2px dashed rgba(245,197,24,.35);
}
.juku-visual img{width:74%;position:relative;z-index:2;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.juku-badge{
  position:absolute;left:26px;top:26px;z-index:3;
  background:var(--yellow);color:var(--navy-deep);border-radius:999px;
  padding:5px 15px;font-weight:900;font-size:.76rem;letter-spacing:.12em;
  box-shadow:0 8px 18px rgba(0,0,0,.3);
}