@charset "UTF-8";
/* SCSSの読み込み */
@import url(all.css);

/*===============================================
  切り替え用
===============================================*/
html {
  font-size: clamp(9px, 0.6896551724vw, 10px);
}

.pc-none {
  display: none !important;
}

a[href^="tel:"] {
  pointer-events: none;
}

.mv-reserve[href^="tel:"] {
  pointer-events: auto;
}

.inner {
  margin: 0 auto;
  max-width: 108rem;
}

/*===============================================
  wrapper
===============================================*/
#wrapper {
  min-width: 1200px;
}

/*===============================================
  container
===============================================*/

#container {
  position: relative;
}

#container>div,
#container>section {
  position: relative;
}

#container>div>*,
#container>section>* {
  position: relative;
  z-index: 5;
}

/*===============================================
  com-title
===============================================*/
.com-title .jp {
  line-height: 0.9;
}

.com-title .en {
  line-height: 3.7;
}

/* ======================================
  com-btn
====================================== */
.com-btn {
  font-size: 2.2rem;
}

/* ====================================== 
  contact-tel
====================================== */
.header .contact-tel {
  margin-left: 1rem;
}

.contact-tel-num {
  padding-left: 3.3rem;
  font-size: 3.6rem;
}

.contact-tel-num::before {
  top: 55.2%;
  width: 2.5rem;
  height: 2.7rem;
}

.contact-tel-txt {
  margin-top: -13.2px;
  padding-left: 1.2rem;
}

/*===============================================
  sec-wave
===============================================*/
.sec-wave-top::after {
  top: clamp(200px, 20.313vw, 390px);
  right: clamp(40px, 7.292vw, 140px);
  width: clamp(200px, 18.542vw, 356px);
  aspect-ratio: 356 / 335;
}

@media (max-width: 1800px) {

  .men-haircut .sec-wave-top::after,
  .whitening .sec-wave-top::after {
    top: auto;
    right: 6%;
    bottom: 13%;
    width: 20rem;
  }
}

@media (max-width: 1400px) {

  .whitening .sec-wave-top::after,
  .men-haircut .sec-wave-top::after {
    top: auto;
    right: 2%;
    bottom: 13%;
    width: 20rem;
  }
}

/* ======================================
  ページトップ (pagetop)
====================================== */
#pagetop {
  /* right: 2rem; */
  right: calc(30px + clamp(100px, 8.333vw, 160px) / 2 - 2.3rem);
  bottom: 2rem;
  font-size: 2.4rem;
}

#pagetop img {
  width: 4.6rem;

  height: auto;
}

/*===============================================
  ヘッダー (header)
===============================================*/
.header {
  padding-bottom: 2.3rem;
}

.header .header-inner {
  width: 96.3%;
  margin: 0 auto;
  max-width: 184rem;
}

.header .header-logo {
  width: 14.2%;
  padding-top: 3rem;
  min-width: 26rem;
}

.header .header-contact-btn {
  margin-top: 1.1rem;
  padding: 1.6rem 1.1rem 1.6rem 1.2rem;
}

.header .gnav {
  padding-top: 1.2rem;
}

.header .gnav-item {
  margin: 0 3.5rem 0 2.3rem;
}

.header .gnav-item a {
  padding-bottom: 0.7rem;
  font-size: 1.8rem;
}

.header .gnav-item:not(:last-child)::after {
  right: -3.3rem;
  width: 8px;
  height: 8px;
}

.header .gnav-item:first-child {
  margin-left: 0;
}

.header .gnav-item:last-child {
  margin-right: 0;
}

/* ======================================
  メインビジュアル (mainvisual)
====================================== */
.mainvisual {
  padding-bottom: 38.5rem;
  max-width: 1920px;
}

.mainvisual::before {
  top: 2.6rem;
  right: 0;
  width: clamp(320px, 30.208vw, 580px);
}

.mainvisual .mv-vertical {
  top: 29.3%;
  left: 1.9%;
  font-size: 1.3rem;
  letter-spacing: 1.5px;
}

.mainvisual .mv-layout {
  margin-left: 13rem;
}

