@charset "utf-8";

/*
 *
 *	career style
 *
 */

/*======================================
	mainContents
======================================*/
.mainContents {
	background: url(../images/career/bg.png);
}



/*======================================
	pageH
======================================*/
.pageH {
	position: relative;
	margin-bottom: 5%;
}
.pageH .tit {
	line-height: 1.3;
	padding: 1.5em 1em 12% 54%;
	border: #000 solid;
	border-width: 5px 0;
	background: #eca100 url(../images/career/mv.jpg) top left no-repeat;
	background-size: 52% auto;
}
.pageH .tit p {
	margin-bottom: .8em;
	font-size: 1.2em;
	font-weight: bold;
}
.pageH .tit span {
	font-size: .8em;
	font-weight: bold;
}
.pageH .tit .catch {
	padding-bottom: .8em;
	border-bottom: #000 double 5px;
	font-size: 1.3em;
}
.pageH .tit h1 {
	font-size: 1.7em;
	font-weight: bold;
}

.pageH .prof {
	width: 44%;
	max-width: 540px;
	margin: -10% 0 0 54%;
	border: #000 solid 3px;
	background: #fff;
	box-shadow: rgba(0,0,0,.2) 3px 3px 0;
}
.pageH .prof h2 {
	line-height: 1.4;
	padding: 1em;
	border-bottom: #000 solid 3px;
	font-weight: bold;
}
.pageH .prof p {
	padding: 1em;
	line-height: 1.4;
	font-size: .8em;
}



/*======================================
	pageN
======================================*/
.pageN {
	clear: both;
	margin-bottom: 2em;
}
.pageN ul {
	overflow: hidden;
}
.pageN ul li {
	float: left;
	width: 31%;
	margin-bottom: 1em;
}
.pageN ul li:nth-child(3n-1) {
	margin: 0 1.111115% 1em;
}
.pageN ul li:nth-child(3n+1) {
	clear: both;
}
.pageN ul li a {
	display: block;
	line-height: 1.2;
	padding-bottom: .6em;
	border: #000 solid 3px;
	background: #eca100;
	box-shadow: rgba(0,0,0,.2) 3px 3px 0;
	text-align: center;
	font-size: .8em;
	font-weight: bold;
}
.pageN ul li a span {
	display: block;
	position: relative;
	margin-bottom: .75em;
	padding: .3em;
	border-bottom: #000 solid 1px;
	text-align: center;
}
.pageN ul li a span:after {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	bottom: -12px;
	margin-left: -6px;
	border: transparent solid 6px;
	border-top-color: #000;
}
.pageN ul li a:hover {
	box-shadow: rgba(0,0,0,.2) 5px 5px 2px;
	color: #fff;
}



/*======================================
	commonBox
======================================*/
.commonBox {
	position: relative;
	padding-top: 13em;
}
.commonBox:before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	top: 2em;
	height: 8.5em;
	z-index: 1;
}

.commonBox h1 {
	position: relative;
	width: 30%;
	margin: -12em 0 2em;
	padding: .2em 1em 1em;
	border: #000 solid 3px;
	box-shadow: rgba(0,0,0,.2) 5px 5px 0;
	font-size: 1.1em;
	font-weight: bold;
	color: #000;
	z-index: 3;
}
.commonBox h1 span {
	position: relative;
	display: block;
	margin: 0 -1.25em 1em;
	padding: .5em;
	border-bottom: #000 solid 1px;
	text-align: center;
	font-size: .8em;
	font-weight: bold;
	letter-spacing: .15em;
}
.commonBox h1 span:after {
	content: '';
	display: block;
	position: absolute;
	width: 4em;
	height: 3px;
	bottom: -2px;
	left: 50%;
	margin-left: -2em;
	background: #000;
}

.commonBox h2 {
	padding: .5em .3em;
	border: #008593 solid;
	border-width: 3px 0 2px;
	background: none;
	text-align: center;
	font-size: 1.05em;
	font-weight: bold;
}


/****** txtBox ******/
.commonBox .txtBox {
	position: relative;
	padding: 1.5em;
	background: rgba(255,255,255,.8);
	text-shadow: #fff 1px 1px 0;
	z-index: 2;
}
.commonBox .txtBox :last-child {
	margin-bottom: 0;
}
.commonBox .figBox {
	position: relative;
	z-index: 1;
	box-shadow: rgba(0,0,0,.2) 5px 5px 0;
}

