@charset "UTF-8";

/*-----------  TOP PAGE  -----------*/

header, section, footer, aside, nav, article, figure {display: block;}

body {
    height:100%;
    overflow:visible;
    background-color: #CCC;
    margin:0;
    padding:0;
/*
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3",
                "メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
*/
                font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',
 Meiryo, sans-serif;
     }
#main {
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    width:1050px;
    background-color: #474747;
    }

#kiyaku {
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    width:1050px;
    background-color: #474747;
    height:730px;
    }
#kiyaku_content{
    margin:50px;
    padding:50px;
    background-color:white;
    height:460px;
    overflow: auto;
    line-height:2;
}
#kiyaku_content > ol > li{
    margin-bottom:15px;
}
#kiyaku_content > button{
    margin:0 auto;
    background-color:#CFF;
    float:right;
    padding:10px;
    font-weight:bold;
}
.float-clear{
    clear:both;
}
.float-left{
    float:left;
}
.float-right{
    float:right;
}
.caution{
    color:red;
    font-weight:bold;
}


/*-----------  HEADER  -----------*/

nav{
    padding-top:20px;
    display:flexbox;
}
#notation{
    display:none;
    color:red;
}
#site-title{
    font-size:28px;
    font-weight:bold;
    padding:0;
    margin:0;
    margin-left:50px;
    width:650px;
    height:70px;
    line-height: 30px;
    text-shadow: 0px 2px 3px #666;
}
#site-subtitle{
    font-size:12px;
    line-height: 20px;
    text-shadow: none;
    color:#999;
}
#tab div{
    float: left;
    cursor: pointer;
    height:70px;
    width:50px;
    line-height: 70px;
    font-size:36px;
    margin-left:10px;
    box-shadow: 6px 0px 4px -2px #222;
}
#tab img{
    height:70px;
}
#tab #vol1{
    margin-left:0px;
}
#tab > #etc{
    height:70px;
    width:60px;
    padding:0px;
    background-color:ivory;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    box-shadow: 6px 0px 4px -2px #222;
    cursor:pointer;
}
.disnon {
    display: none;
}
#script{
    height:70px;
    width:60px;
    padding:0px;
    background-color:#066;
    color:white;
    text-align:center;
    box-shadow: 6px 0px 4px -2px #222;
    line-height:35px;
    font-size:14px;
    float:left;
    margin-left:10px;
}
#script > a:link, #script > a:active, #script > a:hover, #script > a:visited{
    text-decoration:none;
    color:white;
}

#showquickguide{
    background-color:navy;
    color:white;
    width:60px;
    height:60px;
    position:relative;
    float:left;
    top:0;
    left:10px;
    box-shadow: 6px 0px 4px -2px #222;
    line-height:70px;
    font-size:50px;
    text-align:center;
    border-radius:45px;
    cursor:pointer;
}


/*--------- TITLE ---------*/

.content_wrap {
    clear: left;
    height: 650px;
    width: 1050px;
    margin:0 auto;
    padding:0px;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}
#vol1-content{
    border-top:solid 7px #cc2288 ;
}
#vol2-content{
    border-top:solid 7px #1C91CC ;
}
#vol3-content{
    border-top:solid 7px #FFD700 ;
}
#etc-content{
    border-top:solid 7px ivory ;
    color:white;
}


.title_of_volume{
    margin: 0px;
    margin-top: 5px;
    padding-left:50px;
    font-size:larger;
    color:white;
    text-shadow:1px 1px black;
    position: relative;
    height:30px;
    line-height:30px;
    text-align:left;
    text-transform: capitalize;

}

