@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

/*-----------------------
 common 
-----------------------*/
body{
 background-color: #000;
}
.l-header {
    position: relative !important;
}
#mc-800 sup{
  font-size:40%;
      top: -1.5em;
}
#mc-800 a.outline:focus{
	outline:1px dotted;
}
#mc-800 a:focus{
	outline:none;
}

#mc-800 li{
  list-style: none;
}
#mc-800 img{
  width: 100%;
  max-width: 100%;
  vertical-align: bottom;
}
#mc-800 {
  /* background-color: #000; */
  color: #fff;
   font-family:"Inter", "Noto Sans JP", sans-serif;
   font-weight: 700;
   -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "palt";
letter-spacing: 0.03em;
line-height: 1.7;
position: relative;
}

#mc-800 .bebas{
font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#mc-800 .common_section{
width: 100%;
height: 100vh;
position: relative;
   /* overflow: hidden; */
}

#mc-800 .common_bg_img{
  background-color: #000;
  width: 100%;
height: 100vh;
  z-index: 1;
}
#mc-800 .common_bg_img img{
object-fit: cover;
width: 100%;
height: 100vh;
}
#mc-800 .common_bg_img.opacity img{
opacity: 0.6;
}
#mc-800 .common_bg_img.opacity04 img{
opacity: 0.4;
}
#mc-800 .common_bg_img.opacity07 img{
opacity: 0.7;
}
#mc-800 .common_bg_img.opacity08 img{
opacity: 0.8;
}


#mc-800 .common_section_txt{
  position: absolute;
  left:calc(100 / 1440 * 100vw);;
   top: 53%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#mc-800 .common_section_txt .common_section_ttl{
  font-size: calc(48 / 1440 * 100vw);
  line-height: 1.25;
   letter-spacing: 0.05em;
   margin: 0;
}
#mc-800 .common_section_txt .common_section_ttl span{
  display: block;
  font-size: calc(30 / 1440 * 100vw);
}
#mc-800 .common_section_txt .common_section_detail{
  font-size: calc(20 / 1440 * 100vw);
  line-height: 1.6;
   letter-spacing: 0.05em;
   padding-top: 20px;
}
#mc-800 .common_section_txt .common_section_detail span{
  font-size: calc(12 / 1440 * 100vw);
  display: block;
  line-height: 1.4;
   padding-top: 8px;
   font-weight: 400;
}

#mc-800 .common_section_name{
position: absolute;
left: 0;
top: 90px;
 z-index: 2;
 font-size: calc(40 / 1440 * 100vw);
 padding-left: calc(60 / 1440 * 100vw);
 line-height: 1.0;
 letter-spacing: 0.05em;
}
#mc-800 .common_section_name::before{
content: "";
background-color: #fff;
height:calc(3 / 1440 * 100vw);
width: calc(50 / 1440 * 100vw);
position: absolute;
left: 0;
top: calc(17 / 1440 * 100vw);
}


#mc-800 .common_section_btn{
  padding-top: 35px;
}
#mc-800 .common_frame_btn{
  display: flex;
  color: #fff;
  border-radius: 100px;
  border: 2px solid #fff;
  align-items: center;
  justify-content: center;
  text-decoration: none;
   font-size: calc(14 / 1440 * 100vw);
   width: calc(150 / 1440 * 100vw);
   height: calc(40 / 1440 * 100vw);
   line-height: 1.2;
}
#mc-800 .common_frame_btn:hover{
  color: #000;
  background-color: #fff;
  opacity: 1.0;

}


#mc-800 #concept,
#mc-800 #design,
#mc-800 #function,
#mc-800 #application{
  position: relative;

  
}

#mc-800 .pc{
    display: block
}



#mc-800 .sp {
    display: none
}

@media screen and (max-width: 768px){
    #mc-800 .pc {
        display:none
    }


    #mc-800 .sp {
        display:block
    }


#mc-800 sup{
  font-size:40%;
      top: -1.5em;
}




#mc-800 .common_section_txt{
  left:0;
  width: 100%;
  box-sizing: border-box;
}

#mc-800 .common_section_txt .common_section_ttl{
  font-size: calc(28 / 812 * 100vh);
  line-height: 1.35;
  padding: 0 calc(20 / 812 * 100vh);
  letter-spacing: 0.03em;
  box-sizing: border-box;
}
#mc-800 .common_section_txt .common_section_ttl span{
  font-size: calc(20 / 812 * 100vh);
}
#mc-800 .common_section_txt .common_section_detail{
  font-size: calc(15 / 812 * 100vh);
  line-height: 1.6;
   padding: 12px calc(20 / 812 * 100vh) 0;
   box-sizing: border-box;
}
#mc-800 .common_section_txt .common_section_detail span{
  font-size: calc(12 / 812 * 100vh);
   padding-top: 3px;
}

#mc-800 .common_section_name{
left: 0;
top: 70px;
bottom: auto;
z-index: 2;
 font-size: calc(22 / 812 * 100vh);
 padding-left: calc(35 / 812 * 100vh);
 line-height: 1.0;
 letter-spacing: 0.05em;
}
#mc-800 .common_section_name::before{
height:2px;
width: calc(30 / 812 * 100vh);
top:calc(9 / 812 * 100vh);
}


#mc-800 .common_section_btn{
  padding-top:25px;
  padding-left: calc(20 / 812 * 100vh);
}
#mc-800 .common_frame_btn{
  border: 2px solid #fff;
  align-items: center;
  justify-content: center;
  text-decoration: none;
   font-size: calc(14 / 812 * 100vh);
   width: calc(150 / 812 * 100vh);
   height: calc(36 / 812 * 100vh);
   line-height: 1.2;
}
#mc-800 .common_frame_btn:hover{
   color: #fff;
  background-color: transparent;
  opacity: 1.0;
  transition: none;

}



  }

/*-----------------------
header
-----------------------*/

#mc-800 ul {
    margin: 0;
    padding: 0
}

#mc-800 h1,#mc-800 h2,#mc-800 h3,#mc-800 h4,#mc-800 h5 {
    margin: 0;
    padding: 0;
    font-weight: bold
}

#mc-800 li {
    margin: 0;
    padding: 0;
    list-style: none
}

#mc-800 dl,#mc-800 dd {
    margin: 0
}







#mc-800 a {
    transition: all .2s linear
}

#mc-800 a:hover {
    opacity: .75
}

#mc-800 header {
    position: relative;
    top: 0;
    background-color: #222;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(40 / 1440 * 100%) 0 ;
    z-index: 998;
    box-sizing: border-box;
}

#mc-800 #subheader.fixed {
    position: fixed;
      top: 0;
      left: 0;
}

#mc-800 header h2 {
    font-size: 24px;
    line-height: 1
}
#mc-800 header.open .msk {
    height: calc(100vh - 50px)
}

#mc-800 header #btn_menu {
    transition: all .2s linear;
    font-size: 0;
    width: 16px;
}

#mc-800 header.open #btn_menu {
    transform: rotate(180deg)
}

#mc-800 header .right {
    display: flex
}
#mc-800 header .right ul.links {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px
}
#mc-800 header .right ul.links li {
    line-height: 1;
    position: relative;
    margin-left: 35px
}
#mc-800 header .right ul.links li.normal_btn {
    margin-left: 35px
}





#mc-800 header .right ul.links li .nav-links {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
}

#mc-800 header .right ul.links li .header_frame_btn {
    width:130px;
    height: 30px;
      font-size:  14px;
    display: flex; 
  
    color: #fff;
    border-radius: 100px;
    border: 2px solid #fff;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1.2;
}
#mc-800 header .right ul.links li .header_frame_btn:hover{
  color: #000;
  background-color: #fff;
  opacity: 1.0;

}

#mc-800 header .right ul.links li .header_btn {
    width:130px;
    height: 30px;
    font-size:  14px;
    background-color: #fff;
    display: flex; 
    color: #000;
    border-radius: 100px;
    border: 2px solid #fff;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1.2;
}
#mc-800 header .right ul.links li .header_btn:hover {
   background-color: #666;
   color: #fff;
   opacity: 1.0;
   border-color: #666;
}



