*:focus {
	outline: none;
}
html, body {
  margin: 0;
	min-height:100vh;
}

h1, h2, h3, h4, h5 {
  font-size: 100%;
  font-weight: inherit;
  margin: 0; }

p {
  margin: 0; }

a {
  color: inherit;
  text-decoration: none; }

ul, ol {
  padding: 0;
  margin: 0; }

li {
  list-style: none; }

dl, dt, dd {
  margin: 0;
  padding: 0; }

button, input, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 100%; }

select::-ms-expand {
  display: none; }

table {
  table-layout: fixed;
  border-collapse: collapse; }

th {
  font-weight: inherit;
  text-align: left; }

sup, sub {
  font-size: 100%;
  vertical-align: baseline; }

* {
  box-sizing: border-box;
}
img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

p,ol,ul {
	margin-top:0.5em;
	margin-bottom:1em;
}
ol li , ul li {
	margin-bottom:0.5em;
}
ul.attention {
	margin-left:2.2rem;
}
ul.attention>li {
	list-style-type: none;
	text-indent: -1.8rem;
}
ul.attention>li:before {
	display: inline;
	content: "※";
	margin-right:0.2em;
}
ul.disc {
	margin-left:2.2rem;
}
ul.disc>li {
	list-style-type: disc;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
  overflow-x: hidden;
  animation: fadeIn 2s ease 0s 1 normal;
}
#container {
	position:relative;
  background: repeating-linear-gradient(-45deg, #fff, #eee 4px, #ddd 6px, #fff 9px);
	min-height:100vh;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
.inner {
	width:100%;
	max-width:1024px;
	padding:0 1em;
	margin:0 auto;
}
@media screen and (max-width: 767px) {
	.inner {
		padding:0;
	}
}
.arial {
  font-family:Arial Black,"Noto Sans JP", sans-serif;
}
main {
	min-height:calc(100vh - 6em);
}
footer {
	text-align:center;
	font-size:0.8em;
	padding:3em 1em;
}

#twitter {
	background:#fde23755;
}
#about {
	background:#2f5da633;
}
#outline {
	background:#38a14e33;
}

#cast {
	background:#dc001733;
}
#detail {
	background:#e8701333;
}
#notice {
	background:#67459433;
}

section {
	margin:0 auto 0;
	padding:4em 1em 6em;
}
section:last-of-type() {
	margin:0 auto 0;
}
section p {
	margin-bottom:1em;
}
section a.link {
	text-decoration:underline;
}
section a.link:hover, section a.link:active, {
	color:#ddd;
}
h3 {
	position:relative;
	font-size:1.2em;
	font-weight:bold;
	padding:0.5em 9em 0.5em 0.5em;
	margin-bottom:2em;
	border-radius: 6px;
	box-shadow: 4px 4px 4px 0px rgba(255, 255, 255, 0.7);
}
h3:after {
    content: "";
    background: url(../img/logo.png);
    width: 8em;
    height: 4em;
    position: absolute;
    right: 1em;
    top: -1em;
    background-size: contain;
    background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
	h3 {
		padding:0.5em 5em 0.5em 0.5em;
	}
	h3:after {
	    width: 4.5em;
	    height: 4em;
	    right: 0.2em;
	    top: 0;
	}
}
#twitter h3 {
	background:#fde237;
	color:#000;
}
#about h3 {
	background:#2f5da6;
	color:#fff;
}
#outline h3 {
	background:#38a14e;
	color:#fff;
}

#cast h3 {
	background:#dc0017;
	color:#fff;
}
#detail h3 {
	background:#e87013;
	color:#fff;
}
#notice h3 {
	background:#674594;
	color:#fff;
}
@media screen and (max-width: 767px) {
	h3 {
		font-size:1.15em;
	}
	#about h3:after {
	    top: 1em;
	}
}



