/* リセットや共通設定 */
*,
*::before,
*::after {
    box-sizing: border-box;
}
/* ベースの文字サイズとフォント */
html {
    font-size: 90%;
}

html,
body {
    background-color: #fff !important;
}

body {
    font-family:
        "ヒラギノ明朝 Pro",
        "Hiragino Mincho Pro",
        "游明朝",
        "Yu Mincho",
        "MS PMincho",
        serif;
    color: #000;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
    touch-callout: none;
    user-select: none;
}


/* -------------------------------------------------- */
/* Bootstrapの .text-light / .navbar-brand / .nav-linkを上書き */
/* -------------------------------------------------- */
.text-light,

.navbar-dark .nav-link,
.nav-link.text-light {
    color: #222 !important;
    /* お好みのライトグレーに */
}
.text-faint {
    color: #aaa !important;
    /* または #ddd, #eee など */ }

.navbar,
.footer,
footer {
    background-color: #fff !important;
}

@media (pointer: coarse) {

    /* モダル（全画面）中の左右ナビをまるごと消す */
    #lightboxModal .carousel-control-prev,
    #lightboxModal .carousel-control-next {
        display: none !important;
        pointer-events: none !important;
    } }

/* 見出しやカードタイトルの微調整 */
h1 {
    font-size: 2rem;
}

.card-title {
    font-size: 1.125rem;
}

/* グリッドやカードの余白調整など、さらにここに書き足していく */
.items-grid {
    /* 例：top ページ用グリッド */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

/* 情報欄に共通余白 */
.info-col {
    padding: 2rem;
    /* スマホ～タブレットのベース */
}

/* タブレット以上はもう少し広めに */
@media (max-width: 767px) {
    /* Bootstrap の col-12 が効いているので flex-direction 指定不要 */

    /* 画像だけを 70% 幅にして中央 */
    .image-col img {
        display: block;
        width: 70%;
        max-width: 70%;
        height: auto;
        margin: 0 auto 1.5rem;
    } }

/* PC時：ライトボックス内の画像を縦80%に制限 */
@media (min-width: 768px) {

    #lightboxCarousel,
    #lightboxCarousel .carousel-inner,
    #lightboxCarousel .carousel-item {
        height: 100%;
    }

    #lightboxCarousel .carousel-item img {
        max-height: 80vh;
        width: auto;
        margin: auto;
        object-fit: contain;
    }
}

/* 必要に応じて見出しと本文の間にも余白を */
.info-col h1 {
    margin-bottom: 1rem;
}

.info-col .text-muted {
    margin-bottom: 0.5rem;
}

.info-col section {
    margin-bottom: 0.5rem; 
}

.note-style {
  max-width: 700px; /* note風の読みやすい幅 */
  margin: 0 auto;   /* 中央寄せ */
  padding: 0 1.5rem; /* スマホでも余白が保たれるように */
  line-height: 1.8;
  font-size: 1rem;
}



/* ------------------------------------------------------------------- */
/* 1. モバイル（767px 以下）では縦並び＆画像カラムは全幅           */
/* ------------------------------------------------------------------- */
/* モバイル（767px以下）用 */
@media (max-width: 767px) {
    /* Bootstrap の col-12 が効いているので flex-direction 指定不要 */

    /* 画像だけを 70% 幅にして中央 */
    .image-col img {
        display: block;
        width: 60%;
        max-width: 60%;
        height: auto;
        margin: 0 auto 1.5rem;
    } }

    /* 画像だけを左右中央にする */
    .image-col img {
        display: block;
        /* ブロック化 */
        margin: 0 auto 1.5rem;
        /* 上0、左右auto、下1.5rem */
    }

@media (min-width: 768px) {
        .image-col img {
            max-width: 300px;
        }

        .image-col {
            position: sticky;
            top: 12rem;
            /* ヘッダー分のオフセット。実際の navbar 高さに合わせて調整してください */
            align-self: start;
            /* すでに img-fluid なので幅はそのまま、高さも自動 */       
        }
    }

/* nav-pills 全体のベース */
.nav-pills .nav-link {
    background-color: transparent;
    /* 背景は透過 */
    color: rgba(0, 0, 0, 0.6);
    /* 非選択時の薄いグレー */
    border-radius: 0;
    transition: color .2s, background-color .2s;
}

