@charset "utf-8";

/* fonts
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@600&display=swap');

/* reset
================================================== */
*:where(:not(iframe,img,svg):not(svg *)){all:unset;display:revert;}
*,*::before,*::after{box-sizing:border-box;}
body{position:relative;width:100%;font-size:18px;line-height:2;color:#000;font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif ;
;font-weight:400;font-feature-settings:'palt';background:#FFF;-webkit-text-size-adjust:100%;}
footer,header,main,section,picture{display:block;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
img{width:100%;height:auto;vertical-align:bottom;}
a{margin:0;padding:0;color:#000;vertical-align:bottom;background:transparent;cursor:pointer;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}


/* Daughter
================================================== */

/* common
-------------------------------------------------- */
:root{
	--content-width:980px;
	--content-padding:30px;
	--title-width:1050px;
	--font-serif:'Noto Serif JP',serif;
	--font-medium:500;
	--font-bold:700;
	--border-color:rgba(0,0,0,.12);
}
@media screen and (max-width:768px){
	:root{
		--content-padding:20px;
	}
}

body{

}
.contents{
	padding:0 var(--content-padding);
}
.contents > *{
	margin:0 auto;
}
.contents_title{
	position:relative;
	max-width:var(--title-width);
	z-index:100;
}
.contents_image_title{
	position:relative;
}
.contents_image_title span{
	position:absolute;
	top:37px;
	right:80px;
	display:block;
}
.artist_list{
	max-width:var(--content-width);
}
.artist_details{
	padding:51px 0 52px;
}
.artist_details:first-of-type{
	padding-top:0;
}
.artist_details:last-of-type{
	padding-bottom:0;
}
.artist_details + .artist_details{
	border-top:1px solid var(--border-color);
}
.artist_details_inner{
	display:grid;
	gap:0 40px;
}
.artist_details_inner.large_thumbnail{
	grid-template-columns:min(34.6154vw,360px) 1fr;
}
.artist_details_inner.small_thumbnail{
	grid-template-columns:240px 1fr;
}
.artist_thumbnail{
	padding-top:9px;
}
.artist{
	display:flex;
	flex-direction:column-reverse;
}
.name{
	font-size:28px;
	line-height:1.5;
	font-family:var(--font-serif);
	font-weight:var(--font-medium);
}
.title{
	margin-bottom:1px;
	font-size:20px;
	line-height:1.5;
	font-family:var(--font-serif);
}
.profile{
	margin-top:14px;
}
.performance{
	margin-top:41px;
	font-size:20px;
	line-height:1.5;
	font-family:var(--font-serif);
	font-weight:var(--font-medium);
}
.work{
	margin-top:16px;
	font-size:16px;
}
.animation{
	opacity:0;
	transform:translateY(50px);
	transition:1s;
}
.animation.active{
	opacity:1;
	transform:translateY(0);
}
.fadein{
	opacity:0;
	transition:1s;
}
.fadein.active{
	opacity:1;
	transform:translateY(0);
}

/* parts */
b{
	font-weight:var(--font-bold);
}
i{
	font-style:italic;
}
u{
	text-decoration:underline;
}
.red{
	color:#E60027;
}
.blue{
	color:#2500AD;
}
.green{
	color:#008A0B;
}
#news a,
#theater a{
	text-decoration:underline;
}

@media screen and (max-width:768px){
	body{
		font-size:14px;
	}
.contents_image_title span{
	top:16px;
	right:10px;
}
	.artist_details{
		padding:45px 0 39px;
	}
	.artist_details_inner{
		gap:21px 0;
	}
	.artist_details_inner.large_thumbnail,
	.artist_details_inner.small_thumbnail{
		grid-template-columns:100%;
	}
	.artist_thumbnail{
		padding-top:0;
	}
	.name{
		font-size:20px;
	}
	.title{
		margin-bottom:3px;
		font-size:15px;
	}
	.profile{
		margin-top:12px;
	}
	.performance{
		margin-top:25px;
		font-size:15px;
	}
	.work{
		margin-top:13px;
		font-size:14px;
	}
}

/* footer
-------------------------------------------------- */
footer{
	/*
	padding:43px var(--content-padding) 45px;*/

}
footer .bg1{
	background: rgba(255,255,255,0.8);
	padding: 43px 10px 43px 10px;
}
footer .bg1 br{
	display: none;
}

@media screen and (max-width:600px){
	footer .bg1 p{
		/*
		text-align: left;*/
	}
	footer .bg1 br{
		display: block;
	}
}


footer .bg2{
	padding-bottom: 30px;
	color: #ffffff;
}



footer p{
	font-size:14px;
	font-weight: bold;
	text-align:center;
	line-height: 1.7em;
}
@media screen and (max-width:768px){
	footer{
		padding-top:36px;
		padding-bottom:36px;
	}
	footer p{
		font-size:12px;
	}
}

footer p.mt40{
	margin-top: 40px;
	display: block;
}

/* navigation
-------------------------------------------------- */
#menu{
	position:fixed;
	top:40px;
	left:40px;
	width:38px;
	height:38px;
	cursor:pointer;
	z-index:100000;
}
#menu span{
	position:absolute;
	display:block;
	width:38px;
	height:2px;
	background:#000;
	transition:0.3s;
}
#menu span:nth-of-type(1){
	top:7px;
}
#menu span:nth-of-type(2){
	top:18px;
}
#menu span:nth-of-type(3){
	top:29px;
}
#menu.open span:nth-of-type(1){
	width:50px;
	transform:translate(-6px,11px) rotate(-45deg);
}
#menu.open span:nth-of-type(2){
	opacity:0;
}
#menu.open span:nth-of-type(3){
	width:50px;
	transform:translate(-6px,-11px) rotate(45deg);
}
#navigation{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100px;
	margin-top:-120px;
	text-align:center;
	background:#fff;
	opacity:0;
	visibility:hidden;
	transition:0.8s;
	z-index:10000;
}
.navigation_wrapper{
	position:relative;
	display:grid;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100vh;
}
.navigation_inner{
	opacity:0;
	transform:translateY(-120px);
	transition:0.8s;
}
.navigation_logo{
	width:290px;
	max-width: calc(100% - 40px);
	margin:0 auto;
}
.navigation_link{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:25px 50px;
	width:700px;
	margin:30px auto 0;
	font-size:20px;
}
.navigation_link a{
	display:block;
}
.navigation_link span{
	display:block;
	cursor:pointer;
}
.sns_link{
	display:flex;
	justify-content:center;
	gap:0 30px;
	width:fit-content;
	margin:68px auto 0;
}
.sns_link .icon{
	display:grid;
	justify-content:center;
	align-items:center;
	width:44px;
	height:44px;
	padding:10px;
	border-radius:50%;
	background:#000;
}
.sns_link .logotype{
	display:block;
	height:44px;
}
.sns_link .logotype img{
	width:auto;
	height:44px;
	padding:8px 0;
}
#navigation.open{
	height:100vh;
	margin-top:0;
	opacity:1;
	visibility:visible;
}
.navigation_inner.open{
	opacity:1;
	transform:translateY(0);
}
@media screen and (max-width:768px){
	#menu{
		top:20px;
		left:20px;
		width:30px;
		height:30px;
	}
	#menu span{
		width:30px;
	}
	#menu span:nth-of-type(1){
		top:4px;
	}
	#menu span:nth-of-type(2){
		top:14px;
	}
	#menu span:nth-of-type(3){
		top:24px;
	}
	#menu.open span:nth-of-type(1){
		width:38px;
		transform:translate(-4px,10px) rotate(-45deg);
		
	}
	#menu.open span:nth-of-type(2){
		opacity:0;
	}
	#menu.open span:nth-of-type(3){
		width:38px;
		transform:translate(-4px,-10px) rotate(45deg);
	}
	#navigation{
		overscroll-behavior:contain;
		overflow-y:scroll;
		scrollbar-width:none;
		touch-action:none;
	}
	.navigation_logo{
		width:180px;
	}
	.navigation_link{
		display:block;
		justify-content:unset;
		flex-wrap:unset;
		gap:0;
		width:100%;
		margin-top:22px;
		font-size:18px;
	}
	.navigation_link li+li{
		margin-top:12px;
	}
	.sns_link{
		gap:0 20px;
		margin:25px auto 0;
	}
	.sns_link .icon{
		width:38px;
		height:38px;
		padding:10px;
	}
	.sns_link .logotype{
		height:38px;
	}
	.sns_link .logotype img{
		height:38px;
		padding:5px 0;
	}
}
@media (orientation:landscape){
	.navigation_logo{
		padding-top:50px;
	}
	.sns_link{
		padding-bottom:50px;
	}
}

