SCP基金会中文分部

/*
使用色定義
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&display=swap');

:root:lang(cn) {
    --mainblue: #178cce;
    --thin-blue: #b5cde2;
    --cu-green: #006837;

    --cu-red: #c1272d;
    --scribbled-orange: #f49e4c;
    --third-blue: #0071bc;

    --bg: #f0f0e6;
}

/*
背景画像
*/

div#container-wrap {
  background: none !important;
}

/*
ヘッダ
*/

#header {
  padding-top: 2em;
  height: 130px;
  z-index: 10;
  background: url(http://scp-jp.wdfiles.com/local--files/joicle-catalog-hub/q2.png) 10px 40px no-repeat, url(http://scp-jp.wdfiles.com/local--files/joicle-catalog-hub/q1.png) calc(100% - 10px) calc(100% - 40px) no-repeat;
}

div #header h1 {
  margin-left: 0;
  width: 273px;
  top: 35px;
  min-height: 100px;
  position: absolute;
}

div #header h1 a {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1px;
}

div #header h2 {
  display: none;
}

#top-bar {
  position: absolute;
  bottom: 0px;
  margin-top: 115px;
  height: auto;
  padding: 0;
  z-index: 20;
  font-size: 90%;
}

#top-bar ul {
  float: right;
  padding-right: 5em;
}

#top-bar a {
  color:var(--thin-blue);
}

#top-bar ul li a {
  border-left: none;
  border-right: none;
}

#top-bar ul li.sfhover a, #top-bar ul li:hover a {
  color:var(--mainblue);
  border-left: none;
  border-right: none;
}

#search-top-box-input {
  display: none;
}

#search-top-box-form input[type=submit] {
  border: none;
  border-radius: 0px;
  padding: 2px 5px;
  font-size: 90%;
  font-weight: bold;
  color:var(--mainblue);
  background-color: #fff;
  background: none;
  box-shadow: none;
  cursor: pointer;
}

#search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus {
  border: none;
  color:var(--thin-blue);
  text-shadow: none;
  background-color: #fff;
  background: none;
  box-shadow: none;
}

#search-top-box {
  position: absolute;
  top: auto;
  bottom: 23px;
  right: 8px;
  width: 250px;
  text-align: right;
}

#header::after {
  content: '';
  position: absolute;
  width: 100%;
  margin: 0 auto;
  margin-top: 130px;
  height: 100px;
  background: url(http://scp-jp.wdfiles.com/local--files/joicle-catalog-hub/q3-min-min.png) top left repeat-x;
}

/*
コンテント
*/

/* ヘッダーにかぶせない */

#main-content {
  margin-top: 100px;
}

h1, #page-title {
  color: #000;
  font-family: "Noto Serif SC", "Source Han Serif SC", "思源宋体", serif;
}

a {
  color:var(--thin-blue);
}

#page-content a{
  color: #00A;
}
#page-content h2{
font-weight:bold;
}
#page-content h2:before{
  content:'■';
  color:var(--cu-green);
}
#page-content .rate-box-with-credit-button .creditButton{
  background-color:var(--mainblue);
  border: 1px solid var(--mainblue);
}
#page-content .creditButton .fa-info{
    color: #fff;
}
div.page-rate-widget-box .rate-points {
    background-color:var(--mainblue);
    border: solid 1px var(--mainblue);
}
.page-rate-widget-box .rateup, .page-rate-widget-box .ratedown {
    background-color:var(--thin-blue);
    border-top: solid 1px var(--mainblue);
    border-bottom: solid 1px var(--mainblue);
}
.page-rate-widget-box .cancel {
    background-color:var(--mainblue);
    border: solid 1px var(--mainblue);
}
.page-rate-widget-box a{
    color: #fff !important;
}
.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover {
    background:var(--thin-blue);
    color: #fffff0;
}
.page-rate-widget-box .cancel a:hover {
    background:var(--thin-blue);
}
/*
リスト http://webnonotes.com/css/css-list/
*/
.defaultlist, .defaultlist li{
  padding:0px;
  margin:0px;
}

.defaultlist li{
  list-style-type:none !important;
  list-style-image:none !important;
  margin: 5px 0px 5px 0px !important;
}
.list1 li{
  position:relative;
  padding-left:20px;
}

.list1 li:before{
  content:'';
  display:block;
  position:absolute;
  box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
  top:3px;
  left:2px;
  height:0;
  width:0;
  border-top: 6px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #aaa;
}
.list2 li{
  position:relative;
  padding-left:20px;
}

.list2 li:before{
  content:'';
  height:0;
  width:0;
  display:block;
  border:5px transparent solid;
  border-right-width:0;
  border-left-color:#aaa;
  position:absolute;
  top:5px;
  left:8px;
}

.list2 li:after{
  content:'';
  height:2px;
  width:10px;
  display:block;
  background:#aaa;
  position:absolute;
  top:9px;
  left:0px;
}
.list4 li{
  position:relative;
  padding-left:20px;
}

