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

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-style:normal; font-weight:normal; font-size:100%; vertical-align:baseline;}
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
html{ overflow-y:scroll;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content:none;}
input, textarea,{ margin:0; padding:0;}
ol, ul{ list-style:none;}
table{ border-collapse:collapse; border-spacing:0;}
caption, th{ text-align:left;}
a:focus { outline:none;}

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}  
.clearfix { display:inline-table; }  
/* Hides from IE-mac \*/  
* html .clearfix { height:1%; }  
.clearfix { display:block; }  
/* End hide from IE-mac */  
 
* { box-sizing:border-box;}

a { color:#094; text-decoration:none;}
a:hover { color:#094; text-decoration:underline;}

a:hover img { opacity:0.75; filter:alpha(opacity=75); -ms-filter:"alpha(opacity=75)";}
a, a:hover { -webkit-transition:0.1s; -moz-transition:0.1s; -o-transition:0.1s; transition:0.1s;}

img { max-width:100%; height:auto; vertical-align: bottom;}

.pagetop { display:none; position:fixed; bottom:20px; right:20px;}
.pagetop a { display: block; width:50px; height:50px; text-align:center; line-height:50px; color: #fff; font-size:18px;
	 background: #094; border:1px #fff solid; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)";}

#loader { width:100%; padding-top:400px; text-align:center;}
#screen { display:none;}

/*---- body, wrap, inner ----*/

body { text-align:center; font-size:16px; font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important; }

#wrap { width:1000px; margin:0 auto; background:#eee;}
.inner { width:1000px; margin:0 auto;}

.pc { display:block;}
.mb { display:none;}
 
@media screen and (max-width: 480px){
	#wrap { width:100%; margin:0;}
	.inner { width:96%; margin:0 2%;}
	.pc { display:none;}
	.mb { display:block;}

	.opBtn {}
	.opBox { display:none;}
}


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

header > .inner{ position:relative; height:115px;}
header .hLogo { position:absolute; top:31px;}
header .hTel { position:absolute; top:37px; left:381px;}
header .hContact { position:absolute; top:32px; right:0;}
header .hContact a { display:block; width:220px; height:50px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background:#FFAF52;
 color:#fff; font-size:18px; font-weight:bold; line-height:50px;}
 header .hContact a:after { position:absolute; right:10px; content:">";}
 header .hContact a:hover { opacity:0.75; filter:alpha(opacity=75); -ms-filter:"alpha(opacity=75)"; text-decoration:none;}

@media screen and (max-width: 480px){
	header > .inner { height:auto;}
	header .hLogo, header .hTel, header .hContact { position:static; margin:5px auto;}
	header .hContact a{ position:relative; height:40px; margin:0 auto; line-height:40px;}
}


/* main img */

#main { height:510px; background:#F5F5F7;}

@media screen and (max-width: 480px){
	#main { height:auto;}
}



/*---- common ----*/

section { padding:60px 0 0 0;}
section h2 { font-size:36px;}
section .h2eng { position:relative; color:#094; font-size:12px;}
section .h2eng:after { position:absolute; bottom:-30px; left:50%; margin-left:-40px; width:80px; content:""; border-bottom:3px #094 solid;}
section .h2catch { margin:70px 0 30px 0; font-size:22px;}

@media screen and (max-width: 480px){
	section { padding:10px 0 0 0;}
	section h2 { font-size:24px;}
	section .h2eng { font-size:10px;}
	section .h2eng:after { bottom:-10px;}
	section .h2catch { width:96%; margin:20px 2% 10px 2%; font-size:14px; text-align:left;}
}


/* job list */

#jobList {}
#jobWrap { padding:50px 0; background:#f0f0f0;}

ul.jList li { width:235px; height:290px; margin:0 20px 20px 0; padding:10px; background:#fff; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; float:left; text-align:left;}
ul.jList li:nth-child(4n) { margin:0 0 20px 0;}
ul.jList li dl dt { position:relative; width:100%; height:44px; padding:0 10px; background:#094; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; color:#fff; font-size:18px; line-height:44px;}
ul.jList li dl dt:after { position:absolute; top:50%; right:10px;  margin-top:-12px; width:80px; height:24px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; font-size:12px; line-height:24px; text-align:center;}
ul.jList li dl dt.regular:after { content:"正社員"; background:#FFAF52;}
ul.jList li dl dt.part:after    { content:"パート"; background:#FF7652;}
ul.jList li dl dd.catch { margin-top:15px; font-weight:bold; line-height:110%;}
ul.jList li dl dd.comm { margin-top:15px; line-height:110%;}
ul.jList li dl dd.link { position:relative; margin-top:15px; line-height:110%; text-align:right;}
ul.jList li dl dd.link:before { position:absolute; right:120px; display:block; width:16px; height:16px; content:">"; background:#094; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; color:#fff;}

@media screen and (max-width: 480px){
	#jobWrap { padding:10px 0;}
	ul.jList li { width:100%; height:auto; margin:0 0 5px 0; padding:5px; float:none;}
	ul.jList li:nth-child(4n) { margin:0 0 5px 0;}
	ul.jList li dl dt { height:40px; padding:0 5px; line-height:40px;}
	ul.jList li dl dt:after { width:auto; padding:0 4px;}
	ul.jList li dl dd.catch, ul.jList li dl dd.comm, ul.jList li dl dd.link { margin-top:5px;}
}

#jobImgWrap { width:100%; height:940px; padding:70px 0; background:url(../images/job_img.jpg) top center no-repeat;}
#jobImgWrap .jobImgCatch { font-size:22px;}
.jobImgBox { margin-top:28px; padding:20px; background-color:rgba(255,255,255,0.75); border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; text-align:left;}
.jobImgBox p.catch { font-size:20px; text-align:center;}

.jobImgBox ul.jobComm li { width:100%; margin:10px 0;}
.jobImgBox ul.jobComm li > dl { display:table;}
.jobImgBox ul.jobComm li > dl dt { display:table-cell; width:240px; height:50px; margin-top:15px; color:#fff; font-size:20px; font-weight:bold; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; text-align:center; vertical-align:middle;}
.jobImgBox ul.jobComm li:nth-child(1) > dl dt { background:#FFAF52;}
.jobImgBox ul.jobComm li:nth-child(2) > dl dt { background:#FF7652;}
.jobImgBox ul.jobComm li:nth-child(3) > dl dt { background:#02AF4F;}
.jobImgBox ul.jobComm li > dl dd { display:table-cell; padding:0 10px; vertical-align:middle;}

@media screen and (max-width: 480px){
	#jobImgWrap { height:auto; padding:20px 0; background:#438DCD;}
	.jobImgCatch { font-size:20px;}
	.jobImgBox { margin-top:10px; padding:10px;}
	.jobImgBox p.catch { font-size:16px; text-align:left;}
	.jobImgBox ul.jobComm li > dl, .jobImgBox ul.jobComm li > dl dt, .jobImgBox ul.jobComm li > dl dd { display:block; width:100%; height:auto;}
	.jobImgBox ul.jobComm li > dl dd { margin-top:10px; padding:0;}
}

#jobImgWrap ul.jobImg { margin-top:310px;}
#jobImgWrap ul.jobImg li { float:left; margin-right:20px;}
#jobImgWrap ul.jobImg li:last-child { margin:0;}
#jobImgWrap ul.jobImg li img { border:1px #222 solid;}

@media screen and (max-width: 480px){
	#jobImgWrap ul.jobImg { margin-top:10px;}
	#jobImgWrap ul.jobImg li { width:50%; margin:0;}

}


/* reason */

#reason ul.reasonList li{ min-height:124px; margin-bottom:30px;}
#reason ul.reasonList li .reasonPh { width:124px; height:124px;}
#reason ul.reasonList li:nth-child(odd)  .reasonPh { float:left;}
#reason ul.reasonList li:nth-child(even) .reasonPh { float:right;}
#reason ul.reasonList li .reasonCom  { position:relative; width:830px; min-height:124px; padding:15px; background:#f5f5f5; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; text-align:left;}
#reason ul.reasonList li:nth-child(odd)  .reasonCom  { float:right;}
#reason ul.reasonList li:nth-child(odd)  .reasonCom:before { position:absolute; width:30px; left:-30px; content:url(../images/reason_arrow-l.png);}
#reason ul.reasonList li:nth-child(even) .reasonCom  { float:left;}
#reason ul.reasonList li:nth-child(even) .reasonCom:before { position:absolute; width:30px; right:-30px; content:url(../images/reason_arrow-r.png);}
#reason ul.reasonList li .reasonCom .pRight { text-align:right;}

@media screen and (max-width: 480px){
	#reason ul.reasonList { clear:both;}
	#reason ul.reasonList li{ min-height:0; margin-bottom:0px;}
	#reason ul.reasonList li:nth-child(odd)  .reasonPh { margin:0 5px 0 0;}
	#reason ul.reasonList li:nth-child(even) .reasonPh { margin:0 0 0 5px;}
	#reason ul.reasonList li .reasonCom  { width:100%; height:auto; margin-bottom:10px;}
	#reason ul.reasonList li:nth-child(odd) .reasonCom:before, #reason ul.reasonList li:nth-child(even) .reasonCom:before { content:"";}
}


/* flow */

#flow { width:100%; height:560px; padding:70px 0; background:url(../images/flow_bg.jpg) top center no-repeat;}
#flow .inner { margin-top:70px;}
#flow .inner .flowImg { margin-bottom:30px;}
#flow .inner .flowList { display:none;}
#flow .inner > p { margin-bottom:5px; text-align:left; font-size:14px;}
#flow .inner .contactBox { position:relative; width:100%; height:100px; margin-top:40px; background:#fff; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;}
#flow .inner .contactBox .fTel { position:absolute; top:33px; left:200px;}
#flow .inner .contactBox .fContact { position:absolute; top:25px; left:600px;}
#flow .inner .contactBox .fContact a { display:block; width:220px; height:50px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background:#FFAF52;
 color:#fff; font-size:18px; font-weight:bold; line-height:50px;}
#flow .inner .contactBox .fContact a:after { position:absolute; right:10px; content:">";}
#flow .inner .contactBox .fContact a:hover { opacity:0.75; filter:alpha(opacity=75); -ms-filter:"alpha(opacity=75)"; text-decoration:none;}

@media screen and (max-width: 480px){
	#flow { clear:both; height:auto; padding:20px 0; background:#fff;}
	#flow .inner { margin-top:30px;}
	#flow .inner .flowImg { display:none;}
	
	#flow .inner .flowList { display:table; margin-bottom:10px;}
	#flow .inner .flowList dt { display:table-cell; width:80px; border-bottom:2px #fff solid;}
	#flow .inner .flowList dt span{ display:block; width:80px; height:30px; background:#094; border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; color:#fff; line-height:30px;}
	#flow .inner .flowList dd { display:table-cell; padding:4px 0 4px 10px; text-align:left;}

	#flow .inner .contactBox { height:auto; margin-top:20px; text-align:center;}
	#flow .inner .contactBox .fTel { position:static}
	#flow .inner .contactBox .fContact { position:static}
	#flow .inner .contactBox .fContact a{ position:relative; height:40px; margin:0 auto; line-height:40px;}
	
}




/*--- footer ---*/

footer { width:100%; height:220px; padding-top:20px; background:#094;}
address { color:#fff; font-size:14px; text-align:right;}

@media screen and (max-width: 480px){
	footer { height:auto; padding:5px;}
	address { text-align:center;}
}







/*---- contact ----*/

.contactTable {}
.contactTable input[type="text"] { width:250px;}
.contactTable textarea { width:100%; }

@media screen and (max-width: 480px){

}


















/* CSS memo
 
角丸 {
    border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; 
}

テキストシャドウ {
    text-shadow: 1px 1px 3px #000;
}
 
ボックスシャドウ {
    -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000;
}
 
ボックスシャドウ内側 {
    -moz-box-shadow: inset 1px 1px 3px #000; -webkit-box-shadow: inset 1px 1px 3px #000; box-shadow: inset 1px 1px 3px #000;
}
 
トランジション {
    -webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; transition: 1.5s;
}
 
要素全部を透明 {
    filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25;
}
 
背景のみ透明 {
    background-color:rgba(255,255,255,0.2);
}
 

:first-child　（最初に現れる要素にだけ適用）
:last-child
:nth-child(n)　･･･　n番目の要素に適用
:nth-child(odd)　･･･　奇数番目の要素に適用
:nth-child(2n+1)　･･･　奇数番目の要素に適用
:nth-child(even)　･･･　偶数番目の要素に適用
:nth-child(2n)　･･･　偶数番目の要素に適用
:nth-child(3n)　･･･　3,6,9,12…番目の要素に適用
:nth-child(3n+1)　･･･　1,4,7,10…番目の要素に適用 



CSS memo */