.main-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.main-visual-caption {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  padding: 0;
  z-index: 2;
}

.main-visual-caption .caption-inner {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 16px;
}

.main-visual-caption .mv-caption-block {
  margin: 0;
}

.main-visual-caption .mv-title {
  margin: 0;
  color: #fff;
  font-family: var(--font-family-body);
  font-size: var(--font-size-fixed-xl);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  text-align: left;
}

/* 「戻」だけ大きく見せる */
.main-visual-caption .mv-title .txt-lg {
  font-size: var(--font-size-fixed-2xl);
}

.main-visual-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-blue, #019ed3);
  z-index: 2;
}

.main-visual-caption {
  bottom: 24px;
}

.main-visual-caption .caption-inner {
  padding: 0 12px;
}

.main-visual-caption .mv-title {
  font-size: clamp(1.5rem, 0.152rem + 6.34vw, 3.125rem);
  line-height: 1.2;
}

.main-visual-caption .mv-title .txt-lg {
  font-size: clamp(2.5rem, -5.793rem + 39.02vw, 12.5rem);
  line-height: 1.2;
}

.main-visual-caption .mv-title .mv-title-end {
  font-size: clamp(1.875rem, -1.494rem + 15.85vw, 5.938rem);
}

@media (max-width: 750px) {
}

@media (min-width: 900px) {
  .main-visual-caption {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .main-visual-caption .mv-title {
    text-align: center;
  }
}

/* 
about
*/

#about .about-text {
  font-size: var(--font-size-fixed-lg);
  margin-bottom: var(--space-xl);
  font-weight: var(--font-weight-bold);
}

#about .img {
  margin-bottom: var(--space-xl);
}

#about .about-text-2 {
  text-align: justify;
  font-size: clamp(1.5rem, -0.366rem + 8.78vw, 3.75rem);
  font-weight: 600;
  line-height: 1.2;
}

#about .logo {
  width: 60%;
  margin-left: auto;
  margin-bottom: var(--space-xl);
}

#about .logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 
price
*/

#price {
}

#price .price-inner {
  max-width: 750px;
  margin: 0 auto;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 0%,
    rgba(234, 255, 113, 0.3) 100%
  );
  padding: 50px 0;
}

#price .price-inner:nth-of-type(2) {
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 0%,
    rgba(113, 224, 255, 0.3) 100%
  );
}

#price .price-inner:nth-of-type(3) {
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 156, 113, 0.3) 100%
  );
}

#price .price-heading {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  border-bottom: 2px solid #284b2f;
}

#price .price-heading-text {
  font-size: clamp(1.5rem, -0.174rem + 8.37vw, 3.75rem);
  font-weight: var(--font-weight-bold);
}

#price .price-heading-text-large {
  font-size: clamp(2.5rem, 0.64rem + 9.3vw, 5rem);
}

#price .price-heading-text-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

#price .price-heading-sub {
  font-size: clamp(1rem, 0.482rem + 2.44vw, 1.625rem);
  letter-spacing: 0.15em;
  margin-left: 113px;
  font-weight: var(--font-weight-bold);
}

#price .price-heading-pill {
  display: inline-block;
  /* padding: 3px 32px 3px; */
  padding: 0px 16px;
  background-color: #284b2f;
  color: #fff;
  font-size: clamp(1.75rem, 0.091rem + 7.8vw, 3.75rem);
  font-weight: var(--font-weight-bold);
  font-family:
    "Noto Sans JP",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  position: relative;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

#price .price-divider {
  display: none;
}

#price .price-main {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 0px 30px;
}

#price .price-left {
  display: flex;
  flex-direction: column;
}

#price .price-label {
  font-size: 24px;
  font-size: clamp(1rem, 0.274rem + 3.41vw, 1.875rem);
  font-weight: var(--font-weight-bold);
}

#price .price-regular {
  margin: 0;
  font-size: clamp(1.5rem, 0.152rem + 6.34vw, 3.125rem);
}

#price .price-regular-amount {
  position: relative;
}

#price .price-regular-amount::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -24px;
  top: 50%;
  height: 2px;
  background-color: #d60000;
  transform: translateY(-56%) rotate(10deg);
  transform-origin: center;
}

#price .price-now {
  margin: 0;
  font-weight: var(--font-weight-bold);
  font-size: clamp(3.75rem, 0.64rem + 14.63vw, 7.5rem);
}

#price .price-now-amount {
  letter-spacing: 0.08em;
  font-size: clamp(1.875rem, -0.916rem + 13.95vw, 5.625rem);
}

