/* ====================================================
 * ボディ
 * ==================================================*/
body{
  padding: 0px;
  margin: 0px;
  font-family: 'M PLUS Rounded 1c', 'Product Sans', Arial, sans-serif;
  font-weight: bolder;
  background-color: #f0f0f0;
}
  body.noscroll {
    position: fixed;
    overflow-y: scroll;
  }
  body::-webkit-scrollbar{
    width: 10px;
    height: 10px;
  }
  body::-webkit-scrollbar-track{
    background: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: inset 0 0 2px #fff; 
  }
  body::-webkit-scrollbar-thumb{
    background: #ccc;
    border-radius: 10px;
    box-shadow: none;
    -webkit-transition: 0.6s;
     -moz-transition: 0.6s;
     -ms-transition: 0.6s;
     -o-transition: 0.6s;
     transition: 0.6s;
  }
    body::-webkit-scrollbar-thumb:hover{
      background: #bbb;
    }
@media screen and (max-width:750px){
  div.tab-list-btn,ol#tab-list,ul.tabs{
    display: none;
  }
}
a{
  text-decoration: none;
  color: #000;
}
input{
  outline: none;
  border: none;
  background-color: transparent;
}
.hide{
  display: none;
}
.dammy{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 12;
}
.transition{
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}


/* ====================================================
 * Googleアイコン
 * ==================================================*/
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  color: #757575;
}
.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  color: #757575;
}

/* ====================================================
 * ヘッダー
 * ==================================================*/
header{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 70px;
  border-bottom: 10px solid #eee;
  background-color: #fff;
  z-index: 11;
}
  /* ----------------------------------------------------
   * ロゴ
   * --------------------------------------------------*/
  header div.logo{
    position: absolute;
    top: 6px;
    left: 60px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    /*background-image: url("/img/icon/mi2.png");*/
    background-size: 60px auto;
    background-position: center center;
  }
  /* ----------------------------------------------------
   * ラベル
   * --------------------------------------------------*/
  header div.label{
    position: absolute;
    background-color:rgb(189, 155, 62);
    color: #fff;
    top: 17px;
    left: 130px;
    padding: 0px 5px;
    font-size: 9px;
    border-radius: 10px;
    display: none;
  }
  header div.label.label-sub{
    display: block;
  }
  
  /* ----------------------------------------------------
   * メニュー
   * --------------------------------------------------*/
  header div.menu{
    position: absolute;
    width: 36px;
    height: 36px;
    top: 5px;
    left: 10px;
    cursor: pointer;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
    header div.menu:hover{
      background-color: #ddd;
      border-radius: 18px;
      -webkit-border-radius: 18px;
      -moz-border-radius: 18px;
    }
  header div.menu i{
    position: absolute;
    top: 6px;
    left: 6px;
  }
  
  /* ----------------------------------------------------
   * タイトル
   * --------------------------------------------------*/
  header div.title{
    position: absolute;
    top: 22px;
    left: 123px;
    letter-spacing: 1px;
    color: #777;
  }
    header div.title span{
      font-size: 13px;
      margin-left: 7px;
    }
  header div.title.label-sub{
    top: 28px;
  }

  /* ----------------------------------------------------
   * 検索ボックス
   * --------------------------------------------------*/
  header div.search{
    position: absolute;
    width: 120px;
    height: 48px;
    top: 11px;
    left: 230px;
    background-color: #f5f5f5;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
   }
    header div.search:hover,
    header div.search:focus-within{
      background-color: #f0f0f0;
    }
    header div.search.open,
    header div.search:focus-within{
      width: 200px;
    }
    header > div.search i{
      position: absolute;
      top: 6px;
      left: 10px;
    }
     header div.search i{
       position: absolute;
       top: 6px;
       left: 6px;
     }
     header div.search div.icn{
       position: absolute;
       top: 8px;
       left: 6px;
       width: 36px;
       height: 36px;
       z-index: 4;
       -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
       -ms-transition: 0.5s;
       -o-transition: 0.5s;
       transition: 0.5s;
     }
       header div.search i#down{
         display: none;
         cursor: pointer;
         z-index: 8;
       }
       header div.search #down{
         left: 410px;
         top: 12px;
         color: rgba(0,0,0,0.1);
         -webkit-transition: 0.5s;
         -moz-transition: 0.5s;
         -ms-transition: 0.5s;
         -o-transition: 0.5s;
         transition: 0.5s;
       }
         header div.search #down:hover{
           color: rgba(0,0,0,0.5);
         }
     header div.search input{
       position: absolute;
       top: 5px;
       left: 40px;
       width: 145px;
       height: 40px;
       font-size: 16px;
       outline: none;
       border: none;
       background-color: transparent;
       font-family: "M PLUS Rounded 1c";
     }

  /* ----------------------------------------------------
   * カレンダーボックス
   * --------------------------------------------------*/
   header div#calendar{
     position: absolute;
     width: 250px;
     height: 50px;
     top: 11px;
     left: 230px;
     background-color: #f5f5f5;
     border-radius: 30px;
     -webkit-border-radius: 30px;
     -moz-border-radius: 30px;
     -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -ms-transition: 0.5s;
     -o-transition: 0.5s;
     transition: 0.5s;
   }
   header div#calendar.nosearch{
     left: 250px;
   }
     header div#calendar i{
       position: absolute;
       top: 5px;
       left: 6px;
     }
     header div#calendar div.icn{
       position: absolute;
       top: 8px;
       left: 6px;
       width: 36px;
       height: 36px;
       z-index: 4;
       -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
       -ms-transition: 0.5s;
       -o-transition: 0.5s;
       transition: 0.5s;
    }
    header div#calendar div.between{
      position: absolute;
      top: 8px;
      left: 115px;
      width: 14px;
    }
      header div#calendar div.between i{
        font-size: 13px;
        top: 12px;
        color: #999;
      }
    header div#calendar div.date-btn{
      position: absolute;
      width: 80px;
      height: 50px;
      text-align: center;
      left: 40px;
      cursor: pointer;
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      -ms-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s;
    }
      header div#calendar div.date-btn:hover{
        background-color: #ddd;
      }
    header div#calendar div.date-btn.end{
      left: 135px;
    }
      header div#calendar div.date-btn p,
      div#header div#date_selector div.date-btn p{
        position: absolute;
        line-height: 14px;
        padding: 0px;
        margin: 0px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        white-space: nowrap;
      }
        header div#calendar div.date-btn p.year{
          font-size: 11px;
          top: 8px;
        }
        header div#calendar div.date-btn p.day{
          bottom: 10px;
        }
    header div#calendar div.st_close,
    header div#calendar div.ed_close{
      position: absolute;
      top: 3px;
      left: 100px;
      width: 18px;
      height: 18px;
      border-radius: 9px;
      -webkit-border-radius: 9px;
      -moz-border-radius: 9px;
      z-index: 5;
      cursor: pointer;
    }
    header div#calendar div.ed_close{
      left: 195px;
    }
    header div#calendar div.st_close.hide,
    header div#calendar div.ed_close.hide{
      display: none;
    }
      header div#calendar div.st_close i,
      header div#calendar div.ed_close i{
        position: absolute;
        top: 1px;
        left: 2px;
        font-size: 16px;
        color: #aaa;
      }
      header div#calendar div.st_close:hover i,
      header div#calendar div.ed_close:hover i{
        color: #000;
      }

  /* ----------------------------------------------------
   * 統計ソート切り替えボタンボックス
   * --------------------------------------------------*/
  header div#sort-btns{
     position: absolute;
     width: 31px;
     height: 50px;
     top: 11px;
     left: 490px;
   }
    header div#sort-btns .sort-btn{
      position: absolute;
      top: 12px;
      left: 0px;
      width: 31px;
      height: 51px;
      cursor: pointer;
    }
      header div#sort-btns .sort-btn.act .btn-bdr{
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: #eee;
        width: 31px;
        height: 31px;
        border-radius: 16px;
      }
      header div#sort-btns.a .sort-btn.act .btn-bdr,
      header div#sort-btns .sort-btn.act:hover .btn-bdr{
        background-color: #dfdfdf;
      }
      header div#sort-btns .sort-btn.product{
        left: 32px;
      }
      header div#sort-btns .sort-btn.matome{
        left: 64px;
      }
      header div#sort-btns .sort-btn.feature{
        left: 96px;
      }
      header div#sort-btns .sort-btn.home{
        left: 128px;
      }
      header div#sort-btns .sort-btn.all{
        left: 160px;
      }
      header div#sort-btns .sort-btn i{
        position: absolute;
        top: 5px;
        left: 5px;
        font-size: 21px;
        color: #aaa;
      }
      header div#sort-btns.a .sort-btn.act i,
      header div#sort-btns .sort-btn.act:hover i{
        color: #777;
      }
  header div#sort-title{
    position: absolute;
    max-width: 150px;
    height: 20px;
    line-height: 20px;
    top: 27px;
    left: 490px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 15px;
    background-color: #aaa;
    letter-spacing: 0px;
  }

  /* ----------------------------------------------------
   * タブ
   * --------------------------------------------------*/
  header > ul.tabs {
    position: absolute;
    bottom: -14px;
    right: 20px;
    list-style-type: none;
  }
  .tabs li {
    float: left;
    position: relative;
    height: 40px;
  }
    .tabs li i {
      position: absolute;
      top: 11px;
      left: 15px;
      font-size: 21px;
      color: #aaa;
      z-index: 5;
    }
    .tabs a {
      float: left;
      padding-left: 43px;
      padding-right: 19px;
      padding-top: 1px;
      text-decoration: none;
      color: #aaa;
      font-size: 14px;
      line-height: 42px;
      background-color: #fff;
      letter-spacing: 0.5px;
      -webkit-border-top-left-radius: 10px;
      -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -moz-border-radius-topright: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -ms-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
    }
    .tabs .active {
      z-index: 3;
    }
      /* アクティブなタブ */
      .tabs .active a {
        background-color: #f0f0f0;
        color: #777;
      }
      .tabs .active i {
        color: #777;
      }
      /* ホバー状態のタブ */
      .tabs .hover a {
        background-color: #f7f7f7;
      }
    .tabs li:before, .tabs li:after,
    .tabs li a:before, .tabs li a:after {
      position: absolute;
      bottom: 0;
    }
    .tabs .hover:after, .tabs .hover:before,
    .tabs .hover a:after, .tabs .hover a:before,
    .tabs .active:after, .tabs .active:before,
    .tabs .active a:after, .tabs .active a:before {
      content: "";
    }
    /* アクティブなタブの下の背景 */
    .tabs .active:before, .tabs .active:after {
      background-color: #f0f0f0;
      z-index: 1;
    }
    /* ホバー状態のタブの下の背景 */
    .tabs .hover:before, .tabs .hover:after {
      background-color: #f7f7f7;
      z-index: 1;
    }
    .tabs li:before, .tabs li:after {
      background: #fff;
      top: 22px;
      width: 20px;
      height: 20px;
    }
    .tabs li:before {
      left: -20px;
    }
    .tabs li:after {
      right: -20px;
    }
    /* 四角を円弧で隠し、下側の円弧を生成する */
    .tabs li a:after, .tabs li a:before {
      width: 20px;
      height: 20px;
      background: #fff;
      top: 22px;
      z-index: 2;
    }
    .tabs li a:before {
      -webkit-border-bottom-right-radius: 10px;
      -moz-border-radius-bottomright: 10px;
      border-bottom-right-radius: 10px;
    }
    .tabs li a:after {
      -webkit-border-bottom-left-radius: 10px;
      -moz-border-radius-bottomleft: 10px;
      border-bottom-left-radius: 10px;
    }
    /* アクティブなタブの下の背景 */
    .tabs .active a:after,
    .tabs .active a:before {
      background: #fff;
    }
    .tabs .active.r a:after {
      background: #f7f7f7;
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -ms-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
    }
    .tabs .active.l a:before {
      background: #f7f7f7;
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -ms-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
    }
    /* ホバー状態のタブの下の背景 */
    .tabs .hover a:after,
    .tabs .hover a:before {
      background: #fff;
    }

    .tabs li:first-child.active a:before,
    .tabs li:last-child.active a:after {
      background: #fff;
    }
    .tabs li a:before {
      left: -20px;
    }
    .tabs li a:after {
      right: -20px;
    }
    /* アクティブタブのフォーカスで色が変わらないように */
    .tabs .active a:hover {
      background-color: #f0f0f0;
    }
  div.tab-list-btn{
    position: absolute;
    top: 35px;
    right: 124px;
    width: 37px;
    height: 37px;
    cursor: pointer;
    z-index: 3;
    display: none;
  }
  div.tab-list-btn.none{
    display: none;
  }
    div.tab-list-btn > i{
      position: absolute;
      font-size: 21px;
      top: 4px;
      left: 8px;
      color: #ccc;
    }
      div.tab-list-btn:hover > i,
      div.tab-list-btn.a > i{
        color: #aaa;
      }

  ol#tab-list{
    position: absolute;
    top: 55px;
    right: 60px;
    width: 180px;
    background-color: #ddd;
    list-style: none;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    z-index: 13;
    display: none;
  }
  ol#sort-list{
    position: absolute;
    top: 50px;
    left: 410px;
    width: 180px;
    background-color: #ddd;
    list-style: none;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    z-index: 13;
    display: none;
  }
    ol#sort-list li,
    ol#tab-list li{
      position: relative;
      letter-spacing: 1px;
      margin: 0px;
      padding-left: 43px;
      padding-top: 2px;
      font-size: 14px;
      line-height: 30px;
      color: #555;
      cursor: pointer;
      border-radius: 16px;
      -webkit-border-radius: 16px;
      -moz-border-radius: 16px;
    }
      ol#sort-list li:hover,
      ol#tab-list li:hover{
        background-color: #eee;
      }
      ol#sort-list li i,
      ol#tab-list li i{
        position: absolute;
        top: 5px;
        left: 13px;
        font-size: 21px;
      }
      ol#sort-list li i{
        top: 6px;
      }
      ol#sort-list li.a,
      ol#tab-list li.a{
        background-color: #fff;
      }
      ol#sort-list li[mode=edit],
      ol#tab-list li[mode=edit]{
        background-color: #e5e5e5;
      }
        ol#sort-list li[mode=edit]:hover,
        ol#tab-list li[mode=edit]:hover{
          background-color: #eee;
        }

    .triangle_sort,
    .triangle{
      position: absolute;
      top: 24px;
      right: 0px;
      z-index: 15;
      overflow: hidden;
      background-color: transparent;
      position: relative;
      margin: 0 auto;
      border-radius: 30%;
      transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
      display: none;
    }
    .triangle_sort{
      top: 31px;
      right: 2px;
    }
    .triangle_sort, .triangle_sort:before, .triangle:after,
    .triangle, .triangle:before, .triangle:after{ 
      width: 20px;
      height: 20px;
    }
    .triangle_sort:before, .triangle_sort:after,
    .triangle:before, .triangle:after{
      position: absolute;
      content: '';
    }
    .triangle_sort:before,
    .triangle:before{
      background-color: #ddd;
      border-radius: 20% 20% 20% 53%;
      transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
                               skewX(30deg) scaleY(.866) translateX(-24%);
    }
    .triangle_sort:after,
    .triangle:after{
      background-color: #ddd;
      border-radius: 20% 20% 53% 20%;
      transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
                               skewX(-30deg) scaleY(.866) translateX(24%);
    }



