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

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

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

.inner {
  width: 90%;
  margin: 0 auto;
}

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

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

/* ======================================
  com-btn
====================================== */
.com-btn {
  font-size: 1.6rem;
  margin-inline: auto;
}

.com-btn-site,
.com-btn-ig {
  position: relative;
  letter-spacing: 1px;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}

.com-btn-site::before,
.com-btn-ig::before {
  width: 20px;
}

.com-btn-site::before {
  display: block;
  background: url("../img/common/icon_more.png") no-repeat center / contain;
  content: "";
  aspect-ratio: 1;
}

.com-btn-ig::before {
  display: block;
  background: url("../img/common/icon_instagram.png") no-repeat center / contain;
  content: "";
  aspect-ratio: 1;
}

.com-btn-site span::before,
.com-btn-ig span::before {
  position: absolute;
}

.com-tel {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  color: var(--color-orange);
  font-size: 3.6rem;
  font-weight: 500;
  letter-spacing: 0;
  column-gap: 1rem;
}

.com-tel::before {
  display: block;
  height: 3rem;
  background: url("../img/common/icon_phone.png") no-repeat center / contain;
  content: "";
  aspect-ratio: 39 / 42;
}

.com-tel span {
  letter-spacing: 2px;
}

/* ====================================== 
  contact-tel
====================================== */
.contact-tel-num {
  padding-left: 2.2rem;
  font-size: 2.4rem;
}

.contact-tel-num::before {
  top: 50%;
  width: 1.7rem;
  height: 1.8rem;
}

.contact-tel-txt {
  margin-top: -4px;
  padding-left: 0.8rem;
}

/*===============================================
  sec-wave
===============================================*/
.sec-wave-top {
  padding-top: clamp(10rem, 5.217rem + 12.755vw, 15rem);
}

.sec-wave-bottom {
  padding-bottom: 5rem;
}

.sec-wave-top::before,
.sec-wave-bottom::before {
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
}

.sec-wave-top.sec-wave-bottom::before {
  -webkit-mask-size: 100% auto, 100% auto;
  mask-size: 100% auto, 100% auto;
}

.sec-wave-top::after {
  top: 12rem;
  right: 3rem;
  width: 14rem;
  height: 13.2rem;
}

.sec-wave-top .com-title {
  position: relative;
  top: -4rem;
}

/* ======================================
  ページトップ (pagetop)
====================================== */
#pagetop {
  right: calc(1rem + clamp(7rem, 18vw, 9rem) / 2 - 2.5rem);
  bottom: 1rem;
  width: 5rem;
  font-size: 1.6rem;
  text-align: center;
  white-space: nowrap;
  row-gap: 0.5rem;
}

#pagetop img {
  width: 3rem;
  -o-object-fit: contain;
  object-fit: contain;
}

/*===============================================
  ヘッダー (header)
===============================================*/
.header .header-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 90%;
  height: 8rem;
  margin: 0 auto;
}

.header .header-logo {
  width: 17.4rem;
}

/* ======================================
  メインビジュアル (mainvisual)
====================================== */
.visual {
  padding-bottom: 6rem;
}

.mainvisual {
  padding: 2rem 0 6rem;
}

.mainvisual .mv-vertical {
  display: none;
}

.mainvisual::before {
  position: absolute;
  top: calc(2rem + 31vw);
  right: 0;
  z-index: 2;
  width: 46vw;
}

.mainvisual .mv-layout {
  flex-direction: column;
  width: 90%;
  margin: 0 auto;
}

.mainvisual .mv-img {
  flex: none;
  order: 1;
  padding-top: 0;
}

.mv-img img {
  display: block;
  width: 100%;
  height: auto;
  margin-left: 0;
}

.mainvisual .mv-txt {
  order: 2;
  padding-top: 1.6rem;
  padding-bottom: 0;
  text-align: left;
}

.mainvisual .mv-title span {
  margin-bottom: .36em;
  padding: .15em .55em .3em;
  font-size: clamp(2rem, 5.6vw, 4.2rem);
  letter-spacing: .1em;
}

.mainvisual .mv-name {
  margin: .9em 0 0;
  padding: 0 0 0 1.75em;
  font-size: clamp(1.6rem, 4.3vw, 3rem);
  letter-spacing: .08em;
}

.mainvisual .mv-name::before {
  display: block;
  left: 0;
}

.mainvisual .mv-name::after {
  bottom: -2.4em;
  left: calc(100% + -0.25em);
  z-index: 2;
  width: clamp(6.4rem, 17vw, 11rem);
  transform: none;
}

