/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{font-family:Arial,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Meiryo,Helvetica,メイリオ,sans-serif;font-size:88%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{color:#000;background-color:transparent;text-decoration:none}a:active,a:hover{color:#000;outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:bottom;max-width:100%;height:auto}svg:not(:root){overflow:hidden}figure{margin:0}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}li{list-style:none}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}img {backface-visibility: hidden;}


/* template style ----------------------*/

body {
	line-height: 180%;
	font-size: 14px;
	color:#4c4c4c;
	overflow-x:hidden;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	margin: auto;
	padding: 0;
}
body p {
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
}
#wrapper { position:relative; }
.sp-bl,
.sp-il,
.tablet-bl {
	display:none;
}

.inner {
	width:95%;
	max-width:960px;
	margin-right:auto;
	margin-left:auto;
	position:relative;
}
.opa {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.opa:hover {
	opacity: 0.85;
	filter: alpha(opacity=85);
}

.clearfix:before,
.clearfix:after,
.cf:before,
.cf:after {
	content: "";
	display: table;
}
.clearfix:after,
.cf:after {
	clear: both;
}
.clearfix,
.cf {
	zoom: 1;
}

.Barrio {
	font-family: "Barrio", cursive;
	letter-spacing: 7px;
    line-height: 1.3;
}


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

#header {
	width: 250px;
	position: fixed;
	left: 0;
	top: 0;
	background:#fff;
}
	#header h1 {
		padding-top: 30px;
		padding-bottom: 30px;
		width: 114px;
	    margin-right: auto;
	    margin-left: auto;
	}
	#h_contact {
		display: block;
		background:#9e415d;
		padding-top: 13px;
		padding-bottom: 13px;
		margin-bottom: 30px;
		color:#fff;
		font-size: 10px;
		text-align: center;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}
	#h_contact:hover {
		background:#a05a71;
	}
		#h_contact span {
			display:block;
			font-size: 16px;
		    background: url(../img/common/pc/side-mail_icon.png) no-repeat 31px 4px;
		    background-size: 21px 16px;
		    width: 100%;
		    padding-left: 16px;
		}
	#gnav {
		margin-bottom: 45px
	}
		#gnav ul li {
			text-align: center;
		}
		#gnav ul li + li {
			margin-top: 15px;
		}
		#gnav ul li a {
			display: block;
			position: relative;
			width: 120px;
			margin-right: auto;
			margin-left: auto;
		}
		#gnav ul li a .active {
			position: absolute;
			top: 0px;
			left: 0px;
			opacity: 0;
		}
		#gnav ul li a img {
			-webkit-transition: 0.3s ease-in-out;
			-moz-transition: 0.3s ease-in-out;
			-o-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
		}
	.address {
		text-align: center;
	}
		.address h2 {
			font-weight: bold;
			font-size: 12px;
			line-height: 1.6;
		}
		.address p {
			font-size: 10px;
			line-height: 1.6;
		}
	.h_bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 250px;
		background:#333;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.h_bottom p {
		text-align: center;
		color: #fff;
		line-height: 1.6;
	}
		.tel {
			font-size: 12px;
		}
			.tel span {
				font-size:18px ;
				padding-left: 5px;
			}
			.tel span a,
			.fax span a {
				color: #fff;
			}
		.businessTime {
			font-size: 11px;
		}
		.fax {
			font-size: 10px;
		}
			.fax span {
				font-size:14px ;
				padding-left: 5px;
			}


/* main ------------------------*/

#main {
	margin-left: 250px;
}
#mv .pageTtl {
	color: #fff;
	font-size: 48px;
	font-family: "Barrio", cursive;
    letter-spacing: 7px;
    line-height: 1.3;
    position: absolute;
    text-align:center;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}
	#mv .pageTtl span {
		display:block;
	    line-height: 0;
	    text-align: center;
	    padding-top: 5px;
	}

	.pankuzu {
		color:#999999;
		font-size: 10px;
	    padding-top: 15px;
	    padding-bottom: 15px;
	}
		.pankuzu li {
			float: left;
		}
		.pankuzu li + li {
			margin-left: 10px;
		}
			.pankuzu li a {
				color:#999999;
			}

	.sec-ttl {
		font-size: 32px;
		font-family: "Barrio", cursive;
	    letter-spacing: 7px;
	    line-height: 1.3;
        text-align: center;
        padding-bottom: 40px;
        font-weight: normal;
	}
		.sec-ttl span {
		    display: block;
		    line-height: 0;
		    padding-top: 5px;
		}
