/* =========================================================
   トークン(NVIDIAのサイトの体系に寄せたもの)
   ========================================================= */
:root{
  --g:#f26a1b;          /* オレンジ:差し色(ユニフォームとホーンの色) */
  --g-txt:#b84a0c;      /* 明るい面に置く文字のオレンジ(読みやすさのため濃いめ) */
  --g-dk:#d4560c;       /* ホバー時 */
  --black:#000000;
  --ink:#1a1a1a;        /* 明るい面の本文 */
  --panel:#1a1a1a;      /* 暗い面のカード */
  --line-dk:#333333;
  --line:#cccccc;
  --line-lt:#e6e6e6;
  --bg-lt:#f7f7f7;
  --mute:#666666;
  --mute-dk:#a7a7a7;
  --white:#ffffff;
  --font:"Helvetica Neue",Arial,"Noto Sans JP","Hiragino Sans",sans-serif;
  --hd:64px;
  --r:2px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 60px)}
body{font-family:var(--font);font-size:16px;line-height:1.7;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:48px}
@media (max-width:1024px){.wrap{padding-inline:24px}}
@media (max-width:640px){.wrap{padding-inline:16px}}

/* ---------- 見出し・本文 ---------- */
.h1{font-size:clamp(36px,4.6vw,64px);font-weight:700;line-height:1.15;letter-spacing:-.01em}
.h2{font-size:clamp(28px,3vw,40px);font-weight:700;line-height:1.25}
.h3{font-size:20px;font-weight:700;line-height:1.4}
.lead{font-size:18px;line-height:1.7;max-width:40em}
.label{display:block;font-size:14px;font-weight:700;color:var(--g-txt);margin-bottom:12px}
.muted{color:var(--mute)}
.dark .muted{color:var(--mute-dk)}

/* ---------- ボタン・リンク ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 20px;border:2px solid var(--g);border-radius:var(--r);font-size:15px;font-weight:700;line-height:1.2;transition:background-color .2s,border-color .2s,color .2s}
.btn.g{background:var(--g);color:var(--black)}
.btn.g:hover{background:var(--g-dk);border-color:var(--g-dk)}
.btn.o{background:transparent}
.btn.o:hover{background:var(--g);color:var(--black)}
.btn.sm{min-height:36px;padding:6px 14px;font-size:14px}
.btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;padding-bottom:2px;border-bottom:2px solid var(--g)}
.more::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:2px}
.more:hover{color:var(--g-txt)}
.dark .more:hover{color:var(--g-txt)}

/* ---------- ヘッダー ---------- */
.hd{position:sticky;top:0;z-index:50;background:var(--black);color:var(--white);height:var(--hd)}
.hd-in{height:100%;display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:.02em;white-space:nowrap}
.logo .mark{width:28px;height:28px;background:var(--g);display:grid;place-items:center;border-radius:var(--r)}
.logo .mark i{width:16px;height:16px;border-radius:50%;border:3px solid var(--black);position:relative}
.logo .mark i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--black)}
.gnav{flex:1;height:100%}
.gnav>ul{display:flex;height:100%;list-style:none}
.gnav>ul>li{height:100%;display:flex;align-items:center}
.gnav>ul>li>a{position:relative;display:flex;align-items:center;height:100%;padding:0 16px;font-size:15px;font-weight:700;white-space:nowrap}
.gnav>ul>li>a::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;background:var(--g);transform:scaleX(0);transition:transform .2s}
.gnav>ul>li:hover>a::after,.gnav>ul>li:focus-within>a::after,.gnav>ul>li>a.on::after{transform:scaleX(1)}
.dd{position:absolute;left:0;right:0;top:var(--hd);background:#111;border-top:1px solid var(--line-dk);opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s linear .15s;box-shadow:0 12px 24px rgba(0,0,0,.4)}
.gnav li:hover .dd,.gnav li:focus-within .dd{opacity:1;visibility:visible;transition-delay:.08s,0s}
.dd-in{display:grid;grid-template-columns:repeat(3,1fr) 1.3fr;gap:40px;padding:36px 48px 44px;max-width:1440px;margin:0 auto}
.dd h4{font-size:13px;color:var(--mute-dk);font-weight:700;margin-bottom:12px}
.dd ul{list-style:none;display:grid;gap:2px}
.dd ul a{display:block;padding:5px 0;font-size:15px}
.dd ul a:hover{color:var(--g)}
.dd .feat{background:var(--panel);display:grid;grid-template-rows:140px auto;border-radius:var(--r);overflow:hidden}
.dd .feat .vis{position:relative}
.dd .feat div.t{padding:16px 18px 18px}
.dd .feat b{display:block;font-size:17px}
.dd .feat span{font-size:14px;color:var(--mute-dk)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:12px}
.ic{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r)}
.ic:hover{background:#222}
.ic svg{width:22px;height:22px}
.burger{display:none}
@media (max-width:1240px){.gnav{display:none}.burger{display:grid}.hd-r .btn{display:none}}

/* モバイルメニュー */
.drawer{position:fixed;inset:var(--hd) 0 0 0;z-index:49;background:var(--black);color:var(--white);overflow-y:auto;padding:8px 24px 48px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.drawer.on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.drawer details{border-bottom:1px solid var(--line-dk)}
.drawer summary,.drawer>a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:18px;font-weight:700;list-style:none;cursor:pointer;border-bottom:1px solid var(--line-dk)}
.drawer details summary{border-bottom:0}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"+";color:var(--g);font-size:22px;font-weight:400}
.drawer details[open] summary::after{content:"−"}
.drawer details a{display:block;padding:8px 0 8px 12px;color:var(--mute-dk)}
.drawer details a:hover{color:var(--white)}
.drawer details div{padding-bottom:16px}
.drawer .btn{margin-top:24px;width:100%;justify-content:center}

/* 検索 */
.search{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.92);color:var(--white);display:none;padding:12vh 24px 24px}
.search.on{display:block}
.search-in{max-width:880px;margin:0 auto}
.search input{width:100%;background:transparent;border:0;border-bottom:2px solid var(--g);color:var(--white);font:inherit;font-size:28px;font-weight:700;padding:8px 0}
.search input:focus{outline:none}
.search ul{list-style:none;margin-top:24px;max-height:60vh;overflow:auto}
.search li a{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-dk)}
.search li a:hover b{color:var(--g)}
.search li span{font-size:13px;color:var(--mute-dk)}
.search .close{position:absolute;top:20px;right:24px}

/* ---------- セクション ---------- */
.sec{padding:96px 0}
.sec.tight{padding:64px 0}
.dark{background:var(--black);color:var(--white)}
.dark,.hero,.page-hero,.hd,.dd,.drawer,.search,.ft,.pkg,.env{--g-txt:var(--g)}
.gray{background:var(--bg-lt)}
@media (max-width:768px){.sec{padding:64px 0}}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.sec-head p{margin-top:12px}

