@charset "utf-8";

*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased;}

img{
  max-width: 100%;
  height: auto;
  width /***/:auto; /*IE8*/
  border: 0;
  vertical-align: middle;
}

a {color: #333;}
.main a {text-decoration: underline;}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button#select_schedule,
button#select_schedule_shop,
button#select_schedule_release,
button#select_schedule_shop_release {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 2px 8px 4px;
    border-radius: 4px;
}

.entry-title span.tag {margin-right: 10px; color: #191919; padding: 2px 4px; background-color: rgba(255, 255, 255, .8); border-radius: 2px; font-size: .9em;}

.wrap {width: 90%; overflow: hidden; max-width: 1024px; margin: 0 auto;}
#main {background: none; height: auto; width: 100%; padding-top: 20px; margin: 0 auto;}
#main h1 {font-size: 17px; font-weight: normal; margin: 0 .5em 2em; line-height: 1; color: #333;}
#main section {margin-bottom: 20px;}
#main section ul {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 0;
}
.ua-ie-8 #main li,
.ua-ie-9 #main li {display: inline-block; letter-spacing: normal; margin: 0 5px 10px 0; vertical-align: top;}

.content-title, .events-title {margin-bottom: 5px; font-size: 1em; font-weight: bold; font-weight: normal;}

#main section#intro {margin: 40px 0;}
#intro h1 {display: inline-block; width: 500px; margin-right: 40px; vertical-align: middle;}
#intro p {display: inline-block; line-height: 2; font-weight: bold;}
#intro .wrap {width: 840px; margin: 0 auto;}

#main #intro #shopList {width: 100%; max-width: 840px; list-style: none;}
#main #intro #shopList li {width: 25%; height: auto; text-align: center; padding: 2%;}
#main #intro #shopList p {line-height: 1.4; font-size: 14px; position: relative; padding-left: 15px; margin: 20px 0;}
#main #intro #shopList p:after {
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -6px -5px 0 0;
  border-top: solid 3px #999;
  border-right: solid 3px #999;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}
#main #intro #shopList a {opacity: 0.8;}
#main #intro #shopList a:hover {opacity: 1;}
#shopList img {border-radius: 50%;}


/*maintenance TOP*/

#content .maintenance {overflow: hidden;}
#content .maintenance dl {margin: 20px 0;}
#content .maintenance dt {display: inline-block; float: none; font-weight: 600; margin-bottom: 5px;}
#content .maintenance dd {margin: 0; font-size: 12px;}



.ua-ie-8 #main #intro #shopList li,
.ua-ie-9 #main #intro #shopList li {width: 20%;}

@media screen and (max-width : 767px){
  article section {width: 100%;}
  #main #intro h1 {width: 100%; margin: 0 auto; display: inherit;}
  #intro .wrap {width: 65%;}
  #intro p {font-size: 14px; margin-top: 20px;}
  #main #intro #shopList {width: 90%; margin-top: 20px;}
  #main #intro #shopList p {font-size: 11px; margin-top: 10px; font-weight: nomal;}
}

#schedule {margin-top: 40px;}
#schedule h1,
#feature h1 {display: inline-block; font-weight: bold; font-size: 18px; margin: 0 0 10px 0;}
#schedule h2 {display: inline-block; font-weight: bold; font-size: 14px; margin: 0;}
#schedule p.year {display: inline-block; font-weight: bold; margin: 0 0 2em 20px; line-height: 1; font-size: 17px;}
#schedule table {width: 100%; font-size: 14px; margin: 10px 0 40px;}
#schedule th {text-align: center; width: 10%; padding: 15px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
#schedule td {padding: 10px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}

#feature #currentEvent {font-size: 14px; margin: 40px 0;}
#feature #currentEvent div {padding-bottom: 15px; border-bottom: 1px solid #fff;}
#feature #currentEvent div:last-child {border: 0; padding-bottom: 0;}

