@charset "utf-8";
/* CSS Document */


section{
	margin-top: 5vh;
}

.hide{
	display: none;
}

/*ファーストビュー*/


.first_view{
	margin-top: 0;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	background: url("../img/0.png") no-repeat,
				url("../img/001.png") no-repeat;
	background-size: 60%,
					 90%;
	background-position: center,center;
}

.logo{
	width: 50px;
	margin: 0 auto;
	padding-top: 40vh;
}

.top_text{
	margin-top: 12rem;
}

.top_text p{
	color: #333;
	text-align: center;
	font-size: 1.2rem;
	letter-spacing: 2px;
	line-height: 3.5rem;
	text-shadow: 0 0 8px #777;
}

.top_text p:last-child{
	font-size: 1.4rem;
}




/*インフォメーション*/


.infomation{
	width: calc(100% - 96px);
	height: 100vh;
	min-height: 650px;
	margin-right: 96px;
}

.infomation h2{
	height: 15vh;
	padding: 5rem 0 2rem 10%;
	font-size: 1.8rem;
	letter-spacing: 3px;
}

.info_pic{
	width: 100%;
	height: 60vh;
	overflow: hidden;
}

.info_content{
	width: 80%;
	height: 25vh;
	padding: 5vh 0 5vh 10%;
}

.info_headding h3{
	font-size: 1.6rem;
	letter-spacing: 2px;
	line-height: 3.5rem;
}

.info_tag p{
	font-size: 1rem;
	letter-spacing: 2px;
	line-height: 3.5rem;
}

.info_text p{
	text-align: left;
	font-size: 1.2rem;
	letter-spacing: 2px;
	line-height: 3.5rem;
}

.info_pagelink{
	display: none;
	width: 20%;
	padding-top: 20vh;
}
.info_pagelink p{
	display: inline-block;
	padding: 1rem 2rem;
	margin: 0 auto;
	font-size: 1rem;
	letter-spacing: 1px;
	color: #fff;
	background-color: #2F2C33;
	border-radius: 5rem;
	text-align: center;
}



/*ニュース*/

.news{
	width: calc(100% - 96px);
	height: 100vh;
	min-height: 650px;
	margin-right: 96px;
	background-color: #FDD777;
}

.news h2{
	height: 15vh;
	padding: 5rem 0 2rem 10%;
	font-size: 1.8rem;
	letter-spacing: 3px;
}

.news_block{
	border-radius: 10px;
	width: 80%;
	margin: 0 auto;
	padding: 5vh;
	/*background: #fff;*/
}

/*コピペ*/


.news_card {
  padding: 0 1.7rem;
  width: 30%;
}
.news_card .wrapper {
  border-radius: 2rem;
  background-color: #fff;
  min-height: 350px;
  position: relative;
  overflow: hidden;
}
.news_card .wrapper:hover .data {
  transform: translateY(0);
}
.news_card .data {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(calc(70px + 1em));
  transition: transform 0.3s;
}
.news_card .data .content {
  padding: 1em;
  position: relative;
  z-index: 1;
}
.news_card .tag {
  font-size: 12px;
  letter-spacing: 1px;
}
.news_card .title {
  margin-top: 10px;
}
.news_card .text {
  height: 70px;
  margin-top: 10px;
}
.news_card input[type='checkbox'] {
  display: none;
}
.news_card input[type='checkbox']:checked + .menu-content {
  transform: translateY(-60px);
}


