.header {
  border-bottom: 3px solid var(--mainBlue);
  position: fixed;
  background: var(--mainGray);
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  & .inner {
    padding-right: 1.875rem;
  }
  & .wrap01 {
    border-right: 3px solid var(--mainBlue);
  }
  & .wrap02 {
    padding: 0 1.5625rem;
    color: var(--mainBlue);
  }
  & .list01 {
    gap: 3.125rem;
  }
  & .list02 {
    position: absolute;
    background: var(--mainGray);
    left: 0;
    top: 4.53125rem;
    transform: scaleY(0); /*デフォルトでは非表示の状態にしておく*/
    transform-origin: center top; /*変形を適応する基準をtopとする*/
    transition: all 0.3s; /*表示の変化を0.3秒に指定*/
  }
  & .list02-01 {
    width: 10.3125rem;
  }
  & .list02-02 {
    width: 12.375rem;
  }
  & .item01 {
    position: relative;
    height: 4.5rem;
  }
  & .nav {
    margin-top: 0.15625rem;
    gap: 1.5625rem;
  }
  & .img01 {
    /* width: 4.625rem; */
    height: 4.625rem;
  }
  & .text01,
  & .text02 {
    display: block;
    line-height: 1.2;
  }
  & .text01 {
    font-size: 1rem;
    color: var(--mainBlue);
    font-weight: bold;
    letter-spacing: 0.04em;
    width: fit-content;
    position: relative;
  }
  & .text01-toggle {
    position: relative;
    &::after {
      position: absolute;
      content: "";
      width: 0.5625rem;
      transform: rotate(0deg);
      height: 0.375rem;
      background-image: url("../img/common/down01.svg");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      top: 45%;
      right: -0.9375rem;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
    }
  }
  & .text02 {
    font-size: 0.75rem;
    font-weight: 600;
    color: #333333;
  }
  & .text03 {
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1;
    padding-top: 0.625rem;
  }
  & .text04 {
    font-size: 0.625rem;
    font-weight: 600;
    position: absolute;
    top: 0;
    left: 104%;
    color: var(--mainBlue);
  }
  & .btn {
    background: var(--mainBlue);
    text-align: center;
    color: white;
    font-size: 0.875rem;
    padding: 0.625rem 3.125rem;
    border-radius: 4.375rem;
    font-weight: 700;
  }
  & .link01 {
    position: relative;
  }
  & .link02 {
    font-size: 0.75rem;
    font-weight: 600;
    color: #333333;
    padding: 0.78125rem 0 0.78125rem 0.625rem;
  }
}
@media (hover: hover) {
  .header{
    & .item01 {
    &:hover .list02,
    &:focus-within .list02 {
      transform: scaleY(1);
    }
    &:hover .text01-toggle{
      &::after{
        transform: rotate(180deg);
        top: 25%;
      }
    }
  }
  }
}
@media screen and (max-width: 768px) {
.header {
  & .inner {
    padding-right: 1.875rem;
    position: relative;
  }
  & .wrap02 {
    padding: 0 1.28rem;
  }
  & .wrap03 {
    position: absolute;
    background: var(--mainBlue);
    width: 37.248rem;
    right: -37.248rem; 
    height: 66.176rem;
    top: 0;
    gap: 0;
    overflow-y: scroll;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .2s;
    &.active{
      right: 0;
    }
  }
  & .list01 {
    gap: 0;
    flex-direction: column;
    justify-content: start;
    border: 3px solid var(--mainGray);
    width: 100%;
    max-height: 46.08rem; 
    overflow-y: scroll;
  }
  & .list02 {
    position: relative;
    background: var(--mainGray);
    left: auto;
    top: auto; 
    transform: scaleY(0);
    padding: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease 0s;
    &.active{
      padding: 1.28rem 0 0.96rem; 
      transform: scaleY(1);
      height: auto;
      overflow: visible;
    }
  }
  & .list02-01,
  & .list02-02 {
    width: 100%;
    border: none;
  }
  & .item01 {
    position: relative;
    height: auto;
    width: 100%;
    justify-content: start;
    flex-direction: column;
    &:not(:last-child) {
      border-bottom: 3px solid var(--mainGray);
    }
  }
  & .item02{
    border: none;
    padding: 0 2.56rem; 
  }
  & .nav{
    flex-direction: column;
    justify-content: start;
    width: 92%;
    gap: 0;
    margin-top: 3.2rem; 
  }
  & .img01 {
    height: 6.016rem;
  }

  & .text01 {
    font-size: 2.048rem;
    color: var(--mainGray);
    letter-spacing: 0.04em;
    width: fit-content;
  }
  & .text01-toggle {
    &::after {
      width: 1.152rem; 
      height: 0.768rem; 
      background-image: url("../img/common/down02.svg");
      right: -1.92rem; 
    }
  }
  & .text02 {
    font-size: 1.536rem; 
    color: var(--mainGray);
  }
  & .text03 {
    font-size: 2.176rem;
    padding-top: 0.96rem;
  }
  & .text04 {
    font-size: 1.28rem;
    top: 0;
    color: var(--mainGray);
  }
  & .btn {
    color: var(--mainBlue);
    font-size: 1.792rem;
    padding: 1.92rem 0;
    border-radius: 0;
    width: 100%;
    background: var(--mainGray);
  }
  & .link01{
    padding: 2.24rem 2.56rem;
    width: 100%;
    &.active .text01-toggle::after{
      transform: rotate(180deg);
      top: 25%;
    }
  }
  & .link02 {
    font-size: 1.792rem;
    color: var(--mainBlue);
    padding: 0.5rem 0;
    position: relative;
    letter-spacing: 0.03em;
    & span{
      display: inline-block;
    }
  }
}

.menu{
  background: var(--mainBlue);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10.88rem; 
  height: 3.5rem;
  border-radius: 1.792rem;
  gap: 0.96rem;
  position: relative;
  z-index: 2;
  &.active{
    background: var(--mainGray);
    & .text{
      color: var(--mainBlue);
    }
  }
  & .text{
    color: var(--mainGray);
    font-size: 1.536rem; 
    font-weight: 700;
    line-height: 1;
    padding-top: 0.512rem;
  }
}
.hamburger {
  position: relative;
  cursor: pointer;
  width: 1.536rem;
  height: 1.024rem; 
}
.hamburger span {
  display: inline-block;
  transition: all .3s;
  position: absolute;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  height: 1px;
  background: var(--mainGray);
  width: 100%;
}
.hamburger span:nth-of-type(1) {
  top: 0;
}
.hamburger span:nth-of-type(2) {
  top: 0.512rem; 
}
.hamburger span:nth-of-type(3) {
  top: 1.024rem;
}
.hamburger.active span{
  background: var(--mainBlue);
}
.hamburger.active span:nth-of-type(1) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  -ms-transform: translate(-50%, -50%) rotate(-45deg);
}
.hamburger.active span:nth-of-type(2) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  -ms-transform: translate(-50%, -50%) rotate(45deg);
}
.hamburger.active span:nth-of-type(3) {
  display: none;
}
}

