/* 全体 */
body {
    background-color: #eae9e6;
}

[id] {
  scroll-margin-top: 64px;
}
@media screen and (max-width:768px) {
  [id] {
    scroll-margin-top: 61px;
  }
  .service__block[id] {
      scroll-margin-top: 124px;
    }
}
.inline-block {
    display: inline-block;
}

.container {
    max-width: 100vw;
    margin: 0 auto;
    box-sizing: border-box;
    padding-inline: calc((100% - 1366px) / 2);
}

main {
    background-color: #eae9e6;
}
/* ヘッダー */
.sp-header {
    display: none;
}
/* 左ナビ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 64px;  */
    z-index: 3000;
    background: #efede8;
    border-bottom: 1px solid #a19c94;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    height: 64px;
    /* border-bottom: 1px solid #A19C94; */
}

.header__nav {
    display: flex;
    position: relative;
    align-items: center;
    font-size: 13px;
    color: #38342e;
    line-height: 0.295;
    height: 100%;
    margin-left: 44px;
}

.header__nav-list {
    display: flex;
    flex-direction: row;
}

.header__nav-item {
    /* margin-right: 14px; */
    /* 見た目調整 */
    margin-right: 18px;
    position: relative;
}

.header__nav-item > a {
    display: block;
    position: relative;
}

.header__nav-item > a::before {
    background: #a19c94;
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: -8px;
    margin: auto;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform 0.3s;
}

.header__nav-item > a:hover::before {
    transform-origin: left top;
    transform: scale(1, 1);
}

.header__nav-submenu-wrapper {
  display: none;
}

.header__nav-has-submenu:hover .header__nav-submenu-wrapper {
  position: absolute;
  padding-top: 16px;
  top: 100%;
  left: 0;
  display: block;
}

.header__nav-has-submenu:hover .header__nav-submenu {
  background-color: #EAE9E6;
  border: 1px solid #A19C94;
  padding: 8px;
  z-index: 3001;
}

.header__nav-submenu-item {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13px;
  line-height: 1.7;
  color: #38342e;
  width: max-content;
  z-index: 2;
  transition: opacity 0.3s;
}
.header__nav-submenu-item:hover {
  opacity: 0.6;
}

/* ロゴ */
.header__logo {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 87.8px;
    margin-top: 7.5px;
}
.header__logo-image {
    width: 100%;
}
/* 右ボタン */
.header__cta-list {
    display: flex;
    flex-direction: row;
    height: 100%;
}

/* インスタグラム */
.header__cta-instagram {
    display: flex;
    width: 56px;
    height: 100%;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #707070;
    border-left: 1px solid #707070;
}

.header__cta-instagram-link {
    display: grid;
    place-content: center;
    width: 100%;
    height: 100%;
}

.header__cta-instagram-icon {
    width: 14px;
    height: 14px;
    display: block;
}

/* 予約ボタン */
.sp-cta-reservation-fixed {
    display: none;
}
.header__cta-item-reservation {
    font-size: 13px;
    color: #38342e;
    line-height: 0.295;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 192px;
    border-right: 1px solid #707070;
}

.header__cta-reservation-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
  }
  
.header__cta-instagram-link,
.header__cta-reservation-link {
    transition: opacity .2s;
}

.header__cta-instagram-link:hover,
.header__cta-reservation-link:hover {
    opacity: 0.6;
}

.header__cta-reservation-icon {
    display: block;
    width: 13px;
    height: 14px;
}

.header__cta-item-reservation span {
    display: block;
}

/* ヒーロー画像 */
.top {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    margin-top: 64px;
    max-width: 1366px;
    aspect-ratio: 1366 / 704;
    width: 100%;
    height: calc(100vh - 64px);
    z-index: -10;
}

.top-inner {
  position: relative;
}

.top__slides {
    position: relative;
    width: 100%;
    aspect-ratio: 1366 / 704;
    overflow: hidden;
}
.top__slides img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0; /* デフォルトは非表示 */
}

/* ヒーロー画像の文字 */
.sp-br {
    display: none;
}

.top__title {
    position: absolute;
    font-size: 24px;
    color: #ffffff;
    line-height: 1.5;
    letter-spacing: 0.095em;
    left: 64px;
    bottom: min(88px, 6.44vw);
  }
  
  .top__subtitle {
    position: absolute;
    font-size: 18px;
    color: #ffffff;
    line-height: 1.409;
    letter-spacing: 0.128em;
    left: 64px;
    /* bottom: 40px; */
    /* 見た目調整 */
    bottom: min(41px, 3vw);
}

