@charset "utf-8";


.content1 h1{
   display: block;
    margin: 0 auto;
    height: 50px;
    position: relative;
    text-align: center;
    padding-top: 20px;
    width: 200px;
    border-bottom: 2px solid #DAC556;
 margin-top: 50px;
}

.content1 h1::before{
    position: absolute;
    font-size: 17px;
   content: "Character";
    top: 0;
    left: 50%; 
transform: translateX(-50%);
    letter-spacing: 0.7px;
}


.content2{
    margin: 60px 0 80px;
}



.charactor{
display: flex;
     justify-content:space-between;
    width: 600px;
    margin: 0 auto;
    
    
    
    
    /*ダックがきたら消す(下段が三人になったら)*/
    margin-bottom: 50px;
}


  /*ダックがきたら再表示(下段が三人になったら)*/
/*
.charactor:last-child{
    width: 900px;
}
*/



.charactor img{
        width: 250px;
}

.charactor p{
text-align: center;
}

.charactor span{
font-size: 35px;
    font-weight: 600;
}



.popup-open {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}

.popup-overlay {
  display: none;
         z-index: 99999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0; 
}


.popup-window {
     
  width: 850px;
    height: 450px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
border: 15px solid #DAC556;
}



.popup-content {
 display: flex;
    width: 750px;
    height: 430px;
    margin: 0 auto;
   align-items: center;
    justify-content:space-between;
}


.popup-content div p:nth-child(2){
    margin:  30px 0;
text-align: left;
    font-size: 13px;
    line-height: 20px;
}




.popup-close {
    display: block;
  cursor: pointer;
 border: 1px solid #3E3A39;
    width: 120px;
    border-radius: 20px;
    margin: 0 auto;
    text-align: center;
}



#popup1, #popup2,#popup3,#popup4,#popup5{
  display: none;

}

#popup1:checked ~ .charactor_1 {
  display: block;

}

#popup2:checked ~ .charactor_2 {
  display: block;

}


#popup3:checked ~ .charactor_3 {
  display: block;

}

#popup4:checked ~ .charactor_4 {
  display: block;

}



#popup5:checked ~ .charactor_5 {
  display: block;

}