@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);


* {
  font-family: "Source Han Sans JP","Noto Sans JP", sans-serif, "ヒラギノ角ゴシック", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 20px;
  -webkit-print-color-adjust: exact;

  /* ============================================= */
  /* ★ ライトモード（デフォルト）のカラー設定 ★
  /* ============================================= */
  --Page-BG: #F3F6F8; /* 背景 */
  --White: #FFFFFF99; /* コンテナ色 */
  --Blue-900: #3292CF; /* プルダウンの囲い等 */
  --Blue-700: #58A7D9; /* したの方医院ページのリンク色 */
  --Blue-200: #EEF8FF; /* ? */
  --Black-900: #3F3F3F;/* 基本文字色 */
  --Black-700: #606060;/* 小さい文字色 */
  --Black-500: #8a8a8a;/* 総売上等の大きい数値囲い */
  --Black-501:#B0B0B0; /* インジケータ通常 */
  --Black-502:#10A6A0;/* インジケータアクティブ */
  --Black-503:#8c8c8c; /* インジケータ通常文字 */
  --Black-200: #D9D9D9;
  --Black-180: #e8e8e8;
  --Black-150: #f0f0f0;
  --Black-100: #f7f7f7;/* 数値（小）コンテナ背景 */
  --Gray-BG-900: #EEE;
  --Gray-BG-700: #f8f8f8;
  --Gray-BG-500: #fcfcfc;
  --Error-900: #FF5C00;
  --header-bg: #FFFFFF19;
  --table-bg:#E2ECEC;

  --grad-01:#10A6A0;
  --grad-02:#248EAE;
  --grad-03:#3375A1;
  --grad-04:#3E5A9B;
  --grad-wh:#E1E1E1;
  --grad-bl:#243762;

  --indicator-BG:rgba(255, 255, 255, 0.70);

  /*アラート含む*/
  --Error-700: #FAB400;
  --GPT-Grad: linear-gradient(95deg, #09B495 -20%, #3237AF 100%);

  /* SPカラー */
  --SP_Grad: linear-gradient(168deg, #109582 8%, #33A3EA 100%);

  /* 円グラフカラー*/
  --Graph-Blue: #1C81C1;
  --Graph-Green-900: #0F7963;
  --Graph-Green-700: #0A9D7F;
  --Graph-Gray: #E1E1E1;

  /* その他カラー */
  --Men: #176288;
  --Women: #C65400;

  /* シャドウ */
  --Field-Shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);

  /* 背景のブラーカラー */
  --Page-BG-Blur: radial-gradient(50% 50% at 50% 50%, #0AC1BA 0%, #B0D2FF 35%);

  /* モーダル */
  --Modal-BG-Color: rgba(237, 237, 237, .15);   /* モーダル背景カラー */
  --Modal-BG-Blur: blur(10px);   /* モーダル背景ブラー */
  --Modal: rgba(255, 255, 255, 0.6);   /* モーダル背景カラー */

  /* 目標値達成・未達のアイコン設定 */
  --icon-shape-achieved: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3cpath d='M7.00019 10.0766L4.57936 11.535C4.47241 11.603 4.36061 11.6322 4.24394 11.6225C4.12728 11.6127 4.02519 11.5738 3.93769 11.5058C3.85019 11.4377 3.78214 11.3528 3.73353 11.2509C3.68491 11.149 3.67519 11.0347 3.70436 10.9079L4.34603 8.15163L2.20228 6.29954C2.10505 6.21204 2.04439 6.11229 2.02028 6.00029C1.99616 5.88829 2.00336 5.77902 2.04186 5.67246C2.08036 5.56591 2.13869 5.47841 2.21686 5.40996C2.29503 5.34152 2.40197 5.29777 2.53769 5.27871L5.36686 5.03079L6.46061 2.43496C6.50922 2.31829 6.58466 2.23079 6.68694 2.17246C6.78922 2.11413 6.89364 2.08496 7.00019 2.08496C7.10675 2.08496 7.21116 2.11413 7.31344 2.17246C7.41572 2.23079 7.49116 2.31829 7.53978 2.43496L8.63353 5.03079L11.4627 5.27871C11.5988 5.29816 11.7057 5.34191 11.7835 5.40996C11.8613 5.47802 11.9196 5.56552 11.9585 5.67246C11.9974 5.77941 12.0048 5.88888 11.9807 6.00088C11.9566 6.11288 11.8957 6.21243 11.7981 6.29954L9.65436 8.15163L10.296 10.9079C10.3252 11.0343 10.3155 11.1486 10.2669 11.2509C10.2182 11.3532 10.1502 11.4381 10.0627 11.5058C9.97519 11.5735 9.87311 11.6123 9.75644 11.6225C9.63978 11.6326 9.52797 11.6034 9.42103 11.535L7.00019 10.0766Z'/%3e%3c/svg%3e");
  --icon-shape-alert: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3cpath d='M6.99984 9.91699C7.16512 9.91699 7.30375 9.86099 7.41575 9.74899C7.52775 9.63699 7.58356 9.49855 7.58317 9.33366C7.58278 9.16877 7.52678 9.03032 7.41517 8.91832C7.30356 8.80632 7.16512 8.75032 6.99984 8.75032C6.83456 8.75032 6.69612 8.80632 6.5845 8.91832C6.47289 9.03032 6.41689 9.16877 6.4165 9.33366C6.41612 9.49855 6.47212 9.63719 6.5845 9.74957C6.69689 9.86196 6.83534 9.91777 6.99984 9.91699ZM6.4165 7.58366H7.58317V4.08366H6.4165V7.58366ZM6.99984 12.8337C6.19289 12.8337 5.43456 12.6804 4.72484 12.374C4.01512 12.0675 3.39775 11.652 2.87275 11.1274C2.34775 10.6028 1.93223 9.98544 1.62617 9.27532C1.32012 8.56521 1.16689 7.80688 1.1665 7.00032C1.16612 6.19377 1.31934 5.43544 1.62617 4.72533C1.933 4.01521 2.34853 3.39785 2.87275 2.87324C3.39698 2.34863 4.01434 1.9331 4.72484 1.62666C5.43534 1.32021 6.19367 1.16699 6.99984 1.16699C7.806 1.16699 8.56434 1.32021 9.27484 1.62666C9.98534 1.9331 10.6027 2.34863 11.1269 2.87324C11.6511 3.39785 12.0669 4.01521 12.3741 4.72533C12.6813 5.43544 12.8343 6.19377 12.8332 7.00032C12.832 7.80688 12.6788 8.56521 12.3735 9.27532C12.0682 9.98544 11.6527 10.6028 11.1269 11.1274C10.6011 11.652 9.98378 12.0677 9.27484 12.3746C8.56589 12.6814 7.80756 12.8344 6.99984 12.8337ZM6.99984 11.667C8.30262 11.667 9.40609 11.2149 10.3103 10.3107C11.2144 9.40657 11.6665 8.3031 11.6665 7.00032C11.6665 5.69755 11.2144 4.59407 10.3103 3.68991C9.40609 2.78574 8.30262 2.33366 6.99984 2.33366C5.69706 2.33366 4.59359 2.78574 3.68942 3.68991C2.78525 4.59407 2.33317 5.69755 2.33317 7.00032C2.33317 8.3031 2.78525 9.40657 3.68942 10.3107C4.59359 11.2149 5.69706 11.667 6.99984 11.667Z'/%3e%3c/svg%3e");

  /* 目標値達成・未達のアイコンの色 */
  --icon-color-achieved: #10A6A0;
  --icon-color-alert: #C65400;
}

/* ▼▼▼ 追加点：ダークモード用のスタイル ▼▼▼ */
body[data-theme="dark"] *{
  /* ============================================= */
  /* ★ ダークモードのカラー設定 ★
  /* ============================================= */
  --Page-BG: #121212; /* 背景 */
  --White: #ffffff0f; /* コンテナ色 */
  --Blue-900: #58a8d900; /* プルダウンの囲い等 */
  --Blue-700: #87C4ED; /* したの方医院ページのリンク色 */
  --Blue-200: #2a3a4d; /* ? */
  --Black-900: #FFFFFF;/* 基本文字色 */
  --Black-700: #FFFFFF;/* 小さい文字色 */
  --Black-500: #555555;/* 総売上等の大きい数値囲い */
  --Black-501:#ffffff; /* インジケータ通常 */
  --Black-502:#46E06A;/* インジケータアクティブ */
  --Black-503:#ffffff; /* インジケータ通常文字 */
  --Black-200: #606060;
  --Black-180: #3a3a3a;
  --Black-150: #2e2e2e;
  --Black-100: #212121;/* 数値（小）コンテナ背景 */
  --Gray-BG-900: #2c2c2c;
  --Gray-BG-700: #242424;
  --Gray-BG-500: #1f1f1f;
  --Error-900: #FF8A65;
  --header-bg: #00000080;
  --table-bg:rgba(255, 255, 255, 0.06);


  --grad-01:#46E06A;
  --grad-02:#34D073;
  --grad-03:#23C07E;
  --grad-04:#11B085;
  --grad-wh:#424242;
  --grad-bl:#E0E0E0;

  --indicator-BG:rgba(0, 0, 0, 0.70);;

  /*アラート含む*/
  --Error-700: #FFCA28;
  --GPT-Grad: linear-gradient(95deg, #46E06A -20%, #5C6BC0 100%);

  /* SPカラー */
  --SP_Grad: linear-gradient(168deg, #4DB6AC 8%, #4FC3F7 100%);

  /* 円グラフカラー*/
  --Graph-Blue: #4FC3F7;
  --Graph-Green-900: #4DB6AC;
  --Graph-Green-700: #81C784;
  --Graph-Gray: #424242;

  /* その他カラー */
  --Men: #64B5F6;
  --Women: #FF8A65;

  /* シャドウ */
  --Field-Shadow: 0px 0px 20px 0px #0000000D;

    /* 背景のブラーカラー */
    --Page-BG-Blur: radial-gradient(50% 50% at 50% 50%, rgba(164, 255, 185, 0.40) 0%, rgba(0, 199, 46, 0.40) 100%);

  
  /* モーダル */
  --Modal-BG-Color: rgba(0, 0, 0, .25);   /* モーダル背景カラー */
  --Modal-BG-Blur: blur(15px);   /* モーダル背景ブラー */
  --Modal: rgba(255, 255, 255, 0.3);   /* モーダル背景カラー */
  --Modal-btn-Color: rgba(255, 255, 255, 0.15); /* モーダルボタンカラー */

  /* 目標値達成・未達のアイコンの色 */
  --icon-color-achieved: #46E06A;  /* #87C4ED */
  --icon-color-alert: #00A18E; /* #FF8A65 */
}




body[data-partner="db"] *{

  /* ============================================= */
  /* ★ DoctorBookのカラー設定 ★
  /* ============================================= */
  --Page-BG: #F3F6F8; /* 背景 */
  --White: #FFFFFF99; /* コンテナ色 */
  --Blue-900: #3292CF; /* プルダウンの囲い等 */
  --Blue-700: #58A7D9; /* したの方医院ページのリンク色 */
  --Blue-200: #EEF8FF; /* ? */
  --Black-900: #363636;/* 基本文字色 */
  --Black-700: #595959;/* 小さい文字色*/
  --Black-500: #8a8a8a;/* 総売上等の大きい数値囲い */
  --Black-501:#A3A3A3; /* インジケータ通常 */
  --Black-502:#23A176;/* インジケータアクティブ */
  --Black-503:#8c8c8c; /* インジケータ通常文字 */
  --Black-200: #DADADA;
  --Black-180: #e8e8e8;
  --Black-150: #f0f0f0;
  --Black-100: #f7f7f7;/* 数値（小）コンテナ背景 */
  --Gray-BG-900: #EEE;
  --Gray-BG-700: #f8f8f8;
  --Gray-BG-500: #fcfcfc;
  --Error-900: #FF7300;
  --header-bg: #FFFFFF19;
  --table-bg:#E2ECE6;

  --grad-01:#23A176;
  --grad-02:#239BA1;
  --grad-03:#266CA8;
  --grad-04:#495B9F;
  --grad-wh:#E1E1E1;
  --grad-bl:#243762;

  --indicator-BG:rgba(255, 255, 255, 0.70);

  /*アラート含む*/
  --Error-700: #FFC736;
  --GPT-Grad: linear-gradient(95deg, #09B495 -20%, #3237AF 100%);

  /* SPカラー */
  --SP_Grad: linear-gradient(168deg, #109582 8%, #33A3EA 100%);

  /* 円グラフカラー*/
  --Graph-Blue: #1C81C1;
  --Graph-Green-900: #0F7963;
  --Graph-Green-700: #0A9D7F;
  --Graph-Gray: #E1E1E1;

  /* その他カラー */
  --Men: #176288;
  --Women: #C65400;

  /* シャドウ */
  --Field-Shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);

  /* 背景のブラーカラー */
  --Page-BG-Blur: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, #ffffff 35%);

  /* モーダル */
  --Modal-BG-Color: rgba(237, 237, 237, .15);   /* モーダル背景カラー */
  --Modal-BG-Blur: blur(10px);   /* モーダル背景ブラー */
  --Modal: rgba(255, 255, 255, 0.6);   /* モーダル背景カラー */

  /* 目標値達成・未達のアイコン設定 */
  --icon-shape-achieved: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3cpath d='M7.00019 10.0766L4.57936 11.535C4.47241 11.603 4.36061 11.6322 4.24394 11.6225C4.12728 11.6127 4.02519 11.5738 3.93769 11.5058C3.85019 11.4377 3.78214 11.3528 3.73353 11.2509C3.68491 11.149 3.67519 11.0347 3.70436 10.9079L4.34603 8.15163L2.20228 6.29954C2.10505 6.21204 2.04439 6.11229 2.02028 6.00029C1.99616 5.88829 2.00336 5.77902 2.04186 5.67246C2.08036 5.56591 2.13869 5.47841 2.21686 5.40996C2.29503 5.34152 2.40197 5.29777 2.53769 5.27871L5.36686 5.03079L6.46061 2.43496C6.50922 2.31829 6.58466 2.23079 6.68694 2.17246C6.78922 2.11413 6.89364 2.08496 7.00019 2.08496C7.10675 2.08496 7.21116 2.11413 7.31344 2.17246C7.41572 2.23079 7.49116 2.31829 7.53978 2.43496L8.63353 5.03079L11.4627 5.27871C11.5988 5.29816 11.7057 5.34191 11.7835 5.40996C11.8613 5.47802 11.9196 5.56552 11.9585 5.67246C11.9974 5.77941 12.0048 5.88888 11.9807 6.00088C11.9566 6.11288 11.8957 6.21243 11.7981 6.29954L9.65436 8.15163L10.296 10.9079C10.3252 11.0343 10.3155 11.1486 10.2669 11.2509C10.2182 11.3532 10.1502 11.4381 10.0627 11.5058C9.97519 11.5735 9.87311 11.6123 9.75644 11.6225C9.63978 11.6326 9.52797 11.6034 9.42103 11.535L7.00019 10.0766Z'/%3e%3c/svg%3e");
  --icon-shape-alert: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3cpath d='M6.99984 9.91699C7.16512 9.91699 7.30375 9.86099 7.41575 9.74899C7.52775 9.63699 7.58356 9.49855 7.58317 9.33366C7.58278 9.16877 7.52678 9.03032 7.41517 8.91832C7.30356 8.80632 7.16512 8.75032 6.99984 8.75032C6.83456 8.75032 6.69612 8.80632 6.5845 8.91832C6.47289 9.03032 6.41689 9.16877 6.4165 9.33366C6.41612 9.49855 6.47212 9.63719 6.5845 9.74957C6.69689 9.86196 6.83534 9.91777 6.99984 9.91699ZM6.4165 7.58366H7.58317V4.08366H6.4165V7.58366ZM6.99984 12.8337C6.19289 12.8337 5.43456 12.6804 4.72484 12.374C4.01512 12.0675 3.39775 11.652 2.87275 11.1274C2.34775 10.6028 1.93223 9.98544 1.62617 9.27532C1.32012 8.56521 1.16689 7.80688 1.1665 7.00032C1.16612 6.19377 1.31934 5.43544 1.62617 4.72533C1.933 4.01521 2.34853 3.39785 2.87275 2.87324C3.39698 2.34863 4.01434 1.9331 4.72484 1.62666C5.43534 1.32021 6.19367 1.16699 6.99984 1.16699C7.806 1.16699 8.56434 1.32021 9.27484 1.62666C9.98534 1.9331 10.6027 2.34863 11.1269 2.87324C11.6511 3.39785 12.0669 4.01521 12.3741 4.72533C12.6813 5.43544 12.8343 6.19377 12.8332 7.00032C12.832 7.80688 12.6788 8.56521 12.3735 9.27532C12.0682 9.98544 11.6527 10.6028 11.1269 11.1274C10.6011 11.652 9.98378 12.0677 9.27484 12.3746C8.56589 12.6814 7.80756 12.8344 6.99984 12.8337ZM6.99984 11.667C8.30262 11.667 9.40609 11.2149 10.3103 10.3107C11.2144 9.40657 11.6665 8.3031 11.6665 7.00032C11.6665 5.69755 11.2144 4.59407 10.3103 3.68991C9.40609 2.78574 8.30262 2.33366 6.99984 2.33366C5.69706 2.33366 4.59359 2.78574 3.68942 3.68991C2.78525 4.59407 2.33317 5.69755 2.33317 7.00032C2.33317 8.3031 2.78525 9.40657 3.68942 10.3107C4.59359 11.2149 5.69706 11.667 6.99984 11.667Z'/%3e%3c/svg%3e");

  /* 目標値達成・未達のアイコンの色 */
  --icon-color-achieved: #10A6A0;
  --icon-color-alert: #C65400;
}

/* ▼▼▼ 追加点：ダークモード用のスタイル ▼▼▼ */
body[data-partner="db"][data-theme="dark"] *{
  /* ============================================= */
  /* ★ ダークモードのカラー設定 ★
  /* ============================================= */
  --Page-BG: #121212; /* 背景 */
  --White: #ffffff0f; /* コンテナ色 */
  --Blue-900: #58a8d900; /* プルダウンの囲い等 */
  --Blue-700: #87C4ED; /* したの方医院ページのリンク色 */
  --Blue-200: #2a3a4d; /* ? */
  --Black-900: #FFFFFF;/* 基本文字色 */
  --Black-700: #FFFFFF;/* 小さい文字色 */
  --Black-500: #555555;/* 総売上等の大きい数値囲い */
  --Black-501:#ffffff; /* インジケータ通常 */
  --Black-502:#46E06A;/* インジケータアクティブ */
  --Black-503:#ffffff; /* インジケータ通常文字 */
  --Black-200: #606060;
  --Black-180: #3a3a3a;
  --Black-150: #2e2e2e;
  --Black-100: #212121;/* 数値（小）コンテナ背景 */
  --Gray-BG-900: #2c2c2c;
  --Gray-BG-700: #242424;
  --Gray-BG-500: #1f1f1f;
  --Error-900: #FF8A65;
  --header-bg: #00000080;
  --table-bg:rgba(255, 255, 255, 0.06);


  --grad-01:#46E06A;
  --grad-02:#34D073;
  --grad-03:#23C07E;
  --grad-04:#11B085;
  --grad-wh:#424242;
  --grad-bl:#E0E0E0;

  --indicator-BG:rgba(0, 0, 0, 0.70);;

  /*アラート含む*/
  --Error-700: #FFCA28;
  --GPT-Grad: linear-gradient(95deg, #46E06A -20%, #5C6BC0 100%);

  /* SPカラー */
  --SP_Grad: linear-gradient(168deg, #4DB6AC 8%, #4FC3F7 100%);

  /* 円グラフカラー*/
  --Graph-Blue: #4FC3F7;
  --Graph-Green-900: #4DB6AC;
  --Graph-Green-700: #81C784;
  --Graph-Gray: #424242;

  /* その他カラー */
  --Men: #64B5F6;
  --Women: #FF8A65;

  /* シャドウ */
  --Field-Shadow: 0px 0px 20px 0px #0000000D;

  /* 背景のブラーカラー */
  --Page-BG-Blur: radial-gradient(50% 50% at 50% 50%, #000000 0%, #000000 100%);

  
  /* モーダル */
  --Modal-BG-Color: rgba(0, 0, 0, .25);   /* モーダル背景カラー */
  --Modal-BG-Blur: blur(15px);   /* モーダル背景ブラー */
  --Modal: rgba(255, 255, 255, 0.3);   /* モーダル背景カラー */
  --Modal-btn-Color: rgba(255, 255, 255, 0.15); /* モーダルボタンカラー */

  /* 目標値達成・未達のアイコンの色 */
  --icon-color-achieved: #46E06A;  /* #87C4ED */
  --icon-color-alert: #00A18E; /* #FF8A65 */
}


/* 呼び出し元のページで設定されている可能性があるため、
   ヘッダー部品側ではcolorの指定は削除するのが安全です。 */
* {
  color: var(--Black-900);
}

.num {
  font-family:  "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic","ヒラギノ角ゴシック";
}

body {
  position: relative;
  margin: 0;
  background-color: var(--Page-BG);
  min-height: 100vh;
}

main,
main.okr_main.detail {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* margin: 0; */
  padding: 110px 90px 90px 40px;
  min-height: calc(100vh - 190px);
}

main.clinic,
main.okr_main{
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0;
  margin-left: 240px;
  padding: 149px 20px 80px;
  width: calc(100% - 280px);
}

main.sp {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  margin-left: 0px;
  padding: 16px;
  width: calc(100% - 32px);
  min-height: unset;
  margin-top: 141px;
}

/* 初回ログイン時 */
main.first_login {
  margin-left: auto;
  margin-right: auto;
  padding: 40px 20px 90px 20px;
  max-width: 750px;
  width: fit-content;
  min-height: calc(100vh - 210px);
}


h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
.h1 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 100%;
}

h2,
.h2 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 100%;
}

label,
h3,
.h3 {
  font-size: .85rem;
  font-weight: 700;
  line-height: 100%;
  padding: 0;
}

h4,
.h4 {
  font-size: .75rem;
  font-weight: 500;
  line-height: 1rem;
  height: 1rem;
  width: fit-content;
  display: grid;
  align-content: center;
  text-align: center;
}

p,
.p,
option select {
  font-size: .7rem;
  font-weight: 400;
  line-height: 100%;
}

p.bold,
.p.bold {
  font-size: .7rem;
  font-weight: 500;
}

p.num.large,
.p.num.large {
  font-size: 1.2rem;
  font-weight: 700;
}

p.num.medium,
.p.num.medium {
  font-size: .8rem;
  font-weight: 700;
}

p.num.small,
.p.num.small {
  font-size: .6rem;
  font-weight: 700;
}

span {
  line-height: 100%;
}

.unit.large {
  font-size: .9rem;
  font-weight: 500;
}

.unit.medium {
  font-size: .7rem;
  font-weight: 500;
}

.unit.small,
.table_p,
.p_small {
  font-size: .55rem;
  font-weight: 400;
}

.table_p {
  width: 44px;
}

.content_title{
  padding: 0 0 0 10px;
  display: flex;
  justify-content: space-between;
}

/* フッター */
footer:not(:has(.sp)) {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  width:100%;
  /* width: calc(100% - 280px); */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0;
  margin-top: 10px;
  padding: 20px;
  justify-content: center;
  align-items: center;
}

footer:not(:has(.sp)) p {
  font-size: .6rem;
  font-weight: 400;
  text-align: center;
  line-height: 1rem;
}


/* スマホ　フッター */
footer.sp {
  position: relative;
  margin: 0;
  display: flex;
  width: 100%;
  padding: 10px 0px;
  justify-content: center;
  align-items: center;
}

footer.sp p {
  color: var(--White);
  text-align: center;
  font-size: .5rem;
  font-weight: 300;
  line-height: 150%;
}

/* 初回ログイン時 */
main.first_login + footer{
  width: calc(100% - 40px);
  margin-left: 0px;
}


/* ================================= */
/* 色クラス  */
/* ================================= */
.error_red_color{
  color: var(--Error-900);
}

.error_yellow_color{
  color: var(--Error-700);
}

/* 総売上 */
section:first-child:has(.fields.value) .total_c {
  color: #1C81C1;
}

/* 保険売上 */
section:first-child:has(.fields.value) .insu_c {
  color: #009818;
}

/* 自費売上 */
section:first-child:has(.fields.value) .self_c {
  color: #CE3D1D;
}

/* ユーザー数 */
.user_c {
  color: var(--Men);
}

/* ユーザーベースCV数 */
.cv_c {
  color: #9EDBF7;
}

/* 顧客獲得単価(CPA) */
.cpa_c {
  color: var(--Women);
}


/* エラーメッセージ */
.attention{
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 2px solid;
  border-radius: 8px;
  background-color: white;
  width: fit-content;
  align-items: center;
}

.attention.orange{
  border-color: var(--Error-900);
}

.attention h3{
  font-weight: 500;
}

.attention.orange h3{
  color: var(--Error-900);
}

.attention.orange svg{
  fill: var(--Error-900);
}

.attention.yellow{
  border-color: var(--Error-700);
}

.attention.yellow h3{
  color: var(--Error-700);
}

.attention.yellow svg{
  fill: var(--Error-700);
}

.attention.green{
  border-color: #009818;
}

.attention.green h3{
  color: #009818;
}

.attention.green svg{
  fill: #009818;
}

.attention.green a{
  fill: #009818;
}

.attention .column{
  gap: 10px;
}


p.fs12{
  font-size: 12px;
  line-height: 150%;
}


/* 背景 */
.bg{
  z-index: -100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg_circle{
  position: absolute;
  border-radius: 50%;
  background: var(--Page-BG-Blur);
  filter: blur(275px);
}

.circle1{
  top: 10%;
  right: 0%;
  width: 25%;
  aspect-ratio: 1;
}

.circle2{
  bottom: -5%;
  left: -10%;
  width: 35%;
  aspect-ratio: 1;
}