/* sub_menu
--------------------------- */	
#item{
   margin-top:-100px;
padding-top:100px; 
    
}
.sub_menu{
	font-family: 'Montserrat', sans-serif;
	position: fixed;
	top: 83px;
	width: 100%;
	height: 50px;
	z-index: 900;
	overflow: hidden;
	font-size: 100%;
    background-color: #000;
    opacity:0.8;
}
.sub_menu ul{
    text-align: center;
    padding-top: 20px;

}
.sub_menu li{
    display: inline-block;
    padding-right: 20px;
    padding-left: 20px;
    color: #fff!important; 
}
.sub_menu li:first-child{
    margin-right: 30px;
     padding-right: 50px!important;
    border-right: 2px solid #fff;

}
.sub_menu li a{
	
	font-size: 100%;
    color:#fff!important;

}
.sub_menu li a:hover{
    text-decoration: none;
    opacity: 0.6;

}
.dt_menu span,.menu span{
    font-size: 60%;
    color: #666;

}	
@media only screen and (max-width: 1024px) {
.sub_menu{
	top: 60px;
    }
.sub_menu ul{
    padding-top: 15px;

}
.sub_menu li{
    display: inline-block;
    padding-right: 2%;
    padding-left: 2%;
    color: #fff!important; 
}
.sub_menu li:first-child{
    margin-right: 3%;
     padding-right: 6%!important;
    border-right: 2px solid #fff;

}

	
}
/*
section
----------------------------------------------------------------------------------------------------*/
.main {
	width : 100%;
	margin-right: auto;
	margin-left: auto;
    padding-top: 130px;
}
.main img{
	width : 100%;
    height: auto;
}
.section {
	width : 100%;
	margin-right: auto;
	margin-left: auto; 

}

@media only screen and (max-width: 768px) {
.main {
	width : 100%;
	margin-right: auto;
	margin-left: auto; 
     padding-top: 110px;
}
.section {
	width : 100%; 
	margin-right: auto;
	margin-left: auto; 
	clear: both;
	padding: 60px 0 30px 0;
	
}
.main_text{
    margin-left: 10%;
	margin-right: 10%;
}
}


.subtitle {
	font-size: 60%;
	
}

h2{
    font-family: 'Noto Sans JP', sans-serif;
	clear: both;
	font-size: 160%;
	line-height: 1.5;
	text-align: left!important;
    font-weight: 500;
    color: #01bcca;
    margin-top: 15%;

	}
h2 span{
    font-size: 60%;
}
.spec_h{
    margin-top: 0%;
}
.title{
    font-family: 'Montserrat', sans-serif;
    font-size: 230%!important;
    display: inline-block;
    text-align: center;

}
.bdr_btm{
    border-bottom: 1px solid #000;
    
}
.col2 h3{
	clear: both;
	text-align:center;
	font-size: 140%;
	padding-left: 0px;
	line-height: 30px;
    margin-top: 30%;
	}
h4{
	clear: both;
	color: #ce1c2a;
	font-size: 100%;
	padding-left: 0px;
	line-height: 28px;
	margin-bottom: 20px;
	font-weight: bold;
	}
		
@media only screen and (max-width: 1024px) {
   h2{
     margin-top: 5%;  
    }
}
@media only screen and (max-width: 768px) {
 
	h2{
	clear: both;
	font-size: 150%;
	padding-left: 0px;
	line-height: 36px;
	margin-bottom: 0px;
	margin-top: 30px;
	}
    .title{

    font-size: 200%!important;


}
}
		/*
figure
----------------------------------------------------------------------------------------------------*/
.col1 {
	width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 60px;
}
.col1 .main_img {
    padding-top: 150px;
		}
.col1 img {	
	width: 100%;
	height:auto;
		}
.col1 .board {
    width:30%;
    position: absolute;
   top: 42%;
    left: 5%;
		}

.main_catch{
    margin-top: 40px;
    margin-left: 45%;
}
.main_text{
    width: 50%;
    margin-top: 30px;
    margin-left: 45%;
    text-align: left!important;
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}


.voltaik_spec {
     width:100%;
    max-width:750px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px!important;
    padding-bottom: 20px!important;

    
}
@media only screen and (max-width:1024px) {
.col1 .board {

   top: 46%;
   left: 3%;
		}
  .compa {
    margin-top: 60px;
    
} 
}

@media only screen and (max-width: 768px) {
.col1 {
    width: 100%;
    height: auto;
    padding-bottom: 60px;
}
.col1 .main_img {
    padding-top: 133px;
		}
.col1 .board {
    width:40%;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: auto;
    left: auto;
		}
.col1 .kb {
    width:40%;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: auto;
    left: auto;
		}
    .main_catch{
        width: 90%;
    margin-top: 40px;
    margin-left: 5%;
        margin-right: 5%;
}
    .main_text{
    width: 90%;
    margin-top: 40px;
    margin-left: 5%;
        margin-right: 5%;
}
    .compa {
    width:100%;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    
}
}




			/*
col2_1 figure
----------------------------------------------------------------------------------------------------*/
.col2_1 {
	width: 100%;
    height: auto;
}
.col2_1 figure {
	float: left;
	width: 50%;
	margin-left: 0%;
    margin-right: 0%;
	text-align: left;
		}

.col2_1 figure:first-child {
			margin-left: 0;
		}
.col2_1 figure img {	
	width: 100%;
	height:auto;

		}

.col2_1 figure {
			position: relative;
			overflow: hidden;
		}
	
