

@charset "UTF-8";

.floor{
  margin: 3px 0 20px 10px!important;
  position: relative;
  padding-left: 20px;
  font-weight: 500;
}
.floor::before{
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background-image: url(/images/sp_common/sprite_icon.png);
  background-position: -346px 0;
  background-size: 500px auto;
  vertical-align: middle;
  content: " ";
  transform: translateY(-50%);
}
.shopinfo-wrap{
  margin: 20px 0;
}
.shoppage-link{
  text-align: center;
}
.shoppage-link img{
  height: auto;
  border: 1px solid #f5f5f5;
}
.box_article .list_recommend p.limit{
  font-weight: 500;
  color: #000000;
  margin-top: 6px;
  font-size: 14px;
  letter-spacing:0.05em;
  align-items: center;
}

.box_article .list_recommend p.limit span {
  color: #db0c0c;
}

.box_article .list_recommend .mark-flex p.limit:before {
  display: inline-block;
  width: 25px;
  height: 24px;
  background-image: url(/images/sp_common/sprite_icon.png);
  background-size: 560px auto;
  vertical-align: middle;
  content: " ";
  background-position: -223px 0;
  border: none;
  padding: 0;
}
.only{
  font-weight: 500;
  color: #948431;
  margin-right: 20px;
}
.only::before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 41px;
  height: 28px;
  margin-right: 7px;
  background: url(/image/SHIBUYATOKYUFoodshow_ONLY.png) no-repeat center/contain;
  margin-bottom: 10px;
}

  .mark-flex {
    display: flex;
  }
p.limit {
    font-weight: 600;
    color: #db0c0c;
}
.box_article .list_recommend p.hold_period,.box_article .list_recommend p.hold_place,.box_article .list_recommend p.limit {
    margin-bottom:10px;
    position:relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}
p.hold_period::before,
.hold_place::before,
p.limit::before {
    content:"販売期間";
    display:block;
    padding: 3px 7px;
    border:1px solid;
    font-size: 12px;
    line-height: 1.0;
}

