@charset "UTF-8";

/*
 * report.michisapo.jp 共通スタイル
 *
 * Bootstrap 5.3 を土台にし、ここには上書きと固有のスタイルだけを書く。
 * 配色は Bootstrap の既定をそのまま使う（doc/report/02-画面仕様.md 2.2）。
 * ブランドカラーを当てる場合は、個別セレクタではなく :root の
 * CSS 変数（--bs-primary 等）を上書きすること。
 */

/* --------------------------------------------------------------
 * 初期表示のちらつき防止
 *
 * Haori.js の初期化が終わるまで data-if / data-if-false は評価されず、
 * フォームと完了ブロックが同時に見えてしまう。初期化完了で <body> に
 * 付与される data-haori-ready を使って、それまで隠しておく。
 * 領域を保持するため display ではなく visibility を使う。
 * -------------------------------------------------------------- */
body:not([data-haori-ready]) #state {
  visibility: hidden;
}

/* --------------------------------------------------------------
 * ハニーポット
 *
 * 人には見せず、ボットには通常の入力欄に見せる。
 * display:none や data-if で DOM から消すと、送信データに含まれなくなり
 * ボットにも気づかれるため、画面外へ飛ばす方法を採る。
 * -------------------------------------------------------------- */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------
 * 相談フォーム
 * -------------------------------------------------------------- */

/* 設問 5（どのようなことがありましたか）は最大 8,000 字を想定しているため、
   初期表示から十分な高さを確保する。 */
.detail-area {
  min-height: 18rem;
}

/* JavaScript 無効時に mail.php が返すエラー画面で、入力内容の控えを
   表示するための領域（doc/report/02-画面仕様.md 2.8）。 */
.input-copy {
  width: 100%;
  font-size: 0.875rem;
}

/* 設問の見出し。fieldset/legend の既定サイズを抑える。 */
legend.h6 {
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------
 * タップ領域の確保
 *
 * Bootstrap 既定ではチェックボックス・ラジオが 16px 角、入力欄が 38px 高で、
 * スマートフォンでは押しにくい。選択肢の多いフォームなので、行全体を
 * 広げてタップしやすくする。
 * -------------------------------------------------------------- */
.form-control,
.form-select {
  min-height: 2.75rem;
}

/* チェックボックス・ラジオの間隔
 *
 * 横（ラベルとの間隔）も縦（選択肢同士の間隔）も、直感で触ると
 * 見た目が変わらないプロパティがあるので、値の意味を書き残す。
 *
 * 【横】Bootstrap はチェックボックスを float させ、負の margin-left で
 * padding の内側から左へ引き出す。ラベルの文字は padding-left の
 * 位置から始まるため、それぞれの値が効く先は次のとおり。
 *
 *   ラベルとの間隔 = |margin-left| - width
 *   行全体の左インデント = padding-left - |margin-left|
 *
 * さらに Bootstrap 側の指定が `.form-check .form-check-input`（詳細度 0,2,0）で
 * 書かれているため、単独の `.form-check-input` に margin-left を書いても
 * 負ける。-1.5em(24px) が残り、間隔は 4px まで詰まる。**同じ詳細度で書く。**
 *
 * 【縦】行の高さは padding ではなく min-height で決まる（min-height の方が
 * 大きいため）。padding だけを減らしても詰まらないので対で動かす。
 * 高さ 36px はタップ領域そのもの。WCAG 2.2 のターゲットサイズ（最小）
 * 24px は満たすが、モバイルでの推奨値（iOS 44pt / Android 48dp）を下回る。
 * 見た目を優先して意図的に下げた値なので、**これ以上は狭めない**。
 * 間隔が狭いほど隣を誤タップしやすくなり、設問 9 の「氏名を含めて共有してよい」と
 * 「現時点では会社へ共有しないでほしい」のような取り違えが起きる。
 * -------------------------------------------------------------- */
.form-check {
  min-height: 2.25rem;
  padding-left: 2rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  margin-bottom: 0;
}

.form-check .form-check-input {
  width: 1.25rem;
  height: 1.25rem;

  /* 2rem(32px) - 1.25rem(20px) = 12px がラベルとの間隔。
     padding-left と同値なので行の左端は入力欄・選択欄と揃う。 */
  margin-left: -2rem;
  margin-top: 0.15rem;
}

.form-check-label {
  cursor: pointer;
}

/* --------------------------------------------------------------
 * 設問の区切り
 *
 * 設問が 10 問あり、設問内の項目間隔（mt-3 = 1rem）と設問間（mb-4 = 1.5rem）
 * の差が小さくて切れ目が分かりにくい。設問間をはっきり広げる。
 * -------------------------------------------------------------- */
#consult-form fieldset {
  margin-bottom: 2.5rem !important;
}

/* --------------------------------------------------------------
 * 別ページの埋め込み表示
 *
 * 相談フォームに <スラッグ>-privacy.html を iframe で埋め込む。折りたたまない代わりに
 * 高さを固定し、枠の中でスクロールさせる。ページの全高を使うと
 * 本題の相談フォームが遠のき、どこから入力なのか分からなくなる。
 * -------------------------------------------------------------- */
.embed-doc {
  height: 20rem;
  overflow: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: #fff;
}

/* iframe を直接高さ固定にせず、スクロールする div で包んでいる。
   iOS Safari は iframe の高さ指定を無視して中身の全高まで伸ばすことがあり、
   その場合は取扱いの全文がページに展開されてフォームが遠のく。
   包んでおけば、iframe が伸びても枠の側がスクロールして高さを保てる。 */
.embed-doc iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* スマホでは 20rem だと画面の半分以上を占めるため少し下げる。 */
@media (max-width: 575.98px) {
  .embed-doc {
    height: 16rem;
  }
}

/* 印刷時。ブラウザは iframe の中をページ分割せず、**枠に収まっている
   分だけを印刷する**。320px のままだと取扱いが途中で切れるので、
   印刷のときだけ枠を伸ばす。**本文がこの高さを超えるとまた切れる**ので、
   取扱いの本文を入れたら印刷を確かめること（06 章 6.7）。
   狭い端末から印刷して上のスマホ向け指定と両方に一致したときに勝てるよう、
   **スマホ向けより後ろに置く**。 */
@media print {
  .embed-doc {
    height: auto;
    overflow: visible;
  }

  .embed-doc iframe {
    height: 60rem;
  }
}

/* 埋め込み先の枠は狭いため、取扱いのページ側では幅を絞らない。
   ただし単独で開いたときに PC の全幅まで伸びると読めないので、
   ここで行長を抑える（44rem ≈ 日本語 44 文字）。 */
.embedded-doc .container {
  max-width: 44rem;
}

/* --------------------------------------------------------------
 * ページ内リンクの着地点
 *
 * 「送信前の確認」のチェックから飛んでくる。見出しが画面上端に
 * 密着すると「どこへ飛んだのか」が分かりにくいため、上に余白を取る。
 * -------------------------------------------------------------- */
#before-consult,
#privacy {
  scroll-margin-top: 1rem;
}

/* 完了メッセージ。ページ見出しの直下に来るため少し離す。 */
#done {
  margin-top: 2rem;
}