.title_of_volume1 {
    background: -webkit-gradient(linear, left top, right top, from(#cc2288), to(#FFF));
}
.title_of_volume2 {
    background: -webkit-gradient(linear, left top, right top, from(#1C91CC), to(#FFF));
}
.title_of_volume3 {
    background: -webkit-gradient(linear, left top, right top, from(#FFD700), to(#FFF));
    text-shadow:2px 1px 1px black;
}
.title_of_etc {
    background: -webkit-gradient(linear, left top, right top, from(#FFF), to(#FFF));
    text-shadow:none;
    color:#014D69;
    font-weight:bold;
}

#quickguide{
    position:absolute;
    top:90px;
    margin:0 auto;
    width:1048px;
    height:auto;
    display:none;
}
#quickguidelayer{
    position: absolute;
    top:210px;
    left: 0px;
    width:1048px;
    height:500px;
    margin:0 auto;
    background: -webkit-gradient(linear, left top, left bottom,
            from(rgba(71,71,71,0.5)),
            to(#474747));
}
#quickguidelayer > img#usage{
    position: absolute;
    bottom: 0px;
    right:0px;
    width:460px;
    height:450px;


}

#quickguide > img#arrow1, #quickguide > img#arrow2, #quickguide > img#arrow3 {
    position: absolute;
    top: 0px;
    left: 650px;
    width:272px;
    background-color:transparent;
    opacity: none;
    -webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;

}
@-webkit-keyframes blink{
    0% {opacity:0; color:#827400;}
    100% {opacity:1; color:#000;}
}
@-moz-keyframes blink{
    0% {opacity:0; color:#827400;}
    100% {opacity:1; color:#000;}
}
@keyframes blink{
    0% {opacity:0; color:#827400;}
    100% {opacity:1; color:#000;}
}
#quickguide > img#arrow1{   top: 0px;   left: 650px;    width:272px;}
#quickguide > img#arrow2{   top: 130px; left: 80px;    width:113px;}
#quickguide > img#arrow3{   top: 120px; left: 500px;    width:154px;}



/*-----------  FOOTER  -----------*/

footer{
    width:1048px;
    border-top:solid #AAAAAA 1px;
    box-shadow: 1px 1px 0  #fff;
        -webkit-box-shadow: 1px 1px 0  #fff;
        -moz-box-shadow: 1px 1px 0  #fff;
    box-shadow:inset 1px 1px 1px  #222;
        -webkit-box-shadow:inset 1px 1px 1px  #222;
        -moz-box-shadow:inset 1px 1px 1px  #222;
    color:white;
    font-size:small;
    background-color: #474747;
}
#informations{
    height:50px;
    display: box;
    box-orient: horizontal;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    width:950px;
    margin:0 auto;
 }
#link_contact, #link_kiyaku{
    cursor:pointer;
}
#contact_dialog{
    text-align:center;
}
#link_kiyaku_dialog{
    line-height:200%;
}

#informations > a:link, #informations > a:hover, #informations > a:active, #informations > a:visited{
    color:white;
    text-decoration:none;
}
/*#banners{
    margin:0 auto;
    display: flexbox;
}
#banners a{
    margin:0;
    padding:0;
    float:left;
}

.banner{
    display: flexbox;
}

.banner_data{
    margin-left:20px;
}
*/
#link>.column{
    display: -webkit-box;
    display: -moz-box;
    margin-bottom:10px;
}
.column>div>dl{
    width:600px;
}
#link>div>div>a>img{
    max-width:250px;
    max-height:39px;
}
#link dt{
    font-weight:bold;
    font-size:16px;
}
#link dd{
    font-size:14px;
    margin-left:1em;
}
#link dd:before{
    content:"...";
}
/*#link_table > tbody >tr > td{
    height:70px;
}
#link_table > tbody >tr > td > dt{
    font-weight:bold;
    font-size:16px;
}
#link_table > tbody >tr > td > dd{
    font-size:14px;
}
#link_table > tbody >tr > td > dd:before{
    content:"...";
}
#link_table > tbody >tr > td > a > img{
    max-width:250px;
    max-height:39px;
}
*/
/*------HOW TO USE------------*/

#howtouse{
    overflow:auto;
    height:540px;
    width:90%;
    margin: 0 auto;
    margin-top: 50px;
    padding:10px;
    box-shadow:inset 5px 5px 10px #CCC;
    box-shadow:outset 1px 1px 1px #333;
    border:1px solid #333;
    color:#333;
    font-size: 16px;
    line-height:1.5;
    background-color:ivory;
    text-align:left;
}
#usage{
    overflow:hidden;
}
#howtouse > div > p, li {
    padding-left:15px;
    font-size:14px;
}
#operation > * > li {
    margin-bottom:15px;
}
#howtouse > h1 {
    color:#014D69;
    font-size:24px;
}
#howtouse >div> h2 {
    border-radius: 20px;
    margin: 15px;
    padding-left:10px;
    font-size:larger;
    background-color:#1888BD;
    background: -webkit-gradient(linear, left top, right top, from(#069), to(#FFF));
    color:white;
    text-shadow:1px 1px black;
}
#howtouse >div> h3 {
    padding-left:15px;
    color:#014D69;
    font-size:20;
}
#howtouse >div>  p > a:link, #howtouse > p > a:visited, #howtouse > p > a:active, #howtouse > p > a:hover {
    color:black;
}
#howtouse >div > div {
    margin-left:50px;
}

