@charset "UTF-8";
/* by Hideki Yamanoi 2018 */
/*! reset.scss Copyright 2014@Tomohiro IKEDA */
html, body, div, rankingBlock
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dt, dd,
table, th, td,
form, fieldset,
header, section, article, aside, footer, figure,
figcaption, nav {
  margin: 0px;
  padding: 0px; }

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

@viewport {
  width: extend-to-zoom 100%;
  zoom: 1;
  user-zoom: zoom; }
img {
  max-width: 100%; height: auto;}

input, textarea, select, button {
  outline: none; }

label,
select,
[type="button"],
[type="checkbox"],
[type="radio"],
[type="submit"],
[type="reset"],
[type="file"],
[type="number"] {
  cursor: pointer; }

html {
  overflow: scroll;
  overflow: -moz-scrollbars-vertical;
  overflow-x: scroll;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; }

ul, ol {
  list-style: none; }

p, li, dt, dd, th, td, pre {
  -ms-line-break: strict;
  line-break: strict;
  -ms-word-break: break-strict;
  word-break: break-strict; }

p {
  margin: 0 0 1em 0; }

table {
  border-collapse: collapse;
  border-spacing: 0px; }

img {
  border: none;
  vertical-align: middle; }

/* Flashing */
a:hover img {
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s; }

@-webkit-keyframes flash {
  0% {
    opacity: .4; }
  100% {
    opacity: 1; } }
@keyframes flash {
  0% {
    opacity: .4; }
  100% {
    opacity: 1; } }
a {
  color: #333;
  text-decoration: none; }
  a:hover {
    text-decoration: none; }

.cfx::after {
  content: " ";
  display: block;
  clear: both; }

/***************************************************/
/*            */
/*            */
/***************************************************/
.siteHeaderInner {
  padding: 0 10px;
  background: #272727; }
  .siteHeaderInner:after {
    clear: both;
    content: "";
    display: block; }
  .siteHeaderInner .h1 {
    color: #FFF;
    font-size: 13px;
    font-weight: normal;
    line-height: 1;
    text-align: left;
    margin: 0;
    padding: 10px 0;
    float: left;
    width: 50%; }

.loginArea {
  float: right;
  font-size: 13px;
  line-height: 1;
  width: 50%;
  text-align: right; }
  .loginArea li {
    display: inline-block;
    vertical-align: middle;
    color: #FFF; }
  .loginArea a {
    color: inherit;
    display: inline-block;
    text-decoration: none;
    padding: 10px 0; }
    .loginArea a:hover {
      text-decoration: underline;
      background-color: #666; }
    .loginArea a span {
      padding: 0 9px 0 9px; }

/* ヘッダー（グローバルナビ）*/
#masterNavi {
  border-top: 1px solid #999999;
  box-shadow: 0 1px 1px #9c9c9c;
  list-style: none;
  margin: 0;
  padding: 2px 0;
  text-align: left;
  width: 100%;
  z-index: 1; }

#masterNavi {
  background: #fefefe;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); }

#menu {
  text-align: center;
  width: 100%;
  display: table; }
  #menu a {
    color: #000;
    font-size: 12px;
    line-height: 20px;
    height: 20px;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    display: block; }
  #menu li {
    display: table-cell;
    vertical-align: top;
    font-weight: bold;
    position: relative;
    text-align: center;
    margin: 0px 7px;
    /*		width: calc(100% / 8);*/ }
    #menu li:first-child {
      margin-left: 0px; }
    #menu li:hover > a {
      color: #CC0000; }
    #menu li:hover > ul {
      visibility: visible; }
    #menu li ul a {
      color: #FFF !important;
      text-align: left;
      padding: 10px; }

#menu::after {
  clear: both;
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden; }
#menu ul {
  border-radius: 5px;
  background: -moz-linear-gradient(top, #444, #111);
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #111), color-stop(1, #444));
  background-color: #444;
  background-repeat: repeat-x;
  visibility: hidden;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 20px;
  z-index: 99999; }
  #menu ul a {
    display: block;
    float: none;
    height: auto;
    line-height: 1;
    padding: 5px;
    text-transform: none;
    white-space: nowrap; }
    #menu ul a:hover {
      background: #0186ba; }
  #menu ul li {
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    border-top-color: #666666 \9;
    border-top-style: solid\9;
    border-top-width: 1px\9;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    color: #333333;
    display: block;
    float: none;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 200px; }
    #menu ul li .stay {
      background: #0186ba;
      color: #FFFFFF;
      display: block;
      font-size: 12px;
      font-weight: bold;
      padding: 10px;
      white-space: nowrap; }
    #menu ul li:first-child a {
      border-radius: 5px 5px 0 0; }
      #menu ul li:first-child a::after {
        border-bottom: 8px solid #444;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        content: '';
        height: 0;
        left: 95px;
        position: absolute;
        top: -7px;
        width: 0; }
      #menu ul li:first-child a:hover::after {
        border-bottom-color: #04acec; }
    #menu ul li:last-child {
      box-shadow: none; }
      #menu ul li:last-child a {
        border-radius: 0 0 5px 5px; }

.header {
  display: table;
  width: 1000px;
  margin: 10px auto;
  padding: 0;
  box-sizing: border-box; }
  .header::after {
    content: "";
    display: block;
    clear: both; }
  .header .logo {
    display: table-cell;
    vertical-align: bottom; }
    .header .logo img {
      width: auto;
      height: 30px; }
  .header .headerSerach {
    display: table-cell;
    vertical-align: bottom; }
    .header .headerSerach .headerSerachInner {
      float: right; }
      .header .headerSerach .headerSerachInner .formWrap {
        position: relative; }
      .header .headerSerach .headerSerachInner .searchTxt {
        padding: 10px;
        width: 300px; }

