@charset "UTF-8";
/* CSS Document */
/* ========================================
   TOP Page
======================================== */
.hero {
  position: relative;
  background: #f6f3ef;
  overflow: hidden;
}
.heroImage {
  position: relative;
  z-index: 1;
  width: 60%;
  margin-left: 40%;
}
.heroMovie {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 53%;
}
.heroMovie video {
	width: 100%;
	height: auto;
}
.heroMovie::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 27, 50, .86) 0%, rgba(7, 27, 50, .72) 62%, rgba(7, 27, 50, .53) 100%);
}
.heroMovie::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .14) .65px, transparent .8px);
  background-size: 3px 3px;
  pointer-events: none;
}
.heroContent {
  position: absolute;
  z-index: 5;
  left: 5%;
  top: 22%;
  width: 90%;
  color: #fff;
}
.heroContent h1 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.9vw;
  font-weight: 700;
  letter-spacing: .08em;
  padding-bottom: 0.5%;
}
.heroContent h1::before {
  content: "■";
  padding-right: 0.5em;
}
.heroCopy {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: clamp(100%, 4.8vw, 100px);
  line-height: 1.2;
  letter-spacing: .035em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}
.heroAccent {
  display: block;
  width: 20%;
  height: 3px;
  background: var(--gold);
  margin: 3% 0 0;
}
.heroService {
  font-size: 1.3vw;
  letter-spacing: .05em;
  padding: 1% 0 0;
	line-height: 1.3;
}
.heroService strong {
  font-size: 200%;
  font-weight: 600;
}
.heroActions {
  display: flex;
  align-items: stretch;
  gap: 15px;
  margin-top: 19px;
}
.heroReserve {
  min-width: 240px;
  height: 65px;
  padding: 0 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #d4b271, #c89b54);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 13px;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .12);
  font-size: 18px;
}
.heroReserve b {
  font-weight: 600;
  white-space: nowrap;
}
.heroReserve > .fa-calendar-check {
  flex: 0 0 auto;
  font-size: 24px;
}
.heroReserve > .fa-chevron-right {
  margin-left: auto;
  font-size: 14px;
}
.heroPhone {
  height: 65px;
  min-width: 245px;
  padding: 0 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .97);
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .10);
}
.heroPhone span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.heroPhone small {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 4px;
  white-space: nowrap;
}
.heroPhone strong {
  font-family: "Shippori Mincho", serif;
  font-size: 20px;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* HERO CTA hover */
@media (hover: hover) {

	.heroReserve,
	.heroPhone {
		transition:
			transform .25s ease,
			box-shadow .25s ease,
			background .25s ease,
			color .25s ease;
	}

	.heroReserve:hover {
		transform: translateY(-2px);
		background: linear-gradient(135deg, #dfbf7e, #d5a75e);
		box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
	}

	.heroReserve:hover > .fa-chevron-right {
		transform: translateX(4px);
	}

	.heroReserve > .fa-chevron-right {
		transition: transform .25s ease;
	}

	.heroPhone:hover {
		transform: translateY(-2px);
		background: #fff;
		color: var(--gold);
		box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
	}
}
.heroFacts {
  height: 70px;
  background: linear-gradient(90deg, #102744, #0d1f3b);
  color: #fff;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 10vw;
}
.heroName {
  position: absolute;
  z-index: 5;
  width: 90%;
  right: 5%;
  top: 23%;
	pointer-events: none;
}
.heroLogo {
  width: 25%;
  display: block;
  margin-left: auto;
  padding: 0 1.6% 2% 0;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1));
}
.heroLead {
  font-family: "Shippori Mincho", serif;
  font-size: clamp(100%, 2.1vw, 48px);
  line-height: 1.5;
  font-weight: 600;
  text-align: right;
}
.fact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  position: relative;
}
.fact + .fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(255, 255, 255, .45);
}
.factIcon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.fact .fa-clock {
  font-size: 29px;
}
.fact .fa-calendar-check {
  font-size: 28px;
}
.fact .fa-car-side {
  font-size: 27px;
}
.fact p {
  display: flex;
  flex-direction: column;
  font-family: "Shippori Mincho", serif;
  line-height: 1;
}
.fact strong {
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}
.fact strong em {
  color: var(--gold);
  font-style: normal;
}
.fact small {
  font-size: 10px;
  margin-top: 4px;
  white-space: nowrap;
}
@media(max-width:1180px) {
  .heroActions {
    gap: 10px;
  }
  .heroReserve {
    min-width: 205px;
  }
  .heroPhone {
    min-width: 218px;
  }
  .heroFacts {
    padding: 0 5vw;
  }
}
@media(max-width:900px) {
  .hero {
    height: auto;
    min-height: 0;
    padding-bottom: 0;
    background: var(--navy);
  }
  .heroMovie {
    top: 45.8%;
    width: 100%;
    opacity: .93;
  }
  .heroMovie::before {
    background: linear-gradient(90deg, rgba(7, 27, 50, .84), rgba(7, 27, 50, .61));
  }
  .heroAccent {
    margin: 15px 0;
  }
  .heroActions {
    margin-top: 18px;
    max-width: 560px;
  }
  .heroFacts {
    position: relative;
    height: auto;
    grid-template-columns: 1fr;
    padding: 8px 24px;
    background: #0d203d;
  }
  .fact {
    justify-content: flex-start;
    padding: 13px 8px;
  }
  .fact + .fact::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: rgba(255, 255, 255, .18);
  }
}
@media(max-width:600px) {
  .heroImage {
    padding: 72px 0 100%;
    width: 100%;
    margin-left: 0;
  }
  .heroContent {
    top: 58%;
  }
  .heroContent h1 {
    font-size: 3vw;
  }
  .heroCopy {
    font-size: clamp(100%, 6.8vw, 100px);
  }
  .heroService {
    font-size: 3vw;
  }
  .heroName {
    top: 24%;
  }
  .heroLogo {
    width: 45%;
  }
  .heroLead {
    font-size: clamp(100%, 6vw, 26px);
  }
  .heroActions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .heroReserve, .heroPhone {
    width: 100%;
    min-width: 0;
    height: auto;
    border-radius: 5px;
    padding: 5px 1em;
  }
  .heroReserve b {
    font-size: 100%;
  }
  .heroReserve > .fa-calendar-check {
    font-size: 100%;
  }
  .heroPhone small {
    margin-bottom: 0;
  }
  .heroPhone strong {
    font-size: 120%;
  }
  .heroFacts {
    padding: 7px 18px;
  }
  .fact strong {
    font-size: 15px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .heroMovie video {
    display: none;
  }
}
/* ========================================
   Reasons
======================================== */
.reasons {
  background: #faf9f7;
  color: var(--navy);
  padding: 38px 5% 32px;
}
.reasonsInner {
  width: min(1400px, 100%);
  margin: 0 auto;
}
/* Reasons list */
.reasonsList {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}
.reasonItem {
  position: relative;
  padding: 4px 28px 20px;
}
.reasonItem + .reasonItem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 5%;
  width: 1px;
  background: #dedbd5;
}
/* Icon */
.reasonIcon {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.reasonIcon img {
  display: block;
  width: auto;
  height: 82px;
  max-width: 100px;
  object-fit: contain;
}
/* Text */
.reasonItem h3 {
  font-family: "Shippori Mincho", serif;
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .025em;
  margin-bottom: 8px;
  text-align: center;
}
.reasonItem p {
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: .025em;
}
/* Bottom guide */
.reasonsGuide {
  width: min(900px, 90%);
  min-height: 58px;
  margin: 12px auto 0;
  border: 1px solid #d8d5cf;
	border-radius: 3px;
  background: rgba(255, 255, 255, .55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  transition:
    background .3s ease, border-color .3s ease;
}
@media (hover: hover) {

	.reasonsGuide {
		transition:
			color .25s ease,
			border-color .25s ease;
	}

	.reasonsGuide i {
		transition: transform .25s ease;
	}

	.reasonsGuide:hover {
		color: var(--gold);
		border-color: var(--gold);
	}

	.reasonsGuide:hover i {
		transform: translateY(4px);
	}
}
.reasonsGuide i {
  font-size: 12px;
  color: var(--gold);
}
@media(max-width:600px) {
  .reasons {
    padding: 38px 20px 28px;
  }
  .reasonsList {
    grid-template-columns: 1fr;
  }
  .reasonItem {
    display: grid;
    grid-template-columns: 76px 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    text-align: left;
    padding: 22px 4px;
    border-right: 0 !important;
    border-bottom: 1px solid #dedbd5;
  }
  .reasonItem + .reasonItem::before {
    display: none;
  }
  .reasonItem:last-child {
    grid-column: auto;
  }
  .reasonIcon {
    grid-row: 1 / 3;
    width: 76px;
    height: 76px;
    margin: 0;
  }
  .reasonIcon img {
    width: 70px;
    height: 70px;
  }
  .reasonItem h3 {
    align-self: end;
    font-size: 17px;
    margin-bottom: 3px;
    text-align: left;
  }
  .reasonItem p {
    font-size: 12px;
    line-height: 1.7;
  }
  .reasonItem p br {
    display: none;
  }
  .reasonsGuide {
    width: 100%;
    min-height: 58px;
    margin-top: 22px;
    font-size: 12px;
  }
}
/* ========================================
   TOP content after Reasons
======================================== */
/* ========================================
   Concerns
======================================== */
.concerns--visual {
  background: url("/images/bg01.webp") no-repeat right top;
  background-size: contain;
}
.concernsInner {
  position: relative;
  z-index: 2;
  padding: 1em 1em 1em 0;
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.concernsGrid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 6vw;
  align-items: center;
}
.concernsList {
  display: grid;
  grid-template-columns: 1fr;
}
.concernsList li {
  font-family: "Shippori Mincho", serif;
  position: relative;
  padding: .8rem 0 .8rem 1.25rem;
  border-bottom: 1px solid #e6e1da;
}
.concernsList li:first-child {
  border-top: 1px solid #e6e1da;
}
.concernsList li i {
  color: var(--gold);
  padding-right: .5em;
}
.concernsLead {
  font-family: "Shippori Mincho", serif;
  font-size: clamp(100%, 2.4vw, 200%);
  font-weight: 600;
  line-height: 1.65;
}
/* ========================================
   Area
======================================== */
.area {
  background: #fffdf9;
}
.areaIntro {
	margin: 0 0 2rem;
	line-height: 2;
	font-weight: 500;
}
.areaGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid #ded8ce;
  border-bottom: 1px solid #ded8ce;
}
.areaColumn {
  padding: 1.4rem 2rem;
}
.areaColumn + .areaColumn {
  border-left: 1px solid #ded8ce;
}
.areaPref {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  margin-bottom: .45rem;
}
.areaPref::before {
  content: "■";
  padding-right: 0.5em;
}
.areaNote {
  margin-top: 1rem;
}
.areaNote::before {
  content: "※";
  padding-right: 0.5em;
}
.areaFacts {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2rem;
}
.areaFacts > p {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1em 1.5rem;
  border: solid 1px #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.areaFacts i {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 130%;
}
.areaFacts span, .areaFacts small, .areaFacts strong, .areaFacts em {
  display: block;
}
.areaFacts small {
  font-weight: 600;
}
.areaFacts small::before {
  content: "■";
  padding-right: 0.5em;
}
.areaFacts strong {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  margin-top: .15rem;
}
.areaFacts em {
  margin-top: .15rem;
  font-size: 85%;
  font-style: normal;
}
/* ========================================
   Treatment / Therapists
======================================== */
.treatment {
  position: relative;
  overflow: hidden;
  background: url("/images/bg02.webp") no-repeat right top / 54% auto;
}
.treatmentVisual {
  position: relative;
  z-index: 1;
}
.treatmentHero {
  width: 58%;
  min-height: 220px;
  padding-top: .5rem;
}
.treatmentHeading {
  margin-bottom: 1.4rem;
}
.treatmentLead {
  line-height: 2;
  font-weight: 500;
}
/* ========================================
   Treatment Policy
======================================== */
.treatmentPolicyPanel {
	margin-top: 1.5rem;
	padding: 1.75rem 2rem 1.4rem;
	background: rgba(255, 255, 255, .76);
	border-radius: 5px;
	box-shadow: 0 12px 30px rgba(15, 31, 58, .18);
}
.treatmentPolicyText {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.8rem;
  align-items: center;
}
.treatmentPolicyBadge {
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  letter-spacing: .05em;
}
.treatmentPolicyCopy h3 {
  position: relative;
  font-family: "Shippori Mincho", serif;
  font-size: clamp(120%, 1.9vw, 175%);
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 1rem;
  padding-bottom: .8rem;
}
.treatmentPolicyCopy h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--gold);
}
.treatmentPolicyCopy p {
  line-height: 1.8;
}
/* 施術メニュー */
ul.treatmentMethods {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  padding: 1.25rem 0 0 0;
}
.treatmentMethods li {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem 1rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: #fff;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.sectionAction {
  text-align: center;
}
/* Therapists */
.therapistsBlock {
  margin-top: 4rem;
}
.therapistCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.therapistCard {
	background: rgba(255, 255, 255, .76);
    border-radius: 5px;
    box-shadow: 0 12px 30px rgba(15, 31, 58, .18);
	overflow: hidden;
}
.therapistPhoto {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f1ed;
}
.therapistPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.therapistCardBody {
  padding: 1.25rem 1.35rem 1.4rem;
}
.therapistName {
  font-family: "Shippori Mincho", serif;
  font-size: 130%;
  font-weight: 700;
  line-height: 1.4;
}
.therapistMeta {
  color: var(--gold);
  font-weight: 700;
  margin: .3rem 0 .7rem;
}
.therapistCardBody > p:last-child {
  line-height: 1.8;
}
.therapistNote { margin: 1.5rem 0 0; text-align: center; line-height: 1.8; font-size: 14px; }

