/*
 ────────────────────────
       Copyright(C) CMT LLC. All Rights Reserved.
 ────────────────────────
*/
/* ----- body ----- */
html,body{
	width            :100%;
	height           :100%;
	margin           :0px;
	padding          :0px;
	font-family      :"メイリオ","Meiryo","游ゴシック Medium","Yu Gothic Medium","游ゴシック体",sans-serif;
	font-size        :12pt;
	color            :#ddd;
	background       :#222;
	user-select      :none;
	touch-action     :manipulation;

	scrollbar-color  :#333 #222;
	scrollbar-width  :thin;
}
/* ----------------- */

div.main{
	padding          :10px;
}

.pv1{
	position         :absolute;
	margin           :-6px 0px 0px 1px;
	height           :42px;
	cursor           :pointer;
	opacity          :0.3;
}

.pv1:hover{
	opacity          :1;
}

/* ----------------- */
div.comment_view_header{
	padding          :2px 5px 0px 8px;
	color            :#fff;
	background       :#666;
	border-radius    :4px 4px 0px 0px;
}

div.comment_view{
	padding          :0px;
	background       :#333;
	border-radius    :4px;
}

/* ----- A LINK ----- */
a:link{
	color            :#6af;
	text-decoration  :none;
}

a:active{
	color            :#6af;
	text-decoration  :none;
}

a:visited{
	color            :#6af;
	text-decoration  :none;
}

a:hover{
	color            :#fff;
	background       :#08f;
	border-radius    :3px;
}

a:hover img{
	opacity          :0.5;
}

/* ----------------- */
.xicon{
	width            :30px;
	margin           :20px 0px 0px 7px;
	cursor           :pointer;
}

.xicon:hover{
	opacity          :0.5;
}

/* ----------------- */
.wav{
	margin           :2px auto;
	padding          :2px 0px 3px 9px;
	background       :#000;
	border-radius    :4px;
	cursor           :pointer;
}

.wav:hover{
	color            :#fff;
	background       :linear-gradient(#080,#0b0);
}

.play-button{
	position        :absolute;
	top             :calc(50% - 160px);
	left            :calc(50% - 110px);
	width           :220px;
	height          :220px;
	border-radius   :100%;
	color           :#fff;
	background      :#555;
	cursor          :pointer;
}

.play-button:hover{
	background      :#0b0;
}

.play{
	border-top      :30px solid transparent;
	border-bottom   :30px solid transparent;
	border-left     :60px solid #ddd;
	margin          :80px 0px 0px 90px;
}

.pause{
	width           :18px;
	height          :58px;
	border          :none;
	border-left     :18px solid #ddd;
	border-right    :18px solid #ddd;
	margin          :80px 0px 0px 84px;
}

#tempo{
	margin          :9px 0px 0px 0px;
	text-align      :center;
	font-size       :70px;
	line-height     :70px;
	color           :#fff;
}

.tempo-controls{
	display         :flex;
	align-items     :center;
	justify-content :center;
}

.button{
	text-align      :center;
	font-size       :24px;
	line-height     :70px;
	border          :none;
	border-radius   :100%;
	width           :70px;
	height          :70px;
	margin          :0px 7px 0px 7px;
	background      :#555;
	color           :#fff;
	cursor          :pointer;
}

.button:hover{
	background       :#0c0;
}

input[type="range"]{
	-webkit-appearance:none;                        /* デフォルトのスタイルを解除 */
	appearance        :none;                        /* デフォルトCSSを打ち消す */
	cursor            :pointer;                     /* カーソル形状 */
	outline           :none;                        /* スライダーのアウトラインを消す */
	height            :24px;                        /* バーの高さ */
	width             :calc(100% - 30px);           /* バーの幅 */
	background        :linear-gradient(#444,#888);  /* バーの背景色 */
	border-radius     :12px;                        /* バーの両端の丸み */
}
/* WebKit向けのつまみ */
input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance: none;                       /* デフォルトのスタイルを解除 */
	background        : linear-gradient(135deg,#0c0,#080);
	width             : 40px;
	height            : 40px;
	border-radius     : 100%;
	box-shadow        : 0px 3px 6px 0px rgba(0,0,0, 0.5);
	border            : none;
}
/* Moz向けのつまみ */
input[type="range"]::-moz-range-thumb {
	background        : #0b0;
	width             : 40px;
	height            : 40px;
	border-radius     : 100%;
	box-shadow        : 0px 3px 6px 0px rgba(0,0,0, 0.3);
	border            : none; /* デフォルトの線を消す */
}
/* Firefoxで点線が周りに表示されてしまう */
input[type="range"]::-moz-focus-outer {
	border:0;
}
/* つまみドラッグ中のスタイル */
input[type="range"]:active::-webkit-slider-thumb {
	box-shadow: 0px 0px 3px rgba(0,0,0, 0.1);
}