.news_card .wrapper:hover .menu-content span {
  transform: translate(-50%, -10px);
  opacity: 1;
}
.news_card .header {
  padding: 1em;
}
.news_card .header::before, .news_card .header::after {
  content: '';
  display: table;
}
.news_card .header::after {
  clear: both;
}
.news_card .header .date {
  float: left;
  font-size: 12px;
}
.news_card .menu-content {
  float: right;
}
.news_card .menu-content li {
  margin: 0 5px;
  position: relative;
}
.news_card .menu-content span {
  transition: all 0.3s;
  opacity: 0;
}
.news_card .data {
  transform: translateY(calc(70px + 4em));
}
.news_card .button {
  display: block;
  width: 100px;
  margin: 2em auto 1em;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  position: relative;
  font-weight: 700;
}
.news_card .button::after {
  content: '\2192';
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  transition: all 0.3s;
}
.news_card .button:hover::after {
  transform: translate(5px, -50%);
  opacity: 1;
}




/*ニュースカード背景画像*/

.news1 .wrapper {
  background: #fff url("../img/hontowauso.jpeg")center/contain no-repeat;
}
.news2 .wrapper {
  background: #fff url("../img/machigaisagasi.jpeg")center/contain no-repeat;
}
.news3 .wrapper {
  background: #fff url("../img/warakora1.jpeg")center/contain no-repeat;
}




/*ここまで*/


.news_footer{
	width: 30%;
	margin: 0 auto;
	padding-top: 5vh;
}

.news_twitter_wrapper{
	text-align: center;
}

.news_twitter{
	width: 4rem;
	height: 4rem;
	padding-top: 1.25rem;
	font-size: 1rem;
	letter-spacing: 1px;
	color: #fff;
	background-color: #2F2C33;
	border-radius: 5rem;
	text-align: center;
}

.fluid3{
	width: 50%;
	height: auto;
}

.news_pagelink{
	text-align: center;
}
.news_pagelink p{
	display: inline-block;
	padding: 1rem 2rem;
	font-size: 1rem;
	letter-spacing: 1px;
	color: #fff;
	background-color: #2F2C33;
	border-radius: 5rem;
	text-align: center;
}


.news p,.news .title,.news span,.news a{
	display: inline-block;
	color: #fff;
	background-color: #333;
	padding: 3px;
}





/*backnumber*/


.backnumber{
	width: calc(100% - 96px);
	height: 100vh;
	margin-right: 96px;
	background-color: #fff;
}

.backnumber h2{
	height: 15vh;
	padding: 5rem 0 2rem 10%;
	font-size: 1.8rem;
	letter-spacing: 3px;
}

.bn_block{
	width: 80%;
	height: 40vw;
	margin: 0 auto;
	padding: 5%;
	background: #DEC3D3;
	display: grid;
    grid-gap: 5%;/* グリッドの間 */
}
.bn_block {
	border-radius: 10px;
	grid-template-columns: 30% 30% 30%;/* 列 */
	grid-template-rows: 50% 50%;/* 行 */
}





/*コピペbn*/


