/* 追加 or 修正 */
body {
  font-family: 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #3A2616;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: .05em;
  color: #3A2616 !important;
}

.navbar-nav .nav-link {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 0.95rem;
  color: #3A2616 !important;
}

/*  */
/* ヒーロー全体 */
/*  */
.hero-kohalu{
  width: 100%;
  min-height: clamp(420px, 70vh, 760px);
  background: url("2_FV_1.webp") center center / cover no-repeat;
  position: relative;
}

/* スマホで少し間隔調整したい場合 */
@media (max-width: 576px) {
  .hero-kohalu{
    width: 100%;
    min-height: clamp(420px, 70vh, 760px);
    background: url("2_FV_1_sp.webp") center center / cover no-repeat;
    position: relative;
  }
}


/* 下部の文字/ボタンが読みやすいように薄いグラデ */
.hero-kohalu::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
}

.hero-kohalu > .container{
  position: relative;
  z-index: 1;
}

/* ボタン共通 */
.hero-kohalu .btn-hero-primary,
.hero-kohalu .btn-hero-secondary{
  border-radius: 999px;
  font-weight: 700;
  padding: 0.9rem 1.2rem;
  text-align: center;
  width: 100%;          /* SPは横幅いっぱい */
}

/* PCでは幅auto */
@media (min-width: 768px){
  .hero-kohalu .btn-hero-primary,
  .hero-kohalu .btn-hero-secondary{
    width: auto;
    min-width: 260px;   /* お好みで */
  }
}

/* 色指定 */
.hero-kohalu .btn-hero-primary{
  background: #3A2616;
  border: 1px solid #3A2616;
  color: #fff;
}

.hero-kohalu .btn-hero-secondary{
  background: rgba(255,255,255,.92);
  border: 1px solid #3A2616;
  color: #3A2616;
}

/* hover */
.hero-kohalu .btn-hero-primary:hover{ opacity: .92; }
.hero-kohalu .btn-hero-secondary:hover{ opacity: .92; }

/* after fix botton */
:root{
  --kohalu-gold:#F2C94D; /* スクショの色 */
  --kohalu-brown:#3A2616;
}

.hero-kohalu .btn-hero-primary,
.hero-kohalu .btn-hero-secondary{
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 18px 42px;
  font-size: 20px;
  line-height: 1;
  width: 100%;              /* SPは横幅いっぱい */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}

@media (min-width: 768px){
  .hero-kohalu .btn-hero-primary,
  .hero-kohalu .btn-hero-secondary{
    width: auto;
    min-width: 360px;        /* スクショの横長感 */
  }
}

