@charset "utf-8";

/***************************************
オンラインイベント景品セット
****************************************/
#online{
	width:100%;
	margin:0 auto;
}

#online .main .img-main{
	margin:0 0 3vw;
}
#online .main .txt-main{
	margin:0 0 5vw;
	font-size:3.6vw;
	line-height:1.875;
}


#online h2{
	position:relative;
	margin:2vw 0 4vw;
	border-radius:5px;
	min-height:10vw;
	font-weight:bold;
	font-size:4.6vw;
	background:#005dba;
}
#online h2 img{
	position:absolute;
	bottom:0;
	left:1vw;
}
#online h2 span{
	position:relative;
	display:block;
	padding:2vw 2vw 2vw 22vw;
	color:#fff;
}
#online .btn{
	position:relative;
	text-align:right;
}
#online .btn a{
	display: inline-block;
	background:#000;
	color:#fff;
	border-radius:5px;
	padding:2vw 4vw;
	font-size:3.6vw;
}
#online .btn span{
	content:"";
	background:url(../../../images/group/online/icon-arr_right.png) no-repeat 0 1px;
	padding: 0 0 0 6vw;
}


/*おすすめのポイント*/
#online .point{
	padding:0 0 4vw;
}
#online .point h2{
	padding:2vw 2vw 2vw 22vw;
	min-height:8vw;
	font-size:5vw;
	background:#000000;
}
#online .point h2 span{
	padding:0;
}
#online .point ul li{
	width: 80%;
	margin:0 auto 5vw;
}
#online .point ul li .st{
	font-size:4.6vw;
	font-weight:bold;
	margin:0 0 1vw;
}
#online .point ul li .img-txt .img{
	margin:0 0 1vw;

}
#online .point ul li .img-txt .img img{
	width:100%;
}
#online .point ul li .img-txt .txt{
	font-size:4vw;
	line-height:1.875;
}

/*ご利用の流れ*/
#online .flow{
	margin:0 0 16vw;
}
#online .flow ul{
}
#online .flow ul li{
	width:100%;
	margin:0 auto 12vw;
	display:flex;
	position: relative;
}
#online .flow ul li::before{
	content: "";
	display: block;
	position: absolute;
	bottom:-7vw;
	left: 50%;
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border: 12px solid transparent;
	border-top: 12px solid #000;
	border-bottom-width: 0;
}
#online .flow ul li:last-child::before{
	content:none;
}
#online .flow ul li .img{
	width:30%;
	padding:0 3% 0 0;
}
#online .flow ul li .txt-box{
	width:67%;
}
#online .flow ul li .st{
	font-weight:bold;
	font-size:3.8vw;
	margin:0 0 10px;
}
#online .flow ul li .txt{
	font-size:3.6vw;
	line-height:1.5;
}


/*オンライン活用方法*/
#online .method{
	margin:0 0 12vw;
}
#online .method ul{
}
#online .method ul li{
	width:80%;
	margin:0 auto 5vw;
}
#online .method ul li .img{
	margin:0 0 1vw;
}
#online .method ul li .img img{
	width:100%;
}
#online .method ul li .st{
	font-weight:bold;
	font-size:3.8vw;
	margin:0 0 1vw;
	text-align:center;
}
#online .method ul li .txt{
	font-size:3.6vw;
	line-height:1.5;
}
#online .method ul li .txt-ex{
	margin:20px 0 0;
	font-size:3.4vw;
	line-height:1.5;
	color: #333333
}
#online .method ul li .btn{
	position:relative;
	text-align:center;
}
#online .method ul li .btn a{
	display: inline-block;
	background:#000;
	color:#fff;
	border-radius:5px;
	padding:2vw 4vw;
	font-size:3.6vw;
}
#online .method ul li .btn span{
	content:"";
	background:url(../../../images/group/online/icon-arr_right.png) no-repeat 0 1px;
	padding: 0 0 0 6vw;
}


/*ランキング*/
#online .ranking{
	margin:0 0 12vw;
}
#online .ranking .txt-box{
	font-size:3.6vw;
	line-height:1.875;
	margin:0 0 3vw;
}
#online .ranking ul{
	display:flex;
}
#online .ranking ul li{
	width:31%;
	padding:0 3% 0 0;
	margin:0 auto 5vw;
}
#online .ranking ul li:nth-child(3){
	padding:0;
}
#online .ranking ul li .icon{
	margin:0 0 1vw;
	width:15vw;
}
#online .ranking ul li .thumb{
	margin:0 0 1vw;
}
#online .ranking ul li .thumb img{
	width:100%;
}
#online .ranking ul li .name{
	font-size:3vw;
	line-height:1.75;
}
s: s: s: s: ;