@charset "UTF-8";


/*****************************************************
　アートな学び舎　
*****************************************************/
/* その他共通 
------------------------------------------------- */
/* ----- .block ----- */
.block + .block{
	margin:50px 0 0;
}
.block_inner{
	margin:0 50px;
}
.block_inner *{
	letter-spacing:0.025em;
	line-height:1.8;
}
.block_inner a{
	color:#d15e5e;
}
/* ----- .box ----- */
.box + .box{
	margin-top:30px;
}
.box .ttl{
	background:#fbf9f2;
	border-bottom:3px solid #a6a6a6;
	font-size:18px;
	font-size:1.8rem;
	font-weight:normal;
	letter-spacing:0.025em;
	line-height:1.4;
	margin:0 0 20px;
	padding:11px 28px;
}
.box .box_inner{
	margin:0 35px;
}
/* メインビジュアル 
------------------------------------------------- */
.main-visual{
	margin:35px 0 0;
	text-align:center;
}
/* アンカーリンク 
------------------------------------------------- */
.anchor-link{
	align-items:center;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin:35px 0 50px;
}
.anchor-link span + span:before{
	content:'/';
	font-size:14px;
	font-size:1.4rem;
	letter-spacing:0.025em;
	line-height:1.7;
}
.anchor-link a{
	font-size:14px;
	font-size:1.4rem;
	letter-spacing:0.025em;
	line-height:1.7;
	margin:0 1em;
}


/*****************************************************
　「アートな学び舎」について　
*****************************************************/
/* .as-summaryimg 
------------------------------------------------- */
.as-summaryimg{
	display:flex;
	justify-content:center;
	margin-top:50px;
}
.as-summaryimg .img{
	max-width:360px;
	width:34%;
}
.as-summaryimg .img + .img{
	margin-left:6%;
}
.as-summaryimg .img img{
	width:100%;
}
/* 全体構成 
------------------------------------------------- */
#overall-structure{
	margin:70px 0 0;
}
#overall-structure .os_ttl{
	background:#f2efe7;
	font-size:20px;
	font-size:2.0rem;
	font-weight:normal;
	letter-spacing:0.025em;
	line-height:1.5;
	margin:0 0 20px;
	padding:10px 30px;
}
/* ----- .os-block ----- */
#overall-structure .os-block{
	display:flex;
	justify-content:space-between;
	margin:50px 30px 0;
}
#overall-structure .os-block .img{
	max-width:250px;
	width:25%;
}
#overall-structure .os-block .profile{
	max-width:700px;
	width:68%;
}
#overall-structure .os-block .name{
	border-bottom:2px solid #bbb;
	font-size:22px;
	font-size:2.2rem;
	font-weight:normal;
	letter-spacing:0.025em;
	line-height:1.4;
	margin:0 0 15px;
	padding:0 10px 10px;
}
#overall-structure .os-block .txt{
	letter-spacing:0.025em;
	line-height:1.6;
	padding:0 10px;
	text-align:justify;
}
/* ----- .message ----- */
#overall-structure .message{
	margin:60px 30px 0;
}
#overall-structure .message .message_ttl{
	background:#fbf9f2;
	border-bottom:3px solid #a6a6a6;
	font-size:18px;
	font-size:1.8rem;
	font-weight:normal;
	letter-spacing:0.025em;
	line-height:1.4;
	margin:0 0 20px;
	padding:11px 28px;
}
#overall-structure .message .message_txt{
	margin:0 25px;
	text-align:justify;
}