/* footer ----------------------*/

#footer {
	margin-left: 250px;
}
	#f_tips {
		background:#333;
		min-height: 150px;
	}
		#f_tips .comment {
			float: left;
			color: #fff;
			font-weight: bold;
			font-size: 16px;
			width: 63%;
			max-width: 700px;
			padding-top: 40px;
			padding-left: 45px;
			line-height: 1.6;
		}
		#f_contact {
			float: right;
			width:31%;			
			max-width: 340px;
		}
			#f_contact .left {
				width: 73.5%;
				float: left;
				background:#9d415d;
				min-height: 150px;
				text-align: center;
			}
				#f_contact .left img {
					display: block;
					padding-bottom: 10px;
				    margin-right: auto;
				    margin-left: auto;
				}
				#f_contact .left .mail {
					color: #fff;
				    padding-top: 20px;
				    display: block;
				    font-size: 18px;
				}
				#f_contact .left .tel,
				#f_contact .left .businessTime {
					color: #fff;
				}
			#f_contact .pageTop {
				width: 26.5%;
				float: right;
				background:#666;
				min-height: 120px;
			    text-align: center;
			    padding-top: 30px;
			}

	#f_info {
		padding-top: 45px;
		padding-bottom: 45px;
		width: 90%;
		margin-right: auto;
		margin-left: auto;
	}
		#fnav {
			float: left;
			width: 75%;
			max-width: 700px;
		}
			#fnav .wide li {
				float: left;
				padding-left: 35px;
				padding-right: 35px;
			}
			#fnav .wide li + li {
				border-left: 1px solid #d2d2d2;
			}
			#fnav .wide li:first-child {
				padding-left: 0;
			}
			#fnav .wide li:last-child {
				padding-right: 0;
			}
			#fnav .wide li a {
			    display: block;
				position: relative;
			}
				#fnav .wide li a .active {
					position: absolute;
					top: 0;
					left: 0;
					-webkit-transition: 0.3s ease-in-out;
					-moz-transition: 0.3s ease-in-out;
					-o-transition: 0.3s ease-in-out;
					transition: 0.3s ease-in-out;
					opacity: 0;
				}
			#fnav .narrow {
				display: none;
			}
		.copyright {
			float: right;
		    width: 16%;
		    max-width: 180px;
		}
			.copyright ul li {
				font-size: 12px;
				color: #8e8e8e;
				padding-left: 18px;
			}
			.copyright ul li:nth-child(1) {
				background:url(../img/common/pc/facebook_icon.gif) no-repeat left center;
				background-size: 12px 15px;
			}
			.copyright ul li:nth-child(2) {
				background:url(../img/common/pc/rock_icon.gif) no-repeat left center;
				background-size: 12px 15px;
			}
			.copyright ul li:nth-child(3) {
				background:url(../img/common/pc/copyright_icon.gif) no-repeat left center;
				background-size: 12px 15px;
			}
				.copyright ul li a {
					color: #323232;
					-webkit-transition: 0.3s ease-in-out;
					-moz-transition: 0.3s ease-in-out;
					-o-transition: 0.3s ease-in-out;
					transition: 0.3s ease-in-out;
				}
				.copyright ul li a:hover {
					color: #9d415d;
				}

