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

/************************************
** ミカボシ 占いコラム — Cosmic Dark Theme
** カラーパレット:
**   背景: #0c0520 (深宇宙)
**   テキスト: #f0e8ff (淡紫白)
**   アクセント: #7c3aed → #a78bfa (紫グラデ)
**   サブ: #c4b5fd (淡紫)
**   ボーダー: rgba(124,58,237,.2)
**   カード背景: rgba(20,10,50,.85)
************************************/

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;700;900&display=swap');

/* ── CSS Variables ── */
:root {
  --mk-bg: #0c0520;
  --mk-bg-card: rgba(20, 10, 50, .85);
  --mk-bg-card-hover: rgba(30, 15, 70, .95);
  --mk-text: #f0e8ff;
  --mk-text-sub: #c4b5fd;
  --mk-accent: #7c3aed;
  --mk-accent-light: #a78bfa;
  --mk-accent-glow: rgba(124, 58, 237, .3);
  --mk-border: rgba(124, 58, 237, .2);
  --mk-gold: #ffd700;
  --mk-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}

/* ── Base ── */
body {
  background: var(--mk-bg) !important;
  color: var(--mk-text) !important;
  font-family: var(--mk-serif) !important;
  line-height: 2.0;
  position: relative;
}

/* Cosmic atmosphere background */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 20%, rgba(160,80,255,.08), transparent),
    radial-gradient(ellipse 80% 80% at 80% 10%, rgba(200,120,255,.05), transparent),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(100,40,200,.06), transparent);
}

/* ── Header ── */
.header,
#header,
.header-container,
.header-container-in,
.navi,
.navi-in {
  background: rgba(12, 5, 32, .95) !important;
  border-bottom: 1px solid var(--mk-border) !important;
}

.header .logo-text,
.header .site-name-text,
.logo-header a,
.site-name-text {
  color: var(--mk-text) !important;
  font-family: var(--mk-serif) !important;
  letter-spacing: .1em;
}

.site-description-text,
.tagline {
  color: var(--mk-text-sub) !important;
}

/* ── Navigation ── */
.navi-in a,
.menu-item a,
.sub-menu a {
  color: var(--mk-text) !important;
  transition: color .3s;
}

.navi-in a:hover,
.menu-item a:hover {
  color: var(--mk-accent-light) !important;
}

.sub-menu,
.navi ul ul {
  background: var(--mk-bg-card) !important;
  border: 1px solid var(--mk-border) !important;
}

/* ── Content Area ── */
#content,
.content-in,
.content {
  position: relative;
  z-index: 1;
}

.main,
#main {
  background: transparent !important;
}

/* ── Article / Entry Cards ── */
.entry-card-wrap,
.entry-card {
  background: var(--mk-bg-card) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: 12px !important;
  transition: all .3s !important;
  overflow: hidden;
}

.entry-card-wrap:hover,
.entry-card:hover {
  background: var(--mk-bg-card-hover) !important;
  border-color: var(--mk-accent) !important;
  box-shadow: 0 8px 32px var(--mk-accent-glow) !important;
  transform: translateY(-2px);
}

.entry-card-title,
.entry-card-title a,
.card-title,
.card-title a {
  color: var(--mk-text) !important;
  font-family: var(--mk-serif) !important;
}

.entry-card-snippet,
.card-snippet {
  color: var(--mk-text-sub) !important;
}

.post-date,
.post-update {
  color: var(--mk-text-sub) !important;
}

/* ── Single Post ── */
.article,
.post,
.page,
.article-header,
.article-body,
.article-footer {
  background: transparent !important;
  color: var(--mk-text) !important;
}

.entry-title,
.article-title,
.post-title,
h1.entry-title {
  color: var(--mk-text) !important;
  font-family: var(--mk-serif) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--mk-accent) !important;
  padding-bottom: .5em !important;
}

/* Heading styles */
.article h2,
.entry-content h2 {
  color: var(--mk-text) !important;
  font-family: var(--mk-serif) !important;
  background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(167,139,250,.08)) !important;
  border: none !important;
  border-left: 4px solid var(--mk-accent) !important;
  padding: 1em 1.2em !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 2.5em 0 1.5em !important;
}

.article h3,
.entry-content h3 {
  color: var(--mk-text) !important;
  font-family: var(--mk-serif) !important;
  border-bottom: 1px solid var(--mk-border) !important;
  border-left: none !important;
  padding-bottom: .5em !important;
  margin: 2em 0 1em !important;
}

