/**
 * レンタル（見積もり）フォーム用カスタムCSS
 * 当該ページのみ読み込み
 */

/* 必須未選択時のスクロール・確認画面遷移時のスクロールを即座に（ぬるっとした動きをなくす） */
html.rental-form-page {
  scroll-behavior: auto;
}

@media screen and (width <= 767px) {
  #page-rental-form.page {
    padding-top: 40px;
  }
}

/* rental-form 専用 h2（ヒーロータイトル） */
#page-rental-form .heading h2 {
  font-size: 5rem !important;
  font-style: normal;

  @media (width <= 767px) {
    font-size: 8vw !important;
    line-height: 1.3;
  }
}

/* タイトル下の注意書き（リスト形式） */
.rental-form-hero-note {
  margin: 1rem auto 0;
  padding: 0;
  max-width: 90%;
  font-weight: 400;
  line-height: 1.6;
  font-style: normal;
  text-align: left;
  color: #fff;
  margin-top: 24px;
  list-style: disc;
  display: inline-block;

  @media (width <= 767px) {
    max-width: 75%;
  }
}

.rental-form-hero-note li {
  margin-bottom: 0.3em;
  font-size: 1.4rem;

  @media (width <= 767px) {
    font-size: 3.5vw;
  }
}

.rental-form-hero-note li:last-child {
  margin-bottom: 0;
}

/* フッターを画面下に固定（コンテンツが少なくても下に寄せる） */
body.page-rental-form {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  height: auto !important;
}

body.page-rental-form .hero-content {
  flex: 0 0 auto !important;
  padding-bottom: 24px;
}

body.page-rental-form .main-contents {
  flex: 1 0 auto !important;
  min-height: 0 !important;
}

/* 送信完了画面：main-contents を伸ばさず余白を抑える */
body.rental-form-sent .main-contents {
  flex: 0 1 auto !important;
}

body.page-rental-form .rental-form-footer {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

.wq-Form .wq-Option > .wq--label > .wq--main > .wq--name {
  line-height: 1.3;
  margin-bottom: 8px;
}

#page-rental-form .wq-Form .rental-form-required {
  color: #eb4266;
}

/* 電話番号バリデーション：エラーが入力欄と重ならないよう配置 */
#page-rental-form .wq-Form .wq--message.rental-form-phone-error {
  position: static !important;
  display: block !important;
  margin-top: 8px;
  width: 100%;
  flex-shrink: 0;
  flex-basis: 100%; /* flex子の場合は必ず改行 */
  order: 10; /* 入力欄の後に表示 */
  clear: both;
}

/* SP：余白を多めにし重なりを防止 */
@media screen and (width <= 767px) {
  #page-rental-form .wq-Form .wq--message.rental-form-phone-error {
    margin-top: 20px !important;
    margin-bottom: 8px;
    min-height: 0;
  }

  /* .wq--body 内の電話エラー：flex子要素の並びを制御 */
  #page-rental-form .wq-Form .wq-Control:has(.wq--message.rental-form-phone-error) > .wq--body {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap;
  }

  #page-rental-form
    .wq-Form
    .wq-Control:has(.wq--message.rental-form-phone-error)
    .wq--message.rental-form-phone-error {
    margin-top: 10px !important;
  }

  /* フォールバック：.wq--body がない場合に afterend で挿入したブロック */
  #page-rental-form .wq-Form .wq-Control.rental-form-phone-error {
    margin-top: 16px !important;
  }
}

#page-rental-form .wq-Form input.rental-form-input-error {
  border-color: #c00 !important;
}

/* 電話エラー：.wq-Control 直後に挿入されるラッパー（SP重なり防止） */
#page-rental-form .wq-Form .rental-form-phone-error-wrap {
  width: 100%;
  margin-top: 8px;
}

#page-rental-form .wq-Form .rental-form-phone-error-wrap .wq--message.rental-form-phone-error {
  position: static !important;
  display: block !important;
  margin-top: 0;
}

@media screen and (width <= 767px) {
  #page-rental-form .wq-Form .rental-form-phone-error-wrap {
    margin-top: 16px;
    margin-bottom: 8px;
  }
}

/* 入力フォームの金額を非表示 */
.wq-Form .wq-Option > .wq--label > .wq--main > .wq--prices > .wq--price {
  display: none !important;
}

