@charset "UTF-8";

.modal-wrapper {
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 40px 10px;
text-align: center
}

.modal-wrapper:not(:target) {
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility .3s;
}

.modal-wrapper:target {
opacity: 1;
visibility: visible;
transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
display: inline-block;
height: 100%;
margin-left: -.05em;
vertical-align: middle;
content: ""
}

.modal-wrapper .modal-window {
box-sizing: border-box;
display: inline-block;
z-index: 20;
position: relative;
width: 90%; /** 70% **/
max-width: 600px;
padding: 30px 15px;
border-radius: 2px;
background: #000;
color: #fff;
box-shadow: 0 0 30px rgba(0, 0, 0, .6);
vertical-align: middle
}

.modal-wrapper .modal-window .modal-content {
max-height: 75vh; /** 80vh **/
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}

.modal-wrapper .modal-window .modal-content::-webkit-scrollbar {
display: none;
}


.modal-overlay {
z-index: 10;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8)
}

.modal-wrapper .modal-close {
z-index: 20;
position: absolute;
top: 0;
right: 0;
width: 35px;
/** color: #95979c !important; **/
color: #baab20 !important;
font-size: 50px;
font-weight: 700;
line-height: 35px;
text-align: center;
text-decoration: none;
text-indent: 0
}

.modal-wrapper .modal-close:hover {
/** color: #2b2e38 !important; **/
color: #baab20 !important;
}


.modal-content {
width: 100%;
text-align: center !important;
margin: 0 auto;
}


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

.modal-content-tbl {
width: 95%;
margin: 0 auto;
padding-top: 50px;
}

.modal-content-tbl h3 {
font-size: 150%;
font-weight: bold;
border-bottom: 1px dashed #000;
display: inline-block;
margin: 0 auto 50px auto;
}

.modal-content-tbl-img {
width: 90%;
margin: 0 auto 50px auto;
}

.modal-content-tbl-img img {
width: 100%;
}

.modal-content-tbl .menu-box {
width: 90%;
margin: 0 auto 50px auto;
padding-bottom: 50px;
border-bottom: 1px solid #000;
}

.modal-content-tbl .menu-box:last-child {
margin: 0 auto;
border: none;
}


.modal-content-tbl .menu-box h4 {
font-size: 120%;
font-weight: bold;
margin: 0 auto 30px auto;
border-bottom: 1px solid #baab20;
padding-bottom: 5px;
text-align: left;
}

.modal-content-tbl .menu-box p {
margin-bottom: 20px;
text-align: left;
}

.modal-content-tbl .menu-box p:last-child {
margin-bottom: 0;
}

.modal-content-tbl .menu-box p.ttl-txt {
font-size: 150%;
margin-bottom: 40px;
}

.modal-content-tbl .menu-box h5 {
width: 100%;
margin: 0 auto 15px auto;
text-align: left;
font-weight: bold;
font-size: 120%;
}

.modal-content-tbl .menu-box .bottle-price {
width: 100%;
margin: 0 auto;
text-align: right;
font-weight: bold;
}

.modal-content-tbl .menu-box table {
width: 100%;
margin: 0 auto 30px auto;
}

.modal-content-tbl .menu-box table:last-child {
margin: 0 auto;
}

.modal-content-tbl .menu-box table th {
padding: 0 0 8px 0;
width: 70%;
text-align: left;
}

.modal-content-tbl .menu-box table th:last-child {
padding: 0;
}

.modal-content-tbl .menu-box table td {
padding: 0 0 8px 0;
text-align: right;
}

.modal-content-tbl .menu-box table td:last-child {
padding: 0;
}



.modal-content-tbl p {
margin-bottom: 15px !important;
}

.modal-content-tbl p:last-child {
margin-bottom:0 !important;
}



#modal-content-recruit {
width: 95%;
margin: 0 auto;
padding-top: 50px;
}

