@charset "UTF-8";

/* CLEARFIX */
nav,
.step,
section#payBox,
#embroidery .font,
#embroidery .color,
#embroidery .item.sample,
#embroidery .item.sample ul,
#embroidery .item.illustration,
#embroidery .item.illustration ul,
#print .item.printItem,
#print .item.position,
#construct .item.targetItem,
#construct .item.targetItem ul,
#construct .item.process,
#customshirt .pocket,
#customshirt .button,
#customshirt .pocket li,
#customshirt .button li,
#print .item.file ul,
#wall .item.option ul,
.roomStaff,
#print .position,
#print .color {zoom: 1;}
nav:after,
.step:after,
#embroidery .font:after,
#embroidery .color:after,
#embroidery .item.sample:after,
#embroidery .item.sample ul:after,
#embroidery .item.illustration:after,
#embroidery .item.illustration ul:after,
#print .item.printItem:after,
#print .item.position:after,
#construct .item.targetItem:after,
#construct .item.targetItem ul:after,
#construct .item.process:after,
#customshirt .pocket:after,
#customshirt .button:after,
#customshirt .pocket li:after,
#customshirt .button li:after,
#print .item.file ul:after,
#wall .item.option ul:after,
.roomStaff:after,
#print .position:after,
#print .color:after {content: "."; display: block; visibility: hidden; clear: both; height: 0; font-size: 0; line-height: 0;}

#header #gnShop a {color: #bf808c;}

#main {width: 100%; max-width: 880px; margin: 0 auto;}

