/* ---------------------------
ダーク×赤系
--------------------------- */

body#DR01 {
    --Background: #0d0d1a;
    --ContentsBack: #1a1a2e;
    --NaviBack: #4e4e6e; 
    --Navi01: #ff2222;
    --Navi02: #b90000;
    --Text: #eeeeff;
    --CtaBack: #ee1919;
    --CtaText: #eeeeff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, #ffffff);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, #000000);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DR02 {
    --Background: #1a1515;
    --ContentsBack: #2b2424;
    --NaviBack: #6e5f5f; 
    --Navi01: #ff3333;
    --Navi02: #b90202;
    --Text: #f5f5f5;
    --CtaBack: #dd1919;
    --CtaText: #f5f5f5;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, #ffffff);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, #000000);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DR03 {
    --Background: #130d1a;
    --ContentsBack: #1e1826;
    --NaviBack: #5c4f6d; 
    --Navi01: #ff3333;
    --Navi02: #a00000;
    --Text: #f5f5f5;
    --CtaBack: #cc1111;
    --CtaText: #f5f5f5;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, #ffffff);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, #000000);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DR04 {
    --Background: #141414;
    --ContentsBack: #242424;
    --NaviBack: #6e6e6e; 
    --Navi01: #e62e2e;
    --Navi02: #880000;
    --Text: #f0f0f0;
    --CtaBack: #bb0000;
    --CtaText: #f0f0f0;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, #ffffff);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, #000000);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DR05 {
    --Background: #1f1b21;
    --ContentsBack: #2e2830;
    --NaviBack: #716a74; 
    --Navi01: #e63946;
    --Navi02: #770000;
    --Text: #fcfcfc;
    --CtaBack: #aa0000;
    --CtaText: #fcfcfc;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, #ffffff);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, #000000);
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ダーク×オレンジ系
--------------------------- */

body#DO01 {
    --Background: #1a1614;
    --ContentsBack: #282321;
    --NaviBack: #8f7d76; 
    --Navi01: #ff9933;
    --Navi02: #af5e0d;
    --Text: #f5f5f5;
    --CtaBack: #ff6600;
    --CtaText: #f5f5f5;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DO02 {
    --Background: #1b1d1a;
    --ContentsBack: #2a2d28;
    --NaviBack: #62695f; 
    --Navi01: #ff9933;
    --Navi02: #a35302;
    --Text: #f5f5f5;
    --CtaBack: #ee5f00;
    --CtaText: #f5f5f5;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DO03 {
    --Background: #1f1414;
    --ContentsBack: #2e2121;
    --NaviBack: #413030; 
    --Navi01: #964b00;
    --Navi02: #703700;
    --Text: #f5f5f5;
    --CtaBack: #b35300;
    --CtaText: #f5f5f5;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%); 
}

body#DO04 {
    --Background: #1c1514;
    --ContentsBack: #2c2321;
    --NaviBack: #3d3331; 
    --Navi01: #9b5a45;
    --Navi02: #41241a;
    --Text: #f5f5f5;
    --CtaBack: #773c2b;
    --CtaText: #f5f5f5;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DO05 {
    --Background: #050505;
    --ContentsBack: #141414;
    --NaviBack: #222222; 
    --Navi01: #b38661;
    --Navi02: #8a684b;
    --Text: #f5f5f5;
    --CtaBack: #755841;
    --CtaText: #f5f5f5;
	--CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
	--CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
  --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ダーク×イエロー系
--------------------------- */

