@charset "utf-8";
/* reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub,  tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td hr {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  }
body {
  font-family:"Hiragino Kaku Gothic W3", "Hiragino Kaku Gothic Pro","Helvetica Neue",Helvetica,Arial,"メイリオ",  Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
  padding-top: 150px;
  @media (max-width: 767px) {
    padding-top: 100px;
  }
  }
html {
  overflow-y:scroll;
  }
h1, h2, h3, h4, h5, h6 {
  clear: both;
  }
th {
  font-weight:normal;
  text-align:left;
  }
ol, ul {
  list-style: none;
  }
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
  }
img {
  vertical-align: bottom;
  }
a img {
  border: none;
  }
a {
  outline:none;
  text-decoration:none;
  color:#000;
  }
a:hover {
  color:#ec8eac;
  }
a,
a:link,
a:visited,
a:active,
a:hover { /* FireFox リンク選択時の点線を消す */
  overflow: hidden;
  outline: none;
}
/* effect : mouse on image */
a:hover img {
  opacity:0.9;
  filter: alpha(opacity=90);
  -ms-filter: "alpha( opacity=90 )";
}

/* CLEARFIX */
.cf:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  }
.cf {min-height: 1px;}
* html .cf {height: 1px;}

/*main code below*/

@black:#111;
@blue:#3498db;
@glay:#aaa;
@green:#1abc9c;


::selection {
    background:@green;
    }
::-moz-selection {
    background:@green;
}

.transition(@speed: 0.3s){
  -webkit-transition: all @speed;
  -moz-transition: all @speed;
  transition: all @speed;
}

h1,h2{
  margin: 0 0 21px 0!important;
}
.rokkitt,.changeFont{
  font-family: 'Playfair Display SC'!important;
  letter-spacing: 0.1em;
}
h1{
  letter-spacing: 0!important;
}
h2,.singleTitle{
  font-weight: bold!important;
  font-size: 1.6em!important;
  margin: 55px 0 21px 0!important;
}
.singleSub{
  font-size: 36px!important;
  letter-spacing: 0!important;
  font-weight: normal!important;
  margin-top: 0!important;
}
.mincho{
  font-family:'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro', 'GS明朝E','ＭＳ Ｐ明朝', serif!important;
}
.bold{
  font-weight: bold;
}
h1.first,h2.first{
  margin-top: 25px!important;
}
h2.title.center{
  text-align: center;
  margin-top: 0!important;
  margin-bottom: 34px!important;
  font-size: 2em!important;
  color:#fff;
}

.bx-wrapper{
  .bx-prev {
    display: block;
    text-indent: -9999px;
    background-image: url(../images/prev.png);
    width: 35px;
    height: 35px;
    position: absolute;
    top: 50%;
    left: 25px;
    margin-top: -17px;
  }
  .bx-next {
    display: block;
    text-indent: -9999px;
    background-image: url(../images/next.png);
    width: 35px;
    height: 35px;
    position: absolute;
    top: 50%;
    right: 25px;
    margin-top: -17px;
  }
  .bx-pager-item {
    display: none;
  }
}
.map_wrapper {
  margin: 20px auto;
  padding: 4px;
  border: 1px solid #CCC;
}

.googlemap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.googlemap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

#header{
  padding: 6px 0;
  border: none;
  border-radius: 0;
  background-color: @black;
  margin: 0;
  .navbar-nav{
    a{
      color: #fff;
      font-size: 12px!important;
      .transition;
    }
    a:hover{
      color: @glay;
    }
  }
  .navbar-toggle{
    border-color: @black!important;
  }
}

#visual{
/*   margin-top: 30px; */
  .slideArea{
    position: relative;
    .slide{
      video{
        width: 100%;
      }
      img{
        width: 100%;
      }
    }
    .captionArea{
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}

#content{
  margin: 0px 0;
  padding:0px 0;
}

#exh{
  h2{
    color:#fff;
    margin-bottom: 20px;
    width: 300px;
    margin: 0 ;
    @media (max-width: 767px) {
      width: 210px;
      margin: 34px 0 !important;
    }
    img{
      width: 100%;
    }
  }
  .flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    @media (max-width: 767px) {
      display: block;
    }
    .pic{
      width: 30%;
      margin: 0;
      @media (max-width: 767px) {
        width: 100%;
      }
      img{
        width: 100% !important;
        height: auto !important;
      }
    }
    .infobox{
      width: 60%;
      @media (max-width: 767px) {
        width: 100%;
      }
      h3{
        font-size: 18px;
      }
      h3,p{
        color:#fff;

      }
      p.more{
        text-decoration: underline;
        margin-top: 20px;
        text-align: right;
      }
    }
  }
}

