html{
 background-image: url(kakera/back2.jpg);
font-size: 30PX; text-align: center;}

a {text-decoration: none;
   color:#fff;}

.content{background-color: rgba(0,0,0,0.2);
text-align: center;
width:93%;
margin: 20px auto;
padding:20px;
font-size: 1rem;
/* 1021まで＿font-size: 30PX; */
}

/*///////////////////////////////////////////////*/

/* top page */

/*//////////////////////////////////////////////*/

.top_img{border: #fff 4px solid;
  margin: 20px 0px 0px;}

.to_01
{width:600px;
  border-radius:5px;
  color:#fff;  font-size: 1.4rem;  line-height: 1.2;
  margin: 10px;  padding: 20px;
  display: inline-block;
  background-color:rgba(61, 208, 168, 0.97);}

.to_01 span{font-size: 30px;color:rgba(255,255,255,0.5);}


.select_difficulty b {font-size: 60px;}

.sheet_download{ display: inline-block; padding: 10px;
 font-size:1rem;width:600px; background-color: rgb(251, 103, 83);}

.index_comment{font-size: 0.8em;color: #777;text-align: left;
 display: inline-block;width:70%;}

.extend_message{    top: 720px;
    position: absolute;
    font-size: 2.3rem;
    margin: 0px auto;
    padding: 20px 0px;
    left: 50%;
    transform: translatex(-50%);
    border: 2px solid rgb(22,48,114);  border-radius: 60px;
    background-color: #fff;
    width: 670px;}

    .extend_message::before {
      content: "";  border-style: solid;
      position: absolute;  top: 46%;  left: 1px;
      border-width: 0 20px 20px 0;
      border-color: transparent rgb(22,48,114) transparent transparent;
      translate: -100% -50%;  transform: skew(0, -18deg);  transform-origin: right;}

    .extend_message::after {
      content: "";  border-style: solid;
      position: absolute;  top: 46%;  left: 1px;
      border-width: 0 15.2px 15.2px 0;
      border-color: transparent #fff transparent transparent;
      translate: -100% calc(-50% - 0.4px);
      transform: skew(0, -18deg);  transform-origin: right;}

/*///////////////////////////////////////////////*/

/* anser page */

/*//////////////////////////////////////////////*/

.anser_title_area{
  background-color: rgba(255,255,255,0);
  border: 3px #fff solid;
  padding: 20px 10px;
  width:90%;
  margin: 10px auto;}

.img_nazo_num{margin-right: -15px;}
.img_nazo_icon{}
.img_kage_icon{
  position: relative;
  top:20px;}

.anser_title{font-size: 2rem;
  color: #fff;font-weight: 900;
  vertical-align: super;}

.speechBubble {
  color: rgb(22,48,114);    max-width: 80%;
  position: relative;  display: inline-block;
  margin: 5px 0px 50px 0px;  padding: 15px 13px 13px;
  border: 2px solid rgb(22,48,114);  border-radius: 25px;
  background-color: #fff;  text-align: left;
  font-size: 1.2rem;  font-weight: 400;  line-height: 1.5;}

.speechBubble::before {
  content: "";  border-style: solid;
  position: absolute;  top: 46%;  left: 1px;
  border-width: 0 20px 20px 0;
  border-color: transparent rgb(22,48,114) transparent transparent;
  translate: -100% -50%;  transform: skew(0, -18deg);  transform-origin: right;}

.speechBubble::after {
  content: "";  border-style: solid;
  position: absolute;  top: 46%;  left: 1px;
  border-width: 0 15.2px 15.2px 0;
  border-color: transparent #fff transparent transparent;
  translate: -100% calc(-50% - 0.4px);
  transform: skew(0, -18deg);  transform-origin: right;}

.answer_area{
 display: flex;
 justify-content: center;
 width: 90%;
 flex-wrap: wrap;
 margin:20px auto 2px;
 padding: 20px 0px;
 background-color: rgba(255,255,255,0.2);
 position: relative;}

.answer_area a{
  width:150px;height:150px;
  background-color:#555;
  border-radius:20px;
  position: relative;
  margin: 30px;
  overflow: hidden;
  box-shadow: 10px 10px 15px -10px rgb(0 0 0 / 90%);}

.answer_area span{
  display: block;  background-color: rgba(255,255,255,0.8);
  width: 30px; height: 30px; padding: 5px;
  color:#222;  font-weight: 600;  font-size: 1rem;
  line-height: 1;
  position: absolute; bottom:0px; left:1px;
  z-index: 100;}

.answer_area img{
  position: absolute; top:0px; left:0px;
  z-index: 10;  width: 150px;  height: 150px;}

.correct{
font-size: 100px;font-weight: 900;
line-height: 1;
text-shadow: 2px 2px 4px rgba(255, 255, 255, 1);
animation: loading_opacity 1.5s ease-in ;}

@keyframes loading_opacity {
	0% {opacity: 0;}
	100% {opacity: 1;}}

.correct_message_area{
 background-color: rgba(255,255,255,0.5);
 background-image: url(img/back_cracker.png);
 background-repeat: no-repeat;
 background-size: 100% 100%;
 background-blend-mode: color-burn;
 display: inline-block;
 margin: 10px auto; padding: 50px 10px 0px;
 width:98vw; }

.correct_message_area img{
margin: 0px 0px 10px;
width: 150px;
animation: loading_img 1s  ease-in ;}

@keyframes loading_img {
	0% {opacity: 0;transform: scale(3);}
	100% {opacity: 1;transform: scale(1);}}

.correct_message{
display: block;
position: relative;
font-size: 1rem;
font-weight: 600;
animation: loading_opacity 1.5s ease-in ;}

.shop_detail{
 width: 95%;position: relative;overflow:hidden;
 background-color: #fff;text-align: left;
 border: rgb(198, 229, 255) 0px solid;
 line-height: 1.4;font-size: 1rem;
 border-radius: 20px;border: #fff solid 10px;
 padding: 10px 10px 10px 100px;margin: 20px auto;
 animation: loading_opacity 1.5s ease-in ;
 box-sizing: border-box;}

 .shop_detail_label{
  background-color: #18ad42;z-index: 20;
  position: absolute;top:5px;left:5px;font-weight: 700;
  color:#fff;border-radius: 15px;border: 3px #fff solid;
  padding: 0px 10px 5px;margin: 2px auto;opacity:0.9;}

.shop_detail .small{font-size: 0.8rem;color:#888;}
.shop_detail b{font-size: 1.2rem;}

.correct_message_area img.shop_detail_icon{
 height: 100px;width: auto;position:absolute;
 display: block;left:-5px;bottom:-15px;z-index: -10;
 animation: loading_opacity 1.5s ease-in ;z-index: 2}
.correct_message_area img.shop_detail_icon.s{
height: 80px;}

/*.correct_message_area img.shop_detail_icon{
height: 70px;width: auto;position:relative;display: inline;float: left;
 animation: loading_opacity 1.5s ease-in ;z-index: 2}
*/

 /*///////////////////////////////////////////////*/

 /* wrong page */

 /*//////////////////////////////////////////////*/

.wrong_img{ display: block; position: fixed;}
 .left { top:40px; left:100px;}
 .right{ top:60px; right:100px;}

.wrong_message{
  display: block;margin:40px auto 0px;}

.browser_back{
   width: 200px;height: 100px;
   display: block;
   background-color:rgb(116, 172, 255);
   color: #fff; font-size: 1rem; font-weight: 400;
   border: #fff 0px solid;
   border-radius: 5px;
   box-shadow: 3px 3px 10px 5px rgba(0,0,0,0.3);
   margin: 30px auto;}

   /*///////////////////////////////////////////////*/

   /* finishing */

   /*//////////////////////////////////////////////*/

.name_Q{width:90%;}
.name_Q img:first-child{width:80px;height:80px;}
.name_Q span{font-size: 2.2rem;font-weight: 600;display: inline-block;}
.name_Q img{width:100px;height:100px;
 position: relative;top:10px;}
.prise{width:95%;display: block;margin:10px auto;
 box-shadow: 0px 0px 7px 7px rgba(0,0,0,0.2);}


.kasadera_name p{
 font-size: 1.5rem;line-height: 50px;margin: 20px 0px;
 font-weight: 700;}


/*///////////////////////////////////////////////*/

/* hard */

/*//////////////////////////////////////////////*/
.hard_title{width: 100%;}

.additional_rule{display: inline-block;
 background: rgba(255,255,255,0.5); text-align: left;padding: 20px;width: 80%;}

.hint_box{padding: 60px 0px 0px;background-color: rgba(238, 114, 193,0.3);
margin: 20px;}

.hint_trigger{
width:300px;height:90px;padding: 10px;
border-radius: 10px;
background-color: rgb(238, 114, 193);
color: #fff;font-weight: 500;}

p.hint{opacity: 0.1;transition: 1s;
display: inline-block;max-height: 0px;overflow: hidden;}

#hint_1{display: none;}
#hint_2{display: none;}

#hint_1:checked+p.hint{opacity: 1;max-height: 500px;}
#hint_2:checked+p.hint{opacity: 1;max-height: 500px;}

/*///////////////////////////////////////////////*/

/* アンケート */

/*//////////////////////////////////////////////*/

.wpcf7 br{display: none;}
.wpcf7 span{font-size: 1.3em;}

.form_title{border:6px dashed #fff;padding:10px;width:80%;display: inline-block;}

.shakudo_wrap{ text-align: center;display: inline-block;
 width: 95%;margin:0px;position: relative;}


.wpcf7 span.shakudo_label{
 display: inline-block;width: 200px;font-size: 1em;
 position: absolute;top:5px;}

.wpcf7 span.shakudo_label_a{
 text-align: right;left:100px;}

.wpcf7 span.shakudo_label_b{
 text-align: left;right:70px;}


.wpcf7-form-control.wpcf7-text{
 height: 100px;width: 85%;font-size:0.8em;text-align: center;}

.hidden-fields-container{display: none;}
.screen-reader-response{display: none;}
.wpcf7-form{background: rgba(255,255,255,0.4);padding: 15px;}

.wpcf7-submit{
font-size: 1.5em;padding:10px 30px;background:#18ad42;color: #fff;
border: 2px solid #fff;border-radius: 10px;}

.wpcf7-not-valid{background: #aaa;}
.wpcf7-form-control-wrap{position: relative;}
.wpcf7-not-valid-tip{position: absolute;top:-60px;left:0px;font-size: 0.7em !important;
 color:red;font-weight: 800;}

/*/ ===============================================================
// チェックボックス
// ===============================================================*/

.shakudo_hoshi input {  display: none;}
.shakudo_hoshi input + span {
  padding-left: 8px;  display: inline-block;  position: relative;}
.shakudo_hoshi input + span::after,
.shakudo_hoshi input + span::before {
  color: rgba(0,0,0,1);  content: "";
  display: block;  position: absolute;  top: 0;}

.shakudo_hoshi input + span::before {
  content: "★"; color: #fff;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);}
.shakudo_hoshi input:checked + span::after {
  content: "★";  display: block; color: #18ad42;
  text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.5);}

span.wpcf7-list-item-label{color: rgba(255,255,255,0);}