@charset "utf-8";
body{
    position: relative;
}

/*=================================
headder
=================================*/
.header_logo{
    max-width: 25.694vw;
}

.header__list{
    display: flex;
    text-align: center;
    align-items: center;
    gap: 3.819vw;
    padding-left: 20px;
}

.header__item{
    font-size: clamp(1.4rem, 1.25vw, 2.5rem);
    white-space: nowrap;
}

.header__topic h1{
    width: auto;
    font-size: 0;
}

.header__topic{
    display: block;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.291vw 3.819vw;
    position: sticky;
    z-index: 10000;
    background-color: var(--primary-white);
    position: fixed;
    width: 100%;
}

.nav{
    display: none;
}

.nav_menu{
    display: none;
}

/* SP header　*/
@media screen and (max-width: 769px){
.index--header{
    height: 420px;
    background-size: auto 100%;
    position: relative;
    background-position: 20%;
}

/* .header{
    height: 70px;
} */

.header__topic h1{
    width: calc(100% - 88px);
}

.header_logo{
    width: 53.333vw;
    max-width: 250px;
}

.header__topic{
    background-color: var(--primary-white);
    padding: 0 0 0 18px;
    justify-content: space-between;
    position: fixed;
    z-index: 10000;
    width: 100%;
    left: 0;
    top: 0;
    height: 70px;
    align-items: center;
}

.header__list{
    display: none;
}

.nav_menu{
    display: block;
    background: var(--primary-black);
    width: 70px;
    height: 70px;
    position: relative;
    z-index: 20000;
}

.nav_menu p{
    color: var(--primary-white);
    font-family: Ubuntu;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: absolute;
    top: 30%;
    left: 17%;
}

.nav_menu p::after{
    content: "";
    display: block;
    background-color: var(--primary-white);
    width: 45px;
    height: 3px;
    margin-top: 5px;
}

.active .nav_menu p::after{
    width: 22px;
    margin-left: auto;
}

.nav_menu--close{
    display: none;
}

.active .nav_menu--close{
    display: block;
}

.nav_menu--menu{
    display: block;
}

.active .nav_menu--menu{
    display: none;
}

/* nav sp */
.nav{
    height: 100vh;
    transition: all linear 0.2s;
    display: flex;
    justify-content: flex-end;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 10000;
    transform: translateX(100%);
}

.nav_bg{
    background-color: rgba(0, 0, 0, 0.7);
    height: 100vh;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9000;
    display: none;
}

.active .nav_bg{
    display: block;
}

.nav_inner{
    width: 80%;
    background-color: var(--primary-white);
    transition: all linear 0.3s;
    position: relative;
    z-index: 10000;
}

.active .nav{
    transition: all linear 0.3s;
    opacity: 1;
    transform: translateX(0);
    
}

.active .nav_inner{
    transition: all linear 0.3s;
    height: 660px;
}

.nav_btn p{
    color: var(--primary-white);
    font-family: Ubuntu;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: absolute;
    top: 30%;
    left: 17%;
}

.nav_item{
    font-family: "Noto Sans JP";
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1.2px;
}

.nav__list{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 110px 0 60px;
}

.nav_btnContact{
    display: block;
    color: var(--primary-black);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.011em;
    padding: 19px 17px;
    position: relative;
    width: 75%;
    background: var(--primary-white);   
    border: 2px solid var(--primary-black);
    margin-top: 58px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    min-height: 55px;
    height: auto;
}

.nav_logo{
    width: 75%;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}

.nav_footer{
    background-color: var(--primary-greyblue);
    
}

.nav_list{
    padding: 60px 0;
}

.nav_btn{
    display: block;
    background: var(--primary-black);
    width: 70px;
    height: 70px;
    position: relative;
    position: absolute;
    right: 0;
    top: 0;
}

}

@media screen and (max-width: 769px){
.main{
    padding-top: 70px;
    
}
}


/*=================================
cvt
=================================*/
.cvt{
    display: flex;
    justify-content: center;
}

.cvt_list{
    /* height: 400px; */
    aspect-ratio: 720 / 400;
    width: 50vw;
    background-size: cover;
    position: relative;
    background-position: center bottom;
}

.bg-hover-box--recruit{
    position: relative;
    aspect-ratio: 720 / 400;
    width: 50vw;
    overflow: hidden;
}

.bg-hover-box--recruit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/recruit_btn.png);
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
  z-index: 0;
}

.bg-hover-box--recruit:hover::before {
  transform: scale(1.1);
}

.bg-hover-box--contact{
    position: relative;
    aspect-ratio: 720 / 400;
    width: 50vw;
    overflow: hidden;
}

.bg-hover-box--contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/contact_btn.png);
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
  z-index: 0;
}

.bg-hover-box--contact:hover::before {
  transform: scale(1.1);
}

/* .cvt_list--recruit{
    background-image: url(../img/recruit_btn.png);
} */
/* 
.cvt_list--contact{
    background-image: url(../img/contact_btn.png);
} */

