@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Zen+Antique+Soft&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Yuji+Boku&display=swap);
/* CSS Document */

:root {--blur: 2;}
* {box-sizing: border-box;}
video::-internal-media-controls-download-button {display: none;}
video::-webkit-media-controls-enclosure {overflow: hidden;}
video::-webkit-media-controls-panel { width: calc(100% + 30px);}

html, body {
    color: #111;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "CaviarDreams", serif;
}

#bganime {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url("/static/welcome/img/bg-img.76fabf582a8f.jpg");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
}
/*canvas {*/
/*    position: absolute;*/
/*    width: 100%!important;*/
/*    height: 100%!important;*/
/*    top: 0;*/
/*    left: 0;*/
/*    z-index: 0;*/
/*}*/
#bg-anim {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#bg-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    opacity: .35;
    z-index: 1;
}

#nav-top {
    position: absolute;
    top: 1em;
    left: 0;
    height: 4em;
    width: 30%;
    background-image: -webkit-linear-gradient(270deg,rgba(196, 168, 134, 0.00) 0%, rgb(196, 168, 134, .3) 100%);
	background-image: linear-gradient(270deg,rgba(196, 168, 134, 0.00) 0%,rgba(196, 168, 134, .3) 100%);
    z-index: 3;
}
#logo-top {
    float: left;
    height: 3em;
    width: auto;
    margin-top: .5em;
    margin-left: 1em;
}
#nav-top a {
    color: #fff;
    float: left;
    display: block;
    font-weight: bold;
    margin-top: 1.3em;
    margin-left: 2em;
    transition: .2s;
}
#nav-top a:hover {text-decoration: underline;}
#welcome {
    position: absolute;
    top: 65%;
    width: 100%;
    /*transform: translate(0,-50%);*/
    text-align: center;
    font-weight: bold;
    z-index: 2;
}
#logo-big {
    display: block;
    margin: 0 auto 2em auto;
    width: 180px;
    height: 180px;
    z-index: 2;
}
/*#welcome img {*/
/*    width: 60%;*/
/*    height: auto;*/
/*}*/
#welcome p {
    padding: 0 2em;
    font-size: 2.5em;
    text-shadow: 0 0 20px #8d867b;
}
#social-box {
    display: table;
    margin: 0 auto;
}
#social-box a {
    display: block;
    float: left;
    margin: 0 2em;
    width: 3.5em;
    height: 3.5em;
    background-size: 100% auto;
    background-position: center;
    transition: .2s;
}
#social-box a:hover {
    opacity: .8;
}
#reserv {
    padding: .6em 2em;
    color: #1a1a1a;
    font-size: 1.2em;
    font-weight: bold;
    background: #C4A886;
    border-radius: .3em;
    transition: .2s;
}
#reserv:hover {
    color: whitesmoke;
    background: #816749;
    text-decoration: none;
}
.goto {
    position: absolute;
    width: 100%;
    bottom: 3em;
    z-index: 10;
}
.voir, .voirplus, .back {
    color: whitesmoke;
    display: block;
    margin: auto;
    width: 4em;
    height: 4em;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #C4A886;
    transition: .2s;
}
.voir:hover, .voirplus:hover {background: #816749;}
.voir span {
    font-size: 1.6em;
    padding: .8em;
}
.voir span, .voirplus span {
    font-size: 1.6em;
    padding: .8em;
}
.goto p, .goout p {
    color: whitesmoke;
    padding-top: .5em;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.info-box {
    position: relative;
    width: 100%;
    color: #1a1a1a;
    text-align: center;
    font-weight: bold;
}
.info-box h1 {
    margin-left: 5em;
    padding: 2em 0 .5em 0;
    color: #C4A886;
    font-size: 3em;
    font-weight: bold;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
    opacity: 0;
}
.info-box h1 span {font-size: 1.2em;}
.info-box h2 {
    font-size: 1.3em;
    padding: .5em 2em;
    line-height: 150%;
    margin-left: -8em;
    opacity: 0;
}

#info1 {
    padding: 1em 0 3em 0;
    color: #fff;
    background-image: linear-gradient(168deg, #161312, #373635, #373635);
}
.photo-wall {
    width: 90%;
    margin: auto;
    padding: 1em 0 2em 0;
}
.photo-box {
    float: left;
    width: 25%;
}
.photo-scale {
    position: relative;
    width: 100%;
    padding-bottom: 180%;
    height: 0;
}
.photo {
    position: absolute;
    width: 90%;
    height: 90%;
    left: 5%;
    top: 5%;
    background-color: #1a1a1a;
    background-size: auto 100%;
    background-position: 50% 50%;
    transition: .4s;
    z-index: 0;
}

#info2 {
    padding: 1em 0 2em 0;
    color: #fff;
    background: #373635;
}
#menu-num-box {
    width: 60%;
    padding: 2em 0 1em 0;
    margin: auto;
}
#menu-num-scale {
    position: relative;
    width: 100%;
    padding-bottom: 60%;
    height: 0;
}
#menu-num, .pic-show, .deco-show {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #1a1a1a;
    background-repeat: no-repeat;
	background-size: cover;
}
.goout {
    padding: 1em 0;
    width: 100%;
}