/* ホバー時は白文字＋ほんのり白背景 */
.nav-pills .nav-link:hover {
    color: #222;
    background-color: rgba(0, 0, 0, 0.1);
}

/* 選択中 (.active) は白文字、背景透過 */
.nav-pills .nav-link.active {
    color: #222 !important;
    background-color: transparent !important; }

/* 2. タブを等間隔に広げる */
/* 方法A：Bootstrapのクラスを使う */
/* HTML側の <ul> に nav-fill を追加します。下記HTML参照 */

/* 方法B：自前でFlexbox */
.nav-pills {
    display: flex;
}

.nav-pills .nav-item {
    flex: 1;
    text-align: center; }

/* デスクトップ以上では幅を20%に */
@media (min-width: 992px) {
    .nav-pills {
        width: 50%;
        /* コンテナ幅の20% */
        margin: 0 0 2rem 0;
        /* 下マージン（mb-5相当） */
    }
}

/* タブレット以下では幅100% */
@media (max-width: 991px) {
    .nav-pills {
        width: 100%;
    } }

/* カード全体の背景・枠・影をオフ */
.card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────── */
/* カード内画像：高さを固定＆縦横比保持 */
/* ─────────────────────────────────── */
.card .card-img-top {
    display: block;
    margin: 0 auto 1rem;
    /* 中央寄せ＋下マージン */
    height: 200px;
    /* 縦幅を揃える */
    width: auto;
    /* 高さに合わせて幅自動 */
    object-fit: contain;
    object-position: center;
}

/* ─────────────────────────────────── */
/* タブレット以上（768px以上）は最大60％幅 */
/* ─────────────────────────────────── */
@media (min-width: 768px) {
    .card .card-img-top {
        max-width: 60%;
    }
}

/* ─────────────────────────────────── */
/* スマホ（767px以下）はカード幅100％に広げる */
/* ─────────────────────────────────── */
@media (max-width: 767px) {
    .card .card-img-top {
        max-width: 100%;
    } }

/* 「非表示（下＆透明）」の状態 */
.hide {
    opacity: 0;
    transform: translateY(20px);
    /* 即座に hide 状態に移る */
    transition: none;
}

/* カード全体のフェードアウト */
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade-out {
    animation: fadeOut 1s ease forwards;
}

/* ────────────────────────────────── */
/* 【2】 slide-in 時に確実に見えるよう上書き */
/* 「表示（スライドアップ＋フェードイン）」のアニメ */
@keyframes slideUpFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.show {
    animation: slideUpFadeIn 0.4s ease forwards; }

.slide-in {
    animation: slideUpFadeIn 1s ease forwards;
    /* これでアニメ完了後も消えずに表示されます */
    opacity: 1 !important;
    transform: translateY(0) !important;
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade-out {
    animation: fadeOut 0.2s ease forwards; }

/* ────────────────────────────────── */

/* ────────────────────────────────── */
/* 【3】 必要なら .card-body を再表示 */
/* ────────────────────────────────── */

/* もし以前に .card-body { display: none; } を追加していたら、以下で上書き */
.card .card-body {
    display: block !important; }

/* ────────────────────────── */
/* 詳細ページ：フェードインアニメ */
/* ────────────────────────── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 初期状態は透明＋下にずらす */
.image-col,
.info-col {
    opacity: 0;
    transform: translateY(10px);
}

/* ロード時にアニメ再生 */
.image-col {
    animation: fadeInUp 0.6s ease forwards;
    /* 0s delay で即アニメ */
}

.info-col {
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: 0.2s;
    /* 0.2s 遅延してからアニメ */ }

/* Carousel本体は幅100%を担保 */
#detailCarousel {
    position: relative;
    /* ボタンのabsoluteを支える */
}

/* フェード用クラスはBootstrapに含まれるのでOK */
/* ボタンの色を白く反転 */
/* 詳細ページのCarousel矢印を白に反転 */
#detailCarousel .carousel-control-prev-icon,
#detailCarousel .carousel-control-next-icon {
    /* 黒→白 に反転 */
    filter: invert(0) brightness(1.5) !important;
}

/* ボタンのクリック範囲を広げたいなら padding を追加 */
#detailCarousel .carousel-control-prev,
#detailCarousel .carousel-control-next {
    width: 3rem;
    /* 高さは position-relative の領域に合わせて自動 */
}

