*{margin:0;padding:0;border:0;}
body {
  background-color: #fff;
  color: #222;
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-print-color-adjust: exact;
  background: radial-gradient(circle at 20% 30%, rgba(255, 154, 158, 0.1) 0%, transparent 30%),
              radial-gradient(circle at 70% 60%, rgba(161, 140, 209, 0.2) 0%, transparent 30%),
              radial-gradient(circle at 50% 80%, rgba(251, 194, 235, 0.2) 0%, transparent 30%);
  background-size: 200% 200%;
  background-position: 50% 50%;
  animation: subtleMove 20s ease-in-out infinite alternate;
  overflow-x:hidden;
}
@keyframes subtleMove {
  0% {
    background-position: 47% 53%;
  }
  25% {
    background-position: 53% 47%;
  }
  50% {
    background-position: 49% 51%;
  }
  75% {
    background-position: 51% 49%;
  }
  100% {
    background-position: 50% 50%;
  }
}

a:link {
	color: #222;
	text-decoration: none
}
a:active {
	color: #222;
	text-decoration: underline
}
a:visited {
	color: #222;
	text-decoration: none
}
a:hover {
	color: #222;
	text-decoration: none
}

img {
	max-width: 100%;
	height: auto
}


/* ---------------- */
#wrap {
	padding:80px 20px 0;
	margin:0 auto;
	max-width: 1260px;
}
#header {}
	#header #header-logo{
	  position: absolute;
	  top: 0;
	  left:0;
	  padding:15px;
	  z-index:10;
	}
		#header #header-logo a{
			display:flex;
			align-items: center;
			font-family: "RocknRoll One";
			font-size:32px;
		}
		#header #header-logo a img{
			display:inline-block;
			margin-right:12px;
		}
	#header .nav{
	  position: fixed;
	  top: 0;
	  right:0;
	  padding:24px;
	  z-index:10;
	}
		/* 初期設定 */
		#header .nav-toggle {
		  display: none;
		}

		/* ハンバーガー */
		#header .nav-toggle-label {
		  display: inline-block;
		  cursor: pointer;
		  width: 40px;
		  height: 34px;
		  position: relative;
		  z-index: 2;
		}

		#header .nav-toggle-label::before,
		#header .nav-toggle-label::after {
		  content: "";
		  position: absolute;
		  left: 0;
		  width: 100%;
		  height: 3px;
		  background: #333;
		  transition: transform 0.3s ease, opacity 0.3s ease;
		}
		#header .nav-toggle-label::before {
		  top: 15px;
		  box-shadow: 0 -13px 0 #333, 0 13px 0 #333;
		}
		#header .nav-toggle-label::after {
		  top: 15px;
		}

		/* 開いた時 */
		#header .nav-toggle:checked + .nav-toggle-label::before {
		  transform: rotate(45deg);
		  box-shadow: none;
		}
		#header .nav-toggle:checked + .nav-toggle-label::after {
		  transform: rotate(-45deg);
		}
		#header .nav-toggle:checked + .nav-toggle-label + .nav-menu {
		  right: 0;
		}

		/* メニュー */
		#header .nav-menu {
		  list-style: none;
		  padding: 0;
		  margin: 0;
		  position: fixed;
		  top: 0;
		  right: -100%;
		  max-width: 70%;
		  width: 350px;
		  height: 100%;
		  background: #fff;
		  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
		  transition: right 0.3s ease;
		}
			#header .nav-menu p{}
				#header .nav-menu p a {
				  display: block;
				  padding: 1rem;
				  text-decoration: none;
				  color: #333;
				}
			#header .nav-menu ul{
				list-style:none;
			}
				#header .nav-menu li {
				  border-bottom: 1px solid #ddd;
				}
				#header .nav-menu li a {
				  display: block;
				  padding: 16px;
				  text-decoration: none;
				  color: #333;
				}

			#header .nav-menu ul.sns{
				margin:1.5rem 0 0 0;
				padding:0 10px 0 5px;
				display:flex;
				flex-wrap: wrap;
				justify-content: flex-start;
			}
				#header .nav-menu ul.sns li{
					margin:0;
					padding:0;
					border-bottom:none;
				}
				#header .nav-menu ul.sns li:last-child{
					padding-left:5px;
				}
				#header .nav-menu ul.sns li a{padding:5px;}
				#header .nav-menu ul.sns li img{width:60px;}

