@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: rgba(255,255,255,1.00);
}




header{
	width: 100%;
	height: 200px;
	background:url(../img/hed.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:20px;
	float: right;
}



h2{
	margin-top: 20px;
	font-size: 35px;
	color:#000033;
	
}

h2 p{
	width: 200px;
	height: 45px;
	margin: 5px auto;
	border-bottom: 2px solid #000033;
}



.box{
  width:570px;
	background:#DEF9FF;
    overflow:hidden;
	margin: 35px auto;
	border: 1px solid #00849c;
    }

.imag{
  float:left;
    width:265px;
  margin:10px;

}


.box p img{
  display:block;
 
}



.text{
	color:#00849c;
  width:265px;
  float:right;
  margin:10px;
  
}


h3{
	font-size: 26px;
	color: #000033;
	margin-bottom: 15px;
	font-family: 'Open Sans', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Slabo 27px', serif;
}

h3 span{
	display: block;
	font-size: 18px;
}

ol li{
	line-height: 1.5;
	font-family: 'Open Sans', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Slabo 27px', serif;
}

ol{
	margin-bottom: 10px;
	
}

.text p{
	line-height: 1.5;
	
}



.box2{
	width: 570px;
	height: 100px;
	background:#DEF9FF;
	margin: 35px auto;
	border: 1px solid #00849c;
	
}


.box2 a{
	display: block;
	width: 250px;
	text-align:left;
	font-size: 18px;
	background: url(../img/listmark.png) no-repeat;
	background-position: left;
	font-family: 'Open Sans', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Slabo 27px', serif;
	color:#000033;
	line-height: 50px;
	margin: 0 auto;
	padding-left: 20px;
}

.box2 a:hover{
	text-decoration: underline;
}


/*------------------------------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{
  float:left;
  width:200px;
  margin-left:20px;
}


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%;

}


.box{
  width:63.33%;
    }

.imag{
  float:left;
    width:46.49%;
  margin:1.75%;

}


.box p img{
  max-width:100%;
 
}



.text{

  width:46.49%;
  margin:1.75%;
  
}


ol li{
	line-height: 1.2;

}



.box2{
  width:63.33%;
	height: 100px;

}

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



footer p{
  width:50%;

}


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



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

}



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


#side ul{
  width:100%;
	margin:88px 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;

}




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


h3{
	font-size: 20px;
	margin-bottom: 5px;
}

h3 span{
	display: block;
	font-size: 15px;
}

ol li{
	line-height: 1.2;

}

ol{
	margin-bottom: 10px;
	
}

.text p{
	line-height: 1.2;
	
}




  }




@media screen and (max-width:767px){
  
  h1{
    font-size:25px;
  }
  
  header p{
    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;
}



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

#main{
  width:100%;
}

.imag{
  float:none;
  margin:10px auto;


}

.box p img{
  display:block;
  margin:0 auto;
 
}




.text{
  width:100%;
  float:none;
  text-align:center;
}




  }