@charset "UTF-8";

/*
ユーザースタイル
_________________________________________*/

/* ----- スタイルを書き換える場合は以下に追記してください。 ----- */

/* 親要素のレイアウトを設定 */
.container {
  display: flex;
  align-items: flex-start; /* 上方向に揃え */
  flex-direction: column; /* 垂直方向に要素を並べる */
}

/* ボタン全体を囲む部分に余白を追加 */
.submit {
  display: flex;
  gap: 10px; /* OKボタンとNGボタン間の余白を調整 */
  margin-top: 10px;
  margin-bottom: 30px;
}

/* 名前変換ボタンの共通スタイル */
.name-submit-btn {
  color: var(--color-main);
  border-radius: 5px;
  background-color: var(--color-white);
  box-shadow: var(--box-shadow);
  padding: 10px 30px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease; /* style.cssの他のボタンとtransitionを合わせました */
}

/* ホバー時のスタイル */
.name-submit-btn:not(:disabled):hover {
  box-shadow: var(--box-shadow-hover);
  transform: translateY(-3px); /* ボタンが浮き上がる動き */
  background-color: var(--color-main);
  color: var(--color-white);
}

/* 無効なときのスタイル */
.name-submit-btn:disabled {
  border-color: var(--color-glay5);
  background: var(--color-glay3);
  box-shadow: unset;
  cursor: not-allowed;
}


/* ==================================================
   小説リスト全体のコンテナ
   ================================================== */
.novel-list-container {
  display: flex;
  flex-wrap: wrap;            /* 要素の折り返しを許可 */
  gap: 20px;                  /* 要素間の余白 */
  justify-content: flex-start;/* 左寄せ */
  box-sizing: border-box;
}

/* ==================================================
   各小説項目（アイテム）の基本設定
   ================================================== */
.novel-list-single-item {
  display: flex;
  flex-direction: column;     /* 縦方向に並べる */
  margin-bottom:10px;         /* 下余白 */
  min-width: 200px;
  flex: 1 1 200px;            /* 小さい画面では最小幅200pxから自動調整 */
  box-sizing: border-box;
}

/* ==================================================
   タイトル前の丸アイコン
   ================================================== */
.novel-list-item-title::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: var(--color-main);
  border-radius: 50%;
  margin-right: 10px;
}

/* ==================================================
   タイトルと矢印をまとめる（ヘッダー）
   ================================================== */
.novel-list-item-header {
  display: flex;
  align-items: center;  /* 垂直方向中央揃え */
  gap: 5px;             /* タイトルと矢印の間隔 */
  cursor: pointer;
  margin-bottom: 5px;
}

/* ==================================================
   小説のタイトル
   ================================================== */
.novel-list-item-title {
  margin-bottom: 0;
  display: flex;        /* アイコンとテキストをまとめる */
  align-items: center;
}

/* リンクおよびspanのタイトルスタイル */
.novel-list-item-title a,
.novel-list-item-title span {
  display: inline-block;
  padding: 2px 3px 1px;
  border-bottom: 1px solid var(--color-main);
  color: var(--color-text);
}

/* ホバー時のタイトルスタイル */
.novel-list-item-title a:hover,
.novel-list-item-title span:hover {
  color: var(--color-main);
  transform: translateY(-3px);
  opacity: 0.8;
}

/* ==================================================
   矢印のスタイル
   ================================================== */
.novel-list-item-arrow {
  font-size: 14px;
  color: var(--color-main);
  transition: transform 0.3s ease;
  /* ※ margin-left: auto; は削除しておく */
}

/* アクティブな状態の矢印 */
.novel-list-item-arrow.active {
  transform: rotate(90deg);
}

/* ==================================================
   話数リストのコンテナ
   ================================================== */

.novel-list-item-chapters {
  flex-wrap: wrap;
  gap: 10px;
  padding-left: 28px;

  max-height: 0;

  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
}

.novel-list-item-chapters.show {
  opacity: 1;
}

/* ==================================================
   話数リンクのスタイル
   ================================================== */
.novel-list-item-chapters a {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--color-main);
  color: var(--color-main);
  text-decoration: none;
  border-radius: 5px;
  font-size: 12px;
}

/* 話数リンクのホバー時 */
.novel-list-item-chapters a:hover {
  background-color: var(--color-main);
  color: white;
}

/* ==================================================
   フェードインアニメーション
   ================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==================================================
   画面幅768px以上の場合（3列レイアウト調整）
   ================================================== */

@media screen and (min-width: 768px) {
  .novel-list-container {
    row-gap: 20px;          /* 行間余白 */
    column-gap: 70px;        /* 列間余白 */
  }
  /* 3列で均等配置するための幅計算（70pxのギャップ×2＝140pxを引く） */
  .novel-list-single-item {
    flex: 0 0 calc((100% - 140px) / 3);
  }
}

/* TOPに戻る */

a#page-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  text-decoration: none;
  background-color: rgba(var(--color-main-rgb), 0.6); /* 月ボタンと同じ色に */
  border-radius: 50%; /* 丸くする */
  display: flex; /* Flexboxを使用 */
  justify-content: center; /* 水平方向中央寄せ */
  align-items: center; /* 垂直方向中央寄せ */
  opacity: 0;
  transition: opacity 0.4s ease-in;
  pointer-events: none; /* 透明な時はクリックできないようにする */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  -webkit-tap-highlight-color: transparent; /* スマホでタップした時の青い色を消す */
  z-index: 997; /* 月ボタンより手前に来るように調整 */
}

/* ボタンの影を制御する */
/* まず、デフォルトで影をつけるボタンを指定 */
#view-settings-button,
a#page-top {
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* TOPへ戻るボタンに「すりガラス」効果を追加するための疑似要素 */
a#page-top::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: inherit; /* 親要素の背景色を継承 */
  filter: blur(8px); /* ハンバーガーメニューと同じぼかし効果 */
  z-index: -1;
  border-radius: inherit; /* 親要素の角丸を継承 */
}

a#page-top::before {
  /* Font Awesomeのアイコンを使う場合はこちらを有効に */
  /* content: '\f077'; */
  /* font-family: 'Line Awesome Free'; */
  content: '▲';
  font-size: 22px; /* ★★★ 少しだけ大きくしました ★★★ */
  font-weight: 700;
  color: var(--color-white);
  line-height: 1; /* 行の高さを1にする */
}

a#page-top:hover {
  background-color: rgba(var(--color-main-rgb), 0.8);
}

/* ★★★ 修正箇所 ★★★ */
/* ホバー時に文字の影がつかないようにする（スマホでの青い光彩対策） */
a#page-top:hover {
  text-shadow: none;
}

a#page-top.fadein {
  opacity: 1;
  pointer-events: auto; /* 表示されたらクリックできるように戻す */
}

#update,
#information,
#short,
#medium,
#long,
#contact {
  scroll-margin-top: 80px; /* ヘッダーの高さに合わせて調整 */
}



/* キャラクター専用のスタイルを共通化 */
.noveltitle.character {
  font-size: 1.4em; /* サイズを調整 */
  margin-top: 10px;
  margin-bottom: 20px;
}
/* --------------------------------
 * 表示設定パネル
 * -------------------------------- */
#view-settings-button {
  position: fixed;
  bottom: 82px; /* 「TOPへ戻る」ボタンの真上に配置 */
  right: 23px; /* 「TOPへ戻る」ボタンと位置を合わせる */
  width: 48px; /* 「TOPへ戻る」ボタンとサイズを合わせる */
  height: 48px;
  background-color: rgba(var(--color-main-rgb), 0.6); /* ハンバーガーメニューと同じ色に */
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  cursor: pointer;
  /* ★★★ ここを修正 ★★★ */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 998;
  overflow: hidden; /* はみ出しを隠すために追加 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* CSSで三日月を描画 */
#view-settings-button::after {
  content: '';
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 6px -6px 0 0 var(--color-white);
  transition: box-shadow 0.3s ease;
  transform: rotate(15deg);
}

/* 月ボタンに「すりガラス」効果を追加するための疑似要素 */
#view-settings-button::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: inherit; /* 親要素の背景色を継承 */
  filter: blur(8px); /* ハンバーガーメニューと同じぼかし効果 */
  z-index: -1;
  border-radius: inherit; /* 親要素の角丸を継承 */
}

/* PC（マウス操作が前提）の時だけホバーエフェクトを適用 */
@media (hover: hover) and (pointer: fine) {
  #view-settings-button:hover {
    background-color: rgba(var(--color-main-rgb), 0.8);
    transform: translateY(-2px);
  }
}

#view-settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 80%;
  height: 100%;
  background-color: rgba(var(--color-main-rgb), 0.6); /* ハンバーガーメニューと同じ色に */
  color: var(--color-white);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  box-shadow: -5px 0 15px rgba(0,0,0,0.3);
}

/* 設定パネルに「すりガラス」効果を追加するための疑似要素 */
#view-settings-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: inherit; /* 親要素の背景色を継承 */
  filter: blur(8px); /* ハンバーガーメニューと同じぼかし効果 */
  z-index: -1;
}

#view-settings-panel.show {
  transform: translateX(0);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 1.1rem;
  font-weight: bold;
}

#close-settings-panel {
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  padding: 0 5px;
  opacity: 0.7;
  transition: opacity 0.3s;
}

#close-settings-panel:hover {
  opacity: 1;
}

.panel-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
}
/* PC表示の時だけ、設定項目が多くなってもスクロールしないように調整 */
@media screen and (min-width: 768px) {
  .panel-body {
    overflow-y: scroll; /* PCでは常にスクロールバーを表示してガタつきを防ぐ */
    display: flex;
    flex-direction: column;
  }
}

.setting-group {
  margin-bottom: 15px;
}

.accordion-group.is-hidden,
.custom-color-group.is-hidden,
.custom-theme-group.is-hidden {
  display: none; /* 普段は完全に非表示 */
}

.setting-title {
  margin-bottom: 8px;
  font-weight: bold;
  cursor: default; /* 通常のカーソルに */
  border-left: 3px solid var(--accent-color);
  padding-left: 10px;
}

.setting-options {
  display: flex;
  gap: 10px;
}

.view-option-btn {
  flex: 1;
  flex: 1 1 0; /* 3列で均等に配置されるように変更 */
  padding: 8px 10px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 0 8px var(--accent-shadow-color); /* 通常時の影をテーマカラーに連動させる */
}

.view-option-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 10px var(--accent-shadow-color);
  border-color: var(--accent-color);
}

.view-option-btn.active {
  background-color: rgba(255, 255, 255, 0.2); /* 選択時の背景色 */
  border-color: rgba(255, 255, 255, 0.5); /* 選択時の枠線 */
  font-weight: bold;
}

.setting-slider {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

/* Chrome, Safari, Opera, Edge */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; /* さらに小さくしました */
  height: 14px; /* さらに小さくしました */
  background: var(--color-white);
  border: 2px solid var(--accent-color);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); /* ★★★ 薄い影を追加 ★★★ */
  margin-top: 0; /* 垂直位置の調整をリセット */
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
  width: 10px; /* さらに小さくしました */
  height: 10px; /* さらに小さくしました */
  margin-top: 0; /* 垂直位置の調整をリセット */
  background: var(--color-white); /* この行は変更なし */
  border: 2px solid var(--accent-color);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); /* ★★★ 薄い影を追加 ★★★ */
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  cursor: pointer;
}

#font-size-value {
  font-size: 14px;
  font-weight: bold;
  min-width: 45px; /* px数の桁数が変わってもレイアウトが崩れないように */
  text-align: right;
}

#line-height-value {
  font-size: 14px;
  font-weight: bold;
  min-width: 45px; /* px数の桁数が変わってもレイアウトが崩れないように */
  text-align: right;
}

/* --------------------------------
 * カスタムカラー用スタイル
 * -------------------------------- */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out, margin 0.4s ease-out;
  padding: 0 10px;
  margin-top: 0;
}

.accordion-content.show {
  padding: 15px 10px 10px;
  margin-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.color-picker-group {
  margin-bottom: 15px;
}

.color-picker-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* カラーピッカーのデザインを修正 */
.color-picker-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 40px;
  height: 30px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0; /* これ以上縮まないように指定 */
  padding: 0; /* 内側の余白をリセット */
}

/* カラーコード表示のデザインを修正 */
.color-code-display {
  padding: 5px 10px; /* ゆとりを持たせる */
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
  color: var(--color-white);
  flex-grow: 0; /* 自動で伸びないようにする */
  flex-basis: 75px; /* 基準の幅をさらに短く調整 */
  text-align: center;
}
body.color-dark .color-code-display {
  color: var(--color-primary);
  background-color: rgba(255, 255, 255, 0.1);
}

.color-picker-input::-webkit-color-swatch {
  border-radius: 3px;
  border: none;
}
.color-picker-input::-moz-color-swatch {
  border-radius: 3px;
  border: none;
}

.view-option-btn.reset-btn {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 15px; /* PC表示でもボタン全体が見えるように余白をさらに調整 */
  color: var(--color-white);
}

/* --------------------------------
 * 文字サイズ変更用のスタイル
 * -------------------------------- */

/* --------------------------------
 * 書体（フォント）変更用のスタイル
 * -------------------------------- */
/* 明朝体 */
.novelpage__container.font-serif .novelpage__main {
  font-family: "Noto Serif JP", serif;
}
/* ゴシック体 */
.novelpage__container.font-sans-serif .novelpage__main {
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "MS PGothic", sans-serif;
}

/* --------------------------------
 * 縦書き表示用のスタイル
 * -------------------------------- */

/* 縦書きモードの時、邪魔になるページタイトル("Novel"ロゴ)を非表示に */
body.view-vertical .pagetitle {
  display: none;
}

