@charset "utf-8";
/********************
事業領域用CSS
  /business/
 ********************/

 .business-pageHeader {
  width: 100%;
  background-color: #FFF;
  & > div {
    position: relative;
    width: 100%;
    max-width: 1360px;
    height: min(26.87vw,367px);
    margin-inline: auto;
    padding-inline: 60px;
  }
  & hgroup {
    position: absolute;
    top: 50%;
    left: 60px;
    translate: 0 -50%;
  }
}
@media (width <= 760px) {
  .business-pageHeader {
    & > div {
      height: auto;
      aspect-ratio: 375/153;
      padding-inline: 2.67vw;
    }
    & hgroup {
      left: 2.67vw;
    }
  }
}

.business-pageHeader_ttl {
  position: relative;
  display: block;
  padding-inline-start: min(4.83vw,66px);
  line-height: 0;
  & span {
    display: inline-block;
    width: min(42.31vw,578px);
    height: auto;
    aspect-ratio: 578/57;
    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      translate: 0 -50%;
      display: block;
      width: min(3.29vw,45px);
      height: auto;
      aspect-ratio: 45/18;
      background: url(../img/business/img_business_mark.webp) no-repeat center/cover;
      content: "";
    }
  }
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .business-pageHeader_ttl {
    padding-inline-start: 8.8vw;
    & span {
      width: 77.33vw;
      &::before {
        width: 6.13vw;
      }
    }
  }
}

.business-pageHeader_jp {
  margin-block-start: min(1.1vw,15px);
  padding-inline-start: min(4.83vw,66px);
  color: var(--txt-black-color);
  font-size: min(1.76vw,24px);
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media (width <= 760px) {
  .business-pageHeader_jp {
    margin-block-start: 2.67vw;
    padding-inline-start: 8.8vw;
    font-size: 4.8vw;
  }
}

.business-pageHeadrImg {
  position: relative;
  width: 100%;
  height: min(14.35vw,196px);
  &::before {
    position: fixed;
    top: 70px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 1366/563;
    background: url(../img/business/img_business_bg.webp) no-repeat center bottom/cover;
    content: "";
  }
}
@media (width <= 1000px) {
  .business-pageHeadrImg {
    &::before {
      top: 7vw;
    }
  }
}
@media (width <= 760px) {
  .business-pageHeadrImg {
    &::before {
      top: 16vw;
      height: 55.7333vw;
    }
  }
}

.business-section {
  padding-block-end: min(10.98vw,150px);
  background-color: #FFF;
  &:first-of-type {
    padding-block-start: min(7.32vw,100px);
  }
}
@media (width <= 760px) {
  .business-section {
    padding-block-end: 21.33vw;
    &:first-of-type {
      padding-block-start: 16vw;
    }
  }
}

.business-section_linkWrap {
  margin-block-start: min(3.29vw,45px);
  text-align: right;
}
@media (width <= 760px) {
  .business-section_linkWrap {
    margin-block-start: 10.67vw;
    text-align: center;
  }
}

.business-section_link {
  display: inline-block;
  padding-block: min(0.88vw,12px);
  padding-inline: min(3.37vw,46px);
  border-radius: 9999px;
  background-color: #F4F7F8;
  font-size: min(1.02vw,14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  & span {
    position: relative;
    padding-inline-end: min(1.98vw,27px);
    &::before, &::after {
      position: absolute;
      top: calc(50% + 1px);
      right: 0;
      translate: 0 -50%;
      display: block;
      width: min(1.46vw,20px);
      height: auto;
      aspect-ratio: 1;
      content: "";
    }
    &::before {
      border-radius: 50%;
      background-color: #2B4E76;
      transition: background 0.3s ease-out;
    }
    &::after {
      background: #FFF;
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: background 0.3s ease-out, mask 0.3s ease-out;
    }
  }
}
@media (width <= 760px) {
  .business-section_link {
    padding-block: 3.2vw;
    padding-inline: 12.27vw;
    font-size: 3.73vw;
    & span {
      padding-inline-end: 7.2vw;
      &::before, &::after {
        width: 5.33vw;
      }
    }
  }
}
@media (hover: hover) {
  .business-section_link:hover {
    & span {
      &::before {
        background-color: var(--hover-color);
      }
      &::after {
        mask-position: 0 0;
      }
    }
  }
}

.business-heading2 {
  position: relative;
  margin-block-end: min(1.83vw,25px);
  padding-block-end: min(0.44vw,6px);
  color: #173055;
  font-size: min(3.81vw,52px);
  font-weight: 600;
  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,#036EB8 0%, #036EB8 30px, #E0E0E0 30px, #E0E0E0 100%);
    content: "";
  }
}
@media (width <= 760px) {
  .business-heading2 {
    margin-block-end: 6.67vw;
    padding-block-end: 1.6vw;
    font-size: 9.07vw;
  }
}

.business-lead {
  font-size: min(1.46vw,20px);
  letter-spacing: 0.01em;
}
@media (width <= 760px) {
  .business-lead {
    font-size: 4.8vw;
  }
}

.business-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: min(5.86vw,80px);
  background-color: #F4F7F8;
}
@media (width <= 760px) {
  .business-tabs {
    margin-block-start: 16vw;
  }
}

