:root {
  --font-size-base: 1;
  --text-size-scale: 1.2;
}

@media only screen and (max-width: 768px) {
  .table-area {
    width: 100%;
    overflow-x: scroll;
  }
}

@media only screen and (max-width: 768px) {
  .sh07-table01 {
    width: 130rem;
  }
}
.sh07-table01 th {
  width: 24rem;
  min-height: 13.6rem;
  border-bottom: 1rem solid #fff;
  font-size: calc(20 * var(--font-size-base) * 0.1rem);
  line-height: 1.4em;
  font-weight: 500;
  text-align: center;
}
.sh07-table01 th img {
  width: 2.1rem;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .sh07-table01 th img {
    width: 2.5rem;
  }
}
@media only screen and (max-width: 768px) {
  .sh07-table01 th {
    font-size: calc(25 * var(--font-size-base) * 0.1rem);
    width: 20rem;
  }
}
.sh07-table01 th.main-head {
  width: 6rem;
  line-height: 6rem;
  background-color: #53565a;
  text-align: center;
  color: #fff;
  font-size: calc(22 * var(--font-size-base) * 0.1rem);
  border-right: 1rem solid #fff;
  border-bottom: 0;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .sh07-table01 th.main-head {
    font-size: calc(26 * var(--font-size-base) * 0.1rem);
  }
}
.sh07-table01 th.sub-head {
  width: 6rem;
  line-height: 6rem;
  background-color: #53565a;
  text-align: center;
  color: #fff;
  font-size: calc(22 * var(--font-size-base) * 0.1rem);
  border-right: 1rem solid #fff;
  background-color: #00bfb3;
}
@media only screen and (max-width: 768px) {
  .sh07-table01 th.sub-head {
    font-size: calc(26 * var(--font-size-base) * 0.1rem);
  }
}
.sh07-table01 th.sub-head.orange {
  border-bottom: 0;
  background-color: #ff8200;
}
.sh07-table01 th.cate {
  background-color: #ccf2f0;
}
.sh07-table01 th.cate02 {
  background-color: #ffe3a4;
}
.sh07-table01 th.cate02.last {
  border-bottom: 0;
}
.sh07-table01 td {
  background-color: #f0f0ef;
  padding: 2rem;
  font-size: calc(16 * var(--font-size-base) * 0.1rem);
  line-height: 1.8em;
  border-bottom: 1rem solid #fff;
  border-left: 1rem solid #fff;
}
@media only screen and (max-width: 768px) {
  .sh07-table01 td {
    padding: 2rem 2.5rem;
    font-size: calc(23 * var(--font-size-base) * 0.1rem);
  }
}
.sh07-table01 td.last {
  border-bottom: 0;
}

@media only screen and (max-width: 768px) {
  .picture-area.career01 {
    overflow-x: scroll;
    white-space: nowrap;
  }
}

