@charset "utf-8";

/* ===================================================================
css information

File Name  : layout.css
Author     : 
Style Info : 
=================================================================== */

/****************************************************************************

/bgm/index.php

****************************************************************************/

.bgm .acdSpCont.pcCont { max-height:none !important; }

.bgm .parts_section_01 h2 small { font-weight:bold; font-size:16px; }
.bgm .parts_wrap_04 dt,
.bgm .parts_wrap_04 dd { font-size:14px; line-height:160%; }
.bgm .parts_wrap_04 dt { font-weight:bold; float:left; width:90px; clear:both; }
.bgm .parts_wrap_04 dd { float:right; width:100%; margin:0 0 0 -90px; padding:0 0 0 90px; }

.bgm .jp-audio { padding:12px 25px 14px 25px; border:#b9b9b9 1px solid; overflow:hidden;
/**background:URL(../img/playerBg.jpg) repeat-x center -2px;**/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

}
.bgm .jp-audio .jp-title { color:#333; font-size:15px; line-height:160%; padding:0 0 8px 0; font-weight:bold;
/**text-shadow: 0px 1px 0px rgba(255, 255, 255, 1),0px -1px 1px rgba(255, 255, 255, 1);**/
}
/**.bgm .audioPlayList { width:100%; }
.bgm .audioPlayList ul { width:50%; border-bottom:#9da1a7 1px solid; border-left:#9da1a7 1px solid; border-right:#9da1a7 1px solid; }
.bgm .audioPlayList ul.wide { width:100%; }
.bgm .audioPlayList ul.Lcol { float:left; }
.bgm .audioPlayList ul.Rcol { float:right; border-left:none; }
.bgm .audioPlayList li { border-top:#9da1a7 1px solid; font-size:14px; line-height:160%; position:relative; background:#42444f; }
.bgm .audioPlayList li a { display:block; padding:8px 15px; text-decoration:none; color:#eee; background:#42444f;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease; 
}
.bgm .audioPlayList li a:hover,
.bgm .audioPlayList li a.current { color:#E7C300; background:#25232e; }

.bgm .audioPlayList li div { padding:8px 15px; color:#eee; }
.bgm .audioPlayList li.newTrack:after { content:'NEW'; width:60px; height:22px; line-height:22px; text-align:center; background:URL(../../img/cmn/newIcon_bg.png) no-repeat center center; overflow:hidden; vertical-align:middle; font-size:11px !important; font-weight:normal !important; letter-spacing:0.1em; position:absolute; top:50%; right:10px; margin:-11px 0 0 0;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6); color:#FFF; }**/

.bgm .audioPlayList { text-align:left; padding:0; border:1px solid #202022; border-radius:.4em; }
.bgm .audioPlayList ul { padding:0; border:1px solid #020404!important; border-radius:.3em; }
.bgm .audioPlayList ul:nth-child(2) { border-top:none!important; margin-top:-1px; }
.bgm .audioPlayList ul li { border:1px solid #000; background-color:rgba(255,255,255,.1); color:#B1B1B1; position:relative;}
.bgm .audioPlayList ul li:nth-child(1) { border-top-left-radius:.2em;border-top-right-radius:.2em; }
.bgm .audioPlayList ul li:nth-child(1) a { border-top-left-radius:.1em;border-top-right-radius:.1em; }
.bgm .audioPlayList ul li:nth-last-child(1) { border-bottom-left-radius:.2em;border-bottom-right-radius:.2em; }
.bgm .audioPlayList ul li:nth-last-child(1) a {border-bottom-left-radius:.1em;border-bottom-right-radius:.1em; }
.bgm .audioPlayList ul a { display:block; text-decoration:none; color:#FFF;
	background: -moz-linear-gradient(top, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.16) 51%, rgba(255,255,255,0.16) 71%, rgba(255,255,255,0.16) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.22) 50%,rgba(255,255,255,0.16) 51%,rgba(255,255,255,0.16) 71%,rgba(255,255,255,0.16) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.22) 50%,rgba(255,255,255,0.16) 51%,rgba(255,255,255,0.16) 71%,rgba(255,255,255,0.16) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38ffffff', endColorstr='#29ffffff',GradientType=0 );
}


/**@media screen and (max-width:700px) {**/
.bgm .acdSpCont { max-height:0; overflow:hidden; }
.bgm .contBox01 { padding:0 10px; }

.bgm .parts_column_02 { padding-bottom:15px; }

.bgm .parts_inner_01 {  padding-bottom:15px; }

.bgm .gp_slick_prev,
.bgm .gp_slick_next { top:0; margin:30% 0 0 0; }
.bgm .gp_slick_prev { left:10px; }
.bgm .gp_slick_next { right:10px; }

.bgm .parts_wrap_04 dt,
.bgm .parts_wrap_04 dd { font-size:13px; }
.bgm .parts_wrap_04 dt { float:none; width:100%; }
.bgm .parts_wrap_04 dd { float:none; width:100%; margin:0; padding:0; }

.bgm .parts_bg_01 { padding-top:0; padding-bottom:0; background:none !important; margin:0; }
.bgm .parts_bg_01:before,
.bgm .parts_bg_01:after { display:none; }
.bgm .parts_bg_01.firstCont { padding-top:5px; }

.bgm .parts_section_01.acdSpBtn { margin:10px 0 0 0; }
.bgm .parts_section_01 { padding:0 10px; overflow:hidden; position:relative; }
.bgm .parts_section_01 h2 { display:table; width:100%; font-size:16px; color:#fff; font-weight:bold; background-color:rgba(0,0,0,.8); text-align:center; position:relative; cursor:pointer; padding:0 40px 0 10px; text-align:left; 
background: -moz-linear-gradient(top, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.16) 51%, rgba(255,255,255,0.16) 71%, rgba(255,255,255,0.16) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.22) 50%,rgba(255,255,255,0.16) 51%,rgba(255,255,255,0.16) 71%,rgba(255,255,255,0.16) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.22) 50%,rgba(255,255,255,0.16) 51%,rgba(255,255,255,0.16) 71%,rgba(255,255,255,0.16) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38ffffff', endColorstr='#29ffffff',GradientType=0 );
    
}



