.novel_content {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }
.post-form .post-btn {
    margin-left: 32px;
}
.post-form .post-body-input {
    margin-left: 32px;
}
.thread-create-form .thread-body-input {
    width: 420px;
    max-width: 90%;
}
.thread-create-form .thread-title-input {
    width: 410px;
    max-width: 90%;
}
h1, h2, h3, h4, h5, h6 {margin-top: 0;}

.login{
    background-color: rgb(255, 0, 0);
    text-align: center;
    color: #000000;
}

/* admin_login画面の中央寄せ専用（PC用） */
body.login #wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.login #main {
    float: none !important;
    margin: 0 auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login h1{
    padding: 30px;
    text-align: center;
    color:#000!important;
    background-color: rgb(255,0,0)!important;
    border-bottom: none!important;
    font-size: 32px!important;
}

/* =============================
   共通・リセット・基本要素
   ============================= */
body {
    margin: 0;
    padding: 0;
    background-color: #000; 
    color: #FFEEFF;
    /* 全体フォント：読みやすいゴシック体を優先 */
    font-family: "メイリオ", "ヒラギノ角ゴ Pro", Meiryo, sans-serif;
    /* 目次ジャンプ時に中央付近に来るよう調整 */
    scroll-padding-top: 40vh;
}
a { color: #4acdc0;}
a:visited {color: var(--accent-color);}
a:hover {
    color: #20B2AA;
    font-weight: bold;
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {margin-top: 0;}
p {
    margin-top: 10px;
    margin-left: 5px;
    line-height: 1.6;
}
img {vertical-align: bottom;}

/* =============================
   レイアウト・主要構造
   ============================= */
#main h1 {
    background-color: #ff5aff;
    padding: 25px 25px 25px 20px;
    font-size: 26px;
    border-bottom: solid 3px #ff5aff;
    color: #FFEEFF;
}
#main h2 {
    font-size: 22px;
    border: 2px solid var(--main-color) !important;
    padding: 11px 22px;
    border-radius: 5px;
    margin-bottom: 1em;
    display: block;
    text-align: left;
}

/* =============================
   フォーム・ボタン・入力系
   ============================= */
.post-form .post-btn {
    margin-left: 32px;
}
.post-form .post-body-input {
    margin-left: 32px;
}
.thread-create-form .thread-body-input {
    width: 420px;
    max-width: 90%;
}
.thread-create-form .thread-title-input {
    width: 410px;
    max-width: 90%;
}
/* 新規スレッド作成欄のテキストボックス・テキストエリア・ボタンに左余白 */
.thread-create-form .thread-title-input,
.thread-create-form .thread-body-input,
.thread-create-form .thread-create-btn {
    margin-left: 32px;
}
#entry .form-row .form-input-wrap select#gender,
#entry .form-row .form-input-wrap select#thought {
    width: 400px;
    max-width: 100%;
}
#entry .form-row .form-input-wrap input#email, 
#entry .form-row .form-input-wrap input#artist {
    width: 400px;
    max-width: 100%;
}
#entry #submit_button_cover {
    margin-left: 20px;
}
#entry .form-row .form-input-wrap {
    margin-left: 20px;
}
#entry .form-row label {
    /* ...既存のスタイル... */
    margin: 20px;
    font-weight: bold;
}
#entry {
    border:#fff7f0;
}
/* @charset "utf-8";  ← ファイル先頭以外での@charsetは削除 */
/* 一般的なフォントの大きさは16px */

/* 一番上のスペースがいらないからどうにかして消したい */

/* =============================
   リスト・パンくずリスト・画像・アニメーション・details
   ============================= */
#breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
#breadcrumb ol li {
    display: inline;
}
#breadcrumb ol li::after {
    content: ">";
    padding-left: 7px;
}
#breadcrumb ol li:last-child::after {content: none;}
a img {
    transition: opacity 0.4s linear;
}
a:hover img {
    opacity: 0.8;
}
.details_close_btn {
    text-align: center;      /* 真ん中に配置 */
    cursor: pointer;         /* カーソルを指にする */
    padding: 5px 0;         /* 上下に余白を持たせて押しやすく */
    color: #ffffff;          /* テーマカラーの紫 */
    font-weight: bold;       /* 文字を太く */
    font-size: 0.9rem;       /* 少しだけ小さめに */
    transition: color 0.3s;  /* 色の変化を滑らかに */
    border-top: 1px dashed #ddd; /* 上に区切り線を入れる */
    margin-top: 10px;        /* 本文との隙間 */
}


/* =============================
   ページごとのテーマカラー
   ============================= */
body.index   { 
    --main-color: #ff5aff;
    --sub-color:#ffeeff;
    --accent-color:#00f2ff;
 } 
body.diary   { 
    --main-color: #00dd00;
    --sub-color: #f3fff3;
    --accent-color: #FF1493;
 } 
body.hobby, body.book, body.music, body.vinyl {
    --main-color:#9d62e5;
    --sub-color:#f9f0ff;
    --accent-color:#c0f564;
}
body.memory   { 
    --main-color:#2525ff;
    --sub-color:#f0f1ff;
    --accent-color:#e8a0ff;
 } 
body.game   { 
    --main-color:#ffd60a ;
    --sub-color:#fefff0;
    --accent-color:#2f80e4;
 } 
body.contact   { 
    --main-color:#ff4632 ;
    --sub-color:#fff7f0;
    --accent-color:#dbff08;
 } 


/* =============================
   レスポンシブ対応（@media）
   ============================= */