.list4 li:after, .list4 li:before{
  content:'';
  display:block;
  position:absolute;
  top:4px;
  left:8px;
  height:11px;
  width:4px;
  background:#aaa;
  border-radius:10px;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -o-transform:rotate(45deg);
}
.list4 li:before{
  top:8px;
  left:3px;
  height:8px;
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
}
.list5 li{
  position:relative;
  padding-left:20px;
}
.list5 li:before{
  content:'';
  height:0px;
  width: 90%;
  display:block;
  position:absolute;
  top:18px;
  left:0px;
  border-bottom: 1px dashed #aaa;
}
.list5 li:after{
  content:'';
  display:block;
  position:absolute;
  background:#aaa;
  width:5px;
  height:5px;
  top:7px;
  left:5px;
  border-radius: 5px;
}
.list6 li{
  position:relative;
  padding-left:20px;
}

.list6 li:after{
  content:'';
  display:block;
  position:absolute;
  background:#aaa;
  width:9px;
  height:9px;
  top:5px;
  left:5px;
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
}
.list7 li{
  position:relative;
  display: block;
  padding: 5px 0px 5px 30px;
  background: #ccc;
  color: #444;
  border-radius:15px 0px 0px 15px;
}

.list7 li:after{
  content:'';
  display:block;
  position:absolute;
  width:14px;
  height: 14px;
  top:7px;
  left:5px;
  background: #fff;
  border-radius: 10px;
}
/*
表 http://tablestyler.com/#
*/
.defaultT table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}
.defaultT table td, .defaultT table th {
  padding: 3px 10px;
}
.defaultT table th:first-child {
  border: none;
}
.defaultT table th:first-child {
  border: none;
}

.defaultT table tbody td:first-child {
background-color:var(--bg);
font-weight: bold;
  border-left: none;
}

.defaultT table tbody tr:last-child td {
  border-bottom: none;
}

.defaultT .wiki-content-table {
    margin: 0;
}
.defaultT{
  font: normal 12px/150% "Noto Serif SC", "Source Han Serif SC", "思源宋体", sans-serif;
  background: #fff;
  overflow: hidden;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.defaultT table th {
    color: #FFFFFF;
  font-size: 15px;
  font-weight: bold;
}

.defaultT table tbody td {
  font-size: 12px;
  font-weight: normal;
}

.blueT {
  border: 1px solid #006699;
}

.blueT table th {
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
  background: -moz-linear-gradient( center top, #006699 5%, #00557F 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
  background-color: #006699;
  border-left: 1px solid #0070A8;
}

.blueT table tbody td {
  border-left: 1px solid #E1EEF4;
}
.blueT table tbody td:first-child {
color: #00496B;
}

.redT {
  border: 1px solid #991821;
}

.redT table th {
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #991821), color-stop(1, #80141C));
  background: -moz-linear-gradient( center top, #991821 5%, #80141C 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#991821', endColorstr='#80141C');
  background-color: #991821;
  border-left: 1px solid #B01C26;
}

.redT table tbody td {
  border-left: 1px solid #F7CDCD;
}

.redT table tbody td:first-child {
color: #80141C;
}

.greenT {
  border: 1px solid #36752D;
}

.greenT table th {
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #36752D), color-stop(1, #275420));
  background: -moz-linear-gradient( center top, #36752D 5%, #275420 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#36752D', endColorstr='#275420');
  background-color: #36752D;
  border-left: 1px solid #36752D;
}

.greenT table tbody td {
  border-left: 1px solid #C6FFC2;
}

.greenT table tbody td:first-child {
color: #275420;
}
/*
ボックス
*/
.warning {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #FFC107;
}
.warning h1{
    position: absolute;
    margin-top: 0;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #FFC107;
    color: #ffffff;
    font-weight: bold;
}
.warning p {
    margin: 0;
    padding: 0;
}
.danger {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 20%;
  transform: rotate(45deg);
  flex-flow: column wrap;
  vertical-align: top;
  width: 1em;
  height: 1em;
  border: 2px solid red;
}
.danger p{
  font-weight:bold;
  transform: rotate(-45deg);
}

/*
サイド
*/

#side-bar {
  min-height: calc(100% + 7em);
  background-color:var(--thin-blue);
  transform: translateY(-6em);
}

#side-bar .side-block {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
  margin-top: 4em;
}
#side-bar .heading {
    color:var(--mainblue);
    border-bottom: solid 1px var(--mainblue);
}
#side-bar .side-block a {
  color: #fff;
}

/*
めであ
*/

@media (max-width: 767px) and (min-width:440px) {

  #container {
    border-left: 9px solid var(--thin-blue);
  }
  #header {
    background-size: 200px, 180px;
  }
  div #header h1 {
    width: 200px;
    min-height: 100px;
  }
  #side-bar {
  transform: translateY(0em);
}
}

@media (max-width: 440px) {
  #container {
    border-left: 3px solid var(--thin-blue);
  }
  #header {
    background-size: 130px, 140px;
    height: 100px;
  }
  div #header h1 {
    width: 200px;
    min-height: 80px;
  }
  #header::after {
    margin-top: 100px;
    height: 100px;
    background: url(http://scp-jp.wdfiles.com/local--files/joicle-catalog-hub/q3-min-min.png) top left repeat-x;
    background-size: 440px;
  }
  #top-bar {
    margin-top: 33px;
  }
  #main-content {
    margin-top: 30px;
  }
}
@media (max-width: 767px) {
    #side-bar:target .close-menu {
        min-width: 100vw;
        min-height: 100vh;
    }
}
img.close-menu {
    opacity: 0 !important;
}