@charset "utf-8";
	
html{
    font-size: 62.5%;
}

body{
    color: #333333;
    font-size: 1.6rem;
    font-family: "copperplate", "source-han-sans-japanese", sans-serif;
    font-weight: 500;
    font-style: normal;
}

img {
    max-width: 100%;
    height: auto;
  }

.nav{
    position: fixed;
    top:0;
    left:0;
    background-color: #fff;
    width: 100%;
}
.pc_br{
    display: none;
}
.navigation{
    display: flex;
    justify-content: space-between;
    align-items:center;
    height: 76px;
    
}
.nav-wrapper{
    display: flex;
    align-items:center;
    height: 76px;
    padding-left:50px;
}
.company-logo{
    width: 163px;
    height: auto;
}

.siteOverview{
    font-size: 1.8rem;
    font-weight: 500;
    margin: 6px 0 0 35px;
    letter-spacing: 0.2rem;
}

.btn{
    padding: 26px 26px;
    border: 2px solid #9b8c7d;
    background-color: #9b8c7d;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.2rem;
    box-sizing: border-box;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    }

.btn:hover {
    background-color: #fff;
    border-color:2px solid #9b8c7d;
    color: #9b8c7d;
}

.hero-pc-wrapper{
    background:#f7f5f5 ;
    position: relative;
    z-index: -1;
    padding-bottom: 30px;
}
.video-overlay{
    background: url("../assets/hero/pattern_movie.png");
    width: 95%;
    height: 100%;
    position: absolute;
    bottom: 34px;
    z-index: 2;
}

.video{
    width: 95%;
}
.sp-hero{
    display: none !important;
}
.grad1 {
    bottom: 34px;
    position: absolute;
    width: 95%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.3)); 
  }

.underlay{
    position: absolute;
    right: 0;
    bottom:-3.5rem;
    z-index: -1;
}
.txt-overlay{
    position: absolute;
    right: 3rem;
    bottom:17rem;
} 
.sp-txt-overlay{
    display: none;
}

 /* -------------
 *
 * Office View
 *
 ------------- */
 .bg-underlay{
    background: #efeeee;
    height: 155px;
    z-index: -2;
    position: relative;
 }

.officeView-wrapper{
    padding: 0 0 178px 0;
    background: #efeeee;
    position: relative;
    /* z-index: -1; */
}

.obj-shape01{
    position: absolute;
    top:1%;
    left:74%;
}
.obj-draw01{
    position: absolute;
    top:4%;
    left:78%;
}
.obj-shape02{
    position: absolute;
    top:42%;
    left:86%;
}
.obj-draw02{
    position: absolute;
    top:44%;
    left:85%;
}
.obj-shape03{
    position: absolute;
    top:81%;
    left:73%;
}
.obj-draw03{
    position: absolute;
    top:86%;
    left:75%;
}
.obj-shape04{
    position: absolute;
    top: 43%;
    left:4%;
}
.obj-draw04{
    position: absolute;
    top: 47%;
    left:2%;
}
.obj-shape05{
    position: absolute;
    top:4%;
    left:7%;

}
.obj-draw05{
    position: absolute;
    top:3%;
    left:5%;
}
.officeView-content{
    max-width:1000px;
    margin: 0 auto;
}
.section_title{
    margin: 0 0 80px;
    font-size: 4rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.9rem;
    line-height: 5rem;
    
}
.secondary-title{
    font-size:2.2rem;
    font-weight: bold;
    text-align: center;
    font-family: "source-han-sans-japanese",sans-serif;
    margin-bottom: 8px;
    letter-spacing: 0.1rem;
}
.sub-title{
    font-size:1.2rem;
    letter-spacing: 0.1rem;
    font-family: "source-han-sans-japanese",sans-serif;  
    text-align: center;
    font-weight: 600;
    opacity: 30%;
    margin-bottom: 20px;
}
.video-wrapper{
    margin-bottom: 125px;
    height:44rem;
}

.youtube{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 70% !important;
}

 /* -------------
 *
 * Gallery
 *
 ------------- */

.gallery-title-bg{
    position: relative;
    margin: auto;
    top: -5.54rem;
    padding-top: 7rem;
    width: 45rem;
    height: 1.45rem;
    line-height: 0.45rem;
    background-color: #f2f2f2;
}

#gallery {
    max-width: 920px;
    margin: 40px  auto;
}
 
#gallery li {
    max-width: 31%;
    padding:8px;
}
 
#gallery li img  {
    max-width: 100%;
    height: auto;
    padding-left:0.2rem;
    
} 
.item :hover{
    opacity: 0.8;
}
  

  /* ---- gallery background---- */