@media screen and (max-width:1210px) {
	#f_tips .comment {
		font-size: 14px;
	    line-height: 1.8;
	    width: 57%;
	}
	#f_contact {
	    width: 35%;	
	}
	#fnav .wide li {
	    padding-left: 25px;
	    padding-right: 25px;
	}
	.copyright {
		width: 20%;
	}
}
@media screen and (max-width:1120px) {
	#f_tips .comment {
		font-size: 13px;
        width: 50%;
	    padding-top: 31px;
	    padding-left: 24px;
	}
		.comment_br {
			display: none;
		}
	#f_contact {
	    width: 42%;
	}
		#f_contact .left .mail,
		.tel span {
			font-size: 15px;
		}
	#fnav {
		float: none;
	    width: auto;
	    display: table;
	    margin-right: auto;
	    margin-left: auto;
	    margin-bottom: 40px;
	}
	.copyright {
        width: auto;
	    max-width: inherit;
	    display: table;
	    margin-right: auto;
	    margin-left: auto;
	    float: none;
	}
		.copyright ul li {
			float: left;
		    line-height: 1.2;
		}
		.copyright ul li + li {
			margin-left: 30px;
		}
}
@media screen and (max-width:870px) {
	#f_tips .comment {
	    width: 90%;
	    padding-top: 30px;
	    padding-left: 0;
	    padding-bottom: 30px;
	    margin-right: auto;
	    margin-left: auto;
	    float: none;
	}
	#f_contact {
	    width: 100%;
	    max-width: inherit;
	}
		#f_contact .left {
			padding-top: 30px;
			min-height: 80px;
		}
			#f_contact .left .inner {
				width: 90%;
			}
			#f_contact .left img {
			    display: none;
			}
			#f_contact .left .mail {
				text-align: left;
			    margin-right: auto;
			    margin-left: auto;
			    background: url(../img/common/pc/side-mail_icon.png) no-repeat left 4px;
			    background-size: 21px 16px;
			    padding-top: 0px;
			    padding-left: 28px;
			}
			#f_contact .left .tel, #f_contact .left .businessTime {
				text-align: left;
				float: left;
			}
	#f_contact .pageTop {
	    min-height: 110px;
	}
		#f_contact .pageTop a {
			padding-top: 18px;
		}

	#f_info {
		width: 100%;
		text-align: center;
		padding-top: 0;
	}
		#fnav {
			display: block;
			margin-bottom: 30px;
		}
		#fnav .wide {
			display: none;
		}
		#fnav .narrow {
			display: block;
		}
			#fnav .narrow li {
				float: left;;
				width: 50%;
				box-sizing: border-box;
				border-bottom: 1px solid #ccc;
			}
			#fnav .narrow li:nth-child(even) {
				border-left: 1px solid #ccc;
			}
			#fnav .narrow li a {
				display: block;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			#fnav .narrow li:nth-child(1) {
				background: url(../img/common/sp/fnav-company.gif) no-repeat 31% 13px;
			    background-size: 20px 18px;
			}
			#fnav .narrow li:nth-child(2) {
				background: url(../img/common/sp/fnav-service.gif) no-repeat 31% 13px;
			    background-size: 20px 18px;
			}
			#fnav .narrow li:nth-child(3) {
				background: url(../img/common/sp/fnav-staff.gif) no-repeat 31% 13px;
			    background-size: 20px 18px;
			}
			#fnav .narrow li:nth-child(4) {
				background: url(../img/common/sp/fnav-recruit.gif) no-repeat 31% 13px;
			    background-size: 20px 18px;
			}

}

/* parts -----------------------*/

.andmore {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
}

.button {
	float: left;
	min-width: 150px;
	max-width: 250px;
	display: block;
	padding: 1em 0.5em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	background:url(../img/common/pc/andmore_arrow.png) no-repeat 90% center;
	background-size: 14px 10px;
}

.button:focus {
	outline: none;
}

.button > span {
	vertical-align: middle;
}

