@charset "utf-8";

.sp_header {
background: #FFF;
position: relative;
width: 100%;
height: 50px;
}
.sp_header h1{
display: inline-block;
}
.sp_header h1 {
position: absolute;
z-index: 100;
top:12px;
left:10px;
text-align: left;
width: 95%;
}
.sp_header h1 img {
display: inline-block;
vertical-align: middle;
}
.sp_header h1 a strong {
display: inline-block;
vertical-align: middle;
margin-left: 1rem;
font-size: 1.3rem;
font-weight: 700;
color: #254769;
}




/* hamburger menu */
.hmenu-wrapper{
/*position:fixed;*/
position: absolute;
top:5px;
right:2px;
z-index: 998;
}
.hmenu{
width: 40px;
height:40px;
position:relative;
cursor:pointer;
display: inline-block;
float:right;
z-index: 999;
}
.hmenu1{
width:26px;
height:2px;
position:absolute;
top:10px;
left:6px;
}
.hmenu2{
width:26px;
height:2px;
position:absolute;
top:17px;
left:6px;
}
.hmenu3{
width:26px;
height:2px;
position:absolute;
top:24px;
left:6px;
}
.hmenu4{
display: none;
width: 26px;
height: 10px;
background: url(../images/hmenu_menu.svg) no-repeat 50% 50%;
background-size: 26px;
position:absolute;
top:30px;
left:6px;
text-indent: -9999px;
}
.hmenu1,.hmenu2,.hmenu3{
transition: all 0.3s ease-out;
display: inline-block;
background-color: #0099e6;
}
.hmenuclick1{
top:16px;
transform: rotate(45deg);
}
.hmenuclick2{
opacity:0;
}
.hmenuclick3{
top:16px;
transform: rotate(-45deg);
}
.hmenu-back{
display: none;
position: fixed;
background-color: #FFF;
opacity: 1;
z-index: 997;
width: 100%;
height: 100%;
top:0;
left:0;
}


.hmenu-nav > .hmenu-wrapper {
position: static;
}


.hmenu-nav{
display: none;
/*position:fixed;*/
position: absolute;
top:36px;
z-index: 998;
width: 100%;
padding: 0;
background: #FFF;
}
.hmenu-nav h1 a {
padding: 0;
margin: 0;
}
.hmenu-nav > ul > li {

}
.hmenu-nav > ul > li > a {
display: block;
padding: 1rem;
color: #254769;
text-align: center;
font-size:1.4rem;
border-top:1px solid #e5f5fc;
}
.home .hmenu-nav > ul > li.home > a,
.products .hmenu-nav > ul > li.products > a,
.business .hmenu-nav > ul > li.business > a,
.company .hmenu-nav > ul > li.company > a,
.purchace .hmenu-nav > ul > li.purchace > a,
.recruit .hmenu-nav > ul > li.recruit > a,
.information .hmenu-nav > ul > li.information > a {
background:#e5f5fc;
}

.hmenu-nav ul.sub_menu {
margin: 1rem 0;
display: none;
}
.hmenu-nav ul.sub_menu li {
margin-bottom: 1px;
padding: 0 1.5rem;
text-align: center;
}
.hmenu-nav ul.sub_menu li a {
display: block;
padding: .6rem;
color: #254769;
font-size:1.3rem;
background: #f7f7f7;
text-align: center;
}
.hmenu-nav li.menu_open > span {
position: relative;
display: block;
padding: 1rem;
color: #254769;
text-align: center;
font-size:1.4rem;
border-top:1px solid #e5f5fc;
cursor: pointer;
}
.hmenu-nav li.menu_open > span:after{
position: absolute;
top:50%;
right:20px;
content: "";
display: block;
width: 9px;
height: 9px;
border-bottom: 1px solid #0099e6;
border-right: 1px solid #0099e6;
transform: rotate(45deg);
}
.hmenu-nav li.menu_open span.current:after{
border-top: 1px solid #0099e6;
border-bottom: none;
border-right: none;
border-left: 1px solid #0099e6;
}




/* 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 {
position: relative;
display: inline-block;
width: 100%;
top:-25px;
}
.social-button strong {
width: 100px;
position: absolute;
}
.footer .social-button strong.fb {
display: block;
top:0;
left:calc(50% - 90px);
width: 91px;
}
.social-button strong.tw {
display: block;
top:0;
right:calc(50% - 90px);
width: 72px;
}
.social-button:before, .social-button:after {
content: " ";
display: table;
}
.social-button:after {
clear: both;
}
.social-button {
*zoom: 1;
}
.social-button iframe.twitter-share-button {
width: 90px !important;
}
.social-button.tw {
width:72px;
}
.footer span.social-button a {
border-right:none;
}

.footer {
position: relative;
text-align: center;
z-index: 50;
}
.footer-top-btn {
display: inline-block;
position: absolute;
right: 5%;
bottom: 50px;
margin:auto;
z-index: 999;
transition: opacity .3s;
width: 40px;
height: 25px;
text-indent: -9999px;
background: url(../images/global/footer-top-btn.svg) no-repeat 50% 50%;
background-size: 38px auto;
}




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

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

.social-button {
width: 110px;
top:-35px;
left:10px;
}


}

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






}