@charset "UTF-8";


/* ===== 背景動画 ===== */
.bg_video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  z-index: -1;
}
.bg_video:before{
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  background: linear-gradient(
      0deg,
      rgba(37, 36, 33, 0.35),
      rgba(37, 36, 33, 0.35)
    );
  background-size: cover;f
  background-position: center;
  pointer-events: none; /* クリック透過 */    
}

.bg_video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg_video .color1{
    opacity: 0;
    position: relative;
    z-index: 5;
    transition: opacity var(--duration-main) var(--easing-opacity);
}
.bg_video .color2{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;



}

/* ===== マスク ===== */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: #F7F7F7 url(../img/common/bg01.png) 0 0 repeat;
  background-size: 100px;
  z-index: 1;
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-size: 100% 100%, 25rem 25rem;
  mask-position: center, center;
  mask-repeat: no-repeat;
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  /*    animation: maskZoom 1.6s ease forwards;*/
  transition: -webkit-mask-size 0.7s cubic-bezier(0.65, 0, 0.35, 1.4), mask-size 0.7s cubic-bezier(0.65, 0, 0, 1);
}



/* ===== アニメーション ===== */
/*@keyframes maskZoom {
  0% {
    -webkit-mask-size: 100% 100%, 25rem 25rem;
            mask-size: 100% 100%, 25rem 25rem;
  }

  100% {
    -webkit-mask-size: 100% 100%, 200vw 200vw;
            mask-size: 100% 100%, 200vw 200vw;
  }
}*/

/* ===== ロード ===== */
.load{
  background: #F7F7F7 url(../img/common/bg01.png) 0 0 repeat;
  background-size: 100px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  z-index: 200;
}

.load.anim3{

    visibility: hidden;
    transition: transform .4s, opacity .4s, visibility 0s .4s;
    transition-delay: 0.5s,0.5s,0.9s;
    opacity: 0;
}

.load_box{
    background: #252421;
    width: calc(25rem);
    height:  calc(25rem);
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


.load_box2,
.load_box2 span{
    display: block;
    position: absolute;
    z-index: 1;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
}
.load_box2{
    transition: opacity 1.2s cubic-bezier(.26, 1, .48, 1);  
    transition-delay: 0.7s;   
}
.anim1 .load_box2{
    opacity: 0;
}


.load_box2:before,
.load_box2:after{
    content: "";
    z-index: 1;
    position: absolute;
    
    background: #E7E7E7;
    right:0;
    left: 0;
    height: 2px;
    transition: transform 1.2s cubic-bezier(.26, 1, .48, 1);    
}
.load_box2:before{
    top: 0;
    transform: scale(0,1);
    transform-origin: bottom left;
}
.anim1 .load_box2:before {
    transform: scale(1,1);
}

.load_box2:after{
    bottom: 0;
    transform: scale(0,1);
    transform-origin: top right;
}
.anim1 .load_box2:after{
    transform: scale(1,1);
}



.load_box2 span:before,
.load_box2 span:after{
    content: "";
    z-index: 1;
    position: absolute;
    
    background: #E7E7E7;
    top:0;
    bottom: 0;
    width: 2px;
    transition: transform 1.2s cubic-bezier(.26, 1, .48, 1);    
}
.load_box2 span:before{
    left: 0;
    transform: scale(1,0);
    transform-origin: bottom right;
}
.anim1 .load_box2 span:before{
    transform: scale(1,1);
}
.load_box2 span:after{
    right: 0;
    transform: scale(1,0);
    transform-origin: top left;
}
.anim1 .load_box2 span:after{
    right: 0;
    transform: scale(1,1);
}



.load_box2{
    overflow: hidden;
      background: #F7F7F7 url(../img/common/bg01.png) 0 0 repeat;
      background-size: 100px;    
}
.load_logo1{
    position: absolute;
    z-index: 1;
    width: 30%;
    height: 0;
    top: -1px;
    left: 14%;
    background: url(../img/front/load_logo1.svg) 0 0 no-repeat;
    background-size: 100% auto;
    opacity: 0;

  transition: opacity 1.3s cubic-bezier(0.4, 0, 1, 1), 
              height 0.9s cubic-bezier(0.4, 0, 1, 1);

}
.anim2 .load_logo1{
    height: calc(100% + 2px);
    opacity: 1;
}

.load_logo2{
    position: absolute;
    z-index: 1;
    width: 34%;
    height: 0;
    bottom: -1px;
    right: 8%;
    background: url(../img/front/load_logo2.svg) 0 100% no-repeat;
    background-size: 100% auto;
    opacity: 0;

  transition: opacity 1.3s cubic-bezier(0.4, 0, 1, 1), 
              height 0.9s cubic-bezier(0.4, 0, 1, 1);    
}
.anim2 .load_logo2{
    height: calc(100% + 2px);
    opacity: 1;    
}

.load_logo3{
    position: absolute;
    z-index: 1;
    top: 115%;
    width: 77%;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;


}
.load_logo3 img{
  transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);       
    transform: translate(0,calc(100% + 1px));
    transition-delay: 0.4s;
}

.anim2 .load_logo3 img{
    transform: translate(0,0);
}
.anim3 .load_logo3 img{
    transform: translate(0,calc(-100% - 1px));
}
.load_logo4{
    position: absolute;
    z-index: 1;
    top: 143%;
    width: 51%;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    line-height: 1;
}
.load_logo4 img{
  transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);           
    transform: translate(0,calc(100% + 1px));
    transition-delay: 0.4s;    
}
.anim2 .load_logo4 img{
    transform: translate(0,0);
}
.anim3 .load_logo4 img{
    transform: translate(0,calc(-100% - 1px));
}



.load_mes{

    width: 100%;
    height: 6.3rem;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translate(0, -50%);
    overflow: hidden;
}


