@charset "UTF-8";

div.main{
  height:max(31.25vw,600px);
  padding-bottom:100px;
}

/* サンシスコンについて */
div.main.about{background: url('../../img/recruit/about/main.png') center top /cover no-repeat;}
@supports (background: url('../../img/recruit/about/webp/main.webp')) {
  div.main.about {
    background: url('../../img/recruit/about/webp/main.webp') center top /cover no-repeat;
  }
}

/* 事業について */
div.main.service{background: url('../../img/recruit/service/main.png') center top /cover no-repeat;}
@supports (background: url('../../img/recruit/service/webp/main.webp')) {
  div.main.service {
    background: url('../../img/recruit/service/webp/main.webp') center top /cover no-repeat;
  }
}

/* 先輩社員の一日 */
div.main.workflow{background: url('../../img/recruit/workflow/main.png') center top /cover no-repeat;}
@supports (background: url('../../img/recruit/workflow/webp/main.webp')) {
  div.main.workflow {
    background: url('../../img/recruit/workflow/webp/main.webp') center top /cover no-repeat;
  }
}

/* 募集要項 */
div.main.recruitment{background: url('../../img/recruit/recruitment/main.png') center top /cover no-repeat;}
@supports (background: url('../../img/recruit/recruitment/webp/main.webp')) {
  div.main.recruitment {
    background: url('../../img/recruit/recruitment/webp/main.webp') center top /cover no-repeat;
  }
}

/* エントリー */
div.main.entry{background: linear-gradient(90deg, rgba(255, 31, 31, 1), rgba(255, 92, 20, 1));}
div.main div.title{justify-content:flex-end;}

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

div.main{height:max(100vh,667px);}
div.main.entry.confirm-thanks{height:max(50vh,300px);}

/* サンシスコンについて */
div.main.about{background: url('../../img/recruit/about/webp/main-sp.webp') center top /cover no-repeat;}

/* 事業について */
div.main.service{background: url('../../img/recruit/service/webp/main-sp.webp') center top /cover no-repeat;}

/* 先輩社員の一日 */
div.main.workflow{background: url('../../img/recruit/workflow/webp/main-sp.webp') center top /cover no-repeat;}

/* 募集要項 */
div.main.recruitment{background: url('../../img/recruit/recruitment/webp/main-sp.webp') center top /cover no-repeat;}

div.main div.title{padding-bottom:0;}

}

/********* サンシスコンについて *********/
img.about-image{
  border-radius:10px;
  margin:clamp(30px,2.604vw,50px) auto 0;
}
div.about-flex{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
div.about-wrap p.catch{
  position:relative;
  font-size:clamp(36px,3.645vw,70px);
  line-height:1.6;
  font-weight:600;
  margin-top:clamp(30px,2.604vw,50px);
}
div.about-wrap p.catch.posi-l40{left:min(-2.083vw,-40px);}
div.about-wrap p.catch + p{margin-top:clamp(30px,2.604vw,50px);}
div.about-flex div.txt,
div.about-flex div.values{width:calc((100% - 50px)/2);}

div.about-wrap div.values p.heading{
  font-family: 'Roboto';
  font-size:40px;
  line-height:1.3;
  font-weight:900;
}
div.about-wrap div.values p + p.heading{margin-top:clamp(30px,2.604vw,50px);}
div.about-wrap div.values p.heading.col{color:#197EE3;}
div.about-wrap div.values p.sub{
  position:relative;
  display:table;
  color:#fff;
  font-size:24px;
  font-weight:600;
  line-height:1;
  margin-top:5px;
}
div.about-wrap div.values p.sub::before{
  position:absolute;
  content:"";
  display:inline-block;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:#273343;
  z-index:-1;
}
div.about-wrap div.values p.sub.col::before{background:#197EE3;}

/* history */
div.history-box{
  position:relative;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  min-height:230px;
  background:#fff;
  border-radius:10px;
  padding:30px 0;
  box-shadow:0 0 10px rgba(0,0,0,0.05);
}
div.history-box + div.history-box{margin-top:50px;}
div.history-box + div.history-box::before{
  position:absolute;
  content:"";
  left:100px;
  top:-50px;
  width:1px;
  height:50px;
  background:#fff;
}
div.history-box div.data,
div.history-box div.txt{padding:30px;}
div.history-box div.data{
  display:flex;
  align-items:center;
  justify-content:center;
  width:200px;
}
div.history-box div.data p{
  font-family: 'Roboto';
  font-size:50px;
  line-height:1.1;
  font-weight:200;
  text-align:center;
}
div.history-box div.data span.month{
  font-size:40px;
  display:block;
}
div.history-box div.txt{
  border-left:1px solid #F2F7FF;
  width:calc(100% - 200px);
}
div.history-box div.txt h3 + p{margin-top:0.25em;}

/* data */

/* message */
div.about-wrap.area06 div.content{padding-top:0;}
div.message picture{
  float:right;
  padding:0 0 30px 30px;
}
div.message figure{
  font-size:12px;
  text-align:center;
  padding-top:10px;
}
div.message p.heading{
  font-size:max(1.25vw,18px);
  font-weight:600;
}
div.message p + p{margin-top:1em;}
div.message p + p.heading{margin-top:1.5em;}
div.message p.heading + p{margin-top:0.5em;}

div.message p.signature{
  text-align:right;
  margin-top:clamp(30px,2.604vw,50px);
}

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

div.about-flex div.txt,
div.about-flex div.values{width:100%;}
div.about-flex div.values{margin-top:clamp(30px,2.604vw,50px);}

}

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

div.about-wrap p.catch{
  font-size:max(5.208vw,28px);
  line-height:1.5;
}
div.about-wrap div.values p.heading{font-size:max(5.208vw,28px);}
div.about-wrap div.values p.sub{font-size:max(3.125vw,20px);}
div.about-wrap p.catch.posi-l40{left:-20px;}

/* history */
div.history-box{
  flex-direction:column;
  padding:30px;
}
div.history-box + div.history-box::before{
  left:50%;
  margin-left:-1px;
}
div.history-box div.data,
div.history-box div.txt{padding:0;}

div.history-box div.data{width:100%;}
div.history-box div.txt{
  border-left:none;
  padding-top:15px;
  width:100%;
}
div.history-box div.data p{
  font-size:max(6.51vw,40px);
  text-align:right;
  margin:0 0 0 auto;
}
div.history-box div.data span.month{font-size:max(3.906vw,20px);}

/* message */
div.message picture{
  width:200px;
  padding:0 0 15px 15px;
}
div.message figure{font-size:10px;}
div.message p.heading{font-size:max(3.125vw,18px);}

}

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

/* message */
div.message picture{width:130px;}  

}


