/* ai-center-top-v1: shared FV redesign for national/hokkaido/osaka top pages.
   All rules are scoped under .ai-center-top-v1 so nothing leaks to other pages/components. */

.ai-center-top-v1{--v1-blue:#0b3fae;--v1-blue2:#2f6fed;--v1-ink:#10203a;--v1-ink2:#4b5b73;--v1-line:#e3e9f2;--v1-bg:#ffffff;
  color:var(--v1-ink);background:var(--v1-bg);
}
.ai-center-top-v1 *{box-sizing:border-box}
.ai-center-top-v1 img{max-width:100%;display:block}
.ai-center-top-v1 button{font:inherit;cursor:pointer}

/* ---------- header ---------- */
.ai-center-top-v1 .v1-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--v1-line)}
.ai-center-top-v1 .v1-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.ai-center-top-v1 .v1-logo img{width:34px;height:34px;flex:none}
.ai-center-top-v1 .v1-logo-text{font-weight:800;line-height:1.25;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-center-top-v1 .v1-logo-text small{display:block;font-weight:600;font-size:.68rem;color:var(--v1-ink2)}
.ai-center-top-v1 .v1-header-right{display:flex;align-items:center;gap:8px;flex:none}
.ai-center-top-v1 .v1-pills{display:none;align-items:center;gap:6px}
.ai-center-top-v1 .v1-pill{font-size:.68rem;font-weight:700;padding:5px 10px;border-radius:999px;background:#eef4ff;color:var(--v1-blue);white-space:nowrap}
.ai-center-top-v1 .v1-pill-region{background:var(--v1-blue);color:#fff}
.ai-center-top-v1 .v1-menu-btn{flex:none}

@media (min-width:760px){
  .ai-center-top-v1 .v1-pills{display:flex}
}

/* ---------- hero ---------- */
.ai-center-top-v1 .v1-hero{padding:22px 16px 30px}
.ai-center-top-v1 .v1-hero-grid{display:grid;grid-template-areas:
    "region" "ask" "h1" "sub" "visual" "trust" "ctaP" "ctaS";
  gap:12px;max-width:1180px;margin:0 auto}
.ai-center-top-v1 .v1-region-inline{grid-area:region;display:flex;gap:6px;flex-wrap:wrap}
.ai-center-top-v1 .v1-region-inline .v1-pill{background:#eef4ff;color:var(--v1-blue)}
.ai-center-top-v1 .v1-region-inline .v1-pill-region{background:var(--v1-blue);color:#fff}
.ai-center-top-v1 .v1-ask{grid-area:ask;font-size:.92rem;font-weight:700;color:var(--v1-blue2);margin:0}
.ai-center-top-v1 .v1-h1{grid-area:h1;margin:0;font-size:1.7rem;line-height:1.35;font-weight:800;letter-spacing:.01em}
.ai-center-top-v1 .v1-h1 .v1-accent{color:var(--v1-blue2)}
.ai-center-top-v1 .v1-sub{grid-area:sub;margin:0;font-size:.92rem;line-height:1.8;color:var(--v1-ink2)}
.ai-center-top-v1 .v1-visual{grid-area:visual}
.ai-center-top-v1 .v1-visual .v1-picture{display:block;width:100%;aspect-ratio:1024/1536;overflow:hidden}
.ai-center-top-v1 .v1-visual img{width:100%;height:100%;object-fit:contain}
.ai-center-top-v1 .v1-trust{grid-area:trust;display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.ai-center-top-v1 .v1-trust li{font-size:.72rem;font-weight:700;color:var(--v1-blue);background:#eef4ff;border-radius:999px;padding:5px 11px}
.ai-center-top-v1 .v1-cta-primary{grid-area:ctaP;display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;border-radius:14px;background:var(--v1-blue2);color:#fff;font-weight:800;font-size:1rem;border:none;text-decoration:none;padding:0 18px;width:100%}
.ai-center-top-v1 .v1-cta-secondary{grid-area:ctaS;display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;border-radius:14px;background:#fff;color:var(--v1-blue2);font-weight:800;font-size:.94rem;border:1.5px solid var(--v1-blue2);text-decoration:none;padding:0 18px;width:100%}
.ai-center-top-v1 .v1-cta-primary:hover,.ai-center-top-v1 .v1-cta-secondary:hover{filter:brightness(1.05)}
@media (prefers-reduced-motion:no-preference){
  .ai-center-top-v1 .v1-cta-primary,.ai-center-top-v1 .v1-cta-secondary{transition:filter .15s ease,transform .15s ease}
  .ai-center-top-v1 .v1-cta-primary:hover,.ai-center-top-v1 .v1-cta-secondary:hover{transform:translateY(-1px)}
}

@media (min-width:761px){
  .ai-center-top-v1 .v1-hero-grid{grid-template-columns:1.05fr .95fr;grid-template-areas:
      "region  region"
      "ask     visual"
      "h1      visual"
      "sub     visual"
      "trust   visual"
      "ctaRow  visual";
    column-gap:36px;align-items:start}
  .ai-center-top-v1 .v1-region-inline{display:none} /* shown in header on desktop instead */
  .ai-center-top-v1 .v1-h1{font-size:2.35rem}
  .ai-center-top-v1 .v1-visual .v1-picture{aspect-ratio:1535/1024}
  .ai-center-top-v1 .v1-cta-row{grid-area:ctaRow;display:flex;gap:14px}
  .ai-center-top-v1 .v1-cta-primary,.ai-center-top-v1 .v1-cta-secondary{width:auto;padding:0 28px}
}
@media (min-width:1024px){
  .ai-center-top-v1 .v1-h1{font-size:2.7rem}
}

/* ---------- 5 values ---------- */
.ai-center-top-v1 .v1-values{padding:26px 16px;max-width:1180px;margin:0 auto}
.ai-center-top-v1 .v1-values h2{font-size:1.15rem;margin:0 0 16px;text-align:center}
.ai-center-top-v1 .v1-values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ai-center-top-v1 .v1-value{border:1px solid var(--v1-line);border-radius:14px;padding:16px 14px;text-align:left}
.ai-center-top-v1 .v1-value svg{width:26px;height:26px;stroke:var(--v1-blue2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.ai-center-top-v1 .v1-value strong{display:block;font-size:.86rem;margin-bottom:4px}
.ai-center-top-v1 .v1-value span{display:block;font-size:.76rem;color:var(--v1-ink2);line-height:1.6}
@media (min-width:600px){.ai-center-top-v1 .v1-values-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.ai-center-top-v1 .v1-values-grid{grid-template-columns:repeat(5,1fr)}}

/* ---------- AI diagnosis flow (4 steps) ---------- */
.ai-center-top-v1 .v1-flow{padding:26px 16px;max-width:1180px;margin:0 auto}
.ai-center-top-v1 .v1-flow h2{font-size:1.15rem;margin:0 0 16px;text-align:center}
.ai-center-top-v1 .v1-flow-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ai-center-top-v1 .v1-flow-step{border:1px solid var(--v1-line);border-radius:14px;padding:16px 14px;position:relative}
.ai-center-top-v1 .v1-flow-step .v1-flow-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--v1-blue2);color:#fff;font-weight:800;font-size:.78rem;margin-bottom:8px}
.ai-center-top-v1 .v1-flow-step strong{display:block;font-size:.86rem}
@media (min-width:640px){.ai-center-top-v1 .v1-flow-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- region strip ---------- */
.ai-center-top-v1 .v1-region-strip{padding:16px;background:#f5f8ff;border-top:1px solid var(--v1-line);border-bottom:1px solid var(--v1-line)}
.ai-center-top-v1 .v1-region-strip-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:10px;font-size:.82rem;font-weight:700;color:var(--v1-blue)}
.ai-center-top-v1 .v1-region-strip-inner svg{width:18px;height:18px;flex:none;stroke:var(--v1-blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- shared safety ---------- */
.ai-center-top-v1{overflow-x:hidden}
@media (prefers-reduced-motion:reduce){
  .ai-center-top-v1 *{animation:none!important;transition:none!important}
}