html { scroll-behavior: smooth; }
  html, body { margin: 0; padding: 0; background: rgb(245,242,238); }
  * { box-sizing: border-box; }
  #go5-svc a { transition: transform .3s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease, color .25s ease, background-position .55s ease, border-color .25s ease, background-color .25s ease, opacity .25s ease; }
  #go5-svc a span { transition: transform .3s cubic-bezier(.2,.75,.3,1); }
  #go5-svc a svg { transition: transform .3s cubic-bezier(.2,.75,.3,1); }
  /* header nav/logo hover states are owned by the Site Menu component's own scoped CSS */
  #go5-svc .g5-sns-footer > a { transition: transform .28s cubic-bezier(.2,.75,.3,1), background .28s ease, color .28s ease; cursor:pointer; }
  #go5-svc .g5-sns-footer > a:hover { transform: translateY(-3px); background: linear-gradient(135deg,#6EC5C1,#E7647A) !important; color:#fff; }
  .g5-cta { background-size:180% 100% !important; background-position:0 0; }
  .g5-cta:hover { transform:translateY(-3px); background-position:100% 0; box-shadow:0 14px 30px -8px rgba(231,100,122,.55); }
  .g5-ghost:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.95) !important; background:rgba(255,255,255,.1) !important; }
  .g5-more:hover { color:#2696AF !important; }
  .g5-more:hover span, .g5-more:hover svg { transform:translateX(5px); }
  .g5-anchor:hover { background: rgba(0,0,0,0.04) !important; }
  .g5-svc-cta:hover { transform: translateX(4px); }
  .g5-combo, .g5-usecase { transition: transform .45s cubic-bezier(.2,.75,.3,1), box-shadow .45s cubic-bezier(.2,.75,.3,1); }
  .g5-combo:hover, .g5-usecase:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -14px rgba(0,0,0,.22); }
  .g5-faq summary::-webkit-details-marker { display:none; }
  .g5-faq summary { list-style:none; cursor:pointer; }
  .g5-faq[open] .g5-faq-chevron { transform: rotate(45deg); }
  .g5-email:hover { transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(0,0,0,.4); }
  #go5-svc footer a:not(.g5-email):hover { color:rgba(255,255,255,.95) !important; transform:translateX(3px); }
  .g5-field input, .g5-field select, .g5-field textarea { font-family: 'Noto Sans JP', sans-serif; font-size: 15px; color: rgb(30,30,30); border: 1px solid rgb(222,219,214); border-radius: 10px; padding: 13px 16px; background: rgb(255,255,255); width: 100%; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
  .g5-field input:focus, .g5-field select:focus, .g5-field textarea:focus { border-color: rgb(100,190,220); box-shadow: 0 0 0 3px rgba(100,190,220,0.18); }
  .g5-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(231,100,122,.5); }

  /* ============================================================
     RESPONSIVE — breakpoints 1024 / 640
     ============================================================ */
  #go5-svc { --g5-content: 1500px; --g5-gutter: 48px; }
  @media (min-width: 1025px) {
    #go5-svc header, #go5-svc > main > section, #go5-svc > main > nav.g5-crumb, #go5-svc footer {
      padding-left:  max(var(--g5-gutter), calc((100% - var(--g5-content)) / 2)) !important;
      padding-right: max(var(--g5-gutter), calc((100% - var(--g5-content)) / 2)) !important;
    }
  }
  @media (max-width: 1024px) {
    #go5-svc > main > section, #go5-svc > main > nav.g5-crumb, #go5-svc header, #go5-svc footer { padding-left: 44px !important; padding-right: 44px !important; }
    #go5-svc section[data-screen-label="Hero"] h1 { font-size: 36px !important; }

    #go5-svc .g5-svc-row { flex-direction: column !important; gap: 30px !important; }
    #go5-svc .g5-svc-row > div:first-child { width: auto !important; }
    #go5-svc .g5-svc-block, #go5-svc .g5-svc-block-rev { flex-direction: column !important; }
    #go5-svc .g5-svc-block > div:last-child, #go5-svc .g5-svc-block-rev > div:last-child { width: 100% !important; }
    #go5-svc .g5-svc-block > div > div[style*="flex-direction: row; gap: 32px"] { flex-direction: column !important; gap: 20px !important; }

    #go5-svc .g5-combo-grid { grid-template-columns: repeat(2, 1fr) !important; }
    #go5-svc .g5-usecase-grid { grid-template-columns: repeat(2, 1fr) !important; }
    #go5-svc .g5-why-grid { grid-template-columns: repeat(2, 1fr) !important; }
    #go5-svc .g5-how-steps { flex-direction: column !important; gap: 26px !important; }
    #go5-svc .g5-how-steps > div { padding-right: 0 !important; }

    #go5-svc .g5-footer-top { flex-wrap: wrap !important; }
    #go5-svc .g5-footer-cols { flex-wrap: wrap !important; gap: 30px 44px !important; }
  }
  @media (max-width: 640px) {
    #go5-svc > main > section, #go5-svc > main > nav.g5-crumb, #go5-svc footer { padding-left: 22px !important; padding-right: 22px !important; }
    #go5-svc section[data-screen-label="Hero"] { padding-top: 56px !important; padding-bottom: 48px !important; }
    #go5-svc section[data-screen-label="Hero"] h1 { font-size: clamp(28px, 8vw, 36px) !important; }
    #go5-svc section[data-screen-label="Hero"] p { font-size: 15px !important; line-height: 25px !important; }
    #go5-svc section[data-screen-label="Hero"] { min-height: 380px !important; padding-top: 56px !important; padding-bottom: 56px !important; }

    #go5-svc section[data-screen-label="Anchor Nav"] { padding: 14px 18px !important; }

    #go5-svc .g5-combo-grid, #go5-svc .g5-usecase-grid, #go5-svc .g5-why-grid { grid-template-columns: 1fr !important; }
    #go5-svc div[style*="flex-direction: row; gap: 28px"] { justify-content: center !important; }
    #go5-svc .g5-form-row { grid-template-columns: 1fr !important; }

    #go5-svc section[data-screen-label="Contact"] form { padding: 28px 22px !important; }

    #go5-svc .g5-footer-top { flex-direction: column !important; align-items: center !important; gap: 34px !important; text-align: center !important; }
    #go5-svc .g5-footer-top > div:first-child { width: auto !important; align-items: center !important; }
    #go5-svc .g5-footer-cols { flex-direction: column !important; align-items: center !important; gap: 28px !important; }
    #go5-svc .g5-footer-cols > div { min-width: 0; align-items: center !important; text-align: center !important; }
    #go5-svc .g5-footer-cols > div > div { justify-content: center !important; }
    #go5-svc .g5-footer-bottom { flex-direction: column !important; gap: 14px !important; align-items: center !important; }
  }