@charset "utf-8";
/*cursorを変える*/

.menu li :hover{
  cursor: url(../img/bot.png), default;  
}


.still a :hover{
  cursor: url(../img/valentine_honmei_chocolate.png), default;  
}

.next a :hover{
  cursor: url(../img/finger_count05.png), default;  
}

.mondai00 p :hover{
  cursor: url(../img/finger_count01.png), default;  
}

.hover-image :hover{
  cursor: url(../img/finger_count05.png), default;  
}


/*cursorを変える終わり*/

h1{
    text-align: left;
    margin:20px 70px 0;
    color: #ffffff;
    font-size: 50px;
    background-image: url(../img/flower.jpg);
    border-radius: 30px;
    text-align: center;

}

h2{
    text-align: center;
    color: #4d4d4d;

}

h3{
    text-align: center;
margin: 0 -75px 0 20px;
color: #a09f9f;
}


p{
    text-align: center;
}
.wrap{
    overflow: hidden;
    width: 1280px;
    margin-left: auto;
    margin-right: auto;
    

  }
  .main{
    float: left;
    width: 1280px;
    height:700px;
    background-color: #ddd;
    background-image: url(../../JavaScript_test/img/Photo_school_01.png);
    margin:0 25px 0;
  }

  .word p{
    text-align: left;
    line-height: 5px;
  font-size: 20px;
   padding: 10px 100px 5px;
   font-weight: bold;
   -webkit-text-stroke: 0.1px #ffffff;/*ベンダープレフィックス*/
   color: #220558;

  }
  