/* 縦書きモードの時、メインコンテンツエリアをFlexbox化 */
body.view-vertical .maincontents {
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

/* 縦書きモードの時、白い枠(.section)を調整 */
body.view-vertical .section {
  flex-grow: 1; /* 残りの高さいっぱいに広がる */
  background-color: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  overflow: hidden;
}
body.view-vertical .section__inner {
  padding: 0 5px; /* ★★★【修正】縦書き時の左右の余白を減らす */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  width: 100%;
}

/* 縦書きモードの時、小説コンテナを調整 */
body.view-vertical .novelpage__container {
  display: flex;
  flex-direction: column; /* タイトル・本文ラッパーとページ送りを縦に並べる */
  flex-grow: 1;
  overflow: hidden;
}

/* 表示モード切り替え時のちらつき防止用スタイル */
.novelpage__container.is-hiding {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.2s, opacity 0.2s ease-in-out;
}


/* 縦書きモードの時、タイトルと本文を横に並べるためのラッパー */
body.view-vertical .novel-body-wrapper {
    display: flex;
    flex-direction: row-reverse; /* 本文を左、タイトルを右に */
    height: calc(100svh - 60px); /* ヘッダーの高さを除いた画面の高さいっぱいに広げる */
    overflow: hidden; /* はみ出した部分を隠す */
    gap: 1.5em;
    padding: 0; /* 上下の余白をなくして本文エリアを広げる */
    align-items: flex-start; /* 上揃えにする */
}

/* 縦書きモードの時、タイトルも縦書きに */
body.view-vertical .noveltitle {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border: none;
  border-left: 1px solid var(--color-main); /* 左側に線 */
  padding: 20px 15px;
  margin: 0;
  text-align: left;
  flex-shrink: 0; /* 縮まないようにする */
  align-self: stretch;
}

/* 縦書きの中の半角文字を縦向きにする（縦中横） */
.tcy {
  text-combine-upright: all;
}


/* 縦書きモードの時、本文エリアを縦書き用に */
body.view-vertical .novelpage__main {
  flex-grow: 1; /* 残りのスペースを埋める */
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 元の設定に戻します */
  overflow-x: auto; /* 横スクロールを有効に */
  overflow-y: hidden;
  padding: 20px 10px 10px; /* ★★★【修正】縦書き時の左右の余白を減らす（上下は維持） */
  font-family: "Noto Serif JP", serif; /* ★★★ 縦書きのデフォルトを明朝体に ★★★ */
  /* line-height: 2; */ /* JavaScriptで制御するため削除済み */
  letter-spacing: 0.05em;
  height: 100%; /* 高さを親要素いっぱいに広げる */
  transform: translateZ(0); /* GPUレンダリングを促し、文字化けを防止 */
  will-change: scroll-position; /* スクロール位置が変わることをブラウザに通知 */
}

/* ★★★ 修正箇所 ★★★ */
@media screen and (min-width: 768px) {
  body.view-vertical .novelpage__main {
    padding-bottom: 20px; /* PCでの下の余白を20pxに設定 */
  }
}

/* ---------------------------------
 * 字下げ用のスタイル
 * --------------------------------- */
/* pタグのデフォルトの上下余白をリセット（横書き表示崩れ防止） */
.novelcontainer p {
  margin: 0;
  padding: 0;
}

/* 空行用のpタグに高さを設定 */
.novelcontainer p.blank {
  height: 1em;
}

/* 縦書きの時だけ、空行用のpタグの幅をリセットし、高さを設定し直す */
body.view-vertical .novelcontainer p.blank {
  width: 1em; /* 縦書きの時はwidthで縦方向のスペースを確保します */
}

/* 縦書きの時だけ、会話文以外のpタグの先頭を字下げ */
body.view-vertical .novelcontainer p:not(.dialog):not(.blank) {
  text-indent: 1em;
}
/* 縦書きモードの時、ページ送りとフッターを非表示に */
body.view-vertical .novelpage__pagination,
body.view-vertical .footer {
  display: none;
}

/* --------------------------------
 * 縦書き用ページ送り
 * -------------------------------- */
#vertical-pagination {
  display: none; /* 普段は非表示 */
  position: fixed;
  bottom: 30px; /* PCでの基本位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(var(--color-main-rgb), 0.6); /* ハンバーガーメニューと同じ色に戻す */
  padding: 10px 25px;
  border-radius: 30px;
  z-index: 997;
  display: flex;
  align-items: center;
  flex-direction: row-reverse; /* ボタンの並び順を逆にする */
  gap: 20px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none; /* 非表示の時はクリックできないように */
  overflow: hidden; /* はみ出した光彩（text-shadow）を隠す */
}

/* ページ送りボタンに「すりガラス」効果を追加するための疑似要素 */
#vertical-pagination::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: inherit; /* 親要素の背景色を継承 */
  filter: blur(8px); /* ハンバーガーメニューと同じぼかし効果 */
  z-index: -1;
  border-radius: inherit; /* 親要素の角丸を継承 */
}

#vertical-pagination.visible {
  opacity: 1;
  pointer-events: auto; /* 表示されたらクリックできるように */
}

/* 縦書きページ送りのリンクの色をサイトのリンク色に合わせる */
#vertical-pagination a {
  color: var(--color-main); /* 文字色をリンク色に */
  text-shadow: 0 0 3px var(--color-white), 0 0 5px var(--color-white); /* 白い光彩を少し弱める */
}

/* 横書きページ送りのリンクの色を元に戻す */
.novelpage__pagination a.novelpage__back,
.novelpage__pagination a.novelpage__index,
.novelpage__pagination a.novelpage__next {
  color: var(--color-main);
}

/* 縦書きページ送りで、リンクがない場合（次/前のページがない場合）のスタイル */
#vertical-pagination .novelpage__back:not(a),
#vertical-pagination .novelpage__next:not(a) {
  color: rgba(255, 255, 255, 0.4); /* 色を薄くして押せないことを示す */
  cursor: default; /* カーソルを通常に */
}

/* ページ送りボタンの基本スタイル（ホバーアニメーション用） */
.novelpage__back,
.novelpage__index,
.novelpage__next {
  transition: transform 0.3s ease; /* ホバーで動くアニメーションを有効に */
}

/* ページ送りボタンのホバー時の動き */
.novelpage__back:hover,
.novelpage__index:hover,
.novelpage__next:hover {
  transform: translateY(-3px); /* 少し上に動かす */
}

/* --------------------------------
 * ダークモード用のスタイル
 * -------------------------------- */
body.color-dark {
  --text-shadow: 0px 0px 8px rgba(var(--color-primary-rgb), 0.7); /* ダークモードのプライマリーカラーRGBを使用 */
}

body.color-dark .background {
  background-image: linear-gradient(180deg, #1e293b, #0f172a 50%, #020617);
}
body.color-dark .background__img {
  opacity: 0.05;
}

/* テキストやリンクの色 */
body.color-dark {
  color: var(--color-glay3);
}
body.color-dark h1,
body.color-dark h2,
body.color-dark h3,
body.color-dark h4,
body.color-dark h5,
body.color-dark h6,
body.color-dark a {
  color: var(--color-primary);
}

/* ★★★【追加】ダークモード時のタイトル文字色を修正 ★★★ */
/* 中編、長編のタイトル（影あり） */
body.color-dark .secondh3, /* 中編タイトル */
body.color-dark .noveltitle {
  color: var(--color-primary);
  text-shadow: var(--text-shadow);
}

/* 話数あり短編のタイトル（影なし） */
body.color-dark .novel-list-item-title span {
  color: var(--color-primary);
  text-shadow: none; /* 影を無効にする */
}

/* 中編・長編の話数リンク */
body.color-dark .novellist__item a {
  color: var(--color-primary);
}

/* 各種パーツの背景色 */
body.color-dark .section {
  background-color: rgba(15, 23, 42, 0.7);
}

/* ダークモードかつ縦書きの時、枠を透明にする */
body.color-dark.view-vertical .section {
  background-color: transparent;
}

body.color-dark .header.fixed {
  background-color: rgba(15, 23, 42, 0.2);
}
body.color-dark .header.fixed::after {
  background-color: rgba(15, 23, 42, 0.6);
}

/* 縦書きタイトルやページ区切り線 */
body.color-dark .noveltitle,
body.color-dark .novelpage__pagination {
  border-color: var(--color-primary);
}
body.color-dark .novelpage__accent {
  background-color: var(--color-primary);
}

/* ボタン類の色 */
body.color-dark #view-settings-button,
body.color-dark a#page-top,
body.color-dark #vertical-pagination, 
body.color-dark .hamburger,
body.color-dark #view-settings-panel {
  background-color: rgba(30, 41, 59, 0.6); /* ダークモード用のボタン背景色 */
}

/* ダークモード時のハンバーガー線の色 */
body.color-dark .hamburger span {
  background-color: var(--color-primary);
}

/* ダークモード時の月の色 */
body.color-dark #view-settings-button::after {
  box-shadow: inset 6px -6px 0 0 var(--color-primary);
}

/* ダークモード時のトップへ戻るボタンの▲の色 */
body.color-dark a#page-top::before {
  color: var(--color-primary);
}

body.color-dark #view-settings-button::before,
body.color-dark a#page-top::after,
body.color-dark #vertical-pagination::before,
body.color-dark #view-settings-panel::before {
  filter: blur(5px); /* ダークモードではぼかしを少し弱める */
}

/* ダーク系テーマ（ダーク、アビス）のボタンの影をリセット */
body.color-dark #view-settings-button,
body.color-dark a#page-top,
body.color-dark #vertical-pagination,
body.theme-abyss #view-settings-button, 
body.theme-abyss a#page-top, 
body.theme-abyss #vertical-pagination {
  box-shadow: none;
}

body.color-dark #vertical-pagination a {
  color: var(--color-primary);
  /* 縦書きページ送りの影を復活 */
  text-shadow: var(--text-shadow);
}

body.color-dark #vertical-pagination .novelpage__back:not(a),
body.color-dark #vertical-pagination .novelpage__next:not(a) {
  color: rgba(138, 195, 208, 0.4); /* ダークモードで押せないボタンの文字色 */
}

/* ダークモード時の表示設定パネルの文字色 */
body.color-dark #view-settings-panel {
  color: var(--color-primary);
}
body.color-dark #close-settings-panel {
  color: var(--color-primary);
}
body.color-dark .view-option-btn {
  color: var(--color-primary);
}

/* ダークモード時の選択中ボタンの背景色をご指定の色に変更 */
body.color-dark .view-option-btn.active {
  background-color: rgba(138, 195, 208, 0.15);
  border-color: rgba(138, 195, 208, 0.4);
}

/* ダークモード時のスライダーのつまみの色 */
body.color-dark input[type="range"]::-webkit-slider-thumb {
  background: var(--color-primary) !important;
}
body.color-dark input[type="range"]::-moz-range-thumb {
  background: var(--color-primary) !important;
}

/* ダークモード時の文字サイズ表示の色 */
body.color-dark #font-size-value {
  color: var(--color-primary);
}

/* ダークモード時の行間表示の色 */
body.color-dark #line-height-value {
  color: var(--color-primary);
}

/* 横書きページ送りのリンクがない部分のスタイル (ライトモード) */
/* bodyにcolor-darkもカスタムテーマもついていない場合 */
body:not(.color-dark):not([class*="theme-"]) .novelpage__pagination .novelpage__back:not(a),
body:not(.color-dark):not([class*="theme-"]) .novelpage__pagination .novelpage__next:not(a) {
  color: var(--color-glay5); /* 目立たないグレー */
  text-shadow: none; /* 影をなくす */
}

/* 横書きページ送りのリンクがない部分のスタイル (ダークモード) */
body.color-dark .novelpage__pagination .novelpage__back:not(a),
body.color-dark .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(var(--color-primary-rgb), 0.4); /* ダークモードのメインカラーの半透明 */
  text-shadow: none; /* 影をなくす */
}

/* 横書きページ送りのリンクがない部分のスタイル (アクアテーマ) */
body.theme-aqua .novelpage__pagination .novelpage__back:not(a),
body.theme-aqua .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(101, 196, 217, 0.4); /* アクアテーマのメインカラーの半透明 */
  text-shadow: none; /* 影をなくす */
}

/* --------------------------------
 * カスタムカラー適用スタイル
 * -------------------------------- */
.novelpage__container.custom-base-color-active {
  color: var(--custom-base-color);
}

/* ダークモード時のカスタム文字色 */
body.color-dark .novelpage__container.custom-base-color-active {
  color: var(--custom-base-color);
}

/* --------------------------------
 * アクアテーマ用のスタイル
 * -------------------------------- */
body.theme-aqua {
  /* アクアテーマの色をここで一括管理します */
  --aqua-main-color: #65C4D9;
  --aqua-text-color: #474747;
  --aqua-button-bg: rgba(101, 196, 217, 0.6);
  --aqua-v-pagination-bg: rgba(190, 231, 227, 0.6);

  --color-main: var(--aqua-main-color); /* グローバルなメインカラー変数を上書き */
  --color-main-rgb: 101, 196, 217; /* グローバルなメインカラーRGB変数を上書き */
  --text-shadow: 0px 0px 8px rgba(101, 196, 217, 0.7); /* アクアテーマのメインカラーRGBを使用 */
  --accent-shadow-color: rgba(101, 196, 217, 0.4);
}

body.theme-aqua .background {
  /* ご指定のグラデーションを再現 */
  background-image: linear-gradient(180deg, rgb(255, 255, 255), rgba(190, 231, 227, 1) 50%, rgba(138, 195, 208, 1));
}
body.theme-aqua .background__img {
  opacity: 0.1; /* ライトモードと同じ */
}

/* テキストやリンクの色 */
body.theme-aqua {
  color: var(--aqua-text-color);
}
body.theme-aqua h1,
body.theme-aqua h2,
body.theme-aqua h3,
body.theme-aqua h4,
body.theme-aqua h5,
body.theme-aqua h6,
body.theme-aqua a,
body.theme-aqua .pagetitle__title,
body.theme-aqua .novel-list-item-title::before,
body.theme-aqua .novel-list-item-arrow,
body.theme-aqua .novel-list-item-chapters a,
body.theme-aqua .novelpage__back,
body.theme-aqua .novelpage__index,
body.theme-aqua .novelpage__next,
/* body.theme-green .novelpage__accent, */ /* この行は後で個別に指定するため一旦コメントアウト */
body.theme-aqua .noveltitle,
body.theme-aqua .menu__link,
body.theme-aqua .menu__subitem::before,
body.theme-aqua .has-submenu::after {
  color: var(--aqua-main-color);
}

/* アクアテーマ時のページ送り区切り線の色 */
body.theme-aqua .novelpage__accent {
  background-color: var(--aqua-main-color);
}

body.theme-aqua .novel-list-item-title a,
body.theme-aqua .novel-list-item-title span {
  color: var(--aqua-text-color);
  border-bottom-color: var(--aqua-main-color);
}

body.theme-aqua .novel-list-item-chapters a {
  border-color: var(--aqua-main-color);
}
body.theme-aqua .novel-list-item-chapters a:hover {
  background-color: var(--aqua-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色など */
body.theme-aqua .section {
  background-color: rgba(255, 255, 255, 0.7); /* ライトモードと同じ */
}
body.theme-aqua.view-vertical .section {
  background-color: transparent;
}

body.theme-aqua .header.fixed::after {
  background-color: rgba(255, 255, 255, 0.6); /* ライトモードと同じ */
}

/* 縦書きタイトルやページ区切り線 */
body.theme-aqua.view-vertical .noveltitle, /* 縦書き時のタイトル */
body.theme-aqua.view-horizontal .noveltitle, /* 横書き時のタイトル */
body.theme-aqua.view-horizontal .novelpage__pagination { /* 横書き時のページ送り */
  border-color: var(--aqua-main-color);
}

/* ボタン類の色 */
body.theme-aqua #view-settings-button, 
body.theme-aqua a#page-top, 
body.theme-aqua .hamburger,
body.theme-aqua #view-settings-panel {
  background-color: var(--aqua-button-bg);
}

body.theme-aqua #vertical-pagination {
  background-color: var(--aqua-v-pagination-bg);
}

/* アクアテーマ時のハンバーガー線の色 */
body.theme-aqua .hamburger span {
  background-color: var(--color-white); /* 背景が明るいので白のままにします */
}

/* アクアテーマ時の選択中ボタンの背景色 */
body.theme-aqua .view-option-btn.active {
  background-color: rgba(255, 255, 255, 0.2); /* ライトモードと同じ */
}

/* アクアテーマ時の縦書きページ送り */
body.theme-aqua #vertical-pagination a { /* 押せるリンク */
  color: var(--aqua-main-color);
  text-shadow: var(--text-shadow); /* アクアテーマのテキストシャドウを適用 */
}

/* アクアテーマ時の押せないページ送りボタン */
body.theme-aqua #vertical-pagination .novelpage__back:not(a),
body.theme-aqua #vertical-pagination .novelpage__next:not(a) {
  color: rgba(101, 196, 217, 0.4); /* アクアテーマのメインカラーの半透明 */
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のアクアテーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  /* アクアテーマ時のハンバーガーメニューの背景色 */
  body.theme-aqua .menu,
  body.theme-aqua .menu::after {
    background-color: var(--aqua-button-bg);
  }

  /* ★★★【修正】アクアテーマのハンバーガーメニュー内文字色を白に統一し、トップメニューの色はテーマカラーに修正 ★★★ */
  /* 1. トップメニューのサブメニュー「-」の色をテーマカラーに戻す */
  body.theme-aqua .topmenu .menu__subitem::before {
    background-color: var(--aqua-main-color);
  }
  /* 2. ハンバーガーメニュー内の文字色をすべて白に統一する */
  body.theme-aqua .menu .menu__link,
  body.theme-aqua .menu .has-submenu,
  body.theme-aqua .menu .has-submenu::after {
    color: var(--color-white);
    text-shadow: none;
  }

  /* 3. ハンバーガーメニュー内のサブメニュー「-」の色を白にする */
  body.theme-aqua .menu .menu__subitem::before {
    background-color: var(--color-white) !important; /* 他の指定を上書きするため!importantを使用 */
  }
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のダークモード時
   ================================================== */