/* Nina */
.button--nina {
	padding: 2px 45px 0 25px;
	color: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
	overflow: hidden;
	-webkit-transition: background-color 0.3s;
	transition: background-color 0.3s;
}
.button--nina.button--inverted {
	background: #fff;
	color: #7986cb;
}
.button--nina > span {
	display: inline-block;
	padding: 6px 0;
	opacity: 0;
	color: #fff;
	-webkit-transform: translate3d(0, -10px, 0);
	transform: translate3d(0, -10px, 0);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--nina::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
    height: 100%;
    padding: 8px 45px 6px 25px;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button--nina:hover {
	background-color: rgba(255,255,255,.2);
}
.button--nina:hover::before {
	opacity: 0;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
.button--nina:hover > span {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.button--nina:hover > span:nth-child(1) {
	-webkit-transition-delay: 0.045s;
	transition-delay: 0.045s;
}
.button--nina:hover > span:nth-child(2) {
	-webkit-transition-delay: 0.09s;
	transition-delay: 0.09s;
}
.button--nina:hover > span:nth-child(3) {
	-webkit-transition-delay: 0.135s;
	transition-delay: 0.135s;
}
.button--nina:hover > span:nth-child(4) {
	-webkit-transition-delay: 0.18s;
	transition-delay: 0.18s;
}
.button--nina:hover > span:nth-child(5) {
	-webkit-transition-delay: 0.225s;
	transition-delay: 0.225s;
}
.button--nina:hover > span:nth-child(6) {
	-webkit-transition-delay: 0.27s;
	transition-delay: 0.27s;
}
.button--nina:hover > span:nth-child(7) {
	-webkit-transition-delay: 0.315s;
	transition-delay: 0.315s;
}
.button--nina:hover > span:nth-child(8) {
	-webkit-transition-delay: 0.36s;
	transition-delay: 0.36s;
}
.button--nina:hover > span:nth-child(9) {
	-webkit-transition-delay: 0.405s;
	transition-delay: 0.405s;
}
.button--nina:hover > span:nth-child(10) {
	-webkit-transition-delay: 0.45s;
	transition-delay: 0.45s;
}


@media screen and (max-width:768px) { /* smart phone 6〜7 */

	.pc { display:none !important; }
	.sp-bl { display:block; }
	.sp-il { display:inline; }

	.inner {
		width:87.5%;
		max-width:560px;
	}

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

#header {
    height: auto !important;
    width: 100%;
    z-index: 2;
}
	#sp-header {
	}
	#sp-header .logo img {
		width: 133px;
	}
	#sp-header nav ul li {
		float: left;
		width: 50%;
		box-sizing: border-box;
		text-align: center;
	}
		#sp-header nav ul li:nth-child(1) {
			background:#aa2f5b;
		}
		#sp-header nav ul li:nth-child(2) {
			background:#323232;
		}
		#sp-header nav ul li img {
			width: 150px;
		}

/* sp-main ------------------------*/

#main {
	width: 100% !important;
    margin-left: 0;
}

	#mv .pageTtl {
		font-size:26px;
	}

	.pankuzu {
	    font-size: 12px;
	    padding-top: 10px;
	    padding-bottom: 10px;
	}
	.sec-ttl {
		font-size: 24px;
	    padding-bottom: 20px;
	}
		.sec-ttl span {
			padding-top: 7px;
		}

/* sp-footer ----------------------*/

#footer {
	width: 100% !important;
    margin-left: 0;
}
	#f_contact .left {
		width: 85.9375%;
	    padding-top: 11px;
	    min-height: 61px;
	}
		#f_contact .left .mail {
		    background: url(../img/common/sp/side-mail_icon.png) no-repeat left 6px;
		    background-size: 18px 14px;
		}
		#f_contact .left .tel {
			font-size: 10px;
		}
			#f_contact .left span {
				font-size: 12px;
			}
			#f_contact .left .tel a {
				color: #fff;
			}
		#f_contact .left .businessTime {
			font-size: 9px;
			padding-top: 1px
		}
	#f_contact .pageTop {
		width: 14.0625%;
	    min-height: 72px;
	    padding-top: 0;
	}
		#f_contact .pageTop a {
		    padding-top: 9px;
		}
		#f_contact .pageTop img {
			width: 29px;
		    padding-top: 8px;
		}

	#fnav .narrow li a {
		font-size: 12px;
	    padding-left: 22px;
	}
	#fnav .narrow li:nth-child(1) {
		background: url(../img/common/sp/fnav-company.gif) no-repeat 27% 12px;
	    background-size: 20px 18px;
	}
	#fnav .narrow li:nth-child(2) {
		background: url(../img/common/sp/fnav-service.gif) no-repeat 27% 12px;
	    background-size: 20px 18px;
	}
	#fnav .narrow li:nth-child(3) {
		background: url(../img/common/sp/fnav-staff.gif) no-repeat 27% 12px;
	    background-size: 20px 18px;
	}
	#fnav .narrow li:nth-child(4) {
		background: url(../img/common/sp/fnav-recruit.gif) no-repeat 27% 12px;
	    background-size: 20px 18px;
	}

	#f_info {
	    padding-bottom: 30px;
	}
		.copyright ul li:nth-child(1) {
		    background: url(../img/common/sp/facebook_icon.gif) no-repeat left center;
		    background-size: 12px 12px;
		}
		.copyright ul li:nth-child(2) {
			background: url(../img/common/sp/rock_icon.gif) no-repeat left center;
		    background-size: 12px 12px;
		}
		.copyright ul li:nth-child(3) {
			background: url(../img/common/sp/copyright_icon.gif) no-repeat left center;
		    background-size: 12px 12px;
			clear: both;
		    margin-left: 29%;
		    margin-top: 15px;
		}

