.main-content{
  min-height: calc(100vh - 8.75vw);
}
.top-area{
  padding: 3.33vw 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.top-area img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;  
}
.top-area h1{
  position: absolute;
  top: 7.5vw;
  left: 50%;
  transform: translateX(-50%);
  color: #FFF;
  font-size: 2.08vw;
  font-weight: 700;
  width: 100%;
  text-align: center;
}
.top-area h2{
  position: absolute;
  top: 10.83vw;
  left: 50%;
  transform: translateX(-50%);
  color: #FFF;
  font-size: 0.833vw;
  width: 100%;
  text-align: center;
}

/* ===== Board Layout ===== */
.board {
  width: 100%;
  min-height: calc(100vh - 15.3125vw - 15.83vw);
}

/* Header row */
.board-head {
  display: flex;
  padding: 0.83vw 4.16vw;
  font-size: 0.833vw;
  font-weight: bold;
  line-height: 1;
  background: #F4F4F4;
  text-align: center;
}
.board-head .board-col--position{
  width: 37.7vw;
  margin-right: 7.08vw;
}
.board-head .board-col--role{
  width: 15.625VW;
  margin-right: 2.08vw;

}
.board-head .board-col--type{
  width: 7.4916VW;
  margin-right: 2.08vw;
}
.board-head .board-col--exp{
  width: 7.2916VW;
  margin-right: 2.08vw;
}
.board-head .board-col--period{
  width: 10.41vw;
}

.board-list {
  list-style: none;
  margin: 0;
  padding: 0 0 2.08vw;
}

.board-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  width: 100%;
}

.board-row {
  display: flex;
  padding: 1.25vw 4.16vw;
  text-align: left;
  cursor: pointer;
  width: 100%;
  background: white;
  gap: 2.08vw;
  align-items: center;
  transition: opacity 0.22s;
}

.board-row:hover {
  opacity: 0.8;
}

.board-row .board-col--state {
  width: 3.33vw;
  height: 1.665vw;
  padding: 0.416vw;
  font-size: 0.833vw;
  font-weight: bold;
  line-height: 1;
  color: white;
  border-radius: 0.26vw;
  opacity: 0.2;
  background: #000;
  text-align: center;
}
.board-row .board-col--state.active {
  opacity: 1;
  background: #E06E64;
}
.board-row .board-col--position {
  width: 37.29vw;
  font-size: 1.25vw;
  font-weight: bold;
  line-height: 1;
  text-align: left;
}
.board-row .board-col--role {
  width: 15.625vw;
  font-size: 0.833vw;
  line-height: 1;
  text-align: center;
}
.board-row .board-col--type {
  width: 7.29vw;
  font-size: 0.833vw;
  line-height: 1;
  text-align: center;
}
.board-row .board-col--exp {
  width: 7.29vw;
  font-size: 0.833vw;
  line-height: 1;
  text-align: center;
}
.board-row .board-col--period {
  width: 10.416vw;
  font-size: 0.833vw;
  line-height: 1;
  margin-right: unset;
  text-align: center;
}

.board-col {
  width: 15.625VW;
  /* margin-right: 2.08vw; */
}



/* Pagination */
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.83vw;
  margin-bottom: 5.2vw;
}

/* Prev/Next button (arrow only) */
.pagination__control{
  width: 1.25vw;
  height: 1.25vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.26vw;
  background: black;
  text-decoration: none;
  position: relative;
  transition: background-color 220ms, border-color 220ms, opacity 220ms;
  cursor: pointer;
}

