body {
	font-size: 21px;
	font-family: 'M+PLUS+1p', -apple-system, BlinkMacSystemFont, "メイリオ", Meiryo, 'Open Sans', 'Roboto', sans-serif, 'Roboto Condensed', sans-serif;
	-webkit-text-size-adjust: 100%;
	color: #333;
	margin: 0;
	padding: 0;
	background: #000;
	background-size: contain;
}

body::before {
	content: "";
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	opacity: .8;
}

* {
	list-style: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}



a:link {
	text-decoration: none;
	color: #000;/*#3366CC #2E5199*/
}
a:visited {/*#1E3666*/
	text-decoration: none;
	border-style: none;
	color: #000;
}
a:hover {
	color: #F02;
	border-style: none;
}
a:active {
	color: #F05;
	border-style: none;
}





img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align:bottom;
}

img a {
  transition: 0.3s;
}

img a:hover {
  filter: brightness(1.3); /* 明るさを30%アップ */
}

p {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

/* @group テキスト処理 */

.break-text {/*通常のテキストを 自動で折り返しながら、HTML の改行 (<br>) も適用したい場合に使用。*/
    white-space: pre-line;
}

.break-wrap {/*日本語などの 単語の途中で改行を防ぎつつ、適切に改行したい 場合に使用。*/
    overflow-wrap: break-word;
}

.notice-list ul li {
    position: relative;
    left: -1em; /* 1文字分左へ */
}

txx {
	 white-space: nowrap;
}

/* @end */




.wrapper {
	background: #FFF;
//	border-bottom: 4px solid #F00;
//	box-shadow: 0px 7px 30px 0px rgba(0, 0, 0, 0.35);
}
.contents {
//	min-height: 50vh;
//	border-bottom: 1px solid #333;
//	background: #FFF;

}

#header {
//	background: #F00;
	
}

#footer {
//	background: #000;
	
}

.copy {
  height: 20px;
  margin: 0;
  padding: 0;
  background: #EEE;
  text-align: center;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 900;
}
.copy p{
//	font-size: .875rem;
	font-size: 10px;
	color: #333;
}
@media screen and (max-width: 820px) {
.copy {
  height:20px;
}
.copy p {
  font-size: 1.2vw;
}

}

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

body{
	font-size: 2.1vw;
	-webkit-text-size-adjust: 100%;
	background-size: cover;
//	background-color: #FF0;
}

body:before {
}


}
}



@media screen and (max-width: 820px) {
body {
	font-size: 2.9vw;
	-webkit-text-size-adjust: 100%;
	background-size: cover;
//	background-color: #F30;
}

body:before {
}



}

@media screen and (max-width: 480px) {
	body {
	font-size: 3vw;
	-webkit-text-size-adjust: 100%;
	word-break: break-all;
//	background-color: #0AF;
	}
	body:before {
//	background: url(../images/bg2324_1201min.png) center 0vw no-repeat;
	}



}






/* @group About 概要 */
.about-list {
	text-align: center;	
}
.about-list ul li {
	display: inline-block;	
}
.list-left {
	width: 30%;
}
.list-right {
	width: 70%;	
}

@media screen and (max-width: 820px) {
.about-list {
	text-align: left;
}
.about-list ul li {
	display: block;
}
.list-left {
	width: 100%;
}
.list-right {
	width: 100%;
}

}

/* @end */





/* @group ABOUT */

.about-container {
    display: grid;
    grid-template-columns: 25% 75%; /* 左30%、右70% */
//    gap: 10px;
    gap: 0;
    max-width: 1000px;
    margin: auto;
}
.about-container table {
	border: none;
}
.about-container td {
	padding: 0.5em;
}

/* カラムのスタイル */
.about-left {
    padding: 2em 2em;
    text-align: center;
	border-bottom: 1px solid #333;
}
.about-right {
    padding: 2em 2em;
    text-align: left;
	border-bottom: 1px solid #333;
}

/* 画面幅が820px以下の時は1カラムに */
@media (max-width: 820px) {
    .about-container {
	grid-template-columns: 1fr; /* 1カラム（100%幅） */
    }
	.about-left {
	padding: 0.5em 2em 0;
    text-align: left;
	border-bottom: 0px solid #333;
	margin-bottom: 1em;
	}
	.about-right {
	padding: 1em 2em;
    text-align: left;
	border-bottom: 1px solid #333;
	margin-bottom: 1em;
	}
}

/* @end */

/* @group Untitled Group */
	
/* @end */

/* @group NEWS */

.news-update {
	font-size: 85%;
	white-space: nowrap;
}

.news-list {
	font-size: 150%;
}
.news-list ul li {
	line-height: 3em;
	display: block;
	
}
.news-list ul li a:hover {
	background: #F60;
}

/* @end */

/* @group アコーディオン */

/* details のスタイル */
details {
//  width: 100%;
  border: 3px solid #AAA;
  margin-bottom: 2em;
  background-color: #fff;
  border-radius: 1em;
}

/* summary のスタイル */
summary {
  margin: 0.5em 0.5em;
  padding: 0.5em 0.5em;
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-left: 2em;
  font-size: 1.5em;
  font-weight: bold;
}

/* デフォルトのマーカー非表示 */
summary::marker, summary::-webkit-details-marker {
  display: none;
}

/* カスタム矢印マーカー */
summary::before {
  content: "▶";
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  transition: transform 0.3s, content 0.3s;
}

