@charset "UTF=8";

body {
    width: 100%;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    background-image: linear-gradient( rgba(0, 0, 0, 1)10%, rgba(91, 91, 91, 1),rgba(0, 0, 0, 1), rgba(91, 91, 91, 1),rgba(0, 0, 0, 1), rgba(91, 91, 91, 1));
    font-family: "toppan-bunkyu-midashi-min-st", serif;
    font-weight: 900;
    font-style: normal;
    font-feature-settings: "palt";


}


a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.sp {
    display: none;
}
.pc {
    display: block;
}



/* ---------------------------------------------------------------- header logo ----------------------------------------------------------------- */


#display {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    background-color: #eee;
}


.header {
    position: fixed;
    top: 2vw;
    left: 2vw;
    width: 100%;
    z-index: 10;
    transition: 0.8s ease-in-out;
    opacity: 0;
    pointer-events: none;

}

.header.active {
    position: fixed;
    top: 2vw;
    left: 2vw;
    z-index: 10;
    width: 100%;
    opacity: 1;
    pointer-events: none;
}

.header-inner {
    width: 100%;
    height: auto;
}

.header h1 {
    font-size: min(6vw, 80px);
    writing-mode: vertical-lr;
    color: transparent;
    background: url(../image/logo.svg) no-repeat top center / contain;
}



/* ---------------------------------------------------------------- top ----------------------------------------------------------------- */



.top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 56.25vw;
    max-height: 100vh;
    background-color: #121212;
    border-bottom: solid 4px #edd15d;

}
.top .top-inner {
    position: relative;
    width: auto;
    height: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

.top-inner .movie {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; 
    margin: 0 auto;
}
.movie .js-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }


  .movie-sp .js-video2 {
    display: none;
}

.top .top-inner .movie_btn {
    position: absolute;
    bottom: 2vw;
    left: 2vw;
    z-index: 11;
    opacity: 1;
    transition: 0.2s all;
}
.top .top-inner .movie_btn:hover {
    opacity: 0.8;
}


.movie_btn .icon-audio-off {
    display: inline-block;
    width: min(8.3vw, 50px);
    aspect-ratio: 1 / 1;
    background: url(../image/audio.webp)no-repeat center / contain;

}

.movie_btn .icon-audio-on {
    display: inline-block;
    width: clamp(35px, 4.5vw, 50px);
    aspect-ratio: 1 / 1;
    background: url(../image/audio_off.webp)no-repeat center / contain;

}


button {
    background-color: inherit;
}


/* ---------------------------------------------------------------- phrase ----------------------------------------------------------------- */


.phrase_f  {
    position: sticky;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 25vw;
    min-height: 300px;
    padding: 10vw 0 20vw 0;

}

.phrase {
    position: relative;
    width: 100%;
    height: 25vw;
    min-height: 300px;
    margin: 20vw 0;

}

 
.phrase_f .phrase-inner,
.phrase .phrase-inner {
    position: relative;
    display: flex;
    justify-content: center;
    width: 15vw;
    height: 100%;
    margin: 0 auto;

}

.phrase-inner img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width:  auto;
    height: 100%;

}


.active .phrase-inner img:nth-child(even) {
    position: absolute;
    width:  auto;
    height: 100%;
    transition: 1s ease-in-out;
    opacity: 1;

}

.phrase-inner img:nth-child(2) {
    position: absolute;
    width:  auto;
    height: 100%;
    opacity: 0;

}

#text {
    transition: 0.8s ease-in-out;
}

.phrase_f h2:nth-child(2) {
    position: relative;
    color: transparent;    
}

.phrase_f h2 .time1 ,
.phrase h2 .time1 {
    padding: 1px;
    border: solid 2px #edd15d;
}

.phrase_f h2:nth-child(2) .time1 {
    border: 0;
}

.phrase_f h2 .time2,
.phrase h2 .time2 {
    text-combine-upright: all;
}


/* ---------------------------------------------------------------- content ----------------------------------------------------------------- */

.content {
    width: 100%;
    height: auto;
}

.content-inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 50vw auto 0 auto;
}

.content-inner .content-img {
    position: relative;
    width: 60vw;
    max-width: 850px;
    margin: 0 auto;
    opacity: 0;

}
.content-inner.active .content-img {
    position: relative;
    width: 60vw;
    max-width: 850px;
    margin: 0 auto;
    transition: 2s ease-in-out all;
    opacity: 1;

}

.content-img img {
    width: 100%;
    height: auto;
}
.content-inner .content-img .smoke {
    content: '';
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    aspect-ratio: 1 / 1;
    opacity: 0.5;
    filter: blur(20px);
}
.smoke .smoke-inner {
    position: relative;
    width: 100%;
    height: 100%;

}