.article h4,
.entry-content h4,
.article h5,
.entry-content h5 {
  color: var(--mk-accent-light) !important;
}

/* Paragraph text */
.article p,
.entry-content p {
  color: var(--mk-text) !important;
  line-height: 2.2;
}

/* Links */
.article a,
.entry-content a {
  color: var(--mk-accent-light) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s;
}

.article a:hover,
.entry-content a:hover {
  color: var(--mk-gold) !important;
}

/* Lists */
.article ul,
.article ol,
.entry-content ul,
.entry-content ol {
  color: var(--mk-text) !important;
}

.article li,
.entry-content li {
  color: var(--mk-text) !important;
  margin-bottom: .5em;
}

/* Blockquote */
.article blockquote,
.entry-content blockquote {
  background: rgba(124, 58, 237, .08) !important;
  border-left: 4px solid var(--mk-accent) !important;
  color: var(--mk-text-sub) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 1.2em 1.5em !important;
}

/* Tables */
.article table,
.entry-content table {
  border-color: var(--mk-border) !important;
}

.article th,
.entry-content th {
  background: rgba(124, 58, 237, .2) !important;
  color: var(--mk-text) !important;
  border-color: var(--mk-border) !important;
}

.article td,
.entry-content td {
  background: var(--mk-bg-card) !important;
  color: var(--mk-text) !important;
  border-color: var(--mk-border) !important;
}

/* Strong / Bold */
.article strong,
.entry-content strong {
  color: var(--mk-accent-light) !important;
}

/* Code */
.article code,
.entry-content code {
  background: rgba(124, 58, 237, .15) !important;
  color: var(--mk-accent-light) !important;
  border-radius: 4px;
  padding: 2px 6px;
}

/* ── TOC (Table of Contents) ── */
.toc,
.toc-content {
  background: var(--mk-bg-card) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: 12px !important;
  padding: 1.5em !important;
}

.toc-title {
  color: var(--mk-accent-light) !important;
  font-family: var(--mk-serif) !important;
}

.toc a {
  color: var(--mk-text-sub) !important;
}

.toc a:hover {
  color: var(--mk-accent-light) !important;
}

/* ── Sidebar ── */
.sidebar,
#sidebar {
  background: transparent !important;
}

.widget,
.widget-entry-cards {
  background: var(--mk-bg-card) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: 12px !important;
  padding: 1.2em !important;
  margin-bottom: 1.5em !important;
}

.widget-title,
.widget_title {
  color: var(--mk-accent-light) !important;
  font-family: var(--mk-serif) !important;
  border-bottom: 1px solid var(--mk-border) !important;
  padding-bottom: .5em !important;
  margin-bottom: 1em !important;
}

.widget a {
  color: var(--mk-text) !important;
}

.widget a:hover {
  color: var(--mk-accent-light) !important;
}

/* ── Breadcrumbs ── */
.breadcrumb,
.breadcrumb-home,
.breadcrumb a {
  color: var(--mk-text-sub) !important;
}

.breadcrumb a:hover {
  color: var(--mk-accent-light) !important;
}

/* ── Author Box ── */
.author-box {
  background: var(--mk-bg-card) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: 12px !important;
  color: var(--mk-text) !important;
}

.author-name,
.author-name a {
  color: var(--mk-accent-light) !important;
  font-family: var(--mk-serif) !important;
}

.author-description {
  color: var(--mk-text-sub) !important;
}

/* ── Related Posts ── */
.related-entry-heading,
.comment-title {
  color: var(--mk-text) !important;
  font-family: var(--mk-serif) !important;
}

.related-entry-card-wrap {
  background: var(--mk-bg-card) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: 8px !important;
}

.related-entry-card-wrap:hover {
  border-color: var(--mk-accent) !important;
}

.related-entry-card-title {
  color: var(--mk-text) !important;
}

/* ── Pagination ── */
.pagination a,
.page-numbers {
  color: var(--mk-text) !important;
  background: var(--mk-bg-card) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: 8px !important;
}

.pagination a:hover,
.page-numbers:hover {
  background: var(--mk-accent) !important;
  border-color: var(--mk-accent) !important;
}

.pagination .current {
  background: var(--mk-accent) !important;
  border-color: var(--mk-accent) !important;
  color: #fff !important;
}

/* ── Post Navigation ── */
.pager-post-navi a {
  color: var(--mk-text) !important;
  background: var(--mk-bg-card) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: 8px !important;
}

