[v-cloak] {
  display: none;
}

.l-header {
  background-color: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 101;
}

/* FV 画像のブロックは画面全幅にし、画像の左右をチャットエリアと同じ背景色にする。
   画像はヘッダー・チャットエリア (612) より広い 840 で中央に置く。 */
.p-fv {
  background-color: var(--color-bg);
}

/* FV は config.js が <html data-show-fv="true"> を付けたルートでのみ表示する。
   属性が無い (config.js 未実行) 場合も含め、既定は非表示。 */
html:not([data-show-fv="true"]) .p-fv {
  display: none;
}

.p-fv picture {
  display: block;
  margin: 0 auto;
  width: 840px;
}

@media screen and (max-width: 1079px) {
  .p-fv picture {
    width: calc(840 / 1080 * 100vw);
  }
}

@media screen and (max-width: 767px) {
  .p-fv picture {
    width: 100%;
  }
}

.p-fv img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- ヘッダー ----
   ロゴと進捗 (バー・残り問数) を FV 画像と同じ横幅に 1 行で収める。
   master.css (LP 共通) の .p-header 系をここで上書きする。 */
.p-header__inner {
  margin: 0 auto;
  padding: 0;
  width: 612px;
}

.p-header__logo {
  flex-shrink: 0;
}

.p-header__progress {
  width: 248px;
}

.p-header__progress__number {
  font-size: 17px;
  white-space: nowrap;
}

/* 進捗バーを出していない間 (「簡単60秒！」表示中) は下線を付ける。
   下線の色は routeId のカラーセットによらず黄色で固定する。 */
.p-header__progress[hidden] + .p-header__progress__number {
  border-bottom: 4px solid #ffd800;
  padding-bottom: 2px;
}

@media screen and (max-width: 1439px) {
  .p-header__progress {
    width: calc(248 / 1440 * 100vw);
  }

  .p-header__progress__number {
    font-size: calc(17 / 1440 * 100vw);
  }
}

@media screen and (max-width: 1079px) {
  .p-header__inner {
    width: calc(612 / 1080 * 100vw);
  }
}

@media screen and (max-width: 767px) {
  .p-header__inner {
    display: flex;
    padding: calc(16 / 375 * 100vw) calc(20 / 375 * 100vw);
    width: 100%;
  }

  .p-header__logo {
    width: calc(130 / 375 * 100vw);
  }

  .p-header__progress__wrapper {
    justify-content: flex-end;
  }

  .p-header__progress {
    margin-top: 0;
    width: calc(100 / 375 * 100vw);
  }

  .p-header__progress__number {
    font-size: calc(15 / 375 * 100vw);
    margin-left: calc(6 / 375 * 100vw);
    transform: none;
  }

  .p-header__progress__number span {
    font-size: calc(20 / 375 * 100vw);
  }
}

/* FV 画像を表示しているときは、FV とチャットの開始位置の間隔を通常 (master.css の 80 / スマホ 60) の半分にする。
   FV を表示しないルートでも #fv-block は DOM に残る (非表示になるだけ) ため、data-show-fv で判定する。 */
html[data-show-fv="true"] .p-fv + .l-main .p-chat__inner {
  padding-top: 40px;
}

@media screen and (max-width: 1079px) {
  html[data-show-fv="true"] .p-fv + .l-main .p-chat__inner {
    padding-top: calc(40 / 1080 * 100vw);
  }
}

@media screen and (max-width: 767px) {
  html[data-show-fv="true"] .p-fv + .l-main .p-chat__inner {
    padding-top: calc(30 / 375 * 100vw);
  }
}

.p-chat__form__question__content {
  min-width: 0;
  width: 100%;
}

.cf-message + .cf-message {
  margin-top: 12px;
}

.cf-message .cf-bubble {
  background-color: var(--color-white);
  border-radius: 10px;
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  padding: 20px 30px 21px;
  width: fit-content;
}

.cf-message .cf-bubble + .cf-bubble {
  margin-top: 12px;
}

/* マスタ (line_bot_step_message_mst.message) の HTML から参照される装飾クラス。
   色は CSS 変数経由のため routeId のカラーセット切替 (html[data-color-theme]) に追従する。
   cf-emphasis は設問のキーワード、cf-accent は吹き出し内の要所テキスト (実績値・特長)。 */