@media(max-width:900px) {
  .treatment {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, #fff 52%), url("/images/bg01.webp") no-repeat right top / 78% auto;
  }
  .treatmentHero {
    width: 72%;
  }
  .treatmentPolicyBadge {
    width: 90px;
    height: 90px;
  }
  .treatmentMethods {
    gap: .75rem;
    padding-left: 120px;
  }
  .treatmentMethods li {
    padding-inline: .5rem;
  }
  .therapistCards {
    gap: 1rem;
  }
  .therapistCardBody {
    padding: 1rem;
  }
}
@media(max-width:600px) {
  .treatment {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .88) 28%, #fff 46%), url("/images/bg02.webp") no-repeat 70% top / auto 300px;
  }
  .treatmentHero {
    width: 100%;
    min-height: 290px;
    padding-top: 0;
  }
  .treatmentHeading {
    margin-bottom: 1rem;
  }
  .treatmentLead {
    line-height: 1.8;
  }
  .treatmentPolicyPanel {
    margin-top: 1rem;
    padding: 1.25rem;
  }
  .treatmentPolicyText {
	display: block;
	}
  .treatmentPolicyBadge {
    width: 72px;
    height: 72px;
	margin: 0 auto 1em;
  }
  .treatmentPolicyCopy h3 {
    font-size: 110%;
    line-height: 1.55;
    margin-bottom: .8rem;
    padding-bottom: .7rem;
  }
  .treatmentPolicyCopy p {
    line-height: 1.75;
  }
  ul.treatmentMethods {
	display: block;
  }
  .treatmentMethods li {
	min-height: inherit;
	padding: 2px;
	border-width: 1px;
	  margin-bottom: 1em;
  }
  .therapistsBlock {
    margin-top: 3rem;
    padding-top: 2.5rem;
  }
  .therapistCards {
    grid-template-columns: 1fr;
  }
  .therapistCard {
    display: grid;
    grid-template-columns: 38% 1fr;
  }
  .therapistPhoto {
    aspect-ratio: auto;
    min-height: 190px;
  }
  .therapistCardBody {
    padding: 1rem;
  }
}
/* ========================================
   Service Guide
   Price / Hygiene / First Guide
======================================== */

