@charset "utf-8";

/* ***************************************************
ＨＵＧっと！プリキュア
------------------------------------------------------
キャラクター用CSS
------------------------------------------------------
・640pxまでをスマホとする
・641pxからタブレット／PCととする
・1000pxはPC専用とする
*************************************************** */

/* =============================================
 キャラクター一覧
============================================= */
.chara-list .chara_sub_title{
	width:100%;
}
@media screen and (min-width:641px) {
	.chara-list .chara_sub_title{
		width:56%;
	}
}
/* **************************** 
PC・タブレット用 CSS
**************************** */
@media screen and (min-width:641px){ 

}

/* =============================================
 キャラクター 敵＆周りの人々 一覧
============================================= */
.chara-otherlist .chara_sub_title{
	width:100%;
	margin-bottom: 3%;
}
@media screen and (min-width:641px) {
	.chara-otherlist .chara_sub_title{
		width:56%;
		margin-bottom: 2%;
	}
}
.chara_list_other{
	margin-bottom: 8%;
}
.chara_list_other:last-of-type{
	margin-bottom: 0;
}

.chara_list_other li{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
	margin: 0 0 4%;
	padding:3.5% 3% 3%;
	background-color:#FFF;
	position:relative;
	text-align:left;
	display:table;
}
.chara_list_other li:before{
	display: block;
	content: "";
	background: url("../img/common/line_chain.png") repeat-x top center;
	background-size: 100% auto;
	width: 100%;
	height: 8%;
	position: absolute;
	top:-1%;
	left:0;
}
.chara_list_other li:after{
	display: block;
	content: "";
	background: url("../img/common/line_chain.png") repeat-x top center;
	background-size: 100% auto;
	width: 100%;
	height: 8%;
	position: absolute;
	bottom:-8%;
	left:0;
}
.chara_list_other li:last-of-type{
	margin-bottom: 0;
}
.chara_list_other .chara_pict{
	float: left;
	width:30%;
	padding-right:2%;
}
.chara_list_other .chara_txt{
	float: right;
	width:66%;
	margin-bottom: 0;
}
.chara_list_other dt{
	background:url("../img/common/bg_oblpi2.png");
	background-size:20px;
	padding:2%;
	margin-bottom:2.5%;
	line-height:1.4;
	position:relative;
}
.chara_list_other dt {
	display:inline-box;
	color:#e5005e;
	font-weight:bold;
}
.chara_list_other dt span{
	display:inline-box;
	color:#891085;
	font-weight:normal;
}
.chara_list_other dd{
	line-height:1.6;
}

@media screen and (min-width:641px){ 
	.chara_list_other li{
		width:100%;
		margin: 0 0 4%;
		padding:2.5% 2% 2%;
	}
	.chara_list_other dt{
		margin-bottom:2%;
	}
	.chara_list_other .chara_pict{
		width:18%;
	}
	.chara_list_other .chara_txt{
		width:80%;
		margin-bottom:0; 
	}
}



/* =============================================
 キャラクター詳細
============================================= */
.chara-detail .btn{
	margin: 6% 0 0;
}
.chara_cate{
	width: 52%;
	margin: 0 auto 2.5%;
}
/* キャラの名前 */
.chara-detail .sub_title{
	margin-bottom:1.2%;
}
.chara_voice{
	color:#891085;
	position: relative;
	padding-bottom: 6%;
	margin-bottom: 3%;
}
.chara_voice_harry{
	color:#891085;
	line-height: 1.4;
	position: relative;	
	padding-bottom: 6%;
	margin-bottom: 3%;
}
.chara_voice_harry dt{
	vertical-align: top;
}
.chara_voice_harry dt, 
.chara_voice_harry dd{
	display: inline-block;
}

