/* Paradosia Systems ── v7（v6 の設計ルール7つはそのまま。文章も一字も変えていない）
   旧 paradosia.com（判例検索AI）が「シンプルでかっこいい」理由を分解すると、
   足したものではなく持っていないもの ── 落差が1箇所しかない・階調が1段・
   最初の画面に1メッセージしかない ── だった。v6 との差分はその3点だけ。
   ① 文字色を4段（ink/soft/mute/num）→ 2段へ。--soft を --ink に統合し、
      読ませる文は全部同じ黒、添え物は全部 --mute。画面全体の「グレーの霞」を消す
      あわせて --mute を #8B857A → #6E695F へ（紙地に対し 3.5:1 → 5.2:1）
   ② h2 42→32px、h3 26→23px、氏名 36→30px。大きいのは h1 だけにする
      （h1 84 : h2 32 = 2.6倍。v6 は 2.0倍で h2 が h1 と張り合っていた）
   ③ （撤回）最初の1画面を h1 だけにしてボタンを画面下端へ落とす案は 09-05 に外した。
      h1 とボタンの間の空白が画面の高さで決まるため、27インチでは 700px を超えて
      「意図した間」ではなく「抜け」に見えた（竹田さんの指摘）。写真は覗かせない、は据え置き
   ④ 地色を純白へ（右下スイッチで 純白／明るい紙／生成り を切替）
   ⑤ h1 を「英字＋日本語」の1ブロックに。英字が主役、日本語はその真下。
      英字だけ system-ui の 800（旧サイトの h1 と同じ条件。ワードマークとも揃う）
   ⑥ ヒーローの lede は削除。日本語1行だけを英字の下に置く            */

