@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: #fff;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "CaviarDreams", serif;
}

#passage-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .9);
    z-index: 1000;
}
#passage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	/*padding: 55px 0 75px 0;*/
    width: 700px;
	max-height: 750px;
	height: 75%;
    /*background: #f3ddc6;*/
    /*border-radius: 5px;*/
}
.passagebg {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    margin: 2% 1%;
    width: 98%;
    height: 46%;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, .8);
    border-radius: .2em;
}
.passagebg:hover {text-decoration: none;}
.passagebg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: transform .3s ease, filter .3s ease;
    transform: scale(1);
    filter: brightness(.5); /* 初始变暗 */
    z-index: 1;
}
.passagebg:hover::before {
    transform: scale(1.1);
    filter: brightness(.75); /* 变亮一些 */
}
.passagebg > * {
    position: relative;
    z-index: 2; /* 内容层在最上 */
}
#passage-b::before {
    background-image: url("/static/welcome/img/passage_bg_b.0c8fe5679dfb.jpg");
}
#passage-k::before {
    background-image: url("/static/welcome/img/passage_bg_k.eb098e6b57cb.jpg");
}
.passagebg img {
    display: block;
    width: 50%;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .6));
}
#passage-close {
    position: absolute;
    top: 8%;
    right: 15%;
    font-size: 1.5em;
    cursor: pointer;
    transition: .2s;
	z-index: +1;
}
#passage-close:hover {text-decoration: underline;}

#bganime {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url("/static/welcome/img/bg2.7a1d63839ff2.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(0, 151, 74, 0.00) 0%, rgb(0, 151, 74, .3) 100%);
	background-image: linear-gradient(270deg,rgba(0, 151, 74, 0.00) 0%,rgba(0, 151, 74, .3) 100%);
    z-index: 3;
}
#logo-top {
    float: left;
    height: 3em;
    width: auto;
    margin-top: .5em;
    margin-left: 1em;
}
#nav-top p {
    color: #fff;
    float: left;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 1.3em;
    margin-left: 2em;
    transition: .2s;
    cursor: pointer;
}
#nav-top p:hover {text-decoration: underline;}
#welcome {
    position: absolute;
    top: 50%;
    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 h1 {
    padding: 0;
    font-weight: bold;
    font: 5em "Yuji Boku", serif;
    /*font-size: 3em;*/
    line-height: .5em;
    /*text-shadow: .05em .05em 0 #111528;*/
}
#welcome h2 {
    padding: 0;
    font-weight: bold;
    font: 9em "Yuji Boku", serif;
    /*text-shadow: .05em .05em 0 #111528;*/
    /*text-shadow: 0 0 .1em #ffb300;*/
}
/*#welcome img {*/
/*    width: 60%;*/
/*    height: auto;*/
/*}*/
#welcome p {
    font-size: 2em;
    padding: 0 2em;
    /*text-shadow: .06em .06em 0 #111528;*/
}
#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 {
    margin: 0 .5em;
    padding: .6em 2em;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 0.2em;
    transition: .2s;
}
.reserv:hover {
    text-decoration: none;
}
#reserv-b {
    color: whitesmoke;
    background: #00974a;
}
#reserv-b:hover {
    background: #0a512e;
}
#reserv-k {
    color: #00974a;
    background: whitesmoke;
}
#reserv-k:hover {
    color: whitesmoke;
    background: #0a512e;
}
.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: #00974a;
    transition: .2s;
}
.voir:hover, .voirplus:hover {
    color: #fff;
    background: #0a512e;
}
.voir span {
    font-size: 1.6em;
    padding: .8em;
}
.voirplus {cursor: pointer;}
.voirplus span {
    font-size: 1.6em;
    padding: .5em;
}
.goto p, .goout p {
    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: #7c6253;
    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 {
    background-image: linear-gradient(168deg, #638a45, #e6ddd6, #e6ddd6);
    padding: 1em 0 3em 0;
}
.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: #2a3226;
    background-size: auto 100%;
    background-position: 50% 50%;
    transition: .4s;
    z-index: 0;
}

#info2 {
    background-image: linear-gradient(180deg, #e6ddd6, #b6f3a2, #638a45);
    padding: 1em 0 2em 0;
}
#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: #2a3226;
    background-repeat: no-repeat;
	background-size: cover;
}
.goout {
    padding: 1em 0;
    width: 100%;
}

#info3 {
    background-image: linear-gradient(180deg, #638a45, #e6ddd6);
    padding: 1em 0 3em 0;
}
#info4 {
    background: #e6ddd6;
    padding: 1em 0 3em 0;
}
#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: #7c6253;}
.swiper-pagination-bullet{
    height: .8em;
    width: .8em;
}

#info5 {
    background-image: linear-gradient(0deg, #638a45, #e6ddd6);
    padding: 1em 0 6em 0;
}
.info-store {
    display: block;
    width: 50%;
    float: left;
}
#logo-bottom {
    display: block;
    height: 100px;
    width: auto;
    margin: auto;
    padding-top: 20px;
}
#hoursbox, #addressphone {
    width: 100%;
    text-align: left;
    clear: both;
}
#hoursbox h5, #addressphone h5 {
    padding-bottom: .3em;
    color: #7c6253;
}
#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: #00974a;
    transition: .3s;
}
.back:hover {
    color: #fff;
    background: #0a512e;
}
.back span {
    font-size: 1.6em;
    padding: .7em .8em;
}
#gotop {
    position: fixed;
    display: none;
    bottom: 1.5em;
    width: 100%;
    z-index: +10;
}

.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: 1920px) {
    #tx-img-hd {width: 1200px;}
    #title-jp {font-size: 10em;}
}

@media (max-width: 1280px) {
    #logo-big {
        width: 125px;
        height: 125px;
    }
    #passage{
		/*padding: 50px 0 60px 0;*/
		width: 560px;
		max-height: 600px;
	}
    #tx-img-hd {width: 800px;}
}

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

@media (max-width: 768px) {
    #passage {
		max-width: 500px;
		width: 90%;
	}
    #tx-img-hd {display: none;}
    #tx-img-mobile {
        display: block;
        margin: 0 auto;
        width: 450px;
        animation: shine 2s forwards, naknak 5s 2s infinite;
    }
    @keyframes naknak {
        0%, 22%, 36%, 75% {opacity: 1;}
        28%, 33% {opacity: .6;}
        82%, 97% {opacity: .4;}
    }
    #title-jp {transform: translate(110%, -40%);}
    .photo-box {width: 50%;}
    #pic-show-box, #deco-show-box, #menu-num-box {width: 75%;}
    .info-store {width: 100%;}
    .digital-title {left: 1.5em;}
    .digital-box {width: 50%;}
    .digital-box-sp {width: 100%;}
}

@media (max-width: 580px) {
    .reserv {
        display: block;
        width: 200px;
        margin: 1em auto;
    }
    #passage {width: 96%;}
    #nav-top {width: 85%;}
    #tx-img-mobile {width: 365px;}
    #welcome p {font-size: 1.6em;}
    .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;
    }
}