.mv-reserve {
  top: auto;
  right: 1rem;
  bottom: 9rem;
  left: auto;
  width: clamp(7rem, 18vw, 9rem);
  margin: 0;
}

.mv-reserve-txt {
  top: 38%;
  font-size: clamp(1rem, 2.7vw, 1.3rem);
  letter-spacing: .1em;
}

.decor-dot-lg {
  top: 0;
  right: 20%;
  z-index: 0;
  width: clamp(10rem, 26vw, 16rem);
  aspect-ratio: 21.4 / 21.7;
}

.decor-dot-sm {
  top: calc(2rem + 28vw);
  left: 6vw;
  z-index: 2;
  width: clamp(5rem, 14vw, 8rem);
  aspect-ratio: 7.6 / 8;
}

.decor-dot-medium {
  top: auto;
  right: 14%;
  bottom: 1rem;
  z-index: 0;
  width: clamp(9rem, 24vw, 15rem);
  height: clamp(9rem, 24vw, 15rem);
}


.mainvisual .decor-dot-medium {
  top: auto;
  bottom: 1rem;
}

.subvisual .decor-dot-medium {
  bottom: -3rem;
}

/* ======================================
  サブビジュアル (subvisual)
====================================== */
.subvisual {
  padding: 2rem 0 7rem;
}

.subvisual .sv-decor {
  bottom: -34%;
  left: -6%;
  width: 14rem;
  aspect-ratio: 444 / 271;
}

.subvisual .sv-layout {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 90%;
  margin: 0 auto;
  padding: 0;
}

.subvisual .sv-img {
  order: 1;
  width: 100%;
  max-width: none;
}

.subvisual .sv-txt {
  order: 2;
  width: 60%;
  margin-top: -5rem;
  padding: .4rem 1.2rem;
  max-width: none;
  min-height: 4.4rem;
  border-radius: .6rem;
}

.subvisual .sv-txt:before {
  left: 1.5rem;
  width: 4.5rem;
  aspect-ratio: 150 / 128;
}

.subvisual .sv-title {
  line-height: 1.4;
  font-size: 2.2rem;
}

/*===============================================
  フッター (footer)
===============================================*/
.footer {
  padding: 4rem 0 6rem;
}

.inner {
  flex-direction: column;
  align-items: center;
}

.footer .footer-info {
  margin-right: 0;
}

.footer .footer-logo {
  width: 20rem;
  margin: 0 auto;
}

.footer .contact-tel {
  line-height: 1.7;
  padding-top: 2.5rem;
  justify-items: center;
}

.footer .footer-links {
  justify-content: center;
  padding-top: 2rem;
}

.footer .footer-btn {
  padding: 1.2rem 2rem;
}

.footer .footer-btn img {
  width: 1.5rem;
  height: 1.5rem;
}

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

.footer .footer-sns {
  width: 3.2rem;
  margin-left: 2rem;
}

.footer .footer-nav {
  justify-content: center;
  line-height: 1.75;
  padding-top: 4rem;
}

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

.footer-menu-list a {
  font-size: 1.6rem;
}

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

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

.footer .footer-copy {
  padding-top: 3rem;
  text-align: center;
}

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

.contact-section {
  justify-content: flex-end;
  padding-top: 5rem;
}

.contact-section::before {
  top: -2.5rem;
  right: 12%;
  z-index: 1;
  width: clamp(8rem, 20vw, 11rem);
  height: clamp(6.8rem, 17vw, 9.4rem);
}

.contact-inner {
  width: 92%;
  margin-bottom: -10rem;
  padding: 3.5rem 2.2rem 3rem 2.5rem;
  border-top-left-radius: 4rem;
  border-bottom-left-radius: 4rem;
}

.contact-inner::after {
  top: 3rem;
  right: 0;
  width: clamp(5rem, 13vw, 7rem);
  height: clamp(12.6rem, 33vw, 17.7rem);
  opacity: 0.25;
}

.com-contact-ttl {
  margin-bottom: 0.5rem;
  font-size: clamp(2rem, 5.5vw, 2.6rem);
}

.contact-ttl-bl .com-bl-en {
  margin-left: 0;
  font-size: 1.4rem;
}

.contact-text {
  line-height: 1.8;
  margin: 1.5rem 0 0;
  font-size: 1.4rem;
}

.contact-info {
  flex-direction: column;
  margin-top: 2rem;
  gap: 1.5rem;
}

.phone-sec {
  width: 100%;
}

