.grid-item { max-width: 100px; }




body {
 margin: 0px 0 1px 0;
 font-size: 80%;
 font-family: 'ヒラギノ角ゴ ProN W3', 'モリサワ 新ゴ R', 'Droid Sans', メイリオ, 'sans-serif', Helvetica, Arial, 'Hiragino Kaku Gothic ProN';
 -webkit-text-size-adjust: 100%;
 
 transformsSupported: false;
 
 overflow: hidden;
}
div.headerDiv
{
    border-bottom: 2px solid #FFA0A0;
    text-align: left;
    padding-bottom: 3px;
    margin-bottom: 5px;
    font-size: 80%;
}

.headerTitle{
    padding: 0 5px 0 3px; font-size: 120%;
}
.headerSub{
    font-size: 90%; padding: 0 3px;
}

.noteLeft{
    display:table-cell; width: 30px; border: none; vertical-align: top;
}


.noteLeftBtnDiv{
    display:table;
}
.noteLeftBtnDiv_line{
    display:table; border-top: 1px solid #ccc;
}

.noteLeftBtnDiv_btnDiv{
    display:table-cell; width: 30px;
}
.noteLeftBtnDiv_btnBtn{
    height:100%; width: 30px;
}

.noteLeftBtnDiv_txtDiv{
    display:table-cell; width: 60px; font-size:60%; vertical-align: middle;
}



.noteRight_pages{
    margin-top: 5px; padding: 5px 1px;    
    width: 100%; position:relactive;
}

.noteRightRight_detail{
    margin-top: 5px; padding: 5px 1px;    
    border: 1px solid #008;
}


.page_head{
    font-size:90%;
}
.page_summary{
    padding-left: 5px;
    float: left;
}
.page_footer{
    white-space:nowrap;
    text-align: right;
    padding-right: 5px;
    float: right;
    display: block;
}
.page_footerRole
{
    padding: 0px;
    margin: 0 1px 2px 1px;
}
.page_footerDate{
    font-size: 90%;
    margin-top: 2px;
}

.btnRensyo{
    margin: 1px;
    background: transparent;
    line-height: initial;
    min-height: initial;
    
    height:100%; 
    padding: 1px 5px 0px 1px; 
    color: rgba(255,95,95,0.8); 
    border: 1px solid rgba(255,95,95,0.7); 
    border-radius: 6px;
}



.btnColorRed{
    color:rgba(255,95,95,0.7);
}
.btnColorBlack{
    color: #000;
}
.btnColorGray{
    color: #aaa;
}





.notePageDetail{
    border: none; 
    position:fixed; top:0; right: 0; 
    margin:2% 10%; 
    padding: 4px 3px 5px 3px;
    z-index: 10; 
    transition-property: all; 
    transition-duration: 0.2s; 
    width:0%; opacity: 0;
    background: rgba(240,240,240,0.8);
}

@media screen and (max-width: 567px) {
 .screen_center{
     width: 100%;
 }
 .screen_right{
     width: 0px;
     display: none;
     visibility: hidden;
 }
}
@media screen and (min-width: 568px) {
 .screen_center{
     width: 300px;
 }
 .screen_right{
     display: show;
     width: auto;
     visibility: initial;
 }
}



.defaultBtn
{
    margin: 3px 2px;
    border-style: solid;
    border-width: 1px 2px 2px 1px;

    color:#000;

    background: transparent;
    border-color: #FFA0A0;
    border-left-color: #FFE0E0;
    border-top-color: #FFE0E0;
    
    line-height: initial;
    min-height: initial;
    padding: 2px 4px;
}

.miniBtn{
    margin: 1px;
    background: transparent;
    line-height: initial;
    min-height: initial;
    color: #000;
    padding: 0px;
    
}

/** page tab button */
.pageTag{
    border: none;
}
.tabBtn{
    background: rgba(255,255,255,1);
    border: 1px solid rgba(255,160,160,0.8);
    line-height: initial;
    min-height: initial;
    color: #000;
    padding: 1px 10px 1px 2px;
}
.tabBtn:active{
    background: rgba(255,160,160,0.2);
    color: rgba(255,160,160,0.9);
}
.tagBtnClose{
    background: rgba(255,255,255,1);
    border: 1px solid rgba(255,160,160,0.8);
    line-height: initial;
    min-height: initial;
    color: #500;    
    margin:0px 2px 0px -15px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.3em;
    vertical-align: middle;
}
.tagBtnClose:active{
    background: rgba(255,250,250,1);
    color: #500;    
}

/** modal */
.modal__content{
    vertical-align: top; padding-top:10px;
}

