@charset "UTF-8";

/*
	##### DNP RECRUITING #####
	/recruit/newgraduates/business/css/biz_sp.css
*/

.main-ttl-area {
  display: block;
  width: 100%;
  padding-top: calc(196 / 750 * 100vw);
  padding-bottom: calc(80 / 750 * 100vw);
  text-align: center;

  & .page-ttl {
    font-size: calc(40 / 750 * 100vw);
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: calc(24 / 750 * 100vw);
  }
  & .en {
    font-size: calc(18 / 750 * 100vw);
    font-weight: 400;
    letter-spacing: .08em
  }
}

.fv-area {
  display: block;
  width: calc(700 / 750 * 100vw);
  margin: 0 auto calc(80 / 750 * 100vw);

   & .topic-path {
    display: none;
   }
   & .image-box {
    width: 100%;
    height: calc(400 / 750 * 100vw);
    border-radius: calc(28 / 750 * 100vw);
    overflow: hidden
   }
}

.main-lead-area {
  padding: 0 calc(55 / 750 * 100vw);
  margin-bottom: calc(55 / 750 * 100vw);
  font-size: calc(26 / 750 * 100vw);
  font-weight: 500;
  line-height: 2.1538461538461537;
  letter-spacing: .1em;
  font-feature-settings: "palt";
  text-align: justify;
}

.anchor-link-set {
  padding: 0 calc(25 / 750 * 100vw);
  justify-content: center;

  .anchor-link-bttn {
    flex: 0 1 33.3333%;
    height: calc(128 / 750 * 100vw);
    overflow: hidden;
    position: relative;

    &:has(a[href*="smart"]) {
      border-radius: calc(20 / 750 * 100vw) 0 0 calc(20 / 750 * 100vw);
      background-color: var(--biz-color1)
    }
    &:has(a[href*="life"]) {
      background-color: var(--biz-color2)
    }
    &:has(a[href*="elec"]) {
      border-radius: 0 calc(20 / 750 * 100vw) calc(20 / 750 * 100vw) 0;
      background-color: var(--biz-color3)
    }

    & a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      color: #fff;
      font-size: calc(22 / 750 * 100vw);
      font-weight: 700;
      font-feature-settings: "palt";
      letter-spacing: .08em;
      line-height: 1.3636363636363635;
      text-align: center;
    }
  }
}


.contents-area {
  width: 100%;
  padding-top: calc(296 / 750 * 100vw);
  padding-bottom: calc(160 / 750 * 100vw);
  overflow-x: hidden;
}

.biz-inner .txt-area {
  margin-bottom: calc(82 / 750 * 100vw)
}

.biz-inner .ttl-set {
  display: flex;
  flex-direction: column-reverse;
  letter-spacing: .08em;
  margin-bottom: calc(70 / 750 * 100vw);

  & .jp {
    font-size: calc(62 / 750 * 100vw);
    font-weight: 700;
    font-feature-settings: "palt";
    line-height: 1.3225806451612903
  }

  & .en {
    display: inline-block;
    margin-bottom: calc(55 / 750 * 100vw);
    font-size: calc(24 / 750 * 100vw);
    font-weight: 400;

    &::before {
      content: '';
      display: inline-block;
      width: calc(8 / 750 * 100vw);
      height: calc(8 / 750 * 100vw);
      border-radius: 50%;
      vertical-align: middle;
      margin-right: calc(14 / 750 * 100vw);
    }
  }
}
.biz-inner .lead {
  font-size: calc(26 / 750 * 100vw);
  font-feature-settings: "palt";
  letter-spacing: .08em;
  line-height: 2.1538461538461537;
  text-align: justify;
}

