/* ====================================================
 * ボディ
 * ==================================================*/
body{
  padding: 0px;
  margin: 0px;
  font-family: 'Product Sans', Arial, sans-serif;
}

/* 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;
}
  .s11{font-size: 11px;}
  .s14{font-size: 14px;}
  .s30{font-size: 30px;}

/* ====================================================
 * ヘッダー
 * ==================================================*/
div#header{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 70px;
  border-bottom: 10px solid #fff;
  background-color: #eeeeee;
  z-index: 10;
}
  
  /* ----------------------------------------------------
   * ロゴ
   * --------------------------------------------------*/
  div#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/user.png");
    background-size: 60px auto;
    background-position: center center;
  }

  /* ----------------------------------------------------
   * コンテンツボックス
   * --------------------------------------------------*/
  div#contents{
    width: 100%;
    margin: auto auto;
    margin-top: 100px;
    background-color: #fff;
  }
    div#contents section#main{
      position: relative;
      float: left;
      width: 50%;
      padding-bottom: 20px;
    }
      div#contents section#main div.datelabel,
      div#contents section#main div.label{
        position: relative;
        padding-left: 30px;
        padding-right: 80px;
        margin-top: 20px;
        display: inline-block;
      }
        div#contents section#main div.datelabel.mt{
          margin-top: 50px;
        }
      div#contents section#main div.label.community{
        padding-right: 250px;
      }
        div#contents section#main div.datelabel i,
        div#contents section#main div.label i{
          position: absolute;
          font-size: 19px;
          left: 0px;
          top: 2px;
        }
          div#contents section#main div.label.follow i{
            font-size: 21px;
            top: 0px;
          }
        div#contents section#main div.datelabel{
          font-size: 16px;
          color: #555;
        }
          div#contents section#main div.datelabel i{
            top: 1px;
          }
        div#contents section#main div.datelabel span{
          font-size: 10px;
          padding: 0px 5px;
        }
        div#contents section#main div.label div.add,
        div#contents section#main div.label span{
          position: absolute;
          font-size: 11px;
          right: 0px;
          top: 3px;
          cursor: pointer;
          color: #bbb;
          -webkit-transition: 0.6s;
          -moz-transition: 0.6s;
          -ms-transition: 0.6s;
          -o-transition: 0.6s;
          transition: 0.6s;
        }
          div#contents section#main div.label.community span{
            right: 160px;
          }
          div#contents section#main div.label.community div.add{
            padding-left: 16px;
            color: #777;
          }
            div#contents section#main div.label.community div.add i{
              font-size: 12px;
              color: #777;
            }
          div#contents section#main div.label div.add:hover,
          div#contents section#main div.label span:hover{
            color: #b14b4b;
          }
            div#contents section#main div.label div.add:hover i{
              color: #b14b4b;
            }
    div#contents section#panel{
      float: right;
      width: 250px;
      margin-top: 10px;
      padding-bottom: 20px;
      overflow-y: auto;
    }

    div#contents section#panel section.filter,
    div#contents section#panel section.similar,
    div#contents section#panel section.ad{
      width: 100%;
    }
    div#contents section#panel section.filter{
        margin-top: 15x;
        margin-bottom: 20px;
    }
      div#contents section#panel section.ad.mt{
        margin-top: 15x;
      }
      div#contents section#panel section.filter div.title,
      div#contents section#panel section.similar div.title,
      div#contents section#panel section.ad div.title{
        font-size: 10px;
        background-color: #999;
        color: #fff;
        width: 40px;
        text-align: center;
        margin-top: 5px;
        margin-bottom: 5px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
      }
        div#contents section#panel section.filter div.title{
          width: 60px;
        }
        div#contents section#panel div.caution{
          font-size: 10px;
          color: #aaa;
          margin-left: 5px;
          margin-top: 10px;
        }
          div#contents section#panel div.caution.sub{
            margin-left: 5px;
            margin-top: 5px;
          }
      div#contents section#panel section.similar ul,
      div#contents section#panel section.ad ul{
        list-style-type: none;
        padding-left: 0px;
        padding-top: 0px;
        margin-top: 0px;
      }
        div#contents section#panel section.ad ul li img{
          width: 100%;
          height: 160px;
          background-size: cover;
          background-position: center;
        }
        div#contents section#panel section.ad ul li div.name{
          font-weight: bold;
        }
        div#contents section#panel section.ad ul li div.address{
          font-size: 11px;
          line-height: 24px;
        }
        div#contents section#panel section.ad ul li div.info{
          font-size: 12px;
          margin-bottom: 10px;
        }
        div#contents section#panel section.similar ul li{
          margin-top: 10px;
        }
        div#contents section#panel section.similar ul li img{
          width: 125px;
          height: 90px;
          float: left;
          background-size: cover;
          background-position: center;
        }
        div#contents section#panel section.similar ul li div.name{
          padding-left: 135px;
        }
        div#contents section#panel section.similar ul li div.info{
          padding-left: 135px;
          font-size: 12px;
        }
        div#contents section#panel section.similar ul li div.address{
          font-size: 10px;
          padding-left: 135px;
        }


    .lazyload{
      opacity: 0;
    }
      .lazyloaded{
        opacity: 1;
        transition: all 0.5s;
      }


    /* ----------------------------------------------------
     * コンテンツ詳細画面
     * --------------------------------------------------*/
    section#main section#article{
      width: 90%;
      margin: auto auto;
    }
      section#main section#article .gmap_iframe {
        margin: 0 0 30px;
        border: 1px solid #ddd;
      }
        section#main section#article .gmap_iframe iframe {
          width: 100%;
          height: 400px;
        }

    section#main section#article ul.meta{
      list-style-type: none;
      width: 100%;
      padding-top: 15px;
    }
      section#main section#article ul.meta li{
        float: left;
        background-color: rgb(230, 130, 16);
        color: #fff;
        font-size: 12px;
        padding: 0px 10px;
        margin-right: 5px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
      }
      section#main section#article div.ruby{
        width: 100%;
        font-size: 12px;
        text-align: center;
        margin-top: 35px;
      }
      section#main section#article div.name{
        width: 100%;
        font-size: 30px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 5px;
      }
      section#main section#article div.phone{
        width: 100%;
        font-size: 20px;
        text-align: center;
      }
      section#main section#article div.info{
        width: 100%;
        font-size: 20px;
        margin-top: 25px;
        margin-bottom: 25px;
        line-height: 180%;
        text-align: center;
      }

      section#main section#article .store_box {
        margin: 20px 0;
        margin-top: 30px;
      }
        section#main section#article .store_box .open_title {
          font-size: 28px;
        }
        section#main section#article .store_box .open_cont {
          font-size: 16px;
        }

      section#main section#article .info_tbl {
        margin-bottom: 30px;
      }

        section#main section#article .info_tbl .title {
          white-space: nowrap;
          background-color: #bbb;
          text-align: center;
          display: table-cell;
          vertical-align: middle;
          color: #000;
          border-bottom: 2px solid #fff;
          background-color: #f0f0f0;
          padding: 0px 15px;
          -webkit-background-size: 14px 14px;
        }

        section#main section#article .info_tbl td {
          padding: 6px;
          font-size: 14px;
        }

        section#main section#article .info_tbl .text {
          width: 100%;
          background-color: #fff;
          -webkit-background-size: 5px 5px;
          border-bottom: 2px solid #f0f0f0;
        }

        section#main section#article .caption-txt {
          text-align: center;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
             -ms-flex-pack: center;
           justify-content: center;
        }


    /* ----------------------------------------------------
     * ユーザー情報
     * --------------------------------------------------*/
    div#contents section#panel table.user{
      width: 100%;
      margin-top: 15px;
      margin-bottom: 15px;
    }
    div#contents section#panel table.status{
      width: 100%;
      margin-bottom: 20px;
      background-color: #f0f0f0;
      table-layout: fixed;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
    }
      div#contents section#panel table.user td,
      div#contents section#panel table.user th{
        padding: 0px;
        vertical-align: top;
      }
        div#contents section#panel table.user th img{
          width: 100px;
          height: auto;
        }
      div#contents section#panel table.user td.mt{
        padding-top: 5px;
      }
      div#contents section#panel table.user td ul{
        list-style-type: none;
        padding: 0px;
        margin: 0px;
      }
        div#contents section#panel table.user td ul li.icon.mt{
          margin-top: 10px;
        }
        div#contents section#panel table.user td ul li.icon.child{
          padding-top: 3px;
          padding-left: 2px;
        }
        div#contents section#panel table.user td ul li.icon span{
          line-height: 20px;
          padding: 0px 12px;
          font-size: 12px;
          display: inline-block;
          background-color: #eee;
          margin-right: 5px;
          border-radius: 10px;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
        }
          div#contents section#panel table.user td ul li.icon span.m{
            background-color: rgb(206, 229, 250);
          }
          div#contents section#panel table.user td ul li.icon.child span{
            margin-right: 3px;
            margin-bottom: 3px;
            padding: 0px 6px;
          }
            div#contents section#panel table.user td ul li.icon.child span.d{
              background-color: rgb(250, 206, 206);
            }
            div#contents section#panel table.user td ul li.icon.child span.k{
              background-color: rgb(250, 222, 206);
            }
            div#contents section#panel table.user td ul li.icon.child span.c{
              background-color: rgb(216, 250, 206);
            }
            div#contents section#panel table.user td ul li.icon.child span.s{
              background-color: rgb(250, 238, 206);
            }
            div#contents section#panel table.user td ul li.icon.child span.y{
              background-color: rgb(249, 227, 255);
            }
            div#contents section#panel table.user td ul li.icon.child span.h{
              background-color: rgb(237, 206, 250);
            }
        div#contents section#panel table.user td ul li.name{
          font-size: 16px;
          padding-left: 5px;
          padding-top: 6px;
          padding-bottom: 6px;
        }
        div#contents section#panel table.user td ul li.label{
          font-size: 10px;
          color: #777;
          padding-left: 5px;
        }
        div#contents section#panel table.user td ul li.number{
          padding-left: 40px;
        }
          div#contents section#panel table.user td ul li.number span{
            font-size: 10px;
            padding-left: 5px;
          }
        div#contents section#panel table.user td ul li.user{
          padding-left: 30px;
        }
          div#contents section#panel table.user td ul li.user img{
            width: 40px;
            height: auto;
          }
      div#contents section#panel table.status th,
      div#contents section#panel table.status td{
        text-align: center;
        font-size: 12px;
      }
        div#contents section#panel table.status th i{
          font-size: 17px;
          padding-top: 7px;
        }
        div#contents section#panel table.status td{
          padding-top: 0px;
          line-height: 20px;
        }
    div#contents section#panel section.snsinfo div.addbtn{
      position: relative;
      background-color: rgb(131, 80, 80);
      color: #fff;
      padding: 0px 10px;
      padding-left: 55px;
      line-height: 30px;
      font-size: 12px;
      cursor: pointer;
      margin-bottom: 40px;
      -webkit-transition: 0.6s;
      -moz-transition: 0.6s;
      -ms-transition: 0.6s;
      -o-transition: 0.6s;
      transition: 0.6s;
      border-radius: 3px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
    }
      div#contents section#panel section.snsinfo div.addbtn:hover{
        background-color: rgb(194, 61, 61);
      }
      div#contents section#panel section.snsinfo div.addbtn i{
        position: absolute;
        font-size: 19px;
        top: 6px;
        left: 22px;
        color: #fff;
      }

  /* ----------------------------------------------------
   * お知らせ
   * --------------------------------------------------*/
  div#contents section#panel section.snsinfo div.newstitle{
    display: inline-block;
    padding: 0px 30px;
    margin-bottom: 7px;
    font-size: 10px;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: rgb(112, 132, 145);
  }
    div#contents section#panel section.snsinfo table.news{
      width: 100%;
      margin-bottom: 40px;
    }
      div#contents section#panel section.snsinfo table.news th{
        padding: 0px;
        vertical-align: top;
      }
      div#contents section#panel section.snsinfo table.news td{
        padding: 0px;
        line-height: 110%;
        padding-bottom: 5px;
      }
        div#contents section#panel section.snsinfo table.news th span{
          line-height: 16px;
          padding: 0px 12px;
          font-size: 12px;
          font-weight: normal;
          display: inline-block;
          background-color: #ddd;
          margin-right: 5px;
          border-radius: 10px;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
        }
        div#contents section#panel section.snsinfo table.news td a{
          text-decoration: none;
          font-size: 14px;
        }
          div#contents section#panel section.snsinfo table.news td a:hover{
            color: #96120e;
          }

    /* ----------------------------------------------------
     * ソートボタン
     * --------------------------------------------------*/
    div#contents section#panel div.sort-group.code{
      margin-bottom: 10px;
      margin-top: 3px;
    }
    div#contents section#panel div.sort-group input[type=radio],
    div#contents section#panel div.sort-group input[type=checkbox] {
      display: none;
    }
    div#contents section#panel div.sort-group label{
      width: 60px;
      background-color: #888;
      text-align: center;
      letter-spacing: 1px;
      color: #fff;
      font-size: 11px;
      line-height: 19px;
      padding: 2px 9px;
      margin-right: 2px;
      border-radius: 7px;
      line-height: 25px;
      -webkit-border-radius: 7px;
      -moz-border-radius: 7px;
      white-space: nowrap;
      cursor: pointer;
    }
      div#contents section#panel div.sort-group input[type="radio"]:checked + label,
      div#contents section#panel div.sort-group input[type="checkbox"]:checked + label {
        background-color: rgb(184, 55, 55);
      }
      div#contents section#panel div.sort-group div.ngbtn label:hover {
        background-color: rgb(206, 122, 122);
      }

  /* ----------------------------------------------------
   * コンテンツタブ
   * --------------------------------------------------*/
  section#main-tab{
    position: absolute;
    bottom: -30px;
    left: 0px;
    background-color: #e2e2e2;
    width: 100%;
    height: 30px;
  }
  section#main-tab ul {
    list-style: none;
    position: absolute;
    top: -7px;
    left: 30px;
  }
    section#main-tab li {
      float: left;
      position: relative;
    }
      section#main-tab li a {
        float: left;
        padding-left: 18px;
        padding-right: 18px;
        padding-top: 1px;
        text-decoration: none;
        color: #aaa;
        cursor: pointer;
        font-size: 12px;
        line-height: 20px;
        background-color: #eee;
        letter-spacing: 0.5px;
        -webkit-border-top-left-radius: 2px;
        -webkit-border-top-right-radius: 2px;
        -moz-border-radius-topleft: 2px;
        -moz-border-radius-topright: 2px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;
        -ms-transition: 0.2s;
        -o-transition: 0.2s;
        transition: 0.2s;
      }
      section#main-tab li.active {
        z-index: 3;
      }
        section#main-tab li.active a {
          background-color: #fff;
          color: #777;
        }
        section#main-tab li.active i {
          color: #777;
        }
      section#main-tab li a:hover {
        background-color: #f5f5f5;
      }
      section#main-tab li.active a:hover {
        background-color: #fff;
      }



  /* ----------------------------------------------------
   * コンテンツ一覧
   * --------------------------------------------------*/
  div#contents section#main ol.items {
    width: 100%;
    align-items: center;
    padding: 0px;
    margin: 0px;
    margin-left: 0px;
    margin-top: 20px;
    list-style-type: none;
  }
    div#contents section#main ol.items li {
      position: relative;
      float: left;
      font-size: 16px;
      line-height: 30px;
      width: 150px;
      padding: 0px;
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 0px;
      padding-bottom: 5px;
      margin-right: 20px;
      margin-bottom: 20px;
      background-color: #fff;
      color: #333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      -webkit-transition: 0.6s;
      -moz-transition: 0.6s;
      -ms-transition: 0.6s;
      -o-transition: 0.6s;
      transition: 0.6s;
    }
      div#contents section#main ol.items.event li,
      div#contents section#main ol.items.company li,
      div#contents section#main ol.items.qa li,
      div#contents section#main ol.items.community li {
        width: 200px;
      }
        div#contents section#main ol.items.community li div.photo{
          width: 200px;
          height: 200px;
        }
      div#contents section#main ol.items.qa li,
      div#contents section#main ol.items.tips li,
      div#contents section#main ol.items.community li {
        height: 222px;
      }
      div#contents section#main ol.items.event li,
      div#contents section#main ol.items.company li,
      div#contents section#main ol.items.community li {
        height: 322px;
        background-color: #f9f9f9;
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        color: #333;
      }
        div#contents section#main ol.items.event li:hover,
        div#contents section#main ol.items.company li:hover,
        div#contents section#main ol.items.community li:hover {
          background-color: #e2f5dc;
        }
      div#contents section#main ol.items.event li,
      div#contents section#main ol.items.company li,
      div#contents section#main ol.items.cmdty li {
        height: 270px;
      }
      div#contents section#main ol.items.qa li.q{
        background-color: #c1ddf7;
      }
      div#contents section#main ol.items.qa li.a{
        background-color: #f7d2c1;
      }
        div#contents section#main ol.items.qa li p.photo,
        div#contents section#main ol.items.tips li p.photo {
          margin-top: 5px;
        }
        div#contents section#main ol.items.community li p.photo {
          margin-top: 10px;
          color: #333;
        }
        div#contents section#main ol.items.ceventompany li p.photo,
        div#contents section#main ol.items.company li p.photo,
        div#contents section#main ol.items.cmdty li p.photo {
          margin-top: 10px;
        }
        div#contents section#main ol.items.qa li span,
        div#contents section#main ol.items.tips li span {
          color: #999;
        }
        div#contents section#main ol.items.community li span {
          color: #333;
        }
        div#contents section#main ol.items.event li p.text,
        div#contents section#main ol.items.company li p.text,
        div#contents section#main ol.items.cmdty li p.text,
        div#contents section#main ol.items.qa li p.text,
        div#contents section#main ol.items.tips li p.text,
        div#contents section#main ol.items.community li p.text {
          padding: 3px;
          height: 34px;
          line-height: 120%;
          white-space: normal;
          margin: auto auto;
          word-wrap: break-word;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        div#contents section#main ol.items.qa li div.text {
          padding: 6px 8px;
          height: 162px;
          font-size: 12px;
          line-height: 120%;
          white-space: normal;
          margin: auto auto;
          word-wrap: break-word;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 12;
          color: #000;
          overflow: hidden;
        }
        div#contents section#main ol.items.qa li p.text,
        div#contents section#main ol.items.tips li p.text {
          height: 64px;
          -webkit-line-clamp: 5;
        }
      div#contents section#main ol.items.event li p.user,
      div#contents section#main ol.items.company li p.user,
      div#contents section#main ol.items.community li p.user {
        margin-top: 10px;
      }
      div#contents section#main ol.items.event li p.text,
      div#contents section#main ol.items.company li p.text,
      div#contents section#main ol.items.community li p.text {
        padding: 3px 7px;
        height: 34px;
        line-height: 120%;
        white-space: normal;
        margin: auto auto;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
        div#contents section#main ol.items.event li h4,
        div#contents section#main ol.items.company li h4,
        div#contents section#main ol.items.community li h4 {
          padding: 0px 5px;
          font-size: 14px;
          margin-top: 15px;
          margin-bottom: 10px;
        }
        div#contents section#main ol.items.event li p.user,
        div#contents section#main ol.items.company li p.user,
        div#contents section#main ol.items.community li p.user{
          position: relative;
          padding-left: 35px;
          font-size: 12px;
          height: 40px;
          line-height: 30px;
        }
        div#contents section#main ol.items.event li p.user img,
        div#contents section#main ol.items.company li p.user img,
        div#contents section#main ol.items.community li p.user img{
          position: absolute;
          top: 0px;
          left: 0px;
          width: 30px;
        }
        div#contents section#main ol.items.company li p.user img,
        div#contents section#main ol.items.cmdty li p.user img,
        div#contents section#main ol.items.community li p.user img,
        div#contents section#main ol.items.event li p.user img.eventphoto{
          width: 30px;
          height: 30px;
          background-position: center;
          background-size: cover;
          border-radius: 15px;
          -webkit-border-radius: 15px;
          -moz-border-radius: 15px;
        }


      div#contents section#main ol.items li div.count {
        position: absolute;
        top: 3px;
        left: 3px;
        font-size: 14px;
        padding-right: 6px;
        font-weight: bold;
        display: inline-block;
        padding-left: 22px;
        padding-top: 2px;
        line-height: 19px;
        background-color: rgb(255, 255, 255, 0.9);
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
      }
      div#contents section#main ol.items li div.genre,
      div#contents section#main ol.items li div.delete,
      div#contents section#main ol.items li div.edit {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 22px;
        height: 22px;
        background-color: rgb(255, 255, 255, 0.0);
        border-radius: 11px;
        -webkit-border-radius: 11px;
        -moz-border-radius: 11px;
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -ms-transition: 0.6s;
        -o-transition: 0.6s;
        transition: 0.6s;
      }
      div#contents section#main ol.items li div.genre{
        background-color: rgb(255, 255, 255, 1.0);
      }
        div#contents section#main ol.items li div.genre i,
        div#contents section#main ol.items li div.delete i,
        div#contents section#main ol.items li div.edit i,
        div#contents section#main ol.items li div.count i{
          position: absolute;
          top: 3px;
          left: 4px;
          font-size: 15px;
          -webkit-transition: 0.6s;
          -moz-transition: 0.6s;
          -ms-transition: 0.6s;
          -o-transition: 0.6s;
          transition: 0.6s;
        }
          div#contents section#main ol.items li div.genre i{
            left: 3px;
            font-size: 16px;
          }
          div#contents section#main ol.items li div.delete i{
            left: 3px;
            font-size: 16px;
            display: none;
          }
          div#contents section#main ol.items li div.edit i{
            left: 4px;
            display: none;
          }
      div#contents section#main ol.items li div.photo {
        width: 150px;
        height: 150px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
      }
      div#contents section#main ol.items.event li div.photo,
      div#contents section#main ol.items.company li div.photo,
      div#contents section#main ol.items.cmdty li div.photo {
        width: 200px;
        height: 150px;
      }
      div#contents section#main ol.items.qa li div.photo,
      div#contents section#main ol.items.tips li div.photo {
        height: 120px;
      }
        div#contents section#main ol.items li.similar {
          width: 160px;
          height: 240px;
          margin-right: 10px;
        }
          div#contents section#main ol.items li.similar div.photo {
            width: 160px;
            height: 200px;
            -webkit-filter:grayscale(0%);
            -moz-filter:grayscale(0%);
            -ms-filter:grayscale(0%);
            filter:grayscale(0%);
          }
      div#contents section#main ol.items li div.userimg {
        width: 100%;
        height: 120px;
        padding: 0px;
      }
        div#contents section#main ol.items li div.userimg img {
          width: 120px;
          margin-left: 15px;
          background-position: center;
          background-size: cover;
          border-radius: 60px;
          -webkit-border-radius: 60px;
          -moz-border-radius: 60px;
        }
      div#contents section#main ol.items.qa li div.userimg {
        width: 30px;
        height: 30px;
        padding: 0px;
      }
        div#contents section#main ol.items.qa li div.userimg img {
          width: 30px;
          margin-left: 5px;
          margin-top: 5px;
          background-position: center;
          background-size: cover;
          border-radius: 15px;
          -webkit-border-radius: 15px;
          -moz-border-radius: 15px;
        }
      div#contents section#main ol.items.qa li div.label {
        background-color: rgb(192, 116, 81);
        font-size: 12px;
        position: absolute;
        right: 4px;
        top: -15px;
        padding: 0px 5px;
        padding-top: 1px;
        line-height: 14px;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        color: #fff;
        display: inline-block;
      }
        div#contents section#main ol.items.qa li.q div.label {
          background-color: rgb(81, 116, 192);
        }

      div#contents section#main ol.items li div.username {
        width: 100%;
        text-align: center;
      }
      div#contents section#main ol.items li div.usericon {
        width: 100px;
        margin: 0px auto;
        text-align: center;
        padding: 2px 0;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
      }
        div#contents section#main ol.items li div.usericon i{
          font-size: 14px;
          padding-bottom: 3px;
        }
        div#contents section#main ol.items li div.usericon > *{
          width: 33%;
          height: 40px;
          background: #fff;
          font-size: 12px;
          text-align: center;
        }
      div#contents section#main ol.items li h4 {
        font-weight: normal;
        padding: 0px;
        margin: 3px;
        font-size: 13px;
        margin-left: 5px;
        margin-top: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 15px;
        height: 15px;
      }
        div#contents section#main ol.items.qa li h4,
        div#contents section#main ol.items.tips li h4 {
          margin-top: 8px;
          margin-bottom: 6px;
        }
        div#contents section#main ol.items.company li h4,
        div#contents section#main ol.items.cmdty li h4 {
          font-size: 14px;
          margin-top: 15px;
          margin-bottom: 10px;
        }
      div#contents section#main ol.items li div.care {
        position: absolute;
        top: 3px;
        left: 3px;
        color: #fff;
        background-color: #ff0000;
        padding: 0px 7px;
        line-height: 18px;
        font-size: 10px;
        border-radius: 9px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
      }
      div#contents section#main ol.items li div.comment{
        position: absolute;
        left: 35px;
        top: 5px;
        font-size: 12px;
        line-height: 16px;
        color: #000;
        padding-left: 23px;
      }
        div#contents section#main ol.items li div.comment i{
          position: absolute;
          font-size: 12px;
          top: 3px;
          left: 5px;
          color: #000;
        }
      div#contents section#main ol.items li div.date{
        left: 35px;
        top: -7px;
      }
        div#contents section#main ol.items li div.date,
        div#contents section#main ol.items li div.date i,
        div#contents section#main ol.items li div.date span{
          color: #000;
        }
      div#contents section#main ol.items li div.date,
      div#contents section#main ol.items li p {
        font-size: 10px;
        line-height: 11px;
        height: 11px;
        margin: 0px;
        margin-left: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
        div#contents section#main ol.items li div.date,
        div#contents section#main ol.items li p.photo{
          position: relative;
          padding-left: 16px;
          font-size: 12px;
          font-weight: bold;
        }
        div#contents section#main ol.items li div.date i,
        div#contents section#main ol.items li p.photo i{
          position: absolute;
          top: 0px;
          left: 0px;
          font-size: 12px;
        }
        div#contents section#main ol.items li div.date span,
        div#contents section#main ol.items li p.photo span{
          font-size: 10px;
          padding-left: 2px;
          padding-right: 2px;
          font-weight: normal;
        }
      div#contents section#main ol.items li span {
        font-size: 11px;
        color: #333;
      }
      div#contents section#main ol.items li.line {
        background-color: #eee;
      }
      div#contents section#main ol.items li.fst {
        background-color: rgb(202, 184, 83);
      }
      div#contents section#main ol.items li.hand {
        background-color: rgba(60, 204, 47, 0.315);
      }
      div#contents section#main ol.items li:hover {
        color: #000;
      }
        div#contents section#main ol.items li:hover span,
        div#contents section#main ol.items li:hover i {
          color: #000;
        }
      div#contents section#main ol.items li:hover div.delete,
      div#contents section#main ol.items li:hover div.edit{
        background-color: rgb(255, 255, 255, 1.0);
      }
        div#contents section#main ol.items li:hover div.delete i,
        div#contents section#main ol.items li:hover div.edit i{
          display: block;
        }
      div#contents section#main ol.items li:hover div.count {
        background-color: rgb(255, 255, 255, 1.0);
      }

