@charset "utf-8";
/* ==========================================================================
   headerのモジュール
============================================================================= */
.header{
    z-index: 1000;
	top:0;
	left:0;
	position: fixed;
	width: 100%;
	height:var(--header--heightPc);
    mix-blend-mode: difference;
	@media (max-width: 1300px) {
		height:var(--header--heightSp);
	}

	.l-container{
		height:100%;
		width: 100%;
		max-width: calc(100% - (30px*2));
		display: flex;
		flex-wrap:nowrap;
		justify-content:space-between;
		align-items:center;
		position: relative;
		z-index: 1;
		@media (max-width: 900px) {
			max-width: calc(100% - (15px*2));
		}
	}
}

/* ==============================
// ロゴ
================================= */
.header__logo{
	display: block;
	img,
	svg {
		display: block;
		width: var(--logo-size--pc);
		height: auto;
		transition:.3s;
		@media (max-width: 1300px) {
			width: var(--logo-size--tab);
		}
	}

	&:hover{
		opacity: 1;
	}
}
.is-scrolled{
	.header__logo{
		img,
		svg {
			width: var(--logo-size--sp);
		}
	}
}
/* ==============================
// 上部固定メニュー
================================= */
//上に固定される方
.is-headerOrg{
	.header__navLink {
		&::before {
			background-color: var(--color-font);
		}
		&:hover {
			.header__navText {
				color: var(--color-font);
			}
		}
	}
}
//スクロールで降りてくる方
.is-headerClone{
	transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
	will-change: opacity, transform;
	position: fixed;
	backdrop-filter: blur(5px) brightness(1);
	-webkit-backdrop-filter: blur(5px) brightness(1);
	&::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 0;
		background: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,.1));
	}
	.header__logo {
		.header__logo-title {}
		.header__logo-mark {
			path {
				fill: var(--color-font);
			}
		}
	}
	.header__navText {
		color: var(--color-font);
	}
}

.header{
  transition: opacity .3s ease;
}

/* 表示 */
.header.is-show{
  opacity: 1;
  pointer-events: auto;
}

/* 非表示（透過） */
.header.is-hide{
  opacity: 0;
  pointer-events: none;
}

/* ==============================
// 管理バーの干渉を調整
================================= */
#wpadminbar {
	@include mqMaxNum(600px){
		position: fixed !important;
   }
}