@charset "utf-8";

body {
background: #000000;
color: #fff;
margin: 0;
text-align: center;
}

body {
font-family: 'M PLUS Rounded 1c', sans-serif;
}

h1 {
background-image: url(images/back_image01.jpg);
}

#contents1 {
background-image: url(images/back_image03.jpg);
}

#contents2 {
background-image: url(images/back_image05.jpg);
}

#contents3 {
background-image: url(images/back_image04.jpg);
}

#contents4 {
background-image: url(images/back_image02.jpg);
}

h1{
padding: 15% 0;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
text-align: center;
color: #ff1f09;
font-family: HG行書体;
text-shadow: 3px 3px 3px #000;
}

#contents1,#contents2,#contents3,#contents4{
padding: 15% 0;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
text-align: center;
color: #fff;
text-shadow: 3px 3px 3px #000;
}

header,article,footer {
text-align: center;
padding: 15px 0;
}

article {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
text-align: center;
}
section {
text-align: center;
width: 320px;
margin: 20px;
padding: 10px;
}
section p{
    text-align: center;
}
img{
border-radius: 1%;
}

/*メニューボタン*/
ul li{
list-style-type: none;
}

ul li a{
text-decoration: none;
color: #000;
font-weight: bolder;
background-color: #000;
width: 100px;
height: 100px;
padding-top: 22px;
margin: 30px;
background-image: url(images/nav-img1.png);
transition: 0.5s;
display: block;
}

/*マウスオン時の設定↓↓*/
ul li a:hover {
background-image: url(images/nav-img2.png);
color: #ff6ab4;
}
/*↑↑マウスオン時の設定*/

ul{
display: flex;
}

nav{
width: 550px;
margin: 0 auto;
display: flex;
}

/*ページトップボタン設定↓↓*/
#pagetop{
position: fixed;
bottom: 30px;
right: 30px;
border: 2px solid #fff;
width: 80px;
height: 80px;
text-align: center;
background-color: rgba(100, 100, 100, 0.3);
border-radius: 20%;
display: block;
}

#pagetop a{
display: block;
text-decoration: none;
color: #fff;
text-shadow:2px 2px 2px #000;
}

/*ページトップボタン設定↑↑*/

.autoplay img{
margin: 30px;/*画像の周りに余白*/
padding: 10px;
width: 100%;/*横幅に制限*/
border:/*周囲に薄いボーダー*/
}

@media(max-width:600px){
ul li{
    width: 90px;
    height: 90px;
}
ul li a{
text-decoration: none;
color: #000;
font-weight: bolder;
font-size: 13px;
background-color: #000;
width: 80px;
height: 80px;
padding-top: 18px;
margin: 20px;
background-image: url(images/nav-img1.png);
background-size: 100%;
transition: 0.5s;
display: block;
}

section p{
    width: 320px;
}
}