@charset "UTF-8";
/*-----------------
        reset
  -----------------*/
* {
  box-sizing: border-box; }

body, h1, h2, p, video, section, div, nav, ul, li, dl, dt, dd {
  margin: 0;
  padding: 0; }

img {
  vertical-align: top;
  border: none; }

a {
  border: none; }

li {
  list-style-type: none; }

html {
  font-size: 62.5%; }

/*-------------------
         global
 -------------------*/
body {
  font-family: 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 1em;
  color: #ddd;
  background: #000; }


.none {
  display: none; }
#current {
  position: fixed;
  top: 45%;
  right: 50px;
  transform: translateX(150px);
  transition: all 0.5s ease-in-out;
  z-index: 999;
}
#current_scale {
  position: fixed;
  top: 45%;
  right: 0;
  transform: translateX(150px);
  transition: all 1s ease-in-out;
  z-index: 999;
}
.no_scroll {
  overflow: hidden;
}
/*-------------------
        header
  -------------------*/
header {
  width: 100%;
  background: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999; }
header .head_inner {
  height: 65px;
  padding: 18px 20px 0;
  width: 100%;
  margin: 0 auto;
  overflow: hidden; }
header .logo2 {
  float: right; }

/*-------------------
         main
 -------------------*/
#main {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden; }
#main .main_logo {
  position: absolute;
  top: 90px;
  left: 30px;
  z-index: 150; }
#main .main_wrap {
  width: 560px;
  height: 600px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 150; }
#main .main_wrap .main1 {
  position: relative;
  width: 560px;
  height: 403px;
  /*overflow: hidden;*/
  margin: 0 auto 20px auto;
 }
 .main1 img {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
  }
#main .main_wrap .main2 {
    margin-bottom: 30px; }
#main .main4 {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -25px;
  z-index: 150; }
.sns_btn {
  position: absolute;
  top: 94px;
  right: 91px;
  z-index: 999;
  font-size: 2.3em;
}
.sns_btn a {
  margin-left: 30px;
}
.sns_btn a:hover {
  opacity: 0.5;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
.sns_btn a:link, .sns_btn a:visited {
  color: #FFF;
}
.sns_posi {
  position:fixed;
  top: 94px;
  right: 91px;
}
.background {
  width: 100%;
  height: 100vh;
  position: fixed;
  top:65px;
  left: 0;
  z-index: 140;
}
.background img {
  width: 100%;
  height: 100%;
}
.video {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  z-index: 135; }

.videoCover{
  background: url(../img/movie_bg_dott.png);
  background-repeat: repeat;
  width: 100%;
  height:100%;
  z-index: 140;
  position: fixed;
  top:0;
  left:0;
}
#slide_1{
  z-index: 137;
  position: fixed;
  width:100%;
  height:100%;
}
.slide-image{
  position: fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 130!important;
  display: none;
}
.preSlide{
  z-index: 131!important;
}
.active_slide{
  z-index: 132!important;
}

video {
  min-width: 100%;
  min-height: 100vh; }

.nav_icon {
  position: relative;
  float: right;
  width: 31px;
  height: 21px;
  padding: 10px;
  z-index: 999; }
  .fixed:hover {
    opacity: 0.5;
    transition: 0.5s ease-in-out;
    cursor: pointer;
  }
.nav_icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #FFF;
  transition: all .5s; }
.nav_icon span:nth-of-type(1) {
  top: 0; }
.nav_icon span:nth-of-type(2) {
  top: 10px; }
.nav_icon span:nth-of-type(3) {
  bottom: 0; }

.active span:nth-of-type(1) {
  transform: translateY(10px) rotate(-35deg); }

.active span:nth-of-type(2) {
  opacity: 0; }

.active span:nth-of-type(3) {
  transform: translateY(-9px) rotate(35deg); }

.fixed {
  position: fixed;
  top: 70px;
  right: 5px;
  z-index: 999;
  padding: 25px; }

.g_nav {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 998;
  background: rgba(0, 0, 0, 0.9); }