@media (max-width: 730px) {
    html, body {
        /* スマホ時も中央付近に来るよう調整 */
        scroll-padding-top: 40vh;
    }
    /* ...既存のスマホ用スタイル... */
    body, header, #wrapper, #global_navi {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #header_photo, #header_img {
        width: 100%;
        max-width: 100%;
        display: block;
        margin: 0;
    }
    #global_navi {
        margin: 5px 0;
    }
    #global_navi ul li {
        width: auto;
        float: none;
        display: inline-block;
        vertical-align: top;
    }
    #main, #sidebar {
        width: 100%;
        float: none;
    }
    #sidebar {
        margin: 0.8em 0;
    }
    #side_banner img {
        width: 13%;     
        max-width: 80px; /* 必要なら最大幅をピクセルで制限 */
        height: auto;
        display: block;
        margin: 0 auto;
    }
    .m_recommend_l, .m_recommend_r {
        float: none;
        width: 100%;
        margin: 0.6em 0;
    }
    details, details[open] {
        padding: 0.5em;
    }
    #entry dl dt, #entry dl dd {
        display: block;
        width: 100%;
        float: none;
    }
    #gender_label {
        width: 100%;
    }
    textarea {
        max-width: 80%;
        box-sizing: border-box;
    }
    footer { width: 100%; }
    .bookphoto {
        float: left;         
        width: 40%;         
        height: auto;
        margin: 0 1em 1em 0;   
        display: block;        
    }
    .vinylphoto{         
        width: 80%;         
    }
    .vinyl .vinylphoto {
        width: 60%;
    }
    .synopsis {
        font-size: 0.85em;
        line-height: 1.5em;
        overflow: hidden;
        margin: 0;
        padding: 0.8em;
    }
    .impressions{
        margin: 1.2em;
        line-height: 1.8em;
        word-break: break-word;
    }    
    .mmrdetails > p {
        margin-bottom: 1.5em;
        padding-bottom: 1em;
    }
    .book_grid {
        margin-top: 1em;
        margin-bottom: 1em;
    }
    .book_l span,
    .book_r span,
    .book_l_2 span,
    .book_r_2 span {
        position: static;  
        display: block;    
        background-color: #ff5aff;
        color: #ffeeff;
        padding: 0.5em;
        margin-bottom: 0.5em;
        border-radius: 3px;
    }
    .book_l_2 span,
    .book_r_2 span {
        width: 100%;         
        box-sizing: border-box; 
        position: static;    
        display: block;      
        margin-bottom: 0.5em;
        top: auto;           
    }
    .book_l, .book_r, .book_l_2, .book_r_2 {
        width: 100%;         
        margin: 0;
        float: none; 
        border-top: 3px solid #ff5aff; 
    }
    .vinyl .book_l,.book_l_2.book_r.book_r_2{
        border-top:none;
    }
    .book_grid { gap: 10px; }
}
@media (max-width: 730px) {
    #entry .form-row .form-input-wrap input#email {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #entry .form-row .form-input-wrap select,
        #entry .form-row .form-input-wrap select {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        #entry .form-row .form-input-wrap select option {
            white-space: nowrap;
        }
}
@media (max-width: 768px) {
    body.novel {
        writing-mode: horizontal-tb; /* 横書きに戻す */
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
    }
    .novel_nav {
        position: static; /* 固定解除 */
        margin-bottom: 20px;
        display: block;
        padding-top:20px;
        padding-left:20px;
    }
    .novel_container {
        padding: 20px 10px;
        height: auto;
    }
    .novel_intro {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-bottom: 40px;
        border-bottom: 1px solid #ddd;
    }
    .novel_item {
        margin-left: 0;
        margin-bottom: 30px; /* スマホでは縦に積む */
    }
    .novel_content .details_close_btn {
        margin-top: 30px;
    }
    .novel_date {
        text-align: right;
        margin-right: 0;
        margin-top: 3em; 
    }
    .novel_afterword {
        margin-right: 0;
        margin-top: 4em; /* 本文との距離 */
    }
    .afterword_body {
        margin-top: 15px;
        padding: 15px;
    }
}


/* =============================
   小説ページ・特殊ページ・keyframes
   ============================= */
body.novel {
    /* 色の定義（ここだけで完結するように再定義） */
    --main-color: #2b2b2b;   /* 墨色 */
    --sub-color: #fcfaf2;    /* 生成り色 */
    --accent-color: #a84646; /* 朱色 */
    background-color: var(--sub-color);
    color: var(--main-color);
    font-family: "Noto Serif JP", serif;
    margin: 0;
    writing-mode: vertical-rl; /* 右から左へ書く */
    overflow-x: auto;          /* 横にスクロールする */
    overflow-y: hidden;        /* 縦スクロールは禁止 */
    height: 100vh;             /* 画面の高さいっぱいに使う */
}
.novel_nav {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    writing-mode: horizontal-tb; /* ボタンは横書き */
}
.novel_nav a {
    text-decoration: none;
    color: var(--accent-color);
    font-weight: bold;
    border-bottom: 1px solid var(--accent-color);
    font-size: 0.9rem;
    padding-bottom: 2px;
}
.novel_container {
    padding: 60px 80px; /* 上下の余白、左右の開始位置調整 */
    height: 85vh;       /* 画面高さの85%を使って文字を流す */
}
.novel_intro {
    margin-left: 60px; /* 左隣（次の要素）との間隔 */
    padding-left: 20px;
    border-left: 1px solid #ddd; /* 緩い区切り線 */
    max-height: 100%;
}
.novel_intro h1 {
    font-size: 2.2rem;
    margin-left: 30px; /* タイトル上の余白 */
    color: var(--main-color);
}
.novel_list {
    margin-right: 40px; 
}
.novel_item {
    border: 1px solid var(--accent-color); /* 朱色の枠線 */
    border-radius: 4px;       /* 角を少し丸く */
    padding: 20px;            /* 内側の余白をたっぷりとる */
    margin-left: 50px;        /* 次の作品との間隔（縦書きなので横方向） */
    background-color: #fcfaf2;   /* 枠内だけ少し明るくして際立たせる */
    max-height: 100%;         /* 親要素からはみ出さない */
}
.novel_item summary {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--accent-color); /* 文字も朱色に */
    cursor: pointer;
    list-style: none; /* デフォルトの三角を消す */
    outline: none;
}
.novel_content {
    margin-top: 20px;       /* タイトルとの間隔（縦書きでは右方向） */
    margin-block-start: 20px; /* より正確な指定 */
    line-height: 2.0;       /* 読みやすい行間 */
}
.novel_content p {
    margin-left: 1em;       /* 段落ごとの空き */
}
.novel_date {
    text-align: right; 
    margin-right: 4em; 
    font-size: 0.9rem;
    opacity: 0.8;
}
.novel_afterword {
    margin-right: 6em; 
    font-size: 0.9rem;
    color: var(--main-color);
    border:none;
}
.novel_afterword summary {
    cursor: pointer;
    list-style: none; /* 三角を消す */
    opacity: 0.7;     /* 少し薄くして控えめに */
    transition: opacity 0.3s;
    text-decoration: underline; /* 下線（縦書きだと右線）を引く */
    text-underline-offset: 4px;
}
.novel_afterword summary:hover {
    opacity: 1; /* ホバーではっきり見えるように */
    color: var(--accent-color); /* 朱色に */
}
.afterword_body {
    margin-top: 20px;       /* ボタンとの間隔（縦書きでは右） */
    padding: 20px;
    background-color: rgba(0,0,0,0.02); /* 極めて薄いグレーの背景 */
    border-radius: 8px;
    line-height: 1.8;
    font-size: 0.85rem;
}

/* ...existing code... */

/* =============================
   見出し・主要装飾
   ============================= */
#thread-main-comment {
    background: none;
    border: 2px solid #ff4632;
    border-radius: 10px;
    margin: 32px 0 32px 0;
    padding: 32px 24px 24px 24px;
}
/* h3に装飾が何故かかからない */
#main h3 {
    margin-left: 5px;
    font-size: 18px;
    border-left: 8px solid #ff5aff;
    padding: 4px 9px 4px 14px;
}

#main h4{
    margin-left: 5px;
    font-size: 15px;
    border-bottom: 2px solid #ff5aff;
    padding: 3px 8px 0px 13px;
}

/* ヘッダーの連絡先のボタンのデザイン */
#header_contact a.btn_010 {
	display: inline-block;
    background: #00f2ff;
    color: #000;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    animation: jump 0.8s ease-in-out infinite;
}
#header_contact a.btn_010:hover {color: #000;}
.btn_010.poyopoyo{
    animation: poyopoyo 2s ease-out infinite;
    opacity: 1;
}
@keyframes jump {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
}

