main {
  --color-blue: #6657ef;
  --color-gray: #f4f4f4;
  --gauge-circle-size: 210px;
  --gauge-circle-color: #6657ef;
  --score-container-padding: 4px;
  --lightpurple: #f5f5ff;
}
main h1,
main .h1 {
  font-size: 44px;
}
.color-blue {
  color: var(--color-blue, #2858aa) !important;
}
.bg-blue {
  background-color: var(--color-blue, #2858aa) !important;
}
main.bg-gray,
.bg-gray {
  background-color: var(--color-gray, #ebebeb) !important;
}
.bg-lightpurple {
  background-color: var(--lightpurple, #f5f5ff) !important;
}

.bg-lightgray {
  background-color: #f6f6f6;
}
#main-header {
  padding-top: 3rem;
  padding-bottom: 3.75rem;
}

#faq,
#case {
  background-color: #ebf3ff;
}

#case {
  background-image: linear-gradient(135deg, #fff, #ebf3ff);
}
.swiper-slide img {
  width: auto;
}
#percentage > :not(:last-child) {
  margin-bottom: 24px;
}
.lh-score__gauge {
  width: auto;
  margin: 0px auto;
}
.lh-gauge__wrapper,
.lh-fraction__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: var(--score-container-padding);
  contain: content;
  color: var(--gauge-circle-color);
  fill: transparent;
  stroke: var(--gauge-circle-color);
  will-change: opacity;
}
.lh-gauge__svg-wrapper {
  position: relative;
  height: var(--gauge-circle-size);
}
.lh-gauge {
  stroke-linecap: round;
  width: var(--gauge-circle-size);
  height: var(--gauge-circle-size);
}
.lh-gauge-base {
  opacity: 0.1;
}
.lh-gauge-arc {
  fill: none;
  transform-origin: 50% 50%;
  animation: load-gauge 1s ease forwards;
  animation-delay: 250ms;
}
.lh-gauge__percentage {
  width: 100%;
  height: var(--gauge-circle-size);
  position: absolute;
  line-height: 0;
  text-align: center;
  top: calc(
    var(--score-container-padding) + (var(--gauge-circle-size) / 2) - 10px
  );
  font-size: calc(var(--gauge-circle-size) * 0.1 + 8px);
  & .color-black {
    font-size: calc(var(--gauge-circle-size) * 0.1);
  }
  & .font-weight-bold {
    padding-top: calc(1.5rem + var(--score-container-padding));
  }
}
@keyframes load-gauge {
  from {
    stroke-dasharray: 0 352;
  }
}
@media (min-width: 768px) {
  #main-header {
    clip-path: ellipse(100% 100% at 50% 0%);
  }

  #procedure {
    background-color: #f5f5ff;
    margin-top: -50px;
    padding-top: 100px;
    padding-bottom: 50px;
  }

  /* #faq {
    clip-path: ellipse(100% 67% at 50% 67%);
  } */
  #case > .image {
    background-image: url("/img/product/e-recruiting/circle-1.png"),
      url("/img/product/e-recruiting/circle-2.png");
    background-repeat: no-repeat;
    background-size: 450px 360px, 250px 500px;
    background-position: left bottom, right bottom;
  }
}

#procedure {
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
}

#procedure .container {
  width: 100%;
}

#procedure-pc {
  width: 1300px;
}
#procedure-mobile * {
  font-size: 14px;
}
.procedure-left::after,
.procedure-right::before {
  content: "";
  width: min(max(10vw, 120px), 148px);
  height: 1px;
  background-color: #707070;
  margin: 0 0 0 8px;
}
.procedure-right::before {
  margin: 0 8px 0 0;
}

.bg-lazyload {
  background-color: #333;
}

h2.main-color {
  position: relative;
}
h2.main-color::before {
  content: attr(data-count);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 80px;
  color: #323232;
  opacity: 0.2;
  line-height: 1;
}
section p {
  margin-bottom: 0.5rem;
}


/**/
#procedure-pc img {
  width: 100%;
  height: auto;
  max-width: 920px;
}

.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
}

/* table */
/* 版面與間距 */
.cmp {
  border-collapse: separate;
  border-spacing: 0 12px;
  width: 90%;
  table-layout: fixed;
}
.cmp th {
  border-radius: 16px;
  padding: 16px 14px;
  text-align: center;
  white-space: nowrap;
}
.cmp td.rhs {
  background: #fff;
  border-radius: 16px;
  padding: 16px 14px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* 中間「浮起卡片」欄 */
.cmp td.hi {
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 1;
}
.cmp .card, #mobile-table-ares {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.cmp .card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 18px 22px;
}
.cmp .card-head img {
  height: 50px;
}

.cmp .card--body {
  padding: 0 22px 18px;
}

.cmp .item {
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid rgb(137 137 137 / 25%);
}
.cmp .item.last {
  border-bottom: none;
}

.cmp td.hi--center {
  z-index: 3;
}
.cmp td.hi--center .card {
  transform: translateY(-8px);
  margin-inline: -12px;
}

.hi--center .card-head {
  padding: 0;
  height: 63px;
}

.cmp td.hi--left,
.cmp td.hi--right {
  z-index: 2;
}

/* 手機版 */
#mobile-table-ares .card-head,  #mobile-table-normal .card-head{
  padding: 8px 24px;
}

#mobile-table-normal .card-head{
  padding: 18px 24px;
}

@media (min-width:1440px) {
   #faq {
    clip-path: ellipse(100% 67% at 50% 67%);
  }
}