/* エコノハブレイン サイトリニューアル（黒基調・細字・マゼンタ→紫） */
:root {
  --bg: #030305; --bg2: #08070c; --ink: #f3f2f6; --gray: #8b8a93; --line: rgba(243,242,246,.12);
  --mag: #e4007f; --pur: #9b1b86; --vio: #6c1785; --pink: #ff5bb0;
  --hl: linear-gradient(90deg, #ff5bb0, #e4007f 50%, #a04bc8);
  --f-en: 'Archivo', system-ui, sans-serif; --f-jp: 'Noto Sans JP', system-ui, sans-serif; --f-mono: 'Source Code Pro', ui-monospace, monospace;
  --pad: clamp(16px, 6vw, 120px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-jp); font-weight: 300; line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
em { font-style: normal; }

/* 粒子ノイズ */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-5%,3%)} 40%{transform:translate(4%,-6%)} 60%{transform:translate(-3%,5%)} 80%{transform:translate(6%,2%)} 100%{transform:translate(0,0)} }

/* ヘッダー */
.hdr { position: fixed; inset: 0 0 auto; z-index: 80; display: flex; align-items: center; gap: 32px; padding: 22px var(--pad); transition: padding .4s, background .4s, backdrop-filter .4s; }
.hdr.is-solid { padding-top: 12px; padding-bottom: 12px; background: rgba(3,3,5,.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.hdr__logo { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.hdr__mark { height: 34px; width: auto; }
.hdr__type { height: 22px; width: auto; }
.hdr__nav { display: flex; gap: 28px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; }
.hdr__nav a { opacity: .7; transition: opacity .3s; position: relative; }
.hdr__nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: var(--mag); transition: right .4s; }
.hdr__nav a:hover { opacity: 1; } .hdr__nav a:hover::after { right: 0; }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 30px; border-radius: 999px; background: var(--hl); color: #fff; font-weight: 400; font-size: 15px; letter-spacing: .08em;
  box-shadow: 0 10px 40px -12px rgba(228,0,127,.7); transition: transform .3s, box-shadow .3s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -10px rgba(228,0,127,.85); }
.btn--ghost { background: transparent; border: 1px solid rgba(243,242,246,.4); box-shadow: none; }
.btn--ghost:hover { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink) inset; }
.btn--sm { padding: 9px 20px; font-size: 13px; }

.mono-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .3em; color: var(--pink); }

/* 出現アニメーション */
.rv { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.2,.7,.1,1), transform 1.1s cubic-bezier(.2,.7,.1,1); transition-delay: var(--d, 0s); }
.rv.is-in { opacity: 1; transform: none; }

/* ヒーロー */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, rgba(155,27,134,.22), transparent 60%), var(--bg); }
.hero__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__foot { position: absolute; left: 0; right: 0; bottom: 9vh; display: flex; flex-direction: column; align-items: center; gap: 26px; pointer-events: none; }
.hero__lead { font-size: clamp(16px, 1.7vw, 26px); letter-spacing: .5em; text-indent: .5em; opacity: 0; transition: opacity 1.4s; }
.hero__cta { display: flex; gap: 14px; opacity: 0; transform: translateY(16px); transition: opacity 1.2s .3s, transform 1.2s .3s; pointer-events: auto; }
.hero.is-ready .js-hero-lead { opacity: 1; transform: none; }
.scroll { position: absolute; right: var(--pad); bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .3em; writing-mode: vertical-rl; color: var(--gray); }
.scroll i { width: 1px; height: 70px; background: linear-gradient(var(--pink), transparent); animation: drip 2s infinite; transform-origin: top; }
@keyframes drip { 0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(1);opacity:0} }
.hud { position: absolute; inset: 96px 32px 32px; pointer-events: none; font-family: var(--f-mono); font-size: 11px; letter-spacing: .25em; color: rgba(243,242,246,.5); }
.hud > i { position: absolute; width: 22px; height: 22px; border: 1px solid rgba(243,242,246,.45); }
.hud > i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; } .hud > i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.hud > i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; } .hud > i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.hud span { position: absolute; }
.hud__tl { left: 40px; top: 4px; } .hud__tr { right: 40px; top: 4px; } .hud__bl { left: 40px; bottom: 4px; } .hud__br { right: 40px; bottom: 8px; display: flex; gap: 10px; }
.hud__br b { width: 7px; height: 7px; border-radius: 50%; background: rgba(243,242,246,.3); } .hud__br b.on { background: var(--mag); }

/* マニフェスト */
.manifesto { padding: 22vh var(--pad) 18vh; text-align: center; background: radial-gradient(ellipse at 50% 60%, rgba(108,23,133,.18), transparent 60%); }
.manifesto__words { margin: 5vh 0 6vh; font-weight: 200; font-size: clamp(44px, 9vw, 168px); line-height: 1.25; letter-spacing: .08em; display: flex; flex-wrap: wrap; justify-content: center; column-gap: .25em; }
.manifesto__words .w { display: inline-block; }
.w--hl { background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 300; }
.manifesto__sub { color: var(--gray); font-size: clamp(15px, 1.4vw, 20px); letter-spacing: .14em; }

/* セクション見出し */
.sec-head { padding: 0 var(--pad); margin-bottom: 8vh; }
.sec-title { margin-top: 18px; font-weight: 200; font-size: clamp(34px, 5vw, 84px); letter-spacing: .08em; line-height: 1.3; }
.sec-sub { margin-top: 22px; color: var(--gray); max-width: 720px; letter-spacing: .06em; }