@media screen and (max-width: 768px){



    #mc-800 header {
        top:0;
        z-index: 998;
        padding: 0 20px;
         box-sizing: border-box;
    }


    #mc-800 header h2 {
        font-size:20px
    }



    #mc-800 header .msk {
        position:fixed;
        width: 100%;
        height: calc(100vh - 70px);
        top: 70px;
        left: 0;
        overflow: hidden;
        height: 0;
        transition: all .3s ease-out
    }
    #mc-800 header.fixed.open .msk {
        height: calc(100vh - 50px);
        top: 50px;
    }


    #mc-800 header .right {
        display:block;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: #222;
        top: 70px;
        left: 0;
        padding: 0;
        box-sizing: border-box;

    }
    #mc-800 header.fixed.open .right {
        height: calc(100vh - 50px);
        top: 50px;
    }


    #mc-800 header .right ul.links {
        display:block;
        margin-bottom: 20px;
        margin-right: 0;
         border-top: solid 1px #555;
    }




    #mc-800 header .right ul.links li {
        display:block;
        padding: 5.5vw 20px;
        letter-spacing: 0.06em;

        border-bottom: solid 1px #555;
            margin-left: 0px;
    }

    #mc-800 header .right ul.links li .nav-links {
 font-size: 4.3vw;
}





       #mc-800 header .right ul.links .links_item.frame_btn {
        padding:6vw 20px 0vw;
      font-size: 4.3vw;
        border-bottom: none;
    }

          #mc-800 header .right ul.links .links_item.normal_btn {
        padding: 6vw 20px 0vw;
        font-size: 4.3vw;
        border-bottom: none;
    }

         #mc-800 header .right ul.links .links_item.frame_btn .header_frame_btn{
       width: 100%;
       height:calc(50 / 812 * 100vh);
      font-size: 4.3vw;
    }
    #mc-800 header .right ul.links li.normal_btn {
    margin-left: 0px;
}
       #mc-800 header .right ul.links li .header_btn {
       width: 100%;
       height:calc(50 / 812 * 100vh);
        font-size: 4.5vw;
    }




}

/*-----------------------
kv
-----------------------*/
#mc-800 #kv{
 background: url(../img/bg_kv.jpg) center center / cover no-repeat;
width: 100%;
    height: auto;
    min-height:calc(1400 / 1440 * 100vw) ;
    position: relative;
   
    padding:calc(50 / 1440 * 100vw) 0 ;
  }

  #mc-800 .kv_txt{
 position: sticky;
 width: 100%;
 top: 52%;
    left: 0;
    padding-left: calc(140 / 1440 * 100vw) ;;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
   z-index: 2;
   letter-spacing: 0.08em;
   box-sizing: border-box;
  }

    #mc-800 .kv_ttl{
      font-size:calc(32 / 1440 * 100vw) ;
      line-height: 1.0;
   
    
  }
     #mc-800 .kv_ttl span{
      display: block;
      font-size:calc(200 / 1440 * 100vw) ;
      line-height: 0.95;
        margin-top: calc(8 / 1440 * 100vw) ;
  }

      #mc-800 .kv_detail{
      font-size:calc(26 / 1440 * 100vw) ;
      line-height: 1.5;
  }

     #mc-800 .kv_img{
     width:calc(850 / 1440 * 100vw) ;
     position: absolute;
     right: calc(100 / 1440 * 100vw) ;
     top:calc(50 / 1440 * 100vw) ;
     z-index: 1;
     
  }

  @media screen and (max-width: 768px){
#mc-800 #kv{
 background: url(../img/bg_kv.jpg) center center / cover no-repeat;
width: 100%;
    height: auto;
    min-height:calc(700 / 812 * 100vh);

    position: relative;
   
    padding:calc(20 / 812 * 100vh) 0 ;
  }

  #mc-800 .kv_txt{
 position: relative;
 width: 100%;
 top: auto;
    left: auto;
    padding-left: 0;
    transform:none;
    text-align: center;
    padding-top: calc(40 / 812 * 100vh);
  }

    #mc-800 .kv_ttl{
      font-size:calc(18 / 812 * 100vh);
      line-height: 1.0;
   
    
  }
     #mc-800 .kv_ttl span{
      display: block;
      font-size:calc(100 / 812 * 100vh);
      line-height: 1.0;
        margin-top: calc(2 / 812 * 100vh);
  }

      #mc-800 .kv_detail{
       font-size:calc(16 / 812 * 100vh);
      line-height: 1.5;
  }

     #mc-800 .kv_img{
     width:75% ;
     position: relative;
     margin: calc(20 / 812 * 100vh) auto 0;
     right: auto ;
     top:auto;
     
  }
    
  }