/* moreBtn */
.commonBox .txtBox .moreBtn {
	position: relative;
	display: inline-block;
	padding: .3em .5em .3em 1.5em;
	border: #000 solid 2px;
	background: #fff;
	text-decoration: none;
	font-weight: bold;
}
.commonBox .txtBox .moreBtn:after {
	content: '';
	display: block;
	position: absolute;
	top: .7em;
	left: .3em;
	width: 10px;
	height: 10px;
	border: #000 solid;
	border-width: 2px 2px 0 0;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.commonBox .txtBox .moreBtn:hover {
	color: #999;
}
.commonBox .txtBox .moreBtn:hover:after {
	border-color: #999;
	left: .4em;
}



/*======================================
	reasonBox
======================================*/
.reasonBox:before {
	background: url(../images/career/reason-bg.jpg) center;
	background-size: cover;
}

.reasonBox .txtBox {
	width: 45%;
	margin-left: 50%;
}
.reasonBox .figBox {
	width: 50%;
	margin-top: -7%;
	margin-left: 5%;
	z-index: 3;
}



/*======================================
	salonBox
======================================*/
.salonBox:before {
	background: url(../images/career/salon-bg.jpg) center;
	background-size: cover;
}

.salonBox .fig1 {
	width: 50%;
	margin-top: -1em;
	margin-left: 50%;
}
.salonBox .txtBox {
	width: 45%;
	margin-top: -25%;
	margin-left: 10%;
}
.salonBox .fig2 {
	width: 40%;
	margin-top: -1em;
	margin-left: 30%;
	z-index: 3;
}



/*======================================
	entryBox
======================================*/
.entryBox:before {
	background: url(../images/career/entry-bg.jpg) center;
	background-size: cover;
}

.entryBox .txt1 {
	width: 45%;
	margin-left: 40%;
	margin-top: -1em;
}
.entryBox .fig1 {
	width: 45%;
	margin-top: -15%;
}
.entryBox .txt2 {
	width: 45%;
	margin-top: 2em;
	margin-left: 12%;
}
.entryBox .fig2 {
	width: 45%;
	margin-top: -20%;
	margin-left: 50%;
}
.entryBox .txt3 {
	width: 80%;
	margin: 2em auto 0;
}
.entryBox .txt3 strong {
	font-size: 1.8em;
	font-weight: bold;
}



/*======================================
	systemBox
======================================*/
.systemBox:before {
	background: url(../images/career/system-bg.jpg) bottom;
	background-size: cover;
}

.systemBox .txt1 {
	width: 48%;
	margin-top: -2em;
	margin-left: 52%;
}
.systemBox .txt2 {
	width: 48%;
	margin-top: -12%;
	margin-left: 2%;
}
.systemBox .fig1 {
	width: 45%;
	margin-top: -20%;
	margin-left: 49%;
	margin-bottom: 2em;
	z-index: 3;
}
.systemBox .txt3 {
	width: 50%;
	margin-left: 51%;
}
.systemBox .fig2 {
	width: 45%;
	margin-top: -18%;
	margin-left: 7%;
	margin-bottom: 1.5em;
	z-index: 3;
}
.systemBox .txt4 {
	width: 70%;
	margin-left: 25%;
}



/*======================================
	partyBox
======================================*/
.partyBox:before {
	background: url(../images/career/party-bg.jpg);
	background-size: cover;
}

.partyBox .fig1 {
	width: 50%;
	margin-top: -.5em;
	margin-left: 49%;
}
.partyBox .fig2 {
	width: 28%;
	margin-top: -10%;
	margin-left: 15%;
}
.partyBox .txt1 {
	width: 52%;
	margin-top: -20%;
	margin-left: 45%;
	margin-bottom: 2em;
}
.partyBox .fig3 {
	width: 28%;
	margin-top: -5%;
	margin-left: 58%;
	z-index: 3;
}
.partyBox .fig4 {
	width: 55%;
	margin-top: -5%;
	margin-left: 5%;
}
.partyBox .txt2 {
	width: 55%;
	margin-top: -10%;
	margin-left: 45%;
	margin-bottom: 2em;
}
.partyBox .fig5 {
	width: 85%;
	margin: 0 auto;
}



/*======================================
	returnBox
======================================*/
.returnBox:before {
	background: url(../images/career/return-bg.jpg) center;
	background-size: cover;
}

.returnBox .txt1 {
	width: 52%;
	margin-left: 45%;
}
.returnBox .fig1 {
	width: 45%;
	margin-top: -25%;
	margin-left: 5%;
}





/*============================================================================

	responsive

============================================================================*/
@media screen and (max-width:960px) {

}



@media screen and (max-width:767px) {
/*======================================
	pageH
======================================*/
.pageH .tit {
	padding: 1em .5em 12% 50%;
	background-size: 48% auto;
}
.pageH .tit p {
	margin-bottom: .5em;
	font-size: 1em;
}
.pageH .tit .catch {
	font-size: 1.2em;
}
.pageH .tit h1 {
	font-size: 1.5em;
}

.pageH .prof {
	width: 90%;
	max-width: 90%;
	margin: -10% 5% 0 5%;
}



/*======================================
	mainContents
======================================*/
.mainContents {
	padding-top: 60px;
}



/*======================================
	commonBox
======================================*/
.commonBox h1 {
	width: 55%;
}

}



@media screen and (max-width:480px) {
/*======================================
	pageH
======================================*/
.pageH .tit {
	padding: 1em .5em 60% .5em;
	background: #eca100 url(../images/career/mv-sp.jpg) bottom center no-repeat;
	background-size: 100% auto;
}



/*======================================
	pageN
======================================*/
.pageN ul li {
	width: 49%;
}
.pageN ul li:nth-child(3n-1) {
	margin: 0 0 1em;
}
.pageN ul li:nth-child(odd) {
	clear: both;
	margin-right: 2%;
}
.pageN ul li:nth-child(3n+1) {
	clear: none;
}



/*======================================
	commonBox
======================================*/
.commonBox {
	padding-top: 16em;
}
.commonBox:before {
	top: 4em;
}

.commonBox h1 {
	width: 75%;
	margin: -14em auto 4em;
	padding: .2em .5em .5em;
	text-align: center;
}
.commonBox h1 span {
	margin: 0 -.75em .5em;
	padding: .3em;
}


/****** txtBox ******/
.commonBox .txtBox {
	padding: 1em;
}



/*======================================
	reasonBox
======================================*/
.reasonBox .txtBox {
	width: 90%;
	margin: 0;
}
.reasonBox .figBox {
	width: 80%;
	margin-top: -.5em;
	margin-left: 20%;
}



/*======================================
	salonBox
======================================*/
.salonBox .fig1 {
	width: 60%;
	margin-left: 40%;
}
.salonBox .txtBox {
	width: 98%;
	margin-top: -2em;
	margin-left: 0;
}
.salonBox .fig2 {
	width: 45%;
	margin-top: -.5em;
	margin-left: 45%;
}



/*======================================
	entryBox
======================================*/
.entryBox .txt1 {
	width: 95%;
	margin-left: 5%;
}
.entryBox .fig1 {
	width: 50%;
	margin-top: -.5em;
	z-index: 3;
}
.entryBox .txt2 {
	width: 95%;
	margin-top: 1em;
	margin-left: 3%;
}
.entryBox .fig2 {
	width: 50%;
	margin-top: -.5em;
	margin-left: 0;
	z-index: 3;
}
.entryBox .txt3 {
	width: 100%;
}



/*======================================
	systemBox
======================================*/
.systemBox .txt1 {
	width: 100%;
	margin-top: -1em;
	margin-left: 0;
}
.systemBox .txt2 {
	width: 95%;
	margin-top: 1em;
	margin-left: 0;
}
.systemBox .fig1 {
	width: 60%;
	margin-top: -.5em;
	margin-left: 40%;
}
.systemBox .txt3 {
	width: 95%;
	margin-left: 5%;
}
.systemBox .fig2 {
	width: 60%;
	margin-top: -.5em;
	margin-left: 3%;
}
.systemBox .txt4 {
	width: 100%;
	margin-left: 0;
}



/*======================================
	partyBox
======================================*/
.partyBox .fig2 {
	margin-top: -25%;
	margin-left: 0%;
}
.partyBox .txt1 {
	width: 95%;
	margin-top: -8%;
	margin-left: 5%;
}
.partyBox .fig3 {
	margin-top: -10%;
	margin-left: 72%;
}
.partyBox .fig4 {
	width: 80%;
	margin-top: -10%;
	margin-left: 0;
}
.partyBox .txt2 {
	width: 95%;
	margin-left: 5%;
	margin-bottom: 1em;
}
.partyBox .fig5 {
	width: 100%;
}



/*======================================
	returnBox
======================================*/
.returnBox .txt1 {
	width: 100%;
	margin-left: 0;
}
.returnBox .fig1 {
	width: 60%;
	margin-top: -.5em;
	margin-left: 40%;
	z-index: 3;
}

}