/* ---------- ヒーロー ---------- */
.hero{position:relative;background:var(--black);color:var(--white);min-height:min(78vh,720px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero>canvas,.vis>canvas,.vis>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero>canvas{z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,0) 72%)}
.hero .wrap{padding-top:80px;padding-bottom:80px}
.hero .lead{margin-top:20px;color:#d9d9d9}
.hero-txt{max-width:640px}
@media (max-width:768px){.hero::before{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.9) 70%)}.hero{align-items:flex-end;min-height:620px}}
.page-hero{background:var(--black);color:var(--white);padding:56px 0 64px;border-bottom:1px solid var(--line-dk)}
.crumb{display:flex;gap:8px;font-size:13px;color:var(--mute-dk);margin-bottom:20px;flex-wrap:wrap}
.crumb a:hover{color:var(--white)}
.crumb span::before{content:"/";margin-right:8px;color:#555}
.page-hero .lead{margin-top:16px;color:#d9d9d9}

/* ---------- カード ---------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:0 0 5px rgba(0,0,0,.3)}
.dark .card{background:var(--panel);box-shadow:none}
.card .vis{position:relative;aspect-ratio:16/9;background:#0a0a0a}
.card .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .meta{font-size:13px;color:var(--mute);display:flex;gap:12px;flex-wrap:wrap}
.dark .card .meta{color:var(--mute-dk)}
.card .meta .cat{color:var(--g-txt);font-weight:700}
.card p{font-size:15px;color:var(--mute)}
.dark .card p{color:var(--mute-dk)}
.card .more{margin-top:auto;align-self:flex-start}
a.card:hover .h3{color:var(--g-txt)}
.sample{display:inline-block;margin-left:6px;padding:0 6px;border:1px dashed currentColor;border-radius:var(--r);font-size:12px;font-weight:400;opacity:.7;vertical-align:middle}

/* 数値の並び */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-dk)}
.stat{padding:28px 24px 0 0}
.stat b{display:block;font-size:clamp(40px,5vw,64px);font-weight:700;line-height:1;color:var(--g-txt)}
.stat b small{font-size:.4em;margin-left:4px;color:var(--white)}
.stat span{display:block;margin-top:12px;font-size:15px;color:var(--mute-dk)}
@media (max-width:768px){.stats{grid-template-columns:1fr 1fr}.stat{padding:24px 12px 0 0}}

/* 2カラムの紹介 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .vis{position:relative;aspect-ratio:4/3;background:#000;border-radius:var(--r);overflow:hidden}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}}

/* 特長タイル */
.feat-tile{border-top:3px solid var(--g);padding-top:20px}
.feat-tile b{display:block;font-size:40px;font-weight:700;line-height:1.1}
.feat-tile h3{margin-top:12px}
.feat-tile p{margin-top:8px;font-size:15px}
.dark .feat-tile p{color:var(--mute-dk)}

/* ---------- 製品ページのサブナビ ---------- */
.subnav{position:sticky;top:var(--hd);z-index:40;background:var(--white);border-bottom:1px solid var(--line);}
.subnav .wrap{display:flex;align-items:center;gap:32px;height:56px}
.subnav b{font-size:18px;white-space:nowrap}
.subnav ul{display:flex;gap:4px;list-style:none;height:100%;overflow-x:auto;scrollbar-width:none}
.subnav ul a{position:relative;display:flex;align-items:center;height:100%;padding:0 12px;font-size:14px;font-weight:700;color:var(--mute);white-space:nowrap}
.subnav ul a:hover,.subnav ul a.on{color:var(--ink)}
.subnav ul a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--g)}
.subnav .btn{margin-left:auto;white-space:nowrap}
@media (max-width:768px){.subnav b{display:none}.subnav .btn{display:none}.subnav .wrap{gap:0}}

/* 仕様表 */
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--line-lt)}
.spec th{width:28%;font-weight:700}
.spec tr.grp td{background:var(--ink);color:var(--white);font-weight:700;padding:10px 16px;border:0}
.spec .na{color:var(--mute);font-style:normal}
.spec .na::before{content:"未記入";display:inline-block;padding:0 8px;border:1px dashed var(--line);border-radius:var(--r);font-size:12px;margin-right:8px}
@media (max-width:640px){.spec th{width:40%}}

/* 構成図 */
.diagram-wrap{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}
.diagram-wrap svg{width:100%;height:auto}
.callouts{list-style:none;border-top:1px solid var(--line)}
.callouts li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.callouts .k{display:grid;place-items:center;width:28px;height:28px;background:var(--g);color:var(--black);font-weight:700;font-size:14px;border-radius:var(--r)}
.callouts h3{font-size:17px}
.callouts p{font-size:14px;color:var(--mute);margin-top:2px}
@media (max-width:900px){.diagram-wrap{grid-template-columns:1fr}}

/* 資料 */
.docs{list-style:none;border-top:1px solid var(--line)}
.docs li{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.docs b{display:block}
.docs span{font-size:13px;color:var(--mute)}
.docs .st{font-size:13px;color:var(--mute);border:1px dashed var(--line);padding:2px 10px;border-radius:var(--r)}

/* ---------- ソリューション ---------- */
.pkg{display:flex;flex-direction:column;background:var(--panel);border-top:4px solid var(--g);padding:28px 28px 32px;border-radius:var(--r)}
.pkg .tag{font-size:13px;font-weight:700;color:var(--g-txt)}
.pkg h3{font-size:24px;margin-top:6px}
.pkg p{margin-top:10px;color:var(--mute-dk);font-size:15px}
.pkg ul{list-style:none;margin:20px 0 24px;display:grid;gap:8px;font-size:15px}
.pkg li{padding-left:22px;position:relative}
.pkg li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:6px;border-left:2px solid var(--g);border-bottom:2px solid var(--g);transform:rotate(-45deg)}
.pkg .cond{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-dk);font-size:14px;color:var(--mute-dk)}
.pkg .btn{margin-top:16px;align-self:flex-start}
.use{background:var(--white);border-radius:var(--r);box-shadow:0 0 5px rgba(0,0,0,.3);padding:28px}
.use svg{width:40px;height:40px;color:var(--g)}
.use h3{margin-top:14px}
.use p{margin-top:8px;font-size:15px;color:var(--mute)}
.use .ref{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-lt);font-size:14px}
.use .ref a{font-weight:700;border-bottom:2px solid var(--g)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.step{padding:0 24px 0 0}
.step .n{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--g);color:var(--g-txt);font-weight:700;border-radius:50%}
.step h3{margin-top:16px}
.step p{margin-top:8px;font-size:15px;color:var(--mute)}
.dark .step p{color:var(--mute-dk)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:32px 0}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}

