@charset "UTF-8";





/*mvtk banner*/


.mvtk_banner{
z-index: 100;
width:20%;	
position: absolute;
bottom:0%;
right:0;
display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
	padding:5px;
}



.mvtk_item{
	width:49%;
	margin-top:0px;
}


@media (max-width: 767px) {
	
.mvtk_banner{
	z-index: 100;
width:100%;	
position: relative;
bottom:0%;
left:0;
 justify-content:center;	
display: flex;
	 flex-wrap: wrap;
	background-color: hsla(274,100%,15%,0.45);
	}
	
	
	.mvtk_item{
	width:42%;
    margin: 10px 5px;
}
	
	
}


/*mvtk_modal*/



.mvtk_modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
 background-color:hsla(12,100%,8%,0.9);
    z-index: 1000;
    display: flex; /* Use flexbox to align children */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

#mvtk-widgets-container {
	 position: relative;
    max-width: 840px; /* Maximum width */
    width: 100%; /* Full width */

    box-sizing: border-box; /* Includes padding in width calculation */
}


.close_btn{
	 position: absolute;
	 top: -80px; /* Adjust the distance from the top */
    right: -20px; /* Adjust the distance from the right */
    width: 80px;
    cursor: pointer; /* Suggest clickable item */

}





/*base-kashi*/


 .kashi_l {
	position:fixed;
	width: 12%;
	 top:10%;
	left:0;
	  z-index:10;
  }


 .kashi_r {
	position:fixed;
	width: 14%;
	 top:40%;
	right:-2%;
	  z-index:10;
  }


.kashi__inner{
	 width: 100%;
	 position: relative;
    line-height: 0;
	opacity: 0.8;
}

.kashi__layer_a{
	 width: 100%;
	 position: absolute;
    line-height: 0;
	 top:0;
	left:0;
	opacity: 0.1;
}

.kashi__layer_b{
	 width: 100%;
	 position: absolute;
    line-height: 0;
	 top:0;
	left:0;
	opacity: 1;
}



 .neko_01 {
	position:fixed;
	width: 10%;
	 top:10%;
	right:-2%;
	  z-index:10;
	 opacity: 0.8;
  }


 .neko_02 {
	position:fixed;
	width: 10%;
	 bottom:0%;
	left:-2%;
	  z-index:10;
	 opacity: 0.8;
  }





@media (max-width: 767px) {
	
 .kashi_l {
	position:fixed;
	width:30%;
	 top:20%;
	left:-2%;
	  z-index:10;
  }	
	
	 .kashi_r {
	position:fixed;
	width:33%;
	 top:50%;
	right:-5%;
	  z-index:10;
  }	
	
	
	
	 .neko_01 {
	position:fixed;
	width: 25%;
	 top:10%;
	right:-2%;
	  z-index:10;
	 opacity: 0.8;
  }


 .neko_02 {
	position:fixed;
	width: 25%;
	 bottom:0%;
	left:-2%;
	  z-index:10;
	 opacity: 0.8;
  }

	
	
}


/*YTPlayer*/


.ytplayer-wrapper {
	position: absolute;
	/* position: relative;*/
	top: 0;
	left: 0;
	width: 100%;
	/* height: 50vh;*/
	height: 100%;
	z-index: 0;
	opacity: 1;
	/*	overflow-x: hidden;
	overflow-y: hidden;*/
	background-color: #5F0227;
}


.ytplayer-overlay {
 /*   background-color: #000;*/
	 background-color: #000;
    opacity: 0.2;
    position: absolute; 
    top: 0; left: 0;
    bottom: 0; right: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}




/*slick slide*/


.slideWrapper{
	/*max-width: 600px;*/ /* ×1 */
	/*max-width: 1200px !important;*/ /* ×2 jsの数も修正 */

/*	overflow-x: hidden;
	overflow-y: hidden;*/
	opacity: 0;
	margin: auto;
	margin-bottom: 0rem !important;
/*	overflow-x: hidden;*/
}

.sliderwaku{
	position: relative;
	display: block;
	padding: 0px 10px 0;
	overflow: hidden;

	}