.serviceGuide {
	background:
		linear-gradient(
			180deg,
			#faf8f4 0%,
			#fffdf9 45%,
			#faf8f4 100%
		);
}

.serviceGuidePanel {
	background: rgba(255, 255, 255, .9);
	border: 1px solid #eee9e1;
	border-radius: 6px;
	box-shadow: 0 12px 35px rgba(15, 31, 58, .07);
	overflow: hidden;
}


/* ----------------------------------------
   PRICE / HYGIENE
---------------------------------------- */

.serviceGuideTop {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.guidePrice,
.guideHygiene {
	min-width: 0;
	padding: 2.5rem 2.5rem 2.25rem;
}

.guidePrice {
	border-right: 1px solid #e6e1d9;
}


/* 見出し */

.serviceGuide .sectionHeading {
	margin-bottom: 1.6rem;
}

.serviceGuide .sectionHeading h2 {
	line-height: 1.55;
}

.serviceGuide .sectionHeadingLine {
	display: none;
}


/* ----------------------------------------
   PRICE
---------------------------------------- */

.priceMain {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
	border: 0;
}

.priceMain p {
	overflow: hidden;
	padding: 0 0 1rem;
	background: #fff;
	border: 1px solid #e7e2da;
	border-radius: 5px;
	text-align: center;
	box-shadow: 0 4px 14px rgba(15, 31, 58, .05);
}

.priceMain p + p {
	border-left: 1px solid #e7e2da;
}

.priceMain span {
	display: block;
	margin: 0 0 .8rem;
	padding: .45rem .5rem;
	background: var(--navy);
	color: #fff;
	font-weight: 600;
}

.priceMain strong {
	display: block;
	font-family: "Shippori Mincho", serif;
	font-size: 150%;
	font-weight: 700;
	line-height: 1;
	color: var(--navy);
}

.priceMain strong small {
	font-size: 60%;
}


/* 追加料金 */

.priceOptions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
	margin-top: .65rem;
}