/* ---------- ニュース ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:8px}
.tabs button{padding:6px 14px;border:1px solid var(--line);border-radius:var(--r);font-size:14px;font-weight:700;color:var(--mute)}
.tabs button:hover{border-color:var(--ink);color:var(--ink)}
.tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.tabs select{margin-left:auto;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:14px;background:var(--white)}
.nlist{list-style:none}
.nlist li a{display:grid;grid-template-columns:160px 1fr 200px;gap:24px;padding:24px 0;border-bottom:1px solid var(--line-lt);align-items:start}
.nlist li a:hover h3{color:var(--g-txt)}
.nlist .d{font-size:14px;color:var(--mute)}
.nlist .d b{display:block;color:var(--g-txt);font-size:13px;margin-top:2px}
.nlist p{margin-top:6px;font-size:15px;color:var(--mute)}
.nlist .vis{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden}
@media (max-width:768px){.nlist li a{grid-template-columns:1fr}.nlist .vis{display:none}}
.empty{padding:40px 0;color:var(--mute)}

/* プレスリリース本文 */
.pr{max-width:820px}
.pr .date{font-size:14px;color:var(--mute-dk);margin-top:20px}
.pr-body{max-width:820px;font-size:17px;line-height:1.95}
.pr-body p+p{margin-top:1.2em}
.pr-body .dl{font-weight:700}
.pr-box{max-width:820px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.pr-box h2{font-size:17px}
.pr-box p{margin-top:8px;font-size:15px;color:var(--mute)}
.pr-box a{border-bottom:2px solid var(--g);font-weight:700;color:var(--ink)}
.pr-vis{position:relative;aspect-ratio:21/9;background:#000;margin-bottom:48px;border-radius:var(--r);overflow:hidden}

/* ---------- アーカイブ ---------- */
.arch-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:32px}
.arch-tools input{flex:1;min-width:220px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:15px}
.arch-tools input:focus{outline:2px solid var(--g);outline-offset:-1px}
.arch-count{font-size:14px;color:var(--mute)}
.year{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line)}
.year>h2{font-size:32px;font-weight:700;line-height:1}
.year ul{list-style:none}
.year li{display:grid;grid-template-columns:90px 90px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--line-lt);font-size:15px;align-items:baseline}
.year li:last-child{border-bottom:0}
.year .md{color:var(--mute);font-size:14px}
.year .ty{font-size:12px;font-weight:700;color:var(--g-txt)}
.year .pl{display:block;font-size:13px;color:var(--mute)}
.year a{border-bottom:2px solid var(--g);font-weight:700}
@media (max-width:768px){.year{grid-template-columns:1fr;gap:12px}.year li{grid-template-columns:70px 1fr}.year .ty{grid-column:2;grid-row:1}.year li>div{grid-column:1/-1}}

/* ---------- 採用 ---------- */
.notice{background:#fff8e1;border-left:4px solid #f0b400;padding:14px 18px;font-size:14px}
.jobs{list-style:none;border-top:1px solid var(--line)}
.jobs details{border-bottom:1px solid var(--line)}
.jobs summary{display:grid;grid-template-columns:1fr 160px 160px 24px;gap:16px;align-items:center;padding:22px 0;cursor:pointer;list-style:none}
.jobs summary::-webkit-details-marker{display:none}
.jobs summary b{font-size:18px}
.jobs summary span{font-size:14px;color:var(--mute)}
.jobs summary::after{content:"+";font-size:24px;color:var(--g-txt);text-align:right}
.jobs details[open] summary::after{content:"−"}
.jobs .jd{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:0 0 28px}
.jobs .jd h4{font-size:15px;margin-bottom:8px}
.jobs .jd ul{padding-left:1.2em;font-size:15px;color:var(--mute)}
.jobs .jd p{font-size:15px;color:var(--mute);grid-column:1/-1}
@media (max-width:768px){.jobs summary{grid-template-columns:1fr 24px}.jobs summary span{display:none}.jobs .jd{grid-template-columns:1fr}}
.faq details{border-bottom:1px solid var(--line-dk);padding:4px 0}
.faq summary{padding:16px 0;font-weight:700;cursor:pointer}
.faq p{padding:0 0 16px;color:var(--mute-dk);font-size:15px}

/* ---------- 年表 ---------- */
.tl{list-style:none;position:relative}
.tl::before{content:"";position:absolute;left:110px;top:6px;bottom:6px;width:2px;background:var(--line-dk)}
.tl li{display:grid;grid-template-columns:110px 1fr;gap:32px;padding-bottom:28px;position:relative}
.tl li::after{content:"";position:absolute;left:105px;top:8px;width:12px;height:12px;background:var(--g);border-radius:50%}
.tl .y{font-size:22px;font-weight:700;line-height:1.3;color:var(--g-txt)}
.tl h3{font-size:17px}
.tl p{font-size:14px;color:var(--mute-dk)}
@media (max-width:540px){.tl::before{left:70px}.tl li{grid-template-columns:70px 1fr;gap:24px}.tl li::after{left:65px}.tl .y{font-size:17px}}

/* ---------- CTA 帯 ---------- */
.cta{background:var(--g);color:var(--black);padding:72px 0}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta .h2{max-width:16em}
.cta .btn{background:var(--black);color:var(--white);border-color:var(--black)}
.cta .btn:hover{background:#222;border-color:#222}

/* ---------- フッター ---------- */
.ft{background:var(--black);color:var(--white);padding:64px 0 28px;border-top:1px solid var(--line-dk)}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr) 1.2fr;gap:32px}
.ft h4{font-size:14px;margin-bottom:12px}
.ft ul{list-style:none;display:grid;gap:6px}
.ft ul a{font-size:14px;color:var(--mute-dk)}
.ft ul a:hover{color:var(--white)}
.ft-news p{font-size:14px;color:var(--mute-dk);margin-bottom:12px}
.ft-news .ft-mail{margin:12px 0 0;color:var(--white);user-select:all}
@media (max-width:900px){.ft-news{grid-column:1/-1}}
.ft-bottom{margin-top:56px;padding-top:20px;border-top:1px solid var(--line-dk);display:flex;gap:16px 32px;flex-wrap:wrap;justify-content:space-between;font-size:13px;color:var(--mute-dk)}
.ft-bottom ul{display:flex;gap:20px;flex-wrap:wrap}
@media (max-width:900px){.ft-cols{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* =========================================================
   追加:写真・製品ページの部品
   ========================================================= */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.logo img{height:40px;width:auto;background:#fff;border-radius:var(--r);padding:2px}
.logo span{font-size:15px;letter-spacing:.08em}
@media (max-width:640px){.logo span{display:none}}
.dd .feat .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prose p+p{margin-top:1.1em}
.prose{font-size:16px;max-width:38em}

/* 写真のヒーロー */
.hero.photo .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 45%;z-index:-2}
[data-page="home"] .hero.photo .bg{object-position:75% 50%}
[data-page="home"] .hero-txt{max-width:580px}
@media (max-width:768px){[data-page="home"] .hero.photo .bg{object-position:50% 0}}
.hero.photo::before{background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 40%,rgba(0,0,0,.1) 78%)}
@media (max-width:768px){.hero.photo::before{background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.92) 62%)}}
.hero .crumb{margin-bottom:24px}

