@charset "UTF-8";

/* ==========================================================================
   Parallax & Mask
========================================================================== */
.float-parallax {
  will-change: transform;
  transform: translateZ(0);
}


.mask-wrap {
  overflow: hidden;
  position: absolute;
  right: -0.1vw;
  z-index: 2;
  pointer-events: none;
}
.mask {
  width: 100%;
  height: 100%;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}
.mask-inner {
  width: 101%;
  height: 130%;
  background-position: top;
  background-size: 145%;
  background-repeat: no-repeat;
  will-change: transform;
  will-change: transform;
  transform: translateZ(0);
}


.mask-wrap._pr1 {
  width: 88vw;
  aspect-ratio: 329/328;
}
.mask-wrap._pr1 .mask {
  mask-image: url(img/pr1_v.svg);
  -webkit-mask-image: url(img/pr1_v.svg);
}
.mask-wrap._pr1 .mask-inner {
  background-image: url(img/pr1.jpg);
  background-position: -250% 50%;
  background-size: 102%;
}

.mask-wrap._pr2 {
  bottom: -10.3vw;
  left: -0.1vw;
  width: 53vw;
  aspect-ratio: 246/332;
}
.mask-wrap._pr2 .mask {
  mask-image: url(img/pr2_v.svg);
  -webkit-mask-image: url(img/pr2_v.svg);
}
.mask-wrap._pr2 .mask-inner {
  background-image: url(img/pr2.jpg);
  background-position: 87% 50%;
  background-size: 200%;
}

.mask-wrap._pr3 {
  width: 100vw;
  aspect-ratio: 375/332;
  top: -27.8vw;
  left: 0;
}
.mask-wrap._pr3 .mask {
  mask-image: url(img/pr3_v.svg);
  -webkit-mask-image: url(img/pr3_v.svg);
}
.mask-wrap._pr3 .mask-inner {
  background-image: url(img/pr3.jpg);
  background-size: 105%;
}


@media (max-width: 767px) {
  .mask-wrap._pr1 {
    margin-left: auto;
    margin-bottom: -46vw;
    position: relative!important;
    top: auto;
  }
}
@media (min-width: 576px) {
  .mask-wrap._pr1 {
    width: 49.4vw;
  }

  .mask-wrap._pr3 {
    width: 53vw;
    aspect-ratio: 903/1088;
  }
  .mask-wrap._pr3 .mask {
    mask-image: url(img/pr3.svg);
    -webkit-mask-image: url(img/pr3.svg);
  }
}
@media (min-width: 768px) {
  .mask-wrap._pr1 {
    width: 36vw;
    top: calc(var(--section-gy)*2);
    aspect-ratio: 661/784;
  }
  .mask-wrap._pr1 .mask {
    mask-image: url(img/pr1.svg);
    -webkit-mask-image: url(img/pr1.svg);
  }

  .mask-wrap._pr2 {
    width: 50vw;
    bottom: -0.2vw;
    aspect-ratio: 721/636;
  }
  .mask-wrap._pr2 .mask {
    mask-image: url(img/pr2.svg);
    -webkit-mask-image: url(img/pr2.svg);
  }
  .mask-wrap._pr2 .mask-inner {
    background-position: 100% 50%;
    background-size: 145%;
  }
}
@media (min-width: 992px) {
  .mask-wrap._pr1 {
    width: auto;
    height: 50vw;
    top: 13.4%;
  }
  .mask-wrap._pr2 {
    bottom: -3.55vw;
  }
}
@media (min-width: 1200px) {
  .mask-wrap._pr1 {
    top: 11.45%;
  }
}