.smoke-inner img {
    position: absolute;
    top:  50%;
    left: 50%;
    width: 100%;
    animation: steam_Move 5s infinite linear;
    transition: all 3s;
    transform: translate(-50%, -10%) rotateY(0deg) scale(1, 1);
}
@keyframes steam_Move {
    0% {
       opacity: 0;
       filter: blur(10px);
       transform: translate(-50%, -10%) rotateY(0deg) scale(1, 1);
   }
   20% {
        opacity: 0.5;
        transform: translate(-45%, -40%) rotateY(40deg) scale(0.8, 1.2);
   }
   70% {
        opacity: 0;
        transform: translate(-55%, -40%) rotateY(-20deg) scale(1, 1.2);

   }
   100% {
        opacity: 0;
        filter: blur(20px);
        transform: translate(-50%, -40%) rotateY(50deg) scale(2, 2);
   }
}

.smoke-inner img:nth-child(2) {
    animation: steam_Move2 8s  infinite linear;
    transition: all 1s ease-in-out;
    transform: translate(0, 0) rotateY(0deg) scale(-1, 1);
}
@keyframes steam_Move2 {
    0% {
       opacity: 0;
       filter: blur(12px);
       transform: translate(0, 0) rotateY(0deg) scale(-1, 1);
   }
   20% {
        opacity: 0.75;
        transform: translate(0%, -20%) rotateY(20deg) scale(-0.8, 0.8);
   }
   66% {
        opacity: 0;
        transform: translate(0%, -20%) rotateY(2deg) scale(-1.2, 0.8);

   }
   100% {
        opacity: 0;
        filter: blur(20px);
        transform: translate(0%, -20%) rotateY(50deg) scale(-0.5, 2);
   }
}

.smoke-inner img:nth-child(3) {
    width: 80%;
    animation: steam_Move3 6s  infinite linear;
    transition: all 3s ease-in-out;
    transform: translate(-110%, 10%) rotateY(0deg) scale(1, 1);

}
@keyframes steam_Move3 {
    0% {
       opacity: 0;
       filter: blur(12px);
       transform: translate(-110%, 10%) rotateY(0deg) scale(1, 1);
   }
   33% {
        opacity: 0.75;
        transform: translate(-110%, -20%) rotateY(40deg) scale(0.8, 1);
   }
   66% {
        transform: translate(-110%, -20%) rotateY(2deg) scale(1.2, 1);

   }
   100% {
        opacity: 0;
        filter: blur(20px);
        transform: translate(-110%, -20%) rotateY(50deg) scale(1.4, 1.0);
   }
}


.content-inner .titile01,
.access-inner .titile01 {
    position: relative;
    z-index: 20;
    width: 85%;
    margin: 3vw auto 8vw auto ;

}

.access-inner #access {
    position: absolute;
    top: -1em;
    width: 100%;
    height: 1em;
    font-size: min(8.4vw, 110px);
}


.content-inner .titile01 .smoke2,
.access-inner .titile01 .smoke2 {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    transform: translate(-50% , -50%);
    width: auto;
    height: 170%;
    opacity: 0;
}

.content-inner .titile01.active .smoke2,
.access-inner .titile01.active .smoke2 {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    transform: translate(-50% , -50%) scale(1.5, 1.5);
    width: auto;
    height: 170%;
    animation: steam_Move4 1.8s ease-in-out forwards;
}
@keyframes steam_Move4 {
    0% { 
       left: 0;
       opacity: 0;
       filter: blur(8px);
       transform: translate(-50% , -50%) rotate(0) scale(0.7 , 0.7);
   }
   30% {
        opacity: 1;
        transform: translate(-50% , -20%) rotate(5deg) ;

    }
   50% {
        transform: translate(-50% , -60%) rotate(-5deg) ;
    }
    100% {
        top: 50%;
        left: 30%;
        opacity: 0;
        filter: blur(10px);
        transform: translate(50% , -50%) rotate(5deg)   scale(1.5 , 1.5);
   }
}

.content-inner .titile01 .smoke2_2,
.access-inner .titile01 .smoke2_2  {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    transform: translate(-50% , -50%);
    width: auto;
    height: 150%;
    opacity: 0;
}

