@charset "UTF-8";

/********************************************************************************
* TOPPAGE 
*********************************************************************************/

/* video-area
*********************************************************************************/

#video-area,
#video-area video,
#video-area video + .overlay
{height:calc(100vh - 145px);}



#video-area{
  position: relative;
  overflow: hidden;
  width: 100%;
  background:url(../movie/movie-bg.jpg) 50% 50% no-repeat;
  background-size:cover;
}
video{
  min-width: 100%;
  z-index: 1;
 
}
.overlay {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);
  background-size: 4px 4px;
  z-index: 2;
  display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;
  -webkit-align-items: center;  -ms-flex-align: center; align-items: center;

}
.overlay h1{
  width:250px;
}
.overlay h1 .overlay-tel{
  display: inline-block;
  margin-top: 10px;
}
.overlay h1 .overlay-tel a{
  display: block;
  font-size: 18px;
  color: #fff;
}


@media(max-width:1100px){
  #video-area,
  #video-area video,
  #video-area video + .overlay
  {height:700px;}
}
@media(max-width:1000px){
  #video-area,
  #video-area video,
  #video-area video + .overlay
  {height:600px;}
}
@media(max-width:767px){
  #video-area,
  #video-area video,
  #video-area video + .overlay
  {height:60vmin;}
}
@media(max-width:767px){
  #video-area,
  #video-area video,
  #video-area video + .overlay
  {height:100vmin;}
}






.white-bg{
  background:#FFF;
}

.padding-content{
  padding-top:50px;
  padding-bottom:50px;
}



/* lighting-products (left)
*********************************************************************************/
#lighting-product{
  padding:50px 0;
  position:relative;
}

.lighting-product-title{
  width:60%;
  padding-left:calc( (100% - 1200px) / 2 );
  padding-right:20%;
  padding-top:5%;
  padding-bottom:5%;
}
.lighting-product-title img{
  max-width:363px;
}
@media(max-width:767px){
  .lighting-product-title img{
    max-width:150px;
  }
}


.lighting-product-img{
  position:absolute;
  left:45%;
  margin-top:-380px;
  z-index:5;
}

.lighting-product-img *{
  position:relative;
  z-index:5;
}


.lighting-product-img .img-over{
  content:"";
  position:absolute;
  z-index:8;
  top:0;
  left:0;
  height:100%;
  background:var(--main-color);
  width:100%;
  animation-fill-mode: forwards;
}




.lighting-product-img img{
  max-height:100%;
}

.lighting-product-text{
  width:60%;
  background:#04070e;
  color:#FFF;
  position:relative;
  left:0;
  z-index:1;
  padding:1em 1em 2em 1em;
  text-align:justify;
  padding-left:calc( (100% - 1200px) / 2 );
  padding-right:20%;

}

.lighting-product-text p{
  padding:1em 0;
  color:#FFF;
  line-height:1.8em;
  text-align:justify;
}


@media(max-width:1280px){
  .lighting-product-title
  ,.lighting-product-text{
    padding-left:2em;
  }
  .lighting-product-img{
    margin-top:-350px;
  }
}

@media(max-width:1100px){
  .lighting-product-title
  ,.lighting-product-text{
    padding-left:2em;
  }
  .lighting-product-img{
    margin-top:-320px;
  }
}
@media(max-width:1000px){
  #lighting-product{
    padding:0;
  }
  .lighting-product-title,
  .lighting-product-img,
  .lighting-product-text{
    width:100%;
    position:relative;
    margin:0;
  }
  .lighting-product-title{
    padding:3em 0 2em 0;
    text-align:center;
  }
  .lighting-product-img{
    margin:0;
    padding:0;
    left:0;
    top:0;
    z-index:2;
  }
  .lighting-product-img img{
    width:100%;
    height:auto;
  }
  .lighting-product-text{
    padding:2em;
    margin-top:-2px;
    text-align:center;
  }
  .lighting-product-text p{
    padding-top:0;
  }
  .lighting-product-text a{
    width:60%;
    margin:0 auto;
  }

}
@media(max-width:767px){
  .lighting-product-title{
    padding:3em 20%;
  }
  .lighting-product-text a{
    width:100%;
  }
}
@media(max-width:640px){
  .lighting-product-title{padding:3em 30%;}
}


/* top-production
*********************************************************************************/
#production{
  background:#f4f4f3;
  padding:100px 0;
}

#production h1 + p{
  max-width:700px;
  margin:0 auto;
  line-height:1.6em;
  text-align:justify;
  margin-bottom:5em;
}

