@charset "UTF-8";


/*----------------------------------------------*/
/*----------------------------------------------*/
/*DOCOMO OSAKAN HOT 100 [INDEX & CHART PAGE]*/
/*----------------------------------------------*/
/*Created: 2015.04.01*/
/*Last Update:	2015.04.10*/
/*----------------------------------------------*/




/*INDEX*/

/*[INDEX & CHART PAGE]*/

/*[CHART DETAIL (for INDEX & CHART PAGE)]*/
/*.LIST*/

/*[Each Page Width Setting]*/










/*----------------------------------------------*/
/*[INDEX & CHART PAGE]*/
/*----------------------------------------------*/

/*----------------------------------------------*/
/*[CHART DETAIL (for INDEX & CHART PAGE)]*/
/*----------------------------------------------*/

/*
[LIST]
*/

/*(list)*/
#chartList {
height:auto;
margin:0;
padding:0;
border-left:1px solid #E6E6E6;
border-right:1px solid #E6E6E6;
background-color:#F4F3F3;
}


/*(chart)*/
ul#chartFrame {
height:auto;
margin:0 auto;
padding:0;
list-style:none;
}

ul#chartFrame li {
list-style:none;
margin:0;
padding:0;
}


/*(chart set)*/
#chart-set {
clear:both;
height:auto;
margin:0;
border:1px solid #FFF;
position:relative;
background:#FFF url(/hot100/images/chart/chart_bg_list2.png) no-repeat 0 0;
}

/*[Big rank 1st]*/
#chart-set.cs-big {padding:12px 10px 12px 0; margin-bottom:5px; background-position:0 0;} 
/*[Middle rank 2nd-20th]*/
#chart-set.cs-middle {padding:9px 10px 9px 0; margin-bottom:5px; background-position:0 0;}
/*[Small rank 21th-100th]*/
#chart-set.cs-small {padding:7px 10px 7px 0; margin-bottom:5px; background-position:0 -10px;}
/*[All rank]*/
#chartFrame li:last-child #chart-set {margin-bottom:0;}


/*Coming Soon (2015.04.01)*/
/*(frame)*/
.coming-soon {
 width:auto;
 height:auto;
 margin:0 15px;
 padding:4em 0;
 text-align:center;
 background:#FFF;
 background:rgba(255,255,255,1.00);
 border-radius:5px;
}
/*[Text]*/
.coming-soon p {
 color:#444;
 font-size:1.6em;
}


/*Ranking Position (2015.04.01)*/
/*(rame)*/
.rn-position {
 position:absolute;
 top:0;
 right:0;
 margin:0;
 padding:0;
}
/*[icon image]*/
.rn-position img {
 max-width:90px;
}


