@charset "utf-8";

/* -----------------------------------------------------------
CSS Information

 File name:      line.css
 Update:         2017.3.08
 Style Info:     ラインCSSファイル
----------------------------------------------------------- */
/********************************************
モバイルファースト
*********************************************/
/* -----------------------------------
情報一覧
------------------------------------ */
/***ページタイトル***/
#page_title {
	padding:20px 10px;
}
#page_title p {	
	text-align:center;
}
#page_title img {
	max-width:100%;
}

/***LINE説明***/
#about_line {
	margin:10px;
}
#about_line p {
	margin-bottom:15px;
}
#about_line p span {
	display:block;
	color:#00b900;
	font-size:12px;
}

/***LINE登録方法***/
#step_line {
	padding-bottom:40px;
}
#step_how {
	margin:20px;
	text-align:center;
}
#step_how>ul>li {
	margin-bottom:20px;
}
#step_how .step_left{
	display:none;
}
#step_how img {
	max-width:80%;
}
#step_how .step_arrow img {
	width:30px;
	height:auto;
}
#step_how li#line_privilege {
	text-align:left;
	padding-top:79px;
	background:url(../img/line/img_ribbon.png) no-repeat;
	background-position:center top;
	background-size:auto 80px;
}
#step_how li#line_privilege div#box_privilege {
	padding:20px;
	border:8px solid #00b900;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
#step_how li#line_privilege div#txt_privilege>p{
	margin-bottom:10px;
}
#step_how li#line_privilege div#txt_privilege ul#note {
	margin-top:20px;
}
#step_how li#line_privilege div#txt_privilege ul#note li:before {
	content:"※";
	float:left;
	color:#00b900;
	font-size:12px;
}
#step_how li#line_privilege div#txt_privilege ul#note li p {
	margin-left:15px;
	color:#00b900;
	font-size:12px;
}
#step_how li#line_privilege #img_privilege {
	display:none;
}

/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:480px){
	/***LINE説明***/
	#about_line {
		margin:10px 20px;
	}
	
	/***LINE登録方法***/
	#step_line {
		padding-bottom:60px;
	}
	#step_how {
		margin:20px 40px;
	}
	#step_how li#line_privilege {
		margin:0 20px;
	}
}


/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:640px){
	/***LINE説明***/
	#about_line {
		width:90%;
		margin:0 auto;
		margin-top:10px;
		font-size:16px;
		line-height:1.5;
	}
	
	/***LINE登録方法***/
	#step_how {
		width:60%;
		margin:0 auto;
		margin-top:40px;
		font-size:16px;
		line-height:1.5;
	}
	
}

/********************************************
タブレット
*********************************************/
@media screen and (min-width:768px){
	/***ページタイトル***/
	#page_title {
		padding:40px 10px 20px 10px;
	}
	
	/***LINE登録方法***/
	#step_line {
		padding-bottom:60px;
	}
	#step_how {
		width:auto;
		margin:40px 20px;
		text-align:center;
	}
	#step_how>ul>li {
		margin-bottom:30px;
	}
	#step_how>ul>li>div {
		float:left;
		width:50%;
	}
	#step_how>ul>li.non-float>div {
		float:none;
		width:auto;
	}
	#step_how .step_left{
		display:block;
		position:relative;
	}
	#step_how .step_left>p{
		position:absolute;
		font-size:48px;
		font-family: "Ubuntu Condensed";
		font-style: normal;
		font-variant: normal;
		font-weight: 500;
		color:#00b900;
		top:0;
		right:10px;
		bottom:0;
		margin:0 auto;
		line-height:3.0;
	}
	#step_how img {
		max-width:80%;
	}
	#step_how .step_arrow img {
		width:30px;
		height:auto;
	}
	#step_how li#line_privilege {
		width:70%;
		margin:0 auto;
		text-align:left;
		padding-top:99px;
		background:url(../img/line/img_ribbon.png) no-repeat;
		background-position:center top;
		background-size:auto 100px;
	}
	#step_how li#line_privilege #box_privilege {
		position:relative;
	}
	#step_how li#line_privilege #box_privilege>div {
		float:left;
	}
	#step_how li#line_privilege #box_privilege>div#txt_privilege {
		width:70%;
	}
	#step_how li#line_privilege div#txt_privilege ul#note {
		width:68%;
		margin-top:0;
		position:absolute;
		bottom:15px;
		left:10px;
	}
	#step_how li#line_privilege #box_privilege div#img_privilege {
		display:block;
		width:30%;
		padding-left:10px;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	#step_how li#line_privilege #img_privilege img {
		max-width:100%;
	}
}

/********************************************
タブレット　ランドスケープ
*********************************************/
@media only screen and (min-width: 1024px) {
	/***LINE登録方法***/
	#step_how {
		width:80%;
		margin:0 auto;
		margin-top:60px;
		padding-bottom:80px;
	}
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1051px) {
	
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1100px) {
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1280px) {
	/***LINE説明***/
	#about_line {
		width:80%;
	}
	/***LINE登録方法***/
	#step_how {
		width:70%;
		margin:0 auto;
		margin-top:60px;
	}
	#step_how img {
		max-width:70%;
	}
	#step_how li#line_privilege {
		width:550px;
		margin:0 auto;
	}
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1370px) {
	/***LINE登録方法***/
	#step_how {
		width:840px;
	}
}


/********************************************
PC
*********************************************/
@media only screen and (min-width: 1600px) {
	
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1680px) {
	
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1710px) {
	
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1920px) {

}