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

/* ==========================================================
  chara-navi
========================================================== */
@media screen and (max-width: 670px){
.page {
    position: inherit;
    padding-top: 60px;
	}
}
.chara-navi {
	position: absolute;
	width: 914px;
	height: 194px;
	top: 20px;
	z-index: 2;
}
#character.category01 .chara-navi {
	background: url(../images/character/bg_charaNavi.png) no-repeat center top;	
	}

.main-bottom {
	bottom: 20px;
}
@media screen and (max-width: 670px) {
.main-bottom {
    bottom: -15px;
	}
}
.page {
	margin: -60px auto 0;
}
body#character .sNavi li {
	top: 15px;
}
body#character .sNavi a,
body#character .sNavi span {
	height: 36px;
}
body#character .sNavi a:hover {
	background-position: 0 -41px;
}
body#character.category01 .category01 .chara-precure a,
body#character.category02 .category02 .chara-mahokai a,
body#character.category03 .category03 .chara-nashimahokai a,
body#character.category05 .category05 .chara-deusu a,
body#character.category04 .category04 .chara-darkness a {
	background-position: 0 -41px;
}
.sNavi .chara-precure {
	left: 25px;
}
.sNavi .chara-mahokai {
	left: 122px;
}
.sNavi .chara-nashimahokai {
	left: 192px;
}
.sNavi .chara-deusu {
	left: 362px;
}
.sNavi .chara-darkness {
	left: 470px;
}
.sNavi .chara-precure a {
	width: 95px;
	background: url(../images/character/snavi01.png) no-repeat;
}
.sNavi .chara-mahokai a {
	width: 67px;
	background: url(../images/character/snavi02.png) no-repeat;
}
.sNavi .chara-nashimahokai a {
	width: 168px;
	background: url(../images/character/snavi03.png) no-repeat;
}
.sNavi .chara-nashimahokai span {
	background: url(../images/character/snavi03_soon.png) no-repeat;	
	display: block;
	text-indent: -9999px;
	width: 168px;
}
.sNavi .chara-darkness a {
	width: 124px;
	background: url(../images/character/snavi04.png) no-repeat;
}
.sNavi .chara-deusu a {
	width: 110px;
	background: url(../images/character/snavi05.png) no-repeat;
}

 @media screen and (max-width: 670px) {
.chara-navi {
	position: relative;
	background-size: contain;
	width: 100%;
	height: auto;
	top: 15px;
}
}
.chara-navi ul {
	text-align: center;
	margin: 25px 0 0;
 *zoom: 1;
}
.chara-navi ul:before, .chara-navi ul:after {
	content: "";
	display: table;
}
.chara-navi ul:after {
	clear: both;
}
@media screen and (max-width: 670px) {
.chara-navi ul {
	width: auto;
	margin: 0;
}
}
.chara-navi li {
	display: inline;
}
@media screen and (max-width: 670px) {
.chara-navi li img {
	width: 62px;
	height: 70px;
}
}
/* ==========================================================
  chara-main
========================================================== */
.chara-main {
	position: relative;
	margin: 60px 0 0;
}
@media screen and (max-width: 670px) {
.chara-main {
	margin: 20px 0 0;
}
.chara-main .chara-img img {
	width: 100%;
	height: auto;
}
}
.chara-main .chara-detail {
	position: absolute;
	left: 391px;
	z-index: 100;
}
.chara-main .chara-detail img {
	position: relative;
	z-index: 100;
}
@media screen and (max-width: 670px) {
.chara-main .chara-detail img {
	width: 100%;
	height: auto;
}
}
.chara-main .chara-detail .chara-text {
	line-height: 1.75;
}
@media screen and (min-width: 670px) {
.chara-main .chara-detail .chara-text {
	width: 440px;
	height: 44px;
	margin: -55px 0 0 15px;
	font-size: 16px;
}
.chara-main .chara-detail .chara-text-rep {
	background: url(../images/character/bg_charatext_rep.png) repeat-y;
	width: 440px;
	padding: 10px 30px;
}
.chara-main .chara-detail .chara-text-top {
	position: relative;
	z-index: 0;
}
}
@media screen and (max-width: 670px) {
.chara-main .chara-detail .chara-text {
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 5px 0;
}
.chara-text-top, .chara-text-bottom {
	display: none;
}
}
/* precure
========================================================== */
body.category01 #chara01 .chara-detail {
	top: 108px;
}
body.category01 #chara01 .chara-img {
	margin: 0px 0 0 -50px;
}
body.category01 #chara02 .chara-img {
	margin: -5px 0 0 -60px;
}
@media screen and (max-width: 670px) {
body.category01 #chara02 .chara-img {
	margin: 0;
}
}
body.category01 #chara02 .chara-detail {
	top: 103px;
}
body.category01 #chara03 .chara-img {
	padding: 82px 0 0 42px;
}
@media screen and (max-width: 670px) {
body.category01 #chara03 .chara-img {
	padding: 0;
}
}
body.category01 #chara03 .chara-detail {
	top: 86px;
}
body.category01 #chara04 .chara-img {
	margin: -20px 0 0 -40px;
}
@media screen and (max-width: 670px) {
body.category01 #chara04 .chara-img {
	margin: 0;
}
}
body.category01 #chara04 .chara-detail {
	top: 100px;
}
/* nashimahoukai
========================================================== */
body.sContetns .etc-block .contents p.txt {
    padding: 15px 20px 0;
    height:100px;
}
body.sContetns .etc-block .outer {
	background: url(../images/character/nashimahoukai/frame_top.jpg) no-repeat center top;
}
body.sContetns .etc-block .inner {
	background: url(../images/character/nashimahoukai/frame_bottom.jpg) no-repeat center bottom;
}
body.sContetns .contents .tit {
	background: url(../images/character/nashimahoukai/tit.png) no-repeat;
	height: 90px;
	max-width: 408px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}