/* ==========================================================================
   Slider
========================================================================== */
.ph {
  position: relative;
  z-index: 4;
  margin-bottom: -3.5vw;
}
.ph .swiper {
  overflow: hidden;
}
.ph .swiper-wrapper {
  display: flex;
  transition-timing-function: linear !important;
}
.ph .slide {
  flex-shrink: 0;
  width: 60%;
  margin-right: -1px;
}
.ph .slide img {
  display: block;
  width: 100%;
  aspect-ratio: 832/586;
  object-fit: cover;
  clip-path: polygon(50% 0, 100% 3.5vw, 100% calc(100% - 3.5vw), 50% 100%, 0 calc(100% - 3.5vw), 0 3.5vw);
  -webkit-clip-path: polygon(50% 0, 100% 3.5vw, 100% calc(100% - 3.5vw), 50% 100%, 0 calc(100% - 3.5vw), 0 3.5vw);
}
@media (max-width: 575px) {
  .ph .slide {
    width: 75%;
  }
}


/* ==========================================================================
   Intro
========================================================================== */
#aboutus {
  margin-bottom: -3.5vw;
}

#aboutus .bottle {
  width: min(20%, 9rem);
  position: absolute;
  bottom: calc(100% - 10vw - var(--section-gy));
  right: 10%;
  z-index: 5;
}
#aboutus .bottle picture {
  transform: rotate(25deg);
}
@media (min-width: 992px) {
  #aboutus .bottle {
    right: 18%;
    bottom: calc(100% - 2vw - var(--section-gy));
  }
}



#intro .mask-text > *{
  background-image: url(img/intro_bg.jpg);
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  will-change: background-position-y;
  color: transparent;
  will-change: transform;
  transform: translateZ(0);
  position: relative;
}
#intro picture {
  max-width: 38em;
  margin: 0 auto;
  padding-left: 1.5%;
}

#intro .mask-text > *::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color1);
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
#intro .mask-text > *.show::before {
  clip-path: inset(0 0 100% 0);
}

@media (max-width: 991px) {
  #intro .mask-text h3 {
    font-size: 1.857em;
  }
}
@media (max-width: 575px) {
  #intro .mask-text h2 {
    font-size: 7.25vw;
  }
  #intro .mask-text h3 {
    font-size: 4.75vw;
  }
}



/* ==========================================================================
   About
========================================================================== */
#about {
  position: relative;
  z-index: 3;
}
@media (min-width: 768px) {
  #about .txtBox .read {
    max-width: 35em;
  }
}
@media (min-width: 992px) {
  #about .txtBox {
    min-height: 29.7vw;
  }
  #about .txtBox .read {
    max-width: 40em;
  }
}
@media (min-width: 1200px) {
  #about .txtBox .read {
    max-width: 42em;
  }
}


#about .box {
  padding: calc(7% + 10vw) 7% 15vw;
  position: relative;
}
#about .box::before {
  content: '';
  display: block;
  width: min(120%,100vw);
  height: 60%;
  background: var(--off-white);
  position: absolute;
  top: 0;
  left: -10%;
  z-index: -3;
  clip-path: polygon(0 10vw, 100% 0, 100% calc(100% - 10vw), 0% 100%);
  -webkit-clip-path: polygon(0 10vw, 100% 0, 100% calc(100% - 10vw), 0% 100%);
}
@media (min-width: 576px) {
  #about .box {
    padding: calc(3% + 5vw) 3% 15vw;
  }
  #about .box::before {
    width: 105%;
    height: 100%;
    left: -2.5%;
    clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0% 100%);
  }
}
@media (min-width: 992px) {
  #about .box {
    padding: calc(3% + 5vw) 5% 15vw;
  }
}



#standard ol {
  list-style-type: none;
  letter-spacing: .025em;
  counter-reset: standard-num;
}
#standard ol li {
  padding: .75rem 0;
}
#standard ol li + li {
  border-top: 1px solid currentColor;
}
#standard ol li::before {
  display: block;
  counter-increment: standard-num;
  content: '[ ' counter(standard-num) ' ]';
  font-family: var(--font1);
  font-weight: 900;
  margin: 0 0 .5em;
}
#standard ol li p {
  margin: .25em 0 0;
}
@media (min-width: 768px) {
  #standard .headline {
    margin-top: calc(var(--section-gy)/2);
  }
  #standard ol {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
  }
  #standard ol li {
    padding: 0;
  }
  #standard ol li + li {
    border-top: 0;
    border-left: 2px solid currentColor;
    padding-left: 1.5rem;
  }
}


