/*!*******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/app.css ***!
  \*******************************************************************************************/
/**
 * 相続診断プラットフォーム - カスタムスタイル
 * Metronic 8.1.8をベースにしたスタイル拡張
 */

/* ==========================================================================
   CSS変数定義
   ========================================================================== */

/**
 * カスタムカラーパレット
 * ブラウン系のテーマカラーを定義
 */
:root,
[data-bs-theme=light] {
  --bs-body-color: #2D1E14;
  --bs-heading-color: #5b2100;
  /* --bs-app-header-base-bg-color: #6a3e21; */
  --bs-app-header-base-bg-color: #a68968;
  --bs-app-header-base-box-shadow: none;

  /* btn-primaryをカスタムカラーで上書き */
  --bs-primary: #6a3e21;
  --bs-primary-rgb: 106, 62, 33;
  --bs-primary-active: #5b2100;

  /* btn-secondaryをカスタムカラーで上書き */
  --bs-secondary: #c48c3b;
  --bs-secondary-rgb: 196, 140, 59;
  --bs-secondary-active: #8f6527;
  --bs-secondary-inverse: #ffffff;

  /* text-primary/text-secondaryクラスをカスタムカラーで上書き */
  --bs-text-primary: #6a3e21;
  --bs-text-secondary: #c48c3b;

  /* グレースケールをブラウンベースに再定義 */
  --bs-text-muted: #9a8878;
  --bs-gray-100: #faf8f6;
  --bs-gray-100-rgb: 250, 248, 246;
  --bs-gray-200: #f5f2ed;
  --bs-gray-200-rgb: 245, 242, 237;
  --bs-gray-300: #e8ded0;
  --bs-gray-300-rgb: 232, 222, 208;
  --bs-gray-400: #c9b8a3;
  --bs-gray-400-rgb: 201, 184, 163;
  --bs-gray-500: #9a8878;
  --bs-gray-500-rgb: 154, 136, 120;
  --bs-gray-600: #7a6854;
  --bs-gray-600-rgb: 122, 104, 84;
  --bs-gray-700: #5e4d3d;
  --bs-gray-700-rgb: 94, 77, 61;
  --bs-gray-800: #3d3028;
  --bs-gray-800-rgb: 61, 48, 40;
  --bs-gray-900: #2a1f18;
  --bs-gray-900-rgb: 42, 31, 24;
}

/**
 * トップページ用の背景色（茶色）
 */
body.top-page {
  --bs-body-bg: #460e0d;
  --bs-body-bg-rgb: 70, 14, 13;
  --bs-app-blank-bg-color: #460e0d;
}

/**
 * 診断ページ用の背景色（白）
 */
body.diagnosis-page {
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-app-blank-bg-color: #ffffff;
}

/* ==========================================================================
   基本要素
   ========================================================================== */

/**
 * ゴシック体を使用して可読性と視認性を向上
 *
 * 採用理由:
 * - 一般ユーザーにとって読みやすく親しみやすい
 * - デジタル画面での可読性が高い
 * - 文字サイズを大きくしても見やすい
 *
 * フォールバック:
 * - Noto Sans JP: Google Fonts（メイン）
 * - Yu Gothic: Windows標準
 * - Hiragino Sans: macOS標準
 */
html,
body {
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Sans", Helvetica, sans-serif !important;
  font-size: 17px !important;
}

/**
 * モバイル（767.98px以下）
 * bodyのフォントサイズ調整
 *
 * 理由:
 * - 14pxは小さすぎて可読性が低い
 * - 16pxにすることでiOSの自動ズームを防止（入力欄と統一）
 * - 高齢者や視力が弱い方にも読みやすい
 * - 診断結果表は別途12pxで固定されているため影響なし
 */
