@charset "utf-8";
/***********************************************************
 「人気作品ランキング」「学園からのお知らせ（スマホ）」（新しい書き方版）
 ・表（table）を置き換えるのに必要な設定だけを書いている
 ・文字の大きさ・色・余白などは style.css の元の設定（td_l / td_r など）がそのまま効いている
************************************************************/

/* ---------- 共通：1件全体を1つのリンクにする（表の1行の代わり） ---------- */
.rank-row,
.info-row {
	display: flex;
	text-decoration: none;
	outline: none;
}
/* 表のセルの代わり：上下の真ん中にそろえる（表のセルと同じ） */
.rank-row .td_l,
.rank-row .td_r,
.info-row .td_l,
.info-row .td_r {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-shrink: 0;
}

/* マウスを乗せたとき、画像と文字を少し薄くする（元のJavaScriptの動きをCSSで再現） */
.rank-row:hover .rank-row__photo,
.rank-row:hover .rank-row__no { opacity: 0.6; transition: opacity 0.2s; }
.rank-row:hover .rank-row__body span,
.rank-row:hover .rank-row__body p { opacity: 0.7; transition: opacity 0.2s; }


/* ---------- 人気作品ランキング（PCサイドバー） ---------- */
#ranking .rank-row {
	margin: 6px 0;            /* 元：#ranking table の余白 */
}
#ranking .rank-row .td_l {
	width: 52px;              /* 元の表では画像の幅に合わせて広がっていた */
}
#ranking .rank-row .td_r {
	width: auto;
	flex: 1;
	min-width: 0;
}


/* ---------- 人気作品ランキング（スマホ） ---------- */
#ranking_smp .rank-row {
	width: 660px;
	border-bottom: 1px solid #ffb480;   /* 元：#ranking_smp table の下線 */
}
#ranking_smp .rank-row .td_l {
	width: 153px;             /* 元の表で実際に表示されていた幅 */
	height: auto;
	min-height: 150px;
}
#ranking_smp .rank-row .td_r {
	width: 487px;             /* 元の表で実際に表示されていた幅 */
}


/* ---------- 学園からのお知らせ（スマホ） ---------- */
#info_contents_smp .info-row {
	width: 660px;
	border-bottom: 1px solid #ffb480;   /* 元：#info_contents_smp table の下線 */
}
#info_contents_smp .info-row .td_l {
	width: 153px;
	height: auto;
	min-height: 150px;
}
#info_contents_smp .info-row .td_r {
	width: 487px;
}

/* お知らせをすべて見る */
#info_contents_smp .info-more {
	padding: 1px;
	text-align: right;
	margin-bottom: 0;         /* 元の作りでも下の余白は0 */
}