body {
    margin: 0;
    padding: 0;
    text-align: center;
    background-color:#FFF;
    font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",Osaka,arial,verdana,sans-serif;
    color: #5e5e5e;
}

body::before {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	/* 方眼背景 */
	min-height: 418px;
    -webkit-box-shadow: 0 0 13px rgba(4,0,0,.67);
    background-image:
        -webkit-linear-gradient(
            transparent 98%,
            rgba(180, 180, 180, .2) 50%,
            rgba(180, 180, 180, .2)),
        -webkit-linear-gradient(
            0deg, transparent 98%,
            rgba(180, 180, 180, .2) 50%,
            rgba(180, 180, 180, .2)
            );
    background-size: 50px 50px;
    background-repeat: repeat;
}

p {
	line-height: 1.4;
	font-weight: 300;
	letter-spacing: 0.05em;
}

div.body-content {
	margin-bottom: 40px;
}

/* ---------- navbar ---------- */
nav {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}

/*ボーダーグラデーション*/
nav:after {
	content:"";
	height:2px;
	width:100%;
		background:-webkit-gradient(linear, left top, right bottom, from(#1fa2ff), to(#a6ffcb));
		background:-moz-linear-gradient(left, #1fa2ff, #a6ffcb);
		background:linear-gradient(left, #1fa2ff, #a6ffcb);
}

.navbar-header {
    height: 40px;
	margin: 5px 50px;
}

.navbar-header a {
    width: 50px;
    background-image: url(../img/logo_mark_w.png);
	background-size:contain;
    background-repeat: no-repeat;
}

.opr-nav .navbar-toggle {
}
.opr-nav .navbar-toggle .icon-bar {
    background: #fff;
}

.opr-nav .navbar-nav>li>a {
	color: #fff;
}

.opr-nav .navbar-nav>li>a:hover {
	background-color: rgba(0, 0, 0, 0.3);
	transition: background-color 0.2s ease 0s;
}

/*ハンバーガーボタンアニメーション*/
/*
.opr-nav button span {
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #fff;
}

.opr-nav button span:nth-of-type(2) {
 	top: 0;
}
.opr-nav button span:nth-of-type(3) {
 	top: 10px;
}
.opr-nav button span:nth-of-type(4) {
 	bottom: 0;
}
.opr-nav button[aria-expanded="true"] span:nth-of-type(2) {
	-webkit-transform: translateY(20px) rotate(-45deg);
	transform: translateY(20px) rotate(-45deg);
}
.opr-nav button[aria-expanded="true"] span:nth-of-type(3) {
 	opacity: 0;
}
.opr-nav button[aria-expanded="true"] span:nth-of-type(4) {
	-webkit-transform: translateY(-20px) rotate(45deg);
transform: translateY(-20px) rotate(45deg);
}
*/

/* ---------- content_box ---------- */

div.content_box {
	margin: 10px auto;
}

.top-logo {
	width:100%;
	height:90px;
	margin-top: 90px;
	background:url("/img/logo.png") no-repeat;
	background-position:center;
	-webkit-background-size:contain;
}

.playbutton-wrapper button {
    height: 34px;
    padding: 0 10px;
    font-size: 14px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.thumbnails li {
    display: inline-block;
    cursor: pointer;
    border: 5px solid #fff;
}

/* ---------- slider ---------- */
#slider {
}

li.tns-item {
	position: relative;
}

.tns-slider img {
    width: 100%;
	height: auto;
}

.comment_box {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	opacity: 0;
	transition: opacity 0.5s;
}

.comment_box:hover {
	opacity: 1;
	transition: opacity 0.4s;
}

.comment_box span{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
}

.comment_box p{
	margin-top: 54%;
	color: #fff;
}


/* ---------- SNS ---------- */
a.sns  {
	text-decoration: none;
	margin: 0 10px;
}
.sns>.fa-twitter {
	color: #66CCFF;
	transition: color 0.3s ease 0s;
}
.sns>.fa-twitter:hover {
	color: #55acee;
}
.sns>.fa-youtube {
	color: #e52d27;
	transition: color 0.3s ease 0s;
}
.sns>.fa-youtube:hover {
	color: #901010;
}
.sns>.fa-soundcloud {
	color: #ff7700;
	transition: color 0.3s ease 0s;
}
.sns>.fa-soundcloud:hover{
	color: #dd6f00;
}
.sns>.fa-instagram {
	color: #CF2E92;
	transition: color 0.3s ease 0s;
}
.sns>.fa-instagram:hover {
	color: #4C64D3;
}
.sns>.fa-spotify {
	color: #1ED760;
	transition: color 0.3s ease 0s;
}
.sns>.fa-spotify:hover {
	color: #60a000;
}
.sns>.fa-archive {
	color: #238bdc;
	transition: color 0.3s ease 0s;
}
.sns>.fa-archive:hover {
	color: #1070a0;
}
/* --------- Kirahapi --------- */
.kirahapi-box {
    max-width: 42rem;
    margin: 0 auto;
    border: 5px solid #fff;
    border-radius: 10px;
}

.kirahapi-box>a>img {
    width: 100%;
    border-radius: 10px;
}
/* ---------- News ---------- */
.head {
	font-size: 24px;
	font-weight: 200;
    line-height: 1.231;
	letter-spacing: 0.11em;
    margin-bottom: 10px;
    text-align: left;
}

.head:after {
	content:"";
	height:2px;
	width:100%;
	display: block;
		background:-webkit-gradient(linear, left top, right bottom, from(#1fa2ff), to(#a6ffcb));
		background:-moz-linear-gradient(left, #1fa2ff, #a6ffcb);
		background:linear-gradient(left, #1fa2ff, #a6ffcb);
}

.news, .about {
	text-align: left;
}

/* ---------- about ---------- */
.members {
	letter-spacing: 0.1em;
}
.members .head:after {
	margin-bottom: 40px;
}
.member_name {
	margin-top: 16px;
	font-size: 20px;
	font-weight: 200;
    line-height: 1.231;
}
.member_name:after {
	content:"";
	height:1px;
	width:100%;
	margin-bottom: 10px;
	display: block;
}
.fa-nico, .fa-nico::before {
	position: relative;
	height: 40px; 
	width: 37px; 
}
.fa-nico-mini, .fa-nico-mini::before {
	position: relative;
	height: 23px; 
	width: 27px; 
}
.fa-nico::before, .fa-nico-mini::before {
	content:"";
	position: absolute;
	left: 0;
	display:block;
	background: url(/img/icon_nico.png) no-repeat;
	background-size: contain;
	/*Android4*/
	-webkit-background-size : contain;
}
.fa-nico::before {
	top: 7px;
}
.fa-nico-mini::before {
	top: 1px;
}
.jisyo .member_name:after {
	background:-webkit-gradient(linear, left top, right bottom, from(#ec008c), to(#fc6767));
	background:-moz-linear-gradient(left, #ec008c, #fc6767);
	background:linear-gradient(left, #ec008c, #fc6767);
}
.irucaice .member_name:after {
	background:-webkit-gradient(linear, left top, right bottom, from(#6A80ff), to(#86fde8));
	background:-moz-linear-gradient(left, #6A80ff, #86fde8);
	background:linear-gradient(left, #6A80ff, #86fde8);
}
.shuto .member_name:after {
	background:-webkit-gradient(linear, left top, right bottom, from(#12d8fa), to(#ff008c));
	background:-moz-linear-gradient(left, #ec008c, #fc6767);
	background:linear-gradient(left, #ec008c, #fc6767);
}
.member_job {
	margin-bottom: 10px;
}
.sns>.fa-home {
	color: #606c88;
	transition: color 0.3s ease 0s;
}
.sns>.fa-home:hover{
	color: #3f4c6b;
}
.member_icon {
	width: 60%;
	box-shadow: 2px 2px 10px #999;
}
.member_icon_director {
	width: 30%;
	box-shadow: 2px 2px 10px #999;
}
/* ---------- release ---------- */
.discography_box>div {
	margin-bottom: 20px;
}
.discography_box>div>.art_box {
	box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}
.discography_box>div img{
	transition: 0.3s ease-in-out;
}
	
.discography_box>div:hover img{
	transform: scale(1.05);
}

/* ---------- footer ---------- */
footer {
    color: #fff;
    background: #e0e0e0;
    padding: 50px;
}

/* ---------- loading ---------- */
.animationload {
    background-color: #fff;
    height: 100%;
	width: 100%;
    left: 0;
    position: fixed;
    top: 0;
    z-index: 10000;
}
.animationload::before {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	/* 方眼背景 */
	min-height: 418px;
    -webkit-box-shadow: 0 0 13px rgba(4,0,0,.67);
    background-image:
        -webkit-linear-gradient(
            transparent 98%,
            rgba(180, 180, 180, .2) 50%,
            rgba(180, 180, 180, .2)),
        -webkit-linear-gradient(
            0deg, transparent 98%,
            rgba(180, 180, 180, .2) 50%,
            rgba(180, 180, 180, .2)
            );
    background-size: 50px 50px;
    background-repeat: repeat;
}
#loading {
    animation: 1.5s linear 0s normal none infinite running osahanloading;
    background: #fff353 none repeat scroll 0 0;
    border-radius: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    width: 50px;
}
#loading::after {
    animation: 1.5s linear 0s normal none infinite running osahanloading_after;
    border-color: #1fa2ff transparent;
    border-radius: 80px;
    border-style: solid;
    border-width: 10px;
    content: "";
    height: 80px;
    left: -15px;
    position: absolute;
    top: -15px;
    width: 80px;
}
@keyframes osahanloading {
	0% {
		transform: rotate(0deg);
	}
	50% {
		background: #85d6de none repeat scroll 0 0;
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}