body#DY01 {
    --Background: #1a1a1a;
    --ContentsBack: #282828;
    --NaviBack: #3a3a3a;
    --Navi01: #ffff66;
    --Navi02: #cccc00;
    --Text: #f5f5f5;
    --CtaBack: #ffb300;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DY02 {
    --Background: #121212;
    --ContentsBack: #1E1E1E;
    --NaviBack: #333333;
    --Navi01: #FFC107;
    --Navi02: #FFB300;
    --Text: #F0F0F0;
    --CtaBack: #ff9800;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DY03 {
    --Background: #181818;
    --ContentsBack: #242424;
    --NaviBack: #3A3A3A;
    --Navi01: #EEDD00;
    --Navi02: #D4CC00;
    --Text: #EDEDED;
    --CtaBack: #ffcc00;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DY04 {
    --Background: #202020;
    --ContentsBack: #2D2D2D;
    --NaviBack: #454545;
    --Navi01: #FFF176;
    --Navi02: #FFD54F;
    --Text: #F0F0F0;
    --CtaBack: #fbc02d;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DY05 {
    --Background: #141414;
    --ContentsBack: #212121;
    --NaviBack: #363636;
    --Navi01: #B8860B;
    --Navi02: #DAA520;
    --Text: #F2F2F2;
    --CtaBack: #c99700;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ダーク×グリーン系
--------------------------- */

body#DG01 {
    --Background: #1a1a1a;
    --ContentsBack: #282828;
    --NaviBack: #3a3a3a;
    --Navi01: #66ff66;
    --Navi02: #00cc00;
    --Text: #f5f5f5;
    --CtaBack: #2e7d32;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DG02 {
    --Background: #121212;
    --ContentsBack: #1E1E1E;
    --NaviBack: #333333;
    --Navi01: #00E676;
    --Navi02: #00C853;
    --Text: #F0F0F0;
    --CtaBack: #00b248;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DG03 {
    --Background: #151515;
    --ContentsBack: #222222;
    --NaviBack: #373737;
    --Navi01: #1DE9B6;
    --Navi02: #00BFA5;
    --Text: #F0F0F0;
    --CtaBack: #00838f;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DG04 {
    --Background: #1A1A1A;
    --ContentsBack: #262626;
    --NaviBack: #3B3B3B;
    --Navi01: #64FFDA;
    --Navi02: #A7FFEB;
    --Text: #F8F8F8;
    --CtaBack: #26a69a;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DG05 {
    --Background: #131313;
    --ContentsBack: #202020;
    --NaviBack: #353535;
    --Navi01: #009688;
    --Navi02: #00796B;
    --Text: #F2F2F2;
    --CtaBack: #00796b;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ダーク×ブルー系
--------------------------- */

body#DB01 {
    --Background: #1a1a1a;
    --ContentsBack: #282828;
    --NaviBack: #3a3a3a;
    --Navi01: #0066cc;
    --Navi02: #004c99;
    --Text: #f5f5f5;
    --CtaBack: #007bff;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DB02 {
    --Background: #101820;
    --ContentsBack: #1e2a35;
    --NaviBack: #2c3e50;
    --Navi01: #005f99;
    --Navi02: #004466;
    --Text: #e6f0fa;
    --CtaBack: #006bb3;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DB03 {
    --Background: #0f172a;
    --ContentsBack: #1e293b;
    --NaviBack: #334155;
    --Navi01: #2563eb;
    --Navi02: #1d4ed8;
    --Text: #f1f5f9;
    --CtaBack: #3b82f6;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DB04 {
    --Background: #141a26;
    --ContentsBack: #1f2833;
    --NaviBack: #2b3644;
    --Navi01: #006494;
    --Navi02: #003554;
    --Text: #edf6ff;
    --CtaBack: #0077b6;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DB05 {
    --Background: #111827;
    --ContentsBack: #1f2937;
    --NaviBack: #374151;
    --Navi01: #1e40af;
    --Navi02: #1e3a8a;
    --Text: #f3f4f6;
    --CtaBack: #2563eb;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ダーク×パープル系
--------------------------- */

body#DP01 {
    --Background: #1a1a1a;
    --ContentsBack: #282828;
    --NaviBack: #3a3a3a;
    --Navi01: #cc66ff;
    --Navi02: #9933cc;
    --Text: #f5f5f5;
    --CtaBack: #9900ff;
    --CtaText: #f5f5f5;
	--CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
	--CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
  --NaviBase: rgba(255, 255, 255, 30%);
}