p.limit span::before,
p.limit b::before,
p.limit font::before {
    display:none;
}
.hold_place::before {
   content:"販売場所"; 
}
.box_article .list_recommend p.limit:before{
   content:"限定数";
   background: transparent;
   width: auto;
   border: 1px solid;
   padding: 3px 5px;
   line-height: 1.0;
   font-size: 12px;
}
@media screen and (min-width:980px){
  /* +++++++++++++++++++++++++++++++

   article.css
   PC用

  +++++++++++++++++++++++++++++++ */
  .box_article .list_recommend p.limit{
    margin: 5px 0 0;
  }
  .only{
    margin: 0 20px 0 0;
    font-weight: 500;
    color: #948431;
    font-size: 15px;
  }
  .item .inner{
    position: relative;
  }
  .mark-flex {
    position: absolute;
    top: -38px;
    left: 0;
  }

  /*
  詳細
  -----------------------------------*/
  .box_article {
      max-width: 980px;
      margin: 0 auto;
  }
  /* 記事ヘッダ */
  .box_article header {
      margin-bottom: 20px;
      border-top: 1px solid #d9d9d9;
  }
  .headline_topics {
      padding: 10px;
      font-size: 24px;
      background: #e9f7ff;
      font-weight: 400;
  }

  .headline_topics.winecolumn {
      color:#cc3399;
  }
  .headline_topics.babycolumn {
      color:#ff6600;
  }
  .headline_topics.sweetscolumn {
      color:#e94a64;
  }
  /**/
  .description.winecolumn {
    margin-bottom:0!important;
    padding-bottom:0!important;
    font-size:18px!important;
      color:#cc3399;
    font-weight:500;
  }
  .description.babycolumn {
    margin-bottom:0!important;
    padding-bottom:0!important;
    font-size:18px!important;
      color:#ff6600;
    font-weight:500;
  }
  .description.sweetscolumn {
    margin-bottom:0!important;
    padding-bottom:0!important;
    font-size:18px!important;
      color:#e94a64;
    font-weight:500;
  }

  /**/
  .event_data { margin: 5px 10px 0; }
  .box_article header .tags { margin: 0 10px; }
  .event_data li {
      margin-bottom: 5px;
      padding-left: 12px;
      background: url(/images/common/ico_square.png) no-repeat left 5px;
      background-size: 8px;
      font-size: 12px;
  }

  /* 記事ヘッダ：予告 */
  .advance_notice {
      position: relative;
      padding-left: 50px;
      background: #fff3f2 url(/images/common/bg_texture_w.png) repeat left top;
      background-size: 10px;
  }
  .ico_advance_notice {
      position: absolute;
      top: 20px;
      left: 10px;
      display: inline-block;
      padding: 3px 5px 2px;
      background: #f23524;
      color: #fff;
      font-size: 10px;
  }

  /* 記事 */
  .box_article .box { margin-bottom: 30px; }
  .box_article .box .image {
      max-width: 100%;
      height: auto;
      padding: 0;
      text-align: center;
  }
  .box_article .box p {
      margin: 20px;
      font-size: 16px;
      line-height: 1.8;
  }
  .box_article .box .message {
      margin: 20px 0;
      padding: 5px 0;
      background: #e6e6e6;
  }
  .box_article .box .message .image_wrap {
      margin: 15px 20px;
  }
  .box_article .box .message .image {
      background: #f5f5f5 url(/images/common/bg_texture_bk.png) repeat left top;
      background-size: 12px;
      text-align: center;
      vertical-align: middle;
      height: 400px;
  }
  .box_article .box.main0 .message .image img{
      position: relative;
      top: 0;
      left: 0;
      transform: translate(0, 0);
      width:100%;
      max-width: 100%;
  }
  /*ついか*/.box_article .box .message .image img{max-width:250px;}
  /*ついか*/.box_article .box.main0 .image {min-height: 400px;position: relative;}
  .box_article .box.main0 .image img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    height: 100%;
    width: auto;
  }


  .box_article .message p:first-child { margin-top: 10px; }
  .box_article .message .title { font-weight: 500; }

  /* リンク */
  .box_link a {
      position: relative;
      display: block;
      padding: 15px 30px 15px 15px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      font-size: 15px;
      transition: 0.1s linear;
  }
  .box_link a:hover {
      background: #333;
      color: #fff;
      text-decoration: none;
  }
  .box_link a:after {
      position: absolute;
      top: 50%;
      right: 20px;
      display: block;
      width: 9px;
      height: 14px;
      margin-top: -7px;
      background: url(/images/common/sprite_arrow.png) no-repeat -50px -100px;
      background-size: 200px auto;
      content: " ";
  }
  .box_link a:hover:after { background-position: -50px -150px; }

  /* コピーライト表示 */
  .box_article .copyright {
      margin: 30px 0;
      padding: 10px 20px;
      border-top: 1px solid #ccc;
      font-size: 14px;
  }
  .box_article .copyright p { margin: 0; }

  /* おすすめ商品 */
  .list_recommend {
      max-width: 980px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 0 10%;
  }
  .list_recommend .item {
      position: relative;
      min-height: 250px;
      margin: 0;
      padding: 80px 0;
      border: none;
      border-bottom: 1px solid #ccc;
  }

  .list_recommend .item2 {
      position: relative;
      min-height: 250px;/*200px;*/
      margin: 0;
      padding: 5px 5px 5px /*225px*/275px;
      border: none;
  }
  .list_recommend .item:first-child, .list_recommend .item:nth-of-type(2){ border-top: 1px solid #ccc; }

  .box_article .list_recommend .image {
    background-size: 15px 16px;
    text-align: center;
    vertical-align: middle;
    position: relative;
  }
    .box_article .list_recommend .image img{
      width:100%;
  }
  .text-box {
    width: 90%;
    margin: 0 auto;
    position: relative;
}
  .box_article .list_recommend .title {
      font-size: 16px;
      margin: 0 0 0 3.5px;
  }

  .box_article .list_recommend .title b {
      color: #db0c0c;
  }
    
  .box_article .list_recommend .title span {
      font-size: 10.5px;
      font-weight: 500;
  }
  .box_article .list_recommend p {
      margin: 10px 0;
      font-size: 15px;
  }
  .button_netshop {
      width: 400px;
      margin: 20px auto 30px;
      padding: 15px 0 14px 20px;
      background: #555;
      color: #fff;
      font-size: 13px;
  }
  .button_netshop:before {
      position: absolute;
      top: 50%;
      left: 20px;
      display: block;
      width: 22px;
      height: 22px;
      margin-top: -11px;
      background: url(/images/common/sprite_icon.png) no-repeat -350px -200px;
        background-size: 500px auto;
        content: " ";
  }
  .button_netshop:hover:before { background-position: -400px -200px; }


  /* ショップリスト */
  .box_article .list_shop_block { margin: 30px auto; }

  /* 記事フッタ（SNS) */
  .box_article footer {
      padding: 10px;
      background: #e6e6e6;
  }
  .box_article .twitter,
  .box_article .facebook {
      display: inline-block;
      width: 28px;
      height: 18px;
      margin: 0 3px;
      padding: 5px 0;
      border: 1px solid #000;
      border-radius: 3px;
      color: #fff;
      font-size: 20px;
      font-weight: 500;
      text-align: center;
      line-height: 18px;
      transition: 0.1s linear;
  }
  .box_article .twitter { background: #000; }
  .box_article .facebook {
      border-color: #3b5998;
      background: #3b5998;
  }

  .box_article .twitter:hover {
      background: #fff;
      color: #000;
      text-decoration: none;
  }
  .box_article .facebook:hover {
      background: #fff;
      color: #3b5998;
      text-decoration: none;
  }  
  .shoppage-link img{
    width: 25%;
    margin: 0 auto 10px;
  }
}

@media screen and (min-width:768px) and (max-width:979px){
  /* +++++++++++++++++++++++++++++++

   topics.css
   Tablet用

  +++++++++++++++++++++++++++++++ */

  /*
  詳細
  -----------------------------------*/
  .box_article {
      margin: 0 20px;
  }
  /* 記事ヘッダ */
  .box_article header {
      margin-bottom: 20px;
      border-top: 1px solid #d9d9d9;
  }
  .headline_topics {
      padding: 10px;
      font-size: 24px;
      font-weight: 300;
      background: #e9f7ff;
  }

  .headline_topics.winecolumn {
      color:#cc3399;
    font-weight:300;
  }
  .headline_topics.babycolumn {
      color:#ff6600;
    font-weight:300;
  }
  .headline_topics.sweetscolumn {
      color:#e94a64;
    font-weight:300;
  }
  /**/
  .description{
  }
  .description.winecolumn {
    font-size:18px!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
      color:#cc3399;
    font-weight:500;
  }
  .description.babycolumn {
    font-size:18px!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
      color:#ff6600;
    font-weight:500;
  }
  .description.sweetscolumn {
    font-size:18px!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
      color:#e94a64;
    font-weight:500;
  }

  /**/

  .event_data,
  .box_article header .tags { margin: 0 10px; }
  .event_data li {
      margin-bottom: 5px;
      padding-left: 12px;
      background: url(/images/common/ico_square.png) no-repeat left 5px;
      background-size: 8px;
      font-size: 12px;
  }
  /* 記事ヘッダ：予告 */
  .advance_notice {
      position: relative;
      padding-left: 50px;
      background: #fff3f2 url(/images/common/bg_texture_w.png) repeat left top;
      background-size: 10px;
  }
  .ico_advance_notice {
      position: absolute;
      top: 20px;
      left: 10px;
      display: inline-block;
      padding: 3px 5px 2px;
      background: #f23524;
      color: #fff;
      font-size: 10px;
  }

  /* 記事 */
  .box_article .box { margin-bottom: 30px; }
  .box_article .box .image {
      max-width: 100%;
      height: auto;
      max-height: 400px;
      padding: 0;
      text-align: center;
  }
  .box_article .box .image img {max-height: 400px;}
  .box_article .box p {
      margin: 20px;
      font-size: 16px;
      line-height: 1.8;
  }
  .box_article .box .message {
      margin: 20px 0;
      padding: 5px 0;
      background: #e6e6e6;
  }
  .box_article .box .message .image_wrap {
      margin: 15px 20px;
  }
  .box_article .box .message .image {
      background: #f5f5f5 url(/images/common/bg_texture_bk.png) repeat left top;
      background-size: 12px;
      text-align: center;
      vertical-align: middle;
  }
  .box_article .message .text { margin-left: 220px; }
  .box_article .message .title { font-weight: 500; }
  .box_article .message p:first-child { margin-top: 10px; }

  .box_article .box p:last-child,
  .box_article .box .message:last-child { margin-bottom: 0; }

  /* リンク */
  .box_link a {
      position: relative;
      display: block;
      padding: 15px 30px 15px 15px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      font-size: 15px;
      transition: 0.1s linear;
  }
  .box_link a.hover {
      background: #fff;
      text-decoration: none;
  }
  .box_link a:after {
      position: absolute;
      top: 50%;
      right: 20px;
      display: block;
      width: 9px;
      height: 14px;
      margin-top: -7px;
      background: url(/images/common/sprite_arrow.png) no-repeat -50px -100px;
      background-size: 200px auto;
      content: " ";
  }
  .box_link a.hover:after { background-position: -50px -150px; }

  /* コピーライト表示 */
  .box_article .copyright {
      margin: 30px 0;
      padding: 10px 20px;
      border-top: 1px solid #ccc;
      font-size: 14px;
  }
  .box_article .copyright p { margin: 0; }

  /* おすすめ商品 */
  .list_recommend {
      width: 700px;
      margin: 0 auto;
      border-top: 1px solid #ccc;
  }
  .list_recommend .item {
      position: relative;
      border-bottom: 1px solid #ccc;
  }
  .list_recommend .inner {
      position: relative;
      min-height: 158px;/*118px;*/
      padding: 50px 10px 50px 240px;/*200px;*/
  }
  .list_recommend .image_wrap {
      position: absolute;
      top: 50px;
      left: 0;
      display: table;
      width: 220px;/*180px;*/
      height: 220px;/*180px;*/
  }
  .list_recommend .image {
      display: table-cell;
      width: 220px;/*180px;*/
      height: 220px;/*180px;*/
      background: #f5f5f5 url(/images/common/bg_texture_bk.png) repeat left top;
      background-size: 15px 16px;
      text-align: center;
      vertical-align: middle;
  }
  .box_article .list_recommend .image img { 
      max-width: 220px;/*180px;*/
      max-height: 220px;/*180px;*/
  }
  .box_article .list_recommend .title {
      margin: 0 0 15px;
      padding-top: 10px;
      font-size: 16px;
      font-weight: 500;
  }
  .box_article .list_recommend p {
      margin: 0;
      font-size: 13px;
      line-height: 1.5;

  }

  /* ネットで買えるボタン */
  .list_recommend .box_button {
      position: absolute;
      right: 10px;
      bottom: 10px;

  }
  .button_netshop {
      width: 300px;
      padding: 10px 0 9px;
      background: #555;
    color: #fff;
  }
  .button_netshop:before {
      position: absolute;
      top: 50%;
      left: 20px;
      display: block;
      width: 15px;
      height: 15px;
      margin-top: -7px;
      background: url(/images/sp_common/sprite_icon.png) no-repeat -250px -150px;
        background-size: 500px auto;
        content: " ";
  }

  /* ショップリスト */
  .box_article .list_shop_block { margin: 30px auto; }

  /* 記事フッタ（SNS) */
  .box_article footer {
      padding: 10px;
      background: #e6e6e6;
  }
  .box_article .twitter,
  .box_article .facebook {
      display: inline-block;
      width: 30px;
      height: 20px;
      margin: 0 3px;
      padding: 5px 0;
      border-radius: 3px;
      color: #fff;
      font-size: 20px;
      font-weight: 500;
      text-align: center;
      line-height: 20px;
  }
  .box_article .twitter { background: #000; }
  .box_article .facebook { background: #3b5998; }
  
    .shoppage-link img{
      width: 25%;
      margin: 0 auto 10px;
    }

}

@media screen and (max-width: 767px){


  /* +++++++++++++++++++++++++++++++

   topics.css
   Smartphone用

  +++++++++++++++++++++++++++++++ */
  /*
  詳細
  -----------------------------------*/
  /* 記事ヘッダ */
  .box_article header { margin-bottom: 20px; }
  .headline_topics {
      padding: 10px;
      font-size: 18px;
      background: #e9f7ff;
      font-weight: 500;
  }

  .event_data,
  .box_article header .tags { margin: 0 10px; }
  .event_data li {
      padding-left: 12px;
      background: url(/images/common/ico_square.png) no-repeat left 5px;
      background-size: 8px;
      font-size: 12px;
  }
  .headline_topics.winecolumn {
      color:#cc3399;
    font-weight:300;
  }
  .headline_topics.babycolumn {
      color:#ff6600;
    font-weight:300;
  }
  .headline_topics.sweetscolumn {
      color:#e94a64;
    font-weight:300;
  }


  /**/
  .description{
  }
  .description.winecolumn {
    margin-bottom:0!important;
    padding-bottom:0!important;
    font-size:18px!important;
      color:#cc3399;
    font-weight:500;
  }
  .description.babycolumn {
    margin-bottom:0!important;
    padding-bottom:0!important;
    font-size:18px!important;
      color:#ff6600;
    font-weight:500;
  }
  .description.sweetscolumn {
    margin-bottom:0!important;
    padding-bottom:0!important;
    font-size:18px!important;
      color:#e94a64;
    font-weight:500;
  }

  /**/


  /* 記事ヘッダ：予告 */
  .advance_notice {
      position: relative;
      padding-left: 44px;
      background: #fff3f2 url(/images/common/bg_texture_w.png) repeat left top;
      background-size: 10px;
  }
  .ico_advance_notice {
      position: absolute;
      top: 14px;
      left: 10px;
      display: inline-block;
      padding: 3px 5px 2px;
      background: #f23524;
      color: #fff;
      font-size: 10px;
  }


  /* 記事 */
  .box_article .box { margin-bottom: 20px; }
  .box_article .box .image {
      max-width: 100%;
      height: auto;
      max-height: 400px;
      padding: 0;
      text-align: center;
  }
  .box_article .box .image img { max-height: 400px; }
  .box_article .box p {
      margin: 15px 10px;
      font-size: 16px;
  }
  .box_article .box .message {
      margin: 15px 10px;
      padding: 10px 0;
      background: #e6e6e6;
  }
  .box_article .box .message .image_wrap {
      margin: 0 auto 10px;
      background: #f5f5f5 url(/images/common/bg_texture_bk.png) repeat left top;
      background-size: 12px;
      text-align: center;
      vertical-align: middle;
      width: 90%;
  }
  .box_article .box .message .image {
      display: table-cell;
      background: #f5f5f5 url(/images/common/bg_texture_bk.png) repeat left top;
      background-size: 12px;
      text-align: center;
      vertical-align: middle;
  }
  .box_article .message .title { font-weight: 500; }
  .box_article .message p:first-child { margin-top: 0; }

  .box_article .box p:last-child,
  .box_article .box .message:last-child { margin-bottom: 0; }

  /* リンク */
  .box_link a {
      position: relative;
      display: block;
      padding: 15px 30px 15px 15px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      font-size: 15px;
      transition: 0.1s linear;
  }
  .box_link a:after {
      position: absolute;
      top: 50%;
      right: 20px;
      display: block;
      width: 9px;
      height: 16px;
      margin-top: -7px;
      background: url(/images/sp_common/sprite_arrow.png) no-repeat -50px 0;
      background-size: 200px auto;
      content: " ";
  }

  /* コピーライト表示 */
  .box_article .copyright {
      margin: 30px 0;
      padding: 10px;
      border-top: 1px solid #ccc;
      font-size: 13px;
  }
  .box_article .copyright p { margin: 0; }

  /* おすすめ商品 */
  .list_recommend .item { 
    position: relative;
    border-bottom: 1px solid #ccc; 
  }
  .list_recommend .item:nth-of-type(n+2) { margin-top: 20px;}
  .list_recommend .inner {
    padding:50px 0;
  }
  .box_article .list_recommend .image_wrap {
    display:table;
    text-align:center;
    margin: 0 auto 5px auto;
  }
  .box_article .list_recommend .image {
      display: table-cell;
      height: 290px;
      background: #f5f5f5 url(/images/common/bg_texture_bk.png) repeat left top;
      background-size: 15px 16px;
      text-align: center;
      vertical-align: middle;
  }


  .image_wrap.mode_pc {
      display: none!important;
  }

  .text-box{
    width: 80%;
    margin: 0 auto;
    position: relative;
  }
  .box_article .list_recommend .image img { 
      max-height: 100%;

  }
  .box_article .list_recommend .title {
      margin: 20px 0 10px;
      font-size: 16px;
      font-weight: 500;
  }
  .box_article .list_recommend p {
      margin: 0;
      font-size: 13px;
      line-height: 1.5;
  }
  .list_recommend .box_button { margin: 0 10px 10px; }




  /* ネットで買えるボタン */
  .button_netshop {
      margin: 20px auto 30px;
      padding: 10px 0 9px;
      background: #555;
    color: #fff;
  }
  .button_netshop:before {
      position: absolute;
      top: 50%;
      left: 20px;
      display: block;
      width: 15px;
      height: 15px;
      margin-top: -7px;
      background: url(/images/sp_common/sprite_icon.png) no-repeat -250px -150px;
        background-size: 500px auto;
        content: " ";
  }

  /* ショップリスト */
  .box_article .list_shop_block { margin: 0 0 20px; }

  /* 記事フッタ（SNS) */
  .box_article footer {
      padding: 5px 0;
      background: #e6e6e6;
      text-align: center;
  }
  .box_article .twitter,
  .box_article .facebook {
      display: inline-block;
      width: 40px;
      height: 30px;
      margin: 0 3px;
      padding: 5px 0;
      border-radius: 3px;
      color: #fff;
      font-size: 20px;
      font-weight: 500;
      text-align: center;
      line-height: 30px;
  }
  .box_article .twitter { background: #000; }
  .box_article .facebook { background: #3b5998; }
  
  .shoppage-link img{
      width: 50%;
      margin: 0 auto 10px;
    }

  .only{
    margin: 0 14px 0 0;
    font-size: 13px;
  }
  .mark-flex {
  margin-left: 20px;
  }
}



