@charset "UTF-8";

/* /////////////////////////////////////////////////////////////////////////// 

商品一覧表示APIの専用CSSです。
	
	/////////////////////////////////////////////////////////////////////////// */



/* /////////////////////////////////////////////////////////////////////////// 
	以下を変更することで、文字サイズや色をブログ毎に調整可能です。
 /////////////////////////////////////////////////////////////////////////// */

/* 列に応じた商品タイトルの高さ調整
---------------------------------------------------------- */

/* 2列 */
#rap div.box.col2 p.box_title,
#rap div.box.col2 p.box_title:nth-of-type(2n) {
  height: 33px;/* ここで高さを指定します */
  display: inline-block;
}
/* 3列 */
#rap div.box.col3 p.box_title,
#rap div.box.col3 p.box_title:nth-of-type(2n) {
  height: 44px;/* ここで高さを指定します */
  display: inline-block;
}
/* 4列 */
#rap div.box.col4 p.box_title,
#rap div.box.col4 p.box_title:nth-of-type(2n) {
  height: 55px;/* ここで高さを指定します */
  display: inline-block;
}

/* 5列 */
#rap div.box.col5 p.box_title,
#rap div.box.col5 p.box_title:nth-of-type(2n) {
  height: 66px;/* ここで高さを指定します */
  display: inline-block;
}

/* 6列 */
#rap div.box.col6 p.box_title,
#rap div.box.col6 p.box_title:nth-of-type(2n) {
  height: 44px;/* ここで高さを指定します */
  display: inline-block;
}

/* 各項目の文字色および文字サイズ・太さ変更
---------------------------------------------------------- */

/* 商品分類 */
#rap div.box.col2 .at_sales_description1,
#rap div.box.col3 .at_sales_description1,
#rap div.box.col4 .at_sales_description1,
#rap div.box.col5 .at_sales_description1,
#rap div.box.col6 .at_sales_description1 {
  color: steelblue !important;		/*文字色*/
  font-size:  !important;	/*文字大きさ*/
  font-weight:  !important; /*文字太さ ※太字の場合の値：bold*/
}

/* 商品概要 */
#rap div.box.col2 .at_sales_description2,
#rap div.box.col3 .at_sales_description2,
#rap div.box.col4 .at_sales_description2,
#rap div.box.col5 .at_sales_description2,
#rap div.box.col6 .at_sales_description2 {
  color: orange !important;		/*文字色*/
  font-size:  !important;	/*文字大きさ*/
  font-weight:  !important; /*文字太さ ※太字の場合の値：bold*/
}

/* 商品タイトル */
#rap div.box.col2 .box_title,
#rap div.box.col3 .box_title,
#rap div.box.col4 .box_title,
#rap div.box.col5 .box_title,
#rap div.box.col6 .box_title {
  color:  !important; /*文字色*/
  font-size:  !important; /*文字大きさ*/
  font-weight: bold  !important; /*文字太さ ※太字の場合の値：bold*/
}

/* 商品詳細 */
#rap div.box.col2 .at_sales_detail,
#rap div.box.col3 .at_sales_detail,
#rap div.box.col4 .at_sales_detail,
#rap div.box.col5 .at_sales_detail,
#rap div.box.col6 .at_sales_detail {
  color:  !important;		/*文字色*/
  font-size:  !important;	/*文字大きさ*/
  font-weight:  !important; /*文字太さ ※太字の場合の値：bold*/
}

/* 商品備考 */
#rap div.box.col2 .at_sales_etc,
#rap div.box.col3 .at_sales_etc,
#rap div.box.col4 .at_sales_etc,
#rap div.box.col5 .at_sales_etc,
#rap div.box.col6 .at_sales_etc {
  color: red !important;		/*文字色*/
  font-size:  !important;	/*文字大きさ*/
  font-weight:  !important; /*文字太さ ※太字の場合の値：bold*/
}

/* 価格左の項目 */
#rap div.box.col2 .at_sales_value_left,
#rap div.box.col3 .at_sales_value_left,
#rap div.box.col4 .at_sales_value_left,
#rap div.box.col5 .at_sales_value_left,
#rap div.box.col6 .at_sales_value_left {
  color:  !important;		/*文字色*/
  font-size:  !important;	/*文字大きさ*/
  font-weight:  !important; /*文字太さ ※太字の場合の値：bold*/
}

