@charset "utf-8";

html,body{
	height: 100%;
}

#particles-js{
	position:fixed;
	z-index:-1;
	width: 100%;
	height: 100%;
	background-color:#fff;
	top: 0;
	left: 0;
}

#wrapper{
	position: relative;
	z-index: 1;
	width:100%;
	height: 100%;
}

/*----------------------------------------------------
 event-visual
----------------------------------------------------*/

#event-visual {
	position: relative;
	background: url('../img/event/half/summer/visual-bg.jpg');
	background-size: cover;
	margin: 0 0 31px;
	padding: 18px 0 18px;
}

#event-visual .inner {
	max-width: 1280px;
	width: calc(100% - 35px);
}

#event-visual .visual-box {
	padding: 58px 0;
	position: relative;
	overflow: hidden;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.85) 50%, rgba(226,224,103,0.85) 50%, rgba(226,224,103,0.85) 100%);
	background: -webkit-linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.85) 50%, rgba(226,224,103,0.85) 50%, rgba(226,224,103,0.85) 100%);
	background: linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.85) 50%, rgba(226,224,103,0.85) 50%, rgba(226,224,103,0.85) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#e2e067",GradientType=1);
}

#event-visual h2 {
	position: relative;
	z-index: 1;
	width: 79%;
	max-width: 1000px;
	margin: 0 auto 0;
}

#event-visual h2 img {
	max-width: 100%;
	height: auto;
}


#event-visual .bg-obj01 {
	width: 50%;
	position: absolute;
	left: 0;
	top: 0;
}

#event-visual .bg-obj01 img {
	max-width: 100%;
	height: auto;
}

#event-visual .bg-obj02 {
	width: 50%;
	position: absolute;
	left: 0;
	bottom: 0;
}

#event-visual .bg-obj02 img {
	max-width: 100%;
	height: auto;
}

#event-visual .bg-obj03 {
	width: 50%;
	position: absolute;
	right: 0;
	top: 0;
}

#event-visual .bg-obj03 img {
	max-width: 100%;
	height: auto;
}

#event-visual .bg-obj04 {
	width: 50%;
	position: absolute;
	right: 0;
	bottom: 0;
}

#event-visual .bg-obj04 img {
	max-width: 100%;
	height: auto;
}

#event-visual .days-obj {
	width: 21%;
	max-width: 260px;
	position: absolute;
	z-index: 1;
	right: 54px;
	bottom: 40px;
}

#event-visual .days-obj img {
	max-width: 100%;
	height: auto;
}

/*----------------------------------------------------
 Title Head
----------------------------------------------------*/

.bgHead {
	font-size: 25px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 5px 0 0 0;
	line-height: 37px;
	color: #1D1D1D;
	text-align: center;
	font-family: 'Overpass', sans-serif;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}

.bgHead.yellow_base {
	background: rgb(247,255,0);
	background: -moz-linear-gradient(90deg, rgba(247,255,0,0.5) 0%, rgba(149,255,202,0.5) 100%);
	background: -webkit-linear-gradient(90deg, rgba(247,255,0,0.5) 0%, rgba(149,255,202,0.5) 100%);
	background: linear-gradient(90deg, rgba(247,255,0,0.5) 0%, rgba(149,255,202,0.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7ff00",endColorstr="#95ffca",GradientType=1);
}

.bgHead.pink_base {
	color: #fff;
	background: rgb(235,3,50);
	background: -moz-linear-gradient(90deg, rgba(235,3,50,0.6) 0%, rgba(230,186,42,0.6) 100%);
	background: -webkit-linear-gradient(90deg, rgba(235,3,50,0.6) 0%, rgba(230,186,42,0.6) 100%);
	background: linear-gradient(90deg, rgba(235,3,50,0.6) 0%, rgba(230,186,42,0.6) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eb0332",endColorstr="#e6ba2a",GradientType=1);
}

.objHead {
	margin: 0 0 10px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	-webkit-transform: translateY(-26px);
	transform: translateY(-26px);
}

.objHead h2 {
	font-size: 25px;
	font-weight: 500;
	letter-spacing: 0.12em;
	padding: 0 0 7px 0;
	margin: 0 10px;
	line-height: 1.5;
	font-family: 'Kaisei Opti', serif;
}

.objHead h2 small {
	font-size: 21px;
}

.objHead h2 span {
	color: #BD3935;
}

.arrowHead {
	position: relative;
	text-align: center;
	margin: 0 0 10px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	-webkit-transform: translateY(-26px);
	transform: translateY(-26px);
}

.arrowHead:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 7px 0 7px;
	border-color: #f03f62 transparent transparent transparent;
	position: absolute;
	bottom: -19px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	opacity: 0.78;
}

.arrowHead h2 {
	font-size: 25px;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 58px;
	padding: 0 0 7px;
	line-height: 1.5;
	font-family: 'Kaisei Opti', serif;
}

.catHead {
	position: relative;
	margin: 0 0 56px;
	height: 30px;
	background: #5FA2D4;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.catHead .lineObj {
	-webkit-transform: translateY(6px);
	transform: translateY(6px);
}

.catHead:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 7px 0 7px;
	border-color: #5FA2D4 transparent transparent transparent;
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.catHead h3 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #fff;
}

.yellow_objHead {
	position: relative;
}

.yellow_objHead:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 7px 0 7px;
	border-color: #FBFF7F transparent transparent transparent;
	position: absolute;
	bottom: -19px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	opacity: 0.78;
}

