@charset "utf-8";


/*---------------------------------------------------------------
   base（全ページの基本設定）
-------------------------------------------------------------- */
html,body {
	color: #000;
	background-color: #fff;
	font-size: 62.5%;
	font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
	font-weight: 500;
	font-feature-settings: 'palt';
	-webkit-font-feature-settings: "palt";
	writing-mode: horizontal-tb;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	box-sizing: border-box;
	-webkit-touch-callout: none;
	letter-spacing: 0.15em;
	word-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
*,*::before,*::after {
  box-sizing: inherit;
}
a {
	outline: none;
	text-decoration: none;
	color: #000;
}
:focus {
    outline: none;
}
.f-petit {
	font-family: 'Petit Formal Script', cursive;
	letter-spacing: 0;
	font-weight: 400;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}
.f-garamond {
	font-family: 'Cormorant Garamond', serif;
	letter-spacing: 0;
	font-weight: 400;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}
img {
	max-width: 100%;
	height: auto;
}


/* PC / TAB / SPの表示切り替え*/
.pc {display: inline-block !important;}
.tab {display: none;}
.sp {display: none;}
.se {display: none;}
	@media screen and (max-width: 850px) {
		.pc {display: none !important;}
		.tab {display: inline-block !important;}
		.sp {display: none;}
		.se {display: none;}
	}
	@media screen and (max-width: 640px) {
		.pc {display: none !important;}
		.tab {display: none !important;}
		.sp {display: inline-block !important;}
		.se {display: none;}
	}
	@media screen and (max-width: 340px) {
		.pc {display: none !important;}
		.tab {display: none !important;}
		.sp {display: inline-block !important;}
		.se {display: inline-block !important;}
	}
/* セクションのmax幅と左右の余白
-----------------------------------------*/
.m-w-1200 {
	max-width: calc(1200px + 50px + 50px);
	width: 100%;
	padding-right: 50px;
	padding-left: 50px;
	margin-left: auto;
	margin-right: auto;
}
.m-w-1000 {
	max-width: calc(1000px + 50px + 50px);
	width: 100%;
	padding-right: 50px;
	padding-left: 50px;
	margin-left: auto;
	margin-right: auto;
}
	@media screen and (max-width: 1200px) {
		.m-w-1200 {
			padding-right: 40px;
			padding-left: 40px;
		}
	}
	@media screen and (max-width: 1100px) {
		.m-w-1000 {
			padding-right: 40px;
			padding-left: 40px;
		}
	}
	@media screen and (max-width: 640px) {
		.m-w-1200,
		.m-w-1000 {
			padding-right: 15px;
			padding-left: 15px;
		}
	}

/* えんじ色のボタン（チケット購入ボタン）
-----------------------------------------*/
.purple-btn {
	background-color: #724598;
	color: #fff;
	text-decoration: none;
	display: block;
	text-align: center;
	border-radius: 2px;
	text-shadow: 0 0 10px rgba(50,50,50,0.4);
	transition: all 0.3s ease-out;
}
.purple-btn:hover {
	background-color: #D2B071;
}
	@media screen and (max-width: 820px) {
		.purple-btn:hover {
			background-color: #724598;
		}
	}

/* 見出し
-----------------------------------------*/
.main-title {
	text-align: center;
	margin-bottom: 70px;
}
.main-title::before {
	content: attr(data-en);
	display: block;
	font-family: 'Petit Formal Script', cursive;
	font-weight: 400;
	color: #E2E2E2;
	font-size: 5.2rem;
	margin-bottom: -35px;
}
.main-title .ja {
	font-size: 3.6rem;
	font-weight: 700;
	letter-spacing: 0.4em;
	padding-left: 12px;/*letter-spacingの調整*/
	position: relative;
	padding-bottom: 16px;
}
.main-title .ja::before,
.main-title .ja::after {
	content: "";
	display: block;
	width: 25px;
	height: 3px;
	position: absolute;
	bottom: 0;
}
.main-title .ja::before {
	background-color: #724598;
	right: 50%;
}
.main-title .ja::after {
	background-color: #D2B071;
	left: 50%;
}
	@media screen and (max-width: 600px) {
		.main-title {
			margin-bottom: 40px;
		}
		.main-title::before {
			font-size: 3.6rem;
			margin-bottom: -25px;
		}
		.main-title .ja {
			font-size: 2.4rem;
			padding-bottom: 14px;
		}
		.main-title .ja::before,
		.main-title .ja::after {
			width: 20px;
		}
	}



/*---------------------------------------------------------------
   ローディング用の記述
-------------------------------------------------------------- */
header, main, footer, .modal {
	opacity: 0;
}
#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #f7f7f7;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}
#loading .spinner-box {
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
}
#loading .spinner-box .pulse-container {
	width: 70px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#loading .spinner-box .pulse-container .pulse-bubble {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #724598;
}

#loading .spinner-box .pulse-container .pulse-bubble:nth-child(1) {
    animation: pulse .3s ease 0s infinite alternate;
}
#loading .spinner-box .pulse-container .pulse-bubble:nth-child(2) {
    animation: pulse .3s ease .15s infinite alternate;
    background-color: #D2B071;
}
#loading .spinner-box .pulse-container .pulse-bubble:nth-child(3) {
    animation: pulse .3s ease .3s infinite alternate;
}
@keyframes pulse {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: .25;
		transform: scale(.75);
	}
}
	@media screen and (max-width: 640px) {
		#loading .spinner-box {
			margin: 0 0 60px 5px;
		}
	}




