@charset "utf-8";
/*
	character.css
*/

/* ==========================================================
	PC表示 @media screen and (min-width: 641px)
========================================================== */
@media screen and (min-width: 641px){
	#character #contents .inner {
		width: 920px;
		padding: 40px 0 50px;
		margin: 0 auto;
	}
	/*	sNavi
	=================== */
	#character .sNavi ul li a {
		height: 50px;
		text-indent: -9999px;
		display: block;
	}
	#character .sNavi ul li a:hover{
		background-position: 0 -50px;
	}
	#character li.precure a{
		background: url(../images/character/btn_sNavi01.png) no-repeat;
		width: 135px;
	}
	#character li.fairy a{
		background: url(../images/character/btn_sNavi02.png) no-repeat;
		width: 95px;
	}
	#character li.people a{
		background: url(../images/character/btn_sNavi03.png) no-repeat;
		width: 157px;
	}
	#character li.enemy a{
		background: url(../images/character/btn_sNavi04.png) no-repeat;
		width: 193px;
	}
	#character.category_01 .sNavi ul li.precure a,
	#character.category_02 .sNavi ul li.fairy a,
	#character.category_03 .sNavi ul li.people a,
	#character.category_04 .sNavi ul li.enemy a {
		background-position: 0 -50px;
	}

	/*	chara-navi
	=================== */
	.chara-navi01 {
		position: absolute;
		height: 134px;
		left: 50%;
		margin: 0 0 0 -305px;
		z-index: 2;
	}
	.chara-navi02 {
		position: absolute;
		height: 134px;
		left: 50%;
		margin: 0 0 0 -118px;
		z-index: 2;
	}
	*[class^="chara-navi"] ul {
		text-align: center;
		padding: 25px 0 0;
		position: relative;
		z-index: 9999;
	}
	*[class^="chara-navi"] li {
		display: inline-block;
	}
	*[class^="chara-navi"] ul:before, .chara-navi ul:after {
		content: "";
		display: table;
	}
	*[class^="chara-navi"] ul:after {
		clear: both;
	}

	/*	chara-main
	=================== */
	.chara-main {
		position: relative;
		width: 960px;
		margin: 0 auto;
	}
	.chara-main .chara-img {
		position: relative;
		z-index: 1;
	}
	.chara-main .chara-detail {
		position: absolute;
		left: 410px;
		z-index: 100;
	}
	.chara-main .chara-detail img {
		position: relative;
		z-index: 100;
	}
	.chara-main .chara-detail .chara-text {
		line-height: 1.75;
	}
	.chara-main .chara-detail .chara-text-rep {
		background: url(/tv/precure_alamode/images/character/bg_chara_detail.png) repeat-y;
		color: #6a3619;
		width: 528px;
		padding: 0 40px 8px 50px;
	}
	.chara-main .chara-detail .chara-text {
		width: 528px;
		font-size: 16px;
	}
	.chara-main .chara-detail .chara-text-top {
		position: relative;
		z-index: 0;
	}
	.chara-main .chara-detail .etc_info {
		background-color: #ffaad6;
		border-radius: 20px;
		color: #fff;
		font-size: 14px;
		line-height: 1;
		text-align: center;
		width: 150px;
		padding: 4px 0 2px;
		margin: 10px auto;
	}
	.chara-main .chara-detail span {
		font-size: 14px;
		line-height: 1.4;
		display: inline-block;
	}

	/* ===================
			precure
	====================== */

	#chara01 .chara-main .chara-img {
		margin: 0 0 0 45px;
	}
	#chara02 .chara-main .chara-img {
		margin: 30px 0 20px 0;
	}
	#chara03 .chara-main .chara-img {
		margin: 0 0 20px 0;
	}
	#chara04 .chara-main .chara-img {
		margin: 0 0 20px 0;
	}
	#chara05 .chara-main .chara-img {
		margin: 0 0 20px 0;
	}
	.category_01 #chara06 .chara-main .chara-img {
		margin: 0 0 0 0;
	}	
	#chara06 .chara-main .chara-img {
		margin: 15px 0 50px 0;
	}
	#chara07 .chara-main .chara-img {
		margin: 15px 0 50px 0;
	}
	#chara08 .chara-main .chara-img {
		margin: -65px 0 0px 20px;;
	}	
	#chara09 .chara-main .chara-img {
		margin: -65px 0 50px 5px;
	}		
	/*	detail
	=================== */
	#chara01 .chara-detail,
	#chara03 .chara-detail,
	#chara04 .chara-detail{
		top: 60px;
	}
	#chara02 .chara-detail {
		top: 30px;
	}
	#chara05 .chara-detail {
		top: 80px;
	}
	#chara06 .chara-detail ,
	#chara07 .chara-detail,
	#chara07 .chara-detail {
		top: 40px;
	}
	#chara08 .chara-detail {
		top: 75px;
	}
	#chara09 .chara-detail {
		top: 105px;
	}	
	#chara11 .chara-detail {
		top: 45px;
	}
	#chara12 .chara-detail {
		top: 80px;
	}		
	#chara13 .chara-detail {
		top: 120px;
	}	
	#chara14 .chara-detail {
		top: 120px;
	}		

	/*	slide
	=================== */
	.slide-formChange {
		width: 756px;
		margin: 0 auto;
		padding: 0 0 40px 0;
	}

	/*	etc
	=================== */
	.chara-etcContainer {
	  width: 840px;
	  padding: 5px 0 0;
	  margin: 0 auto;
	  clear: both;
	  overflow: hidden;
	}
	.etc-block {
		background: url(../images/character/bg_chara_etc.jpg) no-repeat center top #fff6fa;
		border: 1px solid #ffcae7;
	  float: left;
	  width: 410px;
	  margin: 0px 5px 20px;
	  -webkit-box-shadow: 0px 0px 5px #ffcae7;
	  -moz-box-shadow: 0px 0px 5px #ffcae7;
	  box-shadow: 0px 0px 5px #ffcae7;
	  border-radius: 5px 5px;
	}
	.etc-block .name {
		background: url(../images/character/bg_name.png) no-repeat center top;
		height: 60px;
		text-align: center;
		padding: 15px 45px;
		margin: 5px 0;
	}
	.etc-block .name span{
		font-size: 22px;
		color: #ff3f6b;
		font-weight: bold;
	}
	.etc-block .cv{
		font-size: 15px;
		color: #ff3f6b;
		text-align: right;
		padding: 0 25px 0 0;
	}
	.etc-block .inline {
		font-size: 16px;
		color: #6a3619;
		padding: 5px 25px 25px;
	}
	
