@charset "UTF-8";

/* css 5.0.6-2 Copyright (c) 2016 LOGOSWARE */

/* Pop
----------------------------------- */

/* 左右のめくりボタン */
#viewer-flipl-outer {
  left: 40px;
}

#viewer-flipl-outer.slidemenu-open {
  left: 360px;
}


/* 基本のボタン
----------------------------------- */
.color-btn,
.slidemenu .color-btn,
#footer .color-btn{
  border-radius: 20px;
  background: linear-gradient(180deg, #FFF, #FFF 9%, #e5e6e6 51%, #e7e7e7 77%, #e7e7e7 93%, #f5f5f5);
  background-blend-mode: multiply;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2),
             0px -1px 0px 1px rgba(0, 0, 0, 0.15),
             0px 1px 0px 1px rgba(255, 255, 255, 0.3);
}


/* 基本の閉じるボタン（ミニマム）
----------------------------------- */
#setting-panel-close,
.slidemenu .slidemenu-close-btn{
  padding: 0;
}

.panel-close .btn,
.slidemenu .slidemenu-close-btn .btn{
  border-radius: 50%;
  padding: 0;
  background-image: none;
  box-shadow: none;
}


/* 設定パネルの右上の×ボタン
----------------------------------- */
#setting-panel-close{
  margin: 6px 6px 0 0;
}



/**************************************************************

スライドメニュー
（共通）

**************************************************************/
/* スライドメニューのベース（共通） */
.slidemenu {
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
}


/* スライドメニュー内のOKボタン・キャンセルボタン
----------------------------------- */
/* ボタンのサイズ・形 */
.slidemenu .save-btn,
.slidemenu .cancel-btn{
  border: none;/* reset */
}

.slidemenu .save-btn .btn,
.slidemenu .cancel-btn .btn{
  padding: 0.5em 1.5em;

}

/* ボタン幅調整 */
.slidemenu .save-btn .btn{
  padding-left: 2.3em;
  padding-right: 2.3em;
}


/* 上部ボタン
----------------------------------- */
.slidemenu.slidemenu-titlebar-high .slidemenu-titlebar-inner{
  top: 10px;
}



/**************************************************************

スライドメニュー
（目次／ページ一覧／付箋一覧／閉じる）

**************************************************************/

/* 目次などの表示エリア
----------------------------------- */
#list-slidemenu .scroll-inner {
  top: 0;
  left: 0;
}


/* タブ
----------------------------------- */
/* タブ一式 */
#list-slidemenu .slidemenu-titlebar {
  width: 27px;
  height: auto;
  margin-left: 320px;
  background-color: transparent;/* タブエリアの背景色は無し */
  text-align: left;/* for IE */
}

/* 閉じる以外のタブ一式 */
#list-slidemenu .slidemenu-titlebar-inner {
  top: 1px;
}

/* タブのスタイル指定 */
#list-slidemenu .segmented .segmented-btn,
#list-slidemenu .slidemenu-close-btn {
  display: block;
  float: none;/* reset */
  border: none;/* reset */
}

#list-slidemenu .segmented .segmented-btn .btn,
#list-slidemenu .slidemenu-close-btn .btn {
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 2px 1px 2px 1px rgba(0, 0, 0, 0.2);
}

/* タブのサイズ指定 */
#list-slidemenu .color-btn,
#list-slidemenu .segmented .segmented-btn,
#list-slidemenu .segmented .segmented-btn .btn,
#list-slidemenu .slidemenu-close-btn,
#list-slidemenu .slidemenu-close-btn .btn{
  border-radius: 0 6px 6px 0;
  margin: 0;
  padding: 0;
  width: 27px;
  height: 150px;/* 100%だとIEで不具合発生するためサイズ固定 */
}

/* FLP-141 IE対策 */
#list-slidemenu .color-btn .btn-label,
#list-slidemenu .segmented .segmented-btn .btn-label,
#list-slidemenu .segmented .segmented-btn .btn .btn-label,
#list-slidemenu .slidemenu-close-btn .btn-label,
#list-slidemenu .slidemenu-close-btn .btn .btn-label {
  max-height: 100px;
}

/* 閉じる以外のタブ */
#list-slidemenu .segmented .segmented-btn{
  margin-bottom: 3px;
}

/* 閉じるタブ */
#list-slidemenu .slidemenu-close-btn {
  position: static;/* reset of absolute */
  margin:0;
  margin-top:1px;
  padding: 0;
}

/* タブの基本スタイル */
#list-slidemenu .color-btn{
  background: linear-gradient(180deg, #FFF, #FFF 9%, #e5e6e6 51%, #e7e7e7 77%, #dddddd 94%);
  background-blend-mode: multiply;
}