.g_nav ul {
  width: 80%;
  height: 530px;
  text-align: center;
  position: absolute;
  top: 65px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto; }
.g_nav ul li {
  margin-bottom: 35px; }
  .g_nav li a:hover {
    opacity: 0.5;
    transition: 0.5s ease-in-out;
  }
.g_nav .sns {
  font-size: 3em;
  display: inline-block; }
.g_nav .sns .facebook {
  margin: 0 10px 0 30px;}
.sns a:link ,.sns a:visited {
  color: #FFF;
}
.tech_nav {
  margin-left: 30px;
  padding: 10px 0;
}
.tech_nav a {
  margin-right: 25px;
}
/*-------------------
        youtube
 -------------------*/
.modal {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: table;
  z-index: 1000;
  display: none;
}
.close_btn {
  position: relative;
  float: right;
  width: 31px;
  height: 21px;
  z-index: 1000;
  display: none;}
  .btn_posi {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 1000;
  }
.close_btn span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #FFF;
  transition: all .5s; }
.close_btn span:nth-of-type(1) {
  transform: translateY(10px) rotate(-35deg);
  top: 0; }
.close_btn span:nth-of-type(2) {
  visibility: hidden;
  top: 10px; }
.close_btn span:nth-of-type(3) {
  transform: translateY(-9px) rotate(35deg);
  bottom: 0; }

.close_btn:hover {
  cursor: pointer;
  opacity: 0.5;
  transition: 0.5s ease-in-out; }

.mov_inner {
  width: 1280px;
  height: 720px;
  margin: 0 auto;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
/*-------------------
        intro
 -------------------*/
#intro {
  /*background-image: url("../img/intro_2.png");
  background-position: right;
  background-repeat: no-repeat;*/
  padding: 0 30px 100px 30px;
  position: relative;
  z-index: 150; }
#intro h1 {
  text-align: center;
  padding-top: 100px; }
#intro .intro_wrap {
  max-width: 590px;
  width: 100%;
  margin: 0 auto;
  text-align: center; }
#intro .intro_wrap .intro1 {
  font-size: 2.6rem;
  margin: 80px 0; }
#intro .intro_wrap .intro2 {
  margin-bottom: 30px;
  font-size: 1.6rem; }
#intro .intro_wrap .intro3 {
  line-height: 2.5;
  font-size: 1.6rem; }
.present {
  margin-top: 50px;
}
.present a:hover {
  cursor: pointer;
  opacity: 0.5;
  transition: 0.5s ease-in-out;
}
/*-------------------
         ehada
 -------------------*/
#ehada {
  background-image: url("../img/intro_bg2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  padding: 0 30px 100px 30px;
  position: relative;
  z-index: 140; }
#ehada h1 {
  text-align: center;
  padding-top: 100px; }
#ehada .intro_wrap {
  max-width: 790px;
  width: 100%;
  margin: 0 auto;
  text-align: center; }
#ehada .intro_wrap .intro1 {
  margin: 80px 0; }
