@charset "UTF-8";

/**
 * モーダルウィンドウ用 基本CSS
 */

html, body {height: 100%; /* #wrap min-height: 100%;を実装するために必要 */}

/*body.formOpen #globalHeader,body.formOpen #content,body.formOpen #wrap,body.formOpen .main,body.formOpen #openmujiInfo
 {-webkit-filter: blur(5px); filter: blur(5px);}*/

/* body直下のwapper */
#wrap {
    position: relative; /* .modalBaseLayer position: absolute;の基準要素となります */
    min-height: 100%;   /* .modalBaseLayer を、画面ぴったりに縦横100%指定するために必要 */
    overflow: hidden;   /* モーダルウィンドウの高さが、#wrapの高さを超えても表示に問題がでないように。
                      あと、スマートフォンで横スクロールがでないようにする対策 */
    width: 100%;        /* スマートフォンで横スクロールがでないようにする対策 */
    margin: 0 auto;
}

/* #wrap直下のページコーディングエリア */
#contents {position: relative; z-index: 1;}

select::-ms-expand {display: none;}

.modal {display: block; text-align: center; vertical-align: middle; outline: none; overflow: hidden; max-width: 580px; padding: 130px 90px; margin: 0 auto; -webkit-font-smoothing: antialiased;}
.modal a {text-decoration: none; color: #666;}
.modal a:hover {text-decoration: none;}

#modal .col {margin-top: 30px; text-align: left;}
#modal .input label {font-size: 14px; color: #565a5c;}
a#closeModal,#modal .close-modalBaseLayer02,#modal .close-modalBaseLayer03,#modal .close-modalBaseLayer04, #modal .close-modalBaseLayer05, #modal .close-modalBaseLayer06,#modal .close-modalBaseLayer07 {font-size: 32px;
    padding: 10px 20px;
    position: absolute;
    text-decoration: none;
    cursor: pointer;
    top: 0;
    right: 0;
    color: #ABABAB;
    letter-spacing: 0;
    font-weight: 100;
    font-style: normal;
  }

#userId,#userName,#userPhone,#userEmail,#userFurigana {
  display: inline-block;
  font-size: 14px;
  color: #555;
  border: 1px solid #CFCFCF;
  border-radius: 2px;
  padding: 14px;
  margin-top: 2px;
  width: 100%;
}