@media screen and (max-width: 1023px) { /* ハンバーガーメニューが表示される画面幅 */
  
  /* ダークモード時のハンバーガーメニューの背景色（すりガラス効果も含む） */
  body.color-dark .menu,
  body.color-dark .menu::after {
    background-color: rgba(30, 41, 59, 0.6); /* 表示設定パネルと同じダーク系の背景色に統一 */
  }

  /* ダークモード時のハンバーガーメニューの文字色と影を統一 */
  body.color-dark .menu__box .menu__item .menu__link { /* Information, Updateなど */
    color: var(--color-primary); /* ダークモード用のリンク色 */
    text-shadow: var(--text-shadow); /* テキストシャドウを適用 */
  }
  body.color-dark .menu__box .menu__item .has-submenu { /* Novelの文字部分 */
    display: inline-flex; /* 影の問題を解決しつつ、矢印を横並びにする */
    color: var(--color-primary); /* ダークモード用のリンク色 */
    text-shadow: var(--text-shadow); /* テキストシャドウを再適用 */
  }

  body.color-dark #vertical-pagination a {
    text-shadow: var(--text-shadow); /* 縦書きページ送りの影を復活 */
  }

  /* ダークモード時のハンバーガーメニューのNovelアコーディオン矢印の色 */
  body.color-dark .menu__box .menu__item .has-submenu::after {
    color: var(--color-primary); /* 他のメニュー項目と統一 */
  }

  body.color-dark .menu__box .menu__submenu .menu__subitem a {
    color: var(--color-primary); /* ダークモード用のリンク色（サブメニュー） */
    text-shadow: none; /* テキストシャドウを削除して背景色の問題を解決 */
  }

  body.color-dark .menu__box .menu__subitem::before {
    background-color: var(--color-primary); /* サブメニューのドットもダークモード色に */
  }
}

/* ==================================================
   PC表示（常に表示されるメニュー）のダークモード時
   ================================================== */
@media screen and (min-width: 1024px) { /* PCメニューが表示される画面幅 */
  body.color-dark .header .menu__link,
  body.color-dark .header .has-submenu,
  body.color-dark .header .menu__submenu .menu__subitem a.menu__link {
    color: var(--color-primary); /* ダークモード用のリンク色 */
    text-shadow: none; /* 白文字用のテキストシャドウを打ち消す */
  }
  body.color-dark .header .menu__subitem::before {
    background-color: var(--color-primary); /* サブメニューのドットもダークモード色に */
  }
  body.theme-luna .header .menu__subitem::before {
    background-color: var(--luna-main-color);
  }
}

/* --------------------------------
 * ノクステーマ用のスタイル
 * -------------------------------- */
body.theme-nox {
  --nox-main-color: #8A7BA3; /* ご指定の薄めの紫 */
  --nox-text-color: #4E4E4E; /* 読みやすいように濃いグレーに変更 */
  --nox-button-bg: rgba(81, 70, 99, 0.6); /* 気に入って頂いたボタン色 */
  --nox-v-pagination-bg: rgba(215, 216, 235, 0.7); /* 縦書きページ送り用の背景色 */
  --color-main: var(--nox-main-color); /* グローバルなメインカラー変数を上書き */
  --color-main-rgb: 138, 123, 163; /* グローバルなメインカラーRGB変数を上書き */

  --text-shadow: 0px 0px 8px rgba(138, 123, 163, 0.7);
  --accent-shadow-color: rgba(138, 123, 163, 0.4);
}
body.theme-nox #koibumi_btn:hover {
  color: var(--color-white);
}



body.theme-nox .background {
  /* くすんだグレイ系のグラデーション */
  background-image: linear-gradient(180deg, #efeef9, #d7d8eb 50%, #a0a2b9);
}
body.theme-nox .background__img {
  opacity: 0.1; /* 他のライトテーマに合わせて調整 */
}

/* テキストやリンクの色 */
body.theme-nox {
  color: var(--nox-text-color);
}
body.theme-nox h1,
body.theme-nox h2,
body.theme-nox h3,
body.theme-nox h4,
body.theme-nox h5,
body.theme-nox h6,
body.theme-nox a,
body.theme-nox .pagetitle__title,
body.theme-nox .novel-list-item-title::before,
body.theme-nox .novel-list-item-arrow,
body.theme-nox .novel-list-item-chapters a,
body.theme-nox .novelpage__back,
body.theme-nox .novelpage__index,
body.theme-nox .novelpage__next,
body.theme-nox .noveltitle,
body.theme-nox .menu__link,
body.theme-nox .menu__subitem::before,
body.theme-nox .has-submenu::after {
  color: var(--nox-main-color);
}

body.theme-nox .novelpage__accent {
  background-color: var(--nox-main-color);
}

body.theme-nox .novel-list-item-title a,
body.theme-nox .novel-list-item-title span {
  color: var(--nox-text-color);
  border-bottom-color: var(--nox-main-color);
}

body.theme-nox .novel-list-item-chapters a {
  border-color: var(--nox-main-color);
}
body.theme-nox .novel-list-item-chapters a:hover {
  background-color: var(--nox-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色など */
body.theme-nox .section {
  background-color: rgba(255, 255, 255, 0.7); /* ライトテーマに合わせて調整 */
}
body.theme-nox.view-vertical .section {
  background-color: transparent;
}

body.theme-nox .header.fixed::after {
  background-color: rgba(255, 255, 255, 0.6); /* ライトテーマに合わせて調整 */
}

/* 縦書きタイトルやページ区切り線 */
body.theme-nox.view-vertical .noveltitle,
body.theme-nox.view-horizontal .novelpage__pagination,
body.theme-nox.view-horizontal .noveltitle {
  border-color: var(--nox-main-color);
}

/* ボタン類の色 */
body.theme-nox #view-settings-button, 
body.theme-nox a#page-top,
body.theme-nox .hamburger,
body.theme-nox #view-settings-panel {
  background-color: var(--nox-button-bg);
}

body.theme-nox #vertical-pagination {
  background-color: var(--nox-v-pagination-bg);
}

/* 縦書きページ送り */
body.theme-nox #vertical-pagination a {
  color: var(--nox-main-color);
  text-shadow: var(--text-shadow);
}

body.theme-nox #vertical-pagination .novelpage__back:not(a),
body.theme-nox #vertical-pagination .novelpage__next:not(a) {
  color: rgba(153, 126, 180, 0.4);
}

/* 横書きページ送りのリンクがない部分のスタイル */
body.theme-nox .novelpage__pagination .novelpage__back:not(a),
body.theme-nox .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(153, 126, 180, 0.4);
  text-shadow: none;
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のノクステーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  body.theme-nox .menu, body.theme-nox .menu::after { background-color: var(--nox-button-bg); }

  /* ★★★【修正】トップメニューの文字色と「-」の色をテーマカラーに戻す ★★★ */
  body.theme-nox .topmenu .menu__link,
  body.theme-nox .topmenu .has-submenu,
  body.theme-nox .topmenu .has-submenu::after,
  body.theme-nox .topmenu .menu__subitem a.menu__link { /* サブメニューのリンクも追加 */
    color: var(--nox-main-color);
  }
  body.theme-nox .topmenu .menu__subitem::before {
    background-color: var(--nox-main-color);
  }

  /* ★★★【修正】ハンバーガーメニュー内の文字色と「-」の色を白に統一する ★★★ */
  body.theme-nox .menu .menu__link,
  body.theme-nox .menu .has-submenu,
  body.theme-nox .menu .has-submenu::after {
    color: var(--color-white);
  }
  body.theme-nox .menu .menu__subitem::before {
    background-color: var(--color-white);
  }
}


/* ==================================================
   PC表示（常に表示されるメニュー）のノクステーマ時
   ================================================== */
@media screen and (min-width: 1024px) { /* PCメニューが表示される画面幅 */
  body.theme-nox .header .menu__subitem::before {
    background-color: var(--nox-main-color);
  }
}

/* --------------------------------
 * ラグーンテーマ用のスタイル
 * -------------------------------- */
body.theme-lagoon {
  --lagoon-main-color: #589ed6; /* 明るい青に戻す */
  --lagoon-text-color: #011d57; /* ご指定の濃い青に変更 */
  --lagoon-button-bg: rgba(0, 93, 211, 0.6); /* 背景の濃い青を半透明にして使用 */
  --lagoon-v-pagination-bg: rgba(0, 93, 211, 0.6); /* ボタンと統一 */
  --color-main: var(--laguna-main-color); /* グローバルなメインカラー変数を上書き */
  --color-main-rgb: 4, 141, 183; /* グローバルなメインカラーRGB変数を上書き */

  --text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8), 0px 0px 10px rgba(255, 255, 255, 0.5); /* 白い光彩を追加 */
  --accent-shadow-color: rgba(88, 158, 214, 0.4); /* 青系の影は維持 */
}

body.theme-lagoon .background {
  /* 光が差し込む水中をイメージしたグラデーション */
  background-image: linear-gradient(180deg, #efeef9, #589ed6 50%, #005dd3);
}
body.theme-lagoon .background__img {
  opacity: 0.1;
}

/* テキストやリンクの色 */
body.theme-lagoon {
  color: var(--lagoon-text-color);
}
body.theme-lagoon h1,
body.theme-lagoon h2,
body.theme-lagoon h3,
body.theme-lagoon h4,
body.theme-lagoon h5,
body.theme-lagoon h6,
body.theme-lagoon a,
body.theme-lagoon .pagetitle__title,
body.theme-lagoon .novel-list-item-title::before,
body.theme-lagoon .novel-list-item-arrow,
body.theme-lagoon .novel-list-item-chapters a,
body.theme-lagoon .novelpage__back,
body.theme-lagoon .novelpage__index,
body.theme-lagoon .novelpage__next,
body.theme-lagoon .noveltitle,
body.theme-lagoon .menu__link,
body.theme-lagoon .menu__subitem::before,
body.theme-lagoon .has-submenu::after,
body.theme-lagoon .sitename {
  color: var(--lagoon-main-color);
  text-shadow: var(--text-shadow); /* 白い光彩を適用 */
}

/* Medium, Longの話数リンクの色を本文と同じ濃い青色に統一する */
body.theme-lagoon .novellist__item a {
  color: var(--lagoon-text-color);
  text-shadow: none; /* 光彩をリセット */
}

body.theme-lagoon .novelpage__accent {
  background-color: var(--lagoon-main-color);
}

body.theme-lagoon .novel-list-item-title a,
body.theme-lagoon .novel-list-item-title span {
  color: var(--lagoon-text-color);
  border-bottom-color: var(--lagoon-main-color);
}

body.theme-lagoon .novel-list-item-chapters a {
  border-color: var(--lagoon-main-color);
}
body.theme-lagoon .novel-list-item-chapters a:hover {
  background-color: var(--lagoon-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色など */
body.theme-lagoon .section {
  background-color: rgba(255, 255, 255, 0.7);
}
body.theme-lagoon.view-vertical .section {
  background-color: transparent;
}

body.theme-lagoon .header.fixed::after {
  background-color: rgba(255, 255, 255, 0.6);
  }

/* 縦書きタイトルやページ区切り線 */
body.theme-lagoon.view-vertical .noveltitle,
body.theme-lagoon.view-horizontal .novelpage__pagination,
body.theme-lagoon.view-horizontal .noveltitle {
  border-color: var(--lagoon-main-color);
}

/* ボタン類の色 */
body.theme-lagoon #view-settings-button, 
body.theme-lagoon a#page-top,
body.theme-lagoon .hamburger,
body.theme-lagoon #view-settings-panel {
  background-color: var(--lagoon-button-bg);
}

body.theme-lagoon #vertical-pagination {
  background-color: var(--lagoon-v-pagination-bg);
}

/* 縦書きページ送り */
body.theme-lagoon #vertical-pagination a {
  color: var(--color-white); /* 文字色を白に変更 */
  text-shadow: none; /* テキストシャドウを削除 */
  opacity: 0.8; /* 少し透明度を下げる */
}

body.theme-lagoon #vertical-pagination .novelpage__back:not(a),
body.theme-lagoon #vertical-pagination .novelpage__next:not(a) {
  color: rgba(255, 255, 255, 0.4);
}

/* 横書きページ送りのリンクがない部分のスタイル */
body.theme-lagoon .novelpage__pagination .novelpage__back:not(a),
body.theme-lagoon .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(255, 255, 255, 0.4); /* 白の半透明を維持 */
  text-shadow: none;
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のラグーンテーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  body.theme-lagoon .menu,
  body.theme-lagoon .menu::after {
    background-color: var(--lagoon-button-bg);
  }

  body.theme-lagoon .menu .menu__link,
  body.theme-lagoon .menu .has-submenu,
  body.theme-lagoon .menu .has-submenu::after {
    color: var(--color-white);
    text-shadow: none;
  }

  /* ハンバーガーメニュー内のサブメニューの文字色を白にする */
  body.theme-lagoon .menu .menu__subitem a.menu__link {
    color: var(--color-white);
    text-shadow: none;
  }

  /* ラグーンテーマのトップメニューのリンク色を調整（スマホ・タブレット） */
  body.theme-lagoon .topmenu .menu__link,
  body.theme-lagoon .topmenu .has-submenu,
  body.theme-lagoon .topmenu .has-submenu::after {
    color: #6EB1E4; /* 少し明るい青色に変更 */
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.7); /* 白い光彩を少し調整 */
  }
  
  /* トップメニューの「-」はテーマカラーに */
  body.theme-lagoon .topmenu .menu__subitem::before {
    background-color: var(--lagoon-main-color);
  }
  /* ハンバーガーメニューの「-」は白に */
  body.theme-lagoon .menu .menu__subitem::before {
    background-color: var(--color-white);
  }
}

/* ==================================================
   PC表示（常に表示されるメニュー）のラグーンテーマ時
   ================================================== */
@media screen and (min-width: 1024px) { /* PCメニューが表示される画面幅 */
  body.theme-lagoon .header .menu__subitem::before {
    background-color: var(--lagoon-main-color);
  }

  /* ラグーンテーマのトップメニューのリンク色を調整 */
  body.theme-lagoon .topmenu .menu__link,
  body.theme-lagoon .topmenu .has-submenu,
  body.theme-lagoon .topmenu .has-submenu::after {
    color: #6EB1E4; /* 少し明るい青色に変更 */
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.7); /* 白い光彩を少し調整 */
  }
}

/* --------------------------------
 * スマホ用の表示調整（ダークモードより優先させるため、一番下に配置）
 * -------------------------------- */