#production h1 + div p{
  max-width:700px;
  margin:0 auto;
  line-height:1.6em;
  text-align:justify;
  margin-bottom:5em;
  display:inline-block;
}




#production h1 + div p br{
  display:block;
}
@media(max-width:740px){
  #production h1 + div p br{display:none;}
}

@media(max-width:767px){
  #production{padding:1.5em 12px 1em 12px;}
  #production .center p{  margin-bottom:2em; }

}



#production .product-box-big,
#production .product-box-small{
  display: -webkit-flex; display: -ms-flexbox; display: flex;
  -ms-flex-flow:row wrap;flex-flow:row wrap;
  -webkit-justify-content: space-between;-ms-flex-pack: justify; justify-content: space-between;
  -webkit-align-items: stretch; -ms-flex-align:stretch; align-items: stretch;
}

#production [class^="product-box-"] article{
  width:49%;
  margin-bottom:2%;
}

#production [class^="product-box-"] article *{
  box-sizing:border-box;
}
.product-box-big article .product-box-big-image{
  width:100%;
  margin:0;
}

.product-box-big article .product-box-big-image img{
  object-fit:cover;
  max-width:100%;
  margin:0;
}

.product-box-big article .detail{
  padding:2em;
  background:#04070e;
  display: -webkit-flex; display: -ms-flexbox; display: flex;
  -ms-flex-flow:row nowrap; flex-flow:row nowrap;  
  -webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;
  -webkit-align-items: flex-start; align-items: flex-start;
  margin-top:-2px;
  position:relative;
}

.product-box-big article .detail .detail-circle{
  width:35%;
  display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;
  -webkit-align-items: center;  -ms-flex-align: center; align-items: center;
  padding-right:2em;
}

article .detail-circle img{
  border-radius:50%;
  max-width:100%;
}

.product-box-big article .detail dl{
  width:65%;

}

article .detail dl{
  max-width:100%;
  position:relative;
}

article .detail dl dt{
  color:#FFF;
  font-size:18px;
  margin-bottom:1.3em;
  max-width:100%;
}

article .detail dl dd{
  color:#FFF;
  line-height:1.6em;
  text-align:justify;
  max-width:100%;
}
.product-box-big article .detail a,
.product-box-small article .detail a{
  margin-top:1em;
}





.product-box-small article{
  display: -webkit-flex; display: -ms-flexbox; display: flex;
  -ms-flex-flow:row nowrap; flex-flow:row nowrap;
  -webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;
-webkit-align-items: stretch; -ms-flex-align:stretch; align-items: stretch;
margin-bottom:2%; 
}

.product-box-small article .product-box-small-image{
  width:45%;
}
.product-box-small article .detail{
  width:55%;
}

.product-box-small article .product-box-small-image{
  min-height:310px;
  background-position:20% 0;
  background-size:cover;
  background-repeat: no-repeat;
}

.product-box-small article .detail{
  padding:2em;
  background:#04070e;
  display: -webkit-flex; display: -ms-flexbox; display: flex;
   -ms-flex-flow:column nowrap; flex-flow:column nowrap;
  -webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;
  -webkit-align-items: center;  -ms-flex-align: center; align-items: center;
}

.product-box-small article .detail .detail-circle{
  padding-bottom:2em;
}
.product-box-small article .detail .detail-circle img{
  max-width:100px;
}

.product-box-small article .detail dl dt{
  text-align:center;
}



@media(max-width:1000px){
  #production [class^="product-box-"] article{
    width:100%;
  }
  .product-box-big article .product-box-big-image img{
    width:100%;
  }

}

@media(max-width:640px){
  .product-box-small article{
    -ms-flex-flow:column nowrap; flex-flow:column nowrap;
  }

  .product-box-small article .product-box-small-image{
    width:100%;
    min-height:170px;
  }
  .product-box-small article .detail{
    width:100%;
  display: -webkit-flex; display: -ms-flexbox; display: flex;
  -ms-flex-flow:row nowrap; flex-flow:row nowrap;  
  -webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;
  -webkit-align-items: flex-start; align-items: flex-start;

  }

  .product-box-small article .detail .detail-circle{
    width:35%;
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;
    -webkit-align-items: center;  -ms-flex-align: center; align-items: center;
    padding-right:2em;
  }
  .product-box-small article .detail dl{
    width:65%;
  }
  article .detail{padding:1.2em;}
  article .detail dl dt{font-size:4.2vmin;font-weight:500;}
  article .detail dl dd{font-size:3.4vmin;text-align:justify;}

  .product-box-big article .detail,
  .product-box-small article .detail{padding:1em;}

  .product-box-big article .detail .detail-circle,
  .product-box-small article .detail .detail-circle{padding:0.5em 1em 0.5em 0 }

}









