@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/*******************************************************************************
 * 1. サイト全体・固定ページの設定
 *******************************************************************************/

/* 全ての固定ページのタイトルを非表示 */
.page .entry-title {
  display: none;
}

/* 固定ページの投稿日・更新日エリアを非表示 */
.type-page .date-tags,
.type-page .post-date,
.type-page .post-update {
    display: none !important;
}

/* メインコンテンツの外側の背景を透明化 */
.main { background-color: transparent; }

/* 全体のフォントを明朝体に設定 */
body {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
}

/*******************************************************************************
 * 2. ブログ（耳せん記事）・共通パーツの装飾
 *******************************************************************************/

/* 投稿ページ（ブログ）専用の装飾 */
.single-post .main {
  background-color: #fcf5e5;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
  border-radius: 2px;
  padding: 30px;
  color: #4b3d33;
}

/* 投稿ページ内の見出し装飾 */
.single-post .article h2 {
  background: none;
  border-top: 1px solid #d2b48c;
  border-bottom: 1px solid #d2b48c;
  color: #8b4513;
  text-align: left;
  padding: 15px 0;
  margin-top: 40px;
}

/* 「投稿ページ」と「トップページ（記事一覧）」の文字色 */
.single-post, .home {
    color: #4b3d33;
}

/* 記事タイトルの装飾（上下二重線風） */
.entry-title {
    padding: 30px 0 !important;
    border-top: 1px solid #d2b48c !important;
    border-bottom: 1px solid #d2b48c !important;
    position: relative;
}
.entry-title::before {
    content: "";
    position: absolute;
    top: 5px; left: 0; right: 0; bottom: 5px;
    border-top: 0.5px solid rgba(210, 180, 140, 0.5);
    border-bottom: 0.5px solid rgba(210, 180, 140, 0.5);
    pointer-events: none;
}

/* 記事一覧のアイキャッチを角丸にする */
.entry-card-thumb img {
    border-radius: 12px;
    object-fit: cover;
}

/* カテゴリーラベルを角丸にする */
#main .cat-label {
    border-radius: 9px !important;
    padding: 3px 10px !important;
    left: 5px !important;
    top: 5px !important;
}

/* サイドバーの見出し：左側に二重線アクセント */
.sidebar h3 {
    background: none !important;
    border-left: 5px double #d2b48c !important;
    padding: 5px 15px !important;
    color: #5d4037 !important;
    font-weight: bold;
    border-bottom: 1px ridge #eee !important;
}

