@charset "UTF-8";

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  slider block
/*  02.  cat block
/*  03.  trending block
/*  04.  featured block
/*  05.  news block
--------------------------------
------------------------------*/

/*  01.  slider block
------------------------------*/
/*  slider_block  */
#top_slider_block {margin-bottom: 80px; padding-top: 20px;}
#top_slider_block #top_slider_box a {display: block;}
#top_slider_block #top_slider_box a img {width: 100%;}

.bx-wrapper .bx-pager.bx-default-pager a {height: 5px!important;}

/*  pc  */
@media screen and (min-width: 980px) {
	/*  slider_block  */
	.bx-wrapper .bx-pager.bx-default-pager a {width: 30px!important;}
}

/*  sp  */
@media screen and (max-width: 979px) {
	/*  slider_block  */
	.bx-wrapper .bx-pager.bx-default-pager a {width: 40px!important;}
}

/*  02.  cat block
------------------------------*/
/*  top_cat_block  */
#top_cat_block ul#top_cat_box {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#top_cat_block ul#top_cat_box li a {display: block; box-shadow: 2px 2px 4px #AAA;}
#top_cat_block ul#top_cat_box li a .img_box {padding-top: calc((100%/3)*2); background-size: cover; background-position: center;}
#top_cat_block ul#top_cat_box li a .text_box {padding: 20px;}
#top_cat_block ul#top_cat_box li a .text_box h3 {margin-bottom: 10px; line-height: 20px;}
#top_cat_block ul#top_cat_box li a .text_box h3 span {color: #777;}

/*  pc  */
@media screen and (min-width: 980px) {
	/*  top_cat_block  */
	#top_cat_block {margin-bottom: 60px;}
	#top_cat_block ul#top_cat_box {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
	#top_cat_block ul#top_cat_box li {width: calc((100% - 81px)/3);}
	#top_cat_block ul#top_cat_box li:not(:last-child) {margin-right: 40px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
	/*  top_cat_block  */
	#top_cat_block {margin-bottom: 40px;}
	#top_cat_block ul#top_cat_box li:not(:last-child) {margin-bottom: 20px;}
}

/*  03.  trending block
------------------------------*/
/*  top_trending_block  */
#top_trending_block {background: #FFF;}

/*  pc  */
@media screen and (min-width: 980px) {
	/*  top_trending_block  */
	#top_trending_block ul.item_list > li {width: calc((100% - 121px)/4);}
	#top_trending_block ul.item_list > li:not(:nth-child(4n)) {margin-right: 40px;}
	#top_trending_block ul.item_list > li:not(:nth-child(-n + 4)) {margin-top: 40px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
	/*  top_trending_block  */
	#top_trending_block ul.item_list > li {width: calc((100% - 20px)/2);}
	#top_trending_block ul.item_list > li:nth-child(even) {margin-left: 20px;}
	#top_trending_block ul.item_list > li:not(:nth-child(-n + 2)) {margin-top: 20px;}
}

/*  04.  featured block
------------------------------*/
/*  top_featured_block  */

/*  pc  */
@media screen and (min-width: 980px) {
	/*  top_featured_block  */
	#top_featured_block ul.item_list > li {width: calc((100% - 121px)/4);}
	#top_featured_block ul.item_list > li:not(:nth-child(4n)) {margin-right: 40px;}
	#top_featured_block ul.item_list > li:not(:nth-child(-n + 4)) {margin-top: 40px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
	/*  top_featured_block  */
	#top_featured_block ul.item_list > li {width: calc((100% - 20px)/2);}
	#top_featured_block ul.item_list > li:nth-child(even) {margin-left: 20px;}
	#top_featured_block ul.item_list > li:not(:nth-child(-n + 2)) {margin-top: 20px;}
}

/*  05.  news block
------------------------------*/
/*  top_news_block  */
#top_news_block {background: #FFF; margin-bottom: 60px;}
#top_news_block ul li:not(:last-child) {margin-bottom: 10px;}
#top_news_block ul li dl dt {font-weight: bold;}
#top_news_block ul li dl dd a {transition: all .5s;}

/*  pc  */
@media screen and (min-width: 980px) {
	/*  top_news_block  */
#top_news_block ul {width: 600px; margin: auto;}
#top_news_block ul li dl {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#top_news_block ul li dl dt {width: 120px;}
#top_news_block ul li dl dd {width: calc(100% - 120px);}
#top_news_block ul li dl dd a:hover {color: #777;}
}

/*  sp  */
@media screen and (max-width: 979px) {
	/*  top_news_block  */
  #top_news_block ul {padding: 0 20px;}
  #top_news_block ul li dl dt {margin-bottom: 5px;}
}