body{
	line-height: 2;
	font-size: 14px;
	font-family: ryo-gothic-plusn, sans-serif;
	font-weight: 500;
	box-sizing: border-box;
	font-feature-settings : "palt" 1;
	color:#313cff;
}
body.dark{
	color: #fff;
	background: #000;
}

/* The hack for Safari */
@supports (-webkit-touch-callout: none) {
	#firstview {
		height: -webkit-fill-available;
	}
}

.scroll-prevent {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
}
a{
	color:#313cff;
	text-decoration:none;
}
body.dark a{
	color: #fff;
}
.center {
	display:block;
	margin:0 auto;
}
.clear {
	clear:both;
}
.wrapper{
	width: 100%;
	padding: 0 40px;
	margin: 0 auto;
	max-width: 1280px;
}
#page{
	padding-top: 120px;
}

/*////////////////////////////////////////////////////////*/
/*//////////////////// clearfix //////////////////////////*/
/*////////////////////////////////////////////////////////*/
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
.clear{
	clear:both;
}
.left{
	float: left;
}
.right{
	float: right;
}

/*////////////////////////////////////////////////////////*/
/*//////////////////// responsive ////////////////////////*/
/*////////////////////////////////////////////////////////*/
.respd{
	max-width: 100%;
	height: auto;
	width /***/:auto;
	display: block;
	vertical-align:top;
}

/*////////////////////////////////////////////////////////*/
/*//////////////////// transition ////////////////////////*/
/*////////////////////////////////////////////////////////*/

.fade{
	opacity: 1;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.fade:hover{
    opacity: 0.7;
}
body,header,div,div::before,div::after,
a,a::before,a::after,
span,span::before,span::after,
li,li::before,li::after,
.roundbtn{
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.no_trans{
	-webkit-transition: 0s;
    -moz-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
}

/*////////////////////////////////////////////////////////*/
/*////////////////////// menu ////////////////////////////*/
/*////////////////////////////////////////////////////////*/


/*////////////////////////////////////////////////////////*/
/*//////////////////// totopbtn //////////////////////////*/
/*////////////////////////////////////////////////////////*/
#topBtn{
	display: none;
	position: fixed;
	bottom: 0;
	z-index: 10;
	width: 40px;
	height: 40px;
	right: 20px;
}
#topBtn .totopicon{
	position: relative;
	width: 40px;
	height: 40px;
	border-top: 3px solid #313cff;
}
.dark #topBtn .totopicon{
	border-top-color: #7fa6ff;
	color: #7fa6ff;
}
#topBtn .totopicon::before {
    content: 'PageTop';
    text-align: center;
    width: 100%;
    position: absolute;
    font-size: 10px;
    top: -17px;
    left: 0;
    line-height: 1;
}
#topBtn .totopicon::after{
	content: '';
	position: absolute;
	width: 26px;
	left: calc(50% - 13px);
	height: 26px;
	top: 15px;
	border-radius: 13px;
	background: linear-gradient(135deg, #6e30ff 0%, #313cff 100%);
	animation: 1s ease-in infinite forwards expansion;
}
.dark #topBtn .totopicon::after{
	background: linear-gradient(135deg, #ac82ff 0%, #7fa6ff 100%);
}
@keyframes expansion{
	0%{
		height: 26px;
		top: 15px;
	}
	20%{
		height: 32px;
		top: 3px;
	}
	40%{
		height: 26px;
		top: 3px;
	}
	100%{
		top: 15px;
	}
}
footer{
	position: relative;
}

/*////////////////////////////////////////////////////////*/
/*//////////////////// footer ////////////////////////*/
/*////////////////////////////////////////////////////////*/
footer{
	text-align: center;
	padding: 90px 40px 40px;
	color: #fff;
	margin-top: 120px;
	background: linear-gradient(135deg, #6e30ff 0%, #313cff 100%);
}
.dark footer{
	background: linear-gradient(135deg, rgba(172,130,255,0.6) 0%, rgba(127,166,255,0.6) 100%);
}
.contactbtn{
	position: relative;
	width: 80%;
	max-width: 380px;
	height: 90px;
	line-height: 90px;
	background: rgba(255,255,255,0.2);
	/*border: 1px solid rgba(255,255,255,0.5);*/
	margin: 0 auto 80px;
	font-size: 48px;
	display: block;
	color: #fff;
	letter-spacing: 0.05em;
}
.dark .contactbtn{
	/*
	color: #000;
	background: rgba(0,0,0,0.1);
	border: 1px solid rgba(0,0,0,0.5);
	*/
}
.contactbtn:hover{
	background: rgba(255,255,255,0.5);
	color: #313cff;
}
.dark .contactbtn:hover{
	/*background: rgba(0,0,0,0.5);*/
	color: #000;
}
.copywrite{
	font-size: 12px;
	line-height: 1;
}
.contactbtn span{
	display: none;
	position: absolute;
	width: 20px;
	height: 20px;
	border-color: #fff;
}
.dark .contactbtn span{
	/*border-color: #000;*/
}
.cc_lt{
	left: -2.5px;
	top: -2.5px;
	border-top: 5px solid;
	border-left: 5px solid;
}
.cc_lb{
	left: -2.5px;
	bottom: -2.5px;
	border-bottom: 5px solid;
	border-left: 5px solid;
}
.cc_rt{
	right: -2.5px;
	top: -2.5px;
	border-top: 5px solid;
	border-right: 5px solid;
}
.cc_rb{
	right: -2.5px;
	bottom: -2.5px;
	border-bottom: 5px solid;
	border-right: 5px solid;
}


/*////////////////////////////////////////////////////////*/
/*//////////////////// show-hide /////////////////////////*/
/*////////////////////////////////////////////////////////*/

.show1280,.show1080,.show980,.show860,.show768,.show640,.show540,.show480,.show400{
	display: none;
}
@media screen and (max-width: 1280px) {
	.show1280{
		display:block;
	}
	.hide1280{
		display:none;
	}
}
@media screen and (max-width: 1080px) {
	.show1080{
		display:block;
	}
	.hide1080{
		display:none;
	}
}
@media screen and (max-width: 980px) {
	.show980{
		display:block;
	}
	.hide980{
		display:none;
	}
}
@media screen and (max-width: 860px) {
	.show860{
		display:block;
	}
	.hide860{
		display:none;
	}
}
@media screen and (max-width: 768px) {
	.show768{
		display:block;
	}
	.hide768{
		display:none;
	}
	.contactbtn {
	    width: 80%;
	    max-width: 300px;
	    height: 70px;
	    line-height: 70px;
	    margin: 0 auto 60px;
	    font-size: 36px;
	}

	footer {
	    padding: 60px 40px 30px;
	    margin-top: 95px;
	}
	body{
		font-size: 13px;
	}
}
@media screen and (max-width: 640px) {
	.show640{
		display:block;
	}
	.hide640{
		display:none;
	}
}
@media screen and (max-width: 540px) {
	.show540{
		display:block;
	}
	.hide540{
		display:none;
	}
	.wrapper {
	    padding: 0 25px;
	}
	.contactbtn {
	    max-width: 220px;
	    height: 50px;
	    line-height: 50px;
	    margin: 0 auto 40px;
	    font-size: 28px;
	}
	.contactbtn span {
	    width: 15px;
	    height: 15px;
	}
	footer {
	    padding: 40px 40px 20px;
	}
}
@media screen and (max-width: 480px) {
	.show480{
		display:block;
	}
	.hide480{
		display:none;
	}
}
@media screen and (max-width: 400px) {
	.show400{
		display:block;
	}
	.hide400{
		display:none;
	}
}