@charset 'UTF-8';
#kv {
	position: relative;
	width: 100%;
	height: 100vh;
	max-height: 55.78947vw;
	overflow: hidden;
}
.kvWrapper {
	position: relative;
	width: 100%;
	height: 100%;
}
.kvMovie {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	max-height: 55.78947vw;
	transform: translate(-50%, -50%);
}
.kvFrame {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*
	height: 55.8vw;
	max-height: calc(100vh - 50px);
	background-color: rgba(0,0,0,0.2);
	*/
	max-height: 55.78947vw;
	background-image: url("../images/_svg/logoWhite.svg"), url("../images/_svg/maskLensKvWide.svg");
	background-position: center center, center center;
	background-size: 70% auto, 100% auto;
}
.kvFrame > a {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 74%;
	height: 20%;
	transform: translate(-50%, -50%);
}
.linkFilterNow {
	position: absolute;
	bottom: 3vw;
	right: 6vw;
	width: 15vw;
	background-position: center top;
}
/*
.linkFilterNow::after {
	content: "";
	display: block;
	position: absolute;
	top: -2.8vw;
	left: 50%;
	width: 15vw;
	height: 2.8vw;
	background-image: url("../images/_svg/linkFilterNowNew.svg");
	transform: translateX(-50%);
}
*/
.linkFilterNow > a {
	display: block;
	border: 1px solid #fff;
	background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
}
.linkFilterNow > a.hover {
	border: 1px solid #e50012;
	background: linear-gradient(0deg, rgba(229,0,18,0) 0%, rgba(229,0,18,0) 50%, rgba(229,0,18,1) 50%, rgba(229,0,18,1) 100%);
}
.linkFilterNow > a > span {
	display: block;
}
.linkFilterNow > a > span:nth-child(1) {
	width: 15vw;
	height: 2.8vw;
	background-image: url("../images/_svg/linkFilterNowLogo.svg");
	background-size: contain;
}
.linkOnlineShop {
	position: absolute;
	bottom: 10vw;
	right: 6vw;
	width: 15vw;
	background: #fff;
}
.linkOnlineShop::after {
	content: "直営オンラインストア";
	display: block;
	position: absolute;
	top: -2vw;
	left: 50%;
	width: 15vw;
	height: 2.8vw;
	transform: translateX(-50%);
}
.linkOnlineShop > a {
	display: block;
	width: 15vw;
	height: 2.8vw;
}
.linkOnlineShop > a.hover {
	opacity: 0.5;
}
@media screen and (max-width: 800px) {
	#kv,
	.kvMovie,
	.kvFrame {
		max-height: inherit!important;
	}
	.kvFrame {
		max-height: inherit;
		background-image: url("../images/_svg/logoWhite.svg"), url("../images/_svg/maskLensKvNarrow.svg");
		background-size: 80% auto, cover;
	}
	.kvFrame > a {
		width: 88%;
		height: 24%;
	}
	.linkFilterNow {
		position: absolute;
		bottom: 6vw;
		/*
		right: 50%;
		*/
		right: 52.5%;
		width: 45vw;
		/*
		transform: translateX(50%);
		*/
	}
	/*
	.linkFilterNow::after {
		top: -8.4vw;
		left: 50%;
		width: 45vw;
		height: 8.4vw;
	}
	*/
	.linkFilterNow > a > span:nth-child(1) {
		width: 45vw;
		height: 8.4vw;
	}
	.linkOnlineShop {
		position: absolute;
		bottom: 6vw;
		right: 2.5%;
		width: 45vw;
	}
	.linkOnlineShop::after {
		top: -5vw;
		left: 50%;
		width: 45vw;
		height: 8.4vw;
	}
	.linkOnlineShop > a {
		width: 45vw;
		height: 8.4vw;
	}
}

.titleSvg {
	line-height: 1;
}
.titleSvg img {
	width: auto;
	height: 1em;
}
/*gallery*/
#gallery .galleryWrapper,
#gallery .galleryWrapper ul,
#gallery .galleryWrapper ul li {
	line-height: 1!important;
}
#gallery .galleryWrapper {
	width: 100%;
	overflow-x: hidden;
}
#gallery .slideGalleryWrapper ul {
	flex-wrap: nowrap;
	width: 200vw;
}
#gallery .galleryWrapper ul li,
#gallery .galleryWrapper ul li a {
	width: 25vw;
	height: 25vw;
}
#gallery .galleryWrapper ul li a > img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
}
#gallery .galleryWrapper #slideTop {
	margin-left: -100vw;
	animation: slideshowToLeft 120s linear infinite;
}
#gallery .galleryWrapper #slideBottom {
	margin-left: -100vw;
	animation: slideshowToRight 120s linear infinite;
}
#gallery .galleryWrapper .hoverInfo li > a > span.info {
	padding-right: 0;
}
@media screen and (max-width: 800px) {
	.gallery #gallery .galleryWrapper ul li,
	.gallery #gallery .galleryWrapper ul li a {
		width: 50vw;
		height: 50vw;
	}
}
@keyframes slideshowToLeft {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100vw);
	}
}
@keyframes slideshowToRight {
	0% {
		transform: translateX(100vw);
	}
	100% {
		transform: translateX(0);
	}
}
#gallery .flexInfo {
	justify-content: space-between;
}
@media screen and (max-width: 800px) {
	#gallery .flexInfo {
		flex-direction: column;
		justify-content: center;
	}
	#gallery .flexInfo > span {
		display: block;
		padding: 0 0 1em;
	}
}
/*product*/
#product li > a,
#creation li > a {
	display: block;
	position: relative;
	width: 100%;
	padding-top: 41%;
	background-position: right center;
	background-size: contain;
	overflow: hidden;
}
/*
#product li.bgYellowGreen {
	width: 100%;
}
#product li.bgYellowGreen > a {
	padding-top: 20.5%;
	background-position: right 25% center;
}
*/
.hoverInfo li {
	overflow: hidden;
}
.hoverInfo li > a > span {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 1.5em;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.hoverInfo li > a > span.name,
.hoverInfo li > a.hover > span.info {
	top: 0;
}
.hoverInfo li > a > span.name {
	background-size: contain;
	background-position: left top;
}
.hoverInfo li > a.hover > span.name {
	top: -100%;
}
.hoverInfo li > a > span.info {
	top: 100%;
	/*
	padding-right: 30%;
	*/
	padding-right: 25%;
}
#product li > a > span.new,
#creation li > a > span.new {
	bottom: 0;
	background-image: url("../images/_svg/brandNavNew.svg");
	background-position: right bottom;
	background-size: contain;
}
/*20210603*/
#product li > a > span.newLeft,
#creation li > a > span.newLeft {
	background-position: left -430px bottom;
}
#product li > a > span.newTop,
#creation li > a > span.newTop {
	background-position: right top -150px;
}
#product li > a > span.newRed,
#creation li > a > span.newRed {
	background-image: url("../images/_svg/brandNavNewRed.svg");
}
@media screen and (min-width: 801px) and (max-width: 1000px) {
	/*20210603*/
	#product li > a > span.newLeft,
	#product li > a > span.newLeft {
		background-position: left -43vw bottom;
	}
	#product li > a > span.newTop,
	#creation li > a > span.newTop {
		background-position: right top -15vw;
	}
}

