/* =========================================================
   theme-luxury.css
   機能目的：高級感テーマを黒×ゴールドの重厚なレイアウトにする
   ========================================================= */

/* 機能目的：高級感テーマの基本配色を定義する */
body.tplp-theme-luxury,
body.theme-luxury,
body[data-theme="luxury"] {
  --tplp-luxury-bg: #070707;
  --tplp-luxury-panel: #12100d;
  --tplp-luxury-panel-2: #1b1711;
  --tplp-luxury-gold: #d6b15c;
  --tplp-luxury-gold-2: #9f742e;
  --tplp-luxury-text: #fff7e6;
  --tplp-luxury-muted: rgba(255, 247, 230, 0.72);
  color: var(--tplp-luxury-text);
  background:
    radial-gradient(circle at 12% 10%, rgba(214, 177, 92, 0.16), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(159, 116, 46, 0.12), transparent 28%),
    linear-gradient(135deg, #050505 0%, #12100d 58%, #050505 100%);
}

/* 機能目的：高級感テーマの背景に控えめな黒金グラデーションを重ねる */
body.tplp-theme-luxury::before,
body.theme-luxury::before,
body[data-theme="luxury"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: 0.45;
  background:
    linear-gradient(115deg, transparent 0%, rgba(214, 177, 92, 0.08) 42%, transparent 70%),
    repeating-linear-gradient(
      90deg,
      transparent 0 80px,
      rgba(255, 255, 255, 0.025) 80px 81px
    );
}

/* 機能目的：高級感用TOP背景画像を右側に全体表示し、暗く潰れないよう明度と金色を補正する */
body.tplp-theme-luxury .tplp-hero-background,
body.theme-luxury .tplp-hero-background,
body[data-theme="luxury"] .tplp-hero-background {
  --tplp-hero-bg-opacity: 0.58;
  --tplp-hero-bg-mobile-opacity: 0.28;
  --tplp-hero-bg-filter: saturate(1.16) contrast(1.1) brightness(1.12);
  --tplp-hero-bg-overlay: linear-gradient(
    90deg,
    rgba(7, 7, 7, 0.95) 0%,
    rgba(7, 7, 7, 0.66) 42%,
    rgba(7, 7, 7, 0.06) 100%
  );
  background-image: url("../images/top-bg-luxury.png");
  background-position: right center;
  background-size: contain;
}

/* 機能目的：高級感テーマの背景光をゴールドにする */
body.tplp-theme-luxury .tplp-bg-orb-01,
body.theme-luxury .tplp-bg-orb-01,
body[data-theme="luxury"] .tplp-bg-orb-01 {
  background: rgba(214, 177, 92, 0.16);
}

/* 機能目的：高級感テーマの背景光を暗いゴールドにする */
body.tplp-theme-luxury .tplp-bg-orb-02,
body.theme-luxury .tplp-bg-orb-02,
body[data-theme="luxury"] .tplp-bg-orb-02 {
  background: rgba(159, 116, 46, 0.14);
}

/* 機能目的：高級感テーマの背景光を黒寄りにする */
body.tplp-theme-luxury .tplp-bg-orb-03,
body.theme-luxury .tplp-bg-orb-03,
body[data-theme="luxury"] .tplp-bg-orb-03 {
  background: rgba(255, 247, 230, 0.06);
}

/* 機能目的：ヘッダーを黒×ゴールドの固定バーにする */
body.tplp-theme-luxury .tplp-header,
body.theme-luxury .tplp-header,
body[data-theme="luxury"] .tplp-header {
  background: rgba(7, 7, 7, 0.88);
  border-bottom: 1px solid rgba(214, 177, 92, 0.32);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
}

/* 機能目的：ヘッダーの横切る光をゴールドにする */
body.tplp-theme-luxury .tplp-header::after,
body.theme-luxury .tplp-header::after,
body[data-theme="luxury"] .tplp-header::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(214, 177, 92, 0.16),
    rgba(255, 247, 230, 0.28),
    transparent
  );
}

/* 機能目的：ナビゲーションを黒背景に合わせたゴールド表示にする */
body.tplp-theme-luxury .tplp-nav a,
body.theme-luxury .tplp-nav a,
body[data-theme="luxury"] .tplp-nav a {
  color: rgba(255, 247, 230, 0.78);
  border-radius: 999px;
  border: 1px solid transparent;
}

/* 機能目的：ナビゲーションホバー時にゴールドの枠を表示する */
body.tplp-theme-luxury .tplp-nav a:hover,
body.theme-luxury .tplp-nav a:hover,
body[data-theme="luxury"] .tplp-nav a:hover {
  color: var(--tplp-luxury-gold);
  border-color: rgba(214, 177, 92, 0.3);
}

