@charset 'utf-8';

/*----------------------------------------------------
 アイコン
----------------------------------------------------*/
/*
This webfont is generated by 
http://fontello.com open source project. 

## Entypo
Copyright (C) 2012 by Daniel Bruce
Author:    Daniel Bruce
License:   SIL (http://scripts.sil.org/OFL)
Homepage:  http://www.entypo.com

## Font Awesome
Copyright (C) 2012 by Dave Gandy
Author:    Dave Gandy
License:   SIL ()
Homepage:  http://fortawesome.github.com/Font-Awesome/
    
## Elusive
Copyright (C) 2013 by Aristeides Stathopoulos
Author:    Aristeides Stathopoulos
License:   SIL (http://scripts.sil.org/OFL)
Homepage:  http://aristeides.com/
*/


@font-face {
    font-family: 'fontello';
    font-weight: normal;
    font-style: normal;

    src: url('/pts.allabout.co.jp/font/f-navigation/fontello.eot?85550941');
    src: url('/pts.allabout.co.jp/font/f-navigation/fontello.eot?85550941#iefix') format('embedded-opentype'),
    url('/pts.allabout.co.jp/font/f-navigation/fontello.woff?85550941') format('woff'),
    url('/pts.allabout.co.jp/font/f-navigation/fontello.ttf?85550941') format('truetype'),
    url('/pts.allabout.co.jp/font/f-navigation/fontello.svg?85550941#fontello') format('svg');
}
[class^='icon-font']:before,
[class*=' icon-font']:before {
    display: inline-block;
    width: 1em;
    margin: 0.1em 0.2em 0 0.2em;
    text-align: center;
    text-decoration: inherit;
    text-transform: none;
    font-family: 'fontello';
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    speak: none;
}
.icon-font-facebook-squared:before {
    content: '\e800';
}
.icon-font-thumbs-up-alt:before {
    content: '\e801';
}
.icon-font-comment:before {
    content: '\e802';
}
.icon-font-thumbs-up:before {
    content: '\e803';
}
.icon-font-search:before {
    content: '\e804';
}
.icon-font-up-open-big:before {
    content: '\e805';
}
.icon-font-right-open-big:before {
    content: '\e806';
}
.icon-font-left-open-big:before {
    content: '\e807';
}
.icon-font-up-open-mini:before {
    content: '\e808';
}
.icon-font-down-open-big:before {
    content: '\e809';
}
.icon-font-left-open-mini:before {
    content: '\e80a';
}
.icon-font-down-open-mini:before {
    content: '\e80b';
}
.icon-font-right-open-mini:before {
    content: '\e80c';
}
.icon-font-play:before {
    content: '\e80d';
}
/*　バリエーション */
.is-open .icon-font-down-open-big:before {
    content: '\e805';
}
/* ie7 fallback */
[class^='icon-font'],
[class*=' icon-font'] {
    *margin: 0.1em 0.2em 0 0.2em;
    *font-family: 'fontello';
    *font-style: normal;
    *font-weight: normal;
    *line-height: 1;
}
/* CSS Combのエラー原因となるため、Combにかける際は一旦外す */
.icon-font-facebook-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-thumbs-up-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-comment { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-thumbs-up { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-search { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-up-open-big { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-right-open-big { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-left-open-big { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-up-open-mini { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-down-open-big { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-left-open-mini { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-down-open-mini { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-right-open-mini { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-font-play { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
/* ピクトグラム */
.pict-circle-arw-black16 {
    display: inline-block;
    border-radius: 8px;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    background: #202020;
}
.pict-circle-arw-black16:before {
    margin: 0;
}
.pict-circle-arw-black16.icon-font,
.pict-circle-arw-black16.icon-font:before {
    font-size: 13px;
    color: #fff;
}
.pict-circle-arw-black16.icon-font-right-open-mini {
    margin-right: 0.5em;
}
.pict-circle-arw-black25 {
    display: inline-block;
    border-radius: 12px;
    width: 25px;
    height: 25px;
    margin: 0 7px;
    text-align: center;
    line-height: 25px;
    background: #202020;
}
.pict-circle-arw-black25.icon-font,
.pict-circle-arw-black25.icon-font:before {
    font-size: 10px;
    color: #fff;
}
.pict-circle-arw-black25.icon-font:before {
    position: relative;
    margin: 0;
}
/* サムネにかぶせる用途でしか用いないため、位置指定も含める */
.pict-video-play {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 33px;
    width: 66px;
    height: 66px;
    margin-top: -33px;
    margin-left: -33px;
    font-size: 35px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
}
.pict-video-play.icon-font-play:before {
    position: absolute;
    top: 12px;
    left: 12px;
}

/*----------------------------------------------------
 カテゴリーラベル
----------------------------------------------------*/

.label {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    font-size: 12px;
    color: #fff;
}
*:first-child + html .label {
    display: inline;
    zoom: 1;
}
.label-l {
    min-width: 3em;
    padding: 3px 18px;
}
.label-m {
    min-width: 4em;
    padding: 2px 10px;
    font-size: 11px;
}
.label-s {
    min-width: 44px;
    padding: 2px 5px;
    font-size: 10px;
}
.label-number {
    opacity: 0.8;
    width: 20px;
    padding: 4px 3px;
    text-align: center;
    letter-spacing: normal;
    font-size: 12px;
    font-weight: bold;
    background: #202020;
}
/* コラム */
.label-column-entertainment {
    background: #e86a93;
}
.label-column-life {
    background: #9fd158;
}
.label-column-topics {
    background: #63bed8;
}
.label-column-it {
    background: #5969c7;
}
.label-column-gourmet {
    background: #f79b42;
}
.label-column-business {
    background: #834bce;
}
.label-column-application {
    background: #4e93cd;
}
/* その他 */
.label-other-new {
    background: #ec3b3b;
}
.label-other-pickup {
    background: #ebcf35;
}
/* 話題の投稿 */
.label-trend-entertainment {
    background: #e86a93;
}
.label-trend-hobby {
    background: #d873c9;
}
.label-trend-sports {
    background: #49c2b8;
}
.label-trend-gourmet {
    background: #f79b42;
}
.label-trend-travel {
    background: #4ab962;
}
.label-trend-news {
    background: #63bed8;
}
.label-trend-technology {
    background: #5969c7;
}
.label-trend-living {
    background: #af7254;
}
.label-trend-business {
    background: #834bce;
}
.label-trend-others {
    background: #aeaeb4;
}
/* 地域フラッシュ */
.label-flash-prefecture {
    background: #f8f8f8;
    color: #000;
}
/* how-to */
.label-how-to {
    width: 110px;
    padding: 5px 0;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: #202020;
}
/* fb */
.label-fb {
    padding: 1px 7px 3px 3px;
    font-size: 10px;
    color: #fff;
    background: #b2b2b2;
}
/* キニナル動画 */
.label-video-review {
    background: #ffb83b;
}
.label-video-news {
    background: #63bed8;
}
.label-video-variety {
    background: #e86a93;
}
.label-video-lifehack {
    background: #9fd158;
}
.label-video-other-news {
    background: #63bed8;
}
/*----------------------------------------------------
 コンテンツ：共通
----------------------------------------------------*/
/* メタ情報：いいね、日時 */
.media-meta:not(:first-child) {
    margin-top: 10px;
}
.media-date {
    display: block;
    float: right;
    font-size: 12px;
    color: #7f7f7f;
}
.media-meta.reverse .media-date {
    float: left;
}
.media-like {
    display: block;
    float: left;
    margin-top: -9px;
    font-size: 13px;
    font-weight: bold;
}
*:first-child + html .media-like {
    margin-top: 0;
}
.media-meta.reverse .media-like {
    float: right;
}
/* 最終カラム マージンリセット */
.cols4 > article:nth-child(4n),
.cols4 > div:nth-child(4n),
.cols4 > a:nth-child(4n),
.cols4 > section:nth-child(4n),
.cols4 > li:nth-child(4n) {
    margin-right: 0;
}
.cols4 > .last-col {
    margin-right: 0;
}
.cols3 > article:nth-child(3n),
.cols3 > div:nth-child(3n),
.cols3 > a:nth-child(3n),
.cols3 > section:nth-child(3n),
.cols3 > li:nth-child(3n) {
    margin-right: 0;
}
.cols3 > .last-col {
    margin-right: 0;
}

/*----------------------------------------------------
 コンテンツ：ボックス型
----------------------------------------------------*/

.media-box {
    overflow: hidden;
    position: relative;
}
.media-box a {
    display: block;
    height: 100%;
    text-decoration: none;
}
.media-box a:after {
    content: '';
    display: block;
}
.media-box img {
    width: 100%;
    height: auto;
}
.media-box-mask {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 );
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%,rgba(0, 0, 0, 0.8) 100%);
}
.media-box-l {
    width: 575px;
    height: 355px;
    margin-bottom: 15px;
}
.media-box-l a:after {
    padding-top: 60%;
}
.media-box-m {
    width: 280px;
    height: 170px;
    margin-bottom: 15px;
}
.media-box-m a:after {
    padding-top: 60%;
}
.media-box-f {
    width: 100%;
    height: 225px;
}
.media-box-f a:after {
    padding-top: 75%;
}
.media-box-title {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    text-shadow: 1px 0 2px rgba(0,0,0,0.6), 0 -1px 2px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.6);
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
}
.media-box-l .media-box-title {
    padding: 15px;
    font-size: 26px;
}
.media-box-m .media-box-title,
.media-box-f .media-box-title {
    padding: 10px;
    font-size: 16px;
}

/*----------------------------------------------------
 コンテンツ：長方形
----------------------------------------------------*/

.media-rect {
    float: left;
    width: 276px;
    margin: 0 20px 10px 0;
}
.media-rect-m {
    width: 213px;
}
.media-rect a {
    display: block;
    text-decoration: none;
}
.media-rect-thumb {
    position: relative;
    background: #202020;
}
body:not(.ltie9) .media-rect-thumb.js-img-liquid {
    overflow: hidden;
}
body:not(.ltie9) .media-rect-thumb.js-img-liquid > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
.media-rect-thumb:after {
    content: '';
    display: block;
    padding-top: 60%;
}
.media-rect-title {
    height: 4.2em;
    font-weight: bold;
    line-height: 1.4;
}
.media-rect-thumb + .media-rect-title {
    margin-top: 8px;
}
.media-rect a:hover .media-rect-title {
    overflow: hidden;
    color: #0e67cc;
}
.media-rect-poster {
    padding: 0 10px;
}
.media-rect-poster-thumb {
    float: left;
    border-radius: 23px;
    width: 45px;
    margin: 0 5px 0 -5px;
}
.media-rect-poster-thumb img {
    position: relative;
    top: -12px;
    border-radius: 23px;
    border-radius: 23px;
    width: 100%;
    height: auto;
}
.media-rect-poster-name {
    overflow: hidden;
    height: 68px;
    padding: 6px 0;
    font-weight: bold;
}
.media-rect a:hover .media-rect-poster-name {
    color: #0e67cc;
}

/*----------------------------------------------------
 コンテンツ：パネル
----------------------------------------------------*/

.media-panel {
    display: block;
    float: left;
    width: 192px;
    margin: 0 34px 30px 0;
}
.media-panel a {
    display: block;
}
.media-panel-thumb:after {
    content: '';
    display: block;
    padding-top: 100%;
}
.media-panel-spacer {
    display: block;
    float: left;
}
.cols3 .media-panel {
    margin-right: 51px;
}

/*----------------------------------------------------
 ボタン
----------------------------------------------------*/

.btn {
    display: block;
    margin: 0 auto;
}
.btn,
.btn > a {
    text-decoration: none;
}
.btn01 {
    border: 1px solid #202020;
    width: 355px;
    margin: 0 auto;
    padding: 8px 0;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}
.btn01:hover {
    color: #fff;
    background: #202020;
}
.btn-text {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
}
*:first-child + html .btn-text {
    display: inline;
    zoom: 1;
}

/*----------------------------------------------------
 コンテンツ：フラット型
----------------------------------------------------*/

.media-flat {
    float: left;
    position: relative;
    width: 355px;
    margin-right: 67px;
    vertical-align: top;
    letter-spacing: normal;
    line-height: 1.4;
}
*:first-child + html .media-flat {
    display: inline;
    zoom: 1;
}
.media-flat a {
    display: block;
    text-decoration: none;
    font-weight: bold;
}
.media-flat-thumb img {
    overflow: hidden;
    width: 100%;
    height: 140px;
}
.media-flat-title {
    display: block;
    overflow: hidden;
    margin-bottom: 5px;
    padding: 15px 0 0;
    font-size: 16px;
    font-weight: bold;
}
.media-flat-lead {
    font-size: 12px;
}

/*----------------------------------------------------
 コンテンツ：バナー型
----------------------------------------------------*/

.media-banner-list {
    letter-spacing: -0.4em;
}
.media-banner {
    display: block;
    position: relative;
    border-bottom: 1px solid #eaeaea;
    width: 300px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    line-height: 1.4;
}
.media-banner a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: #202020;
}
.media-banner a:hover {
    color: #0e67cc;
}
.media-banner-thumb {
    position: relative;
    display: inline-block;
    width: 85px;
    margin-right: 10px;
    vertical-align: top;
    letter-spacing: normal;
}
*:first-child + html .media-banner-thumb {
    display: inline;
    zoom: 1;
}
.media-banner-thumb:after {
    content: '';
    display: block;
    padding-top: 100%;
}
.media-banner-thumb img {
    overflow: hidden;
    width: 85px;
    height: 85px;
}
.media-banner-thumb .pict-video-play {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
}
.media-banner-thumb .pict-video-play.icon-font-play:before {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 15px;
}
.media-banner-detail {
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: 205px;
    vertical-align: top;
    letter-spacing: normal;
}
*:first-child + html .media-banner-detail {
    display: inline;
    zoom: 1;
}
.media-banner-title {
    display: inline-block;
    overflow: hidden;
    padding-top: 24px;
    font-weight: bold;
}
*:first-child + html .media-banner-title {
    display: inline;
    zoom: 1;
}
.label-fb + .media-banner-title {
    padding-top: 28px;
}

/*----------------------------------------------------
 コンテンツ：カルーセル型
----------------------------------------------------*/

.media-carousel-wrap {
    position: relative;
    margin: 0 45px 45px;
    padding-bottom: 15px;
}
.media-carousel-wrap.no-slick-dots {
    padding-bottom: 0;
}
.media-carousel-wrap.no-slick-dots .slick-dots {
    display: none !important;
}
.media-carousel {
    margin: 10px 0 10px 0;
}
.media-carousel-item {
    display: table-cell;
    padding: 0 10px;
}
.media-carousel-item a {
    display: block;
    position: relative;
}
.media-carousel-item a:after {
    content: '';
    display: block;
    padding-top: 75%;
}
.media-carousel-mask {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 );
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%,rgba(0, 0, 0, 0.8) 100%);
}
.media-carousel-item-title {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    text-shadow: 1px 0 2px rgba(0,0,0,0.6), 0 -1px 2px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.6);
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
    color: #fff;
}
.media-carousel-prev,
.media-carousel-next {
    position: absolute;
    cursor: pointer;
}
.media-carousel-prev {
    top: 65px;
    left: -45px;
}
.media-carousel-next {
    position: absolute;
    top: 65px;
    right: -45px;
}

/*----------------------------------------------------
 コンテンツ：カルーセル型2
----------------------------------------------------*/

.media-carousel-2-title {
    margin: 45px 0 10px;
    border-bottom: 1px solid #3b5998;
    border-left: 8px solid #3b5998;
    padding: 5px 10px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
}
.media-carousel-2-wrap {
    position: relative;
    margin: 0 45px;
}
.media-carousel-2 {
    margin: 10px 0;
}
.media-carousel-2:not(.slick-initialized) {
    overflow: hidden;
}
.media-carousel-2-item {
    display: table-cell;
    padding: 0 10px;
}
.media-carousel-2-item a {
    display: block;
    position: relative;
}
.media-carousel-2-like {
    float: right;
    margin-top: -4px;
    font-size: 13px;
    font-weight: bold;
}
.media-carousel-2-item-thumb {
    position: relative;
    width: 240px;
    height: 144px;
    background: #202020;
    overflow: hidden;
}
.media-carousel-2-item-thumb.js-img-liquid > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
.media-carousel-2-item-poster {
    padding: 0 10px;
}
.media-carousel-2-item-poster-thumb {
    float: left;
    width: 45px;
    margin: 0 5px 0 -5px;
    border-radius: 23px;
}
.media-carousel-2-item-poster-thumb img {
    position: relative;
    top: -12px;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 23px;
    border-radius: 23px;
}
.media-carousel-2-item-poster-name {
    overflow: hidden;
    height: 54px;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;
}
.media-carousel-2-item a:hover .media-carousel-2-item-poster-name {
    color: #0e67cc;
}
.media-carousel-2-prev,
.media-carousel-2-next {
    top: 89px;
}

/*----------------------------------------------------
 見出し
----------------------------------------------------*/

.title-box {
    position: relative;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #eaeaea;
}
.title-box-title {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
}
*:first-child + html .title-box-title {
    display: inline;
    zoom: 1;
}
.title-box-title-s {
    font-size: 16px;
}
.title-box-link {
    display: inline-block;
    padding: 4px 0;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    color: #202020;
}
*:first-child + html .title-box-link {
    display: inline;
    zoom: 1;
}
.title-box-link:hover {
    color: #202020;
}
.title-box-link > .icon {
    margin: -2px 0 0 5px;
}
.title-box-link:hover {
    text-decoration: underline;
}
/* ページネーション */
.title-box-pagination {
    width: 335px;
    padding: 8px 0;
    text-align: center;
}
.title-box.has-pagination-right .title-box-pagination {
    position: absolute;
    top: 0;
    right: 25px;
}
.title-box-pagination-prev,
.title-box-pagination-next {
    display: block;
    position: absolute;
    top: 10px;
    width: 70px;
    height: 30px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    line-height: 30px;
    color: #fff;
    background: #9d9d9d;
}
.title-box-pagination-prev {
    left: 0;
}
.title-box-pagination-next {
    right: 0;
}
.title-box-pagination-prev:hover,
.title-box-pagination-next:hover {
    color: #fff;
    background: #3b5998;
}
.title-box-pagination-prev:after,
.title-box-pagination-next:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    border-style: solid;
    width: 0;
    height: 0;
}
.title-box-pagination-prev:after {
    left: -12px;
    border-width: 15px 12px 15px 0;
    border-color: transparent #9d9d9d transparent transparent;
}
.title-box-pagination-next:after {
    right: -12px;
    border-width: 15px 0 15px 12px;
    border-color: transparent transparent transparent #9d9d9d;
}
.title-box-pagination-prev:hover:after {
    border-width: 15px 12px 15px 0;
    border-color: transparent #3b5998 transparent transparent;
}
.title-box-pagination-next:hover:after {
    border-color: transparent transparent transparent #3b5998;
}
.title-box-pagination-date {
    font-size: 22px;
    font-weight: bold;
}

/* ルビ付 */
.title-cols {
    margin: 10px 0;
}
.title-cols-title {
    display: inline-block;
    margin-right: 5px;
    vertical-align: bottom;
    font-size: 40px;
    font-weight: bold;
}
*:first-child + html .title-cols-title {
    display: inline;
    zoom: 1;
}
.title-cols-ruby {
    display: inline-block;
    padding-bottom: 20px;
    font-size: 18px;
}
*:first-child + html .title-cols-ruby {
    display: inline;
    zoom: 1;
}

/*----------------------------------------------------
  記事ベースレイアウト
----------------------------------------------------*/

.article-header {
    position: relative;
}
.article-header.has-label {
    padding: 35px 0 8px;
}
.article-header-label {
    left: 0;
}
.article-header-title {
    margin-bottom: 8px;
    font-size: 36px;
    line-height: 1.2;
}
.article-header-date {
    font-size: 13px;
    color: #9d9d9d;
}
.article-header-meta {
    position: absolute;
    top: 0;
    right: 0;
}
.article-header-like,
.article-header-comment {
    font-size: 13px;
    font-weight: bold;
}
.article-header-like {
    float: right;
}
.article-header-like .icon-font {
    margin-right: 3px;
}
.article-header-comment {
    float: right;
    margin-left: 20px;
}
.article-header-comment .icon-font {
    position: relative;
    margin-right: 5px;
}
.article-header .poster {
    margin-top: -5px;
}
.article-body {
    padding-bottom: 20px;
}
.article-body-inner {
    border: 1px solid #d7d7d7;
    margin: 0 0 20px;
    padding: 0 20px;
}
.article-cover img {
    width: 100%;
    height: auto;
}
.article-content {
    padding: 15px 0 25px;
    font-size: 16px;
}
*:first-child + html .article-content {
    zoom: 1;
}
.article-content:after {
    content: '';
    display: block;
    clear: both;
}
.article-content h2 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
}
.article-content a {
    color: #0e67cc;
}
.article-content figure {
    margin-bottom: 10px;
}
.article-content p,
.article-content blockquote,
.article-content ul,
.article-content ol,
.article-content dl,
.article-content table,
.article-content section {
    margin-bottom: 20px;
}
.article-content *:last-child {
    margin-bottom: 0;
}
.article-content blockquote {
    position: relative;
    padding: 50px 50px 30px 70px;
    background: #eaeaea;
}
.article-content blockquote:before {
    content: '“';
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: Georgia, sans-serif;
    font-size: 140px;
    line-height: 0.8em;
    color: #fff;
}
.article-content ul {
    margin-left: 1.5em;
    list-style: disc;
}
.article-content ol {
    margin-left: 1.5em;
    list-style: decimal;
}
.article-content .spreader {
    text-align: center;
}
.article-content .spreader-inner {
    display: inline-block;
    text-align: left;
}
.article-content .center {
    text-align: center;
}
.article .section {
    margin-top: 30px;
}

/*----------------------------------------------------
 投稿者：詳細ページ
----------------------------------------------------*/

.poster {
    width: 100%;
    padding: 10px 0;
}
.poster > a {
    display: block;
    text-decoration: none;
}
.poster-thumb {
    float: left;
    overflow: hidden;
    border-radius: 26px;
    width: 52px;
    margin-right: 10px;
}
.poster-thumb > img {
    width: 100%;
    height: auto;
}
.poster-name-l {
    font-size: 30px;
    font-weight: bold;
    line-height: 38px;
    padding-top: 7px;
}
.poster-name-m {
    font-size: 15px;
    line-height: 52px;
}

/*----------------------------------------------------
 ページネーション
----------------------------------------------------*/

.pagination {
    margin: 10px 0 35px;
    text-align: center;
}
.pagination-inner {
    display: inline-block;
    position: relative;
    padding: 0 155px;
}
*:first-child + html .pagination-inner {
    display: inline;
    zoom: 1;
}
.pagination-prev,
.pagination-next {
    position: absolute;
    top: 0;
    width: 90px;
    height: 35px;
    background: #3b5998;
}
.pagination-prev {
    left: 0;
}
.pagination-next {
    right: 0;
}
.pagination-prev:hover,
.pagination-next:hover {
    display: inline-block;
    opacity: 0.7;
    filter: alpha(opacity=70);
}
*:first-child + html .pagination-prev .icon-font,
*:first-child + html .pagination-next .icon-font {
    position: relative;
    top: 5px;
}
.pagination-num-list {
    text-align: center;
    letter-spacing: -0.4em;
    font-size: 0;
}
.pagination-num {
    display: inline-block;
    border: 1px solid #eaeaea;
    width: 36px;
    height: 36px;
    margin: 0 4px;
    text-align: center;
    letter-spacing: normal;
    font-size: 18px;
    line-height: 36px;
}
*:first-child + html .pagination-num {
    display: inline;
    zoom: 1;
}
.pagination-num:hover {
    border: 1px solid #eaeaea;
    background: #eaeaea;
}
.pagination-num a {
    color: #202020;
}
.pagination-num.current,
.pagination-num.current:hover,
.pagination-leader,
.pagination-leader:hover {
    border: 1px solid #fff;
    background: #fff;
}
.pagination-num.current {
    font-weight: bold;
}
*:first-child + html .pagination-num.current {
    position: relative;
    top: -15px;
}
.pagination-num a {
    display: block;
    text-decoration: none;
}

/*----------------------------------------------------
 前の記事・次の記事
----------------------------------------------------*/

.navigation-list {
    margin-bottom: 20px;
}
.navigation {
    position: relative;
    width: 50%;
}
.navigation .icon-font {
    position: absolute;
}
.navigation-prev {
    float: left;
}
.navigation-prev .icon-font {
    top: 35px;
    left: -10px;
}
*:first-child + html .navigation-prev .icon-font {
    left: 10px;
}
.navigation-next {
    float: right;
}
.navigation-next .icon-font {
    top: 35px;
    right: -10px;
}
*:first-child + html .navigation-next .icon-font {
    right: 10px;
}
.navigation > a {
    display: block;
    border: 1px solid #eaeaea;
    padding: 5px 10px 10px 10px;
    text-decoration: none;
    color: #202020;
}
.navigation-prev .navigation-inner {
    padding-left: 25px;
}
.navigation-next .navigation-inner {
    padding-right: 25px;
}
.navigation-prev + .navigation-next a {
    border-left: none;
}
.navigation-label {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #0e67cc;
}
.navigation-next .navigation-label {
    text-align: right;
}
.navigation-thumb {
    width: 90px;
    height: 70px;
}
.navigation-prev .navigation-thumb {
    float: left;
    margin-right: 10px;
}
.navigation-next .navigation-thumb {
    float: right;
    margin-left: 10px;
}
.navigation-text {
    overflow: hidden;
    min-height: 70px;
    padding: 0 5px;
    font-weight: bold;
    line-height: 1.3;
    color: #202020;
}
.navigation > a:hover .navigation-text {
    color: #0e67cc;
}