body{
background-image:url('');
background-color: #f5f5f5;
font-family:'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 Meiryo, メイリオ, sans-serif;
}

a {
text-decoration: none;
color:blue;
}

a:hover { 
text-decoration:underline;
}

#wrap{
 width:1130px;
 margin-left:auto;
 margin-right:auto;
 }

#left{
 float:left;
 width:250px;
 height:1000px;
 padding-top:10px;
 padding-left:10px;
 padding-right:10px;
 background-color : #8E8EFF;
 }

#left2{
 float:left;
 width:250px;
 height:1500px;
 padding-top:10px;
 padding-left:10px;
 padding-right:10px;
 background-color : #8E8EFF;
 }

#left3{
 float:left;
 width:250px;
 height:3000px;
 padding-top:10px;
 padding-left:10px;
 padding-right:10px;
 background-color : #8E8EFF;
 }

#left4{
 float:left;
 width:250px;
 height:4150px;
 padding-top:10px;
 padding-left:10px;
 padding-right:10px;
 background-color : #8E8EFF;
 }

.news{
 float:left;
 width:850px;
 margin-left:5px;
 margin-right:5px; 
}

.inner{
 position:relative; 
 z-index:0;
 top:10px;
 width:300px;
 height:130px;
 margin-left:20px;
 margin-right:20px;
 margin-top:180px;
}

.ques{
 position:relative; 
  top:100px;
 width:240px;
 height:90px;
 margin-left:5px;
 margin-right:5px;
 margin-top:10px;
}

.picture{
 float:left;
 width:350px;
 height:320px;
 margin-left:10px;
 margin-right:10px;
 margin-bottom:20px;
 background-color : white;
 -webkit-box-shadow: 5px 5px 5px  gray;     /*影をつける*/
          box-shadow: 5px 5px 5px  gray; 

}

.text{
  color:black;
  font-size:16px;
  font-weight:bold;     
}
.text a:hover{
color:blue;
}

.contents {  
 float:left;
    width: 860px;  
    height: 580px;  
    position: absolute;  
    top: 20%;  
    left: 50%;  
   }  

.contents2 {  
    background-color:white ;    
    float:left;
    width: 750px;  
    height: 345px;  
    position: absolute;  
    top: 10%;  
    left: 35%;  

 -webkit-box-shadow: 5px 5px 5px  gray;     /*影をつける*/
     -ms-box-shadow: 5px 5px 5px  gray; 
    -moz-box-shadow: 5px 5px 5px  gray; 
      -o-box-shadow: 5px 5px 5px  gray;             
          box-shadow: 5px 5px 5px  gray; 
   }  

.contents3 {  
    background-color:white ;    
    float:left;
    width: 750px;  
    height: 1500px;  
    position: absolute;  
    left: 35%;  

-webkit-box-shadow: 5px 5px 5px  gray;     /*影をつける*/
     -ms-box-shadow: 5px 5px 5px  gray; 
    -moz-box-shadow: 5px 5px 5px  gray; 
      -o-box-shadow: 5px 5px 5px  gray;             
          box-shadow: 5px 5px 5px  gray;    }  

.word1{
 color:yellow; 
 text-align: center;  
 width:350px;
 height:25px;
 font-size:20px;
 font-weight:bold; 
 background-color:#35BDFF ;    
}

.word2{
 color:yellow; 
 text-align: center;  
 width:350px;
 height:25px;
 font-size:20px;
 font-weight:bold; 
 background-color :#8135FF  ;    
}

#footer{
 clear:both;
 text-align:center;
 font-size:20px;
 color:gray;
 background-color:black;
 width:100%;
 height:40px;}


.clear {
clear:both;
}  
.clear hr {
 display:none;
}  

.righty
{
  font-size:17px;
  color:gray;
  text-align: right;   
}


/*枠*/
.pic {
  float: left;
  height: 200px;
  width: 280px;
  overflow: hidden;
 padding-left:30px;
 padding-right:10px;
 padding-top:5px
}

/*ズーム*/
.grow img {
  height: 200px;
  width: 300px;
  
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
  
.grow img:hover {
  height: 150%;
  width: 150%;
}

/*アップ*/
.vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
  
.vertpan img:hover {
  margin-top: -200px;
}

/*ドロップダウンメニュー*/
#dropmenu{  
   list-style-type: none;  
   display: block;
   width:200px;          /* リスト全体の幅 */
   height:100px;         /* リスト全体の高さ */
   text-align:left;      /* 文字を左へ */  
   font-size:200%;       /* 文字を大きく */
   font-weight:bold;     /* 文字を太く */
   line-height:100%;
   padding: 10px 0 50px 0;       /* 行の高さを調整 */
   
   }  
 #dropmenu li{  
   position: relative;  
   width:200px;          /* リスト全体の幅 */
   height:35px;          /* リスト全体の高さ */
   float: left;  
   text-align: left;    
  }  
 #dropmenu li a{  
   display: block;  
   margin: 0;  
   padding: 0 0 0 0;  
   font-size: 16px;  
   font-weight: bold;  
   text-decoration: none;  
 }  
 #dropmenu li:hover > a{  
   background: #8EC7FF;  
   }  
 #dropmenu li ul{  
   list-style: none;  
   position: absolute; 
   z-index:1; 
   top: 0;  
   left: 100%;  
   margin: 0;  
   padding: 0;  
 }  
 #dropmenu li ul li{  
   overflow: hidden;
   width: 530%;  
   height: 0  ;
   -moz-transition: .2s;  
   -webkit-transition: .2s;  
   -o-transition: .2s;  
   -ms-transition: .2s;  
   transition: .2s;  
 }  
 #dropmenu li ul li a{  /*サブメニューのレイアウト*/
   padding: 0 15px;  
   background: #8EC7FF; 
   text-align: left;  
   font-size: 18px;
   font-weight:bold;       
   color:white; 
 } 
#dropmenu li ul li:hover > a{  
   background: whitesmoke;
   color: #8EC7FF; 
   }  
 #dropmenu li:hover ul li{  
   overflow: visible;  
   height: 32px;  
   }  

 #dropmenu li ul li ul li{  
   overflow: hidden;  
   width:320%;  
   height: 0  ;
   -moz-transition: .2s;  
   -webkit-transition: .2s;  
   -o-transition: .2s;  
   -ms-transition: .2s;  
   transition: .2s;  
 }  

 #dropmenu li ul li ul li a{  /*サブサブメニューのレイアウト*/
   padding: 0 15px;  
   background: #B7D2FF;
   text-align: left;  
   font-size: 18px;
   font-weight:bold;       
   color:white; 
 } 
#dropmenu li ul li ul li:hover > a{  
    background: whitesmoke;
    color:#8EC7FF;
   }  
 #dropmenu li ul li:hover ul li{  
   overflow: visible;  
   height: 32px;  
   }  
/* #dropmenu li:hover ul li:first-child{  /*同じ親要素の兄弟要素で、最初の要素に適用*/
   border-top: 0;  
 }  
 #dropmenu li:hover ul li:last-child{  
   border-bottom: 0;  
 }  */