@charset "UTF-8";
/*
*	character.css
*/
.global-header, .chara-navi ul, .genei-navi ul, .localnavi, body.etc .container .inner ul, .slide {
  *zoom: 1;
}
.global-header:after, .chara-navi ul:after, .genei-navi ul:after, .localnavi:after, body.etc .container .inner ul:after, .slide:after {
  content: "";
  display: block;
  clear: both;
}

/* ==========================================================
	大枠
========================================================== */
body {
  background: url(../images/top/bg_repeat.jpg) repeat-y center top;
}

#global-footer {
  margin-top: 0;
}

.container .inner {
  background: url(../images/character/bg.png) no-repeat center top;
  padding-bottom: 0;
}
body.etc .container .inner {
  height: 1800px;
  background: url(../images/character/bg_ribbon.png) no-repeat center top;
}
body.chara05 .container .inner, body.chara06 .container .inner, body.category-genei .container .inner {
  min-height: 600px;
  background: url(../images/character/bg_ribbon.png) no-repeat center top;
}

.inner {
  margin: 0 auto;
}

.character .page-title {
  top: -11px;
  left: 60px;
}

/* ==========================================================
	global-header
========================================================== */
.global-header {
  padding: 0 14px 0 16px;
}
.global-header h1 {
  float: left;
}
.global-header div {
  float: right;
}

/* ==========================================================
	ナビ-プリキュア
========================================================== */
.chara-navi {
  position: absolute;
  top: 275px;
  left: 0;
  background: url(../images/character/bg_navi.png) no-repeat 20px 100px;
  width: 877px;
  padding: 0 0 50px 123px;
  z-index: 10;
}
.chara-navi ul {
  width: 756px;
}
.chara-navi li {
  float: left;
}
.chara-navi li a {
  height: 121px;
  display: block;
  text-indent: -9999px;
  background: url(../images/character/navi.png) no-repeat;
}
.chara-navi .chara01 {
  width: 126px;
  background-position: 0 0;
}
.chara-navi .chara01:hover, body.chara01 .chara-navi .chara01 {
  background-position: 0 -121px;
}
.chara-navi .chara02 {
  width: 126px;
  background-position: -126px 0;
}
.chara-navi .chara02:hover, body.chara02 .chara-navi .chara02 {
  background-position: -126px -121px;
}
.chara-navi .chara03 {
  width: 126px;
  background-position: -252px 0;
}
.chara-navi .chara03:hover, body.chara03 .chara-navi .chara03 {
  background-position: -252px -121px;
}
.chara-navi .chara04 {
  width: 126px;
  background-position: -378px 0;
}
.chara-navi .chara04:hover, body.chara04 .chara-navi .chara04 {
  background-position: -378px -121px;
}
.chara-navi .chara05 {
  width: 126px;
  background-position: -504px 0;
}
.chara-navi .chara05:hover, body.chara05 .chara-navi .chara05 {
  background-position: -504px -121px;
}
.chara-navi .chara06 {
  width: 126px;
  background-position: -630px 0;
}
.chara-navi .chara06:hover, body.chara06 .chara-navi .chara06 {
  background-position: -630px -121px;
}

/* ==========================================================
	ナビ-幻影帝国
========================================================== */
.genei-navi {
  position: absolute;
  top: 275px;
  left: 0;
  background: url(../images/character/bg_navi.png) no-repeat 20px 100px;
  width: 912px;
  padding: 0 0 50px 33px;
  z-index: 10;
}
.genei-navi ul {
  width: 944px;
}
.genei-navi li {
  float: left;
}
.genei-navi li a {
  height: 128px;
  display: block;
  text-indent: -9999px;
  background: url(../images/character/genei_navi.png) no-repeat;
}
.genei-navi .genei01 {
  width: 122px;
  background-position: 0 0;
}
.genei-navi .genei01:hover, body.genei01 .genei-navi .genei01 {
  background-position: 0 -128px;
}

.genei-navi .genei02 {
  width: 115px;
  background-position: -122px 0;
}
.genei-navi .genei02:hover, body.genei02 .genei-navi .genei02 {
  background-position: -122px -128px;
}

.genei-navi .genei03 {
  width: 115px;
  background-position: -237px 0;
}
.genei-navi .genei03:hover, body.genei03 .genei-navi .genei03 {
  background-position: -237px -128px;
}
.genei-navi .genei04 {
  width: 115px;
  background-position: -352px 0;
}
.genei-navi .genei04:hover, body.genei04 .genei-navi .genei04 {
  background-position: -352px -128px;
}

.genei-navi .genei05 {
  width: 115px;
  background-position: -467px 0;
}
.genei-navi .genei05:hover, body.genei05 .genei-navi .genei05 {
  background-position: -467px -128px;
}
.genei-navi .genei08 {
  width: 115px;
  background-position: -582px 0;
}
.genei-navi .genei08:hover, body.genei08 .genei-navi .genei08 {
  background-position: -582px -128px;
}
.genei-navi .genei06 {
  width: 123px;
  background-position: -697px 0;
}
.genei-navi .genei06:hover, body.genei06 .genei-navi .genei06 {
  background-position: -697px -128px;
}
.genei-navi .genei07 {
  width: 123px;
  background-position: -820px 0;
}
.genei-navi .genei07:hover, body.genei07 .genei-navi .genei07 {
  background-position: -820px -128px;
}