@media (max-width: 767px) {
	
	.sliderwaku{
	position: relative;
	display: block;
	padding: 0px 5px 0;
	overflow: hidden;

	}
}



.headerSlideArea {
    /*padding-top:140px;*/
    position: relative;
    width: 100%;
    /* max-width: 1400px;*/
    margin: auto;
    overflow-x: hidden;
    overflow-y: hidden;
    z-index: 9;
   /*cursor: pointer;*/
 height: 100%;
}

.headerSlide {
  /*width: 100vw;*/
   
  /*height:calc(100vh - 32px);*/
  /*height: 100vh;*/
  position: relative;
  top: 0;
  left: 0;
  margin: 0 auto;
  text-align: center;
    
   /* background-color: #000;*/
}

.slick-slide:not(.slick-current) {
  opacity: 1;
}

.headerSlide .slick-dots{
	  background-color: #000;
}


.slick-dots li {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 20px;
    margin: 10px 8px 0;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button:before {
    font-family: 'slick';
    font-size: 10px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
	margin: auto;
    content: '•';
    text-align: center;
    opacity: .5;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*slick loading*/
.headerSlide {
    display: none;
}
.headerSlide.slick-initialized {
    display: block;
}


/*headerSlide-inside*/


.headerSlide-inside{
    position: relative;
    width: 100%;
    height: 100%;
    /*border: 1px solid hsla(0,0%,54%,1.00);*/
    background-color: hsla(0,0%,100%,1.00);
	
	
	
}


.slide{
	 margin: 0px;
}




/*arrow*/

.slide-arrow{
  position: absolute;
  top: 50%;
  margin-top: -3%;
	width:2%;
	cursor: pointer;
	z-index:99;
	opacity: 0.7;
}

.slide-arrow:hover{
	opacity: 1;
}

.prev-arrow{
  left: 0;
 
}
.next-arrow{
  right:0px;

}


.slick-arrow.slick-disabled {
	opacity: 0;
}




.slick-dots li.slick-active button::before {
	opacity: 1;
	color: rgba(255,203,54,1.00);

}

@media (max-width: 767px) {
	.slide-arrow{
  top: 50%;
  margin-top: -10%;
	width:5%;
	cursor: pointer;
	z-index: 99;
	
}
	
	
	.slick-dots li {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 20px;
    margin: 0 8px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button:before {
    font-family: 'slick';
    font-size: 8px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
	margin: auto;
    content: '•';
    text-align: center;
    opacity: .5;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
}





/*slick photo slide*/



.slideWrapper_photo{
    padding: 0rem 0;
pointer-events: none;
	z-index: 5;
}


.sliderwaku_photo{
	display: block;
	padding: 0px 10px 0;
	overflow: hidden;	/*background-color: hsla(32,100%,46%,0.74);*/
	border-radius: 10px;
	}

.sliderwaku_photo img {
  border-radius: 10px; /* 角を10px丸める */
	border: 1px solid var(--link-border-color);
}





@media screen and (max-width: 767px) {
	
	
	#slide_a{

}
	

	
	
		.sliderwaku_photo{
	padding: 0px 5px 0;
	
}
	
	
	
}









.trailer-overlay {
	position: absolute;
	width:20%;
	top: 45%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index: 150;
  transition: all 0.2s ease 0s;
    opacity:1;
	 pointer-events: none;
}





.trailer-img{
	opacity: 0.8;
	transition: all 0.2s ease 0s;
	border: 1px solid var(--link-border-color);
}

.trailer-img:hover{
	opacity:1;
}


@media (max-width: 767px) {
	
	.trailer-wrapper{
		width:100%;
	}
	
}





.text-help{
	font-family: var(--help-font-family);
font-weight: 700;
font-style: normal;
/*	font-size:90%;*/
}


.modaal-close {
	position: fixed;
	right: 10px;
	top: 10px;
	color: #fff;
	cursor: pointer;
	opacity: 1;
	width: 100px;
	height: 100px;
	/* border-radius: 100%; */
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	background-image: url(../svg/close-icon.svg);
	background-repeat: no-repeat;
	background-position: center center;
	/* background: transparent; */
	background-color: hsla(0, 0%, 0%, 0);
	background-size: 100% 100% ;
}

.modaal-close img{
	width:100% !important;
}


@media screen and (max-width: 767px) {
.modaal-close {

	width: 70px;
	height: 70px;	
	
	
}

}

.bt_onair{
	
	position: absolute;
	left:0;
	right:0;
	top:61%;
	width:60%;
	margin-left: auto;
	margin-right: auto;
	opacity: 0;
}



.top_sns{
	
	position: absolute;
	left:0;
	right:0;
	bottom:0%;
	width:22%;
	margin-left: auto;
	margin-right: auto;
	opacity: 0;
}

.top_sns-item{
	
	width:30%;
	
}


@media screen and (max-width: 767px) {
	
	
	.bt_onair{
	
	position: absolute;
	left:0;
	right:0;
	top:41%;
	width:92%;
	margin-left: auto;
	margin-right: auto;
	
}
	
	
	.top_sns{
	bottom:1%;
	width:70%;	
	}
	
}


.top_bnr{
display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
justify-content:center;
/*margin-top:10px;*/
padding:5px 0;
}


.top_bnr-item{
	width:100%;
	max-width: 350px;
margin:5px 5px;
border: 1px solid var(--link-border-color);
}

.top_bnr-item.no-border{

	border: 0px solid var(--link-border-color);
}

.top_bnr-item2{
	width:50%;
	/*border: 2px solid var(--color-02);*/
}

.top_bnr-item3{
	width:70%;
	/*border: 2px solid var(--color-02);*/
}


.top_bnr-pc{
	width:18%;
	position: absolute;
	bottom:25%;
	left:1.5%;
}

@media screen and (max-width: 767px) {
	
	.top_bnr-item2{
	width:100%;
	/*border: 2px solid var(--color-02);*/
}
	
		.top_bnr-item3{
	width:100%;
	/*border: 2px solid var(--color-02);*/
}
	
	.top_bnr-item{
width:90%;

			margin:5px auto;
}
}


.section__trailer__item a .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: url(../img/common/play_mark2.png) no-repeat center center;
	background-color: rgba(0, 0, 0, 0.1);
	background-size: 20%;
	-webkit-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
	
	border-radius: 8px;
	border: 1px solid var(--link-border-color);

opacity: 1;
}

.section__trailer__item a:hover .overlay {
	/*background-color: rgba(0, 0, 0, 0.0);*/
	background-color: hsla(45,100%,68%,0.1);
}


.section__trailer__item img{
border-radius: 10px;	
}




.base__yellow{
	background-color:var(--color-02);
}


.base__yellow .title{
	color:var(--color-01);
}

.base__white{
	background-color:var(--color-04);
}


.base__white .title{
	color:var(--color-01);
}



@media screen and (max-width: 767px) {
	
	.section__trailer__item a .overlay {
		
		border-radius: 8px;
	border: 1px solid var(--link-border-color2);
	}
	
	.section__trailer__item img{
border-radius: 2px;	
}
}

/*text関連*/


.introduction-copy{
	color:var(--color-08);
	font-size:clamp(1.2rem, 0.945rem + 1.27vw, 1.9rem);
	line-height: 1.5;
	font-family: var(--title-font-family);
	text-align: center;	
}


.introduction-copy2{
color: var(--color-03);
	font-size:clamp(1.2rem, 0.945rem + 1.27vw, 1.9rem);
	line-height: 1.5;
	font-family: var(--title-font-family);
	text-align: center;	
}


.introduction-text{
	color:var(--color-09);
	font-size:clamp(1rem, 0.964rem + 0.18vw, 1.1rem);
	line-height: 1.8;
	font-family: var(--title-font-family);
	text-align: left;
	font-weight: var(--font-weight-bold);
}


@media screen and (max-width: 767px) {
	
.introduction-text{

	line-height: 1.8;

}	
	
	
}



/*music*/



.music-title{
  display: flex;
  justify-content: center;
  align-items: center;
	height: 100%;
}


.music-title-text{
	font-size: var(--title-font-size);
	font-family:var(--title-font-family);
	text-align: center;
	color: var(--color-11);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--title-letter-spacing);
}


.music-title-text._text2{
	font-size:clamp(1.3rem, 1.155rem + 0.73vw, 1.7rem);
		color:var(--color-10);
	
}


.music-item{
	width:48%;
	color: var(--color-09);
}



@media screen and (max-width: 767px) {
	.music-item{
	width:100%;
		margin-bottom: 1rem;
}
	
	.music-title h1{
margin-bottom:1rem;
}
	
}





.text-wrapper{
	
	border-radius: 26px;
	border: 3px solid var(--color-03);
	/*box-shadow: 10px 10px 0px rgba(255, 240, 73, 0.52);*/
	background-color: var(--color-01);	
}

.base__yellow .text-wrapper{
	
	border-radius: 26px;
	border: 6px solid var(--color-03);
	box-shadow: 10px 10px 0px rgba(255, 171, 11, 0.4);
	background-color: var(--color-04);	
}



.text-inner-01{
	color: var(--color-04);
	padding:5%;
	text-align: center;
	font-family: var(--magic-font-family);
	font-weight: var(--font-weight-normal);
	font-size: clamp(0.9rem, 0.682rem + 1.09vw, 1.5rem);
	line-height: 2.5;
	/*letter-spacing: 0.1rem;*/

}


.text-inner-01 .bold__text{
	
	color: var(--color-03);
	font-size:clamp(1.1rem, 0.773rem + 1.64vw, 2rem);
}




.text-inner-02{
	color: var(--color-04);
	padding:3%;
	line-height: 2.1;

}



.intro-img_01{
	margin:auto;
	max-width:574px;
}


.story-img_01{
	margin:auto;
	max-width:800px;
}




.real-logo{
	width:30%;
}


.text-inner-img__bottom img{
	border-radius: 0px 0px 20px 20px;
}




/*アコーディオン*/


.ac-box {
	display: none;
	
}


.ac-box::before{/* 閉じている時 */
	/*content: "＋";
	position: absolute;
	right: 20px;*/
}
.ac-box.close::before{/* 開いている時 */
	/*content: "－";*/
}






@media screen and (max-width: 767px) {
	
	.real-logo{
	width:60%;
}
	
	.text-wrapper{
	
	border-radius: 15px;
	border: 2px solid var(--color-03);
	
}

.base__yellow .text-wrapper{
	
	border-radius: 20px;
	border: 3px solid var(--color-03);
	box-shadow: 5px 5px 0px rgba(255, 171, 11, 0.4);
	background-color: var(--color-04);	
}
	
	.text-inner-img__bottom img{
	border-radius: 0px 0px 17px 17px;
}
	
	
	.intro-img_01{
	margin:auto;
	max-width:100%;
}
	
}



/*cast*/


.cardList.cast .card {
	border: 6px solid var(--color-02);
	box-shadow: 10px 10px 0px rgba(255, 240, 73, 0.52);
}




.cardList.cast .card:hover {
	color: var(--color-03);
	border: 6px solid var(--color-03);
}



.cardList.cast .card__text__base{
	
	padding:20px 15px;

	
}

@media screen and (max-width: 767px) {
	
	.cardList.cast .card {
	border: 3px solid var(--color-02) !important;
	box-shadow: 5px 5px 0px rgba(255, 240, 73, 0.52) !important;
}


.cardList.cast .card:hover {
	color: var(--color-03);
	border: 3px solid var(--color-03);
}



.cardList.cast .card__text__base{
	
	padding:10px 8px;

	
}
	
	
}



.character {
	font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem); 
	line-height: 1.5;
	text-align: center;
	font-weight:500 !important;
	color: var(--color-01);
}


