@charset "UTF-8";

/* == header == */
header {position: fixed; top: 0; left: 0; display: flex; align-items: center; width: 100%; z-index: 100; justify-content: space-between; background-color:var(--color-black); height:80px;/*transition: all 500ms 0s ease;*/padding:15px;}
header.menu_fix{}
#header_logo {display:block; z-index:500;height: 100%;}
#header_logo a{display: block; height: 100%;}
#header_logo img {display: block;height:100%;}

#header_nav { display: block; text-align: center;}
#header_nav a { text-decoration: none; /*color: rgba(255,255,255,1.00);*/color:#2232c5;}
header.menu_fix #header_nav a{}
#header_nav #main_menu{display: flex;}
#header_nav #main_menu >*:before{content:"";display:inline-block;width: 1px;background-color:#fff;height: 1.25em;vertical-align: middle;}
#header_nav #main_menu a{color: #fff; padding:0.5rem 2vw; position: relative; font-size: clamp(0.8rem, 1.5vw, 1rem);letter-spacing: 0.075em; line-height: 1;}
#header_nav #main_menu a:hover{color:var(--color-orange);}
#header_nav #main_menu a:before { content: ""; display: block; position: absolute; width: 0; height: 1px; background-color:var(--color-orange); bottom: 0px; left: 0; right: 0; margin: auto; transition: width 300ms 0s ease;}
header.menu_fix #header_nav #main_menu a:before {}
#header_nav #main_menu a:hover{opacity: 1;}
#header_nav #main_menu a:hover:before {width:3em;}

#header_nav #sub_menu { position: absolute; right: 15px; top: 28px;}
#header_nav #sub_menu li{ margin-left: 8px;}
#header_nav #sub_menu li a{ font-size: 1rem; background-color: #FFFFFF; padding-right: 1.25em; padding-left: 1.25em; padding-top: 0.5em; padding-bottom: 0.75em; border-radius: 6px;}
#header_nav #sub_menu li a:before{ content: ""; display: inline-block; width: 1.2em; height: 1.2em; vertical-align: middle; margin-right: 0.5em; background-position: center center; background-size: 100% auto; background-repeat: no-repeat;}
#header_nav #sub_menu li.sub_database a:before{	background-image: url(../img/comm_database-black.svg); }
#header_nav #sub_menu li.sub_recruit a:before{ background-image: url(../img/comm_recruit-black.svg);}
#header_nav #sub_menu li.sub_english a:before{ background-image: url(../img/comm_english-black.svg); }

.header_nav_wrap {}
.header_nav_wrap-hasChild .header_nav_children {display: block; position: absolute; top: 42px; left: 100%; background: rgba(0,0,0,0.7); font-size: 1rem; width: 100%; opacity: 0; transition: opacity 300ms 0s ease, left 300ms 0s ease; padding: 15px 25px;}
.header_nav_children-main,
.header_nav_children-sup {padding: 0.8em 0; text-align: center;}
.header_nav_children-sup {border-top: 1px solid rgba(124,124,124,0.7);}
.header_nav_l1{}
.reserve,.login{}
.reserve .header_nav_l1{}
.login .header_nav_l1{}

.header_nav_wrap-hasChild-on .header_nav_children {left: 0; opacity: 1;}