.footer {
  & .wrap01 {
    padding: 3rem 0;
  }
  & .wrap02{
    width: fit-content;
  }
  & .list01 {
    gap: 6rem;
  }
  & .item02 {
    &:not(:last-child) {
      margin-bottom: 1.25rem;
    }
  }
  & .links{
    gap: 1rem;
  }
  & .img01 {
    width: 6.25rem;
  }
  & .heading01 {
    font-size: 15.75rem;
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.065em;
    padding-top: 3.25rem;
  }
  & .heading02 {
    font-size: 1.8125rem;
    font-weight: 700;
    margin-bottom: 0.3125rem; 
  }
  & .text01 {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    padding: 1.25rem 0;
  }
  & .link01{
    font-size: 0.875rem; 
    font-weight: 600;
    border-radius: 3.125rem;
    color: var(--mainBlue);
    width: calc((100% - 1rem) / 2);
    text-align: center;
    padding: 1rem 0;
  }
  & .link02 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mainBlue);
  }
}
@media screen and (max-width: 768px) {
 .footer {
   & .wrap01 {
     padding: 0;
     gap: 0; 
     align-items: stretch;
     justify-content: start;
     padding: 4.4803rem 0;
   }
   & .wrap02 {
     border-right: 3px solid var(--mainBlue);
     padding: 0.5120rem 1.9200rem 0 0;
   }
   & .wrap03{
     padding: 0.5120rem 0 0 1.9200rem;
   }
   & .wrap04{
     border-top: 3px solid var(--mainBlue);
     padding: 2.5rem 0;
   }
   & .list01 {
     gap: 1.5rem;
     flex-direction: column;
   }
   & .list03{
     gap: 2rem;
   }
   & .item02 {
     &:not(:last-child) {
       margin-bottom: 0.8rem; 
     }
   }
   & .links {
     gap: 1rem; 
     flex-direction: column;
     align-items: start;
     width: 100%;
   }
   & .heading01 {
     font-size: 7.296rem;
     letter-spacing: -0.0425em;
     padding-bottom: 1.28rem;
     padding-top: 3.5rem; 
   }
   & .heading02 {
     font-size: 3.2rem;
     margin-bottom: 2.75rem; 
     line-height: 1;
     letter-spacing: -0.05em;
     text-align: center;
     & span{
       letter-spacing: -0.04em;
     }
   }
   & .text01 {
     font-size: 1.28rem;
     padding: 1.25rem 0; 
     background: var(--mainBlue);
     color: var(--mainGray);
   }
   & .link01 {
     font-size: 1.408rem; 
     border-radius: 8.1920rem;
     width: 100%;
     padding: 1.5rem 0; 
   }
   & .link02 {
     font-size: 1.5390625rem; 
   }
   & .link03{
     font-size: 1.28rem;
     color: var(--mainBlue);
   }
 }
}