.mainvisual .mv-txt {
  flex: 0 0 auto;
  padding-top: clamp(12rem, 15.9375vw, 30.6rem);
  padding-bottom: clamp(1rem, 1.2vw, 2.3rem);
}

.mainvisual .mv-title span {
  margin-bottom: 1.3rem;
  padding: 0 0 1rem 3rem;
  font-size: 6rem;
  letter-spacing: 3.5px;
}

.mainvisual .mv-name {
  padding-top: 1rem;
  padding-left: 9.8rem;
  font-size: 3.4rem;
  letter-spacing: 2.4px;
}

.mainvisual .mv-name::before {
  left: 4rem;
}

.mainvisual .mv-name::after {
  bottom: -9.4rem;
  left: 100%;
  width: clamp(9rem, 9.4vw, 13.5rem);
}

.mainvisual .mv-img {
  padding-top: 2rem;
}

.mv-img img {
  width: 73%;
  margin-left: -2rem;
}

.mv-reserve {
  right: 3rem;
  bottom: 15rem;
  width: clamp(100px, 8.333vw, 160px);
}

.mv-reserve-txt {
  top: 42%;
  font-size: clamp(1rem, 1.15vw, 2.2rem);
}

.decor-dot-lg {
  top: 0;
  right: 33%;
  width: 21.4rem;
  height: 21.7rem;
}

.decor-dot-sm {
  top: 2%;
  left: 3.4rem;
  width: 7.6rem;
  height: 8rem;
}

.page-sub .decor-dot-sm {
  top: 3.4%;
  left: 23.8rem;
}

.decor-dot-medium {
  width: 19.4rem;
  height: 19.9rem;
}

.mainvisual .decor-dot-medium {
  right: 18%;
  bottom: 42%;
}

.subvisual .decor-dot-medium {
  right: 12%;
  bottom: -16%;
}

.page-sub .subvisual .decor-dot-medium {
  bottom: -6.6%;
}

/* ======================================
  サブビジュアル (subvisual)
====================================== */
.subvisual {
  padding-bottom: 6rem;
}

.subvisual .sv-decor {
  bottom: clamp(2rem, 3.125vw, 6rem);
  width: clamp(15rem, 23.125vw, 44.4rem);
  aspect-ratio: 444 / 271;
}

.subvisual .sv-layout {
  padding-top: clamp(1rem, 1.406vw, 2.7rem);
  padding-right: clamp(2rem, 6.823vw, 13.1rem);
}

.subvisual .sv-txt {
  width: 39.5%;
  margin-right: clamp(-35.7rem, -18.594vw, -10rem);
  margin-bottom: clamp(2rem, 3.125vw, 6rem);
  padding: clamp(.4rem, .391vw, .75rem) clamp(1.5rem, 1.563vw, 3rem);
  max-width: 70rem;
  min-height: 9rem;
  border-radius: clamp(.5rem, .521vw, 1rem);
}

.subvisual .sv-txt:before {
  left: 3rem;
  width: 15rem;
  height: 12.8rem;
}

.subvisual .sv-title {
  font-size: clamp(2.4rem, 2.604vw, 5rem);
}

.subvisual .sv-img {
  width: 57.5%;
  max-width: 103rem;
}

/*===============================================
  フッター (footer)
===============================================*/
.footer {
  padding: 1.8rem 0 10rem;
  box-shadow: 0 -4px 0 var(--color-cream);
}

.footer .footer-info {
  margin-right: 1rem;
}

.footer .footer-logo {
  width: 260px;
}

.footer .contact-tel {
  padding-top: 3.4rem;
}

.footer .footer-links {
  padding-top: 3rem;
}

.footer .footer-btn {
  padding: 1.8rem 3.5rem 1.8rem 3.3rem;
}

.footer .icn-more {
  margin-right: 2rem;
}

.footer .footer-sns {
  width: 40px;
  margin-left: 3rem;
}

.footer .footer-nav {
  padding-top: 3.7rem;
}

.footer .footer-menu-list:not(:last-child) {
  margin-right: 12.7rem;
}