/* 開いた時の矢印変更 */
details[open] summary::before {
  content: "▶";
  transform: translateY(-50%) rotate(90deg);
}

details[open] summary:hover {
	color: #FFF;
	background: #F00;
	border-radius: 0.5em;
}

details p {
	margin: 0;
	padding: 0;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 0.3s ease, max-height 0.3s ease;
}
details[open]  {
	border: 5px #F00 solid;
	box-shadow: 0 1em 1em 0em rgba(255, 0, 0, 0.3);
}
details[open] p {
	opacity: 1;
	max-height: 50vh;
	margin: 0;
}
details[open] p strong {
	color: #F00;
	font-size: 1.25em;
}
details[open] hr {
	border: 0;
	height: 0;
	margin: 0;
	margin: 0;
}
details[open] .hr{
	border-bottom: 2px #AAA dotted;
	margin: 1.25em 0;
}

details:hover {
	color: #FFF;
	background: #F00;
	border-color: #F00;
}
details[open]:hover {
	color: #000;
	background: #FFF;
}

details ul{
//	margin-left: 1em;
	padding: 0;
}
details ul li {
//	text-indent: -1em;
	list-style: none;
}



/* @end */







/* @group ARTIST */



.artist-new-icon {
	float: right;
	top:3em;
	width: 3em;	
	height: 2em;
	margin: -3.25em -0.75em 0;
	background: url("../images/artist_new2.svg") center center no-repeat;
	background-size: 75%;
	position: relative;
	z-index: 4;
}

.artist-item {
	background-color: #FFF;
	padding: 0;
	margin: 0;
	text-align: center;
	font-size: 1.5rem;
//	border-radius: 7px;
	border: 1px solid #EEE;
	box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
}

.artist-item img {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
}

.artist-item img {vertical-align: bottom;}
.artist-item p {margin-bottom: 0;padding: 0;}

.artist-item table,
.artist-item tr,
.artist-item td {
  padding: 0;
  margin: 0;
}

.artist-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* デフォルトは3列 */
  gap: 20px;
  padding: 10px;
}

@media (max-width: 820px) {
  .artist-grid-container {
    grid-template-columns: repeat(2, 1fr); /* 820px以下で2列 */
  }
}

@media (max-width: 480px) {
  .artist-grid-container {
    grid-template-columns: repeat(2, 1fr); /* 480px以下で1列 */
  }
  .artist-new-icon {
	float: right;
	top:1.75em;
	width: 2em;	
	height: 0.75em;
	margin: -1.5em -0.75em 0;
	background: url("../images/artist_new2.svg") center center no-repeat;
	background-size: 68%;
	position: relative;
}

}

.artist-box-shadow1 {
  margin: 0;
  padding: 0;
  border-radius: 3px;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.4);
}

.artist-box-shadow2 {
  margin: 0;
  padding: 0;
  border-radius: 3px;
  box-shadow: -3px -3px 15px 3px rgba(255, 0, 0, 1), 3px 3px 15px 3px rgba(255, 193, 0, 1);
}

/* @group Artist-SNS-HP */

.image-hover-box {
  position: relative;
  display: inline-block;
//  width: 400px; /* 画像サイズに合わせて調整 */
//  height: 250px;
  overflow: hidden;
}

.image-hover-box img {
//  width: 100%;
//  height: 100%;
  display: block;
}

.overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); /* 画像を暗くする */
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}

.sns-links {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 15px;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sns-links li,
.sns-links li a {
  text-align: center;
  width: 40px;
  height: 40px;
  display: block;
}
.sns-links li a:hover {
  background-size: 115% 115%; /* 要素の幅と高さに合わせる */
}
.image-hover-box:hover .overlay,
.image-hover-box:hover .sns-links {
  opacity: 1;
}

.sns-logo-home a {
	background: url("../images/sns_logo_home.svg") center center no-repeat;
	background-size: 85% 85%; /* 要素の幅と高さに合わせる */
}
.sns-logo-x a {
	background: url("../images/sns_logo_x.svg") center center no-repeat;
	background-size: 85% 85%; /* 要素の幅と高さに合わせる */
}
.sns-logo-insta a {
	background: url("../images/sns_logo_insta.svg") center center no-repeat;
	background-size: 85% 85%; /* 要素の幅と高さに合わせる */
}
.sns-logo-line a {
	background: url("../images/sns_logo_line.svg") center center no-repeat;
	background-size: 85% 85%; /* 要素の幅と高さに合わせる */
}
.sns-logo-tiktok a {
	background: url("../images/sns_logo_tiktok.svg") center center no-repeat;
	background-size: 85% 85%; /* 要素の幅と高さに合わせる */
}
.sns-logo-facebook a {
	background: url("../images/sns_logo_facebook.svg") center center no-repeat;
	background-size: 85% 85%; /* 要素の幅と高さに合わせる */
}
.sns-logo-youtube a {
	background: url("../images/sns_logo_youtube.svg") center center no-repeat;
	background-size: 85% 85%; /* 要素の幅と高さに合わせる */
}

	@media (max-width: 820px) {
	.sns-links {
	  display: flex;
	  gap: 10px;
	}
	.sns-links li,
	.sns-links li a {
	  width: 40px;
	  height: 40px;
	}
	
	@media (max-width: 480px) {
	.sns-links {
	  display: flex;
	  gap: 5px;
	}
	.sns-links li,
	.sns-links li a {
	  width: 30px;
	  height: 30px;
	}
	
	}
	
	/* @end */
	
	/* @end */
	
	

	
	
	
	
	
.