/*********************************************************** SMALL SCREEN */
	#index-banner {
		height: calc(100vh - 100px);
	}
	
	#index-banner-logo {
		width: 130px;
		height: calc(130px * (376 / 246));
		top: 100px;
		
		display: block;
	}
	
	#index-banner-social-media {
		display: none;
	}
	
	#index-products-overview-title {
		display: none;
	}
	
	.index-products-overview-box {
		width: calc((100% - 1px) / 2);
		height: calc(100vw / 2);
		max-height: none;
		margin: 1px 0px 0px 0px;
	}
	
	.index-spacing-m {
		display: none;
	}
	
	#index-philosophy-title {
		text-align: center;
	}
	
	#index-philosophy-content {
		display: none;
	}
	
	#index-philosophy-image-2 {
		display: none;
	}
	
	.index-philosophy-content-m {
		display: block;
	}
	
	.index-philosophy-image-m {
		height: calc(100vw / 2);
		max-height: none;
	}
	
	#index-choice-content {
		display: none;
	}
	
	.index-choice-image-m {
		height: calc(100vw / 2);
		max-height: none;
	}
	
	.index-philosophy-text-title-m {
		width: 180px;
		height: calc(180px * (150 / 280));
	}
	
	.index-choice-text-title-m {
		width: 180px;
		height: calc(180px * (70 / 280));
	}

/*********************************************************** MEDIUM SCREEN */
@media screen and (min-width: 800px) {
	#index-banner {
		height: 100vh;
	}
	
	#index-banner-logo {
		width: 170px;
		height: calc(170px * (376 / 246));
		top: calc((80vh - (170px * (376 / 246))) / 2);
		
		display: none;
	}
	
	#index-banner-social-media {
		display: block;
	}
	
	#index-products-overview-title {
		display: block;
	}
	
	.index-products-overview-box {
		width: calc((100% / 2) - 6px);
		height: calc( (((100vw - 240px - 80px - 80px) / 2) - 12px) * (390 / 490) );
		max-height: calc( ((980px / 2) - 6px) * (390 / 490) );
		margin: 0px 0px 12px 0px;
	}
	
	.index-spacing-m {
		display: block;
	}
	
	#index-philosophy-title {
		text-align: center;
	}
	
	#index-philosophy-content {
		display: none;
	}
	
	#index-philosophy-image-2 {
		display: block;
	}
	
	.index-philosophy-content-m {
		display: block;
	}
	
	.index-philosophy-image-m {
		height: calc( (((100vw - 240px - 80px - 80px) / 2) - 12px) );
		max-height: none;
	}
	
	#index-choice-content {
		display: none;
	}
	
	.index-choice-image-m {
		height: calc( (((100vw - 240px - 80px - 80px) / 2) - 12px) );
		max-height: none;
	}
	
	.index-philosophy-text-title-m {
		width: 200px;
		height: calc(200px * (150 / 280));
	}
	
	.index-choice-text-title-m {
		width: 200px;
		height: calc(200px * (70 / 280));
	}
}


/*********************************************************** LARGE SCREEN */
@media screen and (min-width: 1180px) {
	#index-banner {
		height: 100vh;
	}
	
	#index-banner-logo {
		width: 170px;
		height: calc(170px * (376 / 246));
		top: calc((80vh - (170px * (376 / 246))) / 2);
		
		display: none;
	}

	#index-banner-social-media {
		display: block;
	}
	
	#index-products-overview-title {
		display: block;
	}
	
	.index-products-overview-box {
		width: calc((100% / 2) - 6px);
		height: calc( (((100vw - 240px - 80px - 80px) / 2) - 12px) * (390 / 490) );
		max-height: calc( ((980px / 2) - 6px) * (390 / 490) );
		margin: 0px 0px 12px 0px;
	}
	
	.index-spacing-m {
		display: block;
	}
	
	#index-philosophy-title {
		text-align: left;
	}
	
	#index-philosophy-content {
		display: flex;
		flex-wrap: wrap;
	}
	.index-philosophy-content-m {
		display: none;
	}
	
	#index-choice-content {
		display: flex;
		flex-wrap: wrap;
	}
	
	#index-philosophy-image-2 {
		display: block;
	}
	
	.index-philosophy-text-title-m {
		width: 230px;
		height: calc(230px * (150 / 280));
	}
	
	.index-choice-text-title-m {
		width: 230px;
		height: calc(230px * (70 / 280));
	}
}


/*********************************************************** INDEX */


/*********************************************************** BANNER */
#index-banner {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	background: transparent;
	margin: 0px;
	
	z-index: 9999;
	overflow: hidden;
}

