@charset "UTF-8";

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}

a {
	display:block;
	text-decoration-line: none;
}

a img:hover {
	opacity: 0.8;
}
	
html, body {
	background: #FFFDFA;
	height: 100%;
}

body {
	text-align: center;
	margin: 0;
	border-top: solid 10px #B90569;
}

body > footer {
	position: sticky;
	top: 100vh;
	background: #B90569;
	color: #fff;
}

/*メインコンテンツ
-------------------------------------*/
main {
	text-align: center;
}

main h1 {
	color: #B90569;
	font-size: 24px;
}

main .preface {
	margin: 60px auto;
	width: 85%;
	max-width: 840px;
}

main .banner {
	margin: 40px auto 70px;
	width: 90%;
	max-width: 1200px;
}


/*サイド
-------------------------------------*/

aside {
	max-width: 1200px;
	text-align: center;
	margin: auto auto 5% auto;
}

aside p, aside div {
	margin: 10px 20px;
	max-width: none;
}

aside p {
	font-size: 18px;
	color: #333;
	font-weight: bold;
	margin-bottom: 1.2rem;
}


@media (max-width: 768px){
aside div img {
	max-width: 85%;
}
}

/*フッター
-------------------------------------*/
footer {
	padding: 20px 0 20px;
}

footer p {
	margin-top: 18px;
}

.copyright {
	margin: 0.3rem auto 0.6rem auto;
	font-size: 24px;
	font-weight: bold;
}
.produce a {
	text-decoration: none;
	display: inline-block;
	color: white;
	font-size: 20px;
}