/* ===================== v19：審査の試験管を作り込む（?cr=c1a〜c1c。c1 の液・泡・目盛りはそのまま使う） ===================== */
/* 共通：ガラスの厚み（左右の反射＋内側の影）と床の影。管を太く */
html[data-cr^="c1"]:not([data-cr="c1"]) .cup{width:92px;height:300px;border-color:rgba(20,30,24,.28);
  background:linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.95) 18%,rgba(255,255,255,.6) 42%,rgba(255,255,255,.45) 70%,rgba(255,255,255,.9) 88%,rgba(255,255,255,.5) 100%);
  box-shadow:inset 6px 0 12px -6px rgba(20,30,24,.12),inset -6px 0 12px -6px rgba(20,30,24,.12)}
html[data-cr^="c1"]:not([data-cr="c1"]) .cup::after{left:14px;width:7px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.4))}
html[data-cr^="c1"]:not([data-cr="c1"]) .gc{position:relative}
html[data-cr^="c1"]:not([data-cr="c1"]) .gc .cup+h3{margin-top:40px}

/* ---------- c1a 試験管立てに並ぶ：4本が1つの台に立つ。管にラベル（01〜04）。台の横木の上に名前 ---------- */
html[data-cr="c1a"] .gauge__row{position:relative;padding-top:6px}
html[data-cr="c1a"] .gauge__row::before{content:"";position:absolute;left:-12px;right:-12px;top:96px;height:16px;border-radius:4px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,#e9ece8 0%,#fff 35%,#d7dbd6 100%);box-shadow:0 6px 14px -6px rgba(20,30,24,.25),inset 0 -1px 0 rgba(20,30,24,.12)}
html[data-cr="c1a"] .gauge__row::after{content:"";position:absolute;left:-12px;right:-12px;top:300px;height:22px;border-radius:6px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#dfe3de,#f6f7f4 40%,#cfd4ce);box-shadow:0 18px 26px -14px rgba(20,30,24,.35)}
html[data-cr="c1a"] .cup{z-index:1;margin-left:24px}
html[data-cr="c1a"] .gc::before{content:"0" counter(cr);counter-increment:cr;position:absolute;left:24px;top:150px;z-index:4;width:92px;padding:6px 0 7px;text-align:center;
  font-family:var(--f-en);font-weight:600;font-size:14px;letter-spacing:.08em;color:var(--col);background:rgba(255,255,255,.92);border-top:2px solid var(--col);border-bottom:1px solid rgba(20,30,24,.12)}
html[data-cr="c1a"] .gauge__row{counter-reset:cr}
html[data-cr="c1a"] .cup .t{opacity:.0}
html[data-cr="c1a"] .gc h3{border-top:0;padding-top:0;margin-top:52px!important}
html[data-cr="c1a"] .gc h3::before{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--col);margin-bottom:14px}
@media (max-width:900px){
  html[data-cr="c1a"] .gauge__row::before,html[data-cr="c1a"] .gauge__row::after{display:none}
  html[data-cr="c1a"] .cup{margin-left:0;width:70px;height:220px}
  html[data-cr="c1a"] .gc::before{left:0;top:110px;width:70px;font-size:12px}
}
/* c1a 見直し1：底が台の手前に浮いて見えたので、台を前に出して底を少し隠す／横木を厚く */
html[data-cr="c1a"] .gauge__row::after{top:290px;height:26px;z-index:2}
html[data-cr="c1a"] .gauge__row::before{top:92px;height:22px;background:linear-gradient(180deg,#f7f8f6 0%,#fff 30%,#e1e5e0 70%,#cdd2cc 100%)}

/* ---------- c1b 栓をした試験管のカード：2列×2段。白いカードの左に色の栓をした管、右に名前と説明。上に「満点 5」の大きな数字 ---------- */
html[data-cr="c1b"] .gauge__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:48px}
html[data-cr="c1b"] .gc{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:36px;align-items:start;background:#fff;border-radius:14px;padding:32px 36px 32px 32px;box-shadow:0 1px 0 rgba(20,30,24,.04),0 24px 48px -36px rgba(20,30,24,.35);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
html[data-cr="c1b"] .gc:hover{transform:translateY(-4px);box-shadow:0 32px 56px -34px rgba(20,30,24,.4)}
html[data-cr="c1b"] .cup{grid-column:1;grid-row:1/4;width:72px;height:240px;margin-top:18px}
html[data-cr="c1b"] .cup::before{left:6px;right:6px;top:0;height:22px;border:0;border-radius:4px 4px 2px 2px;background:linear-gradient(90deg,color-mix(in srgb,var(--col) 70%,#000),var(--col) 40%,color-mix(in srgb,var(--col) 80%,#000))}
html[data-cr="c1b"] .gc::before{content:"";position:absolute;left:32px;top:42px;width:96px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--col) 60%,#000);z-index:2;opacity:.85}
html[data-cr="c1b"] .gc::after{content:"5";position:absolute;right:36px;top:22px;font-family:var(--f-en);font-weight:600;font-size:64px;line-height:1;letter-spacing:-.03em;color:color-mix(in srgb,var(--col) 22%,#fff)}
html[data-cr="c1b"] .gc h3{grid-column:2;margin-top:34px!important;padding-top:0;border:0;font-size:clamp(20px,1.7vw,24px)}
html[data-cr="c1b"] .gc h3::before{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--col);margin-bottom:14px}
html[data-cr="c1b"] .gc p{grid-column:2}
@media (max-width:900px){
  html[data-cr="c1b"] .gauge__row{grid-template-columns:1fr;gap:14px}
  html[data-cr="c1b"] .gc{grid-template-columns:60px minmax(0,1fr);column-gap:20px;padding:24px 20px}
  html[data-cr="c1b"] .cup{width:56px;height:180px}
  html[data-cr="c1b"] .gc::before{left:20px;top:34px;width:60px}
  html[data-cr="c1b"] .gc::after{right:20px;font-size:44px}
}
/* c1b 見直し1：管を短く細く、カードを締める／意味の伝わらない大きな「5」は外す／液は栓の下まで */
html[data-cr="c1b"] .cup{width:64px;height:176px;margin-top:4px}
html[data-cr="c1b"] .gc{grid-template-columns:64px minmax(0,1fr);padding:28px 32px}
html[data-cr="c1b"] .gc::before{left:32px;top:28px;width:64px}
html[data-cr="c1b"] .gc::after{content:none}
html[data-cr="c1b"] .gauge__row.in .cup .fill{height:84%}
html[data-cr="c1b"] .cup .t{font-size:10px;padding-right:6px}
html[data-cr="c1b"] .cup .t:nth-of-type(1){visibility:hidden}
html[data-cr="c1b"] .gc h3{margin-top:12px!important}
@media (max-width:900px){html[data-cr="c1b"] .gc{grid-template-columns:56px minmax(0,1fr);padding:24px 20px}html[data-cr="c1b"] .cup{width:56px;height:160px}html[data-cr="c1b"] .gc::before{left:20px;top:24px;width:56px}}
html[data-cr="c1b"] .gauge__row .cup{width:64px!important;height:176px!important}@media (max-width:900px){html[data-cr="c1b"] .gauge__row .cup{width:56px!important;height:160px!important}}

/* ---------- c1c ピペットから一滴ずつ：管の上にピペット。観点の色の雫が落ち続け、液が下からたまっていく。管の下に床の影 ---------- */
html[data-cr="c1c"] .gc{padding-top:118px}
html[data-cr="c1c"] .gc::before{content:"";position:absolute;left:31px;top:0;width:30px;height:104px;z-index:2;
  background:
    radial-gradient(circle at 50% 16px,color-mix(in srgb,var(--col) 65%,#000) 0 14px,transparent 14.5px),
    linear-gradient(90deg,transparent 10px,rgba(20,30,24,.3) 10px 11.5px,rgba(255,255,255,.95) 11.5px 18.5px,rgba(20,30,24,.3) 18.5px 20px,transparent 20px) 0 28px/30px 60px no-repeat,
    linear-gradient(90deg,transparent 12.5px,rgba(20,30,24,.3) 12.5px 13.5px,rgba(255,255,255,.95) 13.5px 16.5px,rgba(20,30,24,.3) 16.5px 17.5px,transparent 17.5px) 0 88px/30px 16px no-repeat}
html[data-cr="c1c"] .gc::after{content:"";position:absolute;left:41px;top:100px;width:10px;height:13px;border-radius:50% 50% 50% 50%/62% 62% 40% 40%;background:var(--col);opacity:0;z-index:1}
html[data-cr="c1c"] .gauge__row.in .gc::after{animation:c1cDrop 1.6s cubic-bezier(.55,0,1,.6) infinite;animation-delay:calc(var(--i,0) * .3s)}
html[data-cr="c1c"] .gc:nth-child(1){--i:0}html[data-cr="c1c"] .gc:nth-child(2){--i:1}html[data-cr="c1c"] .gc:nth-child(3){--i:2}html[data-cr="c1c"] .gc:nth-child(4){--i:3}
@keyframes c1cDrop{0%{transform:translateY(0) scale(.4);opacity:0}12%{transform:translateY(0) scale(1);opacity:1}70%{transform:translateY(64px);opacity:1}76%,100%{transform:translateY(70px) scaleX(1.6) scaleY(.2);opacity:0}}
html[data-cr="c1c"] .cup{margin-left:0}
html[data-cr="c1c"] .cup .fill{transition:height 5s cubic-bezier(.25,.6,.3,1)}
html[data-cr="c1c"] .gauge__row.in .cup .fill{height:78%}
html[data-cr="c1c"] .cup+h3{position:relative}
html[data-cr="c1c"] .gc .cup+h3::after{content:"";position:absolute;left:-4px;top:-46px;width:100px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,30,24,.18),transparent)}
html.static .gc::after{display:none}
@media (max-width:900px){
  html[data-cr="c1c"] .gc{padding-top:100px}
  html[data-cr="c1c"] .gauge__row .cup{width:70px;height:220px}
  html[data-cr="c1c"] .gc::before{left:20px;transform:scale(.85);transform-origin:50% 0}
  html[data-cr="c1c"] .gc::after{left:30px;top:84px}
}
@keyframes c1cDrop{0%{transform:translateY(0) scale(.4);opacity:0}12%{transform:translateY(0) scale(1);opacity:1}72%{transform:translateY(80px);opacity:1}78%,100%{transform:translateY(86px) scaleX(1.7) scaleY(.2);opacity:0}}