/*---------------------------------------------------------------
  header（アンカーリンクのナビゲーション）
-------------------------------------------------------------- */
header {
	position: fixed;
	width: 100%;
	height: 140px;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	transition: all 0.3s ease-out;
	z-index: 10;
}
header.scroll-down {
	height: 70px;
	box-shadow: 0px 6px 6px -3px rgba(0,0,0,0.1);
	background-color: #fff;
}
header .inner {
	display: flex;
	align-items: center;
	transition: all 0.3s ease-out;
}
header .inner ul {
	display: flex;
}
header .inner ul li {
	margin-right: 60px;
}
header .inner ul li a {
	font-size: 1.6rem;
	line-height: 20px;
	position: relative;
}
header .inner ul li a::after {
	content: "";
	display: block;
	width: calc(100% + 10px);
	height: 0;
	background-color: #DBBF8D;
	position: absolute;
	left: 50%;
	bottom: -5px;
	transform: translate(-50%, 0);
	transition: all 0.2s ease-out;
}
header .inner ul li a:hover::after {
	width: calc(100% + 10px);
	height: 2px;
}
header.scroll-down .inner ul li a::after {
	bottom: -24px;
}
header.scroll-down .inner ul li a:hover::after {
	height: 3px;
}
header .inner a.purple-btn {
	font-size: 1.6rem;
	line-height: 60px;
	width: 240px;
}
header .inner a.purple-btn::after {
	content: "はこちら";
	display: inline;
}
header.scroll-down .inner a.purple-btn {
	line-height: 70px;
	border-radius: 0;
}
	@media screen and (max-height: 850px) {
		header {
			height: 100px;
		}
	}

	@media screen and (max-width: 900px) {
		header .inner {
			width: 100%;
			justify-content: space-between;
			padding-right: 30px;
		}
		header.scroll-down .inner {
			padding-right: 0;
		}
		header .inner ul {
			width: calc(100% - 180px);
			justify-content: space-around;
			padding: 0 20px;
		}
		header .inner ul li {
			margin: auto;
		}
		header .inner a.purple-btn {
			font-size: 14px;
			width: 180px;
			line-height: 60px;
		}
	}
	@media screen and (max-width: 640px) {
		header {
			height: 50px !important;
		}
		header .inner {
			padding-right: 0;
		}
		header .inner .switchtoggle {
			text-align: center;
			line-height: 50px;
			font-size: 1.4rem;
			width: calc(100% - 120px);
			background-color: #DBBF8D;
			color: #fff;
		}
		header .inner .switchtoggle span {
			position: relative;
			padding-right: 16px;
			display: inline-block;
		}
		header .inner .switchtoggle span::before {
			content: "";
			display: block;
			width: 8px;
			height: 8px;
			border-top: 1px solid #fff;
			border-right: 1px solid #fff;
			position: absolute;
			top: calc(50% - 6px);
			right: 0;
			transform:rotate(-225deg);
		}
		header .inner .switchtoggle.active span::before {
			transform:rotate(-45deg);
			top: calc(50% - 2px);
		}
		header .inner ul {
			position: fixed;
			top: 50px;
			width: 100%;
			flex-direction: column;
			background-color: #E4CFA9;
			padding: 0;
			opacity: 0.98;
		}
		header .inner ul li {
			border-top: 1px solid rgba(255,255,255,0.6);
			display: block;
			width: 100%;
		}
		header .inner ul li a {
			display: block;
			font-size: 1.4rem;
			line-height: 50px;
			text-align: center;
		}
		header .inner ul li a::after {
			display: none;
		}
		header .inner a.purple-btn {
			right: 0;
			width: 120px;
			line-height: 50px !important;
			font-size: 1.4rem;
			border-radius: 0;
		}
		header .inner a.purple-btn::after {
			display: none;
		}
	}



/*---------------------------------------------------------------
  #firstview（ファーストビューからメッセージまで）
-------------------------------------------------------------- */
#firstview {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 60px;
}
#firstview .inner img {
	width: 560px;
	display: block;
	margin: 0 auto 50px;
}
#firstview .inner h1 {
	font-size: 6.6rem;
	line-height: 1.2;
	text-align: center;
	margin: 5px auto 10px;
	font-weight: 700;
	letter-spacing: -0.08em;
}
#firstview .inner p {
	font-size: 2.8rem;
	line-height: 1.2em;
	text-align: center;
	font-weight: 700;
}
	@media screen and (max-height: 850px) {
		#firstview {
			padding-top: 50px;
		}
		#firstview .inner img {
			width: 480px;
		}
		#firstview .inner h1 {
			font-size: 6.0rem;
		}
		#firstview .inner p {
			font-size: 2.6rem;
		}
	}

	@media screen and (max-width: 800px) {
		#firstview .inner img {
			width: 500px;
		}
		#firstview .inner h1 {
			font-size: 5.4rem;
		}
		#firstview .inner p {
			font-size: 2.4rem;
		}
	}
	@media screen and (max-width: 640px) {
		#firstview .inner img {
			width: 90vw;
			max-width: 400px;
		}
		#firstview .inner h1 {
			font-size: 3.8rem;
		}
		#firstview .inner p {
			font-size: 1.6rem;
		}
	}
	@media screen and (max-width: 340px) {
		#firstview .inner h1 {
			font-size: 3.2rem;
		}
		#firstview .inner p {
			font-size: 1.4rem;
		}
	}




/*---------------------------------------------------------------
  #performer（出演者）
-------------------------------------------------------------- */
#performer {
	margin: calc(140px - 120px) auto 160px;
	padding-top: 120px;
}

