html { scroll-behavior: smooth;}

body {
	background-color: #be6ca1;

	background-image:url("img/back.png");
	background-size:150px;
	
}

.header-img{
	padding-top: 5%;
	margin: auto;
	text-align: center;

}

.header-img img{
	margin: auto;
	width: 50%;
}

.header-img p{
	font-family: "Kaisei Decol", serif;
	font-weight: 400;
	font-size: 24px;
	color: white;

}






.chara-back {
	position: relative;
	
	margin: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	
	max-width: 55%;
    max-height: auto;
	
	border-radius: 100px;

	background-image: linear-gradient(0deg, #dcb6d6, #cf6cba);
	

}




.chara-button ul{

	display: flex;
	list-style: none;

	flex-wrap: wrap;
}


.chara-button li{
	background-image: linear-gradient(0deg, #dcb6d65c, #f5d3ed) ,url("img/button-back.png");
	background-size: 15%;
	

	border-radius: 50px;

	transition: 0.3s;
	margin:19px;
	
	max-width:200px;
	max-height:200px;

	overflow: hidden;

}


.chara-button img{

	transition: 0.3s;
	object-fit: cover;
	

	margin: auto;
	width: 100%;

	transform: scale(1.7) translate(0,30px);
	
}

.chara-button li:hover {
	opacity: 0.30;
	transform: scale(0.95);
	cursor: pointer;

}
.chara-button img:hover{
	transform: scale(1.8) translate(0,35px);
}




@media (max-width: 800px) {

	header img{
	margin: auto;
	width: 70%;
	}

	.chara-back {
		position: relative;
		
		margin: auto;
		padding-top: 30px;
		padding-bottom: 30px;
		
		max-width: 80%;
		max-height: auto;
		
		border-radius: 100px;

		background-image: linear-gradient(0deg, #dcb6d6, #cf6cba);
	

	}

	.chara-button ul{

		display: flex;
		list-style: none;

		flex-wrap: wrap;
	}


	.chara-button li{
		background-image: linear-gradient(0deg, #dcb6d65c, #f5d3ed) ,url("img/button-back.png");
		background-size: 15%;
		

		border-radius: 50px;

		transition: 0.3s;
		margin:19px;
		
		max-width:160px;
		max-height:160px;

		overflow: hidden;

	}


	.chara-button img{

		transition: 0.3s;
		object-fit: cover;
		

		margin: auto;
		width: 100%;

		transform: scale(1.7) translate(0,30px);
		
	}


}

@media (min-width:801px) and (max-width: 1280px) {



	header img{
	margin: auto;
	width: 60%;
	}

	.chara-back {
		

		position: relative;
		
		margin: auto;
		padding-top: 30px;
		padding-bottom: 30px;
		
		max-width: 80%;
		max-height: auto;
		
		border-radius: 100px;

		background-image: linear-gradient(0deg, #dcb6d6, #cf6cba);
	

	}

	.chara-button ul{

		display: flex;
		list-style: none;

		flex-wrap: wrap;
	}


	.chara-button li{
		background-image: linear-gradient(0deg, #dcb6d65c, #f5d3ed) ,url("img/button-back.png");
		background-size: 15%;
		

		border-radius: 50px;

		transition: 0.3s;
		margin:19px;
		
		max-width:200px;
		max-height:200px;

		overflow: hidden;

	}


	.chara-button img{

		transition: 0.3s;
		object-fit: cover;
		

		margin: auto;
		width: 100%;

		transform: scale(1.7) translate(0,30px);
		
	}


}

/*
まだ新キャラ追加前なので。
データ作成終わったら順次コメントアウト
*/

/*
#yotuba{
	display: none;
}
*/
#marine{
	display: none;
}





.chara-over {
	z-index: 50;

	display: none;
   
	height: 100vh;
    width: 100%;
    background-color: rgb(0 0 0 / 0.5);
    position: fixed;
    top: 0;
    left: 0;

}


.contents {
	
    background-image: linear-gradient(0deg, #dcb6d6, #cf6cba);
	width: 50%;
	border-radius: 100px;

	opacity: 1;

	display: flex;

	margin: -25px 0 0 -25px; 
    padding: 17%;

	
	position: absolute;
	top: 15%;
	left: 10%;
	bottom: 10%;

	
	align-items: center;
	justify-content: center;
}


.contents img{
	position: absolute;
	width: 40%;
	left: 0;
}

.contents-text{
	position: fixed;
	margin-left: 25%;
	top:25%;

}
.contents-text img{
	margin-top: 55px;
	width: 70px;
}


#chara-name{

	color:white;
	font-family: "Kaisei Decol", serif;
	font-weight: 700;
	font-size: 52px;

	margin-left: 15%;
	
}

#chara-info{
	font-family: "Kaisei Decol", serif;
	font-weight: 400;
	font-size: 24px;
	color: white;
}


@media (max-width: 800px) {


		.contents {
			
			background-image: linear-gradient(0deg, #dcb6d6, #cf6cba);
			width: 50%;
			border-radius: 100px;

			opacity: 1;

			display:block;

			margin: -25px -15px 0 -25px; 
			padding: 17%;

			
			position: absolute;
			top: 10%;
			left: 10%;
			bottom: 5%;

			
			align-items: center;
			justify-content: center;
		}


		.contents img{
			position: absolute;
			width: 50%;
			left: 25%;

			top:50px;
		}

		.contents-text{
			position: fixed;
			right:180px;
			top:50%;

		}
		.contents-text img{
			top: -12px;
			right: 70px;
			
			width: 32px;
		}


		#chara-name{

			color:white;
			font-family: "Kaisei Decol", serif;
			font-weight: 700;
			font-size: 32px;

			margin-left: 40%;
			
		}

		#chara-info{
			font-family: "Kaisei Decol", serif;
			font-weight: 700;
			font-size: 18px;
			color: white;
		}


}


@media (min-width:801px) and (max-width: 1280px) {


		.contents {
			
			background-image: linear-gradient(0deg, #dcb6d6, #cf6cba);
			width: 50%;
			border-radius: 100px;

			opacity: 1;

			display:block;

			margin: -25px -15px 0 -25px; 
			padding: 17%;

			
			position: absolute;
			top: 10%;
			left: 10%;
			bottom: 5%;

			
			align-items: center;
			justify-content: center;
		}


		.contents img{
			position: absolute;
			width: 30%;
			left: 35%;

			top:35px;
		}

		.contents-text{
			position: fixed;
			right:30%;
			top:47%;

		}
		.contents-text img{
			top: -3px;
			right: 100px;
			
			width: 42px;
		}


		#chara-name{

			color:white;
			font-family: "Kaisei Decol", serif;
			font-weight: 700;
			font-size: 42px;

			margin-left: 45%;
			
		}

		#chara-info{
			font-family: "Kaisei Decol", serif;
			font-weight: 500;
			font-size: 20px;
			color: white;
		}


}




/*  閉じるボタンは独立してるんだぜ  */
.chara-close {


	position: absolute;
	width: 55px;
	


	top:16%;
	left: 85%;
}

.chara-close img{
	transition: 0.3s;
}

.chara-close img:hover{
	opacity: 0.3;
	cursor: pointer;
}





@media (max-width: 800px) {

	.chara-close {


			position: absolute;
			width: 65px;
			


			top:13%;
			left: 75%;
		}

		.chara-close img{
			transition: 0.3s;
		}

		.chara-close img:hover{
			opacity: 0.3;
			cursor: pointer;
		}


}

@media (min-width:801px) and (max-width: 1280px) {

		.chara-close {


			position: absolute;
			width: 65px;
			


			top:12%;
			left: 80%;
		}

		.chara-close img{
			transition: 0.3s;
		}

		.chara-close img:hover{
			opacity: 0.3;
			cursor: pointer;
		}

}