/*Ranking Number*/
/*[All]*/
.rank-no {
width:45px;
height:auto;
margin:0 10px 0 0;
padding:0;
float:left;
}
/*[Text]*/
.rank-no .rn-txt {
 height:35px;
 overflow:hidden;
font-weight:bold;
margin:0;
text-align:center;
line-height:1.0em;
font-family:Arial, Helvetica, sans-serif;
}
/*[Big rank 1st]*/
.cs-big .rank-no .rn-txt {margin-top:-3px;}
/*[Small rank 21th-100th]*/
.cs-small .rank-no .rn-txt {margin-top:0;}
/*[Big rank 1st] & [Middle rank 2nd-20th]*/
.cs-big .rank-no .rn-txt,
.cs-middle .rank-no .rn-txt {font-size:1.9em; padding:7px 0 0 0; color:#FFF; background:url(/hot100/images/chart/chart_lankbg.png) no-repeat top center;}
/*[Small rank 21th-100th]*/
.cs-small .rank-no .rn-txt { font-size:1.5em; padding:7px 0 0 0; color:#111; background:url(/hot100/images/chart/chart_lankbg2.png) no-repeat top center;}



/*Ranking flow (2015.04.08)*/
/*[Arrow]*/
.rank-no .rn-arrow .fa {
 width:45px;
 text-align:center;
 font-size:2.2em;
 margin:.3em 0 0;
 display:block;
}
/*[Small rank 21th-100th]*/
.cs-small .rank-no .rn-arrow .fa {margin:0; font-size:1.6em;}

/*[Up]*/
.r-up { color:#ED1E79;}
/*[Stay]*/
.r-stay { color:#888888;}
/*[Down]*/
.r-down { color:#1B1464;}



/*CD photo*/
/*1-20(ALL)*/
.cd-image {
height:auto;
margin:0 10px 0 0;
padding:0;
text-align:center;
float:left;
}
/*[Big rank 1st]*/
.cs-big .cd-image,
.cs-big .cd-image img {width:110px;}
/*[Middle rank 2nd-20th]*/
.cs-middle .cd-image,
.cs-middle .cd-image img {width:70px;}


/*CD detail*/
.cd-detail {
height:auto;
margin:0;
padding:0;
float:left;
}


/*[All]*/
.cd-name {
width:auto;
height:auto;
margin:0;
padding:0;
}
.cd-name .inner-box {
 width:auto;
 height:auto;
 margin:0;
 padding:0;
 position:relative;
}
/*[Big rank 1st]*/
.cs-big .cd-name { font-size:1.75em; padding:2px 0 5px;}
/*[Middle rank 2nd-20th]*/
.cs-middle .cd-name { font-size:1.5em; padding:3px 0 6px;}
/*[Small rank 21th-100th]*/
.cs-small .cd-name { font-size:1.3em; padding:2px 0 5px;}

/*(song name)*/
.song-name {
 font-weight:bold;
}
/*(artist name)*/
.artist-name {
font-size:0.9em;
line-height:1.3em;
font-weight:normal;
color:#F30;
}

/*(d music button)*/
.btn-d-music {
 width:auto;
 height:auto;
 position:absolute;
 right:0;
 bottom:0;
}
.btn-d-music img {
 max-width:130px;
 margin:0;
 padding:0;
 vertical-align:bottom;
}
/*[Small rank 21th-100th]*/
.cs-small .btn-d-music img {max-width:110px;}


/*(other text)*/
.cd-others {
font-size:.95em;
line-height:1.2em;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:5px 0 0 0;
border-top:1px dotted #B3B3B3;
}










/*---------------------*/
/*[Each Page Width Setting]*/
/*---------------------*/

/*(for INDEX PAGE)*/
#homePage ul#chartFrame {width:540px;}
#homePage #chartList {width:568px;}
#homePage #chart-set {width:528px;}
#homePage .cs-big .cd-detail {width:350px;/*[Big rank 1st]*/}
#homePage .cs-middle .cd-detail {width:390px;/*[Middle rank 2nd-20th]*/}
#homePage .cs-small .cd-detail {width:470px;/*[Small rank 21th-100th]*/}
#homePage .cs-big .artist-name {width:200px;/*[Big rank 1st]*/}
#homePage .cs-middle .artist-name {width:242px;/*[Middle rank 2nd-20th]*/}
#homePage .cs-small .artist-name { font-size:1em; width:340px;/*[Small rank 21th-100th]*/}

/*(for CHART PAGE)*/
#chartPage ul#chartFrame {width:640px;}
#chartPage #chartList {width:668px;}
#chartPage #chart-set {width:628px;}
#chartPage .cs-big .cd-detail {width:450px;/*[Big rank 1st]*/}
#chartPage .cs-middle .cd-detail {width:490px;/*[Middle rank 2nd-20th]*/}
#chartPage .cs-small .cd-detail {width:570px;/*[Small rank 21th-100th]*/}
#chartPage .cs-big .artist-name {width:300px;/*[Big rank 1st]*/}
#chartPage .cs-middle .artist-name {width:342px;/*[Middle rank 2nd-20th]*/}
#chartPage .cs-small .artist-name { font-size:1em; width:440px;/*[Small rank 21th-100th]*/}

/*(for YEARLY CHART PAGE)*/
/*
#chartPage.p-yearly .cs-big .cd-detail {width:570px;}
*/
#chartPage.p-yearly .cs-big .cd-detail {width:450px;/*[Big rank 1st]*/}
#chartPage.p-yearly .cs-big .artist-name {width:420px;/*[Big rank 1st]*/}