@charset "utf-8";

/* +++++++++++++++++++++++++++++++

 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;
}

.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 {
    float: left;
    display: table;
    margin: 15px 20px;
}
.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 .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: 0 10px 62px 240px;/*200px;*/
}
.list_recommend .image_wrap {
    position: absolute;
    top: 0;
    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 5px;
    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;
}
.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: #1da1f2; }
.box_article .facebook { background: #3b5998; }