/* =========================================
   SVG背景のカラーテーマ対応
   ========================================= */

/* SVG背景の基本スタイル */
.background-svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* グラデーションのstop要素の色をCSS変数で制御 */
.background-svg stop {
  transition: stop-color 0.5s ease;
}

/* デフォルトテーマ */
:root {
  /* 背景グラデーション（Secondaryカラー） */
  --svg-bg-stop1: var(--secondary-dark, #5C7BFF);
  --svg-bg-stop2: var(--secondary-main, #6B8BFF);
  --svg-bg-stop3: var(--secondary-light, #7B9BFF);
  
  /* 三角形グラデーション（Primaryカラー） */
  --svg-tri-stop1: var(--primary-light, #66B3FF);
  --svg-tri-stop2: var(--primary-main, #4785FF);
  --svg-tri-stop3: var(--primary-dark, #4285FF);
  
  /* 放射状グラデーション（Primaryカラー） */
  --svg-radial-stop1: var(--primary-light, #66B3FF);
  --svg-radial-stop2: var(--primary-main, #4785FF);
  --svg-radial-stop3: var(--primary-dark, #4285FF);
}

/* デフォルトテーマのstop要素の色 */
:root #bgStop1 {
  stop-color: var(--svg-bg-stop1);
}
:root #bgStop2 {
  stop-color: var(--svg-bg-stop2);
}
:root #bgStop3 {
  stop-color: var(--svg-bg-stop3);
}
:root #triStop1 {
  stop-color: var(--svg-tri-stop1);
}
:root #triStop2 {
  stop-color: var(--svg-tri-stop2);
}
:root #triStop3 {
  stop-color: var(--svg-tri-stop3);
}
:root #radialStop1 {
  stop-color: var(--svg-radial-stop1);
}
:root #radialStop2 {
  stop-color: var(--svg-radial-stop2);
}
:root #radialStop3 {
  stop-color: var(--svg-radial-stop3);
}

/* オレンジテーマ */
[data-theme="orange"] {
  --svg-bg-stop1: var(--secondary-dark, #0E7490);
  --svg-bg-stop2: var(--secondary-main, #0891B2);
  --svg-bg-stop3: var(--secondary-light, #22D3EE);
  
  --svg-tri-stop1: var(--primary-light, #FB923C);
  --svg-tri-stop2: var(--primary-main, #EA580C);
  --svg-tri-stop3: var(--primary-dark, #C2410C);
  
  --svg-radial-stop1: var(--primary-light, #FB923C);
  --svg-radial-stop2: var(--primary-main, #EA580C);
  --svg-radial-stop3: var(--primary-dark, #C2410C);
}

[data-theme="orange"] #bgStop1 {
  stop-color: var(--svg-bg-stop1);
}
[data-theme="orange"] #bgStop2 {
  stop-color: var(--svg-bg-stop2);
}
[data-theme="orange"] #bgStop3 {
  stop-color: var(--svg-bg-stop3);
}
[data-theme="orange"] #triStop1 {
  stop-color: var(--svg-tri-stop1);
}
[data-theme="orange"] #triStop2 {
  stop-color: var(--svg-tri-stop2);
}
[data-theme="orange"] #triStop3 {
  stop-color: var(--svg-tri-stop3);
}
[data-theme="orange"] #radialStop1 {
  stop-color: var(--svg-radial-stop1);
}
[data-theme="orange"] #radialStop2 {
  stop-color: var(--svg-radial-stop2);
}
[data-theme="orange"] #radialStop3 {
  stop-color: var(--svg-radial-stop3);
}