body#DP02 {
    --Background: #121212;
    --ContentsBack: #232323;
    --NaviBack: #333333;
    --Navi01: #d28eff;
    --Navi02: #a64dff;
    --Text: #f5f5f5;
    --CtaBack: #8000ff;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DP03 {
    --Background: #0f0a1a;
    --ContentsBack: #1d1430;
    --NaviBack: #2e1f46;
    --Navi01: #bb86fc;
    --Navi02: #9a5de0;
    --Text: #f5f5ff;
    --CtaBack: #7c3aed;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DP04 {
    --Background: #191122;
    --ContentsBack: #24172e;
    --NaviBack: #332044;
    --Navi01: #be95ff;
    --Navi02: #8a3ffc;
    --Text: #f9f8ff;
    --CtaBack: #6929c4;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DP05 {
    --Background: #0d0814;
    --ContentsBack: #1a1324;
    --NaviBack: #281c36;
    --Navi01: #c77dff;
    --Navi02: #9d4edd;
    --Text: #f9f5ff;
    --CtaBack: #6f42c1;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ダーク×シアン系
--------------------------- */

body#DC01 {
    --Background: #1a1a1a;
    --ContentsBack: #282828;
    --NaviBack: #3a3a3a;
    --Navi01: #00ffff;
    --Navi02: #00cccc;
    --Text: #f5f5f5;
    --CtaBack: #00aaff;
    --CtaText: #ffffff; /* 修正 */
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DC02 {
    --Background: #0d0f12;
    --ContentsBack: #181c20;
    --NaviBack: #272b2f;
    --Navi01: #66ffff;
    --Navi02: #33cccc;
    --Text: #f8f8f8;
    --CtaBack: #0097a7;
    --CtaText: #ffffff; /* 維持 */
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DC03 {
    --Background: #101214;
    --ContentsBack: #1c2024;
    --NaviBack: #2a2f33;
    --Navi01: #00eaff;
    --Navi02: #00cfff;
    --Text: #f8f8f8;
    --CtaBack: #00b0ff;
    --CtaText: #ffffff; /* 修正 */
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DC04 {
    --Background: #131313;
    --ContentsBack: #1f1f1f;
    --NaviBack: #303030;
    --Navi01: #40e0d0;
    --Navi02: #00cccc;
    --Text: #f2f2f2;
    --CtaBack: #0099cc;
    --CtaText: #ffffff; /* 維持 */
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DC05 {
    --Background: #0c0c10;
    --ContentsBack: #181820;
    --NaviBack: #262630;
    --Navi01: #00f5ff;
    --Navi02: #00d4d4;
    --Text: #f5f5f5;
    --CtaBack: #00838f;
    --CtaText: #ffffff; /* 修正 */
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ダーク×マゼンタ系
--------------------------- */

body#DM01 {
    --Background: #121212;
    --ContentsBack: #1f1f1f;
    --NaviBack: #2d2d2d;
    --Navi01: #ff66cc;
    --Navi02: #cc3399;
    --Text: #f8f8f8;
    --CtaBack: #e91e63;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DM02 {
    --Background: #141018;
    --ContentsBack: #1f1824;
    --NaviBack: #2a2330;
    --Navi01: #ff66ff;
    --Navi02: #cc33cc;
    --Text: #f5f5f5;
    --CtaBack: #d81b60;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DM03 {
    --Background: #181018;
    --ContentsBack: #241824;
    --NaviBack: #312031;
    --Navi01: #ff66b2;
    --Navi02: #cc297a;
    --Text: #f8f8f8;
    --CtaBack: #c2185b;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DM04 {
    --Background: #120e14;
    --ContentsBack: #1f1822;
    --NaviBack: #2b202d;
    --Navi01: #ff99ff;
    --Navi02: #cc66cc;
    --Text: #f9f9f9;
    --CtaBack: #e91e63;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#DM05 {
    --Background: #0f0a0f;
    --ContentsBack: #1a121a;
    --NaviBack: #281828;
    --Navi01: #ff33ff;
    --Navi02: #cc00cc;
    --Text: #f5f5f5;
    --CtaBack: #f50057;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark:  color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ホワイト×赤系
--------------------------- */

body#WR01 {
    --Background: #f5f5f5;
    --ContentsBack: #ffffff;
    --NaviBack: #e0e0e0;
    --Navi01: #ff3333;
    --Navi02: #7c0c0c;
    --Text: #FFFFFF;
    --CtaBack: #e60000;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WR02 {
    --Background: #f0f0f0;
    --ContentsBack: #ffffff;
    --NaviBack: #e5e5e5;
    --Navi01: #ff5555;
    --Navi02: #b12c2c;
    --Text: #F0F0F0;
    --CtaBack: #ff2222;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WR03 {
    --Background: #ffffff;
    --ContentsBack: #fdfdfd;
    --NaviBack: #e0e0e0;
    --Navi01: #ff4444;
    --Navi02: #900000;
    --Text: #FFFFFF;
    --CtaBack: #d50000;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WR04 {
    --Background: #f4f4f4;
    --ContentsBack: #ffffff;
    --NaviBack: #e2e2e2;
    --Navi01: #ff4444;
    --Navi02: #cc1111;
    --Text: #F5F5F5; 
    --CtaBack: #ff0000;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WR05 {
    --Background: #fcfcfc;
    --ContentsBack: #ffffff;
    --NaviBack: #e0e0e0;
    --Navi01: #ff4444;
    --Navi02: #bb0000;
    --Text: #F0F0F0; 
    --CtaBack: #d32f2f;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black); 
    --NaviBase: rgba(255, 255, 255, 30%);
}


/* ---------------------------
ホワイト×オレンジ系
--------------------------- */

body#WO01 {
    --Background: #f5f5f5;
    --ContentsBack: #ffffff;
    --NaviBack: #e0e0e0;
    --Navi01: #ff9933;
    --Navi02: #ff6600;
    --Text: #FFFFFF; 
    --CtaBack: #ff6600;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WO02 {
    --Background: #f9f9f9;
    --ContentsBack: #ffffff;
    --NaviBack: #d9d9d9;
    --Navi01: #ffb84d;
    --Navi02: #ff6600;
    --Text: #F8F8F8; 
    --CtaBack: #ff9933;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WO03 {
    --Background: #f4f4f4;
    --ContentsBack: #ffffff;
    --NaviBack: #e2e2e2;
    --Navi01: #ffad33;
    --Navi02: #ff6600;
    --Text: #F5F5F5; 
    --CtaBack: #ff751a;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WO04 {
    --Background: #f6f6f6;
    --ContentsBack: #ffffff;
    --NaviBack: #e3e3e3;
    --Navi01: #ff9933;
    --Navi02: #ff6600;
    --Text: #F0F0F0; 
    --CtaBack: #ff6600;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WO05 {
    --Background: #fcfcfc;
    --ContentsBack: #ffffff;
    --NaviBack: #e0e0e0;
    --Navi01: #ff9933;
    --Navi02: #ff6600;
    --Text: #F0F0F0; 
    --CtaBack: #ff6600;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ホワイト×イエロー系
--------------------------- */

body#WY01 {
    --Background: #f5f5f5;
    --ContentsBack: #ffffff;
    --NaviBack: #e0e0e0;
    --Navi01: #ffeb3b;
    --Navi02: #fdd835;
    --Text: #FFFFFF; 
    --CtaBack: #f9a825;
    --CtaText: #ffffff; 
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WY02 {
    --Background: #fafafa;
    --ContentsBack: #ffffff;
    --NaviBack: #dcdcdc;
    --Navi01: #fff176;
    --Navi02: #ffee58;
    --Text: #F5F5F5; 
    --CtaBack: #fbc02d;
    --CtaText: #ffffff; 
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WY03 {
    --Background: #f9f9f9;
    --ContentsBack: #ffffff;
    --NaviBack: #d9d9d9;
    --Navi01: #fff9c4;
    --Navi02: #fff59d;
    --Text: #F8F8F8;
    --CtaBack: #fbc02d;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WY04 {
    --Background: #f4f4f4;
    --ContentsBack: #ffffff;
    --NaviBack: #e2e2e2;
    --Navi01: #fff176;
    --Navi02: #ffee58;
    --Text: #F5F5F5; 
    --CtaBack: #fdd835; 
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WY05 {
    --Background: #f7f7f7;
    --ContentsBack: #ffffff;
    --NaviBack: #dedede;
    --Navi01: #fff176;
    --Navi02: #ffeb3b;
    --Text: #FFFFFF;
    --CtaBack: #ffeb3b;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ホワイト×グリーン系
--------------------------- */

body#WG01 {
    --Background: #f5f5f5;
    --ContentsBack: #ffffff;
    --NaviBack: #e0e0e0;
    --Navi01: #66bb66;
    --Navi02: #339933;
    --Text: #333333;
    --CtaBack: #339933;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WG02 {
    --Background: #f9f9f9;
    --ContentsBack: #ffffff;
    --NaviBack: #d9d9d9;
    --Navi01: #a5d6a7;
    --Navi02: #66bb6a;
    --Text: #222222;
    --CtaBack: #4caf50;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WG03 {
    --Background: #f6f6f6;
    --ContentsBack: #ffffff;
    --NaviBack: #e3e3e3;
    --Navi01: #9ccc65;
    --Navi02: #7cb342;
    --Text: #333333;
    --CtaBack: #7cb342;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WG04 {
    --Background: #f7f7f7;
    --ContentsBack: #ffffff;
    --NaviBack: #dedede;
    --Navi01: #8bc34a;
    --Navi02: #689f38;
    --Text: #222222;
    --CtaBack: #558b2f;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WG05 {
    --Background: #fcfcfc;
    --ContentsBack: #ffffff;
    --NaviBack: #e0e0e0;
    --Navi01: #76ff03;
    --Navi02: #64dd17;
    --Text: #222222;
    --CtaBack: #4caf50;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ホワイト×ブルー系
--------------------------- */

body#WB01 {
    --Background: #f5f5f5;
    --ContentsBack: #ffffff;
    --NaviBack: #e0e0e0;
    --Navi01: #66ccff;
    --Navi02: #3399ff;
    --Text: #333333;
    --CtaBack: #3399ff;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WB02 {
    --Background: #fafafa;
    --ContentsBack: #ffffff;
    --NaviBack: #dcdcdc;
    --Navi01: #80d4ff;
    --Navi02: #4db6ff;
    --Text: #222222;
    --CtaBack: #4db6ff;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WB03 {
    --Background: #f0f0f0;
    --ContentsBack: #ffffff;
    --NaviBack: #e5e5e5;
    --Navi01: #99ccff;
    --Navi02: #66b3ff;
    --Text: #333333;
    --CtaBack: #3399ff;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WB04 {
    --Background: #ffffff;
    --ContentsBack: #fdfdfd;
    --NaviBack: #e0e0e0;
    --Navi01: #66ccff;
    --Navi02: #3399ff;
    --Text: #333333;
    --CtaBack: #007aff;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WB05 {
    --Background: #f9f9f9;
    --ContentsBack: #ffffff;
    --NaviBack: #d9d9d9;
    --Navi01: #33ccff;
    --Navi02: #00bfff;
    --Text: #222222;
    --CtaBack: #0099ff;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ホワイト×パープル系
--------------------------- */

body#WP01 {
    --Background: #f5f5f5;
    --ContentsBack: #ffffff;
    --NaviBack: #e0e0e0;
    --Navi01: #cc99ff;
    --Navi02: #9933cc;
    --Text: #333333;
    --CtaBack: #9933cc;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WP02 {
    --Background: #fafafa;
    --ContentsBack: #ffffff;
    --NaviBack: #dcdcdc;
    --Navi01: #bb88ff;
    --Navi02: #8855cc;
    --Text: #222222;
    --CtaBack: #8855cc;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WP03 {
    --Background: #f0f0f0;
    --ContentsBack: #ffffff;
    --NaviBack: #e5e5e5;
    --Navi01: #aa66ff;
    --Navi02: #7733cc;
    --Text: #333333;
    --CtaBack: #7733cc;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WP04 {
    --Background: #ffffff;
    --ContentsBack: #fdfdfd;
    --NaviBack: #e0e0e0;
    --Navi01: #cc66ff;
    --Navi02: #9900cc;
    --Text: #333333;
    --CtaBack: #9900cc;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WP05 {
    --Background: #f9f9f9;
    --ContentsBack: #ffffff;
    --NaviBack: #d9d9d9;
    --Navi01: #b366ff;
    --Navi02: #9933ff;
    --Text: #222222;
    --CtaBack: #9933ff;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ホワイト×シアン系
--------------------------- */

body#WC01 {
    --Background: #f5f5f5;
    --ContentsBack: #ffffff;
    --NaviBack: #e0e0e0;
    --Navi01: #66ffff;
    --Navi02: #33cccc;
    --Text: #333333;
    --CtaBack: #33cccc;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WC02 {
    --Background: #fafafa;
    --ContentsBack: #ffffff;
    --NaviBack: #dcdcdc;
    --Navi01: #33ffff;
    --Navi02: #00cccc;
    --Text: #222222;
    --CtaBack: #00cccc;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WC03 {
    --Background: #f0f0f0;
    --ContentsBack: #ffffff;
    --NaviBack: #e5e5e5;
    --Navi01: #00ffff;
    --Navi02: #00bcd4;
    --Text: #333333;
    --CtaBack: #00bcd4;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WC04 {
    --Background: #ffffff;
    --ContentsBack: #fdfdfd;
    --NaviBack: #e0e0e0;
    --Navi01: #33cccc;
    --Navi02: #0099aa;
    --Text: #333333;
    --CtaBack: #0099aa;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WC05 {
    --Background: #f9f9f9;
    --ContentsBack: #ffffff;
    --NaviBack: #d9d9d9;
    --Navi01: #00ffff;
    --Navi02: #00bfff;
    --Text: #222222;
    --CtaBack: #00bfff;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

/* ---------------------------
ホワイト×マゼンタ系
--------------------------- */

body#WM01 {
    --Background: #f5f5f5;
    --ContentsBack: #ffffff;
    --NaviBack: #e0e0e0;
    --Navi01: #ff66cc;
    --Navi02: #cc3399;
    --Text: #333333;
    --CtaBack: #cc3399;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WM02 {
    --Background: #fafafa;
    --ContentsBack: #ffffff;
    --NaviBack: #dcdcdc;
    --Navi01: #ff33cc;
    --Navi02: #cc0099;
    --Text: #222222;
    --CtaBack: #cc0099;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WM03 {
    --Background: #f0f0f0;
    --ContentsBack: #ffffff;
    --NaviBack: #e5e5e5;
    --Navi01: #ff99cc;
    --Navi02: #cc66aa;
    --Text: #333333;
    --CtaBack: #cc66aa;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WM04 {
    --Background: #f5f5f5;
    --ContentsBack: #ffffff;
    --NaviBack: #e0e0e0;
    --Navi01: #ff66bb;
    --Navi02: #cc3399;
    --Text: #333333;
    --CtaBack: #cc3399;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}

body#WM05 {
    --Background: #fafafa;
    --ContentsBack: #ffffff;
    --NaviBack: #dcdcdc;
    --Navi01: #ff33aa;
    --Navi02: #cc0088;
    --Text: #222222;
    --CtaBack: #cc0088;
    --CtaText: #ffffff;
    --CtaBack-light: color-mix(in srgb, var(--CtaBack) 70%, white);
    --CtaBack-dark: color-mix(in srgb, var(--CtaBack) 80%, black);
    --NaviBase: rgba(255, 255, 255, 30%);
}