/* メニューナビ */
.top-menu__nav {
    width: 100%;
    aspect-ratio: 1366/165;
    margin-bottom: 100px;
    margin-top: calc(min(768px,56.222vw));
    z-index: 1;
}
.top-menu__nav-list {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    height: 100%;
    border: solid #707070 1px;
}

.top-menu__nav-item {
    flex: 1;
    transition: 0.3s background-color;
}
.top-menu__nav-item:hover {
  background-color: #E3D7D2;
}
.top-menu__nav-item:nth-child(2) {
    border-left: solid #707070 1px;
    border-right: solid #707070 1px;
}

.top-menu__nav-link {
    display: grid;
    grid-template-columns: 44.8% auto 4.1%;
    width: 100%;
    padding: 5.3% 5.3% 5.3% 8.8%;
    gap: 24px;
}

.top-menu__nav-image {
    width: 100%;
}

.top-menu__nav-image img {
    width: 100%;
}
.top-menu__nav-title {
    display: block;
    align-self: center;
    font-size: clamp(0.813rem, 0.251rem + 1.17vw, 1.25rem);
    color: #38342e;
    line-height: 2.2;
}

.top-menu__nav-subtitle {
    display: block;
    font-size: clamp(0.625rem, 0.464rem + 0.33vw, 0.75rem);
    color: #77726b;
    line-height: 0.454;
    padding-top: 8px;
    /*見た目調整要*/
}

.top-menu__nav-link::after {
    content: "";
    width: 16px;
    height: 19px;
    background-image: url(../images/menu_arrow.png);
    background-size: 16px 19px;
    align-self: center;
}

/* ( Brand Concept ) */
.concept {
    position: relative;
}

.concept__head {
    display: grid;
    grid-template-columns: 36.53% auto;
    gap: 5.85%;
    margin-bottom: 100px;
}

.concept__head-image {
    width: 100%;
}
.concept__head-image img {
    width: 100%;
}

.concept__head-intro {
    align-self: center;
}

.concept__head-title {
    display: block;
    margin-bottom: 56px;
    font-size: 18px;
    color: #38342e;
    letter-spacing: 0.09em;
}

.concept__head-text {
    font-size: 14px;
    color: #38342e;
    line-height: 2.29;
    letter-spacing: 0.04em;
}

.concept__body {
  overflow-x: hidden;
}

.concept__body-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.concept__body-illustration {
    width: 7.32%;
    /* margin-bottom: 40px; */
    /*見た目調整 */
    margin-bottom: 33px;
}

.concept__body-illustration img {
    width: 100%;
}

.concept__body-subtitle {
    font-size: 14px;
    color: #a19c94;
    line-height: 2.285714285714286;
    letter-spacing: 0.04em;
}

.concept__body-title {
    display: block;
    font-size: 18px;
    color: #38342e;
    line-height: 2.39;
    letter-spacing: 0.04em;
    margin-bottom: 40px;
}

.concept__body-list {
    font-size: 14px;
    color: #38342e;
    line-height: 1.71;
    letter-spacing: 0.04em;
    width: 100%;
    max-width: 1098px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    aspect-ratio: 1098/148;
    margin-bottom: 100px;
}

.concept__body-item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-top: 1px solid #a19c94;
    border-bottom: 1px solid #a19c94;
    border-left: 1px solid #a19c94;
}

.concept__body-item:last-child {
    border-right: 1px solid #a19c94;
}

.concept__body-gallery {
    width: 455px;
    margin-bottom: 100px;
}

.swiper-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

.concept__body-gallery-image {
    width: 100%;
    object-fit: cover;
}

.concept__foot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
    max-width: 90%;
    margin-inline: auto;
}
.concept__foot-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 64px;
}
.concept__foot-subtitle {
    display: block;
    font-size: 14px;
    color: #a19c94;
    line-height: 2.29;
    letter-spacing: 0.04em;
}

.concept__foot-title {
    display: block;
    font-size: 18px;
    color: #38342e;
    line-height: 2.388888888888889;
    letter-spacing: 0.04em;
}

.concept__foot-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    aspect-ratio: 1098/124;
    width: 100%;
    max-width: 1098px;
    gap: 40px;
}

.concept__foot-term::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background-color: #38342e;
    background-size: 8px 8px;
    border-radius: 50%;
    margin-inline: auto;
    margin-bottom: 15px;
}

.concept__foot-term {
    font-size: 13px;
    color: #a19c94;
    line-height: 1.7;
    letter-spacing: 0.04em;
    text-align: center;
}

