/* INTEPRAL preview 2026-09-27：トップ（ヒーロー以下）と下層ページの共通部品
   top.css → overrides.css → site.css の順に読む。新しい部品はすべて p- 接頭辞（top.css の t- と衝突させない）
   文字の最大：英字の大見出し96px／和文の大見出し52px／本文15px（髙橋さん「全部文字がデカすぎる」2回）
   余白：セクションは --sec（最大104px）。1画面に1文だけの全画面演出は作らない（「無駄スペースも多すぎる」） */

/* ---------- ヘッダー：本番 intepral.com の header.top と同じ作り（2026-09-28 髙橋さん「本番のやつの方がいい」🎨Iris）
   ・画面の端から浮いた角丸のバー（PCは丸いピル、1120px以下は角丸22px）・高さ64px
   ・ナビは英字→日本語が立方体のように回る（本番 nav.css の実値）。事業内容にだけドロップダウン
   ・位置は本番の sticky ではなく fixed（ヒーローの動画の上に重ねるため）。data-tone で紫・濃紺の面に入ると色が変わる仕組みは残す
   ・文字の大きさは rem ではなく px で持つ（--hf）。top.css の html の文字サイズに引っぱられないように */
.t-head{--hf:17.6px;--hh:64px;position:fixed;top:clamp(10px,1.4vw,18px);left:clamp(12px,2.4vw,28px);right:clamp(12px,2.4vw,28px);z-index:50;height:var(--hh);
  border:0;border-radius:999px;background:rgba(85,70,168,.95);backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px);
  box-shadow:0 6px 28px rgba(14,23,48,.18);color:#fff;transition:background .3s ease,color .3s ease}
