@charset "UTF-8";

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

#home {text-align: right; margin:0; line-height: 0; width: auto; float: right;}
#home a {padding: 25px; display: inline-block;}
#home a img {width: 120px;}

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;}

nav ul {margin: 10px 0; padding: 0 0 0 5px; overflow: hidden;}
nav li {display: inline-block; font-size: 13px;}
nav li a {display: block; padding: 5px 0; margin: 0 10px;}
nav li a:last-child {border: none;}
nav li.current a {border-bottom: 1px solid #ccc; padding-bottom: 2px;}

@media only screen and (max-width : 480px){
nav ul {overflow: scroll; white-space: nowrap;}

}


.lead p {margin: 0 auto;}
.lead p, .lead .desc { max-width: 800px; margin: 20px auto 0; text-align: left;}
/*.ua-windows_nt .lead, .ua-windows_nt .desc {font-family: sans-serif;}*/
article .lead {margin: 7vw auto; font-size: 16px;}
article hr {border:solid #777; border-width:1px 0 0 0; width: 50%; margin: 40px auto;}
@media only screen and (max-width : 767px){
  body {line-height: 1.6;}
  .lead, .desc, article .lead {font-size: 14px; line-height: 1.8;}
  .lead {width: 90%;}
  .lead, p {margin: 20px auto 0;}
}

#intoro {position: relative;}
#intoro h1 {position: absolute; width: 100%; text-align: center; color: #fff; font-size: 32px; top: 45%; padding: 0 10px; text-shadow: 1px 1px 3px rgba(0,0,0,.5);}
#intoro,
#intoro img {width: 100%; height: auto;}
@media only screen and (max-width : 767px){
    #intoro {overflow: hidden;}
    #intoro h1 {top: 35%; font-size: 28px;}
    #intoro img {width: 100%; /*margin-left: -10%;*/ height: auto;}
}

header {text-align: left; overflow: hidden; /*position: absolute;*/ width: 100%; z-index: 100;}
article header h1 {margin: 0; font-size: 20px; text-align: left; padding: 26px 20px 0; display: inline-block; width: auto; float: left; line-height: 1;}
article header h2 {font-size: 12px; padding: 29px 20px 0; color: #666; margin: 0 0 0 20px; line-height: 1; font-weight: normal;}
@media only screen and (max-width : 767px){
  article header h1 {padding: 15px 0 0 15px; float: none;}
  article header h2 {margin-left: 0; padding: 5px 0 15px 15px;}
  #home a {padding: 15px 15px 0;}
  #home a img {width: 100px;}
}
@media only screen and (max-width : 480px){
  article header h1 {font-size: 16px;}
  article header h2 {font-size: 10px;}
  #home a img {width: 90px; line-height: 1;}
}

.viewport {position: relative; width: 90%; margin: 0 auto 40px;}
.viewport img {width: 100%; max-width: 1000px;}
.viewport .image-caption{
  margin: 0 auto 40px;
  text-align: left;
  max-width: 1000px;
}
.viewport .image-caption span{
  font-weight: bold;
  font-size: 1.2em;
  display: block;
}
.viewport .image-caption a{
  text-decoration: underline;
}
@media only screen and (max-width : 767px){
  .viewport .image-caption{margin-bottom: 25px;}
}
#storeImg {width: 100%; background: #f7f7f7; padding: 40px 0;margin-bottom: 80px;}
#storeImg img {margin-bottom: 40px;}
@media only screen and (max-width : 767px){
    #storeImg img {margin-bottom: 25px;}
}

#info {margin-top: 80px; width: 100%;}
#info h1 {margin: 0 0 20px; font-size: 1.4em; line-height: 1.2;}
#info .viewport {width: 80%; max-width: 650px; /*border: 1px solid #ddd;*/ padding: 30px; box-sizing: border-box; border-radius: 5px; background: #f7f7f7;}
#info .viewport img {width: 100%;}
#info .annotation {text-align: left;}
#info #whatismuji {position: relative;}
#info #whatismuji h1 {position: absolute; top: 45%; right: 18%; font-size: 2em;}
#info #whatismuji a {color: #191919;}
#info #whatismuji:after {
    display: block;
    position: absolute;
    bottom: 15%;
    right: 55px;
    width: 9px;
    height: 9px;
    margin: -4px -5px 0 0;
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    z-index: 2;
}

.relatedLink {display: block; text-align: right; margin-top: 20px;}
.relatedLink a {display: inline-block; background: url(/img/common/arrow_right.png) no-repeat 14px 50%; border: 1px solid #ddd; padding: 8px 20px 8px 35px; text-decoration: none; font-size: 13px;}
.relatedLink a:hover {border: 1px solid #999;}

@media only screen and (max-width : 767px){
    .relatedLink a {font-size: 12px;}
    #info #whatismuji h1 {font-size: 1.4em;}
    #info #whatismuji:after {bottom: 20%; right: 45px;}
    #info .viewport {width: 90%; padding: 20px;}
}
@media only screen and (max-width : 480px){
    #info #whatismuji h1 {font-size: 1em; right: 17%;}
    #info #whatismuji:after {bottom: 25%; right: 45px;}
}
@media only screen and (max-width : 320px){
    #info #whatismuji h1 {font-size: 1em; right: 18%;}
    #info #whatismuji:after {bottom: 25%; right: 38px;}
}

.outsideWrap.gr {background-color: #f7f7f7;}
.outsideWrap {
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}
.col2_1 img, .col2_2 img, .col2_3 > img {
    width: 45%;
    height: auto;
    float: left;
    margin-right: 20px;
}
.wrapper {
    display: block;
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    box-sizing: border-box;
    max-width: 1024px;
    padding: 40px 0;
}
.shopName {font-weight: bold; font-size: 18px;}
.detail {text-align: left; line-height: 1.5;}
.detail dt {font-weight: bold; margin: 5px 0 0 0;}
.detail dd a {text-decoration: underline; padding: 0 3px;}
@media only screen and (max-width : 767px){
    .detail dd {margin-left: 0;}
    figure {margin: 20px 0;}
    .col2_1 img, .col2_2 img, .col2_3 > img {width: 100%; float: none;}
}

header:after {content: ""; clear: both; display: block;}

aside.share {text-align: center; color: #999; font-size: 12px; margin: 40px auto 20px;}
aside.share a {width: 22px; height: auto; display: inline-block; margin: 0 0 0 10px;}
aside.share a img {width: 100%; vertical-align: middle; opacity: .6;}
aside.share a img.fbBtn {width: 85%;}

footer {background: #fff;}
footer p {font-size: 11px; color: #666; margin: 0 auto; padding: 10px 0;}


#map_canvas {width:100%; height: 400px; margin: 0;}
.icon img {width: 100%; height: auto;}