@charset "UTF-8";

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


.main-ttl-area {
  display: block;
  width: 100%;
  padding-top: calc(130 var(--w-formulae));
  padding-bottom: calc(105 var(--w-formulae));
  text-align: center;


  @media (width < 1200px) {
    padding-top: 204px
  }

  & .page-ttl {
    font-size: calc(38 var(--w-formulae));
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: calc(24 var(--w-formulae));

  }
  & .en {
    font-size: calc(16 var(--w-formulae));
    font-weight: 400;
    letter-spacing: .08em;

  }
}

.fv-area {
  display: block;
  width: 100%;
  max-width: 1830px;
  padding: 0 15px;
  margin: 0 auto calc(105 var(--w-formulae));

  & .topic-path {
    margin-left: calc(30 var(--w-formulae));
    margin-bottom: calc(15 var(--w-formulae));
  }
  & .image-box {
    width: 100%;
    height: calc(550 var(--w-formulae));
    border-radius: 28px;
    overflow: hidden
  }
}


.main-lead-area {
  text-align: center;
  margin-bottom: calc(82 var(--w-formulae));
  font-size: calc(16 var(--w-formulae));
  font-weight: 500;
  line-height: 2;
  letter-spacing: .12em;
  font-feature-settings: "palt";

}

.anchor-link-set {
  padding: 0 calc(15 var(--w-formulae));
  justify-content: center;
  column-gap: calc(20 var(--w-formulae));

  .anchor-link-bttn {
    flex: 0 1 calc(320 var(--w-formulae));
    height: calc(93 var(--w-formulae));
    border-radius: 20px;
    overflow: hidden;
    position: relative;

    &:has(a[href*="smart"]) {
      background-color: var(--biz-color1)
    }
    &:has(a[href*="life"]) {
      background-color: var(--biz-color2);
      --el-index: 3;
    }
    &:has(a[href*="elec"]) {
      background-color: var(--biz-color3);
      --el-index: 6;
    }

    &::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border: solid calc(6 var(--w-formulae)) transparent;
      border-top: solid calc(7 var(--w-formulae)) #fff;
      position: absolute;
      right: calc(20 var(--w-formulae));
      top: 50%;
      transform: translate(0, -25%);
    }

    & a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      color: #fff;
      font-size: calc(15 var(--w-formulae));
      font-weight: 700;
      font-feature-settings: "palt";
      letter-spacing: .08em;
      background-color: rgba(255, 255, 255, 0);
    }
  }
}

@media (hover: hover) {
  .anchor-link-bttn a {
    transition: background-color .3s ease
  }
  .anchor-link-bttn a:hover {
    background-color: rgba(255, 255, 255, .2)
  }
}

@media (width <= 1024px) {
  .anchor-link-set {
    column-gap: 0;

    .anchor-link-bttn {
      border-radius: 0;
  
      &:has(a[href*="smart"]) {
        border-radius: 20px 0 0 20px;
        background-color: var(--biz-color1)
      }
      &:has(a[href*="life"]) {
        background-color: var(--biz-color2)
      }
      &:has(a[href*="elec"]) {
        border-radius: 0 20px 20px 0;
        background-color: var(--biz-color3)
      }
      &::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 10px;
        transform: translate(-50%, 0);
      }
    }
  }
}

.contents-area {
  width: 100%;
  padding-top: calc(260 var(--w-formulae));
  padding-bottom: calc(150 var(--w-formulae));
  overflow-x: hidden;
}

.biz-inner .txt-area {
  display: flex;
  align-items: flex-start;
  margin-bottom: calc(125 var(--w-formulae));

  @media (width < 1200px) {
    flex-direction: column;
    margin: 0 auto 125px;
  }
}
.biz-inner .ttl-set {
  display: flex;
  flex-direction: column-reverse;
  letter-spacing: .08em;

  & .jp {
    font-size: calc(40 var(--w-formulae));
    font-weight: 700;
    font-feature-settings: "palt";
    line-height: 1.25;
    white-space: nowrap;
  }

  & .en {
    display: inline-block;
    margin-bottom: calc(20 var(--w-formulae));
    font-size: calc(16 var(--w-formulae));
    font-weight: 400;

    &::before {
      content: '';
      display: inline-block;
      width: calc(5 var(--w-formulae));
      height: calc(5 var(--w-formulae));
      border-radius: 50%;
      vertical-align: middle;
      margin-right: calc(10 var(--w-formulae));
    }
  }
}

.biz-inner .lead {
  font-size: calc(15 var(--w-formulae));
  font-feature-settings: "palt";
  letter-spacing: .08em;
  line-height: 2;
  flex: 0 1 calc(500 var(--w-formulae));
  text-align: justify;
  margin-top: calc(39 var(--w-formulae));
  margin-left: calc(80 var(--w-formulae));

  @media (width < 1200px) {
    flex: 0 1 auto;
    margin-top: 45px;
    margin-left: 0;
  }
}


