@charset "utf-8";


/* Desktop
------------------------------------------------------------------------------------------------------------------------ */
@media screen and (min-width:960px) {
#recruit.recruitTop{}
#recruit.recruitTop .mainImg{ width: 100%; height: 600px; background: url("../img/mainImg.jpg") no-repeat center; background-size: cover; margin-top: 190px; position: relative;}
#recruit.recruitTop .mainImg p{ width: 406px; top: 80px;}
#recruit.recruitTop .mainImg h2{ top: 240px; color: #fff; font-size: 42px; line-height: 1.6; font-family: 'Noto Serif JP', serif; filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.6)); letter-spacing: 0.1em; font-weight: 600;}
#recruit.recruitTop .mainImg p,
#recruit.recruitTop .mainImg h2{ position: absolute; left: 0; right: 0; margin: auto;}

#recruit.recruitTop .intro{ margin: 40px auto 40px; background: url("../img/introBg.png") no-repeat center;}
#recruit.recruitTop .intro .catchCopy{ color: inherit;}
#recruit.recruitTop .intro .catchCopy + p{}

#recruit.recruitTop .ourfield{ width: 100%; position: relative;}
#recruit.recruitTop .ourfield .inner{ background: url("../img/ourfieldBg.jpg") no-repeat center; background-size: cover; color: #fff; padding: 30px 30px 40px; width: calc(100% - 560px); position: relative; z-index: 1;}
#recruit.recruitTop .ourfield .catchCopy{ color: #fff; margin-bottom: 20px; position: relative;}
#recruit.recruitTop .ourfield .catchCopy:before{ content: ""; background: url("../img/ourfieldTit.png") no-repeat; background-size: cover; width: 153px; height: 67px; display: block; margin: 0 auto 20px;}
#recruit.recruitTop .ourfield .catchCopy + p{ margin: 0 auto 30px;}
#recruit.recruitTop .ourfield .phSet{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;}
#recruit.recruitTop .ourfield .phSet li{ width: 280px; height: 50%; position: absolute;}
#recruit.recruitTop .ourfield .phSet li:nth-of-type(1){ top:0; left: 0;}
#recruit.recruitTop .ourfield .phSet li:nth-of-type(2){ bottom: 0; left: 0;}
#recruit.recruitTop .ourfield .phSet li:nth-of-type(3){ top: 0; right: 0;}
#recruit.recruitTop .ourfield .phSet li:nth-of-type(4){ bottom: 0; right: 0;}

#recruit.recruitTop .ourteam{ overflow: hidden; position: relative;}
#recruit.recruitTop .ourteam .ph{ float: left; height: 400px;}
#recruit.recruitTop .ourteam .text{ position: absolute; top: 50%; transform: translateY(-50%); left: 50%; padding: 0 5%; text-align: left;}
#recruit.recruitTop .ourteam .ph,
#recruit.recruitTop .ourteam .text{ width: 50%;}
#recruit.recruitTop .ourteam .text h2{ font-size: 14px; font-family: 'Noto Sans JP', sans-serif; padding: 5px 22px; position: relative; display: inline-block; margin-bottom: 10px;}
#recruit.recruitTop .ourteam .text h2:before{ transform:rotate(-90deg); top: 0; left:0; }
#recruit.recruitTop .ourteam .text h2:after{ transform:rotate(90deg); bottom: 0; right: 0;}
#recruit.recruitTop .ourteam .text h2:before,
#recruit.recruitTop .ourteam .text h2:after{ content: ""; position:absolute; width:20px; height:20px; border-top:1px solid rgba(0,0,0,0.5); border-right:1px solid rgba(0,0,0,0.5); }
#recruit.recruitTop .ourteam .text .catchCopy{ margin-bottom: 15px;}
#recruit.recruitTop .ourteam .text .catchCopy + p{ margin-bottom: 30px;}
#recruit.recruitTop .ourteam .text .btn{ float: right;}

#recruit.recruitTop .aboutus{ background: #f3f3f3; width: 100%; padding: 40px 0 60px;}
#recruit.recruitTop .aboutus h2{ width: 267px; margin: 0 auto 20px;}
#recruit.recruitTop .aboutus h2 + p{ margin: 0 auto 20px;}
#recruit.recruitTop .aboutus ul.staffList{ display: flex; flex-wrap: nowrap; justify-content: space-between; align-items:flex-start;}
#recruit.recruitTop .aboutus ul.staffList li{ width: 100%; margin-right: 8px; background: #fff; height: 425px; position: relative;}
#recruit.recruitTop .aboutus ul.staffList li .ph { margin: 0 auto 10px;}
#recruit.recruitTop .aboutus ul.staffList li h3{ font-size: 14px; margin: 0 auto 0px; font-weight: 600;}
#recruit.recruitTop .aboutus ul.staffList li h3 + p{ font-size: 15px; color: #d52d0c; text-align: left; width: 90%; margin: 0 auto; line-height: 1.8;}
#recruit.recruitTop .aboutus ul.staffList li .btn{ position: absolute; bottom: 0; left: 0; width: 100%;}
#recruit.recruitTop .aboutus ul.staffList li .btn a{ padding-left: 0; padding-right: 0;}

#recruit.recruitTop .message{ width: 1100px; margin: 0 auto 60px; padding: 40px 0 0; text-align: left;}
#recruit.recruitTop .message .catchCopy{}
#recruit.recruitTop .message .catchCopy + p{ font-size: 14px; margin-bottom: 20px;}


#recruit .signature{ text-align: right;}
#recruit .signature span{ width: 139px; margin-right: 20px;}
#recruit .signature em{ width: 207px;}
#recruit .signature span,
#recruit .signature em{ display: inline-block; vertical-align: middle;}
}



