/***************************************************************************
* 320px
***************************************************************************/
@media screen and (min-width:320px) {
	body, header, menu, article, footer, div, p, ul, ol, li, h1, h2, h3, h4, h5 {
			color                     : #333333 ;
			font-size                 : 14px ;
			margin                    : 0px ;
			padding                   : 0px ;
	}
	a {
			text-decoration           : none ;
	}
	body {
			background-color          : #ffffff ;
			font-family               : "Meiryo","Hiragino Kaku Gothic Pro","Osaka","MS PGothic",arial,helvetica,sans-serif ;
	}

	header {
		background-color: #000000 ;
		margin-bottom: 15px ;
	}
	header > p {
		padding: 5px 5px 2px 5px ;
		text-align: right ;
	}
	header > p > img {
		height: 35px ;
	}

	article {
		margin: 10px auto 25px auto ;
		padding: 0px 10px ;
	}
	article a {
		color: #E5024F ;
	}
	article a:hover {
		text-decoration: underline;
	}
	article > h1 {
		font-size: 20px ;
		margin-top: 20px ;
		margin-bottom: 40px ;
		text-align: center ;
	}
	article > hr {
		border-color: #cccccc ;
		border-style: solid ;
		border-width: 1px 0px 0px 0px ;
		margin-bottom: 20px ;
	}
	article > form {
		margin-top: 30px ;
	}
	article > form > dl > dt {
		font-weight: bold ;
		margin-bottom: 3px ;
	}
	article > form > dl > dd {
		margin: 0px ;
	}
	article > form > dl > dd > input[type="text"] {
		border-color: #666666 ;
		border-style: solid ;
		border-width: 1px ;
		padding: 5px 5px ;
		width: calc( 100% - 10px - 2px ) ;
	}
	article > form > dl > dd > input[type="password"] {
		border-style: solid ;
		border-width: 1px ;
		padding: 5px 5px ;
		width: calc( 100% - 10px - 2px ) ;
	}
	article > form > p {
		margin: 10px auto ;
		text-align: center ;
	}
	article > section > h2 {
		font-size: 18px ;
		margin-top: 10px ;
		margin-bottom: 15px ;
	}
	article > section > p.attention {
		color: #666666 ;
		font-size: 80% ;
	}
	article > section > iframe {
		aspect-ratio: 16 / 9 ;
		width: 100% ;
	}
	article > section#live {
		margin-bottom: 40px ;
	}
	article > section#archive {
		margin-bottom: 40px ;
	}
	article > section#archive:after {
        clear: left ;
        content: "" ;
        display: block ;
        height: 0px ;
        visibility: hidden ;
	}
	article > section#archive > section:after {
        clear: left ;
        content: "" ;
        display: block ;
        height: 0px ;
        visibility: hidden ;
	}
	article > section#archive > section > h3 {
		font-size: 16px ;
		margin-top: 10px ;
		margin-bottom: 5px ;
	}
	article > section#archive > section > a {
		display: block ;
		float: left ;
		width: calc( ( 100% - 10px ) / 2 );
	}
	article > section#archive > section > a:nth-of-type(2n+1) {
		margin-right: 10px ;
	}
	article > section#archive > section > a > img {
		width: 100% ;
	}
	article > section#log > h2 {
		color: #666666 ;
	}
	article > section#log > p {
		color: #999999 ;
		font-size: 90% ;
	}
	.modaal-content-container > iframe {
		aspect-ratio: 16 / 9 ;
		width: 100% ;
	}

	footer {
		border-color              : #cccccc ;
		border-style              : solid ;
		border-width              : 1px 0px 0px 0px ;
		clear                     : both ;
		font-size                 : 80% ;
		margin                    : 0px auto ;
		padding-top               : 10px ;
		padding-bottom            : 20px ;
		text-align                : center ;
	}
}
/***************************************************************************
* 768px
***************************************************************************/
@media screen and (min-width:768px) {
}
/***************************************************************************
* 1160px
***************************************************************************/
@media screen and (min-width: 1024px) {
	article {
		max-width: 768px ;
		padding: 0px ;
	}
	article > h1 {
		font-size: 24px ;
	}
	article > form {
		margin-left: auto ;
		margin-right: auto ;
		max-width: 480px ;
	}
	article > section > iframe {
		aspect-ratio: 16 / 9 ;
	}
	article > section#live > p {
		text-align: center ;
	}
}