@charset "UTF-8";
/*
Theme Name: MUJI-JP
Author: Moon Graphica inc.
Author URI:　http://moongraphica.com/
Version:1.0
*/

/* RESET */
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, th, td {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
/* CLEARFIX */
.clearfix, #content {
zoom: 1;
overflow: hidden;
}
.clearfix:after, #content:after, {
content: ".";
display: block;
visibility: hidden;
clear: both;
height: 0;
font-size: 0;
line-height: 0;
}

/* LINK */
.releaseBox a:hover, .nav-single a:hover, .main a:hover, .older a:hover, .newer a:hover {
text-decoration:underline;
}
/*.releaseBox a, .nav-single a, .main a, .older a, .newer a {
color: #67AFFD;
}*/

/* --------------------------------
#wrap
-------------------------------- */
#wrap {
/*width: 940px;*/
padding: 0 15px;
margin: 20px auto 0 auto;
overflow: hidden;
min-height: 250px;
}
/* link */
#event a,#mainTitle a {
display: block;
text-decoration: none;
}
a img {
vertical-align: bottom;
}

/* hGlobalNav*/
body.menuOpen #globalHeader #hGlobalNav .wrapper, body.menuOpen #globalHeader #hGlobalNav .wrapper ul {
    display: block;
}


#siteName {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

#siteName a {
    padding: 10px 0;
    display: inline-block;
}

#globalHeader #hGlobalNav .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;
}

#hGlobalNav, #hSearch {
    z-index: 1001;
}

#globalHeader .headerWrap {
    width: 100%;
    margin: 0 auto;
    position: relative;
    max-width: 1024px;
}

#globalHeader .wrapper ul {
    padding: 0;
    margin: 0;
    display: none;
}

#globalHeader .wrapper li {
    float: none;
    font-size: 16px;
    padding: 0;
    text-align: center;
    font-weight: bold;
}

#globalHeader .wrapper li a {
  padding: 12px 20px;
  color: #fff;
}



#globalHeader .cancel {
  display: block;
  text-align: right;
  padding: 18px 18px 0;
}


#hGlobalNav h1, .black_back #hGlobalNav h1 {
  display: block;
  background: url(http://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;
}



/* --------------------------------
#left_crm
-------------------------------- */
#event {
width: 720px;
float: left;
margin: 0 0 60px 0;
}
#event ul {
width: 720px;
margin: 0 -20px 0 0;
padding: 0;
}
#event ul.eventList {
letter-spacing: -.40em;
}
#event li {
display: inline-block;
margin: 0 20px 20px 0;
vertical-align: top;
letter-spacing: normal;
width: 220px;
}

.image {
display: block;
}

#event .image img {
width: 100%;
}

#mainTitle a:hover img, #event a:hover img, #special_contents a:hover img {
-webkit-transition: 0;
-moz-transition: 0;
-o-transition: 0;
transition: 0;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}
#event .image, #special_contents .image {
margin-bottom: 10px;
}
#event ul,
#special_contents ul {
margin: 0;
padding: 0;
list-type: none;
}


/* first_entry */
/*
#event ul.eventList:first-child li:first-child {
width: 700px;
margin-top: 0;
}
#event ul.eventList:first-child li:first-child .image {
position: relative;
}*/

/* --------------------------------
firstchild
-------------------------------- */
/*#event ul.eventList:first-child li:first-child .image img {
width: 100%;
height:auto;
}

#event ul.eventList:first-child li:first-child .box h1.title {
font-size: 1.1em;
margin: 0 0 0.5em;
}
#event ul.eventList:first-child li:first-child .box span.tag {
font-size: 0.8em;
bottom: 12px;
left: 15px;
z-index: 10;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}*/


/* article_entry */
#event li .title, li .title {
font-size:14px;
display: block;
margin: 10px 0 5px;
}
#event li .date, li .tag {
color: #999;
font-size: 0.7em;
}

 ul.eventList.entryList {
    width: 100%;
    padding: 0;
}