#intro {margin-bottom: 15px;}
.lead {font-size: 14px; line-height: 1.6; margin-bottom: 10px;}
.annotation, .item p.annotation {font-size: 11px; color: #999;}
#embroidery .item.color .annotation {display:inline-block;}
.annotation.asterisk {padding-left: 1em; text-indent: -1em;}

.relatedLink {margin-top:15px; margin-bottom: 15px;}
.relatedLink a {display: inline-block; background: url(/img/common/arrow_right.png) no-repeat 14px 50%; border: 1px solid #ccc; padding: 7px 14px 7px 28px; text-decoration: none; font-weight: bold;}
.relatedLink a:hover {border: 1px solid #7F0019;}

#title {font-size: 28px; font-weight: bold; margin: 30px 0;}
h1.category {font-size: 20px; font-weight: bold; letter-spacing: normal; border-top: 1px solid #ccc; padding-top: 15px; margin-bottom: 15px; width: 880px;}

p {margin-bottom: 10px;}
ul.annotation.asterisk {margin-bottom: 10px;}

.price {font-size: 11px;}
.price .num {font-size: 14px; font-weight: bold; margin: 0 2px;}
.name {margin-right: 10px; font-size: 14px;}

.menu ul {margin-right: -20px; letter-spacing: -.40em;}
.menu li {float: left; font-size: 14px;}
.menu a li {width: 129px; margin: 0 15px 15px 0; letter-spacing: normal; min-height: 80px; padding: 10px 10px 10px 22px; cursor: pointer; border: 1px solid #CCC; position:relative; border-radius: 4px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #f9f9f9), color-stop(0.00, #f0f0f0));
background: -webkit-linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
background: linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
}
.menu a:hover li {background: #ddd;}
.menu a li:before {content: ""; position: absolute; top: 16px; left: 10px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 6px solid #666;}
.menu span {font-size: 11px; color: #666; display: inline-block; width: 100%; padding-top: 6px;}

#service .wrapper {letter-spacing: -.40em; margin-right: -20px;}
.item {display: inline-block; width: 280px; margin: 0 20px 40px 0; letter-spacing: normal; vertical-align: top;}
.item h1 {font-size: 16px; font-weight: bold; margin-bottom: 5px;}
.item h1 .limit {
display: -moz-inline-box; /* Firefox2 */
display: inline-block;
*display: inline; *zoom: 1; /* IE6, IE7 */
margin: 0 1px 0 10px;  text-align: center; font-size:10px; padding:1px 4px; *padding:0 4px 1px; vertical-align: middle; font-weight: normal; border: 1px solid #333; color: #191919; line-height: 10px; 
-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: #fff;}

.item h2 {font-size: 14px; margin-top: 10px; margin-bottom: 5px; font-weight: bold;}
.item p {font-size: 14px; color: #333;}
.item img {width: 280px; margin-bottom: 4px;}

.recycling .item {margin-right: 16px; margin-bottom: 0;}
.recycling .item h1 {font-size: 14px;}

.bicycle dl {margin-bottom: 10px;}
.bicycle dt {font-weight: bold; margin-top: 5px;}

.shopIcon:after {content: ""; display: block; clear: both;}
.shopIcon li {float: left;}
.shopIcon li a {display: block; margin: 0 8px 8px 0; padding: 4px; cursor: pointer; border: 1px solid #CCC; border-radius: 4px; font-size: 11px; text-decoration: none;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #f9f9f9), color-stop(0.00, #f0f0f0));
background: -webkit-linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
background: linear-gradient(top, #f9f9f9 0%, #f0f0f0 100%);
}
.shopIcon a:hover li {background: #ddd;}

#pageEnd {margin-top: 0;}

/* gift */
#gift #service {margin-bottom: 40px;}
#gift #service .wrapper {display: flex; flex-wrap: wrap; margin: 0 0 30px; letter-spacing: 0;}
#gift section#free,
#gift section#payBag {width: 50%;}
#gift section#free .item,
section#payBag .item {width: 100%; margin: 0 0 40px;}
#gift section#payBox {width: 100%;}
section#payBox .item {width: 49%; margin: 0;}
#gift #service .wrapper .item img {width: 100%; margin-bottom: 10px;}
#gift #service .wrapper .item ul {text-align: right; margin-right:50px; line-height: 1.6;}
#gift #service .relatedLink {letter-spacing:initial; clear: both; margin-right: 20px; text-align: right;}

/* embroidery */
#embroidery .item {display: block; width: 880px; margin-bottom: 40px; letter-spacing: normal; vertical-align: top;}
#embroidery .font li {float: left; width: 176px; text-align: center; height: 230px;}
#embroidery .font li img {width: 176px;}
#embroidery .color li {float: left; height:140px;}
#embroidery .color li .annotation {display:inline-block;}
#embroidery .item.sample li {float: left; width: 160px; margin-right: 15px;}
#embroidery .item.sample li img {width: 160px;}
#embroidery .item.illustration li {float: left; margin-right: 15px; margin-bottom: 15px;}
#embroidery .item.illustration ul.annotation li {float: none; margin-bottom: 0;}
#embroidery .item.illustration ul.illustration.annotation li {color: #333;}
#embroidery .item.illustration li span.price {display: block;}
#embroidery .item.notice li {font-size: 14px;}

/* print */
#print ul {font-size: 14px;}
#print .item {display: block; width: 880px; margin-bottom: 40px; letter-spacing: normal; vertical-align: top;}
#print .item.printItem li {float: left; width: 160px; margin-right: 15px;}
#print .item.printItem li img {width: 160px;}
#print .item.order li {font-size: 14px;}
#print .item.file ul {margin-bottom: 10px;}
#print .item.file li {float: left;}
#print .position li, #print .color li {float: left;}
#print .color li img {width: 120px;}
#print .item.fee .price {margin-right: 10px;}
#print .item.position li {float: left; width: 160px; margin-right: 15px;}
#print .item.position li img {width: 160px;}
#print .item.position span img {width: 350px;}
#print .item.sample li {display: inline-block;}
#print .item.sample img {width: auto;}

/* wall */
#wall .item {display: block; width: 880px; margin-bottom: 40px; letter-spacing: normal; vertical-align: top;}
#wall .item.option ul {margin-bottom: 20px;}
#wall .item.option li {float: left; width: 160px; margin-right: 15px;}
#wall .item.option li img {width: 160px;}
#wall ul {letter-spacing: normal;}
#wall .module img {width: auto;}

/* stamp */
#stamp #intro img,
#bicycleRepair #intro img {margin-bottom: 30px;}
#stamp .shop h1,
#bicycleRepair .shop h1 {font-size: 20px;}
#stamp .shop h2,
#bicycleRepair .shop h2,
#bicycleRental .shop h2 {border-top: 1px solid #DFDFDF; padding-top: 10px; font-size: 16px;}
#stamp .shop h3,
#bicycleRepair .shop h3,
#bicycleRental .shop h3 {font-weight: bold; font-size: 14px;}
#stamp .shop li,
#bicycleRepair .shop li {display: inline-block; margin: 0 5px 3px 0;}
#stamp .shop li:after,
#bicycleRepair .shop li:after {content: "|"; margin-left: 10px;}
#stamp .shop li:last-child:after,
#bicycleRepair .shop li:last-child:after {content: none;}
#stamp .item,
#bicycleRepair .item {width: 880px;}
#stamp .shop .kanto ul,
#bicycleRepair .shop .kanto ul {margin-bottom: 10px;}
#bicycleRepair span.store {color: #555;}

/* construct */
#construct .item {display: block; width: 880px; margin-bottom: 40px; letter-spacing: normal; vertical-align: top;}
#construct .process li {float: left; letter-spacing: normal; margin-right: 20px; vertical-align: top; width: 280px; position: relative;}
#construct .process li:after {content:""; background: url(/shop/service/img/construct/arrow.png) no-repeat; -moz-background-size: 54% 54%; background-size: 54% 54%; width: 119px; height: 41px; position: absolute;}
#construct .process li:nth-child(1):after {right: -85px; top: 114px;}
#construct .process li:nth-child(2):after {right: -108px; top: 114px;}
#construct .process li:last-child {margin-right: 0;}
#construct .process li:last-child:after {background: none;}
#construct .process li img {width: 280px;}
#construct .item.targetItem li {float: left; width: 160px; margin-right: 15px; margin-bottom: 15px;}
#construct .item.targetItem li img {width: 160px;}
#construct .item.targetItem .annotation li {width: auto; margin-bottom: 0; float: none;}

/* woodroom */
#woodroom .item.serviceContent,
#woodroom .item.roomStaff,
#woodroom .item.reservation,
#woodroom .item.empty {display: block; width: 880px; margin-bottom: 40px; letter-spacing: normal; vertical-align: top;}
#woodroom .serviceContent dt {float: left; width: 70px; font-weight: bold;}
#woodroom .serviceContent dd {margin-left: 70px; margin-bottom: 5px;}
#woodroom .item.roomStaff img {float: left; margin-right: 20px;}
#woodroom .woodProgram h1, #woodroom .woodProgram h2, #woodroom .woodProgram p {letter-spacing: normal;}
#woodroom .woodProgram h1 {font-size: 18px; font-weight: bold; margin-bottom: 5px;}
#woodroom .woodProgram .item h1 {font-size: 14px;}
#woodroom .woodProgram h2 {font-size: 16px; font-weight: bold; margin-bottom: 10px;}
#woodroom .woodProgram .babyText {margin-bottom: 60px; font-size: 14px;}
#woodroom .item h1 {font-size: 18px;}
#woodroom .reservation ol li {font-size: 14px;}
#woodroom .woodProgram .babyText {border: 1px solid #E6E6E6; border-radius: 5px; padding: 15px; width: 820px;}
#woodroom iframe {margin-bottom: 40px;}
#woodroom aside#woodroomInfo {background-color:#f6f6f6; border-radius:10px; padding:30px; margin:30px 0; width: 820px; box-shadow:0px 0px 2px rgba(0,0,0,0.1);}
#woodroom .woodProgram aside h1 {font-size: 15px; font-weight: bold; margin:0 0 20px;}
#woodroom aside#woodroomInfo div,
#woodroom aside#woodroomInfo figure {display:inline-block; margin: 0; vertical-align:top;}
#woodroom aside#woodroomInfo figure {margin-right: 26px; width: 24%;}
#woodroom aside#woodroomInfo figure img {width: 100%;}
#woodroom aside#woodroomInfo div {width:72%;}
#woodroom aside#woodroomInfo div p {font-size:14px; line-height:1.6;}


/* customshirt */
#customshirt #title {margin-bottom: 15px;}
#customshirt #intro p {font-size: 15px; margin-top: 5px; margin-bottom: 25px;}
#customshirt .item {display: block; width: 880px; margin-bottom: 40px; letter-spacing: normal; vertical-align: top;}
#customshirt .pocket, #customshirt .button {width: 440px; float: left; margin-right: 0; text-align: center;}
#customshirt .pocket h1,
#customshirt .button h1 {font-size: 22px; border-bottom: 2px solid #333; margin-bottom: 10px; margin: 0 100px 10px; padding-bottom: 5px;}
#customshirt .pocket p,
#customshirt .button p {margin-bottom: 20px;}
#customshirt .pocket li,
#customshirt .button li {float: left; width: 220px; text-align: center;}
#customshirt .pocket li .thumb img,
#customshirt .button li .thumb img {width: 210px;}
#customshirt .attach {clear: both; border-top: 1px solid #ccc; padding-top: 15px;}
#customshirt .annotation.asterisk {padding-left: 0;}
#customshirt .limited {margin-top: -20px; padding-left: 215px; color: #7f0019; font-size: 16px;}
#customshirt .limited .price {font-size: 14px;}
#customshirt .limited .price .num {font-size: 16px;}


/* bicycle_repair */
#bicycleRepair #service h1 {font-size: 20px; margin-bottom: 10px; font-weight: bold; text-align: center;}
#bicycleRepair .shop h2 {padding-top: 20px; margin: 15px 0 20px;}
#bicycleRepair .shop h3 {margin: 10px 0;}
#bicycleRepair .shop li {margin: 0 5px 10px 0;}
#bicycleRepair .shop li:after {content: "";}
#bicycleRepair #service {padding: 25px 0 40px; margin-bottom: 40px;}
#bicycleRepair #service .wrapper > * {letter-spacing: normal;}
body#bicycleRepair #main #intro img {width: 100%; margin: 20px 0;}
#bicycleRepair .lead {margin: 25px auto 0;}
#bicycleRepair #shopList {margin-top: 45px;}
#bicycleRepair #notice {text-align: center;}


/* bicycle_rental */
#bicycleRental #service h1 {font-size: 20px; margin-bottom: 10px; font-weight: bold; text-align: center;}
#bicycleRental .shop h2 {padding-top: 20px; margin: 15px 0 20px;}
#bicycleRental .shop h3 {margin: 10px 0;}
#bicycleRental .shop li {margin: 0 5px 12px 0;}
#bicycleRental .shop li:after {content: "";}
#bicycleRental #service {padding: 25px 0 40px; margin-bottom: 40px;}
#bicycleRental #service .wrapper > * {letter-spacing: normal;}
body#bicycleRental #intro img {width: 100%; margin: 20px 0;}
#bicycleRental .lead {margin: 25px auto 0;}
#bicycleRental #shopList {margin-top: 45px;}
#bicycleRental #notice {text-align: center;}
#bicycleRental .item {width: 880px;}
#bicycleRental .item h2 {margin-top: 0;}
#bicycleRental .shop h3	{margin-top: 5px;}
#bicycleRental .terms h2 {font-weight: bold; padding-bottom: 5px; padding-top: 10px; font-size: 16px;}
#bicycleRental .terms h2 span {font-weight: normal; font-size: 12px;}
#bicycleRental .terms h3 {font-size: 14px; font-weight: bold; padding-bottom: 0;}
#bicycleRental .terms ul {margin-bottom: 10px;}


.pcOnly {display: block;}
.mobileOnly {display: none;}


#header {
  width: 100%;
}

#navheader {
  position: relative;
  z-index: 300;
}
#navheader #nav {
  overflow: auto;
  background-color: white;
  height: 24px;
  border-top: 2px solid #bababa;
  border-bottom: 1px solid #bababa;
  padding: 3px 20px;
  line-height: 24px;
}
#navheader #nav ul.menulist {
  list-style: none;
  float: left;
}
#navheader #nav ul.menulist li {
  float: left;
  font-size: 13px;
  font-weight: bold;
  background: url("/shop/images/pc/nav_sep.gif") no-repeat right center;
  padding-right: 19px;
  padding-left: 6px
}
#navheader #nav ul.menulist li:first-child {
	padding-left: 0
}
#navheader #nav ul.menulist li.last {
  background: url(/img/store/top/icon_openclose.png) right 10px no-repeat;
  padding-right: 14px;
}
#navheader #nav ul.menulist li.current a {
  color: #0b0b0b;
}
#navheader #nav ul.menulist li.current a:hover {
  color: #0b0b0b;
}
#navheader #nav ul.menulist li a {
  text-decoration: none;
  color: #bdbdbd;
}
#navheader #nav ul.menulist li a:hover {
  color: #7f0019;
}


