/* コメントボックス全体 */
.comment-section-wrapper {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  padding: 1rem;
  max-width: 700px;
  margin: 1.5rem auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* タブボタンエリア */
.comment-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.comment-tab {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
  transition: all 0.2s ease;
}

.comment-tab:hover {
  background: #f0f8fa;
}

.comment-tab.active {
  background: #dff7f9;
  border-color: #12b7b4;
  color: #12b7b4;
}

/* 切り替えタブの中身 */
/* タブ切替 */
.comment-tab-content {
  transition: all 0.3s ease;
}
.comment-tab-content.hidden {
  display: none !important;
}
.comment-tab-content.active {
  display: block;
}

/* 並び替えボタン */
#toggle-order {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 10px;
  color: #333;
  transition: all 0.2s ease;
}
#toggle-order:hover {
  background: #eefafa;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .user-action-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* スライドメニュー全体 */
/* モーダル開時に背景のスクロールを防ぐ */
html:has(#slide-menu.open) {
  overflow: hidden;
}

/* スライドバーの初期スタイル */
#slide-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background: #f8f9fa;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  transition: right 0.3s ease;
  z-index: 99999;
  overflow-y: auto;
  border-left: 2px solid #ccc;
}

#slide-menu.open {
  right: 0;
}

/* ヘッダー部分 */
.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #12b7b4;
  color: #fff;
}

.menu-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.menu-header button {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
}

/* 目次リスト全体 */
#novel-list {
  padding: 10px 0;
  margin: 0;
}

/* 各セクション（親ターム） */
#novel-list > li {
  border-top: 1px solid #ddd;
  padding: 12px 16px;
}

#novel-list > li:first-child {
  border-top: none;
}

/* 親タームリンク + 補助文言 */
.term-link-wrapper {
  display: block;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  text-decoration: none;
  transition: background 0.2s;
}
.term-link-wrapper:hover {
  background: #eef9ff;
}
.term-link-title {
  font-weight: bold;
  font-size: 14px;
  color: #007acc;
}
.term-link-subtext {
  font-size: 11px;
  color: #888;
}

#novel-list > li > ul {
  margin-top: 8px;
  padding-left: 0;
  list-style: none;
}

/* 投稿一覧（子） */
#novel-list li ul li {
  padding: 4px 0;
}

#novel-list li ul li a {
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
  padding: 4px 8px;
  display: block;
  border-radius: 4px;
}

#novel-list li ul li a:hover {
  background: #e6f8f8;
}

/* 現在のページ */
#novel-list li.current-post a {
  background: #d8f8ff;
  color: #12b7b4;
  font-weight: bold;
}

/* モバイル用 */
@media screen and (max-width: 768px) {
  #slide-menu {
    right: -100%;
  }
#novel-list{
  margin-bottom:75px;
}
}

/* 縦書きの場合のスタイル */
/* ▼ 本体ラッパー：縦書き全体 */
#type-works.vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  overflow-x: auto;           /* 横スクロール */
  overflow-y: hidden;
  white-space: nowrap;        /* 中の要素を横並びに */
  height: 85vh;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

/* ▼ 本文ブロック：1カラム分 */
#type-works.vertical .entry-content {
  display: inline-block;
  white-space: normal;       /* 縦書きで折り返しを許可 */
  height: 80vh;
  vertical-align: top;
  max-width: 90vw;
  box-sizing: border-box;
}

.horizontal {
    writing-mode: horizontal-tb;
    /* 横書き */
    text-orientation: mixed; 
    /* 文字の向きを混合 */
    overflow: auto; 
    /* 縦横両方向のオーバーフローを自動でスクロール */
    max-height: none; 
    /* 最大高さを設定しない */
}

@media screen and (max-width: 768px) { 
    /* スマートフォン向け */
    .vertical {
        max-width: 100%; 
        /* 画面幅に合わせる */
        max-height: 90vh; 
        /* 高さを画面の90%に設定 */
        overflow-y: auto;
        /* 縦スクロールを有効にする */
        overflow-x: auto; 
        /* 横スクロールを有効にする */
        padding: 10px; 
        /* パディングを追加 */
        box-sizing: border-box;
        /* パディングを含む幅を計算 */
    }

    .horizontal {
        width: 100%; 
        /* 横書きの場合も画面幅に合わせる */
        max-height: none; 
        /* 最大高さの設定を解除 */
        overflow: auto; 
        /* 縦横両方向のオーバーフローを自動でスクロール */
    }
}

.horizontal .novel_custom {
    display: none;
}

/*フォントスタイル*/
.type-gothic{
  font-family: 'Noto Sans JP', sans-serif;
}
.type-mincho{
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-style: normal;
}

span.category,span.category a{
	font-size:15px;
	color:#12b7b4;
}

/* ▼ 本文ページング */
.smart-pagination {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  font-family: system-ui, sans-serif;
  flex-wrap: wrap;
}

.smart-pagination a {
  display: flex;
  align-items: center; /* 矢印と本文を縦中央揃え */
  padding: 1rem;
  text-decoration: none;
  color: #007acc;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.1);
  transition: background 0.2s ease;
  flex: 1 1 48%;
  box-sizing: border-box;
}

.smart-pagination a:hover {
  background: rgba(0,168,255,0.1);
}

/* 右（prev）は矢印→テキスト */
.smart-pagination .prev {
  flex-direction: row; /* ← 元に戻す */
  justify-content: flex-end; /* ← コンテンツを右に寄せる */
  align-items: center;
  text-align: right;
}