.priceOptions p {
	display: flex;
	align-items: center;
	gap: .7rem;
	min-width: 0;
	padding: .7rem;
	background: #fbf8f2;
	border: 1px solid #ece6dd;
	border-radius: 5px;
}

.priceOptions p + p {
	border-left: 1px solid #ece6dd;
}

.priceOptions > p > i {
	flex: 0 0 auto;
	width: 2.3rem;
	height: 2.3rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #f5e8cf;
	color: var(--navy);
	font-size: 110%;
}

.priceOptions span {
	display: block;
	min-width: 0;
}

.priceOptions small {
	display: block;
	font-size: 80%;
	font-weight: 600;
	line-height: 1.4;
	color: var(--navy);
}

.priceOptions strong {
	display: block;
	margin-top: .1rem;
	color: var(--gold);
	font-weight: 700;
	line-height: 1.3;
}

.guidePrice > .buttonLink {
	margin-top: 1.25rem;
}


/* ----------------------------------------
   HYGIENE
---------------------------------------- */

.hygieneList {
	display: grid;
	gap: .65rem;
}

.hygieneList li {
	display: grid;
	grid-template-columns: 3.4rem 1fr;
	gap: 1rem;
	align-items: center;
	min-height: 4.8rem;
	padding: .6rem 1rem;
	background: #fff;
	border: 1px solid #e7e2da;
	border-radius: 5px;
	box-shadow: 0 4px 14px rgba(15, 31, 58, .04);
}

