@charset "utf-8";


/* --------------- common --------------- */


.section-ttl-line{
  display: flex;
  align-items: center;
  gap: 1.5em;
}
.section-ttl-line::after{
  content: "";
  flex: 1;
  background-color: rgb(51, 51, 51, 0.7);
  height: 1px;
  margin-top: 0.5em;
}
.section-ttl-line__inner{
  display: flex;
  align-items: baseline;
  gap: 0.8em;
}

.section-ttl-row{
  display: flex;
  align-items: baseline;
  gap: 0.8em;
}
.section-ttl-column__jp{
  margin-top: -0.4em;
}
@media (max-width: 1023px){
}
@media (max-width: 767px){
}



/* btn */
.btn01__wrap{
  width: fit-content;
  margin-top: 3em;
}
.btn01__wrap--center{
  width: fit-content;
  margin: 3em auto 0;
}
.btn01{
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 0.6em 0.8em 0.6em 0;
  border-radius: 0.2em;
  transition: background-color 0.8s cubic-bezier(.15,1,.2,1);
}
.btn01:hover{
  background-color: #444;
}
.btn01.bg-black{
  font-family: "Midashi Go MB31", "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN",  "Hiragino Sans", sans-serif;
  font-weight: 600;
  color: rgb(255, 255, 255, 0.95);
}
.btn01__txt{
  padding: 0 1.5em 0 2em;
}
.btn01__txt>span{
  position: relative;
  display: block;
}
.btn01__txt>span::after{
  content: "";
  position: absolute;
  bottom: 0.35em;
  left: 0;
  width: 0;
  height: 1px;
  background-color: rgb(255, 255, 255, 0.5);
  transition: width 0.3s cubic-bezier(.15,1,.2,1);
}
.btn01:hover .btn01__txt>span::after,
.btn01:active .btn01__txt>span::after{
  width: 100%;
}
.btn01__arrow{
  position: relative;
  width: 1em;
  height: 1em;
  overflow: hidden;
}
.btn01__arrow::before{
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../image/common/arrow_white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: left 0.8s cubic-bezier(.15,1,.2,1);
}
.btn01:hover .btn01__arrow::before,
.btn01:active .btn01__arrow::before{
  left: 0;
}
.btn01__arrow::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../image/common/arrow_white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: left 0.8s cubic-bezier(.15,1,.2,1);
}
.btn01:hover .btn01__arrow::after,
.btn01:active .btn01__arrow::after{
  left: 150%;
}
@media (max-width: 1023px){
}
@media (max-width: 767px){
  .btn01__wrap{
    margin-top: 2.2em;
  }
  .btn01__wrap--center{
    margin: 2.2em auto 0;
  }
  .btn01{
    padding: 0.75em 0.9em 0.75em 0;
  }
  .btn01__txt{
    padding: 0 2.25em 0 3.15em;
  }
}




/* section-bg */
/* heightと背景色は随時指定 */
.section-bg--top{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
}
.section-bg--bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
}



