@charset "UTF-8";

/* ============================================================
   1. 基本リセット & 共通クラス
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: #222;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
    background: #333;
    font-size: 16px;
    line-height: 1.8;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* 見出しの初期化（ブラウザのデフォルトを打ち消す） */
h1, h2, h3, h4, h5 {
    font-size: 100%;
    font-weight: bold;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

.sh { display: none !important; }
.c { text-align: center !important; }
.mb15 { margin-bottom: 15px !important; }

/* ============================================================
   2. 全体構造 (1200px幅)
   ============================================================ */
#wrap {
    margin: 30px auto;
    max-width: 1200px; 
    width: 95%;
    background: #fff;
    padding: 20px;
    border: 5px solid #000;
    box-shadow: 0 0 25px rgba(0,0,0,0.4);
}

#content {
    display: flex;
    flex-direction: row-reverse;
    gap: 40px; 
    padding: 30px 0;
}

/* ============================================================
   3. ヘッダー & ナビゲーション
   ============================================================ */
#header {
    height: 210px;
    background: #554d42 url(../image/header7.jpg) no-repeat center;
    background-size: cover;
    display: flex;
    align-items: flex-start;
    padding: 20px;
}

#header p a {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    font-size: 40px;
    font-weight: bold;
    text-decoration: none;
}

#menu {
    background: #000;
    margin-top: 10px;
}

#menu ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
}

#menu ul li a {
    display: block;
    padding: 10px 15px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

#menu ul li a:hover { background: #444; }

/* ============================================================
   4. メインコンテンツ (.right) 見出し階層デザイン
   ============================================================ */
.right { flex: 1; min-width: 0; }

/* H1: ページ大見出し */
.right h1.mb15.c {
    display: block !important;
    font-size: 2.2rem !important;
    color: #1a1a1a !important;
    padding: 20px 0 15px 0 !important;
    border-bottom: 3px double #d1e3f8 !important; /* 二重線 */
    margin-bottom: 35px !important;
    text-align: center !important;
}

/* H2: 章見出し (背景色+左線) */
.right h2 {
    display: block !important;
    font-size: 1.4rem !important;
    padding: 12px 15px !important;
    margin: 40px 0 20px 0 !important;
    background: #eef2f7 !important;
    border-left: 8px solid #1a1a1a !important;
    color: #1a1a1a !important;
}

/* H3: 節見出し (下線+アクセント) */
.right h3 {
    display: block !important;
    font-size: 1.25rem !important;
    margin: 35px 0 15px 0 !important;
    padding: 8px 0 8px 15px !important;
    border-bottom: 2px solid #d1e3f8 !important;
    position: relative;
    color: #111 !important;
}
.right h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 40px;
    height: 3px;
    background: #4a6fa5;
}

/* H4: 項見出し (青い細い左線) */
.right h4 {
    display: block !important;
    font-size: 1.15rem !important;
    margin: 30px 0 15px 0 !important;
    padding: 5px 0 5px 15px !important;
    border-left: 5px solid #4a6fa5 !important;
    color: #333 !important;
}

/* H5: 小見出し (赤い四角マーカー) */
.right h5 {
    display: flex !important;
    align-items: center !important;
    font-size: 1.05rem !important;
    margin: 25px 0 10px 0 !important;
    color: #444 !important;
}
.right h5::before {
    content: "■";
    color: #d9534f;
    margin-right: 10px;
    font-size: 0.8rem;
}

/* --- 7. 既存クラス（指示に基づき名称維持・中身改善） --- */

/* アクセスカウンターエリア：上下にゆとりを持たせる */
.counter-area {
    margin: 40px 0 20px 0;
    padding: 10px;
    border-top: 1px dashed #ccc; /* 控えめな区切り線 */
}

/* SNSシェアボタンエリア：メインコンテンツ下部の調整 */
#sns-share {
    margin-top: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* サイドバーのSNSフォローボタン */
.sns-follow {
    margin-bottom: 25px;
    padding: 10px;
    text-align: center;
    background: #f0f0f0;
    border-radius: 5px;
}


/* セクションごとの間隔調整 */
.intro-section, .new-novels, .recent-posts {
    margin-bottom: 40px; /* 各セクションの区切りを明確に */
}

/* リストのスタイルを整える（新着記事など） */
.recent-posts ul {
    list-style: none;
    padding-left: 0;
}

.recent-posts ul li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.recent-posts ul li a {
    color: #305C91;
    text-decoration: none;
    font-weight: 500;
}

.recent-posts ul li a:hover {
    text-decoration: underline;
}

/* ============================================================
   5. サイドバー (.left) デザイン
   ============================================================ */
.left { width: 240px; flex-shrink: 0; }

.left h2 {
    display: block !important;
    font-size: 1.1rem !important;
    color: #222 !important;
    border-bottom: 2px solid #222 !important;
    margin-bottom: 15px !important;
    padding-bottom: 5px !important;
}

.left h3 {
    display: block !important;
    font-size: 0.95rem !important;
    padding: 7px 12px !important;
    margin: 20px 0 10px 0 !important;
    background: #f0f7ff !important;
    border: 1px solid #d1e3f8 !important;
    border-left: 6px solid #d9534f !important;
    color: #111 !important;
    border-radius: 0 4px 4px 0 !important;
}

.left ul { list-style: none !important; padding: 0 0 10px 5px !important; }
.left ul li { margin-bottom: 3px !important; position: relative; padding-left: 15px; font-size: 0.9rem; }
.left ul li::before { content: "・"; position: absolute; left: 0; color: #4a6fa5; font-weight: bold; }
.left ul li a { color: #305C91; text-decoration: none; font-weight: 600; }
.left ul li a:hover { color: #d9534f; text-decoration: underline; }

/* ============================================================
   6. 共通パーツ & フッター (復元版)
   ============================================================ */
.blueline { background: linear-gradient(transparent 60%, rgba(158, 196, 221, 0.5) 0%); font-weight: bold; }
.youtube { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 15px 0; }
.youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* フッター：劣化を修正し、高機能レイアウトを復元 */
#footers {
    margin-top: 50px;
    background: #2c2c2c;
    color: #ddd;
    padding: 40px 20px 20px 20px;
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.footer-info { flex: 1; min-width: 280px; }
.footer-info h4 { color: #fff; margin-bottom: 15px; font-size: 1.2rem; }
.footer-info p { font-size: 0.9rem; line-height: 1.6; }

.footer-nav { display: flex; gap: 30px; }
.nav-group h5 { color: #fff; border-bottom: 1px solid #555; padding-bottom: 5px; margin-bottom: 10px; font-size: 1rem; }
.nav-group ul { list-style: none; }
.nav-group ul li a { color: #aaa; text-decoration: none; font-size: 0.85rem; transition: 0.2s; }
.nav-group ul li a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #444;
    text-align: center;
    font-size: 0.8rem;
}
.footer-bottom a { color: #888; text-decoration: none; }

/* ============================================================
   7. レスポンシブ (Mobile)
   ============================================================ */
@media screen and (max-width: 768px) {
    #content { flex-direction: column; }
    .left { width: 100%; order: 2; }
    .right { order: 1; }
    #header { height: 150px; }
    #header p a { font-size: 24px; }
    .footer-container { flex-direction: column; }
    .footer-nav { justify-content: space-between; }
    .right h1.mb15.c { font-size: 1.8rem !important; }
}