/*
 * 南千里ラクスマイル整体院 ブランドリフレッシュ
 * 2026-08-18
 * 既存 layout.css の後に読み込み、共通トーンと予約導線を整える。
 */
:root {
  --color01: #b8935a;
  --color02: #a94f3b;
  --color03: #4c3934;
  --color-bg-beige: #f1e8de;
  --color-bg-cream: #faf7f2;
  --color-text: #4c3934;
  --color-text-strong: #4c3934;
  --brand-ivory: #faf7f2;
  --brand-sand: #f1e8de;
  --brand-cocoa: #4c3934;
  --brand-cta: #a94f3b;
  --brand-cta-hover: #8b4031;
  --brand-gold: #b8935a;
  --brand-link: #7c3c2d;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--brand-cocoa);
  background: var(--brand-ivory);
  font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
  font-weight: 400;
  line-height: 1.9;
}

.jpKurenaido,
.jpSerifM,
.jpSerifB,
.en {
  font-family: 'Noto Serif JP', serif;
}

.jpKurenaido {
  letter-spacing: 0.08em;
}

.jpSerifB {
  font-weight: 600;
}

p,
li,
dd,
dt,
input,
textarea,
select,
button {
  font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(169, 79, 59, .42);
  outline-offset: 3px;
}

/* 共通ヘッダーとナビゲーション */
.siteHeader,
.spSiteHeader {
  background: rgba(250, 247, 242, .97);
  border-bottom: 1px solid rgba(184, 147, 90, .24);
}

.mainNav ul,
.humNavi {
  font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
}

.mainNav a,
.humNavi a,
.footNav a {
  color: var(--brand-cocoa);
  font-weight: 500;
}

.mainNav a:hover,
.humNavi a:hover,
.footNav a:hover {
  color: var(--brand-link);
}

.mainNav .navBookingLine,
.mainNav .navBookingHotpepper {
  display: flex;
  align-items: center;
}

.mainNav .navBookingLine a,
.mainNav .navBookingHotpepper a,
.humNavi .navBookingLine a,
.humNavi .navBookingHotpepper a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 999px;
  padding: 0 12px;
  font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

.mainNav .navBookingLine a {
  height: 36px !important;
}

.mainNav .navBookingLine a,
.humNavi .navBookingLine a {
  color: #fff;
  background: var(--brand-cta);
  border: 1px solid var(--brand-cta);
}

.mainNav .navBookingLine a:hover,
.humNavi .navBookingLine a:hover {
  color: #fff;
  background: var(--brand-cta-hover);
  border-color: var(--brand-cta-hover);
}

.mainNav .navBookingHotpepper {
  margin-left: 8px;
}

.mainNav .navBookingHotpepper a {
  height: auto !important;
  padding: 0 2px;
  color: var(--brand-cocoa);
  background: transparent;
  border: 0;
  font-size: 11px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.humNavi .navBookingHotpepper a {
  color: var(--brand-cocoa);
  background: #fff;
  border: 1px solid rgba(76, 57, 52, .45);
}

/* トップビュー：悩みから入り、未来へつなげる */
#pageMain {
  background: var(--brand-ivory);
}

#pageMain .topMv {
  position: relative;
}

#pageMain .topMv::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 78%;
  content: '';
  background: linear-gradient(90deg, rgba(250, 247, 242, .58) 0%, rgba(250, 247, 242, .42) 44%, rgba(250, 247, 242, .14) 72%, rgba(250, 247, 242, 0) 100%);
  pointer-events: none;
}

.leadBox {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 26px 18px;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: center;
}

.leadBox .heroTitle,
.leadBox .lead {
  margin: 0;
  color: var(--brand-cocoa);
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(28px, 3.25vw, 48px);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.45;
  text-shadow: 0 1px 12px rgba(250, 247, 242, .96), 0 0 20px rgba(250, 247, 242, .82);
}