.concept__foot-desc {
    font-size: 14px;
    color: #38342e;
    line-height: 1.71;
    letter-spacing: 0.04em;
    text-align: center;
    margin-top: 16px;
}

.concept__body-image {
    position: absolute;
    width: 21.1%;
    right: 0;
    top: 20.8%;
    z-index: 0;
}

.concept__body-image img {
    width: 100%;
}

/* メニュー */

.menu {
    max-width: min(1100px, 90%);
    margin: 0 auto 100px auto;
    padding-top: 100px;
}

.menu__body {
    display: grid;
    grid-template-columns: 28.45% 71.54%;
    width: 100%;
    max-width: 1100px;
    align-items: start;
}
.menu__title {
    font-size: 18px;
    color: #38342e;
    /* line-height: 2.44; */
    /* 見た目調整 */
    line-height: 1;
    letter-spacing: 0.09em;
    display: block;
    margin-bottom: 40px;
}

/* サイドバー */
.menu__sidebar {
    padding-top: 39px;
    padding-left: 24px;
    position: sticky;
    top: 64px;
    align-self: start;
    height: 1107px;
    border-top: #a19c94 solid 1px;
    border-left: #a19c94 solid 1px;
    border-bottom: #a19c94 solid 1px;
}

.menu__nav {
    font-size: 13px;
    color: #aba69e;
    line-height: 1.85;
    letter-spacing: 0.04em;
}

.menu__nav-item {
    display: block;
    margin-bottom: 20px;
}

.menu__nav-item a {
    display: inline-flex;
}
.menu__nav-item a::before {
    content: "-";
    display: inline-block;
}

/* サービスブロック */
.service__body {
    border-top: #a19c94 solid 1px;
    border-left: #a19c94 solid 1px;
    border-right: #a19c94 solid 1px;
}

.service__block {
    border-bottom: #a19c94 solid 1px;
    padding: 40px 56px;
}
/*  */
.service__title {
    margin-bottom: 40px;
}
.service__title-en {
    font-size: 20px;
    color: #38342e;
    /* line-height: 2.2; */
    letter-spacing: 0.09em;
    display: block;
    margin-bottom: 5px;
}

.service__title-ja {
    font-size: 12px;
    color: #76726c;
    /* line-height: 2; */
    letter-spacing: 0.04em;
    display: block;
}

.service__lead {
    font-size: 14px;
    color: #38342e;
    line-height: 2.29;
    letter-spacing: 0.04em;
    display: block;
    /* margin-bottom: 40px; */
    /* 見た目修正 */
    margin-bottom: 34px;
}

.service__slides-track {
    position: relative;
    width: 100%;
    aspect-ratio: 675/400;
    overflow: hidden;
}
.service__slides-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: svcFade 15s linear infinite;
    will-change: opacity;
    backface-visibility: hidden;
}

/* サービス紹介 */
.service__item {
    margin-top: 40px;
}

.service__item-title {
    display: grid;
    align-items: center;
    font-size: 14px;
    color: #38342e;
    letter-spacing: 0.04em;
    line-height: 3.071428571428571;
    height: 56px;
    background-color: #e2e0da;
    padding-left: 18px;
    margin-bottom: 24px;
}

.service__item-desc {
    font-size: 14px;
    color: #38342e;
    line-height: 2.29;
    letter-spacing: 0.04em;
    display: block;
}

