/* ============================================================
   Proudit / Proud Cloud — 導入事例 詳細ページ 共通スタイル
   （デザイン案：明るいテーマ）
   ============================================================ */
:root{
  --bg:#f7fafd;
  --ink:#0e1a2b;
  --ink-mid:#3d5573;
  --ink-dim:#6c85a5;
  --brand:#1F4E79;
  --brand-lite:#3d8fd4;
  --cyan:#00b8d9;
  --sky:#6fc9f2;
  --violet:#7c6cff;
  --mint:#3fd8b0;
  --amber:#f0a53c;
  --line:#dfe8f3;
  --line-soft:#eaf1f9;
  --card:rgba(255,255,255,.76);
  --maxw:1120px;
  --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  font-family:"Helvetica Neue","Segoe UI",-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.85;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--brand-lite);font-weight:800}

/* ---------- background ---------- */
.bg-mesh{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(52% 40% at 10% 6%,  color-mix(in srgb,var(--sky) 46%,transparent), transparent 68%),
    radial-gradient(44% 38% at 90% 2%,  color-mix(in srgb,var(--violet) 20%,transparent), transparent 68%),
    radial-gradient(48% 42% at 84% 54%, color-mix(in srgb,var(--mint) 24%,transparent), transparent 68%),
    radial-gradient(58% 48% at 16% 94%, color-mix(in srgb,var(--brand-lite) 22%,transparent), transparent 70%),
    var(--bg);
}
.bg-mesh::after{
  content:"";position:absolute;inset:-35%;
  background:conic-gradient(from 0deg at 50% 50%,transparent,rgba(255,255,255,.85),transparent 38%);
  animation:spin 30s linear infinite;opacity:.5;
}
@keyframes spin{to{transform:rotate(360deg)}}
.blob{position:fixed;border-radius:50%;filter:blur(70px);z-index:-2;opacity:.4;pointer-events:none}
.b1{width:40vw;height:40vw;left:-10vw;top:0;background:radial-gradient(circle,#9ad7ff,transparent 66%);animation:drift1 24s ease-in-out infinite}
.b2{width:32vw;height:32vw;right:-6vw;top:46vh;background:radial-gradient(circle,#c8c1ff,transparent 66%);animation:drift2 29s ease-in-out infinite}
.b3{width:36vw;height:36vw;left:28vw;bottom:-14vh;background:radial-gradient(circle,#a8f0dd,transparent 66%);animation:drift1 34s ease-in-out infinite reverse}
@keyframes drift1{50%{transform:translate3d(6vw,-5vh,0) scale(1.12)}}
@keyframes drift2{50%{transform:translate3d(-7vw,6vh,0) scale(1.08)}}
.grid-overlay{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(31,78,121,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(31,78,121,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 18%,#000 0%,transparent 70%);
          mask-image:radial-gradient(circle at 50% 18%,#000 0%,transparent 70%);
}
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--brand),var(--cyan),var(--violet))}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px) saturate(1.6);background:rgba(255,255,255,.7);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--brand)}
.logo .dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#8ce9ff,var(--brand-lite));box-shadow:0 0 0 6px rgba(61,143,212,.14);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.2);box-shadow:0 0 0 12px rgba(61,143,212,.08)}}
nav.links{display:flex;gap:4px}
nav.links a{font-size:.87rem;color:var(--ink-mid);padding:8px 14px;border-radius:999px;font-weight:600;transition:.25s}
nav.links a:hover,nav.links a.on{color:var(--brand);background:rgba(61,143,212,.1)}
@media(max-width:940px){nav.links{display:none}}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;
  font-weight:700;font-size:.9rem;position:relative;border:0;cursor:pointer;
  background:linear-gradient(120deg,var(--brand),var(--brand-lite) 60%,var(--cyan));color:#fff;
  box-shadow:0 10px 26px -10px rgba(31,78,121,.55);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .25s;overflow:hidden;
}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%);transition:transform .65s}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 38px -12px rgba(31,78,121,.6);filter:brightness(1.06)}
.btn:hover::after{transform:translateX(120%)}
.btn.ghost{background:rgba(255,255,255,.82);color:var(--brand);border:1px solid var(--line);box-shadow:0 6px 18px -12px rgba(31,78,121,.4);backdrop-filter:blur(6px)}
.btn.ghost:hover{background:#fff}
.btn.sm{padding:10px 20px;font-size:.83rem}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.27s}.reveal.d4{transition-delay:.36s}

/* ---------- breadcrumb ---------- */
.crumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.76rem;color:var(--ink-dim);font-weight:600;padding-top:32px}
.crumb a:hover{color:var(--brand-lite)}
.crumb .cur{color:var(--brand)}