@media screen and (max-width: 767px) {
  /* スマホ用の縦書きページ送りボタンの位置調整 */
  #vertical-pagination {
    bottom: 15px;
  }

  .panel-body {
    padding: 15px 20px; /* スマホでのパネル内余白を少し詰める */
  }

  /* スマホの縦書きモードでのタイトルのアニメーション設定 (ライト・ダーク共通) */
  /* will-changeとtransformで、ブラウザにアニメーションを最適化させ、描画バグを回避する */
  body.view-vertical .noveltitle {
    will-change: opacity, max-width, transform; /* これから変化するプロパティをブラウザに通知 */
    transform: translateZ(0); /* GPUに独立したレイヤーとして認識させるおまじない */
    transition: opacity 0.4s ease, max-width 0.4s ease, padding 0.4s ease, border-width 0.4s ease, flex-basis 0.4s ease, transform 0.4s ease;
  }

  /* スクロール時にタイトルを非表示にするスタイル */
  body.view-vertical .noveltitle.is-scrolled {
    opacity: 0; /* 透明にする */
    pointer-events: none; /* 消えている間はクリックできないように */
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-left-width: 0;
    flex-basis: 0; /* flexアイテムの基準サイズを0に */
    flex-shrink: 1; /* 縮むことを許可 */
  }

  /* ダークモードかつスクロールされた際のスタイルを明示的に指定 */
  body.color-dark.view-vertical .noveltitle.is-scrolled {
    border-color: transparent; /* 枠線の色も透明にする */
  }
}

/* --------------------------------
 * サンゴテーマ用のスタイル
 * -------------------------------- */
body.theme-sango {
  /* サンゴテーマの色をここで一括管理します */
  --sango-main-color: #b88a9f; /* 新しいアクセントカラー */
  --sango-text-color: #474747;
  --sango-button-bg: rgba(202, 184, 217, 0.6);
  --color-main: var(--sango-main-color); /* グローバルなメインカラー変数を上書き */
  --color-main-rgb: 184, 138, 159; /* グローバルなメインカラーRGB変数を上書き */

  --text-shadow: 0px 0px 8px rgba(184, 138, 159, 0.7); /* 新しいメインカラーのRGBを使用 */
  --accent-shadow-color: rgba(224, 181, 211, 0.5); /* 背景色に合わせた薄ピンクの影に変更 */
}
body.theme-sango #koibumi_btn:hover {
  color: var(--color-white);
}


body.theme-sango .background {
  /* グラデーションをより滑らかに、下部の色を淡く変更 */
  background-image: linear-gradient(180deg, #D0CDD8, #E0B5D3 50%, #EAC9D1);
}
body.theme-sango .background__img {
  opacity: 0.1;
}

/* テキストやリンクの色 */
body.theme-sango {
  color: var(--sango-text-color);
}
body.theme-sango h1,
body.theme-sango h2,
body.theme-sango h3,
body.theme-sango h4,
body.theme-sango h5,
body.theme-sango h6,
body.theme-sango a,
body.theme-sango .pagetitle__title,
body.theme-sango .novel-list-item-title::before,
body.theme-sango .novel-list-item-arrow,
body.theme-sango .novel-list-item-chapters a,
body.theme-sango .novelpage__back,
body.theme-sango .novelpage__index,
body.theme-sango .novelpage__next,
body.theme-sango .noveltitle,
body.theme-sango .menu__link,
body.theme-sango .menu__subitem::before,
body.theme-sango .has-submenu::after {
  color: var(--sango-main-color);
}

body.theme-sango .novelpage__accent {
  background-color: var(--sango-main-color);
}

body.theme-sango .novel-list-item-title a,
body.theme-sango .novel-list-item-title span {
  color: var(--sango-text-color);
  border-bottom-color: var(--sango-main-color);
}

body.theme-sango .novel-list-item-chapters a {
  border-color: var(--sango-main-color);
}
body.theme-sango .novel-list-item-chapters a:hover {
  background-color: var(--sango-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色など */
body.theme-sango .section {
  background-color: rgba(255, 255, 255, 0.7);
}
body.theme-sango.view-vertical .section {
  background-color: transparent;
}

body.theme-sango .header.fixed::after {
  background-color: rgba(255, 255, 255, 0.6);
}

/* 縦書きタイトルやページ区切り線 */
body.theme-sango.view-vertical .noveltitle,
body.theme-sango.view-horizontal .novelpage__pagination {
  border-color: var(--sango-main-color);
}

/* ボタン類の色 */
body.theme-sango #view-settings-button, 
body.theme-sango a#page-top,
body.theme-sango #vertical-pagination, 
body.theme-sango .hamburger,
body.theme-sango #view-settings-panel {
  background-color: var(--sango-button-bg);
}

/* サンゴテーマ時の縦書きページ送り */
body.theme-sango #vertical-pagination a { /* 押せるリンク */
  color: var(--sango-main-color);
  text-shadow: var(--text-shadow);
}

/* サンゴテーマの横書きタイトル */
body.theme-sango.view-horizontal .noveltitle,
body.theme-sango.view-horizontal .novelpage__pagination {
  border-color: var(--sango-main-color);
}
/* サンゴテーマ時の押せないページ送りボタン */
body.theme-sango #vertical-pagination .novelpage__back:not(a),
body.theme-sango #vertical-pagination .novelpage__next:not(a) {
  color: rgba(231, 116, 145, 0.4); /* 新しいメインカラーの半透明に変更 */
}

/* 横書きページ送りのリンクがない部分のスタイル (サンゴテーマ) */
body.theme-sango .novelpage__pagination .novelpage__back:not(a),
body.theme-sango .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(231, 116, 145, 0.4); /* 新しいメインカラーの半透明に変更 */
  text-shadow: none;
}

/* サンゴテーマ時の選択中ボタンの背景色 */
body.theme-sango .view-option-btn.active {
  background-color: rgba(255, 255, 255, 0.2);
}

/* サンゴテーマ時のハンバーガー線の色 */
body.theme-sango .hamburger span {
  background-color: var(--color-white);
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のサンゴテーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  /* サンゴテーマ時のハンバーガーメニューの背景色 */
  body.theme-sango .menu,
  body.theme-sango .menu::after {
    background-color: var(--sango-button-bg);
  }

  /* ★★★【修正】サンゴテーマのハンバーガーメニュー内文字色を白に統一 ★★★ */
  body.theme-sango .menu .menu__link,
  body.theme-sango .menu .has-submenu,
  body.theme-sango .menu .has-submenu::after {
    color: var(--color-white);
    text-shadow: none;
  }
  body.theme-sango .menu .menu__subitem::before {
    background-color: var(--color-white);
  }
}

/* ==================================================
   PC表示（常に表示されるメニュー）のサンゴテーマ時
   ================================================== */
@media screen and (min-width: 1024px) { /* PCメニューが表示される画面幅 */
  body.theme-sango .header .menu__link,
  body.theme-sango .header .has-submenu,
  body.theme-sango .header .menu__submenu .menu__subitem a.menu__link {
    color: var(--sango-main-color);
    text-shadow: var(--text-shadow);
  }
  body.theme-sango .header .menu__subitem::before {
    background-color: var(--sango-main-color);
  }
  body.theme-shell .header .menu__subitem::before {
    background-color: var(--shell-main-color);
  }
}

/* --------------------------------
 * シェルテーマ用のスタイル
 * -------------------------------- */
body.theme-shell {
  /* シェルテーマの色をここで一括管理します */
  --shell-main-color: #B099F8;
  --shell-text-color: #474747;
  --shell-button-bg: rgba(215, 202, 255, 0.7);
  --color-main: var(--shell-main-color); /* グローバルなメインカラー変数を上書き */
  --color-main-rgb: 176, 153, 248; /* グローバルなメインカラーRGB変数を上書き */

  --text-shadow: 0px 0px 8px rgba(176, 153, 248, 0.7); /* ラベンダーテーマのメインカラーRGBを使用 */
  --accent-shadow-color: rgba(176, 153, 248, 0.4);
}
body.theme-shell #koibumi_btn:hover {
  color: var(--color-white);
}


body.theme-shell .background {
  /* ご指定の配色でグラデーションを再現 */
  background-image: linear-gradient(180deg, #D0CDD8, #D7CAFF 50%, #B9A5F6);
}
body.theme-shell .background__img {
  opacity: 0.1;
}

/* テキストやリンクの色 */
body.theme-shell {
  color: var(--shell-text-color);
}
body.theme-shell h1,
body.theme-shell h2,
body.theme-shell h3,
body.theme-shell h4,
body.theme-shell h5,
body.theme-shell h6,
body.theme-shell a,
body.theme-shell .pagetitle__title,
body.theme-shell .novel-list-item-title::before,
body.theme-shell .novel-list-item-arrow,
body.theme-shell .novel-list-item-chapters a,
body.theme-shell .novelpage__back,
body.theme-shell .novelpage__index,
body.theme-shell .novelpage__next,
body.theme-shell .noveltitle,
body.theme-shell .menu__link,
body.theme-shell .menu__subitem::before,
body.theme-shell .has-submenu::after {
  color: var(--shell-main-color);
}

body.theme-shell .novelpage__accent {
  background-color: var(--shell-main-color);
}

body.theme-shell .novel-list-item-title a,
body.theme-shell .novel-list-item-title span {
  color: var(--shell-text-color);
  border-bottom-color: var(--shell-main-color);
}

body.theme-shell .novel-list-item-chapters a {
  border-color: var(--shell-main-color);
}
body.theme-shell .novel-list-item-chapters a:hover {
  background-color: var(--shell-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色など */
body.theme-shell .section {
  background-color: rgba(255, 255, 255, 0.7);
}
body.theme-shell.view-vertical .section {
  background-color: transparent;
}

body.theme-shell .header.fixed::after {
  background-color: rgba(255, 255, 255, 0.6);
}

/* 縦書きタイトルやページ区切り線 */
body.theme-shell.view-vertical .noveltitle,
body.theme-shell.view-horizontal .novelpage__pagination,
body.theme-shell.view-horizontal .noveltitle {
  border-color: var(--shell-main-color);
}

/* ボタン類の色 */
body.theme-shell #view-settings-button, 
body.theme-shell a#page-top,
body.theme-shell #vertical-pagination, 
body.theme-shell .hamburger,
body.theme-shell #view-settings-panel {
  background-color: var(--shell-button-bg);
}

/* ラベンダーテーマ時の縦書きページ送り */
body.theme-shell #vertical-pagination a {
  color: var(--shell-main-color);
  text-shadow: var(--text-shadow);
}

body.theme-shell #vertical-pagination .novelpage__back:not(a),
body.theme-shell #vertical-pagination .novelpage__next:not(a) {
  color: rgba(176, 153, 248, 0.4);
}

/* 横書きページ送りのリンクがない部分のスタイル (ラベンダーテーマ) */
body.theme-shell .novelpage__pagination .novelpage__back:not(a),
body.theme-shell .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(176, 153, 248, 0.4);
  text-shadow: none; /* 光彩を消し、他のテーマと設定を統一 */
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のシェルテーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  body.theme-shell .menu,
  body.theme-shell .menu::after {
    background-color: var(--shell-button-bg);
  }

  body.theme-mist .header .menu__subitem::before {
    background-color: var(--mist-main-color);
  }

  /* ★★★【再修正】シェルテーマのトップメニューとハンバーガーメニューの色を修正 ★★★ */
  /* 1. トップメニューの「-」の色をテーマカラーに戻す */
  body.theme-shell .topmenu .menu__subitem::before {
    background-color: var(--shell-main-color);
  }
  /* 2. ハンバーガーメニュー内の文字色を白に統一する */
  body.theme-shell .menu .menu__link,
  body.theme-shell .menu .has-submenu,
  body.theme-shell .menu .has-submenu::after {
    color: var(--color-white);
    text-shadow: none;
  }
  /* 3. ハンバーガーメニュー内の「-」記号の色を白にする */
  body.theme-shell .menu .menu__subitem::before {
    background-color: var(--color-white);
  }
  body.theme-abyss .header .menu__subitem::before {
    background-color: var(--abyss-main-color);
  }

}

/* --------------------------------
 * ミストテーマ用のスタイル
 * -------------------------------- */
body.theme-mist {
  /* ミストテーマの色をここで一括管理します */
  --mist-main-color: #868e96;
  --mist-text-color: #474747;
  --mist-button-bg: rgba(222, 226, 230, 0.7);
  --color-main: var(--mist-main-color); /* グローバルなメインカラー変数を上書き */
  --color-main-rgb: 134, 142, 150; /* グローバルなメインカラーRGB変数を上書き */

  --text-shadow: 0px 0px 8px rgba(134, 142, 150, 0.6); /* 新しいアクセントカラーのRGBを使用 */
  --accent-shadow-color: rgba(134, 142, 150, 0.4);
}
body.theme-mist #koibumi_btn:hover {
  color: var(--color-white);
}


body.theme-mist .background {
  background-image: linear-gradient(180deg, #f8f9fa, #e9ecef 50%, #dee2e6);
}
body.theme-mist .background__img {
  opacity: 0.1;
}

/* テキストやリンクの色 */
body.theme-mist {
  color: var(--mist-text-color);
}
body.theme-mist h1,
body.theme-mist h2,
body.theme-mist h3,
body.theme-mist h4,
body.theme-mist h5,
body.theme-mist h6,
body.theme-mist a,
body.theme-mist .pagetitle__title,
body.theme-mist .novel-list-item-title::before,
body.theme-mist .novel-list-item-arrow,
body.theme-mist .novel-list-item-chapters a,
body.theme-mist .novelpage__back,
body.theme-mist .novelpage__index,
body.theme-mist .novelpage__next,
body.theme-mist .noveltitle,
body.theme-mist .menu__link,
body.theme-mist .menu__subitem::before,
body.theme-mist .has-submenu::after {
  color: var(--mist-main-color);
}

body.theme-mist .novelpage__accent {
  background-color: var(--mist-main-color);
}

body.theme-mist .novel-list-item-title a,
body.theme-mist .novel-list-item-title span {
  color: var(--mist-text-color);
  border-bottom-color: var(--mist-main-color);
}

body.theme-mist .novel-list-item-chapters a {
  border-color: var(--mist-main-color);
}
body.theme-mist .novel-list-item-chapters a:hover {
  background-color: var(--mist-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色など */
body.theme-mist .section {
  background-color: rgba(248, 249, 250, 0.7); /* 背景色に合わせた明るい灰色に */
}
body.theme-mist.view-vertical .section {
  background-color: transparent;
}

body.theme-mist .header.fixed::after {
  background-color: rgba(248, 249, 250, 0.6);
}

/* 縦書きタイトルやページ区切り線 */
body.theme-mist.view-vertical .noveltitle,
body.theme-mist.view-horizontal .novelpage__pagination,
body.theme-mist.view-horizontal .noveltitle {
  border-color: var(--mist-main-color);
}

/* ボタン類の色 */
body.theme-mist #view-settings-button, 
body.theme-mist a#page-top,
body.theme-mist #vertical-pagination, 
body.theme-mist .hamburger,
body.theme-mist #view-settings-panel {
  background-color: var(--mist-button-bg);
}

/* 縦書きページ送り */
body.theme-mist #vertical-pagination a {
  color: var(--mist-main-color);
  text-shadow: var(--text-shadow);
}
body.theme-mist #vertical-pagination .novelpage__back:not(a),
body.theme-mist #vertical-pagination .novelpage__next:not(a) {
  color: rgba(134, 142, 150, 0.4);
}

/* 横書きページ送りのリンクがない部分のスタイル (ミストテーマ) */
body.theme-mist .novelpage__pagination .novelpage__back:not(a),
body.theme-mist .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(134, 142, 150, 0.4);
  text-shadow: none;
}

/* ミストテーマ時の表示設定パネルの文字色 */
body.theme-mist #view-settings-panel,
body.theme-mist #close-settings-panel,
body.theme-mist .view-option-btn,
body.theme-mist #font-size-value,
body.theme-mist #line-height-value {
  color: var(--mist-main-color);
}

body.theme-mist .view-option-btn {
  border-color: rgba(134, 142, 150, 0.5); /* 枠線の色も調整 */
}

body.theme-mist .view-option-btn.active {
  background-color: rgba(134, 142, 150, 0.15);
  border-color: rgba(134, 142, 150, 0.5);
}

