/*-------------------------------------------------------------------------------------------------- 
色を指定する
---------------------------------------------------------------------------------------------------*/
:root{
    --theme-color: #364254;
    /* theme-color */
    --accent-color:#FFCE21;
    --base-color: #F2F5F9;
    /* base */
}

/*-------------------------------------------------------------------------------------------------- 
色変更箇所を指定する 以下は触らないようにしてください。
---------------------------------------------------------------------------------------------------*/

/* ボタン メインカラー*/
.custom-color__input--main>input,.custom-color__btn--main{
    background-color: var(--theme-color);
    color: #FFF;
}

/* ボタン アクセントカラー */
.custom-color__btn--accent,.custom-color__input--accent>input{
    background-color: var(--accent-color);
    color: #4B4B4B;
    padding: 10px 30px;
    font-size: 1rem;
}

/* 会員ページ背景色 マニュアルヘッダー お役立ち情報切替ボタン*/
.custom-color__background,.header__inner--manual,.btn--card:has(input:checked),.btn--list:has(input:checked){
    background-color: var(--base-color);
}

/* チェックボックス背景色 */
.custom-color__checkbox label input:checked::before{
    background-color: var(--theme-color);
}

/* ページャーカラー */
.custom-color__pager ul li a{
    background-color: #FFF;
    color: var(--theme-color);
    border-color: var(--theme-color);
    text-decoration: none;
}

.custom-color__pager ul li  span{
    background-color: var(--theme-color);
    color: #FFF;
    border-color: var(--theme-color);
    cursor: default;
}
/* アコーディオンカラー */
.custom-color__accordion{
    background-color: var(--theme-color);
    color: #FFF;
}