.character._small{
	font-size: clamp(0.85rem, 0.795rem + 0.27vw, 1rem);
}


.castname {
margin-top: 5px;
		font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem); 
line-height: 1.5;
	text-align: center;
	
	font-family: var(--magic-font-family);
	font-weight: var(--font-weight-normal);
	color: var(--color-03);
}


.castname._small{
	line-height: 1;
	margin-top: 0px;
	font-size:clamp(0.9rem, 0.827rem + 0.36vw, 1.1rem);
}


.castname.left{
	text-align: left;
}


@media screen and (max-width: 767px) {
	
	.character-wrapper .character,
	.character-wrapper .castname{
		text-align: center!important;
	}
	
	.castname {
margin-top: 0px;
		
line-height: 1.5;

}
	
}



/*----------------------------------------
	CardList04
----------------------------------------*/
.cardList.cast {
	display: grid;
	gap: 10px; 
	grid-template-columns: repeat(2,1fr); 
	grid-auto-rows: minmax(100px, auto);
	
}
@media screen and (min-width: 768px),print {
	.cardList.cast {
		
		grid-template-columns: repeat(2,1fr);
	}
}
@media screen and (min-width: 992px),print {
	.cardList.cast {
		gap: 30px; 
		grid-template-columns: repeat(3,1fr); 
	}
}
@media screen and (min-width: 1200px),print {
	.cardList.cast {
		gap: 40px; 
		grid-template-columns: repeat(3,1fr); 
	}
}