/* メインリスト・サブリスト・スペシャルゲスト共通 */
#performer ul {
	display: flex;
	flex-wrap: wrap;
}
#performer ul.main li {
	width: calc(100% / 4);
	text-align: center;
}
#performer ul li .visual {
	position: relative;
	line-height: 1;
}
#performer .show:hover {
	cursor: pointer;
}
#performer ul li .visual::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 16px 16px;
	border-color: transparent transparent #fff transparent;
	bottom: 12px;
	right: 12px;
	transition: all 0.25s ease-out;
}
#performer .show:hover .visual::after {
	border-color: transparent transparent #724598 transparent;
}
/* メインリスト */
#performer ul.main li .phrase {
	margin:  10px auto 8px;
	font-size: 1.5rem;
	line-height: 1.6;
}
#performer ul.main li .name-ja {
	font-size: 2.4rem;
	font-weight: 700;
	margin-bottom: 5px;
}
#performer ul.main li .name-en {
	font-size: 1.6rem;
	color: #D2B071;
}

/* サブリスト */
#performer ul.sub {
	margin-top: 60px;
}
#performer ul.sub li {
	width: calc(100% / 6);
	text-align: center;
}
#performer ul.sub li .name-ja {
	font-size: 2.0rem;
	font-weight: 700;
	margin: 8px auto 4px;
}
#performer ul.sub li .name-en {
	font-size: 1.4rem;
	color: #D2B071;
}
#performer ul.sub li .visual::after {
	border-width: 0 0 12px 12px;
	bottom: 10px;
	right: 10px;
}
#performer ul.sub li .note {
	font-size: 1.5rem;
	margin-top: 5px;
}

/* スペシャルゲスト */
#performer .special {
	margin-top: 80px;
	padding-bottom: 100px;
	position: relative;
}
#performer .special::after {
	content: "";
	width: 100%;
	height: 22px;
	background: url("../img/decorationD-1.png") center / 1px 22px repeat-x;
	position: absolute;
	bottom: 0;
	left: 0;
}
#performer .special .decoration {
	text-align: center;
	position: relative;
}
#performer .special .decoration::before {
	content: "";
	width: 100%;
	height: 22px;
	background: url("../img/decorationD-1.png") center / 1px 22px repeat-x;
	position: absolute;
	top: 60%;
	left: 0;
	transform: translate(0,-50%);
}
#performer .special .decoration img {
	width: 260px;
	position: relative;
	z-index: 2;
}
#performer .special .sub-title {
	margin: 40px auto 60px;
	text-align: center;
}
#performer .special .sub-title::before {
	content: attr(data-en);
	display: block;
	font-family: 'Petit Formal Script', cursive;
	font-weight: 400;
	color: #724598;
	font-size: 7.6rem;
	margin-bottom: -35px;
	opacity: 0.2;
}
#performer .special .sub-title .ja {
	font-size: 3.0rem;
	font-weight: 700;
	letter-spacing: 0.2em;
}
#performer .special > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
}
#performer .special > ul li:first-child {
	margin-right: 70px;
}
#performer .special > ul li .show {
	display: flex;
	align-items: center;
}
#performer .special > ul li .show .visual img {
	width: calc(1200px / 6);
}
#performer .special > ul li .show .info {
	padding-left: 25px;
}
#performer .special > ul li .show .info .position {
	font-size: 1.5rem;
	line-height: 1.6;
}
#performer .special > ul li .name-ja {
	font-size: 2.0rem;
	font-weight: 700;
	margin: 4px auto;
}
#performer .special > ul li .name-en {
	font-size: 1.4rem;
	color: #D2B071;
}
#performer .special > ul li .visual::after {
	border-width: 0 0 12px 12px;
	bottom: 10px;
	right: 10px;
}

	@media screen and (min-height: 950px) {
		#performer {
			margin: calc(0px - 120px) auto 140px;
		}
	}
	@media screen and (max-height: 860px) {
		#performer {
			margin: calc(100px - 120px) auto 140px;
		}
	}

	@media screen and (max-width: 1300px) {
		#performer .special > ul li .show .visual img {
			width: calc(100vw / 6);
		}
	}

	@media screen and (max-width: 1100px) {
		#performer ul.main {
			max-width: 660px;
			margin: auto;

		}
		#performer ul.main li {
			width: calc((100% - 60px) / 2);
			margin: 0 60px 40px 0;
		}
		#performer ul.main li:nth-child(2n) {
			margin: 0;
		}
		#performer ul.sub,
		#performer .special > ul {
			max-width: 800px;
			margin: auto;
		}
		#performer ul.sub li {
			width: calc((100% - 100px) / 3);
			margin: 30px 50px 0 0;
		}
		#performer ul.sub li:nth-child(3n) {
			margin-right: 0;
		}
		#performer .special > ul li {
			width: calc((100% - 80px) / 3);
		}
		#performer .special > ul li .show {
			flex-direction: column;
		}
		#performer .special > ul li .show .info {
			padding-left: 0;
			text-align: center;
		}
		#performer .special > ul li .show .visual {
			margin-bottom: 10px;
		}
		#performer .special > ul li .show .visual img {
			width: inherit;
		}
		#performer .special .sub-title::before {
			font-size: 6.2rem;
		}
		#performer .special .sub-title .ja {
			font-size: 2.6rem;
		}
	}
	@media screen and (max-width: 700px) {
		#performer ul.sub {
			max-width: 100%;
		}
		#performer ul.sub li {
			width: calc((100% - 60px) / 3);
			margin: 30px 30px 0 0;
		}
		#performer .special {
			margin-top: 50px;
			padding-bottom: 60px;
		}
		#performer .special::after {
			height: 13px;
			background: url("../img/decorationD-2.png") center / 1px 13px repeat-x;
		}
		#performer .special .decoration::before {
			height: 13px;
			background: url("../img/decorationD-2.png") center / 1px 13px repeat-x;
			top: 50%;
		}
		#performer .special .decoration img {
			width: 170px;
		}
		#performer .special .sub-title {
			margin: 40px auto;
		}
		#performer .special .sub-title::before {
			font-size: 3.6rem;
			margin-bottom: -22px;
		}
		#performer .special .sub-title .ja {
			font-size: 2.0rem;
		}
	}
	@media screen and (max-width: 640px) {
		#performer {
			margin: calc(60px - 80px) auto 120px;
			padding-top: 80px;
		}
		#performer ul.main {
			flex-direction: column;
		}
		#performer ul.main li {
			max-width: 240px;
			width: 100%;
			margin: 0 auto 40px !important;
		}
		#performer ul.main li .phrase {
			margin:  8px auto 6px;
			font-size: 1.4rem;
		}
		#performer ul.main li .name-ja {
			font-size: 2.0rem;
		}
		#performer ul.main li .visual::after {
			border-width: 0 0 12px 12px;
			bottom: 10px;
			right: 10px;
		}
		#performer ul.sub,
		#performer .special > ul {
			max-width: 380px;
			margin-top: 0;
		}
		#performer ul.sub li {
			width: calc((100% - 6px) / 2);
			margin: 30px 6px 0 0 !important;
		}
		#performer ul.sub li:nth-child(2n) {
			margin: 30px 0 0 0 !important;
		}
		#performer ul.sub li .name-ja {
			font-size: 1.8rem;
		}
		#performer ul.sub li .note {
			font-size: 1.4rem;
		}
		#performer ul.sub li .visual::after,
		#performer .special > ul li .visual::after {
			border-width: 0 0 10px 10px;
			bottom: 8px;
			right: 8px;
		}
		#performer .special > ul li {
			width: calc((100% - 6px) / 2);
		}
		#performer .special > ul li:first-child {
			margin-right: 6px;
		}
	}


