charset "utf-8";

.sp_header {
background: #FFF;
position: relative;
width: 100%;
height: 48px;
}
.sp_header h1{
display: inline-block;
}
.sp_header h1 {
position: absolute;
z-index: 100;
text-align: left;
width: 100%;
height: 48px;
top:0px;
}
.sp_header h1 a {
transform: translate(-10px,5px);
display: inline-block;
}
.sp_header h1 img {
display: inline-block;
vertical-align: bottom;
height: 36px;
}
.sp_header .history_like{
position: absolute;
top: 6px;
right: 60px;
z-index: 800;
}
.sp_header .history_like a{
margin: 0 5px;
}
/*shinyokohama*/
.shinyokohama .sp_header h1 {
background-color: #4AB034;
}

/* hamburger menu */
.hmenu-wrapper{
position:fixed;
top:0;
right:0;
z-index: 999;
background-color:#469e33;
}
.hmenu{
width: 48px;
height:48px;
position:relative;
cursor:pointer;
display: inline-block;
float:right;
z-index: 999;
}
.hmenu1{
width:28px;
height:3px;
position:absolute;
top:10px;
left:10px;
}
.hmenu2{
width:28px;
height:3px;
position:absolute;
top:17px;
left:10px;
}
.hmenu3{
width:28px;
height:3px;
position:absolute;
top:24px;
left:10px;
}
.hmenu4{
width: 28px;
height: 10px;
position:absolute;
top:26px;
left:7px;
color: #FFF;
font-size: 80%;
}
.hmenu1,.hmenu2,.hmenu3{
transition: all 0.3s ease-out;
display: inline-block;
background-color: #FFF;
}
.hmenuclick1{
top:16px;
transform: rotate(30deg);
}
.hmenuclick2{
opacity:0;
}
.hmenuclick3{
top:16px;
transform: rotate(-30deg);
}
.hmenu-back{
display: none;
position: fixed;
background-color: #FFF;
opacity: 1;
z-index: 997;
width: 100%;
height: 100%;
top:0;
left:0;
}









.hmenu-nav {
display: none;
position: fixed;
top:0;
bottom: 0;
z-index: 998;
width: 100%;
padding: 1.5rem;
box-sizing: border-box;
background-color: #469e33;
overflow-y: auto;
}
.hmenu-nav nav > h1 {
text-align: center;
padding-bottom: 5px;
}
.hmenu-nav section {
border-top: #91bf87 2px solid;
padding: 10px 0 5px;
margin-top: 10px;
}
.hmenu-nav section.no_header {
padding-top: 20px;
}
.hmenu-nav section h2{
text-align: center;
color: #fff;
font-size:129%;
padding-bottom: 10px;
}
.hmenu-nav section a,
.hmenu-nav section span{
text-align: center;
color: #fff;
display: inline-block;
background-color: #6bb15b;
padding: 10px;
border-radius: 6px;
width: 100%;
box-sizing: border-box;
margin-bottom:5px; 
font-size: 88%;
font-weight: 600;
}
.hmenu-nav section a[target="_blank"]{
padding-right: 20px;
background:#6bb15b url(/images/common/icon_window_other_white.svgz) no-repeat right 7px center;
}
.hmenu-nav section a.login{
color: #469e33;
background-color: #fff;
}
.hmenu-nav section h2 a,
.hmenu-nav section h2 span{
background: none;
margin-bottom:0;
padding: 0;
}
.hmenu-nav section .flex{
justify-content: space-between;
}
.hmenu-nav section .flex.three a{
width: 32%;
}
.hmenu-nav section .flex a{
width: 49%;
}
.hmenu-nav form.search{
border: none;
margin-top: 10px;
}
.hmenu-nav form.search input[type="submit"]{
background-color:#2c8019;
}
form.search input[type="submit"]:hover{
background-color:#216113;
}
.display_none{
display: none;
}







/* facebook like box */
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fb_iframe_widget span{
width: 100% !important;
}






/* Social Button */
.social-button {
padding:14px 0 5px;
}
.social-button ul {
width: 90%;
margin: 0 auto;
text-align: right;
overflow: hidden;
}
.social-button ul li {
display: block;
margin-left: 12px;
float: right;
}
.social-button ul li.fb {
position: relative;
top:-7px;
left:6px;
width: 75px;
}


/* footer-top-btn */
.footer {
position: relative;
}
.footer-top-btn {
position: fixed;
bottom:0;
right:0;
display: inline-block;
background: #469e33;
text-align: center;
width: 40px;
height: 40px;
z-index: 500;
opacity:1;
}
.footer-top-btn.hide {
opacity:0;
}
.footer-top-btn span {
display: none;
}
.footer-top-btn:before {
position: absolute;
top:60%;
left:50%;
display:block;
content: "";
width: 10px;
height: 10px;
border-top:2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: translate(-50%, -55%) rotate(-45deg);
transform:translate(-50%,-55%) rotate(-45deg);
}




@media screen and (min-width:768px) {

/* hamburger menu */
.sp_header,
.hmenu-wrapper{
display: none;
}


/* Social Button */
.social-button ul {
width: 100%;
}
.social-button ul li {
margin-left: 15px;
}



}

@media screen and (min-width:1080px) {


/* Social Button */
.social-button ul {
padding: 10px;
max-width: 1040px;
}




}