/* ====================================================
 * スライドメニュー
 * ==================================================*/
div#slide-menu{
  position: absolute;
  top: 0px;
  left: -220px;
  width: 220px;
  height: 100%;
  background-color: #fff;
  z-index: 12;
  border-right: 2px solid #ccc;
  display: none;
}
  div#slide-menu > div.menu{
    position: absolute;
    width: 36px;
    height: 36px;
    top: 5px;
    left: 10px;
    cursor: pointer;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    background-color: #ddd;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
  }
    div#slide-menu > div.menu:hover{
      background-color: #eee;
    }
    div#slide-menu > div.menu i{
      position: absolute;
      top: 6px;
      left: 6px;
    }
  div#slide-menu > ul{
    position: absolute;
    padding: 0;
    width: 220px;
    top: 70px;
  }
    div#slide-menu > ul > li{
      position: relative;
      line-height: 44px;
      color: #454545;
      cursor: pointer;
      list-style: none;
      padding-left: 60px;
      letter-spacing: 1px;
      color: #666;
    }
      div#slide-menu > ul > li.a{
        background-color: #f5f5f5;
      }
      div#slide-menu > ul > li i{
        position: absolute;
        left: 22px;
        top: 11px;
        font-size: 22px;
      }
      div#slide-menu > ul > li:hover{
        background-color: #eee;
      }
      div#slide-menu > ul > li.head-line{
        background-color: #f5f5f5;
        color: #777;
        font-size: 11px;
        line-height: 24px;
        padding-left: 15px;
        cursor: default;
      }

/* ====================================================
 * 設定
 * ==================================================*/
article input[type=radio],
article input[type=checkbox] {
  display: none;
}
article input#topic,
article input#attr {
  width: 250px;
  padding: 10px 20px;
  background-color: #fdfdfd;
  font-size: 13px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}
article input#topic{
  width: 100px;
}
  article label {
    background-color: #888;
    text-align: center;
    letter-spacing: 1px;
    color: #fff;
    font-size: 13px;
    padding: 10px 15px;
    margin-left: 5px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    white-space: nowrap;
    cursor: pointer;
  }
  article label.small {
    font-size: 11px;
    padding: 5px 8px;
  }
    article input[type="radio"]:checked + label,
    article input[type="checkbox"]:checked + label {
      background-color: rgb(184, 55, 55);
    }
    article input[type="radio"]:checked + label.small,
    article input[type="checkbox"]:checked + label.small {
      background-color: rgb(184, 102, 55);
    }
article.settings div {
  padding-bottom: 10px;
  position: relative;
}
  article.settings div p {
    padding-bottom: 5px;
  }
  article.settings div p.title {
    font-size: 12px;
  }
  article.settings div p.sub-title {
    font-size: 11px;
    padding-top: 10px;
    padding-bottom: 0px;
  }
  article.settings div p.label {
    padding-left: 30px;
  }
    article.settings div p.label i {
      position: absolute;
      top: -1px;
      left: 0px;
    }
  article.settings div.count {
    padding-bottom: 25px;
  }
  article.settings div.area_attr {
    margin-left: 10px;
    padding-bottom: 20px;
  }
  article.settings div.area_attr.close {
    display: none;
  }
article.settings div.btn {
  padding-left: 0px;
  padding-top: 40px;
}
  article.settings div.btn div.regist {
    padding: 7px 40px;
    display: inline-block;
    background-color: #0c5197;
    color: #fff;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    cursor: pointer;
  }
    article.settings div.btn div.regist:hover {
      background-color: #003366;
    }
article.message {
  padding-left: 30px;
  padding-top: 0px;
}
  article.message div {
    padding-bottom: 3px;
    padding-top: 2px;
    padding-left: 30px;
    margin-left: 20px;
    position: relative;
  }
    article.message div i {
      top: 0px;
      left: 0px;
      position: absolute;
    }
  article.message p {
    padding-bottom: 10px;
    padding-top: 2px;
    padding-left: 30px;
    margin-left: 20px;
    font-size: 12px;
    color: #555;
  }

/* ====================================================
 * レポートビュー
 * ==================================================*/
div#report-view{
  position: fixed;
/*  bottom: 0px;*/
  bottom: -250px;
  width: 100%;
  height: 250px;
  border-top: 10px solid #eee;
  background-color: #fff;
  z-index: 12;
  box-sizing: border-box;
  padding: 10px;
  overflow-y: auto;
  display: none;
}
  div#report-view::-webkit-scrollbar{
    width: 10px;
    height: 10px;
  }
  div#report-view::-webkit-scrollbar-track{
    background: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: inset 0 0 2px #fff; 
  }
  div#report-view::-webkit-scrollbar-thumb{
    background: #ccc;
    border-radius: 10px;
    box-shadow: none;
    -webkit-transition: 0.6s;
     -moz-transition: 0.6s;
     -ms-transition: 0.6s;
     -o-transition: 0.6s;
     transition: 0.6s;
  }
    div#report-view::-webkit-scrollbar-thumb:hover{
      background: #bbb;
    }
  div#report-view div.label{
    display: inline-block;
    background-color: #777;
    padding: 1px 12px 1px 4px;
    color: #fff;
    font-size: 12px;
    border-radius: 15px;
    margin-bottom: 10px;
  }
  div#report-view div.close{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    background-color: #fff;
    cursor: pointer;
    display: none;
    z-index: 2;
  }
    div#report-view div.close i{
      position: absolute;
      top: 3px;
      left: 3px;
    }
  div#report-view > .list {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 100%;
    grid-auto-rows: 30px;
  }
    div#report-view > .list > .item {
      margin: 0;
      display: grid;
      font-size: 14px;
      grid-template-rows: 1fr auto;
      padding-top: 2px;
      padding-bottom: 5px;
      padding-top: 0px;
      break-inside: avoid;
      border-radius: 15px;
      background-color: #f9f9f9;
      cursor: default;
      -webkit-transition: 0.6s;
      -moz-transition: 0.6s;
      -ms-transition: 0.6s;
      -o-transition: 0.6s;
      transition: 0.6s;
      padding-bottom: 15px;
    }
      div#report-view > .list > .item:nth-child(odd) {
        background-color: #fff;
      }
      div#report-view > .list > .item > .content {
        display: grid;
        grid-template-columns: repeat(6,1fr);
      }
        div#report-view > .list > .item > .content > div {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        div#report-view > .list > .item > .content > div > span {
          padding-left: 5px;
          font-size: 10px;
          color: #555;
        }
        div#report-view > .list > .item > .content > div:nth-child(1) {
          grid-column: 1 / 4;
        }
        div#report-view > .list > .item > .content > div:nth-child(2),
        div#report-view > .list > .item > .content > div:nth-child(3),
        div#report-view > .list > .item > .content > div:nth-child(4) {
          text-align: right;
        }

