@charset "utf-8";
html,body{height: 100%;}
/* Keep page width stable when the vertical scrollbar appears or disappears. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
}
body.none{display: none;}
body{min-width: 1600px;}


/* header */


header {
    position: relative;
    background: #0f1b3b;
    z-index: 3;
    color: #FFF;
}

/* header h1 a {
    display: block;
    height: 30px;
    background: url('../../image/common/icon_logo_header2.png')0 center/100% auto no-repeat;
    width: 75px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} */

header h1 a {
    display: block;
    height: 53px;
    background: url('../../image/common/icon_logo_header6.png')0 center/100% auto no-repeat;
    width: 206px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

header h1 a span {
    color: #FFF;
    margin-top: 0;
    font-size: 18px;
    left: 35px;
}

header h1 {
    width: auto;
    height: 60px;
    padding-left: 5px;
    position: absolute;
}
header nav{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
header nav>ul {
    display: flex;
    justify-content: center;
    /*
position: relative;
*/
}
header nav>ul>li{
    padding: 0 41px;
}
header nav>ul>li,
header nav>ul>li>a {
    line-height: 60px;
    display: block;
    color: #FFF;
    position: relative;
}

/* Hover stays in the existing light blue and automatically clears on mouseleave. */
header nav>ul>li:hover>a,
header nav>ul>li.on>a {
    color: #a2d0ff;
}

/* The menu matching the current URL uses a deeper blue. */
header nav>ul>li.is-current>a {
    color: #499be9;
    font-weight: 600;
}

/* Even on the current page, a hovered menu keeps the existing hover color. */
header nav>ul>li.is-current:hover>a {
    color: #a2d0ff;
}

header nav>ul>li ul li {
    line-height: 19px;
    margin-top: 15px;
    font-size: 15px;
}

header nav>ul>li ul.depth_2>li:first-child {
    margin-top: 0;
    margin-bottom: 23px;
}

header nav>ul>li ul li {
    line-height: 1;
    margin-top: 14px;
    font-size: 15px;
}

header nav>ul>li ul li a {
    position: relative;
    color: #111;

}

header nav>ul>li ul li a:hover {
    color: #2076cf !important;
    text-decoration: underline;
    text-underline-position: under;
}

header nav>ul>li ul li a:hover::after {
    width: 100%;

}

header nav>ul>li {
    position: relative;

}
header nav>ul>li:last-child{
    margin-right: 0px;
}

.depth_2 {
    position: absolute;
    z-index: 999;
    padding-top: 40px;
    justify-content: space-between;
    box-sizing: border-box;
    top: 60px;
    z-index: 4;
    height: 0;
    overflow: hidden;
    text-align: left;
    min-width: 220px;
    left: 0;
    transition: height 0.2s;
    font-weight: 500;
    opacity: 0;
}
.depth_2.on {
    opacity: 1;
    height: 443px;
    transition: height 0.5s;
}
.depth_2 .nav_title{
    color: #111;
    font-size: 18px;
    font-weight: 600;
}
.depth_2.n1{
    left: -78px;
}
.depth_2.n2{
    left: -60px;
}
.depth_2.n3{
    left: -55px;
}
.depth_2.n4{
    left: -66px;
}
.depth_2.n5{
    left: 45px;
}




h1 span:nth-child(2) {
    margin-left: -80px;
}

.depth_2_bg {
    position: absolute;
    width: 100%;
    background: #FFF;
    height: 0;
    top: 60px;
    z-index: -1;
    box-shadow: 0 0 10px #666;
    transition: all 0.2s;
}

.depth_2_bg.on {
    height: 443px;
    transition: all 0.5s;
}

header nav>ul>li ul.depth_2>li .depth_3 li a{
    font-size: 14px;
    color: #444444;
    font-weight: 400;
}
header nav>ul>li ul.depth_2>li .depth_3 li a::before{
    content: "";
}
header nav>ul>li ul.depth_2>li .depth_3 li a:hover{
    text-decoration: none;
}
.depth_3{
    margin-top: 18px;
    margin-bottom: 18px;
}

.depth_2>li>a.on{
    color: #2076cf;
    text-decoration: underline;
    text-underline-position: under;
}

.mypage_btn_header2 {
    content: "";
    position: relative;
    display: block;
    height: min-content;
    background: none;
    border: none;
    cursor: pointer;
    border-right: 1px solid #d2d2d2;
    color: #FFF;
    padding-left: 25px;
    font-size: 13px;
    padding-right: 30px;
    border-radius: 0;
}

.mypage_btn_header2::before {
    content: "";
    display: block;
    background: url(../../image/common/icon_mypage_header2.png) center 0px/16px 15px no-repeat;
    width: 16px;
    height: 15px;
    position: absolute;
    left: 0;
}

.btn_logout {
    display: block;
    width: 17px;
    height: 17px;
    background: url('../../image/common/icon_02_header2.png') 0 0/100% auto no-repeat;
    margin-left: 30px;
    border: none;
    cursor: pointer;
}


.header_user_info{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}



header .user_container nav{

}


.page{  min-height: calc(100vh - 60px);  }

/* user */
.userpage .content{
    min-height: calc(100vh - 385px);
}

/* admin */
.adminpage .content{
    min-height: calc(100vh - 181px);
}


/* content */

.content{
    position: relative;
    height: 100%;
    padding-bottom: 0px !important;
    box-sizing: border-box;
}




/* footer */
footer{
    position: absolute;
    bottom: 0;
    margin-top: 60px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    color: #666666;
    font-size: 13px;
    text-align: center;
    border-top: 1px solid #e2e2e2;
}