.footer-menu-list a {
  line-height: 2;
  font-size: 1.8rem;
}

.footer-menu-item:nth-child(6),
.footer-menu-item:nth-child(7) {
  padding-left: 4rem;
}

.footer .footer-menu-list:last-child .footer-menu-item:nth-child(-n+2) {
  padding-left: 4rem;
}

.footer-menu-item:nth-child(8),
.footer-menu-item:nth-child(9) {
  padding-top: 1rem;
}

.footer-menu-item:nth-child(8) a,
.footer-menu-item:nth-child(9) a {
  font-size: 1.4rem;
}

.footer .footer-menu-list:last-child .footer-menu-item:nth-child(n+3) {
  padding-top: 1rem;
}

.footer .footer-menu-list:last-child .footer-menu-item:nth-child(n+3) a {
  font-size: 1.4rem;
}

.footer .footer-copy {
  padding-top: 3.4rem;
  font-size: 1.3rem;
  letter-spacing: 0.9px;
}

/*===============================================
  お気軽にお電話ください。(Top Contact) + Parallax
===============================================*/
.parallax {
  height: 78rem;
}

.contact-section {
  padding-top: 10rem;
}

.contact-section::before {
  top: -2.2rem;
  right: 48rem;
  width: 15rem;
  height: 12.8rem;
}

.contact-inner {
  margin-bottom: -18rem;
}

.contact-inner::after {
  top: 8rem;
  width: 10.2rem;
  height: 25.8rem;
}

.com-contact-ttl {
  margin-bottom: 0.7rem;
}

.contact-ttl-bl .com-bl-en {
  margin-left: 0.7rem;
}

.contact-info {
  margin-top: 1.8rem;
}

.phone-no {
  margin-bottom: 1rem;
  font-size: 4.2rem;
}

.phone-no::before {
  top: 54%;
  left: 1%;
}

.phone-sec .note {
  margin: -2rem 0 -1rem;
}

.business-info {
  margin-top: 0.7rem;
  gap: 1rem;
}

.business-info::after {
  top: -10.5rem;
  right: -29.5rem;
  width: 35.8rem;
  height: 30.4rem;
}

.business-info li {
  margin-bottom: 0.7rem;
  padding: 0.8rem 1rem 0.8rem 1.1rem;
}

.contact-inner {
  width: 83.333%;
  padding: 8.5rem 9.4rem 5.3rem;
  border-top-left-radius: 7.3rem;
  border-bottom-left-radius: 7.3rem;
}

.contact-text {
  margin: 3.8rem 0.5rem 0;
  font-size: 1.8rem;
}

.phone-sec {
  width: 32.7rem;
}

.phone-no a {
  padding: 0 0 0 4.3rem;
}

.phone-no::before {
  width: 3.1rem;
  height: 3.1rem;
}

.business-info {
  width: 28.7rem;
}

/*===============================================
  トップ (Top)
===============================================*/
/*気軽に通える、心地よい場所。(Intro)
-----------------------------*/
.top-intro {
  padding: 1.5rem 0 clamp(29.6rem, 61.67vw, 74rem);
}

.top-intro::before {
  top: clamp(-34.5rem, -28.75vw, -13.8rem);
  width: clamp(15.92rem, 33.17vw, 39.8rem);
  height: clamp(14.84rem, 30.92vw, 37.1rem);
}

.top-intro::after {
  top: -16.8rem;
  height: 17rem;
}

.top-intro .top-intro-bl {
  margin-top: -17rem;
}

.top-intro-img {
  width: 52rem;
  height: 46rem;
  margin: 21.5rem 8rem 0 -2rem;
}

.top-intro-img::before {
  top: clamp(29.6rem, 61.67vw, 74rem);
  right: clamp(11.2rem, 23.33vw, 28rem);
  width: clamp(15.2rem, 31.67vw, 38rem);
  height: clamp(10.4rem, 21.67vw, 26rem);
}

.top-intro-img::after {
  top: clamp(33.2rem, 69.17vw, 83rem);
  right: clamp(-17.5rem, -14.58vw, -7rem);
  width: clamp(14.8rem, 30.83vw, 37rem);
  height: clamp(5.36rem, 11.17vw, 13.4rem);
}