.picture-area .career {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media only screen and (max-width: 768px) {
  .picture-area .career {
    width: 150rem;
  }
}

.picture-area .career .left,
.picture-area .career .right {
  width: 45rem;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .left,
  .picture-area .career .right {
    width: 67.5rem;
  }
}

.picture-area .career .left > h3 {
  color: #fff;
  background: #00bfb3;
  font-size: calc(17 * var(--font-size-base) * 0.1rem);
  text-align: center;
  height: 9.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .left > h3 {
    font-size: calc(25.5 * var(--font-size-base) * 0.1rem);
    height: 14.4rem;
    margin-bottom: 1.5rem;
  }
}
.picture-area .career .left .wrapper {
  display: grid;
  grid-template-columns: 13.5rem 1fr;
  grid-template-rows: 4.6rem 4.6rem 4.6rem 4.6rem;
  gap: 1rem;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .left .wrapper {
    grid-template-columns: 20.25rem 1fr;
    grid-template-rows: 6.9rem 6.9rem 6.9rem 6.9rem;
    gap: 1.5rem;
  }
}
.picture-area .career .left .wrapper p {
  background: #e8e8e6;
  font-size: calc(16 * var(--font-size-base) * 0.1rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .left .wrapper p {
    font-size: calc(24 * var(--font-size-base) * 0.1rem);
  }
}
.picture-area .career .left .wrapper p.gy {
  background: #9a9999;
  color: #fff;
}
.picture-area .career .left .text {
  height: 11rem;
  font-size: calc(16 * var(--font-size-base) * 0.1rem);
  color: #00bfb3;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  border: 3px solid #00bfb3;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .left .text {
    height: 16.5rem;
    font-size: calc(24 * var(--font-size-base) * 0.1rem);
    margin-top: 1.5rem;
    border: 0.3rem solid #00bfb3;
  }
}

.picture-area .career .right > h3 {
  color: #fff;
  background: #ff8200;
  font-size: calc(17 * var(--font-size-base) * 0.1rem);
  text-align: center;
  height: 9.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .right > h3 {
    font-size: calc(25.5 * var(--font-size-base) * 0.1rem);
    height: 14.4rem;
    margin-bottom: 1.5rem;
  }
}
.picture-area .career .right .wrapper {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.picture-area .career .right .wrapper .gy {
  background: #9a9999;
  width: 13.5rem;
  font-size: calc(15 * var(--font-size-base) * 0.1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.6rem;
  color: #fff;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .right .wrapper .gy {
    width: 20.25rem;
    font-size: calc(22.5 * var(--font-size-base) * 0.1rem);
    height: 6.9rem;
  }
}
.picture-area .career .right .wrapper .gy:last-child {
  height: 10rem;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .right .wrapper .gy:last-child {
    height: 15rem;
  }
}
.picture-area .career .right .wrapper .gy + .gy {
  margin-top: 1rem;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .right .wrapper .gy + .gy {
    margin-top: 1.5rem;
  }
}
.picture-area .career .right .wrapper .wrapper-right {
  width: 30.5rem;
  background: #e8e8e6;
  padding: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .right .wrapper .wrapper-right {
    width: 45.75rem;
    padding: 2.25rem;
  }
}
.picture-area .career .right .wrapper .wrapper-right p:first-child {
  font-size: calc(15 * var(--font-size-base) * 0.1rem);
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .right .wrapper .wrapper-right p:first-child {
    font-size: calc(22.5 * var(--font-size-base) * 0.1rem);
    height: 10.5rem;
    margin-bottom: 3rem;
  }
}
.picture-area .career .right .wrapper .wrapper-right p:last-child {
  font-size: calc(15 * var(--font-size-base) * 0.1rem);
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .right .wrapper .wrapper-right p:last-child {
    font-size: calc(22.5 * var(--font-size-base) * 0.1rem);
  }
}
.picture-area .career .right .text {
  height: 11rem;
  font-size: calc(16 * var(--font-size-base) * 0.1rem);
  color: #ff8200;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  border: 3px solid #ff8200;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .right .text {
    height: 16.5rem;
    font-size: calc(24 * var(--font-size-base) * 0.1rem);
    margin-top: 1.5rem;
    border: 0.3rem solid #ff8200;
  }
}

.picture-area .career .left::before {
  display: block;
  content: "";
  background: url(../images/SH07/arrow.png) no-repeat center center/cover;
  width: 7.4rem;
  height: 16.4rem;
  position: absolute;
  top: 11.5rem;
  right: -9rem;
}
@media only screen and (max-width: 768px) {
  .picture-area .career .left::before {
    width: 11.1rem;
    height: 24.6rem;
    top: 17.25rem;
    right: -13.5rem;
  }
}

@media only screen and (max-width: 768px) {
  .step-inner {
    overflow-x: scroll;
  }
}

table.step01 {
  border-spacing: 0.8rem;
  margin-left: -0.8rem;
  margin-right: -0.8rem;
  margin-top: 9rem;
  position: relative;
}
@media only screen and (max-width: 768px) {
  table.step01 {
    border-spacing: 1.2rem;
    margin-left: -1.2rem;
    margin-right: -1.2rem;
    margin-top: 13.5rem;
  }
}
table.step01 th {
  width: 20rem;
  background: #9a9999;
  color: #fff;
  font-size: calc(16 * var(--font-size-base) * 0.1rem);
  line-height: 1.3;
  font-weight: 500;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  table.step01 th {
    width: 30rem;
    font-size: calc(24 * var(--font-size-base) * 0.1rem);
  }
}
table.step01 tr:first-child th {
  background: #53565a;
  height: 5.6rem;
}
@media only screen and (max-width: 768px) {
  table.step01 tr:first-child th {
    height: 8.4rem;
  }
}
table.step01 tr:first-child th:first-child {
  width: 12.5rem;
}
@media only screen and (max-width: 768px) {
  table.step01 tr:first-child th:first-child {
    padding: 0 2rem;
  }
}
table.step01 td {
  font-size: calc(15 * var(--font-size-base) * 0.1rem);
  line-height: 1.3;
  font-weight: 400;
  background: #ececea;
  white-space: nowrap;
  padding: 1.5rem;
}
@media only screen and (max-width: 768px) {
  table.step01 td {
    font-size: calc(22.5 * var(--font-size-base) * 0.1rem);
    padding: 2.25rem;
  }
}
table.step01 td ul li {
  text-indent: -1em;
  padding-left: 1em;
}
table.step01::after {
  display: block;
  content: "";
  background: url(../images/SH07/step01-frame.png) no-repeat top center/100% auto;
  width: 54.7rem;
  height: 52rem;
  position: absolute;
  top: -5.2rem;
  right: 17.8rem;
}
@media only screen and (max-width: 768px) {
  table.step01::after {
    width: 79.5rem;
    height: 78rem;
    top: -6.9rem;
    right: 25.95rem;
  }
}

@media only screen and (max-width: 768px) {
  .step02-wrap {
    overflow-x: scroll;
  }
}

.step02-inner {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .step02-inner {
    width: 150rem;
  }
}

.step02-arrow {
  position: absolute;
  top: 13rem;
  left: 1.4rem;
  width: 66.6rem;
}
@media only screen and (max-width: 768px) {
  .step02-arrow {
    top: 19.5rem;
    left: 2.1rem;
    width: 99.9rem;
  }
}

.step02-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.step02-flow li {
  color: #fff;
  background: #53565a;
  width: 15rem;
  height: 10rem;
  -webkit-clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 100%, 0 0);
          clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 100%, 0 0);
  font-size: calc(16 * var(--font-size-base) * 0.1rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .step02-flow li {
    width: 22.5rem;
    height: 15rem;
    font-size: calc(24 * var(--font-size-base) * 0.1rem);
  }
}
.step02-flow li:first-child {
  width: 20rem;
}
@media only screen and (max-width: 768px) {
  .step02-flow li:first-child {
    width: 30rem;
  }
}
.step02-flow li span {
  position: relative;
  left: -0.5rem;
  text-align: center;
  line-height: 1.3;
}
@media only screen and (max-width: 768px) {
  .step02-flow li span {
    left: -0.75rem;
  }
}