.biz-1 {
  display: block;
  width: 100%;
  max-width: calc(100% - calc(120 var(--w-formulae)));
  padding-top: 106px;
  padding-bottom: 150px;
  background-color: var(--color3);
  border-radius: 0 30px 30px 0;
  position: relative;

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

  & .biz-wrapper {
    padding: 0 calc(141 var(--w-formulae)) 0 calc(140 var(--w-formulae));
    position: relative;

    &::before {
      content: '';
      display: block;
      width: 10px;
      height: 100%;
      background-color: var(--biz-color1);
      border-radius: 0 10px 10px 0;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  & .biz-inner {
    max-width: calc(999 var(--w-formulae));
    margin: 0 auto;
  }
  
  & .label {
    color: var(--biz-color1)
  }
  & .ttl-set {
    color: var(--biz-color1);

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


.bttns-area {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(305 var(--w-formulae)), 1fr));
  justify-content: center;
  column-gap: calc(42 var(--w-formulae));
  row-gap: calc(90 var(--w-formulae));
  width: 100%;

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

    & .label {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: calc(90 var(--w-formulae));
      text-align: center;
      font-size: calc(15 var(--w-formulae));
      font-weight: 500;
      line-height: 1.3333333333333333;
      letter-spacing: .12em
    }

    & .des {
      display: block;
      font-size: calc(14 var(--w-formulae));
      letter-spacing: .08em;
      line-height: 2;
      text-align: justify;
      min-height: 10em;

      & .fill {
        letter-spacing: .02em;
      }
    }

    & .img-box {
      display: block;
      border-radius: 20px;
      width: 100%;
      height: calc(210 var(--w-formulae));
      overflow: hidden;
      background-color: gray;
    }
  }
  & .biz-cat.no-photo {
    grid-column-end: span 2;
    display: flex;
    align-items: center;
    height: calc(210 var(--w-formulae));

    & dl {
      display: block;
      width: 100%;
      padding: calc(13 var(--w-formulae)) calc(36 var(--w-formulae)) calc(36 var(--w-formulae));
      background-color: #f3f3f5;
      border-radius: 20px;

      & .label {
        height: calc(64 var(--w-formulae));
        justify-content: flex-start;
      }

      & .des {
        min-height: auto;
      }
    }
  }
}
.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(28 var(--w-formulae));
  padding-top: calc(28 var(--w-formulae));

  & dt {
    font-size: calc(15 var(--w-formulae));
    letter-spacing: .012em;
    text-align: center;
    margin-bottom: calc(28 var(--w-formulae));
  }
  & .person-link-list {
    display: flex;
    justify-content: center;
    column-gap: calc(5 var(--w-formulae));
    row-gap: calc(20 var(--w-formulae));
    flex-wrap: wrap;
    margin: 0 calc(-3 var(--w-formulae));

    & li {
      flex: 0 0 calc(100 var(--w-formulae));
      text-align: center;

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

        & .portrait {
          display: inline-block;
          width: calc(100 var(--w-formulae));
          height: calc(100 var(--w-formulae));
          overflow: hidden;
          border-radius: 50%;
          border: calc(3 var(--w-formulae)) solid transparent;
        }
        & .ttl, 
        & .date {
          font-size: calc(12 var(--w-formulae));
          line-height: 1.25;
        }
        & .date {
          color: #000;
        }
      }
    }
  }
}

@media (hover) {
  .persons .person-link-list a .portrait {
    transition: border-color .3s ease;
  }
  .biz-1 .persons .person-link-list a:hover .portrait {
    border-color: var(--biz-color1)
  }
  .biz-2 .persons .person-link-list a:hover .portrait {
    border-color: var(--biz-color2)
  }
  .biz-3 .persons .person-link-list a:hover .portrait {
    border-color: var(--biz-color3)
  }
}



