@charset "UTF-8";
/* CSS Document */
body > *{

}
body::before{
	content: '';
	display: block;
	width: 100%;
	height: 100vh;
	background: url(../img/top/body_bg.jpg) no-repeat center center /cover;
	position: fixed;
	top:0;
	left:0;
	z-index: -1;
}


/*=============================
 main
=============================*/
#main{
	width: 100%;
	min-height: 100vw;
	-js-display: flex;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* Safari */
	align-items:         center;
}
#main ul{
	width: 100%;
}
	/*IE10以降に適用されるCSSハック（一応）*/
	@media all and (-ms-high-contrast:none){
		#main{display: table;}
		#main ul{
			display: table-cell;
			vertical-align: middle;
		}
	}
#main ul li#main_logoArea{
	width: 73%;
	height: 10.63vw;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	opacity: 0;
	margin-bottom: 5.47vw;
}
#main ul li#main_logoArea.show{
	opacity: 1;
	-webkit-transition: opacity 0.1s 0.25s ease;
	transition: opacity 0.1s 0.25s ease;
}
#main ul li#main_logoArea > span{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
}
#main ul li#main_logoArea > span#main_logoBg .cls-1{
	fill: none;
	stroke: #e94709;
}
#main ul li#main_logoArea > span#main_logoBg .cls-2{
	fill: none;
	stroke: #FFF;
}
#main ul li#main_logoArea > span#main_logoBg{
	opacity: 1;
}
#main ul li#main_logoArea > span#main_logoBg.hide{
	opacity: 0;
	-webkit-transition: opacity 0.1s 0.5s ease;
	transition: opacity 0.1s 0.5s ease;
}

#main ul li#main_logoArea > span#main_logo{
	background: url(../img/logo_cw.svg) no-repeat center center /auto 10.63vw;
	z-index: 10;
	left:50%;
	width: 0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#main ul li#main_logoArea > span#main_logo.show{
	width: 100%;
	-webkit-transition:width 0.5s ease;
	transition:width 0.5s ease;
}

#main ul li#main_copy{
	text-align: center;
	opacity: 0;
}
#main ul li#main_copy.show{
	opacity: 1;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
#main ul li#main_copy img{
	height: 3.91vw;
	width: auto;
}


.bgArea{
	background: #f8f6e2;
}

section .fbox{

}
section ul.titArea{
	-js-display: flex;
	display: -webkit-flex;
	display: flex;
	width: 47.6vw;
	height: 6.25vw;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #797042;
	background: #000;
}
section ul.titArea li{
	height: 100%;
	position: relative;
	font-size: 2.50vw;
	white-space: nowrap;
}
section ul.titArea li.tit_en{
	width: 60%;
	letter-spacing: 0.1em;
	color: #797042;
	font-weight: bold;
	padding: 0 0 0 1.56vw;
}
section ul.titArea li.tit_jp{
	width: 40%;
	background: #797042;
	letter-spacing: 0.2em;
}
section ul.titArea li.tit_jp h1{
	height: 100%;
	position: relative;
	text-align: center;
	font-weight: bold;
}

section .btView a{
	display: inline-block;
	width: 30vw;
	height: 4.69vw;
	border: 1px solid #ca3d04;
	position: relative;
	text-align: center;
	font-size: 2.66vw;
	font-weight: bold;
	color: #ca3d04;
	-webkit-transition: color 0.25s ease;
	transition: color 0.25s ease;
}
section .btView a .en   {display: inline-block;}
section .btView a .jp   {display: none;}

#philosophy{
	padding: 31.25vw 0;
}
#philosophy > .inner{
}
#philosophy .titArea{
	margin-bottom: 11.72vw;
}
#philosophy .copy{
	text-align: center;
	font-size: 6.25vw;
	line-height: 1.3;
	color: #FFF;
	letter-spacing: 0.2em;
	white-space: nowrap;
	margin-bottom: 11.72vw;
	padding-left: 1em;
}
#philosophy .btView{
	text-align: center;
}



#aboutus{
	padding: 24vw 0 10vw;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+30,1+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}
#aboutus > .inner{
	background: url(../img/top/aboutus_bg.png) no-repeat center bottom /50vw auto;
	padding: 0 0 45vw;
}
#aboutus .titArea{
	margin-bottom: 14.06vw;
}
#aboutus .copy{
	font-size: 7.03vw;
	line-height: 1.5;
	color: #FFF;
	letter-spacing: 0.2em;
	margin-bottom: 14.06vw;
	text-align: center;
}
#aboutus .btView{
	text-align: center;
}