.chara_voice:after,
.chara_voice_harry:after{
	display: block;
	content: "";
	background: url("../img/common/line_heart.png") no-repeat bottom center;
	background-size: 100% auto;
	width: 100%;
	height: 60%;
	position: absolute;
	bottom:0;
	left:0;
}
.chara_phrase{
	display: table;
}
.chara_phrase dt{
	display: table-cell;
	width: 15%;
}
.chara_phrase dd{
	display: table-cell;
	text-align: left;
	color:#e5005e;
	vertical-align: middle;
	padding-left: 3%;
	line-height: 1.3;
	font-weight: bold;
}
.chara_movie_title{
	width: 50%;
	margin: 0 auto 1.5%;
}
.chara_txt{
	text-align: left;
	margin-bottom: 3%;
}
.chara_txt2{
	padding:1% 5%;
	background:url("../img/common/bg_oblpi.png");
	background-size: 10px auto;
}
.chara_txt2 dl{
	display:table;
	font-weight:bold;
	line-height:1;
	margin: 2% 0;
}
.chara_txt2 dt{
	display:table-cell;
	color:#e5005e;
	white-space: nowrap;
	text-align:left;
}
.chara_txt2 dd{
	display:table-cell;
	color:#891085;
	text-align:left;
	line-height:1.4;
}
.tab_btns{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: url(../img/common/bg_kirapink.jpg);
	background-size: 680px auto;
	box-shadow: 0 0 0 1px #d5aa59, 0 0 0 3px #fef4ba, 0 0 0 4px #d5aa59;
	position: relative;
	z-index: 1;
	padding: 7% 10% 0%;
	margin-bottom: 8%;
	text-align: center;
}
.tab_btns:before{
	display: block;
	content: "";
	background: url("../img/common/character/sttl_change.png") no-repeat top center;
	background-size: 100% auto;
	width: 70%;
	height: 25%;
	position: absolute;
	top:-11%;
	left:15%;
	z-index: 2;
}
.tab_btns.harry:before{
	display: block;
	content: "";
	background: url("../img/common/character/sttl_change2.png") no-repeat top center;
	background-size: 100% auto;
	width: 72%;
	height: 60%;
	position: absolute;
	top:-20%;
	left:14%;
	z-index: 2;
}
.tab_btns li{
	width: 44%;
	padding: 0 2% 4%;
	display: inline-block;
}
.tab-1{
	font-size: 0;
	width:100%;
	background: url("../character/img/btn_precure_off.png") no-repeat left top ;
	background-size: 100% auto;
	padding-top: 33%;
	text-indent: -9999px;
}
.tab-2{
	font-size: 0;
	width:100%;
	background: url("../character/img/btn_uniform_off.png") no-repeat left top ;
	background-size: 100% auto;
	padding-top: 33%;
	text-indent: -9999px;
}
.tab-1.tabulous_active{
	background: url("../character/img/btn_precure_on.png") no-repeat left top ;
	background-size: 100% auto;
}
.tab-2.tabulous_active{
	background: url("../character/img/btn_uniform_on.png") no-repeat left top ;
	background-size: 100% auto;
}
.tab-3{
	font-size: 0;
	width:100%;
	background: url("../character/img/btn_hamster_off.png") no-repeat left top ;
	background-size: 100% auto;
	padding-top: 33%;
	text-indent: -9999px;
}
.tab-4{
	font-size: 0;
	width:100%;
	background: url("../character/img/btn_human_off.png") no-repeat left top ;
	background-size: 100% auto;
	padding-top: 33%;
	text-indent: -9999px;
}
.tab-3.tabulous_active{
	background: url("../character/img/btn_hamster_on.png") no-repeat left top ;
	background-size: 100% auto;
}
.tab-4.tabulous_active{
	background: url("../character/img/btn_human_on.png") no-repeat left top ;
	background-size: 100% auto;
}

/*パジャマ*/
.tab-5{
	font-size: 0;
	width:100%;
	background: url("../character/img/btn_pajama_off.png") no-repeat left top ;
	background-size: 100% auto;
	padding-top: 33%;
	text-indent: -9999px;
}
.tab-5.tabulous_active{
	background: url("../character/img/btn_pajama_on.png") no-repeat left top ;
	background-size: 100% auto;
}

/*私服*/
.tab-6{
	font-size: 0;
	width:100%;
	background: url("../character/img/btn_private_off.png") no-repeat left top ;
	background-size: 100% auto;
	padding-top: 33%;
	text-indent: -9999px;
}
.tab-6.tabulous_active{
	background: url("../character/img/btn_private_on.png") no-repeat left top ;
	background-size: 100% auto;
}

/*マザーハートスタイル*/
.tab-7{
	font-size: 0;
	width:100%;
	background: url("../character/img/btn_motherheart_off.png") no-repeat left top ;
	background-size: 100% auto;
	padding-top: 33%;
	text-indent: -9999px;
}
.tab-7.tabulous_active{
	background: url("../character/img/btn_motherheart_on.png") no-repeat left top ;
	background-size: 100% auto;
}