/* --------------- header --------------- */
.header__wrap{
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 5.5em;
  transition: height 1s cubic-bezier(.15,1,.2,1);
}
.header__wrap::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255, 1);
  border-radius: 0 0 0.2em 0.2em;
  box-shadow: 2px 4px 20px 0px rgb(51, 51, 51, 0.02), 2px 4px 30px 4px rgb(51, 51, 51, 0.01);
  opacity: 0;
  transition: opacity 1s cubic-bezier(.15,1,.2,1);
}
.header-scroll .header__wrap::after{
  opacity: 1;
}
.header__inner{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.header__logo{
  transition: opacity 1s cubic-bezier(.15,1,.2,1);
}
.header__logo>a{
  display: flex;
  align-items: center;
}
.header__logo-mark{
  position: relative;
  width: 13.375em;
}
.top-header .header__logo-mark{
  opacity: 0;
}
.header__logo-mark-white{
  transition: opacity 1s cubic-bezier(.15,1,.2,1);
}
.lower-header .header__logo-mark-white{
  opacity: 0;
}
.top-header.header-scroll .header__logo-mark-white{
  opacity: 0;
}
.header__logo-mark-black{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.15,1,.2,1);
}
.lower-header .header__logo-mark-black{
  opacity: 1;
}
.top-header.header-scroll .header__logo-mark-black{
  opacity: 1;
}
.header__logo-name{
  position: relative;
  width: 5em;
  margin-left: 3em;
}
.top-header .header__logo-name{
  opacity: 0;
}
.header__logo-name-white{
  transition: opacity 1s cubic-bezier(.15,1,.2,1);
}
.lower-header .header__logo-name-white{
  opacity: 0;
}
.top-header.header-scroll .header__logo-name-white{
  opacity: 0;
}
.header__logo-name-black{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.15,1,.2,1);
}
.lower-header .header__logo-name-black{
  opacity: 1;
}
.top-header.header-scroll .header__logo-name-black{
  opacity: 1;
}
.header__logo-name::before{
  content: "";
  position: absolute;
  top: 50%;
  left: -1.5em;
  transform: translateY(-50%);
  width: 1px;
  height: 100%;
  background-color: rgb(255, 255, 255, 0.5);
  transition: background-color 1s cubic-bezier(.15,1,.2,1);
}
.lower-header .header__logo-name::before{
  background-color: rgb(51, 51, 51, 0.35);
}
.top-header.header-scroll .header__logo-name::before{
  background-color: rgb(51, 51, 51, 0.35);
}
.header__nav{
  display: flex;
  align-items: center;
}
.header__nav>ul{
  display: flex;
}
.top-header .header__nav-left{
  opacity: 0;
}
.header__nav>ul>li:not(:last-child){
  margin-right: 1.5em;
}
.header__nav>ul>li>a{
  position: relative;
  padding: 0.5em 0;
  transition: color 1s cubic-bezier(.15,1,.2,1), opacity 1s cubic-bezier(.15,1,.2,1);
}
.top-header.header-scroll .header__nav>ul>li>a{
  color: #333;
}
.header__nav>ul>li>a:hover,
.header__nav>ul>li>a:active{
  opacity: 0.6;
}
.header__nav-right{
  position: relative;
  margin-left: 6em;
}
.top-header .header__nav-right{
  opacity: 0;
}
.header__nav-right::before{
  content: "";
  position: absolute;
  top: 50%;
  left: -3em;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: rgb(255, 255, 255, 0.6);
  transition: background-color 1s cubic-bezier(.15,1,.2,1);
}
.lower-header .header__nav-right::before{
  background-color: rgb(51, 51, 51, 0.4);
}
.top-header.header-scroll .header__nav-right::before{
  background-color: rgb(51, 51, 51, 0.4);
}
.header__nav>.header__nav-right>li>a>span{
  position: relative;
}
.header__nav>.header__nav-right>li>a>span::after{
  content: "";
  position: absolute;
  bottom: -0.03em;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(255, 255, 255, 0.8);
  transition: background-color 1s cubic-bezier(.15,1,.2,1);
}
.lower-header .header__nav>.header__nav-right>li>a>span::after{
  background-color: rgb(51, 51, 51, 0.8);
}
.top-header.header-scroll .header__nav>.header__nav-right>li>a>span::after{
  background-color: rgb(51, 51, 51, 0.8);
}
.drawer-btn{
  display: none;
  position: relative;
  width: 2.5em;
  height: 3em;
}
.top-header .drawer-btn{
  opacity: 0;
}
.drawer-btn>span{
  position: absolute;
  top: 38%;
  left: 67.5%;
  transform: translate(-50%,-50%);
  display: block;
  width: 65%;
  height: 2.5px;
  background-color: #fff;
  transition: 1s cubic-bezier(.15,1,.2,1);
}
.lower-header .drawer-btn>span{
  background-color: rgb(51, 51, 51, 0.9);
}
.header-scroll .drawer-btn>span{
  background-color: rgb(51, 51, 51, 0.9);
}
.drawer-show .drawer-btn>span{
  background-color: rgb(51, 51, 51, 0.9);
}
.drawer-btn>span:nth-child(2){
  top: 56%;
  left: 74%;
  width: 50%;
}
.drawer-show .drawer-btn>span{
  top: 48%;
  transform: translate(-50%,-50%) rotate(40deg);
}
.drawer-show .drawer-btn>span:nth-child(2){
  top: 48%;
  left: 67.5%;
  transform: translate(-50%,-50%) rotate(-40deg);
  width: 65%;
}
@media (max-width: 1023px){
  .header__wrap{
    height: 4.5em;
  }
  .drawer-show .header__wrap::after{
    opacity: 0;
    pointer-events: none;
  }
  .drawer-show .header__logo{
    opacity: 0;
    pointer-events: none;
  }
  .header__logo-mark{
    width: 10.5em;
  }
  .header__logo-name{
    width: 4.2em;
    margin-left: 2em;
  }
  .header__logo-name::before{
    left: -1em;
  }
  .header__nav{
    display: none;
  }
  .drawer-btn{
    display: block;
  }
}
@media (max-width: 767px){
}