/* news */
#news {
  position: absolute;
  top: 65px;
  left: 20px;
  background: #fff;
  width: 700px;
  padding: 20px 20px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  z-index: 500;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
}
#news:after {
  content: "";
  display: block;
  clear: both;
}
#news h1 {
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 30px;
}
#news h2 {
  font-size: 14px;
  margin-bottom: 10px;
}
#news ul {
  margin-bottom: 30px;
}
#news li {
  font-size: 12px;
  margin-bottom: 5px;
  padding-left: 2em;
}
#news li .pref {
  margin-right: 1em;
}
#news li .shopName {
  margin-right: 1em;
}
#news .close {
  float: right;
  text-decoration: none;
  color: #333;
  margin-top: 3px;
}
#news a {
  color: #333;
}


/*  global header/global footer  */
#globalHeader *, footer * {box-sizing: border-box;}

a {text-decoration: none; color: #666;}
.annotation {font-size: 12px;}

#globalHeader {height: 70px; position: relative; z-index: 100; width: 100%; font-size: 16px;}
#globalHeader:after {content: ""; display: block; clear: both;}
#globalHeader .headerWrap {width: 90%; margin: 0 auto; position: relative; max-width: 1024px;}
@media screen and (max-width : 1060px){
	#globalHeader .headerWrap {width: 100%;}
}

#siteName {z-index: 1001; top: 0; left: 0; margin: 0; position: absolute; width: 130px;}
#siteName a {width: auto; padding: 15px 0; display: block; line-height: 1;}
#siteName img {width: 100%; vertical-align: middle;}
@media screen and (max-width : 1060px){
	#siteName {z-index: 20; text-align: center; width: 100%;}
	#siteName a {padding: 7px 0; display: inline-block;}
	#siteName img {width: 145px; vertical-align: top; padding: 17px; border: 0;}
}

#hGlobalNav h1 {display: none;}
@media screen and (max-width : 1060px){
	#hGlobalNav {z-index: 1001;}
	#hGlobalNav h1 {display: block; background: url(//www.muji.com/img/menu_b.png) no-repeat center center; text-indent: -9999px; background-size: 20px 15px; position: absolute; top: 5px; left: 0; padding: 27px; margin: 0 0 0 3.5%; cursor: pointer; width: 20px; height: 15px; z-index: 1001; box-sizing: border-box;}
}
@media screen and (max-width : 480px){
	#hGlobalNav h1 {margin-left: 2%;}
}

#hGlobalNav .wrapper {
	display: block; background: none; height: auto; width: 100%; padding: 0;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	left: 0;
}

