@charset "UTF-8";
/* CSS Document */

/* reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	word-wrap: break-word;
	word-break: break-all;
	font-variant-ligatures: none;
}
html {font-size: 62.5%;}
body {
	line-height: 1.6;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: 1.6rem;
	font-weight: normal;
	letter-spacing: 0.01em;
	color: #373737;
	font-feature-settings : "palt" 1;
	-webkit-text-size-adjust: 100%;
}
article, aside, details, figcaption, figure, main, footer, header, menu, nav, section {display: block;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
ul {list-style: none;}
img {max-width: 100%;vertical-align: bottom;}
a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	text-decoration: none;
	color: #373737;
	vertical-align: baseline;
	background: transparent;
	outline: none;
	transition: all .2s;
}
a:hover img {
	opacity: 0.7;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input,select,textarea {
	font-family: inherit;
	font-weight: 100;
	outline: none;
}
input[type="text"],textarea {
	-webkit-appearance: none;
}
* {
	box-sizing: border-box;
}

/* header */
header {
	position: relative;
}
#top header {
	height: 100vh;
	min-height: 800px;
}
.headerIn {
	width: 100%;
	position: fixed;
	top: -75px;
	background: rgba(255,255,255,0.80);
	padding: 0 20px;
	z-index: 999;
	transition: all .5s ease 1.4s;
}
.fadein .headerIn {
	top: 0;
}
.headerArea {
	max-width: 1000px;
	overflow: hidden;
	margin: 0 auto;
}
header .logo {
	width: 272px;
	float: left;
	line-height: 1;
	padding: 20px 0;
}
header nav {
	float: right;
	padding: 25px 0 0;
}
header nav ul {
	overflow: hidden;
}
header nav li {
	float: left;
	margin: 0 0 0 1em;
}

/* mv */
.mvArea h2 {
	letter-spacing: 0.1em;
	line-height: 1.4;
	font-size: 4vw;
	color: #fff;
	position: absolute;
	transform: translate(-50%,-50%);
	top: 30%;
	right: 34%;
}
.mvArea li {
	opacity: 0;
	transform: translate(50px,0);
	transition: all .5s ease .5s;
}
.mvArea li:nth-child(2) {
	transition: all .5s ease .7s;
}
.mvArea li:nth-child(3) {
	transition: all .5s ease .9s;
}
.fadein .mvArea li {
	opacity: 1;
	transform: translate(0,0);
}
.mvBg {
	width: 100%;
	height: 100vh;
	min-height: 800px;
	opacity: 0;
	transition: all .5s;
	overflow: hidden;
}
.fadein .mvBg {
	opacity: 1;
}
.mvBg img {
	width: 100%;
	max-width: inherit;
	height: 100%;
	object-fit: cover;
}
.mvBg .video {
	width: 100%;
    height: 100vh;
	min-height: 800px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
}
.mvBg .video video {
	min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
/* recruit */
.recruit {
	background: #fff;
	overflow: hidden;
}
.recruitArea1 {
	position: relative;
	text-align: center;
	color: #fff;
	background: #2B316E;
	padding: 90px 0;
}
.recruitArea1::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: #fff;
	transition: all .5s;
}
.fadein.recruitArea1::before {
	width: 0;
}
.recruitArea1 h2 {
	font-size: 4rem;
	font-weight: bold;
	margin: 0 0 12px;
	opacity: 0;
	transform: translate(0,50px);
	transition: all .5s ease .5s;
}
.fadein.recruitArea1 h2 {
	opacity: 1;
	transform: translate(0,0);
}
.recruitArea1 li {
	line-height: 2.4;
	font-size: 2rem;
	opacity: 0;
	transform: translate(50px,0);
	transition: all .5s ease .7s;
}
.fadein.recruitArea1 li {
	opacity: 1;
	transform: translate(0,0);
}
.recruitArea1 li:nth-child(2) {
	transition: all .5s ease .9s;
}
.recruitArea1 li:nth-child(3) {
	transition: all .5s ease 1.1s;
}
.recruitArea2 {
	max-width: 1000px;
	color: #2B316E;
	padding: 100px 0 50px;
	margin: 0 auto;
}
.recruitArea2 h3 {
	font-size: 3.6rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 50px;
	clip-path: circle(0 at 50% 50%);
	transition: all .5s;
}
.youtube {
	position: relative;
	padding-bottom: 56.25%;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	margin: 0 2.5% 50px;
}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.fadein.recruitArea2 h3 {
	clip-path: circle(100% at 50% 50%);
}
.recruitArea2 .textArea {
	overflow: hidden;
	margin: 0 0 50px;
}
.recruitArea2 .textAreaIn {
	width: 30%;
	float: left;
	color: #2B316E;
	background: #C5D4F1;
	padding: 20px;
	margin: 0 2.5% 0 0;
	opacity: 0;
	transform: translate(0,50px);
	transition: all .5s ease .7s;
}
.recruitArea2 .textAreaIn:first-child {
	margin: 0 2.5%;
	transition: all .5s ease .5s;
}
.recruitArea2 .textAreaIn:last-child {
	transition: all .5s ease .9s;
}
.fadein.recruitArea2 .textAreaIn {
	opacity: 1;
	transform: translate(0,0);
}
.recruitArea2 h4 {
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 20px;
}
.recruitArea2 .textAreaIn:last-child p {
	margin: 0 0 3.2em;
}
.recruitArea2 .linkArea,
.pRecruit .linkArea {
	max-width: 550px;
	margin: 0 auto;
}
.recruitArea2 .linkArea ul,
.pRecruit .linkArea ul {
	overflow: hidden;
}
.recruitArea2 .linkArea li,
.pRecruit .linkArea li {
	width: 250px;
	float: left;
	margin: 0 0 50px;
}
.recruitArea2 .linkArea li:nth-child(2n+1),
.pRecruit .linkArea li:nth-child(2n+1) {
	clear: both;
	margin-right: 50px;
}
.recruitArea2 .linkArea li {
	opacity: 0;
	transform: translate(0,50px);
	transition: all .5s ease 1.1s;
}
.recruitArea2 .linkArea li:nth-child(2) {
	transition: all .5s ease 1.3s;
}
.recruitArea2 .linkArea li:nth-child(3) {
	transition: all .5s ease 1.5s;
}
.recruitArea2 .linkArea li:nth-child(4) {
	transition: all .5s ease 1.7s;
}
.fadein.recruitArea2 .linkArea li {
	opacity: 1;
	transform: translate(0,0);
}
.recruitArea2 .linkArea a,
.pRecruit .linkArea a {
	display: block;
	line-height: 5rem;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	color: #fff;
	background: #2B316E;
}