.cvt_group{
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.cvt_title{
    color: var(--primary-white);
    font-family: Ubuntu;
    font-size: 5.9vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    /* margin-top: 185px; */
}

.cvt_text{
    color: var(--primary-white);
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.388vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 3px;
}

.cvt_icon{
    width: 4.1666vw;
    /* height: 60px; */
    /* margin-top: 194px; */
}

.cvt_topic{
    display: flex;
    align-items: center;
    gap: 2.777vw;
    justify-content: center;
}

@media screen and (max-width: 480px){
.cvt{
    display: flex;
    flex-direction: column;
}

.cvt_title{
    color: #FEFFFA;
    font-family: Ubuntu;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    }

.cvt_list{
    width: 100%;
}


.cvt_title{
    font-family: Ubuntu;
    font-size: 4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.cvt_icon{
    height: 20px;
    width: 20px;
}

.cvt_topic{
    gap: 7px;
}

.cvt_text{
    text-align: center;
    font-family: Bahnschrift;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 0.8vw;
}

.cvt_group{
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
}

}

/*=================================
footer
=================================*/
.footer{
    background-color: var(--primary-black);
    width: max;
    height: 500px;
}

.footer_group{
    max-width: 1117px;
    width: 80%;
    margin: 0 auto;
    display: flex;
    gap: 30%;
    align-items: center;
    padding-top: 144px;
    padding: 144px 20px;
}

.footer__img{
    width: 27.77vw;
}

.footer__item{
    color: var(--primary-white);
    font-family: "Noto Sans JP";
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.footer__list{
    display: flex;
    text-align: center;
    align-items: center;
    gap: 1.735vw 3.47vw;
    flex-wrap: wrap;
    margin-bottom: 35px;
}

.footer_btnContact{
    color: var(--primary-white);
    font-size: 1.736vw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.011em;
    padding: 1.944vw;
    position: relative;
    width: 27.77vw;
    background: var(--primary-black);   
    border: 3px solid #FEFFFA;
    margin-top: 58px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer_btnContact::before{
    content: "";
    background-image: url(../img/arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.041vw;
    height: 1.666vw;
    position: absolute;
    right: 22px;
}

.footer_btnContact:hover:before{
    background-image: url(../img/arrow_blk.svg);
}


.footer__c::before{
    content: "";
    display: block;
    width: 35.9027777778vw;
    height: 0.555vw;
    background-color: var(--primary-white);
}

.footer_rightside{
}

small{
    color: var(--primary-white);
    font-family: Ubuntu;
    font-size: 1.7rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


.footer_small{
    margin-top: 35px;
}

.footer_btnContact_sp{
    display: none;
}

@media screen and (max-width: 769px){
.footer{
    width: 100%;
    height: auto;
}

.footer_group{
    gap: 0;
}

.footer__img {
    width: 100%;
}

.footer__img img{
    width: 100%;
    height: auto;
}

.footer_leftside{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.footer_rightside{
    margin-top: 70px;
}

.footer__item{
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.15px;
}

small{
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.footer_group{
    display: flex;
    flex-direction: column;
    padding: 80px 0;
}

.footer_btnContact{
    display: none;
}

.footer_btnContact_sp{
    display: block;
    color: var(--primary-white);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.011em;
    padding: 19px 17px;
    position: relative;
    width: 62.1333333333vw;
    background: var(--primary-black);   
    border: 2px solid #FEFFFA;
    margin-top: 58px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 70px auto 0;
    min-height: 55px;
    height: auto;
}

.footer_btnContact_sp::before{
    content: "";
    background-image: url(../img/arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 2.041vw;
    height: 2.666vw;
    position: absolute;
    right: 22px;
}

.footer_btnContact_sp:hover:before{
    background-image: url(../img/arrow_blk.svg);
}


.footer__item--sp{
    display: none;
}

.footer__list{
    margin-bottom: 20px;
    gap: 20px 35px;
}

.footer__c::before{
    content: "";
    display: block;
    width: 78.3422459893vw;
    height: 0.8vw;
    background-color: var(--primary-white);
}

.footer_small{
    margin-top: 20px;
}

} 

/* btn  */
.c-btn.slide {
  background: #222;
  color: #FEFFFA;
  overflow: hidden;
  z-index: 1;
}
.c-btn.slide::after {
  background: #FEFFFA;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.c-btn.slide:hover {
  color: #222;
}
.c-btn.slide:hover::after {
  transform: scale(1, 1);
}


/* btn white */
.c-btn-white.slide {
  background: #FEFFFA;
  color: #222;
  overflow: hidden;
  z-index: 1;
}

.c-btn-white.slide::after {
  background: #222;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.c-btn-white.slide:hover {
  color: #FEFFFA;
}
.otherworks .c-btn-white.slide:hover {
  border: 3px solid #FEFFFA;
}

.c-btn-white.slide:hover::after {
  transform: scale(1, 1);
}