@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');

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

/************************************
** 子テーマ用のスタイルを書く
** 「年収200万円のワーキング歯医者（敗者）のブログ」
** ダーク × 自虐トーン カスタムデザイン
************************************/

:root{
  --loser-bg: #141414;
  --loser-bg-elevated: #1d1d1d;
  --loser-bg-card: #1a1a1a;
  --loser-border: #333333;
  --loser-text: #d4d0c8;
  --loser-text-dim: #8a8a8a;
  --loser-accent: #a13d3d;
  --loser-accent-bright: #c25050;
  --loser-heading-font: "Noto Serif JP", "游明朝", "Yu Mincho", serif;
}

html, body{
  background-color: var(--loser-bg) !important;
  color: var(--loser-text) !important;
}

#content, .content,
#main, .main,
#content-in, .content-in{
  background-color: var(--loser-bg) !important;
}

/* ヘッダー */
#header-container, .header-container,
#header-container-in, .header-container-in{
  background-color: #0c0c0c !important;
  border-bottom: 1px solid var(--loser-accent);
}
#header, .header{
  background-color: transparent !important;
}
.logo.logo-header .site-name,
.site-name-text-link,
.site-name-text{
  color: var(--loser-text) !important;
  font-family: var(--loser-heading-font);
  letter-spacing: .02em;
}

/* 自虐ロゴ：汚い手書き風タイトル */
.header .logo.logo-header .site-name-text{
  display: inline-block;
  font-family: 'Yomogi', "HGP教科書体", cursive, sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.5em !important;
  letter-spacing: -.01em;
  background: none !important;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #cfcac0 !important;
  -webkit-text-stroke: 0;
  text-shadow:
    1px 1px 0 rgba(0,0,0,.6),
    2px 2px 3px rgba(0,0,0,.4);
  opacity: .88;
  transform: rotate(-1.5deg) skewX(-1deg);
  animation: loser-title-wobble 4.5s ease-in-out infinite;
}
@keyframes loser-title-wobble{
  0%, 100%{ transform: rotate(-1.5deg) skewX(-1deg) translateY(0); }
  50%{ transform: rotate(-1deg) skewX(-2deg) translateY(1px); }
}
.header .tagline, .tagline{
  color: var(--loser-text-dim) !important;
}

/* ナビゲーション */
#navi, .navi{
  background-color: #0c0c0c !important;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
}
.navi .menu-top > .menu-item > a,
#navi-in a{
  color: var(--loser-text) !important;
}
.navi .menu-top > .menu-item:hover > a,
.navi .current-menu-item > a{
  color: var(--loser-accent-bright) !important;
  background-color: rgba(161,61,61,0.12) !important;
}

/* 記事カード（一覧） */
.entry-card-wrap, .a-wrap.border-element,
.entry-card, .e-card{
  background-color: var(--loser-bg-card) !important;
  border: 1px solid var(--loser-border) !important;
  box-shadow: none !important;
  transition: border-color .2s ease, transform .2s ease;
}
.entry-card-wrap:hover{
  border-color: var(--loser-accent) !important;
  transform: translateY(-2px);
}
.entry-card-title, .card-title, .e-card-title{
  color: var(--loser-text) !important;
  font-family: var(--loser-heading-font);
}
.entry-card-snippet, .card-snippet,
.entry-card-meta, .card-meta,
.post-date, .entry-card-info{
  color: var(--loser-text-dim) !important;
}
.entry-category, .cat-label{
  background-color: var(--loser-accent) !important;
  color: #fff !important;
}

/* 個別記事ページ */
.article, #content .article{
  background-color: var(--loser-bg-elevated) !important;
  border: 1px solid var(--loser-border) !important;
  box-shadow: none !important;
}
.entry-title, #content .entry-title{
  color: var(--loser-text) !important;
  font-family: var(--loser-heading-font);
  border-left: 4px solid var(--loser-accent);
  padding-left: .6em;
}
.entry-content, .entry-content p, .entry-content li{
  color: var(--loser-text) !important;
}

/* 目次（もくじ） */
html body .toc, html body #toc, html body .article .toc{
  background-color: #0a0a0a !important;
  border: 1px solid var(--loser-border) !important;
  box-shadow: none !important;
}
html body .toc-title, html body .toc .toc-title, html body label.toc-title{
  color: #ffffff !important;
  background-color: transparent !important;
}
html body .toc-title::after{
  color: #ffffff !important;
}
html body .toc-list, html body .toc-content, html body .toc-content *{
  color: #ffffff !important;
}
html body .toc-list li, html body .toc-list li::before{
  color: #ffffff !important;
}
html body .toc-list a, html body .toc a{
  color: #ffffff !important;
  border-bottom: none !important;
}
html body .toc-list a:hover, html body .toc a:hover{
  color: var(--loser-accent-bright) !important;
}
.entry-content a{
  color: var(--loser-accent-bright) !important;
  border-bottom: 1px dotted var(--loser-accent-bright);
}
.entry-content h2, .entry-content h3, .entry-content h4{
  color: var(--loser-text) !important;
  font-family: var(--loser-heading-font);
  border-color: var(--loser-accent) !important;
}
.crumbs, .crumbs a, .crumbs-in{
  color: var(--loser-text-dim) !important;
}

/* サイドバー */
#sidebar, .sidebar{
  background-color: transparent !important;
}
#sidebar .widget, .sidebar .widget{
  background-color: var(--loser-bg-card) !important;
  border: 1px solid var(--loser-border) !important;
  box-shadow: none !important;
}
#sidebar .widget-title, .sidebar .widget-title{
  color: var(--loser-text) !important;
  border-bottom: 1px solid var(--loser-accent) !important;
  font-family: var(--loser-heading-font);
}
#sidebar a, .sidebar a{
  color: var(--loser-text) !important;
}
#sidebar a:hover, .sidebar a:hover{
  color: var(--loser-accent-bright) !important;
}
.search-box.input-box{
  background-color: var(--loser-bg) !important;
  border: 1px solid var(--loser-border) !important;
}
.search-edit{
  background-color: transparent !important;
  color: var(--loser-text) !important;
}

/* フッター */
#footer, .footer, .footer-container{
  background-color: #0c0c0c !important;
  border-top: 1px solid var(--loser-accent);
}
.footer .site-name-text, .footer-bottom-logo .site-name-text{
  color: var(--loser-text) !important;
}
.footer .copyright, .source-org.copyright{
  color: var(--loser-text-dim) !important;
}

/* 全体リンク・強調色 */
a{
  color: var(--loser-accent-bright);
}
::selection{
  background-color: var(--loser-accent);
  color: #fff;
}

/* ボタン類 */
.sim-btn, .btn, input[type="submit"], button{
  background-color: var(--loser-accent) !important;
  border-color: var(--loser-accent) !important;
  color: #fff !important;
}
.sim-btn:hover, .btn:hover, input[type="submit"]:hover, button:hover{
  background-color: var(--loser-accent-bright) !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}