@charset "UTF-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, th, td {
  margin: 0;
  padding: 0;
  line-height: 1.0;
font-family: 'Open Sans', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Slabo 27px', serif;
font-weight: 500;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul, ol {
  list-style: none; /* マーカーを消す */
}

a {
  text-decoration: none; /* 下線を消す */
}

img {
  border: 0;
}

img, input {
  vertical-align: bottom;
}

/*レイアウト*/


body{
	background:#00849c;
}






#container{
	width: 1200px;
	margin: 0px auto;
	background:#fafafa;
}




header{
	width: 100%;
	height: 200px;
	background:url(../img/hed_bio.png) no-repeat;
}

h1{
	color: #FFFFFF;
	padding: 10px;
}

header p{
	color: #FFFFFF;
	padding-left: 10px;
}


h2{
text-align: center;
}





/*----------------------------コンテンツ---------------------------------*/


#warapper{
	overflow: hidden;
}


/*----------------------------サイド--------------------------------*/


#side{
	width: 300px;
	float: left;
	
}





#side ul{
	margin:120px 0 0 100px;
}

#side li{
	margin: 32px;
	position: relative;
}


#side li:nth-child(odd){
	width: 80px;
	height: 80px;
	line-height: 80px;
	
}

#side li:nth-child(even){
	width: 160px;
	height: 160px;
	line-height: 160px;
	
}

#side li a{
	display: block;
	width: 100%;
    text-align: center;
	font-size: 25px;
	color:#000033;
	
	
}




.big {
display: block;
width: 80px;
height: 80px;
position: absolute;
top: 0;
left: 0;
border: 1px #000033 solid;
box-sizing: border-box;
transform: rotate(45deg);
	
	
	
}


.mini{
display: block;
width: 160px;
height: 160px;
position: absolute;
top: 0;
left: 0;
border: 1px #000033 solid;
box-sizing: border-box;
transform: rotate(45deg);
	
}






.mini:hover {
	
transform: rotate(90deg);
transition: 0.3s;
}

.big:hover {
	
transform: rotate(90deg);
transition: 0.3s;
}



/*------------------------------右側メイン-------------------------------------------*/


#main{
	width: 900px;
	 margin-bottom:50px;
	float: right;

}



h2{
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
	
}


h2 p{
	line-height: 0;
}


#gf{
  margin-left:50px;
}

#gf iframe{
	width: 900px;
	height: 1100px;
	margin-top: -100px;

  
  
  }

/*------------------------------footer------------------------------------------*/


footer{
	width: 100%;
	height:80px;
   margin: 0 auto;
  background:#000033;
  color:#FFFFFF;
}
footer p{
  width:900px;
  font-size:18px;
  text-align:center;
  line-height:80px;
  float:right;
	font-family: 'Open Sans', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Slabo 27px', serif;
}






/*--------------------アイコン------------------*/


footer ul{
  margin-left:20px;
  float:left;
  width:200px;
}


footer li{
	float: left;
}



footer li a{
	display: block;
	font-size: 45px;
	margin:20px 0 0 10px;
}

.icon{
	color:#fff;
}


.icon:hover{
	color:#00849c;
}



@media screen and (max-width:1199px){


#container{
	width: 100%;
}


header{
	width: 100%;
}



/*----------------------------サイド---------------------------------*/


#side{
	width: 25%;
	
}

#side ul{
  width:100%;
	margin:120px 0 0 33.33%;

}




/*----------------------------メイン-------------------------------------*/

#main{
	width:75%;

}

#gf iframe{
	width: 100%;
  
  
  }


/*------------------------------footer------------------------------------------*/



footer p{
  width:50%;

}


/*--------------------アイコン------------------*/



footer ul{
  float:left;
  width:200px;
}

}





/*---------------ipad-----------------*/


@media screen and (max-width:950px){
 
 
 
#side{
	width: 25%;
	
}


#side ul{
  width:100%;
	margin:75px 0 0 33.33%;

}

#side li{
	margin: 10px;
}


#side li:nth-child(odd){
	width: 120px;
	height: 120px;
	line-height: 120px;
	
}

#side li:nth-child(even){
	width: 120px;
	height: 120px;
	line-height: 120px;
	
}

#side li a{
	display: block;
	width: 100%;

}


#side li a:hover{
  background:#0099CC;
}


.big {
display: block;
width: 120px;
height: 120px;
transform: rotate(0deg);

}


.mini{
display: block;
width: 120px;
height: 120px;
transform: rotate(0deg);
	
}






.mini:hover {
	
transform: rotate(0deg);
transition:none;
}

.big:hover {
	
transform: rotate(0deg);
transition:none;

}
	
	
	
	
	#gf iframe{
	margin-top: -1px;

  
  
  }



	
	
	
  }



/*----------------------------------------------スマホ----------------------------------------------------*/

@media screen and (max-width:600px){
  
  h1{
    font-size:25px;
  }
  
  header p{
    font-size:15px;
  }
  
 
   #main{
	width:100%;
  float:none;


}

 

 #text{
   font-size:15px;
 }
 
 
#side{
	width:200px;
  float:none;
 
	
}



#side ul{
  width:200px;
	margin:0;
   position:absolute;
  top:200px;
  left:0;
  z-index:100;
  background:rgba(255,255,255,1);
  display:none;


}

  
#side li{
	margin: 0px;
}


#side li:nth-child(odd){
	width: 100%;
	height: 40px;
	line-height:40px;
	
}

#side li:nth-child(even){
	width:100%;
	height: 40px;
	line-height: 40px;
	
}

#side li a{
	display: block;
	width: 100%;
  font-size:20px;

}

.big {
display: block;
width: 100%;
height: 40px;
border-top:none;

}


.mini{
display: block;
width: 100%;
height: 40px;
border-top:none;
	
}


  /*-------------------------------------------------ハンバーガー-------------------------------------------------------------*/
p#hum {
  display:block;
  width:44px;
  height:44px;
  border:1px solid #fff;;
  border-radius:4px;
  float:left;
  margin:80px 0 0 70px;
  position:relative;
}
#bar {
  display:block;
  width:30px;
  height:2px;
  background:#fff;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.2s;
}
#bar:before {
  display:block;
  content:"";
  width:30px;
  height:2px;
  background:#fff;
  position:absolute;
  top:-18px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.3s;
}
#bar:after {
  display:block;
  content:"";
  width:30px;
  height:2px;
  background:#fff;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  margin-bottom:-9px;/*firefoxのバグ対応*/
  transition:0.3s;
}
/*クリックしたら.clickがつく*/
#bar.click {
  background:transparent;/*透明になる*/
}
#bar.click:before {
  top:0;
transform:rotate(-315deg);
}
#bar.click:after {
  margin-bottom:0;
transform:rotate(315deg);
}
  


 /*------------------------------------フッター------------------------------------------*/
  
  
footer{
	width: 100%;
  height:160px;
   margin: 0 auto;
  background:#000033;
  color:#FFFFFF;
}
footer p{
  width:100%;
  float:none;
}




/*--------------------アイコン------------------*/



footer ul{
  float:right;
  width:100%;
  background:#FFFFFF;
}


footer li{
	float: left;
}



footer li a{
	display: block;
	font-size: 45px;
	margin:20px 0 0 10px;
}

.icon{
	color:#000033;
}


.icon:hover{
	color:#00849c;
}



  
  
  #gf{
  margin-left:0;
}
  
  
  #gf iframe{
	
	height: 900px;
	
  
  
  }
  
  
  }