#schedule td div,
#feature #currentEvent div {position: relative;}
#schedule .finish td {position: relative; background: none;}
#schedule td div + div {margin-top: 20px;}
#schedule td a,
#feature #currentEvent a {display: inline-block; word-wrap: break-word; overflow-wrap: break-word;}
#schedule td a .title {text-decoration: underline; display: inline-block; margin: 0 10px 5px 0; position: relative; padding-top: 27px; width: 75%;}
#feature #currentEvent a .title,
#feature #nearFuture a .title {text-decoration: underline; display: inline-block; margin: 0 10px 5px 0; position: relative; padding-top: 0; width: 46%;}
#schedule td a .title:hover,
#feature #currentEvent a .title:hover {color: #000;}

@media screen and (max-width : 767px){
  #schedule td,
  #feature #currentEvent div {margin: 0; position: relative;}
  #schedule th {font-size: 13px; max-width: 8%; padding: 5px;}
  #feature #currentEvent div:last-child {margin-left: 0;}
  #schedule h1 {display: block; margin: 0 0 10px 0;}
  #feature #currentEvent {margin-top: 20px;}
  #schedule td a .title,
  #feature #currentEvent a .title,
  #feature #nearFuture a .title,
  #schedule .finish td a .title {margin: 5px 10px 0 0; width: 100%;}
}

#schedule .finish {background: #f1f1f1;}
#schedule .finish td a {padding-top: 28px; color: #999;}
#schedule .recruitment td a {padding-top: 28px;}
#schedule .finish .endDate {color: #999;}
#schedule .status {font-size: 12px; display: block; padding: 2px 5px; border-radius: 2px; margin-right: 10px; position: absolute; top: 0; left: 0;}
#schedule .finish .status {color: #fff; background-color: #333;}
#schedule .talkevent,
#schedule .exhibition,
#schedule .workshop {font-size: 12px; padding: 3px 6px; background-color: #ddd; border-radius: 2px; margin-right: 10px; display: inline-block;}
#schedule img,
#feature img {width: 20%; height: auto; margin-right: 2%; float: left;}
#feature #currentEvent img,
#feature #nearFuture img {width: 50%;}

#schedule .recruitment td a {padding-top: 28px;}
#schedule .recruitment .status {position: absolute; top: 0; left: 0; font-size: 12px; padding: 2px 6px; border-radius: 2px; margin-right: 10px; display: inline-block; color: #333; background-color: #f5eedd}
#schedule .eventType {font-size: 12px; padding: 3px 6px; background-color: #ddd; border-radius: 2px; margin-right: 10px; display: inline-block;}

#schedule td a .title:before,
#feature #currentEvent a .title:before,
#feature #nearFuture a .title:before {position: absolute; left: 0; top: 0; border-radius: 2px; font-size: 11px; padding: 1px 3px; background-color: #fff;}
#schedule td .canal a .title:before {content: "キャナルシティ博多"; border: 1px solid #afafaf;}
#schedule td .tokyo a .title:before {content: "有楽町"; border: 1px solid #afafaf;}
#schedule td .meitetsu a .title:before {content: "名古屋名鉄百貨店"; border: 1px solid #afafaf;}
#schedule td .grandfront a .title:before {content: "グランフロント大阪"; border: 1px solid #afafaf;}

#schedule td .sendailoft a .title:before {content: "仙台ロフト"; border: 1px solid #afafaf;}
#schedule td .hiroshimaparco a .title:before {content: "広島パルコ"; border: 1px solid #afafaf;}
#schedule td .aeonmallkyoto a .title:before {content: "イオンモールKYOTO"; border: 1px solid #afafaf;}
#schedule td .okayamalotz a .title:before {content: "岡山ロッツ"; border: 1px solid #afafaf;}

#schedule .endDate,
#feature .endDate {font-weight: bold; margin-bottom: 5px; display: inline-block;}

@media screen and (max-width : 767px){
  #schedule td div:after {
    display: block;
    position: absolute;
    bottom: 3%;
    right: 0;
    width: 7px;
    height: 7px;
    margin: -5px -5px 0 0;
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
  }
  #schedule img,
  #feature img {margin-right: 0; width: 100%;}
  #feature #currentEvent,
  #feature #nearFuture {padding-top: 20px;}
  #feature #currentEvent img,
  #feature #nearFuture img {width: 100%; margin-right: 0;}
  #openmujiInfo {padding: 40px 10px 20px 10px;}
}

