/**
 *
 * 変数
 * NOTE: 汎用カラーはアンダーバー区切り（PBASEオリジナル命名ルール）で、それ以外はハイフン区切りで
 *
**/

:root {
  /* NOTE: 汎用カラー */
  --main_c: #17A88E;
  --main_c_hue: #17A88E;
  --main_c_light: #e1ecc7;
  --main_c_foot_border: #17A88E;
  --sub_c: #e9be38;
  --sub_c_dark: #ff9b29;
  --column_c: #17A88E;
  --font_c: #646464;
  /* NOTE: サイト内共通のデフォルト文字色 */
  --red: #ff1464;
  --font_c_red: #ff1464;
  --green: #4ccea2;
  --font_c_green: #4ccea2;
  --gray: #A0A0A0;
  --font_c_gray: #A0A0A0;
  --bg_c: #fff;
  --bg_sub: #E8F6F4;
  --bg_bc_nav: #f2f3f4;
  --bg_bc_nav_sp: #fff;
  --bg_underlayer_c: #f2f3f4;
  --bg_ribbon_active: #dcf1f2;
  --marker_c: #fff696;
  --text_link_c: #43a0a7;
}


/**
 * .base_wrap, .l-container
**/
:root {
  --basewrap-padding-inline: 70px;
  --basewrap-width: 1540px;
  --basewrap-width-tight: 960px;
  /* トップ、検索結果、ヘッダーなど */
}

@media (max-width: 1300px) {
  :root {
    --basewrap-padding-inline: 28px;
  }
}

@media (max-width: 959px) {
  :root {
    --basewrap-padding-inline: 16px;
  }
}

@media (max-width: 767px) {
  :root {
    --basewrap-padding-block: 8px;
    --basewrap-padding-inline: 16px;
  }
}


/**
 * ボタン関連
**/
:root {
  --btn-wrapper-width: 560px;
  --btn-wrapper-gap: 4px;
  --btn-radius: 6px;
  --btn-radius-l: 12px;
  --btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  --btn-width: 360px;
  --btn-height: 60px;
  --btn-small-radius: 6px;
  --btn-small-width: 256px;
  --btn-small-height: 44px;
  --btn-margin-top: 40px;
}

@media (max-width: 767px) {
  :root {
    --btn-height: 48px;
    --btn-small-height: 32px;
    --btn-margin-top: 32px;
  }
}


/**
 * ヘッダー関連
**/
:root {
  --header-height: 80px;
  --header-padding-block: 0;
  --header-padding-inline: 40px;
  --header-gap: 20px;
  --header-logo-width: 200px;
  --header-btn-height: 32px;
  --header-search-c-bg: #E6DFD6;
  --header-menu-c-bg: #abdad1;
  --header-menu-c-border: #eee;
  --header-menu-fs: 14px;
  --header-menu-btn-size: 34px;
  --header-menu-width: 350px;
  --header-menu-li-height: 48px;
  scroll-padding: var(--header);
}

@media (max-width: 1300px) {
  :root {
    --header-height: 80px;
    --header-padding-block: 0;
    --header-padding-inline: 16px;
    --header-gap: 20px;
  }
}

@media (max-width: 959px) {
  :root {
    --header-height: 80px;
    --header-padding-block: 0;
    --header-padding-inline: 5px 16px;
    --header-gap: 16px;
    --header-logo-width: 144px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-height: 64px;
    --header-padding-block: 0;
    --header-padding-inline: 8px;
    --header-gap: 8px;
    --header-logo-width: 144px;
    --header-menu-fs: 14px;
    --header-menu-btn-size: 36px;
    --header-menu-width: 260px;
    --header-menu-li-height: 44px;
  }
}



/**
 * フッター関連
**/
:root {
  --footer-padding-inline: 70px;
  --footer-width: 1340px;
  --footer-logo-width: 280px;
}

@media (max-width: 1300px) {
  :root {
    --footer-padding-inline: 28px;
  }
}

@media (max-width: 959px) {
  :root {
    --footer-padding-inline: 16px;
  }
}

@media (max-width: 767px) {
  :root {
    --footer-padding-inline: 16px;
    --footer-logo-width: 128px;
  }
}