.business-tabs_input {
  display: none;
}

.business-tabs_btn {
  display: inline-block;
  padding-block: min(1.02vw,14px);
  padding-inline: min(1.83vw,25px);
  color: #707070;
  font-size: min(1.17vw,16px);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  .business-tabs_input:checked + &  {
    background-color: #2B4E76;
    color: #FFF;
  }
}
@media (width <= 760px) {
  .business-tabs_btn {
    width: 50%;
    padding-block: 3.73vw;
    padding-inline: 6.67vw;
    font-size: 4.27vw;
    text-align: center;
  }
}

.business-tabs_contents {
  display: none;
  width: 100%;
  padding-block-start: min(3.66vw,50px);
  background-color: #FFF;
}
@media (width <= 760px) {
  .business-tabs_contents {
    padding-block-start: 13.33vw;
  }
}

#tab-1:checked ~ #contents-1,#tab-2:checked ~ #contents-2,#tab-3:checked ~ #contents-3,#tab-4:checked ~ #contents-4 {
  display: block;
}

.business-tab {
  display: grid;
  justify-content: space-between;
  #contents-1 & {
    grid-template-columns: min(51.98vw,710px) min(32.94vw,450px);
  }
  #contents-2 & {
    grid-template-columns: min(60.76vw,830px) min(25.7vw,351px);
  }
  #contents-3 & {
    grid-template-columns: min(54.17vw,740px) min(31.26vw,427px);
  }
  #contents-4 & {
    grid-template-columns: min(54.17vw,740px) min(28.4vw,388px);
  }
}
@media (width <= 760px) {
  .business-tab {
    gap: 18.67vw 0;
    #contents-1 &,#contents-2 &,#contents-3 &,#contents-4 & {
      grid-template-columns: 100%;
    }
  }
}

.business-tab_ttl {
  color: var(--txt-black-color);
  font-size: min(2.64vw,36px);
  font-weight: 600;
}
@media (width <= 760px) {
  .business-tab_ttl {
    font-size: 6.93vw;
  }
}

.business-tab_txt {
  margin-block-start: min(2.56vw,35px);
  font-size: min(1.17vw,16px);
  line-height: 1.81;
}
@media (width <= 760px) {
  .business-tab_txt {
    margin-block-start: 9.33vw;
    font-size: 4.27vw;
  }
}

.business-caseBox {
  display: grid;
  gap: 0 min(2.2vw,30px);
  grid-template-columns: min(5.05vw,69px) minmax(0,1fr);
  margin-block-start: min(2.93vw,40px);
}
@media (width <= 760px) {
  .business-caseBox {
    grid-template-columns: 100%;
    margin-block-start: 8vw;
  }
}

.business-caseBox_img {
  width: 100%;
  height: auto;
  aspect-ratio: 69/85;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .business-caseBox_img {
    width: 18.4vw;
    margin-inline: auto;
  }
}

.business-case {
  padding-inline-start: min(2.2vw,30px);
  border-inline-start: 1px solid var(--hover-color);
}
@media (width <= 760px) {
  .business-case {
    margin-block-start: 5.33vw;
    padding-block-start: 5.33vw;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--hover-color);
    border-inline-start: none;
  }
}

.business-case_ttl {
  color: #2B4E76;
  font-size: min(1.39vw,19px);
  font-weight: 500;
  letter-spacing: 0.02em;
}
@media (width <= 760px) {
  .business-case_ttl {
    font-size: 5.07vw;
  }
}

.business-case_txt {
  margin-block-start: min(0.73vw,10px);
  font-size: min(1.1vw,15px);
  letter-spacing: -0.015em;
  line-height: 1.8;
}
@media (width <= 760px) {
  .business-case_txt {
    margin-block-start: 2.67vw;
    font-size: 4vw;
  }
}