@keyframes slideRight {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
}

@keyframes poyopoyo {
    0%, 40%, 60%, 80% {
      transform: scale(1.0);
    }
    50%, 70% {
      transform: scale(0.95);
    }
}

/* ヘッダーのデザイン */
header {
    width: 980px;
    margin: 0 auto;
}
header h1 {
    float: center;
    margin: 0 0 10px;
}
header #header_contact {
    float: right;
    margin: 10px;
}
#header_photo{
    margin: 0 auto;
    width: 980px;    /* headerと同じ固定幅 */
    max-width: 100%; /* 小さい画面ではコンテナ幅に合わせる */
    display: block;  /* インライン画像の余白をなくす */
}

/* globalnaviの装飾 */
#global_navi {
    width: 980px;
    clear: both;
    overflow: hidden;
    margin: 16px auto;
}
/* 丸を消す */
#global_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* それぞれの要素をきれいに並べる */
#global_navi ul li {
    width: 162px;
    float: left;
    margin-right: 1px;
    text-align: center;
}
/* 装飾を施す */
#global_navi ul li a {
    display: block;
    padding: 16px;
    background-color: #ff5aff;
    color: #FFEEFF;
    text-decoration: double;
    transition: background-color 0.4s linear;
    font-size: 18px;
    font-weight: bold; /* ナビ用に太字にして視認性を向上 */
}
#global_navi ul li a:hover {
    background-color: #00f2ff;
    color: #000;
}
/* カーソルを載せた時やらの装飾 */
#global_navi ul li.current a {
    background-color: #00f2FF;
    color: #000;
}

/* sidebar */
#wrapper {
    width: 980px;
    margin: 0 auto;
    overflow: hidden;
}
/* 全体で幅を980に調節し、メインを左に寄せ、右にサイドバーを設置する */
#main {
    width: 730px;
    float: left;
}
#sidebar {
    width: 220px;
    float: right;
}
#side_banner {margin-bottom: 20px;}
#side_banner h2 {
    background-color: #ff5aff;
    color: #FFEEFF;
    padding: 7px;
    font-size: 14px;
    text-align: center;
}
#side_banner ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#side_banner ul li {margin-bottom: 10px;}
#side_banner img {
    margin: auto;
    display: block;
    width: 40%;
    border-radius: 10px;
}
#side_contact {
    margin-bottom: 20px;
    border: 2px solid #ff5aff;
    color: #FFEEFF;
    text-align: center;
}
#side_contact h2 {
    background-color: #ff5aff;
    color: #FFEEFF;
    padding: 7px;
    font-size: 14px;
}
#side_contact address {
    font-weight: bold;
    font-size: 20px;
    font-style: normal;
}
#side_contact address img {
    vertical-align: middle;
    margin-right: 5px;
}
/* side連絡先ボタンの装飾 */
#side_contact .contact_button {
    display: inline-block;
    background: #00f2ff;
    color: #000;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
}

/* footer */
footer {
    background-color: #ff5aff;
    text-align: center;
}

footer #footer_nav {
    background-color: #ff5aff;
    padding: 10px 0;
}

footer #footer_nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* footer内のリンク色を統一 */
footer #footer_nav li a {
    color: #000;
    text-decoration: underline;
}
footer #footer_nav li a:visited {
    color: #000;
}
footer #footer_nav li a:hover {
    color: #20B2AA;
    font-weight: bold;
}

footer #footer_nav li {
    display: inline;
    border-left: solid 1px #ff5aff;
    margin-left: 8px;
    padding-left: 8px;
    font-size: smaller;
}

footer #footer_nav li:last-child {
    border-right: solid 1px #ff5aff;
    padding: 0 8px;
}

footer small {
    display: block;
    padding: 8px 0;
    color: #000;
}

/* パンくずリストを整える */

#breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

#breadcrumb ol li {
    display: inline;
}

#breadcrumb ol li::after {
    content: ">";
    padding-left: 7px;
}

#breadcrumb ol li:last-child::after {content: none;}

/* imgのアニメーション */
a img {
    transition: opacity 0.4s linear;
}

a:hover img {
    opacity: 0.8;
}

/* detailsを閉じるボタンのデザイン */
.details_close_btn {
    text-align: center;      /* 真ん中に配置 */
    cursor: pointer;         /* カーソルを指にする */
    padding: 5px 0;         /* 上下に余白を持たせて押しやすく */
    color: #ffffff;          /* テーマカラーの紫 */
    font-weight: bold;       /* 文字を太く */
    font-size: 0.9rem;       /* 少しだけ小さめに */
    transition: color 0.3s;  /* 色の変化を滑らかに */
    border-top: 1px dashed #ddd; /* 上に区切り線を入れる */
    margin-top: 10px;        /* 本文との隙間 */
}



/* 個別のページのテーマカラー */

/* 1. ページごとのテーマカラーを「変数」として登録 */
body.index   { 
    --main-color: #ff5aff;
    --sub-color:#ffeeff;
    --accent-color:#00f2ff;
 } 
body.diary   { 
    --main-color: #00dd00;
    --sub-color: #f3fff3;
    --accent-color: #FF1493;
 } 
/* 紫テーマ（hobby / book / music / vinyl）: カスタムプロパティを各 body に設定 */
body.hobby, body.book, body.music, body.vinyl {
    --main-color:#9d62e5;
    --sub-color:#f9f0ff;
    --accent-color:#c0f564;
}
body.memory   { 
    --main-color:#2525ff;
    --sub-color:#f0f1ff;
    --accent-color:#e8a0ff;
 } 
body.game   { 
    --main-color:#ffd60a ;
    --sub-color:#fefff0;
    --accent-color:#2f80e4;
 } 
body.contact   { 
    --main-color:#ff4632 ;
    --sub-color:#fff7f0;
    --accent-color:#dbff08;
 } 

/* 2. ボタンの色指定を「変数を使ってね」と書き換える */
/* ===============================================
   一括管理された装飾（ページごとに勝手に色が変わります）
   =============================================== */

/* 1. 枠線や見出しの色を --main-color に統一 */
.mmrdetails,
.book_l, .book_r,
.book_l_2, .book_r_2,
h2 {
    border-color: var(--main-color) !important;
    color: var(--sub-color); /* 必要に応じて文字色も */
}

/* 2. 背景色を --main-color にする箇所 */
.book_l span,
.book_r span,
.book_l_2 span,
.book_r_2 span {
    background-color: var(--main-color) !important;
    color: #fff !important; /* 背景が濃い色なので文字は白 */
}

/* 3. details閉じるボタン（昨日作ったやつ） */
.details_close_btn {
    color: var(--main-color);
}
.details_close_btn:hover {
    color: var(--accent-color); /* ホバー時はアクセントカラーに */
}

/* 4. リンクのホバー色 */
a:hover {
    color: var(--accent-color) !important;
}
/* ナビゲーションメニュー（拠点など）はホバーしても文字色を変えない */
#global_navi li a:hover,
.btn_010:hover,
.contact_button:hover {
    color: #000 !important; /* 元の文字色（黒）を指定 */
}


