@charset "utf-8";
/* ===================================================
	Dish CSS
====================================================== */
/* ---------------------------------------------------
	Main title
------------------------------------------------------ */
.box_maintit{ background-image: url("../../img/dish/main_img.jpg");}
.box_maintit .tit{ width: 500px; height: 144px;}

@media screen and (max-width: 600px) {
.box_maintit .tit{ width: 300px; height: 86px; top: 74px; bottom: inherit;}
}


/* ---------------------------------------------------
	Slick Slider Style Overwrite
------------------------------------------------------ */
.slick-arrow {  cursor: pointer; color: transparent; border: none; outline: none; background: transparent; width: 25px; height: 0; padding: 50px 0 0; top: calc(50% - 25px); left: auto; z-index: 10; overflow: hidden; position: absolute;}
.slick-arrow:before { content: ''; width: 35px; height: 35px; position: absolute; top: 50%; left: 50%; opacity: 1; -webkit-box-sizing: border-box; box-sizing: border-box; transform: translate(-50%, -50%) rotate(45deg);}
.slick-prev { left: 0;}
.slick-prev:before { margin: 0 0 0 calc(25px / 2); border-left: 1px solid #fff; border-bottom: 1px solid #fff;}
.slick-next { right: 0;}
.slick-next:before { margin: 0 0 0 calc(-25px / 2); border-right: 1px solid #fff; border-top: 1px solid #fff;}
.slick-dots { text-align: center; padding: 5px 0 0; position: absolute; bottom: 20px; width: 100%;}
.slick-dots li { display: inline-block; margin: 0 10px;}
.slick-dots li button { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; text-indent: -9999px;}
.slick-dots li button:before { content: "●"; font-size: 14px; text-indent: 0px; position: absolute; top: 0; left: 0; color: #ccc; font-family: 'Noto Serif JP'; }
.slick-dots li.slick-active button:before { color: #529b44;}

@media screen and (max-width: 600px) {
.slick-arrow:before { width: 20px; height: 20px;}
.slick-dots { bottom: 10px;}
}


/* ---------------------------------------------------
	Section lead
------------------------------------------------------ */
#sec_lead{ display: flex; clear: both; overflow: hidden; padding: 70px 0 100px;}
#sec_lead .box1{ width: 14%; order: 2;}
#sec_lead .box2{ width: 43%; order: 3;}
#sec_lead .box3{ width: 43%; order: 1;}
#sec_lead h2{ font-size: 36px; line-height: 1.5; color: #8e5b0c; display: block; height: 14em; width: 3em; margin: 15px auto 0;}
#sec_lead .img2{ float: right;}
#sec_lead .box_txt{ width: 100%; max-width: 550px; padding: 40px 40px 0 0; box-sizing: border-box; font-size: 15px; line-height: 2;}

@media screen and (max-width: 600px) {
#sec_lead{ flex-direction: column; padding: 30px 0 40px; width: 92%; margin: 0 auto;}
#sec_lead .box1{ width: 100%; order: 1;}
#sec_lead .box2{ width: 100%; order: 2;}
#sec_lead .box3{ width: 100%; order: 3;}
#sec_lead h2{ font-size: 22px; line-height: 1.5; height: auto; width: 100%; margin: 0 0 15px 0; text-align: center; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb;}
#sec_lead .img1{ width: 100%; height: auto;}
#sec_lead .img2{ float: none; width: 100%; height: auto;}
#sec_lead .box_txt{ width: 100%; max-width: 100%; padding: 15px 0; box-sizing: border-box; font-size: 14px; line-height: 1.7;}
}

@media screen and (max-width: 320px) {
#sec_lead h2{ font-size: 20px;}
}


/* ---------------------------------------------------
	Section 1
------------------------------------------------------ */
#sec1{ background: #faf7f7; padding: 100px 0 20px;}
#sec1 .txt1{ font-size: 15px; line-height: 2; text-align: center; padding: 40px 0;}
#sec1 .box_flex2,
#sec1 .box_flex3{ width: 92%; max-width: 1410px; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap; box-sizing: content-box;}
#sec1 .box_flex2 .box_food{ width: 50%; max-width: 705px; padding: 0 5px;}
#sec1 .box_flex3 .box_food{ width: 33.3%; max-width: 470px; padding: 0 5px;}
#sec1 .box_food{ box-sizing: border-box; margin: 0 0 70px; position: relative;}
#sec1 .box_food .inner{ position: relative;}
#sec1 .box_food .img{ position: relative; z-index: 1; width: 100%; height: auto;}
#sec1 .box_food h3{ position: absolute; z-index: 2; bottom: 10px; left: 25px; font-size: 36px; line-height: 1.5; color: #fff; text-shadow: 0px 0px 5px rgba(0,0,0,0.3);}
#sec1 .box_food p{ padding: 15px 25px 0; font-size: 15px; line-height: 2;}

@media screen and (max-width: 600px) {
#sec1{ padding: 40px 0 10px;}
#sec1 .txt1{ font-size: 14px; line-height: 1.7; text-align: left; padding: 0 4% 20px;}
#sec1 .box_flex2,
#sec1 .box_flex3{ flex-direction: column;}
#sec1 .box_flex2 .box_food{ width: 100%; max-width: 100%; padding: 0;}
#sec1 .box_flex3 .box_food{ width: 100%; max-width: 100%; padding: 0;}
#sec1 .box_food{ margin: 0 0 30px;}
#sec1 .box_food h3{ bottom: 5px; left: 15px; font-size: 24px;}
#sec1 .box_food p{ padding: 10px 0 0; font-size: 14px; line-height: 1.7;}
}

@media screen and (max-width: 320px) {
#sec1 .box_food h3{ font-size: 22px;}
}


/* ---------------------------------------------------
	Section 2
------------------------------------------------------ */
#sec2{ padding: 100px 0;}
#sec2 .slick-slide{ width: 1000px !important; margin: 0 30px;}
#sec2 .slick-prev { left: 50%; margin: 0 0 0 -545px;}
#sec2 .slick-prev:before { border-left: 1px solid #000; border-bottom: 1px solid #000;}
#sec2 .slick-next { right: 50%; margin: 0 -545px 0 0;}
#sec2 .slick-next:before { border-right: 1px solid #000; border-top: 1px solid #000;}
#sec2 .sec_cuisine{ width: 92%; max-width: 1400px; margin: 80px auto; display: flex; justify-content: space-between; align-items: flex-start; box-sizing: border-box;}
#sec2 .sec_cuisine .box_txt{ width: 40%; max-width: 550px;}
#sec2 .sec_cuisine h3{ font-size: 36px; line-height: 1.5; padding: 0 0 10px; border-bottom: solid 1px #aaa;}
#sec2 .sec_cuisine .txt1{ font-size: 26px; line-height: 1.5; padding: 30px 0 0; color: #8e5b0c;}
#sec2 .sec_cuisine .txt2{ font-size: 15px; line-height: 2; padding: 20px 0 0;}
#sec2 .sec_cuisine .box_btns{ display: flex; justify-content: space-between;}
#sec2 .sec_cuisine .cmn_btn2{ width: 48%;}
#sec2 .sec_cuisine .cmn_btn2 span{}
#sec2 .sec_cuisine .cmn_btn2 span::before,
#sec2 .sec_cuisine .cmn_btn2 span::after{ content: ""; display: block; background: #aaa; width: 15px; height: 1px; position: absolute; top: 11px; right: 20px;}
#sec2 .sec_cuisine .cmn_btn2 span::after{ transform: rotate(90deg); transform-origin: center center;}
#sec2 .sec_cuisine .cmn_btn2:hover span::before,
#sec2 .sec_cuisine .cmn_btn2:hover span::after{ background: #fff;}
#sec2 .sec_cuisine .cmn_btn1{ width: 48%; margin: 25px 0 0;}
#sec2 .sec_cuisine .box_img{ width: 53%; max-width: 750px;}
#sec2 .sec_cuisine .box_img img{ width: 100%; height: auto}
#sec2 .sec_buffet{ width: 92%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; padding: 50px; border: solid 1px #8e5b0c; box-sizing: border-box;}
#sec2 .sec_buffet .box_txt{ width: 50%; max-width: 650px;}
#sec2 .sec_buffet h3{ font-size: 36px; line-height: 1.5;}
#sec2 .sec_buffet .txt1{ font-size: 20px; line-height: 1.5; padding: 10px 0 20px; color: #8e5b0c;}
#sec2 .sec_buffet .txt2{ font-size: 15px; line-height: 2; padding: 20px 0 10px; border-top: solid 1px #aaa;}
#sec2 .sec_buffet .note1,
#sec2 .sec_buffet .note2{ font-size: 15px; line-height: 2; padding: 0 0 0 1em; text-indent: -1em;}
#sec2 .sec_buffet .note1{ color: #ff0000;}
#sec2 .sec_buffet .box_img{ width: 46%; max-width: 600px;}
#sec2 .sec_buffet .box_img img{ width: 100%; height: auto}

@media screen and (max-width: 600px) {
#sec2{ padding: 20px 0 40px; overflow: hidden;}
#sec2 .slick-slide{ width: 320px!important;}
#sec2 .slick-prev { margin: 0 0 0 -192px;}
#sec2 .slick-next { margin: 0 -192px 0 0;}
#sec2 .sec_cuisine{ width: 92%; max-width: 92%; margin: 10px auto 30px; flex-direction: column;}
#sec2 .sec_cuisine .box_txt{ width: 100%; max-width: 100%; padding: 0 0 20px;}
#sec2 .sec_cuisine h3{ font-size: 22px; line-height: 1.5; padding: 0 0 10px;}
#sec2 .sec_cuisine .txt1{ font-size: 18px; line-height: 1.5; padding: 10px 0 0;}
#sec2 .sec_cuisine .txt2{ font-size: 14px; line-height: 1.7; padding: 10px 0 0;}
#sec2 .sec_cuisine .box_btns{ flex-direction: column;}
#sec2 .sec_cuisine .cmn_btn2{ width: 280px;}
#sec2 .sec_cuisine .cmn_btn2 span{ font-size: 14px;}
#sec2 .sec_cuisine .cmn_btn1{ width: 280px; font-size: 14px; padding: 10px 0; margin: 15px auto 0;}
#sec2 .sec_cuisine .box_img{ width: 100%; max-width: 100%;}
#sec2 .sec_buffet{ width: 92%; max-width: 92%; padding: 4%; flex-direction: column;}
#sec2 .sec_buffet .box_txt{ width: 100%; max-width: 100%; padding: 0 0 15px;}
#sec2 .sec_buffet h3{ font-size: 22px; line-height: 1.5;}
#sec2 .sec_buffet .txt1{ font-size: 18px; line-height: 1.5; padding: 10px 0 10px; color: #8e5b0c;}
#sec2 .sec_buffet .txt2{ font-size: 14px; line-height: 1.7; padding: 10px 0 10px; border-top: solid 1px #aaa;}
#sec2 .sec_buffet .note1,
#sec2 .sec_buffet .note2{ font-size: 14px; line-height: 1.7;}
#sec2 .sec_buffet .box_img{ width: 100%; max-width: 100%;}
}

/* お品書きブロック */
.inline-block { position: relative; margin: 10px auto; padding: 70px 50px 25px; width: 560px; max-width: 92%; background: #faf7f7; box-sizing: border-box;}
.inline-block h4{ text-align: center; margin: 0 0 50px;}
.inline-block h4 .ja{ display: inline-block; font-size: 30px; color: #007130; line-height: 1.5; padding: 0 5px 10px; border-bottom: solid 1px #aaa;}
.inline-block h4 .en{ display: block; margin: 0 auto; font-size: 15px; line-height: 1; padding: 15px 0 0;}
.inline-block dl{ width: 100%; display: table;}
.inline-block dt,
.inline-block dd{ display: table-cell; font-size: 20px; line-height: 1.5; padding: 0 0 10px;}
.inline-block dt{ width: 5em; color: #007130;}
.inline-block small{ font-size: 14px; letter-spacing: 0;}
.inline-block .box_note{ padding: 20px 0 0;}
.inline-block .box_note p{ font-size: 15px; line-height: 2; padding: 0 0 0 1em; text-indent: -1em;}
.inline-block .popup-modal-close { text-align: center;}
.inline-block .popup-modal-close a{ display: block; width: 60px; height: 20px; padding: 40px 0 0; margin: 0 auto; font-size: 15px; position: relative;}
.inline-block .popup-modal-close a::before,
.inline-block .popup-modal-close a::after{ content: ""; display: block; width: 40px; height: 2px; background: #666; position: absolute; top: 20px; left: 0; right: 0; margin: 0 auto;}
.inline-block .popup-modal-close a::before{ transform: rotate(45deg);}
.inline-block .popup-modal-close a::after{ transform: rotate(-45deg);}
.mfp-close{ width: 70px !important; height: 70px !important; text-indent: 100%; white-space: nowrap; overflow: hidden;}
.mfp-close::before,
.mfp-close::after{ content: ""; display: block; width: 40px; height: 2px; background: #666; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto auto;}
.mfp-close::before{ transform: rotate(45deg);}
.mfp-close::after{ transform: rotate(-45deg);}

@media screen and (max-width: 600px) {
.inline-block { padding: 50px 4% 4%; width: 92%; max-width: 92%;}
.inline-block h4{ margin: 0 0 20px;}
.inline-block h4 .ja{ font-size: 20px; line-height: 1.5; padding: 0 5px 10px;}
.inline-block h4 .en{ font-size: 14px; padding: 15px 0 0;}
.inline-block dt,
.inline-block dd{ font-size: 16px; line-height: 1.5; padding: 0 0 5px;}
.inline-block small{ font-size: 12px; letter-spacing: 0;}
.inline-block .box_note{ padding: 10px 0 0;}
.inline-block .box_note p{ font-size: 12px; line-height: 1.7;}
.inline-block .popup-modal-close a{ font-size: 13px;}
.inline-block .popup-modal-close a::before,
.inline-block .popup-modal-close a::after{ width: 30px; top: 25px;}
.mfp-close{ width: 50px !important; height: 50px !important;}
.mfp-close::before,
.mfp-close::after{ width: 30px;}
}

/* ---------------------------------------------------
	Section 3
------------------------------------------------------ */
#sec3{ background: #faf7f7; padding: 100px 0;}
#sec3 .txt1{ font-size: 26px; line-height: 1.7; text-align: center;}
#sec3 .txt2{ font-size: 15px; line-height: 2; text-align: center; padding: 15px 0 0;}
#sec3 .txt2_end{ font-size: 15px; line-height: 2; text-align: center; padding: 0 0 50px;}
#sec3 .box_flex3{ width: 92%; max-width: 1410px; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap; box-sizing: content-box;}
#sec3 .box_flex3 .box_food{ width: 33.3%; max-width: 470px; padding: 0 5px; box-sizing: border-box; margin: 0 0 70px;}
#sec3 .box_food .img{ width: 100%; height: auto;}
#sec3 .box_food .inner{ padding: 15px 25px;}
#sec3 .box_food h3{ font-size: 24px; line-height: 1.5;}
#sec3 .box_food .price{ font-size: 15px; line-height: 1.5; padding: 0 0 20px;}
#sec3 .box_food .price em{ font-size: 24px; font-style: normal;}
#sec3 .box_food .txt3{ font-size: 15px; line-height: 2;}
#sec3 .box_food .note{ font-size: 14px; line-height: 2; padding: 0 0 0 1em; text-indent: -1em; letter-spacing: 0;}
#sec3 .box_cake{ width: 92%; max-width: 1410px; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap; box-sizing: border-box;}
#sec3 .box_cake > div{ width: 33.3%; max-width: 460px; padding: 0 5px; }
#sec3 .box_cake .box_img img{ width: 100%; height: auto;}
#sec3 .box_cake .box_txt,
#sec3 .box_cake .box_note{ padding: 0 0 0 25px; font-size: 15px; line-height: 2; letter-spacing: 0;}
#sec3 .box_cake h3{ font-size: 24px; line-height: 1.5; padding: 0 0 20px;}
#sec3 .box_cake h3 small{ font-size: 15px;}
#sec3 .box_cake .box_note p{ font-size: 14px; line-height: 2; padding: 0 0 0 1em; text-indent: -1em; letter-spacing: 0;}

@media screen and (max-width: 600px) {
#sec3{ padding: 40px 0;}
#sec3 .txt1{ font-size: 18px; line-height: 1.7; text-align: center;}
#sec3 .txt2{ font-size: 14px; line-height: 1.7; text-align: left; padding: 10px 4% 0;}
#sec3 .txt2_end{ font-size: 14px; line-height: 1.7; text-align: left; padding: 0 4% 30px;}
#sec3 .box_flex3{ flex-direction: column;}
#sec3 .box_flex3 .box_food{ width: 100%; max-width: 100%; padding: 0; margin: 0 0 30px;}
#sec3 .box_food .inner{ padding: 10px 0;}
#sec3 .box_food h3{ font-size: 22px; line-height: 1.5;}
#sec3 .box_food .price{ font-size: 14px; line-height: 1.5; padding: 0 0 10px;}
#sec3 .box_food .price em{ font-size: 20px;}
#sec3 .box_food .txt3{ font-size: 14px; line-height: 1.7;}
#sec3 .box_food .note{ font-size: 13px; line-height: 1.7;}
#sec3 .box_cake{ flex-direction: column;}
#sec3 .box_cake > div{ width: 100%; max-width: 100%; padding: 0; }
#sec3 .box_cake .box_txt,
#sec3 .box_cake .box_note{ padding: 10px 0; font-size: 14px; line-height: 1.7; letter-spacing: 0;}
#sec3 .box_cake h3{ font-size: 22px; line-height: 1.5; padding: 0 0 10px;}
#sec3 .box_cake h3 small{ font-size: 14px;}
#sec3 .box_cake .box_note p{ font-size: 13px; line-height: 1.7;}
}


/* ---------------------------------------------------
	Section 4
------------------------------------------------------ */
#sec4{ padding: 100px 0 150px;}
#sec4 .box1{ width: 92%; max-width: 1400px; margin: 0 auto 10px; display: flex; justify-content: space-between; align-items: flex-start; box-sizing: border-box;}
#sec4 .box1 .box_txt{ width: 39%; max-width: 510px; padding: 25px 0; box-sizing: border-box;}
#sec4 .txt1{ font-size: 26px; line-height: 1.7; color: #007130;}
#sec4 .txt2{ font-size: 15px; line-height: 2; padding: 15px 0 0;}
#sec4 .note{ font-size: 15px; line-height: 2; padding: 0 0 0 1em; text-indent: -1em;}
#sec4 .box1 .box_img{ width: 57%; max-width: 800px;}
#sec4 .box_flex3{ width: 92%; max-width: 1410px; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap; box-sizing: content-box;}
#sec4 .box_flex3 .box_food{ width: 33.3%; max-width: 470px; padding: 0 5px; box-sizing: border-box; margin: 0 0 70px;}
#sec4 .box_flex3 .box_food img{ width: 100%; height: auto;}
#sec4 .box_flex3 .box_food p{ padding: 10px 10px 0 20px; font-size: 15px; line-height: 2;}

@media screen and (max-width: 600px) {
#sec4{ padding: 40px 0;}
#sec4 .box1{ flex-direction: column;}
#sec4 .box1 .box_txt{ width: 100%; max-width: 100%; padding: 10px 0; box-sizing: border-box;}
#sec4 .txt1{ font-size: 22px; line-height: 1.5; color: #007130;}
#sec4 .txt2{ font-size: 14px; line-height: 1.7; padding: 10px 0 0;}
#sec4 .note{ font-size: 14px; line-height: 1.7;}
#sec4 .box1 .box_img{ width: 100%; max-width: 100%;}
#sec4 .box_flex3{ flex-direction: column;}
#sec4 .box_flex3 .box_food{ width: 100%; max-width: 100%; padding: 0; margin: 0 0 30px;}
#sec4 .box_flex3 .box_food p{ padding: 10px 0 0; font-size: 14px; line-height: 1.7;}
}