@charset "utf-8";
/** common styles
----------------------------------------------------------*/
.fade-in {
	transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-webkit-transition: opacity 0.4s;
	-o-transition: opacity 0.4s;
}
.sp_only {
	display: none;
}
@media screen and (max-width:768px) {
	.pc_only {
		display: none;
	}
	.sp_only {
		display: block;
	}
}
/** header
----------------------------------------------------------*/
header {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}
/** #content
----------------------------------------------------------*/
#content {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}
h1 {
	margin-bottom: 65px;
}
section#howto {
	margin-bottom: 75px;
}
section#attention {
	margin-bottom: 80px;
}
@media screen and (max-width: 959px) {
	h1 {
		margin-bottom: 6.75vw;
	}
	section#howto {
		margin-bottom: 7.8125vw;
	}
	section#attention {
		margin-bottom: 8.4375vw;
	}
}
/** .pagetop
----------------------------------------------------------*/
.pagetop:before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-image:
		-webkit-linear-gradient(left, #abc4fa, #bef3ea);
	background-image: -o-linear-gradient(left, #abc4fa, #bef3ea);
	background-image: linear-gradient(to right, #abc4fa, #bef3ea);
}
.pagetop:after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-image: -webkit-linear-gradient(left, #abc4fa, #bef3ea);
	background-image: -o-linear-gradient(left, #abc4fa, #bef3ea);
	background-image: linear-gradient(to right, #abc4fa, #bef3ea);
}
.pagetop .pagetop_inner {
	text-align: right;
	padding: 0 20px;
	width: 1280px;
	margin: 0 auto;
	box-sizing: border-box;
}
.pagetop .pagetop_inner a {
	display: inline-block;
	padding: 10px 0;
	font-size: 1.3rem;
	letter-spacing: 0.08rem;
	color: #3EA9E4;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.pagetop .pagetop_inner a:hover {
	filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: 0.5;
}
.pagetop .pagetop_inner a span {
	position: relative;
	padding-right: 15px;
}
.pagetop .pagetop_inner a span:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0px;
	width: 8px;
	height: 8px;
	margin-top: -1px;
	border-top: 1px solid #3EA9E4;
	border-right: 1px solid #3EA9E4;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
@media screen and (max-width: 768px) {
	.pagetop {
		margin-top: 0;
		width: 100%;
	}
	.pagetop .pagetop_inner {
		width: 100%;
		padding: 0;
		text-align: center;
	}
	.pagetop .pagetop_inner a {
		display: block;
	}
}
/** footer
----------------------------------------------------------*/
footer {
	padding: 10px;
	background: #555;
}
footer ul {
	margin: 1.5em auto;
}
footer li {
	margin: 0.5em 0;
}
footer li, footer a:link, footer a:visited, footer a:hover, footer .copyright {
	line-height: 1.5;
	text-align: center;
	color: #fff;
}
footer a:hover {
	text-decoration: underline;
}
#page_top{
	width: 60px;
	height: 60px;
	position: fixed;
	right: 0;
	bottom: -60px;
	opacity: 0.6;
}
#page_top a{
	width: 60px;
	height: 60px;
	text-decoration: none;
}
#page_top a:before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f139';
	font-size: 50px;
	color: #333;
}

/** Modal
----------------------------------------------------------*/
#cboxOverlay {
	background: #000;
}
#cboxLoadedContent {
	border: 10px solid #42B7B2;
	background: #fff;
	margin-bottom: 0;
}
.modal_contents {
	display: none;
}
.close {
	display: block;
	width: 19%;
	margin: 5vw auto;
	cursor: pointer;
}
.close:hover {
	opacity: 0.7;
}