@charset "utf-8";
footer {
    background-color: #6E6B71;
    color: #FFFFFF;
    width: 800px;
}
body {
    background-image: url("img/bg2.gif")
}
header,main,footer{
    margin: 0 auto;
    width: 1000px;
    text-align: center;
}
nav ul{
	padding: 0;
	list-style-type: none;
	display: flex;
	justify-content: space-between;
}
h1, h2, footer {
    text-align: center;
}
nav a {
    color: #FEFEFE;
}
.hero{
    background-image: url("img/hero.jpg");
    width: 800px;
    padding: 100px;
    background-size: cover;
    border: 15px double #787777;
}
.items{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:20px;
}
.items img{
	max-width: 100%;
}
.item{
	background-color:white(255,255,255,0,60);
border: 5px solid gray;
	padding: 0 16px;
}
nav a:hover {
    background-color: #9F3EF5;
}
.page{
	background-color: rgba(173,29,251,0.64);
	color: white;
	padding: 30px;
	border-radius: 20px;
	border: 5px solid gray;
}
/*special.html*/
section{
	background-color: white;
	margin-bottom: 10px;
	overflow: hidden;
	padding:  0 3%;
	border: solid rgba(251,129,30,1.00)
}
article{
	width: 600px;
	float: left;
	text-align: left;
	line-height: 2;
	font-family: "Times New Roman", Times, "serif";
}
aside{
	float: right;
}
h2.page.special{
	height: 340px;
	background-image: url("img/1x/SP1.png");
	text-align: right;
}
/*モバイル指定*/

@media screen and (max-width:767px){
	header,main,footer{
	width: 90%;	
	}
	.hero{
		max-width: 100%;
		padding: 15% 0;
		height: 20vh;
		background-image: url("img/mobile.jpg");
		background-position: center;
	}
	img.index{
		max-width: 100%;
		height: 28vh;
	}
	nav ul{
		flex-wrap: wrap;
		gap:20px;
	}
	.items{
		grid-template-columns: 1fr;
	}
}