/* 製品ページのヒーロー(左に文字、右にレンダリング) */
.phero{display:grid;grid-template-columns:5fr 7fr;background:var(--black);color:var(--white);min-height:min(76vh,700px)}
.phero-txt{padding:64px 48px 64px max(48px,calc((100vw - 1440px)/2 + 48px));display:flex;flex-direction:column;justify-content:center}
.phero-txt .lead{margin-top:20px;color:#d9d9d9}
.phero-img{background:#c9c9c9;position:relative;overflow:hidden}
.phero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
@media (max-width:900px){.phero{grid-template-columns:1fr}.phero-txt{padding:48px 24px}.phero-img{aspect-ratio:16/10}}

/* 写真とキャプション */
figure.vis{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:#000}
figure.vis img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-size:13px;color:#ddd;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent)}
.split .vis.light{background:#cfcfcf;aspect-ratio:16/10}
.split .vis.light img{width:100%;height:100%;object-fit:cover}
.split.top{align-items:start}

/* 数字(明るい面) */
.stats.light{border-top-color:var(--line);margin-top:32px}
.stats.light .stat b small{color:var(--ink)}
.stats.light .stat span{color:var(--mute)}
.split .stats{grid-template-columns:repeat(4,1fr)}
@media (max-width:640px){.split .stats{grid-template-columns:1fr 1fr}}

/* 構成:正面図+ユニット表 */
.arch{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.elev{width:100%;height:auto;max-height:720px}
.unit-wrap{overflow-x:auto}
.units{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.units th,.units td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line-dk);vertical-align:middle}
.units thead th{font-size:12px;color:var(--mute-dk);font-weight:700}
.units tbody th{font-weight:700}
.units td:nth-child(2){text-align:center}
.units td:nth-child(4),.units td:nth-child(5){color:var(--mute-dk)}
.units .k{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--g);color:var(--black);font-weight:700;font-size:13px}
@media (max-width:900px){.arch{grid-template-columns:1fr}.elev{max-height:520px}}
.flow-wrap{margin-top:20px;overflow-x:auto;border:1px solid var(--line-dk);border-radius:var(--r);padding:16px}
.flow{width:100%;min-width:900px;height:auto;display:block}

/* 開発の記録 */
.tl.light::before{background:var(--line)}
.tl.light p{color:var(--mute)}
.tl.light .y{font-size:17px}
.tl.light h3{font-weight:400;font-size:16px}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gallery figure{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:4/5}
.gallery figure img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{font-size:12px}

/* 資料 */
.dl3{display:flex;gap:16px;flex-wrap:wrap}

/* おすすめの構成 */
.pkg.rec{outline:2px solid var(--g);outline-offset:-2px}
.pkg .cond a{color:var(--white);border-bottom:2px solid var(--g)}
.use .ref:empty{display:none}
.nb{display:inline-block}
@media (max-width:640px){.h1{font-size:32px}.nb{display:inline}}

/* =========================================================
   追加:製品ラインアップ、対応環境、会場、比較表
   ========================================================= */
.pcard{display:grid;grid-template-columns:5fr 6fr;background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:0 0 5px rgba(0,0,0,.3)}
.pcard .vis{position:relative;background:#cfcfcf;min-height:320px}
.pcard .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pcard .body{padding:28px 28px 30px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pcard .label{margin-bottom:0}
.pcard p{font-size:15px;color:var(--mute)}
.pcard .envline{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:700}
.pcard .envline svg{width:22px;height:22px;color:var(--g);flex:none}
.pcard .more{margin-top:auto;align-self:flex-start}
a.pcard:hover .h2{color:var(--g)}
@media (max-width:1100px){.pcard{grid-template-columns:1fr}.pcard .vis{min-height:0;aspect-ratio:16/10}}

.env{background:var(--panel);border-top:4px solid var(--g);border-radius:var(--r);padding:28px}
.env-ic svg{width:44px;height:44px;color:var(--g)}
.env h3{margin-top:14px}
.env .eg{margin-top:6px;color:var(--mute-dk);font-size:15px}
.env dl{margin-top:20px;display:grid;gap:12px;border-top:1px solid var(--line-dk);padding-top:16px}
.env dt{font-size:12px;font-weight:700;color:var(--mute-dk)}
.env dd{font-size:15px;font-weight:700}

.envtag{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--r);border:1px solid var(--line);color:var(--mute);margin-bottom:12px}
.envtag.env-outdoor{background:var(--g);border-color:var(--g);color:var(--black)}
.envtag.env-power{border-color:var(--ink);color:var(--ink)}
.use .ref b{display:block;font-size:12px;color:var(--mute);margin-bottom:2px}
.use{display:flex;flex-direction:column}
.use .ref{margin-top:auto;padding-top:14px}
.use p{margin-bottom:14px}

.tbl-wrap{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:560px;background:var(--white)}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:16px;border-bottom:1px solid var(--line-lt)}
.cmp thead th{background:var(--ink);color:var(--white);font-size:17px}
.cmp tbody th{width:18%;font-weight:700}
.matrix td{text-align:center;font-size:20px;color:var(--mute)}
.matrix thead th:not(:first-child){text-align:center;font-size:15px}
.matrix .on{color:var(--g)}
.cmp .na{color:var(--mute);font-style:normal}
.cmp .na::before{content:"未記入";display:inline-block;padding:0 8px;border:1px dashed var(--line);border-radius:var(--r);font-size:12px;margin-right:8px}

.phero-img.top img{object-position:50% 30%}
.req .h3{margin-bottom:16px}
#welcome .feat-tile p{color:var(--mute)}
.hero-txt{max-width:780px}
.envtag{align-self:flex-start}

.use .done{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-lt)}
.use .done>p:first-child{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.use .done .rl{margin-top:6px;font-size:13px;line-height:1.7;color:var(--ink)}
.use .done .rl.mute{color:var(--mute)}
.pkg .pref{margin:-8px 0 20px;font-size:13px;line-height:1.7;color:var(--mute-dk)}
.pkg .pref b{display:block;color:var(--white);font-size:13px;margin-bottom:2px}
.use .done svg{width:18px;height:18px;color:var(--g)}
.done-tag{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:var(--r);background:var(--g);color:var(--black);font-size:12px;vertical-align:middle}
.matrix small{display:block;font-size:11px;color:var(--mute);margin-top:2px}

/* そのほかのサービス */
.svc{display:flex;flex-direction:column;background:var(--white);border-radius:var(--r);box-shadow:0 0 5px rgba(0,0,0,.3);border-top:4px solid var(--g);padding:28px 28px 32px;scroll-margin-top:96px}
.svc .tag{font-size:13px;font-weight:700;color:var(--g-txt)}
.svc h3{margin-top:6px}
.svc>p{margin-top:10px;font-size:15px;color:var(--mute)}
.svc ul{list-style:none;margin:18px 0 20px;display:grid;gap:8px;font-size:15px}
.svc li{padding-left:22px;position:relative}
.svc li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:6px;border-left:2px solid var(--g);border-bottom:2px solid var(--g);transform:rotate(-45deg)}
.svc .refs{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-lt);font-size:14px}
.svc .refs p{margin-top:6px;font-size:15px;font-weight:700;color:var(--ink);line-height:1.7}
.svc .btn,.svc .more{margin-top:18px;align-self:flex-start}
.nw{display:inline-block;max-width:100%}
.terms{max-width:860px;border-left:4px solid var(--g);padding:4px 0 4px 24px}
.terms>p{font-size:17px}
.terms ul{list-style:none;margin-top:16px;display:grid;gap:10px}
.terms li b{display:inline-block;min-width:4em;margin-right:12px}

/* サウンドシステムの変遷 */
.hist{list-style:none;border-top:1px solid var(--line)}
.hist li{display:grid;grid-template-columns:120px minmax(0,1fr) 240px;gap:16px 32px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.hist .d{font-size:17px;font-weight:700;color:var(--g-txt);font-variant-numeric:tabular-nums}
.hist h3{font-size:17px;line-height:1.5}
.hist h3 span{display:block}
.hist p{margin-top:4px;font-size:14px;color:var(--mute)}
.hist .th{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#000}
.hist .th img{width:100%;height:100%;object-fit:cover}
.hist .th figcaption{font-size:11px;padding:6px 10px}
@media (min-width:769px){.hist li:not(:has(.th)) div{grid-column:2 / 4}}
@media (max-width:768px){
  .hist li{grid-template-columns:84px minmax(0,1fr);align-items:start}
  .hist .d{padding-top:2px}
  .hist .th{grid-column:2;max-width:320px}
  .hist .d{font-size:15px}
}
.gallery.wide{grid-template-columns:repeat(3,1fr);margin-top:24px}
.gallery.wide figure{aspect-ratio:1/1}
@media (max-width:768px){.gallery.wide{grid-template-columns:1fr 1fr}}

/* 写真の切れ方の調整(スマホでホーンの上が切れないように) */
@media (max-width:900px){.phero-img.top img{object-position:50% 0}}
@media (max-width:1100px){.pcard .vis img{object-position:50% 0}}
/* 製品名が語の途中で折れないように */
.pcard .h2{font-size:clamp(28px,2.6vw,40px)}
@media (max-width:640px){.pcard .nb{display:inline-block}}

/* トップの連絡先・SNS・ストアの帯 */
.cbar{background:var(--panel);color:var(--white);border-bottom:1px solid var(--line-dk)}
.cbar-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px 48px;padding-block:28px}
.cbar h2{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--g);margin-bottom:8px}
.cbar p{font-size:14px;color:var(--mute-dk);margin-bottom:12px}
.cbar .addr{font-size:17px;font-weight:700;color:var(--white);user-select:all}
.cbar ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px}
.cbar ul a{font-weight:700;font-size:15px;border-bottom:2px solid var(--g);padding-bottom:2px}
.cbar ul a:hover{color:var(--g)}
.cbar .btn.o{color:var(--white)}
@media (max-width:768px){.cbar-in{grid-template-columns:1fr;gap:24px}}