.hygieneList li:first-child {
	border-top: 1px solid #e7e2da;
}

.hygieneList i {
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #f7ead1;
	color: var(--navy);
	font-size: 135%;
}

.hygieneList span {
	font-weight: 600;
	line-height: 1.6;
}


/* ----------------------------------------
   FIRST GUIDE
---------------------------------------- */

.guideFirst {
	margin: 0;
	padding: 2rem 2.5rem 2.25rem;
	border-top: 1px solid #e6e1d9;
}

.firstGuideIntro {
	max-width: none;
}


/* Flow */

.flowList {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: .8rem;
	margin-top: 1.4rem;
	border: 0;
}

.flowList li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 10.5rem;
	padding: 1.8rem .65rem 1rem;
	background:
		linear-gradient(
			180deg,
			#fbf8f2 0%,
			#f8f5ef 100%
		);
	border: 0;
	border-radius: 5px;
	text-align: center;
}

.flowList li + li {
	border-left: 0;
}


/* ステップ間の矢印 */

.flowList li:not(:last-child)::after {
	content: "";
	position: absolute;
	z-index: 2;
	right: -.65rem;
	top: 50%;
	width: .55rem;
	height: .55rem;
	border-top: 2px solid var(--gold);
	border-right: 2px solid var(--gold);
	transform: translateY(-50%) rotate(45deg);
}


