/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
:root {
  --viewport-width: min(100vw, 2000px);
  --b: calc(var(--viewport-width) / 160);
}

#recruit .recruit-title {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  row-gap: 10px;
  margin-bottom: max(3.5rem, 30px);
}
#recruit .recruit-title p {
  color: #3a9447;
  font-family: YakuHanJP, "Outfit", sans-serif;
  font-size: max(1.6rem, 14px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
#recruit .recruit-title h2 {
  color: #3a9447;
  font-size: max(3.6rem, 22px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
#recruit .detail__wrapper {
  padding-top: max(11rem, 70px);
  padding-bottom: max(10.5rem, 70px);
}
#recruit .detail__inner {
  display: grid;
  gap: 0 max(10rem, 50px);
  grid-template-columns: max(18rem, 150px) 1fr;
}
@media screen and (max-width: 768px) {
  #recruit .detail__inner {
    grid-template-columns: 1fr;
  }
}
#recruit .detail__inner:not(:first-of-type) {
  margin-top: max(14.5rem, 70px);
}
#recruit .detail__info {
  display: grid;
  grid-template-columns: auto 1fr;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
}
#recruit .detail__info__item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  gap: 10px max(6rem, 20px);
  padding: max(2rem, 15px) max(2rem, 10px);
}
@media screen and (max-width: 550px) {
  #recruit .detail__info__item {
    grid-template-columns: 1fr;
  }
}
#recruit .detail__info__item:nth-of-type(even) {
  background: rgba(58, 148, 71, 0.1);
}
#recruit .detail__info__item:not(:last-of-type) {
  border-bottom: max(0.2rem, 2px) dotted rgba(58, 148, 71, 0.6);
}
#recruit .detail__info__item dt,
#recruit .detail__info__item dd {
  font-size: max(1.6rem, 14px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
#recruit .detail__info__item dt {
  width: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
#recruit .detail__info__item dd {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
}
#recruit .detail__info__item dd > ul li {
  list-style-type: disc;
  margin-left: 1em;
}
#recruit .detail__info__item dd > dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
#recruit .detail__info__item dd .circleMarker {
  position: relative;
  padding-left: 1.2em;
}
#recruit .detail__info__item dd .circleMarker::before {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 0;
  width: 1em;
  height: 1em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #183b5a;
}
#recruit .detail__info__item dd img {
  width: max(44rem, 300px);
  -o-object-fit: contain;
     object-fit: contain;
  margin-top: 0.5lh;
}
@media screen and (max-width: 550px) {
  #recruit .detail__info__item dd img {
    width: 90%;
  }
}
#recruit .flow__wrapper {
  padding-bottom: max(13.5rem, 70px);
}
@media screen and (min-width: 768px) {
  #recruit .flow__wrapper > .attention small {
    text-align: right;
  }
}
#recruit .flow__content {
  border-radius: max(3rem, 20px);
  border: max(0.2rem, 2px) solid #3a9447;
  overflow: hidden;
}
#recruit .flow__content__header {
  padding: max(2rem, 15px) 5%;
  background: #f5faf5;
}
#recruit .flow__content__header h3 {
  font-size: max(2rem, 16px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
#recruit .flow__content__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1em;
  padding: max(5rem, 30px) 5%;
  font-size: max(1.6rem, 14px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#recruit .flow__content__body * {
  font-size: max(1.6rem, 14px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#recruit .flow__content__body__line {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  margin: 0.5em 0;
  width: 0.75em;
}
#recruit .flow__content__body__line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: max(0.2rem, 2px);
  height: 0%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-image: radial-gradient(circle, #3a9447 0, #3a9447 50%, transparent 50%, transparent 100%);
  background-size: max(0.2rem, 2px) max(0.4rem, 4px);
  background-position: center top;
  background-repeat: repeat-y;
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transition: height 1s linear;
  transition: height 1s linear;
}
#recruit .flow__content__body__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: max(3rem, 30px) max(4rem, 20px);
}
@media screen and (max-width: 550px) {
  #recruit .flow__content__body__item {
    grid-template-columns: 1fr;
  }
}
#recruit .flow__content__body__item dl {
  position: relative;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}
@media screen and (max-width: 550px) {
  #recruit .flow__content__body__item dl {
    grid-column: span 1;
    row-gap: max(0.5rem, 5px);
  }
}
#recruit .flow__content__body__item dl::before {
  content: "";
  position: absolute;
  top: 0.675em;
  left: -1.75em;
  width: 0.75em;
  height: 0.75em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #3a9447;
  -webkit-transform: translateY(-50%) scale(0);
          transform: translateY(-50%) scale(0);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transition: -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
#recruit .flow__content__body__item dl:nth-of-type(1)::before {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
#recruit .flow__content__body__item dl:nth-of-type(2)::before {
  -webkit-transition-delay: 0.13s;
          transition-delay: 0.13s;
}
#recruit .flow__content__body__item dl:nth-of-type(3)::before {
  -webkit-transition-delay: 0.26s;
          transition-delay: 0.26s;
}
#recruit .flow__content__body__item dl:nth-of-type(4)::before {
  -webkit-transition-delay: 0.39s;
          transition-delay: 0.39s;
}
#recruit .flow__content__body__item dl:nth-of-type(5)::before {
  -webkit-transition-delay: 0.52s;
          transition-delay: 0.52s;
}
#recruit .flow__content__body__item dl:nth-of-type(6)::before {
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
}
#recruit .flow__content__body__item dl:nth-of-type(7)::before {
  -webkit-transition-delay: 0.78s;
          transition-delay: 0.78s;
}
#recruit .flow__content__body__item dl dd {
  font-weight: 500;
}
#recruit .flow__content__body.active .flow__content__body__line::before {
  height: 100%;
}
#recruit .flow__content__body.active .flow__content__body__item dl::before {
  -webkit-transform: translateY(-50%) scale(1);
          transform: translateY(-50%) scale(1);
}/*# sourceMappingURL=recruit.css.map */