/* タブのアイコン */
#list-slidemenu .icon,
#list-slidemenu .slidemenu-close-btn .icon {
  display: block;
  margin-left: 2px;
}

#textindex-btn .icon {
  background-position: -30px -30px;
}

#thumbnail-btn .icon {
  background-position: -60px -30px;
}

#fusenlist-btn .icon {
  background-position: -120px -30px;
}

#list-slidemenu .slidemenu-close-btn .icon{
  background-position: 0 -30px;
  margin-bottom: 3px;
}

/* タブのラベル */
#list-slidemenu .btn-label,
#list-slidemenu .slidemenu-close-btn .btn-label {
  display: block;
  font-size: 11px;
  margin:0 0 0 8px;
  vertical-align: top;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  z-index: 100;
}

/* 矢印アイコン（ラベル下） */
#list-slidemenu .segmented .segmented-btn{
  position: relative;
}

#list-slidemenu .segmented .segmented-btn .btn-label:after {
  display: block;
  content: "";
  position: absolute;
  left: 9px;
  bottom: 8px;
  background-position: -51px -360px;
  width:10px;
  height: 10px;
}


/* テキスト目次
----------------------------------- */
.slidemenu #textindex-list .item .btn{
  padding: 2px 3px;
}

#textindex-tree .file .icon{
  visibility: visible;
  background-position: 0px -350px;
  width: 32px;
  height: 32px;
}

/* 付箋一覧
----------------------------------- */
.slidemenu #fusen-list .scroll-content{
  padding-left: 10px;
}

.tree .item .tree-label{
  padding: 2px 5px 0 0;
}


/**************************************************************

スライドメニュー
（フッターボタンクリックで表示されるもの）

**************************************************************/

/* テキスト（辞書）
----------------------------------- */
#share-dictionary-btn .save-btn.disabled .icon{
  background-position: -270px -350px;
}


/* 付箋編集
----------------------------------- */
/* 付箋削除ボタン */
.delete-btn .btn{
  margin-top: 4px;
  padding: 4px 20px;
}


/* ペン
----------------------------------- */
/* ボタン間隔 */
#tegaki-slidemenu .segmented .segmented-btn .btn,
.slidemenu .all-delete-btn .btn{
  margin: 0 5px;
}



/**************************************************************

下部コントローラー（フッター）

**************************************************************/
/* コントローラー背景 */
#footer{
  height:44px;
  box-shadow: 1px 2px 4px rgba(255, 255, 255, 0.3) inset,
              0px 0px 2px 1px rgba(0, 0, 0, 0.2);
}

.footer-space {
  bottom: 44px;/* #footerのheithgと同じ値 */
}

/* コントローラー背景の色 */
#footer-color {
  background: linear-gradient(180deg, #EEE, #EEE 4%, #e4e4e4 8%, #f4f4f4);
  background-blend-mode: multiply;
}

/* ボタン同士の間隔 */
.footer-list .box {
  margin: 2px 3px 0 3px;
}

/* ボタンのサイズ・形 */
#footer .footer-btn .btn{
  border-radius: 15px;
  padding: 0px 6px 4px 6px;
}

/* ボタンのアイコン */
.footer-btn .icon{
  display: block;
  float: left;
  margin-top: 2px;
}

/* ボタンのラベル */
.footer-btn .btn-label{
  display: block;
  float: right;
  padding-right: 5px;
  padding-top: 8px;
  font-size: 11px;
}


/* 検索
----------------------------------- */
#searchform{
  border-radius: 0 15px 15px 0;
  margin:0;
  padding: 0;
  width: 203px;/* 表示崩れ対策 */
  height: 30px;
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2),
              0px -1px 0px 1px rgba(0, 0, 0, 0.15),
              0px 1px 0px 1px rgba(255, 255, 255, 0.3);
}

#searchform #search-keyword {
  border: none;
  height: 30px;
}

#searchform #search-clear {
  margin-top: 5px;
}

#searchform #search-btn .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin: 0 0 0 2px;
  padding: 0px 11px 4px 2px;
  box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.3);
}

#searchform #search-btn .icon {
  margin:2px 0 0 5px;
}


/* めくりボタン
----------------------------------- */
/* めくりボタンの一部ラベル非表示 */
#fliplmax-btn .btn-label,
#fliprmax-btn .btn-label {
  display: none;
}

/* めくりボタン一体化 */
#fliplmax.box,
#flipl.box,
#flippage,
#flipr.box,
#fliprmax.box{
  margin: 0;
  padding: 0;
}

#footer #fliplmax .footer-btn .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 6px;
  padding-right: 4px;
}

#footer #fliprmax .footer-btn .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 4px;
  padding-right: 7px;
}

#footer #flipl .footer-btn .btn,
#footer #flipr .footer-btn .btn{
  border-radius: 0;
  padding-right: 5px;
}

