@charset "UTF-8";
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
main {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #eeeeee;
	text-align: center;
}
main.fixed {
	position: fixed;
	top: 0;
	bottom: 0;
}

/*ポスター用*/
.poster_img {
	width: 100%;
	height: 100%;
	max-height: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	box-sizing: border-box;
}
main.sideways .poster_img{
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: 100%;
	margin: 0 auto;
}
.poster_img .img{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	box-sizing: border-box;
	position: relative;
}
.poster_img p .pict_area {
	width: 100%;
	height: auto;
	max-height: calc(100% - 80px);
	font-size: 0;
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-wrap: nowrap;
    align-items: center;
	justify-content: center;
	padding: 0 2.5%;
}
.poster_img p .pict_area.vertical {
	width: auto;
	height: 100%;
	margin: 0 auto;
	flex-direction: column;
}
.poster_img p.img .pict_area img {
	border: 1px solid #fff;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	width: auto;
	height: auto;
	margin: 0 auto;
	padding: 0;
	max-width: 95vw;
	max-height: calc(100vh - 100px);
	position: relative;
	object-fit: contain;
}
.poster_img .img p {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0;
	display: block;
}
.poster_img a {
	display: block;
	width: 30%;
	height: 40px;
	line-height: 40px;
	font-size: 15px;
	border-radius: 20px;
	text-decoration: underline;
	text-align: center;
	margin: 0 auto;
}
.poster_img #close_button,
.poster_img #volume_button,
.poster_img #posterClose {
	cursor: pointer;
}
.question{
	width: 90%;
	height: calc(100% - 60px);
	max-width: 640px;
	margin: 0 auto;
	padding: 0;
	background-color: #ffffff;
	text-align: left;
}
#nsBox{
	text-align: center;
	padding: 50px 10px;
}
.img_area,
.video_area {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	max-height: 100%;
}
.img_area.pict {
	height: auto;
	align-items: center;
}
.video_area {
	width: auto;
	height: 100%;
	max-height: calc(100% - 50px);
	font-size: 0;
	box-sizing: border-box;
	flex-wrap: nowrap;
	align-items: center;
}
.video_area.vertical {
	width: fit-content;
	height: 100%;
	margin: 0 auto;
	flex-direction: column;
}
main.sideways .video_area{
	width: 100%;
	height: 100%;
	max-height: calc(100% - 50px);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
main.sideways .img_area.pict {
	height: auto;
}
.video_area video{
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.video_area.vertical video {
	width: auto;
	height: 100%;
	max-height: 100%;
}
main.sideways .video_area video{
	width: auto;
	height: 100%;
	max-height: 100%;
}
.img .video_button {
	width: 100%;
	height: 50px;
}
main.sideways .video_button{
	position: relative;
}
.video_button #note_text,
.video_button #close_button,
.video_button #volume_button{
	width: auto;
	max-width: 45%;
	height: auto;
	display: block;
	padding: 0.25rem 0.5rem;
	position: absolute;
	right: 0.5rem;
	top: 0.75rem;
	text-align: center;
	border-radius: 0px;
	text-decoration: none;
	line-height: 1.75rem;
	z-index: 999;
}
.video_button #volume_button{
	left: 0.5rem;
	right: auto;
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.5rem 0;
	background-color: #333333;
	color: #ffffff;
	background-repeat: no-repeat;
	background-position: center;
	box-sizing: border-box;
}
.video_button #volume_button.b_off {
	background-image: url('../img/volume_off_black_24dp.svg');
}
.video_button #volume_button.b_on {
	background-image: url('../img/volume_up_black_24dp.svg');
}
.video_button #volume_button.w_off {
	background-image: url('../img/volume_off_white_24dp.svg');
}
.video_button #volume_button.w_on {
	background-image: url('../img/volume_up_white_24dp.svg');
}
.video_button #note_text.hidden,
.video_button #close_button.hidden{
	display: none;
}
.video_button #note_text{
	cursor: auto;
}
a#note_text:focus,
a#note_text:active,
a#note_text:hover{
	box-shadow: none!important;
}
p.debug {
	position:absolute;
	display:block;
	background-color:white;
	padding:10px;
	font-size:15px;
	box-sizing:border-box;
}
p.debug.top {
	bottom:50%;
}
p.debug.bottom {
	bottom:45%;
}