/* =========================================================
   theme-elegant.css
   機能目的：上品テーマをベージュ×ゴールドのパンフレット・案内状風レイアウトにする
   注意：上品テーマではキラキラ・金粉演出を使わない
   ========================================================= */

/* 機能目的：上品テーマの基本配色と、和紙の流れを感じる背景アニメーションを定義する */
body.tplp-theme-elegant,
body.theme-elegant,
body[data-theme="elegant"] {
  --tplp-elegant-bg: #f7efe2;
  --tplp-elegant-paper: #fffaf1;
  --tplp-elegant-paper-2: #f3e4c9;
  --tplp-elegant-gold: #b98a3d;
  --tplp-elegant-gold-dark: #8a6328;
  --tplp-elegant-brown: #49351f;
  --tplp-elegant-muted: #7b674f;
  color: var(--tplp-elegant-brown);
  background-image:
    radial-gradient(circle at 12% 10%, rgba(185, 138, 61, 0.13), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.76), transparent 30%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 250, 241, 0.28) 44%, rgba(185, 138, 61, 0.07) 50%, rgba(255, 250, 241, 0.22) 56%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, #f7efe2 0%, #efe0c8 100%);
  background-size:
    760px 760px,
    820px 820px,
    160% 160%,
    100% 100%;
  background-position:
    0% 0%,
    100% 0%,
    0% 50%,
    0% 0%;
  animation: tplpElegantPaperDrift 24s ease-in-out infinite alternate;
}

/* 機能目的：上品テーマに紙質感と控えめな格子背景を追加する */
body.tplp-theme-elegant::before,
body.theme-elegant::before,
body[data-theme="elegant"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: 0.44;
  background-image:
    linear-gradient(90deg, rgba(73, 53, 31, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(73, 53, 31, 0.03) 1px, transparent 1px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 18px);
  background-size:
    28px 28px,
    28px 28px,
    220px 220px;
  background-position:
    0 0,
    0 0,
    0 0;
  animation: tplpElegantTextureDrift 34s linear infinite;
}

/* 機能目的：上品テーマに控えめな紙面装飾を追加する */
body.tplp-theme-elegant::after,
body.theme-elegant::after,
body[data-theme="elegant"]::after {
  content: "";
  position: fixed;
  inset: 20px;
  z-index: -3;
  pointer-events: none;
  border: 1px solid rgba(185, 138, 61, 0.12);
  border-radius: 28px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 241, 0.22),
    inset 0 0 42px rgba(255, 250, 241, 0.28);
}

/* 機能目的：上品用TOP背景画像を右側に全体表示し、紙面風デザインを崩さず差し込む */
body.tplp-theme-elegant .tplp-hero-background,
body.theme-elegant .tplp-hero-background,
body[data-theme="elegant"] .tplp-hero-background {
  --tplp-hero-bg-opacity: 0.42;
  --tplp-hero-bg-mobile-opacity: 0.2;
  --tplp-hero-bg-overlay: linear-gradient(
    90deg,
    rgba(247, 239, 226, 0.96) 0%,
    rgba(247, 239, 226, 0.74) 44%,
    rgba(247, 239, 226, 0.2) 100%
  );
  background-image: url("../images/top-bg-elegant.png");
  background-position: right center;
  background-size: contain;
}

/* 機能目的：上品テーマの背景光を金色にする */
body.tplp-theme-elegant .tplp-bg-orb-01,
body.theme-elegant .tplp-bg-orb-01,
body[data-theme="elegant"] .tplp-bg-orb-01 {
  background: rgba(185, 138, 61, 0.17);
}

/* 機能目的：上品テーマの背景光を白系にする */
body.tplp-theme-elegant .tplp-bg-orb-02,
body.theme-elegant .tplp-bg-orb-02,
body[data-theme="elegant"] .tplp-bg-orb-02 {
  background: rgba(255, 255, 255, 0.72);
}

/* 機能目的：上品テーマの背景光を薄茶色にする */
body.tplp-theme-elegant .tplp-bg-orb-03,
body.theme-elegant .tplp-bg-orb-03,
body[data-theme="elegant"] .tplp-bg-orb-03 {
  background: rgba(138, 99, 40, 0.12);
}

