@charset "UTF-8";

* {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
	font-size: 62.5%;
}

body {
	padding-top: 24rem;
	background-color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	color: #333;
	font-size: 1.6rem;
	line-height: 2.4;
}

body.home,
body.products {
	padding-top: 0;
}

@media screen and (max-width: 768px) {
	
	body {
		padding-top: 16rem;
	}
	
}


.mincho {
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
}

@media screen and (max-width: 768px) {
	
	body {
		font-size: 1.4rem;
	}
	
}


img {
	max-width: 100%;
	height: auto;
}

.section {
	width: 100%;
}

.inner {
	max-width: 1460px;
	margin: 0 auto;
	padding: 0 30px;
}

p { margin-bottom: 2rem;}

a { transition: all 0.45s;}


/* --------------------------------------------------

	z-index

-------------------------------------------------- */

.header { z-index: 100001;}
.nav-item-child { z-index: 1001;}

.top-products:before { z-index: 2;}
.products-bg { z-index: 1;}
.top-products .inner { z-index: 3;}

.sp-nav.is-panelactive { z-index: 100000;}

.modaal-wrapper { z-index: 100003;}
.modaal-overlay { z-index: 100002;}
.btn-modaal-close { z-index: 100007;}

.loading-wrapper { z-index: 110000;}
#top-logo { z-index: 110001;}


/* --------------------------------------------------

	color

-------------------------------------------------- */