/* Tablet
------------------------------------------------------------------------------------------------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {
#recruit.recruitTop{}
#recruit.recruitTop .mainImg{ width: 100%; height: 600px; background: url("../img/mainImg.jpg") no-repeat center; background-size: cover; position: relative;}
#recruit.recruitTop .mainImg p{ width: 380px; top: 80px;}
#recruit.recruitTop .mainImg h2{ top: 250px; color: #fff; font-size: 38px; line-height: 1.6; font-family: 'Noto Serif JP', serif; filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.6)); letter-spacing: 0.1em; font-weight: 600;}
#recruit.recruitTop .mainImg p,
#recruit.recruitTop .mainImg h2{ position: absolute; left: 0; right: 0; margin: auto;}

#recruit.recruitTop .intro{ margin: 30px auto 30px; background: url("../img/introBg.png") no-repeat center;}
#recruit.recruitTop .intro .catchCopy{ color: inherit; width: 90%; margin: 0 auto 20px; text-align: left;}
#recruit.recruitTop .intro .catchCopy + p{ width: 90%; text-align: left; margin: 0 auto;}

#recruit.recruitTop .ourfield{ width: 100%; position: relative; margin: 0 auto 0px;}
#recruit.recruitTop .ourfield .inner{ background: url("../img/ourfieldBg.jpg") no-repeat center; background-size: cover; color: #fff; padding: 20px 0px 20px; width:100%; position: relative; z-index: 1;}
#recruit.recruitTop .ourfield .catchCopy{ color: #fff; margin:0 auto 20px; position: relative; width: 90%;}
#recruit.recruitTop .ourfield .catchCopy:before{ content: ""; background: url("../img/ourfieldTit.png") no-repeat; background-size: cover; width: 153px; height: 67px; display: block; margin: 0 auto 10px;}
#recruit.recruitTop .ourfield .catchCopy + p{ margin: 0 auto 20px; width: 90%; text-align: left;}
#recruit.recruitTop .ourfield .btn{ margin: 0 auto;}
#recruit.recruitTop .ourfield .phSet{ width: 100%;}
#recruit.recruitTop .ourfield .phSet li{ width:25%; height: 140px;}

#recruit.recruitTop .ourteam{ overflow: hidden; position: relative;}
#recruit.recruitTop .ourteam .ph{ position: absolute; top: 50%; transform: translateY(-50%); left: 0; height: 500px; }
/*#recruit.recruitTop .ourteam .text{ position: absolute; top: 50%; transform: translateY(-50%); left: 50%; padding:0% 4%; padding-bottom: 30px !important; text-align: left; overflow: hidden;}*/
#recruit.recruitTop .ourteam .text{ float: right; padding:0% 4%; text-align: left; overflow: hidden;}
#recruit.recruitTop .ourteam .ph,
#recruit.recruitTop .ourteam .text{ width: 50%;}
#recruit.recruitTop .ourteam .text h2{ font-size: 14px; font-family: 'Noto Sans JP', sans-serif; padding: 5px 22px; position: relative; display: inline-block; margin:25px auto 15px;}
#recruit.recruitTop .ourteam .text h2:before{ transform:rotate(-90deg); top: 0; left:0; }
#recruit.recruitTop .ourteam .text h2:after{ transform:rotate(90deg); bottom: 0; right: 0;}
#recruit.recruitTop .ourteam .text h2:before,
#recruit.recruitTop .ourteam .text h2:after{ content: ""; position:absolute; width:20px; height:20px; border-top:1px solid rgba(0,0,0,0.5); border-right:1px solid rgba(0,0,0,0.5); }
#recruit.recruitTop .ourteam .text .catchCopy{ line-height: 1.6; margin-bottom: 15px; font-size: 22px;}
#recruit.recruitTop .ourteam .text .catchCopy + p{ margin-bottom: 20px;}
#recruit.recruitTop .ourteam .text .btn{ margin:0 auto 20px;}