/* ブルーテーマ */
[data-theme="blue"] {
  --svg-bg-stop1: var(--secondary-dark, #059669);
  --svg-bg-stop2: var(--secondary-main, #10B981);
  --svg-bg-stop3: var(--secondary-light, #34D399);
  
  --svg-tri-stop1: var(--primary-light, #60A5FA);
  --svg-tri-stop2: var(--primary-main, #2563EB);
  --svg-tri-stop3: var(--primary-dark, #1E40AF);
  
  --svg-radial-stop1: var(--primary-light, #60A5FA);
  --svg-radial-stop2: var(--primary-main, #2563EB);
  --svg-radial-stop3: var(--primary-dark, #1E40AF);
}

[data-theme="blue"] #bgStop1 {
  stop-color: var(--svg-bg-stop1);
}
[data-theme="blue"] #bgStop2 {
  stop-color: var(--svg-bg-stop2);
}
[data-theme="blue"] #bgStop3 {
  stop-color: var(--svg-bg-stop3);
}
[data-theme="blue"] #triStop1 {
  stop-color: var(--svg-tri-stop1);
}
[data-theme="blue"] #triStop2 {
  stop-color: var(--svg-tri-stop2);
}
[data-theme="blue"] #triStop3 {
  stop-color: var(--svg-tri-stop3);
}
[data-theme="blue"] #radialStop1 {
  stop-color: var(--svg-radial-stop1);
}
[data-theme="blue"] #radialStop2 {
  stop-color: var(--svg-radial-stop2);
}
[data-theme="blue"] #radialStop3 {
  stop-color: var(--svg-radial-stop3);
}

/* パープルテーマ */
[data-theme="purple"] {
  --svg-bg-stop1: var(--secondary-dark, #BE185D);
  --svg-bg-stop2: var(--secondary-main, #EC4899);
  --svg-bg-stop3: var(--secondary-light, #F472B6);
  
  --svg-tri-stop1: var(--primary-light, #A78BFA);
  --svg-tri-stop2: var(--primary-main, #7C3AED);
  --svg-tri-stop3: var(--primary-dark, #5B21B6);
  
  --svg-radial-stop1: var(--primary-light, #A78BFA);
  --svg-radial-stop2: var(--primary-main, #7C3AED);
  --svg-radial-stop3: var(--primary-dark, #5B21B6);
}

[data-theme="purple"] #bgStop1 {
  stop-color: var(--svg-bg-stop1);
}
[data-theme="purple"] #bgStop2 {
  stop-color: var(--svg-bg-stop2);
}
[data-theme="purple"] #bgStop3 {
  stop-color: var(--svg-bg-stop3);
}
[data-theme="purple"] #triStop1 {
  stop-color: var(--svg-tri-stop1);
}
[data-theme="purple"] #triStop2 {
  stop-color: var(--svg-tri-stop2);
}
[data-theme="purple"] #triStop3 {
  stop-color: var(--svg-tri-stop3);
}
[data-theme="purple"] #radialStop1 {
  stop-color: var(--svg-radial-stop1);
}
[data-theme="purple"] #radialStop2 {
  stop-color: var(--svg-radial-stop2);
}
[data-theme="purple"] #radialStop3 {
  stop-color: var(--svg-radial-stop3);
}

.custom-shape-divider-bottom-1767002198 {
  position: absolute;
  top: 225px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  z-index: -1;
}

.custom-shape-divider-bottom-1767002198 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 111px;
  transform: rotateY(180deg);
}

/* 波型SVGの色をテーマカラーで制御 */
.custom-shape-divider-bottom-1767002198 .shape-fill {
  fill: var(--svg-wave-fill, var(--primary-main, #4785FF));
  transition: fill 0.5s ease;
}

/* デフォルトテーマ */
:root {
  --svg-wave-fill: var(--primary-main, #4785FF);
}

/* オレンジテーマ */
[data-theme="orange"] {
  --svg-wave-fill: var(--primary-main, #EA580C);
}

/* ブルーテーマ */
[data-theme="blue"] {
  --svg-wave-fill: var(--primary-main, #2563EB);
}

/* パープルテーマ */
[data-theme="purple"] {
  --svg-wave-fill: var(--primary-main, #7C3AED);
}