#main{}


#footer {
	margin-top: 7rem;
	padding: 40px 20px;
	border-top:1px solid #ccc;
}
	#footer #footer-sns {}
		#footer #footer-sns ul {
			display:flex;
			justify-content: center;
		}
			#footer #footer-sns ul li{
				padding:5px;
				list-style:none;
			}
			#footer #footer-sns ul li:last-child{
				padding-left:10px;
			}
			#footer #footer-sns ul li img{
				width:75px;
			}
	#footer #footer-logo {
		text-align:center;
		margin-top:20px;
	}
	#footer #footer-copyright {
		margin-top:0.5rem;
		text-align:center;
		color: #888
	}
	#footer #footer-copyright small{
		font-size: 20px;
	}
	#footer #footer-copyright span{
		margin-top:0.5rem;
		display:block;
		text-align:center;
		font-size: 18px;
		color: #888
	}
	#footer #footer-copyright span a{color: #888}

@media screen and (max-width: 768px) {
	#header #header-logo a{
		font-size:30px;
		letter-spacing:-3px;
	}
		#header #header-logo a img{
			margin-right:8px;
		}
	#footer #footer-copyright small {
		font-size: 15px;
	}
	#footer #footer-copyright span{
		font-size: 14px;
	}
}


/* *******************************************
 トップ：メインビジュアルエリア
******************************************* */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.bg-movie {
  position: absolute;
  left:0;
  top:80px;
  z-index:-1;
  width: 100%;
  overflow: hidden;
  background-color: #000;
}

.slider-row {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  
}

.slider {
  display: flex;
  width: calc(4 * 45vw); /* パネル幅で調整 */
  animation: scroll 60s linear infinite; /* ゆっくり流す */
}

.slide {
  flex: 0 0 45vw; /* 各パネルのサイズ */
}

.slide img,
.slide video {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  padding: 0;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

background-color: #002a3a;
background-image: url("https://www.transparenttextures.com/patterns/shine-dotted.png");

  opacity: 0.4; /* 調整可能 */
  z-index: 1;
  pointer-events: none;
}

/* ---------------- */
@keyframes float {
  0% { transform: translateY(0); opacity:1; }
  50% { transform: translateY(-4px); opacity:0.8;}
  100% { transform: translateY(0); opacity:1; }
}

#main header.home{
	height: calc(9 * 90vw / 16);
	display:flex;
	justify-content: center;
	align-items: center;
	position:relative;
}
	#main header.home h1{
		font-family: "RocknRoll One";
		font-weight:400;
		font-size:clamp(32px, 7vw, 148px);
		color:#fff;
		position:relative;
		margin-top:-2vw;
	}
	#main header.home h1::after{
		display:block;
		content:"";
		width:100%;
		height:2px;
		position:absolute;
		left:0;
		bottom:0;
		background:#fff;
	}

	#main header.home .bubble {
	  position: absolute;
	  background: rgba(255, 255, 255, 0.8);
	  color: #333;
	  padding: 8px 32px 12px;
	  border-radius: 50px;
	  font-size: 2vw;
	  text-align: center;
	  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	  z-index: 2;
	  list-style:none;
	}
		#main header.home h1 + ul{
			margin:0;
			padding:0;
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
		}
		#main header.home .bubble::after {
		  content: "";
		  position: absolute;
		  bottom: -10px;
		  left: 50%;
		  transform: translateX(-50%);
		  border-width: 10px 10px 0;
		  border-style: solid;
		  border-color: rgba(255,255,255,0.9) transparent transparent transparent;
		}

		/* 個別の位置指定 */
		#main header.home .bubble1 {
		  top: 10%;
		  left: 10%;
		  animation: float 5s ease-in-out infinite;
		}
		#main header.home .bubble2 {
		  bottom: 15%;
		  right: 35%;
		  animation: float 7s ease-in-out infinite;
		}
		#main header.home .bubble3 {
		  top: 20%;
		  right: 5%;
		  animation: float 9s ease-in-out infinite;
		}