/* 機能目的：問い合わせボタンを黒金の高級感ボタンにする */
body.tplp-theme-luxury .tplp-contact-btn,
body.tplp-theme-luxury .tplp-cta-button,
body.theme-luxury .tplp-contact-btn,
body.theme-luxury .tplp-cta-button,
body[data-theme="luxury"] .tplp-contact-btn,
body[data-theme="luxury"] .tplp-cta-button {
  color: #0b0804;
  background: linear-gradient(135deg, #f3d98a, #c49a45 45%, #8f6423);
  box-shadow:
    0 18px 42px rgba(214, 177, 92, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* 機能目的：サブボタンを黒背景用のゴールド枠にする */
body.tplp-theme-luxury .tplp-secondary-button,
body.theme-luxury .tplp-secondary-button,
body[data-theme="luxury"] .tplp-secondary-button {
  color: var(--tplp-luxury-gold);
  background: rgba(255, 255, 255, 0.04);
}

/* 機能目的：テーマ切替を黒金のタブ風にする */
body.tplp-theme-luxury .tplp-theme-switcher,
body.theme-luxury .tplp-theme-switcher,
body[data-theme="luxury"] .tplp-theme-switcher {
  background: rgba(255, 247, 230, 0.06);
  border: 1px solid rgba(214, 177, 92, 0.28);
  border-radius: 999px;
}

/* 機能目的：選択中テーマをゴールドで強調する */
body.tplp-theme-luxury .tplp-theme-button.is-active,
body.theme-luxury .tplp-theme-button.is-active,
body[data-theme="luxury"] .tplp-theme-button.is-active {
  color: #080604;
  background: linear-gradient(135deg, #f3d98a, #c49a45);
}

/* 機能目的：ファーストビューを重厚な左右レイアウトにする */
body.tplp-theme-luxury .tplp-hero-inner,
body.theme-luxury .tplp-hero-inner,
body[data-theme="luxury"] .tplp-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.9fr);
  align-items: center;
  gap: clamp(44px, 5.5vw, 88px);
}


/* 機能目的：高級感テーマのHERO文言エリアを左側に収め、Basic Priceパネルへの文字被りを防ぐ */
body.tplp-theme-luxury .tplp-hero-content,
body.theme-luxury .tplp-hero-content,
body[data-theme="luxury"] .tplp-hero-content {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 620px;
}

/* 機能目的：ヒーロータイトルを「ホームページ」「制作料金表」の2行で収め、Basic Priceパネルへの文字被りを防ぐ */
body.tplp-theme-luxury .tplp-hero-title,
body.theme-luxury .tplp-hero-title,
body[data-theme="luxury"] .tplp-hero-title {
  max-width: 100%;
  font-size: clamp(3.1rem, 5.05vw, 5.1rem);
  line-height: 1.02;
  color: var(--tplp-luxury-text);
  text-shadow: 0 18px 42px rgba(214, 177, 92, 0.14);
}

/* 機能目的：説明文を淡い白にする */
body.tplp-theme-luxury .tplp-hero-lead,
body.tplp-theme-luxury .tplp-section-lead,
body.theme-luxury .tplp-hero-lead,
body.theme-luxury .tplp-section-lead,
body[data-theme="luxury"] .tplp-hero-lead,
body[data-theme="luxury"] .tplp-section-lead {
  color: var(--tplp-luxury-muted);
}

/* 機能目的：ヒーロー料金パネルを重厚な黒金カードにする */
body.tplp-theme-luxury .tplp-hero-panel,
body.theme-luxury .tplp-hero-panel,
body[data-theme="luxury"] .tplp-hero-panel {
  /* 機能目的：Basic Priceパネルを右側に安定表示し、HEROタイトルとの重なりを防ぐ */
  position: relative;
  z-index: 3;
  min-width: 0;
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid rgba(214, 177, 92, 0.34);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(27, 23, 17, 0.96), rgba(10, 8, 5, 0.96));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(255, 247, 230, 0.06);
}

/* 機能目的：小見出しをゴールドにする */
body.tplp-theme-luxury .tplp-kicker,
body.theme-luxury .tplp-kicker,
body[data-theme="luxury"] .tplp-kicker {
  color: var(--tplp-luxury-gold);
}

/* 機能目的：セクションタイトル下線をゴールドにする */
body.tplp-theme-luxury .tplp-section-title::after,
body.theme-luxury .tplp-section-title::after,
body[data-theme="luxury"] .tplp-section-title::after {
  background: linear-gradient(90deg, var(--tplp-luxury-gold), transparent);
}

/* 機能目的：カードを黒金の重厚なパネルにする */
body.tplp-theme-luxury .tplp-card,
body.tplp-theme-luxury .tplp-maintenance-card,
body.tplp-theme-luxury .tplp-feature-card,
body.theme-luxury .tplp-card,
body.theme-luxury .tplp-maintenance-card,
body.theme-luxury .tplp-feature-card,
body[data-theme="luxury"] .tplp-card,
body[data-theme="luxury"] .tplp-maintenance-card,
body[data-theme="luxury"] .tplp-feature-card {
  overflow: hidden;
  border: 1px solid rgba(214, 177, 92, 0.28);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(27, 23, 17, 0.94), rgba(9, 8, 6, 0.94));
  box-shadow:
    0 28px 76px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 247, 230, 0.05);
}