.col2 {margin-right: -2%; letter-spacing: -.40em;}
.col2 li {display: inline-block; letter-spacing: normal; margin: 0 4% 40px 0; vertical-align: top; width: 48%;}
.col2 li:nth-child(2n) {margin-right: 0;}
.col2 figure img {width: 100%; height: auto; float: none;}
.col2 figure {margin: 0;}

@media screen and (max-width : 767px){
  .col2 {display: block; width: 100%;}
}

#shopInfo {margin: 80px 0; font-size: 13px;}
#shopInfo img {width: 50%; float: left; margin-right: 20px;}
#shopInfo dl {overflow: hidden;}
#shopInfo dd {margin: 0 0 5px 0;}
#shopInfo dt {color: #999;}
#shopInfo a {float: right; display: inline-block; font-size: 13px; padding: 5px 30px 5px 10px; border: 1px solid #ddd; position: relative;}
#shopInfo a:after {
  display: block;
  position: absolute;
  bottom: 11px;
  right: 18px;
  width: 7px;
  height: 7px;
  margin: -5px -5px 0 0;
  border-top: solid 1px #ccc;
  border-right: solid 1px #ccc;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}
.full-width{width:100%;}

.full-width a {
    color: #67affd;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.4;}

@media screen and (max-width : 767px){
  #shopInfo .col2 li {display: block; width: 100%; margin-bottom: 20px;}
  #shopInfo .col2 li img {width: 100%; float: none;}
  #shopInfo .col2 li dd {margin-left: 0;}
  #shopInfo a {margin-top: -45px;}
  #shopInfo aside a {margin-top: -0;}
  .full-width{width:90%; margin:0 auto;}
}

.select-wrap{
  vertical-align: middle;
  position:relative;
  overflow:hidden;
  display:inline-block;
  min-width:120px;
  min-width:6em;
  border:1px solid #ddd;
}
.select-wrap select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  position:relative;
  z-index:2;
  display:block;
  margin:0;
  padding: 3px 35px 3px 5px;
  background:transparent;
  border:0;
  outline:none;
}
.entypo-down-open-mini:before{
  position: absolute;
    bottom: 11px;
    right: 18px;
    width: 7px;
    height: 7px;
    margin: -5px -5px 0 0;
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    content: "";
}