/* モーダル内 */
#performer .modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,0.98);
	overflow: scroll;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
}
#performer .modal .inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#performer .modal .inner img {
	width: 400px;
}
#performer .modal .inner .txt {
	width: calc(100% - 400px);
	padding-left: 50px;
}
#performer .modal .inner .txt .name {
	font-size: 2.4rem;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.2em;
	padding-bottom: 20px;
	position: relative;
}
#performer .modal .inner .txt .name br {
	display: none;
}
#performer .modal .inner .txt .name::before,
#performer .modal .inner .txt .name::after {
	content: "";
	display: block;
	height: 1px;
	position: absolute;
	bottom:  0;
}
#performer .modal .inner .txt .name::before {
	background-color: #724598;
	left: 0;
	width: 180px;
}

#performer .modal .inner .txt .name::after {
	background-color: #D2B071;
	width: calc(100% - 180px);
	right: 0;
}
#performer .modal .inner .txt .name span {
	font-size: 1.5rem;
	font-weight: 400;
	padding-left: 20px;
	letter-spacing: 0;
}
#performer .modal .inner .txt .read,
#performer .modal .inner .txt .link {
	font-size: 1.5rem;
	line-height: 2.2;
	margin-top: 15px;
}
#performer .modal .inner .txt .link a {
	display: inline-block;
	margin-left: 10px;
	color: #724598;
	text-decoration: underline;
	word-break: break-all;
	line-height: 1.8;
	letter-spacing: 0;
}
#performer .modal .inner .close-btn {
	width: 100%;
	text-align: center;
	margin-top: 40px;
}
#performer .modal .inner .close-btn span {
	color: #999;
	font-size: 1.5rem;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: 0.08em;
	position: relative;
	padding-left: 20px;
}
#performer .modal .inner .close-btn span::before,
#performer .modal .inner .close-btn span::after {
	content: "";
	display: block;
	width: 15px;
	height: 1px;
	background-color: #999;
	position: absolute;
	top: 50%;
	left: 0;
}
#performer .modal .inner .close-btn span::before {
	transform: translate(0, -50%) rotate(45deg);
}
#performer .modal .inner .close-btn span::after {
	transform: translate(0, -50%) rotate(-45deg);
}

	@media screen and (max-width: 1100px) {
		#performer .modal .inner {
			align-items: flex-start;
		}
		#performer .modal .inner img {
			width: 300px;
		}
		#performer .modal .inner .txt {
			width: calc(100% - 300px);
			padding-left: 40px;
		}
	}
	@media screen and (max-width: 900px) {
		#performer .modal .inner {
			flex-direction: column;
		}
		#performer .modal .inner img {
			display: block;
			margin: auto;
			width: 270px;
		}
		#performer .modal .inner .txt {
			padding: 30px 0 0 0;
			width: 100%;
		}
		#performer .modal .inner .txt .name span {
			font-size: 1.4rem;
			padding: 0 4px 0 0;/*調整*/
		}
		#performer .modal .inner .txt .name {
			text-align: center;
			margin-bottom: 30px;
		}
		#performer .modal .inner .txt .name br {
			display: block;
		}
		#performer .modal .inner .txt .name::before {
			height: 3px;
			width: 30px;
			right: 50%;
			left: auto;
		}
		#performer .modal .inner .txt .name::after {
			height: 3px;
			width: 30px;
			left: 50%;
			right: auto;
		}
		#performer .modal .inner .txt .read,
		#performer .modal .inner .txt .link {
			font-size: 1.4rem;
			line-height: 2.1;
		}
	}
	@media screen and (max-width: 640px) {
		#performer .modal {
			align-items: flex-start;
			padding: 60px 0 130px;
		}
		#performer .modal::before {
			content: "";
			display: block;
			width: 20px;
			height: 20px;
			background:  url("../img/close.png") center / 17px no-repeat;
			position: absolute;
			top: 20px;
			right: 20px;
		}
		#performer .modal .inner img {
			width: 240px;
		}
		#performer .modal .inner .txt {
			padding: 20px 0 0 0;
		}
		#performer .modal .inner .txt .name {
			margin-bottom: 20px;
		}
		#performer .modal .inner .txt .name::before,
		#performer .modal .inner .txt .name::after {
			width: 20px;
		}
		#performer .modal .inner .txt .link a {
			margin-left: 0;
		}
	}




