@charset "utf-8";

.sp_header {
background: #FFF;
position: relative;
width: 100%;
height: 60px;
z-index: 20;
}
.sp_header .logo {
position: absolute;
top:10px;
left:10px;
}





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

.hmenuclick1{
top:20px;
transform: rotate(45deg);
background-color: #FFF;
}
.hmenuclick2{
opacity:0;
}
.hmenuclick3{
top:20px;
transform: rotate(-45deg);
background-color: #FFF;
}
.hmenuclick4 {
opacity:0;
}
.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;
left: 0;
width: 100%;
height: 100%;
padding: 1rem 0;
box-sizing: border-box;
background-color: #161d54;
z-index: 998;
}
.hmenu-nav > nav {
padding: 50px 20px 0;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.hmenu-nav > nav > ul > li {
margin-bottom: 1rem;
}

.hmenu-nav > nav > ul > li > a,
.hmenu-nav > nav > ul > li > .trigger {
display: block;
padding: .6rem 0;
color: #FFF;
text-align: center;
font-size: var(--20px);
font-family: 'Montserrat', sans-serif;
cursor: pointer;
}
.hmenu-nav > nav > ul > li.current > a:after {
content: "";
display: block;
width: 50px;
height: 1px;
margin: 10px auto 0;
background:#3362a0;
}
.hmenu-nav > nav > ul > li.go_room {
margin-top: 3rem;
}
.hmenu-nav > nav > ul > li > a.link_other:after {
background-image: url(../images/icon_other_white.svg);
}
.hmenu-nav .lower {
display: none;
}
.hmenu-nav .lower > p.flex {
flex-wrap: wrap;
justify-content: space-between;
padding: 10px 0 30px;
}
.hmenu-nav > nav > ul > li > .trigger {
transition: opacity .2s;
}
.hmenu-nav > nav > ul > li > .trigger:hover {
opacity: .8;
}
.hmenu-nav > nav > ul > li > .trigger:after {
content: "";
display: inline-block;
margin-left: 15px;
width: 10px;
height: 10px;
border-right:1px solid #FFF;
border-bottom:1px solid #FFF;
transform: translateY(-5px) rotate(45deg) ;
}
.hmenu-nav > nav > ul > li > .trigger.current:after {
transform: translateY(3px) rotate(-135deg);
}
.hmenu-nav .lower a {
display: block;
width: 48%;
padding: .8rem 0;
box-sizing: border-box;
color: #FFF;
font-weight: normal;
font-size: var(--15px);
text-align: center;
border-bottom: 1px solid #113a73;
font-family: 'Montserrat', sans-serif;
}
/*.hmenu-nav .lower a:first-child {
width: 100%;
}*/
.hmenu-nav .lower a.current {
border-bottom:2px solid #3362a0;
}



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





}







/* 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:5px;
right:10px;
display: inline-block;
text-align: center;
width: 20px;
height: 2px;
z-index: 500;
}
.footer-top-btn.up {
bottom:48px;
}
.footer-top-btn span {
display: none;
}
.footer-top-btn:before {
position: absolute;
top:90%;
left:50%;
display:block;
content: "";
width: 20px;
height: 20px;
border-top:1px solid #003b88;
border-right: 1px solid #003b88;
-webkit-transform: translate(-50%, -55%) rotate(-45deg);
transform:translate(-50%,-55%) rotate(-45deg);
}




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

.footer-top-btn {
width: 30px;
height: 30px;
}
.footer-top-btn.up {
bottom:44px;
}
.footer-top-btn:before {
width: 25px;
height: 25px;
}



/* hamburger menu */
.sp_header{
display: none;
}
.hmenu{
transform: translateY(3px);
}


/* Social Button */
.social-button ul {
width: 100%;
}
.social-button ul li {
margin-left: 15px;
}
.hmenu-nav .lower > p.flex {
justify-content: flex-start;
padding: 10px 50px 30px;
}
.hmenu-nav .lower a,
.hmenu-nav .lower a:first-child {
width:calc(33.3% - 20px);
margin: 0 10px;
font-size: var(--17px);
}
.hmenu-nav .lower a:nth-child(-n+3) {
border-top: 1px solid #113a73;
}
.hmenu-nav > nav > ul > li > .trigger.current:after {
transform: translateY(2px) rotate(-135deg);
}

}/*min-width:768px*/










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


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




}/*min-width:1080px*/


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

.hmenu-nav .lower > p.flex {
max-width: 1320px;
margin: 0 auto;
}


}/*min-width:1320px*/