/* about */
.about {
	position: relative;
}
.about picture {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
}
.about img, .imageArea img {
	width: 100%;
	height: 100%;
	max-width: inherit;
	object-fit: cover;
}
.aboutIn {
	max-width: 1000px;
	position: relative;
	padding: 50px;
	margin: 0 auto;
}
.aboutArea {
	max-width: 610px;
	background: rgba(255,255,255,0.70);
	padding: 30px;
}
.aboutArea h2 {
	font-size: 3.6rem;
	font-weight: bold;
	margin: 0 0 30px;
}
.aboutArea p {
	line-height: 1.8;
	font-size: 2rem;
}

/* profile */
.profile {
	background: #fff;
	padding: 100px 0;
}
.profileArea,
.pRecruit2 {
	max-width: 650px;
	margin: 0 auto;
}
.profile h2 {
	font-size: 3.6rem;
	font-weight: bold;
	text-decoration: underline;
	text-align: center;
	margin: 0 0 50px;
}
.profile .textArea,
.pRecruitArea,
.contact .table {
	width: 100%;
	display: table;
	border-top: 1px solid #373737;
}
.profile .textArea ul,
.pRecruit2 ul,
.contact .table ul {
	display: table-row;
}
.profile .textArea li,
.pRecruitArea li,
.contact .table li {
	display: table-cell;
	vertical-align: middle;
	border-bottom: 1px solid #373737;
	padding: 20px 0;
}
.profile .textArea li:first-child,
.pRecruitArea li:first-child,
.contact .table li:first-child {
	width: 200px;
	padding: 20px;
}
/* imageArea */
.imageArea {
	height: 600px;
}

