@charset "UTF-8";

/* == header == */
header {position: fixed; top: 0; display: flex; align-items: center; left: 0; width: 100%; z-index: 100; justify-content: space-between; background-color: #fff;box-shadow: 0px 0 30px rgb(149 156 223 / 25%); /*transition: all 500ms 0s ease;*/}
header.menu_fix{background-color: #fff;box-shadow: 0px 0 30px rgb(149 156 223 / 25%);}
#header_logo {display:block; z-index:500; width:clamp(180px, 20vw, 240px);}
#header_logo a{	display: block;padding: 1rem;}
#header_logo img { display: block; width: 100%; height: auto;}

#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{color:#2232c5;}
#header_nav #main_menu{display: flex;}
#header_nav #main_menu a{ padding:0.5rem 0.75vw; position: relative; font-size: clamp(0.8rem, 1.5vw, 1rem);letter-spacing: 0.075em;}

#header_nav #main_menu a:before { content: ""; display: block; position: absolute; width: 0; height: 1px; background-color:var(--color-indigo); bottom: 0px; left: 0; right: 0; margin: auto; transition: width 300ms 0s ease;}
header.menu_fix #header_nav #main_menu a:before { background-color:var(--color-indigo); }
#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{	height: 70px;}
    #header_btn_sp {display: block; width: 70px; height: 70px; 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: #2232c5; }
	header.menu_fix #header_btn_sp span{background-color: #2232c5;}
    #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:90px; padding-left: 4vw; padding-right: 4vw; letter-spacing: normal; font-size: 1rem; background-image: -webkit-linear-gradient(270deg,rgba(131,43,151,1.00) 0%,rgba(44,77,152,1.00) 40.94%,rgba(40,16,111,1.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(131,43,151,1.00) 0%,rgba(44,77,152,1.00) 40.94%,rgba(40,16,111,1.00) 100%); background-image: -o-linear-gradient(270deg,rgba(131,43,151,1.00) 0%,rgba(44,77,152,1.00) 40.94%,rgba(40,16,111,1.00) 100%); background-image: linear-gradient(180deg,rgba(131,43,151,1.00) 0%,rgba(44,77,152,1.00) 40.94%,rgba(40,16,111,1.00) 100%);}
    .header_nav-on #header_nav {right: 0; opacity: 1; }
    #header_nav ul { display: block; width: 100%; }
	#header_nav #main_menu{flex-direction: column;}
	#header_nav #main_menu a{font-size:4vw; color: #fff!important;}
	#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 #main_menu a:before,
	#header_nav #main_menu a:hover:before{width: 80%;background-color: rgb(255 255 255 / 25%);}
    .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;}
    #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; }


}