/* もし矢印アイコンが小さいなら font-size で大きく */
#detailCarousel .carousel-control-prev-icon,
#detailCarousel .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
}

#detailCarousel img {
    pointer-events: auto !important; }

/* 画像にフェード速度を上書きしたい場合（任意） */
.carousel-fade .carousel-item {
    transition: opacity .6s ease; }

        /* ────────────────────────────── */
        /* メインコンテンツ領域を真っ黒に */
        main,
        main .container,
        main .row {
            background-color: #fff !important;
        }
    
        /* コンテナ内部の余白だけ残す */
        main .container {
            padding-top: 2rem;
            padding-bottom: 2rem;
        }
    
        /* ────────────────────────────── */

/* スマホ（タッチデバイス）のみ適用 */
@media (pointer: coarse) {

    /* スワイプ対象（ここが一番効く） */
    #lightboxCarousel {
        touch-action: pan-x;
    }

    /* 画像の白枠 */
    .lb-frame {
        display: flex;
        align-items: center;
        justify-content: center;

        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* 画像の重心を少し上へ */
    .lb-frame img {
        transform: translateY(-16px);
        /* 好みで調整 */
        -webkit-user-drag: none;
        user-select: none;
    }
}
/* Bootstrap の .bg-dark を真っ黒に上書き */
.bg-dark {
    background-color: #fff !important;
}

/* 万一 body に直接 bg-dark を振っているならこちらも */
body.bg-dark {
    background-color: #fff !important; }

/* footer のリンクをライトグレーに、ホバーで白に */
footer ul.list-inline a,
.note-style a {
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
    transition: color .2s;
}

footer ul.list-inline a:hover,
.note-style a:hover {
    color: #666;
}

/* フッター全体の背景が黒なら、文字色を少し淡く */
footer {
    background-color: #fff;
    /* すでに黒なら不要 */
}

footer small {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* ↑ボタン本体 */
/* backToTop ボタン */
#backToTop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: background .2s, opacity .3s;
}

/* モーダル全体は透明にして、背面(backdrop)を見せる */
#lightboxModal .modal-content {
    background: transparent !important;
    border: 0 !important;
}

#lightboxModal .modal-body {
    background: transparent !important;
}

#lightboxModal {
    overscroll-behavior: none;
}

#lightboxCarousel {
    touch-action: pan-x;
}

/* ナビ矢印をより大きく／白く */
#lightboxModal .carousel-control-prev-icon,
#lightboxModal .carousel-control-next-icon {
    filter: invert(1) brightness(1.5);
    width: 3rem;
    height: 3rem; }

/* ライトボックス内の閉じるボタンを最前面へ */
#lightboxModal .btn-close {
    z-index: 2000;
    /* カルーセルコントロールの上 */
    pointer-events: auto; }
    
/* ホバー時の背景 */
#backToTop:hover {
    background: rgba(0, 0, 0, 0.4);
}
    
/* スムーススクロール（任意） */
html {
    scroll-behavior: smooth; }

/* =========================
   LIGHTBOX (final, centered)
   ========================= */

#lightboxModal .modal-dialog {
    height: 100vh;
    margin: 0;
}

#lightboxModal .modal-content {
    height: 100vh;
    background: transparent !important;
    border: 0 !important;
}

#lightboxModal .modal-body {
    height: 100vh;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#lightboxCarousel,
#lightboxCarousel .carousel-inner,
#lightboxCarousel .carousel-item {
    width: 100%;
    height: 100%;
}

#lightboxCarousel .carousel-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* PC/タブレット：現状そのまま */
#lightboxCarousel .lb-frame {
    width: min(80vh, 90vw);
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 中の画像は今のままでOK */
#lightboxCarousel .lb-frame img {
    height: 90%;
    width: auto;
    max-width: 90%;
    object-fit: contain;
    display: block;
}

@media (max-width: 767px) {

    /* 白ボックスを殺す */
    #lightboxCarousel .lb-frame {
        width: 100vw;
        height: 100vh;
        aspect-ratio: auto;
        background: transparent;
        padding: 0;
    }

    /* 画像を画面いっぱいに */
    #lightboxCarousel .lb-frame img {
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: none;
        object-fit: contain;
    }
}