/* ----------------------------------------------------
 * 投稿
 * --------------------------------------------------*/
div#contents section#main section.btnbox{
  height: 30px;
}
div#contents section#main div#add_topic_non,
div#contents section#main div#add_topic{
  position: absolute;
  right: 10px;
  margin-top: 20px;
  font-size: 12px;
  line-height: 30px;
  padding-left: 36px;
  padding-right: 15px;
  border-radius: 13px;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  display: inline-block;
  cursor: pointer;
  background-color: #f0f0f0;
}
  div#contents section#main div#add_topic_non i,
  div#contents section#main div#add_topic i{
    position: absolute;
    font-size: 21px;
    top: 5px;
    left: 10px;
  }
  div#contents section#main div#add_topic_non:hover,
  div#contents section#main div#add_topic:hover{
    background-color: #999;
    color: #fff;
  }
  div#contents section#main div#add_topic_non:hover i,
  div#contents section#main div#add_topic:hover i{
    color: #fff;
  }

/* ----------------------------------------------------
 * 投稿編集エリア
 * --------------------------------------------------*/
div#contents section#main section.inputbox{
  width: 97%;
  margin-top: 20px;
  padding-right: 5px;
  background-color: #f0f0f0;
  display: none;
}
  div#contents section#main section.inputbox table{
    margin: 0px;
    table-layout: fixed;
  }
  div#contents section#main section.inputbox table th{
    width: 60px;
    padding: 0px;
    padding-right: 5px;
    vertical-align: top;
  }
  div#contents section#main section.inputbox table td{
    position: relative;
    padding: 0px;
    width: 100%;
    text-align: left;
  }
  div#contents section#main section.inputbox table th img{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    margin-left: 5px;
    margin-top: 4px;
  }
  div#contents section#main section.inputbox td div.inputarea{
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 100%;
    background-color: #fff;
  }
    div#contents section#main section.inputbox td div.photobox{
      position: absolute;
      right: 10px;
      width: 80px;
      height: 100px;
      text-align: center;
      margin-top: 10px;
    }
      div#contents section#main section.inputbox td div.photobox input{
        display: none;
      }
      div#contents section#main section.inputbox td div.photobox div.title{
        font-size: 12px;
        color: #999;
      }
      div#contents section#main section.inputbox td div.photobox div.icon{
        position: absolute;
        top: 25px;
        right: 28px;
        cursor: pointer;
      }
      div#contents section#main section.inputbox td div.photobox img{
        margin-top: 40px;
        width: 100%;
        height: auto;
      }
    div#contents section#main section.inputbox td div.inputarea div.selbox{
      padding: 0px;
      margin: 0px;
      padding-bottom: 5px;
    }
    div#contents section#main section.inputbox td div.inputarea ul{
      list-style-type: none;
      padding: 0px;
      margin: 0px;
      padding-left: 10px;
    }
      div#contents section#main section.inputbox td div.inputarea ul li{
        float: left;
      }
        div#contents section#main section.inputbox td div.inputarea ul li.name{
          font-size: 11px;
          width: 50px;
          line-height: 22px;
        }
        div#contents section#main section.inputbox td div.inputarea ul li{
          float: left;
        }
  div#contents section#main section.inputbox td textarea{
    width: 87%;
    margin: 10px;
    height: 150px;
    outline: none;
    border: none;
    box-sizing: border-box;
    resize: none;
  }
  div#contents section#main section.inputbox td input{
    padding-left: 20px;
    line-height: 40px;
    margin-right: 7px;
    width: 95%;
    outline: none;
    border: none;
    background-color: #fff;
  }
  div#contents section#main section.inputbox td div.icon{
    position: absolute;
    top: 17px;
    right: 15px;
    cursor: pointer;
  }
    div#contents section#main section.inputbox td .topic div.icon{
      top:14px;
    }
    div#contents section#main section.inputbox td div.icon.add{
      right: 50px;
      display: none;
    }

@media screen and (max-width: 579px) {
  div#contents section#main ol.items.community li,
  div#contents section#main ol.items.company li{
    width: 100%;
  }
  div#contents section#main ol.items.community li div.photo,
  div#contents section#main ol.items.company li div.photo{
    width: 100%;
  }
}