/* ミストテーマ時のスライダーのつまみの色 */
body.theme-mist input[type="range"]::-webkit-slider-thumb {
  background: var(--mist-main-color) !important;
}
body.theme-mist input[type="range"]::-moz-range-thumb {
  background: var(--mist-main-color) !important;
}

/* ミストテーマ時のカラーコード入力欄の背景色 */
body.theme-mist input[type="text"].color-code-input {
  background-color: rgba(134, 142, 150, 0.2); /* 背景を少し濃くして白文字を見やすく */
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のミストテーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  body.theme-mist .menu,
  body.theme-mist .menu::after {
    background-color: var(--mist-button-bg);
  }

  body.theme-laguna .header .menu__subitem::before {
    background-color: var(--laguna-main-color);
  }

}

/* --------------------------------
 * アビステーマ用のスタイル
 * -------------------------------- */
body.theme-abyss {
  /* アビステーマの色をここで一括管理します */
  --abyss-main-color: #B2A9DF;
  --abyss-text-color: #c4c4d9;
  --abyss-button-bg: rgba(61, 44, 80, 0.6);
  --color-main: var(--abyss-main-color); /* グローバルなメインカラー変数を上書き */
  --color-main-rgb: 178, 169, 223; /* グローバルなメインカラーRGB変数を上書き */

  --text-shadow: 0px 0px 8px rgba(178, 169, 223, 0.7); /* 新しいアクセントカラーのRGB */
  --accent-shadow-color: rgba(178, 169, 223, 0.4);
}
body.theme-abyss #koibumi_btn:hover {
  color: var(--color-white);
}


body.theme-abyss .background {
  background-image: linear-gradient(180deg, #2E203C, #3d2c50 50%, #1a1221);
}
body.theme-abyss .background__img {
  opacity: 0.05;
}

/* テキストやリンクの色 */
body.theme-abyss {
  color: var(--abyss-text-color);
}
body.theme-abyss h1,
body.theme-abyss h2,
body.theme-abyss h3,
body.theme-abyss h4,
body.theme-abyss h5,
body.theme-abyss h6,
body.theme-abyss a,
body.theme-abyss .pagetitle__title,
body.theme-abyss .novel-list-item-title::before,
body.theme-abyss .novel-list-item-arrow,
body.theme-abyss .novel-list-item-chapters a,
body.theme-abyss .novelpage__back,
body.theme-abyss .novelpage__index,
body.theme-abyss .novelpage__next,
body.theme-abyss .noveltitle,
body.theme-abyss .menu__link,
body.theme-abyss .menu__subitem::before,
body.theme-abyss .has-submenu::after {
  color: var(--abyss-main-color);
}

body.theme-abyss .novelpage__accent {
  background-color: var(--abyss-main-color);
}

body.theme-abyss .novel-list-item-title a,
body.theme-abyss .novel-list-item-title span,
body.theme-abyss .novellist__item a { /* 中編・長編の話数リンクを追加 */
  color: var(--abyss-text-color);
  border-bottom-color: var(--abyss-main-color);
}


body.theme-abyss .novel-list-item-chapters a {
  border-color: var(--abyss-main-color);
}
body.theme-abyss .novel-list-item-chapters a:hover {
  background-color: var(--abyss-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色 */
body.theme-abyss .section {
  background-color: rgba(46, 32, 60, 0.7);
}
body.theme-abyss.view-vertical .section {
  background-color: transparent;
}

body.theme-abyss .header.fixed::after {
  background-color: rgba(46, 32, 60, 0.6);
}

/* 縦書きタイトルやページ区切り線 */
body.theme-abyss.view-vertical .noveltitle,
body.theme-abyss.view-horizontal .novelpage__pagination,
body.theme-abyss.view-horizontal .noveltitle {
  border-color: var(--abyss-main-color);
}

/* ボタン類の色 */
body.theme-abyss #view-settings-button, 
body.theme-abyss a#page-top,
body.theme-abyss #vertical-pagination, 
body.theme-abyss .hamburger,
body.theme-abyss #view-settings-panel {
  background-color: var(--abyss-button-bg);
}

/* アビステーマ時のハンバーガー線の色 */
body.theme-abyss .hamburger span {
  background-color: var(--abyss-main-color);
}

/* アビステーマ時の月の色 */
body.theme-abyss #view-settings-button::after {
  box-shadow: inset 6px -6px 0 0 var(--abyss-main-color);
}

/* アビステーマ時のトップへ戻るボタンの▲の色 */
body.theme-abyss a#page-top::before {
  color: #B2A9DF;
}

/*
 * スマホでの表示ズレバグを回避するため、全テーマでボタンの「すりガラス効果」を無効化
 */
#view-settings-button::before,
a#page-top::after,
#vertical-pagination::before {
  display: none;
}

/* 縦書きページ送り */
body.theme-abyss #vertical-pagination a {
  color: var(--abyss-main-color);
  text-shadow: var(--text-shadow);
}
body.theme-abyss #vertical-pagination .novelpage__back:not(a),
body.theme-abyss #vertical-pagination .novelpage__next:not(a) {
  color: rgba(178, 169, 223, 0.4);
}

/* 横書きページ送りのリンクがない部分のスタイル */
body.theme-abyss .novelpage__pagination .novelpage__back:not(a),
body.theme-abyss .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(178, 169, 223, 0.4);
  text-shadow: none;
}

/*
  Note:
  ボタンの影（box-shadow）は、ダークモードのセクションで
  .color-dark, .theme-abyss を対象にリセット済みです。
  すりガラス効果（::before, ::after）は、このセクションの先頭で無効化済みです。
*/

/* アビステーマ時の表示設定パネルの文字色 */
body.theme-abyss #view-settings-panel,
body.theme-abyss #close-settings-panel,
body.theme-abyss .view-option-btn,
body.theme-abyss #font-size-value,
body.theme-abyss #line-height-value {
  color: var(--abyss-main-color);
}

body.theme-abyss .view-option-btn.active {
  background-color: rgba(178, 169, 223, 0.15);
}

/* アビステーマ時のスライダーのつまみの色 */
body.theme-abyss input[type="range"]::-webkit-slider-thumb {
  background: var(--abyss-main-color) !important;
}
body.theme-abyss input[type="range"]::-moz-range-thumb {
  background: var(--abyss-main-color) !important;
}

/* アビステーマ時のカラーコード入力欄の文字色 */
body.theme-abyss input[type="text"].color-code-input {
  color: var(--abyss-main-color);
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のアビステーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  body.theme-abyss .menu,
  body.theme-abyss .menu::after {
    background-color: var(--abyss-button-bg);
  }

  /* ★★★【修正】トップメニューの文字色と「-」の色をテーマカラーに戻す ★★★ */
  body.theme-abyss .topmenu .menu__link,
  body.theme-abyss .topmenu .has-submenu,
  body.theme-abyss .topmenu .has-submenu::after,
  body.theme-abyss .topmenu .menu__subitem a.menu__link {
    color: var(--abyss-main-color);
    text-shadow: var(--text-shadow);
  }
  body.theme-abyss .topmenu .menu__subitem::before {
    background-color: var(--abyss-main-color);
  }

  /* ハンバーガーメニュー内の文字色はPCと同じルールを継承するため、ここでは指定しない */
}




/* --------------------------------
 * ダスクテーマ用のスタイル
 * -------------------------------- */
body.theme-dusk {
  --dusk-main-color: #6a7a9c; /* メインのリンクや線の色 */
  --dusk-text-color: #474747; /* 本文の基本文字色 */
  --dusk-button-bg: rgba(106, 122, 156, 0.6); /* ボタン類の背景色 */
  --dusk-v-pagination-bg: rgba(193, 201, 227, 0.6); /* 縦書きページ送り背景 */

  --color-main: var(--dusk-main-color); /* グローバルなメインカラー変数を上書き */
  --color-main-rgb: 106, 122, 156; /* グローバルなメインカラーRGB変数を上書き */
  --text-shadow: 0px 0px 8px rgba(106, 122, 156, 0.6);
  --accent-shadow-color: rgba(106, 122, 156, 0.4);
}

body.theme-dusk .background {
  background-image: linear-gradient(180deg, #c1c9e3, #d3cfe5 50%, #f3dbe8);
}
body.theme-dusk .background__img {
  opacity: 0.1;
}

/* テキストやリンクの色 */
body.theme-dusk {
  color: var(--dusk-text-color);
}
body.theme-dusk h1,
body.theme-dusk h2,
body.theme-dusk h3,
body.theme-dusk h4,
body.theme-dusk a, body.theme-dusk .topcatch,
body.theme-dusk .pagetitle__title, body.theme-dusk .sitename, body.theme-dusk .lineh2, body.theme-dusk .lineh3, body.theme-dusk .secondh2, body.theme-dusk .secondh3, body.theme-dusk .novel-list-item-title::before, body.theme-dusk .novel-list-item-arrow, body.theme-dusk .novel-list-item-chapters a, body.theme-dusk .novelpage__back, body.theme-dusk .novelpage__index, body.theme-dusk .novelpage__next, body.theme-dusk .noveltitle, body.theme-dusk .menu__subitem::before, body.theme-dusk .has-submenu, body.theme-dusk .has-submenu::after, body.theme-dusk .update time, body.theme-dusk .update time::after, body.theme-dusk .name-submit-btn, body.theme-dusk #koibumi_btn {
  color: var(--dusk-main-color);
}

body.theme-dusk .novelpage__accent {
  background-color: var(--dusk-main-color);
}

body.theme-dusk .novel-list-item-title a,
body.theme-dusk .novel-list-item-title span {
  color: var(--dusk-text-color);
  border-bottom-color: var(--dusk-main-color);
}

body.theme-dusk .novel-list-item-chapters a {
  border-color: var(--dusk-main-color);
}
body.theme-dusk .novel-list-item-chapters a:hover {
  background-color: var(--dusk-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色など */
body.theme-dusk .section {
  background-color: rgba(255, 255, 255, 0.7);
}
body.theme-dusk.view-vertical .section {
  background-color: transparent;
}

body.theme-dusk .header.fixed::after {
  background-color: rgba(255, 255, 255, 0.6);
}

/* 縦書きタイトルやページ区切り線 */
body.theme-dusk.view-vertical .noveltitle,
body.theme-dusk.view-horizontal .novelpage__pagination,
body.theme-dusk.view-horizontal .noveltitle {
  border-color: var(--dusk-main-color);
}

/* ボタン類の色 */
body.theme-dusk #view-settings-button, 
body.theme-dusk a#page-top, 
body.theme-dusk .hamburger,
body.theme-dusk #view-settings-panel {
  background-color: var(--dusk-button-bg);
}

body.theme-dusk #vertical-pagination {
  background-color: var(--dusk-v-pagination-bg);
}

/* 縦書きページ送り */
body.theme-dusk #vertical-pagination a {
  color: var(--dusk-main-color);
  text-shadow: var(--text-shadow);
}

body.theme-dusk #vertical-pagination .novelpage__back:not(a),
body.theme-dusk #vertical-pagination .novelpage__next:not(a) {
  color: rgba(106, 122, 156, 0.4);
}

/* 横書きページ送りのリンクがない部分のスタイル */
body.theme-dusk .novelpage__pagination .novelpage__back:not(a),
body.theme-dusk .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(106, 122, 156, 0.4);
  text-shadow: none;
}

/* スライダーのつまみの色 */
body.theme-dusk input[type="range"]::-webkit-slider-thumb {
  background: var(--dusk-main-color) !important;
}
body.theme-dusk input[type="range"]::-moz-range-thumb {
  background: var(--dusk-main-color) !important;
}

/* ダスクテーマ時の表示設定パネルの文字色 */
body.theme-dusk #view-settings-panel .view-option-btn {
  color: var(--color-white);
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のダスクテーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  body.theme-dusk .menu,
  body.theme-dusk .menu::after {
    background-color: var(--dusk-button-bg);
  }

  /* ★★★【修正】ダスクテーマのトップメニューとハンバーガーメニューの色を修正 ★★★ */
  /* 1. トップメニューの「-」の色をテーマカラーに戻す */
  body.theme-dusk .topmenu .menu__subitem::before {
    background-color: var(--dusk-main-color);
  }
  /* 2. ハンバーガーメニュー内の文字色を白に統一する */
  body.theme-dusk .menu .menu__link,
  body.theme-dusk .menu .has-submenu,
  body.theme-dusk .menu .has-submenu::after {
    color: var(--color-white);
    text-shadow: none;
  }
  /* 3. ハンバーガーメニュー内の「-」記号の色を白にする */
  body.theme-dusk .menu .menu__subitem::before {
    background-color: var(--color-white);
  }
}

/* ==================================================
   PC表示（常に表示されるメニュー）のダスクテーマ時
   ================================================== */
@media screen and (min-width: 1024px) { /* PCメニューが表示される画面幅 */
  body.theme-dusk .header .menu__link,
  body.theme-dusk .header .has-submenu,
  body.theme-dusk .header .menu__submenu .menu__subitem a.menu__link {
    color: var(--dusk-main-color);
    text-shadow: none;
  }
  body.theme-dusk .header .menu__subitem::before {
    background-color: var(--dusk-main-color);
  }
}

/* --------------------------------
 * ラグナテーマ用のスタイル
 * -------------------------------- */
body.theme-laguna {
  --laguna-main-color: #048db7; /* メインのリンクや線の色 */
  --laguna-text-color: #474747; /* 本文の基本文字色 */
  --laguna-button-bg: rgba(4, 141, 183, 0.6); /* ボタン類の背景色 */
  --laguna-v-pagination-bg: rgba(208, 236, 247, 0.6); /* 縦書きページ送り背景 */

  --text-shadow: 0px 0px 8px rgba(4, 141, 183, 0.6);
  --accent-shadow-color: rgba(4, 141, 183, 0.4);
}

body.theme-laguna .background {
  background-image: linear-gradient(180deg, #e5f4fb, #d0ecf7 50%, #98cfe3);
}
body.theme-laguna .background__img {
  opacity: 0.1;
}

/* テキストやリンクの色 */
body.theme-laguna {
  color: var(--laguna-text-color);
}
body.theme-laguna h1,
body.theme-laguna h2,
body.theme-laguna h3,
body.theme-laguna h4,
body.theme-laguna a,
body.theme-laguna .pagetitle__title, body.theme-laguna .sitename, body.theme-laguna .lineh2, body.theme-laguna .lineh3, body.theme-laguna .secondh2, body.theme-laguna .secondh3, body.theme-laguna .novel-list-item-title::before, body.theme-laguna .novel-list-item-arrow, body.theme-laguna .novel-list-item-chapters a, body.theme-laguna .novelpage__back, body.theme-laguna .novelpage__index, body.theme-laguna .novelpage__next, body.theme-laguna .noveltitle, body.theme-laguna .menu__subitem::before, body.theme-laguna .has-submenu, body.theme-laguna .has-submenu::after {
  color: var(--laguna-main-color);
}

body.theme-laguna .novelpage__accent {
  background-color: var(--laguna-main-color);
}

body.theme-laguna .novel-list-item-title a,
body.theme-laguna .novel-list-item-title span {
  color: var(--laguna-text-color);
  border-bottom-color: var(--laguna-main-color);
}

body.theme-laguna .novel-list-item-chapters a {
  border-color: var(--laguna-main-color);
}
body.theme-laguna .novel-list-item-chapters a:hover {
  background-color: var(--laguna-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色など */
body.theme-laguna .section {
  background-color: rgba(255, 255, 255, 0.7);
}
body.theme-laguna.view-vertical .section {
  background-color: transparent;
}

body.theme-laguna .header.fixed::after {
  background-color: rgba(255, 255, 255, 0.6);
}

/* 縦書きタイトルやページ区切り線 */
body.theme-laguna.view-vertical .noveltitle,
body.theme-laguna.view-horizontal .novelpage__pagination,
body.theme-laguna.view-horizontal .noveltitle {
  border-color: var(--laguna-main-color);
}

/* ボタン類の色 */
body.theme-laguna #view-settings-button, 
body.theme-laguna a#page-top, 
body.theme-laguna .hamburger,
body.theme-laguna #view-settings-panel {
  background-color: var(--laguna-button-bg);
}

body.theme-laguna #vertical-pagination {
  background-color: var(--laguna-v-pagination-bg);
}

/* 縦書きページ送り */
body.theme-laguna #vertical-pagination a {
  color: var(--laguna-main-color);
  text-shadow: var(--text-shadow);
}