.content-inner .titile01.active .smoke2_2,
.access-inner .titile01.active .smoke2_2 {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    transform: translate(-50% , -50%) scale(1.5, 1.5);
    width: auto;
    height: 150%;
    animation: steam_Move6 1.8s ease-in-out forwards;
}
@keyframes steam_Move6 {
    0% { 
       left: -10%;
       opacity: 0;
       filter: blur(8px);
       transform: translate(-50% , -20%) rotate(5deg) scale(0.7 , 0.7);
   }
   30% {
        opacity: 1;
        transform: translate(-50% , -50%) rotate(0) ;

    }
   50% {
        transform: translate(-50% , -40%) rotate(2deg) ;
    }

   100% {
        top: 50%;
        opacity: 0;
        filter: blur(10px);
        transform: translate(50% , -50%) rotate(5deg)   scale(1.5 , 1.5);
   }
}


.titile01 h2 {
    position: relative;
    width: 0;
    opacity: 0;
    overflow: hidden;
    font-size: min(5.8vw, 85px);
    white-space: nowrap;
    color: #edd15d;

}
.titile01.active h2 {
    position: relative;
    width: 0;
    opacity: 0;
    overflow: hidden;
    font-size: min(5.8vw, 85px);
    color: #edd15d;
    white-space: nowrap;
    animation: title 2s  ease-in-out forwards;

}
@keyframes title {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
       width: 70%;
       opacity: 1;
    }
}

.content-box .content-map {
    position: absolute;
    top: -35%;
    right: -15%;
    transform: translate(50% , -50%);
    width: 12vw;
    min-width: 130px;
    max-width: 220px;
}

.content-inner .content-box {
    position: relative;
    width:  60vw;
    max-width: 750px;
    margin: 0 auto;
}

.content-box .content-textbox {
    position: relative;
    z-index: 20;
    display: flex;
    width:  60vw;
    max-width: 750px;
    height: 100dvh;
    max-height: 260px;
    margin: 0 auto;
    opacity: 0;

}
.content-box .content-textbox.active {
    position: relative;
    z-index: 20;
    display: flex;
    width:  60vw;
    max-width: 750px;
    height: 100dvh;
    max-height: 260px;
    margin: 0 auto;
    transition: 0.8s ease-in-out;
    opacity: 1;
}

.content-textbox p {
    margin-left: auto;
    font-size: min(1.9vw, 20px);
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 2.5;
    font-feature-settings: normal;
    color: #edd15d;
}

.content-textbox p:first-child {
    margin-left: 0;
}

.content-textbox .w {
    text-orientation: mixed;
}

.content-textbox p .deta {
    display: block;
    margin-right: -0.5em;
    font-size: min(1.5vw, 16px);
    text-orientation: mixed;
}

p span.deta + br {
    display: none; 
}
.content-textbox p .up {
    text-orientation: upright;
}



/* ---------------------------------------------------------------- eat ----------------------------------------------------------------- */


.eat {
    position: relative;
    width: 100%;
    height: auto;
}

.eat #eat {
    position: absolute;
    top: -1em;
    width: 100%;
    height: 1em;
    font-size: min(8.4vw, 110px);
}


.eat .titile02,
.intro .titile02 {
    position: relative;
    width: 100%;
    border-bottom: solid 4px #edd15d;
}

.eat .titile02.active .smoke2,
.intro .titile02.active .smoke2 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50% , -50%);
    z-index: 10;
    width: auto;
    height: 150%;
    opacity: 0;
    animation: steam_Move5 1.8s ease-in-out forwards;

}
.eat .titile02 .smoke2,
.intro .titile02 .smoke2 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50% , -50%);
    z-index: 10;
    width: auto;
    height: 150%;
    opacity: 0;

}
@keyframes steam_Move5 {
    0% { 
       left: 0;
       opacity: 0;
       filter: blur(8px);
       transform: translate(-50% , -50%) rotate(0) scale(0.7 , 0.7);

   }
   30% {
        opacity: 1;
        transform: translate(-50% , -20%) rotate(5deg) ;

    }
   50% {
        transform: translate(-50% , -60%) rotate(-5deg) ;
    }
    70% {
        transform: translate(-50% , -40%) rotate(0) ;
        }

   100% {
       left: 30%;
       opacity: 0;
       transform: translate(30% , -50%) rotate(5deg)   scale(1.5 , 1.5);
       filter: blur(10px);
   }
}

.eat .titile02.active .smoke2_2,
.intro .titile02.active .smoke2_2 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50% , -50%);
    z-index: 10;
    width: auto;
    height: 150%;
    animation: steam_Move7 1.8s ease-in-out forwards;
    opacity: 0;

}
.eat .titile02 .smoke2_2,
.intro .titile02 .smoke2_2 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50% , -50%);
    z-index: 10;
    width: auto;
    height: 150%;
    opacity: 0;

}

