@charset:"UTF-8";
/* ============================================
   Last Modified 2021.11.15
   Script Version Ver2.07f
============================================ */
html, body
{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}
html
{
  touch-action: manipulation;
}
body
{
    padding: 0;
    margin: 0;
    overflow: hidden;
}
body, section.html_page
{
    background-color: #888;
    padding: 0;
    margin: 0;
    overflow: visible;
    text-align: left;
    vertical-align: middle;
    font-family: "UD デジタル 教科書体 NP-R", "UD Digi Kyokasho NP-R", "Meiryo UI" , Meiryo, "Hiragino Kaku Gothic Pro";
    /*
    overflow:hidden;
    display:inline-block;
    min-width:100%;
    */
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}
section.html_page:not(.vertical_section)
{
    overflow: visible;
}
mainArea
{
    text-align: left;
}
*
{
    /*
     -ms-touch-action:none;
     touch-action:none;
    */
}
/* ================================================================================ */
table.MS
{
    width: 100%;
    height: 100%;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}
table.MS td
{
    text-align: center;
    vertical-align: middle;
}
table.MS td table
{
    background-color: #000;
    border-style: dashed;
    border: dashed 5px #FF0;
    border-spacing: 0;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    -webkit-box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.7);
}
table.MS td table td
{
    font-size: 16px;
    font-weight: bold;
    color: Red;
    padding: 1em;
    background-color: #FFF;
}
table.MS td table td a
{
    color: Red;
}
span.ldmk
{
    display: inline-block;
    width: 20px;
    height: 20px;
    border: solid 1px #FFF;
    margin: 2px;
    background-color: #040;
}
/* ================================================================================ */
@font-face {
    font-family: 'SH5';
    src: url('sh5.woff') format('woff'),url('sh5.ttf') format('truetype');
}
/* ================================================================================ */
table .overlapArea
{
    font-family: "メイリオ" , Meiryo, "Hiragino Kaku Gothic Pro";
    position: absolute;
    left: 0;
    top: 0;
    background-color: RGBa(0,0,0,0.2);
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;
    border-collapse: collapse;
    border: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}
