@charset "utf-8";

/*------------------------  takeout  ------------------------*/


/*------------  takeout_slide  ------------*/
.takeout_slider { padding: 20px 0 0; }
.takeout_slider .swiper { padding: 0 0 50px; }

.takeout_slider .swiper .block { display: flex; padding: 10px 0; }
.takeout_slider .swiper .pic_block { box-sizing: border-box; flex-basis: 58%; padding: 0 2%; }
.takeout_slider .swiper .txt_block { box-sizing: border-box; flex-basis: 42%; padding: 20px 2% 70px 2%; line-height: 1.3; }
.takeout_slider .swiper .txt_block .name { font-weight: 700; font-size: 24px; }
.takeout_slider .swiper .txt_block .sub { margin: 6px 0 0; font-weight: 500; font-size: 15px; }
.takeout_slider .swiper .txt_block .price { margin: 10px 0 0; font-weight: 500; font-size: 15px; }
.takeout_slider .swiper .txt_block .price span { font-weight: 700; font-size: 24px; }
.takeout_slider .swiper .txt_block .txt { margin: 20px 0 0; font-weight: 400; font-size: 15px; line-height: 1.5; }

.takeout_slider .swiper .swiper-button-prev,
.takeout_slider .swiper .swiper-rtl .swiper-button-next { left: 40%; }
.takeout_slider .swiper .swiper-button-next,
.takeout_slider .swiper .swiper-rtl .swiper-button-prev { right: 40%; }


