/*********************************************************** phone */
	#TopBarWrapper2 {
		width: calc(100% - 40px);
	}
	
	#TopBarWrapper3Inner {
		width: calc(100% - 40px);
	}

/*********************************************************** tablet */
@media screen and (min-width: 800px) {
	#TopBarWrapper2 {
		width: calc(100% - 60px);
	}
	
	#TopBarWrapper3Inner {
		width: calc(100% - 60px);
	}
}


/*********************************************************** web */
@media screen and (min-width: 1120px) {
	#TopBarWrapper2 {
		width: calc(100% - 100px);
	}
	
	#TopBarWrapper3Inner {
		width: calc(100% - 100px);
	}
}


/*********************************************************** web-max */
@media screen and (min-width: var(--large-screen-width)) {
	#TopBarWrapper2 {
		width: calc(100% - 100px);
	}
	
	#TopBarWrapper3Inner {
		width: calc(100% - 100px);
	}
}
/********************************************************************************************************************/


#TopBarWrapper {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 79px;
	
	background: white;
	margin: 0px;
}

#TopBarWrapper2 {
	position: relative;
	max-width: calc(1250px - 100px);
	height: 79px;
	
	background: white;
	margin: auto;
}

#TopBarWrapper3 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 80px;
	
	background: white;
	margin: auto;
}

#TopBarWrapper3Inner {
	position: relative;
	max-width: calc(1250px - 100px);
	height: 80px;
	
	background: transparent;
	margin: auto;
	
	display: flex;
	justify-content: flex-start;
}

#TopBarWrapper3TopLine {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 1px;
	
	background: rgb(240, 240, 240);
	margin: auto;
}

#TopBarWrapper3BottomLine {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 1px;
	
	background: rgb(240, 240, 240);
	margin: auto;
}

#TopLogo {
	position: absolute;
	top: calc((80px - 30px) / 2);
	left: 0px;
	width: calc(30px * (160 / 50));
	height: 30px;

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("assets/images/common/top-logo.svg");
}

#TopMenuButton {
	position: absolute;
	top: calc((80px - 36px) / 2);
	right: 0px;
	width: 36px;
	height: 36px;
	display: block;
	cursor: pointer;
}
/*
#TopMenuButton:hover > #TopMenuButtonLine1 {
	top: calc(13px - 2px);
}
#TopMenuButton:hover > #TopMenuButtonLine2 {
	top: calc(23px + 2px);
}*/

#TopMenuButtonLine1 {
	position: absolute;
	top: 14px;
	left: 0px;
	width: 36px;
	height: 1px;
	
	background: rgb(190, 190, 190);
	/*
	-webkit-transition: top 0.25s;
    transition: top 0.25s;
	*/
}

#TopMenuButtonLine2 {
	position: absolute;
	top: 22px;
	left: 0px;
	width: 36px;
	height: 1px;
	
	background: rgb(190, 190, 190);
	/*
	-webkit-transition: top 0.25s;
    transition: top 0.25s;
	*/
}

.TopBarMenuText {
	position: relative;
	
	font-family: ebgaramond;
	font-size: 21px;
	font-weight: 400;
	line-height: 80px;
	text-align: left;
	color: rgb(128, 128, 128);
	
	padding: 0px 45px 0px 20px;
	display: inline-block;
	
	cursor: pointer;
}
.TopBarMenuText:hover > .TopBarMenuTextDot{
	background: rgb(200, 200, 200);
}

.TopBarMenuTextDot {
	position: absolute;
	top: calc((80px - 6px) / 2);
	left: 0px;
	width: 6px;
	height: 6px;
	
	background: transparent;
	
	border-style: solid;
	border-width: 1px;
	border-color: rgb(200, 200, 200);
	border-radius: 50%;
	
	-webkit-transition: background-color 0.25s;
    transition: background-color 0.25s;
}