/* ===================== v18：審査「見るのは、この4つ。」（?cr=c1〜c3 実験器具の見せ方を3通りに） ===================== */
/* 共通：地は流れと同じ明るいグレー。4つの観点に、表紙の虹色から取った4色（緑→青緑→青→紫）を割り当てる。目盛りは 1〜5 の数字 */
.gauge{background:#f3f4f1}
.gauge .gc:nth-child(1){--col:#14936b;--col2:#7ee0b4}
.gauge .gc:nth-child(2){--col:#14929e;--col2:#86dfe0}
.gauge .gc:nth-child(3){--col:#2a72c4;--col2:#9cc2f2}
.gauge .gc:nth-child(4){--col:#6a4fc4;--col2:#c4b2f2}
.gauge__ph{display:none}
.gc h3{font-weight:700}
.cup .t:nth-of-type(1)::after{content:"5"}.cup .t:nth-of-type(2)::after{content:"4"}.cup .t:nth-of-type(3)::after{content:"3"}.cup .t:nth-of-type(4)::after{content:"2"}.cup .t:nth-of-type(5)::after{content:"1"}
/* 下の配点の帯：太い枠をやめ、細い線と色で */
.r2bar{border:0;border-radius:0;min-height:0;background:none;gap:6px}
.r2bar span{padding:16px 0 0;border-top:3px solid var(--v6-ink);background:none!important;color:var(--v6-ink)!important;font-size:15px}
.r2bar .b{border-left:0!important;border-top-color:var(--c3)}
.r2bar small{color:var(--v6-ink2)}

/* ---------- c1 ガラスの試験管：細いガラスの管に、観点ごとの色の液が下から満ちる。液面がゆれ、泡がのぼる ---------- */
html[data-cr^="c1"] .cup{width:68px;height:250px;border:1.5px solid rgba(20,30,24,.35);border-top:0;border-radius:0 0 34px 34px;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.5) 40%,rgba(255,255,255,.85));padding:14px 0 16px;box-shadow:inset 0 -10px 20px rgba(20,30,24,.04)}
html[data-cr^="c1"] .cup::before{content:"";position:absolute;left:-6px;right:-6px;top:0;height:8px;border:1.5px solid rgba(20,30,24,.35);border-radius:4px;background:#fff;z-index:3}
html[data-cr^="c1"] .cup::after{content:"";position:absolute;left:12px;top:18px;bottom:24px;width:6px;border-radius:3px;background:rgba(255,255,255,.65);z-index:2}
html[data-cr^="c1"] .cup .fill{background:linear-gradient(180deg,var(--col2),var(--col));transition:height 2s cubic-bezier(.3,.7,.3,1)}
html[data-cr^="c1"] .gauge__row.in .cup .fill{height:90%}
html[data-cr^="c1"] .cup .fill::before{content:"";position:absolute;left:-30%;right:-30%;top:-7px;height:14px;border-radius:50%;background:var(--col2);animation:crWave 3.2s ease-in-out infinite alternate}
@keyframes crWave{from{transform:translateX(-8%) rotate(-3deg)}to{transform:translateX(8%) rotate(3deg)}}
html[data-cr^="c1"] .cup .fill::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.75) 1.6px,transparent 2.2px),radial-gradient(circle,rgba(255,255,255,.55) 1.2px,transparent 1.8px);background-size:22px 38px,30px 54px;background-position:6px 0,18px 12px;animation:crBub 5s linear infinite}
@keyframes crBub{to{background-position:6px -380px,18px -540px}}
html[data-cr^="c1"] .cup .t{padding-left:0;justify-content:flex-end;padding-right:10px;color:rgba(20,30,24,.45);font-size:11px;gap:5px;flex-direction:row-reverse}
html[data-cr^="c1"] .cup .t::before{width:10px;height:1.5px}
html[data-cr^="c1"] .gauge__row.in .cup .t{color:rgba(255,255,255,.95)}
html[data-cr^="c1"] .gc h3{margin-top:26px;padding-top:16px;border-top:2px solid var(--col);display:block;width:100%}
html.static .cup .fill::before,html.static .cup .fill::after{animation:none!important}
@media (max-width:900px){html[data-cr^="c1"] .cup{width:56px;height:190px}}
/* c1 見直し1：目盛りは右側に／泡は少なく不規則に／管を大きく */
html[data-cr^="c1"] .cup{width:80px;height:270px}
html[data-cr^="c1"] .cup .t{justify-content:flex-start;font-size:12px}
html[data-cr^="c1"] .cup .fill::after{background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.7) 2px,transparent 2.6px),radial-gradient(circle at 70% 60%,rgba(255,255,255,.5) 1.4px,transparent 2px),radial-gradient(circle at 45% 85%,rgba(255,255,255,.6) 2.4px,transparent 3px);background-size:80px 140px,80px 190px,80px 230px;background-position:0 0,0 30px,0 70px;animation:crBub 6s linear infinite}
@keyframes crBub{to{background-position:0 -280px,0 -350px,0 -390px}}
@media (max-width:900px){html[data-cr^="c1"] .cup{width:60px;height:200px}}

