/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/*共通,TOP--------------------------------------------*/

body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #f9f9f9; 
	color: #000000;
	font-family: 'din-2014','Zen Kaku Gothic New', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1.top{
	visibility: hidden;
	top:0;
	left:0;
}

h2.top{
	font-size: 130px;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
	text-align: center;
	margin-top: 350px;
	margin-bottom: 50px;
	color: #000000;
	display: inline-block;
}

a{
	cursor:pointer;
	text-decoration: none;
	display: block;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:link { color: #000000; }
a:visited { color: #000000; }
a:visited { color: #000000; }
a:active { color: #000000; }

a.button{
	position: relative;
	font-size: 40px;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
	border-bottom: solid 4px #000000;
	line-height: 0.8em;
	display:inline-block;
	z-index: 2;
}

#wrap{
	position:relative;
	visibility: hidden;
	width: 100%;
	height: 100%;
	z-index: 1000;
	top:0;
	left:0;
}
#main {
	position: relative;
	margin: 0 auto;
    z-index: 1000;
}

/*モーション系(Lottie,pixi.js関連)*/

#canvas-container {
    position: fixed;
    top: 0;
	left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
    display: none;
}

#lottie-wrap{
	position: absolute;
	top:0;
	left:0;
	height:100%;
	overflow: hidden;
	z-index: 1;
	transform: translate3d(0, 0, 0);
}

#lottie{
	position: absolute;
	width:100%;
	/*max-width: 1480px;*/
	height:auto;
	z-index: 1;
	margin: 0;
	padding: 0;
}

.posi{
	height:400px;
}
.high{
	height:700px;
}

/*TOP テキストエリア*/

.text-box,.contents-box {
	clear: both;
	position: relative;
	text-align: center;
	margin: 0;
}
.text-box p{
	font-size: 28px;
	font-weight: 500;
	line-height: 2.4em;
	margin: 50px auto;
}
.text-box p.sub{
	font-size: 24px;
}
.text-box span{
	font-weight: 900;
	font-size: 40px;
	transform: translate3d(0, 0, 0);
}

.contents-box p.lead{
	font-size: 20px;
	font-weight: 500;
	margin: 50px auto;
}
.contents-box p.note{
	font-size: 18px;
	margin-top: -30px;
}

/*TOP テキストリスト*/

.text-list{
	width:1200px;
	margin: 50px auto 50px auto;
	text-align: center;
	z-index: 2;
	position: relative;
}
.text-list-itm {
	vertical-align: top;
	display:inline-block;
	width: max-content;
	margin-right: 15px;
	margin-bottom: 40px;
	text-align: left;
}
.text-list-itm p {
	clear: both;
	display:inline-block;
	font-size: 18px;
	text-align: left;
}
.text-list-itm .dropcap {
	font-weight: 900;
	font-size:70px;
	float: left;
	line-height: 0.8;
	margin-right: 10px;
}
.text-list-itm .title {
	font-weight: 900;
	font-size:28px;
	line-height: 1;
}
.text-list-itm .emphasis {
	font-weight: 500;
	font-size:24px;
	line-height:10px;
}
.char{
	display: inline-block;
}
.itm-member{
	width:360px;
}

/*TOP 会社情報*/

.company-list{
	display: inline-block;
	clear:both;
	width:810px;
	margin: 50px auto 0 auto;
	margin-bottom: -74px;
}

.company-list dl{
	text-align: left;
}

.company-list dt {
	font-weight: 900;
	font-size: 20px;
	line-height: 1.8em;
	float: left;
	width: 20%;
}

.company-list dd {
	font-weight: 500;
	font-size: 20px;
	line-height: 1.8em;
	float: left;
	width: 80%;
	margin-bottom: 40px;
}

/*TOP お問い合わせ*/
.contact-list{
	display: inline-block;
	clear:both;
	width:810px;
	margin: 50px auto 0 auto;
	margin-bottom: 0px;
}