@media screen and (max-width: 767px) {
	
	
	.text-inner-01{
	
	padding:10px 5px;
	
	line-height: 2;
	letter-spacing:-0.05rem;
}
	

	
.cast_base{
	background-color: #B49B7B;	
	padding:1rem;
	color: #fff;
}	
	
	.comment_base{
		padding:1rem;
		line-height: 1.8;
}

	
}







/*modal*/






.character-wrapper{

	margin-left: 10%;
	padding:3% 20px;
}


.character-text-item{
	width:64%;
	margin-right:0;
margin-left:auto;
}



.castname._copy{
	width:100%;
	text-align: center;
font-size:clamp(1.1rem, 0.955rem + 0.73vw, 1.5rem);
	
	
border-radius: 26px;
	border: 6px solid var(--color-02);
	box-shadow: 10px 10px 0px rgba(255, 240, 73, 0.52);
	
	padding:1rem;
}


@media screen and (max-width: 767px) {
	
	.castname._copy{
	border-radius: 20px;
	border: 3px solid var(--color-02);
	box-shadow: 5px 5px 0px rgba(255, 240, 73, 0.52);
	background-color: var(--color-04);	
}

}



.character-text-item .character{
	text-align: left;
	
}

.character-text-item .castname{
	text-align: left;
	margin-top: 0px;
}