@media screen and (max-width: 800px) {
	#product .flexList2,
	#creation .flexList2,
	#punch .flexList2 {
		width: 50%;
	}
	#product .flexList3,
	#creation .flexList3 {
		width: 33.333333%;
		width: calc(100%/3);
	}
	#product .flexList3 > a > .name,
	#creation .flexList3 > a > .name {
		width: 100%;
		transform: translateX(-2.5%);
	}
	.gallery .hoverInfo li > a > span.info {
		top: 86%;
		width: 100%;
		line-height: 140%;
		padding: 0.25em;
		letter-spacing: 0;
		box-sizing: border-box;
		background-color: transparent;
		/*
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.4) 100%);
		*/
	}
	/*
	#product li.bgYellowGreen > a {
		padding-top: 41%;
	}
	#product li.bgYellowGreen > a > .name {
		width: 62.5%;
	}
	#product li.bgYellowGreen > a > span.new {
		width: 100%;
		transform: translateX(-67.5%);
	}
	*/
	/*
	#product li:nth-child(1) {
		order: 1;
	}
	#product li:nth-child(2) {
		order: 3;
	}
	#product li:nth-child(3) {
		order: 2;
	}
	*/
	/*20210603*/
	#product .flexList3 + .flexList2,
	#creation .flexList3 + .flexList2 {
		margin-top: 0!important;
	}
	#product li > a > span.newLeft,
	#creation li > a > span.newLeft {
		background-position: left -33vw bottom;
	}
	#product li > a > span.newTop,
	#creation li > a > span.newTop {
		background-position: right top -12.5vw;
	}
}
/*filterAbc*/
#filterAbc {
	background-image: url("../images/_svg/objFilterAbc.svg");
	background-position: center bottom;
	background-size: auto 345px;
}
#filterAbc h2 {
	width: 72%;
	height: 142px;
	margin: 0 auto;
}
#filterAbc h2 + p {
	width: 100%;
	height: 308px;
	margin: 0 auto;
}
#filterAbc h2 + p .cover {
	width: auto;
	height: 100%;
}
#filterAbc > div {
	width: 100%;
	height: 345px;
	padding-top: 5em;
}
@media screen and (min-width: 801px) and (max-width: 1425px) {
	#filterAbc {
		background-size: auto 24.210526315vw;
	}
	#filterAbc h2 {
		height: 9.96491228vw;
	}
	#filterAbc h2 + p {
		height: 21.614035087vw;
	}
	#filterAbc > div {
		height: 24.210526315vw;
	}
}
@media screen and (max-width: 800px) {
	#filterAbc {
		background-size: auto 53.733333vw;
	}
	#filterAbc h2 {
		height: 10vw;
	}
	#filterAbc h2 + p {
		width: 64%;
		height: 46vw;
		margin-bottom: 10vw;
	}
	#filterAbc > div {
		height: inherit;
		padding: 2em 0 1em;
		background-position: center top;
	}
}
/*filterNow*/
#filterNow .newsList .newsThumb {
	width: 30%;
	padding-top: 23.1%;
}
#filterNow .newsList .newsThumb + div {
	width: 67%;
}
@media screen and (max-width: 800px) {
	.insideWrapper {
		width: 92%;
	}
}
/*
#filterNow {
	width: 100%;
	height: 55.8vw;
	padding: 2em;
	background-image: url("../images/_dummy/kvFilterNow.jpg");
}
#filterNow h2,
#filterNow h2 img {
	width: auto;
	height: 2.2vw;
}
*/
@media screen and (max-width: 800px) {
	/*
	#filterNow {
		height: 100vw;
		background-position: left top;
		background-size: auto 120%;
	}
	#filterNow h2,
	#filterNow h2 img {
		width: auto;
		height: 5vw;
	}
	*/
}

@media screen and (min-width: 801px) and (max-width: 1000px) {
}
@media screen and (max-width: 800px) {
}