/* ここから個別のページの装飾 */

/* index(home) */
#header_img {
    margin: 0;
    width: 900px;
}

/* index ページ固有：h2 の枠線色を main-color（ピンク）に */
body.index #main h2 {
    border-color: var(--main-color) !important;
}

/* diary */

#diary dl dt{
    padding: 10px;
    border: 2px solid #00DD00;
    font-weight: bold;
}
#diary dl dd{
    padding: 5px;
    border-left: 5px solid #ff5aff;
}


/* contactのページの装飾 */
#entry dl {
    background: #000;
    border: 1px solid #FFEEFF;
    border-top: 0;
}
#entry dl dt,
#entry dl dd {
    padding: 10px;
    border-top: 1px solid #FFEEFF;
}

#entry dl dd {
    overflow-x: auto;
}

#entry dl dt{ 
    width: 15em;
    float: left;
    clear: both;
    font-weight: bold;
}

#gender_label {
    width: 15em;
}

select {
    width: 80%;
    max-width: 100%;
    box-sizing: border-box;
}

textarea {
    width: 80%;
    max-width: 100%;
    box-sizing: border-box;
}

/* bookのボタン */
/* 左側題名一行のやつ */

.book_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* カード間の余白 */
    justify-content: center; /* 中央揃え（必要なら） */
}

/* book_grid 内の summary の上下余白を揃える（左右幅は既存のパディングに合わせ調整） */
.book_grid details > summary,
.book_grid summary {
    margin: 0 !important;
    padding:  3px 4px !important;
    display: block;
}
.book_grid details[open] > summary {
    margin-bottom: 0.6em !important;
}

.book_l, .book_r, .book_l_2, .book_r_2 {
    position: relative;
    width: 330px; /* 必要に応じて調整 */
    margin: 0;    /* 余白はgapで管理 */
    box-sizing: border-box;
    padding: 0.6em 0.8em; /* 内側の余白を縮小 */
    border: 2px solid #ff5aff;
    border-radius: 3px;
}

.book_l {
    position: relative;
    margin: 1.2em 5px 1.2em 7px;
    padding: 0.6em 0.8em; /* 内側の余白を縮小 */
    border: 2px solid #ff5aff;
    border-radius: 3px;
    display: block;
    box-sizing: border-box;
}

