/* ===================== Reset ===================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
ul,ol{ list-style:none; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
table{ border-collapse:collapse; }

/* ===================== Tokens (ispec Visual Guideline 2024) ===================== */
:root{
  --solid:#030410;      /* SOLID DARK */
  --ink:#25393F;        /* SECOND DARK — main text */
  --ink-2:#2B5059;      /* SPEC BLUE — headings / primary */
  --ink-soft:#5f757c;   /* muted text */
  --spec-light:#80A6AE; /* SPEC LIGHT */
  --mint:#C4EAE6;       /* SOFT MINT */
  --apricot:#FCE8C1;    /* APRICOT TINT */
  --lavender:#B7C1FB;   /* BLUE LAVENDER */
  --paper:#ffffff; --paper-2:#f5f9fa; --hairline:#e2eaec;

  /* signature gradients: warm↔cool + cool-blue for numbers/pills */
  --grad-cool:linear-gradient(135deg,#7fb2bc 0%, #2B5059 100%);
  --grad-num:linear-gradient(165deg,#5ea2b2 0%, #274c55 92%);
  --grad-arrow:linear-gradient(180deg,#96c8cf 0%, #3f7c88 100%);
  --grad-warmcool:linear-gradient(120deg, var(--apricot) 0%, var(--mint) 52%, var(--lavender) 100%);

  --sans:'Noto Sans JP','Inter',system-ui,-apple-system,sans-serif;
  --mono:'Inter',var(--sans);
  --wrap:1120px;
  --shadow:0 16px 44px rgba(37,57,63,.10);
  --shadow-sm:0 8px 22px rgba(37,57,63,.07);
}
html{ -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body{
  font-family:var(--sans); color:var(--ink); line-height:1.8;
  background:
    radial-gradient(ellipse 1100px 620px at 102% -4%, rgba(196,234,230,.5), transparent 60%),
    radial-gradient(ellipse 900px 560px at -6% -2%, rgba(252,232,193,.55), transparent 55%),
    radial-gradient(ellipse 1000px 900px at 50% 118%, rgba(183,193,251,.28), transparent 62%),
    #ffffff;
  background-attachment:fixed;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* signature top bar */
.topbar-grad{ height:5px; background:var(--grad-warmcool); }

/* text helpers */
.grad-num{ background:var(--grad-num); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.down-arrow{ width:42px; height:32px; margin:8px auto 0; background:var(--grad-arrow); clip-path:polygon(32% 0,68% 0,68% 52%,100% 52%,50% 100%,0 52%,32% 52%); opacity:.92; }
.down-arrow.sm{ width:30px; height:23px; margin-top:5px; }

.eyebrow{ font-family:var(--mono); font-size:12px; font-weight:800; letter-spacing:.2em; color:var(--ink-2); text-transform:uppercase; display:inline-flex; align-items:center; gap:12px; }
.eyebrow::before{ content:''; width:26px; height:3px; border-radius:3px; background:var(--grad-cool); display:inline-block; }
.sec-title{ font-size:clamp(24px,3.4vw,36px); font-weight:900; letter-spacing:-.02em; line-height:1.34; color:var(--ink); margin:14px 0 16px; }
.sec-title em{ font-style:normal; background:var(--grad-num); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.sec-title .u{ background:linear-gradient(transparent 62%, rgba(196,234,230,.75) 62%); }
.sec-title .sec-logo{ height:.82em; width:auto; vertical-align:-.08em; margin:0 .1em; display:inline-block; }
.sec-lead{ font-size:16px; line-height:1.95; color:var(--ink-soft); max-width:62ch; }
.sec-lead strong{ color:var(--ink-2); font-weight:700; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* brand name pills */
.pill-sailai{ display:inline-block; background:var(--grad-cool); color:#fff; font-weight:900; letter-spacing:.01em; border-radius:999px; padding:.12em .55em; box-shadow:0 6px 16px rgba(43,80,89,.28); }
.name-cloudsail{ color:var(--ink-2); font-weight:900; }

/* ===================== Buttons ===================== */
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14px; border-radius:999px; padding:12px 24px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; }
.btn-primary{ background:linear-gradient(135deg,#F4A947 0%, #D97318 100%); color:#4a320b; border:none; box-shadow:0 8px 20px rgba(180,120,30,.28); }
.btn-primary:hover{ background:linear-gradient(135deg,#ef9c34 0%, #c8680f 100%); transform:translateY(-2px); box-shadow:0 12px 26px rgba(180,120,30,.36); }
.btn-ghost{ background:#fff; color:var(--ink-2); border:1.5px solid var(--hairline); }
.btn-ghost:hover{ border-color:var(--spec-light); background:var(--paper-2); }

/* ===================== Header ===================== */
.topbar{ background:var(--ink); }
.topbar .wrap{ padding:3px 24px; }
.topbar .tb-txt{ font-size:11.5px; font-weight:700; letter-spacing:.02em; line-height:1.5; color:#fff; }
.topbar .tb-sep{ color:rgba(255,255,255,.4); margin:0 9px; }
@media(max-width:600px){
  .topbar .wrap{ padding:3px 14px; }
  .topbar .tb-txt{ font-size:10.5px; white-space:nowrap; letter-spacing:0; }
  .topbar .tb-ruby, .topbar .tb-full{ display:none; }
  .topbar .tb-sep{ margin:0 6px; }
}
.hdr{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(160%) blur(12px); box-shadow:0 2px 16px rgba(37,57,63,.06); }
.hdr .row{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.hdr .brand-nav{ display:flex; align-items:center; gap:44px; }
.hdr .brand{ display:flex; align-items:center; gap:12px; }
.hdr .brand-link{ display:inline-flex; text-decoration:none; cursor:pointer; }
.hdr .brand .ip{ height:20px; width:auto; }
.hdr .brand .names{ display:flex; align-items:center; gap:8px; font-family:'Inter',var(--sans); font-weight:900; font-size:23px; letter-spacing:-.02em; color:var(--ink); }
.hdr .brand .brand-mark{ display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.hdr .brand .brand-logo{ height:27px; width:auto; display:block; }
.hdr .brand .brand-ruby{ font-size:9.5px; font-weight:700; letter-spacing:.34em; color:var(--ink-2); margin-top:6px; padding-left:.34em; }
.hdr .brand .names .x{ color:var(--spec-light); font-weight:400; }
.hdr .brand .names .cs{ color:var(--ink-2); }
.hdr nav{ display:flex; align-items:center; gap:26px; }
.hdr nav a{ font-size:13.5px; font-weight:700; color:var(--ink-2); }
.hdr nav a:hover{ color:var(--spec-light); }
.hdr .btn{ padding:9px 18px; font-size:13.5px; }
.hdr-actions{ display:flex; align-items:center; gap:10px; }
.btn-line{ background:#fff; color:var(--ink); border:1.6px solid var(--ink-2); box-shadow:0 6px 16px rgba(43,80,89,.10); }
.btn-line:hover{ background:#f5f9fa; border-color:var(--ink); transform:translateY(-2px); box-shadow:0 10px 22px rgba(43,80,89,.16); }
.hamburger{ display:none; width:40px; height:38px; border:none; background:transparent; align-items:center; justify-content:center; cursor:pointer; padding:0; flex:0 0 auto; }
.hamburger span{ display:block; width:18px; height:2px; background:var(--ink-2); border-radius:2px; position:relative; transition:background .2s; }
.hamburger span::before, .hamburger span::after{ content:''; position:absolute; left:0; width:18px; height:2px; background:var(--ink-2); border-radius:2px; transition:transform .2s, top .2s; }
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }
.hamburger.open span{ background:transparent; }
.hamburger.open span::before{ top:0; transform:rotate(45deg); }
.hamburger.open span::after{ top:0; transform:rotate(-45deg); }
.mobile-menu{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); box-shadow:0 14px 30px rgba(37,57,63,.12); padding:12px 24px 20px; flex-direction:column; }
.mobile-menu.open{ display:flex; }
.mobile-menu .mm-link{ padding:13px 4px; font-weight:700; font-size:15px; color:var(--ink-2); border-bottom:1px solid var(--hairline); }
.mobile-menu .mm-doc{ margin-top:14px; width:100%; justify-content:center; }
@media(max-width:860px){
  .hdr nav.links{ display:none; }
  .hdr-actions .hdr-doc{ display:none; }
  .hamburger{ display:inline-flex; }
}

/* ===================== Hero ===================== */
.hero{ position:relative; background:
    radial-gradient(ellipse 1150px 660px at 100% -8%, rgba(196,234,230,.92), transparent 56%),
    radial-gradient(ellipse 820px 520px at -8% 2%, rgba(252,232,193,.46), transparent 52%),
    radial-gradient(ellipse 1100px 900px at 55% 122%, rgba(183,193,251,.36), transparent 60%),
    linear-gradient(180deg, rgba(196,234,230,.22), rgba(196,234,230,.05)); }
.hero .wrap{ padding:24px 24px 28px; display:grid; grid-template-columns:1.12fr .88fr; gap:48px; align-items:center; }
.hero .hero-marks{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; margin-bottom:10px; }
.hero .mark{ position:relative; font-size:13.5px; font-weight:800; letter-spacing:-.01em; color:var(--ink-2); line-height:1.5; background:linear-gradient(transparent 52%, rgba(196,234,230,.92) 52%); padding:0 4px 2px; }
.hero h1{ font-size:clamp(30px,4.7vw,52px); font-weight:900; line-height:1.3; letter-spacing:-.03em; margin:14px 0 16px; color:var(--ink-2); }
.hero h1 .h1-logo{ height:.72em; width:auto; vertical-align:-.04em; margin:0 .12em 0 .06em; display:inline-block; }
.hero h1 .hl{ background:var(--grad-num); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.hero h1 .u{ background:linear-gradient(transparent 60%, rgba(196,234,230,.85) 60%); }
.hero h1 .h1-sub{ display:inline-block; margin-top:16px; font-size:clamp(17px,2.1vw,23px); font-weight:800; line-height:1.5; letter-spacing:-.01em; color:var(--ink); }
.hero h1 .h1-sub strong{ background:linear-gradient(transparent 60%, rgba(196,234,230,.92) 60%); color:var(--ink-2); font-weight:900; padding:0 2px; }
.hero p.lead{ font-size:16.5px; line-height:1.95; color:var(--ink-soft); max-width:52ch; }
.hero p.lead strong{ color:var(--ink); font-weight:700; }
.hero .cta{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; margin-top:30px; }
.hero .cta .btn{ padding:15px 32px; font-size:15px; }
.demo-cta{ position:relative; display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:15px; color:#4a320b; background:linear-gradient(135deg,#F4A947 0%, #D97318 100%); border:none; border-radius:999px; padding:15px 32px; box-shadow:0 8px 20px rgba(180,120,30,.28); transition:transform .15s ease, box-shadow .2s ease, background .2s ease; }
.demo-cta:hover{ background:linear-gradient(135deg,#ef9c34 0%, #c8680f 100%); transform:translateY(-2px) scale(1.02); box-shadow:0 14px 30px rgba(180,120,30,.42); }
@keyframes ctaGlow{ 0%,100%{ box-shadow:0 8px 20px rgba(180,120,30,.26); } 50%{ box-shadow:0 9px 26px rgba(217,115,24,.5); } }
.demo-cta::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%); background-repeat:no-repeat; background-size:200% 100%; background-position:200% 0; pointer-events:none; }
@keyframes ctaSheen{ 0%{ background-position:200% 0; } 55%,100%{ background-position:-70% 0; } }
@media (prefers-reduced-motion: no-preference){
  .demo-cta{ animation:ctaGlow 2.8s ease-in-out infinite; }
  .demo-cta:hover{ animation:none; }
  .demo-cta::after{ animation:ctaSheen 2.8s ease-in-out .5s 2; }
}
.demo-cta .demo-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:11.5px; font-weight:800; letter-spacing:.02em; color:#fff; background:var(--ink-2); border-radius:999px; padding:5px 16px; white-space:nowrap; box-shadow:0 4px 10px rgba(43,80,89,.22); }
.hero .trust{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:12.5px; color:var(--ink-soft); }
.hero .trust span{ display:inline-flex; align-items:center; gap:7px; }
.hero .trust span::before{ content:'✓'; color:var(--spec-light); font-weight:900; }

/* hero visual: two axes with dashed warm-cool frame */
.axis{ position:relative; padding:0; background:none; }
.axis-inner{ background:transparent; padding:8px; box-shadow:none; }
.axis-card{ padding:16px 4px; }
.axis-card .k{ font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--spec-light); }
.axis-card .n{ font-size:22px; font-weight:900; margin:6px 0 6px; color:var(--ink); }
.axis-card .n .cs{ color:var(--ink-2); }
.axis-card .d{ font-size:13px; color:var(--ink-soft); line-height:1.7; }
.axis-card.axis-solo{ padding:18px 6px 8px; }
.axis-feats{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; margin-top:22px; }
.axis-feats span{ border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; font-size:11.5px; font-weight:800; line-height:1.3; border:1px solid rgba(255,255,255,.8); box-shadow:0 10px 22px rgba(43,80,89,.16), inset 0 2px 7px rgba(255,255,255,.7); }
.axis-feats .b-ai{ width:90px; height:90px; color:#22484f; background:radial-gradient(circle at 32% 26%, #eafaf8, #a9dfd9); }
.axis-feats .b-voice{ width:90px; height:90px; color:#7a5410; background:radial-gradient(circle at 32% 26%, #fff6e6, #f6d79c); }
.axis-feats .b-doc{ width:90px; height:90px; color:#3a3f73; background:radial-gradient(circle at 32% 26%, #f2f4ff, #c3caf9); }
.axis-feats span:nth-child(2){ align-self:flex-start; }
.axis-feats span:nth-child(3){ align-self:flex-end; }
/* hero 製品ビジュアル */
.axis-inner.hv{ padding:20px 18px 18px; }
.hv-top{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.hv-eyebrow{ font-family:var(--mono); font-size:10.5px; font-weight:800; letter-spacing:.14em; color:var(--spec-light); }
.hv-logo{ height:26px; width:auto; }
.hv-stage{ position:relative; height:344px; margin:6px 0 14px; display:flex; align-items:center; justify-content:center; gap:4px; transform:translateY(-12px); }
.hv-stage .phone{ background:linear-gradient(150deg,#25393F,#030410); padding:2px; border-radius:20px; position:relative; box-shadow:0 14px 30px rgba(37,57,63,.20); flex:0 0 auto; transform-origin:center center; }
.hv-stage .phone img{ display:block; width:auto; border-radius:18px; }
.hv-gyoumu{ z-index:2; transform:translateY(20px) rotate(-12deg); }
.hv-gyoumu img{ height:302px; }
.hv-input{ z-index:3; transform:translateY(-4px) rotate(0deg); }
.hv-input img{ height:302px; }
.hv-output{ z-index:2; transform:translateY(20px) rotate(12deg); }
.hv-output img{ height:302px; }
.hv-arrow{ display:flex; align-items:center; flex:0 0 auto; align-self:center; margin:0 -1px; z-index:5; }
.hv-arrow svg{ width:30px; height:auto; filter:drop-shadow(0 2px 3px rgba(37,57,63,.12)); }
.hv-float{ position:absolute; top:0; left:2px; z-index:4; background:var(--ink-2); color:#fff; font-size:11px; font-weight:800; letter-spacing:.02em; border-radius:999px; padding:6px 13px; box-shadow:0 8px 18px rgba(43,80,89,.32); }
.hv-feats{ justify-content:center; transform:translateY(4px); }
.hero{ overflow-x:clip; }
@media(max-width:600px){ .hv-stage{ height:244px; } .hv-gyoumu img,.hv-input img,.hv-output img{ height:180px; } .hv-arrow svg{ width:22px; } }
@media(max-width:400px){ .hv-stage{ height:236px; gap:0; } .hv-gyoumu img,.hv-input img,.hv-output img{ height:172px; } .hv-arrow svg{ width:20px; } }
.axis-link{ display:flex; align-items:center; justify-content:center; gap:10px; margin:4px 0; font-family:var(--mono); font-weight:800; font-size:12.5px; color:var(--ink-2); }
.axis-link::before,.axis-link::after{ content:''; height:2px; flex:1; border-radius:2px; background:var(--grad-warmcool); }
@media(max-width:860px){
  .hero .wrap{ grid-template-columns:1fr; gap:32px; padding-top:44px; padding-bottom:56px; }
  .axis{ order:2; }
  /* CTA2ボタンをモバイルでも横並びに */
  .hero .cta{ flex-wrap:nowrap; gap:12px; }
  .hero .cta > *{ flex:1 1 0; min-width:0; }
  .hero .cta .btn, .hero .cta .demo-cta{ padding:15px 14px; font-size:14.5px; justify-content:center; text-align:center; white-space:nowrap; }
}

/* ===================== Section base ===================== */
section.block{ padding:82px 0; position:relative; }
section.tint{ background:linear-gradient(180deg, rgba(245,249,250,.85), rgba(245,249,250,.85)); }
.sec-head{ text-align:center; display:flex; flex-direction:column; align-items:center; margin-bottom:50px; }
.sec-head .sec-lead{ text-align:center; }

/* ===================== 01 Challenges ===================== */
.chal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.chal{ background:none; border:none; border-radius:0; padding:6px 20px; box-shadow:none; position:relative; overflow:hidden; text-align:center; }
.chal::before{ display:none; }
.chal .ic{ background:none; box-shadow:none; display:flex; justify-content:center; margin-bottom:14px; }
.chal .ic-img{ margin-bottom:10px; }
.chal .ic-img img{ height:108px; width:auto; display:block; filter:drop-shadow(0 6px 10px rgba(37,57,63,.12)); }
.chal .ic svg, .sf .ic svg{ width:44px; height:44px; display:block; filter:drop-shadow(0 5px 7px rgba(37,57,63,.20)); }
.chal h3{ font-size:18px; font-weight:900; letter-spacing:-.01em; margin-bottom:9px; color:var(--ink); }
.chal p{ font-size:14px; line-height:1.85; color:var(--ink-soft); }
.chal p strong{ color:var(--ink-2); font-weight:700; }
.bridge-note{ margin-top:40px; text-align:center; font-size:clamp(16px,2vw,19px); font-weight:900; color:var(--ink); }
.bridge-note em{ font-style:normal; background:var(--grad-num); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* ===================== 02 Sail AI ===================== */
.video-embed{ position:relative; width:100%; max-width:615px; margin:0 auto 44px; aspect-ratio:16/9; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--hairline); background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.use-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:52px; }
.use{ background:#fff; border:1px solid var(--hairline); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.use:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.use.core{ border-color:var(--hairline); box-shadow:var(--shadow-sm); }
.use .u-head{ display:flex; align-items:center; gap:10px; padding:20px 22px 8px; }
.use .u-sub{ padding:0 22px 16px; margin:0; font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.5; letter-spacing:-.01em; }
.use .u-num{ font-family:var(--mono); font-weight:800; font-size:14px; color:var(--spec-light); }
.use .u-t{ font-size:17px; font-weight:900; color:var(--ink); }
.use .u-tag{ margin-left:auto; font-size:10px; font-weight:800; color:#fff; background:var(--grad-cool); border-radius:999px; padding:3px 11px; }
.use .u-frame{ background:var(--paper-2); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:18px; display:flex; align-items:center; justify-content:center; height:270px; }
.use:nth-child(1) .u-frame{ background:linear-gradient(135deg,#eafaf8,#daf1ec); }
.use:nth-child(2) .u-frame{ background:linear-gradient(135deg,#fff7e9,#fbecd4); }
.use:nth-child(3) .u-frame{ background:linear-gradient(135deg,#f3f5ff,#e7eaff); }
.use .u-frame img{ max-height:100%; width:auto; border-radius:10px; box-shadow:0 12px 26px rgba(37,57,63,.16); }
.use .u-frame.duo{ gap:10px; }
.use .u-frame.duo figure{ display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; }
.use .u-frame.duo figure img{ max-height:206px; max-width:100%; width:auto; }
.use .u-frame.duo figcaption{ font-size:10.5px; font-weight:800; color:var(--ink-2); letter-spacing:.02em; }
.use .u-frame.duo .duo-arrow{ font-size:19px; font-weight:900; color:var(--spec-light); flex-shrink:0; margin-bottom:22px; }
.use .u-cap{ padding:16px 22px 22px; font-size:13.5px; line-height:1.75; color:var(--ink-soft); }
.use .u-cap strong{ color:var(--ink-2); font-weight:700; }
.use .u-chips{ display:block; margin-top:12px; padding-top:12px; border-top:1px dashed var(--hairline); font-size:11.5px; font-weight:700; color:var(--ink-2); line-height:1.6; }
.use .u-chips-tags{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.use .u-chip{ font-size:10px; font-weight:800; color:#fff; background:var(--grad-cool); border-radius:999px; padding:4px 12px; letter-spacing:.02em; }

/* concept diagram */
.concept{ background:#fff; border:none; border-radius:22px; padding:30px 34px 26px; box-shadow:0 22px 54px rgba(43,80,89,.16), 0 6px 18px rgba(43,80,89,.08); margin-bottom:52px; position:relative; overflow:hidden; }
.concept .concept-cap{ font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--spec-light); }
.concept h3{ font-size:clamp(18px,2.3vw,23px); font-weight:900; letter-spacing:-.01em; color:var(--ink); margin:6px 0 4px; }
.concept .concept-sub{ font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:10px; }
.concept .concept-lead{ text-align:center; font-size:clamp(16px,2vw,19px); font-weight:800; line-height:1.6; color:var(--ink); letter-spacing:-.01em; max-width:840px; margin:2px auto 6px; }
.concept .concept-lead strong{ color:var(--ink-2); font-weight:800; }
.concept .concept-lead .cl-logo{ height:19px; width:auto; display:inline-block; vertical-align:-3px; margin:0 3px; }
.concept .concept-sub2{ text-align:center; font-size:13px; line-height:1.7; color:var(--ink-soft); max-width:760px; margin:0 auto 10px; }
.concept .concept-sub2 strong{ color:var(--ink-2); font-weight:700; }
.concept .concept-svg{ overflow-x:auto; }
.concept .concept-svg svg{ display:block; width:100%; min-width:560px; max-width:920px; height:auto; margin:0 auto; }
.concept .concept-note{ margin-top:14px; font-size:12px; line-height:1.7; color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--hairline); border-left:3px solid var(--spec-light); border-radius:0 12px 12px 0; padding:12px 16px; }
.concept .concept-note strong{ color:var(--ink-2); font-weight:700; }

/* ===== とは（概観）two-up ===== */
.cs-benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin:36px auto 10px; max-width:900px; }
.cs-benefits .cs-b{ text-align:center; padding:4px 16px; }
.cs-benefits .cs-b .ic{ display:flex; justify-content:center; margin-bottom:12px; }
.cs-benefits .cs-b .ic svg{ width:42px; height:42px; filter:drop-shadow(0 5px 7px rgba(37,57,63,.18)); }
.cs-benefits .cs-b h4{ font-size:16px; font-weight:900; color:var(--ink); margin-bottom:7px; letter-spacing:-.01em; }
.cs-benefits .cs-b p{ font-size:13px; line-height:1.8; color:var(--ink-soft); }
@media(max-width:640px){ .cs-benefits{ grid-template-columns:1fr; gap:22px; max-width:360px; } }
.about2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px; }
.about-card{ background:#fff; border:1px solid var(--hairline); border-radius:18px; padding:28px 26px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.about-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.about-card.a-ai::before{ background:var(--grad-cool); }
.about-card.a-cs::before{ background:var(--grad-warmcool); }
.about-card .cap{ font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--spec-light); }
.about-card h3{ font-size:22px; font-weight:900; margin:6px 0 12px; letter-spacing:-.01em; color:var(--ink); }
.about-card h3 .brand-name{ height:26px; width:auto; display:block; }
.axis-card .n .brand-name{ height:20px; width:auto; display:block; }
.about-card p{ font-size:14px; line-height:1.85; color:var(--ink-soft); }
.about-card p strong{ color:var(--ink-2); font-weight:700; }

/* ===== 実績ロゴ帯 ===== */
.logos-bar{ padding:24px 0; background:#fff; }
.logos-bar .logo-strip{ margin-top:0; }
.logo-strip{ display:flex; justify-content:center; margin-top:20px; overflow:hidden; }
.logo-track{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; }
.logo-track .logo-note{ font-size:11.5px; font-weight:600; color:var(--ink-soft); line-height:1.5; text-align:left; margin-left:6px; padding-left:16px; border-left:1px solid var(--hairline); }
@media(max-width:600px){
  .logo-track .logo-note{ flex-basis:100%; margin-left:0; padding-left:0; border-left:none; text-align:center; font-size:10.5px; white-space:nowrap; margin-top:10px; }
  .logo-track .ln-br{ display:none; }
}
.logo-strip .lg{ background:#fff; border:none; border-radius:8px; box-shadow:none; padding:8px 22px; display:flex; align-items:center; justify-content:center; min-height:54px; }
.logo-strip .lg img{ height:38px; width:auto; max-width:200px; object-fit:contain; display:block; }
/* ゆくゆく横に流す（.is-marquee を付けるだけ／点数が増えたら track を2セット複製）*/
.logo-strip.is-marquee .logo-track{ flex-wrap:nowrap; width:max-content; animation:logoflow 28s linear infinite; }
.logo-strip.is-marquee:hover .logo-track{ animation-play-state:paused; }
@keyframes logoflow{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.logo-strip .lg .nm{ font-size:16px; font-weight:900; color:var(--ink); letter-spacing:-.01em; }
.logo-strip .lg .mt{ font-size:11px; font-weight:600; color:var(--ink-soft); margin-top:3px; }
.logo-note{ text-align:center; font-size:11px; color:var(--ink-soft); margin-top:14px; }


/* ===== 事例カード一覧 ===== */
/* 事例タブ（ユースケース別） */
.case-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:30px; }
.case-tab{ font-size:13.5px; font-weight:800; color:var(--ink-2); background:#fff; border:none; box-shadow:inset 0 0 0 1.5px var(--hairline); border-radius:999px; padding:10.5px 21.5px; cursor:pointer; transition:box-shadow .15s ease, background .15s ease, color .15s ease; white-space:nowrap; }
.case-tab:hover{ box-shadow:inset 0 0 0 1.5px var(--spec-light); }
.case-tab.active{ background:var(--grad-cool); color:#fff; box-shadow:0 6px 16px rgba(43,80,89,.22); }
.case-card[hidden]{ display:none; }
@media(max-width:720px){
  .case-tabs{ gap:8px; margin-bottom:24px; }
  .case-tab{ font-size:12.5px; padding:8px 15px; }
}
.case-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cases-more{ display:none; margin:22px auto 0; padding:12px 28px; font-family:var(--sans); font-size:14px; font-weight:800; color:var(--ink-2); background:#fff; border:1.5px solid var(--hairline); border-radius:999px; cursor:pointer; transition:box-shadow .15s ease, border-color .15s ease; }
.cases-more:hover{ border-color:var(--spec-light); }
.cases-more.show{ display:block; }
.case-card{ background:#fff; border:1px solid var(--hairline); border-radius:18px; box-shadow:var(--shadow-sm); padding:0; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .2s ease; }
.case-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.case-card .cc-eye{ position:relative; height:122px; background:linear-gradient(135deg,#eef4f5 0%, #e3f1ee 60%, #e8edfb 100%); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--hairline); padding:16px; }
.case-card .cc-eye .cc-soon{ position:absolute; top:10px; left:10px; background:var(--ink-2); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.04em; padding:4px 10px; border-radius:999px; box-shadow:0 4px 10px rgba(43,80,89,.22); }
.case-card.is-soon .more.soon{ color:var(--spec-light); }
.case-card .cc-eye img{ max-height:52px; max-width:78%; width:auto; object-fit:contain; display:block; }
.case-card .cc-eye.photo{ padding:0; }
.case-card .cc-eye.photo img{ width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
.case-card .cc-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.case-card .cc-name{ font-size:18px; font-weight:900; color:var(--ink); letter-spacing:-.01em; }
.case-card .cc-name span{ font-size:13px; font-weight:600; }
.case-card .cc-meta{ font-size:12px; font-weight:600; color:var(--ink-soft); margin-top:2px; }
.case-card .cc-title{ font-size:15.5px; font-weight:800; color:var(--ink); line-height:1.55; letter-spacing:-.01em; margin:14px 0 0; }
.case-card .cc-sub{ font-size:12.5px; font-weight:500; color:var(--ink-soft); line-height:1.66; letter-spacing:-.01em; margin:7px 0 0; flex:1; }
.case-card .cc-stat{ margin:16px 0 4px; }
.case-card .cc-stat .v{ font-family:var(--mono); font-size:30px; font-weight:900; letter-spacing:-.03em; color:var(--ink-2); }
.case-card .cc-stat .v .u{ font-size:14px; font-weight:800; }
.case-card .cc-stat .l{ font-size:11.5px; font-weight:700; color:var(--ink-soft); }
.case-card .cc-quote{ font-size:13px; line-height:1.75; color:var(--ink); border-left:3px solid var(--spec-light); padding:6px 0 6px 12px; margin:14px 0; }
.case-card .more{ margin-top:auto; font-size:13px; font-weight:800; color:var(--accent-dk); display:inline-flex; align-items:center; gap:6px; padding-top:14px; }
.case-card .more:hover{ gap:10px; }
@media(max-width:860px){
  .about2{ grid-template-columns:1fr; }
  .case-cards{ grid-template-columns:1fr; }
  /* 事例カード：写真(上)＋テキスト(下)の縦積み。写真は横長すぎない比率で、顔を中央に保つ */
  .case-card .cc-eye{ height:auto; aspect-ratio:3/2; }
  .case-card .cc-eye.photo img{ object-position:center 30%; }
}

/* ===== CTA 3導線 ===== */
.cta-actions{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:860px; margin:0 auto; align-items:stretch; }
.cta-actions .btn{ width:100%; justify-content:center; }
.cta-actions .btn-line{ background:#fff; color:var(--ink); border:1.6px solid var(--ink-2); }
.cta-actions .btn-line:hover{ background:#f5f9fa; border-color:var(--ink); }

/* ===== 概念図（HTML/CSS・レスポンシブ組み替え） ===== */
.cdiagram{ display:flex; align-items:center; justify-content:center; gap:0; max-width:940px; margin:8px auto 20px; }
.cd-zone{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:12px; padding:20px 18px; border-radius:22px; box-shadow:var(--shadow-sm); }
.cd-onprem{ background:linear-gradient(180deg,#f2f9f8,#e3f1ee); border:1px solid #d6e6e3; }
.cd-cloud{ background:linear-gradient(180deg,#f4f6fd,#e8edfb); border:1px solid #dadef5; transform:translateY(15px); }
.cd-hub{ flex:0 0 30%; justify-content:center; background:none; box-shadow:none; padding:12px; }
.cd-ztag{ align-self:center; padding:2px 4px; font-size:13.5px; font-weight:800; color:var(--ink); }
.cd-card{ background:#fff; border:1px solid var(--hairline); border-radius:14px; padding:16px 14px; text-align:center; box-shadow:var(--shadow-sm); }
.cd-card .t{ font-family:'Inter',var(--sans); font-weight:900; font-size:20px; letter-spacing:-.02em; }
.cd-card .t2{ font-weight:800; font-size:13.5px; color:var(--ink); }
.cd-card .s{ font-size:10.5px; font-weight:600; margin-top:4px; line-height:1.5; }
.cd-svc .s, .cd-karte .s{ color:var(--ink-soft); }
/* ispec 製品カード = 兄弟ペア（共通ダーク基調＋差し色アクセント） */
.cd-prod{ position:relative; overflow:hidden; border:2px solid transparent; color:var(--ink); background:linear-gradient(#fff,#fff) padding-box, var(--grad-warmcool) border-box; padding:20px 16px; }
.cd-prod::before{ display:none; }
.cd-prod .cd-role{ display:inline-block; font-size:10.5px; font-weight:900; letter-spacing:.03em; border-radius:999px; padding:3px 12px; margin-bottom:11px; }
.cd-prod .s{ color:var(--ink-soft); margin-top:8px; font-size:11px; }
.cd-sail::before{ background:var(--mint); }
.cd-sail .cd-role{ background:var(--mint); color:var(--ink-2); }
.cd-sail .cd-logo{ display:block; height:22px; width:auto; margin:0 auto; }
.cd-sail .cd-phone-frame{ display:block; width:-moz-fit-content; width:fit-content; margin:2px auto 10px; padding:2px; background:linear-gradient(150deg,#25393F,#030410); border-radius:15px; box-shadow:0 10px 18px rgba(37,57,63,.22); }
.cd-sail .cd-phone{ display:block; height:112px; width:auto; border-radius:13px; }
.cd-cs::before{ background:var(--lavender); }
.cd-cs .cd-role{ background:var(--mint); color:var(--ink-2); }
.cd-cs .cd-cube{ display:block; width:88px; height:auto; margin:2px auto 6px; filter:drop-shadow(0 10px 18px rgba(37,57,63,.22)); }
.cd-karte-ic{ display:flex; justify-content:center; margin-bottom:12px; }
.cd-karte-ic svg{ width:84px; height:84px; display:block; filter:drop-shadow(0 6px 9px rgba(37,57,63,.16)); }
.cd-cs .cd-cs-logo{ display:block; height:20px; width:auto; margin:0 auto; }
.cd-note{ font-size:9.5px; color:var(--ink-soft); text-align:center; line-height:1.6; }
.cd-link{ flex:0 0 74px; display:flex; align-items:center; justify-content:center; position:relative; z-index:3; }
.cd-link::before{ content:''; width:40px; height:6px; border-radius:6px; background:#7fb2bc; }
.cd-link span{ position:absolute; top:calc(50% - 24px); font-size:10.5px; font-weight:700; color:#5f7f86; white-space:nowrap; }
@media(max-width:720px){
  .cdiagram{ flex-direction:column; align-items:stretch; max-width:440px; gap:0; }
  .cd-zone{ width:100%; }
  .cd-onprem{ order:1; } .cd-link-a{ order:2; } .cd-hub{ order:3; } .cd-link-b{ order:4; } .cd-cloud{ order:5; transform:none; }
  .cd-hub{ flex:0 0 auto; }
  .cd-link{ flex-basis:auto; height:42px; }
  .cd-link::before{ width:6px; height:28px; }
  .cd-link span{ top:auto; left:calc(50% + 14px); }
}

/* cycle */
.cycle{ background:none; border:none; border-radius:0; padding:8px 0 4px; box-shadow:none; position:relative; overflow:hidden; }
.cycle::before{ display:none; }
.cycle-bg{ position:absolute; top:54%; left:50%; transform:translate(-50%,-50%); width:360px; height:360px; opacity:.16; z-index:0; pointer-events:none; }
.cycle-bg svg{ width:100%; height:100%; display:block; }
.cycle > :not(.cycle-bg){ position:relative; z-index:1; }
.cycle h3{ font-size:22px; font-weight:900; letter-spacing:-.01em; margin-bottom:6px; color:var(--ink); }
.cycle h3 span{ background:var(--grad-num); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.cycle .csub{ font-size:14px; color:var(--ink-soft); margin-bottom:28px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step{ background:none; border:none; border-radius:0; padding:6px 18px; text-align:center; }
.step .sn{ font-family:var(--mono); font-weight:900; font-size:38px; line-height:1; margin-bottom:8px; background:linear-gradient(150deg,#3f7079 0%, #1c3a42 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; filter:drop-shadow(0 3px 4px rgba(37,57,63,.16)); }
.step h4{ font-size:17px; font-weight:900; margin-bottom:6px; color:var(--ink); }
.step p{ font-size:14px; color:var(--ink-soft); line-height:1.8; }
.loop{ margin-top:20px; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; }
.loop .loop-ic{ width:46px; height:46px; display:block; }
.loop p{ font-size:13px; font-weight:700; color:var(--ink-soft); line-height:1.6; margin:0; }
.loop b{ color:var(--ink-2); }

/* ===================== 03 CloudSail ===================== */
.cs-hero{ display:grid; grid-template-columns:1fr .8fr; gap:44px; align-items:center; margin-bottom:52px; }
.cs-hero .cube{ display:flex; justify-content:center; }
.cs-hero .cube img{ max-width:270px; filter:drop-shadow(0 20px 36px rgba(37,57,63,.22)); }
.cs-hero .analogy{ margin-top:20px; display:inline-block; font-size:14px; font-weight:800; color:var(--ink); background:rgba(196,234,230,.4); border:1px solid var(--mint); border-radius:12px; padding:12px 18px; }
.cs-hero .analogy em{ font-style:normal; color:var(--ink-2); }
.parts{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.part{ background:#fff; border:1px solid var(--hairline); border-radius:18px; padding:26px 24px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.part::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-cool); }
.part .pcap{ font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--spec-light); }
.part h4{ font-size:20px; font-weight:900; margin:6px 0 10px; letter-spacing:-.01em; color:var(--ink); }
.part .verb{ font-size:13px; font-weight:800; color:#fff; background:var(--grad-cool); border-radius:8px; padding:3px 12px; display:inline-block; margin-bottom:12px; }
.part p{ font-size:13.5px; line-height:1.8; color:var(--ink-soft); }
.part p strong{ color:var(--ink-2); font-weight:700; }
.layers{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.layer{ background:#fff; border:1px solid var(--hairline); border-left:4px solid var(--spec-light); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow-sm); }
.layer .lnum{ font-family:var(--mono); font-weight:900; color:var(--ink-2); font-size:16px; }
.layer h5{ font-size:15px; font-weight:900; margin:4px 0 6px; color:var(--ink); }
.layer p{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; }

/* ===================== 04 Security ===================== */
.sf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px; }
.sf{ background:#fff; border:1px solid var(--hairline); border-radius:18px; padding:26px 24px; box-shadow:var(--shadow-sm); }
.sf .ic{ background:none; box-shadow:none; display:flex; justify-content:center; margin-bottom:14px; }
.sf h4{ font-size:17px; font-weight:900; margin-bottom:8px; color:var(--ink); }
.sf p{ font-size:13px; color:var(--ink-soft); line-height:1.75; }
.sf p b{ color:var(--ink-2); font-weight:700; }
.cmp{ width:100%; background:#fff; border:1px solid var(--hairline); border-radius:16px; overflow:hidden; font-size:13.5px; box-shadow:var(--shadow-sm); }
.cmp th,.cmp td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--hairline); vertical-align:top; }
.cmp thead th{ font-size:12px; letter-spacing:.03em; color:#fff; font-weight:800; background:var(--ink-2); }
.cmp thead th.cs-col{ background:var(--ink); }
.cmp td.axis-label{ font-weight:800; color:var(--ink); width:26%; background:var(--paper-2); }
.cmp td.old{ color:var(--ink-soft); }
.cmp td.cs{ color:var(--ink); font-weight:600; background:rgba(196,234,230,.28); }
.cmp tr:last-child td{ border-bottom:none; }
.guideline{ margin-top:38px; display:grid; grid-template-columns:1.3fr 1fr; gap:26px; align-items:center; }
.guideline .quote-law{ background:#fff; border:1px solid var(--hairline); border-left:4px solid var(--spec-light); border-radius:0 14px 14px 0; padding:22px 26px; box-shadow:var(--shadow-sm); }
.guideline .quote-law p{ font-size:14.5px; line-height:1.85; color:var(--ink); font-weight:600; }
.guideline .quote-law p strong{ color:var(--ink-2); }
.guideline .quote-law cite{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-soft); margin-top:12px; }
.guideline .aws{ font-size:14px; color:var(--ink-soft); line-height:1.85; }
.guideline .aws b{ color:var(--ink-2); font-weight:700; }
.guideline .aws .badge{ display:inline-block; font-size:11px; font-weight:800; color:#8a6a2e; background:var(--apricot); border-radius:999px; padding:4px 12px; margin-bottom:12px; }

/* ===================== 05 Synergy ===================== */
.synergy{ display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:stretch; margin-bottom:32px; }
.syn-card{ border-radius:20px; padding:30px 30px; box-shadow:var(--shadow-sm); background:#fff; border:1px solid var(--hairline); position:relative; overflow:hidden; }
.syn-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.syn-card.ai::before{ background:var(--grad-cool); }
.syn-card.cs::before{ background:var(--grad-warmcool); }
.syn-card .cap{ font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--spec-light); }
.syn-card h3{ font-size:22px; font-weight:900; margin:6px 0 12px; letter-spacing:-.01em; color:var(--ink); }
.syn-card p{ font-size:14px; line-height:1.85; color:var(--ink-soft); }
.syn-mid{ display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:900; font-size:30px; color:var(--ink-2); }
.syn-result{ background:var(--grad-warmcool); border-radius:18px; padding:4px; }
.syn-result-in{ background:#fff; border-radius:15px; padding:26px 30px; text-align:center; }
.syn-result-in p{ font-size:clamp(17px,2.2vw,22px); font-weight:900; letter-spacing:-.01em; color:var(--ink); line-height:1.6; }
.syn-result-in p em{ font-style:normal; background:var(--grad-num); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
@media(max-width:860px){ .synergy{ grid-template-columns:1fr; } .syn-mid{ transform:rotate(90deg); } }

/* ===================== 06 Cases ===================== */
.mv .mp, .cc-stat .v .mp, .ba .mp{ font-size:.42em; font-weight:800; margin-right:1px; }
/* before → after cards */
.ba-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,230px)); justify-content:center; gap:56px; margin:0 auto 46px; max-width:680px; }
.ba{ background:none; border:none; box-shadow:none; padding:0; text-align:center; display:flex; flex-direction:column; align-items:center; }
.ba .ba-viz{ display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.ba .ba-viz svg text{ font-family:var(--sans); }
.ba .ba-viz svg{ width:152px; height:auto; display:block; }
.ba .ba-num{ font-size:15px; font-weight:800; color:var(--ink); line-height:1.1; min-height:52px; display:flex; align-items:flex-end; justify-content:center; }
.ba .ba-num .mp{ font-size:13px; font-weight:800; color:var(--ink-2); margin-right:2px; }
.ba .ba-num .big{ font-family:var(--mono); font-size:44px; font-weight:900; letter-spacing:-.03em; background:linear-gradient(150deg,#4fc3b3 0%, #2B5059 96%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; vertical-align:-3px; }
.ba .ba-num .pct{ font-family:var(--mono); font-size:20px; font-weight:900; color:var(--ink-2); margin:0 3px 0 1px; }
.ba .ba-num.txt .big{ font-family:var(--sans); font-size:34px; vertical-align:0; }
.ba .ba-label{ font-size:15px; font-weight:800; color:var(--ink-2); margin:0 0 10px; }
.ba .ba-org{ font-size:12px; font-weight:800; color:var(--ink-2); margin-top:9px; }

/* feature case */
.feat{ background:#fff; border:1px solid var(--hairline); border-radius:24px; box-shadow:var(--shadow); overflow:hidden; margin-bottom:32px; position:relative; }
.feat::before{ content:''; position:absolute; top:0; left:0; right:0; height:5px; background:var(--grad-warmcool); z-index:1; }
.feat-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:26px 32px; border-bottom:1px solid var(--hairline); background:var(--paper-2); }
.feat-top .badge{ font-size:11px; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--grad-cool); border-radius:999px; padding:5px 13px; }
.feat-top .badge.badge-poc{ background:linear-gradient(135deg,#9a6e10,#c8952a,#8a5f0e); }
.feat-top .fname{ font-size:22px; font-weight:900; letter-spacing:-.01em; color:var(--ink); }
.feat-top .fmeta{ font-size:13px; color:var(--ink-soft); font-weight:600; }
.feat-top .flink{ margin-left:auto; display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:800; color:var(--ink-2); }
.feat-top .flink .x{ color:var(--spec-light); font-family:var(--mono); }
.feat-body{ display:grid; grid-template-columns:1.05fr .95fr; gap:0; }
.feat-left{ padding:30px 32px; border-right:1px solid var(--hairline); }
.feat-right{ padding:30px 32px; }
.feat-desc{ font-size:14px; line-height:1.9; color:var(--ink); }
.feat-desc + .feat-desc{ margin-top:12px; }
.feat-desc strong{ font-weight:700; color:var(--ink-2); }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 22px; }
.chips .c{ font-size:12px; font-weight:700; color:var(--ink); background:var(--paper-2); border:1px solid var(--hairline); border-radius:8px; padding:5px 11px; }
.chips .c.on{ background:var(--grad-cool); color:#fff; border-color:transparent; }
.kpi2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kpi-card{ border:1px solid var(--hairline); border-radius:16px; padding:20px 18px; background:#fff; text-align:center; box-shadow:var(--shadow-sm); }
.kpi-card .kl{ font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.kpi-card .kfrom{ font-size:13px; color:var(--ink-soft); font-weight:700; }
.kpi-card .kto{ font-family:var(--mono); font-size:34px; font-weight:900; letter-spacing:-.03em; line-height:1.05; }
.kpi-card .kto .u{ font-size:16px; font-weight:800; }
.kpi-card .kcut{ margin-top:8px; font-size:11px; font-weight:800; color:#fff; background:var(--grad-cool); border-radius:999px; padding:3px 10px; display:inline-block; }
.photos2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.photo{ position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden; border:1px solid var(--hairline); background:var(--paper-2); box-shadow:var(--shadow-sm); }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo .pl{ position:absolute; left:0; right:0; bottom:0; padding:20px 12px 9px; font-size:12px; font-weight:800; color:#fff; background:linear-gradient(transparent, rgba(3,4,16,.62)); }
.photo .tag{ position:absolute; top:8px; right:8px; font-size:9px; font-weight:800; letter-spacing:.04em; color:#8a6a2e; background:var(--apricot); border-radius:6px; padding:2px 8px; z-index:1; }
.qs{ display:flex; flex-direction:column; gap:14px; }
.q{ position:relative; background:var(--paper-2); border:1px solid var(--hairline); border-left:4px solid var(--spec-light); border-radius:0 12px 12px 0; padding:18px 20px 16px; }
.q .qm{ font-family:Georgia,serif; font-size:34px; line-height:0; color:var(--spec-light); opacity:.6; height:16px; display:block; }
.q p{ font-size:14px; line-height:1.85; color:var(--ink); font-weight:600; }
.q .who{ font-size:12px; color:var(--ink-soft); margin-top:10px; font-weight:700; }
@media(max-width:860px){ .feat-body{ grid-template-columns:1fr; } .feat-left{ border-right:none; border-bottom:1px solid var(--hairline); } }

/* two proof cards */
.proof2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.pcard{ background:#fff; border:1px solid var(--hairline); border-radius:20px; padding:28px 30px; box-shadow:var(--shadow-sm); }
.pcard .pc-h{ display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.pcard .pc-name{ font-size:19px; font-weight:900; color:var(--ink); }
.pcard .pc-meta{ font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.pcard .pc-tag{ margin-left:auto; font-size:11px; font-weight:800; color:var(--ink-2); background:rgba(196,234,230,.45); border-radius:999px; padding:4px 12px; }
.big2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.big2 .b{ text-align:center; }
.big2 .bl{ font-size:12.5px; color:var(--ink-soft); font-weight:700; margin-bottom:2px; }
.big2 .bv{ font-family:var(--mono); font-size:40px; font-weight:900; letter-spacing:-.04em; line-height:1; }
.big2 .bv .u{ font-size:17px; font-weight:800; }
.highlight-box{ background:rgba(196,234,230,.35); border:1px solid var(--mint); border-radius:12px; padding:12px 16px; text-align:center; margin-bottom:16px; font-size:13.5px; font-weight:700; color:var(--ink); }
.highlight-box b{ font-family:var(--mono); font-size:20px; background:var(--grad-num); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; margin:0 4px; letter-spacing:-.02em; }
.kpis3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.k3{ text-align:center; background:var(--paper-2); border:1px solid var(--hairline); border-radius:12px; padding:16px 6px; }
.k3 .v{ font-family:var(--mono); font-size:26px; font-weight:900; letter-spacing:-.03em; line-height:1; }
.k3 .v .u{ font-size:12px; font-weight:800; }
.k3 .l{ font-size:10.5px; color:var(--ink-soft); font-weight:600; margin-top:6px; line-height:1.4; }
.vlist{ display:flex; flex-direction:column; gap:9px; }
.vlist li{ font-size:13.5px; line-height:1.7; color:var(--ink); display:flex; gap:9px; align-items:flex-start; }
.vlist li::before{ content:'✓'; color:var(--spec-light); font-weight:900; flex:0 0 auto; }
.vlist li b{ font-weight:800; color:var(--ink-2); }
.pc-foot{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--hairline); text-align:center; font-size:12.5px; font-weight:800; color:var(--ink); }
.pc-foot .sa{ background:var(--grad-num); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.pc-foot .x{ color:var(--spec-light); margin:0 4px; }
.pcard .note{ font-size:11px; color:var(--ink-soft); line-height:1.6; margin-top:10px; }
@media(max-width:860px){ .proof2{ grid-template-columns:1fr; } }

.case-foot{ margin-top:24px; font-size:12px; color:var(--ink-soft); line-height:1.7; display:flex; gap:9px; align-items:flex-start; }
.case-foot .fn{ flex:0 0 auto; font-size:10px; font-weight:800; color:#8a6a2e; background:var(--apricot); border-radius:6px; padding:3px 9px; }

/* ===================== Podcast ===================== */
.pod-embed{ max-width:660px; margin:0 auto; }
.pod-embed iframe{ width:100%; height:232px; border:0; border-radius:14px; box-shadow:var(--shadow); display:block; }
.pod-actions{ text-align:center; margin-top:20px; }
.pod-actions .btn-spotify{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:var(--ink); background:#fff; border:1.5px solid var(--hairline); border-radius:999px; padding:11px 22px; transition:border-color .15s ease; }
.pod-actions .btn-spotify:hover{ border-color:var(--spec-light); }
.pod-actions .btn-spotify svg{ display:block; }

/* ===================== CTA ===================== */
section.cta{ background:
    radial-gradient(ellipse 1150px 660px at 100% -8%, rgba(196,234,230,.92), transparent 56%),
    radial-gradient(ellipse 820px 520px at -8% 2%, rgba(252,232,193,.46), transparent 52%),
    radial-gradient(ellipse 1100px 900px at 55% 122%, rgba(183,193,251,.36), transparent 60%),
    linear-gradient(180deg, rgba(196,234,230,.22), rgba(196,234,230,.05)); }
.cta .wrap{ padding:76px 24px; }
.cta-panel{ background:none; padding:0; box-shadow:none; }
.cta-inner{ background:transparent; padding:50px 54px; text-align:center; }
.cta .msg{ max-width:760px; margin:0 auto; }
.cta .msg > p{ margin:0 auto; }
.cta .msg h2{ font-size:clamp(26px,3.7vw,37px); font-weight:900; letter-spacing:-.02em; line-height:1.32; margin:0 0 20px; color:var(--ink); }
.cta .msg h2 em{ font-style:normal; background:var(--grad-num); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.cta .msg p{ font-size:clamp(17px,2.2vw,20px); color:var(--ink); font-weight:600; line-height:1.7; margin:0 auto; }
.cta .steps-mini{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.cta .steps-mini span{ font-size:12.5px; font-weight:700; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--hairline); border-radius:999px; padding:8px 15px; }
.cta .steps-mini span b{ color:var(--spec-light); }
.contact-card{ background:linear-gradient(180deg,#f5fbfa,#ecf7f4); border:1px solid #d7ece8; border-radius:20px; padding:32px 32px 26px; box-shadow:var(--shadow); }
.contact-card .cc-k{ font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--spec-light); }
.contact-card h3{ font-size:22px; font-weight:900; letter-spacing:-.01em; margin:0 0 20px; color:var(--ink); }
.contact-card .btn{ width:100%; justify-content:center; padding-top:14px; padding-bottom:14px; }
.contact-card .row{ display:flex; align-items:center; gap:10px; padding-top:16px; border-top:1px solid var(--hairline); }
.contact-card .row img{ height:18px; }
.contact-card .row .info{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }
.contact-card .row .info b{ color:var(--ink); }
.cta-eyebrow{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.02em; color:var(--ink-2); background:var(--mint); border-radius:999px; padding:5px 14px; margin-bottom:16px; }
.cta-benefits{ list-style:none; margin:22px auto 0; padding:0; display:inline-block; text-align:left; }
.cta-benefits li{ position:relative; padding-left:30px; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.5; }
.cta-benefits li + li{ margin-top:11px; }
.cta-choose{ margin-top:34px; }
.cta-choose h3{ font-size:19px; font-weight:900; letter-spacing:-.01em; margin:0 0 22px; color:var(--ink); }
.cta-choices{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:920px; margin:0 auto; }
.cta-choice{ background:linear-gradient(#fff,#fff) padding-box, var(--grad-warmcool) border-box; border:2px solid transparent; border-radius:18px; padding:26px 22px; display:flex; flex-direction:column; gap:20px; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .2s ease; }
.cta-choice:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.cta-choice .cc-desc{ flex:1; margin:0; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.65; }
.cta-choice .btn{ width:100%; justify-content:center; gap:8px; padding-top:14px; padding-bottom:14px; }
.cta-choice .cc-arw{ font-weight:900; font-size:13px; }
.cta-benefits li::before{ content:'✓'; position:absolute; left:0; top:1px; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--grad-cool); color:#fff; font-size:12px; font-weight:900; }
.cta-proof{ margin-top:16px !important; font-size:12.5px; color:var(--ink-soft) !important; font-weight:400 !important; }
.cta-primary{ font-size:16px; padding-top:16px !important; padding-bottom:16px !important; box-shadow:0 10px 26px rgba(180,120,30,.36); }
.cta-textlink{ display:inline-block; width:100%; text-align:center; margin-top:14px; font-size:13.5px; font-weight:700; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.cta-textlink:hover{ color:var(--ink); }
.cta-note{ margin:16px 0 0; font-size:12px; line-height:1.65; color:var(--ink-soft); text-align:center; }
@media(max-width:860px){ .cta-inner{ padding:34px 24px; } .cta-choices{ grid-template-columns:1fr; } }

/* ===================== Footer (only dark band) ===================== */
footer.foot{ background:linear-gradient(90deg,#223a42 0%, #2B5059 48%, #40727c 100%); color:rgba(255,255,255,.66); padding:46px 0 34px; font-size:12.5px; }
.foot-top{ display:flex; align-items:center; justify-content:space-between; gap:20px 24px; flex-wrap:wrap; padding-bottom:22px; }
.foot-brand{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.foot-brand .foot-sailai{ height:28px; width:auto; display:block; }
.foot-brand .foot-run{ font-size:10.5px; font-weight:700; letter-spacing:.06em; color:rgba(255,255,255,.5); }
.foot-logo{ display:inline-flex; }
.foot-logo svg{ height:19px; width:auto; opacity:.9; transition:opacity .2s ease; }
.foot-logo:hover svg{ opacity:.6; }
.foot-cert{ display:flex; align-items:center; gap:10px; }
.foot-cert img{ height:52px; width:auto; opacity:.95; }
.foot-cert .cert-mark{ font-family:var(--mono); font-weight:900; font-size:13px; letter-spacing:.06em; color:var(--ink-2); background:#fff; border-radius:8px; padding:7px 10px; }
.foot-cert .cert-txt{ font-size:10.5px; line-height:1.5; color:rgba(255,255,255,.7); }
.foot-cert .cert-txt b{ color:#fff; font-weight:800; font-size:11.5px; }
.foot-info{ display:grid; grid-template-columns:1fr 1fr; gap:9px 44px; margin:24px 0 22px; }
.foot-info > div{ display:flex; gap:14px; align-items:baseline; line-height:1.55; }
.foot-info dt{ flex:0 0 130px; color:rgba(255,255,255,.5); font-weight:700; font-size:11px; }
.foot-info dd{ margin:0; color:rgba(255,255,255,.85); font-weight:600; font-size:12px; }
.foot-copy{ font-size:11.5px; color:rgba(255,255,255,.5); }
@media(max-width:640px){ .foot-info{ grid-template-columns:1fr; gap:8px; } .foot-info dt{ flex-basis:104px; } }

/* ===================== Responsive ===================== */
@media(max-width:860px){
  .chal-grid,.use-grid,.parts,.layers,.sf-grid,.steps,.kpis3,.ba-grid{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:1fr 1fr; }
  .metric:nth-child(2){ border-right:none; }
  .metric:nth-child(1),.metric:nth-child(2){ border-bottom:1px solid var(--hairline); }
  .cs-hero{ grid-template-columns:1fr; } .cs-hero .cube{ order:-1; }
  .guideline{ grid-template-columns:1fr; }
  section.block{ padding:56px 0; }
}
@media(max-width:560px){ .kpi2{ grid-template-columns:1fr; } .photos2{ grid-template-columns:1fr; } .big2{ grid-template-columns:1fr; } }

/* ===================== Thanks (サンクスページ) ===================== */
.thanks{ background:
    radial-gradient(ellipse 900px 520px at 100% -10%, rgba(196,234,230,.7), transparent 58%),
    radial-gradient(ellipse 700px 460px at -6% 108%, rgba(183,193,251,.28), transparent 60%),
    #f4faf8; padding:72px 24px; display:flex; align-items:center; min-height:52vh; }
.thanks-card{ max-width:620px; margin:0 auto; text-align:center; background:#fff; border:1px solid var(--hairline); border-radius:22px; padding:48px 40px 44px; box-shadow:var(--shadow); }
.thanks-icon{ width:66px; height:66px; margin:0 auto 22px; border-radius:50%; background:var(--grad-cool); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px rgba(43,80,89,.22); }
.thanks-icon svg{ width:34px; height:34px; display:block; }
.thanks-card h1{ font-size:clamp(21px,3vw,27px); font-weight:900; letter-spacing:-.01em; color:var(--ink-2); margin:0 0 16px; line-height:1.4; }
.thanks-card p{ font-size:15px; line-height:1.9; color:var(--ink); margin:0; }
.thanks-card .thanks-note{ font-size:12.5px; color:var(--ink-soft); margin-top:16px; line-height:1.7; }
.thanks-back{ display:inline-flex; margin-top:30px; padding:14px 34px; font-size:15px; }
@media(max-width:600px){ .thanks{ padding:48px 18px; } .thanks-card{ padding:36px 22px 32px; } }

.case-card .cc-eye.photo img[src*="case-kawatani"]{ object-position:center 30%; }