/* リスト間のキラキラ線 */
.sidebar .widget_recent_entries ul li,
.sidebar .widget_archive ul li,
.sidebar .widget_nav_menu ul li,
.widget_categories ul li {
    list-style: none !important;
    border-bottom: 1.5px dotted transparent !important;
    border-image: radial-gradient(#d2b48c 20%, transparent 25%) 1;
    background-image: linear-gradient(to right, transparent, #e6c27a, #d2b48c, #e6c27a, transparent);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 10px 0 !important;
    margin: 0 !important;
}
.sidebar ul li:last-child, .widget_categories ul li:last-child {
    background-image: none !important;
    border: none !important;
}

/* 検索ブロックの装飾 */
.wp-block-search__button {
    background-color: #ba7373 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 15px !important;
    transition: all 0.3s ease !important;
}
.wp-block-search__button:hover {
    background-color: #a0522d !important;
    transform: translateY(-1px);
}
.wp-block-search__input {
    border: 1px solid #d2b48c !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
}

/* プロフィールボックス（古い手紙風） */
.author-box {
  background-color: #fdfaf2 !important;
  border: 1px solid #d2b48c !important;
  padding: 20px !important;
  color: #4b3d33 !important;
}
.author-box .author-name {
  text-align: center;
  color: #8b4513 !important;
  border-bottom: 1px dotted #d2b48c;
  padding-bottom: 5px;
}
.author-thumb img { border-radius: 50%; border: 3px solid #fff; }

/* プロフィール内SNSボタン（シーリングスタンプ風） */
.author-box .sns-follow-buttons a.follow-button {
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  border-radius: 50% !important;
  background-color: #ba7373 !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease;
}
.author-box .sns-follow-buttons a.follow-button:hover {
  background-color: #a0522d !important;
  transform: translateY(-2px);
}

/* SNS共有ボタン：正円に強制固定 */
.sns-share-buttons a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  background-color: #ba7373 !important;
  padding: 0 !important;
}
.sns-share-buttons a .button-caption,
.sns-share-buttons a .share-count { display: none !important; }

/* カテゴリー非表示設定 */
.widget_categories .cat-item-7, .widget_categories .cat-item-6,
.widget_categories .cat-item-8, .widget_categories .cat-item-10,
.widget_categories .cat-item-9, .widget_categories .cat-item-1
{ display: none !important; }

/* カテゴリー絵文字装飾 */
.widget_categories ul li a::before {
    display: inline-block;
    margin-right: 8px;
    filter: sepia(0.8) contrast(0.8);
}
.cat-item-11 a::before { content: "\1F442"; } /* 難聴 */
.cat-item-13 a::before { content: "\1F58B"; } /* 漫画 */
.cat-item-12 a::before { content: "\1F9F6"; } /* 編み物 */
.cat-item-15 a::before { content: "\1F343"; } /* 🍃 */

/* アーカイブ（一覧）ページのタイトル装飾 */
.archive-title i, .archive-title .fa { display: none !important; }
.archive-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 0 !important;
    color: #5d4037 !important;
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    border-image: linear-gradient(to right, transparent, #d2b48c, #e6c27a, #d2b48c, transparent) 1 !important;
}
.archive-title::before {
    content: var(--category-emoji) !important;
    display: inline-block !important;
    filter: sepia(0.8) saturate(0.8) !important;
    font-family: serif !important;
}
.category-11 { --category-emoji: "\1F442"; }
.category-12 { --category-emoji: "\1F9F6"; }
.category-13 { --category-emoji: "\1F58B"; }
.category-15 { --category-emoji: "\1F343"; }

/* アーカイブページのタイトル横にあるアイコン（フォルダ等）を完全に消去 */
.archive-title i, 
.archive-title .fa, 
.archive-title [class*="fa-"],
.archive-title .category-icon {
    display: none !important;
}

/* タイトル内の擬似要素（Cocoonが生成するもの）もリセット */
.archive-title::before {
    /* 以前設定した「絵文字変数」のみを表示するように上書き */
    content: var(--category-emoji) !important;
    margin-right: 10px;
    font-family: serif !important;
}

/* 念のため、見出し内のスパン要素などに隠れているアイコンも対象にする */
.archive-title span i {
    display: none !important;
}


/* 記事下カテゴリーエリアの装飾 */
.entry-categories .fa-folder { display: none !important; }
.entry-categories a {
    background-color: rgba(210, 180, 140, 0.1) !important;
    color: #5d4037 !important;
    border: 1px solid #d2b48c !important;
    padding: 2px 8px !important;
    font-size: 0.9em;
}

/* 日付とアイコンの色調整 */
.post-date, .post-update, .date-tags { color: #8b4513 !important; font-size: 0.9em !important; }
.post-date i, .post-update i, .fa-clock, .fa-history { color: #8b4513 !important; }

/* 記事一覧のスニペット（…more演出） */
.entry-card-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    color: #5d4037 !important;
}
.entry-card-snippet::after {
    content: " …more" !important;
    position: absolute;
    bottom: 0; right: 0;
    background: linear-gradient(to right, transparent, #fcf5e5 40%);
    color: #ba7373 !important;
    font-weight: bold;
}

/* グローバルメニュー（アンティーク・ナビ） */
#navi {
  font-family: "Yu Mincho", serif !important;
  border-top: 1px solid #B8860B;
  border-bottom: 1px solid #B8860B;
}
#navi .navi-in a {
  display: flex !important;
  padding: 12px 20px !important;
  color: #3C2F2F !important;
  background: linear-gradient(to bottom, rgba(184, 134, 11, 0.05), rgba(184, 134, 11, 0.15), rgba(184, 134, 11, 0.05)) !important;
  border-right: 1px solid rgba(184, 134, 11, 0.2) !important;
}

/* 名前変換フォーム画像のエフェクト */
img[src*="hpfb-nameform"] {
    opacity: 0.3 !important;
    filter: brightness(1.2) sepia(0.2) !important;
    mix-blend-mode: multiply;
    transition: opacity 0.4s ease;
}
img[src*="hpfb-nameform"]:hover { opacity: 0.7 !important; }

/*******************************************************************************
 * 3. 夢小説サイト専用設定
 *******************************************************************************/

/* Velloriaカテゴリー（スラッグ: velloria）の背景設定 */
body.category-velloria {
  background-image: url("https://nanchoumimisen.com/wp-content/uploads/2025/08/velloria-bg.jpg") !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}


/* 小説本文「羊皮紙」ボックス */
.novel-page {
  background-color: rgba(245, 240, 230, 0.5);
  border: 1px solid #BFA16B;
  padding: 40px;
  border-radius: 8px;
  max-width: 800px;
  margin: 40px auto;
  line-height: 1.8;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.novel-page p { margin-bottom: 1.2em; text-indent: 0; }
.novel-page a { color: #BFA16B; text-decoration: underline; }

/* キャラクター見出し */
.char-heading {
  font-size: 1.4em;
  border-left: 4px solid #d9cbbf;
  padding-left: 0.5em;
  margin: 1.5em 0 0.8em;
  color: #333;
}

/* 小説一覧カード設定 */
.novel-grid { display: flex; flex-wrap: wrap; gap: 1em; justify-content: flex-start; }
.novel-card {
  position: relative; /* バッジを右上に固定するために必要 */
  border: 0.2px solid #d9cbbf;
  background: rgba(255, 248, 240, 0.5);
  flex: 0 0 350px;
  padding: 1em;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 小説タイトル */
.novel-title { 
  font-weight: bold; 
  font-size: 1.1em; 
  color: #333; 
  border-bottom: 1px solid #555; 
  display: inline-block; 
  margin-right: 0.5em; 
}

/* 【修正箇所】NEWバッジを強制的に赤くする */
.new-badge { 
  position: absolute !important; 
  top: 8px !important; 
  right: 8px !important; 
  background-color: crimson !important; /* 強制的に赤を適用 */
  color: white !important; 
  font-size: 0.7em !important; 
  padding: 2px 6px !important; 
  border-radius: 4px !important;
  z-index: 5;
  display: inline-block !important;
}

/* 説明（あらすじ）トグルボタンの設定 */
.desc-toggle {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.3em 0.8em;
  font-size: 0.9em;
  border: 1px solid #d9cbbf;
  border-radius: 4px;
  background: #fdfbf5;
  color: #8b7d6b;
  cursor: pointer;
}
.novel-desc { 
  display: none; 
  margin-top: 0.8em; 
  font-size: 0.95em; 
  color: #555; 
  line-height: 1.5; 
}

/* ページ送りボタン */
.pagination .page-numbers { border-radius: 50%; color: #ba7373; }
.pagination .current { background: linear-gradient(120deg, #ba7373, #f2bfbf); color: white; }

/* 右下の浮遊アイコン */
.floating-icon { position: fixed !important; bottom: 20px; right: 20px; width: 120px; z-index: 10; transition: opacity 0.3s ease; }



/*******************************************************************************
 * 4. レスポンシブ（スマホ・PC幅）調整
 *******************************************************************************/

/* PC表示：本文の幅を絞って可読性を上げる（ブログ記事用） */
@media screen and (min-width: 1024px) {
  /* 標準のブログ記事では中央に寄せる */
  .entry-content > p, 
  .entry-content > ul, 
  .entry-content > ol, 
  .entry-content > blockquote {
    max-width: 720px; /* 700pxから少しだけ広げました */
    margin-left: auto;
    margin-right: auto;
  }

  /* 【追加修正】小説ページ（.novel-page）の中では、幅の制限を解除し余白を広げる */
  .novel-page p, 
  .novel-page h2, 
  .novel-page h3, 
  .novel-page .char-heading {
    max-width: 100% !important; /* 幅制限をリセット */
    padding-left: 10px;        /* 羊皮紙の端から少し離す */
    padding-right: 10px;
  }
}

/* スマホ表示（480px以下） */
@media screen and (max-width: 480px) {
  /* ブログ記事の左右余白 */
  .entry-content > p, .entry-content > ul, .entry-content > ol {
    padding-left: 1.2em;
    padding-right: 1.2em;
  }
  .article h2, .article h3 {
    padding-left: 1.2em !important;
    padding-right: 1.2em !important;
  }

  /* 小説ページ（.novel-page）の余白を最適化 */
  .novel-page {
    padding: 25px 18px !important; /* 少しだけ広めに調整 */
    margin: 20px 10px !important;
  }
  /* スマホの小説内では文字を端まで使って読みやすくする */
  .novel-page p, .novel-page h2, .novel-page h3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .floating-icon { width: 80px; bottom: 10px !important; right: 10px !important; }
}

/* 記事全体の行間設定（共通） */
.entry-content p { 
  line-height: 1.9; 
  margin-bottom: 1.8em; 
}