html{
    font-size: 62.5%;
	counter-reset: number 0;
}

body{
	position: relative;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 500;
    font-size:1.6rem;/* 16px*/
    line-height: 1.75;
	text-align: justify;
	background: rgb(0,0,0); /* Old browsers */
	background-image: url("../images/bg.jpg");
}

header {
	margin: 0;
	padding: 1em 0;
	color: #000;
	background-image: url("../images/head_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 57.5vh;
}

header section {
	width:100%;
}

header section h1 {
	width:1000px;
	margin: 2em auto;
	text-align: center;
	position: relative;
}

header section h1 img {
	width:80%;
	height: auto;
}

main {
	margin: 0 0 ;
	padding: 0 0 8em 0;
	background: url("../images/bg.jpg");
}

main section#Note {
	background: rgb(101,20,16);
	padding: 4em 0;
	text-align: center;
	color: #fff;
	letter-spacing: 0.25em;
}

main section#Note div#Performer {
	font-size: 1.4rem;
	margin: 2em;
	letter-spacing: 0.1em;
}

main section#Vote {
	margin: 4em 0 0 0;
}


article {
	width:1000px;
	margin: 2em auto;
	box-sizing: border-box;
}

article#Period ,
article#Present {
	font-size: 2.4rem;
	text-align: center;
	font-weight: 600;
}

article#Period p span ,
article#Present p span {
	font-size: 3.2rem;
}

article#Period p strong ,
article#Present p strong {
	margin-left: 0.5em;
}

article#Howto {
	text-align: center;
}

span.quo {
	background: linear-gradient(transparent 70%, yellow 70%);
}

footer {
	background: rgba(205,205,205,1);
	color: #fff;
	margin: 0;
	height: 7em;
	padding: 1em 1em 2em 1em ;
	width:100%;
	box-sizing: border-box;
}

footer section {
	margin: 1em 0.25em;;
	color: rgb(140,140,140);
	box-sizing: border-box;
}

footer section#Logo {
	float: left;
}

footer section#Logo img {
	height: 3em;
	width: auto;
}

footer section#Copyright {
	float: right;
	text-align: right;
}

footer section p a {
	color: #000;
}

h1 {
    font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
    line-height: 1.3;
	text-align: center;
	font-weight: 600;
	letter-spacing: 0.5em;
	margin-bottom: 2em;
}

h2 {
    font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.3;
	background: #000;
	padding: 10px 0;
	text-align: center;
	color: #fff;
	position: relative;
	letter-spacing: 0.5em;
}

h2::before {
	content: " ";
	width:1em;
	height: 100%;
	background: #000;
	border-right: 2px solid #fff;
	display: block;
	position: absolute;
	top:0;
	left: 0;
}

h2::after {
	content: " ";
	width:1em;
	height: 100%;
	background: #000;
	border-left: 2px solid #fff;
	display: block;
	position: absolute;
	top:0;
	right: -1em;
}


h3 {
    font-size: 2.4rem;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.3;
	text-align: center;
	color: #000;
}

ol, ul {
	text-align: center;
	margin: 0.5em 0 0 0;
}

em {
	font-style: normal;
	color: #F00;
}

strong {
	font-style: normal;
	font-weight: 600;
	color: #F00;
}

main section p {
	margin: 0.25em;
}

section h1 img {
	width:100%;
	height: auto;
}

@media (min-width: 1200px) {/* 1200px以上*/
    h1 {
        font-size: 3.6rem;/* 36px*/
    }
    h2, h3 {
        font-size: 2.4rem;/* 24px*/
    }
}

_:-ms-lang(x)::-ms-backdrop, footer {
	position: relative;
}


@media screen and (max-width: 960px) {/* 640px以下*/

    body{
  		line-height: 2;
    }
	
	img {
		width:100%;
		height: auto;
	}

	header {
		min-height: 25vh;
	}
	
	header section h1 {
		width:100%;
	}

	header section h1 img {
		width:90%;
		height: auto;
	}

	main {
		padding: 3em 0 18em;
	}
	
	article {
		width:98%;
		box-sizing: border-box;
	}

	h1{
        font-size: 2.4rem;/* 24px*/
    }
    h2, h3 {
        font-size: 2rem;/* 20px*/
    }

	footer {
		padding: 1em 0;
	}

	footer section p {
		line-height: 1.15;
	}

	footer section#Logo {
	}

	footer section#Logo img {
		height: 2em;
		width: auto;
	}

	footer section#Copyright {
	}

}