body.theme-laguna #vertical-pagination .novelpage__back:not(a),
body.theme-laguna #vertical-pagination .novelpage__next:not(a) {
  color: rgba(4, 141, 183, 0.4);
}

/* 横書きページ送りのリンクがない部分のスタイル */
body.theme-laguna .novelpage__pagination .novelpage__back:not(a),
body.theme-laguna .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(4, 141, 183, 0.4);
  text-shadow: none;
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のラグナテーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  body.theme-laguna .menu,
  body.theme-laguna .menu::after {
    background-color: var(--laguna-button-bg);
  }

  body.theme-laguna .menu__link,
  body.theme-laguna .has-submenu,
  body.theme-laguna .has-submenu::after,
  body.theme-laguna .menu__subitem a.menu__link {
    color: var(--laguna-main-color);
  }

  body.theme-laguna .menu__subitem::before {
    background-color: var(--color-white);
  }
}

/* ==================================================
   PC表示（常に表示されるメニュー）のラグナテーマ時
   ================================================== */
@media screen and (min-width: 1024px) { /* PCメニューが表示される画面幅 */
  body.theme-laguna .header .menu__link,
  body.theme-laguna .header .has-submenu,
  body.theme-laguna .header .menu__submenu .menu__subitem a.menu__link {
    color: var(--laguna-main-color);
    text-shadow: none;
  }
  body.theme-laguna .header .menu__subitem::before {
    background-color: var(--laguna-main-color);
  }
  body.theme-haze .header .menu__subitem::before {
    background-color: var(--haze-main-color);
  }
}

/* ==================================================
   xx.index.html専用のレイアウト調整
   ================================================== */
body.is-private-top #mv {
  margin-bottom: 100px; /* トップの文字とメニューの間の余白。ここの数値を変更すると余白の大きさを調整できます */
}

/* ==================================================
   xx.index.html専用のPC表示レイアウト調整
   ================================================== */
@media screen and (min-width: 1024px) {
  body.is-private-top .mv {
    padding-top: 35px;
    margin-top: 0px;
  }
}

/* --------------------------------
 * コーラルテーマ用のスタイル
 * -------------------------------- */
body.theme-coral {
  --coral-main-color: #E8B4A8; /* 落ち着いたローズピンクをメインカラーに */
  --coral-text-color: #474747; /* 読みやすいダークグレー */
  --coral-button-bg: rgba(239, 203, 182, 0.6); /* #EFCBB6を半透明にして使用 */
  --coral-v-pagination-bg: rgba(239, 203, 182, 0.6); /* ボタンと統一 */

  --color-main: var(--coral-main-color); /* グローバルなメインカラー変数を上書き */
  --color-main-rgb: 232, 180, 168; /* グローバルなメインカラーRGB変数を上書き */
  --coral-main-color-rgb: 232, 180, 168; /* コーラルテーマのRGB値を追加 */
  --text-shadow: 0px 0px 8px rgba(232, 180, 168, 0.7); /* メインカラーのRGBを使用 */
  --box-shadow: 0px 0px 8px 0px rgba(232, 180, 168, 0.5);
  --box-shadow-hover: 0px 0px 15px 3px rgba(232, 180, 168, 0.8);
  --accent-shadow-color: rgba(232, 180, 168, 0.4); /* メインカラーのRGBを使用 */
}

body.theme-coral .name-submit-btn:hover,
body.theme-coral #koibumi_btn:hover {
  color: var(--color-white);
}


body.theme-coral .background {
  /* ご指定の配色でグラデーションを再現 */
  background-image: linear-gradient(180deg, #FFF9ED, #F7D1C4 50%, #E8B4A8);
}
body.theme-coral .background__img {
  opacity: 0.1;
}

/* テキストやリンクの色 */
body.theme-coral {
  color: var(--coral-text-color);
}
body.theme-coral h1,
body.theme-coral h2,
body.theme-coral h3,
body.theme-coral h4,
body.theme-coral h5,
body.theme-coral h6,
body.theme-coral a,
body.theme-coral .pagetitle__title, body.theme-coral .topcatch,
body.theme-coral .novel-list-item-title::before,
body.theme-coral .novel-list-item-arrow,
body.theme-coral .novel-list-item-chapters a,
body.theme-coral .novelpage__back,
body.theme-coral .novelpage__index,
body.theme-coral .novelpage__next,
body.theme-coral .noveltitle,
body.theme-coral .menu__link,
body.theme-coral .menu__subitem::before,
body.theme-coral .has-submenu::after, body.theme-coral .update time, body.theme-coral .update time::after, body.theme-coral .name-submit-btn, body.theme-coral #koibumi_btn,
body.theme-coral .sitename {
  color: var(--coral-main-color);
  text-shadow: var(--text-shadow);
}

body.theme-coral .novelpage__accent {
  background-color: var(--coral-main-color);
}

body.theme-coral .novel-list-item-title a,
body.theme-coral .novel-list-item-title span {
  color: var(--coral-text-color);
  border-bottom-color: var(--coral-main-color);
}

body.theme-coral .novel-list-item-chapters a {
  border-color: var(--coral-main-color);
}
body.theme-coral .novel-list-item-chapters a:hover {
  background-color: var(--coral-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色など */
body.theme-coral .section {
  background-color: rgba(255, 255, 255, 0.7);
}
body.theme-coral.view-vertical .section {
  background-color: transparent;
}

body.theme-coral .header.fixed::after {
  background-color: rgba(255, 255, 255, 0.6);
}

/* 縦書きタイトルやページ区切り線 */
body.theme-coral.view-vertical .noveltitle,
body.theme-coral.view-horizontal .novelpage__pagination,
body.theme-coral.view-horizontal .noveltitle {
  border-color: var(--coral-main-color);
}

/* ボタン類の色 */
body.theme-coral #view-settings-button, 
body.theme-coral a#page-top,
body.theme-coral #vertical-pagination, 
body.theme-coral .hamburger,
body.theme-coral #view-settings-panel {
  background-color: var(--coral-button-bg);
}

/* 縦書きページ送り */
body.theme-coral #vertical-pagination a {
  /* 背景色と文字色が近いため、より明るい色に変更して見やすくする */
  color: #F5E0DA; /* 白を混ぜたような淡いピンク */
  /* 文字をくっきりさせるために、メインカラーで影をつける */
  text-shadow: 0 0 3px var(--coral-main-color), 0 0 5px var(--coral-main-color);
}

/* ハンバーガー線の色 */
body.theme-coral .hamburger span {
  background-color: var(--color-white);
}

/* 縦書きページ送りのリンクがない部分のスタイル */
body.theme-coral #vertical-pagination .novelpage__back:not(a),
body.theme-coral #vertical-pagination .novelpage__next:not(a) {
  color: rgba(232, 180, 168, 0.5); /* メインカラーをさらに半透明にして調整 */
}

/* 横書きページ送りのリンクがない部分のスタイル (コーラルテーマ) */
body.theme-coral .novelpage__pagination .novelpage__back:not(a),
body.theme-coral .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(232, 180, 168, 0.5); /* メインカラーを半透明にして薄くする */
  text-shadow: none; /* 影をなくす */
}

/* Novel Short タブ */
.tab-container {
  margin-top: 30px;
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のコーラルテーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  body.theme-coral .menu,
  body.theme-coral .menu::after {
    background-color: var(--coral-button-bg);
  }

  /* ★★★【修正】トップメニューの文字色と「-」の色をテーマカラーに戻す ★★★ */
  body.theme-coral .topmenu .menu__link,
  body.theme-coral .topmenu .has-submenu,
  body.theme-coral .topmenu .has-submenu::after {
    color: var(--coral-main-color);
  }
  body.theme-coral .topmenu .menu__subitem::before {
    background-color: var(--coral-main-color);
  }

  /* ★★★【修正】ハンバーガーメニュー内の文字色と「-」の色を白に統一する ★★★ */
  body.theme-coral .menu .menu__link,
  body.theme-coral .menu .has-submenu,
  body.theme-coral .menu .has-submenu::after {
    color: var(--color-white);
    text-shadow: none;
  }
  body.theme-coral .menu .menu__subitem::before {
    background-color: var(--color-white);
  }
}


/* --------------------------------
 * タブのスタイル
 * -------------------------------- */

/* デフォルト（基本テーマ）のタブスタイル */
.tab-nav {
  border-bottom: 1px solid var(--color-main);
}
.tab-nav__item a {
  color: var(--color-main);
  border: 1px solid rgba(var(--color-main-rgb), 0.2);
  border-bottom-color: transparent;
  background-color: rgba(var(--color-main-rgb), 0.05);
}
.tab-nav__item.is-active a {
  color: var(--color-white);
  border-color: transparent;
  background-image: linear-gradient(135deg, rgba(var(--color-main-rgb), 0.8), var(--color-main));
  text-shadow: var(--text-shadow);
  box-shadow: 0 1px 5px rgba(var(--color-main-rgb), 0.3), inset 0 0 1px rgba(255,255,255,0.2);
}

/* コーラルテーマのタブスタイル */
body.theme-coral .tab-nav {
  border-bottom: 1px solid var(--coral-main-color);
}
body.theme-coral .tab-nav__item a {
  color: var(--coral-main-color);
  border: 1px solid rgba(var(--coral-main-color-rgb), 0.2);
  border-bottom-color: transparent;
  background-color: rgba(var(--coral-main-color-rgb), 0.05);
}
body.theme-coral .tab-nav__item.is-active a {
  color: var(--color-white);
  border-color: transparent;
  background-image: linear-gradient(135deg, rgba(var(--coral-main-color-rgb), 0.8), var(--coral-main-color));
  text-shadow: var(--text-shadow);
  box-shadow: 0 2px 8px rgba(var(--coral-main-color-rgb), 0.4), inset 0 0 1px rgba(255,255,255,0.2);
}

/* --------------------------------
 * タブの共通レイアウト
 * -------------------------------- */
.tab-nav {
  display: flex;
  flex-wrap: nowrap; /* タブが折り返さないように変更 */
  list-style: none;
  padding: 0;
  margin: 0 0 25px; /* 下の余白を元に戻す */
  overflow-x: auto; /* 横スクロールを有効にする */
  -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかに */
  overscroll-behavior-y: contain; /* 垂直方向のスクロールバウンスを無効化 */
}

/* スクロールバーを非表示にする */
.tab-nav::-webkit-scrollbar {
  display: none;
}
.tab-nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.tab-nav__item {
  margin: 0 5px -1px 0; /* 下線を重ねるためにネガティブマージンを設定 */
  flex-shrink: 0; /* タブが縮まないようにする */
}

.tab-nav__item a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 6px 6px 0 0;
  transition: all .3s;
}

.tab-content {
  display: none;
}
.tab-content.is-show {
  display: block;
}

/* スマホ表示の時だけ、タブを均等配置する */
@media screen and (max-width: 767px) {
  .tab-nav {
    justify-content: space-between;
  }
  .tab-nav__item {
    flex-grow: 1; /* 空きスペースを均等に埋める */
    text-align: center; /* タブ内のテキストを中央揃えに */
  }
}
/* ▼特に画面が狭いスマホでのタブのはみ出し対策
------------------------------------------------*/
/* 画面幅が480px以下のスマートフォンにのみ適用 */
@media screen and (max-width: 480px) {
  .tab-nav__item a {
    padding: 8px 10px; /* タブ内の左右の余白を狭める */
  }
}
/* ==================================================
   PC表示の時のタブの余白調整
   ================================================== */
@media screen and (min-width: 1024px) {
  .tab-nav {
    gap: 15px; /* タブ同士の余白を設定 */
  }
  .tab-nav__item {
    margin-right: 0; /* gapと重複するためリセット */
  }
}

/* ==================================================
   PC表示（常に表示されるメニュー）のコーラルテーマ時
   ================================================== */
@media screen and (min-width: 1024px) { /* PCメニューが表示される画面幅 */
  body.theme-coral .header .menu__subitem::before {
    background-color: var(--coral-main-color);
  }
}

/* ==================================================
   隠しテーマボタンの文字サイズ調整
   ================================================== */
.view-option-btn[data-value="lagoon"],
.view-option-btn[data-value="coral"] {
  font-size: 13px; /* 4文字のボタンだけ文字サイズを少し小さくする */
  padding: 8px 6px; /* 内側の余白を微調整 */
}

/* --------------------------------
 * ヘイズテーマ用のスタイル
 * -------------------------------- */
body.theme-haze {
  --haze-main-color: #938fb2; /* メインのリンクや線の色 */
  --haze-text-color: #474747; /* 本文の基本文字色 */
  --haze-button-bg: rgba(147, 143, 178, 0.6); /* ボタン類の背景色 */
  --haze-v-pagination-bg: rgba(224, 221, 233, 0.6); /* 縦書きページ送り背景 */
  --color-main: var(--haze-main-color); /* グローバルなメインカラー変数を上書き */
  --color-main-rgb: 147, 143, 178; /* グローバルなメインカラーRGB変数を上書き */
  --text-shadow: 0px 0px 8px rgba(147, 143, 178, 0.6);
  --accent-shadow-color: rgba(147, 143, 178, 0.4);
}
body.theme-haze #koibumi_btn:hover {
  color: var(--color-white);
}


body.theme-haze .background {
  background-image: linear-gradient(180deg, #f2f2f4, #e0dde9 50%, #b7bbd7);
}
body.theme-haze .background__img {
  opacity: 0.1;
}

/* テキストやリンクの色 */
body.theme-haze {
  color: var(--haze-text-color);
}
body.theme-haze h1,
body.theme-haze h2,
body.theme-haze h3,
body.theme-haze h4,
body.theme-haze a,
body.theme-haze .pagetitle__title, body.theme-haze .sitename, body.theme-haze .lineh2, body.theme-haze .lineh3, body.theme-haze .secondh2, body.theme-haze .secondh3, body.theme-haze .novel-list-item-title::before, body.theme-haze .novel-list-item-arrow, body.theme-haze .novel-list-item-chapters a, body.theme-haze .novelpage__back, body.theme-haze .novelpage__index, body.theme-haze .novelpage__next, body.theme-haze .noveltitle, body.theme-haze .menu__subitem::before, body.theme-haze .has-submenu, body.theme-haze .has-submenu::after {
  color: var(--haze-main-color);
}

body.theme-haze .novelpage__accent {
  background-color: var(--haze-main-color);
}

body.theme-haze .novel-list-item-title a,
body.theme-haze .novel-list-item-title span {
  color: var(--haze-text-color);
  border-bottom-color: var(--haze-main-color);
}

body.theme-haze .novel-list-item-chapters a {
  border-color: var(--haze-main-color);
}
body.theme-haze .novel-list-item-chapters a:hover {
  background-color: var(--haze-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色など */
body.theme-haze .section {
  background-color: rgba(255, 255, 255, 0.7);
}
body.theme-haze.view-vertical .section {
  background-color: transparent;
}

body.theme-haze .header.fixed::after {
  background-color: rgba(255, 255, 255, 0.6);
}

/* 縦書きタイトルやページ区切り線 */
body.theme-haze.view-vertical .noveltitle,
body.theme-haze.view-horizontal .novelpage__pagination,
body.theme-haze.view-horizontal .noveltitle {
  border-color: var(--haze-main-color);
}

/* ボタン類の色 */
body.theme-haze #view-settings-button, 
body.theme-haze a#page-top, 
body.theme-haze .hamburger,
body.theme-haze #view-settings-panel {
  background-color: var(--haze-button-bg);
}

body.theme-haze #vertical-pagination {
  background-color: var(--haze-v-pagination-bg);
}

/* 縦書きページ送り */
body.theme-haze #vertical-pagination a {
  color: var(--haze-main-color);
  text-shadow: var(--text-shadow);
}

