/* ※このファイルにスタイルが無い場合はBootStrap（CSSフレームワーク）のスタイル設定です※ */
/* ======================================
    ルート変数の定義（テーマカラー）
 ======================================*/
:root {
  /* メインカラー：この色を変更すると全体が変わります */
  --r: 74;
  --g: 77;
  --b: 124;
  --main-color: rgb(var(--r), var(--g), var(--b));
  /* メインカラー × 20%黒 */
  --sub-dark-color: color-mix(in srgb, var(--main-color) 80%, black 20%);
  /* メインカラー × 20%白 */
  --sub-bright-color: color-mix(in srgb, var(--main-color) 80%, white 20%);
  /* メインカラー の補色 */
  --confirm-color: rgb(
    calc(255 - var(--r)),
    calc(255 - var(--g)),
    calc(255 - var(--b))
  );
  --sub-confirm-color: color-mix(in srgb, var(--confirm-color) 50%, white 80%);
  /* メインカラー の補色 */
  --danger-color: rgb(255, 0, 0);
}
.bg-danger {
  background-color: var(--main-color) !important; /* 例: 真っ赤に変更 */
}

.btn {
  display: inline-block; /* ボタンをインライン要素として表示 */
  font-weight: 400; /* 通常のフォントウェイト */
  color: #fff; /* 文字色を白に */
  text-align: center; /* テキストを中央に配置 */
  vertical-align: middle; /* 縦方向の中央揃え */
  user-select: none; /* テキストの選択を無効に */
  background-color: var(
    --sub-dark-color
  ); /* 背景色：Bootstrapのprimaryカラー */
  border: 1px solid var(--sub-dark-color); /* 枠線：背景色と同じに */
  padding: 0.375rem 0.75rem; /* 上下左右の余白 */
  font-size: 1rem; /* フォントサイズ */
  line-height: 1.5; /* 行の高さ */
  border-radius: 0.25rem; /* 角を少し丸める */
  transition: all 0.15s ease-in-out; /* ホバー時などのアニメーション */
  cursor: pointer; /* カーソルをポインターに */
  text-decoration: none; /* リンク装飾を無効に（aタグでも使えるように） */
}
/* キャンセルボタン */
.btn_cancel {
  background-color: var(--sub-bright-color); /* メインカラーより薄く */
}
/* ホバー時のスタイル */
.btn:hover {
  background-color: var(--sub-dark-color); /* 少し暗めのブルーに */
  border-color: var(--sub-dark-color); /* 枠線も少し暗く */
  text-decoration: none; /* リンク装飾が復活しないように */
}

/* アクティブ（クリック中）時のスタイル */
.btn:active {
  background-color: var(--sub-dark-color); /* さらに暗めに */
  border-color: var(--sub-dark-color); /* 枠線もさらに暗めに */
  box-shadow: 0 0 0 0.2rem var(--sub-bright-color); /* フォーカスリング風の影 */
}

/* フォーカス時のスタイル（キーボード操作など） */
.btn:focus {
  outline: none; /* デフォルトのアウトラインを削除 */
  box-shadow: 0 0 0 0.2rem var(--sub-bright-color); /* ブルーのフォーカス影 */
}

/* 戻るボタン */
.btn-back {
  font-size: 13px; /* 文字サイズを13pxに設定 */
  padding: 6px 12px; /* 上下に6px、左右に12pxの余白を設定（クリックしやすくする） */
  background-color: var(
    --sub-confirm-color
  ); /* 背景色を明るいメインカラーに設定（目立たせるため） */
  color: #212529; /* 文字色を暗いグレーに設定（読みやすさを確保） */
  border: 1px solid var(--sub-dark-color); /* ボタンの枠線を少し濃い黄色に設定 */
  border-radius: 4px; /* 角を少し丸めて柔らかい印象に */
  font-weight: 600; /* 文字をやや太くして強調 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 軽い影を付けて立体感を出す */
  text-decoration: none; /* リンクの下線を除去 */
  transition: background-color 0.2s ease; /* 背景色がなめらかに変化するようにアニメーション設定 */
}
/* 非リンクボタン */
.no-click {
    pointer-events: none !important;/* クリック無効 */
    cursor: default !important;      /* 手のマークを消す */
}
/* ======================================
    ログイン画面　タブ式カード
 ======================================*/
