/* Seeker サイト共通スタイル（全ページ）。
   正典: seeker-hp/SPEC.md。トップ専用の部品は top.css。
   色・余白・動きはすべて :root のトークン経由で使う。 */
:root{
  --bg:#eef2f5;
  --paper:#ffffff;
  --panel-2:#f4f6f9;
  --ink:#16213a;
  --ink-2:#4b566b;
  --ink-3:#5d6a80;
  --ink-faint:#c3cbd6;
  --line:#d6dde6;
  --line-2:#e6ebf0;
  --blue:#3080ff;
  --blue-ink:#1f5fd1;
  --amber:#f99c00;
  --amber-soft:#fff2db;
  --amber-ink:#8a5200;
  --navy:#16213a;
  --on-navy:#e9eef6;
  --on-navy-2:#a9b4c6;
  --r-lg:20px;
  --r-md:12px;
  --r-sm:8px;
  --btn-r:8px;
  --wrap:1200px;
  --gut:24px;
  --hd:64px;
  /* 動きの速さとイージングはここに揃える */
  --ease:cubic-bezier(.2,.7,.1,1);
  --t0:.25s;
  --t1:.5s;
  --t2:.7s;
  --font:"IBM Plex Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 16px);-webkit-text-size-adjust:100%}
/* 慣性スクロール（Lenis）が動いている間は、CSS のスムーズスクロールとぶつけない */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.85;letter-spacing:.02em}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.4;letter-spacing:.03em;font-feature-settings:"palt" 1;word-break:auto-phrase}
.hero-lead,.mission-text,.catch,.scene-cap p,.lead,.meta,figcaption,.prof dd,.desc,.ds{word-break:auto-phrase}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
button{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.num{font-variant-numeric:tabular-nums}
/* ---------- buttons / links ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--btn-r);font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color var(--t0) var(--ease),border-color var(--t0) var(--ease),color var(--t0) var(--ease);white-space:nowrap}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#223150}
.btn-line{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn .ar{transition:transform var(--t1) var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
/* テキストリンク: 薄い下線の上に、ホバーで濃い線が左から引かれる */
.tlink{position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;text-decoration:none;color:var(--blue-ink);border:0;padding:0 0 3px;background:none;cursor:pointer}
.tlink::before,.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.tlink::before{opacity:.35}
.tlink::after{transform:scaleX(0);transform-origin:left;transition:transform var(--t1) var(--ease)}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1)}
/* ---------- header ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.hd-bar{max-width:1376px;margin:0 auto;height:var(--hd);display:flex;align-items:center;gap:28px;padding:0 32px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:20px;letter-spacing:.01em}
.logo img{width:22px;height:auto}
.gnav{margin-left:auto;display:flex;align-items:center;gap:26px}
.gnav a{font-size:14px;font-weight:500;text-decoration:none;color:var(--ink-2)}
.gnav a:hover{color:var(--ink)}
.hd .btn{min-height:40px;padding:0 18px;font-size:14px}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;border-radius:var(--r-sm);cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);transition:transform var(--t0) var(--ease),opacity var(--t0)}
.menu-btn span:nth-child(1){top:16px}
.menu-btn span:nth-child(2){top:21px}
.menu-btn span:nth-child(3){top:26px}
.hd.open .menu-btn span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hd.open .menu-btn span:nth-child(2){opacity:0}
.hd.open .menu-btn span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* 読了バー（目次が出ない幅だけ） */
.rbar{display:none;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue);transform-origin:left;transform:scaleX(var(--p,0))}
/* ---------- 章インデックス（PC） ---------- */
.toc{display:none}
.totop{display:none}
/* sketch drawing */
.sk .st path{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.sk .fl{fill:currentColor;opacity:0;transition:opacity var(--t1) var(--ease)}
.sk .st{transition:opacity var(--t1) var(--ease) .2s}
.sk.draw .st path{animation:skdraw 1.4s var(--ease) forwards;animation-delay:var(--d,0s)}
.sk.done .st{opacity:0}
.sk.done .fl{opacity:1}
.sk.done .st path{animation:none;stroke-dashoffset:0}
@keyframes skdraw{to{stroke-dashoffset:0}}
/* ---------- sections ---------- */
.sec{padding:96px 0 0}
.label{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--blue-ink);letter-spacing:.08em;margin-bottom:16px}
.label::before{content:"";width:28px;height:1px;background:currentColor}
.sec-h{font-size:clamp(26px,2.9vw,40px);line-height:1.45;max-width:22em;margin-bottom:40px}
.panel{background:var(--paper);border-radius:var(--r-lg);border:1px solid var(--line-2)}
.tag{display:inline-block;font-size:12px;font-weight:600;color:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:2px 10px;letter-spacing:.04em}
.note{margin-top:10px;font-size:13px;color:var(--ink-3);line-height:1.7}
/* 見出しのマスク表示: 一行ずつ下からせり上がる（JS が行を分けた見出しだけ。保険のタイムアウトつき） */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln-i{display:block;white-space:nowrap}
.mask-ready .ln-i{transform:translateY(108%)}
.mask-ready.in .ln-i{transform:none;transition:transform var(--t2) var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.mask-ready.done .ln-i{transform:none;transition:none}
.promises{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.promise{border-top:2px solid var(--ink);padding-top:20px}
.promise h3{font-size:21px;line-height:1.55}
.promise p{margin-top:10px;color:var(--ink-2)}
/* products: Seeker（白パネルはこれと AI研修だけ） */
.seeker{padding:48px}
.seeker-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 48px;align-items:center}
.seeker h3{margin-top:14px;font-size:clamp(26px,2.6vw,34px)}
.seeker .catch{margin-top:8px;font-size:18px;font-weight:600;color:var(--blue-ink)}
.seeker .desc{margin-top:14px;color:var(--ink-2);font-size:15px}
.keys{margin-top:20px;border-top:1px solid var(--line)}
.keys li{display:grid;grid-template-columns:4.5em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.7}
.keys b{color:var(--ink-3);font-weight:600}
.links-row{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.player{position:relative;border-radius:var(--r-md);overflow:hidden;background:#e6ebf1;border:1px solid var(--line);aspect-ratio:16/9}
.player video{width:100%;height:100%;object-fit:cover;background:#e6ebf1}
.player .play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:20px;border:0;background:transparent;cursor:pointer}
.player .play span{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:var(--btn-r);padding:10px 18px 10px 12px;font-weight:600;font-size:14px;transition:transform var(--t1) var(--ease)}
.player .play:hover span{transform:translateY(-2px)}
.player .play i{width:26px;height:26px;border-radius:50%;background:#fff;position:relative;flex:none}
.player .play i::after{content:"";position:absolute;left:10px;top:7px;border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}
.player.playing .play{display:none}
.player-bar{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-2)}
.snd{white-space:nowrap;flex:none;min-height:44px;padding:0 14px;border:1px solid var(--line);background:var(--paper);border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer}
.snd[aria-pressed="false"]{color:var(--ink-3)}
/* その他のプロダクト: PC は3列（行を subgrid で揃える）、スマホは横スワイプ */
.prod-row{margin-top:56px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(6,auto);column-gap:44px}
.prod{grid-row:span 6;display:grid;grid-template-rows:subgrid;row-gap:0;border-top:1px solid var(--ink);padding-top:22px;transition:transform var(--t1) var(--ease)}
.prod .tag{justify-self:start;align-self:start}
.prod h3{margin-top:12px;font-size:23px}
.prod .catch{margin-top:4px;font-weight:600;font-size:15px;line-height:1.6}
.prod .desc{margin-top:10px;color:var(--ink-2);font-size:14px;line-height:1.8}
.prod .vis{margin-top:16px;align-self:start}
.prod .foot{margin-top:14px;align-self:end}
.prod .meta a{color:inherit;text-underline-offset:3px}
.prod .meta{font-size:13px;color:var(--ink-2);line-height:1.7}
.prod .links{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px 20px}
.cards{position:relative;height:200px;transition:transform var(--t1) var(--ease)}
.cards img{position:absolute;top:8px;width:112px;height:auto;border-radius:8px;box-shadow:0 10px 24px rgba(22,33,58,.16)}
.cards img:nth-child(1){left:calc(50% - 146px);transform:rotate(-8deg)}
.cards img:nth-child(2){left:calc(50% - 56px);top:0;z-index:2}
.cards img:nth-child(3){left:calc(50% + 34px);transform:rotate(8deg)}
.cards-video[hidden],.cards[hidden]{display:none}
.phones{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:250px}
.phones figure{margin:0}
.phones img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#fff;transition:transform var(--t1) var(--ease)}
.phones figcaption{margin-top:4px;font-size:12px;color:var(--ink-3);line-height:1.5}
@media (hover:hover) and (pointer:fine){
  .prod:hover{transform:translateY(-3px)}
  .prod:hover .cards,.prod:hover .phones img{transform:scale(1.025)}
}
/* services: AI研修（白パネル） */
.ai{padding:48px}
.ai-top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:32px 56px;align-items:start}
.ai h3{margin-top:14px;font-size:clamp(26px,2.6vw,34px)}
.ai .lead{margin-top:14px;color:var(--ink-2);font-size:15px}
.lecturer{margin-top:16px;font-size:14px;color:var(--ink-2);line-height:1.8}
.lecturer b{color:var(--ink)}
.badge{display:inline-block;font-size:12px;font-weight:600;color:var(--amber-ink);background:var(--amber-soft);border-radius:6px;padding:3px 10px;letter-spacing:.03em}
.course h4{margin-top:10px;font-size:21px}
.course p{margin-top:10px;font-size:14px;color:var(--ink-2)}
.course dl{margin-top:14px;display:grid;grid-template-columns:5em 1fr;font-size:14px;border-top:1px solid var(--line)}
.course dt,.course dd{padding:9px 0;border-bottom:1px solid var(--line)}
.course dt{color:var(--ink-3);font-weight:600}
.ai-more{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:0 56px;align-items:start}
/* 開閉式: 開いた時の表示は [open] の display で決まる。動きは中身の位置だけ */
.more{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.more summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;cursor:pointer;font-weight:600;font-size:15px}
.more summary::-webkit-details-marker{display:none}
.more summary::after{
content:"";width:12px;height:12px;flex:none;background:
  linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,
  linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;color:var(--ink-3);transition:transform var(--t1) var(--ease)
}
.more[open] summary::after{transform:rotate(45deg)}
.more[open] .more-body{animation:moreIn var(--t1) var(--ease)}
@keyframes moreIn{from{transform:translateY(-6px)}}
.more-body{padding:4px 0 18px}
.topics{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.topics li{padding:10px 0;border-bottom:1px solid var(--line-2)}
.topics li:nth-last-child(-n+2){border-bottom:0}
.topics b{display:block;font-size:14px}
.topics span{display:block;margin-top:2px;font-size:13px;color:var(--ink-2);line-height:1.7}
.est{background:var(--panel-2);border-radius:var(--r-md);padding:18px 20px}
.est .eh{font-size:13px;color:var(--ink-2);line-height:1.7}
.est .ev{margin-top:10px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline;font-size:14px}
.est .ev b{font-size:19px;text-align:right}
.est .ev .tot{border-top:1px solid var(--line);padding-top:8px}
.est .en{margin-top:10px;font-size:12px;color:var(--ink-3);line-height:1.7}
/* SaaS開発・HP制作（容器なし） */
.svc-row{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.svc{border-top:1px solid var(--ink);padding-top:22px;display:flex;flex-direction:column}
.svc .tag{align-self:flex-start}
.svc h3{font-size:23px;margin-top:12px}
.svc h3 span{display:inline-block} /* 折れる時は「の」の後で */
.svc p{margin-top:10px;color:var(--ink-2);font-size:15px}
.svc .fact{margin-top:12px;font-size:14px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:10px}
.svc .fact b{color:var(--ink-3);font-weight:600;margin-right:10px}
.svc .links{margin-top:auto;padding-top:18px}
/* news */
.news{border-top:1px solid var(--ink)}
.news li{border-bottom:1px solid var(--line)}
.news li[hidden]{display:none}
.news a{display:grid;grid-template-columns:7.5em 6.5em 1fr;gap:6px 20px;align-items:baseline;padding:18px 0;text-decoration:none}
.news a:hover .tt{color:var(--blue-ink)}
.news time{font-size:14px;color:var(--ink-3)}
.news .cat{justify-self:start;font-size:12px;font-weight:600;color:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:1px 8px}
.news .cat.new{color:var(--blue-ink);border-color:#bcd3fb}
.news .tt{font-size:15px;line-height:1.75;transition:color var(--t0) var(--ease)}
.news-more{margin-top:18px}
/* company */
.company{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px 64px}
.company h2{font-size:clamp(26px,2.9vw,40px)}
.company .intro{margin-top:18px;color:var(--ink-2);font-size:15px}
.prof{border-top:1px solid var(--ink)}
.prof div{display:grid;grid-template-columns:8em 1fr;gap:4px 24px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.prof dt{color:var(--ink-3);font-weight:600;font-size:14px}
.prof dd small{display:block;font-size:13px;color:var(--ink-2)}
.prof a{color:var(--blue-ink)}
/* recruit */
.recruit{background:var(--navy);color:var(--on-navy);border-radius:var(--r-lg);padding:48px 56px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;align-items:center}
.recruit .label{color:#8fb6ff}
.recruit h2{font-size:clamp(24px,2.6vw,34px);color:#fff}
.recruit p{margin-top:16px;color:var(--on-navy-2)}
.recruit .facts{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.recruit .facts span{font-size:13px;border:1px solid rgba(233,238,246,.28);border-radius:6px;padding:2px 10px;color:var(--on-navy)}
.recruit .btn{margin-top:24px;background:#fff;color:var(--ink)}
.recruit .btn:hover{background:#dfe7f4}
.recruit .art{margin:0}
.recruit .art .sk{color:#cfd8e6;height:auto}
.recruit .art figcaption{margin-top:10px;font-size:12px;color:var(--on-navy-2)}
/* contact */
.contact{border-top:1px solid var(--ink);padding-top:40px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 56px;align-items:end}
.contact h2{font-size:clamp(28px,3.2vw,42px)}
.contact p{margin-top:14px;color:var(--ink-2)}
.contact .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.contact .mail{margin-top:10px;font-size:14px;color:var(--ink-3);text-align:right;width:100%}
/* footer */
.ft{margin-top:96px;background:var(--paper);border-top:1px solid var(--line);padding:48px 0 36px;font-size:14px;color:var(--ink-2)}
.ft-grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:32px}
.ft h4{font-size:13px;color:var(--ink);margin-bottom:10px;letter-spacing:.06em}
.ft li{margin:5px 0}
.ft a{text-decoration:none;display:inline-block;padding:6px 0}
.ft a:hover{color:var(--ink)}
.ft .addr{margin-top:12px;line-height:1.8}
.ft .copy{margin-top:40px;font-size:12px;color:var(--ink-3)}
/* reveal（JS 前提の演出。JS が落ちても本文は見える） */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.done{opacity:1;transform:none;transition:none}
/* modal */
.modal{display:none;position:fixed;inset:0;z-index:60;background:rgba(22,33,58,.48);padding:16px;align-items:center;justify-content:center}
.modal.open{display:flex}
.modal-box{position:relative;width:min(560px,100%);max-height:90vh;max-height:90dvh;overflow:auto;background:#fff;border-radius:var(--r-lg);padding:36px 32px 28px}
.modal h2{font-size:22px}
.modal .sub{margin-top:6px;font-size:14px;color:var(--ink-2)}
.x{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:var(--r-sm);background:var(--panel-2);cursor:pointer;font-size:20px;line-height:1}
.fm{margin-top:20px;display:grid;gap:14px}
.fm label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.fm label i{font-style:normal;color:var(--amber-ink);margin-left:4px}
.fm input,.fm select,.fm textarea{font:inherit;font-size:16px;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;background:#fff;width:100%}
.fm textarea{min-height:120px;resize:vertical}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:transparent}
.fm .btn{justify-content:center;margin-top:4px}
.done-msg{display:none;text-align:center;padding:28px 0 8px}
.modal.sent .fm{display:none}
.modal.sent .done-msg{display:block}
.done-msg b{display:block;font-size:20px}
.done-msg p{margin-top:8px;color:var(--ink-2);font-size:14px}
/* ── スマホの追従CTA: ヒーロー・業務改善・お問い合わせが見えている間、入力中、モーダル中は出さない ── */
.cta-bar{display:none}
@media (max-width:980px){
  .cta-bar:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:34;align-items:center;justify-content:space-between;gap:12px;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(22,33,58,.08);animation:ctaIn var(--t1) var(--ease)}
  .cta-bar p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
  .cta-bar .btn{flex:none;min-height:44px;padding:0 20px}
  .cta-on .totop{bottom:calc(76px + env(safe-area-inset-bottom))}
  .ft.ft{padding-bottom:calc(36px + 72px + env(safe-area-inset-bottom))}
}
/* 出す時の動きは transform の小さなずれだけ（止まってもバーは見える） */
@keyframes ctaIn{from{transform:translateY(30%)}}
@media (prefers-reduced-motion:reduce){
  .cta-bar:not([hidden]){animation:none}
}
/* ---------- responsive ---------- */
/* 章インデックス: 1100px 以上で表示。1400px 以上は名前つき、それ未満は点だけ（ホバーで名前） */
@media (min-width:1100px) and (hover:hover) and (pointer:fine){
  .toc{display:block;position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:30}
  .toc ol{position:relative;display:grid;gap:10px;justify-items:end}
  .toc a{position:relative;display:flex;flex-direction:row-reverse;align-items:center;gap:10px;min-height:22px;text-decoration:none;font-size:11.5px;font-weight:500;letter-spacing:.04em;color:var(--ink-3);transition:color var(--t0) var(--ease)}
  .toc a:hover{color:var(--ink)}
  .toc i{position:relative;z-index:1;width:7px;height:7px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ink-faint);flex:none;transition:transform var(--t1) var(--ease),background-color var(--t0),border-color var(--t0)}
  .toc a.done i{border-color:var(--blue)}
  .toc a.on i{background:var(--blue);border-color:var(--blue);transform:scale(1.35)}
  .toc a.on{color:var(--ink)}
  .toc-rail{position:absolute;right:3px;top:11px;bottom:11px;width:1px;background:var(--line)}
  .toc-fill{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--blue);transform-origin:top;transform:scaleY(var(--p,0))}
}
@media (min-width:1100px) and (max-width:1399px){
  :root{--gut:48px}
  .toc{right:14px}
  .toc span{display:none;position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--ink);color:#fff;padding:3px 9px;border-radius:6px;font-size:12px}
  .toc a:hover span,.toc a:focus-visible span{display:block}
}
/* 目次が出ない幅: 読了バーと「上へ戻る」 */
@media (max-width:1099px), (hover:none){
  .rbar{display:block}
  .totop{position:fixed;right:16px;bottom:16px;z-index:35;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);box-shadow:0 6px 18px rgba(22,33,58,.14);cursor:pointer;font-size:18px;line-height:1}
  .totop.show{display:flex;animation:totopIn var(--t1) var(--ease)}
  @keyframes totopIn{from{transform:translateY(10px)}}
}
@media (max-width:1280px){
  .gnav{gap:20px}
  .seeker,.ai{padding:44px 40px}
  .prod-row{column-gap:32px}
  .svc-row{gap:32px}
}
@media (max-width:980px){
  .gnav,.hd-bar>.btn{display:none}
  .menu-btn{display:block}
  .hd-bar{padding:0 12px 0 24px}
  .hd.open .gnav{display:flex;position:absolute;top:var(--hd);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:4px 24px 12px;box-shadow:0 12px 24px rgba(22,33,58,.08)}
  .hd.open .gnav{max-height:calc(100dvh - var(--hd));overflow:auto;overscroll-behavior:contain}
  .hd.open .gnav a{padding:14px 0;border-bottom:1px solid var(--line-2);font-size:16px}
  .hd.open .gnav a:last-child{border-bottom:0}
  .seeker-top,.ai-top,.company,.recruit,.contact,.ai-more{grid-template-columns:1fr}
  .contact .cta{justify-content:flex-start}
  .contact .mail{text-align:left}
  .svc-row{grid-template-columns:1fr 1fr;gap:32px}
  .svc-row>.svc:nth-child(3){grid-column:1/-1} /* 2列の幅では、3枚目（イベント）を横いっぱいに */
  .ft-grid{grid-template-columns:1fr 1fr}
}
/* 760px 以下: その他のプロダクトは横スワイプのカルーセル */
@media (max-width:760px){
  .prod-row{display:flex;grid-template-rows:none;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:44px calc(var(--gut) * -1) 0;padding:0 var(--gut) 4px;scroll-padding:0 var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .prod-row::-webkit-scrollbar{display:none}
  .prod{flex:0 0 82%;display:flex;flex-direction:column;scroll-snap-align:start}
  .prod .vis{align-self:stretch}
  .prod .foot{margin-top:auto;padding-top:14px;align-self:stretch}
  .svc-row{grid-template-columns:1fr;gap:36px}
}
@media (max-width:640px){
  :root{--gut:16px;--hd:58px}
  body{font-size:15px;line-height:1.8}
  .hd-bar{padding:0 6px 0 16px}
  .hd.open .gnav{padding:4px 16px 12px}
  .sec{padding-top:64px}
  .sec-h{margin-bottom:28px}
  .promises{grid-template-columns:1fr;gap:24px;margin-top:32px}
  .promise{padding-top:14px}
  .promise h3{font-size:18px}
  .promise p{margin-top:6px;font-size:14px}
  .seeker,.ai{padding:26px 18px;border-radius:16px}
  .seeker h3{font-size:24px}
  .seeker .catch{font-size:16px}
  .seeker .desc{font-size:14px}
  .keys li{grid-template-columns:3.8em 1fr;padding:8px 0;font-size:13.5px}
  .links-row{margin-top:18px;gap:12px 20px}
  .player-bar{font-size:12px}
  .prod h3{font-size:21px}
  .phones{max-width:none}
  .cards{height:190px;transform:scale(.88);transform-origin:center top}
  .ai h3{font-size:24px}
  .ai .lead{font-size:14px}
  .course h4{font-size:19px}
  .ai-more{margin-top:20px}
  .more + .more{border-top:0}
  .topics{grid-template-columns:1fr}
  .topics li:nth-last-child(2){border-bottom:1px solid var(--line-2)}
  .est{padding:14px}
  .svc h3{font-size:21px}
  .svc p{font-size:14px}
  .news a{grid-template-columns:auto 1fr;gap:2px 12px;padding:14px 0}
  .news .tt{grid-column:1/-1;font-size:14px}
  .company{gap:20px}
  .company .intro{margin-top:10px;font-size:14px}
  .prof div{grid-template-columns:6.2em 1fr;gap:2px 12px;padding:10px 0;font-size:14px}
  .prof dt{font-size:13px;min-width:7.6em}
  .prof dd small{font-size:12px}
  .recruit{padding:28px 20px;border-radius:16px}
  .recruit p{font-size:14px;margin-top:12px}
  .recruit .facts{margin-top:14px}
  .recruit .btn{margin-top:18px}
  .recruit .art{display:none}
  .contact{padding-top:28px;gap:18px}
  .contact p{font-size:14px}
  .contact .cta .btn{flex:1 1 auto;justify-content:center}
  .ft{margin-top:64px;padding:32px 0 24px;font-size:13.5px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:20px 16px}
  .ft-grid > div:first-child{grid-column:1/-1}
  .ft li{margin:3px 0}
  .ft .copy{margin-top:24px}
  .modal-box{padding:32px 18px 22px}
  .fm input,.fm select,.fm textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .sk.draw .st path{animation:none}
  .mask-ready .ln-i{transform:none!important;transition:none!important}
  .prod,.cards,.phones img,.tlink::after,.btn .ar{transition:none}
  .more[open] .more-body,.totop.show{animation:none}
}

/* ---------- 本番化で増えた部品 ---------- */
/* 線画: 外部ファイルの読み込み中は静止画を隠す（JS が付けるクラス。2.5 秒の保険つき） */
.sk-wait use{visibility:hidden}
/* ヘッダー: いまいるページのメニュー */
.gnav a[aria-current="page"]{color:var(--ink);font-weight:700}
/* お問い合わせ: スパム対策の隠し欄・送信エラー・注記 */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
.fm-err{margin:0;padding:10px 12px;border-radius:var(--r-sm);background:var(--amber-soft);color:var(--amber-ink);font-size:13.5px;line-height:1.7}
.fm-err[hidden]{display:none}
.fm [aria-invalid="true"]{border-color:var(--amber)}
.fm-note{font-size:12.5px;color:var(--ink-3);line-height:1.7}
.fm button[disabled]{opacity:.6;cursor:progress}
@media (max-width:640px){
  .prof div{grid-template-columns:7.6em 1fr}
}

/* ============ 下層ページの部品（SPEC.md「下層ページの型」） ============ */
/* パンくず */
.bc{padding-top:calc(var(--hd) + 18px);font-size:13px;color:var(--ink-3)}
.bc ol{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.bc li{display:flex;align-items:center;gap:10px}
.bc li+li::before{content:"›";color:var(--ink-faint)}
.bc a{text-decoration:none;color:var(--ink-2)}
.bc a:hover{color:var(--blue-ink)}
/* ページ見出し（白い帯）。図なしは .solo */
.ph{margin-top:14px;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ph-in{max-width:var(--wrap);margin:0 auto;padding:48px var(--gut) 52px;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:32px 56px;align-items:center}
.ph-in.solo{grid-template-columns:minmax(0,1fr)}
.ph h1{font-size:clamp(28px,3.1vw,42px);line-height:1.42}
.ph .lead{margin-top:18px;font-size:16px;line-height:1.95;color:var(--ink-2);max-width:34em}
.ph .cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.ph .note{margin-top:16px}
/* 実画面の枠（URL だけの細いバー。信号機の丸は付けない） */
.shot{margin:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff;box-shadow:0 18px 40px -24px rgba(22,33,58,.35)}
.shot-bar{display:flex;align-items:center;height:30px;padding:0 14px;border-bottom:1px solid var(--line-2);background:var(--panel-2);font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.shot img{width:100%;height:auto}
.cap{margin-top:10px;font-size:12.5px;color:var(--ink-3);line-height:1.7}
/* 見出しの下の説明文 */
.sec-lead{margin:-24px 0 36px;max-width:40em;color:var(--ink-2);font-size:15px}
/* 項目の一覧（容器なし・上罫で区切る） */
.feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px}
.feat.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.feat.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.feat li{border-top:1px solid var(--ink);padding-top:14px}
.feat h3{font-size:16.5px;line-height:1.5}
.feat p{margin-top:6px;font-size:14px;color:var(--ink-2);line-height:1.8}
.feat a{color:var(--blue-ink)}
/* 関連ページへのリンク列 */
.sublinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 28px;border-top:1px solid var(--line)}
.sublinks a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600;font-size:15px;color:var(--ink);min-height:52px}
.sublinks a span{color:var(--blue-ink);transition:transform var(--t0) var(--ease)}
@media (hover:hover){.sublinks a:hover{color:var(--blue-ink)}.sublinks a:hover span{transform:translateX(4px)}}
/* 紺の帯（採用の帯と同じ作り） */
.band{background:var(--navy);color:var(--on-navy);border-radius:var(--r-lg);padding:48px 56px;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:32px 56px;align-items:center}
.band .label{color:#8fb6ff}
.band h2{font-size:clamp(24px,2.6vw,34px);color:#fff;line-height:1.45}
.band p{margin-top:16px;color:var(--on-navy-2)}
.band .shot{border-color:rgba(233,238,246,.2)}
.chips{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:13px;border:1px solid var(--line);border-radius:6px;padding:2px 10px;color:var(--ink-2);background:var(--paper)}
.band .chips span{border-color:rgba(233,238,246,.28);color:var(--on-navy);background:transparent}
/* ストアのボタン */
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 16px;border-radius:10px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:15px;line-height:1.25}
.store small{display:block;font-size:10.5px;font-weight:500;color:#c2cbdd}
.store svg{width:22px;height:22px;flex:none}
.store:hover{background:#223150}
/* 料金表 */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.plan{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:28px 26px;display:flex;flex-direction:column}
.plan.rec{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.plan .tag{align-self:flex-start;margin-bottom:10px}
.plan h3{font-size:20px}
.plan .price{margin-top:8px;font-size:30px;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
.plan .price small{font-size:13px;font-weight:500;color:var(--ink-3)}
.plan .yr{font-size:13px;color:var(--ink-3)}
.plan ul{margin:16px 0 20px;border-top:1px solid var(--line)}
.plan li{padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.plan li b{color:var(--ink)}
.plan .btn{margin-top:auto;justify-content:center}
.price-note{margin-top:18px;font-size:13px;color:var(--ink-3);line-height:1.8}
/* よくあるご質問（開閉式。.more を使う） */
.faq{border-top:1px solid var(--ink)}
.faq .more{border-top:0}
.faq .more summary{font-size:15.5px;padding:6px 0;line-height:1.6}
.faq .more-body p{color:var(--ink-2);font-size:14.5px;max-width:46em}
.faq .more-body a{color:var(--blue-ink)}
/* AIに聞いてみる（小さな1ブロック） */
.askai{border-top:1px solid var(--line);padding-top:28px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 48px;align-items:start}
.askai h2{font-size:22px}
.askai-lead{margin-top:8px;font-size:14px;color:var(--ink-2)}
.askai-chips{display:flex;flex-wrap:wrap;gap:6px}
.askai-chips button{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.askai-chips button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.askai-q{margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line-2);font-size:14px;line-height:1.8}
.askai-go{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:980px){
  .ph-in{grid-template-columns:minmax(0,1fr);padding:36px var(--gut) 40px}
  .feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{grid-template-columns:minmax(0,1fr);padding:36px 28px}
  .plans{grid-template-columns:minmax(0,1fr);max-width:520px}
  .askai{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .bc{padding-top:calc(var(--hd) + 12px);font-size:12px}
  .ph-in{padding:28px var(--gut) 32px}
  .ph .lead{font-size:15px}
  .ph .cta .btn{flex:1 1 auto;justify-content:center}
  .sec-lead{margin:-14px 0 24px;font-size:14px}
  .feat,.feat.c3,.feat.c2{grid-template-columns:minmax(0,1fr);gap:20px}
  .band{padding:28px 20px;border-radius:16px}
  .plan{padding:24px 20px}
  .askai-go .btn{flex:1 1 auto;justify-content:center}
}
/* 手順（進め方・選考の流れなど、順序に意味があるものだけ番号を付ける） */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px 28px;counter-reset:st}
.steps li{border-top:1px solid var(--ink);padding-top:14px;counter-increment:st}
.steps li::before{content:counter(st);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:700;margin-bottom:10px;font-variant-numeric:tabular-nums}
.steps h3{font-size:16px;line-height:1.5}
.steps p{margin-top:6px;font-size:14px;color:var(--ink-2);line-height:1.8}
/* 図と文の組（左右。.rev で図を右に） */
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:32px 56px;align-items:center}
.split+.split{margin-top:72px}
.split.rev>:first-child{order:2}
.split h3{font-size:clamp(20px,2vw,26px);line-height:1.5}
.split p{margin-top:12px;color:var(--ink-2)}
.split .sk{color:var(--ink);width:100%;height:auto}
.split figure{margin:0}
/* 解説記事の本文 */
.art{max-width:760px}
.art .meta{margin-top:12px;font-size:13px;color:var(--ink-3)}
.art h2{font-size:clamp(22px,2.2vw,28px);margin:56px 0 14px;line-height:1.5}
.art h3{font-size:18px;margin:32px 0 8px}
.art p{margin:14px 0;line-height:2}
.art ul,.art ol{margin:14px 0;padding-left:1.3em}
.art ul li{list-style:disc;margin:6px 0}
.art ol li{list-style:decimal;margin:6px 0}
.art .tbl{overflow-x:auto;margin:18px 0}
.art table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
.art th,.art td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;line-height:1.7}
.art th{background:var(--panel-2);font-weight:600}
.art .box{margin:28px 0;padding:20px 22px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line-2)}
.art .box h3{margin-top:0}
.art a{color:var(--blue-ink)}
@media (max-width:980px){
  .split,.split.rev{grid-template-columns:minmax(0,1fr)}
  .split.rev>:first-child{order:0}
}
@media (max-width:640px){
  .steps{grid-template-columns:minmax(0,1fr);gap:18px}
  .split+.split{margin-top:48px}
  .art h2{margin-top:40px}
}
/* ---------- 下層ページの部品（各ページの KIT-REQUEST から取り込み） ---------- */
/* ページ見出しの図: 線画と実画面 */
.ph figure{margin:0}
.ph .sk{width:100%;max-width:460px;height:auto;margin:0 auto;color:var(--ink)}
.ph .shot img{aspect-ratio:16/10;object-fit:cover;object-position:left top}
/* 実画面を並べる */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.gallery .shot img{aspect-ratio:16/10;object-fit:cover;object-position:left top}
/* トレカの見本カードを扇形に重ねる */
.tc{position:relative;height:340px;max-width:520px;margin:0 auto}
.tc img{position:absolute;top:24px;width:36%;height:auto;border-radius:10px;box-shadow:0 14px 30px rgba(22,33,58,.18)}
.tc img:nth-child(1){left:4%;transform:rotate(-7deg)}
.tc img:nth-child(2){left:32%;top:0;z-index:2}
.tc img:nth-child(3){left:60%;transform:rotate(7deg)}
/* 紺の帯の中の項目一覧 */
.band .feat li{border-top-color:rgba(233,238,246,.35)}
.band .feat h3{color:#fff}
.band .feat p{color:var(--on-navy-2)}
/* 項目一覧の直後の注記・解説記事の本文の上 */
.feat+.note{margin-top:24px}
#article{padding-top:56px}
@media (max-width:640px){
  .gallery{grid-template-columns:minmax(0,1fr)}
  .tc{height:250px}
  #article{padding-top:36px}
}
/* 横スワイプのカルーセルの中では出現の演出を使わない（縦スクロールでは画面に入らないため） */
@media (max-width:760px){
  .js .prod-row .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- 崩れの点検（2026-10-06）を受けた調整 ---------- */
/* 日本語を語の途中で折り返さない（対応ブラウザのみ。未対応は従来どおり） */
body{word-break:auto-phrase}
.w,.hn-list span{word-break:normal}
/* 注記の中のテキストリンクは文の流れに乗せる（「（」が行末に残らないように） */
.note .tlink,.sec-lead .tlink,.askai-lead .tlink{display:inline}
/* タップしやすさ: ヘッダーのメニュー・パンくず・フッターのリンク */
.gnav a{padding:9px 0}
.bc a{display:inline-block;padding:10px 0}
.ft a{padding:8px 0}
.store small{font-size:12px}
/* 料金表: 札があってもカードの見出しの高さを揃える（札はカードの上辺に重ねる） */
.plan{position:relative}
.plan .tag{position:absolute;top:-12px;left:22px;margin:0;background:var(--paper)}
/* お問い合わせ: × はスクロールしても消えない位置に・「必須」は項目名と同じ行に */
.modal-box{display:flex;flex-direction:column;overflow:hidden;padding:0}
.modal-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:36px 32px 28px}
.x{z-index:2}
.fm label>span{display:block}
/* スマホのメニューの「お問い合わせ」（ヘッダーのボタンが隠れる幅だけ） */
.gnav .m-only{display:none}
@media (max-width:980px){
  .hd.open .gnav .m-only{display:block;color:var(--blue-ink);font-weight:700}
  .plans{margin-left:auto;margin-right:auto}
  /* トレカの扇: 列の幅に合わせて割合で並べる */
  .cards img{width:31%;max-width:112px}
  .cards img:nth-child(1){left:6%}
  .cards img:nth-child(2){left:34.5%}
  .cards img:nth-child(3){left:63%}
}
@media (max-width:640px){
  .modal-scroll{padding:32px 18px 22px}
}
/* 横向きスマホ: メニューの行を詰めて最後まで見えるように */
@media (max-height:500px) and (max-width:980px){
  .hd.open .gnav a{padding:9px 0;font-size:15px}
}
/* 記事の表: スマホで比べる列が見えやすいように最小幅を下げる */
.art table{min-width:440px}
/* スマホのパンくず: 1行に収め、長い現在地（最後の段）は省略記号で切る（ページ名は直下の h1 に出ている） */
@media (max-width:640px){
  .bc ol{flex-wrap:nowrap;white-space:nowrap}
  .bc li{flex:none}
  .bc li:last-child{flex:0 1 auto;min-width:0;display:block;overflow:hidden;text-overflow:ellipsis}
  .bc li:last-child::before{margin-right:10px}
}
/* スマホ: 4段以上のパンくずは途中を畳んで「ホーム › 親 › 現在地」に（JSON-LD は全段のまま）。リンクの押せる範囲を広げる */
@media (max-width:640px){
  .bc li:nth-child(n+2):nth-last-child(n+3){display:none}
  .bc a{padding:12px 6px;margin:0 -6px}
}
/* スマホ: 動画の再生ボタンを1行に収める */
@media (max-width:640px){
  .player .play{padding:12px}
  .player .play span{font-size:13px;gap:10px;padding:8px 14px 8px 10px}
}
/* 3項目の一覧は、横向きスマホ程度の幅から1列に（3列のままだと1列が細すぎる） */
@media (max-width:760px){.feat.c3{grid-template-columns:minmax(0,1fr)}}
/* 線画つきの項目一覧（.feat に .ill-feat を足す）。見出しの上に小さな線画、画面に入ると線を描く。
   線画は assets/sk/*.svg（Gemini の線画→potrace）。小さく出すので線は太さ固定（non-scaling） */
.sk.sm .st path{vector-effect:non-scaling-stroke;stroke-width:1.4}
.ill-feat li{border-top:0;padding-top:0}
.ill-box{height:132px;display:flex;align-items:flex-end;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.ill-box .sk{height:100%;width:auto;max-width:100%;color:var(--ink);transform-origin:50% 100%;transition:transform var(--t1) var(--ease)}
@media (hover:hover){.ill-feat li:hover .ill-box .sk{transform:translateY(-4px) rotate(-1.5deg)}}
@media (max-width:760px){
  .ill-feat li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:4px 16px;align-items:start;border-top:1px solid var(--ink);padding-top:14px}
  .ill-box{grid-row:1/span 2;height:auto;margin:0;padding:0;border:0;display:block}
  .ill-box .sk{width:100%;height:auto}
}
@media (prefers-reduced-motion:reduce){.ill-box .sk{transition:none}}