@charset "UTF-8";
:root {
	--w_player: 800px;
	--w_list  : Calc(var(--w_main_pc) - var(--w_player));
}
html {
	> body {
		> main {
			background : var(--c_gray) !important;
			display    : flex;
			align-items: center;

			/* div.container size fix for vertical */
			@container style(--is_v) {
				display : block;
				height  : var(--h_full);
				overflow: hidden;
			}

			> div.container {
				flex-wrap : wrap;

				/* div.container size fix for horizontal view */
				@container style(--is_h) {
					display: flex;
				}

				/* div.container size fix for vertical view */
				@container style(--is_v) {
					display : block;
				}

				> div.player_wrapper {
					aspect-ratio: 16 / 9;
					background  : var(--c_gray);
					height      : auto;

					/* div.player_wrapper size fix for horizontal view and pc */
					@container style(--is_h) and style(--is_pc) {
						width: var(--w_player);
					}

					/* div.player_wrapper size fix for horizontal view and smart phone */
					@container style(--is_h) and style(--is_sp) {
						height: Calc((var(--w_full) / 3 * 2) / 16 * 9);
						width : Calc(var(--w_full) / 3 * 2);
					}

					/* div.player_wrapper size fix for vertical view */
					@container style(--is_v) {
						width: var(--w_full);
					}

					> #player {
						height    : 100%;
						width     : 100%;
					}
				}

				> ul#list {
					background   : var(--c_white);
					border-radius: 5px;
					overflow-y   : auto;
					padding      : Calc(var(--m_min) * 2);

					/* ul#list size fix for horizontal view and pc */
					@container style(--is_h) and style(--is_pc) {
						margin-left: Calc(var(--m_min) * 2);
						height     : Calc(var(--w_player) / 16 * 9);
						width      : Calc(var(--w_list) - (var(--m_min) * 2));
					}

					/* ul#list size fix for horizontal view and smart phone */
					@container style(--is_h) and style(--is_sp) {
						height     : Calc((var(--w_full) / 3 * 2) / 16 * 9);
						margin-left: Calc(var(--m_min) * 2);
						width      : Calc((var(--w_full) / 3) - (var(--m_min) * 2));
					}

					/* ul#list size fix for vertical view */
					@container style(--is_v) {
						margin-top    : Calc(var(--m_min) * 2);
						height        : Calc(var(--h_full) - (var(--w_full) / 16 * 9));
						padding-bottom: Calc(var(--h_footer) + (var(--m_min) * 3));
						width         : var(--w_full);
					}

					> li {
						border-bottom: 1px solid var(--c_black);
						cursor       : pointer;
						padding      : Calc(var(--m_min) * 2) var(--m_min);
					}
					> li:last-child {
						border-bottom: 0px solid var(--c_black);
					}
					> li.active {
						background: var(--c_info);
					}
				}
			}
		}
		footer {}
	}
}