@charset "UTF-8";
div, p, ul, li, table, table tr td, table tr th, table tr td, dl, dt, dd, img, nav, footer { -webkit-box-sizing: border-box; box-sizing: border-box; }

/*
h2, h3, dl dt, nav > ul li {
	font-feature-settings: "palt";
	letter-spacing: 0.08em;
}
*/
html { font-size: 62.5%; /* 10px */ }

body { font-family: "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*	font-family: source-han-sans-japanese,sans-serif;*/ text-align: center; line-height: 1.8; word-break: break-all; font-size: 1.6em; color: #333; -webkit-text-size-adjust: 100%; /*スマホを横向きにした時用*/ background: url("../img/dia.png"), #fcf2d4; background-size: 200px; letter-spacing: 0.06em; }

@media screen and (max-width: 1099px) { html { font-size: 56.25%; /* 10px */ } }

a { color: #bf7200; }

a:hover { text-decoration: none; }

a.mouse_over, a.mouse_over2 { -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

a.mouse_over:hover { opacity: 0.7; }

a.mouse_over2:hover { opacity: 0.85; }

.bold { font-weight: 700; }

.bold-black { font-weight: 900; }

.f12 { font-size: 1.2rem; }

.f20 { font-size: 2rem; line-height: 1.6; }

#about a[target=_blank]::after { font-family: "Font Awesome 5 Free"; content: "\f35d"; font-weight: 900; display: inline-block; /* アイコンに下線がつくのを防止 */ margin-left: 0.5em; }

#content { overflow-x: hidden; }

#content img { width: 100%; }

#wrap img { width: 100%; }

/* -------------------------------------------------------------------------------------------------------------------
TOP
------------------------------------------------------------------------------------------------------------------- */
#top { position: relative; background: #b00e31; padding: 136% 0 0; }

#top #topImg, #top #topLogo, #top #topInfo { position: absolute; margin: 0 auto; left: 0; }

#top #topImg { top: 0; width: 100%; max-width: 1100px; overflow: hidden; }

#top #topLogo { bottom: 10%; right: 0; width: 70%; max-width: 700px; }

#top #topInfo { bottom: 2%; right: 0; width: 67%; max-width: 700px; }

#top-pc { position: relative; letter-spacing: -0.5em; text-align: left; background: url("../img/top-pc-sidebar-bg.png"), -webkit-gradient(linear, left top, left bottom, from(#b00e31), color-stop(40%, #840d2d), to(#6b0b24)); background: url("../img/top-pc-sidebar-bg.png"), -webkit-linear-gradient(top, #b00e31, #840d2d 40%, #6b0b24); background: url("../img/top-pc-sidebar-bg.png"), -o-linear-gradient(top, #b00e31, #840d2d 40%, #6b0b24); background: url("../img/top-pc-sidebar-bg.png"), linear-gradient(to bottom, #b00e31, #840d2d 40%, #6b0b24); -webkit-animation: bgiLoop 12s linear infinite; animation: bgiLoop 12s linear infinite; }

#top-pc #topImg-pc { display: inline-block; width: 70%; overflow: hidden; vertical-align: bottom; }

#top-pc #topContainer { letter-spacing: normal; display: inline-block; vertical-align: top; width: 30%; }

#top-pc #topContainer #topLogo-pc { width: 70%; max-width: 700px; margin: 180px auto 0; }

#top-pc #topContainer #topInfo-pc { width: 67%; max-width: 700px; margin: 50px auto 0; }

@-webkit-keyframes bgiLoop { 0% { background-position: 0 0; }
  100% { background-position: 444px 0; } }

@keyframes bgiLoop { 0% { background-position: 0 0; }
  100% { background-position: 444px 0; } }

/* -------------------------------------------------------------------------------------------------------------------
animation
------------------------------------------------------------------------------------------------------------------- */
/* scrollin */
.fadein { opacity: 0; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; }

.fadein.scrollin { opacity: 1; }

.fadein_up { opacity: 0; -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }

.fadein_up.scrollin { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }

.slide-anime.scrollin { -webkit-animation: slide2 .5s ease-out .6s; animation: slide2 .5s ease-out .6s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

.fadein1 { -webkit-animation-delay: .2s; animation-delay: .2s; }

.fadein2 { -webkit-animation-delay: .7s; animation-delay: .7s; }

.fadein3 { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }

.fadein4 { -webkit-animation-delay: 3.4s; animation-delay: 3.4s; }

.fadein6 { -webkit-animation-delay: 4s; animation-delay: 4s; }

/* animate.css */
@-webkit-keyframes fadeInUp { from { opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0); }
  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
@keyframes fadeInUp { from { opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0); }
  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }

/* top */
/* ==================== sp ==================== */
.parts p { position: absolute; }

/* parts01 */
.parts01a { top: 20%; left: 5%; width: 30px; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }

.parts01a { -webkit-animation: f1 3s linear .1s infinite; animation: f1 3s linear .1s infinite; }

@-webkit-keyframes f1 { 0% { opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; } }

@keyframes f1 { 0% { opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; } }

@-webkit-keyframes f2 { 0% { opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  40% { opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  60% { opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% { opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5); } }

@keyframes f2 { 0% { opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  40% { opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  60% { opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% { opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5); } }

/* parts02 */
.parts02a { bottom: 4%; right: 5%; width: 25px; -webkit-animation: f1 3s linear .5s infinite; animation: f1 3s linear .5s infinite; }

/* parts03 */
.parts03a { top: 10%; right: 15%; width: 32px; -webkit-animation: f1 3s linear .9s infinite; animation: f1 3s linear .9s infinite; }

/* parts04 */
.parts04a { top: 40%; left: 3%; width: 30px; -webkit-animation: f1 2.5s linear .1s infinite; animation: f1 2.5s linear .1s infinite; }

/* parts05 */
.parts05a { bottom: 18%; left: 2%; width: 30px; -webkit-animation: f1 3s linear .4s infinite; animation: f1 3s linear .4s infinite; }

/* parts06 */
.parts06a { top: 2%; left: 18%; width: 20px; -webkit-animation: f1 3s linear infinite; animation: f1 3s linear infinite; }

/* parts07 */
.parts07a { top: 1%; left: 2%; width: 30px; -webkit-animation: f1 2.5s linear 1.1s infinite; animation: f1 2.5s linear 1.1s infinite; -webkit-transform: rotate(280deg); -ms-transform: rotate(280deg); transform: rotate(280deg); }

/* parts08 */
.parts08a { bottom: 3%; left: 10%; width: 12px; -webkit-animation: f1 2.8s linear 1.4s infinite; animation: f1 2.8s linear 1.4s infinite; }

/* parts09 */
.parts09a { top: 10%; right: 4%; width: 40px; -webkit-animation: f2 2s linear .8s infinite; animation: f2 2s linear .8s infinite; }

/* parts10 */
.parts10a { top: 4%; left: 8%; width: 30px; -webkit-animation: f2 2s linear 1.1s infinite; animation: f2 2s linear 1.1s infinite; }

/* parts11 */
.parts11a { top: 7%; left: 2%; width: 50px; -webkit-animation: f2 2.2s linear 1.5s infinite; animation: f2 2.2s linear 1.5s infinite; }

/* parts12 */
.parts12a { bottom: 6%; right: 8%; width: 40px; -webkit-animation: f2 2.7s linear 1.2s infinite; animation: f2 2.7s linear 1.2s infinite; }

/* parts13 */
.parts13a { top: 1%; right: 30%; width: 50px; -webkit-animation: f2 2.7s linear 2.2s infinite; animation: f2 2.7s linear 2.2s infinite; }

/* parts14 */
.parts14a { bottom: 25%; right: 23%; width: 50px; -webkit-animation: f2 2.7s linear 1.3s infinite; animation: f2 2.7s linear 1.3s infinite; }

/* parts15 */
.parts15a { bottom: 3%; left: 2%; width: 40px; -webkit-animation: f2 3.7s linear 1.3s infinite; animation: f2 3.7s linear 1.3s infinite; }

/* ==================== pc ==================== */
/* parts01 */
.parts01b { top: 300px; left: 33%; width: 50px; -webkit-animation: r1 3s linear .1s infinite; animation: r1 3s linear .1s infinite; }

@-webkit-keyframes r1 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@keyframes r1 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@-webkit-keyframes r2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }

@keyframes r2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }

/* parts02 */
.parts02b { bottom: 100px; right: 8%; width: 50px; -webkit-animation: r1 3s linear .1s infinite; animation: r1 3s linear .1s infinite; }

/* parts03 */
.parts03b { bottom: 400px; left: 43%; width: 50px; -webkit-animation: r2 3s linear .1s infinite; animation: r2 3s linear .1s infinite; }

/* parts04 */
.parts04b { top: 90px; right: 14%; width: 30px; -webkit-animation: r2 3s linear .1s infinite; animation: r2 3s linear .1s infinite; }

/* parts05 */
.parts05b { bottom: 240px; left: 28%; width: 130px; }

/* parts06 */
.parts06b { top: 35%; right: 2%; width: 90px; }

/* parts07 */
.parts07b { top: 4%; left: 34%; width: 120px; -webkit-animation: f2 2s linear .1s infinite; animation: f2 2s linear .1s infinite; }

/* parts08 */
.parts08b { top: 8%; right: 20%; width: 100px; -webkit-animation: f2 2s linear .1s infinite; animation: f2 2s linear .1s infinite; }

/* parts09 */
.parts09b { top: 13%; right: 6%; width: 120px; -webkit-animation: f2 1.5s linear .8s infinite; animation: f2 1.5s linear .8s infinite; }

/* parts10 */
.parts10b { bottom: 47%; left: 28%; width: 120px; -webkit-animation: f2 2s linear 1.1s infinite; animation: f2 2s linear 1.1s infinite; }

/* parts11 */
.parts11b { bottom: 3%; left: 38%; width: 100px; -webkit-animation: f2 2.2s linear 1.5s infinite; animation: f2 2.2s linear 1.5s infinite; }

/* parts12 */
.parts12b { bottom: 2%; right: 12%; width: 80px; -webkit-animation: f2 3.2s linear 1.2s infinite; animation: f2 3.2s linear 1.2s infinite; }

/* parts13 */
.parts13b { bottom: 22%; right: 1%; width: 80px; -webkit-animation: f2 2.7s linear 2.2s infinite; animation: f2 2.7s linear 2.2s infinite; }

/* parts14 */
.parts14b { bottom: 25%; right: 23%; width: 70px; -webkit-animation: f2 2.7s linear 1.3s infinite; animation: f2 2.7s linear 1.3s infinite; }

/* parts15 */
.parts15b { top: 2%; left: 44%; width: 60px; -webkit-animation: f2 1.6s linear .1s infinite; animation: f2 1.6s linear .1s infinite; }

/* zoom */
.zoom { -webkit-animation: zoom 1.5s 2s forwards; animation: zoom 1.5s 2s forwards; -webkit-transform: scale3d(1.11, 1.11, 1.11); transform: scale3d(1.11, 1.11, 1.11); }

/* pc-zoom */
.zoom1 { -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-duration: 2.3s; animation-duration: 2.3s; }

@-webkit-keyframes zoom { 100% { opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes zoom { 100% { opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@-webkit-keyframes slide2 { 0% { opacity: 0;
    -webkit-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0); }
  100% { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slide2 { 0% { opacity: 0;
    -webkit-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0); }
  100% { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

/*  IEのみタイミング変更 */
@media all and (-ms-high-contrast: none) { .fadein4 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
  .zoom1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; -webkit-animation-duration: 1.8s; animation-duration: 1.8s; } }

/* ローディング画面の背景 */
.loading { position: fixed; width: 100vw; height: 100vh; top: 0px; left: 0px; background: #840d2d; z-index: 99999; }

/* アニメーション */
.loading-img, .loading-img2 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 60%; max-width: 420px; }

.loading-img { -webkit-animation: l1 1s linear 1.3s forwards; animation: l1 1s linear 1.3s forwards; z-index: 100; }

.loading-img2 { -webkit-animation: l2 1s linear 1.3s forwards; animation: l2 1s linear 1.3s forwards; z-index: 99; opacity: 0; }

@-webkit-keyframes l1 { 0% { opacity: 1; }
  100% { opacity: 0; } }

@keyframes l1 { 0% { opacity: 1; }
  100% { opacity: 0; } }

@-webkit-keyframes l2 { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes l2 { 0% { opacity: 0; }
  100% { opacity: 1; } }

/*  IEのみloading非表示 */
@media all and (-ms-high-contrast: none) { .loading { display: none; } }

/* -------------------------------------------------------------------------------------------------------------------
nav
------------------------------------------------------------------------------------------------------------------- */
nav { background: #ffd34c; border-bottom: 1px solid #c59d21; }

nav ul { width: 100%; margin: 0 auto 0; font-size: 0; text-align: left; letter-spacing: -1px; border-top: 1px solid #d9b924; }

nav ul li { display: inline-block; text-align: center; font-size: 1.5rem; color: #e6bccc; width: 25%; line-height: 54px; letter-spacing: 0; border-right: 1px solid #d9b924; vertical-align: middle; }

nav ul li a { display: block; text-decoration: none; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

nav ul li a:hover { opacity: 0.5; }

nav ul li img { width: 100%; }

nav ul li:nth-of-type(1) { border-left: 1px solid #d9b924; }

#nav-pctop ul { max-width: 480px; margin: 70px auto 0; padding: 0 36px; letter-spacing: -0.5em; }

#nav-pctop ul li { display: block; width: 80%; margin: 0 auto; padding: 15px 10px; letter-spacing: normal; }

.nav-pc { text-align: left; height: 70px; background: -moz-linear-gradient(to right, #840d2d, #b00e31 40%, #840d2d); background: -webkit-linear-gradient(to right, #840d2d, #b00e31 40%, #840d2d); background: -webkit-gradient(linear, left top, right top, from(#840d2d), color-stop(40%, #b00e31), to(#840d2d)); background: -webkit-linear-gradient(left, #840d2d, #b00e31 40%, #840d2d); background: -o-linear-gradient(left, #840d2d, #b00e31 40%, #840d2d); background: linear-gradient(to right, #840d2d, #b00e31 40%, #840d2d); }

.nav-pc .navpc-left { position: relative; float: left; }

.nav-pc .navpc-left #navLogo-pc { position: absolute; top: 15px; left: 15px; }

.nav-pc .navpc-left #navLogo-pc img { width: 110px; padding: 0 15px 0; }

.nav-pc .navpc-left #navInfo-pc { position: absolute; top: 16px; left: 130px; display: none; }

.nav-pc .navpc-left #navInfo-pc img { width: 200px; padding: 0 20px 0 0; }

.nav-pc ul { float: right; max-width: 800px; letter-spacing: -0.5em; padding-right: 10px; }

.nav-pc ul li { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; width: 160px; padding: 15px 10px 15px; letter-spacing: normal; }

/* -------------------------------------------------------------------------------------------------------------------
common
------------------------------------------------------------------------------------------------------------------- */
.content_width { width: 94%; margin-left: auto; margin-right: auto; }

header#inner { position: relative; background: url(../img/header_sp.png) no-repeat center center; background-size: cover; width: 100%; height: 100%; padding: 25% 0 0; }

header#inner img.header_logo { position: absolute; top: 0; bottom: 0; right: 10%; margin: auto; width: 30%; max-width: 270px; }

h2 { margin: 3.5rem auto 1rem; }

h2 img { width: 65% !important; max-width: 500px; }

.titleArea { margin-top: 4rem; padding: 1.5rem 0 1.5rem; border-radius: 8px 8px 0 0; background: #bf7200; /* #b00e31 */ }

.titleArea h3 { text-align: center; color: #FFF; }

.contentArea { text-align: left; padding: 2rem 3% 2.5rem; border-left: 1px solid #f7f1e1; border-right: 1px solid #f7f1e1; border-bottom: 1px solid #f7f1e1; font-size: 1.5rem; background: #FFF; }

.contentArea p { margin-bottom: 2em; line-height: 2; }

/* -------------------------------------------------------------------------------------------------------------------
header
------------------------------------------------------------------------------------------------------------------- */
#header { background: #b00e31; }

#header #header-inner { width: 100%; max-width: 1000px; margin: 0 auto; padding: 10px 5%; }

#header #header-inner #topLogo, #header #header-inner #topInfo { display: inline-block; vertical-align: middle; padding: 0 5px 0 0; }

#header #header-inner #topLogo { width: 22%; }

#header #header-inner #topInfo { width: 40%; }

#header-nav { z-index: 9999; }

/* -------------------------------------------------------------------------------------------------------------------
about
------------------------------------------------------------------------------------------------------------------- */
#about { margin: 4rem 3% 0; text-align: left; padding: 3rem 3% 3.5rem; border-left: 1px solid #f7f1e1; border-right: 1px solid #f7f1e1; border-bottom: 1px solid #f7f1e1; font-size: 1.5rem; background: #FFF; }

#about table.info01 tr th, #about table.info01 tr td, #about table.info02 tr th, #about table.info02 tr td { font-size: 1.5rem; padding: 10px; vertical-align: top; }

#about table.info01 { width: 100%; max-width: 1050px; margin: 0 auto; }

#about table.info01 tr th, #about table.info01 tr td { display: block; width: 100%; text-align: left; }

#about table.info01 tr th { font-weight: 700; border-bottom: 1px solid #e0dbcc; color: #7a674c; }

#about table.info01 tr td { border-bottom: 1px solid #e0dbcc; }

#about table.info01 tr td a.hp { margin-bottom: 0.5rem; vertical-align: bottom; }

#about table.info01 tr td .address { display: block; margin-top: 0.5rem; }

#about table.info02 { width: 94%; max-width: 1050px; margin: 0 auto; overflow: hidden; }

#about table.info02 tr th, #about table.info02 tr td { text-align: left; }

#about table.info02 tr th { font-weight: 700; border-bottom: 1px solid #e0dbcc; width: 30%; color: #7a674c; }

#about table.info02 tr td { border-bottom: 1px solid #e0dbcc; width: 70%; }

#about table.info02 tr.syusai img { width: 28%; max-width: 95px; }

#about .event_tit { line-height: 1; font-size: 2rem; }

#about .g-map { position: relative; margin: 1.5rem auto 0; padding-bottom: 56.25%; height: 0; overflow: hidden; border: 1px solid #e0dbcc; }

#about .g-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#about .sub-info { display: block; font-size: 1.4rem; color: #B60000; margin-top: 0.5rem; }

/* -------------------------------------------------------------------------------------------------------------------
schedule, ticket                                                                                                       
------------------------------------------------------------------------------------------------------------------- */
#schedule .schedule-img { width: 100%; max-width: 500px; margin: 2rem auto; }

#schedule .schedule-txt, #schedule .schedule-cast { text-align: center; }

#schedule .mark01 { color: #004ed8; }

#schedule .mark02 { color: #ea1836; }

#schedule .attention { text-align: center; margin-top: 1rem; margin-bottom: 0; font-size: 1.2rem; color: #777; }

#ticket { width: 94%; max-width: 1050px; margin: 0 auto; }

#ticket table.playguide { width: 100%; margin: 0 auto; border-top: 1px solid #e0dbcc; }

#ticket table.playguide tr th, #ticket table.playguide tr td { text-align: left; padding: 1rem .8rem; font-size: 1.4rem; vertical-align: middle; }

#ticket table.playguide tr th { width: 35%; font-weight: 700; border-bottom: 1px solid #e0dbcc; background: #f7f6f2; }

#ticket table.playguide tr th img { width: 100%; max-width: 100px; }

#ticket table.playguide tr td { width: 65%; padding: 1rem 1rem; line-height: 1.5; border-bottom: 1px solid #e0dbcc; }

#ticket table.playguide tr td a { display: inline-block; padding: 5px 12px; border-radius: 4px; background: #d21313; color: #FFF; text-decoration: none; vertical-align: bottom; }

#ticket table.playguide tr td a::after { font-family: "Font Awesome 5 Free"; content: "\f138"; font-weight: 900; display: inline-block; /* アイコンに下線がつくのを防止 */ margin-left: 0.5em; }

#ticket .pg-title { margin: 4rem auto 1rem; text-align: center; font-size: 2rem; font-weight: 700; padding: .5rem 2rem; /*横の大きさ*/ background: #d1ab43; /*塗りつぶし色*/ color: #FFF; /*文字色*/ -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 30px; }

#ticket .pg-title:nth-of-type(1) { margin-top: 0; }

#ticket .sub-info { display: block; font-size: 1.2rem; color: #B60000; margin-top: 1rem; }

#ticket #price .price-box { text-align: center; }

#ticket #price .price-box .price-s, #ticket #price .price-box .price-a { display: inline-block; font-weight: 700; }

#ticket #price .price-box .price-s .f20, #ticket #price .price-box .price-a .f20 { padding: 0 .5rem 0 0.8rem; }

#ticket #price .price-box .price-s { padding-right: 2.5rem; }

#ticket #price .price-box p { text-align: center; margin-bottom: 0; }

.indent05 { display: block; text-indent: -0.6em; }

/* -------------------------------------------------------------------------------------------------------------------
story
------------------------------------------------------------------------------------------------------------------- */
.story-box, .history-box { position: relative; width: 94%; max-width: 1050px; margin: 0 auto; text-align: left; }

.story-wrap .contentArea { text-align: center; }

.story-wrap .contentArea p:nth-of-type(4) { margin-bottom: 0; }

.history-wrap .contentArea { text-align: center; }

.history-wrap .contentArea p { margin-bottom: 0 !important; }

/* -------------------------------------------------------------------------------------------------------------------
modal
------------------------------------------------------------------------------------------------------------------- */
.modal { display: none; height: 100vh; position: fixed; top: 0; width: 100%; z-index: 99999; }

.modal__bg { background: rgba(0, 0, 0, 0.8); height: 100vh; position: absolute; top: 0; left: 0; width: 100%; z-index: 99998; }

.modal__content { background: #fff; left: 50%; padding: 7% 6%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 85%; max-width: 900px; max-height: 65%; z-index: 99999; overflow: scroll; }

.modal__content h6 { font-size: 1.9rem; margin: 0 auto 2rem; }

.modal__content p { font-size: 1.35rem; text-align: justify; }

.modal__content p.castInfo01 { margin-bottom: 1.5rem; }

.modal__content p.castInfo02 { margin: 2rem 0 2.5rem; padding: 1.4rem; background: #f2efe6; }

.modal__content p.castInfo02 span.works { display: block; margin-bottom: .5rem; font-weight: 700; font-size: 1.4rem; text-indent: -0.5em; letter-spacing: 0.15em; }

.modal__content .modal__txt { text-align: left !important; }

.modal__content a.js-modal-close { display: inline-block; text-decoration: none; font-size: 1.4rem; color: #b98b46; border: 1px solid #b98b46; padding: .6rem 1.8rem; line-height: 1; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }

.modal__content a.js-modal-close:hover { opacity: 0.6; }

.modal__content a.js-modal-close::before { font-family: "Font Awesome 5 Free"; content: "\f00d"; font-weight: 900; display: inline-block; /* アイコンに下線がつくのを防止 */ margin-right: 0.5em; }

/* close button */
.close_cross { position: absolute; top: 18px; right: 18px; width: 80px; height: 80px; z-index: 99999; -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; -o-transition: transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; }

.close_cross:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.close_cross:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

.close_cross:before, .close_cross:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: block; content: ""; width: 80px; height: 2px; background: #FFF; -webkit-transition: background .4s ease; -o-transition: background .4s ease; transition: background .4s ease; }

.close_cross:hover { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

/* -------------------------------------------------------------------------------------------------------------------
footer                                                                                                       
------------------------------------------------------------------------------------------------------------------- */
footer { background: url("../img/bg-stripe.png") #b00e31; width: 100%; text-align: center; font-size: 0.8em; line-height: 1.5; margin-top: 4rem; }

footer .footer-inner { width: 100%; margin: 0 auto; }

footer.footer-top { margin-top: 0; }

footer .BacktoTop { margin: 2rem auto 4rem; }

footer .BacktoTop a { display: block; width: 40%; max-width: 180px; margin: 0 auto; }

div#haro_root_element { overflow: hidden; }

.sns-archive { max-width: 850px; margin: 0 auto !important; padding: 20px 0 !important; width: 94%; font-weight: 400; font-style: normal; background-color: transparent !important; -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0) !important; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0) !important; }

.sns-archive .sns .snstitle { font-size: 2rem !important; color: #FFF; }

/* Page Top
=================================== */
#page-top { position: fixed; bottom: 12px; right: 15px; display: block; z-index: 5; width: 20%; max-width: 90px; }

#page-top a img { width: 100%; }

#page-top a:hover { opacity: 0.7; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }

/* -------------------------------------------------------------------------------------------------------------------
Tablet&SP                                                                                                        
------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1099px) { .pc { display: none; }
  .sp { display: block; }
  @-webkit-keyframes slide { 0% { opacity: 0;
      -webkit-transform: translate3d(200px, 0, 0);
      transform: translate3d(200px, 0, 0); }
    100% { opacity: 1;
      -webkit-transform: translate3d(30px, 0, 0);
      transform: translate3d(30px, 0, 0); } }
  @keyframes slide { 0% { opacity: 0;
      -webkit-transform: translate3d(200px, 0, 0);
      transform: translate3d(200px, 0, 0); }
    100% { opacity: 1;
      -webkit-transform: translate3d(30px, 0, 0);
      transform: translate3d(30px, 0, 0); } } }

@media screen and (max-width: 599px) { .contentArea { font-size: 1.4rem; }
  #about table.info01 tr th, #about table.info01 tr td, #about table.info02 tr th, #about table.info02 tr td { font-size: 1.4rem; } }

@media screen and (max-width: 399px) { .slide-annie { opacity: 0; position: absolute; top: -12%; right: 0; width: 45% !important; -webkit-animation: slide .5s ease-out .6s; animation: slide .5s ease-out .6s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
  .slide-cast { opacity: 0; position: absolute; top: -5%; left: 0; width: 29% !important; -webkit-animation: slide2 .5s ease-out 1.1s; animation: slide2 .5s ease-out 1.1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); }
  .slide-star { opacity: 0; position: absolute; bottom: -30px; left: -10px; width: 22% !important; } }

@media screen and (min-width: 400px) and (max-width: 599px) { .slide-annie { opacity: 0; position: absolute; top: -12%; right: 0; width: 36% !important; -webkit-animation: slide .5s ease-out .6s; animation: slide .5s ease-out .6s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
  .slide-cast { opacity: 0; position: absolute; top: -5%; left: 0; width: 23% !important; -webkit-animation: slide2 .5s ease-out 1.1s; animation: slide2 .5s ease-out 1.1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); }
  .slide-star { opacity: 0; position: absolute; top: -8%; left: -10px; width: 17% !important; } }

@media screen and (min-width: 600px) and (max-width: 1098px) { .slide-annie { display: none; }
  .slide-cast { display: none; }
  .slide-star { display: none; } }

/* -------------------------------------------------------------------------------------------------------------------
640px-                                                                                                           
------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 640px) { nav ul { width: 640px; font-size: 0; text-align: left; letter-spacing: -1px; } }

/* -------------------------------------------------------------------------------------------------------------------
961px-                                                                                                           
------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1100px) { .pc { display: block; }
  .sp { display: none; }
  body { background-size: 300px; }
  .sns-archive { margin: 0 auto 40px !important; }
  .sns-archive .sns .snstitle { margin-bottom: 10px; font-size: 16px; font-weight: 700; text-align: center; }
  .sns li a { margin: 5px 15px !important; }
  #header-nav { background: #b00e31; }
  nav { display: inline-block; }
  nav ul { width: 560px; font-size: 0; text-align: left; letter-spacing: -1px; }
  nav ul li:nth-of-type(4) { border-right: none; }
  /* common */
  .content_width { max-width: 1050px; margin-left: auto; margin-right: auto; }
  header#inner { height: 250px; background: url(../img/header_pc.png) no-repeat center center; background-size: 100%; padding: 0; }
  header#inner img.header_logo { position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 30%; max-width: 270px; }
  h2 { font-size: 40px; margin: 80px auto 60px; }
  .titleArea { margin-top: 80px; padding: 2rem 0 2rem; border-radius: 8px 8px 0 0; }
  .titleArea h3 { text-align: center; color: #FFF; font-size: 24px; }
  .contentArea { text-align: left; padding: 40px 60px; font-size: 1.6rem; }
  .contentArea p { margin-bottom: 2em; line-height: 2; }
  /* top */
  #top #topLogo { bottom: 200px; }
  #top #topInfo { bottom: 70px; }
  /* about */
  #about { max-width: 1050px; margin: 80px auto 0; padding: 50px 3% 50px; }
  #about table.info01 tr th, #about table.info01 tr td, #about table.info02 tr th, #about table.info02 tr td { font-size: 1.6rem; }
  #about table.info01 tr th, #about table.info02 tr th { width: 25%; }
  #about table.info01 tr td, #about table.info02 tr td { width: 74%; }
  #about table.info01 tr { border-bottom: 1px solid #e0dbcc; }
  #about table.info01 tr th, #about table.info01 tr td { padding: 20px 15px; line-height: 2; border-bottom: none; }
  #about table.info01 tr th { display: inline-block; white-space: nowrap; }
  #about table.info01 tr td { display: inline-block; }
  #about table.info02 tr th, #about table.info02 tr td { padding: 20px 15px; line-height: 2; }
  #about table.info02 tr th { white-space: nowrap; }
  #about .g-map { padding-bottom: 0; height: 350px; }
  /* schedule */
  #schedule .contentArea { text-align: center; }
  /* ticket */
  #ticket table.playguide tr th, #ticket table.playguide tr td { padding: 15px 15px; }
  #ticket .price-s .f20, #ticket .price-a .f20 { font-size: 3rem; }
  #ticket .pg-title { margin: 70px auto 30px; }
  #ticket .pg-title:nth-of-type(1) { margin-top: 10px; }
  .slide-annie, .slide-cast, .slide-star { opacity: 0; position: absolute; }
  .slide-annie { top: -130px; right: -380px; width: 600px !important; -webkit-animation: slide .5s ease-out .6s; animation: slide .5s ease-out .6s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
  .slide-cast { bottom: -30px; left: -280px; width: 380px !important; -webkit-animation: slide2 .5s ease-out 1.1s; animation: slide2 .5s ease-out 1.1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); }
  .slide-star { bottom: -100px; left: -200px; width: 330px !important; }
  @-webkit-keyframes slide { 0% { opacity: 0;
      -webkit-transform: translate3d(170px, 0, 0);
      transform: translate3d(170px, 0, 0); }
    100% { opacity: 1;
      -webkit-transform: translate3d(0px, 0, 0);
      transform: translate3d(0px, 0, 0); } }
  @keyframes slide { 0% { opacity: 0;
      -webkit-transform: translate3d(170px, 0, 0);
      transform: translate3d(170px, 0, 0); }
    100% { opacity: 1;
      -webkit-transform: translate3d(0px, 0, 0);
      transform: translate3d(0px, 0, 0); } }
  .story-wrap .contentArea { font-size: 18px; }
  .history-wrap .contentArea { font-size: 1.7rem; }
  /*  modal */
  .modal__content { padding: 70px 80px; }
  .modal__content h6 { font-size: 3rem; }
  .modal__content h6 span { font-size: 1.8rem; }
  .modal__content p { font-size: 1.6rem; text-align: justify; }
  .modal__content p.castInfo02 { margin: 30px 0 45px; padding: 25px 25px; }
  .modal__content p.castInfo02 span.works { margin-bottom: .5rem; font-size: 1.6rem; }
  /* footer */
  footer { padding: 40px 0 30px; margin: 110px auto 0; }
  footer .copyright a { color: #FFF; text-decoration: none; }
  footer .BacktoTop { margin-bottom: 4rem; }
  footer .BacktoTop a { display: inline-block; margin: 0 auto; }
  footer .BacktoTop img { width: 50%; max-width: 200px; } }