@charset "utf-8";
/* CSS Document */
				body{
			background-color: #313131;
			color: #FFFFFF;
		}
		.mainCont{
			width: 1260px !important;
			background-color: #313131;
			color: #FFFFFF;

		}
		.BaseBox{
			width: 100%;
			margin: 0 auto;
			font-size: 15px;
			letter-spacing: 2px;
			line-height: 25px;
			font-family: "Kaisei Opti", serif;
			background-color: #313131;
			color: #FFFFFF;
		}
		#HeaderBox{
			width: 100%;
			object-fit: contain; 
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.HeaderInnerBox{
			object-fit: contain;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		#HeaderRightBox{
			width: 96%;
			height: 100%;
			margin:  50px auto;
			object-fit: contain;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;	
		}
		#HeaderRightBox img{
			height: 50%;
			width: 100%;
			object-fit: contain;
			object-position: top;
		}
		#TitleImage{
			width: 100%;
			object-fit: contain;
			object-position: right;
			margin: 0 10px;
		}
		#HeaderRightText{
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			text-align: center;
			margin: 50px 0;
			font-size: 12px;
		}
		#VariationBox{
			width: 100%;
			text-align: center;
margin: 50px 0;
		}
		#VariationBox img{
			width: 100%;
		}
		.TitleText{
			font-size: 35px;
			line-height: 36px;
			margin: 0 0 50px;
text-align: center;
		}
		.SubText{
			font-size: 15px;
		}
		.TwoBox{
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		.LeftBox,
		.RightBox{
			width: 50%;
			height: 50%;
		}
		.LeftBox{
			aspect-ratio: 1;
		}
		.VariationListBox{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.VariationListBox div{
			width: calc(100% / 5 - 4px);
			aspect-ratio: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			letter-spacing: 1px;
			border: 1px solid #FFFFFF;
			border-radius: 10px;
			margin: 1px;
			cursor: pointer;
			transition: all .3s ease;
		}
		.VariationListBox div:hover{
			background-color: #FFFFFF;
			color: #313131;
			transition: all .3s ease;
		}
		.LeftBox{
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;
		    margin: 0px 10px 0 0;
		}
		.VariationBox{
			width: calc(100% / 2);
			aspect-ratio: 1;
			position: relative;
			overflow: hidden;
		}
		.VariationBox img{
			display: block;
			width: 100%;
			position: relative;
		}
		#TopLeftImage{
			top: 0;
			left: -100%;
		}
		#TopRightImage{
			top: -100%;
			left: 0;
		}
		#BottomLeftImage{
			bottom: -100%;
			left: 0;
		}
		#BottomRightImage{
			top: 0;
			right: -100%;
		}
		#TopLeftImage.Active{
			left: 0;
			transition: all .3s ease;
		}
		#TopRightImage.Active{
			top: 0;
			transition: all .3s ease;
		}
		#BottomLeftImage.Active{
			bottom: 0;
			transition: all .3s ease;
		}
		#BottomRightImage.Active{
			right: 0;
			transition: all .3s ease;
		}
		.ColorNameBox{
			position: absolute;
			bottom: 0;
			right: 5px;
			z-index: 100;
			color: #313131;
		}
		#SubIntroductionText{
			margin: 0 0 50px;
			border-bottom: 1px solid #808080;
			padding: 0 0 70px;
		}
		#SubIntroductionText p{
			margin: 50px 0;
		}
		.IntroductionTextBox{
			text-align: left;
			letter-spacing: 3px;
			font-size: 12px;
			line-height: 25px;
margin: 0 0 50px;
		}
		.SubIntroDuctionHeaderImage{
			display: flex;
			width: 100%;
		}
		.SubIntroDuctionHeaderImage img{
			flex-grow: 1;
			width: 1%;
			aspect-ratio: 1;
			object-fit: fill;
		}
		#SpecificationsBox{
			text-align: center;
			border-top: 1px solid #808080;
			margin: 100px 0;
			padding: 50px 0;
			font-size: 12px;
		}
		#SpecificationsBox ul{
			padding: 0;
		}
		#SpecificationsBox li{
			list-style: none;
		}
		.SpecBox{
			line-height: 25px;
			letter-spacing: 3px;
			margin: 0 0 40px;
		}
		.SpecName{
			font-weight: bold;
		}
		#GotoCart{
			position: fixed;
			bottom: 10px;
			right: 10px;
			width: 74px;
			background-color: #212121;
			color: #FFFFFF;
			border: 2px solid #FFFFFF;
			border-radius: 100%;
			aspect-ratio: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			letter-spacing: 3px;
			line-height: 12px;
			text-align: center;
		}
		.swiper-container{
			position: relative;
			width: 100%;
			margin: 50px 0 0;
		}
		.swiper-pagination{
			position: relative;
		}
		.custum .swiper-pagination-bullet{
			background: #FFFFFF;
		}
		.swiper-pagination-bullet{
			width: 10px;
			height: 10px;
			margin: 0 3px;
		}