/* =========================================================
   Magitech サンプルテンプレート共通：上品化・テーマカラー連動パッチ
   対象：各業種デモページ
   方針：元の横幅・構成は維持し、メニュー・ヒーロー・料金バッジ・電話番号だけを整える。
         管理画面のテーマカラーを変更しても、白に抜けすぎず色味が残るグラデーションに統一。
   ========================================================= */

html {
  scroll-padding-top: 120px !important;
}
section[id],
#service,
#price,
#reason,
#case,
#faq,
#company,
#contact {
  scroll-margin-top: 120px !important;
}

/* メニューバー：黒ベタではなく、選択色の濃色＋ゴールドの上品なバー */
.global-nav.refined-nav,
.global-nav.refined-nav .nav-inner {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--mg-theme-dark, #0f172a) 86%, #020617 14%) 0%,
      color-mix(in srgb, var(--mg-theme-dark, #0f172a) 72%, var(--mg-theme-main, #1d4ed8) 28%) 52%,
      color-mix(in srgb, var(--mg-theme-dark, #0f172a) 88%, #020617 12%) 100%) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  border-bottom: 1px solid rgba(231,198,111,.50) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 22px rgba(5,18,38,.18) !important;
}
.global-nav.refined-nav .nav-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 0 !important;
  flex-wrap: wrap !important;
}
.global-nav.refined-nav .nav-inner a {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 8px 17px 8px 29px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  letter-spacing: .02em !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
  border-right: 1px solid rgba(0,0,0,.16) !important;
  background: transparent !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
  transition: background .18s ease, transform .18s ease, color .18s ease !important;
}
.global-nav.refined-nav .nav-inner a:first-child {
  border-left-color: rgba(232,198,119,.22) !important;
}
.global-nav.refined-nav .nav-inner a span {
  display: block !important;
  margin: 0 0 3px !important;
  color: #e7c66f !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
}
.global-nav.refined-nav .nav-inner a::before {
  content: "" !important;
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  background: radial-gradient(circle at 32% 28%, #fff7d6 0%, #e7c66f 45%, #9a6b18 100%) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 9px rgba(232,198,119,.38) !important;
}
.global-nav.refined-nav .nav-inner a:hover {
  background: linear-gradient(180deg, rgba(231,198,111,.18), rgba(255,255,255,.05)) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* ヒーロー：終点を白に近づけず、選択色が残る濃いめグラデーション */
.hero {
  position: relative !important;
  overflow: hidden !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--mg-theme-accent, #38bdf8) 36%, transparent 64%), transparent 30%),
    radial-gradient(circle at 18% 88%, color-mix(in srgb, var(--mg-theme-main, #1d4ed8) 28%, transparent 72%), transparent 34%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--mg-theme-dark, #0f172a) 92%, #020617 8%) 0%,
      color-mix(in srgb, var(--mg-theme-dark, #0f172a) 60%, var(--mg-theme-main, #1d4ed8) 40%) 34%,
      color-mix(in srgb, var(--mg-theme-main, #1d4ed8) 72%, var(--mg-theme-accent, #38bdf8) 28%) 68%,
      color-mix(in srgb, var(--mg-theme-main, #1d4ed8) 40%, var(--mg-theme-accent, #38bdf8) 60%) 100%) !important;
}
.hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(3,10,27,.30) 0%, rgba(3,10,27,.13) 46%, rgba(3,10,27,0) 100%) !important;
  z-index: 0 !important;
}
.hero .hero-bg-shape,
.hero .container,
.hero-grid,
.hero-copy,
.hero-visual {
  position: relative !important;
  z-index: 1 !important;
}
.hero *,
.hero h1,
.hero h2,
.hero h3,
.hero p,
.hero div,
.hero span,
.hero li,
.hero a,
.hero .hero-lead,
.hero .hero-note,
.hero .hero-badge {
  color: #ffffff !important;
}
.hero h1,
.hero .hero-lead,
.hero .hero-note {
  text-shadow: 0 8px 24px rgba(0,0,0,.38) !important;
}
.hero .hero-points span,
.hero .hero-note,
.hero .hero-badge {
  background: rgba(4,20,46,.24) !important;
  border-color: rgba(255,255,255,.32) !important;
}
.hero .photo-label {
  background: rgba(255,255,255,.94) !important;
  color: #0f172a !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  text-shadow: none !important;
}

/* ヒーロー下：白抜けを抑え、薄色でもテーマ色を残す */
.quick-info {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mg-theme-soft, #dbeafe) 62%, var(--mg-theme-main, #1d4ed8) 38%) 0%,
    color-mix(in srgb, var(--mg-theme-soft, #dbeafe) 72%, var(--mg-theme-main, #1d4ed8) 28%) 58%,
    color-mix(in srgb, var(--mg-theme-soft, #dbeafe) 78%, var(--mg-theme-accent, #38bdf8) 22%) 100%) !important;
}
.quick-grid div {
  background: linear-gradient(180deg,
    #ffffff 0%,
    color-mix(in srgb, var(--mg-theme-soft, #dbeafe) 76%, #ffffff 24%) 100%) !important;
  border-color: color-mix(in srgb, var(--mg-theme-soft, #dbeafe) 88%, var(--mg-theme-main, #1d4ed8) 12%) !important;
}
.worry-section {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mg-theme-soft, #dbeafe) 78%, var(--mg-theme-main, #1d4ed8) 22%) 0%,
    color-mix(in srgb, var(--mg-theme-soft, #dbeafe) 84%, var(--mg-theme-accent, #38bdf8) 16%) 100%) !important;
}
.worry-list div {
  background: #ffffff !important;
  border-color: color-mix(in srgb, var(--mg-theme-soft, #dbeafe) 78%, var(--mg-theme-main, #1d4ed8) 22%) !important;
}

/* 英字見出し：ゴールドマークを付けて統一 */
.section-head span,
.whats-new-head span,
.quick-grid span,
.company-mini-list span,
.contact-copy span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--mg-theme-main, #1d4ed8) !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
}
.section-head span::before,
.whats-new-head span::before,
.quick-grid span::before,
.company-mini-list span::before,
.contact-copy span::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 2px !important;
  background: linear-gradient(135deg, #e7c66f 0%, #f6e7aa 48%, #a77922 100%) !important;
  box-shadow: 0 0 0 1px rgba(167,121,34,.20), 0 2px 7px rgba(15,23,42,.12) !important;
  transform: rotate(45deg) !important;
  flex: 0 0 auto !important;
}
.section-head h2,
.whats-new-head h2 {
  letter-spacing: .02em !important;
}

/* カード類：元デザインを崩さず、少しだけ高級感 */
.service-card,
.case-card,
.price-card,
.reason-item,
.flow-card,
.voice-card,
.faq-item,
.company-box,
.contact-form,
.whats-new-box,
.worry-box {
  border-color: color-mix(in srgb, var(--mg-theme-soft, #dbeafe) 64%, #ffffff 36%) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.075) !important;
}
.service-card:hover,
.case-card:hover,
.price-card:hover,
.flow-card:hover,
.voice-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.105) !important;
}
.faq-item[open] {
  border-color: color-mix(in srgb, var(--mg-theme-accent, #38bdf8) 45%, #ffffff 55%) !important;
}
.company-table th {
  color: var(--mg-theme-main, #1d4ed8) !important;
  background: color-mix(in srgb, var(--mg-theme-pale, #eff6ff) 76%, var(--mg-theme-soft, #dbeafe) 24%) !important;
}

/* 料金の「おすすめ」：切れない上品バッジ */
.price-card {
  overflow: hidden !important;
  padding-top: 42px !important;
}
.price-card.featured {
  border-color: rgba(231,198,111,.95) !important;
  box-shadow: 0 18px 42px rgba(154,107,24,.13) !important;
}
.price-card .recommend {
  top: 12px !important;
  left: auto !important;
  right: 16px !important;
  transform: none !important;
  padding: 4px 12px !important;
  max-width: calc(100% - 32px) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  border-radius: 999px !important;
  color: #563a08 !important;
  background: linear-gradient(135deg, #fff8d7 0%, #e7c66f 52%, #c8982e 100%) !important;
  border: 1px solid rgba(157,111,24,.28) !important;
  box-shadow: 0 8px 18px rgba(154,107,24,.16) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

/* ボタン：主要色＋ゴールドの使い分け */
.btn-main,
.contact-form button,
.header-mail,
.mobile-fixed-cta a:last-child {
  background: linear-gradient(135deg, #f6d56b 0%, #dba635 48%, #9f6f1b 100%) !important;
  color: #2d1c05 !important;
  border: 1px solid rgba(126,82,12,.20) !important;
  text-shadow: none !important;
}
.btn-outline {
  border-color: rgba(255,255,255,.55) !important;
}

/* お問い合わせ：電話番号だけ赤アクセントにする */
.contact-section {
  background:
    radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--mg-theme-accent, #38bdf8) 26%, transparent 74%), transparent 30%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--mg-theme-dark, #0f172a) 88%, #020617 12%),
      color-mix(in srgb, var(--mg-theme-main, #1d4ed8) 58%, var(--mg-theme-dark, #0f172a) 42%) 58%,
      color-mix(in srgb, #9a6b18 65%, var(--mg-theme-main, #1d4ed8) 35%)) !important;
}
.contact-telbox {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.76) !important;
  color: #0f172a !important;
}
.contact-telbox div,
.contact-telbox p {
  color: #0f172a !important;
}
.contact-telbox a {
  color: #e60012 !important;
  text-shadow: none !important;
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 82px !important;
  }
  section[id],
  #service,
  #price,
  #reason,
  #case,
  #faq,
  #company,
  #contact {
    scroll-margin-top: 82px !important;
  }
  .global-nav.refined-nav .nav-inner {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .global-nav.refined-nav .nav-inner a {
    min-width: 108px !important;
    padding: 8px 13px 8px 26px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .global-nav.refined-nav .nav-inner a::before {
    left: 10px !important;
  }
  .global-nav.refined-nav .nav-inner a span {
    font-size: 8px !important;
    letter-spacing: .14em !important;
  }
  .price-card {
    padding-top: 40px !important;
  }
  .hero {
    background:
      radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--mg-theme-accent, #38bdf8) 28%, transparent 72%), transparent 34%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--mg-theme-dark, #0f172a) 92%, #020617 8%) 0%,
        color-mix(in srgb, var(--mg-theme-dark, #0f172a) 60%, var(--mg-theme-main, #1d4ed8) 40%) 48%,
        color-mix(in srgb, var(--mg-theme-main, #1d4ed8) 76%, var(--mg-theme-accent, #38bdf8) 24%) 78%,
        color-mix(in srgb, var(--mg-theme-main, #1d4ed8) 42%, var(--mg-theme-accent, #38bdf8) 58%) 100%) !important;
  }
}

@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  .global-nav.refined-nav,
  .global-nav.refined-nav .nav-inner {
    background: linear-gradient(180deg, var(--mg-theme-dark, #0f172a) 0%, #071a31 100%) !important;
  }
  .hero {
    background: linear-gradient(180deg, var(--mg-theme-dark, #0f172a) 0%, var(--mg-theme-main, #1d4ed8) 68%, var(--mg-theme-accent, #38bdf8) 100%) !important;
  }
  .quick-info,
  .worry-section {
    background: var(--mg-theme-soft, #dbeafe) !important;
  }
  .quick-grid div {
    background: #ffffff !important;
    border-color: var(--mg-theme-soft, #dbeafe) !important;
  }
}

/* ヘッダー右上：電話番号だけ赤アクセント */
.header-cta .header-tel {
  color: #e60012 !important;
  text-shadow: none !important;
}
.header-cta .header-tel:hover {
  color: #c40010 !important;
}