@charset "utf-8";

 html {
     text-rendering: optimizeLegibility;
     font-size: 10px;
     height: 100%;
}
/* ドキュメント全体 */
 body {
     word-break: break-all;
     margin: 0px;
     font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
     font-size: 12px;
     line-height: 20px;
     background-color: #ffffff;
     height: 100%;
}
 a {
     color: #333333;
     text-decoration: under-line;
}
 a:hover {
     filter:alpha(opacity=50);
     -moz-opacity: 0.5;
     opacity: 0.5;
}
 header {
     box-sizing: border-box;
    /* padding: 5px 5px 0px 5px;
    */
     padding: 0.3% 0.2% 0.3% 0.3%;
     background: linear-gradient( #ffffff, #ffffff );
     margin: 0 auto 0 auto;
}
 .inner {
     margin: 0 auto 0 auto;
     color: #333333;
}
 header .inner {
     height: 60px;
     overflow: hidden;
     font-size: 10px;
     background-position: right center;
     background-repeat: no-repeat;
     background-size: conain;
     margin: 0px auto 0 auto;
     padding: 5px 5px 5px 5px;
     background-color: #ffffff;
     border: solid 1px #dddddd;
 }
 header h1 {
     font-size: 24px;
     font-weight: bold;
     text-align: left;
     margin: 10px 0 5px 0;
     padding: 0px;
     border-bottom: none;
}
 header div {
     font-size: 12px;
}

.header_link {
    top: 0px;
    right: 0px;
    width: 300px;
    height: 90px;
    margin: 0 auto 0 auto;
    cursor: pointer;
    position: absolute;
}

#logo_image {
    display: none;
    position: absolute;
}