.top-intro-ct {
  width: 48rem;
}

.top-intro-ttl {
  margin-bottom: 2rem;
}

.top-intro-txt {
  margin-top: 5.6rem;
}

.top-intro-ct::before {
  bottom: clamp(-28.5rem, -23.75vw, -11.4rem);
  left: clamp(7rem, 14.58vw, 17.5rem);
  width: clamp(10.4rem, 21.67vw, 26rem);
  height: clamp(10.4rem, 21.67vw, 26rem);
}

.top-intro-ct::after {
  bottom: clamp(-1.5rem, -1.25vw, -0.6rem);
  left: clamp(16.8rem, 35vw, 42rem);
  width: clamp(14.32rem, 29.83vw, 35.8rem);
  height: clamp(12.16rem, 25.33vw, 30.4rem);
}

/*心地よさには、</br>理由があります。(Reason)
-----------------------------*/
.top-reason {
  padding-bottom: 30.5rem;
}

.top-reason::after {
  top: clamp(-6rem, -5vw, -2.4rem);
  width: clamp(12.2rem, 25.42vw, 30.5rem);
  height: clamp(14.84rem, 30.92vw, 37.1rem);
}

@media screen and (max-width: 1700px) {
  .top-reason::after {
    top: clamp(-38rem, -35.77vw, -17.16rem);
  }
}

.top-reason-bl {
  gap: 3rem;
}

.reason-ttl-bl {
  margin-right: -1.5rem;
}

.reason-ttl-bl::after {
  bottom: clamp(7.96rem, 16.58vw, 19.9rem);
  left: clamp(3.72rem, 7.75vw, 9.3rem);
  width: clamp(10.92rem, 22.75vw, 27.3rem);
  height: clamp(8.72rem, 18.17vw, 21.8rem);
}

.reason-ttl-bl .com-bl-en {
  margin-right: 0.6rem;
  padding-top: 33.3rem;
}

.top-reason-list {
  width: 82rem;
  padding-top: 9rem;
  gap: 6rem;
}

.top-reason-list::before {
  top: clamp(-11rem, -9.17vw, -4.4rem);
  left: clamp(-29rem, -24.17vw, -11.6rem);
  width: clamp(14.32rem, 29.83vw, 35.8rem);
  height: clamp(12.16rem, 25.33vw, 30.4rem);
}

.reason-item {
  width: 68.7rem;
}

.reason-item:last-child::before {
  bottom: clamp(-10.5rem, -8.75vw, -4.2rem);
  left: clamp(-10rem, -8.33vw, -4rem);
  width: clamp(4.56rem, 9.5vw, 11.4rem);
  height: clamp(4.6rem, 9.58vw, 11.5rem);
}

.reason-ico-img {
  width: 25rem;
  height: 20rem;
  margin-right: 8rem;
}

.reason-ico-img img {
  margin-top: 1rem;
}

.reason-item-ct {
  width: 38.5rem;
}

.reason-item-ttl {
  margin-bottom: 1.5rem;
  padding-left: 2.2rem;
  font-size: 2.8rem;
}

.reason-item-ttl::before {
  top: 1.4rem;
  left: -2.2rem;
  width: 2.2rem;
  height: 2.2rem;
}

/*あなたにぴったりのスタイルを。(Service)
-----------------------------*/
.top-service {
  padding-bottom: 31rem;
}

.top-service-border {
  width: min(95%, 182rem);
}

.top-service-border::before {
  height: 9rem;
}

.top-service-border::after {
  bottom: -2.5rem;
  height: 9rem;
}

.top-service-bl {
  padding: 12.3rem 0;
  gap: 5rem;
}

.top-service-bl::after {
  right: -19.5rem;
  bottom: clamp(-8rem, -7.53vw, -3.62rem);
  width: clamp(4.25rem, 8.84vw, 9.4rem);
  height: clamp(7.51rem, 15.61vw, 16.6rem);
}

.sub-service {
  padding: 19rem 0 20.4rem;
}

