@charset "utf-8";
#HeadDetails{position:fixed; display:flex; width:100%; min-height:100px; background-color:#5F5E5D; border-bottom:1px solid #CCCCCC; z-index:1000; box-shadow:0 4px 4px 0 rgba(0, 0, 0, .3);}
#HeadDetails:after{display:block; content:""; clear:both;}

#spHeader{display:none;}

/****ヘッダー******************/
div#HeaderFrame{margin:0 auto; width:100%;}
div#Header{margin:0 auto; background-color:#5F5E5D; min-width:inherit; width:1200px;}
div#HeaderL{float:left; width:420px; padding:20px 0;}
div#HeaderR{float:right; text-align:right;}
div#HeaderR p{margin:0; padding:0;}
div#HeaderR ul{ text-align:right; list-style:none; margin:0; padding:0 0 0 0; font-size:0.9em;}
div#HeaderR li{display:inline-block; vertical-align:middle; zoom:1;}
div#HeaderR li a{transition-duration: 0.3s;}
div#HeaderR li a:hover{opacity: 0.7; }

#HeadMenu{padding:0; background-color:#FFFFFF; border-top:1px solid #CCCCCC; width: 100%; clear:both;	margin: 0 auto;}
#HeadMenu ul{display:flex; justify-content: space-around; width:1200px; margin:0 auto; list-style:none;}
#HeadMenu ul li{border-right:1px solid #999999; border-left:1px solid #999999; width:100%; text-align:center;}
#HeadMenu ul li + li{border-left:none; border-right:1px solid #999999;}
#HeadMenu ul a{color:#333333; width:100%; text-decoration:none; padding:8px 0; display:block;}
#HeadMenu ul a:hover{background-color:#CCCCCC;}


@media screen and (max-width:1218px) {
div#Header{width:100%;}
div#HeaderL{float:left; width:340px; padding:20px 0.6%;}
div#HeaderR{float:right; text-align:right; padding-right:0.6%;}
div#HeaderR{width:calc(100%-340px);}

#HeadMenu ul{width:100%;}
}

@media screen and (max-width:1090px) {
div#HeaderL img{max-width:100%;}
}
@media screen and (max-width:1000px) {
div#HeaderR p{width:100%;}
div#HeaderR p img{ width:500px;}
}



@media screen and (max-width:900px) {
div#HeaderFrame, div#Header, #HeadMenu{display:none;}

#HeadDetails{position:fixed; display:flex; width:100%; min-height:100px; border-bottom:1px solid #CCCCCC; z-index:1000; box-shadow:0 -4px 4px rgba(0, 0, 0, .3); position:fixed; left:0; bottom:0;}

/***ヘッダー*******/
/**************************/
#spHeader{display:block; width:100%; box-sizing:border-box; padding:0; margin:0;}
#spHeader .bar{ width:100%; display:flex; border-top:1px solid #CCCCCC;}
#spHeader .bar img{width:100%;}
#spHeader p{margin:0; padding:0; line-height:0;}
#spHeader p img{max-width:100%;}


#spHeadMenu{display:block;}

#spHeadMenu ul{margin:0 auto; padding:0; text-align:center; list-style:none;}
#spHeadMenu li{ float:left; width:calc(100%/5); text-align:center; margin:0; padding:0;}
#spHeadMenu img{max-width:96%;}
#spHeadMenu ul:after{content:""; display:block; clear:both;}
#spHeadMenu button{border: none; background: transparent; outline: none; cursor: pointer;}

}