.col2_1 figure p{
    font-size: 16px;
    line-height: 1.8;
    color: #ddd;
		}	
.box{
    padding-left:10%;
    padding-right:10%; 
    
}
@media only screen and (max-width: 768px) {
.col2_1 {
	width: 94%;
	margin-top: 0px;
	margin-left: 3%;
    margin-right: 3%;
}
.col2_1 figure {
	float: none;
	width: 100%;	
	margin-left: 0%;
		}
.col2_1 figure p{
    font-size: 95%;
    text-align: left;

		}	
.box{
    padding-left:5%;
    padding-right:5%; 
    
}
}

			/*
col2_2 figure
----------------------------------------------------------------------------------------------------*/
.col2_2 {
	width: 100%;
    height: auto;
}

.col2_2 figure {
	float: right;
	width: 50%;
	margin-left: 0%;
    margin-right: 0%;
	text-align: left;
		}
.col2_2 figure:first-child {
			margin-left: 0;
		}
.col2_2 figure img {	
	width: 100%;
	height:auto;

		}
.col2_2 h3 {
    font-size: 120%;
    text-align: left;
    font-weight: bold;
		}

	
.col2_2 figure {
			position: relative;
			overflow: hidden;
		}
	
.col2_2 figure p{
    font-size: 16px;
    line-height: 1.8;
    color: #ddd;
		}	

@media only screen and (max-width: 768px) {
.col2_2 {
	width: 94%;
	margin-top: 0px;
	margin-left: 3%;
    margin-right: 3%;
}
.col2_2 figure {
	float: none;
	width: 100%;	
	margin-left: 0%;
		}
.col2_2 figure p{
    font-size: 95%;
    text-align: left;

		}	
}


	/*
figure
----------------------------------------------------------------------------------------------------*/
.col3{
	width: 100%;
	
}
.col3 figure {
	float: left;
	width: 29.3%;
	margin-left: 2%;
    margin-right:2%;
	margin-bottom: 30px;
	text-align: center;
	padding-bottom: 10px;
		}
.col3 figure:first-child {
			margin-left: 0;
		}
.col3 figure img {	
	width: 100%;
	height:auto;

		}

	
	
	
figure {
			position: relative;
			overflow: hidden;
		}


	
.col3 figure h3{
    position: static;
    bottom: 0;
    right: 0px;
    z-index: 2;
    width: 100%;
    -webkit-transition: .3s;
    transition: .3s;
    padding: 10px 0 5px;
    font-size: 90%;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    max-height: 100px;
    line-height: 18px;
    font-weight: bold;
	}	
.col3 span{
    font-size: 80%;
    font-weight: normal;
	}	
		
		
@media only screen and (max-width: 768px) {
.col3 {
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
}
.col3 figure {
	float: left;
	width: 50%;
		margin-left: 0%;
    margin-right:0%;
	}

	
	
}
.more{
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	background-color: #000000;
	clear: both;
	}
	
.more a{
	width: 300px;
	color: #FFFFFF;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	display: block;
	}
.more a:hover{
	background-color: #444;

	}

	/*
about
----------------------------------------------------------------------------------------------------*/
.about .text{
    font-size: 100%;
    line-height: 1.9;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    color: #666;
}

.bg-blk{
    width: 100%;
    background-color: #3b3b3b;
 
}
.bg-blk2{
    background-color: #060607;
 
}
.bg-wave{
    width: 100%;
    background-color: #282828;
    background-image: url("../img/voltaik/wave.webp"); 
}

.bg-white{
    width: 100%;
    background-color: #fff;
}

	
/*
table
----------------------------------------------------*/
section table   {
	width: 70%;
	font-size: 80%;
	line-height: 24px;
    margin-left: auto;
    margin-right: auto;
}
section th, section td  { padding: 10px; border: 1px solid #ddd; }
section th  { background: #f4f4f4; }
 


@media only screen and (max-width:768px){
    .tbl {
        width: 90%;
        margin: 0 5%; 
    }
    .tbl th,
    .tbl td{
	width: 90%;
	display: block;
	border-top: none;
	padding-left: 5%;
        padding-right: 5%;
    }
    .tbl tr:first-child th   { border-top: 1px solid #ddd; }
}





/*タブ切り替え全体のスタイル*/
.tabs {
    width: 100%;
    max-width: 1200px;
    height: 550px;
    position: relative;
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  margin: 0 auto;
    text-align: center;
font-size:0;
}

/*タブのスタイル*/
.tab_item {
  width: 30%;
    margin: 60px auto 0 auto;
  border-bottom: 3px solid #bbb;

  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #bbb;
  display: inline-block;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
    width: 100%;
  position: absolute;
    top:100px;
    left: 0;
    
  opacity:0;
}


/*選択されているタブのコンテンツのみを表示*/

#white:checked ~ #white_content,
#black:checked ~ #black_content {
 
      opacity:01;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
    border-bottom: 3px solid #01bcca;
    color:#01bcca; 
    
}
.caution{
    padding-top: 30px;

    
}
.caution h3{
    text-align: center;
    font-size: 120%;
    color: #01bcca;
    font-weight: bold;
    margin-bottom: 15px;
}
.caution p{
    text-align: center;
    color: #fff;
}

@media only screen and (max-width:1024px){
.tabs {
    height: 450px;
}
}

@media only screen and (max-width:768px){
.tab_item {
  width: 46%;
    margin:30px auto 0 auto;
        }
.tabs {
    height: 280px;
}
    .caution p{
        font-size: 90%;
}

}
section a{
    color: #01bcca!important;
    text-decoration: underline!important;
}