@charset "UTF-8";
/* CSS Document */

/*-----header request-----*/
header#header .header-request {
    width: 132px;
    float: left;
    margin: 22px 8px 0 30px;
    font-weight: bold;
}

header#header .header-request span {
    padding-left: 5px;
    font-size: 14px;
    line-height: 1.6;
}

/*-----header search-----*/
.header-search {
    margin-top: 24px;
    float: left;
    margin-right: 12px;
}

.header-search form {
    border-radius: 4px;
    background: #eaeaea;
    padding: 5px 5px 5px 6px;
    line-height: 1.5;
}

.header-search form input[type="text"] {
    border: none;
    font-size: 100%;
    width: 152px;
    background: #eaeaea;
    line-height: 1.5;
}

.header-search button {
    margin: 0 2px;
}

/*chrome*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    header#header .header-request span {
        line-height: 1.7;
    }
}

/*safari*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .header-search {
        margin-top: 22px;
    }

    .header-search button {
        padding-top: 2px;
    }
}

/*Firefox*/
@-moz-document url-prefix() {
    .header-search form input[type="text"] {
        height: 18px;
    }
    .header-search button {
        padding-top: 2px;
    }
    .header-search {
        margin-top: 22px;
    }
}

/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .header-search form {
        line-height: 1.2;
    }

    .header-search form input[type="text"] {
        line-height: 1;
    }

    .header-search button {
        padding-top: 0;
    }
}

:root .header-search form {
    line-height: 1.2 \9;
}

:root .header-search form input[type="text"] {
    line-height: 1 \9;
}

/*-----header nav-----*/
header#header div#hnav ul.settingNav {
    float: left;
    padding-top: 28px;
    color: #666666;
}

header#header div#hnav ul.settingNav li {
    margin-left: 6px;
    font-size: 12px;
}

header#header div#hnav ul.settingNav li p {
    border-right: 1px solid #CCCCCC;
    padding-right: 6px;
}

header#header div#hnav ul.settingNav li:last-child {
    line-height: 1.3;
}

/*-----header social icon-----*/
.header-social {
    width: 185px;
    float: right;
    padding-top: 20px;
}

.header-social li {
    width: 33px;
    padding-right: 5px;
    float: left;
}

.header-social li:last-child {
    padding-right: 0;
}

.header-social a:hover {
    opacity: 0.6;
}

/*-----header category-----*/
header#header div.hBox ul.hmenu li {
    padding: 10px 35px 8px 0;
}

header#header div.hBox ul.hmenu li a {
    color: #FFFFFF;
    font-size: 14px;
}

header#header div.hBox ul.hmenu li a:hover {
    text-decoration: none;
}

/*-----breadcrumb-----*/
#breadcrumb {
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}

#breadcrumb ul, #breadcrumb li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
}

#breadcrumb ul {
    height: 30px;
    width: 980px;
    margin: 0 auto;
}

#breadcrumb ul li {
    display: inline;
    line-height: 2.5em;
    padding-left: .75em;
    color: #666;
}

#breadcrumb ul li a {
    padding: 8px 18px 8px 0;
    background: url(../../img/common/crumbs.png) no-repeat right center;
}

#breadcrumb ul li.arrow_none a {
    background: none;
}

#breadcrumb ul li a:link {
    text-decoration: none;
    color: #666;
}

#breadcrumb ul li a:link, #breadcrumb ul li a:visited {
    text-decoration: none;
    color: #666;
}

#breadcrumb ul li a:hover {
    opacity: 0.6;
}

#breadcrumb .breadcrumb-top {
    vertical-align: middle;
    margin-top: -2px;
    width: 16px;
}

/*-----side bar-----*/
div#sidebarInner {
    /*padding-bottom: 340px;*/
}

div.sns {
    display: inline-block;
}

div.relation_article_box ul.hotList li div.textBox {
    width: 177px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.4;
}

/*-----date-----*/
p.articleDeta {
    padding-top: 4px;
}

/*-----uu-----*/
ul.articlePoint li {
    padding-top: 14px;
}

ul.pointList, ul.pointList li {
    font-size: 110%;
    padding-right: 0;
}

/*-----tag-----*/
.tag {
    font-size: 12px;
    float: right;
    width: 540px;
    margin-bottom: 10px;
}

.tag ul {
    float: right;
}

.tag li {
    background: url(../../img/common/icon_tag_b.gif) no-repeat 6px;
    background-size: 12px;
    text-align: center;
    background-color: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    float: right;
    width: auto;
    padding: 2px 5px 2px 12px;
    margin: 0 5px 5px 0;
}

.tag li p {
    padding-left: 16px;
}

.tag li a {
    display: block;
    padding-left: 10px;
}

/*-----inyou-----*/
.inyou-bg {
    background: #eaf6fc;
    padding: 10px;
    margin-bottom: -10px;
    width: 602px;
    box-sizing: border-box;
}