/* --------------------------------
#right_crm
-------------------------------- */
#special_contents {
width: 200px;
padding: 0;
display: inline-block;
}
#special_contents h2 {
font-size: 1em;
font-weight: bold;
border-bottom: 0;
margin: 0px 0px 20px 0px;
}
#special_contents ul {
padding: 0;
}
#special_contents ul li {
margin-bottom: 10px;
list-style: none;
}
#special_contents ul li, #special_contents img {
width: 200px;
}

.mainDetails {width: 500px;}


/* --------------------------------
article
-------------------------------- */
article {
max-width: 730px;
margin: 0 auto 60px;
font-size: 14px;
line-height: 1.8;
}

article a:hover {
text-decoration: underline;
}

.introduction {max-width: 980px; margin-top: 40px;}

.header {
position: relative;
margin: 0 auto 10px;
display: block;
}
.heading:not(:target) {
filter: none;
-ms-filter: none;
}
.heading {
box-sizing: border-box;
margin-bottom: 15px;
}

article .heading h1.title {
font-size:1.7em;
line-height:1.3;
}

figure.image img{
  height: auto;
  width: 100%;
}

article section {
margin-bottom: 40px;
}
article section.wrap img {
padding-top: 10px;
padding-bottom: 10px;
}
article section.wrap p, .article section.wrap ul, .article section.wrap table {
margin-bottom: 1em;
}
article section.wrap h2 {
font-size: 1.2em;
text-transform: capitalize;
line-height: 1.3;
margin-bottom: 0.5em;
}


/* --------------------------------
section
-------------------------------- */

.mainDetails a,.events-title a,.shopPlace a {
    color: #67affd;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.4;
	margin-right: 15px;
}

#mainTitle ul.eventTop {
    margin: 0;
    padding: 0;
}

#mainTitle ul.eventTop {
    width: 700px;
    margin-top: 0;
}

#mainTitle{
width: 720px;
margin: 0 15px 30px 0;
float: left;
}

#mainTitle .image {
    position: relative;
    margin: 0 auto;
    display: block;
}

#mainTitle h1.topTitle {
  font-size: 1.4em;
  line-height: 1.5;
  font-weight: bold;
  margin-bottom: 10px;
}

#mainTitle .image img {
/*margin: -10% 0 0; */
}
#mainTitle span.topTag{
      color: #FFF;
      padding: 10px 0;
      font-weight: bold;
      font-size: 14px;
}


#mainTitle .dateTitle {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 12px;
    -moz-osx-font-smoothing: grayscale;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.01) 0, rgba(0,0,0,0.7) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.01)), color-stop(100%, rgba(0,0,0,0.7)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.01) 0, rgba(0,0,0,0.7) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.01) 0, rgba(0,0,0,0.7) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.01) 0, rgba(0,0,0,0.7) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.01) 0, rgba(0,0,0,0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#03000000', endColorstr='#bf000000', GradientType=0);
}

#mainTitle ul.eventList.entryList {
    width: 100%;
    padding: 0;
    margin-top: 0;
}

#mainTitle .multiNav{
  display: none;
}

#mainTitle .multiNav li {
    display: inline-block;
    font-size: 13px;
}

#mainTitle .multiNav li a {
    display: block;
    padding: 14px 0;
    margin: 0 10px;
}

#mainTitle .multiNav li.current {
    border-bottom: 1px solid #ccc;
}

#mainTitle .multiNav ul {
    margin: 0;
    padding: 0 0 0 5px;
    overflow: hidden;
}

#mainTitle li{
display: inline-block;
vertical-align: top;
letter-spacing: normal;
}



#mainDescription {
  width: 100%;
margin: 0 auto;
max-width: 980px;
display: -webkit-flex;
display: flex;
margin: 20px 0;
display: -webkit-box;
display: -ms-flexbox;
}

section.eventPhoto {
  overflow: hidden;
}

.descDetail {
margin-bottom: 30px;
}

.picture .mainDetails{
	width: 100%;
}

.picture {
    margin-right: 38px;
		position: relative;
		width: 100%;
    height: auto;
    -webkit-box-flex: 1.0;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}


.descDetail p {
    font-size: 15px;
    line-height: 2;
}

