@charset "UTF-8";
/* ---------- ベース ---------- */
.drawer_button:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
}

.drawer_button:-webkit-any-link:focus-visible {
  outline-offset: 1px;
}

.drawer_text {
  text-transform: uppercase;
}

html {
  font-family: sans-serif;
}

body {
  color: #333333; /* 文字色は黒だとコントラストが強すぎるので、$defaultの濃いグレーがよく使われる */
  background-color: #fff79a;
  -webkit-text-size-adjust: 100%;
}
@media not all and (min-width: 960px) {
  body {
    width: 100vw;
  }
}

.color-red,
.color-red:link {
  color: #f00000;
}

.wrapper {
  min-height: 100vh;
  padding-bottom: 142px;
  position: relative;
  box-sizing: border-box;
  background-color: #dfdfdf;
  overflow: hidden;
}
@media not all and (min-width: 960px) {
  .wrapper {
    width: 100vw;
    padding-bottom: 141px;
  }
}
@media not all and (min-width: 600px) {
  .wrapper {
    padding-bottom: 113px;
  }
}
@media not all and (min-width: 500px) {
  .wrapper {
    padding-bottom: 175px;
  }
}

.header_color {
  background-color: #fff79a;
  overflow: hidden;
}

/* リンクの文字色。あとでちゃんと考えること */
a {
  color: #333333;
  text-decoration: none;
}

a:link {
  color: #333333;
}

a:visited {
  color: #7f7f7f;
}

a:hover {
  color: #e2694a;
  font-weight: inherit;
  text-decoration: none;
}

a:active {
  color: #f0b4a4;
}

a img {
  transition: opacity 0.2s linear;
}

a:hover img {
  opacity: 0.5;
}

a:active img {
  opacity: 0.8;
}

p {
  line-height: 1.6;
}

/* ---------- ベースおわり ---------- */
/* ---------- ヘッダー ---------- */
header {
  width: 960px;
  height: 80px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
}
@media not all and (min-width: 960px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 80px;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    clear: both;
    background-color: #fff79a;
  }
}
@media not all and (min-width: 600px) {
  header {
    height: 70px;
  }
}

/* ----- img要素は直接指定しないと幅、高さをいじれない ----- */
@media not all and (min-width: 960px) {
  .global_navi {
    display: none;
  }
}

header h1 {
  display: inline-block;
  height: 80px;
  position: relative;
}
@media not all and (min-width: 960px) {
  header h1 {
    width: 100vw;
    height: 64px;
    margin: 8px auto;
    margin-left: 6vw;
  }
}
@media not all and (min-width: 600px) {
  header h1 {
    height: 54px;
    text-align: center;
  }
}