@media (max-width: 767.98px) {
  html,
  body {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   カード
   ========================================================================== */

/**
 * カード背景を常に白に固定
 *
 * 理由:
 * - Bootstrapのデフォルトでは--bs-body-bgを継承
 * - トップページ（body.top-page）では背景が茶色（#460e0d）のため、
 *   カードも茶色になってしまう
 * - 診断ページ（body.diagnosis-page）でも明示的に白を強制
 * - テストページ（inheritance-table.hbs）でも使用
 */
.card {
  --bs-card-bg: #ffffff;
}

/**
 * カードの上部パディングを縮小
 *
 * 問題:
 * - .card .card-bodyのデフォルトpadding-topが2rem（32px）
 * - カード上部の余白が大きく見える
 *
 * 解決:
 * - 全てのカードで上部パディングを1remに統一
 */
.card .card-body {
  padding-top: 1rem;
}

/* ==========================================================================
   テーブル
   ========================================================================== */

/**
 * rowspanを持つセルの次の行の:first-childのパディング修正
 *
 * 問題:
 * - Metronicは.table tr:first-child, td:first-childのpadding-leftを0にする
 * - rowspan="2"を使うと、2行目の:first-childが本来の2列目になる
 * - そのため2行目の:first-childのパディングが0になり、テキストが左にずれる
 *
 * 解決:
 * - rowspan属性を持つtdの親trの次のtrの:first-childにパディングを復元
 */
.table tr:has(> td[rowspan]) + tr > td:first-child,
.table tr:has(> td[rowspan]) + tr > th:first-child {
  padding-left: 0.75rem;
}

/**
 * 診断結果表のフォントサイズを固定
 *
 * 理由:
 * - モバイルで数字が折り返されるのを防ぐため
 * - 表全体を統一してコンパクトに表示
 */
.inheritance-table td,
.inheritance-table th {
  font-size: 14px !important;
}

/* 数字・割合部分（テーブル内の数値を少し大きく） */
.inherit-num,
.inherit-ratio {
  font-size: 15px !important;
}

/* 単位表示（数字より小さく） */
.unit {
  font-size: 10px !important;
}

/* ==========================================================================
   ボタン
   ========================================================================== */

/**
 * ボタンのフォントサイズ調整
 * ベースサイズと同じ1remに設定（Metronicデフォルト1.1remをオーバーライド）
 */
.btn {
  --bs-btn-font-size: 1rem;
  font-size: var(--bs-btn-font-size);
}

/**
 * スモールボタンのフォントサイズ調整
 * Metronicデフォルト0.95remから0.9remに縮小
 */
.btn-sm,
.btn-group-sm > .btn {
  --bs-btn-font-size: 0.9rem;
}

/**
 * ライトボタンのテキスト色を調整
 * デフォルトだと薄すぎるため濃いグレーに
 */
.btn.btn-light {
  color: var(--bs-gray-800);
}

/* ==========================================================================
   フォーム要素
   ========================================================================== */

/**
 * フォーム要素の上下パディング縮小
 *
 * 問題:
 * - Metronicのデフォルトパディングが大きく、フォームが縦に長くなる
 * - 特にモバイルでスクロール量が多くなる
 *
 * 解決:
 * - 全てのフォーム要素の上下パディングを約30-35%縮小
 * - 左右のパディングはそのまま維持
 */

/* 通常サイズ: 元 0.775rem（12.4px）→ 新 0.5rem（8px）約35%減 */
.form-control,
.form-select,
.input-group-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* 大サイズ: 元 0.825rem（13.2px）→ 新 0.55rem（8.8px）約33%減 */
.form-control-lg,
.form-select-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

/**
 * input-group内で右寄せ（text-end）を使う場合のパディング調整
 *
 * 問題:
 * - input-group内のform-controlの右パディングが1rem（通常）/ 1.5rem（lg）
 * - input-group-textの左パディングも1rem（通常）/ 1.5rem（lg）
 * - text-endで右寄せすると、入力値とラベルの間に余白が空きすぎる
 *
 * 解決:
 * - form-controlの右パディングとinput-group-textの左パディングを縮小
 */
.input-group > .form-control {
  padding-right: 0.5rem;  /* 1rem → 0.5rem（50%減）*/
}

.input-group > .input-group-text {
  padding-left: 0.5rem;   /* 1rem → 0.5rem（50%減）*/
}

.input-group-lg > .form-control {
  padding-right: 0.75rem; /* 1.5rem → 0.75rem（50%減）*/
}

.input-group-lg > .input-group-text {
  padding-left: 0.75rem;  /* 1.5rem → 0.75rem（50%減）*/
}

/**
 * input-group-textのフォントサイズを小さくして、単位表示を控えめに
 *
 * 理由:
 * - 入力値が主役、単位（%、万円など）は補助的な情報
 * - フォントサイズを小さくすることで視覚的ヒエラルキーを明確に
 * - input-group-lg配下でも同じサイズを維持するため、詳細度を高める
 */
.input-group-text,
.input-group-lg > .input-group-text {
  font-size: 0.875rem !important;  /* fs-7相当 */
}

/**
 * 入力フィールドのフォントサイズを16pxに設定
 *
 * フォントサイズ16px:
 * - iOSで入力欄フォーカス時の自動ズームを防止
 * - 16px未満だとiOSが自動ズームする仕様
 * - アクセシビリティのためviewport制限よりもこの方法を推奨
 */
.form-control,
.form-control-plaintext {
  font-size: 16px !important;
}

.form-select {
  font-size: 18px !important;
}

/**
 * プレースホルダーの色を薄く設定
 * 未入力状態が分かりやすいよう視覚的に区別
 */
.form-control::placeholder,
.form-select::placeholder {
  color: var(--bs-gray-300) !important;
  opacity: 1 !important;
}


/**
 * 有効なチェックボックス・ラジオボタンにホバー時のカーソルを設定
 * クリック可能であることを視覚的に示す
 */
.form-check-input:not(:disabled) + .form-check-label:hover {
  cursor: pointer;
}

/**
 * チェックボックス・ラジオボタンのチェック時の背景色をブラウン系に変更
 *
 * 理由:
 * - デフォルトの青色（#009ef7）がブラウンベースのテーマと合わない
 * - プライマリカラー（#6a3e21）に統一して視覚的一貫性を確保
 */
.form-check-input:checked {
  background-color: #6a3e21;
  border-color: #6a3e21;
}

.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23ffffff'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: #6a3e21;
  border-color: #6a3e21;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

/**
 * number入力欄のスピンボタン（上下矢印）を非表示
 *
 * 理由:
 * - PC環境でのみ表示される上下矢印が視覚的にノイズになる
 * - モバイルでは数字キーボードで入力するため不要
 * - inputmode="numeric"で十分なUXを提供
 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  font-size: 20px !important;
}

/* ==========================================================================
   レイアウト
   ========================================================================== */

/**
 * 固定フッター
 * 画面下部に常に表示されるボタンエリア
 *
 * 使用箇所:
 * - AssetInputPage（資産入力画面）
 * - FamilyInputPage（家族構成入力画面）
 * - ResultPage（診断結果画面）
 * - InquiryPage（問い合わせフォーム・完了画面）
 */
.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 1rem 1.25rem;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

/* ==========================================================================
   メディアクエリ
   ========================================================================== */

/**
 * モバイル（575.98px以下）
 * 固定フッターのパディング調整
 */
@media (max-width: 575.98px) {
  .fixed-footer {
    padding: 0.875rem 1rem;
  }
}

/**
 * スクロールトップボタンの位置調整とサイズ拡大
 * 固定フッター（約80px）に被らないように上に配置
 * タップしやすいように大きく
 * !importantでMetronicデフォルトを上書き
 */
.scrolltop {
  bottom: 110px !important;
  width: 50px !important;
  height: 50px !important;
}

.scrolltop .svg-icon {
  height: 32px !important;
  width: 32px !important;
}

@media (max-width: 991.98px) {
  .scrolltop {
    bottom: 100px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .scrolltop .svg-icon {
    height: 28px !important;
    width: 28px !important;
  }
}

/**
 * スクロールダウンヒント
 * ページ下部にスクロールを促すアイコン
 * スクロールトップボタンと同じデザイン・サイズ
 */
.scroll-down-hint {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 7px;
  bottom: 170px;
  width: 50px;
  height: 50px;
  background-color: var(--bs-scrolltop-bg-color-hover);
  box-shadow: var(--bs-scrolltop-box-shadow);
  border-radius: 0.475rem;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 105;
  animation: scroll-hint-bounce 1.5s ease-in-out infinite;
}

@keyframes scroll-hint-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

.scroll-down-hint svg {
  width: 32px;
  height: 32px;
}

.scroll-down-hint.hidden {
  opacity: 0;
}

@media (max-width: 991.98px) {
  .scroll-down-hint {
    right: 5px;
    bottom: 150px;
    width: 44px;
    height: 44px;
  }

  .scroll-down-hint svg {
    width: 28px;
    height: 28px;
  }
}


/*# sourceMappingURL=app.css.map*/