@charset "utf-8";
/* CSS Document */
* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}
body {
	font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	animation: pageFadeIn 1s ease-out;
	-webkit-animation: pageFadeIn 1s ease-out;
	color: #6e7475;
	background: #ffffff;
}
.main-wrapper {
	max-height: 100vh;
	overflow: hidden;
	position:relative;
	color:#373a3a;
}
.main-skip-btn{position:absolute;bottom:100px;right:100px;z-index: 999;color:#1d2088;border:1px solid #1d2088;font-size:1rem;line-height:1.5rem;padding:0 25px;font-weight:bold;border-radius:0.5rem;background:none;}
.main-skip-btn i{font-size:0.8em;line-height:1.5rem;}
.main-box {
	height: 100%;
}
.din {
	font-family: 'Ropa Sans', sans-serif;
}
@keyframes wave {
	0% {
		opacity: 0;
		transform: translate3d(0, -50px, 0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
@keyframes bound {
	0%, 60%, 75%, 90%, to {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -800px, 0);
		transform: translate3d(0, -800px, 0)
	}
	50% {
		opacity: .75;
		-webkit-transform: translate3d(0, 15px, 0);
		transform: translate3d(0, 15px, 0)
	}
	80% {
		opacity: 1;
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}
	to {
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}
.main-h2 {
	display: block;
	text-align: center;
	font-size: 5rem;
	margin-bottom: .75em;
	line-height: 1.25;
	font-weight: bold;
}
.wave span {
	display: inline-block;
}
.wave span {
	animation-name: wave;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.wave span:nth-child(2) {
	animation-delay: .15s;
}
.wave span:nth-child(3) {
	animation-delay: 0.3s;
}
.wave span:nth-child(4) {
	animation-delay: 0.45s;
}
.wave span:nth-child(5) {
	animation-delay: 0.6s;
}
.wave span:nth-child(6) {
	animation-delay: 0.75s;
}
.wave span:nth-child(7) {
	animation-delay: 0.9s;
}
.wave span:nth-child(8) {
	animation-delay: 1.05s;
}
.wave span:nth-child(9) {
	animation-delay: 1.2s;
}


.wave span:nth-child(10) {
	animation-delay: 1.95s;
}
.wave span:nth-child(11) {
	animation-delay:2.1s;
}
.wave span:nth-child(12) {
	animation-delay: 2.25s;
}
.wave span:nth-child(13) {
	animation-delay: 2.4s;
}
.wave span:nth-child(14) {
	animation-delay: 2.55s;
}
.wave span:nth-child(15) {
	animation-delay: 2.7s;
}
.wave span:nth-child(16) {
	animation-delay: 2.85s;
}
.wave span:nth-child(17) {
	animation-delay: 3s;
}



.main-text .fadeIn {
	animation-delay: .8s;
}

.sub-text {
	font-size: 2.5rem;
	text-align: center;
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}
.contentFadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-delay: 0s;
}
.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: 6s;
	animation-duration: 6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-delay: 0s;
}
.textFadeIn span {
	animation-name: fadeIn;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.textFadeIn span:nth-child(2) {
	animation-delay: 2.5s;
}
.wave {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}
.main-text {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 15px;
	position: absolute;
	width: 100%;
	align-items: center;
}
.main-text02 object {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
#eye-catch,#main-text,#scene01_bg {
	transition: all 1s ease-out;
}
#eye-catch02 {
	transition: all 1s ease-out;
}
#scene03, #scene04 {
	transition: all 1s ease-out;
}
.opacity-zero {
	opacity: 0;
}
.content {
	display: none;
	background: #ffffff;
}
.scene04, .scene05 {
	display: none;
}
.d-none {
	display: none;
	opacity: 0;
}
.d-block {
	display: block !important;
	opacity: 1 !important;
}
.scene03-text, .scene04-text {
	color:#373a3a;
	position:absolute;
	font-size: 2vw;
	text-align:center;
	font-weight: bold;
	line-height: 1.8;
	letter-spacing: 0.2em;
	padding-left: 100px;
	min-height: 10em;
	z-index:1;
}
.scene03-img, .scene04-img {
	z-index:-1;
}
.scene03-img object, .scene04-img object {
	position:absolute;
	bottom:0;top:0;
	margin:auto;
	left:0;
	opacity:0.25;
}
.scene03-inner, .scene04-inner {
	height: 100vh;
	position:relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center
}
.col-half {
	width: 50%;
}
.col-4 {
	width: 40%;
}
.col-6 {
	width: 60%;
	padding-top: 75px;
}
.text-yellow {
	color: #ffbe2e;
}

.beam-blue {
	color: #1d2987;
}
.beam-yellow{
	color:#fdbb00;
}
.text-anime-line {
	position: relative;
	font-size: 1.25em;
	transition: all 1s ease-out;
	z-index: 1;
}
.text-anime-line:after {
	display: inline-block;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.6em;
	background: #fdd000;
	transition: all 1s ease-out;
	z-index: -1;
}
.scene01-inner{position:relative;z-index:1;}
.scene01_bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 70px;
	z-index: -1;
	text-align: center;
}
.scene01_bg object,.scene05_bg object {
	max-height:70vh;
	width: auto;
	padding-top:50px;
}
#scene05 {
	position: relative;
	z-index: 1;
	color:#373a3a;
	height:100vh;
}
.scene05_bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 70px;
	z-index: -1;
	text-align: center;
}

.scroll {
	position: absolute;
	bottom: 15%;
	width: 3em;
	height: 1em;
	cursor: pointer;
	text-decoration: none;
	color: #6e7475;
	left: 0;
	right: 0;
	margin: auto;
}
.scroll span {
	font-size: 12px;
	color: #6e7475;
	text-align: center;
}
.arrow {
	position: absolute;
	top: 1.25em;
	left: 1em;
	animation: 2s arrow-animation infinite ease-in-out;
	width: 0;
	height: 5em;
	border: 0.5px solid #6e7475;
}
/*.arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: -2px;
  width: 1px;
  height: 10px;
  border-top: 10px solid #6e7475;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
}*/
@keyframes arrow-animation {
	0% {
		height: 1em;
	}
	66% {
		height: 5em;
	}
}
@media (max-width: 767px) {
	.wave {
		font-size: 2rem;
	}
	.sub-text {
		font-size: 1.25rem;
	}
	.col-4, .col-6 {
		width: 100%;
	}
	#text-anime-01, #text-anime-02 {
		padding-top: 120px;
	}
	.scene03-text, .scene04-text {
		padding-left: 15px;
		padding-right: 15px;
		font-size: 4vw;
		text-align: center;
		margin-bottom: 30px;
		min-height: 8em;
	}
	.scene03-img, .scene04-img {
		padding: 0;
		text-align: center;
	}
	.sceane03-innner, .sceane04-innner {
		height: auto;
	}
}