@charset "utf-8";

/* ----------------
benefits-system-image_flex
---------------- */
.page-section.type-introduction:before,
.page-section.type-introduction:after { display: none; }
@media screen and (min-width: 1367px) {
.page-section.type-introduction:before,
.page-section.type-introduction:after {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  position: absolute;
}
}

.page-section.type-introduction:before {
  background-image: url(/assets/images/benefits/benefits_illust_01.png);
  height: 282px;
  left: calc(13% + 0px);
  top: 0;
  width: 240px;
}
@media screen and (min-width: 1367px) {

}

.page-section.type-introduction:after {
  background-image: url(/assets/images/benefits/benefits_illust_02.png);
  height: 150px;
  right: calc(13% + 0px);
  top: -3em;
  width: 110px;
}
@media screen and (min-width: 1367px) {
.page-section.type-introduction:after {
  background-image: url(/assets/images/benefits/benefits_illust_02.png);
  height: 317px;
  right: calc(13% + 0px);
  top: -3em;
  width: 231px;
}
}

.page-section_figure { margin-top: 44px; }

.group-section { margin-top: 100px; }
@media screen and (min-width: 1367px) {
.group-section { margin-top: 122px; }
}

.page-section.is_page-icon { margin-top: 80px; }

.benefits-contents_wrap { margin-top: 77px; }
@media screen and (min-width: 1367px) {
.benefits-contents_wrap { margin-top: 107px; }
}

.benefits-contents_wrap .benefits-contents:nth-child(1):before {
  background-image: url(/assets/images/common/popularity.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: 74px;
  left: 1em;
  position: absolute;
  top: -2.7em;
  width: 78px
}

.benefits-data { margin-top: 40px; }

.benefits-system-image_flex {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  width: 100%;
}
@media screen and (max-width: 440px) {
.benefits-system-image_flex { flex-wrap: wrap; }
}
@media screen and (min-width: 1367px) {
.benefits-system-image_flex { margin-top: 60px; }
}

.benefits-system-image_flex figure { width: 100%; }
@media screen and (min-width: 1367px) {
.benefits-system-image_flex figure:nth-child(1) { width: 573px; }
.benefits-system-image_flex figure:nth-child(2) { width: 411px; }
}

.benefits-system-image { margin-top: 60px; }

.section-contents_body .button { width: 100%; }
@media screen and (min-width: 1367px) {
.section-contents_body .button { width: 260px; }
}

.section_workflow {
  background-color: var(--orange);
  margin-top: 50px;
  padding-bottom: 100px;
  position: relative;
}
@media screen and (min-width: 1367px) {
.section_workflow {
  margin-top: 100px;
  padding-bottom: 200px;
}
}

.section_workflow:before {
  background-image: url(/assets/images/benefits/benefits_illust_03.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: 140px;
  position: absolute;
  right: calc(10% + 0px);
  top: 4em;
  width: 100px;
  z-index: 2;
}
@media screen and (min-width: 441px) and (max-width: 1366px) {
.section_workflow:before {
  height: 200px;
  width: 150px;
}
}
@media screen and (min-width: 1367px) {
.section_workflow:before {
  height: 249px;
  right: calc(25% + 0px);
  top: 13em;
  width: 181px;
}
}
@media screen and (min-width: 1367px) {
.section_workflow:before {
  height: 249px;
  right: calc(25% + 0px);
  top: 13em;
  width: 181px;
}
}

.section_workflow .section-contents { margin-top: 100px; }
@media screen and (min-width: 1367px) {
.section_workflow .section-contents { margin-top: 200px; }
}

.workflow_wrap {
  display: flex;
  justify-content: space-between;
  margin: 30px auto 0;
  padding-left: 2em;
  position: relative;
  width: 90%;
}
@media screen and (min-width: 769px) {
.workflow_wrap {
  margin-top: 50px;
  padding-left: 0;
}
}

.workflow_wrap:before {
  background-color: var(--orange);
  content: '';
  display: block;
  height: 91%;
  left: .5em;
  position: absolute;
  top: 2em;
  width: 5px;
}
@media screen and (min-width: 769px) and (max-width: 1366px) {
.workflow_wrap:before {
  height: 86%;
  left: 46%;
  transform: translateX(-50%);
}
}
@media screen and (min-width: 1367px) {
.workflow_wrap:before {
  left: 50%;
  transform: translateX(-50%);
}
}

.workflow-figure { display: none; }
@media screen and (min-width: 769px) and (max-width: 1366px) {
.workflow-figure {
  display: block;
  width: 40%;
}
}
@media screen and (min-width: 1367px) {
.workflow-figure {
  display: block;
  width: 370px;
}
}

@media screen and (min-width: 769px) and (max-width: 1366px) {
.workflow-figure figure {
  border-radius: 16px;
  height: 250px;
  overflow: hidden;
  width: 100%;
}
}
@media screen and (min-width: 1367px) {
.workflow-figure figure { height: 250px; }
.workflow-figure figure:nth-child(n+2) { margin-top: 113px; }
}

@media screen and (min-width: 769px) and (max-width: 1366px) {
.workflow-figure figure:nth-child(n+2) { margin-top: 113px; }
}
@media screen and (min-width: 1367px) {
.workflow-figure figure:nth-child(n+2) { margin-top: 113px; }
}

.workflow-figure figure img { width: 100%; }

.workflow-schedule { width: 100%; }
@media screen and (min-width: 769px) and (max-width: 1366px) {
.workflow-schedule { width: 50%; }
}
@media screen and (min-width: 1367px) {
.workflow-schedule { width: 412px; }
}

.workflow-schedule .workflow-schedule_contents:nth-child(n+2) { margin-top: 55px; }
@media screen and (min-width: 1367px) {
.workflow-schedule .workflow-schedule_contents:nth-child(n+2) { margin-top: 55px; }
}

.workflow-schedule_contents dt {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.875;
  position: relative;
}
@media screen and (min-width: 1367px) {
.workflow-schedule_contents dt { font-size: 24px; }
}

.workflow-schedule_contents dt span {
  color: var(--orange);
  display: inline-block;
  font-size: 22px;
  line-height: 1.5;
  width: 3em;
}
@media screen and (min-width: 1367px) {
.workflow-schedule_contents dt span { font-size: 30px; }
}

.workflow-schedule_contents dt:before {
  background-image: url(/assets/images/benefits/mark.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: 35px;
  left: -2.25em;
  position: absolute;
  top: 0;
  width: 37px;
}
@media screen and (min-width: 769px) and (max-width: 1366px) {
.workflow-schedule_contents dt:before { left: -2.9em; }
}
@media screen and (min-width: 1367px) {
.workflow-schedule_contents dt:before {
  height: 45px;
  left: -2.55em;
  width: 47px;
}
}

.workflow-schedule_contents dd {
  font-size: 14px;
  line-height: 1.85;
  margin-top: 1em;
}

.workflow-schedule_contents dd span { color: var(--orange); }

.company-tour { margin-top: 100px; }

.company-access { margin-top: 80px; }

.cta-section { padding: 80px 0 100px; }