/*---------------------------------------------------------------
  #information（公演概要）
-------------------------------------------------------------- */
#information {
	margin-top: -120px;
	padding-top: 120px;
}
#information .block {
	background-color: #f7f7f7;
	border-radius: 4px;
	padding: 50px 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#information .block table,
#information .block table tbody {
	display: block;
}
#information .block table tr {
	display: flex;
	flex-wrap: wrap;
}
#information .block table tr th {
	width: 60px;
}
#information .block table tr th h3 {
	color: #724598;
	font-size: 1.8rem;
	line-height: 40px;
	font-weight: 700;
}
#information .block table tr td .main {
	font-size: 2.8rem;
	line-height: 40px;
	font-weight: 700;
}
#information .block table tr td .main span {
	font-size: 0.7em;
	padding-right: 5px;
}
#information .block table tr td .line {
	margin-top: 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid #724598;
	color: #724598;
	font-size: 1.8rem;
	font-weight: 700;
}
#information .block table tr td .note {
	font-size: 1.4rem;
	margin: 10px 0 12px;
	color: #555;
}
#information .block table tr td ul {
	font-size: 1.6rem;
	margin-bottom: 20px;
}
#information .block table tr td ul li {
	margin-bottom: 10px;
	position: relative;
	padding-left: 16px;
}
#information .block table tr td ul li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #000;
	position: absolute;
	top: 11px;
	left: 4px;
}
#information .block table tr td ul li.talk {
	padding-left: 0;
}
#information .block table tr td ul li.talk::before {
	display: none;
}
#information .block table tr td ul li span {
  font-size: .8em;
}
	@media screen and (max-width: 800px) {
		#information .block table tr th h3 {
			font-size: 1.6rem;
		}
		#information .block table tr td .main {
			font-size: 2.4rem;
		}
		#information .block table tr td ul {
			font-size: 1.5rem;
		}
	}
	@media screen and (max-width: 640px) {
		#information {
			margin-top: -80px;
			padding-top: 80px;
		}
		#information .block {
			background-color: #f3f3f3;
			border-radius: 2px;
			padding: 30px 15px 40px;
		}
		#information .block table tr th {
			width: 100%;
			text-align: center;
		}
		#information .block table tr th h3 {
			font-size: 1.5rem;
			line-height: 1.4;
		}
		#information .block table tr td .main {
			font-size: 2rem;
			line-height: 1.4;
			text-align: center;
		}
		#information .block table tr td .main:last-of-type {
			font-size: 1.7rem;
		}
		#information .block table tr td {
			width: 100%;
		}
		#information .block table tr td .line {
			border-width: 1px;
			font-size: 1.4rem;
			font-weight: 700;
			padding-bottom: 5px;
			text-align: center;
		}
		#information .block table tr td .note {
			font-size: 1.2rem;
			text-align: center;
		}
		#information .block table tr td ul {
			font-size: 1.4rem;
		}
		#information .block table tr td ul li {
			border-bottom: 1px solid #fff;
			padding: 0 8px 12px 8px !important;
		}
		#information .block table tr td ul li:first-child {
			border-top: 1px solid #fff;
			padding-top: 10px !important;
		}
		#information .block table tr td ul li::before {
			display: none;
		}
	}
/* チケット料金 */
#information .ticket {
	margin: 40px auto 60px;
	max-width: 800px;
}
#information .ticket h3 {
	text-align: center;
	font-size: 2.6rem;
	font-weight: 700;
	padding-top: 45px;
	background:  url("../img/decorationA-1.png") top 0 center / 200px 34px no-repeat;
}
#information .ticket h3 + p {
	text-align: center;
	font-size: 1.5rem;
	line-height: 2;
	margin:  20px 0 40px;
}
#information .ticket ul li {
	margin-bottom: 45px;
}
#information .ticket ul li .top {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
	display: flex;
	align-items: center;
}
#information .ticket ul li .top h4 {
	font-size: 2.4rem;
	font-weight: 700;
}
#information .ticket ul li .top h4 span {
	font-size: 0.8em;
	color: #724598;
	padding-right: 5px;
}
#information .ticket ul li .top p {
	font-size: 1.5rem;
	line-height: 1.8;
	padding-left: 15px;
	color: #555;
}
#information .ticket ul li .bottom {
	font-size: 1.5rem;
	line-height: 1.8;
}
#information .purple-btn {
	max-width: 480px;
	width: 100%;
	margin: 0 auto;
	font-size: 2.2rem;
	line-height: 80px;
}
	@media screen and (max-width: 700px) {
		#information .ticket h3 {
			font-size: 2.0rem;
			padding-top: 30px;
			background-size: 150px 25px;
		}
		#information .ticket h3 + p {
			font-size: 1.4rem;
			margin:  15px 0 25px;
		}
		#information .ticket ul li {
			margin-bottom: 30px;
		}
		#information .ticket ul li .top {
			flex-direction: column;
			align-items: baseline;
		}
		#information .ticket ul li .top h4 {
			font-size: 2.0rem;
		}
		#information .ticket ul li .top p {
			padding-left: 0;
			font-size: 1.2rem;
		}
		#information .ticket ul li .bottom {
			font-size: 1.4rem;
		}
		#information .purple-btn {
			font-size: 1.6rem;
			line-height: 60px;
		}
	}
