/*---------------------------------------------------------
01 / MAIN VISUAL
---------------------------------------------------------*/
.mv {
   position: relative;
   min-height: 46.88vw;
   overflow: hidden;
   background: #f7f8f8;
}

.mv__background {
   position: absolute;
   inset: 0;
   background: url("../images/mv-img1.webp") center center / cover no-repeat;
}

.mv::after {
   position: absolute;
   left: 0;
   bottom: -.05vw;
   z-index: 10;

   width: 100%;
   height: 4vw;

   content: "";
   background: #fff;
   pointer-events: none;

   -webkit-mask-position: center center;
   mask-position: center center;

   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;

   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;

   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201366%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M683%2080H0V0c43.646%2012.356%2091.7%2023.577%20142.829%2033.348%2051.614%209.864%20106.807%2018.337%20164.046%2025.183%2058.3%206.973%20119.316%2012.328%20181.358%2015.918C551.9%2078.133%20617.425%2080%20683%2080Zm683%200H683.129c65.519%200%20131.005-1.869%20194.638-5.551%2062.042-3.589%20123.06-8.945%20181.358-15.918%2057.239-6.846%20112.432-15.319%20164.046-25.183C1274.3%2023.577%201322.35%2012.357%201366%200v80Z%22%2F%3E%3C%2Fsvg%3E");

   mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201366%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M683%2080H0V0c43.646%2012.356%2091.7%2023.577%20142.829%2033.348%2051.614%209.864%20106.807%2018.337%20164.046%2025.183%2058.3%206.973%20119.316%2012.328%20181.358%2015.918C551.9%2078.133%20617.425%2080%20683%2080Zm683%200H683.129c65.519%200%20131.005-1.869%20194.638-5.551%2062.042-3.589%20123.06-8.945%20181.358-15.918%2057.239-6.846%20112.432-15.319%20164.046-25.183C1274.3%2023.577%201322.35%2012.357%201366%200v80Z%22%2F%3E%3C%2Fsvg%3E");
}

.mv__veil {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg,
         rgba(255, 255, 255, .98) 0%,
         rgba(255, 255, 255, .96) 28%,
         rgba(255, 255, 255, .75) 46%,
         rgba(255, 255, 255, .14) 65%,
         rgba(255, 255, 255, .04) 100%);
}

.mv__inner {
   position: relative;
   min-height: 51.88vw;
}

.mv__content {
   position: absolute;
   top: 11.5vw;
   left: 0;
   z-index: 4;
   width: 64%;
}

.mv__seo-title {
   margin-bottom: .8vw;
   color: var(--color-text-sub);
   font-family: var(--font-serif);
   font-size: 1.05vw;
   font-weight: 500;
   line-height: 1.5;
   letter-spacing: .08vw;
}

.main_copy {
   font-family: var(--font-serif);
   font-size: 3.4vw;
   font-weight: 500;
   line-height: 1.42;
   letter-spacing: .13vw;
   color: var(--color-main);
}

.mv__lead {
   margin-top: 1.13vw;
   color: var(--color-text);
   font-family: var(--font-serif);
   font-size: 1.28vw;
   line-height: 1.85;
   letter-spacing: .05vw;
}

.mv__place {
   margin-top: 2.25vw;
   color: var(--color-text-sub);
   font-family: var(--font-serif);
   font-size: 1.15vw;
   line-height: 1.8;
}

.mv__actions {
   display: flex;
   gap: .88vw;
   margin-top: 1.5vw;
}

.mv__actions .c-button {
   min-width: 15.31vw;
}

.mv__proof {
   display: flex;
   align-items: center;
   gap: .88vw;
   margin-top: 1.56vw;
   color: var(--color-accent);
   font-family: var(--font-serif);
   font-size: 1.2vw;
   white-space: nowrap;
}

.mv__proof-line {
   width: 4.75vw;
   height: .06vw;
   background: #c1c6c8;
}

.mv__proof-copy {
   display: inline-block;
}

.mv__owner {
   position: absolute;
   right: 8.5%;
   bottom: -0.75vw;
   z-index: 3;
   width: 36vw;
}

.mv__owner img {
   width: 100%;
   height: auto;
   filter: drop-shadow(0 .88vw 1.88vw rgba(77, 84, 87, .05));
}

.mv__owner-label {
  position: absolute;
  right: -1vw;
  bottom: 6vw;
  z-index: 6;
  width: 15vw;
  pointer-events: none;
}

.mv__owner-label img {
   display: block;
   width: 100%;
   height: auto;
}