.service__menu {
    padding-top: 40px;
    padding-bottom: 40px;
    border-bottom: #a19c94 solid 1px;
}
.service__menu-content {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.service__menu__badge-rank {
    display: grid;
    place-content: center;
    width: 60px;
    font-size: 13px;
    color: #38342e;
    letter-spacing: 0.04em;
    /* line-height: 21px;   */
    background-color: #ffffff;
    padding: 3px 0 2px;
    margin-right: 11px;
}

.service__menu__badge-mens {
    display: grid;
    place-content: center;
    width: 60px;
    font-size: 13px;
    color: #38342e;
    letter-spacing: 0.04em;
    /* line-height: 21px;   */
    background-color: #ffffff;
    padding: 3px 0 2px;
    margin-right: 11px;
}

.service__menu-desc {
    font-size: 14px;
    color: #38342e;
    line-height: 1.79;
    letter-spacing: 0.08em;
    display: block;
}
.service__menu-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.service__menu-meta {
    display: block;
}
.service__menu-note {
    display: block;
    font-size: 12px;
    color: #38342e;
    line-height: 2.67;
    letter-spacing: 0.08em;
}
.service__menu-time {
    font-size: 13px;
    color: #a19c94;
    line-height: 2.46;
    letter-spacing: 0.08em;
}

.service__menu-label-first {
    font-size: 12px;
    color: #38342E;
    line-height: 3.67;
    width: 44px;
    border: 1px solid #a19c94;
    border-radius: 9999px;
    padding: 0 10px 1px;
    margin-left: 8px;
}

.service__menu-price {
    font-size: 15px;
    color: #38342e;
    line-height: 2.13;
    letter-spacing: 0.064em;
    margin-left: 4px;
}

.service__menu-tax {
    font-size: 12px;
    color: #38342e;
    line-height: 2.67;
    letter-spacing: 0.064em;
}

/* ( Reviews ) */
.reviews {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
}

.reviews__title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.reviews__title {
    display: flex;
    font-size: 18px;
    color: #38342e;
    line-height: 2.44;
    letter-spacing: 0.09em;
    margin-left: 133px;
    margin-bottom: 40px;
    align-items: center;
    max-width: 1100px;
    justify-content: space-between;
}

.reviews__swiper-nav {
  display: flex;
  gap: 22px;
  margin-right: 133px;
}

.reviews__viewport-wrapper {
    padding-left: 133px !important;
    padding-right: 133px !important;
}

.reviews__viewport {
    align-items: stretch;
    /* overflow-x: auto;
  display: flex;
  flex-direction: row;
  gap: 40px; */
    /* スクロールバーを消す */
    scrollbar-width: none; /* Firefox用 */
    -ms-overflow-style: none; /* IE, Edge用 */
}

/* スクロールバーを消す  */
.reviews__viewport::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera用 */
}

.reviews__card {
    width: 530px;
    height: auto !important;
    background-color: #ffffff;
    flex: 0 0 530px;
    padding-top: 23px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
}

.reviews__meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 19px;
    align-items: center;
    margin-bottom: 10px;
}

.reviews__gender {
    font-size: 13px;
    color: #888582;
    line-height: 3.38;
    letter-spacing: 0.12em;
}

.reviews__gender::after {
    content: "/";
    margin-left: 4px;
}

.reviews__age {
    font-size: 13px;
    color: #888582;
    line-height: 3.38;
    letter-spacing: 0.12em;
}

.reviews__tag {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    gap: 13px;
    color: #888582;
    line-height: 3.38;
    letter-spacing: 0.04em;
}

.reviews__tag::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 19px;
    background-color: #A19C94;
}

.reviews__text {
    font-size: 14px;
    color: #38342e;
    line-height: 1.79;
    letter-spacing: 0.04em;
}

/*アクセス */

.access__layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 80px;
    padding-bottom: 100px;
    width: 100%;
}

.access__photo {
    width: 50%;
}

.access__photo img {
    width: 100%;
}

.access__panel {
    width: 33.5036%;
}

.access__title {
    font-size: 18px;
    line-height: 2.444;
    letter-spacing: 0.09em;
    margin-bottom: 40px;
}

/* ロゴと店名 */
.access__head {
    display: grid;
    grid-template-columns: 19.77% auto;
    gap: 60px;
    margin-bottom: 40px;
}

.access__logo-image {
    width: 100%;
    align-self: center;
}

.access__name {
    color: #707070;
    align-self: center;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 3.1429;
}

/*住所～アクセス  */
.access__item {
    display: grid;
    grid-template-columns: 19.77% auto;
    column-gap: 60px;
    margin-bottom: 24px;
}

.access__item:first-child {
    margin-bottom: 0;
}

.access__label {
    font-size: 14px;
    color: #38342e;
    line-height: 1.714;
    letter-spacing: 0.04em;
    align-self: self-start;
}

.access__value {
    font-size: 14px;
    color: #38342e;
    line-height: 1.714;
    letter-spacing: 0.04em;
    align-self: self-start;
}

.access__map-link {
    display: inline-block;
    font-size: 13px;
    color: #a19c94;
    line-height: 1.714;
    letter-spacing: 0.04em;
    position: relative;
    padding-bottom: 1px;
}

.access__map-link::before {
    background: #a19c94;
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.access__route {
    margin-bottom: 24px;
}

.access__tag {
    display: inline-block;
    font-size: 12px;
    border: #a19c94 1px solid;
    line-height: 1.714;
    border-radius: 9999px;
    letter-spacing: 0.04em;
    padding: 2px 14px;
    margin-bottom: 8px;
}

.access__text {
    font-size: 14px;
    line-height: 1.714;
    letter-spacing: 0.04em;
}

/* インスタグラム */
.instagram__layout {
    padding-block: 100px;
}
.instagram__head-img {
    text-align: center;
}

.instagram__title {
    font-size: 18px;
    text-align: center;
    margin-top: 16px;
}

.instagram__posts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    width: fit-content;
    max-width: 649px;
    margin-inline: auto;
    margin-top: 40px;
}

