@charset "utf-8";

.nav-list li a.character{
	background-color: #FF931E !important;
}

.content{
	background-image: url('../../img/bg-main.jpg');
}
.tit-page{
	width:100%;
}
.tit-page img{
	width:100%;
}
.content-area ul{
	width: 100%;
}
.content-area ul li{
	height:100%;
	float: left;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
	.content-area ul li{
		width:20%;
	}
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
	.content-area ul li{
		width:33.33%;
	}
}
.content-area ul li span,
.img-character span{
	position: relative;
	width: 100%;
	height:100%;
	min-height:100%;
	display:flex;
	cursor: pointer;
}
.content-area ul li span img,
.img-character span img {
	transition: opacity 0.5s !important;
}


.content-area ul li span img:first-of-type,
.img-character span img:first-of-type{
	opacity: 1;
}
.content-area ul li span img:last-of-type,
.img-character span img:last-of-type{
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0 !important;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
	.content-area ul li span:hover img:last-of-type{
    	opacity: 1 !important;
	}
}
.img-character span:hover img:first-of-type{
	opacity: 0 !important;
}
.img-character span:hover img:last-of-type {
	opacity: 1 !important;
}


/* キャラクター詳細ページ ==================== */
.content-character,
.content-character2{
	background-size:100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	color:#fff;
}
.content-character{
	background-image:linear-gradient(0, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1)), url('../img/bg-character.jpg');
}
.content-character2{
	background-image:linear-gradient(0, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1)), url('../img/bg-character2.jpg');
}
.content-character3{
	background-image:linear-gradient(0, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1)), url('../img/bg-character3.jpg');
}
.character-area{
	margin:0 auto;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
	.character-area{
		width:80%;
		padding-top:50px;
	}
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
	.character-area{
		width:95%;
		padding-top:20px;
	}
}
.character-frame-body{
	position: relative;
	background-image: url('../img/character-frame-body.png');
	background-size: 100%;
	background-repeat: repeat-y;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
	.img-character{
		width:70%;
		position: absolute;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}
}
@media screen and ( min-width:640px ) { /* PC ==================== */
	.img-left{
		top:25%;
		left:25%;
	}
	.img-right{
		top:25%;
		left:75%;
	}
}
.text-character{
	color:#000;
	position: relative;
	z-index: 10;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
	.text-character{
		width:40%;
		font-size:120%;
	}
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
	.text-character{
		width:85%;
		margin:-120px auto 0;
	}
}
@media screen and ( min-width:640px ) { /* PC ==================== */
	.float-left{
		float: left;
		margin-left:5%;
	}
	.float-right{
		float: right;
		margin-right:5%;
	}
}
@media screen and ( min-width:640px ) { /* PC ==================== */
	.tit-s{
		padding-top:50px;
	}
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
	.tit-s{
		padding-top:10px;
	}
}
@media screen and ( min-width:640px ) { /* PC ==================== */
	.text-character p{
		padding-top:20px;
	}
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
	.text-character p{
		padding-top:10px;
	}
}
.include-lineup{
	margin-top:50px;
}