@charset "UTF-8";

/* cat
---------------------------------------------------------------------------*/
body#cat header {
	margin-bottom: 0 !important;
	opacity: 0 !important;
}

body#cat header.visibility {
	opacity: 1 !important;
}

body#cat .pickup-wrap,
body#cat footer {
	display: none !important;
}

body#cat #mainContents {
	max-width: 100%;
}

#catContents {
	position: relative;
	box-sizing: border-box;
	display: flex;
	color: #333333;
}

/* .cat-main
------------------------------------*/
.cat-main {
	position: sticky;
	top: 0;
	left: 0;
	width: 45%;
	height: 100vh;
	opacity: 0;
}

.cat-main.absolute {
	position: absolute;
}

.cat-main figure {
	width: 100%;
	height: 100%;
}

.cat-main figure img {
	object-fit: cover;
	object-position: 85% 100%;
	width: 100%;
	height: 100%;
}

.cat-main nav {
	position: absolute;
	top: 40px;
	left: 40px;
	z-index: 2;
}

.cat-main nav li:nth-of-type(1) { position: absolute; top: 95px; left: 0; }
.cat-main nav li:nth-of-type(2) { position: absolute; top: 5px; left: 0; }
.cat-main nav li:nth-of-type(3) { position: absolute; top: 0; left: 117px; }

.cat-main nav li a {
	display: block;
	margin: -10px;
	padding: 10px;
}

/* .cat-main
------------------------------------*/
.cat-contents {
	overflow: hidden;
	width: 55%;
	opacity: 0;
}

.cat-sec-title em {
	display: block;
	margin: 0 0 12px 1px;
	color: #BA9721;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.16em;
}

.cat-sec-title strong {
	font-weight: 500;
	font-size: 26px;
	line-height: 1.85;
	letter-spacing: 0.18em;
}

.cat-contents .btn-set {
	display: flex;
	justify-content: center;
}

.cat-contents .btn-link {
	display: inline-block;
	background-color: #FFFFFF;
	border: 1px solid #666666;
	margin: 0 4px;
	border-radius: 100px;
}

.cat-contents .btn-link a {
	padding: 16px 45px 12px !important;
	color: #333333 !important;
	background: none !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	letter-spacing: 0.08em !important;
	text-align: center !important;
}

/* .cat-concept
------------------------------------*/
.cat-concept {
	overflow: hidden;
	padding: 145px 0 100px;
	z-index: 1;
}

.cat-lead {
	position: relative;
	width: 560px;
	margin: 0 auto 170px;
}

.cat-lead:after {
	display: block;
	content: '';
	position: absolute;
	bottom: -64px;
	right: -38px;
	background: url(../img/cat/pic-line.svg) no-repeat left top;
	width: 365px;
	height: 285px;
	z-index: -1;
}

.cat-lead h1 {
	margin-bottom: 85px;
}

.cat-lead h1 em {
	display: block;
	margin-bottom: 30px;
	color: #BA9721;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.16em;
}

.cat-lead h1 strong {
	display: block;
}

.cat-lead h2 {
	margin-bottom: 35px;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.18em;
}

.cat-lead p {
	margin-bottom: 13px;
	font-size: 16px;
	font-weight: 400;
	line-height: 2.3;
	letter-spacing: 0.16em;
}

.cat-lead .pic-concept {
	position: absolute;
	top: 160px;
	right: -67px;
	width: 256px;
	height: 155px;
	transform: scale(1.1);
}

.cat-lead .pic-concept .pic-butterfly {
	position: absolute;
	top: 0;
	left: 0;
}

.pic-cat1 {
	position: absolute;
	top: 8px;
	left: 60px;
}

.pic-cat1 > img {
	display: block;
}

.pic-cat1 .tail {
	position: absolute;
	top: 15px;
	left: 118px;
	transform-origin: left top;
}

.pic-cat1 .eye {
	display: block;
	position: absolute;
	width: 11px;
	height: 10px;
	font-size: 0;
	z-index: 1;
}

.pic-cat1 .eye > span { display: block; position: absolute; }

.pic-cat1 .eye-left { top: 46px; left: 8px; }
.pic-cat1 .eye-left1 { top: 5px; left: 5px; }
.pic-cat1 .eye-left2 { top: 1px; left: 2px; }
.pic-cat1 .eye-left3 { top: 3px; left: 1px; opacity: 0; }

.pic-cat1 .eye-right { top: 49px; left: 25px; }
.pic-cat1 .eye-right1 { top: 4px; left: 5px; }
.pic-cat1 .eye-right2 { top: 1px; left: 2px; }
.pic-cat1 .eye-right3 { top: 3px; left: 1px; opacity: 0; }

