@charset "UTF-8";
/*****************************
  pagehead
*****************************/
.pagehead{
  mask-image: url(../../images/ob/mask_head.svg);
  -webkit-mask-image: url(../../images/ob/mask_head.svg);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: bottom;
  -webkit-mask-position: bottom;
  mask-size: cover;
  -webkit-mask-size: cover;
  padding: 15rem 0 30rem;
}

/*****************************
  pagesec-catch
*****************************/
.pagesec-catch{
  margin-top: -25rem;
  padding: 0;
}
.pagesec-catch .boxinner{
  box-shadow: 0 0 20px rgba(154, 167, 182, .22);
  padding-bottom: 0;
}
.pagesec-catch .ttl {
  color: #D2E397;
  font-size: 5rem;
  font-weight: 600;
  line-height: 1;
  margin: 5rem 0 2rem 10%;
}
.pagesec-catch .ttl span{
  color: #8DAACB;
  font-size: 7rem;
  font-weight: bold;
  letter-spacing: 2px;
  margin-right: 1rem;
}
.pagesec-catch .fbox{
  width: 55%;
}
.pagesec-catch .ftxtbox{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 45%;
}
.pagesec-catch .ftxtbox .ob{
  width: 80%;
}
.pagesec-catch .ftxtbox p{
  font-size: 2.4rem;
  font-weight: bold;
  margin: 2rem 0;
}
@media only screen and (max-width: 1300px) {
  .pagesec-catch .boxinner{
    margin: 0 2rem;
  }
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1040px) {
  .pagesec-catch .ftxtbox{
    width: 48%;
  }
  .pagesec-catch .fbox {
    width: 52%;
  }
  .pagesec-catch .ttl {
    margin: 5rem 0 2rem 5%;
  }
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 1023px) {
  .pagesec-catch{
    padding: 0 2rem;
  }
  .pagesec-catch .boxinner {
    padding-bottom: 2rem;
  }
  .pagesec-catch .fbox {
    text-align: center;
    width: 100%;
  }
  .pagesec-catch .ttl {
    margin: 3rem 0 2rem;
  }
  .pagesec-catch .ob1 {
    margin: 0 auto;
    max-width: 80%;
    overflow: hidden;
    height: 370px;
  }
  .pagesec-catch .ftxtbox {
    margin-top: -10rem;
    width: 100%;
  }
  .pagesec-catch .ftxtbox p {
    position: relative;
  }
  .pagesec-catch .ftxtbox .ob3 {
    margin-top: -6rem;
    text-align: right;
  }
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-catch .boxinner {
    margin: 0 auto;
  }
  .pagesec-catch .ttl {
    font-size: 2.6rem;
  }
  .pagesec-catch .ttl span {
    font-size: 4rem;
  }
  .pagesec-catch .ob1 {
    aspect-ratio: 3 / 2;
    max-width: 100%;
    height: auto;
    width: 100%;
  }
  .pagesec-catch .ftxtbox {
    margin-top: -6rem;
  }
  .pagesec-catch .ftxtbox .ob{
    width: 140px;
  }
  .pagesec-catch .ftxtbox .ob2 {
    margin-right: auto;
  }
  .pagesec-catch .ftxtbox .ob3 {
    margin-top: -2rem;
    margin-left: auto;
  }
  .pagesec-catch .ftxtbox p {
    font-size: 1.8rem;
    text-align: center;
  }
}
@media only screen and (max-width: 350px) {
  .pagesec-catch .ftxtbox p {
    font-size: 1.6rem;
  }
  .pagesec-catch .ttl {
    font-size: 2.4rem;
  }
  .pagesec-catch .ttl span {
    font-size: 3.6rem;
    margin-right: 0;
  }
}

/*****************************
  pagesec-jobfull
*****************************/
.pagesec-jobfull{
  padding: 10rem 0;
}
.pagesec-jobfull .imggr{
  max-width: 950px;
  margin: 0 auto 2rem;
}
.pagesec-jobfull .imggr img{
  margin: 0 auto;
  width: 28.1%;
}
.pagesec-jobfull .imggr img:nth-child(2){
  width: 4.7%;
}
.pagesec-jobfull .imggr img:nth-child(3){
  width: 14.6%;
}
.pagesec-jobfull .imggr img:nth-child(4){
  width: 4.3%;
}
.pagesec-jobfull .imggr img:nth-child(5){
  width: 25%;
}
.pagesec-jobfull .ttl{
  font-family: "M PLUS 1", sans-serif;
  font-size: 3.4rem;
  font-weight: 600;
  text-align: center;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .pagesec-jobfull .ttl{
    font-size: 3rem;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-jobfull {
    padding: 7rem 0;
  }
  .pagesec-jobfull .ttl{
    font-size: 2rem;
  }
}

/*****************************
  pagesec-message
*****************************/
.pagesec-message{
  background: #F3F7EC;
  padding: 10rem 0;
}
.pagesec-message::before,
.pagesec-message::after{
  content: "";
  opacity: .3;
  position: absolute;
  top: 0;
  height: 100%;
}
.pagesec-message::before{
  background: url(../../images/page/company/message_bg_L.svg) no-repeat right / cover;
  left: 0;
  width: 36.7%;
}
.pagesec-message::after{
  background: url(../../images/page/company/message_bg_R.svg) no-repeat left / cover;
  right: 0;
  width: 36.6%;
}
.pagesec-message .inner3{
  z-index: 1;
}
.pagesec-message .message{
  text-align: center;
}
.pagesec-message .ttl,
.pagesec-message p,
.pagesec-message span{
  font-size: 2rem;
  font-weight: bold;
}

.pagesec-message .ob1{
  background: url(../../images/page/company/message.svg) no-repeat center / contain;
  height: 116px;
  margin: 2rem 0;
}
.pagesec-message .imgtxt{
  margin: 1rem 0 3rem;
}
.pagesec-message .imgtxt1 span:nth-of-type(1){
  margin: 0 1rem;
}
.pagesec-message .imgtxt1 span:nth-of-type(2){
  margin-left: -.5rem;
}
.pagesec-message .imgtxt2 span:nth-of-type(1){
  margin-left: 1rem;
}
.pagesec-message .imgtxt2 span:nth-of-type(2){
  margin-left: -1rem;
}
@media only screen and (max-width: 1180px) {
  .pagesec-message::before,
  .pagesec-message::after{
    width: 44%;
  }
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-message .ttl,
  .pagesec-message p,
  .pagesec-message span {
    font-size: 1.6rem;
  }
  .pagesec-message .ob1 {
    height: 60px;
  }
}

/*****************************
  pagesec-company
*****************************/
.pagesec-company .box{
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(154, 167, 182, .22);
  margin: 4rem auto 0;
  max-width: 850px;
  padding: 4rem 6rem;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .pagesec-company .box {
    padding: 4rem 4rem;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-company .box {
    padding: 2rem 1rem;
  }
}