@charset "UTF-8";
/* CSS Document */
/*
	reset
-----------------------------------------------------------------------------------------------*/
html{
	margin: 0;
	padding: 0;
	font-size: 62.5%;
}
body{
	margin: 0 auto;
	padding: 0;
	font-size: 1.4em;
	font-family: "Zen Kaku Gothic New", 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
	font-weight: 400;
	font-feature-settings: 'palt';
	color: #333333;
	word-break: break-all;
	font-style: normal;
}
h1, h2, h3, h4, h5, h6, p,figure,ul,ol,li,dl,dt,dd{
	margin: 0;
	padding: 0;
	line-height: 150%;
}
p{
	font-size: 100%;
	line-height: 200%;
}

*,*::before,*::after{
	box-sizing: border-box;
}
header,footer,section,aside,nav,article,main{
	display: block;
}
ul li,ol li{
	list-style: none;
}
img {
	border: none;
	vertical-align: top;
	margin: 0;
	padding: 0;
}
a{
	line-height: 125%;
	color: #333333;
	text-decoration: none;
	transition: color 0.25s;
	cursor: pointer;
}
a:link,a:visited{
	color: #333333;
}
a:hover{
	color: #333333;
	text-decoration: none;
}
button{
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	font-family: inherit;
	background: none;
	border: none;
	outline: none;
}
button:hover{
	cursor: pointer;
}
@media screen and (min-width:813px){
	/* iPad背景切れ対策 */
	body{
		min-width:1200px;
	}

	/* tel pc only */
	a[href^="tel:"]{
		pointer-events: none;
	}
}
@media screen and (max-width: 812px){
	* :hover{
		
	}
	body {
		-webkit-text-size-adjust: 100%;
	}
}
/*
	common
-----------------------------------------------------------------------------------------------*/
.wrapper {
	overflow: hidden;
}
/* pc sp */
.switch{
	visibility: hidden;
}
.sp{
	display: none;
}

/* font */
.ja {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-style: normal;
}
.ja.regular{
	font-weight: 300;
}
.ja.bold{
	font-weight: 700;
}
.en {
	font-family: "Quicksand", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}
.en.regular{
	font-weight: 300;
}
.en.bold{
	font-weight: 700;
}
@media screen and (max-width:812px){
	p{
		font-size: 1.2rem;
		line-height: 150%;
	}

	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
	br.sp{
		display:inline-block;
	}
}
/*
	headArea
-----------------------------------------------------------------------------------------------*/
header#headArea {
	position: fixed;
	height: 100svh;
	margin-inline: auto;
	overflow: hidden;
	width: 100vw;
	margin: 0 0 0 0;
	padding: 30px 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: 0.3s;
	pointer-events: none;
	top: -100%;
	left: 0;
	min-width: 100%;
    min-height: 100%;
	background: rgba(0,0,0,0)
}
.active header#headArea {
	height: 100svh;
	margin-inline: auto;
	overflow: hidden;
	width: 100vw;
	margin: 0 0 0 0;
	background: #dfdfdf;
	padding: 30px 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
}
nav#gNav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.headTop {
	display: flex;
	justify-content: space-between;
	width: calc(100% - 90px);
	position: fixed;
	top: 30px;
	left: 45px;
}
.headTop img {
	opacity: 0;
	transition: 0.3s;
}
.active .headTop img {
	opacity: 1;
}
.menuTrigger,
.menuTrigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menuTrigger {
	position: relative;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	appearance: none;
	pointer-events: painted;
	animation-delay: 5s;
	transition: 0.3s;
}
.menuTrigger:hover{
	opacity: 0.6;
}
.menuTrigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	border-radius: 4px;
	background-color: rgba(0,0,0,0.5);
	transition: 0.3s;
}
.menuTrigger span:nth-of-type(1) {
	top: 14px;
	animation: menu07-bar01 .75s forwards;
}
.menuTrigger span:nth-of-type(2) {
	bottom: 14px;
	animation: menu07-bar02 .75s forwards;
}
.active .menuTrigger span:nth-of-type(1) {
	animation: active-menu07-bar01 .75s forwards;
}
.active .menuTrigger span:nth-of-type(2) {
	animation: active-menu07-bar02 .75s forwards;
}
.active .menuTrigger span{
	background-color: #333;
}
.headInner {
	pointer-events: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	min-width: 680px;
	max-width: 800px;
}
.active .headInner {
	opacity: 1;
	pointer-events: painted;
}
.active .headInner li{
	animation-name:fadeDownAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
}
#ctsNav li{
	position: relative;
}
 #ctsNav li:nth-of-type(n + 2){
	margin: 20px 0 0 0;
}
#ctsNav li a{
	font-size: 2.4rem;
	font-family: "Quicksand", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 300;
	letter-spacing: 0.5rem;
	display: inline-block;
	width: 100%;
	position: relative;
	transition: 0.3s;
	line-height: 4rem;
}
#ctsNav li:hover a{
	opacity: 0.6;
}
#ctsNav li a:after{
	opacity: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #333333;
	position: absolute;
	bottom: 0;
	left: 0;
}
#ctsNav li:hover a:after{
	opacity: 1;
	animation: linkArrow 0.5s forwards;
}
#linkNav li{
	position: relative;
}
#linkNav li:nth-child(n + 2){
	margin: 15px 0 0 0;	
}
#linkNav li:before{
	content: '';
	width: 100%;
	height: 1px;
	background: #333;
	position: absolute;
	bottom: 0;
	left: 0;
}
#linkNav li a {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 2.6rem;
	display: inline-block;
	width: 220px;
	transition: 0.3s;
	padding: 0 2px;
}
#linkNav li:hover a {
	opacity: 0.6;
}
#linkNav li a:after{
	content: '';
	background: url(../images/icon_footer_arrow.svg) no-repeat;
	background-position: center;
	background-size: contain;
	height: 14px;
	width: 14px;
	position: absolute;
	right: 2px;
	top: 50%;
	margin: -7px 0 0 0;
	transition: 0.3s;
	animation: linkArrowAnime01 0.3s forwards;
}
#linkNav li:hover a:after{
	animation: linkArrowAnime 0.3s forwards;
}

