/* =============================================
   Services Hub — styles.css (scoped to .services-hub)
   Medpartner LP / Stress Check LP と同じデザイン言語
   ============================================= */
.services-hub{
  --c-white:#ffffff;
  --c-off:#FAFAFA;
  --c-bluegray:#F1F5F9;
  --c-trust:#1E3A8A;
  --c-trust-2:#3B5BC0;
  --c-mint:#14B8A6;
  --c-coral:#F97316;
  --c-coral-hover:#FB8531;
  --c-text:#1f2937;
  --c-text-sub:#475569;
  --c-border:#E2E8F0;
  --c-border-soft:#EEF2F7;
  --c-soft-mint:#ECFDF8;
  --c-soft-blue:#EEF3FB;

  --f-en:"Space Grotesk","Inter",system-ui,sans-serif;
  --f-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;

  --r-md:12px;
  --r-lg:18px;
  --r-xl:24px;

  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 2px 8px rgba(15,23,42,.04);
  --shadow-md:0 4px 16px rgba(30,58,138,.08);

  --container:1080px;

  font-family:var(--f-jp);
  color:var(--c-text);
  background:var(--c-white);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.services-hub *,
.services-hub *::before,
.services-hub *::after{box-sizing:border-box}
.services-hub img{max-width:100%;height:auto;display:block}
.services-hub a{color:inherit;text-decoration:none}
.services-hub ul,
.services-hub ol{list-style:none;margin:0;padding:0}

/* ---- container / section ---- */
.services-hub .container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
  position:relative;
}
.services-hub section{
  padding:96px 0;
  position:relative;
  overflow:hidden;
}

/* ---- reveal animation ---- */
.services-hub .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 300ms ease, transform 300ms ease;
}
.services-hub .reveal.is-visible{opacity:1;transform:translateY(0)}

/* ---- shared headings ---- */
.services-hub .eyebrow{
  font-family:var(--f-en);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--c-mint);
  font-weight:600;
  text-transform:uppercase;
  display:inline-block;
  margin-bottom:12px;
}
.services-hub .section-title{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:32px;
  letter-spacing:.04em;
  text-align:center;
  margin:0 0 16px;
  color:var(--c-trust);
  line-height:1.4;
}
.services-hub .section-title .accent-num{
  font-family:var(--f-en);
  color:var(--c-coral);
  font-weight:700;
}
.services-hub .section-sub{
  text-align:center;
  color:var(--c-text-sub);
  margin:0 0 56px;
  font-size:15px;
  line-height:1.9;
}

