/* ============================================================
   あおぞら訪問マッサージ院 — デザインシステム
   Home-visit Massage Demo LP — Colors & Typography
   落ち着き・信頼・あたたかさ / 高齢のご家族も読みやすく
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Primary — メインカラー */
  --color-primary-50:  #F2FAED;
  --color-primary-100: #E4F4D6;
  --color-primary-200: #CDEDAF;
  --color-primary-300: #B4E27E;
  --color-primary-400: #89C542;
  --color-primary-500: #89C542;   /* brand primary */
  --color-primary-600: #06AE95;
  --color-primary-700: #078D79;
  --color-primary-800: #086D5E;
  --color-primary-900: #075247;

  /* Secondary — サブカラー */
  --color-secondary-50:  #F4FAF1;
  --color-secondary-100: #E9F5E2;
  --color-secondary-200: #D6EDCA;
  --color-secondary-300: #BCE2AB;
  --color-secondary-400: #A3D78C;
  --color-secondary-500: #A3D78C;   /* brand secondary */
  --color-secondary-600: #84BE6A;
  --color-secondary-700: #679D4E;

  /* Accent — サブカラーに統一 */
  --color-accent-50:  #F4FAF1;
  --color-accent-100: #E9F5E2;
  --color-accent-200: #D6EDCA;
  --color-accent-300: #BCE2AB;
  --color-accent-400: #A3D78C;
  --color-accent-500: #A3D78C;
  --color-accent-600: #06AE95;

  /* Neutral — あたたかみのあるグレージュ */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FBFAF7;
  --color-neutral-100: #F3F1EB;
  --color-neutral-200: #E4E0D6;
  --color-neutral-300: #C9C3B4;
  --color-neutral-400: #A49C88;
  --color-neutral-500: #7C745F;
  --color-neutral-600: #5A5343;
  --color-neutral-700: #403C31;
  --color-neutral-800: #2C2921;
  --color-neutral-900: #1D1B16;

  /* Text */
  --color-text-heading:    var(--color-neutral-900);
  --color-text-body:       var(--color-neutral-700);
  --color-text-secondary:  var(--color-neutral-500);
  --color-text-inverse:    var(--color-neutral-0);
  --color-text-link:       var(--color-primary-600);

  /* Backgrounds */
  --color-bg-page:         var(--color-neutral-0);
  --color-bg-surface:      var(--color-neutral-0);
  --color-bg-subtle:       #F1F4E0;
  --color-bg-primary-soft: var(--color-primary-50);
  --color-bg-accent-soft:  var(--color-accent-50);
  --color-bg-secondary-soft: var(--color-secondary-50);

  /* Borders */
  --color-border-default:  var(--color-neutral-200);
  --color-border-strong:   var(--color-neutral-300);

  /* Brand shortcuts */
  --brand-primary:   var(--color-primary-500);
  --brand-primary-gradient: linear-gradient(135deg, #89C542 0%, #06AE95 100%);
  --brand-family-gradient: linear-gradient(135deg, #F5A623 0%, #E85D1F 100%);
  --brand-secondary: var(--color-secondary-500);
  --brand-accent:    var(--color-accent-500);

  /* Typography */
  --font-serif: 'Noto Serif JP', serif;
  --font-sans:  'Noto Sans JP', sans-serif;
  --font-en:    'DM Sans', sans-serif;

  /* Radius & shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-soft: 0 6px 24px rgba(45, 60, 45, 0.08);
  --shadow-card: 0 10px 34px rgba(45, 60, 45, 0.10);

  /* Layout */
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  /* 高齢のご家族も読むため、本文はやや大きめ */
  font-size: 17px;
  line-height: 1.9;
  color: var(--color-text-body);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-text-heading);
  line-height: 1.45;
  margin: 0;
  font-weight: 600;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 92px 0;
}

.eyebrow {
  font-family: var(--font-en);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-primary);
}

.section-title {
  font-size: clamp(26px, 4vw, 36px);
  margin: 10px 0 0;
}

.section-lead {
  margin-top: 16px;
  color: var(--color-text-secondary);
  font-size: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--brand-primary-gradient);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: linear-gradient(135deg, #78B735 0%, #049E86 100%); }

.btn-secondary {
  background: var(--brand-secondary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-soft);
}
.btn-secondary:hover { background: var(--color-secondary-600); }

.btn-family {
  border: 0;
  background: var(--brand-family-gradient);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-soft);
}
.btn-family:hover { filter: brightness(.94); }

.btn-pro {
  border: 0;
  background: var(--brand-primary-gradient);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-soft);
}
.btn-pro:hover { filter: brightness(.94); }

.btn-ghost {
  background: var(--color-neutral-0);
  color: var(--color-text-heading);
  border-color: var(--color-border-strong);
}

.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* デモである旨のバナー（実院と誤認させないため） */
.demo-ribbon {
  background: var(--color-neutral-800);
  color: var(--color-neutral-50);
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 8px 16px;
}
.demo-ribbon strong { color: #fff; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
}