/* A-ARK /concept (noindex) — website-designer stack. Brief: a-ark/.design/brief.md
   Look: the film door the client preferred (inspired by Jewelry Farm) + quiet edge-to-edge tiles (Apple/Tesla principles).
   Structure: stage 3c conversion order — hook → problem → how → proof (peak) → bridge → fit/ease → price → FAQ → form.
   Palette: client silver / navy / white. Option B (?palette=b): logo cobalt as the single action colour on light grounds. */
.cx {
  --ink: #071A52;
  --night: #041139;
  --porcelain: #F4F6F9;
  --steel: #5B6787;
  --silver-text: #C9D3EA;
  --hair-d: rgba(255, 255, 255, 0.16);
  --on-2: rgba(255, 255, 255, 0.8);
  --tile-pad: clamp(72px, 9vw, 128px);
}

/* ---------- landing page: no header navigation, just logo + CTA (+ EN) ---------- */
body:has(main.cx) .site-header .nav,
body:has(main.cx) .site-header .menu-toggle { display: none !important; }
body:has(main.cx) .header-actions .btn { display: inline-flex; }

/* ---------- 1. Film door ---------- */
.cx-door { position: relative; isolation: isolate; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; justify-items: center; text-align: center;
  padding: calc(var(--header-h) + clamp(24px, 5vh, 56px)) var(--gutter) 0; color: #fff; background: var(--night); overflow: hidden; }
.cx-door::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(4, 17, 57, 0.46) 0%, rgba(4, 17, 57, 0.6) 62%, rgba(4, 17, 57, 0.82) 100%),
              linear-gradient(180deg, rgba(4, 17, 57, 0.5) 0%, rgba(4, 17, 57, 0) 32%, rgba(4, 17, 57, 0.7) 100%); }
