@charset "utf-8";
/* common style
-------------------------------------------------------------- */
.svTtl {
  padding-top: 10rem;
}

/* btn */
.btnMore.faq a {
  max-width: 398px;
  aspect-ratio: 398 / 60;
}

.btnMore.pdf a,
.btnMore.excel a {
  width: 300px;
}

.btnMore.pdf a span,
.btnMore.excel a span {
  position: relative;
  padding:  0 2rem 0 3.6rem;
}

.btnMore.pdf a span::before,
.btnMore.excel a span::before {
  position: absolute;
  top: 0;
  left: 1rem;
  bottom: 0;
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  content: "";
}

.btnMore.pdf a span::before {
  -webkit-mask: url(../img/common/ico_pdf.svg) no-repeat center / contain;
  mask: url(../img/common/ico_pdf.svg) no-repeat center / contain;
}

.btnMore.excel a span::before {
  -webkit-mask: url(../img/common/ico_excel.svg) no-repeat center / contain;
  mask: url(../img/common/ico_excel.svg) no-repeat center / contain;
  content: "";
}

.btnMore.pdf a::after,
.btnMore.excel a::after {
  right: 2.5rem;
  width: 1.7rem;
  height: 1.7rem;
  -webkit-mask: url(../img/common/ico_doc_wh.svg) no-repeat center / contain;
  mask: url(../img/common/ico_doc_wh.svg) no-repeat center / contain;
}

.btnMore.ex a {
  width: 230px;
  aspect-ratio: 230 / 40;
}

.btnMore.ex a span {
  position: relative;
  padding:  0 2rem 0 3.6rem;
  font-size: 1.4rem;
  font-weight: 400;
}

.btnMore.ex a span::before {
  position: absolute;
  top: 0;
  left: 1rem;
  bottom: 0;
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask: url(../img/common/ico_pdf.svg) no-repeat center / contain;
  mask: url(../img/common/ico_pdf.svg) no-repeat center / contain;
  content: "";
}

@media (width <= 767px) {
  .btnMore.faq a {
    max-width: 300px;
    aspect-ratio: 300 / 60;
  }

  .btnMore.faq a span {
    font-size: 1.5rem;
  }

  .btnMore.excel {
    margin-bottom: 1.5rem;
  }

  .btnMore.ex a {
    width: 260px;
    aspect-ratio: 260 / 48;
  }

  .btnMore a::after {
    width: 17px;
  }

}

/* download
-------------------------------------------------------------- */
.anchorLayout {
  margin-top: 5rem;
  gap: 6rem;
}

.anchorNav {
  padding-left: 7.5rem;
  width: 33rem;
}

.anchorNav ul {
  padding: 1rem 0 5rem;
}

.pointSection--bg {
  margin-left: calc(-1 * 39rem);
  width: calc(100% + 39rem);
  padding-left: 39rem !important;
}

.download .pointSection {
  position: relative;
  padding: 15rem 7rem 15rem 0;
}

.download .pointSection:first-of-type {
  padding: 0 7rem 15rem 0;
}

.download .pointSection h2 {
  margin-bottom: 5rem;
  color: #000;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.4;
}

.download .pointSection .txtLead {
  color: #000;
  font-size: 1.8rem;
}

.download .pointSection h3 {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 2rem;
  color: var(--black);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
}

.download .pointSection h3::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-color: var(--green);
  width: 3px;
  height: 20px;
  content: "";
}

.download .pointSection .btnWrap {
  margin-top: 4rem;
  gap: 4rem 2rem;
  max-width: calc(600px + 2rem);
}

.download .pointSection.pointSection--bg .btnWrap  {
  margin: 4rem 0 6.5rem;
}

.download .pointSection.pointSection--bg .faq {
  margin-top: 3rem;
}

@media (width <= 1200px) {
  .anchorLayout {
    margin-top: 15rem;
    gap: 4rem;
  }
  
  .anchorNav {
    padding-left: 5rem;
    width: 28rem;
  }
  
  .anchorNav ul {
    padding: 2.4rem 0 5rem;
  }

  .anchorNav li {
    font-size: 1.4rem;
  }
  
  .pointSection--bg {
    margin-left: calc(-1 * 32rem);
    width: calc(100% + 32rem);
    padding-left: 32rem !important;
  }
  
  .download .pointSection {
    padding: 12rem 5rem 12rem 0;
  }
  
  .download .pointSection:first-of-type {
    padding: 0 5rem 12rem 0;
  }
}

@media (width <= 960px) {
  .anchorLayout {
    margin-top: 15rem;
    gap: 3rem;
  }
  
  .anchorNav {
    padding-left: 3rem;
    width: 22rem;
  }
  
  .anchorNav ul {
    padding: 2.4rem 0 5rem;
  }

  .anchorNav li {
    padding-left: 2rem;
    font-size: 1.2rem;
  }

  .anchorNav li a::before {
    width: 8px;
    height: 8px;
  }
  
  .pointSection--bg {
    margin-left: calc(-1 * 28rem);
    width: calc(100% + 28rem);
    padding-left: 28rem !important;
  }
  
  .download .pointSection {
    padding: 10rem 3rem 10rem 0;
  }
  
  .download .pointSection:first-of-type {
    padding: 0 3rem 10rem 0;
  }

  .download .pointSection .btnWrap {
    gap: 3rem 2rem;
  }


  .download .pointSection h2 {
    font-size: 2.8rem;
  }
  
  .download .pointSection h3 {
    font-size: 2.2rem;
  }

  .download .pointSection .txtLead {
    font-size: 1.6rem;
  }
}

@media (width <= 767px) {
  .anchorLayout {
    margin-top: 2rem;
  }
  .anchorNav {
    padding-left: 0;
    margin: auto;
    width: 25rem;
  }
  
  .anchorNav ul {
    padding: 2.4rem 0 5rem;
  }

  .anchorNav li {
    padding-left: 2rem;
    margin-bottom: 2rem;
    font-size: 1.6rem;
  }

  .anchorNav li a::before {
    width: 10px;
    height: 10px;
  }

  .pointSection--bg {
    margin-left: 0;
    width: 100%;
    padding: 8rem 5%!important;
  }

  .download .pointSection {
    padding: 8rem 5%;
  }

  .download .pointSection:first-of-type {
    padding: 0 5% 8rem;
  }

  .download .pointSection .btnWrap {
    justify-content: center;
    gap: 2rem;
    margin: 3rem auto 0;
    max-width: 300px;
  }

  .download .pointSection.pointSection--bg .btnWrap {
    margin: 3rem auto 5rem;
  }

  .download .pointSection .txtLead {
    font-size: 1.8rem;
  }
}