/*
Theme Name: 食べる通信2019
Description: 食べる通信2019リニューアル
Version: 1.0.0
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
Tags: right-sidebar, custom-header, custom-menu
Text Domain: dekiru
*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

body, h1, h2, h3, h4, p, div {
/*    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; */
    font-family: Noto Sans JP;
    color: #333;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust:     100%;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

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

@media print {
    a[href]:after,
    abbr[title]:after {
        content: "" !important;
    }
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
    outline: 0;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear {
    clear: both;
    margin: 0;  
    padding: 0;
}

.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: "";
    display: table;
    table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignnone {
    margin: 5px 0;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto;
}

/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
    display: none;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
    display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
    max-width: 96%;
    padding: 10px;
    background: #eee;
    border: 1px solid #ddd;
}

.wp-caption img {
    width: auto;
    max-width: 98.5%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0 none;
}

.wp-caption p.wp-caption-text {
    margin: 0;
    padding: 5px 0;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
    margin-bottom: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}

.gallery-caption {
    display: block;
}

.sticky {
    display: block;
    overflow: hidden;
    padding: 1em;
    background-color: #f5f5f5;
}

.bypostauthor {
    color: #464646;
}

.screen-reader-text {
    display: none;
}

a:hover img {
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    opacity: 0.7;
}
/*
.wrapper {
    background-color: beige;
}
*/
.content {
    padding-top:5px;
}
.content.pc {
    padding-top: 40px;
/*    background-color: #fff; */
}
.footer-v8.pc .row {
    display: flex;
}

.post p,
.latest p {
    line-height: 2em;
    margin-bottom: 1.5em;
    font-size: 16px;
}

#sp_nav {
/*
    display: flex;
    justify-content: center;
    align-items: center;
*/
    text-align: center;
}
#sp_nav div {
    display: inline-block;
    width: 45%;
    margin: 0 2px;
    padding: 7px;
    background-color: #DCD7D7;
}
#sp_nav a {
    font-weight: bold;
    font-size: 14px;
    color: #7A7A7A;
}

#sp_textlink {
        text-align: center;
        padding: 7px;
        color: black;
        font-size: 13px;
}

.slick-prev {
    left: -25px;
}
.slick-next {
    right: -25px;
}

#pickup,
#latest-content {
    margin-bottom: 30px;
}
#pickup h2 {
    background-color: #BE0008;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    text-align: center;
}
#pickup .latest-block .eyecatch {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}
#pickup .latest-block {
    position: relative;
}
#pickup .latest-block .caption {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.43);
}
#pickup .latest-block .caption .excerpt {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
}
#pickup .latest-block .caption .info {
    margin: 0;
    font-size: 12px;
    color: #fff;
    text-align: right;
}
#pickup .latest-block .caption .info .author {
    margin-right: 10px;
}

/*PC用*/
.pc #pickup h2 {
    margin-bottom: 30px;
    background-color: #fff;
    color: #be0008;
    font-size: 32px;
}
.pc #pickup .latest-block .eyecatch {
    width: 480px;
    height: 360px;
    border: 2px solid #be0008;
    background-size: cover;
    background-position: center;
}
.pc #pickup .latest-block .caption {
    width: 680px;
    top: 20px;
    bottom: 20px;
    right: 0px;
    padding: 30px;
    background-color: #be0008;
}
.pc #pickup .latest-block .caption .excerpt {
    font-size: 28px;
    line-height: 48px;
}
.pc #pickup .latest-block .info-block {
    position: initial;
}
.pc #pickup .latest-block .info-block:after {
    clear: both;
    float: none;
    content: ' ';
    display: table;
}
.pc #pickup .latest-block .info-block .info {
    float: left;
    width: 65%;
    position: absolute;
    bottom: 30px;
    font-size: 16px;
    text-align: left;
}
.pc #pickup .latest-block .info-block .info .readmore {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 5px 10px;
    background-color: #fff;
    font-weight: bold;
    font-size: 16px;
    color: #be0008;
    text-align: center;
}
.pc #pickup .latest-block .info-block .subthumb {
    float: right;
