/* CSS Document */

/************************************************************************************/
/** プレビュー */
body {
	min-height: 100%;
	margin: 0;
	padding: 0;
	overflow: auto;
	position: relative;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	/*font-family: HelvXNeueLTStd,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;*/
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

.color-picker {
	border: 2px solid white;
	width: 24px;
	height: 24px;
	display: inline-block;
	cursor: pointer;
}

	.color-picker:hover {
		border: 2px solid var(--color-header-border-color);
	}

.color-picker-frame {
	position: absolute;
	width: 216px;
	height: 78px;
	background-color: white;
	border: 1px solid #cccccc;
	box-shadow: #666666 2px 2px 0px;
}

#vss_preview {
	position: absolute;
	top: 69px;
	border: 1px solid var(--color-header-border-color);
	/*z-index: -1;*/
}

#vss_preview_header {
	position: fixed;
	top: 0px;
}

#vss_preview_footer {
	position: fixed;
	bottom: 0px;
}

body > #wrapper {
	/*height: auto;*/
	/*overflow: auto;
    position: fixed;*/
	/*width: 100%;*/
	height: 100%;
	min-height: 100%;
	padding: 0 10px;
	min-width: 940px;
}

.ui-progressbar {
	position: relative;
}

#progressbar {
	border: none;
	padding: 0;
	position: relative;
}

.progressbar {
	border: none;
	padding: 0;
	position: relative;
}

.progress-label {
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	font-weight: bold;
	width: 100%;
	margin-top: 0.2em;
	color: #fff;
	text-shadow: 2px 2px #666666;
}

/** タイトルバー */
.vss_titlebar {
	z-index: 2;
	height: 70px;
	/*width:100%;
	position:fixed;
	top:0px;
	left:0px;*/
	min-height: 70px;
}

.vss_titlebar_left {
	background-color: var(--color-header-background);
	background-size: 40px 70px;
	-webkit-background-size: 40px 70px;
	height: 70px;
	width: 40px;
	min-width: 40px;
	min-height: 70px;
}

.vss_titlebar_mid {
	background-size: 100% 70px;
	-webkit-background-size: 100% 70px;
	background-color: var(--color-header-background);
	height: 70px;
	min-height: 70px;
}

.vss_titlebar_right {
	background-color: var(--color-header-background);
	background-size: 40px 70px;
	-webkit-background-size: 40px 70px;
	height: 70px;
	width: 40px;
	min-width: 40px;
	min-height: 70px;
}

/** テキスト */

#vss_title_maxpage {
	color: #fff;
}

#vss_title_page {
	color: #fff;
}

#vss_page_sep {
	color: #fff;
}

.vss_title_text {
	text-align: center;
	color: var(--color-header-color);
	font-weight: bold;
	font-size: 22px;
	max-height: 46px;
	overflow: hidden;
	max-width: 10px;
}

.vss_list_title_text {
	text-align: center;
	color: #666666;
	font-weight: bold;
	font-size: 18px;
	padding-right: 40px;
}

.vss_folder_text {
	text-align: center;
	color: #666666;
	font-size: 18px;
	padding-right: 40px;
	padding-top: 3px;
}

.recmode_label {
	font-size: 17px;
	color: #666666;
	font-weight: bold;
}

.player_label {
	font-size: 17px;
	color: var(--color-header-color);
	font-weight: bold;
}

.player_label_hide {
	font-size: 17px;
	color: #666666;
	font-weight: bold;
	opacity: 0;
}

.control_label {
	font-size: 17px;
	color: #666666;
}

.speed_label {
	font-size: 17px;
	color: #666666;
	font-weight: bold;
}

.control_seek_label {
	font-size: 10px;
	color: #666666;
}

.control_seek_side_label {
	font-size: 10px;
	color: #666666;
	font-weight: bold;
	padding-right: 5px;
	text-align: right;
	width: 35px;
}

.control_seek_side_label_hide {
	font-size: 12px;
	color: #666666;
	font-weight: bold;
	opacity: 0;
}

/** コントロールパネル */
.vss_toolbar {
	z-index: 0;
	position: absolute;
	bottom: 0px;
	left: 0px;
	min-width: 960px;
	width: 100%;
	margin-bottom: 0.5em;
}

.vss_toolbar_left {
	background-color: var(--color-header-background);
	/*background-size:40px 70px;
	-webkit-background-size: 40px 70px;
	height:70px;*/
	width: 40px;
	min-width: 40px;
	/*min-height:70px;*/
	border-radius: 100px 0 0 100px;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
	border-right: 1px solid var(--color-header-border-color);
}

.vss_toolbar_mid {
	/*background-size:100% 70px;
	-webkit-background-size: 100% 70px;*/
	background-color: var(--color-header-background);
	/*height:70px;
	min-height:70px;*/
	text-align: center;
	margin: auto;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
	padding: 5px 0;
}

.vss_toolbar_right {
	background-color: var(--color-header-background);
	/*background-size:40px 70px;
	-webkit-background-size: 40px 70px;
	height:70px;*/
	width: 40px;
	min-width: 40px;
	/*min-height:70px;*/
	border-radius: 0 100px 100px 0;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
}

.vss_toolbar2 {
	z-index: 0;
	position: fixed;
	bottom: 0px;
	left: 0px;
	min-width: 960px;
	width: 100%;
	margin-bottom: 0.5em;
}

.vss_toolbar_left2 {
	background-color: var(--color-header-background);
	width: 30px;
	min-width: 30px;
	border-radius: 100px 0 0 100px;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
	border-right: 1px solid var(--color-header-border-color);
}