@media screen and (max-width:812px){
	.headTop {
		width: calc(100% - 20px);
		top: 10px;
		left: 10px;
	}
	.headInner {
		pointer-events: painted;
		width: 100%;
		min-width: 100%;
		flex-direction: column;
		align-items: normal;
	}
	#ctsNav li:nth-of-type(n + 2) {
		margin: 0 0 0 0;
	}
	#ctsNav li a {
		font-size: 1.8rem;
	}
	.active header#headArea {
		padding: 30px 25px 0 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#linkNav{
		margin: 20px 0 0 0;
	}
	#linkNav li a {
		width: 100%;
	}
}
@media only screen 
  and (max-device-width: 812px) 
  and (orientation: landscape) {
	header#headArea {
	}
	.headInner {
		flex-direction: row;
	}
	#ctsNav {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
	}
	#linkNav li:nth-child(n + 2) {
		margin: 5px 0 0 0;
	}
	#ctsNav li a {
		font-size: 1.6rem;
		line-height: 3rem;
	}
	#linkNav li a {
		min-width: 120px;
	}
	
}

/*
	kvArea
-----------------------------------------------------------------------------------------------*/
.kvAreaInner{
	position: relative;
}
.kvAreaInner .kvSlider {
	position: relative;
	height: 100svh;
	margin-inline: auto;
	overflow: hidden;
	width: 100vw;
	min-width: 1200px;
}
.kvAreaInner .kvSlider.boxFeed:after{
	background: rgba(0,0,0,0.4);
}
.kvAreaInner .slickImg img {
	width: 100%;
}
.kvAreaInner .titArea{
	pointer-events: none;
}
.kvTit {
	position: absolute;
	z-index: 6;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 46%;
	height: 100%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 500px;
}
.kvTit svg {
	animation-duration:1s;
	animation:expansionImg 1s;
	transform:scale(0.5);
	animation-delay: 3.5s;
	animation-fill-mode:forwards;
	width: 100%;
}

.kvTit svg path{
	fill:#FFFFFF;
}
.kvTit svg g:nth-of-type(1){
	animation-delay: 1.8s;
	animation-duration: 1s;
}
.kvTit svg g:nth-of-type(2){
	animation-delay: 1.8s;
	animation-duration: 1s;
}
.kvTit svg g:nth-of-type(2) circle{
	fill: transparent;
	stroke: #fff;
	stroke-width: 10.7;
	animation: circle 2.8s;
	transform: scale(1,-1) rotate(174deg);
}
.kvTit svg g:nth-of-type(3) circle{
	fill: transparent;
	stroke: #fff;
	stroke-width: 10.7;
	animation: circle 2.8s;
	transform: scale(1,-1) rotate(174deg);
}

.kvTit svg g:nth-of-type(4){
	animation-delay: 1.8s;
	animation-duration: 1s;
}
.kvTit svg g:nth-of-type(5){
	animation-delay: 1.8s;
	animation-duration: 1s;
}
.kvTit svg g:nth-of-type(6){
	animation-delay: 1.8s;
	animation-duration: 1s;
}

