@charset "UTF-8";

header {
	z-index: 10;
	height: 120px
}

header .navbar .logo {
	display: block;
	height: 85px;
	position: relative
}

header .navbar .logo img {
	position: absolute;
	height: 75px;
	width: auto;
	background-color: var(--text-color);
	border-radius: 7px;
	top: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer
}

header .shop-sub {
	position: absolute;
	left: 0;
	top: calc(100% - 2px);
	min-width: 220px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
	backdrop-filter: blur(6px);
	border-radius: 12px;
	padding: 8px;
	box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.04);
	opacity: 0;
	transform: translateY(-6px) scale(.98);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, max-height .25s ease;
	z-index: 40
}

#fixed-favicon {
	position: fixed;
	cursor: pointer;
	z-index: 3
}

header #fixed-favicon img {
	width: 66px;
	height: 66px;
	border-radius: 50%
}

header #fixed-favicon:hover img {
	transform: scale(1.1);
	transition: transform 0.3s ease
}

@media all and (min-width: 651px) {
	header {
		position: relative
	}

	header .navbar {
		width: 100%
	}

	header .navbar .greeting {
		position: absolute;
		top: 0;
		right: 0;
		background: none;
		padding: 10px 5px 0 0
	}

	header .navbar .greeting .header_sns {
		display: flex;
		gap: 12px;
		justify-content: center;
		list-style: none;
		background: none
	}

	header .navbar .greeting .header_sns li {
		padding: 0
	}

	header .navbar .greeting .header_sns li a {
		width: 50px;
		height: 50px;
		background-color: var(--text-dark);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: 0.3s
	}

	header .navbar .greeting .header_sns li a:hover {
		background-color: var(--sub-color)
	}

	header .navbar .greeting .header_sns svg {
		width: 26px;
		height: 26px
	}

	header .navbar .menu {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 35px;
		padding: 0
	}

	header .navbar .menu li {
		display: inline-block;
		list-style: none;
		padding: 0 10px
	}

	header .navbar .menu li a {
		text-decoration: none;
		color: var(--text-color);
		font-weight: bold;
		width: 100%;
		position: relative;
		overflow: hidden
	}

	header .navbar .menu li a::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 0;
		height: 2px;
		background-color: var(--emphasis-color);
		transition: all 0.3s ease;
		transform: translateX(-50%)
	}

	header .navbar .menu li a:hover::after {
		width: 100%
	}

	header .has-sub .truangle {
		padding-left: 3px;
		font-size: 0.8em
	}

	header .has-sub .btn-truangle {
		display: none
	}

	header .has-sub {
		position: relative
	}

	header .shop-sub a {
		display: block;
		padding: 5px 10px;
		border-radius: 8px
	}

	header .shop-sub a:hover,
	header .shop-sub a:focus {
		background: rgba(255, 255, 255, 0.03);
		transform: none;
		outline: none
	}

	header .has-sub:hover .shop-sub,
	header .has-sub:focus-within .shop-sub,
	header .has-sub.open .shop-sub {
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto
	}

	header #fixed-favicon {
		top: 40px;
		left: 50%;
		transform: translate(-50%, -50%) scale(0);
		opacity: 0;
		transition: opacity 0.3s ease, transform 0.3s ease
	}

	header .fixed-logo {
		display: none
	}

	/* スクロール時の挙動 */
	header #fixed-favicon.show {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, -50%)
	}

	header .navbar.sticky {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.6s;
		padding: 0;
		background: var(--main-color);
		border-radius: 0 0 50px 50px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3)
	}

	header .sticky::before {
		position: absolute;
		content: '';
		left: 50%;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: inherit;
		transform: translateX(-50%) translateY(18%);
		bottom: 0px
	}

	header .sticky .logo {
		display: none
	}

	header .sticky .greeting {
		display: none;
		transition: display 0.6s
	}

	header .sticky .menu {
		height: 60px;
		align-items: center;
		transition: height 0.6s, align-items 0.6s
	}

	header .sticky ul {
		padding-left: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: flex-start;
		justify-content: flex-start
	}

	header .sticky .menu li {
		background: none;
		padding: 0
	}

	header .sticky ul li:nth-of-type(1) {
		width: 111px;
		position: absolute;
		left: calc(50%/3 - 26px);
		/*色々と計算して均等にちらばらるようにしてる*/
		transform: translateX(-50%)
	}

	header .sticky ul li:nth-of-type(2) {
		width: 111px;
		position: absolute;
		left: calc(100%/3 - 7px);
		transform: translateX(-50%)
	}

	header .sticky ul li:nth-of-type(3) {
		width: 111px;
		position: absolute;
		right: calc(100%/3 - 7px);
		transform: translateX(50%)
	}

	header .sticky ul li:nth-of-type(4) {
		width: 111px;
		position: absolute;
		right: calc(50%/3 - 26px);
		transform: translateX(50%)
	}
}