/* ====================================================
 * コンテンツビュー
 * ==================================================*/
div#content-view{
  position: fixed;
  top: 80px;
  right: -400px;
  /*right: 0px;*/
  width: 400px;
  height: 100%;
  background-color: #fff;
  z-index: 2;
  box-sizing: border-box;
  padding: 10px;
  overflow-y: none;
  display: none;
}
  div#content-view iframe{
    width: 100%;
    height: 100%;
    border: 0px;
  }
  div#content-view::-webkit-scrollbar{
    width: 10px;
    height: 10px;
  }
  div#content-view::-webkit-scrollbar-track{
    background: #eee;
    border: none;
    border-radius: 10px;
    box-shadow: inset 0 0 2px #fff; 
  }
  div#content-view::-webkit-scrollbar-thumb{
    background: #ccc;
    border-radius: 10px;
    box-shadow: none;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
  }
    div#content-view::-webkit-scrollbar-thumb:hover{
      background: #bbb;
    }

  div#content-view div.preview,
  div#content-view div.taglist,
  div#content-view div.close{
    position: fixed;
    top: 93px;
    right: 25px;
    width: 30px;
    height: 30px;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    background-color: #fff;
    cursor: pointer;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    z-index: 5;
    display: none;
  }
    div#content-view div.preview,
    div#content-view div.taglist{
      right: 60px;
    }
    div#content-view div.preview i,
    div#content-view div.taglist i,
    div#content-view div.close i{
      position: absolute;
      top: 3px;
      left: 3px;
    }
    div#content-view div.preview:hover,
    div#content-view div.taglist:hover,
    div#content-view div.close:hover{
      border-radius: 18px;
      -webkit-border-radius: 18px;
      -moz-border-radius: 18px;
      background-color: #ddd;
    }
  div#content-view table.spec{
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
  }
    div#content-view table.spec th{
      width: 25%;
      font-size: 12px;
      font-weight: normal;
      padding: 0px;
      text-align: left;
      color: #777;
      padding-bottom: 7px;
    }
    div#content-view table.spec td{
      width: 75%;
      font-size: 13px;
      padding-bottom: 7px;
    }
  div#content-view div.target{
    display: inline-block;
    font-size: 10px;
    background-color: rgb(110, 131, 97);
    color: #fff;
    padding: 1px 10px;
    margin-bottom: 5px;
    margin-top: 0px;
    width: auto;
    text-align: center;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
  }
  div#content-view div.label{
    display: inline-block;
    font-size: 10px;
    background-color: #555;
    color: #fff;
    padding: 1px 15px;
    margin-bottom: 5px;
    margin-top: 10px;
    width: 80px;
    text-align: center;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
  }
  div#content-view div.label.wide{
    width: auto;
    padding: 1px 20px;
  }
    div#content-view div.label.emotag{
      width: 100px;
      background-color: rgb(177, 93, 44);
    }
    div#content-view div.label.meta{
      background-color: rgb(177, 93, 44);
    }
    div#content-view div.label.top{
      margin-top: 0px;
    }
    div.content,
    div.media,
    div.article,
    div.title{
      padding: 5px 10px;
    }
    div#content-view img.preview{
      width: 60%;
      height: auto;
      border-radius: 5px;
      background-size: cover;
      background-position: center;
    }
    div#content-view div.label.wide.group{
      background-color: #137e37;
    }
    div#content-view div.label.wide.color{
      background-color: #802cb1;
    }
    div#content-view div.label.wide.phrase{
      background-color: #2c66b1;
    }
    div#content-view div.label.wide.impression{
      background-color: #c75b14;
    }
    div#content-view div.label.wide.seen{
      background-color: #b12c2c;
    }
    div#content-view div.label.wide.brand{
      background-color: #b12caa;
    }
    div#content-view div.label.wide.sex{
      background-color: #777;
    }
    div#content-view div.label.wide.pattern{
      background-color: #7d881f;
    }
  div#content-view div.meta.cmdty{
    padding-bottom: 10px;
  }
  div#content-view div.meta.tag{
    padding-bottom: 20px;
  }
  div#content-view div.meta div.keywords{
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    white-space: nowrap;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    background-color: rgb(44, 117, 177);
    color: #fff;
    padding: 0px 10px;
    line-height: 24px;
  }
  div#content-view div.meta div.tag{
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    white-space: nowrap;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    color: #fff;
    padding: 0px 10px;
    line-height: 24px;
    cursor: pointer;
  }
  div#content-view div.meta div.metatag{
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    white-space: nowrap;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    background-color: rgb(44, 117, 177);
    color: #fff;
    padding: 0px 10px;
    line-height: 24px;
    cursor: pointer;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ----------------------------------------------------
   * 検索ボックス
   * --------------------------------------------------*/
  div#content-view section#metasearch{
    position: relative;
    width: 200px;
    height: 50px;
    margin-bottom: 15px;
    background-color: #f0f0f0;
    border-radius: 8px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  }
    div#content-view section#metasearch i{
      position: absolute;
      top: 6px;
      left: 6px;
    }
    div#content-view section#metasearch div.icn{
      position: absolute;
      top: 8px;
      left: 6px;
      width: 36px;
      height: 36px;
      z-index: 4;
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      -ms-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s;
    }
      div#content-view section#metasearch i#down{
        display: none;
        cursor: pointer;
        z-index: 8;
      }
      div#content-view section#metasearch #down{
        left: 410px;
        top: 12px;
        color: rgba(0,0,0,0.1);
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
      }
        div#content-view section#metasearch #down:hover{
          color: rgba(0,0,0,0.5);
        }
    div#content-view section#metasearch input{
      position: absolute;
      top: 5px;
      left: 40px;
      width: 145px;
      height: 40px;
      font-size: 16px;
      outline: none;
      border: none;
      background-color: transparent;
    }


  div#content-view section.meta-group{
    width: 100%;
    clear: both;
  }
    div#content-view section.meta-group.top{
      margin-top: -10px;
    }
    div#content-view section.meta-group div.group-label{
      margin-right: 5px;
      margin-top: 5px;
      margin-bottom: 5px;
      font-size: 10px;
      white-space: nowrap;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      background-color: #999;
      color: #fff;
      padding: 1px 15px;
      line-height: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
    }

  div#content-view section#suggest{
    position: absolute;
    box-sizing: border-box;
    padding: 5px;
    top: 60px;
    left: 10px;
    width: 365px;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 40;
    background-color: #f0f0f0;
    border-bottom: 10px solid #fff;
    display: none;
  }
    div#content-view section#suggest div.tagset{
      float: left;
      margin-right: 5px;
      margin-top: 5px;
      white-space: nowrap;
      border-radius: 18px;
      -webkit-border-radius: 18px;
      -moz-border-radius: 18px;
      background-color: rgb(177, 53, 44);
      color: #fff;
      padding: 0px 10px;
      line-height: 24px;
      cursor: pointer;
      max-width: 280px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

  div#content-view div.suggest-close{
    position: absolute;
    left: 220px;
    top: 23px;
    cursor: pointer;
    display: none;
  }

  div#content-view div.meta div.attribute{
    /*float: left;*/
    width: 100%;
    margin-right: 8px;
    margin-top: 4px;
    margin-bottom: 4px;
  }
    div#content-view div.meta div.attribute table{
      width: 100%;
    }
    div#content-view div.meta div.attribute table th{
      border-top-left-radius: 12px;
      border-bottom-left-radius: 12px;
      background-color: rgb(177, 44, 44);
      color: #fff;
      font-weight: normal;
      font-size: 12px;
      padding: 2px 20px;
      margin: 0px;
      width: 82%;
      text-align: left;
    }
      div#content-view div.meta div.attribute.group table th{
        background-color: rgb(19, 126, 55);
      }
      div#content-view div.meta div.attribute.color table th{
        background-color: rgb(128, 44, 177);
      }
      div#content-view div.meta div.attribute.phrase table th{
        background-color: rgb(44, 102, 177);
      }
      div#content-view div.meta div.attribute.impression table th{
        background-color: rgb(199, 91, 20);
      }
      div#content-view div.meta div.attribute.brand table th{
        background-color: #b12caa;
      }
      div#content-view div.meta div.attribute.sex table th{
        background-color: #777;
      }
      div#content-view div.meta div.attribute.pattern table th{
        background-color: #7d881f;
      }
    div#content-view div.meta div.attribute table td{
      border-top-right-radius: 9px;
      border-bottom-right-radius: 9px;
      background-color: rgb(223, 223, 223);
      color: #000;
      font-weight: normal;
      font-size: 10px;
      padding: 2px 0px;
      margin: 0px;
      width: 18%;
      text-align: center;
    }
      div#content-view div.meta div.attribute table td span{
        background-color: #777;
        color: #fff;
        font-size: 11px;
        border-radius: 10px;
        margin: 0px;
        padding: 0px 15px;
        padding-right: 11px;
        letter-spacing: 3px;
        cursor: pointer;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
      }
        div#content-view div.meta div.attribute table td span:hover{
          background-color: #555;
        }
    div#content-view div.store table{
      width: 100%;
    }
    div#content-view div.store table th{
      width: 80px;
      text-align: left;
    }
      div#content-view div.store table th img{
        width: 70px;
        background-position: center;
        background-size: contain;
      }
    div#content-view div.store table td{
      width: auto;
    }
      div#content-view div.store table td p{
        margin-bottom: 5px;
      }
      div#content-view div.store table td span{
        color: #aaa;
      }

  div#content-view div.meta ul{
    list-style-type: none;
    padding: 10px;
    margin: 0px;
  }
  div#content-view div.meta.tag ul{
    padding: 5px;
  }
  div#content-view div.meta ul li{
    padding-bottom: 10px;
  }
  div#content-view div{
    font-size: 12px;
  }
    div#content-view div.metalink p.productnolink,
    div#content-view div.metalink p.productlink{
      font-size: 13px;
      color: rgb(0, 0, 0);
      margin-left: 5px;
      margin-bottom: 20px;
      padding-left: 28px;
      position: relative;
    }
    div#content-view div.metalink p.productlink{
      cursor: pointer;
    }
      div#content-view div.metalink p.productnolink i,
      div#content-view div.metalink p.productlink i{
        position: absolute;
        font-size: 21px;
        top: -2px;
        left: 0px;
      }
    div#content-view div.meta ul li div.tag{
      font-size: 14px;
      color: rgb(0, 0, 0);
      font-weight: bold;
    }
    div#content-view div.meta ul li div.tag.delete,
    div#content-view div.meta ul li div.tag.insert,
    div#content-view div.meta ul li div.tag.update{
      position: relative;
      padding-left: 28px;
      line-height: 28px;
      font-weight: bold;
      color: #a72727;
    }
      div#content-view div.meta ul li div.tag.delete i,
      div#content-view div.meta ul li div.tag.insert i,
      div#content-view div.meta ul li div.tag.update i{
        position: absolute;
        top: 0px;
        left: 0px;
        color: #a72727;
      }
    div#content-view div.meta ul li div.tag.delete,
    div#content-view div.meta ul li div.tag.delete i{
      color: #2927a7;
    }
    div#content-view div.meta ul li div.tag.insert,
    div#content-view div.meta ul li div.tag.insert i{
      color: #a72727;
    }
    div#content-view div.meta ul li div.flg{
      font-size: 10px;
      display: inline-block;
      padding: 1px 10px;
      background-color: #a72727;
      color: #fff;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      margin-left: 20px;
      margin-bottom: 3px;
    }
      div#content-view div.meta ul li div.flg.del{
        background-color: #2927a7;
      }
    div#content-view div.meta ul li div.date{
      margin-left: 20px;
      font-size: 12px;
      margin-top: 5px;
    }
      div#content-view div.meta ul li div.date span{
        font-weight: bold;
      }
      div#content-view div.meta ul li div.date span.h{
        font-weight: normal;
        font-size: 11px;
        margin-left: 20px;
        margin-right: 3px;
      }
      div#content-view div.meta ul li div.date span.s{
        font-weight: normal;
        font-size: 11px;
        margin-left: 2px;
        color: #777;
      }
      div#content-view div.meta ul li div.date span.pst{
        font-weight: normal;
        font-size: 11px;
        padding: 0px;
        color: #777;
      }
      div#content-view div.meta ul li div.date span.caution{
        font-weight: bold;
        margin-left: 2px;
        color: #a72727;
      }
      div#content-view div.meta ul li div.date span.label{
        font-weight: normal;
        font-size: 10px;
        padding: 1px 8px;
        margin-right: 5px;
        color: #fff;
        border-radius: 10px;
        background-color: #999;
      }
      div#content-view div.meta ul li div.date span.label.engine{
        background-color: rgb(73, 158, 52);
      }
      div#content-view div.meta ul li div.date span.label.shueisha{
        background-color: rgb(158, 94, 52);
      }
      div#content-view div.meta ul li div.date span.label.total{
        background-color: rgb(52, 98, 158);
      }