/* ---- drawer ---- */
.drawer-menu{
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  width: min(70%,28em);
  height: 100%;
  border-radius: 0.2em 0 0 0.2em;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(.15,1,.2,1);
  overflow-y: scroll;
  /* スクロールバー非表示 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/*Google Chrome、Safariスクロールバー非表示*/
.drawer__menu::-webkit-scrollbar {
  display: none;
}
.drawer-show .drawer-menu{
  pointer-events: inherit;
  transform: translateX(0);
  transition: transform 0.8s cubic-bezier(.15,1,.2,1);
}
.drawer-menu__inner{
  display: flex;
  flex-direction: column;
  width: 85%;
  min-height: 100svh;
  margin: 0 auto;
}
.drawer-menu__nav{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6em 0;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(.15,1,.2,1);
}
.drawer-show .drawer-menu__nav{
  opacity: 1;
  transition: opacity 1.2s 0.18s cubic-bezier(.15,1,.2,1);
}
.drawer-menu__nav-bottom::before{
  content: "";
  display: block;
  width: 2.2em;
  height: 1px;
  background-color: rgb(51, 51, 51, 0.3);
  margin: 1.4em 0;
}
.drawer-menu__nav>ul>li+li{
  margin-top: 0.5em;
}
.drawer-menu__nav>ul>li>a{
  display: block;
  width: fit-content;
  padding: 0.2em 0.2em 0.2em 0;
}
.drawer-menu__info{
  color: rgb(51, 51, 51, 0.7);
  padding: 1.5em 0 2em;
  border-top: 1px solid rgb(51, 51, 51, 0.3);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(.15,1,.2,1);
}
.drawer-show .drawer-menu__info{
  opacity: 1;
  transition: opacity 1.4s 0.24s cubic-bezier(.15,1,.2,1);
}
.drawer-menu__info>p+p{
  margin-top: 0.5em;
}
.drawer-menu__info a{
  color: rgb(51, 51, 51, 0.7);
}
.drawer-bg{
  position: fixed;
  z-index: 98;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(51, 51, 51, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s cubic-bezier(.15,1,.2,1);
}

@media (max-width: 1023px){
  .drawer-menu{
    display: block;
  }
  .drawer-show .drawer-bg{
  opacity: 1;
  pointer-events: inherit;
}
}
@media (max-width: 767px){
}


/* --------------- footer --------------- */
.footer__wrap,
.footer__wrap a{
  color: rgb(255, 255, 255, 0.9);
}
.footer__inner{
  display: flex;
  justify-content: space-between;
}
.footer__left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.footer__logo{
  width: 16em;
  opacity: 0.9;
}
.footer__info{
  margin-top: 1.5em;
}
.footer-num{
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  margin-top: 0.5em;
}
.footer__right{
  display: flex;
}
.footer__nav{
  margin-right: 4em;
}
.footer__nav>ul{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.footer__nav>ul>li>a{
  display: block;
  width: fit-content;
  padding: 0.2em 0;
}
.footer__wrap .footer__nav>ul>li>a:hover{
  color: #fff;
}
.footer__nav>ul>li>a>span{
  position: relative;
}
.footer__nav>ul>li>a>span::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: rgb(255, 255, 255, 0.6);
  transition: width 0.3s cubic-bezier(.15,1,.2,1);
}
.footer__nav>ul>li>a:hover>span::after,
.footer__nav>ul>li>a:active>span::after{
  width: 100%;
}
.footer__btn>li+li{
  margin-top: 1em;
}
.footer__btn>li>a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 22em;
  padding: 1.6em 1.6em;
  background-color: rgb(255, 255, 255, 0.05);
  border-radius: 0.5em;
  transition: background-color 0.8s cubic-bezier(.15,1,.2,1);
}
.footer__btn>li>a:hover,
.footer__btn>li>a:active{
  background-color: rgb(255, 255, 255, 0.1);
}
.footer__btn-txt{
  display: flex;
  align-items: baseline;
}
.footer__btn-txt-en{
  margin-right: 0.5em;
}
.footer__btn-arrow{
  position: relative;
  width: 1.2em;
  height: 1.2em;
  opacity: 0.9;
  overflow: hidden;
}
.footer__btn-arrow::before{
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../image/common/arrow_white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: left 0.8s cubic-bezier(.15,1,.2,1);
}
.footer__btn>li>a:hover .footer__btn-arrow::before,
.footer__btn>li>a:active .footer__btn-arrow::before{
  left: 0;
}
.footer__btn-arrow::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../image/common/arrow_white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: left 0.8s cubic-bezier(.15,1,.2,1);
}
.footer__btn>li>a:hover .footer__btn-arrow::after,
.footer__btn>li>a:active .footer__btn-arrow::after{
  left: 150%;
}
.footer__copyright{
  display: block;
  width: fit-content;
  margin: 2em 0 0 auto;
  opacity: 0.5;
}
@media (max-width: 1279px){
  .footer__inner{
    align-items: flex-start;
  }
  .footer-num{
    flex-direction: column;
    gap: 0.8em;
  }
}
@media (max-width: 1023px){
  .footer__inner{
    flex-direction: column;
    align-items: stretch;
  }
  .footer__right{
    justify-content: space-between;
    margin-top: 4em;
  }
  .footer__nav{
    margin-right: 0;
  }
}
@media (max-width: 767px){
  .footer__nav{
    line-height: 1.3;
  }
  .footer__btn{
    width: 60%;
  }
  .footer__btn-txt{
    flex-direction: column;
  }
  .footer__btn-txt-jp{
    margin-top: -0.2em;
  }
  .footer__btn-arrow{
    width: 1.2em;
    height: 1.2em;
  }
  .footer__btn>li>a{
    width: 100%;
    padding: 1em;
  }
}



/* --------------- top --------------- */