#brew .d-flex {
  align-items: center;
  column-gap: 2%;
  position: relative;
  z-index: 5;
}
#brew picture.beer {
  flex: 0 0 40%;
  margin-left: -3%;
}
#brew .txtBox {
  flex-basis: 100%;
  min-height: initial;
}
#brew ul {
  list-style-type: none;
  letter-spacing: .025em;
}
#brew ul li {
  padding: 1em 0 1em 3.25em;
  position: relative;
}
#brew ul li + li {
  border-top: 1px solid currentColor;
}
#brew ul li svg {
  display: block;
  width: 2.5em;
  height: 2.5em;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
#brew ul li p {
  margin: .25em 0 0;
}
@media (min-width: 576px) {
  #brew .d-flex {
    column-gap: 5%;
  }
  #brew picture.beer {
    flex: 0 0 30%;
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  #brew .d-flex {
    width: 80%;
    margin: 0 auto;
  }
  #brew picture.beer {
    flex: 0 0 14rem;
  }
}
@media (min-width: 992px) {
  #brew picture.beer {
    flex: 0 0 17rem;
  }
  #brew ul li {
    padding: 1em 0 1em 4.5em;
  }
  #brew ul li svg {
    width: 3.5em;
    height: 3.5em;
  }
}




/* ==========================================================================
   Lineup
========================================================================== */

.sl-root {
  width: 100%;
  position: relative;
  aspect-ratio: 1094/750;
}
.sl-bg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  transform: scale(1.2) translate(0,20%);
  pointer-events: none;
  z-index: 1;
}
.sl-ref {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1094px;
  height: 750px;
}
.sl-sw {
  width: 100%;
  overflow: visible;
}
@media (min-width: 768px) {
  .sl-bg {
    transform: scale(1.15) translate(0,4%);
  }
}



#lineup {
  padding: 3vw 0 15vw;
  overflow: hidden;
}
@media (max-width: 575px){
  #lineup .container_S { 
    max-width: 23rem;
  }
}
@media(min-width: 576px) and (max-width: 767px){
  #lineup .container_S { 
    max-width: 36rem;
  }
}
@media(min-width: 992px){
  #lineup { 
    padding: 3vw 0 10vw;
  }
}


#lineup .headline {
  position: relative;
  z-index: 2;
}
#lineup .item {
  width: 100%;
  aspect-ratio: 11/8;
  display: flex;
  justify-content: center;
  flex-direction: column;
  line-height: 1.4;
  position: relative;
}
#lineup .item .txtBox .headline {
  margin-bottom: 1.5rem;
}
#lineup .item .txtBox .headline .font1 {
  line-height: 1.1;
}
#lineup .item p {
  margin-top: 1em;
  margin-bottom: 1em;
}
#lineup .item p.ja {
  line-height: 1.5;
}
#lineup .item picture {
  width: 9.5rem;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  transform: translate(0,-11%);
}
#lineup .item ul {
  list-style-type: none;
  max-width: calc(100% - 11rem);
  margin: 1.5rem 0;
  min-height: 14rem;
  font-family: var(--font1);
  font-size: 1.071em;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
}
#lineup .item ul li + li {
  margin-top: .75em;
  padding-top: .75em;
  border-top: 1px solid currentColor;
}
#lineup .item ul li .label {
  display: block;
  font-size: 0.8em;
  font-weight: 400;
}
#lineup .controller {
  margin-right: auto;
  margin-left: auto;
}
@media (max-width: 767px) {
  #lineup .item .txtBox {
    padding-top: 2rem;
  }
}
@media (min-width: 768px) {
  #lineup .item .txtBox {
    height: 26rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30%;
  }
  #lineup .item .txtBox .details {
    flex-basis: 45%;
    align-self: flex-start;
    padding-bottom: 6rem;
  }
  #lineup .item .txtBox ul {
    flex-basis: 55%;
    max-width: 55%;
    font-size: 1.667em;
  }
  #lineup .item picture {
    width: 25%;
    height: auto;
    left: 47.2%;
    transform: translate(-50%,-11%);
  }
  #lineup .controller {
    margin: 0;
    position: absolute;
    bottom: calc((100% - 26rem)/2);
  }
}