#service{
	padding: 20vw 10.16vw 45vw;
	background: url(../img/top/service_bg.jpg) no-repeat center center/cover;
	position: relative;
}
#service::before,
#service::after{
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	left:0;
	z-index: 0;
}
#service::before{
	height: 65vw;
	top:0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+30,000000+100&1+30,0+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 30%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 30%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
#service::after{
	height: 35vw;
	bottom:0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+70,1+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
#service > .inner{
	position: relative;
	z-index: 10;
}
#service ul.titArea{
	margin-bottom: 10.94vw;
}
/*
#service ul.serviceList{
}
#service ul.serviceList li{
	height: 40vw;
	margin-bottom: 3.13vw;
}
#service ul.serviceList li:last-child{
	margin-bottom: 0px;
}
#service ul.serviceList li a{
	display: block;
	height: 100%;
	background: rgba(0,0,0,0.8);
	padding: 15px;
	text-decoration: none;
	position: relative;

	-webkit-transition: background 0.25s 0s ease;
	transition: background 0.25s 0s ease;
}

#service ul.serviceList li a.noLink2{cursor: default;}


#service ul.serviceList li a::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 10;
}
#service ul.serviceList li a.or::before     {border: 1px solid rgba(233,71,9,1);}
#service ul.serviceList li a.gold::before   {border: 1px solid rgba(121,112,66,1);}

#service ul.serviceList li a::after{
	content: '';
	position: absolute;
	bottom:0;
	right: 0;
	width: 0;
	height: 0;
}
#service ul.serviceList li a.or::after{
	border: 2.34vw solid transparent;
	border-right: 2.34vw solid #e94709;
	border-bottom: 2.34vw solid #e94709;
}
#service ul.serviceList li a.gold::after{
	border: 2.34vw solid transparent;
	border-right: 2.34vw solid #797042;
	border-bottom: 2.34vw solid #797042;
}

#service ul.serviceList li a .txt{
	font-size: 3.13vw;
	color: #FFF;
	text-align: justify;
	-ms-text-justify: inter-ideograph;
	text-justify: inter-ideograph;
	line-height: 1.65;
	text-decoration-style: 0.05em;
	margin-top: -5px;
	-webkit-transition: color 0.25s ease;
	transition: color 0.25s ease;
}


#service ul.serviceList li a .pic,
#service ul.serviceList li a .picTxt{
	position: absolute;
	bottom:0px;
	right:0px;
	padding: 0 15px 15px 0;
	text-align: right;
	width: 100%;
}
#service ul.serviceList li a .pic{

}

#service ul.serviceList li a .pic img,
#service ul.serviceList li a .pic .svgImg{
	height: 19.5vw;
	width: auto;
}
#service ul.serviceList li a .pic .svgImg{
	position: absolute;
	bottom:5.5vw;
	right:5.5vw;
}
#service ul.serviceList li.list01 a .pic .svgImg{width: 48.13vw; height: 19.5vw;}
#service ul.serviceList li.list02 a .pic .svgImg{width: 48.75vw; height: 17.6vw;}

#service ul.serviceList li a .pic .svgImg.on{display: none;}
#service ul.serviceList li a .pic .svgImg.off *{fill: #E94709;}



#service ul.serviceList li a .picTxt{
	padding: 0 15px 15px 0;
	font-size: 8.59vw;
	line-height: 1.2;
	color: #e94709;
}
#service ul.serviceList li a.on .picTxt{
	color: #FFF;
}


#service ul.serviceList li.sp a .copy{
	color: #FFF;
	font-size: 6.25vw;
	line-height: 1.5;
	white-space: nowrap;
	text-align: center;
	position: relative;
	top: 50%;
	left:50%;
	-webkit-transform: translate(-50%,-55%);
	transform: translate(-50%,-55%);
	letter-spacing: 0.2em;
}
#service ul.serviceList li.sp a .copy span{
	display: inline-block;
	text-indent: 1em;
}*/