.instagram__post-link {
    display: block;
    width: fit-content;
}

.instagram__post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instagram__cta {
    font-size: 13px;
    color: #38342e;
    line-height: 2.385;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #a19c94;
    border-radius: 9999px;
    width: 154px;
    overflow: hidden;
    transition: .3s ease-out border;
    margin: 40px auto 0;
}

.instagram__cta::after {
    display: inline-block;
    content: "";
    width: 16px;
    height: 17px;
    background-image: url(../images/common_icon_external.png);
    background-size: cover;
    transition: .3s ease-out;
    margin-top: 1px;
}

.instagram__cta:hover {
    border: 1px solid rgba(161, 156, 148, 0.4);
}

.instagram__cta:hover::after{
    transform: translate(3px , -3px);
}


/* フッター */

.footer {
    background-color: #e2e0da;
}

.footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 90px;
    padding-bottom: 110px;
}

.footer__info {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 39px;
    border-bottom: 1px solid #cdc8c2;
}

.footer__logo {
    width: 87.8px;
    height: 48px;
    margin-bottom: 64px;
}

.footer__logo-image {
    width: 100%;
}
.footer__notice {
    width: 39.63634%;
}

.footer__notice-lead {
    display: block;
    font-size: 12px;
    color: #707070;
    line-height: 1.667;
    margin-bottom: 20px;
}
.footer__notice-list {
    font-size: 12px;
    color: #707070;
    line-height: 1.667;
}

/* ナビ */
.footer__nav {
    width: 57%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: clamp(2.5rem, -3.488rem + 9.36vw, 4.5rem);
}

.footer__blocks {
    display: grid;
    grid-template-areas:
        "block1 block2 block4"
        ".      block3 .";
    column-gap: clamp(2.5rem, -3.488rem + 9.36vw, 4.5rem);
    row-gap: 0px;
    font-size: 13px;
    color: #38342e;
    /* line-height:3.385 ; */
    letter-spacing: 0.09em;
}

.footer__block-1 {
    grid-area: block1;
}
.footer__block-2 {
    grid-area: block2;
}
.footer__block-3 {
    grid-area: block3;
}
.footer__block-4 {
    grid-area: block4;
}

.footer__block li {
    display: flex;
    height: 17px;
    margin-bottom: 16px;
    padding-top: 0;
    line-height: 17px;
    overflow: hidden;
}
.footer__block-menu {
    display: block;
}

.footer__block-menu::before {
    content: "-";
    display: inline-block;
    font-size: 13px;
    color: #38342e;
    /* line-height:3.385 ; */
    letter-spacing: 0.09em;
    margin-right: 5px;
}

/* CTRボタン */
.footer__cta-reservation {
    font-size: 13px;
    color: #38342e;
    line-height: 2.385;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 23px;
    border: 1px solid #a19c94;
    border-radius: 9999px;
    width: 195px;
    overflow: hidden;
    transition: .3s ease-out border
}
.footer__cta-reservation::before {
    display: inline-block;
    content: "";
    width: 13px;
    height: 14px;
    background-image: url(../images/common_icon_reserve.png);
    background-size: cover;
}

.footer__cta-reservation::after {
    display: inline-block;
    content: "";
    width: 13px;
    height: 14px;
    background-image: url(../images/common_icon_external.png);
    background-size: cover;
    transition: .3s ease-out;
}

.footer__cta-reservation:hover {
    border: 1px solid rgba(161, 156, 148, 0.4);
}

.footer__cta-reservation:hover::after{
    transform: translate(3px , -3px);
}

/* display:flexとalign-items:centerは中身の高さに合わせるために記述*/
.text-wrap{
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    letter-spacing: 0.06em;
    max-height: 100%;
}
.after{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    letter-spacing: 0.06em;
    transform: translateY(100%);
}
.before{
    display: flex;
    align-items: center;
}

/* コピーライト */
.footer__bottom {
    padding-top: 40px;
}

.footer__copy {
    /* font-size: 10px; */
    /* 見た目調整 */
    font-size: 12px;
    color: #888582;
    /* line-height: 4.4; */
    /* 見た目調整 */
    letter-spacing: 0.09em;
    text-align: end;
}