body.theme-haze #vertical-pagination .novelpage__back:not(a),
body.theme-haze #vertical-pagination .novelpage__next:not(a) {
  color: rgba(147, 143, 178, 0.4);
}

/* 横書きページ送りのリンクがない部分のスタイル */
body.theme-haze .novelpage__pagination .novelpage__back:not(a),
body.theme-haze .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(147, 143, 178, 0.4);
  text-shadow: none;
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のヘイズテーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  body.theme-haze .menu,
  body.theme-haze .menu::after {
    background-color: var(--haze-button-bg);
  }

  /* ★★★【修正】ヘイズテーマのトップメニューとハンバーガーメニューの色を修正 ★★★ */
  /* 1. トップメニューの「-」の色をテーマカラーに戻す */
  body.theme-haze .topmenu .menu__subitem::before {
    background-color: var(--haze-main-color);
  }
  /* 2. ハンバーガーメニュー内の文字色を白に統一する */
  body.theme-haze .menu .menu__link,
  body.theme-haze .menu .has-submenu,
  body.theme-haze .menu .has-submenu::after {
    color: var(--color-white);
    text-shadow: none;
  }
  /* 3. ハンバーガーメニュー内の「-」記号の色を白にする */
  body.theme-haze .menu .menu__subitem::before {
    background-color: var(--color-white);
  }
}

/* ==================================================
   PC表示（常に表示されるメニュー）のヘイズテーマ時
   ================================================== */
@media screen and (min-width: 1024px) { /* PCメニューが表示される画面幅 */
  body.theme-haze .header .menu__link,
  body.theme-haze .header .has-submenu,
  body.theme-haze .header .menu__submenu .menu__subitem a.menu__link {
    color: var(--haze-main-color);
    text-shadow: none;
  }
  body.theme-haze .header .menu__subitem::before {
    background-color: var(--haze-main-color);
  }
}

/* --------------------------------
 * ルナテーマ用のスタイル
 * -------------------------------- */
body.theme-luna {
  --luna-main-color: #c7b88a; /* メインのリンクや線の色 */
  --luna-text-color: #474747; /* 本文の基本文字色 */
  --luna-button-bg: rgba(199, 184, 138, 0.6); /* ボタン類の背景色 */
  --luna-v-pagination-bg: rgba(242, 236, 217, 0.6); /* 縦書きページ送り背景 */
  --color-main: var(--luna-main-color);
  --color-main-rgb: 199, 184, 138;
  --text-shadow: 0px 0px 8px rgba(199, 184, 138, 0.6);
  --accent-shadow-color: rgba(199, 184, 138, 0.4);
}
body.theme-luna .background {
  background-image: linear-gradient(180deg, #f7f5e9, #f2ecd7 50%, #e6dcb5);
}
body.theme-luna,
body.theme-luna .novel-list-item-title a,
body.theme-luna .novel-list-item-title span {
  color: var(--luna-text-color);
}
body.theme-luna h1, body.theme-luna h2, body.theme-luna h3, body.theme-luna h4, body.theme-luna a, body.theme-luna .pagetitle__title, body.theme-luna .sitename, body.theme-luna .lineh2, body.theme-luna .lineh3, body.theme-luna .secondh2, body.theme-luna .secondh3, body.theme-luna .novel-list-item-title::before, body.theme-luna .novel-list-item-arrow, body.theme-luna .novel-list-item-chapters a, body.theme-luna .novelpage__back, body.theme-luna .novelpage__index, body.theme-luna .novelpage__next, body.theme-luna .noveltitle, body.theme-luna .menu__subitem::before, body.theme-luna .has-submenu, body.theme-luna .has-submenu::after {
  color: var(--luna-main-color);
}
body.theme-luna .novelpage__accent,
body.theme-luna .lineh2::before, body.theme-luna .lineh2::after, body.theme-luna .list li::before {
  background-color: var(--luna-main-color);
}
body.theme-luna .novel-list-item-title a, body.theme-luna .novel-list-item-title span,
body.theme-luna.view-vertical .noveltitle, body.theme-luna.view-horizontal .novelpage__pagination, body.theme-luna.view-horizontal .noveltitle {
  border-color: var(--luna-main-color);
}
body.theme-luna #view-settings-button, body.theme-luna a#page-top, body.theme-luna .hamburger, body.theme-luna #view-settings-panel {
  background-color: var(--luna-button-bg);
}
body.theme-luna #vertical-pagination {
  background-color: var(--luna-v-pagination-bg);
}
body.theme-luna #vertical-pagination a {
  color: var(--luna-main-color);
  text-shadow: var(--text-shadow);
}
body.theme-luna #vertical-pagination .novelpage__back:not(a), body.theme-luna #vertical-pagination .novelpage__next:not(a),
body.theme-luna .novelpage__pagination .novelpage__back:not(a), body.theme-luna .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(199, 184, 138, 0.4);
  text-shadow: none;
}
@media screen and (max-width: 1023px) {
  body.theme-luna .menu, body.theme-luna .menu::after { background-color: var(--luna-button-bg); }
  body.theme-luna .menu .menu__link,
  body.theme-luna .menu .has-submenu,
  body.theme-luna .menu .has-submenu::after {
    color: var(--color-white);
    text-shadow: none;
  }

  /* ハンバーガーメニュー内のサブメニューの文字色を白にする */
  body.theme-luna .menu .menu__subitem a.menu__link {
    color: var(--color-white);
    text-shadow: none;
  }

  /* トップメニューの「-」はテーマカラーに */
  body.theme-luna .topmenu .menu__subitem::before {
    background-color: var(--luna-main-color);
  }
  /* ハンバーガーメニューの「-」は白に */
  body.theme-luna .menu .menu__subitem::before {
    background-color: var(--color-white);
  }
}
@media screen and (min-width: 1024px) {
  body.theme-luna .header .menu__link, body.theme-luna .header .has-submenu, body.theme-luna .header .menu__submenu .menu__subitem a.menu__link { color: var(--luna-main-color); text-shadow: none; }
  body.theme-luna .header .menu__subitem::before { background-color: var(--luna-main-color); }
}

/* --------------------------------
 * ノクステーマ用のスタイル
 * -------------------------------- */
body.theme-nox {
  --nox-main-color: #8A7BA3; /* ご指定の薄めの紫 */
  --nox-text-color: #4E4E4E; /* 本文の基本文字色 */
  --nox-button-bg: rgba(81, 70, 99, 0.6); /* ボタン類の背景色 */
  --nox-v-pagination-bg: rgba(215, 216, 235, 0.7); /* 縦書きページ送り背景 */
  --color-main: var(--nox-main-color);
  --color-main-rgb: 138, 123, 163;
  --text-shadow: 0px 0px 8px rgba(138, 123, 163, 0.7);
  --accent-shadow-color: rgba(138, 123, 163, 0.4);
}
body.theme-nox .background {
  background-image: linear-gradient(180deg, #efeef9, #d7d8eb 50%, #a0a2b9);
}
body.theme-nox,
body.theme-nox .novel-list-item-title a,
body.theme-nox .novel-list-item-title span {
  color: var(--nox-text-color);
}
body.theme-nox h1, body.theme-nox h2, body.theme-nox h3, body.theme-nox h4, body.theme-nox a, body.theme-nox .pagetitle__title, body.theme-nox .sitename, body.theme-nox .lineh2, body.theme-nox .lineh3, body.theme-nox .secondh2, body.theme-nox .secondh3, body.theme-nox .novel-list-item-title::before, body.theme-nox .novel-list-item-arrow, body.theme-nox .novel-list-item-chapters a, body.theme-nox .novelpage__back, body.theme-nox .novelpage__index, body.theme-nox .novelpage__next, body.theme-nox .noveltitle, body.theme-nox .menu__subitem::before, body.theme-nox .has-submenu, body.theme-nox .has-submenu::after {
  color: var(--nox-main-color);
}
body.theme-nox .novelpage__accent,
body.theme-nox .lineh2::before, body.theme-nox .lineh2::after, body.theme-nox .list li::before {
  background-color: var(--nox-main-color);
}
body.theme-nox .novel-list-item-title a, body.theme-nox .novel-list-item-title span,
body.theme-nox.view-vertical .noveltitle, body.theme-nox.view-horizontal .novelpage__pagination, body.theme-nox.view-horizontal .noveltitle {
  border-color: var(--nox-main-color);
}
body.theme-nox #view-settings-button, body.theme-nox a#page-top, body.theme-nox .hamburger, body.theme-nox #view-settings-panel {
  background-color: var(--nox-button-bg);
}
body.theme-nox #vertical-pagination {
  background-color: var(--nox-v-pagination-bg);
}
body.theme-nox #vertical-pagination a {
  color: var(--nox-main-color);
  text-shadow: var(--text-shadow);
}
body.theme-nox #vertical-pagination .novelpage__back:not(a), body.theme-nox #vertical-pagination .novelpage__next:not(a),
body.theme-nox .novelpage__pagination .novelpage__back:not(a), body.theme-nox .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(153, 126, 180, 0.4);
  text-shadow: none;
}
@media screen and (max-width: 1023px) {
  body.theme-nox .menu, body.theme-nox .menu::after { background-color: var(--nox-button-bg); }
  body.theme-nox .menu__link, body.theme-nox .has-submenu, body.theme-nox .has-submenu::after, body.theme-nox .menu__subitem a.menu__link { color: var(--color-white); }
  body.theme-nox .menu__subitem::before { background-color: var(--color-white); }
}
@media screen and (min-width: 1024px) {
  body.theme-nox .header .menu__link, body.theme-nox .header .has-submenu, body.theme-nox .header .menu__submenu .menu__subitem a.menu__link { color: var(--nox-main-color); text-shadow: none; }
  body.theme-nox .header .menu__subitem::before { background-color: var(--nox-main-color); }
}

/* --------------------------------
 * ラグーンテーマ用のスタイル
 * -------------------------------- */
body.theme-lagoon {
  --lagoon-main-color: #589ed6; /* メインのリンクや線の色 */
  --lagoon-text-color: #011d57; /* 本文の基本文字色 */
  --lagoon-button-bg: rgba(0, 93, 211, 0.6); /* ボタン類の背景色 */
  --lagoon-v-pagination-bg: rgba(0, 93, 211, 0.6); /* 縦書きページ送り背景 */
  --color-main: var(--lagoon-main-color);
  --color-main-rgb: 88, 158, 214;
  --text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8), 0px 0px 10px rgba(255, 255, 255, 0.5);
  --accent-shadow-color: rgba(88, 158, 214, 0.4);
}
body.theme-lagoon .background {
  background-image: linear-gradient(180deg, #efeef9, #589ed6 50%, #005dd3);
}
body.theme-lagoon,
body.theme-lagoon .novel-list-item-title a,
body.theme-lagoon .novel-list-item-title span {
  color: var(--lagoon-text-color);
}
body.theme-lagoon h1, body.theme-lagoon h2, body.theme-lagoon h3, body.theme-lagoon h4, body.theme-lagoon a, body.theme-lagoon .pagetitle__title, body.theme-lagoon .sitename, body.theme-lagoon .lineh2, body.theme-lagoon .lineh3, body.theme-lagoon .secondh2, body.theme-lagoon .secondh3, body.theme-lagoon .novel-list-item-title::before, body.theme-lagoon .novel-list-item-arrow, body.theme-lagoon .novel-list-item-chapters a, body.theme-lagoon .novelpage__back, body.theme-lagoon .novelpage__index, body.theme-lagoon .novelpage__next, body.theme-lagoon .noveltitle, body.theme-lagoon .menu__subitem::before, body.theme-lagoon .has-submenu, body.theme-lagoon .has-submenu::after {
  color: var(--lagoon-main-color);
  text-shadow: var(--text-shadow);
}
body.theme-lagoon .novelpage__accent,
body.theme-lagoon .lineh2::before, body.theme-lagoon .lineh2::after, body.theme-lagoon .list li::before {
  background-color: var(--lagoon-main-color);
}
body.theme-lagoon .novel-list-item-title a, body.theme-lagoon .novel-list-item-title span,
body.theme-lagoon.view-vertical .noveltitle, body.theme-lagoon.view-horizontal .novelpage__pagination, body.theme-lagoon.view-horizontal .noveltitle {
  border-color: var(--lagoon-main-color);
}
body.theme-lagoon #view-settings-button, body.theme-lagoon a#page-top, body.theme-lagoon .hamburger, body.theme-lagoon #view-settings-panel {
  background-color: var(--lagoon-button-bg);
}
body.theme-lagoon #vertical-pagination {
  background-color: var(--lagoon-v-pagination-bg);
}
body.theme-lagoon #vertical-pagination a {
  color: var(--color-white);
  text-shadow: none;
  opacity: 0.8;
}
body.theme-lagoon #vertical-pagination .novelpage__back:not(a), body.theme-lagoon #vertical-pagination .novelpage__next:not(a),
body.theme-lagoon .novelpage__pagination .novelpage__back:not(a), body.theme-lagoon .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(255, 255, 255, 0.4);
  text-shadow: none;
}
@media screen and (max-width: 1023px) {
  body.theme-lagoon .menu, body.theme-lagoon .menu::after { background-color: var(--lagoon-button-bg); }
  body.theme-lagoon .menu__link, body.theme-lagoon .has-submenu, body.theme-lagoon .has-submenu::after, body.theme-lagoon .menu__subitem a.menu__link { color: var(--lagoon-main-color); }
  body.theme-lagoon .menu__subitem::before { background-color: var(--color-white); }
}
@media screen and (min-width: 1024px) {
  body.theme-lagoon .header .menu__link, body.theme-lagoon .header .has-submenu, body.theme-lagoon .header .menu__submenu .menu__subitem a.menu__link { color: var(--lagoon-main-color); text-shadow: none; }
  body.theme-lagoon .header .menu__subitem::before { background-color: var(--lagoon-main-color); }
}

/* --------------------------------
 * セピアテーマ用のスタイル (新)
 * -------------------------------- */
body.theme-sepia {
  --sepia-main-color: #957e80; /* メインのリンクや線の色 */
  --sepia-text-color: #474747; /* 本文の基本文字色 */
  --sepia-button-bg: rgba(149, 126, 128, 0.6); /* ボタン類の背景色 */
  --sepia-v-pagination-bg: rgba(239, 195, 189, 0.6); /* 縦書きページ送り背景 */
  --color-main: var(--sepia-main-color); /* グローバルなメインカラー変数を上書き */
  --color-main-rgb: 149, 126, 128; /* グローバルなメインカラーRGB変数を上書き */

  --text-shadow: 0px 0px 8px rgba(149, 126, 128, 0.6);
  --accent-shadow-color: rgba(149, 126, 128, 0.4);
}
body.theme-sepia #koibumi_btn:hover {
  color: var(--color-white);
}


