body{
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom:0px;
}

.bg_1{
  background-color:#0f2350;
  margin: -8vw;
  padding: 100%;
  z-index: 1;
  display: block;
}
.bg_2{
  background-color:#0f2350;
  display: block;
}

#check_input_1,
#check_input_2{
  display: none;
  }

#check_btn_1{
  margin-right: auto;
  margin-left: auto;
  display: grid;
  place-items: center center;
  z-index: 3;
  width: 16vw;
  height: 16vw;
  border-radius: 50%;
  border: 8vw solid #ffffff;
  background-color: #0f2350;
  cursor: pointer
  }

#check_btn_2{
  margin-right: auto;
  margin-left: auto;
  display: grid;
  z-index: 2;
  background: #0f2350;
  width: 32vw;
  height: 32vw;
  border: 8vw solid #ffffff;
  border-radius: 0%;
  cursor: pointer
  }

#check_btn_1,
#check_btn_2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  margin:auto;
  }

#check_content_1{
  position: absolute;
  top: 45%;
  left: 0%;
  display: block;
  width: 100%;
  height: 1%;
  padding: 4vw 0;
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 200% auto;
  background-image: linear-gradient(
    to right,
    #FFFF00 0%,
    #FFFF00 50%,
    #0f2350 50%,
    #0f2350 100%
  );
  box-shadow: 0 0.4vw 0.4vw rgb(0 0 0 / 5%);
  transition: background-position ease 0.1s;
}

input[type=checkbox]:checked ~ #check_content_1{
background-position: 0 0;
}

input[type=checkbox]:checked ~ #check_btn_1{
background: #FFFF00;
color: #FFFF00;
width: 16vw;
height: 16vw;
border-radius: 0%;
border: 8vw solid #0f2350;
background-color: #FFFF00;
cursor: pointer
}