.crd-hero { padding: clamp(150px, 13vw, 190px) var(--shx) clamp(40px, 4vw, 60px); }
.crd-kicker { display: flex; align-items: center; gap: 18px; color: var(--blue); font-size: 14px; font-weight: 700; }
.crd-kicker i { width: clamp(60px, 7vw, 100px); height: 1px; background: currentColor; }
.crd-ttl { margin-top: 18px; font: 600 clamp(52px, 8.4vw, 124px)/.98 var(--en); letter-spacing: -.05em; }
.crd-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 5vw; margin-top: clamp(40px, 4vw, 64px); }
.crd-catch { font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; line-height: 1.55; }
.crd-lead { max-width: 520px; margin: 26px 0 44px; color: var(--g700); font-size: 15px; line-height: 1.95; }
.crd-ico-down::before { transform: rotate(135deg); top: 1px; }
.ub:hover .crd-ico-down::before { transform: translateY(3px) rotate(135deg); }
.crd-collage { position: relative; aspect-ratio: 1 / .9; }
.crd-collage-i { position: absolute; width: 44%; opacity: 0; transform: translateY(48px) rotate(var(--r)); transition: opacity 1s ease calc(.15s + var(--i) * .16s), transform 1.5s var(--ease01) calc(.15s + var(--i) * .16s); }
.crd-collage-i:nth-child(1) { left: 1%; top: 13%; }
.crd-collage-i:nth-child(2) { left: 28%; top: 0; z-index: 2; }
.crd-collage-i:nth-child(3) { left: 55%; top: 15%; }
.crd-collage-i > div { overflow: hidden; border-radius: 8px; box-shadow: 0 28px 60px rgba(0,0,0,.13), 0 4px 14px rgba(0,0,0,.06); }
.crd-collage-i img { display: block; width: 100%; height: auto; }
.crd-collage.is-in .crd-collage-i { opacity: 1; transform: rotate(var(--r)); }
.crd-collage.is-in .crd-collage-i > div { animation: crdFloat 7s ease-in-out calc(1.6s + var(--i) * -2.3s) infinite alternate; }
@keyframes crdFloat { from { transform: translateY(0); } to { transform: translateY(-12px); } }

.crd-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: 6.25vw; padding: 0 var(--shx); }
.crd-side { position: sticky; top: 110px; padding-top: clamp(70px, 7vw, 100px); }
.crd-side-list { margin: 0; padding: 0; list-style: none; }
.crd-side-list li + li { margin-top: 14px; }
.crd-side-list a { position: relative; display: block; padding-left: 20px; color: var(--g500); font-size: 14px; font-weight: 700; transition: color .3s; }
.crd-side-list a::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; border-radius: 50%; background: var(--g200); transition: background-color .3s, transform .4s var(--ease01); }
.crd-side-list a:hover, .crd-side-list a.is-cur { color: var(--g800); }
.crd-side-list a.is-cur::before { background: var(--blue); transform: scale(1.2); }
.crd .ub, .crd-side .ub { white-space: nowrap; }
.crd-side-cta.ub { width: 100%; height: 52px; margin-top: 32px; padding: 0 30px 0 20px; font-size: 13px; }
.crd-side-cta .ub-ico { right: 16px; }
.crd-sec { padding-top: clamp(70px, 7vw, 100px); scroll-margin-top: 60px; }
.crd-main > .crd-sec:last-child { padding-bottom: clamp(20px, 2vw, 30px); }