/* 番号 */

.flowList .flowNumber {
	position: absolute;
	top: -1.1rem;
	left: 50%;
	width: 2.3rem;
	height: 2.3rem;
	display: grid;
	place-items: center;
	margin: 0;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-weight: 700;
	line-height: 1;
	transform: translateX(-50%);
}


/* アイコン */

.flowList li > i {
	display: block;
	margin-bottom: .8rem;
	color: var(--navy);
	font-size: 210%;
}


/* テキスト */

.flowList p {
	font-weight: 600;
	line-height: 1.55;
	font-size: clamp(55%, 0.8vw, 85%);
}


/* ----------------------------------------
   Bottom notes
---------------------------------------- */

.firstGuideBottom {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
	align-items: center;
	margin-top: 1.3rem;
	padding-top: 1.3rem;
	border-top: 1px solid #e6e1d9;
}

.firstNotes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border: 1px solid #e7e2da;
	border-radius: 5px;
	overflow: hidden;
}

.firstNotes p {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 1rem;
	align-items: center;
	padding: 1rem 1.25rem;
	background: #fff;
}

.firstNotes p::before {
	display: none;
}

.firstNotes p + p {
	border-left: 1px solid #e7e2da;
}

.firstNotes p > i {
	width: 3.8rem;
	height: 3.8rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #f7ead1;
	color: var(--navy);
	font-size: 150%;
}

.firstNotes p > span {
	display: block;
}

.firstNotes strong {
	display: block;
	margin-bottom: .2rem;
	font-weight: 600;
	color: var(--navy);
}
.firstNotes strong::before {
    content: "■";
    padding-right: 0.5em;
}

.firstNotes em {
	display: block;
	color: #5d6270;
	font-size: 90%;
	font-style: normal;
	line-height: 1.6;
}


/* ========================================
   Tablet
======================================== */

@media(max-width:900px) {

	.serviceGuideTop {
		grid-template-columns: 1fr;
	}

	.guidePrice {
		border-right: 0;
		border-bottom: 1px solid #e6e1d9;
	}

	.flowList {
		grid-template-columns: repeat(4, 1fr);
		row-gap: 2rem;
	}

	.flowList li:nth-child(4)::after {
		display: none;
	}

	.flowList li:nth-child(5) {
		border-left: 0;
	}

	.flowList li:nth-child(n+5) {
		border-top: 0;
	}

	.firstGuideBottom {
		grid-template-columns: 1fr;
	}

}


/* ========================================
   Smartphone
======================================== */

