@charset "UTF-8"
;
/*ヘッダー関係*/
.header-index {
  background-color:#CBF266;
  padding: 1px;
}
.header-solo{
  background-color:#FFD1D1;
  padding: 1px;
}
.header-tutti{
  background-color:#FFFF99;
  padding: 1px;

}
.header-think{
  background-color:#b4ebfa;
  padding: 1px;
}
.utatane-icon{
 margin: 15px;
 border-radius:10px;
}

 .header-button0{
  display: inline-block;
  padding: 10px 38px;
  margin: 10px;
  text-decoration: none;
  background: #CBF266;
  color: #000;
  border: solid 2px #0cc233;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  font-weight: bold;      
  border-radius: 10px;
 }
 .header-button0:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}
.header-button1 {
  display: inline-block;
  padding: 10px 58px;
  margin: 10px;
  text-decoration: none;
  background: #FFD1D1;
  color: #000;
  border: solid 2px #FF99A0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  font-weight: bold;      
  border-radius: 10px;
}
 .header-button1:active {
     /*ボタンを押したとき*/
     -webkit-transform: translateY(4px);
     transform: translateY(4px);/*下に動く*/
     border-bottom: none;/*線を消す*/
   }
.header-button2 {
display: inline-block;
margin: 10px;
padding: 10px 40px;
border-radius: 10px;
text-decoration: none;
color: #000;
  background-color: #FFFF99;
  border:2px solid #eeea02 ;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  font-weight: bold;  
    }     
.header-button2:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}
.header-button3 {
  display: inline-block;
  margin: 10px;
  padding: 10px 50px;
  border-radius: 10px;
  text-decoration: none;
  color: #000;
  background-color: #B4ebfa;;
  border:2px solid  #66CCFF;
  transition: .4s;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  font-weight: bold;  
}
.header-button3:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}

/*indexページの飛ぶボタン*/
.play-button1{
  display: inline-block;
  text-decoration: none;
  margin: 20px;
  padding: 20px 65px;
  border-radius: 10px;
  color: #000;
  background-color: #FFD1D1;
  border:2px solid #FF99A0 ;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
        font-weight: bold;      
        border-radius: 10px;
}
.play-button1:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}
.play-button2 {
  display: inline-block;
  margin: 20px;
  padding: 20px 60px;
  border-radius: 10px;
  text-decoration: none;
  color: #000;
   background-color: #FFFF99;
   border:2px solid #eeea02 ;
   transition: .4s;
   box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
        font-weight: bold;      
     }     
.play-button2:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
  }    
.play-button3 {
display: inline-block;
margin: 20px;
padding: 20px 78px;
border-radius: 10px;
text-decoration: none;
color: #000;
background-color: #b4ebfa;
border:2px solid #66CCFF ;
transition: .4s;
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
      font-weight: bold;      
}  
.play-button3:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
  }    


.imgchance-btn{
  display: inline-block;
  text-decoration: none;
  margin: 10px;
  padding: 20px 30px;
  border-radius: 10px;
  color: #000;
  background-color: #FFD1D1;
  border:2px solid #FF99A0 ;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
        font-weight: bold;      
        border-radius: 10px;
}

.imgchance-btn:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(2px);/*下に動く*/
  border-bottom: none;/*線を消す*/
  }    

/*link{/*特設ページ、アンケートへのリンク
ふぉ￥
}
*/
.verify_answer{
  display:block;
  transform:scale(1.5)
}

.verify-keyword{
  transform:scale(1.5)
}
.verify-hyp-number{
  transform:scale(1.5)
}
.verify-submit-button{
 background-color: #FFFF99;
  padding: 1px 10px;
  /*transform: scale(1.5);*/
}

.verify-keyword-submit-button{background-color: #FFFF99;
  padding: 1px 10px;
  transform: scale(1.5);
}

.verify_form{display: inline;
}

.hyp_number{display: none;}

.make-submit-button{
  background-color: #FFD1D1;
  padding: 1px 10px;
  transform: scale(1.5);
}
.view-submit-button{
  background-color:#b4ebfa;
  padding: 1px 10px;
}
.return-top-button{
  display: inline-block;
  margin: 20px;
  padding: 20px 40px;
  border-radius: 10px;
  color: #000;
  background-color: #CBF266;
  border: solid 2px #0cc233;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  font-weight: bold; 
  text-decoration: none;
}
.return-top-button:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}


.make-hyp1{
  font-size: 24px;
}

.make-hyp2{
  font-size: 24px;
}

.free-hyp{
  font-size: 24px;
}


.make-nickname{
  font-size: 14px;
}

/*仮説の表示*/
.verify-hyp-containar{/*仮説の枠*/
  display:block;
  width: 900px;
  height: 300px;
  margin-top: 40px;
  margin-bottom: 30px;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #000;
   border:2px solid #eeea02 ;
   transition: .4s;
   box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
   

}

.verify-hyp-header{/*仮説の表の１段目*/
  background-color: #FFFF99;
  font-size: 20px;
  border: none;
}

.verify-hyp{/*仮説*/
  font-size: 35px;
}

/*キーワードの表示*/
.verify-h1{/*二つのstepで確かめよう*/
  background-color: #FFFF99;
  height: 50px;
  width: 900px;
}

.view-inst{
  background-color:#B4ebfa;
  height: 50px;
  width: 1200px;
}

.verify-keyword{
  transform: scale(1.2);
}

.verify_answer_radiobutton {
  transform: scale(1.5);
}

.keyword-btn{
 font-size: large;
  background-color: #FFFF99;
  padding: 8px;
}

.kanso{
width: 700px;
background-color: #B4ebfa;
}

.kanso-nickname{
  background-color: #B4ebfa;
}

/*たしかめるの結果選択のラジオボタン*/
.verify-answer-radiobtn{
display: none;
}

.verify-answer-radiobtn-label{
  cursor: pointer;
  padding-left: 30px;
  position: relative;
}

.verify-OX{
 width:350px;
 text-align: justify;
}

.verify-answer-radiobtn-label::before,
label::after {
  content: "";
  display: block; 
  position:absolute;
  margin-left: -10px;
}




.verify-answer-radiobtn-label::before {
  background-color: #fff;
  border-radius: 20%;
  border: 1px solid#000;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  top: 50%;
  left: 5px;
}

.verify-answer-radiobtn-label::after {
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  opacity: 0;
  height: 5px;
  width: 10px;
  transform: rotate(-45deg);
  top: 2px;
  left: 10px;
  margin-left: -10px;
}

.verify-answer-radiobtn:checked + .verify-answer-radiobtn-label::after {
  opacity: 1;
}


/*眺めるページ仮説の色表示*/
.view_hyp th, td{
  border: solid 1px;
  border-color:gray;
}
.verify_answer10{
  background-color: #f6f6f6;
  color: #000;
  }
.verify_answer9{
  background-color: #f6f6f6;
  color: #000;
  }
.verify_answer8{
  background-color: #f6f6f6;
  color: #000;
  }
.verify_answer7{
  background-color: #f6f6f6;
  color: #000;
  }
.verify_answer6{
  background-color: #f6f6f6;
  color: #000;
  }
.verify_answer5{
  background-color: #f6f6f6;
  color: #000;
  }
.verify_answer4{
background-color: #f6f6f6;
color: #000;
}
.verify_answer3{
  background-color: #E6E6E6;
  color: #000;
  }
.verify_answer2{
  background-color: #CCCCCC;
  color: #000;
  }
.verify_answer1{
  background-color: #B3B3B3;
  color:#000;
  }
.verify_answer0{
background-color: #999999;
color: #FFF;
}
.verify_answer-1{
background-color:#808080;
color: #FFF;
}
.verify_answer-2{
background-color:#666666;
color: #FFF;
}
.verify_answer-3{
background-color:#4D4D4D;
color: #FFF;
}
.verify_answer-4{
background-color:#333333;
color: #FFF;
}
.verify_answer-5{
  background-color:#333333;
  color: #FFF;
  }
.verify_answer-5{
background-color:#333333;
color: #FFF;
}   
.verify_answer-6{
background-color:#333333;
color: #FFF;
}
.verify_answer-7{
background-color:#333333;
color: #FFF;
}
.verify_answer-8{
background-color:#333333;
color: #FFF;
}
.verify_answer-9{
background-color:#333333;
color: #FFF;
}
.verify_answer-10{
background-color:#333333;
color: #FFF;
}
.verify_answer-11{
background-color:#333333;
color: #FFF;
}



.verify_answer_P2{
background-color:#e97d7d88;
color: #FFF;
}

.verify_answer_P3{
background-color:#e97d7d88;
color: #FFF;
}

.verify_answer_P4{
background-color:#e97d7d88;
color: #FFF;
}

.verify_answer_P5{
background-color:#e97d7d88;
color: #FFF;
}

.verify_answer_P6{
  background-color:#e97d7d88;
  color: #FFF;
  }

.verify_answer_P7{
    background-color:#e97d7d88;
    color: #FFF;
    }


/*ここから2ndバージョンのcss*/
    .solo-step1-containar{/*仮説の枠*/
      display:block;
      width: 900px;
      height: 900px;
      margin-top: 40px;
      margin-bottom: 30px;
      padding: 10px 10px;
      border-radius: 10px;
      text-decoration: none;
      color: #000;
       border:5px solid #FFD1D1;
       transition: .4s;
       box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
       
    
    }

    .solo-step2-containar{/*仮説の枠*/
      display:block;
      width: 900px;
      height: 2500px;
      margin-top: 40px;
      margin-bottom: 30px;
      padding: 10px 10px;
      border-radius: 10px;
      text-decoration: none;
      color: #000;
       border:5px solid #FFD1D1;
       transition: .4s;
       box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
       
    
    }

    .solo-inst{
      background-color:#FFD1D1;
      width: 900px;
      padding: 1px;
    }

    .think-h2{
      background-color:#b4ebfa;
      width: 900px;
      padding: 1px;
    }


    .hypbtn{
      display: none;
      }
    
    .hypbtn-label{
      cursor: pointer;
      padding-left: 100px;
      width: 50px;
      height:100px;
      position: relative;
    }
    
    
  .hypbtn-label::before,
    label::after {
      content: "";
      display: block; 
      position:absolute;
      margin-left:10px ;
    }
    
    .hypbtn-label::before {
      background-color: #fff;
      border-radius: 20%;
      border: 1px solid#000;
      width: 60px;
      height: 20px;
      transform: translateY(-50%);
      top: 50%;
      left: 5px;*
    }
    
    .hypbtn-label::after {
      border-bottom: 2px solid #000;
      border-left: 2px solid #000;
      opacity: 0;
      height: 5px;
      width: 10px;
      transform: rotate(-45deg);
      top: 2px;
      left: 30px;
    }
    
    .hypbtn:checked + .hypbtn-label::after {
      opacity: 1;
    }
    
    .think-form{
      margin-right: 85px;
    }

    .think-steptwo-QA{
    display: block;
    }