/* modal
-------------------------------------------------- */
#modal{
	position:fixed;
	top:0;
	left:0;
	display:none;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100vh;
	background:rgba(0,0,0,0.8);
	overflow:hidden;
	z-index:200000;
}
#modal.active{
	display:grid;
}
.modal_wrapper{
	width:min(100vw,1000px);
}
.modal_inner{
	position:relative;
	width:100%;
	padding:48px 20px;
}
.youtube{
	width:100%;
	aspect-ratio:16 / 9;
}
.youtube iframe{
	width:100%;
	height:100%;
	vertical-align:bottom;
}
.close{
	position:absolute;
	top:0;
	right:20px;
	width:38px;
	height:38px;
	cursor:pointer;
}
.close::before,
.close::after{
	position:absolute;
	top:18px;
	left:-6px;
	display:block;
	width:50px;
	height:2px;
	background:#FFF;
	content:'';
}
.close::before{
	transform:rotate(45deg);
}
.close::after{
	transform:rotate(-45deg);
}
@media screen and (max-width:768px){
	#modal{
		overscroll-behavior:contain;
		overflow-y:scroll;
		scrollbar-width:none;
		touch-action:none;
	}
	.modal_inner{
		padding:40px 10px;
	}
	.close{
		right:10px;
		width:30px;
		height:30px;
	}
	.close::before,
	.close::after{
		top:14px;
		left:-4px;
		width:38px;
	}
}