.scrollArea {
	position: absolute;
	bottom: 20px;
	width: 50px;
	height: 65px;
	left: 50%;
	margin: 0 0 0 -25px;
	animation-delay: 5s;
	cursor: pointer;
	z-index: 5;
	transition: 0.3s;
 }
.scrollLink {
	text-align: center;
	display: inline-block;
	height: 100%;
	width: 100%;
	transition: 0.3s;
}
.scrollLink:hover{
	opacity: 0.8;
}
.scrollLink .txt{
	display: inline-block;
	font-size: 1rem;
	color: #fff;
}
.scrollLink .txt:after {
	content: '';
	display: inline-block;
	position: absolute;
	background-color: rgba(255,255,255,0.5);
	right: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 2px;
	height: 40px;
	animation: scroll 2s infinite;
}
@media screen and (max-width:812px){
	.kvAreaInner .kvSlider {
		height: 100svh;
		min-width: 120%;
	}
	.kvTit{
		width: 70%;
		height: 100%;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		max-width: 400px;
	}
}

/*
	section
-----------------------------------------------------------------------------------------------*/
.ctsArea{
	position: relative;
	padding: 120px 0 110px;
}
.ctsArea > .sectionTit{
	opacity: 0.8;
	position: absolute;
	transform-origin: 0 0;
	transform: rotate(90deg);
	left: 30px;
	top: 20px;
	font-family: "Quicksand", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 300;
	letter-spacing: 0.3rem;
	pointer-events: none;
}

.ctsInner > .titArea .tit{
	font-size: 2.4rem;
	letter-spacing: 0.1rem;
}
.ctsInner > .titArea .lead{
	margin: 30px 0 0 0;
}

/* CONCEPT */
#CONCEPT.ctsArea{
	background: #eeeeee;
	padding: 120px 0 270px;
}
#CONCEPT.ctsArea .titArea > *{
	text-align: center;
}
#CONCEPT.ctsArea .ctsInner .imgArea{
	width: 83%;
	max-width: 1200px;
	margin: 40px auto 0;
}
#CONCEPT.ctsArea .ctsInner .imgArea .imgAreaInner img{
	width: 90%;
}
@media screen and (max-width:812px){
	.ctsArea {
		padding: 100px 0;
	}
	.ctsInner > .titArea .tit {
		font-size: 2.2rem;
	}
	.ctsInner > .titArea .lead {
		margin: 20px 0 0 0;
	}
	#CONCEPT.ctsArea {
		text-align: left;
		padding: 100px 0 130px;
	}
	#CONCEPT.ctsArea .ctsInner {
		padding: 0 15px;
		max-width: 500px;
		margin: 0 auto;
	}
	#CONCEPT.ctsArea .ctsInner .titArea > *{
		text-align: left;
	}
	#CONCEPT.ctsArea .ctsInner .imgArea {
		width: 100%;
		max-width: 100%;
	}
	.ctsArea > .sectionTit {
		transform: rotate(90deg) scale(0.6);
		left: 20px;
		top: 20px;
	}
}


/* DESIGN */
#DESIGN.ctsArea{
	background: #efb09d;
	text-align: center;
	padding: 120px 0 150px;
}
#DESIGN.ctsArea .ctsInner{
	width: 76%;
	max-width: 1200px;
	min-width: 918px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6% 0 12% 0;
	position: relative;
	
}
#DESIGN.ctsArea .ctsInner .titArea {
	text-align: left;
	z-index: 3;;
}
#DESIGN.ctsArea .ctsInner .titArea .lead{
	width: 28%;
	text-align: justify;
}
#DESIGN.ctsArea .ctsInner .designSliderArea {
	width: 95%;
	position: absolute;
	z-index: 1;
	right: -15.4%;
	padding: 0 0 0 3%;
	top: -36%;
	max-width: 900px;
}
#DESIGN.ctsArea .ctsInner .designSliderArea .designSliderThum {
	position: absolute;
	bottom: -23%;
	left: -5%;
	width: 82%;
	z-index: 3;
}
@media screen and (max-width:812px){
	#DESIGN.ctsArea {
		padding: 0 0 100px;
	}
	#DESIGN.ctsArea .ctsInner {
		width: 100%;
		max-width: 500px;
		min-width: auto;
		margin: 0 auto;
		flex-direction:column-reverse;
		padding: 0;
	}
	#DESIGN.ctsArea .ctsInner .titArea {
		text-align: left;
		z-index: 3;
		width: 100%;
		padding: 0 25px;
	}
	#DESIGN.ctsArea .ctsInner .titArea .lead {
		width: 100%;
	}
	#DESIGN.ctsArea .ctsInner .designSliderArea {
		width: 100%;
		right: 0;
		padding: 0 0 0 12%;
		top: -30px;
		max-width: 100%;
		position: relative;
		/*width: 88%;
		right: -6%;
		padding: 0 0 0 0;
		top: -30px;
		max-width: 100%;
		position: relative;*/
	}
	#DESIGN.ctsArea .ctsInner .designSliderArea .designSliderThum {
		position: relative;
		bottom: -10px;
		right: auto;
	}
}