/* 機能目的：ヘッダーを案内状の上部帯風にする */
body.tplp-theme-elegant .tplp-header,
body.theme-elegant .tplp-header,
body[data-theme="elegant"] .tplp-header {
  background: rgba(255, 250, 241, 0.92);
  border-bottom: 1px solid rgba(185, 138, 61, 0.34);
  box-shadow: 0 16px 36px rgba(73, 53, 31, 0.08);
  backdrop-filter: blur(14px);
}

/* 機能目的：ヘッダーの光を控えめな金色にする */
body.tplp-theme-elegant .tplp-header::after,
body.theme-elegant .tplp-header::after,
body[data-theme="elegant"] .tplp-header::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(185, 138, 61, 0.12),
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation-duration: 9s;
}

/* 機能目的：ロゴを上品テーマに合わせて落ち着いた色にする */
body.tplp-theme-elegant .tplp-logo-link,
body.theme-elegant .tplp-logo-link,
body[data-theme="elegant"] .tplp-logo-link {
  color: var(--tplp-elegant-brown);
}

/* 機能目的：ナビゲーションをパンフレットの目次風にする */
body.tplp-theme-elegant .tplp-nav a,
body.theme-elegant .tplp-nav a,
body[data-theme="elegant"] .tplp-nav a {
  color: var(--tplp-elegant-brown);
  border-radius: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
}

/* 機能目的：ナビゲーションホバー時に金色の下線を表示する */
body.tplp-theme-elegant .tplp-nav a:hover,
body.theme-elegant .tplp-nav a:hover,
body[data-theme="elegant"] .tplp-nav a:hover {
  color: var(--tplp-elegant-gold-dark);
  border-bottom-color: var(--tplp-elegant-gold);
}

/* 機能目的：問い合わせボタンを上品なゴールドボタンにする */
body.tplp-theme-elegant .tplp-contact-btn,
body.tplp-theme-elegant .tplp-cta-button,
body.theme-elegant .tplp-contact-btn,
body.theme-elegant .tplp-cta-button,
body[data-theme="elegant"] .tplp-contact-btn,
body[data-theme="elegant"] .tplp-cta-button {
  color: #ffffff;
  background: linear-gradient(135deg, #caa45b, #9b722f);
  box-shadow:
    0 16px 32px rgba(138, 99, 40, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 機能目的：サブボタンを案内状風の枠線ボタンにする */
body.tplp-theme-elegant .tplp-secondary-button,
body.theme-elegant .tplp-secondary-button,
body[data-theme="elegant"] .tplp-secondary-button {
  color: var(--tplp-elegant-gold-dark);
  background: rgba(255, 250, 241, 0.72);
  border-color: rgba(185, 138, 61, 0.45);
}

/* 機能目的：テーマ切替を上品なピル型にする */
body.tplp-theme-elegant .tplp-theme-switcher,
body.theme-elegant .tplp-theme-switcher,
body[data-theme="elegant"] .tplp-theme-switcher {
  background: rgba(185, 138, 61, 0.12);
  border: 1px solid rgba(185, 138, 61, 0.28);
  border-radius: 999px;
}

/* 機能目的：選択中テーマを金色で強調する */
body.tplp-theme-elegant .tplp-theme-button.is-active,
body.theme-elegant .tplp-theme-button.is-active,
body[data-theme="elegant"] .tplp-theme-button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #caa45b, #9b722f);
}

/* 機能目的：ファーストビューを中央縦積みの案内状風にする */
body.tplp-theme-elegant .tplp-hero-inner,
body.theme-elegant .tplp-hero-inner,
body[data-theme="elegant"] .tplp-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 38px;
}

/* 機能目的：ヒーロー文言を案内状の本文ブロック風にする */
body.tplp-theme-elegant .tplp-hero-content,
body.theme-elegant .tplp-hero-content,
body[data-theme="elegant"] .tplp-hero-content {
  position: relative;
  width: min(1040px, 100%);
  padding: clamp(34px, 5vw, 60px);
  border-top: 1px solid rgba(185, 138, 61, 0.5);
  border-bottom: 1px solid rgba(185, 138, 61, 0.5);
}

/* 機能目的：ヒーロー文言ブロックに左右の飾り罫線を追加する */
body.tplp-theme-elegant .tplp-hero-content::before,
body.theme-elegant .tplp-hero-content::before,
body[data-theme="elegant"] .tplp-hero-content::before,
body.tplp-theme-elegant .tplp-hero-content::after,
body.theme-elegant .tplp-hero-content::after,
body[data-theme="elegant"] .tplp-hero-content::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(transparent, rgba(185, 138, 61, 0.46), transparent);
}

