/*----------------------------------------------------------------
 *　tag
----------------------------------------------------------------*/

body {

    /*** 110608 ***/
    /*height: 416px;*/

    /*** 121217 *** //
    /* ※タブレットモード */
    /*height:1000px;*/
    /*height:2000px;*/

    background-color: #333333;

    /* 1.14.0 */
    /*overflow: visible;*/
    overflow: hidden;

    overflow-x: hidden;

}

a {
  -webkit-tap-highlight-color: rgba(2, 109, 236, 0.9);  // タップ時の反転色
}

/*******************************/

#initializing {


    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:#333333;
    display: block;

    z-index:10030;

}

#initializing_bg {
   position:absolute;
   top: 50%;
   left: 0;
   width: 100%;
   background-color: #333333;
   text-align:center;
   margin-top:-10px;

    display: none;

}

#initializing_icon {
   width:16px;
   height:16px;
   vertical-align:middle;
}

#initializing_txt {
   color:#FFFFFF;
   font-size:14px;
   vertical-align:middle;
}

/*******************************/

#startPanel {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    /*background-color:#000000;*/
    display: block;
    z-index:10000;
}

#startPanel_bg {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:#000000;
    display: block;
    
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
}

#startPlayBtn {

   position:absolute;
   top: 50%;
   margin-top:-51px;
   left: 0;
   width: 100%;
   height:116px;
   text-align:center;
   display: none;
    
}

#startPlayBtnImg {

   width:102px;
   height:116px;
    
}

/* タブレットモード */
#delayMask {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    /*background-color:#000000;*/
    display: block;

    z-index:9990;

}

/* タブレットモード */
#delayMask_bg {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    /*background-color:#FFFFFF;    */
    display: block;

    filter:alpha(opacity=0);
    -moz-opacity:0.5;
    opacity:0.5;
}

/*----------------------------------------------------------------
 *　article
----------------------------------------------------------------*/
article {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #333333;
    padding: 0;
	clear: both;
}

article:not(.active) {
	display: none;
}

#manager {
    position:absolute;
    width: 310px;
    height: 100px;
    color:#000000;
    z-index:1000;
}

/*----------------------------------------------------------------
 *　navi
----------------------------------------------------------------*/
nav {
	/*background: #282e37;*/
	/*background: -webkit-gradient(linear, left top, left bottom, from(#6b6e74), to(#282e37));*/
	margin: 0 auto;
	/*margin-bottom: 10px;*/
    /*
	border-radius: 3px;
	-webkit-border-radius: 3px;
	*/
    position:static;
}

nav li {
	float: left;
	text-align: center;
}

nav li:first-child {
	border: none;
}

nav li:last-child {
}

nav li.active {
}

nav a {
    /*
	color: #fff;
	text-decoration: none;
	width: 50px;
	padding: 8px 0;
	display: block;
	*/
}

/*/////////////////////////////////////////////////////////////
 StormHeader
//////////////////////////////////////////////////////////////*/

#stormHeader {
    position:absolute;

    /* タブレットモード */
    background:url(../images/header/header_bg.png) repeat-x;

    height: 30px;
    width:100%;
    vertical-align: middle;
    overflow: hidden;

    z-index:10020;

}

#stormHeader_bg {
   position:absolute;
   top:0;
   left:0;
   width: 100%;
   /*background-color: #333333;*/
   /*text-align:center;*/
   margin-top:7px;
}

#contentTitle {
    /*padding: 3px 0px 0px 5px;*/
    padding-left: 5px;
    display: block;
    float: left;
    text-align: left;
    color: #ffffff;
    /*font-weight: bold;*/

    font-size:14px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;

    vertical-align:middle;
}

/*
#questionNum {
    padding: 3px 5px 0px 0px;
    display: block;
    float: right;
    color: #ffffff;
    text-align: right;

    width: 60px;
}
*/

#closeBtn {
    /*padding: 3px 5px 0px 0px;*/
    padding-right: 5px;
    float: right;
    vertical-align:middle;

    /*
    width:16px;
    height:16px;
    */

    width:32px;
    height:16px;

    /* HTML5 for PC */
    cursor:pointer;

}

/*
#closeBtn img{
    width:11px;
    height:11px;
}
*/