/* sp-parts -----------------------*/



.cd-logo, .cd-nav-trigger {
  position: fixed;
  display: inline-block;
}

.cd-logo {
  top: 28px;
  left: 5%;
}
.cd-logo img {
  display: block;
}

.cd-nav-trigger {
	top: 8px;
	right: 3%;  
	height: 44px;
	width: 44px;
	z-index: 5;
	/* image replacement */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	border: none;
    background: rgba(0,0,0,0);
}
.cd-nav-trigger .cd-icon {
  /* icon created in CSS */
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  width: 18px;
  height: 3px;
  background-color: #323232;
  z-index: 10;
}
.cd-nav-trigger .cd-icon::before, .cd-nav-trigger .cd-icon:after {
  /* upper and lower lines of the menu icon */
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #323232;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* apply transition to transform property */
  -webkit-transition: -webkit-transform .3s;
  -moz-transition: -moz-transform .3s;
  transition: transform .3s;
  content:'';
}
.cd-nav-trigger .cd-icon::before {
  -webkit-transform: translateY(-6px) rotate(0deg);
  -moz-transform: translateY(-6px) rotate(0deg);
  -ms-transform: translateY(-6px) rotate(0deg);
  -o-transform: translateY(-6px) rotate(0deg);
  transform: translateY(-6px) rotate(0deg);
  content:'';
}
.cd-nav-trigger .cd-icon::after {
  -webkit-transform: translateY(6px) rotate(0deg);
  -moz-transform: translateY(6px) rotate(0deg);
  -ms-transform: translateY(6px) rotate(0deg);
  -o-transform: translateY(6px) rotate(0deg);
  transform: translateY(6px) rotate(0deg);
  content:'';
}
.cd-nav-trigger::before, .cd-nav-trigger::after {
  /* 2 rounded colored backgrounds for the menu icon */
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  content:'';
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
}
.cd-nav-trigger::before {
  background-color: #fff;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  transition-delay: 0.4s;
  content:'';
}
.cd-nav-trigger::after {
  background-color: #f2dae4;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  transition-duration: 0s;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  transition-delay: 0s;
}
.cd-nav-trigger.close-nav::before {
  /* user clicks on the .cd-nav-trigger element - 1st rounded background disappears */
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  content:'';
}
.cd-nav-trigger.close-nav::after {
  /* user clicks on the .cd-nav-trigger element - 2nd rounded background appears */
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  transition-delay: 0.4s;
  content:'';
}
.cd-nav-trigger.close-nav .cd-icon {
  /* user clicks on the .cd-nav-trigger element - transform the icon */
  background-color: rgba(255, 255, 255, 0);
}
.cd-nav-trigger.close-nav .cd-icon::before, .cd-nav-trigger.close-nav .cd-icon::after {
  background-color: #aa2f5b;
  content:'';
}
.cd-nav-trigger.close-nav .cd-icon::before {
  -webkit-transform: translateY(0) rotate(45deg);
  -moz-transform: translateY(0) rotate(45deg);
  -ms-transform: translateY(0) rotate(45deg);
  -o-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
  content:'';
}
.cd-nav-trigger.close-nav .cd-icon::after {
  -webkit-transform: translateY(0) rotate(-45deg);
  -moz-transform: translateY(0) rotate(-45deg);
  -ms-transform: translateY(0) rotate(-45deg);
  -o-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
  content:'';
}

