/* ===================================================================
   SERVICE PAGE (service.html) — deep-dive composition.
   Uses the v2 design-system tokens from style.css. Dark × blue brand.
=================================================================== */

/* ---------- Hero ---------- */
.svp-hero{min-height:92vh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:170px 0 90px;}
.svp-hero .breadcrumb{margin-bottom:26px;}
.svp-hero-title{font-family:var(--serif);font-weight:500;font-size:clamp(2.8rem,8vw,6rem);line-height:1.2;
  letter-spacing:.04em;color:#fff;margin:24px 0 30px;text-shadow:0 6px 60px rgba(0,0,0,.5);}
.svp-hero-title .ln{display:block;}
.svp-hero-title .accent{color:var(--v-accent);}
.svp-hero-lead{max-width:34em;font-size:clamp(1rem,1.3vw,1.12rem);line-height:2.15;color:var(--v-text);margin-bottom:50px;}

.svp-nodes{display:flex;align-items:flex-start;gap:0;flex-wrap:wrap;}
.svp-node{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;position:relative;z-index:1;transition:.35s;}
.svp-node-dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--v-accent);background:var(--v-bg);box-shadow:0 0 0 5px rgba(132,180,236,.12);transition:.35s;}
.svp-node b{font-family:var(--mont);font-weight:600;font-size:1.1rem;color:#fff;letter-spacing:.04em;}
.svp-node-label{font-size:.74rem;letter-spacing:.08em;color:var(--v-muted);max-width:9em;line-height:1.5;transition:.35s;}
.svp-node:hover .svp-node-dot{background:var(--v-accent);box-shadow:0 0 0 6px rgba(132,180,236,.22);}
.svp-node:hover .svp-node-label{color:#fff;}
.svp-node-link{flex:1 1 0;min-width:30px;height:1px;margin-top:6.5px;align-self:flex-start;background:linear-gradient(90deg,var(--v-accent),rgba(132,180,236,.25));opacity:.6;}

.svp-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font-family:var(--mont);font-size:.62rem;letter-spacing:.28em;color:var(--v-muted);}
.svp-scroll i{width:1px;height:44px;background:rgba(132,180,236,.25);position:relative;overflow:hidden;}
.svp-scroll i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--v-accent);animation:svpScroll 2.2s infinite;}
@keyframes svpScroll{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}}

/* ---------- Generic section ---------- */
.svp-sec{padding:clamp(80px,11vw,150px) 0;position:relative;}
.svp-sec + .svp-sec{border-top:1px solid var(--v-line);}
.svp-sec-head{text-align:center;max-width:760px;margin:0 auto clamp(48px,6.5vw,84px);}
.svp-h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3.8vw,2.9rem);color:#fff;letter-spacing:.06em;margin:20px 0 0;display:block;width:100%;word-break:normal;overflow-wrap:break-word;}
.svp-sec-head{width:auto;}
.svp-lead{color:var(--v-text);font-size:var(--fs-body);line-height:2.1;}
.svp-sec-head .svp-lead{margin-top:22px;}

/* ---------- Strength: connection network ---------- */
.svp-net-graph{max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;}
.svp-net-sources{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.svp-net-sources li{border:1px solid var(--v-line-strong);border-radius:999px;padding:12px 22px;font-size:.9rem;color:#fff;background:rgba(10,16,32,.5);letter-spacing:.02em;}
.svp-net-arrow{height:46px;width:1px;position:relative;margin:6px 0;}
.svp-net-arrow span{position:absolute;inset:0;background:linear-gradient(var(--v-accent),rgba(132,180,236,.3));}
.svp-net-arrow::after{content:"";position:absolute;bottom:0;left:50%;width:7px;height:7px;border-right:1px solid var(--v-accent);border-bottom:1px solid var(--v-accent);transform:translateX(-50%) rotate(45deg);}
.svp-net-hub{border:1px solid var(--v-accent-soft);background:rgba(132,180,236,.07);border-radius:16px;padding:24px 40px;box-shadow:0 20px 50px rgba(0,0,0,.4);}
.svp-net-hub-cat{font-family:var(--mont);font-size:.64rem;letter-spacing:.24em;color:var(--v-accent);display:block;}
.svp-net-hub strong{font-family:var(--serif);font-weight:500;font-size:1.5rem;color:#fff;letter-spacing:.06em;display:block;margin:8px 0 6px;}
.svp-net-hub-sub{font-size:.82rem;color:var(--v-muted);}
.svp-net-out{font-size:1.05rem;color:var(--v-text);letter-spacing:.04em;}
.svp-net-out b{color:var(--v-accent);font-weight:500;}

/* ---------- Services (Asymmetric Redesign) ---------- */
.svp-svc {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  padding: clamp(80px, 12vw, 150px) 0;
}
.svp-svc + .svp-svc {
  border-top: 1px solid var(--v-line);
}
.svp-svc.reverse {
  grid-template-columns: 7fr 5fr;
}
.svp-svc.reverse .svp-svc-media {
  order: 2;
}

.svp-svc-media {
  position: relative;
  z-index: 1;
}

/* Primary Image */
.svp-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/5;
  border: 1px solid var(--v-line-strong);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  z-index: 2;
}
.svp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.9);
  transition: transform 1.8s var(--ease), filter 1s;
}
.svp-svc:hover .svp-img img {
  transform: scale(1.08);
  filter: saturate(1.1) brightness(1);
}
.svp-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4,6,13,0.7));
}