/* FUNCTION */
#FUNCTION.ctsArea{
	background: #eeeeee;
	padding: 120px 0;
}
#FUNCTION.ctsArea .ctsInner .titArea{
	width: 76%;
	max-width: 1200px;
	margin: 0 auto;
}
#FUNCTION.ctsArea .ctsInner .ctsDetail{
	margin: 60px 0 0 0;
}
.functionList li{
	display: flex;
}
.functionList li:nth-of-type(even){
	flex-direction: row-reverse;
}
.functionList li > *{
	width: 50%;
}
.functionList li .movieArea {
	position: relative;
	padding-bottom: 31.5%;
	height: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.movieArea video,
.movieArea img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.movieArea .movieAreaInner .imgCtsIn {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.movieArea .movieAreaInner .imgCtsIn .inner{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.movieArea .movieAreaInner .imgCtsIn .inner .txt {
	position: relative;
	z-index: 1;
	text-align: center;
	color: #fff;
}
.functionList li .txtArea {
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.functionList li .txtAreaInner {
	width: 27.5%;
	min-width: 365px;
	margin: 0 15% 0 0;
}
.functionList li .txtAreaInner p{
	text-align: justify;
}
.functionList li:nth-of-type(even) .txtAreaInner {
	margin: 0 0 0 15%;
}
.functionList li .txtArea .tit {
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0.1rem;
}
@media screen and (max-width:812px){
	#FUNCTION .ctsInner {
		max-width: 500px;
		margin: 0 auto;
	}
	#FUNCTION.ctsArea {
		padding: 100px 0;
	}
	#FUNCTION.ctsArea .ctsInner .titArea {
		width: 100%;
		max-width: 100%;
		padding: 0 25px;
		margin: 0 auto;
	}
	#FUNCTION.ctsArea .ctsInner .ctsDetail {
		margin: 50px 0 0 0;
	}
	.functionList li,
	.functionList li:nth-of-type(even) {
		flex-direction: column;
	}
	.functionList li {
		width: calc(100% - 25px);
	}
	.functionList li:nth-of-type(n + 2) {
		margin: 50px 0 0 0;
	}
	.functionList li:nth-of-type(even) {
		margin: 55px 0 0 25px;
	}
	.functionList li > * {
		width: 100%;
	}
	.functionList li .movieArea {
		padding-bottom: 63%;
	}
	.functionList li .txtArea {
		text-align: left;
		padding: 20px 0 0 25px;
	}
	.functionList li:nth-of-type(even) .txtArea{
		padding: 20px 25px 0 0;
	}
	.functionList li .txtArea .txtAreaInner,
	.functionList li:nth-of-type(even) .txtArea .txtAreaInner {
		min-width: 100%;
		width: 100%;
		margin: 0 0 0 0;
	}
	.functionList li .txtArea .txtAreaInner .txt{
		margin: 5px 0 0 0;
	}
}


