@charset "UTF-8";

/*
Theme Name: MATOMEDIA(PC)
Theme URI:
*/

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic);

@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?wopoav');
    src:    url('fonts/icomoon.eot?wopoav#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?wopoav') format('truetype'),
        url('fonts/icomoon.woff?wopoav') format('woff'),
        url('fonts/icomoon.svg?wopoav#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-user:before {
    content: "\f007";
}
.icon-twitter:before {
    content: "\f099";
}
.icon-facebook:before {
    content: "\f09a";
}
.icon-rss:before {
    content: "\f09e";
}
.icon-folder:before {
    content: "\e910";
}
.icon-folders:before {
    content: "\e900";
}
.icon-tag:before {
    content: "\e913";
}
.icon-tags:before {
    content: "\e907";
}
.icon-stars:before {
    content: "\e90d";
}
.icon-calendar:before {
    content: "\e905";
}
.icon-warning:before {
    content: "\e90f";
}
.icon-time:before {
    content: "\e906";
}
.icon-eye2:before {
    content: "\e908";
}
.icon-comment:before {
    content: "\e90b";
}
.icon-angle-left:before {
    content: "\e90c";
}
.icon-angle-right:before {
    content: "\e909";
}
.icon-angle-up:before {
    content: "\e90a";
}
.icon-close:before {
    content: "\e904";
}
.icon-comment2:before {
    content: "\e90e";
}
.icon-crown:before {
    content: "\e917";
}
.icon-eye:before {
    content: "\e901";
}
.icon-menu:before {
    content: "\e903";
}
.icon-search:before {
    content: "\e902";
}

/*
Base
*/

html,body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,
blockquote,th,td,p,img{
margin:0;
padding:0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}

img {
vertical-align: bottom;
}

ul,ol {
list-style: none;
}

