body{
	margin: 0px;
	background: linear-gradient(#7BE2FF, #F9AEFF);
	background-attachment: fixed;
	color:#000000;
	font-family:sans-serif;
}

@media screen and (max-width: 800px){
	body{ font-size:3vw;}
}

a		 {color:#1111cc;}
h2		 { 
	text-align:center; 
	margin-right:auto; 
	margin-left:auto; 
	background-color: #13247C; 
	color:#ffffff;
}

.text_box , .text_box_black { 
	text-align:left; 
	width: 90vw; 
	max-width: 640px;
	margin: 0.5em auto; 
	color:#ffffff; 
	padding :0.5em; 
	border-radius: 1.0em;
}

.text_box {
	border:2px groove #e0e0e0; 
	background-color: #485B9A; 
}

.text_box_black {
	border:2px groove #000000; 
	background-color: #303030; 
}
	
	.song_box , .song_box_cl , .song_box_ex , .song_box_invalid {
		text-align:left; 
		margin: 0 auto 0.5em; 
		
		padding :0 0 0.5em; 
		border-radius: 0 0.95em 0 0;
		width:95vw;
		max-width:640px;
	}
	
	.song_box	 { background-color:#e0e0ff;  color:#000000; border:2px solid #1B3691; }
	.song_box_cl { background-color:#e0ffe0;  color:#000000; border:2px solid #085C1D; }
	.song_box_ex { background-color:#ffe0e0;  color:#000000; border:2px solid #510B0B; }
	.song_box_invalid { background-color:#e0e0e0;  color:#000000; border:2px solid #303030; }
	
	h4.songtitle{ 
		font-size: 100%;
		color:#ffffff; 
		width:95vw;
		max-width:640px;
		padding: 0.1em 0;
		margin:0 0 0.5em;
		border-radius: 0 0.75em 0 0;
	}
	
	.song_box h4.songtitle		{background-color:#485B9A;}
	.song_box_cl h4.songtitle	{background-color:#5B9A48;}
	.song_box_ex h4.songtitle	{background-color:#9A4848;}
	.song_box_invalid h4.songtitle	{background-color:#303030;}
	
	.course	 {
		width: 100%;
		padding: 0.25em 0;
		margin:0 0 0.25em;
		border-radius: 0.5em;
	}
	
	.course a {
		color:#ffffff;
		margin:1em;
	}
	
	
	.lv 	 { margin: 0.2em; padding:0px 0.3em; border-radius: 0.3em; }
	.lv0	 { background-color:#c0c0c0; color:#000000;}
	a.lv	 { text-decoration: none;}
	
	.lv1	 { background-color:#5f7d3a; color:#ffffff;}
	.lv2	 { background-color:#e37b00; color:#ffffff;}
	.lv3	 { background-color:#B4043D; color:#ffffff;}
	.lv1p	 { background-color:#000000; color:#8dbc35;}
	.lv2p	 { background-color:#000000; color:#DD9411;}
	.lv3p	 { background-color:#000000; color:#F74568;}
	
	.lv5	 { background-color:#320065; color:#ffffff;}
	.lv6	 { background-color:#fff6d0; color:#804400;}
	
	.lv5p	 { background-color:#000000; color:#BAAACB;}
	.lv6p	 { background-color:#000000; color:#fff6d0;}
	
.lv4	 { 
	background: -webkit-linear-gradient(0deg, #d4391d, #77d41d, #1dd2d4,#7c1dd4,#d4391d);
	background-size: 100%;
	color:#ffffff;
}
.lv4p {
  color: #FFFFFF;
  position: relative;
  background: #000; /* 背景色（単色でもグラデでもOK） */
  z-index: 0;
}
/*.lv4p::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: -webkit-linear-gradient(0deg, #d4391d, #77d41d, #1dd2d4,#7c1dd4,#d4391d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  z-index: 1;
} */

	
	.lvtotal	{
		background: -webkit-linear-gradient(90deg, #70240e, #ee9074, #70240e);
		color:#ffffff;
	}
	.lvstotal	{
		background: -webkit-linear-gradient(90deg, #dae4e6, #ffffff, #ffffff, #dae4e6);
		color:#0000ff;
	}
	.lvtotalp	{background-color:#000000; color:#E4886C;}
	.lvstotalp	{background-color:#000000; color:#FFFFFF;}
	.lvkamupo   {
		background: -webkit-linear-gradient(90deg, #bc6f00, #ffed64, #bc6f00);
		color:#000000;
	}
	
.header_title {
	text-align:center; 
	margin-right:auto; 
	margin-left:auto; 
	margin-top:0.5em;
	margin-bottom:0.5em;
}

.header_title .songtitle {
	font-size:2em;
	font-weight: bold;
}

.data_box { 
	margin: 0.5em auto; 
	width: 95vw;
	max-width: 640px; 
	background-color: #485B9A; 
	color:#ffffff; 
	padding :0.5em; 
	border-collapse: collapse; 
	border:3px solid #000000;
}
.data_box td {border:1px solid #000000;}
.data_box img{
  height:1.0em;
}

.data_box td.none {background-color: #808080;}


.score_ranking { 
	margin: 0.5em auto; 
	width: 95vw;
	max-width: 720px; 
	background-color: #485B9A; 
	color:#ffffff; 
	padding :0.5em; 
	border-collapse: collapse; 
	border:3px solid #000000;
}

.score_ranking tr:nth-child(2n+4) {background:#303C66;}
.score_ranking tr:nth-child(1) {
	// background-image:url("pict/bg_1st.png");
	background: -webkit-linear-gradient(90deg, #bc6f00, #ffed64, #bc6f00);
	background-size:100% 100%; color:#000000;
}
.score_ranking tr:nth-child(2) {
	background: -webkit-linear-gradient(90deg, #a2bcc7, #eef0f1, #a2bcc7);
	background-size:100% 100%; color:#000000;
}
.score_ranking tr:nth-child(3) {
	background: -webkit-linear-gradient(90deg, #70240e, #ee9074, #70240e);
	background-size:100% 100%; color:#ffffff;
}
	
.score_ranking img	{height:1.0em;}
	
.score			{text-align: right;}
.fullcombo_data img	{height:1.0em;}

.exc_box {
		background: -webkit-linear-gradient(90deg, #dae4e6, #ffffff, #ffffff, #dae4e6);
	border:1px solid #000000;
	color:#000000;
	width: 3em;
	text-align:center; 
	display:inline-block;
	border-radius: 0.25em;
}
 
 .player_icon_box {
  position: relative;
  display:inline-block;
  width: 2em;
  height: 2em;
 }
 
 .player_icon_box img{
  height:2.0em;
}
 
 .player_icon_box_base {
  position: absolute;
  width: 2em;
  height: 2em;
  top:0;
  left:0;
 }
 
 .player_icon_box_icon {
  position: absolute;
  width: 2em;
  height: 2em;
  top:0;
  left:0;
 }
 

/* 曲別スコア統計情報 */ 

.statistics { 
	display:inline-block;
	width: 90%; 
	max-width: 400px;
	
}
.statistics p {
	margin : 0.1em;
	padding : 0 0.25em;
	background:#303C66;
	border-radius: 0.5em;
}
.statistics p span { 
	display:inline-block;
}
.statistics p span:nth-child(1){ 
	width : 40%;
}
.statistics p span:nth-child(2){ 
	text-align:right; 
	width : 30%;
}
.statistics p span:nth-child(3){ 
	text-align:right; 
	width : 30%;
}

.statistics img	{height:1.0em;}

/* ヘッダ */ 
header	{
	font-size: 150%;
	text-align:center; 
	width: 100%;
	margin:0 auto 0; 
	padding :0 0 0.5em;
	background-color: #13247C;
	color:#ffffff;
}
header > a {
	display: inline-block;
	margin: 0.3em; 
	padding:0 0.3em; 
	border-radius: 0.5em;
	background-color:#F4F8F9;
	border:3px solid #4B5D68;
	color:#4B6565;
	text-decoration: none;
}
header > a:hover {
	background-color:#FFEB94;
	border:3px solid #D69940;
}

.fix_header {
	background-color:#000000;
	background-image: url("pict/headerbg.png") ;
	width: 100%;
	height:2em;
	background-size:auto 100%;
	background-repeat: repeat-x;  
	margin: 0 auto 0;
	
}
.fix_header img {
	height: 2em;
	width:auto;
	position:absolute;
	top:0;
	left:0;
}	
	
@media screen and (max-width: 800px){
	header > a	{width: 45%; margin: 0; padding: 0;}
	.headermenu_2 li	{width:45%; display: none;}
}
@media screen and (min-width: 800px){
	header > a	{width: auto; }
}

.emp {
	color:#EB3300; font-weight: bold;
}

.challenge_counter {
	margin: 0.5em auto 0.5em;
	width:80%;
	text-align: center;
	background-color: #37A36F;
	border:2px solid #165443;
	border-radius: 8px 8px;
	color: #ffffff;
}
.challenge_score {
	font-size:200%;
}
.challenge_pictbox img{
	margin: 0.5em;
	background-color: #A45038;
	border:2px solid #000000;
	border-radius: 8px 8px;
}
.challenge_clear {
	background-color: #ffffff;
	color: #37A36F;
	border-radius: 0.25em;
}

h3.challenge1,h3.challenge2 {
	text-align:center; 
	margin: 0.5em auto;
	padding: 0.25em;
	border-radius: 0.25em;
	width : 75%;
}
h3.challenge1	{
	background-color: #485B9A; 
	color:#ffffff;
}
h3.challenge2	{
	background-color: #5B9A48; 
	color:#ffffff;
}

/* total counter */
.total_counter {
	margin: 0.5em auto 0.5em;
	width:95%;
	height:480px;
	background-color: #303030;
	border:2px solid #000;
	border-radius: 8px 8px;
	color: #ffffff;
	position:  relative;
}

.total_counter .chara_pict {
	position: absolute;
	bottom:0px;
	right:0px;
	object-position:100% 0;
	width: 480px;
	max-width:95%;
	height:480px;
	object-fit: cover;
	z-index:1;
}

.graph {
	position: absolute;
	bottom:8px;
	left: 50%; 
	transform: translateX(-50%);
	display: block;
	width:95%;
	height:64px;
	border:2px solid #000;
	z-index:2;
}

.graph_box {
	position:  relative;
	display: inline-block;
	height:64px;
}
.graph_bas {
	background-color:#5f7d3a;
}
.graph_adv {
	background-color:#e37b00;;
}
.graph_kam {
	background-color:#B4043D;
}
.graph_cha {
	background: -webkit-linear-gradient(0deg, #d4391d, #77d41d, #1dd2d4,#7c1dd4,#d4391d);

}
.graph_ins {
	background-color:#320065;
}
.graph_glo {
	background-color:#fff6d0;
}

.total_counter .total {
	font-size:2em;
}

.tooltip-text {
  opacity: 0;
  visibility: hidden; /* はじめは隠しておく */
  position: absolute; /* 絶対配置 */
  left: 50%; /* 親に対して中央配置 */
  transform: translateX(-50%); /* 親に対して中央配置 */
  top: 30px; /* 親要素下からの位置 */
  display: inline-block;
  padding: 5px; /* 余白 */
  white-space: nowrap; /* テキストを折り返さない */
  font-size: 0.8rem; /* フォントサイズ */
  line-height: 1.3; /* 行間 */
  background: #333; /* 背景色 */
  color: #fff; /* 文字色 */
  border-radius: 3px; /* 角丸 */
  transition: 0.3s ease-in; /* アニメーション */
  z-index:3;
}

.graph_box:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}