@charset "UTF-8";

canvas,iframe,img,select,svg,textarea,video{max-width:100%}.overflow-container{overflow-y:scroll}
.aspect-ratio{height:0;padding-top:56.25%;position:relative}
.aspect-ratio--object{height:100%;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;z-index:100}

* {box-sizing: border-box;}
body {line-height: 2; text-align: center;}
body.en {line-height: 1.7; text-align: center;}

body.zh #globalHeader .headerWrap {max-width: initial;}
#siteName a {padding: 10px 10px 10px 0; margin-top: 14px; display: inline; line-height: 1; color: #191919; font-size: 18px; font-family: "Helvetica", sans-serif;}
#home {text-align: right; margin:0; line-height: 0;}
#home a {padding: 30px; display: inline-block;}
#home a img {width: 120px;}
#home {width: auto; float: right;}

article {margin: 0 auto; position: relative;}
ul {list-style: none;}
img {vertical-align: bottom;}
h1 {margin: 0; /*font-family: Helvetica, sans-serif;*/ font-size: 2.5em; line-height: 1.5;}
h1 > .subTtl{display: block; font-size: 80%;}


.lead,
.desc {max-width: 800px; margin: 40px auto 0; text-align: left;}
.lead p {margin: 0 auto;}
.lead > p > a {text-decoration: underline;}

em {font-style: normal; font-weight: bold;}

#intoro {position: relative;}
#intoro,
#intoro img {width: 100%; height: auto;}

article header {text-align: left; overflow: hidden; width: 100%; z-index: 100;}
article header h1#siteName {margin: 0; font-size: 18px; text-align: left; padding: 25px 20px; display: inline-block; width: 50%;}
article header h1 span {font-size: 80%; margin-left: 1em;}
article .lead {margin-bottom: 80px; font-size: 16px;}

.info {width: 100%;}
.info h1 {margin: 0 0 20px; font-size: 1.5em;}
.info .viewport {max-width: 800px; border: 1px solid #ddd; padding: 30px; box-sizing: border-box; border-radius: 8px; position: relative; margin: 0 auto;}
.info .viewport img {width: 100%; max-width: 1500px;}
.info .annotation {text-align: left;}

.menu .viewport {max-width: 1000px; margin: 0 auto;}

#preface.info {
    margin-bottom: 80px;
}
#preface.info .viewport div {
    display:-webkit-box;/*--- Androidブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display:-webkit-flex;/*--- safari（PC）用 ---*/
    display: flex;
}
#preface.info .viewport div figure {margin-top: 0; margin-left: 0; width: 50%;}
#preface.info .viewport div figure img {border: 1px solid #ddd;}
#preface.info .viewport div section {width: 50%;}
#preface.info .viewport div section .desc {margin-top:0;}