/* アーカイブ:MMP220を出した公演の印 */
.mmp-tag{display:inline-block;margin-left:8px;padding:0 6px;border-radius:var(--r);background:var(--g);color:var(--black);font-size:11px;font-weight:700;line-height:18px;vertical-align:2px}
.join-txt{margin-top:16px;max-width:760px;color:var(--mute-dk)}
.join-txt .addr{color:var(--white);font-weight:700;user-select:all;overflow-wrap:anywhere}
@media (max-width:768px){[data-page="about"] .hero.photo::before{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.92) 55%)}}

/* ニュース:その場で全文 */
.news-item{max-width:820px;padding:24px 0;border-top:1px solid var(--line)}
.news-item .meta{display:flex;gap:16px;font-size:14px;color:var(--mute)}
.news-item .meta .cat{color:var(--g-txt);font-weight:700}
.news-item h3{margin:8px 0 12px}
.news-item p{color:var(--ink)}

/* カードは暗い面でも文字色を保つ */
.pcard,.use{color:var(--ink)}
.addr-plain{font-size:17px;font-weight:700;user-select:all;overflow-wrap:anywhere}


/* =========================================================
   配色:上(ヒーロー)と下(フッター)、MMP220とピンプラユック・スタイルの概要だけ黒。
   ほかは白とうすいグレーを交互に。欄の境目に、3割オレンジ・7割グレーの横線(NVIDIA風)
   ========================================================= */
:root{--rule:#cccccc}
.dark{--rule:#4d4d4d}
main>.sec{position:relative}
main>section+.sec:not([style*="padding-top:0"])::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100% - 96px,1344px);height:4px;background:linear-gradient(90deg,var(--g) 0 30%,var(--rule) 30% 100%)}
@media (max-width:1024px){main>section+.sec:not([style*="padding-top:0"])::before{width:calc(100% - 48px)}}
@media (max-width:640px){main>section+.sec:not([style*="padding-top:0"])::before{width:calc(100% - 32px)}}

/* 連絡先の帯(うすいグレー) */
.cbar{background:var(--bg-lt);color:var(--ink);border-bottom:0}
.cbar h2{color:var(--g-txt)}
.cbar p{color:var(--mute)}
.cbar .addr{color:var(--ink)}
.cbar ul a:hover{color:var(--g-txt)}

/* 明るい面に置いたもの */
.join-txt{color:var(--mute)}
.join-txt .addr{color:var(--ink)}
.sec:not(.dark) .tl::before{background:var(--line)}
.sec:not(.dark) .tl p{color:var(--mute)}

/* 「ソリューションを見る」と同じボタン */
.pcard .btn,.sec-head .btn{align-self:flex-start}
.pcard .btn{margin-top:auto}
.pcard:hover .btn.g{background:var(--g-dk);border-color:var(--g-dk)}