/* footer */
footer {
  display: block;
  width: 100%;
  background: #EFEFEF;
  margin: 0;
  border-top: solid 10px #DDD; }
  footer h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    margin: 10px auto 0;
    width: 1000px; }
  footer a {
    color: #333;
    text-decoration: none; }
  footer .footer-inner {
    padding: 20px 0 50px;
    width: 1000px;
    margin: 0 auto;
    font-size: 0; }
    footer .footer-inner > div {
      display: inline-block;
      vertical-align: top;
      width: 14%; }
    footer .footer-inner .h3 {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
      margin: 10px 0 5px; }
    footer .footer-inner .footer-category {
      margin: 0 0 10px 0; }
      footer .footer-inner .footer-category li {
        font-size: 12px;
        line-height: 1.5; }
  footer .Copyright {
    background: #555;
    text-align: center;
    color: #FFF;
    font-size: 13px;
    line-height: 1.5;
    padding: 30px 0; }
    footer .Copyright a {
      display: block;
      width: 156px;
      height: 26px;
      background: url("//image.bikebros.co.jp/info/wp-content/themes/bikebros/img/service_logo.png") no-repeat -670px 0px;
      margin: 0 auto;
      text-indent: -9999px; }
  footer .logo {
    text-align: center;
    padding: 20px 0;
    background: #FFF; }
    footer .logo img:hover {
      animation: shake 0.2s linear infinite;
      -webkit-animation: shake 0.2s linear infinite; }

/*カラムの幅設定*/
/*コンテンツラッパー*/
.wrapper {
  word-wrap: break-word; }

.container {
  width: 1000px;
  margin: 0 auto; }
  .container::after {
    clear: both;
    content: "";
    display: block; }

/*検索*/
dl.search {
  position: relative;
  width: 300px;
  background-color: #FFF;
  border: 1px solid #CCC;
  border-radius: 6px;
  box-sizing: border-box; }
  dl.search dt {
    margin-right: 40px;
    padding: 4px 0 4px 8px; }
    dl.search dt input {
      width: 100%;
      height: 24px;
      line-height: 24px;
      background: none;
      border: none; }
  dl.search dd {
    position: absolute;
    top: 0;
    right: 0; }
    dl.search dd button {
      display: block;
      padding: 7px;
      background: none;
      border: none;
      cursor: pointer; }
      dl.search dd button span {
        display: block;
        width: 20px;
        height: 20px;
        background: url("/bb_img/brand/searches.png") no-repeat scroll -70px 0px; }

.searchBlock {
  padding: 10px;
  background-color: #333;
  border: solid 1px #333;
  margin: 0 0 10px; }
  .searchBlock .searchInner {
    display: table;
    width: 100%; }
    .searchBlock .searchInner dt {
      display: table-cell;
      vertical-align: middle;
      width: 10%;
      padding: 0 5px 0 0; }
    .searchBlock .searchInner dd {
      display: table-cell;
      vertical-align: middle; }
      .searchBlock .searchInner dd:nth-child(2) {
        width: 75%; }
    .searchBlock .searchInner .select {
      padding: 5px;
      border: 1px solid #CCC;
      height: 34px;
      display: inline-block; }
    .searchBlock .searchInner .inputTxt {
      padding: 5px;
      width: 100%;
      border: 1px solid #CCC;
      height: 34px; }
    .searchBlock .searchInner .btnSubmit {
      text-align: center;
      color: #FFF;
      border: solid 1px #4d90fe;
      background-color: #4d90fe;
      width: 100px;
      height: 34px; }

.searchTitle {
  font-size: 18px;
  font-weight: 700;
  padding: 0 0 5px; }
  .searchTitle .searchKeyword {
    color: #C00; }

/*パンくず*/
.breadcrumb {
  font-size: 0;
  margin: 0 0 20px;
  padding: 8px;
  background-color: #EFEFEF; }
  .breadcrumb ul {
    width: 1000px;
    margin: 0 auto; }
  .breadcrumb li {
    display: inline-block;
    font-size: 11px;
    line-height: 1.2; }
    .breadcrumb li:not(:last-child)::after {
      content: "\0bb";
      margin: 0 2px; }
    .breadcrumb li a {
      color: #333; }

/*ナビゲーション*/
#navi {
  width: 100%;
  background: -webkit-linear-gradient(top left, #3367D6 0%, #1F479C 100%);
  background: -o-linear-gradient(top left, #3367D6 0%, #1F479C 100%);
  background: linear-gradient(to bottom, #3367D6 0%, #1F479C 100%);
  margin: 0 0;
  z-index: 100;
  position: relative; }
  #navi .naviInner {
    background: -webkit-linear-gradient(top left, #3367D6 0%, #1F479C 100%);
    background: -o-linear-gradient(top left, #3367D6 0%, #1F479C 100%);
    background: linear-gradient(to bottom, #3367D6 0%, #1F479C 100%);
    margin: 0 auto;
    width: 1000px; }
  #navi .levelOne {
    display: table;
    width: 100%;
    margin: 0 auto;
    position: relative; }
    #navi .levelOne .levelOneList {
      display: table-cell;
      vertical-align: middle;
      width: 25%;
      font-size: 15px;
      font-weight: 700;
      box-sizing: border-box;
      cursor: pointer;
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      -ms-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s; }
      #navi .levelOne .levelOneList:last-child a {
        border-right: none; }
      #navi .levelOne .levelOneList:hover {
        background-color: #1F479C; }
        #navi .levelOne .levelOneList:hover:nth-child(3) .levelTwo {
          height: 230px; }
        #navi .levelOne .levelOneList:hover .levelTwo {
          visibility: visible;
          opacity: 1;
          min-height: 230px;
          -webkit-transition: 0.2s;
          -moz-transition: 0.2s;
          -ms-transition: 0.2s;
          -o-transition: 0.2s;
          transition: 0.2s; }
      #navi .levelOne .levelOneList .levelTwo {
        position: absolute;
        left: 0;
        visibility: hidden;
        width: 100%;
        height: 0;
        opacity: 0;
        background-color: #333;
        padding: 20px;
        font-size: 0;
        box-sizing: border-box; }
        #navi .levelOne .levelOneList .levelTwo .levelTwoList {
          display: inline-block;
          vertical-align: top;
          width: 15.6%;
          margin: 0 1.25% 0 0; }
          #navi .levelOne .levelOneList .levelTwo .levelTwoList:nth-of-type(6n) {
            margin-right: 0;
            vertical-align: bottom; }
        #navi .levelOne .levelOneList .levelTwo a {
          color: #FFF;
          text-decoration: none; }
          #navi .levelOne .levelOneList .levelTwo a.more {
            display: block;
            font-size: 13px;
            border: solid 1px #FFF;
            text-align: center;
            padding: 5px;
            font-weight: 400; }
      #navi .levelOne .levelOneList > a {
        display: block;
        text-align: center;
        color: #FFF;
        text-decoration: none;
        padding: 5px 0 3px;
        border-right: solid 1px #3367D6; }
        #navi .levelOne .levelOneList > a.current {
          background-color: #1F479C; }