.youtube {
  position: relative;
  width: 360px;
  height: 202px;
  margin: 55px auto 0 auto;
  background: url('../img/youtube_bg.jpg');
}
.play {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -30px;
  margin-top: -30px;
}
.play:hover {
  opacity: 0.5;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
/*-------------------
    simulate_modal
 -------------------*/
.simulate_modal {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  z-index: 999;
  display: none;
  overflow: scroll;
}
.simulate_inner {
  width: 730px;
  margin: 0 auto;
  position: relative;
}
.simulate_wrap {
  height: 600px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.simulate_close {
  position: relative;
  float: right;
  width: 31px;
  height: 21px;
  z-index: 1000;
  display: none;}
  .btn_posi {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 1010;
  }
.simulate_close span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #FFF;
  transition: all .5s; }
.simulate_close span:nth-of-type(1) {
  transform: translateY(10px) rotate(-35deg);
  top: 0; }
.simulate_close span:nth-of-type(2) {
  visibility: hidden;
  top: 10px; }
.simulate_close span:nth-of-type(3) {
  transform: translateY(-9px) rotate(35deg);
  bottom: 0; }

.simulate_close:hover {
  cursor: pointer;
  opacity: 0.5;
  transition: 0.5s ease-in-out; }
.style {
  display: inline-block;
  vertical-align: top;
  margin-right: 18px;
  position: relative;
  z-index: 100;
}
.style dt {
  position: relative;
  width: 200px;
  height: 50px;
  text-align: center;
}
.style dt:hover {
  opacity: 0.5;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
dd:hover {
  cursor: pointer;
}
.color {
  display: inline-block;
  vertical-align: top;
  position: relative;
  z-index: 100;
}
.color dt {
  position: relative;
}
.color dt:hover {
  opacity: 0.5;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
.style span,
.color span{
  background: #000;
  overflow: hidden;
  left:0;
  top:49px;
  height: 0;
  position: absolute;
}
.borderbottoms{
  border-bottom: solid 1px #fff;
}
.style dd,
.color dd{
  display:block;
}
.style dd:first-child,
.color dd:first-child{
  background: none;
}
.buy {
  display: inline-block;
  margin-left: 50px;
}
.buy:hover {
  opacity: 0.5;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
.change1, .change2 {
  width: 600px;
  position: absolute;
  top: 120px;
  left: 50%;
  margin-left: -300px;
  text-align: center;
  z-index: 5;
}
.change2 img{
  display: none;
}
.changeActive{
  z-index: 10;
}

dt {
  margin-top: 20px;
}
dd {
  width: 200px;
  background: #000;
  padding-top: 10px;
  padding-left: 10px;
  display: none;
}
dd:last-child {
  padding-bottom: 15px;
  border-bottom: solid 1px #FFF;
}
.now_style {
  position: absolute;
  top: -5px;
  left: 10px;
}
.now_color {
  position: absolute;
  top: -3px;
  left: 0;
}

/*-------------------
      suminagashi
 -------------------*/
.tech {
  padding: 80px 0 100px 0;
  z-index: 150;
  position: relative;
}
.tech_inner {
  width: 870px;
  margin: 0 auto;
}
.title {
  text-align: center;
  margin-bottom: 35px;
}
.tech_pic {
    width: 900px;
    margin-bottom: 35px;
    padding-left: 14px;
    padding-right: 5px;
    margin: 0 auto 35px 0;
}
.tech_pic img {
  margin-right: 35px;
}
.tech_btn {
  text-align: center;
}
.tech_btn img:hover {
  opacity: 0.5;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
.simulate {
  margin-right: 20px;
}
.about h1 {
  text-align: center;
  margin-bottom: 20px;
}
.about p {
  width: 840px;
  margin: 0 auto 35px auto;
  font-size: 1.39em;
  line-height: 1.8;
  text-indent: -10px;

}
#suminagashi {
  background: url('../img/tech1_bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/*-------------------
       haboku
-------------------*/
#haboku {
  background: url('../img/tech2_bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/*-------------------
      squeegee
 -------------------*/
 #squeegee {
   background: url('../img/tech3_bg.jpg');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
 }
 /*-------------------
    glass-stroke
 -------------------*/
 #glass {
   background: url('../img/tech4_bg.jpg');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
 }
/*-------------------
      cracking
 -------------------*/
 #cracking {
   background: url('../img/tech5_bg.jpg');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
 }
 #cracking .tech_btn {
  margin-bottom: 70px;
 }
 /*-------------------
        About
  -------------------*/
 #about {
   background-color: #181818;
   background-image: url("../img/about_bg.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   padding: 65px 0 0 0;
   margin-top: -65px;
   position: relative;
   z-index: 150;
   overflow: hidden; }

 .about_wrap {
   max-width: 960px;
   width: 100%;
   margin: 0 auto; }
 .about_wrap .about_text {
   display: inline-block;
   padding: 75px 0 150px 0; }
 .about_wrap .about_pic {
   width: 60%;
   display: inline-block;
   vertical-align: top;
   position: relative;
   padding-left: 100px;
   padding-top: 20px; }
 .about_wrap h1 {
   font-size: 1.6rem;
   letter-spacing: 3px;
   margin-bottom: 40px; }
 .about_wrap .about_pic1 {
   margin-left: 100px;
   padding-top: 20px;
   position: absolute;
   top: 0;
   right: -40px;
   z-index: 30; }
 .about_wrap .text1 {
   margin-bottom: 40px; }
 .about_wrap .text2 {
   font-size: 1.4rem;
   line-height: 2;
   margin-bottom: 40px; }

/*-------------------
       pigment
 -------------------*/
#pigment {
  background: #000;
  /*background: url("../img/pigment_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;*/
  padding: 65px 0 100px 0;
  margin-top: -65px;
  position: relative;
  z-index: 140; }
#pigment .pigment_wrap {
  max-width: 970px;
  width: 100%;
  margin: 0  auto;
  padding-top: 60px;
  display: flex; }
#pigment .pigment_wrap h1 {
  font-size: 1.6rem;
  letter-spacing: 3px;
  padding-top: 30px;
  margin-bottom: 40px; }
