@charset "utf-8";


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

	
	#kv,
	#intro,
	#intro *,
	#concept,
	#concept *,
	#content h2,
	#menu,
	body {
		will-change: transform, opacity;
	}
	#books {
		will-change: transform;
	}
	
	
	body[data-device="chrome"],
	body[data-device="chrome"] * {
		will-change: unset !important;
	}
	body[data-device="sp-in-pc"],
	body[data-device="sp-in-pc"] * {
		will-change: unset !important;
	}
	
	
	#product,
	#globalFooter {
		transform: translate3d(0,0,0);
	}
	
	
	
	* {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	
	
	
	#globalHeader {
		box-sizing: border-box;
		height: 53px;
		padding: 16px 0 0;
		line-height: 0;
		text-align: center;
		background: #fff;
	}
	#globalHeader a {
		display: inline-block;
		font-size: 0;
	}
	
	
	
	
	#scroller {
		height: 0 !important;
	}
	
	#header {
		position: fixed;
		width: 100%;
		height: 100px;
		left: 0;
		top: 0;
		z-index: 1000;
	}

	#header .copy {
		position: absolute;
		width: 183px;
		height: 74px;
		left: 0;
		top: 25px;
		z-index: 9000;
		background: #fff url(../img/copy.svg) 0 0 no-repeat;
		background-size: 100% auto;
	}
	#header .copy a {
		display: block;
		height: 74px;
	}

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

	#concept {
		position: relative;
		width: 100%;
		margin: 50vh 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: 264px;
		height: 100px;
		right: 16px;
		bottom: 90px;
	}
	#intro .title .inner {
		position: absolute;
		width: 264px;
		height: 100px;
		background: #fff;
	}
	#intro .title h1 {
		position: absolute;
		width: 264px;
		height: 100px;
		background: url(../img/title_sp.svg) 0 0 no-repeat;
		background-size: 100% auto;
	}
	#intro .title span {
		position: absolute;
		display: block;
		width: 264px;
		height: 100px;
		background: url(../img/title_muji_sp.svg) 0 0 no-repeat;
		background-size: 100% auto;
	}


	#intro nav {
		position: absolute;
		display: block;
		width: 40px;
		height: 40px;
		left: 50%;
		bottom: 25px;
		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: 20px auto;
	}
	
	


	#concept .lead {
		position: relative;
		width: calc(100vw - 40px);
		margin: 0 auto;
		padding-bottom: 50vh;
	}
	#concept .lead img {
		width: 100%;
		height: auto;
	}
	#concept .lead article {
		position: relative;
		margin: 0 -4px;
	}
	#concept .lead article p {
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.5;
		letter-spacing: 0.5px;
	}
	
	



	#content {
		position: relative;
		margin: 100px 0 0;
		background: #f4f4f4;
	}
	#content .inner {
		position: -webkit-sticky;
		position: sticky;
		height: calc(373.33vw + 140px);
		top: calc(100vh - 373.33vw - 140px);
	}
	#content h2 {
		position: -webkit-sticky;
		position: sticky;
		width: 80px;
		left: 36px;
		top: 120px;
		z-index: 600;
		margin: 140px 0 180px;
		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: 254px;
		height: 90px;
		left: 0;
		top: 42px;
		background: url(../img/book_caption_sp.svg) 0 0 no-repeat;
		background-size: auto 89px;
		pointer-events: none;
	}
	#content h2 p {
		position: absolute;
		display: block;
		width: 254px;
		left: 0;
		top: 42px;
		font-size: 17px;
		line-height: 1.5;
	}
	
	#books {
	}


	#promo {
		background: #fff;
	}



	div.video {
		position: relative;
		width: 100vw;
		height: 56.25vw;
	}
	div.video figure,
	div.video span,
	div.video nav {
		position: absolute;
		width: 100vw;
		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: 200px;
		height: 36px;
		left: 36px;
		top: 50%;
		margin: -18px 0 0;
		padding: 0 0 0 50px;
		line-height: 36px;
		font-size: 13px;
		font-weight: bold;
		font-style: normal;
		color: #fff;
		letter-spacing: 1.25px;
		background: url(../img/play.svg) 0 0 no-repeat;
		background-size: 36px 36px;
	}



	.comingsoon {
		position: relative;
		height: 125px;
		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: 30px;
		left: 36px;
		top: 50%;
		z-index: 100;
		margin-top: -15px;
		color: #fff;
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 1px;
	}
	.comingsoon dt {
		line-height: 15px;
	}
	.comingsoon dd {
		line-height: 15px;
	}
	
	

	
	#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%;
		z-index: 500;
		padding: 180px 0 110px;
		background: #fff;
		overflow: hidden;
	}
	#product .inner {
		position: relative;
	}
	#product .slide {
		position: relative;
		width: 100%;
		height: 261px;
	}
	#product .slide-inner {
		display: flex;
		flex-wrap: nowrap;
		width: calc(252px * 15 + 16px);
		height: 186px;
		margin: 0;
	}
	
	#product .slide img {
		width: 240px;
		height: 186px;
	}
	#product .slide-item {
		width: 252px;
	}
	#product .slide-item:nth-child(1) {
		width: 268px;
	}
	#product .slide-item:nth-child(1) img {
		margin-left: 16px;
	}
	
	#product .slide .btn {
		position: absolute;
		display: block;
		width: 36px;
		height: 186px;
		top: 0;
		z-index: 100;
	}
	#product .slide .btn.prev {
		left: 0;
		background: url(../img/arrow_prev.svg) left 10px top 50% no-repeat;
		background-size: 16px auto;
	}
	#product .slide .btn.next {
		right: 0;
		background: url(../img/arrow_next.svg) right 10px top 50% no-repeat;
		background-size: 16px 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: relative;
		margin: -75px 0 0;
		padding: 45px 0 0 36px;
	}
	#product .spec h3 {
		font-size: 16px;
		line-height: 1.5;
	}
	#product .spec p {
		margin: 6px 0 0;
		font-size: 12px;
		line-height: 1.8;
		font-weight: bold;
		color: #777;
	}
	#product .spec nav {
		margin: 22px 0 0;
	}
	#product .spec a {
		display: inline-block;
		padding: 4px 10px;
		color: #282828;
		font-size: 13px;
		font-weight: bold;
		border: 1px solid #282828;
		cursor: pointer;
		transition: opacity 300ms linear;
	}







	#globalFooter {
		position: relative;
		z-index: 700;
		padding: 35px 0;
		text-align: center;
		background: #e4e4e4;
	}
	#globalFooter .muji-logo {
		line-height: 0;
		font-size: 0;
	}
	#globalFooter .muji-copyright {
		margin: 15px 0 0;
		font-size: 10px;
		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(calc(-100% - 5px));
	}
	
	
	
	
	


	#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;
	}
	
	
	
	

	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);
	}

	
	.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);
	}
	
	




	#product .slide-item:nth-child(1) {
		transform: translateY(25px);
	}
	#product .slide-item:nth-child(2) {
		transform: translateY(50px);
	}
	#product .slide-item:nth-child(3) {
		transform: translateY(75px);
	}
	#product.show .slide-item {
		transform: translateX(0);
	}

	/*
	#product .spec h3,
	#product .spec p,
	#product .spec nav {
		transform: translateY(30px);
	}
	*/




	#menu-button {
		position: absolute;
		width: 32px;
		height: 32px;
		right: 23px;
		top: 40px;
		z-index: 10000;
	}
	#menu-button a {
		display: block;
		height: 32px;
	}
	#menu-button a:before,
	#menu-button a:after {
		position: absolute;
		display: block;
		content: "";
		width: 24px;
		height: 1px;
		left: 50%;
		top: 50%;
		margin-left: -12px;
		background: #fff;
		
		transition: all 300ms ease-out;
	}
	#menu-button a:before {
		margin-top: -4px;
	}
	#menu-button a:after {
		margin-top: 3px;
	}
	
	
	body.opened-menu #menu-button a:before {
		transform: translateY(4px) rotate(-45deg);
	}
	body.opened-menu #menu-button a:after {
		transform: translateY(-3px) rotate(45deg);
	}


	#menu {
		position: fixed;
		width: 100vw;
		height: 150vh;
		left: 0;
		top: 0;
		z-index: 900;
		background: #fff;
		
		transition: all 300ms ease-out;
		opacity: 0;
		visibility: hidden;
	}
	body.opened-menu #menu {
		opacity: 1;
		visibility: visible;
	}
	
	


	#menu-button {
		transition: filter 300ms linear;
		filter: invert(0%);
	}
	body.invert #menu-button {
		filter: invert(90%);
	}
	body.opened-menu #menu-button {
		filter: invert(90%);
	}
	
	
	
	
	#menu a {
		display: block;
		line-height: 18px;
	}
	#menu .book {
		position: absolute;
		display: block;
		left: 55.5vw;
		top: 40vh;
		margin: -82px 0 0;
	}
	#menu .lang {
		position: absolute;
		left: 53vw;
		top: 37vh;
		margin: 10px 0 0;
	}
	#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(40,40,40,0.5);
	}

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

	#menu .book a:after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 1px;
		left: 0;
		bottom: -1px;
		background: #282828;
	}
	

	html.jp #menu li.jp a,
	html.en #menu li.en a,
	html.cn #menu li.cn a {
		opacity: 1;
	}
	

	html.jp #menu .book a,
	html.cn #menu .book a {
		font-size: 15px;
		letter-spacing: 0;
	}
}










/* SP - Landscape */
@media screen and (max-width: 767px) and (orientation: landscape) {
	#concept .lead {
		background-position: 50% 50%;
		background-size: contain;
	}
}





/* Small SP */
@media screen and (max-width: 374px) {
	#intro .title {
		width: 220px;
		height: 83px;
	}
	#intro .title .inner {
		width: 220px;
		height: 83px;
	}
	#intro .title h1 {
		width: 220px;
		height: 83px;
	}
}


/* MP */
@media screen and (max-width: 767px) {
	html.passport #header {
		height: 145px;
		transform: translateY(-127px);
	}
	html.passport #header.show {
		transform: translateY(0);
	}
	html.passport #header .copy {
		top: 70px;
	}
	html.passport #menu-button {
		top: 85px;
	}
	
	html.passport #menu .book {
		top: calc(40vh + 30px);
	}
	html.passport #menu .lang {
		top: calc(37vh + 30px);
	}
	
	html.passport #content h2 {
		top: 165px;
	}
}