@charset "utf-8";
* {
  box-sizing: border-box;
}

/* clearfix */
*:after {
  display: block;
  clear: both;
}
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
}
.w100{width: 100%;}
.w80{width: 80%;}
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,ul,ol,dl,li,dt,dd,p,img,a,table,tr,th,td {margin:0;padding:0;border:0;font-size: 100%;vertical-align:baseline;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
article, header, footer, aside, figure, figcaption, nav, section {display:block;}
body {line-height: 1;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
ol,ul {list-style:none; list-style-type:none;}
table {border-collapse:collapse;border-spacing:0;}

a {color:#000; text-decoration:underline;}
body {font-family: Arial, Helvetica, Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
 background-image:url( "../img/back.webp"); background-position:center top; background-attachment:fixed;  background-size:contain; -webkit-background-size:contain;}
#wrap {width:95%;max-width:960px; margin:0 auto;}
#rmf {margin:20px 0;text-align:center; font-weight:bold; font-size:23px; color:#fff; }
.top-head {min-height:190px;}
#head { padding:0; background:none; width:100%; min-height:190px; z-index: 10000;}
.logo {text-align:center;}
.logo img {width:100%;max-width:760px;}

.about hr {border-bottom:none;border-top:1px solid #fff; width:70%; max-width:680px;}
#about p {line-height:1.8; width:95%;  max-width:920px;margin:0 auto; padding:10px 15px; color:#fff; text-align: center; font-size: 22px;}
#about h4{font-size: 28px; font-weight: bold; text-align: center; color:#fff; margin-bottom: 5px;}
#about a{ color:#fff; text-align: center; margin: auto; display: block; margin-top: 40px!important;}
#about a:link{ color:#fff; text-align: center; margin: auto; font-size: 20px;}
.icn img {width:30px; border-radius:5px; margin-top:15px; margin-right:10px;}
.marb50 {margin-bottom:50px;}
.marb40 {margin-bottom:40px!important;}
.marb30 {margin-bottom:30px;}	
.marb20 {margin-bottom:20px;}
.tt {width:90%; max-width:600px; margin:0 auto; background-color:rgba(255,255,255,.2)}
.tt th,.tt td {border:1px solid rgba(255,255,255,.5); padding:10px 15px;}
.tt th {text-align:center;}
.tt td {text-align:left; font-size:20px;}
.tt tr:nth-child(1) td{font-size:16px;}



.sns{width:100%; margin:auto; margin-top: 50px;}
.sns h2{text-align: center!important; margin:auto;}
.snsW{width:100%; margin:auto;  max-width:160px; margin-top: 30px!important;}
.snsW ul{width:100%;}
.snsW li{ width:60px; float: left; }
.snsW li:hover{ opacity: 0.8;}
.snsW li:last-child{ width:60px; float: right;}	
.snsW li img{ width:60px; border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;}	


/* transition */
#head,
.logo,.logo img {
    transition:all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
/* fixed */
#head.fixed {padding:10px 0; background:rgba(255,255,255,.8); position:fixed; top:0; min-height:50px; z-index: 10000;}
.fixed .logo {text-align:left;}.fixed img {max-width:120px;}
.fixed .about {display:none;}
.fixed #menu {display:block;}

.panel {margin:100px 0;}
.img-h {width:95%; max-width:900px; margin: auto;}
.img-m {width:80%; max-width:500px;}

.c {text-align:center!important;}
h2 {font-size:45px; font-weight:bold; color:#fff; margin-bottom:30px; }
h3 {font-size:26px; border-bottom:1px solid rgba(255,255,255,.5); padding:15px 10px 10px 10px; position: relative; text-shadow:0 0 5px #F1C13A;  }
h3 div {position: absolute; right: 0; bottom: 0;}

.text-box {line-height:1.3; padding:15px; text-shadow:0 0 4px #fff;}
.text-box_info	{line-height:1.3; padding:15px; text-shadow:0 0 6px #fff;font-size:15px;}
.nosmt {display:none;}
.music-wrap {border: 1px solid #222; padding-bottom: 0px;background: #222; color: #fff;}
.music-wrap div:nth-last-of-type(n) {display: inline-block; vertical-align: middle;}
.music { padding: 10px; margin-bottom: 0px; width: 60%}
audio {width: 150px;}

#credit{margin-top: 80px; margin-bottom: 30px;}
#credit p{font-size: 13px; color: #fff; text-align: center;}
textarea{height: auto;}
.f-ss{font-size: 10px!important;}
.f-s{font-size: 12px!important;}

.btn-green{ color: #333!important; text-align: center; margin: auto; display: block; font-weight: bold; background: #fff; padding: 8px; width: 40%; font-size: 12px;}


.popup {
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: all .2s;
  visibility: hidden;
}
.popup__container {
  width: 70%;
  height: 60%;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
overflow:auto!important;
  padding: 5rem;
}
.popup__container h5 {
  margin-bottom: 1.5rem;
	font-size: 21px!important;
}
.popup__container img {
	margin-bottom: 15px!important;
}
.popup:target {
  visibility: visible;
}
.popup__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: black;
  text-decoration: none;
  font-size: 5rem;
  line-height: 1rem;
	display: block;
}

.popup__text{
 line-height: 1.7;
}



@media screen and (min-width: 640px) {/* desktop */
.nosmt {display:inline;}
.nopc {display:none;}
body {background-image:url("../img/back.webp"); background-size:cover; -webkit-background-size:cover;}
.top-head {min-height:300px;}
#head.fixed {min-height:95px;}
.fixed img {max-width:300px;}
#menu li { padding-top:15px}
#menu li a {font-size:20px; padding:0 10px}
#menu  li {display:inline-block;}
#menu li a {width:80px; padding:30px 15px; font-size:17px; color:#333;}
#menu {display:none; position:absolute; top:30px; right:30px;}	
	
.col30,.col40,.col50,.col60,.col70 { display:inline-block; vertical-align:top;}
.col50 {width:49.5%;}
.marb50 {min-height:333px;}
.marb40 {min-height:320px;}	

.artist_w{margin-top:100px!important; margin: auto; width:960px;}
	
	.artist_w ul{ margin-top: 30px;}
	.artist_w li{ float: left; margin-right: 20px!important; width: 305px; position: relative;}
	.artist_w li:last-child{margin-right: 0px!important;}
	.artist_w li img{ width: 305px;}
	.artist_w li h4{font-size:18px;font-weight: bold;padding-top: 10px!important; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; text-align: center; color: #fff;}
	.artist_w li a{text-decoration: none;}
	.artist_w li a:link{text-decoration: none;}
	
	.artist_w li span::before{content: "";
    top: 0;
    left: 0;
    border-bottom: 3.4em solid transparent;
    border-left: 3.4em solid #bc3023; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 100;}
	
	.artist_w li span::after{ content: "New!";
    display: block;
    top: 10px;
    transform: rotate(-45deg);
    color: #fff; /* 文字色はここで変更 */
	font-family: Arial, Helvetica, "sans-serif" !important;
    left: 0;
    position: absolute;
    z-index: 101;}	
	
	
	
	
	
	.snsWrap{ margin-top: 10px; width: 100%;}
	.snsWrap dl{display: block!important; width: 55px; margin: auto; text-align: center; }
	.snsWrap dd{ float: left; margin-right: 5px!important; width: 25px!important;}
	.snsWrap dd:last-child{ float: left; margin-right: 0px!important; width: 25px!important;}
	.snsWrap dd img{width: 25px!important; border-radius:10px!important;}
	
	#event{width: 100%; max-width: 980px; margin: auto; margin-bottom: 50px;}
	.eventW{ width: 980px;}
	.eventW h4{ font-size: 27px; color: #fff; font-weight: bold;}
	.eventW h4 a{ color: #fff; font-weight: bold;}
	.eventW h4 a:link{  color: #fff; font-weight: bold;}
	.eventinfo{ font-size: 18px; color: #fff; line-height: 1.4;}
	.eventinfo span{font-size: 11px; color: #fff;}
	
	.contactform{margin-top: 80px;}
	
	.contactform p{font-size:14px; color: #fff; }

  .table02 {
    border: 1px solid #333333;
    width: 900px;
    margin: 0 auto;
    margin-top: 40px;
  }
  .table02 th {
    font-weight: normal;
    border: 1px solid #333333;
    padding: 40px 20px;
    background: #eeeeee;
    text-align: center;
    width: 260px;
    box-sizing: border-box;
    font-size: 16px;
    vertical-align: top;
  }
  .table01 td, .table02 td {
    padding: 40px 20px;
    border: 1px solid #333333; 
	background: #fff;
    text-align: left;
  }
  .table02 td p {
    text-align: left !important;
  }
	.btn{ text-align: center; margin: auto;}
  .btnInput {
    background: #65317f;
    font-size: 1.3rem;
    color: #FFF;
    width: 440px;
    padding: 10px 0;
	text-align: center;
    margin: 40px auto 40px;
  }		
	
	
	.sWrap{ margin-top: 5px; width: 100%;}
	
	.snsWrap{ margin-top: 10px; width: 100%;}
	.snsWrap dl{display: block!important; width: 55px; margin: auto; text-align: center; }
	.snsWrap dd{ float: left; margin-right: 5px!important; width: 25px!important;}
	.snsWrap dd:last-child{ float: left; margin-right: 0px!important; width: 25px!important;}
	.snsWrap dd img{width: 25px!important; border-radius:10px!important;}
	
}


@media screen and (max-width: 639px) {
	
#menu li { padding-top:15px}
#menu li a {font-size:13px; padding:0 10px}
#menu  li {display:inline-block;}
#menu li a {width:50px; padding:30px 5px; font-size:13px; color:#333;}
#menu {display:none; position:absolute; top:20px; right:5px; }		
	
	
		
	.popup__text{
 line-height: 1.7;
	font-size: 11px;
}
.popup__container h5 {
  margin-bottom: 1.5rem;
	font-size: 16px!important;
}
	
	.artist_w h3 {
 position: relative;
  padding: 1.5rem 2rem 0.6rem 82px;
  border-bottom: 2.2px solid #e678b4;
		 font-size: 28px;
		color:#e678b4!important;
}

.artist_w h3 span {
  font-family: 'Roboto', sans-serif;
  font-size: 70px;
  font-size: 7rem;
  line-height: 1;
  position: absolute;
  bottom: -1.7rem;
  left: 0;
color:#e678b4!important;	
}
	
	.artist_w{margin-top:100px!important;}
	
	.artist_w ul{ margin-top: 30px;}
	.artist_w li{ width: 100%; margin: auto; margin-bottom: 30px; position: relative;}
	.artist_w li:nth-child(2n){ width: 100%; margin: auto; margin-bottom: 30px;  position: relative;}
	.artist_w li img{ width: 100%; max-width: 600px;}
	.artist_w li h4{font-size:17px;font-weight: bold;padding-top: 10px!important; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; text-align: center; color: #fff;}
	.artist_w li a{text-decoration: none;}
	.artist_w li a:link{text-decoration: none;}
	
		.snsWrap{ margin-top: 10px; width: 100%;}
	.snsWrap dl{display: block!important; width: 55px; margin: auto; text-align: center; }
	.snsWrap dd{ float: left; margin-right: 5px!important; width: 25px!important;}
	.snsWrap dd:last-child{ float: left; margin-right: 0px!important; width: 25px!important;}
	.snsWrap dd img{width: 25px!important; border-radius:10px!important;}
	
	
.artist_w li span::before{content: "";
    top: 0;
    left: 0;
    border-bottom: 3.4em solid transparent;
    border-left: 3.4em solid #bc3023; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 100;}
	
	.artist_w li span::after{ content: "New!";
    display: block;
    top: 10px;
    transform: rotate(-45deg);
    color: #fff; /* 文字色はここで変更 */
	font-family: Arial, Helvetica, "sans-serif" !important;
    left: 0;
    position: absolute;
    z-index: 101;}	
	
    #event{width: 95%; max-width: 680px; margin: auto; margin-bottom: 50px;}
	.eventW{ width: 100%; max-width: 680px;  margin: auto;}
	.eventW h4{ font-size: 24px; color: #fff; font-weight: bold;}
	.eventW h4 a{ color: #fff; font-weight: bold;}
	.eventW h4 a:link{  color: #fff; font-weight: bold;}
	.eventinfo{ font-size: 16px; color: #fff; line-height: 1.4;}
	.eventinfo span{font-size: 10px; color: #fff;}
	

	.contactform{margin-top: 80px; width: 95%; margin: auto;}
	.contactform p{font-size:14px; color: #fff; }
	
.table02 {
    border: 1px solid #333333;
    width: 95%;
    margin: 0 auto;
    margin-top: 30px;
  }
.table02 th {
    font-weight: normal;
    border: 1px solid #333333;
    padding: 20px 20px;
    background: #eeeeee;
    text-align: center;
    width: 30%;
    box-sizing: border-box;
    font-size: 14px;
    vertical-align: top;
  }
.table01 td, .table02 td {
    padding: 20px 20px;
    border: 1px solid #333333; 
	background: #fff;  
    text-align: left;
	font-size: 14px;
  }
  .table02 td p {
    text-align: left !important;
  }
  .btnInput {
    background: #65317f;
    font-size: 0.8rem;
    color: #FFF;
     width: 80%;
    padding: 10px 0;
	  margin: 30px auto 40px;
  }
	
		.sWrap{ margin-top: 5px; width: 100%;}
		.snsWrap{ margin-top: 10px; width: 100%;}
	.snsWrap dl{display: block!important; width: 55px; margin: auto; text-align: center; }
	.snsWrap dd{ float: left; margin-right: 5px!important; width: 25px!important;}
	.snsWrap dd:last-child{ float: left; margin-right: 0px!important; width: 25px!important;}
	.snsWrap dd img{width: 25px!important; border-radius:10px!important;}
	
		
	
	
}