.leadBox .heroSub {
  display: block;
  margin-top: 11px;
  color: var(--brand-cocoa);
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(18px, 1.65vw, 25px);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.65;
  text-shadow: 0 1px 10px rgba(250, 247, 242, .96), 0 0 16px rgba(250, 247, 242, .82);
}

.heroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.heroActions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  box-sizing: border-box;
  border-radius: 999px;
  padding: 11px 20px;
  font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.heroCtaPrimary {
  color: #fff !important;
  background: var(--brand-cta);
  border: 1px solid var(--brand-cta);
}

.heroCtaPrimary:hover {
  color: #fff !important;
  background: var(--brand-cta-hover);
  border-color: var(--brand-cta-hover);
}

.heroCtaSecondary {
  color: var(--brand-cocoa) !important;
  background: #fff;
  border: 1px solid rgba(76, 57, 52, .45);
}

/* ボタン、カード、本文の可読性 */
.btnA a,
.btnB a {
  color: #fff;
  background: var(--brand-cta);
  border-color: var(--brand-cta);
  font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
  font-weight: 700;
}

.btnA a:hover,
.btnB a:hover {
  color: #fff;
  background: var(--brand-cta-hover);
  border-color: var(--brand-cta-hover);
}

.ttlA,
.ttlB,
.ttlC,
.ttlD,
.singleTtl {
  color: var(--brand-cocoa);
}

