/* ===================== BUTTONS ===================== */
.btn {
  border        : 1px solid transparent;
  border-radius : 999px;
  display       : inline-block;
  font-weight   : 700;
  padding       : 10px 22px;
  transition    : background .3s, transform .2s, box-shadow .2s;
}

.btn.primary {
  background : var(--color-accent);
  box-shadow : 0 6px 16px rgba(140, 108, 74, .25);
  color      : #FFFFFF;
}

.btn.primary:hover {
  background : var(--color-accent-dark);
  transform  : translateY(-2px);
}

.btn.contrast {
  background : #111111;
  color      : #FFFFFF;
}

.btn.light {
  background   : #FFFFFF;
  border-color : #E6E1DB;
  color        : var(--color-text);
}

.btn.lg {
  padding : 14px 30px;
}

.link {
  color       : var(--info);
  font-weight : 600;
}

/* ===================== HERO ===================== */
.hero {
  align-items      : center;
  background       : var(--hero-img) no-repeat right top;
  background-color : #FFFFFF;
  background-size  : contain; /* cover → contain */
  color            : #FFFFFF;
  display          : flex;
  filter           : brightness(1.05) contrast(1.05);
  flex-direction   : column;
  isolation        : isolate; /* 各レイヤー独立ブレンド */
  justify-content  : center;

  /* 背景画像設定 */
  min-height       : 80vh;
  overflow         : hidden;
  padding-bottom   : 100px;

  padding-top      : 140px;
  position         : relative;
}

/* --- ヒーローエリア下端を白へフェード --- */
.hero::after {
  background     : linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 48%
  );
  bottom         : 0;
  content        : "";
  height         : 160px; /* フェード範囲：長めにして自然に */
  left           : 0;
  pointer-events : none;
  position       : absolute;
  right          : 0;
  z-index        : 3; /* テキストより下、白帯より上 */
}

/* --- 原価計算ツールセクションをヒーローに軽く重ねて馴染ませる --- */
.section.value-section {
  background : linear-gradient(
    to bottom,
    #FFFFFF 0%,
    #FAFAFA 20%,
    #FFFFFF 100%
  );
  margin-top : -80px; /* ヒーローに少し重ねる（フェードと融合） */
  position   : relative;
  z-index    : 2;
}

/* === 白帯：中央が白く上下に灰色フェード === */
.hero::before {
  background     : linear-gradient(
    to bottom,
    rgba(150, 150, 150, .10) 0%,
    rgba(150, 150, 150, .10) 46%,
    rgba(255, 255, 255, 1) 49%,
    rgba(255, 255, 255, 1) 51%,
    rgba(150, 150, 150, .10) 54%,
    rgba(150, 150, 150, .12) 100%
  );
  content        : "";
  filter         : blur(12px); /* ぼかしで自然に */
  /* グレー→白→グレーで白背景でも帯が浮く。ブレンドは使わない */
  inset          : 0;
  opacity        : 1; /* 白背景でもはっきり */
  pointer-events : none;
  position       : absolute;
  z-index        : 1;
}

/* === 黒オーバーレイ（自然なトーン統一） === */
.hero-overlay {
  background     : radial-gradient(circle at 65% 40%,
  rgba(0, 0, 0, .00) 0%,
  rgba(0, 0, 0, .06) 55%,
  rgba(0, 0, 0, .10) 100%);
  filter         : blur(1.5px);
  inset          : 0;
  opacity        : .75;
  pointer-events : none;
  position       : absolute;
  z-index        : 2;
  /* mix-blend-mode は使わない：白背景での破綻防止 */
}

/* テキスト */
.hero-inner {
  margin     : 0 auto;
  max-width  : 900px;
  padding    : 0 20px;
  position   : relative;
  text-align : center;
  z-index    : 3;
}

.hero-title {
  font-family   : "Playfair Display", serif;
  font-size     : clamp(2.5rem, 4vw, 4rem);
  line-height   : 1.1;
  margin-bottom : 20px;
  text-shadow   : 0 0 12px rgba(0, 0, 0, 0.7), 0 2px 3px rgba(0, 0, 0, 0.5);
}

