@charset "utf-8"; 

/* How to Use
  <!-- 枠付き -->
  <div class="area_check_fill_primary d-flex flex-row border rounded-3 m-1 p-1 pt-2">
    <div class="checkbox-wrapper-19">
      <input type="checkbox" id="up-k-1" name="st_check" checked />
      <label for="up-k-1" class="check-box"></label>
    </div>
    <label for="up-k-1" class="p-1">高１</label>
  </div>

  <!-- チェックボックス単体 -->
  <div class="checkbox-wrapper-19">
    <input type="checkbox" id="up-k-1" name="st_check" checked />
    <label for="up-k-1" class="check-box"></label>
  </div>

 */ 
  
  div:has( > .checkbox-wrapper-19) {
    cursor: pointer;
  }

  div:has( > .checkbox-wrapper-19) > label {
    cursor: inherit;
  }
  
  
  .checkbox-wrapper-19 {
    box-sizing: border-box;
    --background-color: #fff;
    --checkbox-height: 25px;
  }

  @-moz-keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @-webkit-keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  @-webkit-keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  @-moz-keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

.checkbox-wrapper-19 input[type=checkbox] {
    opacity: 0;
    position: absolute;
}

  .checkbox-wrapper-19 .check-box {
    height: var(--checkbox-height);
    width: var(--checkbox-height);
    /* background-color: transparent; */
    background-color: white;
    border-width: calc(var(--checkbox-height) * .1);
    border-style: solid;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease 0.2s;
    -o-transition: border-color ease 0.2s;
    -webkit-transition: border-color ease 0.2s;
    transition: border-color ease 0.2s;
    cursor: pointer;
  }
  .checkbox-wrapper-19 .check-box::before,
  .checkbox-wrapper-19 .check-box::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: calc(var(--checkbox-height) * .2);
    background-color: var( --bs-primary );
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 5px;
    content: " ";
    -webkit-transition: opacity ease 0.5;
    -moz-transition: opacity ease 0.5;
    transition: opacity ease 0.5;
  }
  .checkbox-wrapper-19 .check-box::before {
    top: calc(var(--checkbox-height) * .72);
    left: calc(var(--checkbox-height) * .41);
    box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .checkbox-wrapper-19 .check-box::after {
    top: calc(var(--checkbox-height) * .37);
    left: calc(var(--checkbox-height) * .05);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

    /* チェックボックスの通常時のスタイル */
    .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
    .checkbox-wrapper-19 .check-box.checked {
        border-color: var(--bs-primary);
    }

        /* チェックボックスがチェックされている場合は疑似要素を表示 */
        .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
        .checkbox-wrapper-19 .check-box.checked::after {
            height: calc(var(--checkbox-height) / 2);
            opacity: 1; /* チェックマークを表示 */
            animation: dothabottomcheck-19 0.2s ease 0s forwards;
        }

        .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
        .checkbox-wrapper-19 .check-box.checked::before {
            height: calc(var(--checkbox-height) * 1.2);
            opacity: 1; /* チェックマークを表示 */
            animation: dothatopcheck-19 0.4s ease 0s forwards;
        }

/* チェックボックス用の赤色スタイル（エラー時） */
.checkbox-wrapper-19.error .check-box {
    border-color: red;
    background-color: #f5c6cb;
}

/* エラー時にチェックが入っている場合のスタイルを優先する */
.checkbox-wrapper-19.error input[type="checkbox"]:checked + .check-box {
    border-color: red; /* エラー時に赤色にする */
}

    .checkbox-wrapper-19.error input[type="checkbox"]:checked + .check-box::before,
    .checkbox-wrapper-19.error input[type="checkbox"]:checked + .check-box::after {
        opacity: 1;
    }

/* エラー時、チェックが入っていない場合のスタイルを適用 */
.checkbox-wrapper-19.error .check-box::before,
.checkbox-wrapper-19.error .check-box::after {
    opacity: 0;
}

/* フォーカス時の枠の色 */
.checkbox-wrapper-19 input[type="checkbox"]:focus + .check-box {
    border-color: dodgerblue;
}