/*
#loading_bg2 {
   position:absolute;
   top:0;
   left:0;
   width: 100%;
   background-color: #333333;
   text-align:center;
   margin-top:16px;
}

#loading_icon2 {
    width:16px;
    height:16px;
    vertical-align:middle;
}

#loading_txt2 {
    color:#FFFFFF;
    font-size:14px;
    vertical-align:middle;
}
*/

/*/////////////////////////////////////////////////////////////
 StormFrame
//////////////////////////////////////////////////////////////*/
#stormFrame
{

    position: absolute;
    top:30px;
    left:0;
    width:100%;
	height:100%;
	background-color:#333333;
    display: block;

}

/*/////////////////////////////////////////////////////////////
 StormNav
//////////////////////////////////////////////////////////////*/
#stormNav
{
    position: absolute;
    width: 100%;
    top: 366px;
    height: 52px;

    /* タブレットモード */
    background-image: url(../images/navi/navi_bg.png);

    background-repeat: repeat-x;

    /*overflow-y: hidden;*/
    background-color:#000000;
    
    display: none;
    z-index:300;
}

#stormNav2
{
   display:none;
}

#stormNav #stormNavCol1_1{
	position:absolute;
	width: 20%;
	top:2px;
	left:0;
	text-align: center;
}

#stormNav #stormNavCol1_2{
	position:absolute;
	width: 20%;
	top:2px;
	left:20%;
	text-align: center;
}

#stormNav #stormNavCol1_3{
	position:absolute;
	width: 20%;
	top:2px;
	right:40%;
	text-align: center;
}

#stormNav #stormNavCol1_4{
	position:absolute;
	width: 20%;
	top:2px;
	right:20%;
	text-align: center;
}


#stormNav #stormNavCol1_5{
	position:absolute;
	width: 20%;
	top:2px;
	right:0;
	text-align: center;
}

/*
#stormNav #stormNavCol2_1{
	position:absolute;
	width: 33%;
	top:2px;
	left:0;
	text-align: center;
}

#stormNav #stormNavCol2_2{
	position:absolute;
	width: 33%;
	top:2px;
	left:33%;
	text-align: center;
}

#stormNav #stormNavCol2_3{
	position:absolute;
	width: 33%;
	top: 2px;
	right:0;
	text-align: center;
}
*/


/* ※1.10.2 */
#stormNav2 #stormNavCol2_2{
	position:absolute;
	width: 50%;
	top:2px;
	left:0%;
	text-align: center;
}

#stormNav2 #stormNavCol2_3{
	position:absolute;
	width: 50%;
	top: 2px;
	right:0;
	text-align: center;
}

#stormNav #stormNavCol3_1{
	position:absolute;
	width: 25%;
	top:2px;
	left:0;
	text-align: center;
}

#stormNav #stormNavCol3_2{
	position:absolute;
	width: 25%;
	top:2px;
	left:25%;
	text-align: center;
}

#stormNav #stormNavCol3_3{
	position:absolute;
	width: 25%;
	top: 2px;
	right:25%;
	text-align: center;
}

#stormNav #stormNavCol3_4{
	position:absolute;
	width: 25%;
	top: 2px;
	right:0;
	text-align: center;
}

.naviSelected{
    background-color:#666666;
}

.navCol{
	/*display:none;*/
}

.navBtnImg{
    width : 50px;
	height : 50px;
}

#navMask{

    position: absolute;
    left:0;
    bottom:0;

    background-color:#000000;

    width:100%;
    height:50px;

    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    opacity:0.8;

    display: none;

}

#loading {
    position:absolute;
    top:100px;
    left:0;
    height:52px;
    width:100%;

    /* タブレットモード */
    background-image: url(../images/navi/navi_bg.png);
    background-repeat: repeat-x;

    /* タブレットモード */
    background-color:#000000;

    display: none;
}

#loading_bg {
   position:absolute;
   top:0;
   left:0;
   width: 100%;
   /*background-color: #000000;*/
   text-align:center;
   margin-top:16px;
    /*margin-top:10px;*/
}

#loading_icon {
    width:16px;
    height:16px;
    vertical-align:middle;
}

#loading_txt {
    color:#FFFFFF;
    font-size:14px;
    vertical-align:middle;
}

/*/////////////////////////////////////////////////////////////
 StormCom Audio
//////////////////////////////////////////////////////////////*/
/*
#stormAudio
{
}
*/