.text-white { color: #fff;}
.learn-more .button-text.text-white { color: #fff;}


/* --------------------------------------------------

	badge

-------------------------------------------------- */

.badge {
	display: inline-block;
	padding: 0.6rem;
	background-color: #b63b2d;
	font-size: 1.2rem;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

.badge--new { background-color: #b63b2d;}
.badge--nano { background-color: #4879b8;}
.badge--empty { background-color: transparent; padding-right: 0; padding-left: 0;}

.badge--size-small {
	padding: 0.4rem 0.6rem;
	font-size: 0.8rem;
}


/* --------------------------------------------------

	head-parts

-------------------------------------------------- */

.head-parts {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 6rem;
}

.head-parts__title {
	position: relative;
	font-size: 4.5rem;
	line-height: 1;
}

.head-parts__title:before {
	content: '';
	position: absolute;
	top: 50%;
	right: calc(100% + 3.2rem);
	display: block;
	width: 100vw;
	height: 1px;
	background-color: currentColor;
}

@media screen and (max-width: 768px) {
	
	.head-parts {
		margin: 0 0 3.6rem;
	}
	
	.head-parts__title {
		font-size: 2.4rem;
	}
	
	.head-parts__title:before {
		right: calc(100% + 1.5rem);
	}
	
	.head-parts--sp-column {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.head-parts--sp-column .head-parts__title {
		margin-bottom: 2rem;
	}
	
}


/* --------------------------------------------------

	header

-------------------------------------------------- */

.header {
	position: fixed;
	top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 6rem 6rem 0;
	color: #fff;
}

.header--dark {
	color: #000;
}

.header.is-fixed,
body.is-panel-active .header {
	padding: 3rem 3rem 0;
	transition: all 0.45s;
}

@media screen and (max-width: 768px) {
	
	.header {
		padding: 4rem 3rem 0;
	}
	
	.header.is-fixed,
	body.is-panel-active .header  {
		padding: 2rem 2rem 0;
	}
	
	
}


.header__logo svg {
	width: 150px;
	transition: all 0.45s;
}

.svg-logo {
	fill: #fff;
	transition: all 0.45s;
}

.header--dark .svg-logo,
body.is-panel-active .svg-logo {
	fill: #000;
}

.header.is-fixed .header__logo svg,
body.is-panel-active .header .header__logo svg {
	width: 80px;
}


@media screen and (max-width: 768px) {

	.header__logo svg {
		width: 75px;
	}
	
	.header.is-fixed .header__logo svg,
	body.is-panel-active .header .header__logo svg {
		width: 48px;
	}

	
}


.nav {
	display: flex;
	margin: 0 -2.6rem;
	padding: 0;
	list-style: none;
	font-size: 2rem;
}

.home .nav {
	color: #fff;
	transition: all 0.45s;
}

.nav li {
	padding: 0 2.6rem;
}

.nav-item {
	position: relative;
	display: block;
	color: #fff;
}

.nav-item > a,
.nav-item > span {
	display: block;
	padding: 0.6rem 0;
	border-bottom: 1px solid transparent;
	color: #fff;
	line-height: 1;
}

.nav-item > a.is-active,
.nav-item > span.is-active {
	border-bottom-color: currentColor;
}

.home .nav-item > a,
.home .nav-item > span {
	color: #fff;
	mix-blend-mode: difference;
}

.header--dark .nav-item > a,
.nav-item > span {
	color: #000;
}



.nav-item-child {
	position: absolute;
	top: 100%;
	left: 2.6rem;
	padding: 2rem 1rem;
	background-color: rgba(255 255 255 / 50%); 
	transition: opacity .3s, visibility .3s;
	visibility: hidden;
	opacity: 0;
}

.nav-item:hover .nav-item-child {
	opacity: 1;
	transition: opacity .3s, visibility .3s;
	visibility: visible;
}

.nav-item-child a {
	position: relative;
	display: inline-block;
	padding-left: 14px;
	color: #000;
	white-space: nowrap;
}

.nav-item-child a:before {
	content: '';
	top: 50%;
	position: absolute;
	left: 0;
	display: block;
	width: 6px;
	height: 1px;
	background-color: #000;
}

@media screen and (max-width: 768px) {
	
	.header__nav {
		display: none;
	}
	
}


/* --------------------------------------------------

	footer

-------------------------------------------------- */

.footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding-top: 10rem;
	padding-bottom: 3.6rem;
}

.footer__col {}

@media screen and (max-width: 768px) {
	
	.footer {
		padding-top: 5.2rem;
	}
	
	.footer__col--logo {
		order: 3;
		width: 100%;
		margin-top: 4rem;
		text-align: center;
	}
	
}


.footer-btn {}

.footer-logo img {
	width: 77px;
}

.btn-pagetop {
	display: flex;
	align-items: center;
}

.btn-pagetop__circle {
	position: relative;
	display: block;
	width: 29px;
	height: 29px;
	margin: 0 0 0 1rem;
	background-color: #b3b3b3;
	border-radius: 50%;
}

.btn-pagetop__icon {
}

.btn-pagetop__icon::before {
	content: '';
	position: absolute;
	top: 1rem;
	left: 50%;
	width: 0.625rem;
	height: 0.625rem;
	display: block;
	border-top: 0.1rem solid #fff;
	border-right: 0.1rem solid #fff;
	transform: translateX(-50%) rotate(315deg);
}

.btn-pagetop__icon::after {
	content: '';
	position: absolute;
	top: 1rem;
	left: 50%;
	display: block;
    width: 0.1rem;
	height: 1.125rem;
	background-color: #fff;
	transform: translateX(-50%);
}

.btn-request {
	display: flex;
	align-items: center;
	height: 41px;
	padding: 0 2.5rem 0 0;
	background-color: #fff;
	border: 1px solid #b3b3b3;
	border-radius: 99999px;
	font-size: 1.5rem;
	color: #333;
	line-height: 39px;
}

.btn-request__circle {
	position: relative;
	display: block;
	width: 13px;
	height: 13px;
	margin: 0 1rem 0 1.6rem;
	background-color: transparent;
	border-radius: 50%;
}

.btn-request__circle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0.7rem;
	width: 0.625rem;
	height: 0.625rem;
	display: block;
	border-top: 0.1rem solid #353434;
	border-right: 0.1rem solid #353434;
	transform: translateY(-50%) rotate(45deg);
}

.btn-request__circle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
    width: 1.3rem;
	height: 0.1rem;
	background-color: #353434;
	transform: translateY(-50%);
}

.copyright {
	padding-top: 4rem;
	padding-bottom: 4rem;
	background-color: #f2f2f2;
	font-size: 1.3rem;
	text-align: center;
}

@media screen and (max-width: 768px) {
	
	.copyright {
		font-size: 1rem;
	}
	
}

.mouse-clicked {
	border-color: #fff;
	mix-blend-mode: difference;
	filter: saturate(200%);
}

.mouse.cirle {
	border-color: #fff;
	mix-blend-mode: difference;
	filter: saturate(200%);
}


/* --------------------------------------------------

	btn

-------------------------------------------------- */

.learn-more {
	position: relative;
	display: block;
	height: auto;
	padding: 0 2rem 0 0;
	background: transparent;
	border: 0;
	font-size: 1.8rem;
	vertical-align: middle;
	text-decoration: none;
	cursor: pointer;
	outline: none;
}


.learn-more .circle {
	position: absolute;
	display: block;
	width: 3rem;
	height: 3rem;
	margin: 0;
	background: #000;
	border-radius: 99999px;
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

.learn-more .circle .icon {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background: #fff;
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

.learn-more .circle .icon.arrow {
	left: 0.9rem;
	width: 1.125rem;
	height: 0.125rem;
	background: #fff;
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

.learn-more .circle .icon.arrow::before {
	content: "";
	position: absolute;
	top: -0.29rem;
	right: 0.0625rem;
	width: 0.625rem;
	height: 0.625rem;
	border-top: 0.125rem solid #fff;
	border-right: 0.125rem solid #fff;
	transform: rotate(45deg);
}

.learn-more .button-text {
	position: relative;
	z-index: 2;
	display: block;
	margin: 0 0 0 4rem;
	padding: 0;
	color: #000;
	line-height: 3rem;
	text-align: left;
	white-space: nowrap;
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

.learn-more:hover .circle {
	width: 100%;
}

.learn-more:hover .circle .icon.arrow {
	background: #fff;
	transform: translate(1rem, 0);
}

.learn-more:hover .button-text {
	color: #fff;
}

@media screen and (max-width: 768px) {
	
	.learn-more {
		font-size: 1.4rem;
	}

	.learn-more .circle {
		width: 2.4rem;
		height: 2.4rem;
	}

	.learn-more .circle .icon.arrow {
		left: 0.75rem;
		width: 1rem;
		height: 0.125rem;
	}

	.learn-more .circle .icon.arrow::before {
		top: -0.29rem;
		right: 0.0625rem;
		width: 0.625rem;
		height: 0.625rem;
		border-top: 0.125rem solid #fff;
		border-right: 0.125rem solid #fff;
	}

	.learn-more .button-text {
		margin: 0 0 0 3.4rem;
		line-height: 2.4rem;
	}
	
}


/* --------------------------------------------------

	products / top - products

-------------------------------------------------- */

.top-products {
	position: relative;
	padding-top: 12rem;
	padding-bottom: 12rem;
}

.products-bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.products-bg.is-active {
	display: block;
}

.products-bg--premium { background-image: url("../images/products-back/01_premium.jpg");}
.products-bg--urban { background-image: url("../images/products-back/02_urban.jpg");}
.products-bg--earth { background-image: url("../images/products-back/03_earth.jpg");}
.products-bg--fabric { background-image: url("../images/products-back/04_fabric.jpg");}
.products-bg--japan { background-image: url("../images/products-back/05_japan.jpg");}
.products-bg--comfort { background-image: url("../images/products-back/06_comfort.jpg");}
.products-bg--basic { background-image: url("../images/products-back/07_basic.jpg");}


.products .top-products {
	padding-top: 24rem;
	padding-bottom: 4rem;
}


@media screen and (max-width: 768px) {
	
	.top-products {
		padding-top: 8rem;
		padding-bottom: 8rem;
	}

	.products .top-products {
		padding-top: 16rem;
		padding-bottom: 4rem;
	}
	
}


.top-products .inner {
	position: relative;
}

.top-products:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0 0 0 / 60%);
}

.products-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -2.7rem 3.8rem;
}

.products-col {
	display: flex;
	width: 50%;
	margin: 0 0 3.8rem;
	padding: 0 2.7rem;
}

@media screen and (max-width: 768px) {
	
	.products-row {
		flex-direction: column;
		margin: 0;
		padding: 0;
	}

	.products-col {
		width: 100%;
		margin: 0 0 2rem;
		padding: 0;
	}
	
}


.products-box {
	display: block;
	width: 100%;
	min-height: 200px;
	padding: 2.4rem;
	background-color: transparent;
	backdrop-filter: blur(0);
	border: 1px solid #fff;
	color: #fff;
	cursor: pointer;
	transition: all ease-in-out 0.3s;
}

.products-box:hover {
	backdrop-filter: blur(15px);
}

@media screen and (max-width: 768px) {
	
	.products-box {
		min-height: inherit;
	}

}

.products-box__header {
	display: flex;
	align-items: center;
	margin: 0 0 2.4rem;
}

.products-box__thumbnail {
	width: 30px;
	height: 30px;
	margin: 0 1rem 0 0;
}

.products-box--premium .products-box__thumbnail { background-color: #b3b1b5;}
.products-box--urban .products-box__thumbnail { background-color: #9cb1c0;}
.products-box--earth .products-box__thumbnail { background-color: #a6c19c;}
.products-box--fabric .products-box__thumbnail { background-color: #d2bd88;}
.products-box--japan .products-box__thumbnail { background-color: #b89ea7;}
.products-box--comfort .products-box__thumbnail { background-color: #ae9f95;}
.products-box--basic .products-box__thumbnail { background-color: #d2b897;}
.products-box--others .products-box__thumbnail { background-color: #cccccc;}


.products-box__title {
	width: calc( 100% - 48px );
	font-size: 2rem;
	line-height: 1;
}

.products-box--arrow {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}

.products-box--arrow:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 28px;
	height: 1px;
	background-color: #fff;
	transform: rotate(-45deg);
	transform-origin: right center;
}

.products-box__body ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1rem -1rem;
	font-size: 1.3rem;
	line-height: 1.4;
}

.products-box__body li {
	margin: 0 0 1rem;
	padding: 0 1rem;
}

.products-box__body-col-4 { width: 33.33333333%;}
.products-box__body-col-6 { width: 50%;}
.products-box__body-col-12 { width: 100%;}

@media screen and (max-width: 1080px) {

	.products-box__body-col-4 { width: 50%;}
	.products-box__body-col-6 { width: 100%;}
	
}

@media screen and (max-width: 768px) {
	
	.products-box__body-col-4 { width: 100%;}

}


/* --------------------------------------------------

	products category

-------------------------------------------------- */

.category-title {
	position: relative;
	display: flex;
	align-items: flex-end;
	margin-top: 14rem;
	margin-bottom: 5.2rem;
	padding: 0 0 0 2.5rem;
}

.category-title:before {
	content: '';
	position: absolute;
	top: -2rem;
	left: 0;
	z-index: -1;
	display: block;
	width: 40px;
	height: 40px;
}

.category-title--premium:before { background-color: #b3b1b5;}
.category-title--urban:before { background-color: #9cb1c0;}
.category-title--earth:before { background-color: #a6c19c;}
.category-title--fabric:before { background-color: #d2bd88;}
.category-title--japan:before { background-color: #b89ea7;}
.category-title--comfort:before { background-color: #ae9f95;}
.category-title--basic:before { background-color: #d2b897;}

.category-title__en {
	margin: 0;
	padding: 0;
	font-size: 4rem;
	line-height: 1.6;
}

.category-title__ja {
	margin: 0 0 0.6rem 1.4rem;
	font-size: 2rem;
	line-height: 1.6;
}

@media screen and (max-width: 768px) {
	
	.category-title {
		margin-top: 4.8rem;
		margin-bottom: 3.2rem;
		padding: 0 0 0 1.2rem;
	}

	.category-title:before {
		top: -1rem;
		width: 20px;
		height: 20px;
	}

	.category-title__en {
		font-size: 2.4rem;
	}

	.category-title__ja {
		font-size: 1.5rem;
	}
	
}


.item-nav {
	margin: 0 0 5.2rem;
}

.item-nav--sp { display: none;}

@media screen and (max-width: 768px) {
	
	.item-nav--pc { display: none;}
	.item-nav--sp { display: block;}
	
}


.item-nav ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1.5rem -1.6rem;
	padding: 0;
	list-style: none;
}

.item-nav li {
	margin-bottom: 1.6rem;
	padding: 0 1.5rem;
}

.item-nav li a {
	display: block;
	padding: 0.6rem 0;
	border-bottom: 1px solid currentColor;
	line-height: 1;
}


.products-list-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -2.4rem 10rem;
}

.products-list-col {
	width: 33.33333333%;
	margin: 0 0 8rem;
	padding: 0 2.4rem;
}

@media screen and (max-width: 768px) {
	
	.products-list-row {
		margin: 0;
	}

	.products-list-col {
		width: 100%;
		margin: 0 0 4rem;
		padding: 0;
	}
	
}


.products-list-box {
	display: block;
}

.products-list-box__photo {
	margin: 0 0 3.2rem;
}

@media screen and (max-width: 768px) {
	
	.products-list-box__photo {
		margin-bottom: 1.6rem;
	}
	
}

.products-list-box__sup {
	display: flex;
	align-items: center;
	margin: 0 -4px 1rem;
}

.products-list-box__sup-num {
	padding: 0 4px;
	font-size: 1.6rem;
	line-height: 1;
}

.products-list-box__sup-ja {
	padding: 0 4px;
	font-size: 1.4rem;
	line-height: 1;
}

.products-list-box__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 1.2rem;
	padding: 0 0 1.6rem;
	border-bottom: 1px solid #ccc;
}

.products-list-box__title {
	font-size: 3rem;
	line-height: 1;
}

.products-list-box__title-sup {
	font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
	
	.products-list-box__title-sup {
		display: block;
		margin-top: 0.4rem;
	}
	
}


.products-list-box__badge ul {
	display: flex;
	align-items: center;
	margin: 0 -2px -4px;
	padding: 0;
	list-style: none;
}

.products-list-box__badge li {
	margin: 0 0 4px;
	padding: 0 2px;
}

@media screen and (max-width: 768px) {
	
	.products-list-box__badge {
		width: 8rem;
	}
	
	.products-list-box__badge ul {
		flex-direction: column;
		margin-bottom: -3px;
	}
	
	.products-list-box__badge li {
		width: 100%;
		margin: 0 0 3px;
	}
	
	.products-list-box__badge .badge {
		display: block;
		width: 100%;
		padding-right: 1rem;
		padding-left: 1rem;
		text-align: center;
		font-size: 1rem;
	}
	
}


.products-list-box__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.products-list-box__price {
	margin: 0 0 1.2rem;
	font-size: 1.2rem;
}

.label-ls { width: 60px;}
.label-vary { width: 36px;}


.products-list-box__price-num {
	font-size: 1.6rem;
}

.products-list-box__color ul {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 0 -0.2rem -0.4rem;
	padding: 0;
	list-style: none;
}

.products-list-box__color li {
	margin-bottom: 0.4rem;
	padding: 0 0.2rem;
	line-height: 1;
}

.new-line {
	width: 100%;
	height: 0 !important;
	margin: 0 !important;
}

@media screen and (max-width: 1120px) {
	
	.new-line { display: none !important;}
	.new-line--sp { display: block!important;}
	
}


.color-thumb {
	display: block;
	width: 2.5rem;
	aspect-ratio: 1 / 1;
}

.color-thumb--large {
	width: 3.75rem;
}

.color-thumb--rectangle {
	width: 5rem;
	aspect-ratio: 3 / 1;
}


/* --------------------------------------------------

	products - GX Premium

-------------------------------------------------- */

.color-thumb--breathflora01 { background-color: #d1927c;}
.color-thumb--breathflora02 { background-color: #b3abaa;}
.color-thumb--breathflora03 { background-color: #918784;}
.color-thumb--breathflora04 { background-color: #d2c2af;}

.color-thumb--grand-flow01 { background-color: #c5c0bb;}
.color-thumb--grand-flow02 { background-color: #c4b4a4;}
.color-thumb--grand-flow03 { background-color: #98938f;}
.color-thumb--grand-flow04 { background-color: #5c6682;}

.color-thumb--with-time01 { background-color: #5f7893;}
.color-thumb--with-time02 { background-color: #5a585a;}
.color-thumb--with-time03 { background-color: #b3944e;}

.color-thumb--with-time-mt01 { background-color: #446783;}
.color-thumb--with-time-mt02 { background-color: #446783;}
.color-thumb--with-time-mt03 { background-color: #6f7175;}
.color-thumb--with-time-mt04 { background-color: #6f7175;}


/* --------------------------------------------------

	products - Urban

-------------------------------------------------- */

.color-thumb--foggyrock01 { background-color: #827d7c;}
.color-thumb--foggyrock02 { background-color: #a59d9c;}
.color-thumb--foggyrock03 { background-color: #c2bab2;}
.color-thumb--foggyrock04 { background-color: #bfb298;}
.color-thumb--foggyrock05 { background-color: #ac9f85;}
.color-thumb--foggyrock06 { background-color: #b09b84;}
.color-thumb--foggyrock07 { background-color: #887364;}
.color-thumb--foggyrock08 { background-color: #59524b;}

.color-thumb--mortarclay01 { background-color: #6d696b;}
.color-thumb--mortarclay02 { background-color: #aaa197;}
.color-thumb--mortarclay03 { background-color: #83776d;}
.color-thumb--mortarclay04 { background-color: #1b1e1a;}
.color-thumb--mortarclay05 { background-color: #7e7163;}
.color-thumb--mortarclay06 { background-color: #325273;}
.color-thumb--mortarclay07 { background-color: #7a8638;}

.color-thumb--srone01 { background-color: #786960;}
.color-thumb--srone02 { background-color: #a8a59a;}
.color-thumb--srone03 { background-color: #5e5a5b;}
.color-thumb--srone04 { background-color: #302c2d;}
.color-thumb--srone05 { background-color: #9e8b78;}

.color-thumb--plaidway01 { background-color: #aa8b72;}
.color-thumb--plaidway02 { background-color: #593729;}
.color-thumb--plaidway03 { background-color: #4f4a46;}
.color-thumb--plaidway04 { background-color: #a09b76;}

.color-thumb--foldshape01 { background-color: #546373;}
.color-thumb--foldshape02 { background-color: #9f9891;}
.color-thumb--foldshape03 { background-color: #5d5752;}
.color-thumb--foldshape04 { background-color: #8c8537;}
.color-thumb--foldshape05 { background-color: #aa5e34;}

.color-thumb--geoslant01 { background-color: #535454;}
.color-thumb--geoslant02 { background-color: #bd8f3c;}
.color-thumb--geoslant03 { background-color: #852224;}
.color-thumb--geoslant04 { background-color: #a7a29f;}


/* --------------------------------------------------

	products - Earth

-------------------------------------------------- */

.color-thumb--aqualuce01 { background-color: #7594a7;}
.color-thumb--aqualuce02 { background-color: #7594a7;}
.color-thumb--aqualuce03 { background-color: #7594a7;}
.color-thumb--aqualuce04 { background-color: #9e9694;}
.color-thumb--aqualuce05 { background-color: #9e9694;}
.color-thumb--aqualuce06 { background-color: #9e9694;}
.color-thumb--aqualuce07 { background-color: #787678;}
.color-thumb--aqualuce08 { background-color: #787678;}
.color-thumb--aqualuce09 { background-color: #787678;}

.color-thumb--luceart01 { background-color: #3d6a8d;}
.color-thumb--luceart02 { background-color: #b2b85c;}
.color-thumb--luceart03 { background-color: #8d7564;}
.color-thumb--luceart04 { background-color: #97928b;}
.color-thumb--luceart05 { background-color: #5a4940;}

.color-thumb--link-space01 { background-color: #787f46;}
.color-thumb--link-space02 { background-color: #787f46;}
.color-thumb--link-space03 { background-color: #787f46;}
.color-thumb--link-space04 { background-color: #85684f;}
.color-thumb--link-space05 { background-color: #85684f;}
.color-thumb--link-space06 { background-color: #85684f;}
.color-thumb--link-space07 { background-color: #4d4844;}
.color-thumb--link-space08 { background-color: #4d4844;}
.color-thumb--link-space09 { background-color: #4d4844;}

.color-thumb--diffebriller01 { background-color: #7da4a2;}
.color-thumb--diffebriller02 { background-color: #a6a29d;}
.color-thumb--diffebriller03 { background-color: #8a8183;}
.color-thumb--diffebriller04 { background-color: #cdb48e;}
.color-thumb--diffebriller05 { background-color: #846b5c;}

.color-thumb--rock-garden01 { background-color: #767779;}
.color-thumb--rock-garden02 { background-color: #4d4c4c;}

.color-thumb--prarie01 { background-color: #91a72f;}
.color-thumb--prarie02 { background-color: #556933;}

.color-thumb--haze-peak01 { background-color: #7d7849;}
.color-thumb--haze-peak02 { background-color: #858688;}
.color-thumb--haze-peak03 { background-color: #686b6e;}
.color-thumb--haze-peak04 { background-color: #aea191;}

.color-thumb--altglan01 { background-color: #737d43;}
.color-thumb--altglan02 { background-color: #9f7559;}
.color-thumb--altglan03 { background-color: #5a3f37;}
.color-thumb--altglan04 { background-color: #5a5354;}
.color-thumb--altglan05 { background-color: #733436;}
.color-thumb--altglan06 { background-color: #47405a;}
.color-thumb--altglan07 { background-color: #384d6a;}

.color-thumb--altglan-mt01 { background-color: #778046;}
.color-thumb--altglan-mt02 { background-color: #778046;}
.color-thumb--altglan-mt03 { background-color: #778046;}
.color-thumb--altglan-mt04 { background-color: #344365;}
.color-thumb--altglan-mt05 { background-color: #344365;}
.color-thumb--altglan-mt06 { background-color: #344365;}

.color-thumb--resonance01 { background-color: #bb9f88;}
.color-thumb--resonance02 { background-color: #674f48;}

.color-thumb--veniche01 { background-color: #9d7a5c;}
.color-thumb--veniche02 { background-color: #584748;}
.color-thumb--veniche03 { background-color: #916c63;}


/* --------------------------------------------------

	products - Fabric

-------------------------------------------------- */

.color-thumb--waffle-knit01 { background-color: #d1ae56;}
.color-thumb--waffle-knit02 { background-color: #9e928f;}
.color-thumb--waffle-knit03 { background-color: #5d473b;}
.color-thumb--waffle-knit04 { background-color: #beaa79;}
.color-thumb--waffle-knit05 { background-color: #99a540;}

.color-thumb--moroca-line01 { background-color: #d2c9be;}
.color-thumb--moroca-line02 { background-color: #b8ac9b;}
.color-thumb--moroca-line03 { background-color: #918478;}

.color-thumb--ocash01 { background-color: #201917;}
.color-thumb--ocash02 { background-color: #bbaa96;}
.color-thumb--ocash03 { background-color: #8d7664;}
.color-thumb--ocash04 { background-color: #60493e;}
.color-thumb--ocash05 { background-color: #796e6c;}

.color-thumb--etrico01 { background-color: #bdc1be;}
.color-thumb--etrico02 { background-color: #7d8489;}
.color-thumb--etrico03 { background-color: #5a524d;}
.color-thumb--etrico04 { background-color: #c3b19e;}
.color-thumb--etrico05 { background-color: #7c6954;}

.color-thumb--latticloth01 { background-color: #a47f68;}
.color-thumb--latticloth02 { background-color: #4e332e;}
.color-thumb--latticloth03 { background-color: #416d88;}
.color-thumb--latticloth04 { background-color: #364155;}

.color-thumb--calmgrain01 { background-color: #b09f91;}
.color-thumb--calmgrain02 { background-color: #8b847b;}
.color-thumb--calmgrain03 { background-color: #645e5b;}
.color-thumb--calmgrain04 { background-color: #67737d;}
.color-thumb--calmgrain05 { background-color: #81716b;}
.color-thumb--calmgrain06 { background-color: #4a4344;}

.color-thumb--calmgrain-mt01 { background-color: #b3a396;}
.color-thumb--calmgrain-mt02 { background-color: #b3a396;}
.color-thumb--calmgrain-mt03 { background-color: #b3a396;}
.color-thumb--calmgrain-mt04 { background-color: #7b716b;}
.color-thumb--calmgrain-mt05 { background-color: #7b716b;}
.color-thumb--calmgrain-mt06 { background-color: #7b716b;}


/* --------------------------------------------------

	products - Japan

-------------------------------------------------- */

.color-thumb--soundscape01 { background-color: #c0beb8;}
.color-thumb--soundscape02 { background-color: #c4bca8;}
.color-thumb--soundscape03 { background-color: #7b7b7f;}
.color-thumb--soundscape04 { background-color: #76665b;}
.color-thumb--soundscape05 { background-color: #434e56;}
.color-thumb--soundscape06 { background-color: #615049;}
.color-thumb--soundscape07 { background-color: #27272d;}
.color-thumb--soundscape08 { background-color: #c29777;}
.color-thumb--soundscape09 { background-color: #c0beb8;}
.color-thumb--soundscape10 { background-color: #c4bca8;}
.color-thumb--soundscape11 { background-color: #7b7b7f;}
.color-thumb--soundscape12 { background-color: #76665b;}
.color-thumb--soundscape13 { background-color: #434e56;}
.color-thumb--soundscape14 { background-color: #615049;}
.color-thumb--soundscape15 { background-color: #27272d;}
.color-thumb--soundscape16 { background-color: #c29777;}


.color-thumb--grandair01 { background-color: #ab987e;}
.color-thumb--grandair02 { background-color: #615d5d;}
.color-thumb--grandair03 { background-color: #967f61;}
.color-thumb--grandair04 { background-color: #3d3842;}
.color-thumb--grandair05 { background-color: #61504b;}
.color-thumb--grandair06 { background-color: #ab987e;}
.color-thumb--grandair07 { background-color: #615d5d;}
.color-thumb--grandair08 { background-color: #967f61;}
.color-thumb--grandair09 { background-color: #3d3842;}
.color-thumb--grandair10 { background-color: #61504b;}
.color-thumb--grandair11 { background-color: #c1b9b7;}
.color-thumb--grandair12 { background-color: #9b3933;}
.color-thumb--grandair13 { background-color: #29456a;}

.color-thumb--inspiration01 { background-color: #d1bdab;}
.color-thumb--inspiration02 { background-color: #7a5e4b;}
.color-thumb--inspiration03 { background-color: #c29971;}
.color-thumb--inspiration04 { background-color: #82835b;}
.color-thumb--inspiration05 { background-color: #382d47;}
.color-thumb--inspiration06 { background-color: #d1bdab;}
.color-thumb--inspiration07 { background-color: #7a5e4b;}
.color-thumb--inspiration08 { background-color: #c29971;}
.color-thumb--inspiration09 { background-color: #82835b;}
.color-thumb--inspiration10 { background-color: #382d47;}

.color-thumb--classic01 { background-color: #33343e;}
.color-thumb--classic02 { background-color: #121622;}
.color-thumb--classic03 { background-color: #7f645a;}
.color-thumb--classic04 { background-color: #5a4644;}

.color-thumb--sokoitari01 { background-color: #615959;}
.color-thumb--sokoitari02 { background-color: #4d525a;}
.color-thumb--sokoitari03 { background-color: #8a725f;}
.color-thumb--sokoitari04 { background-color: #63524b;}

.color-thumb--yuisome01 { background-color: #888472;}
.color-thumb--yuisome02 { background-color: #a6b9c2;}
.color-thumb--yuisome03 { background-color: #b3b9bc;}
.color-thumb--yuisome04 { background-color: #e0c0a9;}
.color-thumb--yuisome05 { background-color: #c0b19e;}


/* --------------------------------------------------

	products - Comfort

-------------------------------------------------- */

.color-thumb--granastone01 { background-color: #b0a095;}
.color-thumb--granastone02 { background-color: #a5907c;}
.color-thumb--granastone03 { background-color: #a18a7a;}
.color-thumb--granastone04 { background-color: #6c6866;}

.color-thumb--orvie01 { background-color: #5d4b49;}
.color-thumb--orvie02 { background-color: #987d65;}

.color-thumb--nocture01 { background-color: #a78f75;}
.color-thumb--nocture02 { background-color: #7e3337;}


/* --------------------------------------------------

	products - Basic

-------------------------------------------------- */

.color-thumb--gx-200-01 { background-color: #d2c6b8;}
.color-thumb--gx-200-02 { background-color: #dbbe95;}
.color-thumb--gx-200-03 { background-color: #ae8d63;}
.color-thumb--gx-200-04 { background-color: #7b5e47;}
.color-thumb--gx-200-05 { background-color: #4d341c;}
.color-thumb--gx-200-06 { background-color: #493d36;}
.color-thumb--gx-200-07 { background-color: #35221c;}
.color-thumb--gx-200-08 { background-color: #949795;}
.color-thumb--gx-200-09 { background-color: #575853;}
.color-thumb--gx-200-10 { background-color: #403a34;}
.color-thumb--gx-200-11 { background-color: #363b37;}
.color-thumb--gx-200-12 { background-color: #1e1c1d;}
.color-thumb--gx-200-13 { background-color: #55522b;}
.color-thumb--gx-200-14 { background-color: #232c27;}
.color-thumb--gx-200-15 { background-color: #172836;}
.color-thumb--gx-200-16 { background-color: #0e1723;}
.color-thumb--gx-200-17 { background-color: #382437;}
.color-thumb--gx-200-18 { background-color: #e9990a;}
.color-thumb--gx-200-19 { background-color: #bb4323;}
.color-thumb--gx-200-20 { background-color: #c35657;}
.color-thumb--gx-200-21 { background-color: #94212b;}
.color-thumb--gx-200-22 { background-color: #4b0e1f;}

.color-thumb--gx-300-01 { background-color: #c3b091;}
.color-thumb--gx-300-02 { background-color: #a68157;}
.color-thumb--gx-300-03 { background-color: #a59373;}
.color-thumb--gx-300-04 { background-color: #665440;}
.color-thumb--gx-300-05 { background-color: #453429;}
.color-thumb--gx-300-06 { background-color: #aba49a;}
.color-thumb--gx-300-07 { background-color: #696258;}
.color-thumb--gx-300-08 { background-color: #403f3c;}
.color-thumb--gx-300-09 { background-color: #1c1f1f;}
.color-thumb--gx-300-10 { background-color: #80948a;}
.color-thumb--gx-300-11 { background-color: #728087;}
.color-thumb--gx-300-12 { background-color: #28417e;}
.color-thumb--gx-300-13 { background-color: #2a3052;}
.color-thumb--gx-300-14 { background-color: #766d3a;}
.color-thumb--gx-300-15 { background-color: #42442a;}
.color-thumb--gx-300-16 { background-color: #d2b33e;}
.color-thumb--gx-300-17 { background-color: #c96f36;}
.color-thumb--gx-300-18 { background-color: #533059;}
.color-thumb--gx-300-19 { background-color: #c12a32;}
.color-thumb--gx-300-20 { background-color: #dd897e;}


/* --------------------------------------------------

	products detail

-------------------------------------------------- */

.detail-row {
	display: flex;
	justify-content: space-between;
	margin: 0 0 12rem;
}

.detail-col--head { width: 29.642857%;}
.detail-col--body--pc { width: 64.285714%;}

.detail-col--body--sp { display: none;}

@media screen and (max-width: 768px) {
	
	.detail-row {
		display: block;
		margin: 0 0 4rem;
	}

	.detail-col--head { width: 100%;}
	
	.detail-col--body--pc {
		display: none;
	}
	
	.detail-col--body--sp {
		display: block;
		width: 100%;
		margin-bottom: 4.8rem;
	}
	
}


.breadcrumb {
	margin: 0 0 2.4rem;
}

.breadcrumb ul {
	display: flex;
	margin: 0;
	padding: 0;
	font-size: 1.4rem;
	list-style: none;
}

.breadcrumb li {
	margin: 0;
	padding: 0;
}

.breadcrumb li + li:before {
	content: '/';
	display: inline-block;
	padding: 0 0.4rem;
}

.breadcrumb li a {
	display: inline-block;
	padding: 0 0 0.2rem;
	border-bottom: 1px solid #000;
	line-height: 1;
}

.detail-info {
	display: flex;
	margin: 0 -0.6rem;
}

.detail-info__no {
	padding: 0 0.6rem;
}

.detail-info__ja {
	padding: 0 0.6rem;
}

.detail-title {
	margin: 0 0 0.4rem;
	font-size: 4rem;
	line-height: 1.4;
}

.detail-title__small {
	font-size: 2rem;
}

@media screen and (max-width: 768px) {

	.detail-title__small {
		display: block;
		margin-top: 0.6rem;
		font-size: 1.6rem;
	}
	
}


.detail-badge {
	margin: 0 0 1.6rem;
}

.detail-badge ul {
	display: flex;
	margin: 0 -0.2rem;
	padding: 0;
	list-style: none;
}

.detail-badge li {
	padding: 0 0.2rem;
}

.detail-price-wrap {
	display: flex;
	justify-content: space-between;
	margin: 0 0 3.6rem;
}

.price {
	margin: 0;
	font-size: 1.4rem;
}

.price__num {
	font-size: 2rem;
}

.detail-price__label {
	display: flex;
	align-items: flex-start;
	margin: 0 -0.5rem;
}

.detail-price__label-col {
	padding: 0 0.5rem;
}

.detail-price__label-ls { width: 60px; vertical-align: top;}
.detail-price__label-vary { width: 35px; vertical-align: top;}

.detail-text {
	margin-bottom: 3.6rem;
	line-height: 1.68;
}

.detail-text > :last-child {
	margin-bottom: 0;
}

.detail-number {
	margin-bottom: 3.6rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #ccc;
}


.detail-number__title {
	margin: 0 0 1rem;
	font-size: 1.6rem;
	line-height: 1;
}

.detail-number-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -0.6rem;
}

.detail-number-col {
	width: 33.33333333%;
	margin: 0 0 3rem;
	padding: 0 0.6rem;
}

.detail-number-col-6 {
	width: 50%;
	margin: 0 0 3rem;
	padding: 0 0.6rem;
}

@media screen and (max-width: 768px) {
	
	.detail-number__title {
		font-size: 1.6rem;
	}
	
	.detail-number-row {
		margin: 0 -1rem;
	}

	.detail-number-col {
		width: 25%;
		margin: 0 0 4rem;
		padding: 0 1rem;
	}
	
	.detail-number-col-6 {
		width: 50%;
		margin: 0 0 4rem;
		padding: 0 1rem;
	}
	
}


.number-box {
	display: block;
	cursor: pointer;
}

.number-box__photo {
	margin: 0 0 0.6rem;
}

.number-box__text {
	font-size: 1.4rem;
	line-height: 1.3;
}

.number-box__text-ja {
	font-size: 1.2rem;
}

.number-box__badge {
	margin-top: 0.6rem;
}

.number-box__badge ul {
	display: flex;
	margin: 0 -0.2rem;
}

.number-box__badge li {
	padding: 0 0.2rem;
	line-height: 1;
}

@media screen and (max-width: 768px) {
	
	.number-box__badge {
		display: none;
	}
	
}


.detail-table {
	width: 100%;
	margin-bottom: 3rem;
}

.detail-table th,
.detail-table td {
	padding: 0.4rem 0;
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 1.26;
}

.detail-table__th { width: 70px;}
.detail-table__sub { width: 86px;}
.detail-table__text {}

.detail-spec {
	margin: 0 0 5.2rem;
}

.detail-spec ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 -0.2rem -0.4rem;
}

.detail-spec li {
	width: 12.5%;
	margin: 0 0 0.4rem;
	padding: 0 0.2rem;
	text-align: center;
}

.detail-spec .detail-spec__15 {
	width: 25%;
}


.detail-btn-wrap {
	margin-bottom: 10rem;
}

.detail-btn {
	display: flex;
}

.detail-btn + .detail-btn {
	margin-top: 1.6rem;
}

@media screen and (max-width: 768px) {
	
	.detail-btn-wrap {
		margin-bottom: 6rem;
	}
	
}


.btn-back {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 28rem;
	padding: 1.6rem 0;
	border: 1px solid #353434;
	font-size: 3rem;
	line-height: 1;
}

.btn-back:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	left: 0;
	z-index: -1;
	display: block;
	background-color: #000;
	transition: all 0.45s;
}

.btn-back:hover {
	color: #fff;
}

.btn-back:hover:before {
	right: 0;
}

.btn-back .btn-back__arrow {
	position: relative;
	top: 50%;
	display: block;
	height: 1px;
	width: 6rem;
	margin-right: 1.2rem;
	background-color: #353434;
}

.btn-back .btn-back__arrow:before {
	content: '';
	position: absolute;
	left: 1px;
	top: 50%;
	display: block;
	width: 12px;
	height: 12px;
	border-top: 1px solid #353434;
	border-left: 1px solid #353434;
	transform: translateY(-50%) rotate(-45deg);
}

.btn-back:hover .btn-back__arrow {
	background-color: #fff;
}

.btn-back:hover .btn-back__arrow:before {
	border-top-color: #fff;
	border-left-color: #fff;
}

.btn-back--white {
	border-color: #fff;
}

.btn-back--white:before {
	background-color: #fff;
}

.btn-back--white:hover {
	color: #000;
}

.btn-back--white .btn-back__arrow {
	background-color: #fff;
}

.btn-back--white .btn-back__arrow:before {
	border-top-color: #fff;
	border-left-color:#fff;
}

.btn-back--white:hover .btn-back__arrow {
	background-color: #000;
}

.btn-back--white:hover .btn-back__arrow:before {
	border-top-color: #000;
	border-left-color: #000;
}


@media screen and (max-width: 768px) {
	
	.btn-back {
		max-width: 16rem;
		margin: 0 auto;
		font-size: 2rem;
	}

	.btn-back .btn-back__arrow {
		width: 2rem;
		margin-right: 1rem;
	}

	.btn-back .btn-back__arrow:before {
		width: 10px;
		height: 10px;
	}
	
}


.detail-photo {
	position: relative;
	margin-bottom: 5.6rem;
}

@media screen and (max-width: 768px) {
	
	.detail-photo {
		margin-bottom: 3.2rem;
	}
	
}


.detail-photo__box {
	position: absolute;
	top: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.45s;
}
	
.detail-photo__box.is-active {
	position: static;
	opacity: 1;
	visibility: visible;
}

.detail-photo__box-inner {
	margin-bottom: 2rem;
}

.detail-number-nav {
}

.detail-number-nav ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.detail-number-nav li {
	margin: 0;
	padding: 0;
}

.detail-number-nav li + li:before {
	content: '・';
	display: inline-block;
}

.detail-number-nav a {
	text-decoration: underline;
}

.detail-thumbnail {}

.detail-thumbnail-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1rem -2rem;
}

.detail-thumbnail-col {
	width: 25%;
	margin: 0 0 2rem;
	padding: 0 1rem;
}

@media screen and (max-width: 768px) {
	
	.detail-thumbnail-col {
		width: 33.33333333%;
	}
	
}


/* --------------------------------------------------

	modaal

-------------------------------------------------- */

.modaal-container {
	width: calc(100vw - 50px) !important;
	max-width: 1700px !important;
	padding: 10rem 3rem 4rem;
}

@media screen and (max-width: 768px) {
	
	.modaal-container {
		max-width: calc(100vw - 50px) !important;
		padding: 6rem 2rem 2rem;
	}
	
}


.modaal-content-container {
	padding: 0;
}

.btn-modaal-close {
	position: absolute;
	top: 2rem;
	right: 2rem;
	display: block;
	width: 36px;
	height: 36px;
	cursor: pointer;
}

.btn-modaal-close::before,
.btn-modaal-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 100%;
	background: #ccc;
	transition: all 0.45s;
}

.btn-modaal-close:hover::before,
.btn-modaal-close:hover::after {
	background: #000;
}
 
.btn-modaal-close::before {
	transform: translate(-50%,-50%) rotate(45deg);
}
 
.btn-modaal-close::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}

@media screen and (max-width: 768px) {
	
	.btn-modaal-close {
		top: 1rem;
		right: 1rem;
	}
	
}


/* ------------------------------

	modaal-carpet

------------------------------ */

.modaal-carpet {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.modaal-carpet__photo {
	margin-bottom: 2rem;
}

.modaal-carpet__text a {
	text-decoration: underline;
}


/* --------------------------------------------------

	sp-nav

-------------------------------------------------- */

.sp-nav {
	position: fixed;
	top: -120%;
    left: 0;
	width: 100%;
	height: 100vh;
	background: #e6e6e6;
	transition: all 0.6s;
}

.sp-nav.is-panelactive {
    top: 0;
}

.sp-nav.is-panelactive .sp-nav__body {
	position: fixed;
	width: 100%;
	height: 100vh;
	overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.sp-nav-list {
	position: absolute;
	z-index: 100002;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.sp-nav-list {
	width: calc( 100% - 40px );
	max-width: 500px;
	margin: 0 auto;
	list-style: none; 
}

.sp-nav-list ul {
	border-top: 1px solid #ccc;
	list-style: none;
}

.sp-nav-list li {
	border-bottom: 1px solid #ccc;
}

.sp-nav-list a,
.sp-nav-list span {
	display: block;
	padding: 1.4rem 0 1.4rem;
	font-weight: 700;
}

.sp-nav-list__child,
.sp-nav-list__child li {
	border-top: none;
	border-bottom: none;
}

.sp-nav-list__child a {
	position: relative;
	padding: 1rem 0 1rem 3.2rem;
}

.sp-nav-list__child a:before {
	content: '';
	position: absolute;
	display: block;
	top: 50%;
	left: 2rem;
	width: 6px;
	height: 1px;
	background-color: #2f2e2e;
}

.sp-nav__logo {
	position: absolute;
	bottom: 3.2rem;
	width: 100%;
	text-align: center;
}

.sp-nav__logo img {
	max-width: 82px;
}


.btn-nav-open {
	position: relative;
	display: none;
	width: 50px;
	height: 50px;
	cursor: pointer;
}

.header.is-fixed .btn-nav-open,
body.is-panel-active .btn-nav-open {
	width: 32px;
	height: 32px;
}

@media screen and (max-width: 768px) {
	
	.btn-nav-open {
		display: block;
	}
	
}

  
.btn-nav-open span {
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 0;
	z-index: 100001;
	height: 2px;
	background-color: #fff;
	width: 100%;
}

.header--dark .btn-nav-open span {
	background-color: #000;
}

.btn-nav-open span:nth-of-type(1) { top: 9px;}
.btn-nav-open span:nth-of-type(2) { top: 24px;}
.btn-nav-open span:nth-of-type(3) { top: 41px;}

.header.is-fixed .btn-nav-open span:nth-of-type(1) { top: 3px;}
.header.is-fixed .btn-nav-open span:nth-of-type(2) { top: 14px;}
.header.is-fixed .btn-nav-open span:nth-of-type(3) { top: 27px;}

.btn-nav-open.is-active span {
	background-color: #000;
}

.btn-nav-open.is-active span:nth-of-type(1) {
	top: 18px;
	left: 0;
	width: 100%;
	color: #000;
	transform: translateY(6px) rotate(-45deg);
}

.btn-nav-open.is-active span:nth-of-type(2) {
	opacity: 0;
}

.btn-nav-open.is-active span:nth-of-type(3){
	top: 30px;
	left: 0;
	width: 100%;
	color: #000;
	transform: translateY(-6px) rotate(45deg);
}

.header.is-fixed .btn-nav-open.is-active span:nth-of-type(1) { top: 8px;}
.header.is-fixed .btn-nav-open.is-active span:nth-of-type(3) { top: 20px;}


/* --------------------------------------------------

	ふわっ

-------------------------------------------------- */

.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeUpTrigger {
	opacity: 0;
}


/* アニメーションの回数を決めるCSS*/
.count2 { animation-iteration-count: 2;}
.countinfinite { animation-iteration-count: infinite;}

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time01 { animation-delay: 0.1s;}
.delay-time02 { animation-delay: 0.2s;}
.delay-time03 { animation-delay: 0.3s;}
.delay-time04 { animation-delay: 0.4s;}
.delay-time05 { animation-delay: 0.5s;}
.delay-time06 { animation-delay: 0.6s;}
.delay-time07 { animation-delay: 0.7s;}
.delay-time08 { animation-delay: 0.8s;}
.delay-time09 { animation-delay: 0.9s;}
.delay-time1 { animation-delay: 1s;}
.delay-time11 { animation-delay: 1.1s;}
.delay-time12 { animation-delay: 1.2s;}
.delay-time13 { animation-delay: 1.3s;}
.delay-time14 { animation-delay: 1.4s;}
.delay-time15 { animation-delay: 1.5s;}
.delay-time16 { animation-delay: 1.6s;}
.delay-time17 { animation-delay: 1.7s;}
.delay-time18 { animation-delay: 1.8s;}
.delay-time19 { animation-delay: 1.9s;}
.delay-time2 { animation-delay: 2s;}
.delay-time21 { animation-delay: 2.1s;}
.delay-time22 { animation-delay: 2.2s;}
.delay-time23 { animation-delay: 2.3s;}
.delay-time24 { animation-delay: 2.4s;}
.delay-time25 { animation-delay: 2.5s;}
.delay-time26 { animation-delay: 2.6s;}
.delay-time27 { animation-delay: 2.7s;}
.delay-time28 { animation-delay: 2.8s;}
.delay-time29 { animation-delay: 2.9s;}
.delay-time3 { animation-delay: 3s;}

/* アニメーション自体が変化する時間を決めるCSS*/
.change-time05 { animation-duration: 0.5s;}
.change-time1 { animation-duration: 1s;}
.change-time15 { animation-duration: 1.5s;}
.change-time2 { animation-duration: 2s;}
.change-time25 { animation-duration: 2.5s;}

@media screen and (max-width: 768px) {
	
	.delay-time02,
	.delay-time03,
	.delay-time04,
	.delay-time05,
	.delay-time06,
	.delay-time07,
	.delay-time08,
	.delay-time09,
	.delay-time1,
	.delay-time12,
	.delay-time14 { animation-delay:  0.2s;}

	/* アニメーション自体が変化する時間を決めるCSS*/
	.change-time05,
	.change-time1,
	.change-time15,
	.change-time2,
	.change-time25 { animation-duration: 0.5s;}
	
}


/* --------------------------------------------------

	テキストを滑らかに出現させるためのCSS

-------------------------------------------------- */

span.smoothText {
	overflow: hidden;
	display: block;
}

/* アニメーションで傾斜がついている文字列を水平に戻す*/
span.smoothTextTrigger {
	transition: 1s ease-in-out;
	transform: translate3d(0,100%,0) skewY(12deg);
	transform-origin: left;
	display: block;
}

span.smoothTextTrigger.smoothTextAppear {
	transform: translate3d(0,0,0) skewY(0);
}