@charset "utf-8";

/*
  File Name   : career.css
  Description : コンテンツエリア関係 他
*/

/* section-base
============================================================ */
.section-base {
  padding: 160px 0 160px;
  box-sizing: border-box;
}
.section-base.img-left {
  background-color: #fff;
}
.section-base.img-right {
  background-color: #f5f6f9;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1301px) {
  .section-base {
    padding: 80px 0 80px;
    box-sizing: border-box;
  }
}

/* section
============================================================ */
.com-section-inner {
  max-width: calc(1200px + 80px);
  padding: 0 40px;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1301px) {
  .com-section-inner {
    width: 100%;
    padding: 0 20px;
  }
}

/* flex-wrap
============================================================ */
.flex-wrap {
  display: flex;
}
.flex-wrap > * {
  width: 50%;
}
.section-base.img-left .flex-wrap {
  flex-direction: row-reverse;
}
.flex-wrap .desc-wrap .title {
  font-size: 22px;
  font-weight: bold;
}
.flex-wrap .desc-wrap .text {
  margin-top: 20px;
}
.flex-wrap .img-wrap {
  max-width: 560px;
}
.section-base.img-left .flex-wrap .img-wrap  {
  padding-right: 80px;
}
.section-base.img-right .flex-wrap .img-wrap  {
  padding-left: 80px;
}
.section-base.img-right:last-child {
  padding-bottom: 260px;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1301px) {
  .flex-wrap {
    display: block;
  }
  .flex-wrap > * {
    width: 100%;
  }
  .section-base.img-left .flex-wrap {
    flex-direction: row-reverse;
  }
  .flex-wrap .desc-wrap .title {
    font-size: 18px;
  }
  .flex-wrap .desc-wrap .text {
    margin-top: 20px;
  }
  .flex-wrap .img-wrap {
    max-width: 560px;
    text-align: center;
    margin: 40px auto 0;
  }
  .section-base.img-left .flex-wrap .img-wrap  {
    padding-right: 0;
  }
  .section-base.img-right .flex-wrap .img-wrap  {
    padding-left: 0;
  }
  .section-base.img-right:last-child {
    padding-bottom: 130px;
  }
}