/* 左：塗り */
.hero-kohalu .btn-hero-primary{
  background: var(--kohalu-gold);
  border: 2px solid var(--kohalu-gold);
  color: var(--kohalu-brown);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

/* 右：アウトライン */
.hero-kohalu .btn-hero-secondary{
  background: transparent;
  border: 2px solid var(--kohalu-gold);
  color: var(--kohalu-gold);
}


/* <!-- 3_reasosn -->
<!-- 「なぜサウナ本舗KOHALUなのか」 --> */
.reason-section{
  background: #E7E1D7;
}

/*  */
/* 3_point */
/*  */
.FV2-section {
  width: 100%;
  margin: 0;
  padding: 0;   /* 余白いらなければ */
}

.FV2-section img {
  object-fit: cover; /* 必要なら：縦横比維持しつつカバー */
}

.price-banner-section {
  background: linear-gradient(180deg, #f5eee3 0%, #e8dccd 100%);
}

.price-banner-card {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 24px;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 20px 40px rgba(58, 38, 22, 0.12);
}

.price-banner-label {
  color: #8c6b47;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.price-banner-title {
  color: #3a2616;
  font-size: clamp(2.1rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
}

.price-banner-copy {
  max-width: 640px;
  margin: 0 auto;
  color: #5f4c3a;
  line-height: 1.8;
}

.detail-boost-section {
  background: #f8f4ee;
}

.detail-boost-image {
  border-radius: 24px;
  box-shadow: 0 18px 36px rgba(58, 38, 22, 0.16);
}

.detail-boost-copy {
  color: #3a2616;
}

.detail-boost-eyebrow {
  margin-bottom: 0.75rem;
  color: #8c6b47;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.detail-boost-title {
  margin-bottom: 1rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  line-height: 1.3;
}

.detail-boost-text {
  margin-bottom: 1.25rem;
  line-height: 1.9;
}

.detail-check-list {
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.9;
}

.detail-note-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #eadfce;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(58, 38, 22, 0.08);
}

.detail-note-title {
  margin-bottom: 0.75rem;
  color: #3a2616;
  font-size: 1.05rem;
  font-weight: 800;
}

.detail-note-text {
  color: #5f4c3a;
  line-height: 1.8;
}



/* 資料請求 */
/* セクション背景（外側のベージュ） */
.contact-section {
  background-color: #E3DCCE; /* 好きなベージュに調整してOK */
}

/* 白いカード部分 */
.contact-card {
  max-width: 900px;
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ラベル */
.contact-card .form-label {
  font-weight: 700;
  margin-bottom: 0.3rem;
}

/* インプット・セレクト共通 */
.contact-card .form-control,
.contact-card .form-select {
  border-radius: 6px;
  border-color: #d7cbb7;
  font-size: 0.95rem;
}

/* テキストエリア */
.contact-card textarea.form-control {
  resize: vertical;
}

/* ボタン共通（角丸＋影） */
.btn-contact {
  border-radius: 999px;
  border: none;
  padding: 0.8rem 1.5rem;
  font-weight: 700;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  text-decoration: none;
}

/* 左ボタン：黄色 */
.btn-contact-primary {
  background-color: #f6c94a;
  color: #3c3220;
}

/* 右ボタン：緑 */
.btn-contact-secondary {
  background-color: #2d6b43;
  color: #ffffff;
}

/* ボタンのテキスト折り返し対策 */
.btn-contact {
  white-space: nowrap;
}

/* SP時はフォーム全体を少しゆったり */
@media (max-width: 767.98px) {
  .contact-card {
    border-radius: 16px;
  }
  .btn-contact {
    width: 100%;
  }
}


/* スティッキーバナー */
/* 画面下に固定されるスティッキーバナー */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030; /* ナビより上に出したい場合は調整 */
  background-color: #3c3220; /* 背景の茶色 */
}

/* ボタン共通 */
.sticky-cta .btn-cta {
  border-radius: 999px;
  padding: 0.7rem 2.5rem;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  white-space: nowrap;
}

/* 左の黄色ボタン */
.sticky-cta .btn-cta-phone {
  background-color: #f7c94a;
  color: #3c3220;
}

/* 右の緑ボタン */
.sticky-cta .btn-cta-doc {
  background-color: #2d6b43;
  color: #ffffff;
}

/* モバイル時は縦並びに */
@media (max-width: 767.98px) {
  .sticky-cta .btn-cta {
    width: 100%;
  }
}

/* 商材ラインナップ ボタン */
/* 全体のフォント（必要なら） */
body {
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 横並び＆中央寄せ */
.mini-cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px; /* ボタン同士の間隔 */
  padding: 15px 0;
}

/* 共通ボタン */
.mini-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 60px;         /* 小さめサイズ */
  border-radius: 999px;      /* カプセル型 */
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* 左：黄色 */
.mini-pill-btn--yellow {
  background-color: #f3c94a;
  color: #3a2616;
}

/* 右：こげ茶 */
.mini-pill-btn--brown {
  background-color: #3a2616;
  color: #ffffff;
}

/* hover時の軽い浮き上がり */
.mini-pill-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.22);
  opacity: 0.95;
}

/* スマホで少し間隔調整したい場合 */
@media (max-width: 576px) {
  .mini-cta-buttons {
    gap: 16px;
  }
}


/*  */
/* ボタン2つの並びをレスポンシブ化 */
.mini-cta-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;   /* PCは中央寄せ */
  align-items: center;
}

/* ボタン共通（既存は活かしつつ、崩れないよう調整） */
.mini-pill-btn{
  max-width: 100%;
}

/* SP：縦並び・幅100%・文字小さめ */
@media (max-width: 767.98px){
  .mini-cta-buttons{
    flex-direction: column;
    align-items: stretch;
  }
  .mini-pill-btn{
    width: 100%;
    padding: 14px 18px;      /* 横がはみ出るの防止 */
    font-size: 18px;         /* 24pxだとSPでデカいので縮小 */
    white-space: normal;      /* 折り返し許可（はみ出し防止） */
    letter-spacing: 0.04em;
    line-height: 1.2;
  }
}

/* PC：横並び・横幅は内容に合わせる（必要なら） */
@media (min-width: 768px){
  .mini-pill-btn{
    width: auto;
  }
}

.footer-address {
  color: rgba(58, 38, 22, 0.84);
}