.book_l p {
    margin: 0;
    color: #FFEEFF;
    line-height: 1.8em;
    text-decoration: underline color(#ff5aff);
}

/* 中身の装飾 */
.bookphoto {
    width: 120px;
    height: auto;
    float: left;
    margin: 0px 0.8em 0.3em 0; /* 少し余白を縮小 */
}

.synopsis {
    font-size: 0.9em; 
    line-height: 1.8em; 
    color: #ffeeff;
}

.impressions{
    margin-top: 1.5em;
    line-height: 1.8em;
}

.mmrdetails[open] summary{
    border-bottom: none !important;
}
.mmrdetails summary {
    outline: none;
    box-shadow: none;
}
.mmrdetails summary::-webkit-details-marker {
    display: none;
}

/* 左側題名二行のやつ */
.book_l_2 {
    position: relative;
    margin: 1.2em 5px 1.2em 7px;
    padding: 0.6em 0.8em; /* 内側の余白を縮小 */
    border: 2px solid #ff5aff;
    border-radius: 3px;
} 

.book_l_2 span {
    position: absolute;
    top: -2.9em;
    left: -2px;
    padding: .2em .8em;
    border-radius: 5px 5px 0 0;
    background-color: #ff5aff;
    color: #ffeeff;
}

.book_l_2 p {
    margin: 0;
    color: #FFEEFF;
    line-height: 1.8em;
    text-decoration: underline color(#ff5aff);
}

/* 右側題名一行 */
.book_r {
    position: relative;
    float: right;
    margin: 1.2em 5px 1.2em 7px;
    padding: 0.6em 0.8em; /* 内側の余白を縮小 */
    border: 2px solid #ff5aff;
    border-radius: 3px;
}

.book_r p {
    margin: 0;
    color: #FFEEFF;
    line-height: 1.8em;
    text-decoration: underline color(#ff5aff);
}

/* 右側題名二行 */

.book_r_2 {
    position: relative;
    float: right;
    margin: 1.2em 5px 1.2em 7px;
    padding: 0.6em 0.8em; /* 内側の余白を縮小 */
    border: 2px solid #ff5aff;
    border-radius: 3px;
}

.book_l span,
.book_r span,
.book_l_2 span,
.book_r_2 span {
    position: static; /* フロー内に戻す（絶対配置を解除） */
    display: block;    /* 複数行のときは自動で折り返す */
    padding: .2em .6em; /* タイトルのパディングを少し縮小 */
    border-radius: 5px 5px 0 0;
    background-color: #ff5aff;
    color: #ffeeff;
    margin-bottom: 0.4em; /* 下の本文と被らない最小限の余白 */
}

/* vinylの修飾 */

/* vinyl ページ全体の span 背景色をリセット（個別指定可能に） */
.vinyl .book_l span,
.vinyl .book_r span,
.vinyl .book_l_2 span,
.vinyl .book_r_2 span {
    background-color: transparent !important;
}

/* vinylページのみ: 写真をカード中央に配置し、本文は写真の下に来るようにする */
.vinyl .bookphoto {
    float: none;       /* floatを解除 */
    display: block;    /* ブロック要素にして中央寄せ可能に */
    margin: 0 auto 0.6em auto; /* 上:0 / 左右:自動 / 下:余白 */
    width: 140px; /* 必要に応じて調整 */
}

.vinyl .synopsis {
    overflow: visible; /* 浮動解除した画像の下にテキストが来るように */
    color:#ffffff;
}

.vinyl .impressions{
    color:#FFFFFF;
}

/* vinylページの details を開いた時の border-bottom を白にする */
.vinyl article details[open] summary {
    border-bottom-color: #FFFFFF !important;
}

/* vinyl専用の画像設定（カード内で中央配置、テキストは下に回る） */
.vinyl .vinylphoto {
    display: block;
    width: 60%; /* 必要に応じて調整 */
    height: auto;
    float: none;
    margin: 10px auto 0.6em auto; /* 中央寄せ、下に余白 */
    border-radius: 6px; /* 角を少し丸めて影を馴染ませる */
    box-shadow: 0 6px 14px rgba(0,0,0,0.32); /* 軽い影 */
    transition: box-shadow 220ms ease, transform 220ms ease; /* なめらかなホバー */
}


/* vinylページだけに適用 */
/* LIFE */
.vinyl .LIFE {
  background-color: rgb(186, 125, 104); /* ここを置換：RGBAは hex #AABBCC を (170,187,204) にした例 */
  border:none; /* 枠色を画像色に近づける */
  color: #FFFFFF; /* 文字色は必要に応じて変更 */
}

.vinyl .book_grid .LIFE span{
    background-color: #103f9a;
    color: #ffffff;
    border-radius: 3px;
}

/* カネコアヤノ */
.vinyl .kaneko {
  background-color: #474747; /* ここを置換：RGBAは hex #AABBCC を (170,187,204) にした例 */
  border:none; /* 枠色を画像色に近づける */
  color: #ffffff; /* 文字色は必要に応じて変更 */
}

.vinyl .book_grid .kaneko span{
    background-color: #191919;
    color: #ffffff;
    border-radius: 3px;
}

/* エルヴィス */

.vinyl .Elvis{
    background-color: #1d1d1d;
    border:none;
    color: #ffffff;
}

.vinyl .book_grid .Elvis span{
    background-color: #d7589d;
    color:#ffffff;
    border-radius: 3px;
}

/* divide */

.vinyl .Divide{
    background-color: #619cbc;
    border: none;
    color: #ffffff;
}

.vinyl .book_grid .Divide span{
    background-color: #040f13;
    color: #ffffff;
    border-radius: 3px;
}

/* gotothefuture */

.vinyl .gotothefuture{
    background-color: #ffffff;
    border: none;
    color: #000000;
}

.vinyl .book_grid .gotothefuture span{
    background-color: #486128;
    color: #000 !important;
    border-radius: 3px;
}
.vinyl .gotothefuture details{
    border-color: #000000;
}
.vinyl .gotothefuture .impressions{
    color:#000000;
}

.mmrdetails {
    border: none;
    margin: 0;
    overflow: hidden;
}

.mmrdetails summary,
.music summary {
    list-style: none;
}

.mmrd_d summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.m_recommend_l{
    float: left; /* floatを解除 */
    width: 315px; /* 必要に応じて調整 */
    position: relative;
    display: block;
    margin:1em;   
}

.m_recommend_r{
    width: 315px; /* 必要に応じて調整 */
    position: relative;
    display: block;
    margin:1em;
    float:right;
}

.music .mmrdetails details summary{
    border: none !important;
}

/* .mmrdetails内のネストされたdetails（つまり内側のdetails）のborderも削除 */
.music .mmrdetails details {
    border: none !important;
}

/* 自動取得した音楽アーカイブのデザイン */
#auto_music_archive {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

/* 生成されたdetailsタグのスタイル */
/* 生成されたdetailsタグのスタイル（必要ならここに個別のスタイルを追加してください） */

/* 開閉ボタン（年月）のデザイン */
details.fetched_music_item summary {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px 5px;
    border-bottom: 2px solid #9d62e5 ;
    margin-bottom: 15px;
    /* もし個別に色を変えたい場合はここで指定 */
    /* color: #9d62e5; */
}

/* コンテンツ部分のレイアウト */
.music_content_body {
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* iframeのサイズ調整 */
.music_content_body iframe {
    width: 48% !important;
    margin: 0 !important;
}

@media (max-width: 600px) {
    .music_content_body iframe {
        width: 100% !important;
    }
}



/* diaryの装飾 */
/* 変なことになってるけど最終的にはカレンダー風にしたいんだよ。 */
/* 後回し */
details {
    border: 1px solid #FFEEFF;
    border-radius: 4px;
    padding: 5px 5px 0;
    text-decoration: none;    
}

.diary details{
    border-color: #f3f9f1;
}
  
summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
}
  
details[open] {
    padding: 0.5em;
}
  
details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
}  

/* =============================
   gameページ限定 mmrd_d details border-color
   ============================= */
body.game details.mmrd_d,
body.game details.mmrd_d details,
body.game .mmrd_d {
    border-color: var(--sub-color) !important;
}



/* スマホ用の画面 */

@media (max-width: 730px) {
    /* 全体幅を可変にして横スクロールを防ぐ */
    body, header, #wrapper, #global_navi {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* ヘッダーの画像を画面幅いっぱいに */
    #header_photo, #header_img {
        width: 100%;
        max-width: 100%;
        display: block;
        margin: 0;
    }

    /* グローバルナビを折り返し対応に */
    #global_navi {
        margin: 5px 0;
    }
    #global_navi ul li {
        width: auto;
        float: none;
        display: inline-block;
        vertical-align: top;
    }

    /* メインとサイドバーを縦積みに */
    #main, #sidebar {
        width: 100%;
        float: none;
    }
    /* sidebar を main と同じ幅で表示（footerの直前に来るHTML構造ならOK） */
    #sidebar {
        margin: 0.8em 0;
    }

    /* sidebar内の画像をデスクトップの約1/3に縮小 */
    #side_banner img {
        width: 13%;     
        max-width: 80px; /* 必要なら最大幅をピクセルで制限 */
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /* 音楽など左右でfloatしている要素は縦に並べる */
    .m_recommend_l, .m_recommend_r {
        float: none;
        width: 100%;
        margin: 0.6em 0;
    }

    /* details周りのパディング調整 */
    details, details[open] {
        padding: 0.5em;
    }

    /* contactフォームのレイアウト調整 */
    #entry dl dt, #entry dl dd {
        display: block;
        width: 100%;
        float: none;
    }
    #gender_label {
        width: 100%;
    }

    textarea {
        max-width: 80%;
        box-sizing: border-box;
    }

    /* フッターはそのまま下に来る */
    footer { width: 100%; }


    /* book！本紹介！の修正！ */

    /* スマホ画面では bookphoto を左寄せしない */
    .bookphoto {
        float: left;         
        width: 40%;         
        height: auto;
        margin: 0 1em 1em 0;   
        display: block;        
    }
    /* vinylも同様 */
    .vinylphoto{         
        width: 80%;         
    }

    /* vinylページのみ、詳細度を高めて 80% を適用 */
    .vinyl .vinylphoto {
        width: 60%;
    }

    .synopsis {
        font-size: 0.85em;
        line-height: 1.5em;
        overflow: hidden;
        margin: 0;
        padding: 0.8em;
    }
    .impressions{
        margin: 1.2em;
        line-height: 1.8em;
        word-break: break-word;
    }    

    /* .mmrdetails内の段落に下の余白を追加 */
    .mmrdetails > p {
        margin-bottom: 1.5em;
        padding-bottom: 1em;
    }

    /* .book_gridに上の余白も追加 */
    .book_grid {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    /* スマホではspan（本のタイトル）の絶対位置指定を解除 */
    .book_l span,
    .book_r span,
    .book_l_2 span,
    .book_r_2 span {
        position: static;  
        display: block;    
        background-color: #ff5aff;
        color: #ffeeff;
        padding: 0.5em;
        margin-bottom: 0.5em;
        border-radius: 3px;
    }
     /* スマホではspan（本のタイトル）の固定幅を解除 */
    .book_l_2 span,
    .book_r_2 span {
        width: 100%;         
        box-sizing: border-box; 
        position: static;    
        display: block;      
        margin-bottom: 0.5em;
        top: auto;           
    }
    /* 親要素の位置指定も解除（必要に応じて） */
    .book_l, .book_r, .book_l_2, .book_r_2 {
        width: 100%;         
        margin: 0;
        float: none; 
        border-top: 3px solid #ff5aff; 
    }

    .vinyl .book_l,.book_l_2.book_r.book_r_2{
        border-top:none;
    }
    .book_grid { gap: 10px; }

}

