/* =============================================
   mizuwari-theme.css
   水割りグラス特集 テーマカラー
   ─ pickup-base.css の後に読み込む
   ─ クリーン＆ナチュラル / 澄んだ水と自然光の世界観
   ============================================= */

:root {
  --dark: #2a2f35;
  --accent: #5a8a8a;
  --accent-dark: #3d6868;
  --accent-light: #e8f2f0;
  --hero-bg: #e8e4de;

  /* Hero ─ ライトベースで写真となじむ */
  --hero-gradient: linear-gradient(160deg, #eae6e0 0%, #e4e0d8 40%, #ddd8d0 100%);
  --hero-radial: radial-gradient(ellipse at 80% 50%, rgba(90, 138, 138, 0.04) 0%, transparent 70%);
  --hero-bottom-line: rgba(90, 138, 138, 0.20);
  --hero-deco-image: url('../img/mizuwari-hero.jpg');
  --hero-deco-width: 100%;

  /* PC: 左から右へ、背景色→透明への自然なフェード */
  --hero-deco-mask:
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.03) 8%,
      rgba(0, 0, 0, 0.20) 20%,
      rgba(0, 0, 0, 0.55) 35%,
      rgba(0, 0, 0, 0.85) 50%,
      rgba(0, 0, 0, 1) 65%);
  --hero-deco-overlay:
    linear-gradient(160deg,
      rgba(232, 228, 222, 0.35) 0%,
      rgba(228, 224, 216, 0.15) 30%,
      transparent 55%);
  --hero-text-color: rgba(42, 47, 53, 0.92);

  /* SP: 上から下へ写真がフェードアウト */
  --hero-deco-sp-mask:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.85) 20%,
      rgba(0, 0, 0, 0.40) 45%,
      rgba(0, 0, 0, 0.10) 60%,
      transparent 72%);
  --hero-deco-sp-opacity: 0.55;
  --hero-deco-sp-position: center 15%;
  --hero-deco-sp-overlay:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 35%,
      var(--hero-bg) 65%);

  /* Sections */
  --comparison-gradient: linear-gradient(160deg, #f2f6f5 0%, #e5efed 100%);
  --table-hover-bg: #f5f9f8;
  --nav-link-color: #2e4a48;
  --nav-span-color: #5a8a8a;

  /* Staff comment */
  --comment-bg: linear-gradient(135deg, #f5f9f8 0%, #eaf2f0 100%);
  --comment-border: #c8dcd8;

  /* Price */
  --price-color: #c0392b;

  /* Badges */
  --badge-scene-bg: #e0f0ed;
  --badge-scene-color: #2a5550;
  --badge-feature-bg: #e0ecf0;
  --badge-feature-color: #1a6080;
  --badge-industry-bg: #e6e5ee;
  --badge-industry-color: #3a2d6b;

  /* Guide cards */
  --gc1-border: #c0d8d4;
  --gc1-bg: linear-gradient(180deg, #f0f8f6 0%, var(--white) 100%);
  --gc1-icon-bg: #d0e8e4;
  --gc1-icon-color: #2a6a68;

  --gc2-border: #b8ccc8;
  --gc2-bg: linear-gradient(180deg, #f2f7f5 0%, var(--white) 100%);
  --gc2-icon-bg: #c8dcd8;
  --gc2-icon-color: #3a5a58;

  --gc3-border: #b8d0c2;
  --gc3-bg: linear-gradient(180deg, #f2faf5 0%, var(--white) 100%);
  --gc3-icon-bg: #cce8d5;
  --gc3-icon-color: #2a7a48;

  --gc4-border: #c0b8d0;
  --gc4-bg: linear-gradient(180deg, #f6f4fb 0%, var(--white) 100%);
  --gc4-icon-bg: #d8d0ea;
  --gc4-icon-color: #503a80;

  /* Buttons */
  --btn-shadow-rgb: 90, 138, 138;
  --btn-hover-bg: #6a9a9a;
  --pick-shadow-rgb: 90, 138, 138;
}

/* ── Light hero: テキストはダーク系 ── */
.feature-hero h1 {
  color: #2a2f35;
}

.feature-hero h1 em {
  color: #3a8888;
}

.feature-hero p {
  color: rgba(42, 47, 53);
}

.feature-hero-label {
  background: rgba(90, 138, 138, 0.90);
  backdrop-filter: blur(4px);
}

/* ── Page nav: ライトモードに合う落ち着いたトーン ── */
.page-nav {
  /* background: #3a4a48; */
}

/* ── Section heading icon ── */
.section-heading .material-icons-outlined {
  color: var(--accent);
}

/* ── lot card total: red ── */
.lot-card-total {
  color: #c0392b;
}

/* ── btn-main hover ── */
.btn-main:hover {
  background: var(--btn-hover-bg);
}