/*---------------------------------------------------------
01 / MAIN VISUAL SP
---------------------------------------------------------*/
@media only screen and (max-width: 743px) {
   .mv {
      min-height: 0;
      padding-top: var(--header-height-sp);
      background: #f8f9f9;
   }

   .mv::after {
      height: 3vw;
   }

   .mv__background {
              inset: var(--header-height-sp) 0 auto;
        height: 90vw;
        background-position: 21% center;
   }

   .mv__veil {
      inset: var(--header-height-sp) 0 auto;
              height: 90vw;
      background: linear-gradient(90deg,
            rgba(255, 255, 255, .55) 0%,
            rgba(255, 255, 255, .25) 42%,
            rgba(255, 255, 255, .04) 100%);
   }

   .mv__inner {
      width: 100%;
      min-height: 0;
              padding-top: 90vw;
   }

   .mv__owner {
              bottom: 0;
                right: -5vw;
        bottom: auto;
        width: 67vw;
   }

   .mv__owner-label {
              position: absolute;
               right: 3vw;
        top: 66vw;
        bottom: unset;
        z-index: 6;
        width: 31vw;
        pointer-events: none;
   }

   .mv__content {
      position: relative;
      top: auto;
      left: auto;
      width: 90vw;
      margin: 0 auto;
      padding: 5vw 0 10vw;
   }

   .mv__seo-title {
      margin-bottom: 2vw;
      font-size: 3.2vw;
      line-height: 1.5;
      letter-spacing: .1vw;
      text-align: center;
   }

   .main_copy {
      font-size: 5.5vw;
      line-height: 1.55;
      letter-spacing: .15vw;
      text-align: center;
   }

   .mv__lead {
      margin-top: 3.5vw;
      font-size: 3.9vw;
      line-height: 1.8;
      letter-spacing: .08vw;
      text-align: center;
   }

   .mv__place {
      margin-top: 5vw;
      font-size: 3.9vw;
      line-height: 1.75;
      text-align: center;
   }

   .mv__place-name {
      margin-top: .8vw;
      font-size: 4vw;
      line-height: 1.45;
      font-weight: 500;
      letter-spacing: .08vw;
   }

   .mv__actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5vw;
      margin-top: 5vw;
   }

   .mv__actions .c-button {
      width: 100%;
      min-width: 0;
   }

   .mv__proof {
      display: block;
      width: 100%;
      margin-top: 4.5vw;
      font-size: 3.9vw;
      line-height: 1.7;
      white-space: normal;
      text-align: center;
      color: var(--color-text-sub);
   }

   .mv__proof-line {
      display: none;
   }

   .mv__proof-copy {
      display: block;
      width: 100%;
      line-height: 1.7;
   }

}

/*---------------------------------------------------------
02 / FIRST EXPERIENCE
---------------------------------------------------------*/

.first-experience {
   position: relative;
   width: 100%;
   padding: 5.5vw 0 6vw;
   background: #fff;
}

.first-experience__intro {
   margin-bottom: 3vw;
}

.first-experience__intro-grid {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   align-items: center;
   gap: 5vw;
}

.first-experience .section-kicker-row {
   font-family: var(--font-serif);
   font-size: 1.4vw;
   letter-spacing: .15vw;
}

.first-experience__intro-grid h2 {
   margin: 0;
   color: var(--color-main);
   font-family: var(--font-serif);
   font-size: 2.5vw;
   font-weight: 500;
   line-height: 1.65;
   letter-spacing: .08vw;
}

.first-experience__intro-grid p {
   margin: 0;
   padding-left: 2.5vw;
   border-left: .06vw solid #d9dddf;
   color: var(--color-text-sub);
   font-family: var(--font-serif);
   font-size: 1.2vw;
   font-weight: 400;
   line-height: 2;
   letter-spacing: .04vw;
}

.menu-grid--trial {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.2vw;
   width: 100%;
}

.menu-card {
   overflow: hidden;
   border: .06vw solid #e2e5e6;
   background: #fff;
}

.menu-card>img {
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   object-position: center;
}

.menu-card__body h3 {
   padding: .7vw 0;
   background: #f8f9f9;
   color: var(--color-text);
   font-family: var(--font-serif);
   font-size: 1.4vw;
   font-weight: 500;
   line-height: 1.5;
   letter-spacing: .04vw;
   text-align: center;
}

.menu-card__detail {
   display: flex;
   flex-direction: column;
   padding: 1.4vw 1.25vw 1.6vw;
}

.menu-card__price {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.5vw;
   margin-bottom: 1.2vw;
   text-align: left;
}

.menu-card__price strong {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 5vw;
   height: 5vw;
   border-radius: 10vw;
   background: #f8f9f9;
   color: var(--color-text);
   font-family: var(--font-serif);
   font-size: 2vw;
   font-weight: 500;
   line-height: 1;
}

.menu-card__price strong small {
   margin-left: .2vw;
   font-size: 1.2vw;
   font-weight: 500;
}

.menu-card__price>span {
   display: block;
   color: var(--color-text);
   font-family: var(--font-serif);
   font-size: 1.2vw;
   font-weight: 500;
   line-height: 1.8;
}

.menu-card__price b {
   margin: 0 .2vw;
   color: var(--color-price);
   font-size: 2.1vw;
   font-weight: 600;
   line-height: 1;
   letter-spacing: .03vw;
}

.menu-card__price span small {
   color: var(--color-accent);
   font-size: 1.2vw;
   font-weight: 500;
}

.menu-card__detail>p {
   margin: 0;
   color: var(--color-text-sub);
   font-family: var(--font-serif);
   font-size: 1.2vw;
   line-height: 1.9;
   letter-spacing: .03vw;
}

.menu-card__detail>.menu-card__note {
   margin-top: .4vw;
}

.first-experience__special {
   display: grid;
   grid-template-columns: 37% 63%;
   width: 100%;
   margin-top: 2vw;
   overflow: hidden;
   border: .06vw solid #e0e4e5;
   background: #f8f9f9;
}

.first-experience__special-media {
   overflow: hidden;
}

.first-experience__special-media img {
   display: block;
   width: 100%;
   height: 100%;
   min-height: 17vw;
   object-fit: cover;
   object-position: center;
}

.first-experience__special-body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 2.3vw 3vw;
}

.first-experience__special-label {
   margin: 0 0 .5vw;
   color: var(--color-accent);
   font-family: var(--font-en);
   font-size: 1.2vw;
   font-weight: 500;
   letter-spacing: .15vw;
}

.first-experience__special-body h3 {
   margin: 0 0 1.2vw;
   color: var(--color-text);
   font-family: var(--font-serif);
   font-size: 1.8vw;
   font-weight: 500;
   line-height: 1.55;
   letter-spacing: .05vw;
}