@media screen and (max-width : 1060px){
	#globalHeader .wrapper {background: rgba(0,0,0,.8); position: fixed; z-index: 1000; width: 100%; height: 100%; color: #fff; font-size: 16px; padding: 0; box-sizing: border-box; display: none;}
}

#globalHeader .wrapper ul {padding-left: 15%; margin: 0;}
#globalHeader .wrapper li {list-style: none; float: left; font-size: 13px; padding: 28px 10px; line-height: 1;}
#globalHeader .wrapper li.home {display: none; color: #333;}
#globalHeader .wrapper li a {border: 0; display: block;}
.ua-ie-8 #globalHeader .wrapper li a,
.ua-ie-9 #globalHeader .wrapper li a {font-weight: bold;}
#globalHeader .wrapper li a:hover {color: #999;}
#globalHeader .cancel {display: none;}
@media screen and (max-width : 1060px){
	#globalHeader .wrapper ul {padding: 0;}
	#globalHeader .wrapper li {float: none; font-size: 16px; padding: 0; text-align: center;}
	#globalHeader .wrapper li a {padding: 12px 20px; color: #fff;}
	#globalHeader .cancel {display: block; text-align: right; padding: 18px 18px 0;}
	#globalHeader .cancel:before {content: url("//www.muji.com/img/icon_close.png"); margin-right: 5px;}
}