/* タブの非アクティブ状態のテキスト色を白に */
.nav-tabs .nav-link {
  color: #ffffff; /* 白色テキスト */
  border: 1px solid #fff;
}

/* アクティブなタブのスタイル */
.nav-tabs .nav-link.active {
  background-color: #ffffff; /* 背景を白に */
  color: var(--main-color); /* テキストを赤に（Bootstrapのdanger色） */
}
/* ボタンを通常より小さく */
.btn {
  padding: 5px;
  font-size: 0.95rem;
}
/* カスタムグラデーション風背景と文字色 */
.custom-gradient {
  background: #fff8dc; /* 薄いクリーム色背景 */
  color: var(--main-color); /* 赤文字 */
}

/* 高さを均等にするラッパー */
.equal-height-wrapper {
  display: flex; /* Flexboxで縦方向に配置 */
  flex-direction: column;
  height: 100%; /* 親要素の高さいっぱい */
}

/* スクロール可能領域 */
.equal-height-scroll {
  overflow-y: auto; /* 縦スクロールを有効化 */
  flex-grow: 1; /* 残りのスペースをすべて使用 */
}

/* PC表示（768px以上）のみにログインカードの高さ制限を設定 */
@media (min-width: 768px) {
  .login-card {
    min-height: 700px; /* 最小高さ700px */
    max-height: 700px; /* 最大高さ700px（固定） */
    overflow-y: hidden; /* スクロールバーを非表示 */
    display: flex;
    flex-direction: column;
  }
}

/* PC表示（768px以上）のみにお知らせボックスの高さ設定 */
@media (min-width: 768px) {
  .notice-box {
    min-height: 700px; /* 最小高さ700px */
    max-height: 700px; /* 最大高さ700px（固定） */
    overflow-y: scroll; /* コンテンツ量に応じて縦スクロール表示 */
  }
  .tel-link {
    pointer-events: none;
  }
}

/* カードの中身（.card-body）を縦方向に並べる */
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1; /* 親要素に対しての伸縮指定 */
}
/* ======================================
    メッセージボード「ご確認ください」
 ======================================*/
/* 小さくて読みやすいテキスト */
.small-readable-text {
  font-size: 0.9rem; /* 少し小さめのフォントサイズ */
  line-height: 1.5; /* 行間を広めにして読みやすく */
  font-weight: 500; /* 少し太めで視認性を上げる */
}
/* カスタムリンクのスタイル */
.custom-alert-link {
  color: var(--danger-color); /* 通常時は赤文字 */
  text-decoration: underline; /* 下線あり（視認性向上） */
}

/* カスタムリンクのホバー時スタイル */
.custom-alert-link:hover {
  color: darkred; /* 濃い赤に変化 */
}
/* メッセージボード全体のスタイル */
.alert-o {
  padding: 10px 12px; /* 内側の余白 */
  position: relative; /* 子要素（ラベル）を絶対配置するために必要 */
  border: 1px solid var(--sub-confirm-color); /* 黄色の境界線 */
  border-radius: 4px; /* 角を少し丸める */
  background-color: #fff8e1; /* 明るい黄色の背景色 */
}

/* 「ご確認ください」のラベル（上部に浮かぶようなラベル）のスタイル */
.alert-button-label {
  position: absolute; /* ボックス内で絶対位置指定 */
  top: -12px; /* 上に少しはみ出すように配置 */
  left: 12px; /* 左からの距離 */
  background-color: var(--sub-confirm-color); /* 黄色背景 */
  color: #212529; /* 文字色：暗いグレー */
  font-size: 12px; /* 小さめの文字サイズ */
  padding: 2px 8px; /* 内側の余白 */
  border-radius: 12px; /* 楕円形になるように角丸 */
  font-weight: bold; /* 太字 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 軽い影をつける */
  white-space: nowrap; /* テキストの折り返しを防止 */
}

/* パスワード登録が必要なリスト：全体のスタイル */
.password-guidance {
  margin-left: 1.2em; /* 左の余白 */
  padding: 2px 10px; /* 上下と左右の内側余白 */
  background-color: #fff9db; /* 薄い黄色の背景色 */
  border-left: 3px solid #ffc107; /* 左側に強調の黄色線 */
  font-size: 12.5px; /* 少し小さめの文字サイズ */
  line-height: 1.4; /* 行間をやや広めにして読みやすく */
}

