/* SIVIA サイト共通（図面一式）。色は sivia-tokens.css の変数だけを使う（直書きしない）。
   規約: 14_constra/SIVIA-design.md、設計: 14_constra/docs/specs/2026-10-03-constra-website-design.md
   文字 14/16/20/24/32/44/88px（ヒーローの大見出しのみ clamp）、太さ 400/500/600。余白は 8 の倍数。
   動きは 短 240ms・長 900ms、曲線は1種類。prefers-reduced-motion で全停止。 */
:root{color-scheme:light;
  --margin:48px;--gap:24px;
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:48px;--s-6:64px;--s-7:96px;--s-8:160px;
  --section:var(--s-8);
  --jp:"Takasaka Gothic","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --en:"Barlow Condensed","Takasaka Gothic",sans-serif;
  --body:"Barlow","Takasaka Gothic","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --dur-s:240ms;--dur-l:900ms;--ease:cubic-bezier(.2,.7,.1,1);
  --line:var(--sivia-ink);--line-2:var(--sivia-neutral-400);--line-3:var(--sivia-neutral-300);
  --frame:12px}
/* Slope のページ: 主色の深赤を Slope の青緑に置き換える（SIVIA-design.md の --sivia-slope-*） */
.theme-slope{--sivia-red:var(--sivia-slope-water);--sivia-red-600:var(--sivia-slope-water);
  --sivia-red-700:var(--sivia-slope-deep);--sivia-red-100:var(--sivia-slope-sky)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background-color:var(--sivia-paper);color:var(--sivia-ink);
  font-family:var(--body);font-size:16px;font-weight:400;line-height:1.9;letter-spacing:.02em;
  font-feature-settings:"palt" 0;text-rendering:optimizeLegibility;
  /* 方眼（40px 角）。硬い境目の線なので色の階調ではない */
  background-image:
    linear-gradient(var(--sivia-paper-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--sivia-paper-2) 1px,transparent 1px);
  background-size:40px 40px;background-position:-1px -1px}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:var(--sivia-red);text-underline-offset:.25em;text-decoration-thickness:1px}
a:hover{color:var(--sivia-red-700)}
:focus-visible{outline:2px solid var(--sivia-terracotta-text);outline-offset:3px}
::selection{background:var(--sivia-red-100);color:var(--sivia-ink)}
.num,.tab{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s-3);top:-64px;z-index:20;padding:var(--s-1) var(--s-2);
  background:var(--sivia-ink);color:var(--sivia-paper)}
.skip:focus{top:var(--s-3);color:var(--sivia-paper)}

/* ── グリッド ───────────────────────── */
.grid{max-width:1360px;margin:0 auto;padding:0 calc(var(--margin) + var(--frame));display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.full{grid-column:1/-1}

/* ── 書体の役割 ─────────────────────── */
.hd{font-family:var(--en);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.label{margin:0;font-family:var(--en);font-weight:600;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sivia-brown)}
.label .no{color:var(--sivia-red)}
/* 和文は文節で折り返す（「を、」が行頭に来ないように） */
h1,h2,h3,p,li,dd,td,.desc,figcaption{word-break:auto-phrase;line-break:strict;text-wrap:pretty}
h1,h2,h3{font-family:var(--jp);font-weight:500;margin:0;line-height:1.4;letter-spacing:.04em}
.lead{font-family:var(--jp);font-size:20px;line-height:2;color:var(--sivia-brown);margin:0}
p{margin:0}

/* ── 用紙の枠（画面に固定）＋四隅のトンボ ───── */
.paper-frame{position:fixed;inset:var(--frame);z-index:10;pointer-events:none;border:1px solid var(--line-2)}
.corner{position:absolute;width:13px;height:13px;pointer-events:none;color:var(--sivia-red)}
.corner::before,.corner::after{content:"";position:absolute;background:currentColor}
.corner::before{left:6px;top:0;width:1px;height:100%}
.corner::after{top:6px;left:0;width:100%;height:1px}
.corner.tl{top:-7px;left:-7px}.corner.tr{top:-7px;right:-7px}
.corner.bl{bottom:-7px;left:-7px}.corner.br{bottom:-7px;right:-7px}

/* ── ヘッダー ───────────────────────── */
.site-head{position:relative;z-index:11;padding-top:calc(var(--frame) + var(--s-3));padding-bottom:var(--s-3);align-items:center}
.brand{grid-column:1/5;display:inline-flex;align-items:center;gap:var(--s-2);text-decoration:none;color:var(--sivia-red)}
.brand img{width:94px}  /* SIVIA のワードマークは縦横 3.48:1。高さを CONSTRA 版（27px）とそろえる */
.brand .sheet-no{font-family:var(--en);font-weight:600;font-size:14px;letter-spacing:.12em;color:var(--sivia-brown);
  padding-left:var(--s-2);border-left:1px solid var(--line-2)}
.site-nav{grid-column:5/-1;justify-self:end;display:flex;gap:var(--s-3)}
.site-nav a{font-family:var(--en);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--sivia-ink);padding:var(--s-1) 0;position:relative}
.site-nav a .no{color:var(--sivia-neutral-600);margin-right:6px}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--sivia-red);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-s) var(--ease)}
.site-nav a:hover::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{color:var(--sivia-red)}