.text{
  margin: 450px 280px 0;
  padding: auto;
  background-color: rgba(255,105,212,0.5);    /*透明度*/
  border-radius: 10px;
  width: 800px;
  height: 200px;

}

  .menu{
    float: right;
    width: 300px;
    

  }
  .menu li a{
    display: block;
    height: 44px;
    line-height: 44px;
    text-decoration: none;
    text-align: center;
    margin: 60px -300px  0;
   background-image: url(../../JavaScript_test/img/flower.jpg);
   color: #96714f;
   font-weight: bold;
   width: 300px;
   
    border-radius: 20px;
  }

  li a:hover{
    filter: brightness(130%);
 
  }


  ul{
    list-style-type:none;

  }


  .character{
    margin: 0 120px 0;
    animation: fuwafuwa 3s ease-in-out infinite alternate;
    background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
    display: inline-block;
    transition: 1.5s ease-in-out;
    width: 70px;
    height: 70px;
    margin-top: 15px;
  }
  .charaarea{
    margin: -600px 500px 0px;
    width: 1000px;
  
      overflow:hidden;
     }
     .charaarea {
      transition:1s all;
     }
     .charaarea :hover{
       transform:scale(1.2,1.2);
       transition:1s all;
       filter: brightness(110%);
       
     }
    
    


  .hover-image {
    width: 100%;
    height: 100%;
    margin: -300px 10px 10px;
  }
  
  .hover-image:hover img {
    display: none;
  }
  
  .hover-image:hover {
    background-image: url("../img/Photo_kyoton0.png");
    background-repeat: no-repeat;
  }
  @keyframes fuwafuwa {
    0% {
      transform:translate(0, 0) rotate(-7deg);
    }
    50% {
      transform:translate(0, -7px) rotate(0deg);
    }
    100% {
      transform:translate(0,0) rotate(7deg);
    }
  }
   

  .funstudy{
    margin: 30px 50px 0 ;
    filter: contrast(200%);
    filter: drop-shadow(10px 10px #c6c9df);
  }

  .funstudy :hover{
    filter: brightness(130%);   
  }
  .next{
  margin:-80px 600px 0;
  }

  .next a:hover{
    filter: brightness(130%);  
  }

 
  .next {
    animation: poyoyon2 8s ease-in-out forwards;
    animation-iteration-count:infinite;/*繰り返し*/
  }
   
  @keyframes poyoyon2 {
    0%  {
      transform: scale(1.0, 1.0) translate(0, 0);
    }
    15% {
      transform: scale(0.98, 0.9) translate(0, 5px);
    }
    30% {
      transform: scale(1.02, 1.0) translate(0, 8px);
    }
    50% {transform: scale(0.98, 1.05) translate(0, -8px);
    }
    70% {
      transform: scale(1.0, 0.9) translate(0, 5px);
    }
    100% {
      transform: scale(1.0, 1.0) translate(0, 0);
    }
    0%, 100% {
      opacity: 1;
    }
  }



  .mondai00{
   background-image: url(../img/flower.jpg);
    color: #96714f;
    width: 500px;
    height: 400px;
    margin: auto;
    padding:10px 0 0;
    border-radius: 20px;
    font-weight: bold;
  }

  .mondai00 h1{

font-size: 20px;
color: #96714f;

   }

   .mondai00 .var{
    height: 250px;
 overflow: hidden scroll; 
   }

   .mondai00 h5{
    font-size: 20px;
    margin:10px 200px 0 ;
    color: rgb(255, 111, 135);
    font-weight: bold;
       }

 p
  {
   animation-name: textanime;/*keyname*/
   animation-duration:5s;/*最大再生時間*/
   /* animation-iteration-count:infinite;/*繰り返し */
  }
  
  @keyframes textanime
  {
   0%{
    opacity: 0;
   }
  
   100%{
    opacity: 1;
   }
  }
  .kaisetu{
    margin: 10px 400px 0;
    
  }

  .congra{
    margin: 100px 500px 0;
  }
  .congra img{
    width: 500px;
    animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    /* animation-iteration-count:infinite; 繰り返し */
}
 
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.stop {
 margin:-200px 0 0;
    width: 50px;
    height: 50px;
    opacity: 0;
    padding-bottom: 40px;
   
  }
  .stop {

  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  /* animation-iteration-count:infinite; 繰り返し */
}

@keyframes zoomIn {
0% {
  transform: scale(0.8);
  opacity: 0;
}
100% {
  opacity: 1;
  transform: scale(1);
}
}
  
  /*{
    animation: kurukuru 1.4s ease-out;
    opacity: 1;
  }
  @keyframes kurukuru {
    0%{
      transform: rotateY(0) translateY(40px);
      opacity: 0;
    }
    100%{
      transform: rotateY(360deg) translateY(0);
      opacity: 1;
    }
  }*/
 
  .still img{
  margin: -20px 30px 100px ;
width: 10%;
padding: 0 6px 0 ;
 }

 .still  :hover{
  filter: brightness(130%); 
 }
 

 .still{
  width:100%;
  /* margin: auto;  */
  height: 80%;
  overflow:hidden;
 }
 .still img{
  transition:1s all;
 }
 .still img:hover{
   transform:scale(1.2,1.2);
   transition:1s all;
 }


 
 .thank{
  margin: 50px 450px 0px;
 }
 .thank  :hover{
  filter: brightness(130%); 
  cursor: url(../img/finger_count05.png), default;  

 }

 .thank img{
  width:300px; 
  margin:0 auto; 
 }
 .thank img:hover{
   transform:scale(1.2,1.2);
 }

 .tugi{
font-size: 25px;


 }

.congra p{
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  color: #220558;
  -webkit-text-stroke: 0.5px #ffffff;/*ベンダープレフィックス*/
}

 /* section img{
  max-width: 100%;
} 
.center{
  margin: 0 auto 0 auto;
  max-width: 90%;
  width: 500px;
} 
ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li{
  flex: 1 1 auto;
  margin-right: 8px;
}
li:last-of-type{
  margin-right: 0;
} */

footer{
  margin: auto;
  text-align: center;
}

.last img{

  margin: 10px 0 0 450px;
  width: 350px;

  animation-name: textanime;/*keyname*/
  animation-duration:5s;/*最大再生時間*/
 /* animation-iteration-count:infinite;繰り返し*/

}


@keyframes textanime
{
 0%{
  opacity: 0;
 }

 100%{
  opacity: 1;
 }
}


.mondai000 img{
width: 500px;
}
.mondai000{

  margin: 10px 0 0 380px; 
}

.main02{
background-image: url(../img/Photo_room_02.png);
height: 1200px;
width: 100%;

}

.last :hover{
  cursor: url(../img/valentine_honmei_chocolate.png), default; 

}


@media only screen and (max-width:800px)
{

  .wrap{
    overflow: hidden;
    width: 1000px;
    margin: 0 0px 0 30px ;
}/* 上 | 右 | 下 | 左 */

  .hover-image:hover {
    background-image: url("../img/Photo02.png");
    background-repeat: no-repeat;
    width: 100%;
    height: 1000px;
    margin: 0 0 0 50px ;/* 上 | 右 | 下 | 左 */
  }
  @keyframes fuwafuwa {
    0% {
      transform:translate(0, 0) rotate(-7deg);
    }
    50% {
      transform:translate(0, -7px) rotate(0deg);
    }
    100% {
      transform:translate(0,0) rotate(7deg);
    }
  }
   

  .funstudy{
    margin: 30px 50px 0 ;
    filter: contrast(200%);
    filter: drop-shadow(10px 10px #c6c9df);
  }

  .funstudy :hover{
    filter: brightness(130%);   
  }

body main{
  width: 100%;
  overflow-x: hidden;
  height: 1000px; 
}
  
.main{
width: 100%;
height: 1000px;
overflow: hidden scroll; 
  }

  footer{
    margin: auto;
    text-align: center;
  }  

  .funstudy{
width: 300px;
  }

  .funstudy img{
    width: 52.2px;
    height: auto;
  }

  
.startgirl{
  display: none;
}


.character img{
  width: 180px;
  height: auto;
  margin: 0px 0px 0px -10px; /* 上 | 右 | 下 | 左 */
}

.menu {
  
  width: 100px;
  height: 1000px; 
margin: 10px -60px 0px 0px; /* 上 | 右 | 下 | 左 */
}

.main {
  position: static;
  float: left;
  width: 375px;
  height: 1000px;
  background-color: #ddd;
  background-image: url(../../JavaScript_test/img/Photo_school_01.png);
  margin:0px 0px  0px -15px; /* 上 | 右 | 下 | 左 */
}

.menu ul{
  /* overflow: hidden scroll; */
  margin:0px  0px  0px 0px; /* 上 | 右 | 下 | 左 */
  width: 375px;
  height: 1000px;
}

.menu li{
  height: 5px;  
  margin:-10px  0px  -5px 10px; /* 上 | 右 | 下 | 左 */
}

.charaarea img{
height: 300px;
  margin:0px 0px  0px -50px; /* 上 | 右 | 下 | 左 */

}

.next{
  margin:-10px  0px  0px  150px; /* 上 | 右 | 下 | 左 */
  width: 30px; 
}

.text{
  margin:500px  0px  0px -10px; /* 上 | 右 | 下 | 左 */
  width: 500px;
}

.text{

  background-color: rgba(255, 230, 248, 0.5);    /*透明度*/
  border-radius: 10px;
  width: 400px;
  height: auto;
  margin:50px  0px  0px -10px; /* 上 | 右 | 下 | 左 */

}
.word p{
  text-align: center;
  line-height: 25px;
font-size: 20px;

 font-weight: bold;
 -webkit-text-stroke: 0.1px #ffffff;/*ベンダープレフィックス*/
 color: #220558;

}


.mondai {
  width: 200px;
  height: auto;
  margin:0px  0px  0px 60px; /* 上 | 右 | 下 | 左 */

}

.mondai img{
  width: 22px;
  height: auto;
}


.mondai00{
  width: 250px;
  height: 300px;
  margin:50px  0px  0px 60px; /* 上 | 右 | 下 | 左 */ 
  overflow: hidden scroll;
}

.mondai00 h1{
  font-size: 20px;
}

.mondai00 p{
  font-size: 15px;

}

.hover-image{
  width: 250px;
  height: auto;
  margin:0px  0px  0px 0px; /* 上 | 右 | 下 | 左 */
}


.kaisetu{
  width: 150px;
  margin:0px  0px  0px 120px; /* 上 | 右 | 下 | 左 */
}

.kaisetu img{
  width: 30px; 
}

.congra{
  width: 300px;
  margin:10px  0px  0px 120px; /* 上 | 右 | 下 | 左 */
}

.congra img{
  width: 300px;
  margin:100px  0px  10px -80px; /* 上 | 右 | 下 | 左 */
}

.congra p{
  width: 300px;
  margin:0px  0px  180px -80px; /* 上 | 右 | 下 | 左 */
}

.thank{
  width: 450px;
  height: auto; 
  margin:0px  0px  100px 80px; /* 上 | 右 | 下 | 左 */
}

.thank img{
  width: 200px;
  height: auto; 
}



.still{
max-width: 375px;
  height: auto;
  margin:0px  0px  0px  15px; /* 上 | 右 | 下 | 左 */ 

}

.still img{
  width: 100px;
  height: auto;
}


.last img{

  margin: 80px 0 0 0px;
  width: 350px;

   /*animation-name: textanime;/*keyname*/
  /* animation-duration:5s;/*最大再生時間*/
 /* animation-iteration-count:infinite;繰り返し*/

}


/* @keyframes textanime
{
 0%{
  opacity: 0;
 }

 100%{
  opacity: 1;
 }
} */

.main02{

height: 1500px;
width: 100%;
}


}