@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
*/

/* =========================================================
   怪異図鑑 Horror Skin
   親テーマではなく Cocoon 子テーマ側に保持するため、
   Cocoon 本体アップデート後もデザインを維持します。
   ========================================================= */

:root{
  --kai-bg:#0b0b0d;
  --kai-bg-soft:#121216;
  --kai-panel:#17171c;
  --kai-panel-2:#1d1c20;
  --kai-ink:#f3eee7;
  --kai-muted:#c9c1b9;
  --kai-paper:#d7c9aa;
  --kai-red:#8f1d22;
  --kai-red-bright:#b92b32;
  --kai-line:#343238;
  --kai-shadow:0 18px 50px rgba(0,0,0,.38);
  --kai-serif:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
  --kai-sans:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}

html{
  background:var(--kai-bg);
}

body{
  color:var(--kai-ink);
  font-family:var(--kai-sans);
  background:
    radial-gradient(circle at 20% -10%, rgba(143,29,34,.12), transparent 32rem),
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.025), transparent 28rem),
    linear-gradient(180deg,#0a0a0c 0%,#101014 55%,#09090b 100%);
  background-attachment:fixed;
}

/* ごく薄い紙・フィルム調テクスチャ */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.045;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0,rgba(255,255,255,.5) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:soft-light;
}

a{
  color:#d9b8b0;
  text-decoration-color:rgba(185,43,50,.65);
  text-underline-offset:.18em;
}

a:hover{
  color:#fff;
  text-decoration-color:var(--kai-red-bright);
}

/* ===== Header / Branding ===== */
#header-container,
.header-container,
.header-container-in,
#header{
  background:linear-gradient(180deg,#09090b 0%,#101014 100%) !important;
  color:var(--kai-ink);
}

.header-container{
  border-bottom:1px solid #2b2729;
  box-shadow:0 10px 35px rgba(0,0,0,.35);
}

.site-name-text,
.logo-text,
.logo-header{
  font-family:var(--kai-serif);
  letter-spacing:.14em;
  color:#f0e7d7 !important;
  text-shadow:0 2px 14px rgba(143,29,34,.35);
}

.site-name-text::after{
  content:"  — 奇譚・都市伝説・異界の記録";
  display:block;
  margin-top:.35rem;
  font-family:var(--kai-serif);
  font-size:.34em;
  font-weight:400;
  letter-spacing:.18em;
  color:#8e8781;
}

/* ===== Navigation ===== */
.navi,
#navi,
.navi-in,
.menu-header{
  background:#0e0e11 !important;
}

.navi-in > ul > li > a,
.menu-header .menu-item > a{
  color:#cfc7bd !important;
  letter-spacing:.08em;
  transition:background-color .25s,color .25s,box-shadow .25s;
}

.navi-in > ul > li > a:hover,
.menu-header .menu-item > a:hover{
  color:#fff !important;
  background:rgba(143,29,34,.16) !important;
  box-shadow:inset 0 -2px 0 var(--kai-red);
}

/* ===== Main Layout ===== */
#content{
  margin-top:32px;
}

.main,
.sidebar,
.content-in{
  background:transparent;
}

.main{
  background:linear-gradient(180deg,rgba(24,24,29,.97),rgba(17,17,21,.97));
  border:1px solid var(--kai-line);
  box-shadow:var(--kai-shadow);
  border-radius:4px;
}

.entry-content{
  color:#eee8e0;
  line-height:2;
  letter-spacing:.015em;
}

.entry-content p{
  margin-top:1.25em;
  margin-bottom:1.25em;
}

/* ===== Article Header ===== */
.entry-title{
  font-family:var(--kai-serif);
  color:#f2eadc;
  letter-spacing:.035em;
  line-height:1.55;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}

.entry-title::before{
  content:"怪異記録";
  display:block;
  width:max-content;
  margin-bottom:.8rem;
  padding:.28rem .65rem;
  border:1px solid rgba(185,43,50,.75);
  color:#c99d96;
  font-family:var(--kai-serif);
  font-size:.42em;
  font-weight:500;
  letter-spacing:.24em;
  background:rgba(143,29,34,.08);
}

.date-tags,
.post-date,
.post-update,
.entry-categories-tags{
  color:#8d8782;
}

/* ===== Headings ===== */
.article h2,
.entry-content h2{
  position:relative;
  margin-top:2.7em;
  padding:.8em .95em .75em 1.05em;
  border:none;
  border-left:3px solid var(--kai-red);
  border-bottom:1px solid #3d3436;
  background:linear-gradient(90deg,rgba(143,29,34,.14),rgba(143,29,34,0) 72%);
  color:#f0e8db;
  font-family:var(--kai-serif);
  letter-spacing:.045em;
}