/* ---- fv ---- */
.top-fv{
  position: relative;
  height: 100svh;
  background-color: #333;
}
.top-fv__movie{
  height: 100%;
  overflow: hidden;
}
.top-fv__movie::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgb(0, 11, 22, 1), rgb(0, 11, 22, 0.1));
  opacity: 0.2;
}
.top-fv__movie video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-fv__play{
  position: absolute;
  z-index: 1;
  bottom: 2vw;
  right: 2vw;
  width: fit-content;
  opacity: 0;
}
.top-fv__play-cont{
  display: flex;
  justify-content: center;
  align-items: center;
}
.top-fv__play-btn{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  margin: 0 1.2em;
  cursor: pointer;
}
.top-fv__play-btn::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgb(255, 255, 255, 0.9);
  transition: transform 0.11s linear;
}
.top-fv__play-btn:active::after{
  transform: scale(1.06);
}
.top-fv__play-btn-icon{
  width: 27%;
  height: 27%;
  background-image: url(../image/top/movie_stop.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.movie-stop .top-fv__play-btn-icon{
  background-image: url(../image/top/movie_start.svg);
  transform: translateX(12%);
}
.top-fv__play-indicator{
  width: 2px;
  height: 3em;
  background-color: rgb(255, 255, 255, 0.5);
  border-radius: 1px;
  overflow: hidden;
}
.top-fv__play-indicator-inner{
  width: 100%;
  height: 0;
  background-color: rgb(255, 255, 255, 0.9);
}
.top-fv__play-txt{
  font-size: 0.7em;
  letter-spacing: 0;
}


.top-fv__ttl{
  position: absolute;
  z-index: 1;
  left: 6.25%;
  top: 60%;
  transform: translateY(-50%);
  width: fit-content;
  text-shadow: 1px 1px 2px rgb(51, 51, 51, 0.08), 1px 1px 10px rgba(0, 0, 0, .05);
  opacity: 0;
}
.top-fv__scroll{
  position: absolute;
  z-index: 1;
  bottom: 2vw;
  left: 2%;
  display: flex;
  align-items: flex-start;
  opacity: 0;
}
.top-fv__scroll-bar{
  width: 1px;
  height: 7.5em;
  background-color: rgb(255, 255, 255, 0.5);
}
.top-fv__scroll-txt{
  color: rgb(255, 255, 255, 0.9);
  writing-mode: sideways-lr;
}
@media (max-width: 1023px){
}
@media (max-width: 767px){
  .top-fv{
    height: 75svh;
  }
  .top-fv__movie{
    height: 75svh;
  }
  .top-fv__ttl{
    left: 5%;
    top: auto;
    bottom: calc(5vw + 5em);
    transform: translateY(0);
  }
  .top-fv__scroll{
    left: 5%;
    bottom: 5vw;
  }
  .top-fv__scroll-bar{
    height: 3.5em;
  }
  .top-fv__play-btn{
    width: 2.2em;
    height: 2.2em;
    margin: 0 1em;
  }
  .top-fv__play-indicator{
    height: 2.5em;
  }
  .top-fv__play-txt{
    font-size: 10px;
    transform: scale(0.9);
  }
}


/* ---- message ---- */

@media (max-width: 1023px){
}
@media (max-width: 767px){
}


/* ---- service ---- */
.top-service__list{
  margin-top: 3em;
}
.top-service__list>li{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-service__list>li+li{
  margin-top: 2.5em;
}
.top-service__list-left,
.top-service__list-right{
  width: 48.1482%;
}
.top-service__list-ttl{
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.top-service__list-ttl-en{
  color: rgb(51, 51, 51, 0.5);
}
.top-service__list .btn01__wrap{
  margin-top: 6%;
}
.top-service__garment .btn01__wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
@media (max-width: 1023px){
  .top-service__list>li+li{
    margin-top: 4.5em;
  }
}
@media (max-width: 767px){
  .top-service__list>li{
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .top-service__list-left{
    width: 100%;
    margin-top: 1.5em;
  }
  .top-service__list .btn01__wrap{
    margin-top: 1.5em;
  }
  .top-service__list-right{
    width: 75%;
  }
}


/* ---- sample ---- */
.top-sample__inner{
  margin-top: 3em;
  overflow: hidden;
}
.top-sample__inner .splide{
  display: flex;
  flex-wrap: wrap;
  width: 117.7778%;
}
.top-sample__inner .btn01__wrap{
  flex: 1;
  margin-top: 0;
}
.top-sample__inner .splide__arrows{
  display: flex;
  justify-content: flex-end;
  width: fit-content;
  gap: 0.7em;
  margin-right: 15.0944%;
}
.top-sample__inner .splide__arrow{
  position: relative;
  width: 2.5em;
  height: 2.5em;
  background-color: rgb(51, 51, 51, 0.6);
  border-radius: 0.25em;
  transition: background-color 0.8s cubic-bezier(.15,1,.2,1), transform 0.11s linear;
}
.top-sample__inner .splide__arrow:hover{
  background-color: rgb(51, 51, 51, 0.7);
}
.top-sample__inner .splide__arrow:active{
  transform: scale(0.95);
}
.top-sample__inner .splide__arrow:disabled{
  background-color: rgb(51, 51, 51, 0.3);
}
.top-sample__inner .splide__arrow:disabled:active{
  transform: scale(1);
}
.top-sample__inner .splide__arrow::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 35%;
  height: 35%;
  background-image: url(../image/common/small_arrow_white_prev.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.top-sample__inner .splide__arrow--next::after{
  background-image: url(../image/common/small_arrow_white_next.svg);
}
.top-sample__inner .splide__arrow>svg {
  display: none;
}
.top-sample__inner .splide__track{
  margin-top: 2.5em;
  cursor: grab;
}
.top-sample__inner .splide__track:active{
  cursor: grabbing;
}
@media (max-width: 1023px){
  .top-sample__inner{
    margin-top: 3.5em;
  }
  .top-sample__inner .splide{
    width: 130%;
  }
  .top-sample__inner .splide__arrows{
    margin-right: 23.077%;
  }
}
@media (max-width: 767px){
}


/* ---- recruit ---- */
.top-recruit__inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3em;
}
.top-recruit__left,
.top-recruit__right{
    width: 48.1482%;
}
.top-recruit__txt{
  margin-top: 0.2em;
}
.top-recruit__link{
  margin-top: 10%;
}
.top-recruit__link>li+li{
  margin-top: 0.8em;
}
.top-recruit__link>li>a{
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8em;
  width: fit-content;
}
.top-recruit__link>li>a::after{
  content: "";
  position: absolute;
  bottom: 0.2em;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(51, 51, 51, 0.5);
}
.top-recruit__link>li>a::before{
  content: "";
  position: absolute;
  bottom: 0.2em;
  left: 0;
  width: 0;
  height: 1px;
  background-color: rgb(51, 51, 51, 0.7);
  transition: width 0.3s cubic-bezier(.15,1,.2,1);
}
.top-recruit__link>li>a:hover::before,
.top-recruit__link>li>a:active::before{
  width: 100%;
}
.top-recruit__link-arrow{
  position: relative;
  width: 0.8em;
  height: 0.8em;
  overflow: hidden;
}
.top-recruit__link-arrow::before{
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../image/common/arrow_black.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: left 0.8s cubic-bezier(.15,1,.2,1);
}
.top-recruit__link>li>a:hover .top-recruit__link-arrow::before,
.top-recruit__link>li>a:active .top-recruit__link-arrow::before{
  left: 0;
}
.top-recruit__link-arrow::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../image/common/arrow_black.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: left 0.8s cubic-bezier(.15,1,.2,1);
}
.top-recruit__link>li>a:hover .top-recruit__link-arrow::after,
.top-recruit__link>li>a:active .top-recruit__link-arrow::after{
  left: 150%;
}
.top-recruit .btn01__wrap{
  margin-top: 6%;
}
.top-recruit .btn01__wrap>a+a{
  margin-top: 0.5em;
}
@media (max-width: 1023px){
}
@media (max-width: 767px){
  .top-recruit__inner{
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .top-recruit__left{
    width: 100%;
    margin-top: 1.5em;
  }
  .top-recruit__link{
    margin-top: 1.8em;
  }
  .top-recruit__link>li>a{
    gap: 0.6em;
  }
  .top-recruit .btn01__wrap{
    margin-top: 2em;
  }
  .top-recruit__right{
    width: 75%;
  }
}




/* ---- news ---- */
.top-news__inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3em;
}
.top-news .btn01__wrap{
  margin-top: 0;
}
.top-news__right{
  width: 70%;
}
.top-news__list>li>a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6em;
  border-radius: 0.25em;
  transition: background-color 0.8s cubic-bezier(.15,1,.2,1);
}
.top-news__list>li>a:hover,
.top-news__list>li>a:active{
  background-color: #eaebec;
}
.top-news__list>li+li{
  margin-top: 1em;
}
.top-news__list-cont{
  flex: 1;
  display: flex;
  align-items: center;
  margin-right: 2em;
}
.top-news__list-time{
  width: 7em;
  color: rgb(51, 51, 51, 0.7);
}
.top-news__list-ttl{
  flex: 1;
}
.top-news__list-arrow{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-left: auto;
  border-radius: 0.2em;
}
.top-news__list-arrow-inner{
  width: 40%;
  height: 40%;
}
.top-news__list-arrow-icon{
  width: 100%;
  height: 100%;
  background-image: url(../image/common/small_arrow_white_next.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media (max-width: 1023px){
  .top-news__list>li>a{
    padding: 0.8em 1em;
  }
  .top-news__list-cont{
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 767px){
  .top-news__wrap{
    flex-direction: column;
    align-items: flex-start;
  }
  .top-news__inner{
    margin-top: 2.5em;
  }
  .top-news__left{
    margin-bottom: 0;
  }
  .top-news__right{
    width: 100%;
  }
  .top-news__list-cont{
    margin-right: 0.8em;
  }
  .top-news__right .btn01__wrap{
    margin: 2em 0 0 auto;
  }
}






/* --------------- 下層共通 --------------- */

/* ---- fv ---- */
.lower-fv{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.lower-info-fv{
  position: relative;
  padding-bottom: 2em;
}
.lower-info-fv::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(51, 51, 51, 0.7);
}
.lower-fv__ttl{
  padding-top: 26svh;
}
.lower-fv__ttl-en{
  color: rgb(51, 51, 51, 0.6);
  opacity: 0;
}
.lower-fv__ttl-jp{
  opacity: 0;
}
.breadcrumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0;
}
.breadcrumbs,
.breadcrumbs a{
  color: rgb(51, 51, 51, 0.5);
}
.breadcrumbs>li{
  display: flex;
  align-items: center;
}
.breadcrumbs>li:nth-child(n+2)::before{
  content: "/";
  font-family: "Gothic Medium BBB", "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN",  "Hiragino Sans", sans-serif;
  font-weight: 400;
  margin-right: 1.5em;
}
.breadcrumbs>li:not(:last-child){
  margin-right: 1.5em;
}
.lower-fv__image{
  overflow: hidden;
}
.lower-fv__image>img{
  transform: scale(1.03);
}

@media (max-width: 1023px){
  .lower-fv{
    justify-content: flex-start;
    min-height: none;
  }
}
@media (max-width: 767px){
  .lower-fv__ttl{
    padding-top: 21svh;
  }
  .lower-fv__image{
    aspect-ratio: 10 / 6;
  }
  .lower-fv__image>img{
    height: 100%;
    object-fit: cover;
  }
}

/* ---- message ---- */
.lower-message__txt{
  width: min(90%,40em);
  text-align: justify;
  margin: 2em auto 0;
}
@media (max-width: 1023px){
}
@media (max-width: 767px){
  .lower-message__txt{
    width: min(90%,36em);
    margin-top: 1.3em;
  }
}








/* --------------- about --------------- */

/* ---- value ---- */
.about-value .section-ttl-line{
  margin-bottom: 3em;
}
.about-value__item{
  grid-gap: 3.7037%;
}
.about-value__subttl{
  padding-bottom: 0.75em;
  width: fit-content;
  border-bottom:1px solid #888888;
  margin-bottom: 8%;
}
.about-value__subttl p{
  line-height: 0.7;
}
.about-value hr{
  margin: 2.5em auto;
  background-color: #4d4d4d;
  height: 1px;
  border: none;
  opacity:0.5;
}
@media (max-width: 1023px){
}
@media (max-width: 767px){
  .about-value .section-ttl-line{
    margin-bottom: 2.5em;
  }
  .about-value__figure{
    width: 75%;
  }
  .about-value__subttl{
    margin: 0.8em 0 0.8em;
    padding-bottom: 0.5em;
  }
}


/* ---- message ---- */
.about-message__cont{
  grid-template-columns:37.0371% 1fr;
  grid-gap: 10%;
  align-items: center;
  margin-top: 3em;
}
@media (max-width: 1023px){
}
@media (max-width: 767px){
  .about-message__cont{
    grid-template-columns:repeat(1,1fr);
    grid-gap: 1.5em;
    margin-top: 2em;
  }
  .about-message__cont figure{
    width: 60%;
  }
  .about-message__name{
    text-align: left;
  }
}


/* ---- mission ---- */

@media (max-width: 1023px){
}
@media (max-width: 767px){
}


/* ---- company ---- */
.about-profile__cont{
  width: min(100%,50em);
  margin: 3em auto 0;
}
.about-profile__cont tr{
  border-bottom:1px solid #eceaea;
}
.about-profile__cont th{
  width: 10em;
  padding: 1.25em 0;
}
.about-profile__cont td{
  padding: 1.25em 0;
}
.about-profile__gmap{
  aspect-ratio: 16 / 12;
    max-width: 22.5em;
    width: 100%;
    height: auto;
}
@media (max-width: 1023px){
}
@media (max-width: 767px){
  .about-profile__cont{
    margin-top: 1.5em;
  }
  .about-profile__cont th,td{
    display: block;
    width: 100%;
    padding:0;
  }
  .about-profile__cont th{
    padding-top: 1em ;
  }
  .about-profile__cont td{
    padding: 0 0 1em 0;
  }
  .about-profile__gmap{
    margin-top: 0.5em;
  }
}




/* --------------- works --------------- */
/* 準備中 */
@media (max-width: 1023px){
}

.service-sample__head{
  display: grid;
  grid-template-columns: 1fr 48.5%;
  grid-gap: 5%;
  align-items: center;
}
.service-sample__list{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  column-gap: 2.2222%;
  margin-top: 2em;
}
.service-sample__list>li{
  margin-top: 9.5239%;
}
@media (max-width: 1023px){
  .service-sample__list{
    grid-template-columns: repeat(3,1fr);
  }
}
@media (max-width: 767px){
  .service-sample__head{
    grid-template-columns: repeat(1,1fr);
    grid-gap: 0.8em;
  }
  .service-sample__list{
    grid-template-columns: repeat(2,1fr);
    column-gap: 4%;
    margin-top: 1em;
  }
}




/* --------------- service --------------- */
/* ---- categoly ---- */
.service__cate-sub{
  grid-template-columns: 1fr 45%;
}
.service__cate-sub+.service__cate-sub{
  margin-top: 1.9em;
}

/* ---- sample ---- */
.service__sample-inner{
  padding-inline:4%;
}

.service__sample-item{
  grid-template-columns: repeat(3,1fr);
}
.service__sample-item-ttl h3{
  padding: 0.4em 0.75em;
}

@media (max-width: 1023px){
}
@media (max-width: 767px){
  .service__cate-main div{
    order:1;
  }
  .service__cate-main figure{
    width: 75%;
    margin-inline: auto;
    order:2;
  }
  .service__cate-sub{
    grid-template-columns: repeat(1,1fr);
  }
  .service__cate-sub+.service__cate-sub{
    padding-top: 3.375rem;
    padding-top: clamp(3.375rem, 2.374rem + 4.27vw, 7.5rem);
  }
  .service__cate-sub figure{
    width: 75%;
    margin-inline: auto;
  }
  .service__sample-item-ttl{
    flex-direction: column;
    align-items: flex-start;
  }
  
  .service__sample-item{
    grid-template-columns: repeat(2,1fr);
  }
}







/* --------------- recruit --------------- */
.recruit__interview-item-ttl{
  padding-bottom: 1.5em;
  grid-template-columns: 23% 1fr;
  border-bottom:1px solid 
  rgb(51, 51, 51, 0.7);
}
.recruit__interview-item-info{
  position: relative;
}
.recruit__interview-item-info::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 100%;
  background-color: rgb(51, 51, 51, 0.7);
}
.recruit__interview-item-ttl .txt-25-42{
  line-height: 1;
}
.recruit__interview-item-ttl .txt-10-12{
  opacity:0.6;
}
.recruit__interview-item-ttl-name{
  opacity: 0.7;
}
.recruit__interview-item-question{
  position: relative;
  width: 17.5em;
  padding: 0.2em 0.2em 0.2em 2.5em;
}
.recruit__interview-item-question::before{
  position: absolute;
  top:50%;
  left:0.5em;
  display: block;
  width: 1.25em;
  height: 1.25em;
  content: url('../image/recruit/question.svg');
  translate:0 -50%;
}

.recruit-requirement__info{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 3.7037%;
  margin-top: 3em;
}
.recruit-requirement__info-cont+.recruit-requirement__info-cont{
  margin-top: 4em;
}
.recruit-requirement__info-image+.recruit-requirement__info-image{
  margin-top: 2em;
}
.recruit-requirement__type-list{
  width: min(100%,50em);
  margin: 0 auto;
}

.requirement__cont-right{
  margin-left:-2em;
  margin-top: 8em;
}
.requirement__ttl-sub{
  position: relative;
}
.requirement__type{
  padding-inline: 8%;
}
.requirement__ttl {
  padding-bottom: 0.5em;
  border-bottom:1px solid #bdbbbb;
}
.requirement__ttl-sub::after{
  display: block;
  width: 100%;
  content: '';
  height: 1px;
  border:none;
  background-color: #4d4d4d;
  opacity:0.4;
  margin-top: 0.5em;
}
.requirement__type-table{
  width: 100%;
}
.requirement__type-table tr{
  border-bottom:1px solid #eceaea;
}
.requirement__type-table th{
  width: 15em;
}
.requirement__type-table th,td{
  padding:1em 0;
}
.requirement__type-ttl-sub{
  padding: 0.1em 0.75em;
}
.recruit__entry{
  position: relative;
  display: inline-block;
  width: 29em;
  background-color: #333333;
  color: #fff;
  padding: 2em 0.5em;
  border-radius: 0.4em;
}
.recruit__entry::after{
  position: absolute;
  top:50%;
  right:1.5em;
  display: block;
  width: 1.75em;
  height: 1.75em;
  content: url('../image/recruit/arrow.svg');
  translate:0 -50%;
}
.recruit__entry .midashigo{
  border-bottom: 2px solid #fff;
}
@media (max-width: 1023px){
}
@media (max-width: 767px){
  .recruit__interview-item-info::after{
    display: none;
  }
  .recruit__interview-item-image{
    width: 75%;
  }

  .recruit-requirement__info{
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 3em;
  }
  .recruit-requirement__info-cont+.recruit-requirement__info-cont{
    margin-top: 2.2em;
  }
  .recruit-requirement__info-right{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .recruit-requirement__info-image{
    width: 48%;
  }
  .recruit-requirement__info-image+.recruit-requirement__info-image{
    margin-top: 0;
  }
  .recruit-requirement__info-image:nth-child(3){
    width: 52%;
    margin: 4% auto 0;
  }



  .recruit__interview-item-ttl{
    grid-template-columns: repeat(1,1fr);
  }
  .requirement__cont{
    display: grid;
    grid-template-columns: repeat(1,1fr);
  }
  .requirement__cont-right{
    width: 90%;
    margin-inline:auto;
    margin-top: -3.5em;
    background-color: #f7f7f7;
    padding: 1em;
  }
  .recruit__environment-right{
    order:1;
  }
  .recruit__environment-left{
    order:2;
    width: 90%;
    margin-inline: auto;
    margin-top: -3.5em;
    background-color: #f7f7f7;
    padding: 1em;
  }
  .requirement__type-table th,td{
    display: block;
    width: 100%;
    padding:0;
  }
  .requirement__type-table th{
    padding-top: 1em ;
  }
  .requirement__type-table td{
    padding-bottom: 1em ;
  }
  .recruit__entry{
    width: 17em;
    padding: 0.2em 0.5em;
  }
  .recruit__entry .midashigo{
    border-bottom: inherit;
    line-height: 1;
  }
}







/* --------------- news --------------- */
.archive-news__list-item{
  border-bottom: 1px solid rgb(51, 51, 51, 0.4);
}
.archive-news__list-item>a{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 0;
}
.archive-news__list-cont{
  flex: 1;
  display: flex;
  align-items: baseline;
}
.archive-news__list-date{
  color: rgb(51, 51, 51, 0.7);
  margin-right: 2em;
}
.archive-news__list-arrow{
  width: 1.5em;
}

.single-news__cont{
  border-bottom: 1px solid rgb(51, 51, 51, 0.5);
}
.single-news__cont img{
  display: block;
  width: 65%;
}
.single-news .btn01__wrap{
  margin: 5em auto 0;
}

@media (max-width: 1023px){
}
@media (max-width: 767px){
  .archive-news__list-item>a{
    padding-bottom: 1em;
    padding-top: 1.5em;
  }
  .archive-news__list-cont{
    flex-direction: column;
  }
  .archive-news__list-date{
    display: block;
  }
  .archive-news__list-arrow{
    top: 2.2em;
  }
  .single-news__cont img{
    width: 75%;
  }
}








/* --------------- contact --------------- */
.contact-item{
  margin-top: 2em;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.contact-item__text{
  margin-top: 0.5em;
}
.contact-item__name{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.contact-item__required{
  padding: 0 0.4em;
  border-radius: 3px;
  margin-left: 0.5em;
}
.contact-item__box{
  width: 30em;
}
.contact-item__box input{
  border: 1px solid #bcbcbc;
  padding: 0.5em 0.5em;
  width: 100%;
  border-radius: 2px;
}
.contact-item__box textarea{
  border: 1px solid #bcbcbc;
  height: 8em;
  width: 100%;
  border-radius: 2px;
}
.contact-cont-privacy{
  display: flex;
  align-items: center;
  background-color: #f2f2f0;
  margin-top: 2em;
  margin-left: auto;
  width: 30em;
  padding: 1em 0.6em 1em 1.2em;
  border-radius: 4px;
}
.contact-cont-privacy .wpcf7-list-item{
  margin: 0 1.2em 0 0;
}
.contact-privacy-link{
  border-bottom: 1px solid #111111;
}
.contact-cont__btn-wrapper{
  width: 30em;
  margin: 3em 0 0 auto;
}
.contact-cont__submit-btn{
  margin-top: 1.5em;
}
.submit-button{
  display: block;
  width: 100%;
  font-family: "Midashi Go MB31", "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN",  "Hiragino Sans", sans-serif;
  /* 16-20 */
  font-size: clamp(1rem, 0.939rem + 0.26vw, 1.25rem);
  letter-spacing: 0.1em;
  line-height: 1.55;
  text-align: center;
  color: #fff;
  text-decoration: underline;
  background-color: #333;
  padding: 1.2em 0;
  border-radius: 0.4em;
}
.wpcf7-spinner {
  display: none;
}

.contact-thanks__message p{
  margin-top: 2em;
}
.contact-thanks__message-tel{
  margin-top: 2em;
}
.contact-thanks-line{
  height: 1px;
  background-color: #111111;
  width: 25%;
  margin: 4em auto;
}
.contact-thanks__btn{
  position: relative;
  border-radius: 2px;
  margin: 0 auto;
  width: 13em;
}
.contact-thanks__btn p{
  padding: 0.5em;
}
.contact-thanks__btn-arrow{
  position: absolute;
  top: 0.4em;
  right: 0.5em;
  width: 1em;
}

@media (max-width: 1023px){
  .contact-item{
    display: block;
  }
  .contact-item__box{
    width: 100%;
    margin-top: 0.5em;
  }
  .contact-cont-privacy{
    width: 100%;
  }
  .contact-cont__btn-wrapper{
    width: 100%;
  }
}
@media (max-width: 767px){
}








/* --------------- privacy --------------- */

.privacy-cont-text{
  margin-top: 1.5em;
}
.privacy-line{
  height: 1px;
  background-color: #111111;
  margin: 4em auto;
}
.privacy-cont-list{
  margin-top: 4em;
}
.privacy-cont-list p{
  margin-top: 0.8em;
}

@media (max-width: 1023px){
}
@media (max-width: 767px){
  .privacy-cont-list{
    margin-top: 3em;
  }
  .privacy-cont-list p{
    margin-top: 0.5em;
  }
}



/* --------------- interaction --------------- */
.fade-in{
  opacity: 0;
  transition: opacity 0.3s linear;
}
.fade-in.active{
  opacity: 1;
}




@media (max-width: 1023px){
}
@media (max-width: 767px){
}