/* パスワード登録が必要なリスト：リストのスタイル */
.password-guidance ul {
  margin: 0; /* 外側の余白なし */
  padding-left: 1em; /* インデント（リストの左側余白） */
}

/* パスワード登録が必要なリスト：リストアイテムのスタイル */
.password-guidance li {
  margin: 2px 0; /* 上下の間隔を少しだけ開ける */
  padding-left: 0; /* リストアイテムの左余白をなしに */
}

/* ======================================
    フォームラベル
 ======================================*/
.form-label {
  font-size: 0.85rem; /* 小さく見やすいサイズ */
  margin-bottom: 2px; /* ラベルと入力欄の間を狭く */
}

.form-control {
  padding: 6px 8px; /* 入力欄をコンパクトに */
  font-size: 0.9rem; /* 読みやすさを維持しつつやや小さく */
}

/* 必須 */
.badge-required {
  display: inline-block; /* インライン要素のように振る舞いつつ、ブロック要素の特性（幅・高さの指定など）を持たせる */
  background-color: #fff; /* 背景色を白に設定 */
  color: var(
    --danger-color
  ); /* テキストの色をカスタムプロパティ --danger-color（赤系の色）に設定 */
  border: 1px solid var(--danger-color); /* 境界線を --danger-color の1pxの実線に設定 */
  border-radius: 2px; /* 角をわずかに丸くする（2ピクセル） */
  font-size: 12px; /* フォントサイズを12ピクセルに設定（やや小さめ） */
  font-weight: bold; /* フォントを太字に設定 */
  padding: 2px 6px; /* 上下に2ピクセル、左右に6ピクセルの内側余白を設定 */
  margin-left: 1px; /* 左側に8ピクセルの外側余白を追加（隣接要素との間隔を空ける） */
  vertical-align: middle; /* 行内で垂直方向の位置を中央に揃える */
  line-height: 1; /* 行の高さを1（フォントサイズと同じ）に設定、無駄な高さを抑える */
  text-transform: uppercase; /* テキストをすべて大文字に変換して表示 */
}

.annotation {
  color: #212529;
  font-size: 0.8rem; /* 読みやすさを維持しつつやや小さく */
}

.no-data-message {
  background-color: #f8f9fa; /* 優しいグレーで背景をやわらかくし、目に優しくする */
  color: var(--danger-color); /* 文字は警告色 */
  border: 1px solid #dee2e6; /* 枠線は薄いグレーで控えめに囲む */
  border-left: 4px solid #6c757d; /* 左側にやや濃いグレーのラインを入れて強調（アクセント） */
  padding: 16px 20px; /* 上下に16px、左右に20pxの余白をつけてゆったり表示する */
  margin: 20px 0; /* 上下に20pxの間隔をあけて他要素と区切る */
  font-size: 1rem; /* 標準の文字サイズ（約16px）で可読性を保つ */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* シンプルで読みやすいフォントを使用 */
  border-radius: 6px; /* 角を少し丸めて柔らかく上品な印象にする */
  line-height: 1.6; /* 行間を広めにとって読みやすさを向上させる */
}

/* パスワード表示・非表示 */
.password-toggle {
  position: relative;
}
.toggle-icon {
  position: absolute;
  right: 10px;
  top: 70%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #555;
}
/* ======================================
    フッター
 ======================================*/
/* フッターのスタイル */
.footer {
  font-size: 0.6rem; /* 小さめの文字 */
  line-height: 1.2;
  text-align: center; /* テキスト中央揃え */
  margin-top: auto; /* 画面下部に配置 */
  margin-bottom: 0.5rem; /* 画面下部にスキマ */
  padding-top: 1rem;
  color: #888; /* 薄いグレー文字 */
  width: 100%; /* 幅いっぱいに */
  display: flex;
  justify-content: center; /* 横方向中央寄せ */
  align-items: center; /* 縦方向中央寄せ */
}
/* フッター内段落のマージンをリセット */
.footer p {
  margin: 0;
}
/* ======================================
    お知らせエリアのスタイル設定
 ======================================*/
