@charset "UTF-8";


/** 会社・事業紹介
---------------------------------------------**/
.company-profile .title-area {
  background-image: url(../images/recruit/company_profile.jpg);
}

.company-profile .container-inner {
  width: 150rem;
}

.about {
  margin-bottom: 15rem;
  padding-top: 4rem;
}

.about-box {
  display: flex;
}

.about-box .text-box {
  min-width: 73rem;
  width: 73rem;
}

.about-box .text-box p {
  width: 52rem;
  margin-bottom: 7.5rem;
  padding-left: 1.5em;
}

.about .linear-title {
  position: relative;
  margin-bottom: 5rem;
  text-align: left;
  padding-left: 0.5em;
}

.about .linear-title .small-title {
  position: absolute;
  top: -4rem;
  left: 0;
  font-size: 2.2rem;  
}

.about .linear-title .marker {
  display: block;
}

.about-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 26rem;
  width: 26rem;
  margin: 0 auto 0 0;
  padding: 2rem 1.5rem 2rem 3rem;
  background-color: #fff;
  border: 0.1rem solid #00a99d;
  border-radius: 5rem;
  font-size: 1.8rem;
  color: #00a99d;
  line-height: 1;
  position: relative;
}

.about-btn .arrow {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 2.5rem;
  background-color: #00a99d;
  position: relative;
}

.about-btn .arrow::before {
  content: '';
  display: block;
  width: 1.2rem;
  height: 0.1rem;
  background: #fff;
  position: absolute;
  right: 0.65rem;
  top: calc(50% - 0.05rem);
}

.about-btn .arrow::after {
  content: '';
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 0.1rem solid #fff;
  border-top: 0.1rem solid #fff;
  position: absolute;
  right: 0.7rem;
  top: calc(50% - 0.45rem);
  transform: rotate(45deg);
}

.about-btn:hover {
  background-color: #00a99d;
  color: #fff;
}

.about-btn:hover .arrow {
  background-color: #fff;
  color: #00a99d;
}

.about-btn:hover .arrow::before {
  background-color: #00a99d;
}

.about-btn:hover .arrow::after {
  border-right: 0.1rem solid #00a99d;
  border-top: 0.1rem solid #00a99d;
}

.about-box .img-box {
  width: 100%;
}

.about-box .img-box > img {
  width: 100%;
}

.box-area {
  width: 144rem;
  margin: 0 auto 16rem;
}

.box-area .small-text {
  position: absolute;
}

.flex-box {
  display: flex;
}

.w-50 {
  width: 50%;
}

.box-2 .box {
  width: 50%;
}

.row-box {
  display: flex;
  flex-direction: column;
}

