/* ============================================================
   JWP ポータブルブロック共通 ベース
   準拠: JWPブロック量産 実行プロンプト v1.0 §3
   前提: tokens.css を先に読み込む。外部CDN依存ゼロ（フォント自己ホスト）。
   ============================================================ */

/* ---- 自己ホストフォント（Google Fonts CDN 直リンク禁止）---- */
@font-face{
  font-family:"Shippori Mincho B1 Subset";
  src:url("../font/shippori-b1-600-subset.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Shippori Mincho B1 Subset";
  src:url("../font/shippori-b1-800-subset.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Zen Kaku Gothic New Subset";
  src:url("../font/zenkaku-400-subset.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Zen Kaku Gothic New Subset";
  src:url("../font/zenkaku-500-subset.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Marcellus Subset";
  src:url("../font/marcellus-400-subset.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono Subset";
  src:url("../font/plexmono-400-subset.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono Subset";
  src:url("../font/plexmono-600-subset.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

/* ---- リセット最小 ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body-ja);
  font-weight:400;
  color:var(--sumi);
  background:var(--washi);
  line-height:1.9;
  font-size:16px;
  letter-spacing:.02em;
  font-feature-settings:"palt";
  /* 禁則処理: 行頭の「。、」」等を禁止し、単語の無理な分断を避ける */
  line-break:strict;
  word-break:normal;
  overflow-wrap:break-word;
}
h1,h2,h3{text-wrap:balance}     /* 見出しは行末バランス折返し */
p,li,dd{text-wrap:pretty}        /* 本文は孤立行・不格好な折返しを避ける */
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

/* ---- レイアウト ---- */
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.section{padding:var(--sp-6) 0}
.section--roomy{padding:var(--sp-7) 0}
.measure{max-width:var(--measure)}

/* 本文カラム 3:1（記事＋実測サイドノート） */
.article-grid{display:grid;grid-template-columns:3fr 1fr;gap:clamp(var(--sp-4),4vw,var(--sp-6));align-items:start}
.article-grid .side-note{position:sticky;top:var(--sp-5)}
@media(max-width:860px){
  .article-grid{grid-template-columns:1fr}
  .article-grid .side-note{position:static}
}

/* ---- タイポグラフィ ---- */
h1,h2{font-family:var(--font-display-ja);font-weight:800;letter-spacing:-.02em;line-height:1.4;color:var(--sumi)}
h1{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:600}
h3{font-family:var(--font-body-ja);font-weight:500;font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.6}
p{max-width:var(--measure)}
.eyebrow{
  font-family:var(--font-display-en);
  font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ai);
}
.small{font-size:.85rem}
.data,
.data-table td.num,.data-table th.num{
  font-family:var(--font-data);
  font-feature-settings:"tnum";
  letter-spacing:0;
}

/* ---- 罫線・区切り ---- */
.hr{border:0;border-top:1px solid var(--keisen);margin:var(--sp-6) 0}

/* ---- ヘッダー／フッター（テンプレート部品から展開）---- */
.site-head{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) clamp(20px,4vw,40px);
  border-bottom:1px solid var(--keisen);
  background:color-mix(in srgb,var(--washi) 92%,transparent);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(6px);
}
.brand-mark{
  font-family:var(--font-display-en);font-size:1rem;letter-spacing:.14em;
  text-decoration:none;color:var(--sumi);line-height:1.3;
}
.brand-mark small{display:block;font-family:var(--font-body-ja);font-size:.68rem;letter-spacing:.1em;color:var(--gin)}
.nav-cta{
  font-size:.85rem;font-weight:500;text-decoration:none;
  color:var(--washi);background:var(--ai);
  padding:.65em 1.4em;border-radius:var(--radius);
  white-space:nowrap;
}
.nav-cta:hover{background:var(--sumi)}
.site-foot{
  border-top:1px solid var(--keisen);
  padding:var(--sp-6) 0 var(--sp-5);
  font-size:.85rem;color:var(--sumi);
}
.site-foot nav{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4)}
.site-foot a{text-decoration:none;border-bottom:1px solid var(--keisen)}
.site-foot a:hover{border-bottom-color:var(--shin)}
.site-foot .copyright{color:var(--gin);font-family:var(--font-data);font-size:.72rem}

/* ---- パンくず ---- */
.breadcrumb{font-size:.8rem;color:var(--gin);margin-bottom:var(--sp-4)}
.breadcrumb a{color:var(--gin);text-decoration:none;border-bottom:1px solid var(--keisen)}
.breadcrumb a:hover{color:var(--ai)}

/* ---- 反転（計測室＝ダークセクション）---- */
.inverse{background:var(--sumi);color:var(--washi)}
.inverse h1,.inverse h2,.inverse h3{color:var(--washi)}
.inverse .eyebrow{color:var(--shin)}
.inverse a{color:var(--washi)}
.inverse .hr{border-top-color:color-mix(in srgb,var(--washi) 22%,transparent)}

/* ---- アクセシビリティ ---- */
:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--sumi);color:var(--washi);
  padding:.6em 1.2em;z-index:99;
}
.skip-link:focus{left:0}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}