/* 機能目的：カード上部に細いゴールドラインを表示する */
body.tplp-theme-luxury .tplp-card::before,
body.tplp-theme-luxury .tplp-maintenance-card::before,
body.tplp-theme-luxury .tplp-feature-card::before,
body.theme-luxury .tplp-card::before,
body.theme-luxury .tplp-maintenance-card::before,
body.theme-luxury .tplp-feature-card::before,
body[data-theme="luxury"] .tplp-card::before,
body[data-theme="luxury"] .tplp-maintenance-card::before,
body[data-theme="luxury"] .tplp-feature-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 177, 92, 0.72), transparent);
}

/* 機能目的：バッジを黒金ラベルにする */
body.tplp-theme-luxury .tplp-card-badge,
body.theme-luxury .tplp-card-badge,
body[data-theme="luxury"] .tplp-card-badge {
  color: var(--tplp-luxury-gold);
  background: rgba(214, 177, 92, 0.08);
  border: 1px solid rgba(214, 177, 92, 0.24);
}

/* 機能目的：価格表示をゴールドにする */
body.tplp-theme-luxury .tplp-card-price,
body.theme-luxury .tplp-card-price,
body[data-theme="luxury"] .tplp-card-price {
  color: var(--tplp-luxury-gold);
  text-shadow: 0 12px 28px rgba(214, 177, 92, 0.16);
}

/* 機能目的：本文を黒背景で読みやすい淡色にする */
body.tplp-theme-luxury .tplp-card-text,
body.tplp-theme-luxury .tplp-feature-card p,
body.theme-luxury .tplp-card-text,
body.theme-luxury .tplp-feature-card p,
body[data-theme="luxury"] .tplp-card-text,
body[data-theme="luxury"] .tplp-feature-card p {
  color: var(--tplp-luxury-muted);
}

/* 機能目的：対応内容アイコンを高級感テーマ用の黒金フレームにして安っぽさをなくす */
body.tplp-theme-luxury .tplp-feature-icon,
body.theme-luxury .tplp-feature-icon,
body[data-theme="luxury"] .tplp-feature-icon {
  width: 74px;
  height: 74px;
  margin-bottom: 20px;
  border-radius: 22px;
  color: var(--tplp-luxury-gold);
  border: 1px solid rgba(214, 177, 92, 0.28);
  background:
    linear-gradient(145deg, rgba(27, 23, 17, 0.95), rgba(8, 7, 5, 0.95)),
    radial-gradient(circle at 20% 18%, rgba(214, 177, 92, 0.14), transparent 42%);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.36),
    0 0 18px rgba(214, 177, 92, 0.08),
    inset 0 0 0 1px rgba(255, 247, 230, 0.04);
}

/* 機能目的：高級感テーマのSVGアイコンに控えめな金の発光感を加える */
body.tplp-theme-luxury .tplp-feature-icon svg,
body.theme-luxury .tplp-feature-icon svg,
body[data-theme="luxury"] .tplp-feature-icon svg {
  filter: drop-shadow(0 0 8px rgba(214, 177, 92, 0.14));
}

/* 機能目的：オプションカードを重厚な2列カードのまま表示する */
body.tplp-theme-luxury .tplp-option-card,
body.theme-luxury .tplp-option-card,
body[data-theme="luxury"] .tplp-option-card {
  min-height: 220px;
}

/* 機能目的：保守カードを横長の重厚パネルにする */
body.tplp-theme-luxury .tplp-maintenance-card,
body.theme-luxury .tplp-maintenance-card,
body[data-theme="luxury"] .tplp-maintenance-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

/* 機能目的：CTAを黒金の大きな締めパネルにする */
body.tplp-theme-luxury .tplp-cta,
body.theme-luxury .tplp-cta,
body[data-theme="luxury"] .tplp-cta {
  overflow: hidden;
  border: 1px solid rgba(214, 177, 92, 0.34);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 177, 92, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(27, 23, 17, 0.98), rgba(5, 5, 5, 0.98));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.48);
}

/* 機能目的：フッターを黒金の下部帯にする */
body.tplp-theme-luxury .tplp-footer,
body.theme-luxury .tplp-footer,
body[data-theme="luxury"] .tplp-footer {
  background: #050505;
  color: rgba(255, 247, 230, 0.78);
  border-top: 1px solid rgba(214, 177, 92, 0.24);
}

/* 機能目的：タブレット幅では高級感テーマの左右配置を1列化する */
@media (max-width: 960px) {
  body.tplp-theme-luxury .tplp-hero-inner,
  body.theme-luxury .tplp-hero-inner,
  body[data-theme="luxury"] .tplp-hero-inner,
  body.tplp-theme-luxury .tplp-maintenance-card,
  body.theme-luxury .tplp-maintenance-card,
  body[data-theme="luxury"] .tplp-maintenance-card {
    grid-template-columns: 1fr;
  }
}