.first-experience__special-price {
   display: flex;
   align-items: center;
   gap: 1.5vw;
   margin-bottom: 1.2vw;
}

.first-experience__special-price strong {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 5vw;
   height: 5vw;
   border-radius: 10vw;
   background: #fff;
   color: var(--color-text);
   font-family: var(--font-serif);
   font-size: 2vw;
   font-weight: 500;
   line-height: 1;
}

.first-experience__special-price strong small {
   margin-left: .2vw;
   font-size: 1.2vw;
   font-weight: 500;
}

.first-experience__special-price span {
   color: var(--color-accent);
   font-family: var(--font-serif);
   font-size: 1.2vw;
   font-weight: 500;
   line-height: 1.5;
}

.first-experience__special-price b {
   margin: 0 .2vw 0 1vw;
   color: var(--color-price);
   font-size: 2.1vw;
   font-weight: 600;
   line-height: 1;
   letter-spacing: .03vw;
}

.first-experience__special-body>p {
   margin: 0;
   color: var(--color-text-sub);
   font-family: var(--font-serif);
   font-size: 1.3vw;
   line-height: 1.9;
}

.first-experience__special-body>.first-experience__special-note {
   margin-top: .4vw;
}

.first-experience__notice {
   margin: 1.3vw 0 0;
   color: var(--color-accent);
   font-family: var(--font-serif);
   font-size: 1.2vw;
   line-height: 1.8;
   text-align: center;
}


/*---------------------------------------------------------
02 / FIRST EXPERIENCE SP
---------------------------------------------------------*/

@media only screen and (max-width: 743px) {

   .first-experience .section-kicker-row {
      font-family: var(--font-serif);
      font-size: 4vw;
      letter-spacing: .15vw;
   }

   .first-experience {
      padding: 10vw 0 12vw;
   }

   .first-experience__intro {
      margin-bottom: 7vw;
   }

   .first-experience__intro-grid {
      display: block;
   }

   .first-experience__intro-grid h2 {
      margin-bottom: 4vw;
      font-size: 6.2vw;
      line-height: 1.55;
      letter-spacing: .12vw;
   }

   .first-experience__intro-grid p {
      padding: 0;
      border-left: 0;
      font-size: 3.9vw;
      line-height: 2;
      letter-spacing: .06vw;
   }

   .menu-grid--trial {
      display: flex;
      width: 95vw;
      gap: 3.5vw;
      margin-right: -5vw;
      padding: 0 8vw 2vw 0;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 0;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
   }

   .menu-grid--trial::-webkit-scrollbar {
      display: none;
   }

   .menu-card {
      display: flex;
      flex: 0 0 82vw;
      flex-direction: column;
      scroll-snap-align: start;
   }

   .menu-card>img {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      object-position: center;
   }

   .menu-card__body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 0;
   }

   .menu-card__body h3 {
      min-height: 0;
      margin: 0;
      padding: 3vw 2.5vw;
      font-size: 4.4vw;
      line-height: 1.5;
   }

   .menu-card__detail {
      flex: 1;
      padding: 4.5vw;
   }

   .menu-card__price {
      gap: 3vw;
      margin-bottom: 3.5vw;
   }

   .menu-card__price strong {
      width: 14vw;
      height: 14vw;
      font-size: 5vw;
   }

   .menu-card__price strong small {
      margin-left: .5vw;
      font-size: 3.4vw;
   }

   .menu-card__price>span {
      font-size: 3.8vw;
      line-height: 1.7;
   }

   .menu-card__price b {
      font-size: 6vw;
   }

   .menu-card__price span small {
      font-size: 3.4vw;
   }

   .menu-card__detail>p {
      font-size: 3.9vw;
      line-height: 1.75;
   }

   .menu-card__detail>.menu-card__note {
      margin-top: 1vw;
   }

   .first-experience__special {
      display: block;
      margin-top: 8vw;
   }

   .first-experience__special-media img {
      width: 100%;
      height: auto;
      min-height: 0;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      object-position: center;
   }

   .first-experience__special-body {
      padding: 5vw;
   }

   .first-experience__special-label {
      margin-bottom: 1.5vw;
      font-size: 3vw;
      letter-spacing: .3vw;
   }

   .first-experience__special-body h3 {
      margin-bottom: 3.5vw;
              font-size: 4.6vw;
      line-height: 1.55;
              margin-top: 2vw;
   }

   .first-experience__special-price {
      gap: 3vw;
      margin-bottom: 3.5vw;
   }

   .first-experience__special-price strong {
      width: 14vw;
      height: 14vw;
      font-size: 5.8vw;
   }

   .first-experience__special-price strong small {
      font-size: 3.4vw;
   }

   .first-experience__special-price span {
      font-size: 3.8vw;
      line-height: 1.7;
   }

   .first-experience__special-price b {
      margin-left: 2vw;
      font-size: 6vw;
   }

   .first-experience__special-body>p {
      font-size: 3.9vw;
      line-height: 1.75;
   }

   p.first-experience__special-label {
    color: var(--color-main);
}

   .first-experience__special-body>.first-experience__special-note {
      margin-top: 1vw;
   }

   .first-experience__notice {
      margin-top: 4vw;
      font-size: 3.9vw;
      line-height: 1.7;
      text-align: center;
   }

   .first-experience .section-center-action {
      margin-top: 6vw;
   }

   .first-experience .section-center-action .c-button {
      width: 100%;
   }

}

/*---------------------------------------------------------
03 / CONCEPT
---------------------------------------------------------*/

.concept {
   position: relative;
   background: transparent;
}

