/* SIVIA Slope（図面 02）だけの配置。1画面目・機能・画面・注記は level.css の部品を使う。色は sivia-tokens.css の変数のみ。 */
.lv-hero h1 .num{font-family:var(--en);font-weight:600;letter-spacing:.04em;color:var(--sivia-red)}

/* 大見出し SLOPE: 文字の中に網点の水（Slope の色調）。水面は −8° を中心にゆっくり揺れる */
.slope-mega{display:block;width:clamp(240px,40vw,560px);height:auto;margin:var(--s-2) 0 var(--s-1);overflow:visible}
.slope-mega .sl-text{font-family:var(--en);font-weight:600;font-size:236px;letter-spacing:.02em}
.slope-mega .sl-mask-text{fill:var(--sivia-paper)}
.slope-mega .sl-air{fill:var(--sivia-slope-sky)}
.slope-mega pattern circle{fill:var(--sivia-slope-water)}
.slope-mega .sl-surface{stroke:var(--sivia-slope-deep);stroke-width:2.5}
.slope-mega .sl-outline{fill:none;stroke:var(--sivia-slope-deep);stroke-width:1.4}
.slope-mega .sl-water{transform-box:view-box;transform-origin:280px 116px;transform:rotate(-8deg);animation:sl-tilt 7s var(--ease) infinite alternate}
@keyframes sl-tilt{from{transform:rotate(-10deg)}to{transform:rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){.slope-mega .sl-water{animation:none;transform:rotate(-8deg)}}

/* ── 触れる勾配計 ── */
.slopegauge{grid-column:5/-1;min-width:0;display:grid;row-gap:var(--s-3)}
.sg-stage{position:relative;padding:var(--s-2);aspect-ratio:4/3;background:var(--sivia-paper)}
.sg-canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.sg-canvas:active{cursor:grabbing}
.sg-read{position:absolute;left:0;right:0;bottom:var(--s-4);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.sg-label{font-size:14px;color:var(--sivia-neutral-700)}
.sg-num{pointer-events:auto;border:0;background:transparent;cursor:pointer;padding:0 var(--s-1);position:relative;
  font-family:var(--en);font-weight:600;font-size:56px;line-height:1.1;letter-spacing:.02em;color:var(--sivia-ink);
  font-variant-numeric:tabular-nums;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
/* 切りのいい値: 数字の下に深赤の印 */
.sg-num::after{content:"";position:absolute;left:50%;bottom:-6px;width:32px;height:3px;margin-left:-16px;background:var(--sivia-red);
  transform:scaleX(0);transition:transform var(--dur-s) var(--ease)}
.sg-num.is-round::after{transform:scaleX(1)}
.sg-hold{min-height:20px;font-size:14px;color:var(--sivia-terracotta-text)}
.slopegauge.is-hold .sg-stage{outline:2px solid var(--sivia-terracotta);outline-offset:-2px}
.slopegauge.is-hold .sg-num{color:var(--sivia-terracotta-text)}
.sg-ctrl{display:grid;grid-template-columns:auto 1fr 80px;align-items:center;column-gap:var(--s-2)}
.sg-ctrl input{width:100%;accent-color:var(--sivia-red)}
.sg-deg{font-family:var(--en);font-weight:600;font-size:20px;text-align:right;color:var(--sivia-brown)}
.sg-presets{display:flex;flex-wrap:wrap;gap:var(--s-1)}

/* 画面 5 枚 */
.screens.screens-5{grid-template-columns:repeat(5,minmax(0,1fr))}

@media (max-width:1180px){.slopegauge{grid-column:4/-1}}
@media (max-width:900px){
  .slopegauge{grid-column:1/-1}
  .sg-stage{aspect-ratio:4/5}
  .sg-num{font-size:44px}
  .screens.screens-5{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 横向きの端末（右の長辺が下）: Slope は端末を横に立てて使うので、画面と録画を時計回り 90° で見せる（2026-10-03） */
.lv-phone.land{grid-column:7/13;grid-template-columns:1fr;row-gap:var(--s-1);align-self:center}
.lv-phone.land .phone-frame img,.lv-phone.land .phone-frame video{aspect-ratio:1392/640}
/* 1 画面目の録画（2026-10-05）: 縦→45°→横に置いて LEVEL→縦、と端末が回るので正方形の枠。水面はいつも水平 */
.lv-phone.tilt{grid-column:7/13;grid-template-columns:1fr;row-gap:var(--s-1);align-self:center;width:100%;max-width:520px;justify-self:center}
.lv-phone.tilt .phone-frame video{aspect-ratio:1/1}
.screens.screens-land{grid-template-columns:repeat(2,minmax(0,1fr))}
.screens.screens-land li:nth-child(even){margin-top:0}
.screens.screens-land li:last-child{grid-column:1/-1;max-width:calc(50% - var(--gap) / 2)}
/* DETAIL A〜E（2026-10-06）: 正方形の画像を 3 列（2 段目は 2 枚） */
.screens.screens-tilt{grid-template-columns:repeat(3,minmax(0,1fr))}
.screens.screens-tilt li:nth-child(even){margin-top:0}
@media (max-width:900px){
  .lv-phone.land,.lv-phone.tilt{grid-column:1/-1}
  .screens.screens-tilt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .screens.screens-land{grid-template-columns:1fr}
  .screens.screens-land li:last-child{max-width:none}
}
.theme-slope .lv-hero-text{grid-column:1/7}
@media (max-width:900px){.theme-slope .lv-hero-text{grid-column:auto}}
@media (max-width:560px){.screens.screens-tilt{grid-template-columns:1fr}}   /* スマホは 1 列（2 列だと画面の数字が読めない） 。900px の 2 列より後に置く */