@charset "utf-8";
/* CLEARFIX */
body#index .first,
body#index #main article#event,
body#index #main article#promotion {zoom: 1;}
body#index .first:after,
body#index #main article#event:after,
body#index #main article#promotion:after {content: "."; display: block; visibility: hidden; clear: both; height: 0; font-size: 0; line-height: 0;}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
img { -ms-interpolation-mode: bicubic; _behavior: url(/css/iepngfix.htc)}

p {color: #444; line-height: 2; margin-bottom: 1em;}
h1, h2 {color: #191919;}
a:hover h1 {color: #7f0019;}

#contentBody,
#sns ul,
#prevNext ul {zoom: 1;}
#contentBody:after,
#sns ul:after,
#prevNext ul:after {content: ""; display: block; clear: both;}


/* CONTENT */

h1#foundMUJILogo a {display: block; background: url(/foundmuji/img/logo.png) no-repeat left center; width: 109px; height: 48px; text-indent: -9999px;}
#siteName {font-size: 2em; width: 145px;}
#siteName a {
    padding: 10px 10px 10px 0;
    display: inline-block;
    line-height: 1;
    background: none;
    height: auto;
    text-indent: 0;
    width: 145px;
}
#siteName img {width: 100%; vertical-align: bottom;}

.content {position: relative; padding: 0;}

.content a {text-decoration: none;}

#contentBody {margin-top: 580px; margin-bottom: 100px; background: url(/foundmuji/img/bg_content.png) repeat-y 660px 0;}

#main {width: 620px; float: left; margin: 0;}

.lead {padding-bottom:15px;}
.lead,
article p {font-family:"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN",serif; line-height: 1.8; margin-bottom: 1em; font-size: 12px;}
article h1,
body.archive h2 {font-family:"Helvetica","Arial","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",serif;}

.first article {margin-bottom: 60px;}
.first article img {position: absolute; top: 48px;}
.first article p img {position: static;}
.first article h1,
body.archive h2 {font-size: 30px; margin-bottom: 25px;}
body.archive h2 {margin-top: 10px;}
.first article p {font-size: 14px;}

.second {float: left; width: 280px; margin-bottom: 60px;}
.second1 {margin-right: 60px;}
.second article h1,
.third article h1 {font-size: 18px; margin-bottom: 10px;}
article img {margin-bottom: 15px;}

.second article img {width: 100%;}

.third {clear: both;}
.third article {padding-left: 180px; margin-bottom: 60px;}
.third img {float: left; width: 160px; height: 100px; margin-left: -180px;}

.paging {display: none;}
#more {background: #f2f2f2; padding: 15px; font-size: 14px; cursor: pointer; text-align: center;
-webkit-transition: all .1s ease;
   -moz-transition: all .1s ease;  
     -o-transition: all .1s ease;  
        transition: all .1s ease;
}
#more:hover {background: #ddd;}


/* ARCHIVE */
.archive #main {float: none; width: 100%; max-width: 900px; display: flex; flex-wrap: wrap; overflow: hidden;}
.archive .second {float: none; display: inline-block; *display: inline; *zoom:1;  width: 33.3333%; vertical-align: top; letter-spacing: normal;}
.archive .second article {padding: 0 5px 0 5px;}
.archive #categories {}
.archive #categories h1,
.archive #categories ul,
.archive #categories li {display: inline;}

/* ARTICLE */
#prevNext {border-bottom: 1px solid #e6e6e6;}
#secondary #prevNext li {float: left; margin-bottom: 0; padding-bottom: 0; font-size: 14px; font-family:"Helvetica","Arial","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",serif;}
.prev {border-right: 1px solid #e6e6e6;}
#secondary #prevNext li a {padding: 10px; display: block; width: 89px; text-align: center;
-webkit-transition: all .2s ease;
   -moz-transition: all .2s ease;
     -o-transition: all .2s ease;
        transition: all .2s ease;
}
#secondary #prevNext li a:hover {background: #e8e8e8;}
.prev a:before {content: "← ";}
.next a:after {content: " →";}

#main .attribution {display: block; font-size: 11px; text-align: right; margin-top: 15px;}
#main .attribution dt {display: inline; color: #999; margin: 0 5px 0 10px;}
#main .attribution dd {display: inline;}

#sns {margin-bottom: 40px;}
#sns li {float: left; margin-right: 10px;}

#secondary {width: 220px; float: right; font-size: 11px;}
#secondary aside{margin-bottom: 40px;}
#secondary aside,
#secondary aside#aoyama h1 {padding-left: 20px; line-height: 1.8;}
#secondary aside#aoyama,
#secondary aside#prevNext {padding-left: 0;}

#secondary h1 {font-weight: bold; margin-bottom: 10px;}
#about h1 {background: url(http://www.muji.net/foundmuji/img/logo_large.png) no-repeat left center; height: 121px; text-indent: -9999px; margin: 6px 0 40px;}

.banner a {display: block; border: 2px solid #ccc; padding: 5px 10px 3px; background: url(/img/store/common/sprite_sidenav_test2.png) no-repeat 184px -242px #fcfcfc; font-weight: bold;}
.banner a:hover {border: 2px solid #7f0019; background-color: #fefefe;}

#aoyama .shopInfo a {background: url(http://www.muji.net/img/common/arrow_right.png) no-repeat 2px center; padding-left: 10px;}
#aoyama .shopInfo {font-weight: normal;}

#secondary li {margin-bottom: 10px;}

#secondary .attribution {margin-top: 6px;}

/* FOOTER */
#footer {margin-top: 60px;}

/* 120217 */
body#index .first {background-color: #fff;}
body#index .first article {margin-bottom: 40px;}
body#index .first article span {width: 880px; height: 550px; display: block; position: relative;}
body#index .first h1 {position: absolute; top: 484px; left: 25px;}
body#index .first h1.w {color: #fff;}
body#index .first h1.b {color: #191919;}
body#index .first p {padding-top :15px;}
body#index .first article img {top: 0;}
body#index .first a {display: block;}
body#index .first a:hover .attribution {color: #444;}
body#index .first a:hover p {color: #7f0019;}

body#index .second {width: 680px; margin-bottom: 0; margin-right: -60px;}
body#index .second article {display: inline-block; vertical-align: top; width: 280px; margin-bottom: 40px; margin-right: 56px;}
body#index .second article a {position: relative;}
body#index .second article a:after {position: absolute; top: 0; left: 0; width: 280px; height: 175px; background: #000; z-index: -1; content: "";}
body#index .second a img {-moz-transition: all 0.2s ease 0s;}
body#index .second 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;}

body#index #contentBody {margin-top: 35px; position: relative;}
body#index #contentBody h1#foundMUJILogo {position: absolute; top: 25px; left: 25px; width: 154px; height: 121px; text-indent: -9999px; z-index: 2;}
body#index #contentBody h1#foundMUJILogo.w {background: url(../foundmuji/logo_white.png) no-repeat left center;}
body#index #contentBody h1#foundMUJILogo.b {background: url(../foundmuji/logo_black.png) no-repeat left center;}

body#index #about h1 {background: none; text-indent: 0; font-size: 12px; margin: 0 0 8px; height: auto;}

body#index #more {clear: both;}
body#index #main .attribution {text-align: left;}
body#index #main a:hover .attribution {color: #444;}
body#index #main article a {display: block;} 
body#index #main article a:hover p {color: #7f0019;} 

body#index #main .eventArea {border: 1px solid #e6e6e6; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-bottom: 40px; position: relative; padding-bottom: 5px;}
body#index #main .eventArea article h1 {font-weight: bold; font-size: 14px; padding: 20px 20px 10px;}
body#index #main .eventArea article p {font-size: 11px; padding: 0 20px;}
body#index #main .eventArea article p a {display: inline-block;}
body#index #main .eventArea article p.shop {font-size: 10px;}
body#index #main .eventArea article p + h1 {margin-top: 15px; border-top: 1px solid #e6e6e6;}

/* PDF */
#event p.pdf {
	background-image: url(/foundmuji/img/ln_img_pdf.gif) no-repeat;
	margin-left: 20px;
	background-position: -2px 2px;
	}
.first p.pdf {
	background-image: url(/foundmuji/img/ln_img_pdf.gif) no-repeat;
	background-position: -2px 2px;
	margin-top:3em;
	font-size: 0.9em
    }

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

footer#globalFooter .footerNav5 {position: relative;}
footer#globalFooter .country .country-flag {display: inline-block; width: 18px; height: 12px; margin-right: 8px; background-size: 18px 12px;}
footer#globalFooter .country img {width: 18px; height: 12px; margin-right: 8px; vertical-align: middle;}
footer#globalFooter #copyright {color: #ccc; padding: 0; width: 90%; margin: 0 auto; text-align: left; max-width: 1024px; border: none; line-height: 1.4;}

footer#globalFooter nav.another ul {padding: 0;}
footer#globalFooter nav.another li a {color: #ccc;}
footer#globalFooter nav.another li span {padding: 10px 0; display: inline-block; color: #888;}
footer#globalFooter small {font-size: 100%;}

/* 180724 */
.first .item-list {display: flex; display: -webkit-box; display: -webkit-flex; flex-wrap: wrap; align-items: center; max-width: 620px; width: 100%;}
.first .item-list-image {width: 60%;}
.first .item-list-image img {width: 100%; position: static; top: 0;}
.item-list-text {overflow: hidden;}
.first .item-list-text p {font-size: 0.9em;}
.first .item-list-text .item-title {display: block; font-weight: bold;}
@media only screen and (max-width: 768px) {
    .first .item-list-image {width: 100%;}
}

/* mobile */
@media only screen and (max-width: 1060px) {
    #siteName {
        width: 100%;
    }
    #siteName a {
        padding: 7px 0;
    }

}
@media only screen and (max-width: 880px) {
    #foundMUJILogo {
        width: 100%;
        margin: 0 auto;
        padding: 0 15px;
    }
    .attribution {
        padding: 0 15px;
    }
    #main {
        width: 100%;
        padding: 0 15px;
    }
    #secondary {
        width: 100%;
        padding: 0;
        float: left;
        font-size: 11px;
        margin: 40px 0;
    }
    #contentBody {
        margin-top: 0;
        background: none;
        margin-bottom: 20px;
    }
    body#index #contentBody {
        margin-top: 0;
        position: relative;
        background: none;
      }
    body#index .first p {
        padding: 0 15px;
    }
    body#index .first .attribution {
        padding: 0 15px;
    }
      .content {
        width: 100%;
        max-width: 880px;
        padding: 0;
      }
      body#index .first article span {
        max-width: 880px;
        width: 100%;
        height: auto;
        display: block;
        position: relative;
      }
      body#index .first article span img {
        width: 100%;
      }

      body#index .second {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      body#index .second article {
          width: 49%;
          padding: 0;
          margin-right: 0;
      }
      .second article img {
          width: 100%;
      }
    body#index #contentBody h1#foundMUJILogo.w {
        top: 5px;
        background-size: 60%;
    }
    body#index .first a {
        display: block;
        position: relative;
    }
    body#index .first h1 {
      position: absolute;
      font-size: 28px;
      top: 85%;
      left: 3%;
    }
    body#index .second article a:after {
        background: #FFF;
    }
    /*found detail*/ 
    #prevNext ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 100%;
    }
    #secondary #prevNext li {
      float: none;
      width: 50%;
    }
    #secondary #prevNext li a {
        padding: 10px;
        display: block;
        width: 100%;
        text-align: center;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
    }
      .first article img {
        position: relative;
        width: 100%;
        height: auto;
        top: 5px;
      }
    .fb_iframe_widget,
    .fb_iframe_widget span,
    .fb_iframe_widget iframe[style]{
        width: 100% !important;
    }
    .fb_iframe_widget iframe {
        position: relative;
    }
    .fb_iframe_widget {
          display: block;
          position: relative;
      }
    .fb_iframe_widget span {
        display: block;
        position: relative;
        text-align: justify;
    }
    .fb_iframe_widget .pluginSkinLight ._2pi8 {
          padding: 0;
    }
}
    @media only screen and (max-width: 768px) {
        #main .attribution {padding: 0;}
        body#index .first p {
            padding-top: 15px;
            padding: 0 15px;
        }
        #secondary {
            padding: 0 15px;
        }
        #secondary aside, #secondary aside#aoyama h1 {
            padding-left: 0;
        }
        /* ARCHIVE */
        .archive #main {
        padding: 10px;
        }
        .archive .second {
            float: none;
            padding: 0;
            width: 50%;
            vertical-align: top;
            letter-spacing: normal;
        }
        .second article h1, .third article h1 {
            font-size: 16px;
            margin-bottom: 10px;
        }
        body#index .first h1 {
            position: absolute;
            font-size: 26px;
            top: 75%;
            left: 4%;
          }

        /*found detail*/
        .first article h1 {
            font-size: 24px;
            margin: 15px 0;
        }
        body.archive h2 {
            font-size: 20px;
            margin: 15px 0;
            padding: 0 15px;
          }
  .first article p {
    vertical-align: middle;
  }
      }
@media only screen and (max-width: 480px) {
    body#index .first h1 {
        position: absolute;
        font-size: 22px;
        top: 70%;
        left: 6%;
      }
  #main .first article p {
    margin-bottom: 20px;
  }
  #main .first article p.pdf {
    display: block;
  }
}