/* ====================================================
 * 左ペイン
 * ==================================================*/
nav {
  position: fixed;
  z-index: 11;
  left: 0px;
  top: 70px;
  width: 50px;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 70px;
  background-color: #fff;
}
  nav ol {
    list-style-type: none;
    padding: 0px;
    margin-left: 7px;
    width: 36px;
    text-align: center;
  }
  nav ol.rm {
    padding-top: 15px;
    border-top: 1px solid #ddd;
  }
    nav ol li {
      padding: 0px;
      margin: 0px;
      text-align: center;
      margin-bottom: 5px;
    }
      nav ol li div {
        position: relative;
        padding: 0px;
        margin: 0px;
        width: 36x;
        height: 36px;
        border-radius: 25px;
        cursor: pointer;
      }
        nav ol li div:hover {
          background-color: #eee;
          transition : 0.7s;
        }
        nav ol li div i {
          position: absolute;
          top: 6px;
          left: 6px;
        }
        nav ol li.a div {
          background-color: #aaa;
          cursor: default;
        }
          nav ol li.a div i {
            color: #fff;
          }
        nav ol li.b div {
          background-color: #ddd;
        }
          nav ol li.b div i {
            color: #555;
          }
  nav.theme {
    position: fixed;
    z-index: 11;
    left: 50px;
    top: 70px;
    width: 200px;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 70px;
    background-color: #f5f5f5;
    border-right: 10px solid #fff;
    padding-top: 10px;
    display: none;
  }
  nav.theme ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    margin-left: 7px;
    width: 170px;
  }
    nav.theme ul li {
      box-sizing: border-box;
      margin: 0px;
      padding: 2px 10px;
      background-color: #f5f5f5;
      margin-left: 5px;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      border-radius: 20px;;
    }
      nav.theme ul li.a {
        background-color: #555;
        color: #fff;
      }
      nav.theme ul li:hover {
        transition-delay: 0.3s;
        background-color: #ddd;
      }
  nav.theme div.close-sub {
    position: absolute;
    top: 5px;
    right: 5px;
  }
    nav.theme div.close-sub i {
      cursor: pointer;
      color: #999;
    }
    nav.theme div.close-sub i:hover {
      color: #000;
      transition-delay: 0.3s;
    }
  nav.theme div.headline {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-left: 25px;
    padding-right: 20px;
    padding-top: 1px;
    margin-top: 5px;
    font-size: 10px;
    background-color: #aaa;
    color: #fff;
    border-radius: 20px;
  }
    nav.theme div.headline i {
      position: absolute;
      top: 2px;
      left: 10px;
      font-size: 13px;
      color: #fff;
    } 

/* ====================================================
 * メイン
 * ==================================================*/
main {
  margin-top: 90px;
}
main.edit {
  padding-right: 400px;
}
/*
body.left-pain main {
  padding-left: 50px;
}
  */