/* 入力・確認画面のみ。送信完了画面では非適用（AFormsの小計・消費税・合計を表示するため） */
body:not(.rental-form-sent) .wq-Form .wq-Monitor > .wq--entries > .wq--entry > .wq-for-normalUnitPrice,
body:not(.rental-form-sent) .wq-Form .wq-Monitor > .wq--entries > .wq--entry > .wq-for-unitPrice,
body:not(.rental-form-sent) .wq-Form .wq-Monitor > .wq--entries > .wq--entry > .wq-for-quantity,
body:not(.rental-form-sent) .wq-Form .wq-Monitor > .wq--entries > .wq--entry > .wq-for-price,
body:not(.rental-form-sent) .wq-Form .wq-Monitor > .wq--entries > .wq--entry > .wq-for-taxClass {
  display: none !important;
}

.wq-Form .wq-Option > .wq--label > .wq--main > .wq--note {
  line-height: 1.4;
  text-align: left !important;
}

/* 実施場所の .wq--note のみ中央寄せ */
#page-rental-form .wq-Form .wq-Selector.rental-form-field-location .wq--note {
  text-align: center !important;
}

/* 目的：チェックしても並び順を変えない（選択時に上に移動しない） */
#page-rental-form .wq-Form .wq-Selector.rental-form-field-purpose .wq-Option {
  order: unset !important;
}

/* AForms の top: 100px をオーバーライド（高さ20pxの項目でチェックボックスがずれるのを防ぐ） */
#page-rental-form .wq-Form .wq-Selector:has(.wq-Image) .wq-Option > .wq--input,
#page-rental-form .wq-Form .wq-Option > .wq--input {
  top: 0 !important;
}

/* 分岐で不要な項目（disabled）はグレーアウトではなく非表示にする */
#page-rental-form .wq-Form .wq-Option:has(input[disabled]) {
  display: none !important;
}

/* 画像の比率が違う場合でも拡大して表示（コンテナを埋める） */
#page-rental-form .wq-Form .wq--media .wq-Image {
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

#page-rental-form .wq-Form .wq-Image img.wq--img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 画像が未設定の場合はアイコンだけ非表示（コンテナや高さ指定は維持） */
#page-rental-form .wq-Form .wq-Image.wq-src-empty,
#page-rental-form .wq-Form .wq-Image.wq-src-empty img.wq--img {
  display: none !important;
}

/* 入力・確認画面のみ。送信完了ではフッター（小計・消費税・合計）を表示 */
body:not(.rental-form-sent) .wq-Form .wq-Monitor > .wq--footer {
  display: none !important;
}

.wq-Form .wq-Monitor > .wq--footer > .wq--entry.wq-for-total > .wq-for-value {
  color: #0062cc;
}

.wq--note a {
  color: #00449e;
  text-decoration: underline;
}

/* オプション3つ以上：「まるっとおまかせ」ポップアップ */
.rental-form-marutto-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
}

.rental-form-marutto-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 50%);
  cursor: pointer;
}

.rental-form-marutto-popup__inner {
  position: relative;
  z-index: 1;
  max-width: 400px;
  width: 100%;
  padding: 2.5rem;
  background: #fff;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 20px rgb(0 0 0 / 20%);
}

.rental-form-marutto-popup__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  font-size: 2.4rem;
  line-height: 1;
  color: #666;
  background: none;
  border: none;
  cursor: pointer;
}

.rental-form-marutto-popup__close:hover {
  color: #000;
}

.rental-form-marutto-popup__text {
  margin: 0 0 1.5rem;
  font-size: 1.6rem;
  line-height: 1.6;
}

.rental-form-marutto-popup__btn-wrap {
  margin: 0;
}

/* 送信完了画面 */
.rental-form-complete__inner {
  text-align: center;
  padding: 0;
}

.rental-form-complete__total {
  font-weight: 700;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.rental-form-complete__total-num {
  color: #0062cc;
  font-size: 1.4em;
}

.rental-form-complete__note {
  margin: 0 auto 3.5rem;
  padding-left: 0;
  max-width: 400px;
  color: #666;
  text-align: left;
  list-style: none;
}

.rental-form-complete__note li {
  position: relative;
  margin-bottom: 0.3em;
  padding-left: 1.2em;
  font-size: 1.4rem;
  line-height: 1.3;
}

.rental-form-complete__note li::before {
  content: "※";
  position: absolute;
  left: 0;
}

.rental-form-complete__note li:last-child {
  margin-bottom: 0;
}

.rental-form-complete__table-wrap {
  margin: 2rem 0;
  width: 100%;
  overflow-x: auto;
}

/* 送信完了画面：AForms結果で #、単価、数量、税区分を非表示 */
#rental-form-complete .wq-for-no,
#rental-form-complete .wq-for-index,
#rental-form-complete .wq-for-normalUnitPrice,
#rental-form-complete .wq-for-unitPrice,
#rental-form-complete .wq-for-quantity,
#rental-form-complete .wq-for-taxClass {
  display: none !important;
}

