@charset "utf-8";


/*------------------------------------------------*/
@media (max-width: 599px) {
/*------------------------------------------------*/
	
	.sp {
		display: inherit;
	}

	.pc {
		display: none;
	}
	
	img {
		width: 100%;
		height: auto;
	}


/*----------------------------------------------------
	head
----------------------------------------------------*/

header {
	height: 45px;
}

.headLogo {
	position: absolute;
	top: 8px;
	left: 10px;
}

.headLogo {
	width: 71px;
}



/*----------------------------------------------------
	contents
----------------------------------------------------*/

.pre01 {
	height: calc( 100vh - 45px );
	background-size: 33% auto;
}

.pre02 {
	padding-top: 55px;
	padding-bottom: 30px;
	text-align: center;
	background-position: left -90px bottom -2px;
	background-size: 150% auto;
}

.pre02 h1 {
	width: auto;
	margin: 0 15px;
}

.pre02 h1 img {
	width: 100%;
}

.pre02 p {
	width: auto;
	margin: 25px 15px;
}

.pre02 p img {
	width: 100%;
}

.preIllust {
	position: absolute;
	bottom: 0;
	/*
	left: calc( 50% - 130px);
	*/
	right: 20px;
	line-height: 0;
}

.preIllust img {
	width: auto;
	height: 270px;
}

.preButton {
	width: auto;
	height: auto;
	margin: 200px auto 0;
}

.preButton a {
	width: 150px;
	height: 150px;
	padding-top: 45px;
	margin: 0 auto 0;
	font-size: 16px;
	line-height: 1.4em;
}

.preButton a::before {
	top: 6px;
	left: 6px;
	display: block;
	border-radius: 50%;
	width: 135px;
	height: 135px;
	margin: 0 auto 0;
	border: solid 2px white;
}

.preButton a::after {
	top: calc( 50% + 20px );
	left: calc( 50% - 3px );
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid white;
}


.preButton a:hover {
}

.preButton a:hover::before {
}

.preButton a:hover::after {
}






/*------------------------------------------------*/
}
/*------------------------------------------------*/




/*------------------------------------------------*/
@media (max-width: 400px) {
/*------------------------------------------------*/

.preButton a {
	width: 115px;
	height: 115px;
	padding-top: 35px;
	font-size: 14px;
}

.preButton a::before {
	width: 100px;
	height: 100px;
}
/*------------------------------------------------*/
}
/*------------------------------------------------*/




/*------------------------------------------------*/
@media (min-height: 650px) and (max-width: 599px) {
/*------------------------------------------------*/
.preButton {
	margin-top: 0;
}
/*------------------------------------------------*/
}
/*------------------------------------------------*/