.phone-no {
  margin-bottom: 0.5rem;
  font-size: clamp(2.4rem, 6.8vw, 3.2rem);
}

.phone-no a {
  display: inline-block;
  padding: 0 0 0 3.2rem;
}

.phone-no::before {
  top: 50%;
  left: 0;
  width: 2.2rem;
  height: 2.2rem;
}

.phone-sec .note {
  margin: 0;
  text-align: left;
}

.business-info {
  width: 100%;
  margin-top: 0.5rem;
  gap: 0.6rem;
}

.business-info li {
  margin-bottom: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 1.3rem;
}

.business-info::after {
  top: -4rem;
  right: -2rem;
  width: 14rem;
  height: 12rem;
  opacity: 0.5;
}

/*===============================================
  トップ (Top)
===============================================*/
/*Top Common
-----------------------------*/
.top .com-bl-ttl {
  line-height: 1.4;
  font-size: clamp(2.4rem, 6.4vw, 3.2rem);
  letter-spacing: 0.15rem;
}

.top .com-bl-en {
  font-size: 1.4rem;
  letter-spacing: 0.15rem;
}

/*気軽に通える、心地よい場所。(Intro)
-----------------------------*/
.top-intro {
  padding: 3rem 0 15rem;
}

.top-intro::before {
  top: -4rem;
  left: -2rem;
  width: clamp(11rem, 28vw, 16rem);
  height: clamp(10rem, 26vw, 15rem);
}

.top-intro::after {
  top: calc(-1 * clamp(3.5rem, 8.85vw, 6rem) + 1px);
  height: clamp(3.5rem, 8.85vw, 6rem);
  background-size: 100% 100%;
}

.top-intro .top-intro-bl {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  gap: 3.5rem;
}

.top-intro-img {
  width: 100%;
  height: auto;
  margin: 2rem auto 0;
  max-width: 38rem;
}

.top-intro-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2rem;
}

.top-intro-img::before {
  top: auto;
  right: auto;
  bottom: -2rem;
  left: -1rem;
  z-index: 1;
  width: clamp(8rem, 22vw, 12rem);
  height: clamp(5.5rem, 15vw, 8.2rem);
}

.top-intro-img::after {
  top: auto;
  right: -1rem;
  bottom: -2.5rem;
  z-index: 2;
  width: clamp(11rem, 28vw, 15rem);
  height: clamp(4rem, 10vw, 5.5rem);
}

.top-intro-ct {
  width: 100%;
  margin-top: 1rem;
}

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

.top-intro-txt {
  line-height: 2;
  margin-top: 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
}

.top-intro-ct::before {
  right: 0;
  bottom: -9rem;
  left: auto;
  width: clamp(7rem, 18vw, 10rem);
  height: clamp(7rem, 18vw, 10rem);
  opacity: 0.9;
}

.top-intro-ct::after {
  right: -2rem;
  bottom: 2rem;
  left: auto;
  width: clamp(8rem, 20vw, 12rem);
  height: clamp(7rem, 17vw, 10rem);
  opacity: 0.5;
  pointer-events: none;
}

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

.top-reason::after {
  top: -4rem;
  right: -2rem;
  width: clamp(10rem, 26vw, 15rem);
  height: clamp(12rem, 31vw, 18rem);
}