/* #banner
-------------------------------------------------- */
#banner{
	width:100%;
	max-width:1040px;
	margin:35px auto 0;
	padding:0 30px;
}
@media screen and (max-width:768px){
	#banner{
		margin-top:20px;
		padding:0 20px;
	}
}

/* #news
-------------------------------------------------- */
#news .contents{
	padding-top:73px;
	padding-bottom:100px;
	background-color: #ffffff;
	background: rgba(255,255,255,0.8);
}
#news .contents.typ1{
	background: none;
}
#news .contents h2{
	text-align: center;
	color: #d6063a;
	font-size: 30px;
	font-weight: bold;
}
@media screen and (max-width:768px){
	#news .contents h2{
		font-size: 24px;
	}
}
@media screen and (max-width:600px){
	#news .contents h2{
		font-size: 20px;
	}
}


#news .contents h2.typ1{
	color: #ffffff;
}
#news .contents .banner{
	display: block;
	width: 370px;
	margin: auto;
	margin-bottom: 30px;
	transition-duration: 0.3s;
	max-width:calc(100% - 40px);
}
@media screen and (max-width:600px){
	#news .contents .banner{
		width: 250px;
	}
}




#news .contents .banner:hover{
	opacity: 0.5;
}
#news .contents .banner img{
	max-width: 100%;
}
.news_title img{

}
.news_list{
	max-width:var(--content-width);
	margin-top:49px;

}
.news_item{
	padding:15px 0 17px;
	border-top:1px solid #9fa0a0;
}