.contact-list dl{
	text-align: left;
}

.contact-list dt {
	font-weight: 900;
	font-size: 20px;
	line-height: 1.8em;
	float: left;
	width: 30%;
}

.contact-list dd {
	font-weight: 500;
	font-size: 20px;
	line-height: 1.8em;
	float: left;
	width: 70%;
	margin-bottom: 40px;
}
input[type="text"],
input[type="email"],
textarea {
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 10px;
	width: 100%;
	background: #ffffff;
	font-size: 16px;
}
input:focus,
textarea:focus {
  outline: solid 1px #ddd;
}
input[type="radio"] {
	width: 19px;
	height: 19px;
}

textarea {
	height: 100px;
}

.mw_wp_form .vertical-item,
.mw_wp_form .vertical-item + .vertical-item {
	margin-top: 10px;
	margin-bottom: 10px;
}
.mw_wp_form .vertical-item input {
	position: relative;
	top: 2px;
}
.mw_wp_form .vertical-item label {
	font-weight: 500;
}



/*FOOTER*/

#foot {
	clear: both;
	position: relative;
	text-align: center;
	margin: 0;
	padding: 350px 0; 
}
#foot .mark img{
	width: 90px;
	height: auto;
	margin-bottom: 50px; 
}
#foot .logo img{
	width: 336px;
	height: auto;
	margin-bottom: 45px;
}
#foot p{
	font-size:12px;
}

/*FLOATING PARTS*/

#logo-img {
	position: absolute;
	z-index: 1000;
	width: 100%;
	height: auto;
	top: 0;
	right: 0;
}
#menu-img {
	position: fixed;
	z-index: 1001;
	width: 40px;
	height: auto;
	top: 50px;
	right: 50px;
	cursor: pointer;
}
#mark-img {
	position: fixed;
	z-index: 1002;
	width: 76px;
	height: auto;
	top: 50px;
	left: 50px;
}

/*POP UP MENU*/

#popup-menu{
	display:none;
    position:fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background: #ffffff;
	z-index:1500;
}

#popup-menu .menu-item {
	list-style:none;
	position: absolute;
	top:50%;
	width: 100%;
	transform:translate(0,-50%);
	margin: auto;
	z-index: 2;
}
#popup-menu .menu-btn{
	text-align: center;
	font-size: 80px;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
	display: block;
	position: relative;
}

#popup-menu .logo {
	position: absolute;
	width: 76px;
	height: auto;
	top: 50px;
	left: 50px;
}

#close-icon {
	position: absolute;
	width: 30px;
	height: auto;
	top: 50px;
	right: 50px;
	margin: -3px 5px 0 0;
	cursor: pointer;
}

#close-icon img{
	width: 100%;
	height: auto;
}

#popup-menu a{
	position: relative;
	display:inline;
	z-index: 10;
}

#hover-obj-wrap, #hover-obj-wrap-menu{
	position: fixed;
	width: 100%;
	top:0;
	left:0;
	z-index: 1;
}
.hover-obj {
	position: absolute;
	height: 90px;
	width:100%;
	pointer-events: none;
	display: inline-block;
	margin-top: -45px;
}

#hover-obj-wrap-menu .hover-obj {
	margin-top: -48px;
}

.hover-obj img{
	position:relative;
	margin-left: -30px;
}

/*LOADING*/

#loading{
	position: fixed;
	margin: -5px 0 0 -27px;
	left:50%;
	top:50%;
}

/*COLOR*/

.color-1{
	color:#ff8554;
}
.color-2{
	color:#db5564;
}
.color-3{
	color:#45467d;
}
.color-4{
	color:#5f68a6;
}
.color-5{
	color:#ffd459;
}
.color-6{
	color:#4eb7dc;
}
.color-0{
	color:#000000;
}


/*下階層,MEMBER-----------------------------------------*/