#config > tbody > *{
    padding-right:30px;
    padding-left:30px;
    vertical-align: top;
}
#config>tbody>tr>th{
    border:solid 1px 0px 1px 1px black;
}

#config>tbody>tr>td{
    border:solid 1px 1px 0 1px black;
}

div#guidemenu >div{
    margin:5px;
    font-size:14px;
    width:100px;
    background-color: #1888BD;
    color: white;
    text-shadow: 1px 1px black;
    height:20px;
    line-height: 20px;
    padding:3px;
    text-align: center;
    }
div#guidemenu >div:hover{
    background-color: #FFD700;
}
div#guidemenu{
    padding:0px;
    line-height:1;
    height:50px;
    z-index:10;
    display:-webkit-box;
    border-bottom:1px #c0c0c0 solid;
    margin-bottom:30px;
    margin-right:100px;
}

.selectedguidemenu{
    border-bottom:10px solid #cc2288;
}
#lang-change{
    padding:3px;
    position:relative;
    font-size:14px;
    color: white;
    text-shadow: 1px 1px black;
    top:-75px;
    right:-700px;
    line-height:20px;
    height:20px;
    background-color:#f08080;
    width:180px;
    text-align:center;
}
#lang-change:hover{
    background-color:#b22222;
}
#lang-change:active{
    position:relative;
    top:-73px;
}

#howtouse .jp{
    display:inline;
}
#howtouse .en{
    display:none;
}


#contact>div{
    margin-top:100px;
    text-align:center;
}
#glayLayer_footer {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,5);
    opacity: 0.7;
    z-index:3;
    cursor:pointer;
}


/*--------- CONTENTS ---------*/


.lessons{
    margin:0;
    padding:20px 50px 0 50px;
    background-color:#474747;
}

