@charset "UTF-8";

/*----------------------------------------------------------------------



ClearFix Style



----------------------------------------------------------------------*/

#post-info:after, #matome-header:after, .matome-article a:after, .matome-article .info:after,

.title-search-header:after, #post-hidden figure:after, .review-item-link:after, #post-review article:after,

.producer-recommend div:after, .column:after, #post-matome article p:before {

    content: "";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}





/*----------------------------------------------------------------------



Contents Style



----------------------------------------------------------------------*/

/*
#main, #main-container, #side, #side-container { width: 100%;}
*/

#post { padding: 0 10px;}

.fit-sidebar-fixed{

    margin-top: 0 !important;

    margin-bottom: 0 !important;

    position: fixed;

}

.fit-sidebar-blank{

    z-index: 0;

    background-color: transparent;

    visibility: hidden;

}





/*----------------------------------------------------------------------



PostContent Style



----------------------------------------------------------------------*/

#post-content { border-bottom: solid 2px #333; margin: 0 0 20px;}

#post-info {

    border-bottom: solid 1px #333;

    margin: 0 0 1px;

    padding: 20px 0;

}

#post-info ul { float: left;}

#post-info li {

    font-size: 12px;

    float: left;

    margin: 0 10px 0 0;

    padding: 4px 0;

}

#post-info .time {

    display: block;

    float: right;

    padding: 4px 0 4px 10px;

}

#post-info .here {

    border: solid 2px #e60012;

    border-radius: 3px;

    background-color: #fff;

    color: #e60012;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 0.13em;

    position: relative;

    right: -10px;

    padding: 2px 5px;

}

#post-info .here:before {

    border: solid 5px #e60012;

    border-left-color: transparent;

    border-top-color: transparent;

    content: "";

    position: absolute;

    top: 1px;

    left: -10px;

    width: 0;

    height: 0;

}

#post-info .here:after {

    border: solid 3px #fff;

    border-left-color: transparent;

    border-top-color: transparent;

    content: "";

    position: absolute;

    top: 3px;

    left: -5px;

    width: 0;

    height: 0;

}

#post-info time { font-size: 12px;}

#post-title { border-top: solid 1px #333; padding: 20px 0 0;}

#post-title h2 {

    font-size: 18px;

    margin: 0 0 20px;

}

#post-title h2 span {

    background-color: #666;

    border-radius: 3px;

    color: #fff;

    font-size: 12px;

    font-weight: normal;

    vertical-align: middle;

    display: inline-block;

    margin: 0 0 0 10px;

    padding: 4px;

}

#post-share { float: left; margin: 0 0 20px;}

#post-share li { float: left;  margin: 0 10px 0 0;}

#post-share li:first-child { display: block; float: none; margin: 0 10px 10px 0;}

#fullstory { color: #035aa9; margin: 0 0 40px; line-height: 1.8; margin-bottom: 30px; display: block;}

#desc { font-size: 14px; clear: both; margin: 0 0 5px; line-height: 1.8;}

#post-more { margin: 0 0 40px;}

#post-more a, #relation-post > a{

    box-sizing: border-box;

    background-color: #e60012;

    border-radius: 3px;

    color: #fff;

    text-align: center;

    cursor: pointer;

    display: block;

    width: 150px;

    margin: 0 auto;

    padding: 10px;

}

#headline{margin-bottom: 10px;}





/*----------------------------------------------------------------------



PostHiden Style



----------------------------------------------------------------------*/

#post-hidden {

    border-top: solid 2px #333;

    display: none;

    padding: 20px 0 40px;

}

#post-hidden hr {

    margin-bottom: 30px;

    border-style: none;

    background-color: #333;

    padding-bottom: 1px;

}

#post-hidden h3 {

    color: #e60012;

    text-align: center;

    font-size: 18px;

    margin-bottom: 20px;

}

#post-hidden h4 { font-weight: bold; }


#post-hidden p b { padding-right: 16px;}

