/* ==========================================================================
   CrossPiece — home (index.html) page styles
   Values carried over verbatim from the retired inline styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   keyframes
   -------------------------------------------------------------------------- */
@keyframes cpSprout{0%{transform:translate(0px,0px) rotate(var(--r,0deg)) scale(0);opacity:0}3%{opacity:1}14%{transform:translate(var(--bx,0px),var(--by,0px)) rotate(var(--r,0deg)) scale(.85)}27%{transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--r,0deg)) scale(1.15)}34%{transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--r,0deg)) scale(1)}82%{transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--r,0deg)) scale(1);opacity:1}93%{transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--r,0deg)) scale(.2);opacity:0}100%{transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--r,0deg)) scale(.2);opacity:0}}
@keyframes cpVein{0%{transform:rotate(var(--a,0deg)) scaleX(0);opacity:0}26%{transform:rotate(var(--a,0deg)) scaleX(0);opacity:0}30%{opacity:.55}44%{transform:rotate(var(--a,0deg)) scaleX(1);opacity:.45}80%{transform:rotate(var(--a,0deg)) scaleX(1);opacity:.45}90%{transform:rotate(var(--a,0deg)) scaleX(1);opacity:0}100%{transform:rotate(var(--a,0deg)) scaleX(1);opacity:0}}
@keyframes cpRipple{0%{transform:scale(.08);opacity:0}6%{opacity:.7}70%{opacity:.12}100%{transform:scale(1);opacity:0}}
@keyframes cpCore{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@keyframes cpBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes cpSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes cpMarkA{0%,100%{transform:translate(0,0)}50%{transform:translate(-.32px,.22px)}}
@keyframes cpMarkB{0%,100%{transform:translate(0,0)}50%{transform:translate(.32px,-.22px)}}
@keyframes cpBand{0%,100%{transform:translateX(-3.5%)}50%{transform:translateX(3.5%)}}
@keyframes cpGlowA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-48px,36px) scale(1.09)}}
@keyframes cpGlowB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(54px,-30px) scale(1.06)}}
@keyframes cpTrace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes cpFillIn{from{fill-opacity:0}to{fill-opacity:1}}
@keyframes cpDot{0%{left:calc(2.86% - 4.5px);opacity:0}3%{opacity:1}10%{left:calc(2.86% - 4.5px)}22%{left:calc(34.29% - 4.5px)}34%{left:calc(34.29% - 4.5px)}46%{left:calc(65.71% - 4.5px)}58%{left:calc(65.71% - 4.5px)}70%{left:calc(97.14% - 4.5px)}88%{left:calc(97.14% - 4.5px);opacity:1}94%{left:calc(97.14% - 4.5px);opacity:0}100%{left:calc(97.14% - 4.5px);opacity:0}}
@keyframes cpNodeFlash{0%{background:#1B2B4D;border-color:#46598C;transform:scale(1)}3%{background:#BE2E96;border-color:#BE2E96;transform:scale(1.35)}10%{background:#BE2E96;border-color:#BE2E96;transform:scale(1.15)}16%{background:#1B2B4D;border-color:#46598C;transform:scale(1)}100%{background:#1B2B4D;border-color:#46598C;transform:scale(1)}}
@keyframes cpNodeRing{0%{transform:scale(.2);opacity:0}2%{opacity:.7}55%{transform:scale(1);opacity:0}100%{transform:scale(1);opacity:0}}

/* --------------------------------------------------------------------------
   loader + pre-cover
   -------------------------------------------------------------------------- */
.cp-precover { position: fixed; inset: 0; z-index: 99; background: #F3F5FC; pointer-events: none; }
.cp-loader { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
html.cp-fading .cp-loader { pointer-events: none; }
html.cp-seen .cp-loader,
html.cp-seen .cp-precover { display: none; }
.cp-loader__iris-cover { position: absolute; inset: 0; background: #F3F5FC; }
.cp-loader__iris-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 0; height: 0; border: 1px solid rgba(190,46,150,.85); border-radius: 999px; opacity: .9; pointer-events: none; }
.cp-loader__panel { position: absolute; top: 0; bottom: 0; background: #F3F5FC; box-shadow: 0 1px 0 0 #BE2E96; transform: translateY(0); opacity: 1; display: none; }
.cp-loader__panel--main { left: clamp(72px,min(16vw, 230.4px),256px); right: 0; transition: opacity .5s cubic-bezier(.22,.61,.36,1) 0s; }
.cp-loader__panel--side { left: 0; width: clamp(72px,min(16vw, 230.4px),256px); transition: opacity .5s cubic-bezier(.22,.61,.36,1) .22s; }
.cp-loader__symbol { position: relative; display: flex; flex-direction: column; align-items: center; gap: 27px; opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.22,.61,.36,1) .05s, transform .75s cubic-bezier(.22,.61,.36,1) .05s; }
html.cp-fading .cp-loader__symbol { opacity: 0; transform: translateY(-27px); }
.cp-loader__mark { display: block; width: 105px; height: auto; overflow: visible; }
.cp-loader__mark-path--1 { animation: cpTrace 1.05s cubic-bezier(.22,.61,.36,1) .15s both, cpFillIn .6s cubic-bezier(.22,.61,.36,1) 1.5s both; }
.cp-loader__mark-path--2 { animation: cpTrace 1.05s cubic-bezier(.22,.61,.36,1) .6s both, cpFillIn .6s cubic-bezier(.22,.61,.36,1) 1.65s both; }
.cp-loader__core { width: 7px; height: 7px; border-radius: 999px; background: #BE2E96; animation: cpCore 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  /* reduced motion swaps the iris reveal for fading side panels */
  .cp-loader__iris-cover, .cp-loader__iris-ring { display: none; }
  .cp-loader__panel { display: block; }
  html.cp-fading .cp-loader__panel { opacity: 0; }
}

/* --------------------------------------------------------------------------
   shared section geometry on this page
   -------------------------------------------------------------------------- */
.cp-section__rail { padding: clamp(84px,min(11.5vw, 165.6px),156px) clamp(14px,min(1.8vw, 25.92px),26px) 48px 12px; }
.cp-section__body { min-width: 0; max-width: 1120px; padding: clamp(80px,min(11vw, 158.4px),152px) clamp(24px,min(5vw, 72px),88px) clamp(88px,min(12vw, 172.8px),160px) clamp(28px,min(4.5vw, 64.8px),68px); }

/* --------------------------------------------------------------------------
   hero
   -------------------------------------------------------------------------- */
.cp-hero { background: #F3F5FC; overflow: hidden; }
.cp-hero__bg { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(178deg,#EAF1FE 0%,#F1F4FC 46%,#F3F5FC 72%); }
.cp-hero__glow-a { position: absolute; top: -22%; right: -14%; width: min(64vw, 921.6px); height: min(64vw, 921.6px); max-width: 980px; max-height: 980px; border-radius: 999px; background: radial-gradient(circle at 42% 46%,rgba(126,164,228,.30),rgba(126,164,228,.10) 46%,transparent 68%); filter: blur(24px); animation: cpGlowA 26s ease-in-out infinite; }
.cp-hero__glow-b { position: absolute; top: 16%; left: -12%; width: min(52vw, 748.8px); height: min(52vw, 748.8px); max-width: 820px; max-height: 820px; border-radius: 999px; background: radial-gradient(circle at 55% 45%,rgba(255,255,255,.95),rgba(255,255,255,.45) 48%,transparent 70%); filter: blur(20px); animation: cpGlowB 32s ease-in-out infinite; }
.cp-hero__glow-c { position: absolute; bottom: -10%; right: 22%; width: min(36vw, 518.4px); height: min(36vw, 518.4px); max-width: 560px; max-height: 560px; border-radius: 999px; background: radial-gradient(circle at 50% 50%,rgba(190,46,150,.10),rgba(190,46,150,.035) 50%,transparent 70%); filter: blur(26px); animation: cpGlowA 38s ease-in-out -12s infinite; }
.cp-hero__bg-fade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 62%,#F3F5FC 96%); }
.cp-hero__motif-slot { position: absolute; top: clamp(120px,16vh,176px); right: clamp(12px,min(4vw, 57.6px),84px); z-index: 0; pointer-events: none; }
.cp-hero__rail { position: relative; z-index: 1; padding: calc(36px + 90px + 33px) 0 48px; }
.cp-hero__rail-inner { display: flex; justify-content: center; margin-left: clamp(24px,min(5vw, 72px),72px); width: 74.6px; }
.cp-hero__tagline { writing-mode: vertical-rl; font: 600 12.5px/1 'Noto Sans JP',sans-serif; letter-spacing: .24em; color: #243A66; pointer-events: none; }
.cp-hero__main { min-width: 0; position: relative; z-index: 1; min-height: 92vh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(140px,19vh,208px) clamp(24px,min(5vw, 72px),88px) clamp(36px,5vh,56px) clamp(28px,min(4.5vw, 64.8px),68px); max-width: 1180px; }
.cp-hero__eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(28px,min(4vw, 57.6px),44px); }
.cp-hero__eyebrow { font: 700 12px/1 'Urbanist',sans-serif; letter-spacing: .26em; color: #BE2E96; }
.cp-hero__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: clamp(32px,min(5.4vw, 77.76px),72px); line-height: 1.22; letter-spacing: .02em; color: #1B2B4D; margin: 0 0 clamp(28px,min(4vw, 57.6px),44px); }
.cp-hero__title-row { display: block; }
.cp-hero__title-row--indent { padding-left: clamp(44px,min(7vw, 100.8px),124px); }
.cp-hero__line-wrap { position: relative; display: inline-block; }
.cp-hero__line { display: inline-block; clip-path: inset(-12% 100% -12% 0); }
html.cp-loaded .cp-hero__line--1 { clip-path: inset(-12% -3% -12% 0); transition: clip-path .95s cubic-bezier(.22,.61,.36,1) .15s; }
html.cp-loaded .cp-hero__line--2 { clip-path: inset(-12% -3% -12% 0); transition: clip-path .95s cubic-bezier(.22,.61,.36,1) .4s; }
.cp-hero__piece { position: absolute; top: 50%; margin-top: -0.065em; width: 0.13em; height: 0.13em; background: #BE2E96; left: -0.22em; opacity: 1; }
html.cp-loaded .cp-hero__piece--1 { left: calc(100% + 0.08em); opacity: 0; transition: left .95s cubic-bezier(.22,.61,.36,1) .15s, opacity .32s linear 1.1s; }
html.cp-loaded .cp-hero__piece--2 { left: calc(100% + 0.08em); opacity: 0; transition: left .95s cubic-bezier(.22,.61,.36,1) .4s, opacity .32s linear 1.35s; }
@media (prefers-reduced-motion: reduce) {
  .cp-hero__line,
  html.cp-loaded .cp-hero__line--1,
  html.cp-loaded .cp-hero__line--2 { clip-path: none; transition: none; }
  .cp-hero__piece { display: none; }
  .cp-hero__bg * { animation: none !important; }
}
.cp-hero__lead { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: clamp(15px,min(1.4vw, 20.16px),17px); line-height: 2.05; letter-spacing: .02em; color: #3a3f45; max-width: 600px; margin: 0 0 clamp(32px,min(4vw, 57.6px),44px); }
.cp-hero__cta { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 27px 0 24px; border-radius: 999px; background: #BE2E96; color: #fff; font: 600 14.5px/1 'Noto Sans JP',sans-serif; text-decoration: none; letter-spacing: .02em; }
.cp-hero__meta { position: relative; border-top: 1px solid #cfd6e2; margin-left: calc(clamp(28px,min(4.5vw, 64.8px),68px) * -1); padding: clamp(20px,min(2.4vw, 34.56px),30px) 0 0 clamp(28px,min(4.5vw, 64.8px),68px); margin-top: clamp(40px,6vh,64px); }
.cp-hero__meta-list { display: flex; align-items: center; gap: clamp(20px,min(4vw, 57.6px),56px); flex-wrap: wrap; }
.cp-hero__meta-item { display: flex; flex-direction: column; gap: 6px; }
.cp-hero__meta-v { font: 700 13px/1 'Urbanist',sans-serif; letter-spacing: .04em; color: #1C1F26; }
.cp-hero__meta-k { font: 600 10px/1 'Urbanist',sans-serif; letter-spacing: .16em; color: #9aa0a6; }

/* hero motif */
.cp-hero-motif { position: relative; width: 540px; height: 540px; }
.cp-hero-motif__axis-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #cfd6e2; transform: scaleY(0); transition: transform .95s cubic-bezier(.22,.61,.36,1) .2s; }
.cp-hero-motif.is-on .cp-hero-motif__axis-v { transform: scaleY(1); }
.cp-hero-motif__axis-h { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #cfd6e2; transform: scaleX(0); transition: transform .95s cubic-bezier(.22,.61,.36,1) .2s; }
.cp-hero-motif.is-on .cp-hero-motif__axis-h { transform: scaleX(1); }
.cp-hero-motif__bloom { position: absolute; inset: 0; opacity: 0; transform: scale(.12); transition: transform 1.2s cubic-bezier(.22,.61,.36,1) .35s, opacity .6s cubic-bezier(.22,.61,.36,1) .35s; }
.cp-hero-motif.is-on .cp-hero-motif__bloom { opacity: 1; transform: scale(1); }
.cp-hero-motif__ripple { position: absolute; inset: 90px; border-radius: 999px; border: 1px solid rgba(190,46,150,.4); transform: scale(.08); opacity: 0; animation: cpRipple 9s cubic-bezier(.22,.61,.36,1) infinite; }
.cp-hero-motif__spin { position: absolute; inset: 0; animation: cpSpin 150s linear infinite; }
.cp-hero-motif__breathe { position: absolute; inset: 0; animation: cpBreathe 9s ease-in-out infinite; }
.cp-hero-motif__vein { position: absolute; height: 1px; background: rgba(36,58,102,.5); transform-origin: left center; opacity: .3; animation: cpVein 15s cubic-bezier(.22,.61,.36,1) infinite; }
.cp-hero-motif__piece { position: absolute; left: 50%; top: 50%; animation: cpSprout 15s cubic-bezier(.22,.61,.36,1) infinite; }
.cp-hero-motif__piece--sq-magenta { background: #BE2E96; border-radius: 2px; }
.cp-hero-motif__piece--sq-outline { border: 1px solid rgba(36,58,102,.65); border-radius: 2px; box-sizing: border-box; }
.cp-hero-motif__piece--sq-navy { background: #243A66; border-radius: 2px; }
.cp-hero-motif__piece--dot { background: #BE2E96; border-radius: 999px; }
.cp-hero-motif__core-wrap { position: absolute; left: 50%; top: 50%; transform: scale(0); transition: transform .5s cubic-bezier(.22,.61,.36,1) .05s; }
.cp-hero-motif.is-on .cp-hero-motif__core-wrap { transform: scale(1); }
.cp-hero-motif__core { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 999px; background: #BE2E96; box-shadow: 0 0 18px rgba(190,46,150,.45); animation: cpCore 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .cp-hero-motif__axis-v { transform: scaleY(1); transition: none; }
  .cp-hero-motif__axis-h { transform: scaleX(1); transition: none; }
  .cp-hero-motif__bloom { opacity: 1; transform: scale(1); transition: none; }
  .cp-hero-motif__core-wrap { transform: scale(1); transition: none; }
}

/* --------------------------------------------------------------------------
   service
   -------------------------------------------------------------------------- */
.cp-service { background: #fff; scroll-margin-top: 96px; border-top: 1px solid #cfd6e2; }
.cp-service__head { max-width: 620px; margin-bottom: clamp(44px,min(6vw, 86.4px),72px); }
.cp-service__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(26px,min(3.8vw, 54.72px),44px); line-height: 1.34; letter-spacing: .01em; color: #1B2B4D; margin: 0 0 20px; }
.cp-service__lead { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 15px; line-height: 2; color: #6B7178; margin: 0; }
.cp-service__list { border-top: 1px solid #cfd6e2; }
.cp-service__row { display: grid; grid-template-columns: minmax(280px,1.3fr) minmax(240px,1.6fr) auto; gap: clamp(20px,min(3.5vw, 50.4px),56px); align-items: baseline; border-bottom: 1px solid #cfd6e2; padding: clamp(30px,min(4.4vw, 63.36px),54px) clamp(10px,min(1.5vw, 21.6px),20px); }
.cp-service__name-cell { display: grid; grid-template-columns: auto 1fr; gap: clamp(14px,min(1.6vw, 23.04px),20px); align-items: baseline; }
.cp-service__pin { width: 9px; height: 9px; background: #BE2E96; border-radius: 2px; transform: translateY(-1px); }
.cp-service__name { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(19px,min(2.4vw, 34.56px),28px); line-height: 1.45; color: #1B2B4D; margin: 0 0 8px; }
.cp-service__name--muted { color: #6B7178; }
.cp-service__en { font: 600 11px/1 'Urbanist',sans-serif; letter-spacing: .18em; color: #9aa0a6; }
.cp-service__desc { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 14.5px; line-height: 1.95; color: #3a3f45; margin: 0; max-width: 460px; }
.cp-service__desc--muted { color: #6B7178; }
.cp-service__arrow { font: 700 18px/1 'Urbanist',sans-serif; color: #c3ccdd; }
.cp-service__arrow--plus { font-weight: 300; }

/* --------------------------------------------------------------------------
   ai / automation
   -------------------------------------------------------------------------- */
.cp-ai { background: #fff; scroll-margin-top: 96px; border-top: 1px solid #cfd6e2; }
.cp-ai__dark { position: absolute; inset: 0; background: #1B2B4D; pointer-events: none; overflow: hidden; }
.cp-ai__dark-mask { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(115% 105% at 78% 0%,#000 32%,transparent 80%); mask-image: radial-gradient(115% 105% at 78% 0%,#000 32%,transparent 80%); }
.cp-ai__grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 27px), repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 27px); -webkit-mask-image: linear-gradient(225deg,#000 38%,transparent 62%); mask-image: linear-gradient(225deg,#000 38%,transparent 62%); -webkit-mask-size: 300% 300%; mask-size: 300% 300%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0% 100%; mask-position: 0% 100%; transition: -webkit-mask-position 2.2s cubic-bezier(.22,.61,.36,1), mask-position 2.2s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .cp-ai__grid { transition: none !important; -webkit-mask-position: 100% 0% !important; mask-position: 100% 0% !important; }
}
.cp-ai__spine { background: #3B5185; }
.cp-ai .cp-section__num { color: #46598C; }
.cp-ai .cp-section__label { color: #6B7178; }
.cp-ai__head { display: flex; align-items: center; justify-content: space-between; gap: clamp(32px,min(5vw, 72px),64px); flex-wrap: wrap; margin-bottom: clamp(44px,min(6vw, 86.4px),72px); }
.cp-ai__intro { max-width: 620px; }
.cp-ai__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(26px,min(3.8vw, 54.72px),44px); line-height: 1.34; letter-spacing: .01em; color: #fff; margin: 0 0 20px; }
.cp-ai__lead { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 15.5px; line-height: 2.05; color: #b8bdc6; margin: 0; }
.cp-ai__motif-slot { flex: 1 1 280px; min-width: 0; max-width: 420px; padding-right: clamp(0px,min(2vw, 28.8px),24px); }
.cp-ai__cols { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: clamp(32px,min(5vw, 72px),72px); align-items: start; }
.cp-ai__col-label { font: 600 11px/1 'Urbanist',sans-serif; letter-spacing: .2em; color: #6B7178; margin-bottom: 8px; }
.cp-ai__list { border-top: 1px solid #3B5185; }
.cp-ai__flow-row { display: grid; grid-template-columns: clamp(40px,min(5vw, 72px),64px) 1fr; gap: clamp(14px,min(2vw, 28.8px),28px); align-items: baseline; border-bottom: 1px solid #3B5185; padding: clamp(20px,min(2.6vw, 37.44px),30px) 0; }
.cp-ai__flow-num { font: 300 clamp(22px,min(2.6vw, 37.44px),34px)/1 'Urbanist',sans-serif; color: #BE2E96; }
.cp-ai__item-title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(16px,min(1.8vw, 25.92px),19px); line-height: 1.55; color: #fff; margin-bottom: 6px; }
.cp-ai__item-desc { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 13.5px; line-height: 1.85; color: #9aa0a6; }
.cp-ai__more-row { display: flex; gap: 16px; align-items: baseline; border-bottom: 1px solid #3B5185; padding: clamp(20px,min(2.6vw, 37.44px),30px) 0; }
.cp-ai__more-pin { width: 7px; height: 7px; border-radius: 999px; background: #BE2E96; flex: none; transform: translateY(-2px); }

/* ai motif */
.cp-ai-motif { position: relative; width: 100%; max-width: 420px; height: 96px; }
.cp-ai-motif__base { position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: #3B5185; }
.cp-ai-motif__dot { position: absolute; left: calc(2.86% - 4.5px); top: 50%; margin-top: -4.5px; width: 9px; height: 9px; border-radius: 999px; background: #BE2E96; box-shadow: 0 0 12px rgba(190,46,150,.5); opacity: 0; animation: cpDot 8s cubic-bezier(.22,.61,.36,1) infinite; }
.cp-ai-motif__node { position: absolute; top: 50%; margin-top: -4.5px; width: 9px; height: 9px; border-radius: 999px; border: 1px solid #46598C; background: #1B2B4D; box-sizing: border-box; animation: cpNodeFlash 8s cubic-bezier(.22,.61,.36,1) infinite; }
.cp-ai-motif__ring { position: absolute; top: 50%; margin-top: -22.5px; width: 45px; height: 45px; border-radius: 999px; border: 1px solid rgba(190,46,150,.6); transform: scale(.2); opacity: 0; animation: cpNodeRing 8s cubic-bezier(.22,.61,.36,1) infinite; }

/* --------------------------------------------------------------------------
   flow (process timeline)
   -------------------------------------------------------------------------- */
.cp-flow { background: #fff; isolation: isolate; scroll-margin-top: 96px; border-top: 1px solid #cfd6e2; }
.cp-flow__head { max-width: 620px; margin-bottom: clamp(44px,min(6vw, 86.4px),72px); }
.cp-flow__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(26px,min(3.8vw, 54.72px),44px); line-height: 1.34; letter-spacing: .01em; color: #1B2B4D; margin: 0 0 20px; }
.cp-flow__lead { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 15px; line-height: 2; color: #6B7178; margin: 0; }
.cp-flow__diagram { position: relative; }
.cp-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cp-flow__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(20px,min(3vw, 43.2px),40px); }
.cp-flow-step { position: relative; }
.cp-flow-step--2 { margin-top: 36px; }
.cp-flow-step--3 { margin-top: 72px; }
.cp-flow-step--4 { margin-top: 108px; }
.cp-flow-step__dot { position: relative; display: block; width: 7px; height: 7px; }
.cp-flow-step__dot-fill { position: absolute; inset: 0; border-radius: 999px; background: #BE2E96; }
.cp-flow-step__cross { position: absolute; left: -4px; top: -4px; width: 15px; height: 15px; pointer-events: none; }
.cp-flow-step__cross-h { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: #BE2E96; }
.cp-flow-step__cross-v { position: absolute; top: 0; bottom: 0; left: 7px; width: 1px; background: #BE2E96; }
.cp-flow-step__body { margin-top: 24px; }
.cp-flow-step__no { font: 300 clamp(36px,min(5vw, 72px),60px)/1 'Urbanist',sans-serif; color: #c3ccdd; margin-bottom: 20px; transition: color .35s cubic-bezier(.22,.61,.36,1); }
.cp-flow-step:hover .cp-flow-step__no { color: #BE2E96; }
.cp-flow-step__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(17px,min(2vw, 28.8px),20px); line-height: 1.5; color: #1B2B4D; margin: 0 0 10px; }
.cp-flow-step__desc { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 13.5px; line-height: 1.9; color: #6B7178; margin: 0; }
@media (max-width: 900px) {
  .cp-flow__svg { display: none; }
  .cp-flow__grid { display: flex; flex-direction: column; gap: 32px; }
  .cp-flow-step { max-width: 520px; margin-top: 0; }
  .cp-flow-step__dot { display: none; }
  .cp-flow-step__body { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   cases
   -------------------------------------------------------------------------- */
.cp-cases { background: #F3F5FC; isolation: isolate; scroll-margin-top: 96px; border-top: 1px solid #cfd6e2; }
.cp-cases__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cp-cases__bg-sheen { position: absolute; top: 0; bottom: 0; left: -25%; right: -25%; background: linear-gradient(112deg,transparent 36%,rgba(255,255,255,.55) 52%,rgba(126,164,228,.07) 63%,transparent 76%); }
.cp-cases__bg-glow-l { position: absolute; left: -14%; bottom: -32%; width: clamp(360px,min(42vw, 604.8px),700px); aspect-ratio: 1/1; border-radius: 999px; background: radial-gradient(circle,rgba(126,164,228,.11),transparent 62%); }
.cp-cases__bg-glow-r { position: absolute; right: -70px; top: clamp(0px,min(2vw, 28.8px),32px); width: clamp(420px,min(48vw, 691.2px),820px); aspect-ratio: 1/1; border-radius: 999px; background: radial-gradient(circle,rgba(255,255,255,.9),transparent 64%); }
.cp-cases__mark { position: absolute; right: max(-64px,max(-4vw, -57.6px)); top: clamp(10px,min(4.5vw, 64.8px),64px); width: clamp(400px,min(46vw, 662.4px),820px); height: auto; overflow: visible; opacity: .05; }
.cp-cases__mark--echo { transform: translate(16px,14px); }
.cp-cases__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(40px,min(6vw, 86.4px),64px); }
.cp-cases__intro { max-width: 620px; }
.cp-cases__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(26px,min(3.8vw, 54.72px),44px); line-height: 1.34; letter-spacing: .01em; color: #1B2B4D; margin: 0 0 14px; }
.cp-cases__note { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 13.5px; line-height: 1.8; color: #6B7178; margin: 0; }
.cp-cases__list { border-top: 1px solid #cfd6e2; }
.cp-cases__row { position: relative; display: grid; grid-template-columns: clamp(126px,min(18vw, 259.2px),220px) 1fr auto; gap: clamp(18px,min(3vw, 43.2px),44px); align-items: center; border-bottom: 1px solid #cfd6e2; padding: clamp(24px,min(3.4vw, 48.96px),40px) clamp(10px,min(1.5vw, 21.6px),20px); }
.cp-cases__thumb { position: relative; overflow: hidden; border-radius: 6px; border: 1px solid #cfd6e2; background: #F3F5FC; aspect-ratio: 3/2; display: flex; align-items: center; justify-content: center; }
.cp-cases__thumb-mark { position: absolute; right: -7%; bottom: -16%; width: 56%; height: auto; overflow: visible; opacity: .07; }
.cp-cases__thumb-label { position: relative; font: 600 9px/1 'Urbanist',sans-serif; letter-spacing: .24em; color: #9aa0a6; }
.cp-cases__row-body { position: relative; }
.cp-cases__tag-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cp-cases__tag { font: 600 11px/1 'Noto Sans JP',sans-serif; letter-spacing: .04em; color: #BE2E96; }
.cp-cases__item-title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(16px,min(2vw, 28.8px),21px); line-height: 1.55; color: #1B2B4D; margin: 0 0 8px; }
.cp-cases__item-desc { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 13px; line-height: 1.9; color: #6B7178; margin: 0; max-width: 560px; }

/* --------------------------------------------------------------------------
   product
   -------------------------------------------------------------------------- */
.cp-product { background: #fff; scroll-margin-top: 96px; border-top: 1px solid #cfd6e2; }
.cp-product__head { max-width: 100%; margin-bottom: clamp(40px,min(6vw, 86.4px),64px); }
.cp-product__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(26px,min(3.8vw, 54.72px),44px); line-height: 1.34; letter-spacing: .01em; color: #1B2B4D; margin: 0 0 14px; }
.cp-product__lead { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 13.5px; line-height: 1.8; color: #6B7178; margin: 0; }
.cp-product__list { border-top: 1px solid #cfd6e2; }
.cp-product__row { position: relative; display: grid; grid-template-columns: clamp(126px,min(18vw, 259.2px),220px) 1fr auto; gap: clamp(18px,min(3vw, 43.2px),44px); align-items: center; border-bottom: 1px solid #cfd6e2; padding: clamp(24px,min(3.4vw, 48.96px),40px) clamp(10px,min(1.5vw, 21.6px),20px); text-decoration: none; }
.cp-product__thumb { overflow: hidden; border-radius: 6px; }
.cp-product__img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.cp-product__tag-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cp-product__tag { font: 600 11px/1 'Noto Sans JP',sans-serif; letter-spacing: .04em; color: #BE2E96; }
.cp-product__item-title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(16px,min(2vw, 28.8px),21px); line-height: 1.55; color: #1B2B4D; margin: 0 0 8px; }
.cp-product__item-desc { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 13px; line-height: 1.9; color: #6B7178; margin: 0; max-width: 560px; }
.cp-product__row-body { position: relative; }
.cp-product__cta { position: relative; font: 600 11px/1 'Noto Sans JP',sans-serif; letter-spacing: .06em; color: #BE2E96; white-space: nowrap; }

/* --------------------------------------------------------------------------
   company
   -------------------------------------------------------------------------- */
.cp-company { background: #fff; scroll-margin-top: 96px; border-top: 1px solid #cfd6e2; }
.cp-company__body { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: clamp(36px,min(5vw, 72px),80px); align-items: start; }
.cp-company__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(26px,min(3.8vw, 54.72px),44px); line-height: 1.34; letter-spacing: .01em; color: #1B2B4D; margin: 0 0 20px; }
.cp-company__lead { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 14.5px; line-height: 2; color: #6B7178; margin: 0; max-width: 100%; }
.cp-company__photo { display: block; width: min(420px,100%); height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: center; margin-top: clamp(28px,min(4vw, 57.6px),44px); border-radius: 6px; }
.cp-company__table { border-top: 1px solid #cfd6e2; }
.cp-company__row { display: grid; grid-template-columns: clamp(88px,min(11vw, 158.4px),140px) 1fr; gap: clamp(16px,min(3vw, 43.2px),40px); padding: clamp(18px,min(2.2vw, 31.68px),26px) 0; border-bottom: 1px solid #cfd6e2; }
.cp-company__key { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: .08em; color: #9aa0a6; padding-top: 3px; }
.cp-company__val { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 14.5px; line-height: 1.85; color: #1C1F26; white-space: pre-line; }

/* --------------------------------------------------------------------------
   contact cta
   -------------------------------------------------------------------------- */
.cp-cta { background: #F3F5FC; isolation: isolate; scroll-margin-top: 96px; border-top: 1px solid #cfd6e2; }
.cp-cta__band { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cp-cta__band-sheen { position: absolute; top: 0; bottom: 0; left: -25%; right: -25%; background: linear-gradient(112deg,transparent 30%,rgba(126,164,228,.13) 44%,rgba(255,255,255,.9) 55%,rgba(126,164,228,.09) 66%,transparent 80%); animation: cpBand 34s ease-in-out infinite; }
.cp-cta__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(26px,min(3.8vw, 54.72px),44px); line-height: 1.34; letter-spacing: .01em; color: #1B2B4D; margin: 0 0 20px; }
.cp-cta__lead { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 15px; line-height: 2.05; color: #3a3f45; margin: 0; max-width: 100%; }
.cp-cta__actions { display: flex; align-items: center; gap: clamp(24px,min(4vw, 57.6px),48px); flex-wrap: wrap; border-top: 1px solid #cfd6e2; margin-top: clamp(32px,min(4.5vw, 64.8px),52px); padding-top: clamp(30px,min(4vw, 57.6px),44px); }
.cp-cta__btn { display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 30px 0 27px; border-radius: 999px; background: #BE2E96; color: #fff; font: 600 15.5px/1 'Noto Sans JP',sans-serif; text-decoration: none; }
.cp-cta__note { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 12.5px; line-height: 1.9; color: #9aa0a6; }

/* --------------------------------------------------------------------------
   home responsive (page-specific)
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .cp-service__row { grid-template-columns: 1fr; gap: 12px; }
  .cp-service__row .cp-service__arrow { display: none; }
  .cp-cases__row, .cp-product__row { grid-template-columns: 1fr; }
  .cp-product__row .cp-product__cta { display: none; }
  .cp-case-link:hover .cp-case-link__body { transform: none; }
  .cp-case-link .cp-case-link__img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
  .cp-case-link:hover .cp-case-link__img { transform: scale(1.05); }
  .cp-hero__motif-slot { top: clamp(72px,10vh,110px); right: clamp(-24px,-4vw,0px); transform: scale(.5); transform-origin: top right; opacity: .55; }
  .cp-hero__title { font-size: 36px; line-height: 1.35; }
  .cp-hero__title-row--indent { padding-left: clamp(16px,min(5.6vw, 80.64px),44px); }
  .cp-hero__rail { padding: 0; position: static; }
  .cp-hero__rail-inner { width: auto; margin-left: 0; display: contents; }
  .cp-hero__tagline { position: absolute; z-index: 1; top: calc(36px - 9px); left: calc(clamp(24px,min(5vw, 72px),72px) + 52.64px + 32px); height: calc(52.64px * 68 / 56); display: flex; align-items: center; writing-mode: horizontal-tb; font: 600 12px/1.6 'Noto Sans JP',sans-serif; letter-spacing: .08em; white-space: nowrap; color: #243A66; pointer-events: none; }
  .cp-hero__main { padding-top: clamp(188px,26vh,240px); }
}