/* ── 節の見出し（図面の区画ラベル） ──────────── */
.sec{padding-top:var(--section);position:relative}
.sec-head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);
  align-items:end;padding-bottom:var(--s-3);margin-bottom:var(--s-5);border-bottom:1px solid var(--line)}
.sec-head .label{grid-column:1/4}
.sec-head h2{grid-column:4/-1;font-size:32px}

/* ── 図枠（二重罫＋トンボ） ───────────────── */
.sheet{position:relative;border:1px solid var(--line);background:var(--sivia-paper)}
.sheet::before{content:"";position:absolute;inset:6px;border:.5px solid var(--line-2);pointer-events:none}

/* ── 寸法線 ─────────────────────────── */
.dim{position:relative;display:flex;justify-content:center;align-items:center;height:20px;color:var(--sivia-red)}
.dim::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;
  transform-origin:center;transition:transform var(--dur-l) var(--ease)}
.dim::after{content:"";position:absolute;inset:2px 0;border-left:1px solid currentColor;border-right:1px solid currentColor}
.dim span{position:relative;padding:0 var(--s-1);background:var(--sivia-paper);font-family:var(--en);font-weight:600;
  font-size:14px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--sivia-red-700)}
.dim.v{flex-direction:column;width:20px;height:auto}
.dim.v::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}
.dim.v::after{inset:0 2px;border:0;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.dim.v span{writing-mode:vertical-rl;padding:var(--s-1) 0}

/* ── 図面目録 ───────────────────────── */
.index{grid-column:1/-1;list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.index-row{position:relative;border-bottom:1px solid var(--line)}
.index-row>a,.index-row>div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);
  align-items:center;padding:var(--s-4) 0;text-decoration:none;color:var(--sivia-ink);position:relative}
.index-row .no{grid-column:1/3;font-family:var(--en);font-weight:600;font-size:88px;line-height:.9;letter-spacing:.02em;
  color:var(--sivia-red);font-variant-numeric:tabular-nums}
.index-row .name{grid-column:3/7;font-family:var(--en);font-weight:600;font-size:44px;line-height:1;letter-spacing:.06em;text-transform:uppercase}
.index-row .desc{grid-column:7/11;font-family:var(--jp);color:var(--sivia-brown)}
.index-row .state{grid-column:11/13;justify-self:end;font-family:var(--en);font-weight:600;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sivia-brown);display:flex;align-items:center;gap:var(--s-1)}
.index-row .state .arrow{display:inline-block;width:32px;height:1px;background:currentColor;position:relative;
  transition:width var(--dur-s) var(--ease)}
.index-row .state .arrow::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.index-row>div .name,.index-row>div .no{color:var(--sivia-neutral-600)}
/* ホバー: 地が沈み、名前の下に寸法線が引かれ、見本が右から出る */
.index-row>a::before{content:"";position:absolute;inset:0 calc(-1 * var(--s-2));background:var(--sivia-paper-2);
  opacity:0;transition:opacity var(--dur-s) var(--ease);z-index:-1}