/*****************************************************
　ラインナップ　
*****************************************************/
#lineup .lineup-block_ttl{
	background:#fbf9f2;
	border-bottom:3px solid #a6a6a6;
	cursor:pointer;
	font-size:18px;
	font-size:1.8rem;
	font-weight:normal;
	letter-spacing:0.025em;
	line-height:1.4;
	margin:0 0 20px;
	padding:11px 28px;
	position:relative;
}
.lineup-block .lineup-block_ttl:after{
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-top:8px solid #040404;
	content:'';
	display:block;
	position:absolute;
	right:30px;
	top:50%;
	transform:translate(0,-50%);
	z-index:0;
}
.lineup-block.open .lineup-block_ttl:after{
	border-bottom:8px solid #040404;
	border-top:8px solid transparent;
}
.lineup-block .lineup-block_inner{
	margin:0 auto;
	max-width:845px;
	width:100%;
}
/* 年間ラインナップ 
------------------------------------------------- */
.annual-lineup_ttl{
	font-size:22px;
	font-size:2.2rem;
	letter-spacing:0.025em;
	line-height:1.4;
	margin-bottom:15px;
}
#annual-lineup .imgwrap_inner{
	display:flex;
	justify-content:space-between;
}
#annual-lineup .imgwrap_inner .img{
	border:1px solid #c3c4c4;
	box-sizing:border-box;
	max-width:400px;
	width:48%;
}
/* 各イベント 
------------------------------------------------- */
#lineup .event-list{
	margin:25px 0 0;
}
#lineup .event-list .le-item{
	align-items:center;
	border-bottom:2px solid #e1e1e1;
	display:flex;
	justify-content:space-between;
	padding:30px 20px;
}
#lineup .event-list .le-item:last-child{
	margin-bottom:60px;
}
/* ----- .img ----- */
#lineup .event-list .le-item .img{
	max-width:190px;
	width:24%;
}
/* ----- .title ----- */
#lineup .event-list .le-item .title{
	font-size:22px;
	font-size:2.2rem;
	font-weight:normal;
	letter-spacing:0.025em;
	line-height:1.4;
	margin-bottom:10px;
}
/* ----- .txt ----- */
#lineup .event-list .le-item .txt{
	max-width:570px;
	width:71%;
}
/* 「詳しく見る」ボタン */
#lineup .event-list .le-item .small-btn{
	background:#f8f4e6;
	font-size:14px;
	font-size:1.4rem;
	margin:30px 0 0 auto;
	max-width:245px;
}
#lineup .event-list .le-item .small-btn a{
	color:#080808;
	padding:8px 0;
}
#lineup .event-list .le-item .small-btn a:before{
	display:none;
}


/*****************************************************
　開催予定のワークショップ　
*****************************************************/
#event .block_inner{
	margin:0;
}
/* 劇場主催ラインナップ 
------------------------------------------------- */
.as-event_itemarea{
	display:flex;
	flex-wrap:wrap;
}
.ae-item{
	margin:0 5.3% 85px 0;
	max-width:243px;
	width:21%;
}
.ae-item:nth-child(4n){
	margin:0 0 85px;
}
.ae-item .thumb{
	position:relative;
}
.ae-item .status{
	background:#fff;
	border:2px solid #e28484;
	bottom:55px;
	box-sizing:border-box;
	color:#e28484;
	display:inline-block;
	font-weight:700;
	letter-spacing:0.075em;
	left:-10px;
	line-height:31px;
	position:absolute;
	text-align:center;
	width:109px;
	z-index:2;
}
.ae-item .status.cancel,
.ae-item .status.enki,
.ae-item .status.end{
	background:#e28484;
	color:#fff;
}
.ae-item .label{
	bottom:9px;
	left:-10px;
	position:absolute;
	width:100%;
	z-index:2;
}
.ae-item .category{
	margin:20px 0 0;
}
.ae-item .category span{
	background:#f8f4e6;
	border:1px solid #060001;
	color:#222;
	display:inline-block;
	font-size:14px;
	font-size:1.4rem;
	letter-spacing:0.025em;
	margin:0 8px 8px 0;
	padding:5px 25px;
}
.ae-item .category span.independent,
.ae-item .category span.cosponsor{
	background:#222;
	color:#fff;
}
.ae-item .ttl,
.ae-item .date,
.ae-item .place,
.ae-item .cast{
	display:block;
	font-weight:400;
	letter-spacing:0.025em;
	line-height:1.4;
}
.ae-item .place,
.ae-item .cast,
.ae-item .more{
	font-size:14px;
	font-size:1.4rem;
}
.ae-item .ttl{
	margin:2px 0 0;
}
.ae-item .place{
	margin:5px 0 0;
}
.ae-item .cast{
	margin:10px 0 0;
}
.ae-item .more{
	color:#222;
	margin:22px 0 0 auto;
	text-align:center;
	width:150px;
}
.ae-item .more a{
	color:inherit;
	display:block;
	padding:8px 0 9px;
	position:relative;
	transition:all 0.4s ease-out;
}
.ae-item .more a:hover{
	background:#222;
	color:#fff;
	opacity:1;
}
.ae-item .more a:before,
.ae-item .more a:after{
	background:#bbb;
	content:'';
	height:2px;
	transition:all 0.4s ease-out;
	position:absolute;
	width:100%;
}
.ae-item .more a:before{
	top:0;
	right:0;
}
.ae-item .more a:after{
	bottom:0;
	left:0;
}
.ae-item .more a:hover:before,
.ae-item .more a:hover:after{
	transition:all 0.6s ease-out;
	width:0;
}
/* ----- 公演・イベントなし ----- */
#event .none{
	margin:0 0 50px;
	text-align:center;
}


