/*
Theme Name: CARVEOUT Partner LP Test
Description: CARVEOUT partner landing page for staging.
Version: 1.0.0
*/

:root {
  --lp-blue: #172d7a;
  --lp-pale: #edf4ff;
  --lp-red: #ff3434;
  --lp-green: #08c95a;
  --lp-yellow: #f1c84b;
  --lp-text: #111;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--lp-text);
  background: #f2f2f2;
  font-family: "Source Han Sans JP", "Noto Sans JP", sans-serif;
  font-weight: 700;
}

/* Production shell: original global header/footer + animated desktop backdrop. */
body.partner-lp-live {
  background: #527ee0;
  overflow-x: hidden;
}
body.partner-lp-live .site-header,
body.partner-lp-live .app-marquee,
body.partner-lp-live .partner-lp,
body.partner-lp-live .footer {
  position: relative;
  z-index: 2;
}
body.partner-lp-live .site-header { position: fixed; z-index: 1000 !important; }
body.partner-lp-live .site-header .menu-backdrop { z-index: 1001 !important; }
body.partner-lp-live .site-header .site-menu { z-index: 1002 !important; }
body.partner-lp-live .site-header .menu-toggle,
body.partner-lp-live .site-header .site-logo { position: relative; z-index: 1003 !important; }
body.partner-lp-live .app-marquee { margin-top: 82px !important; margin-bottom: -60px !important; }
.partner-pc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 28%, rgba(31, 70, 183, .58) 0 13vw, transparent 13.2vw),
    radial-gradient(circle at 91% 21%, rgba(65, 101, 221, .85) 0 11vw, transparent 11.2vw),
    radial-gradient(circle at 87% 72%, rgba(194, 217, 255, .50) 0 9vw, transparent 9.2vw),
    #527ee0;
}
.partner-pc-track {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  width: max-content;
  color: rgba(255,255,255,.52);
  font: 900 clamp(48px,5.4vw,86px)/1 "Noto Sans JP", sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  white-space: nowrap;
  will-change: transform;
}
.partner-pc-track span { display: block; padding-bottom: 40px; }
.partner-pc-track-left { right: calc(50% + 300px); animation: partner-side-up 15s linear infinite; }
.partner-pc-track-right { left: calc(50% + 300px); animation: partner-side-down 17s linear infinite; }
@keyframes partner-side-up { to { transform: translateY(-50%); } }
@keyframes partner-side-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