h1.member,h4.member,h1.works,h4.works{
	font-size: 70px;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
	text-align: center;
	margin: 90px auto;
	color: #000000;
	display: inline-block;
}

h2.member{
	font-size: 90px;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
	text-align: center;
	/*margin-top: -63px;------写真追加時*/
	margin-top: 180px;/*------写真非表示時*/
	margin-bottom: 5px;
	color: #000000;
}

h3.member{
	font-size: 50px;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
	text-align: left;
	margin-bottom: 70px;
	color: #000000;
}

figure img{
	width:100%;
	height:auto;
}

.name-box{
	margin-bottom: 120px;
}

.name-box p{
	font-size: 18px;
}

.name-box span{
	font-size: 28px;
	font-weight: 500;
}

.profile-box{
	clear: both;
	width:1100px;
	margin: 0 auto 120px auto;
}

.profile-box p{
	text-align: left;
	line-height: 1.8em;
	font-size: 18px;
	margin-bottom: 50px;
}

.profile-box i{
	float: left;
	text-align: left;
	line-height: 1.8em;
	font-size: 18px;
	margin-right: 10px;
	margin-bottom: 50px;
}

.text-list.member{
	margin: 0 auto;
	width:760px;
	text-align: left;
}

/*WORKS-----------------------------------------------*/

.works-navi{
	width: auto;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	margin-bottom: 100px;
}
.works-navi a{
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	margin: 0 10px;
	font-size: 28px;
	border-bottom:none;
	color:#dddddd;
}

.works-navi a:hover{
	color:#000000;
}

.works-navi a.active{
	color:#000000;
}

.works-list{
	width:100%;
	box-sizing:border-box;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	padding: 0 3%;
	z-index: 2;
	position: relative;
}

.works-item{
	clear: both;
	width:33.3%;
	padding: 0 3%;
	box-sizing:border-box;
	float: left;
	text-align: left;
	line-height: 1.6em;
	margin-bottom: 80px;
}

.archive{
	width:25%;
}

.works-item .thumb{
	width:100%;
}

.works-item .thumb img{
	width:100%;
	height:auto;
}

.works-item .title{
	font-size: 18px;
	font-weight: 500;
	margin: 20px 0;
}

.works-item .status,.works-detail-text .status{
	float: left;
	font-size: 14px;
	color: #888888;
	display: inline-block;
}

.works-item .line,.works-detail-text .line{
	border-left:1px solid #cccccc;
	margin: 0 10px;
	height:12px;
	display: inline-block;
}

.works-item .date,.works-detail-text .date{
	font-size: 14px;
	color: #888888;
	display: inline-block;
}

.works-item .detail,.works-detail-text .detail{
	clear: both;
	font-size: 14px;
	color: #888888;
}

/*WORKS-DETAIL-----------------------------------------*/

h1.works-detail{
	margin: 0px 0 30px 0;
	font-size: 28px;
	font-weight: 900;
}
#works-detail-box{
	box-sizing:border-box;
	position: relative;
	width: 100%;
	max-width: 1680px;
	margin: 160px auto 0 auto;
	display: block;
	padding: 0 3%;
}

#works-detail-head{
	position: fixed;
	box-sizing:border-box;
	z-index: 100;
	width: 33.3%;
	max-width: 560px;
	padding: 0 4.5% 0 3%;
}
.works-detail-text{
	line-height: 1.6em;
	z-index: 100;
	width: 100%;
}
.works-detail-text .post{
	margin: 30px 0 50px 0;
	font-size: 16px;
	line-height: 1.8em;
}

.works-detail-text .btn{
	display: flex;
	justify-content: space-between;
}

.works-detail-text a.button{
	font-size: 32px;
	border-bottom: solid 3px #000000;	
}

.works-detail-text a.arrow{
	border-bottom:none;
}