@media screen and (max-width: 768px) {
	.slider {
	  width: calc(4 * 100vw);
	  animation: scroll 20s linear infinite;
	}
	.slide {
	  flex: 0 0 100vw;
	}

	#main header.home{
		height: calc(9 * 200vw / 16);
	}
	#main header.home h1{
		font-size:11vw;
	}
	#main header.home .bubble {
	  padding: 6px 22px 8px;
	  font-size: 4vw;
	}
		/* 個別の位置指定 */
		#main header.home .bubble1 {
		  top: 12%;
		  left: 0;
		}
		#main header.home .bubble2 {
			bottom: 18%;
			right:20%;
			font-size: 4.5vw;
		}
		#main header.home .bubble3 {
		  top: 27%;
		  right: 2px;
		}
}

/* *******************************************
 各セクション
******************************************* */
#main .section-about{}

	#main .member{
		margin:0;
		padding:0;
	}
		#main .member li{
				list-style:none;
				padding:0 2% 0 calc(200px + 4%);
				margin:3rem 0 0 0;
				position:relative;
		}
			#main .member li p{
				margin:0;
				line-height:1.5;
			}
			#main .member .avater{
				text-align:center;
				position:absolute;
				left:2%;
				top:0;
				width:200px;
			}
				#main .member .avater a{}
				#main .member .avater img{
					border-radius:50%;
					width:100%;
				}
			#main .member .avater-name{
			}
			#main .member .sns-tag{
				margin-top:-0.5rem;
				font-size:1.4rem;
			}
				#main .member .sns-tag a{}

			#main .member .instrument{
				margin-top:0.5rem;
				font-size:1.6rem;
			}
			#main .member .instrument + p{
				font-size:1.5rem;
				line-height:1.5;
			}



#main .section-live{
	margin-top:10rem;
	padding-top:40px;
	padding-bottom:40px;
	position:relative;
}
	#main .section-live::after{
		display:block;
		content:"";
		position:absolute;
		left:calc(50% - 50vw);
		top:0;
		z-index:-1;
		width:100vw;
		height:100%;
		background-image: url(/img/pic-live.png);
		background-size: cover;
		background-position:50% 50%;
	}
	#main .section-live-layout{
		backdrop-filter: blur(6px);
		background: rgba(255, 255, 255, 0.8);
		padding: 20px 40px;
		width: 60%;
		min-width: 450px;
		box-shadow:0px 0px 4px 3px rgba(255, 255, 255, 0.6);
		border:1px solid #fff;
	}

	#main .section-live h2{margin:0;}
	#main .section-live p{}

#main .section-practice{}
	#main .section-practice h2{}
	#main .section-practice h3{}
	#main .section-practice p{}

		#main .section-practice ol.practice-schedule{
			margin:0;
			padding:0;
			display:flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
			#main .section-practice ol.practice-schedule > li{
				list-style:none;
				width:45%;
				padding:12px 2%;
				margin:2rem 0 0 0;
				border-left:1px solid #ccc;
				position:relative;
			}
			#main .section-practice ol.practice-schedule > li::before{
				content:"";
				display:block;
				position:absolute;
				left:0;
				top:0;
				border:10px solid transparent;
				border-top-color:#002a3a;
				border-left-color:#002a3a;
			}
			#main .section-practice ol.practice-schedule > li.tbd::before{
				border-top-color:#ccc;
				border-left-color:#ccc;
			}
			#main .section-practice ol.practice-schedule > li:nth-child(3n+1) {
				border-left:none;
			}
			#main .section-practice ol.practice-schedule > li p{
				margin:0.4rem 0 0 0;
			}
				#main .section-practice .practice-schedule-no{font-size:26px;font-weight:bold;}
				#main .section-practice .practice-schedule-date{font-size:25px;font-weight:bold;}
				#main .section-practice .practice-schedule-place{font-size:25px;}
				#main .section-practice .practice-schedule-details{font-size:25px;}
				#main .section-practice .practice-schedule-details + ul{
					margin-top:0;
					padding:0;
				}
					#main .section-practice .practice-schedule-details + ul > li,
					#main .section-practice .practice-schedule-details + p{
						font-size: 20px;
					}
		#main .section-join{
			margin-top: 4rem;
		    padding: 28px 5% 28px 20%;
	    	border: 10px solid rgba(0, 42, 58, 0.4);
	    	background: url("/img/icon-wakaba.svg") 0 center / 20% auto no-repeat;
		}
			#main .section-join h2{
				margin:0;
				font-size:2.2rem;
			}
			#main .section-join h2+p{margin-top:0.5rem;line-height:1.6;}
			#main .section-join p.section-join-contact{
				display:flex;
				align-items: center;
				line-height:1.4;
				margin-top:0;
			}
				#main .section-join p.section-join-contact a{padding:5px;}
				#main .section-join p.section-join-contact img{width:75px;}