.mr-3 {
  margin-right: 3rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.box {
  position: relative;
}

.box-text {
  position: absolute;
  font-weight: 800;
  line-height: 1;
}

.box-text-1 {
  top: 22rem;
  right: 8.5rem;
  color: #fff;
  font-size: 16rem;
}

.box-text-2 {
  top: 10rem;
  right: 9rem;
  color: #00a99d;
  font-size: 10rem;
}

.box-text-3 {
  top: 12rem;
  right: 13rem;
  color: #00a99d;
  font-size: 14rem;
}

.box-text-3 .small-text {
  font-size: 5rem;
  left: 17rem;
  top: 2rem;
}

.box-text-4 {
  color: #00a99d;
}

.box-text-4.left {
  top: 12rem;
  left: 18rem;
  font-size: 10rem;
}

.box-text-4.right {
  top: 17.5rem;
  right: 21rem;
  font-size: 10rem;
}

.box-text-5 {
  color: #00a99d;
}

.box-text-5.others {
  top: 11.5rem;
  right: 27rem;
  font-size: 6rem;
}

.box-text-5.info {
  top: 31rem;
  left: 13.5rem;
  font-size: 10rem;
}

.box-text-5.science {
  top: 52.5rem;
  left: 22rem;
  font-size: 10rem;
}

.box-text-5.dhu {
  top: 30rem;
  right: 13.5rem;
  font-size: 13rem;
}

.box-text-6 {
  color: #fff;
  text-shadow: 3px 3px 0 #00a99d;
}

.box-text-6.left {
  top: 12rem;
  left: 18rem;
  font-size: 10rem;
}

.box-text-6.right {
  top: 17.5rem;
  right: 21rem;
  font-size: 10rem;
}

.box-text-7 {
  top: 13.5rem;
  right: 14rem;
  color: #00a99d;
  font-size: 10rem;
}

.box-text-7 .small-text {
  font-size: 5rem;
  left: 12rem;
  top: 1rem;
}

.box-text-8 {
  top: 13rem;
  right: 11.5rem;
  color: #00a99d;
  font-size: 14rem;
}

.box-text-8 .small-text {
  font-size: 5rem;
  left: 17rem;
  top: 1.5rem;
}

.box-text-9.rate {
  top: 9rem;
  right: 8rem;
  color: #00a99d;
  font-size: 8rem;
}

.box-text-9.year {
  top: 18.8rem;
  right: 10.5rem;
  color: #00a99d;
  font-size: 2.2rem;
  font-weight: 400;
}

.box-text-9.man {
  top: 22rem;
  right: 7.5rem;
  color: #00a99d;
  font-size: 4rem;
  font-weight: 400;
}

.box-text-9.woman {
  top: 26.2rem;
  right: 7.5rem;
  color: #00a99d;
  font-size: 4rem;
  font-weight: 400;
}

.box-text-11 {
  color: #00a99d;
  font-size: 6rem;
}

.box-text-11.bicycle {
  top: 9rem;
  left: 16.5rem;
}

.box-text-11.bicycle .small-text {
  font-size: 2.3rem;
  left: 3.7rem;
  top: 0.6rem;
}

.box-text-11.train {
  top: 6.5rem;
  right: 17rem;
}

.box-text-11.train .small-text {
  font-size: 2.3rem;
  left: 3.7rem;
  top: 0.6rem;
}

.box-text-11.foot {
  bottom: 6.8rem;
  left: 11.5rem;
}

.box-text-11.foot .small-text {
  font-size: 2.3rem;
  left: 7rem;
  top: 0.6rem;
}

.box-text-11.bus {
  bottom: 11rem;
  right: 17.5rem;
}

.box-text-11.bus .small-text {
  font-size: 2.3rem;
  left: 3.7rem;
  top: 0.6rem;
}

.box-text-11.car {
  bottom: 2rem;
  left: 27.8rem;
  font-size: 10rem;
}

.box-text-11.car .small-text {
  font-size: 4rem;
  left: 12rem;
  top: 1.5rem;
}

.box-text-12 {
  color: #00a99d;
  font-size: 10rem;
}

.box-text-12 .small-text {
  font-size: 5rem;
}

.box-text-12.sado {
  top: 19rem;
  left: 27rem;
}

.box-text-12.sado .small-text {
  bottom: 4rem;
  left: 5.5rem;
}

.box-text-12.kaetsu {
  top: 25rem;
  right: 13.5rem;
}

.box-text-12.kaetsu .small-text {
  bottom: 4.5rem;
  left: 11.5rem;
}

.box-text-12.chuetsu {
  bottom: 16.5rem;
  left: 29.5rem;
}

.box-text-12.chuetsu .small-text {
  bottom: 4rem;
  left: 11.5rem;
}

.box-text-12.joetsu {
  bottom: 10.5rem;
  left: 14.5rem;
}

.box-text-12.outside {
  bottom: 4rem;
  right: 9.5rem;
  color: #fff;
}


@media screen and (max-device-width: 768px) {
  .company-profile .title-area {
    background-image: url(../images/sp/recruit/company_profile_sp.jpg);
  }

  .about {
    max-width: 480px;
    margin: 0 auto 7rem;
  }

  .about-box {
    flex-direction: column;
  }

  .about-box .text-box {
    min-width: inherit;
    width: 100%;
    margin-bottom: 3rem;
  }

  .about .linear-title {
    margin-bottom: 2.5rem;
  }

  .about .linear-title .small-title {
    top: -2rem;
    font-size: 1.5rem;
  }

  .about .linear-title .marker::after {
    width: calc(100% - 0.5em);
  }

  .about-box .text-box p {
    width: 100%;
    margin-bottom: 3rem;
    padding-left: 1.5em;
  }

  .about-btn {
    min-width: 20rem;
    width: 20rem;
    padding: 1rem 0.7rem 1rem 2rem;
    font-size: 1.4rem;
  }

  .about-btn .arrow {
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
  }

  .about-btn .arrow::before {
    width: 1rem;
    right: 0.5rem;
  }

  .about-btn .arrow::after {
    width: 0.6rem;
    height: 0.6rem;
    top: calc(50% - 0.35rem);
  }

  .box-area {
    max-width: 350px;
    width: 100%;
    margin: 0 auto 5rem;
  }

  .sp-column {
    flex-direction: column;
  }

  .box-area > .sp-column {
    margin-bottom: 0;
  }

  .sp-column .row-box {
    width: 100%;
    margin: 0;
  }

  .mb-3 {
    margin-bottom: 1.5rem;
  }

  .box-1 {
    width: 100%;
    margin: 0 0 1.5rem;
  }

  .box-1 + .row-box {
    width: 100%;
  }

  .box-2 .box {
    margin-right: 1.5rem;
  }

  .box-2 .box:last-child {
    margin-right: 0;
  }

  .box-text-1 {
    top: 31%;
    right: 12%;
    font-size: 8rem;
  }

  .box-text-2 {
    top: 30%;
    right: 25%;
    font-size: 5rem;
  }

  .box-text-3 {
    top: 38%;
    right: 38%;
    font-size: 6.5rem;
  }

  .box-text-3 .small-text {
    font-size: 2.5rem;
    top: 10%;
    left: 100%;
  }

  .box-text-4.left {
    top: 35%;
    left: 26%;
    font-size: 5rem;
  }

  .box-text-4.right {
    top: 50%;
    left: 53%;
    font-size: 5rem;
  }

  .box-text-5.others {
    top: 16%;
    right: 39%;
    font-size: 3rem;
  }

  .box-text-5.info {
    top: 44%;
    left: 19%;
    font-size: 5rem;
  }

  .box-text-5.dhu {
    top: 43%;
    right: 20%;
    font-size: 6.5rem;
  }

  .box-text-5.science {
    top: 74%;
    left: 32%;
    font-size: 5rem;
  }

  .box-text-7 {
    top: 40%;
    right: 41%;
    font-size: 5rem
  }

  .box-text-7 .small-text {
    font-size: 2.5rem;
    left: 100%;
    top: 15%;
  }

  .box-text-8 {
    top: 37%;
    right: 34%;
    font-size: 7rem;
  }

  .box-text-8 .small-text {
    font-size: 2.5rem;
    left: 100%;
    top: 15%;
  }

  .box-07-wrap,
  .box-08-wrap {
    margin-bottom: 1.5rem;
  }

  .box-text-9.rate {
    top: 29%;
    right: 25%;
    font-size: 3.5rem;
  }

  .box-text-9.year {
    top: 55%;
    right: 31%;
    font-size: 1.4rem;
  }

  .box-text-9.man {
    top: 65%;
    right: 25%;
    font-size: 2rem;
  }

  .box-text-9.woman {
    top: 78%;
    right: 25%;
    font-size: 2rem;
  }

  .box-text-11.bicycle {
    top: 23.5%;
    left: 22%;
    font-size: 3.5rem;
  }

  .box-text-11.bicycle .small-text {
    font-size: 1.5rem;
    top: 10%;
    left: 100%;
  }

  .box-text-11.train {
    top: 17%;
    right: 25%;
    font-size: 3.5rem;
  }

  .box-text-11.train .small-text {
    font-size: 1.5rem;  
    left: 100%;
    top: 10%;
  }

  .box-text-11.car {
    bottom: 5%;
    left: 39%;
    font-size: 5rem;
  }

  .box-text-11.car .small-text {
    font-size: 1.8rem;
    left: 100%;
    top: 15%;
  }

  .box-text-11.foot {
    bottom: 20.5%;
    left: 15.5%;
    font-size: 3rem;
  }

  .box-text-11.foot .small-text {
    font-size: 1.5rem;
    left: 100%;
    top: 10%;
  }

  .box-text-11.bus {
    bottom: 33%;
    right: 25%;
    font-size: 3rem;
  }

  .box-text-11.bus .small-text {
    font-size: 1.5rem;
    left: 100%;
    top: 5%;
  }

  .box-text-12 {
    font-size: 6rem;
  }

  .box-text-12 .small-text {
    font-size: 2.5rem;
  }

  .box-text-12.sado {
    top: 25%;
    left: 36%;
  }

  .box-text-12.sado .small-text {
    bottom: 45%;
    left: 100%;
  }

  .box-text-12.kaetsu {
    top: 33%;
    right: 20%;
  }

  .box-text-12.kaetsu .small-text {
    bottom: 45%;
    left: 100%;
  }

  .box-text-12.chuetsu {
    bottom: 23%;
    left: 38%;
  }

  .box-text-12.chuetsu .small-text {
    bottom: 45%;
    left: 100%;
  }

  .box-text-12.joetsu {
    bottom: 15%;
    left: 19%;
  }

  .box-text-12.outside {
    bottom: 5%;
    right: 13.5%;
    font-size: 5rem;
  }
}