.cf-message .cf-bubble .cf-emphasis {
  color: var(--color-main);
}

.cf-message .cf-bubble .cf-accent {
  color: var(--color-main3);
}

.cf-message .cf-bubble .cf-link {
  color: var(--color-main3);
  text-decoration: underline;
}

/* 吹き出し要素の下に配置する補足注釈。吹き出し本文 (16px) より少し小さいサイズで表示する。 */
.cf-message .cf-note {
  color: rgba(37, 48, 68, 0.6);
  display: block;
  font-size: 13px;
  line-height: 18px;
  margin-top: 8px;
}

/* 注釈の後にさらに吹き出しが続く場合 (例: 注釈付きの説明文 → 次の設問) は、
   吹き出し同士の間隔 (.cf-bubble + .cf-bubble) と同じ余白を空ける。 */
.cf-message .cf-note + .cf-bubble {
  margin-top: 12px;
}

.cf-answer {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.cf-answer__bubble {
  background-color: var(--color-main);
  border-radius: 10px;
  color: var(--color-white);
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  max-width: 80%;
  padding: 14px 20px;
  white-space: pre-wrap;
}

.cf-answer__edit {
  background: transparent;
  color: var(--color-main3);
  cursor: pointer;
  font-size: 13px;
  margin-top: 8px;
  text-decoration: underline;
}

/* 送信中は見えなくするが、高さは保ったままにする (送信完了時のレイアウトのずれを防ぐ)。 */
.cf-answer__edit.is-hidden {
  visibility: hidden;
}

.cf-controls {
  margin-top: 30px;
}

.cf-choice-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cf-choice {
  align-items: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  border-radius: 10px;
  color: rgba(37, 48, 68, 0.7);
  cursor: pointer;
  display: flex;
  font-size: 16px;
  font-weight: bold;
  justify-content: center;
  min-height: 58px;
  padding: 10px 13px;
  text-align: center;
  transition: 0.2s;
  width: 100%;
}

.cf-choice:hover,
.cf-choice.is-selected {
  background-color: var(--color-main);
  color: var(--color-white);
}

/* 選択ボタン左のラジオボタン風の丸。未選択は薄い枠線のみ、ホバー / 選択時は白で塗りつぶす。
   ラベルの長さに関わらず丸の位置が揃うよう、ボタン左端からの固定位置に置き、
   ラベルは中央揃えのまま、丸と重ならないよう左側の余白だけを広げる
   (右側まで広げるとスマホ幅で短いラベルも折り返してしまうため)。 */
.cf-choice {
  padding-left: 40px;
  position: relative;
}

.cf-choice::before {
  background-color: var(--color-white);
  border: 2px solid var(--color-main);
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  height: 16px;
  left: 16px;
  opacity: 0.4;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s;
  width: 16px;
}

.cf-choice:hover::before,
.cf-choice.is-selected::before {
  border-color: var(--color-white);
  opacity: 1;
}

/* reCAPTCHA のバッジ (画面右下) は非表示にする。代わりの注釈はマスタ (8-1 の cf-note) で登録ボタンの上に出す。 */
.grecaptcha-badge {
  visibility: hidden;
}

.cf-choice:disabled,
.cf-submit:disabled,
.cf-input:disabled,
.cf-select:disabled,
.p-chat__form__question__content__submit button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.cf-input,
.cf-select {
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  border-radius: 10px;
  color: rgba(37, 48, 68, 0.8);
  font-size: 16px;
  height: 58px;
  padding: 0 20px;
  width: 100%;
}

/* プルダウンの上下矢印はカラーセットに合わせた色の画像を読み込む
   (SVG 内に色を直接持つため CSS 変数では切り替えられない)。 */
.cf-select {
  background-image: url(../img/icon_select_current.svg);
  background-position: right 20px center;
  background-repeat: no-repeat;
  background-size: 12px 25px;
}

:root[data-color-theme="legacy"] .cf-select {
  background-image: url(../img/icon_select.svg);
}

/* 新しいメッセージを表示した際の自動スクロールの停止位置。
   メッセージ部分を、ヘッダーの下に少し余白を空けた位置に合わせる。 */
.p-chat__form__question__inner {
  scroll-margin-top: 140px;
}

@media screen and (max-width: 1439px) {
  .p-chat__form__question__inner {
    scroll-margin-top: calc((100 / 1440 * 100vw) + 40px);
  }
}

.cf-error {
  color: var(--color-main3);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
  /* エラーコードとお問い合わせ番号を改行して表示する。 */
  white-space: pre-line;
}

.cf-submit {
  background-color: var(--color-main3);
  border-radius: 35px;
  color: var(--color-white);
  cursor: pointer;
  display: block;
  font-size: 17px;
  font-weight: bold;
  min-height: 58px;
  margin: 30px auto 0;
  padding: 12px 24px;
  transition: 0.2s;
  width: min(348px, 100%);
}

.cf-submit:hover {
  opacity: 0.8;
}

.cf-status {
  background-color: var(--color-white);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.7;
  margin: 30px 0;
  padding: 20px;
  text-align: center;
}

.cf-status--error {
  border: 1px solid var(--color-main3);
  color: var(--color-main3);
}

.cf-debug {
  background: #f5f7f8;
  border-radius: 6px;
  font-size: 12px;
  margin-top: 14px;
  overflow-wrap: anywhere;
  padding: 12px;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .cf-message .cf-bubble {
    border-radius: calc(10 / 375 * 100vw);
    font-size: calc(15 / 375 * 100vw);
    line-height: calc(23 / 375 * 100vw);
    padding: calc(18 / 375 * 100vw) calc(20 / 375 * 100vw);
  }

  .cf-message .cf-note {
    font-size: calc(12 / 375 * 100vw);
    line-height: calc(17 / 375 * 100vw);
    margin-top: calc(8 / 375 * 100vw);
  }

  .cf-controls {
    margin-left: calc(-80 / 375 * 100vw);
    width: calc(335 / 375 * 100vw);
  }

  .cf-choice-list {
    gap: calc(10 / 375 * 100vw);
  }

  .cf-choice {
    border-radius: calc(10 / 375 * 100vw);
    font-size: calc(15 / 375 * 100vw);
    min-height: calc(52 / 375 * 100vw);
    padding: calc(8 / 375 * 100vw);
  }

  .cf-choice {
    padding-left: calc(30 / 375 * 100vw);
  }

  .cf-choice::before {
    height: calc(14 / 375 * 100vw);
    left: calc(12 / 375 * 100vw);
    width: calc(14 / 375 * 100vw);
  }

  .cf-input,
  .cf-select {
    border-radius: calc(10 / 375 * 100vw);
    font-size: 16px;
    height: calc(52 / 375 * 100vw);
    padding: 0 calc(13 / 375 * 100vw);
  }

  .cf-select {
    background-position: right calc(13 / 375 * 100vw) center;
  }

  .p-chat__form__question__inner {
    scroll-margin-top: calc((61 / 375 * 100vw) + 24px);
  }

  /* 選択ボタンのラベルは、スマホ表示のときだけ決まった位置で改行する (app.js の splitChoiceLabel)。 */
  .cf-choice__break {
    display: block;
  }

  .cf-answer__bubble {
    font-size: calc(15 / 375 * 100vw);
    line-height: calc(23 / 375 * 100vw);
  }
}

.cf-modal {
  align-items: center;
  background-color: rgba(37, 48, 68, 0.6);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 20px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 200;
}

.cf-modal__body {
  background-color: var(--color-white);
  border-radius: 10px;
  max-height: 80vh;
  max-width: 640px;
  /* 利用規約内の長い URL で横スクロールが出ないよう、横方向ははみ出させない (.cf-modal__content で折り返す)。 */
  overflow-x: hidden;
  overflow-y: auto;
  padding: 40px 30px;
  position: relative;
  width: 100%;
}

.cf-modal__close {
  background: transparent;
  color: rgba(37, 48, 68, 0.5);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding: 4px;
  position: absolute;
  right: 12px;
  top: 12px;
}

.cf-modal__content {
  font-size: 14px;
  line-height: 1.8;
  /* 利用規約にリンク文字としてそのまま書かれた長い URL を、画面幅に収まるよう途中で折り返す。 */
  overflow-wrap: anywhere;
}

/* include している LP 側の利用規約 (privacy_modal_inc.html) に含まれる閉じるボタン。
   LP 側の CSS / JS は読み込んでいないため位置指定も動作もなく左上に出てしまう。
   閉じるボタンは自前の .cf-modal__close (右上) を使うため非表示にする。 */
.cf-modal__content .c-modal__close {
  display: none;
}