@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:769px){
.sp {
	display: none;
}
#main {
	width: 100%;
	height: 100vh;
	padding-top: 20px;
	background-image: url(../image/special-main-image@2x.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	box-sizing: border-box;
}
	.logo {
		width: 108px;
	}
	.main-h2 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
	}

#deco {
	width: 100%;
	padding: 50px 0px 0px;
	background-image: url(../image/special-image@2x.png);
	background-position: center;
	background-repeat: repeat-y;
}
	.foro {
		width: 107px;
		margin: auto auto 30px;
		text-align: center;
	}
		.foro img {
			width: 100%;
			height: auto;
		}
	.howto {
		width: 1000px;
		padding: 70px 0px;
		margin: auto auto 80px;
		background-color: #ffffff;
		color: #000000;
		font-weight: bold;
	}
		.use_item {
			width: 700px;
			margin: auto auto 80px;
			padding: 30px 0px;
			box-sizing: border-box;
		}
			.use_item p {
				display: inline-block;
				margin: auto auto auto -110px;
				width: 220px;
				height: 50px;
				border-radius: 25px;
				background: #3B6EA7;
				color: #ffffff;
				font-size: 20px;
				line-height: 50px;
				text-align: center;
				position: relative;
				left: 50%;
				top: 10px;
			}
			.use_item p:before {
				content: "";
				position: absolute;
				top: 100%;
				left: 50%;
				margin-left: -10px;
				border: 10px solid transparent;
				border-top: 15px solid #3B6EA7;
			}
			.use_item ul {
				width: 80%;
				margin: auto;
				padding: 50px 70px;
				list-style: none;
				border-radius: 10px;
				border: 3px solid #3B6EA7;
				box-sizing: border-box;
			}
				.use_item ul li {
					margin: 3px auto;
				}
		.process {
			width: 720px;
			margin: auto auto 100px;
			position: relative;
		}
			.number_icon {
				display: inline-block;
				width: 62px;
				margin-left: -31px;
				position: absolute;
				top: -31px;
				left: 50%;
			}
				.number_icon img {
					display: inline-block;
					width: 100%;
					height: auto;
				}
			.process_inner {
				width: 100%;
				padding: 60px 100px;
				border: solid 2px #000000;
				border-radius: 15px;
				box-sizing: border-box;
			}
				.process_inner p {
					width: 100%;
					margin-bottom: 35px;
				}
				.process_image {
					width: 262px;
					margin: auto;
				}
					.process_image img {
						width: 100%;
					}

#bonus {
	width: 100%;
	padding: 50px 0px;
}
	.bonus_inner {
		width: 1000px;
		padding: 100px 0px;
		margin: auto;
		background-color: #ffffff;
		color: #000000;
		font-weight: bold;
	}
		.bonus_image {
			width: 262px;
			margin: auto auto 30px;
		}
			.bonus_image img {
				width: 100%;
			}
		.bonus_inner p {
			width: 720px;
			margin: auto auto;
		}
	.used {
		width: 100%;
		margin-bottom: 50px;
		font-size: 40px;
		text-align: center;
	}
}

/* SP ================================================== */
@media all and (max-width:768px){
.pc {
	display: none;
}
#main {
	width: 100%;
	height: 100vh;
	padding-top: 20px;
	background-image: url(../image/special-main-image@2x.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	box-sizing: border-box;
}
	.logo {
		width: 108px;
	}
	.main-h2 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
	}
	.main-h2 img {
		height: 50px !important;
	}

#deco {
	width: 100%;
	padding: 30px 0px;
	background-image: url(../image/special-image@2x.png);
	background-position: center;
	background-repeat: repeat-y;
}
	.foro {
		width: 107px;
		margin: auto auto 10px;
		text-align: center;
	}
		.foro img {
			width: 100%;
			height: auto;
		}
	.howto {
		width: 90%;
		padding: 40px 0px 5px;
		margin: auto auto 40px;
		background-color: #ffffff;
		color: #000000;
		font-weight: bold;
	}
		.use_item {
			width: 100%;
			margin: auto auto 40px;
			padding: 20px 0px;
			box-sizing: border-box;
		}
			.use_item p {
				display: inline-block;
				margin: auto auto auto -110px;
				width: 220px;
				height: 40px;
				border-radius: 20px;
				background: #3B6EA7;
				color: #ffffff;
				font-size: 18px;
				line-height: 40px;
				text-align: center;
				position: relative;
				left: 50%;
				top: 10px;
			}
			.use_item p:before {
				content: "";
				position: absolute;
				top: 100%;
				left: 50%;
				margin-left: -10px;
				border: 10px solid transparent;
				border-top: 15px solid #3B6EA7;
			}
			.use_item ul {
				width: 90%;
				margin: auto;
				padding: 30px 20px;
				list-style: none;
				border-radius: 10px;
				border: 3px solid #3B6EA7;
				box-sizing: border-box;
			}
				.use_item ul li {
					margin: 3px auto;
				}
		.process {
			width: 90%;
			margin: auto auto 70px;
			position: relative;
		}
			.number_icon {
				display: inline-block;
				width: 50px;
				margin-left: -25px;
				position: absolute;
				top: -25px;
				left: 50%;
			}
				.number_icon img {
					display: inline-block;
					width: 100%;
					height: auto;
				}
			.process_inner {
				width: 100%;
				padding: 60px 0px 40px;
				border: solid 2px #000000;
				border-radius: 15px;
				box-sizing: border-box;
			}
				.process_inner p {
					width: 90%;
					max-width: 400px;
					font-size: 14px;
					margin: auto auto 15px;
				}
				.process_image {
					width: 262px;
					margin: auto;
				}
					.process_image img {
						width: 100%;
					}


#bonus {
	width: 100%;
	padding: 50px 0px;
}
	.bonus_inner {
		width: 90%;
		padding: 40px 0px;
		margin: auto;
		background-color: #ffffff;
		color: #000000;
		font-weight: bold;
	}
		.bonus_image {
			width: 262px;
			margin: auto auto 30px;
		}
			.bonus_image img {
				width: 100%;
			}
		.bonus_inner p {
			width: 90%;
			margin: auto auto;
			font-size: 14px;
		}

	.used {
		width: 100%;
		margin-bottom: 20px;
		font-size: 24px;
		text-align: center;
	}
}