/* ---------- case hero ---------- */
.case-hero{padding-block:18px 56px}
.plan-pill{display:inline-block;font-size:.7rem;font-weight:800;padding:6px 14px;border-radius:999px;letter-spacing:.05em}
.plan-pill.srv{background:#e8f1fb;color:#17538f}
.plan-pill.cnt{background:#e9f7f2;color:#0c7d5c}
.plan-pill.sls{background:#f2ecff;color:#5a45c9}
.case-hero h1{font-size:clamp(1.9rem,4.6vw,3.3rem);line-height:1.16;letter-spacing:-.03em;font-weight:800;margin:.5em 0 .2em}
.grad-text{background:linear-gradient(100deg,var(--brand) 5%,var(--brand-lite) 38%,var(--cyan) 68%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:shine 9s linear infinite}
@keyframes shine{to{background-position:200% center}}
.case-hero .client{font-size:.95rem;color:var(--ink-mid);font-weight:700;margin:0}
.case-hero .summary{font-size:1.02rem;color:var(--ink-mid);max-width:62ch;margin:20px 0 0}

.kv{
  margin-top:36px;border-radius:26px;overflow:hidden;border:1px solid var(--line);
  background:#fff;box-shadow:0 40px 80px -40px rgba(23,53,89,.36);position:relative;
}
.kv img{width:100%}
.kv::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(31,78,121,.07));
}

/* quick facts strip */
.facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:26px;
  border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--line);
}
@media(max-width:860px){.facts{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.facts{grid-template-columns:1fr}}
.fact{background:rgba(255,255,255,.86);padding:18px 20px;backdrop-filter:blur(10px)}
.fact .l{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-lite);font-weight:800}
.fact .v{font-size:.95rem;font-weight:800;margin-top:4px}
.fact .v.small{font-size:.86rem;font-weight:700;color:var(--ink-mid)}

/* ---------- sections ---------- */
section.blk{padding-block:clamp(52px,7vh,88px)}
.sec-head{max-width:64ch;margin-bottom:36px}
.sec-head h2{font-size:clamp(1.5rem,3.4vw,2.3rem);letter-spacing:-.025em;margin:.3em 0;font-weight:800}
.sec-head p{color:var(--ink-mid);font-size:1rem}

.prose{max-width:74ch}
.prose p{color:var(--ink-mid);font-size:1rem;margin:0 0 1.15em}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:800}

/* highlight quote */
.pull{
  margin:30px 0;padding:26px 30px;border-radius:20px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.72);border:1px solid var(--line);backdrop-filter:blur(12px);
  box-shadow:0 24px 50px -38px rgba(23,53,89,.3);
}
.pull::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--brand),var(--cyan));
}
.pull p{margin:0;font-size:1.02rem;font-weight:700;color:var(--brand);line-height:1.8}