.second-sec {
  display: block;
  background-color: var(--color3);
}
.biz-2 {
  display: block;
  width: 100%;
  max-width: calc(100% - calc(120 var(--w-formulae)));
  margin-left: calc(120 var(--w-formulae));
  padding-top: 106px;
  padding-bottom: 120px;
  background-color: #fff;
  border-radius: 30px 0 0 30px;
  position: relative;

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

  & .biz-wrapper {
    padding: 0 calc(120 var(--w-formulae)) 0;
    position: relative;

    &::before {
      content: '';
      display: block;
      width: 10px;
      height: 100%;
      background-color: var(--biz-color2);
      border-radius: 10px 0 0 10px;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  & .biz-inner {
    max-width: calc(999 var(--w-formulae));
    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: 100%;
  max-width: calc(100% - calc(240 var(--w-formulae)));
  padding-top: 106px;
  background-color: var(--color3);
  border-radius: 0 30px 30px 0;
  position: relative;


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

  & .biz-wrapper {
    padding: 0 calc(120 var(--w-formulae)) calc(150 var(--w-formulae));
    position: relative;

    &::before {
      content: '';
      display: block;
      width: 10px;
      height: 100%;
      background-color: var(--biz-color3);
      border-radius: 0 10px 0 0;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  & .biz-inner {
    max-width: calc(898 var(--w-formulae));
    margin: 0 auto;

    & .txt-area {
      margin-bottom: calc(110 var(--w-formulae));
    }

    & .bttns-area {
      max-width: calc(742 var(--w-formulae));
      grid-template-columns: repeat(auto-fill, minmax(calc(305 var(--w-formulae)), 1fr));
      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(190 var(--w-formulae));

}

.more.contents-bttn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(180 var(--w-formulae));
  width: calc(100% - calc(120 var(--w-formulae)));
  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: 18px 18px;
  border-radius: 0 30px 30px 0;
  overflow: hidden;
  position: relative;

  @media (width <= 1200px) {
    width: calc(100% - 20px);
  }

  &::after {
    position: absolute;
    right: 78px;
    content: '';
    display: block;
    width: calc(38 var(--w-formulae));
    height: calc(38 var(--w-formulae));
    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(26 var(--w-formulae));
    font-weight: 700;
    font-feature-settings: "palt";
    letter-spacing: .08em;
    line-height: 1;

    &::before {
      content: '';
      display: inline-block;
      width: calc(60 var(--w-formulae));
      height: 1px;
      background-color: #fff;
      margin-right: calc(15 var(--w-formulae));
      vertical-align: middle;

    }
  }
}
@media (hover: hover) {
  .more.contents-bttn {
    transition: .3s ease;

    &::after {
      transition: background-color .3s ease
    }
    & .jp::before {
      transition: background-color .3s ease
    }
  }
  .more.contents-bttn:hover {
    color: var(--color1);
    background-color: rgba(10, 67, 123, .2);
    background-image: linear-gradient(rgba(255, 255, 255, .25) 1px, transparent 0), linear-gradient(90deg, rgba(255, 255, 255, .25) 1px, transparent 0);
  
    &::after {
      background-color: var(--color1);
      background-image: url(/recruit/newgraduates/shared/images/bttn-popup_wht.svg);
    }
    & .jp::before {
      background-color: var(--color1);
    }
  }
}


.extra-recommended-area {
  display: block;
  width: 100%;
  padding: 0 40px;
  margin: 0 auto calc(50 var(--w-formulae));
  position: relative;

  & .recomme-ttl {
    display: inline-flex;
    flex-direction: column-reverse;
    padding-bottom: calc(30 var(--w-formulae));
    padding-left: calc(30 var(--w-formulae));

    & .jp {
      font-size: calc(34 var(--w-formulae));
      font-weight: 700;
      letter-spacing: .03em;
    }
    & .en {
      font-size: calc(16 var(--w-formulae));
      letter-spacing: .08em;
      margin-bottom: calc(18 var(--w-formulae));

      &::before {
        content: '';
        display: inline-block;
        width: calc(5 var(--w-formulae));
        height: calc(5 var(--w-formulae));
        border-radius: 50%;
        vertical-align: middle;
        margin-right: calc(10 var(--w-formulae));
        background-color: #000
      }
    }
  }

  & .next-contents-list {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: calc(460 var(--w-formulae));
    border-radius: calc(30 var(--w-formulae));
    overflow: hidden;

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

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

      & a {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: calc(50 var(--w-formulae)) calc(35 var(--w-formulae)) calc(40 var(--w-formulae));
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        background-color: rgba(0, 0, 0, .48);

        & .num {
          display: block;
          height: calc(50 var(--w-formulae));

          & img {
            height: 100%;
            width: auto;
          }
        }
        & .jp {
          display: inline-block;
          font-size: calc(28 var(--w-formulae));
          font-weight: 700;
          font-feature-settings: "palt";
          letter-spacing: .1em;
          line-height: 1.4285714285714286;
        }
      }
    }
  }
}
@media (hover: hover) {
  .next-contents-list li a {
    transition: background-color .3s ease;

    &:hover {
      background-color: rgba(0, 0, 0, .25)
    }
  }
  .next-contents-list li .image-box img {
    transform: scale(1);
    transition: transform .3s ease;
  }
  .next-contents-list li:hover .image-box img {
    transform: scale(1.1)
  }
}