#service ul.serviceList{
}
#service ul.serviceList li{
	height: 40vw;
	margin-bottom: 3.13vw;
	background: rgba(0,0,0,0.8);
	-webkit-transition: background 0.25s 0s ease;
	transition: background 0.25s 0s ease;
	position: relative;
}
#service ul.serviceList li:last-child{
	margin-bottom: 0px;
}
#service ul.serviceList li:hover{background: rgba(34,0,0,0.8);}
#service ul.serviceList li.noLink{cursor: default!important;}
#service ul.serviceList li:nth-child(3n){margin-right: 0px;}

#service ul.serviceList li::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 0;
	-webkit-transition: border 0.25s 0s ease;
	transition: border 0.25s 0s ease;
}
#service ul.serviceList li.or::before        {border: 1px solid rgba(233,71,9,1);}
#service ul.serviceList li.or:hover::before  {border: 7px solid rgba(233,71,9,1);}
#service ul.serviceList li.gold::before      {border: 1px solid rgba(121,112,66,1);}
#service ul.serviceList li.gold:hover::before{border: 7px solid rgba(233,71,9,1);}

#service ul.serviceList li::after{
	content: '';
	position: absolute;
	bottom:0;
	right: 0;
	width: 0;
	height: 0;
}
#service ul.serviceList li.or::after{
	border: 2.34vw solid transparent;
	border-right: 2.34vw solid #e94709;
	border-bottom: 2.34vw solid #e94709;
}
#service ul.serviceList li.gold::after{
	border: 2.34vw solid transparent;
	border-right: 2.34vw solid #797042;
	border-bottom: 2.34vw solid #797042;
}


#service ul.serviceList li .txt{
	font-size: 3.13vw;
	color: #FFF;
	text-align: justify;
	-ms-text-justify: inter-ideograph;
	text-justify: inter-ideograph;
	line-height: 1.65;
	text-decoration-style: 0.05em;
	-webkit-transition: color 0.25s ease;
	transition: color 0.25s ease;
	position: absolute;
	top:0;
	left:0;
	display: block;
	padding: 0.5em 1em 1em;
}
#service ul.serviceList li:hover .txt{color: #e94709;}

#service ul.serviceList li a{position: absolute;z-index: 10;display: block;}
#service ul.serviceList li a.box{
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}

#service ul.serviceList li.list09 a.list09_1{
	bottom:3vw;
	left:12vw;
	width: 21.33vw;
	height: 26.67vw;
}
#service ul.serviceList li.list09 a.list09_2{
	bottom:20vw;
	right:6vw;
	width: 29.33vw;
	height: 10.00vw;
}
#service ul.serviceList li.list09 a.list09_3{
	bottom:5vw;
	right:5vw;
	width: 32.00vw;
	height: 6.00vw;
}
#service ul.serviceList li a .picTxt{
	position: absolute;
	bottom:0px;
	right:0px;
	padding: 0 0.5em 0.5em 0;
	text-align: right;
	width: 100%;
	font-size: 8.59vw;
	line-height: 1.2;
	color: #e94709;
	-webkit-transition: color 0.25s ease;
	transition: color 0.25s ease;
}
#service ul.serviceList li a:hover .picTxt{
	color: #FFF;
}
#service ul.serviceList li a .pic,
#service ul.serviceList li a .pic *{position: absolute;}
#service ul.serviceList li a.nobox .pic{top:0;left:0;width: 100%;height: 100%;}
#service ul.serviceList li.list01 a .pic{
	bottom:5vw;
	right:5vw;
	width: 46.67vw;
	height: 17.33vw;
}
#service ul.serviceList li.list08 a .pic{
	bottom:3vw;
	right:5vw;
	width: 22.67vw;
	height: 29.33vw;
}
#service ul.serviceList li.list10 a .pic{
	bottom:3vw;
	right:5vw;
	width: 45vw;
	height: 25.33vw;
}
#service ul.serviceList li.list11 a .pic{
	bottom:5vw;
	right:5vw;
	width: 57vw;
	height: 14.67vw;
}




#service ul.serviceList li a .pic *{
	object-fit: contain;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
}
#service ul.serviceList li a .pic img.on,
#service ul.serviceList li a .pic .svgImg.on{
	opacity: 0;
	-webkit-transition: opacity 0.25s ease;
	transition: opacity 0.25s ease;
}
#service ul.serviceList li a:hover .pic img.on,
#service ul.serviceList li a:hover .pic .svgImg.on{
	opacity: 1;
}

