@charset "UTF-8";

/* ======================================================================

  "Energyflex" Recruit SP Styles

====================================================================== */

/*
  Page Header
====================================================================== */
.page-header { background-color: var(--white); }
.page-header .mv img {
  height: calc(360 / 780 * 100vw);
  object-fit: cover;
}
.page-header .inner { padding: calc(40 / 780 * 100%) 0 calc(55 / 780 * 100%); }
.page-header .inner figure {
  top: calc(80 / 780 * 100vw * -1);
  right: calc(30 / 780 * 100vw * -1);
  width: calc(352 / 780 * 100vw);
}
.page-header h2 {
  font-size: calc(48 / 780 * 100vw);
  line-height: calc(60 / 48);
}
.page-header h3 {
  font-size: calc(40 / 780 * 100vw);
  letter-spacing: .025em;
}
.page-header p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(48 / 24);
  text-align: left;
  margin: calc(40 / 780 * 100%) 0 calc(45 / 780 * 100%);
}

/* Breadcrumb
---------------------------------------------------------------------- */
.page-header .breadcrumb {
  padding: 0;
  margin: 0 0 calc(75 / 780 * 100%) -10px;
}

/*
  Anchor Navi
====================================================================== */
.anchor-nav { padding: calc(30 / 780 * 100%) 0; }
.anchor-nav ul {
  flex-direction: column;
  gap: 7.5px 0;
}
.anchor-nav ul li {
  width: calc(450 / 780 * 100vw);
  font-size: calc(24 / 780 * 100vw);
  line-height: 1.4;
}
.anchor-nav ul li::before {
  left: 105%;
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(30 / 780 * 100vw);
}
.anchor-nav ul li a { padding: .75em 0 .75em 1em; }
.anchor-nav ul li a i { margin: 0 .5em 0 0; }

@media screen and (max-width:480px) {
  .anchor-nav ul li { font-size: calc((24 / 780 * 100vw) * 1.15); }
}

/*
  Section01
====================================================================== */
.sec01 { padding: calc(100 / 780 * 100%) 0 0; }
.sec01 > .inner { width: calc(660 / 780 * 100%); }
.sec01 > figure {
  top: calc(765 / 780 * 100vw);
  right: calc(277 / 780 * 100vw * -1);
  width: calc(424 / 780 * 100vw);
  height: calc(340 / 780 * 100vw);
}
.sec01 h2 {
  font-size: calc(150 / 780 * 100vw);
  text-indent: 0;
  margin: 0 0 calc(40 / 780 * 100% * -1);
}
.sec01 .contents-area {
  width: calc(100% - (20 / 780 * 100%));
  margin: 0;
  padding: calc(90 / 780 * 100%) calc(40 / 780 * 100%) calc(120 / 780 * 100%) calc(60 / 780 * 100%);
  background-color: var(--white);
  border-top-right-radius: calc(50 / 780 * 100vw);
  border-bottom-right-radius: calc(50 / 780 * 100vw);
}
.sec01 .contents-area::before { content: none; }
.sec01 .contents-area h3 {
  font-size: calc(40 / 780 * 100vw);
  margin: 0 0 calc(95 / 780 * 100%);
}

.question { gap: 15px 0; }
.question:first-of-type { flex-direction: column-reverse; }
.question:last-of-type {
  flex-direction: column-reverse;
  margin: calc(50 / 780 * 100%) 0 0;
}
.question:first-of-type figure { width: calc(275 / 780 * 100vw); }
.question:last-of-type figure { width: calc(237 / 780 * 100vw); }
.question dl dt {
  font-size: calc(36 / 780 * 100vw);
  padding: 0 0 0 calc(95 / 780 * 100vw);
  margin: 0 0 15px;
}
.question dl dt::before {
  width: calc(80 / 780 * 100vw);
  height: calc(80 / 780 * 100vw);
}
.question dl dd p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(48 / 24);
}

@media screen and (max-width:480px) {
  .question dl dd p { font-size: calc((24 / 780 * 100vw) * 1.15); }
}

/*
  Section02
====================================================================== */
.sec02 { padding: calc(200 / 780 * 100vw) 0 calc(130 / 780 * 100vw);}
.sec02 > .inner { width: calc(660 / 780 * 100%); }
.sec02 h2::after {
  top: calc(70 / 780 * 100vw * -1);
  left: calc(393 / 780 * 100vw * -1);
  width: calc(797 / 780 * 100vw);
  height: calc(343 / 780 * 100vw);
}
.sec02 h2 {
  font-size: calc(150 / 780 * 100vw);
  text-indent: 0;
  margin: 0 0 calc(40 / 780 * 100% * -1);
}
.sec02 .contents-area {
  width: calc(100% - calc(20 / 780 * 100%));
  margin: 0 0 0 calc(20 / 780 * 100%);
  padding: calc(95 / 750 * 100%) 0 calc(255 / 750 * 100%) calc(40 / 750 * 100%);
  border-top-left-radius: calc(50 / 780 * 100vw);
  border-bottom-left-radius: calc(50 / 780 * 100vw);
}
.sec02 .contents-area::after { content: none; }
.sec02 .contents-area h3 {
  font-size: calc(40 / 780 * 100vw);
  margin: 0 0 calc(40 / 750 * 100%);
}