/* diary.html用のテーマカラー
00dd00,ff1493,ff69b4,f3fff0 */

body.diary #main h1 {
    background-color: var(--main-color);
    border-bottom: solid 3px var(--main-color);
}

body.diary #main h2 {
    border: 2px solid var(--main-color);
}

body.diary #main h3 {
    border-left: 8px solid var(--main-color);
}

body.diary #main h4 {
    border-bottom: 2px solid var(--main-color);
}

body.diary {
    color: var(--sub-color);
}

body.diary a {
    color: var(--accent-color);
}



body.diary a:hover {
    color: #FF69B4;
}

body.diary #header_contact a.btn_010 {
    background: var(--accent-color);
    color: #000;
}

/* diary固有のnavigation */
body.diary #global_navi ul li a {
    background-color: var(--main-color);
    color: #000;
}

body.diary #global_navi ul li a:hover {
    background-color: var(--accent-color);
    color: #000;
}

body.diary #global_navi ul li.current a {
    background-color: var(--accent-color);
    color: #000;
}

/* diary固有のsidebar */
body.diary #side_banner h2 {
    background-color: var(--main-color);
    color: #000;
}

/* diary固有のdl要素（月などの見出し） */
body.diary #diary h2 {
    border: 2px solid var(--main-color);
}

body.diary #diary dl h2 {
    border: 2px solid var(--main-color);
}

body .diary #diary dt{
    padding: 10px;
    border: 2px solid var(--main-color);
    font-weight: bold;
}
#diary dl dd{
    padding: 5px;
    border-left: 5px solid var(--main-color);
}


/* diary固有のside_contact */
body.diary #side_contact {
    border: 2px solid var(--main-color);
}

body.diary #side_contact h2 {
    background-color: var(--main-color);
    color: #000;
}

/* diary固有のfooter */
body.diary footer {
    background-color: var(--main-color);
}

body.diary footer #footer_nav {
    background-color: var(--main-color);
}

body.diary footer #footer_nav li a {
    color: #000;
}

body.diary footer #footer_nav li a:hover {
    color: var(--accent-color);
}

body.diary footer #footer_nav li {
    border-left: solid 1px var(--main-color);
}

body.diary footer #footer_nav li:last-child {
    border-right: solid 1px var(--main-color);
}

body.diary footer small {
    color: #000;
}

/* diary固有の連絡先ボタン */
body.diary #side_contact .contact_button {
    background: var(--accent-color);
}

/* 今月の音楽の枠線 */
.diary .mmrdetails,
.diary .mmrdetails summary{
    border-color:#f3fff0 !important;
}


/* hobbyのテーマカラー */
/* hobby/book/music/vinyl（紫テーマ）を一括定義して重複を削減 */
body.hobby, body.book, body.music, body.vinyl {
    color: #f9f0ff;
}

body.hobby #main h1,
body.book #main h1,
body.music #main h1,
body.vinyl #main h1 {
    background-color: #9d62e5;
    border-bottom: solid 3px #9d62e5;
}

body.hobby #main h2,
body.book #main h2,
body.music #main h2,
body.vinyl #main h2 {
    border: 2px solid #9d62e5;
}

body.hobby #main h3,
body.book #main h3,
body.music #main h3,
body.vinyl #main h3 {
    border-left: 8px solid #9d62e5;
}

body.hobby #main h4,
body.book #main h4,
body.music #main h4,
body.vinyl #main h4 {
    border-bottom: 2px solid #9d62e5;
}

body.hobby a,
body.book a,
body.music a,
body.vinyl a {
    color: #c0f564;
}

body.hobby a:hover,
body.book a:hover,
body.music a:hover,
body.vinyl a:hover {
    color: #c0f564;
}

body.hobby #header_contact a.btn_010,
body.book #header_contact a.btn_010,
body.music #header_contact a.btn_010,
body.vinyl #header_contact a.btn_010 {
    background: #c0f564;
    color: #000;
}

body.hobby #global_navi ul li a,
body.book #global_navi ul li a,
body.music #global_navi ul li a,
body.vinyl #global_navi ul li a {
    background-color: #9d62e5;
    color: #000;
}

body.hobby #global_navi ul li a:hover,
body.book #global_navi ul li a:hover,
body.music #global_navi ul li a:hover,
body.vinyl #global_navi ul li a:hover {
    background-color: #c0f564;
    color: #000;
}

body.hobby #global_navi ul li.current a,
body.book #global_navi ul li.current a,
body.music #global_navi ul li.current a,
body.vinyl #global_navi ul li.current a {
    background-color: #c0f564;
    color: #000;
}

body.hobby #side_banner h2,
body.book #side_banner h2,
body.music #side_banner h2,
body.vinyl #side_banner h2 {
    background-color: #9d62e5;
    color: #000;
}

body.hobby #side_contact,
body.book #side_contact,
body.music #side_contact,
body.vinyl #side_contact {
    border: 2px solid #9d62e5;
}

body.hobby #side_contact h2,
body.book #side_contact h2,
body.music #side_contact h2,
body.vinyl #side_contact h2 {
    background-color: #9d62e5;
    color: #000;
}

body.hobby footer #footer_nav,
body.book footer #footer_nav,
body.music footer #footer_nav,
body.vinyl footer #footer_nav {
    background-color: #9d62e5;
}

body.hobby footer #footer_nav li a,
body.book footer #footer_nav li a,
body.music footer #footer_nav li a,
body.vinyl footer #footer_nav li a {
    color: #000;
}

body.hobby footer #footer_nav li a:hover,
body.book footer #footer_nav li a:hover,
body.music footer #footer_nav li a:hover,
body.vinyl footer #footer_nav li a:hover {
    color: #c0f564;
}

body.hobby footer #footer_nav li,
body.book footer #footer_nav li,
body.music footer #footer_nav li,
body.vinyl footer #footer_nav li {
    border-left: solid 1px #9d62e5;
}

body.hobby footer #footer_nav li:last-child,
body.book footer #footer_nav li:last-child,
body.music footer #footer_nav li:last-child,
body.vinyl footer #footer_nav li:last-child {
    border-right: solid 1px #9d62e5;
}

body.hobby footer small,
body.book footer small,
body.music footer small,
body.vinyl footer small {
    background-color: #9d62e5;
    color: #000;
}

body.hobby #side_contact .contact_button,
body.book #side_contact .contact_button,
body.music #side_contact .contact_button,
body.vinyl #side_contact .contact_button {
    background: #c0f564;
}

/* memoryのテーマカラー */

body.memory #main h1 {
    background-color: var(--main-color);
    border-bottom: solid 3px var(--main-color);
}

body.memory #main h2 {
    border: 2px solid var(--main-color);
}

body.memory #main h3 {
    border-left: 8px solid var(--main-color);
}

body.memory #main h4 {
    border-bottom: 2px solid var(--main-color);
}

body.memory {
    color: var(--sub-color);
}

body.memory a {
    color: var(--accent-color);
}



