@charset "utf-8";

/*----------------------------------------------------------------------> ▼ general <----------*/

@media (1367px <= width) {
	body {
		--header_height: 100px;
	}
}

@media (1151px <= width <= 1366px) or (height <= 768px) {
	body {
		--header_height: 80px;
	}
}

@media (width <= 1150px) {
	body {
		--header_height: 60px;		
	}
}

@media (width <= 400px) {
	body {
		--header_height: 50px;		
	}
}

body {
	padding-top: var(--header_height);
}


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

#header {
	width: 0;
	height: 0;
}

.header {
	position: fixed;
	top: 0;
	left: 0;	
	width: 100%;
	
	box-shadow: 0 0 2px #ddd;
	background: rgba(255, 255, 255, 1.95);
	z-index: 1000;
}

.header .frame {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header_height);
}

@media (1151px <= width) {
	.header {
		
	}
}

@media (width <= 1150px) or (height <= 768px) {
	.header {
		
	}
}

@media (width <= 768px) {
	.header .frame {
		justify-content: flex-end;
	}
}

/*----------------------------------------------------------------------> ▼ .header_logo <----------*/

.header_logo {
	font-size: 0;
}

.header_logo img {
	width: auto;
}

@media (1151px <= width) {
	.header_logo {
		height: 40px;
	}
}

@media (501px <= width <= 1150px) {
	.header_logo {
		height: 30px;
		max-height: 30px;
	}
}

@media (width <= 768px) {
	.header_logo {
		position: absolute;
		top: 15px;
		left: 50px;
	}
}

@media (401px <= width <= 500px) {
	.header_logo {
		top: 20px;
		left: 20px;
		height: 20px;
		max-height: 20px;		
	}
}

@media (width <= 400px) {
	.header_logo {
		left: 15px;
		height: 20px;
		max-height: 20px;		
	}
}

@media (height <= 768px) {
	.header_logo {
		height: 30px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.header_logo {
		transition: var(--transition);
	}
	
	.header_logo:hover {
		opacity: 0.75;
	}
}

/*----------------------------------------------------------------------------------------------- ▼ .header_menu --*/

.header_right {
	display: flex;
}

/*----------------------------------------------------------------------> ▼ .header_menu <----------*/

.header_menu {
	display: flex;
}

.header_menu a {
	position: relative;
	z-index: 200;
	transition: var(--transition);
	font-family: YuGo-B;
	color: var(--blue);
}

.header_menu a::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1px;
	background: var(--orange);
	transition: var(--transition);
}

body.en .header_menu a {
	font-family: HelveticaCond-B;
	letter-spacing: 0.05em;
}

@media (851px <= width) {
	.header_menu {
		display: block;
	}
}

@media (width <= 850px) {
	.header_menu {
		display: none;
	}
}

@media (1151px <= width) {
	.header_menu a {
		line-height: 40px;
		font-size: 16px;
	}
	
	.header_menu a:not(:first-child) {
		margin-left: 15px;
	}
	
	.header_menu a::before {
		margin-top: 35px;
	}
}

@media (width <= 1150px) {
	.header_menu a {
		line-height: 20px;
		font-size: 14px;
	}
	
	.header_menu a:not(:first-child) {
		margin-left: 10px;
	}
	
	.header_menu a::before {
		margin-top: 20px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.header_menu a, .header_menu a::before {
		transition: var(--transition);
	}
	
	.header_menu a:hover {
		color: var(--orange_2);
	}

	.header_menu a:hover::before {
		width: 100%;
	}
}

/*----------------------------------------------------------------------> ▼ .header_lang <----------*/

.header_lang {
	display: flex;
	flex-wrap: wrap;
}

.header_lang a {
	font-family: Montserrat-R, sans-serif;	
	font-style: italic;
	letter-spacing: 0;
}

@media (width <= 1024px) {
	.header_lang a {
		font-weight: 400;
	}	
}

@media (1151px <= width) {
	.header_lang {
		padding: 3px 0 1px;
	}
	
	.header_lang a {
		border-bottom: 2px solid #fff;
		line-height: 34px;
		font-size: 28px;
	}	
	
	.header_lang a:last-child {
		margin-left: 15px;
	}
	
	a.current_lang {
		border-bottom: 2px solid var(--blue);
	}
}

@media (width <= 1150px) {
	.header_lang {
		margin-top: 1px;
		margin-bottom: -2px;
	}

	.header_lang a {
		border-bottom: 1px solid #fff;
		line-height: 24px;		
		font-size: 24px;
	}
	
	.header_lang a:last-child {
		margin-left: 10px;
	}
	
	a.current_lang {
		border-bottom: 1px solid var(--blue);
	}
}

@media (501px <= width <= 768px) {
	.header_lang {
		margin-right: 25px;
	}

	.header_lang a:last-child {
		margin-left: 20px;
	}
}

@media (width <= 500px) {
	.header_lang {
		margin-right: 15px;
	}
	
	.header_lang a {
		line-height: 22px;
		font-size: 22px;
	}	
}

@media (hover: hover) and (pointer: fine) {
	.header_lang a {
		transition: var(--transition);
	}

	.header_lang a:hover {
		color: var(--orange);
		border-color: var(--orange);
	}
}

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

.smart_menu_button {
	position: relative;
	width: 25px;
	height: 20px;
	cursor: pointer;
}

.smart_menu_button div,
.smart_menu_button div::before,
.smart_menu_button div::after {
	position: absolute;
	width: 100%;
	height: 2px;
	background: var(--blue);
	border-radius: var(--border_radius);
}

.smart_menu_button div::before,
.smart_menu_button div::after {
	content: '';
	display: block;
}

.smart_menu_button div {
	top: 50%;
}

.smart_menu_button div::before {
	top: -5px;
}

.smart_menu_button div::after {
	top: 5px;
}

@media (769px <= width) {
	.smart_menu_button {
		display: none;
	}
}

@media (width <= 768px) {
	.smart_menu_button {
		display: block;
	}
}