.bgm .parts_section_01 h2 span { display:table-cell; line-height:140%; vertical-align:middle; height:60px; }
.bgm .parts_section_01 h2 small { display:none; }
.bgm .parts_section_01 h2:after {/** display:none;**/ }
.bgm .parts_section_01:after { content:''; width:16px; height:16px; position:absolute; right:25px; top:50%; margin:-8px 0 0 0; background:URL(../../img/cmn/navIcon_off.png) no-repeat center center; background-size:160% 160%; z-index:2; }
.bgm .parts_section_01.active:after { background: url(../../img/cmn/navIcon_on.png) no-repeat center center; background-size:160% 160%; }

.bgm .jp-audio { padding:8px 10px 8px 10px; border:#202023 1px solid; overflow:hidden; position:relative;
/**background:URL(../img/playerBg.jpg) repeat-x center -10px;**/
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#434550+0,2b2c33+74,2b2c33+74,19191e+75,19191e+100 */
background: #434550; /* Old browsers */
background: -moz-linear-gradient(top,  #434550 0%, #2b2c33 74%, #2b2c33 74%, #19191e 75%, #19191e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #434550 0%,#2b2c33 74%,#2b2c33 74%,#19191e 75%,#19191e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #434550 0%,#2b2c33 74%,#2b2c33 74%,#19191e 75%,#19191e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434550', endColorstr='#19191e',GradientType=0 ); /* IE6-9 */

}
.bgm .jp-audio:before { width:100%; height:100%; border-radius:.3em; position:absolute; top:0; left:0; border:1px solid #06090A; content:""; display:block; box-sizing:border-box; }
.bgm .jp-audio:after { width:calc(100% - 2px ); height:calc(100% - 2px ); border-radius:.2em; position:absolute; top:1px; left:1px; border:1px solid #222327; border-bottom:1px solid #2D3035; border-top:1px solid #60626A; content:""; display:block; box-sizing:border-box; }
.bgm .jp-audio .jp-title { color:#fff; font-size:13px; line-height:160%; padding:0 0 6px 0; font-weight:bold;
/**text-shadow: 0px 1px 0px rgba(255, 255, 255, 1),0px -1px 1px rgba(255, 255, 255, 1);**/ }


.bgm .audioPlayList li a { padding:10px 10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease; 
}

.bgm .audioPlayList li a.current { background:#FE00EE!important; color:#333!important; }
.bgm .audioPlayList li div { padding:10px 10px; }
.bgm .audioPlayList li.newTrack:after {   font-size:10px !important; right:7px; content:"NEW"; display:inline-block; position:absolute; top:50%; color:#FFF!important; background-color:#D10E11; line-height:1; padding:.2em .5em; border-radius:.2em; 
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
 }
 .bgm .audioPlayList li a:after { content:'　♪'; color:#FF9B00; }
  .bgm .audioPlayList li a.current:after { color:#333; }
  .bgm .parts_wrap_04 dt,.bgm .parts_wrap_04 dd { color:#ddd; }
/**}**/

.comment { margin-top:15px;
	background-color: rgba(63,84,90,0.7);
	border-radius: .4em;
	overflow: hidden;
    box-sizing: border-box;
	max-width: 540px;
	border: 0px solid #020404;
	padding: 20px;
	 }
.comment figure { display:block; width:30%; float:left; }
.comment figure img { width:100%; height:auto; }
.comment .commentInner {margin-left: -webkit-calc( 30% + 15px ); margin-left: calc( 30% + 15px ); }
.comment .commentInner strong { color:#FFF; font-size:120%; margin-bottom:10px; font-weight:bold; }