body.memory a:hover {
    color: #FF69B4;
}

body.memory #header_contact a.btn_010 {
    background: var(--accent-color);
    color: #000;
}

/* memory固有のnavigation */
body.memory #global_navi ul li a {
    background-color: var(--main-color);
    color: #000;
}

body.memory #global_navi ul li a:hover {
    background-color: var(--accent-color);
    color: #000;
}

body.memory #global_navi ul li.current a {
    background-color: var(--accent-color);
    color: #000;
}

/* memory固有のsidebar */
body.memory #side_banner h2 {
    background-color: var(--main-color);
    color: #000;
}

/* memory固有のdl要素（月などの見出し） */
body.memory #memory h2 {
    border: 2px solid var(--main-color);
}

body.memory #memory dl h2 {
    border: 2px solid var(--main-color);
}

body .memory #memory dt{
    padding: 10px;
    border: 2px solid var(--main-color);
    font-weight: bold;
}
#memory dl dd{
    padding: 5px;
    border-left: 5px solid var(--main-color);
}


/* memory固有のside_contact */
body.memory #side_contact {
    border: 2px solid var(--main-color);
}

body.memory #side_contact h2 {
    background-color: var(--main-color);
    color: #000;
}

/* memory固有のfooter */
body.memory footer {
    background-color: var(--main-color);
}

body.memory footer #footer_nav {
    background-color: var(--main-color);
}

body.memory footer #footer_nav li a {
    color: #000;
}

body.memory footer #footer_nav li a:hover {
    color: var(--accent-color);
}

body.memory footer #footer_nav li {
    border-left: solid 1px var(--main-color);
}

body.memory footer #footer_nav li:last-child {
    border-right: solid 1px var(--main-color);
}

body.memory footer small {
    color: #000;
}

/* memory固有の連絡先ボタン */
body.memory #side_contact .contact_button {
    background: var(--accent-color);
}

/* gameのテーマカラー */

body.game #main h1 {
    background-color: var(--main-color);
    border-bottom: solid 3px var(--main-color);
}

body.game #main h2 {
    border: 2px solid var(--main-color);
}

body.game #main h3 {
    border-left: 8px solid var(--main-color);
}

body.game #main h4 {
    border-bottom: 2px solid var(--main-color);
}

body.game {
    color: var(--sub-color);
}

body.game a {
    color: var(--accent-color);
}



body.game a:hover {
    color: #FF69B4;
}

body.game #header_contact a.btn_010 {
    background: var(--accent-color);
    color: #000;
}

/* game固有のnavigation */
body.game #global_navi ul li a {
    background-color: var(--main-color);
    color: #000;
}

body.game #global_navi ul li a:hover {
    background-color: var(--accent-color);
    color: #000;
}

body.game #global_navi ul li.current a {
    background-color: var(--accent-color);
    color: #000;
}

/* game固有のsidebar */
body.game #side_banner h2 {
    background-color: var(--main-color);
    color: #000;
}

/* game固有のdl要素（月などの見出し） */
body.game #game h2 {
    border: 2px solid var(--main-color);
}

body.game #game dl h2 {
    border: 2px solid var(--main-color);
}

body .game #game dt{
    padding: 10px;
    border: 2px solid var(--main-color);
    font-weight: bold;
}
#game dl dd{
    padding: 5px;
    border-left: 5px solid var(--main-color);
}


/* game固有のside_contact */
body.game #side_contact {
    border: 2px solid var(--main-color);
}

body.game #side_contact h2 {
    background-color: var(--main-color);
    color: #000;
}

/* game固有のfooter */
body.game footer {
    background-color: var(--main-color);
}

body.game footer #footer_nav {
    background-color: var(--main-color);
}

body.game footer #footer_nav li a {
    color: #000;
}

body.game footer #footer_nav li a:hover {
    color: var(--accent-color);
}

body.game footer #footer_nav li {
    border-left: solid 1px var(--main-color);
}

body.game footer #footer_nav li:last-child {
    border-right: solid 1px var(--main-color);
}

body.game footer small {
    color: #000;
}

/* game固有の連絡先ボタン */
body.game #side_contact .contact_button {
    background: var(--accent-color);
}
/* contactのテーマカラー */

body.contact #main h1 {
    background-color: var(--main-color);
    border-bottom: solid 3px var(--main-color);
}

body.contact #main h2 {
    border: 2px solid var(--main-color);
}

body.contact #main h3 {
    border-left: 8px solid var(--main-color);
}

body.contact #main h4 {
    border-bottom: 2px solid var(--main-color);
}

body.contact {
    color: var(--sub-color);
}

body.contact a {
    color: var(--accent-color);
}



body.contact a:hover {
    color: #FF69B4;
}

body.contact #header_contact a.btn_010 {
    background: var(--accent-color);
    color: #000;
}

/* contact固有のnavigation */
body.contact #global_navi ul li a {
    background-color: var(--main-color);
    color: #000;
}

body.contact #global_navi ul li a:hover {
    background-color: var(--accent-color);
    color: #000;
}

body.contact #global_navi ul li.current a {
    background-color: var(--accent-color);
    color: #000;
}

/* contact固有のsidebar */
body.contact #side_banner h2 {
    background-color: var(--main-color);
    color: #000;
}

/* contact固有のdl要素（月などの見出し） */
body.contact #contact h2 {
    border: 2px solid var(--main-color);
}

body.contact #contact dl h2 {
    border: 2px solid var(--main-color);
}

body .contact #contact dt{
    padding: 10px;
    border: 2px solid var(--main-color);
    font-weight: bold;
}
#contact dl dd{
    padding: 5px;
    border-left: 5px solid var(--main-color);
}


/* contact固有のside_contact */
body.contact #side_contact {
    border: 2px solid var(--main-color);
}

body.contact #side_contact h2 {
    background-color: var(--main-color);
    color: #000;
}

/* contact固有のfooter */
body.contact footer {
    background-color: var(--main-color);
}

body.contact footer #footer_nav {
    background-color: var(--main-color);
}

body.contact footer #footer_nav li a {
    color: #000;
}

body.contact footer #footer_nav li a:hover {
    color: var(--accent-color);
}

body.contact footer #footer_nav li {
    border-left: solid 1px var(--main-color);
}

body.contact footer #footer_nav li:last-child {
    border-right: solid 1px var(--main-color);
}

body.contact footer small {
    color: #000;
}

/* contact固有の連絡先ボタン */
body.contact #side_contact .contact_button {
    background: var(--accent-color);
}

/* アコーディオンをヌルっと動かす魔法 */
details {
    transition: all 0.3s ease;
    overflow: hidden;
}
details[open] summary ~ * {
    animation: sweep .5s ease-in-out;
}

@keyframes sweep {
    0%    {opacity: 0; transform: translateY(-10px);}
    100%  {opacity: 1; transform: translateY(0);}
}

/* ついでにカーソルを指にする */
summary {
    cursor: pointer;
    outline: none;
}


/* ===============================================
   小説ページ（novel.html）完全リニューアル版
   =============================================== */

