﻿body {
    overflow: hidden;
}

.ui-content {
    padding: 0px;
}

/*ボタンのスタイル*/
.ui-page-theme-a .ui-btn{
    background-color:rgba(200, 200, 200, 1);/*背景色*/
    font-size:12px;
}
/*ボタンの上にポインターが乗っているときの色*/
.ui-btn:hover{
    background-color:rgb(255, 255, 255);/*背景色*/
}

#dvCV, #dvCV2 {
    width: 80%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,1);
}

#dvCV2 {
    width: 40%;
    height: 40%;
    display: none;
}


#dvTextArea {
    width: 200px;
    height: 100%;
    position: absolute;
    /*background: rgba(180,180,150,0.95);*/
    background: rgba(250,250,250,0.95);
    color: black;
    /*padding: 1em;*/
    display: block;
    -ms-touch-action: none;
    touch-action: none;
    overflow: hidden;
}
#dvTextBody p {
    display:none;
}

#dvPosInfo{
    margin: 5px;
    background-color: rgba(213, 221, 246, 1);
}

#dvTextAreaText{
    margin: 5px;
    background-color: rgba(255, 232, 117, 1);
    padding: 4px;
}

#spnPageNo {
    margin: 20px;
    padding: 0.5em;
    background-color: white;
    width: 4em;
    text-align: center;
    border: 1pt solid #cccccc;
}

.clsPageBtn {
    margin-left: 0.5em;
}

#dvBtnBook {
    margin: 0 auto;
}

#dvThumbArea {
    height: 100%;
    overflow: auto;
    text-align: center;
    z-index: 0;
}

.clsImgThumb {
    margin-top: 20px;
    position: relative;
    /*width:70%;*/
}

.clsImgThumbClicked {
    box-shadow: 2px 2px 20px 5px lime;
    z-index: 1;
}

.clsUILayer {
    width: 350px;
    margin: 1em;
    border-radius: 10px;
    background-color: rgba(200,200,200,0.4);
}

    .clsUILayer .ui-slider-track {
        margin-left: 15px;
    }

    .clsUILayer .ui-slider {
        width: 200px;
        display: inline-block;
    }

    .clsUILayer .ui-slider-switch {
        width: 100px;
    }


#dvUITC .ui-slider-track {
    margin: 15px 15px 0 15px;
}

.clsInlineBlock {
    display: none;
}

/*Firefoxだけに適用されるCSSハック*/
/*よくわからんけど、Firefoxだけボタンが大きくなっちゃう。*/
@-moz-document url-prefix() {
    #dvUITR .ui-btn-ff {
        padding: 0.8em 0.83em;
    }
}

#dvBtnTurnLeft {
    display: inline-block;
}

#dvBtnTurnRight {
    display: inline;
}

#dvBtnRotate2 {
    display: none;
    width: 100%;
    margin: 1em;
    border-radius: 10px;
    background-color: rgba(200,200,200,0.4);
}

    #dvBtnRotate2 .ui-slider {
        display: inline-block;
        width: 140px;
    }

    #dvBtnRotate2 .ui-slider-track {
        margin: 15px 15px 0 15px;
    }


#dvBtnRotate {
    display: inline-block;
    width: 100%;
}

    #dvBtnRotate .ui-slider {
        display: inline-block;
        width: 140px;
    }

    #dvBtnRotate .ui-slider-track {
        margin: 15px 15px 0 15px;
    }

#dvBtnRotate3 {
    display: none;
    width: 100%;
    /*margin: 1em;*/
    border-radius: 10px;
    background-color: rgba(200,200,200,0.4);
}

    #dvBtnRotate3 .ui-slider {
        display: inline-block;
        width: 140px;
    }

    #dvBtnRotate3 .ui-slider-track {
        margin: 5px 15px 0 8px;
    }
    #dvBtnRotate3 .ui-slider-bg{
        background-color:rgba(0,0,0,0);
    }

    #dvBtnRotate3 span {
        margin-left: 0.5em;
        vertical-align: 12px;
    }

#btnTurnRight2 {
    margin-top: -21px;
}

#btnTurnLeft2 {
    margin-top: -21px;
}



input.ui-slider-input {
    display: none;
}

.clsToolTip {
    background: rgba(180,180,150,0.95);
    display: none;
    padding: 0.5em;
    text-shadow: none;
}

.clsToolTipTextE {
    display: none;
}

#dvUI {
    position: absolute;
    -ms-touch-action: none;
    touch-action: none;
}

#dvUITR, #dvUITL, #dvUIBR, #dvUITC {
    position: absolute;
}
/*#dvUITR{
    text-align: right;
}*/

#dvUI_Slider {
    position: absolute;
    display: none;
    /*background-color: rgba(255, 164, 0, 0.7);*/
    background: rgba(180,180,150,0.95);
    padding: 1em;
}

#dvUITC {
    width: 300px;
}

#btnMemoryArea {
    margin-left: 0.5em;
}

.ui-mobile .ui-page-active {
    overflow: hidden;
}

#dvTextJ, #dvTextE {
    text-shadow: none;
    width: 90%;
    height: 70%;
    overflow: auto;
    display: none;
    font-size: 1.2em;
    margin: 1em;
}

#dvTextMatsumuraE, #dvTextMatsumuraJ {
    display: none;
}

#dvAreaJ {
    height: 100%;
}

#dvAreaE {
    height: 100%;
    display: none;
}


.clsBtnLngChg {
    margin-right: 40px;
}

