/* =========================================
   environ.html 専用差分
   前提：esthetic_style.css を読み込んだ上で追加
   目的：
   - 総合ページとの統一感は維持
   - エンビロンページは、より高級感・滞在性・納得感を強める
   - 情報整理より「上質な継続ケア」の空気を前に出す
   ========================================= */

/* -------------------------
   hero
   イオン導入総合よりも少しラグジュアリー寄り
   ------------------------- */
.environ-page .esthetic-hero {
  background:
    linear-gradient(180deg, rgba(245, 237, 228, 0.82) 0%, rgba(239, 229, 217, 0.9) 42%, #f7f1ea 100%);
}

.environ-page .esthetic-hero::before {
  background:
    radial-gradient(circle at top right, rgba(196, 164, 126, 0.18), transparent 34%),
    radial-gradient(circle at left 18% bottom 12%, rgba(255, 255, 255, 0.62), transparent 30%);
}

.environ-page .esthetic-hero .hero-lead {
  max-width: 780px;
}

.environ-page .esthetic-hero .hero-points {
  max-width: 740px;
}

/* -------------------------
   concept
   少し余白を取り、読み物感を出す
   ------------------------- */
.environ-page .concept-block .page-width,
.environ-page .related-block .page-width {
  max-width: 980px;
}

.environ-page .concept-block p,
.environ-page .related-block p {
  line-height: 2;
}

/* point-boxをやや格上げ */
.environ-page .point-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(250,244,237,0.96) 100%);
  border: 1px solid rgba(221, 201, 180, 0.95);
  box-shadow: 0 18px 36px rgba(85, 59, 37, 0.08);
}

/* -------------------------
   feature cards
   特徴ブロックは上質感を少し強める
   ------------------------- */
.environ-page .merit-item {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(249,243,236,0.96) 100%);
  box-shadow: 0 16px 34px rgba(82, 57, 38, 0.08);
}

.environ-page .merit-item h3 {
  line-height: 1.65;
}

/* doctor commentも少し特別感 */
.environ-page .doctor-comment {
  background:
    linear-gradient(180deg, rgba(244,236,227,0.96) 0%, rgba(239,230,219,0.96) 100%);
  border: 1px solid rgba(221, 201, 180, 0.95);
}

/* -------------------------
   course cards
   このページの核なので視覚的に少し強める
   ------------------------- */
.environ-page .menu-card {
  padding-top: 32px;
  padding-bottom: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(249,243,236,0.97) 100%);
  box-shadow: 0 18px 36px rgba(82, 57, 38, 0.09);
}

.environ-page .menu-card::before {
  height: 5px;
  background: linear-gradient(90deg, #dcc5a7 0%, #ba946d 46%, #eadbca 100%);
}

.environ-page .menu-card h3 {
  line-height: 1.6;
}

.environ-page .menu-card-subtitle {
  margin-bottom: 16px;
}

.environ-page .menu-note {
  margin: 18px 0 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: #7a6a5c;
  padding-top: 14px;
  border-top: 1px solid rgba(208, 189, 170, 0.65);
}

/* -------------------------
   compare table
   上質感を残しつつ、比較しやすさは担保
   ------------------------- */
.environ-page .compare-table th,
.environ-page .compare-table td {
  font-size: 0.95rem;
  line-height: 1.8;
}

.environ-page .compare-table thead th {
  white-space: nowrap;
}

.environ-page .compare-table tbody th {
  min-width: 160px;
}

/* -------------------------
   flow
   施術の流れは少し穏やかで上品に
   ------------------------- */
.environ-page .flow-list li {
  background: rgba(255,255,255,0.94);
}

.environ-page .flow-step {
  background: linear-gradient(135deg, #c29e79 0%, #af8863 100%);
}

/* -------------------------
   「継続が大切」ブロック
   読み物として少し落ち着かせる
   ------------------------- */
.environ-page .related-block {
  background: #f8f2eb;
}

.environ-page .related-block h2 {
  margin-bottom: 24px;
}

/* -------------------------
   brand story
   概念説明と混ざらないよう、後半conceptを少し静かに
   ------------------------- */
.environ-page .concept-block:last-of-type {
  background: #fbf7f3;
}

.environ-page .concept-block:last-of-type .page-width {
  max-width: 940px;
}

/* -------------------------
   price
   単価高めでも威圧感が出ないように
   ------------------------- */
.environ-page .price-table td {
  font-weight: 600;
  color: #5d4a3d;
}

.environ-page .price-block .note {
  margin-top: 18px;
}

/* -------------------------
   faq
   読みやすさを優先
   ------------------------- */
.environ-page .faq-item h3 {
  line-height: 1.65;
}

/* -------------------------
   final CTA
   少し華やかに
   ------------------------- */
.environ-page .esthetic-cta {
  background:
    linear-gradient(180deg, #eddcc8 0%, #e6d2bc 48%, #dfc9b1 100%);
}

.environ-page .esthetic-cta::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.32), transparent 22%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.18), transparent 20%);
}

.environ-page .esthetic-cta h2 {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------
   smartphone
   ------------------------- */
@media (max-width: 640px) {
  .environ-page .esthetic-hero .hero-lead br {
    display: none;
  }

  .environ-page .menu-note {
    font-size: 0.9rem;
  }

  .environ-page .compare-table th,
  .environ-page .compare-table td {
    font-size: 0.92rem;
  }

  .environ-page .compare-table tbody th {
    min-width: 0;
  }
}