/********* 事業について *********/
p.market-heading{
  font-size:clamp(24px,1.875vw,36px);
  line-height:1.5;
  margin-top:clamp(50px,5.208vw,100px);
}
div.service-slide{margin:clamp(30px,2.604vw,50px) auto 0;}
div.service-slide div.swiper-slide{
  position:relative;
  width:50%;
  padding:50px clamp(30px,2.604vw,50px);
  background:#fff;
  border-radius:10px;
  box-shadow:0 0 6px rgba(0,0,0,0.1);

}
div.service-slide div.swiper-slide span.label{
  position:absolute;
  bottom:15px;
  right:15px;
  display:block;
  font-family:"Roboto";
  color:#f7f7f7;
  font-size:100px;
  line-height:1;
  z-index:0;
}
div.service-slide div.swiper-slide h3{text-align:center;}
div.service-slide div.swiper-slide ul{margin-top:30px;}
div.service-slide div.swiper-slide ul li + li{margin-top:15px;}
div.service-slide div.swiper-slide p{position:relative;}

span.message-txt{
  display:block;
  font-size:clamp(36px,6.835vw,70px);
  font-weight:500;
  line-height:1.3;
}
span.message-txt + *{margin-top:clamp(30px,2.604vw,50px);}
* + span.message-txt{margin-top:clamp(50px,5.208vw,100px);}

div.sc-over{
  position:relative;
  box-shadow:0 0 6px rgba(0,0,0,0.1);
  border-radius:10px;
}
img.sc-img{
  width:100%;
  max-width:inherit;
  min-width:600px;
}
img.service-image{
  border-radius:10px;
  margin:clamp(30px,2.604vw,50px) auto 0;
}

/* NEW BUSINESS */
div.area.bk-logo div.content{background:url('../../img/recruit/logo-i.svg') right bottom -10%/60% no-repeat;}
div.new-business{
  padding:clamp(50px,5.208vw,100px) clamp(30px,2.604vw,50px);
  margin:clamp(30px,2.604vw,50px) auto 0;
  background:linear-gradient(135deg,rgba(213, 232, 251, 1), rgba(255, 243, 237, 1));
}
span.message-txt-mid{
  display:block;
  font-size:clamp(24px,2.5vw,48px);
  font-weight:500;
  text-align:center;
  line-height:1.5;
}
span.message-txt-mid + p{margin-top:clamp(30px,2.604vw,50px);}
div.new-business p{font-size:clamp(16px,1.0416vw,20px);}

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

