:root{
  /* ===== s- tokens ===== */
  --s-bg: #ffffff;
  --s-ink: #0b1220;
  --s-muted: #5c6472;

  /* 青帯（参考画像寄せ） */
  --s-blue: #1e8cc8;
  --s-blue-deep: #177db6;
  --s-blue-accent: #0ea5ff;

  --s-line: rgba(11, 18, 32, .10);

  --s-radius-lg: 18px;
  --s-radius-md: 14px;

  --s-shadow-sm: 0 12px 28px rgba(11,18,32,.10);
  --s-shadow-md: 0 22px 60px rgba(11,18,32,.16);

  --s-container: min(1120px, calc(100% - 40px));
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ margin:0; }

.s-body{
  background: var(--s-bg);
  color: var(--s-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.8;
}

a{ color: inherit; text-decoration: none; }
a:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(14,165,255,.22); border-radius: 10px; }

.s-main{ width:100%; }

/* ===== header（ロゴだけ） ===== */
.s-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11,18,32,.08);
}

.s-header-inner{
  width: var(--s-container);
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding: 14px 0;
}

.s-header-brand-ja{
  font-weight: 600;
  letter-spacing: .03em;
  font-size: 1.08rem;
}

/* ===== hero ===== */
.s-hero{
  padding: 56px 0 26px;
  background: #fff;
}

.s-hero-inner{
  width: var(--s-container);
  margin: 0 auto;
}

.s-hero-strap{
  margin: 0;
  text-align: center;
  letter-spacing: .28em;
  font-weight: 500;
  color: rgba(11,18,32,.42);
  font-size: .82rem;
}

.s-hero-head{
  margin: 14px 0 0;
  text-align:center;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.35;
  letter-spacing: .02em;
}
.s-hero-head-accent{
  color: #0d8bd6;
  font-weight: 700;
}

.s-hero-grid{
  margin-top: 34px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
}

/* 左の円形図 */
.s-hero-visual{
  display:flex;
  justify-content:center;
}

.s-wheel{
  width: min(420px, 100%);
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(13,139,214,.12), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(13,139,214,.06), transparent 70%);
}

.s-wheel-center{
  position:absolute;
  inset: 28%;
  border-radius: 999px;
  background: #fff;
  border: 3px solid rgba(13,139,214,.25);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  text-align:center;
  box-shadow: 0 12px 30px rgba(11,18,32,.10);
}
.s-wheel-logo{
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(11,18,32,.86);
}
.s-wheel-sub{
  font-size: .9rem;
  color: rgba(11,18,32,.60);
}

.s-wheel-item{
  position:absolute;
  width: 98px;
  height: 98px;
  border-radius: 999px;
  background: #0d8bd6;
  color: #fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  font-weight: 500;
  box-shadow: 0 16px 34px rgba(13,139,214,.25);
}
.s-wheel-item i{ font-size: 1.15rem; }
.s-wheel-item span{ font-size: .78rem; letter-spacing:.02em; }

.s-wi-1{ top: 2%; left: 50%; transform: translate(-50%, 0); }
.s-wi-2{ top: 16%; left: 82%; transform: translate(-50%, -50%); }
.s-wi-3{ top: 50%; left: 94%; transform: translate(-50%, -50%); }
.s-wi-4{ top: 84%; left: 82%; transform: translate(-50%, -50%); }
.s-wi-5{ top: 98%; left: 50%; transform: translate(-50%, -100%); }
.s-wi-6{ top: 84%; left: 18%; transform: translate(-50%, -50%); }
.s-wi-7{ top: 50%; left: 6%;  transform: translate(-50%, -50%); }
.s-wi-8{ top: 16%; left: 18%; transform: translate(-50%, -50%); }

/* 右説明 */
.s-hero-copy-title{
  margin: 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.s-hero-copy-text{
  margin: 12px 0 0;
  color: rgba(11,18,32,.72);
}

.s-hero-actions{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.s-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 500;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.s-btn--primary{
  background: #0d8bd6;
  color: #fff;
  box-shadow: 0 18px 42px rgba(13,139,214,.22);
}
.s-btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 22px 54px rgba(13,139,214,.28); }
.s-btn--outline{
  background: #fff;
  border: 1px solid rgba(13,139,214,.35);
  color: rgba(11,18,32,.80);
}
.s-btn--outline:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px rgba(11,18,32,.10); }