header h1 img {
  height: 80px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media not all and (min-width: 960px) {
  header h1 img {
    margin: 0 auto;
    height: 64px;
    position: static;
    transform: none;
  }
}
@media not all and (min-width: 600px) {
  header h1 img {
    height: 54px;
  }
}

.global_navi ul {
  display: flex;
  justify-content: flex-end;
  height: 80px;
  position: relative;
}

.global_navi li {
  display: inline-block;
  line-height: 80px;
  margin: 0.1em 0.7em 0 0.7em;
  /*  margin: 0 1.1em; */
  font-size: 20px;
  font-weight: bold;
  font-family: "M PLUS Rounded 1c", sans-serif;
}

.global_navi li:last-child {
  margin-right: 0.5em;
}

.global_navi ul li.current a {
  text-decoration: underline;
}

@media (min-width: 960px) {
  .drawer_menu {
    display: none;
  }
}
/* ---------- ヘッダーおわり ---------- */
/* ----------トップ画---------- */
@media (min-width: 1330px) {
  .top_visual {
    padding-bottom: 25px;
  }
}
@media not all and (min-width: 960px) {
  .top_visual {
    margin-top: 80px;
  }
}
@media not all and (min-width: 600px) {
  .top_visual {
    margin-top: 70px;
  }
}

.top_visual img { /*画像の下にできる謎の余白を消すためにblock要素にした上で、中央揃え*/
  display: block;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 1280px) {
  .top_visual img {
    width: 1280px;
  }
}

/* ---------- トップ画おわり ---------- */
/* ---------- メインコンテンツの親要素 ---------- */
.main {
  width: 960px;
  margin: 0 auto;
  overflow: hidden; /* 親要素がfloatで高さを失わぬように適用 */
}
@media not all and (min-width: 960px) {
  .main {
    width: 95vw;
  }
}

/* ----- タイトル左右に横線 ----- */
.title-border {
  display: flex;
  align-items: center;
  padding: 0 0px;
}

.title-border:before,
.title-border:after {
  border-top: 1px solid #999999;
  content: "";
  flex-grow: 1;
}

.title-border:before {
  margin-right: 3em;
}
@media not all and (min-width: 960px) {
  .title-border:before {
    margin-right: 2em;
  }
}
@media not all and (min-width: 600px) {
  .title-border:before {
    margin-right: 5%;
  }
}

.title-border:after {
  margin-left: 3em;
}
@media not all and (min-width: 960px) {
  .title-border:after {
    margin-left: 2em;
  }
}
@media not all and (min-width: 600px) {
  .title-border:after {
    margin-left: 5%;
  }
}

/*  ::beforeと ::afterのmarginの数値は同じにすること。ただし、文字によって中央揃えに見えない場合は、どちらかを長く（短く）することも検討*/
.next_info .title-border {
  padding: 0 60px;
}
@media not all and (min-width: 960px) {
  .next_info .title-border {
    padding: 0 7.3%;
  }
}
@media not all and (min-width: 600px) {
  .next_info .title-border {
    padding: 0 6%;
  }
}

@media not all and (min-width: 960px) {
  .news .title-border {
    padding: 0 30px;
    padding: 0 5%;
  }
}
@media not all and (min-width: 600px) {
  .news .title-border {
    padding: 0 3%;
  }
}

/* ---------- ニュース ---------- */
.news {
  background-color: #ffffff;
  padding: 0 120px;
  margin-top: 25px;
  margin-bottom: 40px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid #bbbbbb;
}
@media not all and (min-width: 960px) {
  .news {
    width: 100%;
    padding: 0 8%;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
@media not all and (min-width: 600px) {
  .news {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 0 8vw;
  }
}

.news h2 {
  font-size: 30px;
  font-weight: 600;
  text-align: center; /* 必ずこれを先に書くこと。そうしないと、text-indentが適用されない。 */
  letter-spacing: 1em;
  text-indent: 1em;
  margin: 0.8em auto;
  padding-top: 0.2em;
  /*padding: 5px 1.8em 0;
  /* padding: 0.55em 1.2em 0.4em; */
  /*  border-bottom: solid 1px $gray03; */
}
@media not all and (min-width: 600px) {
  .news h2 {
    font-size: 160%;
    text-align: center; /* 必ずこれを先に書くこと。そうしないと、text-indentが適用されない。 */
    letter-spacing: 3vw;
    text-indent: 3vw;
    padding-top: 0.2em;
  }
}

.news dl {
  display: block;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

.news_item {
  display: flex;
  border-bottom: 1px dashed #aaaaaa;
  /* このときの幅はwidth: 720px;*/
}
@media not all and (min-width: 600px) {
  .news_item {
    flex-direction: column;
    width: 100%;
  }
}

.news_item::after {
  content: "";
  display: block;
  clear: both;
}

.news_date {
  margin: 0 auto;
  text-align: center;
  color: #727272;
  font-size: 16px;
  line-height: 1.8; /*textと同じ高さにするため、数値は一緒にすること */
  flex: 0 0 220px; /* textと合わせて720pxになるように */
  /* width: 25%; /* flex可変幅のとき、textと合わせて100％になるように */
  padding-left: 0em;
}
@media not all and (min-width: 960px) {
  .news_date {
    text-align: center;
    font-size: 16px;
    line-height: 1.8; /*textと同じ高さにするため、数値は一緒にすること */
    flex: 0 0 35%;
    padding-left: 0em;
  }
}
@media not all and (min-width: 600px) {
  .news_date {
    margin: 0 10vw;
    padding-top: 1px;
    text-align: left;
    line-height: 1.6;
    font-size: calc(12px + (1vw - 3.2px) * 1.4286);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 16px に流動的に変化する
     */
  }
}

.news_text {
  margin: 0 auto;
  text-align: left;
  color: #555;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.8; /*dateと同じ高さにするため、数値は一緒にすること */
  flex: 0 0 500px; /* dateと合わせて720pxになるように */
  /* width: 75%; /* flex可変幅のとき、dateと合わせて100％になるように */
  padding-left: 0em;
}
@media not all and (min-width: 960px) {
  .news_text {
    text-align: left;
    font-size: 16px;
    line-height: 1.8; /*dateと同じ高さにするため、数値は一緒にすること */
    flex: 1 1 auto; /* dateと合わせて720pxになるように */
    text-indent: 1em;
  }
}
@media not all and (min-width: 600px) {
  .news_text {
    margin: 0 10vw;
    padding-bottom: 1px;
    text-align: left;
    line-height: 1.6;
    text-indent: 0.5em;
    font-size: calc(12px + (1vw - 3.2px) * 1.4286);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 16px に流動的に変化する
     */
  }
}

.news_item a {
  color: #0000ee;
}

.news_item a:visited {
  color: #0000ee;
}

.news_item a:hover {
  color: #00b0ff;
  text-decoration: underline;
}

/* ---------- ニュースおわり ---------- */
/* ---------- トップの公演情報 ---------- */
.next_info {
  background-color: #ffffff;
  padding: 0 60px 30px;
  margin: 0 auto 50px;
  border: 1px solid #bbbbbb;
}
@media not all and (min-width: 960px) {
  .next_info {
    width: 100%;
    padding: 0 5% 30px;
    margin-bottom: 40px;
  }
}

.next_info h2 {
  font-size: 30px;
  font-weight: 600;
  text-align: center; /* 必ずこれを先に書くこと。そうしないと、text-indentが適用されない。 */
  letter-spacing: 1em;
  text-indent: 1em;
  margin: 0.8em auto;
  padding-top: 0.2em;
}
@media not all and (min-width: 600px) {
  .next_info h2 {
    font-size: 160%;
    text-align: center; /* 必ずこれを先に書くこと。そうしないと、text-indentが適用されない。 */
    letter-spacing: 3vw;
    text-indent: 3vw;
    padding-top: 0.2em;
  }
}

/*{
  font-size: 1.8em;
  line-height: 2;
  padding: 5px 1.8em 0 1.4em;/* padding: 0.55em 1.2em 0.4em; */
/*  border-bottom: solid 1px $gray03; *
} */
.next_info_item {
  display: flex;
}
@media not all and (min-width: 600px) {
  .next_info_item {
    flex-direction: column;
    width: 100%;
  }
}

.next_info_item::after { /*display:flex使用時の高さの確保*/
  content: "";
  display: block;
  clear: both;
}

.next_flyer {
  flex: 1 1 auto;
  width: 49%; /* 横並びの.next_outlineと合わせて100％になるように */
  text-align: center;
  margin: 10px;
}
@media not all and (min-width: 960px) {
  .next_flyer {
    margin: 0;
    margin-top: 10px;
  }
}
@media not all and (min-width: 600px) {
  .next_flyer {
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
  }
}

@media not all and (min-width: 600px) {
  .next_info_item .next_flyer {
    pointer-events: none;
    cursor: default;
  }
}

.next_flyer img { /*画像の下にできる謎の余白を消すためにblock要素にした上で、中央揃え*/
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.next_outline {
  flex: 1 1 auto;
  justify-content: center;
  margin: 10px;
  text-align: center;
  width: 51%; /* 横並びの.next_flyerと合わせて100％になるように */
}
@media not all and (min-width: 960px) {
  .next_outline {
    flex: 1 1 auto;
    justify-content: center;
    margin: 10px 0 0 2.5vw;
    text-align: center;
    width: 51%;
  }
}
@media not all and (min-width: 600px) {
  .next_outline {
    margin: 10px auto 0;
    text-align: center;
    width: 100%;
    font-size: 100%;
  }
}

.next_outline h3 span {
  display: block;
  line-height: 1.6;
}
@media not all and (min-width: 960px) {
  .next_outline h3 span {
    display: block;
    line-height: 1.6;
  }
}
@media not all and (min-width: 600px) {
  .next_outline h3 span {
    display: block;
    line-height: 1.6;
  }
}

.next_outline h3 span:first-child {
  font-size: 21px;
}
@media not all and (min-width: 960px) {
  .next_outline h3 span:first-child {
    font-size: 2.2vw;
  }
}
@media not all and (min-width: 600px) {
  .next_outline h3 span:first-child {
    font-size: calc(6px + 2vw);
  }
}

.next_outline h3 .play_title {
  font-size: 40px;
}
@media not all and (min-width: 960px) {
  .next_outline h3 .play_title {
    font-size: 4.5vw;
  }
}
@media not all and (min-width: 600px) {
  .next_outline h3 .play_title {
    font-size: calc(14px + 2vw);
  }
}

.next_outline h3 .subtitle {
  font-size: 20px;
  line-height: 1.4;
}
@media not all and (min-width: 960px) {
  .next_outline h3 .subtitle {
    font-size: 2vw;
  }
}
@media not all and (min-width: 600px) {
  .next_outline h3 .subtitle {
    font-size: calc(4px + 2vw);
  }
}

.next_outline p {
  font-size: 20px;
}
@media not all and (min-width: 960px) {
  .next_outline p {
    margin-top: 10px;
    font-size: 1.8vw;
  }
}
@media not all and (min-width: 600px) {
  .next_outline p {
    margin-top: 1em;
    font-size: calc(5px + 2vw);
  }
}

.next_outline p strong {
  display: block;
  font-size: 18px;
}
@media not all and (min-width: 960px) {
  .next_outline p strong {
    text-align: center;
    display: block;
    /*  font-size: 18px;*/
    font-size: 1.8vw;
    /*  margin-top: 3.5vw;*/
    /*  margin-bottom: 5vw;*/
    text-indent: 1em;
    padding-right: 1em;
    /* センター揃えの1個の段落である<p>を、text-indentとpadding-rintを用いて、行頭を揃えた上で中央揃え */
  }
}
@media not all and (min-width: 600px) {
  .next_outline p strong {
    font-size: calc(4px + 2vw);
  }
}

.btn a { /* 枠線内全体がボタンとしてクリックできるようになる */
  background-color: #f07d00;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  width: 60%;
  display: inline-block;
  text-align: center;
  line-height: 3.5;
  margin-top: 70px;
  border: 2px solid #f07d00;
  border-bottom: 2px solid #964b00;
  border-radius: 5px;
  transition: 0.2s linear;
  vertical-align: middle;
}
@media not all and (min-width: 960px) {
  .btn a {
    font-size: 1.8vw;
    line-height: 3.5; /* PC表示と変わらず */
    margin-top: 7.5vw;
  }
}
@media not all and (min-width: 600px) {
  .btn a {
    font-size: calc(4px + 2vw);
    line-height: 3.5; /* PC表示と変わらず */
    margin-top: 1.8em;
    width: 50%;
  }
}

.btn a:hover {
  opacity: 0.6;
  font-weight: 400;
}

.btn a:active {
  font-weight: 600;
  transition: none; /* 変化の過程をデフォルトのnoneにすることで、hoverから押したときに、0.2sの変化なく、すぐにボタンが凹むようになる */
  border-bottom: none;
  transform: translateY(2px); /* 下に、border-bottom分動く */
}

/* ---------- トップの公演情報おわり ---------- */
/* ---------- フッター ---------- */
footer {
  background-color: #352313;
  text-align: center;
  padding-top: 15px;
  width: 100vw;
  /*コンテンツの高さがなくてもフッターを下に配置するために*/
  position: absolute;
  bottom: 0;
}
@media not all and (min-width: 960px) {
  footer {
    width: 100vw;
  }
}
@media not all and (min-width: 600px) {
  footer {
    padding-top: 10px;
  }
}

.footer_logo a img {
  width: 150px;
}
@media not all and (min-width: 600px) {
  .footer_logo a img {
    width: 120px;
  }
}
@media not all and (min-width: 500px) {
  .footer_logo a img {
    width: 100px;
  }
}

footer .footer_nav {
  margin: 15px auto;
}
@media not all and (min-width: 600px) {
  footer .footer_nav {
    margin: 10px auto;
  }
}
@media not all and (min-width: 500px) {
  footer .footer_nav {
    margin: 5px auto;
  }
}

footer .footer_nav li {
  display: inline;
  border-left: solid 1px #ffefce;
  margin-left: 8px;
  padding-left: 10px;
  /*  font-size: smaller;  テスト確認してみたところ、環境によって適用されないことがあるので、ちゃんと数値で書いた方がいい。と実感*/
  font-size: 14px;
  /*  color: #352313;*/
  color: #ffefce;
}
@media not all and (min-width: 960px) {
  footer .footer_nav li {
    font-size: 13px;
  }
}
@media not all and (min-width: 600px) {
  footer .footer_nav li {
    font-size: 12px;
  }
}
@media not all and (min-width: 500px) {
  footer .footer_nav li {
    display: block;
    margin: 0 auto;
    line-height: 1.8;
    border: none;
    padding-left: 0;
    font-size: 11px;
  }
}

footer .footer_nav li:last-child {
  border-right: solid 1px #ffefce;
  padding-right: 11px;
}
@media not all and (min-width: 500px) {
  footer .footer_nav li:last-child {
    border-right: none;
    padding-right: 0;
  }
}

footer .footer_nav li:first-child {
  border-left: solid 1px #ffefce;
  padding-left: 11px;
}
@media not all and (min-width: 500px) {
  footer .footer_nav li:first-child {
    border-left: none;
    padding-left: 0;
  }
}

footer .footer_nav li a:link {
  /*  color: #352313;*/
  color: #ffefce;
}

footer .footer_nav li a:visited {
  color: inherit;
}

footer .footer_nav li a:hover {
  color: #988564;
}

footer .footer_nav li a:active {
  opacity: 0.5;
}

footer small {
  background-color: #52390f;
  display: block;
  font-size: 11px;
  padding: 0.6em 0;
  color: #ffefce;
}
@media not all and (min-width: 600px) {
  footer small {
    font-size: 10px;
  }
}

/* ---------- フッターおわり ---------- */
/* ---------- 各ページのパーツ：ページタイトル ---------- */
.contents_title {
  clear: both; /* floatの後続要素の回り込みを解除 */
  background-image: url(/assets/images/common/contents_title_img.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media not all and (min-width: 960px) {
  .contents_title {
    margin-top: 80px;
  }
}
@media not all and (min-width: 600px) {
  .contents_title {
    margin-top: 70px;
  }
}

.contents_title h1 {
  width: 960px;
  margin: 0 auto;
  padding: 0.8em 0;
  text-indent: 1em;
  color: #ffffff;
  font-size: 45px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  letter-spacing: 0.05em;
}
@media not all and (min-width: 960px) {
  .contents_title h1 {
    width: 100vw;
    text-align: center;
    text-indent: 0;
    font-size: 4.6vw;
  }
}
@media not all and (min-width: 600px) {
  .contents_title h1 {
    font-size: 26px;
  }
}

/* ---------- 各ページのパーツ：ページタイトルおわり ---------- */
/* ---------- 各ページのパーツ：パンくずリスト ---------- */
.breadcrumb {
  font-size: smaller;
  padding-left: 0.5em;
}

.breadcrumb ol {
  margin: 1em 0 0.8em 0;
  padding: 0;
}

.breadcrumb ol li {
  display: inline;
  line-height: 1.6;
}

.breadcrumb ol li::after {
  content: ">";
  padding-left: 0.5em;
}

.breadcrumb ol li:last-child::after {
  content: none;
}

/* ---------- 各ページのパーツ：パンくずリストおわり ---------- */
/* ---------- 各コンテンツ：劇団について ---------- */
.about {
  background-color: #ffffff;
  padding: 32px 40px 35px;
  margin: 0 auto 50px;
  border: 1px solid #bbbbbb;
}
@media not all and (min-width: 960px) {
  .about {
    padding: 28px 30px 35px;
    margin: 0 auto 45px;
  }
}
@media not all and (min-width: 600px) {
  .about {
    padding: 4vw 5vw 5.5vw;
    margin: 0 auto 35px;
  }
}

.about p {
  line-height: 2.2;
  text-indent: 1em;
}
@media not all and (min-width: 960px) {
  .about p {
    line-height: 2;
  }
}
@media not all and (min-width: 600px) {
  .about p {
    line-height: 1.8;
    font-size: calc(12px + (1vw - 3.2px) * 1.4286);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 16px に流動的に変化する
     */
  }
}

/* ---------- 各コンテンツ：劇団について おわり ---------- */
/* ---------- 各コンテンツ：公演情報 ---------- */
/*　----------　ここから先のCSSは、基本的に.nextを前につけないと、トップページにも同じ名前のクラス名があるので、そちらにも影響が出てしまう。　----------　*/
.next {
  background-color: #ffffff;
  padding: 32px 48px 30px;
  margin: 0 auto 50px;
  border: 1px solid #bbbbbb;
}
@media not all and (min-width: 960px) {
  .next {
    padding: 28px 30px 35px;
    margin: 0 auto 45px;
  }
}
@media not all and (min-width: 600px) {
  .next {
    padding: 4vw 5vw 5.5vw;
    margin: 0 auto 35px;
  }
}

.next h2 span {
  display: block;
  text-align: center;
  line-height: 1.6;
}
@media not all and (min-width: 960px) {
  .next h2 span {
    display: block;
    text-align: center;
    line-height: 1.6;
  }
}

.next h2 span:first-child, .next h2 .subtitle {
  font-size: 24px;
}
@media not all and (min-width: 960px) {
  .next h2 span:first-child, .next h2 .subtitle {
    font-size: 20px;
  }
}
@media not all and (min-width: 600px) {
  .next h2 span:first-child, .next h2 .subtitle {
    font-size: calc(9px + 2vw);
  }
}

.next h2 .play_title {
  font-size: 50px;
}
@media not all and (min-width: 960px) {
  .next h2 .play_title {
    font-size: 40px;
  }
}
@media not all and (min-width: 600px) {
  .next h2 .play_title {
    font-size: calc(18px + 3vw);
  }
}

.next p strong {
  display: block;
  text-align: center;
}
@media not all and (min-width: 960px) {
  .next p strong {
    margin-top: 1.2em;
    margin-bottom: 0.8em;
    font-size: 15px;
  }
}
@media not all and (min-width: 600px) {
  .next p strong {
    text-indent: 1em;
    padding-right: 1em;
    /* センター揃えの1個の段落である<p>を、text-indentとpadding-rintを用いて、行頭を揃えた上で中央揃え */
    font-size: calc(8px + 1.2vw);
    margin-top: 0.8em;
    margin-bottom: 2vw;
  }
}

.next p strong span::before {
  content: "　　";
  /* ::beforeもしくは::afterをつけないと、表示されないので注意！
  空のspanの中に全角スペースを入れることで空間をつくる。こうすることで、幅が小さくなったときに改行に変えることができる（レスポンシブデザイン上の都合）*/
}
@media not all and (min-width: 600px) {
  .next p strong span::before {
    content: "\a";
    white-space: pre;
  }
}

@media not all and (min-width: 600px) {
  .next p small {
    font-size: calc(8px + 1.2vw);
  }
}

.next .next_flyer {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media not all and (min-width: 600px) {
  .next .next_flyer {
    flex-direction: column;
    width: 100%;
  }
}

.next .next_flyer::after { /*display:flex使用時の高さの確保*/
  content: "";
  display: block;
  clear: both;
}

.flyer_omote, .flyer_ura {
  margin: 10px auto;
  padding-right: 10px;
  padding-left: 10px;
  text-align: center;
  width: 50%;
}
@media not all and (min-width: 960px) {
  .flyer_omote, .flyer_ura {
    margin: 10px auto;
    padding-right: 1.5vw;
    padding-left: 1.5vw;
  }
}

@media not all and (min-width: 600px) {
  .next .next_flyer .flyer_omote,
  .next .next_flyer .flyer_ura {
    width: 80%;
    margin: 5px auto;
    padding-right: 1.5vw;
    padding-left: 1.5vw;
  }
}

.next_key_info {
  display: flex;
  justify-content: space-around;
  flex-flow: column wrap;
  height: 64px;
  margin-bottom: 32px;
  margin-top: 8px;
}
@media not all and (min-width: 960px) {
  .next_key_info {
    display: block;
    text-align: center;
    justify-content: flex-start; /*flex-box初期値に戻す */
    flex-flow: row nowrap; /* flex-box初期値に戻す */
    height: auto; /* 初期値に戻す */
    margin-bottom: 28px;
    margin-top: 8px;
  }
}
@media not all and (min-width: 600px) {
  .next_key_info {
    margin-top: 8px;
    margin-bottom: 0px;
  }
}

.next_key_info p {
  font-size: 20px;
  font-weight: bold;
  width: 50%; /* 50%を指定するということは、「.nextのコンテンツ全体の横幅」×「0.5」が「.next_key_info」のpそれぞれの横幅にあたる、ということ。 */
  margin: 0 auto;
  text-indent: 1.5em;
}
@media not all and (min-width: 960px) {
  .next_key_info p {
    font-size: 18px;
    width: 100%;
    margin: 0 auto;
    text-indent: 0em; /* 初期値に戻す */
    line-height: 2;
  }
}
@media not all and (min-width: 600px) {
  .next_key_info p {
    font-size: calc(10px + 1vw);
    margin: 0 auto;
    line-height: 1.8;
  }
}

.next_key_info .btn {
  font-size: 20px;
  width: 50%; /* （A）50%を指定するということは、「.nextのコンテンツ全体の横幅」×「0.5」が「.next_key_info」のボタン（aタグ）のdiv（親要素）の横幅にあたる、ということ。 */
  margin: 0 auto;
  text-align: center;
}
@media not all and (min-width: 960px) {
  .next_key_info .btn {
    width: 100%;
    margin: 0.5em auto;
  }
}
@media not all and (min-width: 600px) {
  .next_key_info .btn {
    margin: 0.5em auto;
  }
}

.next .btn a {
  margin-top: 0;
  width: 60%; /* 60%を指定するということは、上記（A）のdiv（ボタンの親要素）の幅×「0.6」がボタン（aタグ）の横幅になる。 */
  line-height: 2.8;
}
@media not all and (min-width: 960px) {
  .next .btn a {
    font-size: 16px;
    width: 20em;
    line-height: 3;
  }
}
@media not all and (min-width: 600px) {
  .next .btn a {
    width: calc(68px + 35vw);
    font-size: 16px;
    font-size: calc(12px + (1vw - 3.2px) * 1.4286);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 16px に流動的に変化する
     */
  }
}

@media not all and (min-width: 960px) {
  .next section {
    display: grid;
    place-items: center;
  }
}

@media not all and (min-width: 600px) {
  .next section p {
    font-size: calc(14px + (1vw - 3.2px) * 0.7143);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 14px から 16px に流動的に変化する
     */
    /* background-color: aliceblue;*/
  }
}

.next h3 {
  font-size: 20px;
  margin: 16px 0 10px 0;
  padding: 18px 0 0 0;
  border-top: 1px dashed #aaaaaa;
}
@media not all and (min-width: 960px) {
  .next h3 {
    font-size: 18px;
    margin: 18px 0 12px 0;
    padding: 14px 0 0 0;
    margin: 22px auto 12px;
  }
}
@media not all and (min-width: 600px) {
  .next h3 {
    padding: 16px 0 0 0;
    margin: 22px auto 12px;
  }
}

@media not all and (min-width: 960px) {
  .next h3 span {
    display: inline-block;
    padding: 0.3em;
    border-bottom: 1.5px solid #333333;
  }
}

.next h3 span::before {
  content: "■ ";
}
@media not all and (min-width: 960px) {
  .next h3 span::before {
    content: "";
  }
}

.next .cast h3 {
  margin-top: 30px;
}
@media not all and (min-width: 960px) {
  .next .cast h3 {
    margin-top: 28px;
  }
}

.cast ul { /*高さの確保。回り込み防止*/
  overflow: hidden;
  clear: both;
  margin-left: 28px;
  margin-right: 28px;
}
@media not all and (min-width: 960px) {
  .cast ul {
    margin-left: auto;
    margin-right: auto;
  }
}

.cast li {
  display: inline;
  margin-left: 1.2em;
  line-height: 1.5;
  /*  overflow: hidden;
    clear: both;*/
}
@media not all and (min-width: 960px) {
  .cast li {
    display: block;
    margin-left: 0;
    line-height: 1.6;
    margin: 0.3em auto;
  }
}
@media not all and (min-width: 600px) {
  .cast li {
    margin: 0.2em auto;
    font-size: calc(14px + (1vw - 3.2px) * 0.7143);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 14px から 16px に流動的に変化する
     */
  }
}

.cast li:first-child {
  margin-left: 0;
}
@media not all and (min-width: 960px) {
  .cast li:first-child {
    margin-top: 0;
  }
}

@media not all and (min-width: 960px) {
  .cast li:last-child {
    margin-bottom: 0;
  }
}

.cast .spacepoint {
  margin-left: 0;
}
@media not all and (min-width: 960px) {
  .cast .spacepoint {
    margin-top: 1.2em;
  }
}
@media not all and (min-width: 600px) {
  .cast .spacepoint {
    margin-top: 1em;
  }
}

.cast .spacepoint::before {
  content: "\a";
  white-space: pre;
}
@media not all and (min-width: 960px) {
  .cast .spacepoint::before {
    content: "";
  }
}

.cast small {
  font-size: 13px;
  line-height: 1.5;
}
@media not all and (min-width: 960px) {
  .cast small {
    display: block;
    font-size: 12px;
  }
}
@media not all and (min-width: 600px) {
  .cast small {
    font-size: calc(10px + (1vw - 3.2px) * 0.7143);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 10px から 12px に流動的に変化する
     */
    line-height: 1.2;
  }
}

.musician p, .date p, .fee p, .reservation p {
  margin-left: 28px;
}
@media not all and (min-width: 960px) {
  .musician p, .date p, .fee p, .reservation p {
    margin-left: 0;
  }
}

.date .note-list {
  margin-left: 28px;
  text-align: start;
  font-weight: bold;
  color: #f00000;
  margin-top: 1em;
  line-height: 1.4;
}

.date .note-list__item:not(:first-child) {
  margin-top: 1em;
}

.date .shedule_table {
  width: 265px;
  display: table;
  border-collapse: collapse;
  margin-left: 28px;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-right: 28px;
  line-height: 2;
}
@media not all and (min-width: 960px) {
  .date .shedule_table {
    margin-left: auto;
    margin-right: auto;
  }
}
@media not all and (min-width: 400px) {
  .date .shedule_table {
    width: 67vw;
  }
}

.date .shedule_table .row {
  display: table-row;
}

.date .shedule_table dt, .date .shedule_table dd {
  display: table-cell;
  border: 1px solid #333333;
  text-align: center;
}

.date .shedule_table dt {
  font-weight: 600;
  width: 50%;
}

.date .shedule_table dd:empty {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoxMDAlO2hlaWdodDoxMDAlOyI+PGxpbmUgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSIgc3R5bGU9InN0cm9rZTogIzMzMzMzMztzdHJva2Utd2lkdGg6IDE7Ij48L2xpbmU+PC9zdmc+");
}

.date span {
  font-size: 0.95em;
}

.saturday {
  color: blue;
}

.sunday {
  color: #f00000;
}

@media not all and (min-width: 600px) {
  .date dt, .date dd {
    font-size: calc(14px + (1vw - 3.2px) * 0.7143);
    /* 
    * レスポンシブフォントサイズ
    * ウィンドウ幅 320px から 600px まで、
    * フォントサイズが 14px から 16px に流動的に変化する
    */
  }
}

.date small {
  margin-left: 30px;
  font-size: 0.9em;
  display: block;
}
@media not all and (min-width: 960px) {
  .date small {
    margin-left: 0;
  }
}
@media not all and (min-width: 600px) {
  .date small {
    font-size: 0.9em; /* → 16px * 0.9 = 14.4px */
    font-size: calc(12px + (1vw - 3.2px) * 0.7143);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 14px に流動的に変化する
     */
    margin-top: calc(2px + 1.8vw);
  }
}

.venue p {
  margin-left: 28px;
  margin-bottom: 8px;
  line-height: 1.5;
  font-weight: 500;
  display: inline-block;
}
@media not all and (min-width: 960px) {
  .venue p {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
    line-height: 1.5;
    font-weight: 500;
    display: block;
  }
}
@media not all and (min-width: 600px) {
  .venue p {
    margin-bottom: 0.4em;
    line-height: 1.5;
  }
}

.venue a {
  color: #333333;
}
.venue a:link {
  color: #333333;
}
.venue a:visited {
  color: #333333;
}
.venue a:hover {
  color: #e2694a;
  font-weight: inherit;
  text-decoration: underline;
}
.venue a:active {
  color: #f0b4a4;
}

.venue small {
  display: inline-block;
  font-size: 0.9em;
  line-height: 1.6;
}
@media not all and (min-width: 960px) {
  .venue small {
    display: block;
    font-size: 0.9em;
    margin-bottom: 10px;
  }
}
@media not all and (min-width: 600px) {
  .venue small {
    font-size: 0.9em; /* → 16px * 0.9 = 14.4px */
    font-size: calc(12px + (1vw - 3.2px) * 0.7143);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 14px に流動的に変化する
     */
    margin-bottom: 12px;
  }
}

.venue iframe {
  margin-left: 28px;
}
@media not all and (min-width: 960px) {
  .venue iframe {
    margin-left: auto;
    margin-right: auto;
  }
}

/* GoogleMapサイズ調整 */
@media not all and (min-width: 480px) {
  .next .venue .mobile_width {
    overflow: hidden;
    width: 70vw;
    height: 70vw;
    /* 画面幅480px以下においては、GoogleMapを70vw角の領域内で表す */
    margin: 0 auto;
  }
  .next .venue .mobile_width iframe {
    height: 100%;
    width: 100%;
    /* 70vw角の領域内にピッタリ収まるよう、幅と高さともに100％に設定 */
  }
}
.fee .fee_table {
  display: table;
  border-collapse: collapse;
  margin-left: 28px;
  line-height: 1.5;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-right: 28px;
}
@media not all and (min-width: 960px) {
  .fee .fee_table {
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
  }
}
@media not all and (min-width: 400px) {
  .fee .fee_table {
    width: 75vw;
  }
}

.fee .fee_table .row {
  display: table-row;
}

.fee .fee_table dt,
.fee .fee_table dd {
  display: table-cell;
  border: 1px solid #333333;
  text-align: center;
  vertical-align: middle;
  padding-left: 1em;
  padding-right: 1em;
}

.fee .fee_table dt {
  font-weight: 600;
}

.fee .fee_table span {
  font-size: 0.95em;
}

.fee small {
  margin-left: 30px;
  font-size: 0.9em;
  display: block;
}
@media not all and (min-width: 960px) {
  .fee small {
    margin-left: auto;
    margin-right: auto;
  }
}
@media not all and (min-width: 600px) {
  .fee small {
    font-size: 0.9em; /* → 16px * 0.9 = 14.4px */
    font-size: calc(12px + (1vw - 3.2px) * 0.7143);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 14px に流動的に変化する
     */
    margin-top: calc(2px + 1.8vw);
  }
}

@media not all and (min-width: 600px) {
  .fee dt, .fee dd {
    font-size: calc(14px + (1vw - 3.2px) * 0.7143);
    /* 
    * レスポンシブフォントサイズ
    * ウィンドウ幅 320px から 600px まで、
    * フォントサイズが 14px から 16px に流動的に変化する
    */
    line-height: 1.8;
  }
}

.reservation p {
  margin-top: 20px;
  margin-bottom: 5px;
}

.reservation dl {
  margin-left: 28px;
  line-height: 2;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-right: 28px;
}
@media not all and (min-width: 960px) {
  .reservation dl {
    line-height: 1.8;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
  }
}
@media not all and (min-width: 600px) {
  .reservation dl {
    margin-left: 1em;
    margin-right: 1em;
    line-height: 1.6;
    font-size: calc(14px + (1vw - 3.2px) * 0.7143);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 14px から 16px に流動的に変化する
     */
  }
}

.reservation .form {
  display: flex;
}
@media not all and (min-width: 960px) {
  .reservation .form {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.8em;
  }
}
@media not all and (min-width: 600px) {
  .reservation .form {
    margin-bottom: 1.2em;
  }
}

.reservation .contact {
  display: flex;
}
@media not all and (min-width: 960px) {
  .reservation .contact {
    display: block;
    margin: 0 auto;
  }
}

.reservation dt {
  width: 25%;
}
@media not all and (min-width: 960px) {
  .reservation dt {
    width: 100%;
  }
}

.reservation .contact {
  padding: 0;
  margin: 0;
}

.reservation dd {
  text-indent: 1em;
}
@media not all and (min-width: 960px) {
  .reservation dd {
    text-align: left;
    width: 100%;
  }
}
@media not all and (min-width: 600px) {
  .reservation dd {
    text-indent: 0;
    padding-left: 0.8em;
  }
}

.reservation .form dd a {
  /*  color: darkorange;*/
  color: #0000ee;
  font-weight: 600;
}

.reservation .form dd a:link {
  color: #0000ee;
  font-weight: 600;
}

.reservation .form dd a:visited {
  /*  color: #d55935; */
  color: #0000ee;
  font-weight: 600;
}

.reservation .form dd a:hover {
  color: #e2694a;
  font-weight: 600;
  text-decoration: underline;
}

.reservation .form dd a:active {
  color: #f0b4a4;
}

.reservation .form::after, .reservation .contact::after {
  content: "";
  display: block;
  clear: both;
}

.next-summary-section__content {
  text-align: left;
}

/* ---------- 各コンテンツ：公演情報おわり ---------- */
/* ---------- 各コンテンツ：ギャラリー ---------- */
.gallery {
  background-color: #ffffff;
  padding: 32px 48px 20px;
  margin: 0 auto 50px;
  border: 1px solid #bbbbbb;
}
@media not all and (min-width: 960px) {
  .gallery {
    padding: 32px 48px 15px;
    margin: 0 auto 45px;
  }
}
@media not all and (min-width: 600px) {
  .gallery {
    padding: 4vw 5vw 2vw;
    margin: 0 auto 35px;
  }
}

.gallery p {
  margin-bottom: 18px;
  padding-left: 20px;
  font-size: 18px;
}
@media not all and (min-width: 960px) {
  .gallery p {
    margin-bottom: 18px;
    padding-left: 20px;
    font-size: 18px;
  }
}
@media not all and (min-width: 600px) {
  .gallery p {
    margin: 5px auto 3vw;
    line-height: 1.6;
    font-size: calc(12px + (1vw - 3.2px) * 1.4286);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 16px に流動的に変化する
     */
    text-align: center;
    padding: 0; /* 先に書かれてある内容をリセット */
  }
}

.gallery dl {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  /*  justify-content: space-around;*/
  align-content: space-between;
  margin: 0 20px;
}
@media not all and (min-width: 600px) {
  .gallery dl {
    display: block;
    margin: 0 auto;
  }
}

.gallery_page_link {
  width: 400px;
  height: 300px;
  border: 2px #999999 solid;
  border-radius: 10px;
  margin-bottom: 20px;
}
@media not all and (min-width: 960px) {
  .gallery_page_link {
    width: 48.5%;
    height: 32vw;
    margin-bottom: 2.4vw;
  }
}
@media not all and (min-width: 600px) {
  .gallery_page_link {
    /*  width: 70%;*/
    width: 55vw;
    height: 45vw;
    margin-bottom: 4.5vw;
    margin-left: auto;
    margin-right: auto;
  }
}

.gallery_page_link dt img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 396px; /* ↑のボーダーの2pxの分も加味すること。400px-(2px*2) */
  height: 218px; /* ↑のボーダーの2pxの分も加味すること */
  border-radius: 8px 8px 0 0; /* ↑のボーダーの2pxの分も加味すると、角丸は10px-2pxで設定するのが正しい */
  display: block;
  margin: 0 auto;
  font-family: "object-fit: cover;";
}
@media not all and (min-width: 960px) {
  .gallery_page_link dt img {
    width: 100%;
    height: calc(22vw - 2px);
  }
}
@media not all and (min-width: 600px) {
  .gallery_page_link dt img {
    height: calc(30vw - 2px);
  }
}

.gallery_page_link dd {
  text-align: center;
  width: 396px; /* ↑のボーダーの2pxの分も加味すること */
  height: 78px; /* ↑のボーダーの2pxの分も加味すること */
  background-color: #80D6FD;
  border-radius: 0px 0px 8px 8px; /* ↑のボーダーの2pxの分も加味すると、角丸は10px-2pxで設定するのが正しい */
  position: relative; /* 文字を中央揃えするために */
}
@media not all and (min-width: 960px) {
  .gallery_page_link dd {
    width: 100%;
    height: calc(10vw - 2px);
  }
}
@media not all and (min-width: 600px) {
  .gallery_page_link dd {
    height: calc(15vw - 2px);
  }
}

.gallery_page_link dd p {
  margin: 0; /* 先に書かれてある内容をリセット */
  padding: 0; /* 先に書かれてある内容をリセット */
  width: 396px;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  /* 以下、テキストを上下左右中央揃えにするために */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media not all and (min-width: 960px) {
  .gallery_page_link dd p {
    width: 100%;
    font-size: 18px; /* 先に書かれてある内容 */
    font-size: 2vw;
  }
}
@media not all and (min-width: 600px) {
  .gallery_page_link dd p {
    font-size: calc(10px + (1vw - 3.2px) * 2.1429);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 10px から 16px に流動的に変化する
     */
  }
}

.gallery_page_link a:visited {
  color: #333333;
}

.gallery_page_link:hover {
  transition: opacity 0.2s linear;
  opacity: 0.6;
}

.gallery_page_link:active {
  opacity: 0.9;
}

.gallery .preparation {
  transition: none;
  opacity: 1;
}

/* ---------- 各コンテンツ：ギャラリー おわり ---------- */
/* ---------- 各コンテンツ：ギャラリー各ページ ---------- */
.gallery_page {
  background-color: #ffffff;
  padding: 32px 48px 35px;
  padding-bottom: 30px;
  margin: 0 auto 50px;
  border: 1px solid #bbbbbb;
}
@media not all and (min-width: 960px) {
  .gallery_page {
    padding: 28px 30px 30px;
    margin: 0 auto 45px;
  }
}
@media not all and (min-width: 600px) {
  .gallery_page {
    padding: 5vw 6vw 5.5vw;
    margin: 0 auto 35px;
  }
}

.gallery_page h2 {
  margin-bottom: 12px;
}

.gallery_page h2 span {
  display: block;
  font-size: 22px;
  line-height: 1.4;
  padding-left: 12px;
}
@media not all and (min-width: 600px) {
  .gallery_page h2 span {
    text-align: center;
    font-size: calc(9px + 2vw);
  }
}

/*.gallery_page .play_title::before,
.gallery_page .subtitle::before {
	content: '\A' ;
	white-space: pre ;
} /* CSSで改行 */
.gallery_page .play_title {
  font-size: 30px;
  line-height: 1.6;
}
@media not all and (min-width: 600px) {
  .gallery_page .play_title {
    text-align: center;
    font-size: calc(12px + 2.4vw);
  }
}

.gallery_page .subtitle {
  font-size: 20px;
}
@media not all and (min-width: 600px) {
  .gallery_page .subtitle {
    text-align: center;
    font-size: calc(7px + 2vw);
  }
}

.gallery_page p {
  padding-left: 12px;
  text-indent: 0.5em;
}
@media not all and (min-width: 600px) {
  .gallery_page p {
    text-indent: 0;
    text-align: center;
    font-size: calc(12px + (1vw - 3.2px) * 1.4286);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 16px に流動的に変化する
     */
  }
}

.gallery_page .photographer {
  text-align: right;
  padding-left: 0;
  padding-right: 0.5em;
}
@media not all and (min-width: 600px) {
  .gallery_page .photographer {
    padding: 0;
    text-align: center;
    margin-top: 8px;
    font-size: calc(12px + (1vw - 3.2px) * 1.4286);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 16px に流動的に変化する
     */
  }
}

.gallery_page ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-between;
  margin-top: 12px;
}

.gallery_page ul li {
  margin-bottom: 7px;
}
@media not all and (min-width: 960px) {
  .gallery_page ul li {
    margin-bottom: 7px; /* 先に書かれてある内容 */
    margin-bottom: calc(7px + (1vw - 6px) * 6.38888);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 600px から 960px まで、
     * サイズが 8px から 25px に流動的に変化する
     */
  }
}
@media not all and (min-width: 600px) {
  .gallery_page ul li {
    margin-bottom: 1.5vw;
  }
}

.gallery_page ul li img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 210px;
  height: 210px;
  border: 1px #999999 solid;
  display: block;
  margin: 0 auto;
  font-family: "object-fit: cover;"; /* ← object-fit: cover; をIEでも使えるようにするためのjsである「object-fit-images」について、読み込みと起動のために必要な記述 */
}
@media not all and (min-width: 960px) {
  .gallery_page ul li img {
    width: 27.5vw;
    height: 27.5vw;
  }
}
@media not all and (min-width: 600px) {
  .gallery_page ul li img {
    width: 40.5vw;
    height: 40.5vw;
  }
}

.gallery_page ul li:empty {
  content: "";
  display: block;
  clear: both;
  width: 428px;
  height: 210px;
}
@media not all and (min-width: 960px) {
  .gallery_page ul li:empty {
    width: 27.5vw;
    height: 27.5vw;
  }
}

.gallery_page ul li:empty:nth-child(4n) {
  content: "";
  display: block;
  clear: both;
  width: 210px;
  height: 210px;
}
@media not all and (min-width: 960px) {
  .gallery_page ul li:empty:nth-child(4n) {
    width: 27.5vw;
    height: 27.5vw;
  }
}

.gallery_page ul li:empty:nth-child(4n+1) {
  display: none;
}
@media not all and (min-width: 960px) {
  .gallery_page ul li:empty:nth-child(4n+1) {
    content: "";
    display: block;
    clear: both;
    width: 27.5vw;
    height: 27.5vw;
  }
}

@media not all and (min-width: 960px) {
  .gallery_page ul li:empty:nth-child(3n+1) {
    display: none;
  }
}

@media not all and (min-width: 600px) {
  .gallery_page ul li:empty:last-child {
    display: none;
  }
}

/* ---------- 各コンテンツ：ギャラリー各ページ おわり ---------- */
/* ---------- 各コンテンツ：公演記録 ---------- */
.archive {
  background-color: #ffffff;
  padding: 32px 48px 35px;
  margin: 0 auto 50px;
  border: 1px solid #bbbbbb;
}
@media not all and (min-width: 960px) {
  .archive {
    padding: 28px 30px 30px;
    margin: 0 auto 45px;
  }
}
@media not all and (min-width: 600px) {
  .archive {
    padding: 5vw 6vw 5.5vw;
    margin: 0 auto 35px;
  }
}

.archive_item {
  display: flex;
  border-bottom: 1px dashed #aaaaaa;
  padding: 18px 0;
}
@media not all and (min-width: 600px) {
  .archive_item {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}

.archive_item:first-child {
  padding-top: 0;
}

.archive_item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.archive_item::after { /*display:flex使用時の高さの確保*/
  content: "";
  display: block;
  clear: both;
}

.archive_img {
  flex: 1 1 auto;
  width: 45%; /* archive_textと合わせて100%になるように */
  text-align: center;
  margin: 0 45px 0 45px;
}
@media not all and (min-width: 960px) {
  .archive_img {
    margin: 5px 2.5vw;
    width: 42%; /* archive_textと合わせて100%になるように */
  }
}
@media not all and (min-width: 600px) {
  .archive_img {
    margin: 5px auto;
    width: 65vw;
    text-align: center;
  }
}

.archive_img img {
  /*画像の下にできる謎の余白を消すためにblock要素にした上で、中央揃え*/
  display: block;
  margin: 0 auto;
  width: 100%;
  border: 1px solid #aaaaaa;
}

.archive_text {
  flex: 1 1 auto;
  width: 55%; /* archive_imgと合わせて100%になるように */
}
@media not all and (min-width: 960px) {
  .archive_text {
    margin: 5px 0 5px 0;
    width: 58%; /* archive_imgと合わせて100%になるように */
  }
}
@media not all and (min-width: 600px) {
  .archive_text {
    margin: 5px auto 0;
    width: 100%;
    text-align: center;
    display: block;
  }
}

@media not all and (min-width: 600px) {
  .archive_text h2 {
    display: inline-block;
  }
}

.archive_text h2 span:first-child {
  display: block;
  font-size: 20px;
  line-height: 1.6;
}
@media not all and (min-width: 960px) {
  .archive_text h2 span:first-child {
    display: block;
    /*  font-size: 20px;*/
    font-size: 2vw;
    line-height: 1.6;
  }
}
@media not all and (min-width: 600px) {
  .archive_text h2 span:first-child {
    font-size: 3.5vw;
    line-height: 1.6;
  }
}

.archive_text h2 .play_title {
  display: block;
  font-size: 26px;
  line-height: 1.4;
}
@media not all and (min-width: 960px) {
  .archive_text h2 .play_title {
    font-size: 2.8vw;
  }
}
@media not all and (min-width: 600px) {
  .archive_text h2 .play_title {
    font-size: 5vw;
    line-height: 1.6;
  }
}

.archive_text h2 .subtitle {
  display: block;
  font-size: 18px;
  line-height: 1.6;
}
@media not all and (min-width: 960px) {
  .archive_text h2 .subtitle {
    font-size: 18px; /* 先に書いてある内容 */
    font-size: 1.8vw;
  }
}
@media not all and (min-width: 600px) {
  .archive_text h2 .subtitle {
    font-size: 2vw; /* 先に書いてある内容 */
    font-size: 3vw;
  }
}

@media not all and (min-width: 960px) {
  .archive_text p {
    font-size: 1.6vw;
  }
}
@media not all and (min-width: 600px) {
  .archive_text p {
    font-size: calc(12px + (1vw - 3.2px) * 1.4286);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 16px に流動的に変化する
     */
  }
}

.archive_text p strong {
  display: block;
  font-size: 16px;
  margin-top: 1em;
  margin-bottom: 1.5em;
}
@media not all and (min-width: 960px) {
  .archive_text p strong {
    display: block;
    font-size: 16px; /* ←先に書かれてある内容 */
    font-size: 1.6vw;
    margin-top: 1.5vw;
    margin-bottom: 2vw;
    line-height: 1.4;
    /*  padding-left: 1vw;*/
    padding-left: 0.8vw;
    /*  text-align: center;*/
    /*  padding-left: 1em;*/
  }
}
@media not all and (min-width: 600px) {
  .archive_text p strong {
    font-size: calc(12px + (1vw - 3.2px) * 1.4286);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 16px に流動的に変化する
     */
    margin-top: 0.6em;
    margin-bottom: 1em;
    line-height: 1.6;
    padding-left: 0; /* 先に書かれてある内容をリセット */
  }
}

.archive_text p strong span::before {
  content: "　　";
  /* ::beforeもしくは::afterをつけないと、表示されないので注意！
  空のspanの中に全角スペースを入れることで空間をつくる。こうすることで、幅が小さくなったときに改行に変えることができる（レスポンシブデザイン上の都合）*/
}
@media not all and (min-width: 600px) {
  .archive_text p strong span::before {
    content: "\a";
    white-space: pre;
  }
}

@media not all and (min-width: 960px) {
  .archive_cast {
    text-align: left;
  }
}
@media not all and (min-width: 600px) {
  .archive_cast {
    margin-bottom: 0;
  }
}

.archive_cast p {
  font-weight: bold;
  margin-top: 1em;
}
@media not all and (min-width: 960px) {
  .archive_cast p {
    margin-top: 1em;
  }
}
@media not all and (min-width: 600px) {
  .archive_cast p {
    font-size: calc(12px + (1vw - 3.2px) * 1.4286);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 16px に流動的に変化する
     */
    text-align: center;
  }
}

.archive_cast p:first-child { /*最初の項目のみマージン上をリセット*/
  margin-top: 0;
}

.archive_cast ul { /*高さの確保。回り込み防止*/
  overflow: hidden;
  clear: both;
  padding-left: 1em;
}
@media not all and (min-width: 960px) {
  .archive_cast ul {
    padding-left: 2vw;
  }
}
@media not all and (min-width: 600px) {
  .archive_cast ul {
    padding-left: 0; /* 先に書かれてある内容をリセット */
    display: block;
    text-align: left;
    /*  margin-left: 14vw;*/
    margin-right: auto;
    text-align: center;
  }
}

.archive_cast li {
  display: inline;
  margin-right: 1em;
  line-height: 1.6;
}
@media not all and (min-width: 960px) {
  .archive_cast li {
    display: inline;
    margin-right: 0.8em;
    margin-right: 1.2vw;
    line-height: 1.6;
    font-size: 16px; /* ←先に書かれてある内容 */
    font-size: 1.6vw;
  }
}
@media not all and (min-width: 600px) {
  .archive_cast li {
    display: block;
    margin-right: 0;
    font-size: calc(12px + (1vw - 3.2px) * 1.4286);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 16px に流動的に変化する
     */
  }
}

@media not all and (min-width: 600px) {
  .archive_cast .spacepoint {
    margin-top: 0.5em;
  }
}

.archive_cast .spacepoint::before { /*CSSで改行 */
  content: "\a";
  white-space: pre;
}
@media not all and (min-width: 600px) {
  .archive_cast .spacepoint::before {
    content: "";
  }
}

.archive_cast ul small {
  font-size: 0.8em;
}
@media not all and (min-width: 600px) {
  .archive_cast ul li span {
    display: block;
  }
}

@media not all and (min-width: 960px) {
  .archive_cast ul li small {
    font-size: 1.2vw;
  }
}
@media not all and (min-width: 600px) {
  .archive_cast ul li small {
    line-height: 1.2;
    display: block;
    font-size: calc(10px + (1vw - 3.2px) * 0.7143);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 10px から 12px に流動的に変化する
     */
  }
  .archive_cast ul li small::after {
    content: "";
    display: block;
    margin-top: 0.5em;
  }
}

.archive_date {
  /*  display: inline;*/
  /*  margin-right: 2em;*/
  padding-left: 1em;
  margin-top: 1.8em;
  margin-bottom: 1em;
}
@media not all and (min-width: 960px) {
  .archive_date {
    display: block;
    margin-right: 0; /* 先に書かれてある内容をリセット */
    padding-left: 0em; /* 先に書かれてある内容をリセット */
    line-height: 1.6;
    padding-left: 2vw;
    margin-top: 2.4vw;
    margin-bottom: 1vw;
  }
}
@media not all and (min-width: 600px) {
  .archive_date {
    margin-top: calc(14px + 3vw);
    display: block;
    margin-right: 0; /* 先に書かれてある内容をリセット */
    margin-left: 0;
    /* padding-left: 14vw;*/
    padding: 0;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    line-height: 1.8;
  }
}

.archive_venue {
  /*  display: inline;*/
  padding-left: 1em;
}
@media not all and (min-width: 960px) {
  .archive_venue {
    display: block;
    margin-right: 0; /* 先に書かれてある内容をリセット */
    padding-left: 0em; /* 先に書かれてある内容をリセット */
    line-height: 1.6;
    padding-left: 2vw;
  }
}
@media not all and (min-width: 600px) {
  .archive_venue {
    display: block;
    margin-right: 0; /* 先に書かれてある内容をリセット */
    margin-left: 0;
    /* padding-left: 14vw;*/
    padding: 0;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    line-height: 1.8;
  }
}

/* ---------- 各コンテンツ：公演記録 おわり ---------- */
/* ---------- 各コンテンツ：お問い合わせ（メール） ---------- */
.contact {
  background-color: #ffffff;
  padding: 32px 48px 35px;
  margin: 0 auto 50px;
  border: 1px solid #bbbbbb;
}
@media not all and (min-width: 960px) {
  .contact {
    padding: 28px 40px 35px;
    margin: 0 auto 45px;
  }
}
@media not all and (min-width: 600px) {
  .contact {
    padding: 28px 40px 35px;
    padding: 4vw 8vw 5.5vw;
    margin: 0 auto 35px;
  }
}

.next .reservation .contact {
  border: none;
  /* 公演情報のページにborderの影響が出ないようにリセット */
}

@media not all and (min-width: 600px) {
  .contact p {
    font-size: calc(12px + (1vw - 3.2px) * 1.4286);
    /* 
     * レスポンシブフォントサイズ
     * ウィンドウ幅 320px から 600px まで、
     * フォントサイズが 12px から 16px に流動的に変化する
     */
  }
}

.contact p span::before { /*CSSで改行 */
  content: "\a";
  white-space: pre;
}
@media not all and (min-width: 960px) {
  .contact p span::before {
    content: "、";
  }
}

.contact p:not(:first-child) {
  margin-top: 1em;
}
@media not all and (min-width: 600px) {
  .contact p:not(:first-child) {
    margin-top: 0;
    margin-top: 2vw;
  }
}

.contact a {
  color: #0000ee;
}

.contact a:hover {
  color: #00b0ff;
  text-decoration: underline;
}

/* ---------- 各コンテンツ：お問い合わせ（メール）おわり ---------- */
.finished_inform {
  text-align: center;
  color: red;
  font-size: 28px;
  font-weight: 600;
  padding: 0.3em 0 0.5em;
}
@media not all and (min-width: 960px) {
  .finished_inform {
    font-size: 3vw;
  }
}
@media not all and (min-width: 600px) {
  .finished_inform {
    font-size: calc(10px + 2vw);
  }
}

.finished_inform span::before {
  content: " ";
}
@media not all and (min-width: 600px) {
  .finished_inform span::before {
    content: "\a";
    white-space: pre;
  }
}

/*  ---------- GoogleFont ----------
font-family: 'M PLUS Rounded 1c', sans-serif;
---------- 太字と細字がある。Webフォントを太字で表示させたいときにはCSSで指定をします。font-family:〜;と合わせてfont-weight:bold; と書けば太字で、font-weight:lighter; とすれば細字で表示されます。 ---------- */
.u-d-b {
  display: block;
}

.u-d-ib {
  display: inline-block;
}

.u-d-i {
  display: inline;
}

@media (min-width: 960px) {
  .u-d-b-pc {
    display: block;
  }
  .u-d-ib-pc {
    display: inline-block;
  }
  .u-d-i-pc {
    display: inline;
  }
  .u-dn-pc {
    display: none;
  }
}
@media not all and (min-width: 960px) {
  .u-d-b-sp {
    display: block;
  }
  .u-d-ib-sp {
    display: inline-block;
  }
  .u-d-i-sp {
    display: inline;
  }
  .u-dn-sp {
    display: none;
  }
}
.u-ta-l {
  text-align: left;
}

.u-ta-c {
  text-align: center;
}

.u-ta-r {
  text-align: right;
}

.u-ta-j {
  text-align: justify;
}

.u-tt-upper,
.u-tt-uppercase {
  text-transform: uppercase;
}

.u-lh-xl {
  line-height: 2;
}

.u-lh-lg {
  line-height: 1.8;
}

.u-lh-md {
  line-height: 1.6;
}

.u-lh-sm {
  line-height: 1.4;
}

.u-lh-xs {
  line-height: 1.2;
}

.u-lh-xxs {
  line-height: 1;
}

.u-mt-0 {
  margin-top: 0px;
}

.u-mr-0 {
  margin-right: 0px;
}

.u-mb-0 {
  margin-bottom: 0px;
}

.u-ml-0 {
  margin-left: 0px;
}

.u-mt-5 {
  margin-top: 5px;
}

.u-mr-5 {
  margin-right: 5px;
}

.u-mb-5 {
  margin-bottom: 5px;
}

.u-ml-5 {
  margin-left: 5px;
}

.u-mt-10 {
  margin-top: 10px;
}

.u-mr-10 {
  margin-right: 10px;
}

.u-mb-10 {
  margin-bottom: 10px;
}

.u-ml-10 {
  margin-left: 10px;
}

.u-mt-15 {
  margin-top: 15px;
}

.u-mr-15 {
  margin-right: 15px;
}

.u-mb-15 {
  margin-bottom: 15px;
}

.u-ml-15 {
  margin-left: 15px;
}

.u-mt-20 {
  margin-top: 20px;
}

.u-mr-20 {
  margin-right: 20px;
}

.u-mb-20 {
  margin-bottom: 20px;
}

.u-ml-20 {
  margin-left: 20px;
}

.u-mt-25 {
  margin-top: 25px;
}

.u-mr-25 {
  margin-right: 25px;
}

.u-mb-25 {
  margin-bottom: 25px;
}

.u-ml-25 {
  margin-left: 25px;
}

.u-mt-30 {
  margin-top: 30px;
}

.u-mr-30 {
  margin-right: 30px;
}

.u-mb-30 {
  margin-bottom: 30px;
}

.u-ml-30 {
  margin-left: 30px;
}

.u-mt-35 {
  margin-top: 35px;
}

.u-mr-35 {
  margin-right: 35px;
}

.u-mb-35 {
  margin-bottom: 35px;
}

.u-ml-35 {
  margin-left: 35px;
}

.u-mt-40 {
  margin-top: 40px;
}

.u-mr-40 {
  margin-right: 40px;
}

.u-mb-40 {
  margin-bottom: 40px;
}

.u-ml-40 {
  margin-left: 40px;
}

.u-mt-45 {
  margin-top: 45px;
}

.u-mr-45 {
  margin-right: 45px;
}

.u-mb-45 {
  margin-bottom: 45px;
}

.u-ml-45 {
  margin-left: 45px;
}

.u-mt-50 {
  margin-top: 50px;
}

.u-mr-50 {
  margin-right: 50px;
}

.u-mb-50 {
  margin-bottom: 50px;
}

.u-ml-50 {
  margin-left: 50px;
}

.u-mt-55 {
  margin-top: 55px;
}

.u-mr-55 {
  margin-right: 55px;
}

.u-mb-55 {
  margin-bottom: 55px;
}

.u-ml-55 {
  margin-left: 55px;
}

.u-mt-60 {
  margin-top: 60px;
}

.u-mr-60 {
  margin-right: 60px;
}

.u-mb-60 {
  margin-bottom: 60px;
}

.u-ml-60 {
  margin-left: 60px;
}

.u-mt-65 {
  margin-top: 65px;
}

.u-mr-65 {
  margin-right: 65px;
}

.u-mb-65 {
  margin-bottom: 65px;
}

.u-ml-65 {
  margin-left: 65px;
}

.u-mt-70 {
  margin-top: 70px;
}

.u-mr-70 {
  margin-right: 70px;
}

.u-mb-70 {
  margin-bottom: 70px;
}

.u-ml-70 {
  margin-left: 70px;
}

.u-mt-75 {
  margin-top: 75px;
}

.u-mr-75 {
  margin-right: 75px;
}

.u-mb-75 {
  margin-bottom: 75px;
}

.u-ml-75 {
  margin-left: 75px;
}

.u-mt-80 {
  margin-top: 80px;
}

.u-mr-80 {
  margin-right: 80px;
}

.u-mb-80 {
  margin-bottom: 80px;
}

.u-ml-80 {
  margin-left: 80px;
}

.u-mt-85 {
  margin-top: 85px;
}

.u-mr-85 {
  margin-right: 85px;
}

.u-mb-85 {
  margin-bottom: 85px;
}

.u-ml-85 {
  margin-left: 85px;
}

.u-mt-90 {
  margin-top: 90px;
}

.u-mr-90 {
  margin-right: 90px;
}

.u-mb-90 {
  margin-bottom: 90px;
}

.u-ml-90 {
  margin-left: 90px;
}

.u-mt-95 {
  margin-top: 95px;
}

.u-mr-95 {
  margin-right: 95px;
}

.u-mb-95 {
  margin-bottom: 95px;
}

.u-ml-95 {
  margin-left: 95px;
}

.u-mt-100 {
  margin-top: 100px;
}

.u-mr-100 {
  margin-right: 100px;
}

.u-mb-100 {
  margin-bottom: 100px;
}

.u-ml-100 {
  margin-left: 100px;
}

.u-mt-105 {
  margin-top: 105px;
}

.u-mr-105 {
  margin-right: 105px;
}

.u-mb-105 {
  margin-bottom: 105px;
}

.u-ml-105 {
  margin-left: 105px;
}

.u-mt-110 {
  margin-top: 110px;
}

.u-mr-110 {
  margin-right: 110px;
}

.u-mb-110 {
  margin-bottom: 110px;
}

.u-ml-110 {
  margin-left: 110px;
}

.u-mt-115 {
  margin-top: 115px;
}

.u-mr-115 {
  margin-right: 115px;
}

.u-mb-115 {
  margin-bottom: 115px;
}

.u-ml-115 {
  margin-left: 115px;
}

.u-mt-120 {
  margin-top: 120px;
}

.u-mr-120 {
  margin-right: 120px;
}

.u-mb-120 {
  margin-bottom: 120px;
}

.u-ml-120 {
  margin-left: 120px;
}

.u-mt-125 {
  margin-top: 125px;
}

.u-mr-125 {
  margin-right: 125px;
}

.u-mb-125 {
  margin-bottom: 125px;
}

.u-ml-125 {
  margin-left: 125px;
}

.u-mt-130 {
  margin-top: 130px;
}

.u-mr-130 {
  margin-right: 130px;
}

.u-mb-130 {
  margin-bottom: 130px;
}

.u-ml-130 {
  margin-left: 130px;
}

.u-mt-135 {
  margin-top: 135px;
}

.u-mr-135 {
  margin-right: 135px;
}

.u-mb-135 {
  margin-bottom: 135px;
}

.u-ml-135 {
  margin-left: 135px;
}

.u-mt-140 {
  margin-top: 140px;
}

.u-mr-140 {
  margin-right: 140px;
}

.u-mb-140 {
  margin-bottom: 140px;
}

.u-ml-140 {
  margin-left: 140px;
}

.u-mt-145 {
  margin-top: 145px;
}

.u-mr-145 {
  margin-right: 145px;
}

.u-mb-145 {
  margin-bottom: 145px;
}

.u-ml-145 {
  margin-left: 145px;
}

.u-mt-150 {
  margin-top: 150px;
}

.u-mr-150 {
  margin-right: 150px;
}

.u-mb-150 {
  margin-bottom: 150px;
}

.u-ml-150 {
  margin-left: 150px;
}

.u-mt-155 {
  margin-top: 155px;
}

.u-mr-155 {
  margin-right: 155px;
}

.u-mb-155 {
  margin-bottom: 155px;
}

.u-ml-155 {
  margin-left: 155px;
}

.u-mt-160 {
  margin-top: 160px;
}

.u-mr-160 {
  margin-right: 160px;
}

.u-mb-160 {
  margin-bottom: 160px;
}

.u-ml-160 {
  margin-left: 160px;
}

.u-mt-165 {
  margin-top: 165px;
}

.u-mr-165 {
  margin-right: 165px;
}

.u-mb-165 {
  margin-bottom: 165px;
}

.u-ml-165 {
  margin-left: 165px;
}

.u-mt-170 {
  margin-top: 170px;
}

.u-mr-170 {
  margin-right: 170px;
}

.u-mb-170 {
  margin-bottom: 170px;
}

.u-ml-170 {
  margin-left: 170px;
}

.u-mt-175 {
  margin-top: 175px;
}

.u-mr-175 {
  margin-right: 175px;
}

.u-mb-175 {
  margin-bottom: 175px;
}

.u-ml-175 {
  margin-left: 175px;
}

.u-mt-180 {
  margin-top: 180px;
}

.u-mr-180 {
  margin-right: 180px;
}

.u-mb-180 {
  margin-bottom: 180px;
}

.u-ml-180 {
  margin-left: 180px;
}

.u-mt-185 {
  margin-top: 185px;
}

.u-mr-185 {
  margin-right: 185px;
}

.u-mb-185 {
  margin-bottom: 185px;
}

.u-ml-185 {
  margin-left: 185px;
}

.u-mt-190 {
  margin-top: 190px;
}

.u-mr-190 {
  margin-right: 190px;
}

.u-mb-190 {
  margin-bottom: 190px;
}

.u-ml-190 {
  margin-left: 190px;
}

.u-mt-195 {
  margin-top: 195px;
}

.u-mr-195 {
  margin-right: 195px;
}

.u-mb-195 {
  margin-bottom: 195px;
}

.u-ml-195 {
  margin-left: 195px;
}

.u-mt-200 {
  margin-top: 200px;
}

.u-mr-200 {
  margin-right: 200px;
}

.u-mb-200 {
  margin-bottom: 200px;
}

.u-ml-200 {
  margin-left: 200px;
}

.u-m-auto {
  margin: auto;
}

.u-m-center {
  margin-right: auto;
  margin-left: auto;
}

.u-mt-auto {
  margin-top: auto;
}

.u-mr-auto {
  margin-right: auto;
}

.u-mb-auto {
  margin-bottom: auto;
}

.u-ml-auto {
  margin-left: auto;
}

@media (min-width: 960px) {
  .u-mt-0-pc {
    margin-top: 0px;
  }
  .u-mr-0-pc {
    margin-right: 0px;
  }
  .u-mb-0-pc {
    margin-bottom: 0px;
  }
  .u-ml-0-pc {
    margin-left: 0px;
  }
  .u-mt-5-pc {
    margin-top: 5px;
  }
  .u-mr-5-pc {
    margin-right: 5px;
  }
  .u-mb-5-pc {
    margin-bottom: 5px;
  }
  .u-ml-5-pc {
    margin-left: 5px;
  }
  .u-mt-10-pc {
    margin-top: 10px;
  }
  .u-mr-10-pc {
    margin-right: 10px;
  }
  .u-mb-10-pc {
    margin-bottom: 10px;
  }
  .u-ml-10-pc {
    margin-left: 10px;
  }
  .u-mt-15-pc {
    margin-top: 15px;
  }
  .u-mr-15-pc {
    margin-right: 15px;
  }
  .u-mb-15-pc {
    margin-bottom: 15px;
  }
  .u-ml-15-pc {
    margin-left: 15px;
  }
  .u-mt-20-pc {
    margin-top: 20px;
  }
  .u-mr-20-pc {
    margin-right: 20px;
  }
  .u-mb-20-pc {
    margin-bottom: 20px;
  }
  .u-ml-20-pc {
    margin-left: 20px;
  }
  .u-mt-25-pc {
    margin-top: 25px;
  }
  .u-mr-25-pc {
    margin-right: 25px;
  }
  .u-mb-25-pc {
    margin-bottom: 25px;
  }
  .u-ml-25-pc {
    margin-left: 25px;
  }
  .u-mt-30-pc {
    margin-top: 30px;
  }
  .u-mr-30-pc {
    margin-right: 30px;
  }
  .u-mb-30-pc {
    margin-bottom: 30px;
  }
  .u-ml-30-pc {
    margin-left: 30px;
  }
  .u-mt-35-pc {
    margin-top: 35px;
  }
  .u-mr-35-pc {
    margin-right: 35px;
  }
  .u-mb-35-pc {
    margin-bottom: 35px;
  }
  .u-ml-35-pc {
    margin-left: 35px;
  }
  .u-mt-40-pc {
    margin-top: 40px;
  }
  .u-mr-40-pc {
    margin-right: 40px;
  }
  .u-mb-40-pc {
    margin-bottom: 40px;
  }
  .u-ml-40-pc {
    margin-left: 40px;
  }
  .u-mt-45-pc {
    margin-top: 45px;
  }
  .u-mr-45-pc {
    margin-right: 45px;
  }
  .u-mb-45-pc {
    margin-bottom: 45px;
  }
  .u-ml-45-pc {
    margin-left: 45px;
  }
  .u-mt-50-pc {
    margin-top: 50px;
  }
  .u-mr-50-pc {
    margin-right: 50px;
  }
  .u-mb-50-pc {
    margin-bottom: 50px;
  }
  .u-ml-50-pc {
    margin-left: 50px;
  }
  .u-mt-55-pc {
    margin-top: 55px;
  }
  .u-mr-55-pc {
    margin-right: 55px;
  }
  .u-mb-55-pc {
    margin-bottom: 55px;
  }
  .u-ml-55-pc {
    margin-left: 55px;
  }
  .u-mt-60-pc {
    margin-top: 60px;
  }
  .u-mr-60-pc {
    margin-right: 60px;
  }
  .u-mb-60-pc {
    margin-bottom: 60px;
  }
  .u-ml-60-pc {
    margin-left: 60px;
  }
  .u-mt-65-pc {
    margin-top: 65px;
  }
  .u-mr-65-pc {
    margin-right: 65px;
  }
  .u-mb-65-pc {
    margin-bottom: 65px;
  }
  .u-ml-65-pc {
    margin-left: 65px;
  }
  .u-mt-70-pc {
    margin-top: 70px;
  }
  .u-mr-70-pc {
    margin-right: 70px;
  }
  .u-mb-70-pc {
    margin-bottom: 70px;
  }
  .u-ml-70-pc {
    margin-left: 70px;
  }
  .u-mt-75-pc {
    margin-top: 75px;
  }
  .u-mr-75-pc {
    margin-right: 75px;
  }
  .u-mb-75-pc {
    margin-bottom: 75px;
  }
  .u-ml-75-pc {
    margin-left: 75px;
  }
  .u-mt-80-pc {
    margin-top: 80px;
  }
  .u-mr-80-pc {
    margin-right: 80px;
  }
  .u-mb-80-pc {
    margin-bottom: 80px;
  }
  .u-ml-80-pc {
    margin-left: 80px;
  }
  .u-mt-85-pc {
    margin-top: 85px;
  }
  .u-mr-85-pc {
    margin-right: 85px;
  }
  .u-mb-85-pc {
    margin-bottom: 85px;
  }
  .u-ml-85-pc {
    margin-left: 85px;
  }
  .u-mt-90-pc {
    margin-top: 90px;
  }
  .u-mr-90-pc {
    margin-right: 90px;
  }
  .u-mb-90-pc {
    margin-bottom: 90px;
  }
  .u-ml-90-pc {
    margin-left: 90px;
  }
  .u-mt-95-pc {
    margin-top: 95px;
  }
  .u-mr-95-pc {
    margin-right: 95px;
  }
  .u-mb-95-pc {
    margin-bottom: 95px;
  }
  .u-ml-95-pc {
    margin-left: 95px;
  }
  .u-mt-100-pc {
    margin-top: 100px;
  }
  .u-mr-100-pc {
    margin-right: 100px;
  }
  .u-mb-100-pc {
    margin-bottom: 100px;
  }
  .u-ml-100-pc {
    margin-left: 100px;
  }
  .u-mt-105-pc {
    margin-top: 105px;
  }
  .u-mr-105-pc {
    margin-right: 105px;
  }
  .u-mb-105-pc {
    margin-bottom: 105px;
  }
  .u-ml-105-pc {
    margin-left: 105px;
  }
  .u-mt-110-pc {
    margin-top: 110px;
  }
  .u-mr-110-pc {
    margin-right: 110px;
  }
  .u-mb-110-pc {
    margin-bottom: 110px;
  }
  .u-ml-110-pc {
    margin-left: 110px;
  }
  .u-mt-115-pc {
    margin-top: 115px;
  }
  .u-mr-115-pc {
    margin-right: 115px;
  }
  .u-mb-115-pc {
    margin-bottom: 115px;
  }
  .u-ml-115-pc {
    margin-left: 115px;
  }
  .u-mt-120-pc {
    margin-top: 120px;
  }
  .u-mr-120-pc {
    margin-right: 120px;
  }
  .u-mb-120-pc {
    margin-bottom: 120px;
  }
  .u-ml-120-pc {
    margin-left: 120px;
  }
  .u-mt-125-pc {
    margin-top: 125px;
  }
  .u-mr-125-pc {
    margin-right: 125px;
  }
  .u-mb-125-pc {
    margin-bottom: 125px;
  }
  .u-ml-125-pc {
    margin-left: 125px;
  }
  .u-mt-130-pc {
    margin-top: 130px;
  }
  .u-mr-130-pc {
    margin-right: 130px;
  }
  .u-mb-130-pc {
    margin-bottom: 130px;
  }
  .u-ml-130-pc {
    margin-left: 130px;
  }
  .u-mt-135-pc {
    margin-top: 135px;
  }
  .u-mr-135-pc {
    margin-right: 135px;
  }
  .u-mb-135-pc {
    margin-bottom: 135px;
  }
  .u-ml-135-pc {
    margin-left: 135px;
  }
  .u-mt-140-pc {
    margin-top: 140px;
  }
  .u-mr-140-pc {
    margin-right: 140px;
  }
  .u-mb-140-pc {
    margin-bottom: 140px;
  }
  .u-ml-140-pc {
    margin-left: 140px;
  }
  .u-mt-145-pc {
    margin-top: 145px;
  }
  .u-mr-145-pc {
    margin-right: 145px;
  }
  .u-mb-145-pc {
    margin-bottom: 145px;
  }
  .u-ml-145-pc {
    margin-left: 145px;
  }
  .u-mt-150-pc {
    margin-top: 150px;
  }
  .u-mr-150-pc {
    margin-right: 150px;
  }
  .u-mb-150-pc {
    margin-bottom: 150px;
  }
  .u-ml-150-pc {
    margin-left: 150px;
  }
  .u-mt-155-pc {
    margin-top: 155px;
  }
  .u-mr-155-pc {
    margin-right: 155px;
  }
  .u-mb-155-pc {
    margin-bottom: 155px;
  }
  .u-ml-155-pc {
    margin-left: 155px;
  }
  .u-mt-160-pc {
    margin-top: 160px;
  }
  .u-mr-160-pc {
    margin-right: 160px;
  }
  .u-mb-160-pc {
    margin-bottom: 160px;
  }
  .u-ml-160-pc {
    margin-left: 160px;
  }
  .u-mt-165-pc {
    margin-top: 165px;
  }
  .u-mr-165-pc {
    margin-right: 165px;
  }
  .u-mb-165-pc {
    margin-bottom: 165px;
  }
  .u-ml-165-pc {
    margin-left: 165px;
  }
  .u-mt-170-pc {
    margin-top: 170px;
  }
  .u-mr-170-pc {
    margin-right: 170px;
  }
  .u-mb-170-pc {
    margin-bottom: 170px;
  }
  .u-ml-170-pc {
    margin-left: 170px;
  }
  .u-mt-175-pc {
    margin-top: 175px;
  }
  .u-mr-175-pc {
    margin-right: 175px;
  }
  .u-mb-175-pc {
    margin-bottom: 175px;
  }
  .u-ml-175-pc {
    margin-left: 175px;
  }
  .u-mt-180-pc {
    margin-top: 180px;
  }
  .u-mr-180-pc {
    margin-right: 180px;
  }
  .u-mb-180-pc {
    margin-bottom: 180px;
  }
  .u-ml-180-pc {
    margin-left: 180px;
  }
  .u-mt-185-pc {
    margin-top: 185px;
  }
  .u-mr-185-pc {
    margin-right: 185px;
  }
  .u-mb-185-pc {
    margin-bottom: 185px;
  }
  .u-ml-185-pc {
    margin-left: 185px;
  }
  .u-mt-190-pc {
    margin-top: 190px;
  }
  .u-mr-190-pc {
    margin-right: 190px;
  }
  .u-mb-190-pc {
    margin-bottom: 190px;
  }
  .u-ml-190-pc {
    margin-left: 190px;
  }
  .u-mt-195-pc {
    margin-top: 195px;
  }
  .u-mr-195-pc {
    margin-right: 195px;
  }
  .u-mb-195-pc {
    margin-bottom: 195px;
  }
  .u-ml-195-pc {
    margin-left: 195px;
  }
  .u-mt-200-pc {
    margin-top: 200px;
  }
  .u-mr-200-pc {
    margin-right: 200px;
  }
  .u-mb-200-pc {
    margin-bottom: 200px;
  }
  .u-ml-200-pc {
    margin-left: 200px;
  }
  .u-m-auto-pc {
    margin: auto;
  }
  .u-m-center-pc {
    margin-right: auto;
    margin-left: auto;
  }
  .u-mt-auto-pc {
    margin-top: auto;
  }
  .u-mr-auto-pc {
    margin-right: auto;
  }
  .u-mb-auto-pc {
    margin-bottom: auto;
  }
  .u-ml-auto-pc {
    margin-left: auto;
  }
}
@media not all and (min-width: 960px) {
  .u-mt-0-sp {
    margin-top: 0px;
  }
  .u-mr-0-sp {
    margin-right: 0px;
  }
  .u-mb-0-sp {
    margin-bottom: 0px;
  }
  .u-ml-0-sp {
    margin-left: 0px;
  }
  .u-mt-5-sp {
    margin-top: 5px;
  }
  .u-mr-5-sp {
    margin-right: 5px;
  }
  .u-mb-5-sp {
    margin-bottom: 5px;
  }
  .u-ml-5-sp {
    margin-left: 5px;
  }
  .u-mt-10-sp {
    margin-top: 10px;
  }
  .u-mr-10-sp {
    margin-right: 10px;
  }
  .u-mb-10-sp {
    margin-bottom: 10px;
  }
  .u-ml-10-sp {
    margin-left: 10px;
  }
  .u-mt-15-sp {
    margin-top: 15px;
  }
  .u-mr-15-sp {
    margin-right: 15px;
  }
  .u-mb-15-sp {
    margin-bottom: 15px;
  }
  .u-ml-15-sp {
    margin-left: 15px;
  }
  .u-mt-20-sp {
    margin-top: 20px;
  }
  .u-mr-20-sp {
    margin-right: 20px;
  }
  .u-mb-20-sp {
    margin-bottom: 20px;
  }
  .u-ml-20-sp {
    margin-left: 20px;
  }
  .u-mt-25-sp {
    margin-top: 25px;
  }
  .u-mr-25-sp {
    margin-right: 25px;
  }
  .u-mb-25-sp {
    margin-bottom: 25px;
  }
  .u-ml-25-sp {
    margin-left: 25px;
  }
  .u-mt-30-sp {
    margin-top: 30px;
  }
  .u-mr-30-sp {
    margin-right: 30px;
  }
  .u-mb-30-sp {
    margin-bottom: 30px;
  }
  .u-ml-30-sp {
    margin-left: 30px;
  }
  .u-mt-35-sp {
    margin-top: 35px;
  }
  .u-mr-35-sp {
    margin-right: 35px;
  }
  .u-mb-35-sp {
    margin-bottom: 35px;
  }
  .u-ml-35-sp {
    margin-left: 35px;
  }
  .u-mt-40-sp {
    margin-top: 40px;
  }
  .u-mr-40-sp {
    margin-right: 40px;
  }
  .u-mb-40-sp {
    margin-bottom: 40px;
  }
  .u-ml-40-sp {
    margin-left: 40px;
  }
  .u-mt-45-sp {
    margin-top: 45px;
  }
  .u-mr-45-sp {
    margin-right: 45px;
  }
  .u-mb-45-sp {
    margin-bottom: 45px;
  }
  .u-ml-45-sp {
    margin-left: 45px;
  }
  .u-mt-50-sp {
    margin-top: 50px;
  }
  .u-mr-50-sp {
    margin-right: 50px;
  }
  .u-mb-50-sp {
    margin-bottom: 50px;
  }
  .u-ml-50-sp {
    margin-left: 50px;
  }
  .u-mt-55-sp {
    margin-top: 55px;
  }
  .u-mr-55-sp {
    margin-right: 55px;
  }
  .u-mb-55-sp {
    margin-bottom: 55px;
  }
  .u-ml-55-sp {
    margin-left: 55px;
  }
  .u-mt-60-sp {
    margin-top: 60px;
  }
  .u-mr-60-sp {
    margin-right: 60px;
  }
  .u-mb-60-sp {
    margin-bottom: 60px;
  }
  .u-ml-60-sp {
    margin-left: 60px;
  }
  .u-mt-65-sp {
    margin-top: 65px;
  }
  .u-mr-65-sp {
    margin-right: 65px;
  }
  .u-mb-65-sp {
    margin-bottom: 65px;
  }
  .u-ml-65-sp {
    margin-left: 65px;
  }
  .u-mt-70-sp {
    margin-top: 70px;
  }
  .u-mr-70-sp {
    margin-right: 70px;
  }
  .u-mb-70-sp {
    margin-bottom: 70px;
  }
  .u-ml-70-sp {
    margin-left: 70px;
  }
  .u-mt-75-sp {
    margin-top: 75px;
  }
  .u-mr-75-sp {
    margin-right: 75px;
  }
  .u-mb-75-sp {
    margin-bottom: 75px;
  }
  .u-ml-75-sp {
    margin-left: 75px;
  }
  .u-mt-80-sp {
    margin-top: 80px;
  }
  .u-mr-80-sp {
    margin-right: 80px;
  }
  .u-mb-80-sp {
    margin-bottom: 80px;
  }
  .u-ml-80-sp {
    margin-left: 80px;
  }
  .u-mt-85-sp {
    margin-top: 85px;
  }
  .u-mr-85-sp {
    margin-right: 85px;
  }
  .u-mb-85-sp {
    margin-bottom: 85px;
  }
  .u-ml-85-sp {
    margin-left: 85px;
  }
  .u-mt-90-sp {
    margin-top: 90px;
  }
  .u-mr-90-sp {
    margin-right: 90px;
  }
  .u-mb-90-sp {
    margin-bottom: 90px;
  }
  .u-ml-90-sp {
    margin-left: 90px;
  }
  .u-mt-95-sp {
    margin-top: 95px;
  }
  .u-mr-95-sp {
    margin-right: 95px;
  }
  .u-mb-95-sp {
    margin-bottom: 95px;
  }
  .u-ml-95-sp {
    margin-left: 95px;
  }
  .u-mt-100-sp {
    margin-top: 100px;
  }
  .u-mr-100-sp {
    margin-right: 100px;
  }
  .u-mb-100-sp {
    margin-bottom: 100px;
  }
  .u-ml-100-sp {
    margin-left: 100px;
  }
  .u-mt-105-sp {
    margin-top: 105px;
  }
  .u-mr-105-sp {
    margin-right: 105px;
  }
  .u-mb-105-sp {
    margin-bottom: 105px;
  }
  .u-ml-105-sp {
    margin-left: 105px;
  }
  .u-mt-110-sp {
    margin-top: 110px;
  }
  .u-mr-110-sp {
    margin-right: 110px;
  }
  .u-mb-110-sp {
    margin-bottom: 110px;
  }
  .u-ml-110-sp {
    margin-left: 110px;
  }
  .u-mt-115-sp {
    margin-top: 115px;
  }
  .u-mr-115-sp {
    margin-right: 115px;
  }
  .u-mb-115-sp {
    margin-bottom: 115px;
  }
  .u-ml-115-sp {
    margin-left: 115px;
  }
  .u-mt-120-sp {
    margin-top: 120px;
  }
  .u-mr-120-sp {
    margin-right: 120px;
  }
  .u-mb-120-sp {
    margin-bottom: 120px;
  }
  .u-ml-120-sp {
    margin-left: 120px;
  }
  .u-mt-125-sp {
    margin-top: 125px;
  }
  .u-mr-125-sp {
    margin-right: 125px;
  }
  .u-mb-125-sp {
    margin-bottom: 125px;
  }
  .u-ml-125-sp {
    margin-left: 125px;
  }
  .u-mt-130-sp {
    margin-top: 130px;
  }
  .u-mr-130-sp {
    margin-right: 130px;
  }
  .u-mb-130-sp {
    margin-bottom: 130px;
  }
  .u-ml-130-sp {
    margin-left: 130px;
  }
  .u-mt-135-sp {
    margin-top: 135px;
  }
  .u-mr-135-sp {
    margin-right: 135px;
  }
  .u-mb-135-sp {
    margin-bottom: 135px;
  }
  .u-ml-135-sp {
    margin-left: 135px;
  }
  .u-mt-140-sp {
    margin-top: 140px;
  }
  .u-mr-140-sp {
    margin-right: 140px;
  }
  .u-mb-140-sp {
    margin-bottom: 140px;
  }
  .u-ml-140-sp {
    margin-left: 140px;
  }
  .u-mt-145-sp {
    margin-top: 145px;
  }
  .u-mr-145-sp {
    margin-right: 145px;
  }
  .u-mb-145-sp {
    margin-bottom: 145px;
  }
  .u-ml-145-sp {
    margin-left: 145px;
  }
  .u-mt-150-sp {
    margin-top: 150px;
  }
  .u-mr-150-sp {
    margin-right: 150px;
  }
  .u-mb-150-sp {
    margin-bottom: 150px;
  }
  .u-ml-150-sp {
    margin-left: 150px;
  }
  .u-mt-155-sp {
    margin-top: 155px;
  }
  .u-mr-155-sp {
    margin-right: 155px;
  }
  .u-mb-155-sp {
    margin-bottom: 155px;
  }
  .u-ml-155-sp {
    margin-left: 155px;
  }
  .u-mt-160-sp {
    margin-top: 160px;
  }
  .u-mr-160-sp {
    margin-right: 160px;
  }
  .u-mb-160-sp {
    margin-bottom: 160px;
  }
  .u-ml-160-sp {
    margin-left: 160px;
  }
  .u-mt-165-sp {
    margin-top: 165px;
  }
  .u-mr-165-sp {
    margin-right: 165px;
  }
  .u-mb-165-sp {
    margin-bottom: 165px;
  }
  .u-ml-165-sp {
    margin-left: 165px;
  }
  .u-mt-170-sp {
    margin-top: 170px;
  }
  .u-mr-170-sp {
    margin-right: 170px;
  }
  .u-mb-170-sp {
    margin-bottom: 170px;
  }
  .u-ml-170-sp {
    margin-left: 170px;
  }
  .u-mt-175-sp {
    margin-top: 175px;
  }
  .u-mr-175-sp {
    margin-right: 175px;
  }
  .u-mb-175-sp {
    margin-bottom: 175px;
  }
  .u-ml-175-sp {
    margin-left: 175px;
  }
  .u-mt-180-sp {
    margin-top: 180px;
  }
  .u-mr-180-sp {
    margin-right: 180px;
  }
  .u-mb-180-sp {
    margin-bottom: 180px;
  }
  .u-ml-180-sp {
    margin-left: 180px;
  }
  .u-mt-185-sp {
    margin-top: 185px;
  }
  .u-mr-185-sp {
    margin-right: 185px;
  }
  .u-mb-185-sp {
    margin-bottom: 185px;
  }
  .u-ml-185-sp {
    margin-left: 185px;
  }
  .u-mt-190-sp {
    margin-top: 190px;
  }
  .u-mr-190-sp {
    margin-right: 190px;
  }
  .u-mb-190-sp {
    margin-bottom: 190px;
  }
  .u-ml-190-sp {
    margin-left: 190px;
  }
  .u-mt-195-sp {
    margin-top: 195px;
  }
  .u-mr-195-sp {
    margin-right: 195px;
  }
  .u-mb-195-sp {
    margin-bottom: 195px;
  }
  .u-ml-195-sp {
    margin-left: 195px;
  }
  .u-mt-200-sp {
    margin-top: 200px;
  }
  .u-mr-200-sp {
    margin-right: 200px;
  }
  .u-mb-200-sp {
    margin-bottom: 200px;
  }
  .u-ml-200-sp {
    margin-left: 200px;
  }
  .u-m-auto-sp {
    margin: auto;
  }
  .u-m-center-sp {
    margin-right: auto;
    margin-left: auto;
  }
  .u-mt-auto-sp {
    margin-top: auto;
  }
  .u-mr-auto-sp {
    margin-right: auto;
  }
  .u-mb-auto-sp {
    margin-bottom: auto;
  }
  .u-ml-auto-sp {
    margin-left: auto;
  }
}