@charset "UTF-8";
/* ==========================================================================
   assessment.css — 無料査定フォーム（チャット式）ページ個別スタイル

   入力欄・エラー・同意欄・送信ボタンの見た目は form.css（.p-form 配下）を流用し、
   ここではチャットの吹き出しと出し分け・順送りの見せ方だけを持つ。
   ========================================================================== */

/* --------------------------------------------------------------------------
   出し分け（JS が data-show を書き換える）
   参照元は data-target と data-show が混在していたが data-show に統一している。
   -------------------------------------------------------------------------- */
.p-chat [data-show="hidden"] { display: none; }

/* 読み上げソフト専用（画面には出さない） */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* JS 無効時の案内。送信処理も JS に依存しているため、その旨を伝える */
.p-chat__noscript {
  margin: 0 0 32px;
  padding: 18px 22px;
  border-left: 4px solid #c00;
  background: #fff5f5;
  line-height: 1.8;
}
.p-chat__noscript a { color: var(--c-blue, #1b64c8); text-decoration: underline; }

/* --------------------------------------------------------------------------
   お電話での申し込み案内（見出しとフォームの間）
   -------------------------------------------------------------------------- */
.p-form-tel {
  max-width: 900px;
  margin: 0 auto 32px;
  padding: 22px 24px;
  border: 2px solid var(--c-blue, #1b64c8);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

.p-form-tel__lead {
  margin: 0 0 6px;
  font-size: var(--fz-body);
  font-weight: 700;
  color: var(--c-navy, #14294b);
}

.p-form-tel__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-blue, #1b64c8);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  text-decoration: none;
}
.p-form-tel__num:hover { opacity: .8; }

.p-form-tel__icon {
  flex: none;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 1a1 1 0 0 1 .9.6l1.1 2.5a1 1 0 0 1-.2 1.1L4.3 6.3a11 11 0 0 0 5.4 5.4l1.1-1.1a1 1 0 0 1 1.1-.2l2.5 1.1a1 1 0 0 1 .6.9V15a1 1 0 0 1-1 1A14 14 0 0 1 0 2a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 1a1 1 0 0 1 .9.6l1.1 2.5a1 1 0 0 1-.2 1.1L4.3 6.3a11 11 0 0 0 5.4 5.4l1.1-1.1a1 1 0 0 1 1.1-.2l2.5 1.1a1 1 0 0 1 .6.9V15a1 1 0 0 1-1 1A14 14 0 0 1 0 2a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.p-form-tel__note {
  margin: 6px 0 0;
  font-size: var(--fz-min);
  color: #666;
}

@media screen and (max-width: 767px) {
  .p-form-tel { padding: 18px 16px; }
}

/* --------------------------------------------------------------------------
   トーク画面（LINE のような見た目）
   -------------------------------------------------------------------------- */
.p-chat {
  padding: 28px 20px 40px;
  border-radius: 12px;
  background: #8fa9c8;          /* トーク画面の壁紙 */
}
.p-chat .p-form__lead { color: #fff; }
.p-chat .p-form__lead a { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   ブロック（1つの吹き出し＝1つの質問）
   -------------------------------------------------------------------------- */
.p-chat__block { margin: 0 0 28px; }

/* 表示待ち（JS が順番に外す）。display:none にすると必須判定から外れてしまうので
   visibility で隠す。高さも潰して、出てくるまで場所を取らないようにする。 */
.p-chat .is-staged {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 入力中インジケーター（●●●） */
.p-chat__typing {
  display: none;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin: 0 0 10px 64px;
  padding: 14px 18px;
  border-radius: 4px 18px 18px 18px;
  background: #fff;
}
.p-chat__block.is-typing .p-chat__typing { display: flex; }
.p-chat__typing span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #b6c0cc;
  animation: p-chat-dot 1.2s infinite ease-in-out;
}
.p-chat__typing span:nth-child(2) { animation-delay: .2s; }
.p-chat__typing span:nth-child(3) { animation-delay: .4s; }

@keyframes p-chat-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

@keyframes p-chat-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .p-chat__balloon { animation: none; }
  .p-chat__typing span { animation: none; }
}

/* --------------------------------------------------------------------------
   吹き出し（当社からの質問。左側）
   -------------------------------------------------------------------------- */
.p-chat__balloon {
  position: relative;
  display: inline-block;
  max-width: min(100%, 640px);
  margin: 0 0 10px 64px;        /* アイコンのぶん空ける */
  padding: 14px 20px;
  border-radius: 4px 18px 18px 18px;
  background: #fff;
  color: #333;
  font-size: var(--fz-body);
  line-height: 1.7;
  animation: p-chat-pop .25s ease both;
}

/* アイコン（吹き出しの左に出す）。丸の中でロゴをできるだけ大きく見せる */
.p-chat__balloon::before {
  content: "";
  position: absolute;
  left: -64px;
  top: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff url("../../img/common/logo.png") no-repeat center / 46px auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.p-chat__balloon p { margin: 0; }
.p-chat__balloon p + p { margin-top: 6px; }

.p-chat__balloon-note {
  font-size: var(--fz-min);
  line-height: 1.7;
  color: #777;
}

/* --------------------------------------------------------------------------
   回答エリア（入力欄。白いカードにまとめる）
   -------------------------------------------------------------------------- */
.p-chat__answer {
  margin: 0 0 0 64px;
  padding: 20px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
}

.p-chat__field { margin: 0 0 28px; border: 0; padding: 0; }
.p-chat__field:last-child { margin-bottom: 0; }

.p-chat__label {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  font-weight: 700;
  font-size: var(--fz-body);
  color: var(--c-navy, #14294b);
}

.p-chat__label .req,
.p-chat__label .any {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fz-min);
  font-weight: 700;
  vertical-align: middle;
}
.p-chat__label .req { background: #c00; color: #fff; }
.p-chat__label .any { background: var(--c-line, #eef2f6); color: var(--c-navy, #14294b); }

.p-chat__link {
  color: var(--c-blue, #1b64c8);
  text-decoration: underline;
}
.p-chat__link:hover { text-decoration: none; }

/* 入力が通った項目に出す OK マーク（緑の丸に白いチェック）。
   位置の基準にするため .p-chat__field を relative にしている。 */
.p-chat__field { position: relative; }

.p-chat__field.is-ok > .p-chat__label::after,
.p-chat__field.is-ok > legend.p-chat__label::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  border-radius: 50%;
  background: #06c755 no-repeat center / 12px auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.3 2.1 8.2l1.5-1.5 2.6 2.6 6.2-6.2 1.5 1.5z' fill='%23fff'/%3E%3C/svg%3E");
  vertical-align: middle;
  animation: p-chat-ok .25s ease both;
}

@keyframes p-chat-ok {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .p-chat__field.is-ok > .p-chat__label::after { animation: none; }
}

.p-chat__note {
  margin: 0 0 10px;
  font-size: var(--fz-min);
  line-height: 1.7;
  opacity: .8;
}

/* チャットでは1問が短いので、共通の textarea（min-height:200px）を低くする */
.p-chat textarea { min-height: 96px; }

/* --------------------------------------------------------------------------
   ラジオ・チェックボックス（見た目はボタン）

   丸やチェック枠は出さず、押せるボタンとして見せる。選択中は塗りで示す。
   input は消さずに透明にしてボタン全面へ重ねる（キーボード操作と
   支援技術のために要素は残す必要があるため）。
   -------------------------------------------------------------------------- */
/* 選択肢はすべて等幅で並べる。入る数だけ横に並び、あふれたら次の行へ折り返す。 */
.p-chat__radios,
.p-chat__checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

/* 物件の種別のように数が決まっているもの。PC は4列、SP は2列 */
.p-chat__radios--grid,
.p-chat__checks--grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* はい／いいえ の2択。横に広がりすぎないよう幅を抑える */
.p-chat__radios--grid2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 420px;
}

.p-chat__radio,
.p-chat__check {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 22px;
  border: 1px solid var(--c-line, #d7dee6);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  font-size: var(--fz-body);
  line-height: 1.4;
  transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s;
}

/* 透明にしてボタン全面に重ねる（見えないがクリックもフォーカスもできる） */
.p-chat__radio input,
.p-chat__check input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.p-chat__radio:hover,
.p-chat__check:hover {
  border-color: var(--c-blue, #1b64c8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

/* 選択中は塗りつぶす */
.p-chat__radio:has(input:checked),
.p-chat__check:has(input:checked) {
  border-color: var(--c-blue, #1b64c8);
  background: var(--c-blue, #1b64c8);
  color: #fff;
  font-weight: 700;
}

/* 「いいえ」は薄い赤で示す（どちらを選んだか見分けやすくするため） */
.p-chat__radio:has(input[value="いいえ"]:checked) {
  border-color: #d64545;
  background: #fdecec;
  color: #b02020;
}

.p-chat__radio:has(input:focus-visible),
.p-chat__check:has(input:focus-visible) {
  outline: 2px solid var(--c-blue, #1b64c8);
  outline-offset: 2px;
}

/* 複数選べることが分かるよう、チェックボックスは選択中に印を付ける */
.p-chat__check:has(input:checked)::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.3 2.1 8.2l1.5-1.5 2.6 2.6 6.2-6.2 1.5 1.5z' fill='%23fff'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   郵便番号・単位つき入力
   -------------------------------------------------------------------------- */
.p-chat__zip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.p-chat__zipbtn {
  padding: 12px 20px;
  border: 1px solid var(--c-blue, #1b64c8);
  border-radius: 999px;
  background: #fff;
  color: var(--c-blue, #1b64c8);
  font-size: var(--fz-min);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.p-chat__zipbtn:hover { background: var(--c-blue, #1b64c8); color: #fff; }

/* 「郵便番号がわからない方はこちら」。主役の「住所自動入力」と競わないよう、
   同じ形のまま罫線と文字を控えめにする。 */
.p-chat__zipbtn--sub {
  padding: 8px 16px;
  border-color: var(--c-line, #d7dee6);
  color: var(--c-text, #333);
  font-weight: 400;
}
.p-chat__zipbtn--sub:hover { background: var(--c-bg-gray, #f3f5f7); color: var(--c-text, #333); }

/* 「郵便番号がわからない方はこちら」を押したあと。
   ⚠ 欄を消さないこと。突然消えると何が起きたのか分からない画面になる（2026-09-11 ユーザー指摘）。
   欄は残したまま、打てないことが見て分かる状態にする。 */
.p-chat__field.is-disabled { opacity: 0.55; }
.p-chat__field.is-disabled input,
.p-chat__field.is-disabled .p-chat__zipbtn {
  background: var(--c-bg-gray, #f3f5f7);
  cursor: not-allowed;
}

/* 答え終わった選択肢は確定させる（チャットなので選び直させない）。
   ⚠ disabled は使えない。FormData に含まれず、選んだ答えが送信されなくなる。
   選ばなかったほうだけ薄くして、操作だけ止める。 */
.p-chat__field.is-locked .p-chat__radios { pointer-events: none; }
.p-chat__field.is-locked .p-chat__radio:not(:has(input:checked)) { opacity: 0.45; }

.p-chat__unit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.p-chat__unit-text { font-size: var(--fz-body); white-space: nowrap; }

/* --------------------------------------------------------------------------
   現住所などの追加入力・注意文・任意欄の見出し
   -------------------------------------------------------------------------- */
/* 追加入力（現住所など）。塗りつぶすと本体から浮いて見えるため、左の罫線だけで示す。 */
.p-chat__sub {
  margin: 24px 0 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--c-line, #d7dee6);
}
.p-chat__subttl { margin: 0 0 16px; font-weight: 700; }

.p-chat__strong {
  margin: 16px 0 0;
  padding: 14px 18px;
  border-left: 4px solid #c00;
  background: #fff5f5;
  font-size: var(--fz-min);
  line-height: 1.8;
}

/* 任意項目だけのブロックを進める「次へ」 */
.p-chat__next { margin: 28px 0 0; }
.p-chat__nextbtn {
  padding: 14px 40px;
  border: 1px solid var(--c-blue, #1b64c8);
  border-radius: 999px;
  background: var(--c-blue, #1b64c8);
  color: #fff;
  font-size: var(--fz-body);
  font-weight: 700;
  cursor: pointer;
}
.p-chat__nextbtn:hover { opacity: .85; }

/* 未入力の質問が残っているときに送信ボタンの上に出す */
.p-chat__submit-hint {
  margin: 0 0 16px;
  color: #c00;
  font-size: var(--fz-min);
  font-weight: 700;
}

.p-chat__optional {
  margin: 0 0 24px;
  font-size: var(--fz-min);
  opacity: .8;
}

/* --------------------------------------------------------------------------
   SP
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .p-chat__block { margin-bottom: 36px; }
  .p-chat__answer { margin-left: 0; padding: 16px; }
  .p-chat__balloon { margin-left: 54px; padding: 12px 16px; }
  .p-chat__typing { margin-left: 54px; }
  .p-chat__balloon::before { left: -54px; width: 44px; height: 44px; background-size: 38px auto; }
  .p-chat__radios,
  .p-chat__checks { gap: 8px; }
  .p-chat__radios--grid,
  .p-chat__checks--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-chat__radio,
  .p-chat__check { min-height: 48px; padding: 10px 12px; }
  .p-chat__zipbtn { width: 100%; }
}