/*-----------------------
concept
-----------------------*/

  @media screen and (max-width: 768px){
  #mc-800 #concept .concept01 .common_bg_img img{
 object-position: 86% center;
   
  
 
  
}
#mc-800 #concept .concept02 .common_bg_img img{
 object-position: 60% center;
}
#mc-800 #concept .concept03 .common_bg_img img{
 object-position: 81% center;
}
  }


/*-----------------------
design
-----------------------*/
/* 
#mc-800 .common_design_img{
  position: absolute;
   width: calc(350 / 1440 * 100vw);
     position: absolute;
  right:calc(200 / 1440 * 100vw);
   top: 52%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
 
  
}

#mc-800 .design01 .common_design_img{
  
}


#mc-800 .design02 .common_design_img{
  position: absolute;
   width: calc(700 / 1440 * 100vw);
     position: absolute;
  right:calc(50 / 1440 * 100vw);
   top:0;
    transform: none;

 
  
}
#mc-800 .design02 .common_design_img img{
 object-fit: cover;
 height: 100vh;
  width: calc(700 / 1440 * 100vw);
 object-position: center 110%;

  
}


#mc-800 .design03 .common_design_img{
  position: absolute;
   width: calc(1050 / 1440 * 100vw);
     position: absolute;
  right:calc(50 / 1440 * 100vw);
   top:0;
    transform: none;

 
  
}
#mc-800 .design03 .common_design_img img{
 object-fit: cover;
 height: 100vh;
  width: calc(1050 / 1440 * 100vw);
 object-position: center 70%;

  
}

#mc-800 .design04 .common_design_img{
  position: absolute;
   width: calc(1750 / 1440 * 100vw);
     position: absolute;
  right:calc(-500 / 1440 * 100vw);
   top:0;
    transform: none;

 
  
}
#mc-800 .design04 .common_design_img img{
 object-fit: cover;
 height: 100vh;
  width: calc(1750 / 1440 * 100vw);
 object-position: center 18%;

  
}

#mc-800 .design05 .common_design_img{
  position: absolute;
   width: calc(1750 / 1440 * 100vw);
     position: absolute;
  right:calc(-50 / 1440 * 100vw);
   top:13%;
    transform: none;

 
  
}
#mc-800 .design05 .common_design_img img{
 object-fit: cover;
 height: 100vh;
  width: calc(1750 / 1440 * 100vw);
 object-position: center 0%;

  
}
@media screen and (max-width: 768px){

  #mc-800 #design .common_section_txt{
 left:0;
  width: 100%;
  top:calc(250 / 812 * 100vh); 
 
  
}


  #mc-800 .common_design_img{
  position: absolute;
   width:calc(210 / 812 * 100vh); 
     position: absolute;
  right:auto;
  left: 48%;
   transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
   top: auto;
   bottom:calc(40 / 812 * 100vh); 
 
  
}




#mc-800 .design02 .common_design_img{
   width: calc(440 / 812 * 100vh); 
     position: absolute;
  right:auto; 
  left: calc(30 / 812 * 100vh); 
  height: calc(350 / 812 * 100vh); 
   top:auto;
   bottom:calc(40 / 812 * 100vh); 
    transform: none;
    overflow: hidden;

 
  
}
#mc-800 .design02 .common_design_img img{
 height:100%; 
  width: calc(440 / 812 * 100vh); 
 object-position: right 100%;

  
}


#mc-800 .design03 .common_design_img{
   width: calc(580 / 812 * 100vh); 
   height: calc(390 / 812 * 100vh); 
  right:0;
  left: calc(-200 / 812 * 100vh); 
   top:auto;
   bottom: 0;
    transform: none;

 
  
}
#mc-800 .design03 .common_design_img img{
 height:100%; 
  width: calc(580 / 812 * 100vh); 
 object-position: center 66%;

  
}

#mc-800 .design04 .common_design_img{
   width: calc(1000 / 812 * 100vh); 
    height: calc(390 / 812 * 100vh); 
  right:auto;
  left:  calc(-300 / 812 * 100vh); 
   top:auto;
   bottom: 0;
    transform: none;

 
  
}
#mc-800 .design04 .common_design_img img{
 height: 100%;
  width: calc(1000 / 812 * 100vh); 
 object-position: 100% 18%;

  
}

#mc-800 .design05 .common_design_img{
   width: calc(850 / 812 * 100vh); 
    height: calc(390 / 812 * 100vh); 
  right:auto;
  left:  calc(-455 / 812 * 100vh); 
   top:auto;
   bottom: 0;
    transform: none;

 
  
}
#mc-800 .design05 .common_design_img img{
 height:100%;
  width: calc(850 / 812 * 100vh); 
 object-position: 100% 0%;

  
}

} */