.pager-post-navi a:hover {
  border-color: var(--mk-accent) !important;
}

/* ── SNS Share Buttons ── */
.sns-share-message {
  color: var(--mk-text-sub) !important;
}

/* ── Footer ── */
.footer,
#footer,
.footer-bottom,
.footer-bottom-content {
  background: rgba(12, 5, 32, .98) !important;
  border-top: 1px solid var(--mk-border) !important;
  color: var(--mk-text-sub) !important;
}

.footer a,
.footer-bottom a {
  color: var(--mk-text-sub) !important;
}

.footer a:hover,
.footer-bottom a:hover {
  color: var(--mk-accent-light) !important;
}

.copyright {
  color: var(--mk-text-sub) !important;
}

/* ── Mobile Menu ── */
.mobile-menu-buttons,
.menu-button {
  background: rgba(12, 5, 32, .95) !important;
  border-top: 1px solid var(--mk-border) !important;
}

.menu-button a,
.menu-button .menu-button-in {
  color: var(--mk-text) !important;
}

/* Slide-in menu */
.navi-menu-content,
.mobile-menu-content {
  background: var(--mk-bg) !important;
}

/* ── Search ── */
.search-box input,
.search-edit {
  background: var(--mk-bg-card) !important;
  color: var(--mk-text) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: 8px !important;
}

.search-submit {
  background: var(--mk-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
}

/* ── Category Labels ── */
.cat-label,
.category-label {
  background: var(--mk-accent) !important;
  color: #fff !important;
  border-radius: 4px !important;
}

/* ── CTA: LINE友だち追加バナー ── */
.line-cta-banner {
  background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(167,139,250,.1));
  border: 1px solid var(--mk-accent);
  border-radius: 16px;
  padding: 2em;
  text-align: center;
  margin: 2em 0;
}

.line-cta-banner h3 {
  color: var(--mk-gold) !important;
  margin-bottom: .5em;
  border: none !important;
}

.line-cta-banner p {
  color: var(--mk-text-sub) !important;
  margin-bottom: 1em;
}

.line-cta-btn {
  display: inline-block;
  background: #06c755;
  color: #fff !important;
  text-decoration: none !important;
  padding: .8em 2em;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1em;
  transition: all .3s;
}

.line-cta-btn:hover {
  background: #05b04a;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(6, 199, 85, .3);
  color: #fff !important;
}

/* ── Cocoon Boxes / Info Boxes ── */
.blank-box,
.information-box,
.question-box,
.alert-box {
  background: var(--mk-bg-card) !important;
  border-color: var(--mk-border) !important;
  color: var(--mk-text) !important;
}

.primary-box {
  border-color: var(--mk-accent) !important;
  background: rgba(124, 58, 237, .1) !important;
}

/* ── Cocoon Buttons ── */
.btn-wrap a,
.btn {
  border-radius: 50px !important;
  transition: all .3s !important;
}

.btn-wrap a:hover,
.btn:hover {
  transform: translateY(-2px) !important;
}

/* ── Tag Cloud ── */
.tagcloud a,
.tag-link {
  background: var(--mk-bg-card) !important;
  color: var(--mk-text-sub) !important;
  border: 1px solid var(--mk-border) !important;
  border-radius: 20px !important;
}

.tagcloud a:hover,
.tag-link:hover {
  background: var(--mk-accent) !important;
  color: #fff !important;
  border-color: var(--mk-accent) !important;
}

/* ── Selection ── */
::selection {
  background: var(--mk-accent);
  color: #fff;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--mk-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--mk-accent);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mk-accent-light);
}

/* ── Image Radius ── */
.entry-card-thumb img,
.widget-entry-card-thumb img,
.related-entry-card-thumb img {
  border-radius: 8px !important;
}

/* ── Front Page Custom ── */
.front-page-type .main {
  max-width: 900px;
  margin: 0 auto;
}

/* ── No Sidebar (front page) cleanup ── */
.no-sidebar .content .main {
  float: none;
  width: 100%;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  body {
    font-size: 15px;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .article h2,
  .entry-content h2 {
    font-size: 1.3em !important;
    padding: .8em 1em !important;
  }

  .line-cta-banner {
    padding: 1.5em 1em;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  body {
    font-size: 14px;
  }

  .article h2,
  .entry-content h2 {
    font-size: 1.2em !important;
  }

  .line-cta-btn {
    font-size: 1em;
    padding: .7em 1.5em;
  }
}