@charset "utf-8";
/*--------------------------------------------------------------------------------
  header
--------------------------------------------------------------------------------*/
:root {
  --hdHight: clamp(80px, (130 / 760 * 100vw), 130px);
}
header {
  width: 100%;
  min-width: 320px;
  height: var(--hdHight);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}
.l-hd {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #FFF;
  padding: clamp(20px, (30 / 640 * 100vw), 30px);
  padding-bottom: 0;
}
@media print, screen and (max-width:1100px) {
  header {
    padding-right: 4.5em;
  }
}

/* logo
----------------------------------------*/
.l-hdLogo {
  flex-shrink: 0;
  align-self: center;
}
.l-hdLogo img {
  width: min(150px,(150 / 760 * 100vw));
  min-width: 100px;
}

/* nav
----------------------------------------*/
@media print, screen and (min-width:1101px) {
  .l-hdMenu-container {
    justify-content: center;
    flex-grow: 1;
    align-self: baseline;
    padding-left: 2.5em;
    display: flex;
    transition: padding 0.2s ease-in-out;
  }
  .l-hdMenu {
    font-size: 1.05em;
    list-style: none;
    display: inline-flex;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    gap: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    transition: gap 0.2s ease-in-out;
  }
  .l-hdMenu a {
    display: block;
    padding: 0.75em 0.5em;
    white-space: nowrap;
  }
}
@media print, screen and (min-width:1401px) {
  .l-hdMenu-container {
    padding-left: min((145 / 760 * 100vw), 145px);
  }
  .l-hdMenu {
    gap: 1em;
  }
}
@media print, screen and (max-width:1100px) {
  .l-hdMenu-container {
    display: none;
  }
}
.l-hdMenu a,
.l-hdMenu a:visited,
.l-hdMenu a:hover {
  color: inherit;
}
@media (hover: hover) and (min-width:1101px) {
  .l-hdMenu a:hover {
    color: rgba(255,255,255,0.6);
  }
}
html.is-gNav-open .l-hdMenu-container,
html.is-gNav-colse .l-hdMenu-container {
  display: none;
}

/* sns
----------------------------------------*/
.l-hdSns {
  margin-left: auto;
  align-self: center;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1em;
}
.l-hdSns a {
  display: flex;
  padding: 0.4em;
}
.l-hdSns li {
  width: 2.2em;
  height: 2.2em;
}
@media print, screen and (min-width:641px) and (max-width:1100px) {
  .l-hdSns {
    padding-top: 0.4em;
  }
}
@media print, screen and (max-width:1100px) {
  html.is-gNav-open .l-hdSns {
    display: none;
  }
  .l-hdSns li {
    width: clamp(2.2em, 3.75vw + 0.75em, 2.4em);
  }
}
@media print, screen and (max-width:640px) {
  .l-hdSns {
    padding-bottom: 0.2em;
  }
}
@media (hover: hover) {
  .l-hdSns a:hover {
    opacity: 0.6;
  }
}
html.is-gNav-open .l-hdSns,
html.is-gNav-colse .l-hdSns {
  display: none;
}

/* reservation
----------------------------------------*/
.l-hdRsv_btn {
  background-color: var(--beige);
  color: var(--black);
  font-weight: 500;
  line-height: 1;
  padding: 0.65em 2em;
  font-size: 0.9em;
  white-space: nowrap;
}
@media print, screen and (min-width:1101px) {
  .l-hdRsv {
    align-self: center;
    padding-left: clamp(20px, (30 / 640 * 100vw), 30px);
  }
  .l-hdRsv_btn {
    transition: padding 0.2s ease-in-out, font-size 0.2s ease-in-out, background 0.2s ease-out;
  }
}
@media print, screen and (max-width:1100px) {
  .l-hdRsv {
    display: none;
  }
}
.l-hdRsv_btn,
.l-hdRsv_btn:visited,
.l-hdRsv_btn:hover {
  color: var(--black);
}
@media (hover: hover) {
  .l-hdRsv_btn:hover {
    background-color: var(--b-beige);
  }
}
html.is-gNav-open .l-hdRsv,
html.is-gNav-colse .l-hdRsv {
  display: none;
}

