#menu-toggle:checked + #menu {
     display: block;
 }
 .max-h-64 {
     max-height: 16rem;
 }
 /*Quick overrides of the form input as using the CDN version*/
 .form-input,
 .form-textarea,
 .form-select,
 .form-multiselect {
     background-color: #edf2f7;
 }
 .english{
     display:none;
 }

 .englishShow{
     display:block;
 }



 .websiteList ul {
     list-style-type: square;
     margin-left: 24px;
     padding:0;
     text-align: left;
 }

 .profile-image{
    width:200px;
  }
  
  @media (min-width: 480px) {
   .profile-image{
    width:300px;
  }
 }

@media only screen and (max-width: 600px) {
.iframe-wrap {
 position: relative;
 width: 90%;
 padding-top: 56.25%;
 overflow:auto; 
 -webkit-overflow-scrolling:touch;
 border:2px solid #ccc; 
 }
 .iframe-wrap iframe {
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     border:none;
     display:block;
 }
}


.twitter-login{
    background: #1DA1F2;
  }
  
 

  .fa-star{
    color: yellow;
    position: absolute;
    animation: grow 0.9s linear;
    transform: translate(-50%, -50%) scale(0);
  }
  
  @keyframes grow {
    to{
      transform: translate(-50%, -50%) scale(7);
      opacity: 0;
    }
  }

  
  /*トップページの５の数字のCSS  */
  .counter {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .counter.hide {
    transform: translate(-50%, -50%) scale(0);
    animation: hide 0.2s ease-out;
  }
  
  @keyframes hide {
    0% {
      transform: translate(-50%, -50%) scale(1);
    }
  
    100% {
      transform: translate(-50%, -50%) scale(0);
    }
  }
  
  
  @keyframes show {
    0% {
      transform: translate(-50%, -50%) scale(0);
    }
  
    30% {
      transform: translate(-50%, -50%) scale(1.4);
    }
  
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }
  
  .nums {
    color: #3498db;
    font-size: 50px;
    position: relative;
    overflow: hidden;
    width: 250px;
    height: 50px;
  }
  
  .nums span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(120deg);
    transform-origin: bottom center;
  }
  
  .nums span.in {
    transform: translate(-50%, -50%) rotate(0deg);
    animation: goIn 0.5s ease-in-out;
  }
  
  .nums span.out {
    animation: goOut 0.5s ease-in-out;
  }
  
  @keyframes goIn {
    0% {
      transform: translate(-50%, -50%) rotate(120deg);
    }
  
    30% {
      transform: translate(-50%, -50%) rotate(-20deg);
    }
  
    60% {
      transform: translate(-50%, -50%) rotate(10deg);
    }
  
    100% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
  }
  
  @keyframes goOut {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
  
    60% {
      transform: translate(-50%, -50%) rotate(20deg);
    }
  
    100% {
      transform: translate(-50%, -50%) rotate(-120deg);
    }
  }

   /* !トップページの５の数字のCSS  */