/* 1. 小説ページの基本設定（PCは縦書きモード） */
body.novel {
    /* 色の定義（ここだけで完結するように再定義） */
    --main-color: #2b2b2b;   /* 墨色 */
    --sub-color: #fcfaf2;    /* 生成り色 */
    --accent-color: #a84646; /* 朱色 */

    background-color: var(--sub-color);
    color: var(--main-color);
    font-family: "Noto Serif JP", serif;
    margin: 0;

    /* ★PC版の重要設定：画面全体を縦書きにする */
    writing-mode: vertical-rl; /* 右から左へ書く */
    overflow-x: auto;          /* 横にスクロールする */
    overflow-y: hidden;        /* 縦スクロールは禁止 */
    height: 100vh;             /* 画面の高さいっぱいに使う */
}

/* 2. 戻るリンク（左上に固定・ここだけ横書きで見やすく） */
.novel_nav {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    writing-mode: horizontal-tb; /* ボタンは横書き */
}
.novel_nav a {
    text-decoration: none;
    color: var(--accent-color);
    font-weight: bold;
    border-bottom: 1px solid var(--accent-color);
    font-size: 0.9rem;
    padding-bottom: 2px;
}

/* 3. コンテンツ全体の配置 */
.novel_container {
    padding: 60px 80px; /* 上下の余白、左右の開始位置調整 */
    height: 85vh;       /* 画面高さの85%を使って文字を流す */
    /* 縦書きモードなので、要素は右から左へ並んでいきます */
}

/* 4. 説明書きエリア */
.novel_intro {
    /* 縦書きのまま表示 */
    margin-left: 60px; /* 左隣（次の要素）との間隔 */
    padding-left: 20px;
    border-left: 1px solid #ddd; /* 緩い区切り線 */
    max-height: 100%;
}
.novel_intro h1 {
    font-size: 2.2rem;
    margin-left: 30px; /* タイトル上の余白 */
    color: var(--main-color);
}

/* 5. 作品リスト（details）のデザイン修正 */
.novel_list {
    /* リスト全体を少し離す */
    margin-right: 40px; 
}

.novel_item {
    /* ★ご要望のデザイン変更箇所 */
    border: 1px solid var(--accent-color); /* 朱色の枠線 */
    border-radius: 4px;       /* 角を少し丸く */
    padding: 20px;            /* 内側の余白をたっぷりとる */
    margin-left: 50px;        /* 次の作品との間隔（縦書きなので横方向） */
    
    background-color: #fcfaf2;   /* 枠内だけ少し明るくして際立たせる */
    max-height: 100%;         /* 親要素からはみ出さない */
}

/* 目次（タイトル部分）のデザイン */
.novel_item summary {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--accent-color); /* 文字も朱色に */
    cursor: pointer;
    list-style: none; /* デフォルトの三角を消す */
    outline: none;
}

/* 開いたときの中身（本文） */
.novel_content {
    margin-top: 20px;       /* タイトルとの間隔（縦書きでは右方向） */
    margin-block-start: 20px; /* より正確な指定 */
    line-height: 2.0;       /* 読みやすい行間 */
}
.novel_content p {
    margin-left: 1em;       /* 段落ごとの空き */
}

/* 6. スマホ対応（スマホだけは見やすい横書きに切り替え） */
@media (max-width: 768px) {
    body.novel {
        writing-mode: horizontal-tb; /* 横書きに戻す */
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
    }
    .novel_nav {
        position: static; /* 固定解除 */
        margin-bottom: 20px;
        display: block;
        padding-top:20px;
        padding-left:20px;
    }
    .novel_container {
        padding: 20px 10px;
        height: auto;
    }
    .novel_intro {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-bottom: 40px;
        border-bottom: 1px solid #ddd;
    }
    .novel_item {
        margin-left: 0;
        margin-bottom: 30px; /* スマホでは縦に積む */
    }
}

/* 小説ページ内の「閉じるボタン」のデザイン調整 */
.novel_content .details_close_btn {
    color: var(--accent-color);       /* 朱色に変更 */
    border-top: 1px dashed var(--accent-color); /* 線も朱色に */
    
    /* 縦書きの中での配置調整 */
    margin-top: 50px;  /* 本文との間隔（物理的な上方向の余白） */
    padding-top: 20px;
    
    /* 縦書きのまま表示されます（▲ 閉 じ る） */
    font-family: "Noto Serif JP", serif;
}

/* スマホ版（横書き）のときは通常の余白に戻す */
@media (max-width: 768px) {
    .novel_content .details_close_btn {
        margin-top: 30px;
    }
    .novel_date {
        text-align: right;
        margin-right: 0;
        margin-top: 3em; 
    }
    .novel_afterword {
        margin-right: 0;
        margin-top: 4em; /* 本文との距離 */
    }
    .afterword_body {
        margin-top: 15px;
        padding: 15px;
    }
}

/* ===============================================
   小説の日付のデザイン
   =============================================== */

/* PC版（縦書き）の設定 */
.novel_date {
    /* 縦書きで「右寄せ」にすると、自動的に「下寄せ」になります */
    text-align: right; 
    
    /* 縦書きでは前の文章が「右」にあるので、右に余白をとって離す */
    margin-right: 4em; 
    
    /* 少し文字を小さくして、色も薄く（透けさせて）控えめにする */
    font-size: 0.9rem;
    opacity: 0.8;
}

/* スマホ版（横書き）の設定：メディアクエリ内に追記 */
@media (max-width: 768px) {
    .novel_container {
        padding: 20px 10px;
        height: auto;
        width: 100vw;
        max-width: 100vw;
        box-sizing: border-box;
        margin: 0;
    }
    .novel_list,
    .novel_item,
    .novel_afterword {
        width: 100%;
        max-width: 600px;
        margin: 0 auto 30px auto;
        box-sizing: border-box;
    }
    .novel_item,
    .novel_afterword {
        padding: 10px;
    
    /* 枠線などはつけず、シンプルに */
    font-size: 0.9rem;
    color: var(--main-color);
    border:none;}
}

/* 「あとがき」というボタン（summary）のデザイン */
.novel_afterword summary {
    cursor: pointer;
    list-style: none; /* 三角を消す */
    opacity: 0.7;     /* 少し薄くして控えめに */
    transition: opacity 0.3s;
    text-decoration: underline; /* 下線（縦書きだと右線）を引く */
    text-underline-offset: 4px;
}

.novel_afterword summary:hover {
    opacity: 1; /* ホバーではっきり見えるように */
    color: var(--accent-color); /* 朱色に */
}

/* 開いた中身のデザイン */
.afterword_body {
    margin-top: 20px;       /* ボタンとの間隔（縦書きでは右） */
    padding: 20px;
    background-color: rgba(0,0,0,0.02); /* 極めて薄いグレーの背景 */
    border-radius: 8px;
    /* 中身も縦書きのまま */
    line-height: 1.8;
    font-size: 0.85rem;
}

/* スマホ版（横書き）の調整：上記@media (max-width: 768px) 内に統合済み */

.thread-count {
    color: #bbbbbb !important;
}

.author {
  font-weight: bold;
}