/* =====================================================================
   Strategy Hero — front page scroll sequence
   COVER (dark, logo line-draw) → CONCEPT (red, Beyond the Blind Spot.)
   All rules are scoped under #strategy-hero and use the sh- prefix so
   nothing collides with the theme's global styles.
   ===================================================================== */

#strategy-hero{
  --sh-mag:#F02680;
  --sh-bg-dark:#0A0A0C;
  --sh-ink-inv:#F5F5F7;
  --sh-dim:#8C8C96;
  --sh-red:#CC3D29;
  --sh-blob:#CF4C3D;
  --sh-pink:#F6BFBF;
  --sh-pinkhi:#FFE3E0;
  --sh-en:"Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --sh-jp:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;
  position:relative;
}
#strategy-hero *{margin:0;padding:0;box-sizing:border-box}

/* shared scroll progress bar (above the fixed 50px site header) */
#strategy-hero .sh-prog{
  position:fixed;left:0;top:0;height:3px;width:0;background:var(--sh-mag);
  z-index:101;box-shadow:0 0 12px rgba(240,38,128,.8)}

/* =========================== COVER (dark) =========================== */
#strategy-hero .sh-cover{position:relative;height:240vh;
  background:var(--sh-bg-dark);color:var(--sh-ink-inv)}
#strategy-hero .sh-cover-pin{position:sticky;top:0;height:100vh;width:100%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  isolation:isolate;background:var(--sh-bg-dark)}

#strategy-hero .sh-grid{position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 46%,#000 0%,transparent 72%);
          mask-image:radial-gradient(circle at 50% 46%,#000 0%,transparent 72%)}
#strategy-hero .sh-ambient{position:absolute;left:50%;top:46%;width:920px;height:920px;
  z-index:0;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(240,38,128,.26),rgba(240,38,128,.05) 42%,transparent 66%);
  filter:blur(6px)}
#strategy-hero .sh-cursor{position:absolute;width:420px;height:420px;left:0;top:0;z-index:1;
  pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;
  mix-blend-mode:screen;opacity:0;
  background:radial-gradient(circle,rgba(240,38,128,.33),transparent 60%);transition:opacity .4s}
#strategy-hero .sh-cover-pin:hover .sh-cursor{opacity:1}
#strategy-hero .sh-vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 50% 44%,transparent 40%,rgba(0,0,0,.55) 100%)}

#strategy-hero .sh-content{position:relative;z-index:3;display:flex;flex-direction:column;
  align-items:center;text-align:center;will-change:transform}
#strategy-hero .sh-logo{width:min(480px,72vw);margin-bottom:0;
  filter:drop-shadow(0 0 26px rgba(240,38,128,.25))}
#strategy-hero .sh-logo svg{width:100%;height:auto;overflow:visible}
#strategy-hero .sh-logo path{stroke-linecap:round;stroke-linejoin:round}
#strategy-hero .sh-title{font-size:60px;font-weight:800;letter-spacing:4px;margin-top:14px;
  line-height:1.1;opacity:0;color:var(--sh-ink-inv)}
#strategy-hero .sh-sub{font-size:15px;letter-spacing:8px;color:var(--sh-dim);font-weight:600;
  margin-top:16px;opacity:0}
#strategy-hero .sh-rule{width:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--sh-mag),transparent);margin:26px 0 18px}
#strategy-hero .sh-tag{font-size:16px;letter-spacing:3px;color:var(--sh-ink-inv);
  font-style:italic;font-weight:500;opacity:0;font-family:var(--sh-en)}

#strategy-hero .sh-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  z-index:3;font-size:11px;letter-spacing:3px;color:#6a6a72;display:flex;flex-direction:column;
  align-items:center;gap:8px;font-family:var(--sh-en)}
#strategy-hero .sh-hint .sh-arrow{width:1px;height:26px;
  background:linear-gradient(#6a6a72,transparent);animation:sh-sc 1.6s ease-in-out infinite}

/* ==================== CONCEPT (red, compact — one screen) ==================== */
#strategy-hero .sh-concept{position:relative;height:150vh;background:var(--sh-red)}
#strategy-hero .sh-concept-pin{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--sh-red)}

/* brand blob sits behind the copy as a faint texture */
#strategy-hero .sh-blobsvg{position:absolute;left:50%;top:50%;width:118vmax;height:118vmax;
  transform:translate(-50%,-50%);opacity:.14;pointer-events:none;will-change:transform,opacity}
#strategy-hero .sh-blobsvg path{fill:var(--sh-blob)}

/* all copy stacked compactly, revealed together on scroll-in */
#strategy-hero .sh-concept-inner{position:relative;z-index:2;text-align:center;padding:0 24px;
  max-width:1040px;opacity:0;transform:translateY(26px);will-change:transform,opacity}
#strategy-hero .sh-bighead{font-family:var(--sh-en);font-weight:800;line-height:1.04;
  font-size:clamp(46px,7.4vw,92px);letter-spacing:-.01em;margin-bottom:26px}
#strategy-hero .sh-bighead span{display:block}
#strategy-hero .sh-bh1{color:var(--sh-pink)}
#strategy-hero .sh-bh2{color:#fff}
#strategy-hero .sh-jptitle{font-family:var(--sh-jp);font-weight:800;letter-spacing:3px;
  font-size:clamp(18px,2.3vw,27px);color:#fff;margin-bottom:20px}