/* お知らせセクションのヘッダー装飾 */
.information_header {
  text-align: center; /* 中央揃え */
  border-bottom: 2px solid var(--main-color); /* 下線（メインカラー） */
  padding-bottom: 1em;
  margin-bottom: 1em;
}

/* お知らせリストのタイトル部分（dt） */
dl dt.info {
  font-weight: bold; /* 太字 */
  padding: 0 0 0 10px; /* 左側に余白 */
  margin: 5px 0 5px; /* 上下マージン */
}

/* お知らせリストの内容部分（dd） */
dl dd.info {
  border-bottom: 1px dotted #999; /* 下線（点線） */
  padding: 0 0 5px 10px; /* 左に余白、下にスペース */
}

/* 「情報」アイコンのスタイル */
a.info_1 {
  background-color: rgba(0, 89, 255, 0.555); /* 半透明の青 */
  border-radius: 5px; /* 角丸 */
  color: #fff; /* 白文字 */
  margin: 0 5px; /* 左右に余白 */
  padding: 5px 15px;
  text-decoration: none; /* 下線なし */
}

/* 「重要」アイコンのスタイル */
a.info_2 {
  background-color: var(
    --danger-color
  ); /* 背景色を赤に設定（注意や警告などの強調目的） */
  border-radius: 5px; /* 角を丸めて見た目を柔らかくする */
  color: #fff; /* 文字色を白にして背景とのコントラストを強調 */
  margin: 0 5px; /* 左右に5pxの余白を設定（隣接要素との間隔） */
  padding: 5px 15px; /* 上下に5px、左右に15pxの余白（クリックしやすさと視認性向上） */
  text-decoration: none; /* リンクの下線を削除してボタン風に見せる */
}

/* 「その他」アイコンのスタイル */
a.info_3 {
  background-color: rgb(
    10,
    10,
    10
  ); /* 背景色をほぼ黒に設定（落ち着いた印象） */
  border-radius: 5px; /* 同様に角を丸める */
  color: #fff; /* 白文字で読みやすく */
  margin: 0 5px; /* 左右に5pxの余白（バランスを整える） */
  padding: 5px 15px; /* 内側の余白（視認性と押しやすさ） */
  text-decoration: none; /* 下線なしでフラットなボタン風デザインに */
}

/* お知らせアイコン横に表示する「New!」のスタイル */
.information_new {
  color: var(
    --danger-color
  ); /* テキストの色をカスタムプロパティ --danger-color（赤系の色）に設定 */
  font-size: 15px; /* フォントサイズを12ピクセルに設定（やや小さめ） */
  font-weight: bold; /* フォントを太字に設定 */
}
/* ======================================
    ヘルプボタンのスタイル設定
 ======================================*/
.logo-container {
  width: 260px; /* ロゴ＋タイトル＋ボタンを収める適度な幅 */
  margin-top: 20px; /* 上部の余白 */
  margin-bottom: 20px; /* 下部の余白 */
  position: relative; /* 内部要素（例：絶対配置のヘルプボタン）の基準とするための相対配置 */
}

/* 見やすく、少し目立つヘルプボタン */
.btn-help {
  font-size: 13px; /* 文字サイズを13pxに設定 */
  padding: 6px 12px; /* 上下に6px、左右に12pxの余白を設定（クリックしやすくする） */
  background-color: #ffc107; /* 背景色を明るい黄色に設定（目立たせるため） */
  color: #212529; /* 文字色を暗いグレーに設定（読みやすさを確保） */
  border: 1px solid #e0a800; /* ボタンの枠線を少し濃い黄色に設定 */
  border-radius: 4px; /* 角を少し丸めて柔らかい印象に */
  font-weight: 600; /* 文字をやや太くして強調 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 軽い影を付けて立体感を出す */
  text-decoration: none; /* リンクの下線を除去 */
  transition: background-color 0.2s ease; /* 背景色がなめらかに変化するようにアニメーション設定 */
}

.btn-help:hover {
  background-color: #e0a800; /* ホバー時に背景色を少し暗くする */
  color: #212529; /* ホバー時の文字色は変わらず（視認性を維持） */
  text-decoration: none; /* ホバー時も下線を表示しない */
}

/*==========================
	モーダル
==========================*/
.modal-content {
  border-radius: 16px; /* モーダルの角を16pxの丸みにする */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* 下方向に影をつけて浮いて見せる */
  border: none; /* デフォルトのボーダーを削除する */
}

