@charset "UTF-8";

    header{	height: 90px;background-image: url(../img/haniEve_headBg.svg);background-repeat: no-repeat;background-position: center top;background-size: 100% auto;z-index: 1000;}
	
    #header_btn_sp {display: block; width:60px; height: 60px; position: absolute; top: 10px; right:10px; z-index: 1000;background-color: var(--color-pink);
    border-radius: 50%;}
    #header_btn_sp span { pointer-events: none; display: block; margin: auto; width: 24px; height: 4px; position: absolute; top: 0; bottom: 0; right:0;left:0; 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 {width:32px;background-color: #fff!important;top: 0;bottom: 0;}
    header.header_nav-on #header_btn_sp span:first-child {-ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
    header.header_nav-on #header_btn_sp span:last-child {-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
    header.header_nav-on #header_btn_sp span:nth-child(2){display: none;}
    #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: 450px;
	height: 100vh;
	position: absolute;
	top: -100vh; /*overflow: scroll;*/
	transition: all 500ms 0s cubic-bezier(0.16, 1, 0.3, 1);
	opacity: 0;
	padding-top: 110px;
	padding-left: 2rem;
	padding-right: 2rem;
	letter-spacing: normal;
	font-size: 1rem;
	background-image: url(../img/haniEve_05.webp),-webkit-linear-gradient(270deg,rgba(34,143,220,1.00) 0%,rgba(175,79,255,1.00) 42.42%,rgba(217,117,145,1.00) 82.04%);
	background-image: url(../img/haniEve_05.webp),-moz-linear-gradient(270deg,rgba(34,143,220,1.00) 0%,rgba(175,79,255,1.00) 42.42%,rgba(217,117,145,1.00) 82.04%);
	background-image: url(../img/haniEve_05.webp),-o-linear-gradient(270deg,rgba(34,143,220,1.00) 0%,rgba(175,79,255,1.00) 42.42%,rgba(217,117,145,1.00) 82.04%);
	background-image: url(../img/haniEve_05.webp),linear-gradient(180deg,rgba(34,143,220,1.00) 0%,rgba(175,79,255,1.00) 42.42%,rgba(217,117,145,1.00) 82.04%);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
	background-blend-mode: overlay;
}
	#header_nav:after{}
    .header_nav-on #header_nav {top: 0; opacity: 1; }
    #header_nav ul { display:flex; width: 100%; row-gap:1rem;}
	#header_nav #main_menu{flex-direction: column;}
	#header_nav #main_menu a{font-size:var(--font-L); color: #fff!important;letter-spacing: 0.05em;line-height: 1.3;}
	#header_nav #main_menu li:before{content:"";display:block;width: 1.5rem; height:0.25rem;background-color: #fff;margin-top: 0.85rem;}
	#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: flex;column-gap: 2rem;}
    #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_children-main { padding-top: 0; }
    .header_nav_children-main,
    .header_nav_children-sup { text-align: left; }


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

	header{background-size: auto;}
	#header_nav {width:100vw;}

}