:root{
  /* 地色は3種を切り替えられる（既定＝純白）。罫線と数字のグレーは
     地色の温度に合わせて振らないと、白地の上で黄ばんで見える */
  --paper:#FFFFFF; --panel:#FFFFFF;
  /* 文字色は2段だけ：読ませる文＝--ink、添え物＝--mute。
     --soft は --ink に統合した（参照箇所が多いので変数名だけ残してある） */
  --ink:#141210; --soft:#141210; --mute:#6E695F;
  --line:#E7E5E0; --num:#CFCBC4; --hard:#1D1A16;
  --max:1180px; --pad:clamp(20px,4vw,44px); --col:clamp(150px,17vw,200px);
  --jp:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --mn:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --lt:"Spectral",Georgia,serif;
  /* ワードマークと h1 の英字は、旧 paradosia.com（Tailwind 既定の font-sans）と同じ
     system UI サンセリフ。Mac/iOS=SF Pro、Windows=Segoe UI、Android=Roboto。
     旧サイトも h1 は system-ui の extrabold なので、同じ条件になる。
     Spectral（明朝系の欧文）は本文・ラベル・数字の担当で、そのまま残す   */
  --ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* 差し色：使うのは ①ヒーローのボタン ②IDMAのロゴ ③リンク の3系統だけ */
  --acc:#0F5FB5; --acc-line:#C5D8EE; --on-acc:#FFFFFF;
  /* 余白：通常セクションと、破調用の「倍」 */
  --air:clamp(64px,9vw,116px); --air2:clamp(96px,15vw,196px);
}
/* w＝純白（既定）／ a＝明るい紙／ k＝生成り（v6・v7 の元の地色） */
:root[data-bg="w"]{--paper:#FFFFFF;--line:#E7E5E0;--num:#CFCBC4;--on-acc:#FFFFFF}
:root[data-bg="a"]{--paper:#FDFCF8;--line:#E6E2D9;--num:#D2CCC1;--on-acc:#FDFCF8}
:root[data-bg="k"]{--paper:#FBFAF7;--line:#E5E0D6;--num:#D3CCBE;--on-acc:#FBFAF7}
:root[data-acc="ai"]{  --acc:#123F73; --acc-line:#C6D3E5}
:root[data-acc="logo"]{--acc:#0D6FD8; --acc-line:#BDDBF6}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);
  font-size:15.5px;line-height:1.95;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
a{color:inherit}
a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
p{margin:0}
img{max-width:100%}
h1,h2,h3{margin:0;font-family:var(--mn);font-weight:600}

/* ── ラベル（英語は単語で統一：Work / Product / Profile / Contact）──── */
.lbl{display:flex;align-items:baseline;gap:12px;font-family:var(--lt);
  font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.lbl i{font-style:normal;color:var(--num)}

/* ── 動き：ヒーローの1回と、写真の1回だけ ─────────────────────── */
.js .rise{opacity:0;transform:translateY(16px)}
.js .rise.in{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
.js .strip img{opacity:0;transform:scale(1.05)}
.js .strip.in img{opacity:1;transform:none;transition:opacity 1.1s ease,transform 1.5s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js .rise,.js .strip img{opacity:1;transform:none;transition:none}}

/* ── header ────────────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:16px;min-height:64px}
/* マーク（images/paradosia-logo.svg・余白なし実寸 341.8×287）＋2行の文字ブロック */
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{display:block;height:38px;width:auto;flex:none}
.logo{font-family:var(--ui);font-size:17px;font-weight:700;letter-spacing:0;line-height:1.3}
.kana{font-size:10px;letter-spacing:.2em;color:var(--mute);margin-top:1px}
.bar .ask,.bar .back{margin-inline-start:auto;font-size:13px;letter-spacing:.04em;
  text-decoration:none;color:var(--soft);display:inline-flex;align-items:center;gap:8px}
.bar .ask i,.bar .back i{font-style:normal;font-family:var(--lt);color:var(--mute);
  transition:transform .25s ease}
.bar .ask:hover,.bar .back:hover{color:var(--acc)}
.bar .ask:hover i{transform:translateX(4px);color:var(--acc)}
.bar .back:hover i{transform:translateX(-4px);color:var(--acc)}

/* ── hero：ここが「落差」の本体 ───────────────────────────────── */
.hero{padding-block:clamp(58px,10vw,136px) clamp(46px,8vw,104px)}
.hero .tag{font-family:var(--lt);font-size:11.5px;letter-spacing:.2em;color:var(--mute);
  margin-bottom:clamp(24px,3.4vw,40px)}
/* h1 は「英字＋日本語」で1ブロック。旧 paradosia.com と同じ組み方で、
   向こうは英語128px＋日本語20pxを gap 16px だけで束ねていた。
   離すと英語が壁になるので、ここも同じだけしか空けない。
   日本語は h1 の中に残す（英語だけの見出しにすると検索に何も残らない）。
   英字は文の途中で折れると締まらないので、1文ずつ nowrap にしてある   */
.hero h1 .en{display:block;font-family:var(--ui);font-weight:800;
  font-size:clamp(29px,6.4vw,78px);line-height:1.14;letter-spacing:-.022em}
.hero h1 .en i{font-style:normal;white-space:nowrap}
.hero h1 .jp{display:block;margin-top:clamp(15px,1.9vw,21px);
  font-size:clamp(17px,2.2vw,23px);font-weight:500;line-height:1.62;letter-spacing:.03em}
h1{font-size:clamp(28px,7.4vw,84px);line-height:1.18;letter-spacing:.012em}
.lede{margin-top:clamp(30px,4.2vw,56px);font-size:17.5px;line-height:1.9;
  color:var(--soft);max-width:32em}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4.4vw,50px)}
.btn{font-size:14px;font-weight:500;letter-spacing:.03em;text-decoration:none;padding:14px 30px;
  background:var(--acc);color:var(--on-acc);border:1px solid var(--acc);transition:opacity .2s ease}
.btn:hover{opacity:.85}
.btn.gh{background:transparent;color:var(--ink);border-color:var(--num)}
.btn.gh:hover{border-color:var(--ink);opacity:1}
/* ヒーローを1画面ぶん（100svh − 64px）に引き伸ばしてボタンを下端へ落とす規則は
   09-05 に撤回。ボタンは h1 のすぐ下（.acts の margin-top）に戻した   */

/* ── 現場写真：ヒーロー直下・全幅。白→黒→白の一発の落差 ───────── */
.strip{margin:0;overflow:hidden}
.strip img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0C0C0E}
@media(min-width:760px){.strip img{aspect-ratio:3/1}}
.strip figcaption{max-width:var(--max);margin:0 auto;padding:16px var(--pad) 0;
  font-family:var(--mn);font-size:12.5px;letter-spacing:.06em;color:var(--mute)}

/* ── section frame：区切りは罫線ではなく余白 ──────────────────── */
.sec{padding-block:var(--air)}
.sec.air{padding-block:var(--air2)}
.shead{margin-bottom:clamp(34px,5vw,64px)}
.shead .lbl{margin-bottom:16px}
h2{font-size:clamp(23px,3.4vw,32px);line-height:1.42;letter-spacing:.025em;text-wrap:balance}
.sub{margin-top:18px;color:var(--soft);max-width:34em}
.sub b{font-weight:700}
.shead + .sub{margin-top:0;margin-bottom:clamp(30px,4.2vw,52px);max-width:38em}

/* ── rows：罫線を全廃し、行間を余白で開ける ───────────────────── */
.row{display:grid;grid-template-columns:1fr;gap:14px 40px;margin-top:clamp(44px,6.4vw,80px)}
.row:first-of-type{margin-top:0}
@media(min-width:900px){.row{grid-template-columns:var(--col) 1fr}}
.rmeta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
@media(min-width:900px){.rmeta{display:block}}
.num{font-family:var(--lt);font-size:clamp(30px,4vw,42px);font-weight:400;
  line-height:1;letter-spacing:.02em;color:var(--num)}
.jlbl{font-size:12px;letter-spacing:.1em;color:var(--mute);line-height:1.8}
@media(min-width:900px){.jlbl{margin-top:14px}}
.st{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.1em;color:var(--soft)}
@media(min-width:900px){.st{margin-top:12px}}
.st::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);flex:none}
.st.soft{color:var(--mute)}
.st.soft::before{background:var(--num)}
.row h3{font-size:clamp(18px,2.3vw,23px);line-height:1.56;letter-spacing:.02em;text-wrap:balance}
.row .d{margin-top:15px;font-size:15px;line-height:1.95;color:var(--soft);max-width:37em}
/* 太字の下線は v6 に続き無し。本文が --ink になったぶん、
   太字は「色の差」ではなく「太さの差」だけで立たせる（400 → 700）*/
.row .d b,.also b,.plead b{font-weight:700}
.then{margin-top:15px;font-size:13px;line-height:1.85;color:var(--mute);
  display:flex;gap:12px;flex-wrap:wrap;max-width:37em}
.then span{font-family:var(--mn);font-size:11.5px;letter-spacing:.16em;color:var(--mute);
  flex:none;align-self:flex-start;line-height:2.05}

.also{margin-top:clamp(48px,7vw,88px);color:var(--soft);max-width:42em}

/* 「仕組みにできないこと」：囲み罫を全廃し、余白と字組だけで並べる */
.limits{margin-top:clamp(48px,7vw,88px)}
.limits .h{font-family:var(--lt);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute);margin-bottom:20px}
.limits ul{list-style:none;padding:0;margin:0;display:grid;gap:10px 40px}
@media(min-width:780px){.limits ul{grid-template-columns:repeat(3,1fr)}}
.limits li{font-family:var(--mn);font-size:17px;line-height:1.7;color:var(--ink);letter-spacing:.03em}
.limits .n{margin-top:26px;font-size:14px;color:var(--mute);max-width:42em}

/* ── product：差し色が一番大きく出る唯一の場所 ────────────────── */
.pgrid{display:grid;gap:clamp(26px,4vw,44px)}
@media(min-width:900px){.pgrid{grid-template-columns:1fr 1fr;align-items:end;gap:clamp(36px,5vw,64px)}}
/* 製品ロゴ images/idma-logo.svg。字高は clamp(43px,7.4vw,81px) 相当。
   上限81pxは、従来ここにあった Spectral 120px の cap height と同寸。
   下限は D の水色バー（字高の3.9%）が消える40pxを避けるためのもの。
   width/height 属性は presentational hint として効くので HTML には書かない */
.pname{margin:0;line-height:0}
.pname img{display:block;height:clamp(46px,8vw,87px);width:auto}
.pfull{font-family:var(--lt);font-style:italic;font-size:14px;color:var(--mute);
  letter-spacing:.04em;margin-top:16px}
.plead{color:var(--soft);max-width:34em;margin-top:16px}
.plead:first-child{margin-top:0}
.screen{margin-top:clamp(40px,6vw,72px);border:1px solid var(--hard);background:var(--panel)}
.screen video{display:block;width:100%;aspect-ratio:1106/720;object-fit:cover;background:#000}
.ainote{margin-top:26px;font-size:14px;color:var(--mute);max-width:44em}
.ainote a{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--acc-line)}
.ainote a:hover{border-color:var(--acc)}

/* ── who：顔写真 200px → 380px。囲み罫なし ───────────────────── */
.who{display:grid;gap:clamp(28px,4vw,44px)}
@media(min-width:900px){.who{grid-template-columns:minmax(280px,380px) 1fr;gap:clamp(40px,5.5vw,72px)}}
.face{margin:0;overflow:hidden}
.face img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#EDEAE3}
.nm{font-family:var(--mn);font-size:clamp(22px,3vw,30px);font-weight:600;letter-spacing:.08em;line-height:1.3}
.rom{font-family:var(--lt);font-size:14px;letter-spacing:.1em;color:var(--mute);margin-top:8px}
.role{font-size:12px;letter-spacing:.12em;color:var(--mute);margin-top:18px}
/* 経歴は表なので、罫線を残すのが正しい数少ない場所 */
.cv{list-style:none;padding:0;margin:26px 0 28px;border-top:1px solid var(--hard)}
.cv li{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:14.5px;padding-block:13px;border-bottom:1px solid var(--line)}
.cv li em{font-style:normal;font-family:var(--lt);font-size:13px;color:var(--mute);white-space:nowrap}
.bio{color:var(--soft);max-width:40em}

/* ── contact：ベタ青を廃止。余白を倍にして、メールだけを大きく ──── */
.mail{display:inline-block;font-family:var(--lt);font-size:clamp(24px,6.2vw,64px);
  font-weight:400;line-height:1.15;letter-spacing:.005em;text-decoration:none;color:var(--ink);
  border-bottom:2px solid var(--num);padding-bottom:10px;margin:0 0 clamp(26px,3.4vw,40px);
  word-break:break-all;transition:border-color .25s ease,color .25s ease}
.mail:hover{color:var(--acc);border-bottom-color:var(--acc)}
.say{color:var(--soft);max-width:34em}
.pre{margin-top:clamp(44px,6.4vw,80px)}
.glinks{list-style:none;padding:0;margin:18px 0 0;max-width:38em}
.glinks li{border-bottom:1px solid var(--line)}
.glinks li:first-child{border-top:1px solid var(--line)}
.glinks a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-family:var(--mn);font-size:16px;letter-spacing:.03em;text-decoration:none;padding-block:15px}
.glinks a i{font-style:normal;font-family:var(--lt);color:var(--mute);transition:transform .25s ease}
.glinks a:hover{color:var(--acc)}
.glinks a:hover i{transform:translateX(5px);color:var(--acc)}

/* ── guide page ───────────────────────────────────────────────── */
.ghero{padding-block:clamp(56px,9vw,124px) clamp(40px,6vw,80px)}
.ghero h1{font-size:clamp(30px,6.4vw,72px)}
.jump{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:clamp(30px,4vw,46px)}
.jump a{font-size:13.5px;letter-spacing:.04em;text-decoration:none;color:var(--soft);
  border-bottom:1px solid var(--num);padding-bottom:5px;transition:color .2s,border-color .2s}
.jump a:hover{color:var(--acc);border-color:var(--acc)}

.trio{display:grid;gap:clamp(28px,4vw,44px)}
@media(min-width:820px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio h3{font-size:18px;letter-spacing:.04em;margin-bottom:12px}
.trio p{font-size:14.5px;color:var(--soft)}
.trio p b{font-weight:700}

.pull{margin-top:clamp(44px,6vw,76px);font-family:var(--mn);
  font-size:clamp(17px,2.4vw,23px);line-height:1.8;letter-spacing:.03em;
  color:var(--ink);max-width:32em;text-wrap:balance}

.steps{margin-top:0}
.steps > div{display:grid;grid-template-columns:1fr;gap:8px 40px;margin-top:clamp(34px,5vw,56px)}
.steps > div:first-child{margin-top:0}
@media(min-width:900px){.steps > div{grid-template-columns:var(--col) 1fr}}
.steps h3{font-size:19px;letter-spacing:.04em;margin-bottom:8px}
.steps p{font-size:14.5px;color:var(--soft);max-width:38em}
.tail{margin-top:clamp(40px,5.5vw,68px);font-size:14px;color:var(--mute);max-width:42em}

.duo{display:grid;gap:clamp(30px,4.4vw,56px)}
@media(min-width:820px){.duo{grid-template-columns:1fr 1fr}}
.duo h3{font-family:var(--lt);font-size:11.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;margin-bottom:18px}
.duo .ok h3{color:var(--acc)}
.duo .ng h3{color:var(--mute)}
.duo ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.duo li{font-size:14.8px;line-height:1.85;color:var(--mute)}
.duo .ok li{color:var(--ink)}

/* ── footer ───────────────────────────────────────────────────── */
.foot{padding-block:clamp(48px,7vw,88px) clamp(36px,5vw,56px);border-top:1px solid var(--line)}
.foot .note{margin-top:26px;font-size:13.5px;color:var(--mute);max-width:42em;line-height:2.05}
.foot .note i{font-family:var(--lt);font-style:italic;font-size:16px;color:var(--acc)}
.foot .c{margin-top:32px;font-family:var(--lt);font-size:12px;letter-spacing:.14em;color:var(--mute)}

/* ── 比較用パレット切替（採用時に削除）─────────────────────────── */
.swatch{position:fixed;right:14px;bottom:14px;z-index:9;display:flex;align-items:center;gap:8px;
  background:rgba(20,18,16,.9);padding:8px 10px}
.swatch button{width:20px;height:20px;border:1px solid rgba(255,255,255,.35);padding:0;cursor:pointer}
.swatch hr{width:1px;height:18px;margin:0 2px;border:0;background:rgba(255,255,255,.3)}
.swatch button[aria-pressed="true"]{outline:2px solid #fff;outline-offset:2px}