.clsPointed {
    /*background-color:red;*/
    margin: 1em;
    box-shadow: 2px 2px 20px 5px Lime;
    transition: box-shadow 1s;
}

.clsPointed2 {
    /*background-color:red;*/
    margin: 1em;
    box-shadow: 2px 2px 20px 5px Lime;
}

.clsTategaki {
    writing-mode: tb-rl; /* IE�Ǝ��d�l */
    writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-align: justify;
    text-justify: inter-ideograph;
}

.clsOvlArea {
    -webkit-animation: anmOvlArea 5s;
    animation: anmOvlArea 5s;
}

@-webkit-keyframes anmOvlArea {
    0% {
        background-color: rgba(0, 255, 0,0);
        box-shadow: 0px 0px 100px 25px rgba(0,255,0,0);
    }

    50% {
        background-color: rgba(0, 255, 0,0.3);
        box-shadow: 0px 0px 100px 25px rgba(0,255,0,0.4);
    }

    100% {
        background-color: rgba(0, 255, 0,0);
        box-shadow: 0px 0px 100px 25px rgba(0,255,0,0);
    }
}

@keyframes anmOvlArea {
    0% {
        background-color: rgba(0, 255, 0,0);
        box-shadow: 0px 0px 100px 25px rgba(0,255,0,0);
    }

    50% {
        background-color: rgba(0, 255, 0,0.3);
        box-shadow: 0px 0px 100px 25px rgba(0,255,0,0.4);
    }

    100% {
        background-color: rgba(0, 255, 0,0);
        box-shadow: 0px 0px 100px 25px rgba(0,255,0,0);
    }
}


.clsOvlStar {
    font-size: 3em;
    -webkit-animation: anmOvlStar 2s 5 alternate;
    animation: anmOvlStar 2s 5 alternate;
    color: lime;
    margin-top: -1em;
    text-shadow: Fuchsia 1px 1px 5px,Fuchsia -1px 1px 5px,Fuchsia 1px -1px 5px, Fuchsia -1px -1px 5px;
}

.clsOvlStarRight {
    text-align: right;
}

@-webkit-keyframes anmOvlStar {
    0% {
        color: lime;
        text-shadow: Fuchsia 1px 1px 5px,Fuchsia -1px 1px 5px,Fuchsia 1px -1px 5px, Fuchsia -1px -1px 5px;
    }

    50% {
        color: Fuchsia;
        text-shadow: lime 1px 1px 5px,lime -1px 1px 5px,lime 1px -1px 5px, lime -1px -1px 5px;
    }

    100% {
        color: lime;
        text-shadow: Fuchsia 1px 1px 5px,Fuchsia -1px 1px 5px,Fuchsia 1px -1px 5px, Fuchsia -1px -1px 5px;
    }
}

@keyframes anmOvlStar {
    0% {
        color: lime;
        text-shadow: Fuchsia 1px 1px 5px,Fuchsia -1px 1px 5px,Fuchsia 1px -1px 5px, Fuchsia -1px -1px 5px;
    }

    50% {
        color: Fuchsia;
        text-shadow: lime 1px 1px 5px,lime -1px 1px 5px,lime 1px -1px 5px, lime -1px -1px 5px;
    }

    100% {
        color: lime;
        text-shadow: Fuchsia 1px 1px 5px,Fuchsia -1px 1px 5px,Fuchsia 1px -1px 5px, Fuchsia -1px -1px 5px;
    }
}

.clsOvlStarTxt {
    font-size: 1em;
    -webkit-animation: anmOvlStar 2s 5 alternate;
    animation: anmOvlStar 2s 5 alternate;
    color: lime;
    text-shadow: Fuchsia 1px 1px 5px,Fuchsia -1px 1px 5px,Fuchsia 1px -1px 5px, Fuchsia -1px -1px 5px;
}

.clsOvlStarTxtTate {
    margin-top: -1em;
}

.clsOvlStarTxtYoko {
    margin-left: -1em;
}


.ui-icon-star-yellow:after {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E");
    background-color: rgb(255, 226, 74) !important;
}

.ui-alt-icon.ui-icon-star-yellow:after,
.ui-alt-icon .ui-icon-star-yellow:after {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E");
    background-color: rgb(255, 226, 74) !important;
}

.ui-nosvg .ui-icon-star-yellow:after {
    background-image: url(images/icons-png/star-white.png);
    background-color: rgb(255, 226, 74) !important;
}

.ui-nosvg .ui-alt-icon.ui-icon-star-yellow:after,
.ui-nosvg .ui-alt-icon .ui-icon-star-yellow:after {
    background-image: url(images/icons-png/star-black.png);
    background-color: rgb(255, 226, 74) !important;
}


/*�A�C�R���ǉ��͂������B*/
.ui-icon-rotate-right:after {
    background-image: url("./images/rotate-right.svg");
}
/* Fallback */
.ui-nosvg .ui-icon-rotate-right:after {
    background-image: url("./images/rotate-right.png");
}

.ui-icon-rotate-left:after {
    background-image: url("./images/rotate-left.svg");
}
/* Fallback */
.ui-nosvg .ui-icon-rotate-right:after {
    background-image: url("./images/rotate-left.png");
}

.ui-icon-question:after {
    background-image: url("./images/question.svg");
}
/* Fallback */
.ui-nosvg .ui-icon-question:after {
    background-image: url("./images/question.png");
}

.ui-icon-files-o:after {
    background-image: url("./images/files-o.svg");
}
/* Fallback */
.ui-nosvg .ui-icon-files-o:after {
    background-image: url("./images/files-o.png");
}