@media screen and (max-width: 1700px) {
  .top-service-bl::after {
    right: clamp(-19.5rem, 5.35vw, 3.82rem);
  }
}

.top-service-ttl {
  margin-bottom: 0.7rem;
}

.top-service-list {
  grid-template-columns: repeat(2, 50rem);
  column-gap: 8rem;
  row-gap: 6rem;
}

.top-service-item {
  height: 22rem;
  border-radius: 2rem 2rem 0;
}

.top-service-item::before {
  left: 2rem;
  width: 0.2rem;
  height: 14rem;
}

.top-service-item:hover::before {
  height: 16rem;
}

.top-service-item:nth-child(1)::after,
.top-service-item:nth-child(4)::after {
  width: 5rem;
  height: 5rem;
}

.top-service-item:nth-child(1):hover::after,
.top-service-item:nth-child(4):hover::after {
  width: 6rem;
  height: 6rem;
}

.top-service-item:nth-child(2)::after,
.top-service-item:nth-child(3)::after {
  width: 5rem;
  height: 5rem;
}

.top-service-item:nth-child(2):hover::after,
.top-service-item:nth-child(3):hover::after {
  width: 6rem;
  height: 6rem;
}

.top-service-item:nth-child(3) .service-item-txt {
  padding: 6rem 7rem;
}

.service-item-txt {
  padding: 7rem;
}

.service-item-ttl {
  margin-bottom: 1rem;
  font-size: 3.4rem;
}

/*似合うが見つかる スタイル集 (Gallery)
-----------------------------*/
.top-gly::before {
  top: -16.8rem;
  height: 17rem;
}

.top-gly-bl,
.haircut-gallery .gallery {
  display: flex;
  position: relative;
  flex-direction: column;
}

.top-gly-bl {
  padding: 10rem 0;
}

.gallery {
  padding-top: 10rem;
}

.top-gly-bl::before,
.gallery::before,
.haircut-gallery::before {
  position: absolute;
  top: clamp(8.81rem, 18.35vw, 19.5rem);
  width: clamp(3.44rem, 7.15vw, 7.6rem);
  height: clamp(3.62rem, 7.53vw, 8rem);
  content: '';
}

.top-gly-bl::before,
.gallery::before {
  left: -38.5rem;
}

.haircut-gallery::before {
  left: 3.4rem;
}

.top-gly-bl::after,
.gallery::after,
.haircut-gallery::after {
  position: absolute;
  top: 31rem;
  width: clamp(8.77rem, 18.26vw, 19.4rem);
  height: clamp(9.04rem, 18.82vw, 20rem);
  content: '';
}

.top-gly-bl::after {
  right: -29.3rem;
}

.haircut-gallery::after {
  right: 12.6rem;
}

.gly-ttl-bl {
  margin-bottom: 9.5rem;
}

.gly-ttl-bl::after {
  top: clamp(-26rem, -24.47vw, -11.75rem);
  right: clamp(12.2rem, 25.41vw, 27rem);
  width: clamp(9.67rem, 20.14vw, 21.4rem);
  height: clamp(9.81rem, 20.42vw, 21.7rem);
}

.top-gly-ttl {
  margin-bottom: 1rem;
}

.top-gly-ttl em::before {
  top: -6rem;
  left: 35%;
}

.top-gly-list {
  margin-bottom: 6rem;
  gap: 6rem;
}

.top-gly-list .top-gly-item {
  width: 32rem;
}

.top-gly-item:nth-child(2) {
  margin-top: -4rem;
}

.gly-item-img {
  margin-bottom: 3rem;
}

.gly-item-img img {
  width: 100%;
  border-radius: 2rem;
}

.gly-item-ttl {
  margin-bottom: 0.3rem;
  padding: 0 1.5rem 1rem 2.5rem;
  font-size: 1.8rem;
}

.gly-item-tags {
  gap: 1rem;
}

.gly-item-tags span {
  padding: 0.2rem 0.7rem;
}

