@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    /* outline: 2px solid blue; */
}
html {
    font-size: 16px;
    display: block;
}
body {
    font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", verdana, "Osaka", "MS PGothic", Sans-Serif;
    color: #1a1a1a;
    font-weight: 500;
    line-height: 1.7;
}
div {
    display: block;
}
section, figure, aside, header, footer, main, nav {
    display: block;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    border: 0;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    text-align: center;
}
dl {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
dt, dd {
    display: block;
}
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
li {
    display: list-item;
    list-style-type: none;
    text-align: -webkit-match-parent;
}
/* 文字 */
h2 {
    font-family: 'Crimson Text', serif;
    letter-spacing: 0.1em;
    font-size: 2.4rem;
    padding-bottom: 10px;
    margin-bottom: 50px;
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.h2Left {
    text-align: left;
}
.h2L {
    font-size: 2.4rem;
    padding-bottom: 10px;
    margin-bottom: 50px;
    font-family: 'Crimson Text', serif;
    letter-spacing: 0.1em;
}
.h2L::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #2D7638;
}
.h2x {
    letter-spacing: 0.1em;
    text-align: center;
    font-size: 2.4rem;
    margin: 0 0 50px 0;
}
.h2x::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #2D7638;
    margin: 0 auto;
}
h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
p {
    font-size: 16px;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
a {
    color: #1a1a1a;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
}
a:link {
    text-decoration: none;
}
a:hover {
    color: #2d7638;
}
.wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
}
#container {
    overflow: hidden;
}
.greetingScroll .greetingLead {
    opacity: 1;
    letter-spacing: 0.4em;
    transform: translateX(0);
}
.greetingLead {
    font-size: 2.1rem;
    font-family:"Yu Mincho", 'Hiragino Mincho ProN', Georgia, "Times New Roman", Times, 'MS P Mincho', 'MS Mincho', serif;
    font-weight: bold;
    margin-bottom: 1em;
    transition: 1.6s 2.0s;
}
.btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.btn1 {
    padding: 12px 12px;
    font-family: 'Arvo', serif;
    display: block;
    text-align: center;
    position: relative;
    width: 100%;
    cursor: pointer;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.btnItem {
    width: 240px;
}
.linkPage {
    color: #2D7638 !important;
    text-decoration: underline !important;
}

/* header */
.header {
    font-family: 'Arvo', serif;
    position: fixed;
    background: #fff;
    z-index: 99;
    line-height: 1;
    right: 0;
    top: 0;
}
.headerPc {
    display: block;
}
.headerSp {
    display: none;
}
.headerOn {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 16px;
    width: 80px;
    transition: 0.8s;
}
.openBox {
    right: 10px;
    height: 80px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
}
.openBtn {
    width: 40px;
    height: 34px;
}
.openBtn:not(:root) {
    overflow: hidden;
}
.openBtn span{
    display: inline-block;
    transition: 0.3s;
    position: absolute;
    height: 2px;
    width: 30px;
    background: #fff;
}
.openBtn span:nth-of-type(1) {
	top: 35px;
    background-color: #231815;
}
.openBtn span:nth-of-type(2) {
	top: 50px;
    background-color: #231815;
}
.openBtn span:nth-of-type(3) {
    top: 63px;
    background-color: #2d7638;
}
.openBtn.active span:nth-of-type(1) {
    top: 45px;
    transform: translateY(6px) rotate(-45deg);
    width: 40px;
}
.openBtn.active span:nth-of-type(2){
    top: 56px;
    transform: translateY(-6px) rotate(45deg);
    width: 40px;
}
.openBtn.active span:nth-of-type(3) {
	opacity: 0;
}
.headerReservation {
    writing-mode: vertical-rl;
    margin-left: 0;
}
.headerCopyright {
    writing-mode: vertical-rl;
    width: 12px;
    min-height: 160px;
    font-size: 0.8rem;
    margin-left: 0;
}
/* nav */
#navOn {
    position:fixed;
    z-index: 98;
    top:0;
    right: -120%;
    width:100%;
    height: 100vh;
    background:#fff;
    transition: all 1.5s;
}
#navOn.panelactive {
    right: 80px;
}
.navOn {
    pointer-events: auto;
}
.nav {
    right: 80px;
    max-width: 640px;
    height: 100vh;
    padding: 50px 70px;
    align-items: center;
    position: fixed;
    top: 0;
    transition: 0.8s;
    z-index: 98;
    text-align: center;
    background: #fff;
}
.navWrap {
    position: relative;
    z-index: 1;
}
.navLink {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}
.navLinkItem {
    width: 25%;
    text-align: center;
    border-top: 1px solid #D2D2D2;
}
.navLinkItemL {
    width: 50%;
}
.navLinkItemReservation {
    border: 1px solid #2D7638 !important;
}
.navLinkItem a {
    padding: 40px 0;
    display: block;
    transition: 0.3s;
}
.navLinkItem a:hover {
    color: #fff;
    background-color: #2d7638;
}
.navLinkItem:not(.navLinkItemL) .navLinkBox {
    border-right: 1px dotted #D2D2D2;
}
.navLinkE {
    font-family: 'Arvo', serif;
    font-weight: bold;
    margin: 0;
}
.navLinkE::after {
    content: "";
    display: block;
    width: 15px;
    height: 2px;
    background: #2D7638;
    margin: 7px auto;
}
.navLinkJ {
    font-size: 0.85rem;
    margin: 0;
}
.navFoot {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.navSns {
    margin-right: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.navSnsItem {
    margin: 0 10px;
}
.navSnsItem a {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: block;
}
.navSnsWh {
    background: #fff !important;
}
.navStores {
    font-family: 'Arvo', serif;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
.navStoresLogo {
    margin-right: 20px;
}
.navStoresLink a:link {
    text-decoration: none;
}
.spNav {
    display: none;
}
.spReserveBtn {
    display: none;
}
/* top */
.wrapper {
    margin-right: 0;
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
}
.wrapper.on {
    margin-right: 80px;
}
.top {
    height: 100vh;
    position: relative;
    text-align: center;
}
.top::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #2D7638;
    transition: 0.9s cubic-bezier(0.71, 0, 0.31, 0.98);
    z-index: 10;
}
.top.on2::before {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}
.topVideo {
    height: 100vh;
    max-width: 100%;
    object-fit: cover;
}
/* .topSlide {
    height: 100vh;
    width: 100%;
    object-fit: cover;
} */
.topImgBox {
    height: 90vh;
    overflow: hidden;
    position: relative;
}
.topImg {
    z-index:4;
    opacity: 0;
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 32s 0s infinite;
    animation: anime 32s 0s infinite;
}
.topImg:nth-of-type(2) {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}
.topImg:nth-of-type(3) {
    -webkit-animation-delay: 16s;
    animation-delay: 16s;
}
.topImg:nth-of-type(4) {
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
@keyframes anime {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 0;
        transform: scale(1.2) ;
        z-index:3;
    }
    100% { opacity: 0 }
}

.topIn {
    position: absolute;
    z-index: 5;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}
.topInLogo {
    transition: 0.8s;
    text-align: center;
}
.topInText {
    margin: 0 auto;
}
.topInAnime {
    opacity: 1;
    width: 762px;
    margin: 0 auto;
    color: #fff;
    z-index: 9999999;
}
#logoAnime {
    opacity: 1;
    font-size: 3rem;
    width: 762px;
    height: 321px;
    line-height: 321px;
    margin: 0;
}
.logoAnime {
    transition-delay: 0.3s;
}
.logoAnime span {
    opacity: 0;
}
.logoAnime.appeartext span{
    animation: logoAnime_on 1s ease-out forwards;
}
@keyframes logoAnime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}
.topInH {
    width: 226px;
    margin-top: -60px;
    margin: 0 auto;
    transition: 0.8s;
    color: #fff;
}
.topInBtn {
    font-family: 'Arvo', serif;
    text-align: center;
    width: 30px;
    height: 70px;
    margin: 0 auto;
    transition: all 0.8s ease 0s;
}
.topInBtn a {
    color: #fff;
}
.topInBtn p {
    margin: 0;
}
.topInBtnIco {
    position: relative;
    margin-left: 5px;
    width: 30px;
    display: block;
}
.topInBtnIco img {
    width: 30px;
    position: absolute;
    left: 0;
    top: 0;
}
/* greeting */
.greeting {
    padding: 110px 0;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    overflow: hidden;
    position: relative;
}
.greeting::before {
    left: 0;
}
.greeting.on::before {
    animation: home-greeting-cloth1 3.4s 0.4s forwards;
}
.greeting::before, .greeting::after {
    content: "";
    display: block;
    position: absolute;
    top: -50%;
    width: 50%;
    height: 200%;
    background: #2D7638;
    z-index: 2;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
}
.greeting::after {
    right: 0;
}
.greeting.on::after {
    -webkit-animation: home-greeting-cloth2 3.4s 0.4s forwards;
    animation: home-greeting-cloth2 3.4s 0.4s forwards;
}
.greeting.on .greetingScissors {
    -webkit-animation: greetingScissors 3.4s;
    animation: greetingScissors 3.4s;
}
.greetingWrap {
    position: relative;
}
.greetingScroll .greetingImg {
    transform: translateY(0);
    opacity: 1;
}
.greeting.on .greetingImg {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.greetingImg {
    position: absolute;
    right: 0;
    top: 0;
    width: 70%;
    transition: 1.6s 2.8s;
    opacity: 0;
    -webkit-transform: translateY(-60px);
    -ms-transform: translateY(-60px);
    transform: translateY(-60px);
}
.greetingLogo {
    right: 116px;
    top: -50px;
    width: 112px;
    position: absolute;
    animation: greetingLogo infinite linear 30s;
}
@keyframes greetingLogo {
    0% { transform: rotate( 0deg ); }
    100% { transform: rotate( 360deg ); }
}
.greetingText {
    position: relative;
    z-index: 1;
}
.h2Greeting {
    font-size: 2.4rem;
    margin-top: 0;
    padding-bottom: 10px;
    margin-bottom: 50px;
}
.h2Greeting::after {
    margin: 0;
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #2D7638;
}
.greetingLead {
    font-family: YuMincho, "Yu Mincho", 'Hiragino Mincho ProN', Georgia, "Times New Roman", Times, 'MS P Mincho', 'MS Mincho', serif;
    font-weight: normal;
    margin-bottom: 1em;
    margin-top: 0;
    font-weight: bold;
    -webkit-transition: 1.6s 2.0s;
    -o-transition: 1.6s 2.0s;
    transition: 1.6s 2.0s;
    opacity: 0;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
    font-size: 2.1rem;
    letter-spacing: 1.3em;
}
.greeting.on .greetingLead {
    opacity: 1;
    letter-spacing: 0.4em;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
.greetingArticle {
    padding: 40px;
    padding-left: 0;
    width: 45%;
    background: #fff;
    line-height: 2.2;
    -webkit-transition: 1.6s 3.4s;
    -o-transition: 1.6s 3.4s;
    transition: 1.6s 2.0s;
    opacity: 0;
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
}
.greeting.on .greetingArticle {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
/* identity */
.identity {
    padding: 110px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: url(../img/DSC05130.jpg)center no-repeat;
    background-size: cover;
}
.identity.on::before {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.identity::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: 2s cubic-bezier(0.08, 1.06, 1, 1);
    -o-transition: 2s cubic-bezier(0.08, 1.06, 1, 1);
    transition: 2s cubic-bezier(0.08, 1.06, 1, 1);
    background: url(../img/DSC05130.jpg)center no-repeat;
    background-size: cover;
    filter: blur(30px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.identityWrap {
    position: relative;
    color: #fff;
}
.identity.on .identityText {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
}
.identityText {
    position: relative;
    z-index: 1;
    text-shadow: 0 0 4px #000;
    -webkit-transition: 1.5s 0.7s cubic-bezier(0.08, 1.06, 1, 1);
    -o-transition: 1.5s 0.7s cubic-bezier(0.08, 1.06, 1, 1);
    transition: 1.5s 0.7s cubic-bezier(0.08, 1.06, 1, 1);
    -webkit-filter: blur(30px);
    filter: blur(30px);
    opacity: 0;
}
.h2Identity::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #2D7638;
}
.identityLead {
    font-size: 2.1rem;
    font-family: YuMincho, "Yu Mincho", 'Hiragino Mincho ProN', Georgia, "Times New Roman", Times, 'MS P Mincho', 'MS Mincho', serif;
    margin-bottom: 1em;
    letter-spacing: 0.2em;
    font-weight: bold;
}
.identityArticle {
    width: 51%;
    line-height: 2.2;
}
/* logo */
.logo.on {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.logo {
    margin-top: -80px;
    position: relative;
    z-index: 1;
    -webkit-transition: 2s cubic-bezier(0.08, 1.06, 1, 1);
    -o-transition: 2s cubic-bezier(0.08, 1.06, 1, 1);
    transition: 2s cubic-bezier(0.08, 1.06, 1, 1);
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
}
.logoWrap {
    padding: 60px 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}
.logoImg {
    width: 21%;
    text-align: center;
    display: block;
}
.logoArticle {
    width: 94%;
}
/* staff */
.staff {
    padding: 70px 0;
    background: #1a1a1a;
}
.h2Staff {
    color: #fff !important;
    text-align: center;
}
.h2Staff::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #2d7638;
    margin: 0 auto;
}
.staffStaffs {
    margin: 0 30px;
    padding: 0;
    justify-content: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.staffItem {
    width: 22%;
    height: auto !important;
    background: #fff;
    cursor: pointer;
    position: relative;
    -webkit-transition: 0.7s cubic-bezier(0.47, 0.04, 0.35, 0.98);
    -o-transition: 0.7s cubic-bezier(0.47, 0.04, 0.35, 0.98);
    transition: 0.7s cubic-bezier(0.47, 0.04, 0.35, 0.98);
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
    overflow: hidden;
}
.staff.on .staffItem {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
}
.staffItem:nth-child(1) {
    -webkit-transition-delay: calc(0.08 * 1s + 0s);
    -o-transition-delay: calc(0.08 * 1s + 0s);
    transition-delay: calc(0.08 * 1s + 0s);
}
.staffItem:nth-child(2) {
    -webkit-transition-delay: calc(0.08 * 3s + 0s);
    -o-transition-delay: calc(0.08 * 3s + 0s);
    transition-delay: calc(0.08 * 3s + 0s);
}
.staffItem:nth-child(3) {
    -webkit-transition-delay: calc(0.08 * 1s + 0s);
    -o-transition-delay: calc(0.08 * 1s + 0s);
    transition-delay: calc(0.08 * 1s + 0s);
}
.staffItem:nth-child(4) {
    -webkit-transition-delay: calc(0.08 * 2s + 0s);
    -o-transition-delay: calc(0.08 * 2s + 0s);
    transition-delay: calc(0.08 * 2s + 0s);
}
.staffItem:nth-child(5) {
    -webkit-transition-delay: calc(0.08 * 2s + 0s);
    -o-transition-delay: calc(0.08 * 2s + 0s);
    transition-delay: calc(0.08 * 2s + 0s);
    margin-top: 20px;
}
.staffItem:not(:nth-child(5n)) {
    margin-right: 2%;
}
.staff.on .staffItem::before {
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.staffItem::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #2D7638;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    z-index: 10;
    -webkit-transition: 0.6s cubic-bezier(0.47, 0.04, 0.35, 0.98);
    -o-transition: 0.6s cubic-bezier(0.47, 0.04, 0.35, 0.98);
    transition: 0.6s cubic-bezier(0.47, 0.04, 0.35, 0.98);
}
.staffItem:nth-child(1)::before {
    -webkit-transition-delay: calc(0.08 * 1s + 0.8s);
    -o-transition-delay: calc(0.08 * 1s + 0.8s);
    transition-delay: calc(0.08 * 1s + 0.8s);
}
.staffItem:nth-child(2)::before {
    -webkit-transition-delay: calc(0.08 * 3s + 0.8s);
    -o-transition-delay: calc(0.08 * 3s + 0.8s);
    transition-delay: calc(0.08 * 3s + 0.8s);
}
.staffItem:nth-child(3)::before {
    -webkit-transition-delay: calc(0.08 * 1s + 0.8s);
    -o-transition-delay: calc(0.08 * 1s + 0.8s);
    transition-delay: calc(0.08 * 1s + 0.8s);
}
.staffItem:nth-child(4)::before {
    -webkit-transition-delay: calc(0.08 * 2s + 0.8s);
    -o-transition-delay: calc(0.08 * 2s + 0.8s);
    transition-delay: calc(0.08 * 2s + 0.8s);
}
.staffItem:nth-child(5)::before {
    -webkit-transition-delay: calc(0.08 * 1s + 0.8s);
    -o-transition-delay: calc(0.08 * 1s + 0.8s);
    transition-delay: calc(0.08 * 1s + 0.8s);
}
.staffItem:hover {
    color: #1a1a1a;
}
.staffItem:hover::before,
.staffItem:hover::after {
    width: 100%;
}
.staffItem:hover span::before,
.staffItem:hover span::after {
    height: 100%;
}
/* .staffItem::before {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    bottom: 15px;
    height: 1px;
    right: 0px;
    width: 0;
} */
.staffItem::after {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    height: 1px;
    left: 0;
    top: 15px;
    width: 0;
}
.staffItem span::before {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    height: 0;
    right: 15px;
    top: 0;
    width: 1px;
}
.staffItem span::after {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    bottom: 0;
    height: 0;
    left: 15px;
    width: 1px;
}
.staffImg {
    height: 400px;
    background-size: cover;
    position: relative;
    overflow: hidden;
    background: #000;
    display: block;
}
.staffItem01::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 70%;
    top: 0;
    background: url(../img/Hikita20230802.jpg) no-repeat center center;
    transition: all .8s ease;
    background-size: cover;
}
.staffItem02::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 70%;
    top: 0;
    background: url(../img/Hosoji20230802.jpg) no-repeat center center;
    transition: all .8s ease;
    background-size: cover;
}
.staffItem03::after {
    position: absolute;
    content: "";
    display: block;
    width: 110%;
    height: 80%;
    top: 0;
    background: url(../img/Tsutsui.jpg) no-repeat center center;
    transition: all .8s ease;
    background-size: cover;
}
.staffItem04::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 87%;
    top: 0;
    background: url(../img/Asai.jpg) no-repeat center center;
    transition: all .8s ease;
    background-size: cover;
}
.staffItem05::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 87%;
    top: 0px;
    background: url(../img/Nalu.jpg) no-repeat center center;
    transition: all .8s ease;
    background-size: cover;
}
.staffItem:hover:after {
    opacity: .3;
    transform: scale(1.05);
    filter: sepia(60%);
}
.staffText {
    padding: 24px 30px 4em;
    background: #fff;
    position: relative;
    z-index: 5;
}
.staffRole {
    font-family: 'Arvo', serif;
}
.staffNameE {
    font-size: 1.5rem;
    font-family: 'Arvo', serif;
}
.staffNameJ::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #2D7638;
    margin-top: 0.5em;
}
.staffMore {
    right: 20px;
    bottom: 20px;
    font-family: 'Arvo', serif;
    position: absolute;
    writing-mode: vertical-rl;
}
/* pop up */
.popup.on {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.popup {
    width: calc(100% - 80px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    -webkit-transition: 0.7s 0s cubic-bezier(0.82, 0.01, 0.17, 0.99);
    -o-transition: 0.7s 0s cubic-bezier(0.82, 0.01, 0.17, 0.99);
    transition: 0.7s 0s cubic-bezier(0.82, 0.01, 0.17, 0.99);
}
.popup::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
}
.popup.on::before {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
}
.popup.item1 .popupImg {
    background-image: url(../img/hikita_after.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-position: center;
}
.popup.item2 .popupImg {
    background-image: url(../img/Hosoji22023080223.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-position: center;
}
.popup.item3 .popupImg {
    background-image: url(../img/Tsutsui2.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-position: center;
}
.popup.item4 .popupImg {
    background-image: url(../img/Asai.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-position: center;
}
/* .popup.item5 .popupImg {
    background-image: url(../img/assistant3.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-position: center; */

.popupImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 55%;
    height: calc(100% - 200px);
    margin: 100px;
    background-size: cover;
    -webkit-transition: 0.6s 0.3s;
    -o-transition: 0.6s 0.3s;
    transition: 0.6s 0.3s;
}
.popupImg::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
    -webkit-transition: 0.9s 0.5s cubic-bezier(0.82, 0.01, 0.17, 0.99);
    -o-transition: 0.9s 0.5s cubic-bezier(0.82, 0.01, 0.17, 0.99);
    transition: 0.9s 0.5s cubic-bezier(0.82, 0.01, 0.17, 0.99);
}
.popup.on .popupImg::after {
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
}
.popupText {
    padding: 24px 30px;
    width: 40%;
    margin-right: 130px;
    background: #fff;
    position: relative;
    -webkit-transition: 0.6s 0.3s;
    -o-transition: 0.6s 0.3s;
    transition: 0.6s 0.3s;
    -webkit-overflow-scrolling: touch;
}
.popupText::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: 0.9s 0.7s cubic-bezier(0.82, 0.01, 0.17, 0.99);
    -o-transition: 0.9s 0.7s cubic-bezier(0.82, 0.01, 0.17, 0.99);
    transition: 0.9s 0.7s cubic-bezier(0.82, 0.01, 0.17, 0.99);
}
.popup.on .popupText::after {
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}
.popupText p {
    margin: 0;
}
.popupHead {
    margin-bottom: 2em;
}
.popupRole {
    font-family: 'Arvo', serif;
}
.popupE {
    font-family: 'Arvo', serif;
    font-size: 2.2rem;
}
.popupJ {
    margin: 0;
}
.popupJ::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #2D7638;
    margin-top: 0.5em;
}
.popupProf:not(:last-child) {
    margin-bottom: 2em;
}
.popupProf dt {
    font-weight: bold;
    margin-bottom: 0.4em;
}
.popupProf dd {
    font-size: 0.9rem;
}
.popupClose {
    right: 40px;
    top: 40px;
    font-family: 'Arvo', serif;
    cursor: pointer;
    position: absolute;
    width: 38px;
}
.popupClose span {
    display: none;
}
/* style gallery*/
.style {
    padding: 70px 0;
}
.h2Style {
    font-size: 2.4rem;
    padding-bottom: 10px;
    margin-bottom: 50px;
    letter-spacing: 0.1em;
    text-align: center;
}
.h2Style::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #2D7638;
    margin: 0 auto;
}
.styleStyles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.styleItem {
    width: 23%;
    margin-bottom: 3%;
}
.styleItem:not(:nth-child(4n)) {
    margin-right: 2.6%;
}
.btnInstagram {
    position: relative;
    display: inline-block;
    padding-right: 45px;
    border: 1px solid #1a1a1a;
}
.btnInstagramIcon {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -12px;
}
.btnInstagram:hover {
    color: #1a1a1a;
}