/* 送信完了画面のみ .wq-Attributes .wq-is-result を非表示 */
#rental-form-complete .wq-Attributes .wq-is-result,
#rental-form-complete .wq-Attributes.wq-is-result,
body.rental-form-sent .wq-Attributes .wq-is-result,
body.rental-form-sent .wq-Attributes.wq-is-result {
  display: none !important;
}

/* 送信完了画面のみ .section の padding を変更 */
@media screen and (width >= 1024px) and (width <= 1919px) {
  body.rental-form-sent .section {
    padding: 56px 0;
  }
}

/* 送信完了画面：金額列と総額（フッター）を表示 */
#rental-form-complete .wq-for-price {
  display: revert !important;
}

#rental-form-complete .wq-Monitor > .wq--footer,
#rental-form-complete .wq-Monitor .wq--footer,
body.rental-form-sent .wq-Monitor > .wq--footer,
body.rental-form-sent .wq-Monitor .wq--footer {
  display: block !important;
}

/* フッター：小計・消費税は黒、合計のみ青色 */
#rental-form-complete .wq-Monitor .wq--footer .wq--entry:not(.wq-for-total) .wq-for-value,
#rental-form-complete .wq-Monitor .wq--footer .wq--entry:not(.wq-for-total) .wq--prop .wq-for-value,
body.rental-form-sent .wq-Monitor .wq--footer .wq--entry:not(.wq-for-total) .wq-for-value,
body.rental-form-sent .wq-Monitor .wq--footer .wq--entry:not(.wq-for-total) .wq--prop .wq-for-value {
  color: #333 !important;
}

/* 総額フッター：合計行のみ太字・青色 */
#rental-form-complete .wq-Monitor .wq--footer .wq--entry.wq-for-total,
#rental-form-complete .wq-Monitor .wq--footer .wq--entry.wq-for-total .wq-for-value,
body.rental-form-sent .wq-Monitor .wq--footer .wq--entry.wq-for-total,
body.rental-form-sent .wq-Monitor .wq--footer .wq--entry.wq-for-total .wq-for-value {
  font-weight: 700 !important;
  color: #0062cc !important;
}

.rental-form-complete__message {
  font-size: 1.6rem;
  margin: -1rem auto 4rem;
  line-height: 1.8;
}

.rental-form-complete__back {
  margin-top: 1.5rem;
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  justify-content: center;
}

.rental-form-complete__back a {
  flex: 0 0 auto;
}

@media screen and (width >= 768px) {
  .rental-form-complete__back .btn {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
  }
}

@media screen and (width <= 767px) {
  .rental-form-complete__back {
    flex-direction: column;
  }

  .rental-form-complete__back a {
    width: 100%;
  }
}

/* rental-form 用ミニマルフッター */
.rental-form-footer {
  text-align: center;
  padding: 1.5rem 1rem;
}

.rental-form-footer__copyright {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 400;
  color: #fff;
}

/* 実施月・実施場所・目的の画像サイズ調整 */

/* 特定のフィールドラベルを含む要素内の画像のみに適用 */
#page-rental-form .wq-Form .wq-Field:has(.wq--label:contains("実施月")) .wp-image,
#page-rental-form .wq-Form .wq-Field:has(.wq--label:contains("実施場所")) .wp-image,
#page-rental-form .wq-Form .wq-Field:has(.wq--label:contains("目的")) .wp-image,
#page-rental-form .wq-Form .wq-Field:has-label("実施月") .wp-image,
#page-rental-form .wq-Form .wq-Field:has-label("実施場所") .wp-image,
#page-rental-form .wq-Form .wq-Field:has-label("目的") .wp-image {
  height: 20px !important;
  width: auto !important;
}

/* JavaScriptで追加されるクラスを使用（より確実な方法） */
#page-rental-form .wq-Form .field-month .wp-image,
#page-rental-form .wq-Form .field-location .wp-image,
#page-rental-form .wq-Form .field-purpose .wp-image {
  height: 20px !important;
  width: auto !important;
}