.chara-text{
	color: var(--color-04);
	line-height: 2;
}




.character-img-item{
width:48%;	
	position: absolute;
	left:-13%;
	top:-5%;
	/*border-radius: 26px;
	border: 6px solid var(--color-03);
	box-shadow: 10px 10px 0px rgba(255, 171, 11, 0.4);
	background-color: var(--color-04);	*/
}


.character-img-item.single{
	width:50%;	
	max-width:600px;
	position: absolute;
	left:0;
	right:0;
	top:0;
	margin-left:auto;
	margin-right:auto;
}

.character-img-item.single img{
	margin-top:-35%;
}



.character-title{
	 position:relative;
    margin: auto;
    left: 0;
    right: 0;
	width:100%;
}







.scroll-inner{
	position: relative;
	width: 100%;
	height: 100%;
	/*margin-bottom: 30px;*/
	overflow-y: scroll;
	padding: 0rem 2rem 0rem 0rem;
	line-height: 1.9rem;
font-family:var(--base-font-family2);
text-shadow: 0px 0px 8px rgba(255, 255, 255, 1);
}




.modaal-content-container{
	max-width:1400px;
	margin: auto;
}





@media screen and (max-width: 767px) {
	
	
.character-wrapper{
margin-top:20vh;
	margin-left: 0%;
	padding:0px 10px 30px;
}
	
	
	.character-text-item{
	width:100%;

}

.character-img-item{
	width:100%;
	position: relative;
	left:0;
	margin-left: auto;
	margin-right: auto;
	top:0%;
}
	
	
	.character-img-item.single{
	width:80%;	
	max-width:600px;
	position: absolute;
	left:0;
	right:0;
	top:0;
	margin-left:auto;
	margin-right:auto;
}
	



.character-img-item img{
	margin-top:-25%;
}

	




.character-text{

	padding: 1rem 1rem;
	line-height: 1.7;
	text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.5);
}
	