.works-detail-body{
	box-sizing:border-box;
	position: relative;
	left: 33.3%;
	width: 66.7%;
	padding: 0 3%;
}
.works-detail-body img{
	width: 100%;
	height: auto;
	margin-bottom: 30px;
}

.works-detail-body img:last-child {
	margin-bottom: 0;
}

#works-detail-head.end{
	position: absolute;
	bottom: 0px;
}

body.works-detail .works-list {
	max-width: 1680px;
}

@media screen and (min-width: 1710px) {
	#works-detail-head {
		padding: 0 77px 0 51px;
	}
	#works-detail-box {
		padding: 0 51px;
	}
	
	body.works-detail .works-list {
		padding: 0 51px;
	}
}


@media (any-hover: hover) {
	.text-list-itm a:hover .dropcap {
		color:#000000;
	}
}

@media screen and (min-width: 769px) {
	.sp{
		display: none;
	}
	.pc{
		display: inline;
	}
	
	@media screen and (max-width: 1200px) {
		
		/*共通,TOP--------------------------------------------*/
		
		.text-list{
			width:100%;
		}
		a.button{
			font-size: 34px;
		}
		h2.top {
			font-size: 98px;
		}
		.text-box p{
			font-size: 24px;
		}
		.text-box p.sub{
			font-size: 20px;
		}
		.text-box span{
			font-size: 32px;
		}
		.posi{
			height:400px;
		}
		.high{
			height:600px;
		}
		.company-list{
			width:90%;
		}
		.contact-list{
			width:90%;
		}

		
		#popup-menu .menu-btn{
			font-size: 60px;
		}
		
		.hover-obj {
			height: 70px;
			margin-top: -35px;
		}
		
		#hover-obj-wrap-menu .hover-obj {
			margin-top: -40px;
		}
		
		/*下階層MEMBER-----------------------------------------*/
		
		h1.member,h4.member,h1.works,h4.works{
			font-size: 60px;
			margin: 80px auto;
		}
		
		h2.member{
			font-size: 70px;
			/*margin-top: -58px;------写真追加時*/
			margin-top: 160px;/*------写真非表示時*/
		}
		
		.profile-box{
			width:90%;
		}
		
		/*WORKS-----------------------------------------------*/
		
		.works-list{
			padding: 0 2%;
		}
		
		.works-item{
			padding: 0 2%;
		}
		
		.works-navi a{
			font-size: 28px;
		}
		
		/*WORKS-DETAIL-----------------------------------------*/
		/*
		#works-detail-box{
			padding: 0 2%;
		}
		
		#works-detail-head{
			padding: 0 3% 0 2%;
		}
		
		.works-detail-body{
			padding: 0 2%;
		}
		*/
		@media screen and (max-width: 810px) {
			
			/*共通,TOP--------------------------------------------*/
			
			.company-list{
				width:85%;
			}
			.posi{
				height:400px;
			}
			.high{
				height:600px;
			}
			
		}
		
	}
}

