/* 会員サイト共通のヘッダー・フッター・状態表示 */

body {
  background-color: #faf8f3 !important;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(238, 242, 248, 0.72) 0, rgba(238, 242, 248, 0.72) 110px, transparent 111px),
    radial-gradient(circle at 94% 62%, rgba(240, 232, 216, 0.58) 0, rgba(240, 232, 216, 0.58) 140px, transparent 141px),
    radial-gradient(circle at 52% 96%, rgba(238, 241, 234, 0.52) 0, rgba(238, 241, 234, 0.52) 120px, transparent 121px) !important;
  color: #0f172a !important;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
  font-size: 12px !important;
}

.header {
  height: 58px !important;
  padding: 0 32px !important;
  background: #faf8f3 !important;
  border-bottom: 1px solid #f0e8d8 !important;
  box-shadow: none !important;
}

.header::after {
  display: none !important;
}

header.header > a.header-brand,
header.header > div.header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
  color: inherit !important;
  text-decoration: none !important;
}

header.header > .header-brand .header-logo {
  height: 32px !important;
  width: 32px !important;
  object-fit: contain !important;
  flex: 0 0 32px !important;
}

header.header > .header-brand .header-brand-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

header.header > .header-brand .header-brand-name {
  color: #1E3A5F !important;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', Georgia, serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

header.header > .header-brand .header-brand-sub {
  color: #64748b !important;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

.header-back,
.header-logout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  background: transparent !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  color: #334155 !important;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

.header-back:hover,
.header-logout:hover {
  background: transparent !important;
  border-color: #1E3A5F !important;
  color: #1E3A5F !important;
}

.page-footer {
  position: relative !important;
  inset: auto !important;
  min-height: 92px !important;
  overflow: hidden !important;
  background: #1E3A5F !important;
  border: 0 !important;
  padding: 24px 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  z-index: 1 !important;
}

/* 会員トップは認証完了前にフッターだけ先に描画しない */
body.member-home:not(.member-ready) .page-footer {
  display: none !important;
}

body.member-home.member-ready .page-footer {
  display: flex !important;
}

.page-footer::before {
  content: '';
  position: absolute;
  left: -20px;
  bottom: -30px;
  width: 240px;
  height: 240px;
  background: url('/assets/botanical_leaf_icon.svg') center / contain no-repeat;
  opacity: 0.28;
  pointer-events: none;
}

.page-footer > * {
  position: relative;
  z-index: 1;
}

.page-footer-brand {
  color: #ffffff !important;
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', Georgia, serif !important;
  font-size: 16px !important;
  letter-spacing: 0.08em !important;
}

.page-footer-sub {
  display: none !important;
  color: #ffffff !important;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  opacity: 0.75 !important;
}

.status-active,
.status-subscription,
.status-student,
.section-num,
.step-circle.active,
.type-badge,
.type-tsukutsuku,
.mt-theme-pill,
.mc-badge-open {
  background: #C08010 !important;
  border-color: #C08010 !important;
  color: #ffffff !important;
}

.money-setup-btn,
.mc-btn-primary,
.mc-toggle-btn,
.mc-resolve-submit,
.review-btn:not(.disabled),
.booking-action-btn:not(.booking-action-btn--change),
.bk-submit-btn,
.trial-cta-link,
.trial-concern-submit,
.mc-filter-tab.active,
.freee-connect-btn,
.freee-refresh-btn,
.compass-setup-btn,
.amt-btn,
.btn-primary,
.biz-btn.active,
.tab-btn.active,
.btn-save,
.btn-save-sm,
.btn-save-sticky,
.pin-tag.active,
.cta-btn,
.btn-next,
.link-btn-primary,
.btn-setup {
  background: #C08010 !important;
  border-color: #C08010 !important;
  color: #ffffff !important;
}

.money-setup-btn:hover,
.mc-btn-primary:hover,
.mc-toggle-btn:hover,
.mc-resolve-submit:hover,
.review-btn:not(.disabled):hover,
.booking-action-btn:not(.booking-action-btn--change):hover,
.bk-submit-btn:hover,
.trial-cta-link:hover,
.trial-concern-submit:hover,
.mc-filter-tab.active:hover,
.freee-connect-btn:hover,
.freee-refresh-btn:hover,
.compass-setup-btn:hover:not(:disabled),
.amt-btn:hover,
.btn-primary:hover,
.biz-btn.active:hover,
.tab-btn.active:hover,
.btn-save:hover,
.btn-save-sm:hover,
.btn-save-sticky:hover,
.pin-tag.active:hover,
.cta-btn:hover,
.btn-next:hover:not(:disabled),
.link-btn-primary:hover,
.btn-setup:hover {
  background: #8B5E00 !important;
  border-color: #8B5E00 !important;
  color: #ffffff !important;
}

.money-diag-btn {
  border-color: #C08010 !important;
  color: #C08010 !important;
}

.money-diag-btn:hover {
  background: #C08010 !important;
  border-color: #C08010 !important;
  color: #ffffff !important;
}

#trialCalCta a[href="/member-advisor-intro.html"] {
  background: #C08010 !important;
  color: #ffffff !important;
}

#trialCalCta a[href="/member-advisor-intro.html"]:hover {
  background: #8B5E00 !important;
  color: #ffffff !important;
}

@media (max-width: 600px) {
  body {
    background-image: none !important;
  }

  .header {
    height: 56px !important;
    padding: 0 16px !important;
  }

  header.header > .header-brand .header-logo {
    height: 30px !important;
    width: 30px !important;
    flex-basis: 30px !important;
  }

  .page-footer {
    min-height: 80px !important;
    padding: 20px 16px !important;
  }

  .page-footer::before {
    width: 150px;
    height: 150px;
    left: -18px;
    bottom: -42px;
  }
}