@charset "utf-8";

/* -----------------------------------------------------------
CSS Information

 File name:      base.css
 Update:         2009.12.24
 Style Info:     お役立ち情報CSSファイル
----------------------------------------------------------- */
/* -----------------------------------------------------------
　　レイアウト設定
----------------------------------------------------------- */
#med-useful-wrap {
 /*background: url(../../img/bg_useful_wrap.gif) repeat-x left 30px;*/
}
#med-useful-container {
 width: 900px;
 margin: 0 auto;
 text-align: left;
 background: url(../../../img/bg_med_cont900.gif) no-repeat scroll left top;
}
#med-useful-cont {
 width: 870px;
 margin: 20px 0 0 20px;
}

/* -----------------------------------------------------------
　　新着設定
----------------------------------------------------------- */
#useful-new-wrap {
 overflow: hidden;
 width: 876px;
 padding-left: 12px;
 padding-right: 12px;
 border-bottom: 1px solid #D1D1D1;
 background: url(../../img/bg_new.gif) no-repeat left top;
}
.title-useful-new {
 padding: 6px 0 0 60px;
 z-index: 10;
}
.useful-arrow {
 float: left;
 width: 8px;
 padding-top: 70px;
}
.useful-arrow img {
 vertical-align: middle;
}
.jCarouselLite {
 float: left;
 width: 860px;
 padding-top: 10px;
 padding-bottom: 10px;
}
ul#useful-new {
 width: 860px;
}
ul#useful-new li {
 float: left;
 width: 172px;
 text-align: center;
 height: 160px;
 font-size: 80%;
}
ul#useful-new li a:hover, ul#useful-new li a:active {
 text-decoration: none;
}
ul#useful-new li img {
 padding-top: 2px;
 /*vertical-align: bottom;*/
}

/* -----------------------------------------------------------
　　説明書きエリア設定
----------------------------------------------------------- */
.useful-liner-wrap-cont {
 width: 860px;
}
.useful-liner-wrap-cont-l {
 float: left;
 width: 355px;
}
.useful-liner-wrap-cont-l h4 {
 font-size: 115%;
 margin-bottom: 5px;
}
.useful-liner-wrap-cont-l h4 span {
 border-left: 5px solid #013B8F;
 padding: 2px 0 2px 5px;
}
.useful-liner-wrap {
 float: right;
 width: 490px;
 background: url(../../img/bg_liner_bottom.gif) no-repeat left bottom;
 font-size: 90%;
}
.useful-liner-wrap-inner {
 width: 466px;
 padding: 12px;
 background: url(../../img/bg_liner_top.gif) no-repeat left top;
}
.useful-liner-wrap h5 {
 padding: 5px 0 2px;
}

/*.useful-liner {
 width: 830px;
 padding: 15px 15px 20px;
}*/
.useful-liner-left {
 float: left;
 width: 224px;
}
.useful-liner-right {
 float: right;
 width: 224px;
}
.useful-liner-l {
 float: left;
 width: 85px;
}
.useful-liner-r {
 float: right;
 width: 132px;
 font-size: 90%;
}

/* -----------------------------------------------------------
　　見出しタブ設定
----------------------------------------------------------- */
.useful-title-wrap {
 width: 860px;
 height: 34px;
 margin-top: 20px;
 background: url(../../img/bg_list_title.gif) no-repeat left top;
}
.useful-title {
 float: left;
 width: 145px;
 padding-right: 20px;
}
ul.useful-title-list {
 float: left;
 width: 695px;
 padding-top: 5px;
}
ul.useful-title-list li {
 float: left;
 width: 166px;
 margin-right: 5px;
}
ul.useful-title-list li a,
ul.useful-title-list li a:link, ul.useful-title-list li a:visited {
 display: block;
 overflow: hidden;
 width: 166px;
 height: 17px;
 padding-top: 5px;
 font-size: 80%;
 line-height: 1.0;
 text-align: center;
 color: #FFF;
}
ul.useful-title-list li a.current,
ul.useful-title-list li a.current:link,
ul.useful-title-list li a.current:visited,
ul.useful-title-list li a:hover,
ul.useful-title-list li a:active {
 background: url(../../img/title_useful_list_a.gif) no-repeat left top;
 color: #333;
}
ul.useful-title-list li a:hover, ul.useful-title-list li a:active {
 text-decoration: none;
}
/* -----------------------------------------------------------
　　イラスト一覧設定
----------------------------------------------------------- */
.useful-img-list-wrap {
 width: 860px;
 padding-top: 5px;
 /*background: url(../../img/bg_usefulimg_wrap_middle.gif) repeat-y left bottom;*/
}
ul.useful-img-list {
 width: 870px;
 padding: 0 0 15px 0;
 /*background: url(../../img/bg_usefulimg_wrap_bottom.gif) no-repeat left bottom;*/
}
ul.useful-img-list li {
 float: left;
 width: 156px;
 height: 170px;
 margin: 10px 16px 0 0;
 text-align: center;
 font-size: 80%;
 border: 1px solid #DDD;
 position: relative;
 overflow: hidden;
}
.useful-img-exp {
 padding-top: 5px;
}
ul.useful-img-list li p img {
 padding-top: 2px;
}
.useful-bt-down {
 position: absolute;
 bottom: 10px;
 right: 10px;
 z-index: 10;
}
.useful-icon-new {
 position: absolute;
 top: 21px;
 left: 10px;
 z-index: 11;
}
.useful-img-exp {
}
ul.useful-img-more {
 width: 870px;
}
ul.useful-img-more li {
 display: inline;
 margin-left: 10px;
}
ul.useful-img-more li a {
 padding-left: 18px;
 background: url(../../../img/arrow_blue_circle.gif) no-repeat left center;
}