@charset "UTF-8";

/*-------------------------------------
top
-------------------------------------*/
.topvisual { width: 100%; position: relative; overflow: hidden; }
.topvisual .arrow { position: absolute; z-index: 1; bottom: 80px; left: 50%; }
.topvisual .arrow a { display: block; padding: 40px; margin-left: -62px; border: 1px solid rgb(255,255,255); border-radius: 120px; }
.topvisual .arrow a:hover { background: rgba(255,255,255,.3); }
.topvisual .arrow a:after { display: block; width: 40px; height: 40px; border-bottom: 2px solid rgb(255,255,255); border-left: 2px solid rgb(255,255,255); content: ""; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position: relative; top: -8px; }
.topvisual .bxslider li { width: 100%; height: 70vh; padding-top: 30vh; color: rgb(255,255,255); font-size: 100px; line-height: 1; font-family: 'Cormorant Garamond', serif; font-weight: 300; }
.topvisual .bxslider small { display: block; font-size: 24px; margin-top: 20px; }
.topvisual .bxslider .visual1 { background: url(../images/cover_staffing.jpg) no-repeat center top; background-size: cover; }
.topvisual .bxslider .visual2 { background: url(../images/cover_management.jpg) no-repeat center top; background-size: cover; }
.topvisual .bxslider .visual3 { }
.topvisual .bxslider .visual4 { }
.topvisual .bxslider .visual5 { }
.topvisual .bxslider .visual6 { }

.toplist { background-color: rgb(0,0,0); padding: 50px; position: relative; overflow: hidden; }
.toplist .block { width: 50%; float: left; position: relative; overflow: hidden; }
.toplist .block a { width: 100%; height: 100%; display: block; }
.toplist .block h2 { width: 100%; padding: 20px 30px; text-align: left; font-size: 18px; color: rgb(255,255,255); background: rgba(0,0,0,.7); position: absolute; top: 0; left: 0; }
.toplist .block .caption { width: 100%; height: 100%; background: rgba(0,0,0,.6); position: absolute; top: -100%; left: 0; transition: .3s; opacity: 1; }
.toplist .block:hover .caption { top: 0; left: 0; }
.toplist .block h3 { padding: 20px 30px; text-align: left; font-size: 18px; color: rgb(0,0,0); background: rgb(255,255,255); }
.toplist .block p { padding: 15px 30px; text-align: left; color: rgb(255,255,255); }

.topnews { background-color: rgb(0,0,0); padding: 0px 50px 50px; position: relative; overflow: hidden; }
.topnews h2 { font-size: 36px; color: rgb(255,255,255); text-align: left; }
.topnews h2 span { position: absolute; left: 420px; top: 0; font-size: 16px; line-height: 1.2; }
.topnews h2 span a { display: block; padding: 10px 20px; color: rgb(0,0,0); background: rgb(255,255,255); }
.topnews h2 span a:hover { text-decoration: none; color: rgb(255,255,255); background: rgb(180,0,0); }
.topnews .content { margin-left: -2%; }
.topnews .block { width: 23%; margin: 20px 0px 0px 2%; float: left; text-align: left; background: rgb(240,240,240); }
.topnews .block a { display: block; color: rgb(0,0,0); }
.topnews .block a:hover { text-decoration: none; }
.topnews .thum { display: block; position: relative; }
.topnews .thum .type { padding: 5px 10px; position: absolute; left: 0; bottom: 0; color: rgb(255,255,255); background: rgb(180,0,0); }
.topnews .info { display: block; min-height:126px; padding: 15px; position: relative; }
.topnews .info .date { padding: 5px 10px; position: absolute; left: 0; top: 0; color: rgb(255,255,255); background: rgb(0,0,0); }
.topnews .info h3 { font-size: 16px; margin-top: 40px; font-weight: 300; }

/*-------------------------------------
pages-cover
-------------------------------------*/
.cover { padding: 160px 0; color: rgb(255,255,255); }
.cover-staffing { background: url(../images/cover_staffing.jpg) no-repeat center top; background-size: cover; }
.cover-management { background: url(../images/cover_management.jpg) no-repeat center top; background-size: cover; }
.cover-recruit { background: url(../images/cover_recruit.jpg) no-repeat center top; background-size: cover; }
.cover-company { background: url(../images/cover_company.jpg) no-repeat center top; background-size: cover; }
.cover-news { background: url(../images/cover_news.jpg) no-repeat center top; background-size: cover; }
.cover-privacy { background: url(../images/cover_privacy.jpg) no-repeat center top; background-size: cover; }
.cover-contact { background: url(../images/cover_contact.jpg) no-repeat center top; background-size: cover; }