.index-row .name-dim{position:absolute;left:0;right:0;bottom:-28px;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-s) var(--ease)}
.index-row .namebox{grid-column:3/7;position:relative}
.index-row .namebox .name{display:block}
.index-row .peek{position:absolute;right:16%;top:50%;width:132px;transform:translateY(-50%);pointer-events:none;
  clip-path:inset(0 0 100% 0);transition:clip-path var(--dur-s) var(--ease);border:1px solid var(--line);
  background:var(--sivia-paper);padding:4px;z-index:2}
.index-row>a:hover::before,.index-row>a:focus-visible::before{opacity:1}
.index-row>a:hover .name-dim,.index-row>a:focus-visible .name-dim{transform:scaleX(1)}
.index-row>a:hover .peek,.index-row>a:focus-visible .peek{clip-path:inset(0 0 0 0)}
.index-row>a:hover .arrow,.index-row>a:focus-visible .arrow{width:56px}
.index-row>a:hover .state,.index-row>a:focus-visible .state{color:var(--sivia-red)}

/* ── 注記 GENERAL NOTES ─────────────────── */
.notes{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--gap);counter-reset:n}
.notes>li{counter-increment:n;position:relative;padding:var(--s-4) var(--s-3) var(--s-3);border-left:1px solid var(--line)}
.notes>li:last-child{border-right:1px solid var(--line)}
.notes>li::before{content:counter(n) ".";display:block;font-family:var(--en);font-weight:600;font-size:44px;line-height:1;
  color:var(--sivia-red);margin-bottom:var(--s-3);font-variant-numeric:tabular-nums}
.notes h3{font-size:24px;margin-bottom:var(--s-2)}
.notes p{color:var(--sivia-brown)}
.notes figure{margin:0 0 var(--s-3);border:1px solid var(--line-2)}
.notes figure img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ── 仕様欄（表） ───────────────────── */
.spec{width:100%;border-collapse:collapse;font-size:16px}
.spec th,.spec td{text-align:left;padding:var(--s-2) 0;border-bottom:1px solid var(--line-3);vertical-align:top}
.spec th{width:34%;font-family:var(--en);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--sivia-brown)}
.spec tr:first-child th,.spec tr:first-child td{border-top:1px solid var(--line)}

/* ── ボタン ─────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:var(--s-1);min-height:44px;padding:0 var(--s-3);border:1px solid var(--sivia-red);
  background:transparent;color:var(--sivia-red);font-family:var(--en);font-weight:600;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:0;transition:background var(--dur-s) var(--ease),color var(--dur-s) var(--ease)}
.btn:hover{background:var(--sivia-red);color:var(--sivia-paper)}
.btn.ghost{border-color:var(--line-2);color:var(--sivia-ink)}
.btn.ghost:hover{background:var(--sivia-paper-2);color:var(--sivia-ink)}
.status{display:inline-flex;align-items:center;gap:var(--s-1);font-family:var(--en);font-weight:600;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sivia-red)}
.status::before{content:"";width:8px;height:8px;background:var(--sivia-terracotta)}

/* ── 表題欄（フッター） ──────────────── */
.site-foot{padding-top:var(--section);padding-bottom:calc(var(--frame) + var(--s-5))}
.titleblock{grid-column:1/-1;display:grid;grid-template-columns:3fr 3fr 2fr 2fr 2fr;border:1px solid var(--line);position:relative}
.titleblock::before{content:"";position:absolute;inset:4px;border:.5px solid var(--line-2);pointer-events:none}
.tb-cell{padding:var(--s-2) var(--s-3);border-right:1px solid var(--line-2);min-width:0}
.tb-cell:last-child{border-right:0}
.tb-cell .k{display:block;font-family:var(--en);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--sivia-neutral-700)}
.tb-cell .v{display:block;font-family:var(--jp);font-size:16px;margin-top:4px}
.tb-cell .v.big{font-family:var(--en);font-weight:600;font-size:32px;line-height:1.1;color:var(--sivia-red);font-variant-numeric:tabular-nums}
.tb-nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);padding-top:var(--s-3);font-size:14px}
.tb-nav a{color:var(--sivia-ink)}
.copy{grid-column:1/-1;margin-top:var(--s-2);font-size:14px;color:var(--sivia-neutral-700)}

