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

/************************************
** Y2K Design — CSS変数・カラー
************************************/
:root {
  --lavender:    #E8D5FF;
  --soft-purple: #C9A8E8;
  --mid-purple:  #9B6FD0;
  --deep-purple: #5B2D9E;
  --dark:        #1E0A3C;
  --white:       #FDFAFF;
  --pink:        #F5D0FF;
  --mint:        #D0F0FF;
  --star-gold:   #FFD700;
}

/************************************
** ベース
************************************/
html {
  background: #1E0A3C !important;
}
body {
  background: var(--dark) !important;
  color: var(--white);
}

/* ピクセルテクスチャ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(201,168,232,0.06) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: screen;
}

/* Y2Kグリッド */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(201,168,232,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,232,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/************************************
** 背景・ボーダー除去
************************************/
#main, .main, #content, .content,
.singular-main, .archive-main, .home-main {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.wrap, #wrap {
  background: var(--dark) !important;
  border: none !important;
  outline: none !important;
}

/************************************
** ヘッダー（完全版）
************************************/

#header-container {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(30, 10, 60, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(201, 168, 232, 0.15) !important;
  box-shadow: none !important;
}

/* hlt-center-logo の縦並びを完全上書き */
#header-container-in.hlt-center-logo,
#header-container-in {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 48px !important;
  height: 64px !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* Cocoon .wrap の固定幅(1256px)をヘッダー内で無効化 */
#header-container-in .wrap {
  width: auto !important;
  margin: 0 !important;
}

#header {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
  border: none !important;
  text-align: left !important;
}

#header-in {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

.tagline { display: none !important; }

/* ロゴ */
h1.logo.logo-header, .logo-header {
  margin: 0 !important;
  padding: 0 !important;
}
.site-name-text-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
.site-name-text-link::before {
  content: '✦';
  color: var(--star-gold);
  font-size: 18px;
  animation: spin-star 4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.8));
  display: inline-block;
}
@keyframes spin-star {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}
.site-name-text {
  font-family: 'Unbounded', 'Noto Sans KR', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--white) !important;
  letter-spacing: -0.02em !important;
}

/* ナビゲーション */
#navi, .navi {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}
.navi-in {
  display: flex !important;
  align-items: center !important;
}
.navi-in > ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-items: center !important;
}
.navi-in > ul > li {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
}
.navi-in > ul > li > a {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  padding: 0 !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.navi-in > ul > li > a:hover {
  color: var(--soft-purple) !important;
  background: transparent !important;
}
/************************************
** 見出しグローエフェクト
************************************/
.entry-title, h1.entry-title {
  font-family: 'Unbounded', 'Noto Sans JP', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #F0AAFF, #FF99FF, #CC66FF, #FF88FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(255,140,255,0.6)) drop-shadow(0 0 16px rgba(200,80,255,0.3));
  animation: glow-pink 3s ease-in-out infinite;
}
h2 {
  font-family: 'Unbounded', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  animation: glow-white 3s ease-in-out infinite;
}
h3, h4 {
  color: var(--soft-purple);
  text-shadow: 0 0 12px rgba(201,168,232,0.6);
}
@keyframes glow-white {
  0%, 100% { text-shadow: 0 0 6px rgba(255,255,255,0.7), 0 0 16px rgba(220,180,255,0.4), 0 0 32px rgba(180,100,255,0.2); }
  50%       { text-shadow: 0 0 8px rgba(255,255,255,0.85), 0 0 22px rgba(220,180,255,0.55), 0 0 44px rgba(180,100,255,0.3); }
}
@keyframes glow-pink {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,140,255,0.6)) drop-shadow(0 0 16px rgba(200,80,255,0.3)); }
  50%       { filter: drop-shadow(0 0 10px rgba(255,160,255,0.75)) drop-shadow(0 0 24px rgba(210,90,255,0.45)); }
}

/************************************
** カード・記事一覧
************************************/
.card, .entry-card, .a-wrap {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(201, 168, 232, 0.12) !important;
  border-radius: 20px !important;
  transition: all 0.3s !important;
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.card:hover, .entry-card:hover, .a-wrap:hover {
  border-color: rgba(201, 168, 232, 0.35) !important;
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(91, 45, 158, 0.25) !important;
}
.card-title, .entry-card-title {
  color: var(--white) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.card-meta, .post-date, .update-date {
  color: rgba(201, 168, 232, 0.5) !important;
  font-size: 12px;
}

/************************************
** ボタン
************************************/
.btn, .wp-block-button__link, .more-link {
  background: linear-gradient(135deg, #B07FE8, #7B4FBF) !important;
  color: white !important;
  padding: 12px 32px !important;
  border-radius: 100px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 8px 32px rgba(123,79,191,0.5) !important;
  transition: all 0.3s !important;
  text-decoration: none !important;
}
.btn:hover, .wp-block-button__link:hover, .more-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(123,79,191,0.7) !important;
}

/************************************
** サイドバー
************************************/
#sidebar, .sidebar, .widget {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(201, 168, 232, 0.12) !important;
  border-radius: 16px;
  color: var(--white) !important;
}
.widget-title, .widgettitle {
  background: linear-gradient(135deg, var(--mid-purple), var(--deep-purple)) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
}

/************************************
** フッター
************************************/
#footer, .footer {
  background: rgba(30, 10, 60, 0.9) !important;
  border-top: 1px solid rgba(201, 168, 232, 0.15);
  color: rgba(201, 168, 232, 0.6) !important;
}

/************************************
** スクロールバー
************************************/
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--mid-purple); border-radius: 3px; }

/************************************
** マーキー
************************************/
.y2k-marquee-wrap {
  overflow: hidden;
  border-top: 1px solid rgba(201,168,232,0.1);
  border-bottom: 1px solid rgba(201,168,232,0.1);
  background: rgba(155,111,208,0.08);
  padding: 14px 0;
}
.y2k-marquee-track {
  display: flex;
  animation: marquee 20s linear infinite;
  white-space: nowrap;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.y2k-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: rgba(201,168,232,0.6);
  font-weight: 500;
  text-transform: uppercase;
}
.y2k-marquee-star {
  color: var(--star-gold);
  filter: drop-shadow(0 0 4px rgba(255,215,0,0.6));
}

/************************************
** レスポンシブ
************************************/
@media screen and (max-width: 1023px) {
  .entry-title, h1.entry-title { font-size: 36px; }
}
@media screen and (max-width: 834px) {
  .entry-title, h1.entry-title { font-size: 28px; }
  body::after { display: none; }
  #header-container-in,
  .hlt-center-logo {
    flex-direction: row !important;
    height: 56px !important;
    padding: 0 20px !important;
  }
  .site-name-text { font-size: 16px !important; }
  .navi-in > ul { gap: 12px !important; }
}
@media screen and (max-width: 480px) {
  .entry-title, h1.entry-title { font-size: 22px; }
  .card, .entry-card, .a-wrap { border-radius: 14px !important; }
}