/* ----------------- */
/*   custom color    */
/* ----------------- */ 

.type-white, .type-yellow, .type-red, .type-black, .type-blue {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.type-red,
.type-yellow{
    background-color: #fcfaf5;
}

/* ---- header ---- */
.type-white .navbar{
    background-color: #fff!important;
}
.type-red .navbar{
    background-color: #CC331F !important;
    color: #fff;
}
.type-yellow .navbar{
    background-color: #facd02 !important;
}
.type-black .navbar{
    background-color: #0f0f0f !important;
    color: #fff;
}
.type-dark .navbar{
    background-color: #019303!important;
    color: #fff;
}
.type-blue .navbar{
    background-color: #171c61!important;
    color: #fff;
}

/* ---- button ---- */
/*  enter  */
.type-white .btn-enter {
    color: #3E2723;
    background-color: #FF999A;
    border-color: #FF999A;
}
.type-white .btn-enter:hover{
    color: #FF999A;
    background-color: #FFF;
    border-color: #FF999A;
}

.type-yellow .btn-enter{
    color: #3E2723;
    background-color:#fde4ac;
    border-color:#fde4ac;
}
.type-yellow .btn-enter:hover{
    color: #3E2723;
    background-color: #fbd88b;
    border-color: #fbd88b;
}

.type-red .btn-enter {
    color: #3E2723;
    background-color: #fabda5;
    border-color: #fabda5;
}
.type-red .btn-enter:hover {
    color: #3E2723;
    background-color: #f9ad8f;
    border-color: #f9ad8f;
}

.type-black .btn-enter,
.type-blue .btn-enter{
    color: #212529;
    background-color: #8dbf67;
    border-color: #8dbf67;
}
.type-black .btn-enter:hover,
.type-blue .btn-enter:hover{
    color: #8dbf67;
    background-color: #FFF;
    border-color: #8dbf67;
}

.type-dark .btn-enter {
    color:#FFF;
    background-color: #202020;
    border-color: #202020;
}
.type-dark .btn-enter:hover {
    color: #202020;
    background-color: transparent;
    border-color: #202020;
}

/*  tell  */
.type-white .btn-tell{
    color: #CC331F;
    border-color: #CC331F;
}
.type-white .btn-tell:hover{
    background-color: #CC331F;
    color: #fff;
    border-color: #CC331F;
}

.type-yellow .btn-tell{
    color: #000;
    border-color: #000;
}
.type-yellow .btn-tell:hover{
    background-color: #000;
    color: #fff;
    border-color: #000;
}

.type-red .btn-tell{
    color: #fff !important;
    background-color: transparent;
    border-color: #fff;
}
.type-red .btn-tell:hover{
    color: #CC331F !important;
    background-color: #fff;
    border-color: #fff;
}

.type-black .btn-tell,
.type-blue .btn-tell{
    color: #8dbf67 !important;
    border-color: #8dbf67;
}
.type-black .btn-tell:hover,
.type-blue .btn-tell:hover{
    background-color: #8dbf67;
    color: #fff !important;
    border-color: #8dbf67;
}

.type-dark .btn-tell{
    color: #CC331F;
    border-color: #CC331F;
}
.type-dark .btn-tell:hover{
    background-color: #CC331F;
    color: #fff;
    border-color: #CC331F;
}

/*  next  */
.type-white .btn-next{
    background-color: #CC331F !important;
    color: #fff !important;
    border-color: #CC331F;
}
.type-white .btn-next:hover{
    background-color: transparent !important;
    color: #CC331F!important;
    border-color: #CC331F;
}

.type-yellow .btn-next{
    background-color: #CC331F !important;
    color: #fff !important;
    border-color: #CC331F;
}
.type-yellow .btn-next:hover{
    background-color: transparent !important;
    color: #CC331F!important;
    border-color: #CC331F;
}

.type-red .btn-next{
    color: #555 !important;
    background-color: #facd02;
    border-color: #facd02;
}
.type-red .btn-next:hover{
    color: #fff !important;
    background-color: transparent;
    border-color: #fff;
}

.type-black .btn-next,
.type-blue .btn-next{
    background-color: #8dbf67;
    color: #fff !important;
    border-color: #8dbf67;
}
.type-black .btn-next:hover,
.type-blue .btn-next:hover{
    background-color: transparent !important;
    color: #8dbf67 !important;
    border-color: #8dbf67;
}

.type-dark .btn-next{
    background-color: #CC331F !important;
    color: #fff !important;
    border-color: #CC331F;
}
.type-dark .btn-next:hover{
    background-color: transparent !important;
    color: #CC331F!important;
    border-color: #CC331F;
}

.btn-left-arrow{
    color: #202020;
}

.type-red .btn-left-arrow,
.type-black .btn-left-arrow,
.type-blue .btn-left-arrow{
    color: #fff !important;
}

/*  cart  */
.btn-cart{
    background-color: transparent;
    color: #CC331F !important;
    border-color: #CC331F;
}
.btn-cart:hover{
    background-color: #CC331F;
    color: #fff!important;
    border-color: #CC331F;
}

/*  back  */
.btn-back{
    color: #17a2b8 !important;
    border-color: #17a2b8!important;
}
.btn-back:hover{
    color: #fff!important;
    background-color: #17a2b8!important;
    border-color: #17a2b8!important;
}

.type-red .btn-back{
    color: #fff!important;
    background-color: #17a2b8;
    border-color: #17a2b8!important;
}
.type-red .btn-back:hover{
    color: #fff!important;
    background-color: transparent!important;
    border-color: #fff!important;
}

/*  ログイン  */
.btn-login{
    background-color: transparent;
    color: #202020;
    border-color: #202020;
}

.btn-login:hover{
    background-color: #202020;
    color: #fff;
    border-color: #202020;
}

.text-login{
    color: #202020;
}

.type-red .btn-login,
.type-dark .btn-login,
.type-black .btn-login,
.type-blue .btn-login{
    background-color: transparent!important;
    color: #fff!important;
    border-color: #fff!important;
}

.type-red .btn-login:hover,
.type-dark .btn-login:hover,
.type-black .btn-login:hover,
.type-blue .btn-login:hover{
    background-color: #fff!important;
    color: #202020!important;
    border-color: #fff!important;
}

.type-red .text-login,
.type-dark .text-login,
.type-black .text-login,
.type-blue .text-login{
    color: #fff !important;
}

/*  新規登録  */
.btn-register{
    background-color: #CC331F !important;
    color: #fff !important;
    border-color: #CC331F;
}
.btn-register:hover{
    background-color: transparent !important;
    color: #CC331F!important;
    border-color: #CC331F;
}

.type-red .btn-register{
    background-color: #facd02 !important;
    color: #202020 !important;
    border-color: #facd02;
}
.type-red .btn-register:hover{
    background-color: transparent !important;
    color: #facd02!important;
    border-color: #facd02;
}

/*  注文履歴  */
.type-black .btn-order-history
.type-blue .btn-order-history{
    background-color: transparent!important;
    color: #fff!important;
    border-color: #fff!important;
}

.type-black .btn-order-history:hover,
.type-blue .btn-order-history:hover{
    background-color: #fff!important;
    color: #202020!important;
    border-color: #fff!important;
}

/*  注文に戻る  */
.type-black .btn-back-order,
.type-red .btn-back-order,
.type-dark .btn-back-order,
.type-blue .btn-back-order{
    background-color: transparent!important;
    color: #fff!important;
    border-color: #fff!important;
    box-shadow: 0px 0px 0px!important; 
}

.type-red .btn-back-order:hover{
    background-color: #fff!important;
    color: #CC331F!important;
    border-color: #fff!important;
}
.type-black .btn-back-order:hover,
.type-dark .btn-back-order:hover,
.type-blue .btn-back-order:hover{
    background-color: #CC331F!important;
    color: #fff!important;
    border-color: #CC331F!important;
    box-shadow: 0px 0px 0px!important; 
}

/*  マイページ  */
.type-red .btn-mypage,
.type-black .btn-mypage,
.type-dark .btn-mypage,
.type-blue .btn-mypage{
    background-color: transparent!important;
    color: #fff!important;
    border-color: #fff!important;
}

.type-red .btn-mypage:hover,
.type-black .btn-mypage:hover,
.type-dark .btn-mypage:hover,
.type-blue .btn-mypage:hover{
    background-color: #fff!important;
    color: #202020!important;
    border-color: #fff!important;
}

/*  お会計  */
.type-red .btn-checkout{
    border-color: #fff!important;
}

.type-red .btn-checkout:hover{
    background-color: #fff!important;
    color: #202020!important;
}

/* ---- footer ---- */
.type-white footer{
    background-color:#f7db88;
}
.type-red footer{
    background-color: #CC331F;
    color: #fff;
}
.type-yellow footer{
    background-color: #facd02;
}
.type-black footer{
    background-color: #0f0f0f !important;
    color: #fff;
}
.type-dark footer{
    background-color: #019303!important;
    color: #fff;
}
.type-blue footer{
    background-color: #171c61 !important;
    color: #fff;
}

.type-white footer a,
.type-yellow footer a{
    color: #6c757d !important;
}

.type-red footer a,
.type-black footer a,
.type-blue footer a{
    color: #f5f5f5 !important;
} 

/* ----- reserve contents ----- */

.type-black .preparation-text,
.type-blue .preparation-text{
    color: #fff;
}

.type-white .make-text,
.type-dark .make-text{
    border-bottom: 3px solid #CC331F;
}

.type-yellow .make-text{
    border-bottom: 4px solid #facd02;
}

.type-red .make-text{
    border-bottom: 4px solid #fabda5;
}

.type-black .make-text,
.type-blue .make-text{
    border-bottom: 4px solid #8dbf67;
}

.type-white .btn-dtl-collapse,
.type-yellow .btn-dtl-collapse,
.type-red .btn-dtl-collapse,
.type-dark .btn-dtl-collapse{
    background-color: #fabda5;
}

.type-black .btn-dtl-collapse,
.type-blue .btn-dtl-collapse{
    background-color: #8dbf67;
}

.type-white .btn-reserve,
.type-red .btn-reserve,
.type-black .btn-reserve,
.type-dark .btn-reserve,
.type-blue .btn-reserve{
    background-color: #ffc107;
}

.type-yellow .btn-reserve{
    background-color: #CC331F;
    color: #fff;
}

.type-white .price-text,
.type-yellow .price-text,
.type-red .price-text,
.type-dark .price-text{
    border-bottom: 2px solid #fabda5;
}

.type-black .price-text,
.type-blue .price-text{
    border-bottom: 2px solid #8dbf67;
}