.bottomCta {
  background-image: url(../img/common/bottomCta_background.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3.75rem 0 4.6875rem;
  & .wrap01 {
    gap: 3.125rem;
    width: 100%;
  }
  & .text00 {
    color: var(--mainGray);
    text-align: center;
    font-weight: 600;
  }
  & .text01 {
    font-size: 3.125rem;
    letter-spacing: 0.045em;
  }
  & .text02 {
    font-size: 2.3125rem;
    letter-spacing: 0.045em;
  }
  & .text03 {
    font-size: 3.25rem;
    margin-bottom: 3.125rem;
    & span {
      letter-spacing: -0.1em;
    }
  }
  & .link {
    background: var(--mainGray);
    width: calc((100% - 3.125rem) / 2);
    padding: 3.75rem 0;
  }
  & .common-link {
    margin: 0 auto;
    gap: 1.25rem;
    & .text {
      font-size: 1.25rem;
    }
  }
}
@media screen and (max-width: 768px) {
.bottomCta {
  background-image: url(../img/common/bottomCta_background-sp.webp);
  padding: 6rem 0 7rem; 
  & .wrap01 {
    gap: 2.5rem; 
    flex-direction: column;
  }
  & .text01 {
    font-size: 3.968rem;
  }
  & .text02 {
    font-size: 2.944rem;
  }
  & .text03 {
    font-size: 4.224rem;
    margin-bottom: 4rem; 
  }
  & .link {
    width: 100%;
    padding: 4.75rem 0;
  }
  & .common-link {
    & .text {
      font-size: 2.56rem;
    }
  }
}
}

.leftSlider {
  background: var(--mainBlue);
  width: 4.625rem;
  height: calc(100vh - 4.625rem);
  position: fixed !important;
  top: 4.625rem;
  left: 0;
  & .text {
    writing-mode: vertical-rl;
    scale: -1 -1;
    color: white;
    font-size: 1.625rem;
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    line-height: 1;
    letter-spacing: 0.2em;
    white-space: nowrap;
    padding-right: 0.3rem;
  }
}
.swiper-wrapper {
  transition-timing-function: linear;
}
@media screen and (max-width: 768px) {
  .leftSlider {
    width: 6rem;
    height: calc(100vh - 6rem);
    top: 6rem;
    & .text {
      writing-mode: vertical-rl;
      scale: -1 -1;
      color: white;
      font-size: 2.048rem;
      width: fit-content;
      padding-right: 0.6rem;
    }
  }
}

.subTitle {
  padding: 3.125rem 0 1.25rem; 
  & .heading {
    font-size: 7.25rem; 
    font-weight: 700;
    color: var(--mainBlue);
    line-height: 1;
    letter-spacing: -0.04em;
    &.center{
      text-align: center;
    }
    & span{
      padding-left: 1.25rem;
      font-size: 2.3125rem;
    }
    &.recruitment{
      font-size: 4.875rem;
    }
  }
  & .text01{
    font-size: 1.75rem;
    margin-top: -1.25rem;
    margin-bottom: 0.75rem;
  }
}
.breadcrumb {
  padding: 0.875rem 0;
  & .wrap {
    margin-right: 0.46875rem;
    &:not(:last-child) {
      &::after {
        padding-left: 0.46875rem; 
        font-size: 0.875rem; 
        font-weight: 600;
        content: ">";
        padding-top: 0.1875rem; 
      }
    }
  }
  & .text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mainBlue);
  }
}
@media screen and (max-width: 768px) {
  .subTitle {
    padding: 2.56rem 0 1.28rem; 
    & .heading {
      font-size: 4.096rem;
      letter-spacing: 0.02em;
      line-height: 1.4;
      &.center{
        text-align: left;
      }
      & span{
        font-size: 1.536rem;
        padding-left: 1.28rem;
      }
    }
  }
  .breadcrumb {
    padding: 1.28rem 0 0.96rem; 
    & .wrap {
      margin-right: 0.64rem; 
      &:not(:last-child) {
        &::after {
          padding-left: 0.64rem; 
          font-size: 1.536rem;
          padding-top: 0rem;
        }
      }
    }
    & .text {
      font-size: 1.28rem; 
    }
  }
}