#main .section-gallery{}
	#main .section-gallery h2{}
	#main .section-gallery p{}

#main .section-support{}
	#main .section-support h2{}
	#main .section-support p{}



#main .list-gallery{
	margin:1.5rem 0 0 0;
	display:flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
	#main .list-gallery li{
		list-style:none;
		box-sizing:border-box;
		margin:0;
		padding:20px;
		width:50%;
	}



@media screen and (max-width: 768px) {

	#main .member{
	}
		#main .member li{
				padding:0;
				margin:3rem 0 0 0;
				position:relative;
		}
			#main .member li p{
				margin:0;
				line-height:1.5;
			}
			#main .member .avater{
				position:relative;
				left:0;
				width:60px;
				float:left;
				padding-right:2%;
			}
				#main .member .avater a{}
				#main .member .avater img{
					border-radius:50%;
					width:100%;
				}
			#main .member .avater-name{
				font-size:22px;
			}
			#main .member .sns-tag{
				margin-top:-0.3rem;
				font-size:16px;
			}
				#main .member .sns-tag a{}

			#main .member .instrument::before{
				content:"";
				display:block;
				clear:both;
				width:0;
				height:0;
				line-height:0;
			}
			#main .member .instrument{
				margin-top:0.5rem;
				font-size:18px;
			}
			#main .member .instrument + p{
				font-size:16px;
			}


	#main .section-live{
		margin-top:7rem;
		padding-top:30px;
		padding-bottom:30px;
	}
		#main .section-live-layout{
			width: 100%;
			min-width: initial;
			box-sizing:border-box;
			padding: 20px 20px;
		}

		#main .section-live h2{}
		#main .section-live p{}

	#main .section-practice{}
		#main .section-practice h2{}
		#main .section-practice h3{}
		#main .section-practice p{}

		#main .section-practice ol.practice-schedule{
			display:block;
			justify-content: initial;
			flex-wrap: initial;
		}
			#main .section-practice ol.practice-schedule > li{
				width:initial;
				padding:12px 0 12px 24px;
				margin:2rem 0 0 0;
				border-left:none;
			}
			#main .section-practice ol.practice-schedule > li p{
				margin:0.3rem 0 0 0;
			}
				#main .section-practice .practice-schedule-no{font-size:21px;}
				#main .section-practice .practice-schedule-date{font-size:20px;}
				#main .section-practice .practice-schedule-place{font-size:18px;}
				#main .section-practice .practice-schedule-details{font-size:18px;}
					#main .section-practice .practice-schedule-details + ul > li,
					#main .section-practice .practice-schedule-details + p{
						font-size: 16px;
					}
		#main .section-join{
			margin-top: 4rem;
		    padding: 20px 24px 24px;
	    	border: 8px solid rgba(0, 42, 58, 0.4);
	    	background:none;
		}
			#main .section-join h2{
				font-size: 1.8rem;
				line-height: 1.4;
				padding: 3px 0 4px 45px;
				background: url(/img/icon-wakaba.svg) -13px center / 60px auto no-repeat;
			}
			#main .section-join h2+p{margin-top:0.5rem;}
				#main .section-join p.section-join-contact img{width:55px;}

			
	#main .section-gallery{}
		#main .section-gallery h2{}
		#main .section-gallery p{}

	#main .section-support{}
		#main .section-support h2{}
		#main .section-support p{}

	#main .list-gallery{
		margin:1.5rem 0 0 0;
		display:block;
	}
		#main .list-gallery li{
			list-style:none;
			box-sizing:border-box;
			margin:1rem 0 0 0;
			padding:0;
			width:auto;
		}
	#main .list-gallery li:nth-child(odd){
		margin-top:0;
		padding:0;
	}
	#main .list-gallery li:nth-child(even){
		margin-top:0;
		padding:0;
	}


}