/* contact */
.contact {
	color: #fff;
	background: #3F58F8;
	padding: 100px 0;
}
.contactArea {
	max-width: 650px;
	margin: 0 auto;
}
.contact h2 {
	font-size: 3.6rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 100px;
}
.contact .table {
	border-top-color: #fff;
}
.contact .table li {
	border-bottom-color: #fff;
}
.contact .table li>input,
.contact .table textarea {
	width: 100%;
	border: none;
	padding: 7px;
	border-radius: 5px;
}
.contact input[type="radio"] {
	margin: 0;
}
.contact .table textarea {
	resize: none;
}
.contact .btnArea {
	text-align: center;
	padding: 50px 0 0;
}
.contact .btnArea input,
.contact .btnArea button {
	-webkit-appearance: none;
	width: 200px;
	font-size: 1.8rem;
	font-weight: bold;
	border: none;
	border-radius: 0;
	background: #fff;
	color: #3F58F8;
	padding: 10px 0 9px;
}
.contact .btnArea button {
	margin: 0 30px 0 0;
}
.contact .table ul:last-child span label span {
	display: none;
}
.contact .table ul:last-child li {
	position: relative;
}
.contact .table ul:last-child p {
	position: absolute;
	top: 20px;
	left: 30px;
}
.contact .mw_wp_form_preview .table ul:last-child p {
	display: none;
}
.contact .table ul:last-child a {
	text-decoration: underline;
	color: #fff;
}
.contact .mw_wp_form .error {
	display: block;
	font-size: 1.6rem;
	color: #b00;
	margin: 5px 0 0;
}
.contact .contactBox {
	text-align: center;
}
.contact .contactBox h3 {
	font-size: 2rem;
	font-weight: bold;
	margin: 0 0 30px;
}

/* footer */
footer {
	background: #fff;
	padding: 10px 0;
}
footer p {
	font-size: 1.4rem;
	text-align: center;
}
@media screen and (max-width: 768px) {
	.mvArea h2 {
		font-size: 7.5vw;
		right: 5%;
	}
	.profile {
		padding: 5%;
	}
	.contact {
		padding: 100px 5%;
	}
}
@media screen and (max-width: 600px) {
	header {
		height: auto;
	}
	#top header {
		min-height: inherit;
	}
	header .logo {
		width: 50%;
		padding: 15px 0;
	}
	header nav {
		display: none;
	}
	.mvArea h2 {
		font-size: 10vw;
		top: 25%;
		right: -25%;
	}
	.mvBg, .mvBg .video {
		max-height: inherit;
	}
	.recruitArea1 {
		padding: 50px 0;
	}
	.recruitArea1 h2,
	.recruitArea2 h3,
	.profile h2,
	.contact h2 {
		font-size: 3rem;
	}
	.recruitArea1 p {
		line-height: 1.6;
		font-size: 1.6rem;
	}
	.recruitArea2 .textAreaIn,
	.recruitArea2 .textAreaIn:first-child {
		width: 95%;
		float: none;
		margin: 0 2.5% 2.5%;
	}
	.recruitArea2 .linkArea li,
	.pRecruit .linkArea li,
	.recruitArea2 .linkArea li:nth-child(2n+1),
	.pRecruit .linkArea li:nth-child(2n+1){
		float: none;
		margin: 0 auto 30px;
	}
	.recruitArea2 .textAreaIn:last-child p {
		margin: 0;
	}
	.aboutIn {
		padding: 30px;
	}
	.aboutArea h2 {
		font-size: 3rem;
		margin: 0;
	}
	.aboutArea p {
		font-size: 1.8rem;
	}
	.imageArea {
		height: 200px;
	}
	.profile .textArea li,
	.pRecruitArea li,
	.contact .table li {
		display: block;
		padding: 0 20px 20px
	}
	.profile .textArea li:first-child,
	.pRecruitArea li:first-child,
	.contact .table li:first-child {
		border: none;
		padding: 20px 20px 0;
	}
	.contact .table li > span {
		display: block;
	}
	.contact {
		padding: 50px 5%;
	}
	.contact h2 {
		margin: 0 0 50px;
	}
	.contact .mw_wp_form .horizontal-item + .horizontal-item {
		margin: 0;
	}
	.contact .table ul:last-child p {
		top: 0;
		left: 45px;
	}
	.contact .btnArea input,
	.contact .btnArea button {
		display: block;
		margin: 0 auto;
	}
	.contact .btnArea button {
		margin: 0 auto 30px;
	}
}