#news_contents .news_list{
	color: #ffffff;
}
#news_contents .news_list a{
	color: #ffffff;
	transition-duration: 0.3s;
}
#news_contents .news_list a:hover{
	opacity: 0.5;
}
#news_contents .news_item{
	border-top:1px solid #ffffff;
}

.news_content{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:0 30px;
}
.news_date{
	font-weight:var(--font-bold);
}
.news_link{
	max-width:var(--content-width);
	margin-top:12px;
	text-align:right;
}
.news_link a{
	position:relative;
	display:inline-block;
	padding-right:13px;
	font-size:20px;
	font-weight:var(--font-bold);
	text-decoration:none !important;
}
.news_link a::after{
	position:absolute;
	top:19px;
	right:1px;
	width:6px;
	height:6px;
	border-top:1px solid #000;
	border-right:1px solid #000;
	transform:rotate(45deg);
	content:'';
}
@media screen and (max-width:768px){
	#news .contents{
		padding-top:33px;
		padding-bottom:50px;
	}
	.news_title img{
		width:79px;
	}
	.news_list{
		margin-top:32px;
	}
	.news_item{
		padding:12px 0 14px;
	}
	.news_content{
		grid-template-columns:100%;
		gap:1px 0;
	}
	.news_link{
		margin-top:7px;
	}
	.news_link a{
		padding-right:11px;
		font-size:16px;
	}
	.news_link a::after{
		top:16px;
		right:2px;
		width:5px;
		height:5px;
	}
	#news .fadein{
		opacity:1;
		transform:translateY(0);
	}
	#news .animation{
		opacity:1;
		transform:translateY(0);
	}
}

/* #introduction
-------------------------------------------------- */
#introduction .contents{
	padding-top:73px;
	padding-bottom:92px;
}
.introduction_title span{
	width:310px;
}
.introduction_subtitle,
.introduction_text{
	max-width:var(--content-width);
}
.introduction_subtitle{
	font-size:22px;
	font-family:var(--font-serif);
	font-weight:var(--font-medium);
}
.introduction_text{
	margin-top:34px;
}
@media screen and (max-width:768px){
	#introduction .contents{
		padding-top:37px;
		padding-bottom:44px;
	}
	.introduction_title span{
		width:194px;
	}
	.introduction_subtitle{
		font-size:15px;
	}
	.introduction_text{
		margin-top:20px;
	}
}

/* #story
-------------------------------------------------- */
#story .contents{
	padding-top:75px;
}
.story_title span{
	width:124px;
}
.story_text{
	max-width:var(--content-width);
}
@media screen and (max-width:768px){
	#story .contents{
		padding-top:37px;
	}
	.story_title span{
		width:72px;
	}
}

/* #cast
-------------------------------------------------- */
#cast .contents{
	padding-top:94px;
}
#cast .artist_list{
	margin-top:3px;
}
.cast_title img{
	width:132px;
}
@media screen and (max-width:768px){
	#cast .contents{
		padding-top:47px;
	}
	#cast .artist_list{
		margin-top:11px;
	}
	.cast_title img{
		width:77px;
	}
}

/* #staff
-------------------------------------------------- */
#staff .contents{
	padding-top:95px;
	padding-bottom:92px;
}
#staff .artist_list{
	margin-top:-33px;
}
.staff_title img{
	width:119px;
}
	@media screen and (max-width:768px){
	#staff .contents{
		padding-top:47px;
		padding-bottom:44px;
	}
	#staff .artist_list{
		margin-top:-11px;
	}
	.staff_title img{
		width:69px;
	}
}

/* #music
-------------------------------------------------- */
#music .contents{
	padding-top:75px;
	padding-bottom:92px;
}
#music .artist_list{
	margin-top:40px;
}
.music_title img{
	width:145px;
}
@media screen and (max-width:768px){
	#music .contents{
		padding-top:34px;
		padding-bottom:44px;
	}
	#music .artist_list{
		margin-top:32px;
	}
	.music_title img{
		width:84px;
	}
}