#price .price-unit {
  font-size: var(--font-size-fixed-md);
  margin-left: 4px;
}

@media (max-width: 500px) {
  #price .price-inner {
    padding: 25px 0;
  }

  #price .price-heading-sub {
    margin-left: 60px;
  }
}

/************************** 
reason
**************************/

#reason {
}

#reason .reason-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 900px;
}

#reason .reason-inner {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

#reason .reason-title {
  position: absolute;
  left: 32%;
  bottom: 136px;
  transform: translateX(-50%);
  margin: 0;
  font-size: clamp(1.25rem, -0.378rem + 8.14vw, 3.438rem);
  font-weight: var(--font-weight-bold);
}

#reason .reason-title-main-left {
  font-size: clamp(2.5rem, 0.945rem + 7.32vw, 4.375rem);
}

#reason .reason-title-main-right {
  font-size: clamp(2.5rem, 0.945rem + 7.32vw, 4.375rem);
}

/* 幅が狭いときは余白を防ぐ：高さを内容に合わせ、タイトルを通常の流れに */
@media (max-width: 700px) {
  #reason .reason-bg {
    min-height: 0;
    padding-bottom: 32px;
  }

  #reason .reason-title {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 24px;
    text-align: center;
  }
}

#reason .arrow-01 {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-l);
}

#reason .reason-lead {
  margin: 0 0 var(--space-m);
  font-size: clamp(1.75rem, 1.128rem + 2.93vw, 2.5rem);
  font-weight: var(--font-weight-medium);
}

#reason .reason-off {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: var(--space-l);
}

#reason .reason-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem) 20px;
  border-radius: 999px;
  border: 2px solid #284b2f;
  color: var(--color-green-dark);
  font-weight: var(--font-weight-bold);
}

#reason .reason-amount {
  font-size: clamp(2.5rem, 1.2rem + 4vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  color: #284b2f;
}

#reason .reason-amount-num {
  font-size: 1.1em;
}

#reason .reason-line-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #004000;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

#reason .reason-line-cta-icon {
  font-size: 0.9em;
}

#reason .img-box {
  display: flex;
  margin-bottom: 30px;
  align-items: center;
}

#reason .img-1 {
  margin-bottom: 60px;
}

#reason .img-2 {
  margin-bottom: 60px;
}

#reason .img-3 {
  margin-bottom: 60px;
}

#reason .img-box img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 570px) {
  #reason .reason-off {
    flex-direction: column;
    margin-bottom: 170px;
  }
}

@media (max-width: 500px) {
  #price .price-inner {
    padding: 25px 0;
  }

  #price .price-heading-sub {
    margin-left: 60px;
  }
}

/************************** 
menu
**************************/

#menu .menu-bg {
  position: relative;
  max-width: 750px;
  margin: 0 auto;
  background-image: url("../uploads/title-bg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#menu .menu-title-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 24px;
}

#menu .menu-title-bg {
  display: block;
  vertical-align: bottom;
}

#menu .menu-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: clamp(1.875rem, 0.015rem + 9.3vw, 4.375rem);
  bottom: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-size: var(--font-size-fixed-xl); */
  font-weight: var(--font-weight-bold);
  color: var(--color-pure-white);
  z-index: 1;
}

#menu .menu-inner {
  position: relative;
  padding: 24px 16px 56px;
}

#menu .menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

#menu .menu-card {
  position: relative;
  padding: 24px 20px;
  height: 200px;
  background-color: #234a2f;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 40px 0px 0 0px;
  overflow: hidden;
}

/* 右下の二重線っぽいボーダー */
#menu .menu-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: inherit;
}

#menu .menu-card-line1 {
  margin: 0 0 8px;
  font-size: clamp(1rem, 0.636rem + 1.82vw, 2rem);
}

#menu .menu-card-line2 {
  margin: 0;
  font-size: clamp(1.125rem, 0.102rem + 5.12vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  /* 左から右に EAFF71 → FFFFFF のグラデーション文字色 */
  background: linear-gradient(to right, #eaff71 0%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#menu .menu-card-with-img {
  text-align: left;
}

#menu .menu-card-with-img .menu-card-line2 {
  font-size: 1.7em;
}

#menu .menu-card-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  margin-bottom: 4px;
}

#menu .menu-card-icon img {
  display: block;
  height: 1.1em;
  width: auto;
  vertical-align: middle;
}

@media (max-width: 570px) {
 
#menu .menu-card-with-img .menu-card-line2 {
  font-size: 1.2em;
}
}