.gly-list-link {
  padding: 2rem 9.8rem;
  font-size: 2.2rem;
  border-radius: 4rem;
}

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

  .top-gly-bl::before,
  .gallery::before {
    left: clamp(-38.5rem, -6.24vw, -7.4rem);
  }

  .top-gly-bl::after,
  .gallery::after {
    top: clamp(14.01rem, 15.18vw, 17rem);
    right: clamp(-29.3rem, -7.58vw, -8.24rem);
  }
}

@media screen and (min-width: 768px) and (max-width: 1700px) {
  .haircut-gallery::after {
    --dot-w: clamp(9rem, 11.4vw, 19.4rem);
    width: var(--dot-w);
    height: calc(var(--dot-w) * 1.031);
    right: max(calc(50vw - 54rem - var(--dot-w) + 1rem), 0.5rem);
  }
}

@media screen and (min-width: 768px) and (max-width: 1300px) {
  .haircut-gallery::after {
    top: clamp(14rem, 15.18vw, 17rem);
    right: 2rem;
  }
}

/*店舗情報 (Information)
-----------------------------*/
.top-info-bl {
  padding: 19.5rem 0 20rem;
  gap: 8.5rem;
}

.top-info-bl::before {
  top: clamp(26.21rem, 54.58vw, 58rem);
  left: -39rem;
  width: clamp(3.44rem, 7.15vw, 7.6rem);
  height: clamp(3.62rem, 7.53vw, 8rem);
}

.top-info-bl::after {
  right: -30rem;
  bottom: clamp(20.34rem, 42.35vw, 45rem);
  width: clamp(8.77rem, 18.26vw, 19.4rem);
  height: clamp(9.04rem, 18.82vw, 20rem);
}

.salon-info-ct {
  gap: 3rem;
}

.info-ttl-bl::before {
  right: clamp(-8rem, -7.53vw, -3.62rem);
  bottom: clamp(-12rem, -11.29vw, -5.42rem);
  width: clamp(21.01rem, 43.76vw, 46.5rem);
  height: clamp(16.76rem, 34.92vw, 37.1rem);
}

.info-ttl-bl::after {
  top: clamp(3.61rem, 7.53vw, 8rem);
  right: -38rem;
  width: clamp(12.33rem, 25.69vw, 27.3rem);
  height: clamp(9.85rem, 20.52vw, 21.8rem);
}

.top-info-ttl {
  margin-right: -1.5rem;
}

.info-ttl-bl .com-bl-en {
  padding-top: 7.5rem;
}

.salon-info-tbl {
  width: 58rem;
  margin-top: 10.5rem;
  padding: 5.8rem 5.2rem 9.1rem;
  border-radius: 2rem;
}

.salon-info-tbl::after {
  top: clamp(-6.5rem, -6.12vw, -2.94rem);
  right: clamp(-22.5rem, -21.18vw, -10.17rem);
  width: clamp(9.67rem, 20.14vw, 21.4rem);
  height: clamp(9.81rem, 20.42vw, 21.7rem);
}

.salon-info-tbl tbody {
  gap: 1.5rem;
}

.salon-info-tbl tr {
  gap: 5.5rem;
}

.salon-info-tbl th {
  width: 10rem;
}

.salon-map {
  height: 40rem;
  max-width: 1080px;
}

.salon-map::before {
  top: 16rem;
  left: -30rem;
  width: clamp(8.95rem, 18.64vw, 19.8rem);
  height: clamp(5.96rem, 12.42vw, 13.2rem);
}

.salon-map iframe {
  border-radius: 20px;
}

@media screen and (max-width: 1700px) {
  .top-info-bl::before {
    left: clamp(-39rem, -6.71vw, -7.62rem);
  }

  .top-info-bl::after {
    right: clamp(-30rem, -22.24vw, -8.56rem);
  }

  .info-ttl-bl::after {
    right: clamp(-38rem, -25.76vw, -12.17rem);
  }

  .salon-map::before {
    top: -12rem;
    left: -6%;
  }
}

/*ブログ (Blog)
-----------------------------*/
.top-blog {
  margin-top: -0.2rem;
}

.top-blog-bl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11rem 0 25rem;
  gap: 10.2rem;
}

.blog-detail .top-blog-bl {
  padding: 3rem 0 0;
}