/* 機能目的：ヒーロー文言ブロック左側の飾り線を配置する */
body.tplp-theme-elegant .tplp-hero-content::before,
body.theme-elegant .tplp-hero-content::before,
body[data-theme="elegant"] .tplp-hero-content::before {
  left: 16px;
}

/* 機能目的：ヒーロー文言ブロック右側の飾り線を配置する */
body.tplp-theme-elegant .tplp-hero-content::after,
body.theme-elegant .tplp-hero-content::after,
body[data-theme="elegant"] .tplp-hero-content::after {
  right: 16px;
}

/* 機能目的：ヒーロータイトルを案内状らしい文字サイズに調整する */
body.tplp-theme-elegant .tplp-hero-title,
body.theme-elegant .tplp-hero-title,
body[data-theme="elegant"] .tplp-hero-title {
  /* 機能目的：上品テーマのHEROタイトルを中央に微調整し、左右の余白バランスを整える */
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: clamp(2.45rem, 5vw, 4.7rem);
  letter-spacing: 0.06em;
  color: var(--tplp-elegant-brown);
}

/* 機能目的：ヒーロー説明文の配置と文字サイズを調整する */
body.tplp-theme-elegant .tplp-hero-lead,
body.theme-elegant .tplp-hero-lead,
body[data-theme="elegant"] .tplp-hero-lead {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  color: var(--tplp-elegant-muted);
}

/* 機能目的：ヒーローのボタンを中央配置にする */
body.tplp-theme-elegant .tplp-hero-actions,
body.theme-elegant .tplp-hero-actions,
body[data-theme="elegant"] .tplp-hero-actions {
  justify-content: center;
}

/* 機能目的：ヒーロー料金パネルを価格札風にする */
body.tplp-theme-elegant .tplp-hero-panel,
body.theme-elegant .tplp-hero-panel,
body[data-theme="elegant"] .tplp-hero-panel {
  position: relative;
  width: min(760px, 100%);
  padding: clamp(32px, 4vw, 48px);
  border: 1px solid rgba(185, 138, 61, 0.42);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 250, 241, 0.96), rgba(246, 235, 213, 0.94));
  box-shadow:
    0 24px 60px rgba(73, 53, 31, 0.12),
    inset 0 0 0 8px rgba(255, 255, 255, 0.34);
}

/* 機能目的：ヒーロー料金パネルに角飾りを追加する */
body.tplp-theme-elegant .tplp-hero-panel::before,
body.theme-elegant .tplp-hero-panel::before,
body[data-theme="elegant"] .tplp-hero-panel::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(185, 138, 61, 0.18);
  border-radius: 16px;
  pointer-events: none;
}

/* 機能目的：セクション見出しを案内状の見出し風に中央配置する */
body.tplp-theme-elegant .tplp-section-head,
body.theme-elegant .tplp-section-head,
body[data-theme="elegant"] .tplp-section-head {
  text-align: center;
}

/* 機能目的：セクションタイトルの文字サイズと配置を調整する */
body.tplp-theme-elegant .tplp-section-title,
body.theme-elegant .tplp-section-title,
body[data-theme="elegant"] .tplp-section-title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  letter-spacing: 0.08em;
  color: var(--tplp-elegant-brown);
}

/* 機能目的：セクション説明文を中央に配置し、読みやすいサイズにする */
body.tplp-theme-elegant .tplp-section-lead,
body.theme-elegant .tplp-section-lead,
body[data-theme="elegant"] .tplp-section-lead {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--tplp-elegant-muted);
  font-size: 1.02rem;
  line-height: 1.95;
}