.crd-h3 { margin-top: 44px; font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; line-height: 1.5; }
.crd-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 44px 0 0; padding: 0; list-style: none; }
.crd-point { position: relative; padding-top: 24px; opacity: 0; transform: translateY(20px); transition: opacity .8s ease calc(var(--i) * .12s), transform 1.1s var(--ease01) calc(var(--i) * .12s); }
.crd-point::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--g200); }
.crd-point::after { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 2px; background: var(--blue); }
.crd-point-no { color: var(--blue); font: 600 12px/1 var(--en); letter-spacing: .04em; }
.crd-point-ttl { margin-top: 14px; font-size: 17px; font-weight: 800; line-height: 1.6; }
.crd-point-txt { margin-top: 12px; color: #555; font-size: 14px; line-height: 1.9; }
.crd-points.is-in .crd-point { opacity: 1; transform: none; }

.crd-scope { margin: 0; padding: 0; list-style: none; }
.crd-scope li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; gap: 24px; padding: 34px 0 33px; }
.crd-scope li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--g200); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease01) calc(var(--i) * .12s); }
.crd-scope-no { padding-top: .5em; color: var(--blue); font: 600 12px/1 var(--en); letter-spacing: .04em; }
.crd-scope-en { font: 600 clamp(22px, 2vw, 30px)/1.15 var(--en); letter-spacing: -.035em; }
.crd-scope-jp { margin-top: 8px; color: var(--g500); font-size: 13px; font-weight: 700; }
.crd-scope-txt { padding-top: .3em; color: #444; font-size: 14px; line-height: 1.9; }
.crd-scope li > :not(.crd-scope-no) { opacity: 0; transform: translateY(14px); transition: opacity .8s ease calc(.2s + var(--i) * .12s), transform 1.1s var(--ease01) calc(.2s + var(--i) * .12s); }
.crd-scope.is-in li::after { transform: scaleX(1); }
.crd-scope.is-in li > :not(.crd-scope-no) { opacity: 1; transform: none; }

.crd-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; margin: 48px 0 0; padding: 0; list-style: none; }
.crd-work { opacity: 0; transform: translateY(28px); transition: opacity .9s ease calc(var(--i) * .1s), transform 1.2s var(--ease01) calc(var(--i) * .1s); }
.crd-works.is-in .crd-work { opacity: 1; transform: none; }
.crd-work-btn { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: #f5f5f5; cursor: zoom-in; }
.crd-work-btn img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease01); }
.crd-work-btn:hover img { transform: scale(1.045); }
.crd-work-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.crd-work-zoom { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: #222; opacity: 0; transform: scale(.7); transition: opacity .35s, transform .5s var(--ease01); }
.crd-work-zoom::before, .crd-work-zoom::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: #fff; transform: translate(-50%, -50%); }
.crd-work-zoom::after { transform: translate(-50%, -50%) rotate(90deg); }
.crd-work-btn:hover .crd-work-zoom, .crd-work-btn:focus-visible .crd-work-zoom { opacity: 1; transform: none; }
.crd-work-ttl { margin-top: 16px; font-size: 16px; font-weight: 800; line-height: 1.4; }
.crd-work-cat { margin-top: 6px; color: var(--g500); font-size: 12px; font-weight: 500; }
.crd-badge { display: flex; align-items: center; gap: 28px; margin-top: 56px; padding: 28px 32px; border-radius: 6px; background: #fff; }
.crd-badge-logo { flex: none; width: 180px; height: auto; }
.crd-badge-txt { color: #444; font-size: 14px; line-height: 1.8; }

.crd-lb { max-width: min(92vw, 760px); max-height: 94vh; padding: 0; overflow: visible; border: 0; background: transparent; }
.crd-lb::backdrop { background: rgba(14,14,16,.82); }
.crd-lb[open] { animation: crdLbIn .5s var(--ease01); }
.crd-lb-img { display: block; width: auto; max-width: 100%; height: auto; max-height: 90vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.crd-lb-close { position: absolute; right: -14px; top: -14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
.crd-lb-close::before, .crd-lb-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: #222; transform: translate(-50%, -50%) rotate(45deg); }
.crd-lb-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
@keyframes crdLbIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 1040px) and (min-width: 721px) {
  .crd-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crd-points { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 720px) {
  .crd-hero { padding: 120px 5.3333333333vw 20px; }
  .crd-kicker { font-size: 12px; }
  .crd-kicker i { display: none; }   .crd-ttl { font-size: 46px; }
  .crd-hero-grid { grid-template-columns: 1fr; gap: 48px; margin-top: 32px; }
  .crd-hero-txt .ub { width: 100%; }
  .crd-collage { width: 100%; }
  .crd-body { display: block; padding: 0 5.3333333333vw; }
  .crd-side { position: static; padding-top: 44px; }
  .crd-side-list { display: flex; flex-wrap: wrap; gap: 10px 24px; }
  .crd-side-list li + li { margin-top: 0; }
  .crd-side-list a { color: var(--g800); }
  .crd-side-list a::before { background: var(--blue); }
  .crd-side-cta.ub { display: none; }
  .crd-sec { padding-top: 64px; }
  .crd-h3 { margin-top: 32px; font-size: 21px; }
  .crd-points { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .crd-scope li { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "no ttl" "no txt"; gap: 10px 8px; padding: 26px 0 25px; }
  .crd-scope-no { grid-area: no; padding-top: .4em; }
  .crd-scope li > div { grid-area: ttl; }
  .crd-scope-txt { grid-area: txt; padding-top: 4px; }
  .crd-scope-en { font-size: 22px; }
  .crd-works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin-top: 32px; }
  .crd-work-ttl { margin-top: 10px; font-size: 14px; }
  .crd-work-cat { font-size: 11px; }
  .crd-work-zoom { right: 8px; bottom: 8px; width: 30px; height: 30px; opacity: 1; transform: none; }
  .crd-work-zoom::before, .crd-work-zoom::after { width: 10px; }
  .crd-badge { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; }
  .crd-badge-logo { width: 150px; }
  .crd-lb-close { right: 6px; top: 6px; width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .crd-collage-i, .crd-point, .crd-scope li::after, .crd-scope li > *, .crd-work { transition: none !important; }
  .crd-collage.is-in .crd-collage-i > div { animation: none; }
}