/* CSS Document */
/*横スクロールの設定*/
.nav-wrap {
  position: relative;
  margin-top:40vw;	
}
.scroll-nav {
  width: 100%;
  background: rgba(252,168,3,0.5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 慣性スクロール */
}
.scroll-nav ul {
  max-width: 1060px; /* メニューの最大幅 */
  min-width: 910px; /* メニューの最小幅 */
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  list-style: none;
  padding-right: 25px; /* 右側の固定分余白を空ける */
  display:flex;
}
.scroll-nav ul li {
  width: 130px; /* メニューの個別の幅 */
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  box-sizing: border-box;
}
.scroll-nav ul li:hover {
  background: rgba(3,252,74,0.5); /* マウスホバー時の背景色 */
}
.scroll-nav ul li a {
  display: inline-block;
  color:#000;
  font-weight:bold;
  text-decoration: none;
}
.scroll-nav ul li + li {
    border-left: none;
}
.next-btn { /* 右側に固定する部分 */
  position: absolute;
  top: 0;
  right: 0;
  width: 25px; /* 固定部分の幅 */
  height: 40px; /* メニューの高さに合わせる */
  line-height: 40px;
  background: #fff;
  color: #555;
  font-weight:bold;
  text-align: center;
}
@media only screen and (min-width: 910px) { /* PCサイズでの指定 */
.scroll-nav ul {
  padding: 0;
}
.scroll-nav ul li {
  width: 14.2%; /* メニューの個別の幅 */
}
.next-btn {
  display: none; /* 右側の固定部分を非表示 */
}
}
/*画像切換え部分*/
.container {
  position: relative;
  width: 100%;
  height: auto;
  margin:0 auto;
}
.image {
  position: absolute;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 100%;
	opacity: 0;
	animation: change-img-anim 20s infinite;
}
.image:nth-of-type(1) {
  animation: change-img-anim-first 20s infinite;
	animation-delay: 0s;
}
.image:nth-of-type(2) {
	animation-delay: 5s;
}
.image:nth-of-type(3) {
	animation-delay: 10s;
}
.image:nth-of-type(4) {
	animation-delay: 15s;
}

@keyframes change-img-anim-first {
	0%{ opacity: 1;}
  10%{ opacity: 1;}
  20%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  10%{ opacity: 1;}
  20%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}
/*20250507音楽隊演奏予定欄の写真切り替えのため作成*/
.image01 {
  position: absolute;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 100%;
	opacity: 0;
	animation: change-img-anim01 45s infinite;
}
.image01:nth-of-type(1) {
  animation: change-img-anim-first01 45s infinite;
	animation-delay: 0s;
}
.image01:nth-of-type(2) {
	animation-delay: 5s;
}
.image01:nth-of-type(3) {
	animation-delay: 10s;
}
.image01:nth-of-type(4) {
	animation-delay: 15s;
}
.image01:nth-of-type(5) {
	animation-delay: 20s;
}
.image01:nth-of-type(6) {
	animation-delay: 25s;
}
.image01:nth-of-type(7) {
	animation-delay: 30s;
}
.image01:nth-of-type(8) {
	animation-delay: 35s;
}
.image01:nth-of-type(9) {
	animation-delay: 40s;
}
@keyframes change-img-anim-first01 {
	0%{ opacity: 1;}
  5%{ opacity: 1;}
  11%{ opacity: 1;}
  21%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim01 {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  11%{ opacity: 1;}
  21%{ opacity: 0;}
  100%{ opacity: 0;}
}

/*キャラクターの大きさ*/
h3 img{
	height:2em;
}

/*表の色*/
.pi {
	text-align: center;
	background-color: #FFE8E8;
	width: 20%;
}
/*応募方法横並び*/
.kikkake{
	display: flex;
	flex-wrap: wrap;
}
.kikkake dt{
	width:auto;
	padding:0 1em;
}
/*演奏予定の見出し*/
.midashi{
	display:inline-block;
	background:#1200FF;
	padding: 0.3em 1em;
	color:white;
	border-radius: 25px;
	font-weight:bold;
}