/* チェックボックス全体と内部要素 */
.checkbox-show-selected_wrap,
.checkbox-show-selected_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅や高さへ含める */
}

/* チェックで項目の表示・非表示を切り替えるチェックボックス全体 */
.checkbox-show-selected_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:724px; /* 全体の最大横幅。値を大きくすると表示領域が広がる */
  margin:40px auto; /* 上下40pxの余白を付け、左右を中央配置 */
  padding:32px; /* 全体の内側余白。値を大きくすると内容との間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線の太さ・種類・色 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* チェックボックス全体の背景色 */
  color:#111827; /* チェックボックス全体の基本文字色 */
}

/* 表示・非表示を操作するチェックボックス一覧 */
.checkbox-show-selected_controls{
  display:grid; /* チェックボックスをグリッドで配置 */
grid-auto-flow: column;
  gap:10px; /* 項目同士の間隔。値を大きくすると間隔が広がる */
  margin:0 0 24px; /* 下側24pxの余白。値を大きくすると対象エリアとの間隔が広がる */
}

/* 各チェックボックス項目 */
.checkbox-show-selected_label{
  display:flex; /* チェックボックスと文字を横並びにする */
  align-items:center; /* チェックボックスと文字を縦方向の中央へ揃える */
  justify-content:center; /* 内容を横方向の中央へ配置 */
  gap:8px; /* チェックボックスと文字の間隔 */
  min-height:48px; /* 項目の最小高さ。値を大きくすると項目が高くなる */
  padding:10px; /* 項目の内側余白。値を大きくすると内容との間隔が広がる */
  border:1px solid #d1d5db; /* 項目を囲む枠線の太さ・種類・色 */
  border-radius:10px; /* 項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 項目の背景色 */
  color:#111827; /* 項目名の文字色 */
  font-size:14px; /* 項目名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 項目名を太字にする */
  line-height:1.5; /* 項目名の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* チェックボックス本体 */
.checkbox-show-selected_input{
  width:18px; /* チェックボックスの横幅。値を大きくすると横方向へ大きくなる */
  height:18px; /* チェックボックスの高さ。値を大きくすると縦方向へ大きくなる */
  margin:0; /* ブラウザ標準の余白を削除 */
  flex:0 0 auto; /* チェックボックスのサイズを固定 */
  accent-color:#0b6bff; /* チェック時に表示する色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* キーボード操作時のフォーカス表示 */
.checkbox-show-selected_input:focus-visible{
  outline:3px solid rgba(11,107,255,.22); /* フォーカス枠の太さ・種類・色 */
  outline-offset:3px; /* チェックボックスとフォーカス枠の間隔 */
}

/* 表示・非表示を切り替える対象エリア */
.checkbox-show-selected_result{
  padding:1px; /* 対象エリアの内側余白。値を大きくすると内容との間隔が広がる */
  border:1px solid #bfdbfe; /* 対象エリアを囲む枠線の太さ・種類・色 */
  border-radius:12px; /* 対象エリアの角丸。値を大きくすると丸みが強くなる */
  background:#eff6ff; /* 対象エリアの背景色 */
}

/* 表示・非表示を切り替える対象項目一覧 */
.checkbox-show-selected_list{
  display:grid; /* 対象項目を縦方向のグリッドで配置 */
  gap:10px; /* 対象項目同士の間隔。値を大きくすると縦方向の間隔が広がる */
}

/* 表示・非表示を切り替える各項目 */
.checkbox-show-selected_item{
  display:none; /* 初期状態では項目を非表示 */
  min-height:52px; /* 対象項目の最小高さ。値を大きくすると項目が高くなる */
  padding:14px 16px; /* 上下14px・左右16pxの内側余白 */
  border:1px solid #dbeafe; /* 対象項目を囲む枠線の太さ・種類・色 */
  border-radius:10px; /* 対象項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 対象項目の背景色 */
  color:#2563eb; /* 対象項目の文字色 */
  font-size:16px; /* 対象項目の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.5; /* 対象項目の行間 */
}

/* チェックされている項目へ追加する表示用クラス */
.checkbox-show-selected_item.is-show{
  display:flex; /* 対象となる項目を表示 */
  flex-direction: column;
  align-items:center; /* 項目内の文字を縦方向の中央へ配置 */
}

/* 何も表示されていないときの案内 */
.checkbox-show-selected_empty{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#64748b; /* 案内文の文字色 */
  font-size:15px; /* 案内文の文字サイズ */
  line-height:1.7; /* 案内文の行間 */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* スマートフォン表示時のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ縮小 */
  }

  /* スマートフォン表示時のチェックボックス全体 */
  .checkbox-show-selected_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小し、左右を中央配置 */
    padding:24px 18px; /* 上下24px・左右18pxへ縮小 */
  }

  /* スマートフォン表示時のチェックボックス一覧 */
  .checkbox-show-selected_controls{
  display:grid; /* チェックボックスをグリッドで配置 */
grid-auto-flow: row;
  gap:1px; /* 項目同士の間隔。値を大きくすると間隔が広がる */
  margin:0; /* 下側24pxの余白。値を大きくすると対象エリアとの間隔が広がる */
  }

  /* スマートフォン表示時の各チェックボックス項目 */
  .checkbox-show-selected_label{
    justify-content:flex-start; /* 内容を左揃えへ変更 */
    padding:10px 12px; /* 上下10px・左右12pxの内側余白 */
  }

  /* スマートフォン表示時の対象項目 */
  .checkbox-show-selected_item{
    padding:12px 14px; /* 上下12px・左右14pxへ縮小 */
  }

}