@charset "utf-8";

header {
    width: 100%;
    padding: 30px 0 15px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

header .menu {
    width: 95%;
    height: 80px;
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    padding: 0 0 0 30px;
    position: relative;
    pointer-events: auto;
}

header .logo {
    width: 160px;
    position: relative;
    z-index: 10002;
}
header .logo img { width: 100%; height: auto; }

header .Navi ul {
	display: flex;
	align-items: center;
	list-style: none;
	height: 80px;
	margin: 0;
	padding: 0;
}
header .Navi ul li {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
}
header .Navi ul li a {
    text-decoration: none;
	font-weight: bold;
	font-size: clamp(15px, 2.5vw, 17px);
    padding: 0 15px;
	display: flex;
	align-items: center;
	height: 100%;
}
header .Navi ul li a:hover {
    color: #ff7900;
}

header .Navi ul li.li-separator a {
    border-right: 2px solid #1bb299;
    height: 1.2em;
    padding-right: 15px;
    margin-right: 5px;

}
header .Navi ul li.li-separator a:hover {
    color: #ff7900;
}
header .Navi ul li.nav-login a img {
    max-width: 25px;
}

/* ログインボタン */
header .Navi ul li.nav-login {
    background-color: #1bb299 !important;
    transition: background-color 0.4s;
}
header .Navi ul li.nav-login a {
    color: #fff;
    padding: 10px 25px !important;
    gap: 8px;
}
header .Navi ul li.nav-login a span {
    color: #fff;
}

header .Navi ul li.nav-login:hover {
    background-color: #e8f7f5 !important;
}

header .Navi ul li.nav-login:hover a {
    color: #1bb299 !important;
}

header .Navi ul li.nav-login img {
    width: 18px;
    filter: brightness(0) invert(1);
    background: transparent !important;
}

header .Navi ul li.nav-login:hover img {
    filter: brightness(0) saturate(100%) invert(56%) sepia(85%) saturate(358%) hue-rotate(120deg) brightness(91%) contrast(88%);
}


/* お問い合わせ・資料請求ボタン */
header .Navi ul li.nav-contact {
    background-color: #ff7900 !important;
    transition: background-color 0.4s;
    border-radius: 0 20px 20px 0;
}
header .Navi ul li.nav-contact a {
    color: #fff;
    padding: 10px 25px !important;
    gap: 8px;
}
header .Navi ul li.nav-contact a span {
    color: #fff;
}

header .Navi ul li.nav-contact:hover {
    background-color: #ffd9b7 !important;
}

header .Navi ul li.nnav-contact:hover a {
    color: #ff7900 !important;
}

header .Navi ul li.nav-contact img {
    width: 18px;
    filter: brightness(0) invert(1);
    background: transparent !important;
}

header .Navi ul li.nav-contact:hover img {
    filter: brightness(0) saturate(100%) invert(56%) sepia(90%) saturate(2280%) hue-rotate(360deg) brightness(101%) contrast(105%);
}


.SpNavi { display: none; }
body.no-scroll { overflow: hidden; }



/* PHPで header に features_tags クラスが付いている時、a.features をオレンジにする */
header.features_tags .Navi ul li a.features,
header.price_tags .Navi ul li a.price,
header.case-studies_tags .Navi ul li a.case-studies,
header.flow_tags .Navi ul li a.flow {
    color: #ff7900 !important;
}
header.features_tags a.features::after,
header.price_tags a.price::after,
header.case-studies_tags a.case-studies::after,
header.flow_tags a.flow::after {
    display: none !important;
}


/* --- 現在のページヘッダーメニューをオレンジ色にする --- */
header.features_tags a.features,
header.product_detail_tags a.features,
header.order_detail_tags a.features,
header.inventory_detail_tags a.features,
header.price_tags a.price,
header.case-studies_tags a.case-studies,
header.flow_tags a.flow {
    color: #ff7900 !important;
}




@media only screen and (max-width: 1024px) {
    header {
		padding: 10px 0;
		background: #fff;
	}
    header .menu {
        width: 100%;
		height: 60px;
		border-radius: 0;
		padding: 40px 20px;
		box-shadow: none;
        overflow: visible;
		box-shadow: 15px 15px 20px #bababa2e;
        margin-top: 0px;
    }
	header .Navi ul li {
		padding: 25px 20px;
	}
    header .Navi ul li.li-separator a { border-right: none; }

    /* ハンバーガーアイコン */
    .SpNavi {
        display: block; position: relative; width: 30px; height: 24px;
        z-index: 10001;
        cursor: pointer;
    }
    .SpNavi span {
        display: block; position: absolute; left: 0;
        width: 100%; height: 3px; background: #1bb299;
        border-radius: 3px; transition: .4s ease-in-out;
    }
    .SpNavi span:nth-child(1) { top: 0; }
    .SpNavi span:nth-child(2) { top: 10px; }
    .SpNavi span:nth-child(3) { top: 20px; }

    .SpNavi.active span:nth-child(1) { transform: translateY(10px) rotate(-45deg); }
    .SpNavi.active span:nth-child(2) { opacity: 0; }
    .SpNavi.active span:nth-child(3) { transform: translateY(-10px) rotate(45deg); }

    /* スマホメニュー本体 */
    .Navi {
        position: fixed; top: 0; right: -100%;
        width: 100%; height: 100vh;
		background: #f7f7f7;
        z-index: 10000;
        transition: .5s; padding: 80px 20px;
        padding: 100px 20px 50px;
    }
    .Navi.open { right: 0; }

    .Navi ul {
		flex-direction: column;
		 height: auto;
	}
    .Navi ul li {
		width: 100%;
		border-bottom: 1px solid #1bb097;
	}
    .Navi ul li a {
		padding: 20px 0;
		justify-content: flex-start;
		height: auto;
	}
	header .Navi ul li.nav-login {
		border-radius: 10px;
        display: block;
        padding: 0;
	}
	header .Navi ul li.nav-contact {
		border-radius: 10px;
        display: block;
        padding: 0;
        border-radius: 10px;
	}
    header .Navi ul li.nav-login, header .Navi ul li.nav-contact {
		background: none;
	}
    header .Navi ul li.nav-login a, header .Navi ul li.nav-contact a {
		flex-direction: row;
		text-align: left;
		padding: 30px 0 !important;
		margin: 0 auto;
        justify-content: center;
    }
    header .nav-login img { filter: none; }

    .Navi ul li {
        order: 1;
    }
    .Navi ul li.last {
        order: -1;
        border-bottom: none;
    }
    .Navi ul li.second-last {
        order: -2;
        border-bottom: none;
        }
    li.nav-contact.last{
        margin-top: 5px;
    }
}