@charset "UTF-8";
/* 共通部分
------------------------------- */
body {
     background-image: url(image/bg.jpg);
     background-size: cover;
 }
 .position_Box {
     position:relative;
     width: 1000px;
     height:1000px;
     margin:0 auto;
     border:#c4e1ff 2px solid;
 }
   
 .position_Box .center_img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width:1000px;
    height:1000px;
 }

.header_img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width:1000px;
    height:1000px;
 }
.logo{
    position: absolute;
    width: 240px;
    height: 90px;
    top:10px;
    left:30px
}
 .sw_1{
    position: absolute;
    width: 153px;
    height: 47px;
    top:35px;
    left:330px
}
 .sw_2{
    position: absolute;
    width: 153px;
    height: 47px;
    top:35px;
    left:490px
}
 .sw_3{
    position: absolute;
    width: 153px;
    height: 47px;
    top:35px;
    left:650px
}
 .sw_4{
    position: absolute;
    width: 153px;
    height: 47px;
    top:35px;
    left:810px
}
/* Home Page
------------------------------- */
 .stage1{
     position: absolute;
     width: 200px;
     height: 200px;
     top:188px;
     left: 382px
 }
 
 .stage1 img{
     position: absolute;
     top: 0;
     left: 0;
     opacity: 1;
     transition:opacity 0.3s;
 }
 
 .stage1.on img{
     opacity: 0;
 }
 .stage2{
     position: absolute;
     width: 200px;
     height: 200px;
     top:342px;
     left: 130px
 }
 .stage2 img{
     position: absolute;
     top: 0;
     left: 0;
     opacity: 1;
     transition:opacity 0.3s;
 }
 
 .stage2.on img{
     opacity: 0;
 }
 .stage3{
     position: absolute;
     width: 200px;
     height: 200px;
     top:496px;
     left: 652px
 }
 
 .stage3 img{
     position: absolute;
     top: 0;
     left: 0;
     opacity: 1;
     transition:opacity 0.3s;
 }
 
 .stage3.on img{
     opacity: 0;
 }

 .title{
    position: absolute;
    top:90px;
    left:25px
}
/* Bottle Ship
------------------------------- */
.pic_1{
    position: absolute;
    width: 300px;
    height: 300px;
    top:160px;
    left:25px
}
.pic_1 img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition:opacity 0.3s;
}
.pic_1.on img{
    opacity: 0;
}
.pic_1f{
    position: absolute;
    width: 300px;
    height: 300px;
    top:160px;
    left:25px
}

 .pic_2{
    position: absolute;
    width: 300px;
    height: 300px;
    top:160px;
    left:350px
}
.pic_2 img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition:opacity 0.3s;
}
.pic_2.on img{
    opacity: 0;
}
.pic_2f{
    position: absolute;
    width: 300px;
    height: 300px;
    top:160px;
    left:350px
}

 .pic_3{
    position: absolute;
    width: 300px;
    height: 300px;
    top:160px;
    left:675px
}
.pic_3 img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition:opacity 0.3s;
}
.pic_3.pic_3.on img{
    opacity: 0;
}
.pic_3f{
    position: absolute;
    width: 300px;
    height: 300px;
    top:160px;
    left:675px
}
.pic_4f{
    position: absolute;
    width: 200px;
    height: 200px;
    top:580px;
    left:75px;
    cursor: pointer;
  }
  .pic_4f img{
    width: 100%;
    transition-duration: 0.5s;
  }
  .pic_4f:hover img{
    transform: scale(1.5);
    transition-duration: 0.5s;
  }
  
.pic_5f{
    position: absolute;
    width: 200px;
    height: 200px;
    top:580px;
    left:400px;
    cursor: pointer;
}
.pic_5f img{
  width: 100%;
  transition-duration: 0.5s;
}
.pic_5f:hover img{
  transform: scale(1.5);
  transition-duration: 0.5s;
}

.pic_6f{
    position: absolute;
    width: 200px;
    height: 200px;
    top:580px;
    left:725px;
    cursor: pointer;
}
.pic_6f img{
  width: 100%;
  transition-duration: 0.5s;
}
.pic_6f:hover img{
  transform: scale(1.5);
  transition-duration: 0.5s;
}
.pic_6{
    position: absolute;
    width: 280px;
    height: 280px;
    top:530px;
    left:675px;
    cursor: pointer;
}
.fig_11{
    position: absolute;
    width: 200px;
    height: 140px;
    top:240px;
    left:40px
}
.fig_12{
    position: absolute;
    width: 140px;
    height: 200px;
    top:180px;
    left:310px
}
.fig_13{
    position: absolute;
    width: 200px;
    height: 140px;
    top:240px;
    left:520px
}
.fig_14{
    position: absolute;
    width: 140px;
    height: 200px;
    top:180px;
    left:790px
}
.fig_21{
    position: absolute;
    width: 200px;
    height: 140px;
    top:440px;
    left:40px
}
.fig_22{
    position: absolute;
    width: 200px;
    height: 140px;
    top:440px;
    left:280px
}
.fig_23{
    position: absolute;
    width: 200px;
    height: 140px;
    top:440px;
    left:520px
}
.fig_24{
    position: absolute;
    width: 200px;
    height: 140px;
    top:440px;
    left:760px
}
.fig_31{
    position: absolute;
    width: 200px;
    height: 140px;
    top:640px;
    left:40px
}
.fig_32{
    position: absolute;
    width: 200px;
    height: 100px;
    top:680px;
    left:280px
}
/* Contact
------------------------------- */
.wrapper{
    position: absolute;
    top:80px;
    left:95px
}