body {display: flex; flex-direction: column; min-width: 768px; min-height: 100vh; overflow-x: hidden; scrollbar-face-color: #744250; scrollbar-track-color: #eee; scrollbar-arrow-color: #744250; scrollbar-shadow-color: #eee;} body#modal_width {min-width: 768px; max-width: 800px; margin: 0 auto;}
body::-webkit-scrollbar {width: 8px;}
body::-webkit-scrollbar-thumb {width: 8px;}
.sp {display: none!important;} .container {display: block; max-width: 980px; margin: 0 auto;} .flex {display: flex; flex-wrap: wrap; justify-content: space-between;} .pagination {margin: 56px 0;}
.pagination .nav-links {display: flex; justify-content: center; align-items: center;}
.pagination span,
.pagination a {display: inline-block; text-decoration: none; font-size: 18px; padding: 8px 16px; background: #fff; box-shadow: 0 0 0 1px #744250;}
.pagination a {color: #744250;}
.pagination a:hover {color: #fff; background: #744250;}
.pagination .current {background: #744250; color: #fff;} header {display: block; position: relative; width: 100%; height: 100%; text-align: center;}
header .logo {display: inline-block; margin: 40px auto;}
header #nav-toggle {display: none;}
header .g-navi nav div ul {display: flex; justify-content: center; margin: 0 auto;}
header .g-navi nav a {display: block; font-family:"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN",'Noto Serif JP',"游明朝",YuMincho,serif; font-size: 16px; font-weight: 700; color: #111; padding: 0 14px; line-height: 1; border-right: 2px solid #b4b5b5; text-decoration: none; transform: .2s ease;}
@media all and (-ms-high-contrast:none) {header .g-navi nav a {height: 10px;}}
header .g-navi nav li:last-child a {border-right:none;}
header .g-navi nav a:hover {opacity: .8;}
header .g-navi nav h3 {display: none;} #movie {position: relative; overflow: hidden; margin-bottom: 24px;}
#movie video {display: block; position: relative; width: 100%; height: 100%; max-height: 100vh; object-fit: cover; object-position: 50% 50%; font-family: 'object-fit: cover; object-position: 50% 50%;';}
#movie .left,
#movie .right {display: block; position: absolute;}
#movie .left {width: 75px; height: 91px; bottom: 15px; left: 30px;}
#movie .right {width: 57px; height: 56px; bottom: 15px; right: 30px;}
#movie .sns {display: flex; position: absolute; top: 30px; right: 30px;}
#movie .sns a {width: 48px; height: 48px; margin-left: 10px; opacity: .7;} #lang {display: block; position: absolute; top: 20px; left: 30px;}
#lang .bogo-language-switcher {display: flex; flex-direction: column; position: absolute; top: 0; left: 0; width: 150px; height: 38px; background: url(//zem.staging-env.dev/cms-509274/wp-content/themes/new-zenzai/img/common/lang.png) 6px 7px/22px auto no-repeat transparent; border-bottom: 1px solid #fff; box-sizing: border-box; cursor: pointer; transition: .3s;}
#lang .bogo-language-switcher * {color: #fff; font-size: 18px; font-weight: 700; line-height: 1; text-align: right;}
#lang .bogo-language-switcher li.current,
#lang .bogo-language-switcher li a {display: block; width: 100%; padding: 10px 8px; box-sizing: border-box; transition: .3s;}
#lang .bogo-language-switcher li.current {order: -1;}
#lang .bogo-language-switcher li:not(.current) {display: block; background: rgba(0,0,0, .2); transform: scale(1,0); transform-origin: top; opacity: 0; transition: .3s;}
#lang .bogo-language-switcher:hover li:not(.current) {opacity: 1; transform: scale(1,1);}
#lang .bogo-language-switcher li a:hover {background: rgba(0,0,0, 0.3);} #menu .menu_list {flex-wrap: wrap; justify-content: center;}
#menu .menu_list .menutitle {flex-wrap: nowrap; justify-content: center; align-items: center; width: 120px; margin: 0 65px; padding-left: 40px;}
#menu .menu_list .menutitle h2 {flex-direction: column; justify-content: center; align-items: center; width: 43px; height: 170px; font-size: 24px; font-weight: 400; letter-spacing: 5px; line-height: 24px; padding: 0 18px; -ms-writing-mode: tb-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; writing-mode: vertical-lr; border: 1px solid #cdcdcd;}
@media all and (-ms-high-contrast:none) {#menu .menu_list .menutitle h2 {padding: 0 28px 0 18px;}}
#menu .menu_list .menutitle p {font-size: 12px; color: #7a6d60; letter-spacing: 1px; -ms-writing-mode: tb-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; writing-mode: vertical-lr; margin: 0 0 0 20px;}
#menu .menu_list .menu_box {display: block; width: 270px; margin: 0 10px 20px 10px;}
#menu .menu_list .menu_box img {display: block; margin: 0 auto;}
#menu .menu_list .menu_box h3 {text-align: center;}
#menu .read {margin: 40px auto;}
#menu .read p {font-size: 18px; color: #7a6d60; text-align: center; line-height: 2; margin: 20px 0;}
#menu .read .reserve p {font-size: 21px;} #news {width: 800px; padding: 40px 0;}
#news h2 {font-size: 21px; font-weight: 400; text-align: center; line-height: 1.5; letter-spacing: .1rem; text-indent: -.1rem; margin-bottom: 12px; padding-bottom: 4px; border-bottom: 1px solid #744250;}
#news .news_box {}
#news .news_box .news_list {display: block; padding: 16px; border-bottom: 1px dotted #744250;}
#news .news_box .news_list:last-child {border: none;}
#news .news_box .news_list:hover {background: #f8f4e6;}
#news .news_box .news_list .st {justify-content: space-between; align-items: flex-end; margin-bottom: 5px;}
#news .news_box .news_list h3 {font-size: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#news .news_box .news_list p {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#news .news_box .news_list time img {width: 14px; margin: 0 6px 1px 0;}
#news .news_box .news_list .text {width: 100%;}
#news .more {float: right; display: inline-block; color: #fff; background: #744250; border: 1px solid #744250; margin: 24px 8px 0; padding: 5px 15px;}
#news .more:hover {color: #744250; background: #fff; text-decoration: none;} #contact {width: 800px; padding: 40px 0;}
#contact h2 {font-size: 21px; font-weight: 400; text-align: center; line-height: 1.5; letter-spacing: .1rem; text-indent: -.1rem; margin-bottom: 12px; padding-bottom: 4px; border-bottom: 1px solid #744250;}
#contact .left {width: 364px;}
#contact .right {width: 386px;}
#contact article {width: 100%; margin: 15px 0 30px; word-wrap: break-word;}
#contact article:last-child {margin: 20px 0 0}
#contact article h3 {font-size: 16px; color: #7a6d60; line-height: 2; margin-bottom: 10px; padding: 0 4px 4px; border-bottom: 1px solid #4c4948;}
#contact article a {color: #7a6d60;}
#contact article a:hover {text-decoration: underline;}
#contact article span {display: block; padding: 0 5px 5px;}
#contact article span p {margin-bottom: 20px;}
#contact article span p:last-child {margin: 0;}
#contact article h4 {font-size: 20px;}
#contact article.parking {background: #f4ece2; width: calc(100% - 30px); margin: -20px 0 40px; padding: 15px;}
#contact article.parking h3,
#contact article.parking p {color:#a91d22;}
#contact article.parking p {margin: 0;}
#contact article.frame {align-items: center; height: 320px; margin: 10px 0 40px; border: 1px solid #744250;}
#contact article.map {margin: 20px 0;}
#contact article.map .googlemap {height: 320px; margin: 0 0 5px; border: 1px solid #744250;}
#contact article.map a {float: right;} #icon {justify-content: center; margin: 32px auto 72px;}
#icon a {width: 48px; height: 48px; margin: 0 5px;} footer {width: 100%; background: #744250; margin-top: auto;}
footer .container {flex-direction: column; justify-content: center; align-items: center; position: relative; padding: 42px 0 32px;}
footer #scroll {justify-content: center; align-items: center; position: absolute; top: 1px; right: 0; width: 120px; height: 32px; text-decoration: none; background: #fff;}
footer #scroll .up {content: ""; width: 0; height: 0; margin: auto 10px auto 0; border-style: solid; border-width: 0 4px 4px 4px; border-color: transparent transparent #744250 transparent;}
footer #scroll span {font-size: 16px; line-height: 16px;}
footer p {margin-top: 36px; color: #fff;} #archive-news {width: 100%;}
#archive-news h1 {font-size: 24px; border-bottom: 1px solid #744250; margin: 20px 0; padding: 0 8px;}
@media all and (-ms-high-contrast:none) {#archive-news h1 {line-height: 1.5;}}
#archive-news .news_list_box {display: flex; width: 98%; margin: 0 auto 20px;}
#archive-news .news_list_box:hover {background: #f8f4e6;}
#archive-news .news_list_box img.thumb {max-width: 160px; min-width: 160px; height: 120px; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50% 50%;';}
#archive-news .news_list_box .text {margin-left: 20px; padding: 6px 10px 6px 0;}
#archive-news .news_list_box .text h2 {font-size: 20px;}
#archive-news .news_list_box .text time {justify-content: flex-start; font-size: 15px; margin-bottom: 4px;}
#archive-news .news_list_box .text time img {width: 14px; margin: 0 6px 1px 0;} #single-news {width: 100%;}
#single-news .single_head {margin: 20px 0;}
#single-news .single_head h1 {font-size: 24px; border-bottom: 1px solid #744250; padding: 0 4px;}
#single-news .single_head time {justify-content: flex-start; font-size: 14px; margin-left: 4px;}
#single-news .single_head time img {width: 14px; margin: 0 6px 1px 0;}
#single-news .single {word-break: break-all; padding: 0 4px;}
#single-news .single h2 {
font-size: 20px;
font-weight: 700;
line-height: 1.5;
margin: 12px 0;
padding: 12px 10px;
background: #fffbe4;
border-left: 4px solid #744250;
}
#single-news .single h3 {
position: relative;
font-size: 18px;
font-weight: 700;
line-height: 1;
margin: 12px 0;
padding: 10px 4px;
border-bottom: 1px solid #744250;
}
#single-news .single h3:after {
display: block;
content: "";
position: absolute;
bottom: -3px;
left: 0;
width: 10%;
border-bottom: 3px solid #744250;
}
#single-news .single h4 {
position: relative;
font-size: 16px;
font-weight: 700;
line-height: 1;
margin: 10px 0;
padding: 10px 22px;
}
#single-news .single h4:after {
content: "";
position: absolute;
top: 11px;
left: 2px;
width: 12px;
height: 12px;
background: #744250;
} #single-news .single ul {margin: 12px 0;}
#single-news .single ul li {padding: 0 16px;}
#single-news .single ul li:before {
content: "";
display: inline-block;
position: relative;
width: 6px;
height: 6px;
border-radius: 100%;
background: #744250;
margin: 0;
left: -12px;
top: -1px;
} #single-news .single ol {
counter-reset: li;
margin: 12px 0;
}
#single-news .single ol > li {padding: 0 16px;}
#single-news .single ol > li:before {
counter-increment: li;
content: counter(li);
display: inline-block;
position: relative;
left: -12px;
color: #744250;
margin: 0;
}
#single-news .single a {display: inline-block; color: #007bbb;}
#single-news .single strong,
#single-news .single em {font-weight: 700;}
#single-news .single p {line-height: 2;}
#single-news .single img {margin: 20px 0;}
#single-news .single_postlink {justify-content: center; margin: 40px auto;}
#single-news .single_postlink p {width: 100px; text-align: center;}
#single-news .single_postlink p a {display: block; border: 1px solid #744250; padding: 8px 0;}
#single-news .single_postlink p a:hover {color: #fff; background: #744250;}
#single-news .single_postlink p.center {margin: 0 -1px;} #single-menu {width: 800px; padding: 10px 0 30px; overflow-x: hidden;}
#single-menu h2 {text-align: center; padding: 10px 0;}
#single-menu h2 span {font-size: 22px; color: #7a6d60; line-height: 1;}
#single-menu h2 span.price {margin-left: .75em;}
#single-menu p {font-size: 13px;}
#single-menu .main_text {margin: 15px 0 0; text-align: center;}
#single-menu .main_image {margin: 30px auto;}
#single-menu .main_image img{width: 100%; height: 400px; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50% 50%;';}
#single-menu .flex {width: 98%; padding: 0 1%; flex-wrap: nowrap; justify-content: space-between;}
#single-menu .sub_box {max-width: 100%;}
#single-menu .sub_box.left,
#single-menu .sub_box.right {max-width: 50%;}
#single-menu .sub_box article h3 {}
#single-menu .sub_box article h3:before {content: ""; display: inline-block; position: relative; top: -2px; left: 0; width: 7px; height: 7px; background: #7a6c5f; border-radius: 50%;}
#single-menu .sub_box article h3 span {font-size: 15px; color: #7a6d60; margin-left: 6px;}
#single-menu .sub_box article h3 span:last-child {margin-left: 0.5em;}
#single-menu .sub_box article .read p {color: #7a6c5f; margin-bottom: 20px; padding-left: 14px;}
#single-menu .sub_box article:last-child .read p {margin: 0;}
#single-menu .sub_box article .notes {width: calc(100% - 32px); padding: 15px; margin: 20px 0; border: 1px solid #744250;}
#single-menu .sub_box article .notes p {text-align: center;}
#single-menu .bottom_notes p {color: #7a6d60;} #modal {display: none; position: fixed; top: 30px; left: 50%; transform: translate(-50%,0); width: 860px; height: calc(100vh - 60px); background: #fff; border-radius: 3px; box-shadow: 0 0 25px #000; z-index: 1000;}
#modal *:focus {outline:none;}
#modal .head {
display: flex;
align-items: center;
background: #744250 url(//zem.staging-env.dev/cms-509274/wp-content/themes/new-zenzai/img/menu_head.png) 76px 0/100px 55px no-repeat;
width: 100%;
height: 55px;
margin: 0;
zoom: 1;
}
#modal .head .close {
display: flex;
align-items: flex-end;
height: 34px;
margin: auto 50px auto auto;
color: #fff;
cursor: pointer;
text-decoration: none;
}
#modal .head .close .left {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
margin-right: 8px;
height: 34px;
}
#modal .head .close .left .arrow {
display: block;
position: relative;
height: 15px;
top: 0;
}
#modal .head .close .left .arrow:before {
content: "";
position: absolute;
width: 6px;
height: 6px;
border: 0px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
transform: rotate(45deg);
top: 4px;
right: 4px;
}
#modal .head .close .left .arrow:after {
content: "";
position: absolute;
width: 16px;
height: 1px;
border: 0px;
border-top: solid 1px rgba(255,255,255, .7);
top: 7px;
right: 4px;
}
#modal .head .close .left p {
height: 18px;
font-size: 18px;
font-weight: 400;
line-height: 18px;
letter-spacing: -.125em;
color: #fff;
}
@media all and (-ms-high-contrast:none) {#modal .head .close .left p {height: 14px;}}
#modal .head .close .closs {
position: relative;
top: -2px;
width: 30px;
height: 30px;
margin: 0;
background-color: #7b6d60;
box-shadow: 0 0 0 2px #fff;
border-radius: 2px;
}
#modal .head .close .closs:before,
#modal .head .close .closs:after {
content: "";
display: block;
position: absolute;
top: 14px;
left: -7px;
width: 44px;
height: 2px;
background: #fff;
}
#modal .head .close .closs:before {transform: rotate(45deg);}
#modal .head .close .closs:after {transform: rotate(135deg);}
#overlay {display: none; position: fixed; transform-origin: top; background: #fff; opacity: 0.75; width: 100%; height: 100%; left: 0; top: 0; z-index:999;}
.modal_open #modal {display: block;}
.modal_open #overlay {display: block; animation: overray linear .25s normal forwards;}
@keyframes overray {0% {background: #fff;} 100% {background: #000;}}
#iframecontainer {padding: 0 10px;}
#iframecontainer iframe {width: 840px; height: calc(100vh - 154px); margin-top: 20px; border: none; background: #fff; overflow-x: hidden; overflow-y: scroll;} #notfound {position: relative; width: 100vw; height: 100vh; overflow: hidden;}
#notfound video {display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; object-position: 50% 50%; font-family: 'object-fit: cover; object-position: 50% 50%;'; z-index: 1;}
#notfound .overlay {display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0, .25); z-index: 2;}
#notfound h1 span {display: block; font-size: 32px; color: #fff; line-height: 1.5; letter-spacing: 2px; text-align: center;}
#notfound h1 span.http {font-size: 15px;}
#notfound a {display: inline-block; font-size: 16px; color: #fff; border: 1px solid #fff; margin-top: 40px; padding: 10px 28px;}
#notfound a:hover {background: #fff; color: #744250;}
@media screen and (min-width: 768px) and (max-width: 800px) {
body#modal_width {min-width: auto; max-width: auto;}
.container {width: auto; margin: 0 20px;}
#news,
#contact,
#archive-news, 
#single-news {width: auto;}
#contact .left,
#contact .right {width: 48%;}
#menu .menu_list .menutitle {width: 20%; margin: 0 3% 0 1%; padding-right: 0%;}
#menu .menu_list .menu_box {width: 28%; margin: 0 1% 20px 1%;}
#archive-news .news_list_box img.thumb {height: 140px;}
#archive-news .news_list_box .text {padding: 6px 10px 0 0;}
#archive-news .news_list_box .text time {font-size: 14px; margin-bottom: 2px;}
#archive-news .news_list_box .text p {font-size: 13px;}
#single-menu .sub_box {background: #999;}
#single-menu {width: 100%; padding: 10px 0;}
#single-menu .flex {background: #999; width: 100%; padding: 0; flex-wrap: nowrap; justify-content: space-between;}
#modal {top: 0; left: 0; transform: translate(0,0); width: 100vw; height: 100vh;}
#iframecontainer iframe {width: calc(100vw - 20px); height: calc(100vh - 55px); margin: 0;}
}