@media screen and (max-width:1024px){
	/*****************************************************
	　アートな学び舎　
	*****************************************************/
	/* その他共通 
	------------------------------------------------- */
	/* ----- .block ----- */
	.block + .block{
		margin:6.25vw 0 0;
	}
	.block_inner{
		margin:0 3.25vw;
	}
	/* ----- .box ----- */
	.box + .box{
		margin-top:7.5vw;
	}
	.box .ttl{
		border-bottom-width:0.37vw;
		font-size:3.6vw;
		margin:0 0 3.12vw;
		padding:1.37vw 3.5vw;
	}
	.box .box_inner{
		margin:0 4.37vw;
	}
	/* メインビジュアル 
	------------------------------------------------- */
	.main-visual{
		margin:4.37vw 0 0;
	}
	/* アンカーリンク 
	------------------------------------------------- */
	.anchor-link{
		margin:4.37vw 0 6.25vw;
	}
	.anchor-link span + span:before,
	.anchor-link a{
		font-size:3vw;
	}


	/*****************************************************
	　「アートな学び舎」について　
	*****************************************************/
	/* .as-summaryimg 
	------------------------------------------------- */
	.as-summaryimg{
		margin-top:6.25vw;
	}
	.as-summaryimg .img{
		max-width:none;
		width:47%;
	}
	/* 全体構成 
	------------------------------------------------- */
	#overall-structure{
		margin:8.75vw 0 0;
	}
	#overall-structure .os_ttl{
		font-size:3.33vw;
		margin:0 0 2.5vw;
		padding:1.25vw 3.75vw;
	}
	/* ----- .os-block ----- */
	#overall-structure .os-block{
		display:block;
		margin:6.25vw 3.75vw 0;
	}
	#overall-structure .os-block .img,
	#overall-structure .os-block .profile{
		max-width:none;
		width:auto;
	}
	#overall-structure .os-block .img{
		margin-bottom:3.37vw;
		text-align:center;
	}
	#overall-structure .os-block .img img{
		width:60vw;
	}
	#overall-structure .os-block .name{
		border-width:0.25vw;
		font-size:3.9vw;
		margin:0 0 1.87vw;
		padding:0 1.25vw 1.25vw;
	}
	#overall-structure .os-block .txt{
		padding:0 1.25vw;
	}
	/* ----- .message ----- */
	#overall-structure .message{
		margin:7.5vw 3.75vw 0;
	}
	#overall-structure .message .message_ttl{
		border-width:0.37vw;
		font-size:3.25vw;
		margin:0 0 2.5vw;
		padding:1.37vw 3.5vw;
	}
	#overall-structure .message .message_txt{
		margin:0 3.12vw;
	}


	/*****************************************************
	　ラインナップ　
	*****************************************************/
	#lineup .lineup-block_ttl{
		border-width:0.37vw;
		font-size:3.25vw;
		margin:0 0 2.5vw;
		padding:1.37vw 3.5vw;
	}
	.lineup-block .lineup-block_ttl:after{
		border-left-width:0.87vw;
		border-right-width:0.87vw;
		border-top-width:1vw;
		right:3.75vw;
	}
	.lineup-block.open .lineup-block_ttl:after{
		border-bottom-width:1vw;
		border-top-width:1vw;
	}
	.lineup-block .lineup-block_inner{
		box-sizing:border-box;
		max-width:none;
		padding:0 4.37vw;
	}
	/* 年間ラインナップ 
	------------------------------------------------- */
	.annual-lineup_ttl{
		font-size:3.25vw;
		margin-bottom:1.87vw;
	}
	#annual-lineup .imgwrap_inner{
		display:block;
	}
	#annual-lineup .imgwrap_inner .img{
		border-width:0.12vw;
		max-width:none;
		width:auto;
	}
	#annual-lineup .imgwrap_inner .img + .img{
		margin-top:4%;
	}
	#annual-lineup .imgwrap_inner .img img{
		width:100%;
	}
	/* 各イベント 
	------------------------------------------------- */
	#lineup .event-list{
		margin:6.25vw 0 0;
	}
	#lineup .event-list .le-item{
		border-width:0.25vw;
		display:block;
		padding:3.75vw 0;
	}
	#lineup .event-list .le-item:last-child{
		margin-bottom:7.5vw;
	}
	/* ----- .img ----- */
	#lineup .event-list .le-item .img{
		max-width:none;
		text-align:center;
		width:auto;
	}
	#lineup .event-list .le-item .img img{
		width:60vw;
	}
	/* ----- .title ----- */
	#lineup .event-list .le-item .title{
		font-size:3.9vw;
		margin-bottom:1.25vw;
		margin-top:1.25vw;
	}
	/* ----- .txt ----- */
	#lineup .event-list .le-item .txt{
		max-width:none;
		width:auto;
	}
	/* 「詳しく見る」ボタン */
	#lineup .event-list .le-item .small-btn{
		font-size:2.75vw;
		margin:4.37vw 0 0 auto;
		max-width:none;
		width:29.75vw;
	}
	#lineup .event-list .le-item .small-btn a{
		padding:1.62vw 0;
	}


	/*****************************************************
	　開催予定のワークショップ　
	*****************************************************/
	/* 劇場主催ラインナップ 
	------------------------------------------------- */
	.ae-item{
		margin:0 4vw 10.62vw;
		max-width:none;
		width:39.5vw;
	}
	.ae-item:nth-child(4n){
		margin:0 4vw 10.62vw;
	}
	.ae-item .status{
		border-width:0.25vw;
		bottom:9vw;
		left:-1.87vw;
		line-height:4.87vw;
		width:15vw;
	}
	.ae-item .label{
		bottom:1.87vw;
		left:-1.87vw;
	}
	.ae-item .category{
		margin:3vw 0 0;
	}
	.ae-item .category span{
		border-width:0.12vw;
		font-size:2.25vw;
		margin:0 1.25vw 1.25vw 0;
		padding:5px 25px;
	}
	.ae-item .place,
	.ae-item .cast,
	.ae-item .more{
		font-size:2.25vw;
	}
	.ae-item .ttl{
		margin:0.62vw 0 0;
	}
	.ae-item .place{
		margin:0.62vw 0 0;
	}
	.ae-item .cast{
		margin:1.5vw 0 0;
	}
	.ae-item .more{
		font-size:2.75vw;
		margin:4.37vw auto 0;
		width:29.75vw;
	}
	.ae-item .more a{
		padding:1.62vw 0;
	}
	.ae-item .more a:before,
	.ae-item .more a:after{
		height:0.37vw;
	}
	/* ----- 公演・イベントなし ----- */
	#event .none{
		margin:0 0 6.25vw;
	}
}