/* Arrow icon */
.pagination__control::before{
  content: "";
  display: inline-block;
  width: 0.83vw;
  height: 0.83vw;
  background-color: white;       
  -webkit-mask: url('/img/icn_arrow_next.svg') no-repeat center;
  mask: url('/img/icn_arrow_next.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.25s ease-in-out, ;
  opacity: 1 !important;
}

/* Left arrow */
.pagination__control--prev::before{
  transform: rotate(180deg);
}

/* Hover */
.pagination__control:hover{
  background-color: grey;
}

/* Disabled (aria-disabled="true") */
.pagination__control[aria-disabled="true"]{
  opacity: 0.2;
  pointer-events: none;
  cursor: default;
}

/* List */
.pagination__list{
  display: inline-flex;
  align-items: center;
  gap: 0.83vw;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination__item{ margin: 0; }

/* Page link */
.pagination__link{
  font-size: 0.83vw;
  opacity: 0.4;
  transition: opacity 220ms, color 220ms;
  cursor: pointer;
  font-weight: bold;
}

.pagination__link:hover{
  opacity: 1;
}

/* Active page */
.pagination__link.is-active,
.pagination__link[aria-current="page"]{
  opacity: 1;
}





body.is-layer-open {
  overflow: hidden;
  position: fixed;
}

.portfolio-layer {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  z-index: 100000;
  background: white;
}

.portfolio-layer .close{
  position: absolute;
  left: 1.25vw;
  top: 4.58vw;
  width: 1.25vw;
  height: 1.25vw;
  z-index: 100001;
  cursor: pointer;
}
.portfolio-layer .close img{
  width: 100%;
  height: 100%;
} 

.portfolio-layer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.portfolio-layer__dialog {
  width: 100%;
  position: relative;
  max-width: 100vw;
  background: #fff;

  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 240ms ease, transform 240ms ease;
}

.portfolio-layer.is-open .portfolio-layer__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
  overflow-y: scroll;
}


.portfolio-layer__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
   min-height: calc(100vh - 15.3125vw);
  transition: opacity 220ms ease;
  opacity: 1;
}

.portfolio-layer__content.is-switching{
  opacity: 0;
}

