/*------------------------------------
モーダル中身
------------------------------------*/
#single-lunch {width: calc(100% + 17px); margin: 0; padding: 0 17px 0 0; overflow-x: hidden; overflow-y: scroll; background: url(../img/bg.jpg);}
#single-lunch img {width: 520px; height: 360px; margin: 40px auto; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50% 50%;';}
#single-lunch h3 {color: #fff; line-height: 30px; background: #231815; padding: 6px 16px;}
#single-lunch h3 span,#single-lunch h3 small {color: #fff;}
#single-lunch span {font-size: 22px; margin-left: 14px;}
#single-lunch span:first-child {margin-left: 0;} 
#single-lunch h3 small {font-size: 16px;}
#single-lunch .text {padding: 0 20px;}
#single-lunch .text li {padding: 32px 4px; border-bottom: 1px dotted #c7af45;}
#single-lunch .text li:last-child {border-bottom: none;}
#single-lunch .text h4 {font-size: 18px; line-height: 1.5; margin-bottom: 1em; padding-left: 8px; border-left: 4px solid #977f15;}
#single-lunch .text p {font-size: 15px;}

/*------------------------------------
メニューモーダル
------------------------------------*/
#modal {
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-40%);
	width: 800px;
	height: 90vh;
	opacity: 0;
	visibility: hidden;
	transition: .5s ease;
	z-index: 2000;
}
#modal *:focus {outline:none;}
#modal .close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 42px;
	height: 42px;
	margin: 0;
	background: #630606;
	border-radius: 50%;
	visibility: hidden;
	transition: .5s ease;
	opacity: 0;
}
#modal .close:before,
#modal .close:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: calc(50% - 12px);
	width: 24px;
	height: 1px;
	background: #fff;
}
#modal .close:before {transform: rotate(45deg);}
#modal .close:after {transform: rotate(135deg);}
#overlay {
	display: block;
	position: fixed;
	transform-origin: top;
	background: #000;
	opacity: 0;
	height: 200%;
	width: 200%;
	left: 0;
	top: 0;
	visibility: hidden;
	transition: .3s ease;
	z-index: 1999;
}
#iframecontainer {width: 800px; height: 90vh; overflow: hidden; opacity: 0; visibility: hidden; transition: .5s ease;}
#iframecontainer iframe {width: 100%; height: 100%; border: none; background: #fff; overflow: hidden; opacity: 0; visibility: hidden; transition: .5s ease;}
.modal_open #modal,
.modal_open #modal .close,
.modal_open #overlay,
.modal_open #iframecontainer,
.modal_open #iframecontainer iframe {visibility: visible; opacity: 1; transition: .53s ease;}
.modal_open #modal {transform: translate(-50%,-50%);}
.modal_open #overlay {opacity: 0.75;}

@media screen and (max-width: 768px) and (min-width: 641px) {
	#single-lunch {width: 100%; margin: 0; padding: 0;}
	#modal {width: 700px;}
	#iframecontainer {width: 700px;}
	#iframecontainer iframe {width: 700px;}
}

@media screen and (max-width: 640px) and (min-width: 0px) {
	#single-lunch img {width: 100%; height: 65vw; margin: 0;}
	#single-lunch h3 {line-height: 30px; background: #231815; padding: 6px 8px;}
	#single-lunch h3 span,#single-lunch h3 small {color: #fff;}
	#single-lunch span {font-size: 18px; margin-left: 10px;}
	#single-lunch h3 small {font-size: 12px;}
	#single-lunch .text {width: calc(100% - 37px); padding: 0 10px;}
	#single-lunch .text li {padding: 16px 4px;}
	#single-lunch .text h4 {font-size: 16px; line-height: 1.5; margin-bottom: .8em; padding-left: 8px; border-left: 4px solid #977f15;}
	#single-lunch .text p {font-size: 14px;}

	#modal {width: 90vw; height: 80vh;}
	#iframecontainer {width: 90vw; height: 80vh;}
	#iframecontainer iframe {width: 90vw; height: 80vh;}
}