footer {background: #000; line-height: 1; width: 100%; font-size: 14px; padding: 0;}
footer:after {content: ""; display: block; clear: both;}
footer nav {width: 90%; margin: 0 auto; max-width: 1024px;}
footer ul {margin: 0; list-style: none; padding: 15px 0;}
footer section + section ul {border-top: 1px solid #888;}
footer ul:after {content: ''; display: block; clear: both;}
footer li {float: left; padding-right: 20px; box-sizing: border-box;}
footer li a {color: #e7e7e7; display: inline-block; padding: 10px 0;}

footer .footerNav5 {position: relative;}
footer .country img {width: 18px; height: 12px; margin-right: 8px;}
footer #copyright {color: #ccc; width: 90%; margin: 0 auto; text-align: left; max-width: 1024px;}
footer .copyright {display: inline-block; float: left; padding: 10px 20px 10px 0; color: #888;}

footer nav.another ul {padding: 0;}
footer nav.another li a {color: #ccc;}
footer nav.another li span {padding: 10px 20px 10px 0; display: inline-block; color: #888;}

@media screen and (max-width : 767px){
	footer {font-size: 14px; padding: 0 0 15px;}
	footer li {width: 50%; line-height: 1.4; padding-right: 10px;}
	footer li:nth-child(2n+0) {margin-right: 0; padding-right: 0;}
	footer nav.another li {width: 50%; padding-left: 0;}
	footer li a {color: #e7e7e7; display: block; padding: 10px 0;}
	footer .copyright {display: block; float: none;}
}


/* menu open, search open */

@media screen and (max-width : 1060px){
	body.menuOpen #hGlobalNav .wrapper {display: block;}
	body.menuOpen #main,
	body.menuOpen #hGlobalNav h1,
	body.menuOpen #siteName img,
	body.searchOpen #main,
	body.searchOpen #hGlobalNav h1,
	body.searchOpen #siteName img {-webkit-filter: blur(5px); filter: blur(5px);}
}

#siteName {float: none; line-height: auto; font-size: 2em;}
h1#siteName a {width: auto; height: auto; background: none; text-indent: 0; overflow: visible;}

footer a:link, footer a:visited {color: #e7e7e7;}
#footerNav li {border: none; padding-right: 20px; margin-right: 0; line-height: 100%;}
#footerNav {margin: 0 auto;}
#copyright small {font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 80%;}

#trademark {position: absolute; top: 0; right: 0;}
#trademark img {height: 20px; margin: 25px 0 0 20px;}

#copyright {padding-top: 0; border-top: none;}

#intro .parent {margin-top: 30px;}
#title {margin-top: 10px;}