/* ==========================================================================
   CrossPiece — case-accounting.html page styles
   Values carried over verbatim from the retired inline styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   case hero (事例概要)
   -------------------------------------------------------------------------- */
.cp-case-hero { background: #F3F5FC; }
.cp-case-hero__rail { display: flex; justify-content: flex-end; align-items: flex-start; padding: clamp(172px,21vh,210px) clamp(14px,min(1.8vw, 25.92px),26px) 48px 12px; }
.cp-case-hero__body { min-width: 0; max-width: 1120px; padding: clamp(160px,19vh,200px) clamp(24px,min(5vw, 72px),88px) clamp(64px,min(8vw, 115.2px),104px) clamp(28px,min(4.5vw, 64.8px),68px); }
.cp-case-hero__back-row { margin-bottom: clamp(26px,min(3.5vw, 50.4px),40px); }
.cp-case-hero__back { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 'Noto Sans JP',sans-serif; letter-spacing: .05em; color: #9aa0a6; text-decoration: none; transition: color .2s; }
.cp-case-hero__back:hover { color: #1C1F26; }
.cp-case-hero__back-arrow { font-family: 'Urbanist'; font-weight: 700; }
.cp-case-hero__eyebrow-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(24px,min(3vw, 43.2px),36px); }
.cp-case-hero__eyebrow { font: 700 12px/1 'Urbanist',sans-serif; letter-spacing: .26em; color: #BE2E96; }
.cp-case-hero__bar { height: 1px; width: 48px; background: #cfd6e2; }
.cp-case-hero__sub { font: 600 12px/1 'Noto Sans JP',sans-serif; letter-spacing: .06em; color: #6B7178; }
.cp-case-hero__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(28px,min(4.6vw, 66.24px),56px); line-height: 1.4; letter-spacing: .01em; color: #1B2B4D; margin: 0 0 clamp(22px,min(3vw, 43.2px),32px); }
.cp-case-hero__lead { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: clamp(14.5px,min(1.3vw, 18.72px),16px); line-height: 2.05; letter-spacing: .02em; color: #3a3f45; max-width: 100%; margin: 0 0 clamp(32px,min(4.5vw, 64.8px),48px); }
.cp-case-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); }
.cp-case-hero__meta-list { display: flex; align-items: center; gap: clamp(20px,min(4vw, 57.6px),56px); flex-wrap: wrap; }
.cp-case-hero__meta-item { display: flex; flex-direction: column; gap: 6px; }
.cp-case-hero__meta-v { font: 700 13px/1 'Urbanist',sans-serif; letter-spacing: .04em; color: #1C1F26; }
.cp-case-hero__meta-k { font: 600 10px/1 'Urbanist',sans-serif; letter-spacing: .16em; color: #9aa0a6; }
.cp-case-hero__media { display: block; width: 100%; height: auto; aspect-ratio: 21/10; margin-top: clamp(36px,min(5vw, 72px),56px); }

/* --------------------------------------------------------------------------
   detail sections shared scaffold (background / approach / outcome / voice)
   -------------------------------------------------------------------------- */
.cp-case-detail__rail { padding: clamp(76px,min(10vw, 144px),132px) clamp(14px,min(1.8vw, 25.92px),26px) 48px 12px; }
.cp-case-detail__body { min-width: 0; max-width: 1120px; padding: clamp(72px,min(10vw, 144px),128px) clamp(24px,min(5vw, 72px),88px) clamp(76px,min(10vw, 144px),136px) clamp(28px,min(4.5vw, 64.8px),68px); }
.cp-case-detail__head { max-width: 620px; margin-bottom: clamp(40px,min(5vw, 72px),60px); }
.cp-case-detail__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(24px,min(3.4vw, 48.96px),38px); line-height: 1.4; letter-spacing: .01em; color: #1B2B4D; margin: 0 0 18px; }
.cp-case-detail__lead { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 14.5px; line-height: 2; color: #6B7178; margin: 0; }
.cp-case-detail__list { border-top: 1px solid #cfd6e2; }
.cp-case-detail__item-title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(16.5px,min(1.9vw, 27.36px),20px); line-height: 1.55; color: #1B2B4D; margin: 0 0 8px; }
.cp-case-detail__item-desc { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 13.5px; line-height: 1.9; color: #6B7178; margin: 0; max-width: 560px; }

/* --------------------------------------------------------------------------
   challenge section (#background)
   -------------------------------------------------------------------------- */
.cp-case-challenge { background: #fff; border-top: 1px solid #cfd6e2; }
.cp-case-challenge__row { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px,min(2.4vw, 34.56px),28px); align-items: baseline; border-bottom: 1px solid #cfd6e2; padding: clamp(24px,min(3.2vw, 46.08px),38px) clamp(6px,min(1vw, 14.4px),14px); }
.cp-case-challenge__pin { width: 9px; height: 9px; background: #BE2E96; border-radius: 2px; transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   approach section (#approach)
   -------------------------------------------------------------------------- */
.cp-case-approach { background: #F3F5FC; border-top: 1px solid #cfd6e2; }
.cp-case-approach__row { display: grid; grid-template-columns: clamp(44px,min(5.5vw, 79.2px),72px) 1fr; gap: clamp(14px,min(2vw, 28.8px),28px); align-items: baseline; border-bottom: 1px solid #cfd6e2; padding: clamp(24px,min(3.2vw, 46.08px),38px) 0; }
.cp-case-approach__num { font: 300 clamp(24px,min(3vw, 43.2px),38px)/1 'Urbanist',sans-serif; color: #BE2E96; }

/* --------------------------------------------------------------------------
   outcome section (#outcome) — dark layer is clip-path-revealed by a GSAP
   scrub timeline (js/case.js); the spine's base color is the post-scrub
   value, exactly like the retired inline style.
   -------------------------------------------------------------------------- */
.cp-case-outcome { background: #F3F5FC; border-top: 1px solid #cfd6e2; }
.cp-case-outcome__dark { position: absolute; inset: 0; background: #1B2B4D; pointer-events: none; overflow: hidden; }
.cp-case-outcome__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-case-outcome__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); }
.cp-case-outcome__spine { background: #3B5185; }
.cp-case-outcome .cp-section__num { color: #46598C; }
.cp-case-outcome .cp-section__label { color: #6B7178; }
.cp-case-outcome .cp-case-detail__title { color: #fff; }
.cp-case-outcome .cp-case-detail__lead { color: #b8bdc6; }
.cp-case-outcome__lead-note { color: #6B7178; }
.cp-case-outcome__metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: clamp(24px,min(3.5vw, 50.4px),48px); border-top: 1px solid #3B5185; padding-top: clamp(32px,min(4.5vw, 64.8px),52px); }
.cp-case-outcome__metric-v { font: 300 clamp(38px,min(4.6vw, 66.24px),60px)/1.1 'Urbanist',sans-serif; color: #fff; margin-bottom: 14px; }
.cp-case-outcome__metric-row { display: flex; align-items: baseline; gap: 10px; }
.cp-case-outcome__metric-pin { width: 7px; height: 7px; border-radius: 999px; background: #BE2E96; flex: none; transform: translateY(-1px); }
.cp-case-outcome__metric-l { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 13px; line-height: 1.8; color: #9aa0a6; }

/* --------------------------------------------------------------------------
   voice section (#voice)
   -------------------------------------------------------------------------- */
.cp-case-voice { background: #fff; border-top: 1px solid #cfd6e2; }
.cp-case-voice__quote-wrap { max-width: 720px; }
.cp-case-voice__quote { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(20px,min(2.8vw, 40.32px),32px); line-height: 1.75; letter-spacing: .01em; color: #1C1F26; margin: 0 0 clamp(28px,min(4vw, 57.6px),40px); }
.cp-case-voice__person { display: flex; align-items: center; gap: 16px; }
.cp-case-voice__avatar { display: block; width: 60px; height: 60px; flex: none; }
.cp-case-voice__person-body { display: flex; flex-direction: column; gap: 5px; }
.cp-case-voice__person-name { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: 14px; color: #1C1F26; }
.cp-case-voice__person-en { font: 500 11px/1 'Urbanist',sans-serif; letter-spacing: .12em; color: #9aa0a6; }
.cp-case-voice__next-wrap { margin-top: clamp(48px,min(7vw, 100.8px),80px); border-top: 1px solid #cfd6e2; }
.cp-case-voice__next { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px,min(3.2vw, 46.08px),36px) clamp(6px,min(1vw, 14.4px),14px); border-bottom: 1px solid #cfd6e2; text-decoration: none; transition: background .25s cubic-bezier(.22,.61,.36,1); }
.cp-case-voice__next:hover { background: #F3F5FC; }
.cp-case-voice__next-body { display: flex; flex-direction: column; gap: 7px; }
.cp-case-voice__next-label { font: 600 10px/1 'Urbanist',sans-serif; letter-spacing: .18em; color: #9aa0a6; }
.cp-case-voice__next-title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(15px,min(1.8vw, 25.92px),18px); color: #1C1F26; }
.cp-case-voice__next-arrow { font: 700 18px/1 'Urbanist',sans-serif; color: #BE2E96; }

/* --------------------------------------------------------------------------
   CTA band (full-width block — not a rail section, so no .cp-section here)
   -------------------------------------------------------------------------- */
@keyframes cpBand { 0%,100% { transform: translateX(-3.5%); } 50% { transform: translateX(3.5%); } }
.cp-case-cta { background: #F3F5FC; position: relative; isolation: isolate; border-top: 1px solid #cfd6e2; padding: clamp(64px,min(9vw, 129.6px),108px) 0; }
.cp-case-cta__band { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cp-case-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-case-cta__inner { max-width: 1160px; margin: 0 auto; padding: 0 clamp(24px,min(5vw, 72px),72px); display: flex; align-items: center; justify-content: space-between; gap: clamp(28px,min(5vw, 72px),56px); flex-wrap: wrap; }
.cp-case-cta__text { min-width: 0; }
.cp-case-cta__eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cp-case-cta__pin { width: 7px; height: 7px; background: #BE2E96; }
.cp-case-cta__eyebrow { font: 700 12px/1 'Urbanist',sans-serif; letter-spacing: .26em; color: #BE2E96; }
.cp-case-cta__bar { height: 1px; width: 48px; background: #cfd6e2; }
.cp-case-cta__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(24px,min(3.2vw, 46.08px),36px); line-height: 1.4; color: #1B2B4D; margin: 0 0 12px; }
.cp-case-cta__lead { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 14px; line-height: 1.9; color: #6B7178; margin: 0; }
.cp-case-cta__btn { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px 0 25px; border-radius: 999px; background: #BE2E96; color: #fff; font: 600 15px/1 'Noto Sans JP',sans-serif; text-decoration: none; }

/* --------------------------------------------------------------------------
   case responsive (page-specific)
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .cp-case-hero__bar, .cp-case-cta__bar { width: 32px; }
}

/* --------------------------------------------------------------------------
   reduced motion (page-specific; shared rules live in css/site.css)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cp-case-outcome__grid { transition: none !important; -webkit-mask-position: 100% 0% !important; mask-position: 100% 0% !important; }
}

/* --------------------------------------------------------------------------
   wide displays (>=1441px) — css/site.css covers the rail sections; these
   mirror the retired wide-layout.css full-bleed rules for this page's own
   layers (outcome dark layer / CTA band, formerly [data-cp-dark] /
   [data-cp-wide-bg]).
   -------------------------------------------------------------------------- */
@media (min-width: 1441px) {
  .cp-section .cp-case-outcome__dark,
  .cp-case-cta__band {
    right: auto;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
  }
}