/* =========================================================
   sample-site6 Yellow Energetic Theme Override
   既存の style.css の一番下、または style.css の後に読み込んでください。
   目的：緑系を、士業向けに明るい黄色・クリーム・チャコールへ変更。
   ========================================================= */

:root {
  /* Main palette */
  --yellow-main: #f4c542;
  --yellow-main-dark: #d99a00;
  --yellow-main-deep: #9a6a00;
  --yellow-soft: #fff4cf;
  --yellow-pale: #fffaf0;

  --warm-cream: #fbf6ea;
  --warm-cream-2: #f4ead6;
  --warm-white: #fffdf8;

  --charcoal: #342f28;
  --charcoal-soft: #51493f;
  --text-main: #2f2a24;
  --text-sub: #6c6256;
  --border-warm: #eadcc4;

  /* Compatibility variables: existing green/primary names are remapped */
  --primary: var(--yellow-main-dark);
  --primary-dark: var(--yellow-main-deep);
  --primary-light: var(--yellow-soft);
  --accent: var(--yellow-main);
  --accent-dark: var(--yellow-main-dark);

  --green: var(--yellow-main-dark);
  --green-dark: var(--yellow-main-deep);
  --green-light: var(--yellow-soft);

  --main-color: var(--yellow-main-dark);
  --main-dark: var(--yellow-main-deep);
  --sub-color: var(--yellow-main);
  --bg-color: var(--warm-cream);
  --bg-soft: var(--yellow-pale);

  --color-primary: var(--yellow-main-dark);
  --color-primary-dark: var(--yellow-main-deep);
  --color-primary-light: var(--yellow-soft);
  --color-accent: var(--yellow-main);
  --color-bg: var(--warm-cream);
  --color-bg-soft: var(--yellow-pale);
  --color-text: var(--text-main);
  --color-muted: var(--text-sub);
  --color-border: var(--border-warm);

  --shadow-warm: 0 18px 45px rgba(154, 106, 0, 0.12);
}

/* Base */
body {
  color: var(--text-main);
  background: var(--warm-white);
}

/* Header */
.site-header,
.header,
.l-header {
  background: rgba(255, 253, 248, 0.94);
  border-bottom: 1px solid var(--border-warm);
}

.gnav a,
.nav a,
.header-nav a,
.site-header a {
  color: var(--charcoal-soft);
}

.gnav a:hover,
.nav a:hover,
.header-nav a:hover {
  color: var(--yellow-main-deep);
}

/* Hero */
.hero,
.fv,
.first-view,
.mv {
  background: linear-gradient(135deg, #fffaf0 0%, #f8edce 100%);
}

.hero-title,
.fv-title,
.mv-title,
.main-copy {
  color: var(--charcoal);
}

.hero-lead,
.fv-lead,
.mv-lead,
.hero-text,
.lead {
  color: var(--text-sub);
}

.hero-badge,
.badge,
.label,
.tag {
  background: var(--yellow-soft);
  color: var(--yellow-main-deep);
  border-color: #edd086;
}

/* Buttons */
.btn,
.button,
a[class*="btn"],
a[class*="button"],
.cta-button,
.header-cta {
  background: var(--yellow-main);
  color: var(--charcoal) !important;
  border-color: var(--yellow-main);
  box-shadow: 0 12px 26px rgba(217, 154, 0, 0.18);
}

.btn:hover,
.button:hover,
a[class*="btn"]:hover,
a[class*="button"]:hover,
.cta-button:hover,
.header-cta:hover {
  background: var(--yellow-main-dark);
  color: #fffdf8 !important;
  border-color: var(--yellow-main-dark);
}

.btn--outline,
.button--outline,
.outline-btn {
  background: #fffdf8;
  color: var(--yellow-main-deep) !important;
  border: 1px solid var(--yellow-main-dark);
}

/* Section backgrounds */
.section--green,
.section--primary,
.service-section,
.service,
.bg-green {
  background: var(--warm-cream) !important;
  color: var(--text-main);
}

.section--dark,
.cta-section,
.contact-section,
.footer-cta {
  background: linear-gradient(135deg, #d99a00 0%, #b77800 100%) !important;
  color: #fffdf8;
}

.section--dark h2,
.section--dark h3,
.cta-section h2,
.contact-section h2,
.footer-cta h2,
.section--dark p,
.cta-section p,
.contact-section p,
.footer-cta p {
  color: #fffdf8;
}

/* Cards */
.card,
.service-card,
.worry-card,
.feature-card,
.news-card,
.blog-card,
.flow-card,
.reason-card {
  background: #fffdf8;
  border-color: var(--border-warm);
  box-shadow: 0 14px 32px rgba(74, 61, 45, 0.07);
}

.card:hover,
.service-card:hover,
.worry-card:hover,
.feature-card:hover,
.blog-card:hover,
.flow-card:hover,
.reason-card:hover {
  box-shadow: var(--shadow-warm);
  transform: translateY(-3px);
}

/* Icons / numbers / small labels */
.icon,
.card-icon,
.service-icon,
.flow-num,
.step-num,
.number-badge {
  background: var(--yellow-soft) !important;
  color: var(--yellow-main-deep) !important;
  border-color: #edd086 !important;
}

.sec-label,
.section-label,
.en-title,
.kicker,
.news-cat,
.category,
.small-label {
  color: var(--yellow-main-deep) !important;
}

/* Headings */
h1, h2, h3,
.sec-title,
.section-title,
.card-title {
  color: var(--charcoal);
}

.sec-title::before,
.sec-title::after,
.section-title::before,
.section-title::after,
.title-decoration,
.line-accent {
  background: var(--yellow-main-dark) !important;
  border-color: var(--yellow-main-dark) !important;
}

/* Links */
a {
  text-decoration-color: rgba(217, 154, 0, 0.45);
}

.card a,
.service-card a,
.read-more,
.more-link {
  color: var(--yellow-main-deep);
}

/* Contact area */
.contact,
.cta,
.entry,
.footer-contact {
  background: linear-gradient(135deg, #d99a00 0%, #b77800 100%);
  color: #fffdf8;
}

.contact .btn,
.cta .btn,
.entry .btn,
.footer-contact .btn {
  background: #fffdf8;
  color: var(--yellow-main-deep) !important;
  border-color: #fffdf8;
}

.contact .btn:hover,
.cta .btn:hover,
.entry .btn:hover,
.footer-contact .btn:hover {
  background: var(--charcoal);
  color: #fffdf8 !important;
  border-color: var(--charcoal);
}

/* Footer */
.site-footer,
.footer,
.l-footer {
  background: #342f28 !important;
  color: rgba(255, 253, 248, 0.88);
}

.site-footer a,
.footer a,
.l-footer a {
  color: rgba(255, 253, 248, 0.82);
}

.site-footer a:hover,
.footer a:hover,
.l-footer a:hover {
  color: var(--yellow-main);
}

/* Important: do not use yellow for tiny text on white */
.news-date,
.card p,
.service-card p,
.flow-card p,
.blog-card p,
.small-text,
.caption {
  color: var(--text-sub);
}

/* Responsive readability */
@media (max-width: 768px) {
  .hero,
  .fv,
  .first-view,
  .mv {
    background: linear-gradient(180deg, #fffaf0 0%, #f7edcf 100%);
  }

  .section--dark,
  .cta-section,
  .contact-section,
  .footer-cta {
    background: linear-gradient(135deg, #c88900 0%, #9a6a00 100%) !important;
  }
}