.hero-lead {
  font-size     : clamp(1rem, 1.6vw, 1.25rem);
  margin-bottom : 30px;
  opacity       : .95;
  text-shadow   : 0 0 10px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.5);
}

/* ===================== SECTIONS ===================== */
.section {
  padding : 80px 0;
}

.section-title {
  color          : var(--color-accent-dark);
  font-family    : "Playfair Display", serif;
  font-size      : clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing : .01em;
  margin-bottom  : 10px;
}

.section-title.center {
  text-align : center;
}

.muted {
  color : var(--color-muted);
}

.small {
  font-size : .875rem;
}

/* ===================== VALUE GRID ===================== */
.value-grid {
  display               : grid;
  gap                   : 32px;
  grid-template-columns : repeat(auto-fit, minmax(280px, 1fr));
  margin-top            : 32px;
}

.value-card {
  background    : var(--surface-2);
  border        : 1px solid #EBE5DD;
  border-radius : 14px;
  box-shadow    : var(--shadow);
  padding       : 24px;
  transition    : transform .2s, box-shadow .2s;
}

.value-card:hover {
  box-shadow : 0 12px 28px rgba(17, 19, 21, .1);
  transform  : translateY(-4px);
}

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

/* ===================== FEATURE GRID ===================== */
.feature-grid {
  display               : grid;
  gap                   : 24px;
  grid-template-columns : repeat(auto-fit, minmax(250px, 1fr));
  margin-top            : 28px;
}

.feature {
  background    : #FFFFFF;
  border        : 1px solid #ECE8E2;
  border-radius : 12px;
  box-shadow    : var(--shadow);
  padding       : 22px;
  transition    : box-shadow .2s, transform .2s;
}

.feature:hover {
  box-shadow : 0 12px 28px rgba(17, 19, 21, .1);
  transform  : translateY(-4px);
}

.feature h3 {
  color         : var(--color-accent-dark);
  margin-bottom : 8px;
}

/* ===================== CTA ===================== */
.cta-section {
  background    : #F6F4F1;
  border-bottom : 1px solid #ECE8E2;
  border-top    : 1px solid #ECE8E2;
  padding       : 100px 0;
  text-align    : center;
}

.cta-section p {
  color  : var(--color-muted);
  margin : 12px 0 30px;
}


