@charset "shift_jis";

/* ==================================================

   基本設定

================================================== */

#wash_tate_mtx {
    width: 750px;
    margin: 0;
    padding: 0;
    color: #121212;
    line-height: 1;
}

#wash_tate_mtx a {
	color: #121212;
	text-decoration: none;
}
#wash_tate_mtx a:hover {
    opacity:0.8;
}

#wash_tate_mtx img,
#wash_tate_mtx a img {
	width: 100%;
    height: auto;
    vertical-align: bottom;
}

#wash_tate_mtx .pc_none{ display: none; }

/* リスト汎用 */
#wash_tate_mtx ul[class^="col_"] {
	width: 100%;
	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	box-sizing: border-box;
}
#wash_tate_mtx ul[class^="col_"] > li {
	margin-right: 15px;
	text-align: center;
	box-sizing: border-box;
}

#wash_tate_mtx .col_1 > li { width: 100%; }
#wash_tate_mtx .col_2 > li { width: calc((100% - 15px*1)/2); }
#wash_tate_mtx .col_3 > li { width: calc((100% - 15px*2)/3); }
#wash_tate_mtx .col_4 > li { width: calc((100% - 15px*3)/4); }

#wash_tate_mtx .col_1 > li,
#wash_tate_mtx .col_2 > li:nth-child(2n),
#wash_tate_mtx .col_2 > li:last-child,
#wash_tate_mtx .col_3 > li:last-child,
#wash_tate_mtx .col_4 > li:last-child { margin-right: 0; }

#wash_tate_mtx ul[class^="col_"] > li img,
#wash_tate_mtx ul[class^="col_"] > li a img {
	width: 100%;
    height: auto;
}

/* ==================================================

   見出し

================================================== */

#wash_tate_mtx h2 {
    width: 100%;
    margin-bottom: 20px;
}
#wash_tate_mtx h3 {
    width: 100%;
    margin-bottom: 10px;
}

/* ==================================================

   レイアウト

================================================== */

/* おすすめ
================================ */

#wash_tate_mtx .col_type01 {
    width: 100%;
    margin-bottom: 30px;
}
#wash_tate_mtx .col_type01 > li > a {
    display: block;
}
#wash_tate_mtx .col_type01 > li > a > dl {
    width: 100%;
    display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
    -webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;
}
#wash_tate_mtx .col_type01 > li > a > dl > dt {
    -webkit-order: 2;
    order: 2;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}
#wash_tate_mtx .col_type01 > li > a > dl > dt > span {
    display: block;
    font-size: 18px;
    margin-bottom: 6px;
}
#wash_tate_mtx .col_type01 > li > a > dl > dd.thumb {
    -webkit-order: 1;
    order: 1;
    margin-bottom: 8px;
}
#wash_tate_mtx .col_type01 > li > a > dl > dd.wrap_price {
    -webkit-order: 3;
    order: 3;
}

/* ランキング
================================ */

#wash_tate_mtx .col_rank {
    width: 100%;
    display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	box-sizing: border-box;
	margin-bottom: 40px;
}
#wash_tate_mtx .col_rank > li {
    position: relative;
    width: calc((100% - 15px*2)/3);
    margin-right: 15px;
	text-align: center;
	box-sizing: border-box;
}
#wash_tate_mtx .col_rank > li:last-child {
    margin-right: 0;
}

/* ランキングアイコン　*/
#wash_tate_mtx .rank {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
}
#wash_tate_mtx .rank span {
    font-size: 32px;
}
#wash_tate_mtx .rank img {
    width: 62px!important;
    height: auto!important;
}

/* キャッチ*/
#wash_tate_mtx .catch {
    position: relative;
    display: inline-block;
    top: 12px;
    width: 90%;
    color: #3db8ff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    /*min-height: 48px;*/
    margin: 0 auto;
    padding: 10px 0;
    background-color: #fffc00;
    z-index: 5;
    border-radius: 5px;
}
#wash_tate_mtx .catch::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    display: block;
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-top: 6px solid #fffc00;
    border-left: 6px solid transparent; 
    margin-left: -3px;
}

/* 商品*/
#wash_tate_mtx .products {
    width: 100%;
}
#wash_tate_mtx .products .thumb {
    width: 100%;
    margin-bottom: 8px;
}
#wash_tate_mtx .products .thumb > a {
    display: block;
}
#wash_tate_mtx .products .spec {
    width: 100%;
    margin-bottom: 8px;
}
#wash_tate_mtx .products .spec > dt {
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 8px;
}
#wash_tate_mtx .products .spec > dt > span {
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
}
/**/
#wash_tate_mtx .products .spec > dd > ul > li.spe {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    background-color: #333;
    text-align: center;
    padding: 5px;
    margin-bottom: 4px;
}
#wash_tate_mtx .products .spec > dd > ul > li.spe > span {
    color: #ffe155;
}
/**/
#wash_tate_mtx .products .spec > dd > ul > li.point {
    border-bottom: dotted 1px #ccc;
    padding: 4px 0;
}
#wash_tate_mtx .products .spec > dd > ul > li.point > dl {
    width: 100%;
    display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
    -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
#wash_tate_mtx .products .spec > dd > ul > li.point > dl > dt {
    width: 52px;
}
#wash_tate_mtx .products .spec > dd > ul > li.point > dl > dt > img {
    width: 42px;
    height: auto;
}
#wash_tate_mtx .products .spec > dd > ul > li.point > dl > dd {
    width: calc(100% - 52px);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
    text-align: left;
}
#wash_tate_mtx .products .spec > dd > ul > li.point > dl > dd > span.txt_s {
    font-size: 10px;
}

/*価格*/
#wash_tate_mtx .col_rank .wrap_price {
    margin-bottom: 8px;
}
#wash_tate_mtx span.icon_secchi,
#wash_tate_mtx span.icon_hontai {
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    margin: 0 2px 4px;
    padding: 4px 8px;
    border: solid 1px #333;
}
#wash_tate_mtx span.icon_secchi {
    color: #b00;
    border-color: #b00;
}

/* ボタン*/
#wash_tate_mtx .btn {
    position: relative;
}
#wash_tate_mtx .btn > a {
    position: relative;
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    padding: 0.75em 0;
    background-color: #bb0000;
    border-radius: 100px;
    box-sizing: border-box;
}
#wash_tate_mtx .btn > a::after {
    display: inline-block;
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    top: 50%;
    right: 28px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(45deg);
    margin-top: -2px;
}
#wash_tate_mtx .btn > a:hover::after {
    right: 20px;
}

/* ==================================================

   その他

================================================== */

/* 価格プロ
================================ */

#wash_tate_mtx .buy_price {}
#wash_tate_mtx .buy_price ul { }
#wash_tate_mtx .buy_price ul li { display: inline-block; }
#wash_tate_mtx .buy_price ul li.price { font-size: 28px; }
#wash_tate_mtx .buy_price ul li.intax { font-size: 14px; }
#wash_tate_mtx .buy_price ul li span.spesicalprice { display: none; }

/*在庫なし*/
#wash_tate_mtx .buy_price ul li { font-size: 16px; }

/* アニメーション */
#wash_tate_mtx a,
#wash_tate_mtx a:hover,
#wash_tate_mtx .btn > a::after,
#wash_tate_mtx .btn > a:hover::after {
    transition: 0.2s all;
}