/* ── 標尺目盛（スクロール位置を読む） ─────────── */
.staff{position:fixed;z-index:12;right:calc(var(--frame) + 14px);top:22vh;height:56vh;width:14px;pointer-events:none;
  border:1px solid var(--line);background-color:var(--sivia-paper);
  /* E 字の目盛: 10 目盛ごとに深赤の帯（硬い境目の線） */
  background-image:repeating-linear-gradient(to bottom,var(--sivia-red) 0 5px,transparent 5px 10px);
  background-size:7px 100%;background-repeat:no-repeat}
.staff-ptr{position:absolute;left:-18px;right:-6px;top:0;height:1px;background:var(--sivia-terracotta);
  transform:translateY(var(--y,0px))}
.staff-read{position:absolute;right:22px;top:0;transform:translateY(calc(var(--y,0px) - 50%));
  font-family:var(--en);font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--sivia-terracotta-text);
  font-variant-numeric:tabular-nums;background:var(--sivia-paper);padding:0 4px;white-space:nowrap}

/* ── 描く動き（JS が html.js を付けたときだけ隠す。JS 無しでは最終状態） ── */
html.js .draw .ln{transform:scaleX(0);transform-origin:left;transition:transform var(--dur-l) var(--ease)}
html.js .draw .ln.y{transform:scaleY(0);transform-origin:top}
html.js .draw .dim::before{transform:scaleX(0);transition-delay:var(--dur-s)}
html.js .draw .ct{opacity:0;transform:translateY(16px);transition:opacity var(--dur-l) var(--ease),transform var(--dur-l) var(--ease);transition-delay:calc(var(--dur-s) * 2)}
html.js .draw svg .path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) var(--dur-s)}
html.js .draw.is-in .ln{transform:none}
html.js .draw.is-in .dim::before{transform:none}
html.js .draw.is-in .ct{opacity:1;transform:none}
html.js .draw.is-in svg .path{stroke-dashoffset:0}
.ct.d1{transition-delay:calc(var(--dur-s) * 3)!important}
.ct.d2{transition-delay:calc(var(--dur-s) * 4)!important}
.ct.d3{transition-delay:calc(var(--dur-s) * 5)!important}
/* 1画面目は待たせない: 遅れは 0〜240ms、JS が無い（html.js なし）ときのボタンは隠す */
html.js .cover .ct,html.js .lv-hero .ct{transition-duration:var(--dur-s),var(--dur-l);transition-delay:0ms!important}
html.js .cover .ct.d1,html.js .lv-hero .ct.d1{transition-delay:80ms!important}
html.js .cover .ct.d2,html.js .lv-hero .ct.d2{transition-delay:160ms!important}
html.js .cover .ct.d3,html.js .lv-hero .ct.d3{transition-delay:240ms!important}
html:not(.js) .fb-tools{display:none}