/* .cat-img
------------------------------------*/
.cat-img figure {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

.cat-img figure picture {
	display: block;
}

.cat-img figure img {
	width: 100%;
}

.cat-img .img1 {
	margin-bottom: 95px;
}

.cat-img .img2 {
	position: absolute;
	top: 0;
	right: 4px;
	width: 53.2%;
}

.cat-img .img3 {
	width: 37%;
	padding: 297px 0 96px 3px;
}

.cat-img .img4 {
	width: 83.5%;
	margin: 0 auto 90px;
}

.cat-img .img5 {
	width: 52.1%;
	margin-bottom: 145px;
	padding: 0 0 108px 12px;
}

.cat-img .img6 {
	position: absolute;
	bottom: 0;
	right: -5px;
	width: 41.1%;
}

.cat-img .img7 {
	width: 71.3%;
	margin: 0 auto 170px;
}

.cat-img .img8 {
	position: absolute;
	top: 0;
	right: -8px;
	width: 53.4%;
}

.cat-img .img9 {
	width: 45.3%;
	margin-left: -9px;
	padding: 179px 0 130px;
}

.cat-img .img10 {
	width: 90.3%;
	margin: 0 auto;
}

.cat-img .pic-cat2-wrap {
	position: relative;
	float: right;
	width: 192px;
	margin-top: 165px;
	padding: 50px 45px 0 0;
	transform: scale(1.1);
}

.cat-img .pic-cat2-wrap .pic-butterfly {
	position: absolute;
	top: -5px;
	right: 10px;
}

.pic-cat2 .eye {
	display: block;
	position: absolute;
	width: 11px;
	height: 10px;
	font-size: 0;
	z-index: 1;
}

.pic-cat2 .eye > span { display: block; position: absolute; }
.pic-cat2 .eye > span img { width: auto; }

.pic-cat2 .eye-left { top: 64px; left: 17px; }
.pic-cat2 .eye-left1 { top: 5px; left: 6px; }
.pic-cat2 .eye-left2 { top: 1px; left: 2px; }
.pic-cat2 .eye-left3 { top: 4px; left: 2px; opacity: 0; }

.pic-cat2 .eye-right { top: 65px; left: 40px; }
.pic-cat2 .eye-right1 { top: 5px; left: 5px; }
.pic-cat2 .eye-right2 { top: 1px; left: 2px; }
.pic-cat2 .eye-right3 { top: 5px; left: 2px; opacity: 0; }

/* .cat-designer
------------------------------------*/
.cat-designer {
	background: url(../img/cat/bg-pattern.jpg) repeat left top;
	padding-bottom: 100px;
}

.cat-designer img {
	width: 100%;
}

.cat-designer > figure {
	margin-bottom: 115px;
}

.cat-designer-inner1 {
	position: relative;
	max-width: 540px;
	margin: 0 auto 100px;
	padding-bottom: 100px;
}

.cat-designer-inner1:after {
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0,0,0,0.2);
	width: calc(50vw - 35px);
	height: 1px;
}

.pic-cat3 {
	position: absolute;
	top: -25px;
	right: 0;
	width: 120px;
}

.pic-cat3 .eye {
	position: absolute;
	width: 8px;
	height: 8px;
	font-size: 0;
}

.pic-cat3 .eye img { display: block; position: absolute; }
.pic-cat3 .eye-left { top: 20px; left: 21px; }
.pic-cat3 .eye-left img { top: 2px; left: 3px; width: 3px; height: auto; }
.pic-cat3 .eye-right { top: 20px; left: 44px; }
.pic-cat3 .eye-right img { top: 2px; left: 2px; width: 4px; height: auto; }

.cat-designer-inner1 .cat-sec-title {
	margin-bottom: 36px;
}

.cat-designer-inner1 p {
	margin-bottom: 14px;
	font-weight: 300;
	font-size: 16px;
	line-height: 2.25;
	letter-spacing: 0.14em;
}

.designer-img {
	margin: 85px -10px 0;
}

.designer-img .img1 {
	display: block;
	margin-bottom: 70px;
}

.designer-img .column2 {
	display: flex;
	margin: 0 -38px;
}

.designer-img .img2 {
	width: 49%;
}

.designer-img .img3 {
	width: 51%;
	transform: translateY(136px);
}

.designer-img .img4 {
	display: block;
	margin-top: 138px;
}

.cat-designer-inner2 {
	max-width: 540px;
	margin: 0 auto;
}

.cat-designer-inner2 .cat-sec-title {
	margin-bottom: 26px;
}

.cat-designer-inner2 .cat-sec-title strong {
	font-weight: 300;
	font-size: 19px;
	line-height: 1.9;
	letter-spacing: 0.24em;
}

.cat-designer-inner2 p {
	margin-bottom: 12px;
	font-weight: 300;
	font-size: 15px;
	line-height: 2.15;
	letter-spacing: 0.1em;
}

.cat-designer-inner2 figure {
	margin-top: 50px;
}

/* .cat-pebble
------------------------------------*/
.cat-pebble {
	margin-top: 56px;
}

.cat-pebble h3 {
	margin-bottom: 35px;
	text-align: center;
}

.cat-pebble h3 em {
	display: block;
	margin-bottom: 19px;
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 0.05em;
}

.cat-pebble h3 strong {
	display: block;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.1em;
}

.cat-pebble p {
	padding: 0 30px;
	font-size: 15px;
	line-height: 2.3;
	letter-spacing: 0.07em;
	text-align: justify;
}

