@charset "UTF-8";

/*
	##### DNP RECRUITING #####
	/recruit/newgraduates/faq/css/faq_pc.css
*/


/* --------------------------------------------------
RECRUIT
-------------------------------------------------- */

.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(120 var(--w-formulae));

  & .topic-path {
    margin-left: calc(30 var(--w-formulae));
    margin-bottom: calc(15 var(--w-formulae));
  }
}

.faq-area {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto calc(210 var(--w-formulae));
  column-gap: calc(50 var(--w-formulae));
  background-color: var(--color3);
  position: relative;

  &::before,
  &::after {
    content: '';
    display: block;
    height: 61px;
    width: calc(310px + (50vw - 700px));
    border-radius: 0 30px 0 0;
    position: absolute;
    left: 0;
  }
  &::before {
    background-color: var(--color3);
    top: -60px;
  }
  &::after {
    background-color: #fff;
    left: 0;
    bottom: -1px;
  }

  & .side-menu-area {
    display: block;
    flex: 0 0 calc(280px + (50vw - 700px));
  }
  & .right-side {
    display: block flow-root;
    flex: 1 0 calc(1070px + (50vw - 700px));
    overflow: hidden;
    padding-bottom: 150px;
  }
}

.faq-set::after,
.faq-set::before {
  content: '';
  display: block;
  width: calc(1090px + (50vw - 700px));
  height: 40px;
  border-radius: 0 0 0 30px;
  position: absolute;
  right: 0;
}
.faq-set::before {
  background-color: #fff;
  top: -10px;
}
.faq-set::after {
  background-color: var(--color3);
  bottom: -30px;
}

@media (width < 1400px) {
  .faq-area .side-menu-area {
    flex-basis: calc(280 var(--w-formulae));
  }
  .faq-area .right-side {
    flex-basis: auto;
  }
  .faq-area::before,
  .faq-area::after {
    width: calc(310 / 1400 * 100vw);
  }
  .faq-set::before,
  .faq-set::after {
    width: calc(100% - 22.142857142857142vw);
  }
}
@media (width < 1200px) {
  .faq-area {
    column-gap: 30px;
  }
  .faq-area .side-menu-area {
    flex-basis: 270px;
  }
  .faq-area .right-side {
    flex-basis: calc(100% - 300px);
  }
  .faq-area::before,
  .faq-area::after {
    width: 266px;
  }
  .faq-set::before,
  .faq-set::after {
    width: calc(100% - 266px);
  }
}


.anchor-links {
  position: sticky;
  top: 120px;
  float: right;
  margin-bottom: 190px;
  padding-top: 25px;
  min-width: 240px;


  @media (width < 1400px) {
    min-width: calc(240 var(--w-formulae))
  }

  & h4 {
    display: inline-block;
    height: 25px;
    padding: 0 1em;
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: .08em;
    background-color: gray;
    color: #fff;
    border-radius: 100px;
    margin-bottom: 40px;

    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: currentColor;
      vertical-align: middle;
      margin-right: 7px;
    }
  }
  & li {
    min-width: 158px;
    margin-bottom: 1em;

    & a {
      display: inline-block;
      font-feature-settings: "palt";
      font-size: calc(13 var(--w-formulae));
      font-weight: 700;
      letter-spacing: .05em;
      line-height: 1.5384615384615385;
      color: currentColor;
      padding-left: 22px;
      text-indent: -22px;
      transition: color .3s ease;


      &::before {
        content: '';
        display: inline-block;
        height: 1px;
        width: 12px;
        background-color: currentColor;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
  }
}
@media (hover: hover) {
  .anchor-links li a {
    opacity: 1;
    transition: opacity .3s ease;

    &:hover {
      opacity: .4;
    }
  }
}

.faq-area .anchor-links li a.current {
  color: var(--pro-color1);
  transition: color .3s ease;
}


.faq-area .anchor-links h4 {
  background-color: var(--pro-color1);
}


.faq-set-inner {
  width: calc(100% - 30px);
  margin-top: calc(120 var(--w-formulae));
  margin-left: auto;
  margin-right: 0;
  padding: calc(80 var(--w-formulae)) calc(65 var(--w-formulae)) calc(170 var(--w-formulae));
  background-color: #fff;
  border-radius: 30px 0 0 30px;
}

.category + .category {
  margin-top: calc(50 var(--w-formulae));
}
.category .inner {
  width: 100%;
  max-width: 840px;
  margin: 0 auto 0 calc(45 var(--w-formulae));
}
@media (width < 1400px) {
  .category .inner {
    max-width: calc(840 / 1400 * 100vw);
    margin: 0 auto 0 calc(45 / 1400 * 100vw);
  }
}

@media (width < 1200px) {
  .category .inner {
    margin-left: 0;
  }
}

.category-name {
  font-size: calc(24 var(--w-formulae));
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--pro-color1);
  padding-top: calc(50 var(--w-formulae));
  margin-bottom: calc(30 var(--w-formulae));
}

.cat-list-set,
.cat-list {
  display: block;
  width: 100%;
}
.cat-list-set {
  max-width: 840px;
  border-top: #acabab 1px solid;
}
.cat-list {
  border-bottom: #acabab 1px solid;
}
.acc-trigger-case {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(90 var(--w-formulae));
  padding: 1.75em calc(100 var(--w-formulae)) 1.75em calc(25 var(--w-formulae));
  position: relative;
  cursor: pointer;

  & .cat-ttl {
    display: inline-flex;
    align-items: first baseline;
    font-size: calc(15 var(--w-formulae));
    font-weight: 500;
    line-height: 2;
    color: currentColor;

    &::before {
      display: inline-block;
      content: 'Q';
      font-family: "Mulish", sans-serif;
      font-size: calc(30 var(--w-formulae));
      font-weight: 700;
      line-height: 0;
      margin-right: calc(25 var(--w-formulae));
      vertical-align: baseline;
      color: var(--pro-color1);
    }
  }

  & button {
    display: block;
    width: calc(30 var(--w-formulae));
    height: calc(30 var(--w-formulae));
    border-radius: 50%;
    background: var(--color3) url(/recruit/newgraduates/faq/images/ico-plus.svg) no-repeat center / cover;
    position: absolute;
    right: calc(18 var(--w-formulae));
    top: 50%;
    transform: translateY(-50%)
  }
  &.is-open button {
    background-image: url(/recruit/newgraduates/faq/images/ico-minus.svg);
  }
}
.detail-area {
  display: none;
  width: 100%;
  background-color: #fafafa;
}
.detail-txt {
  display: inline-flex;
  align-items: first baseline;
  padding: 1.5em calc(100 var(--w-formulae)) 1.5em calc(25 var(--w-formulae));
  font-size: calc(15 var(--w-formulae));
  font-weight: 500;
  line-height: 2;
  color: currentColor;

  &.detail-inner {
    display: inline-block;
  }

  &::before {
    display: inline-block;
    content: 'A';
    font-family: "Mulish", sans-serif;
    font-size: calc(30 var(--w-formulae));
    font-weight: 700;
    margin-right: calc(25 var(--w-formulae));
    vertical-align: baseline;
    color: var(--pro-color1);
  }
  & .note {
    line-height: 1.75;
    padding-left: 1em;
    text-indent: -1em;
  }

  & a {
    color: currentColor;
    text-decoration: underline;
    text-underline-offset: calc(5 var(--w-formulae));
  }
  & a.popup {
    padding-right: .5em;
  }
}
@media (hover) {
  .detail-txt a  {
    opacity: 1;
    transition: opacity .3s ease
  }
  .detail-txt a:hover {
    opacity: .5;
  }
}