/* Sales X — continues the shared backdrop (home-sections.css). Left: copy; right: four service
   cards (2×2). Cards put the image first; below it the label, service name and a short line.
   PC hover / keyboard focus lays a navy overlay with the extra line and「詳しく見る →」over the
   image; devices without hover always show「詳しく見る →」instead (Issue #104). */
.cxsx { padding:clamp(100px,9vw,156px) clamp(24px,4vw,64px) clamp(64px,6vw,104px); color:#07143b; }
.cxsx-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); align-items:center; gap:clamp(28px,3.6vw,64px); max-width:1600px; margin-inline:auto; }
.cxsx-inner>* { min-width:0; }
.cxsx-kicker { display:flex; align-items:center; gap:18px; margin:0 0 clamp(10px,1.4svh,20px); color:#5d6a84; font-family:Inter,Arial,sans-serif; font-size:clamp(11px,.95vw,15px); font-weight:500; letter-spacing:.35em; line-height:1.4; }
.cxsx-kicker::after { content:''; width:44px; height:1px; background:currentColor; opacity:.7; }
.cxsx h2 { margin:0; font-size:clamp(28px,2.6vw,48px); font-weight:900; line-height:1.4; letter-spacing:-.03em; word-break:auto-phrase; overflow-wrap:anywhere; }
.cxsx-lead { max-width:30em; margin:clamp(14px,1.5vw,24px) 0 0; color:#172549; font-size:clamp(14px,1.05vw,17px); line-height:1.95; word-break:auto-phrase; line-break:strict; text-wrap:pretty; }
.cxsx-more { margin-top:clamp(20px,2vw,32px); }

/* Cards: one size, radius and shadow; each service brings its own accent. */
.cxsx-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:clamp(14px,1.5vw,24px); }
.cxsx-card { --cxsx-accent:#1265e8; --cxsx-line:#1265e8; --cxsx-text:#0d4fb8; --cxsx-soft:#eaf2ff;
  position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:16px; background:rgba(255,255,255,.94); color:#07143b; box-shadow:0 16px 40px rgba(17,52,104,.1); transition:box-shadow .3s ease,transform .3s cubic-bezier(.16,1,.3,1); }
.cxsx-card--bizrecruit { --cxsx-accent:#ec2d87; --cxsx-line:#ec2d87; --cxsx-text:#c0186b; --cxsx-soft:#ffeef6; }
.cxsx-card--bizaio { --cxsx-accent:#6a4dff; --cxsx-line:linear-gradient(90deg,#7c4dff,#2f6bff); --cxsx-text:#5b30d6; --cxsx-soft:#f1eeff; }
.cxsx-card--bizkarte { --cxsx-accent:#f26a1b; --cxsx-line:#f26a1b; --cxsx-text:#b4470b; --cxsx-soft:#fff1e6; }
/* Images are 16:9; each keeps its subject in view when the frame is wider than that. */
.cxsx-media { position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; background:var(--cxsx-soft); }
.cxsx-media::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--cxsx-line); }
.cxsx-media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.cxsx-card--bizform .cxsx-media img { object-position:50% 55%; }
.cxsx-card--bizrecruit .cxsx-media img { object-position:50% 32%; }
.cxsx-card--bizaio .cxsx-media img { object-position:50% 30%; }
.cxsx-card--bizkarte .cxsx-media img { object-position:50% 45%; }
.cxsx-body { display:flex; flex:1; flex-direction:column; padding:clamp(14px,1.2vw,20px) clamp(16px,1.5vw,24px) clamp(14px,1.2vw,20px); }
.cxsx-eyebrow { align-self:flex-start; padding:3px 10px; border-radius:999px; background:var(--cxsx-soft); color:var(--cxsx-text); font-size:clamp(11px,.78vw,12px); font-weight:800; letter-spacing:.06em; line-height:1.5; }
.cxsx-name { margin-top:6px; color:#07143b; font-size:clamp(19px,1.55vw,26px); font-weight:900; line-height:1.3; letter-spacing:-.02em; }
/* Line breaks in the short line are dropped: phrases still wrap as units (auto-phrase), and every card stays at two lines. */
.cxsx-desc br { display:none; }
.cxsx-desc { margin-top:6px; color:#2a3654; font-size:clamp(12px,.86vw,14px); line-height:1.75; word-break:auto-phrase; line-break:strict; text-wrap:pretty; overflow-wrap:anywhere; }
.cxsx-cta { display:inline-flex; align-items:center; gap:8px; font-size:clamp(12px,.9vw,14px); font-weight:800; }
.cxsx-arrow { font-size:18px; line-height:1; transition:transform .25s cubic-bezier(.16,1,.3,1); }
/* Overlay (PC hover / keyboard focus): navy over the image, the extra line and the link text. */
.cxsx-hover { position:absolute; inset:0; z-index:1; display:none; flex-direction:column; justify-content:flex-end; gap:clamp(8px,1vw,12px); padding:clamp(14px,1.4vw,22px) clamp(16px,1.6vw,24px); background:linear-gradient(180deg,rgba(7,20,59,.62),rgba(7,20,59,.9)); color:#fff; opacity:0; transition:opacity .25s ease; }
.cxsx-detail { font-size:clamp(12px,.9vw,14px); font-weight:500; line-height:1.75; word-break:auto-phrase; line-break:strict; text-wrap:pretty; overflow-wrap:anywhere; }
.cxsx-hover .cxsx-cta { color:#fff; }
.cxsx-hover .cxsx-cta::before { content:''; width:22px; height:2px; margin-right:2px; border-radius:2px; background:var(--cxsx-line); }
/* Without hover the link text stays under the short line. */
.cxsx-cta--touch { margin-top:auto; padding-top:10px; color:var(--cxsx-text); }
.cxsx-card:focus-visible { outline:3px solid #005cff; outline-offset:3px; }

@media (hover:hover) and (min-width:769px) {
  .cxsx-hover { display:flex; }
  .cxsx-cta--touch { display:none; }
  .cxsx-card:hover,.cxsx-card:focus-visible { box-shadow:0 22px 52px rgba(17,52,104,.16); transform:translateY(-3px); }
  .cxsx-card:hover .cxsx-hover,.cxsx-card:focus-visible .cxsx-hover { opacity:1; }
  .cxsx-card:hover .cxsx-media img,.cxsx-card:focus-visible .cxsx-media img { transform:scale(1.04); }
  .cxsx-card:hover .cxsx-arrow,.cxsx-card:focus-visible .cxsx-arrow { transform:translateX(4px); }
}
@media (prefers-reduced-motion:no-preference) {
  .cxh-motion-ready .cxsx-grid .cxsx-card:nth-child(2) { transition-delay:.08s; }
  .cxh-motion-ready .cxsx-grid .cxsx-card:nth-child(3) { transition-delay:.16s; }
  .cxh-motion-ready .cxsx-grid .cxsx-card:nth-child(4) { transition-delay:.24s; }
  .cxh-motion-ready .cxsx-grid .cxsx-card.cxh-in-view { transition-delay:0s; }
}
@media (prefers-reduced-motion:reduce) {
  .cxsx-card,.cxsx-media img,.cxsx-arrow,.cxsx-hover { transition:none; }
  .cxsx-card:hover,.cxsx-card:focus-visible { transform:none; }
}

/* Tablet: copy above, cards stay 2×2 with whole 16:9 images. */
@media (max-width:1100px) {
  .cxsx-inner { grid-template-columns:minmax(0,1fr); }
  .cxsx-lead { max-width:40em; }
}
/* SP: copy first, then four cards in one column; images stay 16:9 so nothing is cut off. */
@media (max-width:768px) {
  .cxsx { padding:clamp(80px,21vw,116px) 16px 56px; }
  .cxsx-inner { gap:24px; max-width:560px; }
  .cxsx h2 { font-size:clamp(28px,7.4vw,40px); }
  .cxsx-lead { font-size:clamp(14px,3.8vw,16px); }
  .cxsx-lead br { display:none; }
  .cxsx-grid { grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:16px; }
  .cxsx-name { font-size:clamp(21px,6vw,25px); }
  .cxsx-desc,.cxsx-cta { font-size:14px; }
}

/* PC: the four cards fit one laptop screen — image height follows the screen height (wider than
   16:9 on short screens; object-position keeps each subject in view). */
@media (min-width:1101px) {
  .cxsx { padding-top:clamp(56px,8svh,156px); padding-bottom:clamp(28px,4svh,104px); }
  .cxsx-media { aspect-ratio:auto; height:clamp(100px,calc(50svh - 214px),300px); }
  .cxsx-grid { gap:clamp(12px,1.8svh,24px); }
  .cxsx-body { padding-block:clamp(10px,1.4svh,20px); }
}