.header_nav_l2 {display: inline-block; padding: 0.2em 1.2em; margin: 0.5em; position: relative; transition: background 300ms 0s ease;}
.header_nav_l2:before {content: ""; display: block; background: transparent; position: absolute; border-top: 1px solid #999999; border-left: 1px solid #999999; width: 5px; height: 5px; top: 0; left: 0; transition: width 300ms 0s ease, height 300ms 0s ease;}
.header_nav_l2:after {content: ""; display: block; background: transparent; position: absolute; border-bottom: 1px solid #999999; border-right: 1px solid #999999; width: 5px; height: 5px; bottom: 0; right: 0; transition: width 300ms 0s ease, height 300ms 0s ease;}
.header_nav_l2:hover { background-color: #000000;}
.header_nav_l2:hover:before, .header_nav_l2:hover:after { width: 100%; height: 100%;}


@media only screen and (max-width: 760px) {

    header{}
    #header_btn_sp {display: block; width: 80px; height: 80px; position: absolute; top: 0; right: 0; z-index: 1000; }
    #header_btn_sp span { pointer-events: none; display: block; width: 24px; height: 4px; position: absolute; top: 0; bottom: 0; right: 22px; margin: auto; transition: transform 300ms 0s ease, width 300ms 0s ease, top 300ms 0s ease, bottom 300ms 0s ease, right 300ms 0s ease;background-color: #fff; }
	header.menu_fix #header_btn_sp span{}
    #header_btn_sp span:first-child {top:16px;}
    #header_btn_sp span:last-child {bottom:16px;}
	
    header.header_nav-on #header_btn_sp span {right:20px;width:20px;background-color: #fff!important;}
    header.header_nav-on #header_btn_sp span:first-child {-ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 16px; top:8px; right: 14px; }
    header.header_nav-on #header_btn_sp span:last-child {-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 16px; bottom:8px; right: 14px; }
    #header_logo {width: 100%;height: 100%;top: 0;left: 0;}
    #header_logo a{height: auto; padding-bottom: 0;}
    #header_logo img {width: 150px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
    #header_nav { width: 100vw; height: 100vh; position: absolute; float: none; top: 0; right: -100vw;overflow: scroll; transition: all 500ms 0s ease; opacity: 0; padding-top:120px; padding-left:5vw; padding-right:5vw; letter-spacing: normal; font-size: 1rem; background-image:url(../img/sst_menu_bgSP.webp),linear-gradient(160deg, var(--color-blue) 20%, #abe9ff 100%);background-repeat: no-repeat;background-position: center bottom;background-size: 100% auto; background-blend-mode:soft-light;}
	
    .header_nav-on #header_nav {right: 0; opacity: 1; }
    #header_nav ul { display: block; width: 100%; }
	#header_nav #main_menu{flex-direction: column;gap:1.5rem;}
	#header_nav #main_menu >*:before{display:none!important;}
	#header_nav #main_menu a{font-size:5vw; color: #fff!important;text-align: left;padding: 0.25rem 1vw 0.25rem 5vw;}
	#header_nav #main_menu a:before {}
	#header_nav #main_menu a:hover:before {display: none;}
	header.menu_fix #header_nav #main_menu a:before {}
	#header_nav #sub_menu{ position: static; margin-top: 2em;}
	#header_nav #main_menu a, #header_nav #sub_menu a{ display: block;}
	#header_nav #sub_menu li{ margin-left: 0; margin-bottom: 1em;}
	#header_nav #sub_menu li a{font-size: 1.2rem;} #header_nav #sub_menu li a:before{ display: inline-block;}

    .header_nav_wrap-hasChild .header_nav_children {background: transparent; position: static; top: auto; left: auto; padding: 0 1em 0 1.5em; text-align: left; opacity: 1; max-height: 0; overflow: hidden; transition: max-height 500ms 0s ease; }
    .header_nav_wrap-hasChild-on .header_nav_children {display: block; max-height: 100vh; }
    #header_nav ul li { display: block;border-left: solid 2px #fff;}
    #header_nav ul li a.header_nav_l1 { line-height: 40px; width: 100%; }
    .login .header_nav_l1,.reserve .header_nav_l1{
    margin-left: 0em; margin-top: 0.5em; text-align: center; }
    /*.header_nav_l1:before {
    bottom: 8px; right: auto; left: 1em; }
    .header_nav_l1:hover:before { width: calc( 100% - 2em ); }
    */
    .header_nav_children-main { padding-top: 0; }
    .header_nav_children-main,
    .header_nav_children-sup { text-align: left; }


}