/* arrows */
#lightboxModal .carousel-control-prev-icon,
#lightboxModal .carousel-control-next-icon {
    filter: invert(1) brightness(1.5);
    width: 3rem;
    height: 3rem;
}

/* backdrop */
.modal-backdrop.show {
    background-color: rgba(240, 240, 240, .6) !important;
}

@supports (backdrop-filter: grayscale(100%)) {
    .modal-backdrop.show {
        backdrop-filter: grayscale(100%) brightness(.9) !important;
    }
}

/* =========================
   Novel page theme fix (scoped)
   これを style.css の末尾に置く
   ========================= */

/* 小説ページ：ライト */
body.page-novel[data-bs-theme="light"] {
    background-color: #fff !important;
    color: #000 !important;
}

/* 小説ページ：ダーク（背景＋文字を強制） */
body.page-novel[data-bs-theme="dark"] {
    background-color: #0f1115 !important;
    color: rgba(255, 255, 255, .88) !important;
}

/* 小説ページの main / container / row が #fff !important で固定されてる対策 */
body.page-novel[data-bs-theme="dark"] main,
body.page-novel[data-bs-theme="dark"] main .container,
body.page-novel[data-bs-theme="dark"] main .row {
    background-color: #0f1115 !important;
}

/* note風の箱（article） */
body.page-novel[data-bs-theme="dark"] .novel.note-style {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

/* 本文とp（白固定や薄色固定の対策） */
body.page-novel[data-bs-theme="dark"] .novel-body,
body.page-novel[data-bs-theme="dark"] .novel-body p {
    color: rgba(255, 255, 255, .88) !important;
}

/* メタ/区切り/フッター小文字 */
body.page-novel[data-bs-theme="dark"] .novel-meta,
body.page-novel[data-bs-theme="dark"] .scene-break,
body.page-novel[data-bs-theme="dark"] .text-faint,
body.page-novel[data-bs-theme="dark"] footer small {
    color: rgba(255, 255, 255, .62) !important;
}

/* あなたのCSSにある .text-light { color:#222 !important; } を小説ページだけ無効化 */
body.page-novel[data-bs-theme="dark"] .text-light {
    color: rgba(255, 255, 255, .88) !important;
}

/* ナビ・フッター（bg-body が白に寄るのを上書き） */
body.page-novel[data-bs-theme="dark"] .navbar,
body.page-novel[data-bs-theme="dark"] footer,
body.page-novel[data-bs-theme="dark"] .footer {
    background-color: #0f1115 !important;
    color: rgba(255, 255, 255, .88) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

/* ナビリンク/ブランド */
body.page-novel[data-bs-theme="dark"] .navbar .navbar-brand,
body.page-novel[data-bs-theme="dark"] .navbar .nav-link {
    color: rgba(255, 255, 255, .82) !important;
}

/* ボタンの枠が見えなくなるのを軽く補正（任意） */
body.page-novel[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: rgba(255, 255, 255, .28) !important;
    color: rgba(255, 255, 255, .82) !important;
}

body.page-novel[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, .08) !important;
}

/* =========================
   Font size slider – force neutral color
   ========================= */

body.page-novel input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

/* track */
body.page-novel input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: rgba(127, 127, 127, 0.35);
    border-radius: 2px;
}

body.page-novel input[type="range"]::-moz-range-track {
    height: 4px;
    background: rgba(127, 127, 127, 0.35);
    border-radius: 2px;
}

/* thumb */
body.page-novel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(127, 127, 127, 0.85);
    margin-top: -5px;
    /* track中央に合わせる */
}

body.page-novel input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(127, 127, 127, 0.85);
    border: none;
}

body.page-novel[data-bs-theme="dark"] input[type="range"]::-webkit-slider-runnable-track,
body.page-novel[data-bs-theme="dark"] input[type="range"]::-moz-range-track {
    background: rgba(255, 255, 255, 0.25);
}

body.page-novel[data-bs-theme="dark"] input[type="range"]::-webkit-slider-thumb,
body.page-novel[data-bs-theme="dark"] input[type="range"]::-moz-range-thumb {
    background: rgba(255, 255, 255, 0.75);
}
body.page-novel .novel.note-style {
    padding-top: 1.5rem;
    /* これが効く */
}
body.page-novel .novel-title {
    margin-top: 0;
}