.business-solutionBox {
  display: grid;
  gap: 0 min(2.2vw,30px);
  grid-template-columns: min(5.05vw,69px) minmax(0,1fr);
  margin-block-start: min(2.93vw,40px);
}
@media (width <= 760px) {
  .business-solutionBox {
    grid-template-columns: 100%;
    margin-block-start: 10.67vw;
  }
}

.business-solutionBox_txt {
  align-self: center;
  color: #2B4E76;
  font-size: min(0.95vw,13px);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}
@media (width <= 760px) {
  .business-solutionBox_txt {
    /* font-size: 3.47vw; */
    font-size: 4vw;
  }
}

.business-solution {
  padding-inline-start: min(2.2vw,30px);
  border-inline-start: 1px solid var(--hover-color);
}
@media (width <= 760px) {
  .business-solution {
    margin-block-start: 5.33vw;
    padding-block-start: 5.33vw;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--hover-color);
    border-inline-start: none;
  }
}

.business-solution_link {
  font-size: min(1.39vw,19px);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  & span {
    position: relative;
    padding-inline-end: min(1.98vw,27px);
    &::before, &::after {
      position: absolute;
      top: calc(50% + 1px);
      right: 0;
      translate: 0 -50%;
      display: block;
      width: min(1.46vw,20px);
      height: auto;
      aspect-ratio: 1;
      content: "";
    }
    &::before {
      border-radius: 50%;
      background-color: #2B4E76;
      transition: background 0.3s ease-out;
    }
    &::after {
      background: #FFF;
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: background 0.3s ease-out, mask 0.3s ease-out;
    }
  }
}
@media (width <= 760px) {
  .business-solution_link {
    font-size: 5.07vw;
    & span {
      padding-inline-end: 7.2vw;
      &::before, &::after {
        width: 5.33vw;
      }
    }
  }
}
@media (hover: hover) {
  .business-solution_link:hover {
    & span {
      &::before {
        background-color: var(--hover-color);
      }
      &::after {
        mask-position: 0 0;
      }
    }
  }
}

.business-solution_noLink {
  font-size: min(1.39vw,19px);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  }
}
@media (width <= 760px) {
  .business-solution_noLink {
    font-size: 5.07vw;
  }
}

.business-solution_txt {
  margin-block-start: min(0.73vw,10px);
  font-size: min(1.1vw,15px);
  letter-spacing: -0.015em;
  line-height: 1.8;
}
@media (width <= 760px) {
  .business-solution_txt {
    margin-block-start: 2.67vw;
    font-size: 4vw;
  }
}

.business-tab_img {
  width: 100%;
  height: auto;
  /* & img {
    width: 100%;
    height: 100%;
  } */
  #contents-1 & {
    margin-block-start: min(1.46vw,20px);
  }
  #contents-2 & {
    margin-block-start: min(3.29vw,45px);
  }
  #contents-3 & {
    margin-block-start: min(2.65vw,36px);
  }
  #contents-4 & {
    margin-block-start: min(2.2vw,30px);
  }
}
@media (width <= 760px) {
  .business-tab_img {
    #contents-1 &, #contents-2 &, #contents-3 &, #contents-4 & {
      margin-block-start: 0;
    }
    & img {
      width: 100%;
      height: auto;
    }
  }
}

.business-tabs_linkWrap {
  text-align: right;
}
@media (width <= 760px) {
  .business-tabs_linkWrap {
    margin-block-start: 10.67vw;
    text-align: center;
  }
}

