/* base */
:root{
  --contentWidth: 1048px;
}

/* ===============
 # header
=============== */
header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(50px) saturate(120%);
}
.header-main{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  &:before{
    content: "";
    width: 100%;
    height: 1px;
    background: #b3b3b3;
    position: absolute;
    top: 62px;
    left: 0;
    pointer-events: none;
  }
  .header-logoArea{
    display: flex;
    align-items: center;
    gap: 40px;
    line-height: 1;
    .current-site{
      display: flex;
      border: 1px solid #808080;
      border-radius: 99px;
      width: 220px;
      @media screen and (max-width: 767px){
        display: none;
      }
      li{
        width: 50%;
        padding: 8px 0;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        border-radius: 99px;
        &.is-current{
          background: #000000;
          a{color: #fff;}
        }
      }
      &.is-hover{
        .is-current{
          background: transparent;
          a{color: #000;}
        }
        li:not(.is-current){
          background: #000000;
          a{color: #fff;}
        }
      }
    }
  }
  .header-menuArea{
    display: flex;
    justify-content: end;
    align-items: center;
    @media screen and (max-width: 1220px){
      display: none;
    }
    ul{
      display: flex;
      gap: 0;
    }
  }
  .header-menu-btn{
    text-align: center;
    & > a{
      display: block;
      letter-spacing: .8px;
      padding: 16px 17px;
      height: 62px;
      box-sizing: border-box;
      &:hover{
        text-shadow: 0px 0px 1px #000;
        border-bottom: 1px solid #000;
      }
    }
    &.is-current-hover a{
      text-shadow: 0px 0px 1px #000;
      border-bottom: 1px solid #000;
    }
  }
  .lang{
    color: #000;
    background: transparent;
    border: 1px solid #808080;
    border-radius: 50%;
    font-size: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    margin-left: 20px;
    transition: all .4s;
    position: relative;
    @media screen and (max-width: 1220px){
      margin-left: 16px;
    }
    &:hover{
      color: #fff;
      background: #000;
      border-color: #000;
    }
    p{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &.dn{
        display: none;
      }
    }
  }
}
.header_sub-menu{
  width: 100%;
  top: 63px;
  left: 0;
  z-index: 11;
  .inner-menu{
    justify-content: space-between;
    align-items: center;
    padding: 40px 32px;
    display: none;
  }
  .inner-menu-title{
    padding-right: 60px;
  }
  .inner-menu-ttl{
    font-family: futura-pt, sans-serif;
    font-size: 64px;
    line-height: 1.3;
  }
  .inner-menu-sttl{
    color: rgba(0, 0, 0, .9);
  }
  .inner-menu-links{
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    width: 100%;
    max-width: 926px;
    li{
      width: calc((100% - 32px) / 3);
      max-width: 298px;
      border-bottom: 1px solid #fff;
      padding: 16px;
      position: relative;
      &:after{
        content: "";
        width: 18px;
        height: 8px;
        display: block;
        position: absolute;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        background: url(/_assets/common/images/arrow-right.svg) no-repeat 0 0;
        background-size: cover;
        transition: all .3s;
      }
      &::before{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        z-index: -1;
        content: '';
        background: #000;
        transition: all .3s cubic-bezier(.42, 0, .58, 1) 0s;
      }
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3){
        border-top: 1px solid #fff;
      }
      a{
        display: block;
        color: #000;
        transition: all .3s;
      }
      &:hover{
        &::before{
          width: 100%;
        }
        &::after{
          background: url(/_assets/common/images/arrow-right-white.svg) no-repeat 0 0;
          background-size: cover;
        }
        a{
          color: #fff;
        }
      }
    }
  }
  .is-openmenu-company,
  .is-openmenu-ir,
  .is-openmenu-recruit{
    display: flex;
  }
}
.sp1220{
  display: none;
  @media screen and (max-width: 1220px){
    display: flex;
    justify-content: end;
    align-items: center;
  }
}
.sp-header-nav-btn{
  position: relative;
  width: 32px;
  height: 62px;
  cursor: pointer;
  &:before,
  &:after{
    content: "";
    width: 14px;
    height: 2px;
    background: #808080;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all .3s;
  }
  &:before{
    top: 45%;
  }
  &:after{
    top: 55%;
  }
  &.nav-active{
    &:before{
      top: 50%;
      transform: translateX(-50%) rotate(45deg);
    }
    &:after{
      top: 50%;
      transform: translateX(-50%) rotate(-45deg);
    }
  }
}
.sp-inner-menu{
  top: 63px;
  width: 100%;
  height: calc(100vh - 63px);
  font-size: 18px;
  display: flex;
  flex-direction: column;
  z-index: 11;
  transform: translateX(100%);
  max-height: 0;
  overflow: hidden;
  transition: all .4s;
  @media screen and (max-width: 767px){
    font-size: 16px;
  }
  &.sp-menu-open{
    transform: translate(0);
    max-height: 100vh;
  }
}
.sp-inner-menu-links-wrap{
  overflow-y: auto;
  flex-grow: 1;
  padding: 0 16px 24px;
  @media screen and (max-width: 767px){
    margin-top: 20px;
  }
  .acc-links{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    &::before,
    &::after{
      content: "";
      width: 20px;
      height: 2px;
      background: #000;
      position: absolute;
      right: 20px;
    }
    &::before{
      transform: rotate(90deg);
      transition: all .3s;
    }
    &.is-acc-open{
      &::before{
        transform: rotate(0deg);
      }
    }
  }
  .acc-body{
    margin-left: 1em;
    margin-top: -12px;
    padding-bottom: 16px;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    transition: all .5s;
    @media screen and (max-width: 767px){
      margin-top: 0;
      padding-bottom: 0;
      li{
        padding-bottom: 12px;
      }
    }
    &.is-acc-open{
      max-height: 100vh;
      visibility: visible;
      opacity: 1;
    }
    a{
      color: #000;
      padding: 4px 0;
      display: block;
      @media screen and (max-width: 767px){
        font-size: 14px;
        padding: 0;
      }
    }
  }
}
.sp-inner-menu-link{
  border-top: 1px solid #999;
  padding: 16px 0;
  font-weight: 700;
  &.bt-none{
    border-top: none;
  }
  @media screen and (max-width: 767px){
    padding: 8px 0;
  }
}
.sp-inner-menu-sq-link{
  border: 1px solid #999;
  border-radius: 12px;
  @media screen and (max-width: 767px){
    margin-top: 20px;
  }
  a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    &:after{
      content: "";
      width: 18px;
      height: 8px;
      display: block;
      background: url(/_assets/common/images/arrow-right.svg) no-repeat 0 0;
      background-size: cover;
    }
    span{
      display: inline-block;
      overflow: hidden;
      color: transparent;
      font-weight: 700;
    }
  }
}

/* ===============
 # footer
=============== */
footer{
  background: #000;
  position: relative;
  z-index: 2;
  a,p{
    color: #b2b2b2;
  }
  a:hover{
    color: #fff;
  }
  .footer-link,
  .acc-links{
    font-weight: 700;
    border-top: 1px solid #666666;
    padding: 12px 8px;
    font-size: 14px;
    width: 100%;
    &.nb{
      border: none;
    }
    &.mb4{
      padding-bottom: 4px;
    }
    @media screen and (max-width: 767px){
      &.sp-bb{
        border-bottom: 1px solid #666;
      }
    }
  }
  .add-mt{
    margin-top: calc(1.8em + 24px + 2px);
    @media screen and (max-width: 767px){
      margin-top: 0;
    }
  }
  @media screen and (max-width: 767px){
    .acc-links.footer-acc{
      border-top: 1px solid #808080;
      position: relative;
      &::before,
      &::after{
        content: "";
        width: 20px;
        height: 2px;
        background: #808080;
        position: absolute;
        right: 0;
        top: calc(50% + 4px);
      }
      &::before{
        transform: rotate(90deg);
        transition: all .3s;
      }
      &.is-acc-open{
        &::before{
          transform: rotate(0deg);
        }
      }
    }
    .footer-link.spb{
      border-top: 1px solid #808080;
      padding-top: 8px;
    }
  }
  .acc-body{
    padding-left: 2em;
    margin-bottom: 12px;
    &.ob{
      border-bottom: 1px solid #666;
      padding-bottom: 12px;
      margin-bottom: 0;
    }
    @media screen and (max-width: 767px){
      visibility: hidden;
      overflow: hidden;
      opacity: 0;
      max-height: 0;
      transition: all .5s;
      &.is-acc-open{
        max-height: 100vh;
        visibility: visible;
        opacity: 1;
      }
    }
    li{
      font-size: 12px;
      margin-bottom: 4px;
    }
  }
  .footer-sq-link{
    padding-top: 8px;
    @media screen and (max-width: 767px){
      padding-top: 24px;
    }
    a{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      border: 1px solid #999;
      border-radius: 12px;
      padding: 8px 12px;
      width: 230px;
      @media screen and (max-width: 767px){
        width: 100%;
        justify-content: space-between;
      }
      &:after{
        content: "";
        width: 18px;
        height: 8px;
        display: block;
        background: url(/_assets/common/images/arrow-right-gray.svg) no-repeat 0 0;
        background-size: cover;
      }
    }
  }
  .footer-social{
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 230px;
    @media screen and (max-width: 767px){
      margin-top: 24px;
      justify-content: center;
    }
  }
  .isms{
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    background: #fff;
    border-radius: 6px;
    width: 230px;
    padding: 12px 20px;
    li figure img{
      height: 40px;
    }
    @media screen and (max-width: 767px){
      position: inherit;
      width: 75%;
      margin: 0 auto 20px;
    }
    &.pcb{
      display: flex;
      @media screen and (max-width: 767px){
        display: none;
      }
    }
    &.spb{
      display: none;
      @media screen and (max-width: 767px){
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 15px;
      }
    }
  }
  figure{
    width: 100%;
    line-height: 1;
    img{width: 100%;}
  }
}
.footer-links-wrap{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 112px 0 0;
  display: flex;
  justify-content: space-between;
  @media screen and (max-width: 767px){
    flex-direction: column;
    padding: 40px 16px;
  }
  .footer-rows{
    width: 220px;
    position: relative;
    @media screen and (max-width: 767px){
      width: 100%;
    }
  }
  .footer-rows-wrap{
    display: flex;
    gap: 24px;
    @media screen and (max-width: 767px){
      display: block;
    }
  }
}
.footer-other-links{
  text-align: center;
  margin: 40px 0 50px;
  @media screen and (max-width: 767px){
    margin-top: 0;
  }
  .copy{
    color: #808080;
    line-height: 1;
    font-size: 10px;
    line-height: 1.7;
  }
  ul{
    display: flex;
    justify-content: space-between;
    max-width: 800px;
    margin: 0 auto;
    @media screen and (max-width: 767px){
      max-width: 75%;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 0 1em;
      margin-bottom: 20px;
    }
    a{
      font-size: 10px;
      @media screen and (max-width: 767px){
        font-size: 11px;
      }
    }

  }
}

/* ===============
 # corp-info-links
=============== */
.corp-info-links{
  padding: 72px 0;
  background: #fff;
  .corp-info-links_title{
    font-size: 20px;
    border-bottom: 1px solid #808080;
    margin-bottom: 28px;
    letter-spacing: 3px;
    @media screen and (max-width: 767px){
      padding: 0 16px;
      margin-bottom: 0;
    }
    span{
      display: block;
      width: 100%;
      max-width: var(--contentWidth);
      margin: 0 auto;
    }
  }
  .btn-revers{
    &::before,
    &::after{
      z-index: 1;
    }
  }
}
.corp-info-links_inner-wrap{
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: var(--contentWidth);
  margin: 0 auto;
  @media screen and (max-width: 767px){
    flex-direction: column;
    padding: 0 16px;
  }
}
.corp-info-links_cat{
  width: calc((100% - 192px) / 4);
  max-width: 208px;
  @media screen and (max-width: 767px){
    width: 100%;
    max-width: 100%;
    margin-top: 32px;
  }
  .corp-info-links_cat-num{
    font-size: 40px;
    color: #999;
    line-height: 1;
    margin-bottom: 12px;
    @media screen and (max-width: 767px){
      font-size: 32px;
      margin-bottom: 4px;
    }
  }
  .corp-info-links_cat-lists{
    @media screen and (max-width: 767px){
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      width: 100%;
    }
    li{
      margin-top: 4px;
      @media screen and (max-width: 767px){
        width: calc((100% - 8px) / 2);
      }
    }
  }
}

/* ===============
 # hover-bg-animation
=============== */
.hover-bg-animation{
  .hover-btn{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    position: relative;
    @media screen and (max-width: 767px){
      .hover-btn-area01{
        border-bottom: 1px solid #000;
      }
    }
    &::after{
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #F0F0F0;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 1;
      transition: all .4s;
    }
    ul{
      margin: 0 3%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-left: 1px solid #000;
      position: relative;
      z-index: 2;
      @media screen and (max-width: 767px){
        flex-direction: column;
        margin: 0;
        border-left: none;
      }
    }
    li{
      width: 50%;
      border-right: 1px solid #000;
      @media screen and (max-width: 767px){
        width: 100%;
        border-right: none;
      }
      a{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 32px;
        margin: 0;
        padding: 52px 5%;
        color: #000;
        transition: all .4s;
        @media screen and (max-width: 767px){
          padding: 16px 5%;
          transition: none;
        }
        &::after{
          content: "";
          display: block;
          width: 40px;
          height: 40px;
          background: url(/_assets/images/recruit/_parts/arrow-circle-bk.svg) no-repeat 0 0;
          background-size: cover;
        }
      }
    }
    &.js-btnArea01{
      &:hover{
        background: url(/_assets/common/images/hover-animation-bg01.png) no-repeat 0 0;
        background-size: cover;
        @media screen and (max-width: 767px){
          background: none;
        }
        .hover-btn-area01{
          a{
            background: rgba(255, 255, 255, 1);
          }
        }
      }
    }
    &.js-btnArea02{
      &:hover{
        background: url(/_assets/common/images/hover-animation-bg02.png) no-repeat 0 0;
        background-size: cover;
        @media screen and (max-width: 767px){
          background: none;
        }
        .hover-btn-area02 a{
          background: rgba(255, 255, 255, 1);
        }
      }
    }
    &:hover{
      &::after{
        opacity: 0;
      }
      ul{
        border: none;
      }
      li{
        border: none;
        &.hover-btn-area01{
          @media screen and (max-width: 767px){
            border-bottom: 1px solid #000;
          }
        }
        a{
          margin: 26px 5%;
          padding: 26px 5%;
          background: rgba(255, 255, 255, .7);
          border-radius: 10px;
          @media screen and (max-width: 767px){
            margin: 0;
            padding: 16px 5%;
          }
        }
      }
    }
    h3{
      font-size: 40px;
      font-family: futura-pt, sans-serif;
      line-height: 1;
      font-weight: 700;
      @media screen and (max-width: 767px){
        font-size: 32px;
        width: 200px;
      }
    }
    p{
      font-size: 20px;
      font-weight: 500;
      @media screen and (max-width: 767px){
        font-size: 14px;
        width: 200px;
      }
    }
  }
}