:root {
  /*-----------icon-----------*/
  --icon-primary-color: #ff8ed8;
  --icon-secondary-color: #fff;
  --icon-noimage-color: brightness(0) saturate(100%) invert(92%) sepia(60%)
    saturate(748%) hue-rotate(292deg) brightness(99%) contrast(105%);
  --icon-primary-color-filter: brightness(0) saturate(100%) invert(86%)
    sepia(31%) saturate(3846%) hue-rotate(284deg) brightness(104%)
    contrast(101%);

  /*-----background_color-----*/
  --bg-primary-color: #ffffff;
  --bg-main-color: var(--bg-primary-color);
  --bg-menu-color: #ffffff;
  --bg-white-color: #ffffff;
  --bg-headerMenu-color: #ffffff;
  --bg-navichan-primary-color: #fdfdfd;
  --bg-navichan-secondary-color: #f5f5f5;
  --bg-footerMenu-color: #f094d0;
  --bg-headerMenu-color-active: #ffe5e4;
  --bg-bright-gray: #f3f3f3;
  --blue-indigo: #49516d;
  --deep-blue: #094067;

  /*-----text-----*/
  --text-primary-color: #333333;
  --text-danger-color: #de3545;
  --text-white-color: #ffffff;
  --light-gray-color: #757589;
  --steel-glay-color: #736d71;

  /* ------CTA BUTTONS------ */
  --btn-primary-color: #ffffff;
  --btn-primary-bgcolor: #d6366e;
  --btn-primary-bordercolor: #666666;
  --btn-primary-bgcolor-hover: #a02a53;
  --btn-primary-icon-color: #ffffff;

  --btn-secondary-color: #333333;
  --btn-secondary-bgcolor: #ffffff;
  --btn-secondary-bordercolor: #ff8ed8;
  --btn-secondary-bgcolor-hover: #f3f3f3;
  --btn-secondary-icon-color: #ff8ed8;

  /*-------------------------------------------------------------------------------------------------------------------------------*/

  /*---parts - ヘッダーメニュー ---*/
  --header-border-color: #ffffff;
  --header-offcanvasMenu-bgcolor-hover: #fffffe;
  --icon-haeder-navisma-size: 4rem;

  /*---parts - マイページ なびちゃんのカラー ---*/
  --mypage-navichan-color: var(--icon-primary-color-filter);

  /*---parts - ヘッダー ---*/
  --text-systemtitle-color: #333333;

  /*---page - マイページ ---*/
  --bg-mypage-userInfo-color: #ffddf6;

  /*---page - ログイン /account/login/ ---*/
  --btn-cbutton01-bordercolor: #068fff;
  --btn-cbutton01-borderradius: 4px;
  --btn-cbutton01-bordercolor-hover: #06b0ff;
  --btn-cbutton01-bgcolor-hover: #06b0ff;
  --btn-cbutton02-bordercolor: #a9ceec;
  --btn-cbutton02-bgcolor-hover: #d9f7f5;

  /*---page - 会員登録 /account/regist/ ---*/
  --bg-progress-active-color: #cf28a5;
  --bg-progressbar-color: #ffbbf0;

  --NewMember-areacolor: var(--bg-mypage-userInfo-color);

  /*---parts - フォームのチェックボタン、ラジオボタンのカラー ---*/
  --form-check-color: #ff8ed8;
  --btn-radio-primary-bgcolor-selected: #d8e6ff;

  /*---parts - フッター　グローバルナビゲーション　アイコンの色*/
  --icon-footer-color: var(--icon-primary-color);

  /*---parts - list_result tileとlistでの表示切替 ---*/
  --btn-switchDisp-color: #333333;
  --btn-switchDisp-bgcolor: #ffffff;
  --btn-switchDisp-before-color: var(--icon-primary-color);

  /*---parts - list_result event と spotでの表示切替 */
  --btn-switchDimention-icon-color: var(--icon-primary-color);

  /*---parts - カレンダー内のカラーバリエーション ---*/
  --btn-calendar-eventExist: #333333;
  --btn-calendar-selected-bgcolor: #ee399c;
  --btn-calendar-selected-color: #ffffff;
  --btn-calendar-selected-eventColor: var(--icon-white-color-filter);
  --btn-calendar-date-saturday: #0700c6;
  --btn-calendar-date-sunday: #c60000;
  --btn-calendar-returnToday-bgcolor: #51546a;

  /*---parts - カルーセル 背景色 ---*/
  --inner-carousel-bgcolor: #e9ecef;
  --carousel-controller-color: var(--bg-delete-color);

  /*---parts - 投稿したレビュー 背景色 ---*/
  --review-bgcolor: #ffc8ef;
  --review-subcolor: var(--steel-glay-color);

  /*---parts - radius の一般化 ---*/ /*あとで対応*/
  --btn-radius: 0.375rem;
  --btn-primary-radius: 5rem;
  --btn-secondary-radius: 2rem;
  --btn-short-radius: 0.5rem;
  --btn-tall-radius: 0.25rem;

  /*---parts - フォントサイズ ---*/
  --btn-primary-fontsize: 1.6rem;
  --btn-secondary-fontsize: 0.8rem;

  /*---parts - 文字の太さ ---*/
  --btn-primary-fontweight: 400;
  --btn-secondary-fontweight: 500;
  --btn-third-fontweight: 600;

  --btn-secondary-borderwidth: 0.15rem;

  /*---parts - カテゴリーボタン*/
  --btn-category-bgcolor: #fffffe;
  --btn-category-color: #333333;
  --btn-category-bordercolor: #ff8ed8;
  --btn-category-borderradius: 9999px;
  --btn-category-borderwidth: var(--btn-primary-borderwidth);
  --btn-category-bgcolor-hover: #ffe5e4;

  /*---parts - タグ ---*/
  --btn-tag-bgcolor: #fffffe;
  --btn-tag-color: #333333;
  --btn-tag-bordercolor: #aaaaaa;
  --btn-tag-fontweight: var(--btn-secondary-fontweight);
  --btn-tag-fontsize: var(--btn-secondary-fontsize);
  --btn-tag-borderradius: var(--btn-secondary-radius);
  --btn-tag-borderwidth: var(--btn-secondary-borderwidth);

  /*---parts - 予約する ---*/
  --btn-reserve-bgcolor: #254cb7;
  --btn-reserve-color: #ffffff;
  --btn-reserve-bordercolor: #254cb7;
  --btn-reserve-bgcolor-hover: #ffffff;
  --icon-reserve-color: #ffffff;

  /*---parts - 予約ステータス 予約受付中 ---*/
  --label-reserveStatus-accept-color: #333333;
  --label-reserveStatus-accept-bgcolor: #99e36f;

  /* ---parts - 予約ステータス 予約受付前 ---*/
  --label-reserveStatus-schedule-color: #333333;
  --label-reserveStatus-schedule-bgcolor: #9c8cff;

  /* ---parts - 予約ステータス 過去の予約 --- */
  --label-reserveStatus-achive-color: #333333;
  --label-reserveStatus-achive-bgcolor: #ababab;

  /* ---parts - 開催ステータス 開催予定 */
  --label-eventSchedule-color: var(--label-reserveStatus-schedule-color);
  --label-eventSchedule-bgcolor: var(--label-reserveStatus-schedule-bgcolor);

  /*---parts - 開催ステータス 開催中 ---*/
  --label-eventHeld-color: var(--text-primary-color);
  --label-eventHeld-bgcolor: #fad673;

  /*---parts - 開催ステータス 終了しました ---*/
  --label-eventTerminated-color: var(--text-primary-color);
  --label-eventTerminated-bgcolor: #a8e1ff;

  /*---parts - 公開ステータス 公認ユーザのみ ---*/
  --label-onlyCertified-color: var(--text-white-color);
  --label-onlyCertified-bgcolor: var(--user-status-certified-color);

  /*---parts - 投稿ステータス ---*/
  --post-private-bgcolor: #999999;
  --post-private-bordercolor: var(--post-private-bgcolor);
  --post-open-bgcolor: #008299;
  --post-open-bordercolor: var(--post-open-bgcolor);
  --post-temporary-bgcolor: #76bce1;
  --post-temporary-bordercolor: var(--post-temporary-bgcolor);
  --post-await-bgcolor: #e2e2e2;
  --post-await-bordercolor: var(--post-await-bgcolor);
  --post-deny-bgcolor: #333333;
  --post-deny-bordercolor: var(--post-deny-bgcolor);
  --post-deleteAwait-bgcolor: #6c757d;
  --post-deleteAwait-bordercolor: var(--post-deleteAwait-bgcolor);
  --post-onlyCertified-bgcolor: var(--user-status-certified-color);
  --post-onlyCertified-bordercolor: var(--post-onlyCertified-bgcolor);

  --post-status-white-color: #ffffff;
  --post-status-primary-color: #333333;
  --post-status-white-iconcolor: var(--icon-white-color);
  --post-status-black-iconcolor: var(--icon-black-color);

  /*---parts - マップでみるボタン ---*/
  --btn-map-bgcolor: #3a870e;
  --btn-map-color: #ffffff;
  --btn-map-bordercolor: #3a870e;
  --btn-map-borderradius: var(--btn-forward-primary-borderradius);
  --btn-map-iconcolor: #ffffff;

  /*---parts - マップで見るページ　スポット切替ボタン ---*/
  --btn-postSlider-iconcolor: #f094d0;

  /*---parts - カレンダーからさがす ---*/
  --btn-calendar-bordercolor: #dee2e6;
  --btn-calendar-borderradius: 0.375rem;
  --btn-calendar-bgcolor: #ffffff;

  /*---parts - お気に入り 追加削除関連 ---*/
  /*- 共通部分 -*/
  --btn-favorite-borderradius: 0.5rem;
  --btn-favorite-borderwidth: var(--btn-primary-borderwidth);
  --btn-favorite-borderstyle: var(--btn-primary-borderstyle);
  --btn-favorite-bordercolor: var(--btn-favorite-color-add);
  /*- お気に入りに追加する -*/
  --btn-favorite-bgcolor-add: #fffffe;
  --btn-favorite-color-add: #e62044;
  /*- お気に入りから削除する -*/
  --btn-favorite-bgcolor-reject: var(--btn-favorite-color-add);
  --btn-favorite-color-reject: var(--btn-favorite-bgcolor-add);

  /*---parts - 削除ボタン ---*/
  --btn-delete-color: #52546a;
  --btn-delete-bordercolor: var(--btn-delete-color);

  /*---parts - 投稿詳細_期間_時間_住所_text ---*/
  --post-detail-sub-text: var(--steel-glay-color);

  /*---parts - ページネーション ---*/
  --pagination-bgcolor: #ffffff;
  --pagination-bgcolor-active: #ffe5e5;
  --pagination-color: #333333;
  --pagination-bordercolor: #dee2e6;
  --pagination-bgcolor-disabled: var(--pagination-bgcolor);
  --pagination-bordercolor-disabled: #f7f7f7;
  --pagination-icon-color-disabled: brightness(0) saturate(100%) invert(100%)
    sepia(0%) saturate(3401%) hue-rotate(182deg) brightness(76%) contrast(88%);
  --pagination-icon-pointleader: #666666;

  /*---parts - お知らせ ユニット ---*/
  --text-notice-color: var(--light-glay-color);
  --newsUnit-borderstyle: dashed;
  --newsUnit-borderwidth: 0.1rem;
  --newsUnit-bordercolor: #dfdfdf;

  /*---parts - リストマーカー ---*/
  --list-marker-color: #ff8ed8;

  /*---parts - マップ ユーティリティ ---*/
  --button-map-bgcolor: #ffffff;
  --button-map-width: 4.5rem;
  --button-map-height: 5rem;
  --button-map-borderradius: 5%;
  --button-map-outlinecolor: #ff8ed8;
  --button-map-icon-size: 2.5rem;

  /*---parts - 予約一覧 ---*/
  --button-showReserve-bordercolor: var(--btn-category-bordercolor);

  /*---parts - 予約独自のカード ---*/
  --card-reserve-bgcolor: #fcfcfc;

  /*---parts - 予約内容の詳細 border---*/
  --area-reserve-color: var(--text-primary-color);
  --area-reserve-bgcolor: #ffffff;
  --area-reserve-bordercolor: var(--btn-category-bordercolor);

  /*---parts - ローディングの色 ---*/
  --loading-navisma-color: #d6366e;

  /*---parts - 予約画面　時間選択のボタン ---*/
  --btn-reserve-timeSelect-color: #333333;
  --btn-reserve-timeSelect-bgcolor: #ffffff;
  --btn-reserve-timeSelect-bordercolor: var(--btn-reserve-timeSelect-color);
  --btn-reserve-timeSelect-color-selected: #fff0d8;

  /* .btn-primary */
  --bs-btn-color: #fff;
  --address-btn-hover-bg: #2f6b0b;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-confirm-disabled-bg: var(--btn-form-primary-bgcolor);
  --bs-btn-confirm-disabled-border-color: var(--btn-form-primary-bgcolor);
  --bs-body-color: #333333;

  /* ---parts - 静的ページ --- */
  /* ---parts - about --- */
  --about-box-color: var(--bg-primary-color);
  /* ---parts - link --- */
  --bg-link-color: var(--bg-primary-color);

  /*---parts - focusの色 ---*/
  --focus-outline-color: #12aad8;
  --active-outline-color: #12aad8;
  --checked-outline-color: #12aad8;
  --bs-focus-ring-color: #12aad8;
  --imgchecked-outline-color: #e62041;

  /*---parts - i要素のアイコンカラー(16進数で定義) ---*/
  --icon-jumplink-iconcolor: #ff8ed8;
  --icon-pagination-chevron-iconcolor: #ff8ed8;

  /*---parts - manualページのカラー --- */
  --staticbar-first-color: #f5019f;
  --staticbar-second-color: #fa5dc3;
  --staticbar-third-color: #ff8ed8;
  --staticbar-accent-color: #e75e5e;
  --staticbar-last-color: #ff5095;
  --staticbar-deny-color: #407540;

  /* ---parts - chat--- */
  --chat-mymessage-bgcolor: #ecc1ee;
  --chat-othermessage-bgcolor: #eeeeee;
  --chat-btn-primary-bgcolor: #d6366e;
  --chat-btn-primary-noactive-bgcolor: #ecc5ea;
  --chat-btn-primary-noactive-color: var(--chat-btn-primary-noactive-bgcolor);
  --chat-btn-primary-iconcolor: #ffffff;
  --chat-notice-bgcolor: #ff0000;
}