/* 機能目的：セクションタイトル下線を中央の飾り罫線にする */
body.tplp-theme-elegant .tplp-section-title::after,
body.theme-elegant .tplp-section-title::after,
body[data-theme="elegant"] .tplp-section-title::after {
  width: 120px;
  height: 2px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, transparent, var(--tplp-elegant-gold), transparent);
}

/* 機能目的：基本プランを左右配置のパンフレット風にする */
body.tplp-theme-elegant .tplp-basic-grid,
body.theme-elegant .tplp-basic-grid,
body[data-theme="elegant"] .tplp-basic-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(22px, 3vw, 34px);
}

/* 機能目的：カードを紙面風の柔らかい見た目にする */
body.tplp-theme-elegant .tplp-card,
body.tplp-theme-elegant .tplp-maintenance-card,
body.tplp-theme-elegant .tplp-feature-card,
body.theme-elegant .tplp-card,
body.theme-elegant .tplp-maintenance-card,
body.theme-elegant .tplp-feature-card,
body[data-theme="elegant"] .tplp-card,
body[data-theme="elegant"] .tplp-maintenance-card,
body[data-theme="elegant"] .tplp-feature-card {
  position: relative;
  padding: clamp(28px, 3.2vw, 40px);
  border: 1px solid rgba(185, 138, 61, 0.28);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 250, 241, 0.97), rgba(248, 239, 220, 0.93));
  box-shadow:
    0 22px 48px rgba(73, 53, 31, 0.1),
    inset 0 0 0 6px rgba(255, 255, 255, 0.22);
}

/* 機能目的：カード上部に小さな金線を入れて価格札感を出す */
body.tplp-theme-elegant .tplp-card::before,
body.tplp-theme-elegant .tplp-maintenance-card::before,
body.tplp-theme-elegant .tplp-feature-card::before,
body.theme-elegant .tplp-card::before,
body.theme-elegant .tplp-maintenance-card::before,
body.theme-elegant .tplp-feature-card::before,
body[data-theme="elegant"] .tplp-card::before,
body[data-theme="elegant"] .tplp-maintenance-card::before,
body[data-theme="elegant"] .tplp-feature-card::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 24px;
  width: 52px;
  height: 2px;
  background: var(--tplp-elegant-gold);
}

/* 機能目的：カード右下に控えめな角飾りを追加する */
body.tplp-theme-elegant .tplp-card::after,
body.tplp-theme-elegant .tplp-maintenance-card::after,
body.tplp-theme-elegant .tplp-feature-card::after,
body.theme-elegant .tplp-card::after,
body.theme-elegant .tplp-maintenance-card::after,
body.theme-elegant .tplp-feature-card::after,
body[data-theme="elegant"] .tplp-card::after,
body[data-theme="elegant"] .tplp-maintenance-card::after,
body[data-theme="elegant"] .tplp-feature-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 34px;
  height: 34px;
  border-right: 1px solid rgba(185, 138, 61, 0.36);
  border-bottom: 1px solid rgba(185, 138, 61, 0.36);
  border-radius: 0 0 12px 0;
  pointer-events: none;
}

