/*********************************************************** PHONE */
	#TagWrapperInner {
		width: calc(100vw - 40px - 20px);
	}
	
	#TagHolderInner {
		justify-content: flex-start;
	}
	
	.TagBox {
		margin: 0px 28px 0px 0px;
		padding: 0px 0px 0px 16px;
	}
	.TagBoxOn {
		margin: 0px 28px 0px 0px;
		padding: 0px 0px 0px 16px;
	}

/*********************************************************** TABLET */
@media screen and (min-width: 800px) {
	#TagWrapperInner {
		width: calc(100vw - 60px - 20px);
	}
	
	#TagHolderInner {
		justify-content: flex-start;
	}
	
	.TagBox {
		margin: 0px 28px 0px 0px;
		padding: 0px 0px 0px 16px;
	}
	.TagBoxOn {
		margin: 0px 28px 0px 0px;
		padding: 0px 0px 0px 16px;
	}
}

/*********************************************************** PC */
@media screen and (min-width: 1120px) {
	#TagWrapperInner {
		width: calc(100vw - 100px - 20px);
	}
	
	#TagHolderInner {
		justify-content: flex-end;
	}
	
	.TagBox {
		margin: 0px 0px 0px 40px;
		padding: 0px 0px 0px 20px;
	}
	.TagBoxOn {
		margin: 0px 0px 0px 40px;
		padding: 0px 0px 0px 20px;
	}
}

/*********************************************************** PC-MAX */
@media screen and (min-width: var(--large-screen-width)) {
	#TagWrapperInner {
		width: calc(100vw - 100px);
	}
	
	#TagHolderInner {
		justify-content: flex-end;
	}
	
	.TagBox {
		margin: 0px 0px 0px 40px;
		padding: 0px 0px 0px 20px;
	}
	.TagBoxOn {
		margin: 0px 0px 0px 40px;
		padding: 0px 0px 0px 20px;
	}
}


/*********************************************************************************************************************************** TOP BANNER */
#TopBannerLoader {
	position: absolute;
	width: 30px;
	height: 30px;
	margin: auto;

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("assets/images/common/loading-icon.gif");
	
	opacity: 0.5;
}

.HomeTopBannerImageHolder {
	position: absolute;
	width: 100%;
	height: 100%;
	
	opacity: 0;
}

.HomeTopBannerImageBox {
	position: absolute;
	width: 100%;
	height: 100%;

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}


/*********************************************************************************************************************************** FILTER */
#TagFilterContainer {
	position: absolute;
	top: -40px;
	right: 0px;
	width: 125px;
	height: 80px;
}

#TagFilterButton {
	position: absolute;
	top: 40px;
	right: 0px;
	height: 40px;
	
	color: rgb(128, 128, 128);
	font-family: gothamlight;
	font-size: 14px;
	font-weight: 400;
	line-height: 40px;
	text-align: right;
	
	padding: 0px 55px 0px 0px;
	cursor: pointer;
}

#TagFilterIcon {
	position: absolute;
	top: 40px;
	right: 0px;
	width: 36px;
	height: 36px;
	
	cursor: pointer;
}

#TagFilterIconLine0 {
	position: absolute;
	top: 30%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: rgb(190, 190, 190);
}
#TagFilterIconLine1 {
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: rgb(190, 190, 190);
}
#TagFilterIconLine2 {
	position: absolute;
	top: 70%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: rgb(190, 190, 190);
}
#TagFilterIconLine3 {
	position: absolute;
	top: calc(18px);
	right: calc(36px * 20 / 100);
	width: calc(36px * 60 / 100);
	height: 1px;
	background: rgb(190, 190, 190);
	opacity: 0.0;
}

/*********************************************************************************************************************************** TAG */
#TagWrapper {
	position: relative;
	width: 100%;
	margin: 0px;
}

#TagWrapperInner {
	position: relative;
	max-width: calc(1250px - 100px);
	margin: 0px auto;
}

.TagSpacing {
	position: relative;
	width: 100%;
	min-height: 50px;
	margin: 0px;
}
#TagHolder {
	position: relative;
	width: 100%;
	min-height: 40px;
	margin: 0px 0px 40px 0px;
}

#TagHolderInner {
	position: relative;
	width: 100%;
	min-height: 40px;
	margin: 0px;
	
	display: none;
	flex-wrap: wrap;
	
	opacity: 0.0;
}

.TagBox {
	position: relative;
	
	display: inline-block;
	
	color: rgb(128, 128, 128);
	font-family: gothamlight;
	font-size: 14px;
	font-weight: 400;
	line-height: 40px;
	text-align: right;
	
	-webkit-transition: color 0.25s;
    transition: color 0.25s;
	
	cursor: pointer;
}
.TagBox:hover > .TagBoxCirle {
	background: rgb(200, 200, 200);
}

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

.TagBoxOn {
	position: relative;
	
	display: inline-block;
	
	color: rgb(128, 128, 128);
	font-family: gothamlight;
	font-size: 14px;
	font-weight: 400;
	line-height: 40px;
	text-align: right;
}

.TagBoxCirleOn {
	position: absolute;
	top: calc((40px - 10px) / 2);
	left: 0px;
	width: 10px;
	height: 10px;
	
	background: rgb(200, 200, 200);
	
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	
	border-style: solid;
	border-width: 1px;
	border-color: rgb(200, 200, 200);
	border-radius: 50%;
}








.IndexVideoBox {
	position: relative;
	width: 100%;
	max-height: calc((1250px - 100px) / 16 * 9);
}

#index-banner-video-box {
	position: absolute;
	width: 100vw;
	min-width: 1920px;
	height: calc(100vw * (9 / 16));
	min-height: calc(1920px * (9 / 16));
	
	top: 0px;
    left: 50%;

	-moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	
	background: rgb(50, 50, 50);
}

#index-banner-video {
	min-width: 100%;
	min-height: 100%;
}
























/*
.TagBoxBar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 1px;
	background-color: transparent;

	-webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
}
.TagBox:hover > .TagBoxBar{
	background-color: rgb(128, 128, 128);
}

.TagBoxBarOn {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 1px;
	background-color: rgb(128, 128, 128);
}
*/

/*********************************************************************************************************************************** tag mobile */
.TagWrapperMobile {
	position: relative;
	width: 100%;
	height: 70px;
	background: white;
}

.TagWrapperMobileInner {
	position: relative;
	width: 100%;
	height: 100%;
	margin: auto;

	display: flex;
	flex-wrap: wrap;
}

.TagBoxMobileLeft {
	position: relative;
	width: 70px;
	height: 100%;
	display: inline-block;
	cursor: pointer;
}

.TagBoxMobileLeftImage {
	position: absolute;
	top: 15%;
	left: 15%;
	width: 70%;
	height: 70%;

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

.TagBoxMobileRight {
	position: relative;
	width: 70px;
	height: 100%;
	display: inline-block;
	cursor: pointer;
}

.TagBoxMobileRightImage {
	position: absolute;
	top: 15%;
	left: 15%;
	width: 70%;
	height: 70%;

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

.TagBoxMobileMiddle {
	position: relative;
	width: calc(100% - 70px - 70px);
	height: 100%;
	overflow: hidden;
	display: inline-block;
}

#TagBoxMobileEntireHolder1 {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
}

#TagBoxMobileEntireHolder2 {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
}

.TagBoxMobile {
	position: absolute;
	top: 0px;
	height: 100%;
	
	font-family: gothamlight;
	font-size: 16px;
	font-weight: 600;
	line-height: 70px;
	text-align: center;
}