@charset "utf-8";



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

	#header,
	#globalHeader,
	#globalFooter,
	#kv,
	#intro,
	#intro *,
	#concept,
	#concept *,
	#product,
	#product *,
	div.video,
	div.video *,
	div.comingsoon,
	div.comingsoon * {
		will-change: transform;
	}
	#content h2,
	#books figure {
		will-change: transform, opacity;
	}
	
	* {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	
	
	
	body.tabbed a:focus,
	body.tabbed div.video nav a:focus i {
		outline: 5px auto rgba(0, 103, 244, 1);
	}
	div.video nav a:focus {
		outline: none;
	}
	
	
	#globalHeader {
		box-sizing: border-box;
		height: 65px;
		padding: 22px 0 0 1pc;
		line-height: 0;
		background: #fff;
	}
	#globalHeader a {
		display: inline-block;
		font-size: 0;
	}
	
	#globalHeader:before {
		content: "";
		position: fixed;
		display: block;
		width: 100%;
		height: 100px;
		left: 0;
		top: -100px;
		background: #fff;
	}
	

	#header {
		position: fixed;
		width: 100%;
		height: 80px;
		left: 0;
		top: 0;
		z-index: 1000;
	}

	#header .copy {
		position: absolute;
		width: 282px;
		height: 88px;
		left: 0;
		top: 40px;
		background: #fff url(../img/copy.svg) 4px -2px no-repeat;
		background-size: 262px 106px;
	}
	#header .copy a {
		display: block;
		height: 88px;
	}

	html.en #header .copy {
		background-position: 15px -3px;
	}



	#menu {
		position: absolute;
		right: 32px;
		top: 28px;
	}
	#menu a {
		display: block;
		line-height: 18px;
		cursor: pointer;
	}
	#menu .book {
		float: left;
		width: auto;
		margin-right: 45px;
	}
	#menu .lang,
	#menu li {
		position: relative;
		float: left;
		width: auto;
	}


	#menu .lang li + li:before {
		content: "";
		position: absolute;
		display: block;
		width: 1px;
		height: 18px;
		left: 0;
		top: 0;
		background: rgba(255,255,255,0.5);
	}

	#menu .book a {
		position: relative;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 0.08em;
		color: #fff;
	}
	#menu .lang a {
		padding: 0 10px;
		font-size: 14px;
		letter-spacing: 0.1em;
		color: #fff;
		opacity: 0.5;
	}

	#menu .book a:after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 1px;
		left: 0;
		bottom: -3px;
		background: rgba(255,255,255,0.5);
	}
	#menu .book a:hover {
		opacity: 0.7;
	}

	html.jp #menu li.jp a,
	html.en #menu li.en a,
	html.cn #menu li.cn a {
		opacity: 1;
	}
	#menu .lang a:hover {
		opacity: 0.7;
	}
	
	
	html.jp #menu .book a,
	html.cn #menu .book a {
		letter-spacing: 0;
	}





	#kv {
		position: -webkit-sticky;
		position: sticky;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 10;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	
	#intro {
		position: relative;
		width: 100%;
		height: 100vh;
		z-index: 50;
		margin-top: -100vh;
	}

	#concept {
		position: relative;
		width: 100%;
		margin: 100vh 0 0;
		z-index: 100;
	}




	#kv i {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(0,0,0,0.7);
	}


	#intro .title {
		position: absolute;
		width: 500px;
		height: 122px;
		right: 55px;
		bottom: 60px;
	}
	#intro .title .inner {
		position: absolute;
		width: 500px;
		height: 122px;
		background: #fff;
	}
	#intro .title h1 {
		position: absolute;
		width: 500px;
		height: 122px;
		background: url(../img/title.svg) 0 0 no-repeat;
		background-size: 100% auto;
	}
	#intro .title span {
		position: absolute;
		display: block;
		width: 500px;
		height: 122px;
		background: url(../img/title_muji.svg) 0 0 no-repeat;
		background-size: 100% auto;
	}


	#intro nav {
		position: absolute;
		display: block;
		width: 40px;
		height: 40px;
		left: 50%;
		bottom: 26px;
		margin-left: -20px;
	}
	#intro nav a {
		position: absolute;
		display: block;
		width: 40px;
		height: 40px;
		background: url(../img/arrow_bottom.svg) 50% 50% no-repeat;
		background-size: 38px auto;
	}





	#concept .lead {
		position: relative;
		width: 480px;
		margin: 0 auto;
		padding-bottom: 50vh;
	}
	#concept .lead img {
		width: 480px;
		height: auto;
	}
	#concept .lead article {
		position: relative;
		width: 500px;
		margin: 0 -10px;
	}
	#concept .lead article p {
		color: #fff;
		font-size: 20px;
		font-weight: 600;
		line-height: 1.5;
		letter-spacing: 0.5px;
	}





	#content {
		position: relative;
		margin-top: 150px;
		background: #f4f4f4;
	}
	#content .inner {
		position: -webkit-sticky;
		position: sticky;
		height: calc(338.57vw + 160px);
		top: calc(100vh - 338.57vw - 160px);
	}
	#content h2 {
		position: -webkit-sticky;
		position: sticky;
		width: 127px;
		left: 155px;
		top: 160px;
		z-index: 600;
		margin: 320px 0 300px;
		background: url(../img/title_book.svg) 0 0 no-repeat;
		background-size: 100% auto;
		pointer-events: none;
	}
	#content h2 span {
		position: absolute;
		display: block;
		width: 600px;
		height: 90px;
		left: 0;
		top: 85px;
		background: url(../img/book_caption.svg?2) 0 0 no-repeat;
		background-size: auto 90px;
		pointer-events: none;
	}
	#content h2 p {
		position: absolute;
		display: block;
		width: 600px;
		left: 0;
		top: 75px;
		font-size: 24px;
		line-height: 1.5;
	}
	
	
	body.ie #content h2 {
		margin: 200px 0 250px 155px;
	}
	body.ie #content h2 span {
		margin: 10px 0 0 -10px;
	}
	body.ie #content h2 p {
		margin: 15px 0 0;
	}
	
	

	#books {
	}


	#promo {
		background: #fff;
	}



	
	
	
	
	
	
	div.video {
		position: relative;
		height: 100vh;
	}
	div.video figure,
	div.video span,
	div.video nav {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	div.video span {
		display: block;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
	}
	div.video nav a {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}
	div.video nav i {
		position: absolute;
		display: block;
		box-sizing: border-box;
		width: 300px;
		height: 80px;
		left: 155px;
		top: 50%;
		margin: -50px 0 0;
		padding: 0 0 0 105px;
		line-height: 80px;
		font-size: 32px;
		font-weight: bold;
		font-style: normal;
		color: #fff;
		letter-spacing: 2px;
		background: url(../img/play.svg) 0 0 no-repeat;
		background-size: 80px 80px;
	}

	


	.comingsoon {
		position: relative;
		height: 300px;
		z-index: 10;
		background: #000;
		background-position: 50% 50%;
		background-repeat:  no-repeat;
		background-size: cover;
	}
	.comingsoon:before {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 10;
		background: rgba(0,0,0,0.75);
	}
	.comingsoon dl {
		position: absolute;
		height: 50px;
		left: 155px;
		top: 50%;
		z-index: 100;
		margin-top: -25px;
		color: #fff;
		font-size: 15px;
		font-weight: bold;
		letter-spacing: 1px;
	}
	.comingsoon dt {
		line-height: 25px;
	}
	.comingsoon dd {
		line-height: 25px;
	}





	#books {
		position: relative;
		box-sizing: border-box;
	}
	#books figure {
		position: absolute;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
	}



	









	#product {
		position: relative;
		width: 100%;
		/*
		height: 100vh;
		*/
		min-height: 1120px;
		z-index: 500;
		background: #fff;
		overflow: hidden;
	}
	#product .slide {
		position: absolute;
		width: 100%;
		height: 550px;
		left: 0;
		top: 400px;
	}
	#product .slide-inner {
		display: flex;
		flex-wrap: nowrap;
		width: calc(535px * 15 + 70px);
		height: 400px;
		margin: 40px 0 0;
	}
	#product .slide img {
		width: 515px;
		height: 400px;
	}
	#product .slide-item {
		width: 535px;
	}
	#product .slide-item:nth-child(1) {
		width: 605px;
	}
	#product .slide-item:nth-child(1) img {
		margin-left: 70px;
	}
	#product .slide .btn {
		position: absolute;
		display: block;
		width: 50vw;
		height: 400px;
		top: 40px;
		z-index: 100;
		background: rgba(0,0,0,0);
	}
	#product .slide .btn.prev {
		left: 0;
		background: url(../img/arrow_prev.svg) left 28px top 50% no-repeat;
		background-size: 42px auto;
	}
	#product .slide .btn.next {
		right: 0;
		background: url(../img/arrow_next.svg) right 28px top 50% no-repeat;
		background-size: 42px auto;
	}
	#product .slide.left-edge .btn.prev {
		visibility: hidden;
	}
	#product .slide.right-edge .btn.next {
		visibility: hidden;
	}
	
	#product .nicescroll-rails-vr {
		display: none !important;
	}
	#product .nicescroll-rails-hr {
		margin-top: -144px;
		display: none !important;
	}
	#product .nicescroll-cursors {
		background-color: #777 !important;
	}

	#product .spec {
		position: absolute;
		box-sizing: border-box;
		width: calc(100% - 70px);
		left: 70px;
		top: 800px;
		margin: 40px 0 0;
		padding: 60px 0 0 85px;
	}
	#product .spec h3 {
		font-size: 18px;
		line-height: 1.5;
	}
	#product .spec p {
		margin: 8px 0 0;
		font-size: 12px;
		font-weight: bold;
		line-height: 1.8;
		color: #777;
	}
	#product .spec nav {
		margin: 25px 0 0;
	}
	#product .spec a {
		display: inline-block;
		padding: 6px 12px 5px;
		color: #282828;
		font-size: 14px;
		font-weight: bold;
		border: 1px solid #282828;
		cursor: pointer;
		transition: opacity 300ms linear;
	}
	#product .spec a:hover {
		opacity: 0.7;
	}




	#globalFooter {
		position: relative;
		z-index: 700;
		padding: 45px 0 40px;
		text-align: center;
		background: #e4e4e4;
	}
	#globalFooter .muji-logo {
		line-height: 0;
		font-size: 0;
	}
	#globalFooter .muji-copyright {
		margin: 20px 0 0;
		font-size: 11px;
		letter-spacing: 1px;
		color: #666;
	}




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



	#header {
		transition: transform 500ms ease-out;
		transform: translateY(-82px);
	}
	#header.show {
		transform: translateY(0px);
	}



	#globalHeader {
		transition: transform 500ms ease-out;
	}
	#globalHeader.gone {
		transform: translateY(-101%);
	}
	
	
	
	
	
	

	#kv {
		transition: opacity 1000ms linear;
		opacity: 0;
	}
	#kv.show {
		opacity: 1;
	}








	#intro .title .inner {
		transition: transform 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
		transform: scaleX(0);
		transform-origin: left top;
	}
	#intro .title .inner.show {
		transform: scaleX(1);
	}


	#intro .title h1 {
		transition: opacity 600ms ease 500ms;
		opacity: 0;
	}
	#intro .title .inner.show h1 {
		opacity: 1;
	}


	#intro .title span {
		transition: opacity 1600ms ease 900ms;
		opacity: 0;
	}
	#intro .title .inner.show span {
		opacity: 1;
	}



	#intro nav {
		transition: opacity 800ms linear;
		opacity: 0;
	}
	#intro nav.show {
		opacity: 1;
	}
	#intro nav.show a {
		animation: updown 1000ms infinite linear alternate;
	}

	







	/*
	#concept {
		opacity: 0;
	}
	*/
	#concept .lead {
		opacity: 0;
	}
	



	div.video {
		transition: opacity 500ms ease, transform 500ms ease;
		opacity: 0;
		transform: translateY(50px);
	}
	div.video.show {
		opacity: 1;
		transform: translateY(0px);
	}

	div.video nav {
		transition: opacity 750ms ease 200ms;
		opacity: 0;
	}
	div.video.show nav {
		opacity: 1;
	}

	div.video nav i {
		transition: transform 750ms ease 500ms, opacity 300ms linear;
		transform: translateY(40px);
	}
	div.video.show nav i {
		transform: translateY(0px);
	}

	div.video.show nav i:hover {
		opacity: 0.7;
	}





	



	.comingsoon {
		transition: opacity 500ms ease, transform 500ms ease;
		opacity: 0;
		transform: translateY(50px);
	}
	.comingsoon.show {
		opacity: 1;
		transform: translateY(0px);
	}

	.comingsoon dl {
		transition: opacity 750ms ease 500ms, transform 750ms ease 500ms;
		opacity: 0;
		transform: translateY(30px);
	}
	.comingsoon.show dl {
		opacity: 1;
		transform: translateY(0px);
	}








	#books figure {
		transition: opacity 1000ms ease-out 200ms, transform 1000ms ease-out 200ms;
		opacity: 0;
		transform: translateY(10vw);
	}
	#books figure.show {
		opacity: 1;
		transform: translateY(0px);
	}

	body.ie #books figure {
		transform: translateY(0px) !important;
		transition: opacity 1000ms ease-out 200ms, margin 1000ms ease-out 200ms;
		margin-top: 50px;
	}
	body.ie #books figure.show {
		margin-top: 0;
	}

	/*
	#content h2 {
		transform: translateY(100vh);
	}


	#product {
		transform: translateY(100vh);
	}
	*/



	#product .slide-item {
		transition: transform 750ms ease-out;
	}
	#product .slide-item:nth-child(1) {
		transform: translateY(50px);
	}
	#product .slide-item:nth-child(2) {
		transform: translateY(100px);
	}
	#product .slide-item:nth-child(3) {
		transform: translateY(150px);
	}
	#product .slide-item:nth-child(4) {
		transform: translateY(200px);
	}
	#product .slide-item:nth-child(5) {
		transform: translateY(250px);
	}
	#product.show .slide-item {
		transform: translateX(0);
	}


	#product .spec h3,
	#product .spec p,
	#product .spec nav {
		transition: opacity 500ms ease-out, transform 750ms ease-out;
		opacity: 0;
		transform: translateY(50px);
	}

	#product .spec h3 {
		transition-delay: 0ms;
	}
	#product .spec p {
		transition-delay: 150ms;
	}
	#product .spec nav {
		transition-delay: 300ms;
	}

	#product .spec.show h3,
	#product .spec.show p,
	#product .spec.show nav {
		opacity: 1;
		transform: translateY(0px);
	}





	/*
	#globalFooter {
		position: fixed;
		left: 0;
		top: 100vh;
		z-index: 1000;
	}
	*/




	#menu,
	#menu-button {
		transition: filter 500ms linear;
		filter: invert(0%);
	}
	body.invert #menu,
	body.invert #menu-button {
		filter: invert(90%);
	}


	body.ie.invert #menu * {
		color: #222;
	}
	body.ie.invert #menu .lang li + li:before,
	body.ie.invert #menu .book a:after {
		background: rgba(0,0,0,0.5);
	}
	
}







/* Small PC */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	#intro .title {
		margin-bottom: 30px;
	}
}