.pink_objHead {
	position: relative;
}

.pink_objHead:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 7px 0 7px;
	border-color: #F03F63 transparent transparent transparent;
	position: absolute;
	bottom: -19px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	opacity: 0.78;
}

/*----------------------------------------------------
 moreButton
----------------------------------------------------*/

.moreButton {
	position: relative;
	width: 100%;
	max-width: 209px;
	margin: 27px auto 27px;
}

.moreButton:before {
	content: '';
	width: 100%;
	height: 100%;
	background: #F9FF63;
	position: absolute;
	right: -6px;
	bottom: -6px;
	border-radius: 28px;
	z-index: -1;
}

.moreButton a {
	color: #000;
	border: 2.5px solid #000;
	position: relative;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 40px;
	display: block;
	border-radius: 28px;
	text-align: center;
	background: #fff;
}

.moreButton a .icon {
	position: absolute;
	top: 50%;
	right: 13px;
	line-height: 11px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

/*----------------------------------------------------
 realTime
----------------------------------------------------*/

#realTime {
	position: relative;
	padding: 0 0 75px;
}

#page .item_list ul li {
	background: rgba(243,246,246,0.5);
}

/*----------------------------------------------------
 newProduct
----------------------------------------------------*/

#newProduct {
	position: relative;
	padding: 0 0 75px;
}


#newProduct .item_list ul.rank_list li .image_area::after {
	display: none !important;
}

/*----------------------------------------------------
 dailyRanking
----------------------------------------------------*/

#dailyRanking {
	position: relative;
	padding: 0 0 75px;
}

/*----------------------------------------------------
 categoruRanking
----------------------------------------------------*/

#categoruRanking {
	position: relative;
	padding: 0 0 48px;
}

#categoruRanking .moreButton {
	margin: 27px auto 75px;
}

/*----------------------------------------------------
 SideBar
----------------------------------------------------*/

#side_col .rank_follow_list.gw_ranking {
	margin-bottom: 50px;
}

#side_col .rank_follow_list.gw_ranking .head {
	background: #F99696;
	padding-left: 49px;
}

#side_col .rank_follow_list.gw_ranking .head:before {
	display: none;
}

#side_col .rank_follow_list.gw_ranking .head .icon {
	background: #E96161;
	width: 37.5px;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#side_col .rank_follow_list.gw_ranking li .right {
	color: #AC2846;
}

#side_col .rank_follow_list.gw_ranking li .follow_rank .box_left {
	background: #F99696;
}

#side_col .rank_follow_list.gw_online .head {
	background: #FFE958;
	padding-left: 49px;
	color: #C25807;
}

#side_col .rank_follow_list.gw_online .head:before {
	display: none;
}

#side_col .rank_follow_list.gw_online .head .icon {
	background: #CC7B01;
	width: 37.5px;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#side_col .rank_follow_list.gw_online li .right {
	color: #F9A805;
}

#side_col .rank_follow_list.gw_online li .follow_rank .box_left {
	background: #F9C001;
}

#side_col .rank_follow_list.gw_online li .left::after {
	display: none;
}

#side_col .rank_follow_list li .follow_rank .box_right {
		background: #fff;
	}

/*----------------------------------------------------
 footer
----------------------------------------------------*/

#footer {
	background: #fff;
}

/*----------------------------------------------------
 PC
----------------------------------------------------*/

@media screen and (min-width: 1000px) {
	.moreButton a:hover {
		transform: translateX(6px) translateY(6px);
	}
}

@media screen and (min-width: 500px) {
	.pc_hidden {
		display: none;
	}
}

/*----------------------------------------------------
 TABLET
----------------------------------------------------*/

