@charset "UTF-8";
/* ============================================================

 * /west/hanryu/
 * layout.css
 *
 * copyright : Jupiter Telecommunications Co., Ltd. All Rights Reserved.
 * author    : 
 
============================================================ */

/* ============================================================
 layout
============================================================ */
body { background: url(../img/bg.jpg) no-repeat center top; }
#container { }
#container #header { }
#header #header-inner { width: 955px; margin: auto; }
/*#header #header-inner #logo { margin-right: 404px; }*/
/*#header #header-inner #header-navi { float: right; padding-top: 18px; }*/
#header #header-inner h2#jcom { float: left; margin-right: 45px; }
#header #header-inner h1 { float: left; }

#container ul#pankuzu { position: relative; clear: both; width: 955px; margin: 0 auto 8px auto; }
#container ul#pankuzu a { color: #363636; }
#container ul#pankuzu a:hover {  }
#container ul#pankuzu li { font-size: 85%; float: left; margin-top: -8px; margin-right: 8px; padding-right: 12px; background: url(../img/ico_arrow4.gif) no-repeat center right; }

#container #layout-basic { width: 955px; margin: 0 auto 25px auto; }
#container #layout-basic #content { float: left; width: 786px; min-height: 750px; margin-right: 11px; display: inline; background-color: #fff; }
#container #layout-basic #content #content-inner { width: 655px; padding: 30px 70px; }
#container #layout-basic #content #content-inner2 { width: 655px; padding: 30px 65px; }
#container #layout-basic #side { float: right; width: 158px; display: inline; }
#container #layout-basic #side ul li { margin-bottom: 4px; }

#container #layout-basic #side ul li { margin-bottom: 3px; }
#container #layout-basic #side #lnavi { margin-bottom: 10px; padding-bottom: 4px; background: url(../img/side_lnavi_back.gif) no-repeat bottom left; }
#container #layout-basic #side #lnavi-inner { width: 130px; margin: auto; padding: 10px 15px 10px 10px; }
#container #layout-basic #side #lnavi-inner ul li { font-size: 93%; line-height: 1.5; margin: 0 auto 6px auto; padding-bottom: 5px; border-bottom: solid 1px #d2cbbe; padding-left: 15px; background: url(../img/ico_arrow3.gif) no-repeat 0 2px; }

#footer { margin: 0 auto; background-color: #fff; border-top: solid 1px #cd778f; }
#footer #footer-inner { width: 955px; margin: 0 auto 35px auto; padding-top: 10px; background-color: #fff; }
#footer #footer-inner p { font-size: 85%; line-height: 1.4; text-align: right; color: #cd778f; }


/* ============================================================
 index
============================================================ */
#container #index #top { position: relative; width: 955px; height: 305px; margin-bottom: 10px; }
#container #index #top #flash-topics { float: left; width: 617px; height: 286px; padding: 7px 0 0 7px; background-color: #fff; }
#container #index #top #top-menu { float: right; width: 318px; }
#container #index { width: 955px; margin: 0 auto; }

#container #index #content { width: 955px; margin-bottom: 50px; background: #fff url(../img/index_content_bg.gif) no-repeat; }
#container #index #content #content-inner { padding: 15px; }

#content-side-l { float: left; width: 205px; margin-right: 10px; display: inline; }
#content-side-l #recommend { width: 182px; margin-bottom: 10px; padding: 9px; background-color: #badfc4; }
#content-side-l #recommend #recommend-inner { background-color: #fff; }
#content-side-l #recommend #recommend-inner .recommend-box { width: 165px; margin: 0 auto 0 9px; padding: 9px 0; background: url(../img/line_dotted.gif) repeat-x bottom left; }
#content-side-l #recommend #recommend-inner .recommend-box .thumb { float: left; width: 50px; margin-right: 5px; margin-bottom: 0; display: inline; }
#content-side-l #recommend #recommend-inner .recommend-box dl { float: right; width: 110px; display: inline; }
#content-side-l #recommend #recommend-inner .recommend-box dl dt { font-size: 93%; line-height: 1.5; margin-bottom: 5px; font-weight: bold; }
#content-side-l #recommend #recommend-inner .recommend-box dl dt a { color: #056422; }
#content-side-l #recommend #recommend-inner .recommend-box dl dd { font-size: 93%; line-height: 1.4; }

#content-side-l #kentei { padding-bottom: 15px; margin-bottom: 15px; background: url(../img/index_kentei_back.gif) no-repeat bottom left; }
#content-side-l #kentei p { margin: 0 0 0 5px; }