/* 初回だけ: 用紙の枠が引かれる */
html.is-intro .paper-frame{animation:frame-in var(--dur-l) var(--ease) both}
html.is-intro .paper-frame .corner{animation:fade-in var(--dur-s) var(--ease) var(--dur-l) both}
@keyframes frame-in{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* ページの移動: 新しい図面が右から重なる（めくる） */
@view-transition{navigation:auto}
::view-transition-old(root){animation:sheet-out var(--dur-l) var(--ease) both}
::view-transition-new(root){animation:sheet-in var(--dur-l) var(--ease) both}
@keyframes sheet-out{to{transform:translateX(-6%);opacity:.4}}
@keyframes sheet-in{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}

/* ── 下層ページ（サポート・プライバシー） ─────── */
.doc{padding-top:var(--s-6)}
.doc-body{grid-column:4/11}
.doc-body h1{font-size:44px;margin-bottom:var(--s-3)}
.doc-body h2{font-size:24px;margin:var(--s-6) 0 var(--s-2);padding-top:var(--s-3);border-top:1px solid var(--line)}
.doc-body p,.doc-body li{color:var(--sivia-ink)}
.doc-body p+p{margin-top:var(--s-2)}
.doc-body ul{padding-left:1.2em;margin:var(--s-2) 0 0}
.doc-side{grid-column:1/4}
.meta{font-size:14px;color:var(--sivia-neutral-700)}

/* ── 幅ごとの調整 ───────────────────── */
@media (max-width:1180px){:root{--margin:32px;--gap:16px;--section:var(--s-7)}
  .index-row .no{font-size:64px}.index-row .name{font-size:32px}}
@media (max-width:900px){
  :root{--margin:24px;--frame:8px}
  .brand{grid-column:1/-1}
  .site-nav{grid-column:1/-1;justify-self:start;gap:var(--s-2);flex-wrap:wrap;row-gap:var(--s-1);margin-top:var(--s-2);padding-top:var(--s-1);border-top:1px solid var(--line-3);width:100%}
  /* 2026-10-09 ナビが 5 項目（04 Laser を追加）になり、320px では 1 行に収まらないので折り返す */
  .sec-head .label,.sec-head h2{grid-column:1/-1}
  .sec-head h2{font-size:24px;margin-top:var(--s-1)}
  .index-row>a,.index-row>div{row-gap:var(--s-1)}
  .index-row .no{grid-column:1/4}.index-row .namebox,.index-row>div .name{grid-column:4/-1}
  .index-row .desc{grid-column:4/-1}.index-row .state{grid-column:4/-1;justify-self:start}
  .index-row .peek{display:none}
  .notes{grid-template-columns:1fr}
  .notes>li{border-right:1px solid var(--line);border-top:1px solid var(--line)}
  .notes>li:last-child{border-bottom:1px solid var(--line)}
  .titleblock{grid-template-columns:1fr 1fr}
  .tb-cell{border-bottom:1px solid var(--line-2)}
  .tb-cell:nth-child(2n){border-right:0}
  .doc-body,.doc-side{grid-column:1/-1}
  .doc-body h1{font-size:32px}
  /* スマホ: 標尺は下端の細い目盛にする */
  .staff{top:auto;bottom:var(--frame);left:var(--frame);right:var(--frame);height:6px;width:auto;border:0;border-top:1px solid var(--line);
    background-image:repeating-linear-gradient(to right,var(--sivia-red) 0 5px,transparent 5px 10px);background-size:100% 3px}
  .staff-ptr{left:0;right:auto;top:-4px;width:1px;height:10px;transform:translateX(var(--x,0px))}
  .staff-read{right:0;left:auto;top:-28px;transform:none;font-size:14px}
}
@media (max-width:560px){:root{--margin:16px;--gap:12px;--section:var(--s-6);--frame:6px}
  .lead{font-size:16px}
  .index-row .no{font-size:44px}.index-row .name{font-size:24px}
  .tb-cell:first-child{grid-column:1/-1;border-right:0}
  .tb-cell:nth-child(2n){border-right:1px solid var(--line-2)}
  .tb-cell:nth-child(2n+1):not(:first-child){border-right:0}
  .brand img{width:77px}
}

/* ── 動きを減らす設定: 全部止めて最終状態 ─────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.js .draw .ln,html.js .draw .dim::before,html.js .draw .ct{transform:none;opacity:1}
  html.js .draw svg .path{stroke-dashoffset:0}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
/* サポートページの連絡先 */
.doc-body address.contact{font-style:normal;margin-top:var(--s-2);padding:var(--s-2) var(--s-3);border-left:1px solid var(--line);line-height:2}
/* 画面の外の節は、見えるまでレイアウトと描画を後回しにする（見た目は変わらない。表示速度の対策 2026-10-03） */
@supports (content-visibility:auto){
  main>.sec{content-visibility:auto;contain-intrinsic-size:auto 1200px}
}
/* 画面録画の一時停止／再生ボタン（動画の右下） */
.phone-frame{position:relative}
.vid-toggle{position:absolute;right:var(--s-3);bottom:var(--s-3);min-height:32px;padding:0 var(--s-2);border:1px solid var(--line);
  background:var(--sivia-paper);color:var(--sivia-ink);font-size:14px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:0}
.vid-toggle:hover{background:var(--sivia-red);color:var(--sivia-paper);border-color:var(--sivia-red)}
/* 印刷: 描く前の状態にせず、全部の節を出す。画面に固定の飾りは隠す */
@media print{
  html.js .draw .ln,html.js .draw .dim::before,html.js .draw .ct{transform:none!important;opacity:1!important}
  html.js .draw svg .path{stroke-dashoffset:0!important}
  main>.sec{content-visibility:visible}
  .paper-frame,.staff,.skip,.vid-toggle,.film-play{display:none!important}
}