.step02-text {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 43.5rem;
  margin-top: 3rem;
}
@media only screen and (max-width: 768px) {
  .step02-text {
    height: 65.25rem;
    margin-top: 4.5rem;
  }
}
.step02-text li {
  width: 15rem;
  font-size: calc(15 * var(--font-size-base) * 0.1rem);
  line-height: 1.7;
  background: #d9d9d6;
  padding: 1.8rem;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .step02-text li {
    width: 22.5rem;
    font-size: calc(22.5 * var(--font-size-base) * 0.1rem);
    padding: 2.7rem;
  }
}
.step02-text li:first-child {
  width: 20rem;
  height: 20rem;
}
.step02-text li:nth-child(2) {
  height: 28.8rem;
}
.step02-text li:nth-child(3) {
  height: 32.5rem;
}
.step02-text li:nth-child(4) {
  height: 36rem;
}
.step02-text li:nth-child(5) {
  height: 39.5rem;
}
@media only screen and (max-width: 768px) {
  .step02-text li:first-child {
    width: 30rem;
    height: 30rem;
  }
  .step02-text li:nth-child(2) {
    height: 43.2rem;
  }
  .step02-text li:nth-child(3) {
    height: 48.75rem;
  }
  .step02-text li:nth-child(4) {
    height: 54rem;
  }
  .step02-text li:nth-child(5) {
    height: 59.25rem;
  }
}

