/* original Top構造-------------------------------------------------------------- */
.wrap-top{
width: 100%;
overflow: hidden;
margin-bottom:3%;
padding-bottom:3%;
border-bottom: 1px solid #333333;
}


.wrap-online{
margin-bottom:3%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: right;   /* アイテムを右端に集める */
}

.box{
width: calc(33.3% - 10px);
margin: 5px 10px 3% 0px;
border: solid 1px #333;
box-sizing: border-box;
text-decoration: none;
}

.online-img{
box-sizing: border-box;
width:98%;
margin: 1% 1%;
padding:0%;
}

.img-online{
box-sizing: border-box;
width:100%;
}

.online-description{
box-sizing: border-box;
width:98%;
margin: 0 1%;
padding:2% 1% 1% 1%;
}

.box-l{
width: 55%;
margin-right:2%;
float:left;
	}

.box-r{
width: 43%;
padding:0 0 0 0;
overflow: hidden;
float:left;
	}

.press-ttl{
width: 100%;
padding:0 0 0 0.5ex;
text-align: center;
	}

.sns-wrap{
width: 100%;
text-align: center;
}

.sns-ttl{
width: 100%;
text-align: center;
margin-bottom:3%;
padding:0.5ex 0.5ex ;
border: 0.7em solid #efefef;
}

.sns-box{
width: 100%;
text-align: center;
}

.sns-box-contents{
width: 25%;
float:left;
}

.sns-img{
width: 30%;
}

/* original DISC構造-------------------------------------------------------------- */
.wrap{
width: 100%;
overflow: hidden;
margin-bottom:10%;
	}



.ttl-frame{
background-image: url("http://www.sync-bit.com/peoplemagic/wp-content/uploads/2018/05/frame-bg.jpg");
background-repeat: no-repeat;
background-position: right top;
width: 100%;
margin-bottom:3%;
padding:1ex 0.5ex ;
display:table;
	}

.cd-ttl{
width: 80%;
padding:0 0 0 0.5ex;
display:table-cell;
	}

.cd-day{
width: 10%;
padding:0 0 0 0;
text-align: right;
display:table-cell;
	}

.cd-no{
width: 10%;
padding:0 0.5ex 0 0;
text-align: right;
display:table-cell;
	}


.cover-frame{
width: 30%;
margin-right:15%;
float:left;
	}

.cover-img{
width: 100%;
	}

.musicname-frame{
width: 55%;
padding:0 0 0 0;
overflow: hidden;
float:left;
	}

.musicname{
width: 100%;
margin-bottom:5%;
overflow: hidden;
	}


.music-sample{
display: block;
width: 6%;
float:left;
	}

.mix-sample{
width: 100%;
margin-top:3%;
}

.text-none{
visibility:hidden;
width: 6%;
	}

.music-no{
width: 7%;
padding:0 0 0 3px;
float:left;
	}

.music-name{
width: 77%;
float:left;
	}

.music-name-2{
width: 83%;
float:left;
	}

.music-time{
width: 10%;
padding:0 7px 0 0;
text-align: right;
float:left;
	}

.sample-icon{
width: 20px;
margin:0 0 0.2ex 0.5ex;
	}


/* original BIO構造-------------------------------------------------------------- */
.prof-frame{
width: 100%;
margin-bottom:5%;
padding: 1ex;
overflow: hidden;
background-color:#efefef;
	}

.prof-ttl-frame{
width: 100%;
	}


.prof-box-frame{
width: 100%;
margin-top:3%;
overflow: hidden;
}

.prof-box-l{
width: 40%;
margin-right:2%;
float:left;
float:both;
}

.prof-box-r{
width: 58%;
float:left;
}

.prof-box-1{
width: 100%;
}

.prof-box-2{
width: 100%;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
}

.history-box{
width: 100%;
margin-bottom:3%;
padding: 0 1ex 0.5ex 1ex;
border-bottom: 1px solid #333333;
display:table;
}

.history-day{
width: 17%;
display:table-cell;
}

.history-contents{
width: 83%;
display:table-cell;
}

/* original MOVIE構造-------------------------------------------------------------- */

.movie-box{
width: 100%;
height: 90%;
display:table-cell;
background-color:#efefef;
}

/* テキスト-------------------------------------------------------------- */
.text-til{
font-size: 150%; 
font-weight: 600;
letter-spacing: 0.15em;
color: #ffffff;
}

.text-til-b{
font-size: 150%; 
font-weight: 600;
letter-spacing: 0.15em;
color: #333333;
}

.text-til-g{
font-size: 150%; 
font-weight: 600;
letter-spacing: 0.15em;
color: #999999;
}

.text-info{
font-size: 90%; 
color: #999999;
}

.text-nomal{
font-size: 110%; 
color: #333333;
}

.text-prof{
font-size: 100%; 
color: #333333;
line-height: 1;
}

.text-musicttl{
font-size: 120%;
font-weight: bold; 
color: #333333;
line-height: 1;
}

a.mo{
font-size: 110%; 
color: #333333;
}

a.mo:hover{
font-size: 110%; 
color: #888888;
}

.text-bio-ttl{
font-size: 120%; 
font-weight: 600;

color: #333333;
}



@media screen and (max-width: 900px) {
/* 1700pxまでの幅の場合に適応される */

/* original Top構造-------------------------------------------------------------- */
.wrap-top{
width: 100%;
overflow: hidden;
margin-bottom:3%;
padding-bottom:3%;
border-bottom: 1px solid #333333;
	}

.box-l{
width: 100%;
margin-right:0%;
float:left;
clear: both;
	}

.box-r{
width: 100%;
padding:0 0 0 0;
overflow: hidden;
float:left;
clear: both;
	}
	
/* original DISC構造-------------------------------------------------------------- */


.wrap{
width: 100%;

overflow: hidden;
margin-bottom:10%;

	}

.cd-ttl{
width: 100%;
padding:0 0 0 0.5ex;
display:block;
	}

.cd-day{
width:25%;
padding:0 0 0 0.5ex;
text-align: left;
display:block;
float:left;
	}

.cd-no{
width: 50%;
padding:0 0.5ex 0 0;
text-align: left;
display:block;
float:left;
	}

.cover-frame{
width: 100%;
margin-right:0%;
margin-bottom:3%;
	}

.cover-img{
width: 50%;
	}

.musicname-frame{
width: 100%;
padding:0 0 0 0;
overflow: hidden;
clear: both;
	}

.music-sample{
display: block;
width: 8%;
float:left;
	}

.text-none{
visibility:hidden;
width: 8%;
	}

.music-no{
width: 9%;
padding:0 0 0 3px;
float:left;
	}

.music-name{
width: 68%;
float:left;
	}

.music-name-2{
width: 76%;
float:left;
	}

.music-time{
width: 15%;
padding:0 7px 0 0;
text-align: right;
float:left;
	}

.box{
width: 100%;
margin: 0px 0% 3% 0%;
border: solid 1px #333;
box-sizing: border-box;
	}

/* テキスト-------------------------------------------------------------- */
.text-til{
font-size: 130%; 
font-weight: 600;
letter-spacing: 0.15em;
color: #ffffff;
}



}