第二回 - 絵柄シャッフル企画

/* ===== ===== ===== =====
   文体シャッフル用テーマ
 
      author :     ukwhatn, meshiochislash
      modified:   r74
      year   :     2021
      source :     http://twilight-off.wikidot.com/
   ===== ===== ===== ===== */
 
@import url('https://ukwhatn-tp.wdfiles.com/local--code/theme%3Auk-gray/1');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300&display=swap');
 
#header {
    background: unset;
}
 
#page-content .title {
    font-family: "M Plus 1p";
    color: #444;
}
 
#page-content .image-container {
    padding: 0;
}
 
#page-content .system-pagestate-ctrl {
    display: none !important;
}
 
#page-content {
    --accent: #444;
    --daccent: #0c0001;
    --hraccent: #333;
}
 
#page-content .chr hr {
    margin: unset;
    padding: unset;
    height: unset;
    border: unset;
    color: unset;
    background-color: unset;
}
 
#page-content .chr hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, var(--hraccent) 50%, rgba(255, 255, 255, 1) 100%);
    width: 85%;
    margin: 3em auto;
    position: relative;
    overflow: visible;
}
 
#page-content .chr hr::after {
    display: block;
    content: "\f128";
    font-family: "FontAwesome";
    font-size: 15px;
    color: var(--accent);
    position: absolute;
    top: -7.5px;
    left: 50%;
    background: white;
    width: 20px;
    height: 15px;
    transform: translateX(-50%);
    text-align: center;
}
 
#page-content .chr.shr hr {
    width: 30%;
    margin: 2em auto;
}
 
#page-content .chr.sshr hr {
    width: 15%;
    margin: 1em auto;
}
 
#page-content h1,
#page-content h2,
#page-content h3 {
    color: var(--accent);
}
 
#page-content a,
#page-content a.newpage {
    color: var(--daccent);
}
 
#page-content h1,
#page-content h2,
#page-content h3 {
    margin: 0 0 .75em 0;
}
 
#page-content .block {
    margin: 1em auto;
    width: 100%;
    max-width: 500px;
    border: solid 0.5px var(--accent);
}
 
#page-content .customcol {
    text-align: center;
}
 
#page-content .customcol .collapsible-block-folded a.collapsible-block-link {
    color: var(--accent);
    font-size: 120%;
    font-weight: bold;
}
 
#page-content .customcol .collapsible-block-folded a.collapsible-block-link::after {
    content: "\A（クリックで開きます）";
    white-space: pre;
    color: gray;
    font-size: 10px;
    text-decoration: none !important;
}
 
#page-content .customcol .collapsible-block-folded a.collapsible-block-link::after:hover {
    text-decoration: none !important;
}
 
#page-content .customcol .collapsible-block-folded a.collapsible-block-link {
    color: var(--accent);
    font-size: 150%;
    font-weight: bold;
}
 
#page-content .customcol .collapsible-block-unfolded {
    width: 100%;
    border: solid 0.5px var(--accent);
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
 
#page-content .customcol .collapsible-block-unfolded-link {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--accent);
    line-height: 2;
    font-size: 120%;
    font-weight: bold;
}
 
#page-content .customcol .collapsible-block-unfolded-link a {
    color: white;
    text-decoration: none !important;
    width: 100%;
    display: block;
}
 
#page-content .customcol .collapsible-block-content {
    margin: 3em 1em 1em 1em;
}
 
#page-content .author-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
 
#page-content .author-list .item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 30%;
    min-width: 200px;
    margin: 0.5em;
    box-sizing: border-box;
    border: solid var(--accent) 0.5px;
    border-radius: 3em;
}
 
#page-content .author-list .item.true {
    border: solid #bd0718 0.5px;
}
 
.yui-navset .yui-content {
    background: var(--tab-content-background);
    padding: 0.3rem;
    text-align: left;
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-image: url(../images/yuitabs.png);
    background-color: var(--tab-button-background);
    color: var(--tab-button-color);
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background-image: url(../images/yuitabs.png);
    background-color: var(--tab-button-selected-background);
    color: var(--tab-button-selected-color);
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: var(--tab-button-focused-background) url(../images/yuitabs.png) repeat-x left -1300px;
    text-decoration: none;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: var(--tab-border);
    margin: 0;
}
 
#page-content .yui-navset ul,
#page-content .yui-navset ol {
    margin-left: 0;
}
 
.yui-navset li {
    line-height: normal;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    zoom: unset;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-box-shadow: 0 .3125rem 0 0 var(--accent);
    -moz-box-shadow: 0 .3125rem 0 0 var(--accent);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin: 0 2px;
    box-shadow: 0 .3125rem 0 0 var(--accent);
    border: 0;
    box-sizing: border-box;
    transform: translateX(1px);
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    zoom: unset;
    border: unset;
    background-color: #f4f4f4;
    background-image: none;
    color: var(--default-font-color);
    transition: color 0.25s, background-color 0.25s;
}
 
.yui-navset .yui-nav a:focus,
.yui-navset .yui-nav a:hover {
    zoom: unset;
    background-color: dimgray;
    color: var(--accent);
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    zoom: unset;
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -moz-box-flex: 2;
    -ms-flex-positive: 2;
    -webkit-box-shadow: 0 0 0 .0625rem var(--accent);
    -moz-box-shadow: 0 0 0 .0625rem var(--accent);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    flex-grow: 2;
    margin: 0;
    box-shadow: 0 0 0 .0625rem var(--accent);
    border-color: rgba(0, 0, 0, 0);
    background-color: #f4f4f4;
    padding: 0;
    max-width: 100%
}
 
.yui-navset-bottom .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset .yui-nav li a {
    zoom: unset;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: bottom;
    width: 100%
}
 
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    -o-text-overflow: ellipsis;
    padding: .35em .75em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
 
.yui-navset .yui-nav li em {
    border: unset !important
}
 
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -moz-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    margin: 0;
    background-color: var(--accent);
    padding: 0
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
    border: rgba(0, 0, 0, 0)
}
 
.yui-navset .yui-nav .selected a {
    background-image: none;
    width: 100%;
    color: #fcfcfc !important;
}
 
.yui-navset .yui-nav .selected a:active,
.yui-navset .yui-nav .selected a:focus {
    background-color: var(--accent);
    color: white;
}
 
.yui-navset .yui-nav .selected a:hover {
    cursor: default
}
 
.yui-navset .yui-content {
    background-color: transparent;
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    border-color: #aaa
}
 
.yui-navset-left .yui-content {
    border-left-color: #f4f4f4;
}
 
.firsthidetabview .yui-nav > li:nth-child(1).selected {
    display: none;
}
 
.firsthidetabview .yui-nav > li:nth-child(1) {
    width: 100%;
}
 
.yui-navset .yui-nav li a em, .yui-navset-top .yui-nav li a em,
.yui-navset-bottom .yui-nav li a em {
    display: block;
    min-width: 5em;
}
 
/* ギャラリー部分の幅調整 */
#jquery-lightbox {
    max-width: 90%;
    width: 90%;
    margin-left: calc((100vw - 90%)/2);
    background: #fff;
}
 
#lightbox-container-image-data-box {
    width: 90% !important;
}
#lightbox-container-image {
    width: 90%;
    height: 100%;
    margin: auto;
}
 
#lightbox-container-image-box {
    display: contents !important;
}
 
#lightbox-nav {
    height: calc(100% - 1.4em*2);
}
 
#lightbox-nav-btnNext {
    height: 100% !important;
}
/* 順位表 */
.place-23 {
    display: flex;
    align-items: center;
    justify-content: space-around;
}