/* ==========================================================================
   CrossPiece — shared site stylesheet
   Naming: cp- prefix + BEM (block__element--modifier), is- states, cp-u-*
   utilities. Values are carried over verbatim from the previous inline
   styles — do not "clean up" numbers; they are design-authored.
   ========================================================================== */

/* --------------------------------------------------------------------------
   core
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #F3F5FC; -webkit-font-smoothing: antialiased; letter-spacing: .051em; }
::selection { background: #BE2E96; color: #fff; }

.cp-page {
  font-family: 'Urbanist', 'Noto Sans JP', sans-serif;
  color: #1C1F26;
  background: #F3F5FC;
  position: relative;
}

/* --------------------------------------------------------------------------
   component: brandmark SVG (cp-brandmark)
   -------------------------------------------------------------------------- */
.cp-brandmark { display: block; width: 100%; height: auto; overflow: visible; }

/* --------------------------------------------------------------------------
   component: pill buttons (cp-btn)
   --fill: magenta filled, dark ripple / --line: outlined, white ripple
   -------------------------------------------------------------------------- */
.cp-btn { position: relative; overflow: hidden; }
.cp-btn__pin { position: relative; flex: none; width: 6px; height: 6px; pointer-events: none; }
.cp-btn--fill .cp-btn__pin::before { content: ""; position: absolute; left: 50%; top: 50%; width: 840px; height: 840px; margin: -420px 0 0 -420px; border-radius: 999px; background: #1B2B4D; transform: scale(0); transition: transform .85s cubic-bezier(.22,.61,.36,1); }
.cp-btn--fill:hover .cp-btn__pin::before { transform: scale(1); }
.cp-btn--line .cp-btn__pin::before { content: ""; position: absolute; left: 50%; top: 50%; width: 840px; height: 840px; margin: -420px 0 0 -420px; border-radius: 999px; background: #fff; transform: scale(0); transition: transform .75s cubic-bezier(.22,.61,.36,1); }
.cp-btn--line:hover .cp-btn__pin::before { transform: scale(1); }
.cp-btn--fill .cp-btn__pin::after,
.cp-btn--line .cp-btn__pin::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: #fff; }
.cp-btn--line .cp-btn__pin::after { transition: background .25s cubic-bezier(.22,.61,.36,1) .08s; }
.cp-btn--line:hover .cp-btn__pin::after { background: #1C1F26; }
.cp-btn__label { position: relative; }
.cp-btn--line .cp-btn__label { transition: color .25s cubic-bezier(.22,.61,.36,1) .08s; }
.cp-btn--line:hover .cp-btn__label { color: #1C1F26; }

/* header-scoped variant follows the header tint variables */
.cp-page-header .cp-btn--line .cp-btn__pin::before { background: var(--hd, #243A66); }
.cp-page-header .cp-btn--line .cp-btn__pin::after { background: var(--hd, #243A66); transition: background .4s cubic-bezier(.22,.61,.36,1); }
.cp-page-header .cp-btn--line:hover .cp-btn__label { color: var(--hdInv, #F3F5FC); }
.cp-page-header .cp-btn--line:hover .cp-btn__pin::after { background: var(--hdInv, #F3F5FC); }

/* --------------------------------------------------------------------------
   component: text link with square pin (cp-textlink)
   -------------------------------------------------------------------------- */
.cp-textlink__pin { display: inline-block; width: 7px; height: 7px; background: #BE2E96; border-radius: 1.5px; transform: scale(0) rotate(45deg); transition: transform .35s cubic-bezier(.22,.61,.36,1); flex: none; }
.cp-textlink:hover .cp-textlink__pin { transform: scale(1) rotate(0deg); }

/* --------------------------------------------------------------------------
   component: case/product row link hover (cp-case-link)
   -------------------------------------------------------------------------- */
.cp-case-link__underline { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #BE2E96; transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.cp-case-link:hover .cp-case-link__underline { transform: scaleX(1); }
.cp-case-link__tick { position: absolute; left: 23px; bottom: -14px; width: 1px; height: 27px; background: #BE2E96; transform: scaleY(0); transform-origin: 50% 0; transition: transform .35s cubic-bezier(.22,.61,.36,1) .2s; }
.cp-case-link:hover .cp-case-link__tick { transform: scaleY(1); }
.cp-case-link__body { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.cp-case-link:hover .cp-case-link__body { transform: translateX(9px); }

/* --------------------------------------------------------------------------
   component: cross mark (cp-cross)
   -------------------------------------------------------------------------- */
.cp-cross { position: absolute; transform: translate(-50%, -50%); width: 15px; height: 15px; pointer-events: none; }
.cp-cross--origin { left: 0; top: 0; }
.cp-cross--rail { left: clamp(72px, min(16vw, 230.4px), 256px); top: 0; z-index: 2; }
.cp-cross__h { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: #BE2E96; }
.cp-cross__v { position: absolute; top: 0; bottom: 0; left: 7px; width: 1px; background: #BE2E96; }

/* --------------------------------------------------------------------------
   layout: section scaffold (cp-section)
   -------------------------------------------------------------------------- */
.cp-section { position: relative; display: grid; grid-template-columns: clamp(72px, min(16vw, 230.4px), 256px) 1fr; }
.cp-section__spine { position: absolute; left: clamp(72px, min(16vw, 230.4px), 256px); top: 0; bottom: 0; width: 1px; background: #cfd6e2; pointer-events: none; }
.cp-section__rail-inner { position: sticky; top: 168px; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.cp-section__rail-inner--center { align-items: center; gap: 18px; }
.cp-section__num { font: 300 clamp(34px, min(4.2vw, 60.48px), 60px)/1 'Urbanist', sans-serif; color: #c3ccdd; }
.cp-section__dot { display: none; width: 7px; height: 7px; border-radius: 999px; background: #BE2E96; margin-right: 2px; }
.cp-section__label { writing-mode: vertical-rl; font: 700 10.5px/1 'Urbanist', sans-serif; letter-spacing: .3em; color: #9aa0a6; }
.cp-section__rail-dot { width: 7px; height: 7px; border-radius: 999px; background: #BE2E96; }

/* --------------------------------------------------------------------------
   component: fixed page header (cp-page-header)
   -------------------------------------------------------------------------- */
.cp-page-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; --hd: #243A66; --hdInv: #F3F5FC; }
.cp-page-header--home { --hdLogo: #243A66; }
.cp-page-header__inner { max-width: 1440px; margin: 0 auto; padding: 36px clamp(24px, min(5vw, 72px), 72px) 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.cp-page-header__logo { display: block; width: 74.6px; flex: none; text-decoration: none; pointer-events: auto; color: var(--hd, #243A66); transition: color .4s cubic-bezier(.22,.61,.36,1); }
.cp-page-header--home .cp-page-header__logo { color: var(--hdLogo, #243A66); }
.cp-page-header__logo-mark { display: block; width: 74.6px; }
.cp-page-header__nav { display: flex; align-items: center; gap: clamp(18px, min(2.4vw, 34.56px), 40px); flex-wrap: wrap; justify-content: flex-end; pointer-events: auto; }
.cp-page-header__nav-link { font: 600 12px/1.2 'Noto Sans JP', sans-serif; color: var(--hd, #243A66); text-decoration: none; letter-spacing: .04em; white-space: nowrap; opacity: .86; transition: opacity .2s, color .4s cubic-bezier(.22,.61,.36,1); }
.cp-page-header__nav-link:hover { opacity: 1; color: #BE2E96; }
.cp-page-header__contact { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 20px 0 17px; border: 1px solid var(--hd, #243A66); border-radius: 999px; color: var(--hd, #243A66); transition: border-color .4s cubic-bezier(.22,.61,.36,1), color .4s cubic-bezier(.22,.61,.36,1); font: 600 12px/1.2 'Noto Sans JP', sans-serif; text-decoration: none; letter-spacing: .04em; white-space: nowrap; }
.cp-page-header__burger { display: none; appearance: none; background: none; border: none; cursor: pointer; padding: 12px 2px; pointer-events: auto; flex-direction: column; gap: 7px; align-items: flex-end; }
.cp-page-header__burger-line { display: block; width: 26px; height: 1.5px; background: var(--hd, #243A66); transition: background .4s cubic-bezier(.22,.61,.36,1); }
.cp-page-header__burger-line--short { width: 17px; }
.cp-page-header--home .cp-page-header__burger-line { height: 2px; }

/* --------------------------------------------------------------------------
   component: mobile fullscreen menu (cp-mobile-menu)
   -------------------------------------------------------------------------- */
.cp-mobile-menu { position: fixed; inset: 0; z-index: 90; background: #1B2B4D; display: flex; flex-direction: column; opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .4s cubic-bezier(.22,.61,.36,1), transform .4s cubic-bezier(.22,.61,.36,1); }
.cp-mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cp-mobile-menu__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 36px 24px 16px; flex: none; }
.cp-mobile-menu__brand { display: flex; align-items: flex-start; gap: 32px; min-width: 0; }
.cp-mobile-menu__logo { display: block; width: 52.64px; margin-top: -6px; flex: none; text-decoration: none; }
.cp-mobile-menu__logo-mark { display: block; width: 52.64px; }
.cp-mobile-menu__tagline { font-family: 'Noto Sans JP', sans-serif; font-weight: 600; font-size: 12px; line-height: 1.6; letter-spacing: .08em; color: #fff; margin: -9px 0 0; padding: 0; white-space: nowrap; height: calc(52.64px * 68 / 56); display: flex; align-items: center; }
.cp-mobile-menu__close { appearance: none; background: none; border: none; cursor: pointer; padding: 12px; margin-top: -12px; position: relative; width: 44px; height: 44px; }
.cp-mobile-menu__close-line { position: absolute; left: 10px; top: 21px; width: 24px; height: 1.5px; background: #fff; transform: rotate(45deg); }
.cp-mobile-menu__close-line--alt { transform: rotate(-45deg); }
.cp-mobile-menu__nav { display: flex; flex-direction: column; padding: 20px 28px 0; overflow-y: auto; }
.cp-mobile-menu__nav-link { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 19px 2px; border-top: 1px solid #3B5185; font: 400 15px/1.5 'Noto Sans JP', sans-serif; color: #fff; text-decoration: none; }
.cp-mobile-menu__nav-en { font: 600 11px/1.5 'Urbanist', sans-serif; letter-spacing: .16em; color: #46598C; flex: none; }
.cp-mobile-menu__nav-link--last { border-bottom: 1px solid #3B5185; }
.cp-mobile-menu__foot { padding: 28px; margin-top: auto; flex: none; }
.cp-mobile-menu__cta { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border: 1px solid #fff; border-radius: 999px; color: #fff; font: 600 15px/1 'Noto Sans JP', sans-serif; text-decoration: none; letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   component: footer (cp-footer)
   --rail: index/contact/privacy/case (grid + SITE MAP rail)
   --home: index (no top border) / --simple: column pages (centered column)
   -------------------------------------------------------------------------- */
.cp-footer--rail { background: #1B2B4D; border-top: 1px solid #3B5185; color: #cfd6e2; position: relative; display: grid; grid-template-columns: clamp(72px, min(16vw, 230.4px), 256px) 1fr; }
.cp-footer--home { border-top: none; }
.cp-footer__spine { position: absolute; left: clamp(72px, min(16vw, 230.4px), 256px); top: 0; bottom: 0; width: 1px; background: #3B5185; pointer-events: none; }
.cp-footer__rail { display: flex; justify-content: flex-end; padding: clamp(72px, min(9vw, 129.6px), 112px) clamp(14px, min(1.8vw, 25.92px), 26px) 48px 12px; }
.cp-footer__rail-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cp-footer__rail-dot { width: 7px; height: 7px; border-radius: 999px; background: #BE2E96; }
.cp-footer__rail-label { writing-mode: vertical-rl; font: 700 10.5px/1 'Urbanist', sans-serif; letter-spacing: .3em; color: #6B7178; }
.cp-footer__col { min-width: 0; padding: clamp(72px, min(9vw, 129.6px), 112px) clamp(24px, min(5vw, 72px), 88px) 40px clamp(28px, min(4.5vw, 64.8px), 68px); }
.cp-footer__inner { max-width: 1200px; }
.cp-footer--simple { background: #1B2B4D; border-top: 1px solid #3B5185; color: #cfd6e2; padding: clamp(72px, min(9vw, 129.6px), 112px) 0 40px; }
.cp-footer__pad { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, min(4vw, 57.6px), 40px); }
.cp-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(40px, min(6vw, 86.4px), 72px); padding-bottom: clamp(40px, min(5vw, 72px), 56px); border-bottom: 1px solid #3B5185; }
.cp-footer__brand-row { display: flex; align-items: center; gap: 32px; margin-bottom: 28px; }
.cp-footer__logo { display: block; width: 70.1px; flex: none; }
.cp-footer__logo-mark { display: block; width: 70.1px; }
.cp-footer__tagline { font-family: 'Noto Sans JP', sans-serif; font-weight: 600; font-size: 12.5px; line-height: 2; letter-spacing: .09em; color: #fff; margin: 0; white-space: nowrap; transform: translateY(-3px); }
.cp-footer__desc { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 12.5px; line-height: 1.9; letter-spacing: .02em; color: #9aa0a6; margin: 0; max-width: 28em; }
.cp-footer__links { display: flex; gap: clamp(36px, min(6vw, 86.4px), 80px); flex-wrap: wrap; }
.cp-footer__group { display: flex; flex-direction: column; gap: 16px; }
.cp-footer__group-title { font: 700 11px/1 'Urbanist', sans-serif; letter-spacing: .2em; color: #6B7178; margin-bottom: 4px; }
.cp-footer__link { font-family: 'Noto Sans JP', sans-serif; font-size: 13px; color: #cfd6e2; text-decoration: none; transition: color .25s cubic-bezier(.22,.61,.36,1); }
.cp-footer__link:hover { color: #BE2E96; }
.cp-footer__social { display: inline-flex; align-items: center; color: #cfd6e2; transition: color .2s; }
/* The legacy sheet declared #fff here, but `footer a:hover{...!important}`
   always won — the rendered hover color was #BE2E96. Keep the real one. */
.cp-footer__social:hover { color: #BE2E96; }
.cp-footer__social-icon { display: block; }
.cp-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; }
.cp-footer__copyright { font: 500 11px/1 'Urbanist', sans-serif; letter-spacing: .08em; color: #6B7178; }
.cp-footer__privacy { font-family: 'Noto Sans JP', sans-serif; font-size: 11.5px; color: #9aa0a6; text-decoration: none; transition: color .25s cubic-bezier(.22,.61,.36,1); }
.cp-footer__privacy:hover { color: #BE2E96; }

/* --------------------------------------------------------------------------
   shared responsive
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .cp-u-sp-hide { display: none !important; }
  .cp-page-header__logo { width: 52.64px; margin-top: -6px; }
  .cp-page-header__logo-mark { width: 52.64px; }
  .cp-page-header__burger { display: inline-flex; margin-top: -12px; }
  .cp-section { grid-template-columns: 44px 1fr; }
  .cp-section__num { display: none; }
  .cp-section__dot { display: block; }
  .cp-section__spine, .cp-footer__spine { left: 44px; }
  .cp-cross--rail { left: 44px; }
  .cp-footer--rail { display: block; }
  .cp-footer__col { padding-left: 44px; padding-right: 44px; }
  .cp-footer__logo, .cp-footer__logo-mark { width: 63.09px; }
  /* NOTE: the legacy sheet also declared align-items:flex-start here, but it
     never applied (the element's inline style won) — dropped to keep the
     rendered result identical. */
  .cp-footer__legal { flex-direction: column-reverse; }
  .cp-footer__links { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 20px; }
}
@media (min-width: 721px) {
  .cp-mobile-menu { display: none; }
  .cp-u-sp-only { display: none !important; }
}

/* --------------------------------------------------------------------------
   reduced motion (shared)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cp-btn--fill .cp-btn__pin::before,
  .cp-btn--line .cp-btn__pin::before,
  .cp-btn--line .cp-btn__label,
  .cp-btn--line .cp-btn__pin::after,
  .cp-textlink__pin { transition: none; }
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}

/* --------------------------------------------------------------------------
   wide displays (>=1441px) — ported from wide-layout.css; the !important
   flags here are load-bearing (they define precedence between these rules
   and the base/mobile rules above). Keep them.
   -------------------------------------------------------------------------- */
@media (min-width: 721px) {
  /* Align every desktop section rail with the logo's right edge. */
  .cp-rail {
    --cp-logo-right: calc(
      max(0px, calc(min(50vw, 720px) - 720px))
      + clamp(24px, min(5vw, 72px), 72px)
      + 74.6px
    );
    padding-right: max(
      0px,
      calc(clamp(72px, min(16vw, 230.4px), 256px) - var(--cp-logo-right))
    ) !important;
  }
}

@media (min-width: 1441px) {
  /* On wide displays, keep the logo / rail composition at 1440px (same as
     the header). CTA and other non-rail sections stay full-bleed. */
  .cp-section:has(.cp-section__spine),
  .cp-section:has(.cp-rail),
  .cp-section:has(.cp-hero__rail),
  .cp-footer--rail {
    width: 100%;
    max-width: 1440px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    position: relative;
    isolation: isolate;
    grid-template-columns: 230.4px minmax(0, 1fr) !important;
  }

  /* Full-bleed background outside the 1440px canvas. */
  .cp-section:has(.cp-section__spine)::before,
  .cp-section:has(.cp-rail)::before,
  .cp-section:has(.cp-hero__rail)::before,
  .cp-footer--rail::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: inherit;
    pointer-events: none;
  }

  /* Full-bleed top hairline (1px layer — not a zero-height border box). */
  .cp-section:has(.cp-section__spine):not(.cp-hero),
  .cp-section:has(.cp-rail):not(.cp-hero),
  .cp-section:has(.cp-hero__rail):not(.cp-hero) {
    border-top-color: transparent !important;
  }
  .cp-section:has(.cp-section__spine):not(.cp-hero)::after,
  .cp-section:has(.cp-rail):not(.cp-hero)::after,
  .cp-section:has(.cp-hero__rail):not(.cp-hero)::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    background: var(--cp-edge-top, #cfd6e2);
    pointer-events: none;
  }
  .cp-footer--rail {
    border-top-color: transparent !important;
  }
  .cp-footer--rail::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    background: #3B5185;
    pointer-events: none;
  }

  .cp-section .cp-ai__dark,
  .cp-section .cp-section__wide-bg {
    right: auto !important;
    left: 50% !important;
    width: 100vw;
    transform: translateX(-50%);
  }

  .cp-hero {
    overflow: visible !important;
  }
  .cp-hero .cp-section__wide-bg {
    overflow: hidden;
  }

  .cp-section .cp-section__spine,
  .cp-section .cp-cross--rail,
  .cp-footer--rail > .cp-footer__spine {
    left: 230.4px !important;
  }

  .cp-rail {
    padding-right: 83.8px !important;
  }
}

/* --------------------------------------------------------------------------
   print (ported from the retired dc-runtime base CSS)
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  *, *::before, *::after {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    animation-delay: -99s !important; animation-duration: .001s !important;
    animation-iteration-count: 1 !important; animation-fill-mode: both !important;
    animation-play-state: running !important; transition-duration: 0s !important;
  }
}