/* 機能目的：カードタイトルの文字サイズと配置を調整する */
body.tplp-theme-elegant .tplp-card-title,
body.theme-elegant .tplp-card-title,
body[data-theme="elegant"] .tplp-card-title {
  font-size: clamp(1.24rem, 2.1vw, 1.72rem);
  line-height: 1.45;
  letter-spacing: 0.04em;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* 機能目的：カード本文を上品な読み物風に調整する */
body.tplp-theme-elegant .tplp-card-text,
body.theme-elegant .tplp-card-text,
body[data-theme="elegant"] .tplp-card-text {
  color: var(--tplp-elegant-muted);
  font-size: 0.98rem;
  line-height: 1.95;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* 機能目的：価格表示を落ち着いたゴールドにする */
body.tplp-theme-elegant .tplp-card-price,
body.theme-elegant .tplp-card-price,
body[data-theme="elegant"] .tplp-card-price {
  color: var(--tplp-elegant-gold-dark);
  font-size: clamp(1.72rem, 3.2vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
  font-feature-settings: "palt";
}

/* 機能目的：バッジを封筒ラベル風にする */
body.tplp-theme-elegant .tplp-card-badge,
body.theme-elegant .tplp-card-badge,
body[data-theme="elegant"] .tplp-card-badge {
  color: var(--tplp-elegant-gold-dark);
  background: rgba(185, 138, 61, 0.12);
  border: 1px solid rgba(185, 138, 61, 0.24);
}

/* 機能目的：オプションを小カードのパンフレット一覧風にし、4列時の余白バランスを安定させる */
body.tplp-theme-elegant .tplp-option-grid,
body.theme-elegant .tplp-option-grid,
body[data-theme="elegant"] .tplp-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: clamp(18px, 1.8vw, 24px);
  align-items: stretch;
}

/* 機能目的：オプションカードを縦積み化し、説明文と価格の表示領域を安定させる */
body.tplp-theme-elegant .tplp-option-card,
body.theme-elegant .tplp-option-card,
body[data-theme="elegant"] .tplp-option-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  min-width: 0;
  min-height: 300px;
  padding: clamp(24px, 2.3vw, 32px) clamp(22px, 2.1vw, 28px) clamp(24px, 2.3vw, 32px) clamp(18px, 1.8vw, 24px);
  overflow: hidden;
}

/* 機能目的：オプションカード内の要素を少し左に寄せ、装飾より前面に出して読みやすくする */
body.tplp-theme-elegant .tplp-option-card > *,
body.theme-elegant .tplp-option-card > *,
body[data-theme="elegant"] .tplp-option-card > * {
  position: relative;
  z-index: 1;
}

/* 機能目的：オプションタイトルを自然なサイズで上品に表示する */
body.tplp-theme-elegant .tplp-option-card .tplp-card-title,
body.theme-elegant .tplp-option-card .tplp-card-title,
body[data-theme="elegant"] .tplp-option-card .tplp-card-title {
  margin: 0;
  max-width: 100%;
  font-size: clamp(1.12rem, 1.45vw, 1.46rem);
  line-height: 1.5;
  letter-spacing: 0.035em;
}

/* 機能目的：オプション説明文が1文字ずつ落ちず、きれいに読めるようにする */
body.tplp-theme-elegant .tplp-option-card .tplp-card-text,
body.theme-elegant .tplp-option-card .tplp-card-text,
body[data-theme="elegant"] .tplp-option-card .tplp-card-text {
  margin: 0;
  max-width: 100%;
  font-size: 0.92rem;
  line-height: 1.82;
  letter-spacing: 0.015em;
}

/* 機能目的：オプション価格の表示崩れを防ぎ、カード内に収まるサイズへ調整する */
body.tplp-theme-elegant .tplp-option-card .tplp-card-price,
body.theme-elegant .tplp-option-card .tplp-card-price,
body[data-theme="elegant"] .tplp-option-card .tplp-card-price {
  margin-top: auto;
  align-self: flex-start;
  max-width: 100%;
  text-align: left;
  font-size: clamp(1.42rem, 1.65vw, 1.86rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  font-feature-settings: "palt";
}

/* 機能目的：保守カードを案内状の本文ブロック風にする */
body.tplp-theme-elegant .tplp-maintenance-card,
body.theme-elegant .tplp-maintenance-card,
body[data-theme="elegant"] .tplp-maintenance-card {
  display: block;
  width: min(900px, 100%);
  margin: 0 auto;
  text-align: center;
}

/* 機能目的：保守カード内の価格を中央で見やすくする */
body.tplp-theme-elegant .tplp-maintenance-card .tplp-card-price,
body.theme-elegant .tplp-maintenance-card .tplp-card-price,
body[data-theme="elegant"] .tplp-maintenance-card .tplp-card-price {
  margin-top: 26px;
}

/* 機能目的：備考を縦の案内リスト風にする */
body.tplp-theme-elegant .tplp-note-grid,
body.theme-elegant .tplp-note-grid,
body[data-theme="elegant"] .tplp-note-grid {
  grid-template-columns: 1fr;
  width: min(900px, 100%);
  margin: 0 auto;
  gap: 18px;
}

/* 機能目的：備考カードを横長の案内行にする */
body.tplp-theme-elegant .tplp-note-card,
body.theme-elegant .tplp-note-card,
body[data-theme="elegant"] .tplp-note-card {
  padding-left: clamp(40px, 5vw, 62px);
}

/* 機能目的：対応内容を2列の上品カードにする */
body.tplp-theme-elegant .tplp-feature-grid,
body.theme-elegant .tplp-feature-grid,
body[data-theme="elegant"] .tplp-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 30px);
}