.vss_toolbar_mid2 {
	background-color: var(--color-header-background);
	text-align: center;
	margin: auto;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
	padding: 5px 0;
}

.vss_toolbar_right2 {
	background-color: var(--color-header-background);
	width: 30px;
	min-width: 30px;
	border-radius: 0 100px 100px 0;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
}

/** ボタン定義 */

/** 戻るボタン */
.ui_back_disable {
	-webkit-background-size: 100% 100%;
	background: none;
	background-size: 100% 100%;
	display: block;
	width: 106px;
	height: 32px;
	cursor: default;
}

.ui_back {
	background: url(/content/img/common-back_roll.svg) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 106px;
	height: 32px;
	position: absolute;
	top: 18px;
	left: 10px;
}

	.ui_back a {
		background: url(/content/img/common-back.svg) no-repeat;
		background-color: var(--color-button-header-back-background);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		border: none;
		display: block;
		width: 106px;
		height: 32px;
		cursor: pointer;
		top: 0;
		left: 0;
	}

.ui_back_s {
	background: url(/Content/img/common-back-roll-s.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 37px;
	height: 32px;
	position: absolute;
	top: 28px;
	left: 0px;
}

	.ui_back_s a {
		background: url(/Content/img/common-back-s.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		border: none;
		display: block;
		width: 37px;
		height: 32px;
		cursor: pointer;
		top: 0;
		left: 0;
	}

.ui_back2_s {
	background: url(/Content/img/common-back-roll-s.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 37px;
	height: 32px;
	position: absolute;
	top: 28px;
	left: 0px;
}

	.ui_back2_s a {
		background: url(/Content/img/common-back-s.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		border: none;
		display: block;
		width: 37px;
		height: 32px;
		cursor: pointer;
		top: 0;
		left: 0;
	}

/** 再生ボタン */
.play-pause-frame {
	width: 60px;
	min-width: 60px;
	position: relative;
}

.play-back-frame {
	position: absolute;
	left: 0;
	margin-left: -50px;
	bottom: -15px;
	width: 100px;
	height: 70px;
	background-color: #fff;
	border-radius: 100px;
}

.ui_play_frame {
	min-width: 60px;
	max-width: 120px;
}

.ui_play_disable {
	background-image: url(/content/img/play-play.png);
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	display: block;
	width: 70px;
	height: 70px;
	cursor: pointer;
	position: absolute;
	left: 0;
	margin-left: -35px;
	bottom: -13px;
}

.ui_play {
	background: url(/content/img/play-play-roll.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 70px;
	height: 70px;
	position: absolute;
	left: 0;
	margin-left: -35px;
	bottom: -13px;
}

	.ui_play a {
		background: url(/content/img/play-play.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		display: block;
		width: 70px;
		height: 70px;
		cursor: pointer;
		left: 0;
		top: 0;
		margin: 0;
	}
/** 一時停止ボタン */
.ui_pause_disable {
	-webkit-background-size: 100% 100%;
	background-image: url(/content/img/play-pause.png);
	background-size: 100% 100%;
	display: block;
	width: 70px;
	height: 70px;
	cursor: pointer;
	position: absolute;
	left: 0;
	margin-left: -35px;
	bottom: -13px;
}

.ui_pause {
	background: url(/content/img/play-pause-roll.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 70px;
	height: 70px;
	position: absolute;
	left: 0;
	margin-left: -35px;
	bottom: -13px;
}

	.ui_pause a {
		background: url(/content/img/play-pause.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		display: block;
		width: 70px;
		height: 70px;
		cursor: pointer;
		left: 0;
		top: 0;
		margin-left: 0;
	}
/** 停止ボタン */
.ui_stop_frame {
	min-width: 72px;
	max-width: 72px;
	border-right: 1px solid #aaa;
}

.ui_stop_disable {
	-webkit-background-size: 100% 100%;
	background-image: url(/content/img/play-stop.png);
	background-size: 100% 100%;
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;
	margin: 0 auto;
}

.ui_stop {
	background: url(/content/img/play-stop-roll.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;
	margin: 0 auto;
}

	.ui_stop a {
		background: url(/content/img/play-stop.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		display: block;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin: 0;
	}

.ui_rec_stop_disable {
	-webkit-background-size: 100% 100%;
	background-image: url(/content/img/play-stop.png);
	background-size: 100% 100%;
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;
	margin: 0 auto;
}

.ui_rec_stop {
	background: url(/content/img/play-stop-roll.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;
	margin: 0 auto;
}

	.ui_rec_stop a {
		background: url(/content/img/play-stop.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		display: block;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin: 0;
	}
/** 設定ボタン */
.ui_setting_frame {
	min-width: 110px;
	max-width: 122px;
}

.ui_setting {
	background: url(/content/img/play-setting_roll.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}

	.ui_setting a {
		background: url(/content/img/play-setting.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		display: block;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin: 0;
	}

.ui-dialog .ui-dialog-buttonpane {
	padding: 0;
	margin-top: -5px;
}
/** 訳文ボタン */
.ui_translate_frame {
	min-width: 110px;
	max-width: 122px;
	text-align: center;
	border-right: 1px solid #aaa;
}

.ui_translate {
	background: url(/content/img/play-trans-roll.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}

	.ui_translate a {
		background: url(/content/img/play-trans.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		display: block;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin: 0;
	}

.ui_translate_disable {
	-webkit-background-size: 100% 100%;
	background-image: url(/content/img/play-trans-gray.png);
	background-size: 100% 100%;
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}
/** 前ページボタン */
.ui_prev_disable {
	-webkit-background-size: 100% 100%;
	background-image: url(/content/img/play-page-prev-gray.png);
	background-size: 100% 100%;
	display: block;
	width: 27px;
	height: 27px;
	background-color: #666666;
}

.ui_prev {
	background: url(/content/img/play-page-prev-roll.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 27px;
	height: 27px;
	background-color: #666666;
}

	.ui_prev a {
		background: url(/content/img/play-page-prev.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		display: block;
		width: 27px;
		height: 27px;
		cursor: pointer;
		background-color: #666666;
	}
/** 次ページボタン */
.ui_next_disable {
	-webkit-background-size: 100% 100%;
	background-image: url(/content/img/play-page-next-gray.png);
	background-size: 100% 100%;
	display: block;
	width: 27px;
	height: 27px;
	background-color: #666666;
}

.ui_next {
	background: url(/content/img/play-page-next-roll.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 27px;
	height: 27px;
	background-color: #666666;
}

	.ui_next a {
		background: url(/content/img/play-page-next.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		display: block;
		width: 27px;
		height: 27px;
		cursor: pointer;
		background-color: #666666;
	}
/** ページ表示 */
.ui_page {
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	padding-top: 1px;
	padding-left: 1px;
	padding-right: 1px;
	margin-top: 1px;
}
/** 話速スライダー */
.ui-slider {
	/*position: relative;
	text-align: left;
	*/
	border: none;
}

	.ui-slider .ui-slider-handle {
		width: 16px;
		height: 16px;
		position: absolute;
		top: -8px;
		z-index: 200;
		background: url(/content/img/play-speedbar-pointer.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		border: none;
		outline: none;
		margin-left: -8px;
	}

/************************************************************************************/
/** 設定画面 */
.setting_label {
	color: #666666;
	font-size: 12px;
	font-weight: bold;
}

#setting-dlg li {
	outline: none;
	width: 33%;
}

/** リスト */
body > #wrapper_list {
	height: auto;
	overflow: auto;
	position: fixed;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.item_frame {
	width: 100%;
	float: left;
	margin: 0px 0 0px 0px;
	/*overflow-y:scroll;
	*/ overflow-x: hidden;
	overflow-y: hidden;
	height: 100%;
}

.item-list {
	margin-top: 70px;
	margin-left: 0;
}

.item_icon {
	background-image: url(img/list-folder.png);
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 36px;
	height: 27px;
	float: left;
	margin-left: 30px;
	margin-top: 6px;
}

.item_none {
	background-image: url(img/list-file.png);
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 20px;
	height: 27px;
	float: left;
	margin-left: 38px;
	margin-right: 8px;
	margin-top: 6px;
}

.item_line {
	clear: both;
	background-image: url(img/index_line.png);
	-webkit-background-size: 100% 1px;
	background-size: 100% 1px;
	background-position: bottom;
	background-repeat: no-repeat;
	width: 100%;
	height: 1px;
}

.item_text_tbl {
	height: 39px;
}

.item_text {
	width: 100%;
	height: 100%;
	vertical-align: middle;
	padding-left: 5px;
	padding-top: 2px;
}

.item_file {
	background-image: none;
	background-color: #FFFFFF;
	width: 100%;
	height: 40px;
	display: block;
	cursor: pointer;
	color: #666666;
	text-decoration: none;
	display: block;
}

	.item_file:active {
		background-image: url(img/index_select_arrow.png);
		-webkit-background-size: 24px 100%;
		background-size: 24px 100%;
		background-repeat: no-repeat;
		background-color: #FFCC00;
	}

input {
	outline: none;
}

table {
	border-collapse: collapse;
	border: 0px;
}

tr {
	padding: 0;
}

td {
	padding: 0;
}

.vss_titlebar {
	width: 100%;
}

.vss_title_pnl {
	width: 100%;
	min-width: 400px;
}

.vss_title_wpm {
}

#toolbar {
	table-layout: fixed;
	width: 100%;
}

#toolbar2 {
	table-layout: fixed;
	width: 100%;
}

#play_title {
	white-space: nowrap;
	overflow: hidden;
	/*line-height: 1em;*/
	/*max-height: 1em;
    min-height: 1em;*/
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	vertical-align: middle;
	margin-left: 100px;
	padding-bottom: 2px;
}

.wpm_slider_pnl {
	/*padding-left:5px;
    padding-right:5px;*/
	padding-top: 1px;
}

.button input[type="radio"]:checked + .switch-on {
	background-color: #a1b91d;
	color: #fff;
}

.button input[type="radio"]:checked + .switch-off {
	background-color: #e67168;
	color: #fff;
}

.btn-shadow {
	background-color: var(--color-header-background);
	position: absolute;
}

.sub-title {
	/*background-image: url('/content/img/common-subtitle-mark.png');
	background-repeat: no-repeat;*/
	background-size: 1em;
	background-position: 0;
	padding-left: 1.2em;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
	position: relative;
}
	.sub-title:before {
		background: var(--color-header-background);
		content: "";
		height: 14px;
		width: 14px;
		left: 0px;
		position: absolute;
		top: 50%;
		margin-top: -7px;
	}
.sub-title-blk {
	background-image: url('/content/img/common-subtitle-blk-mark.png');
	background-repeat: no-repeat;
	background-size: 1em;
	background-position: 0;
	padding-left: 1.2em;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
}

hr {
	border: 0;
	height: 1px;
	background: var(--color-header-background);
}

input:focus,
a:focus,
button:focus {
	outline: none;
}

.wpm-slider-tr {
	position: absolute;
	left: 104px;
	bottom: 10px;
	height: 8px;
	vertical-align: top;
}

.vss_pnl_speed {
	width: 50%;
	padding-right: 70px;
}

	.vss_pnl_speed table {
		margin-top: 5px;
		width: 320px;
		margin-left: auto;
		padding-right: 0;
		position: relative;
		margin-right: 70px;
	}

	.vss_pnl_speed tr {
		height: 18px;
	}

.custom-selectbox {
	position: relative;
}

	.custom-selectbox select {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		height: 30px;
		opacity: 0;
		cursor: pointer;
		margin-left: 1px;
		background-color: #e9f5ff;
	}

	.custom-selectbox .inner {
		position: relative;
		z-index: 0;
		box-sizing: border-box;
		border: 1px solid var(--color-header-border-color);
		padding: 0 20px 0 5px;
		width: 150px;
		height: 30px;
		font-size: 14px;
		line-height: 30px;
		background-color: #e9f5ff;
		overflow: hidden;
		text-overflow: ellipsis;
	}

		.custom-selectbox .inner:before,
		.custom-selectbox .inner:after {
			content: '';
			position: absolute;
			display: block;
		}

		.custom-selectbox .inner:before {
			top: 0;
			right: 0;
			bottom: 0;
			width: 24px;
			background: transparent;
		}

		.custom-selectbox .inner:after {
			top: 50%;
			right: 7px;
			margin-top: -3px;
			width: 0;
			height: 0;
			border: solid transparent;
			border-top-color: #666666;
			border-width: 5px 5px 0 5px;
		}

.button.setting_label.ui-tabs-anchor-my,
.ui-tabs .ui-tabs-nav li a {
	border-bottom: 1px solid var(--color-header-border-color);
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

.lock-msg-frame {
	width: 320px;
	height: 3em;
	background: white;
	text-align: left;
	border-radius: 5px 5px 5px 5px;
	margin: auto;
	padding: 0.5em;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -1.5em;
	margin-left: -160px;
	font-size: 14px;
}

/* 発音評価 */
.ui_pronounce_frame {
	min-width: 110px;
	max-width: 122px;
	border-left: 1px solid #aaa;
	position: relative;
	padding-left: 2em;
}

.ui_pronounce_dsable {
	background: url(/content/img/speaking.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	opacity: 0.4;
	cursor: default;
}

.ui_pronounce {
	background: url(/content/img/speaking_roll.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}

	.ui_pronounce a {
		background: url(/content/img/speaking.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		display: block;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin: 0;
	}

.ui_back2 {
	background: url(/content/img/common-back_roll.svg) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 106px;
	height: 32px;
	position: absolute;
	top: 49px;
	left: 10px;
}

	.ui_back2 a {
		background: url(/content/img/common-back.svg) no-repeat;
		background-color: var(--color-button-header-back-background);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		border: none;
		display: block;
		width: 106px;
		height: 32px;
		cursor: pointer;
		top: 0;
		left: 0;
	}

.lbl-rec1 {
	position: absolute;
	top: 0;
	left: 5px;
	font-size: 13px;
	color: var(--color-header-color);
	font-weight: bold;
	width: 4em;
}

.lbl-rec {
	position: absolute;
	top: 0;
	left: 5px;
	font-size: 17px;
	color: var(--color-header-color);
	font-weight: bold;
}

.ui_record_frame1 {
	min-width: 80px;
	max-width: 80px;
	position: relative;
	padding-left: 45px;
}

.ui_record_frame2 {
	min-width: 72px;
	max-width: 72px;
	border-right: 1px solid #666666;
}

.ui_shadow {
	background: url(/content/img/shadowing_roll.png) no-repeat;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}

	.ui_shadow a {
		background: url(/content/img/shadowing.png) no-repeat;
		background-size: 100% 100%;
		display: block;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin: 0;
	}

		.ui_shadow a:hover {
			background: none;
		}

		.ui_shadow a:active {
			background: url(/content/img/shadowing_on.png) no-repeat;
			background-size: 100% 100%;
		}

.ui_shadow_sel {
	background: url(/content/img/shadowing_recing_roll.png) no-repeat;
	background-size: 100% 100%;
}

	.ui_shadow_sel a {
		background: url(/content/img/shadowing_recing.png) no-repeat;
		background-size: 100% 100%;
	}

		.ui_shadow_sel a:active {
			background: url(/content/img/shadowing_recing_on.png) no-repeat;
			background-size: 100% 100%;
		}

.ui_rec {
	background: url(/content/img/rec_roll.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}

	.ui_rec a {
		background: url(/content/img/rec.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		display: block;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin: 0;
	}

.ui_rec_sel {
	background: url(/content/img/rec_recing_roll.png) no-repeat;
	background-size: 100% 100%;
}

	.ui_rec_sel a {
		background: url(/content/img/rec_recing.png) no-repeat;
		background-size: 100% 100%;
	}

		.ui_rec_sel a:active {
			background: url(/content/img/rec_recing_on.png) no-repeat;
			background-size: 100% 100%;
		}

.pronounce-titlebar {
	background: var(--color-pronounce-header-background);
	color: var(--color-pronounce-header-color);
	height: 30px;
	text-align: center;
	position: relative;
	width: 780px;
	display: flex;
	align-items: center;
}

#pronounce-title {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
	color: var(--color-pronounce-header-color);
	font-weight: bold;
	display: flex;
	align-items: center;
	height: 30px;
}

.pronounce-model {
	top: 0;
	right: 10px;
	position: absolute;
	height: 30px;
	display: flex;
	align-items: center;
}

	.pronounce-model span {
		vertical-align: middle;
	}

.pronounce-1 {
	color: #ffb028;
}

.pronounce-2 {
	color: #1d1f86;
}

.pronounce-3 {
	color: #e40012;
}

.pronounce-4 {
	color: rgb(65,118,48);
}

.pronounce-5 {
	color: #0000ff;
}

.pronounce-6 {
	color: rgb(255,255,0);
}

.pronounce-7 {
	color: rgb(0,255,255);
}

.pronounce-8 {
	color: rgb(255,0,255);
}

.pronounce-9 {
	color: rgb(147,97,52);
}

.ui_model_frame1 {
	min-width: 120px;
	max-width: 120px;
	position: relative;
	height: 40px;
}

.ui_model_frame2 {
	min-width: 70px;
	max-width: 70px;
}

.lbl-model {
	position: absolute;
	top: 0;
	/*left: 45px;*/
	left: 5px;
	font-weight: bold;
	color: var(--color-header-color);
}

.ui_model {
	background: url(/content/img/playswitch_teacher_on.png) no-repeat;
	background-size: 100% 100%;
	width: 100px;
	height: 30px;
	margin: 0;
	margin-left: auto;
}

	.ui_model a {
		background: url(/content/img/playswitch_teacher_off.png) no-repeat;
		background-size: 100% 100%;
		display: block;
		width: 100px;
		height: 30px;
		cursor: pointer;
		margin: 0;
		position: relative
	}

.ui_model_sel a {
	background: url(/content/img/playswitch_teacher_on.png) no-repeat;
	background-size: 100% 100%;
}

.ui_self {
	background: url(/content/img/playswitch_myself_on.png) no-repeat;
	background-size: 100% 100%;
	width: 100px;
	height: 30px;
	margin: 0;
}

	.ui_self a {
		background: url(/content/img/playswitch_myself_off.png) no-repeat;
		background-size: 100% 100%;
		display: block;
		width: 100px;
		height: 30px;
		cursor: pointer;
		margin: 0;
		position: relative;
	}

#vss-pnl-model {
	min-height: 40px;
}

.ui_play2 {
	background: url(/content/img/play_roll.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}

	.ui_play2 a {
		background: url(/content/img/play.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		display: block;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin: 0;
	}

.ui_pause2 {
	background: url(/content/img/pause_roll.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}

	.ui_pause2 a {
		background: url(/content/img/pause.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		display: block;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin-left: 0;
	}

.help-1 {
	background: url(/content/img/help.svg) no-repeat;
	background-size: 100% 100%;
	width: 26px;
	height: 26px;
	display: block;
	float: right;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: -2px;
	cursor: pointer;
}

	.help-1:hover {
		background: url(/content/img/help_roll.svg) no-repeat;
		background-size: 100% 100%;
	}

	.help-1:active {
		background: url(/content/img/help_on.svg) no-repeat;
		background-size: 100% 100%;
	}

.help-1-frame {
	float: right;
	width: 40px;
}

#vss_selector {
	position: absolute;
	top: 100px;
	left: 10px;
	width: 40px;
	height: 0;
	border: 1px solid var(--color-header-border-color);
	border-right-style: none;
}

.btn-pronounce-sent {
	background: url(/content/img/diff.svg) no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	position: absolute;
	cursor: pointer;
}


.graph-back {
	height: 120px;
	position: absolute;
	top: 0;
	left: 0;
}

.graph-view {
	height: 144px;
}

.vss-viewstyle-frame {
	padding-left: 40px;
	height: 170px;
}

.vss-viewstyle {
	overflow: auto;
	position: relative;
}

.btn-graph-play-1 {
	top: 185px;
}

.btn-graph-play-2 {
	top: 395px;
}

.btn-graph-play {
	background: url(/content/img/graph-play.png) no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	position: absolute;
	left: 15px;
	cursor: pointer;
}

.btn-graph-play-sel {
	background: url(/content/img/graph-pause.png) no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	position: absolute;
	left: 15px;
	cursor: pointer;
}

.meter-frame {
	background: white;
	width: 260px;
	height: 27px;
	position: absolute;
	right: 5px;
	top: 10px;
}

.meter-0 {
	background-image: url('/content/img/score_star.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	float: left;
	height: 26px;
	width: 26px;
}

.meter-1 {
	background-image: url('/content/img/score_star_on.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	float: left;
	height: 26px;
	width: 26px;
}

.result-titile {
	/*background-image: url('/content/img/common-subtitle-mark.png');
	background-repeat: no-repeat;*/
	background-size: 1em;
	background-position: 0;
	padding-left: 1.2em;
	float: left;
	margin-left: 20px;
	margin-top: 7px;
	font-size: 17pt;
	position: relative;
}
	.result-titile:before {
		background: var(--color-header-background);
		content: "";
		height: 20px;
		width: 20px;
		left: 0px;
		position: absolute;
		top: 50%;
		margin-top: -10px;
	}

.result-frame {
	width: 100%;
	height: 60px;
	margin-top: 1em;
	position: relative;
}


.ui_score_frame {
	min-width: 80px;
	max-width: 80px;
	width: 80px;
	position: relative;
	height: 40px;
	padding-left: 50px;
	border-right: 1px solid #666666;
}

.ui_setting_frame2 {
	min-width: 80px;
	max-width: 80px;
	width: 80px;
}

.ui_score {
	background: url(/content/img/score_roll.png) no-repeat;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}

	.ui_score a {
		background: url(/content/img/score.png) no-repeat;
		background-size: 100% 100%;
		display: block;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin: 0;
	}

		.ui_score a:hover {
			background: none;
		}

		.ui_score a:active {
			background: url(/content/img/score_on.png) no-repeat;
			background-size: 100% 100%;
		}

.help-frame {
	overflow: auto;
	width: 100%;
	height: 100%;
}

.advice-frame {
	overflow: auto;
	width: 100%;
	height: 100%;
}

.help-text {
}

.help-2-frame {
	position: absolute;
	top: 10px;
	right: 5px;
}

.help-indent {
	margin-left: 1em;
}

.help-indent2 {
	margin-left: 2em;
}

.btn_disable {
	opacity: 0.7;
}

	.btn_disable a {
		opacity: 1;
	}

.result-msg-frame {
	overflow: auto;
	border: 1px solid #aaa;
	padding: 5px;
	margin-top: 0.5em;
	height: 13em;
	margin-left: 10px;
	margin-right: 10px;
}

.result-msg {
}

.result-msg-frame::-webkit-scrollbar {
	border: 1px solid #c9c9c9;
	background-color: #c9c9c9;
	border-radius: 4px;
	width: 8px;
}

.result-msg-frame::-webkit-scrollbar-thumb {
	border: 1px solid #7f7f7f;
	background-color: #7f7f7f;
	border-radius: 4px;
}

.vss_pnl_speed2 {
	width: 270px;
	min-width: 270px;
	max-width: 270px;
}

	.vss_pnl_speed2 table {
		margin-top: 5px;
		width: 250px;
		/*margin-left: auto;*/
		padding-right: 0;
		position: relative;
	}

	.vss_pnl_speed2 tr {
		height: 18px;
	}

.count-down-1 {
	background: url(/content/img/countdown-1.svg) no-repeat;
	background-size: 200px 200px;
	background-position: center;
	width: 100%;
	height: 100%;
}

.count-down-2 {
	background: url(/content/img/countdown-2.svg) no-repeat;
	background-size: 200px 200px;
	background-position: center;
	width: 100%;
	height: 100%;
}

.count-down-3 {
	background: url(/content/img/countdown-3.svg) no-repeat;
	background-size: 200px 200px;
	background-position: center;
	width: 100%;
	height: 100%;
}

.recording-time {
	color: red;
}

.lbl-score {
	position: absolute;
	top: 0;
	left: 5px;
	font-size: 17px;
	color: var(--color-header-color);
	font-weight: bold;
}

.dlg-tab-li {
	width: 120px;
	box-shadow: 2px 2px 0px #64dcff;
	outline: none;
}

.ui_play_frame2 {
	min-width: 80px;
	max-width: 80px;
	width: 80px;
	padding-left: 10px;
}

.ui_stop_frame2 {
	min-width: 72px;
	max-width: 72px;
	width: 72px;
	border-right: 1px solid #666666;
}

.score-ul {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 1.5em;
}

.score-li {
}

.addon-label1 {
	color: white;
	margin-bottom: 1em;
}

.addon-label2 {
	color: white;
	width: 320px;
	margin: 0 auto;
	margin-top: 1em;
}

.tooltip {
	position: absolute;
	top: 0;
	left: 0;
	background-color: white;
	border: 2px solid var(--color-header-border-color);
	border-radius: 8px;
	/*padding-right: 10px;*/
	overflow: hidden;
	box-shadow: #666666 3px 3px 5px;
}

	.tooltip ul {
		padding-left: 1.5em;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}

.gop-word {
	color: red;
}

#recording-line {
	height: 3px;
	background-color: red;
	position: absolute;
	top: 100px;
	left: 10px;
}

.pron-bold {
	font-style: normal;
	font-weight: bold;
}

.score-bold {
	font-style: normal;
	font-weight: bold;
	font-size: 1.3em;
}

.score-exp {
	font-style: normal;
	font-weight: bold;
	cursor: pointer;
	font-size: 1.3em;
}

.score_star {
	width: 60px;
	height: 60px;
	top: -16px;
	left: 0;
	position: absolute;
}

.score_star_value {
	margin-left: 140px;
	font-size: 17pt;
	margin-top: -2px;
}

.score_star_0 {
	background: url(/content/img/score_star.png) no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

.score_star_1 {
	background: url(/content/img/score_star_0.1.png) no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

.score_star_2 {
	background: url(/content/img/score_star_0.2.png) no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

.score_star_3 {
	background: url(/content/img/score_star_0.3.png) no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

.score_star_4 {
	background: url(/content/img/score_star_0.4.png) no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

.score_star_5 {
	background: url(/content/img/score_star_0.5.png) no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

.score_star_6 {
	background: url(/content/img/score_star_0.6.png) no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

.score_star_7 {
	background: url(/content/img/score_star_0.7.png) no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

.score_star_8 {
	background: url(/content/img/score_star_0.8.png) no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

.score_star_9 {
	background: url(/content/img/score_star_0.9.png) no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

.score_star_10 {
	background: url(/content/img/score_star_on.png) no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

.meter-0_1 {
	background-image: url('/content/img/score_star_0.1.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	float: left;
	height: 26px;
	width: 26px;
}

.meter-0_2 {
	background-image: url('/content/img/score_star_0.2.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	float: left;
	height: 26px;
	width: 26px;
}

.meter-0_3 {
	background-image: url('/content/img/score_star_0.3.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	float: left;
	height: 26px;
	width: 26px;
}

.meter-0_4 {
	background-image: url('/content/img/score_star_0.4.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	float: left;
	height: 26px;
	width: 26px;
}

.meter-0_5 {
	background-image: url('/content/img/score_star_0.5.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	float: left;
	height: 26px;
	width: 26px;
}

.meter-0_6 {
	background-image: url('/content/img/score_star_0.6.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	float: left;
	height: 26px;
	width: 26px;
}

.meter-0_7 {
	background-image: url('/content/img/score_star_0.7.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	float: left;
	height: 26px;
	width: 26px;
}

.meter-0_8 {
	background-image: url('/content/img/score_star_0.8.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	float: left;
	height: 26px;
	width: 26px;
}

.meter-0_9 {
	background-image: url('/content/img/score_star_0.9.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	float: left;
	height: 26px;
	width: 26px;
}

.adv-link {
	text-decoration: underline;
}

.adv-phone-mark {
	color: rgb(0,153,255);
}

.adv-phone {
	font-weight: bold;
}

.ui_info_frame {
	min-width: 50px;
	max-width: 70px;
	border-left: 1px solid #aaa;
}

.tuto-mobile-only {
	display: none;
}

/** 次コンテンツボタン */
.ui_next_cont_disable {
	-webkit-background-size: 50% 100%;
	background-image: url(/content/img/play-page-next-gray.png);
	background-size: 50% 100%;
	display: block;
	width: 56px;
	height: 27px;
	background-color: #666666;
}

.ui_next_content {
	background: url(/content/img/play-page-next-roll.png);
	-webkit-background-size: 50% 100%;
	background-size: 50% 100%;
	width: 56px;
	height: 27px;
	background-color: #666666;
}

.ui_next_cont a {
	background: url(/content/img/play-page-next.png);
	-webkit-background-size: 50% 100%;
	background-size: 50% 100%;
	display: block;
	width: 56px;
	height: 27px;
	cursor: pointer;
	background-color: #666666;
}

.ui_prev_cont_disable {
	-webkit-background-size: 50% 100%;
	background-image: url(/content/img/play-page-prev-gray.png);
	background-size: 50% 100%;
	display: block;
	width: 56px;
	height: 27px;
	background-color: #666666;
}

.ui_prev_cont {
	background: url(/content/img/play-page-prev-roll.png);
	-webkit-background-size: 50% 100%;
	background-size: 50% 100%;
	width: 56px;
	height: 27px;
	background-color: #666666;
}

	.ui_prev_cont a {
		background: url(/content/img/play-page-prev.png);
		-webkit-background-size: 50% 100%;
		background-size: 50% 100%;
		display: block;
		width: 56px;
		height: 27px;
		cursor: pointer;
		background-color: #666666;
	}

.word-frame {
	position: absolute;
	width: 100%;
	height: fit-content;
	overflow: hidden;
	border-top: 6px solid var(--color-header-border-color);
}

.score-frame {
}

	.score-frame div {
		position: relative;
		width: fit-content;
		margin: auto;
		display: flex;
		vertical-align: middle;
	}

.graph-frame {
	border-top: 1px solid var(--color-header-border-color);
}

.graph-frame-div {
	position: relative;
	width: 100%;
	margin: auto;
}

.btn-graph-play-0 {
	top: 68px;
	left: 5px;
	width: 40px;
	height: 40px;
}

.btn-graph-play-w {
	bottom: 20px;
	left: 5px;
	width: 40px;
	height: 40px;
}

.btn-word-play {
	background: url(/content/img/play.png) no-repeat;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	position: absolute;
	cursor: pointer;
}

.btn-word-stop {
	background: url(/content/img/play-stop.png) no-repeat;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	position: absolute;
	cursor: pointer;
}

.graph-table-prn {
	width: 100%;
}

	.graph-table-prn td {
		width: 50%;
	}

@media (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx) {

/*	.meter-1 {
		background-image: url('/content/img/score_star_on_x2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0 {
		background-image: url('/content/img/score_star_x2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_1 {
		background-image: url('/content/img/score_star_0.1_x2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_2 {
		background-image: url('/content/img/score_star_0.2_x2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_3 {
		background-image: url('/content/img/score_star_0.3_x2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_4 {
		background-image: url('/content/img/score_star_0.4_x2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_5 {
		background-image: url('/content/img/score_star_0.5_x2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_6 {
		background-image: url('/content/img/score_star_0.6_x2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_7 {
		background-image: url('/content/img/score_star_0.7_x2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_8 {
		background-image: url('/content/img/score_star_0.8_x2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_9 {
		background-image: url('/content/img/score_star_0.9_x2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}*/

/*	.btn-pronounce-sent {
		background: url(/content/img/diff_x2.png) no-repeat;
		background-size: 100% 100%;
	}
*/
	.btn-graph-play {
		background: url(/content/img/graph-play_x2.png) no-repeat;
		background-size: 100% 100%;
	}

	.btn-word-play {
		background: url(/content/img/play_x2.png) no-repeat;
		background-size: 100% 100%;
	}

	.ui_play2 a {
		background: url(/content/img/play_x2.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.btn-graph-play-sel {
		background: url(/content/img/graph-pause_x2.png) no-repeat;
		background-size: 100% 100%;
	}

	.ui_pause2 a {
		background: url(/content/img/pause_x2.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_setting {
		background: url(/content/img/play-setting_roll_x2.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

		.ui_setting a {
			background: url(/content/img/play-setting_x2.png) no-repeat;
			-webkit-background-size: 100% 100%;
			background-size: 100% 100%;
		}

	.ui_stop a {
		background: url(/content/img/play-stop_x2.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_rec_stop_disable {
		-webkit-background-size: 100% 100%;
		background-image: url(/content/img/play-stop_x2.png);
		background-size: 100% 100%;
	}

	.ui_rec_stop a {
		background: url(/content/img/play-stop_x2.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_stop {
		background: url(/content/img/play-stop-roll_x2.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_rec_stop {
		background: url(/content/img/play-stop-roll_x2.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_rec a {
		background: url(/content/img/rec_x2.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_rec_sel a:active {
		background: url(/content/img/rec_recing_on_x2.png) no-repeat;
		background-size: 100% 100%;
	}

	.ui_rec_sel {
		background: url(/content/img/rec_recing_roll_x2.png) no-repeat;
		background-size: 100% 100%;
	}

		.ui_rec_sel a {
			background: url(/content/img/rec_recing_x2.png) no-repeat;
			background-size: 100% 100%;
		}

	.ui_rec {
		background: url(/content/img/rec_roll_x2.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_score a {
		background: url(/content/img/score_x2.png) no-repeat;
		background-size: 100% 100%;
	}

	.ui_score {
		background: url(/content/img/score_roll_x2.png) no-repeat;
		background-size: 100% 100%;
	}

		.ui_score a:active {
			background: url(/content/img/score_on_x2.png) no-repeat;
			background-size: 100% 100%;
		}

/*	.help-1 {
		background: url(/content/img/help_x2.png) no-repeat;
		background-size: 100% 100%;
	}
*/}

@media (-webkit-min-device-pixel-ratio:3),(min-resolution: 3dppx) {
	/*.meter-1 {
		background-image: url('/content/img/score_star_on_x3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0 {
		background-image: url('/content/img/score_star_x3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_1 {
		background-image: url('/content/img/score_star_0.1_x3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_2 {
		background-image: url('/content/img/score_star_0.2_x3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_3 {
		background-image: url('/content/img/score_star_0.3_x3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_4 {
		background-image: url('/content/img/score_star_0.4_x3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_5 {
		background-image: url('/content/img/score_star_0.5_x3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_6 {
		background-image: url('/content/img/score_star_0.6_x3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_7 {
		background-image: url('/content/img/score_star_0.7_x3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_8 {
		background-image: url('/content/img/score_star_0.8_x3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.meter-0_9 {
		background-image: url('/content/img/score_star_0.9_x3.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}*/

/*	.btn-pronounce-sent {
		background: url(/content/img/diff_x3.png) no-repeat;
		background-size: 100% 100%;
	}
*/
	.btn-graph-play {
		background: url(/content/img/graph-play_x3.png) no-repeat;
		background-size: 100% 100%;
	}

	.btn-word-play {
		background: url(/content/img/play_x3.png) no-repeat;
		background-size: 100% 100%;
	}

	.ui_play2 a {
		background: url(/content/img/play_x3.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.btn-graph-play-sel {
		background: url(/content/img/graph-pause_x3.png) no-repeat;
		background-size: 100% 100%;
	}

	.ui_pause2 a {
		background: url(/content/img/pause_x3.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_setting {
		background: url(/content/img/play-setting_roll_x3.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

		.ui_setting a {
			background: url(/content/img/play-setting_x3.png) no-repeat;
			-webkit-background-size: 100% 100%;
			background-size: 100% 100%;
		}

	.ui_stop a {
		background: url(/content/img/play-stop_x3.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_rec_stop_disable {
		-webkit-background-size: 100% 100%;
		background-image: url(/content/img/play-stop_x3.png);
		background-size: 100% 100%;
	}

	.ui_rec_stop a {
		background: url(/content/img/play-stop_x3.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_stop {
		background: url(/content/img/play-stop-roll_x3.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_rec_stop {
		background: url(/content/img/play-stop-roll_x3.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_rec a {
		background: url(/content/img/rec_x3.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_rec_sel a:active {
		background: url(/content/img/rec_recing_on_x3.png) no-repeat;
		background-size: 100% 100%;
	}

	.ui_rec_sel {
		background: url(/content/img/rec_recing_roll_x3.png) no-repeat;
		background-size: 100% 100%;
	}

		.ui_rec_sel a {
			background: url(/content/img/rec_recing_x3.png) no-repeat;
			background-size: 100% 100%;
		}

	.ui_rec {
		background: url(/content/img/rec_roll_x3.png) no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	.ui_score a {
		background: url(/content/img/score_x3.png) no-repeat;
		background-size: 100% 100%;
	}

	.ui_score {
		background: url(/content/img/score_roll_x3.png) no-repeat;
		background-size: 100% 100%;
	}

		.ui_score a:active {
			background: url(/content/img/score_on_x3.png) no-repeat;
			background-size: 100% 100%;
		}

/*	.help-1 {
		background: url(/content/img/help_x3.png) no-repeat;
		background-size: 100% 100%;
	}
*/}

.score-frame-div {
	display: flex;
	align-items: flex-start;
}

.btn-push-info {
	background: url(/Content/img/notice.svg) no-repeat;
	background-size: auto 100%;
	cursor: default;
}

	.btn-push-info[hasinfo="true"] {
		background: url(/Content/img/notice.svg) no-repeat;
		background-size: auto 100%;
		cursor: pointer;
	}

		.btn-push-info[hasinfo="true"]:hover {
			background: url(/Content/img/notice-roll.svg) no-repeat;
			background-size: auto 100%;
			cursor: pointer;
		}

		.btn-push-info[hasinfo="true"]:active {
			background: url(/Content/img/notice-on.svg) no-repeat;
			background-size: auto 100%;
			cursor: pointer;
		}

.btn-footer-right {
	width: 40px;
	height: 40px;
	display: block;
	margin: auto;
}

.ui_push_frame {
	border-left: 1px solid #666666;
	padding-left: 10px;
}

.ui_push_frame_tb {
	width: 80px;
	min-width: 40px;
	max-width: 80px;
}

.ui_push_frame_pad {
	width: 70px;
	min-width: 40px;
	max-width: 70px;
}