#content-side-l #banner { margin-bottom: 10px; padding-bottom: 5px; background-color: #f76f90; width: 200px; }
#content-side-l #banner-inner { width: 176px; margin: auto; padding-top: 1px; }
#content-side-l #banner-inner ul li { font-size: 93%; line-height: 1.5; margin: 0 auto 5px auto; padding-bottom: 5px; }
#content-side-l #banner-inner dl.banner { margin-bottom: 10px; }
#content-side-l #banner-inner dl.banner dt { float: left; width: 85px; margin-right: 5px; display: inline; }
#content-side-l #banner-inner dl.banner dd { float: right; width: 85px; display: inline;  }

#content-side-l #banner { background-color: #f76f90; padding-bottom: 15px; width: 200px;}
#content-side-l #banner p { margin: 0 12px 10px 12px; }
#content-side-l #banner dl.banner {margin: 0 12px 0 12px;}
#content-side-l #banner dl.banner dt { float: left; width: 85px; margin-right: 6px; display: inline; margin-bottom: 10px;}
#content-side-l #banner dl.banner dd { float: right; width: 85px; display: inline;  margin-bottom: 10px; }

#content-side-l #calendar { width: 210px; height: 175px; margin-bottom: 10px; padding-top: 30px; background: url(../img/index_calendar_l.gif) no-repeat bottom left; }
#content-side-l #calendar h2 { text-align: center; margin-bottom: 0; }
#content-side-l #calendar .month { text-align: center; margin-bottom: 0; }
#content-side-l #calendar a { text-indent: -9999px; width: 210px; height: 130px; display: block; }

#container #index #content #content-inner #content-main { float: left; width: 485px; margin-right: 15px; display: inline; }

#container #index #content #content-inner #content-main h2#topics-ttl { margin-bottom: 10px; }
#container #index #content #content-inner #content-main #topics { margin-bottom: 20px; padding-left: 107px; background: url(../img/index_topics_back.gif) no-repeat top left; }
#container #index #content #content-inner #content-main #topics #banner { margin-bottom: 9px; padding-bottom: 9px; border-bottom: solid 1px #ebd6e4; }
#container #index #content #content-inner #content-main #topics dl { font-size: 93%; line-height: 1.5; margin-bottom: 6px; }
#container #index #content #content-inner #content-main #topics dl dt { float: left; width: 70px; padding-left: 12px; background: url(../img/ico_arrow.gif) no-repeat 0 5px; }
#container #index #content #content-inner #content-main #topics dl dd { float: right; width: 295px; }
#container #index #content #content-inner #content-main #topics dl dd .icon { margin: 3px 0 0 6px; }

#container #index #content #content-inner #content-main #ep { width: 485px; margin-bottom: 10px; padding-bottom: 25px; background: url(../img/index_ep_back.gif) no-repeat bottom left; }
#container #index #content #content-inner #content-main #ep #ep-inner { width: 425px; margin: auto; padding-top: 10px; background-color: #fff; }
#container #index #content #content-inner #content-main #ep #ep-inner .ep-box { width: 425px; margin-bottom: 12px; padding-bottom: 9px; background: url(../img/line_dotted.gif) repeat-x bottom left; }
#container #index #content #content-inner #content-main #ep #ep-inner .ep-box .thumb { float: left; width: 95px; margin-right: 15px; margin-bottom: 0; display: inline; }
#container #index #content #content-inner #content-main #ep #ep-inner .ep-box dl { float: right; width: 310px; }
#container #index #content #content-inner #content-main #ep #ep-inner .ep-box dl dt { font-size: 93%; line-height: 1.5; font-weight: bold; margin-bottom: 7px; padding-left: 15px; background: url(../img/ico_arrow2.gif) no-repeat 0 2px; }
#container #index #content #content-inner #content-main #ep #ep-inner .ep-box dl dd { font-size: 93%; line-height: 1.5; }

#content-side-r { float: right; width: 210px; display: inline; }
#content-side-r #lnavi { margin-bottom: 10px; padding-bottom: 5px; background: url(../img/index_lnavi_back.gif) no-repeat bottom left; }
#content-side-r #lnavi-inner { width: 190px; margin: auto; padding-top: 10px; }
#content-side-r #lnavi-inner ul li { font-size: 93%; line-height: 1.5; margin: 0 auto 10px auto; padding-bottom: 10px; padding-left: 15px; background: url(../img/ico_arrow3.gif) no-repeat 0 2px; }

#content-side-r #banner { margin-bottom: 10px; padding-bottom: 5px; background: url(../img/index_banner_back.gif) no-repeat bottom left; }
#content-side-r #banner-inner { width: 145px; margin: auto; padding-top: 1px; }
#content-side-r #banner-inner ul li { font-size: 93%; line-height: 1.5; margin: 0 auto 5px auto; padding-bottom: 5px; }