/* SP版-------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* 全体 */
    .container {
        max-width: 768px;
    }

    .pc-br {
        display: none;
    }

    /* ヘッダー */
    .pc-header {
        display: none;
    }
    .top {
        margin-top: 61px;
        aspect-ratio: unset;
    }

    .sp-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: 61px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: #a19c94 1px solid;
        background-color: #eae9e6;
    }

    /* spメニューが閉じているとき （ボタンはあいている）*/
    /* ロゴ */

    #sp-nav[hidden] {
        display: none;
    }

    .sp-header-open {
        display: none;
    }

    #menu-btn-close {
        display: none;
    }

    .header__logo {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 87.8px;
        margin-top: 6.5px;
    }

    .sp-header-close {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    /* インスタグラム */
    .header__cta-instagram {
        width: 61px;
        border-right: 1px solid #707070;
        border-left: none;
    }

    /* ハンバーガーボタン*/

    .sp-menu-btn {
        width: 61px;
        border-left: #707070 1px solid;
        /* background-color: red; */
        position: relative;
        cursor: pointer;
        display: block;
    }

    .menu-line {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 21px;
        height: 2px;
        scale: 1 0.5;
        background-color: #38342e;
    }

    .menu-line:nth-child(1) {
        top: 23.5px;
    }
    .menu-line:nth-child(2) {
        top: 30.5px;
    }
    .menu-line:nth-child(3) {
        top: 37.5px;
    }

    #sp-nav[hidden] {
        display: none;
    }

    /* spメニューがあいているとき（ボタンは閉じている）*/

    .sp-header.is-open {
        height: 100vh;
        width: 100vw;
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        z-index: 3000;
    }

    /* menu と　ボタン */
    .sp-nav-bar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: 61px;
        background-color: #eae9e6;
        padding-left: 10.667%;
        border-bottom: #a19c94;
    }

    .sp-nav-title {
        display: block;
        align-self: center;
        font-size: 15px;
        line-height: 2.9333;
        letter-spacing: 0.1em;
    }

    /* メニュー本体 */
    .sp-nav-list {
        font-size: 15px;
        line-height: 53px;
        letter-spacing: 0.1em;
        color: #38342e;
        border-top: #aaa69f 1px solid;
        background-color: #e5e4de;
    }

    .sp-nav-list a,
    .sp-nav-list-subhead {
        display: inline-flex;
        width: 100%;
        height: 53px;
        border-bottom: #aaa69f 1px solid;
        padding-left: 10.667%;
        padding-right: 10.667%;
        align-items: center;
        justify-content: space-between;
    }

    .sp-nav-list a::after {
        display: inline-block;
        content: "";
        background-image: url(../images/sp_menu_arrow.png);
        width: 12px;
        height: 10px;
        background-size: contain;
    }

    /* menuのやじるしを消す */
    .sp-nav-list li:nth-child(3)::after {
        display: none;
    }

    /*インスタグラム  */
    
    .sp-nav-sns a {
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: #aaa69f 1px solid;
      background-color: #e5e4de;
    }

    .sp-nav-sns img {
        display: block;
        width: 20px;
        height: 20px;
        justify-self: center;
    }

    /* 開閉操作 */
    .sp-header.is-open .sp-header-open {
        display: flex;
        flex-direction: column;
    }
    .sp-header.is-open #menu-btn-open {
        display: none;
    }
    .sp-header.is-open #menu-btn-close {
        display: block;
    }

    .sp-header.is-open .sp-header-close {
        display: none;
    }

    /* ハンバーガーボタン */

    .sp-header.is-open .sp-menu-btn .menu-line:nth-child(1) {
        top: 30.5px;
        transform: translateX(-50%) rotate(45deg);
        height: 1px;
        scale: 1;
    }
    .sp-header.is-open .sp-menu-btn .menu-line:nth-child(2) {
        opacity: 0;
        transform: translateX(-50%);
    }
    .sp-header.is-open .sp-menu-btn .menu-line:nth-child(3) {
        top: 30.5px;
        transform: translateX(-50%) rotate(-45deg);
        height: 1px;
        scale: 1;
    }

    /* 下端の予約ボタン */
    .sp-cta-reservation-fixed {
        display: inline-flex;
        width: 100vw;
        height: 61px;
        background-color: #fefefe;
        z-index: 1000;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        line-height: 61px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-top: #a19c94 1px solid;
    }

    .header__cta-reservation {
      width: 100%;
    }

    .header__cta-reservation::before {
        content: "";
        display: inline-block;
        background-image: url(../images/common_icon_reserve.png);
        background-size: contain;
        width: 13px;
        height: 14px;
    }

    /* ヒーロー画像 */
    .top__slides {
        height: 79.89vh;
    }

    .sp-br {
        display: inline;
    }

    /* ヒーロー画像の文字 */
    .top__title {
        font-size: 18px;
        letter-spacing: 0.095em;
        line-height: 0.88889;
        top: 58.2vh;
        left: 40px;
        bottom: auto;
    }
    .top__subtitle {
        font-size: 12px;
        letter-spacing: 0.128em;
        line-height: 1.5;
        top: calc(58.2vh + 2rem);
        left: 40px;
        bottom: auto;
    }

    /* メニューナビ */
    .top-menu__nav {
        aspect-ratio: unset;
        margin-top: 79.89vh;
    }
    .top-menu__nav-list {
        flex-direction: column;
        border: none;
        border-top: solid #a19c94 1px;
        margin-bottom: 80px;
    }

    .top-menu__nav-link {
        height: 100%;
        display: grid;
        grid-template-columns: 160px auto 19px;
        width: 100%;
        padding: 16px 20px;
        gap: 16px;
    }

    .top-menu__nav-item:nth-child(2) {
        border: none;
        border-bottom: solid #a19c94 1px;
    }

    .top-menu__nav-item {
        height: 139px;
        width: 100%;
        border-bottom: solid #a19c94 1px;
    }
    .top-menu__nav-title {
        font-size: 20px;
        line-height: 2.2;
    }
    .top-menu__nav-subtitle {
        font-size: 12px;
        /* line-height:3.66667 ; */
    }

    /* ( Brand Concept ) */

    .concept__head {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 293px;
    }
    .concept__head-image {
        padding-right: 20px;
    }

    .concept__head-intro {
        padding: 0 20px;
        z-index: 1;
    }

    .concept__head-title {
        margin-bottom: 40px;
    }

    .concept__head-text {
        font-size: 14px;
        color: #38342e;
        line-height: 2.2142;
        letter-spacing: 0.02em;
    }

    .concept__body-intro {
        padding: 0 20px;
    }

    .concept__body-illustration {
        width: 92px;
        margin-bottom: 40px;
    }

    .concept__body-subtitle {
        line-height: 2;
        letter-spacing: 0.04em;
    }
    .concept__body-list {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        aspect-ratio: unset;
        height: 372px;
        border-right: 1px solid #a19c94;
        border-bottom: 1px solid #a19c94;
        margin-bottom: 80px;
    }

    .concept__body-item {
        border-top: 1px solid #a19c94;
        border-left: 1px solid #a19c94;
        border-right: none;
        border-bottom: none;
    }
    .concept__body-item:last-child {
        border-right: none;
    }

    .concept__body-gallery {
      width: auto;
      height: auto;
      margin-bottom: 80px;
    }
    .concept__body-gallery-item {
      width: 75.3vw !important;
    }

    .concept__foot {
        padding: 0 20px;
        max-width: none;
    }
    .concept__foot-title {
        line-height: 1.7778;
        text-align: center;
    }

    .concept__foot-list {
        position: relative;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 16px;
    }

    .concept__foot-item:nth-child(4) {
        position: absolute;
        left: 33.33%;
        transform: translateX(-50%);
        top: 140%;
    }

    .concept__foot-item:nth-child(5) {
        position: absolute;
        left: 66.67%;
        transform: translateX(-50%);
        top: 140%;
    }
    .concept__foot-term::before {
        margin-bottom: 0px;
        width: 6px;
        height: 6px;
    }

    .concept__foot-term {
        font-size: 11px;
        line-height: 2.909;
        letter-spacing: 0.04em;
    }

    .concept__foot-desc {
        font-size: 12px;
        line-height: 1.6667;
        letter-spacing: 0.02em;
        margin-top: 0;
    }

    .concept__body-image {
        position: absolute;
        width: 64%;
        right: 0;
        top: 31.5%;
    }

    /* メニュー */

    .menu__title {
        margin-inline: 20px;
    }
    .menu__body {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
    }

    /* サイドバー */
    .menu__sidebar {
        height: 47px;
        padding: 0;
        margin-bottom: 40px;
        position: sticky;
        top: 60px;
        left: 0;
        z-index: 1;
        background-color: #eae9e6;
    }

    .menu__nav-list {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .menu__nav-item {
        width: 33.3333%;
        margin-bottom: 0px;
    }
    .menu__nav-item a {
        display: block;
        width: 100%;
        text-align: center;
        line-height: 46px;
        border-right: #a19c94 solid 1px;
    }

    .menu__nav-item a::before {
        display: none;
    }

    /* サービスブロック */
    .service__body {
        margin: 0 20px;
    }
    .menu {
        max-width: none;
        margin-top: 160px;
    }

    .service__block {
        padding: 20px;
    }

    .service__title {
        margin-bottom: 24px;
    }

    .service__title-en {
        font-size: 19px;
        margin-bottom: 4px;
    }

    .service__lead {
        font-size: 13px;
        line-height: 2.3077;
        letter-spacing: 0.02em;
        margin-bottom: 24px;
    }

    .service__item-title {
        font-size: 13px;
        letter-spacing: 0.04em;
        line-height: 45px;
        height: 45px;
        background-color: #e2e0da;
        padding-left: 24px;
        margin-bottom: 24px;
    }

    .service__item-desc {
        font-size: 13px;
        line-height: 2.3077;
        letter-spacing: 0.02em;
    }

    .service__menu-content {
        display: flex;
        flex-direction: column;
        align-items: start;
        margin-bottom: 16px;
    }
    .service__menu {
        padding-top: 32px;
        padding-bottom: 32px;
        border-bottom: #a19c94 solid 1px;
    }

    .service__menu__badge-rank {
        font-size: 12px;
        display: block;
        width: 57px;
        text-align: center;
        margin-bottom: 8px;
    }

    .service__menu-desc {
        font-size: 13px;
        line-height: 1.7692;
        letter-spacing: 0.064em;
    }

    .service__menu-info {
        flex-direction: column;
    }
    .service__menu-meta {
        align-self: end;
    }

    .service__menu__badge-mens {
        font-size: 12px;
        display: block;
        width: 57px;
        text-align: center;
        margin-bottom: 8px;
    }

    /* ( Reviews ) */
    .reviews {
        padding-top: 100px;
        padding-bottom: 160px;
    }
    .reviews__swiper-nav {
      margin-right: 44px;
    }
    .reviews__viewport-wrapper {
        padding-inline: 20px !important;
    }

    .reviews__card {
        width: 300px;
        flex: 0 0 300px;
        padding: 19px 20px 16px 20px;
    }

    .reviews__title {
        font-size: 18px;
        line-height: 2.44;
        letter-spacing: 0.064em;
        margin-left: 20px;
        max-width: 311px;
    }

    .reviews__gender {
        font-size: 12px;
        line-height: 3.6667;
        letter-spacing: 0.12em;
    }

    .reviews__age {
        font-size: 12px;
        line-height: 3.6667;
        letter-spacing: 0.12em;
    }

    .reviews__text {
        font-size: 13px;
        line-height: 1.7692;
        letter-spacing: 0.02em;
    }

    /*アクセス */

    .access__layout {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        margin-top: 80px;
        padding-bottom: 56px;
    }

    .access__photo {
        width: 355px;
    }

    .access__panel {
        width: 100%;
        align-self: center;
        padding: 0 20px;
    }

    .access__title {
        position: absolute;
        top: -72px;
    }

    /* ロゴと店名 */
    .access__head {
        grid-template-columns: 23.881% auto;
        gap: 64px;
    }
    .access__name {
        font-size: 13px;
        letter-spacing: 0.02em;
        line-height: 3.3846;
    }
    /*住所～アクセス  */
    .access__item {
        grid-template-columns: 23.881% auto;
        gap: 64px;
    }

    .access__item:first-child {
        margin-bottom: 4px;
    }

    .access__label {
        font-size: 13px;
        line-height: 1.7692;
        letter-spacing: 0.02em;
    }

    .access__value {
        font-size: 13px;
        line-height: 1.7692;
        letter-spacing: 0.02em;
    }

    .access__map-link {
        font-size: 11px;
        letter-spacing: 0.02em;
    }

    .access__text {
        font-size: 13px;
        line-height: 1.7692;
        letter-spacing: 0.02em;
    }
    /* インスタグラム */
    
    .instagram__layout {
        padding: 80px 20px;
    }

    /* フッター */

    .footer__inner {
        padding: 80px 40px 101px;
    }

    .footer__info {
        flex-direction: column;
    }

    .footer__notice {
        width: 100%;
        padding-bottom: 40px;
    }

    .footer__notice-lead {
        font-size: 11px;
    }
    .footer__logo {
        margin-bottom: 40px;
    }

    .footer__notice-list {
        font-size: 11px;
    }

    /* ナビ */
    .footer__nav {
        flex-direction: column;
        width: 100%;
    }

    .footer__blocks {
        grid-template-areas:
            "block1 block2"
            "block4 block3";
        margin-bottom: 24px;
        column-gap: 56px;
    }

    /* CTRボタン */
    .footer__cta-reservation {
        margin-bottom: 80px;
    }

    /* コピーライト */

    /*SP版終わり */
}