/* ===================== 予約システム ===================== */
.reserve {
  background    : linear-gradient(180deg, #FFFFFF, #FBF9F6);
  border-bottom : 1px solid #ECE8E2;
  border-top    : 1px solid #ECE8E2;
}

.reserve .lead {
  margin-top : 6px;
  max-width  : 760px;
}

.reserve-grid {
  display               : grid;
  gap                   : 36px;
  grid-template-columns : 1.15fr .85fr;
  margin-top            : 28px;
}

.panel {
  background    : #FFFFFF;
  border        : 1px solid #ECE8E2;
  border-radius : 16px;
  box-shadow    : var(--shadow);
  padding       : 22px;
}

.panel + .panel {
  margin-top : 16px;
}

.method-switch {
  background    : var(--surface-2);
  border        : 1px solid #E8E2DA;
  border-radius : 999px;
  display       : flex;
  gap           : 10px;
  padding       : 6px;
  width         : fit-content;
}

.method-switch button {
  background    : transparent;
  border        : 0;
  border-radius : 999px;
  color         : #6B5A46;
  cursor        : pointer;
  font-weight   : 700;
  padding       : 10px 16px;
}

.method-switch button[aria-pressed="true"] {
  background : #FFFFFF;
  border     : 1px solid #E8E2DA;
  box-shadow : 0 6px 16px rgba(17, 19, 21, .08);
  color      : var(--color-accent-dark);
}

.method-desc {
  color      : var(--color-muted);
  margin-top : 14px;
}

.method-desc strong {
  color : var(--color-accent-dark);
}

.viz {
  margin-top : 16px;
}

.viz-legend {
  align-items   : center;
  color         : var(--color-muted);
  display       : flex;
  font-size     : .92rem;
  gap           : 18px;
  margin-bottom : 8px;
}

.chip {
  align-items : center;
  display     : inline-flex;
  gap         : 8px;
}

.dot {
  background    : #C8B199;
  border-radius : 50%;
  display       : inline-block;
  height        : 10px;
  width         : 10px;
}

.dot.peak {
  background : #8C6C4A;
}

.bars {
  align-items           : end;
  display               : grid;
  gap                   : 8px;
  grid-template-columns : repeat(12, 1fr);
  height                : 120px;
}

.bar {
  background    : linear-gradient(180deg, #E9DFD4, #D6C6B5);
  border        : 1px solid #CDBAA6;
  border-radius : 6px 6px 0 0;
  position      : relative;
}

.bar::after {
  color     : #8C6C4A;
  content   : attr(data-h);
  font-size : .75rem;
  left      : 50%;
  position  : absolute;
  top       : -22px;
  transform : translateX(-50%);
}

.bar.peak {
  background   : linear-gradient(180deg, #CFB79D, #B0906B);
  border-color : #A07C56;
}

.bar.highlight {
  outline        : 2px solid var(--ring);
  outline-offset : 2px;
}

.slider-row {
  align-items : center;
  color       : var(--color-muted);
  display     : flex;
  gap         : 12px;
  margin-top  : 18px;
}

.slider-row input[type="range"] {
  accent-color : var(--color-accent-dark);
  width        : 220px;
}

.bullet {
  color                 : var(--color-muted);
  display               : grid;
  gap                   : 10px;
  grid-template-columns : 24px 1fr;
  margin-top            : 14px;
}

.bullet strong {
  color : var(--color-accent-dark);
}

.caps {
  background    : #FFFFFF;
  border        : 1px solid #E8E2DA;
  border-radius : 6px;
  color         : #6B5A46;
  display       : inline-block;
  font-size     : .8rem;
  padding       : .2em .55em;
}

.specs {
  display               : grid;
  gap                   : 16px;
  grid-template-columns : 1fr 1fr;
  margin-top            : 18px;
}

.spec {
  background    : #FFFFFF;
  border        : 1px solid #ECE8E2;
  border-radius : 12px;
  padding       : 14px 16px;
}

.spec h4 {
  color         : var(--color-accent-dark);
  font-size     : 1rem;
  margin-bottom : 8px;
}

.spec p {
  color : var(--color-muted);
}

.mt-8 {
  margin-top : 8px;
}

.mt-16 {
  margin-top : 16px;
}

.mt-20 {
  margin-top : 20px;
}

.mt-28 {
  margin-top : 28px;
}

.mt-32 {
  margin-top : 32px;
}

/* =========================================================
   📱 スマホ最適化CSS（menu-toggleを.nav内に残す構成）
   PC版への影響なし
   対応幅：～480px（例：iPhone SE〜13 mini）
========================================================= */

/* --- 共通調整 --- */
@media (max-width : 480px) {
  body {
    font-size   : 15px;
    line-height : 1.6;
    overflow-x  : hidden;
  }

  .container {
    padding : 0 16px;
  }

  /* ===================== HERO ===================== */
  .hero {
    background-position : center;
    background-size     : cover;
    min-height          : auto;
    padding-bottom      : 60px;
    padding-top         : 80px;
  }

  .hero-inner {
    padding : 0 14px;
  }

  .hero-title {
    font-size   : 1.8rem;
    line-height : 1.25;
    text-shadow : 0 2px 4px rgba(0, 0, 0, 0.4);
  }

  .hero-lead {
    font-size     : 0.95rem;
    margin-bottom : 20px;
  }

  .btn.lg {
    font-size : 1rem;
    width     : 100%;
  }

  /* ===================== SECTION ===================== */
  .section {
    padding : 50px 0;
  }

  .section-title {
    font-size  : 1.4rem;
    text-align : center;
  }

  .value-grid,
  .feature-grid,
  .reserve-grid {
    gap                   : 20px;
    grid-template-columns : 1fr;
  }

  .value-card,
  .feature,
  .panel {
    padding : 16px;
  }

  /* ===================== CTA ===================== */
  .cta-section {
    padding : 60px 20px;
  }

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

  .cta-section p {
    font-size : 0.9rem;
  }
}