#index-banner-logo {
	position: absolute;
	
	margin: 0px;
	
    left: 50%;

	-moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/common/logo-index-banner-white.svg");
	
	pointer-events: none;
}

#index-side-logo {
	position: absolute;
	top: 55px;
	left: 61px;
	width: 118px;
	height: calc(118px * (236/156));
	margin: 0px;
	
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-image: url("../assets/images/common/logo-index-banner-white.svg");
}

#index-content {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0px;
}


/*********************************************************** SHARE */
#index-section-title {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0px 0px 40px 0px;
	
	font-family: 'Noto Sans SC', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	color: #959595;
	letter-spacing: 6px;
	line-height: normal;
	text-align: left;
	text-decoration: none;
}


/*********************************************************** INDEX PRODUCT OVERVIEW */
#index-products-overview-wrapper {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0px;
}

#index-products-overview-title {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0px 0px 40px 0px;
	
	font-family: 'Noto Sans SC', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	color: #959595;
	letter-spacing: 6px;
	line-height: normal;
	text-align: left;
	text-decoration: none;
}

#index-products-overview-content {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0px;
	
	display: flex;
	flex-wrap: wrap;
	
	justify-content: space-between;
}

.index-products-overview-box {
	position: relative;
	top: 0px;
	left: 0px;
	
	display: inline-block;
	cursor: pointer;
	
	overflow: hidden;
}
.index-products-overview-box:hover .index-products-overview-image {
	transform: scale(1.05);
}

.index-products-overview-image {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	margin: 0px;
	
	display: inline-block;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	
	transform: scale(1.005);
	
	-webkit-transition: transform 0.5s;
	transition: transform 0.5s;
}

#index-products-overview-0 {
	background-image: url("../assets/images/stillimage/stillimage-2021-10-16-12-55-50-1.jpg");
}
#index-products-overview-1 {
	background-image: url("../assets/images/stillimage/stillimage-2021-10-16-12-56-26-1.jpg");
}
#index-products-overview-2 {
	background-image: url("../assets/images/stillimage/stillimage-2021-10-16-12-57-12-1.jpg");
}
#index-products-overview-3 {
	background-image: url("../assets/images/stillimage/stillimage-2021-10-16-12-57-44-1.jpg");
}

.index-products-overview-title {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 45px;
	height: calc(45px * (105 / 45));
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#index-products-overview-title-0 {
	background-image: url("../assets/images/index/product-overview-title-0-sc.svg");
}
#index-products-overview-title-1 {
	background-image: url("../assets/images/index/product-overview-title-1-sc.svg");
}
#index-products-overview-title-2 {
	background-image: url("../assets/images/index/product-overview-title-2-sc.svg");
}
#index-products-overview-title-3 {
	background-image: url("../assets/images/index/product-overview-title-3-sc.svg");
}


/********************************************************************************************* INDEX PHILOSOPHY PC */
#index-philosophy-wrapper {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0px;
}

#index-philosophy-title {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0px;
	
	font-family: 'Noto Sans SC', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	color: #959595;
	letter-spacing: 6px;
	line-height: normal;
	text-decoration: none;
}

#index-philosophy-content {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0px;
}

.index-philosophy-container-0 {
	position: relative;
	top: 0px;
	left: 0px;
	width: calc(100% * (400 / 920));
	height: calc( ((100vw - 240px - 80px - 80px) * (400 / 920)) * (575 / 430) );
	max-height: calc( (980px * (400 / 920)) * (575 / 430) );
	
	margin: 0px;
	overflow: hidden;
}

.index-philosophy-container-1 {
	position: relative;
	top: 0px;
	left: 0px;
	width: calc(100% * (520 / 920));
	height: calc( ((100vw - 240px - 80px - 80px) * (400 / 920)) * (575 / 430) );
	max-height: calc( (980px * (400 / 920)) * (575 / 430) );
	margin: 0px;
}

#index-philosophy-text-container {
	position: absolute;
	left: 70px;
	width: calc(100% - 70px);
	margin: 0px;
	
	top: 50%;
	-moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#index-philosophy-text-container-inner {
	position: relative;
	left: 0px;
	width: 100%;
	margin: 0px;
}

.index-philosophy-text-title {
	position: relative;
	left: 0px;
	width: 230px;
	height: calc(230px * (150 / 280));
	margin: 0px;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/index/index-philosophy-text-title-sc.svg");
}

