@charset "UTF-8";
/*
modal
------------------------------------------------*/
.lock {
	overflow:hidden;
}
.modal-overlay {
	width:100%;
	height:120%;
	background-color:rgba(0,0,0,0.70);
	position:fixed;
	top:0;
	left:0;
	display:none;
	z-index: 999;
}
.modal-wrap {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	overflow:auto;
	display:none;
	z-index:1000;
}
.closeBtn{
	width: 55px;
	height: 55px;
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
}

.appliModal {
	display: none;
	width:1000px;
	margin: 60px auto;
	padding: 60px 30px 0;
	position:relative;
	overflow: scroll;
}
.modalArea{
	display: none;
	max-width:980px;
	width: 90%;
	margin: 100px auto;
	position:relative;
	z-index: 1000;
	background: #fff;
	background-size: cover;
	padding: 45px;
}
.modalInfoArea {
	display: flex;
	justify-content: space-between;
	gap:26px;
}
.mdlTxtArea {
	width: 100%;
}
.mdlPhArea {
	width: 100%;
	max-width: 500px;
	display: flex;
	align-items: flex-start;
}
.mdlPhArea img{
	width: 100%;
}
.mdIntroduction{
	margin: 0 0 20px 0;
}
.mdTit{
	font-size: 2.6rem;
	color: #000;
	font-weight: bold;
	margin: 0 0 18px 0;
	padding: 0 0 20px 0;
	/*border-bottom: 1px solid #000;*/
	letter-spacing: 0.2rem;
}
.mdTxt{
	color: #000;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.8;
}
.mdIngredient{
	margin: 0 0 15px 0;
}
.mdIngredientTit,
.mdMakeTit{
	font-size: 1.8rem;
	color: #c29135;
	font-weight: bold;
	margin: 0 0 9px 0;
	padding: 0 0 6px 0;
	letter-spacing: 0.2rem;
	background-image: linear-gradient(to right, #c29135, #c29135 6px, transparent 6px);
	background-size: 10px 2px;
	background-position: left bottom;
	background-repeat: repeat-x;
}
.mdIngredientTxt{
	color: #000;
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 1.6;
	column-gap: 15px;
}
.mdMakeTxt{
	color: #000;
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 1.6;
	column-gap: 15px;
}
.mdNote{
	color:#FE3E42;
	font-size: 1.2rem;
	font-weight: normal;
	line-height: 1.4;
}
@media screen and (max-width: 812px) {
	.closeBtn{
		width: 40px;
		height: 40px;
		top: 10px;
		right: 10px;
		cursor: pointer;
	}
	.modalArea{
		width: 90%;
		max-width:650px;
		padding: 30px;
	}
	.modalInfoArea {
		display:block;
	}
	.mdlPhArea {
		width: 70%;
		margin: 0 auto 15px auto;
		max-width: 300px;
	}
	.mdTit{
		font-size: 2.5rem;
		text-align: center;
		padding: 0 0 15px 0;
	}
	.mdTxt{
		font-size: 1.2rem;
		text-align: justify;
		line-height: 1.5;
	}
	.mdIntroduction{
		margin: 0 0 15px 0;
	}
	.mdIngredient{
		margin: 0 0 10px 0;
	}
	.mdIngredientTit,
	.mdMakeTit{
		font-size: 1.4rem;
		margin: 0 0 8px 0;
		padding: 0 0 5px 0;
	}
	.mdIngredientTxt{
		font-size: 1.2rem;
		line-height: 1.4;
		row-gap:1px;
	}
	.mdMakeTxt{
		font-size: 1.2rem;
		line-height: 1.4;
	}
}