@charset "UTF-8";

#modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
}
.content{
  background-color:#ffffff;
  width: 90%;
  margin: 20% auto 0 auto;
  padding: 50px;
}
.content .button_close{
  text-align: center;
}
.checkbox_warp{
  display:flex;
  align-items:center;
  gap:.5rem;
  cursor:pointer;
  user-select:none;
  width: 75%;
  border: 1px solid #052571;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 10px;
}
div.checkbox_warp{
  border: none;
  padding: 0;
}

/* 本物のcheckboxは残しつつ見えなくする */
.checkbox_warp > input{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
}

/* 見た目の箱 */
.checkbox_warp .box{
  width:18px;
  height:18px;
  border-radius:4px;
  border:1.5px solid #cbd5e1;        /* 枠は薄め */
  display:grid;
  place-items:center;
  transition:all .15s ease;
}

.checkbox_warp .text{
  margin-top: 1px;
  line-height:1.5;
}

/* チェックマーク（未選択時は薄いグレー） */
.checkbox_warp .box::after{
  content:"";
  width:11px;
  height:6px;
  border-left:2.5px solid #cbd5e1;      /* 未選択：薄いグレー */
  border-bottom:2.5px solid #cbd5e1;
  transform:translateY(-1px) rotate(-45deg);
  opacity:.6;
  transition:all .15s ease;
}

/* 選択時：チェックマークをブルーに */
.checkbox_warp > input:checked + .box{
  border-color:#ffffff;          /* blue */
}

.checkbox_warp > input:checked + .box::after{
  border-left-color:#ffffff;          /* blue */
  border-bottom-color:#ffffff;
  opacity:1;
}

/* フォーカスリング（キーボード操作向け） */
.checkbox_warp > input:focus-visible + .box{
  box-shadow:0 0 0 3px rgba(37,99,235,.25);
  border-color:#ffffff;
}

.checkbox_warp > input:checked ~ .text {
  font-weight: bold;
  color: #ffffff;
}

.checkbox_warp:has(input:checked) {
  background-color:#052571;
}