/* 価格 */	
#rap div.box.col2 .at_sales_value .fs_3,
#rap div.box.col3 .at_sales_value .fs_3,
#rap div.box.col4 .at_sales_value .fs_3,
#rap div.box.col5 .at_sales_value .fs_3,
#rap div.box.col6 .at_sales_value .fs_3 {
  color: red !important;		/*文字色*/
  font-size:  !important;	/*文字大きさ*/
  font-weight:  !important; /*文字太さ ※太字の場合の値：bold*/
}

/* 単位 */
#rap div.box.col2 .at_sales_value,
#rap div.box.col3 .at_sales_value,
#rap div.box.col4 .at_sales_value,
#rap div.box.col5 .at_sales_value,
#rap div.box.col6 .at_sales_value {
  color: red !important;		/*文字色*/
  font-size:  !important;	/*文字大きさ*/
  font-weight:  !important; /*文字太さ ※太字の場合の値：bold*/
}

/* 価格右の項目 */
#rap div.box.col2 .at_sales_value_right,
#rap div.box.col3 .at_sales_value_right,
#rap div.box.col4 .at_sales_value_right,
#rap div.box.col5 .at_sales_value_right,
#rap div.box.col6 .at_sales_value_right {
  color:  !important;		/*文字色*/
  font-size:  !important;	/*文字大きさ*/
  font-weight:  !important; /*文字太さ ※太字の場合の値：bold*/
}

/*「詳細はこちら」ボタン*/
#rap div.box.col2 .box_btn,
#rap div.box.col3 .box_btn,
#rap div.box.col4 .box_btn,
#rap div.box.col5 .box_btn,
#rap div.box.col6 .box_btn {
  background: darkorange; /*背景色*/
  color: #fff; /*文字色*/
}

/* /////////////////////////////////////////////////////////////////////////// 
	以下を変更するとテンプレートが崩れる恐れがありますので、ご注意ください
 /////////////////////////////////////////////////////////////////////////// */

/* 文字サイズ */
#rap div.box.col2 .fs_1,
#rap div.box.col3 .fs_1,
#rap div.box.col4 .fs_1,
#rap div.box.col5 .fs_1,
#rap div.box.col6 .fs_1 {
	font-size:xx-small;
	line-height:150%;
}
#rap div.box.col2 .fs_2,
#rap div.box.col3 .fs_2,
#rap div.box.col4 .fs_2,
#rap div.box.col5 .fs_2,
#rap div.box.col6 .fs_2 {
	font-size:medium;
	line-height:150%;
}
#rap div.box.col2 .fs_3,
#rap div.box.col3 .fs_3,
#rap div.box.col4 .fs_3,
#rap div.box.col5 .fs_3,
#rap div.box.col6 .fs_3 {
	font-size:large;
	line-height:150%;
}
#rap div.box.col2 .fs_4,
#rap div.box.col3 .fs_4,
#rap div.box.col4 .fs_4,
#rap div.box.col5 .fs_4,
#rap div.box.col6 .fs_4 {
	font-size:x-large;
	line-height:150%;
}
#rap div.box.col2 .fs_5,
#rap div.box.col3 .fs_5,
#rap div.box.col4 .fs_5,
#rap div.box.col5 .fs_5,
#rap div.box.col6 .fs_5 {
	font-size:xx-large;
	line-height:150%;
}

#rap div.box.col2 h3,
#rap div.box.col3 h3,
#rap div.box.col4 h3,
#rap div.box.col5 h3,
#rap div.box.col6 h3 {
	font-size:12px;
	font-weight:bold;
	padding-left:0;
	margin:0;
	margin-bottom:10px;
}
#rap div.box.col2 h2,
#rap div.box.col3 h2,
#rap div.box.col4 h2,
#rap div.box.col5 h2,
#rap div.box.col6 h2 {
	color:#FF3300;
	font-size:18px;
	font-weight:bold;
	padding-left:0;
	margin-top:6px;
	margin-bottom:6px;
}
#rap div.box.col2 h1,
#rap div.box.col3 h1,
#rap div.box.col4 h1,
#rap div.box.col5 h1,
#rap div.box.col6 h1 {
	color:#FF3300;
	font-size:12px;
	font-weight:bold;
	padding-left:0;
}
#rap div.box.col2 p,
#rap div.box.col3 p,
#rap div.box.col4 p,
#rap div.box.col5 p,
#rap div.box.col6 p {
	color:#666;
	font-size:11px;
	margin-bottom:6px;
}