@keyframes steam_Move7 {
    0% { 
       left: -10%;
       opacity: 0;
       filter: blur(8px);
       transform: translate(-50% , -20%) rotate(5deg) scale(0.7 , 0.7);
   }
   30% {
        opacity: 1;
        transform: translate(-50% , -50%) rotate(0) ;

    }
   50% {
        transform: translate(-50% , -40%) rotate(2deg) ;
    }


   100% {
       top: 50%;
       opacity: 0;
       filter: blur(10px);
       transform: translate(30% , -50%) rotate(5deg)   scale(1.5 , 1.5);
   }
} 



.titile02 .titile02-inner {
    position: relative;
    width: 85%;
    max-width: 1340px;
    margin: 0 auto;
}


.titile02-inner h2 {
    transform: translateY(5%);
    width: 0;
    overflow: hidden;
    font-size: min(8.4vw, 110px);
    white-space: nowrap;
    color: #edd15d;

}
.active .titile02-inner h2 {
    transform: translateY(5%);
    width: 0;
    font-size: min(8.4vw, 110px);
    white-space: nowrap;
    overflow: hidden;
    color: #edd15d;
    animation: title 2s ease-in-out forwards;

}


.eat .eat-inner {
    width: 90%;
    max-width: 1200px;
    margin: 10vw auto;
}

.eat-inner .eat-img {
    display: flex;
    align-items: center;
    width: 100%;
}

.eat-img .eat1 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 30%;
    height: auto;
    transition: 0.8s 0.4s ease-in-out;
    opacity: 0;
}
.eat-img .eat2 {
    transition: 0.8s 0.5s ease-in-out;
}
.eat-img .eat3 {
    transition: 0.8s 0.7s ease-in-out;
}

.active .eat-img .eat1 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 30%;
    height: auto;
    opacity: 1;
}



.eat1 img {
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: contain;
    margin: auto 0;
}



.eat1 p {
    margin: 0 auto;
    font-size: min(1.6vw, 20px);
    line-height: 1.7 ;
    color: #edd15d;
}

.active .eat-img .arrow {
    width: 3vw;
    max-width: 46px;
    height: auto;
    transition: 0.8s 0.4s ease-in-out;
    opacity: 1;
}
.eat-img .arrow {
    width: 3vw;
    max-width: 46px;
    height: auto;
    opacity: 0;

}

.arrow img {
    width: 100%;
}



/* ---------------------------------------------------------------- intro ----------------------------------------------------------------- */


.intro {
    position: relative;
    width: 100%;
    height: auto;
}
.intro #intro {
    position: absolute;
    top: -1em;
    width: 100%;
    height: 1em;
    font-size: min(8.4vw, 110px);
}


.intro-inner {
    width: 100%; 
    height: auto;
}

 .intro-inner .intro-wrap {
    width: 100%;
    height: auto;
    overflow: hidden;
 }
 .intro-wrap .intro-content {
    width: 100%;
    border-bottom: 3px solid #edd15d;
    background-color: #000;
 }

 .intro-content .intro-inner2 {
    position: relative;
    display: flex;
    align-items: center;
    width: 90%;
    max-width: 1513px;
    height: auto;
    padding: 5vw 0;
    margin: 0 auto;
 }
 .intro-content:nth-child(even) .intro-inner2 {
    flex-direction: row-reverse;
 }


 .intro-inner2 .intro-imgbox {
    position: relative;
    width: 45%;
    height: auto;
 }

 .intro-inner2 .intro-imgbox::before {
    content: '';
    position: absolute;
    transform: translateY(-10%) scale(0.5);
    transform-origin: bottom;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: url(../image/intro_smoke.webp) no-repeat center / contain;
    opacity: 0.2;
    filter: blur(10px);
    mix-blend-mode: screen;
 }
 .active .intro-inner2 .intro-imgbox::before {
    content: '';
    position: absolute;
    transform: translateY(-15%)  scale(1.1);
    width: 100%;
    aspect-ratio: 1 / 1;
    background: url(../image/intro_smoke.webp) no-repeat center / contain;
    transition: 1.5s ease-in-out;
    opacity: 1;
    filter: blur(0);
    mix-blend-mode: screen;
    animation: smoke 3.4s 1.5s ease-in-out infinite;
 }

@keyframes smoke {
    0% {
        transform: translateY(-15%) scale(1.1);
    }
    50% {
        transform: translateY(-15%) scale(1);

    }
    100% {
        transform: translateY(-15%) scale(1.1);
    }
}