body.sContetns .contents .tit .name {
	color: #ff55a5;
	font-size: 24px;
	position: absolute;
	top: 40%;
	max-width: 408px;
	width: 100%;
}
body.sContetns .contents .tit .name p {
	text-align: center;
}

body.sContetns .contents .tit .cv {
	color: #ff55a5;
	font-size: 12px;
	position: absolute;
	right: 0;
	bottom: -15px;
}

body.sContetns .contents .tit .cv2 {
	color: #ff55a5;
	font-size: 12px;
	position: absolute;
	right: 0;
	bottom: -15px;
}

body.sContetns .contents .tit .cv2 br{
display:none;}


@media screen and (max-width: 670px) {
body.sContetns .etc-block .outer,
body.sContetns .etc-block .inner{
	background-size: contain;
	}	
body.sContetns .etc-block .contents p.txt {
    padding: 0 12px 0;
    text-align: left;
}	
body.sContetns .contents .tit {
	background: url(../images/character/nashimahoukai/tit.png) no-repeat;
	background-size: contain;
	width: 300px;
	}
body.sContetns .contents .tit .name {
	top: 28%;
	}	
body.sContetns .contents .tit .cv {
	color: #ff55a5;
	font-size: 12px;
	position: absolute;
	right: 0;
	bottom: 5px;
	}

body.sContetns .contents .tit .cv2 {
	color: #ff55a5;
	font-size: 11px;
	position: absolute;
	right: 0;
	bottom:5px;

	}
	

body.sContetns .contents .tit .cv2 br{
display:block !important;}	

}

/* darkness
========================================================== */
body.category04 .chara-detail{
	top: 110px;
}

body.category04 #chara02 .chara-img {
	margin: 0;
}

body.category04 #chara03 .chara-img {
	padding: 30px 0 0 0;
}
@media screen and (max-width: 670px) {
body.category04 #chara03 .chara-img {
	padding: 0;
}

}

/* deusu
========================================================== */
body.category05 .chara-detail{
	top: 110px;
}

/* ‹¤’Ê
========================================================== */

@media screen and (max-width: 670px) {
body#character #chara01 .chara-detail, body#character #chara04 .chara-detail, body#character #chara05 .chara-detail, body#character #chara06 .chara-detail {
	position: relative;
	top: -47px;
	left: 0;
}
body#character #chara02 .chara-detail, body#character #chara03 .chara-detail {
	position: relative;
	top: 10px;
	left: 0;
}
body#character.category04 #chara03 .chara-detail {
	position: relative;
	top: -10px;
	left: 0;
}
}

/* ==========================================================
  slide
========================================================== */

@media screen and (min-width: 670px) {
.slide-formChange {
	width: 715px;
	margin: 0 auto;
	padding: 0 0 20px;
}
}
@media screen and (max-width: 670px) {
#chara01 .slide-formChange {
	margin: -40px auto 0;
	padding: 0 20px;
}
#chara02 .slide-formChange {
	margin: 20px auto 0;
	padding: 0 20px;
}
}

/* ==========================================================
  etc
========================================================== */

.chara-etcContainer {
  *zoom: 1;
  width: 870px;
  margin: 30px auto;
}
.chara-etcContainer:before, .chara-etcContainer:after {
  content: "";
  display: table;
}
.chara-etcContainer:after {
  clear: both;
}
@media screen and (max-width: 670px) {
  .chara-etcContainer {
    float: none;
    width: auto;
  }
}

.etc-block {
  float: left;
  width: 420px;
  margin: 0px 5px 20px;
  -webkit-box-shadow: 0px 0px 5px #ffcae7;
  -moz-box-shadow: 0px 0px 5px #ffcae7;
  box-shadow: 0px 0px 5px #ffcae7;
  -webkit-border-radius: 5px 5px;
  -moz-border-radius: 5px 5px;
  -ms-border-radius: 5px 5px;
  -o-border-radius: 5px 5px;
  border-radius: 5px 5px;
  border: #fffff4;
  background-color: #fffff4;
  border: 1px solid #ffcae7 \9;
  /* IE8 */
  background: url(../images/top/news_bgRepeat.jpg) repeat-y left top #fffff4;
}
@media screen and (max-width: 670px) {
  .etc-block {
    float: none;
    width: 100%;
    height: auto;
    margin: 0px 0px 20px;
  }
}

@media screen and (max-width: 670px){
.etc-block .img img {
    width: 100%;
    height: auto;
	}
}

.etc-block .contents {
	font-size: 16px;
	color: #6a3619;
	padding: 20px 0;
}
@media screen and (max-width: 670px) {
  .etc-block .contents {
    width: 100%;
    margin: 0 auto;
    padding: 10px 0;
    float: none;
    text-align: center;
  }
}
.etc-block .contents p {
  padding: 0 12px;
}

@media screen and (max-width: 670px) {
  .mL24 {
    margin-left: 0;
  }
}