body.left-pain-message main {
  padding-left: 350px;
}
body.right-pain-message main {
  padding-right: 400px;
}
body.left-pain-theme main {
  padding-left: 250px;
}
body.left-pain-theme-message main {
  padding-left: 250px;
  padding-right: 250px;
}
  /* --------------------------------------------------
   * メイン（見出し）
   * --------------------------------------------------*/
  main > h3 {
    margin: 5px 20px;
    margin-top: 25px;
    font-size: 16px;
    position: relative;
  }
  main > h3.fst {
    margin-top: 5px;
  }
  main > h4 {
    margin: 5px 20px;
    margin-top: 10px;
    font-size: 12px;
  }
    main > h3 > div {
      position: absolute;
      left: 300px;
      top: -2px;
    }
      main > h3 > div > i {
        cursor: pointer;
        transition: 0.3s;
      }
      main > h3 > div > i:hover {
        color: #ff0000;
      }
  /* --------------------------------------------------
   * メイン（ページャー）
   * --------------------------------------------------*/
  main > section {
    margin-top: 0px;
    height: 30px;
  }
  main > section.footer {
    margin-bottom: 30px;
  }
  main > section.header:empty,
  main > section.footer:empty {
    display: none;
  }
    main > article {
      position: relative;
    }
      main > article > section.pagenation {
        position: absolute;
        bottom: 30px;
        right: 30px;
        z-index: 10;
      }
      main > section.grafview {
        position: absolute;
        top: 430px;
        z-index: 10;
      }
    main > article > section.pagenation > ul,
    main > section > ul.pagenation {
      list-style-type: none;
      z-index: 3;
    }
    main > section > ul.pagenation {
      padding-left: 70px;
    }
      main > article > section.pagenation > ul > li,
      main > section > ul.pagenation > li {
        float: left;
        background-color: transparent;
        color: #999;
        font-size: 14px;
        width: 30px;
        height: 30px;
        line-height: 32px;
        padding: 0px;
        text-align: center;
        position: relative;
        cursor: pointer;
        border-radius: 16px;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        margin-right: 5px;
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -ms-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
      }
        main > article > section.pagenation > ul > li > i,
        main > section > ul.pagenation > li > i {
          color: #aaa;
          position: absolute;
          font-size: 20px;
          top: 5px;
          left: 5px;
          -webkit-transition: 0.6s;
          -moz-transition: 0.6s;
          -ms-transition: 0.6s;
          -o-transition: 0.6s;
          transition: 0.6s;
        }
        main > article > section.pagenation > ul > li.a,
        main > section > ul.pagenation > li.a {
          background-color: #999;
          color: #fff;
          cursor: default;
        }
        main > article > section.pagenation > ul > li:hover{
          background-color: #eee;
          color: #000;
        }
        main > section > ul.pagenation > li:hover{
          background-color: #fff;
          color: #000;
        }
          main > article > section.pagenation > ul > li:hover > i,
          main > section > ul.pagenation > li:hover > i{
            color: #555;
          }
          main > article > section.pagenation > ul > li.a:hover,
          main > section > ul.pagenation > li.a:hover{
            background-color: #bbb;
            color: #fff;
          }


  /* --------------------------------------------------
   * メイン（コンテンツ）
   * --------------------------------------------------*/
  main > div.dl_icn {
    position: absolute;
    top: 95px;
    right: 20px;
    z-index: 2;
  }
  main > div.dl_icn.home {
    right: 55px;
  }
    main > div.dl_icn > i {
      cursor: pointer;
      transition: 0.3s;
    }
    main > div.dl_icn > i:hover{
      color: #ff0000;
    }

  main > section.sorter {
    position: absolute;
    top: 90px;
    right: 100px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 30px 30px 30px;
    grid-auto-rows: 30px;
  }
    main > section.sorter .sort_btn {
      position: relative;
      width: 30px;
      height: 30px;
      border-radius: 16px;
      cursor: pointer;
      -webkit-transition: 0.6s;
      -moz-transition: 0.6s;
      -ms-transition: 0.6s;
      -o-transition: 0.6s;
      transition: 0.6s;
    }
      main > section.sorter .sort_btn i {
        position: absolute;
        top: 3px;
        left: 3px;
        color: #999;
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -ms-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
      }
    main > section.sorter .sort_btn.act:hover,
    main > section.sorter .sort_btn.act {
      background-color: #aaa;
    }
      main > section.sorter .sort_btn.act:hover i,
      main > section.sorter .sort_btn.act i {
        color: #fff;
      }
    main > section.sorter .sort_btn:hover {
      background-color: #fff;
    }
      main > section.sorter .sort_btn:hover i {
        color: #555;
      }

  main > article {
    padding: 15px;
    box-sizing: border-box;
    padding-left: 70px;
  }
  main > article.sales {
    margin-bottom: 30px;
  }
  main > article.settings {
    padding-top: 0px;
    padding-left: 50px;
    margin-top: -30px;
  }
    main > article > .list-head,
    main > article > .list {
      display: grid;
      grid-gap: 5px;
      grid-template-columns: 100%;
      grid-auto-rows: 40px;
    }
    main > article > .list-head{
      grid-auto-rows: 30px;
      margin-bottom: 5px;
    }
    main > article.grafview > .list-head{
      margin-top: 100px;
    }
      main > article > .list-head > .header,
      main > article > .list > .item {
        margin: 0;
        display: grid;
        grid-template-rows: 1fr auto;
        padding-bottom: 5px;
        padding-top: 5px;
        break-inside: avoid;
        border-radius: 5px;
        background-color: #fff;
        cursor: pointer;
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -ms-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
        padding-bottom: 15px;
      }
      main > article > .list-head > .header{
        background-color: #eee;
        font-size: 12px;
        cursor: default;
      }
      main > article > .caution{
        font-size: 11px;
        padding: 0px;
        margin: 0px;
        height: 13px;
        padding-top: 20px;
      }
        main > article > .list > .item.sub {
          background-color: #fafafa;
        }
        main > article > .list-head > .header > .colmn,
        main > article > .list > .item > .content {
          display: grid;
          grid-template-columns: repeat(6,1fr);
        }
          main > article > .list > .item > .content > div {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          main > article > .list > .item > .content > div > span {
            padding-left: 5px;
            font-size: 10px;
            color: #555;
          }
          main > article > .list > .item > .content > div > span.c {
            padding-right: 5px;
            padding-left: 3px;
          }
          main > article > .list > .item > .content > div > span.d {
            padding-left: 3px;
          }
          main > article > .list > .item > .content > div > span.w {
            padding-left: 0px;
          }
          main > article > .list-head > .header > .colmn > div:nth-child(1),
          main > article > .list > .item > .content > div:nth-child(1) {
            grid-column: 1 / 4;
          }
          main > article > .list-head > .header > .colmn > div:nth-child(1){
            padding-left: 10px;
          }
            main > article > .list-head > .header > .colmn > div > span{
              padding: 3px 10px;
              border-radius: 10px;
              cursor: pointer;
              -webkit-transition: 0.6s;
              -moz-transition: 0.6s;
              -ms-transition: 0.6s;
              -o-transition: 0.6s;
              transition: 0.6s;
            }
              main > article > .list-head > .header > .colmn > div > span:hover{
                background-color: #ddd;
              }
              main > article > .list-head > .header > .colmn > div > span.act{
                background-color: #999;
                color: #fff;
                cursor: default;
              }
          main > article > .list > .item > .content > div:nth-child(2),
          main > article > .list > .item > .content > div:nth-child(3),
          main > article > .list > .item > .content > div:nth-child(4) {
            text-align: right;
            padding-right: 5px;
          }
          main > article > .list-head > .header > .colmn > div:nth-child(2),
          main > article > .list-head > .header > .colmn > div:nth-child(3),
          main > article > .list-head > .header > .colmn > div:nth-child(4){
            text-align: right;
            padding-right: 10px;
          }

    main > article > .grid {
      display: grid;
      grid-gap: 15px;
      grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
      grid-auto-rows: 110px;
    }
      main > article > .grid[rel=sales] {
        grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
        grid-auto-rows: 60px;
        grid-gap: 10px;
      }
    main > article > .grid.settings {
      grid-auto-rows: 135px;
    }
    main > article > .grid.catchcopy.listview {
      grid-template-columns: repeat(auto-fill, minmax(100%,1fr));
      grid-gap: 8px;
      grid-auto-rows: 150px;
    }
      main > article > .grid > .item {
        margin: 0;
        display: grid;
        grid-template-rows: 1fr auto;
        padding-bottom: 10px;
        break-inside: avoid;
        border-radius: 5px;
        background-color: #fff;
        cursor: pointer;
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -ms-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
        padding-bottom: 15px;
      }
        main > article > .grid.catchcopy > .item {
          cursor: default;
        }
      main > article > .grid > .item[rel=sales] {
        cursor: default;
      }
      main > article > .grid.templates > .item,
      main > article > .grid.templates > .item:hover{
        cursor: default;
        background-color: #fff;
      }
      main > article > .grid > .item[data=on] {
        background-color: #d6ddfc;
      }
        main > article > .list > .item:hover,
        main > article > .grid > .item:hover {
          background-color: rgb(221, 221, 221);
        }
        main > article > .list > .item.checked,
        main > article > .grid > .item.checked {
          background-color: rgb(255, 242, 126);
        }
        main > article > .list > .item.updated,
        main > article > .grid > .item.updated {
          background-color: rgb(247, 220, 213);
        }
        main > article > .list > .item.actived,
        main > article > .grid > .item.actived {
          background-color: rgb(255, 242, 126);
        }
        main > article > .grid > .item.noedit,
        main > article > .grid > .item.noedit:hover {
          background-color: rgb(230, 218, 185);
          cursor: default;
          display: none;
        }
        main > article > .grid > .item.revision {
          background-color: rgb(243, 232, 203);
        }
          main > article > .grid > .item.revision:hover {
            background-color: rgb(233, 216, 168);
          }
      main > article > .grid > .item > .content {
        position: relative;
        padding: 0px;
        margin: 0px;
      }
        main > article > .grid > .item > .content > div.products {
          position: absolute;
          right: 5px;
          bottom: -10px;
          width: 30px;
          height: 30px;
          padding: 0px;
          border-radius: 16px;
          background-color: #eee;
          cursor: pointer;
          -webkit-transition: 0.6s;
          -moz-transition: 0.6s;
          -ms-transition: 0.6s;
          -o-transition: 0.6s;
          transition: 0.6s;
          z-index:10;
        }
          main > article > .grid > .item > .content > div.products:hover {
            background-color: #999;
          }
          main > article > .grid > .item > .content > div.products > i {
            position: absolute;
            top: 2px;
            left: 3px;
            color: #999;
          }
            main > article > .grid > .item > .content > div.products:hover > i {
              color: #fff;
            }
        main > article > .grid > .item > .content > div.icon {
          position: absolute;
          right: 5px;
          top: 5px;
          width: 29px;
          height: 29px;
          padding: 0px;
          border-radius: 16px;
        }
          main > article > .grid > .item > .content > div.icon > i {
            position: absolute;
            top: 3px;
            left: 3px;
          }
        main > article > .grid > .item > .content > .edit-btn {
          position: absolute;
          right: 5px;
          top: 5px;
          background-color: #fff;
          width: 29px;
          height: 29px;
          padding: 0px;
          border-radius: 16px;
          cursor: pointer;
          -webkit-transition: 0.6s;
          -moz-transition: 0.6s;
          -ms-transition: 0.6s;
          -o-transition: 0.6s;
          transition: 0.6s;
        }
          main > article > .grid > .item > .content > .edit-btn > i {
            position: absolute;
            top: 3px;
            left: 2px;
          }
          main > article > .grid > .item.checked > .content > .edit-btn,
          main > article > .grid > .item:hover > .content > .edit-btn {
            background-color: #ddd;
          }
          main > article > .grid > .item > .content > .edit-btn:hover {
            background-color: #fff;
          }
        main > article > .grid > .item > .content > img {
          grid-row: 1 / -1;
          grid-column: 1;
          max-width: 100%;
          border-radius: 5px 5px 0 0;
          display: block;
        }
        main > article > .grid > .item > .content > img.icon {
          position: absolute;
          top: 10px;
          right: 10px;
          width: 40px;
        }
      /**
       * 設定一覧画面
       */
      main > article > .grid > .item > .content > table {
        padding: 0px;
        margin: 0px;
        margin-left: 10px;
        margin-top: 5px;
      }
        main > article > .grid > .item > .content > table th {
          vertical-align: middle;
        }
          main > article > .grid > .item > .content > table th div {
            width: 18px;
            line-height: 18px;
            font-size: 10px;
            background-color: #fff;
            color: #999;
            border-radius: 10px;
            margin-top: 2px;
            font-weight: bold;
            transform: scale(0.8);
          }
          main > article > .grid > .item > .content > table td ul {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
          }
            main > article > .grid > .item > .content > table td ul li {
              float: left;
              font-size: 10px;
              margin-right: 5px;
              padding: 1px 5px;
              background-color: rgb(177, 44, 44);
              color: #fff;
              border-radius: 10px;
            }
            main > article > .grid > .item > .content > table td ul li.a1 {
              background-color: rgb(19, 126, 55);
            }
            main > article > .grid > .item > .content > table td ul li.a2 {
              background-color: rgb(128, 44, 177);
            }
            main > article > .grid > .item > .content > table td ul li.a3 {
              background-color: rgb(44, 102, 177);
            }
            main > article > .grid > .item > .content > table td ul li.a4 {
              background-color: rgb(199, 91, 20);
            }

      main > article > .grid > .item > .content > p {
        text-align: left;
        font-size: 13px;
        margin: 0px;
        padding: 0 10px;
        padding-top: 10px;
      }
        main > article > .grid > .item > .content > p.label {
          font-size: 11px;
          color: #aaa;
        }
        main > article > .grid > .item > .content > p.updated {
          position: relative;
          font-size: 11px;
          color: #999;
          padding-left: 30px;
        }
        main > article > .grid > .item.on > .content > p.updated {
          color: #555;
        }
          main > article > .grid > .item > .content > p.updated > i {
            position: absolute;
            top: 8px;
            left: 10px;
            font-size: 18px;
            color: #999;
          }
          main > article > .grid > .item.on > .content > p.updated > i {
            color: #777;
          }
        main > article > .grid > .item > .content > p.account {
          margin-bottom: 5px;
          color: #999;
        }
        main > article > .grid > .item > .content > div.account {
          display: grid;
          width: 100%;
          box-sizing: border-box;
          grid-template-columns: 50px 57px 50px;
          padding-top: 10px;
          padding-bottom: 5px;
          gap: 5px;
        }
          main > article > .grid > .item > .content > div.account > div {
            border-radius: 20px;
            background-color: #ccc;
            text-align: center;
            cursor: pointer;
            font-size: 12px;
            padding-top: 1px;
            -webkit-transition: 0.6s;
            -moz-transition: 0.6s;
            -ms-transition: 0.6s;
            -o-transition: 0.6s;
            transition: 0.6s;
          }
          main > article > .grid > .item > .content > div.account > div:hover {
            background-color: #313e8a;
            color: #fff;
          }
            main > article > .grid > .item > .content > div.account > div.on{
              background-color: #a05f5f;
              color: #fff;
            }
              main > article > .grid > .item > .content > div.account > div.on:hover {
                background-color: #b14646;
              }
        main > article > .grid.catchcopy.listview > .item > .content > p.account {
          overflow-y: auto;
          margin-top: 5px;
          height: 70px;
          padding-top: 0px;
          padding-bottom: 0px;
        }
          main > article > .grid.catchcopy.listview > .item > .content > p.account::-webkit-scrollbar{
            width: 10px;
            height: 10px;
          }
          main > article > .grid.catchcopy.listview > .item > .content > p.account::-webkit-scrollbar-track{
            background: #fff;
            border: none;
            border-radius: 10px;
            box-shadow: inset 0 0 2px #fff; 
          }
          main > article > .grid.catchcopy.listview > .item > .content > p.account::-webkit-scrollbar-thumb{
            background: #ccc;
            border-radius: 10px;
            box-shadow: none;
            -webkit-transition: 0.6s;
            -moz-transition: 0.6s;
            -ms-transition: 0.6s;
            -o-transition: 0.6s;
            transition: 0.6s;
          }
            main > article > .grid.catchcopy.listview > .item > .content > p.account::-webkit-scrollbar-thumb:hover{
              background: #bbb;
            }



      main > article > .grid > .item > .content > div {
        text-align: left;
        font-size: 16px;
        margin: 0px;
        padding: 0 10px;
        padding-top: 2px;
      }
        main > article > .grid[rel=sales] > .item > .content > div {
          font-size: 14px;
          margin-top: 5px;
        }
          main > article > .grid[rel=sales] > .item > .content > div > span {
            font-size: 10px;
            margin: 0px 1px;
            color: #555;
          }
          main > article > .grid[rel=sales] > .item > .content > div > span.w {
            margin-left: 2px;
            color: #555;
          }
      main > article > .grid > .item > .content > div.thmbnail {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 60px;
        height: 60px;
        background-size: cover;
        background-position-y: center;
        border-radius: 5px;
      }
      main > article > .grid > .item > .content > span {
        text-align: left;
        font-size: 11px;
        color: #555;
        margin: 0px;
        padding: 0 10px;
        padding-top: 5px;
      }
        main > article > .grid > .item > .content > span.name {
          font-size: 18px;
          margin-left: 7px;
        }
        main > article > .grid.catchcopy.listview > .item > .content > p.name {
          font-size: 18px;
        }
      main > article > .grid > .item > .content > p.medianame {
        font-weight: bold;
      }
        main > article > .grid > .item > .content > p > span {
          display: inline-block;
          font-size: 10px;
          margin: 0px;
          padding: 0px 10px;
          padding-top: 1px;
          line-height: 14px;
          border-radius: 8px;
          margin-top: 8px;
          color: #777;
          background-color: #fff;
          transition: 0.3s;
          cursor: pointer;
        }
          main > article > .grid > .item > .content > p > span:hover {
            background: rgb(214, 177, 211);
            color: #fff;
          }

      main > article > .grid > .item > .content > ul {
        position: absolute;
        left: 10px;
        bottom: -5px;
        width: 100%;
        list-style-type: none;
        padding: 0px;
        margin: 0px;
        display: grid;
        grid-template-columns: 85px 40px 120px;
        height: 20px;
      }
      main > article > .grid.catchcopy.listview > .item > .content > ul {
        grid-template-columns: 100px 100px 100px;
      }
        main > article > .grid > .item > .content > ul.sales {
          grid-template-columns: 100%;
          padding: 0px;
          box-sizing: border-box;
          left: 0px;
          bottom: -10px;
        }
        main > article > .grid > .item > .content > ul.tag {
          grid-template-columns: 85px 70px;
        }
        main > article > .grid > .item > .content > ul.phrase {
          grid-template-columns: 60px auto;
        }
        main > article > .grid > .item > .content > ul.toa {
          grid-template-columns: 80px 90px 70px;
        }
        main > article > .grid > .item > .content > ul.delivery,
        main > article > .grid > .item > .content > ul.client {
          grid-template-columns: 100px;
        }
        main > article > .grid > .item > .content > ul.template,
        main > article > .grid.account > .item > .content > ul.client {
          grid-template-columns: 100%;
          box-sizing: border-box;
        }
        main > article > .grid > .item > .content > ul > li {
          position: relative;
          line-height: 20px;
          text-align: left;
          font-size: 12px;
          padding-left: 30px;
        }
        main > article > .grid > .item > .content > ul.sales > li {
          text-align: right;
          box-sizing: border-box;
          padding-right: 10px;
          font-size: 16px;
          font-weight: bold;
        }
          main > article > .grid > .item > .content > ul.sales > li > span {
            font-size: 10px;
            padding-left: 4px;
            color: #555;
          }
        main > article > .grid > .item > .content > ul.template > li.cid,
        main > article > .grid > .item > .content > ul.delivery > li.cid {
          width: 100%;
          padding-left: 20px;
          padding-right: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        main > article > .grid > .item > .content > ul > li.cid {
          padding-left: 20px;
          padding-right: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        main > article > .grid > .item > .content > ul > li.analytics {
          padding-left: 32px;
          color: #777;
          background-color: #eee;
          border-radius: 10px;;
          transition: 0.3s;
          cursor: pointer;
        }
          main > article > .grid > .item > .content > ul > li.analytics:hover {
            background-color: #999;
            color: #fff;
          }
          main > article > .grid > .item > .content > ul > li.analytics:hover i {
            color: #fff;
          }
        main > article > .grid > .item > .content > ul > li.price,
        main > article > .grid > .item > .content > ul > li.tag,
        main > article > .grid > .item > .content > ul > li.time {
          padding-left: 17px;
        }
        main > article > .grid > .item > .content > ul > li.time {
          width: 70px;
          white-space: nowrap;
        }
          main > article > .grid > .item > .content > ul > li.time > span {
            font-size: 10px;
            padding-left: 2px;
          }
          main > article > .grid > .item > .content > ul > li > i {
            position: absolute;
            font-size: 14px;
            top: 2px;
            left: 0px;
          }
            main > article > .grid > .item > .content > ul > li.analytics i {
              left: 13px;
              top: 3px;
              transition: 0.3s;
              cursor: pointer;
            }
          main > article > .grid > .item > .content > ul.phrase > li > select {
            width: 82px;
            outline: none;
            -moz-appearance: none;
            appearance: none;
            text-align: left;
            background-color: #eee;
            border: 0px;
            font-family: "M PLUS Rounded 1c";
            font-weight: bold;
            letter-spacing: 1px;
            color: #999;
            padding: 1px 13px;
            border-radius: 10px;
            cursor: pointer;
          }
          main > article > .grid > .item > .content > ul.phrase > li > div.productlink {
            display: inline-block;
            background-color: #eee;
            border: 0px;
            font-family: "M PLUS Rounded 1c";
            font-weight: bold;
            letter-spacing: 1px;
            color: #999;
            padding: 1px 13px;
            border-radius: 10px;
            cursor: pointer;
            -webkit-transition: 0.6s;
            -moz-transition: 0.6s;
            -ms-transition: 0.6s;
            -o-transition: 0.6s;
            transition: 0.6s;
          }
          main > article > .grid > .item > .content > ul.phrase > li > div.productlink:hover,
          main > article > .grid > .item > .content > ul.phrase > li > select:hover {
            background-color: #555;
            color: #fff;
          }

    /* --------------------------------------------------
     * 統計画面
     * --------------------------------------------------*/
    main > article > .grid.tag_count {
      grid-auto-rows: 65px;
    }
    main > article > .grid.tag_list {
      grid-template-columns: repeat(auto-fill, minmax(500px,1fr));
      grid-auto-rows: auto;
    }
    main > article > .grid.tag_detail_list {
      grid-template-columns: repeat(auto-fill, minmax(500px,1fr));
      grid-auto-rows: auto;
    }
    main > article > .grid.operation {
      grid-auto-rows: 100px;
    }
    main > article > .grid.tag_not_list {
      grid-template-columns: repeat(auto-fill, minmax(100%,1fr));
      grid-auto-rows: auto;
    }
      main > article > .grid.operation > .item > .content > p.count,
      main > article > .grid.tag_count > .item > .content > p.count {
        font-size: 16px;
        text-align: right;
        letter-spacing: 1px;
        padding-top: 5px;
      }
        main > article > .grid.operation > .item:hover,
        main > article > .grid.tag_detail_list > .item:hover,
        main > article > .grid.tag_not_list > .item:hover,
        main > article > .grid.tag_list > .item:hover,
        main > article > .grid.tag_count > .item:hover{
          background-color: #fff;
          cursor: default;
        }
        main > article > .grid.tag_detail_list > .item > .content > p > span,
        main > article > .grid.tag_not_list > .item > .content > p > span,
        main > article > .grid.tag_list > .item > .content > p > span {
          display: inline-block;
          font-size: 14px;
          margin: 0px;
          padding: 0px;
          padding-left: 10px;
          line-height: 14px;
          color: #000;
          background-color: transparent;
          white-space: nowrap;
          cursor: default;
        }
        main > article > .grid.tag_detail_list > .item > .content > p > a,
        main > article > .grid.tag_not_list > .item > .content > p > a,
        main > article > .grid.tag_list > .item > .content > p > a {
          font-weight: normal;
          background-color: rgb(62, 139, 88);
          color: #fff;
          letter-spacing: 1px;
          padding: 2px 10px;
          border-radius: 10px;
          transition: 0.3s;
        }
      main > article > .grid.tag_detail_list > .item.add > .content > p > a,
      main > article > .grid.tag_detail_list > .item.alert_tags > .content > p > a,
      main > article > .grid.tag_not_list > .item.add > .content > p > a,
      main > article > .grid.tag_not_list > .item.alert_tags > .content > p > a {
        background-color: #c45757;
      }
      main > article > .grid.tag_detail_list > .item.del > .content > p > a,
      main > article > .grid.tag_not_list > .item.del > .content > p > a {
        background-color: #5783c4;
      }
        main > article > .grid.tag_detail_list > .item > .content > p > a:hover,
        main > article > .grid.tag_not_list > .item > .content > p > a:hover,
        main > article > .grid.tag_list > .item > .content > p > a:hover {
          background-color: rgb(20, 94, 45);
        }
        main > article > .grid.tag_detail_list > .item.add > .content > p > a:hover,
        main > article > .grid.tag_detail_list > .item.alert_tags > .content > p > a:hover,
        main > article > .grid.tag_not_list > .item.add > .content > p > a:hover,
        main > article > .grid.tag_not_list > .item.alert_tags > .content > p > a:hover {
          background-color: #8f2727;
        }
        main > article > .grid.tag_detail_list > .item.del > .content > p > a:hover
        main > article > .grid.tag_not_list > .item.del > .content > p > a:hover {
          background-color: #33568a;
        }
        main > article > .grid.tag_not_list > .item > .content > p > span.notlink:hover,
        main > article > .grid.tag_not_list > .item > .content > p > span.notlink {
          font-weight: normal;
          background-color: #aaa;
          letter-spacing: 1px;
          color: #fff;
          padding: 4px 10px;
          border-radius: 10px;
          transition: 0.3s;
        }
        main > article > .grid.operation > .item > .content > p > span {
          font-size: 11px;
          padding: 0px 3px;
          cursor: default;
        }
          main > article > .grid.operation > .item > .content > p > span.space{
            font-size: 10px;
            color: #ccc;
          }
          main > article > .grid.operation > .item > .content > p.add{
            color: #b61e1e;
          }
        main > article > .grid.tag_detail_list > .item > .content > p > span.tag_id{
          width: 50px;
        }
        main > article > .grid.tag_list > .item > .content > p > span.tag_id,
        main > article > .grid.tag_not_list > .item > .content > p > span.tag_id{
          width: 70px;
        }
        main > article > .grid.tag_detail_list > .item > .content > p > span.content_id,
        main > article > .grid.tag_not_list > .item > .content > p > span.content_id{
          width: 70px;
        }
        main > article > .grid.tag_list > .item > .content > p > span.article_cnt,
        main > article > .grid.tag_not_list > .item > .content > p > span.article_cnt,
        main > article > .grid.tag_not_list > .item > .content > p > span.operation_cnt{
          width: 90px;
        }
        main > article > .grid.tag_not_list > .item > .content > p > span.engine_cnt{
          width: 100px;
        }
        main > article > .grid.tag_not_list > .item > .content > p > span.ratio{
          width: 100px;
        }

        main > article > .grid.tag_detail_list > .item > .content > p > span.operation_cnt,
        main > article > .grid.tag_detail_list > .item > .content > p > span.article_cnt{
          width: 55px;
        }
        main > article > .grid.tag_detail_list > .item > .content > p > span.engine_cnt{
          width: 55px;
        }
        main > article > .grid.tag_detail_list > .item > .content > p > span.ratio{
          width: 50px;
        }

          main > article > .grid.operation > .item > .content > p > span:hover,
          main > article > .grid.tag_detail_list > .item > .content > p > span:hover,
          main > article > .grid.tag_not_list > .item > .content > p > span:hover,
          main > article > .grid.tag_list > .item > .content > p > span:hover {
            background: transparent;
            color: #000;
          }
    main > article > .grid.tag_detail_list > div.item,
    main > article > .grid.tag_not_list > div.item,
    main > article > .grid.tag_list > div.item {
      position: relative;
    }
      main > article > .grid.tag_detail_list > div.item > div.dl_icn,
      main > article > .grid.tag_not_list > div.item > div.dl_icn,
      main > article > .grid.tag_list > div.item > div.dl_icn {
        position: absolute;
        right: 5px;
        top: 5px;
        z-index: 3;
      }
        main > article > .grid.tag_detail_list > div.item > div.dl_icn > i,
        main > article > .grid.tag_not_list > div.item > div.dl_icn > i,
        main > article > .grid.tag_list > div.item > div.dl_icn > i {
          cursor: pointer;
          transition: 0.3s;
        }
        main > article > .grid.tag_detail_list > div.item > div.dl_icn > i:hover,
        main > article > .grid.tag_not_list > div.item > div.dl_icn > i:hover,
        main > article > .grid.tag_list > div.item > div.dl_icn > i:hover {
          color: #ff0000;
        }
          main > article > .grid.tag_detail_list > .item > .content > p span.s,
          main > article > .grid.tag_list > .item > .content > p span.s,
          main > article > .grid.tag_not_list > .item > .content > p span.s{
            font-size: 10px;
            margin-left: 1px;
            color: #aaa;
          }

        main > article > .grid.tag_detail_list > .item > .content > p.header > span,
        main > article > .grid.tag_list > .item > .content > p.header > span,
        main > article > .grid.tag_not_list > .item > .content > p.header > span {
          font-size: 11px;
          font-weight: bold;
          padding-bottom: 10px;
        }
      main > article > .grid > .item.alert_tags,
      main > article > .grid > .item.alert_tags:hover {
        background-color: #fff5f5;
      }
    /* --------------------------------------------------
     * 統計画面(グラフ)
     * --------------------------------------------------*/
    main > article > .container {
      position: relative;
      width: calc(100%-40px);
      height: 250px;
      overflow: hidden;
      margin: 0px 20px;
      margin-top: 20px;
      margin-bottom: 40px;
    }
    main > article.grafview > .container {
      margin-top: 45px;
    }
    main > article > div.label {
      position: absolute;
      top: -15px;
      left: 40px;
      padding-left: 30px;
      line-height: 27px;
      font-weight: bold;
      color: #666;
    }
    main > article.grafview > div.label {
      top: 10px;
    }
      main > article > div.label > i {
        position: absolute;
        font-size: 22px;
        left: 0px;
        top: 1px;
      }
      main > article > div.label > span {
        font-size: 12px;
        color: #555;
        margin-right: 5px;
        font-weight: normal;
      }
      main > article > div.label > span.week {
        margin-right: 0px;
        color: #666;
        font-weight: bold;
      }
    main > article > div.label-imp,
    main > article > div.label-sub {
      position: relative;
      box-sizing: border-box;
      margin-left: 25px;
      margin-top: 30px;
      margin-bottom: 10px;
      padding-left: 30px;
      line-height: 27px;
      color: #666;
    }
    main > article > div.label-imp{
      margin-top: -20px;
      padding-top: 0px;
      margin-bottom: 20px;
    }
      main > article > div.label-imp > i,
      main > article > div.label-sub > i {
        position: absolute;
        font-size: 22px;
        color: #555;
        left: 0px;
        top: 1px;
      }
    main > article > section.product,
    main > article > section.tag {
      display: grid;
      width: 100%;
      box-sizing: border-box;
      padding: 10px 15px;
      grid-gap: 10px;
      grid-template-columns: 50% 50%;
      grid-auto-rows: auto;
    }
      main > article > section div.label{
        background-color: #888;
        font-size: 11px;
        padding: 1px 13px;
        color: #fff;
        display: inline-block;
        border-radius: 12px;
        margin-left: 7px;
        margin-bottom: 15px;
      }
        main > article > section.product > section.click div.label,
        main > article > section.tag > section.click div.label{
          background-color: rgb(72, 104, 173);
        }
        main > article > section.product > section.imp div.label{
          background-color: rgb(173, 72, 72);
        }
        main > article > section.tag > section.ctr div.label{
          background-color: rgb(42, 129, 46);
        }
      main > article > section div.item{
        border-radius: 6px;
        padding-top: 3px;
      }
      main > article > section.tag > section.click div.item:nth-child(even),
      main > article > section.product > section.click div.item:nth-child(odd){
        background-color: #f9f9f9;
      }
        main > article > section.tag > section.ctr div.item:nth-child(odd),
        main > article > section.product > section.imp div.item:nth-child(even){
          background-color: #f9f9f9;
          border-radius: 6px;
        }
      main > article > section div.item div.content{
        display: grid;
        grid-template-columns: 20px auto 100px;
        font-size: 14px;
      }
        main > article > section div.item div.content > div:nth-child(1){
          font-size: 12px;
        }
        main > article > section div.item div.content > div:nth-child(2){
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        main > article > section div.item div.content > div:nth-child(3){
          text-align: right;
        }
        main > article > section div.item span{
          font-size: 11px;
          padding-left: 4px;
          color: #555;
        }

  main > div.analysis-ranking{
    border: 1px solid #000;
    width: 100%;
    height: 100px;
  }
div.headline {
  position: relative;
  margin-left: 70px;
  margin-bottom: 10px;
  padding-left: 30px;
  margin-top: 30px;
}
  main > div div.headline {
    margin-top: 20px;
  }
  div.headline i {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 23px;
  }
  div.headline span {
    font-size: 12px;
    margin-left: 5px;
  }
/* ====================================================
 * メッセージビュー
 * ==================================================*/
div#message-view{
  position: fixed;
  top: 75px;
  left: 55px;
  width: 350px;
  height: 100%;
  background-color: #fff;
  z-index: 11;
  box-sizing: border-box;
  padding: 10px;
  overflow-y: none;
  display: none;
}
  div#message-view div.close {
    display: none;
    top: 85px;
    left: 360px;
  }
  div#message-view::-webkit-scrollbar{
    width: 10px;
    height: 10px;
  }
  div#message-view::-webkit-scrollbar-track{
    background: #eee;
    border: none;
    border-radius: 10px;
    box-shadow: inset 0 0 2px #fff; 
  }
  div#message-view::-webkit-scrollbar-thumb{
    background: #ccc;
    border-radius: 10px;
    box-shadow: none;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
  }
    div#message-view::-webkit-scrollbar-thumb:hover{
      background: #bbb;
    }

  div#message-view div.label {
    background-color: #888;
    font-size: 11px;
    padding: 1px 13px;
    color: #fff;
    display: inline-block;
    border-radius: 12px;
    margin-left: 7px;
    margin-bottom: 10px;
    margin-top: 15px;
  }
  div#message-view div.title {
    width: 100%;
    margin-top: 5px;
    padding-top: 0px;
    padding-bottom: 10px;
    line-height: 100%;
  }
