@media screen and (max-width:460px) {
	article{width:100%;margin:0 auto 40px;}
	#title{width:100%;position:absolute;top:85%;left:50%;transform: translate(-50%, -50%);}
    #title h1{margin:0;font-size:1.25rem;font-weight:bold;color:#FF00FF;}
    #title p{margin:0;font-weight:normal;color:#FF00FF;}
	#top_img{position: relative;text-align:center; width:100%;height:auto;} #top_img img{width:100%;height:auto;}
	#wrapper{display:flex;flex-wrap:wrap;justify-content:space-around;}
    .to_page{width:100px;font-size:1rem;font-weight:bold;text-align:center;}
    .to_page a{color:inherit;text-decoration:none;}.to_page a:hover{color:black;}
	.my_blink {animation: my_blinking 1s linear infinite alternate;font-size:1rem;}
    @keyframes my_blinking {0% {color:#ff0000;}100% {color:#ffffff;}}
    .to_page1{margin:0;font-weight:bold;text-align:center;}
	#notice{font-size:1.2rem;font-weight:bold;text-align:center;}#notice a{color:#FF0098;}
	#kouyaku{margin:0;font-size:1rem;font-weight:bold;text-align:center;color:blue;}
}
  
@media screen and (min-width:461px) {
	article{width:800px;margin-bottom:30px;}
	#title{position:absolute;top:85%;left:50%;transform: translate(-50%, -50%);}
	#title h1{margin:0;font-size:3rem;font-weight:bold;color:#FF00FF;}
	#title p{margin:0;font-size:1.5rem;font-weight:normal;color:#FF00FF;}
	#top_img{position: relative;text-align:center; width:800px;height:550px;} #top_img img{width:800px;height:550px;}
	#wrapper{display:grid;grid-template-columns: repeat(4, 1fr);justify-items: center;}	
	.to_page{width:130px;font-size:1.25rem;font-weight:bold;text-align:center;}
	.to_page a{color:inherit;text-decoration:none;}.to_page a:hover{color:black;}
	.my_blink {animation: my_blinking 1s linear infinite alternate;font-size:1rem;}
	@keyframes my_blinking {0% {color:#ff0000;}100% {color:#ffffff;}}
	.to_page1{margin:0;font-size:1.25rem;font-weight:bold;text-align:center;}
	.to_page2{font-size:1.25rem;font-weight:bold;text-align:center;}
	.block{display:block;}
#notice{font-size:1.5rem;font-weight:bold;text-align:center;}#notice a{color:#FF0098;}
	#contents{display: flex;justify-content: space-around;}
	#kouyaku{margin:0;font-size:1.25rem;font-weight:bold;text-align:center;color:blue;}
}
#dialog_buttons{width:100%; display:flex;justify-content: center;} 
#OK{background-color:#EE0000;}
#fadeLayer {position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#000000;opacity:0.5;visibility:hidden;z-index:1;}

#sakura {position: absolute;margin:0;padding:0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;overflow:hidden;}
#sakura span{position: absolute;list-style: none;top: -30px;background: #ffdbed;border-radius: 0% 70%;  animation: fall 4s linear infinite, sway 2s ease-in-out infinite alternate;}

@keyframes fall {to {top: 120%;}}

@keyframes sway1 {from {transform: translateX(0px) rotate(0deg);}to {transform: translateX(200px) rotate(-45deg);}}
@keyframes sway2 {from {transform: translateX(200px) rotate(-45deg);}to {transform: translateX(0px) rotate(0deg);}}

#sakura span:nth-child(1){
  left: 0%;
  width: 24px;
  height: 15px;
  animation: fall 10s linear infinite,
             sway1 3s ease-in-out infinite alternate;
  animation-delay: 2s;
}

#sakura span:nth-child(2){
  left: 5%;
  width: 13px;
  height: 9px;
  animation: fall 15s linear infinite,
             sway1 2s ease-in-out infinite alternate;
  animation-delay: 8s;
}

#sakura span:nth-child(3){
  left: 15%;
  width: 16px;
  height: 10px;
  animation: fall 9s linear infinite,
             sway1 3.5s ease-in-out infinite alternate;
  animation-delay: 13s;
}

#sakura span:nth-child(4){
  left: 30%;
  width: 16px;
  height: 10px;
  animation: fall 8s linear infinite,
             sway2 4s ease-in-out infinite alternate;
  animation-delay: 7s;
}
#sakura span:nth-child(5){
  left: 40%;
  width: 16px;
  height: 10px;
  animation: fall 10s linear infinite,
             sway1 4s ease-in-out infinite alternate;
  animation-delay: 0s;
}
#sakura span:nth-child(6){
  left: 55%;
  width: 24px;
  height: 15px;
  animation: fall 11s linear infinite,
             sway2 3s ease-in-out infinite alternate;
  animation-delay: 3s;
}
#sakura span:nth-child(7){
  left: 65%;
  width: 16px;
  height: 10px;
  animation: fall 7s linear infinite,
             sway2 3.5s ease-in-out infinite alternate;
  animation-delay: 7s;
}
#sakura span:nth-child(8){
  left: 50%;
  width: 13px;
  height: 9px;
  animation: fall 7s linear infinite,
             sway1 3s ease-in-out infinite alternate;
  animation-delay: 3s;
}
#sakura span:nth-child(9){
  left: 80%;
  width: 16px;
  height: 10px;
  animation: fall 10s linear infinite,
             sway2 4s ease-in-out infinite alternate;
  animation-delay: 4s;
}