.concept::before {
   position: absolute;
   top: 3vw;
   bottom: 3vw;
   left: 0;
   z-index: 0;
   width: 86vw;
   content: "";
   background: #f8f9f9;
   border-radius: 0 1vw 1vw 0;
   pointer-events: none;
}

.concept__grid {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 50% 50%;
   align-items: center;
}

.concept__content {
       padding: 7.5vw 5.2vw 7.5vw 5vw;
}

.concept .section-kicker-row,
.experience .section-kicker-row,
.salon .section-kicker-row {
   font-family: var(--font-en);
   font-size: 1.4vw;
   letter-spacing: .15vw;
}

.concept__content h2 {
   margin-bottom: 1.75vw;
   font-family: var(--font-serif);
   font-size: 2.5vw;
   font-weight: 400;
   line-height: 1.5;
}

.concept__content p {
   max-width: 40.63vw;
   margin-top: .69vw;
   color: var(--color-text-sub);
   font-size: 1.1vw;
   line-height: 1.9;
}

.concept__promise {
   display: block;
   margin-top: 1.13vw;
   font-family: var(--font-serif);
   font-size: 1.35vw;
   font-weight: 400;
}

.concept__content .c-button {
   margin-top: 1.38vw;
}


.concept__media {
   position: relative;
   align-self: center;
   width: 100%;
       height: 37vw;
   overflow: hidden;
}

.concept__media::after {
   position: absolute;
   inset: 0;
   z-index: 1;
   content: "";
   background: linear-gradient(90deg,
         rgba(245, 246, 246, .22),
         rgba(255, 255, 255, 0) 35%);
   pointer-events: none;
}

.concept__media img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.concept__media p {
   position: absolute;
   top: 2.5vw;
   right: 6%;
   z-index: 2;
   margin: 0;
   color: var(--color-text-sub);
   font-family: var(--font-serif);
   font-size: 1.5vw;
   line-height: 1.65;
   letter-spacing: .09vw;
}

/*---------------------------------------------------------
03 / CONCEPT SP
---------------------------------------------------------*/
@media only screen and (max-width: 743px) {

   .concept::before {
      top: 0;
      bottom: 0;
      width: 100%;
      border-radius: 0;
   }

   .concept__grid {
      display: flex;
      flex-direction: column;
   }

   .concept__media {
      order: 1;
   }

   .concept__content {
      order: 2;
   }

   .concept__content {
      width: 90vw;
      margin: 0 auto;
      padding: 10vw 0 8vw;
   }

   .concept__content h2 {
      margin-bottom: 4vw;
      font-size: 6.2vw;
      line-height: 1.55;
   }

   .concept .section-kicker-row,
   .experience .section-kicker-row,
   .salon .section-kicker-row {
      font-family: var(--font-en);
      font-size: 4.2vw;
      letter-spacing: .3vw;
   }

   .concept__content p {
      max-width: none;
      margin-top: 2.4vw;
      font-size: 3.9vw;
      line-height: 1.8;
   }

   .concept__promise {
      margin-top: 4.5vw;
      font-size: 4.5vw;
      text-align: center;
   }

   .concept__content .c-button {
      width: 100%;
      margin-top: 5vw;
   }

   .concept__media {
      align-self: stretch;
      width: 100%;
      height: 62vw;
      min-height: 0;
   }

   .concept__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 58%;
   }
}

/*---------------------------------------------------------
04 / EXPERIENCE
---------------------------------------------------------*/

.experience {
   width: 100%;
   overflow: hidden;
   background: #fff;
}

.experience__grid {
   display: grid;
   grid-template-columns: 45% 17% 38%;
   width: 100%;
   min-height: 32.5vw;
   margin: 0;
}

.experience__content {
   padding: 4.13vw 2.63vw 4.13vw 5.25vw;
}

.experience__content h2 {
   margin-bottom: 1.63vw;
   font-family: var(--font-serif);
   font-size: 2.65vw;
   font-weight: 400;
   line-height: 1.5;
}

.experience__content p {
   max-width: 40.63vw;
   margin-top: .63vw;
   color: var(--color-text-sub);
   font-size: 1.1vw;
   line-height: 1.9;
}

.experience__content .c-button {
   margin-top: 1.5vw;
}

.experience__stats {
   display: flex;
   flex-direction: column;
   justify-content: center;
   border-left: .06vw solid #e3e6e7;
   border-right: .06vw solid #e3e6e7;
}

.experience__stats>div {
   padding: 1.31vw .88vw;
   text-align: center;
}

.experience__stats strong {
   display: block;
   color: var(--color-main);
   font-family: var(--font-serif);
   font-size: 3.2vw;
   font-weight: 400;
   line-height: 1;
}

.experience__stats sup {
   font-size: 1.34vw;
   vertical-align: super;
}

.experience__stats span {
   display: block;
   margin-top: .5vw;
   color: var(--color-accent);
   font-family: var(--font-serif);
   font-size: 1.2vw;
   letter-spacing: .11vw;
}

.experience__stats p {
   margin-top: .5vw;
   color: var(--color-text-sub);
   font-size: 1.1vw;
   line-height: 1.6;
}

.experience__media {
   position: relative;
   min-height: 32.5vw;
   overflow: hidden;
}

.experience__media img {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
    object-position: 78% center;
}

.experience__owner-copy {
   position: absolute;
   right: 6%;
   bottom: 2.13vw;
   z-index: 2;
   padding: .81vw 1vw;
   background: rgba(255, 255, 255, .72);
   color: var(--color-text-sub);
   text-align: right;
   -webkit-backdrop-filter: blur(.31vw);
   backdrop-filter: blur(.31vw);
}