div#message-view div.addtag{
  position: relative;
  margin-top: 5px;
  padding-left: 0px;
  padding-top: 5px;
  width: 40%;
  height: 30px;
  background-color: #f5f5f5;
  border-radius: 20px;
  -moz-border-radius: 30px;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
  div#message-view div.addtag i{
    position: absolute;
    font-size: 21px;
    top: 7px;
    left: 13px;
    color: #999;
  }
    div#message-view div.addtag i.close-taglist{
      left: 340px;
      cursor: pointer;
      display: none;
    }
    div#nmessage-view div.addtag i.close-taglist:hover{
      color: #777;
    }
  div#message-view div.addtag input{
    padding: 5px 10px;
    padding-left: 40px;
    border-radius: 15px;
  }
  div#message-view div.addtag input.act{
    background-color: rgb(229, 230, 197);
  }
    div#message-view div.addtag input::placeholder{
      color: #aaa;
    }
    div#message-view div.addtag:focus-within{
      width: 80%;
      background-color: #eee;
    }
    div#message-view div.addtag input::placeholder {
      font-weight: bold;
      color: #999;
    }
    div#message-view > section.pagenation > ul,
    div#message-view > section > ul.pagenation {
      list-style-type: none;
      z-index: 3;
      height: 30px;
      padding: 0px;
      padding-left: 5px;
      margin-top: 10px;
    }
      div#message-view > section.pagenation > ul > li,
      div#message-view > section > ul.pagenation > li {
        float: left;
        background-color: transparent;
        color: #999;
        font-size: 14px;
        width: 30px;
        height: 30px;
        line-height: 32px;
        padding: 0px;
        text-align: center;
        position: relative;
        cursor: pointer;

        border-radius: 16px;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        margin-right: 5px;
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -ms-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
      }
        div#message-view > section.pagenation > ul > li > i,
        div#message-view > section > ul.pagenation > li > i {
          color: #aaa;
          position: absolute;
          font-size: 20px;
          top: 5px;
          left: 5px;
          -webkit-transition: 0.6s;
          -moz-transition: 0.6s;
          -ms-transition: 0.6s;
          -o-transition: 0.6s;
          transition: 0.6s;
        }
        div#message-view > section.pagenation > ul > li.a,
        div#message-view > section > ul.pagenation > li.a {
          background-color: #999;
          color: #fff;
          cursor: default;
        }
        div#message-view > section.pagenation > ul > li:hover{
          background-color: #eee;
          color: #000;
        }
        div#message-view > section > ul.pagenation > li:hover{
          background-color: #fff;
          color: #000;
        }
          div#message-view > section.pagenation > ul > li:hover > i,
          div#message-view > section > ul.pagenation > li:hover > i{
            color: #555;
          }
          div#message-view > section.pagenation > ul > li.a:hover,
          div#message-view > section > ul.pagenation > li.a:hover{
            background-color: #bbb;
            color: #fff;
          }
  section#msglist {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  section#msglist .posted {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 20px;
  }
    section#msglist .posted p {
      padding: 0px;
      margin: 0px;
      box-sizing: border-box;
      width: 100%;
    }
      section#msglist .posted p.comment {
        font-size: 12px;
      }
      section#msglist .posted p.date {
        font-size: 12px;
      }
      section#msglist .posted p.star {
        font-size: 12px;
        margin-top: 5px;
      }
        section#msglist .posted p.star i {
          color: #eee;
        }
          section#msglist .posted p.star i.sel {
            color:rgb(202, 34, 104);
          }
      section#msglist .posted p.user {
        position: relative;
        padding-left: 35px;
        line-height: 30px;
        font-size: 12px;
        margin-top: 5px;
      }
        section#msglist .posted p.user img {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 30px;
        }
  div#message-view div.close{
    position: fixed;
    top: 87px;
    right: 10px;
    width: 30px;
    height: 30px;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    background-color: #fff;
    cursor: pointer;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    z-index: 5;
  }
    div#message-view div.close i{
      position: absolute;
      top: 3px;
      left: 3px;
    }
    div#message-view div.close:hover{
      border-radius: 18px;
      -webkit-border-radius: 18px;
      -moz-border-radius: 18px;
      background-color: #ddd;
    }
  section#msglist ol {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
  }
    section#msglist ol li {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      padding: 2px 1px;
      padding-left: 35px;
      border-radius: 20px;
      background-color: #eee;
      color: #333;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      -webkit-transition: 0.6s;
      -moz-transition: 0.6s;
      -ms-transition: 0.6s;
      -o-transition: 0.6s;
      transition: 0.6s;
      margin-bottom: 2px;
    }
      section#msglist ol li i {
        position: absolute;
        top: 3px;
        left: 8px;
        font-size: 21px;
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -ms-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
      }
      section#msglist ol li[sel=on],
      section#msglist ol li:hover {
        background-color: #940e0e;
        color: #fff;
      }
        section#msglist ol li[sel=on] i,
        section#msglist ol li:hover i {
          color: #eee;
        }