div.service-slide div.swiper-slide ul li{font-size:max(2.083vw,14px);}
div.area.bk-logo div.content{background:url('../../img/recruit/logo-i.svg') left 60px bottom -60px /100% no-repeat;}

}

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

span.message-txt-mid{text-align:left;}

}


/********* 社員の一日 *********/
div.staff-info{
  position:relative;
  display:flex;
  justify-content:space-between;
}
div.staff-info div.img{width:280px;}
div.staff-info div.txt{width:calc(100% - 330px);}
div.staff-info p.info{
  padding:15px;
  background:#f7f7f7;
  border-radius:6px;
}

/* タイムライン */
div.workflow-wrap.area02 div.content{padding-top:0;}
div.schedule{
  position:relative;
  padding-top:100px;
}
div.schedule::before{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  content:"";
  width:100px;
  height:100px;
  display:inline-block;
  background:url('../../img/recruit/workflow/clock-i.svg') center/contain no-repeat;
}
div.schedule::after{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  content:"";
  width:4px;
  height:100%;
  display:inline-block;
  background:#273343;
  z-index:-1;
}
div.schedule div.left,
div.schedule div.right{
  width:45%;
  padding-top:35px;
  margin:50px auto 0 0;
}
div.schedule div.right{margin:50px 0 0 auto;}
div.schedule div.right + div.right{margin-top:100px;}

div.schedule div p{font-size:14px;}
div.schedule div p.heading{
  font-size:16px;
  font-weight:600;
}
div.schedule div picture + p.heading{margin-top:1em;}
div.schedule div p + p{margin-top:0.5em;}
div.schedule div p.min{font-size:12px;}
div.schedule div img{border-radius:10px;}
div.schedule div figure{
  font-size:10px;
  letter-spacing:0;
  text-align:right;
}

div.schedule div span.time{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  margin-top:-35px;
  width:100px;
  color:#273343;
  font-size:20px;
  line-height:1;
  font-weight:900;
  text-align:center;
  padding:5px;
  background:#fff;
}
div.schedule div span.time::after{
  position:absolute;
  bottom:-40px;
  left:50%;
  transform:translateX(-50%);
  content:"";
  display:inline-block;
  width:30px;
  height:30px;
  background:#273343;
  border-radius:15px;
}

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

div.staff-info{
  flex-direction:column;
  align-items:center;
}
div.staff-info div.img{width:180px;}
div.staff-info div.txt{
  width:100%;
  margin-top:15px;
}

/* タイムライン */
div.schedule{padding-top:50px;}
div.schedule::before{
  top:0;
  left:0;
  transform:translateX(0);
  width:50px;
  height:50px;
}
div.schedule::after{
  left:23px;
  transform:translateX(0);
}
div.schedule div.left,
div.schedule div.right{
  width:calc(100% - 50px);
  margin:50px 0 0 auto;
}
div.schedule div span.time{
  left:-25px;
  transform:translateX(0);
  font-size:14px;
}
div.schedule div span.time::after{
  bottom:-37px;
  width:20px;
  height:20px;
  border-radius:10px;
}

}


/********* 募集要項 *********/
div.recruitment-wrap.area01{padding-bottom:max(1.5625vw,30px);}
img.recruitment-image{
  display:block;
  width:calc(100% - max(3.125vw,60px));
  margin:0 auto;
  border-radius:10px;
}

div.jobinfo-wrap + div.jobinfo-wrap{margin-top:75px;}

div.joblist-box{
  position:relative;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  min-height:230px;
  border-radius:10px;
  padding:15px 0;  
  margin-top:clamp(30px,2.604vw,50px);
  background:#fff;
  box-shadow:0 0 10px rgba(0,0,0,0.05);
}
div.joblist-box div.num,
div.joblist-box div.txt{padding:30px 0;}
div.joblist-box div.num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:220px;
}
div.joblist-box div.num p{
  font-family:"Roboto";
  font-size:100px;
  line-height:1.1;
  text-align:right;
  font-weight:400;
}
div.joblist-box div.txt{
  width:calc(100% - 220px);
  padding-right:30px;
}
div.joblist-box div.txt h3 + p{margin-top:0.5em;}

h3.recruitment-h3{
  position:relative;
  padding:30px;
}
h3.recruitment-h3 span{
  position:absolute;
  left:-5px;
  top:50%;
  transform:translateY(-50%);
  font-family:"Roboto";
  color:#efefef;
  font-size:100px;
  line-height:1;
  letter-spacing:0;
  z-index:-1;
}

