/* ===================== 基本設定 ===================== */
:root {
  --color-accent      : #B0906B;
  --color-accent-dark : #5A4631;
  --color-bg          : #FAF9F6;
  --color-muted       : #6B5A46;
  --color-text        : #3B2E1F;
}

/* ===================== HERO ===================== */
.hero.reserve-hero {
  background : linear-gradient(180deg, #FFFDFB 0%, var(--color-bg) 100%);
  padding    : 100px 20px;
  text-align : center;
}

.hero.reserve-hero h1 {
  color         : var(--color-text);
  font-family   : "Playfair Display", serif;
  font-size     : 2rem;
  margin-bottom : 16px;
}

.hero.reserve-hero p {
  color         : var(--color-muted);
  font-size     : 1.1rem;
  line-height   : 1.7;
  margin-bottom : 24px;
}

/* ===================== BUTTON ===================== */
.btn {
  border-radius   : 999px;
  display         : inline-block;
  font-weight     : 700;
  padding         : 12px 28px;
  text-decoration : none;
  transition      : all 0.3s ease;
}

.btn.primary {
  background : var(--color-accent-dark);
  color      : #FFFFFF;
}

.btn.primary:hover {
  background : var(--color-accent);
}

.btn.large {
  font-size : 1.1rem;
  padding   : 16px 48px;
}

/* ===================== FEATURES ===================== */
.section {
  margin    : 80px auto;
  max-width : 980px;
  padding   : 0 20px;
}

.section h2 {
  color         : var(--color-accent-dark);
  font-family   : "Playfair Display", serif;
  font-size     : 1.8rem;
  margin-bottom : 32px;
  text-align    : center;
}

.feature-grid {
  display               : grid;
  gap                   : 28px;
  grid-template-columns : repeat(auto-fit, minmax(280px, 1fr));
}

.feature-card {
  background    : #FFFFFF;
  border        : 1px solid #E8E2DA;
  border-radius : 14px;
  box-shadow    : 0 3px 10px rgba(0, 0, 0, 0.05);
  padding       : 24px;
  transition    : transform .2s, box-shadow .2s;
}

.feature-card:hover {
  box-shadow : 0 10px 20px rgba(0, 0, 0, 0.08);
  transform  : translateY(-4px);
}

.feature-card h3 {
  color         : var(--color-text);
  font-size     : 1.25rem;
  margin-bottom : 10px;
}

.feature-card p {
  color       : var(--color-muted);
  font-size   : .95rem;
  line-height : 1.7;
}

/* ===================== VISUALIZATION ===================== */
.panel {
  background    : #FFFFFF;
  border        : 1px solid #ECE8E2;
  border-radius : 12px;
  box-shadow    : 0 4px 8px rgba(0, 0, 0, 0.04);
  padding       : 20px;
  text-align    : center;
}

/* ===================== PRICE ===================== */
.price-section {
  background : var(--color-bg);
  padding    : 80px 20px;
  text-align : center;
}

.price-section h2 {
  color         : var(--color-accent-dark);
  font-family   : "Playfair Display", serif;
  font-size     : 2rem;
  margin-bottom : 16px;
}

.price-grid {
  display               : grid;
  gap                   : 30px;
  grid-template-columns : repeat(auto-fit, minmax(280px, 1fr));
  justify-content       : center;
  margin                : 0 auto;
  max-width             : 900px;
}

@media (min-width : 768px) {
  .price-grid {
    grid-template-columns : repeat(2, 1fr);
  }
}

.price-card {
  background    : #FFFFFF;
  border        : 1px solid #E6E1DB;
  border-radius : 14px;
  box-shadow    : 0 4px 10px rgba(0, 0, 0, 0.04);
  padding       : 32px 24px;
  transition    : transform .2s, box-shadow .2s;
}

.price-card:hover {
  box-shadow : 0 10px 24px rgba(0, 0, 0, 0.08);
  transform  : translateY(-4px);
}

.price-card h3 {
  color         : var(--color-text);
  font-size     : 1.25rem;
  margin-bottom : 8px;
}

.price {
  color         : var(--color-accent-dark);
  font-size     : 1.6rem;
  font-weight   : 700;
  margin-bottom : 12px;
}

.price span {
  color      : #7A6C5D;
  display    : block;
  font-size  : 0.9rem;
  margin-top : 4px;
}

.price-card ul {
  color       : var(--color-muted);
  line-height : 1.8;
  list-style  : none;
  margin      : 20px 0 0;
  padding     : 0;
}

.price-card.highlight {
  background : #FFF9F2;
  border     : 2px solid var(--color-accent);
  box-shadow : 0 8px 24px rgba(176, 144, 107, 0.1);
}

.price-card.highlight h3 {
  color : var(--color-accent);
}

.price-card.highlight .price {
  color : #A07C56;
}

/* ===================== CTA ===================== */
.cta-area {
  background : linear-gradient(135deg, var(--color-accent-dark), var(--color-text));
  color      : #FFFFFF;
  padding    : 80px 20px;
  text-align : center;
}

.cta-area h2 {
  font-size     : 1.6rem;
  margin-bottom : 12px;
}

.cta-area p {
  font-size     : 1.1rem;
  margin-bottom : 32px;
}

.cta-area .btn.primary {
  background : #FFFFFF;
  color      : var(--color-text);
}

.cta-area .btn.primary:hover {
  background : #E6E1DB;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width : 480px) {
  .hero.reserve-hero {
    padding : 80px 16px;
  }

  .hero.reserve-hero h1 {
    font-size : 1.6rem;
  }

  .feature-grid {
    grid-template-columns : 1fr;
  }

  .price-grid {
    grid-template-columns : 1fr;
  }

  .cta-area h2 {
    font-size : 1.4rem;
  }
}