@charset "UTF-8";
/*
----------
header.css
2016.4.14
----------
*/

/**/
header:after,
.logo:after,
.googlesearch:after,
.globalnav:after
{
content:"";
height:0;
display:block;
clear:both;
}
header,
.googlesearch,
.logo,
.globalnav
{
_zoom:1;
}

/**/

header { width:1000px;background-color:#fff; margin:0 auto;text-align:center; }
header .inner{}


/*
logo
*/

.logo { display:block; clear:both; margin-top:32px; float:left}
	
/*
toggle
*/
.toggle{ 
 display: none;
}



/*
Language Navi
*/

.langnav {
float:right;
margin-top:8px
}

.langnav li{
margin-left:4px;
float:left;

}
.langnav li a{
padding:4px 8px;
border-radius:4px;
text-decoration:none;
}
.langnav li a:link,
.langnav li a:visited{
background-color:#777;
border:2px solid #aaa; 
color:#fff;
}
.langnav li a:hover,
.langnav li a:active,
.langnav li a.here{
background-color:#fff;
border:2px solid #eee;
color:#777;
}



/*
Google Search
*/
.googlesearch{
		float:right;
		padding:12px 0;
		clear:right
		}

/*
Utility Nav
*/

.utilitynav{float:right; clear:both; margin-bottom:8px}
.utilitynav li{
	float:left;
	font-size:13px
}
.utilitynav li a{ text-decoration:none}
.utilitynav li:after{
	content:"│";
	color:#3eb3ed;
	
}
.utilitynav li:last-child:after{
content:none;
}

.utilitynav a[href^="http"] {
background:url(../images/icon_blank2.png) no-repeat center right;
  padding-right:16px;
  margin-right:0;
}



/*
globalnav
*/
.globalnav{
  width:940px;
  padding:2px 0 0 0;
  display:block;
  clear:both;
  border-bottom:4px solid #3eb3ed;
  border-top:1px solid #f4f4f4; 
}

.globalnav li{
  float: left;
  width:12.5%;
  padding: 0;
  text-align: center;
}

  
.globalnav li a{
display: table-cell/*インライン要素で上下中央に配置するときmiddleといっしょに。*/;
vertical-align: middle;
padding:8px 0 6px;
background-color: #eee;
text-decoration: none;
line-height:1.2em;
width:12%/*ぴったりにするにはここ*/;
height:32px;
font-size:13px;
border-bottom:2px solid #ccc;
border-right:2px solid #fff
}

.globalnav li:last-child a{border-right:2px solid #eee}

/*カテゴリごとに色指定*/
.globalnav li a:hover{color:#fff;}
.globalnav li a:hover.home {background-color:#3eb3ed;}
.globalnav li a:hover.activity{background-color:#d34317;}
.globalnav li a:hover.blog{background-color:#3eb3ed;}
.globalnav li a:hover.life {background-color:#ebaa30;}
.globalnav li a:hover.volunteer { background-color:#88b92c;}
.globalnav li a:hover.event{background-color:#3eb3ed;}
.globalnav li a:hover.dantai{background-color:#3eb3ed;}
.globalnav li a:hover.exchange{background-color:#e24682;}

#home .globalnav li a.home,
#activity .globalnav li a.activity,
#blog .globalnav li a.blog,
#life .globalnav li a.life,
#volunteer .globalnav li a.volunteer
{-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;color:#fff;}

#home .globalnav li a.home {background-color:#3eb3ed;border-bottom:3px solid #3eb3ed;border:2px solid #3eb3ed}
#activity .globalnav li a.activity{background-color:#d34317;border-bottom:3px solid #d34317;border:2px solid #d34317}
#blog .globalnav li a.blog{background-color:#3eb3ed;border-bottom:3px solid #3eb3ed;border:2px solid #3eb3ed}
#life .globalnav li a.life {background-color:#ebaa30;border-bottom:3px solid #ebaa30;border:2px solid #ebaa30}
#volunteer .globalnav li a.volunteer {background-color:#88b92c;border-bottom:3px solid #88b92c;border:2px solid #88b92c}
/*
#event .globalnav li a.event{color:#fff;background-color:#3eb3ed;}
#dantai .globalnav li a.dantai{color:#fff;background-color:#3eb3ed;}
#exchange.globalnav li a.exchange{color:#fff;background-color:#e24682;}
*/









@media only screen and (max-width: 960px) {
	
header{
  width: 100%;
  /*max-width:100%;*/
}

.logo {margin-top:0px;}


.logo,
.googlesearch,
.utilitynav{padding:0}

.googlesearch{ margin:10px 0 6px}


.globalnav { width:100%; }/*幅ぴったりになる*/
.globalnav li{
    width: 25%;/*4段組*/
	margin-bottom:2px;
  }
.globalnav li a{color: #3eb3ed;
   
   padding:4px 0;
   
}
.globalnav li:last-child a{border-right:2px solid #fff}



#home .globalnav li a.home,
#activity .globalnav li a.activity,
#blog .globalnav li a.blog,
#life .globalnav li a.life,
#volunteer .globalnav li a.volunteer {-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;border-bottom:none}




   


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

.logo img{ width:100%;}
.googlesearch,
.langnav,
.utilitynav{ display:none; }



.logo{ top:2px; text-align:center}


.langnav{
	font-size:12px;
	float:none;
	 margin:8px 0 16px;
}
.langnav li a{padding:8px;
	}

	.utilitynav {margin-top:12px}

 
  .toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #3eb3ed;
	clear:both
  } .toggle a{
    display: block;
    position: relative;
    padding: 8px 0;
    border-bottom: 1px solid #3eb3ed;
    color: #fff;
    text-align: center;
    text-decoration: none;
  } .toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
 .toggle a:before,
 .toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #3eb3ed;
  } .toggle a:before{
    margin-top: -6px;
  } .toggle a:after{
    margin-top: 2px;
  }



.globalnav{
    display: none;
  }
.globalnav li{
    width: 50%;/*２段組*/
  }

}