/** detail */
.detail_text{
    padding-left: 5px;
    border-bottom: 1px solid #0a0;
}
.page_footer1{
    white-space:nowrap;
    vertical-align: bottom;
}
.page_footer2{
    text-align: right;
    padding-right: 5px;
    float: right; 
    display: block;
}
.page_footerRole
{
    padding: 0px;
    margin: 0 1px;
}
.page_footerDate{
    font-size: 90%;
}


/** image item */
.imgGrid{
    width: 100%;
}
.imgSquare{
    border:1px solid rgba(255,160,160,0.8); float:left; margin: 2px;
    margin-bottom: 4px;
}
.imgPageView{
    /* box-shadow */
    box-shadow:4px 4px 3px -3px rgba(255,160,160,0.8);
    -moz-box-shadow:4px 4px 3px -3px rgba(255,160,160,0.8);
    -webkit-box-shadow:4px 4px 3px -3px rgba(255,160,160,0.8);    
    /* border-radius */
    border-radius:4px;
    -moz-border-radius: 4px ;
    -webkit-border-radius: 4px ;
    
    overflow: hidden;
}

.isWrite{
    max-width: 98px; position: relative;
}
.isLine{
    max-width: 108px; 
}
.isLine_thumbnail{
    min-width: 80px; min-height: 50px; border-radius: 4px;
}
.ibList_thumbnail{
    min-width:80px; min-height: 50px; padding:0px; vertical-align: middle;
}
.isDetail{
    max-width: 148px; 
}

/** image button */
.imgBtn{
    background: transparent; border: none; padding: 0px; margin: 0px; line-height: initial;
}
.ibWrite{
    max-width:95px; max-height: 95px; padding:1px; vertical-align: middle;
}
.ibList{
    max-width:105px; max-height: 105px; padding:1px; vertical-align: middle;
}
.ibDetail{
    max-width:145px; max-height: 145px; padding:1px; vertical-align: middle;
}

.imgDelSquare{
    position:absolute; top:0; right: 0; width: 20px; height: 20px;
}
.imgDelBtn{
    background: transparent; border: none; padding: 0px; margin: 0px;
}


div.footerDiv
{
    text-align: center;
    margin: 5px 0 5px 0;
    padding: 10px 0 2px 0;
    border-top: 2px solid;
    border-right: none;
    border-bottom: none;
    border-left: none;

    border-color: #FFA0A0;    
}


div.lastDiv
{
    width: 98%;
    
    text-align: center;
    font-size: 70%;
    padding: 5px 0 4px 5px; 
    margin-top: 5px;
    border-top: 1px solid #FFA0A0;
    border-bottom: 1px solid #FFA0A0;
    
    background: #f9f9f9;
    position: fixed;
    bottom: 0;
    z-index: 9999;
}


div.lastDiv2
{
    width: 98%;
    
    text-align: center;
    font-size: 70%;
    padding: 5px 0 4px 5px; 
    margin-top: 5px;
    border-top: 1px solid #FFA0A0;
    border-bottom: 1px solid #FFA0A0;
    
    background: #f9f9f9;
    height: 2em;
}



.note_page{
 border: 1px solid transparent;
 border-top-color: #FFE0E0;
 border-right-color: #FFA0A0;
 border-bottom-color: #FFA0A0;
 font-size:80%;
 min-height: 4.5em;
 padding-bottom: 4px;
}
div.page_footer a
{
}




@font-face{
    font-family:Batch;
    src:url('./font_batch/batch-icons-webfont.eot');
    src:url('./font_batch/batch-icons-webfont.eot?#iefix') format('embedded-opentype'),
      url('./font_batch/batch-icons-webfont.woff') format('woff'),
      url('./font_batch/batch-icons-webfont.ttf') format('truetype'),
      url('./font_batch/batch-icons-webfont.svg#batchregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

.batch {
    font-family:"Batch"; /*or whatever you've decalred your font name as*/
    font-size:16px;
    line-height:1;
    display:inline-block;
}
.batch:before {
    content:attr(data-icon);
}






div.normalDiv
{
    padding: 5px 0 0 5px; 
    margin-right:5px; 
    margin-left: 2px;  
    border-right: 1px solid #FFA0A0; 
    border-bottom: 1px solid #FFA0A0;
}




i{
    font-style: initial;;
}



.box { width : 300px; height : 100px; margin-top : 50px; }



.icon_div_open{
    border-top-left-radius: 15px; border-bottom-left-radius: 15px; width: initial; min-width: 30px;
}
.icon_div_close{
    border-top-left-radius: 15px; width: initial; min-width: 30px;
}
.icon_margin{
    vertical-align: middle; margin-right: 3px; margin-left: 3px;
}