/* うすいグレーはやめて白に(2026-10)。欄の区切りは横線で見せる */
.gray,.cbar{background:var(--white)}

/* 横線は白い欄同士の境目だけ。黒と白の切り替わりには引かない */
:is(.dark,.hero,.page-hero)+.sec::before,main>.sec.dark::before{display:none}

/* お客様事例のカードは面に色を付ける */
#venues .use{background:#f0f0f0;box-shadow:none}
#venues .use .done{border-top-color:#d9d9d9}

/* 採用情報のボタン(ヘッダー、ドロワー、フッター) */
@media (max-width:1240px){.hd-r .btn.join{display:inline-flex}}
.ft-join{margin-top:20px}

/* ソリューションは2つの選択肢だけ(写真・説明文なし) */
#solutions .label{display:block;margin-bottom:20px}
#solutions .pcard{grid-template-columns:1fr;background:#f0f0f0;box-shadow:none}
#solutions .pcard .label{margin-bottom:0}
#solutions .pcard .btn{margin-top:12px}

/* ソリューションは黒い帯に、2つのシステムへのボタンだけ */
.sec.sol-bar{padding:40px 0}
.sol-in{display:flex;align-items:center;gap:16px 40px;flex-wrap:wrap}
.sol-in .label{margin:0;letter-spacing:.08em}
.sol-btns{display:flex;flex-wrap:wrap;gap:12px;flex:1;justify-content:flex-end}
.sol-btn{min-height:52px;padding:12px 24px;font-size:17px;gap:14px}
.sol-btn::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
@media (max-width:640px){.sol-btns{flex-direction:column;align-items:stretch}.sol-btn{justify-content:space-between}}
/* 黒い欄が続くところ(ソリューション→MMP220)には横線を引く */
.sec.dark+.sec.dark:not([style*="padding-top:0"])::before{display:block}
.sol-btn{white-space:nowrap}
@media (max-width:640px){.sol-in{flex-direction:column;align-items:stretch}.sol-btns{flex:none}}
/* ソリューション:ボタンは見出しの下に左詰め */
.sol-in{flex-direction:column;align-items:flex-start;gap:16px}
.sol-btns{flex:none;justify-content:flex-start}
@media (max-width:640px){.sol-in{align-items:stretch}}

/* アーカイブの種別「サウンドシステム」が1行に収まるように */
.year li{grid-template-columns:90px 110px 1fr}
@media (max-width:768px){.year li{grid-template-columns:70px 1fr}}

/* ロゴ(2026-10 差し替え):黒地のロゴなので白い台は付けない */
.logo img{background:none;padding:0;height:44px}

/* 言語の切り替え(ヘッダー、ドロワー、フッター) */
.hd-lang,.dr-lang,.ft-lang{list-style:none;display:flex;gap:4px 14px;flex-wrap:wrap}
.hd-lang a,.dr-lang a,.ft-lang a{font-size:13px;font-weight:700;color:var(--mute-dk)}
.hd-lang a:hover,.dr-lang a:hover,.ft-lang a:hover,.hd-lang a[aria-current],.dr-lang a[aria-current],.ft-lang a[aria-current]{color:var(--white)}
.hd-lang a[aria-current],.dr-lang a[aria-current],.ft-lang a[aria-current]{border-bottom:2px solid var(--g)}
.hd-lang{margin-right:8px}
@media (max-width:1240px){.hd-lang{display:none}}
.dr-lang{margin-top:24px}
.dr-lang a{font-size:15px}
/* タイ語:Noto Sans Thai で表示し、声調記号が欠けないよう行間を少し広げる */
html[lang="th"] body{font-family:"Noto Sans Thai","Helvetica Neue",Arial,sans-serif}
html[lang="th"] .h1,html[lang="th"] .h2,html[lang="th"] .h3{line-height:1.4}

/* スマホ・タブレット:言語はヘッダーで選べるようにし、採用情報のボタンはメニューの中だけにする */
@media (max-width:1240px){.hd-lang{display:flex;margin-right:4px;gap:4px 10px}.hd-r .btn.join{display:none}}
@media (max-width:400px){.hd-lang a{font-size:12px}.hd-lang{gap:4px 8px}}

/* ソリューションのボタン:1行目に「ソリューション #1」、2行目に名前 */
.sol-btn{position:relative;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 48px 12px 20px;line-height:1.3}
.sol-btn::after{position:absolute;right:20px;top:50%;margin-top:-5px}
.sol-no{font-size:12px;font-weight:700;letter-spacing:.04em;opacity:.75}
.sol-name{font-size:17px;font-weight:700}
.feat-tile p{margin-top:12px}

/* ニュースの最後のリンク(旧サイトなど) */
.news-link{overflow-wrap:anywhere}
.news-link a{border-bottom:2px solid var(--g);font-weight:700}
.card .news-link{margin-top:10px;font-size:14px}