.shopPlace {
    margin-bottom: 20px;
}



/* accordion */
dl.accordion {overflow: hidden;}
dl.accordion dd {margin: 0; padding: 0;}

dl.accordion dt {
    background-color: #aaaaaa;
    margin-bottom: 1px;
    padding: 10px;
    color: #ffffff;
    cursor: pointer;
    position: relative;
    font-size: 14px;
    float: none;
}

dl.accordion dt.active:before {
    margin-top: -1px;
}
dl.accordion dt.active:after {
    margin-top: 2px;
}

dl.accordion dt:before {
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    right: 15px;
    width: 10px;
    height: 10px;
    margin-top: -9px;
    background: #FFF;
}

dl.accordion dt:after {
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    right: 15px;
    width: 10px;
    height: 10px;
    margin-top: -12px;
    background: #aaaaaa;
}

.accordion span.namePlace {
  background-color: #F5F5F5;
  padding: 12px 0 12px 10px;
  color: #545454;
  position: relative;
  display: block;
}



/* share */
aside.share {
text-align: center;
border: 0;
margin:0 auto;
}
aside.share a {
margin: 0 5px;
}

/* --------------------------------
media
-------------------------------- */
@media only screen and (min-width: 960px) {

}


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

#special_contents img {
height: 137px;
}
}
@media screen and (max-width: 934px) {


#mainTitle .image img {width: 100%;}
#event li {margin: 0 16px 16px 0;}


#content {
width: 90%;
}
#wrap {
overflow: hidden;
padding: 0;
}
#event {
margin-bottom: 30px;
width: 100%;
}
#special_contents {
width: 720px;
padding: 0;
}
#special_contents ul {
letter-spacing: -.40em;
width: 100%;
}
#special_contents ul li {
display: inline-block;
margin: 0 20px 30px 0;
vertical-align: top;
letter-spacing: normal;
width: 220px;
}

#event ul.eventList li:nth-child(3n+0) {
    margin-right: 0;
}

#mainDescription {display: inline-block; margin-top: 0;}
#siteName img {width: 145px; vertical-align: top; padding: 17px; border: 0;}
#siteName a {padding: 7px 0; display: inline-block; margin: 0;}

}

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

#event ul li .image img {height: auto;}


/* --------------------------------
firstchild
-------------------------------- */

/*#event ul.eventList:first-child li:first-child .box {
color: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background: rgba(0, 0, 0, .4);
padding: 15px 20px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#66000000,EndColorStr=#66000000);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#66000000,EndColorStr=#66000000)";
margin: 0;
}*/

/* --------------------------------
firstchild
-------------------------------- */
/*
#event ul.eventList:first-child li:first-child .box span.tag {
color: #fff;
}
*/
#event ul li .image img {
width:220px;
}
}

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

#wrap {
width: 700px;
}
#special_contents img {
width: 220px;
height: 137px;
}
#mainTitle {
    width: 100%;
    margin-top: 0;
}

#mainTitle ul.eventTop {
    width: 100%;
    margin-top: 0;
}

.mainDetails {width: 100%;}

}

@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {
    #mainTitle .multiNav {
    display: block;
    background: #FFF;
    overflow: hidden;
}
}


@media screen and (max-width: 767px) {
#mainTitle, #content, #wrap, #event, #event ul, #event ul.eventList:first-child li:first-child,#mainTitle, #mainTitle ul.eventTop  {
width: 100%;
padding: 0;
}



.main ul {padding: 4%;}

#globalHeader .wrapper ul {
    padding: 0;
    display: block;
}

#mainTitle {margin-bottom: 0; overflow: hidden; display: block;}
.mainDetails {padding: 4%;}
.content-title h2 {padding:0;}

/* main画像 700pxの際に適用 */
#mainTitle .image img{
    width: 140%;
    max-width: none;
    height: auto;
    margin: 0 -20% 0 -20%;
  }

  /* main画像 800pxの際に適用
  #mainTitle .image img{
      height: auto;
    }*/



  #mainTitle h1.topTitle {
    font-size: 1.2em;
    line-height: 1.5;
    font-weight: bold;
    margin-bottom: 5px;
}