.biz-1 {
  display: block;
  width: calc(725 / 750 * 100vw);
  padding-top: calc(110 / 750 * 100vw);
  padding-bottom: calc(130 / 750 * 100vw);
  background-color: var(--color3);
  border-radius: 0 calc(30 / 750 * 100vw) calc(30 / 750 * 100vw) 0;
  position: relative;

  &::before {
    content: '';
    display: block;
    width: calc(409 / 750 * 100vw);
    height: calc(166 / 750 * 100vw);
    background: url(/recruit/newgraduates/business/images/bg-orn_sp.svg) no-repeat left bottom / contain;
    position: absolute;
    left: 0;
    top: calc(-165 / 750 * 100vw);
  }
  &::after {
    white-space: pre;
    content: 'Smart\A Communication';
    writing-mode: vertical-rl;
    font-family: "Mulish", sans-serif;
    font-size: calc(130 / 750 * 100vw);
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 0.89;
    color: rgba(var(--biz-rgb1), .1);
    position: absolute;
    left: calc(100% - calc(185 / 750 * 100vw));
    top: calc(380 / 750 * 100vw);
  }

  & .biz-wrapper {
    padding-bottom: calc(130 / 750 * 100vw);
    position: relative;
    z-index: +1;

    &::before {
      content: '';
      display: block;
      width: calc(14 / 750 * 100vw);
      height: 100%;
      background-color: var(--biz-color1);
      border-radius: 0 calc(14 / 750 * 100vw) calc(14 / 750 * 100vw) 0;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  & .biz-inner {
    padding: 0 calc(40 / 750 * 100vw) 0 calc(55 / 750 * 100vw);
    margin: 0 auto;
  }
  
  & .label {
    color: var(--biz-color1)
  }
  & .ttl-set {
    color: var(--biz-color1);

    & .en::before {
      background-color: var(--biz-color1)
    }
  }
}

.bttns-area {
  width: 100%;

  & .biz-cat {
    font-feature-settings: "palt";
    display: block;

    & + & {
      margin-top: calc(120 / 750 * 100vw);
    }

    & .label {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: calc(180 / 750 * 100vw);
      text-align: center;
      font-size: calc(30 / 750 * 100vw);
      font-weight: 500;
      line-height: 1.3333333333333333;
      letter-spacing: .12em
    }

    & .des {
      font-size: calc(26 / 750 * 100vw);
      letter-spacing: .08em;
      line-height: 2.1538461538461537;
      text-align: justify;
    }

    & .img-box {
      display: block;
      border-radius: calc(20 / 750 * 100vw);
      width: 100%;
      height: calc(430 / 750 * 100vw);
      overflow: hidden;
      background-color: gray
    }
  }
  & .biz-cat.no-photo dl {
    display: block;
    padding: 0 calc(50 / 750 * 100vw) calc(65 / 750 * 100vw);
    border-radius: calc(20 / 750 * 100vw);
    background-color: #f3f3f5;
  }
}
.biz-1 :is(.persons dt, .persons .ttl) {
  font-weight: 500;
  color: var(--biz-color1);
}
.biz-2 :is(.persons dt, .persons .ttl) {
  font-weight: 500;
  color: var(--biz-color2);
}
.biz-3 :is(.persons dt, .persons .ttl) {
  font-weight: 500;
  color: var(--biz-color3);
}

.persons {
  display: block;
  width: 100%;
  border-top: 1px solid #d7d6d5;
  margin-top: calc(55 / 750 * 100vw);
  padding-top: calc(50 / 750 * 100vw);

  & dt {
    font-size: calc(30 / 750 * 100vw);
    letter-spacing: .012em;
    text-align: center;
    margin-bottom: calc(55 / 750 * 100vw);
  }
  & .person-link-list {
    display: flex;
    column-gap: calc(30 / 750 * 100vw);
    row-gap: calc(50 / 750 * 100vw);
    flex-wrap: wrap;

    & li {
      flex: 0 0 calc(300 / 750 * 100vw);
      text-align: center;

      & a {
        display: block;
        width: 100%;
        height: 100%;

        & .portrait {
          display: inline-block;
          width: calc(300 / 750 * 100vw);
          height: calc(300 / 750 * 100vw);
          overflow: hidden;
          border-radius: 50%;
        }
        & .ttl, 
        & .date {
          font-size: calc(24 / 750 * 100vw);
          line-height: 1.25;
        }
        & .date {
          color: #000;
        }
      }
    }
  }
}


.second-sec {
  display: block;
  background-color: var(--color3);
}
.biz-2 {
  display: block;
  width: calc(725 / 750 * 100vw);
  margin-left: calc(25 / 750 * 100vw);
  padding-top: calc(160 / 750 * 100vw);
  padding-bottom: calc(130 / 750 * 100vw);
  background-color: #fff;
  border-radius: calc(30 / 750 * 100vw) 0 0 calc(30 / 750 * 100vw);
  position: relative;

  &::after {
    white-space: pre;
    content: 'Life &\A Healthcare';
    writing-mode: vertical-rl;
    font-family: "Mulish", sans-serif;
    font-size: calc(130 / 750 * 100vw);
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 0.89;
    color: rgba(var(--biz-rgb2), .1);
    position: absolute;
    left: calc(100% - calc(210 / 750 * 100vw));
    top: calc(350 / 750 * 100vw);
  }

  & .biz-wrapper {
    padding-bottom: calc(130 / 750 * 100vw);
    position: relative;
    z-index: +1;

    &::before {
      content: '';
      display: block;
      width: calc(14 / 750 * 100vw);
      height: 100%;
      background-color: var(--biz-color2);
      border-radius: calc(14 / 750 * 100vw) 0 0 calc(14 / 750 * 100vw);
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  & .biz-inner {
    padding: 0 calc(55 / 750 * 100vw) 0 calc(40 / 750 * 100vw);
    margin: 0 auto;
    }

  
  & .label {
  color: var(--biz-color2)
  }
  & .ttl-set {
    color: var(--biz-color2);

    & .en::before {
      background-color: var(--biz-color2)
    }
  }
}


.biz-3 {
  display: block;
  width: calc(725 / 750 * 100vw);
  padding-top: calc(110 / 750 * 100vw);
  background-color: var(--color3);
  border-radius: 0 calc(30 / 750 * 100vw) calc(30 / 750 * 100vw) 0;
  position: relative;

  &::after {
    white-space: pre;
    content: 'Electronics';
    writing-mode: vertical-rl;
    font-family: "Mulish", sans-serif;
    font-size: calc(130 / 750 * 100vw);
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 0.89;
    color: rgba(var(--biz-rgb3), .1);
    position: absolute;
    left: calc(100% - calc(73 / 750 * 100vw));
    top: calc(110 / 750 * 100vw);
  }

  & .biz-wrapper {
    padding-bottom: calc(170 / 750 * 100vw);
    position: relative;
    z-index: +1;

    &::before {
      content: '';
      display: block;
      width: calc(14 / 750 * 100vw);
      height: 100%;
      background-color: var(--biz-color3);
      border-radius: 0 calc(14 / 750 * 100vw) 0 0;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  & .biz-inner {
    padding: 0 calc(40 / 750 * 100vw) 0 calc(55 / 750 * 100vw);
    margin: 0 auto;
  }
  
  & .label {
  color: var(--biz-color3)
  }
  & .ttl-set {
    color: var(--biz-color3);

    & .en::before {
      background-color: var(--biz-color3)
    }
  }
}



.more-contents-bttn-area {
  margin-bottom: calc(200 / 750 * 100vw);
}

.more.contents-bttn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(204 / 750 * 100vw);
  width: calc(725 / 750 * 100vw);
  color: #fff;
  background-color: rgba(10, 67, 123, 1);
  background-image: linear-gradient(#1E5286 1px, transparent 0), linear-gradient(90deg, #1E5286 1px, transparent 0);
  background-position: center;
  background-size: calc(18 / 750 * 100vw) calc(18 / 750 * 100vw);
  border-radius: 0 calc(30 / 750 * 100vw) calc(30 / 750 * 100vw) 0;
  overflow: hidden;
  position: relative;

  &::after {
    position: absolute;
    right: calc(50 / 750 * 100vw);
    content: '';
    display: block;
    width: calc(60 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    border-radius: 50%;
    background: no-repeat center center / contain;
    background-color: #fff;
    background-image: url(/recruit/newgraduates/shared/images/bttn-popup_c1.svg);
}

  & .jp {
    font-size: calc(36 / 750 * 100vw);
    font-weight: 700;
    font-feature-settings: "palt";
    letter-spacing: .08em;
    line-height: 1.3888888888888888;
    text-indent: calc(-82 / 750 * 100vw);

    &::before {
      content: '';
      display: inline-block;
      width: calc(60 / 750 * 100vw);
      height: calc(2 / 750 * 100vw);
      background-color: #fff;
      margin-right: calc(22 / 750 * 100vw);
      vertical-align: middle;
    }
  }
}

.extra-recommended-area {
  display: block;
  width: 100%;
  padding: 0 calc(25 / 750 * 100vw);
  margin: 0 auto calc(50 / 750 * 100vw);
  position: relative;

  & .recomme-ttl {
    display: inline-flex;
    flex-direction: column-reverse;
    padding-left: calc(30 / 750 * 100vw);
    margin-bottom: calc(26 / 750 * 100vw);

    & .jp {
      font-size: calc(34 / 750 * 100vw);
      font-weight: 700;
      letter-spacing: .03em;
    }
    & .en {
      font-size: calc(22 / 750 * 100vw);
      letter-spacing: .08em;
      margin-bottom: calc(15 / 750 * 100vw);

      &::before {
        content: '';
        display: inline-block;
        width: calc(5 / 750 * 100vw);
        height: calc(5 / 750 * 100vw);
        border-radius: 50%;
        vertical-align: middle;
        margin-right: calc(16 / 750 * 100vw);
        background-color: #000
      }
    }
  }

  & .next-contents-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, calc(280/750*100vw));
    border-radius: calc(30 / 750 * 100vw);
    overflow: hidden;
    height: calc(1120 / 750 * 100vw);

    & li {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;

      & .image-box {
        display: block;
        width: 100.1%;
        height: 100.1%;
      }

      & a {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: calc(40 / 750 * 100vw) calc(30 / 750 * 100vw);
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        background-color: rgba(0, 0, 0, .48);

        &::after {
          content: '';
          display: block;
          width: calc(60 / 750 * 100vw);
          height: calc(60 / 750 * 100vw);
          border-radius: 50%;
          position: absolute;
          right: calc(50 / 750 * 100vw);
          top: 50%;
          transform: translateY(-50%);
          background: no-repeat center center / contain;
          background-image: url(/recruit/newgraduates/shared/images/bttn-link_blk.svg);
          background-color: #fff;
        }

        & .num {
          display: block;
          height: calc(50 / 750 * 100vw);

          & img {
            height: 100%;
            width: auto;
          }
        }
        & .jp {
          display: inline-block;
          font-size: calc(34 / 750 * 100vw);
          font-weight: 700;
          font-feature-settings: "palt";
          letter-spacing: .1em;
          line-height: 1.411764705882353;
        }
      }
    }
  }
}