#service ul.serviceList li a .pic img.off,
#service ul.serviceList li a .pic .svgImg.off{
	opacity: 1;
	-webkit-transition: opacity 0.25s ease;
	transition: opacity 0.25s ease;
}
#service ul.serviceList li a:hover .pic img.off,
#service ul.serviceList li a:hover .pic .svgImg.off{
	opacity: 0;
}


#service ul.serviceList li a .pic .svgImg.off *{fill: #e94709;}
#service ul.serviceList li a .pic .svgImg.on * {fill: #FFFFFF;}




#case{
	padding: 23.4vw 0 23.4vw;
}
#case > .inner{
	padding: 0 7.81vw;
}
#case ul.titArea{
	margin-bottom: 14vw;
}
#case .fbox{
	-js-display: flex;
	display: -webkit-flex;
	display: flex;
}
#case ul.caseList{
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
	-webkit-justify-content: space-between; /* Safari */
	justify-content:         space-between;
}
#case ul.caseList > li{
	width: 48%;
	border: 1px solid #797042;
	margin-bottom: 3.13vw;
}
#case ul.caseList > li > ul.fbox{
	height: 25vw;
	padding: 2.34vw;
	-webkit-justify-content: space-between; /* Safari */
	justify-content:         space-between;
	-webkit-align-items: center; /* Safari */
	align-items:         center;
}
#case ul.caseList > li > ul.fbox li.tit{
	font-size: 2.34vw;
	font-weight: bold;
	color: #797042;
}
#case ul.caseList > li > ul.fbox li.ph{
	width: 67%;
	height: 100%;
}
#case ul.caseList > li.list01 .ph{background: url(../img/top/case_ph01.jpg) no-repeat center center/cover;}
#case ul.caseList > li.list02 .ph{background: url(../img/top/case_ph02.jpg) no-repeat center center/cover;}
#case ul.caseList > li.list03 .ph{background: url(../img/top/case_ph03.jpg) no-repeat center center/cover;}
#case ul.caseList > li.list04 .ph{background: url(../img/top/case_ph04.jpg) no-repeat center center/cover;}
#case ul.caseList > li.list05 .ph{background: url(../img/top/case_ph05.jpg) no-repeat center center/cover;}
#case ul.caseList > li.list06 .ph{background: url(../img/top/case_ph06.jpg) no-repeat center center/cover;}


#case ul.caseList > li .onView{
	padding: 2.34vw;
	background: rgba(55,40,0,0.8);
}
#case ul.caseList > li .onView ul li.copy{
	font-size: 2.19vw;
	font-weight: bold;
	line-height: 1.4;
	color: #fffbcb;
	white-space: nowrap;
	margin-bottom: 1.56vw;
}
#case ul.caseList > li .onView ul li.cname{
	font-size: 1.56vw;
	line-height: 1.5;
	min-height: 3em;
	color: #fffbcb;
	margin-bottom: 1.56vw;
}

#case ul.caseList > li .onView .btView{
}
#case ul.caseList > li .onView .btView a{
	width: 100%;
	height: 4.69vw;
	font-size: 2.34vw;
	background: rgba(255,255,255,0.8);
}




#office{
	padding: 23.4vw 0 23.4vw;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f8f6e2+0,ffffff+50,f8f6e2+100 */
background: rgb(248,246,226); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(248,246,226,1) 0%, rgba(255,255,255,1) 50%, rgba(248,246,226,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(248,246,226,1) 0%,rgba(255,255,255,1) 50%,rgba(248,246,226,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(248,246,226,1) 0%,rgba(255,255,255,1) 50%,rgba(248,246,226,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f6e2', endColorstr='#f8f6e2',GradientType=0 ); /* IE6-9 */

}
#office .fbox{
	-js-display: flex;
	display: -webkit-flex;
	display: flex;
}

#office h1.titArea{
	text-align: center;
	margin-bottom: 6.25vw;
	padding: 0 7.81vw;
}
#office h1.titArea img{
	width: 100%;
	height: auto;
}


