@media(min-width: 1928px) { /* 1920 */
	html {
		font-size: 16px;
	}
}
@media(min-width: 1609px) and (max-width: 1927px) { /* 1800 */
	html {
		font-size: .83vw;
	}
}
@media(min-width: 1454px) and (max-width: 1608px) { /* 1600 */
	html {
		font-size: 1vw;
	}
}
@media(min-width: 1300px) and (max-width: 1453px) { /* 1440, 1366 */
	html {
		font-size: 1.11vw;
	}
}
@media(min-width: 1146px) and (max-width: 1299px) { /* 1280 */
	html {
		font-size: 1.25vw;
	}
}
@media(min-width: 993px) and (max-width: 1145px) { /* 1024 */
	html {
		font-size: 1.367vw;
	}
}
@media(min-width: 822px) and (max-width: 992px) {  /* 900 */
	html {
		font-size: 1.91vw;
	}
}
@media(min-width: 651px) and (max-width: 821px) { /* 768 */
	html {
		font-size: 2.083vw; 
	}
}

@media(min-width: 1609px) {
	.container {
		max-width: 1280px;
		width: 66.39%;
	}
}
@media(min-width: 1301px) and (max-width: 1608px) {
	.container {
		width: 82%;
	}
}
@media(min-width: 993px) and (max-width: 1300px) {
	.container {
		width: 90%;
	}
}
@media(max-width: 992px) {
	.container {
		width: 92%;
	}
}

.for_mob {
	display: none;
}
@media(min-width: 993px) {
	.for_mob_tab,
	.for_tab {
		display: none;
	}
}

/* header */
@media(min-width: 1454px) {
	#header .flx,
	#header .menu {
		gap: 0 2em;
	}
}
@media(min-width: 993px) and (max-width: 1453px) {
	#header .flx {
		gap: 0 1.5em;
	}
	#header .menu {
		gap: 0 1em;
	}
}
@media(min-width: 993px) {
	main{
		padding-top: 6.25em;
	}
	.button.skip {
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 12;
	}
	.admin-bar .button.skip {
		margin-top: 42px;
	}
	.button.skip:not(:focus-visible) {
		visibility: hidden;
		transform: translate(-50%, -100%);
	}
	.button.skip:focus-visible {
		transform: translate(-50%, 0%);
	}

	/* header */
	#header {
		z-index: 11;
	}
	body:not(.fixm) #header{
		padding-top: 2em;
		padding-bottom: 2em;
	}
	body.fixm #header{
		padding-top: .75em;
		padding-bottom: .75em;
	}
	body:not(.fixm) #header::before {
		opacity: 0;
	}
	body.fixm #header::before {
		backdrop-filter: blur(2rem);
	}
	body.fixm #header .logoBox{
		opacity: 0;
	}
	#header .logoShortBox{
		transition: opacity .36s ease-in-out, top .2s ease-in-out;
	}
	body:not(.fixm) #header .logoShortBox{
		opacity: 0;
		top: 100%;
	}
	body.fixm #header .logoShortBox{
		top: 0;	
	}
	#header .menu {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	#header .menu-item-has-children {
		position: relative;
	}
	#header .menu-item-has-children > .pr {
		z-index: 2;
	}
	#header .menu-item-has-children > .pr > svg{ 
		display: inline-block;
		margin-left: .4375em;
		width: .6875em;
		vertical-align: .125em;
	}
	#header .sub-menu{
		background-color: var(--color3);
		position: absolute;		
		top: 100%;
		transition: all .3s ease-in-out;
		padding: 1.5em;
		min-width: calc(100% + 3em);
		border-radius: .5em;
		width: max-content;
        max-width: 200%;
	}
	#header .menu-item-has-children:not(:last-child) .sub-menu{
		left: -1.5em;
	}
	#header .menu-item-has-children:last-child .sub-menu{
		right: -1.5em;
	}
	#header .sub-menu:before{
		content: '';
		display: block;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 100%;
	}
	
	body:not(.fixm) #header .sub-menu{
		margin-top: 1em;
	}
	body:not(.fixm) #header .sub-menu:before{
		height: 1em;
	}
	body.fixm #header .sub-menu{
		margin-top: .25em;
	}
	body.fixm #header .sub-menu:before{
		height: .25em;
	}
	#header .menu-item-has-children:not(:hover) .sub-menu{
		opacity: 0;
		overflow: hidden;
		transform: translateY(-100%);
	}
	body:not(.fixm) #header .menu > li > a,
	body:not(.fixm) #header .menu > li > div > a {
		color: var(--color2);
	}
	body.fixm #header .menu > li > a,
	body.fixm #header .menu > li > div > a {
		color: var(--color3);
	}
	body.fixm #header .menu svg * {
		fill: var(--color3);
	}
	#header .sub-menu a{
		color: var(--color2);
		transition: opacity .2s ease-in-out;
	}
	#header .sub-menu a:hover{
		opacity: .7;
	}
	#header .sub-menu > li:not(:first-child){
		margin-top: .875em;
	}
}

@media(min-width: 783px) and (max-width: 992px) {
	body:not(.admin-bar) #header .menuBox{ 
		height: 100dvh;
		top: 0;
	}
	body.admin-bar  #header .menuBox{ 
		height: calc(100dvh - 32px);
		top: 32px;
	}
}

@media(min-width: 783px) {
	body:not(.admin-bar) #header {
		top: 0;
	}
	body.admin-bar #header,
	body.admin-bar .b_menu_popup {
		top: 32px;
	}
}

@media(max-width: 992px) {
	main{
		padding-top: 4.5em;
	}
	
	body:not(.fixm) #header .menuBox {
		padding-top: calc(4.625rem - 1px);
	}
	body.fixm #header .menuBox {
		padding-top: calc(3.25rem - 1px);
	}
	#header .menuBoxShadow{
		padding: 1rem 4%;
	}
	#header .menuBoxShadow nav{
		padding: 3rem;
	}
	
	#header .buttonBox{
		margin-right: -.75em;
	}
	body.fixm #header .buttonBox{
		margin-top: -.4375em;
		margin-bottom: -.4375em;
	}
	#header .menuBox .motion_js {
		top: 3rem;
		right: 3rem;
	}

	#header .menu > li:not(:last-child) {
		margin-bottom: 2.25rem;
	}
}