/* 製品開発:写真を横に並べる(スマホでは横にスクロール) */
.rnd-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.rnd-ph{margin:0;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:#000}
.rnd-ph img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.rnd-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px}.rnd-ph{flex:0 0 70%;scroll-snap-align:start}}
/* 採用情報の写真は縦長なので、PCでは高さを抑える */
#join .vis{max-width:420px;justify-self:end;width:100%}
@media (max-width:900px){#join .vis{justify-self:stretch;max-width:none}}

/* フッターの列:メニューの数(言語で4〜5)に合わせて横に並べる */
@media (min-width:901px){.ft-cols{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}.ft-cols .ft-news{min-width:220px}}

/* 製品開発 v2:2行×4列。上段・下段とも左から工程順。スマホは2列 */
.rnd-lead{margin-top:12px;max-width:760px;color:var(--mute)}
.rnd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rnd-grid .rnd-ph{flex:none}
@media (max-width:900px){.rnd-grid{grid-template-columns:repeat(2,1fr);gap:8px}}
/* 製品開発の説明文:PCでは1行に収める(英語は長いので折り返す) */
@media (min-width:1101px){.rnd-lead{max-width:none}html:not([lang="en"]) .rnd-lead{white-space:nowrap}}
/* 製品開発の説明文:PCでは1行に収める(英語は長いので折り返す) */
@media (min-width:1101px){.rnd-lead{max-width:none}html:not([lang="en"]) .rnd-lead{white-space:nowrap}}

/* マスコット(モミちゃん):右下に小さく。吹き出しはキャラが出てから表示 */
.momi{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:flex-end;gap:4px;pointer-events:none}
.momi>*{pointer-events:auto}
.momi-img{width:110px;height:auto;display:block}
.momi-bubble{position:relative;margin-bottom:38px;max-width:190px;padding:10px 14px;background:var(--white);color:var(--ink);border:2px solid var(--g);border-radius:12px;font-size:13px;font-weight:700;line-height:1.5;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.momi-bubble::before,.momi-bubble::after{content:"";position:absolute;border-style:solid;border-color:transparent;border-right-width:0}
.momi-bubble::before{right:-12px;bottom:12px;border-width:9px 0 9px 12px;border-left-color:var(--g)}
.momi-bubble::after{right:-8px;bottom:15px;border-width:6px 0 6px 8px;border-left-color:var(--white)}
.momi.on .momi-bubble{opacity:1;transform:none}
.momi-bubble:hover{color:var(--g-txt)}
.momi-x{position:absolute;top:-6px;right:-4px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--black);color:var(--white);border:1px solid var(--line-dk)}
.momi-x svg{width:14px;height:14px}
@media (max-width:640px){.momi-img{width:84px}.momi-bubble{max-width:150px;font-size:12px;margin-bottom:26px}}

/* サステナビリティのページ */
.sus-hero{position:relative;background:var(--black);color:var(--white);padding:72px 0 80px;overflow:hidden;isolation:isolate}
.sus-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-2}
.sus-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.65) 55%,rgba(0,0,0,.25) 100%)}
.sus-hero .lead{margin-top:20px;color:#d9d9d9;max-width:560px}
.sus-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sus-tile{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#000;color:var(--white)}
.sus-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.sus-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.85) 100%)}
.sus-tile span{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;font-size:14px;color:#d9d9d9}
.sus-tile b{display:block;font-size:20px;color:var(--white);margin-bottom:4px;border-left:4px solid var(--g);padding-left:10px}
.sus-tile:hover img{transform:scale(1.04)}
@media (max-width:900px){.sus-tiles{grid-template-columns:repeat(2,1fr);gap:10px}.sus-tile b{font-size:16px}.sus-tile span{left:12px;right:12px;bottom:12px;font-size:12px}}
.pvm{margin-top:20px;display:grid;gap:28px}
.pvm dt{font-size:14px;font-weight:700;color:var(--g)}
.pvm dd{margin:6px 0 0;font-size:clamp(20px,2vw,28px);font-weight:700;line-height:1.5}
.sus-list{list-style:none;margin-top:24px;display:grid;gap:20px}
.sus-list li{padding-left:16px;border-left:3px solid var(--g);color:var(--mute)}
.dark .sus-list li{color:var(--mute-dk)}
.sus-list b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}
.dark .sus-list b{color:var(--white)}
.sus-todo{margin-top:16px;padding:12px 16px;border:2px dashed var(--g);border-radius:var(--r);font-size:14px;color:var(--g-txt);background:rgba(242,106,27,.06)}
@media (max-width:640px){.sus-tiles{grid-template-columns:1fr}.sus-tile{aspect-ratio:16/9}.sus-tile b{font-size:18px}}

/* IR情報:会社データと業績ハイライトの棒グラフ(1系列なので凡例なし。見出しが系列名) */
.ir-cap{font-size:28px;font-weight:700;color:var(--g-txt);margin-right:4px;font-variant-numeric:tabular-nums}
.ir-data th{width:28%;white-space:nowrap}
.ir-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ir-chart{background:var(--white);border:1px solid var(--line-lt);border-radius:var(--r);padding:24px}
.ir-chart figcaption{position:static;padding:0;background:none;font-size:13px;color:var(--mute)}
.ir-chart figcaption b{display:block;font-size:20px;color:var(--ink);margin-bottom:2px}
.ir-svg{display:block;width:100%;height:auto;margin-top:16px;overflow:visible}
.ir-grid line{stroke:var(--line-lt);stroke-width:1}
.ir-grid .ir-base{stroke:var(--line)}
.ir-bar path{fill:var(--g)}
.ir-bar path:hover{fill:var(--g-txt)}
.ir-x text{font-size:14px;fill:var(--mute)}
.ir-end{font-size:16px;font-weight:700;fill:var(--ink)}
.ir-link{color:var(--g-txt);text-decoration:underline}
@media (max-width:800px){.ir-charts{grid-template-columns:1fr}.ir-chart{padding:16px}.ir-x text{font-size:22px}.ir-end{font-size:24px}}

/* 特長のタイル:数字を大きく見せるカード(Deloitte の About の数字カードを参考に) */
.feat-tile{container-type:inline-size;background:#151515;border-top:3px solid var(--g);border-radius:var(--r);padding:36px 24px 32px;text-align:center}
.feat-tile b{font-size:clamp(40px,24cqi,88px);line-height:1;letter-spacing:-.02em;color:var(--g);white-space:nowrap}
.feat-tile p{margin:20px auto 0;max-width:30em;font-size:15px;line-height:1.7;text-wrap:pretty}
@media (max-width:640px){.feat-tile{padding:28px 20px 24px}}

/* サステナビリティ:アニマルウェルフェア(考え方 → ポリシーと5つの自由 → 主な取り組み) */
.sus-p{margin-top:16px;color:var(--mute);line-height:1.8}
.sus-h3{margin-top:36px;font-size:20px;font-weight:700}
.sus-five{list-style:none;margin-top:16px;display:grid;gap:8px;counter-reset:five}
.sus-five li{counter-increment:five;display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--bg-lt);border-radius:var(--r);font-weight:700}
.sus-five li::before{content:counter(five);flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--g);color:var(--white);font-size:14px}
.sus-h3+.sus-list{margin-top:16px}