.bn_card {
  width: 100%;
}
.bn_card .wrapper {
  border-radius: 2rem;
  background-color: #fff;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}
.bn_card .wrapper:hover .data {
  transform: translateY(0);
}
.bn_card .data {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(calc(70px + 1em));
  transition: transform 0.3s;
}
.bn_card .data .content {
  padding: 1em;
  position: relative;
  z-index: 1;
}
.bn_card .tag {
  font-size: 12px;
}
.bn_card .title {
  margin-top: 10px;
}
.bn_card .text {
  height: 70px;
  margin-top: 10px;
}
.bn_card input[type='checkbox'] {
  display: none;
}
.bn_card input[type='checkbox']:checked + .menu-content {
  transform: translateY(-60px);
}


.bn_card .wrapper:hover .menu-content span {
  transform: translate(-50%, -10px);
  opacity: 1;
}
.bn_card .header {
  padding: 1em;
}
.bn_card .header::before, .bn_card .header::after {
  content: '';
  display: table;
}
.bn_card .header::after {
  clear: both;
}
.bn_card .header .date {
  float: left;
  font-size: 12px;
}
.bn_card .menu-content {
  float: right;
}
.bn_card .menu-content li {
  margin: 0 5px;
  position: relative;
}
.bn_card .menu-content span {
  transition: all 0.3s;
  opacity: 0;
}
.bn_card .data {
  transform: translateY(calc(70px + 4em));
}
.bn_card .button {
  display: block;
  width: 100px;
  margin: 2em auto 1em;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  position: relative;
  font-weight: 700;
}
.bn_card .button::after {
  content: '\2192';
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  transition: all 0.3s;
}
.bn_card .button:hover::after {
  transform: translate(5px, -50%);
  opacity: 1;
}



.bn_pagelink{
	padding-top: 5vh;
	text-align: center;
}
.bn_pagelink p{
	display: inline-block;
	padding: 1rem 2rem;
	font-size: 1rem;
	letter-spacing: 1px;
	color: #fff;
	background-color: #2F2C33;
	border-radius: 5rem;
	text-align: center;
}

/*
.backnumber p,.backnumber .title,.backnumber span,.backnumber a{
	display: inline-block;
	color: #fff;
	background-color: #333;
	padding: 3px;
}
*/




/*bnカード背景画像*/
.bn1 .wrapper {
  background: #fff url("../img/image20.jpg")center/contain no-repeat;
}
.bn2 .wrapper {
  background: #fff url("../img/image19.jpeg")center/contain no-repeat;
}
.bn3 .wrapper {
  background: #fff url("../img/comingsoon.png")center/contain no-repeat;
}
.bn4 .wrapper {
  background: #fff url("../img/comingsoon.png")center/contain no-repeat;
}
.bn5 .wrapper {
  background: #fff url("../img/comingsoon.png")center/contain no-repeat;
}
.bn6 .wrapper {
  background: #fff url("../img/comingsoon.png")center/contain no-repeat;
}




/*h2あしらい検討*/

.infomation h2::after{
	content: " | 次回公演";
	font-size: 1rem;
	letter-spacing: 3px;
}
.news h2::after{
	content: " | 新着情報";
	font-size: 1rem;
	letter-spacing: 3px;
}
.backnumber h2::after{
	content: " | 過去作品";
	font-size: 1rem;
	letter-spacing: 3px;
}







@media screen and (max-width:1000px){




	/*infomation*/

	.infomation{
		width: 100%;
		height:auto;
		margin-right: 0;
	}
	.info_pic{
		height: 40vh;
		overflow: hidden;
	}
	.info_content{
		width: 100%;
		height: 50vh;
		padding: 5vh 0 5vh 10%;
	}

	.info_text{
		padding-right: 5rem;
	}


	/*news*/

	.news{
		width: 100%;
		height:auto;
		margin-right: 0;
		padding-bottom: 3rem;
	}

	.news_card{
		padding: 1rem 1.7rem;
		width: 100%;
	}

	.news_card .wrapper {
		min-height: 250px;
	}

	/*backnumber*/

	.backnumber{
		width: 100%;
		height:auto;
		margin-right: 0;
	}

	.bn_block{
		grid-template-columns: 45% 45%;
		grid-template-rows: 30% 30% 30%;
	}
	.bn_block{
		height: 550px;
	}

}/*1000px*/




@media screen and (max-width:800px){

	.first_view{
		background-size: 80%,
						 110%;
	}


}/*800px*/







@media screen and (max-width:480px){

	.first_view{
		background-size: 120%,
						 350%;
	}

	.hide{
		display: block;
	}

	.news_block {
		width: 80%;
		padding: 5vh 0;
	}

	.news_card .data {
		transform: translateY(0);
	}

	.bn_block {
		grid-template-columns: 45% 45%;
		grid-template-rows: 30% 30% 30%;
	}

	.bn_block{
		width: 80%;
		height: 450px;
		background: #DEC3D3;
		display: grid;
		grid-gap: 5%;
	}

	.bn_card .data .button{
		display: none;
	}

	.bn_card .data {
		transform: translateY(0);
	}

}/*480px*/