/* COLOR VARIATIONS */
#CV.ctsArea{
}
#CV.ctsArea .ctsInner .titArea{
	flex-direction: column;
	display: flex;
	align-items: center;
	justify-content: center;
}
#CV.ctsArea .ctsInner > .titArea .lead{
	text-align: center;
}
#CV.ctsArea .ctsInner .titArea .catch{
	margin: 60px 0 0 0;
}
.frameArea {
	overflow: hidden;
	margin: 50px 0 0 0;
}
.frameArea .frameList{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.frameArea .frameList li{
	padding: 30px 0;
	width: calc(100% / 3);
	text-align: center;
}
.frameArea .frameList li.fadeRight:nth-of-type(2){
		animation-delay: 0.3s;
}
.frameArea .frameList li.fadeRight:nth-of-type(3){
		animation-delay: 0.6s;
}
.frameArea .frameList li.black{
	background: url("../images/bg_frame_01_pc.png") no-repeat;
	background-size: cover;
	background-position: top center;
}
.frameArea .frameList li.black .lead{
	color: #fff;
}
.frameArea .frameList li.beige{
	background: url("../images/bg_frame_02_pc.png") no-repeat;
	background-size: cover;
	background-position: top center;
}
.frameArea .frameList li.white{
	background: url("../images/bg_frame_03_pc.png") no-repeat;
	background-size: cover;
	background-position: top center;
}
.frameArea .frameList li img{
	width: 52.5%;
	max-width: 300px;
	display: inline-block;
	filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}
.frameArea .frameList li.black img {
	filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
}
.frameArea .frameList li p{
	text-align: center;
}
.frameArea .frameList li .name{
	font-size: 2.4rem;
	line-height: 110%;
	font-family: "Quicksand", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 700;
	color: #fff;
	padding: 0 0 0;
	filter: drop-shadow(0 0 45px rgba(0, 0, 0, 1));
	letter-spacing: 0.3rem;
}
.frameArea .frameList li .name span {
	padding: 0 0 0 10px;
}
.frameArea .frameList li .lead{
	letter-spacing: 0.1rem;
	line-height: 100%;
	margin: 5px 0 0 0;
}

.colorFabricArea {
	padding: 60px 0 0 0;
}
.colorFabricArea .catchArea {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.colorFabricArea .catchArea > *{
	font-family: "Quicksand", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	display: inline-block;
}
.colorFabricArea .catchArea .main{
	font-size: 2.4rem;
	letter-spacing: 0.5rem;
}
.colorFabricArea .fabricSlider{
	padding: 40px 0 0 0;
}
.colorFabricArea .linkArea{
	margin: 60px auto 0;
	transition: 0.3s;
	width: 100%;
	text-align: center;
}
.colorFabricArea .linkArea:hover{
	opacity: 0.6;
}
.colorFabricArea .linkArea .link{
	display: inline-block;
	line-height: 4rem;
	position: relative;
	font-weight: 700;
}
.colorFabricArea .linkArea .link:before{
	content: '';
	width: 100%;
	height: 1px;
	background: #333333;
	position: absolute;
	bottom: 0;
	left: 0;
}
.colorFabricArea .linkArea:hover .link:before{
	animation: linkArrow 1s forwards;
}
 .colorFabricArea .colorFabricList{
	display: none;
}

.colorFabricArea .typeOfHeightArea {
	margin: 60px 0 0 0;
}
.colorFabricArea .typeOfHeightArea .imgArea {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40%;
	max-width: 1000px;
	min-width: 520px;
	margin: 20px auto 0;
}
.colorFabricArea .typeOfHeightArea .imgArea img{
	width: 50%;
}
@media screen and (max-width:812px){
	#CV.ctsArea .ctsInner {
		max-width: 500px;
		margin: 0 auto;
	}
	#CV.ctsArea .ctsInner .titArea .catch {
		margin: 30px auto 0;
		width: 55%;
		max-width: 240px;
	}
	.frameArea {
		margin: 40px 0 0 0;
	}
	.frameArea .frameList li {
		padding: 15px 0 ;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.frameArea .frameList li .name {
		line-height: 100%;
		letter-spacing: .2rem;
		padding: 5px 0 10px 0;
		font-size: 2rem;
	}
	.frameArea .frameList li .name span {
		width: 100%;
		display: inline-block;
		padding: 2px 0 0 0;
	}
	.frameArea .frameList li .lead {
		letter-spacing: 0.1rem;
	}
	.frameArea .frameList li .imgArea img {
		width: 80%;
	}
	.colorFabricArea {
		padding: 40px 0 0 0;
	}
	.colorFabricArea .fabricSlider{
		display: none;
	}
	.colorFabricList {
		padding: 0 15px;
		margin: 30px auto 0;
		width: 90%;
	}
	.colorFabricArea .colorFabricList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.colorFabricArea .colorFabricList li{
		width: calc((100% - 20px) / 6);
	}
	.colorFabricArea .colorFabricList li:nth-of-type(n + 7){
		margin: 10px 0 0 0;
	}
	.colorFabricArea .colorFabricList li img{
		width: 100%;
	}
	.colorFabricArea .catchArea .main {
		font-size: 2rem;
	}
	.colorFabricArea .linkArea {
		margin: 40px 0 0 0;
	}
	.colorFabricArea .typeOfHeightArea .imgArea {
		max-width: 100%;
		min-width: auto;
		margin: 10px auto 0;
		width: 60%;
	}
}

/* SUSTAINABILITY */
#SUSTAINABILITY.ctsArea{
	background: #c9ddda;
}
#SUSTAINABILITY.ctsArea .ctsInner {
	width: 76%;
	max-width: 1200px;
	min-width: 918px;
	margin: 0 auto;
}
#SUSTAINABILITY.ctsArea .ctsInner .imgArea{
	position: relative;
	z-index: 3;
	width: 918px;
	margin: 35px auto 0;
}
#SUSTAINABILITY.ctsArea .ctsInner .imgArea .textArea{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	animation-delay: 0.6s;
}
#SUSTAINABILITY.ctsArea .ctsInner .imgArea .textArea img{
	width: 100%;
}
#SUSTAINABILITY.ctsArea .ctsInner .imgArea .lineArea{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	animation-delay: 0.3s;
}
#SUSTAINABILITY.ctsArea .ctsInner .imgArea .lineArea img{
	width: 100%;
}

