@charset "utf-8";

/*------------------------------------------------



   challenge/challenge



------------------------------------------------*/

/*------------------------------------------------
  共通
------------------------------------------------*/
.cha_title{
   text-align: center;
   font-weight: 900;
   font-size: 50px;
   color: #ff9626;
   margin-bottom: 30px;
   line-height: 1;
   font-family: 'M PLUS 1p', sans-serif;
   text-shadow:#000 2px 0px,#000 -2px 0px,#000 0px -2px,#000 0px 2px,#000 2px 2px,#000 -2px 2px,#000 2px -2px,#000 -2px -2px,#000 1px 2px,#000 -1px 2px,#000 1px -2px,#000 -1px -2px,#000 2px 1px,#000 -2px 1px,#000 2px -1px,#000 -2px -1px;
}
.cha_title span, .cha_title02 span{
   font-weight:900;
}
.cha_title02{
   font-weight: 900;
   color: #fff;
   font-size: 28px;
   font-family: 'M PLUS 1p', sans-serif;
   text-align: center;
   margin-bottom: 10px;
   text-shadow:#000 2px 0px,#000 -2px 0px,#000 0px -2px,#000 0px 2px,#000 2px 2px,#000 -2px 2px,#000 2px -2px,#000 -2px -2px,#000 1px 2px,#000 -1px 2px,#000 1px -2px,#000 -1px -2px,#000 2px 1px,#000 -2px 1px,#000 2px -1px,#000 -2px -1px;
}
.cha_title03{
   margin-top: 20px;
   border-radius: 50px;
   text-align: center;
   color: #000;
   font-size:16px;
   line-height: 1.4;
   
}
.cha_title03 span{
   font-weight: bold;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%,#ffff21));
   background: linear-gradient(transparent 70%,#ffff21 70%);
}

.f_green{
   color: #17fd17;
}
.f_blue{
   color: #2df7f7;
}
.f_red{
   color:#ff7171;
}
.f_yellow{
   color: #FFFF01;
}


/*------------------------------------------------
  indextページ
------------------------------------------------*/
.cha_box{
   margin: 50px 0px;
   line-height: 1.7;
   font-family: 'Noto Sans JP', sans-serif;
}
.cha_box rt{
   font-size: 10px;
}
.cha_list{
   display: flex;
   justify-content: space-between;
}
.cha_list li{
   list-style: none;
   width: 48%;
}
.cha_list li:nth-child(1) a{
   background: #d5ffb9;
}
.cha_list li:nth-child(2) a{
   background: #ffffb1;
}
.cha_list a{
   display: block;
   padding: 18px;
   border-radius: 15px;
   border: 3px solid #000;
   transition: all 0.3s ease 0s !important;
}
.cha_list a:hover{
   opacity: 0.8;
   transition: all 0.3s ease 0s !important;
}
.cha_list img{
   max-width: 100%;
   height: auto;
   margin-bottom: 5px;
   border-radius: 5px;
}
.cha_list p{
   text-align: center;
   color: #000;
   font-size: 15px;
   line-height: 2;
}


/*------------------------------------------------
  戻るボタン
------------------------------------------------*/
.back_btn{
   margin-top: 50px;
   display: flex;
   justify-content: flex-end;
}
.back_btn a{
   font-family: 'Noto Sans JP', sans-serif;
   border: 4px solid #409712;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ffff21;
   border-radius: 50px;
   width: 55px;
   height: 55px;
   text-align: center;
   color: #000;
   font-size: 16px;
   line-height: 1;
   font-weight: bold;
   transition: all 0.3s ease 0s !important;
}
.back_btn a:hover{
   opacity: 0.8;
   transition: all 0.3s ease 0s !important;
}


/*------------------------------------------------
  パズルindexページ
------------------------------------------------*/
.puzzle_index{
   margin: 50px 0px;
   font-family: 'Noto Sans JP', sans-serif;
}
.puzzle_index .cha_title02 span{
   font-size: 70%;
   margin-left: 15px;
}
.puzzle_index ul{
   display: flex;
   justify-content: space-between;
   margin-top: 60px;
}
.puzzle_index li{
   list-style: none;
   width: 32%;
}
.puzzle_index a{
   position: relative;
   display: block;
   transition: all 0.3s ease 0s !important;
}
.puzzle_index a:hover{
   opacity: 0.8;
   transition: all 0.3s ease 0s !important;
}
.puzzle_index .image{
  margin-bottom: 15px;
}
.puzzle_index .image img{
   max-width: 100%;
   height: auto;
   border-radius: 5px;
}
.puzzle_index p{
   text-align: center;
   color: #000;
   font-size: 15px;
   line-height: 1;
   font-weight: bold;
}

.puzzle_index li a .item{
   position: absolute;
   top: -25px;
   right: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #409712;
   border-radius: 50px;
   width: 55px;
   height: 55px;
   text-align: center;
   color: #ffff21;
   font-size: 12px;
   white-space: nowrap;
   line-height: 1;
}


/*------------------------------------------------
  パズル詳細ページ
------------------------------------------------*/
.novice .puzzle_box{
   margin: 30px auto;
   width: 560px;
   height: 373px;
   background: url(../../img/challenge/puzzle/novice/base.jpg) no-repeat;
}

.medium .puzzle_box{
   margin: 30px auto;
   width: 560px;
   height: 373px;
   background: url(../../img/challenge/puzzle/medium/base.jpg) no-repeat;
}

.higher .puzzle_box{
   margin: 30px auto;
   width: 402px;
   height: 373px;
   background: url(../../img/challenge/puzzle/higher/base.jpg) no-repeat;
}

.novice.-comp .puzzle_box{
   width: 602px;
   height: 400px;
   background: url(../../img/challenge/puzzle/novice/comp.png) no-repeat;
}
.medium.-comp .puzzle_box{
   width: 602px;
   height: 400px;
   background: url(../../img/challenge/puzzle/medium/comp.png) no-repeat;
}
.higher.-comp .puzzle_box{
   width: 450px;
   height: 400px;
   background: url(../../img/challenge/puzzle/higher/comp.png) no-repeat;
}


/*------------------------------------------------
  パズルピース
------------------------------------------------*/
.piece_box{
   position: relative;
   border-top: 1px solid #ddd;
   padding-top: 20px;
   height: 270px;
}
.piece_box li{
   list-style: none;
   position: absolute;
}
.piece_box img{
   vertical-align: top;
}


.medium .piece_box li{
   min-width: 117px;
   min-height: 97px;
}
.higher .piece_box li{
   min-width: 72px;
   min-height: 67px;
}



/*---初級　ピースのサイズ---*/
/*.novice .piece_box li:nth-child(1){
   width: 148px;
   height: 195px;
}
.novice .piece_box li:nth-child(2){
   width: 208px;
   height: 231px;
}
.novice .piece_box li:nth-child(3){
   width: 154px;
   height: 195px;
}
.novice .piece_box li:nth-child(4){
   width: 175px;
   height: 231px;
}
.novice .piece_box li:nth-child(5){
   width: 175px;
   height: 231px;
}
.novice .piece_box li:nth-child(6){
   width: 154px;
   height: 195px;
}
.novice .piece_box li:nth-child(7){
   width: 208px;
   height: 231px;
}
.novice .piece_box li:nth-child(8){
   width: 148px;
   height: 195px;
}
*/


/*---ピースの位置指定　初級・中級・上級---*/
.piece_box li:nth-child(1){
   bottom: 20px;
   right: 180px;
}
.piece_box li:nth-child(2){
   bottom: 0px;
   left: 90px;
}
.piece_box li:nth-child(3){
   top: 40px;
   right: 30px;
}
.piece_box li:nth-child(4){
   top: 20px;
   left: 180px;
}
.piece_box li:nth-child(5){
   top: 27px;
   left: 255px;
}
.piece_box li:nth-child(6){
   top: 20px;
   right: 210px;
}
.piece_box li:nth-child(7){
   top: 20px;
}
.piece_box li:nth-child(8){
   right: 0;
   bottom: 0;
}


/*---ピースの位置指定　中級・上級---*/
.piece_box li:nth-child(9){
   top: 90px;
   right: 260px;
}
.piece_box li:nth-child(10){
   top: 100px;
   left: 130px;
}
.piece_box li:nth-child(11){
   top: 150px;
   right: 300px;
}
.piece_box li:nth-child(12){
   top: 120px;
   left: 65px;
}
.piece_box li:nth-child(13){
   top: 85px;
   right: 140px;
}
.piece_box li:nth-child(14){
   top: 60px;
   left: 210px;
}
.piece_box li:nth-child(15){
   top: 165px;
   left: 205px;
}
.piece_box li:nth-child(16){
   top: 26px;
   right: 120px;
}
.piece_box li:nth-child(17){
   top: 120px;
   left: 0px;
}
.piece_box li:nth-child(18){
   right: 90px;
   bottom: 25px;
}
.piece_box li:nth-child(19){
   top: 20px;
   left: 70px;
}
.piece_box li:nth-child(20){
   right: 0;
   bottom: 90px;
}


/*---ピースの位置指定　上級---*/
.piece_box li:nth-child(21){
   right: 230px;
   bottom: 25px;
}
.piece_box li:nth-child(22){
   right: 65px;
   top: 75px;
}
.piece_box li:nth-child(23){
   top: 70px;
}
.piece_box li:nth-child(24){
   left: 300px;
   top: 70px;
}
.piece_box li:nth-child(25){
   bottom: 30px;
}
.piece_box li:nth-child(26){
   right: 140px;
   bottom: 0;
}
.piece_box li:nth-child(27){
   bottom: 0;
   left: 240px;
}
.piece_box li:nth-child(28){
   right: 190px;
   bottom: 80px;
}
.piece_box li:nth-child(29){
   right: 265px;
   bottom: 0;
}
.piece_box li:nth-child(30){
   left: 155px;
   bottom: 0;
}
.piece_box li:nth-child(31){
   right: 230px;
   bottom: 85px;
}
.piece_box li:nth-child(32){
   left: 95px;
   bottom: 35px;
}
.piece_box li:nth-child(33){
   right: 290px;
}
.piece_box li:nth-child(34){
   left: 95px;
   top: 60px;
}
.piece_box li:nth-child(35){
   right: 85px;
   top: 115px;
}
.piece_box li:nth-child(36){
   left: 245px;
   bottom: 105px;
}


/*------------------------------------------------
  パズル完成後　写真について
------------------------------------------------*/
.comment_box{
   padding: 30px 20px 20px;
   border: 8px solid #409712;
   position: relative;

}
.comment_box .title{
   font-weight: 800;
   color: #17fd17;
   font-size: 24px;
   font-family: 'M PLUS 1p', sans-serif;
   text-shadow:#000 2px 0px,#000 -2px 0px,#000 0px -2px,#000 0px 2px,#000 2px 2px,#000 -2px 2px,#000 2px -2px,#000 -2px -2px,#000 1px 2px,#000 -1px 2px,#000 1px -2px,#000 -1px -2px,#000 2px 1px,#000 -2px 1px,#000 2px -1px,#000 -2px -1px;
   position: absolute;
   top: -15px;
   left: 15px;
}
.comment_box .name{
   color: #000;
   font-size: 22px;
   line-height: 1;
   font-weight: bold;
   margin-bottom: 15px;
}
.comment_box p{
   color: #000;
   font-size: 16px;
   line-height: 1.7;
   font-weight: bold;
}


/*------------------------------------------------
  クイズページ
------------------------------------------------*/
.quiz_box{
   margin: 50px 0px;
   font-family: 'Noto Sans JP', sans-serif;
}

.quiz_box .number{
   text-align: center;
   font-size: 40px;
   font-weight: 900;
   font-size: 50px;
   color: #ff9626;
   line-height: 1;
   font-family: 'M PLUS 1p', sans-serif;
   margin-bottom: -30px;
}

.quiz_box .number span{
   font-family: 'M PLUS 1p', sans-serif;
   font-weight: 900;
   font-size: 200%;
}

.quiz_box .question{
   border: 4px solid #ff9626;
   padding: 50px;
   color: #000;
   font-size: 20px;
   line-height: 1.7;
   margin-bottom: 40px;
   border-radius: 10px;
   position: relative;
   margin-top: 80px;
   min-height: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.question .-hit, .question .-lost {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   width: 135px;
   height: 145px;
}

.quiz_box .question .rest{
   position: absolute;
   right: -4px;
   top: -33px;
   padding: 5px 10px;
   border: 4px solid #ff9626;
   border-radius: 0px 10px 0px 10px;
   min-height: 40px;
   display: flex;
   align-items: center;
   background: -webkit-gradient(linear, left top, right top, from(#ff9626), to(#fff));
   background: linear-gradient(0deg, #ff9626, #fff);
}


/*---クイズ　回答選択肢---*/
.answer_list ol{
   counter-reset: my-counter;
   list-style: none;
}
.answer_list li{
   position: relative;
   margin-bottom: 15px;
}
.answer_list li::after {
   position: absolute;
   top: 0px;
   bottom: 0px;
   left: 15px;
   margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
   content: counter(my-counter);
   counter-increment: my-counter;
   border: 1px solid #fff;
   border-radius: 50%;
   height: 30px;
   width: 30px;
   line-height: 1;
   font-size: 16px;
   color: #fff;
}
.answer_list label {
   -webkit-transition: all .3s ease 0s !important;
   transition: all .3s ease 0s !important;
   padding: 12px 10px 12px 60px;
   width: 30%;
   cursor: pointer;
   font-size: 16px;
   color: #fff;
   border-radius: 5px;
   display: block;
}
.answer_list li:nth-child(1) label{
   background: #3341c0;
}
.answer_list li:nth-child(2) label{
   background: #e43c3c;
}
.answer_list li:nth-child(3) label{
   background: #409712;
}
.answer_list label.not {
   background: #ddd!important;
}
.answer_list label.not:hover  {
   opacity:1.0!important;
}

.answer_list label:hover {
   -webkit-transition: all .3s ease 0s !important;
   transition: all .3s ease 0s !important;
   opacity: 0.8;
}
.answer_list label input.answer{
   display: none;
}


/*---クイズ　結果発表---*/
.result_box{
   width: 100%;
}
.result_box p{
   font-size: 24px;
   line-height: 1;
   font-weight: 700;
}

.result_box .number{
   margin-bottom: 0;
}

.result_box .comment{
   text-align: center;
}


/*---クイズ用　ボタン---*/
.quiz_btn{
   margin-top: 50px;
   display: flex;
   justify-content: flex-end;
}
.quiz_btn a{
   font-family: 'Noto Sans JP', sans-serif;
   border: 4px solid #ff9626;
   color: #000;
   font-size: 18px;
   line-height: 1;
   font-weight: bold;
   transition: all 0.3s ease 0s !important;
   padding: 10px 20px;
   border: 4px solid #ff9626;
   border-radius: 0px 10px 0px 10px;
   background: -webkit-gradient(linear, left top, right top, from(#ff9626), to(#fff));
   background: linear-gradient(0deg, #ff9626, #fff);
}
.quiz_btn a:hover{
   opacity: 0.8;
   transition: all 0.3s ease 0s !important;
}