@media screen and (max-width: 769px) {
	
	.sp{
		display: block;
	}
	.pc{
		display: none;
	}
	
	/*共通,TOP--------------------------------------------*/
	
	a.button{
		font-size: 32px;
	}
	
	h2.top {
		font-size: 80px;
		margin-top: 200px;
		margin-bottom: 25px;
	}
	.posi{
		height:200px;
	}
	.high{
		height:280px;
	}
	.text-box{
		width:90%;
		margin: 0 auto;
	}
	.text-box p{
		font-size: 18px;
		margin: 25px auto;
	}
	.text-box p.sub{
		font-size: 14px;
	}
	.text-box span{
		font-size: 26px;
	}
	
	.contents-box p.lead{
		font-size: 18px;
		margin: 25px auto;
	}
	.contents-box p.note{
		font-size: 16px;
		margin-top: -10px;
	}

	
	.text-list{
		width:80%;
		margin: 25px auto 25px auto;
	}
	.itm-member{
		width:450px;
	}
	
	.company-list{
		width:85%;
	}
	.company-list dt {
		font-size: 18px;
		line-height: 1.5em;
		width: 25%;
	}
	
	.company-list dd {
		line-height: 1.5em;
		font-size: 18px;
		width: 75%;
		margin-bottom: 35px;
	}
	
	.contact-list{
		width:90%;
	}
	.contact-list dt {
		font-size: 18px;
		line-height: 1.5em;
		width: auto;
		margin-bottom: 10px;
		float:none;
	}
	
	.contact-list dd {
		line-height: 1.5em;
		font-size: 18px;
		width: 95%;
		margin-bottom: 35px;
		float:none;
	}
	
	#foot {
		padding: 200px 0; 
	}
	#foot .mark img{
		width: 76px;
	}
	#foot .logo img{
		width: 280px;
	}
	#foot p{
		font-size:12px;
	}
	
	#menu-img {
		width: 30px;
		top: 35px;
		right: 35px;
	}
	#mark-img {
		width: 57px;
		top: 35px;
		left: 35px;
	}
	
	#close-icon {
		width: 24px;
		height: auto;
		top: 35px;
		right: 35px;
		margin: -3px 3px 0 0;
		
	}
	#popup-menu .menu-btn{
		font-size: 50px;
	}
	#popup-menu .obj {
		top:-5px;;
		left:15px;
	}
	#popup-menu .obj img{
		margin-left: -30px;
	}
	#popup-menu .logo {
		width: 57px;
		height: auto;
		top: 35px;
		left: 35px;
	}
	
	.hover-obj {
		height: 60px;
		width:110%;
		margin-top: -30px;
	}
	
	#hover-obj-wrap-menu .hover-obj {
		margin-top: -32px;
	}
	
	.hover-obj img{
		margin-left: -15px;
	}
	
	#lottie {
		width:110%;
	}
	
	/*下階層MEMBER-----------------------------------------*/
	
	h1.member,h4.member,h1.works,h4.works{
		font-size: 60px;
		margin: 80px auto;
	}
		
	h2.member{
		font-size: 40px;
		/*margin-top: -50px;------写真追加時*/
		margin-top: 160px;/*------写真非表示時*/
	}
		
	.profile-box{
		width:85%;
		margin: 0 auto 80px auto;
	}
	
	.profile-box p{
		font-size: 14px;
	}
	
	.profile-box i{
		font-size: 14px;
		margin-bottom: 30px;
	}
	
	.name-box{
		margin-bottom: 60px;
	}
	
	.name-box p{
		font-size: 14px;
	}
	
	.name-box span{
		font-size: 22px;
	}
	
	.text-list.member{
		width:80%;
		margin: 25px auto 25px auto;
		text-align: center;
	}
	
	/*下階層WORKS*/
	.works-list{
		width:90%;
		margin: 0 auto;
	}
	
	.works-item{
		width:100%;
		padding: 0;
		text-align: left;
		line-height: 1.6em;
		margin-bottom: 40px;
	}
	
	.works-item .title{
		font-size: 18px;
		font-weight: 500;
		margin: 20px 0;
	}
	
	.works-navi{
		margin-bottom: 60px;
	}
	
	.works-navi a{
		font-size: 20px;
	}
	
	.archive-list{
		width:95%;
	}
	
	.archive{
		width:50%;
		padding: 0 2%;
	}
	
	/*WORKS-DETAIL-----------------------------------------*/
	
	#works-detail-box{
		margin: 100px auto 0 auto;
		padding: 0;
		width: 85%;
	}
	
	#works-detail-head{
		position: relative;
		width: 100%;
		padding: 0;
	}
	
	#works-detail-head.end{
		position: relative;
		bottom: auto;
	}
	
	.works-detail-text{
		margin-bottom: 80px;
	}
	
	.works-detail-text .post{
		font-size: 14px;	
	}
	
	.works-detail-body{
		box-sizing:border-box;
		position: relative;
		left: 0;
		width: 100%;
		padding: 0;
	}
	.works-detail-body img{
		margin-bottom: 20px;
	}
	
	.works-detail-body img:last-child {
		margin-bottom: 20px;
	}

	
	
	@media screen and (max-width: 500px) {
		
		a.button{
			font-size: 28px;
		}
		
		h2.top {
			font-size: 60px;
			margin-top: 200px;
			margin-bottom: 20px;
		}
		
		.text-box p{
			font-size: 14px;
			margin: 20px auto;
		}
		.text-box p.sub{
			font-size: 12px;
		}
		.text-box span{
			font-size: 22px;
		}
		
		.text-list{
			width:80%;
			margin: 50px auto 50px auto;
		}
		.text-list-itm{
			width:100%;
		}
		.text-list-itm p{
			font-size: 14px;
			width:75%;
		}
		.text-list-itm .dropcap{
			margin-top: 3px;
			font-size:60px;
			width:15%;
			text-align: center;
			line-height: 0.7;
		}
		.text-list-itm .title{
			font-size:20px;
			line-height: 1em;
		}
		.text-list-itm .emphasis {
			font-size:20px;
			line-height: 1em;
		}
		
		.company-list dt {
			font-size: 16px;
			width: 30%;
		}
		
		.company-list dd {
			font-size: 16px;
			width: 70%;
		}
		
		#lottie {
			width:150%;
		}
		
		/*下階層WORKS-----------------------------------------*/
		
		.works-navi a{
			font-size: 20px;
		}
		.works-navi{
			margin-bottom: 40px;
		}
		
		/*下階層MEMBER-----------------------------------------*/
		
		h1.member,h4.member,h1.works,h4.works{
			font-size: 40px;
			margin: 60px auto 50px auto;
		}
			
		h2.member{
			font-size: 30px;
			/*margin-top: -30px;------写真追加時*/
			margin-top: 120px;/*------写真非表示時*/
		}
		
		h3.member{
			font-size: 30px;
			margin-bottom: 50px;
		}

	}
}



