*{
	margin:0;
	padding:0;
}

body{
	background-color: #B1DDE2;
	background-image: url(../image/site_bg.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;
	font-family:sans-serif;
	color: #152842;
}

a{
	color: #ffffff;
}

a:hover{
	opacity: 0.7;
}

a:visited{
	color: #ffffff;
}

h1{
	text-align: center;
	margin-bottom:5px;
	background-color:#28456E;
	color:#ffffff;
	/* border-color: #9C8EAE; */
	/* border-radius: 0.5em; */
}

h2{
	text-align: left;
}

.wrapper{
	width: 100%;
	max-width:1000px;
	min-width: 375px;
	margin:auto;
	/* background-color: #ffffff; */
}

.menu{
	width: 100%;
	max-width:1000px;
	min-width: 375px;
	height:65px;
	background-color:#ffffff;
	list-style-type:none;
	position:fixed;
	margin: auto;
}

.menu>ul{
	display: flex;
}

.menu-btn{
	max-width:250px;
	min-width:70px;
	width:100%;
	height:65px;
	background-color:#538DCB;
	font-weight:bold;
	font-size:20px;
	/* float:left;
	display:inline; */
	background-repeat:no-repeat;
	text-align:center;
	line-height:70px;
	color: #ffffff;
	border-left: solid 1px;
	border-right: solid 1px;
	box-sizing: border-box;
	list-style: none;
}

.menu-btn:nth-child(1){
	border-left: solid 1px #538DCB;
	border-right: solid 1px;
}

.menu-btn:nth-child(4){
	border-left: solid 1px;
	border-right: solid 1px #538DCB;
}


.menu-btn:hover{
	max-width:250px;
	min-width:70px;
	width:100%;
	height:65px;
	background-color:#ABDCEC;
	font-weight:bold;
	font-size:20px;
	float:left;
	display:inline;
	background-repeat:no-repeat;
	text-align:center;
	line-height:70px;
	color: #ffffff;
	border-left: solid 1px;
	border-right: solid 1px;
	box-sizing: border-box;
	list-style: none;
}

.menu-btn:hover:nth-child(1){
	border-left: solid 1px #ffffff;
	border-right: solid 1px;
}

.menu-btn:hover:nth-child(4){
	border-left: solid 1px;
	border-right: solid 1px #ffffff;
}

#first-view{
	padding-top: 65px;
	width: 100%;
	max-width:1000px;
	min-width: 375px;
	max-height:708px;
	margin: auto;
}

#first-view>img{
	width: 100%;
	max-width:1000px;
	min-width: 375px;
	/* border-radius: 0 0 1em 1em; */
}

.contents_bg{
	background-color: #ffffff;
}

footer{
	/* border-radius: 1em 1em 0 0; */
	height:40px;
	background-color:#538DCB;
	text-align:center;
	line-height:40px;
}


.contents{
	max-width:800px;
	width: 80%;
	margin:auto;
	padding:  25px 0;
}

.scroll{
	max-width:800px;
	width: 80%;
	margin:auto;
	padding: 15px 0;
}

.chara-area{
	max-width: 700px;
	width: 90%;
	margin: auto;
}

.chara-text{
	width: 100%;

}

.chara-name{
	margin-bottom: 20px;
}

.chara-img{
	max-width:500px;
	width: 100%;
}

.chara-img>img{
	width: 100%;
}

.detail{
	max-width:600px;
	width: 90%;
	list-style-type:none;
	padding: 5px;
	margin: auto;
}

.whats-new{
	max-width:784px;
	width: 90%;
	max-height:170px;
	border:solid #ABDCEC;
	background-color:#ffffff;
	overflow:auto;
	list-style-type:none;
	margin: 0 auto 30px;
	padding: 5px;
	color:#152842;
	border-radius: 1em;
}

.contents-text{
	max-width: 600px;
	width: 90%;
	margin: auto;
}

@media screen and (min-width:769px) {
	.chara-area{
		display: flex;
		margin-top: 30px;
	}
}

@media screen and (max-width:768px) {
	.chara-area{
		display: block;
		margin-top: 80px;
	}
}