/* お問い合わせ */
#information .contact {
	text-align: center;
}
#information .contact h3 {
	text-align: center;
	font-size: 2.2rem;
	font-weight: 700;
}
#information .contact .tel {
	font-size: 5.0rem;
	font-weight: 700;
	color: #724598;
	display: inline-block;
	margin: 20px auto 5px;
}
#information .contact .time {
	font-size: 1.6rem;
}
#information .contact .note {
	font-size: 1.6rem;
	line-height: 1.8;
	margin: 30px auto 40px;
}
#information .contact .playguide {
	background-color: #fff;
	padding: 40px 15px;
	border-radius: 6px;
	box-shadow: 0 0 8px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}
#information .contact .playguide ul {
	text-align: left;
	margin-top: 30px;
}
#information .contact .playguide ul li {
	font-size: 1.6rem;
	line-height: 1.8;
	font-weight: 700;
	margin-bottom: 12px;
	padding-left: 16px;
	position: relative;
}
#information .contact .playguide ul li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #000;
	position: absolute;
	top: 12px;
	left: 4px;
}
#information .contact .playguide ul li a {
	font-weight: 500;
	color: #D2B071;
	text-decoration: underline;
	letter-spacing: 0;
	transition: all 0.2s ease-out;
	display: inline-block;
}
#information .contact .playguide ul li a:hover {
	color: #724598;
}
	@media screen and (max-width: 800px) {
		#information .contact h3 {
			font-size: 2.0rem;
		}
		#information .contact .tel {
			font-size: 4.0rem;
			margin: 15px auto 0;
		}
		#information .contact .time,
		#information .contact .note {
			font-size: 1.5rem;
		}
	}
	@media screen and (max-width: 640px) {
		#information .contact h3 {
			font-size: 1.8rem;
		}
		#information .contact .tel {
			font-size: 2.4rem;
			line-height: 60px;
			display: block;
			max-width: 480px;
			width: calc(100% - 60px);
			background-color: #f3f3f3;
			border-radius: 30px;
			margin: 20px auto 10px;
		}
		#information .contact .time,
		#information .contact .note {
			font-size: 1.3rem;
		}
		#information .contact .note {
			margin: 15px auto 35px;
		}
		#information .contact .playguide {
			padding: 20px 15px 10px;
			box-shadow: none;
			border: 1px solid #ddd;
			border-radius: 2px;
		}
		#information .contact .playguide ul {
			width: 100%;
			margin-top: 20px;
		}
		#information .contact .playguide ul li {
			font-size: 1.4rem;
			border-top: 1px dotted #ddd;
			padding: 13px 8px;
			margin: 0;
		}
		#information .contact .playguide ul li::before {
			display: none;
		}
		#information .contact .playguide ul li:first-child {
			border-top: 1px dotted #ddd;
			padding-top: 10px;
		}
	}