@media (max-width: 760px) {
  body.partner-lp-live { background: #fff; }
  body.partner-lp-live .app-marquee { margin-top: 66px !important; margin-bottom: -60px !important; }
  .partner-pc-backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .partner-pc-track { animation-play-state: paused; }
}
button, input, textarea, select { font: inherit; }
.partner-lp { width: min(100%, 540px); margin: 0 auto; overflow: hidden; background: #fff; box-shadow: 0 0 28px rgba(0,0,0,.08); }
.app-marquee { position: relative; z-index: 5; width: min(540px, calc(100% - 20px)); margin: 10px auto; overflow: hidden; padding: 10px 0; border: 1px solid rgba(229,231,235,.95); border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 12px 34px rgba(17,24,39,.12); backdrop-filter: blur(14px); }
.app-marquee::before, .app-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 96px; pointer-events: none; }
.app-marquee::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.app-marquee::after { right: 0; background: linear-gradient(-90deg, #fff, rgba(255,255,255,0)); }
.app-marquee-track { display: flex; width: max-content; gap: 18px; align-items: center; animation: carveout-app-marquee-scroll 30s linear infinite; will-change: transform; }
.app-marquee-item { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-width: max-content; padding: 5px 12px 5px 6px; border: 1px solid rgba(229,231,235,.9); border-radius: 999px; background: #fff; color: #111; font-size: 13px; font-weight: 900; line-height: 1; }
.app-marquee-item img { display: block; width: 38px; height: 38px; border-radius: 11px; object-fit: cover; object-position: center; }
@keyframes carveout-app-marquee-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.image-slice { position: relative; width: 100%; overflow: hidden; background: var(--lp-pale); }
.image-slice img { position: absolute; inset: 0 auto auto 0; display: block; width: 100%; height: auto; }
.slice-1 { aspect-ratio: 1080 / 3500; }
.slice-2 { aspect-ratio: 1080 / 4865; }
.slice-3 { aspect-ratio: 1080 / 5115; }
.slice-4 { aspect-ratio: 1080 / 5160; }
.video-hotspot { position: absolute; z-index: 4; left: 7.35%; top: 51.65%; width: 85.3%; height: 10.6%; border: 4px solid #f7dc77; border-radius: 18px; box-shadow: 0 0 0 4px #182d78, 0 0 0 8px #d5a928, 0 10px 26px rgba(6,18,64,.38), inset 0 0 25px rgba(255,224,111,.25); background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.28) 48%, transparent 60%); text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.video-hotspot::before { content: "▶"; position: absolute; top: 50%; left: 50%; display: grid; width: 66px; height: 66px; place-items: center; padding-left: 5px; border: 3px solid #fff; border-radius: 50%; color: #fff; background: rgba(10,22,75,.76); box-shadow: 0 0 0 5px rgba(247,220,119,.8), 0 8px 24px rgba(0,0,0,.4); font-size: 29px; transform: translate(-50%,-50%); }
.video-hotspot::after { content: "YouTubeで動画を見る"; position: absolute; left: 50%; bottom: 13px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; color: #fff; background: rgba(6,18,64,.84); box-shadow: 0 3px 12px rgba(0,0,0,.28); font-size: 12px; font-weight: 900; line-height: 1; white-space: nowrap; transform: translateX(-50%); }
.video-hotspot:hover { filter: brightness(1.08); transform: scale(1.012); }
.video-hotspot:focus-visible { outline: 5px solid #ffda42; outline-offset: 9px; }
.image-cta { display: block; width: 100%; background: var(--lp-pale); }
.image-cta img { display: block; width: 100%; height: auto; }
.image-cta:focus-visible { outline: 5px solid #ffda42; outline-offset: -5px; }

.html-section { padding: 54px 22px; background-color: var(--lp-pale); background-image: radial-gradient(circle, rgba(190,215,255,.34) 0 18px, transparent 19px); background-size: 150px 170px; }
.comparison-section { background-color: #fff; background-image: none; }
.partner-lp .section-heading { display: block !important; width: 100% !important; max-width: none !important; margin: 0 0 32px !important; padding-left: 0 !important; text-align: center !important; font-size: 19px; line-height: 1.35; font-weight: 900; }
.partner-lp .section-heading::before { content: none !important; display: none !important; }
.partner-lp .section-heading .accent { position: relative; display: inline-block; margin: 0 auto; text-align: center; }
.section-heading .accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 6px; border-radius: 9px; background: var(--lp-yellow); transform: rotate(-1.5deg); }

.comparison-wrap { overflow-x: auto; border: 4px solid var(--lp-blue); border-radius: 14px; background: #fff; box-shadow: 0 7px 0 rgba(23,45,122,.14); }
.comparison { width: 100%; min-width: 455px; border-collapse: collapse; font-size: 13px; line-height: 1.35; }
.comparison th, .comparison td { padding: 13px 8px; text-align: center; border: 1px solid #ccd7ef; }
.comparison thead th { color: #fff; background: var(--lp-blue); font-weight: 900; }
.comparison tbody th { width: 24%; background: #f3f6fc; }
.comparison .carveout { background: #fff7d6; }
.comparison .price { color: var(--lp-red); font-size: 20px; font-weight: 900; }
.mark-good { color: #e1b526; font-size: 25px; }
.mark-bad { color: #888; font-size: 21px; }

.html-section > .image-cta { margin: 34px -22px -54px; width: calc(100% + 44px); }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; margin-bottom: 31px; padding: 27px 20px 24px 72px; border: 3px solid var(--lp-blue); border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.75; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; top: 22px; left: 18px; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #fff; background: var(--lp-blue); font-size: 20px; font-weight: 900; }
.steps strong { display: block; margin-bottom: 7px; font-size: 19px; font-weight: 900; }

.faq-list { display: grid; gap: 17px; }
.faq-item { border: 3px solid var(--lp-blue); border-radius: 12px; background: #fff; overflow: hidden; }
.faq-item summary { position: relative; padding: 21px 48px 21px 57px; cursor: pointer; list-style: none; font-size: 16px; line-height: 1.55; font-weight: 900; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q"; position: absolute; top: 17px; left: 18px; color: var(--lp-blue); font-size: 25px; font-weight: 900; }
.faq-item summary::after { content: "+"; position: absolute; top: 18px; right: 18px; color: var(--lp-blue); font-size: 25px; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { position: relative; margin: 0; padding: 19px 20px 22px 57px; border-top: 2px solid #d7e0f2; font-size: 14px; line-height: 1.8; font-weight: 700; }
.faq-answer::before { content: "A"; position: absolute; top: 15px; left: 19px; color: var(--lp-red); font-size: 25px; font-weight: 900; }
.legal-note { margin: 21px 0 0; text-align: center; font-size: 10px; line-height: 1.6; }

@media (max-width: 420px) {
  .app-marquee { width: calc(100% - 20px); margin: 6px auto; }
  .app-marquee::before, .app-marquee::after { width: 42px; }
  .html-section { padding: 44px 14px; }
  .html-section > .image-cta { margin: 30px -14px -44px; width: calc(100% + 28px); }
  .steps li { padding-left: 62px; }
  .steps li::before { left: 12px; }
  .video-hotspot { border-width: 2px; border-radius: 10px; box-shadow: 0 0 0 2px #182d78, 0 0 0 4px #d5a928, 0 6px 18px rgba(6,18,64,.35); }
  .video-hotspot::before { width: 46px; height: 46px; border-width: 2px; box-shadow: 0 0 0 3px rgba(247,220,119,.8), 0 5px 15px rgba(0,0,0,.4); font-size: 20px; }
  .video-hotspot::after { bottom: 7px; padding: 5px 9px; font-size: 9px; }
}