.blue-text { color: #035aa9;}

#post-hidden h4, #post-hidden p { line-height: 1.8; margin-bottom: 20px;}

.text-center { text-align: center;}

#post-hidden figure { line-height: 0; padding-bottom: 30px;}

#post-hidden figcaption {

    background-color: #f9f9f9;

    border:solid 1px #ddd;

    padding:5px;

    font-size: 12px;

}

.video {

    clear: both;

    overflow: hidden;

    position: relative;

    margin: 0 0 20px;

    padding: 56.25% 0 0;

}

.video iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    max-width: 100%;

    height: 100%;

}

#post-hidden .column-2 { padding: 0;}

#profile {

    background-image: url('../images/g-bg.gif');

    border: solid 1px #dedede;

    margin-bottom: 20px;

    padding: 10px 5px 5px;

}

#profile div { background-color: #fff; padding: 10px; font-size: 12px;}

#profile h4 { text-align: center; margin-bottom: 10px;}

#profile h5 { margin-bottom: 5px;}

#profile p { line-height: 1.8;}



/*post-img-class*/

#post-hidden .img-left { float: left;}

#post-hidden .img-right { float: right;}

#post-hidden .img-center { max-width: 150px; margin:0 auto;}

#post-hidden .img img { width: auto; height: auto; max-height: 250px; max-width: 100%;}





/*----------------------------------------------------------------------



PostFooter Style



----------------------------------------------------------------------*/

#relation {

    border: solid 1px #e60012;

    border-radius: 3px;

    color: #e60012;

    display: inline-block;

    padding: 5px 10px;

    margin-bottom: 10px;

    font-size: 12px;

}

#post-footer h2 { font-size: 16px; margin-bottom: 5px;}

#relation-post{

    background-image: url('../images/w-bg.gif');

    border:solid 1px #dedede;

    box-sizing: border-box;

    font-size: 12px;

    margin: 0 0 20px;

    padding: 0 10px;

}

#relation-post ul a { border-bottom: solid 1px #dedede; display: table; width: 100%; padding: 10px 0;}

#relation-post ul a span { display: block;}

#relation-post ul a span:first-child { color: #999; width: 100px; margin: 0 0 5px;}

#relation-post ul { margin-bottom: 10px;}

#relation-post > a { margin-bottom: 10px;}

#relation-site li { float: left; font-size: 12px;}

#relation-site { margin-bottom: 10px;}

#relation-post a { width: 235px;}





/*----------------------------------------------------------------------



Post-Tabs Style



----------------------------------------------------------------------*/

#post-tab {

    box-sizing: border-box;

    border-bottom-width: 1px;

    border-right-width: 1px;

    width: 100%;

    margin: 0 0 10px;

}

#post-tab li {

    box-sizing: border-box;

    float: left;

    width: 20%;

    height: 35px;

    border-left: 5px solid transparent;

}

#post-tab li:first-child { border-left:none;}

#post-tab a, #post-tab span {

    box-sizing: border-box;

    text-align: center;

    display: block;

    padding: 10px 0;

    background-color: #e60012;

    border-radius: 3px;

    color: #fff;

    font-size: 12px;

}

#post-tab .active { background-color: #333;}





/*----------------------------------------------------------------------



Matome Style



----------------------------------------------------------------------*/

#matome { background-color: #e60012; margin: 0 10px 20px;}

#matome-header { padding: 10px;}

#matome-header h2 { color: #fff; font-size: 18px; float: left;}

#matome-header h2 img {

    display: inline-block;

    vertical-align: middle;

    width: 66px;

    margin: 0 10px 0 0;

}

#matome-header a {

    background-color: #fff;

    border-radius: 50%;

    color: #55acee;

    display: block;

    float: right;

    width: 20px;

    padding: 5px;

}

#matome-header .icon-M { font-size: 20px; width: 20px;}