/************************** 
mechanism
**************************/

#mechanism .mechanism-bg {
  /* 2枚の背景を個別に微調整できるように layered 指定 */
  background-size: cover, auto;
  background-position:
    top center,
    center -38px;
  background-repeat: no-repeat, no-repeat;
  padding-bottom: 30px;
}

#mechanism .mechanism-inner {
  max-width: 750px;
  margin: 0 auto;
  padding: 80px 24px;
}

#mechanism .mechanism-title {
  margin: 0;
  font-size: clamp(1.5rem, 0.909rem + 2.95vw, 3.125rem);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-top: 30px;
}

#mechanism .mechanism-title-large {
  font-size: 1.25em;
}

#mechanism .wrap {
  background-color: var(--color-pure-white);
  margin: 0px 16px 60px 16px;
  padding: 40px 16px;
  border: 1px solid #284b2f;
}

#mechanism .title-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

#mechanism .img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

#mechanism .img-wrap-2 {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#mechanism .heading-decorated {
  margin-bottom: 0px;
  text-align: left;
}

#mechanism .heading-decorated .heading-line {
  margin: 0;
}

/* この見出しだけフォントサイズを変更（お好みで数値を変更してください） */
#mechanism .wrap .title .heading-decorated .heading-line-text {
  font-size: clamp(1.375rem, 0.966rem + 2.05vw, 2.5rem);
}

#mechanism .img-wrap p,
#mechanism .img-wrap-2 p {
  font-size: clamp(1rem, 0.349rem + 3.26vw, 1.875rem);
  margin-bottom: 30px;
}

@media (max-width: 570px) {
  #mechanism .img-wrap {
    flex-direction: column;
  }

  #mechanism .wrap {
    padding: 40px 20px;
  }

  #mechanism .title-wrap {
    flex-direction: column;
  }

  #mechanism .number-1 {
    width: 60px;
  }

  #mechanism .number-1 img {
    width: 100%;
    height: auto;
  }

  #mechanism .img-wrap img {
    width: 200px;
    height: auto;
  }

  #mechanism .mechanism-inner {
    padding-bottom: 50px;
}
}

/**************************
effect
**************************/

#effect .effect-inner {
  max-width: 750px;
  margin: 0 auto;
  padding: 48px 16px;
  text-align: center;
}

#effect .effect-title-bubble {
  display: inline-block;
  margin: 0;
  padding: 24px 48px 55px;
  min-height: 80px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;
}

#effect .effect-title-line1 {
  display: block;
  font-size: clamp(1.25rem, 0.25rem + 5vw, 4rem);
  margin-bottom: 4px;
}

#effect .effect-title-line2 {
  display: block;
  font-size: clamp(1.875rem, 0.58rem + 6.48vw, 5.438rem);
  font-weight: var(--font-weight-bold);
}

/* 効果カード（画像＋テキスト） */
#effect .effect-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 750px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

#effect .effect-card {
  position: relative;
  background: #fff;
  text-align: center;
  overflow: hidden;
}

#effect .effect-card:nth-child(even) {
  margin-top: 90px;
}

#effect .effect-card-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

#effect .effect-card-text {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  padding: 12px 16px;
  bottom: 34px;
  font-size: var(--font-size-fixed-sm);
  color: var(--color-dark);
}

#effect .effect-card:nth-child(odd) .effect-card-text {
  bottom: 130px;
}

#effect .effect-card-line1 {
  display: block;
  font-size: clamp(0.875rem, 0.046rem + 3.9vw, 1.875rem);
  margin-bottom: 4px;
  color: var(--color-green-dark);
  font-weight: var(--font-weight-bold);
}

#effect .effect-card-line2 {
  display: block;
  font-size: var(--font-size-fixed-sm);
}

@media (max-width: 570px) {
  #effect .effect-card:nth-child(odd) .effect-card-text {
    bottom: 100px;
  }

  #effect .effect-card-text {
    bottom: 0px;
  }
  
}


/**************************
salon
**************************/

#salon .salon-inner {
  max-width: 750px;
  margin: 0 auto;
  padding: 90px 16px;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

#salon .salon-title {
  margin: 0;
  font-size: var(--font-size-fixed-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
}

/* スタッフセクションのタイトルブロック（salon と同じ見た目） */
#staff .salon-inner {
  max-width: 750px;
  margin: 0 auto;
  padding: 90px 16px;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  margin-bottom: 70px;
}

#staff .salon-title {
  margin: 0;
  font-size: var(--font-size-fixed-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
}

