@charset "utf-8";

/* 予約モーダル */

.modal-btn  {width: 260px; margin: 30px auto 0;}
.modal-btn a {position: relative; padding: 15px; text-align: center; border-radius: 5px; max-width: 300px; background-color: #660000; display: block; margin: 0 auto; color: #f5f5f5 !important; text-decoration: none !important;}
.modal-btn a::after {content: '';display: block;position: absolute;right: 8px;top: 45%;margin-top: -2px;width: 6px;height: 6px;border-top: 2px solid #f5f5f5;border-right: 2px solid #f5f5f5;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.modal-open{}
.modal-container{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);padding: 40px 20px;overflow: auto;opacity: 0;visibility: hidden;transition: .3s;box-sizing: border-box;z-index: 9999;text-shadow:none;}
.modal-container:before{content: "";display: inline-block;vertical-align: middle;height: 100%;}
.modal-container.active{opacity: 1;visibility: visible;display: flex;}
.modal-body{position: relative !important;display: inline-block !important;vertical-align: middle !important;}

.modal-container .modal-body .modal-content {display: block;width: 100px;font-size: 14px;line-height: 35px;text-align: center; cursor: pointer; margin: 15px auto 0;cursor: default;}
.modal-content{position: fixed;top: 50%!important;left: 50%!important;transform: translate(-50%, -50%);color: #FFF;max-width: 400px; min-width: 300px;border: 2px solid #ffc041;}
.modal-container .modal-body .modal-content .inner {background: url(/assets/images/common/com_bg01.jpg); padding: 20px 20px 10px;}
.modal-container .modal-body .modal-content .inner .area {display: flex;margin-bottom: 1.5em;}
.modal-content a {text-decoration: none;display: block;color: #fff;}
.modal-content ul {flex: 1;}
.modal-content ul li {margin: 0 2px;text-align: center;font-size: 15px;line-height: 3;border-radius: 5px;position: relative;padding: 0 0 6px;}
.modal-content ul li:first-child {margin-bottom: .5em;}
.modal-content .btn-mypage {position: relative;background-color: #660000;margin:0 .2em 0 0;text-align: center;border-radius: 5px;font-size: 18px;line-height: 3;flex: 1;display: flex;justify-content: center; align-items: center;text-shadow: 0 0 5px #330000,0 0 5px #330000;background-image: linear-gradient(to bottom,#660000,#330000);}
.modal-content .btn-mypage a {line-height: 1.3;}
.modal-content .btn-mypage::after {content: '';display: block;position: absolute;right: 60px;top: 83%;width:6px;height: 6px;border-top: 2px solid #f5f5f5;border-right: 2px solid #f5f5f5;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
.modal-content .btn-phone {background-color: #1c305c;text-shadow: 0 0 5px #000033,0 0 5px #000033;background-image: linear-gradient(to bottom,#1c305c,#003);}
.modal-content .btn-member {background-color: #cc9933;text-shadow: 0 0 5px #663300,0 0 5px #663300;background-image: linear-gradient(to bottom,#cc9933,#996600);}
.modal-content .btn-phone::after,.modal-content .btn-member::after {content: '';display: block;position: absolute;right: 56px;top: 70%;width:6px;height: 6px;border-top: 2px solid #f5f5f5;border-right: 2px solid #f5f5f5;-webkit-transform: rotate(135deg);transform: rotate(135deg);}

.modal-close {	display: block;margin: 0 auto;}
.modal-close .close{background-color: #333;display:block;cursor:pointer;padding:5px;line-height:0;}
.modal-close .close{display: block;width: 20px;height: 20px;position: relative;cursor: pointer;margin: 5px auto 0;}
.modal-close .close::before,.modal-close .close::after {display: block;content: "";position: absolute;top: 54%;left: 50%;width: 85%;height: 4%;margin: -8% 0 0 -42%;background: #f5f5f5;}
.modal-close .close::before {transform: rotate(-45deg);}
.modal-close .close::after {transform: rotate(45deg);}


.modal-btn:hover, .modal-content .btn-phone:hover, .modal-content .btn-member:hover,.modal-content .btn-mypage:hover,.modal-close:hover {opacity: 0.65;}