@charset "utf-8";

a{
 color: #fff;
}

.box{
 background-color: rgba(0,0,0,0.5);
 color: #fff;
}


html{
 font-family: '游明朝体',serif;
 font-weight: bold;
 font-size:min(2vw,18px);
 text-align:center;
}

body:before{
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background-color: #010066;
    background-size: cover;
}

body,html{
 height: auto;
 width: 100%;
 margin: 0 0;
 padding: 0 0;
 background: #010066;
scroll-behavior: smooth; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1;
}


h1{
 font-family: '游明朝体',serif;
 font-weight: bold;
 font-size:min(3vw,24px);
}

h2 {
	font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #ee7800;
	background-color: #fff;
	font-size:min(3vw,30px);
}

h3{
 font-family: '游明朝体',serif;
 font-weight: bold;
 font-size:min(5vw,50px);
}




.logo {
	width: 80%;
}

.image {
	width: 80%;
}

.single {
    width: 80vw;
    max-width: 1000px;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
}

li{
 list-style: none;
 display:inline;
}

ul{
 display: flex;
 padding-left: 0px;
 jastify-contents: center;
}

select{
	min-width:50%;
	font-size:1.1em;
	padding:4px 0;
	margin-bottom:12px;
}

nav{
	margin-top:24px;
	text-align:center;
}
nav a{
	display:inline-block;
	text-decoration:none;
	font-size:1.1em;
	font-weight:300;
	padding:3px 12px;
	color:#54bfb4;
}
nav a:hover{
	color:rgba(255,255,255,1);
}

span.arrow{
	text-decoration:none;
	text-align:center;
	display:block;
	position:fixed;
	bottom:12px;
	left:90%;
	font-size:2em;
	font-weight:900;
	margin:0;
	padding:0;
}
span.arrow a{
	text-decoration:none;
	margin:0;
	padding:2px;
	color:#ee7800;
}
span.arrow a img{width:34px; height:auto;}

/*artists*/
.artists{
	margin:0 12px;
	padding:24px 0;
	display:-ms-grid;
	display:grid;
	grid-gap: 12px;
	
	-ms-grid-columns:1fr 1fr 1fr 1fr 1fr;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-line-pack: start;
	align-content: start;
	
	justify-items:stretch;
	-webkit-box-align:stretch;
	-ms-flex-align:stretch;
	align-items:stretch;
}
.artists span > a,
.artists span > img,
.artists span > a > img{
	width:100%;
	height:auto;
}
.artists img:hover{
	transform: scale(1.15);
}


@media all and (max-width:1000px){
	span.arrow{ right:5vw;}
}
@media all and (max-width:648px){
	
html { font-size:min(2.5vw,32px); }
h1 { font-size:min(2.8vw,12px); }
h2 { font-size:min(4vw,16px); }
h3 { font-size:min(5vw,50px); }

.image {
	width: 90%;
}

.single {
	width:86vw
}

span.arrow{ right:6px;}
.artists{
	margin:0 24px;
	padding:24px 0;
	display:-ms-grid;
	display:grid;
	grid-gap: 8px;
	
	-ms-grid-columns:1fr 1fr 1fr;
	grid-template-columns:1fr 1fr 1fr;
}

.artists img:hover{
	transform: scale(1);
}

}

@media all and (max-width:420px){
html { font-size:min(3.4vw,36px); }
h1 { font-size:min(4vw,42px); }
h2 { font-size:min(5vw,48px); }
h3 { font-size:min(6vw,64px); }

span.arrow a img{width:32px; height:auto;}

.single {
	width:96vw
}

select{
	font-size:1.2em;
	padding:6px 0;
	margin-bottom:12px;
}

.artists{
	margin:0 8px;
}
/*.timetable.image {
	width: 96%;
}*/
}