/* 主要サービス */
.services { padding: 16vh 0 10vh; }
.feat { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 4vw; min-height: 92vh; padding: 10vh var(--pad); }
.feat--L { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feat--L .feat__copy { order: 2; text-align: right; } .feat--L .badge { margin-left: auto; } .feat--L .stat { justify-content: flex-end; }
.feat::before { content: ''; position: absolute; inset: 10% 0; z-index: -1; background: radial-gradient(ellipse at var(--gx, 70%) 50%, rgba(155,27,134,.25), transparent 55%); }
.feat--L::before { --gx: 30%; }
.feat__note { font-size: 14px; letter-spacing: .2em; color: var(--gray); }
.badge { display: inline-flex; margin-top: 14px; padding: 14px 22px; border-radius: 12px; background: #fff; }
.badge img { height: 44px; width: auto; max-width: 260px; object-fit: contain; }
.feat__pain { margin-top: 40px; color: var(--gray); font-size: clamp(14px, 1.2vw, 18px); letter-spacing: .14em; }
.feat__ben { margin-top: 10px; font-weight: 200; font-size: clamp(32px, 3.7vw, 66px); line-height: 1.32; letter-spacing: .05em; }
.feat__ben em { background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 300; }
.feat__desc { margin-top: 26px; color: rgba(243,242,246,.78); font-size: 15px; letter-spacing: .05em; max-width: 520px; }
.feat--L .feat__desc { margin-left: auto; }
.stat { display: flex; align-items: baseline; gap: 18px; margin-top: 36px; padding-top: 22px; border-top: 1px solid; border-image: linear-gradient(90deg, var(--mag), transparent 50%) 1; }
.feat--L .stat { border-image: linear-gradient(270deg, var(--mag), transparent 50%) 1; }
.stat b { font-family: var(--f-en); font-weight: 100; font-stretch: 112%; font-size: clamp(40px, 4vw, 68px); line-height: 1; }
.stat span { color: var(--pink); font-size: 14px; letter-spacing: .1em; }

.feat__stage { position: relative; perspective: 1800px; min-height: 52vh; display: flex; align-items: center; }
.feat--L .feat__stage { order: 1; }
.scr { margin: 0; }
.scr--browser { position: relative; width: 100%; border-radius: 14px; overflow: visible; background: #17161c; box-shadow: 0 50px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14), 0 0 120px -20px rgba(155,27,134,.5);
  transform: rotateY(var(--ry, -16deg)) rotateX(4deg) translateX(var(--tx, 60px)); transform-origin: center; transition: transform 1.4s cubic-bezier(.2,.7,.1,1), opacity 1.2s; opacity: 0; }
.feat--L .scr--browser { --ry: 16deg; --tx: -60px; }
.feat.is-in .scr--browser { opacity: 1; --tx: 0px; }
.scr__bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 14px 14px 0 0; background: #17161c; }
.scr__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .scr__bar i:nth-child(2) { background: #febc2e; } .scr__bar i:nth-child(3) { background: #28c840; }
.scr__bar span { margin: 0 auto; padding: 2px 18px; border-radius: 99px; background: #26252d; font-family: var(--f-mono); font-size: 11px; color: #9a99a3; }
.scr--browser > img { width: 100%; border-radius: 0 0 14px 14px; }
.scr--phone { position: absolute; width: 22%; min-width: 120px; right: -2%; bottom: -6%; padding: 7px; border-radius: 30px; background: #0e0d12; box-shadow: 0 40px 80px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.2);
  transform: translateY(80px) rotate(4deg); opacity: 0; transition: transform 1.3s .35s cubic-bezier(.2,.7,.1,1), opacity 1s .35s; }
.feat--L .scr--phone { right: auto; left: auto; right: -4%; }
.scr--phone img { border-radius: 24px; }
.feat.is-in .scr--phone { transform: translateY(0) rotate(2deg); opacity: 1; }
.scr--paper { position: absolute; width: 46%; right: -4%; bottom: -14%; background: #fff; box-shadow: 0 50px 100px -20px rgba(0,0,0,.85); transform: translate(120px, 60px) rotate(10deg); opacity: 0; transition: transform 1.3s .5s cubic-bezier(.2,.7,.1,1), opacity 1s .5s; }
.scr--paper figcaption { position: absolute; top: -28px; left: 0; right: 0; text-align: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--pink); }
.feat.is-in .scr--paper { transform: rotate(-3deg); opacity: 1; }
/* 注釈 */
.call { position: absolute; left: var(--x); top: var(--y); transform: translate(18px, -64px); padding: 8px 18px; border-radius: 99px; background: rgba(10,9,14,.9); border: 1px solid rgba(255,91,176,.8); font-size: 13px; font-weight: 400; white-space: nowrap; opacity: 0; transition: opacity .6s, transform .6s; transition-delay: calc(1s + var(--i, 0) * .3s); }
.call::before { content: ''; position: absolute; left: -18px; bottom: -36px; width: 12px; height: 12px; border-radius: 50%; background: var(--mag); box-shadow: 0 0 0 6px rgba(228,0,127,.25); }
.call::after { content: ''; position: absolute; left: -12px; bottom: -30px; width: 30px; height: 1px; background: var(--pink); transform: rotate(-60deg); transform-origin: left; }
.call:nth-of-type(2) { --i: 1; }
.feat.is-in .call { opacity: 1; transform: translate(26px, -58px); }

/* 全面の実画面（ルートダス・Sophia） */
.feat--F { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100vh; overflow: hidden; }
.feat--F::before { display: none; }
.feat__bg { position: absolute; inset: 0 0 0 30%; z-index: -1; overflow: hidden; }
.feat__bg > img, .sophia-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 6s cubic-bezier(.2,.7,.1,1); }
.feat.is-in .feat__bg > img, .feat.is-in .sophia-shot { transform: scale(1.02); }
.feat__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(3,3,5,.93) 30%, rgba(3,3,5,.55) 48%, rgba(3,3,5,0) 66%), linear-gradient(0deg, var(--bg), transparent 25%), linear-gradient(180deg, var(--bg), transparent 18%); }
.pulse { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--mag); }
.pulse::before, .pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pink); animation: ping 2.4s infinite; }
.pulse::after { animation-delay: 1.2s; }
@keyframes ping { from { transform: scale(1); opacity: .9 } to { transform: scale(9); opacity: 0 } }
.sophia-shot { aspect-ratio: 16/10; width: auto; height: 100%; left: auto; right: 0; inset: 0 0 0 auto; }
.sophia-shot img { width: 100%; height: 100%; object-fit: cover; }
.sq, .sa { position: absolute; font-weight: 500; font-size: clamp(10px, .95vw, 17px); line-height: 1.6; color: #222; opacity: 0; transition: opacity .5s, transform .5s; transform: translateY(10px); }
.sq { right: 2.2%; top: 36.5%; padding: .55em 1.4em; border-radius: 1em; background: #1e3a9a; color: #fff; }
.sa { left: 73%; top: 44%; width: 21%; min-height: 6.5em; padding: .8em 1em; border-radius: .8em; background: #eef0f4; white-space: pre-line; }
.sa__dots { display: inline-flex; gap: 5px; } .sa__dots i { width: 7px; height: 7px; border-radius: 50%; background: #8a93b8; animation: dot 1s infinite; } .sa__dots i:nth-child(2) { animation-delay: .15s; } .sa__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .4 } }
.feat--sophia.is-chat .sq { opacity: 1; transform: none; }
.feat--sophia.is-chat2 .sa { opacity: 1; transform: none; }

/* 一覧 */
.works { padding: 18vh 0 16vh; border-top: 1px solid var(--line); }
.works__filter { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--pad); margin-bottom: 40px; }
.works__filter button { padding: 8px 20px; border-radius: 99px; border: 1px solid rgba(243,242,246,.25); background: none; color: var(--ink); font: 300 14px var(--f-jp); letter-spacing: .1em; cursor: pointer; transition: all .3s; }
.works__filter button.is-on, .works__filter button:hover { border-color: var(--mag); background: rgba(228,0,127,.15); }
.works__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 0 var(--pad); }
.card { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--line); transition: transform .5s, border-color .5s, box-shadow .5s, opacity .5s; opacity: 0; transform: translateY(30px); }
.card.is-in { opacity: 1; transform: none; }
.card:hover { transform: translateY(-6px); border-color: rgba(228,0,127,.6); box-shadow: 0 30px 60px -30px rgba(228,0,127,.55); }
.card.is-hide { display: none; }
.card__logo { display: flex; align-items: center; justify-content: center; height: 120px; border-radius: 12px; background: #fff; padding: 18px 26px; }
.card__logo img { max-height: 84px; max-width: 100%; object-fit: contain; }
.card__cat { margin-top: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--pink); }
.card__name { margin-top: 4px; font-weight: 400; font-size: 19px; letter-spacing: .06em; }
.card__sub { font-size: 13px; color: var(--gray); }
.card__desc { margin-top: 10px; font-size: 14px; color: rgba(243,242,246,.8); line-height: 1.75; flex: 1; }
.card__link { margin-top: 16px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .15em; color: var(--pink); }
.card__link::after { content: ' →'; }

/* 数字 */
.numbers { padding: 16vh var(--pad); border-top: 1px solid var(--line); background: radial-gradient(ellipse at 20% 50%, rgba(228,0,127,.12), transparent 55%); }
.numbers__row { margin-top: 7vh; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4vw; }
.num b { display: block; font-family: var(--f-en); font-weight: 100; font-stretch: 100%; font-size: clamp(56px, 5.6vw, 116px); white-space: nowrap; line-height: 1; background: linear-gradient(120deg, #ff5bb0, #e4007f 45%, #8a2bb0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num b em { font-size: .7em; }
.num span { display: block; margin-top: 22px; font-size: 16px; letter-spacing: .08em; }
.num small { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .25em; color: var(--gray); }

/* フィロソフィー */
.philo { position: relative; padding: 26vh var(--pad); text-align: center; overflow: hidden; border-top: 1px solid var(--line); }
.philo__cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.philo__l1, .philo__l2 { font-weight: 200; font-size: clamp(42px, 7vw, 130px); letter-spacing: .12em; line-height: 1.35; }
.philo__l1 { margin-top: 6vh; }
.philo__l2 { --d: .5s; background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; }
.philo small { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .5em; color: var(--gray); -webkit-text-fill-color: var(--gray); }

/* お問い合わせ */
.contact { padding: 20vh var(--pad); text-align: center; border-top: 1px solid var(--line); background: radial-gradient(ellipse at 50% 30%, rgba(155,27,134,.28), transparent 60%); }
.contact__mark { width: 140px; margin: 0 auto; }
.contact__title { margin-top: 40px; font-weight: 200; font-size: clamp(34px, 5vw, 80px); letter-spacing: .1em; }
.contact__sub { margin-top: 16px; color: var(--gray); letter-spacing: .08em; }
.contact__cta { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.tel { font-family: var(--f-en); font-stretch: 110%; letter-spacing: .12em; }

.ftr { padding: 60px var(--pad) 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; color: var(--gray); font-size: 13px; }
.ftr__logo { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.ftr__logo img:first-child { height: 30px; } .ftr__logo img:last-child { height: 20px; }
.ftr__copy { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; }

/* スマホ */
@media (max-width: 900px) {
  .hdr__nav { display: none; }
  .hdr__type { height: 18px; } .hdr__mark { height: 28px; }
  .hud { inset: 80px 14px 18px; font-size: 9px; } .hud__tl, .hud__tr { display: none; }
  .feat, .feat--L, .feat--F { grid-template-columns: 1fr; min-height: 0; gap: 7vh; padding: 12vh var(--pad); }
  .feat--L .feat__copy { order: 0; text-align: left; } .feat--L .badge { margin-left: 0; } .feat--L .stat { justify-content: flex-start; } .feat--L .feat__desc { margin-left: 0; }
  .feat--L .stat { border-image: linear-gradient(90deg, var(--mag), transparent 50%) 1; }
  .feat__stage { min-height: 0; padding-bottom: 10%; }
  .scr--browser { --ry: -8deg; } .feat--L .scr--browser { --ry: 8deg; }
  .feat__bg { position: relative; inset: auto; order: 2; height: 56vw; margin: 0 calc(var(--pad) * -1); z-index: 0; }
  .feat__bg::after { background: linear-gradient(0deg, var(--bg), transparent 30%), linear-gradient(180deg, var(--bg), transparent 30%); }
  .badge img { height: 34px; }
  .numbers__row { grid-template-columns: 1fr; gap: 9vh; }
  .scroll { display: none; }
  .feat { overflow-x: clip; }
  .call { font-size: 11px; padding: 6px 12px; }
  .call:nth-of-type(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .card, .scr--browser, .scr--phone, .scr--paper { transition: none; opacity: 1; transform: none; }
  .grain { animation: none; }
}

/* ===== 開発実績：3Dカルーセル（今のサイトのカード画像） ===== */
.carousel { position: relative; height: clamp(600px, 66vw, 860px); perspective: 2600px; perspective-origin: 50% 35%; cursor: grab; touch-action: pan-y; user-select: none; overflow: hidden; }
.carousel:active { cursor: grabbing; }
.carousel__glow { position: absolute; left: 50%; top: 46%; width: 70vw; height: 70vw; max-width: 1100px; max-height: 1100px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(228,0,127,.35), rgba(108,23,133,.18) 35%, transparent 65%); filter: blur(20px); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.08); } }
.carousel__ring { position: absolute; left: 50%; top: 44%; width: 0; height: 0; transform-style: preserve-3d; }
.c3d { --w: clamp(220px, 24vw, 390px); position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) * -0.635); width: var(--w); aspect-ratio: 700 / 889; border-radius: 18px; overflow: hidden; backface-visibility: hidden;
  filter: brightness(calc(.35 + var(--face, 1) * .65)) saturate(calc(.6 + var(--face, 1) * .4));
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12);
  -webkit-box-reflect: below 14px linear-gradient(transparent 62%, rgba(255,255,255,.22)); transition: box-shadow .5s; }