/* #comments
-------------------------------------------------- */
#comments .contents{
	padding-top:65px;
	padding-bottom:75px;
}
.comments_title span{
	width:250px;
}
.comments_list{
	display:grid;
	gap:52px 0;
	text-align:center;
}
.comments_details{
	display:flex;
	flex-direction:column-reverse;
}
.commenter{
	margin-top:10px;
}
.commenter_name{
	font-size:24px;
	line-height:1.5;
	font-weight:700;
}
.commenter_title{
	font-size:14px;
	line-height:1.5;
}
.comments_text{
	font-family:var(--font-serif);
	font-weight:var(--font-medium);
}
@media screen and (max-width:768px){
	#comments .contents{
		padding-top:37px;
		padding-bottom:47px;
	}
	.comments_title span{
		width:145px;
	}
	.comments_list{
		gap:34px 0;
		text-align:left;
	}
	.commenter{
		margin-top:13px;
	}
	.commenter_name{
		font-size:20px;
	}
	.commenter_title{
		margin-top:2px;
		font-size:12px;
	}
}


#comments{
}
#comments h2{
	font-size: 30px;
	text-align: center;
	color: #ffffff;
	font-weight: bold;
	margin-bottom: 15px;
}
@media screen and (max-width:768px){
	#comments h2{
		font-size: 24px;
	}
}

@media screen and (max-width:600px){
	#comments h2{
		font-size: 20px;
	}
}




#comments .btnflex{
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}
#comments .btnflex span{
	color: #ffffff;
	margin: -3px 5px 0px 5px;
}
@media screen and (max-width:768px){
	#comments .btnflex span{
		margin: 2px 5px 0px 5px;
	}
}

#comments .hidden {
display: none;
}

#comments .text2 {
  display: none;
}
#comments .button1{

}
#comments #b:checked ~ .text2 {
  display: block;
}
#comments #b:checked ~ .text1 {
  display: none;
}
#comments #a:checked ~ .text1 {
  display:block;
}
#comments #a:checked ~ .text2 {
  display:none;
}
#comments #b:checked ~ p .button2 {
	color:#999999;
	text-decoration: none;
}
#comments #a:checked ~ p .button1 {
	color:#999999;
	text-decoration: none;
}

#comments .text1,
#comments .text2{
	width: 1080px;
	margin: auto;
	max-width: calc(100% - 0px);
}


#comments .text1 .inner,
#comments .text2 .inner{
	/*
	display: flex;*/
	display: block;
}
@media screen and (max-width:600px){
	#comments .text1 .inner,
	#comments .text2 .inner{
	display: block;
	}
}


#comments .text1 .img,
#comments .text2 .img{
	width: 200px;
	display: block;
	margin: auto;
	margin-bottom: 30px;
}
@media screen and (max-width:768px){
	#comments .text1 .img,
	#comments .text2 .img{
		width: 150px;
		display: block;

	}
}
@media screen and (max-width:600px){
	#comments .text1 .img,
	#comments .text2 .img{
		width: 150px;
		display: block;
		margin: auto;
		margin-bottom: 30px;
	}
}



#comments .text1 .img img,
#comments .text2 .img img{
	max-width: 100%;
}

#comments .text1 .txtbox,
#comments .text2 .txtbox{
	width:600px;
	display: block;
	color: #ffffff;
	font-size: 16px;
	margin: auto;
	line-height: 2em;
	font-weight: bold;
}
@media screen and (max-width:768px){
	#comments .text1 .txtbox,
	#comments .text2 .txtbox{
		width:calc(100% - 170px);
	}
}