#menu {
    display: none;
}
 .container {
     opacity: 0.0;
     height: auto;
     margin: 0 auto 0 auto;
     padding: 0.1%;
     overflow: hidden;
     background: linear-gradient( #ffffff, #ffffff );
}
 .main_contents {
    position: fixed;
     float: left;
     height: auto;
     overflow: hidden;
     width: 59.4%;
     min-height: 300px;
     color: #dddddd;
     margin: 0 0.3% 0 0px;
}
 .slide {
     display: block;
     background-color: #ffffff;
     background-position: center middle;
     background-size: contain;
     background-repeat: no-repeat;
}
.info_title {
	background: #eeeeee;
    font-size: 12px;
    font-weight: bold;
    color: #333333;
    cursor: pointer;
    margin: 4px 0px 0px 5px;
    padding: 10px 10px 10px 20px;
    border: solid 1px #dddddd;
    border-bottom: none;
    background-image: url( "../image/info_close.png" );
    background-position: left;
    background-repeat: no-repeat;
}

.info_title.open {
    background-image: url( "../image/info_open.png" );
}

 .information {
	background: #ffffff;
     padding: 5px;
     font-size: 12px;
     color: #000000;
     padding: 10px;
     margin: 0px 0px 0px 5px;
     border: solid 1px #dddddd;
     border-top: none;
     height: auto;
     overflow: scroll;
}
 .main_contents .control {
	background: #000000;
     text-align: center;
     padding: 10px;
}
 .main_contents .control .progressbar {
     margin: 10px 30px 10px 30px;
     background: #333333;
     height: 5px;
     border: none;
}
 .main_contents .control .progressbar_red {
     background: #aa0000;
     width: 50px;
     height: 5px;
     border: none;
}
 .main_contents .control img {
     margin: 0 20px 0 20px;
}
 #main_frame {
     height: auto;
     overflow: hidden;
}
 #side_frame {
     height: auto;
     overflow: hidden;
}
 .video {
     height: auto;
     overflow: hidden;
     background: #000000;
}
 #my_video_1 {
	border: solid 1px #dddddd;
     border-bottom: none;
}
 #my_video_2 {
	border: solid 1px #dddddd;
     border-bottom: none;
}
 .sidebar {
    position: fixed;
     float: left;
     width: 39.8%;
     min-height: 100px;
     margin: 0 0.2% 0 0.2%;
}
 .sidebar video {
     margin: 0px;
     padding: 0px;
     background: #000000;
}
 #my_video_1 {
     margin: 0 auto 0 auto;
     overflow: hidden;
     height: auto;
}
 #speak1 {
     display: none;
     position: relative;
     background-color: rgba( 0, 0, 0, 0.5 );
     color: #ffffff;
     font-size: 24px;
     top: -84px;
     height: 64px;
     padding: 10px;
     line-height: 34px;
}
 #speak2 {
     display: none;
     color: #ffffff;
     font-size: 18px;
     height: 28px;
     padding: 10px;
     line-height: 18px;
}
 .caption {
	background: #000000;
     margin: -6px 0 0px 0;
     font-size: 18px;
     font-weight: bold;
     text-align: center;
     padding: 10px;
     color: #ffffff;
     border: solid 1px #dddddd;
     border-top: none;
     border-right: solid 1px #000000;
     box-sizing: border-box;
}
 #caption1 {
     display: block;
}
 #caption2 {
     display: none;
     height: 50px;
}
 .sidebar .link {
	background: #eeeeee;
     padding: 10px 10px 10px 10px;
     margin: 0px 0px 0px 5px;
     border: solid 1px #dddddd;
     height: auto;
     overflow: hidden;
}
.sidebar .link img {
    float: left;
    vertical-align: top;
    margin: 5px 0 0 0;
    display: inline-block;
}
 .sidebar .link a {
    /* background-image: url(https://www.net-presentations.com/image/pdf.svg);
     background-repeat: no-repeat;
     background-position: center left;
     */
     float: left;
     overflow: hidden;
     height: auto;
     color: #222222;
     display: inline-block;
     padding: 0 0 1px 3px;
    }
 .sidebar .link a div {
     width: 330px;
     display: inline-block;
     margin: 0 0 0 5px;
}
 .sidebar .index {
     max-height: 415px;
     overflow-y: scroll;
     background: #ffffff;
     border: solid 1px #aaaaaa;
     box-sizing: border-box;
}
 .sidebar .index a {
     display: block;
     font-size: 14px;
     padding: 10px 5px 10px 5px;
     border-bottom: solid 1px #dddddd;
     text-decoration: none;
}
 .sidebar .element_contents {
     width: 380px;
     min-height: 100px;
     border: solid 1px #bcbcbc;
     background-color: #ffffff;
}
 .space10 {
     height: 10px;
     clear: both;
}
 .space20 {
     height: 20px;
     clear: both;
}
 .border {
     border-top: solid 1px #aaaaaa;
}
 .right {
     text-align: right;
}
 .center {
     text-align: center;
}
 .clear {
     clear: both;
}
 .bold {
     font-weight: bold;
}
 .small {
     font-size: 9px;
}
 .large {
     font-size: 14px;
}
 .huge {
     font-size: 18px;
}
 .align_right {
     text-align: right;
}
 .progress_bar {
     width: 100%;
     height: 30px;
     background: linear-gradient( #ffffff, #eeeeee );
     overflow: hidden;
     cursor: pointer;
     border: solid 1px #dddddd;
     border-top: none;
     border-bottom: none;
     box-sizing: border-box;
}
 .seek_bar {
     height: 10px;
     margin: 10px 10px 10px 10px;
     background: linear-gradient( #666666, #aaaaaa );
    }
 .playing_bar {
     width: 0%;
     height: 10px;
     margin: 0px 0px 0px 0px;
     background: linear-gradient( #00aaff, #0000dd );
    }
 .controller_bar {
     width: 100%;
     height: 60px;
     background: linear-gradient( #eeeeee, #dddddd );
     text-align: center;
     overflow: hidden;
     margin: 0 0 5px 0;
     border: solid 1px #dddddd;
     border-top: none;
     box-sizing: border-box;
}
 .controll {
     width: 97%;
     margin: 0 auto 0 auto;
}
 .player_time {
     float: left;
     color: #333333;
     font-weight: bold;
     font-size: 18px;
     margin: 5px 0 20px 0px;
     min-width: 120px;
     width: 20%;
     text-align: left;
}
 .controll_button {
     float: left;
     min-width: 300px;
     text-align: center;
     margin: 0 0px 0 0px;
     width: 60%;
}
 .controll_button a {
     display: inline-block;
     color: #333333;
     text-align: center;
     font-size: 8px;
     text-decoration: none;
     max-width: 40px;
     height: 52px;
     line-height: 12px;
     margin: 0 0 20px 0;
}
 .controll_button a img {
     display: block;
}
 .controll_button .space {
     display: inline-block;
     width: 40px;
     height: 40px;
}
 .slide_page {
     float: left;
     color: #333333;
     font-weight: bold;
     font-size: 18px;
     margin: 5px 0 20px 0px;
     width: 20%;
     text-align: right;
}
.page_close {
    display: none;
}
 .page_list {
    position: fixed;
     width: 50%;
     overflow-y: scroll;
     border: solid 1px #dddddd;
    }
 .link_frame {
    position: fixed;
     width: 49%;
     height: auto;
     overflow: hidden;
}
 #slide_thumbnail {
     display: none;
     position: absolute;
     left: 0px;
     top: 0px;
     width: 330px;
     height: 280px;
     background: linear-gradient( #ffffff, #dddddd );
     border: solid 1px #aaaaaa;
    border-radius: 5px;
    z-index: 5000;
}
 #slide_thumbnail img {
     width: 320px;
     height: 240px;
     margin: 5px 5px 0px 5px;
}
 .pagelist_element {
}
 .pagelist_element a {
     display: block;
     color: #222222;
     text-decoration: none;
     padding: 5px 5px 5px 5px;
     background: linear-gradient( #fefefe, #fefefe );
     border-bottom: solid 1px #dddddd;
}
 .pagelist_element.on a {
     display: block;
     color: #ffffff;
     text-decoration: none;
     padding: 5px 5px 5px 5px;
     background: linear-gradient( #0077ff, #0077ff );
     border-bottom: solid 1px #0000aa;
}
 #slide_thumbnail_title {
     font-size: 10px;
     width: 320px;
     height: 20px;
     overflow: hidden;
     text-align: center;
     color: #333333;
     margin: 0px 5px 10px 5px;
     line-height: 10px;
}
 .focus_button {
     opacity: 0.5;
}
 #thumbnail_list {
     display: none;
     margin: 10px 0 0 0;
     padding: 0px 0 0px 0;
     overflow-x: scroll;
     overflow-y: hidden;
     height: 180px;
}
 #thumbnails {
     margin: 0 0 10px 0;
     height: 140px;
}
 #thumbnail_list a {
     height: auto;
     overflow: hidden;
}
 #thumbnail_list a .image {
     display: block;
     float: left;
     height: 120px;
     width: 160px;
     overflow: hidden;
     background-size: contain;
     margin: 30px 3px 2px 3px;
     border: solid 3px #eeeeee;
     opacity: 0.8;
}
 #thumbnail_list a .image.focus {
	border: solid 3px #0077ff;
	 opacity: 1.0;
     zoom: 120%;
     margin: 0px 0 0 0;
}
 #thumbnail_list a .title {
     height: 10px;
     width: 160px;
     background: rgba(0,0,0,0.5);
     color: #ffffff;
     font-size: 10px;
     line-height: 10px;
     overflow: hidden;
     margin: 108px 0 0 0;
     padding: 2px;
}
 #typetext1 {
     display: none;
     background: linear-gradient( #ffffff, #eeeeee );
     color: #333333;
     box-sizing: border-box;
     padding: 20px 50px 20px 50px;
     font-size: 14px;
     line-height: 20px;
     border: solid 1px #333333;
     overflow-y: scroll;
}
 #typetext2 {
     display: none;
     background: linear-gradient( #ffffff, #eeeeee );
     color: #333333;
     box-sizing: border-box;
     padding: 20px 50px 20px 50px;
     font-size: 24px;
     line-height: 32px;
     border: solid 1px #333333;
     overflow-y: scroll;
}

.no_pc {
    display: none;
}

#ipad_message {
    display: none;
    color: #666666;
    font-size: 48px;
    margin: 200px auto 0 auto;
    text-align: center;
}

#debug {
    display: none;
}

#pagelist_background {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.5
}

#scrollbar {
    position: fixed;
    width: 20px;
    height: 100px;
    right: 0px;
    top: 0px;
    z-index: 20000;
    overflow-y: scroll;
}

#scrollbar_inner {
    width: 10px;
    height: 1000px;
}