.top-reason-bl {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.reason-ttl-bl {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-right: 0;
}

.top-reason-ttl {
  line-height: 1.4;
  margin-bottom: 0.5rem;
  writing-mode: horizontal-tb;
}

.reason-ttl-bl .com-bl-en {
  margin-right: 0;
  padding-top: 0;
  writing-mode: horizontal-tb;
}

.reason-ttl-bl::after {
  top: 15rem;
  right: -8rem;
  bottom: auto;
  left: auto;
  z-index: -1;
  width: clamp(9rem, 22vw, 13rem);
  height: clamp(7rem, 18vw, 10rem);
  opacity: 0.7;
}

.top-reason-list {
  width: 100%;
  padding-top: 0;
  gap: 6rem;
}

.top-reason-list::before {
  top: -2rem;
  left: -2rem;
  width: clamp(9rem, 22vw, 14rem);
  height: clamp(7.5rem, 18vw, 11rem);
  opacity: 0.6;
}

.reason-item {
  display: flex;
  align-items: center;
  align-self: auto !important;
  width: 100%;
}

.reason-ico-img {
  width: clamp(12rem, 30vw, 16rem);
  height: auto;
  margin-right: 2rem;
  margin-bottom: 1.5rem;
}

.reason-ico-img img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.reason-item-ct {
  width: 100%;
}

.reason-item-ttl {
  line-height: 1.45;
  margin-bottom: 1.2rem;
  padding-left: 2.2rem;
  font-size: clamp(1.8rem, 4.8vw, 2.2rem);
}

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

.reason-item-txt {
  line-height: 1.9;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
}

.reason-item:last-child::before {
  bottom: -10.5rem;
  left: 0;
  width: clamp(6rem, 16vw, 8rem);
  height: clamp(6rem, 16vw, 8rem);
}

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

.top-service-border {
  width: 95%;
  margin: 0 auto;
}

.top-service-border::before {
  top: 1rem;
  height: clamp(2.5rem, 6vw, 4.5rem);
  background-size: 100% 100%;
}

.top-service-border::after {
  bottom: 0;
  height: clamp(2.5rem, 6vw, 4.5rem);
  background-size: 100% 100%;
}

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

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

.top-service-bl::after {
  right: 0.5rem;
  bottom: -3.5rem;
  width: clamp(5rem, 12vw, 7.5rem);
  height: clamp(9rem, 21vw, 13rem);
}

.top-service-list {
  padding: 5rem 0 8rem;
  grid-template-columns: 1fr;
  row-gap: 2rem;
}

.top .top-service-list {
  width: 100%;
}

.top-service-item {
  height: 16rem;
  border-radius: 1.6rem 1.6rem 0;
}

.top-service-item::before {
  left: 1.8rem;
  width: 0.2rem;
  height: 9rem;
}

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

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

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

.service-item-txt {
  padding: 3.8rem 2rem 3.8rem 3.5rem;
}

.service-item-ttl {
  margin-bottom: 0.4rem;
  font-size: clamp(2rem, 5.5vw, 2.6rem);
}

.service-item-txt .en {
  font-size: 1.2rem;
  letter-spacing: 0.15rem;
}

/*似合うが見つかる スタイル集 (Gallery)
-----------------------------*/
.top-gly::before {
  top: calc(-1 * clamp(3.5rem, 8.85vw, 6rem) + 1px);
  height: clamp(3.5rem, 8.85vw, 6rem);
  background-size: 100% 100%;
}

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

.top-gly-bl::before,
.haircut-gallery:before {
  top: 2rem;
  left: -1rem;
  width: clamp(4rem, 10vw, 6rem);
  height: clamp(4rem, 10vw, 6rem);
}

.top-gly-bl::after,
.haircut-gallery:after {
  top: auto;
  right: -2rem;
  bottom: 8rem;
  width: clamp(7rem, 18vw, 10rem);
  height: clamp(7rem, 18vw, 10rem);
}

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

.gly-ttl-bl::after {
  top: -3rem;
  right: -1rem;
  width: clamp(7rem, 18vw, 10rem);
  height: clamp(7rem, 18vw, 10rem);
}

.top-gly-ttl {
  margin-bottom: 0.8rem;
  letter-spacing: -0.1rem;
}

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

.top-gly-list {
  flex-direction: column;
  align-items: center;
  margin-bottom: 3.5rem;
  gap: 3rem;
}

.top-gly-list .top-gly-item {
  width: 100%;
}

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

.gly-item-img {
  height: auto;
  overflow: hidden;
  margin-bottom: 1.2rem;
  aspect-ratio: 1 / 1;
  border-radius: 1.2rem;
}

.gly-item-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gly-item-ttl {
  line-height: 1.6;
  margin-bottom: 0.6rem;
  padding: 0.6rem 1rem 0.6rem 1.6rem;
  font-size: 1.6rem;
}

.gly-item-tags {
  justify-content: flex-start;
  gap: 0.8rem;
}

.gly-item-tags span {
  padding: 0.2rem 0.6rem;
  font-size: 1.2rem;
  border-radius: 0.3rem;
}

.gly-list-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: min(100%, 28rem);
  padding: 1.4rem 4rem;
  font-size: 1.6rem;
  text-align: center;
  border-radius: 999px;
}

/*店舗情報 (Information)
-----------------------------*/
.top-info {
  padding-top: 0;
}

.top-info-bl {
  padding: 6rem 0;
  gap: 4rem;
}

.top-info-bl::before {
  top: 6rem;
  left: -1rem;
  width: clamp(4rem, 10vw, 6rem);
  height: clamp(4rem, 10vw, 6rem);
}

