@charset "UTF-8";
/**************************************************************

キャラ一覧(共通)

**************************************************************/
.fixed_nav ul li.navi_character{
	border-top: 3px solid #3FABD5;
	background:#EDFAFF;
}

/*画面幅768以上の時*/
@media (min-width: 768px){

	.fixed_nav ul li.navi_character{
		border-top:none; 
		border-bottom: 3px solid #3FABD5;
	}

}/*@mediaおわり*/

/**************************************************************

キャラ一覧（index）

**************************************************************/

.character_list{
	display: flex;
	margin-left: -20px;
	flex-wrap: wrap;
}

.character_list li{
	margin-left: 20px;
	width: calc(33.33% - 20px);
	margin-bottom: 30px;
	font-family: kan415typos-std, sans-serif;
	font-weight: 400;
	text-align: center;
}

.character_list li a{
	color: #707070;
	text-decoration: none;
}
.character_list li img{
	border-radius: 10px;
}
.character_list li span{
	font-size: 0.75rem;
}
/*画面幅768以上の時*/
@media (min-width: 768px){

.character_list{
	margin-left: -50px;
}

.character_list li{
	margin-left: 50px;
	width: calc(20% - 50px);
}
	
}/*@mediaおわり*/

/*--ネピアさん紹介--*/

#wrap_nepia{
	background: url("../img/bg_note01.png") repeat-y 0 0/30px auto;
	padding:0 0 0 30px !important;
	filter: drop-shadow(2px 2px 1px #D9D9D9);
}
.nepia{
	background: url("../img/bg_note02.png") repeat 0 0/15px auto;
	padding: 15px 15px 15px 0;
}

.nepia h2{
	margin-bottom: 1rem;
	font-size: 1.25rem;
	color: #E00081;
}

.nepia dl dt{
	display: inline-block;
	background: #D6F3FF;
	padding: 0.5rem 1rem;
	border-radius: 5px;
	margin-bottom: 0.5rem;
}

.nepia dl dd{
	margin-bottom: 1rem;
}

/**************************************************************

キャラ個別ページ

**************************************************************/
.wrap_character_details{
	display: flex;
	flex-wrap: wrap;
}

.wrap_character_details figure{
	background: url("../img/shadow.svg") no-repeat center bottom /70%;
	text-align: center;
	width: 100%;
	margin-bottom: 1rem;
}

.wrap_character_details figure img{
	height: 50vh;
	max-height: 500px;
	width: auto;
}

/*--あるある--*/
.character_details{
	order: 2;
	width: 100%;
	display: flex;
	lex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
	content: center; /* 子要素をflexboxにより中央に配置する */
	align-items: center;  /* 子要素をflexboxにより中央に配置する */
}

.character_details_inner{
	background: url("../img/bg_note01.png") repeat-y 0 0/30px auto;
	padding-left: 30px;
	filter: drop-shadow(2px 2px 1px #D9D9D9);
}
.character_details_inner02{
	background: url("../img/bg_note02.png") repeat 0 0/15px auto;
	padding: 15px 15px 15px 0;
}
.character_details_inner h2{
	margin-bottom: 1rem;
	font-size: 1.25rem;
	color: #E00081;
}
.character_details_inner h2 span{
	font-size: 0.8125rem;
}
dl.character_data{
	font-size: 0.9375rem;
}

dl.character_data dt{
	display: inline-block;
	background: #D6F3FF;
	padding: 0.5rem 1rem;
	border-radius: 5px;
	margin-bottom: 0.5rem;
}

dl.character_data dd{
	margin-bottom: 1rem;
}


 /* 画面サイズが768px以上の場合の設定 */
@media (min-width: 768px){
	.wrap_character_details{
		flex-wrap: nowrap;
	}
	.wrap_character_details figure{
		background-size: 100%;
		margin-right: 30px;
		width: 50%;
	}
	.wrap_character_details figure img{
		height: 50vw;
		max-height: 500px;
	}
}/*@mediaおわり*/


