@charset "UTF-8";
/* CSS Document */

body{
  height: 900px;
  width: 100%;
  background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1));
margin: 0;
	padding: 0;
}



.wap a{
text-decoration:none;
color:#ffffff;
}

.wapper{
margin:0 auto;
	width: 100%;
}


.wap{
width: 1000px;
	padding:5% 10% 10% 10%;
	margin:0 auto;
	text-align: center;
margin-top: 130px;
	color: #ffffff;
}




.y_shopping{
width: 80%;
margin: 0 auto;
background-color: brown;
border-radius: 10px;
text-decoration: none;

}


.y_shopping a{
display: block;
line-height: 3rem;
		color: #ffffff;
	text-decoration: none;
}

.y_shopping a:hover{
background-color: maroon;
margin: 0 auto;
		border-radius: 10px;
}

.hr_line{
border-top: 1px solid #ffffff;
}


hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.img_rogo{
width: 70%;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.8)); /* SafariなどのWebkitブラウザ用 */
filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.5)); 
  animation: img_rogo 1.1s linear 0s 1;
}




@keyframes img_rogo {
  0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
  10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
  20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
  50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}





@media screen and (max-width: 900px) {
.wap{
width: 90%;
	padding:5%;
	margin:0 auto;
	text-align: center;
margin-top: 130px;
	color: #ffffff;
}

.wapper{
margin:0 auto;
	width: 100%;
}


body{
  height: 600px;
  width: 100%;
  background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1));
margin: 0;
	padding: 0;
}

.img_rogo{
width: 85%;

}
	

}