/* =================================================
   1. 外部フォント・基本設定
   ================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/*
 Theme Name: Cocoon Child
 Template: cocoon-master
*/

/* =================================================
   2. 全体背景とオーバーレイ
   ================================================= */
body {
  background-image: url("http://watasitatinotyousenn.life/wp-content/uploads/2026/04/Gemini_Generated_Image_395djv395djv395d-2-scaled.png");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-color: #0b0f19;
  color: #e6f1ff; 
  font-family: 'Noto Sans JP', sans-serif;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5, 8, 20, 0.75);
  z-index: -1;
  pointer-events: none;
}

/* =================================================
   3. ヘッダー・グローバルナビゲーション（白飛び修正済）
   ================================================= */
.header, #header, .header-container, .header-in, .common-header-in, #navi {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.site-name-text {
  color: #e6f1ff !important;
  text-shadow: 0 0 8px rgba(0,255,255,.9), 0 0 25px rgba(0,140,255,.6);
  letter-spacing: 4px;
}

.navi-in {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(18px);
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  border-radius: 40px;
}

.navi-in a {
  color: #e6f1ff !important;
  transition: 0.3s;
  font-weight: bold;
}

.navi-in a:hover {
  color: #00f7ff !important;      
  background: #000000 !important; 
  border-radius: 8px !important;  
}

/* =================================================
   4. 記事一覧・関連記事・ページ送り
   ================================================= */
.entry-card-title, .entry-title, .entry-snippet, 
.related-entry-card-title, .related-entry-card-snippet,
.prev-post-title, .next-post-title,
.prev-next-post-label, .related-posts-title,
.entry-card-snippet {
    color: #ffffff !important;
    transition: 0.3s ease-in-out !important;
    text-decoration: none !important;
}

/* ★ ページ送りの枠線設定のみを修正（二重線を解消） */
#main .pagination .current,
#main .pagination a,
#main .pagination span,
#main .wp-pagenavi .current,
#main .wp-pagenavi a,
#main .wp-pagenavi span {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important; 
    background: transparent !important;
    box-shadow: none !important;
    position: relative !important;
    display: inline-block !important;
    margin: 0 2px !important;
}

/* 不要な二重枠線を非表示にする */
#main .pagination a::before, 
#main .pagination a::after,
#main .wp-pagenavi a::before, 
#main .wp-pagenavi a::after,
.pagination-next-link::before,
.pagination-next-link::after,
.pagination-prev-link::before,
.pagination-prev-link::after {
    display: none !important;
    content: none !important;
}

/* 現在のページの枠線 */
#main .pagination .current,
#main .wp-pagenavi .current {
    border-color: #00f7ff !important;
    background: rgba(0, 247, 255, 0.1) !important;
}

.a-wrap:hover, 
.related-entry-card:hover, 
.prev-post a:hover, 
.next-post a:hover {
    background-color: #000000 !important;
    border-radius: 12px !important;
    transition: 0.3s !important;
    text-decoration: none !important;
}

.a-wrap:hover .entry-card-title, 
.related-entry-card:hover .related-entry-card-title,
.prev-post a:hover .prev-post-title, 
.next-post a:hover .next-post-title {
    color: #00f7ff !important;
    text-shadow: 0 0 10px rgba(0, 247, 255, 0.8);
}

/* =================================================
   5. ウィジェット・サイドバー
   ================================================= */
.sidebar, #sidebar { background: transparent !important; }

.widget {
  background: rgba(10, 15, 30, 0.65) !important;
  backdrop-filter: blur(10px);
  border-radius: 15px !important;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  padding: 20px !important;
}

.widget-title, .sidebar h3, #sidebar h3, .widget h3, .widget h2 {
  background: rgba(0, 0, 0, 0.7) !important;
  color: #ffffff !important;
  border-left: 5px solid #00f7ff !important;
  padding: 10px 15px !important;
  font-size: 18px !important;
  margin: -20px -20px 15px -20px !important; 
  border-radius: 15px 15px 0 0 !important; 
  display: block !important;
  line-height: 1.5 !important;
}

.widget ul li a {
  display: block !important;
  color: #ffffff !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: none !important;
  transition: 0.3s !important;
}

.widget ul li a:hover {
  background-color: #000000 !important;
  color: #00f7ff !important;
  text-shadow: 0 0 8px rgba(0, 247, 255, 0.6);
}

/* =================================================
   6. メインコンテンツ・記事内要素
   ================================================= */
.main {
  background: rgba(10, 15, 30, 0.65);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  padding: 35px;
}

/* ★ 記事内のハイパーリンク：フォントサイズを周囲のテキストに同期 */
.entry-content a {
  font-size: inherit !important; /* 周囲の文字の大きさに合わせる */
  color: #00f7ff !important;    /* リンクであることがわかるように水色に */
  font-weight: bold;             /* 視認性のための太字 */
  text-decoration: underline;    /* リンクであることを明示 */
  transition: 0.3s;
}

.entry-content a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(0, 247, 255, 0.8);
  text-decoration: none;
}

table, .wp-block-table table {
    border-collapse: collapse !important;
    background-color: #121212 !important;
    border: 1px solid rgba(0, 255, 255, 0.5) !important;
    border-radius: 8px;
    overflow: hidden;
}
table tr, table td, table th {
    background-color: #121212 !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
    padding: 15px !important;
}
table tr:hover td {
    background-color: #000000 !important;
    color: #00f7ff !important;
}

blockquote, .wp-block-quote {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    border-left: 6px solid #00f7ff !important;
    border-radius: 8px;
    padding: 20px !important;
}

.toc {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  padding: 20px !important;
  border-radius: 12px !important;
}
.toc-title { color: #ffffff !important; }
.toc-content a, .toc-list li a, .toc-list li, .toc-list span {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: 0.3s !important;
}
.toc-content a:hover {
  color: #00f7ff !important;
  background-color: #000000 !important;
  text-shadow: 0 0 8px rgba(0, 247, 255, 0.6);
  border-radius: 6px;
  padding: 2px 8px;
}

/* =================================================
   7. 見出し（H2）とボタン
   ================================================= */
.article h2, .entry-content h2 {
  background: rgba(0, 0, 0, 0.7) !important;
  color: #ffffff !important;
  border-left: 5px solid #00f7ff !important;
  padding: 10px 15px !important;
}

.wp-block-button__link {
  background: linear-gradient(135deg, #00f7ff, #7b61ff);
  border-radius: 8px;
  transition: 0.3s;
}
.wp-block-button__link:hover {
  filter: brightness(1.2);
  box-shadow: 0 0 15px rgba(0, 247, 255, 0.6);
}

/* =================================================
   8. フッター
   ================================================= */
.footer, #footer {
  background: rgba(0, 0, 0, 0.8) !important;
  border-top: 1px solid rgba(0, 255, 255, 0.3) !important;
}
.footer a {
  color: #ffffff !important;
  transition: 0.3s;
  padding: 6px 12px;
  border-radius: 8px;
}
.footer a:hover {
  color: #00f7ff !important;
  background-color: #000000 !important;
}

/* =================================================
   9. レスポンシブ設定（スマホ対応）
   ================================================= */
@media (max-width: 768px) {
  body { background-attachment: scroll; }
  .main, .widget { padding: 20px !important; }
}