#content-side-r #calendar { width: 210px; height: 200px; margin-bottom: 10px; padding-top: 30px; background: url(../img/index_calendar.gif) no-repeat bottom left; }
#content-side-r #calendar h2 { text-align: center; margin-bottom: 0; }
#content-side-r #calendar .month { text-align: center; margin-bottom: 0; }
#content-side-r #calendar a { text-indent: -9999px; width: 210px; height: 200px; display: block; }

#content-side-r #rank { width: 210px; padding-bottom: 5px; background: url(../img/index_rank_back.gif) no-repeat bottom left;margin-bottom: 15px; }
#content-side-r #rank #rank-inner { width: 190px; margin: auto; padding-top: 10px; }
#content-side-r #rank #rank-inner ul li { font-size: 93%; line-height: 1.5; width: 190px; margin-bottom: 6px; padding-bottom: 4px; border-bottom: solid 1px #fcdff2; }
#content-side-r #rank #rank-inner ul li .que { float: right; padding-top: 2px; width: 167px; display: inline-block; }
#content-side-r #rank #rank-inner ul li input { float: left; }


#content-side-r #rank { width: 210px; padding-bottom: 15px; background: url(../img/index_rank_back.gif) no-repeat bottom left; }
#content-side-r #rank #rank-inner { width: 190px; margin: auto; padding-top: 10px; }
#content-side-r #rank #rank-inner ul li { font-size: 93%; line-height: 1.5; width: 190px; margin-bottom: 6px; padding-bottom: 4px; border-bottom: solid 1px #fcdff2; }
#content-side-r #rank #rank-inner ul li .que { float: right; padding-top: 2px; width: 167px; display: inline-block; }
#content-side-r #rank #rank-inner ul li input { float: left; }
#content-side-r #rank #rank-inner #rank-graph { padding: 10px 0 5px 0; background-color: #f3f2f2; }
#content-side-r #rank #rank-inner #rank-graph table { width: 190px; margin: auto; }
#content-side-r #rank #rank-inner #rank-graph table td { text-align: center; width: 25%; padding-top: 3px; border-bottom: solid 1px #ccc; }
#content-side-r #rank #rank-inner #rank-graph table td .per { font-size: 85%; text-align: center; margin-bottom: 2px; }


/* ============================================================
 element
============================================================ */
.description { font-size: 93%; line-height: 1.6; margin-bottom: 35px; }
.ttl-1 { margin-bottom: 10px; text-align: center; }
.ttl-2 { margin-top: 12px; margin-bottom: 10px; text-align: center; }
.box-corner-1 { width: 360px; padding: 15px 10px; -webkit-border-radius: 10px; /* Safari、Google Chrome */ -moz-border-radius: 10px; /* Firefox */ background-color: #161616; }
.pagetop { text-align: right; margin: 10px 0; }
.pagetop a { font-size: 85%; line-height: 1.4; padding-left: 22px; display: inline-block; background: url(../img/ico_pagetop.gif) no-repeat center left; }
.pagetop2 { width:726px; text-align: right; margin: 5px 30px; }
.pagetop2 a { font-size: 85%; line-height: 1.4; padding-left: 22px; display: inline-block; background: url(../img/ico_pagetop.gif) no-repeat center left; }
.line-1 { width: 100%; height: 1px; padding-bottom: 13px; padding-top: 13px; background: url(../../kpop/img/pat_dotted1.gif) repeat-x center left; }
.icon-arr { padding-left: 18px; background: url(../../kpop/img/icon_arr_01.gif) no-repeat center left; }


/* ============================================================
 clear
============================================================ */
#container #layout-basic-inner,
#container #index #content,
#content-side-l #recommend #recommend-inner .recommend-box,
#container #index #content #content-inner #content-main #topics dl,
#container #index #content #content-inner #content-main #ep #ep-inner .ep-box,
#content-side-r #rank #rank-inner ul li { display: inline-block; }

#container #layout-basic-inner:after,
#container #index #content:after,
#content-side-l #recommend #recommend-inner .recommend-box:after,
#container #index #content #content-inner #content-main #topics dl:after,
#container #index #content #content-inner #content-main #ep #ep-inner .ep-box:after,
#content-side-r #rank #rank-inner ul li:after,
#container #header:after,
#container ul#pankuzu:after { clear: both; display: block; content: ""; }


/* ============================================================
 hack
============================================================ */

/*
 
 * html              : IE 6
 *:first-child+html  : IE 6
 html[xmlns]         : Firefox、Mozilla、Safari、Opera
 
 */

* html #content-side-r #calendar a { height: 131px; }
html[xmlns] #content-side-r #rank #rank-inner ul li .que { padding-top: 0; }

* html #container ul#pankuzu li { margin-top: 0; }
*:first-child+html body #container ul#pankuzu li { margin-top: 0; }