@media screen and (max-width:600px){
	#comments .text1 .txtbox,
	#comments .text2 .txtbox{
		width:calc(100% - 0px);
	}
}
#comments .text1 .txtbox b,
#comments .text2 .txtbox b{
	font-size: 120%;
}


#comments label {
  color:#ffffff;
  text-align: center;
  display: block;
	font-size: 16px;
	font-weight: bold;
	text-decoration: underline;
	cursor: pointer;

}
#comments label:first-child {

}












/* #theater
-------------------------------------------------- */
#theater .contents{
	padding-top:25px;
	padding-bottom:100px;
}
.theater_title img{
	width:187px;
}
.theater_table{
	width:100%;
	max-width:var(--content-width);
	margin-top:7px;
}
.theater_table thead{
	color:#FFF;
	font-weight:700;
	background-color:rgba(0,0,0,0.3);
}
.theater_table tbody tr{
	border-bottom:1px solid var(--border-color);
}
.theater_table th,
.theater_table td{
	padding:10px 25px 12px;
}
.theater_table td.area,
.theater_table td.release,
.theater_table td.notes{
	white-space:nowrap;
}
.theater_table td.theater{
	width:100%;
}
@media screen and (max-width:768px){
	#theater .contents{
		padding-top:11px;
		padding-bottom:50px;
	}
	.theater_title img{
		width:108px;
	}
	.theater_table{
		display:block;
		margin-top:8px;
	}
	.theater_table thead{
		display:none;
	}
	.theater_table tbody,
	.theater_table tbody tr,
	.theater_table tbody td{
		display:block;
	}
	.theater_table tbody tr{
		border-top:3px solid var(--border-color);
		border-bottom:2px solid var(--border-color);
	}
	.theater_table tbody tr+tr{
		margin-top:25px;
	}	
	.theater_table tbody td{
		display:flex;
		width:100%;
		padding:12px 0 14px;
		border-bottom:1px solid var(--border-color);
	}
	.theater_table tbody td::before{
		display:block;
		margin-right:auto;
		font-weight:var(--font-bold);
		content:attr(data-label);
	}
	.theater_table td.area,
	.theater_table td.release,
	.theater_table td.notes{
		white-space:unset;
	}
}


/* bg
-------------------------------------------------- */
.bg{
	background: url("../image/bg.webp")no-repeat center;
	background-size: cover;
	background-attachment: fixed;
}

@media screen and (max-width:600px){
	.bg{
		background: url("")no-repeat center;
	}
	.bg::before {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background: url("../image/bg.webp");
	background-size:cover;
	}
}



/* header
-------------------------------------------------- */
header h1{
	width: 860px;
	margin: auto;
	display: block;
	max-width: 100%;
}
header h1 img{
	max-width: 100%;
}



/* #news_contents
-------------------------------------------------- */
#news_contents h1{
	width:580px;
	margin:0 auto;
	padding-top:35px;
}
#news_contents #news .contents{
	padding-top:0px;
}
#news_contents .news_title{
	max-width:var(--content-width);
	text-align:center;
}
#news_contents .news_item{
	padding:46px 0 47px;
}
#news_contents .date{
	font-size:16px;
	font-weight:var(--font-bold);
}
#news_contents .title{
	margin-top:4px;
	font-size:24px;
}
#news_contents .text{
	margin-top:18px;
}
@media screen and (max-width:768px){
	#news_contents h1{
		width:180px;
		padding-top:22px;
	}
	#news_contents #news .contents{
		padding-top:43px;
	}
	#news_contents .news_item{
		padding:27px 0 28px;
	}
	#news_contents .date{
		font-size:14px;
	}
	#news_contents .title{
		margin-top:1px;
		font-size:18px;
	}
	#news_contents .text{
		margin-top:13px;
	}
}


.h1_pc{
	display: block;
}
.h1_sp{
	display: none;
}

@media screen and (max-width:600px){
	.h1_pc{
		display: none;
	}
	.h1_sp{
		display: block;
	}
}