.experience__owner-copy p {
   margin: 0;
   font-family: var(--font-serif);
   font-size: 1.2vw;
   line-height: 1.65;
}

.experience__owner-copy strong {
   display: block;
   margin-top: .38vw;
   font-family: var(--font-serif);
   font-size: 1.2vw;
   font-weight: 400;
}


/*---------------------------------------------------------
04 / EXPERIENCE SP
---------------------------------------------------------*/
@media only screen and (max-width: 743px) {
   .experience__grid {
      display: flex;
      flex-direction: column;
   }

   .experience__media {
      order: 1;
      margin-top: 0;
   }

   .experience__media img {
  object-position: center;
}
   .experience__stats {
      order: 2;
   }

   .experience__content {
      order: 3;
   }


   .experience__content {
      width: 90vw;
      margin: 0 auto;
      padding: 10vw 0 8vw;
   }

   .experience__content h2 {
      margin-bottom: 4vw;
      font-size: 6.2vw;
      line-height: 1.55;
   }

   .experience__content p {
      max-width: none;
      margin-top: 2.4vw;
      font-size: 3.9vw;
      line-height: 1.8;
   }

   .experience__content .c-button {
      width: 100%;
      margin-top: 5vw;
   }

   .experience__stats {
      display: flex;
      flex-direction: column;
      width: 90vw;
      margin: 0 auto;
      border: 0;
      border-top: .25vw solid #e3e6e7;
      border-bottom: .25vw solid #e3e6e7;
   }

   .experience__stats>div {
      display: grid;
      grid-template-columns: 30vw 1fr;
      grid-template-rows: auto auto;
      align-items: center;
      padding: 4vw 0;
      border-bottom: .25vw solid #e3e6e7;
      text-align: center;
   }

   .experience__stats>div:last-child {
      border-bottom: 0;
   }

   .experience__stats strong {
      grid-column: 1;
      grid-row: 1;
      font-size: 6.8vw;
      line-height: 1.05;
   }

   .experience__stats sup {
      font-size: 3.2vw;
   }

   .experience__stats span {
      grid-column: 1;
      grid-row: 2;
      margin-top: 1.2vw;
      font-size: 3vw;
      letter-spacing: .3vw;
   }

   .experience__stats p {
      grid-column: 2;
      grid-row: 1 / 3;
      margin: 0;
      padding-left: 4vw;
      border-left: .25vw solid #e3e6e7;
      font-size: 4vw;
      line-height: 1.65;
      text-align: left;
   }

   .experience__media {
      position: relative;
      width: 100%;
      height: 68vw;
      min-height: 0;
      overflow: hidden;
   }


   .experience__owner-copy {
      right: 4vw;
      bottom: 4vw;
      padding: 2.5vw 3vw;
      -webkit-backdrop-filter: blur(1.3vw);
      backdrop-filter: blur(1.3vw);
   }

   .experience__owner-copy p {
      font-size: 3.9vw;
      line-height: 1.6;
   }

   .experience__owner-copy strong {
      margin-top: 1vw;
      font-size: 3.8vw;
   }
}

/*---------------------------------------------------------
05 / SALON / RESERVATION
---------------------------------------------------------*/

.salon {
  position: relative;
  margin-top: 7vw;
  padding-top: 0;
}

.salon::before {
  position: absolute;
  top: -.05vw;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 4vw;
  content: "";
  background: #fff;
  pointer-events: none;
  transform: scaleY(-1);
  transform-origin: center center;

  -webkit-mask-position: center center;
  mask-position: center center;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201366%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M683%2080H0V0c43.646%2012.356%2091.7%2023.577%20142.829%2033.348%2051.614%209.864%20106.807%2018.337%20164.046%2025.183%2058.3%206.973%20119.316%2012.328%20181.358%2015.918C551.9%2078.133%20617.425%2080%20683%2080Zm683%200H683.129c65.519%200%20131.005-1.869%20194.638-5.551%2062.042-3.589%20123.06-8.945%20181.358-15.918%2057.239-6.846%20112.432-15.319%20164.046-25.183C1274.3%2023.577%201322.35%2012.357%201366%200v80Z%22%2F%3E%3C%2Fsvg%3E");

  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201366%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M683%2080H0V0c43.646%2012.356%2091.7%2023.577%20142.829%2033.348%2051.614%209.864%20106.807%2018.337%20164.046%2025.183%2058.3%206.973%20119.316%2012.328%20181.358%2015.918C551.9%2078.133%20617.425%2080%20683%2080Zm683%200H683.129c65.519%200%20131.005-1.869%20194.638-5.551%2062.042-3.589%20123.06-8.945%20181.358-15.918%2057.239-6.846%20112.432-15.319%20164.046-25.183C1274.3%2023.577%201322.35%2012.357%201366%200v80Z%22%2F%3E%3C%2Fsvg%3E");
}
.salon__media {
   position: absolute;
   inset: 0;
}

.salon__media::after {
   position: absolute;
   inset: 0;
   content: "";
   background: linear-gradient(90deg,
         rgba(255, 255, 255, .97) 0%,
         rgba(255, 255, 255, .92) 39%,
         rgba(255, 255, 255, .4) 61%,
         rgba(255, 255, 255, .08) 100%);
}

.salon__media img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.salon__inner {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1fr 30vw;
   align-items: center;
   gap: 4vw;
   min-height: 27vw;
   padding: 2.8vw 0;
}

.salon__content {
   max-width: 45vw;
}

.salon__content h2 {
   margin-bottom: 1.2vw;
   font-family: var(--font-serif);
   font-size: 2.5vw;
   font-weight: 400;
   line-height: 1.5;
}