/* ロゴのPと縦棒：紫のバーの上では白寄りの薄紫、白いバーの上では紫（2026-09-28 髙橋さん） */
.t-head .t-brand span{color:#DCD8F4}
.t-head-in{height:100%;display:flex;align-items:center;gap:32px;margin:0 clamp(20px,3.6vw,52px)}
.t-head .t-brand{flex:0 0 auto;font:700 var(--hf)/1 var(--logo);font-stretch:100%;letter-spacing:.16em;color:inherit;white-space:nowrap}
.t-head a{text-decoration:none}
.t-nav{margin-left:auto;display:flex;align-items:stretch;align-self:stretch;gap:clamp(10px,1.4vw,22px);font:inherit}
.p-ni{position:relative;display:flex;align-items:center;height:100%;perspective:760px}
.p-ni>a{display:block;color:rgba(255,255,255,.9);white-space:nowrap;transition:color .2s ease}
/* 立方体を1面ぶん転がして次の面を出す。面には当たり判定を持たせない（回した面が隣の項目を覆って操作を奪う） */
.p-cube{--ch:calc(var(--hf)*2);position:relative;display:grid;transform-style:preserve-3d;transition:transform .46s cubic-bezier(.62,0,.22,1);pointer-events:none}
.p-cube>span{grid-area:1/1;display:flex;align-items:center;justify-content:center;height:var(--ch);padding:0 .95em;white-space:nowrap;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none}
.p-fe{font:600 calc(var(--hf)*.66)/1 var(--logo);letter-spacing:.18em;color:rgba(255,255,255,.9);transform:translateZ(calc(var(--ch)/2));transition:color .2s ease}
.p-fj{font:600 calc(var(--hf)*.78)/1 var(--jp);letter-spacing:.08em;color:var(--violet);background:#fff;transform:rotateX(90deg) translateZ(calc(var(--ch)/2))}
.p-ni:hover .p-cube,.p-ni:focus-within .p-cube{transform:rotateX(-90deg)}
.p-ni:hover .p-fe,.p-ni:focus-within .p-fe,.p-ni>a[aria-current=page] .p-fe{color:#fff}
.p-ni>a[aria-current=page] .p-fe{box-shadow:inset 0 -2px 0 -1px currentColor}
/* 事業内容の配下メニュー。隙間なしで下に貼り付く（隙間があるとカーソルの移動中に閉じる） */
.p-drop{position:absolute;left:50%;top:100%;min-width:calc(var(--hf)*13.5);padding:.4em 0;background:#F6F5F0;border:1px solid var(--line);color:var(--ink);
  opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-6px);transition:opacity .18s ease,transform .18s ease;z-index:2}
.p-ni:hover .p-drop,.p-ni:focus-within .p-drop{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.p-drop a,.p-drop .p-off{display:block;padding:.62em 1.1em;font:400 calc(var(--hf)*.82)/1.5 var(--jp);letter-spacing:.01em;white-space:nowrap}
.p-drop a{color:var(--ink);transition:background .16s ease,color .16s ease}
.p-drop a:hover,.p-drop a:focus-visible{background:var(--violet);color:#F6F5F0}
.p-drop .p-off{color:#656C7D;cursor:default}
.p-drop .p-off em{margin-left:.5em;font-style:normal;font-size:calc(var(--hf)*.68);letter-spacing:.06em;color:var(--violet)}
/* 右端のボタン：本番の「相談する」と同じ紫のピル。中の文字も CONTACT→お問い合わせ に回す */
.t-nav .t-nav-cta{display:flex;align-items:center;align-self:center;height:calc(var(--hf)*2.75);gap:0;margin-left:.9em;padding:0 .7em;border-radius:999px;background:#fff;color:var(--violet);perspective:760px;transition:background .2s ease}
.t-nav .t-nav-cta .p-cube>span{padding:0 .9em}
.t-nav .t-nav-cta .p-fe{color:inherit;font-size:calc(var(--hf)*.7)}
.t-nav .t-nav-cta .p-fj{color:inherit;background:none;font-size:calc(var(--hf)*.8);letter-spacing:.02em}
.t-nav .t-nav-cta:hover,.t-nav .t-nav-cta:focus-visible{background:#E6E4F5;color:var(--violet-d)}
.t-nav .t-nav-cta:hover .p-cube,.t-nav .t-nav-cta:focus-visible .p-cube{transform:rotateX(-90deg)}
/* 紫・濃紺の面の上（data-tone=dark）：白いバー。文字は濃紺、Pと縦棒は紫、右端のボタンは紫地に白（2026-09-28 髙橋さん） */
.t-head[data-tone=dark]{background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 6px 28px rgba(0,0,0,.24)}
.t-head[data-tone=dark] .t-brand span{color:var(--violet)}
.t-head[data-tone=dark] .p-ni>a,.t-head[data-tone=dark] .p-fe{color:#4E5770}
.t-head[data-tone=dark] .p-ni:hover .p-fe,.t-head[data-tone=dark] .p-ni:focus-within .p-fe,.t-head[data-tone=dark] .p-ni>a[aria-current=page] .p-fe{color:var(--violet)}
.t-head[data-tone=dark] .p-fj{color:#F6F5F0;background:var(--violet)}
.t-head[data-tone=dark] .t-nav .t-nav-cta{background:var(--violet);color:#F6F5F0}
.t-head[data-tone=dark] .t-nav .t-nav-cta .p-fe{color:inherit}
.t-head[data-tone=dark] .t-nav .t-nav-cta:hover,.t-head[data-tone=dark] .t-nav .t-nav-cta:focus-visible{background:var(--violet-d);color:#F6F5F0}
/* タッチ端末（ホバーが無い）では最初から日本語の面にしておく（回らないままだと日本語が一度も出ない） */
@media(hover:none){.p-ni .p-cube,.t-nav .t-nav-cta .p-cube{transform:rotateX(-90deg)}.p-fj{color:inherit;background:none;font-weight:500}}
/* ハンバーガー：線は文字（☰）ではなく描いた3本線 */
.p-burger{display:none}
.p-burger-i,.p-burger-i::before,.p-burger-i::after{display:block;width:20px;height:2px;border-radius:1px;background:currentColor;transition:transform .25s ease,background .25s ease}
.p-burger-i{position:relative}
.p-burger-i::before,.p-burger-i::after{content:"";position:absolute;left:0}
.p-burger-i::before{top:-6px}.p-burger-i::after{top:6px}
html.p-menu-open .p-burger-i{background:transparent}
html.p-menu-open .p-burger-i::before{transform:translateY(6px) rotate(45deg)}
html.p-menu-open .p-burger-i::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1120px){
  .t-head{border-radius:22px}
  .t-head-in{gap:12px}
  .t-nav{display:none}
  html.p-js .p-burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -10px 0 auto;padding:0;border:0;background:none;color:inherit;cursor:pointer}
  html:not(.p-js) .t-nav{display:flex;margin-left:auto}
  html:not(.p-js) .t-nav .p-ni{display:none}
  html.p-menu-open .t-head{background:#F6F5F0;color:var(--ink)}
  html.p-menu-open .t-head .t-brand span{color:var(--violet)}
  html.p-menu-open .t-nav{display:flex;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    padding:8px 20px 20px;background:#F6F5F0;color:var(--ink);border-radius:22px;box-shadow:0 12px 32px rgba(14,23,48,.18);max-height:calc(100svh - var(--hh) - 40px);overflow-y:auto}
  html.p-menu-open .p-ni{display:block;height:auto;perspective:none;border-bottom:1px solid var(--line)}
  html.p-menu-open .p-ni>a{display:flex;align-items:center;min-height:48px;color:var(--ink)}
  /* 縦に並べた一覧では回さない。英字は出さず、日本語だけを平らに置く */
  html.p-menu-open .p-cube{display:block;transform:none!important}
  html.p-menu-open .p-cube>span{height:auto;padding:0;justify-content:flex-start}
  html.p-menu-open .p-fe{display:none}
  html.p-menu-open .p-fj{transform:none;background:none;color:inherit;font-size:15px;font-weight:600}
  html.p-menu-open .p-ni>a[aria-current=page] .p-fj{color:var(--violet)}
  html.p-menu-open .p-drop{position:static;opacity:1;pointer-events:auto;transform:none;min-width:0;margin:0 0 12px 2px;padding:2px 0 2px 14px;background:none;border:0;border-left:2px solid var(--violet)}
  html.p-menu-open .p-drop a,html.p-menu-open .p-drop .p-off{padding:10px 0;font-size:14px;white-space:normal}
  html.p-menu-open .t-nav .t-nav-cta{align-self:stretch;justify-content:center;height:52px;margin:20px 0 0;background:var(--violet);color:#F6F5F0}
  html.p-menu-open .t-nav .t-nav-cta .p-cube>span{padding:0}
}
@media(max-width:640px){.t-head{top:8px;left:10px;right:10px}}
/* 動きを減らす設定：立方体・ドロップダウン・ハンバーガーの動きを止める（ホバーで面は切り替わるが、回転はしない） */
@media(prefers-reduced-motion:reduce){.p-cube,.p-fe,.p-drop,.p-ni>a,.p-burger-i,.p-burger-i::before,.p-burger-i::after,.t-nav .t-nav-cta{transition:none!important}}

/* ---------- 面と見出し ---------- */
.p-sec{padding:var(--sec) 0}
.p-paper{background:var(--paper)}
.p-white{background:#fff}
.p-violet{background:var(--violet);color:#fff}
.p-night{background:var(--night);color:#fff}
.p-ink{background:var(--ink);color:#fff}
.p-sh{margin:0 0 clamp(32px,4vw,56px);font-weight:400}
.p-sh .en{display:block;font:700 clamp(36px,4.8vw,72px)/1 var(--en);letter-spacing:-.02em;text-transform:uppercase}
.p-sh .jp{display:block;margin-top:14px;font:700 14px/1.5 var(--jp);color:var(--violet-d);letter-spacing:.04em}
.p-violet .p-sh .jp,.p-night .p-sh .jp,.p-ink .p-sh .jp{color:var(--peri)}
/* 紫の面の上の日本語は白寄り（#E6E4F5＝紫の面の上で5.9:1）。薄紫は番号・線・補助の英字だけ（2026-09-28 Codexレビュー） */
.p-violet .p-sh .jp{color:#E6E4F5}
.p-shrow{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.p-shrow .p-sh{margin:0}
.p-lead{margin:0 0 clamp(32px,4vw,48px);max-width:40em;font-size:15px;line-height:2;font-weight:500;color:var(--ink-2)}
.p-violet .p-lead,.p-night .p-lead,.p-ink .p-lead{color:#E6E4F5}
.p-h3{margin:0 0 20px;font:900 clamp(20px,2vw,28px)/1.4 var(--jp);font-feature-settings:"palt";word-break:keep-all}
.p-kicker{margin:0 0 12px;font:600 12px/1.4 var(--en);letter-spacing:.16em;color:var(--violet-d);text-transform:uppercase}
.p-violet .p-kicker,.p-night .p-kicker,.p-ink .p-kicker{color:var(--peri)}
.p-more{margin-top:clamp(32px,4vw,48px)}
.t-link.p-link-ink{color:var(--ink)}
.t-link.p-link-ink:hover{color:var(--violet)}

/* ---------- 下層の見出し面 ---------- */
.p-head{padding:calc(72px + clamp(48px,6vw,88px)) 0 clamp(40px,5vw,64px);background:var(--paper)}
.p-crumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;font:600 12px/1.6 var(--ui);letter-spacing:.06em;color:var(--ink-2)}
.p-crumb a:hover{color:var(--violet)}
.p-crumb span[aria-hidden]{color:var(--mute)}
.p-head h1{margin:0;font-weight:400}
.p-head h1 .en{display:block;font:700 clamp(44px,6.4vw,96px)/.98 var(--en);letter-spacing:-.03em;text-transform:uppercase}
.p-head h1 .jp{display:block;margin-top:18px;font:700 16px/1.5 var(--jp);color:var(--violet-d)}
.p-catch{margin:clamp(28px,3vw,40px) 0 0;font:900 clamp(24px,2.8vw,40px)/1.4 var(--jp);font-feature-settings:"palt";word-break:keep-all}
.p-head .p-lead{margin:18px 0 0}
.p-tags{display:flex;flex-wrap:wrap;gap:8px 24px;margin:20px 0 0;padding:0;list-style:none;font-size:14px;font-weight:700;color:var(--ink)}
.p-tags li::before{content:"";display:inline-block;width:14px;height:2px;margin:0 10px 4px 0;background:var(--violet);vertical-align:middle}
.p-headphoto{margin:0;height:clamp(180px,24vw,340px);overflow:hidden;background:var(--ink)}
.p-headphoto img{width:100%;height:100%;object-fit:cover}

/* ---------- トップ：VISION ---------- */
.p-vision{padding:clamp(64px,7vw,104px) 0}
.p-vision-state{margin:0;font:900 clamp(30px,3.6vw,52px)/1.35 var(--jp);font-feature-settings:"palt";word-break:keep-all}
.p-vision-en{margin:16px 0 0;font:600 clamp(16px,1.4vw,20px)/1.5 var(--en);color:var(--peri);letter-spacing:.02em}
.p-vision .t-origin{margin-top:clamp(40px,5vw,64px)}
.p-origin-copy{margin:0}
.p-origin-copy .t-origin-line{margin:0}
.p-origin-copy .p-origin-k{margin:14px 0 0;font:700 clamp(17px,1.5vw,20px)/1.7 var(--jp)}

/* ---------- 事業カード（写真つき） ---------- */
.p-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,56px) clamp(24px,3vw,40px)}
.p-card{display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:20px;color:inherit}
.p-card-photo{margin:0 0 20px;aspect-ratio:16/9;overflow:hidden;background:var(--paper)}
.p-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
a.p-card:hover .p-card-photo img{transform:scale(1.04)}
.p-card-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:baseline}
.p-card-no{font:600 clamp(22px,2.2vw,32px)/1 var(--en);color:var(--violet)}
.p-card h3{margin:0;font:900 clamp(20px,1.9vw,28px)/1.35 var(--jp);font-feature-settings:"palt";word-break:keep-all;transition:color .3s}
a.p-card:hover h3{color:var(--violet)}
.p-card-arrow{font:500 22px/1 var(--en);transition:transform .4s var(--ease)}
a.p-card:hover .p-card-arrow{transform:translateX(6px);color:var(--violet)}
.p-card p{margin:12px 0 0;font-size:15px;line-height:1.9;color:var(--ink-2);font-weight:500}
.p-card-more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:16px;padding-bottom:4px;border-bottom:1px solid currentColor;font:700 14px/1.5 var(--jp);color:var(--violet-d)}
.p-card-more b{font:500 16px/1 var(--en);transition:transform .4s var(--ease)}
a.p-card:hover .p-card-more b{transform:translateX(6px)}
/* 準備中（押せない）：一段下げる。写真は白黒で低く、罫は細く、見出しは濃紺のまま（文字の色は弱めない＝コントラストを割らない）。矢印なし・カーソルは通常 */
.p-card.is-soon{cursor:default;border-top:1px solid var(--line);padding-top:16px}
.p-card.is-soon .p-card-photo{aspect-ratio:3/1;margin-bottom:16px}
.p-card.is-soon .p-card-photo img{filter:grayscale(1) contrast(.8) brightness(1.12)}
.p-card.is-soon .p-card-no{color:var(--ink-2)}
.p-card.is-soon h3{color:var(--ink-2)}
.p-soon{display:inline-block;padding:3px 12px;background:var(--ink);font:700 12px/1.6 var(--jp);color:#fff;letter-spacing:.08em;white-space:nowrap}

/* ---------- 代表挨拶（トップの抜粋・代表挨拶ページ） ---------- */
.p-msg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.p-msg .t-portrait{aspect-ratio:4/5}
.p-msg .t-portrait-mark{font-size:clamp(160px,17vw,260px)}
/* 代表の面（写真が入るまでの正式な面）：Deep Navy の地に、ロゴ INTE|P|RAL の「|P|」を大きく。縦棒は文字ではなく描いた線。2026-09-28 🎨Iris
   写真を入れると（build.py の PORTRAIT）img だけが出る */
.t-portrait.p-pt{display:flex;flex-direction:column;background:var(--deep);border:1px solid rgba(255,255,255,.12);color:#fff}
.p-pt-mark{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;gap:clamp(16px,2vw,24px);padding:0 24px}
.p-pt-mark i{flex:0 0 2px;background:var(--violet-l,#6D5FC4);opacity:.7}
.p-pt-mark span{align-self:center;font:600 clamp(120px,13vw,200px)/1 var(--logo);font-stretch:104%;color:#6D5FC4}
.t-portrait.p-pt .p-pt-cap{position:static;flex:0 0 auto;padding:24px;border-top:1px solid rgba(255,255,255,.16);font:inherit;letter-spacing:.02em;color:inherit}
.p-pt-line{margin:0;font:500 14px/1.9 var(--jp);color:#EEF0F4}
.p-pt-who{margin:16px 0 0;font:700 20px/1.3 var(--jp);letter-spacing:.04em;color:#fff}
.p-pt-who span{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.08em;color:var(--peri)}
.t-portrait.p-pt>img{width:100%;height:100%;object-fit:cover}
@media(max-width:1023px){.p-msg .t-portrait.p-pt,.p-msgpage .t-portrait.p-pt{aspect-ratio:auto;max-height:none}.p-pt-mark{height:176px}.p-pt-mark span{font-size:120px}}
.p-role{margin:0;font:700 14px/1.5 var(--jp);color:var(--peri)}
.p-name{margin:6px 0 0;font:900 clamp(32px,3.2vw,48px)/1.2 var(--jp);letter-spacing:.04em}
.p-hist{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line-w)}
.p-hist li{padding:14px 0 14px 26px;border-bottom:1px solid var(--line-w);font-size:15px;line-height:1.8;color:#E3E5EE;position:relative}
.p-hist li::before{content:"";position:absolute;left:0;top:26px;width:12px;height:2px;background:var(--peri)}
.p-quote{margin:32px 0 0;padding:0 0 0 24px;border-left:2px solid var(--violet)}
.p-quote p{margin:0 0 14px;font-size:15px;line-height:2;color:#fff}
.p-quote .p-sign{margin-top:18px;font-size:14px;font-weight:700;color:var(--peri)}
.p-night .p-more .t-link{color:#fff}

/* ---------- お知らせ ---------- */
.p-news{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.p-news a{display:grid;grid-template-columns:120px 110px minmax(0,1fr) 32px;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line);transition:color .3s}
.p-news a:hover{color:var(--violet)}
.p-news time{font:600 15px/1.5 var(--en);letter-spacing:.02em}
.p-cat{justify-self:start;padding:2px 10px;border:1px solid var(--line);font:700 12px/1.6 var(--jp);color:var(--ink)}
.p-news b{font-size:16px;line-height:1.7}
.p-news .p-arw{font:500 20px/1 var(--en)}

/* ---------- お問い合わせの帯（全ページの末尾） ---------- */
.p-cta{padding:var(--sec) 0}
.p-cta-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:end}
.p-cta-catch{margin:0;font:900 clamp(26px,3vw,44px)/1.35 var(--jp);font-feature-settings:"palt";word-break:keep-all}
.p-cta-sub{margin:16px 0 0;font-size:15px;line-height:2;color:#D5D7E3}
.p-cta .t-checks>p{font-size:14px}
.p-cta .t-btn{margin-top:32px;min-width:260px}

/* ---------- フッター（大きなサイトマップ） ---------- */
.p-foot{background:var(--deep);color:#fff;padding:clamp(64px,7vw,96px) 0 32px}
.p-foot a{color:#C9CDD8}
.p-foot a:hover{color:#fff}
.p-foot-grid{display:grid;grid-template-columns:minmax(0,3fr) repeat(4,minmax(0,2fr));gap:40px}
.p-foot .t-brand{color:#fff;font:700 17.6px/1 var(--logo);letter-spacing:.16em}
.p-foot .t-brand span{color:var(--peri)}
.p-foot-lead{margin:16px 0 0;font-size:13px;line-height:1.9;color:#C9CDD8}
.p-foot-col{display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.6}
.p-foot-col>b,.p-foot-col>a.p-foot-h{margin-bottom:6px;font-size:14px;font-weight:700;color:#fff}
.p-foot-col span{color:#AEB4C2}
.p-ask{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font:600 13px var(--ui)}
.p-ask b{font:600 12px var(--en);letter-spacing:.14em;color:var(--peri);text-transform:uppercase}
.p-ask a{display:inline-flex;align-items:center;gap:8px}
.p-ask img{width:18px;height:18px;filter:brightness(0) invert(1)}
.p-foot-bottom{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);color:#AEB4C2;font:500 12px var(--ui)}

/* ---------- 理念：4つの柱（写真と交互） ---------- */
.p-intro-text{max-width:40em}
.p-intro-text p{margin:0 0 14px;font-size:15px;line-height:2.05;color:var(--ink-2);font-weight:500}
.p-intro-text .p-strong{margin-top:24px;font:900 clamp(20px,2vw,28px)/1.6 var(--jp);color:var(--ink)}
.p-pillars{display:grid;gap:clamp(48px,6vw,88px)}
.p-pillar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.p-pillar:nth-child(even) .p-pillar-photo{order:2}
.p-pillar-photo{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--paper)}
.p-pillar-photo img{width:100%;height:100%;object-fit:cover}
.p-pillar h3{margin:0 0 20px;font-weight:400}
.p-pillar h3 .p-no{display:block;margin-bottom:14px;font:600 13px/1 var(--en);letter-spacing:.14em;color:var(--violet)}
.p-pillar h3 .en{display:block;font:700 clamp(24px,2.6vw,40px)/1.1 var(--en);letter-spacing:-.01em}
.p-pillar h3 .jp{display:block;margin-top:12px;font:900 clamp(18px,1.6vw,22px)/1.5 var(--jp)}
.p-pillar p{margin:0 0 12px;font-size:15px;line-height:2;color:var(--ink-2);font-weight:500}
.p-pillar .p-em{color:var(--ink);font-weight:700}

/* 社名の由来：INTEGRAL と PRINCIPLE の意味 */
.p-meaning{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:clamp(32px,4vw,48px) 0 0;border-top:1px solid var(--line-w)}
.p-meaning div{padding:24px 32px 8px 0}
.p-meaning div+div{padding-left:32px;border-left:1px solid var(--line-w)}
.p-meaning dt{font:700 clamp(20px,2vw,28px)/1.2 var(--logo);letter-spacing:.08em}
.p-meaning dt b{color:#fff;background:var(--violet-d);padding:0 .15em}
.p-meaning dd{margin:10px 0 0;font-size:15px;line-height:1.9;color:#E6E4F5}
.p-name-close{margin:clamp(32px,4vw,48px) 0 0;font:600 clamp(18px,1.6vw,22px)/1.6 var(--en)}
.p-name-close span{display:block;margin-top:6px;font:700 15px/1.8 var(--jp);color:#E6E4F5}

/* 次に読む（2つの導線） */
.p-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--ink)}
.p-next a{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;border-bottom:1px solid var(--line);font:900 clamp(18px,1.6vw,22px)/1.4 var(--jp);transition:color .3s}
.p-next a+a{padding-left:32px;border-left:1px solid var(--line)}
.p-next a:first-child{padding-right:32px}
.p-next a:hover{color:var(--violet)}
.p-next a small{display:block;margin-bottom:6px;font:600 12px var(--en);letter-spacing:.14em;color:var(--violet-d)}
.p-next b{font:500 22px var(--en)}
/* 会社情報の入口（ページ内の3項目：会社概要↓・理念↓・代表挨拶→）2026-09-28 */
.p-next.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-next.is-3 a:not(:first-child):not(:last-child){padding-right:32px}
.p-anc{scroll-margin-top:72px}
.p-vcatch{margin-top:0}
.p-vlead{margin:16px 0 clamp(32px,4vw,48px)}

/* ---------- 事業内容：線引きで防げること ---------- */
.p-prevent{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;border-top:2px solid var(--ink)}
.p-prevent li{padding:24px 28px 8px 0;font:900 clamp(18px,1.6vw,22px)/1.5 var(--jp)}
.p-prevent li+li{padding-left:28px;border-left:1px solid var(--line)}
.p-prevent li span{display:block;margin-bottom:10px;font:600 13px var(--en);color:var(--violet)}

/* ---------- 事業ページ：止まる3場面 ---------- */
.p-scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.p-scenes li{padding:28px 28px 8px 0;display:flex;flex-direction:column}
.p-scenes li+li{padding-left:28px;border-left:1px solid var(--line)}
.p-scenes .p-sno{font:600 13px var(--en);letter-spacing:.12em;color:var(--violet)}
.p-scenes .p-scene{margin:12px 0 0;font:900 clamp(18px,1.6vw,22px)/1.55 var(--jp);font-feature-settings:"palt";word-break:auto-phrase}
.p-scenes .p-first{margin-top:auto;padding-top:24px}
.p-scenes .p-first b{display:block;padding-top:16px;border-top:1px solid var(--line);font-size:12px;font-weight:700;color:var(--violet-d)}
.p-scenes .p-first p{margin:6px 0 0;font-size:15px;line-height:1.8;font-weight:700}

/* ---------- システム開発：5つの選択肢（横スクロール。スクロールを乗っ取らない） ---------- */
.p-hs{position:relative}
.p-hs-track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:max(var(--gut),calc((100% - var(--max))/2));padding:4px max(var(--gut),calc((100% - var(--max))/2)) 20px;scrollbar-width:thin;scrollbar-color:var(--violet) transparent}
.p-hs-track:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.p-opt{flex:0 0 clamp(264px,25vw,330px);scroll-snap-align:start;display:flex;flex-direction:column;padding:24px 24px 28px;background:var(--paper);border-top:2px solid var(--ink)}
.p-opt:nth-child(even){background:#EEEDF6}
.p-opt .p-ono{font:600 14px/1 var(--en);color:var(--violet)}
.p-opt h3{margin:14px 0 0;font:900 clamp(26px,2.4vw,36px)/1.25 var(--jp);font-feature-settings:"palt";word-break:keep-all}
.p-opt dl{margin:18px 0 0}
.p-opt dt{padding-top:12px;border-top:1px solid var(--line);font-size:12px;font-weight:700;color:var(--violet-d)}
.p-opt dd{margin:6px 0 14px;font-size:14px;line-height:1.75;font-weight:500}
.p-opt.is-not{background:var(--ink);color:#fff;border-top-color:var(--ink)}
.p-opt.is-not .p-ono,.p-opt.is-not dt{color:var(--peri)}
.p-opt.is-not dt{border-color:var(--line-w)}
.p-hs-ui{display:flex;align-items:center;gap:16px;margin-top:8px}
.p-hs-bar{position:relative;flex:1;height:2px;background:var(--line);overflow:hidden}
.p-hs-bar i{position:absolute;inset:0;background:var(--violet);transform-origin:0 50%;transform:scaleX(var(--hs,.2))}
.p-hs-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--ink);background:#fff;color:var(--ink);font:500 18px var(--en);border-radius:2px;cursor:pointer}
html.p-js .p-hs-btn{display:inline-flex}
.p-hs-btn:hover{background:var(--violet);border-color:var(--violet);color:#fff}
.p-hs-btn[disabled]{opacity:.35;cursor:default;background:#fff;color:var(--ink);border-color:var(--ink)}
.p-measure{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));align-items:stretch;margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.p-measure b{display:flex;align-items:center;padding:18px 28px 18px 0;font-size:13px;color:var(--violet-d)}
.p-measure span{display:flex;align-items:center;padding:18px 24px;border-left:1px solid var(--line);font-size:15px;font-weight:700;line-height:1.6}

/* ---------- 工程と残るもの ---------- */
.p-steps{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));list-style:none;margin:0;padding:0;counter-reset:st}
.p-steps li{position:relative;padding:28px 16px 0 0;counter-increment:st;font:900 clamp(15px,1.3vw,18px)/1.5 var(--jp);border-top:2px solid var(--ink)}
.p-steps li::before{content:counter(st,decimal-leading-zero);display:block;margin-bottom:8px;font:600 13px var(--en);color:var(--violet)}
.p-steps li::after{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;background:var(--violet);border-radius:0}
.p-remains{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;margin-top:clamp(40px,5vw,56px);padding:28px 32px;background:var(--paper)}
.p-white .p-remains{background:var(--paper)}
.p-paper .p-remains{background:#fff}
.p-remains>b{font-size:13px;color:var(--violet-d);padding-top:4px}
.p-remains ul{display:flex;flex-wrap:wrap;gap:10px 0;list-style:none;margin:0;padding:0}
.p-remains li{padding-right:20px;margin-right:20px;border-right:1px solid var(--line);font-size:15px;font-weight:700;line-height:1.6}
.p-remains li:last-child{border-right:0}

/* ---------- AI：渡すもの／人が持つもの ---------- */
.p-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.p-split>div{padding:clamp(28px,3vw,40px)}
.p-split .p-give{background:#fff;border:1px solid var(--line)}
.p-split .p-keep{background:var(--violet);color:#fff}
.p-split h3{margin:0;font:900 clamp(22px,2.2vw,32px)/1.3 var(--jp)}
.p-split h3 small{display:block;margin-bottom:10px;font:600 12px var(--en);letter-spacing:.16em;color:var(--violet-d)}
.p-split .p-keep h3 small{color:var(--peri)}
.p-split ul{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.p-split .p-keep ul{border-color:var(--line-w)}
.p-split li{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:700}
.p-split .p-keep li{border-color:var(--line-w)}
.p-split p{margin:16px 0 0;font-size:14px;line-height:1.8;color:var(--ink-2)}
.p-split .p-keep p{color:#E4E2F4}

/* ---------- よくある質問 ---------- */
.p-faq{border-top:2px solid var(--ink);max-width:960px}
.p-faq details{border-bottom:1px solid var(--line)}
.p-faq summary{display:grid;grid-template-columns:32px minmax(0,1fr) 24px;gap:12px;align-items:baseline;padding:22px 0;cursor:pointer;list-style:none;font:700 clamp(16px,1.3vw,18px)/1.6 var(--jp)}
.p-faq summary::-webkit-details-marker{display:none}
.p-faq summary::before{content:"Q";font:600 16px var(--en);color:var(--violet)}
.p-faq summary::after{content:"+";font:500 22px/1 var(--en);color:var(--violet);text-align:right}
.p-faq details[open] summary::after{content:"−"}
.p-faq .p-ans{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:0 36px 24px 0;font-size:15px;line-height:1.95;color:var(--ink-2)}
.p-faq .p-ans::before{content:"A";font:600 16px var(--en);color:var(--ink)}
.p-faq .p-ans p{margin:0}

/* ---------- 会社情報：入口（行） ---------- */
.p-rows{border-top:2px solid var(--ink)}
.p-row{display:grid;grid-template-columns:72px minmax(0,4fr) minmax(0,4fr) minmax(0,2.4fr) 32px;gap:clamp(20px,3vw,40px);align-items:center;padding:24px 0;border-bottom:1px solid var(--line);transition:color .3s}
.p-row:hover{color:var(--violet)}
.p-row .p-rno{font:600 clamp(22px,2vw,28px)/1 var(--en);color:var(--violet)}
.p-row h2{margin:0;font-weight:400}
.p-row h2 .en{display:block;font:700 clamp(24px,2.6vw,40px)/1 var(--en);text-transform:uppercase;letter-spacing:-.01em}
.p-row h2 .jp{display:block;margin-top:10px;font:700 14px var(--jp);color:var(--violet-d)}
.p-row p{margin:0;font-size:15px;line-height:1.8;color:var(--ink-2)}
.p-row figure{margin:0;aspect-ratio:16/10;overflow:hidden}
.p-row img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.p-row:hover img{transform:scale(1.04)}
.p-row .p-arw{font:500 22px var(--en)}

/* ---------- 会社概要の表 ---------- */
.p-table{margin:0;border-top:2px solid var(--ink);max-width:960px}
.p-table div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.p-table dt{font-size:14px;font-weight:700;color:var(--violet-d)}
.p-table dd{margin:0;font-size:15px;line-height:1.8;font-weight:500}
.p-table dd a{border-bottom:1px solid currentColor}

/* ---------- 代表挨拶ページ ---------- */
.p-msgpage{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.p-msgpage .t-portrait{aspect-ratio:4/5;position:sticky;top:104px}
.p-msgpage .t-portrait-mark{font-size:clamp(160px,17vw,260px)}
.p-timeline{margin:0;border-top:2px solid var(--ink)}
.p-timeline div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.p-timeline dt{font:600 14px/1.8 var(--en);color:var(--violet-d)}
.p-timeline dd{margin:0;font-size:15px;line-height:1.8;font-weight:500}
.p-letter p{margin:0 0 18px;font-size:15px;line-height:2.1;color:var(--ink)}
.p-values{list-style:none;margin:28px 0 28px;padding:0;border-top:1px solid var(--line)}
.p-values li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;padding:22px 0;border-bottom:1px solid var(--line)}
.p-values li>span{font:600 15px/1.6 var(--en);color:var(--violet)}
.p-values h3{margin:0;font:900 clamp(17px,1.5vw,20px)/1.6 var(--jp)}
.p-values p{margin:8px 0 0;font-size:15px;line-height:2;color:var(--ink-2)}
.p-signature{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;font-weight:700}
.p-namecard{margin:24px 0 0}
.p-namecard .p-role{color:var(--violet-d)}
.p-namecard .p-name{color:var(--ink)}

/* ---------- お知らせの記事 ---------- */
.p-article{max-width:760px}
.p-article-meta{display:flex;gap:16px;align-items:center;margin:0 0 16px}
.p-article-meta time{font:600 15px var(--en)}
.p-article h1{margin:0;font:900 clamp(24px,2.6vw,36px)/1.45 var(--jp);font-feature-settings:"palt"}
.p-article-body{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.p-article-body p{margin:0 0 18px;font-size:15px;line-height:2.05}
.p-article-body a{color:var(--violet-d);border-bottom:1px solid currentColor}
.p-back{margin-top:40px}

/* ---------- お問い合わせのフォーム ---------- */
.p-contact{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.p-checks{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.p-checks li{display:flex;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);font:700 clamp(16px,1.4vw,19px)/1.5 var(--jp)}
.p-checks li span{font:600 14px var(--en);color:var(--violet)}
.p-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 24px}
.p-fld{display:flex;flex-direction:column;gap:8px}
.p-fld.wide{grid-column:1/-1}
.p-fld label,.p-fld .p-flabel{font-size:14px;font-weight:700}
.p-req{display:inline-block;margin-left:10px;padding:0 6px;border:1px solid var(--violet-d);font-size:11px;font-weight:700;line-height:1.6;color:var(--violet-d);vertical-align:1px}
.p-fld input[type=text],.p-fld input[type=email],.p-fld select,.p-fld textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid rgba(24,35,59,.36);border-radius:2px;background:#fff;color:var(--ink);font:500 16px/1.6 var(--jp)}
.p-fld textarea{min-height:200px;resize:vertical}
.p-fld input:focus,.p-fld select:focus,.p-fld textarea:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
.p-sel{position:relative}
.p-sel select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.p-sel::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.p-hint{margin:0;font-size:13px;line-height:1.7;color:var(--ink-2)}
.p-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.p-consent{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700}
.p-consent input{width:20px;height:20px;accent-color:var(--violet);margin:0}
.p-consent a{color:var(--violet-d);border-bottom:1px solid currentColor}
.p-formnote{margin:0;font-size:13px;line-height:1.8;color:var(--ink-2)}
.p-form button.t-btn{border:0;cursor:pointer;justify-self:start}
/* 送信失敗の案内（/contact/?sent=0#form）。ふだんは出さない。2026-09-28 🛠️Dex */
.p-senterr{display:none;padding:18px 20px;border:1px solid #b3261e;border-left-width:4px;background:#fdf3f2;color:var(--ink)}
.p-senterr:target,.p-senterr.is-on{display:flex}
.p-senterr p{margin:0;font-size:14px;line-height:1.8}
.p-senterr .p-senterr-h{font-size:16px;font-weight:700;color:#b3261e}
.p-senterr a{color:var(--violet-d);border-bottom:1px solid currentColor}

/* ---------- プライバシーポリシー（既存の本文をそのまま載せる） ---------- */
.p-doc{max-width:860px}
.p-doc h2{margin:48px 0 16px;padding-top:24px;border-top:1px solid var(--line);font:900 clamp(18px,1.6vw,22px)/1.5 var(--jp)}
.p-doc h3{margin:28px 0 10px;font-size:16px;font-weight:700}
.p-doc p,.p-doc li{font-size:15px;line-height:2}
.p-doc p{margin:0 0 14px}
.p-doc ul{margin:0 0 14px;padding-left:1.4em;list-style:disc}
.p-doc a{color:var(--violet-d);border-bottom:1px solid currentColor;word-break:break-all}
.p-doc .pp-dl{margin:0 0 14px;border-top:1px solid var(--line)}
.p-doc .pp-dl div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.p-doc .pp-dl dt{font-weight:700;color:var(--violet-d)}
.p-doc .pp-dl dd{margin:0}
.p-doc .pp-note{font-size:14px;color:var(--ink-2)}
.p-doc .tbl-scroll{overflow-x:auto;margin:0 0 14px}
.p-doc .pp-table{border-collapse:collapse;min-width:720px;font-size:13px;line-height:1.7}
.p-doc .pp-table th,.p-doc .pp-table td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.p-doc .pp-table th{background:var(--paper)}
.p-doc .pp-date{margin-top:40px;font-size:13px;color:var(--ink-2)}

/* ---------- 送信完了 ---------- */
.p-done{max-width:720px}
.p-done p{font-size:15px;line-height:2}

/* ---------- タブレット・スマホ ---------- */
@media(max-width:1023px){
  .p-msg,.p-msgpage,.p-contact{grid-template-columns:1fr}
  .p-msg .t-portrait,.p-msgpage .t-portrait{aspect-ratio:4/3;max-height:420px;position:relative;top:auto}
  .p-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-foot-grid>div:first-child{grid-column:1/-1}
  .p-row{grid-template-columns:48px minmax(0,1fr) 28px}
  .p-row p{grid-column:2/3}
  .p-row figure{display:none}
  .p-row .p-arw{grid-column:3;grid-row:1}
  .p-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
}
@media(max-width:767px){
  .p-sh .en{font-size:clamp(30px,9vw,44px)}
  .p-head{padding-top:calc(60px + 40px)}
  .p-head h1 .en{font-size:clamp(34px,10vw,48px);line-height:1.02;overflow-wrap:anywhere}
  .p-catch{font-size:clamp(22px,6.4vw,28px)}
  .p-vision-state{font-size:clamp(26px,7.4vw,32px)}
  .p-cards{grid-template-columns:1fr}
  .p-news a{grid-template-columns:auto auto minmax(0,1fr);gap:8px 14px;padding:20px 0}
  .p-news b{grid-column:1/-1}
  .p-news .p-arw{display:none}
  .p-cta-grid{grid-template-columns:1fr}
  .p-cta .t-btn{width:100%;min-width:0}
  .p-pillar{grid-template-columns:1fr;gap:24px}
  .p-pillar:nth-child(even) .p-pillar-photo{order:0}
  .p-pillar-photo{aspect-ratio:16/9}
  .p-meaning{grid-template-columns:1fr}
  .p-meaning div+div{padding-left:0;border-left:0;border-top:1px solid var(--line-w)}
  .p-next{grid-template-columns:1fr}
  .p-next a+a{padding-left:0;border-left:0}
  .p-next a:first-child{padding-right:0}
  .p-next.is-3{grid-template-columns:1fr}.p-next.is-3 a:not(:first-child):not(:last-child){padding-right:0}
  .p-prevent,.p-scenes{grid-template-columns:1fr}
  .p-prevent li+li,.p-scenes li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .p-scenes li{padding-right:0}
  .p-measure{grid-template-columns:1fr}
  .p-measure b{padding:16px 0 4px}
  .p-measure span{border-left:0;border-top:1px solid var(--line);padding:14px 0}
  .p-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-remains{grid-template-columns:1fr;gap:12px;padding:22px 20px}
  .p-split{grid-template-columns:1fr}
  .p-table div,.p-timeline div{grid-template-columns:1fr;gap:4px}
  .p-doc .pp-dl div{grid-template-columns:1fr;gap:2px}
  .p-form{grid-template-columns:1fr}
  .p-form button.t-btn{justify-self:stretch}
  .p-foot-grid{grid-template-columns:1fr 1fr;gap:32px 20px}
  .p-opt{flex-basis:78vw}
  .p-hs-btn{width:40px;height:40px}
  .p-faq .p-ans{padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  .p-card-photo img,.p-row img,.p-card-arrow{transition:none}
  .p-hs-track{scroll-behavior:auto}
}

/* ---------- トップ：ヒーロー → リングが開く の舞台の長さ（旧 230svh を短く） ---------- */
html.t-motion .t-intro{height:calc(100svh + 180svh)}
/* 動きを減らす設定：旧ポスター画像（無いファイル）を読まない。最後のコマは overrides.css §6 が出す */
@media(prefers-reduced-motion:reduce){.t-stage{background-image:none}}
/* リングで紫が画面を埋めきった直後（u≈0.9）に VISION がせり上がるよう、25svh だけ舞台に重ねる（紫だけの画面を短くする） */
html.t-motion .p-vision{position:relative;z-index:4;margin-top:-25svh}
/* 最後の札は「右端そろえ」で止まれるようにする（左そろえだけだと、最後まで送っても1枚前へ吸い戻される） */
.p-hs-track{scroll-padding-right:max(var(--gut),calc((100% - var(--max))/2))}
.p-opt:last-child{scroll-snap-align:end}
/* お問い合わせページでは右上のボタンも「今いるページ」になる。紫の上に紫の文字で消えていたので、ボタンの色を保つ */
/* ヘッダーの反転を色のトランジションに頼らない（裏タブ・省電力でトランジションが止まり、灰色の帯の上でボタンの文字が消えた状態で固まるのを実機で確認した） */
.t-head,.t-head .t-nav-cta{transition:none}

/* Ask Your AI：フッターの1行から、お問い合わせ帯の下の独立した欄へ移した（2026-09-28 髙橋さん指示） */
.p-ask2{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px 48px;align-items:center;margin-top:clamp(48px,5vw,72px);padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.p-ask2-h b{display:block;font:600 12px var(--en);letter-spacing:.16em;color:var(--peri);text-transform:uppercase}
.p-ask2-h span{display:block;margin-top:8px;font:900 clamp(20px,1.8vw,26px)/1.4 var(--jp);font-feature-settings:"palt"}
.p-ask2-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid rgba(255,255,255,.18)}
.p-ask2-links a{display:flex;align-items:center;gap:10px;padding:18px 20px;font:600 15px var(--ui);border-left:1px solid rgba(255,255,255,.18);transition:background .3s}
.p-ask2-links a:first-child{border-left:0}
.p-ask2-links a:hover{background:rgba(255,255,255,.08)}
.p-ask2-links img{width:20px;height:20px;filter:brightness(0) invert(1)}
@media(max-width:900px){.p-ask2{grid-template-columns:1fr}.p-ask2-links{grid-template-columns:1fr 1fr}.p-ask2-links a:nth-child(3){border-left:0}.p-ask2-links a:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}}

/* Ask Your AI を濃紺のお問い合わせ帯から切り離し、明るい面の独立した帯にした（2026-09-28「色同じだとわかりづらい」）。
   アイコンは各社の公式ロゴ（Simple Icons・CC0）をブランド色で表示 */
.p-askband{background:var(--paper,#F6F5F2);color:var(--ink,#1B1F36);padding:clamp(40px,4.5vw,64px) 0}
.p-askband .p-ask2{margin-top:0;padding-top:0;border-top:0}
.p-askband .p-ask2-h b{color:var(--violet,#5546A8)}
.p-askband .p-ask2-links{border-color:rgba(27,31,54,.14);background:#fff}
.p-askband .p-ask2-links a{border-left-color:rgba(27,31,54,.12);color:var(--ink,#1B1F36)}
.p-askband .p-ask2-links a:hover{background:#EEEDF6}
.p-askband .p-ask2-links img{width:22px;height:22px;filter:none}
@media(max-width:900px){.p-askband .p-ask2-links a:nth-child(n+3){border-top-color:rgba(27,31,54,.12)}}

/* Ask Your AI をお問い合わせ帯と同じ構造に（左：英大見出し＋一文、右：番号つきの行）。2026-09-28 */
.p-askband{padding:var(--sec) 0}
.p-askband .p-cta-sub{color:var(--ink-2,#4A4F66)}
.p-askband .t-checks>p{color:var(--ink-2,#4A4F66);font-size:14px}
.p-askband .t-checks ol{border-top-color:rgba(27,31,54,.16)}
.p-askband .t-checks li{padding:0;border-bottom-color:rgba(27,31,54,.16)}
.p-ask-list li a{display:flex;align-items:center;gap:20px;width:100%;padding:18px 0;color:var(--ink,#1B1F36);transition:color .3s}
.p-ask-list li a:hover{color:var(--violet,#5546A8)}
.p-ask-list li span{font:600 15px var(--en);color:var(--violet,#5546A8)}
.p-ask-list li img{width:26px;height:26px}
.p-ask-list li b{margin-left:auto;font:500 20px var(--en)}

/* VISIONの頭の言い切り（2026-09-28 髙橋さん決定：案1）。細身の英字2行＋濃紺の帯に白抜きの日本語 */
.p-state{margin:0 0 clamp(56px,6vw,88px)}
.p-state-en{margin:0;font:300 clamp(34px,4.6vw,66px)/1.18 var(--en);letter-spacing:-.01em;color:#fff}
.p-state-en span{display:block}
.p-state-jp{margin:clamp(20px,2vw,28px) 0 0}
.p-state-jp>span{display:inline-block;padding:6px 16px 7px;background:var(--ink,#1B1F36);color:#fff;font:500 clamp(18px,1.8vw,26px)/1.5 var(--jp);letter-spacing:.04em}
@media(max-width:767px){.p-state-en{font-size:clamp(28px,8.4vw,36px)}.p-state-jp>span{font-size:17px}}
/* VISIONを1つの言い切りに整理（見出し→英語2行＋日本語の帯→社名の由来）。「日本を、もう一度強い国へ」は理念ページに残す */
.p-vision .p-sh+.p-state{margin-top:clamp(32px,3.5vw,48px);margin-bottom:0}

/* ══ 2026-09-28 動きの層（motion.js と対）🎨Iris ══
   参考 reinforce-co.jp の7つの動きを INTEPRAL 向けに置き換えた。動かすのは transform / clip-path だけ。
   隠れた初期状態はすべて html.p-mo の下（motion.js が付ける。動きを減らす設定・JSなしでは付かない＝最初から全部見える）
   イージングは design.md §5 の cubic-bezier(.16,1,.3,1) で統一 */
:root{--mo:cubic-bezier(.16,1,.3,1)}

/* 1) 見出し：行ごとの窓から持ち上がる。窓は clip-path（上は字の頭を切らないよう広げる） */
html.p-mo .p-rv-m{clip-path:inset(-.3em -.6em -.06em -.6em)}
html.p-mo .p-rv-m>.p-rv-i{display:inline-block;max-width:100%;transform:translateY(118%);transition:transform 1s var(--mo);transition-delay:calc(var(--i,0)*90ms)}
html.p-mo .p-rv.is-in .p-rv-m>.p-rv-i{transform:none}

/* 2) 本文の塊 */
html.p-mo .p-up{transform:translateY(24px);transition:transform .9s var(--mo)}
html.p-mo .p-up.is-in{transform:none}

/* 3) カード・行：60〜80msずつずらす */
html.p-mo .p-stg>.p-st{transform:translateY(24px);transition:transform .9s var(--mo);transition-delay:calc(var(--i,0)*70ms)}
html.p-mo .p-stg.is-in>.p-st{transform:none}

/* 4) 写真：上から開き、1.08 → 1。視差ぶん（±30px）だけ写真を背伸びさせておく（外枠の大きさは変えない） */
html.p-mo .p-ph img{clip-path:inset(100% 0 0 0);scale:1.08;transition:clip-path 1.2s var(--mo),scale 1.6s var(--mo),transform 1s var(--ease)}
html.p-mo .p-ph.is-in img{clip-path:inset(0);scale:1}
html.p-mo .p-headphoto.p-ph img{height:calc(100% + 60px);translate:0 -30px}
html.p-mo .p-card-photo.p-ph img,html.p-mo .p-pillar-photo.p-ph img{height:calc(100% + 36px);translate:0 -18px}

/* 5) 線が左から伸びる（border-top を ::before に置き換え。太さ・色は motion.js が元の線から写す） */
html.p-mo .p-ln{border-top-color:transparent!important}
html.p-mo .p-ln::before{content:"";position:absolute;left:0;right:0;top:calc(var(--lw,1px)*-1);height:var(--lw,1px);background:var(--lc,currentColor);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--mo);pointer-events:none}
html.p-mo .p-ln.is-in::before{transform:none}

/* 6) マーカー：大事な一文の下に紫の帯が左から伸びる */
.p-mk{position:relative;z-index:0}
.p-mk::after{content:"";position:absolute;z-index:-1;left:-.08em;right:-.08em;bottom:.06em;height:.34em;background:rgba(85,70,168,.22);transform-origin:0 50%}
.p-cta .p-mk::after{background:var(--violet)}
html.p-mo .p-mk::after{transform:scaleX(0);transition:transform 1.1s var(--mo);transition-delay:calc(.35s + var(--i,0)*.28s)}
html.p-mo .p-mks.is-in .p-mk::after{transform:none}
.p-mk{display:inline-block}
.p-catch .p-mk:not(.nb),.p-cta-catch .p-mk:not(.nb),.p-strong .p-mk:not(.nb){display:inline}
/* VISIONの日本語の帯：濃紺の帯そのものが左から伸びる */
html.p-mo .p-band{position:relative;z-index:0;background:none}
html.p-mo .p-band::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--ink,#18233B);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--mo) .45s}
html.p-mo .p-state-jp.is-in .p-band::before{transform:none}

/* 7) 浮遊する格子とマス（お問い合わせ帯・Ask Your AI帯）。ヒーローの格子のマスを、ゆっくり漂わせたもの */
.p-floathost{position:relative;overflow:hidden}
.p-floathost>.t-wrap{position:relative;z-index:1}
.p-float{position:absolute;inset:0;z-index:0;pointer-events:none}
.p-float-grid{position:absolute;top:-64px;bottom:-64px;right:-64px;width:58%;background-image:linear-gradient(to right,var(--fl-g) 1px,transparent 1px),linear-gradient(to bottom,var(--fl-g) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(to left,#000 10%,transparent 90%);mask-image:linear-gradient(to left,#000 10%,transparent 90%);animation:p-drift 9s ease-in-out infinite alternate paused}
.p-tile{position:absolute;top:var(--y);left:var(--x);width:var(--s);height:var(--s);border:1px solid var(--fl-t);animation:p-float var(--d,7s) ease-in-out var(--dl,0s) infinite alternate paused}
.p-tile.is-fill{background:var(--fl-f);border-color:transparent}
.p-cta{--fl-g:rgba(183,185,220,.07);--fl-t:rgba(183,185,220,.28);--fl-f:rgba(85,70,168,.55)}
.p-askband{--fl-g:rgba(85,70,168,.07);--fl-t:rgba(85,70,168,.26);--fl-f:rgba(85,70,168,.16)}
.p-floathost.is-live .p-float-grid,.p-floathost.is-live .p-tile{animation-play-state:running}
@keyframes p-float{to{transform:translate(var(--tx,10px),var(--ty,-12px)) rotate(var(--r,8deg))}}
@keyframes p-drift{to{transform:translate(-32px,24px)}}
@media(max-width:767px){.p-float-grid{width:100%}.p-tile:not(.is-sp){display:none}}

/* ボタン：紫（または濃紺）の面が左から満ちる＋矢印が右へ。ヒーローのボタンは触らない */
.t-btn:not(.t-hero-actions .t-btn){position:relative;isolation:isolate;overflow:hidden}
.t-btn:not(.t-hero-actions .t-btn)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--violet);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--mo)}
.t-btn:not(.t-hero-actions .t-btn):hover::before,.t-btn:not(.t-hero-actions .t-btn):focus-visible::before{transform:none}
.t-btn-violet:not(.t-hero-actions .t-btn)::before{background:var(--ink)}
.t-btn-violet:not(.t-hero-actions .t-btn):hover{background:var(--violet)}
.t-btn-white:not(.t-hero-actions .t-btn):hover{background:#fff;color:#fff}
/* リンクの下線：ホバーで右へ抜けて、左から引き直す */
.t-link{position:relative;border-bottom-color:transparent}
.t-link::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform-origin:100% 50%}
.t-link:hover::after{animation:p-uline .7s var(--mo)}
@keyframes p-uline{0%{transform:scaleX(1);transform-origin:100% 50%}45%{transform:scaleX(0);transform-origin:100% 50%}46%{transform:scaleX(0);transform-origin:0 50%}100%{transform:scaleX(1);transform-origin:0 50%}}

/* 右下に浮くお問い合わせ（角型）。ヒーローを過ぎたら下から出る。お問い合わせ帯が見えたら引っ込む */
.p-fab{position:fixed;right:24px;bottom:24px;z-index:60;display:inline-flex;align-items:center;gap:16px;height:56px;padding:0 24px;background:var(--violet);color:#fff;border-radius:2px;font:700 15px var(--jp);box-shadow:0 12px 32px rgba(14,23,48,.22);isolation:isolate;overflow:hidden;transform:translateY(calc(100% + 40px));transition:transform .6s var(--mo)}
.p-fab.is-on{transform:none}
.p-fab b{font:500 18px var(--en);transition:transform .4s var(--mo)}
.p-fab::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--mo)}
.p-fab:hover::before,.p-fab:focus-visible::before{transform:none}
.p-fab:hover b{transform:translateX(6px)}
.p-fab:focus-visible{outline:2px solid #fff;outline-offset:-5px}
@media(max-width:767px){.p-fab{right:16px;bottom:16px;height:44px;padding:0 16px;gap:12px;font-size:13px}.p-fab b{font-size:15px}}

/* 動きを減らす設定：全部止める（motion.js も p-mo を付けない） */
@media(prefers-reduced-motion:reduce){
  .p-float-grid,.p-tile{animation:none!important}
  .t-btn::before,.p-fab,.p-fab::before,.p-fab b,.t-btn b,.t-link b{transition:none!important}
  .t-link:hover::after{animation:none}
}
.t-hero-actions .t-link{border-bottom-color:currentColor}.t-hero-actions .t-link::after{content:none}
html.p-mo .p-stg.is-in>.p-st.p-ln::before{transform:none;transition-delay:calc(var(--i,0)*70ms)}

/* ══ 2026-09-28 n：髙橋さん指摘4点（🎨Iris） ══ */
/* 1) ヒーローの枠つき「INTEPRAL」を外した分、見出しが上に詰まらないよう上の余白を少し足す */
.t-hero-copy{padding-top:clamp(128px,15vh,168px)}
@media(max-width:767px){.t-hero-copy{padding-top:112px}}

/* 2) ヒーロー左右の注記：格子線の上でも読めるように、後ろにぼかし＋薄い白の面を敷く（注記も格子線も消さない） */
.hero-side{top:clamp(128px,15vh,168px);width:auto;max-width:222px;padding:14px 16px 16px;margin:-14px 0 0;
  background:rgba(255,255,255,.66);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);
  border:1px solid rgba(24,35,59,.06);border-radius:2px;color:#3f4455}
.hero-side b{color:#2c3142}
.hero-side i{background:#8d91a0}

/* 3) ロゴ：本番と同じ INTE|P|RAL。縦棒は文字ではなく描いた棒（書体の「|」は大文字より上下にはみ出すため）
   高さ .727em＝Archivoの大文字の高さ。色はPと同じ（span の color を currentColor で拾う）、本番と同じく不透明度42% */
.t-brand .b{display:inline-block;width:max(1px,.075em);height:.727em;margin:0 .16em;vertical-align:baseline;
  overflow:hidden;text-indent:110%;white-space:nowrap;background:currentColor;opacity:.42}

/* F・G) ヒーローの構図：見出しの塊 → リング → ボタン を縦に並べる（2026-09-28 髙橋さん「全体的に中心に置きたい」「ボタンはリングの下」）
   リングの位置は top.js が動画の座標で決める（中心＝画面の高さの66%、スマホ72%。大きさ＝34.6×倍率）。文字とボタンの側をそれに合わせる。
   ・見出しの塊：ヘッダーの下端からリングの上端までの間の、縦の中央
   ・ボタン：リングの光の下端（半径40×倍率）から28px下
   ・.t-hero-copy は舞台と同じ高さの箱にする（top.js がスクロールで持ち上げるのはこの箱ごと） */
.t-hero-copy{position:absolute;left:0;right:0;top:0;height:100%;margin:0 auto;padding:0;--rc:66%;--rr:max(5.63%,3.125vw)}
/* 見出しの塊はリング寄り（下寄せ）：塊の下端とリングの上端の間を約70px（2026-09-28 髙橋さん「もうちょい下に寄せたい」） */
.t-hero-main{position:absolute;left:0;right:0;top:calc(var(--hh-b,82px) + 16px);bottom:calc(100% - var(--rc) + var(--rr) + 24px);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:40px}
.t-hero-actions{position:absolute;left:0;right:0;top:calc(var(--rc) + var(--rr) + 28px);margin:0}
.t-btn-line{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media(max-width:767px){
  .t-hero-copy{--rc:72%;--rr:max(6.14%,3.125vw);padding-top:0}
  .t-hero-main{top:calc(72px + 12px)}
}
@media(max-width:767px){.t-hero-actions{gap:12px}.t-hero-actions .t-btn{flex:1 1 0;min-width:0;padding:0 12px;gap:10px}}
/* 1) ヒーローの事業名（常時・小さく）：何の会社かを最初の画面で伝える（2026-09-28 Codexレビュー）。英字は事業名そのもの＝機能のラベル */
.t-hero-biz{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 16px;margin:16px auto 0;font-size:13px;line-height:1.6}
.t-hero-biz-en{font:600 12px/1.6 var(--logo);letter-spacing:.12em;color:var(--violet)}
.t-hero-biz-en i{font-style:normal;color:#8d91a0}
.t-hero-biz-jp{font:700 13px/1.6 var(--jp);letter-spacing:.06em;color:var(--ink)}
@media(max-width:767px){.t-hero-biz{flex-direction:column;align-items:center;gap:0;margin-top:12px}.t-hero-biz-en{font-size:11px}}

/* 2026-09-28 髙橋さん「リングを中心に上下のスペース均等に」：見出しの塊の下端→リング上端 と リング下端→ボタン上端 を同じ間隔（--hg）にする */
.t-hero-copy{--hg:clamp(40px,6vh,60px)}
.t-hero-main{bottom:calc(100% - var(--rc) + var(--rr) + var(--hg));padding-bottom:0}
.t-hero-actions{top:calc(var(--rc) + var(--rr) + var(--hg))}

/* 2026-09-28 髙橋さん「無駄に印象強すぎる、半透明のすりガラス風に」：ヘッダーを塗りのバーから、すりガラスに変更
   明るい面の上＝白い半透明＋ぼかし・濃紺の文字／紫・濃紺の面の上＝白をうっすら重ねたガラス・白い文字 */
.t-head{background:rgba(255,255,255,.52);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
  box-shadow:0 4px 24px rgba(14,23,48,.08),inset 0 0 0 1px rgba(255,255,255,.6);color:var(--ink)}
.t-head .t-brand span{color:var(--violet)}
.t-head .p-ni>a,.t-head .p-fe{color:#3F4455}
.t-head .p-ni:hover .p-fe,.t-head .p-ni:focus-within .p-fe,.t-head .p-ni>a[aria-current=page] .p-fe{color:var(--violet)}
.t-head .p-fj{color:#fff;background:var(--violet)}
.t-head .t-nav .t-nav-cta{background:var(--violet);color:#fff}
.t-head .t-nav .t-nav-cta:hover,.t-head .t-nav .t-nav-cta:focus-visible{background:var(--violet-d);color:#fff}
.t-head[data-tone=dark]{background:rgba(255,255,255,.12);box-shadow:0 4px 24px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.22);color:#fff}
.t-head[data-tone=dark] .t-brand span{color:#DCD8F4}
.t-head[data-tone=dark] .p-ni>a,.t-head[data-tone=dark] .p-fe{color:rgba(255,255,255,.92)}
.t-head[data-tone=dark] .p-ni:hover .p-fe,.t-head[data-tone=dark] .p-ni:focus-within .p-fe,.t-head[data-tone=dark] .p-ni>a[aria-current=page] .p-fe{color:#fff}
.t-head[data-tone=dark] .p-fj{color:var(--violet);background:#fff}
.t-head[data-tone=dark] .t-nav .t-nav-cta{background:#fff;color:var(--violet)}
.t-head[data-tone=dark] .t-nav .t-nav-cta:hover,.t-head[data-tone=dark] .t-nav .t-nav-cta:focus-visible{background:#E6E4F5;color:var(--violet-d)}
@media(max-width:1120px){html.p-menu-open .t-head{background:#F6F5F0;color:var(--ink)}}

/* 2026-09-28 髙橋さん「▫️は2倍速で」：浮遊する四角と格子の周期を半分に */
.p-tile{animation-duration:calc(var(--d,7s) / 2);animation-delay:calc(var(--dl,0s) / 2)}
.p-float-grid{animation-duration:4.5s}


/* What is INTEPRAL?：リングが紫で満ちる途中で、中心から持ち上がって現れる（位置と表示の進みは top.js） */
.t-wi{position:absolute;left:0;top:0;z-index:4;margin:0;text-align:center;color:#fff;pointer-events:none;white-space:nowrap;clip-path:inset(100% 0 0 0);will-change:transform,clip-path}
.t-wi-en{display:block;font:300 clamp(34px,4.4vw,64px)/1.1 var(--en);letter-spacing:-.01em}
.t-wi-jp{display:block;margin-top:14px;font:500 clamp(14px,1.2vw,17px)/1.4 var(--jp);letter-spacing:.2em;color:#E6E4F5}
@media(prefers-reduced-motion:reduce){.t-wi{display:none}}

/* ══ 2026-09-28 Codexレビュー 6・7・8（🎨Iris）。文字の大きさ・余白は変えない ══ */
/* 6) 提供中と準備中の差：写真の大きさ・余白はそのまま。01・02は見出しの線を 2px→3px、準備中は写真を白黒のまま薄く＋写真の上に COMING SOON */
.p-card:not(.is-soon){border-top-width:3px}
.p-card.is-soon .p-card-photo{position:relative}
.p-card.is-soon .p-card-photo img{filter:grayscale(1) contrast(.62) brightness(1.3)}
.p-soon-en{position:absolute;left:12px;top:12px;z-index:1;padding:4px 8px;background:#fff;color:var(--ink-2);font:600 11px/1.4 var(--logo);letter-spacing:.14em;white-space:nowrap;pointer-events:none}
@media(max-width:767px){.p-soon-en{left:8px;top:8px;font-size:10px}}

/* 7) Ask Your AI は補助：日本語の一文が主。英字は小さな札。CONTACTより一段おとなしく（太さ・マーカーなし）。浮遊する四角は置かない */
.p-ask-h{margin:0;font-weight:400}
.p-ask-h .en{display:block;font:600 12px/1.4 var(--logo);letter-spacing:.14em;text-transform:uppercase;color:var(--violet-d)}
.p-ask-h .jp{display:block;margin-top:12px;font:700 clamp(26px,3vw,44px)/1.35 var(--jp);font-feature-settings:"palt";word-break:keep-all;color:var(--ink)}
.p-ask-note{margin:12px 0 0;font:500 13px/1.7 var(--jp);color:#4A4F66;letter-spacing:.02em}
.p-askband .p-ask-list li a{font-weight:500}

/* 8) 小さな補助文字：サイズと余白はそのまま。細い太さを一段上げ、明るい面のグレーを少し濃く、日本語の字間は詰める */
.hero-side{color:#343948}
.hero-side p{font-weight:500;letter-spacing:.01em}
.hero-side b{color:#262b3b}
.p-sh .jp{letter-spacing:.02em}
.p-white .p-sh .jp,.p-paper .p-sh .jp{color:var(--violet-d)}
.p-foot-col a{font-weight:500;letter-spacing:.02em}
.p-foot-col>a.p-foot-h{font-weight:700}
.p-foot-col span{color:#BCC1CD;font-weight:500;letter-spacing:.02em}
.p-foot-lead{font-weight:500;letter-spacing:.02em}

/* 2026-09-28 髙橋さん「アイコンのずれが気になる」：番号・アイコンの枠の幅を固定し、アイコンは枠の中央に同じ大きさで置く */
.p-ask-list li a{display:grid;grid-template-columns:32px 30px 1fr auto;align-items:center;column-gap:18px}
.p-ask-list li span{display:block;width:32px;font-variant-numeric:tabular-nums}
.p-ask-list li img{display:block;width:26px;height:26px;object-fit:contain;justify-self:center;margin:0}
.p-ask-list li b{margin-left:0;justify-self:end}

/* 2026-09-28 髙橋さん「シンプルに紫だとつまらん」→ 人が向き合って話す写真（案D）を白黒にして紫を重ねる。
   紫で満ちた画面（.t-fillplane）とトップのVISIONに同じ写真。VISIONの上端は透かして、下の紫の画面とつなぎ目を出さない */
.t-fillplane{background:linear-gradient(180deg,rgba(85,70,168,.74),rgba(67,55,143,.88)),url(assets/violet-people.jpg?v=1) center/cover no-repeat,#5546A8}
html.t-motion .p-vision.p-violet{background:none}
.p-vision.p-violet{position:relative}
.p-vision.p-violet::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(85,70,168,.74),rgba(67,55,143,.88)),url(assets/violet-people.jpg?v=1) center/cover no-repeat,#5546A8}
html.t-motion .p-vision.p-violet::before{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24svh);mask-image:linear-gradient(to bottom,transparent 0,#000 24svh)}
/* 写真が2枚ずれて重なって見えないよう、紫の画面とVISIONの写真を画面に固定して位置をそろえる */
.t-fillplane,.p-vision.p-violet::before{background-attachment:scroll,fixed,scroll}

/* 2026-09-28 VALUE の3つ（髙橋さん決定）：言い切りの下に、番号つきの行で並べる（対称の3枚カードにはしない） */
.p-values{list-style:none;margin:clamp(40px,4.5vw,64px) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.28)}
.p-values li{display:grid;grid-template-columns:56px minmax(0,18em) 1fr;align-items:baseline;column-gap:24px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.p-values-no{font:600 14px/1 var(--en);color:#C9C3F2;letter-spacing:.06em}
.p-values-en{margin:0;font:500 clamp(20px,1.9vw,28px)/1.3 var(--en);color:#fff;letter-spacing:-.005em}
.p-values-jp{margin:0;font:500 clamp(14px,1.1vw,16px)/1.7 var(--jp);color:#E6E4F5}
@media(max-width:767px){.p-values li{grid-template-columns:40px 1fr;row-gap:4px}.p-values-jp{grid-column:2}}
.p-vision .p-values .p-values-en{color:#fff}.p-vision .p-values .p-values-jp{color:#E6E4F5}.p-vision .p-values .p-values-no{color:#C9C3F2}

/* 2026-09-28 会社情報の理念：MISSION・VISION・VALUE（髙橋さん決定）。左に区分、右に言葉。行で並べる */
.p-mvv{margin:clamp(32px,4vw,56px) 0 clamp(40px,5vw,64px);border-top:1px solid var(--line,#D9D7CF)}
.p-mvv-row{display:grid;grid-template-columns:minmax(0,11em) 1fr;column-gap:clamp(24px,4vw,64px);padding:clamp(24px,2.6vw,36px) 0;border-bottom:1px solid var(--line,#D9D7CF)}
.p-mvv dt{margin:0}
.p-mvv-k{display:block;font:600 13px/1.4 var(--logo);letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.p-mvv-kj{display:block;margin-top:6px;font:500 13px/1.4 var(--jp);color:#4E5770}
.p-mvv dd{margin:0}
.p-mvv-en{margin:0;font:400 clamp(22px,2.2vw,32px)/1.3 var(--en);color:var(--ink);letter-spacing:-.005em}
.p-mvv-jp{margin:8px 0 0;font:700 clamp(15px,1.3vw,18px)/1.6 var(--jp);color:var(--ink)}
.p-mvv-vals{list-style:none;margin:20px 0 0;padding:0}
.p-mvv-vals li{display:grid;grid-template-columns:36px minmax(0,13em) 1fr;align-items:baseline;column-gap:16px;padding:12px 0;border-top:1px solid var(--line,#E4E2DA)}
.p-mvv-vals span{font:600 13px/1 var(--en);color:var(--violet)}
.p-mvv-vals b{font:500 17px/1.4 var(--en);color:var(--ink)}
.p-mvv-vals em{font-style:normal;font:500 15px/1.6 var(--jp);color:#3F4455}
@media(max-width:767px){.p-mvv-row{grid-template-columns:1fr;row-gap:12px}.p-mvv-vals li{grid-template-columns:32px 1fr;row-gap:2px}.p-mvv-vals em{grid-column:2}}

/* 2026-09-28 トップにも MISSION・VISION（髙橋さん「いいよ」）：VALUEの3つの下に、同じ行の形で2つ */
.p-mv{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,56px);margin:clamp(32px,4vw,48px) 0 0}
.p-mv>div{padding:18px 0;border-top:1px solid rgba(255,255,255,.28)}
.p-mv dt{font:600 12px/1.4 var(--logo);letter-spacing:.16em;text-transform:uppercase;color:#C9C3F2}
.p-mv dd{margin:8px 0 0}
.p-mv span{display:block;font:500 clamp(18px,1.6vw,24px)/1.35 var(--en);color:#fff}
.p-mv em{display:block;margin-top:4px;font-style:normal;font:500 clamp(14px,1.1vw,16px)/1.6 var(--jp);color:#E6E4F5}
@media(max-width:767px){.p-mv{grid-template-columns:1fr}}

/* 2026-09-28 髙橋さん「ちゃんとPを真ん中に」：字間（letter-spacing）がPの右にだけ付いて、右の棒との間が広かった。
   Pと棒の字間を0にし、左右の間隔は棒の margin だけで取る（実際の文字の形で左右を測ってそろえた） */
.t-brand .p,.t-wi-p{letter-spacing:0}
.t-brand .b,.t-wi-bar{letter-spacing:0}
.t-wi-p{margin-right:0}
/* 画素で測って合わせた（3倍で撮影）：Pの左右の余白をそろえ、Eの後ろに付く字間の分だけ左の棒の外側を詰める */
.t-brand .p{margin-right:.05em}
.t-brand .b:first-of-type{margin-left:0}

/* スマホのメニュー：開いている間は後ろを暗くし、そこを押すと閉じる（2026-09-28） */
.p-menu-veil{position:fixed;inset:0;z-index:40;background:rgba(14,23,48,.38);display:none}
html.p-menu-open .p-menu-veil{display:block}
html.p-menu-open body{overflow:hidden}

/* 2026-09-28 髙橋さん「スマホだと最初のスクロールがめっちゃ重い」：スマホでは、リングが開く間の重い部品を減らす
   ・格子は静止（grid.js が線を毎回動かさない）し、拡大中は隠す　・光の線を少なく　・写真の画面固定をやめる　・リングの光のにじみを拡大中は消す */
@media (max-width:767px){
  html.t-zooming .t-grid{display:none}
  .t-fillplane,.p-vision.p-violet::before{background-attachment:scroll,scroll,scroll}
  html.t-zooming .t-ring-glow{display:none}
  .t-streaks i:nth-child(n+5){display:none}
  html.t-zooming .t-head{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html.t-zooming .t-head:not([data-tone=dark]){background:rgba(255,255,255,.92)}
  html.t-zooming .t-head[data-tone=dark]{background:rgba(58,46,132,.94)}
}

/* 2026-09-28 トップの理念：OUR PHILOSOPHY の下に MISSION→VISION→VALUE の順（髙橋さん「これでいいの？」への対応） */
.p-mv-top{margin:clamp(32px,4vw,48px) 0 clamp(40px,5vw,64px)}
.p-mv dt small,.p-value-label small{display:inline-block;margin-left:10px;font:500 12px/1.4 var(--jp);letter-spacing:.04em;text-transform:none;color:#E6E4F5}
.p-value-label{margin:0 0 14px;font:600 12px/1.4 var(--logo);letter-spacing:.16em;text-transform:uppercase;color:#C9C3F2}
.p-vision .p-state{margin-top:0}
/* お問い合わせ帯：ご相談の流れ（返信の期限は約束しない） */
.p-flow{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 0;padding:0;font:500 14px/1.6 var(--jp);color:#D5D7E3}
.p-flow li{display:flex;align-items:center;gap:8px}
.p-flow li+li::before{content:"→";margin-right:12px;color:#8E93B0;font-family:var(--en)}
.p-flow b{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid rgba(255,255,255,.4);border-radius:50%;font:600 11px/1 var(--en);color:#fff}
.p-askband .p-flow{display:none}

/* 2026-09-28 髙橋さん「なぜバリューだけでかい？」：MISSION・VISION・VALUE を同じ大きさの段にそろえる（言い切りだけ突出させない） */
.p-vision .p-state-en{font:500 clamp(18px,1.6vw,24px)/1.35 var(--en);letter-spacing:0}
.p-vision .p-state-jp{margin-top:6px}
.p-vision .p-state-jp span{padding:0;background:none;font:500 clamp(14px,1.1vw,16px)/1.6 var(--jp);color:#E6E4F5;letter-spacing:0}
.p-vision .p-state-jp span::before,.p-vision .p-state-jp span::after{display:none!important}
.p-value-label{margin-top:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.28)}
.p-mv-top{margin-bottom:0}
.p-vision .p-values{margin-top:24px}
/* 紫・濃紺の面の上のヘッダー：透けすぎて後ろの大きな文字と重なって読めなかった → 紫のすりガラスにして後ろを抑える */
.t-head[data-tone=dark]{background:rgba(58,46,132,.78)}
.p-vision .p-state-jp{margin-top:6px!important}
/* 2026-09-28 髙橋さん「ミッション・ビジョン・バリューだけ、文字以上タイトル未満の大きさに」：見出し（最大約52px）と本文（15〜16px）の間 */
.p-mv span,.p-vision .p-state-en{font:500 clamp(24px,2.6vw,36px)/1.3 var(--en);letter-spacing:-.005em}
.p-mv em,.p-vision .p-state-jp span{font:500 clamp(15px,1.3vw,18px)/1.6 var(--jp)}
@media(max-width:767px){.p-mv span,.p-vision .p-state-en{font-size:clamp(22px,6.2vw,26px)}}
/* 2026-09-28 会社情報のMVVをトップと同じ大きさに */
.p-mvv-en{font:500 clamp(24px,2.6vw,36px)/1.3 var(--en)}
.p-mvv-jp{font:500 clamp(15px,1.3vw,18px)/1.6 var(--jp)}
@media(max-width:767px){.p-mvv-en{font-size:clamp(22px,6.2vw,26px)}}
/* 2026-09-28 明るい面のヘッダー：下に紫のカードが来ると、すりガラスが紫に染まって薄い色に見えた → 白を濃くして下の色を拾いにくくする */
.t-head:not([data-tone=dark]){background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
/* 短い一文が1文字だけ次の行に落ちないよう、文節ごとに折り返す */
.p-strong,.p-catch,.p-cta-catch{text-wrap:balance;word-break:auto-phrase}

/* ═══ サービスページの型（2026-09-29 髙橋さん「DYMくらい理路整然と」）〜とは／3つの特徴／対応範囲／もう一つの事業 ═══ */
.p-about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);padding-top:28px;border-top:2px solid var(--ink)}
.p-about-k{margin:0;font:900 clamp(22px,2.2vw,30px)/1.5 var(--jp);font-feature-settings:"palt";color:var(--ink)}
.p-about-b p{margin:0 0 12px;font-size:15px;line-height:2;font-weight:500;color:var(--ink-2)}
.p-reasons .p-scene{font-size:clamp(18px,1.6vw,22px)}
.p-reasons .p-rs{margin:14px 0 20px;font-size:15px;line-height:1.9;font-weight:500;color:var(--ink-2)}
.p-scope{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.p-scope li{padding:24px 24px 8px 0}
.p-scope li+li{padding-left:24px;border-left:1px solid var(--line)}
.p-scope h3{margin:0;font:900 clamp(16px,1.4vw,19px)/1.5 var(--jp);color:var(--ink)}
.p-scope h3::before{content:"";display:block;width:12px;height:12px;margin-bottom:14px;background:var(--violet)}
.p-scope p{margin:10px 0 0;font-size:14px;line-height:1.85;color:var(--ink-2)}
.p-next.is-1{grid-template-columns:minmax(0,1fr)}
.p-next.is-1 a:first-child{padding-right:0}
@media(max-width:1023px){.p-scope{grid-template-columns:repeat(2,minmax(0,1fr))}.p-scope li:nth-child(3){padding-left:0;border-left:0}.p-scope li:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:767px){.p-about{grid-template-columns:1fr;gap:16px}.p-scope{grid-template-columns:1fr}.p-scope li,.p-scope li+li{padding:20px 0 4px;border-left:0}.p-scope li+li{border-top:1px solid var(--line)}}

/* ═══ サービスページ 2回目（2026-09-29 10社調査を受けて）対象／相談の例／段階の表／体制／ツール／向き不向き ═══ */
.p-who{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;margin:clamp(28px,3vw,40px) 0 0;padding:20px 24px;background:var(--paper)}
.p-paper .p-who{background:#fff}
.p-who dt{font-size:13px;font-weight:700;color:var(--violet-d);padding-top:2px}
.p-who dd{margin:0;font-size:15px;line-height:1.9;font-weight:700;color:var(--ink)}
.p-note{margin:0 0 20px;font-size:13px;line-height:1.8;color:var(--ink-2)}
.p-tools+.p-note{margin:20px 0 0}
.p-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.p-case{display:flex;flex-direction:column;padding:28px;background:#fff;border-top:3px solid var(--violet)}
.p-white .p-case{background:var(--paper)}
.p-case .p-sno{font:600 12px var(--en);letter-spacing:.14em;color:var(--violet)}
.p-case h3{margin:10px 0 0;font:900 clamp(18px,1.5vw,21px)/1.5 var(--jp);font-feature-settings:"palt";word-break:auto-phrase}
.p-case-scene{margin:14px 0 0;font-size:14px;line-height:1.9;color:var(--ink-2)}
.p-case dl{margin:auto 0 0;padding-top:20px}
.p-case dl div{padding:14px 0;border-top:1px solid var(--line)}
.p-case dt{font-size:12px;font-weight:700;color:var(--violet-d)}
.p-case dd{margin:6px 0 0;font-size:14px;line-height:1.85;font-weight:700;color:var(--ink)}
.p-ptable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.p-ptable{width:100%;min-width:760px;border-collapse:collapse;border-top:2px solid var(--ink);font-size:14px;line-height:1.8}
.p-ptable th,.p-ptable td{padding:18px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.p-ptable thead th{font-size:12px;font-weight:700;color:var(--violet-d);padding-top:14px;padding-bottom:14px}
.p-ptable tbody th{width:15%;font:900 15px/1.5 var(--jp);color:var(--ink);white-space:nowrap}
.p-ptable tbody th span{display:block;margin-bottom:4px;font:600 12px var(--en);color:var(--violet)}
.p-ptable td{color:var(--ink-2)}
.p-ptable td:nth-child(3){font-weight:700;color:var(--ink)}
.p-ptable td:last-child{background:rgba(85,70,168,.05);font-weight:700;color:var(--ink)}
.p-resps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.p-resp{padding:24px 24px 8px 0}
.p-resp+.p-resp{padding-left:24px;border-left:1px solid var(--line)}
.p-resp h3{margin:0;font:900 clamp(16px,1.4vw,19px)/1.5 var(--jp)}
.p-resp h3 small{display:block;margin-bottom:6px;font:600 12px var(--en);letter-spacing:.14em;color:var(--violet)}
.p-resp.is-us h3{color:var(--violet-d)}
.p-resp ul{margin:14px 0 0;padding:0;list-style:none}
.p-resp li{padding:8px 0;border-top:1px solid var(--line);font-size:14px;font-weight:700;line-height:1.7}
.p-tools{margin:0;border-top:2px solid var(--ink)}
.p-tools>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.p-tools dt{font-size:13px;font-weight:700;color:var(--violet-d);padding-top:6px}
.p-tools dd{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.p-tools dd span{padding:6px 14px;border:1px solid var(--line);background:#fff;font:600 14px var(--en);color:var(--ink)}
.p-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.p-fit>div{padding:28px;background:#fff}
.p-white .p-fit>div{background:var(--paper)}
.p-fit h3{margin:0;font:900 clamp(16px,1.4vw,19px)/1.5 var(--jp)}
.p-fit h3 small{display:block;margin-bottom:6px;font:600 12px var(--en);letter-spacing:.14em}
.p-fit-y h3 small{color:var(--violet)}
.p-fit-n h3 small{color:var(--ink-2)}
.p-fit ul{margin:16px 0 0;padding:0;list-style:none}
.p-fit li{position:relative;padding:10px 0 10px 22px;border-top:1px solid var(--line);font-size:14px;font-weight:700;line-height:1.7}
.p-fit-y li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:10px;background:var(--violet)}
.p-fit-n li::before{content:"";position:absolute;left:0;top:22px;width:10px;height:2px;background:var(--ink-2)}
@media(max-width:1023px){.p-cases{grid-template-columns:1fr}}
@media(max-width:767px){.p-who{grid-template-columns:1fr;gap:6px;padding:16px}.p-case{padding:22px}.p-resps,.p-fit{grid-template-columns:1fr}.p-resp,.p-resp+.p-resp{padding:20px 0 4px;border-left:0}.p-resp+.p-resp{border-top:1px solid var(--line)}.p-tools>div{grid-template-columns:1fr;gap:10px}.p-fit>div{padding:22px}}
@media(max-width:767px){
  .p-ptable{min-width:0}.p-ptable thead{display:none}
  .p-ptable,.p-ptable tbody,.p-ptable tr,.p-ptable th,.p-ptable td{display:block;width:auto}
  .p-ptable tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .p-ptable th,.p-ptable td{padding:4px 0;border:0}
  .p-ptable tbody th{width:auto;margin-bottom:6px}
  .p-ptable td::before{display:block;font-size:11px;font-weight:700;color:var(--violet-d)}
  .p-ptable td:nth-child(2)::before{content:"INTEPRALがやること"}
  .p-ptable td:nth-child(3)::before{content:"出てくるもの";margin-top:6px}
  .p-ptable td:last-child{margin-top:8px;padding:10px 12px}
  .p-ptable td:last-child::before{content:"お客様に決めていただくこと"}
}

/* ═══ サービスページ 3回目（2026-09-29 図と写真／4つの入り口／不安に答える）═══ */
.p-about2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start;padding-top:28px;border-top:2px solid var(--ink)}
.p-about2 .p-about-k{margin-bottom:18px}
.p-about-ph{margin:0;aspect-ratio:4/3;overflow:hidden}
.p-about-ph img{width:100%;height:100%;object-fit:cover;display:block}
/* 図 */
.p-dg-wrap{margin:0 0 clamp(28px,3vw,40px);padding:clamp(20px,3vw,36px);background:#fff;border:1px solid var(--line)}
.p-paper .p-dg-wrap{background:#fff}.p-white .p-dg-wrap{background:var(--paper);border-color:transparent}
.p-dg-plain{padding:0;background:none!important;border:0}
.p-dg-wrap figcaption{margin-top:12px;font-size:12px;color:var(--ink-2)}
.p-dg-wrap figcaption.is-top{margin:0 0 12px;font-weight:700;color:var(--violet-d)}
.p-dg{display:block;width:100%;height:auto;font-family:var(--jp)}
.dg-box{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.dg-main{fill:var(--violet);stroke:var(--violet)}
.dg-main+text,.dg-main+text+text{fill:#fff}
.dg-t{font-size:17px;font-weight:900;fill:var(--ink)}
.dg-s{font-size:13px;font-weight:500;fill:var(--ink-2)}
.dg-xs{font-size:12px;font-weight:700;fill:var(--ink-2)}
.dg-k{font:600 13px var(--en);letter-spacing:.14em;fill:var(--violet)}
.dg-v{fill:var(--violet-d)}
.dg-w{fill:#fff!important}
.dg-hum{fill:none;stroke:var(--ink-2);stroke-width:2}
.dg-man{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:4 4}
.dg-auto,.dg-arrow-b{fill:none;stroke:var(--violet);stroke-width:2.5}
.dg-arrow-b{stroke:var(--ink);stroke-width:2}
.dg-head{fill:var(--violet)}
.dg-arrow-b+.dg-head{fill:var(--ink)}
.dg-l1{fill:rgba(85,70,168,.12)}.dg-l2{fill:rgba(85,70,168,.32)}.dg-l3{fill:var(--ink)}
/* 4つの入り口 */
.p-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.p-menu-i{display:flex;flex-direction:column;padding:28px 24px;background:#fff;border-top:3px solid var(--ink)}
.p-white .p-menu-i{background:var(--paper)}
.p-menu-i.is-last{border-top-color:var(--violet)}
.p-menu-ic{width:72px;height:56px;margin-bottom:18px}
.dg-ic{fill:none;stroke:var(--ink);stroke-width:2}
.dg-icv{fill:none;stroke:var(--violet);stroke-width:2.5}
.dg-icf{fill:var(--violet)}
.dg-dash{stroke-dasharray:4 3;stroke:var(--ink-2)}
.p-menu-i .p-sno{font:600 12px var(--en);letter-spacing:.14em;color:var(--violet)}
.p-menu-i h3{margin:6px 0 0;font:900 clamp(22px,2vw,28px)/1.3 var(--jp)}
.p-menu-d{margin:12px 0 0;font-size:14px;line-height:1.85;color:var(--ink-2)}
.p-menu-e{margin:auto 0 0;padding-top:16px;font-size:13px;line-height:1.7;font-weight:700;color:var(--ink)}
.p-menu-e b{display:block;margin-bottom:2px;font-size:11px;color:var(--violet-d)}
.p-menu-note{margin:20px 0 0;font-size:14px;line-height:1.9;color:var(--ink-2)}
/* 写真の帯 */
.p-band-ph{position:relative;margin:0;height:clamp(220px,32vw,420px);overflow:hidden}
.p-band-ph img{width:100%;height:100%;object-fit:cover;display:block}
.p-band-ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:0 max(16px,calc((100% - 1296px)/2)) clamp(20px,3vw,36px)}
.p-band-ph figcaption span{display:inline-block;padding:12px 20px;background:var(--ink);color:#fff;font:900 clamp(16px,1.6vw,22px)/1.4 var(--jp)}
/* 流れ（縦のタイムライン） */
.p-steps2{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.p-steps2 li{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.p-steps2 li::before{content:"";position:absolute;left:23px;top:70px;bottom:-22px;width:2px;background:rgba(85,70,168,.25)}
.p-steps2 li:last-child::before{display:none}
.p-step-no{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;background:var(--violet);color:#fff;font:600 15px var(--en)}
.p-step-b{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:8px 28px;align-items:start}
.p-step-b h3{margin:10px 0 0;font:900 clamp(17px,1.5vw,20px)/1.4 var(--jp)}
.p-step-b>p{margin:10px 0 0;font-size:14px;line-height:1.85;color:var(--ink-2)}
.p-step-b dl{margin:0;display:grid;gap:8px}
.p-step-b dl div{padding:8px 12px;background:#fff}
.p-white .p-step-b dl div{background:var(--paper)}
.p-step-b dl div.is-you{background:rgba(85,70,168,.08)}
.p-step-b dt{font-size:11px;font-weight:700;color:var(--violet-d)}
.p-step-b dd{margin:2px 0 0;font-size:14px;font-weight:700;line-height:1.6}
/* AIの不安 */
.p-sqs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:clamp(28px,3vw,40px)}
.p-sq{padding:24px 26px;background:#fff;border-left:3px solid var(--violet)}
.p-white .p-sq{background:var(--paper)}
.p-sq:last-child:nth-child(odd){grid-column:1/-1}
.p-sq-q{margin:0;font:900 clamp(16px,1.4vw,19px)/1.55 var(--jp)}
.p-sq-a{margin:12px 0 0;font-size:14px;line-height:1.9;color:var(--ink-2)}
.p-sq-q span,.p-sq-a span{display:inline-block;min-width:32px;margin-right:6px;font:600 13px var(--en);color:var(--violet)}
.p-sq-a span{color:var(--ink)}
@media(max-width:1023px){.p-menu{grid-template-columns:repeat(2,minmax(0,1fr))}.p-step-b{grid-template-columns:1fr}}
@media(max-width:767px){.p-about2{grid-template-columns:1fr}.p-menu,.p-sqs{grid-template-columns:1fr}.p-steps2 li{grid-template-columns:48px minmax(0,1fr);gap:14px}.p-steps2 li::before{left:23px}.p-dg-wrap{padding:14px;overflow-x:auto}.p-dg-ba,.p-dg-lv{min-width:620px}.p-dg-team{min-width:560px}.p-band-ph figcaption span{font-size:15px;padding:10px 14px}}
.p-menu-i.is-main{background:var(--violet)!important;border-top-color:var(--violet);color:#fff}
.p-menu-i.is-main h3,.p-menu-i.is-main .p-menu-e{color:#fff}
.p-menu-i.is-main .p-sno,.p-menu-i.is-main .p-menu-e b{color:#D9D5F2}
.p-menu-i.is-main .p-menu-d{color:#ECEAF8}
.p-menu-i.is-main .dg-ic{stroke:#fff}.p-menu-i.is-main .dg-icf{fill:#fff}
.p-dg-mt{margin:28px 0 0}
@media(max-width:767px){.p-dg-split{min-width:680px}}
.dg-lg{fill:var(--ink-2)!important}
/* 作れるシステム（2026-09-29） */
.p-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.p-kind{padding:28px 26px;background:#fff;border-top:3px solid var(--violet)}
.p-white .p-kind{background:var(--paper)}
.p-kind h3{margin:0;font:900 clamp(19px,1.7vw,23px)/1.4 var(--jp)}
.p-kind-d{margin:12px 0 0;font-size:14px;line-height:1.9;color:var(--ink-2)}
.p-kind-f{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0;padding:0;list-style:none}
.p-kind-f li{padding:4px 10px;background:rgba(85,70,168,.08);font-size:12px;font-weight:700;color:var(--violet-d)}
@media(max-width:1023px){.p-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.p-kinds{grid-template-columns:1fr}}

/* 浮くお問い合わせを常に出すので、フッターの最後の行が隠れないよう下に余白（2026-09-29） */
.p-foot{padding-bottom:104px}
@media(max-width:767px){.p-foot{padding-bottom:80px}}

/* ═══ 浮くお問い合わせ 案D（2026-09-29 髙橋さん選定。DYM型：紫のグラデーション＋メールのアイコン＋背景に薄い Contact）═══ */
.p-fab{width:300px;height:72px;padding:0 24px;gap:14px;border-radius:0;background:linear-gradient(120deg,#7B6CD6 0%,var(--violet) 45%,var(--violet-d) 100%);box-shadow:0 16px 36px rgba(62,49,132,.35);font:900 17px var(--jp);letter-spacing:.02em}
.p-fab::before{content:"Contact";inset:auto -6px -14px auto;background:none;transform:none;font:italic 600 56px/1 var(--en);letter-spacing:-.01em;color:rgba(255,255,255,.14);white-space:nowrap;transition:none}
.p-fab::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:p-fab-sh 4s ease-in-out infinite}
@keyframes p-fab-sh{55%,100%{transform:translateX(120%)}}
.p-fab svg{flex:0 0 26px;width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8}
.p-fab b{margin-left:auto}
.p-fab:hover,.p-fab:focus-visible{box-shadow:0 20px 44px rgba(62,49,132,.45)}
.p-fab:hover::before,.p-fab:focus-visible::before{transform:none}
@media(max-width:767px){.p-fab{left:12px;right:12px;bottom:12px;width:auto;height:60px;padding:0 20px;font-size:15px}.p-fab::before{font-size:46px}.p-fab b{font-size:18px}.p-foot{padding-bottom:96px}}
@media(prefers-reduced-motion:reduce){.p-fab::after{animation:none;display:none}}
/* スマホは縦版の図だけ出す（2026-09-30） */
.p-dg-sp{display:none}
@media(max-width:767px){.p-dg-wrap{overflow:visible}.p-dg-ba,.p-dg-split,.p-dg-lv{display:none}.p-dg-sp{display:block;min-width:0}}
/* 本文へ移動（キーボードで最初にTabを押したときだけ出る）2026-09-30 */
.p-skip{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 18px;background:var(--ink);color:#fff;font:700 14px var(--jp);transition:top .2s}
.p-skip:focus{top:16px;outline:2px solid #fff;outline-offset:-5px}
.p-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 技術の選び方／品質／セキュリティ／開発体制（2026-09-30） */
.p-stk{margin:0;border-top:2px solid var(--ink)}
.p-stk-r{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.p-stk dt{font:900 15px/1.5 var(--jp);color:var(--ink)}
.p-stk dt small{display:block;margin-top:2px;font-size:12px;font-weight:700;color:var(--violet-d)}
.p-stk dd{margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.p-stk dd span{padding:6px 14px;border:1px solid var(--line);background:#fff;font:600 13px var(--en);color:var(--ink)}
.p-white .p-stk dd span{background:var(--paper)}
.p-qcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.p-qc{padding:26px 22px;background:#fff;border-top:3px solid var(--violet)}
.p-white .p-qc{background:var(--paper)}
.p-qc .p-sno{font:600 12px var(--en);letter-spacing:.14em;color:var(--violet)}
.p-qc h3{margin:8px 0 0;font:900 clamp(16px,1.4vw,19px)/1.5 var(--jp)}
.p-qc p{margin:10px 0 0;font-size:14px;line-height:1.85;color:var(--ink-2)}
@media(max-width:1023px){.p-qcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.p-qcs{grid-template-columns:1fr}.p-stk-r{grid-template-columns:1fr;gap:10px}.p-dg-team2{display:none}}
/* AIに聞く（小さな1行）2026-09-30 */
.p-askmini{background:var(--paper);border-top:1px solid var(--line);padding:18px 0}
.p-askmini .t-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.p-askmini p{margin:0;font-size:13px;font-weight:700;color:var(--ink-2)}
.p-askmini ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none}
.p-askmini a{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--en);color:var(--ink)}
.p-askmini a:hover{color:var(--violet)}
.p-askmini img{width:16px;height:16px}
.p-askmini b{font-weight:500;font-size:12px;color:var(--ink-2)}
/* 相談しやすさの帯／AIの確認項目／責任の分け方（2026-09-30 ユーザー目線レビュー） */
.p-easy{background:var(--violet);color:#fff}
.p-easy ul{display:flex;flex-wrap:wrap;gap:8px 32px;margin:0;padding:16px 0;list-style:none}
.p-easy li{position:relative;padding-left:22px;font:700 14px/1.6 var(--jp)}
.p-easy li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:7px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.p-chk{margin:0 0 clamp(24px,3vw,36px);padding:24px 26px;background:#fff;border:1px solid var(--line)}
.p-white .p-chk{background:var(--paper);border-color:transparent}
.p-chk h3{margin:0 0 12px;font:900 17px/1.5 var(--jp)}
.p-chk ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px;margin:0;padding:0;list-style:none}
.p-chk li{padding:10px 0;border-top:1px solid var(--line)}
.p-chk b{display:block;font-size:14px;color:var(--violet-d)}
.p-chk span{display:block;margin-top:4px;font-size:13px;line-height:1.75;color:var(--ink-2)}
.p-share{margin-bottom:clamp(24px,3vw,36px)}
@media(max-width:1023px){.p-chk ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.p-chk ul{grid-template-columns:1fr}.p-easy ul{flex-direction:column;gap:6px}.p-easy li{font-size:13px}}
/* スマホで見出しの最後の数文字だけ落ちないように（2026-09-30 Quinn指摘10） */
.p-sq-q,.p-share h3,.p-qc h3,.p-case h3,.p-kind h3{text-wrap:balance}
@media(max-width:767px){p.t-hero-lede .nb{display:inline-block}}   /* 2026-09-30 説明文を具体的にしたので、スマホも文節で折り返す */
/* AIに聞く：もう少し大きく（2026-09-30 髙橋さん） */
.p-askmini{padding:clamp(28px,3vw,40px) 0}
.p-askmini .t-wrap{gap:14px 32px}
.p-askmini p{font-size:16px;color:var(--ink)}
.p-askmini ul{gap:10px}
.p-askmini a{gap:10px;padding:12px 20px;background:#fff;border:1px solid var(--line);font-size:15px;transition:border-color .3s,color .3s}
.p-askmini a:hover{border-color:var(--violet)}
.p-askmini img{width:22px;height:22px}
.p-askmini b{font-size:14px}
@media(max-width:767px){.p-askmini ul{display:grid;grid-template-columns:1fr 1fr;width:100%}.p-askmini a{justify-content:center;padding:12px 10px}}
@media(max-width:767px){.p-askmini li a{display:flex}}
.p-band-ph.is-tall{height:clamp(280px,40vw,560px)}.p-band-ph.is-tall img{object-position:50% 30%}   /* 2人とタブレットが両方収まるように（2026-09-30） */
.p-band-ph.is-up img{object-position:50% 18%}
/* このページの目次（2026-09-30） */
.p-toc{background:#fff;border-bottom:1px solid var(--line)}
.p-toc .t-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-top:16px;padding-bottom:16px}
.p-toc span{font-size:12px;font-weight:700;color:var(--violet-d)}
.p-toc ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.p-toc a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink);transition:border-color .3s,color .3s}
.p-toc a::after{content:"↓";font:500 12px var(--en);color:var(--violet)}
.p-toc a:hover{border-color:var(--violet);color:var(--violet)}
.p-sh[id]{scroll-margin-top:110px}
@media(max-width:767px){.p-toc ul{display:grid;grid-template-columns:1fr 1fr;width:100%}.p-toc a{justify-content:space-between;padding:10px 12px}}
/* 短いページ用の小さなお問い合わせ帯（2026-09-30） */
.p-cta-mini{background:var(--ink);color:#fff;padding:clamp(28px,3vw,40px) 0}
.p-cta-mini .t-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.p-cta-mini p{margin:0;font:700 16px/1.7 var(--jp)}
@media(max-width:767px){.p-toc li a{display:flex;height:100%;box-sizing:border-box}}

/* 2026-09-30 髙橋さん「WindowsのPCだと遅いらしい」：スマホだけに入れていた軽量化を、PCにも広げる。
   計測（GPUなし・CPU4倍遅い）で、リングが開く間に33〜43fps。動画を止める／光のにじみを消すと61fpsに戻った。
   拡大中だけ、格子を隠す・リングの光のにじみを消す・ヘッダーのすりガラスを止める（動画の一時停止は top.js） */
html.t-zooming .t-grid{display:none}
html.t-zooming .t-ring-glow{display:none}
html.t-zooming .t-head{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.t-zooming .t-head:not([data-tone=dark]){background:rgba(255,255,255,.94)}
html.t-zooming .t-head[data-tone=dark]{background:rgba(58,46,132,.94)}

/* 2026-10-04 レビュー中-7：サービスページの「続きを読む」（スマホだけ。site.js が is-shut を付け外しする） */
.p-fold-btn{display:none}
@media(max-width:767px){
  .p-fold.is-shut{display:none}
  .p-fold-btn:not([hidden]){display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:24px;height:52px;border:1px solid currentColor;background:transparent;color:var(--violet);font:700 15px var(--jp);letter-spacing:.04em;cursor:pointer}
  .p-fold-btn::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--mo)}
  .p-fold-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
  .p-fold-btn:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
}

/* 2026-10-04 レビュー中-3：スマホのヒーロー。動画を小さめに映して瓦礫と街区を画面に入れる（top.js の layout と対）。
   リングは画面の高さの56%（PCは66%のまま）。動画の上下の端は白に溶かす */
@media(max-width:767px){
  .t-hero-copy{--rc:56%}
  .t-frame-video{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 80%,transparent 100%)}
}

/* 2026-10-04 レビュー低-7：Gemini を押したときのコピー完了の一言 */
.p-askmini .p-askmini-msg{flex:1 0 100%;margin:0;font-size:12px;font-weight:500;line-height:1.6;color:var(--ink-2)}
.p-askmini .p-askmini-msg:empty{display:none}

/* 2026-10-04 レビュー低-1：紫の面の小さい英字ラベルを、同じ面の他の白系の文字色にそろえる（基準4.5:1に届かなかった） */
.p-mv dt,.p-value-label,.p-values-no,.p-vision .p-values .p-values-no{color:#E6E4F5}
.p-split .p-keep h3 small{color:#E6E4F5}

/* 2026-10-04 レビュー低-2：本文役の文字を12px以上に（英大文字のラベルはそのまま） */
.hero-side{font-size:12px}
.p-step-b dt{font-size:12px}
.p-doc .pp-table small{font-size:12px}

/* 2026-10-04 レビュー低-3：スマホでフッターのリンクの押せる高さを44px前後に（見た目の行間は保つ） */
@media(max-width:767px){
  .t-footer a,.p-foot a{display:inline-block;padding-block:11px;margin-block:-11px}
}

/* 2026-10-04 レビュー低-10：スマホでプライバシーポリシー第4条の表をカード型に（横スクロールをなくす） */
@media(max-width:767px){
  .p-doc .tbl-scroll{overflow:visible}
  .p-doc .pp-table{min-width:0;width:100%;border:0}
  .p-doc .pp-table thead{display:none}
  .p-doc .pp-table,.p-doc .pp-table tbody,.p-doc .pp-table tr,.p-doc .pp-table td{display:block;width:auto}
  .p-doc .pp-table tr{margin:0 0 16px;border:1px solid var(--line);background:#fff}
  .p-doc .pp-table td{border:0;border-top:1px solid var(--line);padding:10px 14px}
  .p-doc .pp-table td:first-child{border-top:0;background:var(--paper);font-weight:700}
  .p-doc .pp-table td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:12px;font-weight:700;color:var(--violet-d)}
}

/* 2026-10-04 レビュー低-11：ヒーロー動画の一時停止ボタン（top.js が作る）。左下に小さく。拡大中は隠す */
.t-vpause{position:absolute;z-index:4;left:max(24px,calc((100vw - 1440px)/2 + 38px));bottom:24px;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid rgba(14,23,48,.16);border-radius:50%;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);cursor:pointer;transition:opacity .3s}
.t-vpause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.t-vpause .i-play{display:none;fill:currentColor;stroke:none}
.t-vpause.is-paused .i-pause{display:none}.t-vpause.is-paused .i-play{display:block}
.t-vpause:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
html.t-zooming .t-vpause{opacity:0;pointer-events:none}
@media(max-width:767px){.t-vpause{left:16px;bottom:96px;width:44px;height:44px}}