.brandSlider {
  padding: 2.188rem 0 1.563rem;
  & .item01{
    width: 13.813rem; 
  }
  & .img02{
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
.brandSlider {
  padding: 2.188rem 0 1.75rem;
  & .item01 {
    width: 13.8182rem;
  }
}
}

/* お知らせ */
.newsList {
  padding-bottom: 6.3125rem;
  &.archive{
    padding-bottom: 0;
  }
  & .wrap01 {
    gap: 1.25rem;
    margin-bottom: 1.875rem;
  }
  & .wrap02 {
    width: 19.5rem;
    height: 19.5rem;
  }
  & .wrap03{
    width: 80%;
    margin: 0 auto;
  }
  & .item {
    width: calc((100% / 3) + 3px);
    padding: 2.5rem 0 1.875rem;
    position: relative;
    margin-left: -3px;
    margin-bottom: -3px;
    &:nth-of-type(3n) {
      border-right: none;
    }
    
  }
  & .img01 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  & .heading01 {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    padding: 2.5rem 0 1.25rem;
  }
  & .heading02 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.15625rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  & .text01 {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    height: 19.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  & .text02 {
    background: var(--mainBlue);
    color: var(--mainGray);
    width: fit-content;
    padding: 0.46875rem 1.1875rem 0.21875rem;
    line-height: 1;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 0.625rem;
  }
  & .text03 {
    font-size: 0.75rem;
    margin-left: 0.15625rem;
  }
  & .common-link {
    margin: 0 0 0 auto;
    padding: 1.5625rem 2.5rem;
  }
}
@media screen and (max-width: 768px) {
  .newsList {
    padding-bottom: 2.56rem;
    & .wrap01 {
      gap: 1rem;
      margin-bottom: 2.56rem;
    }
    & .wrap02 {
      width:23.04rem;
      height: 23.04rem;
    }
    & .wrap03{
      width: 86%;
    }
    & .wrap04{
      overflow-x: scroll;
    }
    & .list{
      width: 95.232rem;
    }
    & .item {
      padding: 3.84rem 0 2.56rem;
      margin-bottom: 0;
    }
    & .heading01 {
      font-size: 5.632rem;
      padding: 3.2rem 0 1.6rem;
    }
    & .heading02 {
      font-size: 2.048rem;
      margin-bottom: 0.64rem;
    }
    & .text01 {
      font-size: 2rem;
      height: 23.04rem;
      line-height: 1.4;
    }
    & .text02 {
      padding: 0.96rem 1.92rem 0.64rem;
      font-size: 1.28rem;
      margin-bottom: 1.6rem;
      border-radius: 2rem;
    }
    & .text03 {
      font-size: 1.28rem;
    }
    & .common-link {
      margin: 0rem 0rem 0 auto;
      padding: 2rem 1rem;
    }
    .animation-link {
      & .texts {
        padding-right: 4rem;
          &::after {
              width: 2.7rem;
              height: 3rem;
          }
      }
    }
    &.archive{
      margin-top: -3px;
      & .wrap02 {
        width: 32rem;
        height: 32rem;
      }
      & .wrap03{
        width: 85%;
      }
      & .wrap04{
        overflow-x: visible;
      }
      & .list{
        width: auto;
      }
      & .item{
        width: 100%;
        margin: auto;
        border-right: none;
        border-left: none;
        border-bottom: none;
      }
      & .text01 {
        height: 32rem;
      }
    }
  }
}

/* 選考の流れ */
.flow{
  overflow: hidden;
  & .block01{
    display: contents;
  }
  & .list{
    gap: 6.875rem;
    padding: 4.6875rem 0;
  }
  & .item{
    position: relative;
    &:not(:last-child) .wrap01::after{
      position: absolute;
      content: "";
      background-image: url(../img/common/arrow06.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      width: 7.1875rem;
      height: 1.5rem;
      right: -7.1875rem;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
    }
    &:last-child .wrap01::before{
      position: absolute;
      content: "";
      height: 3px;
      width: 7.1875rem;
      background: var(--mainBlue);
      right: -7.1875rem;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
    }
    &:first-child .wrap01::before{
      position: absolute;
      content: "";
      height: 3px;
      width: 7.1875rem;
      background: var(--mainBlue);
      left: -7.1875rem;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
    }
  }
  & .wrap01{
    position: relative;
    width: 21.75rem;
    height: 21.75rem;
    border-radius: 50%;
    padding: 0 2.5rem;
  }
  & .heading01{
    font-size: 3rem;
    text-align: center;
    padding: 1.875rem 0;
  }
  & .heading02{
    font-size: 1.5rem;
    text-align: center;
    padding-bottom: 1.875rem;
    &.oneLine{
      line-height: 2.5;
    }
  }
  & .text01{
    text-align: center;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1.25rem;
    & span{
      font-size: 3.5rem;
    }
  }
  & .text02{
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0.03em;
    min-height: 5.5rem;
  }
  & .link01{
    display: inline;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    color: var(--mainBlue);
  }
}
@media (max-width: 768px) {
 .flow {
   & .block01{
     display: block;
     overflow-x: scroll;
   }
   & .list {
     gap: 3.5rem;
     padding: 6rem 0rem 6rem 2rem;
     justify-content: start;
     width: fit-content;
   }
   & .item {
     background: var(--mainGray);
     &:not(:last-child) .wrap01::after {
       background-image: url(../img/common/arrow06.svg);
       width: 12.8rem;
       height: 2.8161rem;  
       z-index: -1;
       right: -4rem;
     }
   }
   & .wrap01 {
     width: 34.6875rem;
     height: 34.6875rem;
     padding: 0 5.5rem;
     position: relative;
     background: var(--mainGray);
   }
   & .heading01 {
     font-size: 3.584rem;
     padding: 3.84rem 0;
   }
   & .heading02 {
     font-size: 2.5625rem;
     line-height: 1.2;
     letter-spacing: -0.04em;
     padding-bottom: 2.56rem;
     &.oneLine {
       line-height: 1.2;
     }
   }
   & .text01 {
     font-size: 2.5625rem;
     line-height: 1.1;
     margin-bottom: 0;
     & span {
       font-size: 5.125rem;
     }
   }
   & .text02 {
     font-size: 1.7921875rem;
     min-height: auto;
   }
 }
}

.banner{
  background: var(--mainBlue);
  padding: 2rem 0;
  & .link01{
    max-width: 53.125rem;
    width: 100%;
    margin: 0 auto;
    & img{
      width: 100%;
    }
  }
}
@media(max-width: 768px) {
  .banner{
    padding: 0;
  }
}