.gallery-wrapper{
    background: #f2f2f2;
    padding-bottom: 140px;
}

 /* -------------
 *
 * Works
 *
 ------------- */

.works-title-bg{
    position: relative;
    margin: auto;
    margin-bottom: 20px;
    top: -5.54rem;
    padding-top: 7rem;
    width: 45rem;
    line-height: 0.45rem;
    background-color: #f7f7f7;
}

.secondary-title{
    font-size:1.8rem;
}

.works{
    background: #f7f7f7;
}
.works-details-title{
    font-size: 1.8rem;
    font-weight: bold;
}
.works-detail-text{
    font-size: 1.4rem;
    font-family: "source-han-sans-japanese",sans-serif;  
}
dt{
    position: relative;
    padding-left: 1em;
}
dt:before{
    border-radius: 50%;
    width: 4px;
    height: 4px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.9em;
    content: "";
    background: #cdcdcd;
}

.works-item{
    border-left: solid 2px rgba(0,0,0,0.1) ; 
    border-bottom: solid 2px rgba(0,0,0,0.1) ; 
    line-height: 2;
    width: 28%;
    margin:0 30px 30px 0;
    height: 145px;
    padding: 30px 0px 0px 20px;
}

.works-content-wrapper{
    display: flex;
    flex-wrap: wrap ;
    margin-bottom: 70px;
    max-width: 990px;
    margin: auto;
    padding-bottom: 70px;
    margin-top: 70px;
}
.works-wrapper{
    margin-bottom: 70px;
    background-color: #f7f7f7;
    padding-bottom: 100px;
    
}
.works-text{
    width: 36%;
    line-height: 2;
    text-align: center;
    margin: auto;
}
/* -------------
 *
 * btn
 *
 ------------- */
 .btn_wrapper{
     max-width: 1000px;
     margin: auto;
     padding: 0 0 10rem;
 }

 .corporate-btn{
    font-family: "source-han-sans-japanese", sans-serif; 
    display: block;
    width: 462px;
    padding: 32px 0;
    background-color: #454341;
    border: 2px solid #454341;
    color: #fff;
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
    margin: auto;
    /* margin-bottom:40px ; */
    letter-spacing: 0.1rem;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
 }
 .corporate-btn:hover {
    background-color: #fff;
    border-color: #454341;
    color: #454341;
  }

.icon{
    padding-left: 13px;
}
.icon2{
    padding-left: 6px;
}

.mynavi-btn{
    display: block;
    color:#333333;
    font-size: 2.2rem;
    text-align: center;
    width:230px;
    padding: 14px 0;
    border: 2px solid #cdcdcd;
    margin: auto;
    line-height: 1.5rem;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.mynavi-btn:hover {
    background-color: #eeeeee;
  }

/* -------------
 *
 * footer
 *
 ------------- */
 .btn-top img{
     margin-top: 25px;
 }
 .btn-top{
    position: absolute;
    background: #fff;
    right:4%;
    top:-60%;
    display: block;
    width: 6.6rem;
    height:6.6rem;
    border: solid 1px #c7ab69;
    /* padding: 3rem; */
    border-radius: 50%;
    text-align: center;
}
 .footer-wrapper{
    position: relative;
    border-top:1px solid #cdcdcd;
}
 .footer{
     font-size: 1.4rem;
     font-size: bold;
     padding: 2rem;
     text-align: center;
     border-top:1px solid #cdcdcd;
     margin-top:0.1rem;
 } 


  /* タブレット */
 @media screen and (max-width: 959px){

    .obj-shape02{
        position: absolute;
        top:42%;
        left:80%;
    }
    .obj-draw02{
        position: absolute;
        top:44%;
        left:79%;
    }
    .obj-shape03{
        position: absolute;
        top:76%;
        left:69%;
    }
    .obj-draw03{
        position: absolute;
        top:81%;
        left:73%;
    }
    .txt-overlay{
        right: 2rem;
        bottom:10rem;
        width: 69rem;
    } 
    .obj-shape05{
        width: 15rem;
    
    }
    .obj-draw05{
        width: 15rem;
    }
    .works-content-wrapper{
        margin-left: 10rem;
    }
    .works-item{
        width: 37%;
    }
    .works-text{
        width: 50%;
    }
 }





 
 /* モバイル */

 @media screen and (max-width: 720px){
    body{
        letter-spacing: 0;       
    }
    
/* -------------
 *
 * sp-navigation
 *
 ------------- */
.navigation{
    width: 100%;
    background-color: #fff;
    height:auto;
    
}

 .nav-wrapper{
     padding-left: 1.6rem;  
 } 
 .company-logo{
    width: 12rem;
}
.siteOverview{
    font-size: 1.2rem;
    margin: 0 0 0 18px;
}
.btn{
    padding: 2.8rem 1rem;
    font-size: 1.6rem;
    text-align: center;
    box-sizing: border-box;
    
}

/* -------------
 *
 * sp-hero
 *
 ------------- */
.sp-hero{
    display: block !important;
    position: relative;
    width: 90%;
}
.underlay{
    position: absolute;
    width: 32rem;
    right: 0;
    bottom:-1.5rem;
    z-index: -1;
}
.sp-txt-overlay{
    display: block;
    position: absolute;
    right: 1.2rem;
    bottom: 6rem;
    width: 90%;
}
.grad2 {
    bottom: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.3)); 
  }
