/* =========================
   modelcourse.css
   （set.css の後に読み込んでください）
   ========================= */

/* --- 並び替えバー：横一列レイアウト --- */
.courseSortBar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 20px;
    flex-wrap: nowrap;
    /* 折り返さない */
}

.courseSortBar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    width: auto !important;
    /* 既存CSSの幅指定対策 */
}

.courseSortBar-right {
    margin-left: auto;
    /* 右端へ寄せる */
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto !important;
}

/* スマホで縦並びにしたい場合はコメントアウトを外す
@media (max-width:640px){
  .courseSortBar{ flex-wrap:wrap; }
  .courseSortBar-right{ margin-left:0; }
}
*/

/* --- カスタムチェックボックス（青・中央に白チェック） --- */
.cs-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.2;
}

.cs-check__box {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #9aa0a6;
    /* 未選択ボーダー */
    border-radius: 6px;
    /* 角丸 */
    background: #fff;
    cursor: pointer;
    display: inline-grid;
    /* 中央寄せ */
    place-items: center;
    /* 中央寄せ */
    line-height: 1;
    /* 縦ズレ防止 */
    transition: border-color .15s, background-color .15s, box-shadow .15s;
    vertical-align: middle;
}

.cs-check__box::after {
    content: "";
    width: 11px;
    /* ✓ の横幅 */
    height: 7px;
    /* ✓ の高さ */
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform .12s ease-in-out;
}

.cs-check__box:checked {
    background: #2563EB;
    /* 選択時の青 */
    border-color: #2563EB;
}

.cs-check__box:checked::after {
    transform: rotate(45deg) scale(1);
}

.cs-check__box:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .25);
    /* フォーカスリング（青） */
    border-color: #2563EB;
}

.cs-check__label {
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
}