/**
 *
 * 変数
 * NOTE:
 *
**/

:root {
  --main-c: #000;
  --main-c-light: #059ddf;
  --main-c-dark: #059ddf;
  --sub-c: #059ddf;
  --sub-c-light: #059ddf;
  --sub-c-dark: #059ddf;
  --column-c: #059ddf;
  --font-c: #222;
  /* NOTE: --font-cは、background、borderで使う場合もあります。 */
  --text-link-c: #333;
  --text-link-c-hover: #333;
  --text-link-c-blue: #21528B;
  --text-link-c-blue-hover: #21528B;

  --text-marker-c: #fff696;

  --red: #ff1464;
  --red-accent: #FF626B;
  /* NOTE: --red-accentは注視の赤 */
  --red-alert: #EC5937;
  /* NOTE: --red-alertは警告の赤 */
  --font-c-red: #ff1464;
  --font-c-red-light: #ff1464;
  --font-c-red-new-icon: #A99353;

  --blue: #21528B;
  --blue-ui: #31769C;
  --font-c-blue: #21528B;
  --font-c-blue-light: #aee5d8;

  --green: #4ccea2;
  --green-accent: #0EBA53;
  /* NOTE: --green-accentは注視のグリーン */
  --green-active: #00B901;
  /* NOTE: --green-activeはフォーム部品のアクティブのグリーン */
  --font-c-green: #4ccea2;
  --font-c-green-light: #4ccea2;

  --gray: #ccc;
  --gray-light: #E5E8EC;
  --gray-dark: #6b6b6b;
  --font-c-gray: #ccc;
  --font-c-gray-light: #fafafa;
  --font-c-gray-dark: #5b5b5b;
  --font-c-gray-ui-link: #493E47;
  --font-c-gray-ui-disabled: #A6A6A6;
  /* NOTE: --font-c-gray-ui-linkは何らかのUIの黒字リンク（通常リンクは--text-link-c） */

  --font-c-placeholder: #B2B8C4;

  --font-family-gothic: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  --font-family-serif: "Yu Mincho Medium", "游明朝 Medium", "游明朝", YuMincho, "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  --font-family-en: "Lato", "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;

  --bg-c: #fff;
  --bg-c-light: #F1F3F7;
  --bg-c-dark: #D9DADE;
  /*--bg-c-disabled: #f8f7f7;*/
  --bg-c-disabled: #DBD9D9;
  --bg-c-underlayer: #fafafa;
  --bg-bc-nav: #f2f3f4;
  --bg-bc-nav-sp: #fff;
}


/**
 * .base_wrap, .l-container
**/
:root {
  --site-section-padding-block: 40px;
  --basewrap-padding-inline: 80px;
  /*--basewrap-width: 1360px;*/
  --basewrap-width: 1432px;/* TODO: 2025.09.24 トップページの幅は1360pxにしたい */
}
@media (max-width: 1436.98px) {
  :root {
    --site-section-padding-block: 40px;
    --basewrap-padding-inline: 16px;
  }
}
@media (max-width: 1040.98px) {
  :root {
    --site-section-padding-block: 40px;
    --basewrap-padding-inline: 16px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --site-section-padding-block: 40px;
    --basewrap-padding-block: 8px;
    --basewrap-padding-inline: 16px;
  }
}


/**
 * ボタン関連
**/
:root {
  --btn-wrapper-width: 560px;
  --btn-wrapper-gap: 4px;
  --btn-radius: 4px;
  --btn-shadow: 0 2px 8px rgba(0,0,0,0.12);
  --btn-shadow-hover: 0 4px 14px rgba(0,0,0,0.33);
  --btn-width: 256px;
  --btn-height: 48px;
  --btn-small-radius: 3px;
  --btn-small-width: 256px;
  --btn-small-height: 32px;
  --btn-margin-top: 40px;
}
@media (max-width: 1040.98px) {
  :root {
    --btn-height: 40px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --btn-height: 40px;
    --btn-small-height: 32px;
    --btn-margin-top: 32px;
  }
}


/**
 * UI
**/
:root {
  --site-radius: 6px;
  --site-radius-small: 4px;
  --site-input-radius: 0px;
  --site-input-height: 48px;
  --site-input-fs: 16px;
  /* フォーム入力時のの自動拡大を防ぐため必ず --site-input-fs変数を使用してfont-sizeを指定し、16px以下にしないように注意してください。 */
  --site-input-gap: 4px;
  --site-input-error-height: 17px;
}
@media (max-width: 767.98px) {
  :root {
    --site-radius: 6px;
    --site-radius-small: 4px;
    --site-input-height: 48px;
    --site-input-error-height: 14px;
  }
}


/**
 * ヘッダー関連
 * NOTE: style.cssへ記載してください。
**/
/*
:root {}
@media (max-width: 1300.98px) {
  :root {}
}
@media (max-width: 1040.98px) {
  :root {}
}
@media (max-width: 767.98px) {
  :root {}
}
*/


/**
 * フッター関連
**/
/*
:root {
  --footer-padding-inline: 70px;
  --footer-width: 1340px;
  --footer-logo-width: 280px;
}
@media (max-width: 1300.98px) {
  :root {
    --footer-padding-inline: 28px;
  }
}
@media (max-width: 1040.98px) {
  :root {
    --footer-padding-inline: 16px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --footer-padding-inline: 16px;
    --footer-logo-width: 128px;
  }
}
*/