#office > .inner {
	padding: 0 7.81vw;
}
#office ul.phList {
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:         wrap;
}
#office ul.phList li{
	width: 32%;
	height: 19vw;
	margin-right: 2%;
	margin-bottom: 1.56vw;
	position: relative;
}
#office ul.phList li:nth-child(3n){
	margin-right: 0;
}
#office ul.phList li:nth-child(3n + 15){
	margin-right: 2%;
}
#office ul.phList li:nth-child(3n + 16){
	margin-right: 0;
}
#office ul.phList li.blank{background: #797042;}
#office ul.phList li.blank::before,
#office ul.phList li.blank::after{
	content: '';
	display: block;
	position: absolute;
	top:50%;
	left:50%;
	background: #000;
	z-index: 10;
}
#office ul.phList li.blank::before{
	width: 12.5vw;
	height: 1px;
	margin-left: -6.25vw;
}
#office ul.phList li.blank::after{
	height: 3.13vw;
	width: 1px;
	margin-top: -1.565vw;
}

#office ul.phList li a{
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
#office ul.phList li a .ph{
	display: block;
	width: 100%;
	height: 100%;
}
#office ul.phList li.list01 a .ph{background: url(../img/top/office_ph01.jpg) no-repeat center center/cover;}
#office ul.phList li.list02 a .ph{background: url(../img/top/office_ph02.jpg) no-repeat center center/cover;}
#office ul.phList li.list03 a .ph{background: url(../img/top/office_ph03.jpg) no-repeat center center/cover;}
#office ul.phList li.list04 a .ph{background: url(../img/top/office_ph04.jpg) no-repeat center center/cover;}
#office ul.phList li.list05 a .ph{background: url(../img/top/office_ph05.jpg) no-repeat center center/cover;}
#office ul.phList li.list06 a .ph{background: url(../img/top/office_ph06.jpg) no-repeat center center/cover;}
#office ul.phList li.list07 a .ph{background: url(../img/top/office_ph07.jpg) no-repeat center center/cover;}
#office ul.phList li.list08 a .ph{background: url(../img/top/office_ph08.jpg) no-repeat center center/cover;}
#office ul.phList li.list09 a .ph{background: url(../img/top/office_ph09.jpg) no-repeat center center/cover;}
#office ul.phList li.list10 a .ph{background: url(../img/top/office_ph10.jpg) no-repeat center center/cover;}
#office ul.phList li.list11 a .ph{background: url(../img/top/office_ph11.jpg) no-repeat center center/cover;}
#office ul.phList li.list12 a .ph{background: url(../img/top/office_ph12.jpg) no-repeat center center/cover;}
#office ul.phList li.list13 a .ph{background: url(../img/top/office_ph13.jpg) no-repeat center center/cover;}
#office ul.phList li.list14 a .ph{background: url(../img/top/office_ph14.jpg) no-repeat center center/cover;}
#office ul.phList li.list15 a .ph{background: url(../img/top/office_ph15.jpg) no-repeat center center/cover;}
#office ul.phList li.list16 a .ph{background: url(../img/top/office_ph16.jpg) no-repeat center center/cover;}
#office ul.phList li.list17 a .ph{background: url(../img/top/office_ph17.jpg) no-repeat center center/cover;}
#office ul.phList li.list18 a .ph{background: url(../img/top/office_ph18.jpg) no-repeat center center/cover;}
#office ul.phList li.list19 a .ph{background: url(../img/top/office_ph19.jpg) no-repeat center center/cover;}
#office ul.phList li.list20 a .ph{background: url(../img/top/office_ph20.jpg) no-repeat center center/cover;}
#office ul.phList li.list21 a .ph{background: url(../img/top/office_ph21.jpg) no-repeat center center/cover;}
#office ul.phList li.list22 a .ph{background: url(../img/top/office_ph22.jpg) no-repeat center center/cover;}
#office ul.phList li.list23 a .ph{background: url(../img/top/office_ph23.jpg) no-repeat center center/cover;}
#office ul.phList li.list24 a .ph{background: url(../img/top/office_ph24.jpg) no-repeat center center/cover;}
#office ul.phList li.list25 a .ph{background: url(../img/top/office_ph25.jpg) no-repeat center center/cover;}


#office .carouselArea{
	position: fixed;
	top:0;
	left:0;
	z-index: 900;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events:none;
}
#office .carouselArea.active{
	-webkit-transition: opacity 0.25s ease;
	transition: opacity 0.25s ease;
}
#office .carouselArea.show{
	opacity: 1;
	pointer-events:auto;
}
#office .carouselArea > *{
	z-index: 10;
}

