@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: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-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: 1200px;
  overflow:hidden;
	background: rgba(254,254,254,1.00);
}

h1 img{
 width: 100%;
}

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




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


#warapper{
	overflow: hidden;
}


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


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





#side ul{
	margin-left: 40px;
}

#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-family: 'Open Sans', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Slabo 27px', serif;
	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;
	float: right;
  margin-bottom:50px;

}


h2{
	width: 100%;
	height: 80px;
	text-align: center;
	color:#000033;
}


#move iframe{
	display: block;
	width: 800px;
	padding:0 50px;
	
}


#main img{
	display: block;
	width: 800px;
	padding:0 50px;
}


#main p{
	width: 200px;
	height: 50px;
	line-height: 60px;
	margin: 10px auto;
	border-bottom: 2px solid #000033;
	font-family: 'Open Sans', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Slabo 27px', serif;
	font-size: 30px;
	
}


#blog a:hover{
	display: block;
	opacity: 0.5;
}




#TF{
	width: 800px;
	margin-left: 50px;
	overflow: hidden;
}

#twitter{
	width:385px;
	height: 500px;
	float: left;
	
}


#face{
	width: 385px;
	height: 500px;
	float:right;
	
	
}



#face h2{
	width: 385px;
	float:right;
	
	
}


#pageplugin {
margin: 0 auto;
max-width: 385px;
}

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}


.fb-page {
height: 385px;
margin: 0 auto;
}

/*------------------------------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;
}




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



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


footer li{
	float: left;
}

footer ul{
	float: right;
}

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

.icon{
	color:#fff;
}


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



/*--------------------1200以下-----------------*/

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

header{
	width: 100%;
	
}

h1 img{
	display: block;
	max-width: 100%;
}

#container{
	width: 100%;
}




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


#side{
	width: 25%;
	
}


#side ul{
	margin-left: 13.33%;
}



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

#main{
	width:75%;

}


#main img{
	width: 88.88%;
	padding:0 5.55%;
	max-width: 100%;
}

#move iframe{
	width: 88.88%;
	padding:0 5.55%;
	max-width: 100%;
	
}


#TF{
	width: 88.88%;
	margin-left: 5.55%;
}

#twitter{
	width:48.125%;
	
}

#face{
	width:48.125%;
}




#face h2{
	width:100%;
	
}


.fb-page{
	width:100%;
}


#pageplugin {
width: 100%;
}



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



footer p{
  width:50%;

}


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



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

}


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


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

}


  }

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

@media screen and (max-width:600px){
  
	
	
 
   #main{
	width:100%;
  float:none;


}

	
 
#side{
	width:200px;
  float:none;
	
	
	
}



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

}

  
#side li{
	margin: 0px;
}

	#side li:first-child{
	border-top: 1px #000 solid;
	
}
	

#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 #000033;
  border-radius:4px;
	float: left;
	margin:10px;
  position:relative;
}
#bar {
  display:block;
  width:30px;
  height:2px;
  background:#000033;
  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:#000033;
  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:#000033;
  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;
}


	
	
	/*--------------------メイン------------------*/
	
#TF{
	width:100%;
	margin-left:0;
  padding:0 10px;
  box-sizing:border-box;
}


#twitter{
  width:90%;
	float:none;
  margin:0 auto 80px;


	
}


.twitter-timeline{
  display:block;

}


#face{
	width:90%;
	float:none;
  margin:0 auto;
 
}

#face h2{
	
	float:none;
	
	
}


	
	
.fb-page{
  width:100%;
	float:none;
 
	
}

	
	
	#pageplugin {
margin: 0 auto;
width: 100%;
}

}