@charset "UTF-8";

@import url('common.css');
@import url('layout.css');

.wrapper {
	width: 100vw;
	text-align: left;
	padding: 0 5vw;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	position: relative;
}
.btn img {
	border-radius: 2vw;
}
@media (min-width: 1000px) {
	.wrapper {
		width: 1000px;
		margin: 0 auto;
		height: 846px;
		position: relative;
	}

	.btn img {
		width: 100%;
	}
	.btn img {
		border-radius: 8px;
	}
}

body.toppage {
	background: url(../images/p_main.jpg) no-repeat;
	background-size: cover;
}
body.toppage .btn {
	width: 75vw;
	position: absolute;
	top: 150vw;
	left: 50%;
	transform: translateX(-50%);
}

@media (min-width: 1000px) {
	body.toppage {
		background-position: center top;
		background-size: 394px auto;
	}
	body.toppage .btn {
		width: 274px;
		bottom: 120px;
	}
}


body.kuji {
  background: url(../images/common_bg.jpg) center center;
}
body.kuji .image {
  width: 60vw;
  margin: 30vw auto 0;
	animation: omi 2.5s linear infinite;
}
body.kuji .image img {
  width: 100%;
}
body.kuji .btn {
	width: 75vw;
	position: absolute;
	top: 112vw;
	left: 50%;
	transform: translateX(-50%);
}
@keyframes omi {
	0%   { transform: rotate(0); }
	7% { transform: rotate(-5deg); }
	14%   { transform: rotate(0); }
	21% { transform: rotate(-5deg); }
	28%   { transform: rotate(0); }
}


.is-active .animation-bg {
  background: rgba(6,134,205,1);
  display: none;
  content: "";
  position: fixed;
  transform: scale(100);
  z-index: 999;
  top: calc(50% - 1rem);
  left: calc(50% - 1rem);
  width: 2rem;
  height: 2rem;
  display: block;
  border-radius: 50%;
  animation-name: PageAnime-before;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes PageAnime-before {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(100);
    display: block;
  }
}

@media (min-width: 1000px) {
  body.kuji .image {
    width: 189px;
    margin: 80px auto 0;
  }
  body.kuji .btn {
    width: 274px;
    top: 400px;
  }
}

body.kekka {
	background: url(../images/common_bg.jpg) center center;
}
body.kekka .image {
	width: 90vw;
	text-align: center;
	margin: 5vw auto 0;
}
body.kekka .image img {
	width: auto;
	height: calc(100vh - 10vw);
	height: calc(calc(var(--vh, 1vh) * 100) - 10vw);
}
@media (min-width: 1000px) {
	body.kekka .image {
		width: 402px;
	}
	body.kekka .image img {
		width: 100%;
		height: auto;
	}
}