@charset "utf-8";

@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css");
 
 main {
    background: var(--white);
}


#menu-detail .menuhead {
    display: flex;
    justify-content: space-between;
    margin-bottom: 175px;
}
#menu-detail .menuImg {
    width: 43%;
}
.menu-main-img {
    border-radius: 10px;
}


/**** メニュースライダー ****/
#menu-detail .slick-prev:before, #menu-detail .slick-next:before {
    color: #5b433e;
}
#menu-detail .slick-prev {
    left: 8px;
    z-index: 1;
}
#menu-detail .slick-next {
    right: 8px;
    z-index: 1;
}
.menuslide-thumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.menuslide-thumb__item {
    width: calc(25% - 6px); /* 4列の場合 */
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.menuslide-thumb__item.is-active,
.menuslide-thumb__item:hover {
    opacity: 1;
}
.menuslide-thumb__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}





#menu-detail p.menu-remarks, #menu-detail p.menu-img-remarks {
    font-size: 14px;
}


#menu-detail .menuTxt {
    width: 53%;
}
.menu-title-logo {
    width: 150px;
    padding: 10px 0 0;
}
#menu-detail h2.menu-title {
    font-size: 35px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.2;
    margin: 10px 0;
}
#menu-detail h3.menu-price {
    font-size: 27px;
    font-weight: 700;
    line-height: normal;
}
#menu-detail p.menu-explanation {
    margin: 50px 0;
}



    @media (max-width: 768px) {
#menu-detail .menuhead {
    display: block;
    margin-bottom: 100px;
}
#menu-detail .menuImg {
    width: 100%;
    margin-bottom: 50px;
}
#menu-detail p.menu-explanation {
    margin: 30px 0;
}
#menu-detail .menuTxt {
    width: 100%;
}
#menu-detail h2.menu-title {
    font-size: 24px;
}
#menu-detail h3.menu-price {
    font-size: 24px;
}
	}




  .allergen-wrap {
  	display: grid;
  	grid-template-columns: repeat(6, 1fr);
  	grid-template-rows: repeat(5, 1fr);
  	row-gap: 2%;
  	column-gap: 1%;
  	width: 100%;
  	height: 100%;
  	margin-bottom: 80px;
  	/* allergen-wrap縺ｮ荳九↓菴咏區繧定ｿｽ蜉� */
  }

  .allergen-col {
  	text-align: center;
  	border: 1px solid #B3B3B3;
  	font-size: min(1vw, 15px);
  	line-height: normal;
  	font-weight: 700;
  }

  .allergen-kinds {
  	padding: .5em;
  	border-bottom: 1px dashed #B3B3B3;
  	opacity: 0.5;
  }

  .allergen-kinds span {
  	display: none;
  }

  .allergen-kinds span {
  	display: inline-block;
  	width: 37.68px;
  	height: 34.56px;
  	background-repeat: no-repeat;
  	background-size: contain;
  	vertical-align: middle;
  }


  .allergen-kinds span.almond-icon {
  	background-image: url(../imgs/menu/allergen/almond_icon.svg);
  }

  .allergen-kinds span.cashewnuts-icon {
  	background-image: url(../imgs/menu/allergen/cashewnuts_icon.svg);
  }

  .allergen-kinds span.sesame-icon {
  	background-image: url(../imgs/menu/allergen/sesame_icon.svg);
  }

  .allergen-kinds span.yamaimo-icon {
  	background-image: url(../imgs/menu/allergen/yamaimo_icon.svg);
  }

  .allergen-kinds span.banana-icon {
  	background-image: url(../imgs/menu/allergen/banana_icon.svg);
  }

  .allergen-kinds span.salmon-icon {
  	background-image: url(../imgs/menu/allergen/salmon_icon.svg);
  }

  .allergen-kinds span.matsutake-icon {
  	background-image: url(../imgs/menu/allergen/matsutake_icon.svg);
  }

  .allergen-kinds span.awabi-icon {
  	background-image: url(../imgs/menu/allergen/awabi_icon.svg);
  }

  .allergen-kinds span.kiwi-icon {
  	background-image: url(../imgs/menu/allergen/kiwi_icon.svg);
  }

  .allergen-kinds span.orange-icon {
  	background-image: url(../imgs/menu/allergen/orange_icon.svg);
  }

  .allergen-kinds span.ikura-icon {
  	background-image: url(../imgs/menu/allergen/ikura_icon.svg);
  }

  .allergen-kinds span.squid-icon {
  	background-image: url(../imgs/menu/allergen/squid_icon.svg);
  }

  .allergen-kinds span.peach-icon {
  	background-image: url(../imgs/menu/allergen/peach_icon.svg);
  }

  .allergen-kinds span.apple-icon {
  	background-image: url(../imgs/menu/allergen/apple_icon.svg);
  }

  .allergen-kinds span.gelatine-icon {
  	background-image: url(../imgs/menu/allergen/gelatine_icon.svg);
  }

  .allergen-kinds span.beef-icon {
  	background-image: url(../imgs/menu/allergen/beef_icon.svg);
  }

  .allergen-kinds span.chicken-icon {
  	background-image: url(../imgs/menu/allergen/chicken_icon.svg);
  }

  .allergen-kinds span.pork-icon {
  	background-image: url(../imgs/menu/allergen/pork_icon.svg);
  }

  .allergen-kinds span.mackerel-icon {
  	background-image: url(../imgs/menu/allergen/mackerel_icon.svg);
  }

  .allergen-kinds span.beans-icon {
  	background-image: url(../imgs/menu/allergen/beans_icon.svg);
  }

  .allergen-kinds span.walnut-icon {
  	background-image: url(../imgs/menu/allergen/walnut_icon.svg);
  }

  .allergen-kinds span.crab-icon {
  	background-image: url(../imgs/menu/allergen/crab_icon.svg);
  }

  .allergen-kinds span.shrimp-icon {
  	background-image: url(../imgs/menu/allergen/shrimp_icon.svg);
  }

  .allergen-kinds span.soba-icon {
  	background-image: url(../imgs/menu/allergen/soba_icon.svg);
  }

  .allergen-kinds span.peanut-icon {
  	background-image: url(../imgs/menu/allergen/peanut_icon.svg);
  }

  .allergen-kinds span.wheat-icon {
  	background-image: url(../imgs/menu/allergen/wheat_icon.svg);
  }

  .allergen-kinds span.milk-icon {
  	background-image: url(../imgs/menu/allergen/milk_icon.svg);
  }

  .allergen-kinds span.egg-icon {
  	background-image: url(../imgs/menu/allergen/egg_icon.svg);
  }

  .allergen-included {
  	height: 30px;
  	display: flex;
  	align-items: center;
  	text-align: center;
  	justify-content: center;
  }

  .allergen-included span.ingredients {
  	display: none;
  	width: 11px;
  	height: 11px;
  	border-radius: 11px;
  	background-color: #5B433E;
  }

  .allergen-included span.process {
  	display: none;
  	width: 11px;
  	height: 11px;
  	border: solid 1px #5B433E;
  }

 
  .allergen-col.ingredients-included,
  .allergen-col.process-included {
  	background-color: #FDFACE;
  }

  .allergen-col.ingredients-included .allergen-kinds,
  .allergen-col.process-included .allergen-kinds {
  	opacity: 1;
  }

  .allergen-col.ingredients-included .allergen-included span.ingredients {
  	display: block;
  }

  .allergen-col.process-included .allergen-included span.process {
  	display: block;
  }

.allergenNote {
    font-weight: 500;
}
  .allergenNotegray {
    background-color: var(--cream);
    font-weight: 400;
    padding: 35px 30px;
    margin: 45px 0;
  }



    @media (max-width: 768px) {
		  	.allergen-wrap {
  		grid-template-columns: repeat(3, 1fr);
  		grid-template-rows: repeat(10, 1fr);
  		row-gap: 1%;
  		column-gap: 1%;
  	}

  	.allergen-kinds span {
  		width: 25.622px;
  		height: 23.501px;
  	}

  	.allergen-col {
  		font-size: 10px;
  	}
}