/* menu */
#title {display: block; margin-top: 0; margin-bottom: 10px; padding-top: 0; text-align: center;}
#title img {max-width: 150px;}
#dropdowWrap {position: absolute; top: -15px; right: 5px;}
#dropdowWrap .dropdown-menu li {border-bottom: 1px solid #eee;}
#dropdowWrap .dropdown-menu li:last-child {border-bottom: none;}
#dropdowWrap .dropdown-menu li.template {display: none;}
#dropdowWrap .dropdown-menu li a {position: relative;}
#dropdowWrap .dropdown-menu li a p {margin-bottom: 2px; padding-left: 4px; font-size: 90%;}
#dropdowWrap .dropdown-menu li a h3 {margin-top: 0; margin-bottom: 5px; margin-right: 2em; padding-top: 0; font-size: 14px; line-height: 1.0; font-weight: bold; white-space: normal; width: 15em;}
#dropdowWrap .dropdown-menu li a h3 span.labelWrap {display: inline-block; margin-bottom: 5px; font-weight: normal; min-width: 1.6em; text-align: center; vertical-align: middle;}
#dropdowWrap .dropdown-menu li a h3 span.titleWrap {display: inline-block;}
#dropdowWrap .dropdown-menu li a h3 img {display: inline-block; height: 1.3em;}
/*#dropdowWrap .dropdown-menu li a h3 img.heading {margin-right: 0.3em;  float: left;}*/
#dropdowWrap .dropdown-menu li a.prep h3:after {content: '【公開準備中】'; color: #ff0000; font-size: 12px; font-weight: normal; display: inline-block;}
#dropdowWrap .dropdown-menu li a button {position: absolute; right: 10px; top: 30%;}
#dropdowWrap .dropdown-menu li.template {display: none;}

/* body */
h2 {font-size: 22px; color: #fff; background-color: #337ab7; margin-top: 0; margin-bottom: 5px; padding: 7px 7px 5px 7px; border-radius: 5px;}
@media screen and (max-width: 991px) { h2 {font-size: 20px;} }
@media screen and (max-width: 320px) { h2 {font-size: 16px;} }
h2 .pp {color: #fff; margin-left: 20px; display: inline-block;}
.pr h2 .pp {display: none;}
h3 {font-size: 18px; padding: 4px 4px 2px 4px; margin-top: 5px; margin-bottom: 5px; line-height: 140%;}
h3 img {display: inline-block; height: 1.3em; margin-right: 0.5em;}
h3 .label-outer {display: inline-block; margin-right: 10px; vertical-align: middle;}
h3 .labelWrap {display: inline-block; font-size: 90%; border-radius: 3px; padding: 3px 5px; min-width: 1.7em; text-align: center; vertical-align: middle;}
.pr h3 .labelWrap {display: none;}
p.render-lead {padding-left: 2.4em; padding-right: 1em; text-indent: -1.8em; margin-bottom: 5px;}
@media screen and (max-width: 320px) { p.render-lead  {font-size: 12px;} }
#renderWrap {border: 1px solid #ccc; padding: 5px; border-radius: 5px; width: 80%; position: relative; overflow: hidden;}
#renderWrap > ul {margin-top: 0; margin-bottom: 5px;}
#renderWrap > ul li button {padding-left: 5px; padding-right: 5px;}
#renderWrap .errormes {display: none; font-size: 1.2em; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); left: 0; width: 100%; text-align: center;}
#renderWrap .errormes button {margin-top: 1em;}
#renderWrap video.hidden + .errormes {display: block;}
#renderWrap + ul {margin-top: 5px;}
.render-button {letter-spacing: -0.5em; margin-top: 10px;}
.render-button li {letter-spacing: normal;}
#btns1 {position: absolute; margin: 0px auto;}
#oprDesc1, #oprDesc2, #oprDesc3, #oprDesc4 {margin-top: 5px; margin-bottom: 5px;}
.smdev .render-button {margin-top: 1px; margin-bottom: 1px;}
.smdev .render-button li {padding-left: 3px; padding-right: 3px;}
.smdev #oprDesc1, .smdev #oprDesc2, .smdev #oprDesc3, .smdev #oprDesc4 {letter-spacing: -1px; margin-bottom: 0; margin-top: 0;}
.bottombackbtn {margin-top: 40px;}
body.pr .bottombackbtn {display: block;}

/* ★★★2018新規追加★★★ */

/* 動画下解説 */
#commentWrap {text-align: center; position: absolute; left: 0; bottom: 10px; width: 100%;}
#commentWrap > div {display: inline-block; max-width: 85%; margin: 0; padding: 0; text-align: left;}
#commentWrap > div > .MJXc-display {margin: 0;}
@media screen and (max-width: 767px) {
	#commentWrap {text-align: center; position: relative; left: 0; bottom: 0; width: 100%;}
	#commentWrap > div {max-width: 100%;}
}
.a { color: aqua !important; }
.b { color: blue !important; }
.c { color: goldenrod !important; }
.d { color: gray !important; }
.f { color: fuchsia !important; }
.g { color: green !important; }
.i { color: #fffde0 !important; }
.k { color: black !important; }
.l { color: lime !important; }
.m { color: maroon !important; }
.n { color: navy !important; }
.o { color: olive !important; }
.p { color: purple !important; }
.r { color: red !important; }
.s { color: silver !important; }
.t { color: teal !important; }
.w { color: white !important; }
.y { color: yellow !important; }
.bold, .bold * {font-weight: bold !important;}

/* シーンボタン、ローディング等 */
#btns1 {position: relative; margin-bottom: 10px;}
#btns3 {position: absolute; top: 5px; width: 100%;}
p.render-lead {padding-left: 0; text-indent: 0;}
#renderWrap {margin-top: 10px;}
#renderWrap #shutter {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; margin: 0; padding: 0; background-color: #fff; z-index: 2000; opacity: 0.9;}
#renderWrap #shutter img {position: absolute; top: 50%; left: 50%; z-index: 2001; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#renderWrap #shutter.noloader img {display: none;}
#btns3 {z-index: 2010;}
#dropdowWrap {z-index: 3000;}

/* シーンボタン制御 */
#renderWrap #btns3 button {color: #333; background-color: #fff; border-color: #ccc;}
#renderWrap #btns3 button:hover {color: #333; background-color: #e6e6e6; border-color: #adadad;}
#renderWrap.stop #btns3 button {color: #fff; background-color: #5cb85c; border-color: #4cae4c;}
#renderWrap.stop #btns3 button:hover {color: #fff; background-color: #449d44; border-color: #398439;}
#renderWrap.forward #btns3 button,
#renderWrap.rewind #btns3 button {opacity: 0.4; box-shadow: none; cursor: not-allowed;}
#renderWrap .btn.disabled, #renderWrap .btn[disabled] {opacity: 0.4;}

/* classに応じてスタートボタンを切り替える */
.playButton .startbtn {display: inline;}
.playButton .loading  {display: none;}
.playButton.loading .startbtn {display: none;}
.playButton.loading .loading  {display: inline;}

/* シーン切替ナシ動画表示チェック用 */
body .noScene #btns1, body .noScene #btns3 {display: none;}

/* 代替動画誘導 */
#altmovie {margin-top: 50px;}
@media screen and (max-width: 767px) {
	#altmovie p {font-size: 11px;}
}

/* 動画下の音声再生注意 */
#movieAlert {width: 80%; margin: 5px auto;}
@media screen and (max-width: 767px) { #movieAlert {width: 90%;} }
#movieAlert li {text-indent: -0.6em; padding-left: 0.6em;}