aside {border: 1px solid #eee; padding: 30px; box-sizing: border-box; border-radius: 8px; margin-top: 30px; margin-bottom: 40px;}
aside.wrap {margin-bottom: 80px; max-width: 700px;}
#main aside h1 {font-weight: bold;}

aside.atelier {text-align: center; font-size: 11px; color: #666; border: none;}
aside.atelier a {text-decoration: underline;}
#main aside.atelier h1 {font-weight: normal; font-size: 12px;}

@media screen and (max-width : 767px){
  #main aside h1 {margin: 0 0 2em 0; line-height: 1.5;}
  aside {padding: 20px;}
}



/*single page*/

dl.detail {line-height: 1.2; margin: 0 0 40px 0; font-size: 13px;}
.detail dt {
	float: left;
	font-weight: bold;
	font-size: 15px;
  line-height:1.8;
}
.detail dd {
	margin-bottom: 5px;
	margin-left: 90px;
	line-height: 1.8;
	padding: 0;
	font-size: 15px;
}
.sp-show{display: inline;}
.mp-show{display: none;}
#main .shopName {font-size: 22px; margin: 20px 0 0; font-weight: bold;}


#openmujiInfo {margin: 40px auto 0; padding-top: 40px;}
#openmujiInfo.shop {margin: 0 auto; padding-top: 0; border: 0;}

#openmujiInfo h3 {font-size: 15px; font-weight: bold; margin: 20px 0 0;}
#openmujiInfo ul {list-style: none; padding: 0; margin: 0;}
#openmujiInfo dl {line-height: 1.4; margin: 15px 0; font-size: 13px;}
#openmujiInfo dt {float: left; font-weight: bold;}
#openmujiInfo dd {margin-bottom: 3px; margin-left: 70px;}
#openmujiInfo .info {width: 45%; float: left; margin-right: 5%;}
#openmujiInfo .info.local {width: 50%; margin: 20px auto; text-align: center; float: none;}
#openmujiInfo.local .info {float: none; margin: 0 auto;}
#openmujiInfo .shopImg {width: 50%;}

@media screen and (max-width : 767px){

  .sp-show{display: none;}
.mp-show{display: inline;}
  #main .shopName {font-size: 16px;}
  #openmujiInfo .info {width: 80%; float: none; margin: 0 auto;}
  #openmujiInfo .shopImg {width: 100%; float: none; margin: 0 auto;}
  #openmujiInfo h3 {margin-top: 20px; padding: 0 2%;}
  #openmujiInfo .info.local {width: 80%;}
  #openmujiInfo ul.threePanels {padding: 0 2%;}
}
#openmujiInfo a:hover {text-decoration: none;}
figure {margin: 0;}
figure:after,
nav:after,
.wrap:after {
 content: "";
 display: block;
 clear: both;
}
#openmujiInfo ul.threePanels {
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
box-sizing: border-box;
margin-bottom: 15px;
}
.ua-ie-8 #openmujiInfo ul,
.ua-ie-9 #openmujiInfo ul {margin-right: -20px; letter-spacing: -.40em; margin-top: 20px;}
.ua-ie-8 #openmujiInfo li,
.ua-ie-9 #openmujiInfo li {display: inline-block; letter-spacing: normal; margin: 0 20px 10px 0; vertical-align: top;}
#openmujiInfo ul li {margin-bottom: 20px; position: relative; box-sizing: border-box; margin: 20px 2% 0 0;}
#openmujiInfo .threePanels li {width: 32%; height: auto;}
#openmujiInfo ul li:nth-child(3n) {margin-right: 0;}
ul.threePanels a,
.shopInfo a {color: #666;}
#openmujiInfo .shopInfo:after {bottom: 12px;}
#openmujiInfo aside {max-width: 700px; margin: 40px auto;}

@media screen and (max-width : 767px){
  #openmujiInfo .threePanels li {width: 49%;}
  #openmujiInfo ul li:nth-child(3n) {margin-right: 2%;}
  #openmujiInfo ul li:nth-child(2n) {margin-right: 0;}
}

#openmujiInfo .title {line-height: 1.4;}
#openmujiInfo .shopInfo {
  float: right;
  display: inline-block;
  font-size: 13px;
  padding: 5px 30px 5px 10px;
  border: 1px solid #ddd;
  position: relative;
  margin: -45px 0 20px 0;
 }
#openmujiInfo.shop .shopInfo {margin: 0 0 20px 0;}
#openmujiInfo .shopInfo:after {
  display: block;
  position: absolute;
  bottom: 9px;
  right: 18px;
  width: 7px;
  height: 7px;
  margin: -5px -5px 0 0;
  border-top: solid 1px #ccc;
  border-right: solid 1px #ccc;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}

#openmujiInfo.shop nav {margin-bottom: 20px; font-size: 13px;}
#openmujiInfo.shop nav ul {float: right;}
#openmujiInfo.shop nav ul li {border-right: 1px solid #ddd; padding: 2px 20px 2px 0; margin-right: 20px;}
#openmujiInfo.shop nav ul li:nth-child(3n) {margin-right: 20px;}
#openmujiInfo.shop nav ul li:nth-child(2n) {margin-right: 20px;}
#openmujiInfo.shop nav ul li:last-child {margin-right: 0; padding-right: 0; border: 0;}
#openmujiInfo.shop nav ul li.current a,
#openmujiInfo.shop nav a:hover {opacity: .6;}

#map_canvas {height: 300px;}
.backLink {text-align: center; font-size: 13px; margin: 0 0 40px; clear: both;}


@media screen and (max-width: 413px){
#content .maintenance dl {padding: 0 10px;}
}

@media screen and (max-width: 499px){
    #content .maintenance dl {padding: 0 10px;}
}