#lineup .swiper-slide-prev .item .txtBox {
  opacity: 0;
  transform: translateX(-25%);
  transition: .4s;
}
#lineup .swiper-slide-next .item .txtBox {
  opacity: 0;
  transform: translateX(25%);
  transition: .4s;
}
#lineup .swiper-slide-active .item .txtBox {
  opacity: 1;
  transform: translateX(0);
  transition: .5s .4s;
}


/* ==========================================================================
   Experience
========================================================================== */
#restaurant .txtBox {
  margin-top: 47.5vw;
  padding-top: var(--section-gy);
}
#restaurant .cards {
  margin-bottom: calc(var(--section-gy)*1.2);
}
@media (min-width: 576px) {
  #restaurant .txtBox {
    margin-left: 28vw;
    margin-top: 0;
    padding-top: calc(var(--section-gy)*0.5);
  }
}
@media (min-width: 768px) {
  #restaurant .cards {
    margin-bottom: calc(var(--section-gy)*0.65193);
    padding-bottom: var(--section-gy);
  }
}

/* ==========================================================================
   Access
========================================================================== */
#access {
  padding-top: 3.5vw;
}
@media (max-width: 991px) {
  #access .d-flex > dl {
    flex-basis: 50%;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
  }
  #access .d-flex > dl + dl {
    margin-top: 1em;
    border-left: 1px solid currentColor;
    padding-left: 1.5em;
  }
}

/* ==========================================================================
   Instagram
========================================================================== */
#instagram {
  position: relative;
}
#instagram::after {
  content: '';
  display: block;
  width: 100%;
  height: 50vw;
  background: var(--l-gray);
  position: absolute;
  bottom: -1px;
  clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0% 20%);
  -webkit-clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0% 20%);
}
#instagram .swiper {
  padding-top: 5%;
}
#instagram .swiper-slide {
  width: 70vw;
}
#instagram .insta-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  aspect-ratio: 266/325;
  background-color: var(--white);
  background-image: url(img/insta-card.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
  border-radius: .75rem;
}
#instagram .insta-card img {
  display: block;
  width: 100%;
}
@media (max-width: 767px) {
  #instagram .slider-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  #instagram .swiper-wrapper {
    transition-timing-function: linear !important;
  }
  #instagram .swiper-slide:nth-of-type(even) {
    transform: translateY(-5%);
  }
}
@media (min-width: 576px) {
  #instagram::after {
    height: 25vw;
    clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0% 20%);
    -webkit-clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0% 20%);
  }
  #instagram .swiper-slide {
    width: 24rem;
  }
}
@media (min-width: 768px) {
  #instagram::after {
    height: 20vw;
    clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
  }
  .slider-wrapper {
    overflow: visible;
  }
  #instagram .swiper {
    padding-top: 1rem;
    overflow: visible;
  }
  #instagram .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    transform: none !important;
  }
  #instagram .swiper-slide {
    width: calc((100% - 3rem)/3);
    margin: 0!important;

    opacity: 0;
    transform: translateY(3rem);
    transition: opacity 2s cubic-bezier(.19, 1, .22, 1), transform 1s cubic-bezier(.19, 1, .22, 1);
  }
  #instagram .swiper-slide.iv.show {
    opacity: 1;
    transform: translateY(0);
  }
  #instagram .swiper-slide:nth-of-type(3n-1){
    transition-delay: .05s;
  }
  #instagram .swiper-slide:nth-of-type(3n) {
    transition-delay: .1s;
  }
}
@media (min-width: 1200px) {
  #instagram::after {
    height: 10vw;
    clip-path: polygon(50% 0%, 100% 50%, 100% 100%, 0 100%, 0% 50%);
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 100% 100%, 0 100%, 0% 50%);
  }
  #instagram .container_S {
    max-width: 59rem;
  }
}
@media (min-width: 1440px) {
  #instagram .container_S {
    max-width: 64rem;
  }
}