body{
    background-color:#FFFFFF;
    
}

.head{
    background: repeat-x url('../img/sandbox3-head.png');
    min-height:140px;
}


/*カード表示親*/
.list-Container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.list-Container div{
    clear: both;
}


#side-bar {
    clear: none;
    float: none;
    width: 16em;
    padding: 0;
    border: 0;
    display: block;
    font-size:90%;
}
#side-bar .heading {
    color: #600;
    border-bottom: solid 1px #600;
    padding-left: 15px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 8pt;
    font-weight: bold;
}
#side-bar a{
    color:#b01;
}

.pseudo-content{
    width: calc(100% - 16em);
    margin-left:16em;
    margin-bottom:50px;
}


/*カード*/
.shell{
    width:520px;
    border-radius: 10px;
    margin-bottom:8px;
    padding: 0.5em 1em 0.5em 1em;
    box-shadow: rgba(50, 141, 162, .5) 1px 1px 1px 0, inset rgba(50, 141, 162, .5) 1px 1px 1px 0px;
    border-radius: 0.8em;
    background: linear-gradient(#fff, #fafffe, #dcf6e9);
    border-top: 1em solid rgba(50, 141, 162, .5);
    border-bottom: 1em solid rgba(50, 141, 162, .5);
    border-left: 1px solid rgba(50, 141, 162, .5);
    border-right: 1px solid rgba(50, 141, 162, .5);
}

.pseudo-content .shell{
    width:calc(520px - 8em);
}

.shell > p {
    margin: 0 0 0.2em 0;
}

/*ジャンルタグ表示欄*/
.shell .tagspace {
    overflow-x:scroll;
    width:100%;
    white-space: nowrap;
    min-height: 52px;
    padding:0x;
    margin:0px;
}

.shell .tagspace p {
    padding:0px;
    margin: 1em 0 0 0;
}

/*下書きタイトル*/
.shell .BigCategory{
    font-size:120%;
    font-weight:bold;
    padding:0 0 0.5em 0;
    overflow-x:scroll;
    width:100%;
    white-space: nowrap;
    -ms-overflow-style:none;
}

.shell .BigCategory::-webkit-scrollbar{
    display:none;
}
.shell .BigCategory p{
    margin:0;
    padding:0px;
}

/*最新ポスト表示*/
.shell .recentlyPost{
    display:block;
    width:100%;
    overflow-x:scroll;
    -ms-overflow-style:none;
}

.shell .recentlyPost::-webkit-scrollbar{
    display:none;
}

/*作成日表示欄*/
.shell .showtimes{
    text-align:right;
    color:#555;
    padding:0px;
    margin:0px;
    font-size:60%;
}

.shell .showtimes p{
    margin:0px;
    padding:0px;
}

/*カスタム検索タイトル*/
.customSearch{
    border-bottom:solid #222 1px;
    padding:3px;
    width:80%;
    font-size:1.2em;
    margin:auto;
}

.customSearch p{
    margin:0;
    padding:0;
}

/*システムCSS*/

/*ジャンル表示の基本CSS*/
.shell .tagspace span a,
.shell .tagspace button
{
    padding:3px;
    border-radius:7px;
    border:solid #333 1px;
    color:#777;
    margin-right:4px;
    background-color:#FFF;
    text-align:center;
    min-width:4em;
    cursor:pointer;
}

.shell .tagspace button:hover{
    background-color:#EEE;
}


/*下書きタイプを表示する*/
.shell .BigCategory .section:before {
    content:"未定義";
    padding: 2px 4px !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    color: white !important;
    background-color: red !important;
    display: inline-block;
    margin-right: 0.3em;
}

.shell .BigCategory ._others:before {
    content:"その他";
    padding: 2px 4px !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    color: white !important;
    background-color: gray !important;
    display: inline-block;

}

.shell .BigCategory ._scp-jp:before {
    content:"SCP";
    padding: 2px 4px !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    color: white !important;
    background-color: blue !important;
    display: inline-block;
}
.shell .BigCategory ._tale-jp:before {
    content:"Tale";
    padding: 2px 4px !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    color: white !important;
    background-color: green !important;
    display: inline-block;
}
.shell .BigCategory ._goi-format-jp:before {
    content:"GOI";
    padding: 2px 4px !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    color: white !important;
    background-color: orange !important;
    display: inline-block;
}
.shell .BigCategory ._translation:before {
    padding: 2px 4px !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    color: white !important;
    background-color: white !important;
    display: inline-block;
}
/*言語別国旗表示*/
.shell .BigCategory ._en:before {content: url("../img/us.png");}
.shell .BigCategory ._ru:before {content: url("../img/ru.png");}
.shell .BigCategory ._ko:before {content: url("../img/kr.png");}
.shell .BigCategory ._cn:before {content: url("../img/cn.png");}
.shell .BigCategory ._fr:before {content: url("../img/fr.png");}
.shell .BigCategory ._pl:before {content: url("../img/pl.png");}
.shell .BigCategory ._es:before {content: url("../img/es.png");}
.shell .BigCategory ._th:before {content: url("../img/th.png");}
.shell .BigCategory ._de:before {content: url("../img/de.png");}
.shell .BigCategory ._it:before {content: url("../img/it.png");}
.shell .BigCategory ._ua:before {content: url("../img/ua.png");}
.shell .BigCategory ._pt-br:before {content: url("../img/pt.png");}
.shell .BigCategory ._cz:before {content: url("../img/cz.png");}
.shell .BigCategory ._otherlang:before{content: url("../img/int.png");}

/**** 検索 ********************/
.customSearch input[type="radio"] {
    cursor:pointer;
}
.customSearch input[type="checkbox"] {
    cursor:pointer;
    display: none;
}

.customSearch .SearchExecuter {
    cursor:pointer;
    background-color: rgba(50, 141, 162, .5);
    color: #fff;
    padding: 0.2em 0.2em;
    border: rgba(50, 141, 162, 1) 1px solid;
    border-radius: 0.8em;
    width: 100%;
    display:block;
    margin:auto;
    font-weight: 700;
    font-size: 1em;
    font-family: fontawesome, sans-serif;
}

.customSearch .SearchExecuter:hover{
    background-color: rgba(30, 121, 142, .6);
}


.customSearch input[type="button"]:hover {
    background-color: rgba(50, 141, 162, .7);
}

.list-Container{
    font-size:0.9em;
}
.list-Container a{
    color:#b01;
}
/*ジャンル及びカテゴリの選択肢を格納するID*/
#searchsetting{
    line-height:1.8em;
}