.intro-imgbox img {
    width: 100%;
    height: 100%;
}

 .intro-inner2 .intro-textbox {
    width: 55%;
    overflow: hidden;
 }
 .intro-textbox .text-inner {
    width: 80%;
    margin: 0 auto;
 }

 .active .text-inner  h3 {
    margin-bottom: 0.4em;
    font-size: min(4.55vw, 50px);
    line-height: 1.5;
    color: #edd15d;
    transform-origin: center;
    transition: 1.5s ease-in-out;
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
 }
 .text-inner h3 {
    margin-bottom: 0.4em;
    font-size: min(4.55vw, 50px);
    line-height: 1.5;
    color: #edd15d;
    transform-origin: center;
    opacity: 0.3;
    filter: blur(10px);
    transform: scale(1.2);

 }

 .active .text-inner p {
    font-size: min(1.9vw , 25px);
    line-height: 1.7;
    color: #edd15d;
    transform-origin: center;
    transition: 1.5s ease-in-out;
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
 }
 .text-inner p {
    font-size: min(1.9vw , 25px);
    letter-spacing: 0.1em;
    line-height: 1.7;
    color: #edd15d;
    transform-origin: center;
    transform: scale(1.2);
    opacity: 0.3;
    filter: blur(10px);
 }



 .intro-content .text-inner .price {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 8vw;
    font-size: min(4.55vw, 70px);
    letter-spacing: 0;
 }


 .intro-content:nth-child(even) .text-inner .price {
    justify-content: start;
    padding-left: 10.5vw;
 }


 .g {
    position: relative;
    margin-right: 0.5em;
    font-size: min(1.96vw , 20px);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #fff;

}

.g::before {
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(5.2vw, 50px);
    aspect-ratio: 1 / 1;
    border: 1px solid #fff;
    border-radius: 50%;


}
.en {
    margin-top: auto;
    margin-bottom: 1vw;
    font-size: min(2.6vw, 30px);
}


.zei {
    margin-top: auto;
    margin-bottom: 1.2vw;
    font-size: min(1.95vw, 20px);
}


.p {
    margin: auto 0.5em 1.5vw 0;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: min(1.5vw, 15px);
    color: #fff;
}

.active .text-inner .notes {
    font-size: min(1.56vw, 18px);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    transition: 1.5s ease-in-out;
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
    transform-origin: center;

}
.text-inner .notes {
    font-size: min(1.56vw, 18px);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    filter: blur(10px);
    transform-origin: center;
    transform: scale(1.2);
    opacity: 0.3;

}




/* ---------------------------------------------------------------- back ----------------------------------------------------------------- */


.back {
    height: 46vw;
    min-height: 460px;
    background: url(../image/bg01.webp) no-repeat fixed center / cover;
}
.back2 {
    height: 65vw;
    background: url(../image/bg02.webp) no-repeat fixed center / cover;

}



/* ---------------------------------------------------------------- access ----------------------------------------------------------------- */

.access {
    position: relative;
    width: 100%;
    height: auto;
    border-top: 3px solid #edd15d;

}



.access .access-inner {
    width: 100%;
    max-width: 1513px;
    height: auto;
    margin: 0 auto;
    padding: 10vw 0;
    
}


.access-inner .access-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10%;
    width: 85%;
    margin: 0 auto;
}

.access-inner .access-content {
    width: 45%;
    margin-bottom: 5vw;
    
} 
.access-content iframe {
    width: 100%;
    height: 18.8vw;
    max-height: 360px;
    min-height: 200px;
    border-radius: 1vw;
}


.access-content .place{
    margin-top: 1em;
    font-size: 17px;
    color: #fff;
}
.access-content .place2{
    margin-top: 0.8em;
    font-size: 15px;
    letter-spacing: 0.08em;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #fff;

}


/* ---------------------------------------------------------------- footer ----------------------------------------------------------------- */


.footer {
    width: 100%;
    background-color: #edd15d;
}

.footer-inner {
    width: 40%;
    max-width: 430px;
    height: auto;
    margin: 0 auto;
}

.footer-inner .logo {
    width: 7.5vw;
    padding: 5vw 0;
    margin: 0 auto;
}
.logo img {
    width: 100%;
    height: auto;
}

.footer-inner .text {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto 5vw auto;
}
.text a {
    font-size: min(1.96vw, 20px);
    writing-mode: vertical-rl;
    font-feature-settings: normal;
    letter-spacing: 0.15em;
    color: #000;
    transition: 0.3s ease-in-out;

}
.text a:hover {
    opacity: 0.5;
}

