body,div,ul,li {
  /*background-image: url(images/background.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgba(0,0,0,1);*/
  margin:0;
  padding:0;
  list-style: none;
}

#defaultCanvas0{
  position: fixed;
  top: 0;
  z-index: -999;
}

/* loading v */

.loading {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
}

.loading_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* loading v ens */

p{
  margin:0;
  padding:0;
}

.header_container {
  position: fixed;
  top:0; left:0;
  z-index: 100;
  display: flex;
  width:100%;
  height:48px;
  table-layout: fixed;

  background-color: #ffffff;

  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2);
}

.item{
  vertical-align: middle;
}

.item:nth-child(1){
  left:0;
  width:110px;
  height:100%;
  position: relative;
  padding-left:0.8em;
  /*text-align: center;*/
}

.item:nth-child(2){
  width:auto;
  height:100%;
  padding-left:0.7em;
}

.item:nth-child(3){
  position: relative;
  margin-left: auto;
  width:40px;
  height:100%;
}


a {
  text-decoration: none;
  color: #aaaaaa;
}



#navigator{
  position: absolute;
  top:54%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
  margin:0;
  padding:0;
  color: #aaaaaa;
  font-size: 70%;
}





.top_container{
  display: table;
  width:100%;
  height:70vh;
  position: absolute;
  top:50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);

  table-layout: fixed;

}

.top_item{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  /*background-color: aquamarine;*/
}

.top_item:nth-child(1){
  width: 32%;
  height: 100%;
  
}

.top_item:nth-child(2){
  width:36%;
  height:100%;
  max-height:  100vh;
}

.top_item:nth-child(3){
  width:32%;
  height:100%;
  writing-mode: vertical-rl;
}


#charger{
  background-color: rgba(0,0,0,1);
  background-image: url(./images/charger.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment:scroll;
  background-size: 75%;
}

#charger_overlay{
  width:100%;
  height:100%;
  background: -moz-linear-gradient(to bottom,   rgba(0,0,0,1.0), rgba(0,0,0,1) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,1) 70%, rgba(0,0,0,1.0)); 
  background: -webkit-linear-gradient(to bottom,rgba(0,0,0,1.0), rgba(0,0,0,1) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,1) 70%, rgba(0,0,0,1.0)); 
  background: linear-gradient(to bottom,        rgba(0,0,0,1.0), rgba(0,0,0,1) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,1) 70%, rgba(0,0,0,1.0)); 
  opacity:0;
}



.charger_show{
  transition: all 1s ease-in-out;
  transition-delay: 0.7s;
  transition-property: opacity;
  opacity: 1 !important;
}

.div_show{
  transition: all 1s ease-in-out;
  transition-delay: 0.7s;
  transition-property: opacity;
  opacity: 1 !important;
}

#product_list, .feature{
  opacity:0;
}

.glow{
  position: absolute;
  left:9%;
  top:47%;
  width: 22%;
  height: 2.5%;
  z-index: 200;
  background: -moz-radial-gradient(ellipse farthest-side,   rgba(255,255,255,1.0), rgba(0,255,0,1.0) 20%, rgba(0,255,128,1.0) 50%, rgba(0,0,0,0)); 
  background: -webkit-radial-gradient(ellipse farthest-side,rgba(255,255,255,1.0), rgba(0,255,0,1.0) 20%, rgba(0,255,128,1.0) 50%, rgba(0,0,0,0)); 
  background: radial-gradient(ellipse farthest-side,        rgba(255,255,255,1.0), rgba(0,255,0,1.0) 20%, rgba(0,255,128,1.0) 50%, rgba(0,0,0,0));
  animation:1s ease-in-out 1s infinite alternate forwards running glow_start; 
}

.glowB{
  position: absolute;
  left:29%;
  top:47%;
  width: 22%;
  height: 2.5%;
  z-index: 200;
  background: -moz-radial-gradient(ellipse farthest-side,   rgba(255,255,255,1.0), rgba(255,0,255,1.0) 20%, rgba(255,0,0,1.0) 50%, rgba(0,0,0,0)); 
  background: -webkit-radial-gradient(ellipse farthest-side,rgba(255,255,255,1.0), rgba(255,0,255,1.0) 20%, rgba(255,0,0,1.0) 50%, rgba(0,0,0,0)); 
  background: radial-gradient(ellipse farthest-side,        rgba(255,255,255,1.0), rgba(255,0,255,1.0) 20%, rgba(255,0,0,1.0) 50%, rgba(0,0,0,0)); 
  animation:1.5s ease-in-out 1s infinite alternate forwards running glow_start;
}

