@charset "UTF-8";
/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
    line-height: 1.7;
	color: #432;
	background-color: #f0e68c;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
/* CSS Document */
header {
	font-family: Arial, Helvetica, "sans-serif";
	background-color: #39c;
	padding: 10px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
footer {
	padding: 20px 30px;
	background-color:#97a791;
}
footer p {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
	line-height: normal;
}
.logo img {
	width: 240px;
	height: auto;
	/*白黒反転*/
	filter: invert(100%);
}
ul {
	display: block;
}
li {
	margin: 20px;
}
a {
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}
a:hover {
	color: #07DDFF;
}
/* button */
.btn-menu {
	border: 1px solid #fff;
	border-radius: 5px;
	background: transparent;
	color: #fff;
	height: 50px;
	padding: 2px 10px;
	font-size: 16px;
	cursor: pointer;
}
/* menuボタン押さないとき */
nav {
	background-color: #39c;
	position: absolute;
	z-index: 2;
	top: 4rem;
	right: 0;
	overflow-x: hidden;
	text-align: center;
	width: 0; /* 見えなくする */
	transition: .5s; /* 0.5秒でスライド */
}
/* menuボタンクリック時 */
nav.open-menu {
	width: 40%;
}
.container {
	max-width: 1280px;
	max-height: 1100px;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
}
.top {
	background-image: url(../img/suujin_children_s30s.jpg);
	background-size: cover;
	background-position: center;
	padding: 100px;
	display: block;
	justify-content: space-between;
	height: 1100px;
}
h1{
	font-family: 'Times New Roman', Times, serif;
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1.5;
	color: #FFFFFF;
	text-align: center;
	margin-top: 100px;
}

/*desktop view
=========================================*/
@media (min-width: 600px) {
.btn-menu {
	display: none;
}
nav {
	/*リストを見せる*/
	top: 0;
	width: auto;
}
ul {
	width: 350px;
	display: flex;
	justify-content: space-between;
}
li {
	list-style-type: none;
}
li:not(.list1) {
	margin-left: 1px;
}
}