.freeText a,
.singleContent a,
.seoText a {
  color: var(--brand-link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.twoRow .txtBox,
.threeCnt li,
.blogList li,
.faqWrap,
#cnt section {
  border-color: rgba(184, 147, 90, .28);
}

/* モバイルの固定予約導線 */
.fixBottom {
  background: var(--brand-ivory);
  border-top: 1px solid rgba(184, 147, 90, .34);
}

.fixBottomUl {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
}

.fixBottomUl li {
  flex: 1;
}

.fixBottomUl li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 999px;
  font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.fixBottomUl .line a {
  color: #fff;
  background: var(--brand-cta);
}

.fixBottomUl .hotpepper a {
  color: var(--brand-cocoa);
  background: #fff;
  border: 1px solid rgba(76, 57, 52, .45);
}

.fixBottom .circleBg {
  display: none;
}

@media screen and (max-width: 767px) {
  body {
    padding-bottom: 72px;
  }

  .leadBox {
    margin-right: 0;
    margin-left: 0;
    padding: 22px 18px 16px;
    background: transparent;
    text-align: left;
  }

  .leadBox .heroTitle,
  .leadBox .lead {
    font-size: clamp(27px, 8vw, 34px);
    letter-spacing: .035em;
    line-height: 1.5;
  }

  .leadBox .heroSub {
    margin-top: 10px;
    font-size: 19px;
    letter-spacing: .045em;
    line-height: 1.65;
  }

  .heroActions {
    justify-content: flex-start;
  }

  .heroActions a {
    flex: 1 1 210px;
  }

  .humNavi .navBookingLine,
  .humNavi .navBookingHotpepper {
    margin-top: 10px;
  }
}

/* アクセス・予約ページの予約案内 */
.bookingPanel {
  max-width: 780px;
  margin: 0 auto 80px;
  padding: 34px 28px;
  background: var(--brand-sand);
  border: 1px solid rgba(184, 147, 90, .34);
  text-align: center;
}

.bookingPanel h2 {
  margin: 0 0 12px;
  color: var(--brand-cocoa);
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(23px, 2.5vw, 30px);
  font-weight: 600;
  letter-spacing: .08em;
}

.bookingPanel p {
  margin: 0 auto 18px;
  color: var(--brand-cocoa);
  font-size: 15px;
  line-height: 1.9;
}

.bookingActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.bookingActions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  box-sizing: border-box;
  border-radius: 999px;
  padding: 11px 20px;
  font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.bookingLine {
  color: #fff !important;
  background: var(--brand-cta);
  border: 1px solid var(--brand-cta);
}

.bookingLine:hover {
  color: #fff !important;
  background: var(--brand-cta-hover);
  border-color: var(--brand-cta-hover);
}

.bookingHotpepper {
  color: var(--brand-cocoa) !important;
  background: #fff;
  border: 1px solid rgba(76, 57, 52, .45);
}

@media screen and (max-width: 767px) {
  .bookingPanel {
    margin: 0 14px 48px;
    padding: 28px 18px;
  }

  .bookingActions a {
    flex: 1 1 210px;
  }
}

/* 悩み別・方針ページの共通レイアウト */
.brandPageHero {
  padding: 78px 24px 64px;
  background: var(--brand-sand);
  border-bottom: 1px solid rgba(184, 147, 90, .34);
}

.brandPageHeroInner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.brandEyebrow {
  margin: 0 0 12px;
  color: var(--brand-gold);
  font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
}

.brandPageHero h1 {
  margin: 0;
  color: var(--brand-cocoa);
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: .075em;
  line-height: 1.45;
}

.brandPageLead {
  max-width: 700px;
  margin: 20px auto 0;
  color: var(--brand-cocoa);
  font-size: 16px;
  line-height: 1.9;
}

.brandBread {
  max-width: 1080px;
  margin: 28px auto 0;
  padding: 0 24px;
}

.brandContentMain {
  max-width: 840px;
  margin: 0 auto;
  padding: 52px 24px 88px;
}

.brandContent h2 {
  margin: 62px 0 22px;
  color: var(--brand-cocoa);
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.5;
}

.brandContent h2:first-child {
  margin-top: 0;
}

.brandContent h3 {
  margin: 36px 0 14px;
  color: var(--brand-cocoa);
  font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.65;
}

.brandContent p,
.brandContent li {
  color: var(--brand-cocoa);
  font-size: 16px;
  line-height: 2;
}

.brandContent p {
  margin: 0 0 18px;
}

.brandContent ul {
  margin: 0 0 22px;
  padding: 24px 26px 24px 44px;
  background: var(--brand-sand);
}

.brandContent li {
  margin: 0 0 8px;
}

.brandContent .brandNote {
  margin: 32px 0;
  padding: 22px 24px;
  border-left: 4px solid var(--brand-gold);
  background: #fff;
}

.brandContent .brandNote p:last-child {
  margin-bottom: 0;
}

.brandContentBooking {
  margin-top: 72px;
}

@media screen and (max-width: 767px) {
  .brandPageHero {
    padding: 52px 18px 44px;
  }

  .brandPageHero h1 {
    font-size: 30px;
    letter-spacing: .045em;
  }

  .brandPageLead,
  .brandContent p,
  .brandContent li {
    font-size: 16px;
  }

  .brandBread {
    padding: 0 18px;
  }

  .brandContentMain {
    padding: 40px 18px 64px;
  }

  .brandContent h2 {
    margin-top: 48px;
    font-size: 25px;
  }

  .brandContent ul {
    padding: 20px 20px 20px 36px;
  }
}

/* ゴールドは罫線・小さなアクセントのみに限定し、面・帯には使わない */
.headInfo {
  background: var(--brand-ivory);
}

.headInfo dt {
  color: var(--brand-cocoa) !important;
  background: var(--brand-sand) !important;
}

.circleBg {
  color: var(--brand-cocoa);
  background: var(--brand-sand);
}

.siteHeader,
.spSiteHeader,
.headInfo,
.telWrap,
.fixBottom {
  border-color: rgba(184, 147, 90, .42);
}

@media screen and (max-width: 767px) {
  /* モバイルは「言葉 → 写真 → 固定予約」の順に分離する */
  #pageMain {
    display: flex;
    flex-direction: column;
    background: var(--brand-ivory);
  }

  #pageMain .leadBox {
    order: 0;
    position: static !important;
    width: auto !important;
    max-width: none;
    min-height: auto !important;
    margin: 0;
    padding: 25px 22px 21px;
    background: var(--brand-ivory);
    text-align: left;
  }

  #pageMain .topMv,
  #pageMain .topMvStatic {
    order: 1;
    position: static;
    width: 100%;
    min-height: 0 !important;
    margin: 0;
    overflow: hidden;
  }

  #pageMain .topMv::before {
    display: none;
  }

  #pageMain .topMvStatic picture,
  #pageMain .topMvStatic img {
    display: block;
    width: 100%;
    height: auto !important;
  }

  #pageMain .heroTitle {
    color: var(--brand-cocoa);
    font-size: clamp(26px, 7.4vw, 34px);
    font-weight: 600;
    letter-spacing: .035em;
    line-height: 1.48;
    text-shadow: none;
  }

  #pageMain .heroSub {
    margin-top: 12px;
    color: var(--brand-cocoa);
    font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .045em;
    line-height: 1.8;
    text-shadow: none;
  }

  /* 予約は下部の固定2ボタンへ集約するため、写真内CTAは表示しない */
  #pageMain .heroActions {
    display: none;
  }

  .telWrap {
    margin-top: 0;
    background: var(--brand-ivory);
  }

  .telWrap .circleBg {
    color: var(--brand-cocoa);
    background: var(--brand-sand);
  }

  .fixBottom {
    background: var(--brand-ivory);
  }

  .fixBottomUl {
    gap: 8px;
    padding: 8px 12px;
  }

  .fixBottomUl li a {
    min-height: 46px;
    border-radius: 12px;
    font-size: 14px;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .fixBottomUl .line a {
    color: #fff;
    background: var(--brand-cta);
  }

  .fixBottomUl .hotpepper a {
    color: var(--brand-cocoa);
    background: #fff;
    border-color: rgba(76, 57, 52, .38);
  }
}

