@charset "utf-8";

/*===========================================================
ヘッダー
===========================================================*/

.header {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    position: fixed;
    top: 0;
    margin: auto;
    z-index: 999;
}

.header-container {
    padding: 3rem 0 0 4.4rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.header-logo {
    margin: -1.2rem 0 0;
    max-width: 28rem;
    width: 100%;
}

.header-link-container {
	margin: 0 0 0 2rem;
    max-width: 143.7rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
	gap: 2rem;
}

.header-nav-area {
    max-width: 101.1rem;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
	gap: 1rem;
    position: relative;
    bottom: 0.5rem;
}

.header-nav-link {
    display: inline-block;
}

.header-nav-link a {
    display: inline-flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--white);
}

.header-nav-link a::before {
    content: "";
    display: block;
    margin: 0 0.8rem 0 0;
    width: 3rem;
    height: 3rem;
    background: url(../../../../uploads/icon_navi.png) center / cover no-repeat;
    transition: all .3s;
}

.header-nav-link a:hover::before {
    background: url(../../../../uploads/icon_btn.png) center / cover no-repeat;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1920px) {


/*===========================================================

===========================================================*/



}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1024px) {


/*===========================================================

===========================================================*/

.header-logo {
	margin: 0 auto;
    max-width: 20rem;
}

.header-container {
	margin: 1rem 0 0;
	padding: 0;
}

.header-link-container {
    margin: 2rem 0 0 2rem;
    flex-direction: column;
}

.header-nav-area {
    margin: 0 1rem 0 0;
    width: 100%;
}

.header-tel-area {
    margin: 0 0 0 auto;
}

.header-nav-link a {
	font-size: 1.5rem;
}

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 768px) {


/*===========================================================

===========================================================*/

.header-logo {
	max-width: 16rem;
}

.header-link-container {
	display: none;
}

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 576px) {


/*===========================================================

===========================================================*/



}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 414px) {


/*===========================================================

===========================================================*/



}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */