@charset "UTF-8";
/* CSS Document */
/* loading
================================================== */
.loading {
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	opacity: 1;
	visibility: visible;
}
.loading.is-active {
	opacity: 0;
	visibility: hidden;
}
.loading-animation {
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: #285e79;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
}
.loading-animation.is-active {
	opacity: 1;
	visibility: visible;
}
.logo {
	width: 40%;
	-webkit-animation: logo 0.8s forwards;
	animation: logo 0.8s forwards;
	animation-delay: 0.2s;
}
@media screen and (max-width: 639px) {
	.logo {
		width: 60%;
	}
}
@keyframes byeShutter {
	70% {
		opacity: 1;
	}
	100% {
		display: none;
		opacity: 0;
		z-index: -1;
	}
}
@keyframes logo {
	0% {
		opacity: 1;
	}
	50% {
		transform: rotate(0deg);
	}
	100% {
		transform: scale(0.8);
	}
}
/* mainWrapper
================================================== */
#mainWrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	z-index: 10;
}
/* mainTit
================================================== */
#mainTit {
	position: relative;
	width: 30%;
	z-index: 2;
	padding: 12% 0;
	margin: 0 auto;
}
@media screen and (max-width: 639px) {
	#mainTit {
		width: 50%;
		margin: 0;
		padding: 11.5% 0;
	}
}
/* movieArea
================================================== */
#movieArea {
	position: absolute;
	width: 100%;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
}
/* movieBg
================================================== */
#movieBg {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
}
#movieBg img {
	width: 100%;
}
/* movieBox
================================================== */
#movieBox {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
#movieBox video {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	vertical-align: bottom;
}
/* area01
================================================== */
.area-intro {
	position: relative;
	z-index: 5;
	padding: 60px 0;
}
.area-intro .webfontL {
	color: #6f6b3b;
	text-align: center;
	padding-bottom: 60px;
}
.area-intro .area01Tit {
	color: #6f6b3b;
	text-align: center;
	padding-bottom: 60px;
	font-size: 200%;
	line-height: 140%;
	font-weight: 300;
}
@media screen and (max-width: 639px) {
	.area-intro .area01Tit {
		font-size: 5vw;
	}
}
.area-intro .txt {
	padding-bottom: 1em;
	max-width: 700px;
	margin: 0 auto;
}
/* bg01
================================================== */
#bg01 {
	position: absolute;
	z-index: -1;
	top: -30%;
	right: -20%;
	width: 60%;
}
@media screen and (max-width: 639px) {
	#bg01 {
		top: -50px;
	}
}
/* area02
================================================== */
#long-board {
	position: relative;
	z-index: 4;
	padding: 60px 0;
}
#long-board .area02Tit {
	padding: 0 0 2em 55%;
}
@media screen and (max-width: 639px) {
	#long-board .area02Tit {
		padding: 0 45% 2em 0;
	}
}
#long-board .webfontL {
	padding: 0 0 2em 55%;
	color: #6f6b3b;
}
@media screen and (max-width: 639px) {
	#long-board .webfontL {
		padding: 0 0 2em 0;
	}
}
/* bg02
================================================== */
#bg02 {
	position: absolute;
	z-index: -1;
	top: -20%;
	left: -6%;
	width: 55%;
}
@media screen and (max-width: 639px) {
	#bg02 {
		top: -4%;
		left: inherit;
		right: -6%;
		width: 45%;
	}
}
/* boardArea
================================================== */
.boardArea figure {
	float: left;
	padding: 0 1%;
	width: 14.6%;
}
@media screen and (max-width: 639px) {
	.boardArea figure {
		padding: 0 2% 5%;
		width: 29.3%;
	}
}
/* area03
================================================== */
#mid-length {
	position: relative;
	z-index: 3;
	padding: 60px 0;
}
#mid-length .area03Tit {
	padding: 0 55% 2em 0%;
}
#mid-length .webfontL {
	padding: 0 55% 2em 0;
	color: #6f6b3b;
}
@media screen and (max-width: 639px) {
	#mid-length .webfontL {
		padding: 0 0 2em 0;
	}
}
/* bg03
================================================== */
#bg03 {
	position: absolute;
	z-index: -1;
	top: -20%;
	right: -6%;
	width: 55%;
}
@media screen and (max-width: 639px) {
	#bg03 {
		top: -2%;
		right: -6%;
		width: 55%;
	}
}
/* area04
================================================== */
#fish {
	position: relative;
	z-index: 4;
	padding: 60px 0;
}
#fish .area04Tit {
	padding: 0 0 2em 55%;
	width: 35%;
}
@media screen and (max-width: 639px) {
	#fish .area04Tit {
		padding: 0 0 2em 0;
		width: 35%;
	}
}
#fish .webfontL {
	padding: 0 0 2em 55%;
	color: #6f6b3b;
}
@media screen and (max-width: 639px) {
	#fish .webfontL {
		padding: 0 0 2em 0;
	}
}
/* bg04
================================================== */
#bg04 {
	position: absolute;
	z-index: -1;
	top: -5%;
	left: -6%;
	width: 55%;
}
@media screen and (max-width: 639px) {
	#bg04 {
		top: -2%;
		left: inherit;
		right: -6%;
		width: 55%;
	}
}