.c3d img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.c3d.is-front { box-shadow: 0 50px 100px -20px rgba(228,0,127,.6), 0 0 0 2px rgba(255,91,176,.9), 0 0 60px rgba(228,0,127,.45); }
.c3d__shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-120%); }
.c3d.is-front .c3d__shine { animation: shine 2.6s ease-in-out infinite; }
@keyframes shine { 0% { transform: translateX(-120%) } 45%, 100% { transform: translateX(120%) } }
.carousel__floor { position: absolute; left: -10%; right: -10%; bottom: 0; height: 32%; background: linear-gradient(transparent, var(--bg) 85%); pointer-events: none; }
.carousel__info { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: -40px; position: relative; z-index: 2; padding: 0 var(--pad); }
.carousel__title { min-width: min(560px, 60vw); text-align: center; font-size: clamp(16px, 1.6vw, 24px); letter-spacing: .1em; }
.carousel__title small { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .25em; color: var(--pink); }
.carousel__title.pop span { animation: pop .6s cubic-bezier(.2,.7,.1,1); display: inline-block; }
@keyframes pop { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
.carousel__btn { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(243,242,246,.35); background: rgba(255,255,255,.03); color: var(--ink); font-size: 18px; cursor: pointer; transition: all .3s; }
.carousel__btn:hover { border-color: var(--pink); background: rgba(228,0,127,.2); box-shadow: 0 0 30px rgba(228,0,127,.5); }
.carousel__hint { margin-top: 18px; text-align: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: .4em; color: var(--gray); }

/* ===== それ以外のサービス：流れるロゴ帯 ===== */
.others { margin-top: 14vh; }
.others .mono-label { padding: 0 var(--pad); margin-bottom: 26px; }
.marquee { overflow: hidden; padding: 10px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 18px; width: max-content; animation: mq 60s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 70s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-33.333%); } }
.chip { display: flex; align-items: center; gap: 16px; padding: 12px 22px 12px 12px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); transition: border-color .4s, box-shadow .4s, transform .4s; }
.chip:hover { border-color: rgba(228,0,127,.7); box-shadow: 0 20px 50px -20px rgba(228,0,127,.6); transform: translateY(-4px); }
.chip__logo { display: flex; align-items: center; justify-content: center; width: 150px; height: 64px; padding: 8px 14px; border-radius: 10px; background: #fff; }
.chip__logo img { max-width: 100%; max-height: 48px; object-fit: contain; }
.chip__txt b { display: block; font-weight: 400; font-size: 15px; white-space: nowrap; }
.chip__txt small { display: block; font-size: 12px; color: var(--gray); white-space: nowrap; }
@media (max-width: 900px) {
  .carousel { height: 470px; perspective: 1200px; }
  .carousel__info { gap: 12px; margin-top: -20px; } .carousel__btn { width: 44px; height: 44px; }
  .chip__logo { width: 110px; height: 52px; }
}

/* ===== v3：ページ全体の粒子の世界（スクロールで変形） ===== */
.world { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
main, .ftr { position: relative; z-index: 1; }
.hero, .manifesto, .numbers, .contact, .philo { background: none; }
.works, .numbers, .philo, .contact { border-top: 0; }
.feat::before { opacity: .55; }
html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; }

/* 左下に今の場面を表示 */
.scene-tag { position: fixed; left: 28px; bottom: 28px; z-index: 70; display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .3em; color: rgba(243,242,246,.6); pointer-events: none; }
.scene-tag i { width: 40px; height: 1px; background: var(--pink); }
#sceneNo { color: var(--pink); }

/* ヒーロー：左に極細の大見出し、右に脳 */
.hero { display: flex; align-items: center; padding: 0 var(--pad); }
.hero__copy { position: relative; z-index: 2; max-width: 46vw; }
.hero__label { margin-bottom: 26px; }
.hero__title { font-family: var(--f-en); font-weight: 100; font-stretch: 108%; font-size: clamp(64px, 9.2vw, 176px); line-height: .98; letter-spacing: -.01em; }
.hero__title .ln { display: block; overflow: hidden; }
.hero__title em { background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 200; }
.hero__sub { margin-top: 18px; font-family: var(--f-en); font-weight: 200; font-size: clamp(15px, 1.5vw, 24px); color: var(--gray); letter-spacing: .04em; }
.hero__lead { margin-top: 30px; font-size: clamp(14px, 1.05vw, 16px); line-height: 2.1; letter-spacing: .14em; color: rgba(243,242,246,.85); }
.hero__cta { margin-top: 36px; display: flex; gap: 14px; }
/* 見出しの入り（1行ずつ下から） */
.hero__title .ln > *, .hero__title .ln { animation: lnIn 1.4s cubic-bezier(.2,.7,.1,1) both; }
.hero__title .ln:nth-of-type(2) { animation-delay: .15s; }
@keyframes lnIn { from { opacity: 0; transform: translateY(60%); filter: blur(10px); } }
.hero__label, .hero__sub, .hero__lead, .hero__cta { animation: fadeUp 1.4s cubic-bezier(.2,.7,.1,1) both; }
.hero__sub { animation-delay: .4s; } .hero__lead { animation-delay: .6s; } .hero__cta { animation-delay: .8s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } }

/* 極細の英字大見出し */
.big-en { margin-top: 10px; font-family: var(--f-en); font-weight: 100; font-stretch: 105%; font-size: clamp(60px, 10vw, 190px); line-height: 1; letter-spacing: -.01em; color: rgba(243,242,246,.92); }
.sec-title { font-size: clamp(26px, 3.2vw, 52px); margin-top: 22px; }

.contact__space { height: 46vh; }
.contact { padding-top: 6vh; }
.carousel__glow { opacity: .55; }

@media (max-width: 900px) {
  .hero { align-items: flex-end; padding-bottom: 12vh; }
  .hero__copy { max-width: none; }
  .hero__title { font-size: 17vw; }
  .hero__lead br { display: none; }
  .scene-tag { left: 14px; bottom: 14px; font-size: 9px; }
  .contact__space { height: 40vh; }
}
.hero .hero__lead, .hero .hero__cta { opacity: 1; transform: none; transition: none; pointer-events: auto; }
.carousel__floor { display: none; }
.c3d { -webkit-box-reflect: below 14px linear-gradient(transparent 70%, rgba(255,255,255,.16)); }

/* ===== v4：AI時代／サポート／サービス一覧 ===== */
.era, .support, .services { padding: 20vh 0 12vh; }
.sec-head .sec-title { line-height: 1.45; }
.era__grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 0 var(--pad); counter-reset: n; }
.era__item { position: relative; padding: 34px 28px 36px; border-radius: 20px; background: linear-gradient(160deg, rgba(20,16,26,.78), rgba(8,7,12,.62)); border: 1px solid rgba(243,242,246,.1); backdrop-filter: blur(6px); overflow: hidden; }
.era__item::after { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--hl); transition: width 1.2s cubic-bezier(.2,.7,.1,1) .3s; }
.era__item.is-in::after { width: 100%; }
.era__no { font-family: var(--f-en); font-weight: 100; font-stretch: 110%; font-size: 64px; line-height: 1; background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; }
.era__item h3 { margin-top: 20px; font-weight: 300; font-size: 24px; letter-spacing: .1em; }
.era__item p { margin-top: 12px; font-size: 14.5px; color: rgba(243,242,246,.78); line-height: 1.9; }