/* 左（next）はテキスト→矢印 */
.smart-pagination .next {
  flex-direction: row; /* ← 元に戻す */
  justify-content: flex-start; /* ← コンテンツを右に寄せる */
  align-items: center;
  text-align: left;
}

/* 矢印 */
.smart-pagination .arrow {
  font-size: 1.4rem;
  opacity: 0.7;
  flex-shrink: 0;
}

.smart-pagination .next .arrow {
  margin-right: 0.6em; /* ← テキストとの隙間 */
}
.smart-pagination .prev .arrow {
  margin-left: 0.6em;
}

/* テキストブロック */
.smart-pagination .next .text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ← テキスト内部も左寄せ */
  text-align: left;
}

.smart-pagination .prev .text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* ← テキスト内部も右寄せ */
  text-align: right;
}

.smart-pagination .label {
  font-size: 0.75rem;
  color: #555;
}

.smart-pagination .title {
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1.4;
  word-break: break-word;
  white-space: normal;
}

@media screen and (max-width: 768px) {
  .smart-pagination {
    flex-direction: row;  /* ← 横並びにする */
    gap: 0.5rem;          /* モバイルではやや狭めに */
  }

  .smart-pagination .next {
    order: 0;  /* 表示順は通常通り */
  }

  .smart-pagination .prev,
  .smart-pagination .next {
    flex-direction: row;
  }

  /* 文字サイズ少し下げてもOKなら追加 */
  .smart-pagination .label,
  .smart-pagination .title {
    font-size: 0.85rem;
  }

  .smart-pagination a {
    padding: 0.6rem 0.8rem; /* 高さも抑える */
  }
}

/**ページタイトル上の作品タイトル**/
.child-term-title {
  font-size: 13px;
  color: #777;
  margin: 10px 0 8px;
  text-align: center;
  opacity: 0.75;
  font-style: italic;
}

/* ポップアップ共通スタイル */
.popup-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  width: 360px;
  max-width: 90%;
  padding: 20px;
  border-radius: 8px;
  display: none;
  font-family: system-ui, sans-serif;
  color: #333;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.popup-header h3 {
  margin: 0;
  font-size: 18px;
  color: #007acc;
}

.popup-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.popup-section {
  margin-bottom: 15px;
}

.popup-section label {
  font-size: 14px;
  font-weight: bold;
  display: block;
  margin-bottom: 6px;
}

.font-size-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.font-size-controls button {
  background: #e0f7fa;
  border: 1px solid #00bcd4;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  color: #007acc;
}

.font-size-controls span {
  font-size: 14px;
  min-width: 50px;
  text-align: center;
}

#bgColorSelect {
  width: 100%;
  padding: 6px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#toggleOrientation {
  background: #dff7f9;
  border: 1px solid #12b7b4;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #12b7b4;
  width: 100%;
  box-sizing: border-box;
}

/**コメントスタイル**/
/* ネタバレ部分 */
.spoiler{
  display: none;
  margin-top: 5px;
  font-size: 14px;
  background-color: #fff8f8;
  padding: 8px 12px;
  border-radius: 6px;
}
.spoiler.visible{
  background: transparent;
  color: inherit;
}

/* コメントリスト（見出し除く） */
.commentlist {
  padding: 0;
  list-style: none;
  margin-top: 0;
}
.commentlist li {
  border-top: 1px solid #eee;
  padding: 10px 15px;
  font-size: 14px;
}
.commentlist li:first-child {
  border-top: none;
}

.comment-reply-title{
	margin:0;
}
.comment-tab-content #submit{
	background-color:#12B7B4;
}

/* コメントリスト */
.commentlist{
  list-style: none;
  padding: 0;
  margin: 1.5em 0;
}

/* 各コメント本体 */
.comment{
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #fdfefe;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 子コメント */
.children{
  margin-top: 12px;
  margin-left: 20px;
  padding-left: 15px;
  border-left: 2px solid #d0eaf2;
}

/* コメント投稿者 */
.comment-author{
  font-weight: bold;
  color: #007acc;
  margin-bottom: 4px;
  font-size: 15px;
}
.comment-author a{
  color: #007acc;
  text-decoration: none;
}

/* コメント日付 */
.comment-meta{
  font-size: 13px;
  color: #777;
  margin-bottom: 8px;
}

.spoiler-label{
  background: #ffe4e4;
  color: #a00;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 5px;
}

/* コメント本文 */
.comment-text{
  font-size: 15px;
  color: #222;
  line-height: 1.6;
}

/* ネタバレコメント */
.spoiler-text{
  margin-top: 5px;
  font-size: 14px;
  color: #222;
  background-color: #fff8f8;
  padding: 6px 10px;
  border-radius: 4px;
}
.comment-text .spoiler.visible{
  color: #222;
}

/* モバイル対応 */
@media screen and (max-width: 600px) {
.comment{
    padding: 12px;
  }
.comment-text{
    font-size: 14px;
  }
}

/**投稿画面ページネーション**/
.comment-pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.comment-pagination ul {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment-pagination li a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #007acc;
  background-color: #fff;
  transition: background-color 0.3s, color 0.3s;
}

.comment-pagination li.active a {
  background-color: #007acc;
  color: #fff;
  font-weight: bold;
  pointer-events: none;
}

.comment-pagination li a:hover {
  background-color: #e6f0fa;
}