@charset "utf-8";

/* :menus
------------------------------ */
.menu-list {
max-width: 900px;
margin: 30px auto;
padding: 0 15px;
}
.menu-card {
background: #fff;
border:2px solid #4C5933;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
margin-bottom: 20px;
padding: 15px;
display: flex;
flex-direction: column;
text-align:left;
}

.menu-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}

.menu-left {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}

.attr-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.menu-title {
margin: 12px 0 0;
font-weight: 700;
font-size: 16px;
color: #222;
background:#f0f0f0;
padding:4px 8px;
}
.menu-cat {
border-radius: 5px;
padding: 2px 4px;
font-size: 11px;
color: #fff;
}
.menu-cat.evry {background: #51b0e1;border:1px solid #51b0e1;}
.menu-cat.nwcm {background: #ff8490;border:1px solid #ff8490;}
.menu-cat.rept {background: #9bca58;border:1px solid #9bca58;}
.menu-attr {
background: #fff;
border:1px solid #999;
border-radius: 5px;
padding: 2px 4px;
font-size: 11px;
color: #999;
}

.menu-time {
font-size: 0.9em;
color: #666;
white-space: nowrap;
}

.menu-price {
font-size: 22.4px;
font-weight: 700;
color: rgb(192, 74, 106);
white-space: nowrap;
text-align: right;
margin-top: 4px;
}

.desc-row {
display: flex;
flex-direction: row;
gap: 10px;
margin-top: 10px;
align-items: stretch;
}

 .menu-image-wrapper {
position: relative;
}
.menu-image {
max-width: 100px;
height: auto;
border-radius: 0px;
object-fit: cover;
cursor: pointer;
display: block;
}
.zoom-icon {
position: absolute;
top: -5px;
left: -5px;
background: rgba(255,255,255,0.8);
border:1px solid #666;
border-radius: 50%;
padding: 4px;
font-size: 14px;
color: #333;
}
.menu-desc {
font-size: 14px;
color: #444;
margin-left: 15px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-cond {
font-size: 14px;
background-color: #f5f5f5;
color: #666;
padding: 0.5em;
margin:12px 0 0;
box-sizing:border-box;
}

.menu-buttons {
margin-top: 12px;
display: flex;
gap: 12px;
width: 100%;
}
.menu-buttons button {
flex: 1;
text-align: center;
padding: 10px 0;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
font-size: 15px;
}
.toggle-additional {
border:2px solid #4C5933;
background-color: #fff;
color: #4C5933;
}
.btn-reserve {
background-color: #4C5933;
border:2px solid #4C5933;
color: white;
}

.additional-menu {
overflow: hidden;
max-height: 0px;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.4s ease;
margin-top: 12px;
}
.additional-menu.show {
max-height: 300px;  /* 必要に応じて増減可 */
overflow-y: auto;
opacity: 1;

}
.add-options label {
display: block;
font-size: 0.9em;
margin-bottom: 8px;
position: relative;
padding-left: 28px;
cursor: pointer;
}
.add-options input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 2px solid #4C5933;
border-radius: 3px;
position: relative;
vertical-align: middle;
background-color: white;
cursor: pointer;
}
.add-options input[type="checkbox"]:checked::before {
content: '\2713';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #4C5933;
font-size: 14px;
font-weight:777;
line-height: 1;
pointer-events: none;
}

.menu-caption {
position: relative;
border-left: 7px solid #ddd5b3;
margin-bottom: 0.2rem;
padding: 0.5rem;
font-weight: bold;
font-size: 16px;
width: 100%;
text-align: left;
box-sizing: border-box;
}

.image-modal {
position: fixed;
inset: 0;

background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.image-modal img {
max-width: 600px;
width: 90%;
height: auto;
border-radius: 4px;
margin: 10px 0;
}
.close-icon {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
color: white;
cursor: pointer;
background: rgba(0,0,0,0.5);
padding: 6px;
border-radius: 50%;
}
@media (min-width: 768px) {
.desc-row {
flex-direction: row;
}

}
@media (max-width: 600px) {
.menu-title {
font-size: 16px;
}
.menu-image {
max-width: 80px;
}
 .image-modal img {
max-width: 400px;

}
.menu-desc {
font-size: 14px;
margin-left:0;
}

.menu-buttons button {
font-size: 14px;
}
}