/*------------  takeout_list  ------------*/
.takeout { padding: 0 0 40px; }
.takeout .takeout_block { position: relative; margin: 60px 0; padding: 35px 3% 45px; background: #fbf8ed; }
.takeout .takeout_block::before { content: ''; position: absolute; top: 0; left: 50%; width: 40px; height: 3px; transform: translate(-50%, 0); background: #d7282f; }
.takeout .ttl { margin: 0 auto 22px; font-weight: 700; font-size: 26px; text-align: center; }
.takeout .list { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.takeout .list .menu { flex-basis: calc(100% / 4); box-sizing: border-box; padding: 10px; }
.takeout .list .menu_block { height: 100%; }
.takeout .list .link { position: relative; display: block; box-sizing: border-box; height: 100%; background: #fff; line-height: 1.3; border-radius: 6px; overflow: hidden; }
.takeout .list .link::after { content: ''; position: absolute; bottom: 14px; right: 6%; width: 24px; height: 24px; background: url('/images/icon_modal.png') no-repeat; background-size: contain; }
.takeout .list .link .pic { padding: 14px 14px 0; }
.takeout .list .link .txt_block { padding: 15px 7% 18px; line-height: 1.3; }
.takeout .list .link .name { font-weight: 700; font-size: 16px; }
.takeout .list .link .sub { margin: 3px 0 35px; font-weight: 500; font-size: 13px; }
.takeout .list .link .price { position: absolute; bottom: 16px; left: 7%; font-weight: 500; font-size: 13px; }
.takeout .list .link .price span { font-weight: 700; font-size: 18px; }

.takeout .takeout_btn { margin: 0 auto; max-width: 400px; }
.takeout .takeout_btn .link { display: flex; justify-content: center; align-items: center; height: 60px; background: #d7282f; font-weight: 700; font-size: 15px; color: #fff; border-radius: 6px; overflow: hidden; }
.takeout .takeout_btn .link .link_label { position: relative; padding: 0 0 0 34px; }
.takeout .takeout_btn .link .link_label::after { content: ''; position: absolute; top: 50%; left: 0; width: 24px; height: 24px; transform: translate(0, -50%); background: url('/images/icon_takeout.png') no-repeat; background-size: contain; }


/*------------  modal  ------------*/
.lock { overflow: hidden; }
.modal_overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.9); z-index: 10001; }
.modal_wrap { display: none; position: fixed; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 20px; z-index: 10002; }
.modal_content { display: none; position: relative; top: 50%; left: 50%; box-sizing: border-box; transform: translate(-50%,-50%); max-width: 1080px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.15); }
.modal_block { display: flex; padding: 40px 0; }
.modal_block .pic_block { box-sizing: border-box; flex-basis: 56%; padding: 0 2%; }
.modal_block .txt_block { box-sizing: border-box; flex-basis: 44%; padding: 35px 5% 0 0; line-height: 1.3; }
.modal_block .txt_block .name { font-weight: 700; font-size: 24px; }
.modal_block .txt_block .sub { margin: 6px 0 0; font-weight: 500; font-size: 15px; }
.modal_block .txt_block .price { margin: 10px 0 0; font-weight: 500; font-size: 15px; }
.modal_block .txt_block .price span { font-weight: 700; font-size: 24px; }
.modal_block .txt_block .txt { margin: 20px 0 0; font-weight: 400; font-size: 15px; line-height: 1.5; }

.modal_close { position: absolute; top: 18px; right: 18px;  display: block; width: 42px; height: 42px; background: #d7282f; border-radius: 9999px; overflow: hidden; cursor: pointer; }
.modal_close:hover { opacity: .6; }
.modal_close span { display: block; position: absolute; width: 18px; height: 1px; background: #fff; }
.modal_close span:nth-child(1) { top: 21px; left: 12px; transform: rotate(-45deg); }
.modal_close span:nth-child(2) { top: 21px; left: 12px; transform: rotate(45deg); }



@media screen and (max-width: 1020px) {

 .takeout_slider .swiper .txt_block .name { font-size: 22px; }
 .takeout_slider .swiper .txt_block .price span { font-size: 22px; }

 .takeout .ttl { font-size: 24px; }
 .takeout .list .menu { flex-basis: calc(100% / 3); }

 .modal_block .txt_block .name { font-size: 22px; }
 .modal_block .txt_block .price span { font-size: 22px; }

}



@media screen and (max-width: 800px) {

 /*------------  takeout_slide  ------------*/
 .takeout_slider { padding: 0 0 0; }
 .takeout_slider .swiper { padding: 0 0 45px; }

 .takeout_slider .swiper .block { display: block; padding: 15px 0 0; }
 .takeout_slider .swiper .pic_block { flex-basis: auto; padding: 0 8%; }
 .takeout_slider .swiper .txt_block { flex-basis: auto; padding: 15px 5% 0; }
 .takeout_slider .swiper .txt_block .name { font-size: 18px; }
 .takeout_slider .swiper .txt_block .sub { margin: 3px 0 0; font-size: 13px; }
 .takeout_slider .swiper .txt_block .price { margin: 6px 0 0; font-size: 13px; }
 .takeout_slider .swiper .txt_block .price span { font-size: 20px; }
 .takeout_slider .swiper .txt_block .txt { margin: 10px 0 0; font-size: 14px; }

 .takeout_slider .swiper .swiper-button-prev,
 .takeout_slider .swiper .swiper-rtl .swiper-button-next { left: 5%; }
 .takeout_slider .swiper .swiper-button-next,
 .takeout_slider .swiper .swiper-rtl .swiper-button-prev { right: 5%; }


 /*------------  content  ------------*/
 .content_inner { padding: 30px 0; }

/*------------  takeout_list  ------------*/
 .takeout { padding: 0 0 20px; }
 .takeout .takeout_block { margin: 35px 0; padding: 25px 3% 32px;  }
 .takeout .takeout_block::before { width: 24px; height: 2px; }
 .takeout .ttl { margin: 0 auto 18px; font-weight: 700; font-size: 20px; text-align: center; }
 .takeout .list { margin: 0 -3px; }
 .takeout .list .menu { flex-basis: calc(100% / 2); padding: 3px; }
 .takeout .list .link::after { bottom: 12px; right: 6%; width: 20px; height: 20px; }
 .takeout .list .link .pic { padding: 10px 8px 0; }
 .takeout .list .link .txt_block { padding: 12px 7% 16px; }
 .takeout .list .link .name { font-size: 15px; }
 .takeout .list .link .sub { margin: 3px 0 30px; font-size: 13px; }
 .takeout .list .link .price { position: absolute; bottom: 14px; left: 7%; font-size: 12px; }
 .takeout .list .link .price span { font-size: 16px; }

 .takeout .takeout_btn { margin: 0 auto; max-width: 290px; }
 .takeout .takeout_btn .link { height: 50px; background: #d7282f; font-size: 14px; }
 .takeout .takeout_btn .link .link_label { position: relative; padding: 0 0 0 30px; }
 .takeout .takeout_btn .link .link_label::after { width: 20px; height: 20px; }

/*------------  modal  ------------*/
 .modal_wrap { padding: 0; }
 .modal_overlay { background: #fff; overflow: scroll; }
 .modal_content { width: 100%; height: 100%; overflow: scroll; }
 .modal_block { display: block; box-sizing: border-box; padding: 45px 0; }
 .modal_block .pic_block { flex-basis: auto; padding: 0 8%; }
 .modal_block .txt_block { flex-basis: auto; padding: 25px 5% 0; }
 .modal_block .txt_block .name { font-size: 18px; }
 .modal_block .txt_block .sub { margin: 3px 0 0; font-size: 13px; }
 .modal_block .txt_block .price { margin: 6px 0 0; font-size: 13px; }
 .modal_block .txt_block .price span { font-size: 20px; }
 .modal_block .txt_block .txt { margin: 14px 0 0; font-size: 14px; }
 .modal_close { top: 14px; right: 14px; width: 40px; height: 40px; }
 .modal_close:hover { opacity: inherit; }
 .modal_close span { width: 16px; height: 1px; }
 .modal_close span:nth-child(1) { top: 20px; left: 12px; }
 .modal_close span:nth-child(2) { top: 20px; left: 12px; }

}