/*    width: 30%; */
    height: 150px;
    width: 150px;
    background-size: cover;
    background-position: center;
}

.extraction {
    text-align: center;
}
.extraction .subtitle {
    display: inline-block;
    margin: 10px 0;
    padding: 5px 10px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 16px;
    font-weight: bold;
    color: #7a7a7a;
}
.extraction .extract-list {
    width: 100%;
    overflow-x: scroll;
}
.extraction ul {
    margin-bottom: 20px;
    padding: 5px 20px;
    white-space:nowrap;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 -1px 3px 0 rgba(0,0,0,0.5);
    overflow-x: scroll;
}
.extraction li {
    display: inline-block;
    margin-right: 20px;
}
.extraction li.isCurrent {
    background-color: #be0008;
    border-radius: 5px;
}
.extraction li a {
    padding: 3px 5px;
    font-size: 14px;
    color: #000;
    text-decoration: none;
}
.extraction li.isCurrent a {
    color: #fff;
}

/* PC用 */
.pc .extraction {
    text-align: left;
}
.pc .extraction .extract-list {
    display: inline-block;
}
.pc .extraction .extract-list ul {
    display: inline-block;
    padding: 0px 20px;
    box-shadow: none;
    overflow-x: initial;
}

#latest-content:after {
    clear: both;
    float: none;
    content: ' ';
    display: table;
}
#latest-content .latest-block {
    float: left;
    width: 50%;
    margin: 0 0 5px;
}
#latest-content .latest-block:nth-child(odd) {
    padding-right: 3px;
}
#latest-content .latest-block:nth-child(even) {
    padding-left: 3px;
}
#latest-content .latest-block .latest-block-img {
    width: 100%;
    height: auto;
    padding-top: 65%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}
#latest-content .latest-block .caption {
    padding: 10px;
    background-color: #BE0008;
}
#latest-content .latest-block .caption .excerpt-block {
    height: 60px;
}
#latest-content .latest-block .caption .excerpt {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 13px;
    color: #fff;
}
#latest-content .latest-block .caption .author-block {
    height: 40px;
}
#latest-content .latest-block .caption .price-block {
    height: 20px;
}
#latest-content .latest-block .caption .author,
#latest-content .latest-block .caption .price {
    height: 20px;
    margin-bottom: 5px;
    font-size: 11px;
    color: #fff;
}
#latest-content .noitem {
    text-align: center;
}
.price {
    background: none;
}

#latest-content #more_disp,
#news #more_disp,
#reading #more_disp,
#ranking #more_disp {
    margin: 20px 0;
    text-align: center;
}
#latest-content #more_disp a,
#news #more_disp a,
#reading #more_disp a,
#ranking #more_disp a {
    padding: 10px 100px;
    border: 1px solid #be0008;
    border-radius: 3px;
}

/* PC用 */
.pc #latest-content .latest-block {
    float: none;
    width: 100%;
    margin-bottom: 40px;
    padding: 0;
}
.pc #latest-content .latest-block:after {
    clear: both;
    float: none;
    content: ' ';
    display: table;
}
.pc #latest-content .latest-block a {
    display: block;
}
.pc #latest-content .latest-block a:hover {
    opacity: 0.7;
}
.pc #latest-content .latest-block .latest-block-img {
    float: left;
    width: 300px;
    height: 200px;
    margin-right: 40px;
    padding-top: 0;
    background-size: cover;
}
.pc #latest-content .latest-block .caption {
    float: left;
    width: 55%;
    background-color: #fff;
}
.pc #latest-content .latest-block .caption .excerpt-block,
.pc #latest-content .latest-block .caption .author-block,
.pc #latest-content .latest-block .caption .price-block {
    height: auto;
}
.pc #latest-content .latest-block .caption .excerpt {
    font-size: 24px;
    color: #000;
}
.pc #latest-content .latest-block .caption .author,
.pc #latest-content .latest-block .caption .price {
    margin-bottom: 5px;
    font-size: 14px;
    color: #000;
}
.pc #latest-content .latest-block .info {
    float: left;
    width: 65%;
}
.pc #latest-content .latest-block .info .readmore {
    display: inline-block;
    margin: 10px 0;
    padding: 5px 10px;
    background-color: #be0008;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    text-align: center;
}
.pc #latest-content .latest-block .subthumb {
    float: right;
    width: 150px;
    height: 150px;
    margin-top: 25px;
    background-size: cover;
    background-position: center;
}

