@charset "utf-8";

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

#online .main .img-main{
	margin:0 0 22px;
}
#online .main .txt-main{
	margin:0 0 28px;
	font-size:16px;
	line-height:1.875;
}


#online h2{
	position:relative;
	margin:18px 0 20px;
	border-radius:5px;
	min-height:50px;
	font-weight:bold;
	font-size:28px;
	background:#005dba;
}
#online h2 img{
	position:absolute;
	bottom:0;
	left:10px;
}
#online h2 span{
	position:relative;
	display:block;
	padding:5px 0 0 95px;
	color:#fff;
}
#online .btn{
	position:relative;
	text-align:right;
}
#online .btn a{
	display: inline-block;
	background:#000;
	color:#fff;
	border-radius:5px;
	padding:7px 37px;
	font-size:17.7px;
}
#online .btn span{
	content:"";
	background:url(../../images/group/online/icon-arr_right.png) no-repeat 0 2px;
	padding: 0 0 0 20px;
}

/*おすすめのポイント*/
#online .point{
	padding:0 0 40px;
}
#online .point h2{
	margin:18px 0 20px;
	min-height:80px;
	font-size:36px;
	background:#000000;
}
#online .point h2 span{
	padding:15px 0 0 95px;
}
#online .point ul li{
	margin:0 0 40px;
}
#online .point ul li .st{
	font-size:24px;
	font-weight:bold;
	margin:0 0 10px;
}
#online .point ul li .img-txt{
	display:flex;
	justify-content: space-between;
}
#online .point ul li .img-txt .txt{
	font-size:16px;
	line-height:1.875;
	width:750px;
}

/*ご利用の流れ*/
#online .flow{
	margin:0 0 40px;
}
#online .flow ul{
	display:flex;
}
#online .flow ul li{
	width:170px;
	padding:0 30px 0 0;
	position: relative;
}
#online .flow ul li::before{
	content: "";
	display: block;
	position: absolute;
	top: 85px;
	right: 2px;
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border: 8px solid transparent;
  	border-right: 0 solid transparent;
	border-left: 12px solid #000;
}
#online .flow ul li:last-child::before{
	content:none;
}
#online .flow ul li .img{
	margin:0 0 10px;
}
#online .flow ul li .st{
	font-weight:bold;
	font-size:15px;
	margin:0 0 10px;
}
#online .flow ul li .txt{
	font-size:14px;
	line-height:1.5;
}


/*オンライン活用方法*/
#online .method{
	margin:0 0 60px;
}
#online .method ul{
	display:flex;
}
#online .method ul li{
	width:301px;
	padding:0 33.5px 0 0;
}
#online .method ul li .img{
	margin:0 0 10px;
}
#online .method ul li .st{
	font-weight:bold;
	font-size:18px;
	margin:0 0 10px;
	text-align:center;
}
#online .method ul li .txt{
	font-size:14px;
	line-height:1.5;
}
#online .method ul li .txt-ex{
	margin:20px 0 0;
	font-size:12px;
	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:7px 37px;
	font-size:17.7px;
}
#online .method ul li .btn span{
	content:"";
	background:url(../../images/group/online/icon-arr_right.png) no-repeat 0 2px;
	padding: 0 0 0 20px;
}


/*ランキング*/
#online .ranking{
	margin:0 0 75px;
}
#online .ranking .txt-box{
	font-size:16px;
	line-height:1.875;
	margin:0 0 10px;
}
#online .ranking ul{
	display:flex;
    margin: 0 0 20px;
}
#online .ranking ul li{
	width:301px;
	padding:0 33.5px 0 0;
}
#online .ranking ul li .icon{
	margin:0 0 10px;
}
#online .ranking ul li .thumb{
	margin:0 0 10px;
}
#online .ranking ul li .thumb img{
	width:301px;
}
#online .ranking ul li .name{
	font-size:12px;
	line-height:1.75;
}