/* ---------- c2 横向きの計量管：観点を1行ずつ。左に名前と説明、右に横向きの管。液が 1→5 へ流れ込み、先端が光る ---------- */
html[data-cr="c2"] .gauge__row{grid-template-columns:1fr;gap:0;margin-top:48px;border-top:1px solid var(--v6-hair)}
html[data-cr="c2"] .gc{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(24px,3vw,48px);align-items:center;padding:28px 0;border-bottom:1px solid var(--v6-hair)}
html[data-cr="c2"] .gc h3{grid-column:1;grid-row:1;margin:0;display:flex;align-items:center;gap:12px}
html[data-cr="c2"] .gc h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--col);flex:none}
html[data-cr="c2"] .gc p{grid-column:2;grid-row:1;margin:0}
html[data-cr="c2"] .cup{grid-column:3;grid-row:1;width:100%;height:30px;border:1.5px solid rgba(20,30,24,.3);border-radius:15px;padding:0 14px;flex-direction:row;align-items:center;justify-content:space-between;background:rgba(255,255,255,.85)}
html[data-cr="c2"] .cup .fill{top:0;bottom:0;height:auto!important;width:0;right:auto;border-radius:15px;background:linear-gradient(90deg,var(--col2),var(--col));transition:width 1.8s cubic-bezier(.3,.7,.3,1);transition-delay:calc(.2s + var(--i) * .25s)}
html[data-cr="c2"] .gauge__row.in .cup .fill{width:100%}
html[data-cr="c2"] .cup .fill::after{content:"";position:absolute;right:0;top:0;bottom:0;width:30px;border-radius:15px;background:radial-gradient(circle at 70% 50%,rgba(255,255,255,.9),transparent 70%);animation:c2glow 2.4s ease-in-out infinite}
@keyframes c2glow{50%{opacity:.25}}
html[data-cr="c2"] .cup .t{padding:0;flex-direction:row;font-size:12px;color:rgba(20,30,24,.45);order:var(--o)}
html[data-cr="c2"] .cup .t::before{display:none}
html[data-cr="c2"] .cup .t:nth-of-type(1){--o:5}html[data-cr="c2"] .cup .t:nth-of-type(2){--o:4}html[data-cr="c2"] .cup .t:nth-of-type(3){--o:3}html[data-cr="c2"] .cup .t:nth-of-type(4){--o:2}html[data-cr="c2"] .cup .t:nth-of-type(5){--o:1}
html[data-cr="c2"] .gauge__row.in .cup .t{color:#fff}
@media (max-width:900px){
  html[data-cr="c2"] .gc{grid-template-columns:1fr;row-gap:12px}
  html[data-cr="c2"] .gc h3,html[data-cr="c2"] .gc p,html[data-cr="c2"] .cup{grid-column:1;grid-row:auto}
}
html[data-cr="c2"] .gauge__row.in .cup .t{text-shadow:0 0 6px rgba(10,30,20,.45)}
html[data-cr="c2"] .cup .fill::after{right:auto;left:calc(100% - 64px)}

/* ---------- c3 シャーレ：上から見た培養皿。中心から色が5つの輪まで広がり、表面がゆっくりうごめく ---------- */
html[data-cr="c3"] .cup{width:min(100%,210px);height:auto;aspect-ratio:1;border:1.5px solid rgba(20,30,24,.3);border-radius:50%;padding:0;background:radial-gradient(circle,#fff 60%,#f6f7f4);box-shadow:inset 0 0 0 9px rgba(255,255,255,.9),inset 0 0 0 10px rgba(20,30,24,.12)}
html[data-cr="c3"] .cup .fill{inset:10px;height:auto!important;border-radius:50%;transform:scale(0);transition:transform 2s cubic-bezier(.3,.7,.3,1);transition-delay:calc(.2s + var(--i) * .25s);
  background:radial-gradient(circle at 42% 40%,var(--col2) 0%,var(--col) 70%,color-mix(in srgb,var(--col) 80%,#000) 100%)}
html[data-cr="c3"] .gauge__row.in .cup .fill{transform:scale(1)}
html[data-cr="c3"] .cup .fill::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 35%,rgba(255,255,255,.35) 0 6%,transparent 7%),radial-gradient(circle at 65% 30%,rgba(255,255,255,.25) 0 4%,transparent 5%),radial-gradient(circle at 58% 68%,rgba(255,255,255,.3) 0 5%,transparent 6%),radial-gradient(circle at 28% 66%,rgba(255,255,255,.2) 0 3%,transparent 4%);animation:c3spin 40s linear infinite}
@keyframes c3spin{to{transform:rotate(360deg)}}
html[data-cr="c3"] .cup .t{position:absolute;left:50%;top:50%;padding:0;transform:translate(-50%,-50%);border:1px dashed rgba(20,30,24,.18);border-radius:50%;font-size:10px;color:rgba(20,30,24,.45);justify-content:center;align-items:flex-start}
html[data-cr="c3"] .cup .t::before{display:none}
html[data-cr="c3"] .cup .t::after{transform:translateY(-14px)}
html[data-cr="c3"] .cup .t:nth-of-type(1){width:100%;height:100%;border:0}
html[data-cr="c3"] .cup .t:nth-of-type(2){width:80%;height:80%}html[data-cr="c3"] .cup .t:nth-of-type(3){width:60%;height:60%}html[data-cr="c3"] .cup .t:nth-of-type(4){width:40%;height:40%}html[data-cr="c3"] .cup .t:nth-of-type(5){width:20%;height:20%}
html[data-cr="c3"] .gauge__row.in .cup .t{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.9)}
html[data-cr="c3"] .cup .t::after{display:block;margin-top:4px;transform:none}
html[data-cr="c3"] .gc h3{margin-top:26px}
@media (max-width:900px){html[data-cr="c3"] .cup{width:150px}}
@media (max-width:900px){html[data-cr="c2"] .gc{display:flex;flex-direction:column;align-items:stretch;gap:10px}html[data-cr="c2"] .gc h3{order:1}html[data-cr="c2"] .gc p{order:2}html[data-cr="c2"] .cup{order:3;margin-top:4px}}