/* ************************************************ 
   *  all
   * ************************************************ */
  body {
  color: #000;
  background-color:#000;
  font-family:"メイリオ","Meiryo","MS PGothic","Osaka",Arial,sans-serif;
  font-size: 14px;
  line-height:20px;
    background: url(../images/background.jpg) right top no-repeat fixed #000000;
    background-size: cover;
    /* 0125 追加 */
    min-width: 1060px;
    /* 0125 追加 */
  }
html {overflow-y:scroll; height:100%;}

a {outline: none;color: #ffffff;text-decoration: none; }
a:visited { text-decoration: none;}
a:hover { color: #aeaeae; text-decoration: none;}
a:hover img {opacity: 0.7;filter: alpha(opacity=70);-ms-filter: "alpha(opacity=70)";outline:none; }


/* ************************************************ 
 *  layout
 * ************************************************ */
#container { width: 100%;  text-align: left;}
  /*メイン 0125調整*/
#main { /*margin-left: 25%;*/ padding-top:90px; padding-bottom:70px; float: right; width: 75%;}
@media screen and (max-width: 1220px) {
#main { width: calc(100% - 300px)}
}
@media screen and (max-width: 1500px) {
#main { padding-top:80px;}
}
/* ************************************************ 
 *  header_right
 * ************************************************ */
/*ヘッダー*/
.header_right { width: 100%; height: 60px; position: fixed; top: 0; background-color: #000000; z-index: 20;background-color: rgba(0,0,0,0.85);}
.header_right nav ul { margin-left: 80px;}
  .header_right nav ul li { display: inline-block; }
    .header_right nav a { display:block; padding: 0 22px; height:59px; line-height:60px; font-size:16px;}
      .header_right nav a:hover {  border-bottom: 1px solid #e7482c; color:#ddd;}
      .header_right nav a.active{  border-bottom: 1px solid #e7482c; color:#fff;}

.header_right .search { position:fixed; right:160px; top:0;}

.search { width: 20%; margin:6px auto 0; }
.search form, .search input { margin: 0; /* マージンをリセット */}
.search form { display:table; width:100%; }
.search label {  display:table-cell; width: 100%; min-width: 120px; font-size: 1.2em; color: #fff; }
.search label input{ width: 96%; padding-right:4%; height:40px; background: #000; border: 0; border-bottom: 1px solid #fff; box-sizing: content-box; color:#fff; text-align:center; font-weight:normal;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -o-box-sizing: content-box;
  -ms-box-sizing: content-box; }
.searchsubmit {display:table-cell; padding: 0; width: 40px; height: 40px; cursor: pointer; background-color: #000000; border: solid 2px #ffffff;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  -o-border-radius: 40px;
  -ms-border-radius: 40px;
  border-radius: 40px;
  box-shadow: 0 0 0 1px #696969;
  -webkit-box-shadow: 0 0 0 1px #696969;
  -moz-box-shadow: 0 0 0 1px #696969;
  -o-box-shadow: 0 0 0 1px #696969;
  -ms-box-shadow: 0 0 0 1px #696969;
  color: #ffffff;
  font-family: FontAwesome;
}
input[type="search"]:focus {
  outline: none;
}
input[type="submit"]:hover {
  opacity: 0.8;
  outline: none;
}


.header_right .mypage_link{ position:fixed; right:0; top:0; font-size: 0.9em; font-weight: bold; background-color:#e7582c; }
.header_right .mypage_link a { color: #fff; display:block; padding: 0 25px 0 15px; height:60px; line-height:60px; font-size:14px; font-weight:normal;}
.header_right .mypage_link i {font-size: 1.3em;line-height: 100%; padding-right: 10px; color:#fff;} 
.header_right .mypage_link a:hover{ background-color:#ff6633;}
.header_right .mypage_link a:hover i{ color:#fff;}


@media screen and (max-width: 1500px) {
.header_right{ height:50px;}
.header_right nav ul { margin-left: 3%;}
.header_right nav a{ height:49px; line-height:50px;padding: 0 14px; font-size:14px;}
.header_right .mypage_link a { height:50px; line-height:50px; font-size:12px;}
.header_right .search {  right:140px; }
.search label input{ height:32px;}
.searchsubmit{width: 32px; height: 32px; }
}

/* ************************************************ 
 *  header_left
 * ************************************************ */
  /*サイド*/
  .side_bg{ background-color:#fff; position:fixed; left:0; top:0; width:25%; min-width:300px; height:100vh; z-index: -1;
    box-shadow:rgba(84, 0, 0, 0.458824) 0px 0px 6px 3px;
    -webkit-box-shadow:rgba(84, 0, 0, 0.458824) 0px 0px 6px 3px;
    -moz-box-shadow:rgba(84, 0, 0, 0.458824) 0px 0px 6px 3px;}
  #side {
    width: 25%;
    z-index: 10;
    background-color: #ffffff;
    text-align: center;
    float: left;
    min-height: calc(100vh - 50px);
  }
@media screen and (max-width: 1220px) {
    #side { width: 300px;}
}

  #side h1 { margin: 4.5vh 5% 5.5vh 5%; background-color:#FFF; text-align: center;}
  #side h1 img { width: 38%;}
  #side p.serch{}
  .header_left {
    height: 30px;
    z-index: 11;
    background: #ffffff;
  }
  

  .left-news { width: 86%; margin: 0 auto; text-align: left;}
  .left-news p { font-size: 14px; font-weight: bold; padding: 7px 0; border-bottom: 1px solid #ccc; margin-bottom:10px;}
  .left-news dl { width: 100%; font-size:12px; line-height:1.5em; border-bottom:1px dotted #ccc; padding-bottom:5px; margin-bottom:5px; display:table;}
  .left-news dl:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}  
  .left-news dt { width:6%; font-weight: bold; display:table-cell;}
  .left-news dd { width: 93%; margin-bottom: 1%; padding-left: 1%; display:table-cell;} 
  .left-news dd p {font-weight:inherit; padding:0; border-bottom:none!important; margin-bottom:0; font-size:12px; word-break : break-all;}
  .left-news-more { font-size: 14px; text-align: right; width: 100%;}
  .left-news-more a { color: #242424;}

  .left-link-aboutsma { margin: 20px 0;}
  .left-link-aboutsma a { 
    text-decoration: none;
    text-align: center;
    position: relative;
    z-index: 10;
    display: block;
    width: 86%;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
  }
  .left-link-aboutsma a::before { 
    content: '';
    background-color: #e7582c;
    display: block;
    position: absolute;
    width: 100%;
    height: 60px;
    line-height: 60px;
    z-index: -1;
    border-radius: 6px;
    box-shadow:
        0 0 0 0 #fff,
        0 0 0 0 #e7582c;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;}
  .left-link-aboutsma a:hover { color: #fff;}
  .left-link-aboutsma a:hover::before { 
    transform: scale(1);
    -webkit-transform: scale(1);
    box-shadow:
        0 0 0 5px #fff,
        0 0 0 7px #e7582c;}

  .left-list{width: 86%; margin: 0 auto; text-align: left;}
  .left-list p{font-size: 16px; font-weight: bold; margin-top: 10px; padding: 9px 0; border-bottom: 1px solid #ccc;}
  .left-list p span { padding-left: 12px;}
  .left-list dl { width: 100%; display:table;margin-bottom: 1%;}
  .left-list dt { width: 15%; display:table-cell; vertical-align:top; line-height:0;}
  .left-list dt img { border: 1px solid #ccc; width:100%;}
  .left-list dd { font-weight: bold; width: 85%; display:table-cell; vertical-align:top; padding-left:5%; line-height:1.2em;}
  .left-list a { color: #242424;}
  .left-news-more a:hover,
  .left-list a:hover { color: #aeaeae;}

  .left-cookie p {  border-top: 2px solid #e7582c;}
  .left-recommend p {  border-top: 2px solid #2a999a; }

  @media screen and (max-width: 1546px) {
    .left-news,
    .left-cookie,
    .left-recommend { width: 92%;}
    .left-news dd { width: 92%; padding-left: 2%;}
    .left-cookie dd,
    .left-recommend dd { float: left; width: 76%; padding-left: 4%;}
  }

/* ************************************************ 
 *  footer
 * ************************************************ */

/*フッター（コピーライト）*/
#footer_side { width: 25%; position: relative; bottom: 0; text-align: left; z-index: 10; background-color:#fff; clear: both;}
@media screen and (max-width: 1220px) {
  #footer_side { width: 300px;}
}
#button {  position: absolute; top: 0; left: 15px; width: 60px; height: 60px; outline: none; border: none; background: none; background-color: none; color: #696969; font-size: 2em; cursor: pointer;}
.container{ margin: 0 auto; width: 750px;}

.left2 ul { float:right; padding-right:20px;}

.left2 ul li { display: inline-block; font-size: 0.9em; font-weight: bold;}
.left2 a { color: #e7582c; display:block; padding: 0 7px; height:60px; line-height:60px; font-size:14px;}
.left2 ul li i {font-size: 1.5em;line-height: 100%; padding-right: 10px; color:#333;} 
.left2 a:hover{ color:#e87f6c;}
.left2 a:hover i{ color:#666;}

@media screen and (max-width: 1500px) {
.header_left { height: 20px;}
.left2 ul { padding-right:15px;}
.left2 a { font-size:12px; line-height:50px; height:50px;}
.left2 ul li i{ padding-right:7px;}
}


.sidemenu{}
.sidemenu ul { padding: 12px 5%;}
.sidemenu ul li {}
.sidemenu ul li a {color: #333; display:block; font-size: 14px; line-height:1em; padding-bottom:15px;}
.sidemenu ul li a i{ font-size:10px; padding-right:2.5%;}
.sidemenu ul li a:hover { color: #eee;}

/* right foot menu */
.section_footer{}
.section_footer .footmenu ul { padding: 20px 4% 12px 4%;}
.section_footer .footmenu li { float:left; margin-right:1.5%;}
.section_footer .footmenu li a { font-size: 14px; line-height:1em; display:block;}
.section_footer .footmenu li a i{ font-size:10px; margin-right:0.5em;}
.section_footer .footmenu li a:hover { color: #aeaeae;}

@media screen and (max-width: 1500px) {
#side h1 { margin: 4vh 5% 3.5vh 5%;}
.sidemenu ul { padding: 8px 5%;}
.sidemenu ul li a { font-size:12px; padding-bottom:10px; line-height:1em;}
.sidemenu ul li a i{ }

.section_footer .footmenu li a{ font-size:12px;  line-height:1em;}
}


.cmark { font-size: .8em; margin:0 auto; text-align: center; height:60px; line-height:60px;}

.signup {
  text-align: center;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
}

.signup a{  
  display:block;
  font-size: 1.5em;
  font-weight: normal;
  cursor: pointer;
  padding: 24px 0;
  background-color: #000000;
  border: 1px solid #000000;
    -webkit-border-radius: 9px;
       -moz-border-radius: 9px;
        -ms-border-radius: 9px;
         -o-border-radius: 9px;
            border-radius: 9px;
    -webkit-box-shadow: 0 0 0 2px #FFFFFF inset;
       -moz-box-shadow: 0 0 0 2px #FFFFFF inset;
        -ms-box-shadow: 0 0 0 2px #FFFFFF inset;
         -o-box-shadow: 0 0 0 2px #FFFFFF inset;
            box-shadow: 0 0 0 2px #FFFFFF inset;
}
.signup a:hover{ color:#fff; background-color:#e7482c;border: 1px solid #e7482c;}

#footer_icon {float: right;margin-right: 5%;}
#footer_icon i {line-height: 40%;font-size: 2em;padding: 0 3px;}
#footer_icon a { color: #696969;}
#footer_hr { display: block; border: 0;  width: 100%; height: 60px; opacity: 0.1; background: url("../images/side_footer_hr.png") no-repeat top center; position:absolute; bottom:0; left:0; margin:0;}

#sidemenu h4 {font-size: 0.8em;}

@media screen and (max-width: 1500px) {
.signup{ margin-bottom:15px;}
.signup a { padding: 14px 0;font-size: 1.4em;}

.cmark {font-size: .7em; height:50px; line-height:50px;}
#footer_icon i {font-size: 1em;}
#footer_hr { height:50px;}
}


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


/* ************************************************ 
 *  公演リスト pattern1
 * ************************************************ */
/* 0125 変更 */
.schedule_table { border-spacing: 0 6px; margin: 0 auto; width: 100%;}
.schedule_table .table_title { background: #000; height: 40px; width: 100%;}
.schedule_table .table_title th { color: #fff; font-size:12px; padding: 0 12px; text-align: center; vertical-align: middle;}
.schedule_table .tr-box td { background: #fff; box-sizing: border-box; font-size: 14px; line-height: 1.5em; text-align: center; vertical-align: middle;}

.schedule_table .tr-box td div { max-height: 3em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;/*chrome safari only*/}

/*公演一覧 幅設定 */
.schedule_table .tr-box td.tw01{ background: #000; color: #fff; font-size: 1.5em; width:9%; min-width: 70px;}
.schedule_table .tr-box td.tw02{ width:34%; min-width: 185px; text-align:left; font-weight:bolder; padding: 1vw 0 1vw 2%;}
.schedule_table .tr-box td.tw03{ width:30%; min-width: 185px; text-align:left; padding: 0 1em;}
.schedule_table .tr-box td.tw04{ width:15%; min-width: 100px; /*padding: 2%;*/}

/* 160115 変更 */
.schedule_table .tr-box td.tw05{ width:12%; min-width:70px; background-color: transparent; padding: 0;background-color: #e7582c; position: relative;
border-radius: 0px 6px 6px 0px;
-moz-border-radius: 0px 6px 6px 0px;
-webkit-border-radius: 0px 6px 6px 0px;}
/* 160115 変更 */

.schedule_table .tr-box td.tw05 a { position: relative;}

/* 160115 追加 */
.schedule_table .tr-box td.tw05 a::after { content: ""; position: absolute; width: 0; border: 6px solid transparent; border-left-color: #fff; top: 50%; right: 0.5vw; margin-top: -6px;}
@media screen and (max-width: 1500px) { 
  .schedule_table .tr-box td.tw05 a::after { border: 5px solid transparent; border-left-color: #fff; right: 0.5vw; margin-top: -5px;}
}
@media screen and (max-width: 1200px) { 
  .schedule_table .tr-box td.tw05 a::after { border: 4px solid transparent; border-left-color: #fff; right: 0.3vw; margin-top: -4px;}
}
/* 160115 追加 */

/*公演一覧 装飾 */
.schedule_table .tr-box td a.artist_link{ font-weight:bolder; color:#333;}
.schedule_table .tr-box td a.artist_link:hover{ color:#888;}
.schedule_table .tr-box .day {font-size: .8em; }
.schedule_table .tr-box .buy { color: #fff; display: block; min-height:45px; line-height:45px;widows:100%;font-size:16px; font-weight:bolder;}
.schedule_table .tr-box td.tw05:hover{ background-color:#f76c41;}

.schedule_table .tr-box td.tw05.outofperiod{ background-color:#4973c9;}
.schedule_table .tr-box td.tw05.outofperiod .buy{ font-size:0.9em;}
@media screen and (max-width: 1110px) {
  .schedule_table .tr-box td.tw05.outofperiod .buy{ font-size:0.5em !important;}
}

.schedule_table .tr-box td.tw05.soldout{ background-color:#888;}
.schedule_table .tr-box td.tw05.soldout .buy{ font-size:0.9em;}

@media screen and (max-width: 1500px) {
.schedule_table .table_title th { font-size:11px;}
.schedule_table .tr-box td { font-size: 12px; line-height: 1.5em;}
.schedule_table .tr-box td:first-child { font-size: 1em;}
.schedule_table .tr-box .buy { font-size:14px;}
}
/* 0125 変更 */

/* ************************************************ 
 *  fa-circle,times,triangle
 * ************************************************ */
.fa-circle-o {color: #e7582c;}
.fa-times {color: #2ce7b6;}
.fa-exclamation-triangle { color: #2cbbe7;}


/* ************************************************ 
 *  h
 * ************************************************ */
h2.leftline{ border-left:3px solid #e7482c; font-size:24px; padding:0.3em 0.5em; line-height:1em; margin-bottom:0.7em;}

/* ************************************************ 
 *  pagination
 * ************************************************ */
ul.pageNav {text-align: center; padding-top:15px;}
ul.pageNav li {display: inline;margin: 0 1px;padding: 0;  }
ul.pageNav li span,
ul.pageNav li a {display: inline-block;padding: 5px 13px;background: #fff;border: 1px solid #ccc;vertical-align: middle;text-decoration: none; color:#666;}
ul.pageNav li span{ background:#333; color:#fff;}
ul.pageNav li a:hover {background: #efefef;}


/* ************************************************ 
 *  slick
 * ************************************************ */
@font-face { font-family: "slick"; src: url("../fonts/slick.eot"); src: url("../fonts/slick.eot?#iefix") format("embedded-opentype"), url("../fonts/slick.woff") format("woff"), url("../fonts/slick.ttf") format("truetype"), url("../fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; }  

/* Arrows */
.slick-prev, .slick-next { position: absolute; display: block; height: 50px; width: 50px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -25px; padding: 0; border: none; outline: none; z-index:10;}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }

.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 50px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-prev { left: -25px; }
.slick-prev:before { content: "\2190"; }

.slick-next { right: -25px; }
.slick-next:before { content: "\2192"; }

/* Dots */

.slick-dots { position: relative;  list-style: none; display: block; text-align: center; padding: 0.5vw 0 0.2vw 0; width: 100%;}
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "\2022"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: #fff; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { color: #000; opacity: 0.75; }
@media screen and (max-width: 1500px) {
.slick-dots { padding: 0.5vw 0 0 0; }
}


/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}