.top-info-bl::after {
  right: -2rem;
  bottom: 3rem;
  width: clamp(7rem, 18vw, 10rem);
  height: clamp(7rem, 18vw, 10rem);
}

.salon-info-ct {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2.5rem;
}

.info-ttl-bl {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.top-info-ttl {
  margin-right: 0;
  margin-bottom: 0.5rem;
  writing-mode: horizontal-tb;
}

.info-ttl-bl .com-bl-en {
  padding-top: 0;
  writing-mode: horizontal-tb;
}

.info-ttl-bl::before {
  top: -2.5rem;
  right: 0;
  bottom: auto;
  width: clamp(11rem, 28vw, 15rem);
  height: clamp(9rem, 22vw, 12rem);
  opacity: 0.85;
}

.info-ttl-bl::after {
  display: none;
}

.salon-info-tbl {
  width: 100%;
  margin-top: 1rem;
  padding: 3rem 2rem;
  border-radius: 1.6rem;
}

.salon-info-tbl::after {
  top: -2.5rem;
  right: 1rem;
  width: clamp(6rem, 16vw, 8.5rem);
  height: clamp(6rem, 16vw, 8.5rem);
}

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

.salon-info-tbl tr {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}

.salon-info-tbl th {
  width: 9.5rem;
  font-size: 1.4rem;
  text-align: left;
  min-width: 9.5rem;
}

.salon-info-tbl td {
  line-height: 1.6;
  font-size: 1.4rem;
}

.salon-map {
  height: 25rem;
  border-radius: 1.6rem;
}

.salon-map::before {
  top: -3rem;
  right: 1.5rem;
  left: auto;
  z-index: 2;
  width: clamp(7rem, 18vw, 9.5rem);
  height: clamp(4.6rem, 12vw, 6.3rem);
}

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

/*ブログ (Blog)
-----------------------------*/
.top-blog-bl {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 5rem 0 10rem;
  gap: 2.5rem;
}

.left-blog-bl {
  width: 100%;
}

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

.top-blog-list {
  flex: none;
  width: 100%;
  gap: 1.5rem;
}

.top-blog-list li a {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  gap: 1.5rem;
  border-radius: 1.2rem;
}

.top-blog-list .date {
  padding: 0.5rem 1.2rem 0.5rem 0;
  font-size: 1.3rem;
  white-space: nowrap;
  border-right: 2px solid var(--color-yellow);
}

.blog-item-ct {
  flex: 1;
  min-width: 0;
}

.blog-item-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
  gap: 0.6rem;
}

.blog-item-tags span {
  padding: 0.2rem 0.6rem;
  font-size: 1.3rem;
  border-radius: 0.3rem;
}

.blog-item-ttl {
  line-height: 1.5;
  font-size: 1.3rem;
}

.top-blog-link.pc-none {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem auto 0;
  padding: 0.8rem 1.5rem;
  color: var(--color-orange);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.2rem;
  border-bottom: 0.2rem solid var(--color-orange);
}

.top-blog-link.pc-none em {
  margin-right: 0.8rem;
}

.blog-list {
  gap: 3rem;
  padding-bottom: 8rem;
}

.blog-list li a {
  flex-direction: column;
  align-items: stretch;
  gap: 2rem;
}

.left-container {
  width: 100%;
}

.blog-left {
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
}

.blog-list .date {
  min-width: 0;
  padding: 0;
  font-size: 1.3rem;
}

.blog-list .blog-item-ct {
  max-width: none;
}

.blog-right {
  width: 100%;
}

.blog-thumb {
  width: 100%;
  max-width: 12rem;
  height: 12rem;
  margin: 0 auto;
}

.blog-list .blog-item-tags {
  margin-bottom: 0;
}

/* =========================================================
   ギャラリー 一覧 ( Gallery )
========================================================= */
.gallery-section .com-title {
  margin-bottom: 3.5rem;
}

.gallery-filter {
  margin: 0 0 4rem 0;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.gallery-filter__button {
  min-height: 4.6rem;
}

.gallery-list {
  grid-template-columns: 1fr;
  column-gap: 1.5rem;
  row-gap: 3.5rem;
}

.gallery-card {
  margin-bottom: 0rem;
}

.gallery-card__body {
  padding-top: 1.4rem;
}

.gallery-card__tags {
  margin-top: 0.8rem;
  padding-left: 1rem;
  gap: 0.4rem;
}

.gallery-pagination {
  flex-wrap: wrap;
  margin-top: 2rem;
  gap: 0.8rem;
}

.gallery-pagination__button {
  width: 4rem;
  font-size: 1.4rem;
  min-height: 4rem;
}

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

.recommend-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 7rem auto;
  text-align: center;
}