/*/////////////////////////////////////////////////////////////
 StormCom Video
//////////////////////////////////////////////////////////////*/
#stormVideo
{
	left:0;
    top:0;
	z-index:10;
	width:240px;
	height:180px;
	background-color:#222222;
	position:absolute;

}

#stormVideo #lwvideo
{
	/*left:5px;*/
    /*
    left:0;
	top:0;
	width:240px;
	height:180px;
	*/
    /*background-color:#FF0000;*/
	/*
    position:absolute;
    */

}


/*/////////////////////////////////////////////////////////////
 StormCom Image
//////////////////////////////////////////////////////////////*/
#stormImage
{
    position: absolute;
    background-color: #000000;
}

/*/////////////////////////////////////////////////////////////
 StormCom Chapter
//////////////////////////////////////////////////////////////*/
#stromChapter
{
    position:absolute;
    color:#FFFFFF;
    width:100%;
	height:100%;
    background-color:#666666;
}

/* chapter ul li */
#chapter {

	font-size: 14px;
	/*top: 42px;*/
    top: 0;
    
}

.list {
	display: block;

    /* test */
    /*
	position: absolute;
	top: 0;
    left: 0;
	width: 100%;
	height: 100%;
	*/

    /*
	-webkit-transform: translate3d(0px, 0px, 0px);
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 0;
	*/
}

.list li {
	display: block;
	padding: 15px 15px 15px 15px;
	color: #000;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #767676;
	background-color: #eee;

    /* ※1.14.0 HTML5 */
    cursor:pointer;
}

.list li:nth-child(even){
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #7f7f7f;
	background-color: #e2e2e2;
}

.list strong {
	color: #cf3e3e;
}

.list a {
	color: #000000;
}

.list li.active {
    
    /*
    background-image: url(../images/chapter/list-arrow.png);
    background-position:15px center;
    background-repeat:no-repeat;
    */

    background-color:#4165B1;
    color: #FFFFFF;

}

.list li.notenabled {
   color: #CCCCCC;
}

.list li.delay {
   color: #CCCCCC;
}

.list li.check {
    /*
   color: #3333FF;
    */

    /* タブレットモード */
    background-image: url(../images/chapter/list-check.png);

    background-position:15px center;
    background-repeat:no-repeat;
}

.list li div {
    margin-left:30px;
}

#chapter_bottom {
    height:50px;
    background-color:#666666;
}

/*/////////////////////////////////////////////////////////////
 StormCom Note
//////////////////////////////////////////////////////////////*/
#stormNote
{

    /*color:#FFFFFF;*/
    font-size: 14px;
    color:#000000;
    /*position: absolute;*/

    /*
	top: 0;
    left: 0;
	width: 100%;
	height:100%;
    */

    /*background-color:#333333;*/
    background-color:#FFFFFF;
    /*position:relative;*/
    /*margin-bottom: 1em;*/

}

.noteText
{
   padding:10px;
   background-color:#FFFFFF;
}

/* ここはダサいから直してね */
#noteText
{
    /*
	left:2px;
	top:25px;
	width: 236px;
	height: 270px;
	*/
    
	position:absolute;

}

#note_bottom {
    height:50px;
    background-color:#FFFFFF;
}

/*/////////////////////////////////////////////////////////////
 StormCom Operationbord
//////////////////////////////////////////////////////////////*/
#stromOperationboard {

    position:absolute;
    width:100%;
    height:30px;
    
    color: #FFFFFF;
    background-color: #333333;
    /*text-align: center;*/
    font-size:14px;
    display:block;
    
}

#stromOperationboard #indexInfo {
    position:absolute;
    /*top:10px;*/
    top:11px;
    left:5px;
    font-size:14px;

    /* 1.14.0 HTML5 for PC*/
    background-color: rgba(51,51,51,0.5);
    padding-left:5px;
    padding-right:5px;

}

#stromOperationboard #time {
    position:absolute;
    /*top:10px;*/
    top:11px;
    right:5px;
    font-size:14px;
}

.js-slider{
    /*border:1px solid #FF0000;*/
    /*position: absolute;*/
    /*top:0px;
    left:0;
    width:100px;
   */
   height:10px;
   /*padding-bottom:10px;*/
}

.js-hitarea{

    position: absolute;
    /*top:0px;*/
    bottom:0;
    left:0;
    width:100px;
    height:60px;

/*
    background:#FF0000;
    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    opacity:0.3;
*/

    z-index:100;

    /* ※1.14.0 HTML5 */
    cursor:pointer;

}