.matome-article { border-bottom: solid 1px #dedede; margin: 0 5px;}

.pickup { border: none; margin: 0 5px 5px;}

.matome-article a { background-color: #fff; display: block;}

.matome-article .info { border: solid 1px #fff; padding: 10px;}

.matome-article .cat { font-size: 12px; float: left;}

.pickup .cat { position: relative; left: -11px;}

.pickup .cat span {

    box-sizing: border-box;

    background-color: #e60012;

    color: #fff;

    font-weight: bold;

    position: relative;

    display: inline-block;

    margin: 0 20px 0 0;

    padding: 5px;

    height: 22px;

    z-index: 1;

}

.pickup .cat span:after {

    border: solid 11px #e60012;

    border-right-color: transparent;

    content: "";

    position: absolute;

    top: 0;

    right: -11px;

    width: 0;

    height: 0;

    z-index: -1;

}

.article .time { color: #999; font-size: 10px; display: block;}

.matome-article .title {

    font-size: 12px;

    text-align: right;

    float: right;

    margin: 0;

}

.pickup .title { margin: 3px 0 0;}

.matome-article .headline { position: relative; padding: 10px; min-height: 70px;}
.pickup .headline { min-height: 75px;}
.matome-article .figure { position: absolute; top: 10px; left: 10px; width: 70px;}
.pickup .figure { width: 75px;}
.matome-article .headline div { margin: 0 0 0 80px;}
.pickup .headline div { margin: 0 0 0 85px;}

.matome-article .headline h2 { margin: 0 0 5px;}

.matome-article .time { color: #999; font-size: 10px; display: block;}

#matome-btn { padding: 10px;}

#matome-btn a {

    box-sizing: border-box;

    background-color: #333;

    border-radius: 3px;

    color: #fff;

    text-align: center;

    display: block;

    width: 150px;

    margin: 0 auto;

    padding: 15px;

}

.matome-headline{position: relative;}

.matome-headline i{position: absolute; top:13px; right: 10px; background-color: #55acee; border-radius: 50%; padding: 5px; color: #fff; }

.matome-headline h2{width: auto; display: inline-block;}



#side-container #matome article:first-child{padding-top: 5px;}

/*----------------------------------------------------------------------



Tag Cloud Style



----------------------------------------------------------------------*/

#tag-cloud {

    background-image: url('../images/g-bg.gif');

    border: solid 1px #dedede;

    margin: 0 10px 20px;

    padding: 10px 5px 5px;

}

#tag-cloud h2 { font-size: 18px; text-align: center;}

#tag-cloud h2:after {

    border-bottom: solid 1px #333;

    content: "";

    display: block;

    width: 65px;

    margin: 5px auto 10px;

}

#tags { background-color: #fff; padding: 10px;}

#tags a { line-height: 1.4;}





/*----------------------------------------------------------------------



review-post Style



----------------------------------------------------------------------*/

.m-pagenation{padding: 0 10px;}

.mp-box {

    background-image: url('../images/g-bg.gif');

    border: solid 1px #dedede;

    padding: 5px;

}

.pagenavi { background-color: #fff; padding: 5px 10px; box-sizing: border-box;}

.pagenavi {display: table; width: 100%;}

.pagenavi .prevmonth,

.pagenavi .nextmonth,

.pagenavi .thismonth{display: table-cell; width: 33.33%; vertical-align: middle;}



.pagenavi .prevmonth{text-align: left;}

.pagenavi .nextmonth{text-align: right;}

.pagenavi .thismonth{text-align: center; font-size: 16px; font-weight: bold;}



.share-buttom { float: none; margin: 0 0 10px;}

.share-buttom li { float: left;  margin: 0 10px 10px 0;}
.share-buttom li iframe { display: block; }



/*review article*/

#post-review{box-sizing: border-box; padding: 20px 10px 0px 10px;}

#post-review article{border-top: solid 2px #333; padding-top: 20px;}

#post-review article:first-child{border-top: none; padding-top: 0px;}

#post-review .img img{

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: 200px;

    margin-bottom: 10px;

}



#post-review .img{text-align: center; margin-bottom: 1px;}

#post-review figure{border-bottom: solid 1px #333; padding-bottom: 15px;}

#post-review h3{

    font-size: 18px;

    border-top: solid 1px #333;

    padding: 10px 0;

    text-align: center;

    border-bottom: solid 1px #333;

    margin-bottom: 15px;

}

#post-review h4, #post-review p{line-height: 1.8;}

#post-review h4{margin-bottom: 5px;}

#post-review > p{margin-bottom: 10px;}

#post-review > article > div > a{

    display: block;

    font-weight: bold;

    /*margin-bottom: 30px;*/

    font-size: 14px;

}

#post-review > article > div > a i{margin-left: -5px;}



.producer-recommend {

    background-color: #f6f6f6;

    border: solid 1px #e60012;

    box-sizing: border-box;

    padding:10px;

    margin-bottom: 10px;
    margin-top: 30px;

}

.producer-recommend h5 {

    color: #e60012;

    float: left;

}



.producer-recommend i{ font-size: 18px; width: 18px;}

.producer-recommend .here {

    border: solid 2px #e60012;

    border-radius: 3px;

    background-color: #fff;

    color: #e60012;

    font-size: 10px;

    font-weight: bold;

    float: left;

    position: relative;

    top: -20px;

    left: -5px;

    padding: 4px;

}

.producer-recommend .here:before {

    border: solid 5px #e60012;

    border-left-color: transparent;

    border-bottom-color: transparent;

    content: "";

    position: absolute;

    bottom: -10px;

    left: 3px;

    width: 0;

    height: 0;

}

.producer-recommend .here:after {

    border: solid 3px #fff;

    border-left-color: transparent;

    border-bottom-color: transparent;

    content: "";

    position: absolute;

    bottom: -5px;

    left: 5px;

    width: 0;

    height: 0;

}

.review-item-link a{

    display: table;

    width: 100%;

    border:solid 1px #333;

    box-sizing: border-box;

    border-radius: 3px;

    padding: 5px;

    font-size: 12px;

}



.review-item-link div{

    float: left;

    width: 50%;

    padding: 3px;

    min-height: 76px;

    box-sizing: border-box;

}



.review-item-link ul,.review-item-link i { display: table-cell;}

.review-item-link { margin: 0 -2px 10px;}



.review-item-link li { padding-top: 5px;}

.review-item-link li:first-child { font-weight: bold; padding-top: 0;}





/*----------------------------------------------------------------------



present-post Style



----------------------------------------------------------------------*/

#present-post{box-sizing: border-box; padding: 0 10px;}

#present-post article{border-top: solid 2px #333; padding-top: 20px; margin-bottom: 20px;}

#present-post article:first-child{border-top: none; padding-top: 0px;}

#present-post article h3{font-size: 18px; margin-bottom: 10px;}

#present-post article div > p:first-child{font-size: 12px; margin-bottom: 5px;}

#present-post article div > a{

    background-color: #e60012;

    color: #fff;

    text-align: center;

    padding: 8px 0;

    border-radius: 3px;

    margin-bottom: 10px;

}

