﻿.board_menu_check {border:1px solid #e72e59; padding:20px 25px; box-sizing:border-box;}
.board_menu_check ul {display:flex; flex-wrap:wrap; margin-left:-60px; width:calc(100% + 60px);}
.board_menu_check ul li {margin:10px 0 10px 60px;}

.board_menu_check label,
.board_menu_check input[type="radio"] + span,
.board_menu_check input[type="radio"] + span::before,
.board_menu_check input[type="checkbox"] + span,
.board_menu_check input[type="checkbox"] + span::before,
{
    display: inline-block;
    vertical-align: middle;
}
 
.board_menu_check label *
{
    cursor: pointer;
}
 
.board_menu_check input[type="radio"],.board_menu_check input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
}
 


.board_menu_check input[type="radio"] + span,.board_menu_check input[type="checkbox"] + span
{
    font-size:20px; color:#444;
	 font-weight:500;
}

 

 
.board_menu_check input[type="radio"] + span::before,.board_menu_check input[type="checkbox"] + span::before
{
    content: "";
    width: 31px;
    height: 33px;
    margin: -2px 10px 0 0;
	vertical-align:top;
     display:inline-block;
    background:url(../images/menu_check_off.png) no-repeat 0 0;
}
.board_menu_check input[type="radio"]:checked + span::before,.board_menu_check input[type="checkbox"]:checked + span::before
{
    background:url(../images/menu_check_on.png) no-repeat 0 0;
}

.board_menu_check input[type="radio"]:checked + span,.board_menu_check input[type="checkbox"]:checked + span {
color:#e72e59;
font-weight:600;
}
 
.board_menu_check input[type="radio"]:disabled + span,.board_menu_check input[type="checkbox"]:disabled + span
{
    cursor: default;
     
    -moz-opacity: .4;
    -webkit-opacity: .4;
    opacity: .4;
}


.menu_btit {color:#121212; font-size:40px; padding:50px 0 40px 40px; font-weight:500;}

.food_list {margin-left:-40px; width:calc(100% + 40px);}
.food_list li {margin-left:0; /*width:307px;*/ width:calc((100%/4) - 40px); margin-left:40px;}
.food_list li a {position:Relative;}
.food_list li a:hover .on {opacity:1;}
.food_list li .img {padding-bottom:100%;}
.food_list li .txt {margin-top:30px; padding-bottom:10px;}







@media screen and (min-width:1430px){
.food_list li {width:307px;}
}

@media screen and (min-width:768px){
.food_list li .on {position:absolute; opacity:0; top:0; left:0; height:100%; box-sizing:border-box; width:100%; border:8px solid #e72e59; background:rgba(0,0,0,0.2); transition:opacity ease 0.3s; z-index:5;}

}


@media screen and (max-width:767px){
.board_menu_check {padding:4vw 4.5vw;}
.board_menu_check ul {margin-left:-8vw; width:calc(100% + 8vw);}
.board_menu_check ul li {margin:3vw 0 3vw 8vw;}
.board_menu_check input[type="radio"] + span, .board_menu_check input[type="checkbox"] + span {font-size:4vw;}
.board_menu_check input[type="radio"] + span::before, .board_menu_check input[type="checkbox"] + span::before {background-size:100% auto!important; width:6vw; height:6.5vw; margin:-0.4vw 1vw 0 0;}

.food_list {margin-left: -4vw; margin-top:-4vw;   width: calc(100% + 4vw);}
.food_list li { width: calc((100%/3) - 4vw); margin-left:4vw; margin-top:4vw;}	
.food_list li .txt {margin-top:6vw; padding-bottom:3vw;}

.menu_btit {padding:8vw 0 7vw 5vw; font-size:7vw;}

.board_menu_check input[type="radio"] + span, .board_menu_check input[type="checkbox"] + span {}
}