/* キャプション */
.caption {
  background-color:  var(--back); /* グレー */
  border-radius: 10px; /* 角丸 */
  padding: 20px; /* 内側の余白（任意） */
  color: var(--text-color); 
  font-size: 0.9em; /* 小さめ */
}


/* 名前変換用 */
/* テキスト入力フィールド */
input {
  padding: 12px;
  font-size: 16px;
  border: 1px solid var(--pale-text-color); /* 薄いグレー枠 */
  border-radius: 6px;
  outline: none;
  background-color: var(--back); /* 背景を薄いグレー */
  color: var(--text-color); /* テキストカラー */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* スムーズな変化 */
}

/* フォーカス時のスタイル */
input:focus {
  border-color: var(--accent); /* アクセントカラー（赤） */
  box-shadow: 0 0 6px rgba(209, 28, 44, 0.3); /* アクセントカラーの光沢 */
}

/* 送信ボタンのコンテナ */
.submit {
  display: flex;
  gap: 15px; /* ボタン間の間隔 */
  margin-top: 15px;
    margin-left: 15px;
}

/* ボタンの共通スタイル */
#enterYZ1,
#deleteYZ1 {
  padding: 5px 10px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid var(--accent); /* アクセントカラーの枠 */
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease; /* ホバー時の滑らかな変化 */
}

/* OKボタン */
#enterYZ1 {
  background-color: var(--accent); /* 赤背景 */
  color: var(--white-text-color); /* 白テキスト */
}

/* OKボタンのホバーエフェクト */
#enterYZ1:hover {
  background-color: var(--hover); /* 濃い赤 */
  border-color: var(--hover);
}

/* NGボタン */
#deleteYZ1 {
  background-color: var(--btn-bg-color); /* 白背景 */
  color: var(--accent); /* 赤テキスト */
}

/* NGボタンのホバーエフェクト */
#deleteYZ1:hover {
  background-color: var(--hover); 
  color: var(--white-text-color); 
  border-color: var(--hover);
}

/* ▼▼小説一覧装飾 */

/* カテゴリ名 */
.novel-list .categorylink {
  background-color: var(--accent); 
  padding: 5px 10px;
  font-size: 0.9em;
  font-weight: 600;
  border-radius: 100px;
  transition: all 0.3s ease; 
  }
  
 .novel-list .categorylink:hover {
  background-color: var(--hover); 
  border-color: var(--hover);
}

.novel-list {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45em 0.7em;
	margin: 0.8em auto;
	padding: 0.8em 1em;
	border-radius: 15px;
	background-color: #fff;
	color: var(--text-color);
}

/* 小説タイトル */
.novel-list .novel-title {
	flex-basis: 100%;
	color: var(--accent);
	font-size: 1.05em;
	font-weight: bold;
	line-height: 1.5;
	text-decoration: none;
}

/* タイトルのホバー */
.novel-list .novel-title:hover {
	color: var(--hover);
}

/* カテゴリ */
.novel-list a:not(.novel-title) {
	display: inline-block;
	padding: 0.2em 0.65em;
	border-radius: 999px;
	background-color: var(--accent);
	color: var(--white-text-color);
	font-size: 0.8em;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.4;
}

/* 日付・文字数 */
.novel-list .novel-day,
.novel-list .novel-mojisu {
	color: var(--pale-text-color);
	font-size: 0.8em;
	white-space: nowrap;
}

/* タグ */
.novel-list .taglink {
	color: var(--text-color);
	font-size: 0.7em;
	text-decoration: none;
}

.novel-list .taglink:hover {
	color: var(--accent);
}