/* *******************************************
 汎用エレメント
******************************************* */

#main img {
	width: 100%;
}

#main a:not(:has(img)) {
  text-decoration:underline;
}
#main a:not(:has(img)):hover {
  text-decoration:none;
}

#main .button {
  display:inline-block;
  position: relative;
  line-height:1;
}
#main .button::before {
	content: "";
    display: block;
    position: absolute;
    right: -40px;
    top: calc(50% - 9px);
    z-index: 1;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 5px solid #002a3a;
    border-left: 10px solid #002a3a;
    transition: all 500ms;
    pointer-events: none;
}
#main .button::after {
  content: "";
  position: absolute;
  right: -25px;
  top: calc(50% - 1px);
  width: 50px;
  height: 2px;
  background:#002a3a;
  z-index: 1;
  transition: all 500ms;
  pointer-events: none;
}
#main .button:hover::before {
  border-bottom-color:#70bdca;
  border-left-color:#70bdca;
  right: -50px;
}
#main .button:hover::after{
  background:#70bdca;
  right: -35px;
}
	#main .button a{
	  display:inline-block;
	  padding: 12px 45px 16px 40px;
	  border: none;
	  border-radius: 80px;
	  font-weight: bold;
	  letter-spacing: 3px;
	  text-transform: uppercase;
	  cursor: pointer;
	  color: #002a3a;
	  transition: all 500ms;
	  position: relative;
	  overflow: hidden;
	  outline: 2px solid #002a3a;
	  text-decoration:none;
	}

	#main .button a:hover {
	  color: #ffffff;
	  transform: scale(1.1);
	  outline: 2px solid #70bdca;
	  box-shadow: 4px 5px 17px -4px #268391;
	}

	#main .button a::before {
	  content: "";
	  position: absolute;
	  left: -50px;
	  top: 0;
	  width: 0;
	  height: 100%;
	  background-color: #002a3a;
	  transform: skewX(45deg);
	  z-index: -1;
	  transition: width 500ms;
	}
	#main .button a:hover::before {
	  width: 250%;
	}




#main>h1 {
	position: relative;
	margin-top:5rem;
	padding: 40px 0;
	font-size: 3.8rem;
	line-height: 1.2em;
	font-weight: bold;
	text-align: center
}

#main h2 {
	margin: 7rem 0 0;
	font-size: 2.6rem;
	line-height: 1.7em;
	font-weight: bold;
}
#main h3 {
	margin-top: 3rem;
	font-size: 2.2rem;
	line-height: 1.7em;
	font-weight: bold
}
#main h4 {
	margin-top: 2rem;
	font-size: 1.8rem;
	line-height: 1.7em;
	font-weight: bold
}
#main p {
	margin-top: 1.6rem;
	font-size: 1.8rem;
	line-height: 1.7em
}
#main ul, #main ol {
	margin-top: 1rem;
	margin-left: 44px;
	border-top: 1px solid transparent
}
#main ul li, #main ol li {
	margin-top: 0.5rem;
	font-size: 1.8rem;
	line-height: 1.7em
}





@media screen and (max-width: 768px) {

	#main .button a{
	  letter-spacing: 1px;
	}


	#main>h1 {
		position: relative;
		margin-top:3rem;
		padding: 35px 0;
		font-size: 36px;
		line-height: 1.2em;
		font-weight: bold;
		text-align: center
	}

	#main h2 {
		margin: 5rem 0 0;
		font-size: 30px;
		line-height: 1.7em;
		font-weight: bold
	}
	#main h3 {
		margin-top: 2.2rem;
		font-size: 24px;
		line-height: 1.7em;
		font-weight: bold
	}
	#main h4 {
		margin-top: 2rem;
		font-size: 20px;
		line-height: 1.7em;
		font-weight: bold
	}
	#main p {
		margin-top: 1rem;
		font-size: 18px;
		line-height: 1.7em
	}
	#main ul, #main ol {
		margin-top: 1rem;
		margin-left: 23px;
		border-top: 1px solid transparent
	}
	#main ul li, #main ol li {
		margin-top: 0.5rem;
		font-size: 16px;
		line-height: 1.7em
	}

}