@charset "utf-8";

/* header ------------------------------------------------------------*/

#header {
    position:fixed;
    top: 0px; left: 0; right: 0;
    height:250px;
	background:url(../img/header_back.png) repeat-x; 
    z-index:50;
	}
.inner {
 	position:relative;
    max-width:1280px;
    margin-left: auto;
	margin-right: auto;
    padding: 0;
    }
.inner_s {
 	position:relative;
    max-width:1080px;
    margin-left: auto;
	margin-right: auto;
    padding: 0;
    }
.header_box {
    display: flex;
	justify-content: space-between; 
	}
header h1 {
    margin-bottom:1%;
	font-family:sans-serif;
    font-size: 0.8em;
    text-align:right;
	line-height:1.5;
    color:#393939;
	}
header h1 span {
	color:#0000ff;
	}
.header-logo {	
    margin-top: -50px;
    max-width: 480px;
    width:100%;
    display:block;
    }
.header-contact {
    margin-top: 0;
    max-width: 500px;
    width:100%;
    display:block;
    }

/* navigation ------------------------------------------------------------*/
nav {
    position:absolute;
    top:162px; left: 0;
    width:100%; height:60px;
	}
#menu ul {
  	display: flex;
  	justify-content: space-between;
  	flex-wrap: wrap;
    border-top: double 3px #fff;
    border-bottom: double 3px #fff;
	}
#menu li {
  	width: 20%;
	}
#menu li a {
  	display: flex;
  	flex-direction: column;
  	padding: 8px 0;
  	font-family: 'Questrial', sans-serif;
    font-size:18px;
    color:#ffffff;
  	text-align: center;
	}
#menu ul li a:hover {
	color: #ffffff;
	text-shadow: 0 0 10px #fff,0 0 20px #fff;
	}
#menu li a span {
	font-family:sans-serif;
  	font-size: 10px;
	letter-spacing: 0.2em;
	}
#menu ul li .now {
	color: #ffff00;
	text-shadow: 0 0 10px #fff,0 0 20px #fff;
	}

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

footer {    
	clear:both;
    margin-top:3em;
    padding: 10px 0;
	background:url(../img/header_back.png) repeat-x; 
	}
footer p.profile {
	margin-top: 1em;
	text-align:left;
	font-family:sans-serif;
	font-size: 0.9em; 
    color: #ffffff;
	font-style: normal;
	line-height: 1.3;
	}
footer p.profile span {
	font-size: 1.1em;
    font-weight:bold;  
	}
footer .pc { display:block; }
footer .sm { display:none; }
footer .contact_f {
	width:100%;
	margin-top: -50px;
    text-align:right;
    font-family:sans-serif;
	font-size: 1em; 
    color:green;
	}
/* copyright ------------------------------------------------------------*/
#copyright {
	clear:both;
	padding-top: 4px;
    font-family:sans-serif;
    font-size: 0.8em;
    text-align: center;
    color: #826445;
	}

aside {
    margin-top:200px;
	}

#main_top {
    margin-top:240px;
	}

/* for SMARTPHONE ------------------------------------------------------------*/

@media (max-width: 768px) {

#header {
    position:fixed;
    top: 0px; left: 0; right: 0;
    height:200px;
	background:url(../img/header_back.png) repeat-x; 
    z-index:50;
	}
header h1 {
	font-size:0.7em;
    text-align:center;
	line-height:1.2;
    color:#393939;
	}
header h1 span, .today { display:none; }
.header_box {
    display: flex;
	flex-flow: column;
	align-items: center; 
	}
.header-logo {	
    margin-top: -20px;
    width:280px;
    display:block;
    }
.header-contact {
    margin-top: -0.5em;
    max-width:300px;
	width:100%;
    display:block;
    }
nav {
    position:absolute;
    top:156px; left: 0;
    width:100%; height:60px;
	}
#menu ul {
  	display: flex;
  	justify-content: space-between;
  	flex-wrap: wrap;
    border-top: double 3px #fff;
    border-bottom: double 3px #fff;
	}
#menu li {
  	width: 24%;
	}
#menu .menu-pc {
    display:none;
	}
#menu li a {
  	display: flex;
  	flex-direction: column;
  	padding: 4px 0;
  	font-family: 'Questrial', sans-serif;
    font-size:0.8em;
    color:#ffffff;
  	text-align: center;
	}
#menu ul li a:hover {
	color: #ffffff;
	text-shadow: 0 0 10px #fff,0 0 20px #fff;
	}
#menu li a span {
	display:none;
	}
#menu ul li .now {
	color: #ffff00;
	text-shadow: 0 0 10px #fff,0 0 20px #fff;
	}

#main_top {
    margin-top:200px;
	}
/* footer ------------------------------------------------------------*/

footer p.profile {
	text-align:left;
	font-size: 0.8em; 
	line-height: 1.4;
	}
footer p.profile span {
	font-size: 1em;
    font-weight:bold; 
	}
footer .pc { display:none; }
footer .sm { display:block; }
footer .contact_f span {
	display:none;
	}
footer .contact_f {
	margin-top: -24px;
    text-align:center;
	}
#copyright {
    font-size: 0.5em;
	}
}