.portfolio-layer .prev{
  font-size: 0.833vw;
  font-weight: bold;
  line-height: 140%;
  position: absolute;
  left: 4.16vw;
  top: 26.66vw;
  display: flex;
  align-items: center;
}
.portfolio-layer .prev::before{
  content: ""; 
  display: inline-block;
  width: 1.25vw;
  height: 1.25vw;
  background-color: black;       
  -webkit-mask: url('/img/icn_arrow_prev.svg') no-repeat center;
  mask: url('/img/icn_arrow_prev.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.25s ease-in-out;
  margin-right: 0.41vw;
  opacity: 1 !important;
}

.portfolio-layer .next{
  font-size: 0.833vw;
  font-weight: bold;
  line-height: 140%;
  position: absolute;
  right: 4.16vw;
  top: 26.66vw;
  display: flex;
  align-items: center;
}

.portfolio-layer .next::after{
  content: ""; 
  display: inline-block;
  width: 1.25vw;
  height: 1.25vw;
  background-color: black;       
  -webkit-mask: url('/img/icn_arrow_next.svg') no-repeat center;
  mask: url('/img/icn_arrow_next.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.25s ease-in-out;
  margin-left: 0.41vw;
  opacity: 1 !important;
}


.portfolio-layer__content{
  display: flex;
  flex-direction: column;
  gap: 2.08vw;
}

.portfolio-layer__content h3{
  font-size: 2.083vw;
  font-weight: 700;
  text-transform: uppercase;
  padding: 5.416vw 0 0;
}

.portfolio-layer__content .top-group{
  width: 62.5vw;
}

.portfolio-layer__content .top-group h4{
  display: flex;
  padding: 0.83vw;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: #F4F4F4;
  text-align: center;
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 140%; 
  margin-bottom: 2.08vw;
}

.portfolio-layer__content .top-group .description{
  font-size: 0.83vw;
  line-height: 140%;
}
.portfolio-layer__content .top-group .description .accent{
  font-weight: bold;
}

.portfolio-layer__content .line{
  width: 62.5vw;
  height: 1px;
  background: rgba(0, 0, 0, 0.10);
}

.portfolio-layer__content .recruitment-group{
  width: 62.5vw;
  display: flex;
  flex-direction: column;
  gap: 0.833vw;
}

.portfolio-layer__content .recruitment-group h4{
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 140%;
}
.portfolio-layer__content .recruitment-group .description{
  font-size: 0.83vw;
  line-height: 140%;
  display: flex;
  flex-direction: column;
  gap: 0.833vw;
}
.portfolio-layer__content .recruitment-group .description span{
  font-weight: bold;
}
.portfolio-layer__content .recruitment-group .description .small-group{
  display: flex;
  flex-direction: column;
  gap: 0.416vw;
}

.portfolio-layer__content .download{
  display: inline-flex;
height: 56px;
padding: 24px;
align-items: center;
gap: 4px;
color: #FFF;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
background: #000;
margin-bottom: 5.208vw;
}


@media (max-width: 1201px) {
    .top-area{
      padding: 8.59vw 0 0;
      height: 40.08vw;
    }
    .top-area img{
      object-fit: cover;  
      object-position: center center;
    }
    .top-area h1{
      top: 15.57vw;
      font-size: 3.22vw;
      width: 46.04vw;
    }
    .top-area h2{
      top: 31.4vw;
      font-size: 2.14vw;
      line-height: 1.2;
      font-weight: normal;
    }

    .board-head {
      display: none;
    }

    .board-list {
      padding: 0 0 10.73vw;
    }

    .board-item {
      border-bottom: 1px solid rgba(0, 0, 0, 0.10);
      width: 100%;
    }

    .board-row{
      display:grid;
      grid-template-columns: auto 1fr;
      align-items: start;
      padding: 3.22vw 2.14vw;
      gap: 2.14vw;
    }

    .board-row > :nth-child(1){
      grid-column: 1;
    }
    .board-row > :nth-child(2){
      grid-column: 2;
      justify-self: start;
    }

    .board-row > :nth-child(n+3){
      grid-column: 1 / -1;
    }

    .board-row .board-col--state {
      width: fit-content;
      height: unset;
      padding: 1.07vw;
      font-size: 1.87vw;
      color: white;
      border-radius: 0.67vw;
    }
    .board-row .board-col--state.active {
      opacity: 1;
      background: #E06E64;
    }
    .board-row .board-col--position {
      font-size: 2.14vw;
      height: 100%;
      align-items: center;
      display: flex;
    }
  
    .board-row .board-col--role {
      font-size: 2.14vw;
    }
    .board-row .board-col--type {
      font-size: 2.14vw;
    }
    .board-row .board-col--exp {
      font-size: 2.14vw;
    }
    .board-row .board-col--period {
      font-size: 2.14vw;
    }

    .board-row .board-col--role::before,
    .board-row .board-col--type::before,
    .board-row .board-col--exp::before,
    .board-row .board-col--period::before{
      display: inline-block;    
      width: fit-content;              
      content: attr(data-label);
      line-height: 1;
      white-space: nowrap;
      color: rgba(0, 0, 0, 0.40);
      font-weight: bold;
    }

    .board-row .board-col--role,
    .board-row .board-col--type,
    .board-row .board-col--exp,
    .board-row .board-col--period{
      width: 100%;            
      text-align: left;
      display: flex;          
      align-items: center;
      gap: 1.07vw;
    }



    .pagination{
      gap: 2.14vw;
      margin-bottom: 10.73vw;
    }

    .pagination__control{
      width: 3.22vw;
      height: 3.22vw;
      border-radius: 0.67vw;
    }

    .pagination__control::before{
      width: 2.14vw;
      height: 2.14vw;
    }

    .pagination__list{
      gap: 2.14vw;
    }

    .pagination__link{
      font-size: 2.14vw;
    }




    .portfolio-layer .close{
      left: 2.14vw;
      top: 10.73vw;
      width: 2.14vw;
      height: 2.14vw;
    }

    .portfolio-layer__content{
      padding: 0 2.14vw;
      gap: 5.36vw 0;
    }
  

    .portfolio-layer__content h3{
      font-size: 3.22vw;
      padding: 15.03vw 0 0;
    }

    .portfolio-layer__content .top-group{
      width: 100%;
    }

    .portfolio-layer__content .top-group h4{
      padding: 2.14vw;
      font-size: 2.14vw; 
      margin-bottom: 5.36vw;
    }

    .portfolio-layer__content .top-group .description{
      font-size: 2.14vw;
    }
    .portfolio-layer__content .top-group .description .accent{
      font-weight: bold;
      margin-bottom: 2.14vw;
    }

    .portfolio-layer__content .line{
      width: 100%;
      display: none;
    }
    .portfolio-layer__content .line.first{
      display: block;
    }


    .portfolio-layer__content .recruitment-group{
      width:100%;
      gap: 2.14vw;
    }

    .portfolio-layer__content .recruitment-group h4{
      font-size: 3.22vw;
    }
    .portfolio-layer__content .recruitment-group .description{
      font-size: 2.14vw;
      gap: 1.07vw;
    }
    .portfolio-layer__content .recruitment-group .description span{
      font-weight: bold;
    }
    .portfolio-layer__content .recruitment-group .description .small-group{
      display: flex;
      flex-direction: column;
      gap: 1.07vw;
    }

    .portfolio-layer__content .download{
      width: 343px;
      margin-bottom: 10.72vw;
      justify-content: center;
    }
}

@media (max-width: 744px) {
    .top-area{
      padding: 17.06vw 0 0;
      height: 81.06vw;
    }
    .top-area h1{
      top: 30.93vw;
      font-size: 6.4vw;
      width: 91.46vw;
    }
    .top-area h2{
      top: 62.4vw;
      font-size: 4.26vw;
    }

    .board-list {
      padding: 0 0 21.33vw;
    }

    .board-row{
      padding: 6.4vw 4.26vw;
      gap: 4.26vw;
    }

    .board-row .board-col--state {
      padding: 2.13vw;
      font-size: 3.73vw;
      border-radius: 1.33vw;
    }

    .board-row .board-col--position {
      font-size: 4.26vw;
      width: 100%;
    }
  
    .board-row .board-col--role {
      font-size: 4.26vw;
    }
    .board-row .board-col--type {
      font-size: 4.26vw;
    }
    .board-row .board-col--exp {
      font-size: 4.26vw;
    }
    .board-row .board-col--period {
      font-size: 4.26vw;
    }


    .board-row .board-col--role,
    .board-row .board-col--type,
    .board-row .board-col--exp,
    .board-row .board-col--period{
      gap: 2.13vw;
    }



    .pagination{
      gap: 4.26vw;
      margin-bottom: 21.33vw;
    }

    .pagination__control{
      width: 6.4vw;
      height: 6.4vw;
      border-radius: 1.33vw;
    }

    .pagination__control::before{
      width: 4.26vw;
      height: 4.26vw;
    }

    .pagination__list{
      gap: 4.26vw;
    }

    .pagination__link{
      font-size: 4.26vw;
    }




    .portfolio-layer .close{
      left: 4.26vw;
      top: 21.33vw;
      width: 4.26vw;
      height: 4.26vw;
    }

    .portfolio-layer__content{
      padding: 0 4.26vw;
      gap: 10.66vw 0;
    }
  

    .portfolio-layer__content h3{
      font-size: 6.4vw;
      padding: 29.86vw 0 0;
    }


    .portfolio-layer__content .top-group h4{
      padding: 4.26vw;
      font-size: 4.26vw; 
      margin-bottom: 10.66vw;
    }

    .portfolio-layer__content .top-group .description{
      font-size: 4.26vw;
    }
    .portfolio-layer__content .top-group .description .accent{
      margin-bottom: 4.26vw;
    }


    .portfolio-layer__content .recruitment-group{
      gap: 4.26vw;
    }

    .portfolio-layer__content .recruitment-group h4{
      font-size: 6.4vw;
    }
    .portfolio-layer__content .recruitment-group .description{
      font-size: 4.26vw;
      gap: 4.26vw;
    }
    .portfolio-layer__content .recruitment-group .description .small-group{
      gap: 2.13vw;
    }

    .portfolio-layer__content .download{
      width: 343px;
      margin-bottom: 21.33vw;
    }
}