#SUSTAINABILITY.ctsArea .ctsInner .imgArea .bgArea{
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
}
#SUSTAINABILITY.ctsArea .ctsInner .imgArea .bgArea img{
	width: 100%;
}

@media screen and (max-width:812px){
	#SUSTAINABILITY.ctsArea .ctsInner {
		width: 100%;
		max-width: 500px;
		min-width: auto;
	}
	#SUSTAINABILITY.ctsArea .ctsInner .titArea {
		text-align: center;
	}
	#SUSTAINABILITY.ctsArea .ctsInner .imgArea {
		width: calc(100% - 50px);
	}
}

/* COLOR SIMULATION */
#CS.ctsArea{
	padding: 120px 0 0;
}
#CS.ctsArea .ctsInner {
	width: 76%;
	max-width: 1200px;
	min-width: 918px;
	margin: 0 auto;
}
#CS.ctsArea .ctsInner .imgArea{
	position: relative;
	z-index: 2;
	width: 918px;
	margin: 35px auto 0;
}
#CS.ctsArea .ctsInner .titArea{
	text-align: center;
}


.csArea {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 864px;
	margin: 60px auto 0;
}
#CS.ctsArea .ctsInner.highTypeOut{
	margin: 60px auto 0;
}
#csImgArea,
#csImgAreaHigh{
	width: 320px;
}
#csImg,
#csImgHigh{
	padding: 0 40px;
	margin:0 auto 30px;
}
.slide-item img{
	width: 100%;
}
#csThum,#csThumHigh{
	width: 320px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
span.typeName {
	margin: 0 0 0 10px;
}

.thumbnailItem{
	max-width: 50px;
	flex: 0 1 30%;
	box-sizing: border-box;
	position:relative;
	cursor: pointer;
	padding-bottom: 5px;
	transition: 0.3s;
}
.thumbnailItem:after{
	transition: 0.3s;
}
.thumbnailItem:hover{
	opacity: 0.6;
}
.thumbnailItem.thumbnail-current{
	pointer-events: none;
}
.thumbnailItem.thumbnail-current:after{
	content: '';
	background-color: #cfcfd4;
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	opacity: 1;
	transition: .3s opacity linear;
}
.thumbnailItem img{
	width: 100%;
	margin: 0 auto;
}

#csSelectArea,#csSelectAreaHigh {
	width: 430px;
}
#csSelectArea .typeTtl,
#csSelectAreaHigh .typeTtl{
	font-weight: 700;
	letter-spacing: 0.1rem;
	white-space: nowrap;
}
#csSelectArea .typeArea .typeTtl span,
#csSelectAreaHigh .typeArea .typeTtl span {
	padding: 0 0 0 22px;
	position: relative;
}
#csSelectArea .typeArea .typeTtl span:before,
#csSelectAreaHigh .typeArea .typeTtl span:before{
	content: '';
	width: 1px;
	height: 16px;
	background: #cfcfd4;
	left: 20px;
	top: 50%;
	margin: -8px;
	position: absolute;
}
.hightTypeTtl {
	font-weight: bold;
	font-size: 1.6rem;
}
#csSelectArea .typeArea:nth-of-type(n + 2),
#csSelectAreaHigh .typeArea:nth-of-type(n + 2){
	margin: 20px 0 0 0;
}
#csSelectArea .typeArea .typeThum,
#csSelectAreaHigh .typeArea .typeThum {
	padding: 10px 0 0 0;
	position: relative;
	margin: 5px 0 0 0;
}
#csSelectArea .typeArea .typeThum:before,
#csSelectAreaHigh .typeArea .typeThum:before{
	content: '';
	height: 1px;
	width: 100%;
	background: #cfcfd4;
	position: absolute;
	left: 0;
	top: 0;
}