/*-----------------------
application
-----------------------*/
#mc-800 .common_application_img{
  position: absolute;
   width: calc(655 / 1440 * 100vw);
     position: absolute;
   right:calc(120 / 1440 * 100vw);
   top: 52%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
 
  
}

#mc-800 .tanitafit_free{
  position: absolute;
  right:calc(50 / 1440 * 100vw);
  bottom:calc(50 / 1440 * 100vw);
  background-color: #fff;
  border: 2px solid #000;
  text-align: center;
  color: #000;
  border-radius: 10px;
   font-size: calc(24 / 1440 * 100vw);
   line-height: 1.2;
   padding: 22px 40px;
}

#mc-800 .tanitafit_free span{
 display: block;
  font-size: calc(16 / 1440 * 100vw);
  margin-bottom: 3px;
}
#mc-800 .tanitafit_free sup{
  font-size: 60%;
      top: -0.8em;
}

#mc-800 .application02 .common_application_img{
  position: absolute;
   width: calc(580 / 1440 * 100vw);
     position: absolute;
   right:calc(100 / 1440 * 100vw);
   top: 53%;

  
 
  
}

@media screen and (max-width: 768px){

  #mc-800 #application .common_section_txt{
 left:0;
  width: 100%;
  top:calc(250 / 812 * 100vh); 
 
  
}

#mc-800 .common_application_img{
   width: calc(345 / 812 * 100vh); 
  left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    right: auto;
   top: 48%;
 
  
}

#mc-800 .tanitafit_free{
  position: absolute;
  width: calc(100% - 40px);
  right:calc(20 / 812 * 100vh); 
  bottom:calc(20 / 812 * 100vh); 
   font-size: calc(20 / 812 * 100vh); 
   line-height: 1.3;
   padding: 18px 25px;
   box-sizing: border-box;
}

#mc-800 .tanitafit_free span{
 font-size: calc(15 / 812 * 100vh); 
  margin-bottom: 1px;
}


#mc-800 .application02 .common_application_img{
   width: calc(355 / 812 * 100vh); 
   right:auto;
   left: 13%;
   transform:none;
   top: auto;
   bottom: calc(110 / 812 * 100vh); 
   
  
 
  
}


}

/*-----------------------
function
-----------------------*/

#mc-800 #function .function01 .common_bg_img img{
 object-position: 66% center;
   
  
 
  
}
#mc-800 #function .function02 .common_bg_img img{
 object-position: 82% center;
}
#mc-800 #function .function03 .common_bg_img img{
 object-position: 100% center;
}



@media screen and (max-width: 768px){
#mc-800 #function .function01 .common_bg_img img{
 object-position: 74% center;
   
  
 
  
}
#mc-800 #function .function02 .common_bg_img img{
 object-position: 82% center;
}
#mc-800 #function .function03 .common_bg_img img{
 object-position: 100% center;
}




}


/*-----------------------
spec
-----------------------*/

#mc-800 #spec{
   padding-top: 60px;
 margin: 70px 0 100px;

  }

#mc-800 .spec_inner{
   width: calc(900 / 1440 * 100vw);
   margin: 0 auto;
}
#mc-800 .spec_head{
  text-align: center;
}
#mc-800 .spec_img{
   width: calc(160 / 1440 * 100vw);
   margin: 15px auto;
}