#strategy-hero .sh-enline{display:inline-block;font-family:var(--sh-en);font-weight:600;
  letter-spacing:.02em;font-size:clamp(15px,1.9vw,24px);color:var(--sh-pink);
  padding-bottom:6px;margin-bottom:26px;
  background-image:linear-gradient(var(--sh-pink),var(--sh-pink));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px}
#strategy-hero .sh-desc{font-family:var(--sh-jp);font-size:clamp(13px,1.35vw,16px);line-height:2.05;
  color:var(--sh-pink);opacity:.94}

#strategy-hero .sh-hint2{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  z-index:4;font-size:11px;letter-spacing:3px;color:var(--sh-pink);opacity:.8;display:flex;
  flex-direction:column;align-items:center;gap:8px;font-family:var(--sh-en)}
#strategy-hero .sh-hint2 .sh-bar{width:1px;height:26px;
  background:linear-gradient(var(--sh-pink),transparent);animation:sh-sc 1.6s ease-in-out infinite}

@keyframes sh-sc{0%{opacity:.2;transform:translateY(-6px)}50%{opacity:1}100%{opacity:.2;transform:translateY(6px)}}

/* reduced-motion: collapse the long scroll and show final states */
@media (prefers-reduced-motion: reduce){
  #strategy-hero .sh-cover{height:100vh}
  #strategy-hero .sh-concept{height:100vh}
  #strategy-hero .sh-concept-inner{opacity:1!important;transform:none!important}
  #strategy-hero .sh-enline{background-size:100% 2px!important}
}

/* =====================================================================
   Front page — DIGITALEYES capability block (何ができるか) + PRODUCTS head
   (loaded only on the front page via strategy-hero enqueue)
   ===================================================================== */
.top-solution .block-digitaleyes .de-caps{
  list-style:none;margin:10px auto 0;padding:0;max-width:900px;width:100%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.top-solution .block-digitaleyes .btn-group{margin-top:32px}
.top-solution .block-digitaleyes .de-caps li{
  background:#fff;border-radius:12px;padding:18px 18px 20px}
.top-solution .block-digitaleyes .de-cap-label{
  display:inline-block;padding:3px 12px;border-radius:999px;background:#F02680;color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.08em;margin-bottom:10px}
.top-solution .block-digitaleyes .de-caps b{
  display:block;font-size:16px;font-weight:800;color:#111;margin-bottom:6px;line-height:1.4}
.top-solution .block-digitaleyes .de-cap-desc{
  display:block;font-size:13px;line-height:1.75;color:#555}
.top-solution .block-digitaleyes .de-stat{
  display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:24px 0 8px}
.top-solution .block-digitaleyes .de-stat-num{
  font-family:"Inter",sans-serif;font-weight:800;font-size:44px;line-height:1;
  color:#F02680;letter-spacing:-.01em}
.top-solution .block-digitaleyes .de-stat-num i{
  font-style:normal;color:#111;font-size:.58em;margin:0 .16em;vertical-align:middle}
.top-solution .block-digitaleyes .de-stat-cap{font-size:12px;color:#666;letter-spacing:.02em}
.top-solution h2.de-products-head{margin-top:80px}
@media (max-width:767px){
  .top-solution .block-digitaleyes .de-caps{grid-template-columns:1fr;gap:12px;max-width:100%}
  .top-solution .block-digitaleyes .de-stat-num{font-size:34px}
  .top-solution h2.de-products-head{margin-top:48px}
}

/* Front page — CORE CONCEPT: AI stance & industry focus block */
.top-concept .concept-focus{max-width:840px;margin:56px auto 8px;text-align:center}
.top-concept .concept-focus-lead{font-size:clamp(19px,2.3vw,26px);font-weight:800;
  line-height:1.5;color:#111;margin-bottom:20px}
.top-concept .concept-focus-body{font-size:clamp(14px,1.4vw,16px);line-height:2;color:#444;
  max-width:760px;margin:0 auto 12px}
.top-concept .concept-focus-em{font-weight:800;color:#F02680;
  background:linear-gradient(transparent 62%, rgba(240,38,128,.14) 0)}
@media (max-width:767px){
  .top-concept .concept-focus{margin:36px auto 4px;text-align:left}
  .top-concept .concept-focus-lead{line-height:1.45}
  .top-concept .concept-focus-body{margin-left:0;margin-right:0}
}

/* =====================================================================
   Mobile hero: KEEP the sticky layout (renders reliably on iOS); just
   shorten the scroll length. JS autoplays the logo on load and reveals
   the concept on scroll-into-view (no scroll-scrub on phones).
   ===================================================================== */
@media (max-width:767px){
  #strategy-hero .sh-cover{height:180vh}
  #strategy-hero .sh-concept{height:140vh}
}

/* ---- Touch / hover micro-interactions (触り心地) ---- */
@media (hover:hover){
  .top-solution .block-digitaleyes .de-caps li{transition:transform .25s ease, box-shadow .25s ease}
  .top-solution .block-digitaleyes .de-caps li:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
}
.top-solution .btn{transition:transform .16s ease}
.top-solution .btn:active{transform:translateY(1px)}