.main{
  .pic{
    img{
      border: solid 1px #ccc;
      width: 100%;
      height: auto;
/*
      min-height: 170px;
      min-width: 170px;
*/
    }
  }
}
div.divider{
  border-top: solid 1px #ddd;
  margin: 50px 0;
}

body.home{
  padding-top: 100px;
  @media (max-width: 767px) {
    padding-top: 60px;
  }
  div.divider{
    margin-top: 0;
  }
}

.article{
  word-break: break-all;

  .wp_social_bookmarking_light .fb_iframe_widget_lift{
    width: 450px!important;
  }

  iframe {
    width: 100%!important;
    height: 450px;
  }


  img{
    border: solid 1px #ccc;
    max-width: 100%;
    height: auto;
  }
}
/*custum contact form validations*/
.wpcf7-response-output{
  padding: 13px!important;
  margin: 21px 0 !important;
}
.wpcf7-validation-errors{
  color: #8a6d3b!important;
  background-color: #fcf8e3!important;
  border: 1px solid #faebcc!important;
}
.wpcf7-mail-sent-ok{
  color: #3c763d!important;
  background-color: #dff0d8!important;
  border: 1px solid #d6e9c6!important;
}
.wpcf7-not-valid-tip{
  color: #a94442!important;
  background-color: #f2dede!important;
  border: 1px solid #ebccd1!important;
  padding: 8px!important;
  margin: 21px 0 !important;
}
.title.white{
  color:#fff;
}
.main.contact{
  .row{
    padding-bottom: 21px;
    .text{
      line-height: 38px;
    }
    .form{

    }
    .submit{
      text-align: center;
      input{
        width: 233px;
        height: 55px;
        color: white;
        border: none;
        background-color: @green;
        font-size: 1.3em;
        .transition;
      }
      input:hover{
        background-color: @glay;
      }
    }
  }
  input{
    padding: 8px;
    height: 38px;
  }
  textarea{
    resize: none;
  }
  input,textarea{
    border: solid 1px #ddd;
    width: 100%;
  }
  .telNumber{
    font-size: 1.6em;
  }
}
.main.artist,.main.curator{
  .name{
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
    padding: 8px 0;
  }
  .data{
    margin-bottom: 21px;
  }
}
.row{
  .data{
    margin-bottom: 34px;
    .pic{
      margin-bottom: 8px;
      position: relative;
      &:before {
          content: "";
          display: block;
          padding-top: 100%; /* 1:2 */

      }
      a{
        position: absolute;
        width: 100%;
        top:0;
        left:0;
      }
    }
    .date{
      margin-bottom: 3px;
      font-weight: bold;
    }
    .title{
      font-weight: bold;
      line-height: 20px;
      height: 60px;
      overflow: hidden;
      word-break : break-all;
      color:#000;
    }
  }
  &.search{
    h2{
      padding:0 15px;
    }
  }
}
#footer{
  margin-top: 40px;
  @footerSpace: 21px;
  background-color: @black;
  color: #fff;
  padding: @footerSpace 0;
  .container{
  }
  .top{

  }
  .bottom{
    @footerBottomColor: #666;
    border-top: solid 1px @footerBottomColor;
    margin-top: @footerSpace;
    padding: @footerSpace 0;
  }
  .copyright{
    color: #666;
  }
  .social{
    div{
      float: right;
    }
  }
}

/* more than 768px */
@media (min-width: 768px) {
  html,.container{
    min-width: 970px;
  }
  #content .main{
    min-height: 520px!important;
  }
  @pcLogoHeight:40px;
  #header{
    .logo{
      height: @pcLogoHeight;
    }
    .navbar-nav{
      a{
        line-height: 40px;
      }
    }
  }
  #footer{
    .logo{
      height: @pcLogoHeight;
    }
    .copyright{
      line-height: @pcLogoHeight;
      text-align: right;
    }
  }
}
/* less than 767px  */
@media (max-width: 767px) {
  .navbar-default .navbar-collapse{
    border-color: #282828!important;
  }
  .navbar-default .navbar-collapse{
    border: none;
  }
  body{
    padding-top: 61px;
  }
  body.home{
    .main{
      .col-xs-6{
        height: 270px;
      }
    }

    h2{
      font-size: 1.8em!important;
    }

    div.divider{
      margin: 20px 0;
    }

  }
  #header{
    .logo{
      height: 27px
    }
  }
  .bx-wrapper{
    .bx-prev {
      display: none;
    }
    .bx-next {
      display: none;
    }
  }
  .copyright{
    text-align: center;
    span{
      display: none;
    }
  }
}