/* quality-control
*********************************************************************************/
#quality-control{
  position:relative;
  padding:150px 0 100px 0;
}

#quality-control .quality-control-title{
  padding-left:220px;
  width:60%;
  position:relative;
  margin-left:40%;
}

#quality-control .quality-control-title img{
  max-width:262px;
}

#quality-control .quality-control-title h2{
  font-size:36px;
  letter-spacing: 0.05em;
  color:#04070e;
  margin-top:1em;
  padding-bottom:1em;
  line-height:1.4em;
}
#quality-control .quality-control-title h2 br{
  display:none;
}

@media(max-width:1150px){
  #quality-control .quality-control-title h2 br{display:block;}
}

#quality-control .quality-control-img{
  width:100%;
  position:absolute;
  z-index:2;
  margin-top:-300px;
  overflow:hidden;
}
#quality-control .quality-control-img .quality-control-image{
  width:100%;
  height:450px;
  width:calc( 40% + 180px );
  margin-top:-450px;
  background-size:cover;
}

#quality-control .quality-control-img .img-over{
  width:100%;
  height:450px;
  width:calc( 40% + 180px );
  background:#d12232;
}




#quality-control .quality-control-text{
  background:#04070e;
  width:60%;
  position:relative;
  margin-left:40%;
  padding-left:220px;
  padding-top:1em;
  padding-bottom:2em;
  padding-right:2em;
}

#quality-control .quality-control-text p{
  padding: 1em 0;
  color: #FFF;
  line-height: 1.8em;
  text-align: justify;
  max-width:480px;
}

@media(max-width:1000px){
  #quality-control{
    padding:0;
  }

  #quality-control .quality-control-title,
  #quality-control .quality-control-img,
  #quality-control .quality-control-text{
    width:100%;
    padding:0;
    margin:0;
  }
  #quality-control .quality-control-img{
    position:relative;
  }
  #quality-control .quality-control-img .quality-control-image,
  #quality-control .quality-control-img .img-over{
    width:100%;
  }

  #quality-control .quality-control-title{
    text-align:center;
    padding-top:3em;
  }
  #quality-control .quality-control-title h2 br{
    display:none;
  }
  #quality-control .quality-control-img .quality-control-image{
    background-size:cover;
  }
  #quality-control .quality-control-text{
    padding:1em 2em 2em 2em;
    text-align:center;
  }
  #quality-control .quality-control-text p{
    max-width:100%;
  }

}

@media(max-width:767px){
  #quality-control .quality-control-img .quality-control-image,
  #quality-control .quality-control-img .img-over{
    height:400px;
  }  
}

@media(max-width:640px){
  #quality-control .quality-control-img .quality-control-image,
  #quality-control .quality-control-img .img-over{
    height:350px;
    background-position:50% 50% !important;
  }

  #quality-control .quality-control-title img{width:30%;}
  #quality-control .quality-control-title h2{font-size:6vmin;}
}


/* #top-morelinks
*********************************************************************************/
#top-morelinks{
  padding:100px 0;  
}

#top-morelinks a{
  height:275px;
}

#top-morelinks h3{
  width:100%;
  text-align:center;
  color:#FFF;
  line-height:1.5em;
  letter-spacing: 0.15em;
  font-weight:500;
  font-size:24px;
  margin-bottom:0.5em;
}
#top-morelinks h3 + button{
  font-size:14px;
  letter-spacing: 0.05em;
  min-width:12em;
}
#top-morelinks h3 + button:hover{
  cursor: pointer;
}
@media(max-width:1000px){
  #top-morelinks{padding:1em;}
  #top-morelinks a{ height:calc( 49vw * 0.5641 );}  
}

@media(max-width:767px){
  #top-morelinks{padding-top:1em;padding-bottom:1em;}
  #top-morelinks h3{font-size:20px;}
}

@media(max-width:640px){
  #top-morelinks .split-2{
    -ms-flex-flow:column nowrap; flex-flow:column nowrap;
  }
  #top-morelinks .split-2 > *{
    width:100%;
    height:calc( 100vmin * 0.5641 );
    margin-bottom:2%;
  }



}






/* top-news
*********************************************************************************/
#top-news{
  background:#FFF;
  padding:100px 0;
}
@media(max-width:1000px){
  #top-news{padding:3em 0;}
}