#flipl .footer-btn .btn-label{
  padding-right: 10px;
}

/* 右へボタンのアイコンの右側表示 */
#flipr .footer-btn .icon{
  float:right;
}

#flipr .footer-btn .btn-label{
  float:left;
  padding-left: 10px;
  padding-right: 0;
}


/* ページ数表示＆入力欄
----------------------------------- */
input#flippage-word {
  border: none;
  height: 30px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2),
             0px -1px 0px 1px rgba(0, 0, 0, 0.15),
             0px 1px 0px 1px rgba(255, 255, 255, 0.3);
}


/* ブロック感
----------------------------------- */
.footer-list #search.box{
  padding-right: 10px;
}



/**************************************************************

非アクティブボタン

**************************************************************/
/* フッター
----------------------------------- */
#footer .disabled .color-btn,
#footer .disabled.hover .color-btn{
  background: none;
  background-color: rgba(0, 0, 0, 0.15);
  cursor: default;
}

#footer .disabled .color-btn .btn-label,
#footer .disabled.hover .color-btn .btn-label{
  color: rgba(0, 0, 0, 0.4);
}

#footer .disabled#fliplmax-btn .color-btn .icon{
  background-position: -90px -350px;
}

#footer .disabled#flipl-btn .color-btn .icon{
  background-position: -120px -350px;
}

#footer .disabled#flipr-btn .color-btn .icon{
  background-position: -150px -350px;
}

#footer .disabled#fliprmax-btn .color-btn .icon{
  background-position: -180px -350px;
}

#footer .disabled#zoomin-btn .color-btn .icon{
  background-position: -210px -350px;
}

#footer .disabled#zoomout-btn .color-btn .icon{
  background-position: -240px -350px;
}

/* スライドメニュー
----------------------------------- */
.slidemenu .disabled .color-btn,
.slidemenu .disabled.hover .color-btn{
  background: none;
  background-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.4);
  text-shadow: none;
}



/**************************************************************

縦長ウィンドウの場合

**************************************************************/

/* ペン（下にペン色・サイズ選択ボタン表示）
----------------------------------- */
/* ボタン調整 */
#footer #footer-tegakilist .footer-btn .btn{
  margin-top:-1px;
  padding: 2px 20px 4px;
}

/* ペン色選択 */
#footer #tegaki-color .btn{
  border-radius:0;
  margin-top: 0;
  padding: 0;
  background-image: none;
  box-shadow:none;
}

#footer #tegaki-color .color-btn{
  background: none;
}

/* ペン色選択詳細画面上部 */
.slidemenu-m .slidemenu-titlebar{
  background: linear-gradient(180deg, #EEE, #EEE 4%, #e4e4e4 8%, #f4f4f4);
  background-blend-mode: multiply;
  box-shadow: 1px 2px 4px rgba(255, 255, 255, 0.3) inset,
              0px 0px 2px 1px rgba(0, 0, 0, 0.2);
}

/* 閉じるボタンをミニマムに */
#footer #footer-tegakilist #tegakilist-close-btn{
  margin: 4px 0 0 0;
  padding: 0;
}

#footer #footer-tegakilist #tegakilist-close-btn .btn{
  border-radius: 50%;
  margin: 0;
  padding: 0;
  background-image: none;
  box-shadow: none;
}

#footer #footer-tegakilist #tegakilist-close-btn .icon{
  margin:0;
}

#footer #footer-tegakilist #tegakilist-close-btn .btn-label{
  display: none;
}



/**************************************************************

ブラウザ幅が狭い時のフッター表示調整
（#footer.min）

**************************************************************/
@media screen and (max-width:685px){

    #footer.min .btn-label{
      display: none;
    }

}



/**************************************************************

IE対策

**************************************************************/
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {

  .color-btn,
  .slidemenu .color-btn,
  #list-slidemenu .color-btn,
  #list-slidemenu .slidemenu-close-btn,
  .slidemenu-m .slidemenu-titlebar,
  #footer-color,
  #footer .color-btn{
    background-image: none;
  }

  #list-slidemenu.slidemenu .segmented .segmented-btn .btn .btn-label,
  #list-slidemenu.slidemenu .slidemenu-close-btn .btn .btn-label {
    margin-left: 7px;
  }

  .footer-btn .btn-label{
    padding-top: 9px;
  }

}


/**************************************************************

Edge対策

**************************************************************/
@supports (-ms-ime-align:auto) {

  .color-btn,
  .slidemenu .color-btn,
  #list-slidemenu .color-btn,
  #list-slidemenu .slidemenu-close-btn,
  .slidemenu-m .slidemenu-titlebar,
  #footer-color,
  #footer .color-btn{
    background-image: none;
  }

}