@media not all and (min-width: 651px) {
	header {
		height: 70px
	}

	header .navbar .logo img {
		width: 100%;
		height: auto
	}

	.open .navbar {
		left: 0;
		opacity: 1
	}

	.navbar {
		display: block;
		position: fixed;
		background: var(--main-color);
		width: 260px;
		top: 0;
		left: -300px;
		bottom: 0;
		transition: all 0.5s;
		z-index: 15;
		opacity: 0;
		overflow-y: scroll;
		padding: 25px
	}

	.navbar ul {
		list-style: none;
		margin: 0;
		padding: 0
	}

	.navbar .menu li {
		text-align: left;
		margin: 0;
		border-bottom: 1px solid var(--text-color)
	}

	.navbar .menu li a {
		display: block;
		color: var(--text-color);
		font-size: 14px;
		padding: 1em;
		text-decoration: none;
		font-weight: bold;
		transition-duration: 0.2s
	}

	.navbar .menu li a:hover {
		background: var(--emphasis-color)
	}

	header .navbar .greeting .header_sns {
		gap: 25px;
		justify-content: center;
		list-style: none;
		margin: 10px 0 8px;
		display: flex
	}

	header .navbar .greeting .header_sns svg {
		width: 25px;
		height: 25px
	}

	header .navbar .greeting .header_sns img {
		display: none;
	}

	.toggle-btn {
		display: block;
		position: fixed;
		top: 20px;
		right: 20px;
		width: 30px;
		height: 30px;
		z-index: 14;
		cursor: pointer
	}

	.toggle-btn span {
		position: absolute;
		display: block;
		left: 0;
		width: 30px;
		height: 2px;
		background-color: var(--text-color);
		transition: all 0.5s;
		border-radius: 4px;
		z-index: 13
	}

	.toggle-btn span:nth-child(1) {
		top: 4px
	}

	.toggle-btn span:nth-child(2) {
		top: 14px
	}

	.toggle-btn span:nth-child(3) {
		bottom: 4px
	}

	.toggle-btn .circle {
		position: absolute;
		top: -8px;
		right: -8px;
		width: 46px;
		height: 46px;
		background-color: var(--text-dark);
		border-radius: 50%;
		z-index: 12
	}

	.open .toggle-btn span {
		background-color: var(--text-color)
	}

	.open .toggle-btn .circle {
		background-color: var(--main-color)
	}

	.open .toggle-btn span:nth-child(1) {
		transform: translateY(10px) rotate(-315deg)
	}

	.open .toggle-btn span:nth-child(2) {
		opacity: 0
	}

	.open .toggle-btn span:nth-child(3) {
		transform: translateY(-10px) rotate(315deg)
	}

	#mask {
		display: none;
		transition: all 0.5s
	}

	.open #mask {
		display: block;
		background: var(--text-color);
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: fixed;
		opacity: 0.8;
		z-index: 10
	}

	#fixed-favicon {
		display: none
	}

	header .fixed-logo img {
		height: 100%;
		width: auto;
		margin-right: 5%;
		border-radius: 10px
	}

	header .has-sub .truangle {
		display: none
	}

	header .menu .has-sub {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		border-bottom: 1px solid var(--text-color)
	}

	header .menu-link {
		display: inline-block;
		flex: 1 1 auto
	}

	header .btn-truangle {
		background: none;
		border: none;
		padding-left: 8px;
		padding-right: 4px;
		font-size: 0.9em;
		cursor: pointer;
		line-height: 1;
		transform-origin: 50% 50%;
		transition: transform .18s ease, opacity .18s;
		color: var(--text-color)
	}

	header .has-sub.open .btn-truangle {
		transform: rotate(180deg)
	}

	header .shop-sub {
		max-height: 0;
		overflow: hidden/*ありなしは好み*/
	}

	header .has-sub.open .shop-sub {
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
		max-height: 400px
	}

	header .header .shop-sub a,
	header .shop-sub a {
		display: block;
		padding: 8px 10px;
		border-radius: 8px;
		text-decoration: none;
		color: var(--text-color)
	}

	header .shop-sub a:hover,
	header .shop-sub a:focus {
		background: rgba(255, 255, 255, 0.03);
		outline: none;
	}
}