#csSelectArea .typeArea .typeThum ul,
#csSelectAreaHigh .typeArea .typeThum ul{
	display: flex;
	align-content: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 0 100px 0 0;
}
.colorValue {
	position: absolute;
	clip: rect(1px,1px,1px,1px);
	-webkit-clip-path: inset(0 0 99.9% 99.9%);
	clip-path: inset(0 0 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	padding: 0;
	border: 0;
}
.colorValueLink {
	transition: 0.3s;
}
.colorValueLink:hover{
	opacity: 0.6;
}
.colorValueLink {
	border: 3px solid transparent;
	border-radius: 50%;
	box-sizing: border-box;
	color: #1d1d1f;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-content: center;
	position: relative;
	width: 64px;
	height: 64px;
	z-index: 1;
	padding: 4px 0 0 0;
}
.colorValueLink img {
	width: 50px;
	height: 50px;
}
.colorValue:checked~.colorValueLink {
	border-color: #bbb;
	cursor: default;
}
.colorValue:checked~.colorValueLink:hover{
	pointer-events: none;
	opacity: 1;
}

.colorValueLink img{
	width: 50px;
	height: 50px;
}
.colorText{
	position: absolute;
	clip: rect(1px,1px,1px,1px);
	-webkit-clip-path: inset(0 0 99.9% 99.9%);
	clip-path: inset(0 0 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	padding: 0;
	border: 0;
}

.typeArea.number{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 5px 0;
}
.typeArea.number:before{
	content: '';
	height: 1px;
	width: 100%;
	background: #cfcfd4;
	position: absolute;
	left: 0;
	bottom: 0;
}
button.btnCsImg {
	background: none;
	border: none;
}
a#downloadBtn:hover,
a#downloadBtnHigh:hover{
	transition: 0.3s;
}
a#downloadBtn:hover,
a#downloadBtnHigh:hover{
	opacity: 0.6;
}

.csSceneAreaOut {
	margin: 130px 0 0 0;
}
.csSceneArea {
	display: flex;
	overflow: hidden;
}
.csSceneList {
	display: flex;
	list-style: none;
	padding: 0
}
.csSceneList.imgSlider {
	animation: infinity-scroll-left 200s infinite linear 0s both;
}
.csSceneArea:nth-of-type(2){
	margin: 30px 0 0 0;
}
.csSceneArea:nth-of-type(2) .csSceneList.imgSlider {
	animation: infinity-scroll-left 200s infinite linear 5s both;
}
.csScene {
	width: calc(100vw / 4);
	overflow: hidden;
}
.csScene>img {
	width: 100%;
}
.csScene img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	transition:0.3s;
}
.csScene img:hover{
	opacity: 0.6;
	transform:scale(1.05,1.05);
}
@media screen and (max-width:812px){
	#CS.ctsArea {
		padding: 100px 0 0;
		overflow: hidden;
	}
	#CS.ctsArea .ctsInner {
		width: 100%;
		max-width: 500px;
		min-width: auto;
		overflow: hidden;
	}
	.csArea {
		flex-direction: column;
		width: 100%;
	}
	#csImgArea,
	#csImgAreaHigh{
		width: 70%;
		margin: 30px auto 0;
	}
	#csImg,#csImgHigh {
		margin: 0 auto 10px;
	}
	#csThum,#csThumHigh {
		width: 90px;
	}
	.thumbnailItem {
		max-width: 8px;
		height: 8px;
		background: rgba(0,0,0,0.4);
		border-radius: 4px;
	}
	.thumbnailItem.thumbnail-current{
		background: rgba(0,0,0,0.8);
	}
	.thumbnailItem img {
		display: none;
	}
	.thumbnailItem.thumbnail-current:after{
		display: none;
	}
	#csSelectArea,
	#csSelectAreaHigh{
		width: 100%;
		padding: 0 25px;
		margin: 15px 0 0 0;
	}
	.colorValueLink {
		border: 3px solid transparent;
		border-radius: 50%;
		box-sizing: border-box;
		color: #1d1d1f;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-content: center;
		position: relative;
		width: 40px;
		height: 40px;
		z-index: 1;
		padding: 2px 0 0 0;
	}
	.colorValueLink img {
		width: 30px;
		height: 30px;
	}
	#csSelectArea .typeArea .typeThum,
	#csSelectAreaHigh .typeArea .typeThum {
		padding: 5px 0 5px 0;
		width: 100%;
		overflow-x: scroll;
	}
	#csSelectArea .typeArea .typeThum:before,
	#csSelectAreaHigh .typeArea .typeThum:before{
		position: fixed;
		top: 26px;
	}
	#csSelectArea .typeArea .typeThum ul,
	#csSelectAreaHigh .typeArea .typeThum ul{
		flex-wrap: nowrap;
		padding: 0 0 0 0;
	}
	#csSelectArea .typeTtl,
	#csSelectAreaHigh .typeTtl{
		font-size: 1.4rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	#csSelectArea .typeArea:nth-of-type(n + 2),
	#csSelectAreaHigh .typeArea:nth-of-type(n + 2){
		margin: 10px 0 0 0;
	}
	#csSelectArea .typeArea .typeTtl span,
	#csSelectAreaHigh .typeArea .typeTtl span{
		font-size: 1.2rem;
		font-weight: 300;
	}
	#csSelectArea .typeArea .typeTtl span:before,
	#csSelectAreaHigh .typeArea .typeTtl span:before{
		display: none;
	}
	#csSelectArea .typeArea .typeTtl span.numberTxt,
	#csSelectAreaHigh .typeArea .typeTtl span.numberTxt{
		font-size: 1.4rem;
		font-weight: 700;
	}
	#csSelectArea .typeArea .typeTtl span.numberTxt:before,
	#csSelectAreaHigh .typeArea .typeTtl span.numberTxt:before{
		content: '';
		display: inline-block;
		width: 1px;
		height: 16px;
		background: #cfcfd4;
		left: 20px;
		top: 50%;
		margin: -8px;
		position: absolute;
	}
	.csSceneAreaOut {
		margin: 40px 0 0 0;
		position: relative;
	}
	.csSceneAreaOut:before{
		content: '';
		height: 100%;
		width: 100%;
		border: 15px solid #fff;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		pointer-events: none;
	}
	.csSceneArea.pc {
		display: none;
	}
	.csSceneArea:nth-of-type(1){
		margin: 0 0 -2px 0;
	}
	.csSceneList.imgSlider {
		animation: infinity-scroll-left 80s infinite linear 0.5s both;
	}
	.csScene {
		width: calc(100vw / 2);
		padding-bottom: 15px;
	}
	.csScene>img {
		width: 100%;
	}
	.csScene img {
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
	}
}

