@CHARSET "UTF-8";

*{
	margin	: 0;
	padding	: 0;
}
/*
body {

	margin  : 0;
	width: 640px;
	font-family: 'メイリオ', Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
*/

a {
	outline	: none;
}

/* メインクラス */
.ranking_main {
	background-image: url('/images/mjm/ranking_view/bg.png');
	background-repeat: repeat-y;
	text-align	: center;
	width	: 640px;
    min-height:380px;
}

/* ランキングのリスト */
.ranking_list {
}

.ranking_menu {
}

/* ランキングのタイトル */
.ranking_main #title {
	padding-top: 10px;
	margin-bottom: 10px;
}

/* バックボタン */
.back_bt {
	z-index: 10;
	text-align: left;
}

.back_bt img {
	z-index: 10;
	position: fixed;
	top: 150px;
	width: 43px;
	height: 102px;
	border-style:none;
}

.ranker {
	margin-bottom: -50px;
}

/* トップランカー表示用 */
/* ランキング1位 */
#top_ranker_1 {
	display: -moz-inline-box;
	display: -webkit-inline-box;
	display: inline-block;
	margin: 0px 0px 60px 0px;
}
#top_ranker_1_bg {
	left: 42px; top: 27px; z-index: 0; width: 50%;
}
#top_ranker_1_avatar {
	left: 42px; top: 27px; z-index: 1; width: 50%;
}
#top_ranker_1_frame {
	left: 0px; top: 0px; z-index: 2; width: 98%;
}
#top_ranker_1_rank {
	left: -5px; top: -10px; z-index: 3; width: 50%;
}
#top_ranker_1_nickname {
	position: relative;
}
#top_ranker_1_dani {
	left: 65px; top: 126px; z-index: 3; width: 22%;
}

/* ランキング2位 */
#top_ranker_2 {
	display: -moz-inline-box;
	display: -webkit-inline-box;
	display: inline-block;
	margin: 0px 0px 30px 0px;
}
#top_ranker_2_bg {
	left: 38px; top: 25px; z-index: 0; width: 45%;
}
#top_ranker_2_avatar {
	left: 38px; top: 25px; z-index: 1; width: 45%;
}
#top_ranker_2_frame {
	left: 0px; top: 0px; z-index: 2; width: 90%;
}
#top_ranker_2_rank {
	left: 0px; top: -5px; z-index: 3; width: 45%;
}
#top_ranker_2_nickname {
	position: relative;
}
#top_ranker_2_dani {
	left: 60px; top: 117px; z-index: 3; width: 19%;
}

/** ランキング3位 */
#top_ranker_3 {
	display: -moz-inline-box;
	display: -webkit-inline-box;
	display: inline-block;
	margin: 0px 0px 10px 0px;
}
#top_ranker_3_bg {
	left: 71px; top: 22px; z-index: 0; width: 40%
}
#top_ranker_3_avatar {
	left: 71px; top: 22px; z-index: 1; width: 40%
}
#top_ranker_3_frame {
	left: 37px; top: 0px; z-index: 2; width: 80%;
}
#top_ranker_3_rank {
	left: 27px; top: 0px; z-index: 3; width: 40%;
}
#top_ranker_3_nickname {
	position: relative;
}
#top_ranker_3_dani {
	left: 92px; top: 104px; z-index: 3; width: 16%;
}

/* メニューボタン */
.menu_btn {
	display: -moz-inline-box;
	display: -webkit-inline-box;
	display: inline-block;
	margin: 20px 5px 20px 5px;
	max-width: 300px;
}

.menu_btn img {
	border-style:none;
}

.menu_btn_3line {
	display: -moz-inline-box;
	display: -webkit-inline-box;
	display: inline-block;
	margin: 20px auto;
}

.menu_btn_3line img {
	border-style:none;
}

/* アバター表示用 */
.hLayer {
	position: relative;
	width: 172px;
	height: 172px;
}

.cLayer {
    position: absolute;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.ranker2_nickname {
	left: 38px;
	width: 80px;
	top: 101px;
	z-index: 3;
	color: rgb(255, 255, 255);
	font-size: 11px;
	font-weight: bold;
	white-space: nowrap;
}

.ranker1_nickname {
	left: 42px;
	width: 84px;
	top: 110px;
	z-index: 3;
	color: rgb(255, 255, 255);
	font-size: 12px;
	font-weight: bold;
	white-space: nowrap;
}

.ranker3_nickname {
	left: 72px;
	width:68px;
	top: 89px;
	z-index: 3;
	color: rgb(255, 255, 255);
	font-size: 10px;
	font-weight: bold;
	white-space: nowrap;
}

/** ランキングバー用 */
.ranking_bar_hLayer {
	position: relative;
	width: 601px;
	height: 46px;
	display: inline-block;
}

.ranking_bar_cLayer {
    position: absolute;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.ranking_bar_dani {
	display: -moz-inline-box;
	display: -webkit-inline-box;
	display: inline-block;
}

div#v2-contents {
    min-height: auto;
}

.ranking_lv {
	color: white;
}

.group_container {
	display: flex;              /* 横並び */
	flex-wrap: wrap;        /* 横幅が足りないときに折り返す */
	justify-content: center;    /* 中央寄せ */
	gap: 0px;                   /* 画像間の間隔 */
	margin-top: 50px;            /* 上の要素との間隔 */
	margin-bottom: 20px;         /* 下の要素との間隔 */
}

.group_card {
	position: relative;          /* 子要素のabsolute位置の基準 */
	display: inline-block;
}

.group_card img {
	display: block;              /* 余計な隙間を消す */
}

.group_name {
	position: absolute;
	left: 50%;              /* 親の幅の中央 */
	transform: translate(-50%); /* 中央に配置 */
	color: white;
	font-weight: bold;
	z-index: 2;
	white-space:nowrap;    /* 改行しない */
}

/* 短い文字用 */
.group_name.short {
	font-size: 20px;
	top: 21px;
}

/* 長い文字用 */
.group_name.long {
	font-size: 14px;
	top: 21px;
}

.group_score {
	position: absolute;
	bottom: 10px;                  /* 下からの距離 */
	right: 20px;                   /* 右からの距離 */
	color: white;
	font-size: 18px;
	font-weight: bold;
	z-index: 2;
}

.info_bar {
	position: absolute;
	top: 100px; /* 上に配置する場合の調整値（必要に応じて変更） */
	right: 40px;  /* group_container の右端に揃える */
	display: flex;              /* 横並びにする */
	align-items: center;        /* 縦位置を揃える */
	gap: 150px;                   /* 画像と時刻の間隔 */
}

.time_text {
	background-color: #fff;
	border: 2px solid #000;
	padding: 5px 10px;
	font-size: 16px;
	font-weight: bold;
	color: #000;
}