#present-post figure.img {

    margin-bottom: 20px;

    text-align: center;

    overflow: hidden;

    height: 250px;

}



#present-post figure.img img{width: auto; height: 220px;}



.present-time{color: #e60012; font-weight: bold; margin-bottom: 10px;}



#present-post p{line-height: 1.8;}



#present-post .column-2{padding: 0;}





/*----------------------------------------------------------------------



matome-post Style



----------------------------------------------------------------------*/

#post-matome{padding: 0 10px; box-sizing: border-box;}

#matome-cate li{display: inline-block;}

#matome-cate li{border-left:solid 1px #333; margin-left: 10px; padding-left: 10px; font-size: 12px;}

#matome-cate li:first-child{border-left:none; margin-left: 0; padding-left: 0;}

#matome-cate{

    display: table;

    width: 100%;

    padding-bottom: 10px;

    border-bottom:solid 1px #333;

    margin-bottom: 1px;

}

#matome-cate ul,

#matome-cate p{display: table-cell; vertical-align: middle;}

#matome-cate p{text-align: right;}



#post-matome > article{border-bottom: solid 2px #333; margin: 0 0 20px; padding-bottom: 30px;}

#post-matome > article h2 { border-top: solid 1px #333; margin-bottom: 20px; padding-top: 30px; font-size: 18px;}

#post-matome > article > a{display: block; font-weight: bold; font-size: 14px;}

#post-matome > article > p{line-height: 1.6; margin-bottom: 10px;}