.cd-primary-nav {
  /* by default it's hidden */
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 3;
  background-color: rgba(170,47,91,1);
  overflow: auto;
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s, opacity .8s;
  -moz-transition: visibility 0s, opacity .8s;
  transition: visibility 0s, opacity .8s;
  padding-top: 120px;
}
.cd-primary-nav li {
  margin: 1.6em 0;
  text-align: center;
  text-transform: capitalize;
}
.cd-primary-nav a {
	font-size: 16px;
	letter-spacing: 1px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition: color 0.2s;
	-moz-transition: color 0.2s;
	transition: color 0.2s;
	color: #fff;
}
.no-touch .cd-primary-nav a:hover {
  color: #ffffff;
}
.cd-primary-nav.fade-in {
  /* navigation visible at the end of the circle animation */
  visibility: visible;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-primary-nav li {
    margin: 2em 0;
  }
  .cd-primary-nav a {
    font-size: 28px;
    font-size: 1.75rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-primary-nav li {
    margin: 2.6em 0;
  }
  .cd-primary-nav a {
    font-size: 32px;
    font-size: 2rem;
  }
}

.cd-overlay-nav, .cd-overlay-content {
  /* containers of the 2 main rounded backgrounds - these containers are used to position the rounded bgs behind the menu icon */
  position: fixed;
  top: 18px;
  right: 5%;
  height: 4px;
  width: 4px;
  -webkit-transform: translateX(-20px) translateY(20px);
  -moz-transform: translateX(-20px) translateY(20px);
  -ms-transform: translateX(-20px) translateY(20px);
  -o-transform: translateX(-20px) translateY(20px);
  transform: translateX(-20px) translateY(20px);
}
.cd-overlay-nav span, .cd-overlay-content span {
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.cd-overlay-nav.is-hidden, .cd-overlay-content.is-hidden {
  /* background fades out at the end of the animation */
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}

.cd-overlay-nav {
  /* main rounded colored bg 1 */
  z-index: 2;
}
.cd-overlay-nav span {
  background-color: rgba(170,47,91,.6);
}

.cd-overlay-content {
  /* main rounded colored bg 2 */
  z-index: 4;
}
.cd-overlay-content span {
  background-color: #fff;
}

.cd-content {
  /* just some dummy content */
  padding: 0;
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
  z-index: 1;
}
.cd-content .cd-intro {
  height: 200px;
  padding-top: 4.6em;
}
.cd-content h1 {
  text-align: center;
  font-size: 20px;
  font-size: 1.25rem;
}
.cd-content p {
  line-height: 2;
  font-size: 14px;
}

.logo-white {
	width: 133px;
	position: absolute;
	top: 0;
	left: 0;
}
#sp-gnav li a {
	padding-left: 30px;
}
.openFixNav {
	position: fixed;
	top: 60px;
	width: 100%;
}
.openFixNav ul li {
	float: left;
	width: 50%;
	box-sizing: border-box;
	text-align: center;
	margin: 0;
}
	.openFixNav ul li:nth-child(1) {
		background:#fff;
	}
	.openFixNav ul li:nth-child(2) {
		background:#fff;
		border-left:1px solid #ccc;
	}
	#sp-gnav .openFixNav ul li a {
		padding-left:0;
	}
	.openFixNav ul li img {
		width: 150px;
	}
.opennav-company {
	background: url(../img/common/sp/opennav-company.png) no-repeat 35% 2px;
    background-size: 20px 18px;
}
.opennav-service {
	background: url(../img/common/sp/opennav-service.png) no-repeat 35% 2px;
    background-size: 20px 18px;
}
.opennav-staff {
	background: url(../img/common/sp/opennav-staff.png) no-repeat 35% 2px;
    background-size: 20px 18px;
}
.opennav-recruit {
	background: url(../img/common/sp/opennav-recruit.png) no-repeat 35% 2px;
    background-size: 20px 18px;
}

@media only screen and (min-width: 768px) {
  .cd-content .cd-intro {
    height: 250px;
    padding-top: 6em;
  }
  .cd-content h1 {
    font-size: 28px;
    font-size: 1.75rem;
  }
  .cd-content p {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.8;
  }
}

}