.js-base{
    background:#666666;
    /*border:1px solid #aaa;*/

    border-top:1px solid #000000;
    /*border-bottom:1px solid #999999;*/
    
    position: absolute;
    top:0;
    left:0;
    width:100px;
    height:5px;
}

.js-progress{
    background:#3399FF;
    position: absolute;
    top:1px;
    left:0;
    width:0;
    height:5px;


    -webkit-box-shadow: 0px 0px 15px #3399FF;

}

.js-handle{
    background:#3399FF;
    position: absolute;
    top:1px;
    left:0;
    width:2px;
    height:5px;


    -webkit-box-shadow: 0px 0px 15px #3399FF;


    /*display:none;*/
}

.js-markarea{
    position: absolute;
    top:1px;
    left:0;
    width:100px;
    height:5px;
}

.js-mark{
    background:#000000;
    position: absolute;
    width:1px;
    height:5px;
}

/*/////////////////////////////////////////////////////////////
 StormCom Slide
//////////////////////////////////////////////////////////////*/
#stormSlide
{

    background-color:#333333;

    /* 1.13.0 */
    position: absolute;

}

#stormSlide #slideMask
{

    /* 1.15.0 */
    background-color: #000000;
    filter: alpha(opacity=0);
    opacity: 0;
    cursor: pointer;

}

/*----------------------------------------------------------------
 * 1.12.0
 * landscape スライドモード
----------------------------------------------------------------*/
#stormSlide #slidePrevBtn {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0px;
    left: 0px;

    /* 1.14.0 HTML5 for PC */
    background-color: #000000;
    filter: alpha(opacity=0);
    opacity: 0;
    cursor:pointer;

}

#stormSlide #slideNextBtn {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0px;
    right: 0px;

    /* 1.14.0 HTML5 for PC */
    background-color: #000000;
    filter: alpha(opacity=0);
    opacity: 0;
    cursor:pointer;

}

#slidePrevImageBtn {

    position: absolute;
    width:50px;
    height:50px;

    background-image: url(../images/navi/prevSlide.png);

    background-position:center center;
    background-repeat:no-repeat;
    background-size:50px 50px;

}

#slideNextImageBtn {

    position: absolute;
    width:50px;
    height:50px;

    background-image: url(../images/navi/nextSlide.png);

    background-position:center center;
    background-repeat:no-repeat;
    background-size:50px 50px;

}


/*----------------------------------------------------------------
 * 1.12.0
 * landscape
----------------------------------------------------------------*/
#landscape_header {
    position: absolute;
    top: 0;
    left: 0;
    height: 90px;
    width: 100%;
    display: none;

    background-color: rgba(0,0,0,0.5);
}

#landscape_footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 90px;
    width: 100%;
    display: none;

    background-color: rgba(0,0,0,0.5);
}

/*/////////////////////////////////////////////////////////////
 StormCom Telop
//////////////////////////////////////////////////////////////*/
/*
#stormTelop
{
}
*/

/*/////////////////////////////////////////////////////////////
gaeUserInputLayer
//////////////////////////////////////////////////////////////*/
#gaeUserInputLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10010;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
}

#userInputBg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #333333;
    display: block;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

#userInputMsgScroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#userInputMsg {
    font-size: 14px;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
    word-break: break-all;

}

#userInputText {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #000000;
    font-size: 14px;
}

#userInputSubmitBtnArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    vertical-align: middle;
}

#userInputSubmitBtn {
    color: #ffffff;
    padding: 6px 40px;
    font-size: 16px;
    vertical-align: middle;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.pushButtonClass {
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: white;
    border-top: 1px solid #fff;
    border-left: 1px solid #eee;
    border-right: 1px solid #777;
    border-bottom: 1px solid #666;
    /* basic */
    background: #aaa;
    background: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#999999));
    background: -moz-linear-gradient(top, #bbb, #999999);
    /* border-radius */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    /* box-shadow */
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 3px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 3px;
    box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 3px;
}

/* 1.14.0 HTML5 for PC */
.imgRollOver{
    cursor:pointer;
}

.naviRollOver {
    cursor:pointer;
}

.naviHover{
    background-color:#4165B1 !important;
}

.pointerCursor {
    cursor:pointer;
}

.indexHover{
    color: #000000 !important;
    background-color:#A0B2D8 !important;
}