@charset "UTF-8";

/* ==========================================================================
   BBB LP - 予約フォーム（CONTACT / 確認画面 / 送信完了）
   design : PC 1920px  /  SP 393px
   ========================================================================== */

/* --------------------------------------------------------------------------
   共通トークン
   -------------------------------------------------------------------------- */
:root {
  --fm-lime: #ccdb24;
  --fm-green: #4bb845;
  --fm-req: #ff2c00;
  --fm-opt: #b5b5b5;
  --fm-field: rgba(204, 219, 36, .2);
  --fm-placeholder: #ccc;
  --fm-line: #ccc;
  --fm-text: #111;
  --fm-footer: #1a1a1a;
}

/* --------------------------------------------------------------------------
   CTA帯：<footer> の外へ移動したため、footer スコープだった指定を引き継ぐ
   （master.css の `footer .txtInd` 相当）
   -------------------------------------------------------------------------- */
.ctaWrap .txtInd {
  color: #fff;
  font-size: 15px;
  max-width: 1080px;
  margin: 20px auto 0;
  text-align: left;
}

@media screen and (max-width: 750px) {
  .ctaWrap .txtInd {
    width: 94%;
    margin: 15px auto 0;
    font-size: 3.2vw;
  }
}

/* --------------------------------------------------------------------------
   フォーム下層ページ（送信完了）共通
   完了画面は内容が短く、画面が余るとフッターの下に白場ができるため、
   フッターを画面下端へ寄せる（stickyフッター）。
   -------------------------------------------------------------------------- */
body.is-formPage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.is-formPage > footer#site-footer {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   フォーム下層ページ（送信完了）のヘッダー
   -------------------------------------------------------------------------- */
.formHead {
  width: 100%;
  background: #fff;
  height: 110px;
  display: flex;
  align-items: center;
  padding-left: 4.79%;
}

.formHead .logo {
  display: block;
  width: 190px;
}

.formHead .logo img {
  width: 100%;
}

@media screen and (max-width: 750px) {
  .formHead {
    height: 16.28vw;
    padding-left: 3.56%;
  }
  .formHead .logo {
    width: 32.06vw;
  }
}

/* --------------------------------------------------------------------------
   セクション見出し（グラデーション帯）
   -------------------------------------------------------------------------- */
.formTtl {
  position: relative;
  width: 100%;
  min-height: 328px;
  padding: 91px 0 15px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%), linear-gradient(90deg, var(--fm-lime) 0%, var(--fm-green) 100%);
  text-align: center;
}

.formTtl h2 {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 360px;
  line-height: 0;
}

.formTtl h2 img {
  width: 100%;
}

.formTtl .formTtl_lead {
  margin-top: 55px;
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
  text-align: center;
  color: var(--fm-text);
}

/* 送信完了ページ：グラデーション帯の高さは背景サイズで固定し、
   本文はその上に流し込む（カンプ同様に本文が帯の裾に重なる） */
.formTtl.is-thanks {
  min-height: 0;
  padding: 94px 0 91px;
  background-size: 100% 328px, 100% 328px;
  background-repeat: no-repeat;
  background-position: top left, top left;
}

.formTtl.is-thanks h2 {
  width: 441px;
}

@media screen and (max-width: 750px) {
  .formTtl {
    min-height: 43.26vw;
    padding: 9.16vw 0 0;
  }
  .formTtl h2 {
    width: 78.37vw;
  }
  .formTtl .formTtl_lead {
    margin-top: 3.31vw;
    font-size: 3.82vw;
    line-height: 1.53;
  }
  .formTtl.is-thanks {
    min-height: 0;
    padding: 11.7vw 0 10.9vw;
    background-size: 100% 71.5vw, 100% 71.5vw;
  }
  .formTtl.is-thanks h2 {
    width: 56.23vw;
  }
}

/* --------------------------------------------------------------------------
   フォーム本体
   -------------------------------------------------------------------------- */
.formSec {
  width: 100%;
  background: #fff;
  padding-bottom: 88px;
}

.formSec .formInner {
  max-width: 1200px;
  width: 94%;
  margin: 0 auto;
}

@media screen and (max-width: 750px) {
  .formSec {
    padding-bottom: 12.72vw;
  }
  .formSec .formInner {
    width: 89.31%;
  }
}