/*ジャンル及びカテゴリ選択用CSS クラス名は変えないでください*/
/*選択肢の表示切替をクラス名変更によっておこなっているというだけなので、疑似クラス、疑似要素をつける分は問題ありません*/



/* Selecte Button */
.CategoryBase, .GenreBase {
    border-radius: 10px;
    margin-right: 4px;
    cursor: pointer;
    display: inline-block;
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    padding: 5px 7px;
    font-size: 0.9em;
    min-width: 5em;
    text-align: center;
    margin-bottom: 0.5em;
}

.CDefault{
    border:solid #777 1px;
    color: #777;
    background-color:#FFF;
}

.GDefault{
    border:solid #777 1px;
    color: #777;
    background-color:#FFF;
}

.CSelected {
    border: solid #5D1313 1px;
    color: #FFF;
    background-color: #F66363;
}

.GSelected {
    border: solid #13135D 1px;
    color: #FFF;
    background-color: #6363F6;
    background: url("../img/and.png") center center no-repeat #6363f6;
    text-shadow: 1px 1px 1px #eee;
}

.GOrSelected {
    border: solid #135D13 1px;
    color: #FFF;
    background-color: #52CC52;
    background: url("../img/or.png") center center no-repeat #52CC52;
    text-shadow: 1px 1px 1px #fff;
}

.pageContainer{
    text-align:center;
}

