
*, *:before, *:after {box-sizing: border-box; -webkit-font-smoothing: antialiased;}
body {font-family: -apple-system, "Helvetica", sans-serif;}
ul {margin: 0 0 15px; padding: 0; list-style: none;}
dl, dd, figure {margin: 0;}
figure img {margin-right: 20px; float: left;}
.wrapper:after, section:after, figure:after {content: ""; clear: both; display: block;}

#shop.en #hGlobalNav, #shop.en #footerNav, #shop.en nav.another {display: none;}

#main {font-size: 12px; margin-bottom: 0;}
#main img {width: 100%; height: auto;}

.language {position: absolute; top: 0; right: 0; height: 70px; line-height: 70px; margin-right: 3.5%; z-index: 101; font-size: 13px; padding: 0 16px;}
.language a {color: #ccc;}
.language .curent a {color: #666;}
.language li {display: inline-block;}
.language li+li {padding-left: 18px; position: relative;}
.language li+li:before {padding-left: 1em; position: absolute; content: "|"; top: 0; left: -10px; color: #ccc;}	

#shopSearch {text-align: center; padding: 20px 0 0; margin: 0 0 30px;}
#shopSearch dl {margin-bottom: 0;}
#shopSearch dt {display: none;}
#shopSearch dd {margin-bottom: 15px;}
#shopSearch a, #shopSearch a:hover {color: #67affd;}
#shopSearch span {padding: 5px 10px; font-size: 16px;}
#shopSearch input {font-size: 14px; text-indent: 2em; line-height: 1.3; border: 1px solid #ddd; padding: 10px; border-radius: 3px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="6" cy="6" r="5" stroke="black" stroke-width="1" fill="white" /><line x1="10" y1="10" x2="14" y2="14" style="stroke:rgb(0,0,0);stroke-width:2"/></svg> ') no-repeat 14px center; background-size: 14px 14px;}

#filter > dt ul {color: #666; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between;}
#filter > dd {z-index: 100;}
#filter > dt ul {margin: 0;}
#filterCount {margin-left: 15px; display: none;}
#filter > dt li .num {padding: 0 2px; font-weight: bold;}
#filterMenu ul:after {content: ""; clear: both; display: block;}
#filterMenu li+li {float: right;}
#filterMenu li > * {height: 32px; border: none; padding: 0 10px; line-height: 32px;}
#filterConfirm button {background-color: #333; border-radius: 3px; color: #fff;}
#filterBack span {display: inline-block; text-indent: -9999em;}
#filterToggle {background-color: #fff;}
#filterToggle dt {font-size: 14px;}
#filterToggle dt span {font-size: 11px; font-weight: normal;}
#filterToggle dt span {display: none;}
#filterToggle ul {letter-spacing: -.4em;}
#filterToggle li {display: inline-block; letter-spacing: normal;}
#filterToggle input {display: none;}
#filterToggle input[type="checkbox"]:checked + label {background-color: #888; border: 1px solid #888; color: #fff;}
#filterToggle label {display: block; font-size: 12px; text-align: center; color: #888; padding: 0 12px; border-radius: 12px; margin: 9px 9px 0 0; height: 24px; line-height: 22px; border: 1px solid #ccc; background-color: #fff; cursor: pointer;}

#shopList a {display: block; background-color: #fff; padding: 15px; margin-bottom: 0; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="12"><line x1="0" y1="0" x2="6" y2="6" stroke="black" stroke-width="1"/><line x1="6" y1="6" x2="0" y2="12" stroke="black" stroke-width="1"/></svg>') no-repeat 95% center;}
#shopList span {display: block; padding-right: 5%;}
#shopList .shopname {font-size: 14px; font-weight: bold; margin-bottom: 5px;}
#shopList .shopid {display: none;}
#shopList .distance {display: inline-block; color: #999; margin-top: 2px; padding-left: 14px; background: url(//www.muji.com/jp/shop/img/common/icon_shopstock.png) no-repeat top left; background-size: 10px 15.3px;}

#trademark {position: absolute; top: 0; right: 0;}
#trademark img {height: 20px; margin: 25px 0 0 20px;}

.remodal {text-align: left;}
.remodal-overlay {background: rgba(43, 46, 56, 0.75);}
.remodal img {width: 100%; height: auto; float: none;}
.remodal .desc {display: block;}

#modalLanguage {text-align: center; padding: 35px 20px;}
#modalLanguage h2 {margin-top: 0;}
#modalLanguage ul {margin-bottom: 0;}
#modalLanguage li {display: inline-block; padding: 5px; font-size: 13px;}

@media only screen and (min-width: 700px){

	#shopSearch input {width: 500px;}
	#searchFrameWrap {max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 40px;}

	#searchFrame {width: 100%; margin-bottom: 50px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
	#sidebar {width: 50%;}

	#filter {padding: 0 15px 15px;}
	#filter > dt ul {border-bottom: 1px solid #eee;}
	#filter > dt li {display: inline-block; margin-bottom: 5px;}
	#filter > dt .button {/*font-size: 14px;*/ cursor: pointer; padding-right: 24px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6"><line x1="0" y1="0" x2="6" y2="6" stroke="gray" stroke-width="1"/><line x1="6" y1="6" x2="12" y2="0" stroke="gray" stroke-width="1"/></svg>') no-repeat 95% center;}
	#filter.active > dt li:last-child {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6"><line x1="0" y1="6" x2="6" y2="0" stroke="gray" stroke-width="1"/><line x1="6" y1="0" x2="12" y2="6" stroke="gray" stroke-width="1"/></svg>') no-repeat 95% center;}
	#filter.active #filterToggle {position: absolute; top: -1px; left: 0;}
	#filter > dd {position: relative; height: 0;}
	#filterToggle {display: none; padding: 14px; border-radius: 3px; border: 1px solid #ddd; background-color: #fff; box-shadow:0px 0px 2px 0px #eee; -moz-box-shadow:0px 0px 2px 0px #eee; -webkit-box-shadow:0px 0px 2px 0px #eee;}
	#filterBack span {cursor: pointer; margin-left: 5px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><line x1="0" y1="0" x2="12" y2="12" stroke="black" stroke-width="1"/><line x1="12" y1="0" x2="0" y2="12" stroke="black" stroke-width="1"/></svg>') no-repeat center center;}
	#filterReset {cursor: pointer;}
	#filterToggle dl:last-child ul {display: margin-bottom: 0;}

	#shopList ul {margin: 0;}
	#shopMapWrap {width: 50%;}
	#shopMap {height: 100vh; overflow: hidden; width: 100%; }

}

@media only screen and (max-width: 699px){

	body {position: relative; right: 0; overflow-x: hidden;}
	.open {position: fixed; overflow: hidden; width: 100%;}

	#shopNav ul {margin: 0 0 15px; }
	#shopNav li+li {margin-left: 1.25em;}

	#shopSearch dd {padding: 0 15px;}
	#shopSearch dd+dd {margin: 0;}
	#shopSearch input {width: 100%;}

	#filter > dt {text-align: center;}
	#filter > dt li {display: inline-block; padding: 10px 15px 10px 0; }
	#filter > dt .button {background: /*#f7f7f7*/ url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="12"><line x1="0" y1="0" x2="6" y2="6" stroke="gray" stroke-width="1"/><line x1="6" y1="6" x2="0" y2="12" stroke="gray" stroke-width="1"/></svg>') no-repeat right center;}
	#filter > dt ul {padding: /*10px*/ 0 15px 0;}
	#filter > dd {overflow: auto; position: fixed; top: 0; width: 100%; height: 100%; right: -9999em;}
	#filterToggle {position: absolute; top: 0; left: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; width: 100%; height: 100%;}
	#filterToggle dl {padding: 15px; border-top: 1px solid #eee;}
	#filterToggle ul {margin: 5px 0 0;}
	#filterToggle label {padding: 0 16px; border-radius: 16px; margin: 9px 9px 0 0; height: 32px; line-height: 30px;}
	#filterMenu {margin: 10px 15px;}
	#filterBack span {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="14"><line x1="7" y1="0" x2="0" y2="7" stroke="black" stroke-width="1"/><line x1="0" y1="7" x2="7" y2="14" stroke="black" stroke-width="1"/></svg>') no-repeat center center;}

	#shopList ul {margin-bottom: 50px;}
	#shopList li:first-child a {border-top: 1px solid #eee;}
	#shopList a { border-bottom: 1px solid #eee;}
	#shopList span+span {white-space: nowrap; overflow: hidden; margin-bottom: 0; text-overflow: ellipsis; -webkit-text-overflow: ellipsis;}
	.ua-android-2 #shopList span+span, .ua-android-3 #shopList span+span, .ua-android-4 #shopList span+span {white-space: normal;}

	#searchFrame {display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; -webkit-box-flex-direction: column-reverse; flex-direction: column-reverse;}
	#shopMap, #spotMap {width: 100%; position: relative; padding-bottom: 35%; padding-top: 0; height: 0; overflow: hidden;}

	.remodal-wrapper.mujiService {padding: 0; bottom: auto; -webkit-overflow-scrolling: touch;}

}

@media screen and (max-width: 767px){
	#trademark {padding: 15px 0; position: absolute; left: 50%; top: 10px;}
	#trademark img {height: 16px; margin: 0;}
}

@media screen and (max-width: 480px){
	.language {margin-right: 2%;}   
}