.flow { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 var(--pad); }
.flow::before { content: ''; position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,91,176,.6) 10%, rgba(160,75,200,.6) 90%, transparent); }
.flow::after { content: ''; position: absolute; top: 23px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px var(--mag); animation: run 4.5s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes run { 0% { left: 2%; opacity: 0 } 10% { opacity: 1 } 90% { opacity: 1 } 100% { left: 98%; opacity: 0 } }
.flow__step { position: relative; padding: 70px 26px 0 0; }
.flow__step::before { content: ''; position: absolute; top: 18px; left: 0; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--pink); background: var(--bg); box-shadow: 0 0 0 5px rgba(228,0,127,.15); }
.flow__no { font-family: var(--f-mono); font-size: 12px; letter-spacing: .3em; color: var(--pink); }
.flow__step h3 { margin-top: 12px; font-weight: 300; font-size: clamp(22px, 2vw, 30px); letter-spacing: .1em; }
.flow__step p { margin-top: 12px; font-size: 14.5px; color: rgba(243,242,246,.78); line-height: 1.9; max-width: 300px; }
.why { margin-top: 16vh; padding: 0 var(--pad); }
.why__grid { margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.why__item { padding: 36px 32px; border-radius: 20px; background: linear-gradient(160deg, rgba(228,0,127,.12), rgba(108,23,133,.08) 60%, rgba(8,7,12,.5)); border: 1px solid rgba(255,91,176,.25); backdrop-filter: blur(6px); }
.why__item h3 { font-weight: 300; font-size: 24px; letter-spacing: .08em; }
.why__item p { margin-top: 14px; font-size: 14.5px; color: rgba(243,242,246,.8); line-height: 1.95; }

/* サービス一覧 */
.svc-filter { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--pad); margin-bottom: 36px; }
.svc-filter button { padding: 8px 20px; border-radius: 99px; border: 1px solid rgba(243,242,246,.25); background: rgba(3,3,5,.5); color: var(--ink); font: 300 14px var(--f-jp); letter-spacing: .1em; cursor: pointer; transition: all .3s; }
.svc-filter button.is-on, .svc-filter button:hover { border-color: var(--mag); background: rgba(228,0,127,.18); }
.svc-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; padding: 0 var(--pad); perspective: 1400px; }
.svc { opacity: 0; transform: translateY(40px); transition: opacity .8s, transform .9s cubic-bezier(.2,.7,.1,1); }
.svc.is-in { opacity: 1; transform: none; }
.svc.is-hide { display: none; }
.svc__in { display: flex; flex-direction: column; height: 100%; border-radius: 18px; overflow: hidden; background: rgba(12,10,16,.82); border: 1px solid rgba(243,242,246,.1); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s, border-color .4s, box-shadow .4s; backdrop-filter: blur(6px); }
.svc__in:hover { border-color: rgba(228,0,127,.7); box-shadow: 0 30px 70px -30px rgba(228,0,127,.7); }
.svc__vis { position: relative; display: block; aspect-ratio: 700 / 889; overflow: hidden; background: #fff; }
.svc__vis > img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.1,1); }
.svc__in:hover .svc__vis > img { transform: scale(1.05); }
.svc__shine { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) 20%, rgba(255,255,255,.35), transparent 45%); opacity: 0; transition: opacity .4s; mix-blend-mode: soft-light; }
.svc__in:hover .svc__shine { opacity: 1; }
.svc__gen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 30%, rgba(228,0,127,.35), transparent 60%), linear-gradient(160deg, #1a1022, #08070c); overflow: hidden; }
.svc__plate { display: flex; align-items: center; justify-content: center; width: 74%; height: 32%; padding: 14px 20px; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); }
.svc__plate img { max-width: 100%; max-height: 100%; object-fit: contain; }
.svc__gname { font-size: 13px; letter-spacing: .14em; color: rgba(243,242,246,.8); }
.svc__gbig { position: absolute; bottom: -.2em; left: -.05em; font-family: var(--f-en); font-weight: 100; font-stretch: 112%; font-size: 80px; line-height: 1; color: rgba(243,242,246,.06); white-space: nowrap; }
.svc__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; flex: 1; }
.svc__cat { font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; color: var(--pink); }
.svc__catch { font-weight: 400; font-size: 17px; line-height: 1.5; background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svc__name { font-weight: 400; font-size: 18px; letter-spacing: .05em; }
.svc__name small { display: block; font-size: 12px; color: var(--gray); font-weight: 300; }
.svc__desc { font-size: 13.5px; line-height: 1.85; color: rgba(243,242,246,.78); flex: 1; }
.svc__more { margin-top: 6px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .15em; color: var(--pink); }
.svc--ai .svc__in { border-color: rgba(255,91,176,.32); }

@media (max-width: 900px) {
  .era__grid, .why__grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; gap: 34px; padding-left: 34px; }
  .flow::before { left: 9px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(255,91,176,.6) 8%, rgba(160,75,200,.6) 92%, transparent); }
  .flow::after { display: none; }
  .flow__step { padding: 0; } .flow__step::before { left: -34px; top: 4px; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .svc__body { padding: 12px 12px 16px; } .svc__desc { display: none; } .svc__catch { font-size: 14px; } .svc__name { font-size: 15px; }
}

/* v4b：光り方を控えめに */
.btn { box-shadow: 0 8px 26px -14px rgba(228,0,127,.55); }
.btn:hover { box-shadow: 0 12px 32px -14px rgba(228,0,127,.65); }
.svc__in:hover { box-shadow: 0 24px 50px -30px rgba(228,0,127,.45); }
.svc__shine { display: none; }
.grain { opacity: .04; }
.flow::after { box-shadow: 0 0 8px 2px rgba(228,0,127,.6); }