/* ==========================================================
  loalnavi
========================================================== */
.localnavi {
  position: absolute;
  top: 140px;
  right: 42px;
  width: 477px;
  height: 56px;
}
.localnavi li {
  float: left;
}
.localnavi a {
  float: left;
  height: 56px;
  background: url(../images/character/localnav.png) no-repeat;
  text-indent: -9999px;
}
.localnavi .category-precure {
  width: 160px;
  background-position: 0 0;
}
body.category-precure .localnavi .category-precure, .localnavi .category-precure:hover {
  background-position: 0 -56px;
}
.localnavi .category-etc {
  width: 160px;
  background-position: -160px 0;
}
body.category-etc .localnavi .category-etc, .localnavi .category-etc:hover {
  background-position: -160px -56px;
}
.localnavi .category-genei {
  width: 156px;
  background-position: -320px 0;
}
body.category-genei .localnavi .category-genei, .localnavi .category-genei:hover {
  background-position: -320px -56px;
}

/* ==========================================================
  ETC
========================================================== */
body.etc .container .inner ul {
  padding: 0 30px;
  position: absolute;
  top: -70px;
}
body.etc .container .inner ul li {
  float: left;
  font-size: 117%;
}
body.etc .container .inner ul p {
  line-height: 1.8;
  margin-top: 10px;
}

/* ==========================================================
  SLIDE
========================================================== */
.slide {
  background: url(../images/character/bg_stage.png) no-repeat 245px 190px;
  position: relative;
  height: 550px;
}
.slide .slide-navi {
  width: 103px;
  float: left;
  padding: 38px 0 0 94px;
}
.slide .slide-navi ul {
  padding-left: 39px;
}
.slide .stage {
  position: absolute;
  left: 326px;
  top: -10px;
}

/* ==========================================================
  costume-Navi
========================================================== */
.costume-navi li {
  margin-bottom: 5px;
}
.costume-navi a {
  display: block;
  width: 175px;
  height: 48px;
  text-indent: -9999px;
  background-repeat: no-repeat;
}
body.chara01 .costume-navi a {
  background-image: url(../images/character/precure_curelovely/costumeNavi.png);
}
body.chara02 .costume-navi a {
  background-image: url(../images/character/precure_cureprincess/costumeNavi.png);
}
body.chara03 .costume-navi a {
  background-image: url(../images/character/precure_curefortune/costumeNavi.png);
}
body.chara04 .costume-navi a {
  background-image: url(../images/character/precure_curehoney/costumeNavi.png);
}
.costume-navi #costume01 {
  background-position: 0 0;
}
.costume-navi #costume01:hover, .costume-navi #costume01.current {
  background-position: -175px 0;
}
.costume-navi #costume02 {
  background-position: 0 -48px;
}
.costume-navi #costume02:hover, .costume-navi #costume02.current {
  background-position: -175px -48px;
}
.costume-navi #costume03 {
  background-position: 0 -96px;
}
.costume-navi #costume03:hover, .costume-navi #costume03.current {
  background-position: -175px -96px;
}

/* ==========================================================
  form-navi
========================================================== */
.form-navi {
  position: absolute;
  top: 278px;
}
body.chara04 .form-navi {
  top: 214px;
}
.form-navi a {
  display: block;
  width: 175px;
  height: 50px;
  text-indent: -9999px;
  background-repeat: no-repeat;
}
body.chara01 .form-navi a {
  background-image: url(../images/character/precure_curelovely/formNavi.png);
}
body.chara02 .form-navi a {
  background-image: url(../images/character/precure_cureprincess/formNavi.png);
}
body.chara03 .form-navi a {
  background-image: url(../images/character/precure_curefortune/formNavi.png);
}
body.chara04 .form-navi a {
  background-image: url(../images/character/precure_curehoney/formNavi.png);
  /*height: 55px;*/
}
.form-navi #form01 {
  background-position: 0 0;
}
.form-navi #form01:hover, .form-navi #form01.current {
  background-position: -175px 0;
}
.form-navi #form02 {
  background-position: 0 -50px;
}
.form-navi #form02:hover, .form-navi #form02.current {
  background-position: -175px -50px;
}

/* ==========================================================
  innocent-Navi
========================================================== */

.innocent-navi {
  position: absolute;
  top: 388px;
}
body.chara04 .innocent-navi {
  top: 325px;
}
.innocent-navi li {
  margin-bottom: 5px;
}
.innocent-navi a {
  display: block;
  width: 175px;
  height: 48px;
  text-indent: -9999px;
  background-repeat: no-repeat;
}
body.chara01 .innocent-navi a {
  background-image: url(../images/character/precure_curelovely/innocentNavi.png);
}
body.chara02 .innocent-navi a {
  background-image: url(../images/character/precure_cureprincess/innocentNavi.png);
}
body.chara03 .innocent-navi a {
  background-image: url(../images/character/precure_curefortune/innocentNavi.png);
}
body.chara04 .innocent-navi a {
  background-image: url(../images/character/precure_curehoney/innocentNavi.png);
}
.innocent-navi #innocent01 {
  background-position: 0 0;
}
.innocent-navi #innocent01:hover, .innocent-navi #innocent01.current {
  background-position: -175px 0;
}
.innocent-navi #innocent02 {
  background-position: 0 -48px;
}
.innocent-navi #innocent02:hover, .innocent-navi #innocent02.current {
  background-position: -175px -48px;
}
.innocent-navi #innocent03 {
  background-position: 0 -96px;
}
.innocent-navi #innocent03:hover, .innocent-navi #innocent03.current {
  background-position: -175px -96px;
}