#top {
	padding:0 0 4em;
}
#top .inner {
	max-width:1280px;
	padding:0;
}
#top .title {
	text-align:center;
	margin:0 auto;
	display:flex;
	align-items: center;
}
#top .title .logo {
	width:480px;
	max-width:70%;
	margin:2em auto 4em;
}
#top .title h1 {
	font-size:1.6em;
	font-weight:bold;
	margin:0 auto 1em;
}
#top .title h2 {
	font-size:0.8em;
	margin:0 auto 1em;
}
#top .title>div {
	width:50%;
}
#top .title .kv {
	width:50%;
}
#top p {
	margin:0 auto 2em;
}
#top dl {
	font-weight:bold;
	margin:0 0 0.5em;
}
#top dl dt {
	margin:0 0 0.5em;
}
#top dl dt:before {
	content:"■";
}
#top dl dt:after {
	content:"：";
}
#top dl dd {
	margin:0 0 1em;
	font-size:1.2em;
}
@media screen and (max-width: 767px) {
	#top .title {
		align-items: flex-start;
		flex-direction: column-reverse;
	}
	#top .title .logo {
		display:none;
	}
	#top .title>div {
		width:100%;
	}
	#top .title .kv {
		width:100%;
		margin: 0 auto 3em;
	}
}


#twitter .news {
	margin:0 auto 2em;
	background:#fff;
	padding:1em;
	border-radius:1em;
}
#twitter dl dt {
	font-size:1.1em;
	font-weight:bold;
	margin:0 0 0.5em;
}
#twitter dl dd {
	margin:0 0 0.5em;
	border-bottom:1px solid #000;
	padding:0 0 1em;
}
#twitter dl dd a {
	text-decoration:underline;
	color:#333;
}
}

#about p span {
	font-weight:bold;
	display: inline-block;
}

#cast .cast-wrap {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2em 1em;
}
#cast .cast-wrap dl {
	width:calc(50% - 2em);
	text-align:center;
}
#cast .cast-wrap dl dt {
	width:80%;
	margin:0 auto 0.5em;
	font-size:1.2em;
}
#cast .cast-wrap dl dt img {
	width:80%;
}
#cast .cast-wrap dl dd {
}
#cast .cast-wrap dl dd .jp {
	display:block;
	font-size:1.4em;
	font-weight:bold;
}
#cast .cast-wrap dl dd .en {
	display:block;
}
#cast .cast-wrap dl dd .birth {
	display:block;
}
@media screen and (max-width: 767px) {

	#cast .cast-wrap {
		gap: 2em 0;
	}
	#cast .cast-wrap dl {
		width:50%;
	}
	#cast .cast-wrap dl dt {
		font-size:1em;
	}
	#cast .cast-wrap dl dd .jp {
		font-size:1.2em;
	}
}


#detail h4 {
	margin:0 auto 1em;
}
#detail h4 span {
	font-size:1.4em;
	font-weight:bold;
}
#detail dl dt {
	font-size:1.1em;
	font-weight:bold;
	margin:0 0 0.5em;
}
#detail dl dt:before {
	content:"■";
}
#detail dl dt:after {
	content:"：";
}
#detail dl dd {
	margin:0 0 2em;
}
#detail dl dd.detail_cast span {
	display:inline-block;
}
#detail dl dd dl.ticket {
	margin:0 0 1em 1em;
}
#detail dl dd dl.ticket dt {
	font-size:1em;
	font-weight:normal;
	margin:0;
}
#detail dl dd dl.ticket dd {
	margin:0 0 1em;
}

.timetable {
	width: auto;
	border-collapse: collapse;
  white-space: nowrap;
  background:#fff;
}
.timetable th {
	font-weight:bold;
}
.timetable th.year {
	font-weight:bold;
	width:8em;
}
.timetable th.month {
	font-weight:bold;
}
.timetable th.time {
	font-weight:bold;
	height:3em;
}
.timetable td {
	width: 3em;
}
.table-wrap {
	overflow-x: auto;
	margin-bottom: 20px;
}
.timetable th, .timetable td {
  border: 1px solid black;
  padding: 2px 5px;
  text-align: center;
  vertical-align: middle;
}

#notice article {
	margin:0 0 4em;
}
#notice article h4 {
	margin:0 0 2em;
	font-size:1.1em;
	font-weight:bold;
	text-decoration:underline;
}
#notice dl dt {
	font-size:1.1em;
	font-weight:bold;
	margin:0 0 0.5em;
}
#notice dl dd {
	margin:0 0 2em;
}
#notice dl dd a {
	text-decoration:underline;
	color:#333;
}