.business-tabs_link {
  display: inline-block;
  padding-block: min(0.88vw,12px);
  padding-inline: min(3.37vw,46px);
  border-radius: 9999px;
  background-color: #F4F7F8;
  font-size: min(1.02vw,14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  & span {
    position: relative;
    padding-inline-end: min(1.98vw,27px);
    &::before, &::after {
      position: absolute;
      top: calc(50% + 1px);
      right: 0;
      translate: 0 -50%;
      display: block;
      width: min(1.46vw,20px);
      height: auto;
      aspect-ratio: 1;
      content: "";
    }
    &::before {
      border-radius: 50%;
      background-color: #2B4E76;
      transition: background 0.3s ease-out;
    }
    &::after {
      background: #FFF;
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: background 0.3s ease-out, mask 0.3s ease-out;
    }
  }
}
@media (width <= 760px) {
  .business-tabs_link {
    padding-block: 3.2vw;
    padding-inline: 12.27vw;
    font-size: 3.73vw;
    & span {
      padding-inline-end: 7.2vw;
      &::before, &::after {
        width: 5.33vw;
      }
    }
  }
}
@media (hover: hover) {
  .business-tabs_link:hover {
    & span {
      &::before {
        background-color: var(--hover-color);
      }
      &::after {
        mask-position: 0 0;
      }
    }
  }
}

.business-pickupBox {
  margin-block-start: min(4.39vw,60px);
  padding-block: min(4.39vw,60px);
  padding-inline: min(3.66vw,50px);
  border-radius: min(0.59vw,8px);
  background-color: #F4F7F8;
}
@media (width <= 760px) {
  .business-pickupBox {
    margin-block-start: 10.67vw;
    padding-block: 8vw;
    padding-inline: 5.33vw;
    border-radius: 2.13vw;
  }
}

.business-pickupBox_ttl {
  position: relative;
  padding-block-end: 3px;
  padding-inline-start: min(2.64vw,36px);
  border-bottom: 2px solid #E0E0E0;
  color: var(--txt-black-color);
  font-size: min(1.76vw,24px);
  font-weight: 600;
  letter-spacing: 0.03em;
  &::before {
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    display: block;
    width: min(1.9vw,26px);
    height: auto;
    aspect-ratio: 1;
    background: url(/cms/wp-content/themes/ndc/assets/img/common/icn_relation.svg) no-repeat center/cover;
    content: "";
  }
}
@media (width <= 760px) {
  .business-pickupBox_ttl {
    padding-inline-start: 9.6vw;
    padding-block-end: 1.6vw;
    font-size: 5.87vw;
    &::before {
      top: 0.85em;
      width: 6.93vw;
      font-size: 6.4vw;
    }
  }
}

.business-pickupWrap {
  margin-block-start: min(4.39vw,60px);
  & ul {
    display: grid;
    gap: 0 min(2.93vw,40px);
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (width <= 760px) {
  .business-pickupWrap {
    margin-block-start: 10.67vw;
    & ul {
      gap: 10.67vw 0;
      grid-template-columns: 100%;
    }
  }
}

.business-pickup {
  display: block;
}

.business-pickup_img {
  width: 100%;
  height: auto;
  aspect-ratio: 550/230;
  border-radius: min(0.44vw,6px);
  overflow: hidden;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .business-pickup_img {
    border-radius: 1.6vw;
  }
}

.business-pickup_txt {
  margin-block-start: min(1.76vw,24px);
  font-size: min(1.39vw,19px);
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color 0.3s ease-out;
}
@media (width <= 760px) {
  .business-pickup_txt {
    margin-block-start: 4vw;
    font-size: 5.07vw;
    line-height: 1.6;
  }
}
@media (hover: hover) {
  .business-pickup:hover {
    & .business-pickup_txt {
      color: var(--hover-color);
    }
  }
}

.business-pickup_ttl {
  position: relative;
  display: inline-block;
  margin-block-start: min(0.29vw,4px);
  padding-inline-end: min(1.46vw,20px);
  font-size: min(1.17vw,16px);
  font-weight: 400;
  letter-spacing: 0.014em;
  transition: color 0.3s ease-out;
  &::after {
    position: absolute;
    top: calc(50% + 1px);
    right: 0;
    translate: 0 -50%;
    display: block;
    width: min(1.46vw,20px);
    height: auto;
    aspect-ratio: 6/8;
    background: #202020;
    mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
    transition: background 0.3s ease-out, mask 0.3s ease-out;
    content: "";
  }
}
@media (width <= 760px) {
  .business-pickup_ttl {
    margin-block-start: 1.07vw;
    padding-inline-end: 5.33vw;
    font-size: 4.27vw;
    &::after {
      width: 5.33vw;
    }
  }
}
@media (hover: hover) {
  .business-pickup:hover {
    & .business-pickup_ttl {
      color: var(--hover-color);
      &::after {
        background-color: var(--hover-color);
      }
    }
  }
}

.business-media {
  display: grid;
  gap: 0 min(5.12vw,70px);
  grid-template-columns: min(39.31vw,537px) minmax(0,1fr);
  margin-block-start: min(5.12vw,70px);
}
@media (width <= 760px) {
  .business-media {
    gap: 18.67vw 0;
    grid-template-columns: 100%;
    /* margin-block-start: 16vw; */
    margin-block-start: 10.67vw;
  }
}

.business-media_txt {
  font-size: min(1.17vw,16px);
  line-height: 1.81;
}
@media (width <= 760px) {
  .business-media_txt {
    font-size: 4.27vw;
  }
}

@media (width <= 760px) {
  .business-media_img {
    & img {
      width: 100%;
    }
  }
}

.business-media_img2 {
  margin-block-start: min(2.2vw,30px);
}
@media (width <= 760px) {
  .business-media_img2 {
    margin-block-start: 8vw;
    & img {
      width: 100%;
      height: auto;
    }
  }
}