/*-------------------------------------
pages-common
-------------------------------------*/
.inner { width: 90%; padding: 0 5%; }
.headline { display: block; padding-top: 80px; padding-bottom: 80px; }
.headline h2 { display: block; }
.headline h2 span { display: block; margin-top: 15px; }
.headline h3 { color: rgb(200,0,0); margin-top: 20px; }
.headline h4 { color: rgb(200,0,0); margin-top: 30px; }
.headline p { max-width: 600px; margin: 10px auto 0px; }
.content { display: block; }
.media { display: block; }
.media .headline { padding-top: 80px; padding-bottom: 40px; }
.media .headline h2 { color: rgb(255,255,255); }
.media .headline h3 { color: rgb(255,255,255); }
.media .headline p { color: rgb(255,255,255); }
.media .content { padding-bottom: 80px; }
.media .content figure { max-width: 980px; margin: 0px auto; }
.media .content figure img { text-align: center; }
.media1 { background: rgb(200,0,0); }
.media2 { background: rgb(0,0,0); }

/*-------------------------------------
recruit
-------------------------------------*/
.recruit { max-width: 980px; margin: 0px auto; padding-bottom: 80px; }

/*-------------------------------------
news
-------------------------------------*/
.news { max-width: 980px; margin: 0px auto; padding-bottom: 80px; }
.news .content dl { width: 100%; }
.news .content dt { width: 30%; padding: 30px 0; float: left; text-align: left; border-top: 1px dotted rgb(150,150,150); }
.news .content dd { width: 70%; padding: 30px 0; float: left; text-align: left; border-top: 1px dotted rgb(150,150,150); }

/*-------------------------------------
company
-------------------------------------*/
.company { max-width: 980px; margin: 0px auto; padding-bottom: 80px; }
.company .content dl { width: 100%; }
.company .content dt { width: 30%; padding: 30px 0; float: left; text-align: left; border-top: 1px dotted rgb(150,150,150); }
.company .content dd { width: 70%; padding: 30px 0; float: left; text-align: left; border-top: 1px dotted rgb(150,150,150); }
.company .content dt span { margin-left: 15px; font-size: 14px; color: rgb(200,0,0); }
.company .content dd span { margin-left: 15px; font-size: 14px; color: rgb(150,150,150); }

/*-------------------------------------
contact
-------------------------------------*/
.contact { max-width: 880px; margin: 0px auto; padding-bottom: 80px; }
.contact .content dl { width: 100%; }
.contact .content dt { width: 30%; padding: 30px 0; float: left; text-align: left; border-top: 1px dotted rgb(150,150,150); }
.contact .content dd { width: 70%; padding: 30px 0; float: left; text-align: left; border-top: 1px dotted rgb(150,150,150); }
.contact .content dt span { margin-left: 15px; font-size: 14px; color: rgb(200,0,0); }
.contact .content dd span { margin-left: 15px; font-size: 14px; color: rgb(150,150,150); }
.contact .content input { max-width: 100%; }
.contact .content textarea { max-width: 95%; }
.contact .content .submit { padding: 15px 50px; color: rgb(0,0,0); border: 2px solid rgb(0,0,0); background: rgb(255,255,255); cursor: pointer; transition: all 0.2s ease-in-out 0s; }
.contact .content .submit:hover { color: rgb(255,255,255); border: 2px solid rgb(0,0,0); background: rgb(0,0,0); }

/*-------------------------------------
sitemap
-------------------------------------*/
.sitemap { max-width: 980px; margin: 0px auto; padding-bottom: 80px; }
.sitemap .content h3 { margin: 40px 0 10px; padding-top: 40px; border-top: 1px dotted rgb(150,150,150); }
.sitemap .content h3:first-child { margin-top: 0px; }

/*-------------------------------------
privacy
-------------------------------------*/
.privacy { max-width: 980px; margin: 0px auto; padding-bottom: 80px; }
.privacy .content h3 { margin: 40px 0 10px; padding-top: 40px; text-align: left; font-size: 18px; font-weight: normal; border-top: 1px dotted rgb(150,150,150); }
.privacy .content h3:first-child { margin-top: 0px; }
.privacy .content p { text-align: left; font-size: 14px; color: rgb(150,150,150); }
.privacy .content li { text-align: left; font-size: 14px; color: rgb(150,150,150); }