.step02-ribbon {
  position: absolute;
  bottom: 2.5rem;
  right: 0;
  z-index: 2;
  width: 60rem;
  height: 15.2rem;
  -webkit-clip-path: polygon(5% 0%, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(5% 0%, 100% 0, 100% 100%, 0% 100%);
  background: #00bfb3;
  padding-top: 2rem;
}
@media only screen and (max-width: 768px) {
  .step02-ribbon {
    bottom: 3.75rem;
    width: 90rem;
    height: 22.8rem;
    padding-top: 3rem;
  }
}
.step02-ribbon p {
  color: #fff;
  text-align: center;
  font-size: calc(26 * var(--font-size-base) * 0.1rem);
  font-weight: 600;
}
@media only screen and (max-width: 768px) {
  .step02-ribbon p {
    font-size: calc(39 * var(--font-size-base) * 0.1rem);
  }
}
.step02-ribbon p span {
  display: block;
  font-size: calc(20 * var(--font-size-base) * 0.1rem);
}
@media only screen and (max-width: 768px) {
  .step02-ribbon p span {
    font-size: calc(30 * var(--font-size-base) * 0.1rem);
  }
}

@media only screen and (max-width: 768px) {
  .approach-wrap {
    overflow-x: scroll;
  }
}

.approach-inner {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .approach-inner {
    width: 150rem;
  }
}

.approach-service {
  border-bottom: 2px solid #9e9fa3;
}
.approach-service > div {
  width: 25.2rem;
  border-top: 2px solid #9e9fa3;
  padding: 3rem 0;
}
@media only screen and (max-width: 768px) {
  .approach-service > div {
    width: 37.8rem;
    padding: 4.5rem 0;
  }
}
.approach-service > div h3 {
  font-size: calc(16 * var(--font-size-base) * 0.1rem);
  font-weight: 700;
  margin-bottom: 1rem;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .approach-service > div h3 {
    font-size: calc(24 * var(--font-size-base) * 0.1rem);
    margin-bottom: 1.5rem;
  }
}
.approach-service > div p {
  font-size: calc(14 * var(--font-size-base) * 0.1rem);
  font-weight: 500;
  line-height: 1.7;
}
@media only screen and (max-width: 768px) {
  .approach-service > div p {
    font-size: calc(21 * var(--font-size-base) * 0.1rem);
  }
}

.approach-service02 > div {
  display: flex;
  align-items: center;
  position: relative;
}
.approach-service02 > div img {
  width: 13.4rem;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .approach-service02 > div img {
    width: 20.1rem;
  }
}
.approach-service02 > div::after {
  display: block;
  content: "";
  background: url(../images/SH07/approach-arrow.png) no-repeat center center/100% auto;
  width: 2.1rem;
  height: 3.5rem;
  margin-left: 2rem;
}
@media only screen and (max-width: 768px) {
  .approach-service02 > div::after {
    width: 3.15rem;
    height: 5.25rem;
    margin-left: 3rem;
  }
}
.approach-service02 > div + div {
  margin-top: 1.2rem;
}
@media only screen and (max-width: 768px) {
  .approach-service02 > div + div {
    margin-top: 1.8rem;
  }
}

.approach-service02__text {
  margin-left: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .approach-service02__text {
    margin-left: 3rem;
  }
}
.approach-service02__text h3 {
  font-size: calc(18 * var(--font-size-base) * 0.1rem);
  background: #00bfb3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19.5rem;
  height: 3.8rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 768px) {
  .approach-service02__text h3 {
    font-size: calc(27 * var(--font-size-base) * 0.1rem);
    width: 29.25rem;
    height: 5.7rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
  }
}
.approach-service02__text p {
  font-size: calc(12 * var(--font-size-base) * 0.1rem);
  text-align: center;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .approach-service02__text p {
    font-size: calc(18 * var(--font-size-base) * 0.1rem);
  }
}
.approach-service02__text p span {
  display: block;
  font-size: calc(16 * var(--font-size-base) * 0.1rem);
  font-weight: 700;
}
@media only screen and (max-width: 768px) {
  .approach-service02__text p span {
    font-size: calc(24 * var(--font-size-base) * 0.1rem);
  }
}

.approach-service03 {
  width: 9rem;
  height: 43rem;
  border-radius: 1rem;
  background: #00bfb3;
  margin-left: 1.5rem;
  margin-right: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .approach-service03 {
    width: 13.5rem;
    height: 64.5rem;
    margin-left: 2.25rem;
    margin-right: 7.5rem;
  }
}
.approach-service03 img {
  width: 4.8rem;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .approach-service03 img {
    width: 7.2rem;
  }
}
.approach-service03 p {
  font-size: calc(16 * var(--font-size-base) * 0.1rem);
  color: #fff;
  margin-top: 1.2rem;
}
@media only screen and (max-width: 768px) {
  .approach-service03 p {
    font-size: calc(24 * var(--font-size-base) * 0.1rem);
    margin-top: 1.8rem;
  }
}
.approach-service03::after {
  display: block;
  content: "";
  background: url(../images/SH07/approach-arrow.png) no-repeat center center/100% auto;
  width: 2.1rem;
  height: 3.5rem;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -3.5rem;
  margin: auto;
}
@media only screen and (max-width: 768px) {
  .approach-service03::after {
    width: 3.15rem;
    height: 5.25rem;
    right: -5.25rem;
  }
}

.approach-service04 {
  width: 20.8rem;
  height: 43rem;
  border-radius: 1rem;
  background: #ff8200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .approach-service04 {
    width: 31.2rem;
    height: 64.5rem;
  }
}
.approach-service04 p {
  color: #fff;
  font-size: calc(16 * var(--font-size-base) * 0.1rem);
  text-align: center;
  line-height: 1.3;
}
@media only screen and (max-width: 768px) {
  .approach-service04 p {
    font-size: calc(24 * var(--font-size-base) * 0.1rem);
  }
}
.approach-service04 p strong {
  font-size: calc(30 * var(--font-size-base) * 0.1rem);
  font-weight: 500;
}
@media only screen and (max-width: 768px) {
  .approach-service04 p strong {
    font-size: calc(45 * var(--font-size-base) * 0.1rem);
  }
}/*# sourceMappingURL=SH07.css.map */