#info3 {
    padding: 1em 0 3em 0;
    color: #fff;
    background: #373635;
}
#info4 {
    padding: 1em 0 3em 0;
    color: #fff;
    background: #373635;
}
#pic-show-box, #deco-show-box {
    width: 60%;
    padding: 1em 0 .5em 0;
    cursor: pointer;
}
#pic-show-scale, #deco-show-scale {
    position: relative;
    width: 100%;
    padding-bottom: 60%;
    margin-bottom: 2.5em;
    height: 0;
}
.swiper-container{--swiper-pagination-color: #C4A886;}
.swiper-pagination-bullet{
    height: .8em;
    width: .8em;
}

#info5 {
    padding: 1em 0 6em 0;
    color: #fff;
    background: #373635;
}
#logo-bottom {
    display: block;
    height: 100px;
    width: auto;
    margin: auto;
    padding-top: 20px;
}
#hoursbox, #addressphone {
    float: left;
    width: 50%;
    text-align: left;
}
#hoursbox h5, #addressphone h5 {
    padding-bottom: .3em;
    color: #C4A886;
}
#hoursbox p {
    width: 30%;
    font-size: .9em;
    float: left;
    padding-bottom: .5em;
}
#hoursbox ul, #apbox {
    width: 60%;
    margin: 0 auto;
}
#hoursbox ul li {
    display: block;
    width: 100%;
    height: 1.4em;
}
.timeright {width: 70%!important;}
#addressphone p {
    width: 100%;
    font-size: .9em;
    float: left;
    padding-bottom: 1em;
}

.back {
    color: whitesmoke;
    background: #C4A886;
    transition: .3s;
}
.back:hover {
    color: #fff;
    background: #816749;
}
.back span {
    font-size: 1.6em;
    padding: .7em .8em;
}
#gotop {
    position: fixed;
    display: none;
    bottom: 1.5em;
    width: 100%;
    z-index: +10;
}

.forhdsd {display: block!important;}
.formobile {display: none!important;}

.digital-wall {
    position: relative;
    width: 95%;
    margin: 3em auto;
    padding: 2em 1%;
    border: 1px solid #ffdf54;
    border-radius: 10px;
}
.digital-title {
    position: absolute;
    top: -.9em;
    left: 2em;
    padding: 0 .2em;
    width: fit-content;
    color: #ffdf54;
    font-weight: bold;
    font-size: 3em;
    background: #1a1a1a;
}
.digital-box {
    float: left;
    width: 25%;
}
.digital-box-sp {
    float: left;
    padding: 1em;
    width: 50%;
}
.digital-scale {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    height: 0;
}
.digital-scale-sp {
    position: relative;
    width: 100%;
    padding-bottom: 50%;
    height: 0;
}
.digital {
    position: absolute;
    width: 96%;
    height: 96%;
    left: 2%;
    top: 2%;
    background-color: #343434;
    background-size: auto 100%;
    background-position: 50% 50%;
    transition: .4s;
}
.digital-sp {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 15%;
    border-radius: 1em;
    background-color: rgba(52, 52, 52, .25);
    z-index: 1;
    overflow-y: auto;
}
.digital:hover {
    background-size: auto 110%;
    filter: brightness(80%);
}
.perso {
    position: absolute;
    top: .3em;
    left: 1em;
}
.perso img {
    display: block;
    float: left;
    width: 3em;
    height: 3em;
}
.perso p {
    float: left;
    padding-top: .3em;
    padding-left: .8em;
    font-size: 1.2em;
    font-weight: bolder;
    text-align: left;
}
.perso p span {font-size: .8em;}
.perso-speak {
    padding: 2em 1em 1em;
    text-align: left;
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}
.digital-follow, .digital-follow-bg {
    position: absolute;
    padding: .6em 2em;
    color: #1a1a1a;
    font-size: 1em;
    font-weight: bolder;
    text-transform: uppercase;
    text-decoration: none!important;
}
.digital-follow-bg {
    right: 2.6em;
    bottom: -2.8em;
    background: #1a1a1a;
    border: .5em solid #1a1a1a;
    border-radius: .3em;
    z-index: 1;
}
.digital-follow {
    right: 3em;
    bottom: -2em;
    color: #ffdf54!important;
    background: radial-gradient(circle at center, #800c0c 0%, #2c0202 90%);
    border-radius: .3em;
    transition: .2s;
    z-index: 2;
}
.digital-follow:hover {
    background: radial-gradient(circle at center, #800c0c 60%, #2c0202 90%);
    transition: .3s;
    text-decoration: none;
}


@media (max-width: 1024px) {
    #nav-top {width: 50%;}
}

@media (max-width: 768px) {
    .photo-box {width: 50%;}
    #pic-show-box, #deco-show-box, #menu-num-box {width: 75%;}
    #hoursbox, #addressphone {width: 100%;}
    #hoursbox {padding-bottom: 1.2em;}
    #hoursbox ul, #apbox {
        width: 65%;
        float: none;
        margin: auto;
    }
    .forhdsd {display: none!important;}
	.formobile {display: block!important;}
    .digital-title {left: 1.5em;}
    .digital-box {width: 50%;}
    .digital-box-sp {width: 100%;}
}

@media (max-width: 580px) {
    #nav-top {width: 85%;}
    #welcome p {font-size: 1.8em;}
    .info-box h1 {font-size: 2em;}
    .digital-title {font-size: 2.5em;}
    .info-box h2 {font-size: 1em;}
    #pic-show-box, #deco-show-box, #menu-num-box {width: 90%;}
    #hoursbox ul, #apbox {width: 80%;}
    .digital-box-sp {padding: 0;}
    .digital-sp {left: 15%;}
    .perso {
        top: 0;
        left: .5em;
    }
}