#news {
    clear: both;
}
#news h2 {
    border-bottom: 1px solid #666;
    font-weight: bold;
    font-size: 18px;
    color: #000;
    text-align: center;
}
#news .news-content,
#reading .news-content {
    margin-bottom: 20px;
}
#news .news-content h3 {
    margin: 0;
    padding: 18px 0;
    background-color: #BE0008;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    text-align: center;
}
#news .news-content .news-block,
#reading .news-content .news-block {
    position: relative;
}
#news .news-content .news-block .news-block-title,
#reading .news-content .news-block .news-block-title {
    font-size: 16px;
    color: #888;
}
#news .news-content .news-block .news-block-img,
#reading .news-content .news-block .news-block-img {
    width: 100%;
    height: auto;
    padding-top: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}
#news .news-content .news-block .caption,
#reading .news-content .news-block .caption {
/*    position: absolute; */
    width: 100%;
    height: 110px;
/*    bottom: 10px; */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.43);
}
#news .news-content .news-block .caption .excerpt,
#reading .news-content .news-block .caption .excerpt {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
}
#news .news-content .news-block .news-block-meta,
#reading .news-content .news-block .news-block-meta {
    padding: 0px 10px;
}
#news .news-content .news-block .news-block-meta .author,
#reading .news-content .news-block .news-block-meta .author {
    float: left;
    width: 50%;
    padding: 0 10px;
    color: #be0008;
}
#news .news-content .news-block .news-block-meta .date,
#reading .news-content .news-block .news-block-meta .date {
    float: right;
    width: 50%;
    padding: 0 10px;
    text-align: right;
    color: #be0008;
}

.pc #news {
    margin: 30px 0 0 0;
    border: none;
}
.pc #news h2 {
    margin: 20px;
    border: none;
    font-size: 32px;
    color: #be0008;
}
.pc #news .news-content {
    clear: both;
    float: none;
}
.pc #news .news-content h3 {
    background-color: #fff;
    color: #000;
    font-size: 24px;
    text-align: left;
}
.pc #news .news-content h3:before {
    content: '■';
}
.pc #news .news-content h3 a {
    position: relative;
    float: right;
    color: #be0008;
}
.pc #news .news-content .news-block {
    float: left;
    width: 48%;
    margin: 10px;
}

#archive-latest h1 {
    background-color: #BE0008;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    text-align: center;
}
.btn_subscribe {
    margin-top: auto;
    text-align: center;
}
.btn_subscribe button {
    padding: 0;
    margin: 0;
    border: none;
    background: inherit;
}
.btn_subscribe a {
    display: block;
    background-color: #be0008;
    border-radius: 5px;
    padding: 10px 30px;
    font-size: 24px;
    color: #fff;
    text-decoration: none;
}

#footerfloating {
    display: flex !important;
    width: 100%;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999;
    padding: 10px;
    background-color: #eee;
    align-items: center;
    justify-content: center;
    box-shadow: 0 -3px 5px 0 rgba(0,0,0,0.5);
}
#footerfloating .price {
    background: none !important;
    font-size: 14px;
    margin: auto;
}
.pc #footerfloating .price {
    font-size: 24px;
}
#footerfloating .footersubscribe a {
    margin-left: 40px;
    background-color: #be0008;
    border-radius: 5px;
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 24px;
    color: #fff;
    text-decoration: none;
}

.slick-prev, .slick-next {
    width: 40px;
    height: 40px;
}
.slick-prev:before, .slick-next:before {
    color: #be0008;
}

@media (max-width: 768px) {
    .header-v8 {
        box-shadow: none;
    }
    .header-v8 .navbar-brand {
        margin: 0 0 0 50px;
    }    
}
.header-v8 .navbar {
    min-height: 60px;
}
.header-v8 .mega-menu .nav {
    bottom: -10px;
}