.relatedLink {margin-top: 20px; float: right; text-align: left;}
.wrapper.col2_1 .relatedLink {margin-left: 15px;}
.relatedLink a {
    display: inline-block;
    background: url(https://www.muji.com/img/common/arrow_right.png) no-repeat 14px 50%;
    border: 1px solid #ccc;
    padding: 10px 20px 10px 35px;
    text-decoration: none;
}
.relatedLink a:hover {border: 1px solid #191919;}
.attr {font-size: 10px; color: #999; margin-top: 5px;}

.outsideWrap.gr {background-color: #f7f7f7; max-width: 900px; margin: 0 auto 120px;}
.outsideWrap {
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}
.col2_1 img {
    width: 45%;
    height: auto;
    float: left;
    margin-right: 20px;
}
.shenzhen.wrapper.col2_1 img {margin-bottom: 160px;}
.outsideWrap .wrapper {
    display: block;
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    max-width: 1024px;
    padding: 40px 0;
}
.shopName {font-weight: bold; font-size: 18px;}
.detail {text-align: left;}
.detail dt {
    font-weight: bold;
    margin-bottom: 0;
}
.detail dd {
    margin-bottom: 10px;
}

/* flipsnap */
#insideStore1,
#insideStore2 {margin-bottom: 80px;}
#insideStore1 h1,
#insideStore2 h1 {margin: 0 0 20px; font-size: 1.5em;}
body.en #insideStore1 h1,
body.en #insideStore2 h1 {font-size: 1.3em;}
#mainVisual1,
#mainVisual2 {width: 100%; margin: 0 auto; overflow: hidden; position: relative; line-height: 0;}
ul#mvPanel1,
ul#mvPanel2 {list-style: none; padding: 0; margin: 0;}
#mvPanel1, #mvPanel2 {width: 330000px; height: auto; overflow: hidden; position: relative;}
#mvPanel1 li,
#mvPanel2 li {float: left; text-align: center;}
#mvPanel1 img,
#mvPanel2 img {width: 100%; height: auto;}
.pointer {text-align: center; margin-top: 20px;}
.pointer span {width: 10px; height: 10px; margin: 0 3px; border-radius: 50%; display: block; text-indent: -9999px; background: #ccc; display: inline-block; cursor: pointer;}
.pointer .current {background: #666;}
.viewport2 {position: relative;}
.controls2 div {position: absolute; text-indent: -9999px; cursor: pointer;}
#mainVisual1 .prev,
#mainVisual2 .prev {width: 55px; height: 130px; left: 0; top: 50%; margin-top: -55px; background: url(/img/feature/flagship/arrow_left.png) no-repeat 10px 20px rgba(255,255,255,.7); border-radius: 0 5px 5px 0; padding: 10px 10px; background-size: 28px 90px;}
#mainVisual1 .next,
#mainVisual2 .next {width: 55px; height: 130px; right: 0; top: 50%; margin-top: -55px; background: url(/img/feature/flagship/arrow_right.png) no-repeat 15px 20px rgba(255,255,255,.7); border-radius: 5px 0 0 5px; padding: 10px 10px; background-size: 28px 90px;}
#mainVisual1 .prev.disabled,
#mainVisual1 .next.disabled,
#mainVisual2 .prev.disabled,
#mainVisual2 .next.disabled {display: none;}

#menuSection {margin: 100px 0 150px;}
#menuSection ul {display: flex;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-padding-start: 0;
}
#menuSection li {width: 33%; margin:0 5px;}
#menuSection li a figure {position: relative; margin: 0; background-color: #191919;}
#menuSection li a figure img {width: 100%; opacity:0.6;}
#menuSection li a:hover figure img {width: 100%; opacity:1; transition-duration: 0.5s; transition-property:opacity; }
#menuSection li a figcaption {
    position: absolute; top:0; bottom:0; left:0; right:0; width:auto; height: 20px; color:#fff; font-size:18px; margin:auto;
    //text-shadow:1px 1px 1px #333;
}
aside.share {border: none; text-align: center; margin-top: 0; background: #fff; padding: 40px 0; line-height: 2;}
aside.share a {display: inline-block; margin-right: 20px;}
aside.share a:last-child {margin-right: 0;}
aside.share span {display: inline-block; margin-right: 20px; color: #999; font-size: small;}
aside.share img {vertical-align: bottom;}

html[lang="zh-CN"] aside.share img {width: 28px; padding-right: 0; vertical-align: middle;}

footer {background: #fff;}
footer p {font-size: 13px; color: #333; margin: 0; padding: 10px 0;}
footer ul.lang {margin: 0 auto; text-align: center; display: flex; justify-content: center;}
footer ul.lang li {float: none; text-align:center; color:#999; margin-right:0;}
body.zh footer ul.lang li {padding-right:0;}
footer ul.lang li a {color:#666;}
footer ul.lang li:not(:last-child):after {content: "|"; display: inline-block; padding: 0 5px;}
body.ja footer ul.lang li.ja a,
body.zh footer ul.lang li.zh a,
body.en footer ul.lang li.en a {font-weight: bold; cursor: text;}

#topPage {width: 110px; margin: 10px auto 25px;}
#topPage > a > img {width: 100%; opacity: 0.4;}

@media only screen and (min-width: 768px) {
    #globalHeader .headerWrap {width: auto;}
}
@media screen and (max-width: 767px) {
    footer li {width: auto;}
}
@media only screen and (max-width : 768px) {
    body {line-height: 1.6;}
    #home a img {width: 100px;}
    article header h1#siteName {padding: 25px 0 25px 20px; font-size: 15px; text-align:left;}
    article header h1 span {display: block; margin-left: 0;}
    .lead,
    .desc {width: 90%;}
    .col2_1 img {width: 100%; float: none;}
    .shenzhen.wrapper.col2_1 img {margin-bottom: 0;}
    .wrapper {padding-top:20px;}
    .wrapper.col2_1 figure {margin: 0 0 20px 0;}
    .detail dd {margin-left: 0;}
    .info .viewport {width: 90%; padding: 20px;}
    .relatedLink a {font-size: 14px;}
    #menuSection ul {padding:0; margin:40px 40px 0; display:block;}
    #menuSection li {width: 100%; margin: 0;}
    .lead p:not(:last-child) {margin: 0 auto 20px;}
    footer ul.lang li a {color: #999; display: inline-block;}
}
@media only screen and (min-width : 415px) and (max-width : 768px) {
    #preface.info .viewport div section p.desc {width: 100%;}
}
@media only screen and (max-width : 414px) {
    #preface.info .viewport div {display: block;}
    #preface.info .viewport div figure {margin: 0 0 20px 0; width: 100%;}
    #preface.info .viewport div section {width: 100%;}
    #preface.info .viewport div section p.desc {width: 100%;}
    #insideStore1, #insideStore2 {margin-bottom: 40px;}
    article .outsideWrap.gr .wrapper.col2_1 .shopName,
    article .outsideWrap.gr .wrapper.col2_1 figure {display:none;}
    .outsideWrap.gr {margin: 0px auto 100px;}
    #insideStore2+.outsideWrap.gr {margin: 0px auto 40px;}
}

article header:after,
#preface.info .viewport div section:after {content: ""; clear: both; display: block;}
<!--ºÄʱ1769394432.463Ãë-->