/*配色メモ
濃い青　#3b3a63
薄い青　#4f4e77
背景　#f2f1f8
*/

/*リンクの色設定*/
a:link { color: #4C2600; }
a:visited { color: #4C2600; }
a:hover { color: #434282; }
a:active { color: #4C2600; }

.cont_onsei a:link { color: #4C2600; }
.cont_onsei a:visited { color: #CCC; }
.cont_onsei a:hover { color: #434282; }
.cont_onsei a:active { color: #4C2600; }

strong{
	font-weight: bold;
}

h1{
	font-size: 125%;
	color: #3b3a63;
	border-left:0.25em #3b3a63 solid;
	padding-left: 0.5em;
	margin-bottom: 1em;
}

h2{
	font-size: 110%;
	color: #3b3a63;
	margin-top:1em;
	border-bottom: 2px solid #3b3a63;
	display: inline-block;
	width: auto;
	padding: 0 0.5em;
}

hr{
	margin: 3em 0 3em 0;
	height: 1px;
	background-color: #4f4e77;
	border: none;
}

summary{
	font-size: 0.8em;
	margin-left: 1.5em;
	margin-bottom: 1em;
	cursor: pointer;
}
.summary:hover{
	border-bottom: 1px solid #999;
}

nav ul li a:link {
color: #FFF;
text-decoration: none;
}
nav ul li a:visited {
	color: #FFF;
}
nav ul li a:hover {
	color:#FFF;
	border-bottom: solid 1px #ddd9dd;
	padding-bottom: 0.25em;
}
nav ul li a:active {
	color:#FFF;
}
/*リンクの色設定　ここまで*/

p {
	margin-top: 0;
	margin-left: 1em;
	margin-bottom: 1em;
}
ul{
	margin-top: 0px;
}
body {
	font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	color: #333;
	background-color: #f2f1f8;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	margin: 0 auto;
	caret-color: transparent;
}
img {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	 -moz-user-select: none;
		-ms-user-select: none;
				user-select: none;
}
.top_image{
	max-width: 1000px;
	min-width: 700px;
	width: 100%;
	display: block;
	margin: auto;
}
nav{
	max-width: 1000px;
	min-width: 700px;
	margin:auto;
	background-color:#3b3a63;
	font-size: 125%;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	 -moz-user-select: none;
		-ms-user-select: none;
				user-select: none;
}
nav ul{
	display: flex;
	justify-content: center;
	text-align: center;
	margin: 0;
	padding: 0;
}
nav ul li{
	list-style: none;
	margin:1em;
}
.navCurrentUrl{
	border-bottom: solid 3px #ddd9dd;
}
.cont{
	background-color: #FFF;
	max-width: 1000px;
	min-width: 700px;
	margin:0 auto;
	padding:1em;
	box-sizing: border-box;
	overflow: hidden;
}
/* clearfix */
.cont:before,
.cont:after {
    content: "";
    display: table;
}
.cont:after {
    clear: both;
}
.style1{
	background-color: #fff;
	display: inline-block;
	width: 7em;
	text-align: center;
}
.info{
	background-color:#FFF;
	width:auto;
	box-sizing:border-box;
	padding-top: 2em;
	padding-left: 3em;
	padding-right: 3em;
	padding-bottom: 2em;
	margin-bottom: 1em;
}
.sort_cont1{
	height: 3em;
	display: flex;
  align-items: center;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	 -moz-user-select: none;
		-ms-user-select: none;
				user-select: none;
}
.sort_cont1	a:link { color: #333; text-decoration: none;}
.sort_cont1	a:visited { color: #333; }
.sort_cont1	a:hover { color: #333; }
.sort_cont1	a:active { color: #333; }
.sort_cont2{
	text-align: center;
	font-size: 90%;
	padding: 0 0.25em;
	margin: 1em;
	margin: 0 auto;
	border: 1px solid #FFF;
}
.sort_cont2:hover {
	border-bottom: 1px solid #999;
}
.sort table{
	border-collapse:collapse;
	border:1px #999 solid;
}
.sort th{
	padding: 0.5em;
	background-color: #ccccb8;
	border-left:1px #999 solid;
	border-right:1px #999 solid;
}
.sort td{
	padding:0.5em;
	border-left:1px #999 solid;
	border-right:1px #999 solid;
}
.sort_button{
	width:100%;
	cursor: pointer;
	background-color: #EEE;
	border: 1px #999 solid;
	color: #333;
}
.sort_button:hover{
	background-color: #ccccb8;
	border-color: #AAA;
	color: #333;
}
.sort_top table{
	border-collapse:collapse;
	border:1px #CCC solid;
	width:300px;
	float: right;
}
.sort_top th{
	padding: 0.5em;
	background-color: #333;
	border-left:1px #CCC solid;
	border-right:1px #CCC solid;
	color:#FFF;
}
.sort_top td{
	padding:0.5em;
	border-left:1px #CCC solid;
	border-right:1px #CCC solid;
	background-color:#FFFFFF;
}
.musiclist table {
	border-collapse:collapse;
	border: 0px;
	width: 100%;
}
.musiclist th {
 height: 0;
}
.th1 {
}
.th2 {
	width: 64px;
}
.th3 {
	width: 6em;
	text-align: left;
}
.th4 {
}
.th5 {
	width: 1em;
	text-align: right;
}
.th6 {
	width: 3em;
	text-align: center;
}
.musiclist td {
	border-width: 1px 0px;
	border-color: #EEE;
	border-style: solid;
	padding: 0.5em;
}
.download {
	background-color: #fff;
	padding:0.25em;
	margin:1px;
	color: #666666;
	display: inline-block;
	text-align: center;
	border: 1px #fff solid;
	width: 3em;
	user-drag: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	 -moz-user-select: none;
		-ms-user-select: none;
				user-select: none;
}
.download:hover {
	text-decoration: underline;
}
.new{
	color:#F00;
	font-weight:bold;
	font-size: 75%;
	margin: 1px;
}
.bgm_tag{
	color: #666666;
	background-color: #eee;
	font-weight:bold;
	font-size: 75%;
	margin: 1px;
	display: inline-block;
	text-align: center;
	border: 1px #666666 solid;
	width: 6em;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	 -moz-user-select: none;
		-ms-user-select: none;
				user-select: none;
}
.bgm_tag:hover {
	color: #eee;
	background-color: #999999;
	border: 1px #999999 solid;
}

.loop_tag{
	color: #669966;
	background-color: #eeffee;
	font-weight:bold;
	font-size: 75%;
	margin: 1px;
	display: inline-block;
	text-align: center;
	border: 1px #669966 solid;
	width: 6em;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	 -moz-user-select: none;
		-ms-user-select: none;
				user-select: none;
}
.sort_cate{
	color:#333;
	display:inline-block;
	font-size:small;
}
.order_cont{
	width:100%;
}
.order1{
	float:left;
	padding-right:1em;
}
.order1_box{
	background-color:#EEE;
	padding:1em;
}
.order2{
	float:right;
	padding-left:1em;
}
.order2_box{
	background-color:#DDD;
	padding:1em;
}
.clear {
    clear: both;
}
.demo{
	background-color:#333333;
	padding:1em;
	text-align:center;
	color:#FFFFFF;
}
.bold{
font-weight:bold;
}
.bgm_bana{
	margin-left: 1em;
	border: 10px double #333;
	box-sizing:border-box;
}
.album_title{
	font-weight:bold;
	color: #C00;
	font-size: 150%;
}
.redzone{
background-color: #ffffcc;
font-weight: bold;
}
.profile{
	background-color: #3b3a63;
	display: flex;
	justify-content: space-between;
	max-width: 1000px;
	min-width: 700px;
	margin:auto;
}
.profile_left{
	display: flex;
	margin: 1em;
}
.profile_txt{
	color: #FFF;
	margin-left: 1em;
	margin-top: auto;
	margin-bottom: auto;
}
.profile_right{
		display: flex;
		margin: 1em;
}
.profile_icon{
	margin: auto;
	margin-left: 0.5em;
	margin-right: 0.5em;
}
.icon_trim{
	border-radius: 50%;
}
.profile_icon a:hover{
  transform: translateY(2px);
	display:inline-block
}
.indexSamp {
	display: flex;
	flex-wrap: nowrap;
	height: 31px;
  line-height: 31px;
}
.indexSamp a{
	text-decoration: none;
	color: #434282;
	margin-left: auto;
}
.indexSampItem1{
	font-size: 125%;
	font-weight: bold;
	white-space:nowrap;
}
.indexSampItem1 span{
	font-size: 80%;
	font-weight: normal;
	margin-left: 1em;
	white-space:nowrap;
}
.indexSampItem2{
	font-size: 0.8em;
	font-weight: bold;
	padding-left: 0.5em;
	padding-right: 0.5em;
	border: 1px solid #434282;
	border-radius: 10px;
	box-sizing: border-box;
	white-space:nowrap;
}
.indexSampItem2:hover{
	color: #4f4e77;
	background-color: #f2f1f8;
	border: 1px solid #4f4e77;
	text-decoration: underline;
}
.indexSampCont {
  width: 100%;
  aspect-ratio: 16 / 9;
	margin: 0.5em 0em 0em 0em;
}
.indexSampCont iframe {
  width: 100%;
  height: 100%;
	margin-bottom: 3em;
}
.indexSampCont2 {
  width: 100%;
	margin: 0.5em 0em 0em 0em;
}
.indexSampCont2 iframe {
	margin-bottom: 3em;
}
.indexLink{
	display: inline-block;
	font-weight: bold;
	border: 1px solid #434282;
	padding: 0.5em;
	border-radius: 10px;
	box-sizing: border-box;
	text-decoration: none;
}
.indexLink:hover{
	color: #4f4e77;
	background-color: #f2f1f8;
	border: 1px solid #4f4e77;
	text-decoration: underline;
}
.indexLinkBlock{
	margin-left: 1em;
}
.indexLinkBlock a{
	color: #434282;
}
.inuseList{
	margin-bottom: 2em;
}
.inuseList li{
	margin: 0.5em;
}
.worksOprion{
	font-size: 80%;
}