/* ===== v5：シャープ・スマート（角丸と色の箱をやめ、細い罫線と余白で組む） ===== */
.sec-title { font-weight: 200; }
/* AI Era：罫線で区切った4列 */
.era__grid { gap: 0; border-top: 1px solid rgba(243,242,246,.18); border-bottom: 1px solid rgba(243,242,246,.18); margin: 0 var(--pad); padding: 0; }
.era__item { padding: 40px 32px 46px; border-radius: 0; background: none; border: 0; border-left: 1px solid rgba(243,242,246,.12); backdrop-filter: none; }
.era__item:first-child { border-left: 0; padding-left: 0; }
.era__item::after { top: -1px; height: 1px; }
.era__no { font-family: var(--f-mono); font-weight: 300; font-size: 13px; letter-spacing: .3em; background: none; -webkit-text-fill-color: var(--pink); color: var(--pink); }
.era__item h3 { margin-top: 56px; font-weight: 200; font-size: clamp(26px, 2.3vw, 36px); letter-spacing: .08em; }
.era__item p { font-size: 14px; color: rgba(243,242,246,.66); }
/* Support：左に見出し、右に手順の行 */
.support__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 6vw; padding: 0 var(--pad); align-items: start; }
.support__head { position: sticky; top: 16vh; padding: 0; margin: 0; }
.support .sec-head { padding: 0; }
.steps { list-style: none; border-top: 1px solid rgba(243,242,246,.18); }
.steps__row { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 24px; padding: 38px 0 40px; border-bottom: 1px solid rgba(243,242,246,.18); }
.steps__row::before { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--hl); transition: width 1s cubic-bezier(.2,.7,.1,1) .2s; }
.steps__row.is-in::before { width: 100%; }
.steps__no { grid-row: span 2; font-family: var(--f-en); font-weight: 100; font-stretch: 110%; font-size: 56px; line-height: .9; color: rgba(243,242,246,.9); }
.steps__row h3 { font-weight: 300; font-size: clamp(22px, 1.9vw, 30px); letter-spacing: .1em; display: flex; align-items: baseline; gap: 16px; }
.steps__row h3 small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .3em; color: var(--pink); font-weight: 300; }
.steps__row p { margin-top: 10px; font-size: 14.5px; color: rgba(243,242,246,.7); line-height: 1.9; }
/* 選ばれる理由：罫線の3列 */
.why { margin-top: 18vh; }
.why__grid { gap: 0; margin-top: 22px; border-top: 1px solid rgba(243,242,246,.18); }
.why__item { padding: 36px 36px 0 0; border-radius: 0; background: none; border: 0; backdrop-filter: none; }
.why__item + .why__item { padding-left: 36px; border-left: 1px solid rgba(243,242,246,.12); }
.why__no { font-family: var(--f-mono); font-size: 12px; letter-spacing: .3em; color: var(--pink); }
.why__item h3 { margin-top: 18px; font-weight: 300; font-size: 24px; }
.why__item p { color: rgba(243,242,246,.68); font-size: 14px; }
/* サービス一覧もシャープに */
.svc__in { border-radius: 4px; }
.svc-filter button { border-radius: 2px; padding: 7px 16px; font-size: 13px; }
.svc-grid { gap: 26px 20px; }
.svc__body { padding: 18px 2px 8px; background: none; }
.svc__in { background: none; border: 0; backdrop-filter: none; }
.svc__vis { border-radius: 4px; }
.svc--ai .svc__in { border: 0; }
.svc__in:hover { box-shadow: none; }
.svc__in:hover .svc__vis { box-shadow: 0 0 0 1px rgba(255,91,176,.8); }
@media (max-width: 900px) {
  .era__item, .era__item:first-child { border-left: 0; border-top: 1px solid rgba(243,242,246,.12); padding: 30px 0; }
  .era__item h3 { margin-top: 18px; }
  .support__grid { grid-template-columns: 1fr; }
  .support__head { position: static; }
  .steps__row { grid-template-columns: 56px minmax(0, 1fr); } .steps__no { font-size: 40px; }
  .why__item, .why__item + .why__item { padding: 28px 0; border-left: 0; border-bottom: 1px solid rgba(243,242,246,.12); }
}