/* ヒーロー見出しは、悩み・言葉のまとまりを途中で切らない */
.heroLine {
  display: block;
}

.heroPhrase {
  display: inline-block;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  #pageMain .heroLineFirst,
  #pageMain .heroLineSecond {
    display: block;
  }

  #pageMain .heroLineSecond {
    margin-top: .08em;
  }
}

/* モバイルのヒーローは、写真上に言葉を重ねる。分離帯は設けない。 */
@media screen and (max-width: 767px) {
  #pageMain {
    display: block;
    background: #fbfaf7;
  }

  #pageMain .leadBox {
    display: flex;
    position: absolute !important;
    z-index: 3;
    top: 0;
    left: 5%;
    width: 90% !important;
    height: 100% !important;
    max-width: none;
    min-height: 0 !important;
    margin: 0;
    padding: 0 12px;
    background: transparent;
    text-align: center;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    pointer-events: none;
  }

  #pageMain .topMv,
  #pageMain .topMvStatic {
    display: block;
    position: static;
    width: 100%;
    min-height: 0 !important;
    margin: 0;
    overflow: hidden;
  }

  #pageMain .topMv::before {
    display: block;
    z-index: 1;
    width: 72%;
    background: linear-gradient(90deg, rgba(251, 250, 247, .72) 0%, rgba(251, 250, 247, .54) 48%, rgba(251, 250, 247, .08) 100%);
  }

  #pageMain .topMvStatic picture,
  #pageMain .topMvStatic img {
    display: block;
    width: 100%;
    height: auto !important;
  }

  #pageMain .heroTitle {
    width: 100%;
    color: var(--brand-cocoa);
    font-size: clamp(23px, 6.25vw, 28px);
    font-weight: 600;
    letter-spacing: .025em;
    line-height: 1.48;
    text-shadow: 0 1px 9px rgba(251, 250, 247, .94), 0 0 16px rgba(251, 250, 247, .84);
  }

  #pageMain .heroSub {
    margin-top: 10px;
    color: var(--brand-cocoa);
    font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .035em;
    line-height: 1.7;
    text-shadow: 0 1px 8px rgba(251, 250, 247, .94), 0 0 14px rgba(251, 250, 247, .84);
  }

  #pageMain .heroActions {
    display: none;
  }
}