.cx-door__films { position: absolute; inset: 0; z-index: -2; background: var(--night) url("/assets/img/cx-room-poster.jpg") center / cover no-repeat; }
.cx-door__films video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.cx-door__films video.is-on { opacity: 1; }
.cx-door__tag { position: absolute; right: var(--gutter); top: calc(var(--header-h) + 16px); z-index: 2; }
.cx-door__center { align-self: center; display: grid; justify-items: center; gap: clamp(12px, 2vh, 20px); max-width: 920px; }
.cx-emblem { width: clamp(220px, 26vw, 360px); height: auto; filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.45)); }
.cx-door__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 1.22; letter-spacing: 0.06em; color: #fff; }
.cx-door__title span { display: block; }
.cx-door__sub { margin: 0; max-width: 38em; font-size: clamp(0.98rem, 1.2vw, 1.1rem); line-height: 1.9; color: var(--on-2); }
.cx-door__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(28px, 5vw, 64px); margin: 4px 0 0; }
.cx-door__stats > div { display: grid; justify-items: center; gap: 4px; }
.cx-door__stats dd { order: -1; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1; color: #fff; }
.cx-door__stats dd sup { font-size: 0.42em; margin-left: 2px; color: var(--on-2); }
.cx-door__stats dt { font-size: 0.82rem; color: var(--on-2); letter-spacing: 0.06em; }
.cx-door__caveat { margin: 0; font-size: 0.78rem; color: rgba(255, 255, 255, 0.66); letter-spacing: 0.06em; }
.cx-door__cta { display: grid; justify-items: center; gap: 10px; margin-top: 6px; }
.cx-door__cta .cta-micro { margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); }
.cx-doors { width: min(100%, 1100px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair-d); margin-top: clamp(24px, 4vh, 48px); }
.cx-doors a { display: grid; gap: 6px; justify-items: center; padding: 22px 14px 26px; color: #fff; text-decoration: none; transition: background-color 0.3s ease; }
.cx-doors a + a { border-left: 1px solid var(--hair-d); }
.cx-doors a:hover { background: rgba(255, 255, 255, 0.06); }
.cx-doors b { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing: 0.08em; }
.cx-doors span { font-size: 0.84rem; color: var(--on-2); }
.cx-notes { background: var(--night); padding: 22px 0 26px; border-top: 1px solid var(--hair-d); }
.cx-notes .notes p { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 700px) {
  .cx-door { padding-top: calc(var(--header-h) + 24px); }
  .cx-doors a { padding: 14px 6px 16px; gap: 0; }
  .cx-doors b { font-size: 1rem; }
  .cx-doors span { display: none; }
  .cx-door__tag { top: auto; bottom: 72px; }
}
/* silver pill on every dark ground */
.cx :is(.cx-door, .on-navy, #how) .btn { --btn-bg: var(--silver-grad); --btn-fg: var(--navy); --btn-hover: #fff; }

/* ---------- side rail + always-visible CTA pill (desktop; phones keep the sticky bar) ---------- */
.cx-rail { position: fixed; top: var(--header-h); right: 0; bottom: 0; width: 44px; z-index: 90; display: none; align-items: center; justify-content: center;
  background: var(--navy); border-left: 1px solid var(--hair-d); }
.cx-rail span { writing-mode: vertical-rl; font-size: 0.76rem; letter-spacing: 0.32em; color: var(--silver-text); white-space: nowrap; }
.cx-pill { position: fixed; left: 24px; bottom: 24px; z-index: 95; display: none; align-items: center; min-height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--silver-grad, #E9ECF1); color: var(--navy); font-weight: 700; letter-spacing: 0.08em; text-decoration: none;
  box-shadow: 0 16px 36px -14px rgba(4, 17, 57, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.8); transition: transform 0.2s ease; }
.cx-pill:hover { transform: translateY(-2px); }
@media (min-width: 1100px) {
  .cx-rail { display: flex; }
  .cx-pill { display: inline-flex; }
  body:has(main.cx) main, body:has(main.cx) .site-footer { margin-right: 44px; }
  body:has(main.cx) .sticky-cta { display: none; }
}

/* ---------- quiet tiles: edge to edge, colour change is the divider ---------- */
.cx .section { padding-block: var(--tile-pad); }
.cx .section--mist, .cx #faq { background: var(--porcelain); }
.cx #process { background: #fff; }
.cx #how { background: var(--ink); color: #fff; }
.cx #how .headline-xl, .cx #how .lead { color: #fff; }
.cx #how .how { background: transparent; box-shadow: none; padding: 0; gap: clamp(14px, 2vw, 24px); }
.cx #how .how figcaption strong { color: #fff; }
.cx #how .how figcaption span, .cx #how .how-note, .cx #how .how figcaption .no { color: var(--silver-text); }
.cx .headline-xl { font-size: clamp(2.1rem, 4.4vw, 3.8rem); }
.cx .section-intro.center { margin-bottom: clamp(36px, 5vw, 64px); }
.cx :is(.room, .how, .proof-card, .faq details, .form-panel, .lounge) { box-shadow: none; }
.cx .room { background: transparent; padding: 0; }
.cx .room-media { border-radius: 18px; }
.cx .btn svg { display: none; }

/* ---------- proof: in-house ATP comparison folded into 「参考データ」 (kept, not deleted) ---------- */
.cx-more { margin: clamp(32px, 4vw, 48px) auto 0; max-width: 1100px; border-top: 1px solid var(--hair-d); }
.cx-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px;
  color: #fff; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.06em; }
.cx-more > summary::-webkit-details-marker { display: none; }
.cx-more > summary::after { content: "+"; font-family: var(--font-body); font-size: 1.4rem; color: var(--silver-text); transition: transform 0.3s ease; }
.cx-more[open] > summary::after { transform: rotate(45deg); }
.cx-more > summary small { margin-left: 12px; font-family: var(--font-body); font-size: 0.8rem; color: var(--silver-text); letter-spacing: 0.04em; }
.cx-more__body { background: var(--porcelain); color: var(--ink); border-radius: 18px; padding: clamp(24px, 4vw, 48px); margin-bottom: 8px; }
.cx-more__body .container { padding: 0; max-width: none; }

/* ---------- CTA at each decision point, with its reassurance line ---------- */
.cx-decide { display: grid; justify-items: center; gap: 10px; margin-top: clamp(36px, 5vw, 56px); text-align: center; }
.cx-decide .cta-micro { margin: 0; font-size: 0.82rem; }
.cx .on-navy .cx-decide .cta-micro { color: var(--silver-text); }

/* ---------- Option B: logo cobalt as the single action colour on light grounds ---------- */
html[data-palette="b"] .cx :is(.section--mist, #process, #faq) .btn,
html[data-palette="b"] .site-header .btn { --btn-bg: #1F5FD1; --btn-fg: #fff; --btn-hover: #1A50B4; }

@media (prefers-reduced-motion: reduce) { .cx-door__films video { transition: none; } }

/* fixes after review: header actions right-aligned without the nav; proof on white (rhythm D L D L D L D L D);
   pill appears only after the film door (the door has its own CTA) */
body:has(main.cx) .header-actions { margin-left: auto; }
.cx .cx-evidence { background: #fff; color: var(--ink); }
.cx .cx-evidence :is(.headline-xl, .lead) { color: var(--ink); }
.cx .cx-evidence .notes p, .cx .cx-evidence .lab-mark { color: var(--steel); }
.cx .cx-evidence .text-link { color: var(--ink); }
.cx .cx-evidence .cx-more { border-top-color: rgba(7, 26, 82, 0.14); }
.cx .cx-evidence .cx-more > summary { color: var(--ink); }
.cx .cx-evidence .cx-more > summary::after, .cx .cx-evidence .cx-more > summary small { color: var(--steel); }
.cx .cx-evidence .cx-more__body { background: var(--porcelain); }
.cx-pill { opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.cx-pill.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- "吹き付けるだけ" steps: real frosted cards on navy, centred, calm type ---------- */
.cx #how .how { gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.cx #how .how figure { display: flex; flex-direction: column; padding: 10px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px -40px rgba(0, 0, 0, 0.6); }
.cx #how .how figure + figure { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px -40px rgba(0, 0, 0, 0.6); }
.cx #how .how-art { border-radius: 18px; }
.cx #how .how figcaption { flex: 1; display: grid; align-content: start; justify-items: center; text-align: center; gap: 10px; padding: 26px 18px 22px; }
.cx #how .how figcaption strong { display: grid; justify-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 1.6vw, 1.5rem); letter-spacing: 0.04em; line-height: 1.4; color: #fff; }
.cx #how .how figcaption .no { font-family: var(--font-body); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; color: var(--silver-text);
  padding: 3px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(201, 211, 234, 0.35); }
.cx #how .how figcaption > span { max-width: 22em; font-size: 0.95rem; line-height: 1.85; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.82); }
.cx #how .lead { color: rgba(255, 255, 255, 0.82); }
/* floating pill: bottom-right, clear of the content column */
@media (min-width: 1100px) { .cx-pill { left: auto; right: 68px; } }