body{
 background-color: #e8f6fe;
 margin: 0;
}
main{
 width: 90%;
 margin: 0 auto;
}
a{
text-decoration: none;
color: #000;
}
ul{
list-style: none;
padding-left: 0;
}
li{
line-height: 1.5rem;
}
nav{
 width:100%;
 text-align: center;
}
/* 共通部分 */
.backScreen{
background-color: #fff;
padding: 10px;
}

.buttonLayout{
display: flex;
justify-content: space-evenly;
margin: 20px 0;
}
.cell{
padding: 10px 10vw;
background-color: #fff;
font-size: 1.5rem;
font-weight: bold;
}
.genre{
background-color: #53d3c3;
padding: 0 5px;
margin-right: 5px;
margin-bottom: 5px;
border: 3px solid #000;
border-radius: 10px;
text-align: center;
}
.grid{
display: grid;
grid-template-columns: 60px 1fr;
align-items: start;
}
.index{
text-align: center;
font-size: 1.5rem;
font-weight: bold;
margin:0.5rem 0;
}
.tc{
text-align: center;
}
/* ヘッダー */
.container{
height: 300px;
position: relative;
}

.image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
background-size: cover;
background-position: center 0%;
animation: image-switch-animation 20s infinite;
}
.src1 {
  background-image: url(../img/prize20260221.jpg);
}
.src2 {
  background-image: url(../img/topImg00.jpg);
}
.src3 {
  background-image: url(../img/asaka_badminton_winners_700x350.jpg);
}
.src4 {
  background-image: url(../img/asaka_badminton_winners_oyako2026_700x350.jpg);
}
.src5 {
  background-image: url(../img/topImg03.jpg);
}
.topimg{
width:100%;
}
.img{
width:100%;
max-width: 500px;
margin:0 auto;
}
.headerImage{
 width: 100%;
 max-width: 500px;
 margin: 10px 0;
}
.information li{
line-height: 2rem;
}
/* フッター */
footer{
background-color: #0097FF;
height: 100px;
display: flex;
align-items: center;
justify-content: space-around;
color:#fff;
margin-top: 20px;
}



/* アニメーション管理 */
@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}
.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 5s;
}
.image:nth-of-type(3) {
  animation-delay: 10s;
}
.image:nth-of-type(4) {
  animation-delay: 15s;
}
.image:nth-of-type(5) {
  animation-delay: 20s;
}


@media only screen and (min-width:961px){
.container{
height: 500px;
position: relative;
}
}