@charset "utf-8";
/* ===================================================================
CHARACTER
=================================================================== */
body {
background:#e82f61 url(../img/character/bg.jpg) repeat-x center 76px;
background:#e82f61 url(../img/character/bg.jpg) repeat-x center 41px;
/* background:#e82f61 url(../img/character/bg.jpg) repeat-x center 177px;*/
}
#header {
width:1000px;
height:290px;
margin:0px;
padding:0px;
background:url(../img/character/topBg.jpg) no-repeat 0px 0px;
}
.top .subMenu {
float:left;
width:780px;
height:150px;
margin:0px;
padding:0px 25px;
}
.top .subMenu ul.navList {
float:left;
width:740px;
height:150px;
margin:0px;
padding:10px 20px 0px 20px;
background:url(../img/character/menuBg.jpg) no-repeat top center;
}
.top .subMenu .navList li {
float:left;
width:185px;
height:120px;
margin:0px;
padding:0px;
}
.top .subMenu .navList li img {
display:block;
width:185px;
height:120px;
}
.top .catch {
float:left;
width:780px;
margin:0px;
padding:0px 25px;
}
.top .character {
width:804px;
margin:0px;
padding:0px 13px;
}
.top .precure,
.top .marine {
float:left;
margin:0px;
padding:0px;
}
/* blossom */
.top .blossom {
background:url(../img/character/bg/blossom.jpg) no-repeat 0px 0px!important;
}
.top .precure {
width:804px;
height:550px;
}
.top .precure p {
line-height:160%;
}
.top .precure .human {
float:left;
width:402px;
margin:0px;
padding:0px;
}
.top .precure .human .photo {
float:left;
padding:20px 0px 0px 32px;
}
.top .precure .human .btn {
float:left;
padding:10px 0px 0px 32px;
}
.top .precure .human .btn .after {
float:left;
padding:0px 0px 0px 30px;
}
.top .precure .human .btn .before {
float:left;
padding:0px 0px 0px 10px;
}
.top .precure .text {
float:left;
width:402px;
margin:0px;
padding:60px 0px 0px 0px;
}
.top .precure .text .title {
padding:0px 0px 0px 20px;
}
.top .precure .text .title .nameBlossom {
float:left;
margin:0px;
padding:0px;
width:340px;
height:40px;
background:url(../img/character/name/blossom.png) no-repeat 0px 0px;
behavior:expression(IEPNGFIX.fix(this));
}
.top .precure .text .title .nameBlossom .voice,
.top .precure .text .title .nameMarine .voice,
.top .precure .text .title .nameSunshine .voice,
.top .precure .text .title .nameMoonlight .voice{
float:right;
font-weight:bold;
margin:0px 10px 0px 0px;
padding:0px;
}
* html .top .precure .text .title .nameBlossom .voice,
* html .top .precure .text .title .nameMarine .voice,
* html .top .precure .text .title .nameSunshine .voice,
* html .top .precure .text .title .nameMoonlight .voice{
margin:0px 5px 0px 0px;
}
.top .precure .text .title .nameBlossom .voice p,
.top .precure .text .title .nameMarine .voice p,
.top .precure .text .title .nameSunshine .voice p,
.top .precure .text .title .nameMoonlight .voice{
margin:0px;
padding:15px 0px 0px 0px;
}
.top .precure .text .line {
float:left;
margin:0px;
padding:15px 0px 0px 0px;
}
.top .precure .text .line img {
display:block;
width:380px;
height:5px;
}
.top .precure .text .profile {
float:left;
width:350px;
margin:0px;
padding:10px 15px 0px 15px;
}
.top .precure .text .profile span.bold {
font-weight:bold;
}
.top .precure .text .transformation {
float:left;
width:350px;
margin:0px;
padding:10px 15px 0px 15px;
}
.top .precure .text .transformation .name {
float:left;
width:40px;
}
.top .precure .text .transformation .name p {
text-align:center;
}
.top .precure .text .transformation .explanation,
.top .precure .text .skill .explanation {
float:left;
width:300px;
margin:0px;
padding:0px;
}
.top .precure .text .transformation .blossom,
.top .precure .text .skill .blossom {
background:url(../img/character/tlineBlossom.jpg) repeat-y left top!important;
}
.top .precure .text .transformation .explanation p,
.top .precure .text .skill .explanation p {
padding:0px 0px 0px 10px;
}
.top .precure .text .skill {
clear:left;
float:left;
width:350px;
margin:0px;
padding:10px 15px 0px 15px;
}
.top .precure .text .skill .name {
float:left;
width:40px;
}
.top .precure .text .skill .name p {
text-align:center;
}
/* marine */
.top .marine {
background:url(../img/character/bg/marine.jpg) no-repeat 0px 0px!important;
}
.top .precure .marine {
width:380px!important;
padding:40px 0px 0px 22px!important;
}
.top .precure .human .next {
float:left;
padding:0px 0px 0px 10px!important;
}
.top .precure .text .title .nameMarine {
float:left;
margin:0px;
padding:0px;
width:340px;
height:40px;
background:url(../img/character/name/marine.png) no-repeat 0px 0px;
behavior:expression(IEPNGFIX.fix(this));
}
.top .precure .text .transformation .marine,
.top .precure .text .skill .marine {
width:300px!important;
margin:0px!important;
padding:0px!important;
background:url(../img/character/tlineMarine.jpg) repeat-y left top!important;
}
/* sunshime */
.top .sunshine {
background:url(../img/character/bg/sunshine.jpg) no-repeat 0px 0px!important;
}
.top .precure .text .title .nameSunshine {
float:left;
margin:0px;
padding:0px;
width:340px;
height:40px;
background:url(../img/character/name/sunshine.png) no-repeat 0px 0px;
behavior:expression(IEPNGFIX.fix(this));
}
.top .precure .text .transformation .sunshine,
.top .precure .text .skill .sunshine {
background:url(../img/character/tlineSunshine.jpg) repeat-y left top!important;
}
/* moonlight */
.nameMoonlight {
float:left;
margin:0px;
padding:0px;
width:340px;
height:40px;
background:url(../img/character/name/moonlight.gif) no-repeat 0px 0px;
}
.Moonlight {background:url(../img/character/bg/moon.jpg) no-repeat 0px 25px!important;}
.top .precure .Moonlight{
width:380px!important;
padding:40px 0px 0px 22px!important;
}
.top .precure .text .transformation .Moonlight,
.top .precure .text .skill .Moonlight{
width:300px!important;
margin:0px!important;
padding:0px!important;
background:url(../img/character/tlinemoon.gif) repeat-y left top!important;
}
/* frame ini
------------------------------------------------------------------- */
.top .frame {
float:left;
width:792px;
height:385px;
margin:0px;
padding:20px 0px 0px 12px;
}
/* bgConf
------------------------------------------------------------------- */
.top .shipure {
background:url(../img/character/bg/fairyShipure.jpg) no-repeat 0px 0px!important;
}
.top .kofure {
background:url(../img/character/bg/fairyKofure.jpg) no-repeat 0px 0px!important;
}
.top .popuri {
background:url(../img/character/bg/fairypopuri.jpg) no-repeat 0px 0px!important;
}
.top .koppe {
background:url(../img/character/bg/fairyLeft.jpg) no-repeat 0px 0px!important;
}
.top .koron {
background:url(../img/character/bg/fairykoron.jpg) no-repeat 0px 20px!important;
}
.top .desertRight {
background:url(../img/character/bg/desertRight.jpg) no-repeat 0px 0px!important;
}
.top .desertLeft {
background:url(../img/character/bg/desertLeft.jpg) no-repeat 0px 0px!important;
}
.top .peopleRight {
background:url(../img/character/bg/peopleRight.jpg) no-repeat 0px 0px!important;
}
.top .peopleLeft {
background:url(../img/character/bg/peopleLeft.jpg) no-repeat 0px 0px!important;
}
.top .moonlightLeft {
background:url(../img/character/bg/moonlightLeft.jpg) no-repeat 0px 0px!important;
}
.top .moonlightRight {
background:url(../img/character/bg/moonlightRight.jpg) no-repeat 0px 0px!important;
}
/*
------------------------------------------------------------------- */
/* left */
.top .frame .type .photo {
float:left;
width:410px;
margin:0px;
padding:0px;
}
.top .frame .type .photo img {
display:block;
width:410px;
height:320px;
}
.top .frame .type .text {
float:left;
width:372px;
margin:0px;
padding:55px 0px 0px 0px;
}
.top .frame .type .textFairy {
padding:35px 0px 0px 0px!important;
}
/* nameBgConf */
.top .frame .type .text .name {
float:left;
width:340px;
height:40px;
margin:0px 0px 0px 10px;
padding:0px;
behavior:expression(IEPNGFIX.fix(this));
}
.top .frame .type .text .nameShipure {
background:url(../img/character/name/shipure.png) no-repeat 0px 0px;
}
.top .frame .type .text .nameKofure {
background:url(../img/character/name/kofure.png) no-repeat 0px 0px;
}
.top .frame .type .text .namePopuri {
background:url(../img/character/name/popuri.png) no-repeat 0 0px;
}
.top .frame .type .text .nameKoron {
background:url(../img/character/name/koron.gif) no-repeat 0px 0px;
}
.namePopuri .voice{
text-align:right;
color:#ec9000;
}
.nameKoron .voice{
text-align:right;
color:#8642d3;
}
.top .frame .type .text .nameKoppe {
background:url(../img/character/name/koppe.png) no-repeat 0px 0px;
}
.top .frame .type .text .nameSabaku {
background:url(../img/character/name/sabaku.png) no-repeat 0px 0px;
}
.top .frame .type .text .nameDarkPrecure {
background:url(../img/character/name/darkPrecure.png) no-repeat 0px 0px;
}
.top .frame .type .text .nameSasori {
background:url(../img/character/name/sasori.png) no-repeat 0px 0px;
}
.top .frame .type .text .nameKumo {
background:url(../img/character/name/kumo.png) no-repeat 0px 0px;
}
.top .frame .type .text .nameKobura {
background:url(../img/character/name/kobura.png) no-repeat 0px 0px;
}
.top .frame .type .text .nameSunakki {
background:url(../img/character/name/sunakki.png) no-repeat 0px 0px;
}
.top .frame .type .text .nameKaoruko {
background:url(../img/character/name/hanasakiKaoruko.png) no-repeat 0px 0px;
}
.top .frame .type .text .nameMoolight {
background:url(../img/character/name/moonlight.png) no-repeat 0px 0px;
}
/*
------------------------------------------------------------------- */
/* variousVoice
------------------------------------------------------------------- */
.top .frame .type .text .nameShipure .voice,
.top .frame .type .text .nameKofure .voice,
.top .frame .type .text .namePopuri .voice,
.top .frame .type .text .nameKoppe .voice,
.top .frame .type .text .nameSabaku .voice,
.top .frame .type .text .nameDarkPrecure .voice,
.top .frame .type .text .nameSasori .voice,
.top .frame .type .text .nameKumo .voice,
.top .frame .type .text .nameKobura .voice,
.top .frame .type .text .nameSunakki .voice,
.top .frame .type .text .nameKaoruko .voice,
.top .frame .type .text .nameMoolight .voice,
.top .frame .type .text .nameKoron .voice{
float:right;
height:20px;
padding:20px 10px 0px 0px;
}
/*
------------------------------------------------------------------- */
.top .frame .type .text .line {
float:left;
width:370px;
height:5px;
margin:0px;
padding:10px 0px 0px 0px;
}
.top .frame .type .text .line img {
display:block;
width:370px;
height:5px;
}
.top .frame .type .text .explanation {
float:left;
width:330px;
height:200px;
margin:0px;
padding:10px 10px 0px 20px;
}
.top .frame .type .innerMenu {
height:30px;
margin:0px;
padding:25px 0px 0px 0px;
}
.top .frame .type .posLeft {
float:left!important;
padding:25px 0px 0px 78px!important;
}
.posRight {
float:right!important;
padding:25px 78px 0px 0px!important;
}
.top .frame .type .innerMenu span.tile {
float:left;
margin:0px;
padding:0px 5px 0px 0px;
}
.top .frame .type .innerMenu span.tile img {
display:block;
width:30px;
height:30px;
}
.top .frame .type .innerMenu span.move {
float:left;
margin:0px;
padding:0px 10px 0px 0px;
}
.top .frame .type .innerMenu span.move img {
display:block;
width:30px;
height:30px;
}
.top .frame .type .innerMenu span.rePos {
float:left;
margin:0px;
padding:0px 0px 0px 0px!important;
}
.top .frame .type .innerMenu span.return img {
display:block;
width:30px;
height:30px;
}
/* ===================================================================
201005add.
=================================================================== */
.center{
text-align:center;
}
#other-people{
width:778px;
margin:0 auto;
font-size:90%;
background:transparent url(../img/character/name/other_bg.gif) repeat-y;
}
#other-people .in-other-people{
padding:5px 0 20px 0;
background:transparent url(../img/character/name/other_line.gif) no-repeat bottom;
}
.no-bg{background:none !important;}
.in-other-people div{
width:380px;
text-align:left;
}
.in-other-people div.people-l{float:left;}
.in-other-people div.people-r{float:right;}
.in-other-people div p{
float:left;
width:145px;
text-align:center;
}
.in-other-people div dl{
width:233px;
float:right;
}
.in-other-people div dt{
padding:0 0 12px 8px;
margin-bottom:10px;
}
.men{background:transparent url(../img/character/name/line_mens.gif) no-repeat bottom;}
.women{background:transparent url(../img/character/name/line_ladyies.gif) no-repeat bottom;}
.in-other-people div dd{
padding:0 0 0 8px;
}
.ma10t{margin-top:10px;}
.ma15t{margin-top:15px;}
.ma20t{margin-top:20px;}
/**add**/
#flower{
margin:0 auto 30px auto;
background:transparent url(../img/character/bg/flower.jpg) no-repeat bottom;
}
#flower div{
width:780px;
margin:0 auto;
}
#flower div p{
float:left;
width:406px;
padding:30px 0;
}
#flower div dl{
width:365px;
float:right;
text-align:left;
}
#flower div dt{
padding-top:40px;
margin-bottom:10px;
}
#flower div dd{
padding-left:10px;
margin-right:20px;
font-size:95%;
color:#b0356b;
}
#dune{
width:804px;
background:transparent url(../img/character/bg/desertLeft.jpg) no-repeat left bottom;
margin:0 auto;
text-align:center;
}
#dune div.clearfix02{
width:750px;
margin:0 auto;
}
#dune div dl{
width:365px;
float:left;
text-align:left;
}
#dune div dd{
padding-left:10px;
margin-right:20px;
font-size:95%;
color:#6b614d;
}
#dune div dt{
padding-top:90px;
margin-bottom:10px;
}
#dune div p{
float:right;
width:330px;
padding:10px 0;
}
/**clear02**/
.clearfix02:after{
content: ".";
display:block;
visibility:hidden;
height:0.1px;
font-size:0.1em;
line-height:0;
clear:both;
}
.clearfix02{display:inline-block;}
#btn-dune{
padding:0 0 5px 440px;
_padding-left:535px;
}
#btn-dune li{
float:left;
padding-right:5px;
}
#btn-dune li img{
cursor:pointer;
}