.scroll-inner{
	position: relative;
	width: 100%;
	height: 100%;
	/*margin-bottom: 30px;*/
	overflow-y: scroll;
	padding: 0rem 1rem 0rem 0rem;
	line-height: 1.7;
font-family:var(--base-font-family2);
text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.7);
}

	
	
}



/*character*/


.chara_base {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	left:0;
	right: 0;
	max-width: 1300px;
	width:100%;
}


.chara_base__inner{
	 width: 100%;
	 position: relative;
    line-height: 0;
}

.chara_base__layer{
	 width: 100%;
	 position: absolute;
    line-height: 0;
	 top:0;
	left:0;
}


:root {
  --img-width: 1500;
   --img-height: 1194;
}


#cast_01{
	width:calc(100% * (350 / var(--img-width)));
	left:calc(100% * (573 / var(--img-width)));
	top:calc(100% * (116 / var(--img-height)));	

}


#cast_02{
	width:calc(100% * (324 / var(--img-width)));
	left:calc(100% * (909 / var(--img-width)));
	top:calc(100% * (602 / var(--img-height)));	

}


#cast_03{
	width:calc(100% * (303 / var(--img-width)));
	left:calc(100% * (288 / var(--img-width)));
	top:calc(100% * (604 / var(--img-height)));	

}


#cast_04{
	width:calc(100% * (322 / var(--img-width)));
	left:calc(100% * (1101 / var(--img-width)));
	top:calc(100% * (308 / var(--img-height)));	

}


#cast_05{
	width:calc(100% * (282 / var(--img-width)));
	left:calc(100% * (607 / var(--img-width)));
	top:calc(100% * (738 / var(--img-height)));	

}


#cast_06{
	width:calc(100% * (213 / var(--img-width)));
	left:calc(100% * (147 / var(--img-width)));
	top:calc(100% * (322 / var(--img-height)));	

}


@media screen and (max-width: 767px) {
	
	
:root {
  --img-width: 1200;
   --img-height: 4834;
}


#cast_01{
	width:calc(100% * (723 / var(--img-width)));
	left:calc(100% * (209 / var(--img-width)));
	top:calc(100% * (141 / var(--img-height)));	

}


#cast_02{
	width:calc(100% * (705 / var(--img-width)));
	left:calc(100% * (478 / var(--img-width)));
	top:calc(100% * (3048 / var(--img-height)));	

}


#cast_03{
	width:calc(100% * (651 / var(--img-width)));
	left:calc(100% * (549 / var(--img-width)));
	top:calc(100% * (1650 / var(--img-height)));	

}


#cast_04{
	width:calc(100% * (733 / var(--img-width)));
	left:calc(100% * (0 / var(--img-width)));
	top:calc(100% * (3800 / var(--img-height)));	

}


#cast_05{
	width:calc(100% * (638 / var(--img-width)));
	left:calc(100% * (0 / var(--img-width)));
	top:calc(100% * (2369 / var(--img-height)));	

}


#cast_06{
	width:calc(100% * (461 / var(--img-width)));
	left:calc(100% * (59 / var(--img-width)));
	top:calc(100% * (1227 / var(--img-height)));	

}	
	
	
	
}





/*ルビ*/

ruby[data-ruby]
{
    position: relative;
}

ruby[data-ruby]::before
{
    content: attr(data-ruby);
    position: absolute;
    line-height: 100%;
    text-align: center;
    left: -3em;
    right: -3em;
    transform-origin: bottom center;

    /* ルビの文字サイズを親文字に対する比率で指定 */
    transform: scale(0.5);

    /* 100%を越える部分が親文字とルビとのスペースになる。単位は親文字に対する比率 */
    bottom: 100%;

    /* デバッグ用 */
  /*  background-color: rgba(255, 0, 0, 0.2);*/
}

ruby[data-ruby] rt
{
    display: none;
}