.matome-headline h2 img{vertical-align: middle; padding-right: 10px;}



/*----------------------------------------------------------------------



Recomme Query



----------------------------------------------------------------------*/

#recomme { width: 100%; margin: 0 auto; padding: 0 0 20px;}

#recomme-header { margin: 0 auto 20px; padding: 0 10px;}

#recomme-header hr { border: solid 1px #333; margin: 0 auto 20px;}

#recomme-header h2 { font-size: 16px;}

.article .img { height: 82px;}

.article .img img { height: 82px;}

.article-cat {

    background-color: transparent;

    font-size: 12px;

    margin: 0 0 5px;

    padding: 0;

}

#more-btn a { font-size: 14px;}





/*----------------------------------------------------------------------



Media Query



----------------------------------------------------------------------*/

@media screen and (min-width: 769px){


#main { width: 680px; float: left; background: #fff; padding-top:5px;}
/* 201803OFF

#main-container { width: 680px;}

#side { width: 340px; float: left;}

#side-container { width: 340px;}

*/

.matome-article .headline { padding: 10px; min-height: 76px;}
.pickup .headline { padding: 0 10px 10px; min-height: 90px;}
.matome-article .figure { width: 76px;}
.pickup .figure { top: 0; width: 90px;}
.matome-article .headline div { margin: 0 0 0 86px;}
.pickup .headline div { margin: 0 0 0 100px;}

#recomme { width: 1020px;}

#recomme-header h2 { font-size: 24px;}



.card { width: 25%; margin: 0 0 20px; padding: 0 10px;}

.article-cat { padding: 0;}

.article .img { height: 142px;}

.article .img img { height: 142px;}



#post-content { margin: 0 0 40px; overflow: hidden;}

#post-info li { font-size: 14px; padding: 6px 0;}

#post-info .time { padding: 6px 0 6px 10px;}

#post-info .here { padding: 5px;}

#post-title { padding: 40px 0 0;}

#post-title h2 { font-size: 24px;}

#post-title h2 span { font-size: 16px;}

#post-share { float: right;}

#post-share li { float: left; margin: 0 0 0 10px;}

#post-share li:first-child { display: list-item; float: left; margin: 0 0 0 10px;}

#desc { font-size: 18px; margin: 0 0 20px;}

#fullstory{font-size: 16px;}



#post-hidden { padding: 40px 0;}

#post-hidden h3, #post-hidden > p { margin-bottom: 30px;}

#post-hidden h4, #post-hidden > p,#post-hidden div h4, #post-hidden div > p{ font-size: 16px;}

#post-hidden h3{font-size: 20px;}

#post-hidden hr { margin-bottom: 40px;}

#post-hidden .column{margin: 0 -10px; }

#post-hidden .column-2{padding: 0 10px; }

#post-hidden .column-2 > p{margin-bottom: 40px; line-height: 1.8;}

#post-hidden .column-2 .img img{max-height: none; max-width: none; width: 100%;}

#post-hidden .column-2 .img-center, .img-big{max-width: 100%;}

#profile { padding-top: 15px;}

#profile h4 { font-size: 16px; margin-bottom: 15px;}

#profile div { font-size: 14px;}

#post-hidden #profile p { font-size: 14px; margin-bottom: 0px;}

#post-hidden .img-big img{max-height: none; max-width: none; width: 320px;}

#post-hidden .img-center{text-align: center; max-width: 320px;}



#relation { padding: 10px 20px; font-size: 14px;}

#post-footer h2 { font-size: 24px;}

#relation-site li { font-size: 14px;}

#relation-post ul a span { display: table-cell;}

#relation-post ul a span:first-child { margin: 0;}

#post-tab li {width: 100px;}

#post-tab a, #post-tab span {font-size: 14px;}



#relation-post a {width: 150px;}



#post-hidden small span{display: block;}



/*review-post*/

.thismonth span{display: inline;}

#post-review{padding:0px 10px;}

.m-pagenation{padding: 10px 10px 20px;}

.review-column-left{float: left; width: 235px; margin-right: 20px;}

.review-column-right{float: left; width: 405px;}



#post-review .img img{width: 100%; max-height: none;}



#post-review figure{border-bottom: none; margin-bottom: 10px; padding: 0;}



.review-item-link div{

    float: none;

    width: 100%;

    padding: 0px;

    margin-bottom: 5px;

    min-height: 100%;

}



.review-item-link i{font-size: 24px; width: 24px;}

.review-item-link{margin: 0 -2px 20px;}



.review-item-link li{display: inline-block;}

.review-item-link li:first-child{display: block;}



#post-review .saletime{border-bottom: solid 1px #333; margin-bottom: 1px; padding-bottom: 10px; line-height: 1;}

#post-review h3{text-align: left; padding: 20px 0;}

#post-review .blue-text{color: #333;}

#post-review > p{margin-bottom: 10px;}

#post-review > article > div > a{font-size: 12px; padding-top:10px; }



.producer-recommend h5{font-size: 16px;}

.producer-recommend p{font-size: 12px;}



#post-review article{margin-top: 30px; border-top: 2px solid #333;}

#post-review article:first-child{margin-top: 0px;}






/*present-post*/

#present-post article figure{margin-bottom: 10px;}

#present-post p{font-size: 14px; line-height: 1.6;}

#present-post div p{margin-bottom: 10px;}

#present-post article h3{font-size: 24px; margin-bottom: 15px;}

#present-post article{padding-top: 30px; margin-top: 30px; margin-bottom: 0px;}

#present-post article:first-child{margin-top: 0px;}

#present-post .column-2{padding: 0 10px; margin-bottom: 0; height:auto !important;}

#present-post .column{margin:0 -10px;}

#present-post .present-time{font-size: 16px;}

#present-post figure.img img{width: auto; height: auto; max-width: 100%; max-height: 250px;}

#present-post figure.img{height: auto; overflow: inherit;}



/*matome遶乗▼ost*/

#post-matome article { margin: 0 0 40px; overflow:hidden; }

#post-matome > article h2 { font-size: 24px;}

#post-matome .share-buttom{float: right;}

#post-matome > article > p{font-size: 16px; margin-bottom: 30px;}

#matome-cate{padding: 10px 0 20px 0;}

#headline h2 img{

    display: inline-block;

    vertical-align: middle;

    width: 88px;

    margin: 0 10px 0 0;

    }

}


