@media (min-width: 1980px) and (orientation: Landscape){
	:root {
	  --font-s1: calc(var(--max-w-percent) * 2 + 10px);
	  --font-s2: calc(var(--max-w-percent) * 3 / 2 + 5px);
	  --font-s3: calc(var(--max-w-percent) * 5 / 4 + 5px);
	}

	div#Noticeboard{
		min-height: max(calc(100vh - var(--header-s1)), 1080px);
		background-color: black;
		position: relative;
		overflow: hidden;
		border-left: 10px solid #fff0;
		border-right: 10px solid #fff0;
		border-image: linear-gradient(to left, #fff, #737373 1px, white, #737373 calc(100% - 1px), #fff);
		border-image-slice: 1;
	}

	div.Noticeboard-event{
		overflow: hidden;
		height: 1080px;
		position: absolute;
		width: 100%;
		transition: left 0.5s ease-out 0s;
		left: 100%;
	}

	img.Noticeboard-event-photo{
		position: absolute;
		width: 100%;
		top: calc(var(--max-w-percent) * 2 + 10px + 20px * 2);
	}	

	div.Noticeboard-event-top{
		position: absolute;
		top: 0px;
		width: 100%;
		display: flex;
		align-content: center;
		justify-content: center;
		align-items: center;
		padding-bottom: 20px;
		padding-top: 10px;
		background-image: linear-gradient(to top, #0000, #00000082 10px, white 10px);
	}

	p.Noticeboard-event-top-name{
		font-family: Roboto-Regular;
		line-height: var(--font-s1);
		font-size: var(--font-s1);
		text-align: center;
		color: #000;
		padding: 20px;
	}

	div.Noticeboard-event-bottom{
		position: absolute;
		bottom: 0px;
		width: 100%;
		display: flex;
		align-content: center;
		justify-content: center;
		flex-wrap: wrap;
		background-image: linear-gradient(to bottom, #0000, #00000082 10px, white 10px);
		padding-top: calc(var(--font-s2) + 10px);
	}

	p.Noticeboard-event-bottom-hint{
		text-transform: uppercase;
		font-family: Roboto-Medium;
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		text-align: right;
		color: #000;
		width: 15%;
		margin-bottom: var(--font-s3);
		padding-right: var(--font-s3);
	}

	p.Noticeboard-event-bottom-info{
		color: #5b5b5b;
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		text-align: left;
		width: 85%;
		font-family: Roboto-Medium;
		margin-bottom: var(--font-s3);
		text-transform: uppercase;
	}

	a.Noticeboard-event-bottom-more{
		background-color: #000;
		color: #fff;
		font-family: Roboto-Regular;
		line-height: var(--font-s2);
		font-size: var(--font-s2);
		transition: background-color 0.4s ease-out 0s;
		text-transform: uppercase;
		width: 100%;
		text-align: center;
		padding: 30px;
	}

	a.Noticeboard-event-bottom-more:hover{
		background-color: #b70040;
	}

	button.Noticeboard-button.left{left: 10px; background-image: url("/photo/sys/left.png");}
	button.Noticeboard-button.right{right: 10px; background-image: url("/photo/sys/right.png");}

	button.Noticeboard-button{
		position: absolute;
		height: calc(var(--font-s1) + 50px);
		width: calc(var(--font-s1) / 2 + 25px);
		background-size: 100%;
		top: 5px;
		background-color: #000;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		border-radius: 10px;
	}
}

@media (min-width: 720px) and (max-width: 1980px) and (orientation: Landscape){
	:root {
		--font-s1: calc(2vw + 10px);
		--font-s2: calc(1vw + 10px);
		--font-s3: calc(5vw / 6 + 10px);
		--btn-s: calc(var(--font-s2) + 60px);
	}

	div#Noticeboard{
		min-height: max(calc(640px - var(--footer-s2) - var(--header-s2) + var(--btn-s)), calc(100vh - var(--header-s2) + var(--btn-s)));
		background-color: white;
		position: relative;
		overflow: hidden;
	}

	div.Noticeboard-event{
		overflow: hidden;
		height: calc(100vh - var(--footer-s2) + var(--btn-s));
		min-height: calc(640px - var(--footer-s2) - var(--header-s2) + var(--btn-s));
		max-height: calc(100vw / 4 * 3 + var(--btn-s));
		position: absolute;
		width: 100%;
		transition: left 0.5s ease-out 0s;
		left: 100%;
	}

	img.Noticeboard-event-photo{
		position: absolute;
		width: 100%;
		top: calc(var(--font-s1) + 20px * 2);
	}	

	div.Noticeboard-event-top{
		position: absolute;
		top: 0px;
		width: 100%;
		display: flex;
		align-content: center;
		justify-content: center;
		align-items: center;
		padding-bottom: 20px;
		padding-top: 10px;
		background-image: linear-gradient(to top, #0000, #00000082 10px, white 10px);
	}

	p.Noticeboard-event-top-name{
		font-family: Roboto-Regular;
		line-height: var(--font-s1);
		font-size: var(--font-s1);
		text-align: center;
		color: #000;
		padding: 10px;
	}

	div.Noticeboard-event-bottom{
		position: absolute;
		bottom: 0px;
		width: 100%;
		display: flex;
		align-content: center;
		justify-content: center;
		flex-wrap: wrap;
		background-image: linear-gradient(to bottom, #0000, #00000082 10px, white 10px);
		padding-top: calc(var(--font-s2) + 10px);
	}

	p.Noticeboard-event-bottom-hint{
		text-transform: uppercase;
		font-family: Roboto-Medium;
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		text-align: right;
		color: #000;
		width: 15%;
		margin-bottom: var(--font-s3);
		padding-right: var(--font-s3);
	}

	p.Noticeboard-event-bottom-info{
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		text-align: left;
		color: #5b5b5b;
		width: 85%;
		font-family: Roboto-Medium;
		margin-bottom: var(--font-s3);
		text-transform: uppercase;
	}

	a.Noticeboard-event-bottom-more{
		background-color: #000;
		color: #fff;
		font-family: Roboto-Regular;
		line-height: var(--font-s2);
		font-size: var(--font-s2);
		transition: background-color 0.4s ease-out 0s;
		text-transform: uppercase;
		width: 100%;
		text-align: center;
		padding: 30px;
	}

	a.Noticeboard-event-bottom-more:hover{
		background-color: #b70040;
	}

	button.Noticeboard-button.left{left: 10px; background-image: url("/photo/sys/left.png");}
	button.Noticeboard-button.right{right: 10px; background-image: url("/photo/sys/right.png");}

	button.Noticeboard-button{
		position: absolute;
		height: calc(var(--font-s1) + 30px);
		width: calc(var(--font-s1) /2 + 30px);
		background-size: 100%;
		top: 5px;
		background-color: #000;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		border-radius: 10px;
	}
}

@media (max-width: 720px), (orientation: Portrait){
	div#Noticeboard{
		min-height: 100vw;
		background-color: black;
		position: relative;
		overflow: hidden;
		height: calc(100vh - var(--header-s2));
	}

	div.Noticeboard-event{
		position: absolute;
		overflow: hidden;
		min-height: 100vw;
		width: 100%;
		left: 100%;
		transition: left 0.5s ease-out 0s;
		max-height: 200vw;
		height: calc(100vh - 12vw);
	}

	img.Noticeboard-event-photo{
		position: absolute;
		top: 12vw;
		height: calc(100% - 36vw);
		left: 0px;
	}	

	div.Noticeboard-event-top{
		position: absolute;
		top: 0px;
		width: 100%;
		display: flex;
		align-content: center;
		justify-content: center;
		align-items: center;
		background-image: linear-gradient(to top, #0000, #00000082 2vw, white 2vw);
		padding-top: 2vw;
		padding-bottom: 3vw;
	}

	p.Noticeboard-event-top-name{
		color: black;
		font-family: Roboto-Regular;
		line-height: 7vw;
		font-size: 7vw;
		position: relative;
		padding: 3vw 0px 3vw 0px;
		text-align: center;
		width: 100%;
	}

	div.Noticeboard-event-bottom{
		position: absolute;
		bottom: 0px;
		width: 100%;
		display: flex;
		align-content: center;
		justify-content: center;
		flex-wrap: wrap;
		background-image: linear-gradient(to bottom, #0000, #00000082 1vw, white 1vw);
		padding-top: 6vw;
	}

	p.Noticeboard-event-bottom-hint{
		color: black;
		font-family: Roboto-Medium;
		line-height: 4vw;
		font-size: 4vw;
		width: 25%;
		text-align: right;
		text-transform: uppercase;
		margin-bottom: 4vw;
	}

	p.Noticeboard-event-bottom-info{
		color: #5b5b5b;
		font-family: Roboto-Medium;
		line-height: 4vw;
		font-size: 4vw;
		width: 75%;
		text-align: left;
		text-transform: uppercase;
		padding: 0px 3vw;
		margin-bottom: 4vw;
	}

	a.Noticeboard-event-bottom-more{
		background-color: #000;
		color: #fff;
		font-family: Roboto-Regular;
		line-height: 5vw;
		font-size: 5vw;
		transition: background-color 0.4s ease-out 0s;
		text-transform: uppercase;
		width: 100%;
		text-align: center;
		padding: 4vw;
		margin-top: 3vw;
	}

	a.Noticeboard-event-bottom-more:hover{
		background-color: #b70040;
	}

	button.Noticeboard-button.left{left: 5vw; background-image: url("/photo/sys/left.png");}
	button.Noticeboard-button.right{right: 5vw; background-image: url("/photo/sys/right.png");}

	button.Noticeboard-button{
		position: absolute;
		height: 50vw;
		width: 10vw;
		background-size: 100%;
		top: min(calc((200vw - 60vw) / 2), calc((100% - 65vw) / 2));
		background-color: #000;
		border-radius: 2vw;
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}
}