/* display none */
.video {
    display: none !important; 
}
.grad1{
    display: none !important; 
}
.video-overlay{
    display: none !important; 
}
.txt-overlay{
    display: none;
}

/* -------------
 *
 * sp-office
 *
 ------------- */
 .bg-underlay{
    height: 100px;
 }

 .officeView-wrapper{
    padding: 0 0 20px 0;
}

.obj-shape01{
    position: absolute;
    top:8%;
    left:72%;
    width: 9rem;
}
.obj-draw01{
    position: absolute;
    top:9%;
    left:81%;
    width: 7rem;
}
.obj-shape02{
    position: absolute;
    top:45%;
    left:78%;
    width: 8rem;
}
.obj-draw02{
    position: absolute;
    top:47%;
    left:76%;
    width: 7rem;
}
.obj-shape03{
    position: absolute;
    top:84%;
    left:64%;
    width: 11rem;
}
.obj-draw03{
    position: absolute;
    top:87%;
    left:63%;
    width: 10rem;
}
.obj-shape04{
    position: absolute;
    top: 42%;
    left:4%;
    width: 9rem;
}
.obj-draw04{
    position: absolute;
    top: 45%;
    left:2%;
    width: 7rem;
}
.obj-shape05{
    position: absolute;
    top:10%;
    left:-7%;
    width: 9rem;

}
.obj-draw05{
    position: absolute;
    top:9%;
    left:-8%;
    width: 7rem;
}

 .video-wrapper{
    margin-bottom: 0;
    height:40rem;
}
 .section_title{
    margin: 0 0 60px;
    font-size: 3rem;
    text-align: center;
    letter-spacing: 0.7rem;
    line-height: 4rem;
}


.youtube iframe{
     height: 100% !important;
    }
/* -------------
 *
 * sp-gallery
 *
 ------------- */
 .gallery-wrapper{
    padding-bottom: 110px;
}

 .gallery-title-bg{
    position: relative;
    margin: auto;
    top: -3rem;
    padding-top: 4rem;
    width: 28rem;
    background-color: #f2f2f2;
}
#gallery li {
    max-width: 48%;
    padding:3px;
}
/* -------------
 *
 * sp-works
 *
 ------------- */

.works-title-bg{
    position: relative;
    margin: auto;
    top: -3rem;
    padding-top: 4rem;
    width: 28rem;
    background-color: #f7f7f7;
}

.works-details-title{
    font-size: 1.4rem;
    font-weight: bold;
}
.works-detail-text{
    font-size: 1.2rem;
}
dt{
    position: relative;
    padding-left: 1em;
}
dt:before{
    top: 10px;
}

.works-item{
    border-left: solid 1px rgba(0,0,0,0.2) ; 
    border-bottom: none; 
    line-height: 1.8;
    width: 100%;
    margin:0 0px 30px 44px;
    height: 88px;
    padding: 0px 0px 0px 24px;
}
.works-content-wrapper{
    display: flex;
    flex-wrap: wrap ;
    padding-bottom: 8px;
    margin-top: 70px;
    margin-left: 0;
}

.works-wrapper{
    margin-bottom: 56px;
    background-color: #f7f7f7;
    padding-bottom: 56px;
    
} 
.works-text{
    font-size: 1.3rem;
    width: 80%;
    text-align: left;
} 
.sp_br{
    display: none;
}
/* -------------
 *
 * sp-btn
 *
 ------------- */
 .btn_wrapper{
    padding: 0 0 5rem 0;
}
.corporate-btn{
    width: 32rem;
    padding: 24px 0;
    background-color: #454341;
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    font-weight: bold;
    /* margin-bottom:40px ; */
    line-height: 24px;
}

.icon{
    padding-left: 0;
}
.mynavi-btn{
    display: block;
    color:#333333;
    font-size: 1.3rem;
    text-align: center;
    width: 17rem;
    padding: 10px 0;
    border: 1px solid #cdcdcd;
    margin: auto;
    
}

 }/*end