*, *:before, *:after {
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

a {
color: #222;
text-decoration: none;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}

body {
font-family: 'Lato','ヒラギノ角ゴ Pro W3','メイリオ','ＭＳ Ｐゴシック',Verdana,sans-serif,Helvetica;
background: #fff;
color: #222;
font-size: 15px;
line-height: 1;
word-wrap: break-word;
word-break: break-all;
}

.wpp-thumbnail {
width: 100%;
height: 100%;
}

/* 動画のレスポンシブ */
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
  
.video-wrapper iframe, 
.video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*
Layout
*/

.l-inner {
margin: 0 auto;
position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
}

.l-header .l-inner {
	width: 1080px;
	margin-top: 10px;
}
.l-contents .l-inner {
	width: 1080px;
}
.l-footer .l-inner {
	width: 1080px;
}

.l-header {
background: #fff;
border-bottom: 1px solid #f1f1f1;
height: 80px;
position: relative;
}

.l-breadcrumb {
border-bottom: 1px solid #f1f1f1;
margin-bottom: 30px;
background: #f9f9f9;
}

.l-popular-large {
margin: 0 auto;
width: 100%;
}

.l-contents {
margin: 30px 0;
}

.l-category-menu {
width: 155px;
float: left;
}

.l-main {
width: 535px;
float: left;
margin-right: 30px;
padding-left: 15px;
border-left: 1px solid #f1f1f1;
}

.l-aricle-wrapper,
.l-archive-wrapper {
width: 690px;
float: left;
margin-right: 30px;
}

.l-side {
width: 300px;
float: left;
}

.l-footer {
border-top: 1px solid #e7e7e7;
background: #666;
padding: 30px 0 100px 0;
}

.l-inner:after,
.clear:after,
.wrapper:after,
.article:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

/*
Module
*/

/* セクション */

.s-latest,
.s-archive,
.s-ad,
.s-side {
margin-bottom: 30px;
position: relative;
}

.s-single {
margin-bottom: 50px;
}

.s-single2 {
margin-bottom: 20px;
}

.s-footer-top {
float: left;
width: 50%;
padding: 0 15px;
}

.s-title-header {
position: relative;
padding-bottom: 13px;
margin-bottom: 15px;
border-bottom: 3px solid #f1f1f1;
}

.s-title-header:after {
content: "";
display: block;
position: absolute;
background: #f992c1;
width: 60px;
height: 3px;
bottom: -3px;
left: 0;
}

.s-title {
font-size: 17px;
color: #505050;
font-weight: bold;
line-height: 28px;
padding-left: 38px;
position: relative;
letter-spacing: 2px;
}

.s-icon {
display: block;
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 28px;
line-height: 28px;
font-size: 17px;
background: #f992c1;
color: #fff;
text-align: center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 1px 0 #AB4975;
-webkit-box-shadow: 0px 1px 0 #AB4975;
box-shadow: 0px 1px 0 #AB4975;
}

.icon-stars {
font-size: 26px;
}

.s-single-title-header {
border-bottom: 1px solid #f1f1f1;
padding-bottom: 13px;
margin-bottom: 13px;
}

.s-single-title {
float: left;
font-size: 16px;
}

.s-single-lead {
float: right;
font-size: 11px;
color: #999;
padding-top: 5px;
}

.s-side-title-header {
border-bottom: 1px solid #f1f1f1;
padding-bottom: 13px;
margin-bottom: 13px;
position: relative;
margin-top: 30px;
}

.s-side-title {
font-size: 16px;
color: #000;
font-weight: 700;
margin-bottom: 7px;
letter-spacing: 0.8px;
border-left: 2px solid #CF3F70;
padding: 0 0 0 12px;
}

.s-side-lead {
font-size: 14px;
 color: #333;
line-height: 1.6;
}

/* ヘッダー */

/* ロゴ */
.logo-wrapper {
text-align: left;
padding-top: 6px;
}

.logo {
font-size: 32px;
font-weight: 500;
margin-bottom: 5px;
display: inline-block;
margin-top: 10px;
margin-right: 10px;
color: #f992c1;
}

.logo > a {
display: inline-block;
color: #000;
}

.top-description {
font-size: 11px;
color: #666;
display: inline-block;
vertical-align: top;
padding-top: 20px;
}

/* グローバルナビゲーション */

.global-nav {
position: absolute;
top: 35px;
right: 104px;
}

.global-nav-item {
float: left;
margin-left: 20px;
}

.global-nav-item:first-child {
margin-left: 0;
}

.global-nav-item > a {
display: block;
font-size: 11px;
font-weight: 400;
color: #999;
}

.global-nav-item > a:hover {
text-decoration: underline;
}

/* パンくずリスト */

.breadcrumb-item {
float: left;
font-size: 11px;
position: relative;
}

.breadcrumb-item:after {
content: "";
display: block;
position: absolute;
top: 4px;
right: 0;
bottom: 0;
width: 24px;
height: 24px;
border: 1px solid transparent;
border-right-color: #e4e4e4;
border-bottom-color: #e4e4e4;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.breadcrumb-last:after {
display: none;
}

.breadcrumb-item > a,
.breadcrumb-item > span {
display: block;
padding: 10px 15px 10px 10px;
}

.breadcrumb-item > a {
color: #888;
}

.breadcrumb-item > a:hover {
text-decoration: underline;
}

/* SNS */
.tw-bg {
background: #55acee;
-webkit-box-shadow: 0 3px 0 #2E87CC;
-moz-box-shadow: 0 3px 0 #2E87CC;
box-shadow: 0 3px 0 #2E87CC;
}

.tw-bd {
border: 2px solid #55acee;
}

.fb-bg {
background: #4368BD;
-webkit-box-shadow: 0 3px 0 #2B488A;
-moz-box-shadow: 0 3px 0 #2B488A;
box-shadow: 0 3px 0 #2B488A;
}

.fb-bd {
border: 2px solid #4368BD;
}

.hb-bg {
background: #008fde;
-webkit-box-shadow: 0 3px 0 #00669E;
-moz-box-shadow: 0 3px 0 #00669E;
box-shadow: 0 3px 0 #00669E;
}

.gp-bg {
background: #dd4b39;
-webkit-box-shadow: 0 3px 0 #AB2B1A;
-moz-box-shadow: 0 3px 0 #AB2B1A;
box-shadow: 0 3px 0 #AB2B1A;
}

.rs-bg {
background: #ff8c00;
-webkit-box-shadow: 0 3px 0 #BD6801;
-moz-box-shadow: 0 3px 0 #BD6801;
box-shadow: 0 3px 0 #BD6801;
}

.rs-bd {
border: 2px solid #ff8c00;
}

.pk-bg {
background: #f13d53;
-webkit-box-shadow: 0 3px 0 #C72B3E;
-moz-box-shadow: 0 3px 0 #C72B3E;
box-shadow: 0 3px 0 #C72B3E;
}

.pk-bg:hover {
background: #F3697A;
}

/* サムネイル付きいいね */

.like-thumb-box {
width: 600px;
margin: 0 auto 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}

.like-thumb-image {
float: left;
width: 280px;
height: 180px;
}

.like-thumb-image > img {
width: 100%;
height: 100%;
}

.like-thumb-text {
background: #383838;
padding: 30px 30px 30px 300px;
text-align: center;
}

.like-thumb-lead {
color: #fff;
font-size: 12px;
line-height: 1.6;
margin-bottom: 10px;
}

.like-thumb-lead {
font-size: 15px;
line-height: 1.8;
margin-bottom: 20px;
color: #b7b7b7;
}

.like-thumb-lead > span {
font-size: 21px;
color: #fff;
}

.like-thumb-btn > a {
display: inline-block;
background: #4b72cc;
border: 1px solid #7694d4;
height: 36px;
line-height: 36px;
padding: 0 24px;
color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
}

.like-thumb-btn > a:hover {
background: #5c85e2;
}

.like-thumb-btn i {
position: relative;
font-size: 17px;
top: 1px;
margin-right: 7px;
}

/* フォローボタン */

.sns-follow-list {
position: absolute;
}

.l-header .sns-follow-list {
top: 16px;
right: 0;
}

.l-footer .sns-follow-list {
bottom: 0;
left: 0;
}

.sns-follow-item {
float: left;
margin-left: 5px;
}

.sns-follow-item:first-child {
margin-left: 0;
}

.sns-follow-item > a {
display: block;
font-size: 15px;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.sns-follow-item > a:hover {
-webkit-transform: translate3d(0,-3px,0);
-moz-transform: translate3d(0,-3px,0);
transform: translate3d(0,-3px,0);
}

.tw-follow {
color: #55acee;
}

.fb-follow {
color: #4368BD;
}

.rs-follow {
color: #ff8c00;
}

/* シェアボタン */

.meta-bottom > .share-list {
float: left;
margin-right: 20px;
}

.share-item {
float: left;
margin-left: 10px;
}

.share-item:first-child {
margin-left: 0;
}

.share-item > a {
font-size: 12px;
display: block;
text-align: center;
padding: 11px 0;
color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.share-item > a:hover {
-webkit-transform: translate3d(0px,3px,0);
-moz-transform: translate3d(0px,3px,0);
transform: translate3d(0px,3px,0);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.i-share {
font-size: 18px;
position: relative;
top: 2px;
margin-right: 5px;
}

.i-hb {
font-family: Verdana;
font-weight: bold;
top: 1px;
}

/* オリジナルのシェアボタン */

.share-btn-list {
width: 610px;
margin: 0 auto;
}

.share-btn-item {
width: 33.33333333%;
float: left;
padding: 0 5px;
}

.share-btn-item > a {
font-size: 14px;
display: block;
text-align: center;
height: 40px;
line-height: 42px;
color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.share-btn-item > a:hover {
-webkit-transform: translate3d(0px,3px,0);
-moz-transform: translate3d(0px,3px,0);
transform: translate3d(0px,3px,0);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.share-btn-item i {
position: relative;
}

.share-btn-item .icon-twitter {
font-size: 22px;
top: 2px;
margin-right: 8px;
}

.share-btn-item .icon-facebook {
font-size: 20px;
top: 2px;
margin-right: 10px;
}

.icon-hatebu {
position: relative;
font-family: Verdana !important;
font-weight: bold;
top: 1px;
margin-right: 9px;
font-size: 20px;
}

/* トップページに戻るボタン */

.top-btn {
width: 600px;
margin: 40px auto 0;
}

.top-btn > a {
display: block;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #f992c1;
color: #fff;
font-size: 15px;
text-align: center;
height: 42px;
line-height: 42px;
-webkit-box-shadow: 0 3px 0 #c35588;
-moz-box-shadow: 0 3px 0 #c35588;
box-shadow: 0 3px 0 #c35588;
}

.top-btn > a:hover {
-webkit-transform: translate3d(0px,3px,0);
-moz-transform: translate3d(0px,3px,0);
transform: translate3d(0px,3px,0);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

/* 追従のカテゴリーメニュー */

.l-category-menu .cat-item > a {
display: block;
font-size: 13px;
padding: 13px 15px 13px 18px;
}

.l-category-menu .cat-item > a:hover {
text-decoration: underline;
}

.l-category-menu .current-cat {
border-left: 2px solid #CF3F70;
font-weight: 700;
}
.l-category-menu .current-cat > a{
	font-size: 18px;
}

.l-category-menu .current-cat > a:hover {
text-decoration: none;
}

/* 記事のレイアウト */

.article-side-wrapper {
margin-top: -12px;
}

.article-small-wrapper {
margin-top: -15px;
}

.article-2col-wrapper {
margin: -7.5px;
}

.article {
position: relative;
}

.article-small {
padding: 15px 0;
border-bottom: 1px dotted #dcdcdc;
}

.article-2col {
width: 50%;
float: left;
padding: 7.5px;
}

.article-side {
padding: 10px 0;
border-bottom: 1px dotted #dcdcdc;
}

.l-popular-large .article-popular {
float: left;
width: 33%;
margin: 0;
}

.l-popular-large .article-popular:first-child {
margin-left: 0;
}
.l-popular-large .article-popular:first-child,
.l-popular-large .article-popular:nth-child(2),
.l-popular-large .article-popular:nth-child(3){
position: relative;
}
.l-popular-large .article-popular:first-child .article-text,
.l-popular-large .article-popular:nth-child(2) .article-text,
.l-popular-large .article-popular:nth-child(3) .article-text{
position: absolute;
    right: 0;
    bottom: 0;
}

.l-popular-large .article-popular:first-child .article-title > a,
.l-popular-large .article-popular:nth-child(2) .article-title > a,
.l-popular-large .article-popular:nth-child(3) .article-title > a{
font-size: 18px;
line-height: 28px;
letter-spacing: 1.6px;
color: #fff;
font-weight: 600;
}

.l-popular-large .article-thumb:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
}

.no-article {
font-size: 14px;
}

.article-text,
.article-thumb {
display: table-cell;
}

.article-thumb {
width: 10%;
}

.article-text {
vertical-align: top;
}

.article-small .article-text,
.article-title-wrapper > .article-text {
padding-left: 15px;
}

.article-popular .article-text,
.article-2col .article-text,
.article-side .article-text {
padding-left: 10px;
}

.l-popular-large .article-popular:first-child .article-text,
.l-popular-large .article-popular:first-child +* .article-text,
.l-popular-large .article-popular:first-child .article-thumb,
.l-popular-large .article-popular:first-child +* .article-thumb {
padding-left: 0;
display: block;
width: 100%;
}

.l-popular-large .article-popular:nth-child(3) .article-thumb{
padding-left: 0;
display: block;
width: auto;
width: 100%;
}
/* 記事のヘッダー：個別記事 */

.article-header {
border-bottom: 3px solid #f1f1f1;
padding-bottom: 30px;
margin-bottom: 25px;
}

/* 記事のタイトル */

.article-title-wrapper {
margin-bottom: 20px;
}

.article-title {
line-height: 1.4;
}

.article-small .article-title {
font-size: 16px;
font-weight: normal;
margin-bottom: 5px;
}

.article-single .article-title {
font-size: 25px;
color: #404040;
font-weight: bold;
margin-bottom: 20px;
}

.article-page .article-page {
margin-bottom: 0;
}

.article-popular .article-title,
.article-2col .article-title,
.article-side .article-title {
font-size: 13px;
font-weight: normal;
height: 54px;
overflow: hidden;
margin-bottom: 5px;
}

.l-popular-large .article-popular:first-child .article-title,
.l-popular-large .article-popular:first-child +* .article-title {
font-size: 16px;
height: 60px;
margin-bottom: 8px;
font-weight: 600;
padding: 8px;
text-align: left;
}
.l-popular-large .article-popular:nth-child(3) .article-title{
font-size: 16px;
height: 60px;
margin-bottom: 8px;
font-weight: 600;
padding: 8px;
text-align: left;
}
.article-title > a {
display: block;
color: #000;
}

.article-title > a:hover {
text-decoration: underline;
}

/* 記事のサムネイル */

.article-thumb img {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.article-small .article-thumb img {
width: 120px;
height: 120px;
}

.article-title-wrapper .article-thumb img {
width: 110px;
height: 110px;
}

.article-2col .article-thumb img,
.article-side .article-thumb img {
width: 70px;
height: 70px;
}

.l-popular-large .article-popular .article-thumb img {
width: 130px;
height: 75px;
}

.l-popular-large .article-popular:first-child .article-thumb img,
.l-popular-large .article-popular:first-child +* .article-thumb img {
width: 100%;
height: 290px;
object-fit: cover;
}

.l-popular-large .article-popular:nth-child(3) .article-thumb img{
width: 100%;
height: 290px;
object-fit: cover;
}
/* 記事の抜粋文 */

.article-lead {
font-size: 11px;
line-height: 18px;
color: #666;
margin-bottom: 7px;
}

/* 記事のメタ（日付、コメント数、views数） */

.meta-top {
margin-bottom: 17px;
}

.article-meta > p {
font-size: 11px;
font-weight: 500;
line-height: 12px;
color: #666;
position: relative;
}

.article-author {
float: left;
}

.meta-bottom > .article-author {
font-size: 12px;
margin-top: 4px;
}

.meta-bottom > .article-author > span {
color: #bbb;
}

.article-author > a {
color: #666;
}

.article-author > a:hover {
text-decoration: underline;
}

.article-date {
float: left;
padding-left: 17px;
}

.meta-top > .article-date {
float: right;
font-size: 12px;
margin-top: 13px;
}

.article-views {
float: right;
padding-left: 20px;
}

.views-count {
font-size: 12px;
margin-right: 3px;
}

.article-text .article-meta i {
position: absolute;
font-size: 14px;
top: -1px;
left: 0;
}

.meta-top i {
font-size: 15px;
position: relative;
top: 1px;
margin-right: 5px;
}

.page-status-list {
float: right;
}

.page-status-item {
float: left;
text-align: center;
margin-left: 20px;
font-size: 12px;
color: #999;
}

.page-status-item > a {
color: #999;
}

.status-comments {
position: relative;
top: -3px;
}

.page-status-item span {
display: block;
margin-bottom: 6px;
font-size: 18px;
letter-spacing: 0;
}

.status-comments i {
position: relative;
top: 3px;
margin-right: 7px;
color: #3dbd72;
font-size: 22px;
}

.status-views i {
margin-right: 5px;
color: #f56f50;
}

/* ランク */

.popular-wrapper {
counter-reset: wpp-ranking;
}

.popular-wrapper > .article-side:before {
content: counter(wpp-ranking, decimal);
counter-increment: wpp-ranking;
position: absolute;
display: block;
top: 3px;
left: -9px;
font-size: 11px;
font-weight: 500;
text-align: center;
color: #fff;
width: 16px;
height: 16px;
line-height: 16px;
background: #CF3F70;
}

/* 記事の本文 */

.article-body {
font-size: 16px;
line-height: 1.6;
}

.article-page .article-body,
.article-body-before,
.article-body-after {
margin-bottom: 50px;
}

.article-body img {
max-width: 100%;
height: auto;
}

.article-body a {
color: #337ab7;
text-decoration: underline;
}

.article-body a:hover {
text-decoration: none;
}

.article-body h2 {
font-size: 20px;
color: #404040;
border-bottom: 2px solid #f992c1;
padding-bottom: 10px;
}

.article-body h3 {
font-size: 18px;
color: #505050;
margin-top: 10px;
}

.article-body h3:before {
content: "";
display: inline-block;
width: 10px;
height: 2px;
background: #f992c1;
position: relative;
top: -6px;
margin-right: 10px;
}

blockquote {
background: #f5f5f5 url(./img/i-quote.png) left 13px top 12px no-repeat;
padding: 30px;
color: #555;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin: 5px 0px 5px 5px; 
}

.source > a {
font-size: 11px;
color: #999;
}

.image-left {
float: left;
}

.image-left img {
max-width: 300px;
}

.image-text {
overflow: hidden;
padding-left: 15px;
line-height: 1.5;
}


/* 目次 */

.article-body #toc_container {
background: #f5f5f5 !important;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px 25px 15px;
border: 1px solid #e6e6e6;
margin: 0 0 50px;
width: 100%;
display: block;
font-size: 15px;
}

#toc_container p.toc_title {
font-size: 16px;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
color: #717171;
}

#toc_container > .toc_list > li {
position: relative;
margin-bottom: 12px;
}

.toc_list > li:before {
content: "";
display: block;
width: 10px;
height: 10px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f992c1;
position: absolute;
top: 7px;
left: 0;
}

#toc_container > .toc_list > li > ul > li {
position: relative;
margin-top: 5px;
}

.toc_list a {
display: block;
text-decoration: none;
color: #000;
}

.toc_list > li > a {
padding-left: 20px;
}

.toc_list > li > ul > li:before {
content: "";
display: block;
position: absolute;
top: 11px;
left: 15px;
width: 10px;
height: 1px;
background: #8a8a8a;
}

.toc_list > li > ul > li > a {
padding-left: 36px;
}

/* コメント一覧 */

.comment-list {
margin: -20px 0 30px;
}

.comment-item {
padding: 20px 15px;
border-bottom: 1px dotted #dcdcdc;
}

.comment-meta {
margin-bottom: 10px;
}

.comment-number,
.comment-author,
.comment-date {
float: left;
color: #999;
font-size: 11px;
line-height: 23px;
margin-right: 5px;
}

.comment-author {
color: #f992c1;
font-weight: bold;
}

.comment-body {
font-size: 14px;
line-height: 1.6;
}

.comment-reply {
float: right;
}

.comment-reply > a {
display: block;
font-size: 10px;
color: #777;
border: 1px solid #e3e3e3;
height: 23px;
line-height: 23px;
padding: 0 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.comment-reply > a:hover {
background: #f992c1;
border: 1px solid #f992c1;
color: #fff;
}

.comment-reply i {
margin-right: 5px;
}

/* コメントフォーム */

.comment-form input::-webkit-input-placeholder {
color: #999;
}
 
.comment-form input::-moz-placeholder {
color: #999;
}
 
.comment-form input:-moz-placeholder {
color: #999;
}

.comment-form input:-ms-input-placeholder {
color: #999;
}

.comment-form input,
.comment-form textarea,
.comment-form #submit-btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: 'Lato','ヒラギノ角ゴ Pro W3','メイリオ','ＭＳ Ｐゴシック',Verdana,sans-serif,Helvetica;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}

.comment-form-label {
margin-bottom: 15px;
}

.input-author,
.textarea-comment {
width: 100%;
background: #fff;
border: 1px solid #eee;
padding: 10px 13px;
display: block;
font-size: 14px;
line-height: 1.6;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
color: #222;
}

.textarea-comment {
height: 160px;
}

.input-author:focus,
.textarea-comment:focus {
background: #f9f9f9;
border: 1px solid #ddd;
}

#submit-btn {
padding: 10px 15px;
color: #fff;
background: #f992c1;
border: none;
font-size: 12px;
font-weight: normal;
}

#submit-btn:hover {
background: #F7A6CB;
}

/* 前後の記事 */

.article-prev:before,
.article-next:before {
content: "";
display: block;
position: absolute;
top: 7.5px;
left: 7.5px;
border: 14px solid transparent;
border-top-color: #F992C1;
border-left-color: #F992C1;
border-radius: 3px 0 0 0;
}

.article-label {
position: absolute;
display: block;
font-size: 11px;
font-weight: bold;
color: #fff;
top: 10px;
left: 10px;
}

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

.pagination-list {
text-align: center;
font-weight: 400;
margin-top: 15px;
}

.pagination-item {
display: inline-block;
min-width: 40px;
text-align: center;
padding: 10px;
background: #fff;
font-size: 14px;
border: 1px solid #e3e3e3;
color: #777;
margin: 0 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.pagination-num > .pagination-item {
border-right: 1px solid #e7e7e7;
}

.pagination-num > .pagination-item:first-child {
border-left: 1px solid #e7e7e7;
}

.page-current {
background: #fafafa;
border: none;
color: #333;
}

.extend {
position: relative;
top: -3px;
left: 1px;
font-size: 11px;
letter-spacing: 2.5px;
color: #999;
margin: 0 2px;
}

.pagination a:hover {
color: #86BD2B;
border-bottom: 2px solid #6A981C;
}

/* サブ */

/* カテゴリー */

.cat-list-side {
margin-top: -13px;
border-left: 1px solid #f1f1f1;
}

.cat-list-side > .cat-item {
width: 33.333333%;
float: left;
border-right: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
}

.cat-list-side > .cat-item > a {
display: block;
font-size: 13px;
color: #777;
padding: 15px 15px 15px 40px;
position: relative;
}

.cat-list-side > .cat-item > a:hover {
color: #000;
background: #f9f9f9;
}

.cat-list-side > .cat-item > a:before {
content: "\e910";
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
top: 12px;
left: 15px;
font-size: 16px;
color: #FFC1DD;
font-weight: bold;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}

.cat-list-side > .cat-item > a:hover:before {
color: #f992c1;
}

/* 検索 */

.search-header {
position: absolute;
top: 16px;
right: 100px;
}

.search-form {
position: relative;
}

.search-form > input,
.search-form > button {
font-size: 12px;
font-family: '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
height: 27px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}

.in-text {
width: 200px;
padding: 0 6px;
float: left;
background: #fff;
color: #222;
border: 1px solid #eee;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

.in-text:focus {
background: #f9f9f9;
border: 1px solid #ddd;
}

.btn-submit {
padding: 0 15px;
float: right;
background: #3F424E;
color: #fff;
border: none;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}

.btn-submit:hover {
background: #f992c1;
}

.btn-submit > i {
display: block;
height: 27px;
line-height: 27px;
font-size: 12px;
font-weight: bold;
}

.search-form input::-webkit-input-placeholder {
color: #999;
}
 
.search-form input::-moz-placeholder {
color: #999;
}
 
.search-form input:-moz-placeholder {
color: #999;
}

.search-form input:-ms-input-placeholder {
color: #999;
}

/* フッター */

.site-description {
font-size: 12px;
margin-bottom: 20px;
color: #fff;
line-height: 1.6;
text-align: left;
}

.footer-nav-list {
float: right;
}

.footer-nav-item {
float: left;
margin-left: 20px;
margin-bottom: 10px;
}

.footer-nav-item > a {
font-size: 11px;
color: #fff;
}

.footer-nav-item > a:hover {
text-decoration: underline;
}

.copyright {
clear: both;
text-align: right;
font-size: 11px;
color: #fff;
line-height: 1.6;
}

/* 相互RSS */

.blogroll-channel {
height: 308px;
overflow: auto;
}

.blogroll-list-wrap {
border-bottom: 1px dotted #dcdcdc;
}

.article-body .blogroll-list-wrap {
border-bottom: none;
}

.blogroll-list {
border-top: 1px dotted #dcdcdc;
}

.blogroll-list:first-child {
border-top: none;
}

.blogroll-ad-text > a,
.blogroll-link {
font-weight: normal;
font-size: 13px;
overflow: hidden;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 15px 10px 15px 30px;
color: #337ab7;
background: url(./img/i-rss-arrow.png) left 10px center no-repeat;
}

.blogroll-ad-text > a:hover,
.blogroll-link:hover,
.article-body .blogroll-ad-text > a:hover,
.article-body .blogroll-link:hover {
text-decoration: underline;
}

.blogroll-icon,
.blogroll-favicon,
.blogroll-hatebu,
.blogroll-link-time,
.blogroll-new-entry {
display: none;
}

.blogroll-ad-img {
padding: 10px 10px 0;
}

.blogroll-ad-default {
font-size: 13px;
padding: 10px;
}

.blogroll-ad-default > a {
color: #000;
}

/* 広告 */

.ad {
text-align: center;
}

.ad-list {
text-align: center;
vertical-align: middle;
font-size: 0;
margin: 0 -9px;
}

.ad-list2 {
text-align: center;
vertical-align: middle;
font-size: 0;
margin: 5px 0 25px 0;
}

.ad-item {
display: inline-block;
vertical-align: middle;
margin: 0 9px;
}

/* キーワード */

.s-archive > .keyword-list {
margin: -7px 0 15px;
}

.article-meta > .keyword-list {
float: left;
}

.s-side .keyword-list {
margin-top: -7px;
}

.keyword-item {
float: left;
margin-right: 7px;
}

.s-archive .keyword-item,
.s-side .keyword-item {
margin-top: 7px;
}

.keyword-item > a {
display: block;
font-size: 11px;
color: #777;
border: 1px solid #e3e3e3;
height: 28px;
line-height: 28px;
padding: 0 5px 0 25px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: relative;
}

.keyword-item > a:hover {
color: #000;
background: #f9f9f9;
border: 1px solid #ddd;
}

.keyword-item i {
position: absolute;
top: 4px;
left: 5px;
font-size: 18px;
font-weight: bold;
color: #FFC1DD;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}

.keyword-item > a:hover > i {
color: #f992c1;
}

/* アーカイブ */

.cat-description {
font-size: 13px;
line-height: 1.5;
color: #777;
margin-bottom: 10px;
}

/* アーカイブ一覧 */

/* タブ */

.tab-list {
position: relative;
}

.tab-item {
float: left;
font-size: 13px;
color: #999;
width: 88px;
height: 33px;
line-height: 33px;
text-align: center;
position: relative;
z-index: 100;
cursor: pointer;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}

.tab-latest:hover {
color: #f992c1;
}

.tab-popular:hover {
color: #e0a231;
}

.tab-item > i {
font-size: 14px;
margin-right: 5px;
font-weight: bold;
}

.tab-latest > i {
color: #f992c1;
}

.tab-popular > i {
color: #e0a231;
}

.tab-item.select {
color: #fff;
}

.tab-item.select > i {
color: #fff;
}

.bar {
display: block;
position: absolute;
top: 0;
left: 0;
width: 88px;
height: 33px;
background: #f992c1;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.bar.select {
background: #e0a231;
}

.bar:after {
content: "";
display: block;
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: #f992c1;
}

.bar.select:after {
border-top-color: #e0a231;
}

/* タブコンテンツ */

.tab-contents-list {
border-top: 1px solid #f1f1f1;
}

.tab-contents-item {
display: none;
}

.tab-contents-item.select {
display: block;
}

/* 共通のスタイル */

.adsense-middle {
display:none;
}

.mb0 {
margin-bottom: 0;
}

.more {
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 3px;
	border-radius: 6px;	
}

.more a {
    background-color: #f5f5f5;
    display: block;
    font-size: 16px;
    line-height: 30px;
    padding: 0;
    text-align: center;
    border-style:dashed;
    color:#000000;
    border-color:#f5f5f5;
    border-width:1px;
    margin-bottom: 25px;
}

.more a:hover {
    background-color: #ffc0cb;
    color:#ff1493;
    text-decoration: none;
    border-color:#ffc0cb;
    border-style:dashed;
    border-width:1px;
}

.page-page {
 width: 100%;
 text-align: center;
 margin: 50px 0 40px;
}
 
.page-page span {
 padding: 7px 10px;
 font-size: 18px;
 background: #fff;
 position: relative;
 box-shadow: 0 0 1px 2px #76abff inset;
}
 
.page-page span:before {
 content:"NOW";
 position: absolute;
 top: -120%;
 left: 0; /*追加しました*/
 width: 100%;
 display: block;
 text-align: center;
 background: #76abff;
 padding: 5px 0;
 border-radius: 7px;
 color: #fff;
 font-size: 12px;
 font-weight: bold;
}
 
.page-page span:after {
 content:"";
 top: -50%;
 border: 8px solid transparent;
 border-top-color: #76abff;
 position: absolute;
 left: 50%;
 margin-left: -8px;
}
 
.page-page a {
 text-decoration: none;
}
 
.page-page a span {
 background: #76abff;
 color: #000;
 padding: 7px 10px;
 box-shadow: none;
 font-weight: bold;
}
 
.page-page a span:before {
 content:"";
 padding: 0;
}
 
.page-page a span:after {
 border: none;
}

/* 追加しました */
.page-page span {
 opacity : 0.8;
}

.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

.ad-list3 {
text-align: center;
font-size: 0;
margin: 20px 0 20px 0;
}

.ad-list5 {
text-align: center;
font-size: 0;
margin: 5px 0 20px 0;
}


#advps_container4{    
max-width: 100% !important;
}

#advps_container4 .bx-wrapper .bx-viewport {
height: 288px !important;
}

.advps-slide img {
max-width: 100%;
display: block;
height: 290px;
object-fit: cover;
}

.bx-controls{
display: none;
}
.advps-slide:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.32) 100%);
}
.advps-excerpt-block-one .article-lead{
	display: none;
}

#advps_container4 .bx-wrapper {
    margin: 0 auto !important;
}
.breadcrumb-list{
width: 1080px;
margin-left: auto;
margin-right: auto;
}