#index-philosophy-text {
	position: relative;
	left: 0px;
	width: 100%;
	margin: 0px;
	
	font-family: 'Noto Sans SC', sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 300;
	color: #707070;
	letter-spacing: 3px;
	line-height: 26px;
	text-align: left;
	text-decoration: none;
}

#index-philosophy-image-2 {
	position: absolute;
	left: calc(100% - 140px);
	width: 300px;
	height: calc(300px * (440 / 290));
	margin: 0px;
	
	top: 50%;
	-moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	
	overflow: hidden;
}

/********************************************************************************************* INDEX PHILOSOPHY M */
.index-philosophy-content-m {
	position: relative;
	left: 0px;
	width: 100%;
	margin: 0px;
}

.index-philosophy-text-title-m {
	position: relative;
	left: 0px;
	margin: 0px auto 20px auto;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/index/index-philosophy-text-title-sc.svg");
}

.index-philosophy-text-m {
	position: relative;
	left: 0px;
	width: calc(100% - 100px);
	margin: 0px auto;
	
	font-family: 'Noto Sans SC', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	color: #707070;
	letter-spacing: 3px;
	line-height: 26px;
	text-align: center;
	text-decoration: none;
}

.index-philosophy-image-container-m {
	position: relative;
	width: 100%;
	margin: 0px;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.index-philosophy-image-m {
	position: relative;
	width: calc((100% - 1px) / 2);
	
	margin: 0px;
	overflow: hidden;
	
	display: inline-block;
}


/********************************************************************************************* INDEX CHOICE PC */
#index-choice-wrapper {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0px;
}

#index-choice-content {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0px;
}

.index-choice-container-0 {
	position: relative;
	top: 0px;
	left: 0px;
	width: calc(100% * (400 / 920));
	height: calc( ((100vw - 240px - 80px - 80px) * (460 / 920)) * (505 / 488) );
	max-height: calc( (980px * (460 / 920)) * (505 / 488) );
	margin: 0px;
}

.index-choice-container-1 {
	position: relative;
	top: 0px;
	left: 0px;
	width: calc(100% * (460 / 920));
	height: calc( ((100vw - 240px - 80px - 80px) * (460 / 920)) * (505 / 488) );
	max-height: calc( (980px * (460 / 920)) * (505 / 488) );
	
	margin: 0px;
	overflow: hidden;
}

#index-choice-text-container {
	position: absolute;
	left: 0px;
	width: 100%;
	margin: 0px;
	
	top: 50%;
	-moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#index-choice-text-container-inner {
	position: relative;
	left: 0px;
	width: 100%;
	margin: 0px;
}

.index-choice-text-title {
	position: relative;
	left: 0px;
	width: 230px;
	height: calc(230px * (75 / 280));
	margin: 0px;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/index/index-choice-text-title-sc.svg");
}

#index-choice-text {
	position: relative;
	left: 0px;
	width: 100%;
	margin: 0px;
	
	font-family: 'Noto Sans SC', sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 300;
	color: #707070;
	letter-spacing: 3px;
	line-height: 26px;
	text-align: left;
	text-decoration: none;
}

.index-learn-more {
	position: relative;
	left: 0px;
	
	width: calc(27px * (146 / 40));
	height: 27px;
	
	margin: 0px;
	padding: 0px 0px 0px 0px;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/common/learn-more-sc.svg");
	
	/*
	font-family: 'Noto Sans SC', sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 300;
	color: #525252;
	letter-spacing: 8px;
	line-height: 44px;
	text-align: left;
	text-decoration: none;
	*/
	
	display: inline-block;
}
.index-learn-more:hover .index-learn-more-line-black {
	width: 100%;
}

.index-learn-more-line {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 1px;
	margin: 0px;
	background: rgb(235, 235, 235);
}
.index-learn-more-line-black {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 50%;
	height: 1px;
	margin: 0px;
	background: black;
	
	-webkit-transition: width 0.2s;
	transition: width 0.2s;
}

.index-learn-more-button-container-m {
	position: relative;
	width: 100%;
	margin: 0px;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/********************************************************************************************* INDEX CHOICE M */
.index-choice-text-title-m {
	position: relative;
	left: 0px;
	margin: 0px auto 20px auto;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: url("../assets/images/index/index-choice-text-title-sc.svg");
}

.index-choice-image-m {
	position: relative;
	width: 100%;
	margin: 0px;
	overflow: hidden;
}





.index-floating-image-holder {
	position: absolute;
	top: -50px;
	left: 0px;
	width: 100%;
	height: calc(100% + 100px);
	margin: 0px;
	
	/*transform: scale(1.25);*/
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}