#pigment .pigment_wrap .text1 {
  font-size: 2.6rem;
  margin-bottom: 40px; }
#pigment .pigment_wrap .text2 {
  font-size: 1.4rem;
  margin-bottom: 30px;
  line-height: 2; }
#pigment .pigment_wrap .text2 a{
  color: #FFF;
  display: inline-block;
  position: relative;
  text-decoration: none;
}
#pigment .pigment_wrap .text2 a::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(1);
  background-color: #FFF;
  transition: all .3s ease;
}
#pigment .pigment_wrap .text2 a:hover::after {
  transform: scaleX(0);
}
#pigment .pigment_wrap .text2 a:hover {
  opacity: 0.5;
  transition: all 0.5s ease-in-out;
  border: none;
  cursor: pointer;
  }
#pigment .pigment_wrap .text2 a:link, #pigment .pigment_wrap .text2 a:visited {
  color: #FFF;
}
#pigment .pigment_wrap .text3 {
  font-size: 1.2rem; }

.pigment_text, .pigment_pic {
  display: inline-block;
  vertical-align: top; }

.pigment_pic {
  padding-top: 60px;
  margin-right: 90px; }

/*-------------------
       workshop
 -------------------*/
#workshop {
  padding: 100px 0;
  background: url("../img/workshop_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position:　center;
  position: relative;
  z-index: 150; }
#workshop .workshop_posi {
  max-width: 1050px;
  width: 100%;
  margin: 0 auto; }
#workshop a img:hover {
  opacity: 0.5;
  transition: 0.5s ease-in-out; }
#workshop .workshop_wrap {
  max-width: 530px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 50px 45px; }
#workshop .workshop_wrap h1 {
  font-size: 1.6rem;
  letter-spacing: 3px;
  margin-bottom: 30px; }
#workshop .workshop_wrap .text1 {
  margin-bottom: 30px; }
#workshop .workshop_wrap .text2 {
  font-size: 1.4rem;
  margin-bottom: 30px;
  line-height: 2; }

/*-------------------
       footer
 -------------------*/
footer {
  height: 150px;
  background: #000;
  position: relative;
  z-index: 150; }
footer .footer_inner {
  width: 350px;
  margin: 0 auto; }
footer .page_top {
  text-align: center;
  padding-top: 35px; }
footer .page_top a img:hover {
  opacity: 0.5;
  transition: 0.5s ease-in-out; }
footer p {
  text-align: center;
  padding-top: 35px; }
/*-------------------
       animation
 -------------------*/
.animated {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

    .hidden {
      visibility: hidden;
    }
    .visible {
      visibility: visible;
    }

/*----------------------
    Main Visualリキッド化
  ----------------------*/
/*@media screen and (max-height:770px){
  .main_wrap {
    height: 450px!important;
    bottom: 50px!important;
    top: 50px!important;
  }
  .main1 {
    width: 360px!important;
    height: 260px!important;
    margin: 0 auto;
  }
  .main_wrap .main1 img {
    width: 100%;
    height: auto;
  }
}*/