@charset "utf-8";
/* レイアウトのためのCSS */
@media screen and (min-width: 769px){
	.pc{
		display: none;
	}
	
	nav ul{
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  gap: 30px;
	}
	
	nav ul img{
      width: 90%;
    }
	
	#g-nav{
	  flex-direction: column;
	  height: 100%;
	  width: 60px;
	  padding-top: 120px;
	}
	#g-nav ul{
	  flex-direction: column;
	}

	#g-nav ul li{
		border-bottom: 3px solid #f5f5f5;
	}

	#g-nav ul li a{
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
	  display: table-cell;
	  vertical-align: middle;
	  padding: 10px 5px;
	}
	
	#header-box{
	  position:absolute;
		  top:40%;
		  left:50%;
		  transform:translate(-50%,-50%);
	}
	
	/*スクロールダウン全体の場所*/
.scrolldown2{
    position:absolute;
	bottom:30px;
	left:50%;
}
	
	h1 img{
		height: 3%;
		margin-left: 50px;
	}
	
	#about,
	#schedule,
	#access,
	#news-area,
	#news,
	#staff_player,
	#staff-area,
	#player-area,
	#question{
		padding: 60px 100px;
	}
	
	#img{
		width: 40%;
	}
	
	#text{
		width: 60%;
	}
	
	#about{
		padding: 100px;
	}
	
	#p{
		width: 60%;
		margin: 0 auto;
	}
	#img{
		width: 100%;
	}
	
	#address{
		width: 400px;
	}
	
	footer{
		padding: 30px 0 30px 100px;
		background-image: url("../img/footer_bg.jpg");
	}
	
	#footer-area{
	display: flex;
	justify-content: space-between;
	padding: 30px;
	width: 100%;
}
	.newslist,
	.list{
		padding-right: 150px;
	}
}


@media screen and (max-width: 768px){
	.sp{
		display: none;
	}
	
	#header{
		height: auto;
		min-height: 100vh;
		padding-top: 50px;
	}
	
	#insta{
		position: fixed;
		 top: 60px;
		 right: 20px;
	}
	
	#insta i{
		font-size: 1.5em;
	}
	
	#g-nav,
	#g-nav ul{
		width: 100%;
		height: 50px;
	}
	
	#g-nav ul li{
		border-right: 3px solid #f5f5f5;
		text-align: center;
	}
	
	#header-box{
		gap: 20px;
		text-align: center;
	}
	
	#header-box li a img{
		width: 80%;
		margin: 0 auto;
	}
	
	/*円形アニメーション部分*/
	.container {
    position: fixed;
		bottom: -30px;
		left: -30px;
	padding: 0;
    }
	
	.block {
	  width: 200px;
	  height: 200px;
	}
	
	textpath {
    color: red;
	fill: #d51519!important;
    font-size: 11px;
    letter-spacing: 0.25em; 
  }

    /*/円形アニメーション*/
	
	h1 img{
		height: 5%;
	}
	
	#img{
		flex-wrap: wrap;
	}
	
	#img p{
		width: 90%;
	}
	
	.scrolldown2{
    position:absolute;
	bottom:30px;
	right:30px;
    }
	
	.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:5px;
	}
	
	#about,
	#schedule,
	#access,
	#footer{
		padding: 60px 30px;
		width: 100%;
	}
	
	.about{
	background-image: url(../img/logo_bg_sp.png);
	background-size: 90%;
}
	
	.calendar iframe{
	  width: 100%;
	  height: 430px;
	}
	
	#ideal{
		width: 100%;
	}
	
	#map iframe{
		width: 100%;
	}
	
	#map,
	#address,
	#schedule,
	#news-area,
	#staff-area,
	#player-area,
	#question,
	footer{
		width: 100%;
		margin: 0;
	}
	
	#question{
		padding: 60px 10px;
		test-align: center;
	}
	
	footer{
		background-image: url("../img/footer_bg_sp.jpg");
	}
	
	#sponsor-area{
		width: 100%;
		padding: 30px;
	}
	
	#footer-area{
		padding-bottom: 70px;
	}
	
	#logo-area{
		padding: 40px;
		width: 100%;
		text-align: center;
	}
	
	#copyright{
		letter-spacing: -0.001em;
	}
	
	a[href^="tel:"] {
　pointer-events: none;
}
	
	img.title-img{
	  width: 100%;
}
	
	#news h1 img,
	#staff_player h1 img{
		margin-left: 30px;
	}
	
	#staff-area{
		margin-bottom: 30px;
	}
	
	#staff_player h2,
	#staff_player h3{
		margin-left: 20px;
	}
	
	.list li{
		gap: 0;
	}
	
	.list li p{
		width: 100%;
	}
	
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	right:10%;
	top:100px;
    /*全体の高さ*/
	height:300px;
}
	
	.accordion-002{
		width: 150px;
		margin-right: 10px;
	}
}
@media screen and (max-width: 380px){
	#header-box li a img{
		width: 70%;
	}
}