@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  text-decoration: none; }

/*--------------------------------------
  フォント設定
---------------------------------------*/
body {
  color: #222;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;
  font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; }

@media only screen and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; } }

a:link, a:visited {
  color: #2d75d2;
  text-decoration: none; }

a:hover, a:active {
  color: #488be3; }

/*--------------------------------------
  背景のグラデーション
---------------------------------------*/
body {
  background: #b9dade; }

body:before {
  content: "";
  z-index: 0;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* color */
  background: #b9dade;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjMlIiBzdG9wLWNvbG9yPSIjYjlkYWRlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjN2JhY2I1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTclIiBzdG9wLWNvbG9yPSIjNWE4OGJmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
  background: -moz-linear-gradient(-45deg, #b9dade 3%, #7bacb5 50%, #5a88bf 97%);
  background: -webkit-linear-gradient(-45deg, #b9dade 3%, #7bacb5 50%, #5a88bf 97%);
  background: -webkit-linear-gradient(315deg, #b9dade 3%, #7bacb5 50%, #5a88bf 97%);
  background: -o-linear-gradient(315deg, #b9dade 3%, #7bacb5 50%, #5a88bf 97%);
  background: linear-gradient(135deg, #b9dade 3%, #7bacb5 50%, #5a88bf 97%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9dade', endColorstr='#5a88bf',GradientType=1 ); }

/*--------------------------------------
  セクションのデザイン
---------------------------------------*/
.wrapper {
  z-index: 0;
  width: 100%;
  position: relative; }

.section_wrapper {
  position: relative;
  padding-top: 60px; }

/*--------------------------------------
  セクションの幅と余白
---------------------------------------*/
.section_content {
  z-index: 2;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: auto;
  max-width: 780px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  -webkit-box-shadow: 0 0 0 5px rgba(35, 70, 97, 0.25);
  box-shadow: 0 0 0 5px rgba(35, 70, 97, 0.25); }

/* 画面幅が800px以下の場合 */
@media screen and (max-width: 800px) {
  .section_content {
    max-width: none;
    margin: 0 10px; } }

/* 画面幅が360px以下の場合 */
@media screen and (max-width: 360px) {
  .section_content {
    padding: 10px; } }

/*--------------------------------------
  共通のパーツ
---------------------------------------*/
.section_heading {
  position: relative;
  margin: 0 0 40px 0;
  color: #333;
  font-size: 160%;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-indent: 0.05em;
  text-align: center;
  /* 下線 */
  /* 改行位置指定 */ }
  .section_heading::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #bcd2d8;
    border-radius: 2px;
    opacity: 0.5; }
  .section_heading span {
    display: inline-block; }

/* 画面幅が360px以下の場合 */
@media screen and (max-width: 360px) {
  .section_heading {
    margin: 10px 0 30px 0;
    font-size: 130%;
    font-weight: 800;
    letter-spacing: 0;
    text-indent: 0;
    /* 下線 */ }
    .section_heading::after {
      bottom: -10px; } }

/*--------------------------------------
  ナビゲーション
---------------------------------------*/
.navi_wrapper {
  z-index: 9;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 40px;
  background: #fff;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }

.navi {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  height: 64px;
  -webkit-overflow-scrolling: touch;
  /* スクロールバー非表示 */
  /* タブのブロック */
  /* タブ */ }
  .navi::-webkit-scrollbar {
    display: none; }
  .navi ul {
    display: table;
    table-layout: fixed;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    height: 40px;
    margin: 0 auto;
    padding: 0;
    list-style: none outside; }
  .navi li {
    position: relative;
    display: table-cell;
    height: 40px;
    margin: 0;
    padding: 0; }
    .navi li a {
      z-index: 10;
      position: relative;
      display: block;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;
      width: 100%;
      height: 40px;
      color: #222;
      font-size: 14px;
      font-weight: bold;
      line-height: 40px;
      text-align: center;
      text-decoration: none;
      white-space: nowrap; }
    .navi li a.disable {
      color: #ccc;
      pointer-events: none; }
    .navi li a:not(.disable).current:after {
      content: '';
      display: block;
      position: absolute;
      left: 5px;
      bottom: 3px;
      width: calc(100% - 10px);
      height: 3px;
      background: #b3d3dd;
      -webkit-transition: background-color 2s;
      -o-transition: background-color 2s;
      transition: background-color 2s;
      border-radius: 3px; }
    .navi li a:active {
      color: #666; }
    .navi li b {
      z-index: 9;
      position: absolute;
      left: 0;
      bottom: 2px;
      width: 100%;
      text-align: center;
      color: #f44c76;
      font-size: 8px;
      font-weight: 800;
      opacity: 1;
      -webkit-transition: opacity 0.33s 0;
      -o-transition: opacity 0.33s 0;
      transition: opacity 0.33s 0; }
    .navi li .current + b {
      opacity: 0; }

/* 画面幅が640px以下の場合 */
@media screen and (max-width: 640px) {
  .navi ul {
    width: 270px;
    /* ナビの項目数 × 90px */ }
  .navi li a {
    font-size: 12px; } }

/*--------------------------------------
  ヘッダー
---------------------------------------*/
header {
  z-index: 1;
  position: relative;
  width: auto;
  margin: 0 auto 30px auto;
  /* イベントロゴ */
  /* 出演者 */
  /* 開催日時・会場 */ }
  header img {
    display: block;
    width: 100%;
    height: auto; }
  header h1 {
    z-index: 2;
    position: relative;
    width: calc(100% - 80px);
    max-width: 480px;
    margin: 0 auto;
    padding: 0; }
  header h2 {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: -52px auto 20px auto;
    padding: 0; }
  header p {
    position: relative;
    width: calc(100% - 80px);
    max-width: 360px;
    margin: 0 auto;
    padding: 0; }
  header .soldout {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: calc(100% - 60px);
    max-width: 400px;
    margin-top: 12px;
    padding: 10px;
    background: rgba(2, 43, 77, 0.8);
    border-radius: 3px;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    text-align: center; }

.header_logo {
  padding: 60px 0 20px 0;
  background: rgba(255, 255, 255, 0.25); }

/* メイン画像 */
.header_photo {
  width: 100%;
  background: #c9c6c7;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0OSUiIHN0b3AtY29sb3I9IiNjOWM2YzciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmZWIxMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left, #c9c6c7 49%, #feb100 51%);
  background: -webkit-linear-gradient(left, #c9c6c7 49%, #feb100 51%);
  background: -webkit-gradient(linear, left top, right top, color-stop(49%, #c9c6c7), color-stop(51%, #feb100));
  background: -o-linear-gradient(left, #c9c6c7 49%, #feb100 51%);
  background: linear-gradient(to right, #c9c6c7 49%, #feb100 51%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c6c7', endColorstr='#feb100',GradientType=1 ); }
  .header_photo img {
    max-width: 1000px;
    margin: 0 auto; }

/* 画面幅が1200px以下の場合 */
@media screen and (max-width: 1000px) {
  header h2 {
    margin-top: -4.3%; } }

/* 画面幅が640px以下の場合 */
@media screen and (max-width: 640px) {
  header h2 {
    margin-top: -5.3%; }
  header .soldout {
    max-width: 320px;
    font-size: 16px; } }

/*--------------------------------------
  リード
---------------------------------------*/
.lead p {
  margin: 0 0 1.2em 0;
  font-size: 90%;
  line-height: 1.6;
  text-align: justify;
  text-justify: auto; }
  .lead p strong {
    font-weight: 800; }

.banner {
  width: 100%;
  margin-top: 20px; }
  .banner img {
    display: block;
    width: 100%;
    height: auto; }

.bookmark {
  margin-top: 20px;
  overflow: hidden;
  list-style: none outside;
  text-align: center; }

.bookmark li {
  display: inline-block;
  margin: 0 5px 5px 5px; }

.fb_iframe_widget > span {
  vertical-align: baseline !important; }

/*--------------------------------------
  公演情報 - 出演者
---------------------------------------*/
.lineup {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  margin-bottom: 20px; }
  .lineup .lineup_1,
  .lineup .lineup_2 {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0; }
  .lineup .lineup_1 {
    margin: 0 2px 0 0; }
  .lineup .lineup_2 {
    margin: 0 0 0 2px; }
  .lineup img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px; }
  .lineup a:hover img {
    opacity: 0.75; }
  .lineup p {
    width: 100%;
    height: auto;
    margin: 10px 0 0 0;
    font-size: 120%;
    line-height: 1.2;
    font-weight: 800;
    text-align: center; }

/* 画面幅が640px以下の場合 */
@media screen and (max-width: 640px) {
  .lineup {
    display: block; }
    .lineup .lineup_1,
    .lineup .lineup_2 {
      display: block;
      width: 100%;
      margin: 0 auto 20px auto; } }

/*--------------------------------------
  公演情報 - 詳細
---------------------------------------*/
.detail dl {
  display: table;
  width: 100%;
  margin: 0 auto 1px auto;
  table-layout: fixed;
  background: rgba(255, 255, 255, 0.75);
  border-collapse: collapse; }

.detail dl:first-child {
  border-radius: 3px 3px 0 0; }

.detail dl:last-child {
  margin-bottom: 0;
  border-radius: 0 0 3px 3px; }

.detail dt,
.detail dd {
  display: table-cell;
  padding: 15px 0;
  vertical-align: middle;
  font-size: 90%;
  line-height: 1.4; }

.detail dt {
  width: 30%;
  text-align: center; }

.detail dd {
  width: 70%; }

.detail a {
  font-weight: 800; }

.detail small {
  font-size: 80%; }

.detail span {
  display: inline-block; }

/* 画面幅が640px以下の場合 */
@media screen and (max-width: 640px) {
  .detail dl {
    display: block; }
  .detail dl:last-child {
    margin-bottom: 0; }
  .detail dt,
  .detail dd {
    width: auto;
    display: block;
    vertical-align: baseline; }
  .detail dt {
    padding: 10px 10px 5px 10px;
    text-align: left;
    font-size: 75%;
    font-weight: 800; }
  .detail dd {
    padding: 0 10px 10px 30px; } }

/*--------------------------------------
  チケット
---------------------------------------*/
.ticket {
  margin-bottom: 20px;
  padding-top: 20px;
  border-top: 1px dotted rgba(0, 0, 0, 0.2); }
  .ticket .ticket_heading {
    position: relative;
    margin-bottom: 0.75em;
    padding-left: 20px;
    color: #508c9e;
    font-size: 120%;
    line-height: 1.5;
    font-weight: 800; }
    .ticket .ticket_heading::before {
      content: '';
      display: block;
      position: absolute;
      left: 2px;
      top: 0.5em;
      width: 8px;
      height: 8px;
      background: #508c9e;
      border-radius: 10px; }
  .ticket p {
    margin: 0 0 0.5em 20px;
    font-size: 90%;
    line-height: 1.6; }
  .ticket span {
    display: inline-block; }
  .ticket .ticket_link {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    max-width: 360px;
    min-width: 240px;
    margin: 20px auto 0 auto;
    list-style: none outside; }
    .ticket .ticket_link li {
      display: block;
      padding: 0 5px; }
    .ticket .ticket_link a {
      display: block;
      overflow: hidden;
      padding: 14px 5px;
      background: #4388f7;
      -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      color: #fff;
      font-size: 100%;
      font-weight: 800;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis; }
    .ticket .ticket_link a:hover,
    .ticket .ticket_link a:active {
      opacity: 0.8; }
  .ticket .ticket_notice {
    font-size: 75%; }
  .ticket .soldout {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    margin: 20px 0 0 0;
    padding: 15px 5px;
    background: rgba(2, 43, 77, 0.8);
    border-radius: 3px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    text-align: center; }
  .ticket.size_min {
    text-align: center; }
    .ticket.size_min .ticket_heading {
      margin-bottom: 0.25em;
      padding-left: 0; }
      .ticket.size_min .ticket_heading::before {
        display: none; }

.section_heading + .ticket {
  padding-top: 1px;
  border-top: 0 none; }

.ticket_pref {
  margin: 20px 0;
  font-size: 90%;
  font-weight: 800;
  line-height: 1.5; }
  .ticket_pref.size_min {
    text-align: center; }

/*--------------------------------------
  フッター
---------------------------------------*/
.footer {
  z-index: 1;
  overflow: hidden;
  position: relative;
  margin-top: 60px;
  padding-top: 30px;
  background: #fff;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }

.credit {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto; }
  .credit li {
    display: block;
    margin-bottom: 30px; }

.credit_label {
  margin: 0 0 6px 0;
  color: #333;
  font-size: 75%;
  font-weight: 400;
  line-height: 1.5;
  text-align: center; }

.credit_link {
  margin: 0;
  color: #333;
  font-size: 90%;
  font-weight: 800;
  line-height: 1.5;
  text-align: center; }
  .credit_link a {
    color: #333; }
  .credit_link a:hover {
    opacity: 0.75; }

.credit_logo {
  margin: 0;
  font-size: 100%;
  line-height: 1;
  text-align: center; }
  .credit_logo a {
    display: inline-block;
    margin-right: 40px; }
  .credit_logo a:hover img {
    opacity: 0.75; }
  .credit_logo a:last-child {
    margin-right: 0; }
  .credit_logo img {
    display: block;
    width: auto;
    height: 40px; }

.logo_natalie {
  padding: 40px 0 15px 0; }
  .logo_natalie img {
    display: block;
    width: 200px;
    height: auto;
    margin: 0 auto; }
  .logo_natalie a:hover img {
    opacity: 0.75; }

.copyright {
  padding: 0 0 15px 0;
  font-size: 75%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.75);
  font-weight: 400;
  text-align: center; }

/* 画面幅が800px以下の場合 */
@media screen and (max-width: 640px) {
  .credit {
    width: 100%; }
    .credit li {
      margin-bottom: 20px; }
  .credit_logo a {
    margin-right: 20px; }
  .credit_logo img {
    height: 30px; }
  .logo_natalie {
    padding-top: 30px; }
    .logo_natalie img {
      width: 160px; } }

/*--------------------------------------
  スクリーンショット撮影用
  デザインチェック用のスクリーンショットを撮るときは以下のプロパティを有効にしてください
---------------------------------------*/
/*
.wrapper {
	background: #ff603d;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjMlIiBzdG9wLWNvbG9yPSIjZjc5YTJkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmY2MDNkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTclIiBzdG9wLWNvbG9yPSIjZWY0MTkzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(-45deg, rgba(247,154,45,1) 3%, rgba(255,96,61,1) 50%, rgba(239,65,147,1) 97%);
	background: -webkit-linear-gradient(-45deg, rgba(247,154,45,1) 3%,rgba(255,96,61,1) 50%,rgba(239,65,147,1) 97%);
	background: linear-gradient(135deg, rgba(247,154,45,1) 3%,rgba(255,96,61,1) 50%,rgba(239,65,147,1) 97%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79a2d', endColorstr='#ef4193',GradientType=1 );
}
.navi_wrapper {
	position: absolute;
}
*/