body.theme-sepia .background {
  background-image: linear-gradient(180deg, #f5e8cf, #efc3bd 50%, #efc3bd);
}
body.theme-sepia .background__img {
  opacity: 0.1;
}

/* テキストやリンクの色 */
body.theme-sepia {
  color: var(--sepia-text-color);
}
body.theme-sepia h1,
body.theme-sepia h2,
body.theme-sepia h3,
body.theme-sepia h4,
body.theme-sepia a,
body.theme-sepia .pagetitle__title, body.theme-sepia .sitename, body.theme-sepia .lineh2, body.theme-sepia .lineh3, body.theme-sepia .secondh2, body.theme-sepia .secondh3, body.theme-sepia .novel-list-item-title::before, body.theme-sepia .novel-list-item-arrow, body.theme-sepia .novel-list-item-chapters a, body.theme-sepia .novelpage__back, body.theme-sepia .novelpage__index, body.theme-sepia .novelpage__next, body.theme-sepia .noveltitle, body.theme-sepia .menu__subitem::before, body.theme-sepia .has-submenu, body.theme-sepia .has-submenu::after {
  color: var(--sepia-main-color);
}

body.theme-sepia .novelpage__accent {
  background-color: var(--sepia-main-color);
}

body.theme-sepia .novel-list-item-title a,
body.theme-sepia .novel-list-item-title span {
  color: var(--sepia-text-color);
  border-bottom-color: var(--sepia-main-color);
}

body.theme-sepia .novel-list-item-chapters a {
  border-color: var(--sepia-main-color);
}
body.theme-sepia .novel-list-item-chapters a:hover {
  background-color: var(--sepia-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色など */
body.theme-sepia .section {
  background-color: rgba(255, 255, 255, 0.7);
}
body.theme-sepia.view-vertical .section {
  background-color: transparent;
}

body.theme-sepia .header.fixed::after {
  background-color: rgba(255, 255, 255, 0.6);
}

/* 縦書きタイトルやページ区切り線 */
body.theme-sepia.view-vertical .noveltitle,
body.theme-sepia.view-horizontal .novelpage__pagination,
body.theme-sepia.view-horizontal .noveltitle {
  border-color: var(--sepia-main-color);
}

/* ボタン類の色 */
body.theme-sepia #view-settings-button, 
body.theme-sepia a#page-top, 
body.theme-sepia .hamburger,
body.theme-sepia #view-settings-panel {
  background-color: var(--sepia-button-bg);
}

body.theme-sepia #vertical-pagination {
  background-color: var(--sepia-v-pagination-bg);
}

/* 縦書きページ送り */
body.theme-sepia #vertical-pagination a {
  color: var(--sepia-main-color);
  text-shadow: var(--text-shadow);
}

body.theme-sepia #vertical-pagination .novelpage__back:not(a),
body.theme-sepia #vertical-pagination .novelpage__next:not(a) {
  color: rgba(149, 126, 128, 0.4);
}

/* 横書きページ送りのリンクがない部分のスタイル */
body.theme-sepia .novelpage__pagination .novelpage__back:not(a),
body.theme-sepia .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(149, 126, 128, 0.4);
  text-shadow: none;
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のセピアテーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  body.theme-sepia .menu,
  body.theme-sepia .menu::after {
    background-color: var(--sepia-button-bg);
  }

  body.theme-sepia .menu__subitem::before {
    background-color: var(--color-white);
  }

  /* ★★★【修正】セピアテーマのハンバーガーメニュー内文字色を白に統一し、トップメニューの色はテーマカラーに修正 ★★★ */
  /* 1. トップメニューのサブメニュー「-」の色をテーマカラーに戻す */
  body.theme-sepia .topmenu .menu__subitem::before {
    background-color: var(--sepia-main-color);
  }
  /* 2. ハンバーガーメニュー内の文字色をすべて白に統一する */
  body.theme-sepia .menu .menu__link,
  body.theme-sepia .menu .has-submenu,
  body.theme-sepia .menu .has-submenu::after {
    color: var(--color-white);
    text-shadow: none; /* 白文字用の影が不要な場合は追加 */
  }
}

/* ==================================================
   PC表示（常に表示されるメニュー）のセピアテーマ時
   ================================================== */
@media screen and (min-width: 1024px) { /* PCメニューが表示される画面幅 */
  body.theme-sepia .header .menu__link,
  body.theme-sepia .header .has-submenu,
  body.theme-sepia .header .menu__submenu .menu__subitem a.menu__link {
    color: var(--sepia-main-color);
    text-shadow: none;
  }
  body.theme-sepia .header .menu__subitem::before {
    background-color: var(--sepia-main-color);
  }
}

/* --------------------------------
 * ルナテーマ用のスタイル
 * -------------------------------- */
body.theme-luna {
  --luna-main-color: #997eb4; /* 少し明るめのくすみ紫 */
  --luna-text-color: #474747; /* シェルと同じ文字色 */
  --luna-button-bg: rgba(153, 126, 180, 0.6); /* メインカラーに合わせた半透明色 */
  --luna-v-pagination-bg: rgba(224, 221, 233, 0.7); /* 縦書きページ送り用の背景色 */
  --color-main: var(--luna-main-color); /* グローバルなメインカラー変数を上書き */
  --color-main-rgb: 153, 126, 180; /* グローバルなメインカラーRGB変数を上書き */
  --text-shadow: 0px 0px 8px rgba(153, 126, 180, 0.6);
  --accent-shadow-color: rgba(153, 126, 180, 0.4);
}
body.theme-luna #koibumi_btn:hover {
  color: var(--color-white);
}


body.theme-luna .background {
  /* 淡いグラデーションを適用 */
  background-image: linear-gradient(180deg, #D0CDD8, #D7CAFF 50%, #D7CAFF);
}
body.theme-luna .background__img {
  opacity: 0.1;
}

/* テキストやリンクの色 */
body.theme-luna {
  color: var(--luna-text-color);
}
body.theme-luna h1,
body.theme-luna h2,
body.theme-luna h3,
body.theme-luna h4,
body.theme-luna h5,
body.theme-luna h6,
body.theme-luna a,
body.theme-luna .pagetitle__title,
body.theme-luna .novel-list-item-title::before,
body.theme-luna .novel-list-item-arrow,
body.theme-luna .novel-list-item-chapters a,
body.theme-luna .novelpage__back,
body.theme-luna .novelpage__index,
body.theme-luna .novelpage__next,
body.theme-luna .noveltitle,
body.theme-luna .menu__link,
body.theme-luna .menu__subitem::before,
body.theme-luna .has-submenu::after {
  color: var(--luna-main-color);
}

body.theme-luna .novelpage__accent {
  background-color: var(--luna-main-color);
}

body.theme-luna .novel-list-item-title a,
body.theme-luna .novel-list-item-title span {
  color: var(--luna-text-color);
  border-bottom-color: var(--luna-main-color);
}

body.theme-luna .novel-list-item-chapters a {
  border-color: var(--luna-main-color);
}
body.theme-luna .novel-list-item-chapters a:hover {
  background-color: var(--luna-main-color);
  color: var(--color-white);
}

/* 各種パーツの背景色など */
body.theme-luna .section {
  background-color: rgba(255, 255, 255, 0.7);
}
body.theme-luna.view-vertical .section {
  background-color: transparent;
}

body.theme-luna .header.fixed::after {
  background-color: rgba(255, 255, 255, 0.6);
}

/* 縦書きタイトルやページ区切り線 */
body.theme-luna.view-vertical .noveltitle,
body.theme-luna.view-horizontal .novelpage__pagination,
body.theme-luna.view-horizontal .noveltitle {
  border-color: var(--luna-main-color);
}

/* ボタン類の色 */
body.theme-luna #view-settings-button, 
body.theme-luna a#page-top,
body.theme-luna .hamburger,
body.theme-luna #view-settings-panel {
  background-color: var(--luna-button-bg);
}

body.theme-luna #vertical-pagination {
  background-color: var(--luna-v-pagination-bg);
}

/* 縦書きページ送り */
body.theme-luna #vertical-pagination a {
  color: var(--luna-main-color);
  text-shadow: var(--text-shadow);
}

body.theme-luna #vertical-pagination .novelpage__back:not(a),
body.theme-luna #vertical-pagination .novelpage__next:not(a) {
  color: rgba(153, 126, 180, 0.4);
}

/* 横書きページ送りのリンクがない部分のスタイル */
body.theme-luna .novelpage__pagination .novelpage__back:not(a),
body.theme-luna .novelpage__pagination .novelpage__next:not(a) {
  color: rgba(153, 126, 180, 0.4);
  text-shadow: none;
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のルナテーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  body.theme-luna .menu,
  body.theme-luna .menu::after {
    background-color: var(--luna-button-bg);
  }

  body.theme-luna .menu__link,
  body.theme-luna .has-submenu,
  body.theme-luna .has-submenu::after,
  body.theme-luna .menu__subitem a.menu__link {
    color: var(--luna-main-color);
  }

  body.theme-luna .menu__subitem::before {
    background-color: var(--color-white);
  }
}

/* ==================================================
   PC表示（常に表示されるメニュー）のルナテーマ時
   ================================================== */
@media screen and (min-width: 1024px) { /* PCメニューが表示される画面幅 */
  body.theme-luna .header .menu__subitem::before {
    background-color: var(--luna-main-color);
  }
}
/* --------------------------------
 * コイブミフォームのカスタムスタイル
 * -------------------------------- */
/* フォーム全体を縦並びにする */
#koibumi_wrap {
  display: flex;
  flex-direction: column;
  width: 100%; /* 横幅を親要素に合わせる */
  margin: 0; /* 元々あった余白をリセット */
}

/* テキストエリアと送信ボタンのコンテナ */
#koibumi_form {
  display: flex;
  flex-direction: column; /* 要素を縦に並べる */
  width: 100%;
}

/* 送信ボタン */
#koibumi_btn {
  align-self: flex-start; /* 左寄せにする */
  margin-top: 10px; /* テキストエリアとの間隔を空ける */
}
.prof {
  /* PC表示時に画像と右側の要素を上揃えにする */
  align-items: flex-start;
}

#koibumi_wrap {
  width: 100%; /* 横幅を100%に */
  max-width: 400px; /* PCでの最大幅を指定 */
  margin-top: 30px;
}

/* Informationセクションの注意事項リストの上の余白を調整 */
#information .list {
  margin-top: 30px; /* 30pxの余白に設定 */
}

/* スマホ表示の時だけ、プロフィール画像を非表示にする */
@media screen and (max-width: 767px) {
  .prof__img {
    display: none;
  }
}

/* ==================================================
   xx.index.html専用 スマホ表示のレイアウト調整
   ================================================== */
@media screen and (max-width: 767px) {
  /* サイトタイトルとキャッチコピーの間を広げる */
  body.is-private-top .topcatch {
    margin-top: 30px; /* この数値を変更すると余白の大きさを調整できます */
  }
}

/* 隠し要素のスタイル */
.is-hidden {
  display: none;
}

/* パスワードフォームのスタイル */
.password-form {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  align-items: center;
  justify-content: center;
}

.password-form input[type="password"] {
  padding: 8px 12px;
  border: 1px solid var(--color-main);
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8);
}

.password-form button {
  padding: 8px 20px;
  font-size: 14px;
}

/* ★★★ 修正箇所 ★★★ */
/* 縦書きページ送りを表示させる */
body.view-vertical #vertical-pagination {
    display: flex;
}
/* ==================================================
   各テーマの名前入力欄・コイブミの背景色
   ================================================== */

/* アクア */
body.theme-aqua input.names0,
body.theme-aqua #koibumi_text {
  background-color: rgba(101, 196, 217, 0.5);
}

/* サンゴ */
body.theme-sango input.names0,
body.theme-sango #koibumi_text {
  background-color: rgba(184, 138, 159, 0.5);
}

/* シェル */
body.theme-shell input.names0,
body.theme-shell #koibumi_text {
  background-color: rgba(176, 153, 248, 0.5);
}

/* ダスク */
body.theme-dusk input.names0,
body.theme-dusk #koibumi_text {
  background-color: rgba(106, 122, 156, 0.5);
}

/* ミスト */
body.theme-mist input.names0,
body.theme-mist #koibumi_text {
  background-color: rgba(134, 142, 150, 0.5);
}

/* アビス */
body.theme-abyss input.names0,
body.theme-abyss #koibumi_text {
  background-color: rgba(178, 169, 223, 0.5);
}
/* ==================================================
   ラグナテーマ用のスタイル
   ================================================== */

body.theme-laguna {
  --color-main: var(--laguna-main-color);
  --color-main-rgb: 4, 141, 183;
}

body.theme-laguna,
body.theme-laguna .novel-list-item-title a,
body.theme-laguna .novel-list-item-title span {
  color: var(--laguna-text-color);
}

body.theme-laguna h1,
body.theme-laguna h2,
body.theme-laguna h3,
body.theme-laguna h4,
body.theme-laguna a,
body.theme-laguna .pagetitle__title,
body.theme-laguna .sitename,
body.theme-laguna .lineh2,
body.theme-laguna .lineh3,
body.theme-laguna .secondh2,
body.theme-laguna .secondh3,
body.theme-laguna .novel-list-item-title::before,
body.theme-laguna .novel-list-item-arrow,
body.theme-laguna .novel-list-item-chapters a,
body.theme-laguna .novelpage__back,
body.theme-laguna .novelpage__index,
body.theme-laguna .novelpage__next,
body.theme-laguna .noveltitle,
body.theme-laguna .menu__subitem::before,
body.theme-laguna .has-submenu,
body.theme-laguna .has-submenu::after,
body.theme-laguna .update time,
body.theme-laguna .update time::after,
body.theme-laguna .name-submit-btn,
body.theme-laguna #koibumi_btn {
  color: var(--laguna-main-color);
}

body.theme-laguna .novelpage__accent,
body.theme-laguna .lineh2::before,
body.theme-laguna .lineh2::after,
body.theme-laguna .list li::before {
  background-color: var(--laguna-main-color);
}

body.theme-laguna .novel-list-item-title a,
body.theme-laguna .novel-list-item-title span,
body.theme-laguna.view-vertical .noveltitle,
body.theme-laguna.view-horizontal .novelpage__pagination,
body.theme-laguna.view-horizontal .noveltitle,
body.theme-laguna .novel-list-item-chapters a,
body.theme-laguna .password-form input[type="password"] {
  border-color: var(--laguna-main-color);
}

body.theme-laguna .name-submit-btn:hover,
body.theme-laguna #koibumi_btn:hover,
body.theme-laguna .novel-list-item-chapters a:hover {
  background-color: var(--laguna-main-color);
  color: var(--color-white);
}

body.theme-laguna input.names0,
body.theme-laguna #koibumi_text {
  background-color: rgba(4, 141, 183, 0.5);
}

/* ==================================================
   スマホ表示（ハンバーガーメニュー）のラグナテーマ時
   ================================================== */
@media screen and (max-width: 1023px) {
  /* ★★★【修正】トップメニューの文字色と「-」の色をテーマカラーに戻す ★★★ */
  body.theme-laguna .topmenu .menu__link,
  body.theme-laguna .topmenu .has-submenu,
  body.theme-laguna .topmenu .has-submenu::after,
  body.theme-laguna .topmenu .menu__subitem a.menu__link {
    color: var(--laguna-main-color);
  }
  body.theme-laguna .topmenu .menu__subitem::before {
    background-color: var(--laguna-main-color);
  }

  /* ★★★【修正】ハンバーガーメニュー内の文字色と「-」の色を白に統一する ★★★ */
  body.theme-laguna .menu .menu__link,
  body.theme-laguna .menu .has-submenu,
  body.theme-laguna .menu .has-submenu::after,
  body.theme-laguna .menu .menu__subitem a.menu__link {
    color: var(--color-white);
    text-shadow: none;
  }
  body.theme-laguna .menu .menu__subitem::before {
    background-color: var(--color-white);
  }
}