/* numbered point blocks */
.points{display:grid;gap:18px}
.point{
  position:relative;padding:28px 30px 28px 30px;border-radius:20px;
  background:var(--card);border:1px solid var(--line);backdrop-filter:blur(12px);
  box-shadow:0 22px 46px -36px rgba(23,53,89,.3);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,border-color .32s;
}
.point:hover{transform:translateY(-5px);box-shadow:0 32px 60px -34px rgba(23,53,89,.34);border-color:var(--brand-lite)}
.point .pnum{
  display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;
  font-size:.8rem;font-weight:800;color:#fff;margin-bottom:12px;
  background:linear-gradient(140deg,var(--brand),var(--brand-lite));
  box-shadow:0 10px 22px -10px rgba(31,78,121,.6);
}
.point h3{margin:0 0 .5em;font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.point p{margin:0;color:var(--ink-mid);font-size:.95rem}
.point ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.point li{font-size:.92rem;color:var(--ink-mid);padding-left:22px;position:relative}
.point li::before{content:"›";position:absolute;left:3px;color:var(--brand-lite);font-weight:800}

/* challenge list (課題) */
.challenge{
  display:grid;gap:14px;margin:0 0 30px;padding:0;list-style:none;
}
.challenge li{
  display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-radius:16px;
  background:linear-gradient(120deg,#fff8ec,#fff3e0);border:1px solid #ffe4bd;
  font-size:.96rem;font-weight:700;color:#8a5310;
}
.challenge li::before{content:"!";flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--amber);color:#fff;font-size:.8rem;font-weight:800}

/* tech stack used */
.used{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.used span{font-size:.76rem;font-weight:800;color:#9a5b00;background:#fff4e2;border:1px solid #ffe0b4;padding:5px 11px;border-radius:9px}
.used span.tool{color:var(--brand);background:#eef5fc;border-color:#d5e6f7}

/* ---------- system diagram ---------- */
figure.fig{
  margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  background:#fff;box-shadow:0 30px 64px -40px rgba(23,53,89,.34);
}
figure.fig .figbody{padding:clamp(16px,3vw,34px);background:
  radial-gradient(circle at 20% 10%,rgba(111,201,242,.1),transparent 60%),
  radial-gradient(circle at 85% 90%,rgba(124,108,255,.08),transparent 60%),#fff}
figure.fig img{margin-inline:auto;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
figure.fig figcaption{
  padding:14px 22px;border-top:1px solid var(--line-soft);background:rgba(247,250,253,.9);
  font-size:.78rem;color:var(--ink-dim);font-weight:700;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
figure.fig figcaption .hint{color:var(--brand-lite)}
figure.fig.zoom img{transform:scale(1.6);cursor:zoom-out}
figure.fig img{cursor:zoom-in}

/* ---------- overview table ---------- */
.ovwrap{border-radius:20px;border:1px solid var(--line);overflow:hidden;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);box-shadow:0 24px 50px -38px rgba(23,53,89,.3)}
table.ov{width:100%;border-collapse:collapse;font-size:.93rem}
table.ov th,table.ov td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.ov tr:last-child th,table.ov tr:last-child td{border-bottom:0}
table.ov th{width:30%;background:rgba(31,78,121,.05);color:var(--brand);font-weight:800;font-size:.8rem;letter-spacing:.06em}
@media(max-width:600px){
  table.ov th,table.ov td{display:block;width:100%}
  table.ov th{border-bottom:0;padding-bottom:6px}
}

/* ---------- related cases ---------- */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.rel{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.rel{grid-template-columns:1fr}}
.relcard{
  padding:24px;border-radius:18px;background:rgba(255,255,255,.78);border:1px solid var(--line);
  backdrop-filter:blur(12px);box-shadow:0 20px 44px -36px rgba(23,53,89,.3);
  transition:transform .32s,box-shadow .32s,border-color .32s;display:flex;flex-direction:column;gap:10px;
}
.relcard:hover{transform:translateY(-6px);box-shadow:0 30px 58px -34px rgba(23,53,89,.34);border-color:var(--brand-lite)}
.relcard h3{margin:0;font-size:1rem;font-weight:800;letter-spacing:-.01em}
.relcard .who{margin:0;font-size:.78rem;color:var(--ink-dim);font-weight:700}
.relcard .more{font-size:.82rem;font-weight:800;color:var(--brand);display:inline-flex;gap:6px;transition:gap .25s;margin-top:auto}
.relcard:hover .more{gap:12px}

/* ---------- CTA ---------- */
.cta-band{position:relative;border-radius:30px;padding:clamp(38px,5.6vw,68px);text-align:center;overflow:hidden;color:#fff;
  background:linear-gradient(120deg,var(--brand),var(--brand-lite) 55%,var(--cyan));box-shadow:0 40px 80px -40px rgba(31,78,121,.65)}
.cta-band::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.35),transparent 40%);animation:spin 22s linear infinite}
.cta-band>*{position:relative;z-index:1}
.cta-band .eyebrow{color:rgba(255,255,255,.85)}
.cta-band h2{font-size:clamp(1.6rem,3.8vw,2.6rem);margin:0 0 .4em;font-weight:800;letter-spacing:-.025em}
.cta-band p{color:rgba(255,255,255,.9);max-width:52ch;margin:0 auto 24px}
.cta-band .btn{background:#fff;color:var(--brand);box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
.cta-band .btn.ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.5)}
.kun-cta{width:clamp(84px,9vw,116px);margin:0 auto 6px;animation:kunbob 4.6s ease-in-out infinite;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.24))}
@keyframes kunbob{50%{transform:translateY(-12px) rotate(-3deg)}}

/* ---------- footer ---------- */
footer.ft{border-top:1px solid var(--line);padding-block:50px 36px;margin-top:42px;color:var(--ink-mid);background:rgba(255,255,255,.62)}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
@media(max-width:760px){.ft-grid{grid-template-columns:1fr}}
.ft a{display:block;padding:5px 0;font-size:.9rem;transition:color .25s}
.ft a:hover{color:var(--brand-lite)}
.ft h4{color:var(--ink);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px;font-weight:800}
.ft-bottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--ink-dim)}

.note{margin-top:22px;font-size:.8rem;color:var(--ink-dim);background:rgba(255,255,255,.62);border:1px dashed var(--line);padding:13px 17px;border-radius:14px}
.note b{color:#a3630a}

.ribbon{position:fixed;bottom:16px;left:16px;z-index:70;font-size:.72rem;color:var(--ink-mid);background:rgba(255,255,255,.9);
  border:1px solid var(--line);padding:8px 14px;border-radius:999px;backdrop-filter:blur(8px);font-weight:600;box-shadow:0 10px 26px -18px rgba(23,53,89,.5)}
.ribbon b{color:var(--brand-lite)}