@charset "UTF-8";
    
/* header */
#top-head {
    background-color: #193d04;
    height: 80px;
	font-size: 14px;
	top: -100px;
	position: absolute;
	width: 100%;
	margin: 100px auto 0;
	z-index: 999;
    display: flex;
    align-items: center;}
    
#top-head a,
#top-head {
	color: #fff;
	text-decoration: none;}
    
#top-head .inner {position: relative;}

#top-head .logo a img{
    margin:0.2em 0 0 1em;
    width: 90%;}

.inner {width: 90%;
    display: flex;
    align-items: center;}

#global-nav ul {
	list-style: none;
	font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 8em;}
    
#global-nav ul li {position: relative;}
    
#global-nav ul li a {padding: 0 20px;}

/* Btn Hover */
#global-nav ul li:after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	bottom: -20px;
	transition: all 0.3s ease;}
    
#global-nav ul li:hover:after {
	background: #fff;
	bottom: -7px;}

.sns a i{font-size: 2.2em;
    color: #fff;
    margin:0 1em 0 0.5em;
    transition: 0.5s ease;}

.sns a i:hover{color: #b1533f;}

.info{width: 10%;}

.info a{font-size: 1.2em; 
    padding: 30px 0px 20px;
    background-color: #c58f24;
    height: 80px;
    display: block;
    color: #fff;
    text-align: center;
    transition: 0.5s ease;
    text-decoration: none;}

.info a:hover{background-color: #b1533f;}

.infosp{display: none;}

/* Fixed */
#top-head.fixed {
	margin-top: 0;
	top: 0;
	position: fixed;
	padding-top: 0px;
	/*height: 90px;*/
	background: #fff;
	background-color: #193d04;
	transition: top 0.65s ease-in;}

#top-head.fixed #global-nav ul li a {
	color: #fff;
	padding: 0 20px;}

/* Fixed Btn Hover */
#top-head.fixed #global-nav ul li:after {
	bottom: -10px;}
    
#top-head.fixed #global-nav ul li:hover:after {
    background: #fff;
	bottom: -7px;}

/* Toggle Button */
#nav-toggle {
	display: none;
	position: absolute;
	right: 12px;
	top: 10px;
	width: 34px;
	height: 36px;
	cursor: pointer;
	z-index: 101;}

#nav-toggle div {
	position: relative;}
    
#nav-toggle span {
	display: block;
	position: absolute;
	height: 1px;
	width: 100%;
	background: #fff;
	left: 0;
	transition: .35s ease-in-out;}
    
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 11px;}
#nav-toggle span:nth-child(3) {top: 22px;}



@media screen and (min-width:481px) and ( max-width:960px) {
#top-head .logo a img{
    margin:0 0 0 0em;
    width: 120%;}
    
#global-nav ul {
	list-style: none;
	font-size: 0.6em;
    /*display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 2em;*/}
    
#global-nav ul li {position: relative;}
    
#global-nav ul li a {padding: 0 0px;}

/* Btn Hover */
#global-nav ul li:after {
	position: absolute;
	content: "";
	display: none;
	width: 100%;
	height: 1px;
	bottom: -20px;
	transition: all 0.3s ease;}


.sns a i{margin:0 0em 0 0;}

article {padding: 0 30px;}
.inner {
    width: 100%;
    padding: 0 20px;}
        
#global-nav ul li a {padding: 0 15px;}
#top-head.fixed #global-nav ul li a {padding: 0 15px;}

.info{width: 10%;
    }

.info a{font-size: 1.6em; 
    padding: 10px 0px;
    line-height: 1.2;}

.infosp{display: none;}


}

@media screen and (max-width: 480px) {
#top-head,.inner {
    width: 100%;
    padding: 0;}

#top-head {
    position: fixed;
    top: 0;
    margin-top: 0px;
    height: 60px;}

#top-head .logo{position: absolute;
    top:10px;
    left: 0px;
    z-index: 1000;}

/*#top-head .logo a img{
    margin:0.2em 0 0 1em;
    width: 90%;}*/



/* Fixed reset */
#top-head.fixed {
    padding-top: 0px;
    background: #193d04;}

#mobile-head {
    background: #193d04;
    width: 100%;
    height: 60px;
    z-index: 999;
    position: relative;}
    
#top-head.fixed .logo,#top-head .logo {
    position: absolute;
    top: 5px;
    left: 0px;
    color: #333;
    width:70%;}

#global-nav {
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top: -500px;
    background: #333;
    width: 100%;
    text-align: center;
    padding: 10px 0 10px;
    transition: .5s ease-in-out;}

#global-nav ul {
    list-style: none;
    font-size: 11px;
    flex-wrap: wrap;
    flex-direction: column;
    margin-left: 0;}
    
#global-nav ul li {
    float: none;
    position: static;}
    
#global-nav ul li:after  {
    display: none;}
    
#top-head #global-nav ul li a,#top-head.fixed #global-nav ul li a {
    width: 100%;
    display: block;
    color: #fff;
    padding: 10px 0;}
    
#nav-toggle {display: block;
    margin-top: 10px;}
	/* #nav-toggle 切り替えアニメーション */

.open #nav-toggle span:nth-child(1) {
    top: 11px;
    transform: rotate(315deg);}
    
.open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;}
    
.open #nav-toggle span:nth-child(3) {
    top: 11px;
    transform: rotate(-315deg);}
    
/* #global-nav スライドアニメーション */
.open #global-nav {

/* #global-nav top + #mobile-head height */
    transform: translateY(556px);}

.sns{display: none;}
.info{display: none;}

.infosp{width: 100%;
    display: block;}
    
.infosp a{margin-top: 60px;
    background: #c58f24;
    padding: 15px 0;
    text-align: center;
    font-size: 1.5em;
    color: #fff;
    display: block;
    text-decoration: none;}

}