/* WAN コーポレートサイト — デザインの考え方「白模型と走査線」
   現実（写真・映像）と、仮想（紙の白・白模型・墨の線）の2つの質感だけで組む。
   青は「現実と仮想の境目（走査線）」と、操作できるもの（ボタン・リンク・選択中）だけに使う。
   光彩・グラデーションの飾り・すりガラス・等幅の小さなラベル・大文字の飾り見出し・飾りの番号は使わない。
   模型の断面（斜線）は、区切りの印にだけ使う。 */

/* ------------------------------------------------------------ 基本 */
:root{
  --paper:#f3f4f6; --white:#fff; --ink:#0a0c12; --text:#23272f; --sub:#5b606c; --mute:#8a8f99;
  --line:#dde0e6; --line2:#c8ccd5; --blue:#1740e6; --blue-d:#0f31c4; --blue-t:#e9edfd;
  --jp:"Zen Kaku Gothic New",system-ui,sans-serif; --en:"Jost","Zen Kaku Gothic New",sans-serif;
  --px:clamp(20px,4vw,64px); --max:1360px; --sec:clamp(96px,11vw,168px); --hd:84px;
  --ease:cubic-bezier(.22,1,.36,1); --io:cubic-bezier(.65,0,.35,1);
  --hatch:repeating-linear-gradient(135deg,rgba(10,12,18,.32) 0 1px,transparent 1px 5px);
  --i-ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 2.2h6.8V9M9.6 2.4 2.2 9.8' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 16px)}
body{background:var(--paper);color:var(--text);font:500 15.5px/2 var(--jp);letter-spacing:.04em;font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4{color:var(--ink);font-weight:500;letter-spacing:.04em;line-height:1.45;word-break:auto-phrase}   /* 見出しは文節で折り返す（対応ブラウザのみ） */
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
::selection{background:var(--blue);color:#fff}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:8px 14px;font-size:13px}
.skip:focus{top:12px}
.w{max-width:var(--max);margin-inline:auto;padding-inline:var(--px)}
.vh-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.en{font-family:var(--en);letter-spacing:.06em}
.num{font-family:var(--en);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.fine{font-size:12px;line-height:1.8;color:var(--mute);letter-spacing:.03em}
.fine+.fine{margin-top:2px}

/* 背後が現実（映像）の区間だけ白、ほかは墨（トップのヒーローで使う。区間は hero.js が配る） */
.flip{
  --cv:var(--ink); --cr:#fff;
  background-image:linear-gradient(90deg,var(--cv) var(--ka,-99999px),var(--cr) var(--ka,-99999px),var(--cr) var(--kb,99999px),var(--cv) var(--kb,99999px));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ------------------------------------------------------------ ヘッダー */
.hd{position:fixed;left:0;right:0;top:0;z-index:60;height:var(--hd);padding:0 var(--px);display:flex;align-items:center;gap:28px;transition:transform .5s var(--ease),background-color .35s,border-color .35s;border-bottom:1px solid transparent}
.hd.solid{background:var(--paper);border-bottom-color:var(--line)}
.logo{position:relative;display:block;margin-right:auto;padding:6px 0;line-height:0}
.logo img{height:30px;width:auto}
.logo.flip{background-image:none}
/* ヒーローの上: 背後が映像の区間だけ白抜きのロゴを重ねる（区間 --ka/--kb は hero.js が配る） */
.logo .lg-l{position:absolute;left:0;top:6px;clip-path:inset(0 max(0px,calc(100% - var(--kb,99999px))) 0 max(0px,var(--ka,99999px)))}
.hd.solid .lg-l,.menu-on .lg-l{display:none}
.nav{display:flex;align-items:center;gap:26px}
.nav>a,.nav-b{position:relative;font-size:13.5px;letter-spacing:.08em;padding:8px 0;white-space:nowrap;color:var(--ink)}
.nav>a::after,.nav-b::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav>a:hover::after{transform:scaleX(1);transform-origin:left}
.nav>a[aria-current]::after,.nav-g.on .nav-b::after{transform:scaleX(1);background:var(--blue);height:2px;bottom:2px}
/* 会社情報: 小さな山形の印で「開く」ことを示し、乗せると下に選択肢が開く */
.nav-g{position:relative}
.nav-b{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13.5px;cursor:pointer}
.nav-b i{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .4s var(--ease)}
.nav-b.flip i{border-color:var(--cv)}   /* 文字の切り抜き（.flip）は線には効かないので、墨で描く */
.nav-g:hover .nav-b i,.nav-g.open .nav-b i{transform:translateY(1px) rotate(225deg)}
.nav-dd{position:absolute;top:100%;left:50%;min-width:208px;padding:8px;margin-top:12px;background:var(--paper);border:1px solid var(--line);border-radius:6px;box-shadow:0 14px 36px rgba(10,14,22,.1);opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .25s,transform .4s var(--ease),visibility 0s .4s}
.nav-dd::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}
.nav-g:hover .nav-dd,.nav-g.open .nav-dd{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s,transform .4s var(--ease)}
.nav-dd a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 14px;border-radius:4px;font-size:14px;letter-spacing:.08em;color:var(--ink);white-space:nowrap;transition:background-color .25s,color .25s}
.nav-dd a::after{content:"→";font-family:var(--en);font-size:13px;color:var(--mute);transition:transform .4s var(--ease),color .25s}
.nav-dd a:hover,.nav-dd a[aria-current]{background:color-mix(in srgb,var(--blue) 7%,transparent);color:var(--blue)}
.nav-dd a:hover::after{transform:translateX(3px);color:var(--blue)}
/* 資料請求: お問い合わせと同じ形の、線のボタン */
.req{height:40px;display:inline-flex;align-items:center;padding:0 20px;margin-right:-16px;border-radius:20px;border:1px solid var(--blue);background:var(--paper);color:var(--blue);font-size:13.5px;letter-spacing:.08em;white-space:nowrap;transition:background-color .3s}
.req:hover,.req[aria-current]{background:color-mix(in srgb,var(--blue) 9%,var(--paper))}
.cta{height:40px;display:inline-flex;align-items:center;padding:0 20px;border-radius:20px;background:var(--blue);color:#fff;font-size:13.5px;letter-spacing:.08em;white-space:nowrap;transition:background-color .3s}
.cta:hover{background:var(--blue-d)}
.mb{display:none;width:44px;height:44px;position:relative;margin-right:-10px}
.mb i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);transition:transform .5s var(--ease),top .5s var(--ease),background-color .3s}
.mb i:nth-child(1){top:18px}.mb i:nth-child(2){top:26px}
.mb.real i{background:#fff}
.menu-on .mb i{background:var(--ink)}
.menu-on .mb i:nth-child(1){top:22px;transform:rotate(30deg)}.menu-on .mb i:nth-child(2){top:22px;transform:rotate(-30deg)}
/* トップのヒーローの上では、背景を持たない。スクロールしたら紙の地に墨の文字 */
.hd.solid .flip,.menu-on .hd .flip{background-image:none;color:var(--ink)}
.menu{position:fixed;inset:0;z-index:55;background:var(--paper);padding:calc(var(--hd) + 24px) var(--px) 40px;display:flex;flex-direction:column;gap:28px;overflow:auto;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
.menu-on .menu{visibility:visible;opacity:1;transition:opacity .35s}
.menu nav a{display:flex;align-items:baseline;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);font-size:19px;color:var(--ink)}
.menu nav a[aria-current]{color:var(--blue)}
.menu nav a::after{content:"→";font-family:var(--en);font-size:15px;color:var(--mute)}
.menu-sub{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px}
.menu-sub a{color:var(--sub)}
.menu .cta{align-self:flex-start;height:48px;padding:0 26px;border-radius:24px;font-size:15px}
.menu-on{overflow:hidden}

/* ------------------------------------------------------------ ページの切り替え: タブを切り替えるように、ヘッダーは残して本文だけを短く重ねる（対応ブラウザのみ。ほかは普通に移る） */
@view-transition{navigation:auto}
.hd{view-transition-name:hd}
::view-transition-old(root){animation:vt-out .18s ease-out both}
::view-transition-new(root){animation:vt-in .34s var(--ease) both}
::view-transition-group(hd){animation-duration:.2s}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}

/* ------------------------------------------------------------ 共通の部品 */
/* 見出し: 区切りの線の頭に、模型の断面（斜線）の印 */
.sh{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 48px;align-items:end;padding-top:28px;margin-bottom:clamp(40px,5vw,72px);border-top:1px solid var(--line2)}
.sh::before{content:"";position:absolute;left:0;top:-4px;width:44px;height:7px;background:var(--hatch);background-color:var(--paper)}
.wh .sh::before,.sh.on-white::before{background-color:#fff}
.sh-t{font-size:clamp(28px,3vw,44px);line-height:1.35;letter-spacing:.05em}
.sh-r{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.sh-r p{max-width:36em;color:var(--sub);font-size:15px}
.lk{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.08em;padding:6px 0;color:var(--ink);white-space:nowrap;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;transition:color .25s,background-size .5s var(--ease)}
.lk::after{content:"→";font-family:var(--en);font-weight:400;transition:transform .4s var(--ease)}
.lk:hover{color:var(--blue)}
.lk:hover::after{transform:translateX(4px)}
.lk.ext::after{content:"";width:.7em;height:.7em;background:currentColor;-webkit-mask:var(--i-ext) center/contain no-repeat;mask:var(--i-ext) center/contain no-repeat}
.ar-x{display:inline-block;width:.72em;height:.72em;margin-left:.35em;vertical-align:-.02em;background:currentColor;-webkit-mask:var(--i-ext) center/contain no-repeat;mask:var(--i-ext) center/contain no-repeat}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;padding:0 30px;border-radius:26px;background:var(--blue);color:#fff;font-size:15px;letter-spacing:.08em;white-space:nowrap;transition:background-color .3s}
.btn:hover{background:var(--blue-d)}
.btn::after{content:"→";font-family:var(--en);font-weight:400;transition:transform .4s var(--ease)}
.btn:hover::after{transform:translateX(4px)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.btn.plain::after{content:none}
.tg{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid var(--line2);border-radius:3px;font-size:12px;letter-spacing:.04em;line-height:1;color:var(--sub);white-space:nowrap}
.tg.k{border-color:var(--ink);color:var(--ink)}
/* 状態: 提供中（青）／研究開発（青の線）／構想（点線） */
.st{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:3px;font-size:12px;letter-spacing:.06em;line-height:1;white-space:nowrap}
.st.on{background:var(--blue);color:#fff}
.st.rd{box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue)}
.st.id{box-shadow:inset 0 0 0 1px var(--sub);color:var(--sub);background-image:none;outline:1px dashed var(--sub);outline-offset:-1px;box-shadow:none}

/* 画面に入ったら、ふわりと出る */
.rv{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* 写真の現れ方: 読み込めてから、静かに浮かび上がって少し引く（点滅や切り替えの段差を作らない） */
.pic{position:relative;overflow:hidden;background:#e3e5ea}
.pic>img,.pic>video{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.1s cubic-bezier(.33,0,.2,1),transform 2s var(--ease)}
.pic.in>img,.pic.in>video{opacity:1;transform:none}

/* ------------------------------------------------------------ 背景の等高線（field.js）。区画の後ろに敷く */
.fld{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
[data-field]{position:relative;isolation:isolate}
[data-field]>:not(.fld){position:relative;z-index:1}

/* ------------------------------------------------------------ 下層ページの見出し（詰めた版）
   左に パンくず＋題、右に 説明。このページの内容は、その下に横一列の小さなリンク。背景に白模型の街（field.js）。
   めざす未来は全面のヒーローのあとに置くので、別の組み（.after-vh） */
.pg{position:relative;overflow:hidden;padding:calc(var(--hd) + clamp(28px,3vw,44px)) 0 clamp(28px,3vw,40px);border-bottom:1px solid var(--line)}
.pg .fld{-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 80%);mask-image:linear-gradient(90deg,transparent 40%,#000 80%)}
.pg:not(.after-vh)>.w{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px clamp(32px,4vw,64px);align-items:start}
.pg:not(.after-vh) .crumb{grid-column:1/-1;margin-bottom:6px}
.pg:not(.after-vh) .pg-t{font-size:clamp(30px,3.2vw,48px)}
.pg:not(.after-vh) .pg-r{display:block;margin-top:6px}
.pg:not(.after-vh) .pg-l{font-size:14.5px;line-height:1.95;max-width:44em}
.pg:not(.after-vh) .pg-l p+p{margin-top:6px}
.pg:not(.after-vh) .pg-ix{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;border-top:0}
.pg:not(.after-vh) .pg-ix a{padding:5px 12px 5px 14px;gap:8px;border:0;border-radius:15px;box-shadow:inset 0 0 0 1px var(--line2);background:rgba(255,255,255,.7);font-size:13px}
.pg:not(.after-vh) .pg-ix a:hover{padding-left:14px;box-shadow:inset 0 0 0 1px var(--blue)}
.crumb{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--sub);margin-bottom:clamp(28px,4vw,48px)}
.crumb a{color:var(--sub)}
.crumb a:hover{color:var(--blue)}
.crumb li+li::before{content:"/";margin-right:10px;color:var(--line2)}
.pg-t{position:relative;display:inline-block;font-size:clamp(40px,5.4vw,80px);line-height:1.22;letter-spacing:.05em;padding-bottom:.06em}
.pg-t .ln{display:block;overflow:hidden}
.pg-t .ln>span{display:inline-block;transform:translateY(105%);transition:transform 1.2s var(--ease)}
.ready .pg-t .ln>span{transform:none}
.pg-t .ln:nth-child(2)>span{transition-delay:.1s}
.pg-r{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;margin-top:clamp(32px,4.4vw,64px);align-items:start}
.pg-l{font-size:clamp(15px,1.2vw,17px);line-height:2.1;color:var(--text);max-width:40em}
.pg-ix{display:grid;gap:0;border-top:1px solid var(--line2);align-self:end}
.pg-ix a{display:flex;justify-content:space-between;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink);transition:color .25s,padding .4s var(--ease),box-shadow .25s}
.pg-ix a::after{content:"↓";font-family:var(--en);font-size:13px;color:var(--mute);transition:color .25s}
.pg-ix a:hover{color:var(--blue);padding-left:8px}
.pg-ix a:hover::after{color:var(--blue)}

/* 区画 */
.sec{padding-block:var(--sec);position:relative}
.sec.wh{background:#fff}
.sec.tight{padding-top:0}
.sec:not(.wh)+.sec:not(.wh){padding-top:0}          /* 同じ地の区画が続くときは、間を詰める */
.sec.wh+.sec.wh{padding-top:0}

/* ------------------------------------------------------------ カード（実績・技術情報） */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}
.card{display:flex;flex-direction:column;gap:16px;color:var(--ink)}
.card .pic{aspect-ratio:16/9;border-radius:2px}
.card:hover .pic.in>img{transform:scale(1.035)}
.card-m{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:12.5px;color:var(--sub)}
.card-m time{font-family:var(--en);letter-spacing:.06em;margin-right:4px}
.card-t{font-size:16px;line-height:1.75;letter-spacing:.04em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .25s}
.card:hover .card-t{color:var(--blue)}

/* お知らせの行 */
.nws{border-top:1px solid var(--line2)}
.nws li a{display:grid;grid-template-columns:120px 132px minmax(0,1fr) 24px;gap:8px 24px;align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--line);transition:background-color .3s,padding .4s var(--ease)}
.nws time{font-family:var(--en);font-size:14px;letter-spacing:.08em;color:var(--sub)}
.nws .nws-c{font-size:12.5px;color:var(--sub)}
.nws .nws-t{font-size:15.5px;line-height:1.8;color:var(--ink)}
.nws li a::after{content:"→";font-family:var(--en);color:var(--mute);justify-self:end;transition:transform .4s var(--ease),color .25s}
.nws li a:hover{padding-left:12px}
.nws li a:hover .nws-t,.nws li a:hover::after{color:var(--blue)}
.nws li a:hover::after{transform:translateX(4px)}
.nws .new{color:var(--blue);font-size:12px;margin-left:10px;letter-spacing:.08em}

/* ------------------------------------------------------------ 締めの相談の入口とフッター */
.ct{position:relative;padding:clamp(112px,13vw,200px) 0;background:var(--paper);overflow:hidden;border-top:1px solid var(--line)}
.ct .w{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 64px;align-items:end}
.ct-t{font-size:clamp(32px,4vw,60px);line-height:1.35;letter-spacing:.05em}
.ct-l{margin-top:24px;color:var(--sub);font-size:15.5px}
.ct-b{display:grid;gap:14px}
.ct-b a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:92px;padding:18px 28px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink);transition:background-color .3s,color .3s,box-shadow .3s}
.ct-b a small{display:block;font-size:12.5px;color:var(--sub);letter-spacing:.06em;transition:color .3s}
.ct-b a span{display:block;font-size:20px;letter-spacing:.08em;margin-top:2px}
.ct-b a::after{content:"→";font-family:var(--en);font-size:20px;transition:transform .4s var(--ease)}
.ct-b a:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.ct-b a:hover::after{transform:translateX(5px)}
.ct-b a.pri{background:var(--blue);color:#fff;box-shadow:none}
.ct-b a.pri small{color:rgba(255,255,255,.72)}
.ct-b a.pri:hover{background:var(--blue-d)}

.ft{position:relative;background:var(--ink);color:#c9ccd4;font-size:13.5px}
.ft::before{content:"";display:block;height:14px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.2) 0 1px,transparent 1px 6px),#161923;border-bottom:1px solid rgba(255,255,255,.12)}
.ft a{color:#e7e9ee;transition:color .25s}
.ft-co a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ft a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.ft-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 64px;padding-block:clamp(56px,7vw,96px) 48px}
.ft-logo{display:inline-block;line-height:0}
.ft-logo img{height:34px;width:auto}
.ft-co{margin-top:22px;line-height:1.9}
.ft-co b{display:block;color:#fff;font-weight:500;font-size:15px;margin-bottom:6px;letter-spacing:.06em}
.ft-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ft-nav h2{color:#8d92a0;font-size:12px;letter-spacing:.1em;font-weight:500;margin-bottom:14px}
.ft-nav li+li{margin-top:9px}
.ft-end{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-block:24px 36px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#8d92a0}
.ft-end small{font-size:12px;margin-left:auto;font-family:var(--en);letter-spacing:.08em}
.totop{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);display:grid;place-items:center;color:#fff;font-family:var(--en)}
.totop:hover{background:#fff;color:var(--ink)}

/* ------------------------------------------------------------ 動きを減らす設定 */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .pg-t .ln>span{transform:none;transition:none}
  .pic>img,.pic>video{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
  .mq-r ul{animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ------------------------------------------------------------ 狭い画面 */
@media (max-width:1180px){
  .nav,.req{display:none}
  .mb{display:block}
  .hd{gap:14px}
}
@media (max-width:900px){
  :root{--hd:68px}
  body{font-size:14.5px;line-height:1.95}
  .logo img{height:24px}
  .logo .lg-l{top:6px}
  .cta{height:36px;padding:0 16px;font-size:12.5px}
  .sh{grid-template-columns:1fr;gap:16px}
  .sh-r{flex-direction:column;align-items:flex-start}
  .pg-r{grid-template-columns:minmax(0,1fr)}   /* 横に送る目次が、文の列を押し広げないように */
  .pg:not(.after-vh)>.w{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:1fr;gap:44px}
  .nws li a{grid-template-columns:1fr 20px;gap:4px 12px;padding:18px 2px}
  .nws time,.nws .nws-c{grid-column:1}
  .nws .nws-c{display:none}
  .nws li a::after{grid-row:1/3;grid-column:2;align-self:center}
  .ct .w{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .ft-nav{grid-template-columns:1fr 1fr}
  .ft-end small{margin-left:0}
}
@media (min-width:901px) and (max-width:1180px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================ 一覧（絞り込み・お知らせの年） */
.flt{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-bottom:clamp(40px,4vw,56px);padding-bottom:22px;border-bottom:1px solid var(--line)}
.flt-b{display:flex;flex-wrap:wrap;gap:8px}
.flt-b.sub{flex-basis:100%}
.flt-b button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:19px;box-shadow:inset 0 0 0 1px var(--line2);font-size:13.5px;color:var(--ink);transition:background-color .25s,color .25s,box-shadow .25s}
.flt-b.sub button{height:32px;padding:0 13px;font-size:12.5px;border-radius:16px}
.flt-b button b{font-weight:400;font-size:12px;color:var(--sub)}
.flt-b button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.flt-b button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.flt-b button[aria-pressed="true"] b{color:rgba(255,255,255,.6)}
.flt-s select{height:38px;padding:0 36px 0 14px;border:0;border-radius:19px;box-shadow:inset 0 0 0 1px var(--line2);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230a0c12' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 14px center/10px 6px;font:inherit;font-size:13.5px;color:var(--ink);appearance:none;cursor:pointer}
.flt-n{margin-left:auto;font-size:13px;color:var(--sub)}
.none{color:var(--sub);padding:40px 0}
.more-w{display:flex;justify-content:center;margin:56px 0 24px}
.ny{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:16px 40px;align-items:start}
.ny+.ny{margin-top:clamp(48px,5vw,72px)}
.ny-y{position:sticky;top:calc(var(--hd) + 24px);font-size:clamp(28px,2.6vw,40px);font-weight:300;letter-spacing:.06em;color:var(--ink);padding-top:12px}

/* ============================================================ 記事: 読む幅は 760px の1本。見出し → リード → アイキャッチ（16:9）→ 目次 → 本文 → 共有 */
.art{padding-top:calc(var(--hd) + clamp(32px,4vw,64px))}
.art-in{max-width:calc(760px + var(--px) * 2);margin-inline:auto;padding-inline:var(--px)}
.art .crumb{margin-bottom:22px}
.art-m{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:13px;color:var(--sub);margin-bottom:14px}
.art-m time{font-family:var(--en);letter-spacing:.08em;margin-right:6px}
.art-m a.tg:hover{border-color:var(--blue);color:var(--blue)}
.art-t{font-size:clamp(22px,2.3vw,31px);line-height:1.6;letter-spacing:.03em;color:var(--ink)}
.art-lede{margin-top:18px;font-size:15px;line-height:2.05;color:var(--sub)}
.art-eye{margin-top:clamp(24px,3vw,36px)}
.art-eye .pic{aspect-ratio:16/9;border-radius:6px;background:#e3e5ea}
.art-eye .pic img{opacity:1;transform:none}
.art-toc{margin-top:clamp(28px,3vw,40px);padding:18px 22px 20px;background:var(--white);border:1px solid var(--line);border-radius:6px;font-size:14px}
.art-toc p{color:var(--sub);font-size:12.5px;letter-spacing:.08em;margin-bottom:10px}
.art-toc ol{counter-reset:t;display:grid;gap:6px}
.art-toc li{counter-increment:t;display:grid;grid-template-columns:2em minmax(0,1fr)}
.art-toc li::before{content:counter(t);font-family:var(--en);color:var(--mute)}
.art-toc a{display:block;line-height:1.75;color:var(--ink)}
.art-toc a:hover{color:var(--blue)}
.art-b{margin-top:clamp(32px,4vw,48px)}
.art-f{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(48px,5vw,72px);padding-top:22px;border-top:1px solid var(--line2)}
.art-f:empty{display:none}
.art-f-k{margin-right:auto;font-size:13px;color:var(--sub);letter-spacing:.06em}
.art-sh{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line2);background:var(--white);font-size:13px;color:var(--ink);cursor:pointer;transition:box-shadow .25s,color .25s}
.art-sh:hover{box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue)}
.art-nav{max-width:calc(960px + var(--px) * 2);margin:clamp(40px,5vw,64px) auto 0;padding:28px var(--px) clamp(80px,8vw,120px);display:grid;grid-template-columns:1fr auto 1fr;gap:16px 32px;align-items:center;border-top:1px solid var(--line2)}
.art-nav a{color:var(--ink)}
.art-nav small{display:block;font-size:12px;color:var(--sub);letter-spacing:.08em}
.art-nav span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.7;margin-top:4px;transition:color .25s}
.art-nav a:hover span{color:var(--blue)}
.an-n{text-align:right}
.an-l{font-size:14px;padding:10px 22px;border-radius:22px;box-shadow:inset 0 0 0 1px var(--ink);white-space:nowrap}
.an-l:hover{background:var(--ink);color:#fff!important}
.art-none{padding-block:40px 120px;display:grid;gap:18px;justify-items:start}

/* 本文の組版 */
.doc{font-size:16px;line-height:2.05;color:var(--text);letter-spacing:.04em;overflow-wrap:anywhere}
.doc>*+*{margin-top:1.3em}
.doc h2{position:relative;font-size:clamp(20px,1.7vw,25px);line-height:1.6;margin-top:2.6em;padding-top:22px;border-top:1px solid var(--line2)}
.doc h2::before{content:"";position:absolute;left:0;top:-4px;width:40px;height:7px;background:var(--hatch);background-color:var(--paper)}
.doc h3{font-size:18px;line-height:1.7;margin-top:2em}
.doc h4{font-size:16px;margin-top:1.8em}
.doc h2+*,.doc h3+*,.doc h4+*{margin-top:.8em}
.doc a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.doc a:hover{text-decoration-thickness:2px}
.doc strong{color:var(--ink);font-weight:700}
.doc ul,.doc ol{padding-left:1.4em}
.doc ul{list-style:none}
.doc ul>li{position:relative}
.doc ul>li::before{content:"";position:absolute;left:-1.05em;top:.95em;width:6px;height:1px;background:var(--ink)}
.doc ol{list-style:decimal}
.doc li+li{margin-top:.35em}
.doc figure{margin-block:2em}
.doc img{height:auto;margin-inline:auto;border-radius:4px;background:#e7e9ee}
.doc figure{text-align:center}
.doc figcaption{text-align:left}
.doc figcaption{margin-top:10px;font-size:13px;color:var(--sub);line-height:1.8}
.doc blockquote{padding:4px 0 4px 20px;border-left:2px solid var(--line2);color:var(--sub)}
.doc hr{border:0;border-top:1px solid var(--line);margin-block:2.4em}
.doc .tbl{overflow-x:auto}
.doc table{border-collapse:collapse;min-width:100%;font-size:14px;line-height:1.8}
.doc th,.doc td{border-bottom:1px solid var(--line);padding:10px 14px 10px 0;text-align:left;vertical-align:top}
.doc th{color:var(--ink);font-weight:500;white-space:nowrap}
.doc .yt,.doc .mv{position:relative;aspect-ratio:16/9;background:#0a0c12;border-radius:2px;overflow:hidden}
.doc .yt iframe,.doc .mv video{position:absolute;inset:0;width:100%;height:100%;border:0}
.doc .mv:has(figcaption){aspect-ratio:auto;background:none;overflow:visible}
.doc .mv:has(figcaption) video{position:static;aspect-ratio:16/9;background:#0a0c12}
/* 本文の部品（記事エディタの「WAN部品」。tools/editor/ui/wan-ui.css と同じ値） */
.doc .kp{padding:22px 26px 24px;background:var(--white);border:1px solid var(--line);border-top:2px solid var(--ink);border-radius:0 0 6px 6px}
.doc .kp-h,.doc .note-h,.doc .pr-c-h{margin-bottom:10px;color:var(--ink);font-size:14px;font-weight:700;letter-spacing:.08em}
.doc .kp li{line-height:1.9}
.doc .note{padding:20px 24px;border-radius:6px;background:#eceef2;font-size:15px}
.doc .note p+p{margin-top:.8em}
.doc .note.fix{border-left:3px solid #b42318;background:#fbf1f0}
.doc .spec th{width:28%;padding-right:20px;color:var(--sub);font-size:13.5px}
.doc .spec tr:first-child th,.doc .spec tr:first-child td{border-top:1px solid var(--line)}
.doc .pr-c{padding:22px 26px;background:var(--white);border:1px solid var(--line2);border-radius:6px;font-size:14.5px;line-height:1.9}
.doc .pr-c dl{display:grid;gap:4px}
.doc .pr-c dl>div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:12px}
.doc .pr-c dt{color:var(--sub)}
.doc .doc-btn{text-align:center}
.doc .doc-btn a{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 30px;border-radius:26px;background:var(--blue);color:#fff;font-size:15px;letter-spacing:.08em;text-decoration:none;transition:background-color .3s}
.doc .doc-btn a:hover{background:var(--blue-d)}
.doc .doc-btn a::after{content:"→";font-family:var(--en)}
@media (max-width:640px){.doc .pr-c dl>div{grid-template-columns:1fr;gap:0}.doc .kp,.doc .pr-c{padding:18px 18px 20px}}
.art-sub{margin-top:8px;font-size:17px;line-height:1.7;color:var(--sub)}
.art-eye .yt-h{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#0a0c12}
.art-eye .yt-h iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-b{position:absolute;inset:0;width:100%;display:block}
.yt-b img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .3s}
.yt-b:hover img{opacity:1}
.yt-p{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 26px 0 22px;border-radius:26px;background:#fff;color:var(--ink);font-size:14px}
.yt-p::before{content:"";width:0;height:0;border-left:11px solid var(--blue);border-top:7px solid transparent;border-bottom:7px solid transparent}

@media (max-width:900px){
  .flt-n{margin-left:0;flex-basis:100%}
  .ny{grid-template-columns:1fr}
  .ny-y{position:static;padding-top:0}
  .art-nav{grid-template-columns:1fr 1fr}
  .an-l{grid-column:1/-1;grid-row:2;justify-self:center}
  .doc{font-size:15px}
}

/* ============================================================ 映像・写真の見せ方（共用） */
/* 映像の枠: 最初の絵（写真）を置いておき、画面に入ったら映像を重ねて流す。中身はスクロールで少し上下する（data-par） */
.vf{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#e3e5ea}
.vf>img,.vf>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vf>video{opacity:0;transition:opacity .9s}
.vf.play>video{opacity:1}
.vf>.crop{object-position:50% 50%;height:132%;top:-16%}
.vf-c{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:12.5px;color:var(--sub);letter-spacing:.06em}
.vf-c .en{color:var(--ink)}

/* 流れる写真の帯（旧プロジェクトの marquee）。墨の地に、記事のサムネイルが左右に流れる。指を置いたレーンは止まって、その1枚が明るくなる */
.mqs{position:relative;background:var(--ink);color:#fff;padding:clamp(56px,6vw,88px) 0;overflow:hidden}
.mqs-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(28px,3vw,44px)}
.mqs-h h2{color:#fff;font-size:clamp(24px,2.4vw,34px);letter-spacing:.06em;line-height:1.4}
.mqs-h p{color:#a9adb8;font-size:14px;max-width:32em}
.mqs .lk{color:#fff}
.mqs .lk:hover{color:#fff;opacity:.7}
.mqs .fine{color:#7d828e;margin-top:clamp(20px,2vw,32px)}
.mq{display:grid;gap:clamp(8px,.9vw,14px)}
.mq-r{overflow:hidden}
.mq-r ul{display:flex;align-items:flex-start;width:max-content;animation:mq 90s linear infinite}
.mq-r:nth-child(2) ul{animation-duration:110s;animation-direction:reverse}
.mq-r:nth-child(3) ul{animation-duration:100s}
.mq .mq-r:hover ul{animation-play-state:paused}   /* 帯（.mq）だけ。「私たちについて」の流れ（.reel）は止めない */
.mq li,.reel li{position:relative;flex:none;width:clamp(180px,17vw,300px);aspect-ratio:16/9;margin-right:clamp(8px,.9vw,14px);border-radius:3px;overflow:hidden;background:#1a1d26}
.mq a{display:block;height:100%}
.mq img,.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.74) saturate(.8);transition:filter .6s,transform 1.4s var(--ease)}
.mq .mq-r:hover img{filter:brightness(.5) saturate(.6)}
.mq .mq-r li:hover img{filter:none;transform:scale(1.05)}
@keyframes mq{to{transform:translateX(-50%)}}
/* 紙の上に流す版（トップの「私たちについて」）: 写真を大きく、2列を逆向きに。スクロールでも左右に押される（data-drift） */
.reel+.w .fine{margin-top:18px}
.reel{display:grid;gap:clamp(10px,1.1vw,16px);margin-top:clamp(48px,6vw,96px);overflow:hidden}
.reel .mq-r{overflow:visible}
.reel .mq-r>div{will-change:transform}
.reel ul{animation-duration:120s}
.reel .mq-r:nth-child(2) ul{animation-duration:140s}
.reel li{width:clamp(220px,22vw,380px);aspect-ratio:16/9;margin-right:clamp(10px,1.1vw,16px);border-radius:3px;background:#e3e5ea}
.reel img{filter:none}

/* 写真の帯: 画面の幅いっぱいの写真が、スクロールで奥行きを持って動く。上に言葉を置く */
.band{position:relative;height:clamp(360px,62vh,640px);overflow:hidden;background:#1a1d26;color:#fff}
.band>img,.band>video{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.band::after{content:"";position:absolute;inset:0;background:rgba(6,8,13,.34)}
.band>.w{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(32px,4.4vw,64px)}
.band-t{color:#fff;font-size:clamp(30px,4vw,60px);line-height:1.35;letter-spacing:.05em}
.band-n{margin-top:14px;font-size:12px;color:rgba(255,255,255,.72);letter-spacing:.04em}

/* ============================================================ サービス */
.sv-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px;align-items:center}
.sv-n{font-size:clamp(34px,4vw,60px);letter-spacing:.05em;line-height:1.2}
.sv-d{margin-top:22px;font-size:16px;line-height:2.05;max-width:30em}
.sv-k{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.sv-k li{height:30px;display:inline-flex;align-items:center;padding:0 12px;border-radius:15px;box-shadow:inset 0 0 0 1px var(--line2);font-size:13px;color:var(--ink)}
.sv-a{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:32px}
.one{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 72px;align-items:end}
.one h2{font-size:clamp(28px,3vw,44px);line-height:1.4;letter-spacing:.05em}
.one-m{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:clamp(32px,4vw,56px)}
.one .fine{grid-column:1/-1;margin-top:-8px}
.one-m li{display:grid;gap:10px;font-size:13px;color:var(--ink);letter-spacing:.06em}
.one-m .pic{width:100%;aspect-ratio:16/9;border-radius:2px}

/* ============================================================ プロダクト */
.pd-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 72px;align-items:center}
.pd-g.rev .pd-v{order:2}
.pd-v .pic{aspect-ratio:16/9;border-radius:2px}
.pd-k{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.pd-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;font-size:clamp(36px,4vw,56px);line-height:1.2;letter-spacing:.04em}
.pd-n .en{font-weight:400}
.pd-n small{font-size:15px;color:var(--sub);letter-spacing:.1em}
.pd-s{margin:18px 0 12px;font-size:17px;color:var(--ink);line-height:1.8}
.pd-p{margin-top:20px;display:grid;gap:10px;border-top:1px solid var(--line);padding-top:18px}
.pd-p li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.85}
.pd-p li::before{content:"";position:absolute;left:0;top:.9em;width:10px;height:1px;background:var(--blue)}
.pd-a{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}
.pd-rel{margin-top:clamp(48px,5vw,72px)}
.pd-rh{font-size:15px;color:var(--sub);letter-spacing:.06em;margin-bottom:8px}
.lab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.lab li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:center;padding:20px 28px 20px 20px;background:#fff;border-radius:4px}
.lab .pic{aspect-ratio:16/9;border-radius:2px}
.lab h3{font-size:21px;margin-bottom:10px}
.lab p{font-size:14px;color:var(--sub)}
.lab-more{margin-top:clamp(48px,5vw,72px);border-top:1px solid var(--line2);padding-top:22px}
.lab-more h3{font-size:15px;color:var(--sub);font-weight:500;letter-spacing:.06em;margin-bottom:6px}
.lab-more li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;gap:6px 24px;align-items:center;padding:16px 2px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.lab-more li a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.lab-more li a:hover{color:var(--blue)}
.lab-more small{font-size:13px;color:var(--sub)}
.lab-more .fine{margin:18px 0 22px}
.lab .lk{margin-top:14px}

/* ============================================================ 企業情報 */
#svs>.sec:first-child{padding-top:clamp(40px,4vw,72px)}
.msg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(48px,6vw,96px);align-items:center}
.msg-p .pic{aspect-ratio:4/5;border-radius:2px}
.msg-b{max-width:34em}
.msg-q{position:relative;padding-left:26px;border-left:2px solid var(--blue);font-size:clamp(24px,2.4vw,36px);line-height:1.6;color:var(--ink);letter-spacing:.04em;margin-bottom:32px}
.msg-b>p:not([class]){font-size:15.5px;line-height:2.1}
.msg-s{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:16px;color:var(--ink);letter-spacing:.08em}
.msg-s span{display:block;font-size:12.5px;color:var(--sub);margin-bottom:4px;letter-spacing:.06em}
.msg-mv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(48px,6vw,96px);align-items:center;margin-top:clamp(64px,7vw,104px);padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--line2)}
.msg-mv-t h3{font-size:clamp(22px,2.2vw,32px);line-height:1.5;letter-spacing:.05em}
.msg-mv-t>p:not([class]){margin-top:16px;font-size:15px;line-height:2.05}
.msg-mv .vidf{margin-top:0}
.map{margin-top:clamp(8px,1vw,16px);aspect-ratio:21/9;border-radius:2px;overflow:hidden;background:#e3e5ea}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.4)}
.dl{border-top:1px solid var(--line2)}
.dl>div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:8px 40px;padding:20px 4px;border-bottom:1px solid var(--line)}
.dl dt{color:var(--sub);font-size:14px}
.dl dd{color:var(--ink);font-size:15px;line-height:1.95}
.dl dd a{text-decoration:underline;text-underline-offset:3px}

/* 動画（押すまで読み込まない）。サムネイルに文字があるので、題名は下に置く */
.vidf{margin-top:32px}
.vid{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:2px;overflow:hidden;background:#0a0c12 var(--poster,none) center/cover;color:#fff}
.vid::before{content:"";position:absolute;inset:0;background:rgba(5,7,12,.18);transition:background-color .3s}
.vid:hover::before{background:rgba(5,7,12,0)}
.vid .yt-p{z-index:1}
.vid.on iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vidf figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:12px;font-size:14px;color:var(--ink);line-height:1.7}
.vidf figcaption span{font-size:12.5px;color:var(--sub)}

/* ============================================================ 下層の全面ヒーロー（めざす未来・採用）。墨の地に映像・写真 */
.vh{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate}
.vh>video{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;z-index:-2;opacity:.7}
.vh::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(6,8,13,.42)}
.vh-in{width:100%;padding-top:calc(var(--hd) + 48px);padding-bottom:clamp(40px,6vh,72px)}
.vh-k{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:13px;letter-spacing:.14em;color:rgba(255,255,255,.82);margin-bottom:clamp(20px,3vh,32px)}
.vh-k i{width:32px;height:1px;background:currentColor;opacity:.6}
.vh-t{color:#fff;font-size:clamp(40px,6.2vw,100px);line-height:1.2;letter-spacing:.04em}
.vh-t .ln{display:block;overflow:hidden;padding-bottom:.06em}
.vh-t .ln>span{display:inline-block;transform:translateY(105%);transition:transform 1.3s var(--ease)}
.vh-t .ln:nth-child(2)>span{transition-delay:.12s}
.ready .vh-t .ln>span{transform:none}
.vh-l{margin-top:clamp(20px,3vh,32px);font-size:clamp(15px,1.2vw,18px);line-height:2.05;color:rgba(255,255,255,.9);max-width:38em}
.vh-a{margin-top:clamp(24px,4vh,40px);display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}
.vh .lk,.fu-final .lk{color:#fff}
.vh .lk:hover{color:#fff;opacity:.7}
.vh-foot{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding-top:18px;padding-bottom:22px;border-top:1px solid rgba(255,255,255,.22);font-size:13px;letter-spacing:.1em;color:rgba(255,255,255,.8)}
.vh-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.vh-steps b{font-weight:500}
.vh-steps a{color:rgba(255,255,255,.85);transition:color .25s}
.vh-steps a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.vh-steps i{width:22px;height:1px;background:currentColor;opacity:.5}
.vh-n{position:absolute;right:var(--px);top:calc(var(--hd) + 12px);font-size:11px;color:rgba(255,255,255,.66);letter-spacing:.04em}
.btn.line.on-dark{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.btn.line.on-dark:hover{background:#fff;color:var(--ink)}
.pg.after-vh{padding-top:clamp(56px,7vw,104px)}
/* 墨のヒーローの上では、ヘッダーは白（スクロールして紙の地になったら墨に戻る） */
.dk .hd:not(.solid) .logo{--ka:-99999px;--kb:99999px}
.dk .hd:not(.solid) .nav>a,.dk .hd:not(.solid) .nav-b{color:#fff}
.dk .hd:not(.solid) .mb i{background:#fff}
.dk.menu-on .hd .nav>a,.dk.menu-on .hd .nav-b{color:var(--ink)}
.dk.menu-on .hd .mb i{background:var(--ink)}
.dk.menu-on .hd .logo{--ka:99999px;--kb:99999px}

/* ============================================================ めざす未来 */
/* 一本の流れ: 大きな段階名・本文・写真の3列を、3行 */
.fl3{border-top:1px solid var(--ink)}
.fl3>li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:24px clamp(32px,4vw,64px);align-items:start;padding:clamp(36px,4vw,56px) 0;border-bottom:1px solid var(--line2)}
.fl3-n{font-size:clamp(32px,3.6vw,56px);font-weight:500;letter-spacing:.08em;line-height:1.2;color:var(--ink)}
.fl3-n::after{content:"";display:block;width:44px;height:7px;margin-top:18px;background:var(--hatch)}
.fl3-b h3{font-size:clamp(20px,1.8vw,26px);line-height:1.5;margin-bottom:14px}
.fl3-b p{font-size:15px;line-height:2.05}
.fl3-s{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fl3-m figcaption{margin-top:10px;font-size:12.5px;color:var(--sub);letter-spacing:.06em}
.fl3-m.none .vf{display:grid;place-items:center;background:transparent;outline:1.5px dashed var(--line2);outline-offset:-1px}
.fl3-m.none .vf p{font-size:14px;color:var(--sub);letter-spacing:.08em}
.fu-loop{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 24px;margin:clamp(36px,4vw,56px) 0 20px;font-size:clamp(16px,1.4vw,20px);color:var(--ink);letter-spacing:.06em}
.fu-loop em{font:300 30px/1 var(--en);font-style:normal;color:var(--blue)}
/* WANの立ち位置: 墨の地に3つの力と、1文字ずつ濃くなる言葉 */
.fu-why{background:var(--ink);color:#c9ccd4}
.fu-why .sh{border-top-color:rgba(255,255,255,.22)}
.fu-why .sh::before{background-color:var(--ink);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 1px,transparent 1px 5px)}
.fu-why .sh-t,.fu-why h3{color:#fff}
.fu-why .sh-r p{color:#a9adb8}
.fu-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.18)}
.fu-tri li{padding:clamp(28px,3vw,40px) clamp(20px,2.4vw,36px) clamp(32px,3vw,44px) 0}
.fu-tri li+li{padding-left:clamp(20px,2.4vw,36px);border-left:1px solid rgba(255,255,255,.18)}
.fu-tri h3{font-size:clamp(24px,2.4vw,36px);line-height:1.4;letter-spacing:.06em;margin-bottom:16px}
.fu-tri p{font-size:14.5px;line-height:2}
.fu-line{margin-top:clamp(64px,8vw,120px);font-size:clamp(28px,4.2vw,68px);font-weight:500;line-height:1.5;letter-spacing:.05em;color:#fff}
.fu-line span{transition:opacity .2s}
.fu-note{margin-top:clamp(28px,3vw,44px);max-width:44em;font-size:15px;line-height:2.1}
/* 現在地: 6分野のカード */
.nw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
.nw a{display:grid;align-content:start;gap:10px;color:var(--ink)}
.nw .pic{aspect-ratio:16/9;border-radius:2px;margin-bottom:6px}
.nw a:hover .pic.in>img{transform:scale(1.035)}
.nw h3{font-size:clamp(19px,1.6vw,23px);line-height:1.5;transition:color .25s}
.nw a:hover h3{color:var(--blue)}
.nw a>p:not([class]){font-size:14px;color:var(--sub);line-height:1.95}
.nw-t{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.nw-rd{margin-top:clamp(56px,6vw,88px);border-top:1px solid var(--line2);padding-top:22px;margin-bottom:24px}
.nw-rd h3{font-size:15px;color:var(--sub);font-weight:500;letter-spacing:.06em;margin-bottom:6px}
.nw-rd li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;gap:6px 24px;align-items:center;padding:16px 2px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.nw-rd li a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px;transition:color .25s}
.nw-rd li a:hover{color:var(--blue)}
.nw-rd small{font-size:13px;color:var(--sub)}
/* 締め: 全面の映像の上の相談の入口 */
.fu-final{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(112px,14vw,200px) 0;text-align:center}
.fu-final>video{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;z-index:-2;opacity:.6}
.fu-final::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(6,8,13,.5)}
.fu-final h2{color:#fff;font-size:clamp(32px,4.4vw,68px);line-height:1.35;letter-spacing:.05em}
.fu-final p{max-width:36em;margin:24px auto 0;color:rgba(255,255,255,.86)}
.fu-final .with-b{margin-top:36px}
.fu-final+.ct{border-top:0}
.mv2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px;align-items:center}
.mv2 h2{font-size:clamp(26px,2.6vw,38px);line-height:1.45}
.mv2 p{margin-top:18px}
.mv2 .vidf{margin-top:0}
.with{display:grid;justify-items:center;text-align:center;gap:22px}
.with h2{font-size:clamp(26px,3vw,42px);line-height:1.45}
.with p{max-width:36em;color:var(--sub)}
.with-b{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:10px}

/* ============================================================ 採用情報 */
/* ヒーロー: 背後の帯（.mq.bg）は4列が交互に左右へ流れ、ポインターで少し傾く */
.mq.bg{position:absolute;inset:-4% -3%;z-index:-2;align-content:center;gap:clamp(10px,1.1vw,16px);transform:scale(1.07);transition:transform .9s var(--ease)}
.mq.bg li{width:clamp(220px,21vw,360px)}
.mq.bg img{filter:brightness(.5) saturate(.75)}
.mq.bg .mq-r:hover img{filter:brightness(.5) saturate(.75)}
.mq.bg .mq-r li:hover img{filter:brightness(1) saturate(1)}
.mq.bg .mq-r:nth-child(4) ul{animation-duration:96s;animation-direction:reverse}
.rc-vh::before{background:rgba(6,8,13,.56)}
/* メッセージ: 1文字ずつ濃くなる大きな言葉 */
.rc-msg{padding-top:clamp(64px,8vw,120px)}
.rc-big{font-size:clamp(30px,4.4vw,72px);line-height:1.35;letter-spacing:.04em;margin:clamp(12px,2vw,28px) 0 clamp(40px,5vw,72px)}
.rc-big span{transition:opacity .2s}
.rc-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:start}
.rc-lead>p{font-size:clamp(15px,1.2vw,17px);line-height:2.1;color:var(--text);max-width:40em}
/* WANの仕事: 大小の写真（左の1枚を大きく） */
.mk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(20px,2.4vw,36px);align-items:end}
.mk li{grid-column:span 5}
.mk li:nth-child(4n+1),.mk li:nth-child(4n){grid-column:span 7}
.mk li:nth-child(4n+1) h3,.mk li:nth-child(4n) h3{font-size:clamp(19px,1.6vw,23px)}
.mk .pic{aspect-ratio:16/9;border-radius:2px;margin-bottom:14px}
.mk h3{font-size:17px;line-height:1.6}
.mk p{font-size:14px;color:var(--sub);margin-top:4px}
.rc-h{font-size:clamp(20px,1.8vw,26px);margin:clamp(64px,7vw,96px) 0 24px}
.fl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.fl a{display:grid;align-content:start;gap:6px;height:100%;padding:8px 8px 18px;background:#fff;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);transition:box-shadow .3s}
.fl a:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.fl .pic{aspect-ratio:16/9;border-radius:2px;margin-bottom:6px}
.fl h4{font-size:16px;padding:0 8px}
.fl a>p{padding:0 8px}
.fl p{font-size:12px;color:var(--sub);line-height:1.7}
/* 大切にしていること: 墨の地に、大きな言葉を1行ずつ */
.rc-val{background:var(--ink);color:#c9ccd4}
.rc-val .sh{border-top-color:rgba(255,255,255,.22)}
.rc-val .sh::before{background-color:var(--ink);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 1px,transparent 1px 5px)}
.rc-val .sh-t,.rc-val h3{color:#fff}
.rc-val .sh-r p{color:#a9adb8}
.rc-val .fine{color:#7d828e;margin-top:20px}
.val{border-top:1px solid rgba(255,255,255,.18)}
.val li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:8px 40px;align-items:baseline;padding:clamp(24px,2.6vw,36px) 0;border-bottom:1px solid rgba(255,255,255,.14);transition:padding .6s var(--ease)}
.val li:hover{padding-left:14px}
.val h3{font-size:clamp(28px,3.4vw,54px);line-height:1.3;letter-spacing:.05em}
.val-s{font-size:15px;color:#8fa4ff;line-height:1.8}
.val p:not(.val-s){font-size:14px;color:#a9adb8;line-height:1.9}
/* 応募について: 写真が流れる面の上に、大きな言葉と入口 */
.rc-entry{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(112px,13vw,190px) 0;text-align:center}
.rc-entry::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(6,8,13,.6)}
.rc-entry h2{color:#fff;font-size:clamp(30px,4vw,60px);line-height:1.4;letter-spacing:.05em}
.rc-entry p{max-width:36em;margin:24px auto 0;color:rgba(255,255,255,.86)}
.rc-entry .with-b{margin-top:36px}
.rc-entry+.ct{border-top:0}
.ppl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 24px}
.ppl-i{aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line);margin-bottom:16px}
.ppl-i img{width:100%;height:100%;object-fit:contain}
.ppl h3{font-size:18px}
.ppl-r{font-size:13px;color:var(--blue);margin-top:2px}
.ppl-t{font-size:12px;color:var(--sub);line-height:1.7;margin-top:8px}
.ppl details{margin-top:12px;font-size:13px;line-height:1.85}
.ppl summary{cursor:pointer;color:var(--ink);list-style:none;display:inline-flex;align-items:center;gap:6px}
.ppl summary::-webkit-details-marker{display:none}
.ppl summary::after{content:"+";font-family:var(--en);color:var(--mute)}
.ppl details[open] summary::after{content:"−"}
.ppl details p{margin-top:8px;color:var(--text)}
.ppl-w{color:var(--sub)!important}
.jobs{border-top:1px solid var(--line2);margin-bottom:20px}
.jobs a{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr) auto 24px;gap:8px 24px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line);color:var(--ink);transition:padding .4s var(--ease)}
.jobs a::after{content:"→";font-family:var(--en);color:var(--mute);justify-self:end;transition:transform .4s var(--ease),color .25s}
.jobs a:hover{padding-left:12px}
.jobs a:hover h3,.jobs a:hover::after{color:var(--blue)}
.jobs h3{font-size:18px;letter-spacing:.03em;transition:color .25s}
.jobs p{font-size:13.5px;color:var(--sub)}
.jobs .off a{pointer-events:none;color:var(--mute)}
.jobs .off h3{color:var(--mute)}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:20px}
.steps li{position:relative;padding:24px 22px 26px;background:#fff;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}
.steps li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:36px;width:8px;height:1px;background:var(--line2)}
.stp{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;margin-bottom:16px}
.steps h3{font-size:16px;line-height:1.6}
.steps p{font-size:13px;color:var(--sub);margin-top:8px;line-height:1.85}

/* ============================================================ 採用LP（めざす未来を含む）。サイトと同じ紙の地 */
/* ヒーロー: サムネイルが4列で左右に流れ、コピーは紙の面の上に */
.rh{position:relative;min-height:100vh;min-height:100svh;padding-top:var(--hd);display:flex;align-items:flex-end;overflow:hidden;background:var(--paper)}
.rh-mq{position:absolute;left:-3%;right:-3%;top:calc(var(--hd) - 2%);bottom:-4%;display:grid;align-content:center;gap:clamp(10px,1vw,14px);transform:scale(1.07);transition:transform .9s var(--ease)}
.rh-mq li{width:clamp(240px,22vw,380px)}
.rh-mq img{filter:none}
.rh-mq .mq-r:nth-child(4) ul{animation-duration:96s;animation-direction:reverse}
.rh-copy{position:relative;z-index:1;width:min(760px,100%);margin-bottom:clamp(40px,7vh,80px);padding:clamp(32px,3.4vw,52px) clamp(32px,3.4vw,56px) clamp(32px,3.4vw,48px) var(--px);background:var(--paper)}
.rh-copy .crumb{margin-bottom:22px}
.rh-k{display:flex;align-items:center;gap:14px;font-size:12.5px;letter-spacing:.18em;color:var(--sub);margin-bottom:18px}
.rh-k .en{letter-spacing:.24em;color:var(--ink)}
.rh-k i{width:36px;height:1px;background:var(--blue)}
.rh-t{font-size:clamp(42px,5.4vw,84px);line-height:1.2;letter-spacing:.04em}
.rh-t .ln{display:block;overflow:hidden;padding-bottom:.06em}
.rh-t .ln>span{display:inline-block;transform:translateY(106%);transition:transform 1.4s var(--ease)}
.rh-t .ln:nth-child(2)>span{transition-delay:.12s}
.ready .rh-t .ln>span{transform:none}
.rh-l{margin-top:22px;font-size:15.5px;line-height:2;max-width:34em}
.rh-a{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.rh-ix{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.rh-ix a{padding:5px 13px;border-radius:15px;box-shadow:inset 0 0 0 1px var(--line2);font-size:12.5px;color:var(--ink);transition:box-shadow .25s,color .25s}
.rh-ix a:hover{color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
/* 技術のテーマ: 左に行、右に写真の枠（貼り付く） */
.th{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,5vw,80px);align-items:start}
.th-l{border-top:1px solid var(--ink)}
.th-l>li{border-bottom:1px solid var(--line2)}
.th-vb{grid-column:1/-1;font-size:12.5px;letter-spacing:.22em;color:var(--sub)}   /* 動詞（WANについての「ひとつの線」と同じ言葉） */
.th-l>li.on .th-vb{color:var(--blue)}
.th-l .th-h{grid-template-columns:minmax(0,1fr)}   /* 動詞・技術名・ひとことを、それぞれ1行に */
.th-l .th-k{min-width:0;white-space:normal}
.th-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-items:baseline;width:100%;padding:24px 4px;text-align:left;opacity:.45;transition:opacity .5s,padding .7s var(--ease)}
.th-l>li.on .th-h{opacity:1;padding-left:14px}
.th-k{min-width:5.2em;white-space:nowrap;font-size:clamp(20px,1.8vw,27px);font-weight:500;letter-spacing:.06em;color:var(--ink)}
.th-l>li.on .th-k{color:var(--blue)}
.th-t{font-size:15px;color:var(--ink);letter-spacing:.04em}
.th-x{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.th-l>li.on .th-x{grid-template-rows:1fr}
.th-x>div{overflow:hidden;min-height:0;padding:0 4px 0 14px}
.th-l>li.on .th-x>div{padding-bottom:26px}
.th-d{font-size:14.5px;line-height:2;color:var(--text)}
.th-g{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 10px}
.th-v{position:sticky;top:calc(var(--hd) + 20px)}
.th-hd{padding-top:20px;border-top:1px solid var(--line2);margin-bottom:22px}
.th-hd .sh-t{font-size:clamp(24px,2.3vw,34px)}
.th-hd p{margin-top:10px;font-size:14px;line-height:1.9;color:var(--sub);max-width:40em}
.th-v .frame{aspect-ratio:16/9}
.th-c{margin-top:12px;font-size:13px;color:var(--sub);letter-spacing:.08em}
/* 画面に止める（トップのサービス #service.pin と同じ決まり。recruit.js が高さと止める位置を決める） */
#tech.pin{padding-block:0}
#tech.pin>.w{position:sticky;padding-block:8px}
#tech.pin .th{align-items:start}   /* 右の写真は上に揃えて動かさない（一覧の高さは recruit.js が固定する） */
#tech.pin .th-v{position:static}
#tech.pin .th-h{grid-template-columns:5.5em minmax(0,1fr);align-items:baseline;padding-block:14px;gap:0 12px}   /* 閉じた行は「動詞　技術名」の1行（トップのサービスと同じく、開いた行だけひとことと説明を出す） */
#tech.pin .th-vb{grid-column:auto;font-size:12px;letter-spacing:.16em}
#tech.pin .th-k{font-size:clamp(19px,1.6vw,23px)}
#tech.pin .th-t{grid-column:1/-1;font-size:14px;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .45s,margin .6s var(--ease)}
#tech.pin .th-l>li.on .th-t{max-height:3em;opacity:1;margin-top:6px}
#tech.measure *{transition:none!important}
#tech.pin .th-l>li.on .th-x>div{padding-bottom:18px}
#tech.pin .th-d{font-size:14px;line-height:1.9}
#tech.pin .th-g{margin:10px 0 6px}
@media (max-height:820px){   /* 低い画面でも止められるよう、さらに詰める（タグは記事側で見られるので省く） */
  #tech.pin .th-h{padding-block:10px}
  #tech.pin .th-d{font-size:13.5px;line-height:1.8}
  #tech.pin .th-g{display:none}
  #tech.pin .th-l>li.on .th-x>div{padding-bottom:12px}
  #tech.pin .th-x .lk{margin-top:6px}
  #tech.pin .th-hd p{display:none}
}
/* めざす未来: 3段 */
.nx{margin-top:clamp(72px,8vw,120px);padding:clamp(32px,3.6vw,56px);border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.nx-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px}
.nx-k{font-size:13px;letter-spacing:.14em;color:var(--blue)}
.nx-h h3{font-size:clamp(24px,2.4vw,36px);line-height:1.45;letter-spacing:.05em}
.nx-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--line2)}
.nx-l li{position:relative;display:grid;gap:10px;align-content:start;padding:24px 28px 8px 0}
.nx-l li+li{padding-left:28px;border-left:1px solid var(--line)}
.nx-l li:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:22px;z-index:1;padding:0 2px;background:#fff;font-family:var(--en);color:var(--blue)}
.nx-l b{font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:.08em;color:var(--ink)}
.nx-l p{font-size:14px;line-height:1.9;color:var(--text)}
.nx-l .st{justify-self:start}
.nx-n{margin-top:24px;padding-top:18px;border-top:1px dashed var(--line2);font-size:14px;line-height:1.95;color:var(--sub)}
/* 考え方: 3つの取り組みの循環 */
.tk-lead{font-size:clamp(17px,1.5vw,21px);line-height:2.1;color:var(--ink);max-width:40em;margin-bottom:clamp(40px,5vw,64px)}
.cyc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px)}
.cyc li{position:relative;display:grid;align-content:start;gap:10px}
.cyc li:not(:last-child)::after{content:"→";position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:flex-end;transform:translateX(calc(clamp(28px,3vw,48px) / 2 + 7px));font:300 24px/1 var(--en);color:var(--blue);pointer-events:none}
.cyc .pic{aspect-ratio:16/9;border-radius:2px;margin-bottom:8px}
/* 取り組み方の図: 抽象的な線画。紙の地に墨の線、動くところだけ青 */
.cyc-v{aspect-ratio:16/9;border-radius:2px;margin-bottom:8px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.cyc-v svg{display:block;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.cv-dots circle{fill:var(--mute);stroke:none;animation:cvd 4s ease-in-out infinite}
.cv-dots circle.in{fill:var(--blue)}
.cv-dots circle:nth-child(3n){animation-delay:-1.3s}.cv-dots circle:nth-child(3n+1){animation-delay:-2.6s}
@keyframes cvd{50%{opacity:.35}}
.cv-lens{stroke:var(--blue);stroke-width:1.6;transform-origin:176px 88px;animation:cvl 7s ease-in-out infinite}
@keyframes cvl{50%{transform:translate(-26px,8px)}}
.cv-net line{stroke:var(--line2);stroke-dasharray:4 5;animation:cvn 1.6s linear infinite}
@keyframes cvn{to{stroke-dashoffset:-18}}
.cv-nodes>*{fill:#fff}
.cv-hub{fill:var(--blue);stroke:none;animation:cvh 2.4s ease-in-out infinite;transform-origin:160px 90px}
@keyframes cvh{50%{transform:scale(1.18)}}
.cv-box path{fill:#fff}
.cv-box path:nth-child(2){fill:#eceef2}.cv-box path:nth-child(3){fill:#dfe2e8}
.cv-out line{stroke:var(--blue);stroke-width:1.4;stroke-dasharray:6 8;animation:cvn 1.4s linear infinite}
.cyc-k{font-size:12.5px;letter-spacing:.14em;color:var(--blue)}
.cyc h3{font-size:clamp(22px,2vw,28px);letter-spacing:.05em}
.cyc li>p:not([class]){font-size:14.5px;line-height:1.95;color:var(--text)}
.cyc .lk{justify-self:start;margin-top:4px}
.cyc-back{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(40px,4vw,56px);padding:16px;border-top:1px dashed var(--line2);border-bottom:1px dashed var(--line2);font-size:15px;color:var(--ink);letter-spacing:.06em}
.cyc-back::before{content:"↻";font:300 22px/1 var(--en);color:var(--blue)}
/* 6つの事業領域 */
.fd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
.fd a{display:grid;align-content:start;gap:14px;height:100%;color:var(--ink)}
.fd .pic{aspect-ratio:16/9;border-radius:2px}
.fd a:hover .pic.in>img{transform:scale(1.035)}
.fd h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:clamp(22px,2vw,28px);letter-spacing:.05em;transition:color .25s}
.fd h3 .en{font-size:12.5px;font-weight:400;color:var(--sub);letter-spacing:.06em}
.fd a:hover h3{color:var(--blue)}
.fd-b>p:not([class]){margin-top:8px;font-size:14px;line-height:1.95;color:var(--text)}
.fd-k{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
/* 代表の密着動画: 章から再生 */
.mv3{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(40px,5vw,72px);align-items:start}
.mv3-k{font-size:13px;letter-spacing:.14em;color:var(--blue);margin-bottom:14px}
.mv3 h2{font-size:clamp(26px,2.8vw,40px);line-height:1.45;letter-spacing:.05em}
.mv3-t>p:not([class]){margin-top:18px;font-size:15px;line-height:2.05}
.mv3 .vidf{margin-top:0}
.mv3-ch{margin-top:24px;border-top:1px solid var(--line2)}
.mv3-ch button{display:flex;align-items:baseline;gap:16px;width:100%;padding:10px 2px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink);text-align:left;transition:color .25s,padding .4s var(--ease)}
.mv3-ch button .num{min-width:3.4em;color:var(--sub);font-size:13px}
.mv3-ch button:hover{color:var(--blue);padding-left:8px}
.mv3-ch button:hover .num{color:var(--blue)}
.rc-h{font-size:clamp(20px,1.8vw,26px);margin:clamp(64px,7vw,96px) 0 24px}
/* ヒーロー: 文字の読みやすさのために、左側だけ墨を敷く */
/* これまでの挑戦: 街を沈めて、大きな言葉と数字 */
/* めざす未来の章: 街の上を流れるカード */
/* 仕事: 縦のスクロールで横へ進むギャラリー（高さは recruit.js が決める） */
/* 働き方: 4枚の札。それぞれに小さな図 */
.stl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stl li{display:flex;flex-direction:column;padding:28px 26px 26px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.stl-k{font-size:12.5px;letter-spacing:.14em;color:var(--blue);margin-bottom:12px}
.stl h3{font-size:clamp(20px,1.7vw,24px);line-height:1.45;margin-bottom:12px}
.stl li>p:not([class]){font-size:14px;color:var(--sub);line-height:1.9}
.stl-v{margin-top:auto;padding-top:26px;height:86px;display:flex;align-items:flex-end;gap:6px}
.stl-home i{flex:1;height:34px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line2);animation:home 5s steps(1) infinite}
.stl-home i:nth-child(2){animation-delay:-1s}.stl-home i:nth-child(3){animation-delay:-2s}.stl-home i:nth-child(4){animation-delay:-3s}.stl-home i:nth-child(5){animation-delay:-4s}
@keyframes home{0%,19%{background:var(--blue);box-shadow:none}20%,100%{background:transparent;box-shadow:inset 0 0 0 1px var(--line2)}}
.stl-clock{position:relative;align-items:center;gap:10px;font:400 11px var(--en);color:var(--mute)}
.stl-clock i{position:relative;flex:1;height:14px;border-radius:7px;background:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 5px);box-shadow:inset 0 0 0 1px var(--line2)}
.stl-clock b{position:absolute;top:0;bottom:0;left:calc(100% * var(--a) / 24);width:0;border-radius:7px;background:var(--blue);transition:width 1.4s .3s var(--ease)}
.in .stl-clock b{width:calc(100% * (var(--b) - var(--a)) / 24)}
.stl-desk{flex-wrap:wrap;align-content:flex-end;gap:8px;position:relative}
.stl-desk i{width:calc((100% - 16px) / 3);height:22px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line2)}
.stl-desk i:nth-child(5){animation:desk 6s var(--io) infinite}
.stl-desk i:nth-child(1){animation:desk 6s var(--io) -3s infinite}
@keyframes desk{0%,40%{background:var(--blue);box-shadow:none}50%,100%{background:transparent;box-shadow:inset 0 0 0 1px var(--line2)}}
.stl-pc{justify-content:center}
.stl-pc i{position:relative;width:96px;height:58px;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--ink);overflow:hidden}
.stl-pc i::before{content:"";position:absolute;left:10px;right:10px;bottom:10px;height:3px;background:var(--line);border-radius:2px}
.stl-pc i::after{content:"";position:absolute;left:10px;bottom:10px;width:0;height:3px;background:var(--blue);border-radius:2px;animation:pc 2.6s var(--io) infinite}
@keyframes pc{from{width:0}to{width:calc(100% - 20px)}}
/* 社員の声 */
.voice{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;padding:clamp(36px,4vw,56px);margin-bottom:clamp(56px,6vw,88px);border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.voice blockquote{display:contents}
.voice-q{grid-row:1/3;font-size:clamp(28px,3.2vw,48px);line-height:1.45;letter-spacing:.04em;color:var(--ink)}
.voice blockquote>p:not(.voice-q){font-size:15px;line-height:2.05}
.voice figcaption{font-size:15px;color:var(--ink)}
.voice figcaption span{display:block;font-size:12.5px;color:var(--sub);margin-top:2px}
/* 求める人材 */
.want{text-align:left}
.want-t{font-size:clamp(32px,4.6vw,74px);line-height:1.4;letter-spacing:.04em}
.want-l{margin-top:clamp(28px,3vw,44px);max-width:40em;font-size:16px;line-height:2.1}
/* 募集職種: 押すと開く */
.job{border-top:1px solid var(--ink)}
.job>li{border-bottom:1px solid var(--line2)}
.job summary{position:relative;display:grid;grid-template-columns:160px minmax(0,5fr) minmax(0,4fr) auto 40px;gap:8px 28px;align-items:center;padding:20px 4px;cursor:pointer;list-style:none;transition:padding .4s var(--ease)}
.job summary::-webkit-details-marker{display:none}
.job summary:hover{padding-left:12px}
.job-i{display:block;aspect-ratio:16/9;border-radius:2px;overflow:hidden;background:#e3e5ea}
.job-i img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.job summary:hover .job-i img{transform:scale(1.05)}
.job .off .job-i img{filter:grayscale(1);opacity:.7}
.job-t{font-size:clamp(20px,1.8vw,26px);color:var(--ink);letter-spacing:.04em;transition:color .25s}
.job summary:hover .job-t{color:var(--blue)}
.job-e{font-size:13.5px;color:var(--sub)}
.job summary i{justify-self:end;position:relative;width:18px;height:18px}
.job summary i::before,.job summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--ink);transition:transform .4s var(--ease)}
.job summary i::after{transform:rotate(90deg)}
.job details[open] summary i::after{transform:rotate(0)}
.job .off summary .job-t{color:var(--mute)}
.job-b{padding:4px 4px 40px}
.job-lead{font-size:16px;line-height:2.05;color:var(--ink);max-width:48em;margin-bottom:28px}
.job-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px}
.job-g h4,.job-faq h4{font-size:13px;letter-spacing:.1em;color:var(--blue);margin-bottom:10px}
.job-g p,.job-g li{font-size:14.5px;line-height:1.95}
.job-g li{position:relative;padding-left:18px}
.job-g li::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:1px;background:var(--ink)}
.job-faq{margin-top:32px;padding:24px 28px;border-radius:4px;background:var(--paper)}
.job-faq dl>div+div{margin-top:14px}
.job-faq dt{font-size:14.5px;color:var(--ink)}
.job-faq dt::before{content:"Q.";font-family:var(--en);color:var(--blue);margin-right:10px}
.job-faq dd{margin-top:4px;font-size:14px;color:var(--text);line-height:1.9;padding-left:28px}
.job-a{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px}
.job-off{margin-top:24px;font-size:14px;color:var(--sub)}

/* ============================================================ フォーム */
.fm-w{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px 72px;align-items:start}
.fm-w.wide{grid-template-columns:minmax(0,1fr)}
.fm-side{position:sticky;top:calc(var(--hd) + 28px);display:grid;gap:10px;justify-items:start}
.fm-side h2{font-size:15px;color:var(--sub);font-weight:500;margin-top:22px;letter-spacing:.06em}
.fm-side h2:first-child{margin-top:0}
.fm-side p{font-size:14px}
.fm-tel a{font-size:32px;font-weight:300;letter-spacing:.06em;color:var(--ink)}
.fm{display:grid;gap:26px;padding:clamp(28px,3vw,48px);background:#fff;border-radius:4px}
.fm-intro{font-size:13.5px;color:var(--sub);line-height:1.95;padding-bottom:22px;border-bottom:1px solid var(--line)}
.fm-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}
.fm-r{display:grid;gap:10px}
.fm-l{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink)}
.fm-l b{font-weight:500}
.req-m,.opt-m{font-style:normal;font-size:11.5px;padding:2px 7px;border-radius:3px;line-height:1.5;letter-spacing:.06em}
.req-m{background:var(--blue);color:#fff}
.opt-m{box-shadow:inset 0 0 0 1px var(--line2);color:var(--sub)}
.fm-n{margin-left:auto;font-size:13px;color:var(--blue)}
.fm input:not([type=checkbox]),.fm select,.fm textarea{width:100%;min-height:52px;padding:12px 16px;border:0;border-radius:4px;background:var(--paper);box-shadow:inset 0 0 0 1px transparent;font:inherit;font-size:15px;color:var(--ink);transition:box-shadow .25s,background-color .25s}
.fm textarea{resize:vertical;line-height:1.9}
.fm select{appearance:none;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230a0c12' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 16px center/10px 6px;padding-right:40px;cursor:pointer}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue)}
.fm ::placeholder{color:#a3a8b2}
.fm-h{font-size:12.5px;color:var(--sub)}
.ng input:not([type=checkbox]),.ng select,.ng textarea{box-shadow:inset 0 0 0 1.5px #d63c3c}
.ng .docs{outline:1.5px solid #d63c3c;outline-offset:6px;border-radius:4px}
.ng-t{color:#d63c3c}
.fm-note{font-size:12.5px;color:var(--sub);line-height:1.9;padding:18px 20px;background:var(--paper);border-radius:4px}
.agree{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink);cursor:pointer;justify-self:start}
.agree input{width:20px;height:20px;accent-color:var(--blue);cursor:pointer}
.agree a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.agree.ng span{color:#d63c3c}
.agree.plain{font-size:13.5px;color:var(--sub)}
.fm-err{font-size:14px;color:#d63c3c}
.fm-go{justify-self:start;min-width:260px;height:56px}
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.doc-c{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:4px;background:var(--paper);box-shadow:inset 0 0 0 1px transparent;cursor:pointer;overflow:hidden;transition:box-shadow .25s,background-color .25s}
.doc-c input{position:absolute;opacity:0;pointer-events:none}
.doc-i{aspect-ratio:16/9;overflow:hidden;background:#e7e9ee}
.doc-i img{width:100%;height:100%;object-fit:cover}
.doc-b{display:grid;gap:4px;padding:14px 16px 16px}
.doc-b b{font-weight:500;font-size:14px;line-height:1.6;color:var(--ink)}
.doc-b span{font-size:12px;color:var(--sub)}
.doc-x{position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1.5px var(--line2)}
.doc-c:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.doc-c:has(input:checked){background:var(--blue-t);box-shadow:inset 0 0 0 2px var(--blue)}
.doc-c:has(input:checked) .doc-x{background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:none}
.doc-c:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:3px}
.fm-conf,.fm-done{display:none;padding:clamp(28px,3vw,48px);background:#fff;border-radius:4px}
.fm-conf h2,.fm-done h2{font-size:clamp(22px,2vw,28px);margin-bottom:14px}
.fm-conf .dl{margin:28px 0}
.fm-conf-b{display:flex;flex-wrap:wrap;gap:14px}
.fm-done{display:none;gap:18px;justify-items:start}
.fm-w.confirm .fm,.fm-w.sent .fm{display:none}
.fm-w.confirm .fm-conf{display:block}
.fm-w.sent .fm-done{display:grid}
.fm-w:not(.wide).confirm .fm-conf,.fm-w:not(.wide).sent .fm-done{grid-column:2}

/* ============================================================ サイトマップ・準備中 */
.sm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px}
.sm-g h2{font-size:14px;color:var(--sub);font-weight:500;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line2);letter-spacing:.08em}
.sm-g a{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.sm-g a::after{content:"→";font-family:var(--en);color:var(--mute)}
.sm-g a:hover{color:var(--blue)}
.pg.tall{min-height:40vh}
.doc-m{margin-top:3em!important;color:var(--sub);font-size:14px}
.pg+.sec{padding-top:clamp(40px,4.4vw,64px)}
.pg+.band,.pg+div>.sec:first-child{margin-top:0}

@media (max-width:900px){
  .sv-g,.pd-g,.msg,.msg-mv,.mv2,.one,.fm-w{grid-template-columns:1fr}
  .pd-g.rev .pd-v{order:0}
  .one-m{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mq li{width:44vw}
  .reel li{width:62vw}
  .band{height:52vh}
  .lab{grid-template-columns:1fr}
  .lab li{grid-template-columns:1fr}
  .fl3>li,.fu-tri,.nw,.rc-lead{grid-template-columns:1fr}
  .fu-tri li,.fu-tri li+li{padding:24px 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .nw-rd li{grid-template-columns:1fr auto}
  .nw-rd small{grid-column:1}
  .nw-rd .st{grid-row:1;grid-column:2}
  .vh-n{display:none}
  .vh-foot{font-size:12px}
  .dl>div{grid-template-columns:1fr;gap:2px}
  .map{aspect-ratio:4/3}
  .mk{grid-template-columns:1fr 1fr}
  .mk li,.mk li:nth-child(4n+1),.mk li:nth-child(4n){grid-column:auto}
  .fl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .val li{grid-template-columns:1fr;gap:6px}
  .ppl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jobs a{grid-template-columns:1fr auto;gap:4px 12px}
  .jobs p{grid-column:1}
  .jobs .st{grid-row:1;grid-column:2}
  .jobs a::after{display:none}
  .steps{grid-template-columns:1fr}
  .steps li:not(:last-child)::after{display:none}
  .fm-side{position:static}
  .fm-2{grid-template-columns:1fr}
  .fm-go{width:100%}
  .fm-w:not(.wide).confirm .fm-conf,.fm-w:not(.wide).sent .fm-done{grid-column:1}
  .sm{grid-template-columns:1fr 1fr}
}

/* ============================================================ トップ */
/* ---------- ヒーロー（白模型）。仕組みは hero.js、検討の経緯は site/hero-lab/ の案E ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:var(--paper)}
.gl{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;outline:0}
.hero.hov .gl{cursor:pointer}
.hero.cur .gl{cursor:none}
/* 映像のあいだのポインター: 小さなリングと十字の目盛り、右に「次の分野へ」 */
.hcur{position:absolute;left:0;top:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .3s}
.hcur.on{opacity:1}
.hcur i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #fff,0 0 0 1px rgba(6,8,13,.18);transform:scale(.6);transition:transform .45s var(--ease)}
.hcur.on i{transform:none}
.hcur i::before,.hcur i::after{content:"";position:absolute;background:#fff}
.hcur i::before{left:50%;top:-7px;bottom:-7px;width:1px;margin-left:-.5px;clip-path:polygon(0 0,100% 0,100% 7px,0 7px,0 calc(100% - 7px),100% calc(100% - 7px),100% 100%,0 100%)}
.hcur i::after{top:50%;left:-7px;right:-7px;height:1px;margin-top:-.5px;clip-path:polygon(0 0,7px 0,7px 100%,calc(100% - 7px) 100%,calc(100% - 7px) 0,100% 0,100% 100%,0 100%)}
.hcur span{position:absolute;left:28px;top:-9px;font-size:12px;letter-spacing:.1em;color:#fff;white-space:nowrap;text-shadow:0 0 4px rgba(6,8,13,.45)}
/* 最初の1枚が描けるまでは紙のまま */
[data-page="top"]:not(.ready) .gl,[data-page="top"]:not(.via):not(.ready) .hd,[data-page="top"]:not(.ready) .cap{opacity:0}   /* サイト内から戻ったときは、ヘッダーは消さない */
.gl,.cap{transition:opacity 1s}
[data-page="top"] .hd{transition:transform .5s var(--ease),background-color .35s,border-color .35s,opacity 1s}
.fb{position:absolute;inset:0;background:#111}
.fb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,12,.62),rgba(5,7,12,.2) 40%,rgba(5,7,12,0) 64%),linear-gradient(180deg,rgba(5,7,12,.44),rgba(5,7,12,0) 150px)}
.fb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}
.fb video.on{opacity:1}
.tags{position:absolute;inset:0;pointer-events:none;z-index:3}
.tag{position:absolute;left:0;top:0;padding:0 0 54px 9px;line-height:1.35;white-space:nowrap;color:var(--ink);opacity:0;will-change:transform,opacity}
.tag::before{content:"";position:absolute;left:0;bottom:0;width:1px;height:calc(100% - 4px);background:currentColor;opacity:.4}
.tag b{display:block;font-size:13px;font-weight:500;letter-spacing:.08em}
.tag span{display:block;font-size:11px;letter-spacing:.06em;color:var(--sub)}
.tag.cur,.tag.hov{color:var(--blue)}
.tag.cur::before,.tag.hov::before{opacity:1}
.tag.cur span,.tag.hov span{color:var(--blue)}
.copy{position:absolute;left:var(--px);bottom:clamp(26px,5.4vh,60px);z-index:5;max-width:min(48rem,64vw);pointer-events:none}
.copy a,.copy button{pointer-events:auto}
.h1{font-size:clamp(38px,5.15vw,86px);font-weight:500;line-height:1.24;letter-spacing:.025em;white-space:nowrap}
.ln{display:block;overflow:hidden;padding-bottom:.05em;margin-bottom:-.05em}
.hero .ln>span{display:inline-block;transform:translateY(106%);transition:transform 1.4s var(--ease)}
.hero .ln:nth-child(2)>span{transition-delay:.12s}
.ready .hero .ln>span{transform:none}
.lead{margin-top:clamp(16px,2.4vh,26px);font-size:clamp(14px,1.05vw,16.5px);line-height:2;letter-spacing:.06em;max-width:37em;opacity:0;transition:opacity 1.2s .5s}
.lead span{display:block;--cv:#2d323d;--cr:rgba(255,255,255,.94)}
.acts{margin-top:clamp(20px,3.2vh,34px);display:flex;align-items:center;gap:30px;opacity:0;transition:opacity 1.2s .7s}
.ready .lead,.ready .acts,.ready .doms{opacity:1}
.hero .btn{height:50px;padding:0 28px;font-size:14.5px}
.hero .btn::after{content:"↓"}
.hero .btn:hover::after{transform:translateY(3px)}
.lnk{position:relative;font-size:14.5px;letter-spacing:.08em;padding:6px 0;white-space:nowrap}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background-image:inherit;transform-origin:left;transition:transform .5s var(--ease)}
.lnk:hover::after{transform:scaleX(.3)}
.doms{margin-top:clamp(24px,4.4vh,50px);display:flex;align-items:center;gap:30px;opacity:0;transition:opacity 1.2s .9s}
.dom-l{display:flex;gap:22px}
.dom-l button{position:relative;padding:9px 0;font-size:13px;letter-spacing:.08em;white-space:nowrap;opacity:.62;transition:opacity .3s}
.dom-l button:hover,.dom-l button[aria-current="true"]{opacity:1}
.dom-l button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--blue);transform:scaleX(var(--p,0));transform-origin:left;opacity:0;transition:opacity .3s}
.dom-l button[aria-current="true"]::after{opacity:1}
.pp{padding:9px 0;font-size:12px;letter-spacing:.1em;opacity:.62;white-space:nowrap}
.pp:hover{opacity:1}
.cap{position:absolute;right:var(--px);bottom:clamp(64px,8.4vh,84px);z-index:5;max-width:min(30rem,40vw);text-align:right;pointer-events:none}
.cap-k{font-size:12.5px;letter-spacing:.06em;line-height:1.75;--cv:#2d323d;opacity:0;transition:opacity .6s}
.cap-n{margin-top:6px;font-size:11px;letter-spacing:.04em;line-height:1.7;--cv:#5f6471;--cr:rgba(255,255,255,.78);opacity:.55;transition:opacity .6s}
.cap.is-real .cap-n{opacity:1}
.cap:not(.is-real) .cap-n{opacity:0}
.cap.on .cap-k{opacity:1}
.hero.nogl .tags{display:none}

/* ---------- お知らせ ---------- */
.top-news{padding-block:clamp(40px,4vw,56px) clamp(32px,3vw,44px)}
.tn{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:16px 40px;align-items:start}
.tn-h{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:10px}
.tn-h h2{font-size:clamp(18px,1.5vw,22px);letter-spacing:.08em}
.tn-h .lk{font-size:13px}
.top-news .nws li a{padding:13px 4px;grid-template-columns:104px 120px minmax(0,1fr) 20px}
.top-news .nws .nws-t{font-size:14.5px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 見つけて、応えて、届ける。（トップ・WANについて）: 斜めに区切った暗い写真を、1本の線が貫く ---------- */
.sl{position:relative;background:var(--ink);color:#fff;padding-top:clamp(72px,8vw,120px);overflow:hidden}
.sl-h{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 48px;align-items:end;margin-bottom:clamp(36px,4vw,60px)}
.sl-h h2{color:#fff;font-size:clamp(28px,3vw,44px);line-height:1.35;letter-spacing:.05em}
.sl-r{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.sl-r p{color:#a9adb8;font-size:15px;line-height:2;max-width:34em}
.sl .lk{color:#fff}
.sl .lk:hover{color:#fff;opacity:.7}
.sl-b{position:relative}
.sl-p{--s:clamp(48px,5.5vw,96px);display:flex;height:clamp(420px,64vh,640px)}
.sl-i{position:relative;flex:1 1 0;min-width:0;margin-left:calc(6px - var(--s));clip-path:polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);transition:flex-grow .9s var(--ease)}
.sl-i:first-child{margin-left:0;clip-path:polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%)}
.sl-i:last-child{clip-path:polygon(var(--s) 0,100% 0,100% 100%,0 100%)}
.sl-p:hover .sl-i{flex-grow:.9}
.sl-p .sl-i:hover{flex-grow:1.4}
.sl-i a{position:absolute;inset:0;display:block;color:#fff;background:#0b0e15}
.sl-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.4) saturate(.5);transform:scale(1.05);transition:filter .8s,transform 1.6s var(--ease)}
.sl-i a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,13,0) 45%,rgba(6,8,13,.72))}
.sl-i:hover img{filter:brightness(.78) saturate(.95);transform:scale(1)}
.sl-t{position:absolute;z-index:1;left:calc(var(--s) * .2 + 28px);right:calc(var(--s) + 20px);bottom:clamp(32px,5vh,56px)}
.sl-i:first-child .sl-t,.sl-i:first-child .sl-dot{left:var(--px)}
.sl-k{font-size:13px;letter-spacing:.24em;color:rgba(255,255,255,.72)}
.sl-t h3{margin-top:10px;color:#fff;font-size:clamp(22px,2vw,32px);line-height:1.3;letter-spacing:.06em;white-space:nowrap}
.sl-w{display:flex;flex-wrap:wrap;gap:8px 18px;max-height:0;margin-top:0;overflow:hidden;opacity:0;transform:translateY(12px);font-size:14px;letter-spacing:.06em;color:rgba(255,255,255,.9);transition:max-height .7s var(--ease),margin-top .7s var(--ease),opacity .5s,transform .7s var(--ease)}
.sl-w span+span::before{content:"";display:inline-block;width:10px;height:1px;margin:0 12px 0 -8px;vertical-align:middle;background:rgba(255,255,255,.4)}
.sl-i:hover .sl-w,.sl-i a:focus-visible .sl-w{max-height:120px;margin-top:18px;opacity:1;transform:none;transition-delay:.15s}
.sl-i em{position:absolute;z-index:1;right:calc(var(--s) + 24px);top:clamp(28px,4vh,44px);font:300 26px/1 var(--en);font-style:normal;opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .6s var(--ease)}
.sl-i:last-child em{right:var(--px)}
.sl-i:hover em{opacity:1;transform:none}
/* 1本の線: 3枚を左から右へ順に貫く（斜めの切れ目で、線もわずかに途切れる）。点は各段階の位置 */
.sl-i::before{content:"";position:absolute;z-index:1;left:0;right:0;top:30%;height:1px;background:rgba(255,255,255,.62);pointer-events:none;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.5,0,.5,1)}
.sl-b.in .sl-i::before{transform:scaleX(1)}
.sl-b.in .sl-i:nth-child(1)::before{transition-delay:.4s}
.sl-b.in .sl-i:nth-child(2)::before{transition-delay:1.25s}
.sl-b.in .sl-i:nth-child(3)::before{transition-delay:2.1s}
.sl-dot{position:absolute;z-index:2;top:30%;left:calc(var(--s) + 24px);width:11px;height:11px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);border:1.5px solid #fff;transition:background-color .4s,transform .6s var(--ease)}
.sl-i:hover .sl-dot{background:#fff;transform:scale(1.35)}

/* ---------- WANについて ---------- */
/* ひとつの線: 区画を画面に貼り付ける。左に見出しと目次、右の枠の中で線と6つの技術が横に送られる */
.tl{position:relative;background:var(--ink);color:#fff}
.tl-s{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:var(--hd);overflow:hidden}
.tl-grid{width:100%;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px clamp(40px,4vw,72px);align-items:center}
.tl-side h2{color:#fff;font-size:clamp(26px,2.5vw,38px);line-height:1.45;letter-spacing:.05em}
.tl-lead{margin-top:18px;font-size:14.5px;line-height:2;color:#a9adb8;max-width:26em}
.tl-ix{margin-top:clamp(20px,3.5vh,36px);border-top:1px solid rgba(255,255,255,.14)}
.tl-ix button{position:relative;width:100%;display:grid;grid-template-columns:7em minmax(0,1fr);align-items:baseline;gap:12px;padding:11px 0 11px 18px;border-bottom:1px solid rgba(255,255,255,.14);text-align:left;color:rgba(255,255,255,.42);cursor:pointer;transition:color .4s}
.tl-ix button::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;border:1px solid currentColor;transition:background-color .4s,border-color .4s}
.tl-ix-k{font-size:15px;letter-spacing:.08em}
.tl-ix-n{font-size:12.5px;letter-spacing:.06em}
.tl-ix button:hover{color:rgba(255,255,255,.8)}
.tl-ix button.past{color:rgba(255,255,255,.62)}
.tl-ix button.on{color:#fff}
.tl-ix button.on::before{background:#fff;border-color:#fff}
.tl-ix button.on .tl-ix-n{color:#8fb0ff}
/* 右の枠: 画面の右端まで伸ばし、左の縁は目次の側へ溶けるように消す */
.tl-v{position:relative;overflow:hidden;width:calc(100% + (100vw - min(100vw, var(--max))) / 2 + var(--px));padding:8px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36px);mask-image:linear-gradient(90deg,transparent 0,#000 36px)}
.tl-w{position:relative;width:max-content;padding:0 60vw 0 36px;will-change:transform}
.tl-ln{position:absolute;left:0;right:0;top:6px;height:1px;background:rgba(255,255,255,.18)}
.tl-ln b{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.tl-tr{--g:clamp(56px,5vw,96px);display:flex;gap:var(--g)}
.tl-n{position:relative;flex:none;width:clamp(280px,22vw,360px);padding-top:34px}
.tl-d{position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--ink);border:1.5px solid rgba(255,255,255,.45);transition:background-color .5s,border-color .5s,transform .6s var(--ease)}
.tl-n.on .tl-d{background:#fff;border-color:#fff;transform:scale(1.15)}
.tl-ar{position:absolute;top:-6px;right:calc(var(--g) / -2);transform:translateX(50%);padding:0 10px;background:var(--ink);font:300 18px/1 var(--en);font-style:normal;color:rgba(255,255,255,.4);transition:color .6s}
.tl-n.on .tl-ar{color:#fff}
.tl-k{font-size:13px;letter-spacing:.22em;color:rgba(255,255,255,.5);transition:color .6s}
.tl-nm{margin-top:8px;color:#fff;font-size:clamp(22px,1.9vw,30px);line-height:1.3;letter-spacing:.05em;opacity:.45;transition:opacity .6s}
.tl-t{margin-top:8px;font-size:14.5px;letter-spacing:.04em;color:rgba(255,255,255,.55);transition:color .6s}
.tl-m{display:block;position:relative;margin-top:18px;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#11141c}
.tl-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.3) saturate(.3);transform:scale(1.06);transition:filter 1s,transform 1.6s var(--ease)}
.tl-g{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tl-g span{padding:3px 9px;border:1px solid rgba(255,255,255,.18);border-radius:2px;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.5);transition:color .6s,border-color .6s}
.tl-n.on .tl-k{color:#8fb0ff}
.tl-n.on .tl-nm{opacity:1}
.tl-n.on .tl-t{color:rgba(255,255,255,.92)}
.tl-n.on .tl-m img{filter:brightness(.82) saturate(.9);transform:scale(1)}
.tl-n.on .tl-m:hover img{filter:none}
.tl-n.on .tl-g span{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.34)}
.tl-end{width:clamp(280px,22vw,380px)}
.tl-big{margin-top:14px;font-size:clamp(30px,2.8vw,44px);line-height:1.4;letter-spacing:.05em;color:#fff;opacity:.3;transition:opacity .8s}
.tl-end.on .tl-big{opacity:1}
.tl-end .lk{margin-top:26px;color:#fff}
/* 貼り付けない場合（動きを減らす設定・狭い画面）: 見出しの下で、横に指で送る */
.tl.flat .tl-s{position:relative;height:auto;padding-block:calc(var(--hd) + 40px) 72px}
.tl.flat .tl-grid{grid-template-columns:minmax(0,1fr)}
.tl.flat .tl-v{overflow-x:auto;width:100%}

/* 見つけて、応えて、届ける。: 3つの列。行（写真・説明・4つの項目・リンク）を横でそろえる */
.ab-sl{padding-bottom:clamp(72px,8vw,120px)}
.ab-st-b{--ch:clamp(240px,24vw,340px);--s:44px;position:relative}
.ab-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px}
.stc{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;scroll-margin-top:calc(var(--hd) + 32px)}
.stc.rv{transform:none;transition:opacity .9s var(--ease) calc(var(--i) * .28s)}
.stc-m{position:relative;height:var(--ch);overflow:hidden;background:#0b0e15;clip-path:polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%)}
.stc-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.5);transform:scale(1.16);transition:filter .8s,transform 1.6s var(--ease)}
.stc.in .stc-m img{transform:scale(1.04);transition:filter .8s,transform 1.8s var(--ease) calc(var(--i) * .28s)}
.stc-m::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,13,0) 40%,rgba(6,8,13,.75))}
.stc-o{position:absolute;z-index:1;left:22px;right:calc(var(--s) + 12px);bottom:22px}
.stc-k{font-size:13px;letter-spacing:.24em;color:rgba(255,255,255,.72)}
.stc-o h3{margin-top:8px;color:#fff;font-size:clamp(22px,2vw,30px);letter-spacing:.06em;white-space:nowrap}
.stc-w{display:flex;flex-wrap:wrap;gap:4px 14px;max-height:0;overflow:hidden;opacity:0;font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.9);transition:max-height .6s var(--ease),margin-top .6s var(--ease),opacity .4s}
.stc-dot{position:absolute;z-index:2;top:32%;left:calc(var(--s) * .68 + 18px);width:11px;height:11px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);border:1.5px solid #fff;transition:background-color .4s,transform .6s var(--ease)}
.stc-d{margin-top:22px;font-size:14.5px;line-height:2;color:#a9adb8;transition:color .4s}
.stc-l{display:block;margin-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.stc-l a{display:block;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);transition:padding .4s var(--ease)}
.stc-l a:hover{padding-left:8px}
.stc-l b{display:block;font-weight:500;font-size:15px;color:#fff;letter-spacing:.04em;transition:color .3s}
.stc-l small{display:block;margin-top:3px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.55)}
.stc-l a:hover b{color:#8fb0ff}
.stc-a{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:22px}
/* WANについての帯: 写真の代わりにデジタルツインの動き（canvas） */
.ab-band{background:var(--ink)}   /* 下の「ひとつの線」と同じ地。下の端は、その黒へ溶けるように消える */
.ab-band::after{background:linear-gradient(90deg,rgba(10,12,18,.72) 0%,rgba(10,12,18,.2) 45%,rgba(10,12,18,0) 70%),linear-gradient(180deg,rgba(10,12,18,0) 55%,var(--ink) 100%)}
.ab-band canvas{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
.band-k{margin-bottom:14px;font-size:13px;letter-spacing:.2em;color:#8fb0ff}
/* 列のどこかに指を置くと、写真が明るくなり、キーワードが出て、中身の文字も明るくなる */
.stc:hover .stc-m img{filter:brightness(.8) saturate(.95);transform:scale(1)}
.stc:hover .stc-w{max-height:80px;margin-top:12px;opacity:1}
.stc:hover .stc-dot{background:#fff;transform:scale(1.3)}
.stc:hover .stc-d{color:#d4d8e0}
.ab-st:hover .stc:not(:hover) .stc-m img{filter:brightness(.3) saturate(.4)}
/* 1本の線: 3枚の写真を左から順に貫く（列が現れるのと同じ間合い） */
.ab-st-ln{position:absolute;z-index:3;left:0;right:0;top:calc(var(--ch) * .32);height:1px;background:rgba(255,255,255,.62);pointer-events:none;transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.5,0,.3,1) .1s}
.ab-st-b.in .ab-st-ln{transform:scaleX(1)}
.ab-sl .sl-i em{font-size:22px}

/* 見る、学ぶ、動かす: 区画を画面に貼り付け、スクロールで7つの場面。左に言葉、右に絵（canvas） */
.sla{position:relative;height:560vh;background:#06080d;color:#fff}
.sla-s{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding-top:var(--hd);overflow:hidden}
.sla-in{width:100%;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px clamp(32px,3vw,56px);align-items:center}
.sla-k{display:flex;align-items:center;gap:12px;font:500 13px/1 var(--en);letter-spacing:.22em;color:rgba(255,255,255,.62)}
.sla-k i{font-style:normal;opacity:.5}
.sla-t h2{margin-top:16px;color:#fff;font-size:clamp(24px,2.2vw,34px);line-height:1.5;letter-spacing:.05em}
.sla-l{margin-top:clamp(16px,3vh,32px);border-top:1px solid rgba(255,255,255,.14)}
.sla-i{display:grid;grid-template-columns:78px minmax(0,1fr);column-gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);opacity:.36;transition:opacity .6s}
.sla-i.on{opacity:1}
.sla-e{grid-row:span 2;padding-top:6px;font:500 12.5px/1 var(--en);letter-spacing:.16em;color:#8fb0ff}
.sla-i h3{color:#fff;font-size:clamp(19px,1.6vw,24px);line-height:1.3;letter-spacing:.08em}
.sla-x{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.sla-i.on .sla-x{grid-template-rows:1fr}
.sla-x>div{overflow:hidden}
.sla-c{margin-top:8px;font-size:15.5px;letter-spacing:.04em;color:#fff}
.sla-d{margin-top:6px;font-size:13.5px;line-height:1.95;color:#a9adb8}
.sla-sp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px;font-size:13px}
.sla-sp span{padding:4px 10px;border:1px solid rgba(255,255,255,.2);border-radius:14px;color:rgba(255,255,255,.5);transition:background-color .4s,color .4s,border-color .4s}
.sla-sp span.past{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.35)}
.sla-sp span.on{background:#fff;border-color:#fff;color:var(--ink)}
.sla-sp i{font-style:normal;font-family:var(--en);color:rgba(255,255,255,.35)}
.sla-kw{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.55)}
.sla-kw span::before{content:"# ";color:rgba(143,176,255,.7)}
.sla-x .lk{margin:12px 0 4px;color:#fff}
.sla-v{position:relative;height:min(70vh,660px)}
.sla-v canvas{position:absolute;inset:0;width:100%;height:100%}
.sla-cap{position:absolute;right:0;top:0;max-width:22em;padding:12px 16px;border-left:2px solid #8fb0ff;background:rgba(6,8,13,.7);font-size:13px;line-height:1.8;letter-spacing:.04em;color:rgba(255,255,255,.82)}
.sla-cap:empty{display:none}
.sla-cap b{display:block;margin-bottom:2px;font-size:15px;font-weight:500;color:#fff;letter-spacing:.08em}
.sla-bar{width:100%;display:flex;align-items:center;gap:32px;padding-block:12px 20px}
.sla-bar-in{--p:0;position:relative;flex:1;display:grid;grid-template-columns:28fr 37fr 35fr;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);font:500 12px/1 var(--en);letter-spacing:.16em;color:rgba(255,255,255,.55)}
.sla-bar-in b{position:absolute;left:0;top:-1px;height:2px;width:calc(var(--p) * 100%);background:#8fb0ff}
.sla-loop{font-size:12.5px;letter-spacing:.06em;color:rgba(255,255,255,.6);white-space:nowrap}
/* 貼り付けない場合: 3つとも開いて並べ、絵は「動かす」の場面で動かす */
.sla.flat{height:auto}
.sla.flat .sla-s{position:relative;height:auto;padding-block:calc(var(--hd) + 40px) 40px}
.sla.flat .sla-in{grid-template-columns:minmax(0,1fr)}
.sla.flat .sla-v{height:420px}

/* ---------- サービス ---------- */
.svc{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px 72px;align-items:start;margin-bottom:28px}
.svc-l{border-top:1px solid var(--line2)}
.svc-l a{position:relative;display:grid;gap:8px;padding:26px 44px 26px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.svc-l a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.svc-l a.on::before{transform:scaleX(1)}
.svc-l a::after{content:"→";position:absolute;right:6px;top:30px;font-family:var(--en);font-size:18px;color:var(--mute);transition:transform .4s var(--ease),color .25s}
.svc-l a.on::after,.svc-l a:hover::after{color:var(--blue);transform:translateX(4px)}
.svc-n{font-size:clamp(22px,2vw,28px);letter-spacing:.05em;line-height:1.4;transition:color .25s}
.svc-l a.on .svc-n{color:var(--blue)}
.svc-d{font-size:14px;color:var(--sub);line-height:1.9;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .45s}
.svc-l a.on .svc-d{max-height:9em;opacity:1}
.svc-k{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--sub)}
.svc-k i{font-style:normal}
.svc-m{display:none}
/* スクロールで分野を順に開く間、区画を画面に止める（top.js が高さと止める位置を決める） */
#service.pin{padding-block:0}
#service.pin>.w{position:sticky;padding-block:8px}
#service.pin .sh{margin-bottom:clamp(24px,3vw,40px)}
#service.pin .svc-l a{padding-block:14px;gap:6px}
#service.pin .svc-n{font-size:clamp(20px,1.7vw,24px)}
#service.pin .svc-k{max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .45s}
#service.pin .svc-l a.on .svc-k{max-height:4em;opacity:1}
#service.pin .svc-l a::after{top:18px}
#service.pin .svc-v{position:static}
.svc-v{position:sticky;top:calc(var(--hd) + 32px)}
.svc-f{position:relative;aspect-ratio:16/9;background:#1a1d26;overflow:hidden;border-radius:2px}
.svc-p{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path 0s .95s}
.svc-p.on{clip-path:inset(0);transition:clip-path .95s var(--io)}
.svc-p>img,.svc-p>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.8s var(--ease)}
.svc-p.on>img,.svc-p.on>video{transform:none}
.svc-p>video{opacity:0;transition:transform 1.8s var(--ease),opacity .6s}
.svc-p.play>video{opacity:1}
.svc-p>.crop{height:132%;top:-16%}
.svc-c{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:13px;color:var(--sub);letter-spacing:.06em}
.svc-s{color:var(--sub)}
.svc-c>span:first-child{color:var(--ink)}

/* ---------- プロダクト: 左に写真の枠、右に一覧（以前のトップと同じ型） ---------- */
.duo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(40px,5vw,80px);align-items:start}
.duo-v{position:sticky;top:calc(var(--hd) + 32px)}
.frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#e3e5ea}
/* 切り替え: 新しい写真が上にふわっと重なり、少し引いて落ち着く（拭う動きはやめた）。下の写真は重なり終わってから外す */
.frame figure{position:absolute;inset:0;opacity:0;transition:opacity .9s cubic-bezier(.33,0,.2,1)}
.frame figure.on{opacity:1}
.frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.045);transition:transform 2.4s var(--ease)}
.frame figure.on img{transform:none}
.frame figure figcaption{opacity:0;transition:opacity .3s}
.frame figure.cur figcaption{opacity:1;transition:opacity .5s .45s}   /* 名札は重ねない: 前のものはすぐ消し、新しいものは少し遅れて出す */
.frame figcaption{position:absolute;left:0;bottom:0;padding:9px 16px;background:var(--paper);font:400 13px var(--en);letter-spacing:.08em;color:var(--ink)}
.wh .frame figcaption{background:#fff}
.rows{border-top:1px solid var(--ink)}
.row a,.row>div{display:grid;grid-template-columns:1fr 28px;align-items:center;padding:26px 4px;border-bottom:1px solid var(--line2);color:var(--ink);opacity:.42;transition:opacity .5s,padding .7s var(--ease)}
.row.on a{opacity:1;padding-left:16px}
.row h3{font:400 clamp(28px,2.8vw,44px)/1.3 var(--en);letter-spacing:.04em}
.row h3.jp{font-family:var(--jp);font-weight:500;font-size:clamp(22px,2vw,32px);letter-spacing:.08em}
.row em{font:400 18px var(--en);font-style:normal;justify-self:end;transition:transform .5s var(--ease)}
.row .ar-x{justify-self:end;width:14px;height:14px}
.row.on em{transform:translateX(4px)}
.row-x{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.row.on .row-x{grid-template-rows:1fr}
.row-x>div{overflow:hidden;min-height:0}
.row-x p{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:12px;font-size:14px;color:var(--sub)}
.row.soon>div{opacity:.5;border-bottom-style:dashed}
.row.soon h3{font-weight:300}
.row.soon .row-x{grid-template-rows:1fr}
.prd-n{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:44px;color:var(--sub);font-size:14px}

/* ---------- 私たちについて ---------- */
.ab{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px 72px;align-items:end}
.ab-t h2{font-size:clamp(36px,4.6vw,68px);line-height:1.28;letter-spacing:.05em}
.ab-s{margin-top:20px;font-size:clamp(16px,1.4vw,20px);color:var(--ink);letter-spacing:.08em}
.ab-r p{max-width:34em}
.ab-r .lk{margin-top:22px}
.top-about{overflow:hidden}

/* ---------- 入口: 文字だけの3列。指を置くと墨の面が下からせり上がり、文字が白に返る ---------- */
.gate{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));border-top:1px solid var(--line2);background:var(--paper)}
.gate-a{position:relative;isolation:isolate;min-height:clamp(260px,34vh,380px);padding:clamp(40px,4.4vw,64px) var(--px) clamp(36px,3.6vw,52px);display:flex;flex-direction:column;overflow:hidden;color:var(--ink);transition:color .5s .05s,opacity 1s var(--ease),transform 1s var(--ease)}
.gate-a+.gate-a{border-left:1px solid var(--line2)}
.gate-a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);clip-path:inset(100% 0 0 0);transition:clip-path .8s var(--ease)}
.gate-a::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.gate-a h2{margin-top:auto;color:inherit;font-size:clamp(28px,3vw,46px);letter-spacing:.07em;line-height:1.3;transition:transform .8s var(--ease)}
.gate-a p{margin-top:12px;font-size:14px;letter-spacing:.06em;color:var(--sub);max-width:22em;transition:color .5s}
.gate-a em{position:absolute;right:var(--px);top:clamp(36px,4vw,56px);font:300 32px/1 var(--en);font-style:normal;transition:transform .7s var(--ease)}
.gate-a:hover{color:#fff}
.gate-a:hover::before{clip-path:inset(0)}
.gate-a:hover::after{transform:scaleX(1)}
.gate-a:hover h2{transform:translateY(-6px)}
.gate-a:hover p{color:rgba(255,255,255,.72)}
.gate-a:hover em{transform:translateX(8px)}
.gate+.ct{border-top:1px solid var(--line2)}
.card-ph{position:relative;aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:space-between;padding:18px 20px;border-radius:2px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.card-ph::before{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--hatch);opacity:.5}
.card-ph span{font-size:12px;color:var(--sub);letter-spacing:.08em}
.card-ph b{font-weight:500;font-size:clamp(22px,2vw,30px);color:var(--ink);letter-spacing:.06em;line-height:1.3;margin-bottom:14px}
.wh .card-ph{background:var(--paper)}

@media (max-width:900px){
  .copy{right:var(--px);max-width:none;bottom:18px}
  .h1{font-size:clamp(30px,8.4vw,60px)}
  .lead{font-size:13.5px;line-height:1.9}
  .acts{gap:22px}
  .hero .btn{height:44px;padding:0 20px;font-size:13.5px}
  .lnk{font-size:13.5px}
  .doms{gap:18px;margin-top:16px}
  .dom-l{gap:16px;overflow-x:auto;scrollbar-width:none;margin-right:-4px}
  .dom-l::-webkit-scrollbar{display:none}
  .dom-l button{font-size:12px}
  .pp{display:none}
  .cap{left:var(--px);right:var(--px);top:84px;bottom:auto;max-width:none;text-align:left}
  .cap-k{font-size:11.5px}
  .cap-n{font-size:10px;margin-top:2px}
  .tag b{font-size:12px}
  .tag span{display:none}
  .tn{grid-template-columns:1fr}
  .tn-h{flex-direction:row;justify-content:space-between;align-items:center;padding-top:0}
  .svc{grid-template-columns:1fr}
  .svc-v{display:none}
  .svc-l a{padding-right:36px}
  .svc-d{max-height:none;opacity:1}
  .svc-m{display:block;aspect-ratio:16/9;border-radius:2px;margin-top:12px}
  .duo{grid-template-columns:1fr;gap:24px}
  .duo-v{position:relative;top:0}
  .row a,.row>div{padding:18px 2px}
  .row.on a{padding-left:8px}
  .ab{grid-template-columns:1fr}
  .gate{grid-template-columns:1fr}
  .gate-a{min-height:200px}
  .gate-a+.gate-a{border-left:0;border-top:1px solid var(--line2)}
  #rec li:nth-child(n+5){display:none}   /* スマートフォンでは4件まで */
}

/* ============================================================ スマートフォン（〜900px）: PC の並びをそのまま縮めず、縦に読みやすく組み直す */
@media (max-width:900px){
  :root{--sec:clamp(64px,16vw,88px)}
  .sec{padding-block:var(--sec)}
  .sh-t{font-size:clamp(24px,7vw,32px)}
  /* トップ: ヒーロー */
  .cap{display:none}   /* 分野名は下の分野の並びで分かるので、ヘッダーと重ねない */
  /* トップのお知らせ: 日付と種類を1行目、タイトルを2行目に（省略しない） */
  .top-news .nws li a{grid-template-columns:minmax(0,1fr) 20px;gap:4px 12px;padding:14px 2px}
  .top-news .nws .nws-t{white-space:normal;font-size:14px;line-height:1.7}
  .top-news .nws time{font-size:12.5px}
  /* トップ: 見つけて、応えて、届ける。斜めの3枚を、縦に重ねた帯に */
  .sl{padding-top:var(--sec)}
  .sl-h{grid-template-columns:1fr;gap:16px}
  .sl-h h2{font-size:clamp(26px,7.4vw,34px)}
  .sl-p{--s:22px;flex-direction:column;height:auto}
  .sl-i,.sl-i:first-child,.sl-i:last-child{flex:none;height:clamp(150px,42vw,200px);margin:0;clip-path:polygon(0 var(--s),100% 0,100% calc(100% - var(--s)),0 100%)}
  .sl-i+.sl-i{margin-top:calc(6px - var(--s))}
  .sl-p:hover .sl-i,.sl-p .sl-i:hover{flex-grow:0}
  .sl-i img{filter:brightness(.5) saturate(.6);transform:none}
  .sl-t,.sl-i:first-child .sl-t{left:var(--px);right:var(--px);bottom:calc(var(--s) + 12px)}
  .sl-t h3{font-size:22px}
  .sl-w{max-height:none;margin-top:8px;opacity:1;transform:none;font-size:12.5px}
  .sl-i::before,.sl-dot,.sl-i em{display:none}
  /* 実績・技術情報のカード: 2列にして、1画面で見渡せるように */
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 14px}
  .card-t{font-size:13.5px;line-height:1.7}
  .card-m{gap:4px 6px;font-size:11px}
  .card-m .tg:nth-of-type(n+2){display:none}
  /* 下部の入口 */
  .gate-a{min-height:0;padding-block:28px 26px}
  .gate-a h2{font-size:24px}
  .gate-a em{top:30px;font-size:24px}
  /* WANについて */
  .ab-st-b{--ch:clamp(170px,48vw,220px);--s:22px}
  .ab-st{grid-template-columns:1fr;row-gap:44px}
  .ab-st-ln{display:none}
  .stc-m{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--s)),0 100%)}
  .stc-o{left:var(--px);bottom:calc(var(--s) + 10px)}
  .stc-w{max-height:none;margin-top:8px;opacity:1}
  .stc-dot{display:none}
  .sla-bar{display:none}
  .sla.flat .sla-s{padding-bottom:var(--sec)}
  .sla-v{margin-top:8px}
  .sla-cap{position:static;margin-top:12px;max-width:none}
  .band-t{font-size:clamp(26px,7.4vw,34px)}
  /* 採用情報: 技術は見出しを先に、写真の枠は使わない */
  .th{grid-template-columns:1fr;gap:24px}
  .th-v{position:static;order:-1}
  .th-v .frame,.th-c{display:none}
  .th-hd{margin-bottom:0}
  .cyc{grid-template-columns:1fr;gap:40px}
  .cyc li:not(:last-child)::after{content:"↓";left:auto;right:0;top:auto;bottom:-32px;width:auto;aspect-ratio:auto;transform:none;font-size:20px}
  .fd{grid-template-columns:1fr;gap:32px}
  .mv3{grid-template-columns:1fr;gap:24px}
  .mv3-ch{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  .mv3-ch button{font-size:13px;gap:10px}
  .want-t{font-size:clamp(26px,7.6vw,36px)}
  .want-l{font-size:15px}
  .job summary{grid-template-columns:88px minmax(0,1fr) 22px;gap:4px 14px;padding:16px 2px}
  .job summary:hover{padding-left:2px}
  .job-i{grid-row:1/4}
  .job-t{grid-column:2;font-size:16px}
  .job-e{grid-column:2;font-size:12px}
  .job summary .st{grid-column:2;justify-self:start}
  .job summary i{grid-column:3;grid-row:1/4}
  .job-g{grid-template-columns:1fr;gap:22px}
  .job-faq{padding:18px 18px}
  .rc-entry{padding-block:clamp(88px,22vw,120px)}
  .rc-entry h2{font-size:clamp(24px,7vw,32px)}
  /* 記事 */
  .art-t{font-size:clamp(20px,5.8vw,26px)}
  .art-eye{margin-inline:calc(var(--px) * -1)}
  .art-eye .pic{border-radius:0}
  .art-f-k{flex-basis:100%;margin:0 0 4px}
}

/* ============================================================ スマートフォン（〜900px）の組み方
   PCの「マウスを乗せると開く」「スクロールの量で選ぶ」「スクロールで写真がずれる」は使わない（chrome.js の phone）。
   横に並べて見比べるものは、指で送るカード（.sw。右に次の1枚が少し見え、下に何枚目かと進み具合の線）。
   縦に長い一覧は、写真と見出しを横に並べた行。開け閉めしていた中身は、最初から開いて見せる */
.row-m,.th-m{display:none}
.menu-b{display:flex;flex-wrap:wrap;gap:10px}
.menu-req{display:inline-flex;align-items:center;height:48px;padding:0 26px;border-radius:24px;box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue);font-size:15px;letter-spacing:.08em}
@media (max-width:900px){
  /* 指で送るカード */
  .sw{display:flex!important;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--px);margin-inline:calc(var(--px) * -1);padding:0 var(--px) 4px;scrollbar-width:none;overscroll-behavior-x:contain}
  .sw::-webkit-scrollbar{display:none}
  .sw>li{flex:0 0 min(84%,420px);min-width:0;scroll-snap-align:start}
  .sw>.rv{opacity:1;transform:none}
  .sw-p{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:12.5px;color:var(--sub);letter-spacing:.06em}
  .sw-n b{font-weight:500;color:var(--ink)}
  .sw-bar{position:relative;flex:1;height:1px;background:var(--line2);overflow:hidden}
  .sw-bar i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform .2s}

  /* 見出しの下の目次（ページ内の各節へ）: 折り返さず、1行を指で送る */
  .pg:not(.after-vh) .pg-ix{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--px) * -1);padding:2px var(--px);scrollbar-width:none}
  .pg:not(.after-vh) .pg-ix::-webkit-scrollbar{display:none}
  .pg:not(.after-vh) .pg-ix a{flex:none}
  /* 一覧の絞り込み: 1行を指で送る */
  .flt{gap:12px;margin-bottom:8px;padding-bottom:18px}
  .flt-b{flex-wrap:nowrap;overflow-x:auto;width:calc(100% + var(--px) * 2);margin-inline:calc(var(--px) * -1);padding:2px var(--px);scrollbar-width:none}
  .flt-b::-webkit-scrollbar{display:none}
  .flt-b button{flex:none;height:36px;font-size:13px}
  .flt-b.sub button{height:32px}

  /* 実績・技術情報の一覧・記事の関連: 左に写真、右に日付と見出しの行（見出しは3行まで省略しない） */
  .cards:not(.sw){grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
  .cards:not(.sw)>li{border-bottom:1px solid var(--line)}
  .cards:not(.sw) .card{display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;gap:6px 14px;padding:14px 0}
  .cards:not(.sw) .card>.pic,.cards:not(.sw) .card>.card-ph{grid-row:1/3}
  .cards:not(.sw) .card-m{grid-column:2;font-size:11.5px;gap:4px 8px}
  .cards:not(.sw) .card-m time{margin-right:0}
  .cards:not(.sw) .card-t{grid-column:2;font-size:14px;line-height:1.65;-webkit-line-clamp:3}
  .cards:not(.sw) .card-ph{padding:10px 12px}
  .cards:not(.sw) .card-ph span{font-size:10.5px}
  .cards:not(.sw) .card-ph b{font-size:15px;margin-bottom:8px}
  .cards:not(.sw) .none{padding:32px 0}
  .more-w{margin:32px 0 8px}
  /* カードを送る所（トップの実績）: 見出しは3行まで */
  .cards.sw .card{gap:12px}
  .cards.sw .card-t{font-size:15px;-webkit-line-clamp:3}

  /* トップ: サービス（6分野）を、写真つきのカードで送る */
  .svc-l.sw{border-top:0}
  .svc-l.sw a{display:flex;flex-direction:column;gap:10px;height:100%;padding:0 0 4px;border-bottom:0}
  .svc-l.sw a::before{display:none}
  .svc-l.sw a::after{top:auto;bottom:4px;right:2px;color:var(--blue)}
  .svc-l.sw .svc-m{order:-1;margin:0 0 4px}
  .svc-l.sw .svc-n,.svc-l a.on .svc-n{font-size:22px;color:var(--ink)}
  .svc-l.sw .svc-d{font-size:13.5px;line-height:1.9}
  .svc-l.sw .svc-k{padding-right:32px;font-size:12px}
  /* トップ: プロダクトを、写真つきのカードで送る（右の大きな写真の枠は使わない） */
  .duo-v{display:none}
  .rows.sw{border-top:0}
  .rows.sw .row a{gap:10px 12px;height:100%;padding:0 0 6px;border-bottom:0;opacity:1}
  .rows.sw .row.on a{padding-left:0}
  .rows.sw .row-m{display:block;grid-column:1/-1;aspect-ratio:16/9;border-radius:2px}
  .rows.sw .row h3{font-size:24px}
  .rows.sw .row h3.jp{font-size:21px}
  .rows.sw .row-x{grid-template-rows:1fr}
  .rows.sw .row-x p{padding-top:0;font-size:13.5px;line-height:1.85}

  /* サービス: 各分野は写真（映像）を先に、言葉を後に */
  .sv-v{order:-1}
  .sv-g{gap:22px}
  .sv-n{font-size:clamp(30px,8.4vw,40px)}
  .sv-d{margin-top:14px;font-size:14.5px}
  .sv-k{margin-top:16px;gap:6px}
  .sv-k li{height:28px;font-size:12px}
  .sv-a{flex-direction:column;align-items:flex-start;gap:12px;margin-top:22px}

  /* 採用: 取り組んできた技術を、写真つきのカードで送る（中身は開いたまま） */
  .th-l.sw{border-top:0;align-items:stretch}
  .th-l.sw>li{display:flex;flex-direction:column;border:0;border-radius:4px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
  .th-l.sw .th-m{display:block;aspect-ratio:16/9;overflow:hidden;background:#e3e5ea}
  .th-l.sw .th-m img{width:100%;height:100%;object-fit:cover}
  .th-l.sw .th-h{opacity:1;padding:18px 18px 0;gap:4px;pointer-events:none}
  .th-l.sw>li.on .th-h{padding-left:18px}
  .th-l.sw .th-vb{font-size:12px;color:var(--blue)}
  .th-l.sw .th-k,.th-l>li.on .th-k{font-size:21px;color:var(--ink)}
  .th-l.sw .th-t{font-size:14px}
  .th-l.sw .th-x{grid-template-rows:1fr}
  .th-l.sw .th-x>div,.th-l.sw>li.on .th-x>div{padding:10px 18px 20px}
  .th-l.sw .th-d{font-size:13.5px;line-height:1.9;color:var(--text)}
  .th-l.sw .th-g{margin:12px 0 10px}
  /* 採用: 6つの事業領域もカードで送る */
  .fd.sw .fd-b>p:not([class]){font-size:13.5px}
  /* 採用: 選考の流れは、縦の線に番号を並べる */
  .steps{display:block;margin:0 0 20px 15px;border-left:1px solid var(--line2)}
  .steps li{padding:0 0 26px 30px;background:none;border-radius:0;box-shadow:none}
  .steps li:last-child{padding-bottom:4px}
  .stp{position:absolute;left:-15px;top:0;margin:0}
  .steps h3{padding-top:3px;font-size:15.5px}
  .steps p{margin-top:4px}

  /* WANについて: ひとつの線は、縦に下りる線にする（目次は省く。線そのものが目次になる） */
  .tl-ix{display:none}
  .tl.flat .tl-v{overflow:visible;width:auto;margin-top:12px;padding:0;-webkit-mask-image:none;mask-image:none}
  .tl.flat .tl-w{width:auto;padding:0 0 0 28px;transform:none!important}
  .tl.flat .tl-ln{left:6px;right:auto;top:8px;bottom:8px;width:1px;height:auto;background:rgba(255,255,255,.22)}
  .tl.flat .tl-ln b{display:none}
  .tl.flat .tl-tr{flex-direction:column;gap:40px}
  .tl.flat .tl-n{width:auto;padding-top:0}
  .tl.flat .tl-d{left:-28px;top:3px}
  .tl.flat .tl-ar{display:none}
  .tl.flat .tl-nm{font-size:23px}
  .tl.flat .tl-m{margin-top:14px}
  .tl.flat .tl-end{width:auto}
  .tl.flat .tl-big{font-size:28px}
  /* WANについて: 見る、学ぶ、動かす。見出し → 絵（7つの場面が時間で巡る）→ 3つの説明（いまの場面の段を濃く） */
  .sla.auto .sla-in{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .sla.auto .sla-t{display:contents}
  .sla.auto .sla-k{order:1}
  .sla.auto .sla-t h2{order:2}
  .sla.auto .sla-v{order:3;height:auto;margin:24px calc(var(--px) * -1) 0}
  .sla.auto .sla-v canvas{position:relative;display:block;height:auto;aspect-ratio:4/3}
  .sla.auto .sla-cap{margin:10px var(--px) 0}
  .sla.auto .sla-l{order:4}
  .sla.auto .sla-i{opacity:.5;transition:opacity .5s}
  .sla.auto .sla-i.cur{opacity:1}

  /* 資料請求: 資料は、左に表紙・右に名前の行にして、フォームまでを短く */
  .docs{grid-template-columns:1fr;gap:8px}
  .doc-c{grid-template-columns:38% minmax(0,1fr);grid-template-rows:auto;align-items:center}
  .doc-i{position:relative;align-self:stretch;height:auto;min-height:78px;aspect-ratio:auto}
  .doc-i img{position:absolute;inset:0;object-position:85% 50%}   /* 表紙の写真の側を見せる（題名は右の文字で読める） */
  .fm{gap:22px;padding:24px 18px;margin-inline:calc(var(--px) * -.5)}   /* フォームの白い面は画面の端近くまで広げ、入力欄を広く */
  .doc-b{padding:10px 42px 10px 12px;gap:2px}
  .doc-b b{font-size:13px;line-height:1.55}
  .doc-b span{font-size:11px;line-height:1.6}
  .doc-x{top:50%;margin-top:-13px}

  /* プロダクト: 研究開発の一覧は1列 */
  .lab-more li{grid-template-columns:1fr;gap:2px}
  /* 記事: 表の見出しの列は折り返してよい */
  .doc th{white-space:normal;min-width:5.5em}
}

/* ============================================================ トップ右下の案内（代表の1日に密着） */
.pop{position:fixed;right:24px;bottom:24px;z-index:50;width:340px;background:var(--white);border-radius:10px;box-shadow:0 18px 50px rgba(10,12,18,.18),0 0 0 1px rgba(10,12,18,.06);overflow:hidden;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.pop.on{opacity:1;transform:none}
.pop-a{display:block;color:var(--ink)}
.pop-m{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0a0c12}
.pop-m img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pop-a:hover .pop-m img{transform:scale(1.04)}
.pop-p{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.pop-p::before{content:"";position:absolute;left:18px;top:15px;border-left:11px solid var(--blue);border-top:7px solid transparent;border-bottom:7px solid transparent}
.pop-t{display:grid;gap:4px;padding:14px 16px 16px}
.pop-t small{font-size:11.5px;letter-spacing:.12em;color:var(--blue)}
.pop-t b{font-weight:500;font-size:14.5px;line-height:1.6}
.pop-t em{font-style:normal;font-size:12px;color:var(--sub)}
.pop-a:hover b{color:var(--blue)}
.pop-x{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;background:rgba(10,12,18,.62);cursor:pointer;transition:background-color .25s}
.pop-x:hover{background:rgba(10,12,18,.9)}
.pop-x::before,.pop-x::after{content:"";position:absolute;left:9px;right:9px;top:50%;height:1.5px;margin-top:-.75px;background:#fff;transform:rotate(45deg)}
.pop-x::after{transform:rotate(-45deg)}
@media (max-width:900px){
  .pop{left:12px;right:12px;bottom:12px;width:auto}
  .pop-a{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center}   /* 細い帯にして、本文を隠す面積を小さく */
  .pop-t{padding:8px 40px 8px 12px;gap:2px}
  .pop-t small{font-size:10.5px}
  .pop-t b{font-size:12.5px;line-height:1.5}
  .pop-t em{display:none}
  .pop-p{width:30px;height:30px}
  .pop-p::before{left:12px;top:9px;border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
  .pop-x{width:26px;height:26px;background:rgba(10,12,18,.08)}
  .pop-x::before,.pop-x::after{left:8px;right:8px;background:var(--ink)}
}
@media (prefers-reduced-motion: reduce){.pop{transition:none}}