#mainTitle span.topTag {
    font-size: 12px;
}

.picture,.mainDetails {
    width: 100%;
}



/* --------------------------------
firstchild
-------------------------------- */
/*
#event ul:first-child li:first-child a {
padding: 0;
position: static;
}
#event ul:first-child li:first-child .image {
position: static;
width: 100%;
display: block;
}
#event ul:first-child li:first-child .image img {
width: 100%;
height: auto;
margin-left: 0;
display: block;
position: relative;
}
#event ul:first-child li:first-child .title {
padding: 20px 10px;
height: auto;
position: static;
color: #333;
width: 100%;
}

#event ul.eventList:first-child li:first-child .box {
color: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 15px 20px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#66000000,EndColorStr=#66000000);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#66000000,EndColorStr=#66000000)";
margin: 0;
}

#event li .title span {
display: table-cell;
vertical-align: middle;
height: 68px;
}

#event ul:first-child li:first-child .tag {
width: 100%;
color: #999;
position: static;
padding: 0 10px 10px;
display: block;
margin-bottom: 20px;
}
*/

#event {
    padding: 20px 10px;
    background: #F3F3F3;
}


#event li {
    margin-bottom: 20px;
}

#event li:first-child{
  border-top: 1px solid #e4e4e4;
  background: #FFF;
}

#event li {
display: block;
width: 100%;
margin: 0;
vertical-align: top;
position: relative;
min-height: 100px;
letter-spacing: normal;
overflow: hidden;
margin-bottom: 20px;
background: #FFF;
}

#event li a {
display: block;
}
#event li .title {
width: 100%;
font-size: 1em;
line-height: 1.6;
padding: 10px;
margin-top: 20px;
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
}
#event li .tag {
padding: 10px;
}
#event li .image img {
display: block;
overflow: hidden;
max-width: 100%;
height: auto;
/*margin: -30% 0 0 0;*/
}


#event li span.image img {
width: 100%;
}

#siteName a{
    padding: 5px 0;
  }

  #globalHeader {
    height: 60px;
  }

/* more */
#event .more {
width: 100%;
margin: 0;
border-top: none;
border-bottom: 1px solid #e4e4e4;
}

/* special_contents */
#special_contents {
width: 100%;
padding: 0;
display: none;
}
#special_contents ul {
position: relative;
}
#special_contents ul:before {
border-right: 1px solid #e4e4e4;
content: "";
height: 100%;
position: absolute;
top: 0;
left: 50%;
}
#special_contents ul li {
width: 50%;
border-bottom: 1px solid #e4e4e4;
display: inline-block;
margin-bottom: 0;
margin-right: 0;
}
#special_contents ul li:nth-child(2),
#special_contents ul li:first-child {
border-top: 1px solid #e4e4e4;
}
#special_contents ul li .title {
padding: 10px 30px 10px 10px;
position: relative;
}
#special_contents img {
width: 100%;
min-height: 100px;
max-height: 240px;
}
#special_contents li .title:after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border: solid #666;
border-width: 0 1px 1px 0;
-webkit-transform: rotate(-45deg);
position: absolute;
right: 10px;
top: 16px;
}
article {
width: 100%;
}
article .header{
margin-bottom: 20px;
}
figure.image {
width: 100%;
height:auto;
}
article section {
width: 92%;
padding: 4%;
}

}

@media screen and (max-width: 480px) {
	table {
		width:100%;
}
#mainTitle .multiNav ul{
  overflow: scroll;
  white-space: nowrap;
}

#mainTitle .multiNav{
  display: block;
  background: #FFF;
  overflow: hidden;
}

}

/* --------------------------------
content
-------------------------------- */
#content {
max-width: 980px;
margin: 0 auto 40px;
-webkit-font-smoothing: antialiased;
}
.content-title, .events-title {
	margin-bottom:40px;
	font-size: 1em;
	font-weight: bold;
}

section.main ul {padding-left: 0;}

table td {
	vertical-align:top;
}