.blog-ttl-bl {
  margin-bottom: 5rem;
}

.top-blog-ttl {
  margin-bottom: 1rem;
}

.top-blog-link {
  font-size: var(--font-size-h3-en);
  letter-spacing: 0.3rem;
  transition: all 0.3s ease-in-out;
  border-bottom: 0.2rem solid var(--color-orange);
}

.top-blog-link em {
  margin-right: 1rem;
}

.top-blog-list li a {
  padding: 2rem 3rem;
  gap: 3rem;
}

.top-blog-list .date {
  padding: 2rem 2rem 2rem 0;
  font-size: 1.8rem;
}

.blog-item-ct {
  flex: 1;
}

.blog-item-tags {
  margin-bottom: 1.4rem;
  gap: 1rem;
}

.blog-item-tags span {
  padding: 0.2rem 0.7rem;
}

/*===============================================
  ホワイトニング ( teeth whitening )
===============================================*/
/*こんな方におすすめ (recommend section)
-----------------------------*/
.recommend-section {
  padding-bottom: 18rem;
}

.recommend-card {
  max-width: 25.5rem;
}

.recommend-card-list {
  display: flex;
  justify-content: space-between;
}

/*セルフホワイトニングについて (whitening section)
-----------------------------*/
.whitening-section {
  padding-bottom: 22rem;
}

.whitening-content {
  display: flex;
  justify-content: space-between;
}

.whitening-img {
  width: 45.5%;
}

.whitening-description {
  width: 50%;
  padding-left: 2rem;
}

.gallery-filter {
  margin: 5.6rem 0 10rem 0;
}

/*メニュー (menu section)
-----------------------------*/
.menu-section {
  padding-bottom: 21rem;
}

.menu-section::before {
  top: -12rem;
  left: 47rem;
  width: 36.8rem;
  height: 13rem;
}

.menu-section .inner::before {
  bottom: -12rem;
  left: -11rem;
  width: 11.7rem;
  height: 11.7rem;
}

/*施術事例 (cases section)
-----------------------------*/
.cases-section {
  margin-bottom: 10rem;
}

.cases-section::before {
  position: absolute;
  top: 17rem;
  right: 12rem;
  z-index: 1;
  width: 21rem;
  height: 21rem;
  background: url('../img/common/img_dot_medium.png') no-repeat center;
  background-size: contain;
  content: '';
  pointer-events: none;
  animation: float 5s infinite ease-in-out;
}

/*===============================================
  めいさいこうもく (Detail Items)
===============================================*/
.detail-images-wrap {
  display: flex;
  justify-content: space-between;
}

.detail-before-img::after {
  position: absolute;
  top: 52%;
  right: -11.5rem;
  width: 13rem;
  height: 8rem;
  content: '';
  transform: translateY(-50%);
}

.detail-before-img::before,
.detail-after-img::before {
  padding: 0.1rem 4rem 1.5rem 4rem;
}

/*===============================================
  ヘアカット (haircut)
===============================================*/
.com-h3-jp {
  line-height: 0.9;
}

.haircut-card {
  margin-top: 6rem;
}

.haircut .men {
  padding-bottom: 5.7rem;
}

.haircut .women {
  padding-bottom: 10rem;
}

.haircut-card .card-item {
  width: 28%;
  margin-bottom: 4rem;
}

.haircut-card .card-item:nth-child(3n + 2) {
  padding-left: 2.2rem;
}

.card-img {
  max-width: 26rem;
}

.card-title {
  padding-left: 4.1rem;
  font-size: 2.2rem;
}

.haircut-menu .menu::before {
  top: 0.2rem;
  left: 5.7%;
  width: clamp(33rem, 19vw, 36.6rem);
}

.haircut-menu>.menu {
  padding-bottom: 10rem;
}

.haircut-menu .menu-title {
  padding-top: 14.2rem;
}

.menu-table {
  margin-top: 3rem;
  padding-bottom: 4rem;
}

.menu-table>* {
  margin-bottom: 4.4rem;
}

.menu-group {
  border-radius: 1.8rem;
}