#office .carouselArea .caroufredsel_wrapper {
	overflow: hidden;
	position: absolute !important;
	top:50% !important;
	left:0 !important;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	height: 100% !important;
	z-index: 901 !important;
}
#office .carouselArea .carousel{
	height: 100% !important;
}
#office .carouselArea .carousel li{
	float: left;
	height: 100% !important;
	text-align: center;
	position: relative;
}
#office .carouselArea .carousel li img{
	position: relative;
	width: auto;
	height: auto;
	max-width: 80%;
	max-height: 80%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

/*prev next*/
#office .carouselArea .prev,
#office .carouselArea .next{
	width: 6.25vw;
	height: 6.25vw;
	position: absolute;
	top:50%;
	
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 901 !important;
}
#office .carouselArea .prev{left:0;}
#office .carouselArea .next{right:0;}
#office .carouselArea .prev a,
#office .carouselArea .next a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	background: #e94709;
	
}
/*矢印*/
#office .carouselArea .prev a::before,
#office .carouselArea .next a::before{
	content: '';
	width: 1.56vw;
	height: 1.56vw;
	position: absolute;
	top:50%;
}
#office .carouselArea .prev a::before{
	left:50%;
	border-top: 2px solid #FFF;
	border-left: 2px solid #FFF;
	-webkit-transform: rotate(-45deg) translateY(-55%);
	transform: rotate(-45deg) translateY(-55%);
}
#office .carouselArea .next a::before{
	right:50%;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	-webkit-transform: rotate(45deg) translateY(-55%);
	transform: rotate(45deg) translateY(-55%);
}


#office .carouselArea .close{
	width: 34px;
	height: 34px;
	position: absolute;
	top:0;
	right:0;
	z-index: 901 !important;
}
#office .carouselArea .close a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	background: #e94709;
}
#office .carouselArea .close a::before,
#office .carouselArea .close a::after{
	content: '';
	width: 16px;
	height: 2px;
	position: absolute;
	top:50%;
	left:50%;
	margin-left: -8px;
	background: #FFF;
}
#office .carouselArea .close a::before{
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#office .carouselArea .close a::after{
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}



#office .carouselArea .bgClose{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 0 !important;
	background: rgba(0,0,0,0.8);
}



#recruit{
	background: url(../img/top/sp_recruit_bg.jpg) no-repeat center center/cover;
	height: 150vw;
}
#recruit > .inner{
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 0 7.81vw;
}
#recruit .titArea{
	margin-bottom: 12.5vw;
}

#recruit .copyArea{
}

#recruit .copy{
	font-size: 11vw;
	line-height: 1.65;
	letter-spacing: 0.1em;
	color: #5f5f7d;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
          white-space: nowrap;
	position: relative;
	left:50%;
	-webkit-transform: translateX(-55%);
	transform: translateX(-55%);
	margin-bottom: 6.25vw;
}
	.win.chrome #recruit .copy{
		letter-spacing: -0.3em;
	}
#recruit .copy span.bb{
	position: relative;
	display: inline-block;
}
	.win.chrome #recruit .copy span.bb::before{
		top:0.35em;
	}
#recruit .copy span.bb::before{
	content: '';
	display: inline-block;
	position: absolute;
	top:0;
	right:0;
	width: 1px;
	height: 100%;
	border-right: 1px solid #5f5f7d;
}
#recruit .copy span.bbkten::before{
	height: calc(100% - 0.5em);
}
#recruit .copy span.kten{
	display: inline-block;
	position: relative;
	left:0.65em;
	top:-0.5em;
}




#recruit .btView{text-align: right;}
#recruit .btView a{
	background: #FFF;
}


#recruit .new{
	position: absolute;
	top:50%;
	left:50%;
	margin-left: 22vw;
	margin-top: 4vw;
}
#recruit .new img{
	height: 3.75vw;
	width: auto;
}

#contact{
	padding: 23.4vw 0 23.4vw;
}
#contact ul.titArea{
	background: #FFF;
}
#contact ul.titArea li.tit_jp{
	letter-spacing: 0;
}
#contact > .inner{
	position: relative;
}


#contact .bt{
	position: absolute;
	top:50%;
	left: 50%;
	margin-left: 26vw;
}
#contact .bt a{
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 3.75vw;
	color: #e94709;
	position: relative;
}