#recruit.recruitTop .aboutus{ background: #f3f3f3; width: 100%; padding: 30px 0 10px;}
#recruit.recruitTop .aboutus h2{ width: 267px; margin: 0 auto 20px;}
#recruit.recruitTop .aboutus h2 + p{ margin: 0 auto 20px;}
#recruit.recruitTop .aboutus ul.staffList{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
#recruit.recruitTop .aboutus ul.staffList li{ width:48%; margin-bottom: 30px; background: #fff; position: relative; display: block; overflow: hidden; line-height: 0;}
#recruit.recruitTop .aboutus ul.staffList li .ph { width: 50%; height: 170px; float: left; margin-right: 15px; line-height: 0;}
#recruit.recruitTop .aboutus ul.staffList li h3{ font-size: 13px; font-weight: 600; text-align: left; text-indent: -0.5em; margin-top: 10px; line-height: 1.8;}
#recruit.recruitTop .aboutus ul.staffList li h3 + p{ font-size: 14px; color: #d52d0c; text-align: left; margin: 0 3% 0 0; line-height: 1.6;}
#recruit.recruitTop .aboutus ul.staffList li .btn{ width: 100%; clear: both;}
#recruit.recruitTop .aboutus ul.staffList li .btn a{ padding:12px 0;}

#recruit.recruitTop .message{ width:90%; margin: 0 auto 50px; padding: 40px 0 0; text-align: left;}
#recruit.recruitTop .message .catchCopy{}
#recruit.recruitTop .message .catchCopy + p{ font-size: 14px; margin-bottom: 20px;}


#recruit .signature{ text-align: right;}
#recruit .signature span{ width: 139px; margin-right: 20px;}
#recruit .signature em{ width: 207px;}
#recruit .signature span,
#recruit .signature em{ display: inline-block; vertical-align: middle;}

}