.btnInstagram:hover::before,
.btnInstagram:hover::after {
    width: 100%;
}
.btnInstagram:hover span::before,
.btnInstagram:hover span::after {
    height: 100%;
}
.btnInstagram::before {
    background-color: #1a1a1a;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    bottom: 0;
    height: 1px;
    right: 0;
    width: 0;
}
.btnInstagram::after {
    background-color: #1a1a1a;;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    height: 1px;
    left: 0;
    top: 0;
    width: 0;
}
.btnInstagram span::before {
    background-color: #1a1a1a;;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    height: 0;
    right: 0;
    top: 0;
    width: 1px;
}
.btnInstagram span::after {
    background-color: #1a1a1a;;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    bottom: 0;
    height: 0;
    left: 0;
    width: 1px;
}


/* menu */
.menu {
    padding-bottom: 240px;
    position: relative;
}
.menu::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 90px;
    width: calc(50% + 435px);
    height: calc(100% - 90px);
    background: rgba(0, 0, 0, 0.2);
    -webkit-transition: 1.2s;
    -o-transition: 1.2s;
    transition: 1.2s;
    opacity: 0;
    -webkit-transform: translateX(-80px);
    -ms-transform: translateX(-80px);
    transform: translateX(-80px);
}
.menu.on::before {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
.menuWrap {
    position: relative;
}
.recruitWrap {
    position: relative;
    display: flex;
    flex-direction: column;
}
.menuImg {
    margin-left: 110px;
    margin-right: -170px;
    transition: 1.2s;
    display: block;
    -webkit-transition: 1.2s;
    -o-transition: 1.2s;
    transition: 1.2s;
    opacity: 0;
    -webkit-transform: translateX(80px);
    -ms-transform: translateX(80px);
    transform: translateX(80px);
}
.on .menuImg {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
.on .menuText {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.recruitImg {
    margin: 0 auto;
}
.menuText {
    background: #1a1a1a;
    color: #fff;
    position: relative;
    -webkit-transition: 1.2s;
    -o-transition: 1.2s;
    transition: 1.2s;
    opacity: 0;
    -webkit-transform: translateY(80px);
    -ms-transform: translateY(80px);
    transform: translateY(80px);
    padding: 50px 40px !important;
    width: 600px;
    position: absolute;
    left: 0;
    top: 230px;
}
.menu.on .menuText::before {
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.menuText::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #2D7638;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    z-index: 2;
    -webkit-transition: 0.6s 0.9s cubic-bezier(0.47, 0.04, 0.35, 0.98);
    -o-transition: 0.6s 0.9s cubic-bezier(0.47, 0.04, 0.35, 0.98);
    transition: 0.6s 0.9s cubic-bezier(0.47, 0.04, 0.35, 0.98);
}
.recruitText {
    position: initial;
    margin: 0 auto;
}
.h2Menu {
    margin-top: 0;
    text-align: center;
    font-size: 1.8rem;
    padding-bottom: 10px;
    margin-bottom: 50px;
    font-family: 'Crimson Text', serif;
    letter-spacing: 0.1em;
    color: #fff !important;
}
.h2Menu::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #2D7638;
    margin: 0 auto;
}
.menuTextContents {
    margin-top: 0;
}
.btnInfo {
    position: relative;
    display: inline-block;
    padding: 12px 20px;
    padding-right: 20px;
    color: #fff !important;
    border: 1px solid #fff;
}
.btnInfoIcon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -8px;
}
.btnInfo:hover::before,
.btnInfo:hover::after {
    width: 100%;
}
.btnInfo:hover span::before,
.btnInfo:hover span::after {
    height: 100%;
}
.btnInfo::before {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    bottom: 0;
    height: 1px;
    right: 0;
    width: 0;
}
.btnInfo::after {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    height: 1px;
    left: 0;
    top: 0;
    width: 0;
}
.btnInfo span::before {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    height: 0;
    right: 0;
    top: 0;
    width: 1px;
}
.btnInfo span::after {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    bottom: 0;
    height: 0;
    left: 0;
    width: 1px;
}
/* photo gallery */
#gallery {
    padding: 70px 0;
    padding-left: 80px;
    padding-right: 80px;
}
.photoWrap {
    padding: 0;
}
.h2Gallery {
    text-align: center;
    margin-top: 0;
}
.h2Gallery::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #2D7638;
    margin: 0 auto;
}
.galleryBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.galleryBoxItem {
    width: 31%;
    margin-bottom: 3%;
    position: relative;
    -webkit-transition: 1s cubic-bezier(0.08, 1.06, 1, 1);
    -o-transition: 1s cubic-bezier(0.08, 1.06, 1, 1);
    transition: 1s cubic-bezier(0.08, 1.06, 1, 1);
    opacity: 0;
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
}
.gallery.on .galleryBoxItem {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.galleryBoxItem:not(:nth-child(3n)) {
    margin-right: 2.6%;
}
.galleryBoxItem:nth-child(1) {
    transition-delay: calc(0.08 * 1s + 0s);
}
.galleryBoxItem img {
    width: 100%;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.galleryBoxItem a:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.galleryBoxText {
    font-family: 'Arvo', serif;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    margin: 0;
    padding-bottom: 0;
}
/* apparel */
.apparelWrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.apparelSec {
    width: 50%;
    padding: 60px 0;
    color: #fff;
    opacity: 0;
    -webkit-transition: 1s cubic-bezier(0.08, 1.06, 1, 1);
    -o-transition: 1s cubic-bezier(0.08, 1.06, 1, 1);
    transition: 1s cubic-bezier(0.08, 1.06, 1, 1);
}
.apparelSec.on.clothing, .apparelSec.on.tresor {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.h2Apparel {
    letter-spacing: 0.1em;
    text-align: center;
    font-size: 2.4rem;
    margin: 0 0 50px 0;
}
.h2Apparel::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #2D7638;
    margin: 0 auto;
}
.apparelLead {
    text-align: center;
    margin-bottom: 3em;
}
.apparelSlide {
    position: relative;
    margin-bottom: 3em;
}
.apparelSlideContents {
    position: relative;
    display: block;
    box-sizing: border-box;
}
.apparelSlideContents img {
    width: 100%;
}
.apparelSlideTexts p {
    text-align: center;
}
.apparelInsta {
    font-family: 'Arvo', serif;
    display: inline-block;
    text-align: center;
    position: relative;
    width: 100%;
    cursor: pointer;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border: 1px solid #fff;
    padding: 12px 45px 12px 20px;
}
.apparelInsta span {
    color: #fff;
}
.apparelInstaIcon {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -12px;
}
.apparelInsta:hover::before,
.apparelInsta:hover::after {
    width: 100%;
}
.apparelInsta:hover span::before,
.apparelInsta:hover span::after {
    height: 100%;
}
.apparelInsta::before {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    bottom: 0;
    height: 1px;
    right: 0;
    width: 0;
}
.apparelInsta::after {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    height: 1px;
    left: 0;
    top: 0;
    width: 0;
}
.apparelInsta span::before {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    height: 0;
    right: 0;
    top: 0;
    width: 1px;
}
.apparelInsta span::after {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    bottom: 0;
    height: 0;
    left: 0;
    width: 1px;
}
.clothing {
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
    background: #20252c;
}
.tresor {
    opacity: 1;
    margin-top: 60px;
    background: #000;
    color: #fff;
    -webkit-transform: translateY(-60px);
    -ms-transform: translateY(-60px);
    transform: translateY(-60px);
}
/* instagram */
#instagram {
    padding: 70px 0;
}
.instaBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.instaBoxImg {
    width: 17%;
    margin-bottom: 3%;
    -webkit-transition: 1s cubic-bezier(0.08, 1.06, 1, 1);
    -o-transition: 1s cubic-bezier(0.08, 1.06, 1, 1);
    transition: 1s cubic-bezier(0.08, 1.06, 1, 1);
    opacity: 0;
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
}
.instaBoxImg:not(:nth-child(5n)) {
    margin-right: 2.6%;
}
.instaBoxImg:nth-child(1) {
    -webkit-transition-delay: calc(0.08 * 1s + 0s);
    -o-transition-delay: calc(0.08 * 1s + 0s);
    transition-delay: calc(0.08 * 1s + 0s);
}
.instagram.on .instaBoxImg {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
/* calendar */
#calendar {
    padding: 70px 0;
    background: #e0e0e0;
}
.calendarContents {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.calendarItem {
    width: 31%;
    max-width: 308px;
    -webkit-transition: 1s cubic-bezier(0.08, 1.06, 1, 1);
    -o-transition: 1s cubic-bezier(0.08, 1.06, 1, 1);
    transition: 1s cubic-bezier(0.08, 1.06, 1, 1);
    /* opacity: 0; */
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
}
.calendar.on .calendarItem {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.calenderItem:nth-child(1) {
    -webkit-transition-delay: calc(0.08 * 1s + 0s);
    -o-transition-delay: calc(0.08 * 1s + 0s);
    transition-delay: calc(0.08 * 1s + 0s);
}
.calendarTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.calendarTable td {
    text-align: center;
    padding: 8px 0;
    font-weight: bold;
}
.calendarTable th {
    text-align: center;
    font-weight: bold;
    font-family: 'Arvo', serif;
}
.calendarTable span {
    font-family: 'Arvo', serif;
}
.calendarMonth {
    text-align: center;
    font-weight: bold;
    margin-bottom: 1.5em;
    font-size: 1.2rem;
}
.holiday {
    text-align: center;
    line-height: 30px;
}
.holiday span {
    color: #fff;
    display: inline-block;
    background: #2D7638;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 auto;
}
.calendarIcon {
    margin-bottom: 2em;
    margin-top: 2em;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.calendarHoliday {
    width: 27px;
    height: 27px;
    display: inline-block;
    background: #2D7638;
    border-radius: 50%;
    margin-right: 10px;
}
.calendarIcon dd {
    font-weight: bold;
}
.calendarNotes {
    padding-top: 2em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-top: 1px dotted #9d9d9d;
}
.calendarNotesItem {
    width: 48%;
}
.calendarNotesItem dl {
    margin: 0;
}
.calendarNotesItem dt {
    font-weight: bold;
    margin-bottom: 0.5em;
    font-size: 1.1rem;
}
.calendarNotesItem dd {
    font-size: 0.9rem;
}
/* map */
#map {
    position: relative;
    overflow: hidden;
    height: 520px;
}
iframe {
    filter: grayscale(1);
    opacity: 0.7;
}
/* access */
#access {
    padding: 60px 0;
}
.accessBox {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.accessImg {
    margin-top: -88px;
    margin-right: -25%;
    width: 670px;
    height: 404px;
    opacity: 0;
    position: relative;
    z-index: 1;
}
.access.on .accessImg {
    opacity: 1;
}
.accessImg img {
    height: 404px;
    overflow: hidden;
}
.accessText {
    width: 58%;
}
.h2Access {
    margin-bottom: 20px !important;
    margin-top: 0;
}
.h2Access::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #2D7638;
    margin: 0;
}
.accessName {
    margin-bottom: 1.5em;
    margin-top: 0;
    font-weight: bold;
}
.accessEn {
    font-family: 'Arvo', serif;
    font-size: 1.3rem;
    margin-right: 1em;
    letter-spacing: 0.1em;
}
.accessAddress {
    margin-bottom: 2em;
    margin-top: 0;
}
.accessAddress dt {
    margin-bottom: 1em;
}
.accessAddress dd {
    display: inline-block;
    margin-right: 1em;
}
.accessTelWrap {
    display: flex;
    align-items: flex-end;
}
.accessTel {
    margin: 0 1em 0 0;
}
.accessTel dt {
    font-size: 0.85rem;
    font-weight: bold;
}
.accessTel dd {
    line-height: 1;
}
.accessTel dd a {
    font-family: 'Arvo', serif;
    color: #2D7638;
    font-size: 1.8rem;
    cursor: default;
}
.btnLink {
    padding: 12px 20px;
    font-family: 'Arvo', serif;
    display: block;
    text-align: center;
    position: relative;
    width: 100%;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid #2D7638;
}
.btnLink:hover {
    color: #1a1a1a;
}
.btnLink:hover::before,
.btnLink:hover::after {
    width: 100%;
}
.btnLink:hover span::before,
.btnLink:hover span::after {
    height: 100%;
}
.btnLink::before {
    background-color: #2D7638;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    bottom: 0;
    height: 1px;
    right: 0;
    width: 0;
}
.btnLink::after {
    background-color: #2D7638;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    height: 1px;
    left: 0;
    top: 0;
    width: 0;
}
.btnLink span::before {
    background-color: #2D7638;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    height: 0;
    right: 0;
    top: 0;
    width: 1px;
}
.btnLink span::after {
    background-color: #2D7638;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    bottom: 0;
    height: 0;
    left: 0;
    width: 1px;
}
/* footer */
.footer {
    overflow: hidden;
    position: relative;
    padding: 60px 0;
}
.footer::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}
.footerVideo {
    width: 100%;
    height: 450px;
    left: 575px;
    top: -70%;
    margin-left: -577px;
    object-fit: cover;
    position: absolute;
    }
.footerWrap {
    position: relative;
    z-index: 2;
}
.footerLogo {
    width: 74px;
    margin: 0 auto 16px;
    text-align: center;
}
.footerLogoImg {
    width: 74px;
    height: auto;
}
.footerText {
    color: #fff;
    margin: 0 auto 30px;
    text-align: center;
    width: 454px;
}
.footerSns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.footerSnsItem {
    font-family: 'Arvo', serif;
    margin: 0 1em;
}
.footerSnsItem a {
    color: #fff;
    display: flex;
    align-items: center;
}
.footerSnsItem p {
    margin: 0;
}
.footerSnsItem img {
    width: 28px;
    margin-right: 10px;
}
.footerCopyright {
    display: none;
    font-family: 'Arvo', serif;
}

/* レスポンシブ */
@media screen and (min-width: 1025px) and (max-width:1299px) {
    .spReserveBtn {
        display: none;
    }
    .staffItem {
        width: 38%;
        margin-bottom: 3%;
    }
    .staffItem:not(:nth-child(2n), .staffItem:not(:last-child)) {
        margin-right: 3%;
    }
    #gallery {
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media screen and (min-width: 768px) and (max-width:1024px) {
    html {
        font-size: 14px;
    }
    .wrap {
        padding: 0 8%;
    }
    .spReserveBtn {
        display: none;
    }
    .staffItem {
        width: 38%;
        margin-bottom: 3%;
    }
    .staffItem:not(:nth-child(2n), .staffItem:not(:last-child)) {
        margin-right: 3%;
    }

}
@media screen and (max-width:767px) {
    html {
        font-size: 14px;
    }
    h2 {
        margin-bottom: 30px;
    }
    .h2L {
    padding-bottom: 10px;
    margin-bottom: 30px;
    }
    .h2x {
        margin-bottom: 30px;
    }
    .wrap {
        padding: 0 20px;
    }
    /* .btn1 {
        padding: 8px 25px;
    } */
    .btnItem {
        width: 45%;
    }
    /* header, nav */
    .headerPc {
        display: none;
    }
    .headerSp {
        display: block;
    }
    .openBox {
        right: 0;
        top: 0;
        transform: scale(0.8);
        width: 50px;
        height: 50px;
        padding: 10px;
    }
    .openBtn span:nth-of-type(1) {
        top: 10px;
    }
    .openBtn span:nth-of-type(2) {
        top: 23px;
    }
    .openBtn span:nth-of-type(3) {
        top: 36px;
    }
    .openBtn.active span:nth-of-type(1) {
        top: 20px;
        transform: translateY(6px) rotate(-45deg);
        width: 40px;
    }.openBtn.active span:nth-of-type(2){
        top: 33px;
        transform: translateY(-6px) rotate(45deg);
        width: 40px;
    }
    .headerReservation {
        display: none;
    }
    .headerCopyright {
        display: none;
    }
    .spNav {
        display: block;
    }
    /* nav */
    .nav {
        width: 290px;
        height: 100%;
        padding: 50px 30px;
    }
    #navOn.panelactive {
        right: 0;
        width: 290px;
    }
    .navWrap {
        width: 230px;
    }
    .navLink:not(.navL) {
        margin-bottom: 20px;
    }
    .navLinkItem {
        width: 50%;
        text-align: center;
        border-top: 1px solid #D2D2D2;
    }
    .navLinkItemL {
        width: 100%;
    }
    .navLinkItem a {
        padding: 15px 0;
    }
    .navLinkE {
        font-size: 1.2rem;
    }
    .navLinkJ {
        display: none;
    }
    .navFoot {
        flex-direction: column;
    }
    .navSns {
        margin: 0 0 20px 0;
        padding-left: 0;
    }
    .navSnsItem {
        width: 30px;
        margin: 0 20px;
    }
    .navSnsItem a {
        width: auto;
        height: auto;
    }
    .navStoresLink {
        padding-left: 0;
    }
    .navStoresLogo {
        width: 90px;
    }
    .spReserveBtn {
        display: block;
        text-align: center;
        background: #2D7638;
        color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 10;
        padding: 10px;
        font-size: 1.3rem;
        font-family: 'Arvo', serif;
    }
    .spReserveBtn:hover {
        color: #fff;
        text-decoration: underline;
    }
    .spReserveBtn::after {
        content: "";
        display: block;
        position: absolute;
        right: 10px;
        top: 50%;
        width: 12px;
        height: 12px;
        margin-top: -6px;
        background: url(../img/arrowRight.svg) center no-repeat;
        background-size: contain;
    }
    /* top */
    .wrapper.on {
        margin-right: 0;
    }
    /* .top {
        height: 140vw;
    } */
    .top {
        height: 93vh;
    }
    .topSlide, .topImgBox, .topImg {
        height: 140vw;
    }
    .topInLogo {
        width: 50px;
        margin: 40px auto 30px;
    }
    .topInAnime, #logoAnime {
        width: 100%;
    }
    .topInH {
        width: 70%;
    }
    /* greeting */
    .greeting {
        padding: 50px 0;
    }
    .greetingImg {
        position: relative;
        margin-right: -20px !important;
        margin-left: 30px;
        width: 100%;
    }
    .greetingLogo {
        right: 28px;
        top: -28px;
        width: 56px;
    }
    .greetingText {
        margin-top: -50px;
        padding-left: 20px;
    }
    .greetingHead {
        background: #fff;
        padding-top: 20px;
        padding-right: 20px;
        display: inline-block;
        width: 50%;
    }
    .h2Greeting {
        margin-bottom: 30px;
    }
    .greetingLead {
        font-size: 1.4rem;
    }
    .greetingArticle {
        width: 100%;
        padding: 0;
    }
    /* identity */
    .identity {
        padding: 50px 0 75px 0;
    }
    .identityLead {
        font-size: 2rem;
    }
    /* logo */
    .logoWrap {
        padding: 35px 20px 20px;
        margin: -35px 20px 30px;
        flex-direction: column;
    }
    .logoImg {
        width: 90px;
        margin: 0 auto 35px;
    }
    /* staff */
    .staff {
        padding: 40px 0;
    }
    .staffWrap {
        padding: 0 20px;
    }
    .staffFrame {
        position: relative;
    }
    .staffStaffs {
        /* display: block; */
        margin-top: 0;
        margin-bottom: 20px;
        padding-inline-start: 0px;
    }
    .staffItem {
        width: 80%;
    }
    .staffItem:not(:nth-child(5n)) {
        margin-right: 0;
    }
    .staffText {
        padding: 15px 20px 4em;
    }
    .staffText p {
        margin: 0;
    }
    .staffMore {
        right: 12px;
        bottom: 12px;
    }
    /* pop up */
    .popup {
        z-index: 99;
        width: 100%;
        flex-direction: column;
    }
    .popupImg {
        position: relative;
        height: 70vh;
        width: 100%;
        margin: 0;
    }
    .popupText {
        padding: 15px 20px;
        margin: -40px 20px 16px;
        height: calc(100vh - 70vw + -20px);
        overflow-y: scroll;
        width: 90%;
    }
    .popupE {
        font-size: 1.5rem;
    }
    .popupClose {
        right: 10px;
        top: 10px;
    }
    /* style */
    .style {
        padding: 40px 0;
    }
    .h2Style {
        margin-bottom: 30px;
    }
    .styleStyles {
        justify-content: space-between;
        padding-left: 0;
    }
    .styleItem {
        width: 48%;
    }
    .styleItem:not(:nth-child(4n)) {
        margin-right: 0;
    }

    /* menu */
    .menu {
        padding-bottom: 0;
    }
    .menuImg {
        margin-left: 30px;
        margin-right: -20px;
    }
    .recruitImg {
        margin: 0 auto;
    }
    .menuText {
        padding: 10px 5px !important;
        margin-top: -50px;
        position: relative;
        top: 0;
        width: 100%;
    }
    .recruitText {
        top: 35px;
    }
    .h2Menu {
        margin-bottom: 0px;
    }
    .btnInfo {
    padding: 8px 25px;
    }
    /* photo gallery */
    #gallery {
        padding: 40px 0;
    }
    .h2Gallery {
        margin-bottom: 30px;
    }
    .galleryBox {
        justify-content: space-between;
    }
    .galleryBoxItem {
        width: 48%;
    }
    .galleryBoxItem:not(:nth-child(3n)) {
        margin-right: 0;
    }
    /* apparel */
    .h2Apparel {
        margin-bottom: 30px;
    }
    .apparelWrap {
        flex-direction: column;
    }
    .apparelSec {
        padding: 30px 0;
        width: 100%;
    }
    .apparelInsta {
        padding: 8px 45px 8px 25px;
    }
    .tresor {
        margin-top: 0;
    }
    /* instagram */
    #instagram {
        padding: 40px 0;
    }
    .instaBox {
        justify-content: space-between;
    }
    .instaBoxImg {
        width: 31%;
    }
    .instaBoxImg:not(:nth-child(5n)) {
        margin-right: 0;
    }
    /* calendar */
    #calendar {
        padding: 70px 0;
    }
    .calendarBox {
        width: 308px;
        max-width: calc(100vw - 60px);
        margin: 0 auto 30px;
    }
    .calendarIcon {
        margin-bottom: 1em;
        margin-top: 0;
    }
    .calendarNotes {
        padding-top: 1em;
        flex-direction: column;
    }
    .calendarNotesItem {
        width: 100%;
    }
    .calendarNotesItem:not(:last-child) {
        margin-bottom: 1em;
    }
    /* map */
    #map {
        height: 300px;
    }
    .mapWrap {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: rgb(229, 227, 223);
    }
    /* access */
    #access {
        padding: 30px 0;
    }
    .accessBox {
        flex-direction: column;
    }
    .accessImg {
        transform: translateX(3%);
        margin: 0 0;
        width: 100%;
        height: 100%;
    }
    .accessText {
        width: 100%;
    }
    .accessEn {
        display: block;
    }
    .accessAddress dd {
        font-size: 0.85rem;
        width: 100%;
    }
    .accessTelWrap {
        text-align: center;
        flex-direction: column;
    }
    .accessTel {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1em;
    }
    .accessTel dt {
        margin-bottom: 0.2em;
    }
    .btnLink {
        padding: 8px 25px;
        width: 100%;
    }
    .accessTelWrap div {
        width: 100%;
    }
    /* footer */
    .footer {
        padding: 30px 0;
    }
    .footerLogo {
        width: 60px;
        margin: 0 auto 24px;
    }
    .footerLogoImg {
        width: 60px;
    }
    .footerSns {
        margin-bottom: 3em;
        flex-direction: column;
    }
    .footerSnsItem:not(:last-child) {
        margin-bottom: 0.5em
    }
    .footerSnsItem a {
        text-align: center;
        justify-content: center;
    }
    .footerSnsItem p {
        margin: 0 0;
        font-size: 14px;
    }
    .footerCopyright {
        display: block;
        text-align: center;
        font-size: 0.85rem;
        color: #fff;
        margin: 0;
    }
}