.modal-header {
  background: #f8f9fa; /* ヘッダーの背景色を薄いグレーに設定 */
  border-bottom: none; /* 下のボーダーを消す（スッキリした印象に） */
  border-top-left-radius: 16px; /* 左上の角を丸くする */
  border-top-right-radius: 16px; /* 右上の角を丸くする */
}

.modal-body {
  font-size: 1.1rem; /* 文字サイズを少し大きくする（読みやすさ向上） */
  padding: 24px; /* モーダル内の余白を広めにとる */
  background-color: #ffffff; /* 背景を白に設定 */
}

.modal-footer {
  border-top: none; /* 上のボーダーを消す（自然な区切り） */
  padding: 16px 24px; /* 上下に16px、左右に24pxの余白を設定 */
  background-color: #f8f9fa; /* 背景色を薄いグレーに設定（ヘッダーと統一） */
  border-bottom-left-radius: 16px; /* 左下の角を丸くする */
  border-bottom-right-radius: 16px; /* 右下の角を丸くする */
  text-align: center; /* フッター内のテキストやボタンを中央揃えにする */
}

/*==========================
	タブ
==========================*/
.tab_btns {
  border-bottom: 2px solid var(--danger-color);
  display: flex;
}
.tab_btns > li {
  min-width: 200px;
}
.tab_btns > li + li {
  margin-left: 10px;
}
.tab_btns > li span {
  height: 40px;
  line-height: 36px;
  border-width: 2px 2px 0 2px;
  border-style: solid;
  border-color: var(--danger-color);
  border-radius: 5px 5px 0 0;
  background: #fff;
  color: var(--danger-color);
  text-align: center;
  padding: 0 10px;
  cursor: pointer;
  display: block;
}
.tab_btns .active {
  background: var(--danger-color);
  color: #fff;
  font-weight: bold;
  cursor: default;
}
.tab_cnt {
  padding: 20px 0;
}
.tab_cnt article {
  display: none;
}
.tab_cnt article.active {
  display: block;
}

/*==========================
	テーブル
==========================*/
/* テーブル全体のスタイルを定義 */
#paymentTable {
  min-width: 200px; /* テーブルの最小幅を200pxに設定してレイアウトの崩れを防止 */
}

/* テーブルヘッダー（th）のスタイルを設定 */
#paymentTable thead th {
  position: sticky; /* ヘッダーをスクロールに固定 */
  top: 0; /* 固定位置をテーブルの最上部に */
  background-color: var(
    --sub-bright-color
  ); /* Bootstrapの「danger」系背景色を指定 */
  z-index: 2; /* 重なり順を上に設定（スクロール時に他要素の下にならないように） */
  cursor: pointer; /* ソート機能があることを示すためにポインターに変更 */
}

/* テーブル内のすべてのセル（thとtd）に共通する中央揃えスタイル */
#paymentTable th,
#paymentTable td {
  text-align: center; /* 横方向を中央揃えに */
  vertical-align: middle; /* 縦方向を中央揃えに */
}

/* 2列目（支払金額列）のセルに右寄せを適用 */
#paymentTable td:nth-child(2) {
  text-align: right; /* 金額表示なので右揃えに */
}

/* 偶数行に適用されるスタイル（必要に応じて背景色などを設定可能） */
#paymentTable td.even {
  background-color: #f9f9f9;
}

/* 奇数行に適用されるスタイル（必要に応じて背景色などを設定可能） */
#paymentTable td.odd {
  background-color: #ffffff;
}

/* プレビューボタン・ダウンロードボタンのアイコン（モバイル表示）のサイズ調整 */
button.preview i,
button.download i {
  font-size: 1rem; /* アイコンのサイズを標準に設定 */
}