@media(max-width:600px) {

	.serviceGuidePanel {
		border-radius: 4px;
	}

	.guidePrice,
	.guideHygiene,
	.guideFirst {
		padding: 1.8rem 1.2rem;
	}

	.serviceGuide .sectionHeading {
		margin-bottom: 1.3rem;
	}


	/* Price */

	.priceMain {
		grid-template-columns: repeat(3, 1fr);
		gap: .3rem;
	}

	.priceMain p {
		display: block;
		padding: 0 0 .7rem;
	}

	.priceMain p + p {
		border-top: 1px solid #e7e2da;
	}

	.priceMain span {
		margin: 0 0 .65rem;
		padding: .35rem .2rem;
	}

	.priceMain strong {
		font-size: 110%;
	}

	.priceOptions {
		grid-template-columns: 1fr;
		gap: .4rem;
	}

	.priceOptions p {
		padding: .55rem .7rem;
	}

	.priceOptions p + p {
		border-top: 1px solid #ece6dd;
	}

	.priceOptions > p > i {
		width: 2rem;
		height: 2rem;
	}


	/* Hygiene */

	.hygieneList li {
		grid-template-columns: 2.8rem 1fr;
		min-height: 0;
		padding: .7rem;
	}

	.hygieneList i {
		width: 2.6rem;
		height: 2.6rem;
		font-size: 110%;
	}


	/* Flow */

	.flowList {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.25rem;
		margin-top: 1.5rem;
	}

	.flowList li {
		position: relative;
		display: grid;
		grid-template-columns: 2.2rem 2.8rem 1fr;
		gap: .8rem;
		align-items: center;
		min-height: 0;
		padding: .8rem 1rem;
		background:
			linear-gradient(
				180deg,
				#fbf8f2 0%,
				#f8f5ef 100%
			);
		border-radius: 5px;
		text-align: left;
	}

	/* 下向き矢印 */

	.flowList li:not(:last-child)::after {
		content: "";
		position: absolute;
		z-index: 2;
		left: 50%;
		right: auto;
		top: auto;
		bottom: -.9rem;
		width: .55rem;
		height: .55rem;
		border-top: 0;
		border-right: 2px solid var(--gold);
		border-bottom: 2px solid var(--gold);
		transform: translateX(-50%) rotate(45deg);
	}

	.flowList li:nth-child(4)::after,
	.flowList li:nth-child(even)::after {
		display: block;
	}

	.flowList li:last-child::after {
		display: none;
	}

	/* 番号 */

	.flowList .flowNumber {
		position: static;
		width: 2.2rem;
		height: 2.2rem;
		display: grid;
		place-items: center;
		margin: 0;
		border-radius: 50%;
		background: var(--navy);
		color: #fff;
		font-weight: 700;
		line-height: 1;
		transform: none;
	}

	/* アイコン */

	.flowList li > i {
		margin: 0;
		color: var(--navy);
		font-size: 150%;
		text-align: center;
	}

	/* テキスト */

	.flowList p {
		margin: 0;
		font-weight: 600;
		line-height: 1.5;
		text-align: left;
	}

	.flowList p br {
		display: none;
	}

	/* Notes */

	.firstNotes {
		grid-template-columns: 1fr;
	}

	.firstNotes p {
		grid-template-columns: 3.5rem 1fr;
		padding: .85rem;
	}

	.firstNotes p + p {
		border-left: 0;
		border-top: 1px solid #e7e2da;
	}

	.firstNotes p > i {
		width: 3rem;
		height: 3rem;
	}

}

/* ========================================
   FAQ
======================================== */

.faqList {
	border-top: 1px solid #ded8ce;
}

.faqList details {
	border-bottom: 1px solid #ded8ce;
}

/* 質問 */
.faqList summary {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 72px;
	padding: 18px 64px 18px 20px;
	color: var(--navy);
	font-weight: 600;
	line-height: 1.6;
	cursor: pointer;
	list-style: none;
	transition:
		background-color .3s ease,
		padding-left .3s ease;
}

/* ブラウザ標準三角を消す */
.faqList summary::-webkit-details-marker {
	display: none;
}