/* ====================================================
 * ダイアログボックス
 * ==================================================*/
#info_message{
  display: none;
  min-width: 500px;
  height: 51px;
  position: fixed;
  white-space: nowrap;
  z-index: 50000;
  padding: 0;
}
  .center_auto{
    margin: 0 auto;
    padding: 15px 25px;
  }
  #info_message .message_area{
    width: 98%;
    text-align: center;
  }
    #info_message .message_area span.link_ribbon{
      color: #999999;
      text-decoration: underline;
      cursor: pointer;
    }
  #info_message .button_area{
    float: left;
    width: 11px;
    height: 10px;
    margin-top: 3px;
  }
.error_bg{
  background-color: #AE4B4B;
}
  .error_bg .message_area{
    font:bold 14px;
    letter-spacing: 2px;
    color: #fff;
  }
  .error_bg .button_area{
    cursor: pointer;
  }
  .error_bg .info_more_descrption{
    -moz-box-shadow: 0 0 5px #b2495b;
    -webkit-box-shadow: 0 0 5px #b2495b;
    box-shadow: 0 0 5px #b2495b;
  }
.succ_bg{
  background-color: #4D9BBD;
}
  .succ_bg .message_area{
    font:bold 14px;
    letter-spacing: 2px;
    color: #fff;
  }
  .succ_bg .button_area{
    cursor: pointer;
  }