/* SmartPhone
------------------------------------------------------------------------------------------------------------------------ */
@media screen and (max-width:599px) { 
#recruit.recruitTop{}
#recruit.recruitTop .mainImg{ width: 100%; height: 530px; background: url("../img/mainImg.jpg") no-repeat center; background-size: cover; /*margin-top: 190px;*/ position: relative;}
#recruit.recruitTop .mainImg p{ width: 320px; top: 100px;}
#recruit.recruitTop .mainImg h2{ top: 240px; color: #fff; font-size: 36px; line-height: 1.6; font-family: 'Noto Serif JP', serif; filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.6)); font-weight: 600;}
#recruit.recruitTop .mainImg p,
#recruit.recruitTop .mainImg h2{ position: absolute; left: 0; right: 0; margin: auto;}

#recruit.recruitTop .intro{ margin: 30px auto 30px; background: url("../img/introBg.png") no-repeat center; background-size: 100% auto;}
#recruit.recruitTop .intro .catchCopy{ color: inherit; text-align: left; width: 90%; margin: 0 auto 20px; font-size: 21px;}
#recruit.recruitTop .intro .catchCopy + p{ width: 90%; margin: 0 auto; text-align: left;}

#recruit.recruitTop .ourfield{ width: 100%; position: relative;}
#recruit.recruitTop .ourfield .inner{ background: url("../img/ourfieldBg.jpg") no-repeat center; background-size: cover; color: #fff; padding: 20px 0px 20px; width:100%; position: relative; z-index: 1;}
#recruit.recruitTop .ourfield .catchCopy{ color: #fff; margin:0 auto 20px; position: relative; width: 90%;}
#recruit.recruitTop .ourfield .catchCopy:before{ content: ""; background: url("../img/ourfieldTit.png") no-repeat; background-size: cover; width: 153px; height: 67px; display: block; margin: 0 auto 10px;}
#recruit.recruitTop .ourfield .catchCopy + p{ margin: 0 auto 20px; width: 90%; text-align: left;}
#recruit.recruitTop .ourfield .btn{ width: 90%; margin: 0 auto;}
#recruit.recruitTop .ourfield .phSet{ width: 96%; margin: 0 auto 5%;}
#recruit.recruitTop .ourfield .phSet li{ width: 50%; height: 150px; padding: 5% 2.5% 0;}

#recruit.recruitTop .ourteam{ overflow: hidden; position: relative;}
#recruit.recruitTop .ourteam .ph{ height: 250px; margin: 0 auto 20px;}
#recruit.recruitTop .ourteam .text{ padding: 0 5% 20px; text-align: left;}
#recruit.recruitTop .ourteam .ph,
#recruit.recruitTop .ourteam .text{ text-align: center;}
#recruit.recruitTop .ourteam .text h2{ font-size: 14px; font-family: 'Noto Sans JP', sans-serif; padding: 5px 22px; position: relative; display: inline-block; margin-bottom: 10px;}
#recruit.recruitTop .ourteam .text h2:before{ transform:rotate(-90deg); top: 0; left:0; }
#recruit.recruitTop .ourteam .text h2:after{ transform:rotate(90deg); bottom: 0; right: 0;}
#recruit.recruitTop .ourteam .text h2:before,
#recruit.recruitTop .ourteam .text h2:after{ content: ""; position:absolute; width:20px; height:20px; border-top:1px solid rgba(0,0,0,0.5); border-right:1px solid rgba(0,0,0,0.5); }
#recruit.recruitTop .ourteam .text .catchCopy{ margin-bottom: 15px; text-align: left;}
#recruit.recruitTop .ourteam .text .catchCopy + p{ margin-bottom: 20px; text-align: left;}
#recruit.recruitTop .ourteam .text .btn{ display: block;}

#recruit.recruitTop .aboutus{ background: #f3f3f3; width: 100%; padding: 40px 0 10px;}
#recruit.recruitTop .aboutus h2{ width: 267px; margin: 0 auto 20px;}
#recruit.recruitTop .aboutus h2 + p{ margin: 0 auto 20px;}
#recruit.recruitTop .aboutus ul.staffList{ }
#recruit.recruitTop .aboutus ul.staffList li{ width: 100%; margin-bottom: 30px; background: #fff; position: relative; display: block; overflow: hidden;}
#recruit.recruitTop .aboutus ul.staffList li .ph { width: 50%; height: 170px; float: left; margin-right: 15px; line-height: 0;}
#recruit.recruitTop .aboutus ul.staffList li h3{ font-size: 13px; font-weight: 600; text-align: left; text-indent: -0.5em; margin-top: 10px;}
#recruit.recruitTop .aboutus ul.staffList li h3 + p{ font-size: 15px; color: #d52d0c; text-align: left; margin: 0 auto; line-height: 1.6;}
#recruit.recruitTop .aboutus ul.staffList li .btn{ width: 100%; clear: both;}
#recruit.recruitTop .aboutus ul.staffList li .btn a{ padding:12px 0;}

#recruit.recruitTop .message{ width: 90%; margin: 0 auto 50px; padding: 30px 0 0; text-align: left;}
#recruit.recruitTop .message .catchCopy{}
#recruit.recruitTop .message .catchCopy + p{ font-size: 14px; margin-bottom: 20px;}


#recruit .signature{ }
#recruit .signature span{ width: 139px; margin-bottom: 10px !important;}
#recruit .signature em{ width: 207px;}
#recruit .signature span,
#recruit .signature em{ display:block; margin: auto;}
}