/* --- hacomono 予約ウィジェット ----------------------------------------------
   iframe の高さ・最大幅・センタリングは hacomono の widget.js が
   インラインスタイルで設定するため、ここでは余白のみを持たせる。
   （別オリジンのため iframe 内部にはCSSを適用できない）
   -------------------------------------------------------------------------- */
.formCalendar {
  width: 100%;
  margin-top: 46px;
}

.formCalendar iframe {
  display: block;
  width: 100%;
  min-height: 494px;
  border: 0;
}

@media screen and (max-width: 750px) {
  .formCalendar {
    margin-top: 7.12vw;
  }
  .formCalendar iframe {
    min-height: 125.95vw;
  }
}

/* --- 電話予約 -------------------------------------------------------------- */
.formTel {
  margin-top: 58px;
  text-align: center;
}

.formTel .formTel_lead {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  color: var(--fm-text);
}

.formTel .formTel_btn {
  display: block;
  width: 664px;
  max-width: 100%;
  margin: 8px auto 0;
  line-height: 0;
  transition: .2s;
}

.formTel .formTel_btn:hover {
  opacity: .85;
}

.formTel .formTel_btn img {
  display: block;
  width: 100%;
}

.formTel .formTel_note {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--fm-text);
}

@media screen and (max-width: 750px) {
  .formTel {
    margin-top: 12.21vw;
  }
  .formTel .formTel_lead {
    font-size: 3.31vw;
  }
  .formTel .formTel_btn {
    width: 89.31vw;
    margin-top: 4.07vw;
  }
  .formTel .formTel_note {
    margin-top: 3.05vw;
    font-size: 3.05vw;
  }
}

/* --------------------------------------------------------------------------
   送信完了
   -------------------------------------------------------------------------- */
.thanksInner {
  max-width: 1200px;
  width: 94%;
  margin: 0 auto;
}

.thanksInner .thanks_ttl {
  margin-top: 115px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--fm-text);
}

.thanksInner .thanks_txt {
  display: table;
  margin: 34px auto 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.63;
  text-align: left;
  color: var(--fm-text);
}

.formBack {
  margin-top: 30px;
  text-align: center;
}

.formBack a {
  display: inline-block;
  padding: 6px 10px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #9a9a9a;
  cursor: pointer;
}

.formBack a:hover {
  opacity: .7;
}

.thanksInner .formBack {
  margin-top: 48px;
}

@media screen and (max-width: 750px) {
  .thanksInner {
    width: 89.31%;
  }
  .thanksInner .thanks_ttl {
    margin-top: 10.18vw;
    font-size: 5.09vw;
  }
  .thanksInner .thanks_txt {
    display: block;
    margin-top: 6.87vw;
    font-size: 3.82vw;
    line-height: 1.67;
  }
  .formBack {
    margin-top: 4.07vw;
  }
  .formBack a {
    font-size: 3.56vw;
  }
  .thanksInner .formBack {
    margin-top: 8.4vw;
  }
}

/* --------------------------------------------------------------------------
   フッター（特商法 / プライバシーポリシー / コピーライト）
   -------------------------------------------------------------------------- */
footer#site-footer .footInner {
  width: 100%;
  background: var(--fm-footer);
  padding: 26px 0 4px;
}

footer#site-footer .footmenu {
  width: 100%;
  margin-top: 0;
  text-align: center;
}

footer#site-footer .footmenu li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 26px;
}

footer#site-footer .footmenu li a {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-decoration: underline;
}

footer#site-footer .copy {
  margin-top: 12px;
}

footer#site-footer .copy p {
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  padding: 0 0 14px;
}

@media screen and (max-width: 750px) {
  footer#site-footer .footInner {
    padding: 5.09vw 0 0;
  }
  footer#site-footer .footmenu li {
    margin: 0 3.56vw;
  }
  footer#site-footer .footmenu li a {
    font-size: 3.56vw;
  }
  footer#site-footer .copy {
    margin-top: 2.55vw;
  }
  footer#site-footer .copy p {
    font-size: 3.05vw;
    padding: 0 0 4.07vw;
  }
}

/* --------------------------------------------------------------------------
   SP固定CTAバー
   フッターに到達すると common.js が .is-active を外して非表示にするため、
   バーぶんの余白はフッター側に確保しない。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 750px) {
  .foot_cta .snsWrap a {
    display: block;
    width: 50%;
  }
}