@charset "UTF-8";

body {-webkit-text-size-adjust: 100%;
     font-family: "MS　明朝”,"ヒラギノ明朝",
Roboto, Arial, "Helvetica Neue", Helvetica, serif ;
    font-size: 14px;
       background-image: url("../illustration/HPbackimg2.png") ; 
       background-color: rgba(0, 0, 0, 1);
        margin:2px;
   

           }
h1 {
  color: white;
}
h2 {color:white;
      font-size:18px;
      }
      

h5 {color:white;font-size:34px;
     margin-top:0px;
     margin-bottom:0px;
     font-family:'Hiragino Kaku Gothic Pro';
     border:border: inset 10px #ff0000;    
}    

.coment h1{
    text-decoration: underline;
}     



.rightsideber ul li a: hover {color:rgba(0, 139, 219, 1); }

.header {
   position:relative;top:-30px;left:0px;
    height: 20px;
    border-bottom: 1px solid #e0e0e0;
   
   text-align: center;
   
}
.header-title {
    text-align: center;
    padding: 5px 0 0;
   　
}

.headerimg { 
                    margin-left:0px;
                  height:130px;
　　　　　　text-align: center;
　　　　　　vertical-align:middle;
　　　　　　
　　　　　　
　
}
.headerimg img {width:300px; position:relative; top:0px; left:-20px;}

.headerimg h5 { background: rgba(255, 255, 255, 0.01);
                      text-shadow: 5px 5px 2px blue;
                      float:left;
                      text-align: center;
                       font-size:32px;
                     
                      
                      
                       }


#page-menu {
    z-index:3;
    position: fixed;
    top: 5px;
    left: 5px;
    font-size: 77%;
   
}

#page-menu a {
    background: rgba(102, 102, 102, 0.3);
    text-decoration: none;
    color: #fff;
    width: 50px;
    padding: 10px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}

#page-menu a:hover {
    text-decoration: none;
    background: rgba(102, 102, 102, 0.3);
}


#page-top {
    z-index:4;
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}



.main {position:relative; top:-50px;left:0px;}

.newcoment {margin-left:15px;
                  

}

.newcoment h2{margin-bottom:0px;
                        }
.newcometitle h2{color:yellow;
                            position:relative; 
                        top:-20px;}    
                    
.newcoment img{margin-left:5px;
                        width:120px;
                         position:relative; 
                        top:-20px;
                        left:-5px;
    
}
   
   
   /*cube0ここから*/
.stage{
 -webkit-perspective: 800;
 -ms-perspective: 800;
 -o-perspective: 800;
 -moz-perspective: 800px;
 perspective: 800;
 margin:5px;
}


.cube {
 height: 150px;
 width: 120px;
 position: relative;
 top:5px;left:0px;
 margin:0 auto;
 -webkit-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition:all 3s;
 -o-transition:all 3s;
 transition:all 3s;
 
}

.cube div {
 height: 150px;
 width: 120px;
 position: absolute;
 color: #fff;
 text-align: center;
 line-height: 50px;
 margin:0px;
}


 .cube {
  -moz-animation: cube0 20s linear -0s infinite alternate;
-webkit-animation: cube0 20s linear -0s infinite alternate;
-o-animation: cube0 20s linear -0s infinite alternate;
-ms-animation: cube0 20s linear -0s infinite alternate;
  
 
  margin:1px auto;
} 
@keyframes cube0{
  0%   { -webkit-transform:  rotateY(0deg);    }
   100%   { -webkit-transform:  rotateY(1080deg);  }
}
@-webkit-keyframes cube0 {
	
  0%   { -webkit-transform:  rotateY(0deg);    }
   100%   { -webkit-transform:  rotateY(1080deg);  }
}
 @-moz-keyframes cube0 {
0%   { -webkit-transform:  rotateY(0deg);    }
   100%   { -webkit-transform:  rotateY(1080deg);  }

}

@-o-keyframes cube0 {
0%   { -webkit-transform:  rotateY(0deg);    }
   100%   { -webkit-transform:  rotateY(1080deg);  }

}

