@charset "utf-8";
html {
	height: 100%;
	font-size: 6.25%;
}
body {
	height: 100%;
	color: #4e4e4e;
	font-family: "Helvetica Neue", "Helvetica", "Noto Sans JP", sans-serif;
	font-size: 16rem;
	font-weight: 400;
	line-height: 1.8;
	background: #ffe239;
}
.yusei {
  font-family: "Yusei Magic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.fade:hover {
	opacity: 0.6;
	transition: opacity 0.7s ease-out;
}
img {
	max-width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
.pcno {
	display: none;
}
h1, h2, .f26 {
	font-size: 26rem;
	font-size: calc(18rem + 8 * ((100vw - 500px) / 700));
	letter-spacing: 0.06em;
}
h3 {
	font-size: 25rem;
	font-size: calc(18rem + 7 * ((100vw - 500px) / 700));
	letter-spacing: 0.01em;
}
p {
	font-size: 24rem;
	font-size: calc(16rem + 8 * ((100vw - 500px) / 700));
	text-size-adjust: 100%;
	letter-spacing: 0.03em;
}
p.min {
	font-size: 22rem;
	font-size: calc(14rem + 8 * ((100vw - 500px) / 700));
	text-size-adjust: 100%;
	line-height: 1.5;
	letter-spacing: 0;
}
.bl {
	color: #0068b6;
}

@media only screen and (min-width: 1400px) {
	h1, h2, .f26 {
		font-size: 26rem;
	}
	H3 {
		font-size: 25rem;
	}
	p {
		font-size: 24rem;
	}
	p.min {
		font-size: 22rem;
	}
}
@media only screen and (max-width:768px) {
	.pcno {
		display: inherit;
	}
	.spno {
		display: none;
	}
}

/*base*/
main {
	position: relative;}
section {
	padding: 80px 0;
}


/*TOＰ*/
#top main{
	height: 100%;
	overflow: hidden;
}
#top h1 {
	width: 100%;
	font-size: 100rem;
	line-height: 1.2;
	text-align: center;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translateY(-50%) translateX(-50%);
	text-shadow:
	3px 3px 0 #fff,
	-3px 3px 0 #fff,
	-3px -3px 0 #fff,
	3px -3px 0 #fff;
	z-index: 10;
}
#top h1 small{
	display: block;
	margin-bottom: 0;
	font-size: 0.5em;
}
.topko {
	height: 70%;
	position: absolute;
	animation: moveko 1.5s linear forwards;
}
.topmoja {
	height: 25%;
	position: absolute;
	right:4%;
	animation: movemoja 1.7s linear forwards;
	opacity: 0;
}
.fuki {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 273px;
	height: 218px;
	position: absolute;
	top: 15%;
	right:20%;
	background: url("../img/hukidashi.png") no-repeat center center / contain;
	animation: movefuki 0.1s 1.7s forwards;
	opacity: 0;
}
.fuki p{
	font-size: 50rem;
	text-align: center;
	transform:rotate(-15deg);
}

@keyframes movefuki{
  0% {
    opacity: 0;
		transform: scale(0.1);
  }
	50% {
    opacity: 0;
		transform: scale(0.4);
  }
  100% {
    opacity: 1;
		transform: scale(1);
  }
}


@keyframes moveko{
  0% {
    transform:rotateZ(0);
    right:-600px;
		bottom: -0.8%;
  }
  50% {
    transform:rotateZ(10deg);
    right:-250px;
		bottom: -0.8%;
  }
	90% {
    transform:rotateZ(10deg);
    right:-250px;
		bottom: -0.8%;
  }
	95% {
    transform:rotateZ(5deg);
    right:-200px;
		bottom: -0.8%;
  }
  100% {
    transform:rotateZ(0deg);
    right:-60px;
		bottom: -0.1%;
  }
}
@keyframes movemoja{
  0% {
		opacity: 0;
  }
	90% {
		bottom: 46.29%;
		opacity: 0;
  }
	95% {
		bottom: 65.81%;
		opacity: 5;
  }
  100% {
		bottom: 58.55%;
		opacity: 1;
		z-index: 1;
  }
}
@media screen and (max-width:1400px) {
	.fuki {
		right:25%;
	}
}
@media screen and (max-width:1200px) {
	.fuki {
		right:30%;
	}
}
@media screen and (max-width:768px) {
	#top h1 {
		font-size:50rem;
		top: 5%;
	}
	.fuki {
		width: 33.78%;
		height: 40.18%;
		top: 0;
		right:45%;
	}
	.fuki p{
		font-size: 30rem;
		
	}
}
@media screen and (max-width:576px) {
	.fuki {
		right:65%;
	}
}
footer {
	padding: 0.5em 0;
	background: #999;
}
footer .copyright{
	color: #ccc;
	font-size: 11rem;
	text-align: center;
	
}