@charset "UTF-8";
/* CSS Document */
body {font-family: "Rounded Mplus 1c";background-color:#000;color:#fff;}
a {display:block;text-decoration:none;}
img {max-width:100%;}
div.contents {padding-top:50px;}
h1 {font-size:10px;width:100%;position:absolute;right:0;left:0;top:5px;color:transparent;}
h2 {font-size:16px;letter-spacing:4px;margin:50px auto 10px;color:#fff;font-weight:300;}
h2:after {content:" ";display:block;width:50px;height:3px;background:#007fff;margin:5px auto;}
h3 {font-size:15px;margin-top:10px;background:#000;color:#fff;letter-spacing:2px;padding:2px;}
h4 {
	font-weight:500;
	letter-spacing:2px;
	}
h5 {
	font-size:10px;
	color:#aaa;
	}
h6 {
	font-size:12px;
	text-align:left;
	}
p {
	font-size:13px;
	width:90%;
	margin:0 auto;
	}
	
	
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 999;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 1000;
}


@-webkit-keyframes line-scale-party {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes line-scale-party {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

.line-scale-party > div:nth-child(1) {
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
  -webkit-animation-duration: 0.54s;
          animation-duration: 0.54s; }

.line-scale-party > div:nth-child(2) {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
  -webkit-animation-duration: 1.15s;
          animation-duration: 1.15s; }

.line-scale-party > div:nth-child(3) {
  -webkit-animation-delay: 0.04s;
          animation-delay: 0.04s;
  -webkit-animation-duration: 0.77s;
          animation-duration: 0.77s; }

.line-scale-party > div:nth-child(4) {
  -webkit-animation-delay: -0.12s;
          animation-delay: -0.12s;
  -webkit-animation-duration: 0.61s;
          animation-duration: 0.61s; }

.line-scale-party > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  -webkit-animation-name: line-scale-party;
          animation-name: line-scale-party;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
          animation-delay: 0; }

.line-scale-party {position:relative;}
.line-scale-party > div:nth-child(5) {
  display:block;
  position:absolute;
  background-color: #fff;
  width: 70px;
  height: 3px;
  border-radius: 2px;
  margin:0 auto;
  top:18px;
  left:0;
  right:0;
  }
.line-scale-party > div:nth-child(6) {
  display:block;
  position:absolute;
  width: 0px;
  height: 0px;
  border:solid;
  border-width:18px 20px 18px 0;
  border-color: transparent #fff transparent transparent;
  background:transparent;
  top:0px;
  left:44px;
  right:0;}
.line-scale-party > div:nth-child(7) {
  display:block;
  position:absolute;
  left:auto;
  right:46px;
  top:7px;
  width: 15px;
  height: 15px;
  background:transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  }
	

.slider {
	z-index:1;
	}

/*---news-----*/
.news::-webkit-scrollbar {
    width: 10px;
	height:0;
	z-index:3;
}

/*スクロールバーの軌道*/
.news::-webkit-scrollbar-track {
  border-radius: 10px;
  background:#ccc;
}

/*スクロールバーの動く部分*/
.news::-webkit-scrollbar-thumb {
  background: #007fff;
  border-radius: 10px;
}
.news {
	width:95%;
	box-sizing:border-box;
	margin:0 auto;
	height:100px;
	overflow:scroll;
	text-align:right;
	background:#333;
	}
.news li {
	position:relative;
	font-size:12px;
	margin:0px 10px;
	padding:5px 5px;
	border-bottom:1px solid #ccc;
	}
.news li span {
	position:absolute;
	top:6px;
	left:38px;
	text-align:left;
	font-size:10px;
	color:#aaa;
	}
.news li a {
	color:#fff;
	}
.news li p {
	width:calc( 100% - 90px);
	margin:0 0 0 auto;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
	}
.news li:before {
	position:absolute;
	top:3px;
	left:5px;
	content:"小骨";
	background:#16160e;
	color:#fff;
	padding:2px 3px;
	}
.news li.icon_hamamoto:before {
	content:"浜本";
	background:#6495ed;
	color:#fff;
	}
.news li.icon_mimura:before {
	content:"三村";
	background:#b7282e;
	color:#fff;
	}
.news li.icon_date:before {
	content:"伊達";
	background:#82ae46;
	color:#fff;
	}
	
	
	
/*-----小骨座TV-----*/
.video::-webkit-scrollbar {
    width: 0px;
	height:10px;
	z-index:3;
}

/*スクロールバーの軌道*/
.video::-webkit-scrollbar-track {
  border-radius: 10px;
  background:#ccc;
}

/*スクロールバーの動く部分*/
.video::-webkit-scrollbar-thumb {
  background: #007fff;
  border-radius: 10px;
}
.video {
	width:100%;
	box-sizing:border-box;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	overflow-x: auto;
	padding: 0px 20px 10px 20px;
	}
p.channel a {
	color:#fff;
}
.tv {
	width:100%;
	display:-webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	flex-wrap: no-wrap;
}
.video li{
  position:relative;
  display:inline-block;
  flex: 1 0 70%;
  padding-top:50%;
  margin:0 10px;
}
.video li iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

#kako li {margin:0 auto;width:75%;padding:1em;border-bottom:1px solid #aaa;}
#kako li:last-child {border:none;}
#kako li a {width:90%;display:inline-block;vertical-align:top;}
#kako li img {width:100%;display:block;vertical-align:top;}
#kako li div.cap {width:90%;display:block;margin:10px auto 0;}

p.motto a {width:100%;color:#fff;background:#007fff;padding:5px 0px;}

.ippuku a {color:#fff;}

.title {font-size:14px;font-weight:700;margin:5px;}
.title:before {content:"「"}
.title:after {content:"」";}
.dantai {color:#fff;font-size:12px;background:#000;padding:3px 5px;}
.kiiro {color:#333;background:#ffe002;}
.prace {font-size:12px;color:#888;}
.prace:before {content:"場所:";}
.infomation {position:relative;height:100px;}
.day {color:#666;margin:5px auto;}
.SvgIcon {
  position: absolute;
  width: 0;
  height: 0; 
}
.Svg01 {margin:0;width:105px;height:50px;}
.Svg01-front {
  fill: #007fff; 
}
.svg_koboneza {width:50px;height:50px;fill:#007fff;}
.ko {
	position:absolute;
	right:130px;
	bottom:20px;
    animation: Ko 20s ease infinite alternate-reverse;
}
@keyframes Ko {
  0% {right:130px;}
  100% {right:120px;}
}

.bone {
	position:absolute;
	right:60px;
	bottom:20px;
  animation: Bone 1s 1s ease infinite alternate-reverse;
}
@keyframes Bone {
  0% {bottom:20px;}
  100% {bottom:25px;}
}

.za {
	position:absolute;
	right:10px;
	bottom:20px;
    animation: Za .05s linear infinite alternate-reverse;
}
@keyframes Za {
  0% {transform: rotate(10deg);bottom:20px;}
  100% {transform: rotate(-10deg);bottom:25px;}
}
	
/*----twitter-----*/
.kobone {
	width:90%;
	height:300px;
	background:#fff;
	border:1px solid #aaa;
	margin:0 auto;
	}
.twitter {
	width:90%;
	margin:0 auto;
	}
.SandboxRoot .env-bp-820 .timeline-Tweet-text {
	font-size: 24px!important;
}
	
	
/*---insta----*/

.insta_icon {
	display:inline-block;
	margin:0 auto;
	height:150px;
	background:#fff;
	}
.insta_photo {
	width:100%;
	margin:0 auto;
	background:#fff;
	}
	
	
/*---footer*/
.footer {
	margin-top:10px;
	background:#333;
	padding:10px;
	}
.infomation li {
	display:inline-block;
	}
.infomation li a {
	font-size:10px;
	color:#fff;
	}
.copy {
	font-size:10px;
	color:#aaa;
	
	}
	
	
	
/*-------about-------*/
.member,h4,h5,h6 {
	width:90%;
	margin:0 auto;
	}
.member li {
	margin:20px auto;
	}
.member li img {
	width:200px;
	height:200px;
	object-fit:cover;
	}
.member h4 {
	margin-top:10px;
}
.member h6 {
	margin-top:10px;
	max-width:300px;
}

.caption {
	text-align:left;
	line-height:1.3em;
	max-width:350px;
	margin-bottom:20px;
	}
.catch {
	font-family:Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	margin:50px auto;
	}
.catch h2 {
	font-size:18px;
	margin:10px auto 0;
	}
.catch h2:after {
		display:none;
	}

.hamamoto {
	background:-webkit-radial-gradient(#343702, #184500, #187546, #006782, #0b1284, #760ea1, #83096e, #840b2a, #b13e12, #e27412, #343702, #184500, #187546, #006782, #0b1284, #760ea1, #83096e, #840b2a, #b13e12, #e27412);
  background:radial-gradient(#343702, #184500, #187546, #006782, #0b1284, #760ea1, #83096e, #840b2a, #b13e12, #e27412, #343702, #184500, #187546, #006782, #0b1284, #760ea1, #83096e, #840b2a, #b13e12, #e27412);
  background-size:100% 100%;
  animation:Grade 3s infinite ease alternate;
  background-position:center center
	}
@keyframes Grade {
  0% { background-size:500% 500%;
  }
  100% {
	  background-size:100% 100%;
  
  }
}

.date {
  background: -webkit-radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px), -webkit-radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px), -webkit-radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px), -webkit-radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px);
  background: radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px), radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px), radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px);
  background-color: #000;
  background-size: 120px 120px, 150px 150px, 70px 70px, 90px 90px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
  -webkit-animation: animation_006 100s linear infinite;
          animation: animation_006 100s linear infinite; }

@-webkit-keyframes animation_006 {
  0% {
    background-position: 0% 0%,5000% 5000%, 2000% 6000%, 8000% 2000%; }
  100% {
    background-position: 5000% 5000%, 2000% 6000%, 8000% 2000%,00% 00%; } }

@keyframes animation_006 {
 0% {
    background-position: 0% 0%,5000% 1000%, 2000% 6000%, 8000% 2000%; }
  100% {
    background-position: 5000% 5000%, 2000% 6000%, 000% 2000%,00% 00%; } }
	

.mimura {
  background-color: #ed2300;
  background-image: -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 40%, transparent 40%), -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 20%);
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 40%, transparent 40%), radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 20%);
  background-position: 0 0, 40px 40px;
  background-size: 20px 20px;
  -webkit-animation: animation_014 10s linear infinite;
          animation: animation_014 10s linear infinite; }

@-webkit-keyframes animation_014 {
  0% {
    background-position: 50% 0%; }
  100% {
    background-position: 1000% 0%; } }

@keyframes animation_014 {
  0% {
    background-position: 50% 0%; }
  100% {
    background-position: 1000% 0%; } }




/*----サイトマップ----*/
.sitemap {margin:50px auto;text-align:left;width:80%;}
.sitemap li {margin:10px;letter-spacing:3px;}
.sitemap li a {color:#007fff;border-bottom:3px solid #000;padding-bottom:3px;transition:all ease .3s ;}
.sitemap li a:hover {border-bottom:3px solid #007fff;}


/*----募集-------*/
.bosyu {max-width:900px;}
.text {text-align:left;margin-top:10px;line-height:1.3em;max-width:530px;}
.text a {color:#fff;background:#007fff;text-align:center;font-size:1.2em;padding:5px 0;margin:0 auto;max-width:400px;}


/* PC用
------------------------------------------------------------*/
@media screen and (min-width:900px){
	.slider {max-width:800px;margin:35px auto 0;}
	.news {max-width:600px;}
	.video li{flex: 1 0 35%;padding-top:20%;}
	#kako li {width:40%;display:inline-block;vertical-align:bottom;margin:0 1%;}
	.twitter,#insta {width:40%;display:inline-block;vertical-align:top;margin:20px 1% 0;max-width:300px;}
	
	.member {width:100%;}
	.member li {
	display:inline-block;
	width:32%;
	}
}

/* スマホ用
------------------------------------------------------------*/
@media screen and (max-width:899px){
	.br::before {
	content: "\A" ;
	white-space: pre ;
}
}