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

:root {
  --main-c: #8AC323;
  --main-c-light: #C0D931;
  --main-c-pale: #f6faf0;
  --main-c-dark: #8AC323;
  --sub-c: #8AC323;
  --sub-c-light: #8AC323;
  --sub-c-dark: #8AC323;
  --column-c: #8AC323;
  --font-c: #5D5D5B;
  --text-link-c: #247ED9;
  --text-link-c-hover: #247ED9;
  --text-marker-c: #fff696;
  --red: #ff1464;
  --font-c-red: #ff1464;
  --font-c-red-light: #ff1464;
  --blue: #247ED9;
  --font-c-blue: #247ED9;
  --font-c-blue-light: #aee5d8;
  --green: #4ccea2;
  --font-c-green: #4ccea2;
  --font-c-green-light: #4ccea2;
  --yellow: #e9ea5e;
  --font-c-yellow: #e9ea5e;
  --font-c-yellow-light: #e9ea5e;
  --gray: #ccc;
  --font-c-gray: #ccc;
  --font-c-gray-light: #ccc;
  --font-c-gray-dark: #ccc;
  --bg-c: #F8F8F8;
  --bg-c-light: #F6F7CD;
  --bg-c-dark: #fafafa;
  --bg-bc-nav: #f2f3f4;
  --bg-bc-nav-sp: #fff;
  --site-radius: 8px;
  --site-input-height: 48px;
  --site-input-gap: 4px;
  --site-input-error-height: 17px;
}

@media only screen and (max-width: 1440.98px) {
  :root {
    --site-radius: 8px;
    --site-input-height: 48px;
  }
}
@media only screen and (max-width: 959.98px) {
  :root {
    --site-radius: 8px;
    --site-input-height: 48px;
  }
}
@media screen and (max-width: 767.98px) {
  :root {
    --site-radius: 8px;
    --site-input-height: 48px;
  }
}
@media screen and (max-width: 560.98px) {
  :root {
    --site-radius: 8px;
    --site-input-height: 48px;
  }
}


/**
 * .base_wrap, .l-container
**/
:root {
  --basewrap-padding-inline: 80px;
  --basewrap-width: 1360px;
}
@media (max-width: 1300.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: 3em;
  --btn-shadow: none;/* 0 2px 4px rgba(0,0,0,0.08) */
  --btn-width: 256px;
  --btn-height: 48px;
  --btn-small-radius: 3em;
  --btn-small-width: 256px;
  --btn-small-height: 32px;
  --btn-margin-top: 40px;
}
@media (max-width: 767.98px) {
  :root {
    --btn-height: 40px;
    --btn-small-height: 32px;
    --btn-margin-top: 32px;
  }
}


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

:root {
  --header-height: 96px;
  --header-padding-block: 0;
  --header-padding-inline: 40px;
  --header-logo-width: 256px;
  --header-nav-gap: 16px;
  --header-btn-height: 50px;
  --header-icon-size: 36px;
  --header-menu-c-border: #eee;
  --header-menu-fs: 13px;
  /*--header-menu-btn-size: 120px;*/
  --header-menu-width: 350px;
  --header-menu-li-height: 48px;

  /* .mypage-nav関連 */
  --m-nav-height: 48px;
  --m-nav-gap: 24px;
  --m-nav-list-gap: 12px;
  --m-nav-guide-width: 192px;
}
@media (max-width: 1300.98px) {
  :root {
    --header-height: 96px;
    --header-padding-inline: 16px;
    --header-logo-width: 256px;
  }
}
@media (max-width: 959.98px) {
  :root {
    --header-height: 96px;
    --header-padding-inline: 16px;
    --header-logo-width: 208px;
    --header-nav-gap: 16px;

    /* .mypage-nav関連 */
    --m-nav-height: 48px;
    --m-nav-gap: 16px;
    --m-nav-list-gap: 12px;
    --m-nav-guide-width: 14em;
  }
}
@media (max-width: 767.98px) {
  :root {
    --header-height: 48px;
    --header-padding-block: 8px;
    --header-padding-inline: 8px;
    --header-logo-width: 112px;
    --header-nav-gap: 0px;
    /* NOTE: スマホでの--header-nav-gapは、ナビ形状が多様で制御が難しいため.head-navの子要素の margin-rightなどで調整してください。 */
    --header-icon-size: 24px;
    --header-menu-fs: 13px;
    /*--header-menu-btn-size: 56px;*/
    --header-menu-li-height: 48px;

    /* .mypage-nav関連 */
    /* NOTE: --m-nav-heightはリストの項目が固定的に２行であることを前提としています */
    --m-nav-height: 80px;
    --m-nav-gap: 12px;
    --m-nav-list-gap: 1em;
    --m-nav-guide-width: 14em;
  }
}


/**
 * フッター関連
**/
:root {
  /*--footer-padding-inline: 70px;*/
  --footer-width: 1560px;
  --footer-logo-width: 240px;
}
@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;
  }
}


/**
 * formset関連
**/
:root {
  --formset-gap: 32px;
  --formset-ttl-width: 200px;
  --formset-gap: 32px;
}
@media screen and (max-width: 959.98px) {
  :root {
    --formset-gap: 20px;
    --formset-ttl-width: 200px;
    --formset-gap: 20px;
  }
}
@media screen and (max-width: 767.98px) {
  :root {
    --formset-gap: 12px;
    --formset-ttl-width: 200px;
    --formset-gap: 12px;
  }
}