@charset "UTF-8";

@media screen and (max-width: 768px) {
.article {
margin: 30px 11px 0;
}

/*
 上部タイトル部分
======================================== */
.article-heading .article-title {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
}
.article-heading .topics-date {
    color: #999999;
    font-family: "Roboto",sans-serif;
    font-weight: bold;
    margin: 5px 0;
}
.article-heading .topics-category {
background: #000;
    color: #ffffff;
    font-size: 1rem;
    padding: 2px 10px
    text-align: center;
}
.info-list-lower {
border-top: 1px solid #cccccc;
}
.article-heading .button-list .list-item {
    display: inline-block;
    margin: 6px 6px 0 0;
}
.article-heading .button-list .list-item a {
    background-color: #eeeeee;
    border-radius: 20px;
    color: #000000;
    display: block;
    font-size: 1.1rem;
    line-height: 1.1;
    padding: 3px 10px;
}
.article-heading .sns {
    float: right;
    margin-top: 1rem;
}
.article-heading .sns-item:first-child {
    margin-left: 0;
}
.article-heading .sns-item {
    float: left;
    margin-left: 5px;
}
.article .sns .sns-item > iframe {
    vertical-align: top;
  }
.article .sns .fb-share-button > span {
    vertical-align: top !important;
  }


/*  KeyPerson / インタビュー 用  */

.article__interview__photo img {
width: 100%;
margin-top: 15px;
}
.article__interview__inner {
margin: 20px 20px 45px;
display: table;
}
.article__interview__icon {
display: table-cell;
width: 95px;
}
.article__interview__icon img {
width: 100%;
}
.article__interview__info {
display: table-cell;
padding-left: 20px;
vertical-align: top;
}
.article__interview__company {
font-size: 1.2rem;
font-weight: bold;
line-height: 1.3;
}
.article__interview__name {
font-size: 1.8rem;
font-weight: bold;
margin: 5px 0;
}
.article__interview__media {
font-size: 1rem;
}

/*  KeyPerson / 眼光紙背  */
.eyesRead {
  border-top: solid 1px #000;
  position: relative;
  margin-top: 40px;
    font-size: 1.4rem;
  padding: 20px 0;
}

  .eyesRead-heading {
    display: inline-block;
    border-right: solid 1px #000;
    border-left: solid 1px #000;
    font-weight: bold;
    letter-spacing: .1em;
    padding: 0 10px 0 12px;
    position: absolute;
    top: -13px;
left: 50%;
margin-left: -100px;
    background-color: #fff;
  }


/*  Profile & Company */
.profile {
border: 1px solid #000;
padding: 10px;
margin-top: 15px;
}
.profile__heading__outer {
display: table;
}
.profile__heading {
display: table-cell;
font-family: 'Roboto', sans-serif;
letter-spacing: .1em;
font-size: 1.2rem;
font-weight: bold;
}
.profile__title {
display: table-cell;
font-size: 1.8rem;
font-weight: bold;
padding-left: 10px;
line-heiht: 1;
}
.profile__summary {
font-size: 1.4rem;
}



/*
 記事部分
======================================== */
.article-body {
margin-top: 25px;
}
.article-body h2 {
  margin: 2rem 0;
  padding: 2px 0 4px .5em;
  border-left: 2px solid #000;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.5;
}
.article__issueNumber {
font-size: 1rem;
border: 1px solid #000;
display: inline-block;
padding: 0 6px;
margin-bottom: 10px;
}
.article-body img {
    max-width: 100%;
}

/*
 下部シェア部分
======================================== */
.share-button {
  margin: 2rem 0;
  text-align: center;
}
  .share-button .share-item {
    width: 45%;
    height: 40px;
    display: inline-block;
    font-weight: bold;
    line-height: 40px;
  }
    .share-button .share-item:first-child {
      margin-right: 5px;
    }
    .share-button .share-item a {
      display: block;
      color: #fff;
    }
    .share-button .share-item.tweet {
      background-color: #1b95e0;
    }
    .share-button .share-item.fb {
      background-color: #4460ae;
    }

/*
 外部リンク
======================================== */
.relation-topics a,
.external-link a {
color: #0f46c8;
}
.external-link .link-list {
margin-top: 10px;
}
.article-bottom .relation-topics, .article-bottom .external-link {
  margin-bottom: 10px;
}

.article-bottom .relation-topics .list-item {
  margin-top: .5em;
}
  .article-bottom .relation-topics .list-item:first-child {
    margin-top: 0;
  }
  .article-bottom .relation-topics .list-item::before {
    margin-right: .5em;
    color: #aaa;
    content: "―";
  }

.article-bottom .external-link .list-item {
  margin-top: .5em;
  padding: 0 1rem;
}
  .article-bottom .external-link .list-item:first-child {
    margin-top: 0;
  }
  .article-bottom .external-link .list-item .icon-window {
    padding-left: 1.5em;
    display: inline-block;
    position: relative;
  }
    .article-bottom .external-link .list-item .icon-window::before {
      width: 10px;
      height: 10px;
      display: inline-block;
      background: url(/files/user/sp/images/icon-window.png?v=1491284089) no-repeat center;
      background-size: 100%;
      content: "";
      position: absolute;
      left: 0;
      top: 6px;
    }


/*
 週刊BCN
======================================== */
.weeklyContents__heading {
margin: 20px 20px 0;
display: table;
}
.weeklyContents__cover {
display: table-cell;
width: 110px;
}
.weeklyContents__cover img {
width: 100%;
}
.weeklyContents__info {
display: table-cell;
padding-left: 20px;
}
.weeklyContents__new {
background: #c42714;
color: #fff;
display: inline-block;
padding: 0 5px;
font-size: 1.2rem;
font-weight: bold;
}
.weeklyContents__backnumber__date {
font-size: 1.1rem;
font-weight: bold;
margin: 5px 0;
}
.weeklyContents__backnumber__vol {
font-size: 2rem;
line-height: 1;
font-weight: bold;
}
.weeklyContents__feature__category {
margin: 20px 0 10px;
background: #000;
color: #fff;
display: inline-block;
padding: 3px 8px;
font-size: 1rem;
line-height: 1;
font-weight: bold;
font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}
.weeklyContents__feature__title {
font-size: 1.2rem;
line-height: 1.4;
}

/*  PR  */

.topicsList__news__list {
background: #eee;
margin: 30px 20px 0;
padding: 20px;
}

/*  一覧  */

.section-topics {
margin: 30px 20px 0;
}
.topics-category {
background: #000;
color: #fff;
display: inline-block;
padding: 3px 8px;
font-size: 1rem;
}
.topics-title {
font-size: 1.4rem;
margin-top: 10px;
line-height: 1.4;
}
.news-item:not(:last-child) {
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
margin-bottom: 20px;
}


/*
 記事ページャ
======================================== */

  .article-body .next-page-title {
    margin-top: 50px;
    position: relative;
    text-align: center;
  }
    .article-body .next-page-title span {
      font-weight: bold;
    }
      .article-body .next-page-title span::before {
        content: "　";
      }
    .article-body .next-page-title .fa {
      margin-left: 15px;
      position: absolute;
      top: 50%;
      -webkit-transform: translate(0, -50%);
              transform: translate(0, -50%);
            }
  .article-body .article-pager {
    margin: 40px 0 30px;
    height: 44px;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
  .series-topics .article-pager {
    margin: 40px 12px 30px;
    height: 44px;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
    .article-body .article-pager .page {
      display: inline-block;
      position: relative;
      vertical-align: middle;
    }
      .article-body .article-pager .page::before {
        width: 1px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translate(0, -50%);
                transform: translate(0, -50%);
        vertical-align: middle;
        background-color: #ccc;
        content: "";
      }
      .article-body .article-pager .page:first-child::before {
        content: none;
      }
      .article-body .article-pager .page a {
        margin: 0 1em;
        padding: 0 1em;
        font-weight: bold;
      }
      .article-body .article-pager .page.cur span {
        margin: 0 1em;
        border-radius: 20px;
        width: 40px;
        height: 40px;
        display: block;
        font-weight: bold;
        line-height: 40px;
        background-color: #eee;
      }
    .article-body .article-pager .pager-prev, .article-body .article-pager .pager-next,
    .series-topics .article-pager .pager-prev, .series-topics .article-pager .pager-next {
      margin-top: 0;
      margin-bottom: 0;
      position: absolute;
      top: 0;
    }
    .article-body .article-pager .pager-prev,
    .series-topics .article-pager .pager-prev {
      margin-left: 18px;
      left: 0;
    }
    .article-body .article-pager .pager-next,
    .series-topics .article-pager .pager-next {
      margin-right: 18px;
      right: 0;
    }
    .article-body .article-pager .pager-prev a, .article-body .article-pager .pager-next a,
    .article-body .article-pager .month-pager .prev a, .month-pager .prev .article-body .article-pager a,
    .article-body .article-pager .month-pager .next a, .month-pager .next .article-body .article-pager a,
    .series-topics .article-pager .pager-prev a, .series-topics .article-pager .pager-next a {
      padding: 0 20px;
      border: 2px solid #000;
      height: 44px;
      display: inline-block;
      position: relative;
      font-weight: bold;
      line-height: 42px;
      text-decoration: none;
      background-color: #fff;
    }
    .article-body .article-pager .pager-prev a,
    .series-topics .article-pager .pager-prev a {
      border-left: none;
    }
      .article-body .article-pager .pager-prev a::before,
      .series-topics .article-pager .pager-prev a::before {
        border-top: 24px solid transparent;
        border-right: 18px solid #000;
        border-bottom: 24px solid transparent;
        border-left: 24px solid transparent;
        display: inline-block;
        position: absolute;
        top: -4px;
        left: -41px;
        content: "";
      }
      .article-body .article-pager .pager-prev a::after,
      .series-topics .article-pager .pager-prev a::after {
        border-top: 20px solid transparent;
        border-right: 15px solid #fff;
        border-bottom: 20px solid transparent;
        border-left: 20px solid transparent;
        display: inline-block;
        position: absolute;
        top: 0;
        left: -34px;
        content: "";
      }
      .article-body .article-pager .pager-prev a:hover,
      .series-topics .article-pager .pager-prev a:hover {
        border-color: #c42714;
      }
        .article-body .article-pager .pager-prev a:hover::before,
        .series-topics .article-pager .pager-prev a:hover::before {
          border-right-color: #c42714;
        }
    .article-body .article-pager .pager-next a,
    .series-topics .article-pager .pager-next a {
      border-right: none;
    }
      .article-body .article-pager .pager-next a::before,
      .series-topics .article-pager .pager-next a::before {
        border-top: 24px solid transparent;
        border-right: 24px solid transparent;
        border-bottom: 24px solid transparent;
        border-left: 18px solid #000;
        display: inline-block;
        position: absolute;
        top: -4px;
        right: -41px;
        content: "";
      }
      .article-body .article-pager .pager-next a::after,
      .series-topics .article-pager .pager-next a::after {
        border-top: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 15px solid #fff;
        display: inline-block;
        position: absolute;
        top: 0;
        right: -34px;
        content: "";
      }
      .article-body .article-pager .pager-next a:hover,
      .series-topics .article-pager .pager-next a:hover {
        border-color: #c42714;
      }
        .article-body .article-pager .pager-next a:hover::before,
        .series-topics .article-pager .pager-next a:hover::before {
          border-left-color: #c42714;
        }



/*
 会員登録
======================================== */
.article-regist {
  margin: 20px 0;
  padding: 15px;
  background-color: #f5f5f5;
}
  .article-regist .title {
    margin-bottom: 10px;
    font-weight: bold;
    line-height: 1.4;
  }
    .article-regist .title a {
      color: #0f46c8;
    }
  .article-regist .member-menu {
    margin-bottom: 10px;
    width: 100%;
    display: table;
  }
    .article-regist .member-menu li {
      width: 50%;
      display: table-cell;
      text-align: center;
    }
    .article-regist .member-menu a {
      padding: 15px 0;
      display: block;
      color: #fff;
    }
    .article-regist .member-menu .menu-login a {
      background-color: #000;
    }
    .article-regist .member-menu .menu-register a {
      background-color: #0f46c8;
    }
  .article-regist .attention {
    font-size: 11px;
    /* font-size: 1.1rem; */
  }
  .article-regist .menu-pay a {
    color: #fff;
    background-color: #0f46c8;
  }
    .article-regist .menu-pay a:hover {
      color: #fff;
      text-decoration: none;
      background-color: #2963eb;
    }

/*
 オススメの記事
======================================== */
.recommendList {
margin: 20px 20px 0;
}
.recommend-title {
  margin-bottom: 15px;
  position: relative;
  font-size: 1.4rem;
  text-align: center;
}
  .recommend-title::before {
    width: 100%;
    height: 1px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #ccc;
    content: "";
  }
  .recommend-title span {
    padding: 0 1em;
    position: relative;
    z-index: 10;
    background-color: #fff;
  }
    .recommend-title span::before, .recommend-title span::after {
      width: 1px;
      height: 20px;
      display: inline-block;
      position: absolute;
      top: 0;
      background-color: #ccc;
      content: "";
    }
    .recommend-title span::before {
      left: 0;
      -webkit-transform: rotate(-30deg);
              transform: rotate(-30deg);
            }
    .recommend-title span::after {
      right: 0;
      -webkit-transform: rotate(30deg);
              transform: rotate(30deg);
            }

.recommendList__item {
padding-bottom: 20px;
}
.recommendList__item__inner {
display: table;
width: 100%;
}
.recommendList__thumb {
display: table-cell;
width: 90px;
height: 90px;
}
.recommendList__thumb img {
width: 90px;
height: 90px;
object-fit: cover;
}
.recommendList__title {
padding-left: 15px;
color: #0f46c8;
}
.recommendList__title h3 {
font-weight: normal;
}


/*   有料会員申し込み  */
.order_submit-container {
    margin-bottom: 5%;
}
.order_submit-container {
    margin-top: 10px;
    text-align: center;
}
.order_submit {
    width: 65%;
    background-color: #000;
    color: #fff;
}
.order_submit {
    margin: 0 5px;
    padding: 10px;
    border: none;
    border-radius: 0;
    min-width: 45%;
    display: inline-block;
    font-weight: bold;
}

/* 記事詳細用：SNS・お気に入りボタン ---------- */
.sns-item .icon {
    display: table-cell;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
    background-color: #000;
}

.sns-item .icon__link{
    display: table;
    padding: 0px 8px 0px 6px;
    width: 100%;
    height: 100%;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    cursor:pointer;
}

.sns-item .icon--bookmark {
    background-color: #c42714;
}

.sns-item .icon--bookmark:hover {
    animation-duration: 0.001s;
    background-color: #af2312;
}

.sns-item .icon.-none{
    display: none;
    background-color: #999;
}

.sns-item .icon__link{
    display: block;
    padding: 0px 8px 0px 6px;
    height: 100%;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor:pointer;
}

.sns-item .icon__link:hover{
    text-decoration: none;
}

.sns-item .icon .fa{
    display: inline-block;
    font-size: 14px;
    color: #fff;
    padding: 0 1px;
    text-rendering: auto;
    line-height: 20px;
}

.sns-item .icon__txt {
    font-family: Helvetica, Arial, "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;
    font-size: 11px;
    color: #fff;
    line-height: 20px;
    vertical-align: middle;
    margin: 0 auto;
}

.sns-item .icon.-none .fa,.sns-item .icon.-none .icon__txt {
    color: #eee;
}

.sns-item .rcms_fav_btn.added .icon.-none{
    animation-duration: 0.1s;
    display: block;
}

.sns-item .rcms_fav_btn.added .icon{
    animation-duration: 0.1s;
    display: none;
}
}