.salon__content>p {
   max-width: 42vw;
   margin-top: .6vw;
   color: var(--color-text-sub);
   font-size: 1.1vw;
   line-height: 1.8;
}

.salon__location {
   width: fit-content;
   margin-top: 1.2vw;
   padding: .8vw 1.4vw;
   border-left: .2vw solid #929ca1;
   background: rgba(255, 255, 255, .72);
}

.salon__location-label {
   display: block;
   margin-bottom: .3vw;
   color: var(--color-accent);
   font-family: var(--font-en);
   font-size: 1.2vw;
   font-weight: 500;
   line-height: 1;
   letter-spacing: .12vw;
}

.salon__address {
   color: var(--color-text);
   font-family: var(--font-serif);
   font-size: 1.1vw;
   font-style: normal;
   font-weight: 500;
   line-height: 1.6;
}



.salon__access {
   margin-top: .2vw;
   color: var(--color-text-sub);
   font-size: 1vw;
   line-height: 1.6;
}

.salon__map-link {
  display: inline-block;
  margin-top: .8vw;
  color: var(--color-main);
  font-size: 1vw;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: .25vw;
}

.salon__map-link:hover {
  opacity: .7;
}

.salon__meta {
   display: flex;
   gap: .7vw;
   margin-top: 1vw;
}

.salon__meta li {
   padding: .5vw 1vw;
   border: .06vw solid rgba(124, 136, 142, .38);
   background: rgba(255, 255, 255, .72);
   color: var(--color-text-sub);
   font-size: 1.2vw;
   line-height: 1.4;
}

.reservation-card {
   transform: translateX(-4vw);
   padding: 1.8vw;
   background: rgba(255, 255, 255, .95);
   box-shadow: var(--shadow-soft);
   -webkit-backdrop-filter: blur(.5vw);
   backdrop-filter: blur(.5vw);
       border-radius: .4vw;
}

.reservation-card h2 {
   margin: 0;
   font-family: var(--font-serif);
   font-size: 1.6vw;
   font-weight: 400;
   line-height: 1.5;
   text-align: center;
}

.reservation-card>p {
   margin-top: .8vw;
   color: var(--color-text-sub);
   font-size: 1.1vw;
   line-height: 1.7;
   text-align: center;
}

.reservation-card__note {
   padding: .6vw .8vw;
   background: #f5f7f7;
}

.reservation-card .c-button {
   width: 100%;
   margin-top: .9vw;
}

.reservation-card .c-button+.c-button {
   margin-top: .6vw;
}

/*---------------------------------------------------------
05 / SALON / RESERVATION SP
---------------------------------------------------------*/
@media only screen and (max-width: 743px) {
   .salon {
      min-height: 0;
      margin-top: 0;
      padding-top: 0;
      overflow: hidden;
      background: #f8f9f9;
   }

   .salon__media {
      position: relative;
      inset: auto;
      width: 100%;
      height: 58vw;
   }

   .salon__media::after {
      background: linear-gradient(0deg,
            rgba(248, 249, 249, .96) 0%,
            rgba(248, 249, 249, .08) 48%,
            rgba(248, 249, 249, 0) 100%);
   }

   .salon__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
   }

   .salon__inner {
      display: block;
      width: 90vw;
      min-height: 0;
      margin: 0 auto;
      padding: 7vw 0 12vw;
   }

   .salon__content {
      max-width: none;
   }

   .salon__content h2 {
      margin-bottom: 4vw;
      font-size: 5.7vw;
      line-height: 1.55;
   }

   .salon__content>p {
      max-width: none;
      margin-top: 0;
      font-size: 3.9vw;
      line-height: 1.8;
   }

   .salon__location {
      width: 100%;
      margin-top: 5vw;
      padding: 4.5vw 4vw;
      border-left-width: .6vw;
      background: #fff;
      box-sizing: border-box;
   }

   .salon__location-label {
      margin-bottom: 1.5vw;
      font-size: 3vw;
      letter-spacing: .3vw;
   }

   .salon__address {
      font-size: 3.9vw;
      line-height: 1.7;
   }

   .salon__access {
      margin-top: 1vw;
      font-size: 3.9vw;
      line-height: 1.7;
   }

    .salon__map-link {
    margin-top: 2.5vw;
    font-size: 3.8vw;
    text-underline-offset: .7vw;
  }

   .salon__meta {
      gap: 2vw;
      margin-top: 3.5vw;
   }

   .salon__meta li {
      flex: 1;
      padding: 2.5vw 2vw;
      border-width: .25vw;
      background: #fff;
      font-size: 3.6vw;
      text-align: center;
   }

   .reservation-card {
              transform: none;
        margin-top: 7vw;
        padding: 5vw;
        border: unset;
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: 0 0.48vw 2.5vw rgb(31 39 43 / 7%);
   }

   .reservation-card h2 {
      font-size: 5.2vw;
      line-height: 1.7;
   }

   .reservation-card>p {
      margin-top: 3vw;
      font-size: 4vw;
      line-height: 1.75;
   }

   .reservation-card__note {
      margin-top: 3vw;
      padding: 2.5vw 3vw;
      font-size: 3.9vw;
   }

   .reservation-card .c-button {
      margin-top: 3.5vw;
   }

   .reservation-card .c-button+.c-button {
      margin-top: 2.5vw;
   }
}

/*---------------------------------------------------------
06 / PREMIUM MOTION SYSTEM
---------------------------------------------------------*/

/*
   Luireの静かな高級感を壊さないため、
   opacity / transform / clip-path のみを中心に使用。
   JavaScriptが動く環境だけ html.motion-enabled を付与するため、
   JS無効時にコンテンツが消えたままになることはありません。
*/