@-ms-keyframes cube0 {
0%   { -webkit-transform:  rotateY(0deg);    }
   100%   { -webkit-transform:  rotateY(1080deg);  }

}

/*cube0ここまで*/  
           
    
      
    
                            

      
 
 
                
.whatnew h1 {
    margin-bottom: 0px; margin-left:20px;}
    

.newcoment {width:180px;margin-left:auto;margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
       background-color:rgba(0, 0, 0, 0.7);
   
}

.newcoment h2{
    margin-top:0px;
    vertical-align: top;
  
}

.toiawase {color:white;
                }
.toiawase h2{margin-left:20px;}
.rightsideber {background-color:rgba(0, 0, 0, 0.2);
　　　　　　　
                        
}

.rightsideber ul {text-decoration: underline; }

.QAtable {
    width: 90%;
    margin:5px 5px;
    margin-left:auto;margin-right:auto;
    font-color:#fff;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-spacing:0;
}
.QAtable tr th, .QAtable tr td {　/*「,（カンマ）」で区切って複数のセレクタを指定しています*/
    font-size: 10px;
  
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    padding: 7px;
    background: rgba(255, 255, 255, 0.5);
}
table.QAtable tr th {
    background: #E6EAFF;
    
}


.question {height:50px;
               border-radius: 20px;
                background-color:rgba(8, 0, 255, 0.7);
                margin-top:0px; margin-bottom:0px;
                width:300px;}
                
.question h2 {margin:5px;
                   padding:10px;}     
                   
.question :hover { height:30px;
                          background-color: rgba(205,92,92,0.7);
                           border-radius: 20px;
}                              

#question001 {margin:10px;}

.beads ul{ margin:0;padding:0;list-style:none;}
.beads li a {display:block; padding:5px;color:rgba(255, 255, 255, 1);font-size:18px;text-decoration:none;border: inset 1px yellow;solid 10px ;
border-radius: 1em;	}

.beads li a:hover {color:rgba(0, 139, 219, 1)}




.baeds ul:after{content:"";
                      display: block;
                      clear: both}
.beads li          {float: left; width:auto;}                        


.footer { text-align:center;
                }
                
 h3 { color:white;font-size:12px;
     margin-top:0px;
     margin-left:30px;
     margin-bottom:0px;
}                

/*###########840px以上###########*/

@media  (min-width:840px) {
    
.header {
   position:relative;top:0px;left:0px;
    height: 10px;
    border-bottom: 1px solid #e0e0e0;
   
   text-align: center;
   
}
#page-menu {display:none;}
#page-menu a {display:none;}

#page-top {display:none;}
#page-top a {display:none;}


.headerimg img {width:500px; position:relative; top:0px; left:-20px;}

.headerimg h5 {text-align: center;
                       vertical-align:middle;
                       font-size:48px;
                       position:relative;top:-30px; 
                    margin-top:0px;
                  height:150px;
}


.button {visibility:hidden;
	color: #333 ;
	display: block ;
	background: #fff ;
	text-align: center ;
	padding: 8px ;
	font-size: 1rem ;
	font-weight: 700 ;
	border: 1px solid #e6e6e6 ;
	width: 300px ;
	box-sizing: border-box ;
}

.button:hover {
	cursor: pointer ;
	background: #e6e6e6 ;
}

.target1{display:none;}
.main:after {content: "";
                      display: block;
                      clear: both}
                      
.Leftcont {float: left;
               width: 80%}
 
 
             
.rightsideber{float: left;
               width: 20%}      
                                              
             .Leftcont:after{content: "";
                      display: block;
                      clear: both}
               .leftsideber {float: left;
               width: 30%}                                  
                .maincont{float: left;
               width: 70%}   
                
               .mov {margin:20px;}  
 
h5 {color:white;font-size:48px;
    }     
     .mov1video video{ width:400px;
 }
   .mov1video {width:400px;margin-left:auto;margin:right:auto;
    
   } 
     .mov2video {width:400px;margin-left:auto;margin:right:auto;
     }
     .mov2video video{ width:400px;
 }
 
    
                
                }   

 


/*################760以下#############*/

@media (max-width:760px) {
 
     
  }