/* プレビューとダウンロードボタンPC表示（768px以上） */
@media (min-width: 768px) {
  .action-buttons {
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 20px;              /* ボタン間の余白 */
  }
  .action-buttons button {
    width: 120px;           /* 同じサイズにする */
  }
   th.button_width {
    width: 45%;          /* 固定したい幅 */
    min-width: 500px;      /* つぶれ防止 */
    max-width: 500px;      /* 念のため */
  }
}
/*==========================
	ヘルプ
==========================*/
html {
  scroll-behavior: smooth;
}
.card-style {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  margin-top: 1rem;
}
.help .nav-tabs .nav-link.active {
  background-color: var(--sub-dark-color);
  color: white;
  border-radius: 8px 8px 0 0;
}
.help .nav-tabs .nav-link {
  background-color: var(--sub-confirm-color);
  color: var(--sub-dark-color) s;
  font-weight: 500;
}
.tab-content {
  margin-top: 0.2rem;
}
/*==========================
	ヘルプテーブル
==========================*/
/* テーブル全体のスタイルを定義 */
#helpTable {
  min-width: 200px; /* テーブルの最小幅を200pxに設定してレイアウトの崩れを防止 */
}
table#helpTable thead {
  background-color: #0044cc; /* ヘッダー全体の背景 */
}

/* テーブルヘッダー（th）のスタイルを設定 */
table#helpTable thead th {
  background-color: #0044cc !important;
  color: #fff !important;
  position: sticky;
  top: 0;
  z-index: 3; /* sticky時に他要素より上に表示 */
}
.table-responsive {
  background-color: white;
}

/* テーブル内のすべてのセル（thとtd）に共通する中央揃えスタイル */
#helpTable th,
#helpTable td {
  text-align: center; /* 横方向を中央揃えに */
  vertical-align: middle; /* 縦方向を中央揃えに */
}

/* 2列目（支払金額列）のセルに右寄せを適用 */
#helpTable td:nth-child(2) {
  text-align: left; /* 左揃えに */
}

/* 偶数行に適用されるスタイル（必要に応じて背景色などを設定可能） */
#helpTable td.even {
  background-color: #f9f9f9;
}

/* 奇数行に適用されるスタイル（必要に応じて背景色などを設定可能） */
#helpTable td.odd {
  background-color: #ffffff;
}

/*==========================
	利用規約
==========================*/
.terms-box {
  border: 2px solid #ccc; /* 枠線の色と太さ */
  border-radius: 8px; /* 角を丸める */
  background-color: #f9f9f9; /* 背景色（薄いグレー） */
}
.common-info {
  margin: 79px auto 0;
  padding: 50px 10px;
  background: #f5f5f5;
}
@media screen and (max-width: 767px) {
  .common-info {
    margin: 60px auto 0;
    padding: 25px 15px;
  }
}
.common-info__wrapper {
  max-width: 1400px;
  margin: 0 auto;
}
.common-info__content {
  background: #fff;
  padding: 35px 30px;
  max-width: 1104px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .common-info__content {
    padding: 35px 10px 15px;
  }
}
.common-info__title {
  padding: 10px 5px;
  margin-bottom: 15px;
}
.common-info__title-text {
  font-size: 2rem;
  font-weight: 600;
}
.common-info__item {
  font-size: 1.2rem;
  text-align: justify;
}
.common-info__item-content {
  padding: 10px 15px;
}
@media screen and (max-width: 767px) {
  .common-info__item-content {
    width: 95%;
  }
}
.common-info__item-title {
  font-weight: 600;
  padding-bottom: 5px;
  margin-bottom: 10px;
  display: block;
  font-size: 1.2rem;
}
.common-info__item-text {
  font-size: 0.8rem;
  line-height: 1.6rem;
}


/* ===============================
   ログイン画面用
   サイズ制御
================================= */

.max-1000 {
    max-width: 1000px;
}

.max-500 {
    max-width: 500px;
}

.logo-img {
    width: 200px;
    height: auto;
    max-width: 100%;
}

.modal-btn-100 {
    width: 100px;
}

.w-30 {
  width: 30%;
}

.w-70 {
  width: 70%;
}

.min-w-120 {
  min-width: 120px;
}

.min-w-200 {
  min-width: 200px;
}
.max-h-400 {
  max-height: 400px;
}

.max-w-35rem {
  max-width: 35rem;
}
/* ===============================
   テキスト調整
================================= */

.small-info-text {
    font-size: 0.75rem;
    color: #666;
    line-height: 1.2;
}

.icon-danger {
    font-size: 1rem;
    color: #dc3545;
}

.bold-text {
    font-weight: bold;
}


/* ===============================
   ユーティリティ
================================= */

.hidden {
    display: none;
}