/* --------------------------------
release
-------------------------------- */
#release {
max-width: 730px;
margin:20px auto 0;
padding: 0 20px;
}
.releaseBox section {
margin-bottom: 25px;
}
.releaseBox p,.releaseBox ul,.releaseBox ol,.releaseBox table{
margin-bottom: 1.3em;
}
h1.tag {
margin-bottom: 40px;
border-bottom: 2px solid #C9CACA;
text-transform: capitalize;
font-size: 1.6em;
}
.releaseBox {
margin-bottom:80px;
}
.releaseBox h1 {
font-size: 2em;
line-height:1.3;
}
h1.entry-title {
  font-size: 19px;
    color: #191919;
    font-weight: normal;
    padding: 0;
    line-height: 1.6;
    margin-bottom: 20px;
    border: 0;
}
h1.entry-title a {
color: #333;
}
h1.entry-title a:hover {
color: #999;
text-decoration: none;
}
h1.entry-title-tag {
line-height: 1.3;
font-size: 1.6em;
text-transform: capitalize;
}
h1.entry-title-tag a {
color: #333;
}
h1.entry-title-tag a:hover {
color: #999;
}
.releaseBox h2 {
font-size: 1.4em;
line-height: 1.4;
}
.releaseBox h3 {
font-size: 1.2em;
}
.releaseBox h4 {
font-weight: bold;
}
.releaseBox p.postdata {
font-weight: normal;
padding: 8px 0;
color: #828282;
border-bottom: 1px dotted #DAD9D9;
margin-bottom:20px;
}
.releaseBox img {
padding-top:10px;
padding-bottom:10px;
}
.releaseBox blockquote {
background:#F6F6F6;
padding: 25px;
}
.releaseBox-contents {
margin-bottom:20px;
}
#release .nav-single {
margin-top: 40px;
text-align: center;
font-size: 0.8em;
line-height:2;
}
#release aside.share {
padding-top: 5px;
}
#release aside.share a {
margin: 0 5px 0 0;
}
/* --------------------------------
#Search
-------------------------------- */
h3.search {
margin-bottom: 30px;
line-height: 2;
}
.searchBox h1 {
font-size: 1.4em;
text-transform: capitalize;
}
.searchBox h1.entry-title {
line-height: 1.3;
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
padding: 15px 2px 12px;
margin-bottom: 20px;
}
.searchBox h1.entry-title a {
color: #333;
}
.searchBox h1.entry-title a:hover {
color: #999;
}
.searchBox h3 {
font-size: 1.2em;
}
.searchBox h4 {
font-weight: bold;
}
.searchBox h4.postdata {
font-weight: normal;
padding: 8px 0;
color: #828282;
border-bottom: 1px dotted #DAD9D9;
margin-bottom:15px;
}
.searchBox a {
color: #67AFFD;
}
.searchBox a:hover {
text-decoration:underline;
}
.searchBox-contents {
margin-bottom:40px;
}

/* --------------------------------
more
-------------------------------- */
.more_blog, .more {
float:none;
text-align: center;
height: 54px;
border-top: 1px solid #ccc;
margin: 30px auto 0;
cursor: pointer;
font-size: 14px;
}
.more_blog, .more a {
text-decoration: none;
color: #666;
line-height: 54px;
display: block;
}
.more_blog:hover, .more a:hover {
background: #e8e8e8;
color: #7f0019;
width: 100%;
height: 54px;
}
.more a:after {
content: none;
margin: 0;
}

/* --------------------------------
pager
-------------------------------- */
aside.pager {
border-top: 1px solid #ccc;
margin: 30px auto 0;
height: 54px;
font-size: 14px;
}
aside.pager .older, aside.pager .newer {
width: 50%;
line-height: 54px;
}
aside.pager .older {
float: left;
text-align:left;
}
aside.pager .newer {
float: right;
text-align:right;
}

/* --------------------------------
post img
-------------------------------- */

img.alignleft {
    display: block;
    margin: 1px auto 1px 1px;
}
img.aligncenter {
    display: block;
    margin: 1px auto;
}
img.alignright {
    display: block;
    margin: 1px 1px 1px auto;
}
.alignright {
	float: right;
}

.alignleft {
	float: left
}