/** @charset "utf-8"; */


html, body {
    width : 100% !important;
    height : 100% !important;
    text-align:center;
    margin                : 0 !important;
    padding               : 0 !important;
    /* 選択不可にする */
    -moz-user-select      : none;
    -webkit-user-select   : none;
    -khtml-user-select    : none;
    font-family           : 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;
}
*, *:before, *:after {
    -webkit-box-sizing  : border-box;
       -moz-box-sizing  : border-box;
         -o-box-sizing  : border-box;
        -ms-box-sizing  : border-box;
            box-sizing  : border-box;
}

/* プレビュー用のスタイル */
@media screen {

    body {
        background  : #eee;
    }

    .print-page-a4_p {
        top              : 0 !important;
        left             : 0 !important;
        margin           : auto;
        position         : relative;
        page-break-after : always !important;
        box-shadow       : 0 .5mm 2mm rgba(0,0,0,.3); /* ドロップシャドウ */
        overflow: hidden;
    }
    .print-page-a4_l{
        top         : 0 !important;
        left        : 0 !important;
        margin           : 10px auto;
        position         : relative;
        page-break-after : always !important;
        box-shadow       : 0 .5mm 2mm rgba(0,0,0,.3); /* ドロップシャドウ */
        overflow: hidden;
    }

    .print-fusen{
        overflow    : hidden;
	    font-size   : 12px;
        position    : absolute;
        /*background  : #ffffff;*/
        z-index     : 100;
        opacity     : 0.9;
        padding     : 4px;
        text-align  : left;
    }
    .print-fusen-text{
        position: absolute;
        z-index: 10;
    }
    .print-fusen-red{
        border      : solid 1px #ff9999;
        background  : #ffcccc;
    }
    .print-fusen-blue{
        border      : solid 1px #55aaff;
        background  : #aad5ff;
    }
    .print-fusen-yellow{
        border      : solid 1px #f8e58c;
    	background  : #ffff99;
    }
    .print_bg_image{
        position: absolute;
        z-index: 5;
        width : 100%;
        height : 100%;
    }

    /************************************************************
      [読み込み中ローダー用CSS]

     ***********************************************************/
     /*----------------------------------------------------
      ローダー
     -----------------------------------------------------*/
     #loader{
         display    : none;
         position   : fixed;
         z-index    : 120;
     }

    /* スピナーデザインCSS */
    .loader-css {
        font-size   : 10px;
        position    : relative;
        text-indent : -9999em;
    }

    .loader-css,
    .loader-css:after {
        border-radius   : 50%;
        width           : 8em;
        height          : 8em;
    }

    /* パーセント数値CSS */
    .loadingPercentage {
        float       : left;
        font-size   : 0.9rem;
        color       : #999;
        text-align  : center;
        width       : 100%;
        height      : 100%;
        margin-top  : -20px;
    }
    .loader-css{
        background: url("../img/parts/common/menu_loading.png");
        width               : 60px;
        height              : 60px;
        background-size     : 60px 60px;
        position            : absolute;
        -webkit-animation   : spin 1s linear infinite;
        -moz-animation      : spin 1s linear infinite;
        -ms-animation       : spin 1s linear infinite;
        -o-animation        : spin 1s linear infinite;
        animation           : spin 1s linear infinite;
    }
    #loader{
        width        : 60px;
        height       : 60px;
        margin-top   : -60px;
        margin-left  : -30px;
        top          : 50%;
        left         : 50%;
    }

    .image-area{
        position : absolute;
        top:0;
        left:0;
    }
    _:lang(x)::-internal-media-controls-overlay-cast-button,
    .image-area{
        image-rendering: -webkit-optimize-contrast;
    }
    .image-area.landscape{
        position : relative;
    }
    .openLeft{
        float    : left;
    }
    .openRight{
        float    : right;
    }

    .messi-content{
        text-align : left;
    }


    .messi-box {
        position   : fixed !important;
        z-index: 300 !important;
    }

}

@media print {

    #loader{
        display: none;
    }


    body{
        margin-top: 0 !important;
        -webkit-print-color-adjust: exact;
    }

    .print-page-a4_p {
        top              : 0 !important;
        left             : 0 !important;
        margin           : auto;
        position         : relative;
        overflow: hidden;
    }

    .print-page-a4_l {
        top              : 0 !important;
        left             : 0 !important;
        margin           : auto;
        position         : relative;
        overflow: hidden;
    }

    .image-area{
        position : absolute;
        top:0;
        left:0;
    }
    _:lang(x)::-internal-media-controls-overlay-cast-button,
    .image-area{
        image-rendering: -webkit-optimize-contrast;
    }
    .image-area.landscape{
        position : relative;
    }
    .openLeft{
        float    : left;
    }
    .openRight{
        float    : right;
    }

    .print-fusen{
        overflow    : hidden;
        font-size   : 12px;
        position    : absolute;
        /*background  : #ffffff;*/
        z-index     : 100;
        opacity     : 0.9;
        padding     : 4px;
        text-align  : left;
    }
    .print-fusen-text{
        position: absolute;
        z-index: 10;
    }
    .print-fusen-red{
        border      : solid 1px #ff9999;
        background  : #ffcccc !important;
    }
    .print-fusen-blue{
        border      : solid 1px #55aaff;
        background  : #aad5ff !important;
    }
    .print-fusen-yellow{
        border      : solid 1px #f8e58c;
    	background  : #ffff99 !important;
    }
    .print_bg_image{
        position: absolute;
        z-index: 5;
        width : 100%;
        height : 100%;
    }
}

@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
    0% {-ms-transform: rotate(0deg);}
    100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
    0% {-o-transform: rotate(0deg);}
    100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}