#mc-800 .spec_name_jp{
    font-size: calc(20 / 1440 * 100vw);
    padding-top: 10px;
}
#mc-800 .spec_name_en{
    font-size: calc(96 / 1440 * 100vw);
    line-height: 1.1;
    letter-spacing: 0.05em;
}

#mc-800 .spec_ttl{
    font-size: calc(24 / 1440 * 100vw);
    line-height: 1.1;
    letter-spacing: 0.05em;
    line-height: 1.3;
    margin: 30px 0 0;
}
#mc-800 .spec_list{
  margin-top: 15px;
}
#mc-800 .spec_list.bottom{
  margin-top: 60px;
}
#mc-800 .spec_item{
   display: flex;
   border-top: 1px solid #555;
   vertical-align: middle;
  
    font-size: calc(15 / 1440 * 100vw);
}
#mc-800 .spec_item:last-child{
   border-bottom: 1px solid #555;
}
#mc-800 .spec_item .spec_name{
  width: 23%;
  background-color: #222;
   padding: 18px 20px;
  
}
#mc-800 .spec_item .spec_detail{
  width: 77%;
  padding: 18px 0px 18px 35px;
}

@media screen and (max-width: 768px){

#mc-800 #spec{
   padding-top: 60px;
 margin: 20px 0 60px;

  }

#mc-800 .spec_inner{
   width:100%;
   box-sizing: border-box;
}

#mc-800 .spec_img{
   width: 30%;
}

#mc-800 .spec_name_jp{
    font-size: calc(16 / 812 * 100vh);
}
#mc-800 .spec_name_en{
    font-size: calc(65 / 812 * 100vh);
}

#mc-800 .spec_ttl{
    font-size: calc(18 / 812 * 100vh);
    padding:  0 calc(20 / 812 * 100vh);
}


#mc-800 .spec_item{
   display: block;
   border-top: none;
  
    font-size: calc(12 / 812 * 100vh);
}
#mc-800 .spec_item:last-child{
   border-bottom:none;
}
#mc-800 .spec_item .spec_name{
  width: 100%;
  background-color: #222;
   padding: 4px calc(20 / 812 * 100vh);
   box-sizing: border-box;
  
}
#mc-800 .spec_item .spec_detail{
  width: 100%;
   padding: 18px calc(20 / 812 * 100vh);
   font-weight: 400;
   font-size: calc(14 / 812 * 100vh);
   box-sizing: border-box;
}
}


[data-scroll-fade-container] {
  height: 400vh; /* 最後のセクションの表示時間を確保 */
  position: relative;
}

[data-scroll-fade-sticky] {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

[data-scroll-fade-section] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
  color: white;
  z-index: 2;
}

.data-scroll-bg-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

[data-scroll-fade-section] .common_section_txt{
    opacity: 0;
    transition: opacity .5s ease .5s;
}
[data-scroll-fade-section][data-is-current] {
  opacity: 1;
  pointer-events: visible;
}

[data-scroll-fade-section][data-is-current]  .common_section_txt{
    opacity: 1;
}

/*-----------------------
design(js)
-----------------------*/
#mc-800 .common_design_img {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) scale(0.8) translateX(-10vw);
  transition: transform 0.6s ease;
  will-change: transform;
}
#mc-800 .common_design_img img {
  width: 100%;
  height: 100vh;
}
@media screen and (max-width: 768px) {
  #mc-800 .common_design_img {
    top: 0;
    width: 100%;
    transform: translateY(-27.5vh) scale(0.46) translateX(1vh);

  }
}
#mc-800 .common_design_img img {
  width: 100%;
  height: 100vh;
  object-fit: contain;

}




#mc-800 .common_section_name {
  z-index: 3;
}
@media screen and (max-width: 768px) {
  #mc-800 .common_design_img_wrap {
    height: 50vh;
    top: 50vh;
    position: absolute;
    width: 100%;
    overflow: hidden;
  }
  #mc-800 #design .common_section_txt {
    left: 0;
    width: 100%;
    top: 30.7881773399vh;
  }
}