.cat-pebble .btn-set {
	margin: 45px -10px 0;
	white-space: nowrap;
}

/* .cat-lineup
------------------------------------*/
.cat-lineup {
	max-width: 620px;
	margin: 0 auto;
	padding-top: 100px;
}

.cat-lineup img {
	width: 100%;
}

.cat-lineup > figure {
	margin-bottom: 62px;
}

.cat-lineup-title {
	display: flex;
	margin-bottom: 80px;
	padding: 0 0 0 40px;
}

.cat-lineup-title h2 {
	position: relative;
	margin-right: 75px;
	padding-top: 18px;
	color: #142F32;
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.1em;
}

.cat-lineup-title h2:before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-color: #142F32;
	width: 10px;
	height: 1px;
	opacity: 0.5;
}

.cat-lineup-title dl {
	display: flex;
	white-space: nowrap;
	margin-top: 22px;
	color: #5B5542;
}

.cat-lineup-title dl > div:not(:last-child) {
	margin-right: 55px;
}

.cat-lineup-title dt {
	margin-bottom: 14px;
	font-family: var(--font-sans);
	font-size: 14px;
	letter-spacing: 0.14em;
}

.cat-lineup-title dt span {
	padding-left: 4px;
	font-size: 11px;
}

.cat-lineup-title dd {
	font-size: 16px;
	letter-spacing: 0.1em;
}

.cat-lineup .grid-3n article {
	margin-bottom: 7%;
}

.cat-lineup .grid-3n.soon article a {
	pointer-events: none !important;
}

.cat-lineup .grid-3n.soon article .label {
	display: none !important;
}

.cat-lineup .grid-3n.soon article:before {
	display: block;
	content: 'Coming Soon';
	position: absolute;
	top: -8px;
	left: 6px;
	color: #999999;
	font-family: var(--font-sans);
	font-size: 16px;
	letter-spacing: 0.06em;
	white-space: nowrap;
	z-index: 2;
}

.cat-lineup .grid-container article figure img {
	width: 100%;
}

.cat-lineup .grid-container article .label {
	top: -7px;
	font-size: 16px;
}

.cat-lineup .grid-container article strong {
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.06em;
}

/* .cat-footer
------------------------------------*/
.cat-footer {
	position: relative;
	width: 100%;
	margin-top: 300px;
	padding: 0 0 65px;
	text-align: center;
}

.btn-pagetop {
	position: absolute;
	bottom: 65px;
	right: 50px;
}

.btn-pagetop a {
	display: block;
	margin: -20px;
	padding: 20px;
}

/* .cat-btm
------------------------------------*/
.cat-btm-face {
	position: relative;
	width: 109px;
	margin: 0 auto 22px;
	transform-origin: center bottom;
}

.cat-btm-face img { display: block; }

.cat-btm-face .face2,
.cat-btm-face .face3,
.cat-btm-face .face4 {
	position: absolute;
	bottom: 0;
	left: 0;
	transform-origin: center bottom;
	opacity: 0;
}

.cat-btm-face .face3-2 {
	position: absolute;
	top: 6px;
	right: 20px;
	opacity: 0;
}

.cat-btm-txt-wrap {
	display: inline-block;
	position: relative;
	padding: 0 14px 1px;
}

.cat-btm-txt { display: flex; justify-content: center; }

.cat-btm-txt .cat-txt1 { margin-right: 1px; }
.cat-btm-txt .cat-txt3 { margin-right: 5px; }
.cat-btm-txt .cat-txt9 { margin-right: 7px; }
.cat-btm-txt .cat-txt12 { position: relative; }

.cat-btm-txt .cat-txt12 .txt-u {
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
}

.cat-btm-txt .cat-txt14 { display: none; }
.cat-btm-txt > div { position: relative; }
.cat-btm-txt > div img { display: block; }

.cat-btm-txt-wrap > i {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 14px;
	height: 1px;
}

.cat-btm-txt-wrap > i > span {
	display: block;
	background-color: #000000;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.cat-btm-txt-wrap.active > i > span {
	opacity: 1;
	animation: cat_btm_txt_line 1s linear 1s infinite;
}

@keyframes cat_btm_txt_line {
	0% { opacity: 0; }
	20% { opacity: 0; }
	25% { opacity: 1; }
	75% { opacity: 1; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}


/* media query
---------------------------------------------------------------------------*/
@media (max-width: 1380px) {
	.cat-lead {
		width: 500px;
	}
	.cat-lead h2 {
		font-size: 25px;
	}
	.cat-lead .pic-concept {
		right: -80px;
	}
	.cat-img figure {
		max-width: 580px;
	}
	.cat-designer-inner1,
	.cat-designer-inner2 {
		max-width: 500px;
	}
	.cat-designer-inner1 p {
		letter-spacing: 0.12em;
	}
	.designer-img .column2 {
		margin: 0 -30px;
	}
	.cat-lineup {
		max-width: 540px;
	}
	.cat-lineup-title {
		padding-left: 20px;
	}
	.cat-lineup-title h2 {
		margin-right: 65px;
	}
	.cat-lineup-title dl > div:not(:last-child) {
		margin-right: 40px;
	}
}