html.motion-enabled [data-motion] {
   --motion-delay: 0ms;
   will-change: opacity, transform, clip-path;
}

html.motion-enabled [data-motion="fade-up"],
html.motion-enabled [data-motion="card"],
html.motion-enabled [data-motion="stat"] {
   opacity: 0;
   transform: translate3d(0, 1.4vw, 0);
   transition:
      opacity .8s cubic-bezier(.22, 1, .36, 1),
      transform .9s cubic-bezier(.22, 1, .36, 1);
   transition-delay: var(--motion-delay);
}

html.motion-enabled [data-motion="card"] {
   transform: translate3d(0, 1.6vw, 0) scale(.99);
}

html.motion-enabled [data-motion="stat"] {
   transform: translate3d(0, 1vw, 0);
}

html.motion-enabled [data-motion="fade-up"].is-motion-visible,
html.motion-enabled [data-motion="card"].is-motion-visible,
html.motion-enabled [data-motion="stat"].is-motion-visible {
   opacity: 1;
   transform: translate3d(0, 0, 0) scale(1);
}

/* 初回体験カードは、カード本体の立ち上がりに合わせて写真もごく小さく整う */
html.motion-enabled .menu-card[data-motion="card"] > img {
   transform: scale(1.025);
   transition: transform 1.15s cubic-bezier(.22, 1, .36, 1);
   transition-delay: var(--motion-delay);
}

html.motion-enabled .menu-card[data-motion="card"].is-motion-visible > img {
   transform: scale(1);
}

/* 写真のマスク・リビール
   IMPORTANT:
   IntersectionObserver の監視対象そのものを clip-path: 100% で完全に隠すと、
   ブラウザによっては「交差していない」と判定され、永久に表示されないことがある。
   そのため、監視する親要素は通常表示のままにし、子の img だけをマスクする。
*/
html.motion-enabled [data-motion="image-reveal"] {
   overflow: hidden;
}

html.motion-enabled [data-motion="image-reveal"] > img {
   clip-path: inset(0 100% 0 0);
   transition: clip-path .82s cubic-bezier(.22, 1, .36, 1);
   transition-delay: var(--motion-delay);
}

html.motion-enabled [data-motion="image-reveal"][data-motion-direction="right"] > img {
   clip-path: inset(0 0 0 100%);
}

html.motion-enabled [data-motion="image-reveal"].is-motion-visible > img {
   clip-path: inset(0 0 0 0);
}

html.motion-enabled [data-motion="image-reveal"] > img:not([data-parallax]) {
   transform: scale(1.055);
   transition:
      clip-path .82s cubic-bezier(.22, 1, .36, 1),
      transform 1.15s cubic-bezier(.22, 1, .36, 1);
   transition-delay: var(--motion-delay);
}

html.motion-enabled [data-motion="image-reveal"].is-motion-visible > img:not([data-parallax]) {
   transform: scale(1);
}

/* CONCEPT専用：紙が横からめくれるようなプレミアム・リビール
   写真自体を完全に隠さず、同系色のカバーを左→右へ抜く。
   境界にごく弱い影を付けることで「ぺらっ」とした奥行きを出す。 */
html.motion-enabled .concept__media[data-motion="peel-reveal"] {
   overflow: hidden;
}

html.motion-enabled .concept__media[data-motion="peel-reveal"]::before {
   position: absolute;
   inset: 0;
   z-index: 3;
   content: "";
   background: #f8f9f9;
   box-shadow: -1.2vw 0 1.8vw rgba(69, 80, 86, .09);
   transform: scaleX(1);
   transform-origin: right center;
   transition: transform 1.02s cubic-bezier(.76, 0, .24, 1);
   transition-delay: 80ms;
   pointer-events: none;
   will-change: transform;
}

html.motion-enabled .concept__media[data-motion="peel-reveal"].is-motion-visible::before {
   transform: scaleX(0);
}

/* 見出し横の細線を静かに伸ばす */
html.motion-enabled .section-kicker-row[data-motion] i {
   transform: scaleX(0);
   transform-origin: left center;
   transition: transform .75s cubic-bezier(.22, 1, .36, 1);
   transition-delay: calc(var(--motion-delay) + 160ms);
}

html.motion-enabled .section-kicker-row[data-motion].is-motion-visible i {
   transform: scaleX(1);
}

/* CONCEPT / SALON の写真だけ、スクロールに少し遅れて動かす */
html.motion-enabled [data-parallax] {
   --parallax-y: 0px;
   will-change: transform;
   transform: translate3d(0, var(--parallax-y), 0) scale(1.05);
}

.salon__media {
   overflow: hidden;
}

/* EXPERIENCE写真内のオーナーコピーは写真の後から静かに現す */
html.motion-enabled .experience__media[data-motion="image-reveal"] .experience__owner-copy {
   opacity: 0;
   transform: translate3d(0, .8vw, 0);
   transition:
      opacity .7s cubic-bezier(.22, 1, .36, 1) .42s,
      transform .8s cubic-bezier(.22, 1, .36, 1) .42s;
}

html.motion-enabled .experience__media[data-motion="image-reveal"].is-motion-visible .experience__owner-copy {
   opacity: 1;
   transform: translate3d(0, 0, 0);
}

/* 最後の予約カードだけ、既存のPC位置 translateX(-4vw) を維持して立ち上げる */
html.motion-enabled .reservation-card[data-motion="reservation"] {
   opacity: 0;
   transform: translateX(-4vw) translateY(1.2vw) scale(.985);
   transition:
      opacity .85s cubic-bezier(.22, 1, .36, 1),
      transform 1s cubic-bezier(.22, 1, .36, 1);
   transition-delay: var(--motion-delay);
}