.faqList summary::marker {
	display: none;
	content: "";
}


/* FAQ Question icon */
.faqList summary > .fa-circle-question {
	flex: 0 0 auto;
	margin-right: 16px;
	color: var(--gold);
	font-size: 135%;
	transition:
		color .3s ease,
		transform .3s ease;
}

@media (hover: hover) {

	.faqList summary:hover > .fa-circle-question {
		color: var(--navy);
		transform: scale(1.08);
	}

}

.faqList details[open] summary > .fa-circle-question {
	color: var(--navy);
}

/* ＋ / − */
.faqList summary::after {
	content: "＋";
	position: absolute;
	top: 50%;
	right: 20px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(15, 31, 58, .25);
	border-radius: 50%;
	color: var(--navy);
	font-size: 110%;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-50%);
	transition:
		color .3s ease,
		background-color .3s ease,
		border-color .3s ease,
		transform .3s ease;
}


/* ----------------------------------------
   Hover
---------------------------------------- */

@media (hover: hover) {

	.faqList summary:hover {
		padding-left: 26px;
		background: rgba(201, 160, 99, .07);
	}

	.faqList summary:hover::after {
		background: var(--navy);
		border-color: var(--navy);
		color: #fff;
	}

}


/* ----------------------------------------
   Open
---------------------------------------- */

.faqList details[open] summary {
	background: rgba(201, 160, 99, .07);
}

.faqList details[open] summary::after {
	content: "−";
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}


/* 回答 */
.faqList details > p {
	position: relative;
	margin: 0;
	padding: 24px 64px 24px 58px;
	color: #555d69;
	line-height: 1.9;
}


/* A */
.faqList details > p::before {
	content: "A";
	position: absolute;
	top: 21px;
	left: 20px;
	font-family: "Shippori Mincho", serif;
	font-size: 120%;
	font-weight: 600;
	color: var(--navy);
}


/* ----------------------------------------
   Mobile
---------------------------------------- */

@media(max-width:600px) {

	.faqList summary {
		min-height: 62px;
		padding: 14px 48px 14px 8px;
	}

	.faqList summary::before {
		margin-right: 12px;
	}

	.faqList summary::after {
		right: 6px;
		width: 30px;
		height: 30px;
	}

	.faqList details > p {
		padding: 20px 12px 20px 38px;
	}

	.faqList details > p::before {
		top: 17px;
		left: 8px;
	}

}



.finalReserve {
  background: linear-gradient(135deg, #d4b271, #c89b54);
  color: #fff;
  font-weight: 700;
}
.finalReserve .fa-chevron-right {
  margin-left: auto;
  font-size: .75rem;
}
.finalPhone {
  border: 1px solid rgba(255, 255, 255, .35);
  font-family: "Shippori Mincho", serif;
  font-size: 1.15rem;
}
/* ========================================
   TOP Responsive
======================================== */
@media(max-width:900px) {
  .concernsGrid, .voicesInner, .faqInner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .concernsLead {
    font-size: clamp(120%, 5vw, 200%);
  }
}
@media(max-width:600px) {
  .concernsInner {
    padding: 1em 0;
  }
  .concernsGrid {
    gap: 1.5rem;
  }
  .concernsLead {
    font-size: clamp(120%, 5vw, 200%);
  }
  .areaIntro {
    margin-bottom: 1.5rem;
    text-align: left;
  }
  .areaGrid, .areaFacts, .therapistStrip, .voiceQuotes {
    grid-template-columns: 1fr;
  }
  .areaColumn {
    padding: 1rem 0;
  }
  .areaColumn + .areaColumn, .therapistStrip article + article, .voiceQuotes blockquote + blockquote {
    border-left: 0;
    border-top: 1px solid #ded8ce;
  }
  .areaNote {
    text-align: left;
  }
  .areaFacts {
    margin-top: 1.5rem;
    padding: 0;
  }
  .therapistStrip article, .voiceQuotes blockquote {
    padding: 1rem 0;
  }
}