@charset "utf-8";
@font-face {
    font-family: "GaramondPremrPro";
    src: url("https://restaurant-monk.com/font/GaramondPremrPro") format("opentype");
}
.textHidden {
    text-indent: -9999px;
    overflow: hidden;
}
::selection {
    color: #000;
    background-color: #ddd;
}
::-moz-selection {
    color: #000;
    background-color: #ddd;
}
body {
    -webkit-font-smoothing: antialiased;
    color: #000;
    height: 100%;
    text-align: left;
    position: relative;
    background: #FFF;
    font-family: 'GaramondPremrPro', serif;
    -webkit-text-size-adjust: 100%;
    letter-spacing: 0.04em;
}
h1, h2, h3, h4, h5, p {
    font-weight: normal;
    margin: 0;
}
.jp p {
    letter-spacing: 0.03em;
}
.en p {
    letter-spacing: 0.02em;
}
a {
    text-decoration: none;
    color: #000;
}
a:hover {
    text-decoration: none;
    color: #999;
}
.fullscreen body {
    overflow: hidden;
}
#root {
    width: 990px;
    text-align: left;
    margin: 0 38px;
    padding: 0 30px;
}
#head {
    position: relative;
    line-height: 0;
    height: 98px;
    margin-top: 38px;
    margin-bottom: 30px;
    /*	background: #0ff;*/
}
#head h1 {
    width: 98px;
    height: 98px;
}
#mainVisualWrap {
    margin-top: -110px;
}
.top_img_sp{
	display: none;
}
.top_img {
    height: 100vh;
    background-image: url("/imgs/monk_top_01.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
#foot {
    width: 990px;
    margin: 126px auto 0 auto;
    height: 150px;
    position: relative;
    /*	background: #0ff;*/
}
#foot .scrollToTop {
    display: block;
    position: absolute;
    width: 100px;
    height: 41px;
    right: 70px;
}
nav.global {
    font-size: 15px;
    width: 990px;
    position: absolute;
    top: 0;
    left: 159px;
}
nav.global-pc {
    width: 1035px;
    position: relative;
    top: 15px;
    left: calc(50% - 505px);
    font-size: 15px;
}
div.monklogo {
    margin: 0px 0px 0 0;
    padding: 0 0 0 0;
    border-right: 0px solid #CCC;
    float: left;
    clear: none;
    width: 138px;
}
div.monklogo h1 img {
    width: 100%;
}
nav.global ul, nav.global-pc ul {
    width: 890px;
    padding: 0;
    margin: 15px 0 0 0;
    text-align: right;
    float: right;
    clear: none;
}
nav.global li, nav.global-pc li {
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}
nav.global li a, nav.global-pc li a, nav.global li span, nav.global-pc li span {
    margin: 0;
    padding: 0;
}
nav.global li a:hovor, nav.global-pc li a:hovor {
    text-decoration: none;
    color: #666;
}
nav.global li.nav, nav.global-pc li.nav {
    margin: 10px 0 0px 0;
    border-right: 1px solid #CCC;
    padding: 0px 18px 0px 18px;
}
nav.global li.nav a:hovor, nav.global-pc li.nav a:hovor {
    text-decoration: none;
    color: #666;
}
nav.global li.navright, nav.global-pc li.navright {
    margin: 0px 0 0 0;
    border-right: 0px solid #CCC;
    padding: 0px 0px 0px 18px;
}
#copyright {
    font-size: 11px;
    text-align: right;
    position: absolute;
    padding-top: 10px;
    top: 45px;
    right: 0px;
}
#loader {
    visibility: hidden;
}
a.viewMap {
    display: block;
    width: 91px;
    height: 25px;
    background: url(/images/buttonViewMap.png) no-repeat;
}
a.viewMap:hover {
    background-position: bottom;
}
/* POP UP WINDOW */
.overlay {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index: 1000;
}
.btn_area {
    width: 78%;
    min-width: 600px;
    height: 500px;
    position: absolute;
    top: 80px;
    left: 7%;
    background-color: #fff;
    z-index: 2;
    padding: 55px 40px 55px 55px;
    overflow-y: scroll;
}
.btn_area_text {
    height: 100%;
}
.btn_area p {
    width: 100%;
    padding-bottom: 10px;
    font-size: 13px;
    line-height: 26px;
    font-family: 'GaramondPremrPro', serif, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho";
}
.btn_area p.popup_title {
    font-size: 18px;
    line-height: 30px;
    margin: 0px 0 25px;
}
.btn_area p.popup_title02 {
    font-size: 18px;
    line-height: 30px;
    margin: 25px 0px 25px 0px;
}
.popup_button {
    display: block;
    margin: 0 auto;
    cursor: pointer;
    text-decoration: underline;
}
#header, #foot-sp {
    display: none;
}
@media screen and (max-width:820px) {
    #header {
        display: block;
    }
    nav.global-pc {
        display: none;
    }
    .navToggle {
        position: fixed;
        top: 30px;
        right: 25px;
        height: 30px;
        width: 30px;
        cursor: pointer;
    }
    .navToggle > div {
        position: relative;
        width: 30px;
    }
    .navToggle span {
        width: 100%;
        height: 1px;
        left: 0;
        display: block;
        mix-blend-mode: difference;
        background: #000000;
        position: absolute;
        transition: top .5s ease, -webkit-transform .6s ease-in-out;
        transition: transform .6s ease-in-out, top .5s ease;
        transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
    }
    .navToggle span:nth-child(1) {
        top: 0;
    }
    .navToggle span:nth-child(2) {
        top: 8px;
    }
    .navToggle span:nth-child(3) {
        top: 16px;
    }
    .navToggle.active span:nth-child(1) {
        top: 8px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
        background: #000000;
    }
    .navToggle.active span:nth-child(2) {
        top: 8px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        background: #000000;
    }
    .navToggle.active span:nth-child(3) {
        display: none;
    }
    /* z-index */
    .navToggle {
        z-index: 9999;
    }
    #container {
        z-index: 900;
    }
    .global_sp {
        background: #fff;
        color: #000;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        display: flex;
        visibility: hidden;
        font-size: 18px;
        opacity: 0;
        -webkit-transition: opacity .8s ease; /* アニメーション時間は 0.8秒 */
        -ms- transition: opacity .8s ease;
        -moz- transition: opacity .8s ease;
        transition: opacity .8s ease, visibility .8s ease;
    }
    .open .global_sp {
        visibility: visible;
        opacity: 1;
    }
    ul.nav {
        transition-delay: .3s;
        transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
        color: #000;
        font-size: 18px;
        list-style: none;
        width: calc(100% - 50px);
        height: 60vh;
        margin: 20vh 25px;
        padding-left: 20px;
    }
    ul.nav a {
        color: #000;
        transition-delay: .3s;
        transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
    }
    ul.nav a:hover {
        color: #ccc;
    }
    li.deley {
        opacity: 0;
        -webkit-transition: translateY(-10px);
        transform: translateY(-10px);
        transition: opacity .2s ease, -webkit-transform .6s ease;
        transition: transform .6s ease, opacity .2s ease;
        transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
        color: #000;
        letter-spacing: 0.05em;
    }
    .open li.deley {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        transition: opacity .3s ease, -webkit-transform .5s ease;
        transition: transform .5s ease, opacity .3s ease;
        transition: transform .5s ease, opacity .3s ease, -webkit-transform 1s ease;
    }
    li.deley:nth-child(2) {
        top: 20px;
        position: relative;
    }
    li.deley:nth-child(3) {
        top: 38px;
        position: relative;
    }
    li.deley:nth-child(4) {
        top: 56px;
        position: relative;
    }
    li.deley:nth-child(5) {
        top: 74px;
        position: relative;
    }
    li.deley:nth-child(6) {
        top: 92px;
        position: relative;
    }
    li.deley:nth-child(7) {
        top: 110px;
        position: relative;
    }
    li.deley:nth-child(8) {
        top: 128px;
        position: relative;
    }
    .head-logo {
        position: absolute;
        top: 15px;
        left: 20px;
        width: 120px;
        z-index: 2;
    }
    .head-logo img {
        width: 100%;
    }
	.top_img_sp{
	    display: block;
		height: 100vh;
        background-image: url("/imgs/monk_top_sp_01.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
    }
	#mainVisualWrap {
        margin-top: 0px;
    }
    .top_img {
		display: none;
    }
    body, #background {
        min-width: auto !important;
        height: auto !important;
    }
    #foot {
        display: none;
    }
    #foot-sp {
        display: block;
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 100%;
        z-index: 2;
    }
    .copyright {
        mix-blend-mode: difference;
        z-index: 2;
        position: absolute;
        left: 25px;
        bottom: 10px;
    }
    .instagram {
        position: absolute;
        right: 90px;
        bottom: 5px;
    }
	.fpl {
        position: absolute;
        right: 25px;
        bottom: 5px;
    }
}