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

:root {
  --main-c: #E33634;
  --main-c-light: #E33634;
  --main-c-dark: #E33634;
  --sub-c: #E33634;
  --sub-c-light: #FDEFEF;/* UI background */
  --sub-c-dark: #FEF0C1;/* memo, info background */

  --column-c: #E33634;

  --font-c: #333;
  --text-link-c: #1392E6;
  --text-link-c-hover: #1392E6;
  --text-marker-c: #fff696;

  --red: #E33634;
  --font-c-red: #E33634;
  --font-c-red-light: #E33634;

  --blue: #002FD5;
  --font-c-blue: #002FD5;
  --font-c-blue-light: #E5EAFA;

  --green: #4ccea2;
  --font-c-green: #4ccea2;
  --font-c-green-light: #4ccea2;

  --gray: #d1d1d1;
  --font-c-gray: #d1d1d1;
  --font-c-gray-light: #f1f1f1;
  --font-c-gray-medium: #9A9B9B;
  --font-c-gray-dark: #717171;

  --bg-c: #fff;
  --bg-c-underlayer: #fffaea;
  --bg-c-light: #ebf5ff;
  --bg-c-lightgray: #f1f1f1;
  --bg-c-silvergray: #ccc;
  --bg-c-dark: #eee;
  --bg-c-disabledgray: #e9e9e9;
  --bg-bc-nav: #f2f3f4;
  --bg-bc-nav-sp: #fff;
}

/**
 * .base_wrap, .l-container
**/
:root {
  --basewrap-padding-inline: 80px;
  --basewrap-width: 1240px;
}
@media (max-width: 1140.98px) {
  :root {
    --basewrap-padding-inline: 28px;
  }
}
@media (max-width: 959.98px) {
  :root {
    --basewrap-padding-inline: 16px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --basewrap-padding-block: 8px;
    --basewrap-padding-inline: 16px;
  }
}


/**
 * ボタン関連
**/
:root {
  --btn-wrapper-width: none;
  --btn-wrapper-gap: 4px;
  --btn-radius: 6px;
  --btn-shadow: none;/* 0 2px 4px rgba(0,0,0,0.08) */
  --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: 767.98px) {
  :root {
    --btn-height: 48px;
    --btn-small-height: 32px;
    --btn-margin-top: 32px;
  }
}


/**
 * フォームUI関連
**/
:root {
  --ui-radius: 30px;
  --ui-radius-small: 16px;
  --ui-radius-box: 8px;
  --ui-input-height: 48px;
  --ui-input-fs: 16px;/* inputタグに指定するfont-sizeは、iPhoneで自動拡大が起きるので16px以上を推奨 */
  --ui-input-gap: 4px;
  --ui-input-c-border: #d1d1d1;
}
@media (max-width: 1440.98px) {
  :root {
    --ui-radius: 30px;
    --ui-input-height: 48px;
  }
}
@media (max-width: 959.98px) {
  :root {
    --ui-radius: 16px;
    --ui-radius-small: 12px;
    --ui-input-height: 48px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --ui-radius: 16px;
    --ui-radius-small: 12px;
    --ui-input-height: 48px;
  }
}
@media (max-width: 560.98px) {
  :root {
    --ui-radius: 16px;
    --ui-radius-small: 12px;
    --ui-input-height: 40px;
  }
}

/* formset item */
:root {
  --formset-ttl-width: 200px;
  --formset-gap: 8px;/* formset item 内部のgap */
  --formset-items-row-gap: 32px;/* formset itemとformset itemの間にできるgap（marginなども） */
}
@media (max-width: 959.98px) {
  :root {
    --formset-ttl-width: 200px;
    --formset-gap: 8px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --formset-ttl-width: 200px;
    --formset-gap: 8px;
  }
}
@media (max-width: 560.98px) {
  :root {
    --formset-ttl-width: 200px;
    --formset-gap: 8px;
  }
  .modal-content .formset__item {
    --formset-ttl-width: 80px;
    --formset-gap: 12px;
  }
}


/**
 * ヘッダー関連
**/

:root {
  --header-height: 92px;
  --header-padding-block: 0;
  --header-padding-inline: 80px;
  --header-logo-width: 90px;
  --header-logo-gap: 20px;
  --header-slogan-width: 144px;
  --header-btn-height: 32px;
  --header-menu-c-border: #eee;
  --header-menu-fs: 13px;
  --header-menu-btn-size: 50px;
  --header-menu-width: 350px;
  --header-menu-li-height: 48px;
}
@media (max-width: 1300.98px) {
  :root {
    --header-height: 92px;
    --header-padding-inline: 80px;
  }
}
@media (max-width: 959.98px) {
  :root {
    --header-height: 92px;
    --header-padding-inline: 40px;
    --header-logo-width: 90px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --header-height: 56px;
    --header-padding-inline: 8px;
    --header-logo-width: 56px;
    --header-logo-gap: 8px;
    --header-slogan-width: 120px;
    --header-menu-fs: 13px;
    --header-menu-btn-size: 40px;
    --header-menu-li-height: 48px;
  }
}



/**
 * フッター関連
**/
/*
: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: 959.98px) {
  :root {
    --footer-padding-inline: 16px;
  }
}
@media (max-width: 767.98px) {
  :root {
    --footer-padding-inline: 16px;
    --footer-logo-width: 128px;
  }
}
*/