div.inyou {
    background-size: 30px;
    background-position: 5px 0;
    padding: 5px 5px 0 50px;
}

.inyou .provider:before {
    content: "ー ";
}

/*-----follow-area-----*/
.follow-area {
    border-top: 1px dashed #00a6d6;
    border-bottom: 1px dashed #00a6d6;
    border-left: none;
    border-right: none;
    border-radius: 0;
    width: 510px;
    padding: 20px;
    margin: 10px auto 30px auto;
}

.follow-area .follow-area-right {
    float: right;
    margin-top: 8px;
}

.follow-area-right img {
    width: 46px;
    float: left;
    padding-right: 10px;
}

.follow-area-right .newstext {
    width: 286px;
    font-size: 20px;
    color: #333333;
    margin-top: -10px;
}

.follow-area .fb-area {
    width: 120px;
    float: none;
    margin: 0 auto;
    padding-bottom: 10px;
}

.follow-area .tw-area {
    width: 120px;
    margin: 0 auto;
}

/*-----recommend-article-----*/
.recommend-article {
    margin-bottom: 20px;
}

.recommend-article .recommend-title {
    font-size: 15px;
    color: #00a6d6;
    font-weight: bold;
    padding-bottom: 10px;
}

.recommend-article dl {
    width: 205px;
    height: 220px;
    float: left;
    margin-right: 13px;
    position: relative;
}

.recommend-article dl:nth-child(3n+1) {
    margin-right: 0;
}

.recommend_article a {
    display: block;
}

.recommend-article dd {
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    line-height: 19px;
    color: #000000;
}

.recommend-article span.new, .recommend-article span.qa {
    position: absolute;
    top: -10px;
    left: -10px;
}

.recommend-article span.pr {
    color: #a7a7a7;
    font-size: 12px;
    border: 1px solid #a7a7a7;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 0 5px;
    position: absolute;
    bottom: 20px;
    right: 0;
}

#relation_article_list li {
    border-top: 1px solid #e8e8e8;
}

#relation_article_list li:first-child {
    border-top: none;
}

/*-----footer-----*/
.ft-menu {
    background: #414c5e;
    height: 300px;
    margin-top: 20px;
}

.ft-menu-inner {
    width: 980px;
    margin: 0 auto;
}

.ft-menu p {
    padding-bottom: 5px;
}

.ft-share {
    float: right;
    width: 280px;
}

.ft-share .fb_iframe_widget {
    display: block;
    margin-bottom: 15px;
}

footer {
    margin-top: 0;
}

.ft-category, .ft-about, .ft-share {
    margin-top: 20px;
}

.ft-category {
    width: 300px;
    float: left;
}

.ft-category li {
    float: left;
    width: 150px;
    padding: 6px 0;
}

.ft-category li a {
    color: #FFFFFF;
    font竏痴ize: 12px;
}

.ft-category li img {
    width: 16px;
    padding-right: 10px;
}

.ft-about li a, .ft-about p, .ft-category p {
    color: #FFFFFF;
    font-size: 14px;
}

.ft-about {
    width: 340px;
    float: left;
}

.ft-about li {
    width: 170px;
    float: left;
    padding: 5px 0;
}

.ft-about li:before {
    content: ">";
    color: #fff;
    padding-right: 5px;
}

/*-----hot list-----*/
.genre_list #popularRank .hotnumber {
    background-image: url(../../img/rank_month_bg.png);
    position: absolute;
    top: 0;
    background-size: 40px;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    -webkit-border-top-left-radius: 3.5px;
    -moz-border-top-left-radius: 3.5px;
    border-top-left-radius: 3.5px;
    color: #fff;
}

.genre_list #snsRank .hotnumber {
    background-image: url(../../img/rank_bg.png);
    position: absolute;
    top: 0;
    background-size: 40px;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    -webkit-border-top-left-radius: 3.5px;
    -moz-border-top-left-radius: 3.5px;
    border-top-left-radius: 3.5px;
    color: #fff;
}

.genre_list #popularRank .hotnumber > span,
.genre_list #snsRank .hotnumber > span {
    position: absolute;
    left: 5px;
}

.genre_list #popularRank dl:nth-of-type(10) .hotnumber > span,
.genre_list #snsRank dl:nth-of-type(10) .hotnumber > span {
    position: absolute;
    left: 1px;
    font-size: 18px;
}

.SubTitleArea {
    font-size: 0;
    margin-bottom: 15px;
}

.SubTitleArea > p {
    display: inline-block;
    font-size: 18px;
}

.SubTitleArea .sectionSubTitle {
    color: #fff;
    padding: 3px 8px;
    border-radius: 3.5px;
    position: relative;
    box-sizing: border-box;
}

#popularRank .SubTitleArea .sectionSubTitle {
    background-color: #da469f;
}