.header-v8 .navbar-nav > li > a {
    font-size: 20px;
}
.header-sp .navbar-nav > li > a {
    font-size: 16px;
}
.header-v8 .navbar-nav > li:first-child > a:before {
    content: '今申し込める';
    position: absolute;
    top: -10px;
    left: -20px;
    font-size: 12px;
    color: #be0008;
}
.header-sp .navbar-nav > li:first-child > a:before {
    content: '';
}

.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.nav:before,
.navbar-collapse:before {
    display: table;
    content: " ";
}
.nav:after,
.navbar-collapse:after {
    clear: both;
    display: table;
    content: " ";
}
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}
.navbar-default .navbar-nav > .active > a {
    background-color: inherit;
} 
/*
@media (max-width: 991px) {
    .header-v8 .navbar-nav > li > a {
        font-size: 12px;
    }
}
*/

header {
  padding:10px;
  background: skyblue;
}

#nav-drawer {
  position: relative;
  float: right;
  top: 30px;
}

.nav-unshown {
  display:none;
}

#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 90%;
  max-width: 330px;
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(105%);
  transform: translateX(105%);
}

#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#menu-main-menu li:nth-child(n+3) a {
    font-size: 0.8em;
}

/*インスタグラム*/
.insta_btn3 {/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 14px;/*角丸に*/
  position: relative;
  display: block;
  height: 120px;/*高さ*/
  width: 120px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  padding-top: 12px;/*上側との余白*/
  box-sizing: border-box;
  font-size: 19px;/*文字のサイズ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn3:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn3 div {
  position: relative;
}

.insta_btn3 .fa-instagram {
    font-size: 70px;/*アイコンサイズ*/
    position: relative;
    display:inline-block;
    transition: .5s
}

.insta_btn3 .fa-instagram:hover {/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

#mobile_logo {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 10px 0;
    height: 60px;
}

#head-search-form {
    display: inline-block;
    margin: 10px 5%;
}
#head-search-form input[type=text] {
    width: 80%;
    border-color: #be0008;
}
#head-search-form input {
    font-size: 12px;
}

.gnav {
  width: 100%;
  height: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 5px solid #be0008;
}
.gnav ul {
  height: 40px;
  margin: 0 auto 2px auto;
  padding: 0;
  list-style: none;
  display: flex;
}
.gnav ul li {
  text-align: center;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
}
.gnav ul li:last-child {
  margin-right: 0;
}
.gnav ul li a,
.gnav ul li a:link,
.gnav ul li a:visited {
  display: inline-block;
  width: 96px;
  height: 40px;
  line-height: 3em;
  color: #000;
  font-size: 10px;
  text-decoration: none;
}
.gnav ul li:first-child a {
    font-size: 20px;
    line-height: 1.5em;
}

.gnav ul li a:hover,
.gnav ul li a:active {
  background: #afc6e2;
  color: #fff;
}
.gnav::-webkit-scrollbar {
  height: 2px;
}
.gnav::-webkit-scrollbar-track {
  margin: 0 2px;
  background: #ccc;
  border-radius: 5px;
}
.gnav::-webkit-scrollbar-thumb {
  background: #d49fc2;
  border-radius: 5px;
}

.front-page-top {
    margin-bottom: 5px;
    padding: 3px;
    border: 2px solid #000;
}
.front-page-top p {
    margin: 0;
}

.front-page-top.pc {
    padding: 0;
    margin-top: -35px;
    border: none;
}

.front-page-bottom {
    text-align: center;
    padding: 7px;
     margin-bottom: 10px;
}

.front-page-bottom p {
    color: #be0008;
}

.front-page-bottom.pc p {
    display: inline-block;
    padding: 3px 20px;
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
    font-weight: bold;
    font-size: 16px;
}

.front-page-bottom.pc p a {
    color: #000;
}