/* アクセス・営業時間セクションのタイトルブロック */
#access .salon-inner {
  max-width: 750px;
  margin: 0 auto;
  padding: 90px 16px;
  background-size: 100% auto;
  margin-bottom: 60px;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

#access .salon-title {
  margin: 0;
  font-size: var(--font-size-fixed-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
}

/* アクセス・営業時間の本文エリア */

#access .access-header {
  max-width: 750px;
  margin: 0 auto;
  padding: 20px 16px 16px;
  font-weight: 400;
  font-size: 20px;
  color: #333;
  text-align: center;
  border-top: 8px solid #3d6a3d;
  border-bottom: 8px solid #3d6a3d;
}

#access .access-body {
  max-width: 750px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  text-align: center;
}

#access .access-name {
  margin: 0 0 20px;
  font-size: clamp(1.75rem, 0.262rem + 7.44vw, 3.75rem);
  font-weight: var(--font-weight-bold);
  color: #333;
  line-height: 1.4;
}

#access .access-address,
#access .access-hours,
#access .access-tel {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 0.041rem + 6.05vw, 2.875rem);
  font-weight: 400;
  color: #333;
  line-height: 1.5;
}

#access .access-tel {
  margin-bottom: 0;
}

/* サロンメニュー（添付画像デザイン） */
#salon .salon-menu {
  max-width: 750px;
  margin: 0 auto;
  padding: 32px 16px 0px 16px;
  text-align: left;
}

#salon .salon-menu-category,
#salon .salon-other-category {
  display: inline-block;
  padding: 24px 32px;
  margin-bottom: 20px;
  background-color: var(--color-green-deep);
  color: #fff;
  font-size: clamp(1.25rem, 0.32rem + 4.65vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  border-radius: 40px 0 0 0;
  border: 2px solid #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 -3px 0 #ffffff;
}

#salon .salon-menu-category {
  position: relative;
}

#salon .salon-menu-category::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: inherit;
}

#salon .salon-other-category {
  position: relative;
  margin-left: 0;
  text-align: left;
}

#salon .salon-other-category::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: inherit;
}

#salon .salon-menu-list {
  margin-bottom: 32px;
}

#salon .salon-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
}

#salon .salon-menu-duration {
  display: inline-block;
  font-size: clamp(1.875rem, 0.015rem + 9.3vw, 4.375rem);
  padding: 6px 16px;
  background-color: #284b2f;
  font-weight: var(--font-weight-bold);
  color: #fff;
  border-radius: 16px 16px 0 0;
}

#salon .salon-menu-price {
  font-size: clamp(1.875rem, -0.198rem + 9.76vw, 4.375rem);
  font-weight: var(--font-weight-bold);
  color: #333;
}

#salon .salon-menu-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#salon .salon-menu-duration-text {
  font-size: var(--font-size-fixed-md);
  font-weight: var(--font-weight-medium);
  color: #333;
}

#salon .salon-menu-desc {
  font-size: var(--font-size-fixed-xs);
  color: #666;
  line-height: 1.5;
}

/* 他リラクゼーションメニュー */
#salon .salon-other {
  max-width: 750px;
  margin: 0 auto;
  padding: 0px 16px 56px 16px;
  text-align: left;
}

#salon .salon-other-list {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: clamp(1rem, 0.349rem + 3.26vw, 1.875rem);
  color: #333;
  line-height: 2;
  text-align: left;
}

#salon .salon-other-note {
  margin: 0 0 40px;
  color: #333;
  font-size: clamp(1rem, 0.349rem + 3.26vw, 1.875rem);
  line-height: 1.6;
}

#salon .salon-other-btn {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 500px;
  background: none;
  border: none;
  text-decoration: none;
}

#salon .salon-other-btn img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (max-width: 570px) {
  #salon .salon-other-btn {
    width: 100%;
  }

  #salon .salon-inner {
    padding: 45px 16px;
}
}

/**************************
staff
**************************/
#staff {
  margin-bottom: var(--space-xl);
}

@media (max-width: 570px) {
  #salon .salon-other-btn {
    width: 100%;
  }

  #staff {
    margin-bottom: 30px;
  }

  #staff img {
    padding: 0px 20px;
  }

  #staff .salon-inner {
    margin-bottom: 60px;
  }

  #staff .salon-inner {
    padding: 45px 16px;
  }
}


/**************************
access
**************************/

@media (max-width: 570px) {
  #access .salon-inner {
    margin-bottom: 0px;
}

#access .salon-inner {
  padding: 45px 16px;
}
}