#popularRank .SubTitleArea .sectionSubTitle:before {
    border-top: 6px solid #da469f;
}

#snsRank .SubTitleArea .sectionSubTitle {
    background-color: #ffa800;
}

#snsRank .SubTitleArea .sectionSubTitle:before {
    border-top: 6px solid #ffa800;
}

.SubTitleArea .sectionSubLink {
    float: right;
    border: 2px solid #00a6d6;
    padding: 3px 8px 2px 24px;
    border-radius: 3.5px;
    background: url(../../img/anchor_arrow.png) no-repeat 8px 9px;
    background-size: 13px 9px;
    font-size: 14px;
    font-weight: bold;
}

.SubTitleArea .sectionSubLink > a {
    color: #00a6d6;
    display: block;
    margin: -3px -8px -3px -24px;
    padding: 3px 8px 3px 24px;
}

.SubTitleArea .sectionSubLink > a:hover {
    text-decoration: none;
    opacity: 0.8;
}

.SubTitleArea .sectionSubTitle:before {
    content: "";
    border: 6px solid transparent;
    border-top: 6px solid #fff;
    position: absolute;
    left: 46%;
    bottom: -12px;
}

.genre_list .recommend_article .qa {
    position: absolute;
    top: -20px;
    left: -10px;
}

.genre_list .recommend_article .listThmbnail {
    margin-right: 20px;
    width: 150px;
    float: left;
    position: relative;
}

.genre_list .recommend_article .listTitle {
    width: auto;
    margin: 0;
    font-weight: bold;
    font-size: 20px;
    float: none;
    position: static;
}

.genre_list .recommend_article .listThmbnail img {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.genre_list .recommend_article span.series_num {
    position: absolute;
    bottom: 15px;
    left: 102px;
    background-color: #00a4de;
    padding: 1px 10px 1px 10px;
    font-size: 12px;
    color: #ffffff;
    /*border-radius: 0 0 4px 0;*/
    /*-moz-border-radius: 0 0 4px 0;*/
    /*-webkit-border-radius: 0 0 4px 0;*/
    width: 27px;
    text-align: center;
}

/* ----------------------------------------
	article_list
 ---------------------------------------- */
.category_title {
    font-size: 28px;
    border-bottom: 2px solid #00a6d6;
}

.category_title img {
    width: 34px;
    float: left;
    padding-right: 10px;
}

.category_title p {
    padding-top: 2px;
    color: #00a6d6;
    font-weight: bold;
}

.lead_text {
    font-size: 16px;
    color: #000000;
    margin: 15px 0;
}

.genre_list .tag {
    width: 622px;
    background: #f4f4f4;
    padding: 10px 10px 5px 10px;
    float: none;
}

.genre_list .tag ul {
    float: left;
}

.genre_list .tag li {
    float: left;
}

.genre_list .recommend_article {
    background: #FFFFFF;
    margin-top: 30px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
}

.genre_list .recommend_article dl {
    margin-bottom: 15px;
    height: 115px;
    border-bottom: 1px solid #E8E8E8;
    position: relative;
}

.genre_list .recommend_article dt {
    margin-right: 20px;
    width: 150px;
    float: left;
    position: relative;
}

.genre_list .recommend_article dt img {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.genre_list .recommend_article dd {
    font-weight: bold;
    font-size: 20px;
}

.genre_list .recommend_article span.new, .genre_list .recommend_article span.qa {
    position: absolute;
    top: -10px;
    left: -10px;
}

.genre_list .recommend_article a {
    display: block;
}

.genre_list .recommend_article dl .pr {
    color: #a7a7a7;
    font-size: 12px;
    border: 1px solid #a7a7a7;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 0 5px;
    position: absolute;
    bottom: 15px;
    right: 0;
}

.genre_list .genre_article .date {
    color: #adadad;
    float: right;
    position: absolute;
    bottom: 10px;
    right: 0;
    font-size: 14px;
}

.mt5 {
    margin-top: 5px;
}

.mt5 > div {
    margin: 0 auto;
}

.mb10 {
    margin-bottom: 10px
}

.pb10 {
    padding-bottom: 10px;
}

.pb10i {
    padding-bottom: 10px !important;
}

/* InyouTextArea
------------------------*/
.InyouTextArea {
    background:
            url(../../img/common/inyou_bg_top.gif) repeat-x top left,
            url(../../img/common/inyou_bg_bottom.gif) repeat-x bottom left;
    padding: 10px 0;
    margin: 20px 0;
}
.InyouTextArea .InyouInner {
    background:  #eaf6fc;
    padding: 10px;
}
.InyouTextArea blockquote {
    background: url(../../img/common/fig_quote.png?1405419959) no-repeat left 15px;
    padding: 15px 10px 12px 60px;
    background-size: 30px;
    background-position: 5px 0;
    font-size: 135%;
    line-height: 1.8;
}