/* =============================================
 タブ切り替え
============================================= */
/*tabulous.css*/
#tabs * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
a:active,a:focus {
	outline: expression(hideFocus='true');
}
#tabs_container {
	margin:5% 0;
	overflow: hidden;
	position: relative;
}
.transition {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.make_transist {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.hidescale {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
}
.showscale {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}
.hideleft {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
.showleft {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}
.hidescaleup {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
.showscaleup {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}
.hideflip {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transform: rotatey(-90deg) scale(1.1);
	-moz-transform: rotatey(-90deg) scale(1.1);
	-o-transform: rotatey(-90deg) scale(1.1);
	-ms-transform: rotatey(-90deg) scale(1.1);
	transform: rotatey(-90deg) scale(1.1);
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
.showflip {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transform: rotatey(0deg) scale(1);
	-moz-transform: rotatey(0deg) scale(1);
	-o-transform: rotatey(0deg) scale(1);
	-ms-transform: rotatey(0deg) scale(1);
	transform: rotatey(0deg) scale(1);
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
.tabulousclear {
	display: block;
	clear: both;
}
/* キャラクター背景設定 */
.cureyell .chara_clothes{
	background: url("../character/img/cureyell/bg.png") no-repeat center top;
	background-size: 100% auto;
}
.cureange .chara_clothes{
	background: url("../character/img/cureange/bg.png") no-repeat center top;
	background-size: 100% auto;
}
.cureetoile .chara_clothes{
	background: url("../character/img/cureetoile/bg.png") no-repeat center top;
	background-size: 100% auto;
} 

.curemacherie .chara_clothes{
	background: url("../character/img/curemacherie/bg.png") no-repeat center top;
	background-size: 100% auto;
} 

.cureamour .chara_clothes{
	background: url("../character/img/cureamour/bg.png") no-repeat center top;
	background-size: 100% auto;
} 


.chara_clothes.bg_uniform{
	background: url("../character/img/bg_uniform.png") no-repeat center top;
	background-size: 100% auto;
}
.harry .chara_clothes{
	background: url("../character/img/harry/bg.png") no-repeat center top;
	background-size: 100% auto;
}

/* 最下部：キャラクターリンク */
.chara_links{
	background: url("../img/common/bg_strpup.png");
	background-size: 20px auto;
	width: calc(96% - 8px);
	box-shadow: 0 0 0 1px #d5aa59, 0 0 0 3px #fef4ba, 0 0 0 4px #d5aa59;
	position: relative;
	z-index: 1;
	padding: 5% 2% 2%;
	margin: 15% auto 0;
	font-size: 0;
  	text-align: center;
}
.chara_links:before{
	display: block;
	content: "";
	background: url("../img/common/character/sttl_other.png") no-repeat top center;
	background-size: 100% auto;
	width: 55%;
	height: 12%;
	position: absolute;
	top:-8%;
	left:22.5%;
	z-index: 2;
}
.chara_links li{
	display: inline-block;
	width: 32%;
	padding: 0 0.5% 2%;
}

/* **************************** 
PC・タブレット用 CSS
**************************** */
@media screen and (min-width:641px) {
	.chara_cate{
		width: 30%;
		margin: 0 auto 2.5%;
	}
	.chara-detail .video{
		float: none;
		width: 100%;
		padding-top: 56.25%;
		margin-bottom: 6%;
	}
	.chara-detail .sub_title{
		width:70%;
		margin-bottom:1.5%;
	}	
	.chara_voice,
	.chara_voice_harry{
		font-size:1.25rem;
		color:#891085;
		position: relative;
		padding-bottom: 6%;
		margin-bottom: 3%;
	}
	.chara_voice:after,
	.chara_voice_harry:after{
		display: block;
		content: "";
		background: url("../img/common/line_heart2.png") no-repeat bottom center;
		background-size: 100% auto;
		width: 100%;
		height: 60%;
		position: absolute;
		bottom:0;
		left:0;
	}
	.chara_phrase{
		padding: 0 10%;
	}
	.chara_phrase dt{
		width: 12%;
	}
	.chara_phrase dd{
		font-size: 1.625rem;
		font-weight: bold;
	}
	.chara_inner{
		margin-bottom: 8%;
	}
	.chara_inner:after{
		content: "";
		display: block;
		clear: both;
	}
	.chara_clothes{
		width:58%;
		float: left;
	}
	.chara_info{
		width:40%;
		float: right;
	}	
	.chara_movie_title{
		width: 70%;
		margin: 0 auto 1.5%;
	}
	.chara_txt{
		text-align: left;
		margin-bottom: 6%;
	}
	.chara_txt2{
		padding:1% 5%;
		background:url("../img/common/bg_oblpi.png");
		background-size: 10px auto;
	}
	.chara_txt2 dl{
		display:table;
		font-weight:bold;
		line-height:1;
		margin: 2% 0;
	}
	.chara_txt2 dt{
		display:table-cell;
		color:#e5005e;
		white-space: nowrap;
		text-align:left;
	}
	.chara_txt2 dd{
		display:table-cell;
		color:#891085;
		text-align:left;
		line-height:1.4;
	}
	.tab_btns{
		padding: 6% 0 0;
		z-index: 1;
	}
	.tab_btns:before{
		display: block;
		content: "";
		background: url("../img/common/character/sttl_change.png") no-repeat top center;
		background-size: 100% auto;
		width: 54%;
		height: 20%;
		position: absolute;
		top:-11%;
		left:23%;
		z-index: 2;
	}
	.tab_btns.harry:before{
		display: block;
		content: "";
		background: url("../img/common/character/sttl_change2.png") no-repeat top center;
		background-size: 100% auto;
		width: 56%;
		height: 40%;
		position: absolute;
		top:-20%;
		left:23%;
		z-index: 2;
	}
	.tab_btns li{
		width: 30%;
		padding: 0 2% 4%;
	}
	.tab-1{
		font-size: 0;
		width:100%;
		background: url("../character/img/btn_precure_off.png") no-repeat left top ;
		background-size: 100% auto;
		padding-top: 33%;
		text-indent: -9999px;
	}
	.tab-2{
		font-size: 0;
		width:100%;
		background: url("../character/img/btn_uniform_off.png") no-repeat left top ;
		background-size: 100% auto;
		padding-top: 33%;
		text-indent: -9999px;
	}
	.chara_links{
		background: url("../img/common/bg_strpup.png");
		background-size: 20px auto;
		width: calc(96% - 8px);
		box-shadow: 0 0 0 1px #d5aa59, 0 0 0 3px #fef4ba, 0 0 0 4px #d5aa59;
		position: relative;
		z-index: 1;
		padding: 4% 2% 2%;
		margin: 0 auto 0;
		font-size: 0;
		text-align: center;
	}
	.chara_links:before{
		display: block;
		content: "";
		background: url("../img/common/character/sttl_other.png") no-repeat top center;
		background-size: 100% auto;
		width: 25%;
		height: 20%;
		position: absolute;
		top:-9%;
		left:38.75%;
		z-index: 2;
	}
	.chara_links li{
		display: inline-block;
		width: 15%;
		padding: 0 2.5%;
	}
}

/* プレサイト／キャラクターページ
---------------------------------------- */
/*
.character{
	background-color: #FFF;
}
.character_title{
	width: 88%;
	padding: 10% 0 6%;
	margin: 3.2% auto;
	position:relative;
}
.character_title:before{
	display: block;
	content: "";
	background: url("../img/common/character/deco_chara_top.png") no-repeat top center;
	background-size: 90%;
	width: 100%;
	height: 50%;
	position: absolute;
	top:3%;
	left:0;
}
.character_title:after{
	display: block;
	content: "";
	background: url("../img/common/character/deco_chara_bottom.png") no-repeat bottom center;
	background-size: 30%;
	width: 100%;
	height: 20%;
	position: absolute;
	bottom:0;
	left:0;
}
.character_phrase{
	padding: 0 5%;
}
.character_pict{
	padding: 0 5% 4%;
}
.character_txt{
	padding: 0 6% 3%;
	text-align:left;	
}
.character_detail{
	padding:1% 5%;
	background:url("../img/common/bg_oblpi.png");
}
.character_detail dl{
	display:table;
	font-weight:bold;
	line-height:1;
	margin: 2% 0;
}
.character_detail dt{
	display:table-cell;
	color:#e5005e;
	white-space: nowrap;
	text-align:left;
}
.character_detail dd{
	display:table-cell;
	color:#891085;
	text-align:left;
	line-height:1.4;
}

@media screen and (min-width:641px) {
	.character{
		margin: 0 auto;
	}
}
*/


/* 　プリキュア解禁前　*/



.cureamour #pre{
	background:url(/precure/hugtto/character/img/cureamour/bg.png) no-repeat center top;
	background-size:100%;

}

.curemacherie #pre{
	background:url(/precure/hugtto/character/img/curemacherie/bg.png) no-repeat center top;
	background-size:100%;

}


#pre img{
	max-height:330px;
	width:auto;
}

@media screen and (min-width:641px) {
#pre img{
	max-height:486px;
	width:auto;
}
	

.cureamour #pre{
	background:url(/precure/hugtto/character/img/cureamour/bg.png) no-repeat center top;
	background-size:60%;

}

.curemacherie #pre{
	background:url(/precure/hugtto/character/img/curemacherie/bg.png) no-repeat center top;
	background-size:60%;

}	
	
}

/* とりまく人々 */



.people_box .chara_inner{
	margin-bottom:0px;
}

.people_box{
	margin-bottom:5%;
	}	


.people_img{
	margin:0 auto;
}

.people_img img{
	max-width:200px;
	max-height:400px;
}

.people_txt{
	vertical-align:top;
	padding:2%;
}

.people_txt h4{
	color:#891085;
 background-color:#ffe1ec;
 padding:15px;
 font-size:1.4rem;
 font-weight:bold;
 margin-bottom:20px;

}

.people_txt h4 span{
	font-size:1.2rem;
}

.people_txt p{
	text-align:left;
}


@media screen and (min-width:641px) {

.people_txt h4 span{
	margin-left:10px;
	}
	
	
.people_img{
	display:table-cell;
	width:300px;

}

.people_txt{
	display:table-cell;
	width:700px;
	}
	
.people_img img{
	height:400px;
	width:auto;
}


}