div.jobinfo{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:16px;
  padding:30px;
  width:100%;
  border-top:1px solid #e0e0e0;
}
div.jobinfo:nth-child(even){background:#f9f9f9;}
div.jobinfo:last-child{border-bottom:1px solid #e0e0e0;}

div.jobinfo div.heading{width:200px;}
div.jobinfo div.heading p{font-weight:600;}
div.jobinfo div.detail{width:calc(100% - 200px);}
div.jobinfo div.detail p.min{margin-top:0.25em;}

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

img.recruitment-image{width:calc(100% - 30px);}  

div.joblist-box{
  padding:30px;
  flex-direction:column;
}
div.joblist-box div.num,
div.joblist-box div.txt{padding:0;}

div.joblist-box div.num{width:100%;}
div.joblist-box div.txt{
  padding-top:15px;
  border-left:none;
  width:100%;
}

div.joblist-box div.num p{font-size:max(9.11vw,60px);}
h3.recruitment-h3 span{font-size:max(13.02vw,70px);}

div.jobinfo{
  flex-direction:column;
  width:100%;
  padding:0;
  font-size:14px;
  border-top:1px solid #e0e0e0;
}
div.jobinfo:last-child{border-bottom:1px solid #e0e0e0;}

div.jobinfo div.heading{
  width:100%;
  padding:15px;
}
div.jobinfo div.detail{
  width:100%;
  padding:15px;
  border-top:1px dashed #e0e0e0;
}

}


/********* エントリー *********/
div.entry-flex{overflow:hidden;}
div.entry-flex div.txt{float:left;}
div.entry-flex div.flow{float:left;}
div.entry-flex div.form{float:right;}

div.entry-flex.confirm-thanks{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:0;
}
div.entry-flex.confirm-thanks div.form{
  width:480px;
  float:none;
}
div.entry-flex.confirm-thanks div.form div.select::after{display:none;}


div.entry-flex div.txt,
div.entry-flex div.flow{width:calc(50% - clamp(50px,5.208vw,100px));}
div.entry-flex div.form{width:50%;}

div.entry-flex div.form{
  padding:clamp(30px,2.604vw,50px);
  background:linear-gradient(135deg,rgba(213, 232, 251, 1), rgba(255, 243, 237, 1));
  border-radius:10px;
}

/* left */
div.entry-flex h3{
  padding:3px 0 0 15px;
  border-left:5px solid #FF5C14;
  margin-top:50px;
}
div.entry-flow{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:clamp(30px,2.604vw,50px);
}
div.entry-flow div{
  position:relative;
  display:flex;
  flex-direction:column;
  width:calc((100% - clamp(15px,1.5625vw,30px))/2);
  border:1px solid #E0E0E0;
  padding:150px 15px 15px;
  border-radius:10px;
}
div.entry-flow div:nth-child(n + 3){margin-top:clamp(15px,1.5625vw,30px);}

div.entry-flow div span.step{
  position:absolute;
  top:45px;
  transform:translateX(-50%);
  left:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-size:50px;
  line-height:1;
  font-weight:900;
}
div.entry-flow div span.step span{
  display:block;
  font-size:20px;
}
div.entry-flow div p{font-size:14px;}
div.entry-flow div p.heading{
  font-size:16px;
  font-weight:600;
  line-height:1.5;
}
div.entry-flow div.active{border-color:#FF5C14;}
div.entry-flow div.active span.step,
div.entry-flow div.active p.heading{color:#FF5C14;}
div.entry-flow div.active::before{
  position:absolute;
  content:"いまココ";
  top:-15px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  line-height:1;
  font-weight:600;
  width:100px;
  height:30px;
  border-radius:15px;
  background:#FF5C14;
}

/* right */
div.form p.heading{
  position:relative;
  display:flex;
  align-items:center;
  font-size:16px;
  line-height:1.5;
  font-weight:600;
}
div.form * + p.heading{margin-top:25px;}
div.form p.heading + *{margin-top:10px;}
div.form input + p{margin-top:0.5em;}
div.form span.required{
  position:relative;
  top:1px;
  display:inline-block;
  color:#fff;
  font-size:12px;
  line-height:1;
  padding:4px;
  margin-left:10px;
  background:#FF5C14;
  border-radius:2px;
}
div.form span.required.any{background:#197EE3;}
div.form p.center{
  text-align:center;
  padding-top:30px;
}
div.form p a{
  color:#197EE3;
  text-decoration:underline;
}
div.form p a:hover{text-decoration:none;}
div.form input[type="text"],
div.form input[type="email"],
div.form input[type="tel"],
div.form select,div.form textarea {
  font-size:16px;
  display: inline-block;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  padding: 12px;
  width:100%;
  height:50px;
  vertical-align: middle;
  border: none;
  color: #273343;
  background: #fff;
  border:1px solid #e0e0e0;
  box-sizing: border-box;
}
div.form textarea{height:200px;}
div.form div.select{position:relative;}
div.form div.select::after{
  position:absolute;
  content:"";
  right:20px;
  top:45%;
  transform:translateY(-50%) rotate(-45deg);
  width:10px;
  height:10px;
  border-left:1px solid #273343;
  border-bottom:1px solid #273343;
}

/* チェックボックス */
div.form input[type="checkbox"] + span{
	position: relative;
  font-size:14px;
	padding: 0 0 0 35px;
	margin: 0;
}
div.form input[type="checkbox"]{
  display: none;
  margin: 0;
}
div.form input[type="hidden"] + span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 25px;
  height: 25px;
  margin-top: -12px;
  background: #FFF;
}
div.form input[type="checkbox"] + span{display:inline-block;}
div.form input[type="checkbox"] + span::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	width: 24px;
	height: 24px;
	margin-top: -13px;
  border-radius:4px;
	background: #FFF;
}
div.form input[type="checkbox"] + span::before {border: 1px solid #ccc;}
div.form input[type="checkbox"]:checked + span::after {
	content: "";
	position: absolute;
	top: 50%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
}
div.form input[type="checkbox"]:checked + span::after {
	left: 5px;
	width: 14px;
	height: 8px;
	margin-top: -7px;
	border-left: 3px solid #FF5C14;
	border-bottom: 3px solid #FF5C14;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

div.form input[type="radio"]{
  display: none;
  margin: 0;
}
div.form input[type="radio"] + span{
position: relative;
display: inline-block;
font-size:16px;
font-weight:500;
margin: 0 0.5em 0 0;
padding:5px 0 5px 35px;
line-height: 30px;
cursor: pointer;
}
div.form input[type="radio"] + span::before{
border: 1px solid #ccc;
border-radius: 30px;
}
div.form input[type="radio"] + span::before,
div.form input[type="hidden"] + span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 25px;
  height: 25px;
  margin-top: -12px;
  background: #FFF;
}
div.form input[type="radio"]:checked + span::after{
content: "";
position: absolute;
top: 50%;
display: block;
left: 5px;
width: 15px;
height: 15px;
margin-top: -7px;
background: #FF5C14;
border-radius: 22px;
box-sizing: border-box;
}

div.approval{
  padding:15px 25px;
  margin-top:10px;
  background:#fff;
  border-radius:4px;
  border:1px solid #e0e0e0;
}

div.form button,
div.form input[type="submit"]{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:250px;
  height:50px;
  color:#fff;
  font-size:14px;
  line-height:1;
  font-weight:500;
  letter-spacing:0;
  padding:0;
  margin:30px auto 0;
  border-radius:25px;
  border:none;
  background: linear-gradient(90deg, rgba(255, 31, 31, 1), rgba(255, 92, 20, 1));
  box-shadow:0 0 6px rgba(0,0,0,0.2);
  transition:0.3s ease;
  cursor:pointer;
}
div.form button:hover,
div.form input[type="submit"]:hover{opacity:0.75;}

div.form span.mwform-tel-field{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
div.form span.mwform-tel-field input{width:calc((100% - 20px)/3);}

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

/* エントリー */
div.entry-flex{
  overflow:initial;
  margin:0 auto;
}
div.entry-flex div.txt,
div.entry-flex div.flow,
div.entry-flex div.form{
  float:none;
  width:auto;
}
div.entry-flex div.form{margin-top:30px;}

div.entry-flow div{width:calc((100% - 45px)/4);}
div.entry-flow div:nth-child(n + 3){margin-top:0;}


}

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

div.form p.heading{font-size:14px;}
div.form span.required{font-size:12px;}
div.form p.center{font-size:14px;}

div.entry-flow div{width:calc((100% - 30px)/2);}
div.entry-flow div:nth-child(n + 3){margin-top:30px;}

}

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

div.entry-flex{padding:50px 0;}
div.entry-flex div.txt,
div.entry-flex div.flow{padding:0 30px;}

/* left */
div.entry-flow{
  flex-direction:column;
  margin-top:30px;
}
div.entry-flow div{
  width:auto;
  padding:100px 30px 30px;
  border-radius:10px;
}
div.entry-flow div:nth-child(n + 2){margin-top:clamp(15px,1.5625vw,30px);}
div.entry-flow div span.step{
  top:30px;
  font-size:36px;
  width:50px;
  height:50px;
}
div.entry-flow div span.step span{font-size:12px;}

/* right */
div.entry-flex div.form{
  padding:50px 30px;
  border-radius:0;
}

}