@charset "utf-8";

/*-----------------------------------------------------------
ヘッダー
-----------------------------------------------------------*/


.header {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    position: fixed;
    top: 0;
    z-index: 9999;
    transition: all .3s;
}

.header-container {
    margin: 0 0 0 auto;
    padding: 40px 15px 20px;
    max-width: 1875px;
    width: 100%;
    transition: all .3s;
}

.header-area {
    max-width: 1750px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    max-width: 150px;
    width: 100%;
}

.header-right {
    max-width: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-link-container {
    max-width: 460px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-link-area {
    max-width: 400px;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.header-reserve-area {
    max-width: 190px;
    width: 100%;
    position: relative;
}

.header-contact-btn {
    display: block;
    padding: 15px 15px 18px;
    max-width: 190px;
    width: 100%;
    font-size: clamp(13px, calc(0.8125rem + ((1vw - 7.68px) * 0.434)), 18px);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--tertiary);
    text-align: center;
    background: var(
    --white);
    border: 1px solid var(--tertiary);
    border-radius: 34px;
    transition: all .3s;
}

.header-contact-btn:hover {
    color: var(--white);
    background: var(
    --tertiary);
}

.header-reserve-box01 {
    width: 100%;
    padding: 15px 15px 18px;
    font-size: clamp(13px, calc(0.8125rem + ((1vw - 7.68px) * 0.434)), 18px);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--primary);
    background: var(--white);
    text-align: center;
    border: 1px solid var(--primary);
    border-radius: 34px;
    position: relative;
    transition: all .3s;
}

.header-reserve-box01:hover {
    transform: scale(1.05);
}

.header-reserve-box01::before {
    content: "";
    display: block;
    width: 14px;
    height: 9px;
    background: url(/system_panel/uploads/images/reserve_icon.svg) center / contain no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 14%;
    margin: auto;
    transition: all .3s;
}

.header-reserve-box01.active::before {
    transform: scale(1, -1);
}

.header-reserve-link-area {
    padding: 16px 15px 19px;
    max-width: 230px;
    width: 100%;
    background: var(--secondary);
    border-radius: 8px;
    position: absolute;
    top: 125%;
    z-index: 1;
}

.header-reserve-link-box {
    max-width: 200px;
    width: 100%;
    margin: 0 auto;
}

.header-reserve-link {
    display: block;
    font-size: clamp(13px, calc(0.8125rem + ((1vw - 7.68px) * 0.434)), 18px);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--white);
    text-align: center;
    text-shadow: 0 2px 10px rgba(90, 90, 90, 0.25);
    transition: all .3s;
}

.header-reserve-link::before {
    content: "";
    display: block;
    margin: 28px 0 0;
    width: 0;
    height: 1px;
    background: var(--white);
    position: absolute;
    left: 0;
    bottom: -2%;
    margin: auto;
    transition: all .4s;
}

.header-reserve-link:hover {
    color: var(--white);
}

.header-reserve-link:hover::before {
    width: 100%;
}

.header-reserve-border {
    margin: 15px 0;
    width: 100%;
    height: 1px;
    background: var(--white);
}

/*--is-active--*/

.header.is-active {
    background: var(--bg-tertiary);
}

.header.is-active .header-container {
    padding: 18px 15px 20px;
}

/*--is-animation--*/

.header.clone.is-animation {
    top: 0;
    transition: all .5s;
    visibility: visible;
    opacity: 0.9;
}

.header.clone {
    position: fixed;
    top: -96px;
    transition: all .5s;
    visibility: hidden;
    opacity: 0;
    border-bottom: 0px solid #ccc;
    background: #356194;
}

/*----- is-hidden -----*/
/*
..is-hidden {
	visibility: hidden;
	transition: all .5s;
	opacity: 0;
}
*/

/*-----------------------------------------------------------

-----------------------------------------------------------*/


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:544px) {

    
/*-----------------------------------------------------------

-----------------------------------------------------------*/

    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 544px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width: 768px) {

.header-right {
    max-width: 539px;
    align-items: flex-start;
}

.header-link-area {
    display: flex;
}
    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 768px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width: 1024px) {

.header-logo {
    max-width: 244px;
}

.header-right {
    max-width: 649px;
}

.header-link-container {
    max-width: 550px;
}

.header-link-area {
    max-width: 480px;
}

.header-reserve-area {
    max-width: 230px;
}

.header-reserve-box01 {
    padding: 18px 15px 19px;
}

.header-contact-btn {
    max-width: 230px;
    padding: 18px 15px 19px;
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 1024px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1200px) {

    
/*-----------------------------------------------------------

-----------------------------------------------------------*/

    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 1200px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1300px) {

    

    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 1440px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1620px) {

    

    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 1520px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */