@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ファウスト聖堂専用 - 黒金ダークテーマ (2025年最新・読みやすさ重視) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');

/* 全体背景・文字 */
body, .l-body, .entry-content {
    background: #000000 !important;
    color: #e8dcc2 !important; /* 象牙色 - 長時間読書に最適 */
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    line-height: 2.1;
    letter-spacing: 0.15em;
}

/* タイトル - 金のゴシック風 */
.entry-title, h1, h2, h3 {
    color: #d4af37 !important;
    font-family: 'Cinzel Decorative', serif;
    text-shadow: 0 0 10px #d4af37;
    text-align: center;
}

/* 目次 - 金ライン */
.swl-toc, .wp-block-table-of-contents {
    border-left: 4px solid #d4af37;
    background: rgba(212, 175, 55, 0.05);
    color: #e8dcc2;
}

/* 次へボタン - 血のグラデーション */
.next-page-btn, .wp-block-button__link {
    background: linear-gradient(45deg, #8B0000, #FF0000) !important;
    color: #fff !important;
    box-shadow: 0 0 20px #8B0000;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    transition: all 0.3s ease;
}

.next-page-btn:hover {
    box-shadow: 0 0 30px #FF0000;
    transform: scale(1.05);
}

/* 縦書きモード (切り替えボタンでON/OFF) */
.vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1.8;
}

/* 切り替えボタン (右上固定) */
.read-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid #d4af37;
    color: #d4af37;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
}

.read-mode-toggle:hover {
    background: rgba(212, 175, 55, 0.3);
}

/* 隠し演出 - 読了時メッセージ */
.read-complete-message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #d4af37;
    padding: 20px;
    border: 2px solid #d4af37;
    display: none;
    z-index: 9998;
}

/* シリーズ一覧 - 石碑風 */
.series-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.series-item {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #d4af37;
    padding: 20px;
    text-align: center;
    transition: all 0.3s;
}

.series-item:hover {
    box-shadow: 0 0 20px #d4af37;
    transform: translateY(-5px);
}

.series-locked {
    border: 1px solid #8B0000;
    color: #8B0000;
}

/* トップページ - 金の瞳背景 */
.hero-bg {
    background: url('data:image/svg+xml;base64,...') center/cover; /* 後で金瞳画像URLに置き換え */
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-title {
    font-size: 3em;
    color: #d4af37;
    text-shadow: 0 0 20px #d4af37;
}

/* 縦書き（これだけで途切れゼロ） */
body.vertical .entry-content,
body.vertical .wp-block-post-content{
    writing-mode:vertical-rl!important;
    text-orientation:upright!important;
    height:auto!important;
    min-height:100vh!important;
    padding:80px 40px!important;
    overflow:visible!important;
    line-height:2.4!important;
    font-size:18px!important;

}

#content{
display: inline-block;
}
/* シリーズ一覧レイアウト崩れ修正 (縦書き対応) */
.l-sidebar, .l-contents, .l-container {
    overflow: visible !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.categories-list, .widget_categories ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 20px 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.categories-list li, .widget_categories ul li {
    width: 100% !important;
    margin: 10px !important;
    padding: 0 !important;
    text-align: left !important;
}



@media(max-width:768px){
    body.vertical .entry-content{padding:60px 25px!important;font-size:17px!important}
}