@charset "utf-8";

.sp_header {
position: relative;
background:rgba(255,255,255,0.7);
width: 100%;
z-index: 20;
}
.sp_header:before {
position: absolute;
top:0;
left:0;
content: "";
display: block;
width: 100%;
height: 3px;
background: url(../images/header_top-bar.svg) no-repeat top center;
background-size: cover;
}

.sp_header .logo {
width: 245px;
padding: 15px 10px;
}
.sp_header .logo a {
display: block;
}


@media screen and (max-width:320px) {
/*.sp_header {
width: calc(100% - 80px);
}*/
}






/* hamburger menu */
.hmenu-wrapper{
position:fixed;
top:20px;
right:10px;
z-index: 999;
}
.hmenu{
width: 30px;
height:30px;
position:relative;
cursor:pointer;
display: inline-block;
float:right;
z-index: 999;
}
.hmenu1{top:0;}
.hmenu2{top:13px;}
.hmenu3{top:26px;}
.hmenu1,.hmenu2,.hmenu3{
position:absolute;
left:0;
height:3px;
width: 30px;
transition: all 0.3s ease-out;
display: inline-block;
background-color: #E84416;
}

.hmenuclick1{
top:13px;
transform: rotate(45deg);
background-color: #FFF;
}
.hmenuclick2{
opacity:0;
}
.hmenuclick3{
top:13px;
transform: rotate(-45deg);
background-color: #FFF;
}

.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;
width: 100%;
height: 100%;
padding: 1rem 0;
box-sizing: border-box;
background-color: #ED7600;
z-index: 998;
}
.hmenu-nav > nav {
padding: 60px 0 0;
width: 100%;
height: 100%;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.hmenu-nav li a {
display: block;
padding:1.5rem 0;
color: #FFF;
text-align: center;
font-size: 16px;
font-weight: 500;
}
.hmenu-nav li.current a:after {
content: "";
display: block;
width: 60px;
height: 1px;
margin: 10px auto 0;
background:#FFF;
}
.hmenu-nav .sp_menu {
margin-top: 50px;
}
.hmenu-nav .sp_menu li {
background:#FFF;
border:1px solid #009DB5;
border-top: none;
}
.hmenu-nav .sp_menu li a {
color: #009DB5;
font-size: 16px;
background-position: right 20px center;
background-repeat: no-repeat;
}






/* Social Button */
/*.social-button {
width: 100%;
justify-content: center;
}
.social-button ul {
display: flex;
justify-content: center;
margin-top: 20px;
}
.social-button ul li {
display: block;
padding: 0 5px;
}
.social-button ul li.fb {
position: relative;
top:-6px;
}*/


/* footer-top-btn */
.footer {
position: relative;
}
.footer-top-btn {
position: fixed;
bottom:30px;
right:10px;
display: inline-block;
text-align: center;
width: 28px;
height: 28px;
z-index: 500;
}
.footer-top-btn span {
display: none;
}
.footer-top-btn:before {
position: absolute;
top:55%;
left:50%;
display:block;
content: "";
width: 15px;
height: 15px;
border-top:4px solid #ED8000;
border-right: 4px solid #ED8000;
-webkit-transform: translate(-50%, -55%) rotate(-45deg);
transform:translate(-50%,-55%) rotate(-45deg);
}






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


.footer-top-btn {
bottom:20px;
}
.footer-top-btn:before {
width: 17px;
height: 17px;
}

/* hamburger menu */
.sp_header,
.hmenu-wrapper{
display: none;
}
.footer-top-btn {
right:37px;
}

/* Social Button */
.social-button ul {
margin-top: 2px;
}
}

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