ul.charaSns {
    display: block;
    padding: 5px 0;
    overflow: hidden;
}
	.charaSns li{display:block;margin-right:10px;float:left;}
	.charaSns li:nth-child(1){margin-top:-8px;}

}

/* ==========================================================
	PC表示 @media screen and (max-width: 640px)
========================================================== */

@media screen and (max-width: 640px) {
	/* 汎用 */
	.mT65 {
		margin-top: 65px!important;
	}	
	#character #contents .inner {
		width: 100%;
		padding: 35px 4% 40px;
		margin: 0 auto;
	}
	/*	chara-navi
	=================== */
	*[class^="chara-navi"] {
		width: 100%;
		position: absolute;
		height: auto;
		top: 10px;
		left: 50%;
		padding: 0 8%;
		margin: 0 0 0 -50%;
		z-index: 2;
	}
	*[class^="chara-navi"] ul {
		width: auto;
		text-align: center;
		margin: 0;
		clear: both;
		overflow: hidden;
	}
	*[class^="chara-navi"] li {
		display: inline-block;
	}
	*[class^="chara-navi"] li img {
		width: 80px;
	}
	*[class^="chara-navi"] li.li_chara05 img {
		width: 88px;
	}

	/*	chara-main
	=================== */
	.chara-main {
		width: 100%;
		margin: 0 0 0;
		padding: 0;
	}
	.chara-main .chara-img {
		height: auto;
		position: relative;
		z-index: 1;
	}
	.chara-main .chara-detail {
		position: absolute;
		left: 410px;
		z-index: 100;
	}
	.chara-main .chara-detail img {
		width: 100%;
		height: auto;
		position: relative;
		z-index: 100;
	}
	.chara-main .chara-detail .chara-text {
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		line-height: 1.75;
	}
	.chara-main .chara-detail .chara-text-rep {
		background: url(../images/character/bg_chara_detail.png) repeat-y;
		color: #6a3619;
		width: 100%;
		background-size: 100% 50%;
		padding: 0 30px 10px;
	}
	.chara-main .chara-detail .etc_info {
		background-color: #ffaad6;
		border-radius: 20px;
		color: #fff;
		font-size: 14px;
		line-height: 1;
		text-align: center;
		width: 120px;
		padding: 4px 0 3px;
		margin: 10px auto;
	}
	.chara-main .chara-detail span {
		font-size: 14px;
		line-height: 1.4;
		display: inline-block;
	}

	/* ===================
			precure
	====================== */
	#chara01 .chara-main .chara-img {
		max-width: 376px;
		margin: 15px auto 0;
	}
	#chara02 .chara-main .chara-img {
		max-width: 416px;
		margin: 135px auto 0;
	}
	#chara03 .chara-main .chara-img {
		max-width: 404px;
		margin: 125px auto 0;
	}
	#chara04 .chara-main .chara-img {
		max-width: 448px;
		margin: 145px auto 0;
	}
	#chara05 .chara-main .chara-img {
		max-width: 426px;
		margin: 145px auto 0;
	}
	#chara06 .chara-main .chara-img {
		max-width: 426px;
		margin: 112px auto 0;
	}
	#chara07 .chara-main .chara-img {
		max-width: 420px;
		margin: 116px auto 0;
	}
	#chara08 .chara-main .chara-img {
		max-width: 420px;
		margin: 116px auto 0;
	}
	#chara09 .chara-main .chara-img {
		max-width: 420px;
		margin: 116px auto 0;
	}
	#chara10 .chara-etcContainer {
		max-width: 420px;
		margin: 150px auto 0;
	}	
	#chara11 .chara-main .chara-img {
		max-width: 420px;
		margin: 60px auto 0;
	}
	#chara12 .chara-main .chara-img {
		max-width: 420px;
		margin: 140px auto 0;
	}
	#chara13 .chara-main .chara-img {
		max-width: 420px;
		margin: 120px auto 0;
	}
	#chara14 .chara-main .chara-img {
		max-width: 420px;
		margin: 120px auto 0;
	}	

	/*	detail
	=================== */
	#chara01 .chara-detail {
		position: relative;
		top: -37px;
		left: 0;
		margin: 0 0 -20px;
	}
	#chara02 .chara-detail,
	#chara03 .chara-detail,
	#chara04 .chara-detail,
	#chara05 .chara-detail{
		position: relative;
		top: 20px;
		left: 0;
		margin: 0 0 40px;
	}
	#chara06 .chara-detail{
		position: relative;
		top: 0;
		left: 0;
		margin: 0 0 40px;
	}
	#chara07 .chara-detail{
		position: relative;
		top: 0;
		left: 0;
		margin: 0 0 40px;
	}
	#chara08 .chara-detail{
		position: relative;
		top: 0;
		left: 0;
		margin: 0 0 40px;
	}
	#chara09 .chara-detail{
		position: relative;
		top: 0;
		left: 0;
		margin: 0 0 40px;
	}	
	#chara11 .chara-detail{
		position: relative;
		top: 0;
		left: 0;
		margin: 0 0 40px;
	}
	#chara12 .chara-detail{
		position: relative;
		top: 0;
		left: 0;
		margin: 0 0 40px;
	}	
	#chara13 .chara-detail{
		position: relative;
		top: 0;
		left: 0;
		margin: 0 0 40px;
	}	
	#chara14 .chara-detail{
		position: relative;
		top: 0;
		left: 0;
		margin: 0 0 40px;
	}		
	/*	slide
	=================== */
	.slide-formChange {
		width: 100%;
		margin: 0 auto 0;
		padding: 0 0 30px;
	}

	/*	etc
	=================== */
  .chara-etcContainer {
	  width: 100%;
	  margin: 0 auto;
    float: none;
    width: auto;
  }
	.etc-block {
		background: url(../images/character/bg_chara_etc.jpg) no-repeat center top #fff6fa;
		border: 1px solid #ffcae7;
	  -webkit-box-shadow: 0px 0px 5px #ffcae7;
	  -moz-box-shadow: 0px 0px 5px #ffcae7;
	  box-shadow: 0px 0px 5px #ffcae7;
	  border-radius: 5px 5px;
	  width: 100%;
	  height: auto;
	  margin: 0 0 20px;
	}
	.etc-block .img img {
    width: 100%;
    height: auto;
	}
	.etc-block .name {
		background: url(../images/character/bg_name.png) no-repeat center top;
		background-size: 100% auto;
		text-align: center;
		padding: 3.5% 10% 3%;
		margin: 5px 0;
	}
	.etc-block .name span{
		font-size: 20px;
		color: #ff3f6b;
		font-weight: bold;
	}
	.etc-block .cv{
		font-size: 15px;
		color: #ff3f6b;
		text-align: right;
		padding: 0 4% 0 0;
	}
	.etc-block .inline {
		font-size: 16px;
		color: #6a3619;
		padding: 2% 4% 4%;
    width: 100%;
    margin: 0 auto;
  }
  
	ul.charaSns{display:block;padding:15px 0 ;overflow:hidden;}
	.charaSns li{display:block;margin-right:20px;float:left;}
	.charaSns li:nth-child(1){margin-top:-3px;}
  
  
}