/* 機能目的：対応内容カードを中央寄せで読みやすくする */
body.tplp-theme-elegant .tplp-feature-card,
body.theme-elegant .tplp-feature-card,
body[data-theme="elegant"] .tplp-feature-card {
  text-align: center;
  min-height: 220px;
}

/* 機能目的：対応内容アイコンを上品テーマ用の案内状風フレームにする */
body.tplp-theme-elegant .tplp-feature-icon,
body.theme-elegant .tplp-feature-icon,
body[data-theme="elegant"] .tplp-feature-icon {
  width: 74px;
  height: 74px;
  margin-bottom: 18px;
  border-radius: 22px;
  color: var(--tplp-elegant-gold-dark);
  border: 1px solid rgba(185, 138, 61, 0.24);
  background:
    linear-gradient(145deg, rgba(255, 250, 241, 0.96), rgba(246, 235, 213, 0.94));
  box-shadow:
    0 14px 30px rgba(73, 53, 31, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}


/* 機能目的：上品テーマのFAQ一覧をセクション中央へ配置し、左右の余白バランスを整える */
body.tplp-theme-elegant .tplp-faq-list,
body.theme-elegant .tplp-faq-list,
body[data-theme="elegant"] .tplp-faq-list {
  margin-left: auto;
  margin-right: auto;
}

/* 機能目的：CTA（シーティーエー）を案内状の締め部分風にする */
body.tplp-theme-elegant .tplp-cta,
body.theme-elegant .tplp-cta,
body[data-theme="elegant"] .tplp-cta {
  position: relative;
  border: 1px solid rgba(185, 138, 61, 0.38);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 250, 241, 0.97), rgba(243, 228, 201, 0.94));
  box-shadow: 0 24px 58px rgba(73, 53, 31, 0.12);
}

/* 機能目的：CTA（シーティーエー）に案内状風の内枠装飾を追加する */
body.tplp-theme-elegant .tplp-cta::before,
body.theme-elegant .tplp-cta::before,
body[data-theme="elegant"] .tplp-cta::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(185, 138, 61, 0.18);
  border-radius: 18px;
  pointer-events: none;
}

/* 機能目的：CTA（シーティーエー）内の文字を装飾より前面に出す */
body.tplp-theme-elegant .tplp-cta > *,
body.theme-elegant .tplp-cta > *,
body[data-theme="elegant"] .tplp-cta > * {
  position: relative;
  z-index: 1;
}

/* 機能目的：CTA（シーティーエー）タイトルを上品テーマ用に調整する */
body.tplp-theme-elegant .tplp-cta-title,
body.theme-elegant .tplp-cta-title,
body[data-theme="elegant"] .tplp-cta-title {
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  letter-spacing: 0.04em;
}

/* 機能目的：CTA（シーティーエー）本文の文字サイズを調整する */
body.tplp-theme-elegant .tplp-cta-text,
body.theme-elegant .tplp-cta-text,
body[data-theme="elegant"] .tplp-cta-text {
  color: var(--tplp-elegant-muted);
  font-size: 1.02rem;
  line-height: 1.95;
}

/* 機能目的：フッターを上品な茶色帯にする */
body.tplp-theme-elegant .tplp-footer,
body.theme-elegant .tplp-footer,
body[data-theme="elegant"] .tplp-footer {
  background: #4a3825;
  color: rgba(255, 250, 241, 0.88);
}

/* 機能目的：上品テーマ専用の背景をゆっくり流し、他テーマと被らない紙面の動きを作る */
@keyframes tplpElegantPaperDrift {
  0% {
    background-position:
      0% 0%,
      100% 0%,
      0% 50%,
      0% 0%;
  }

  100% {
    background-position:
      4% 3%,
      96% 4%,
      100% 50%,
      0% 0%;
  }
}

