@charset "utf-8";

/***********************************************************************************/
body{ 
    animation: fadeIn 0.8s ease 0s 1 normal;
    -webkit-animation: fadeIn 0.8s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
/***********************************************************************************/


header,nav ul,#top h2,main > ul,aside section,footer section{max-width:1100px; margin:auto;}

header{padding:1em;}
header h1 {display:none;} 
header a img{width:180px;} 
header div{display:none;}
header div p:first-of-type a{color:#111;}
header div p:first-of-type a:before{content:"TEL";display:inline-block;margin-right:0.2em;background:#222;color:#fff;padding:0.2em 0.3em;font-size:0.7em;vertical-align:middle;}
header div p:last-child a{display:inline-block;padding:0.5em; background:#075e9c;color:#fff;transition:background 0.3s;}
header div p:last-child a:hover{background:#3780b4;}



nav{display:none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 90;
    width: 100%;
	height:100vh;
	background:#fff;
}
nav:before{	content:"";display:block;width:100%;height:calc(50px + 3em);background:url(../img/logo1.png) no-repeat center  #fff;border-bottom:solid 1px #ccc;background-size:150px;}
nav ul{
    width: 100%;
	height:calc(100vh - (50px + 3em));

	background:#f4f4f4;
}
nav li{box-sizing:border-box;height:20%;border-bottom:solid 1px #ddd;}
nav li a{display:flex;align-items:center;justify-content:center;position:relative;height:100%;/*padding:1.6em 0;*/color:#111;text-align:center;font-size:1.1em;color:#222;transition:background-color 0.3s,color 0.3s;}
nav li a:hover{background-color:#075e9c;color:#fff;}
/*
nav li a:after{display:block;text-align:center;font-size:0.6em;}
nav li:nth-child(1) a:after{content:"HOME";}
nav li:nth-child(2) a:after{content:"ABOUT";}
nav li:nth-child(3) a:after{content:"FLOW";}
nav li:nth-child(4) a:after{content:"ASSOCIATION";}
*/

.trigger,.trigger span{display: inline-block;    transition: all .3s;    box-sizing: border-box;}
.trigger {
  position: fixed;
  top:1em;
  right:1em;
  width: 60px;
  height: 60px;
 border: 1px solid #222;
 border-radius:2px;
  background:#222;
  cursor: pointer;
  text-align:center;
z-index: 100;
}

.trigger span {
position: absolute;
    width: 70%;
	left:15%;
    height: 2px;
    background-color:#fff ;
	color:#fff;
	font-size:0.7em;
}
.trigger span:nth-of-type(1) {    top: 25%;}
.trigger span:nth-of-type(2) {    top: calc(50% - 0.7em);height:0.7em;background:none;}
.trigger span:nth-of-type(3) {    bottom: calc(25% - 1px);}
.active span:nth-of-type(1) {
    -webkit-transform: translateY(14px) rotate(-45deg);
    transform: translateY(14px) rotate(-45deg);
}
.active span:nth-of-type(2) {    opacity: 0;}
.active span:nth-of-type(3) {
    -webkit-transform: translateY(14px) rotate(45deg);
    transform: translateY(-14px) rotate(45deg);
}


#top{margin-bottom:2em;background:url(../img/h2_bg.jpg) no-repeat center #06c;color:#fff;background-size:cover;}
#index #top{margin-bottom:0;}
#top h2{padding:1em;font-size:6vmin;}

main > ul{display:flex;padding:1.4em 1.6em;}
main > ul li a{text-decoration:underline;}
main > ul li a:hover{text-decoration:none;}
main > ul li:after{content:">";padding:0 1em;}
main > ul li:last-child:after{content:none;}

aside{padding:10% 0;margin-bottom:10%;text-align:center;border-top:solid 1px #ccc;}
aside h2{font-size:6vmin;margin-bottom:1em;}
aside p:nth-of-type(1) {margin-bottom:1em;padding-bottom:1em;}
aside p:nth-of-type(1) a{color:#222;font-size:7vmin;font-weight:bold;}
aside p:nth-of-type(1) a span{font-size:0.5em;}
aside p:nth-of-type(2) a{display:inline-block;padding:1em 2em;background:#075e9c;color:#fff;font-size:4vmin;transition:background 0.3s;}
aside p:nth-of-type(2) a:hover{background:#3780b4;}

footer{position:relative;padding:3em 0;background:#eee;}
footer section{overflow:hidden;margin-bottom:2em;padding:0 2em;text-align:center;}
footer h2{margin-bottom:1em;}
footer h2 img{width:200px;}
footer div{overflow:hidden;margin-bottom:2em;}
footer div p,footer div li{font-size:0.8em;margin-bottom:0.5em;}
footer div * span{white-space:nowrap;}
footer div ul li{padding:0.5em;border:solid 1px #333;}
footer div ul li:first-child{margin-bottom:0.2em;}
footer li a{display:block;padding:1em 0;text-align:center;color:#222;background:rgba(0,0,0,0);transition:background 0.3s;}
footer li a:hover{background:rgba(0,0,0,0.1);}
footer section > ul li:last-child{position:absolute;top:0;left:50%;transform:translate(-50%,-100%);}
footer section > ul li:last-child a{padding:1em;background:#eee;border-radius:10px 10px 0 0 ;font-size:0.8em;}
footer small{display:block;text-align:center;}



header div p:last-child,aside p:nth-of-type(2),footer section > ul li:nth-child(4){display:none;}






@media screen and (min-width: 481px),print {
header a img{width:220px;} 
}






@media screen and (min-width: 769px),print {
header{display:flex;justify-content:space-between;padding:1em 2em 2em;}
header h1{display:block;margin-bottom:1em;font-size:0.8em;font-weight:normal;color:#666;text-align:left;font-family:sans-serif;}
header div{display:block;}
header div p:first-of-type {float:left;padding-right:1em;}
header div p:first-of-type a{font-size:1.4em;color:#111;font-weight:bold;}
header div p:last-child a{display:inline-block;padding:1em 2.4em; background:#075e9c;color:#fff;transition:background 0.3s;}

.trigger{display:none;}
nav,nav ul{position:static;flex-direction:row;width:auto;height:auto;}
nav{display:block;background:#def;}
nav:before{content:none;}
nav ul{display:flex;flex-wrap:wrap;background:none;}
nav li{box-sizing:border-box;flex:1;height:auto;border-bottom:none;}
nav li a{display:block;padding:1.6em 0;height:auto;font-weight:bold;}
nav a span{display:block;border-right:solid 1px #ccc;}
nav li:first-child a span{border-left:solid 1px #ccc;}

#top h2{padding:1em;font-size:4vmin;}

aside{padding:6% 0;margin-bottom:5%;text-align:center;border-top:solid 1px #ccc;}
aside h2{font-size:4vmin;margin-bottom:1em;}
aside p:nth-of-type(1) {margin-bottom:2em;padding-bottom:2em;}

footer section{text-align:left;}
footer section div{display:flex;justify-content:space-between;}
footer h2{margin-bottom:0;padding-right:1em;border-right:dotted 1px #222;}
footer h2 img{width:200px;}
footer div p,footer div li{font-size:1em;}
footer div p{margin-bottom:0;}
footer div p:nth-of-type(1){padding:0 1em;margin-right:auto;}
footer section > ul{display:flex;border-top:solid 1px #999;border-bottom:solid 1px #999;}
footer section > ul li{flex:1;}

}