/* ---- buttons ---- */
.services-hub .btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:15px;
  letter-spacing:.04em;
  transition:transform 200ms ease, filter 200ms ease, background 200ms ease, color 200ms ease;
  border:1.5px solid transparent;
  cursor:pointer;
  line-height:1;
  white-space:nowrap;
}
.services-hub .btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.services-hub .btn--coral{background:var(--c-coral);color:#fff;box-shadow:0 6px 14px rgba(249,115,22,.22)}
.services-hub .btn--coral:hover{background:var(--c-coral-hover)}
.services-hub .btn--blue{background:var(--c-trust);color:#fff}
.services-hub .btn--blue-outline{border-color:var(--c-trust);color:var(--c-trust);background:#fff}
.services-hub .btn--coral-outline{border-color:var(--c-coral);color:var(--c-coral);background:#fff}
.services-hub .btn--ghost{border-color:#fff;color:#fff;background:transparent}
.services-hub .btn--lg{padding:18px 56px;font-size:16px}

/* ---- decorative blob sway ---- */
.services-hub .blob{
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:.7;
  animation:hub-sway 11s ease-in-out infinite;
}
.services-hub .blob--slow{animation-duration:15s}
@keyframes hub-sway{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  50%{transform:translate(10px,-12px) rotate(2deg)}
}

/* ===========================================
   1. HERO (light intro)
   =========================================== */
.services-hub .hub-hero{
  padding:96px 0 64px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F8FF 100%);
  text-align:center;
}
.services-hub .hub-hero .blob--a{top:-40px;right:-30px;width:220px}
.services-hub .hub-hero .blob--b{bottom:-30px;left:-30px;width:180px;opacity:.5}
.services-hub .hub-hero__title{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:42px;
  line-height:1.45;
  letter-spacing:.02em;
  color:var(--c-trust);
  margin:0 0 18px;
}
.services-hub .hub-hero__title .hl{color:var(--c-coral)}
.services-hub .hub-hero__title .accent-en{
  font-family:var(--f-en);
  color:var(--c-mint);
  font-weight:600;
  font-size:18px;
  letter-spacing:.18em;
  display:block;
  margin-bottom:14px;
}
.services-hub .hub-hero__lead{
  color:var(--c-text-sub);
  font-size:15px;
  line-height:1.95;
  margin:0 auto 28px;
  max-width:640px;
}
.services-hub .hub-hero__chips{
  display:inline-flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.services-hub .hub-hero__chips li{
  border:1px solid #BFDBFE;
  color:var(--c-trust);
  border-radius:999px;
  padding:7px 16px;
  font-size:12px;
  background:#fff;
  font-weight:500;
}

/* ===========================================
   2. DOMAINS (3 cards — overview)
   =========================================== */
.services-hub .domains{background:var(--c-off)}
.services-hub .domains__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:48px;
}
.services-hub .domain-card{
  background:#fff;
  border:1.5px solid var(--c-border);
  border-radius:18px;
  padding:32px 28px;
  text-align:center;
  transition:transform 220ms ease, box-shadow 220ms ease;
}
.services-hub .domain-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(30,58,138,.08);
}
.services-hub .domain-card__icon{
  width:88px;height:88px;object-fit:contain;
  margin:0 auto 16px;
}
.services-hub .domain-card h3{
  font-size:19px;font-weight:700;color:var(--c-trust);
  margin:0 0 14px;line-height:1.45;
}
.services-hub .domain-card__sub{
  font-size:14px;color:var(--c-text-sub);font-weight:500;
}
.services-hub .domain-card p{
  font-size:13.5px;color:var(--c-text-sub);line-height:1.9;
  margin:0;text-align:left;
}

/* ===========================================
   3. SERVICE GRID (6 cards — hub links)
   =========================================== */
.services-hub .service-list{background:var(--c-bluegray)}
.services-hub .service-list__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-bottom:32px;
}
.services-hub .svc-card{
  background:#fff;
  border:1.5px solid var(--c-border);
  border-radius:18px;
  padding:28px 24px 24px;
  display:flex;flex-direction:column;
  position:relative;
  min-height:260px;
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.services-hub .svc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(30,58,138,.10);
  border-color:#CFE0FA;
}
.services-hub .svc-card__head{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
.services-hub .svc-card__icon{
  width:56px;height:56px;object-fit:contain;flex-shrink:0;
}
.services-hub .svc-card h3{
  margin:0;font-size:17px;font-weight:700;color:var(--c-trust);
  line-height:1.45;
}
.services-hub .svc-card__sub{
  display:block;
  font-size:12px;color:var(--c-text-sub);font-weight:500;
  margin-top:2px;
}
.services-hub .svc-card p{
  margin:0 0 18px;
  font-size:13px;color:var(--c-text-sub);line-height:1.85;
  flex:1;
}
.services-hub .svc-card__footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
}
.services-hub .svc-card__cta{
  display:inline-flex;align-items:center;gap:6px;
  border:1.5px solid var(--c-coral);
  color:var(--c-coral);
  border-radius:999px;
  padding:7px 18px;
  font-size:12.5px;font-weight:700;
  transition:background 200ms ease, color 200ms ease, transform 200ms ease;
}
.services-hub .svc-card__cta:hover{
  background:var(--c-coral);color:#fff;transform:translateX(2px);
}
.services-hub .svc-card__cta::after{content:"→";font-size:13px;line-height:1}
.services-hub .svc-card__tag{
  font-size:10.5px;font-weight:700;
  letter-spacing:.08em;
  padding:4px 10px;
  border-radius:999px;
}
.services-hub .svc-card__tag--ready{
  background:var(--c-soft-mint);color:var(--c-mint);
}
.services-hub .svc-card__tag--soon{
  background:#FEF3E2;color:#C2570A;
}
.services-hub .svc-card[data-status="soon"]{opacity:.86}
.services-hub .svc-card[data-status="soon"] .svc-card__cta{
  border-color:var(--c-border);color:var(--c-text-sub);
  pointer-events:none;
}
.services-hub .service-list .blob--a{top:-30px;left:-40px;width:160px}
.services-hub .service-list .blob--b{bottom:-30px;right:-40px;width:160px}

/* solo モード: サービス一覧セクションだけを表示する場合 */
.services-hub--solo .service-list{
  padding-top:120px;
  padding-bottom:120px;
  min-height:100vh;
}
.services-hub--solo .service-list .section-title{
  font-size:36px;
}
@media (max-width:767px){
  .services-hub--solo .service-list{padding-top:72px;padding-bottom:80px;min-height:0}
  .services-hub--solo .service-list .section-title{font-size:26px}
}

/* ===========================================
   4. SET PLANS (A / B)
   =========================================== */
.services-hub .setplan-section{padding-top:40px}
.services-hub .setplan{
  background:var(--c-soft-mint);
  border-radius:20px;
  padding:48px 48px 56px;
  position:relative;
  overflow:hidden;
}
.services-hub .setplan__title{
  text-align:center;font-size:22px;font-weight:700;color:var(--c-trust);
  margin:0 0 8px;letter-spacing:.02em;
}
.services-hub .setplan__sub{
  text-align:center;color:var(--c-text-sub);font-size:13.5px;
  margin:0 0 32px;
}
.services-hub .setplan__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
.services-hub .setplan-card{
  background:#fff;
  border-radius:14px;
  padding:32px 28px 28px;
  text-align:center;
  box-shadow:0 4px 16px rgba(20,184,166,.10);
}
.services-hub .setplan-card h4{
  font-size:19px;font-weight:700;color:var(--c-trust);
  margin:0 0 12px;line-height:1.5;
}
.services-hub .setplan-card h4 span{
  display:block;
  font-size:13px;font-weight:500;color:var(--c-text-sub);
  margin-top:4px;
}
.services-hub .setplan-card__price{
  display:inline-block;
  font-family:var(--f-en);font-weight:700;color:var(--c-coral);
  font-size:20px;line-height:1;
  margin-bottom:12px;
}
.services-hub .setplan-card p{
  font-size:13.5px;color:var(--c-text-sub);line-height:1.85;
  margin:0 0 20px;
}
.services-hub .setplan__leaf{
  position:absolute;right:8px;bottom:0;width:110px;opacity:.7;pointer-events:none;
}

/* ===========================================
   5. FINAL CTA
   =========================================== */
.services-hub .finalcta{
  background:linear-gradient(135deg,#1E3A8A 0%,#234494 60%,#2A4FAE 100%);
  color:#fff;
  text-align:center;
  padding:96px 0;
  position:relative;
  overflow:hidden;
}
.services-hub .finalcta h2{
  font-size:30px;font-weight:700;
  margin:0 0 18px;letter-spacing:.04em;
  color:#fff;
}
.services-hub .finalcta p{
  font-size:14.5px;color:rgba(255,255,255,.88);
  margin:0 0 36px;line-height:1.9;
}
.services-hub .finalcta__buttons{
  display:flex;flex-direction:column;gap:14px;align-items:center;
}
.services-hub .finalcta__waves{
  position:absolute;width:360px;bottom:0;opacity:.35;pointer-events:none;
}
.services-hub .finalcta__waves--l{left:-60px;transform:scaleX(-1)}
.services-hub .finalcta__waves--r{right:-60px}

/* ---- footer ---- */
.services-hub .footer{
  background:var(--c-trust);color:rgba(255,255,255,.7);
  padding:20px 0;text-align:center;font-size:12px;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width:1023px){
  .services-hub section{padding:80px 0}
  .services-hub .hub-hero__title{font-size:34px}
  .services-hub .domains__grid{grid-template-columns:1fr}
  .services-hub .service-list__grid{grid-template-columns:repeat(2,1fr)}
  .services-hub .setplan{padding:36px 28px 40px}
}
@media (max-width:767px){
  .services-hub section{padding:64px 0}
  .services-hub .container{padding:0 20px}
  .services-hub .hub-hero{padding:64px 0 40px}
  .services-hub .hub-hero__title{font-size:26px}
  .services-hub .section-title{font-size:24px}
  .services-hub .service-list__grid{grid-template-columns:1fr;gap:14px}
  .services-hub .svc-card{min-height:0;padding:22px 20px}
  .services-hub .setplan__grid{grid-template-columns:1fr}
  .services-hub .setplan-card{padding:24px 20px}
  .services-hub .finalcta{padding:72px 0}
  .services-hub .finalcta h2{font-size:24px}
  .services-hub .btn--lg{padding:16px 32px;font-size:14px;width:100%;max-width:340px}
}

/* ===========================================
   SWELL header/footer hide on this template
   =========================================== */
body.page-template-page-services-hub #header,
body.page-template-page-services-hub .l-header,
body.page-template-page-services-hub #footer,
body.page-template-page-services-hub .l-footer,
body.page-template-page-services-hub .p-fixBtnsArea,
body.page-template-page-services-hub .p-pageTitle,
body.page-template-page-services-hub .c-pageTitle{display:none !important}
body.page-template-page-services-hub .l-container,
body.page-template-page-services-hub .l-mainContent,
body.page-template-page-services-hub .l-mainContent__inner,
body.page-template-page-services-hub .p-mainContents,
body.page-template-page-services-hub .post_content{max-width:none !important;width:100% !important;margin:0 !important;padding:0 !important}
body.page-template-page-services-hub{margin:0 !important;padding:0 !important}