@charset "UTF-8";

header {
	z-index: 10
}

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

header .navbar .logo img {
	height: 70px;
	width: auto;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer
}

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

header #fixed-logo img {
	width: 65px;
	height: 65px;
	border-radius: 30%
}

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

@media all and (min-width: 651px) {
	#responsive-title {
		display: none
	}

	header .navbar .greeting {
		position: absolute;
		top: 0;
		right: 0;
		padding: 10px 10px 0 0;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(5px)
	}

	header .navbar .greeting .header_sns {
		display: flex;
		gap: 30px 30px;
		justify-content: center;
		list-style: none;
		margin-bottom: 20px
	}

	@media screen and (max-width: 800px) {
		header .navbar .greeting .header_sns {
			gap: 18px 18px
		}
	}

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

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

	header {
		position: relative
	}

	header .navbar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 2%;
		transition: all 0.6s
	}

	header .navbar .logo {
		height: 75px
	}

	header .navbar .logo img {
		transform: translateY(-50%);
		height: 60px
	}

	header .navbar .menu {
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		width: 100%
	}

	header .navbar .menu li {
		display: inline-block;
		list-style: none;
		padding: 0 10px;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(5px)
	}

	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(--white);
		transition: all 0.3s ease;
		transform: translateX(-50%)
	}

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

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

	/* スクロール時の挙動 */
	header .navbar.sticky {
		padding: 0
	}

	header .sticky {
		background-color: var(--main-color);
		transition: 0.6s;
		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 .menu li a {
		color: var(--base-color)
	}

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

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

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

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

	header #fixed-logo.show {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, -50%)
	}
}

@media not all and (min-width: 651px) {
	.open .navbar {
		left: 0;
		opacity: 1
	}

	#responsive-title {
		display: block;
		height: 75px;
		position: relative
	}

	#responsive-title img {
		height: 65px;
		width: auto;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		cursor: pointer
	}

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

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

	.navbar .menu li {
		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: #e4e4e4
	}

	header .navbar .greeting .header_sns {
		gap: 20px;
		justify-content: center;
		list-style: none;
		margin: 10px 20px 10px 0;
		/*お問い合わせのgapを考慮*/
		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: #333;
		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(--base-color);
		border-radius: 50%;
		z-index: 12
	}

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

	.open .toggle-btn .circle {
		background-color: var(--text-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
	}

	.menu li a br {
		display: none
	}

	#fixed-logo {
		display: none
	}
}