.article h2::after,
.entry-content h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:72px;
  height:1px;
  background:var(--kai-red-bright);
  box-shadow:0 0 12px rgba(185,43,50,.35);
}

.article h3,
.entry-content h3{
  padding:.45em 0 .45em .9em;
  border:none;
  border-left:2px solid #645657;
  color:#ded4c5;
  font-family:var(--kai-serif);
  background:transparent;
}

/* ===== Links / strong / quotes ===== */
.entry-content strong{
  color:#f0c9bf;
}

.entry-content blockquote{
  position:relative;
  padding:1.4em 1.6em;
  border:1px solid #3b3435;
  border-left:3px solid var(--kai-red);
  background:#111115;
  color:#c7c0b8;
}

.entry-content blockquote::before{
  color:#5d3235;
}

/* ===== Lists ===== */
.entry-content ul,
.entry-content ol{
  padding:1.1em 1.2em 1.1em 2.4em;
  border:1px solid #312f34;
  background:rgba(0,0,0,.12);
}

.entry-content li::marker{
  color:#a94a4f;
}

/* ===== Horizontal rule ===== */
.wp-block-separator,
.article hr{
  border:0 !important;
  height:1px;
  margin:2.6em auto;
  background:linear-gradient(90deg,transparent,#4c3b3e 22%,#7e2e33 50%,#4c3b3e 78%,transparent);
}

/* ===== Featured / Article Images ===== */
.eye-catch img,
.entry-content img{
  border:1px solid #342f31;
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}

.eye-catch{
  position:relative;
  overflow:hidden;
  background:#09090b;
}

.eye-catch::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 50px rgba(0,0,0,.45);
}

/* ===== Cards / archives ===== */
.a-wrap,
.entry-card-wrap,
.related-entry-card-wrap{
  color:inherit;
}

.entry-card,
.related-entry-card{
  background:linear-gradient(145deg,#18181d,#111115);
  border:1px solid #302e33;
  border-radius:3px;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.entry-card:hover,
.related-entry-card:hover{
  transform:translateY(-3px);
  border-color:#5a3336;
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}

.entry-card-title,
.related-entry-card-title{
  color:#e8e0d4;
  font-family:var(--kai-serif);
}

.entry-card-snippet,
.related-entry-card-snippet{
  color:#c7bfb7;
}

/* ===== Sidebar ===== */
.sidebar .widget{
  margin-bottom:24px;
  padding:18px;
  border:1px solid #302e33;
  background:linear-gradient(180deg,#151519,#101014);
  box-shadow:0 12px 30px rgba(0,0,0,.2);
}

.sidebar h2,
.sidebar h3,
.widget-title{
  margin-top:0;
  padding:.55em .25em .55em .8em;
  border-left:2px solid var(--kai-red);
  color:#ded5c8;
  font-family:var(--kai-serif);
  letter-spacing:.08em;
  background:transparent;
}

/* ===== TOC ===== */
.toc,
.toc-content{
  border:1px solid #383337 !important;
  background:#111115 !important;
  color:#cfc7bd;
}

.toc-title{
  color:#efe6d8;
  font-family:var(--kai-serif);
  letter-spacing:.08em;
}

/* ===== Author box ===== */
.author-box{
  border:1px solid #322f33 !important;
  background:#101014 !important;
  color:#bdb6ae;
}

.author-name a{
  color:#e0d4c5 !important;
  font-family:var(--kai-serif);
}

/* ===== Breadcrumb ===== */
.breadcrumb,
.breadcrumb a{
  color:#b8b0aa;
}

/* ===== Buttons ===== */
.wp-block-button__link,
.search-submit,
button,
input[type="submit"]{
  border:1px solid #6e3034 !important;
  border-radius:2px !important;
  background:linear-gradient(180deg,#8f1d22,#651418) !important;
  color:#fff !important;
  box-shadow:0 5px 16px rgba(0,0,0,.25);
  letter-spacing:.05em;
}

.wp-block-button__link:hover,
.search-submit:hover,
button:hover,
input[type="submit"]:hover{
  background:linear-gradient(180deg,#a4262c,#76191e) !important;
}

/* ===== Inputs ===== */
input[type="text"],
input[type="search"],
input[type="email"],
textarea,
select{
  border:1px solid #3b383e !important;
  background:#101014 !important;
  color:#ded8d0 !important;
}


/* ===== Search: visibility fix ===== */
.sidebar .search-box,
.widget_search .search-form,
.search-box{
  position:relative;
}

.sidebar .search-box::before,
.widget_search .search-form::before{
  content:"サイト内検索";
  display:block;
  margin:0 0 9px;
  color:#e7ddd0;
  font-family:var(--kai-serif);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.12em;
}

.search-box .search-edit,
.widget_search input[type="search"],
.widget_search input[type="text"],
.sidebar input[type="search"]{
  min-height:46px;
  padding:10px 56px 10px 14px !important;
  border:1px solid #74666a !important;
  border-radius:3px !important;
  background:#f1ece3 !important;
  color:#171419 !important;
  caret-color:#8f1d22;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.14),0 0 0 1px rgba(255,255,255,.02);
}

.search-box .search-edit::placeholder,
.widget_search input::placeholder,
.sidebar input[type="search"]::placeholder{
  color:#756d69 !important;
  opacity:1;
}

.search-box .search-edit:focus,
.widget_search input[type="search"]:focus,
.widget_search input[type="text"]:focus,
.sidebar input[type="search"]:focus{
  border-color:#b92b32 !important;
  outline:2px solid rgba(185,43,50,.3);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(143,29,34,.12);
}

.search-box .search-submit,
.widget_search .search-submit,
.widget_search button,
.sidebar .search-submit{
  min-width:48px;
  min-height:42px;
  border:1px solid #a53a40 !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#a3262c,#72191e) !important;
  color:#fff !important;
  opacity:1 !important;
  box-shadow:0 4px 12px rgba(0,0,0,.28) !important;
}

.search-box .search-submit:hover,
.widget_search .search-submit:hover,
.widget_search button:hover,
.sidebar .search-submit:hover{
  background:linear-gradient(180deg,#bd333a,#851d22) !important;
  border-color:#d35a60 !important;
}

/* Cocoonの右上検索アイコンも、暗背景に埋もれないよう強調 */
.search-menu-button,
.menu-button.search-menu-button,
.search-menu-button a{
  color:#f4e9dd !important;
}

.search-menu-button{
  background:rgba(143,29,34,.18) !important;
  border:1px solid rgba(185,43,50,.55) !important;
  border-radius:3px;
}

.search-menu-button:hover{
  background:rgba(185,43,50,.34) !important;
  border-color:#b92b32 !important;
}

@media screen and (max-width:480px){
  .sidebar .search-box::before,
  .widget_search .search-form::before{
    font-size:.82rem;
  }
}


/* ===== Privacy Policy: readable legal/info page ===== */
.page-id-3 .main{
  background:linear-gradient(180deg,#1b1b20,#151519);
}

.page-id-3 .entry-title{
  color:#fff8ee;
}

.page-id-3 .entry-content{
  color:#f0ebe4;
}

.page-id-3 .entry-content p,
.page-id-3 .entry-content li{
  color:#e9e3dc;
}

.page-id-3 .entry-content a{
  color:#f1c5bd;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
}

.page-id-3 .entry-content a:hover{
  color:#ffffff;
}

.page-id-3 .entry-content h2{
  color:#fff4e7;
  background:linear-gradient(90deg,rgba(143,29,34,.2),rgba(143,29,34,0) 78%);
}

.page-id-3 .entry-content h3{
  color:#eadfd1;
}

.page-id-3 .entry-content ul,
.page-id-3 .entry-content ol{
  background:#131317;
  border-color:#484248;
}

.page-id-3 .wp-block-quote{
  background:#111115;
  border-color:#51484b;
  border-left-color:#b92b32;
  color:#e8e0d7;
}

.page-id-3 .wp-block-quote strong{
  color:#ffd7cd;
}

/* ===== Footer ===== */
.footer,
.footer-bottom,
#footer{
  border-top:1px solid #2d292c;
  background:#08080a !important;
  color:#aaa29c;
}

.footer a{
  color:#a9a09a;
}

/* ===== Selection / scrollbar ===== */
::selection{
  background:#7f2025;
  color:#fff;
}

*{
  scrollbar-width:thin;
  scrollbar-color:#4b2b2e #101014;
}

/* ===== subtle reveal ===== */
@media (prefers-reduced-motion:no-preference){
  .entry-card,
  .sidebar .widget,
  .main{
    animation:kaiFade .5s ease both;
  }
  @keyframes kaiFade{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
  }
}

/* ===== Tablet ===== */
@media screen and (max-width:1023px){
  #content{margin-top:18px;}
  .main{border-radius:0;}
  .sidebar .widget{box-shadow:none;}
}

/* ===== Mobile ===== */
@media screen and (max-width:834px){
  body{background-attachment:scroll;}
  .site-name-text::after{font-size:.3em;letter-spacing:.12em;}
  .article h2,
  .entry-content h2{font-size:1.35em;padding-left:.85em;}
}

/* ===== Small Mobile ===== */
@media screen and (max-width:480px){
  .entry-title{font-size:1.55em;}
  .entry-title::before{font-size:.45em;}
  .main{border-left:0;border-right:0;}
  .entry-content{line-height:1.9;}
  .entry-content ul,
  .entry-content ol{padding-left:2em;}
}