@charset"utf-8";
/**
*layoutpc
*/


/*import
--------------------------------------------------*/
@importurl("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap");
@import"init.css";

/* アニメ用 */
.op_anime{
	opacity:0;
}


/*html,body
--------------------------------------------------*/
html,body{
	position:absolute;
	width:100%;
	min-width:1200px;
	min-height:100%;
	margin:0;
	text-align:left;
	font-family:Verdana,"メイリオ","ヒラギノ角ゴProW3","ＭＳＰゴシック",sans-serif;
	font-family:'NotoSansJP',sans-serif;
	font-weight:400;
	font-feature-settings:"palt";
	letter-spacing:0.15em;
	-webkit-text-size-adjust:none;
	color:#532215;
	background:#fac200;
}


/*初期設置*/
.main{
	position:relative;
	width:100%;
	min-width:1200px;
	height:80vh;
	overflow:hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.chara_set{
	position: relative;
	width: 400px; /* 必要に応じて調整 */
	height: 400px; /* 必要に応じて調整 */
	margin-top:-100px;
}

.chara_set img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	opacity: 0;
	transform: scale(0.5);
	transition: transform 0.5s ease, opacity 0.5s ease;
}




  .bar-container {
    width: 500px;       /* バーの幅 */
    height: 6px;       /* バーの高さ */
    background-color: white;
    border-radius: 15px; /* 角丸 */
    position: absolute;
    overflow: hidden;
	margin-top:300px;
  }
  .bar-black {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: black;
    border-radius: 15px 0 0 15px; /* 左側だけ角丸 */
  }
  
  
  .text01{
    position: absolute;
	margin-top:218px;
  
  }
  





/*ここからテンプレートエリア*/
.rps_visible{
display:none;
}

.rps_del{
display:block;
}