@charset "utf-8";

@import "setting";

#system{
	@include box-sizing;
	max-height: calc(100dvh - 120px);
	
	.container{
		max-height: calc(100% - 50px);
		overflow-y: auto;
	}
	
	dl{
		max-width: 215px;
		margin: 1em auto;
		
		dt{
			font-weight: 700;
			
			span{
				display: inline-block;
				margin-left: .5em;
				font-size: .9em;
				opacity: .8;
				font-weight: 400;
			}
		}
		
		dd{
			margin: .5em auto 2em;
			ul.dot{
				
				&>li{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					
					em{
						font-weight: 700;
						opacity: .9;
						margin-right: .5em;
					}
					
					strong{
						font-weight: 700;
					}
					
					span{
						font-size: .8em;
					}
				}
			}
			
			ul.notice{
				font-size: .8em;
				opacity: .8;
				margin-top: .5em;
				
				li{
					&:before{
						content: "※ ";
					}
				}
			}

			ul.square{
				li{
					&:before{
						content: "◇ ";
					}
				}
			}
		}
	}
}

// Large devices (desktops, 992px and up)
@media (max-width: 1199.98px) {
}

// Medium devices (tablets, 768px and up)
@media (max-width: 991.98px) {
}

/// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {

#system{
	max-height: calc(100dvh - 90px);
	padding-top: 30px;
	align-self: stretch;
	
	.container{
		width: 84%;
		margin: auto;
		max-height: calc(100% - 50px);
		overflow-y: auto;
	}
}
}


@media (max-width: 991.98px) and (min-aspect-ratio: 8/5) and (orientation: landscape) {
}