/*
.desired-profile {
  width: 100%;
  padding: 0 calc(40 / 780 * 100%) 0 0;
}
.desired-profile > div {
  height: 100%;
  font-size: calc(28px * .8);
  font-size: calc(2.8rem * .8);
  padding: calc(60 / 750 * 100%) 0 0;
}
.desired-profile::before {
  top: calc(-50px * .8);
  width: calc(63px * .8);
  height: calc(72px * .8);
}
.desired-profile ul li:not(:last-of-type) { margin: 0 0 calc(20px * .8); }
.desired-profile > figure {
  width: 100%;
  height: auto;
}
*/
.scroll {
  overflow-x: scroll;
  padding: 0 0 20px;
}

.sec02 .contents-area > p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(48 / 24);
  text-align: center;
  margin: calc(65 / 750 * 100%) 0 0;
  padding: 0 calc(60 / 750 * 100%) 0 0;
}
.sec02 .contents-area > figure:first-of-type {
  left: calc(20 / 780 * 100vw * -1);
  bottom: calc(700 / 780 * 100vw);
  width: calc(175 / 780 * 100vw);
  height: calc(285 / 780 * 100vw);
}
.sec02 .contents-area > figure:last-of-type {
  right: calc(55 / 780 * 100vw * -1);
  bottom: calc(85 / 780 * 100vw * -1);
  width: calc(234 / 780 * 100vw);
  height: calc(372 / 780 * 100vw);
}

@media screen and (max-width:480px) {
  .desired-profile { width: 110vw; }
  .sec02 .contents-area > figure:first-of-type { bottom: calc(975 / 780 * 100vw); }
  .sec02 .contents-area > p { font-size: calc((24 / 780 * 100vw) * 1.15); }
}

/*
  Section03
====================================================================== */
.sec03 { padding: calc(200 / 780 * 100%) 0 calc(130 / 780 * 100%); }
.sec03 > .inner { width: calc(660 / 780 * 100%); }
.sec03 h2::after {
  top: calc(70 / 780 * 100vw * -1);
  left: calc(393 / 780 * 100vw * -1);
  width: calc(797 / 780 * 100vw);
  height: calc(343 / 780 * 100vw);
}
.sec03 h2 {
  font-size: calc(150 / 780 * 100vw);
  text-indent: 0;
  margin: 0 0 calc(40 / 780 * 100% * -1);
}
.sec03 .contents-area > figure {
  bottom: calc(35 / 780 * 100vw * -1);
  right: calc(148 / 780 * 100vw * -1);
  width: calc(284 / 780 * 100vw);
  height: calc(427 / 780 * 100vw);
}
.sec03 .contents-area {
  width: calc(100% - (20 / 780 * 100%));
  margin: 0 0 0 calc(20 / 780 * 100%);
  padding: calc(90 / 780 * 100%) calc(60 / 780 * 100%) calc(130 / 780 * 100%) calc(40 / 780 * 100%);
  border-top-left-radius: calc(50 / 780 * 100vw);
  border-bottom-left-radius: calc(50 / 780 * 100vw);
}
.sec03 .contents-area::after { content: none; }
.sec03 .contents-area h3 {
  font-size: calc(40 / 780 * 100vw);
  margin: 0 0 calc(60 / 780 * 100%);
}
.sec03 .contents-area h4 {
  font-size: calc(28 / 780 * 100vw);
  line-height: calc(40 / 28);
  margin: 0 0 calc(80 / 780 * 100%);
}

.overview:first-of-type { margin: 0 0 calc(70 / 780 * 100%); }
.overview h5 {
  width: fit-content;
  padding: .75em 1em;
  font-size: calc(24 / 780 * 100vw);
  text-align: center;
  margin: 0 0 20px;
}
.overview p {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(36 / 24);
}
.overview table {
  font-size: calc(24 / 780 * 100vw);
  line-height: calc(36 / 24);
}
.overview table th {
  width: 100%;
  padding: 1.5em 1em .25em;
  display: block;
}
.overview table td {
  width: 100%;
  padding: .25em 1em 1.5em;
  display: block;
}
.overview table .tr01 th { padding: 1.5em 1em .25em 1em; }
.overview table .tr01 td { padding: .25em 1em .5em; }
.overview table .tr02 th { padding: .5em 1em .25em 1em; }
.overview table .tr02 td { padding: .25em 1em .5em; }
.overview table .tr03 th { padding: .5em 1em .25em 1em; }
.overview table .tr03 td { padding: .25em 1em 1.5em; }

@media screen and (max-width:480px) {
  .overview h5 { font-size: calc((24 / 780 * 100vw) * 1.15); }
  .overview p { font-size: calc((24 / 780 * 100vw) * 1.15); }
  .overview table { font-size: calc((24 / 780 * 100vw) * 1.15); }
}

/* Link Button
---------------------------------------------------------------------- */
.sec03 .contents-area .link-btn {
  width: calc(620 / 780 * 100vw);
  height: calc(90 / 780 * 100vw);
  margin: 50px auto 0;
}
.sec03 .contents-area .link-btn a {
  font-size: calc(28 / 780 * 100vw);
  border-radius: calc( (90 / 2) / 780 * 100vw );
}
.sec03 .contents-area .link-btn a::before {
  width: calc(18 / 780 * 100vw);
  height: calc(22 / 780 * 100vw);
}