.whitening-section {
  padding-bottom: 10rem;
}

.whitening-description {
  padding-top: 2rem;
}

.whitening-menu-item p {
  padding: 2rem 3rem;
  font-size: 1.2rem;
}

.case-section {
  margin-bottom: 7rem;
}

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

.menu-section::before {
  top: -10rem;
  left: 1rem;
  width: 19rem;
  height: 15rem;
}

.menu-section .inner::before {
  bottom: -9rem;
  left: 0rem;
  width: 7rem;
  height: 7rem;
}

/*===============================================
  めいさいこうもく (Detail Items)
===============================================*/
.detail-img {
  margin: 0 auto;
  max-width: 100%;
}

.detail-before-img {
  margin-bottom: 13rem;
}

.detail-before-img::after {
  position: absolute;
  bottom: -9.5rem;
  left: 50%;
  width: 17rem;
  height: 6rem;
  content: '';
  transform: translateX(-50%) rotate(90deg);
}

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

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

.haircut-card {
  flex-direction: column;
  margin-top: 4rem;
  padding-bottom: 1rem;
}

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

.haircut-content br,
.card-item p br {
  display: none;
}

.haircut-card .card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 4rem;
}

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

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

.card-title {
  padding-left: 3.6rem;
  font-size: 2rem;
}

.haircut-menu .menu::before {
  top: 0.2rem;
  left: 12%;
  width: clamp(20rem, calc(12.84rem + 2.24vw), 30rem);
}


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

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

.menu-group-decoration {
  width: 10rem;
}

.menu-cat-decoration {
  bottom: 2.5rem;
  left: clamp(-15px, calc(3.58vw - 39.45px), -28px);
  width: 4.5rem;
}

.menu-group-title {
  padding: 1.2rem 1.6rem;
  font-size: 2rem;
}

.menu-group th {
  padding-right: 0.8rem;
}

.menu-group td {
  padding-left: 0.8rem;
}

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

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

.menu-group table {
  width: calc(100% - 4rem);
  margin: 0.6rem 2rem 1.2rem;
  font-size: 1.2rem;
}

.menu-group th,
.menu-group td {
  padding-block: 1.2rem;
}

.haircut-gallery .gallery {
  padding: 6rem 0;
}

.haircut-gallery .gallery-card {
  flex-direction: column;
  align-items: stretch;
  margin: 5rem 0;
  gap: 3rem;
}

.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 5.5rem;
}

.gallery-item a {
  width: 100%;
}

.gallery-item-image {
  width: 100%;
  height: auto;
  border-radius: 1.2rem;
}

.gallery-item-caption {
  margin-top: 3rem;
  padding-left: 1.4rem;
  font-size: 1.6rem;
}

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

.baby-haircut {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.baby-content {
  margin-top: 2rem;
  padding: 0;
}

.baby-content h4 {
  font-size: 2rem;
}

.baby-content p {
  margin-bottom: 2rem;
  font-size: var(--font-size-base);
}

.baby-img::before {
  top: -7rem;
  left: -10rem;
  width: 14rem;
}

.baby-signature {
  font-size: 1.4rem;
}

/* =========================================================
   ブログ( Blog )
========================================================= */
.blog-detail .p-blog-title {
  font-size: 1.8rem;
}

.blog-detail .com-title {
  margin-bottom: 3.5rem;
}
.blog-detail {
  padding-bottom: 0;
}
/*===============================================
  プライバシーポリシー (Privacy)
===============================================*/
.privacy-container {
  padding-bottom: 10rem;
}

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

.privacy-title {
  margin-bottom: 2rem;
  font-size: 2.2rem;
}

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

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

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

.privacy-list {
  margin-top: 1.5rem;
  padding-left: 4rem;
}

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

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

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

/*===============================================
  パンくずリスト (Breadcrumb)
===============================================*/
.breadcrumb {
  display: none;
}

/*===============================================
  お問い合わせ
===============================================*/
.contact-container {
  padding: 4rem 0 6rem;
}

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

.contact-card {
  width: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  padding: 4rem 2rem;
  margin-bottom: 3rem;
}

.ph-no::before {
  top: -60%;
  left: 50%;
  transform: translate(-50%, 50%);
}

.work-time {
  text-align: center;
}

/*===============================================
  お問い合わせ完了画面
===============================================*/
.complete-text {
  margin-bottom: 15rem;
}

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