@charset "UTF-8";
/* CSS Document */
body {
  background: #EAEDF2 !important;
  font-family: 'Noto Sans JP', sans-serif; }

header {
  text-align: center;
  padding: 3vh 0 3vh; }
  header .logo {
    width: 160px;
    margin: 0 auto; }

.contents {
  background: #fff;
  padding: 32px;
  margin: 0 16px;
  border: #D5E1E3 solid 1px;
  border-radius: 3px; }
  .contents .info {
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px; }
    .contents .info .thum {
      margin-bottom: 16px; }
    .contents .info h1 {
      font-size: 22px;
      font-weight: 700; }
    .contents .info .brand {
      color: #A6ACB0;
      font-size: 12px;
      padding: 0.4vh 0 2.3vh;
      font-style: italic; }
    .contents .info .comment {
      font-size: 13px;
      font-weight: normal;
      color: #777;
      margin: 16px 0;
      text-align: left; }
  .contents .links {
    text-align: center;
    font-weight: bold; }
    .contents .links a {
      border-radius: 100px;
      display: block;
      padding: 1.6vh 0 2vh;
      color: #fff;
      margin-bottom: 2vh;
      font-size: 16px; }
      .contents .links a span {
        font-size: 13px; }
    .contents .links .amazon_btn a {
      background: #F69903;
      border-bottom: #C67A00 solid 3px; }
    .contents .links .rakuten_btn a {
      background: #C20004;
      border-bottom: #A00003 solid 3px; }
    .contents .links .yahoo_btn a {
      background: #FBDA46;
      border-bottom: #CBAE30 solid 3px;
      color: #000; }
    .contents .links .naturum_btn a {
      background: #2C7F3C;
      border-bottom: #1C5226 solid 3px;
      color: #fff; }

.sns {
  margin-top: 32px; }
  .sns h3 {
    background: #41B291;
    color: #fff;
    text-align: center;
    padding: 12px;
    font-weight: bold;
    font-size: 18px; }
  .sns .base {
    margin: 16px;
    border-bottom: #D5E1E3 solid 1px;
    border-radius: 3px; }
    .sns .base li {
      margin-bottom: 16px; }

.recommend {
  margin-top: 32px; }
  .recommend .base h3 {
    background: #41B291;
    color: #fff;
    text-align: center;
    padding: 12px;
    font-weight: bold;
    font-size: 18px; }
  .recommend .base ul {
    padding: 16px; }
  .recommend .base li {
    margin: 16px; }
    .recommend .base li a {
      display: block;
      background: #fff url("https://bbass-mag.com/wp-content/uploads/2022/03/outline_chevron_right_black_24dp.png") no-repeat 98% 50%/20px;
      border: #D5E1E3 solid 1px;
      border-bottom: #D5E1E3 solid 3px;
      border-radius: 4px;
      padding: 12px;
      color: #000;
      overflow: hidden;
      margin-bottom: 12px;
      display: flex;
      justify-content: center;
      align-items: center; }
      .recommend .base li a .img {
        width: 50%; }
      .recommend .base li a .body {
        width: 50%;
        padding: 0 5%;
        font-weight: bold;
        font-size: 14px; }
        .recommend .base li a .body span {
          color: #A0A6B1;
          display: block;
          font-size: 10px;
          margin-bottom: 4px; }
  .recommend .base_a_link ul {
    padding: 0; }
    .recommend .base_a_link ul li {
      background: #fff url("https://bbass-mag.com/wp-content/uploads/2022/03/outline_chevron_right_black_24dp.png") no-repeat 96% 88%/20px;
      border: #D5E1E3 solid 1px;
      border-bottom: #D5E1E3 solid 3px;
      border-radius: 4px; }
      .recommend .base_a_link ul li a {
        display: block;
        background: #fff url("https://bbass-mag.com/wp-content/uploads/2022/03/outline_chevron_right_black_24dp.png") no-repeat 98% 50%/20px;
        padding: 12px;
        border: none;
        color: #000;
        overflow: hidden;
        margin-bottom: 12px;
        display: flex;
        justify-content: center;
        align-items: center; }
        .recommend .base_a_link ul li a .img {
          width: 50%; }
        .recommend .base_a_link ul li a .body {
          width: 50%;
          padding: 0 5%;
          font-weight: bold;
          font-size: 14px; }
          .recommend .base_a_link ul li a .body span {
            color: #A0A6B1;
            display: block;
            font-size: 10px;
            margin-bottom: 4px; }
      .recommend .base_a_link ul li .links {
        text-align: center;
        font-weight: bold;
        overflow: hidden;
        padding: 10px 0% 10px 2.5%;
        background: #F0F4FB; }
        .recommend .base_a_link ul li .links a {
          border-radius: 100px;
          display: block;
          padding: 9px 0 10px;
          color: #fff;
          margin-bottom: 5px;
          font-size: 13px; }
          .recommend .base_a_link ul li .links a span {
            font-size: 9px;
            font-weight: normal; }
        .recommend .base_a_link ul li .links .amazon_btn {
          float: left;
          width: 100%;
          margin-right: 0%; }
          .recommend .base_a_link ul li .links .amazon_btn a {
            background: #F69903;
            border-bottom: #C67A00 solid 3px; }
        .recommend .base_a_link ul li .links .rakuten_btn {
          float: left;
          width: 100%;
          margin-right: 0%; }
          .recommend .base_a_link ul li .links .rakuten_btn a {
            background: #C20004;
            border-bottom: #A00003 solid 3px; }
        .recommend .base_a_link ul li .links .yahoo_btn {
          float: left;
          width: 100%;
          margin-right: 0%; }
          .recommend .base_a_link ul li .links .yahoo_btn a {
            background: #FBDA46;
            border-bottom: #CBAE30 solid 3px;
            color: #000; }
  .recommend .base_aa_link li {
    margin-bottom: 16px; }
    .recommend .base_aa_link li.first {
      position: relative;
      border: #C9A14E solid 3px; }
      .recommend .base_aa_link li.first .rank {
        position: absolute;
        top: -13px;
        left: -13px; }
        .recommend .base_aa_link li.first .rank img {
          width: 80px; }
  .recommend .base_aa_link .body {
    width: 100%;
    padding: 16px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    border-top: #D5E1E3 solid 1px; }
    .recommend .base_aa_link .body span {
      color: #C9A14E;
      display: block;
      font-size: 10px;
      margin-bottom: 4px; }

.home {
  background: #fff !important; }
  .home header {
    text-align: center;
    padding: 38px 0; }
    .home header .logo {
      width: 200px; }
  .home .home_contents {
    background: #29a986;
    margin-top: 76px; }
  .home .main_slider {
    position: relative;
    top: -50px; }
    .home .main_slider .scroll_content {
      /* リスト全体のスタイル */
      display: flex;
      margin: 0;
      padding: 0 24px;
      overflow-x: auto;
      padding-bottom: 40px;
      margin-bottom: -50px; }
    .home .main_slider .scroll_content li {
      /* 各リストのスタイル */
      width: 80%;
      margin: 0 14px 0 0;
      flex-shrink: 0;
      list-style: none;
      background: #000;
      overflow: hidden;
      border-radius: 10px;
      position: relative;
      box-shadow: 0px 14px 29px 0px rgba(5, 40, 31, 0.29); }
      .home .main_slider .scroll_content li a {
        display: block; }
        .home .main_slider .scroll_content li a:hover {
          opacity: .5; }
      .home .main_slider .scroll_content li .ttl {
        position: absolute;
        bottom: 14px;
        left: 14px; }
        .home .main_slider .scroll_content li .ttl .icon {
          margin-bottom: 7px; }
          .home .main_slider .scroll_content li .ttl .icon span {
            border-radius: 100px;
            padding: 2px 10px 3px;
            color: #fff;
            background: #29a986;
            font-size: 10px; }
        .home .main_slider .scroll_content li .ttl h2 {
          text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
          color: #fff;
          font-weight: bold;
          font-size: 15px; }
    .home .main_slider .scroll_content img {
      /* 画像のスタイル */
      width: 100%;
      max-height: 200px;
      object-fit: cover;
      opacity: 0.7; }
  .home .cat_link {
    padding: 0 24px 24px;
    background: #29a986;
    overflow: hidden; }
    .home .cat_link h2 {
      background: #000;
      color: #fff;
      padding: 8px 8px 10px;
      text-align: center;
      font-weight: bold;
      margin-bottom: 16px;
      border-radius: 5px;
      clear: both; }
    .home .cat_link ul {
      margin-right: -4%; }
      .home .cat_link ul li {
        float: left;
        width: 46%;
        margin-right: 4%;
        margin-bottom: 16px; }
        .home .cat_link ul li a {
          display: block;
          background: #fff;
          border-radius: 5px;
          text-align: center;
          font-size: 12px;
          font-weight: bold;
          overflow: hidden;
          padding: 16px;
          color: #000;
          border-bottom: #94d4c3 solid 3px; }
          .home .cat_link ul li a .thum {
            padding-bottom: 15px; }
  .home .recommend {
    background: #EAEDF2;
    margin: 0; }
    .home .recommend h3 {
      background: #000; }
  .home .new_item {
    padding: 0 24px 24px;
    background: #29a986;
    overflow: hidden; }
    .home .new_item h2 {
      background: #e3cb23;
      color: #000;
      padding: 8px 8px 10px;
      text-align: left;
      font-weight: bold;
      margin-bottom: 16px;
      border-radius: 5px;
      clear: both; }
    .home .new_item ul li {
      width: 100%;
      margin-right: 4%;
      margin-bottom: 16px;
      border: #e3cb23 solid 2px;
      border-radius: 7px;
      box-sizing: border-box; }
      .home .new_item ul li a {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 5px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        overflow: hidden;
        padding: 16px;
        color: #000;
        border-bottom: #e7e5d7 solid 5px; }
        .home .new_item ul li a .thum {
          float: left;
          width: 50%; }
        .home .new_item ul li a p {
          float: left;
          width: 50%;
          padding-left: 2%;
          text-align: left; }
  .home .month_item {
    padding: 0 24px 24px;
    background: #29a986;
    overflow: hidden; }
    .home .month_item h2 {
      background: #ff5d5d;
      color: #fff;
      padding: 8px 8px 10px;
      text-align: left;
      font-weight: bold;
      margin-bottom: 16px;
      border-radius: 5px;
      clear: both; }
    .home .month_item ul li {
      width: 100%;
      margin-right: 4%;
      margin-bottom: 16px;
      border: #ff5d5d solid 2px;
      border-radius: 7px;
      box-sizing: border-box; }
      .home .month_item ul li a {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 5px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        overflow: hidden;
        padding: 16px;
        color: #000;
        border-bottom: #e7e5d7 solid 5px; }
        .home .month_item ul li a .thum {
          float: left;
          width: 50%; }
        .home .month_item ul li a p {
          float: left;
          width: 50%;
          padding-left: 2%;
          text-align: left; }

.product_cat {
  margin-top: 0; }
  .product_cat h1 {
    background: #41B291;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding: 8px 8px 10px;
    margin-bottom: 16px; }
  .product_cat .base ul {
    padding: 0 16px; }
  .product_cat .base li a {
    display: block;
    background: #fff url("https://bbass-mag.com/wp-content/uploads/2022/03/outline_chevron_right_black_24dp.png") no-repeat 96% 88%/20px;
    border: #D5E1E3 solid 1px;
    border-bottom: #D5E1E3 solid 3px;
    border-radius: 4px;
    padding: 12px;
    color: #000;
    overflow: hidden;
    margin-bottom: 16px; }
    .product_cat .base li a .img {
      margin-bottom: 16px;
      padding: 0 32px; }
    .product_cat .base li a .body {
      border-top: #D5E1E3 solid 1px;
      padding: 14px 2.5% 5px;
      font-weight: bold;
      font-size: 14px;
      text-align: left; }
      .product_cat .base li a .body span {
        color: #29a986;
        display: block;
        font-size: 12px;
        margin-bottom: 4px; }
  .product_cat .base_a_link ul {
    padding: 0 16px; }
    .product_cat .base_a_link ul li {
      border: #D5E1E3 solid 1px;
      border-bottom: #D5E1E3 solid 3px;
      border-radius: 4px;
      margin-bottom: 16px; }
      .product_cat .base_a_link ul li .img {
        padding: 16px 32px;
        background: #fff; }
      .product_cat .base_a_link ul li a {
        display: block;
        background: #fff url("https://bbass-mag.com/wp-content/uploads/2022/03/outline_chevron_right_black_24dp.png") no-repeat 96% 60%/20px;
        padding: 12px;
        color: #000;
        overflow: hidden; }
        .product_cat .base_a_link ul li a .body {
          border-top: #D5E1E3 solid 1px;
          padding: 14px 2.5% 5px;
          font-weight: bold;
          font-size: 14px;
          text-align: left; }
          .product_cat .base_a_link ul li a .body span {
            color: #29a986;
            display: block;
            font-size: 12px;
            margin-bottom: 4px; }
      .product_cat .base_a_link ul li .links {
        text-align: center;
        font-weight: bold;
        overflow: hidden;
        padding: 15px 4%;
        background: #F0F4FB; }
        .product_cat .base_a_link ul li .links a {
          border-radius: 100px;
          display: block;
          padding: 11px 0 12px;
          color: #fff;
          margin-bottom: 9px;
          font-size: 15px; }
          .product_cat .base_a_link ul li .links a span {
            font-size: 10px;
            font-weight: normal; }
        .product_cat .base_a_link ul li .links .amazon_btn {
          float: left;
          width: 100%;
          margin-right: 0%; }
          .product_cat .base_a_link ul li .links .amazon_btn a {
            background: #F69903;
            border-bottom: #C67A00 solid 3px; }
        .product_cat .base_a_link ul li .links .rakuten_btn {
          float: left;
          width: 100%;
          margin-right: 0%; }
          .product_cat .base_a_link ul li .links .rakuten_btn a {
            background: #C20004;
            border-bottom: #A00003 solid 3px; }
        .product_cat .base_a_link ul li .links .yahoo_btn {
          float: left;
          width: 100%;
          margin-right: 0%; }
          .product_cat .base_a_link ul li .links .yahoo_btn a {
            background: #FBDA46;
            border-bottom: #CBAE30 solid 3px;
            color: #000; }
      .product_cat .base_a_link ul li.first {
        position: relative; }
        .product_cat .base_a_link ul li.first .rank {
          position: absolute;
          top: -13px;
          left: -13px; }
          .product_cat .base_a_link ul li.first .rank img {
            width: 80px; }
  .product_cat .base_a_link .comment {
    color: #777;
    font-size: 11px;
    font-weight: normal;
    padding-top: 4px; }

.feature .inner {
  padding: 16px; }
  .feature .inner h1 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 16px; }
  .feature .inner .recommend .intro {
    margin-bottom: 20px; }
  .feature .inner .recommend .base ul {
    padding: 0; }
    .feature .inner .recommend .base ul li a {
      display: block;
      background: #fff url("https://bbass-mag.com/wp-content/uploads/2022/03/outline_chevron_right_black_24dp.png") no-repeat 96% 88%/20px;
      border: #29a986 solid 3px;
      /*border-bottom: #D5E1E3 solid 3px;*/
      border-radius: 4px;
      padding: 12px;
      color: #000;
      overflow: hidden;
      margin-bottom: 16px; }
      .feature .inner .recommend .base ul li a .img {
        margin-bottom: 16px;
        padding: 0 32px;
        width: 100%; }
      .feature .inner .recommend .base ul li a .body {
        border-top: #D5E1E3 solid 1px;
        padding: 14px 2.5% 5px;
        font-weight: bold;
        font-size: 14px;
        text-align: left;
        width: 100%; }
        .feature .inner .recommend .base ul li a .body span {
          color: #29a986;
          display: block;
          font-size: 12px;
          margin-bottom: 4px; }
.feature h3.f_ttl {
  border-top: #41B291 solid 3px;
  text-align: center;
  margin: 50px 0 25px;
  padding-top: 20px;
  color: #000;
  font-weight: bold !important; }

.moreitem {
  background: #4D8CD6;
  padding: 0 8px 16px 8px;
  text-align: center; }
  .moreitem .ch {
    color: #fff;
    font-size: 13px;
    padding: 16px 0 0px; }
  .moreitem h3 {
    font-weight: bold;
    font-size: 20px;
    padding: 0 16px 16px 16px;
    color: #fff; }
    .moreitem h3 span {
      color: #E4E200;
      margin: 0 3px; }
  .moreitem .base {
    background: #fff; }
    .moreitem .base .links {
      text-align: center;
      font-weight: bold;
      overflow: hidden;
      padding: 24px;
      background: #F0F4FB; }
      .moreitem .base .links div {
        border-bottom: #cdd7e9 solid 6px;
        margin-bottom: 16px;
        border-radius: 100px; }
      .moreitem .base .links a {
        border-radius: 100px;
        display: block;
        padding: 11px 0 12px;
        color: #000;
        font-size: 15px; }
        .moreitem .base .links a span {
          font-size: 9px;
          font-weight: normal; }
      .moreitem .base .links .amazon_btn a {
        background: #fff url(https://bbass-mag.com/wp-content/uploads/2022/04/Amazon-logo-RGB-1.png) no-repeat 50% 16px/23%;
        border: #F69903 solid 2px;
        padding-top: 45px; }
      .moreitem .base .links .rakuten_btn a {
        background: #fff url(https://bbass-mag.com/wp-content/uploads/2022/04/d.png) no-repeat 50% 16px/23%;
        border: #C20004 solid 2px;
        padding-top: 45px; }
      .moreitem .base .links .yahoo_btn a {
        background: #fff url(https://bbass-mag.com/wp-content/uploads/2022/04/dd.png) no-repeat 50% 19px/50%;
        border: #FBDA46 solid 2px;
        padding-top: 45px; }

.ad {
  padding: 0 18px 0 18px;
  text-align: center; }
  .ad a {
    color: #000;
    font-weight: bold; }

.kw {
  overflow: hidden;
  background: #DCEAE6;
  padding: 16px 16px 20px;
  margin-bottom: 16px; }
  .kw .kw_ttl {
    text-align: center;
    font-weight: bold;
    margin-bottom: 13px; }
  .kw ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    .kw ul li {
      float: left;
      margin: 0 5px 5px 0; }
      .kw ul li a {
        display: block;
        background: #29A986;
        color: #fff;
        padding: 4px 15px 6px 15px;
        font-size: 12px;
        border-radius: 100px; }

.links_rakten {
  text-align: center;
  font-weight: bold;
  overflow: hidden;
  padding: 15px 8%; }
  .links_rakten a {
    border-radius: 100px;
    display: block;
    padding: 16px 0 17px;
    color: #fff;
    margin-bottom: 5px;
    font-size: 13px; }
    .links_rakten a span {
      font-size: 9px;
      font-weight: normal; }
  .links_rakten .rakuten_btn a {
    background: #C20004;
    border-bottom: #A00003 solid 3px; }

@media screen and (min-width: 768px) {
  .mag {
    width: 385px;
    margin: 0 auto; }

  .recommend {
    width: 385px;
    margin: 15px auto; }

  .home .recommend {
    width: 385px;
    margin: 0 auto; } }
.end_btn {
  margin: 0 24px 24px; }
  .end_btn a {
    background: #000;
    color: #fff;
    padding: 10px;
    text-align: center;
    display: block;
    border-radius: 5px; }

footer {
  font-size: 10px;
  text-align: center;
  padding: 24px;
  color: #777;
  border-top: #D5E1E3 solid 1px; }
  footer .link {
    margin: 10px 0; }

/* 管理人用

-------------------------------------------------------------------------------------------------------------------*/
.base .home {
  background: #fff !important; }
  .base .home header {
    text-align: center;
    padding: 38px 0; }
    .base .home header .logo {
      width: 200px; }
  .base .home .home_contents {
    background: #DD7C10;
    margin-top: 76px; }
  .base .home .main_slider {
    position: relative;
    top: -50px; }
    .base .home .main_slider .scroll_content {
      /* リスト全体のスタイル */
      display: flex;
      margin: 0;
      padding: 0 24px;
      overflow-x: auto;
      padding-bottom: 40px;
      margin-bottom: -50px; }
    .base .home .main_slider .scroll_content li {
      /* 各リストのスタイル */
      width: 80%;
      margin: 0 14px 0 0;
      flex-shrink: 0;
      list-style: none;
      background: #000;
      overflow: hidden;
      border-radius: 10px;
      position: relative;
      box-shadow: 0px 14px 29px 0px rgba(5, 40, 31, 0.29); }
      .base .home .main_slider .scroll_content li a {
        display: block; }
        .base .home .main_slider .scroll_content li a:hover {
          opacity: .5; }
      .base .home .main_slider .scroll_content li .ttl {
        position: absolute;
        bottom: 14px;
        left: 14px; }
        .base .home .main_slider .scroll_content li .ttl .icon {
          margin-bottom: 7px; }
          .base .home .main_slider .scroll_content li .ttl .icon span {
            border-radius: 100px;
            padding: 2px 10px 3px;
            color: #fff;
            background: #29a986;
            font-size: 10px; }
        .base .home .main_slider .scroll_content li .ttl h2 {
          text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
          color: #fff;
          font-weight: bold;
          font-size: 15px; }
    .base .home .main_slider .scroll_content img {
      /* 画像のスタイル */
      width: 100%;
      max-height: 200px;
      object-fit: cover;
      opacity: 0.7; }
  .base .home .cat_link {
    padding: 0 24px 24px;
    background: #DD7C10;
    overflow: hidden; }
    .base .home .cat_link h2 {
      background: #000;
      color: #fff;
      padding: 8px 8px 10px;
      text-align: center;
      font-weight: bold;
      margin-bottom: 16px;
      border-radius: 5px;
      clear: both; }
    .base .home .cat_link ul {
      margin-right: -4%; }
      .base .home .cat_link ul li {
        float: left;
        width: 46%;
        margin-right: 4%;
        margin-bottom: 16px; }
        .base .home .cat_link ul li a {
          display: block;
          background: #fff;
          border-radius: 5px;
          text-align: center;
          font-size: 12px;
          font-weight: bold;
          overflow: hidden;
          padding: 16px;
          color: #000;
          border-bottom: #94d4c3 solid 3px; }
          .base .home .cat_link ul li a .thum {
            padding-bottom: 15px; }