@charset "utf-8";


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

#contents {
	position: relative;
	width: 100%;
	color: #fff;
	font-family: serif;
	font-weight: 400;
	background: linear-gradient(to bottom, #282b2f, #1f1f1f);
	overflow: hidden;
	z-index: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-print-color-adjust: exact;
}
#contents img {
	vertical-align: top;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
}


/* loading
----------------------------------------------- */

.bf-loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 6;
}
.bf-loading__mask {
	position: absolute;
	top: -250vh;
	left: 0;
	right: 0;
	height: 350vh;
	background: linear-gradient(-135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%);
	z-index: 1;
	will-change: opacity, transform;
}
.bf-loading__progress {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -10px;
	z-index: 1;
}

/* start */

.js-loading-start .bf-loading__mask {
	opacity: 0;
	transform: translateY(200vh);
	transition-property: opacity, transform;
	transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1);
}
.js-loading-start .bf-loading__progress {
	transform: scale(0);
	transition-property: transform;
	transition-duration: 0.5s;
}

/* end */

.js-loading-end {
	pointer-events: none;
	visibility: hidden;
}


/* load
----------------------------------------------- */

.bf-load {
}
.bf-load__icon {
	position: relative;
	width: 20px;
	height: 20px;
	z-index: 1;
	animation-name: load0;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
.bf-load__icon:before,
.bf-load__icon:after {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 20px;
	background-image: url(../img/news_arrow.svg);
	background-repeat: no-repeat;
	background-size: 40px 20px;
	z-index: 1;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
.bf-load__icon:before {
	top: 5px;
	background-position: 0 0;
	animation-name: load1;
}
.bf-load__icon:after {
	bottom: 5px;
	background-position: -20px 0;
	animation-name: load2;
}


/* content
----------------------------------------------- */

.bf-content {
	position: relative;
	padding: 90px 0 80px;
	z-index: 2;
}


/* header
----------------------------------------------- */

.bf-header {
	margin: 0 15px;
}
.bf-header__title {
	margin: auto;
	max-width: 1042px;
}
.bf-header__title img {
	width: 100%;
	height: auto;
}


/* recruit
----------------------------------------------- */

.bf-recruit {
	margin: 118px auto 0;
	max-width: 446px;
}
.bf-recruit a {
	display: block;
}
.bf-recruit img {
	width: 100%;
	height: auto;
}
.bf-recruit__frame {
	position: relative;
	padding: 18px 30px;
	border: 2px solid #8d6212;
	box-sizing: border-box;
	z-index: 1;
}
.bf-recruit__frame:before,
.bf-recruit__frame:after {
	display: block;
	content: "";
	position: absolute;
	z-index: 1;
}
.bf-recruit__frame:before {
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
	border: 1px solid #8d6212;
}
.bf-recruit__frame:after {
	top: -2px;
	left: 0;
	right: 0;
	bottom: -2px;
	background-image: url(../img/frame_shine_horizontal.png), url(../img/frame_shine_horizontal.png);
	background-position: center top, center bottom;
	background-repeat: no-repeat;
	background-size: 100% 2px;
}
.bf-recruit__text {
	display: block;
	margin: 3px 0;
	font-size: 0;
	line-height: 1;
}


/* language
----------------------------------------------- */

.bf-language {
	margin: 96px 15px 0;
}
.bf-language__title {
	margin: auto;
	max-width: 350px;
}
.bf-language__title img {
	width: 100%;
	height: auto;
}
.bf-language__lists {
	margin: 25px 0 0;
	padding: 0;
	font-size: 0;
	text-align: center;
}
.bf-language__list {
	display: inline-block;
	margin: 0 15px;
	padding: 0;
	list-style: none;
}
.bf-language__list a {
	display: block;
	position: relative;
	z-index: 1;
}
.bf-language__list img {
	width: auto;
	height: 76px;
}


/* particle
----------------------------------------------- */

.bf-particle {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}


/* pc
----------------------------------------------- */

@media print, screen and (min-width:640px) {


	/* recruit
	----------------------------------------------- */

	.bf-recruit__frame,
	.bf-recruit__frame:before,
	.bf-recruit__frame:after {
		transition-property: border-color, box-shadow, opacity;
		transition-duration: 0.5s;
		will-change: border-color, box-shadow, opacity;
	}

	/* hover */

	.bf-recruit a:hover .bf-recruit__frame {
		border-color: #ffd38c;
		box-shadow: 0 0 8px #ffd38c;
	}
	.bf-recruit a:hover .bf-recruit__frame:before {
		border-color: #ffd38c;
	}
	.bf-recruit a:hover .bf-recruit__frame:after {
		opacity: 0;
	}


	/* language
	----------------------------------------------- */

	.bf-language__list a:after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-repeat: no-repeat;
		background-size: 100% auto;
		visibility: hidden;
		opacity: 0;
		z-index: 1;
		transition-property: visibility, opacity;
		transition-duration: 0s, 0.5s;
		transition-delay: 0.5s, 0s;
		will-change: visibility, opacity;
	}
	.bf-language__list--ja a:after {
		background-image: url(../img/language_list_ja_hover.png);
	}
	.bf-language__list--na a:after {
		background-image: url(../img/language_list_na_hover.png);
	}
	.bf-language__list--uk a:after {
		background-image: url(../img/language_list_uk_hover.png);
	}
	.bf-language__list--de a:after {
		background-image: url(../img/language_list_de_hover.png);
	}
	.bf-language__list--fr a:after {
		background-image: url(../img/language_list_fr_hover.png);
	}

	/* hover */

	.bf-language__list a:hover:after {
		visibility: visible;
		opacity: 1;
		transition-delay: 0s;
	}


}


/* mobile
----------------------------------------------- */

@media only screen and (max-width:639px) {


	/* content
	----------------------------------------------- */

	.bf-content {
		padding: 25px 0 60px;
	}


	/* recruit
	----------------------------------------------- */

	.bf-recruit {
		margin: 45px auto 0;
		max-width: 223px;
	}
	.bf-recruit__frame {
		padding: 7px 20px;
	}
	.bf-recruit__text {
		margin: 3px 0;
	}


	/* language
	----------------------------------------------- */
	
	.bf-language {
		margin: 40px 15px 0;
	}
	.bf-language__title {
		max-width: 225px;
	}
	.bf-language__lists {
		margin: 0 -5px;
	}
	.bf-language__list {
		margin: 0 5px;
	}
	.bf-language__list img {
		height: 50px;
	}


}


/* fadein
----------------------------------------------- */

.js-indicate-ready.bf-fadein {
	opacity: 0;
	transform: translateY(15%);
	will-change: opacity, transform;
}
.js-indicate-start.bf-fadein {
	opacity: 1;
	transform: translateY(0);
	transition-property: opacity, transform;
	transition-duration: 2s;
	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}


/* keyframes
----------------------------------------------- */

@keyframes load0 {
	50% {
		opacity: 0.5;
		transform: rotate(180deg);
	}
	100% {
		opacity: 1;
		transform: rotate(360deg);
	}
}
@keyframes load1 {
	25%,
	50% {
		transform: translateY(5px);
	}
}
@keyframes load2 {
	25%,
	50% {
		transform: translateY(-5px);
	}
}