@charset "utf-8";

body > header#head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 16px;
	border-bottom: 1px dotted var(--col1-50);
    background: #fff;
    transition: all 0.3s;
    @media (max-width: 700px) {
        padding-inline: 8px;
    }

	.logo {
        max-width: 150px;
		width: 30%;
		aspect-ratio: 150 / 53;
		background: var(--col1-50);
		-webkit-mask: url("/img/rogo.svg") no-repeat center center / contain;
		mask-image: url("/img/rogo.svg");
		mask-repeat: no-repeat;
		mask-position: center center;
		mask-size: contain;
	}
}

body > header#head .items {
	display: flex;
	gap: 4px;
    @media (min-width: 700px) {
        padding-right: 0;
    }
    * {
        font-size: 1.4rem;
        @media (min-width: 700px) {
            font-size: 1.6rem;
        }
    }
	> button {
        width: auto;
        line-height: 1;
        padding: 10px 6px;
		border-radius: 5px;
        display: flex;
        align-items: center;
        gap: 2px;
        @media (min-width: 700px) {
            padding: 6px 8px;
        }
	}
    > button *[class*=material-] {
        font-size: 1.8rem;
    }
	button.member {
		background: var(--colgray-95);
        color: var(--col-link);
        border: 1px solid var(--colgray-60);
        text-decoration: none;
        span.label {
            text-decoration: underline;
        }
	}
	button.hotel {
		background: var(--col1-50);
		color: var(--col1-97);
	}
	button.store {
		background: var(--col5-50);
		color: var(--col5-97);
	}
    button.member.active {
		background: var(--col4-50);
		color: #000;
        border: 1px solid var(--colgray-60);
    }
}

body > header#head.fix {
    position: fixed;
    border-bottom-width: 4px ;
    border-bottom-style: solid ;
    padding-block: 8px;
    z-index: 9999;
    .logo {
		max-width: 100px;
    }
    .items * {
        font-size: 1.4rem;
    }
    .items > button {
        padding-block: 4px;
    }
    .items > button *[class*=material-] {
        font-size: 1.8rem;
    }
}