.load_mes_bg{
  background: url(../img/front/load_line.png) 50% 0 no-repeat;
  background-size: auto 100%;
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 119.7rem;
  left: 0;
  right: 0;
  margin: 0 auto;
    transform: translate(-120%, 0);
    opacity: 0;
}
.anim0_1 .load_mes_bg{
  animation: loadMesMove 3s ease-in-out forwards;
}


@keyframes loadMesMove {

  /* 左から登場 */
  0%{
    transform: translate(-120%, 0);
    opacity: 0;
  }

  /* 中央付近で最大表示 */
  50%{

    opacity: .6;
  }

  /* 右へ抜けながら消える */
  100%{
    transform: translate(120%, 0);
    opacity: 0;
  }
}

.load_mes_txt{
    width: 54rem;
    height: 4.5rem;
    /* background: #cff; */
    position: absolute;
    z-index: 1;
    /* top: 0; */
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 1;
    transition: opacity 1.2s cubic-bezier(0.26, 0.06, 0, 1), transform 1.2s cubic-bezier(0.18, 0.06, 0.23, 1);
    transform: translate(-5rem,0);
}
.anim0_1 .load_mes_txt{
    transform: translate(0,0);
    transition-delay: 0.6s;
}

.anim0_2 .load_mes_txt{
    transform: translate(0rem,-1rem);
    transition-delay: 0s;

    opacity: 0;
}

.load_mes_txt:before{
    content: "";
    z-index: 1;
    position: absolute;
    background: #f7f7f7;
    top:-3px;
    bottom: -3px;
    right:-3px;
    left: -3px;
}
.anim0_1 .load_mes_txt:before{
    animation: loadMesMove2 3s ease-in-out forwards;  
    transform-origin: 100% 0%;      
}

@keyframes loadMesMove2 {

  /* 左から登場 */
  0%{
    transform: scale(1,1);
  }

  35%{
    transform: scale(1,1);
  }


  /* 中央付近で最大表示 */
  65%{
    transform: scale(0,1);
  }

  /* 右へ抜けながら消える */
  100%{
    transform: scale(0,1);
  }
}


/* ===== 上に載せるコンテンツ ===== */
.main_content {
  position: relative;
  z-index: 20;
  color: #fff;
}





/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {

    .bg_video {}
    .bg_video video {}
    .bg_video .color1{}
    .bg_video .color2{}
    /* ===== マスク ===== */
    .mask {
    mask-size: 100% 100%, 16rem 16rem;
}
    /* ===== アニメーション ===== */
    /**/
    /* ===== ロード ===== */
    .load{}
    .load.anim3{}
    .load_box{
    width: calc(16rem);
    height: calc(16rem);
}
    .load_box2,
    .load_box2 span{}
    .load_box2{}
    .anim1 .load_box2{}
    .load_box2:before,
    .load_box2:after{}
    .load_box2:before{}
    .anim1 .load_box2:before {}
    .load_box2:after{}
    .anim1 .load_box2:after{}
    .load_box2 span:before,
    .load_box2 span:after{}
    .load_box2 span:before{}
    .anim1 .load_box2 span:before{}
    .load_box2 span:after{}
    .anim1 .load_box2 span:after{}
    .load_box2{}
    .load_logo1{}
    .anim2 .load_logo1{}
    .load_logo2{}
    .anim2 .load_logo2{}
    .load_logo3{}
    .load_logo3 img{}
    .anim2 .load_logo3 img{}
    .anim3 .load_logo3 img{}
    .load_logo4{}
    .load_logo4 img{}
    .anim2 .load_logo4 img{}
    .anim3 .load_logo4 img{}

    .load_mes{
    height: 3.9rem;
}
    .load_mes_bg{}
    .anim0_1 .load_mes_bg{}

    @keyframes loadMesMove {

      /* 左から登場 */
      0%{
        transform: translate(-140%, 0);
        opacity: 0;
      }

      /* 中央付近で最大表示 */
      50%{

        opacity: 1;
      }

      /* 右へ抜けながら消える */
      100%{
        transform: translate(140%, 0);
        opacity: 0;
      }
    }

    .load_mes_txt{
    width: 32rem;
    height: 3rem;
}
    .anim0_1 .load_mes_txt{}
    .anim0_2 .load_mes_txt{}
    .load_mes_txt:before{}
    .anim0_1 .load_mes_txt:before{
/*        animation-delay: 0.2s;*/
    }

    @keyframes loadMesMove2 {

      /* 左から登場 */
      0%{
        transform: scale(1,1);
      }

      30%{
        transform: scale(1,1);
      }


      /* 中央付近で最大表示 */
      50%{
        transform: scale(0,1);
      }

      /* 右へ抜けながら消える */
      100%{
        transform: scale(0,1);
      }
    }

    /* ===== 上に載せるコンテンツ ===== */
    .main_content {}


}


/*　
---------------------------------------------------------*/


.mainv{
    position: relative;
    z-index: 10;
    height: 100dvh;
    mix-blend-mode: difference;
    color: #fff;
}
.mainv_ttl{
    /* top: 500px; */
    font-weight: 300;
    font-size: 5.6rem;
    letter-spacing: 0.05em;
    position: absolute;
    bottom: calc(13px + 7vw);
    bottom: 15.3rem;
    left: 2.8%;
    line-height: 1;
}
.mainv_ttl_1{
    display: block;    
    overflow: hidden;
}

.mainv_ttl_3,
.mainv_ttl_2{
    display: block;
    overflow: hidden;
    margin-top: 2.5rem;
}
.mainv_ttl span{
    display: block;
    transform: translate(0px,100%);
    transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);    
}
.mainv_ttl_2 span{
    transition-delay: 0.1s;
}
.mainv_ttl_3 span{
    transition-delay: 0.2s;
}
.anim1 .mainv_ttl span{
    transform: translate(0px,0%);
}



.mainv_mes{
    position: absolute;
    bottom: 9rem;
    left: 2.8%;
    overflow: hidden;
    font-weight: 300;
}
.mainv_mes span{
    display: block;
    transform: translate(0px,100%);
    transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);    
}

.anim1 .mainv_mes span{
    transition-delay: 0.2s;    
    transform: translate(0px,0%);
}


.mainv_foot{
    display: flex;
    align-items:center;
    justify-content:space-between;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 40px;
    right: 40px;
    border-top: 1px solid rgb(73 73 73);
    margin-bottom: 13px;
    padding-top: 1.4rem;
    gap: 20px;
    opacity: 0;
    transform: translate(0px,100%);
    transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.anim1 .mainv_foot{
    opacity: 1;
    transform: translate(0px,0%);
}

.mainv_scroll{
    font-size: var(--f13);
}



/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {

    .mainv{}
    .mainv_ttl{
    font-size: 3.2rem;
    letter-spacing: 0.05em;
    bottom: 12rem;
}
    .mainv_ttl_1{}

    .mainv_ttl_3,
    .mainv_ttl_2{
    margin-top: 3vw;
}
    .mainv_ttl span{}
    .mainv_ttl_2 span{}
    .anim1 .mainv_ttl span{}
    .mainv_mes{
    left: 1.5rem;
    right: auto;
    /* width: 24.5rem; */
    bottom: 5rem;
    font-size: 1.3rem;
    line-height: 1.6;
}
    .mainv_mes span{}
    .anim1 .mainv_mes span{}
    .mainv_foot{
    bottom: auto;
    top: 8.4rem;
    left: 1.5rem;
    right: 1.5rem;
    padding-top: 1.1rem;
    transform: translate(0px, -100%);
}
    .anim1 .mainv_foot{}
    .mainv_scroll{
    position: absolute;
    bottom: 2.7rem;
    right: 1.4rem;
    font-size: 1rem;
}


}

/*　
---------------------------------------------------------*/

.news{
    display: flex;
    align-items:center;
    font-size: var(--f14);
    width: 48.9rem;

}
.news_ttl{
    border: 1px solid rgb(73 73 73);
    border-radius: 100px;
    letter-spacing: 0.02em;
    padding: 0.1rem 1.5rem;
    margin-right: 2.1rem;
    text-transform: uppercase;
}
.news_link{
    display: flex;
    align-items:center;
    color: #fff;
}
.news_time{
    font-size: var(--f14);
    letter-spacing: 0.02em;
    margin-right: 2.3rem;
}
.news_name{
    flex: 1;
    font-size: 14px;
    height: calc(14px * 1.6 * 1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: 1.6;
    overflow: hidden;
    --line-color: #fff;
}


/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {

    .news{}
    .news_ttl{
        line-height: 1;
        font-size: 1.1rem;
        padding: 0.2rem 0.7rem;
        margin-right: 1.1rem;
    }
    .news_link{}
    .news_time{
        font-size: 1.1rem;
        margin-right: 1.4rem;
    }
    .news_name{
        font-size: 1.2rem;
        height: calc(1.2rem * 1.6 * 1);
    }    

}

/*　
---------------------------------------------------------*/

.message{
    position: relative;
    z-index: 1;
    height: 700rem;
    mix-blend-mode: difference;
    color: #fff;
}
.message.anim6{
    mix-blend-mode: normal;
}
.message_inner{
    height: 100dvh;
    position: sticky;
    z-index: 1;
    top: 0;
    left: 0;
}

.message_txt{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate(0,-50%);
    font-size: 4vw;
    line-height: 1;
    overflow: hidden;
}
.message_big{
    font-size: 66px;
    font-size: 4.6vw;
    margin-right: 0.3vw;
}





.message_txt span{
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
  padding: 1vw 0;
}



.message_txt1{
    left: 6%;
}
.message_txt1 span{
    transform: translate(0, 100%);
    display: inline-block;
}
.message_txt2{
    left: 70%;
}
.message_txt2 span{
    transform: translate(0, 100%);
    display: inline-block;
}
.message_txt3{
    left: 36%;
}
.message_txt3 span{
    transform: translate(0, 100%);
    display: inline-block;
}
.message_txt4{
    left: 30%;
    right: 30%;
    text-align: center;
    color: #fff;
}
.message_txt4 > span{
    transform: translate(-120%, 0);
    display: inline-block;
}

.message_box{
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 50dvh;
    bottom: 50dvh;
    width: 10px;
}
.message_box span{
    flex: 1;
}
.message_box .message_box6{
     flex: 0 1 auto;
     height: 30%;
}

.message.anim1 .message_txt1 span{
    transform: translate(0, 0%);
    display: inline-block;
}

.message.anim2 .message_txt2 span{
    transform: translate(0, 0%);
    display: inline-block;
}

.message.anim3 .message_txt2 span,
.message.anim3 .message_txt1 span{
    transform: translate(0, -100%);
    display: inline-block;
}
.message.anim4 .message_txt3 span{
    transform: translate(0, 0%);
    display: inline-block;
}
.message.anim5 .message_txt3 span{
    transform: translate(0, -100%);
    display: inline-block;
}

.message.anim6 .message_txt4 > span{
    transition-delay: 0.25s;    
    transform: translate(0%, 0);
    display: inline-block;
}
.message.anim7 .message_txt4 > span{
    transition-delay: 0.25s;    
    transform: translate(120%, 0);
}



.mask.anim6{
    mask-size: 100% 100%, 100% 25rem;
}

.mask.anim7{
    mask-size: 100% 100%, 100% 100%;
}

.bg_video.anim1 .color1{
    opacity: 1;
}



/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {

    .message{
        height: 600rem;
    }
    .message_inner{}
    .message_txt{
    font-size: 4.4rem;
    line-height: 1.5;
}
    .message_big{
    font-size: 4.6rem;
}
    .message_txt span{}
    .message_txt1{
}
    .message_txt1 span{
}
    .message_txt2{
    left: 19rem;
}
    .message_txt2 span{}
    .message_txt3{
    left: auto;
    right: 0;
}
    .message_txt3 span{}
    .message_txt4{
    left: 2%;
    right: 2%;
    font-size: 3.8rem;
    padding-left: 2.4rem;
}
    .message_txt4 > span{}
    .message_box{}
    .message_box span{}

    .message_box .message_box6{}

    .message.anim1 .message_txt1 span{}
    .message.anim2 .message_txt2 span{}
    .message.anim3 .message_txt2 span,
    .message.anim3 .message_txt1 span{}
    .message.anim4 .message_txt3 span{}
    .message.anim5 .message_txt3 span{}
    .message.anim6 .message_txt4 > span{}
    .message.anim7 .message_txt4 > span{}
    .mask.anim6{
    mask-size: 100% 100%, 100% 16rem;
}
    .mask.anim7{
    mask-size: 100% 100%, 100% 100%;
}
    .bg_video.anim6 .color1{}


}

/*　
---------------------------------------------------------*/

.concept{
    max-width: 80rem;
    padding-left: 6.3rem;
    margin: 0 auto;
    padding-bottom: 17.8rem;
}
.concept_line{
    font-size: var(--f38);
    margin-top: 5rem;
}


.concept_btn{
    margin-top: 8.2rem;
}
.concept_box{
    position: relative;
    z-index: 1;
    font-size: var(--f22);
    line-height: 2.4;
    color: #fff;
}
.concept_box1{
    /* margin-left: 7.3rem; */
}
.concept_box2{
    margin: 6.4rem 0 0 0rem;
}
.concept_box3{
    margin: 6.4rem 0 0 0;
}
.concept_img{
    position: absolute;
    z-index: 1;
}
.concept_img1{
    top: -7.5rem;
    right: -19.3rem;
    width: 18rem;
}
.concept_img2{
    left: -36.3rem;
    top: -7.8rem;
    width: 28.9rem;
}
.concept_img3{
    top: -10rem;
    right: -26rem;
    width: 22.7rem;
}
.concept_img4{
    left: -34.3rem;
    top: 25.6rem;
    width: 21.3rem;
}
.concept_img5{
    position: static;
    margin: 3rem 0 0 50.1rem;
    width: 40rem;
}


/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {
    .concept{
    padding-top: 12rem;
    padding-bottom: 6rem;
    padding-left: 0;
}
    .concept_line{
    font-size: 1.9rem;
    margin-top: 2rem;
}
    .concept_btn{
    margin-top: 4.9rem;
}
    .concept_box{
    font-size: 1.8rem;
    margin-left: 3rem;
}
    .concept_box1{}
    .concept_box2{
    margin: 36.3rem 0 0 3rem;
}
    .concept_box3{
    margin: 44rem 0 0 3rem;
}
    .concept_img{}
    .concept_img1{
    top: calc(100% + 4.3rem);
    left: auto;
    right: 1.5rem;
    width: 14.3rem;
}
    .concept_img2{
    left: -1.5rem;
    width: 21.5rem;
    top: -22rem;
}
    .concept_img3{
    top: -36rem;
    right: auto;
    left: 0;
    width: 14.3rem;
}
    .concept_img4{
    left: auto;
    right: 3rem;
    top: -22rem;
    width: 14.3rem;
}
    .concept_img5{
    margin: 9rem 0 0 3rem;
    width: 31.5rem;
}

}

/*　
---------------------------------------------------------*/

.what{
    padding-top: 12rem;
}
.what_inner{
    padding-bottom: 6.7rem;
}

.what_main{
    /* display: flex; */
}
.what .c-ttl1{
    margin-bottom: 13.1rem;
}




.what_ttl2{
    width: 76.3rem;
    margin-bottom: 2rem;
}
.what_ttl2_txt1{
    font-weight: 400;
    font-size: var(--f36);
    line-height: 1.7;
    letter-spacing: 0.03em;
    display: block;
}
.what_ttl2_txt2{
    font-weight: 400;
    font-size: var(--f46);
    line-height: 1.7;
    letter-spacing: 0.03em;
    display: block;
    margin-top: 0.5rem;
}
.what_mes{
    line-height: 2.33;
    letter-spacing: 0.05em;
    margin-top: -1rem;
    display: grid;
    gap: 2rem 0;
}

/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {
    .what{
    padding-top: 10rem;
}
    .what_inner{
    padding-bottom: 2.3rem;
}

    .what_main{display: block;}

    .what .c-ttl1{
        margin-bottom: 6rem;
    }

    .what_ttl2{
    width: auto;
    margin-bottom: 3.2rem;
    margin-top: 0;
}
    .what_ttl2_txt1{
    font-size: 2rem;
}
    .what_ttl2_txt2{
    font-size: 2.6rem;
    letter-spacing: 0;
}
    .what_mes{
    gap: 1.3rem 0;
}
}

/*　
---------------------------------------------------------*/


.model{
    margin-bottom: -1px;
}
.model_inner{
    /* border-top: 1px dashed #252421; */
    padding-top: 11.6rem;
}
.model_ttl{
    text-align: center;
}
.model_ttl_txt1{
    display: inline-block;
    font-size: var(--f18);
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

.model_ttl_txt1:after,
.model_ttl_txt1:before{
    content: "";
    z-index: 1;
    position: absolute;
    background: url(../img/common/kakko.png) 0 0 no-repeat;
    background-size: cover;
    width: .6rem;
    height: 1.8rem;
    top:0;
    bottom: 0;
    left: -2rem;
    margin: auto;
}
.model_ttl_txt1:after{
    left: auto;
    right: -2rem;
    transform: scale(-1,1);
}
.model_ttl_txt2{
    display: block;
    font-size: var(--f32);
    margin-top: 1rem;
}

.model_zu_inner{
    position: absolute;
    display: block;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    height: 40.6vw;
    background-size: 100px;
    mask-image: url(../img/front/model_zu_line.svg);
    mask-size: 100% 100%, 100% 96%;
    mask-position: center, center;
    mask-repeat: no-repeat;
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    overflow: hidden;
}
.model_zu_dotto{
    position: absolute;
    display: block;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: 40.6vw;
    background: url(../img/front/model_zu_dotto.png) 50% 50% no-repeat;
    background-size: auto 99.5%;
}



.model_zu_bg .-box{
    display: block;
    position: absolute;
    z-index: 1;
    width: 21vw;
    height: 21vw;
    animation: walkLoop2 6s linear infinite;


}

.model_zu_bg .-box span{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    animation: walkLoop2_loat 6s linear infinite;
}

.model_zu_bg .-color1 span{
background: #06ADC8;
background: linear-gradient(90deg,rgba(6, 173, 200, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
.model_zu_bg .-color2 span{
    background: #D75A54;
    background: linear-gradient(90deg,rgba(215, 90, 84, 1) 0%, rgba(196, 102, 139, 0) 100%);
    animation-delay: -3s;
}
.model_zu_bg .-color2{
    animation-delay: -3s;
}



@keyframes walkLoop2 {

  0% {
    transform: translate(25vw, -5vw);
  }
  14% {
    transform: translate(0vw, 0vw);
  }
  28% {
    transform: translate(7vw, 24.7vw);
  }
  50% {
    transform: translate(54vw, 24.7vw);
  }
  64% {
    transform: translate(77.6vw, 20vw);
  }  
  78% {
    transform: translate(73.6vw, -5vw);
  }  
  100% {
    transform: translate(25vw, -5vw);
  }

}

@keyframes walkLoop2_loat {

  0% {
    transform: rotate(0deg);
  }
  14% {
    transform: rotate(-90deg);
  }
  28% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  64% {
    transform: rotate(-270deg);
  }  
  78% {
    transform: rotate(-360deg);
  }  
  100% {
    transform: rotate(-360deg);
  }

}



.model_zu_bg{
    position: relative;
    z-index: 1;
}
.model_zu_bg_inner{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 40.6vw;
    background: #F7F7F7 url(../img/common/bg02.png) 0 0 repeat;
    background-size: 100px;
    mask-image: linear-gradient(#000, #000), url(../img/front/model_zu_bg.svg);
    mask-size: 100% 100%, 100% 96%;
    mask-position: center, center;
    mask-repeat: no-repeat;
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.model_zu{
    height: 40.6vw;
    position: relative;
    z-index: 2;
}


.model_zu1{
    position: absolute;
    z-index: 1;
    width: 34.8vw;
    top: 3vw;
    left: 8.4vw;
/*    pointer-events: none;*/
}
.model_zu_txt1{
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 2.6vw;
    text-align: center;
    font-size: 1vw;
/*    opacity: 0.4;*/
}

.model_zu_txt1 span{
    padding-right: 1.2vw;
    position: relative;
    z-index: 1;
}
.model_zu_txt1 .c-arrow{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.model_zu2{
    position: absolute;
    z-index: 1;
    width: 34.8vw;
    top: 3vw;
    right: 8.4vw;
/*    pointer-events: none;*/
}
.model_zu3{
    position: absolute;
    z-index: 1;
    width: 16.7vw;
    left: 41.6vw;
    top: 8.2vw;
}



/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {
    .model{}
    .model_inner{
    padding-top: 7.6rem;
}
    .model_ttl{}
    .model_ttl_txt1{
    font-size: 1.5rem;
}
    .model_ttl_txt1:after,
    .model_ttl_txt1:before{
    width: .5rem;
    height: 1.5rem;
    left: -1.8rem;
}
    .model_ttl_txt1:after{
    right: -1.8rem;
    left: auto;
}
    .model_ttl_txt2{
    font-size: 2.6rem;
}

    .model_zu_inner{
    height: 261vw;
    mask-image: url(../img/front/model_zu_line_sp.svg);
    mask-size: 106% 100%;
    overflow: hidden;
}
    .model_zu_dotto{
    height: 261vw;
    background-image: url(../img/front/model_zu_dotto_sp.png);
    background-size: auto 89.5%;
}
    .model_zu_bg .-box{
        width: 51vw;
        height: 51vw;        
    }
    .model_zu_bg .-box span{

    }
    .model_zu_bg .-color1 span{

    }
    .model_zu_bg .-color2 span{}
    .model_zu_bg .-color2{}



    @keyframes walkLoop2 {

      0% {
        transform: translate(68vw, 65vw);

      }
      14% {
        transform: translate(50vw, 0vw); 
      }
      28% {
        transform: translate(-15vw, 16vw);
      }
      50% {
        transform: translate(-15vw, 143vw);
      }
      64% {
        transform: translate(0vw, 212vw);
      }  
      78% {
        transform: translate(68vw, 193vw);
      }  
      100% {
        transform: translate(68vw, 65vw);
      }

    }

    @keyframes walkLoop2_loat {

      0% {
        transform: rotate(90deg);
      }
      14% {
        transform: rotate(0deg);
      }
      28% {
        transform: rotate(-90deg);
      }
      50% {
        transform: rotate(-90deg);
      }
      64% {
        transform: rotate(-180deg);
      }  
      78% {
        transform: rotate(-270deg);
      }  
      100% {
        transform: rotate(-270deg);
      }

    }


    .model_zu_bg{}
    .model_zu_bg_inner{
    mask-image: linear-gradient(#000, #000), url(../img/front/model_zu_bg_sp.svg);
    height: 261vw;
    mask-size: 100% 100%, 100% 100%;
}
    .model_zu{
    height: 261vw;
}
    .model_zu1{
    width: 34.5rem;
    top: 7.7rem;
    left: 1.5rem;
}
    .model_zu_txt1{
    font-size: 1.2rem;
    bottom: 2.8rem;
}
    .model_zu_txt1 span{
    padding-right: 1rem;
}
    .model_zu_txt1 .c-arrow{}

    .model_zu2{
    width: 34.5rem;
    top: 55.7rem;
    left: 1.5rem;
    }
    .model_zu3{
    width: 27.6rem;
    left: 5rem;
    top: 38rem;
}

}


/*　
---------------------------------------------------------*/
.service{
    position: relative;
    z-index: 2;
    margin-top: -1px;
}
.service_inner{
    padding-top: 9rem;
    padding-bottom: 12rem;
}
.service_ttl{
    text-align: center;
    margin-bottom: 4.7rem;
}
.service_ttl_en{
    display: block;
    font-size: var(--f26);    
}
.service_ttl_ja{
    display: block;
    font-size: var(--f16);
    color: #555;
}
.service_phase{
    display: flex;
}
.service_phase1{
    margin-left: 3%;
    width: 31.2%;
}
.service_phase2{
    width: 34.349%;
    margin-left: -3%;
}
.service_phase3{
    width: 34.935%;
    margin-left: -3.5%;
}
.service_btn{
    text-align: center;
    margin-top: 5rem;
}
/* sp */
@media only screen and (max-width: 1000px) {
    .service{}
    .service_inner{
    padding-top: 3rem;
    padding-bottom: 7rem;
}
    .service_ttl{
    margin-bottom: 3rem;
}
    .service_ttl_en{
    font-size: 2.2rem;
}
    .service_ttl_ja{
    font-size: 1.4rem;
}
    .service_phase{
    display: block;
}
    .service_phase1{
    margin: 0;
    width: auto;
}
    .service_phase2{
    width: auto;
    margin: -3rem 0 0;
}
    .service_phase3{
    width: auto;
    margin: -3.6rem 0 0;
}
    .service_btn{
    margin-top: 4rem;
}   
}


/*　
---------------------------------------------------------*/

.service2{
    max-width: 128rem;
    margin: 0 auto;
    margin-top: 18rem;
}
.service2_mes1{
    font-size: var(--f26);
    line-height: 2;
}
.service2_mes2{
    font-size: var(--f26);
    margin-left: -2rem;
    display: inline;
}
.service2_mes2:before{bottom: -1.6rem;right: 1rem;left: 1rem;}
.service2_mes2_txt{
    font-size: var(--f40);    
}
.service2_btn{
    margin-top: 4.3rem;
}

/* sp */
@media only screen and (max-width: 1000px) {
    .service2{
    margin-top: 9rem;
}
    .service2_mes1{
    font-size: 2rem;
}
    .service2_mes2{
    font-size: 1.4rem;
    margin: 0 -1rem;
    display: block;
    text-align: center;
    margin-top: 1rem;
}
    .service2_mes2:before{
    bottom: -.3rem;
}
    .service2_mes2_txt{
    font-size: 2.2rem;
}
    .service2_btn{}

}


/*　
---------------------------------------------------------*/

.column{
    padding-top: 15rem;
}
.column_inner{
    padding-top: 7rem;
    padding-bottom: 1rem;
    padding-bottom: 12.4rem;
    border-top: var(--color-black) solid 2px;
}
.column_head{
    display: flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom: 5.3rem;
}

.column_ttl{
    display: flex;
    align-items:flex-end;
    gap: 0 2.2rem;
    margin-top: 2.4rem;
}
.column_ttl_en{
    /* display: block; */
    width: 38.7rem;
}
.column_ttl_ja{
    font-weight: 500;
    font-size: var(--f22);
    line-height: 1;
}
.column_data{
    width: 51.4rem;
}
.column_mes{
    font-size: var(--f16);
    line-height: 1.9;
}
.column_btn{
    margin-top: 2rem;
}

.column_btn .c-btn2{}

.column_btn .c-btn2:after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    transform-origin: 100% 0;
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
    background: #F7F7F7;
    border-radius: 100px;
    background: #fff;
}


.column_list{
    background: #edece6;
    border-radius: 2rem;
}
.column_list_main{
    padding: 7rem 6rem;
}
.column_list_navi{
    border-top: 1px dashed #252421;
    display: flex;
    justify-content:center;
    align-items:center;
    padding: 2.9rem 0;
    gap: 0 3rem;
}
.column_slide{
    overflow: hidden;
}
.column_slide_btn{}
.column_slide-prev,
.column_slide-next{
    width: 5.6rem;
    height: 3.2rem;
    border: 1px solid #252421;
    border-radius: 10rem;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.column_slide-prev:before,
.column_slide-next:before{
    content: "";
    z-index: 2;
    position: absolute;
    background: url(../img/common/arrow1.svg) 50% 50% no-repeat;
    background-size: contain;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    transition: .4s cubic-bezier(0.55, 0.05, 0.22, 0.99);
    width: 1.5rem;
    height: 1.5rem;
}



.column_slide-prev{
    transform: scale(-1,1);
}
.column_slide-next{}

.column .column-scrollbar{display: flex;/* justify-content: center; *//* align-items: center; */gap: 0 1rem;}
.column .swiper-pagination-bullet{
    border: 1px solid rgba(37, 36, 33, 0.24);
    background: none;
    opacity: 1;
    width: 5px;
    height: 5px;
    line-height: 0;
}
.column .swiper-pagination-bullet-active{
    border: 1px solid rgba(37, 36, 33, 0.24);
    background: #252421;    
}
.column .swiper-button-disabled{
    opacity: 0.2;
    cursor: auto;
}

/* hover  */
@media (hover: hover) and (pointer: fine) {

    .column_btn .c-btn2:hover{
        color: var(--color-black);
        background: #fff;
    }
    .column_btn .c-btn2:hover:after {
        transform-origin: 0 0;
        transform: scaleX(1);
    }
    .column_btn .c-btn2:hover .c-arrow.-arrow1.-w:before {
        background-image: url(../img/common/arrow1.svg);
    }

    .column_btn .c-btn2:hover .c-arrow:after {
        background: rgba(0, 0, 0, 0.5);
    }

}

/* sp */
@media only screen and (max-width: 1000px) {

    .column{
    padding-top: 8rem;
}
    .column_inner{
    padding-top: 5rem;
    padding-bottom: 8rem;
}
    .column_head{
    display: grid;
    margin-bottom: 2.3rem;
}
    .column_ttl{
    margin-top: 0;
    gap: 0 1.4rem;
    margin-bottom: 2.3rem;
}
    .column_ttl_en{
    width: 22.7rem;
}
    .column_ttl_ja{
    font-size: 1.8rem;
}
    .column_data{
    width: auto;
}
    .column_mes{
    font-size: 1.5rem;
}
    .column_btn{
    margin-top: 4rem;
    text-align: center;
}
    .column_list{}
    .column_list_main{
    padding: 2rem 2rem;
}
    .column_list_navi{
    padding: 1.9rem 0;
    gap: 0 2rem;
}
    .column_slide{}
    .column_slide_btn{}
    .column_slide-prev,
    .column_slide-next{
    width: 4.6rem;
    height: 2.5rem;
}
    .column_slide-prev:before,
    .column_slide-next:before{
    width: 1rem;
    height: 1rem;
}
    .column_slide-prev{}
    .column_slide-next{}
    .column .column-scrollbar{}
    .column .swiper-pagination-bullet{}
    .column .swiper-pagination-bullet-active{}
    .column .swiper-button-disabled{}

}


/*　
---------------------------------------------------------*/

.kadai{
    position: relative;
    z-index: 2;
    margin-top: -1px;
}
.kadai_bg{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F7F7F7;
    background-image: url(../img/front/kadai_bg.png), url(../img/common/bg02.png);
    background-position: 0 100%,  0 0;
    background-repeat: no-repeat, repeat;
    background-size: 100% auto, 100px;
    mask-image: linear-gradient(#000, #000), url(../img/front/kadai_bg2.svg);
    mask-size: 100% 100%, auto 41rem;
    mask-position: center,center 21.2rem;
    mask-repeat: no-repeat;
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.kadai_inner{
    position: relative;
    z-index: 5;
    border-top: 1px dashed #252421;
    padding-top: 10.6rem;
    padding-bottom: 20.5rem;
}

.kadai_ttl{
    text-align: center;
    letter-spacing: 0.03em;
    color: #252421;
    /* margin-bottom: 6rem; */
    height: 10.5rem;
}
.kadai_ttl_txt1{
    font-size:  var(--f32);
    position: relative;
    z-index: 1;
}
.kadai_ttl_txt1:before{
    content: "";
    z-index: 1;
    position: absolute;
    border-bottom:1px solid #000;
    /* width: 16px; */
    bottom: -0.6rem;
    right:0;
    left: 0;
}
.kadai_ttl_txt2{
    font-size:  var(--f26);
}
.kadai_list{
    display: flex;
    max-width: 128rem;
    margin: 0 auto;
    gap: 0 2.5rem;
}
.kadai_list_inner{
    position: relative;
    z-index: 10;
    cursor: pointer;
    transition: opacity var(--duration-main) var(--easing-opacity);
}
.kadai_list_inner .c-arrow{
    position: absolute;
    z-index: 5;
    bottom: 1.2rem;
    right: 1.2rem;
    transform: rotate(-45deg);
}


.kadai_list_box{
    flex: 1;
    overflow: hidden;
    border-radius: 1.5rem;
    position: relative;
    z-index: 1;
}

.kadai_list_ttl{
    position: absolute;
    z-index: 5;
    top: 11.3rem;
    left: 3rem;
}
.kadai_list_ttl_txt1{
    font-size: var(--f14);
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: #BBBBBB;
    display: block;
}
.kadai_list_ttl_txt2{
    font-weight: 500;
    font-size: var(--f22);
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: #F7F7F7;
    display: block;
}
.kadai_list_ul{
    background: linear-gradient(90deg, #1A1916 0%, rgba(26, 25, 22, 0) 100%);
    color: #fff;
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.4rem 3rem;
    line-height: 1.5;
    display: grid;
    gap: 0.6rem 0;
}
.kadai_list_ul li{
    font-size: 1.5rem;
    padding-left: 1rem;
    position: relative;
    z-index: 1;
}

.kadai_list_ul li:before{
    content: "";
    z-index: 1;
    position: absolute;
    width: 3px;
    height: 3px;
    background: #F7F7F7;
    opacity: 0.4;
    top: 0.9rem;
    left: 0;
}

.kadai_hover{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items:center;
}
.kadai_hover_main{
    flex: 1;
    margin: 0 4rem;
}
.kadai_hover_ttl{
    text-align: center;
    color: #bbb;
    font-size: 1.4rem;
    margin-bottom: 0.9rem;
}
.kadai_hover_ttl span{
    position: relative;
    z-index: 1;
}
.kadai_hover_ttl span:before,
.kadai_hover_ttl span:after{
    content: "";
    z-index: 1;
    position: absolute;
    
    background: #bbb;
    width: 8px;
    height: 1px;
    top:0;
    bottom: 0;
    margin: auto;
}
.kadai_hover_ttl span:before{
    left: -20px;
}
.kadai_hover_ttl span:after{
    right: -20px;
}
.kadai_hover_mes{
    color: #fff;
    font-size: 2rem;
    line-height: 1.7;
}
/* hover  */
@media (hover: hover) and (pointer: fine) {
    .kadai_list_inner:hover{
        opacity: 0;
    }    
}

/* sp */
@media only screen and (max-width: 1000px) {

    .kadai{}
    .kadai_bg{
    mask-image: linear-gradient(#000, #000), url(../img/front/kadai_bg2_sp.svg);
    mask-size: 100% 100%, auto 108rem;
    mask-position: center, center 16.5rem;
    background-size: 135% auto, 100px;
    background-position: 100% 100%, 0 0;
}
    .kadai_inner{
    padding-top: 6rem;
    padding-bottom: 18rem;
}
    .kadai_ttl{
    line-height: 1.8;
}
    .kadai_ttl_txt1{
    font-size: 2.3rem;
}
    .kadai_ttl_txt1:before{
    bottom: -0.2rem;
}
    .kadai_ttl_txt2{
    font-size: 1.8rem;
}
    .kadai_list{
    display: grid;
    gap: 2.1rem 0;
}
    .kadai_list_inner{}
    .kadai_list_inner .c-arrow{
        display: block;
    }

    .kadai_list_inner.on{
        opacity: 0;
    }

    .kadai_list_box{}
    .kadai_list_ttl{
    top: 8.3rem;
    left: 3rem;
}
    .kadai_list_ttl_txt1{}
    .kadai_list_ttl_txt2{}
    .kadai_list_ul{}
    .kadai_list_ul li{
    font-size: 1.3rem;
}
    .kadai_list_ul li:before{}
    .kadai_hover{}
    .kadai_hover_main{}
    .kadai_hover_ttl{}
    .kadai_hover_ttl span{}
    .kadai_hover_ttl span:before,
    .kadai_hover_ttl span:after{}
    .kadai_hover_ttl span:before{}
    .kadai_hover_ttl span:after{}
    .kadai_hover_mes{}

}

/*　
---------------------------------------------------------*/

.consul{
    padding-top: 11.9rem;
    position: relative;
    z-index: 2;
    margin-top: -1px;
}
.consul_inner{
    border-top: 1px dashed #252421;
    padding-top: 10.6rem;
    text-align: center;
}
.consul_ttl{}
.consul_ttl_txt1{
    display: block;
    font-size: var(--f32);
}
.consul_ttl_txt2{
    display: block;
    width: 30rem;
    margin: 2rem auto -1px;
    border-bottom: #000 solid 1px;
    padding-bottom: 1.6rem;
}



.consul_zu_bg{
    position: relative;
    z-index: 1;
}
.consul_zu_bg span{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 45.5vw;
    background: #F7F7F7 url(../img/common/bg02.png) 0 0 repeat;
    background-size: 100px;
    mask-image: linear-gradient(#000, #000), url(../img/front/consul_zu_bg.svg);
    mask-size: 100% 100%, 88.8% 100%;
    mask-position: center, center;
    mask-repeat: no-repeat;
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.consul_zu{
    height: 45vw;
    position: relative;
    z-index: 2;
    display: flex;
    padding: 3.3vw 5.5vw 0;
    gap: 0 1.7vw;
}

.consul_zu li{
    flex: 1;
}

.consul_btn{
    margin-top: -1px;
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 2vw;
    padding-bottom: 13.5rem;
}

/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {
    .consul{
    padding-top: 4.5rem;
}
    .consul_inner{
    padding-top: 7.3rem;
}
    .consul_ttl{}
    .consul_ttl_txt1{
    font-size: 2rem;
    letter-spacing: 0;
}
    .consul_ttl_txt2{
    width: 21.7rem;
    margin: 2rem auto -1px;
    padding-bottom: 0.7rem;
}
    .consul_zu_bg{}
    .consul_zu_bg span{
    mask-image: linear-gradient(#000, #000), url(../img/front/consul_zu_bg_sp.svg);
    height: 334vw;
    mask-size: 100% 100%, 92% 100%;
}
    .consul_zu{
        height: 334vw;
        padding: 4rem 4vw 0;
        display: block;
        gap: 1rem 0;
    }
    
    .consul_zu li{}
    .consul_zu li:nth-child(n+2){
        margin-top: 1.5rem;
    }
    .consul_btn{
    padding-top: 1rem;
    padding-bottom: 7.5rem;
}
}


/*　
---------------------------------------------------------*/

.imgSlide{
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.imgSlide_main{
    width: 3340px;
    display: flex;
    padding-top: 9.4vw;
    padding-bottom: calc(6.8vw + 19rem);
}
.imgSlide_box{
    display: flex;
    width: 100%;
    position: relative;
    z-index: 1;
    animation-name: scrollimg;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;   
    height: 30.3vw;
}
.imgSlide_img{
    position: relative;
}
.imgSlide_img + .imgSlide_img{
    margin-left: 2.9%;
}
.imgSlide_img1{
    width: 14.9%;
    left: 0;
    top: 27.8%;
}
.imgSlide_img2{
    width: 14.87%;
}
.imgSlide_img3{width: 21.5%;left: 0;top: 28%;}
.imgSlide_img4{width: 22%;}
.imgSlide_img5{width: 12.3%;top: 19.8%;}


@keyframes scrollimg{
    0%{ transform: translate(0%, 0%); }
    100%{ transform: translate(-100%, 0%); }
}


/* hover  */
@media (hover: hover) and (pointer: fine) {
}

/* sp */
@media only screen and (max-width: 1000px) {
    .imgSlide{}
    .imgSlide_main{
    width: 281rem;
    padding-top: 10rem;
    padding-bottom: 11.7rem;
}
    .imgSlide_box{
    height: 36.4rem;
}
    .imgSlide_img{}
    .imgSlide_img + .imgSlide_img{}
    .imgSlide_img1{}
    .imgSlide_img2{}
    .imgSlide_img3{}
    .imgSlide_img4{}
    .imgSlide_img5{}

}


/*　
---------------------------------------------------------*/

.concept_btn .c-btn1,
.service_btn .c-btn1,
.service2_btn .c-btn1{
    padding-right: 8rem;
}
/* sp */
@media only screen and (max-width: 1000px) {
    .concept_btn .c-btn1,
    .service_btn .c-btn1,
    .service2_btn .c-btn1{
        padding-right: 8rem;
    }   
}