@charset "utf-8";

/*----------------------------------------------------------------------> ▼ .header <--*/

header {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ddd;
	background: #fff;
}

@media (769px <= width) {
	header {
		padding: 15px 80px 15px 17px;
	}
}

@media (width <= 768px) {
	header {
		padding: 0 75px 0 15px;
	}
}

/*----------------------------------------------------------------------> ▼ .header_title <--*/

.header_title {
	border: 0px solid #f00;
	font-family: Notosans-M;
}

@media (769px <= width) {
	.header_title {
		font-size: 20px;
		line-height: 50px;
	}
}

@media (width <= 768px) {	
	.header_title {
		font-size: 16px;
		line-height: 60px;
	}
}

/*----------------------------------------------------------------------> ▼ .header_account <--*/

.header_account {
	display: flex;
	border: 0px solid #f00;
}

@media (769px <= width) {
	.header_thumbnail {
		display: block;
		width: 50px;
		aspect-ratio: 1 / 1;
		margin-right: 15px;
		border: 1px solid #eee;
		border-radius: 9999px;
	}

	.header_name {
		margin: 9px 0 4px;
	}
}

@media (width <= 767px) {
	.header_account {
		display: none;
	}
}

@media (hover: hover) and (pointer: fine) {
	.header_thumbnail:hover {
		background: #fff;
	}
}

/*----------------------------------------------------------------------> ▼ .smart_menu_button <--*/

.smart_menu_button {
	position: fixed;
	top: 0;
	right: 0;
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	z-index: 1000;
}

.smart_menu_button div,
.smart_menu_button div::before,
.smart_menu_button div::after {
	position: absolute;
	width: 40px;
	height: 4px;
	border-radius: 9999px;
	background: #ddd;
	transition: var(--transition);
}

.smart_menu_button div::before,
.smart_menu_button div::after {
	content: '';
}
	
.smart_menu_button div::before {
	top: -10px;
	transform: rotate(-180deg);
}

.smart_menu_button div {
	top: calc(50% - (4px / 2));
	left: 20px;
}

.smart_menu_button div::after {
	top: 10px;
	transform: rotate(180deg);
}

.smart_menu_button_active div::before,
.smart_menu_button_active div::after {
	top: -1px;
	height: 5px;
}

.smart_menu_button_active div::before {
	transform: rotate(45deg);
}

.smart_menu_button_active div {
	background: #fff;
}

.smart_menu_button_active div::after {
	transform: rotate(-45deg);
}

@media (width <= 768px) {
	.smart_menu_button {
		width: 60px;
		height: 60px;
	}
	
	.smart_menu_button div,
	.smart_menu_button div::before,
	.smart_menu_button div::after {
		width: 40px;
		height: 4px;
	}
	
	.smart_menu_button div {
		left: 5px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.smart_menu_button:hover div,
	.smart_menu_button:hover div::before,
	.smart_menu_button:hover div::after {
		background: var(--theme_hover);
	}
	
	.smart_menu_button_active:hover div {
		background: #fff;
	}
}

/*----------------------------------------------------------------------> ▼ .go_header, .go_footer <--*/

.go_header, .go_footer {
	display: none;
	position: fixed;
	right: 15px;
	width: 50px;
	height: 50px;
	border: 1px solid #666;
	border-radius: 5px;
	z-index: 500;
}

.go_header {
	bottom: 80px;
	background: url(/asset/image/icon/go_header.png?m=20000101) no-repeat center / 65%, #fff;
}

.go_footer {
	bottom: 15px;
	background: url(/asset/image/icon/go_footer.png?m=20000101) no-repeat center / 65%, #fff;
}

@media (width <= 500px) {
	.go_header, .go_footer {
		display: none;
	}
}

@media (hover: hover) and (pointer: fine) {
	.go_header,
	.go_footer {
		transition: var(--transition);
	}
	
	.go_header:hover {
		background: url(/asset/image/icon/go_header.png?m=20000101) no-repeat center / 65%, #444;
	}
	
	.go_footer:hover {
		background: url(/asset/image/icon/go_footer.png?m=20000101) no-repeat center / 65%, #444;
	}	
}