.pageContainer button {
    padding: 0 7px;
    display: inline-block;
    margin: 0 6px 3px 3px;
    border: 1px solid #CCC;
    text-decoration: none;
    background: #FFFFFF;
    cursor:pointer;
    color:#b01;
}

.pageContainer button:hover {
    padding: 0 7px;
    border: 1px solid #CCC;
    text-decoration: none;
    background: #E5E5E5;
}

.pageContainer button:disabled {
    font-weight: bold;
    background-color: #888;
    color: #FFF;
    border: 1px solid #333;
}

#sidebar-open{
    display:none;
    cursor:pointer;
}

#side-bar .side-block {
    padding: 10px;
    border: 1px solid #600;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(102,0,0,.5);
    background: #fff;
    margin-bottom: 15px;
}

@media (max-width: 479px) {
    .welcome .bigwelcome{
        font-size:200% !important;
    }
}
@media (min-width: 1200px){
    #side-bar {

        float: left;
    }
}
@media (max-width: 1199px) {

  #side-bar {
      padding: 3em 0.5em;
      position:fixed;
      width:18em;
      left: -18em;
      top:0;
      height: 100%;
      background-color: #32a18e;
      overflow-y: auto;
      z-index:2;
      transition: left .5s ease-in-out .1s;
      
  }
  .sideopen #side-bar{
      left: 0em;
  }
  .container{
      margin:0 !important;
      padding:0 !important;
      width:100% !important;
      max-width:100%;
  }
  #sidebar-open{
    box-sizing: content-box;
    position: fixed;
    bottom: 0.5em;
    display:block;
    left: 0.5em;
    z-index: 15;
    font-family: san-serif;
    font-size: 20px;
    font-weight: bold;
    width: 30px;
    height: 30px;
    line-height: 0.9em;
    text-align: center;
    border: 0.2em solid #888 ;
    background-color: #fff;
    border-radius: 100%;
    color: #888;
    cursor:pointer;
    filter: drop-shadow(0px 4px 4px #000000);
    padding:0px;
  }
  
  #sidebar-open:hover{
      border-color: #FFFFFF;
      background-color: #888;
      color:#FFFFFF;
      filter: drop-shadow(0px 0px 10px #000000);
  }
  
   .sideopen #sidebar-open{
       border:none;
       display:block;
       height:300%;
       width:300%;
       top:-100%;
       left:-100%;
       background-color:#000;
       filter:alpha(opacity=50); /* IE 6,7*/
       -ms-filter: "alpha(opacity=50)"; /* IE 8,9 */
       -moz-opacity:0.5; /* FF , Netscape */
       -khtml-opacity: 0.5; /* Safari 1.x */
       opacity:0.5;
       zoom:1; /*IE*/
       z-index:1;
       color:transparent;
   }
   .sideopen #sidebar-open:hover{
       background-color:#000;
       filter:alpha(opacity=70); /* IE 6,7*/
       -ms-filter: "alpha(opacity=70)"; /* IE 8,9 */
       -moz-opacity:0.7; /* FF , Netscape */
       -khtml-opacity: 0.7; /* Safari 1.x */
       opacity:0.7;
       zoom:1; /*IE*/
   }

}
@media (min-width: 960px) and (max-width: 1199px) { 
  .pseudo-content{
      width:960px;
      margin:auto;
      margin-bottom:50px;
  }
}
@media (max-width: 959px){
  .pseudo-content{
      width:100%;
      margin:0;
      margin-bottom:50px;
      padding: 0 0.5em;
  }
}

@media (max-width: 737px) {
  .shell ,
  .pseudo-content .shell{
    width: 90%;
  }
}

@media(min-width:768px){
    .nav-menu-base{
        background-color:#21907d;
    }
}

@media (max-width:767px){
    #top-nav-menubuttons-openbutton{
        background-color:#32a18e;
    }
    #top-nav-menubuttons-openbutton:hover{
        color:#FFFFFF;
        background-color:#21907d;
    }
}

@media (min-width: 767px) and (max-width: 996px) { 
  .shell ,
  .pseudo-content .shell {
    width: 90%;
  }
  .customSearch{
    width:95%;
  }
}