.latest h2,
.backnumber h2 {
    padding-left: 5px;
    border-left: 10px solid #999;
    font-weight: bold;
}
.latest h3,
.backnumber h3 {
    font-weight: bold;
    color: #888;
    text-align: center;
}
.latest h3 span,
.backnumber h3 span {
    padding: 5px 20px;
    border-bottom: 2px solid #ccc;
}
.latest ul,
.backnumber ul {
    padding-left: 10px;
}
.latest li,
.backnumber li {
    list-style-type: none !important;
    list-style-image: none !important;
    margin: 5px 0px 5px 0px !important;
    position: relative;
    padding-left: 20px;
}
.latest li:after,
.backnumber li:after {
    content: '';
    display: block;
    position: absolute;
    background: #aaa;
    width: 9px;
    height: 9px;
    top: 5px;
    left: 5px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}
.latest .closing,
.backnumber .closing {
    font-weight: bold;
    font-size: 18px;
    color: #e74c3c;
    text-align: center;
}
.latest .howto,
.backnumber .hawto {
    text-align: center;
}
.latest .howto a,
.backnumber .howto a {
    display: inline-block;
    padding: 5px 10px;
    background: #be0008;
    color: #fff;
}
.latest .howto a:hover,
.backnumber .howto a:hover {
    text-decoration: none;
}
.latest .aboutus,
.backnumber .aboutus {
    padding: 5px;
    border-top: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
    font-weight: bold;
    font-size: 24px;
}
.latest .subtitle,
.backnumber .subtitle {
    font-size: 18px;
    color: #999;
    text-align: center;
}
.bookListSingle .manage_title {
    border-left: 10px solid #999;
    padding-left: 5px;
    font-weight: bold;
}

#backnumber {
    margin: 20px 0;
}
#backnumber:after {
    clear: both;
    float: none;
    content: ' ';
    display: table;    
}
#backnumber .latest-block {
    float: left;
    width: 50%;
    margin: 0 0 5px;
}
#backnumber .latest-block:nth-child(odd) {
    padding-right: 3px;
}
#backnumber .latest-block:nth-child(even) {
    padding-left: 3px;
}

#backnumber .latest-block .latest-block-img {
    width: 100%;
    height: auto;
    padding-top: 65%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}
#backnumber .latest-block .caption {
    padding: 10px;
    background-color: #BE0008;
}
#backnumber .latest-block .caption .excerpt-block {
    height: 60px;
}
#backnumber .latest-block .caption .excerpt {
    margin-bottom: 5px;
    line-height: 1.5em;
    font-weight: bold;
    font-size: 13px;
    color: #fff;
}
#backnumber .latest-block .caption .author-block {
    height: 40px;
}
#backnumber .latest-block .caption .price-block {
    height: 20px;
}
#backnumber .latest-block .caption .author,
#backnumber .latest-block .caption .price {
    margin-bottom: 5px;
    font-size: 11px;
    color: #fff;
}
#backnumber .noitem {
    text-align: center;
}
.backnumber_link {
    margin: 10px 0 30px;
    text-align: center;
}
.backnumber_link a {
    padding: 5px 10px;
    background: #be0008;
    color: #fff;
}
.backnumber_link a:hover {
    text-decoration: none;
}

#reading h2,
#ranking h2 {
    background-color: #BE0008;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    text-align: center;
}

#recommend {
    margin-bottom: 30px;
}
#recommend h2 {
    border-bottom: 1px solid #666;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-align: center;
}
#recommend .recommend-block {
    position: relative;
}
#recommend .recommend-block .eyecatch {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}
#recommend .recommend-block .caption {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.76);
}
#recommend .recommend-block .caption .excerpt {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
}
#recommend .recommend-block .info .author {
    float: left;
    width: 50%;
    padding: 0 10px;
    color: #fff;
}
#recommend .recommend-block .info .date {
    float: right;
    width: 50%;
    padding: 0 10px;
    text-align: right;
    color: #fff;
}

.front-page-widget {
    border-top: 1px solid #be0008;
    border-bottom: 1px solid #be0008;
    margin: 30px 0;
}
.front-page-widget .title {
    color: #999;
    text-align: center;
}