@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
body {background:#000;color:#fff;text-align: center;
  font-family: 'Noto Serif JP', serif;
    background-image: url(img/omote_back.jpg);
    background-size: 400% auto;
  }
  @media screen and (min-width:750px) {
    body {background-size: 150% auto;}
  }
img {width:100%;height:auto;}

h4 {display:inline-block;color:#fff;font-weight:bold;background:#000;margin:0 auto;padding:4px 10px;letter-spacing: 2px;}
h5 {display:inline-block;color:#fff;font-weight:bold;padding:6px 0;margin:8px auto;}
h5 a {color:#fff;border:1px solid #fff;padding:4px 8px;text-decoration: none;border-radius: 20px;font-size:10px;margin-left:6px;}
h6 {color:#fff;margin:20px auto 10px;font-size: 14px;font-weight: 600;}
p {line-height:1.6em;}
p a {color:#ace6fd;}
b {font-weight:bold;}
small {font-size:.8em;}

.logo {width:70%;margin:20px auto;}

.empty_box {aspect-ratio: 1/3.5;width:100%;}
.empty_box div:before {content:"";display:block;width:100%;height:100px;}
.empty_box div .copy_kyotu {position: sticky;bottom:50%;}
.animal_img {display:block;position:sticky;width:100%;height:100%;top:0;aspect-ratio:1080/1920;background-image:url(img/omote_animal.png);background-size: 400% auto;background-position:0 -40%;transition: all 0s;background-repeat:repeat-x;pointer-events:none;}

.gaiyou {width:80%;margin:20px auto; line-height:3em;}


h2{color:#fff;border-bottom:1px solid #fff;margin-top:20px;padding-bottom:4px;}
.honpen_list label,
.yubi_list label {display:inline-block;padding:10px 1em;background:#fff;color:#000;margin-bottom:10px}
.honpen_list label:before {content:'第';}
.honpen_list label:after {content:'話';}
.yubi_list label:before {content:'ヌ';}
.yubi_list label:after {content:'エ';}
.caption_box {position:fixed;top:0;left:0;right:0;bottom:0;width:90%;height:60%;overflow:scroll;margin:auto;background:rgba(255,255,255,.9);z-index:20;padding:10px 16px;color:#000;text-align:left;}
.caption_box h3 {display:inline-block;}
.caption_box h3:before {content:"「";}
.caption_box h3:after {content:"」";}
.caption_box .arasuji {font-size:12px;margin:10px auto;white-space:pre-line}
.caption_box .sakuhin_cast {font-size:12px;}
.caption_box .sakuhin_cast::before {content:"出演：";font-weight:bold;}
.sakuhin_day {white-space: pre-line;font-size:12px;}
.sakuhin_day:before {content:"上演日時";display:block;text-align: center;margin:10px auto 6px;border-bottom:1px solid #000;}
.caption_box dl {margin:10px auto;}
.caption_box dl dt {font-size:13px;}
.caption_box dl dd {font-size:10px;}
.caption_input + .caption_box + label {display:block;width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,.8);z-index:15;}
.caption_input,
.caption_input + .caption_box,
.caption_input + .caption_box + label {display:none;}
.caption_input:checked + .caption_box,
.caption_input:checked + .caption_box + label
{display:block;}
.works_list > p {font-size:11px;padding:4px 1em;}


.more_link {display:inline-block;width:auto;margin:10px auto;background:#fff;color:#000;padding:8px 2em;font-size:12px;border-radius: 20px;text-decoration: none;}


.contact a {display:inline-block;color:#fff;font-size:11px;padding:10px 1em;}
.fotter {background:#000;font-size:10px;padding:10px 2em;}


.list-mv06 {
    filter: blur(20px);
	transition:3s;
    color:#000;
}
.mv06 {filter: blur(0px);color:#fff;}

.list-mv07 {
    position: relative;
    top:-40px;
    opacity: 0;
	transition:2s;
}
.mv07 {top:0;opacity: 1;}





:root {
  --color1:#bbc8e6;
  --color2:#bbcfe6;
  --color3:#bbd3e6;
  --color4:#bbdde6;
  --color5:#bbdde6;
  --color6:#bbe6e6;
  --color7:#bbe6dd;
  --color8:#bbe6d6;
  --color9:#bbe6c6;
  --color10:#bbe6bb;
  --color11:#bfe6bb;
  --color12:#d2e6bb;
  --color13:#d9e6bb;
  --color14:#e6dcbb;
  --color15:#e6d8bb;
  --color16:#e6d2bb;
}



/*--------timetable-------*/
.breadcrumb  {font-size:16px;text-align:left;padding:10px 0;}
.breadcrumb a {color:#fff;}
.breadcrumb a:after {content:">";display:inline-block;text-decoration:none;margin:0 4px}
.timetable {margin:10px;}
.timetable * {font-family:sans-serif;}
.timetable table {width:auto;border-collapse: collapse;border-spacing: 0;}
.timetable table .day {position:sticky;top:0;z-index:12;left:0;white-space:nowrap;}
.timetable table .day th {box-sizing:border-box;display:inline-block;width: 80px;background:#EAE0E2;color:#000;padding:4px 0;font-size:10px;border-right:2px solid #000;height:14px;vertical-align:bottom;margin:0;box-shadow:0 2px 4px rgba(0,0,0,.3);}
.timetable .end_cover {grid-row:1/74;background:rgba(0,0,0,.8);z-index:5;position:reiative;color:#fff;}
.timetable .end_cover b {position:sticky;top:20px;left:40px;}

.timetable table .day th:first-child {width:40px;}

.timetable_grid {margin:2px auto;display: grid;grid-template-columns:38px repeat(31,78px);grid-template-rows:repeat(72,30px) 200px;row-gap: 2px;column-gap: 2px;}
.timetable_grid .time {grid-column: 1/2;position: sticky;left:0;color:#000;background:#EAE0E2;z-index:10;box-shadow: 0 0 4px rgba(0,0,0,.5);font-size:10px;}
.timetable_grid .time:after {white-space: pre;content:" 10\A 20\A 30\A 40\A 50\A \A";line-height:31px;display:inline-block;vertical-align: middle;font-size:10px;padding:0 1px;margin-left:3px;background: #fff;}
.timetable_grid .time span {position: sticky;top:24px;background: #EAE0E2;}
.timetable_grid div {position:relative;text-align: left;background:#EAE0E2;color:#000;padding:2px 4px;}
.timetable_grid div h3,
.timetable_grid div .yubi_title {display: inline-block;font-weight: 700;padding:0;position: sticky;top:24px;z-index:3;font-size:10px;transform: scale(1,1.1);margin:2px auto;font-family: sans-serif;}
.timetable_grid div .yubi_title {transform: scale(.9,1);top:36px;line-height:1.1em;}
.timetable_grid div h3:before {content:"ヌ";}
.timetable_grid div h3:after {content:"エ";}
.timetable_grid div .yubi_title:before {content:"「";position: absolute;left:-10px;}
.timetable_grid div .yubi_title:after {content:"」";position: absolute;right:-10px;}
.timetable_grid div .start_time {line-height: 1em;font-size:11px;}
.timetable_grid div small {display: inline-block;width:120%;margin:2px;font-size:10px;transform: scale(.8);margin: 0 -5px;line-height:1.2em;}
.timetable_grid div small:before {content:"(";margin-left:-3px;}
.timetable_grid div small:after {content:")";margin-right:-3px;}

.timetable_grid div .honpen_title {height:100%;position: sticky;top:20px;height: 80px;}
.timetable_grid div .honpen_title label {display:block;font-size:16px;font-weight:bold;background:#000;color:#fff;text-align: center;margin:4px auto;position:relative;font-family: sans-serif;}
.timetable_grid div .honpen_title label:after {content:"";display:inline-block;width:8px;height:8px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg);}
.timetable_grid div .kaijou_uketuke {font-size:10px;}
.timetable_grid div .stage_num {display:block;width:14px;height:14px;font-size:10px;border-radius:10px;text-align: center;background: #000;color:#fff;line-height: 14px;font-weight:bold;}
.timetable_grid div .guest_bay {width:calc(120% - 12px);}

.timetable_grid div > label {display:inline-block;background:rgba(255,255,255,.7);height:100%;width:100%;padding:2px;box-sizing: border-box;}
.timetable_grid div > label h3 {text-decoration:underline;}

.timetable_grid label.tyui {font-family: "Noto Sans JP", sans-serif;line-height:1em;width:auto;display:inline-block;position:absolute;top:0;right:-2px;background:#53717c;color:#fff;font-size:10px;padding:0;transform: scale(.8);height:14px;padding:2px 4px;border-radius:20px;z-index:4;letter-spacing: 1px;}
.timetable_grid label.tyui:after {content:"";}

.timetable_grid div.day1 {grid-column: 2/3;}
.timetable_grid div.day2 {grid-column: 3/4;}
.timetable_grid div.day3 {grid-column: 4/5;}
.timetable_grid div.day4 {grid-column: 5/6;}
.timetable_grid div.day5 {grid-column: 6/7;}
.timetable_grid div.day6 {grid-column: 7/8 !important;}
.timetable_grid div.day7 {grid-column: 8/9;}
.timetable_grid div.day8 {grid-column: 9/10;}
.timetable_grid div.day9 {grid-column: 10/11;}
.timetable_grid div.day10 {grid-column: 11/12;}
.timetable_grid div.day11 {grid-column: 12/13;}
.timetable_grid div.day12 {grid-column: 13/14;}
.timetable_grid div.day13 {grid-column: 14/15;}
.timetable_grid div.day14 {grid-column: 15/16;}
.timetable_grid div.day15 {grid-column: 16/17;}
.timetable_grid div.day16 {grid-column: 17/18;}
.timetable_grid div.day17 {grid-column: 18/19;}
.timetable_grid div.day18 {grid-column: 19/20;}
.timetable_grid div.day19 {grid-column: 20/21;}
.timetable_grid div.day20 {grid-column: 21/22;}
.timetable_grid div.day21 {grid-column: 22/23;}
.timetable_grid div.day22 {grid-column: 23/24;}
.timetable_grid div.day23 {grid-column: 24/25;}
.timetable_grid div.day24 {grid-column: 25/26;}
.timetable_grid div.day25 {grid-column: 26/27;}
.timetable_grid div.day26 {grid-column: 27/28;}
.timetable_grid div.day27 {grid-column: 28/29;}
.timetable_grid div.day28 {grid-column: 29/30;}
.timetable_grid div.day29 {grid-column: 30/31;}
.timetable_grid div.day30 {grid-column: 31/32;}
.timetable_grid div.day31 {grid-column: 32/33;}


.timetable_grid div.day1,
.timetable table .day th:nth-child(2) {background: var(--color1);}
.timetable_grid div.day3,
.timetable table .day th:nth-child(4) {background: var(--color2);}
.timetable_grid div.day5,
.timetable table .day th:nth-child(6) {background: var(--color3);}
.timetable_grid div.day7,
.timetable table .day th:nth-child(8) {background: var(--color4);}
.timetable_grid div.day9,
.timetable table .day th:nth-child(10) {background: var(--color5);}
.timetable_grid div.day11,
.timetable table .day th:nth-child(12) {background: var(--color6);}
.timetable_grid div.day13,
.timetable table .day th:nth-child(14) {background: var(--color7);}
.timetable_grid div.day15,
.timetable table .day th:nth-child(16) {background: var(--color8);}
.timetable_grid div.day17,
.timetable table .day th:nth-child(18) {background: var(--color9);}
.timetable_grid div.day19,
.timetable table .day th:nth-child(20) {background: var(--color10);}
.timetable_grid div.day21,
.timetable table .day th:nth-child(22) {background: var(--color11);}
.timetable_grid div.day23,
.timetable table .day th:nth-child(24) {background: var(--color12);}
.timetable_grid div.day25,
.timetable table .day th:nth-child(26) {background: var(--color13);}
.timetable_grid div.day27,
.timetable table .day th:nth-child(28) {background: var(--color14);}
.timetable_grid div.day29,
.timetable table .day th:nth-child(30) {background: var(--color15);}
.timetable_grid div.day31,
.timetable table .day th:nth-child(32) {background: var(--color16);}


.timetable_grid .other,
.timetable_grid .yamamoto,
.timetable_grid .kamo,
.timetable_grid .waka,
.timetable_grid .mae,
.timetable_grid .ban,
.timetable_grid .hara,
.timetable_grid .yosida,
.timetable_grid .jou,
.timetable_grid .mana,
.timetable_grid .katati,
.timetable_grid .sora,
.timetable_grid .yoru,
.timetable_grid .huta,
.timetable_grid .ito {opacity:.3;}
.timetable_grid .hyouji {display: none;}

.timetable_grid #other:checked ~ .other,
.timetable_grid #waka:checked ~ .waka,
.timetable_grid #waka:checked ~ .huta,
.timetable_grid #waka:checked ~ .yoru,
.timetable_grid #waka:checked ~ .sora,
.timetable_grid #waka:checked ~ .katati,
.timetable_grid #waka:checked ~ .ito,
.timetable_grid #kamo:checked ~ .kamo,
.timetable_grid #kamo:checked ~ .katati,
.timetable_grid #kamo:checked ~ .ito,
.timetable_grid #hara:checked ~ .hara,
.timetable_grid #hara:checked ~ .katati,
.timetable_grid #hara:checked ~ .ito,
.timetable_grid #yamamoto:checked ~ .yamamoto,
.timetable_grid #yamamoto:checked ~ .yoru,
.timetable_grid #yamamoto:checked ~ .ito,
.timetable_grid #ban:checked ~ .ban,
.timetable_grid #ban:checked ~ .yoru,
.timetable_grid #ban:checked ~ .ito,
.timetable_grid #ban:checked ~ .katati,
.timetable_grid #yosida:checked ~ .yosida,
.timetable_grid #yosida:checked ~ .sora,
.timetable_grid #mae:checked ~ .mae,
.timetable_grid #mae:checked ~ .sora,
.timetable_grid #mae:checked ~ .ito,
.timetable_grid #jou:checked ~ .jou,
.timetable_grid #jou:checked ~ .huta,
.timetable_grid #mana:checked ~ .mana,
.timetable_grid #mana:checked ~ .huta {opacity: 1;}

.timetable_grid #sora_:checked ~ .sora,
.timetable_grid #yoru_:checked ~ .yoru,
.timetable_grid #huta_:checked ~ .huta,
.timetable_grid #katati_:checked ~ .katati,
.timetable_grid #ito_:checked ~ .ito {opacity:1;}




.timetable_grid .cast,
.timetable_grid .allCheck,
.timetable_grid .allUnCheck {position:fixed;display:inline-block;bottom:100px;left:60px;box-sizing:border-box;font-size:10px;background:#000;border-radius:30px;padding:8px 1em 8px 20px;text-align:left;z-index:15;transition:all .4s ease;}
.timetable_grid .cast:nth-of-type(2) {left:145px;}
.timetable_grid .cast:nth-of-type(3) {left:220px;}
.timetable_grid .cast:nth-of-type(4) {left:295px;}
.timetable_grid .cast:nth-of-type(n+5) {bottom:70px;}
.timetable_grid .cast:nth-of-type(5) {left:60px;}
.timetable_grid .cast:nth-of-type(6) {left:125px;}
.timetable_grid .cast:nth-of-type(7) {left:210px;}
.timetable_grid .cast:nth-of-type(8) {left:285px;}
.timetable_grid .cast:nth-of-type(n+9) {bottom:40px;}
.timetable_grid .cast:nth-of-type(9) {left:60px;}
.timetable_grid .cast:nth-of-type(10) {left:145px;}
.timetable_grid .cast:nth-of-type(n+11) {bottom:10px;}
.timetable_grid .cast:nth-of-type(11) {left:60px;}
.timetable_grid .cast:nth-of-type(12) {left:122px;}
.timetable_grid .cast:nth-of-type(13) {left:184px;}
.timetable_grid .cast:nth-of-type(14) {left:246px;}
.timetable_grid .cast:nth-of-type(15) {left:308px;}
.timetable_grid .cast:before {content:"";display: block;width:8px;height:8px;border:1px solid #fff;border-radius:2px;position:absolute;left:6px;top:8px;}


.timetable_grid .allCheck,
.timetable_grid .allUnCheck {bottom:140px;color:#fff;left:60px;border:none;line-height:1em;padding:8px 8px;background:gray;}
.timetable_grid .allUnCheck {left:110px;}


.timetable_grid #jou:checked ~ .cast:nth-of-type(1):after,
.timetable_grid #mana:checked ~ .cast:nth-of-type(2):after,
.timetable_grid #ban:checked ~ .cast:nth-of-type(3):after,
.timetable_grid #kamo:checked ~ .cast:nth-of-type(4):after,
.timetable_grid #hara:checked ~ .cast:nth-of-type(5):after,
.timetable_grid #mae:checked ~ .cast:nth-of-type(6):after,
.timetable_grid #yamamoto:checked ~ .cast:nth-of-type(7):after,
.timetable_grid #yosida:checked ~ .cast:nth-of-type(8):after,
.timetable_grid #waka:checked ~ .cast:nth-of-type(9):after,
.timetable_grid #other:checked ~ .cast:nth-of-type(10):after,
.timetable_grid #yoru_:checked ~ .cast:nth-of-type(11):after,
.timetable_grid #katati_:checked ~ .cast:nth-of-type(12):after,
.timetable_grid #sora_:checked ~ .cast:nth-of-type(13):after,
.timetable_grid #huta_:checked ~ .cast:nth-of-type(14):after,
.timetable_grid #ito_:checked ~ .cast:nth-of-type(15):after {content:"";position:absolute;display: block;width:10px;height:6px;border-left:1px solid #fff;border-bottom:1px solid #fff;transform:rotate(-45deg);top:6px;left:6px;}


#cast_betuni_button {display: none;}
#cast_betuni_button:checked ~ .cast,
#cast_betuni_button:checked ~ .allCheck,
#cast_betuni_button:checked ~ .allUnCheck {bottom:-50px;transition:all .4s ease;}

.cast_betuni {position: fixed;bottom:140px;right:10px;font-size:10px;display: inline-block;padding:10px 1em;color:#000;z-index:20;transition: all .4s ease;border-radius:20px;background: linear-gradient(-45deg, #f9c2eb, #a8c2ee, #c2f9d0, #ffdea5) fixed;
  background-size: 800% 800%;
  animation: GradietionAnimation 5s ease infinite;
}
.cast_betuni:before {content:"▼";}
#cast_betuni_button:checked ~ .cast_betuni {bottom:10px;width:auto;}
#cast_betuni_button:checked ~ .cast_betuni:before {content:"▲";}
@keyframes GradietionAnimation { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}