/*--------------------------------------------------------------------------------
  global navigation
--------------------------------------------------------------------------------*/
html.is-gNav-open {
  overflow: hidden;
}
html.is-gNav-open,
html.is-gNav-open body {
  width: 100%;
  height: 100%;
}
html.is-gNav-open body {
  background-color: var(--black);
}
.l-gNav-wrap {
  opacity: 0;
  width: 100%;
  min-width: 320px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  pointer-events: none;
  background-color: transparent;
  transition: opacity 0.6s var(--cubic-bezier);
}
html.is-gNav-open .l-gNav-wrap {
  opacity: 1;
}
html.is-gNav-open .l-gNav-wrap,
html.is-gNav-close .l-gNav-wrap {
  pointer-events: auto;
  height: 100%;
  background: url("../image/bg_black.gif") repeat center top;
  background-size: var(--bgsize);
}
html.is-gNav-open .l-gNav-wrap:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(255,255,255,0.05);
  z-index: -1;
}
.l-gNav {
  color: #FFF;
  width: 100%;
  height: 100%;
  padding-top: var(--hdHight);
  opacity: 0;
  transition: opacity 0.8s var(--cubic-bezier);
  transition-delay: 0.2s;
  position: relative;
  z-index: 1;
}
html.is-gNav-open .l-gNav {
  opacity: 1;
  transition-delay: 0;
}
html.is-gNav-close .l-gNav {
  transition: opacity 0.4s var(--cubic-bezier);
}
.l-gNav-scr {
  overflow-y: auto;
  width: 100%;
  height: 100%;
}
.l-gNav-scr .inner {
  width: 100%;
  min-height: 100%;
}
.l-gNav-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(20px, (40 / 760 * 100vw), 40px) clamp(20px, (80 / 980 * 100vw), 80px) clamp(20px, (60 / 760 * 100vw), 60px)  clamp(20px, (80 / 980 * 100vw), 80px);
  text-align: left;
  display: grid;
  grid-row-gap: var(--space-s);
}
@media print, screen and (min-width:761px) {
  .l-gNav-scr .inner {
    display: flex;
    align-items: center;
  }
  .l-gNav-container {
    grid-template-columns: 1fr auto;
    align-items: end;
    grid-template-areas:
      "gNav-menu gNav-info";
  }
}
@media print, screen and (max-width:760px) {
  .l-gNav-scr .inner {
    display: grid;
  }
  .l-gNav-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "gNav-menu"
      "gNav-info";
  }
}
.l-gNav a,
.l-gNav a:visited,
.l-gNav a:hover {
  color: inherit;
}
.l-gNavInfo {
  grid-area: gNav-info;
  display: flex;
  grid-row-gap: var(--space-2s);
  flex-direction: column;
  justify-content: flex-end;
}
@media print, screen and (min-width:761px) {
  .l-gNavInfo {
    border-left: 1px solid rgba(255,255,255,0.15);
    padding-left: var(--space-s);
    margin-bottom: 1em;
  }
}
@media print, screen and (max-width:760px) {
  .l-gNavInfo {
    border-top: 1px solid rgba(255,255,255,0.15);
    grid-row-gap: var(--space-s);
  }
}

/* header logo
----------------------------------------*/
html.is-gNav-open header {
  position: fixed;
  z-index: 2000;
}