/*-----------------------------------

ドリル

-----------------------------------*/
/* cmn-drill */
.cmn-drill-wrap {
	padding: 10px 10px 20px;
}

.cmn-drill-wrap .cmn-drill-box {
	margin-bottom: 50px;
}

.cmn-drill-wrap img {
    width: auto !important;
    max-width: 100% !important;
	height: auto;
}
.cmn-drill-wrap .cmn-drill-box {
    padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: dashed 2px #0883be;
}
.cmn-drill-wrap .cmn-drill-box .cmn-drill-list li {
   margin-bottom: 50px;
}
.cmn-drill-wrap .cmn-drill-box .cmn-drill-list li:last-child {
   margin-bottom: 0;
}
.cmn-drill-wrap .cmn-drill-box .drill-ttl {
    margin: 0 0 40px !important;
    line-height: 1 !important;
}
.cmn-drill-wrap .cmn-drill-box .drill-q {
    margin: 0 0 50px !important;
    line-height: 1 !important;
}
.cmn-drill-wrap .cmn-drill-box .drill-a {
    display: none;
	margin: 0 !important;
    padding-top: 50px;
    line-height: 1 !important;
}
.cmn-drill-wrap .cmn-drill-box .btn_show-a {
	margin:auto;
	text-align:center;
	position: relative;
}
.cmn-drill-wrap .cmn-drill-box .btn_show-a img {
	margin:auto;
	cursor:pointer;
   -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.cmn-drill-wrap .cmn-drill-box .btn_show-a img:hover {
	opacity:0.7;
}

/* --------------------

dot color

-------------------------------------*/
/* maeda-f-movie */
.cmn-drill-wrap.maeda-f-movie__color .cmn-drill-box {
	border-bottom: dashed 2px #FFE400;
}



@media screen and (max-width: 480px) {
}