/*「詳細はこちら」ボタン*/
#rap div.box.col2 .box_btn,
#rap div.box.col3 .box_btn,
#rap div.box.col4 .box_btn,
#rap div.box.col5 .box_btn,
#rap div.box.col6 .box_btn {
  border-radius: 4px;
  display: block;
  padding: 2px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  transition: 0.5s ;
}

#rap div.box.col2 .box_btn:hover,
#rap div.box.col3 .box_btn:hover,
#rap div.box.col4 .box_btn:hover,
#rap div.box.col5 .box_btn:hover,
#rap div.box.col6 .box_btn:hover {
  opacity:0.7;
}

/*2列*/
#rap div.box.col1,
#rap div.box.col2 {
  padding: 3px;
  margin-bottom: 20px;
  display: inline-block;
  vertical-align: top;
  margin-right: 4px;
  width: calc(100% / 2 - 14px);
}
#rap div.box.col2:nth-of-type(2n),
#rap div.box.col2:nth-of-type(2n) {
  margin-right: 0 !important;
}

/*3列*/
#rap div.box.col3 {
  padding: 3px;
  margin-bottom: 20px;
  display: inline-block;
  vertical-align: top;
  margin-right: 4px !important;
  width: calc(100% / 3 - 14px);
}
#rap div.box.col3:nth-of-type(3n) {
  margin-right: 0 !important;
}

/*4列*/
#rap div.box.col4 {
  padding: 3px;
  margin-bottom: 20px;
  display: inline-block;
  vertical-align: top;
  margin-right: 4px !important;
  width: calc(100% / 4 - 14px);
}
#rap div.box.col4:nth-of-type(4n) {
  margin-right: 0 !important;
}

/*5列*/
#rap div.box.col5 {
  padding: 3px;
  margin-bottom: 20px;
  display: inline-block;
  vertical-align: top;
  margin-right: 4px !important;
  width: calc(100% / 5 - 14px);
}
#rap div.box.col5:nth-of-type(5n) {
  margin-right: 0 !important;
}

/*6列*/
#rap div.box.col6 {
  padding: 3px;
  margin-bottom: 20px;
  display: inline-block;
  vertical-align: top;
  margin-right: 4px !important;
  width: calc(100% / 6 - 14px);
}

#rap div.box.col6:nth-of-type(6n) {
  margin-right: 0 !important;
}

/*画像*/
#rap div.box.col1 img,
#rap div.box.col2 img,
#rap div.box.col3 img,
#rap div.box.col4 img,
#rap div.box.col5 img,
#rap div.box.col6 img {
    width: 100%;
    margin: 0;
    transition: 0.5s ;
}
#rap div.box.col1 img:hover,
#rap div.box.col2 img:hover,
#rap div.box.col3 img:hover,
#rap div.box.col4 img:hover,
#rap div.box.col5 img:hover,
#rap div.box.col6 img:hover {
  opacity:0.7;
}

#rap div.box.col1:hover,
#rap div.box.col2:hover,
#rap div.box.col3:hover,
#rap div.box.col4:hover,
#rap div.box.col5:hover,
#rap div.box.col6:hover {
	background: #eee;
}


/* ここからスマートフォン対応 */
@media screen and (max-width: 485px) {
  /**/
  #rap div.box.col1 {
    margin-right: 0;
    width: 100%;
  }
  /*4列*/
  #rap div.box.col4 {
    margin-right: 4px !important;
    width: calc(100% / 2 - 14px);
  }
  
  /*3,5,6列*/
  #rap div.box.col3,
  #rap div.box.col5,
  #rap div.box.col6 {
    margin-right: 4px !important;
    width: calc(100% / 3 - 14px);
  }
  #rap div.box.col4:nth-of-type(4n),
  #rap div.box.col5:nth-of-type(5n),
  #rap div.box.col6:nth-of-type(6n) {
    margin-right: 4px;
  }
  #rap div.box.col3:nth-of-type(3n),
  #rap div.box.col4:nth-of-type(3n),
  #rap div.box.col5:nth-of-type(3n),
  #rap div.box.col6:nth-of-type(3n) {
    margin-right: 0 !important;
  }
}

/* ここからタブレット・PC対応 */
@media screen and (min-width: 485px) {
  /**/
  #rap div.box.col6 p,
  #rap div.box.col6 .box_btn {
    display: none;
  }	
  #rap div.box.col6 .box_photo,
  #rap div.box.col6 .box_title {
    display: block;
  }
}