.info_bg{
 }
  .info_bg .message_area{
    font:bold 14px arial;
    color: #0d9a95;
    text-shadow: 0 1px 0 #fff; 
  }
  .info_bg .button_area{
  }
.warn_bg{
}
  .warn_bg .message_area{
    font:bold 14px arial;
    color: #a39709;
    text-shadow: 0 1px 0 #fff; 
  }
  .warn_bg .button_area{
    cursor: pointer;
  }
.clearboth{
  clear: both;
}
.info_more_descrption{
  display: none;
  width: 950px;
  height: 300px;
  background: #fff;
  margin: 0 auto;
  padding: 10px;
  background: #fbfbfb;
  overflow: auto;
}
.succ_bg .info_more_descrption{    
  -moz-box-shadow: 0 0 5px #56a25e;
  -webkit-box-shadow: 0 0 5px #56a25e;
  box-shadow: 0 0 5px #56a25e;
}


/* ====================================================
 * カレンダーダイアログボックス
 * ==================================================*/
div#CalenderBox{
  display: none;
  position: fixed;
  z-index: 1000;
  width: 380px;
  height: 230px;
  top: 70px;
  left: 400px;
}

/* ====================================================
 * 選択カレンダー
 * ==================================================*/
table.calender {
  width: 100%;
  z-index: 20;
}
  table.calender th {
    width: 14%;
    text-align: center;
    background-color: #fff;}
    table.calender th.sun {
      background-color: #ff0000;}
    table.calender th.sat {
      background-color: #0000ff;}
    table.calender th.def {
      background-color: #9EBFCF;}
    table.calender td.non {
      background-color: #fafafa;}
    table.calender td.sun {
/*			border-left: 1px solid #E0ECFA;*/
      padding: 8px;
      background-color: #FFE5E5;}
    table.calender td.sat {
      padding: 8px;
      background-color: #ECF4FF;}
  table.calender td {
/*		position: relative;*/
    width: 14%;
    text-align: center;
    vertical-align: top;
    height: 60px;
/*		border-right: 1px solid #f5f5f5;*/
    background-color: #fff;}

  table.calender p.hiduke {
    padding: 0px;
    margin: 0px;}

  table.calender td select.r, table.calender td option.r {
    background-color: #FFC2C2 }
  table.calender td select.b, table.calender td option.b {
    background-color: #C2DCFF }
  table.calender td select.h, table.calender td option.h {
    background-color: #eee }
  table.calender td div.ud {
    font-size: 10px;
    text-align: left}
  table.calender td div.sel_train {
    margin-top: 10px;}
    table.calender td div.sel_train2 {
      margin-top: 5px;}

  table.calender td div.r-tt,
  table.calender td div.b-tt {
    background-color: #C2DCFF;
    padding: 3px;
    margin-top: 5px;}
  
  table.calender td div.r-tb,
  table.calender td div.b-tb {
    background-color: #C2DCFF;
    padding: 3px;
    margin-top: 5px;
    margin-bottom: 5px}
  
  table.calender td div.b-tt,
  table.calender td div.b-tb {
    background-color: #FFC2C2;}
  
  table.calender td div.close {
    background-color: #eee;}
  
  table.calender .txtB, table.table03 .txtB, table.table02 .txtB {
    font-weight: bold;}

  .sel_calendar{
    width: 100%;
    background-color: #f5f5f5;
    }
    .sel_calendar th{
      padding: 3px 0px;
      border: 1px solid #fff;
      color: #fff;}
    .sel_calendar table.calender td{
      border: 1px solid #eee;
      padding:2px;
      height: 30px}
    div.rsv-d{
      position: relative;
      top: -5px;
      color: #ff0000;
      font-weight: bold;}
    .sel_calendar table.calender td.act{
      cursor: pointer;}
      .sel_calendar table.calender td.act:hover{
        background-color: #eee;}
    .sel_calendar table.calender th.act{
      text-align: center;
      color: #000;
      cursor: pointer;}
      .sel_calendar table.calender th.act:hover{
        background-color: #eee;}