/* ===== スマホ最適化 ===== */
.hdr__menu, .drawer { display: none; }
@media (max-width: 900px) {
  .hdr { gap: 12px; padding: 14px 16px; }
  .hdr .btn--sm { padding: 8px 14px; font-size: 12px; }
  .hdr__menu { display: block; position: relative; width: 40px; height: 40px; border: 1px solid rgba(243,242,246,.3); border-radius: 50%; background: rgba(3,3,5,.4); }
  .hdr__menu i { position: absolute; left: 11px; right: 11px; height: 1px; background: var(--ink); transition: transform .4s, top .4s; }
  .hdr__menu i:first-child { top: 16px; } .hdr__menu i:last-child { top: 23px; }
  .menu-open .hdr__menu i:first-child { top: 19.5px; transform: rotate(45deg); } .menu-open .hdr__menu i:last-child { top: 19.5px; transform: rotate(-45deg); }
  .drawer { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 75; padding: 96px 24px 40px; background: rgba(3,3,5,.96); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
  .menu-open .drawer { opacity: 1; visibility: visible; }
  .drawer a:not(.btn) { display: grid; grid-template-columns: 36px 1fr; padding: 18px 0; border-bottom: 1px solid rgba(243,242,246,.14); font-family: var(--f-en); font-weight: 200; font-size: 30px; line-height: 1.2; transform: translateY(16px); opacity: 0; transition: transform .6s, opacity .6s; }
  .menu-open .drawer a { transform: none; opacity: 1; }
  .drawer a small { grid-row: span 2; font-family: var(--f-mono); font-size: 11px; color: var(--pink); padding-top: 8px; }
  .drawer a span { font-family: var(--f-jp); font-size: 12px; color: var(--gray); letter-spacing: .08em; }
  .drawer__tel { margin-top: 32px; }
  .menu-open { overflow: hidden; }
  .scene-tag { display: none; }
  .hero__label { margin-top: 30vh; }
  /* 本文の後ろに薄い影をしいて、背景の粒子と重なっても読めるように */
  .sec-head, .steps, .era__grid, .why, .manifesto__sub, .numbers__row, .philo, .contact { text-shadow: 0 0 12px rgba(3,3,5,.9), 0 0 2px rgba(3,3,5,.9); }
  .sec-sub, .steps__row p, .era__item p, .why__item p { font-size: 14px; color: rgba(243,242,246,.82); }
  .svc__cat, .svc__name small { font-size: 11px; }
  .svc-filter { gap: 8px; } .svc-filter button { padding: 9px 14px; }
}

/* ===== MV強化：切り替わる動詞・部位からのサービス表示・流れる帯 ===== */
.hero__title .verb { display: inline-block; }
.hero__title .verb.in { animation: verbIn .9s cubic-bezier(.2,.7,.1,1) both; }
@keyframes verbIn { 0% { opacity: 0; transform: translateY(45%); filter: blur(12px); letter-spacing: .12em; } 100% { opacity: 1; transform: none; filter: none; } }
.mv-call { position: absolute; z-index: 3; right: 6vw; top: 22vh; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border: 1px solid rgba(255,140,200,.45); background: rgba(6,4,10,.72); backdrop-filter: blur(8px); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; pointer-events: none; }
.mv-call.on { opacity: 1; transform: none; transition-delay: .45s; }
.mv-call__logo { display: flex; align-items: center; justify-content: center; width: 120px; height: 46px; padding: 6px 12px; background: #fff; }
.mv-call__logo img { max-width: 100%; max-height: 34px; object-fit: contain; }
.mv-call__txt small { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em; color: var(--pink); }
.mv-call__txt b { display: block; margin-top: 3px; font-weight: 300; font-size: 15px; letter-spacing: .06em; white-space: nowrap; }
.mv-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; border-top: 1px solid rgba(243,242,246,.1); padding: 12px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mv-ticker__track { display: flex; width: max-content; animation: mvq 50s linear infinite; }
.mv-ticker span { padding: 0 26px; font-size: 12px; letter-spacing: .2em; color: rgba(243,242,246,.55); white-space: nowrap; }
.mv-ticker span::before { content: '+'; margin-right: 26px; color: var(--pink); }
.hero .hud { bottom: 64px; }
@keyframes mvq { to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .mv-call { right: auto; left: 16px; top: 29vh; padding: 6px 12px 6px 6px; gap: 10px; }
  .mv-call__logo { width: 84px; height: 34px; } .mv-call__logo img { max-height: 24px; }
  .mv-call__txt b { font-size: 12px; } .mv-call__txt small { font-size: 9px; }
  .hero__label { display: none; }
  .mv-ticker span { font-size: 11px; padding: 0 16px; } .mv-ticker span::before { margin-right: 16px; }
}

/* ===== トップへ戻るボタン ===== */
.totop { position: fixed; right: 162px; bottom: 26px; z-index: 65; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(243,242,246,.35); background: rgba(3,3,5,.6); backdrop-filter: blur(8px); color: var(--ink); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .4s, transform .4s, border-color .3s, background .3s; }
.totop.on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { border-color: var(--pink); background: rgba(228,0,127,.22); }
.totop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .3s; }
.totop:hover svg { transform: translateY(-3px); }
.totop span { font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em; }
.ai-staff { z-index: 66; }
.menu-open .ai-staff, .menu-open .totop { opacity: 0; pointer-events: none; }
@media (max-width: 560px) { .totop { right: 92px; bottom: 22px; width: 48px; height: 48px; } }
@media (max-width: 900px) { .mv-ticker { right: 0; } }

/* ===== ニュース（トップ・一覧共通）／フッター／チャット誘導 ===== */
.news { padding: 16vh 0 10vh; }
.news__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 6vw; padding: 0 var(--pad); align-items: start; }
.news__head .btn { margin-top: 30px; }
.nlist { list-style: none; border-top: 1px solid rgba(243,242,246,.18); min-height: 120px; }
.nlist.is-loading { opacity: .4; }
.nitem { border-bottom: 1px solid rgba(243,242,246,.12); opacity: 0; transform: translateY(12px); transition: opacity .6s, transform .6s; }
.nitem.is-in { opacity: 1; transform: none; }
.nitem a { position: relative; display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; column-gap: 16px; padding: 24px 8px; transition: background .3s, padding .3s; }
.nitem a:hover { background: rgba(228,0,127,.08); padding-left: 16px; }
.nitem time { font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; color: var(--gray); }
.ncat { font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; padding: 3px 8px; border: 1px solid rgba(255,91,176,.6); color: var(--pink); }
.nnew { font-family: var(--f-mono); font-size: 10px; letter-spacing: .15em; padding: 3px 7px; background: var(--hl); color: #fff; }
.nttl { grid-column: 4; font-size: 15px; line-height: 1.7; letter-spacing: .04em; }
.nitem:not(:has(.nnew)) .nttl { grid-column: 3 / 5; }
.nitem i { font-style: normal; color: var(--pink); transition: transform .3s; } .nitem a:hover i { transform: translateX(4px); }
.nempty { padding: 30px 0; color: var(--gray); }
.contact__note { max-width: 640px; margin: 28px auto 0; font-size: 13.5px; line-height: 1.95; color: var(--gray); }
.ftr { flex-direction: column; align-items: stretch; gap: 30px; padding: 70px var(--pad) 40px; position: relative; z-index: 1; background: rgba(3,3,5,.82); }
.ftr__top { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.ftr__logo { margin-right: auto; }
.ftr__nav { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 13px; letter-spacing: .08em; color: rgba(243,242,246,.8); }
.ftr__nav a:hover { color: var(--pink); }
.ftr__info { font-size: 13px; line-height: 2; color: var(--gray); }
.ftr__info b { color: var(--ink); font-weight: 400; }
.ftr__info a, .ftr__info button { color: var(--pink); background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.hdr .btn--sm { border: 0; cursor: pointer; font-family: var(--f-jp); }
.drawer__tel2 { margin-top: 12px; }
button.btn { border: 0; cursor: pointer; font-family: var(--f-jp); }
button.btn--ghost { border: 1px solid rgba(243,242,246,.4); }
@media (max-width: 900px) {
  .news__grid { grid-template-columns: 1fr; gap: 5vh; }
  .nitem a { grid-template-columns: auto auto 1fr auto; row-gap: 6px; padding: 18px 4px; }
  .nitem .nnew { grid-column: 3; justify-self: start; }
  .nttl, .nitem:not(:has(.nnew)) .nttl { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
  .nitem i { grid-column: 4; grid-row: 1; }
}

/* ===== 採用（AIビルダー募集） ===== */
.recruit { padding: 16vh 0 10vh; }
.recruit__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 6vw; padding: 0 var(--pad); align-items: start; }
.recruit__head .big-en { font-size: clamp(56px, 7.5vw, 140px); }
.recruit__lead { font-size: clamp(15px, 1.2vw, 18px); line-height: 2.1; letter-spacing: .05em; color: rgba(243,242,246,.88); }
.recruit__list { list-style: none; margin-top: 36px; border-top: 1px solid rgba(243,242,246,.18); }
.recruit__list li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; padding: 24px 0 26px; border-bottom: 1px solid rgba(243,242,246,.12); }
.recruit__list span { grid-row: span 2; font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; color: var(--pink); padding-top: 4px; }
.recruit__list b { font-weight: 300; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: .08em; }
.recruit__list p { margin-top: 8px; font-size: 14px; line-height: 1.95; color: rgba(243,242,246,.72); }
.recruit__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
@media (max-width: 900px) { .recruit__grid { grid-template-columns: 1fr; gap: 4vh; } .recruit__list li { grid-template-columns: 40px 1fr; } }

/* ===== 日本語の改行を文節単位に（スマホで「か／ら、」のように切れないように） ===== */
h1, h2, h3, .sec-title, .big-en, .manifesto__words, .contact__title, .philo__l1, .philo__l2, .pcta__title, .rcb__title, .psec__title, .biz__jp, .aib__jp,
.sec-sub, .contact__sub, .phero .sec-sub, .era__item p, .steps__row p, .why__item p, .svc__catch, .svc__desc, .recruit__lead, .recruit__list p, .aib__lead, .aib__offers p, .biz__lead, .hero__lead, .manifesto__sub, .num span, .contact__note, .nttl, .msg p, .obz p, .grp span, .dl dd {
  word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere;
}
h1, h2, h3, .sec-title, .contact__title, .pcta__title, .rcb__title, .psec__title, .aib__jp, .biz__jp, .svc__catch { text-wrap: balance; }
.sec-sub, .era__item p, .steps__row p, .why__item p, .svc__desc, .recruit__lead, .aib__lead, .biz__lead, .manifesto__sub, .contact__note, .msg p { text-wrap: pretty; }
@media (max-width: 900px) {
  .sec-title { font-size: clamp(20px, 5.9vw, 30px); letter-spacing: .02em; }
  .sec-title { text-wrap: wrap; }
  .contact__title, .pcta__title { font-size: clamp(24px, 7vw, 34px); letter-spacing: .04em; }
  .philo__l1, .philo__l2 { font-size: clamp(30px, 10vw, 44px); letter-spacing: .06em; }
  .manifesto__words { font-size: clamp(36px, 12vw, 56px); }
  .recruit__head .big-en, .big-en { letter-spacing: -.01em; }
  .sec-sub, .era__item p, .steps__row p, .why__item p, .recruit__lead, .aib__lead { letter-spacing: .02em; }
  .recruit__lead br, .aib__lead br, .pcta .sec-sub br { display: none; }
}

/* ===== マニフェスト：行のまとまりを固定・句読点の余白を詰める ===== */
.manifesto__words .wl { display: inline-flex; flex-wrap: nowrap; column-gap: .25em; }
.manifesto__words, .sec-title, .contact__title, .pcta__title, .philo__l1, .philo__l2, .psec__title, .aib__jp, .biz__jp, .rcb__title { font-feature-settings: "palt"; }
.nb { display: inline-block; }
@media (max-width: 900px) {
  .manifesto__words { flex-direction: column; align-items: center; row-gap: .15em; column-gap: 0; font-size: clamp(30px, 9.6vw, 48px); letter-spacing: .04em; line-height: 1.3; }
  .manifesto__words .wl { column-gap: .1em; }
  .manifesto__sub { font-size: 14px; letter-spacing: .08em; line-height: 2; }
}
.hdr .btn--sm { white-space: nowrap; }
@media (max-width: 380px) { .hdr { gap: 8px; } .hdr .btn--sm { padding: 7px 11px; font-size: 11px; } .hdr__type { height: 15px; } .hdr__mark { height: 24px; } .hdr__menu { width: 36px; height: 36px; } .hdr__menu i { left: 9px; right: 9px; } .hdr__menu i:first-child { top: 14px; } .hdr__menu i:last-child { top: 21px; } .menu-open .hdr__menu i:first-child, .menu-open .hdr__menu i:last-child { top: 17.5px; } }
.news__body .ntabs { display: flex; margin-bottom: 0; border-bottom: 0; }
.news__body .ntabs button { padding: 12px 22px 12px 0; margin-right: 22px; background: none; border: 0; color: var(--gray); font: 300 15px var(--f-jp); letter-spacing: .14em; cursor: pointer; position: relative; }
.news__body .ntabs button.is-on { color: var(--ink); }
.news__body .ntabs button.is-on::after { content: ''; position: absolute; left: 0; right: 22px; bottom: -1px; height: 1px; background: var(--hl); }
.ncat { white-space: nowrap; }

/* サービス一覧：カテゴリの見出し（社内ボードと同じカテゴリ・並び順） */
.svc-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 16px; margin-top: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(243,242,246,.18); }
.svc-head:first-child { margin-top: 0; }
.svc-head.is-hide { display: none; }
.svc-head__no { font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; color: var(--pink); }
.svc-head__name { font-weight: 300; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: .1em; }
.svc-head__n { margin-left: auto; font-family: var(--f-mono); font-size: 10px; letter-spacing: .25em; color: var(--gray); }
@media (max-width: 900px) { .svc-head { margin-top: 22px; } .svc-head__name { font-size: 16px; } }
.svc__cat { display: none; }

/* MVの会社説明文（1行目の「」はキャッチコピー） */
.hero__lead { max-width: 33em; text-wrap: pretty; }
.hero__catch { display: block; margin-bottom: 12px; font-size: clamp(16px, 1.35vw, 21px); font-weight: 300; letter-spacing: .1em; color: var(--ink); }
@media (max-width: 900px) {
  .hero__sub { display: none; }
  .hero__lead { margin-top: 18px; font-size: 13px; line-height: 1.95; letter-spacing: .06em; }
  .hero__catch { font-size: 15px; letter-spacing: .04em; margin-bottom: 8px; }
  .mv-call { top: 20vh; }
  .hero__cta { margin-top: 24px; }
}
/* 縦の短いPC画面（ノートPCなど）では、見出しを高さに合わせて小さく */
@media (min-width: 901px) and (max-height: 860px) {
  .hero__title { font-size: min(9.2vw, 15.5vh); }
  .hero__label { margin-bottom: 14px; }
  .hero__lead { margin-top: 18px; line-height: 1.95; }
  .hero__cta { margin-top: 24px; }
  .hero { padding-top: 40px; }
}
.hero__lead, .phero .sec-sub { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }