body{

  background-color:black;
  font-family: serif;
}


.star {
  animation: kirakira 8s linear;
  color: yellow;
  display: inline-block;
  height: 1em;
  line-height: 1em;
  position: fixed;
  top: -1em;
  z-index: 1000;
}

@keyframes kirakira {
  0% {
      transform:translateY(0) rotateY(0);
  }
  100% {
      transform:translateY(calc(100vh + 1em)) rotateY(3600deg);
  }
}

.kekka{

  font-weight: bold;
  text-align: center;
  color: #CCC;
}

  .title{

    text-align: center;
    color: papayawhip;
  }
  .cf:after {
      content:" ";
      display:block;
      clear:both;
  }

  h3{
text-align: center;
    color: peachpuff;
  }
  .wrap{
    width:100%;
    max-width:600px;
    height:320px;
    text-align: center;
    margin:0 auto;
    padding:20px 20px;
    display: table;
    overflow:hidden;
    box-sizing: border-box;
    
  }
  .que{
    width:100%;
    display:none;
    vertical-align:middle;
    opacity:0;
    transition: all .4s ease;
    
  }
  .result{
    display:none;
    vertical-align:middle;
    opacity:0;
    transition: all .4s ease;
  }
  .result.active{
    display:table-cell;
    transform:translate3d(100%,0,0)
  }
  .result.active.open{
    opacity:1; 
    transform:translate3d(0,0,0)
  }
  .result.active.close{
    transform:translate3d(-100%,0,0)
  }
  .result_inner{
    text-align: center;
    width:100%;
    max-width:400px;
    margin:0 auto 20px auto;
    padding:50px 20px;
    border-radius: 10px;
    border:1px solid #CCC;
    color: #CCC;
  }
  .que.active{
    display:table-cell;
    transform:translate3d(100%,0,0)
  }
  .que.active.open{
    opacity:1; 
    transform:translate3d(0,0,0)
  }
  .que.active.close{
    transform:translate3d(-100%,0,0)
  }
  .que_inner{
    text-align: center;
    width:100%;
    max-width:800px;
    margin:0 auto 20px auto;
    padding:50px 20px;
    border-radius: 10px;
    border:1px solid #CCC;
    box-sizing: border-box;
  }
  .txt{
    margin-bottom: 40px;
    padding:0 0 10px 0;
    font-weight: bold;
    font-size: 30px;
    color: #ccc;
    

  }
  .btnArea{
    text-align: center;
    margin-bottom: 40px;
  }
  .btn{
    display: inline-block;
    border-radius:6px;
    border:1px solid #ccc;
    margin:10px 5px;
    color: #ccc;
  }
  .btn label{
    cursor:pointer;
    width:80%;
    height:100%;
    min-width:120px;
    padding:10px;
    display: block;
  }
  .btn:first-child{
     margin-bottom: 10px; 
  }
  @media screen and (min-width: 768px) {
  .btn:first-child{
     margin-right: 20px; 
    margin-bottom: 0;
  }
  }
  
  .btn .radio:before{
    content:"";
    display: inline-block;
    width:13px;
    height:13px;
    border-radius:50%;
    background:#CCC;
    margin-right: 10px;
    box-sizing: border-box;
  }
   .btn input:checked + .radio:before{
    border:3px solid #CCC;
     width:13px;
     height:13px;
     background:#333;
     
  }
  .btn input{
    display: none;
  }