.s-hero-note{
  margin-top: 18px;
  display:grid;
  gap: 8px;
}
.s-hero-note-item{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(11,18,32,.68);
}
.s-hero-note-item i{ color: #0d8bd6; }

/* ===== blue sections ===== */
.s-blue{
  margin-top: 54px;
  background: var(--s-blue);
  color: #fff;
  padding: 54px 0 62px;
}
.s-blue--pad{
  padding: 62px 0 72px;
}

.s-blue-inner{
  width: var(--s-container);
  margin: 0 auto;
}

.s-blue-strap{
  margin: 0;
  text-align:center;
  letter-spacing: .32em;
  font-weight: 500;
  opacity: .92;
  font-size: .80rem;
}

.s-blue-head{
  margin: 12px 0 0;
  text-align:center;
  font-size: clamp(1.55rem, 2.3vw, 2.1rem);
  letter-spacing: .02em;
}

.s-blue-lead{
  margin: 12px auto 0;
  text-align:center;
  max-width: 820px;
  opacity: .95;
}

/* ===== product cards（6つ対応） ===== */
.s-product-grid{
  margin-top: 36px;
  display:grid;
  gap: 22px;
  align-items: stretch;
}

/* 6枚：PC=3列×2段 / tablet=2列 / mobile=1列 */
.s-product-grid--six{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.s-product-card{
  background: #fff;
  color: var(--s-ink);
  border-radius: var(--s-radius-lg);
  padding: 22px 22px 18px;
  box-shadow: 0 22px 54px rgba(0,0,0,.18);
  position: relative;
  display:flex;
  flex-direction:column;
  min-height: 520px;
}

.s-product-mini{
  margin: 0;
  font-weight: 500;
  color: rgba(11,18,32,.62);
  font-size: .85rem;
}

.s-product-title{
  margin: 10px 0 0;
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: .02em;
}

.s-product-media{
  margin-top: 14px;
  border-radius: 12px;
  overflow:hidden;
  background: #f2f4f8;
  border: 1px solid rgba(11,18,32,.08);
}
.s-product-media img{
  width: 100%;
  height: 210px;
  object-fit: cover;
  display:block;
}

.s-product-text{
  margin: 14px 0 0;
  color: rgba(11,18,32,.72);
  font-size: .98rem;
  flex: 1 1 auto;
}

/* 丸い矢印ボタン */
.s-product-cta{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #0d8bd6;
  color: #fff;
  display:grid;
  place-items:center;
  margin: 22px auto 0;
  box-shadow: 0 18px 36px rgba(13,139,214,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.s-product-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 48px rgba(13,139,214,.28);
}

/* ===== support cards ===== */
.s-support-grid{
  margin-top: 30px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.s-support-card{ color:#fff; }

.s-support-media{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 54px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
}

.s-support-media img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display:block;
  filter: saturate(1.02) contrast(1.02);
}

.s-support-label{
  position:absolute;
  top: 12px;
  left: 12px;
  background: #fff;
  color: #0d8bd6;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  font-size: .95rem;
}

.s-support-text{
  margin: 12px 2px 0;
  opacity: .95;
  line-height: 1.85;
}

/* ===== CTA ===== */
.s-cta{
  background: #fff;
  padding: 54px 0 64px;
}

.s-cta-inner{
  width: var(--s-container);
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: var(--s-shadow-sm);
  padding: 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

.s-cta-title{
  margin: 0;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing:.02em;
}
.s-cta-desc{
  margin: 10px 0 0;
  color: rgba(11,18,32,.68);
}

.s-cta-right{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.s-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #0d8bd6;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 18px 42px rgba(13,139,214,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.s-cta-btn:hover{ transform: translateY(-2px); box-shadow: 0 22px 54px rgba(13,139,214,.28); }

.s-cta-tel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(13,139,214,.28);
  background: rgba(13,139,214,.06);
  color: rgba(11,18,32,.82);
  font-weight: 1000;
}

/* ===== footer ===== */
.s-footer{
  border-top: 1px solid rgba(11,18,32,.10);
  padding: 18px 0;
  text-align:center;
  background:#fff;
}
.s-footer-copy{
  color: rgba(11,18,32,.55);
}

/* ===== responsive ===== */
@media (max-width: 1100px){
  .s-product-grid--six{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .s-hero-grid{ grid-template-columns: 1fr; }
  .s-support-grid{ grid-template-columns: 1fr; }
  .s-support-media img{ height: 220px; }
  .s-product-card{ min-height: 0; }
}

@media (max-width: 720px){
  :root{ --s-container: calc(100% - 28px); }
  .s-wheel-item{ width: 84px; height: 84px; }
  .s-wheel-item span{ font-size: .74rem; }
  .s-product-grid--six{ grid-template-columns: 1fr; }
  .s-product-media img{ height: 200px; }
  .s-cta-inner{ flex-direction: column; align-items:flex-start; }
  .s-cta-right{ width: 100%; justify-content:stretch; }
  .s-cta-right a{ width: 100%; }
}