.glowC{
  position: absolute;
  left:49%;
  top:47%;
  width: 22%;
  height: 2.5%;
  z-index: 200;
  background: -moz-radial-gradient(ellipse farthest-side,   rgba(255,255,255,1.0), rgba(0,255,0,1.0) 20%, rgba(0,255,128,1.0) 50%, rgba(0,0,0,0)); 
  background: -webkit-radial-gradient(ellipse farthest-side,rgba(255,255,255,1.0), rgba(0,255,0,1.0) 20%, rgba(0,255,128,1.0) 50%, rgba(0,0,0,0)); 
  background: radial-gradient(ellipse farthest-side,        rgba(255,255,255,1.0), rgba(0,255,0,1.0) 20%, rgba(0,255,128,1.0) 50%, rgba(0,0,0,0));
  animation:1.2s ease-in-out 1s infinite alternate forwards running glow_start; 
}

.glowD{
  position: absolute;
  left:69%;
  top:47%;
  width: 22%;
  height: 2.5%;
  z-index: 200;
  background: -moz-radial-gradient(ellipse farthest-side,   rgba(255,255,255,1.0), rgba(0,255,0,1.0) 20%, rgba(0,255,128,1.0) 50%, rgba(0,0,0,0)); 
  background: -webkit-radial-gradient(ellipse farthest-side,rgba(255,255,255,1.0), rgba(0,255,0,1.0) 20%, rgba(0,255,128,1.0) 50%, rgba(0,0,0,0)); 
  background: radial-gradient(ellipse farthest-side,        rgba(255,255,255,1.0), rgba(0,255,0,1.0) 20%, rgba(0,255,128,1.0) 50%, rgba(0,0,0,0)); 
  animation:1.7s ease-in-out 1s infinite alternate forwards running glow_start;
}

@keyframes glow_start{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}

.wrapper{
  display:block;
  position: relative;
  width:90%;
  height:100%;
  margin-left:auto;
  margin-right:auto;
  
}

#example{
  background-color: rgba(0,0,0,1);
  background-image: url(./images/eg/0.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment:scroll;
  background-size: cover;
}

#example_overlay{
  width:100%;
  height:100%;
  background: -moz-linear-gradient(to bottom,   rgba(0,0,0,0.8), rgba(0,0,0,0.8) 40%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0.8)); 
  background: -webkit-linear-gradient(to bottom,rgba(0,0,0,0.8), rgba(0,0,0,0.8) 40%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0.8)); 
  background: linear-gradient(to bottom,        rgba(0,0,0,0.8), rgba(0,0,0,0.8) 40%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0.8)); 
  opacity:0;
}

#end_of_eneloop{
  background-color: rgba(255,255,255,1);
  background-image: url(./images/end.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment:scroll;
  background-size: cover;
}

#end_of_eneloop_overlay{
  width:100%;
  height:100%;
  background-color: rgba(255,255,255,0.3);
  opacity:0;
}

h3 {
  margin:0;padding:0;
  font-family: "HiraKakuPro-W6", "HiraKakuProN-W6", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  color: #888888;
  letter-spacing:0.3em;
  font-size: 135%;
}

h2 {
  margin:0; padding: 0;
  margin-bottom: 0.2em;
  line-height: 0.7em;
  color: #444444;
  font-size: 80%;
  font-family: "HiraKakuPro-W6", "HiraKakuProN-W6", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
}

h1 {
  margin:0; padding: 0;
  margin-bottom:0.5em;
  color: #444444;
  font-size: 180%;
  font-family: "HiraKakuPro-W6", "HiraKakuProN-W6", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
}

p {
  color: #444444;
  font-family: "HiraKakuPro-W6", "HiraKakuProN-W6", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  font-kerning:none; /* 自動カーニング禁止 */
  hanging-punctuation:allow-end; /* 句読点処理 */
}

.proviso{
  color:#aaaaaa;
  font-size: 80%;
  margin-top:2em;
}

div.wrap2center{
  width:100%;
  height:60%;
}