/*
	footer
----------
-------------------------------------------------------------------------------------*/
.footerout{
	background: #eeeeee;
}
.footerInner{
	padding: 100px 0;
	width: 76%;
	max-width: 1200px;
	min-width: 918px;
	margin: 0 auto;
}
.footerInner .cts{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.footerInner .cts:nth-of-type(n + 2){
	margin: 100px 0 0 0;
}
.footerInner .cts .txtArea .tit{
	font-size: 3.6rem;
	letter-spacing: 1rem;
	font-family: "Quicksand", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 700;
}
.footerInner .cts .txtArea .txt{
	margin: 40px 0 0 0;
}
.linkArea .linkList {
	width: 300px;
}
.linkArea .linkList li{
	position: relative;
}
.linkArea .linkList li:after{
	content: '';
	width: 100%;
	height: 1px;
	background: #333;
	position: absolute;
	left: 0;
	bottom:0;
}
.linkArea .linkList li:nth-of-type(n + 2){
	margin: 18px 0 0 0;
}
.linkArea .linkList li a{
	display: inline-block;
	font-weight: 700;
	line-height: 3.6rem;
	position: relative;
	width: 100%;
	transition: 0.3s;
}
.linkArea .linkList li:hover a{
	opacity: 0.6;
}
.linkArea .linkList li a:before{
	content: '';
	background: url("../images/icon_footer_arrow.svg") no-repeat;
	background-position: center;
	background-size: contain;
	height: 14px;
	width: 14px;
	position: absolute;
	right: 0;
	top: 50%;
	margin: -7px 0 0 0;
	transition: 0.3s;
	animation: linkArrowAnime01 0.3s forwards;
}
.linkArea .linkList li:hover a:before{
	animation: linkArrowAnime 0.3s forwards;
}


.copyArea{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 30px 20px;
}
.copyArea .cpLogo {
	width: 116px;
}
.copyArea .cpLogo .logo0{
	fill:#333333;
}
.copyArea .cpLogo .logo1{
	fill:#595757;
}
.copyArea .cpLogo .logo3{
	fill:#DF2F00;
}
.copyArea .cpLogo .logo4{
	fill:#1D110D;
}
.copyArea .copyright{
	font-size: 1rem;
}
@media screen and (max-width:812px){
	.footerInner {
		padding: 80px 20px;
		width: 100%;
		max-width: 500px;
		min-width: auto;
		margin: 0 auto;
	}
	.footerInner .cts {
		flex-direction: column;
	}
	.linkArea {
		width: 100%;
	}
	.linkArea .linkList {
		width: 100%;
		margin: 10px 0 0 0;
	}
	.footerInner .cts:nth-of-type(n + 2) {
		margin: 60px 0 0 0;
	}
	.footerInner .cts .txtArea .tit {
		font-size: 1.8rem;
		letter-spacing: 0.5rem;
	}
	.footerInner .cts .txtArea .txt {
		margin: 10px 0 0 0;
	}
	.linkArea .linkList li:nth-of-type(n + 2) {
		margin: 15px 0 0 0;
	}
	.linkArea .linkList li a{
		font-size: 1.2rem;
	}
	.copyArea {
		flex-direction: column;
		padding: 20px 20px;
	}
	.copyArea .cpLogo {
		width: 80px;
	}
	.copyright{
		margin: 5px 0 0 0;
		letter-spacing: 0.1rem;
		transform: scale(0.8);
	}
}