.footer-inner p {
    margin-bottom: 1.5em;
    font-size: 10px;
    text-align: center;
    letter-spacing: 0.15em;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    
}



 /* ---------------------------------------------------------------- メディアクエリ 768px ----------------------------------------------------------------- */


 @media screen and (max-width:768px)  {
    
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }

    .header h1 {
        font-size: min(11vw, 50px);
    }

    /* FV調節 */

    .top {
        height: auto;
    }

    .top .top-inner {
        height: 170vw;
        max-height: inherit;
        aspect-ratio: 0;
    }
    

    .top-inner .movie {
        display: none;
    }
    
    .top-inner .movie-sp{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        border-bottom: solid 4px #edd15d;
    }

    .top .top-inner .movie_btn {
        position: absolute;
        top: 5vw;
        left: 5vw;
        bottom: auto;
        z-index: 11;
        opacity: 1;
        transition: 0.2s all;
    }
    .top .top-inner .movie_btn:hover {
        opacity: 1;
    }
    .movie_btn .icon-audio-on {
        width: min(8.3vw, 50px);
    }


    .movie-sp .js-video2 {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    

    .phrase_f,
    .phrase {
        height: 50vw;
        min-height: 200px;
    }

    .content-inner {
        margin: 210vw auto 0 auto;
    }

    .content-inner .content-img {
        width: 75%;
    }
    .content-inner.active .content-img {
        width: 75%;
        transition: 2s 2s ease-in-out all;
    }

    .content-inner .content-img::before {
        top: 30%;
    }

    .content-inner .movie-img {
        top: 0;
        width: 36vw;
    }

    .content-inner .titile01 {
        width: 68vw;
        max-width: 437px;
        margin: 10vw auto;
    }

    .access-inner .titile01 {
        width: 33vw;
        max-width: 215px;
        margin: 10vw auto;
    }
    .content-inner .titile01.active .smoke2,
    .access-inner .titile01.active .smoke2 {
        animation: steam_Move_sp1 1.8s 2s ease-in-out forwards;
    }
    @keyframes steam_Move_sp1 {
        0% { 
        left: 0;
        opacity: 0;
        filter: blur(8px);
        transform: translate(-50% , -50%) rotate(0) scale(0.7 , 0.7);
    }
    30% {
        opacity: 1;
        transform: translate(-50% , -20%) rotate(5deg) ;

        }
    50% {
        transform: translate(-50% , -60%) rotate(-5deg) ;
        }

    100% {
        left: 10%;
        top: 50%;
        opacity: 0;
        filter: blur(10px);
        transform: translate(0% , -50%) rotate(5deg)   scale(1.5 , 1.5);

    }
}
    .access-inner .titile01.active .smoke2 {
        animation: steam_Move_sp5 1.8s ease-in-out forwards;
    }
    @keyframes steam_Move_sp5 {
        0% { 
        left: -50%;
        opacity: 0;
        filter: blur(8px);
        transform: translate(-50% , -50%) rotate(0) scale(0.7 , 0.7);
    }
    30% {
        opacity: 1;
        transform: translate(-50% , -20%) rotate(5deg) ;

        }
    50% {
        transform: translate(-50% , -60%) rotate(-5deg) ;
        }

    100% {
        left: -15%;
        top: 50%;
        opacity: 0;
        filter: blur(10px);
        transform: translate(-50% , -50%) rotate(5deg)   scale(1.5 , 1.5);
    }
}

.content-inner .titile01.active .smoke2_2,
.access-inner .titile01.active .smoke2_2 {
    animation: steam_Move_sp2 2s 2s ease-in-out forwards;
}


@keyframes steam_Move_sp2 {
    0% { 
       left: -20%;
       opacity: 0;
       filter: blur(8px);
       transform: translate(-50% , -20%) rotate(5deg) scale(0.7 , 0.7);
   }
   30% {
        opacity: 1;
        transform: translate(-50% , -50%) rotate(0) ;

    }
   50% {
        transform: translate(-50% , -30%) rotate(2deg) ;
    }


   100% {
       top: 50%;
       left: 10%;
       opacity: 0;
       filter: blur(10px);
       transform: translate(50% , -50%) rotate(5deg)   scale(1.5 , 1.5);

   }
}

.access-inner .titile01.active .smoke2_2 {
    animation: steam_Move_sp6 2s ease-in-out forwards;
}


@keyframes steam_Move_sp6 {
    0% { 
       left: -10%;
       opacity: 0;
       filter: blur(8px);
       transform: translate(-50% , -20%) rotate(5deg) scale(0.7 , 0.7);
   }
   30% {
        transform: translate(-50% , -50%) rotate(0) ;
        opacity: 1;

    }
   50% {
        transform: translate(-50% , -30%) rotate(2deg) ;
    }


   100% {
       top: 50%;
       left: 0;
       opacity: 0;
       filter: blur(10px);
       transform: translate(50% , -50%) rotate(5deg)   scale(1.5 , 1.5);
   }
}


    .titile01 h2 {
        font-size: min(10vw, 65px);
    }
    .titile01.active h2 {
        font-size: min(10vw, 65px);
        animation: title2 2s 2s ease-in-out forwards;

    }

    .access-inner .titile01 h2 {
        font-size: min(10vw, 65px);
    }
    .access-inner .titile01.active h2 {
        font-size: min(10vw, 65px);
        animation: title2 2s ease-in-out forwards;

    }

@keyframes title2 {
    0% {
        width: 0;
        opacity: 0;
    }
    100% {
       width: 100%;
       opacity: 1;
    }
}

    .content-inner .content-box {
        width: 85%;
        max-width: 500px;
        opacity: 0;
        
    }
    .content-inner .content-box.active {
        width: 85%;
        max-width: 500px;
        transition: 1s 2s all;
        opacity: 1;

        
    }

    .content-box .content-map {
        position: static;
        display: block;
        width: 35vw;
        min-width: 130px;
        max-width: 300px;
        margin: 0 auto 10vw auto;
        transform: translate(0);

    }

    .content-box .content-textbox.active {
        width: 100%;
        height: 50vw;
    }
    .content-box .content-textbox {
        width: 100%;
        height: 50vw;

    }

    .content-textbox p {
        font-size: min(3.6vw, 20px);
        line-height: 1.7;
    }

    .content-textbox p .deta {
        font-size: min(3.3vw, 15px);
        margin-right: -0.2em;

    }

    .titile02 .titile02-inner {
        width: 71vw;
        max-width: 420px;
    }

    .intro .titile02 .titile02-inner {
        width: 65vw;
        max-width: 382px;
    }

    .eat .titile02.active .smoke2,
    .intro .titile02.active .smoke2 {
        animation: steam_Move_sp3 1.5s ease-in-out forwards;

    }

    @keyframes steam_Move_sp3 {
        0% { 
        left: -10%;
        opacity: 0;
        filter: blur(8px);
        transform: translate(-50% , -50%) rotate(0) scale(0.7 , 0.7);
    }
    30% {
        opacity: 1;
        transform: translate(-50% , -20%) rotate(5deg) ;

        }
    50% {
        transform: translate(-50% , -60%) rotate(-5deg) ;
        }
    70% {
        transform: translate(-50% , -40%) rotate(0) ;
        }

    100% {
        left: 30%;
        opacity: 0;
        filter: blur(10px);
        transform: translate(0 , -50%) rotate(5deg)   scale(1.5 , 1.5);

    }
    }

    .eat .titile02.active .smoke2_2,
    .intro .titile02.active .smoke2_2 {

        animation: steam_Move_sp4 1.8s ease-in-out forwards;

    }

    @keyframes steam_Move_sp4 {
        0% { 
        left: -10%;
        opacity: 0;
        filter: blur(8px);
        transform: translate(-50% , -20%) rotate(5deg) scale(0.7 , 0.7);
    }
    30% {
        opacity: 1;
        transform: translate(-50% , -50%) rotate(0) ;

        }
    50% {
        transform: translate(-50% , -40%) rotate(2deg) ;
        }


    100% {
        top: 50%;
        left: 10%;
        opacity: 0;
        filter: blur(10px);
        transform: translate(30% , -50%) rotate(5deg)   scale(1.5 , 1.5);
    }
    } 


    .titile02-inner h2 {
        font-size: 40px;
        font-size: min(11vw, 65px);
        text-align: center;
    }
    .active .titile02-inner h2{
        font-size: 40px;
        font-size: min(11vw, 65px);
        text-align: center;
        animation: title2 2s ease-in-out forwards;
    }

    .eat .eat-inner {
        margin: 10vw auto 40vw auto;
    }

    .eat-inner .eat-img {
        display: block;
    }

    .active .eat-img .eat1 {
        width: 75%;
        margin: 0 auto;
    }

    .content-inner .vend {
        display: none;
    }

    @keyframes steam_Move {
        0% {
           opacity: 0;
           filter: blur(10px);
           transform: translate(-50%, -10%) rotateY(0deg) scale(1, 1);
       }
       20% {
            opacity: 0.75;
            transform: translate(-45%, -40%) rotateY(40deg) scale(0.8, 1.2);
       }
       70% {
            opacity: 0;
            transform: translate(-55%, -40%) rotateY(-20deg) scale(1, 1.2);
    
       }
       100% {
           opacity: 0;
           filter: blur(20px);
           transform: translate(-50%, -40%) rotateY(50deg) scale(2, 2);

       }
    }
    
    .smoke-inner img:nth-child(2) {
        transform: translate(0, 0) rotateY(0deg) scale(-1, 1);
        animation: steam_Move2 8s  infinite linear;
        transition: all 1s ease-in-out;
    }
    @keyframes steam_Move2 {
        0% {
           opacity: 0;
           filter: blur(12px);
           transform: translate(0, 0) rotateY(0deg) scale(-1, 1);
       }
       20% {
            opacity: 1;
            transform: translate(0%, -20%) rotateY(20deg) scale(-0.8, 0.8);
       }
       66% {
            opacity: 0;
            transform: translate(0%, -20%) rotateY(2deg) scale(-1.2, 0.8);
    
       }
       100% {
           opacity: 0;
           filter: blur(20px);
           transform: translate(0%, -20%) rotateY(50deg) scale(-0.5, 2);
       }
    }
    
    .smoke-inner img:nth-child(3) {
        width: 80%;
        transform: translate(-110%, 10%) rotateY(0deg) scale(1, 1);
        animation: steam_Move3 6s  infinite linear;
        transition: all 3s ease-in-out;
    }
    @keyframes steam_Move3 {
        0% {
           opacity: 0;
           filter: blur(12px);
           transform: translate(-110%, 10%) rotateY(0deg) scale(1, 1);
       }
       33% {
            opacity: 0.9;
            transform: translate(-110%, -20%) rotateY(40deg) scale(0.8, 1);

       }
       66% {
            transform: translate(-110%, -20%) rotateY(2deg) scale(1.2, 1);
    
       }
       100% {
           opacity: 0;
           filter: blur(20px);
           transform: translate(-110%, -20%) rotateY(50deg) scale(1.4, 1.0);

       }
    }
    


    .eat-img .eat1 {
        width: 75%;
        margin: 0 auto;
    }

    .eat1:nth-child(1) img {
        opacity: 1;
    }
    .eat1 img {
        aspect-ratio: 1 / 1 ;
    }

    .eat1 p {
        font-size: min(3.6vw, 20px);
        text-align: center;
    }
    
    .eat-img .arrow {
        display: flex;
        justify-content: center;
        width: 2vw;
        margin: 5vw auto 0 auto;
    }


    .intro-content .intro-inner2 {
        display: block;
        width: 90%;
        padding: 10vw 0;
    }

    .intro-inner2 .intro-imgbox {
        width: 100%;
    }

    .intro-inner2 .intro-textbox {
        width: 100%;
    }

    .intro-textbox .text-inner {
        width: 100%;
    }
    .active .text-inner h3 {
        margin-bottom: 0.1em;
        font-size: min(7.2vw, 45px);
    }
    .text-inner h3 {
        margin-bottom: 0.1em;
        font-size: min(7.2vw, 45px);
    }

    .active .text-inner p {
        font-size: min(4.1vw, 22px);
    }
    .text-inner p {
        font-size: min(4.1vw, 22px);
    }
    
    .intro-content .text-inner .price {
        margin-top: 3vw ;
        font-size: min(9.7vw, 60px);
    }
    .intro-content:nth-child(even) .text-inner .price {
        justify-content: end;
        padding-left: 0;
    }

    .g {
        font-size: min(4.16vw, 20px);
    }
    .g::before {
        width: min(11vw, 55px);
    }

    .en {
        font-size: min(5.5vw, 25px);
        margin-bottom: 2vw;
    }
    
    .zei {
        font-size: 12px;
        font-size: min(3.3vw, 15px);
        margin-bottom: 3vw;
    }

    .p {
        font-size: min(3.3vw, 15px);
        margin-bottom: 2.5vw;
    }

    .back {
        height: 100vw;
        min-height: initial;
        background: url(../image/bg01_sp.webp) no-repeat fixed bottom center / cover;

    }

    .access .access-inner {
        padding: 20vw 0 30vw 0;
        overflow: hidden;
    }

    .access-inner .access-wrap {
        display: block;
        flex-wrap: nowrap;
        width: 90%;
    }

    .access-inner .access-content {
        width: 100%;
        margin-bottom: 20vw;
    }
    .access-content .place{
        font-size: min(4.7vw, 25px);
    }
    .access-content .place2 {
        font-size: min(4.16vw, 20px);
    }

    .access-inner .access-content:last-child {
        margin-bottom: 0;
    }

    .access-content iframe {
        height: 50vw;
        max-height: inherit;
        border-radius: 3vw;
    }

    .footer-inner {
        width: 65%;
    }

    .footer-inner .logo {
        width: 20vw;
        max-width: 120px;
        padding: 15vw 0;
    }

    .text a {
        font-size: min(4.1vw, 25px);
    }
    .text a:hover {
        opacity: 1;
    }

    
    .footer-inner .text {
        margin: 0 auto 30vw auto;
    }

    .footer-inner p {
        font-size: min(2.2vw, 12px);
    }

    .back2 {
        height: 100vw;
        background: url(../image/bg2_sp.webp) no-repeat fixed bottom center / cover;

    }


 }