/* WLB:BEGIN ワークライフバランス:NTT東日本の「社員の1日」にならう。冒頭の紹介、Profile、一日のスケジュール(縦の線と大きな時刻。写真のある時刻はカード) */
.wlb-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:48px;align-items:center;max-width:1160px}
.wlb-hero .h1{font-size:clamp(36px,4.6vw,60px)}
.wlb-lead{margin-top:20px;color:#d9d9d9;max-width:34em;line-height:1.8}
.wlb-who{margin-top:28px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;font-size:22px;font-weight:700}
.wlb-who span{font-size:13px;letter-spacing:.2em;color:var(--g);text-transform:uppercase}
.wlb-who small{font-size:15px;font-weight:400;color:var(--mute-dk)}
.wlb-who small+small{flex-basis:100%}
.wlb-hero-ph img{display:block;width:auto;max-width:100%;height:auto;border-radius:var(--r)}
.wlb-block{margin-top:64px}
.wlb-profile{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px 32px;align-items:baseline;background:#151515;border-top:3px solid var(--g);border-radius:var(--r);padding:28px 32px;max-width:1160px}
.wlb-profile .wlb-h{margin:0}
.wlb-profile p{color:#d9d9d9;line-height:1.9;font-size:17px}
.wlb-h{font-size:clamp(24px,3vw,36px);font-weight:700;margin-bottom:12px;padding-left:14px;border-left:4px solid var(--g)}
.wlb-note{font-size:13px;color:var(--mute-dk)}
.wlb-tl{list-style:none;margin-top:24px;max-width:1160px}
/* 線は行ごとに引き、最初と最後の点で止める */
.wlb-tl li{display:grid;grid-template-columns:128px minmax(0,1fr);column-gap:64px;padding:16px 0;position:relative}
.wlb-tl li::before{content:"";position:absolute;left:151px;top:0;bottom:0;width:2px;background:#555}
.wlb-tl li:first-child::before{top:34px}
.wlb-tl li:last-child::before{bottom:auto;height:34px}
.wlb-tl li::after{content:"";position:absolute;left:144px;top:25px;width:16px;height:16px;border-radius:50%;background:var(--black);border:3px solid var(--g);box-sizing:border-box}
.wlb-tl li.has-ph::after{top:30px;background:var(--g)}
.wlb-t{text-align:right}
.wlb-t time{display:block;font-size:30px;font-weight:700;line-height:1.1;color:var(--g);font-variant-numeric:tabular-nums}
.wlb-tl li.has-ph .wlb-t time{font-size:40px}
.wlb-t svg{display:block;width:44px;height:30px;margin:8px -3px 0 auto;fill:none;stroke:var(--g);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wlb-tl b{display:block;font-size:20px;line-height:1.4}
.wlb-tl p{margin-top:6px;color:var(--mute-dk);line-height:1.7}
.wlb-tl li:not(.has-ph)>div:last-child{padding:4px 28px 0}
.wlb-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(360px,45%));gap:28px;align-items:center;max-width:920px;background:#151515;border-radius:var(--r);padding:24px 24px 24px 28px;border-top:3px solid var(--g)}
.wlb-card b{font-size:clamp(20px,2vw,24px)}
.wlb-card p{font-size:16px}
.wlb-card img{display:block;width:auto;max-width:100%;height:auto;border-radius:var(--r)}
.wlb-cta{margin-top:64px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 32px;padding:28px 32px;background:#151515;border-radius:var(--r);max-width:1160px}
.wlb-cta p{font-size:18px;font-weight:700}
/* タブレット・スマホ:時刻を見出しの上に置き、線は左端に */
@media (max-width:900px){
  .wlb-hero{grid-template-columns:1fr;gap:32px}
  .wlb-hero-ph img{max-width:min(100%,360px)}
  .wlb-profile{grid-template-columns:1fr;padding:22px}
  .wlb-tl li{display:block;padding:12px 0 12px 30px}
  .wlb-tl li::before{left:7px}
  .wlb-tl li:first-child::before{top:22px}
  .wlb-tl li:last-child::before{height:22px}
  .wlb-tl li::after,.wlb-tl li.has-ph::after{left:0;top:15px}
  .wlb-t{text-align:left;display:flex;align-items:center;gap:10px;margin-bottom:6px}
  .wlb-t time,.wlb-tl li.has-ph .wlb-t time{font-size:22px}
  .wlb-t svg{margin:0;width:34px;height:23px;stroke-width:2.4}
  .wlb-tl li:not(.has-ph)>div:last-child{padding:0}
  .wlb-card{grid-template-columns:minmax(0,1fr);padding:16px;gap:14px}
  .wlb-card img{max-width:min(100%,480px)}
  .wlb-cta{padding:20px}
}
@media (max-width:640px){.wlb-block{margin-top:48px}.wlb-tl b{font-size:18px}.wlb-card b{font-size:19px}}
/* WLB:END */

/* IR情報:棒グラフに重ねる線と、ライブ実績の地図(ドットの点描) */
.ir-line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.ir-dot circle{fill:var(--ink);stroke:var(--white);stroke-width:2}
.ir-map{grid-column:1/-1}
.ir-map-in{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px;align-items:center;margin-top:16px}
.jp-svg{display:block;width:100%;max-width:480px;height:auto;margin-inline:auto}
.jp-land circle{fill:#d9d9d9}
.jp-plot circle{fill:var(--g);fill-opacity:.85;stroke:var(--white);stroke-width:2}
.jp-box{fill:none;stroke:var(--line);stroke-width:1}
.jp-lbl{font-size:13px;fill:var(--mute)}
.ir-kpi{display:grid;gap:24px}
.ir-kpi dt{font-size:13px;color:var(--mute)}
.ir-kpi dd{margin:4px 0 0;font-size:40px;font-weight:700;line-height:1.1;color:var(--g-txt)}
.ir-kpi div+div dd{font-size:24px}
@media (max-width:800px){.ir-map-in{grid-template-columns:1fr;gap:20px}.ir-kpi{grid-template-columns:1fr 1fr}}

/* 私たちの取り組み:選択肢の背景は線画(写真は使わない)。CSR・ESG・DEI は写真を外したので、PCでは項目を2列に */
.sus-tile{background:radial-gradient(120% 90% at 85% 15%,#2a1406 0%,#111 55%,#0a0a0a 100%)}
.sus-art{position:absolute;inset:0;width:100%;height:100%;color:var(--g);opacity:.85;transition:transform .4s,opacity .4s}
.sus-tile:hover .sus-art{transform:scale(1.04);opacity:1}
.sus-tile::after{background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.6) 100%)}
@media (min-width:901px){#csr .sus-list,#esg .sus-list,#dei .sus-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}}

/* 私たちの取り組み:本文中の出典リンク */
.sus-link{color:var(--g-txt);text-decoration:underline;text-underline-offset:2px}
.dark .sus-link{color:var(--g)}

/* 見直し(2026-10):マスコットの吹き出しは出るまで押せない。スマホでは足元のリンクを隠さないよう余白を取り、吹き出しは数秒で下げる(site.js) */
.momi-bubble{visibility:hidden;pointer-events:none;transition:opacity .3s,transform .3s,visibility 0s linear .3s}
.momi.on .momi-bubble{visibility:visible;pointer-events:auto;transition-delay:0s}
@media (max-width:768px){.ft{padding-bottom:150px}}
/* 狭い幅:IRの表のメールアドレスで横にはみ出さない。ヘッダーの語が折れない */
.ir-data td{overflow-wrap:anywhere}
@media (max-width:400px){.hd-in{gap:12px}.hd-r{gap:6px}.logo{flex:none}}
/* IRのグラフ:1024px以下は1列。文字を大きくするのは狭いときだけ */
@media (max-width:1024px){.ir-charts{grid-template-columns:1fr}}
@media (min-width:541px) and (max-width:800px){.ir-x text{font-size:14px}.ir-end{font-size:16px}}