/*---------------------------------------------------------------
  #program（プログラム）
-------------------------------------------------------------- */
#program {
	margin: calc(160px - 120px) auto 140px;
	padding-top: 120px;
	overflow: hidden;
}
#program .intro {
	text-align: center;
	font-size: 1.6rem;
}
#program .open {
	text-align: center;
	margin: 50px auto;
}
#program .open span {
	font-size: 2.4rem;
	font-weight: 700;
	padding: 0 10px;
}
#program .open::before,
#program .open::after {
	content: "";
	display: inline-block;
	width: 50px;
	height: 1px;
	background-color: #B8B8B8;
	vertical-align: 9px;
}
/* 各部ブロック */
#program .pro-block {
	border-top: 1px solid #ccc;
	padding: 40px 10px;
	display: flex;
	flex-wrap: wrap;
}
#program .open + .pro-block,
#program .pro-block:last-of-type {
	border-bottom: 1px solid #ccc;
}
/* 時間 */
#program .pro-block .left {
	width: 160px;
}
#program .pro-block .left p:first-of-type {
	font-size: 2.2rem;
	font-weight: 700;
	margin-bottom: 8px;
}
#program .pro-block .left p:last-of-type {
	font-size: 1.5rem;
	color: #777;
}
/* 内容 */
#program .pro-block .right {
	width: calc(100% - 160px);
}
#program .pro-block .right .title {
	font-size: 2.2rem;
	font-weight: 700;
	margin-bottom: 15px;
}
#program .pro-block .right .title span {
	color: #724598;
	padding-right: 8px;
}
#program .pro-block .right .title span + span {
	color: inherit;
	padding: 0;
	font-size: .8em;
}
#program .pro-block .right .performers,
#program .pro-block .right .comment {
	font-size: 1.5rem;
	line-height: 2;
}
#program .pro-block .right .separation {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 2px dotted #ddd;
}
#program .pro-block .right .program,
#program .pro-block .right .toggle-target ul li,
#program .pro-block .right .toggle-target p {
	font-size: 1.7rem;
	line-height: 1.8;
	margin-top: 5px;
}
#program .pro-block .right .toggle-target ul li {
	padding-left: 15px;
	position: relative;
}
#program .pro-block .right .toggle-target ul li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #000;
	position: absolute;
	top: 14px;
	left: 4px;
}
#program .pro-block .right .toggle-target ul li.no-list::before {
	display: none;
}
#program .pro-block .right .toggle-target ul li span {
	display: inline-block;
	width: 24px;
	height: 1px;
	background-color: #D2B071;
	margin: 0 8px;
	vertical-align: 6px;
}
/* 2部以降のタイトル */
#program .wonder-copy {
	font-size: 2.0rem;
	text-align: center;
	font-weight: 700;
	background-color: #F8F3EA;
	padding: 25px 0;
	margin-top: 70px;
	position: relative;
}
#program .wonder-copy::before,
#program .wonder-copy::after {
	content: "";
	display: block;
	width: 80px;
	height: 100px;
	background: url("../img/decorationB-1.png") center / contain no-repeat;
	position: absolute;
	top: 50%;
	left: -20px;
	transform: translate(0, -50%);
}
#program .wonder-copy::after {
	background-image: url("../img/decorationB-2.png");
	left: auto;
	right: -20px;
}
/* 2部以降の説明文章 */
#program .wonder-note {
	font-size: 1.7rem;
	line-height: 1.8;
	margin: 40px auto 50px;
	text-align: center;
}
/* トークイベント */
#program .pro-block .all {
	text-align: center;
	width: 100%;
	display: flex;
	justify-content: center;
}
#program .pro-block .all .inner {
	padding: 0 120px;
	position: relative;
}
#program .pro-block .all .inner::before,
#program .pro-block .all .inner::after {
	content: "";
	display: block;
	width: 80px;
	height: 100px;
	background: url("../img/decorationB-1.png") center / contain no-repeat;
	position: absolute;
	top: 55%;
	left: 0;
	transform: translate(0, -50%);
	opacity: 0.4;
}
#program .pro-block .all .inner::after {
	background-image: url("../img/decorationB-2.png");
	left: auto;
	right: 0;
}
#program .pro-block .all h3 {
	font-size: 2.0rem;
	line-height: 1.8;
	font-weight: 700;
	margin-bottom: 10px;
}
#program .pro-block .all h3 span {
	font-size: 0.8em;
}
#program .pro-block .all p {
	font-size: 1.5rem;
	line-height: 1.8;
}
/* プログラム全体の特記事項 */
#program .note {
	font-size: 1.4rem;
	line-height: 1.8;
	margin-top: 15px;
	text-align: right;
}