@media screen and (min-width: 500px) and (max-width: 999px) {

	/*--------------------
		event-visual
	--------------------*/

	#event-visual {
		padding: 10px 0;
	}

	#event-visual .inner {
		width: calc(100% - 20px);
	}

	#event-visual .days-obj {
		right: 24px;
	}


	/*--------------------
		moreButton
	--------------------*/

	.moreButton {
    margin: 10px auto 10px;
	}

	.moreButton a {
    border: 2px solid #000;
    font-size: 14px;
    line-height: 38px;
	}

	#categoruRanking .moreButton {
    margin: 10px auto 50px;
	}

	/*--------------------
		titleHead
	--------------------*/

	.bgHead {
    font-size: 20px;
	}

	.objHead {
		-webkit-transform: translateY(-13px);
		transform: translateY(-13px);
	}

	.objHead h2 {
    font-size: 20px;
    padding: 0 0 1px 0;
    font-family: 'Kaisei Opti', serif;
	}

	.objHead h2 small {
    font-size: 18px;
	}

	.objHead .leftObj {
		zoom: 0.6;
	}

	.objHead .rightObj {
		zoom: 0.6;
	}

	.arrowHead h2 {
    font-size: 20px;
	}

	.arrowHead:after {
		bottom: -24px;
	}

	.catHead h3 {
		font-size: 16px;
		line-height: 1.8;
	}

	.arrowHead {
		-webkit-transform: translateY(-13px);
		transform: translateY(-13px);
	}

	.arrowHead h2 {
		font-size: 20px;
    padding: 0 0 1px 0;
    font-family: 'Kaisei Opti', serif;
	}

	.arrowHead .leftObj {
		zoom: 0.6;
	}

	.arrowHead .rightObj {
		zoom: 0.6;
	}

	/*--------------------
		Section
	--------------------*/

	#realTime {
    padding: 0 0 50px;
	}

	#newProduct {
    padding: 0 0 50px;
	}

	#dailyRanking {
    padding: 0 0 50px;
	}

}



/*----------------------------------------------------
 SP
----------------------------------------------------*/

@media screen and (max-width: 499px) {

	.sp_hidden {
		display: none;
	}

	/*--------------------
		event-visual
	--------------------*/

	#event-visual {
		padding: 10px 0;
	}

	#event-visual .inner {
		width: calc(100% - 20px);
	}

	#event-visual h2 {
		width: 88%;
	}

	#event-visual .visual-box {
		padding: 19px 0 67px;
	}

	#event-visual .days-obj {
		width: 32%;
		max-width: 114px;
		position: absolute;
		bottom: 15px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}

	/*--------------------
		moreButton
	--------------------*/

	.moreButton {
		max-width: 180px;
	}

	.moreButton {
    margin: 10px auto 10px;
	}

	.moreButton a {
    border: 2px solid #000;
    font-size: 13px;
    line-height: 36px;
	}

	#categoruRanking .moreButton {
    margin: 10px auto 50px;
	}

	/*--------------------
		titleHead
	--------------------*/

	.bgHead {
    font-size: 18px;
	}

	.objHead {
		-webkit-transform: translateY(-13px);
		transform: translateY(-13px);
	}

	.objHead h2 {
    font-size: 18px;
    padding: 0 0 1px 0;
    font-family: 'Kaisei Opti', serif;
	}

	.objHead h2 small {
    font-size: 15px;
	}

	.objHead .leftObj {
		zoom: 0.6;
	}

	.objHead .rightObj {
		zoom: 0.6;
	}

	.arrowHead h2 {
    font-size: 18px;
	}

	.arrowHead:after {
		bottom: -24px;
	}

	.catHead h3 {
		font-size: 15px;
		line-height: 1.9;
	}

	.catHead .lineObj {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    zoom: 0.8;
	}

	.arrowHead {
		-webkit-transform: translateY(-13px);
		transform: translateY(-13px);
	}

	.arrowHead h2 {
		font-size: 18px;
		margin: 0 27px;
    padding: 0 0 1px 0;
    font-family: 'Kaisei Opti', serif;
	}

	.arrowHead .leftObj {
		zoom: 0.6;
	}

	.arrowHead .rightObj {
		zoom: 0.6;
	}

	/*--------------------
		Section
	--------------------*/

	#realTime {
    padding: 0 0 50px;
	}

	#newProduct {
    padding: 0 0 50px;
	}

	#dailyRanking {
    padding: 0 0 50px;
	}

	/*--------------------
		SideBar
	--------------------*/

	#side_col .rank_follow_list.gw_ranking {
    margin-bottom: 30px;
	}

	#side_col .rank_follow_list.gw_online {
    margin-bottom: 60px;
	}



}