/* 機能目的：紙質感の細い線をゆっくり動かして、静かな高級パンフレット感を出す */
@keyframes tplpElegantTextureDrift {
  0% {
    background-position:
      0 0,
      0 0,
      0 0;
  }

  100% {
    background-position:
      0 0,
      0 0,
      220px 120px;
  }
}

/* 機能目的：タブレット幅でオプションと対応内容を2列へ戻す */
@media (max-width: 960px) {
  body.tplp-theme-elegant .tplp-option-grid,
  body.theme-elegant .tplp-option-grid,
  body[data-theme="elegant"] .tplp-option-grid,
  body.tplp-theme-elegant .tplp-feature-grid,
  body.theme-elegant .tplp-feature-grid,
  body[data-theme="elegant"] .tplp-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.tplp-theme-elegant .tplp-option-card,
  body.theme-elegant .tplp-option-card,
  body[data-theme="elegant"] .tplp-option-card {
    min-height: 270px;
  }

  body.tplp-theme-elegant .tplp-option-card .tplp-card-title,
  body.theme-elegant .tplp-option-card .tplp-card-title,
  body[data-theme="elegant"] .tplp-option-card .tplp-card-title {
    font-size: clamp(1.22rem, 3.2vw, 1.62rem);
  }

  body.tplp-theme-elegant .tplp-option-card .tplp-card-price,
  body.theme-elegant .tplp-option-card .tplp-card-price,
  body[data-theme="elegant"] .tplp-option-card .tplp-card-price {
    font-size: clamp(1.8rem, 4.4vw, 2.45rem);
  }
}

/* 機能目的：スマホ幅では上品テーマも1列化して読みやすくする */
@media (max-width: 640px) {
  body.tplp-theme-elegant .tplp-basic-grid,
  body.theme-elegant .tplp-basic-grid,
  body[data-theme="elegant"] .tplp-basic-grid,
  body.tplp-theme-elegant .tplp-option-grid,
  body.theme-elegant .tplp-option-grid,
  body[data-theme="elegant"] .tplp-option-grid,
  body.tplp-theme-elegant .tplp-feature-grid,
  body.theme-elegant .tplp-feature-grid,
  body[data-theme="elegant"] .tplp-feature-grid {
    grid-template-columns: 1fr;
  }

  body.tplp-theme-elegant .tplp-hero-content,
  body.theme-elegant .tplp-hero-content,
  body[data-theme="elegant"] .tplp-hero-content {
    padding-left: 24px;
    padding-right: 24px;
  }

  body.tplp-theme-elegant::after,
  body.theme-elegant::after,
  body[data-theme="elegant"]::after {
    inset: 10px;
  }

  body.tplp-theme-elegant .tplp-option-card,
  body.theme-elegant .tplp-option-card,
  body[data-theme="elegant"] .tplp-option-card {
    min-height: 240px;
    gap: 14px;
  }

  body.tplp-theme-elegant .tplp-option-card .tplp-card-title,
  body.theme-elegant .tplp-option-card .tplp-card-title,
  body[data-theme="elegant"] .tplp-option-card .tplp-card-title {
    font-size: clamp(1.24rem, 4.8vw, 1.62rem);
  }

  body.tplp-theme-elegant .tplp-option-card .tplp-card-text,
  body.theme-elegant .tplp-option-card .tplp-card-text,
  body[data-theme="elegant"] .tplp-option-card .tplp-card-text {
    font-size: 0.97rem;
  }

  body.tplp-theme-elegant .tplp-option-card .tplp-card-price,
  body.theme-elegant .tplp-option-card .tplp-card-price,
  body[data-theme="elegant"] .tplp-option-card .tplp-card-price {
    font-size: clamp(1.8rem, 8vw, 2.35rem);
    white-space: normal;
  }
}

/* 機能目的：動きを減らす設定の端末では背景アニメーションを停止し、閲覧負荷を下げる */
@media (prefers-reduced-motion: reduce) {
  body.tplp-theme-elegant,
  body.theme-elegant,
  body[data-theme="elegant"],
  body.tplp-theme-elegant::before,
  body.theme-elegant::before,
  body[data-theme="elegant"]::before {
    animation: none;
  }
}