.eachLesson{
    height:100px;
    width:450px;
    margin:0px;
    margin-bottom:30px;
    padding:5px;
    border: 1px solid  #AAAAAA;
    box-shadow: 1px 1px 0  #fff;
        -webkit-box-shadow: 1px 1px 0  #fff;
        -moz-box-shadow: 1px 1px 0  #fff;
    box-shadow:inset 1px 1px 1px  #222;
        -webkit-box-shadow:inset 1px 1px 1px  #222;
        -moz-box-shadow:inset 1px 1px 1px  #222;
    background-color:#505050;
    display:-moz-box;
    display:-webkit-box;
    display:flexbox;
    line-height:33px;
}
.eachLesson > .lesson-info{
    width:150px;
}
.eachLesson > .lesson-info> .LessonTitle{
    word-wrap: break-word;
    color:snowwhite;
    text-shadow: 0px 2px 3px #333;
}
.eachLesson > .lesson-info> .LessonTitle > .jp{
    font-size:14px;
}
.eachLesson > .lesson-info> .LessonTitle > .eng{
    font-size:12px;
}
.eachLesson > .lesson-info> .LessonTitle > .twoline{
    line-height:15px;
    height:33px;
}
.eachLesson > .lesson-info> .LessonNumber{
    width:70px;
    margin:0 auto;
    text-align:center;
    text-shadow: 1px 3px 3px #333;
    font-size:28px;
    font-weight:bold;
    font-family: 'Cookie', cursive;
    word-spacing:0px;
    color:snowwhite;
}
.eachLesson > .Thumbnail{
    height:100px;
    width:133px;
    margin-left:10px;
    margin-right:10px;
}
.eachLesson > .Thumbnail img{
    height:100px;
    width:133px;
}
.eachLesson > .video-menu {
    height:100px;
    width:130px;
    margin:0;
    padding:0;
}
.eachLesson > .video-menu > li{
    height:28px;
    margin:5px;
    padding:1px;
    border-radius: 5px;
        -moz-box-shadow: 1px 1px 2px rgba(000,000,000,0.8);
        -webkit-box-shadow: 1px 1px 2px rgba(000,000,000,0.8);
    line-height:14px;
    font-size:14px;
    color:black;
    list-style:none;
    cursor:pointer;
}
.eachLesson > .video-menu li:nth-of-type(1) {
    background: -moz-linear-gradient(top,#f5f5f5 0%,#FCC);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FCC));
}
.eachLesson > .video-menu li:nth-of-type(2) {
    background: -moz-linear-gradient(top,#f5f5f5 0%,#FFC);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFC));
}
.eachLesson > .video-menu li:nth-of-type(3) {
    background: -moz-linear-gradient(top,#f5f5f5 0%,#CCC);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
}
.eachLesson > .video-menu > li:visited, .eachLesson > .video-menu > li:hover, .eachLesson > .video-menu > li:active, .eachLesson > .video-menu > li:link {
    text-decoration:none;
    color:black;
    text-shadow:-0.5px -0.5px 1px rgba(0, 0, 0, 0.4), 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.eachLesson > .video-menu > li:hover {
    -moz-box-shadow:2px 2px 2px rgba(000,000,000,0.8), 0px 0px 20px 10px #ededf2;
    -webkit-box-shadow:2px 2px 2px rgba(000,000,000,0.8), 0px 0px 20px 10px #ededf2 ;
    font-weight:bolder;
}
.eachLesson > .video-menu > li:active {
    font-weight:bolder;
    background: -moz-linear-gradient(top,#FFF 0%,#cccccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#cccccc));
    -moz-box-shadow: inset 2px 2px 1px #9fb7d4, 0px 0px 20px 10px #ffe97f;
    -webkit-box-shadow: inset 2px 2px 1px #9fb7d4, 0px 0px 20px 10px #ffe97f;
}


/*-------------- video player --------------*/

#glayLayer {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,5);
    opacity: 0.7;
    z-index:3;
    cursor:pointer;
}
#overLayer {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    height:400px;
    width: 733px;
    background-color: ivory;
    overflow:auto;
    font-size: normal;
    padding:15px;
    line-height:1.5;
    text-align:left;
    margin: 15px;
    z-index:4;
    cursor:auto;
}
#close{
    position:absolute;
    right:5px;
    bottom:5px;
    padding:5px;
    background-color:#333;
    color:white;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    z-index:5;
    cursor:pointer;
}
#videoContainer{
    position:fixed;
    width:733px;
}
#monitor{
    float:left;
    width:533px;
    height:400px;
    background-color:black;
}
#videoPlayer{
    width:533px;
    height:400px;
    text-align:center;
}
#Controller{
    float:left;
    width:200px;
    background: -moz-linear-gradient(top,#FFF 0%,#CCC);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
    height:400px;
    cursor:move;
}
#Controller_menu_head{
    background-color:gray;
    text-align:center;
    color:white;
}
#Controller> li >ul {
    float:left;
    width:50px;
}
.caption_menu{
    padding:20px;
}
.caption_menu form label{
    width:130px;
    display: block;
    padding:5px;
    color:white;
    text-shadow: inset 0px 2px 3px #666;
    font-weight:bold;
    background: -moz-linear-gradient(top,#999 0%,#333);
    background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#333));
    -moz-box-shadow: 1px 1px 2px rgba(000,000,000,0.8);
    -webkit-box-shadow: 1px 1px 2px rgba(000,000,000,0.8);
    cursor:pointer;
}
.caption_menu form label:hover{
    -moz-box-shadow:2px 2px 2px rgba(000,000,000,0.8), 0px 0px 20px 10px white;
    -webkit-box-shadow:2px 2px 2px rgba(000,000,000,0.8), 0px 0px 20px 10px white ;
}
.caption_menu form label:active{
	position:relative;
    top:1px;
}
#DC_menu{
    margin:10px;
    width:120px;
}
.ui-menu, .ui-widget-content {
    z-index:7;
}
#DC_menu_head{
    font:10px;
    margin:10px;
}
#DC_menu > li > a:before{
    content: "Situation ";
    width:120px;
}
#DC_menu > li > ul > li{
    width:50px;
}

#showScript{
    margin:20px;
    padding:5px;
    font-weight:bold;
    color:#333333;
    width:120px;
    background: -moz-linear-gradient(top,#f5f5f5 0%,#99F);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#99F));
    -moz-box-shadow: 1px 1px 2px rgba(000,000,000,0.8);
    -webkit-box-shadow: 1px 1px 2px rgba(000,000,000,0.8);
	cursor:pointer;
    text-align:center;
}
#showScript:active{
	position:relative;
    top:1px;
}
#showScript:hover{
    -moz-box-shadow:2px 2px 2px rgba(000,000,000,0.8), 0px 0px 20px 10px white;
    -webkit-box-shadow:2px 2px 2px rgba(000,000,000,0.8), 0px 0px 20px 10px white ;
}

#ScriptsArea > div > dd {
    line-height:2;

}