html.motion-enabled .reservation-card[data-motion="reservation"].is-motion-visible {
   opacity: 1;
   transform: translateX(-4vw) translateY(0) scale(1);
}

/*---------------------------------------------------------
06 / PREMIUM MOTION SYSTEM SP
---------------------------------------------------------*/
@media only screen and (max-width: 743px) {

   /* 初回体験3カードはSPでは横スライダー。
      順番表示は視認性を落とすため、カードアニメーションを完全に無効化する。 */
   html.motion-enabled .menu-grid--trial .menu-card[data-motion="card"] {
      opacity: 1;
      transform: none;
      transition: none;
      transition-delay: 0ms;
      will-change: auto;
   }

   html.motion-enabled .menu-grid--trial .menu-card[data-motion="card"] > img {
      transform: none;
      transition: none;
      transition-delay: 0ms;
   }

   html.motion-enabled [data-motion="fade-up"],
   html.motion-enabled [data-motion="card"] {
      transform: translate3d(0, 3.5vw, 0);
   }

   html.motion-enabled [data-motion="stat"] {
      transform: translate3d(0, 2vw, 0);
   }

   html.motion-enabled [data-motion="fade-up"].is-motion-visible,
   html.motion-enabled [data-motion="card"].is-motion-visible,
   html.motion-enabled [data-motion="stat"].is-motion-visible {
      transform: translate3d(0, 0, 0) scale(1);
   }

   html.motion-enabled .experience__media[data-motion="image-reveal"] .experience__owner-copy {
      transform: translate3d(0, 2vw, 0);
   }

   html.motion-enabled .experience__media[data-motion="image-reveal"].is-motion-visible .experience__owner-copy {
      transform: translate3d(0, 0, 0);
   }

   html.motion-enabled .reservation-card[data-motion="reservation"] {
      transform: translate3d(0, 3.5vw, 0) scale(.99);
   }

   html.motion-enabled .reservation-card[data-motion="reservation"].is-motion-visible {
      transform: translate3d(0, 0, 0) scale(1);
   }
}

/*---------------------------------------------------------
07 / MAIN VISUAL INTRO MOTION
---------------------------------------------------------*/

html.motion-enabled .mv__background {
   transform-origin: 65% center;
   animation: luire-mv-background 1.55s cubic-bezier(.22, 1, .36, 1) both;
}

html.motion-enabled .mv__veil {
   animation: luire-mv-veil 1.2s ease both;
}

html.motion-enabled .mv__owner {
   animation: luire-mv-owner 1.15s cubic-bezier(.22, 1, .36, 1) .08s both;
}

html.motion-enabled .mv__owner-label {
   animation: luire-mv-label .85s cubic-bezier(.22, 1, .36, 1) .7s both;
}

html.motion-enabled .mv__seo-title,
html.motion-enabled .main_copy,
html.motion-enabled .mv__lead,
html.motion-enabled .mv__place,
html.motion-enabled .mv__actions,
html.motion-enabled .mv__proof {
   animation: luire-mv-copy .85s cubic-bezier(.22, 1, .36, 1) both;
}

html.motion-enabled .mv__title {
   animation-delay: .18s;
}

html.motion-enabled .mv__lead {
   animation-delay: .32s;
}

html.motion-enabled .mv__place {
   animation-delay: .46s;
}

html.motion-enabled .mv__actions {
   animation-delay: .6s;
}

html.motion-enabled .mv__proof {
   animation-delay: .74s;
}

@keyframes luire-mv-background {
   from {
      opacity: .82;
      transform: scale(1.035);
   }
   to {
      opacity: 1;
      transform: scale(1);
   }
}

@keyframes luire-mv-veil {
   from {
      opacity: .55;
   }
   to {
      opacity: 1;
   }
}

@keyframes luire-mv-owner {
   from {
      opacity: 0;
      transform: translate3d(1.2vw, .5vw, 0);
   }
   to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
   }
}

@keyframes luire-mv-label {
   from {
      opacity: 0;
      transform: translate3d(.8vw, .5vw, 0);
   }
   to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
   }
}

@keyframes luire-mv-copy {
   from {
      opacity: 0;
      transform: translate3d(0, 1vw, 0);
   }
   to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
   }
}

@media only screen and (max-width: 743px) {
   @keyframes luire-mv-owner {
      from {
         opacity: 0;
         transform: translate3d(2.5vw, 1vw, 0);
      }
      to {
         opacity: 1;
         transform: translate3d(0, 0, 0);
      }
   }

   @keyframes luire-mv-copy {
      from {
         opacity: 0;
         transform: translate3d(0, 2.5vw, 0);
      }
      to {
         opacity: 1;
         transform: translate3d(0, 0, 0);
      }
   }
}

/* VERONICA: exact rollback of accidental 744-1199px D1 layout changes */
@media only screen and (min-width: 744px) and (max-width: 1199px) {
  body,
  .c-button {
    font-size: 1.2vw;
  }

  .global-nav__list a {
    font-size: 1.05vw;
  }

  .global-nav__reservation a,
  .header-line {
    font-size: 1vw;
  }

  .site-footer__instagram {
    font-size: 1.5vw;
  }

  .site-footer__copyright {
    font-size: .7vw;
  }

  .site-header {
    height: 6vw;
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding-top: 0;
    grid-template-columns: none;
  }

  .global-nav {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    margin-left: auto;
  }

  .global-nav__list {
    justify-content: flex-start;
  }

  .header-line {
    grid-column: auto;
    grid-row: auto;
  }
}