@media screen and (min-width: 769px) {
	.recruit-banner {
		width: 446px;
		margin: 100px auto 0;
	}
	.recruit-banner a {
		position: relative;
		display: block;
		height: 110px;
		background: url(../img/button_recruit.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	.recruit-banner a::after {
		position: absolute;
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: url(../img/button_recruit_on.png) 0 0 no-repeat;
		background-size: 100% auto;
		opacity: 0;
		transition: all 250ms ease-out;
	}
	.recruit-banner a:hover::after {
		opacity: 1;
	}
	
	.recruit-banner a span {
		display: none;
	}
	
	
	
	#popup-menu .menu-item {
		margin-top: -80px;
	}
	
	.recruit-menu-banner {
		position: absolute;
		width: 446px;
		height: 110px;
		left: calc(50% - 223px);
		top: calc(50% + 220px);
		z-index: 10;
	}
	.recruit-menu-banner a {
		position: relative;
		display: block !important;
		height: 110px;
		background: url(../img/button_recruit.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	.recruit-menu-banner a::after {
		position: absolute;
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: url(../img/button_recruit_on.png) 0 0 no-repeat;
		background-size: 100% auto;
		opacity: 0;
		transition: all 250ms ease-out;
	}
	.recruit-menu-banner a:hover::after {
		opacity: 1;
	}
	
	.recruit-menu-banner a span {
		display: none;
	}
}


@media screen and (min-width: 769px) and (max-height:700px) {
	#popup-menu .menu-item {
		margin-top: -65px;
	}

	#popup-menu .menu-btn {
		font-size: 64px;
	}
	
	.recruit-menu-banner {
		width: 365px;
		height: 90px;
		left: calc(50% - 183px);
		top: calc(50% + 175px);
	}
	.recruit-menu-banner a {
		height: 90px;
	}
}


@media screen and (max-width: 768px) {
	.recruit-banner {
		width: 300px;
		margin: 80px auto 0;
	}
	.recruit-banner a {
		position: relative;
		display: block;
		height: 74px;
		background: url(../img/button_recruit.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	.recruit-banner a::after {
		position: absolute;
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: url(../img/button_recruit_on.png) 0 0 no-repeat;
		background-size: 100% auto;
		opacity: 0;
		transition: all 250ms ease-out;
	}
	.recruit-banner a:active::after {
		opacity: 1;
	}
	
	.recruit-banner a span {
		display: none;
	}
	
	
	
	
	#popup-menu .menu-item {
		margin-top: -30px;
	}
	#popup-menu .menu-btn {
		font-size: 46px;
	}
	
	.recruit-menu-banner {
		position: absolute;
		width: 300px;
		height: 74px;
		left: calc(50% - 150px);
		top: calc(50% + 150px);
		z-index: 10;
	}
	.recruit-menu-banner a {
		position: relative;
		display: block !important;
		height: 74px;
		background: url(../img/button_recruit.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	.recruit-menu-banner a::after {
		position: absolute;
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: url(../img/button_recruit_on.png) 0 0 no-repeat;
		background-size: 100% auto;
		opacity: 0;
		transition: all 250ms ease-out;
	}
	.recruit-menu-banner a:active::after {
		opacity: 1;
	}
	
	.recruit-menu-banner a span {
		display: none;
	}
}



/*アニメーション-----------------------------------------*/
.f_in{
	animation: fadeIn 0.4s ease;
	-webkit-animation: fadeIn 0.4s ease;
	-moz-animation: fadeIn 0.4s ease;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-moz-keyframes fadeIn {
	0% {opacity: 0}
    100% {opacity: 1}
}

.f_out{
	animation: fadeOut 0.2s ease;
	-webkit-animation: fadeOut 0.2s ease;
	-moz-animation: fadeOut 0.2s ease;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
}

@keyframes fadeOut {
    0% {opacity: 1}
    100% {
	    opacity: 0;
	    display: none;
    }
}
@-webkit-keyframes fadeOut {
    0% {opacity: 1}
    100% {
	    opacity: 0;
	    display: none;
    }
}
@-moz-keyframes fadeOut {
	0% {opacity: 1}
    100% {
	    opacity: 0;
	    display: none;
    }
}

.dot {
	position: absolute;
	left: -9999px;
	width: 6px;
	height: 6px;
	border-radius: 3px;
	box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;
	animation: dot-typing 1s infinite linear;
	-webkit-animation: dot-typing 1s infinite linear;
	-moz-animation: dot-typing 1s infinite linear;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
}

@keyframes dot-typing {
	0% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	14.285% {box-shadow: 9984px -15px 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	28.57% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px -15px 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	42.855% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px -15px 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	57.14% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px -15px 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	71.425% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px -15px 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	85.71% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px -15px 0 0 #ffd459;}
	100% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
}
@-webkit-keyframes dot-typing {
	0% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	14.285% {box-shadow: 9984px -15px 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	28.57% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px -15px 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	42.855% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px -15px 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	57.14% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px -15px 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	71.425% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px -15px 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	85.71% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px -15px 0 0 #ffd459;}
	100% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
}
@-moz-keyframes dot-typing {
	0% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	14.285% {box-shadow: 9984px -15px 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	28.57% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px -15px 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	42.855% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px -15px 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	57.14% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px -15px 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	71.425% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px -15px 0 0 #45467d, 10059px 0 0 0 #ffd459;}
	85.71% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px -15px 0 0 #ffd459;}
	100% {box-shadow: 9984px 0 0 0 #4eb7dc, 9999px 0 0 0 #5f68a6, 10014px 0 0 0 #ff8554, 10029px 0 0 0 #db5564, 10044px 0 0 0 #45467d, 10059px 0 0 0 #ffd459;}
}