/* 追記　プログラム画像 */
#program figure {
	margin-top: 4rem;
	text-align: center;
}
#program figure img {
	filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.2))
}
#program figure figcaption {
	font-size: 1.2rem;
}
#program figure figcaption a {
    display: inline-block;
	margin: 1em auto;
    padding: 1em 2em;
}
	@media screen and (max-width: 1100px) {
		#program .open {
			margin: 40px auto;
		}
		#program .open span {
			font-size: 2.0rem;
		}
		#program .open::before,
		#program .open::after {
			width: 40px;
			vertical-align: 7px;
		}
		#program .pro-block .left {
			width: 140px;
		}
		#program .pro-block .left p:first-of-type {
			font-size: 2.0rem;
		}
		#program .pro-block .left p:last-of-type {
			font-size: 1.4rem;
		}
		#program .pro-block .right {
			width: calc(100% - 140px);
		}
		#program .pro-block .right .title {
			font-size: 2.0rem;
			margin-bottom: 10px;
		}
		#program .pro-block .right .performers,
		#program .pro-block .right .comment {
			font-size: 1.4rem;
		}
		#program .pro-block .right .program,
		#program .pro-block .right .toggle-target ul li,
		#program .pro-block .right .toggle-target p {
			font-size: 1.5rem;
		}
		#program .pro-block .all h3 {
			font-size: 1.8rem;
		}
		#program .wonder-copy {
			font-size: 1.8rem;
			padding: 20px 0;
		}
	}

	@media screen and (max-width: 700px) {
		#program {
			margin: calc(140px - 80px) auto 140px;
			padding-top: 80px;
		}
		#program .intro {
			font-size: 1.4rem;
		}
		#program .open {
			margin: 30px auto;
		}
		#program .open span {
			font-size: 1.8rem;
		}
		#program .open::before,
		#program .open::after {
			width: 30px;
		}
		#program .pro-block {
			padding: 30px 0;
		}
		#program .pro-block .left,
		#program .pro-block .right {
			width: 100%;
		}
		#program .pro-block .left {

			text-align: center;
			margin-bottom: 15px;
		}
		#program .pro-block .left p:last-of-type br {
			display: inline;
		    content: "/";
		    padding: 0 5px;
		}
		#program .pro-block .left p:last-of-type br::before {
			display: inline;
		    content: "/";
		}
		#program .pro-block .left p:first-of-type {
			font-size: 1.8rem;
		}
		#program .pro-block .right .title {
			font-size: 1.8rem;
			text-align: center;
			margin-bottom: 10px;
		}
		#program .pro-block .right .title span, em {
			display: block;
		}
		#program .pro-block .right .performers {
			text-align: center;
			margin-bottom: 18px;
			line-height: 1.6;
		}
		#program .pro-block .right .separation {
			padding-bottom: 0;
			border-bottom: none;
		}
		#program .pro-block .right .comment {/*第一部コメント*/
			border-bottom: 1px dotted #ddd !important;
			padding-bottom: 20px !important;
		}
		#program .pro-block .right .switchtoggle {
			text-align: center;
			font-size: 1.4rem;
			font-weight: 700;
			line-height: 50px;
			position: relative;
			background-color: #f3f3f3;
			width: 100%;
			transition: all 0.2s ease-out;
			margin-bottom: 1px;
		}
		#program .pro-block .right .switchtoggle::before,
		#program .pro-block .right .switchtoggle::after {
			content: "";
			display: block;
			background-color: #000;
			position: absolute;
			top: 50%;
			transform: translate(0, -50%);
			transition: all 0.2s ease-out;
		}
		#program .pro-block .right .switchtoggle::before {
			width: 11px;
			height: 1px;
			right: 15px;
		}
		#program .pro-block .right .switchtoggle::after {
			width: 1px;
			height: 11px;
			right: 20px;
		}
		#program .pro-block .right .switchtoggle.active {
			background-color: #e7e7e7;
		}
		#program .pro-block .right .switchtoggle.active::after {
			height: 0;
		}
		#program .pro-block .right .toggle-target {
			background-color: #f3f3f3;
			padding: 15px;
		}
		#program .pro-block .right .program {
			font-size: 1.5rem;
			text-align: center;
			line-height: 1.6;
		}
		#program .pro-block .right .toggle-target ul li,
		#program .pro-block .right .toggle-target p {
			font-size: 1.4rem;
			line-height: 1.6;
		}
		#program .pro-block .right .toggle-target ul li {
			margin: 0 auto 15px;
			padding-bottom: 15px;
			border-bottom: 1px solid #fff;
			padding-left: 0;
		}
		#program .pro-block .right .toggle-target ul li::before {
			display: none;
		}
		#program .pro-block .right .toggle-target ul li span {
			margin: 0 5px 0 0;
			width: 15px;
			vertical-align: 5px;
		}
		#program .pro-block .all .inner::before,
		#program .pro-block .all .inner::after {
			display: none;
		}
		#program .pro-block .all .inner {
			padding: 40px 0;
			background-image: url("../img/decorationA-1.png"), url("../img/decorationA-2.png");
			background-repeat: no-repeat, no-repeat;
			background-position: top 0 center, bottom 0 center;
			background-size: 120px 21px, 120px 21px;
		}
		#program .pro-block .all h3 {
			font-size: 1.5rem;
			margin-bottom: 15px;
		}
		#program .pro-block .all p {
			font-size: 1.4rem;
		}
		#program .note {
			font-size: 1.2rem;
			text-align: center;
		}
		#program .wonder-copy {
			font-size: 1.5rem;
			padding: 15px 0;
			margin-top: 50px;
		}
		#program .wonder-copy::before,
		#program .wonder-copy::after {
			width: 48px;
		    height: 60px;
		    left: -8px;
		    top: -16px;
		    transform: translate(0, 0) rotate(64deg);
		}
		#program .wonder-copy::after {
		    top: auto;
		    left: auto;
		    right: -10px;
		    bottom: -13px;
		    transform: translate(0, 0) rotate(24deg);
		}
		#program .wonder-note {
			font-size: 1.4rem;
			margin: 20px auto 30px;
			text-align: left;
		}
	}





/*---------------------------------------------------------------
  #support（協賛社）
-------------------------------------------------------------- */
#support {
	margin: -120px auto 160px;
	padding-top: 120px;
}
#support ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#support ul + ul {
	margin:16px 0 -30px;
}
#support ul li {
	width: calc((100% - 120px) / 4);
	margin: 0 40px 30px 0;
}
/* #support ul li:nth-child(4n) {
	margin-right: 0;
} */
#support ul li:last-child {
	margin-right: 0;
}
	@media screen and (max-width: 1000px) {
		#support ul {
			margin-bottom: -16px;
		}
		#support ul li {
			width: calc((100% - 60px) / 4);
			margin: 0 20px 16px 0;
		}
	}
	@media screen and (max-width: 640px) {
		#support {
			margin: -80px auto 100px;
			padding-top: 80px;
		}
		#support ul li {
			width: calc((100% - 20px) / 2);
			margin: 0 20px 16px 0;
		}
		#support ul li:nth-child(2n) {
			margin-right: 0;
		}
	}




/*---------------------------------------------------------------
  footer
-------------------------------------------------------------- */
footer {
	background-color: #f3f3f3;
	padding: 60px 15px 40px;
}
footer ul {
	display: flex;
	justify-content: center;
}
footer ul li {
	margin-right: 25px;
}
footer ul li:last-child {
	margin-right: 0;
}
footer ul li img {
	height: 30px;
	width: auto;
}
footer .ja-logo {
	display: block;
	margin: 60px auto 40px;
	width: 250px;
}
footer p {
	font-size: 1.4rem;
	line-height: 1.4;
	color: #484533;
	text-align: center;
}
	@media screen and (max-width: 640px) {
		footer {
			background-color: #f3f3f3;
			padding: 40px 15px 30px;
		}
		footer ul li {
			margin-right: 15px;
		}
		footer ul li img {
			padding: 4px;
		}
		footer .ja-logo {
			margin: 40px auto 30px;
			width: 220px;
		}
		footer p {
			font-size: 1.3rem;
		}
	}