/* menu
----------------------------------------*/
.l-gNavMenu {
  grid-area: gNav-menu;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.l-gNavMenu a {
  display: inline-block;
  overflow: hidden;
}
.l-gNavMenu .en {
  font-size: 0.8em;
  font-family: var(--ff-en);
  margin-left: 1.5em;
  color: var(--gray);
}
@media print, screen and (min-width:761px) {
  .l-gNavMenu {
    font-size: clamp(1.2em, (1.68vw + 0.15em), 1.3em);
    padding-right: clamp(20px, (60 / 760 * 100vw), 60px);
  }
}
@media print, screen and (max-width:760px) {
  .l-gNavMenu {
    font-size: 1.25em;
  }
}
@media (hover: hover) {
  .l-gNavMenu a:hover {
    opacity: 0.6;
  }
}
.l-gNavMenu .p-textEffect.is-active .text-each {
  animation: textEffect 0.6s forwards;
}

/* address
----------------------------------------*/
@media print, screen and (max-width:760px) {
  .l-gNavInfo dl {
    padding-top: clamp(20px, (60 / 760 * 100vw), 60px);
  }
}
.l-gNavInfo dl {
  line-height: 1.6;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-row-gap: 0.5rem;
}
.l-gNavInfo dt {
  font-size: 1.05em;
  font-family: var(--ff-en);
  padding-right: 1.5em;
}
.l-gNavInfo dd {
  font-size: 0.9em;
}
.l-gNavInfo_tel {
  padding-top: 0.4em;
}
.l-gNavInfo_tel + dd {
  font-size: 1.4em;
  font-family: var(--ff-en);
}

/* sns
----------------------------------------*/
.l-gNavSns {
  list-style: none;
  display: flex;
  gap: 1em;
  margin-left: -0.4em;
  padding-bottom: 0.4em;
}
.l-gNavSns li {
  width: 2.3em;
  height: 2.3em;
}
.l-gNavSns a {
  display: block;
  padding: 0.4em;
}
@media (hover: hover) {
  .l-gNavSns a:hover {
    opacity: 0.6;
  }
}

/* button
----------------------------------------*/
.l-gNavBtn-wrap {
  width: 100%;
  height: var(--hdHight);
  min-width: 320px;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 3000;
  transition: color 0.15s;
  color: #FFF;
}
html:not(.is-gNav-open):not(.is-gNav-colse) .l-gNavBtn-wrap {
  mix-blend-mode: difference;
}
.l-gNavBtn {
  padding-right: clamp(20px, (30 / 640 * 100vw), 30px);
  padding-left: clamp(20px, (30 / 640 * 100vw), 30px);
  line-height: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.l-gNavBtn_icon {
  position: relative;
  width: 22px;
  height: 4px;
}
.l-gNavBtn:after {
  content: "Menu";
  font-family: var(--ff-en);
  font-size: 1.2em;
  padding-top: 0.5em;
}
.l-gNavBtn.is-close:after {
  content: "Close";
}
.l-gNavBtn_icon span,
.l-gNavBtn_icon:before,
.l-gNavBtn_icon:after {
  width: 4px;
  height: 4px;
  background-color: #FFF;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
}
.l-gNavBtn_icon span {
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.8s ease-out;
}
.l-gNavBtn_icon:before,
.l-gNavBtn_icon:after {
  content: "";
  transition: left 0.4s ease-in-out, right 0.4s ease-in-out, transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
}
.l-gNavBtn_icon:before {
  left: 0;
}
.l-gNavBtn_icon:after {
  right: 0;
}
.l-gNavBtn.is-close .l-gNavBtn_icon:before {
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
.l-gNavBtn.is-close .l-gNavBtn_icon:after {
  right: 50%;
  transform: translateX(50%);
  opacity: 0;
}
@media print, screen and (min-width:1101px) {
  .l-gNavBtn-wrap:not(.is-active) {
    color: transparent;
  }
  .l-gNavBtn-wrap:not(.is-active) .l-gNavBtn_icon span,
  .l-gNavBtn-wrap:not(.is-active) .l-gNavBtn_icon:before,
  .l-gNavBtn-wrap:not(.is-active) .l-gNavBtn_icon:after {
    background-color: transparent;
  }
  .l-gNavBtn-wrap:not(.is-active) .l-gNavBtn {
    pointer-events: none;
  }
}

/*--------------------------------------------------------------------------------
  ページタイトル
--------------------------------------------------------------------------------*/
.l-pgttl-wrap {
  width: 100%;
  position: relative;
  padding-left: var(--side-space);
  padding-right: var(--side-space);
}
@media print, screen and (min-width:1101px) {
  .l-pgttl-wrap {
    padding-top: calc(var(--hdHight) + var(--space-2s));
    height: min(600px, (600 / 1400 * 100vw));
  }
}
@media print, screen and (max-width:1100px) {
  .l-pgttl-wrap {
    padding-top: var(--hdHight);
    height: clamp(240px, (480 / 980 * 100vw), 440px);
  }
}
.l-pgttl-wrap:before {
  content: "";
  width: 100%;
  height: calc(100% - var(--space-m));
  background: url("../image/bg_black.gif") repeat center bottom;
  background-size: var(--bgsize);
  position: absolute;
  left: 0;
  top: 0;
}
.l-pgttl {
  width: 100%;
  height: 100%;
  position: relative;
}
.l-pgttl.is-active:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(var(--black-rgba),0.3);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.l-pgttl-img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.l-pgttl-txt {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  line-height: 1.6;
  font-weight: normal;
  color: #FFF;
  z-index: 3;
}
.l-pgttl_jp {
  font-weight: inherit;
  display: block;
  padding-top: 2em;
  font-size: clamp(1.1em, 2.17vw - 0.25em, 1.2em);
  line-height: 1;
}
.l-pgttl_en {
  line-height: 1.6;
  font-family: var(--ff-en);
  font-weight: 400;
  font-size: clamp(3em, 4vw + 2em, 4.8em);
  overflow: hidden;
}
.l-pgttl_en .min {
  font-family: var(--ff-min);
  font-size: 68%;
  font-weight: 500;
  display: inline-block;
  transform: translateY(-0.05em);
}
@media print, screen and (min-width:1101px) {
  .l-pgttl {
    font-size: 0.9em;
  }
}
@media print, screen and (max-width:1100px) {
  .l-pgttl {
    font-size: 0.8em;
  }
}

/*--------------------------------------------------------------------------------
  ご予約
--------------------------------------------------------------------------------*/
.l-sec-rsv {
  background: url("../image/bg_black.gif") repeat center top;
  background-size: var(--bgsize);
  color: #FFF;
}
.l-rsv-container {
  padding-top: var(--space-s);
  padding-bottom: var(--space-l);
  padding-left: var(--side-space);
  padding-right: var(--side-space);
  text-align: left;
}
.l-rsv {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: var(--space-s);
}
.l-rsv li {
  line-height: 1.6;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding: 1.5em;
  position: relative;
}
.l-rsv a,
.l-rsv a:visited,
.l-rsv a:hover,
.l-rsv .js_linkBox:hover a {
  color: inherit;
}
.l-rsv li.js_linkBox:after {
  content: "";
  width: 0.8em;
  height: 0.8em;
  background: url("../image/icon/gLink.svg") no-repeat center center;
  background-size: cover;
  position: absolute;
  right: 1.5em;
  top: 50%;
  transform: translateY(-50%);
}
@media print, screen and (min-width:761px) {
  .l-rsv li:nth-of-type(-n+2) {
    border-top: 1px solid rgba(255,255,255,0.15);
  }
}
@media print, screen and (max-width:760px) {
  .l-rsv {
    grid-template-columns: 1fr;
  }
  .l-rsv li:first-of-type {
    border-top: 1px solid rgba(255,255,255,0.15);
  }
}
@media (hover: hover) {
  .l-rsv a:hover,
  .l-rsv .js_linkBox:not(.linkBox--tel):hover a {
    color: rgba(255,255,255,0.6);
  }
  .l-rsv .js_linkBox.linkBox--tel:after {
    display: none;
  }
}

/*--------------------------------------------------------------------------------
  footer
--------------------------------------------------------------------------------*/
footer {
  background-color: var(--black);
  color: #FFF;
  padding: var(--space-m) var(--side-space);
}
.l-ft {
  width: 100%;
  max-width: var(--base-width);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  display: grid;
}
.l-ft a,
.l-ft a:visited,
.l-ft a:hover {
  color: inherit;
}
@media print, screen and (min-width:981px) {
  .l-ft {
    grid-template-columns: 20% auto clamp(300px, (400 / 1200 * 100vw), 400px);
    grid-template-rows: auto auto 1fr;
    grid-column-gap: var(--space-s);
    grid-template-areas:
      "ftLogo ftInfo ftPhoto"
      "ftSns ftInfo ftPhoto"
      "ftCopy ftCopy ftPhoto";
  }
}
@media print, screen and (max-width:980px) {
  .l-ft {
    grid-template-columns: 1fr clamp(240px, (400 / 980 * 100vw), 400px);
    grid-column-gap: var(--space-s);
    grid-row-gap: var(--space-s);
    grid-template-areas:
      "ftLogo ftPhoto"
      "ftInfo ftPhoto"
      "ftSns ftPhoto"
      "ftCopy ftCopy";
  }
}
@media print, screen and (max-width:760px) {
  footer {
    padding-top: var(--space-l);
  }
  .l-ft {
    max-width: var(--sp-max-width);
    grid-template-columns: 1fr;
    grid-template-areas:
      "ftLogo"
      "ftPhoto"
      "ftInfo"
      "ftSns"
      "ftCopy";
  }
}

/* logo
----------------------------------------*/
.l-ftLogo {
  grid-area: ftLogo;
}
.l-ftLogo img {
  width: min((200 / 1200 * 100vw), 200px);
}
@media print, screen and (max-width:760px) {
  .l-ftLogo {
    text-align: center;
  }
  .l-ftLogo img {
    width: min((200 / 760 * 100vw), 200px);
    min-width: 140px;
  }
}

/* salon
----------------------------------------*/
.l-ftInfo {
  grid-area: ftInfo;
  line-height: 1.6;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-row-gap: 0.5rem;
}
.l-ftInfo dt {
  font-size: 1.05em;
  font-family: var(--ff-en);
  padding-right: 1.5em;
}
.l-ftInfo dd {
  font-size: 0.9em;
}
.l-ftInfo_tel {
  padding-top: 0.4em;
}
.l-ftInfo_tel + dd {
  font-size: 1.4em;
  font-family: var(--ff-en);
}
@media print, screen and (min-width:981px) {
  .l-ftInfo {
    align-self: start;
    padding-top: 1.75em;
  }
}

/* sns
----------------------------------------*/
.l-ftSns {
  grid-area: ftSns;
  list-style: none;
  display: flex;
  align-self: center;
  gap: 1em;
  margin-left: -0.4em;
}
.l-ftSns a {
  display: block;
  padding: 0.4em;
}
.l-ftSns li {
  width: 2.2em;
  height: 2.2em;
}
@media print, screen and (max-width:1100px) {
  .l-ftSns li {
    width: clamp(2.2em, 3.75vw + 0.75em, 2.4em);
  }
}
@media (hover: hover) {
  .l-ftSns a:hover {
    opacity: 0.6;
  }
}
@media print, screen and (min-width:981px) {
  .l-ftSns {
    padding-bottom: 0.4em;
    align-self: end;
  }
}

/* photo
----------------------------------------*/
.l-ftPhoto {
  grid-area: ftPhoto;
}
@media print, screen and (min-width:641px) {
  .l-ftPhoto {
    align-self: end;
  }
}
@media print, screen and (max-width:760px) {
  .l-ftPhoto {
    padding-top: var(--space-2s);
    padding-bottom: var(--space-2s);
  }
}

/* copy
----------------------------------------*/
.l-ftCopy {
  grid-area: ftCopy;
  font-family: var(--ff-en);
  font-size: 0.8em;
  padding-top: var(--space-2s);
}
@media print, screen and (min-width:641px) {
  .l-ftCopy {
    align-self: end;
  }
}