body.test{
  width: 640px;
  margin: 0 auto;
  background-color: black;
  header{
    padding: 10px;
    background-color: #fff;
    .top{
      .main_logo{
        float: left;
      }
      .sub_logo{
        float: left;
        margin-top: 34px;
      }
      .menu{
        float: right;
        padding-top: 9px;
        .button{
          float: left;
          margin-left: 20px;
        }
        .login{
        }
        .register{
        }
        .cart{
        }
      }
    }
    .bottom{
      padding: 15px 0;
      .button{
        float: left;
      }
      .program_search{
        margin-right: 4px;
      }
      .detail_search{

      }
    }
  }

  .content{

    @textBlue: #0073bf;

    background-color: #fff;

    .option{
      margin-bottom: 5px;
      .icon{
        width: 40px;
        height: 40px;
        float: left;
        margin-right: 5px;
        background-repeat: no-repeat;
      }
      .icon.restock{
        background-image: url('../images/top/tag_restock.png');
      }
      .icon.new{
        background-image: url('../images/top/tag_new.png');
      }
      .icon.external{
        background-image: url('../images/top/tag_external.png');
      }
      .icon.privilege{
        background-image: url('../images/top/tag_tokuten.png');
      }
      .icon.booking{
        background-image: url('../images/top/tag_yoyaku.png');
      }
    }

    .box{
      .title_logo{
        padding-top: 20px;
        background-color: #fff;
      }
      .more{
        padding: 20px 0;
      }
      .item_list{
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .column{
        padding: 0 20px;
      }
      .row.item{
        margin-bottom: 10px;
        .item_data{
          width: 273px;
          padding: 10px;
          background-color: #fff;
          float: left;
          border: solid 1px #ccc;
          border-radius: 10px;
          .option{
            min-height: 40px;
          }
          .name{
            font-weight: bold;
          }
          .picture{
            height: 276px;
            text-align: center;
            padding: 10px 0;
          }
          .price{
            text-align: right;
            color: @textBlue;
          }
        }
        .item_data:first-child{
        margin-right: 10px;
        }
      }
    }
    .box.nanana_goods{
      background-color: #ffe493;
    }

    .box.new_arrival{
      background-color: #ffd4d4;
    }

    .inner{
      padding: 0 20px;
    }
    .more{
      text-align: center;
    }
    nav{
      ul{
        li{
          padding: 32px 0 32px 75px;
          background-color: #fff;
          background-repeat: no-repeat;
          font-size: 24px;
          border-top: solid 1px #ccc;
        }
      }
    }
    .search{
      padding: 10px 0px;
      background-color: #d9d9d9;
      position: relative;
      .text{
        input{
          width: 520px;
          background-repeat: no-repeat;
          background-image: url('../images/top/icon_search.png');
          background-position: left center;
          background-position-x: 2%;
          border: solid 1px #adadad;
          border-radius: 40px;
          padding: 10px 10px 10px 70px;
          height: 35px;
          line-height: 35px;
          font-size: 18px;
        }
      }
      .submit{
        position: absolute;
        right: 25px;
        top: 16px;
/*
        input{
          background-color: #fff;
          background-repeat: no-repeat;
          background-image: url('../images/top/btn_search.png');
          text-indent: -9999px;
          border: 0;
          width: 96px;
          height: 56px;
*/
        input{
          background-color: #9f9f9f;
          border: solid 1px #909090;
          border-radius: 40px;
          color: #fff;
          font-size: 18px;
          padding: 8px 20px;
        }
      }
    }
    .news{
      border-radius: 0px 10px;
      border: solid 1px #f887a3;
      overflow: hidden;
      margin: 15px;
      .head{
        padding: 5px;
        background-color: #fa91a9;
        .logo{
          float: left;
        }
        .close{
          float: right;
        }
      }
      .headline{
        li{
          padding: 8px 15px;
          border-top: dotted 1px #ccc;
          a{
            color: @textBlue;
          }
          .date{
            margin-right: 20px;
          }
        }
        li.first{
          border-top: none;
        }
      }
    }
    .program{
      @blue: #0069bc;
      .title_logo{
      }
      nav{
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: @blue;
        ul{
          border: solid 1px @blue;
          border-radius: 10px;
          overflow: hidden;
          li{
            border-bottom: solid 1px @blue;
            background-image: url('../images/top/bg_prgrm_nav.png');
          }
        }
      }
    }
    .ad{
      padding-top: 20px;
      text-align: center;
      .to_top{
        padding: 20px 0;
        text-align: right;
        a{
          color: @textBlue;
        }
      }
    }
    .ranking{

      .rank{
        background-repeat: no-repeat;
        background-position: left top;
        background-position-x: 3%;
        padding-top: 50px;
        padding-left: 30px;
        border-bottom: dotted 1px #ccc;
        margin-bottom: 20px;
        padding-bottom: 20px;

        .item_picture{
          float: left;
          width: 184px;
          img{
            max-width: 100%;
          }
        }
        .item_data{
          @itemDataBaseWidth: 386px;
          @itemDataMargin: 20px;
          float: right;
          width: @itemDataBaseWidth - @itemDataMargin;
          padding-left: @itemDataMargin;
          .name{
            font-weight: bold;
            font-size: 1.6em;
          }
          .price{
            text-align: right;
            color: @textBlue;
            font-size: 1.3em;
          }
        }
      }
      .rank.first{
        margin-top: 20px;
        background-image: url('../images/top/tag_rank_1.png');
      }
      .rank.second{
        background-image: url('../images/top/tag_rank_2.png');
      }
      .rank.third{
        background-image: url('../images/top/tag_rank_3.png');
        border-bottom: none;
      }
    }
    .guide{
      .title{
        padding-top: 5px;
        padding-bottom: 5px;
        border-top: solid 1px #ff8500;
        background-color: #fed555;
        font-weight: bold;
      }
      nav{
        ul{
          li{
            padding: 12px 0 12px 40px;
            background-image: url('../images/top/icon_triangle.png');
            background-position: left center;
            background-position-x: 23px;
          }
          li.first{
            border-top: none;
          }
        }
      }
    }
  }
  footer{
    background-color: #003359;
    .copyright{
      color: #fffefc;
      text-align: center;
      font-size: 15px;
      padding: 5px 0;
    }
  }
}
/*add 20200422 sugie*/
.pc{
  display: block;
  @media (max-width: 768px) {
    display: none;
  }
}
.sp{
  display: none;
  @media (max-width: 768px) {
    display: block;
  }
}
.search_form{
  background: #fff;
  border-radius: 15px;
  border:1px solid #fff;
  overflow: hidden;
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 15px;
  background: #000;

  input[type="text"] {
  	padding: 2px 10px;
    box-sizing: border-box;
  	border: none;
  	border-radius: 0;
  	outline: none;
  	background: none;
    letter-spacing: .1em;
    font-size: 12px;
    vertical-align: middle;
    background: #000;
    color:#fff;
  }
  button[type="submit"]{
    height: 100%;
    padding: 5px 10px;
    border:none;
    color:#fff;
    letter-spacing: .1em;
    font-size: 12px;
    vertical-align: middle;
    background: #3E3E3F;
    &:hover{
      opacity: 0.8;
    }
  }
}
@media (min-width: 768px) {
  .navbar-right{
    text-align: right;
    .navbar-nav{
      float: none;
    }
  }

  #header{
    .navbar-brand{
      padding: 25px 15px;

    }
    .navbar-nav>li>a{
      padding-top: 10px;
      line-height: 24px;
    }
  }
}
@media (max-width: 768px) {
  #header{
    .navbar-brand{
  padding:11px 15px;
}
}
  .spsearch_form{
    float: right;
    margin-top: 13px;
    width: 51%;
    margin-right: 5px;

  }
  .search_form{
    margin-bottom: 0;
    margin-right: 0;
    font-size: 0;

    input[type="text"] {
      width: 68%;
      letter-spacing: 0;
      font-size: 16px;
      transform: scale(0.65);
      letter-spacing: .07em;
      padding: 0;

    }
    button[type="submit"] {
      width: 32%;
      font-size: 10px;
      padding:4px 0px;
      line-height: 16px;

    }
  }

}

.page-id-3052{
  .fair{
    .row{
      display: flex;
      flex-wrap: wrap;
    }
    .col-xs-6{
      float:none;
    }
  }

}