.svp-img.svp-img-contain {
  background: #fff;
}
.svp-img.svp-img-contain img {
  object-fit: contain;
  padding: 40px;
  box-sizing: border-box;
  filter: none; /* Remove dark filter for white background logos */
}
.svp-img.svp-img-contain:hover img {
  filter: none;
  transform: scale(1.05);
}
.svp-img.svp-img-contain::after {
  display: none; /* Remove dark gradient overlay */
}

/* Secondary Image / Element (Asymmetric overlapping) */
.svp-svc-media::before {
  content: "";
  position: absolute;
  top: -15%;
  left: -15%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(132,180,236,0.08), transparent 70%);
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.svp-img-sub {
  position: absolute;
  bottom: -15%;
  right: -20%;
  width: 55%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(132, 180, 236, 0.3);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  z-index: 3;
}
.svp-svc.reverse .svp-img-sub {
  right: auto;
  left: -20%;
}
.svp-img-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(80%) opacity(0.8);
  transition: 1s;
}
.svp-svc:hover .svp-img-sub img {
  filter: grayscale(0%) opacity(1);
}

/* Sports Club card */
.svp-club {
  position: relative;
  border-radius: 20px;
  aspect-ratio: 4/5;
  border: 1px solid var(--v-line);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  background: radial-gradient(120% 90% at 70% 14%, rgba(132,180,236,0.15), transparent 60%), linear-gradient(160deg, #0c1424, #06080e);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 2;
}
.svp-club img {
  width: min(60%, 250px);
  height: auto;
  display: block;
}
.svp-club-cap {
  font-family: var(--mont);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--v-muted);
}

.svp-num {
  position: absolute;
  z-index: 0;
  top: -0.2em;
  left: -0.3em;
  pointer-events: none;
  font-family: var(--mont);
  font-weight: 700;
  font-size: clamp(6rem, 15vw, 12rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(132,180,236,0.15);
}
.svp-svc.reverse .svp-num {
  left: auto;
  right: -0.3em;
}

.svp-svc-body {
  position: relative;
  z-index: 5;
}

.svp-cat {
  display: inline-block;
  font-family: var(--mont);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  color: var(--v-accent);
  margin-bottom: 26px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(132, 180, 236, 0.2);
  background: rgba(132, 180, 236, 0.05);
}
.svp-svc-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin-bottom: 24px;
}
.svp-catch {
  font-size: 1.15rem;
  color: var(--v-accent-2);
  letter-spacing: 0.08em;
  margin-bottom: 40px;
  font-weight: 500;
  line-height: 1.6;
}
.svp-text {
  font-size: var(--fs-body);
  line-height: 2.4;
  letter-spacing: 0.05em;
  color: var(--v-text);
  margin-bottom: 50px;
  text-wrap: balance;
}
.svp-kv {
  border-top: 1px solid var(--v-line-strong);
  padding-top: 10px;
}
.svp-kv-row {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--v-line);
}
.svp-kv-k {
  font-family: var(--mont);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--v-accent);
  padding-top: 0.25em;
}
.svp-kv-v {
  color: var(--v-text);
  line-height: 1.9;
  font-size: 0.95rem;
}
.svp-kv-v a {
  color: #fff;
  border-bottom: 1px solid var(--v-accent-soft);
  transition: 0.3s;
  display: inline-block;
}
.svp-kv-v a:hover {
  color: var(--v-accent);
  border-color: var(--v-accent);
  transform: translateX(4px);
}

