/* service.css */

.page {
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(198, 168, 92, 0.10), transparent 380px),
    linear-gradient(180deg, #ffffff 0%, #ffffff 22%, #FBFAF4 100%);
}

.hero {
  position: relative;
  padding: 54px 0 78px;
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.92) 42%, rgba(245,243,231,0.5) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--gold);
}

.hero-title {
  margin: 0;
  color: var(--green);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: 0.045em;
}

.hero-lead {
  width: min(100%, 520px);
  margin: 26px 0 34px;
  color: #273F36;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.service-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 190px;
  height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.service-btn:hover {
  transform: translateY(-2px);
}

.service-btn-primary {
  color: #ffffff;
  background: var(--green);
  box-shadow: 0 12px 22px rgba(31, 77, 58, 0.22);
}

.service-btn-secondary {
  color: var(--green);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(31, 77, 58, 0.28);
}

.service-arrow {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-visual {
  position: relative;
  min-height: 430px;
  border-radius: 34px;
  isolation: isolate;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 28px 0 10px 12px;
  background:
    radial-gradient(circle at 82% 26%, rgba(214,227,0,0.12), transparent 160px),
    linear-gradient(135deg, rgba(245,243,231,0.8), rgba(255,255,255,0.24));
  border-radius: 38px;
  z-index: -2;
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 8px 16px;
  background-image:
    linear-gradient(rgba(198,168,92,0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,168,92,0.25) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 68%);
  opacity: 0.52;
  z-index: -1;
}

.cube-stage { position: absolute; right: clamp(16px, 3vw, 52px); top: 44px; width: min(390px, 90%); height: 310px; }
.cube { position: absolute; transform-style: preserve-3d; border: 1px solid rgba(31, 77, 58, 0.1); box-shadow: 0 20px 45px rgba(31, 77, 58, 0.12); }
.cube.big { right: 110px; top: 88px; width: 152px; height: 152px; background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(245,243,231,0.88)); }
.cube.top { right: 128px; top: 12px; width: 92px; height: 92px; background: linear-gradient(135deg, #2E6650, var(--green-dark)); }
.cube.gold { right: 36px; top: 184px; width: 112px; height: 82px; background: linear-gradient(135deg, #D9BE6E, var(--gold)); }
.cube.green { right: 122px; top: 224px; width: 74px; height: 66px; background: linear-gradient(135deg, #2B634E, #1B3C2E); opacity: 0.96; }

.diagram-line { position: absolute; border: 1px solid rgba(198, 168, 92, 0.38); border-left: 0; border-bottom: 0; border-radius: 0 16px 0 0; }
.line-1 { width: 210px; height: 110px; left: 24px; top: 80px; }
.line-2 { width: 150px; height: 70px; right: 4px; top: 86px; }
.line-3 { width: 300px; height: 150px; left: 0; bottom: 18px; }
.dot-grid { position: absolute; left: 26px; top: 26px; width: 120px; height: 88px; background-image: radial-gradient(rgba(198,168,92,0.58) 2px, transparent 2px); background-size: 18px 18px; }
.mini-chart { position: absolute; right: 8px; top: 148px; width: 92px; height: 84px; border: 1px solid rgba(198,168,92,0.35); border-radius: 16px; background: rgba(255,255,255,0.55); }
.mini-chart span { position: absolute; bottom: 18px; width: 8px; background: var(--gold); border-radius: 8px 8px 0 0; opacity: 0.88; }
.mini-chart span:nth-child(1) { left: 22px; height: 18px; }
.mini-chart span:nth-child(2) { left: 40px; height: 31px; }
.mini-chart span:nth-child(3) { left: 58px; height: 48px; }

.section { padding: 56px 0; position: relative; }
.section-soft { background: linear-gradient(90deg, #ffffff 0%, var(--beige) 100%); }
.section-beige { background: #FBFAF4; }
.section-content { min-width: 0; }
.section-title { margin-bottom: 36px; text-align: center; color: var(--green); font-size: 32px; line-height: 1.3; font-weight: 900; letter-spacing: 0.075em; }
.section-title::after { content: ""; display: block; width: 42px; height: 2px; margin: 22px auto 0; background: var(--gold); }
.section-copy { margin: 20px 0 24px; text-align: center; color: #344A41; font-size: 15px; font-weight: 500; line-height: 2.05; }

.cards-2x2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.problem-card { padding: 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; background: #ffffff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 24px rgba(18, 52, 40, 0.065); font-size: 17px; line-height: 1.65; font-weight: 800; color: #223C32; }
.icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; color: var(--green); }
.icon svg { width: 44px; height: 44px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.diagram-compare { display: grid; grid-template-columns: 1fr 58px 1fr; gap: 22px; align-items: center; }
.diagram-card { display: flex; flex-direction: column; align-items: center; padding: 24px; background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(31, 77, 58, 0.10); border-radius: 24px; box-shadow: 0 8px 24px rgba(18, 52, 40, 0.065); }
.diagram-label { margin: 0 0 20px; text-align: center; color: #1F302A; font-weight: 900; font-size: 14px; letter-spacing: 0.08em; }
.scatter {  margin-bottom: 18px; }
.scatter img{width: 260px;}

.system-map { height: 132px; position: relative; margin-bottom: 10px; display: grid; place-items: center; }
.system-map::before { content: "ルール・判断基準"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); min-width: 164px; padding: 8px 14px; text-align: center; border: 1px solid rgba(31,77,58,0.28); border-radius: 6px; font-size: 12px; font-weight: 800; background: #fff; }
.map-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; padding-top: 40px; }
.map-box { padding: 9px 10px; text-align: center; border: 1px solid rgba(31,77,58,0.32); border-radius: 6px; background: #fff; font-size: 12px; font-weight: 800; color: #233B32; }
.db { width: 44px; height: 36px; margin: 10px auto 0; border: 2px solid rgba(31,77,58,0.38); border-radius: 50% / 18%; position: relative; }
.db::before, .db::after { content: ""; position: absolute; left: -2px; right: -2px; height: 12px; border: 2px solid rgba(31,77,58,0.38); border-top: 0; border-radius: 50% / 18%; }
.db::before { top: 10px; } .db::after { top: 20px; }
.diagram-list { margin: 0; padding-left: 18px; color: #344A41; font-size: 13px; font-weight: 600; line-height: 1.9; }
.next-circle { width: 54px; height: 54px; display: grid; place-items: center; color: #ffffff; background: var(--gold); border-radius: 999px; box-shadow: 0 12px 24px rgba(198,168,92,0.32); margin-inline: auto; }
.next-circle::before { content: ""; width: 12px; height: 12px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(45deg) translateX(-2px); }

.steps-3, .pillars, .industry-grid { display: grid; gap: 22px; }
.steps-3 { grid-template-columns: 1fr 34px 1fr 34px 1fr; align-items: center; }
.step-card, .pillar-card, .industry-card, .flow-card, .feature-card, .tool-box { background: #ffffff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 24px rgba(18, 52, 40, 0.065); }
.step-card { min-height: 168px; padding: 24px 22px 22px; position: relative; text-align: center; }
.badge { position: absolute; left: 20px; top: -14px; width: 34px; height: 34px; display: grid; place-items: center; color: #ffffff; background: var(--green); border-radius: 999px; font-weight: 900; box-shadow: 0 8px 16px rgba(31,77,58,0.20); }
.step-card .icon { margin: 0 auto 10px; }
.card-title { margin: 0; color: var(--green); font-size: 18px; font-weight: 900; letter-spacing: 0.08em; line-height: 1.5; }
.card-text { margin: 8px 0 0; color: #344A41; font-size: 13px; line-height: 1.8; font-weight: 600; }
.flow-arrow { width: 18px; height: 18px; border-top: 4px solid var(--gold); border-right: 4px solid var(--gold); transform: rotate(45deg); justify-self: center; opacity: 0.9; }
.pillars { grid-template-columns: repeat(4, 1fr); }
.pillar-card { min-height: 206px; padding: 26px 22px 24px; text-align: center; }
.pillar-card .icon { margin: 0 auto 12px; }

.ecosystem { position: relative; min-height: 230px; padding: 22px 22px 26px; }
.tool-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 22px); }
.tool-row.bottom { margin-top: clamp(32px, 7vw, 84px); }
.tool-box { min-height: 64px; display: grid; place-items: center; text-align: center; padding: 12px; color: #1D362C; font-size: 14px; font-weight: 900; line-height: 1.4; }
.tool-box small { display: block; margin-top: 2px; color: #63736C; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 999px; background: var(--green); box-shadow: 0 12px 26px rgba(31,77,58,0.28); z-index: 3; }
.ecosystem::before, .ecosystem::after { content: ""; position: absolute; left: 14%; right: 14%; border-top: 2px dotted rgba(31,77,58,0.55); z-index: 1; }
.ecosystem::before { top: 104px; } .ecosystem::after { bottom: 104px; }

.feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.feature-card { padding: 20px 16px; min-height: 148px; text-align: center; }
.feature-card .icon { width: 36px; height: 36px; margin: 0 auto 8px; }
.tablet { position: relative; max-width: 698px; margin: 24px auto 0; padding: 16px; border-radius: 30px; background: #1B1E1F; box-shadow: 0 22px 48px rgba(15, 30, 26, 0.24); }
.tablet-screen { overflow: hidden; min-height: 292px; display: grid; grid-template-columns: 126px 1fr; border-radius: 20px; background: #ffffff; }
.sokumo-sidebar { padding: 20px 16px; color: #ffffff; background: linear-gradient(180deg, var(--green), #0F3426); }
.sokumo-logo { margin-bottom: 22px; font-size: 14px; font-weight: 900; letter-spacing: 0.08em; }
.side-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 11px; font-weight: 700; opacity: 0.86; }
.side-dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,0.75); }
.sokumo-main { padding: 24px 24px 18px; background: linear-gradient(180deg, #fff 0%, #F8FAF7 100%); }
.ui-title { margin: 0 0 18px; font-size: 18px; color: var(--green); font-weight: 900; }
.ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-list, .check-list { border: 1px solid rgba(31,77,58,0.12); border-radius: 14px; padding: 14px; background: #fff; }
.field-row, .check-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 12px; border-bottom: 1px solid rgba(31,77,58,0.08); }
.field-row:last-child, .check-row:last-child { border-bottom: 0; }
.check-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--green); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #58A66C; }
.status-dot.warn { background: #E5B33B; }
.photo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.photo, .add-photo { height: 48px; border-radius: 9px; background: linear-gradient(135deg, #DDE6E2, #A9B9B1); border: 1px solid rgba(31,77,58,0.12); }
.add-photo { display: grid; place-items: center; color: var(--green); background: #fff; font-size: 11px; font-weight: 800; }

.flow-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.flow-card { min-height: 146px; padding: 22px 14px 18px; position: relative; text-align: center; }
.flow-card .badge { left: 14px; top: -12px; width: 30px; height: 30px; font-size: 13px; }
.flow-card .icon { width: 38px; height: 38px; margin: 0 auto 8px; }
.flow-card .card-title { font-size: 15px; }
.flow-card .card-text { font-size: 11px; line-height: 1.75; }

.industry-grid { grid-template-columns: repeat(6, 1fr); }
.industry-card { min-height: 122px; display: grid; place-items: center; padding: 18px 10px; text-align: center; font-weight: 900; color: var(--green); }
.industry-card .icon { width: 42px; height: 42px; margin-bottom: 8px; }

@media (max-width: 1024px) {
  .hero-visual { min-height: 360px; }
  .cube-stage { left: 50%; right: auto; transform: translateX(-50%); }
  .problem-card{padding: 20px; font-size: 15px;}
  .pillars, .industry-grid, .flow-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .hero { padding: 38px 0 58px; }
  .hero-grid{grid-template-columns: 1fr;}
  .hero-copy { background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.1) 100%); }
  .hero-title { font-size: 42px; }
  .hero-visual { position: absolute; top: 0; right: 0; width: 100%; max-width: 500px; height: 100%; }
  .hero-visual::before,.hero-visual::after{content: none;}
  .diagram-compare, .steps-3, .feature-list, .tool-row, .tool-row.bottom, .pillars { grid-template-columns: 1fr; }
  .cards-2x2,.flow-5 { grid-template-columns: repeat(2, 1fr); }
  .problem-card{padding: 18px; font-size: 14px;}
  .diagram-compare { gap: 18px; }
  .next-circle { transform: rotate(90deg); }
  .flow-arrow{transform: rotate(135deg);}
  .steps-3 { gap: 18px; }
  .ecosystem { padding: 0; min-height: auto; }
  .ecosystem::before, .ecosystem::after, .hub { display: none; }
  .tool-row.bottom { margin-top: 16px; }
  .tablet-screen { grid-template-columns: 1fr; }
  .sokumo-sidebar { display: none; }
  .ui-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .flow-5 { grid-template-columns: 1fr; }
  .industry-grid{grid-template-columns: repeat(2, 1fr);}
  .cards-2x2{ grid-template-columns: 1fr; font-size: 14px;}
}