tr.overlapArea
{
    margin: 0;
    padding: 0;
}
td.overlapArea
{
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    z-index:999;
}
table.panelFrame
{
    margin: 0 auto;
    border-radius: 10px;
    border-collapse: collapse;
    border: none;
    white-space: nowrap;
    overflow: hidden;
    -webkit-box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
tr.panelRow1
{
    height: 24px;
    font-size: 20px;
    line-height: 20px;
    background-color: #DDD;
}
tr.panelRow3
{
    height: 18px;
    font-size: 12px;
    line-height: 12px;
    background-color: #DDD;
}
tr.panelRow1
{
    background-image: -ms-linear-gradient(top, #FFF 10%, #DDD 40%);
    background-image: -webkit-linear-gradient(top, #FFF 10%, #DDD 40%);
    background-image: linear-gradient(top, #FFF 10%, #DDD 40%);
}
tr.panelRow3
{
    background-image: -ms-linear-gradient(top, #DDD 75%, #AAA 90%);
    background-image: -webkit-linear-gradient(top, #DDD 75%, #AAA 90%);
    background-image: linear-gradient(top, #DDD 75%, #AAA 90%);
}
td.panelHeader, td.panelClose, td.panelFooter
{
    padding: 4px 8px;
    margin: 0;
    vertical-align: middle;
}
td.panelHeader
{
    text-align: left;
    text-shadow: 1px 1px 2px #FFF;
}
td.panelClose
{
    text-align: right;
    border-radius: 0px;
}
span.panelClose
{
    font-size: 20px;
    text-align: center;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: solid 1px #888;
    cursor: pointer;
    border-radius: 20px;
    color: #666;
    text-shadow: 0px -1px 1px #FFF;
    background: -ms-radial-gradient(7px 7px, cover, #FFF 0%, #FFF 50%, #888 70%);
    background: -webkit-radial-gradient(7px 7px, cover, #FFF 0%, #FFF 50%, #888 70%);
    background: radial-gradient(7px 7px, cover, #FFF 0%, #FFF 50%, #888 70%);
}

/* ================================================================================ */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* コントロールパネル */
/*
table#controlPanel
{
    width:600px;
}
td#controlArea
{
    width:600px;
}
*/
#controlArea
{
    white-space: nowrap;
    overflow: hidden;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}
.toolBarBack
{
    background-image:-webkit-linear-gradient(top, #666 10%, #444 40%, #222 80%, #000 120%);
    background-image:-moz-linear-gradient(top, #666 10%, #444 40%, #222 80%, #000 120%);
    background-image:-ms-linear-gradient(top, #666 10%, #444 40%, #222 80%, #000 120%);
}
div#controlArea span
{
    font-family: SH5;
}
/* -- PlayControl Button Color -- */
stop#lgrad_H_c1{stop-color: #00FF00;}
stop#lgrad_H_c2{stop-color: #004000;}
stop#lgrad_V_c1{stop-color: #00E0E0;}
stop#lgrad_V_c2{stop-color: #004040;}

div#controlArea.vertical_mode g.horizontal_mode
{
    display: none;
    /*fill-opacity: 0 !important;*/
}

div#controlArea:not(.vertical_mode) g.vertical_mode
{
    display: none;
    /*fill-opacity: 0 !important;*/
}

body.repeatFrace path.repeat
{
    display: inline;
}
body:not(.repeatFrace) path.repeat
{
    display: none;
}

div#controlArea.vertical_mode path.play_control
{
    fill:url(#lgrad_V) !important;
}

div#controlArea:not(.vertical_mode) path.play_control
{
    fill:url(#lgrad_H) !important;
}

.buttonS, .buttonL, .buttonM, .buttonML, .buttonSM, .buttonLM, .buttonMR, .buttonMS
{
    display: inline-block;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid #000;
    font-family: SH5;
    line-height: 1em;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    margin: 2px;
    cursor: pointer;
    color: #000;
    background-color: #CCC;
    background: -ms-radial-gradient(50% -20%, circle cover, #FFF 10%, #EEE 40%, #666 80%, #AAA 120%);
    background: -webkit-radial-gradient(50% -20%, circle cover, #FFF 10%, #EEE 40%, #666 80%, #AAA 120%);
    background: radial-gradient(50% -20%, circle cover, #FFF 10%, #EEE 40%, #666 80%, #AAA 120%);
}
.buttonMR1, .buttonMR2, .buttonMR3
{
    display: inline-block;
    border: 1px solid #000;
    font-family: SH5;
    line-height: 1em;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    margin: 0px;
    cursor: pointer;
    color: #000;
    background-color: #CCC;
    background: -ms-radial-gradient(50% -20%, circle cover, #FFF 10%, #EEE 40%, #666 80%, #AAA 120%);
    background: -webkit-radial-gradient(50% -20%, circle cover, #FFF 10%, #EEE 40%, #666 80%, #AAA 120%);
    background: radial-gradient(50% -20%, circle cover, #FFF 10%, #EEE 40%, #666 80%, #AAA 120%);
}

.buttonLabel
{
    padding: 4px 0 0 0;
    display: inline-block;
    line-height: 8px;
    font-size: 10px;
    overflow: hidden;
}
div#controlArea .buttonSeparator
{
    background-image:none;
}

.buttonS:hover, .buttonL:hover
{
    color: #FD0;
    background-color: #AFA;
    text-shadow: -1px -1px 3px #080;
    background: -ms-radial-gradient(50% -20%, circle cover, #8F8 10%, #6E6 40%, #464 80%, #7B7 120%);
    background: -webkit-radial-gradient(50% -20%, circle cover, #8F8 10%, #6E6 40%, #464 80%, #7B7 120%);
    background: radial-gradient(50% -20%, circle cover, #8F8 10%, #6E6 40%, #464 80%, #7B7 120%);
}
.buttonS, .buttonSM
{
    width:       54px;
    height:      54px;
    font-size:   40px;
    line-height: 54px;
}
.buttonL, .buttonLM
{
    width:       64px;
    height:      64px;
    font-size:   50px;
    line-height: 64px;
}

.buttonM
{
    /*border-radius:22px;*/
    width:       44px;
    height:      44px;
    font-size:   32px;
    line-height: 44px;
    margin:      1px;
}

span[class^='buttonM'] > svg
{
    width: 40px;
    height: 40px;
    padding:0;
    margin:0;
}

.buttonMR1,.buttonMR2,.buttonMR3
{
    width: 44px;
    height: 44px;
    font-size: 32px;
    line-height: 44px;
    margin: 0px;
}

.buttonM,.buttonMR1,.buttonMR2,.buttonMR3
{
    width: 54px;
    height: 54px;
    font-size: 40px;
    line-height: 54px;
}

.buttonMR1,.buttonMR3
{
    width: 46px;
}
.buttonMR2
{
    width: 46px;
}

.btnActive {
    color: #000 !important;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.5) inset;
    text-shadow: 0px 0px 4px 2px rgba(255,255,255,0.5);
    background: #bfd255 !important;
    background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%) !important;
    background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%) !important;
    background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ) !important;
}

div#controlArea, div.tabletControl
{
    padding:2px;
    background-image:-webkit-linear-gradient(top, #666 10%, #444 40%, #222 80%, #000 120%);
    background-image:   -moz-linear-gradient(top, #666 10%, #444 40%, #222 80%, #000 120%);
    background-image:    -ms-linear-gradient(top, #666 10%, #444 40%, #222 80%, #000 120%);
}
div#controlArea span, div#controlArea input, div.tabletControl span
{
    background-image:-webkit-linear-gradient(top, #FFF 10%, #EEE 40%, #AAA 80%, #DDD 120%);
    background-image:-moz-linear-gradient(   top, #FFF 10%, #EEE 40%, #AAA 80%, #DDD 120%);
    background-image:-ms-linear-gradient(    top, #FFF 10%, #EEE 40%, #AAA 80%, #DDD 120%);
    border-top-color:   #AAA;
    border-left-color:  #AAA;
    border-right-color: #444;
    border-bottom-color:#444;
}

div#controlArea .buttonM, div.tabletControl .buttonM
{
    border-radius:6px;
}
.buttonMR1
{
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
}
.buttonMR2
{
    /*
    border-left:none;
    border-right:none;
*/
}
.buttonMR3
{
    border-top-right-radius:6px;
    border-bottom-right-radius:6px;
}
.buttonM
{
    border-radius:0px;
}

.buttonMS__AA
{
    /*border-radius:8px;*/
    width: 44px;
    height: 44px;
    font-size: 32px;
    line-height: 44px;
    margin: 1px;
}

.toolButton:active
{
    background-color:red;
    color:#8F8;
}

    #DUMP_INFO
    {
        border:solid 4px red;
    }

@media screen and (max-device-width: 320px)
{
    .buttonS, .buttonSM
    {
        margin: 2px 0px;
        width:  34px;
        height: 34px;
        font-size: 28px;
        line-height: 34px;
    }
    span[class^='buttonM'] > svg
    {
        width:  20px !important;
        height: 20px !important;
        padding:0 !important;
        margin: 0 !important;
    }
    .buttonL, .buttonLM
    {
        width: 52px;
        height: 52px;
        font-size: 40px;
        line-height: 52px;
    }
    .buttonLabel
    {
        font-size: 8px;
    }
    div#controlArea .buttonSeparator
    {
        background-image:none;
    }
    td.loadmessage
    {
        font-size:10px;
    }
}

div.layout_tool_bar
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    /*height:100px;*/
    background-color:#88F;
    background-image:-webkit-linear-gradient(top, #88F 10%, #66C 40%, #44A 80%, #228     120%);
    background-image:   -moz-linear-gradient(top, #88F 10%, #66C 40%, #44A 80%, #228     120%);
    background-image:    -ms-linear-gradient(top, #88F 10%, #66C 40%, #44A 80%, #228     120%);
    z-index:99;
    /*
    overflow:hidden;
    white-space:nowrap;
*/
}
div.layout_tool_bar_group
{
    /*border-right:solid 1px #000;*/
    display:inline-block;
    white-space:nowrap;
    padding:0;
    margin:0 2px 0 0;
}
div.infomation_area
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    background-color:#FF8;
    z-index:99;
}
span.keytop
{
    display:inline-block;
    background-color:#FFC;
    border:solid 1px #000;
    border-radius:6px;
    min-width:2em;
    padding:0 2px;
}

span.versionInfo
{
    color:rgba(255,255,255,0.3);
    position:absolute;
    bottom:0;
    right:10px;
    white-space:nowrap;
    display:inline-block;
    background-color:transparent !important;
    background-image:none !important;
    font-family:Meiryo,Arial !important;
    font-size:12px;
    padding:0;
  /*z-index:0;*/
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - *//* 設定画面 */
#settingArea
{
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    overflow-y:auto;
    max-height:400px;
    height:100%;
   
}
th.setting
{
    padding: 0 0.5em;
    margin: 0;
}
.settingItem
{
    display: inline-table;
    height: 24px;
    border: none;
    border-collapse: separate;
}
.stgValue, .rangeSlider, .rangeGlip, .stgButton
{
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}
.stgValue
{
    width: 72px;
    max-width: 72px;
    height: 24px;
    border-radius: 12px;
    border: solid 1px #666;
    background-color: #FFF;
    vertical-align: middle;
    text-align: center;
    font-size: 20px;
    line-height: 1em;
    box-shadow:2px 2px 5px rgba(0,0,0,0.5) inset;
    overflow-x:hidden;
    /*
    background: -ms-radial-gradient(36px 18px, cover, #FFF 60%, #CCC 90%);
    background: -webkit-radial-gradient(36px 18px, cover, #FFF 60%, #CCC 90%);
    background: radial-gradient(24px 18px, cover, #FFF 60%, #CCC 90%);
    */
}
.rangeSlider, .rangeGlip, .stgButton, .colorArea
{
    font-family: SH5;
    font-size: 24px;
    margin: 0;
    padding: 0;
    border-radius: 18px;
    border: solid 1px #666;
    background-color: #FFF;
    vertical-align: middle;
    text-align: center;
}
.colorArea
{
    border: solid 1px #000;
    font-size: 16px;
    line-height: 1em;
    padding: 0;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    height: 34px;
    cursor: pointer;
    font-family: "メイリオ" , Meiryo, "Hiragino Kaku Gothic Pro";
}
.rangeSlider, .colorArea
{
    width: 200px;
    overflow: hidden;
    padding: 0;
}
 
.rangeSlider
{
    position:relative;
    height: 36px;
    background-color: #F4F4F4;
    box-shadow:2px 2px 5px rgba(0,0,0,0.5) inset;
    overflow:hidden;
    /*
    background-image: -ms-linear-gradient(top, #AAA 0%, #F4F4F4 25%);
    background-image: -webkit-linear-gradient(top, #AAA 0%, #F4F4F4 25%);
    background-image: linear-gradient(top, #AAA 0%, #F4F4F4 25%);
    */
}
/*
.rangeSlider:hover
{
    background-color: #FFC;
    background-image: -ms-linear-gradient(top, #CCA 0%, #FFC 35%);
    background-image: -webkit-linear-gradient(top, #CCA 0%, #FFC 35%);
    background-image: linear-gradient(top, #CCA 0%, #FFC 35%);
}
*/
.rangeGlip
{
    content:'a';
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    font-size: 20px;
    line-height: 30px;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    box-shadow:2px 2px 5px rgba(0,0,0,0.5);
}
.rangeGlip:before
{
    content:'a';
}

.stgButton
{
    width: 36px;
    height: 36px;
}
.rangeGlip, .stgButton
{
    color: #444;
    cursor: pointer;
    background: -ms-radial-gradient(7px 7px, cover, #FFF 0%, #FFF 50%, #CCC 70%);
    background: -webkit-radial-gradient(7px 7px, cover, #FFF 0%, #FFF 50%, #CCC 70%);
    background: radial-gradient(7px 7px, cover, #FFF 0%, #FFF 50%, #CCC 70%);
}
/*
.rangeGlip:hover, .stgButton:hover
{
    color: #000;
    background-color: #CFC;
    background: -ms-radial-gradient(7px 7px, cover, #CFC 0%, #CFC 50%, #ACA 70%);
    background: -webkit-radial-gradient(7px 7px, cover, #CFC 0%, #CFC 50%, #ACA 70%);
    background: radial-gradient(7px 7px, cover, #CFC 0%, #CFC 50%, #ACA 70%);
}
*/
.colorText
{
    font-size: 16px;
    line-height: 1.2em;
    overflow: hidden;
    display: inline-block;
    width: 50%;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    margin: -10px 0 -2px 0;
    padding: 8px 0 0 0;
    cursor: pointer;
}
table.setting
{
    margin: 2px 14px;
    padding: 2px;
    border-collapse: collapse;
    border: none;
}
th.setting
{
    border-bottom: 1px solid #AAA;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    line-height:1em;
    margin: 0;
    width: 52px;
}
td.setting
{
    border-bottom: 1px solid #AAA;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    padding: 6px 0;
}

#settingArea input[type=radio]
{
    margin-left:0.5em;
}
#optionCell
{
    padding-top:0em;
    padding-bottom: 2em;
}
#optionCell > span#dispMode
{
    border-bottom:1px solid #AAA;
    padding-bottom:0.5em;
}
#settingArea input[type="checkbox"] + label
{
    display: inline-block;
    vertical-align: top;
}
#optionCell > span
{
    padding-top:0.5em;
    display:block;
}
#optionCell > span:first-child
{
    border-top-style:none;
}

span.activeSettingItem, .activeSettingItem > th
{
	background-color:#66A !important;
    color:#FFF !important;
}
.activeSettingItem > td
{
	background-color:#66A !important;
    color:#000;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* ヘルプ画面 */
#helpArea
{
    overflow: auto;
    background-color: #FFE;
}
#helpContent
{
    padding: 0.5em;
    text-align: left;
    white-space: normal;
    background-color: #FFE;
}
/*
div#helpPanel
{
    background-color:#FFF;
    padding:0px;
}
div#helpSubArea
{
    padding:0em;
    overflow:auto;
    text-align:left;
    background-color:#FFC;
    border-bottom:solid 1px #888;
    white-space:normal;
}
*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 書誌情報 */
table.bibTable
{
    margin: 8px 10px;
    border-collapse: collapse;
    border: solid 1px #000;
}
td.bibCaption
{
    background-color: #88F;
    border: solid 1px #000;
    text-align: center;
    padding: 2px 6px;
    white-space: nowrap;
}
td.bibItem
{
    background-color: #FFF;
    border: solid 1px #000;
    text-align: left;
    padding: 2px 4px;
    width: 300px;
    white-space: nowrap;
}
/* ========================================================================== */
@media screen and (max-device-width: 320px)
{
    div.panel
    {
        max-width: 95%;
        padding: 4px 0px;
    }
    table.setting
    {
        margin: 1px 4px;
        padding: 1px;
        border-top: 1px solid #AAA;
    }
    table.setting caption
    {
        font-size: 12px;
        font-weight: bold;
    }
    th.setting
    {
        font-size: 10px;
        width: 20px;
    }
    th.setting, td.setting
    {
        height: 20px;
        padding: 2px 0 0 0;
    }

    .rangeSlider, .colorArea
    {
        width: 120px;
        height: 22px;
    }

    .stgValue
    {
        border-radius: 2px;
        width: 30px;
        height: 20px;
        font-size: 11px;
        line-height: 1em;
    }
    .rangeGlip
    {
        width: 20px;
        height: 20px;
        font-size: 10px;
        line-height: 16px;
    }
    .stgButton
    {
        width: 22px;
        height: 22px;
        font-size: 10px;
        line-height: 10px;
    }
    .settingFooter
    {
        font-size: 10px;
    }

    div.colorArea
    {
        font-size: 10px;
        line-height: 1.2em;
        display: inline-block;
        overflow: hidden;
    }

    table.panelHeader
    {
        font-size: 16px;
        border-radius: 6px;
    }
    table.panelHeader td
    {
        padding: 2px 10px;
    }
    .panelClose
    {
        font-size: 14px;
        width: 14px;
        height: 14px;
        border-radius: 20px;
    }
    .panelFooter
    {
        font-size: 10px;
    }

    td.panelHeader, td.panelClose
    {
        font-size: 16px;
        height: 18px;
        line-height: 1em;
        padding: 2px 10px;
    }
    td.panelHeader
    {
        width: 80%;
    }
    td.panelClose
    {
        /*    width:20%;*/
    }
    span.panelClose
    {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }
    .panelFooter
    {
        height: 12px;
        line-height: 12px;
        font-size: 10px;
    }

    table.bibTable
    {
        width: 300px;
        max-width: 300px;
    }
    td.bibCaption, td.bibItem
    {
        font-size: 12px;
        padding: 1px 2px;
    }

    .panelFrame
    {
        max-width: 80%;
        max-height: 80%;
        min-width: 20%;
        min-height: 20%;
    }
    #bibinfoFrame, #bibinfoArea
    {
        width: 300px;
    }
    #indexFrame, #indexArea, #helpFrame, #helpArea, #helpContent, #toc
    {
        width: 290px;
        min-width: 290px;
    }
    #settingFrame
    {
        width: 280px;
        min-width: 280px;
    }

    td.bibItem
    {
        overflow: hidden;
        width: 200px;
    }
    #settingFrame, #settingArea
    {
        width: 285px;
    }
    #controlFrame, #controlArea
    {
        width: 260px;
        min-width: 260px;
    }
    /*
    td.bibItem
    {
        overflow:hidden;
        width:300px;
    }
    */
    /*
    #helpFrame
    {
        width:280px;
        max-width:280px;
        overflow:hidden;
    }

    #indexArea,#helpArea
    {
        width:280px;
        max-width:280px;
    }
    */
}
/* ========================================================================== */
@media screen and (max-width: 420px) {
    #settingFrame
    {
        font-size: 14px;
    }
    .rangeSlider, .colorArea
    {
        width: 100px;
    }
    .stgValue
    {
        font-size: 14px;
        height: 20px;
        padding: 0px;
        width: 52px;
        max-width: 52px;
    }
    .rangeSlider, .rangeGlip, .stgButton, .colorArea
    {
        font-size: 14px;
        padding: 0;
    }
    .stgButton
    {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
    }
    .rangeSlider, .color_Area
    {
        height: 30px;
    }
    .rangeGlip
    {
        width: 28px;
        height: 28px;
    }
    #color_Area
    {
        font-size: 10px; 
    }
    #bibinfoArea,#settingArea
    {
        overflow-y: auto;
        overflow-x: hidden;
        max-width: 400px;
    }
}
/*
#optionRow
{
    display: none !important;
}
*/
@media screen and (max-width: 420px) {
    #settingArea
    {
        overflow-y: auto;
        overflow-x: hidden;
        max-width: 410px;
    }
    #bibinfoArea
    {
        overflow: auto;
        max-width: 410px;
    }
    .optionButtons
    {
        display: block;
        text-align: right;
    }
    .easyCaption_label {
        max-width: 280px;
        white-space: normal;
        display: inline-block;
        text-align: left;
        vertical-align: text-top;
    }
}
@media screen and (max-width: 380px) {
    #settingArea
    {
        overflow-y: auto;
        overflow-x: hidden;
        max-width: 370px;
    }
    #bibinfoArea
    {
        overflow: auto;
        max-width: 370px;
    }
    .optionButtons
    {
        display: block;
        text-align: right;
    }
    .easyCaption_label {max-width: 250px;}
}
@media screen and (max-width: 370px) {
    #settingArea
    {
        overflow-y: auto;
        overflow-x: hidden;
        max-width: 360px;
    }
    #bibinfoArea
    {
        overflow: auto;
        max-width: 360px;
    }
    .optionButtons
    {
        display: block;
        text-align: right;
    }
    .easyCaption_label {max-width: 220px;}
}
@media screen and (max-width: 360px) {
    #settingArea
    {
        overflow-y: auto;
        overflow-x: hidden;
        max-width: 350px;
    }
    #bibinfoArea
    {
        overflow: auto;
        max-width: 350px;
    }
    .optionButtons
    {
        display: block;
        text-align: right;
    }
    .easyCaption_label {max-width: 200px;}
}

/* ========================================================================== */
div.contentArea
{
    text-align: left;
    vertical-align: top;
    font-size: 12pt;
    white-space: normal;
    background-color: #FFF;
    margin:0;
    /*
    writing-mode: lt-tb ;
    writing-mode: horizontal-tb;
    -moz-writing-mode: horizontal-tb;
    -o-writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    */
}
div.vertical
{
    writing-mode: tb-rl ;
    writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
}

div.sh5content
{
    margin:0 1em;
    padding: 0.5em;
    background-color: inherit;
    outline:none;
}

div#sh5content.VerticalMode
{
    margin:0 0em  !important;
    padding: 0.5em !important;
    background-color: inherit;
    outline:none;
    box-sizing:border-box;
}

div.StatusArea
{
    font-family: "Meiryo UI" , Meiryo, "Hiragino Kaku Gothic Pro";
    position: absolute;
    background-color: #EEE;
    font-size: 14px;
    line-height: 14px;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 16px;
    display: inline-block;
    overflow: hidden;
    text-align: left;
}

.indexListArea, .pageListArea
{
    width:100%;
/*  height:100%; */
    overflow:auto;
    position:absolute;
    bottom:0;
}
div.sh5content span.read /*, span.toc, td.page */
{
    cursor: pointer;
    /*white-space:normal;*/
}

div.sh5content *.layer_group span.read:nth-child(1)
{
    cursor: default;
}


div.sh5content *.layer_group span.layerArea:nth-child(n+2) span.read
{
    cursor: pointer;
}
/*
div.sh5content *.layer_group span.read:nth-child(n+2):hover
{
    background-color:rgba(0,192,255,0.05) !important;
}
*/

/* 2020.12.01 TOC Font Style Cancel */
span.toc strong, span.toc b, span.toc i
{
    font-weight:normal;
    font-style:normal;
}

span.toc:hover, td.page:hover
{
    background-color:#8F6;
    color:#000;
}

div.topTabArea
{
    width:100%;
    padding:0;
    margin:0;
    background:#444;
    text-align:center;
    vertical-align:bottom;
    height:32px;
    border:none;
}
div.topTabItem
{
    display:inline-block;
    border-top-left-radius:14px;
    border-top-right-radius:14px;
    border:solid 1px #666;
    height:24px;
    line-height:1em;
    width:48%;
    padding:0;
    margin:0;
    padding-top:6px;
    text-align:center;
    vertical-align:top; 
    font-size:14px;
    cursor:pointer;
    background:#FFF;
    font-family: "Meiryo UI" , Meiryo, "Hiragino Kaku Gothic Pro";
    filter: alpha(style=0, opacity=80);
    -webkit-filter: opacity(80%); 
}
div.topTabActive
{
    height:25px;
    border-bottom-width:0px;
    filter: alpha(style=0, opacity=100);
    -webkit-filter: opacity(100%); 
}
/*
img.infty_img:hover
{
    -webkit-filter:opacity(75%);
}
*/

span.AreaEditItem
{
    position:absolute;
    left:0;
    display: block;
    cursor: pointer;
    vertical-align: top;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}
span.AreaEditCheck
{
    display: inline;
}
span.AreaEditLine
{
    display: inline-block;
    background-color:RGBa(192,192,192,0.5);
    height: 12px;
    font-size: 2px;
    line-height: 2px;
    overflow: hidden;
    width: 100%;
    font-size:12px;
    line-height:12px;
    text-align:left;
    font-style:normal;
    font-weight:normal;
}
span.CarriageReturn
{
    font-family:SH5;
    color:#66E;
    font-size:70%;
}
#tocOverlap
{
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;
    background-color:RGBa(255,255,128,0.8) ;
    color:#AA6;
    width:100%;
    height:100%;
    font-size:28px;
    font-weight:normal;
    font-style:normal;
    vertical-align:middle;
    text-align:center;
}
#tocOverlap td
{
    vertical-align:middle;
    text-align:center;
    overflow:hidden;
}
#tocOverlap td span,#tocOverlap td p
{
    display:inline-block;
}
/* ------------------------------------------------ */
span.aditem
{
    background-color:RGBa(0,0,0,0);
    display:inline;
    color:RGBa(0,0,0,0);
}
span.aditem_sub_space
{
    display:inline;
}
span.aditem hr.aditem_sub_newpage
{
    border-style:solid;
    border-color:RGBa(255,0,0,0.5);
    border-width:2px;
    width:100%;
    margin-left:0;
}
/* ------------------------------------------------ */
span.aditem hr.aditem_sub_newpage
{
    display:none;
}
span.aditem_e
{
    background-color:#DFF;
    display:inline;
    color:#AAA;
}
span.aditem_e span.aditem_sub_space
{
    border:#F00 1px solid;
    margin:-1px;
}
span.aditem_e hr.aditem_sub_newpage
{
    border-style:dashed;
    border-color:#F00;
    border-width:2px;
    width:100%;
    margin-left:0;
}
span.aditem_sub_breakline
{
    display:inline-block;
    height:1.5em;
    font-size:75%;
    margin:0 2px;
}
/* ------------------------------------------------ */
textarea.layoutcode
{
    width:100%;
    height:90%;
    border:none;
    padding:0;
    margin:0;
    /*
    background-color:#FCC;
    -ms-user-select:text;
    -moz-user-select:text;
    -khtml-user-select:text;
    -webkit-user-select:text;
    */
}
/*-------------------------------------------------- */
/* Table Of Content Styles                           */
/*-------------------------------------------------- */
div.indexListArea:not(.tree_line) ul.toc { list-style:none;margin:10px 0 0 10px;padding:0; } 
div.indexListArea:not(.tree_line) ul.toc li { white-space:nowrap;padding-bottom:0.5em; }
div.indexListArea:not(.tree_line) li.level1 span.toc{margin-bottom:0.5em;font-size:100%;margin-left:0em;font-weight:bold;}
div.indexListArea:not(.tree_line) li.level2 span.toc{margin-bottom:0.5em;font-size:100%;margin-left:0em;}
div.indexListArea:not(.tree_line) li.level3 span.toc{margin-bottom:0.5em;font-size:100%;margin-left:0em;}
div.indexListArea:not(.tree_line) li.level4 span.toc{margin-bottom:0.5em;font-size:100%;margin-left:0em;}
div.indexListArea:not(.tree_line) li.level5 span.toc{margin-bottom:0.5em;font-size:100%;margin-left:0em;}
div.indexListArea:not(.tree_line) li.level6 span.toc{margin-bottom:0.5em;font-size:100%;margin-left:0em;}
div.indexListArea span.toc { white-space:nowrap; padding-bottom:0em; cursor:pointer;}

div.indexListArea.tree_line
{
	font-weight: 400;
	line-height: 1.5;
	white-space:nowrap;
}

div.indexListArea.tree_line ul.toc
{
    list-style:none;
    padding-left:0;
}

div.indexListArea.tree_line > ul.toc 
{
    margin-left:-0.5em;
}

div.indexListArea.tree_line ul.toc ul.toc
{
    margin-left:0.75em;
}

div.indexListArea.tree_line > ul.toc > li > ul.toc
{
    margin-left:2em;
}

div.indexListArea.tree_line ul.toc ul.toc li
{
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0.5em;
    box-sizing: border-box;
    margin-left:0em;
}
div.indexListArea.tree_line ul.toc ul.toc li:before
{
    position: absolute;
    top: 1.1em;
    left: 0;
    width: 1em;
    height: 1px;
    margin: 0px;
    content: '';
}

div.indexListArea.tree_line ul.toc ul.toc li:after
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 100%;
    content: '';
}

div.indexListArea.tree_line ul.toc ul.toc span.tree
{
    position: absolute;
    top: 0.9em;
    left: 0.5em;
    margin-left:0.5em;
    margin-right:0.5em;
    display:inline-block;
    width:0.5em;
    height:0.5em;
    overflow:hidden;
    border-radius:0.25em;
}
/*
div.indexListArea.tree_line ul.toc ul.toc li:after,
div.indexListArea.tree_line ul.toc ul.toc li:before,
div.indexListArea.tree_line ul.toc ul.toc span.tree
{
    background-color:#000 !important;
}
*/
div.indexListArea.tree_line ul.toc ul.toc li:last-child:after
{
	height: 1.1em;
}

div.indexListArea.tree_line span.toc
{
    margin-left:1.5em;
}

/*-------------------------------------------------- */

table.pagelist
{
    margin-top:8px;
    width:100%;
    border-collapse:collapse;
    border:none;
}
table.pagelist caption
{
    white-space:nowrap;
    text-align:left;
    margin-left:0.5em;
}
table.pagelist td
{
    width:10%;
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
    border:none;
}

table.pagelist.active_page
{
    background:#FFFF00;
}

span.math_formula
{
    display:inline-block;
    white-space:nowrap;
    margin:0;
    padding:0;
}
img.math,img.math_h
{
    vertical-align:baseline;
    padding:0;
    margin:0;
}
img.sh5_img,img.sh5_img_group
{
    background:RGBa(0,255,0,0);
    padding:4px;
    margin:0;
    line-height:1em;
}
/*
span.layer_group img.sh5_img
{
    padding:0px !important;
    margin:0px !important;
}
*/

div.sh5content:not(.VerticalMode) img.sh5_img, div.sh5content:not(.VerticalMode) img.sh5_img_group
{
    vertical-align:middle;
}

img.left
{
    float:left;
}
img.right
{
    float:right;
}

.addarea 
{
    margin:0px;
    padding:4px;
    border:solid 2px #666;
    display:block;
    clear:both;
    border-radius:4px;
}
.addarea p
{
    margin:0.5em;
}
 
.editmode
{
    border:solid 2px red;
    background-color:RGBa(255,255,255,0.5);
}
.addarea pre.iml
{
    margin:0px;
    padding:4px;
    color:Black;
    display:none;
    font-size:8pt;
    line-height:8pt;
    font-family:'Meiryo UI';
    border:solid 1px blue;
    background-color:White;
    overflow:scroll;
}



@media print
{ 

#controlArea, #indexFrame, #indexArea
{
    display:none;
}
#contentArea
{
    overflow:visible;
    width:100%;
    height:100%;
}

.addarea
{
    margin-top:0.5em;
    margin-bottom:0.5em;
}

}

/* ======================================================== */
/* Speed And Font Size Popup Controle Styles (2019.03.06) */
div.progressPane
{
    display:inline-block;
    position:absolute;
    top:2px;
    width:330px;
    height:40px;
    padding:4px;
    margin:0;
    box-sizing:border-box;
    left: calc( 50% - 150px ) ;
    border-radius:10px;
    box-shadow:4px 4px 5px rgba(0,0,0,0.5);
    border:solid 1px rgba(0,0,0,0.25);
    background-color:#EEE;
    z-index:10000 ;
}
div#progressPane_font
{
    width:140px;
}

div.progressPane *
{
    font-size:12px;
    box-sizing: border-box;
}

div.progressPane > table
{
    width:100%;
    height:30px;
    margin:0px;
    padding:0px;
    border-collapse:collapse;
    font-family:'Meiryo UI';
}

div.progressPane > table td:nth-child(1)
{
    padding:0;
    margin:0;
    border-radius:8px;
    width:4em;
    min-width:4em;
    background-color:#FFF;
    border:none;
    box-shadow:2px 2px 4px rgba(0,0,0,0.5) inset, -1px -1px 2px rgba(0,0,0,0.2) inset;
}
div.progressPane > table td:nth-child(2)
{
    padding:0;
    margin:0;
    border:none;
    white-space:nowrap;
    padding:0 4px;
}
div.progressPane > table td:nth-child(3)
{
    width:3em;
}
div.progressPane > table td input[type=button]
{
    background-color:#FFF;
    border:none;
    border-radius:12px;
    width:5em;
    min-width:5em;
    height:28px;
    padding:0 4px;
    text-align:center;
    font-size:10px;
    box-shadow:-2px -2px 4px rgba(0,0,0,0.5) inset, 1px 1px 2px rgba(0,0,0,0.2) inset;
    border-radius:6px;
    outline:none;
}

div.progressPane > table td input[type=button][disabled]
{
    background-color:#CCC;
    color:#AAA;
}

div.progressPane > table td input[type=button]:active
{
    box-shadow:2px 2px 4px rgba(0,0,0,0.5) inset, -1px -1px 2px rgba(0,0,0,0.2) inset;
}

span.progress_rate
{
    display:inline-block;
    height:26px;
    box-sizing:border-box;
    background:#0E0;
    margin:0 0 0 1px;
    width: 7px ;
}
span.pp_active
{
}
span.pp_active ~ span.progress_rate
{
    background:#CCC;
}
/* ======================================================== */

section.html_page
{
    background-color:transparent !important;
}

section:not(.vertical_section), section:not(.vertical_section) *.tate
{
    -ms-writing-mode:horizontal-tb !important;
    writing-mode:horizontal-tb !important;
}

div#contentArea.chattyinfty div.vertical div.page-normal, 
div#contentArea.chattyinfty .vertical_section div.page-normal
{
    text-direction:ltr;
}

div#contentArea.chattyinfty div.vertical div.page-normal > span.page-normal, 
div#contentArea.chattyinfty .vertical_section span.page-normal
{
    display:inline-block;
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode:lr-tb;
}


/* ---------------------------------------- */
div.contentArea table.infty
{
    border-collapse:collapse;
}
div.contentArea *.sh5index
{
    line-height:1.5em;
}

div.contentArea *.boxstyle
{
    display:inline;
	white-space:pre-wrap;
    border:solid 1px currentColor !important;
}

section.vertical_section *.boxstyle.include_ruby
{
    padding:0.1em 0.8em 0.1em 0.1em !important;
}
section:not(.vertical_section) *.boxstyle.include_ruby
{
    padding:0.8em 0.1em 0.1em 0.1em !important;
}

/* ----------------------------------------
  横書のアンダーライン
------------------------------------------- */
/*.HorizontalMode u, .vertical_section*/ u
{
    text-decoration:none !important;
    display:inline;
    border-bottom:solid 1px currentColor !important;
    border-right:none !important;
    padding-bottom:2px;
    line-height:1.5em;
}
/* ----------------------------------------
   縦書のアンダーライン(傍線)
------------------------------------------- */
/*.VerticalMode u,*/ .vertical_section u
{
    text-decoration:none !important;
    display:inline;
    border-right:solid 1px currentColor !important;
    border-bottom:none !important;
/*  padding-right:2px; */
    line-height:1.5em;
}

/* ----------------------------------------
   縦境界コントロールスタイル
------------------------------------------- */
.sh5_vertSplit
{
    display:inline-block;
    position:absolute;
    left:250px;
    top:0;
    width:4px;
    height:100%;
    margin:0;
    padding:0;
    background-color:RGBa(0,0,0,0.2);
    cursor:w-resize;
}

/*---------------------------------------
縦書きモードのスタイル定義
---------------------------------------*/
div.sh5content section.vertical_section p
{
    margin-top:0 !important;
    margin-bottom:0 !important;
}
div.sh5content
{
    width:100%; /* 2019.12.05 */
    height:100%; /* 2019.12.05 */
}


/*---------------------------------------
横書モードでのルビの処理
デフォルトではテキストとルビが接近しすぎて
いるので、強制的に間隔を開けます。
---------------------------------------*/

/* 2020.09.08 Comment-out
div.sh5content:not(.VerticalMode) section:not(.vertical_section) rt
{
    position:relative;
    bottom:0.4em;
}
*/
section.vertical_section rt {
/*    line-height: 1.2em !important;*/
}
section rp {
    display:none !important;
}

/* 2020.09.08 Comment-out
@media all and (-ms-high-contrast:none)
{
    section.vertical_section rt {
        position: relative;
        bottom: 0.2em;
    }
}
*/

/*---------------------------------------
縦書モードでのルビの処理
デフォルトではテキストとルビが接近しすぎて
いるので、強制的に間隔を開けます。
---------------------------------------*/
.VerticalMode, .vertical_section
{
    line-height:2em;
}

.VerticalMode ruby, .vertical_section ruby
{
    line-height:1em !important;
/*  padding: 0 0.2em; */
}

.VerticalMode ruby rt, .vertical_section ruby rt
{
    vertical-align:text-bottom;
}

.sh5content rt
{
    line-height:1em !important;
    font-size:60%;
}

/* ルビ文字の前後にダミーのテキストを挿入*/
/*
.VerticalMode ruby > rt:before { content:'('; }
.VerticalMode ruby > rt:after  { content:')'; }
*/

/*
@media all and (-ms-high-contrast: none)
{
    .vertical_section u > ruby > rt:before, .vertical_section u > ruby > rt:after
    {
       content:'¶';
       font-family:SH5;
       color:transparent !important;
       font-size:120%;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    .vertical_section u > ruby > rt:before, .vertical_section u > ruby > rt:after
    {
       content:'¶';
       font-family:SH5;
       color:transparent !important;
       font-size:180%;
    }
}
*/
/*
.VerticalMode ruby > rt:before, .VerticalMode ruby > rt:after
{
    color:transparent;
    font-size:200%;
    display:inline-block;
    min-height:1px;
    max-height:1px;
}
*/

.VerticalMode u ruby > rt:before, .VerticalMode u ruby > rt:after
{
    /* アンダーライン(傍線)がある場合はもう少し間隔を開ける */
    font-size:160%;
}

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
    div.sh5content:not(.VerticalMode) section:not(.vertical_section) ruby
    {
        padding-top:0.8em;
    }
    /* webkit系のハック処理 */
    /* webkit系では、ダミーのルビ文字サイズが120%程度がちょうどよい */
    .VerticalMode ruby > rt:before, .VerticalMode ruby > rt:after
    {
        font-size:120%;
    }
    /* アンダーライン(傍線)がある場合はもう少し間隔を開ける */
    .VerticalMode u ruby > rt:before, .VerticalMode u ruby > rt:after
    {
        font-size:200%;
    }
}

.NNN
{
    position:absolute;
}
/* ============================================================= */
th.backslashCell, td.backslashCell
{
    position:relative;
    line-height:1em;
    padding:2px 4px !important;
}
td.backslashCell span.backslashField
{
    padding:0 !important;
    margin:0;
    position:relative;
    display:inline-block;
}
td.backslashCell span.read
{
    display:inline-block;
}
/* - - - - */
div.sh5content section:not(.vertical_section) span.labelLB
{
    /*border:solid 1px rgba(0,255,0,0.2);*/
    display:inline-block;
    position:absolute;
    bottom:0;
    left:0;
	min-width:1em;
    line-height:1.5em !important;
}
div.sh5content section:not(.vertical_section) span.labelRT
{
    /*border:solid 1px rgba(255,0,0,0.2);*/
    display:inline-block;
    position:absolute;
    top:0;
    right:0;
	min-width:1em;
    line-height:1.5em !important;
}
/* - - - - */
div.sh5content section.vertical_section span.labelLB
{
    /*border:solid 1px rgba(0,255,0,0.2);*/
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
	min-width:1em;
    line-height:1.5em !important;
}
div.sh5content section.vertical_section span.labelRT
{
    /*border:solid 1px rgba(255,0,0,0.2);*/
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
	min-width:1em;
    line-height:1.5em !important;
}
span.labelLB ruby
{
    line-height:1em !important;
}
span.labelLB > span.read
{
    line-height: 1em !important;
}
/* - - - - */
span.labelHide
{
    line-height:1.2em;
    color:rgba(255,0,0,0.5);
}
span.ruby_text
{
    margin:0 0;
    background-color:rgba(255,128,128,0.0);
    border-bottom:solid 1px #C66;
}
span.ruby_text:before
{
    content:"" ;
    color:#C66;
}
span.ruby_text::after
{
    content:"" ;
    color:#C66;
}
.contentArea rb, .contentArea rt
{
	background-color:inherit;
}

.contentArea div[class='image'][id^='pid_']
{
    margin-bottom:1em;
}

.contentArea span.layer_group
{
    display:inline-block;
    overflow:hidden !important;
    writing-mode: lr-tb;
    -moz-writing-mode: horizontal-tb;
    -o-writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
}

.contentArea span.layer_group:not(.layer_type) span.layerArea
{
    position:absolute;
}

.contentArea div.layer_group.layer_type2 span.read
{
    display:inline-block;
}

.contentArea div.layer_group.layer_type2 *
{
    line-height:0 !important;
}

/*
#sh5content *.layer_group span:nth-child(n+2).read.sh5_highlight a 
{
     background-color:transparent !important;
}
*/
#sh5content section:not(.sh5_epub) *.layer_group.layer_type2 *.read.sh5_highlight
{
    background-color:transparent !important;
}
/*
section:not(.vertical_section) div.layer_group.layer_type2 span.read > *.layer_type2
{
    margin:4px;
}
*/
section *.layer_type2
{
    font-size:12pt !important;
}
section *.layer_type2 img
{
    padding:0px !important;
}

section.vertical_section div.layer_group.layer_type2 span.read > *.layer_type2
{
    margin:0px;
}
*.layer_group span.img_frame
{
    padding:0 !important;
    margin:0 !important;
    line-height:0px !important;
}
*:not(.layer_type2).layer_group span.layerItem
{
    line-height:0px !important;
}

span.layer_group.layer_group_vertical:not(.layer_type2) > span.read
{
    position:relative;
}

.layer_group, .layer_child
{
    line-height:1em !important;
}

table.matharray
{
    writing-mode: lr-tb;
    -moz-writing-mode: horizontal-tb;
    -o-writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
}

/* ----------------------------------------------------------------------------------- */
#button_rubylevel
{
    position:relative;
}
#ruby_level_menu_list_area
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    display:block;
    z-index:199998;
    background-color:rgba(0,0,0,0.0);
}
ol#ruby_level_menu_list
{
    position:absolute;
    background-color:#FFF;
    margin:0;
    padding:0;
    border:solid 1px #666;
    box-shadow:1px 1px 10px #000;
}

li.ruby_level_menu_list_item
{
    white-space:nowrap;
    font-family:'UD デジタル 教科書体 NP-R','ＭＳ Ｐゴシック','Hiragino Kaku Gothic Pro',sans-serif;
    font-size:16px;
    display:block;
    text-align:left;
    cursor:pointer;
    margin:0px;
    padding:0.2em 0.5em;
    background: linear-gradient(#FFF 10%, #DDD 15%, #DDD 85%, #AAA 100%);
}

li.ruby_level_menu_list_item_active /*, li.ruby_level_menu_list_item_activea ~ li*/
{
    background: linear-gradient(#FFA 10%, #DDA 15%, #DDA 85%, #AA8 100%);
}

li.ruby_level_menu_list_item:hover
{
    background: linear-gradient(#AFF 10%, #8DD 15%, #8DD 85%, #6AA 100%);
}

div.SmartPhoneStyle > div div.toolButtonGroup
{
    margin-right:1px !important;
}

div.SmartPhoneStyle > div div > span.toolButton
{
    width:32px;
    height:32px;
    max-width:32px;
    max-height:32px;
    font-size:24px;
    line-height:30px;
}

div.SmartPhoneStyle span[class^='buttonM'] > svg
{
    width:  28px !important;
    height: 28px !important;
    padding:0;
    margin: 0;
}

div.SmartPhoneStyle *.versionInfo
{
    font-size:50%;
}

#sh5content.markingMode
{
    -ms-user-select: text !important;
    -moz-user-select: text !important;
    -khtml-user-select: text !important;
    -webkit-user-select: text !important;
}
#sh5content.markingMode *
{
    cursor:text;
}

div#markerArea
{
    line-height:1em;
    text-align:left;
    padding:0 100px;
    font-size:16px;
}
span.markerItem, span.markerCheck, span.markerButton
{
   margin-left:  2px;
   margin-right: 2px;
   margin-top:   4px;
   margin-bottom:0px;
   padding:0;
   display:inline-block;
   width:40px;
   min-width:40px;
   max-width:40px;
   height:40px;
   min-height:40px;
   max-height:40px;
   border:solid 1px #E2E4E7;
   overflow:hidden;
   box-sizing:border-box;
   border-radius:4px;
   text-align:center;
   cursor:pointer;
}
span.markerButton
{
   box-shadow:1px 1px 4px rgba(0,0,0,0.5);
}
span.markerItem:hover
{
    border-color:#000;
}

span.markerCheck:hover, span.markerButton:hover
{
    background-color:#CFF;
    border-color:#088;
}

span[class='markerItem active']
{
    box-shadow:0px 0px 6px rgba(255,0,0,0.8);
}
span[class='markerItem active']:before
{
    content:'/';
    font-family:SH5;
    color:#000;
    font-size:24px;
    line-height:34px;
    text-shadow:0 0 4px 4px rgba(255,255,255,1);
}

span#marker00 { background-color:#FFFF00; }
span#marker01 { background-color:#00FF00; }
span#marker02 { background-color:#00FFFF; }
span#marker03 { background-color:#FF00FF; }
span#marker04 { background-color:#0000FF; }
span#marker05 { background-color:#FF0000; }
span#marker06 { background-color:#000080; }
span#marker07 { background-color:#008080; }
span#marker08 { background-color:#008000; }
span#marker09 { background-color:#800080; }
span#marker10 { background-color:#800000; }
span#marker11 { background-color:#808000; }
span#marker12 { background-color:#808080; }
span#marker13 { background-color:#C0C0C0; }
span#marker14 { background-color:#000000; }
span#marker15 { background-color:#FFFFFF; }

span.markerCheck
{
   width:    106px;
   min-width:106px;
   max-width:106px;
   padding:12px 0;
   color:#444;
   background-color:#EEE;
}

span[class='markerCheck active']
{
   box-shadow:1px 1px 4px rgba(0,0,0,0.5);
   color:#000;
   background-color:#FFF;
}

span#markerType1:before
{
    content:'o ';
    font-family:SH5;
}
span#markerType2:before
{
    content:'p ';
    font-family:SH5;
}

span#marker15:before
{
    content:'q';
    font-family:SH5;
    color:#888;
    font-size:24px;
    line-height:34px;
}
span.markerButton
{
   width:    106px;
   min-width:106px;
   max-width:106px;
    /*
   width:    84px;
   min-width:84px;
   max-width:84px;
        */
   padding:12px 0;
}
span#markerApply:before
{
    content:'n ';
    font-family:SH5;
}

div.sh5content a[href]
{
    text-decoration:underline !important;
}
span.sh5page > span > a
{
    text-decoration:none !important;
}

section.html_page
{
    box-sizing:border-box;
    margin:0;
    padding:12pt !important;
}

section.vertical_section
{
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display:block;
    min-width:100%;
    max-width:none !important;
    overflow:visible !important;
    width:auto !important;
    height:100%  !important;
    margin:0  !important;
}

section.vertical_section span.yoko, section.vertical_section span.yokobox 
{
    line-height:1em !important;
    letter-spacing:0em;
}
section.vertical_section span[class*="yoko"]
{
    writing-mode:lr-tb !important;
    -ms-writing-mode:lr-tb !important;
    -webkit-writing-mode:horizontal-tb !important;
}

.contentArea
{
    margin:0 !important;
    padding:0 !important;
}
.sh5content
{
    margin:0 !important;
    padding:0 !important;
}

div.sh5content div#honbun
{
    height:100%;
    width:100%;
}

img.read
{
    padding:2px;
}

div[style*="float:"][style*="left"]
{
    line-height:1em;
}

@media all and (-ms-high-contrast:none)
{
    section ruby *
    {
        line-height:1em !important;
    }
}

section:not(.vertical_section) .indent_1em {  padding-top:0 !important;padding-left:1em !important;	}
section:not(.vertical_section) .indent_2em {  padding-top:0 !important;padding-left:2em !important;	}
section:not(.vertical_section) .indent_3em {  padding-top:0 !important;padding-left:3em !important;	}
section:not(.vertical_section) .indent_4em {  padding-top:0 !important;padding-left:4em !important;	}
section:not(.vertical_section) .indent_5em {  padding-top:0 !important;padding-left:5em !important;	}
section:not(.vertical_section) .indent_6em {  padding-top:0 !important;padding-left:6em !important;	}
section:not(.vertical_section) .indent_7em {  padding-top:0 !important;padding-left:7em !important;	}
section:not(.vertical_section) .indent_8em {  padding-top:0 !important;padding-left:8em !important;	}
section:not(.vertical_section) .indent_9em {  padding-top:0 !important;padding-left:9em !important;	}
section:not(.vertical_section) .indent_10em { padding-top:0 !important;padding-left:10em !important; }
section:not(.vertical_section) .indent_11em { padding-top:0 !important;padding-left:11em !important; }
section:not(.vertical_section) .indent_12em { padding-top:0 !important;padding-left:12em !important; }
section:not(.vertical_section) .indent_13em { padding-top:0 !important;padding-left:13em !important; }
section:not(.vertical_section) .indent_14em { padding-top:0 !important;padding-left:14em !important; }
section:not(.vertical_section) .indent_15em { padding-top:0 !important;padding-left:15em !important; }
section:not(.vertical_section) .indent_16em { padding-top:0 !important;padding-left:16em !important; }

section:not(.vertical_section) .indent_m11em { padding-top:0 !important;padding-left: 1em !important; }
section:not(.vertical_section) .indent_m12em { padding-top:0 !important;padding-left: 2em !important; }
section:not(.vertical_section) .indent_m13em { padding-top:0 !important;padding-left: 3em !important; }
section:not(.vertical_section) .indent_m16em { padding-top:0 !important;padding-left: 6em !important; }
section:not(.vertical_section) .indent_m21em { padding-top:0 !important;padding-left: 1em !important; }
section:not(.vertical_section) .indent_m22em { padding-top:0 !important;padding-left: 2em !important; }
section:not(.vertical_section) .indent_m23em { padding-top:0 !important;padding-left: 3em !important; }
section:not(.vertical_section) .indent_m45em { padding-top:0 !important;padding-left: 5em !important; }
section:not(.vertical_section) .indent_m31em { padding-top:0 !important;padding-left: 1em !important; }
section:not(.vertical_section) .indent_m32em { padding-top:0 !important;padding-left: 2em !important; }

section.vertical_section *[class*='underline']
{
    text-decoration:none !important;
    border-left:none !important;
    border-bottom:none !important;
    border-top:none !important;
    border-right-style:inset !important;
    border-right-width:1px !important;
    padding:0 0 0 0.1em !important;
}
section:not(.vertical_section) *[class*='underline']
{
    text-decoration:none !important;
    border-left:none !important;
    border-right:none !important;
    border-top:none !important;
    border-bottom-style:inset !important;
    border-bottom-width:1px !important;
    padding:0 0 0.1em 0 !important;
}

#sh5content table.eqnarray,  #sh5content table.eqnarray *,
#sh5content table.matharray, #sh5content table.matharray *,
#sh5content table.hissan,    #sh5content table.hissan *
{
    border-style:none;
}
#sh5content table.hissan td.hissan_operator,
#sh5content table.hissan td.hissan_baseline
{
    border-bottom:solid 1px currentColor !important;
}
#sh5content table.hissan td.hissan_step
{
    border-top:solid 1px currentColor !important;
}
#sh5content table.matharray td span,
#sh5content table.eqnarray  td span,
#sh5content table.hissan td span
{
    line-height:1.3em !important;
}
/*
#sh5content rt
{
    letter-spacing:0;
}
*/
div.sh5content section:not(.vertical_section) dt {
	float: left;
	clear: both;
}

div.sh5content section:not(.vertical_section) dd
{
    /*
	float: left;
	margin-left: 1em !important;
        */
}

div.sh5content a[href]
{
    text-decoration:none !important;
    padding:4px;
}
div.sh5content section.vertical_section a[href]
{
    border-left:2px dotted;
}
div.sh5content section:not(.vertical_section) a[href]
{
    border-bottom:2px dotted;
}

@media screen and (-webkit-min-device-pixel-ratio: 0)
{
/* Chrome ハック ルビテキストが近すぎるので&hinsplを挿入して隙間を開ける */
/*div.sh5content section:not(.vertical_section) rt:before,div.sh5content section:not(.vertical_section) rt:after*/
/* 2020.09.09　廃止
div.sh5content section.vertical_section rt
{
    letter-spacing:0.2em !important;
}
*/
div.sh5content section rt:before,div.sh5content section rt:after
{
    /*
    content:"\02009";
    line-height:1em !important;
    font-size:80%;
    letter-spacing:-1em;
    vertical-align:-webkit-baseline-middle;
    */
}

div.sh5content section.vertical_section rt:before,div.sh5content section.vertical_section rt:after
{
    font-size:120% !important;
}

}

@-moz-document url-prefix()
{
/* Firefox Hack */
div.sh5content section:not(.vertical_section) ruby
{
    padding-top:0 !important;
}
div.sh5content section:not(.vertical_section) rt
{
    bottom:0em !important;
}

}

div.sh5content table.infty th,div.sh5content table.infty td
{
    vertical-align:inherit;
}
div.sh5content span.wbrspan
{
    display:inherit;
}
div.sh5content span.wbrspan ruby
{
    white-space:nowrap;
}

table.infty
{
    background-color:transparent !important;
}

div.sh5content section.vertical_section svg.math
{
    vertical-align: baseline !important;
}

/* ===================================================================== */
div.sh5content table.infty
{
	display:inline-table;
	border:0px;
	margin-top:5px;
	margin-bottom:0px;
	border:solid 1px currentColor;
	border-right:none;
	border-bottom:none;
	border-collapse:collapse;
	border-spacing:0px;
}
div.sh5content th.infty, div.sh5content td.infty
{
	border-color:currentColor;
	border-width:1px;
	border-style:solid;
	padding:0.2em 0.5em;
	white-space:normal;
	border-top:none;
	border-left:none;
	white-space:nowrap;
	vertical-align:middle;
}
div.sh5content table.eqnarray
{
	writing-mode: horizontal-tb;
	line-height:1em;
	display:inline-table;
	border:none;
	padding:0;
}
div.sh5content td.eqnarray
{
	padding:0;
	border:none;
	white-space:nowrap;
}
div.sh5content td.equationnumbers
{
	padding:0;
	border:none;
	width:6em;
	text-align:right;
	font-size:12pt;
	white-space:nowrap;
}
div.sh5content span.boxstyle
{
	display:inline;
	border:solid 1px currentColor;
	padding:0.1em 0.4em;
	margin:0.1em;
}
div.sh5content section:not(.vertical_section) span.boxstyle.ruby_in_box
{
    padding:0.8em 0.2em 0.2em 0.2em !important;
}
div.sh5content section.vertical_section span.boxstyle.ruby_in_box
{
    padding:0.2em 0.8em 0.2em 0.2em !important;
}

#ppf_value,#pps_value
{
    font-family:'UD デジタル 教科書体 NP-R','ＭＳ Ｐゴシック','Hiragino Kaku Gothic Pro',sans-serif;
    text-align:center;
}

.audio_only_item_area
{
    position:relative;
}

.audio_only_item_area > span
{
    position:absolute;
    left:0;
    top:0;
    width:1px;
    height:1px;
    overflow:hidden;
}

body > div#waitingArea
{
    display: none;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.0);
    user-select:none;
    -webkit-user-select:none;
    z-index:999;
    cursor: wait;
}
body > div#waitingArea.show
{
    display: block;
}

body > div#waitingArea.show > #waiting_circle
{
	position: absolute;
	width: 100px;
	height: 100px;
	left: 50%;
	top: 50%;
	user-select: none;
	-webkit-user-select: none;
	animation: rotate1 1.0s steps(8) 0s infinite;
}
@keyframes rotate1
{
	0%
    {
		transform: translateY(-50%) translateX(-50%) rotate(0deg);
	}
	100%
    {
		transform: translateY(-50%) translateX(-50%) rotate(360deg);
	}
}
body > div#waitingArea.show > #waiting_circle path.wcpt
{
    stroke: none;
    fill:black;
}
body > div#waitingArea.show > #waiting_circle path.wcpt.wc01{fill:#FFF;fill-opacity: 1.0;}
body > div#waitingArea.show > #waiting_circle path.wcpt.wc02{fill:#DDD;fill-opacity: 1.0;}
body > div#waitingArea.show > #waiting_circle path.wcpt.wc03{fill:#BBB;fill-opacity: 1.0;}
body > div#waitingArea.show > #waiting_circle path.wcpt.wc04{fill:#999;fill-opacity: 1.0;}
body > div#waitingArea.show > #waiting_circle path.wcpt.wc05{fill:#777;fill-opacity: 1.0;}
body > div#waitingArea.show > #waiting_circle path.wcpt.wc06{fill:#555;fill-opacity: 1.0;}
body > div#waitingArea.show > #waiting_circle path.wcpt.wc07{fill:#333;fill-opacity: 1.0;}
body > div#waitingArea.show > #waiting_circle path.wcpt.wc08{fill:#000;fill-opacity: 1.0;}
body > div#waitingArea.show > #loading_rate
{
	position: absolute;
	display: block;
	width: 80px;
	font-size: 16pt;
    font-weight: bold;
	height: 1.2em;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	text-align: center;
	color:rgba(0,0,0,0.8);
	white-space: nowrap;
	user-select: none;
    text-shadow: 0px 0px 4px #FFFFFF, 0px 0px 3px #FFFFFF, 0px 0px 2px #FFFFFF;
	-webkit-user-select: none;
}
#dumpArea
{
    background:rgba(192,255,192,0.7);
    display:inline-block;
    border:1px solid black;
    position:absolute;
    width:350px;
    height:350px;
    overflow:auto;
    z-index:998;
    font-size:8pt;
    text-align:left;
    box-shadow:rgba(0,0,0,0.25) 0px 0px 6px 4px;
    padding-top:44px;
}

body:not(.dw_right_bottom) #dumpArea
{
    left:50%;
    top:50%;
    transform:translateY(-50%) translateX(-50%);
}
body.dw_right_bottom #dumpArea
{
    right:10px;
    bottom:10px;
}

#dumpArea audio
{
    display: block;
    border: 1px solid black;
    position: absolute;
    left: 0 !important; 
    top: 0 !important; 
    width: 100%; 
    height: 20px; 
}

#audio_dump
{
    background: rgba(192, 255, 255, 0.7);
    display: block;
    border: 1px solid black;
    position: absolute;
    left: 0; 
    top: 20px; 
    width: 100%; 
    height: 16px; 
    overflow: hidden; 
    font-size: 12pt; 
    text-align: center; 
}
/*
body[mode=play] #button_play
{
    display: none;
}
body:not([mode=play]) #button_pause
{
    display: none;
}
*/
body.mode_play #button_play
{
    display: none;
}
body:not(.mode_play) #button_pause
{
    display: none;
}

body[audio_loading=true] #controlArea svg
{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

/*==== 分かち書きのスタイル設定 2021.09.11 =============*/

/* [分かち書きＯＦＦ]のボタンの色 */
body:not(.wakachigaki):not(.wakachigaki_level2) svg#waka_mode path#w_fore
{
    fill:#808080;
}
/* [分かち書きＯＮ]のボタンの色 */
body.wakachigaki:not(.wakachigaki_level2) svg#waka_mode path#w_fore
{
    fill:#006000;
}
/* [連文節区切りの分かち書きＯＮ]のボタンの色 */
body.wakachigaki.wakachigaki_level2 svg#waka_mode path#w_fore
{
    fill:#A00000;
}

#sh5content p
{
    white-space:normal;
}

/* -- 分かち書き表示ON ------ */
body.wakachigaki #sh5content span.wbrspan
{
    display:unset;
    white-space:nowrap;
}
/* -- 横書きでの[通常の分かち書き]と[連文節モードでの分かち書き表示] ------ */
body.wakachigaki:not(.wakachigaki_level2) #sh5content section:not(.vertical_section) span.wbrspan:not(.read_last_wbr),
body.wakachigaki.wakachigaki_level2 #sh5content section:not(.vertical_section) span.wbrspan.wbr_level2:not(.read_last_wbr)
{
    margin-right:1em;
}
/* -- 縦書きでの[通常の分かち書き]と[連文節モードでの分かち書き表示] ------ */
body.wakachigaki:not(.wakachigaki_level2) #sh5content section.vertical_section span.wbrspan:not(.read_last_wbr),
body.wakachigaki.wakachigaki_level2 #sh5content section.vertical_section span.wbrspan.wbr_level2:not(.read_last_wbr)
{
    margin-bottom:1em;
}
/* -- 分かち書きＯＦＦでの表示 -------- */
body:not(.wakachigaki) #sh5content span.wbrspan
{
    display:unset;
    padding:0;
    margin:0;
    white-space:break-spaces;
}

/* wbrデバッグモード */
/* 枠線を表示 */
body.wbr_debug_mode span.wbrspan
{
    border-style: dotted;
    border-width: 0.5px;
}
/* 通常の分かち書きのデバッグ表示 */
body.wbr_debug_mode span.wbrspan:not(.read_last_wbr):after
{
    content: '■';
    color:#FFC0C0 !important;
}
/* 連文節の分かち書きのデバッグ表示 */
body.wbr_debug_mode span.wbrspan.wbr_level2::after
{
    content: '■';
    color:red !important;
}

td.infty_itemize_item span.wbrspan
{
    white-space: nowrap !important;
}
section:not(.vertical_section) td.infty_itemize_item 
{
    vertical-align: top;
    line-height: 0;
}
td.infty_itemize_item span.wbrspan
{
    white-space: nowrap !important;
}