.menu-group-decoration {
  position: absolute;
  right: 94%;
  bottom: 26rem;
  z-index: 0;
  width: clamp(200px, 18.542vw, 356px);
  background: url("../img/men-haircut/img_menu_circles.png") no-repeat center / contain;
  aspect-ratio: 356 / 335;
  pointer-events: none;
  animation: float 5s infinite ease-in-out;
}

@media (max-width: 1500px) {
  .menu-group-decoration {
    right: 96%;
    bottom: 36rem;
    width: clamp(160px, 15vw, 240px);
  }
}

@media (max-width: 1400px) {
  .menu-group-decoration {
    bottom: 39rem;
  }
}

@media (max-width: 1300px) {
  .menu-group-decoration {
    right: 98%;
    width: clamp(120px, 12vw, 170px);
  }
}

.menu-cat-decoration {
  bottom: -2.5rem;
}

.menu-group-title {
  padding: 1.4rem 2rem;
  font-size: 2.8rem;
}

.menu-group table {
  width: calc(100% - 12rem);
  font-size: 1.6rem;
}

.menu-group th,
.menu-group td {
  padding: 1rem 0 1.4rem 0;
}

.haircut-gallery .gallery-card {
  align-items: start;
  margin-top: 7.9rem;
}

.gallery-item {
  width: 30%;
  min-width: 0;
}

.gallery-item:nth-child(2):not(:last-child) {
  margin-top: -4rem;
}

.gallery-item-image {
  border-radius: 2rem;
}

.gallery-item-caption {
  margin-top: 2.6rem;
  padding-left: 2rem;
  font-size: 1.8rem;
}

.gallery-item-tags {
  justify-content: flex-end;
}

.kid-haircut .kid-package {
  padding-top: 5.8rem;
}

.baby-content {
  padding-left: 9rem;
}

.baby-content h4 {
  font-size: clamp(2rem, 2vw, 2.8rem);
}

.baby-content p {
  font-size: 1.6rem;
}

.baby-img::before {
  top: -14.6rem;
  left: -10rem;
  width: 19.4rem;
}

.baby-signature {
  font-size: 1.8rem;
}
/*===============================================
  お問い合わせ
===============================================*/
.contact-container {
  padding: 0 0 15rem;
}

.contact-container .com-title {
  margin-bottom: 2rem;
}

.contact-description {
  margin-bottom: 7rem;
}

.contact-card {
  max-width: 79rem;
  min-height: 12rem;
  margin: 0 auto 20.5rem;
  padding: 5.5rem 7rem;
  border-radius: 1.5rem;
}

.ph-contact .ph-no {
  padding-left: 2.5rem;
}

/*===============================================
  プライバシーポリシー (Privacy)
===============================================*/
.privacy-section {
  padding-bottom: 10rem;
}

.privacy-container {
  padding: 8rem 0;
  margin-inline: auto;
}

.privacy-container .com-title {
  margin-top: 4rem;
}

.privacy-content {
  line-height: 1.8;
  margin-top: 4rem;
}

.privacy-block+.privacy-block {
  margin-top: 6rem;
}

.privacy-title {
  line-height: 1.5;
  margin-bottom: 2rem;
}

.privacy-text {
  margin: 0;
}

.privacy-text+.privacy-text {
  margin-top: 2rem;
}

.privacy-list {
  margin: 2rem 0 0;
  padding-left: 2em;
}

.privacy-list li+li {
  margin-top: 0.8rem;
}

/*===============================================
  サイトマップ (Sitemap)
===============================================*/
.sitemap-list-item {
  margin-bottom: 1.2rem;
}

.sitemap-list-item:last-of-type {
  margin-bottom: 0;
}

.sitemap-list-link {
  padding: 1em;
}

/*===============================================
  パンくずリスト (Breadcrumb)
===============================================*/
.breadcrumb {
  padding-block: calc(2.25rem - 0.5em);
}

.breadcrumb-list {
  width: 108rem;
}

.breadcrumb-item::after {
  margin-inline: 1em;
}

/*===============================================
  404エラー
===============================================*/
.error-message .inner {
  padding: 0 0 20rem 0;
}