#navi .entryList {
  font-size: 0;
  display: block;
  text-decoration: none;
  color: #333;
  position: relative; }
  #navi .entryList::after {
    content: "";
    display: block;
    clear: both;
    border-top: solid 3px #F8D806;
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    transition: all 0.1s; }
  #navi .entryList:hover {
    position: relative; }
    #navi .entryList:hover::after {
      width: 100%;
      left: 0;
      transition: all 0.2s; }
  #navi .entryList:hover .entryTitle {
    text-decoration: underline; }
  #navi .entryList .entryTitle {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 5px; }
  #navi .entryList .thumbnail img {
    width: 100%;
    height: auto; }
  #navi .entryList .textBody .description {
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5; }
  #navi .entryList .textBody .upDate {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5; }

.localNavi {
  margin: 0 0 20px;
  background-color: #EFEFEF;
  width: 100%; }
  .localNavi .localNaviList {
    display: table;
    width: 100%;
    margin: 0 auto; }
    .localNavi .localNaviList li {
      display: table-cell;
      vertical-align: top;
      width: 20%;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      line-height: 1; }
      .localNavi .localNaviList li a {
        display: block;
        padding: 8px 10px 10px;
        text-decoration: none;
        color: #333;
        border-top: solid 4px #EFEFEF; }
        .localNavi .localNaviList li a:hover, .localNavi .localNaviList li a.current {
          border-top-color: #C00;
          color: #C00; }

/*並び替え*/
.sort {
  float: right; }
  .sort select {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-size: 13px;
    line-height: 1;
    padding: 0 5px; }

/*メインカラム*/
.main {
  width: 680px;
  float: left;
  background-color: #FFF; }
  .main main {
    margin: 0 0 30px; }
  .main .entryTitleBlock {
    margin: 0 0 20px; }
    .main .entryTitleBlock::after {
      content: "";
      clear: both;
      display: block; }
    .main .entryTitleBlock .entryTitle {
      font-size: 32px;
      font-weight: 700;
      line-height: 1.3;
      border-left: solid 10px #3367D6;
      padding: 0 0 0 10px;
      margin: 0; }
    .main .entryTitleBlock .entryMessage {
      font-size: 16px;
      font-weight: 700;
      line-height: 1.3;
      margin: 10px 0 30px; }
    .main .entryTitleBlock .upDate {
      font-size: 12px;
      font-weight: 400; }
    .main .entryTitleBlock .catName {
      font-size: 12px;
      font-weight: 700; }
    .main .entryTitleBlock .like {
      font-size: 12px;
      font-weight: 700;
      float: right; }

/*サイドバー*/
.sidebar {
  width: 300px;
  float: left;
  font-size: 12px; }
  .sidebar .headLine {
    position: relative;
    padding: 10px;
    border-left: solid 10px #3367D6;
    margin: 0 0 10px;
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
    background-color: #333; }
  .sidebar .categoryTitle {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    padding: 10px;
    color: #3f87a6;
    border-top: solid 4px #3f87a6;
    background: linear-gradient(to bottom, #FFF 0%, #EFEFEF 100%); }
  .sidebar .category {
    margin: 0 0 10px;
    border: solid 1px #d5d5d5; }
  .sidebar .categoryInner {
    background-color: #EFEFEF;
    padding: 2px; }
    .sidebar .categoryInner .count {
      font-size: 11px;
      margin: 0 0 0 5px; }
    .sidebar .categoryInner li {
      padding: 7px 8px;
      border: solid 1px #d5d5d5;
      border-bottom: none;
      background: linear-gradient(to bottom, #FFF 0%, #EFEFEF 100%); }
      .sidebar .categoryInner li:last-child {
        border-bottom: solid 1px #CCC; }
      .sidebar .categoryInner li a {
        display: block; }
        .sidebar .categoryInner li a::before {
          content: "●";
          color: #3f87a6;
          margin: 0 3px 0 0; }
  .sidebar .button {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    color: #666;
    margin: 5px auto 10px;
    text-align: center; }
    .sidebar .button .goo-button {
      width: 30px;
      height: 30px;
      margin: 0 3px 0 0;
      vertical-align: middle; }
      .sidebar .button .goo-button:hover {
        background-position: 0 0;
        cursor: inherit; }
    .sidebar .button .fun-button {
      display: inline-block;
      margin: 0;
      width: 30px;
      height: 30px;
      margin: 0 3px 0 0;
      background: url(/bb_img/brand/btn_fan.png) no-repeat 0 0;
      background-size: cover;
      vertical-align: middle; }

.rghtColumn {
  width: 300px;
  float: right; }
  .rghtColumn section {
    margin: 0 0 20px; }

.leftColumn {
  width: 300px;
  float: right; }

.sideMenu {
  margin: 0 0 10px; }
  .sideMenu ul {
    background-color: #EFEFEF;
    margin: -10px 0 0; }
    .sideMenu ul li {
      padding: 7px 8px;
      border: solid 1px #d5d5d5;
      border-bottom: none;
      background: linear-gradient(to bottom, #FFF 0%, #EFEFEF 100%); }
      .sideMenu ul li:last-child {
        border-bottom: solid 1px #CCC; }
      .sideMenu ul li a {
        display: block;
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.5;
        color: #333; }

/*ブログ詳細のタイトル下*/
.blogBrandProfile .brandLogo {
  background-color: #FFF;
  float: left;
  text-align: center;
  width: 60px;
  margin: 0 10px 10px 0; }
  .blogBrandProfile .brandLogo img {
    border: solid 1px #CCC;
    box-sizing: border-box; }
.blogBrandProfile .brandName {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 5px; }
.blogBrandProfile .copyright {
  color: #999;
  font-size: 11px;
  font-weight: 400;
  line-height: 1; }

.brandProfile .brandLogo {
  background-color: #FFF;
  border: solid 1px #CCC;
  box-sizing: border-box; }
.brandProfile .brandName {
  font-size: 16px;
  font-weight: 700; }
.brandProfile .description {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7; }

/*ページャー*/
.pager {
  overflow: hidden;
  margin: 30px 0;
  text-align: center; }
  .pager ul {
    font-size: 0;
    width: 100%;
    margin: 0 auto; }
    .pager ul li {
      display: inline-block;
      text-align: center;
      font-size: 13px;
      line-height: 1;
      margin: 0 2px; }
      .pager ul li.current {
        font-weight: 700; }
        .pager ul li.current span {
          background-color: #333;
          color: #FFF; }
      .pager ul li a, .pager ul li span {
        display: block;
        color: #333;
        text-decoration: none;
        padding: 0.8em 1em;
        background-color: #FFF;
        border-radius: 5px;
        border: solid 1px #CCC; }

/*詳細ページナビ*/
.postNavi ul {
  display: flex;
  border: solid 1px #CCC;
  margin: 0; }
  .postNavi ul li {
    width: 50%;
    box-sizing: border-box;
    padding: 0 10px; }
    .postNavi ul li:nth-of-type(1) {
      border-right: solid 1px #CCC; }
      .postNavi ul li:nth-of-type(1) a {
        color: #333; }
        .postNavi ul li:nth-of-type(1) a::before {
          content: "\025c0前のページ";
          display: block;
          font-size: 11px;
          font-weight: 700;
          margin: 5px 0 0 0;
          color: #3367D6; }
    .postNavi ul li:nth-of-type(2) a {
      color: #333; }
      .postNavi ul li:nth-of-type(2) a::before {
        content: "次のページ\025b6";
        display: block;
        font-size: 11px;
        font-weight: 700;
        margin: 5px 0 0 0;
        color: #3367D6;
        text-align: right; }
    .postNavi ul li a {
      display: block;
      padding: 10px 0;
      word-wrap: break-word; }

.postListLink {
  border: solid 1px #CCC;
  border-top: none;
  font-size: 13px;
  margin: 0 0; }
  .postListLink a {
    display: block;
    text-align: center;
    padding: 10px; }

/*見出し*/
.headLine {
  position: relative;
  padding: 10px;
  border-left: solid 10px #3367D6;
  margin: 0 0 10px;
  color: #FFF;
  font-size: 16px;
  font-weight: 700;
  background-color: #333; }
  .headLine .cap {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    position: absolute;
    right: 0;
    top: 32%; }
  .headLine .myBikeSelect {
    display: inline-block;
    float: right; }

/* ブランドTOPイメージ画像*/
.brandBanner {
  margin: 0 0 20px; }
  .brandBanner img {
    width: 100% !important;
    height: auto; }

/*ブランド情報*/
.brand::after {
  content: "";
  clear: both;
  display: block; }
.brand .brandInner {
  display: table;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0 0 20px; }
  .brand .brandInner .brandLogo {
    display: table-cell;
    vertical-align: top;
    width: 300px;
    height: auto;
    text-align: center;
    background-color: #FFF; }
    .brand .brandInner .brandLogo img {
      border: solid 1px #CCC;
      box-sizing: border-box; }
  .brand .brandInner .brandText {
    display: table-cell;
    vertical-align: top;
    padding-left: 20px; }
    .brand .brandInner .brandText .brandName {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.3;
      text-align: left;
      margin: 5px 0; }
    .brand .brandInner .brandText .brandCaption {
      font-size: 12px;
      line-height: 1.4;
      margin: 0 0 10px; }
    .brand .brandInner .brandText .brandSite {
      background-color: #FFF; }
      .brand .brandInner .brandText .brandSite a {
        color: #333;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
        display: inline-block;
        padding: 7px 30px 7px 20px;
        background-color: #CCC;
        border: solid 1px #CCC;
        border-radius: 5px;
        background: linear-gradient(to bottom, #FFF 0%, #DDD 100%);
        position: relative; }
        .brand .brandInner .brandText .brandSite a::after {
          position: absolute;
          top: 50%;
          right: 10px;
          display: block;
          content: '';
          width: 8px;
          height: 8px;
          margin-top: -4px;
          border-top: 1px solid #888;
          border-right: 1px solid #888;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg); }
    .brand .brandInner .brandText .button {
      display: block;
      font-size: 11px;
      font-weight: 400;
      line-height: 1;
      color: #666;
      margin: 10px 0 0; }
      .brand .brandInner .brandText .button .goo-button {
        width: 20px;
        height: 20px;
        margin: 0 3px 0 0;
        vertical-align: text-bottom; }
        .brand .brandInner .brandText .button .goo-button:hover {
          background-position: 0 0;
          cursor: inherit; }
      .brand .brandInner .brandText .button .fun-button {
        display: inline-block;
        margin: 0;
        width: 20px;
        height: 20px;
        margin: 0 3px 0 0;
        background: url(//www.bikebros.co.jp/bb_img/brand/btn_fan.png) no-repeat 0 0;
        background-size: cover;
        vertical-align: text-bottom; }
.brand .badgeBanner {
  width: 300px;
  float: right; }

/*コンテンツの一覧*/
.item {
  margin: 10px 0 0; }

.itemList li {
  margin: 0 0 10px; }
  .itemList li:last-child {
    padding: 0;
    margin: 0;
    border-bottom: none; }

.contentsBlock {
  margin: 0 0 10px; }

.linkBlock {
  font-size: 0;
  color: #333;
  text-decoration: none;
  width: 100%; }
  .linkBlock::after {
    content: " ";
    display: block;
    clear: both; }

.linkBlock .thumbnail {
  float: left;
  width: 160px;
  margin: 0 10px 0 0; }
.linkBlock .text {
  overflow: hidden; }
  .linkBlock .text .star {
    display: block;
    margin: 0 0 5px;
    background-image: url("/bb_img/brand/icon-star.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 139px;
    height: 20px;
    background-size: 60%; }
  .linkBlock .text .icon-star0 {
    background-position: 0 0; }
  .linkBlock .text .icon-star1 {
    background-position: 0 calc(-26px * .6 ); }
  .linkBlock .text .icon-star2 {
    background-position: 0 calc(-52px * .6 ); }
  .linkBlock .text .icon-star3 {
    background-position: 0 calc(-78px * .6 ); }
  .linkBlock .text .icon-star4 {
    background-position: 0 calc(-104px * .6 ); }
  .linkBlock .text .icon-star5 {
    background-position: 0 calc(-130px * .6 ); }
  .linkBlock .text .itemName {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    color: #3367D6;
    margin: 0 0 10px;
    word-wrap: break-word; }
  .linkBlock .text .title {
    display: block;
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 700; }
  .linkBlock .text .description {
    display: block;
    font-size: 13px;
    margin: 0 0 10px;
    line-height: 1.1;
    max-height: 28.6px;
    overflow: hidden;
    position: relative;
    word-break: break-all;
    text-align: justify; }
    .linkBlock .text .description:before, .linkBlock .text .description:after {
      position: absolute; }
    .linkBlock .text .description:before {
      content: '...';
      background-color: #FFF;
      right: 0px;
      text-align: center;
      width: 1em !important;
      top: 14.3px; }
    .linkBlock .text .description:after {
      content: '';
      height: 100%;
      width: 100%;
      background: 0px;
      z-index: 2;
      background-color: #FFF; }
  .linkBlock .text .date {
    display: block;
    font-size: 11px;
    line-height: 1.2; }
  .linkBlock .text .price {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #C00; }
  .linkBlock .text .deadline {
    display: block;
    font-size: 11px;
    line-height: 1.5;
    color: #C00;
    margin: 5px 0 0; }

.entryList {
  font-size: 0; }
  .entryList li {
    width: 24%;
    display: inline-block;
    vertical-align: top;
    margin: 0 1.3% 3% 0; }
    .entryList li:nth-of-type(4n) {
      margin-right: 0; }
    .entryList li .entryLinkBlock {
      display: block; }
    .entryList li .thumbnail .thumbnailImage {
      border: solid 1px #CCC;
      box-sizing: border-box; }
    .entryList li .textBody {
      margin: 5px 0 0; }
      .entryList li .textBody .brandName {
        color: #1f8ed5;
        display: block;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
        margin: 0 0 5px;
        word-wrap: break-word; }
      .entryList li .textBody .featureTitle {
        display: block;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
        margin: 0 0 5px; }
      .entryList li .textBody .entryTitle {
        display: block;
        font-size: 11px;
        line-height: 1.3; }

.entryListBlock {
  margin: 0 0 30px; }

.entryTextList {
  font-size: 0; }
  .entryTextList li {
    margin: 0 0 6px;
    padding: 0 0 6px;
    border-bottom: dotted 1px #CCC; }
    .entryTextList li .entryLinkBlock {
      display: block; }
    .entryTextList li .textBody .entryTitle {
      display: block;
      font-size: 13px;
      line-height: 1.3;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
      .entryTextList li .textBody .entryTitle::before {
        content: "";
        background: url(/bb_img/brand/newMark.png) no-repeat;
        display: inline-block;
        width: 30px;
        height: 11px;
        margin: 0 5px 0 0; }

.entryListView li {
  font-size: 0;
  display: block;
  text-decoration: none;
  color: #333;
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #e5e5e5; }
  .entryListView li::after {
    content: "";
    display: block;
    clear: both; }
  .entryListView li:hover {
    /*background-color: #EFEFEF;*/
    text-decoration: none !important; }
  .entryListView li .entryTitle {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 5px;
    color: #3367D6; }
    .entryListView li .entryTitle.brandName {
      line-height: 1;
      margin: 0 0 10px;
      display: block; }
    .entryListView li .entryTitle a {
      color: #3367D6;
      text-decoration: none; }
      .entryListView li .entryTitle a:hover {
        color: #ff6a00;
        text-decoration: none; }
  .entryListView li .thumbnail {
    width: 150px;
    float: left;
    margin: 0 10px 0 0; }
    .entryListView li .thumbnail img {
      box-sizing: border-box;
      border: solid 1px #CCC; }
  .entryListView li .textBody {
    padding: 0 0 0 160px; }
    .entryListView li .textBody .description {
      display: block;
      font-size: 13px;
      line-height: 1.5; }
    .entryListView li .textBody .upDate {
      display: block;
      font-size: 11px;
      font-weight: 400;
      line-height: 1.5;
      color: #999; }
    .entryListView li .textBody .apply {
      width: 100px; }
    .entryListView li .textBody .button {
      display: block;
      font-size: 11px;
      font-weight: 400;
      line-height: 1;
      color: #666;
      margin: 5px 0 0; }
      .entryListView li .textBody .button .goo-button {
        width: 20px;
        height: 20px;
        margin: 0 3px 0 0;
        vertical-align: text-bottom; }
        .entryListView li .textBody .button .goo-button:hover {
          background-position: 0 0;
          cursor: inherit; }
      .entryListView li .textBody .button .fun-button {
        display: inline-block;
        margin: 0;
        width: 20px;
        height: 20px;
        margin: 0 3px 0 0;
        background: url(//www.bikebros.co.jp/bb_img/brand/btn_fan.png) no-repeat 0 0;
        background-size: cover;
        vertical-align: text-bottom; }

.colBoxInner li {
  margin: 0 0 10px;
  background-color: #FFF; }
  .colBoxInner li a {
    display: table;
    box-sizing: border-box; }
  .colBoxInner li .thumbnail {
    display: table-cell;
    vertical-align: top;
    padding: 0 10px 0 0;
    width: 100px; }
    .colBoxInner li .thumbnail .thumbnailImage {
      width: 100px;
      height: auto; }
  .colBoxInner li .textBody {
    display: table-cell;
    vertical-align: top; }
    .colBoxInner li .textBody .entryTitle {
      display: block;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4; }
    .colBoxInner li .textBody .description {
      display: block;
      font-size: 12px;
      line-height: 1.3; }

.apply {
  display: block;
  color: #FFF;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 6px;
  text-align: center;
  text-decoration: none;
  background: #A1051D;
  background: -webkit-linear-gradient(top left, #F5515F 0%, #A1051D 100%);
  background: linear-gradient(to bottom, #F5515F 0%, #A1051D 100%);
  border: solid 2px #FFF;
  margin: 10px 0 0;
  border-radius: 4px;
  width: 6em;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); }

/*コンテンツ詳細*/
.contentsBody {
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: break-word;
  margin: 0 0; }
  .contentsBody img {
    margin: 1em 0;
    display: block; }
  .contentsBody a {
    text-decoration: underline;
    color: #1f8ed5; }

/*カテゴリー*/
.categoryTitle {
  font-weight: 700;
  margin: 0;
  padding: 10px;
  color: #C00;
  border-top: solid 4px #C00;
  background: linear-gradient(to bottom, #FFF 0%, #EFEFEF 100%); }

.category {
  margin: 0 0 10px;
  border: solid 1px #d5d5d5; }

.categoryInner {
  background-color: #EFEFEF;
  padding: 2px; }
  .categoryInner .count {
    font-size: 11px;
    margin: 0 0 0 5px; }
  .categoryInner li {
    padding: 7px 8px;
    border: solid 1px #d5d5d5;
    border-bottom: none;
    background: linear-gradient(to bottom, #FFF 0%, #EFEFEF 100%); }
    .categoryInner li:last-child {
      border-bottom: solid 1px #CCC; }
    .categoryInner li a {
      display: block; }
      .categoryInner li a::before {
        content: "●";
        color: #C00;
        margin: 0 3px 0 0; }

/*tag*/
.tagTitle {
  font-size: 16px;
  font-weight: 700;
  margin: 0; }

.tagInner {
  font-size: 0;
  margin: 0 0 10px; }
  .tagInner .count {
    font-size: 11px;
    margin: 0 0 0 5px; }
  .tagInner li {
    display: inline-block;
    margin: 0 3px 3px 0;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2; }
    .tagInner li a {
      display: block;
      color: #333;
      padding: 5px 10px;
      background-color: #FFF;
      border: solid 1px #CCC;
      border-radius: 5px; }

/*記事・ニュース一覧*/
.news {
  width: 680px; }

.magazinesTitle, .newsTitle {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  line-height: 1.5;
  max-height: 48px;
  overflow: hidden;
  position: relative;
  word-break: break-all;
  text-align: justify; }
  .magazinesTitle:before, .magazinesTitle:after, .newsTitle:before, .newsTitle:after {
    position: absolute; }
  .magazinesTitle:before, .newsTitle:before {
    content: '...';
    background-color: #FFF;
    right: 0px;
    text-align: center;
    width: 1em !important;
    top: 24px; }
  .magazinesTitle:after, .newsTitle:after {
    content: '';
    height: 100%;
    width: 100%;
    background: 0px;
    z-index: 2;
    background-color: #FFF; }

.news .title, .magazines .title {
  text-decoration: underline;
  color: #1f8ed5; }

/*ブランドボイス*/
.voice {
  margin: 0 0 10px; }
  .voice .headLine {
    margin-top: 0; }

.brandVoiceList {
  margin: 0 0 10px; }
  .brandVoiceList li {
    margin: 0 0 10px; }

.brandLogo {
  margin: 0 0 8px; }

/*ブランドボイス詳細*/
.ditail .brandName {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 5px; }
  .ditail .brandName::after {
    content: " ";
    background: url(/bb_img/brand/icon_official.png);
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    vertical-align: middle;
    margin: 0 0 4px 2px; }

/*応援するボタン*/
.supportButton {
  display: block;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: solid 1px #FFBF00;
  border-right-width: 2px;
  border-bottom-width: 2px;
  background-color: #FBE338;
  margin: 0 0 10px;
  padding: 10px; }

/*ブログ内検索*/
.blogSearch {
  display: block;
  margin: 20px 0;
  width: 100%;
  padding: 10px;
  box-sizing: border-box; }

/*このブランドの商品を購入*/
.ecLinkButton {
  display: block;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: solid 1px #CCC;
  border-right-width: 2px;
  border-bottom-width: 2px;
  background-color: #FFF;
  margin: 0 0 10px;
  padding: 10px; }

/*コメント*/
.commentBlock {
  margin: 30px 0 20px;
  padding: 20px;
  background: #FFF;
  border: solid 1px #CCC; }
  .commentBlock .commentHeadLine {
    font-weight: 700;
    margin: 0 0 10px; }
  .commentBlock .textInput {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    border: solid 1px #d6dee5; }
  .commentBlock .textBody {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    padding: 10px;
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    margin: 5px 0;
    border: solid 1px #d6dee5; }
  .commentBlock .caption {
    font-size: 12px;
    line-height: 1.3; }
  .commentBlock .buttonSubmit {
    border: none;
    background: -webkit-linear-gradient(top left, #3367D6 0%, #1F479C 100%);
    background: -o-linear-gradient(top left, #3367D6 0%, #1F479C 100%);
    background: linear-gradient(to bottom right, #3367D6 0%, #1F479C 100%);
    color: #FFF;
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 auto;
    padding: 10px 20px;
    width: 300px; }

.userComment {
  background-color: #FFF;
  padding: 20px 20px 0;
  border: solid 1px #CCC; }
  .userComment .commentHeadLine {
    margin: 0 0 10px; }
  .userComment .commentList {
    background-color: #FFF; }
    .userComment .commentList li {
      border-bottom: dotted 1px #CCC;
      padding: 20px 0;
      font-size: 13px;
      line-height: 1.3;
      position: relative; }
      .userComment .commentList li:first-child {
        border-top: solid 1px #CCC; }
      .userComment .commentList li:last-child {
        border-bottom: none; }
    .userComment .commentList .userName {
      font-size: 11px;
      line-height: 1.3;
      margin: 0 0 20px; }
      .userComment .commentList .userName span {
        font-weight: 700; }
    .userComment .commentList .upDate {
      font-size: 10px;
      line-height: 1;
      color: #999; }
    .userComment .commentList .deleteMessage {
      font-size: 12px;
      line-height: 1.3;
      color: #C00; }
    .userComment .commentList .deleteButton {
      font-size: 12px;
      line-height: 1;
      display: inline-block;
      text-align: center;
      padding: 6px 8px;
      border: solid 1px #CCC;
      border-radius: 5px;
      position: absolute;
      bottom: 10px;
      right: 0; }

/*EC商品*/
.ecItem .thumbnail {
  margin: 0 0 5px; }
.ecItem .itemBrand {
  font-size: 11px;
  line-height: 1.3; }
.ecItem .itemName {
  font-size: 13px;
  line-height: 1.3; }
.ecItem .itemPrice {
  font-size: 13px;
  font-weight: 700;
  color: #C00; }

/*プレゼント*/
.present .presentTitle {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin: 10px 0 0; }
.present .presentPeriod {
  border: solid 1px #C00;
  margin: 10px 0;
  text-align: center; }
  .present .presentPeriod dt {
    font-size: 20px;
    line-height: 1;
    text-align: center;
    padding: 20px 10px 15px;
    margin: 5px 0 10px; }
    .present .presentPeriod dt span {
      color: #C00; }
  .present .presentPeriod dd {
    text-align: center;
    background-color: #FFF4F8;
    padding: 15px 10px;
    color: #C00; }
.present .presentDetailImage {
  font-size: 0; }
  .present .presentDetailImage li {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    margin: 0 2% 2% 0; }
    .present .presentDetailImage li:nth-of-type(2n) {
      margin-right: 0; }
  .present .presentDetailImage .thumbnail img {
    width: 100%;
    height: auto; }
  .present .presentDetailImage .textBody {
    margin: 5px 0 0; }
    .present .presentDetailImage .textBody .caption {
      font-size: 13px;
      font-weight: 400;
      line-height: 1.5;
      color: #666; }
    .present .presentDetailImage .textBody .radioInputBlock {
      margin: 0; }
    .present .presentDetailImage .textBody .radioInputList {
      padding: 0;
      border: none; }

.message_warning, .message_danger {
  margin: 10px 0;
  padding: 10px;
  color: #FFF;
  background: #F88;
  border-radius: 8px; }

.message_success {
  margin: 10px 0;
  padding: 30px 0;
  color: #FFF;
  background-color: #0CA45F;
  font-size: 18px;
  font-weight: 700;
  text-align: center; }

/*アンケート*/
.enquete {
  margin: 50px 0 0; }
  .enquete .enqueteTitle {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 5px; }
  .enquete .enquetelistInner li {
    margin: 0 0 10px 0; }
  .enquete .QTitle {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 5px;
    padding: 10px;
    background-color: #EFEFEF; }
  .enquete .ATextArea {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    padding: 10px;
    margin: 10px 0 0;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; }
  .enquete .enqueteSend {
    font-size: 0;
    margin: 20px 0;
    text-align: center; }
    .enquete .enqueteSend div {
      display: inline-block;
      vertical-align: top;
      box-sizing: border-box;
      padding: 0 10px;
      width: 50%; }
  .enquete .enqueteSubmit {
    border: none;
    border: solid 1px #C00;
    background-color: #C00;
    display: block;
    padding: 15px;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box; }
  .enquete .enqueteBack {
    border: none;
    border: solid 1px #CCC;
    background-color: #FFF;
    display: block;
    padding: 15px;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #333;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box; }

.presentInformation {
  margin: 10px 0 0;
  padding: 20px;
  border: solid 1px #CCC; }
  .presentInformation dl {
    display: table;
    width: 100%;
    margin: 0 0 -10px;
    font-size: 15px;
    line-height: 1.3; }
    .presentInformation dl dt {
      display: table-cell;
      vertical-align: top;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.3;
      width: 5em; }
    .presentInformation dl dd {
      display: table-cell;
      vertical-align: top; }

.radioInputBlock {
  margin: 0 0 20px; }
  .radioInputBlock .radioInputList {
    border-bottom: solid 1px #CCC;
    margin: 5px 0;
    padding: 15px 0;
    font-size: 16px; }
  .radioInputBlock .radioInput {
    display: none; }
    .radioInputBlock .radioInput + label {
      padding-left: 22px;
      position: relative;
      margin-right: 20px; }
      .radioInputBlock .radioInput + label::before {
        content: "";
        display: block;
        position: absolute;
        top: 2px;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid #999;
        border-radius: 50%; }
    .radioInputBlock .radioInput:checked + label {
      color: #C00;
      font-weight: 700; }
      .radioInputBlock .radioInput:checked + label::after {
        content: "";
        display: block;
        position: absolute;
        top: 5px;
        left: 3px;
        width: 11px;
        height: 11px;
        background: #C00;
        border-radius: 50%; }

.checkBoxBlock {
  margin: 0 0 20px; }
  .checkBoxBlock .checkBoxList {
    border-bottom: solid 1px #CCC;
    margin: 5px 0;
    padding: 15px 0; }
  .checkBoxBlock .checkBox {
    display: none; }
    .checkBoxBlock .checkBox + label {
      padding-left: 22px;
      position: relative;
      margin-right: 20px; }
      .checkBoxBlock .checkBox + label::before {
        content: "";
        display: block;
        position: absolute;
        top: 2px;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid #999; }
    .checkBoxBlock .checkBox:checked + label {
      color: #C00;
      font-weight: 700; }
      .checkBoxBlock .checkBox:checked + label::before {
        position: absolute;
        content: "\2713";
        display: block;
        font-size: 13px;
        line-height: 1.35;
        text-indent: 1px;
        color: #FFF;
        top: 3px;
        left: 0;
        z-index: 1000; }
      .checkBoxBlock .checkBox:checked + label::after {
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 0px;
        width: 16px;
        height: 16px;
        background: #C00; }

/*もっと見る*/
.moreLink {
  text-align: right;
  font-size: 10px;
  line-height: 1.5;
  margin: 0 0; }
  .moreLink a {
    display: inline-block;
    border: solid 1px #CCC;
    background-color: #FFF;
    border-radius: 4px;
    padding: 5px 10px;
    text-decoration: none;
    color: #333; }

/*ユーザー*/
.user {
  margin: 20px 0; }
  .user .title {
    font-size: 18px;
    font-weight: 700; }
  .user .userList {
    font-size: 0; }
    .user .userList li {
      display: inline-block;
      vertical-align: top;
      width: 24%;
      margin: 0 1% 1% 0; }
      .user .userList li:nth-of-type(4n) {
        margin-right: 0; }
    .user .userList img {
      max-width: 100%;
      height: auto; }

/*HOME　ランキング*/
.rankingBlock {
  margin: 0 0 30px; }
  .rankingBlock::after {
    content: " ";
    display: block;
    clear: both; }
  .rankingBlock .entryListBlock {
    margin: 0 0 0; }
  .rankingBlock ul li {
    width: 24%;
    margin: 0 1.3% 3% 0;
    display: inline-block;
    vertical-align: top;
    position: relative; }
    .rankingBlock ul li:nth-of-type(4n) {
      margin-right: 0; }
    .rankingBlock ul li::before {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      float: left;
      font-size: 11px;
      font-weight: 400;
      line-height: 20px;
      width: 20px;
      height: 20px;
      text-align: center;
      background-color: #333;
      color: #FFF;
      margin: 0 5px 0 0;
      z-index: 1000; }
    .rankingBlock ul li:last-child {
      margin: 0; }
    .rankingBlock ul li .entryLinkBlock .thumbnail {
      width: 100%;
      background-color: #FFF; }
    .rankingBlock ul li .entryLinkBlock .textBody .brandName {
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
      word-break: break-all; }
  .rankingBlock .rankingParts ul {
    counter-reset: numberParts; }
    .rankingBlock .rankingParts ul li::before {
      counter-increment: numberParts;
      content: counter(numberParts); }
    .rankingBlock .rankingParts ul li:nth-of-type(1)::before {
      background-color: #C00; }
    .rankingBlock .rankingParts ul li:nth-of-type(2)::before {
      background-color: #C00; }
    .rankingBlock .rankingParts ul li:nth-of-type(3)::before {
      background-color: #C00; }

/*タグクラウド*/
.tagCloud {
  margin: 20px 0; }
  .tagCloud .tagsList {
    font-size: 0; }
    .tagCloud .tagsList li {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.2;
      display: inline-block;
      vertical-align: middle;
      margin: 0 3px 3px 0; }
      .tagCloud .tagsList li a {
        display: block;
        color: #333;
        padding: 5px 10px;
        background-color: #F1F1F1;
        border: solid 1px #CCC;
        border-radius: 5px; }

.buttonBlock {
  margin: 2.5em 0 1em;
  text-align: center;
  position: relative; }
  .buttonBlock .buttonCaption {
    font-size: 12px;
    display: block;
    margin: 5px 0 0; }

.goo-button {
  display: inline-block;
  margin: 0;
  width: 35px;
  height: 35px;
  background: url(//www.bikebros.co.jp/bb_img/brand/btn_like.png) no-repeat 0 0;
  background-size: cover;
  vertical-align: middle; }
  .goo-button:hover {
    background-position: 0 -35px; }
  .goo-button .gooText {
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    margin: 0 5px; }

.goo-button-warning {
  background: #ffa535; }

.goo-button-success {
  background: #74c14c; }

.goo-button-message {
  border-radius: 30px;
  color: #FFF;
  display: block;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 20px;
  text-align: center;
  width: 150px;
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  margin: 0 auto; }

.balloon {
  position: relative;
  display: inline-block;
  padding: 4px 5px;
  width: 40px;
  color: #555;
  font-size: 13px;
  font-weight: 700;
  background: #EEE;
  border-radius: 4px; }

.balloon:before {
  content: "";
  position: absolute;
  top: 85%;
  left: 100%;
  margin-top: -14px;
  border: 5px solid transparent;
  border-left: 5px solid #EEE; }

/*基本情報*/
.profileBlock {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 50px; }
  .profileBlock::after {
    content: " ";
    display: block;
    clear: both; }
  .profileBlock dt {
    font-weight: 700;
    float: left;
    width: 10em;
    clear: both;
    margin: 0 0 5px; }
  .profileBlock dd {
    padding-left: 11em;
    margin: 0 0 5px; }

/*記事下バッジバナー*/
.badgeBanner {
  font-size: 0;
  margin: 30px 0;
  padding: 10px;
  background-color: #FFF; }
  .badgeBanner::after {
    content: " ";
    display: block;
    clear: both; }
  .badgeBanner > div {
    display: inline-block;
    width: 300px;
    height: 250px; }
    .badgeBanner > div:first-child {
      margin-right: 20px; }

.inductionBlock {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 10px;
  border: solid 1px #FFBF00;
  padding: 10px; }