.eventDate {font-size: 14px; word-wrap: break-word; padding: 2px 0px 2px; margin-right: 2px; vertical-align: middle; display: inline-block; overflow: hidden;}
.eventLocation {width: 350px; font-size: 14px; word-wrap: break-word; padding: 2px 0px 2px; margin-right: 2px; vertical-align: middle; display: inline-block; overflow: hidden;}
.signup .idHelp {padding: 10px 10px 0px; display: block; font-size: 12px; text-align: right; margin-top: 10px;}
.idHelp a.tooltip {text-align: center; position: relative;}
.dateSpace {padding: 20px 16px 20px; font-size: 12px; text-align: center; display: block; vertical-align: middle; margin: 20px 0 20px; background: #F3F3F3; overflow: hidden;}

#modal .dateSpace h3 span#eventIdinfo {font-weight: bold; font-size: 16px;}
#modal dl.resultReservation {display: block; margin-top: 10px;}
#modal dl.resultReservation dd {margin: 6px 0; font-size: 14px;}
.inputSelect { position: relative; margin-top: 16px;}
.inputSelectDate { position: relative; margin-top: 14px; display: inline-block; width: 55%; float: left;}

#memberSelect option {color: #555;}
.inputSelect select#memberSelect {width: 100%; display: block; padding: 14px; font-size: 14px; -webkit-appearance: none; background-color: #FFFFFF; border: 1px solid #CFCFCF;
    border-radius: 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

.dateTime {width: 100%; display: block; padding: 14px 34px 14px 14px; font-size: 14px; -webkit-appearance: none; background-color: #FFFFFF; border: 1px solid #CFCFCF;
        border-radius: 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

.selectionArea {width: 100%; display: block; padding: 6px 10px 6px 10px; font-size: 12px; -webkit-appearance: none; background-color: #FFFFFF; border: 1px solid #CFCFCF;
                border-radius: 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

.selectionShop {width: 100%; display: block; padding: 6px 10px 6px 10px; font-size: 12px; -webkit-appearance: none; background-color: #FFFFFF; border: 1px solid #CFCFCF;
                border-radius: 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

#modal .signup span.change {font-size: 12px; margin-top: 6px; color: #7D7D7D; padding: 0 5px; display: block;}


.inputSelect:before{
    content: '\25bc';
    position: absolute;
    pointer-events: none;
    color: #82888a;
    top: 0;
    bottom: 1px;
    padding-top: 1.2em;
    line-height: 1;
    right: 10px;
    width: 2em;
    text-align: center;
    transform: scale(0.84, 0.42);
    -webkit-transform: scale(0.84, 0.42);
    -moz-transform: scale(0.84, 0.42);
    -ms-transform: scale(0.84, 0.42);
    -o-transform: scale(0.84, 0.42);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=.84, M12=0, M21=0, M22=.42, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=.84, M12=0, M21=0, M22=.42, SizingMethod='auto expand');
}

.timeareaLine {clear: both; display: block; overflow: hidden;}

#modal input[type="text"]:focus {box-shadow: 0 0 2px 0 rgba(100,100,100,0.97); outline: 0;}
#modal input[type="tel"]:focus {box-shadow: 0 0 2px 0 rgba(100,100,100,0.97); outline: 0;}
#modal input[type="email"]:focus {box-shadow: 0 0 2px 0 rgba(100,100,100,0.97); outline: 0;}

#modal select:focus {border: 2px solid #CFCFCF; outline: 0;}
.timeReport {display: block; overflow: hidden; border-bottom: 1px solid #DEDEDE; padding: 8px 12px 14px;}
.timeReport:first-child {border-top: 1px solid #DEDEDE;}
.timeReport2 {display: block; overflow: hidden; border-top: 1px solid #DEDEDE; padding: 12px 12px 20px;}
.timeReportCancel {display: block; overflow: hidden; border-bottom: 1px solid #DEDEDE; padding: 10px 12px 10px; background: #f1f1f1;}
.timeReportClose,.timeReportOver {display: block; overflow: hidden; border-bottom: 1px solid #DEDEDE; padding: 10px 12px 10px; background: #E3E3E3;}
.timeReportClose ul.timeChoose,.timeReportOver ul.timeChoose {color: #9A9A9A;}
.close .eventStatus {color: #9A9A9A;
  text-decoration: none;
  text-align: center;
  width: 100%;
  line-height: 30px;
  display: block;
  border: #cccccc 2px solid;
  padding: 6px 36px;
  font-weight: bold;
  border-radius: 20px;}

.timeChoose {padding: 10px 0 10px 6px; width: 100%; overflow: hidden; vertical-align: middle; display: inline-block; margin: 0;}
.timeChoose li {position: relative; line-height: 1.8; display: inline-block;}
.application {width: 100%; overflow: hidden; margin-top: 15px;}
.application table {width: 90%; font-size: 14px; margin: 10px 0 20px;}
.applicationBtn, .eventCancellation, .eventExpire, .eventFull .close {margin-top: 6px; text-align: center; vertical-align: middle; width: 100%; display: inline-block; overflow: hidden;}

.timeReportCancel .cancellation {text-align: center; width: 100%; vertical-align: middle; overflow: hidden; margin-top: 10px; display: inline-block; background-color: #FFFFFF;}
.timeReportClose .close {text-align: center; width: 100%; vertical-align: middle; overflow: hidden; display: inline-block; background-color: #E3E3E3;}
.application td {width: 70%; padding: 8px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; line-height: 1.6; letter-spacing: 1px;}
.application th {width: 80%; padding: 20px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; border-left: 1px solid #ddd; vertical-align: middle;}
/* span.radio {padding-right: 6px; position: relative; display: inline-block; vertical-align: middle;*/
    /* overflow: hidden; */ /*width: 28px; height: 30px;}*/

.numberPosition,.detailLocation {font-size: 12px;
  padding: 6px 12px;
  background-color: #ddd;
  border-radius: 2px;
  vertical-align: middle;
  margin: 12px 40px 12px 0;
  display: inline-block;}

  a.subscriptionForm {
    color: #333;
    text-decoration: none;
    text-align: center;
    font-size: 13px;
    width: 100%;
    line-height: 30px;
    display: block;
    border: #cccccc 2px solid;
    padding: 6px 80px;
    font-weight: bold;
    border-radius: 30px;
  }

    input.eventCancel  {
      text-decoration: none;
      background-color: #FFFFFF;
      text-align: center;
      width: 100%;
      line-height: 30px;
      display: block;
      color: #000000;
      border: #cccccc 2px solid;
      padding: 6px 30px;
      font-weight: bold;
    }

/*アコーディオン表示の申し込み*/
  dl.accordion .full {
    background: #E3E3E3;
    color: #8D8D8D;}

    dl.accordion .timeReport {padding: 0;}
    dl.accordion .timeReport:first-child {border-top: 1px solid #DEDEDE;}
    dl.accordion .timeReport2 {padding: 0;}
    dl.accordion .timeReportCancel {display: block; overflow: hidden; border-bottom: 1px solid #DEDEDE; padding: 10px 12px 10px; background: #f1f1f1;}
    dl.accordion .timeReportClose,.timeReportOver {padding: 0;}
    dl.accordion .timeReportClose ul.timeChoose,.timeReportOver ul.timeChoose {color: #9A9A9A;}
    dl.accordion .close .eventStatus {color: #9A9A9A;
      text-decoration: none;
      text-align: center;
      width: 100%;
      line-height: 26px;
      display: block;
      border: #cccccc 2px solid;
      padding: 6px 70px;
      font-weight: bold;
      border-radius: 20px;}

    dl.accordion .timeChoose {padding: 12px 6px 14px 6px; width: 100%; overflow: hidden; vertical-align: middle; display: inline-block; margin: 0;}
    dl.accordion .timeChoose li {position: relative; line-height: 1.8; padding-right: 2px; display: inline-block;}
    dl.accordion .timeReportCancel .cancellation {text-align: center; width: 100%; vertical-align: middle; overflow: hidden; margin-top: 10px; display: inline-block; background-color: #FFFFFF;}
    dl.accordion .timeReportClose .close {margin-top: 0;}
  dl.accordion .application td {width: 70%; padding: 8px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; line-height: 1.6; letter-spacing: 1px;}
    dl.accordion .application th {width: 80%; padding: 20px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; border-left: 1px solid #ddd; vertical-align: middle;}
    dl.accordion .applicationBtn, .eventCancellation, .eventExpire, .eventFull .close {margin-top:2px;}
    dl.accordion span.numberPosition,span.detailLocation {margin: 12px 90px 12px 0;}
    dl.accordion .eventDate {width: 350px;}
    dl.accordion a.subscriptionForm {
      color: #333333;
      text-decoration: none;
      text-align: center;
      width: 100%;
      line-height: 26px;
      display: block;
      border: #cccccc 2px solid;
      padding: 6px 60px;
      font-weight: bold;
      border-radius: 20px;}

    dl.accordion input.eventCancel  {
        text-decoration: none;
        background-color: #FFFFFF;
        text-align: center;
        width: 100%;
        line-height: 30px;
        display: block;
        color: #000000;
        border: #cccccc 2px solid;
        padding: 6px 30px;
        font-weight: bold;
      }


#modal .input {padding-top: 2px; margin-bottom: 4px; position: relative; text-align: left;}
.submit,.calendar {display: block; margin-top: 30px;}
.cancelReservation,.reservationSchedule,.redoReservation {display: block; margin-top: 20px;}

.inputUser {padding: 0 10px; font-size: 20px; text-align: center; display: block; vertical-align: middle; padding-top: 20px; word-wrap: break-word;}
.reserve {padding: 10px 10px 0; font-size: 18px; text-align: center; display: block; vertical-align: middle; margin-bottom: 10px;}
.reserveCancel {display: block; margin-top: 40px; margin: 40px 0 50px 0;}
#reserveCancel,#reserveFailure {display: block;}
#modal span.usernameId,.reserveNumber,.reserveCancelmessage {font-size: 22px; font-weight: 400; line-height: 1.5em; letter-spacing: 0.01em;}
#modal span.usernameIdNameHonorific {font-size: 14px; color: #4B4B4B;}
#modal span.reservePeople {font-size: 18px; color: #4B4B4B;}
#modal span.reserveCanceltext {font-size: 14px; display: inline-block; line-height: 2;}
#modal span#name_error,span#mailaddress_error,span#tel_error,span#id_error,span#furigana_error {font-size: 12px; color: #FF0000; padding: 0 5px; margin: 10px 0 0px; display: block; white-space: nowrap;}
#modal input#userName.inp_error,input#userEmail.inp_error,input#userPhone.inp_error,input#userId.inp_error #userFurigana.inp_error {border-color: rgb(255, 150, 150); background: #fff7f7;}
#modal span#eventIdinfo {line-height: 1.8; font-size: 1.3em;}

h3 span#eventIdinfo {line-height: 1.8; font-size: 1.2em;}
#reserveCancel .modal {padding: 60px 90px 160px;}
#modal .dateSpace { padding: 20px 16px 10px; font-size: 12px; text-align: center; display: block; vertical-align: middle; margin: 20px 0 20px; overflow: hidden;}
#modal span.reserveCanceltitle {font-size: 1.5em; letter-spacing: 0.01em; line-height: 1.6em; margin: 8px 0 4px; display: inline-block;}
#modal span.reserveCanceltext {font-size: 12px; display: inline-block; line-height: 2;}
#modal span.errorMessage {font-size: 1.2em; letter-spacing: 0.01em; line-height: 2em; margin: 8px 0 4px; display: inline-block;}
#modal button.send {
    width: 100%;
    background: none repeat scroll 0 0 #707070;
    border-radius: 2px;
    color: #FFFFFF;
    /* font-family: 'Open Sans',sans-serif; */
    font-size: 18px;
    text-decoration: none;
    padding: 20px 0 20px 0;
    line-height: 30px;
    box-shadow: none;
    display: block;
    text-align: center;
    border: 1px solid #CFCFCF;
}


  /* CTA modal内 */
.multiTitle h1 {margin-bottom: 20px; font-size: 18px; color: #6A6A6A; font-weight: normal;}
.multiTitle h2 {font-size: 15px; line-height: 1.8;}
#modal .title {text-align: left; font-size: 14px; margin-top: 30px; padding: 12px 0 12px 10px; background: #868686; color: #FFFFFF;}


#modal button.reservation,.calendar,.backtoEvent02,.backtoEvent04,.cancelReservationbtn,.cancelEnd,.reserveRedo,.cancel_reserveRedo {
width: 100%;
background: none repeat scroll 0 0 #FFFFFF;
color: #666;
font-size: 18px;
text-decoration: none;
padding: 20px 0 20px 0;
line-height: 30px;
box-shadow: none;
display: block;
text-align: center;
border: 1px solid #CFCFCF;
}

.application input[type=radio] {display: none;}
.application input[type=radio]:checked + .radio:before {opacity: 1; background-color: #FFFFFF; color: #fff; border: 1px solid #9B9B9B;}

a.tooltip:hover span{
     display: inline-block;;
     opacity: .9;
     position: absolute;
     background-color: #FFFFFF;
     border: 1px solid #cccccc;
     color: #000000;
     padding: 10px;
     top: 30px;
     right: -10px;
     width: 200px;     /* a.tooltip spanに指定すると、IE6以下でspanの領域でマウスが反応してしまう */
}

a.tooltip span {display: none;}

@media screen and (max-width: 960px){
  .timeChoose li {width: 100%;}
}

@media screen and (max-width: 768px){
  .timeChoose li {width: 100%;}
}
@media screen and (max-width: 767px){
.modal {display: block; vertical-align: middle; outline: none; overflow: hidden; max-width: 580px; padding: 90px 20px 140px; margin: 0 auto;}
a#closeModal {font-size: 32px; padding: 6px 20px; position: absolute; text-decoration: none; top: 0; right: 0; color: #ABABAB; letter-spacing: 0; font-weight: 100; font-style: normal;}

  .timeChoose li {width: 100%;}
  dl.accordion .timeChoose{padding: 15px 12px 20px;}
  dl.accordion .close .eventStatus,dl.accordion a.subscriptionForm {padding: 10px 36px;}

  #reserveCancel .modal {padding: 40px 20px 140px;}
  .timeReport .applicationBtn, .timeReport2 .applicationBtn,.timeReportCancel .cancellation,.timeReportClose .close {margin: 5px 0 10px; width: 100%;}
  a.subscriptionForm {width:100%;}
  .inputSelectArea {margin-top: 10px;}

  #modal .col {margin-top: 20px;}
  #modal span.reservePeople {font-size: 18px;}
  #modal input[type="text"] {border: 1px solid #CFCFCF; -webkit-appearance: none; outline: 0;}
  #modal input[type="tel"] {border: 1px solid #CFCFCF; -webkit-appearance: none; outline: 0;}
  #modal input[type="email"] {border: 1px solid #CFCFCF; -webkit-appearance: none; outline: 0;}
  #modal button.pull-right.closeModal.btn.lg.dull {border: none;}
  #modal .submit, .calendar {display: block; margin-top: 25px;}
  .application ul.timeChoose {width: 100%;}


  #CTAMenu {color: #fff; position: fixed; bottom: 0; left: 0; background: #555; z-index: 1000; width: 100%; padding: 10px;}
  .CTAMenuWrap {width: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-around; justify-content: space-around;}

#CTAMenu a {color: #fff;}
.CTA-subscription {text-align: right;}
.CTA-subscription a {border: 1px solid #ccc; border-radius: 20px; height: 40px; padding: 0 20px; line-height: 40px; display: inline-block; font-size: 14px; width: 40%;}
.CTA-shopStock span {background: url(http://www.muji.net/img/store/cmdty/icon_shopstock_w.png) no-repeat top center; display: block; background-size: 40px 40px; width: 50px; padding-top: 45px; font-size: 9px; text-align: center;}

  .CTAMenuWrap > div {
  -webkit-box-flex: 1.0;
  -ms-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-lines: multiple;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  }

  .CTAMenu2 {
  -webkit-box-pack: end;
  -ms-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: end;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-orient: vertical;
  height: 40px;
  }

  }