#modal-content-recruit h3 {
font-size: 150%;
font-weight: bold;
border-bottom: 1px dashed #000;
display: inline-block;
margin: 0 auto 50px auto;
}

#recruit-tbl {
width: 100%;
margin: 0 auto;
padding-bottom: 50px;
}

#recruit-tbl table {
width:100%;
padding-bottom: -10px;
}

#recruit-tbl table th {
width: 15%;
padding: 0 0 10px 0;
text-align: left;
vertical-align: top;
}

#recruit-tbl table td.kugiri {
width: 5%;
padding: 0 0 10px 0;
text-align:center;
vertical-align: top;
}

#recruit-tbl table td {
padding: 0 0 10px 0;
text-align: left;
vertical-align: top;
}




}

@media only screen and (min-width: 769px) {

.modal-content-tbl {
width: 80%;
margin: 0 auto;
border-right: 1px solid #000;
border-left: 1px solid #000;
padding-top: 50px;
}

.modal-content-tbl h3 {
font-size: 150%;
font-weight: bold;
border-bottom: 1px dashed #000;
display: inline-block;
margin: 0 auto 50px auto;
}

.modal-content-tbl-img {
width: 90%;
margin: 0 auto 50px auto;
}

.modal-content-tbl-img img {
width: 100%;
}

.modal-content-tbl .menu-box {
width: 90%;
margin: 0 auto 50px auto;
padding-bottom: 50px;
border-bottom: 1px solid #000;
}

.modal-content-tbl .menu-box:last-child {
margin: 0 auto;
border: none;
}


.modal-content-tbl .menu-box h4 {
font-size: 120%;
font-weight: bold;
margin: 0 auto 30px auto;
border-bottom: 1px solid #baab20;
padding-bottom: 5px;
text-align: left;
}

.modal-content-tbl .menu-box p {
margin-bottom: 20px;
text-align: left;
}

.modal-content-tbl .menu-box p:last-child {
margin-bottom: 0;
}

.modal-content-tbl .menu-box p.ttl-txt {
font-size: 120%;
margin-bottom: 40px;
}

.modal-content-tbl .menu-box h5 {
width: 70%;
margin: 0 auto 15px auto;
text-align: left;
font-weight: bold;
font-size: 120%;
}

.modal-content-tbl .menu-box .bottle-price {
width: 60%;
margin: 0 auto;
text-align: right;
font-weight: bold;
}

.modal-content-tbl .menu-box table {
width: 60%;
margin: 0 auto 30px auto;
}

.modal-content-tbl .menu-box table:last-child {
margin: 0 auto;
}

.modal-content-tbl .menu-box table th {
padding: 0 0 8px 0;
width: 70%;
text-align: left;
}

.modal-content-tbl .menu-box table th:last-child {
padding: 0;
}

.modal-content-tbl .menu-box table td {
padding: 0 0 8px 0;
text-align: right;
}

.modal-content-tbl .menu-box table td:last-child {
padding: 0;
}


.modal-content-tbl p {
margin-bottom: 15px !important;
}

.modal-content-tbl p:last-child {
margin-bottom:0 !important;
}




#modal-content-recruit {
width: 80%;
margin: 0 auto;
border-right: 1px solid #000;
border-left: 1px solid #000;
padding-top: 50px;
}

#modal-content-recruit h3 {
font-size: 150%;
font-weight: bold;
border-bottom: 1px dashed #000;
display: inline-block;
margin: 0 auto 50px auto;
}

#recruit-tbl {
width: 70%;
margin: 0 auto;
padding-bottom: 50px;
}

#recruit-tbl table {
width:100%;
padding-bottom: -10px;
}

#recruit-tbl table th {
width: 15%;
padding: 0 0 10px 0;
text-align: left;
vertical-align: top;
}

#recruit-tbl table td.kugiri {
width: 5%;
padding: 0 0 10px 0;
text-align:center;
vertical-align: top;
}

#recruit-tbl table td {
padding: 0 0 10px 0;
text-align: left;
vertical-align: top;
}




}