/* ---------- Process (5 steps) ---------- */
.svp-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:1000px;margin:0 auto;}
.svp-steps--3{grid-template-columns:repeat(3,1fr);max-width:720px;}
.svp-steps li{position:relative;text-align:center;padding:0 12px;}
.svp-steps li:not(:last-child)::after{content:"";position:absolute;top:18px;left:50%;width:100%;height:1px;background:linear-gradient(90deg,var(--v-accent),rgba(132,180,236,.2));}
.svp-step-no{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--v-accent);background:var(--v-bg);font-family:var(--mont);font-size:.76rem;color:var(--v-accent);margin-bottom:18px;}
.svp-steps h4{font-family:var(--serif);font-size:1.04rem;color:#fff;letter-spacing:.04em;margin-bottom:8px;}
.svp-steps p{font-size:.8rem;color:var(--v-muted);line-height:1.7;text-wrap:balance;}

/* ---------- Industries ---------- */
.svp-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:860px;margin:0 auto;}
.svp-tags li{border:1px solid var(--v-line-strong);border-radius:10px;padding:14px 26px;color:#fff;font-size:.95rem;letter-spacing:.04em;background:rgba(10,16,32,.4);transition:.3s;}
.svp-tags li:hover{border-color:var(--v-accent);color:var(--v-accent);}

/* ---------- Related works ---------- */
.svp-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.svp-rel-card{display:block;border:1px solid var(--v-line);border-radius:16px;padding:30px;background:rgba(10,16,32,.4);transition:.35s;}
.svp-rel-card:hover{border-color:var(--v-accent);transform:translateY(-4px);background:rgba(132,180,236,.05);}
.svp-rel-cat{font-family:var(--mont);font-size:.64rem;letter-spacing:.2em;color:var(--v-accent);margin-bottom:14px;}
.svp-rel-card h4{font-family:var(--serif);font-size:1.2rem;color:#fff;letter-spacing:.04em;margin-bottom:10px;}
.svp-rel-sub{font-size:.85rem;color:var(--v-muted);line-height:1.7;margin-bottom:22px;}
.svp-rel-num{font-size:.86rem;color:var(--v-text);}
.svp-rel-num b{font-family:var(--mont);color:var(--v-accent);font-size:1.4rem;font-weight:500;letter-spacing:.02em;}

/* ---------- CTA ---------- */
.svp-cta{padding:clamp(90px,12vw,160px) 0;text-align:center;position:relative;border-top:1px solid var(--v-line);}
.svp-cta::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(900px,90%);height:60%;background:radial-gradient(ellipse at 50% 0%,rgba(132,180,236,.16),transparent 70%);pointer-events:none;}
.svp-cta-inner{position:relative;}
.svp-cta-title{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,5vw,3.4rem);color:#fff;letter-spacing:.08em;line-height:1.5;margin:22px 0;}
.svp-cta-lead{color:var(--v-text);font-size:var(--fs-body);margin-bottom:44px;}
.svp-cta-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .svp-svc,.svp-svc.reverse{grid-template-columns:1fr;gap:24px;padding:clamp(50px,10vw,80px) 0;}
  .svp-svc.reverse .svp-svc-media{order:0;}
  .svp-img,.svp-club{max-width:560px;}
  .svp-num{font-size:clamp(4rem,18vw,7rem);}
  .svp-steps{grid-template-columns:1fr;max-width:340px;gap:30px;}
  .svp-steps li{padding:0;}
  .svp-steps li::after{display:none;}
  .svp-rel-grid{grid-template-columns:1fr;}
  .svp-nodes{flex-direction:column;align-items:flex-start;gap:18px;}
  .svp-node{flex-direction:row;gap:14px;text-align:left;}
  .svp-node-label{max-width:none;}
  .svp-node-link{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .svp-img img{transform:none;}
  .svp-scroll i::after{animation:none;}
}
/* SP: stack key/value so long values use the full width (prevents 1-character wrapping) */
@media(max-width:680px){
  .svp-kv-row{grid-template-columns:1fr;gap:6px;}
  .svp-kv-k{padding-top:0;}
  /* 長い関連事例リンクが右端に張り付かず、折返し時も下線が行ごとに自然に付くよう調整 */
  .svp-kv-v{font-size:0.9rem;}
  .svp-kv-v a{display:inline;}
}