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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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


/* ===== ヘッダー ミニマルモダンデザイン ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&family=Noto+Sans+JP:wght@300&display=swap');

/* ヘッダー背景グラデーション */
#header {
  background: linear-gradient(135deg, #0a0e1a 0%, #131b2e 55%, #1a2440 100%) !important;
  padding: 48px 20px 44px !important;
  position: relative;
  overflow: hidden;
}

/* 上部のアクセントライン */
#header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(140,180,255,0.55), transparent);
  pointer-events: none;
}

/* サイトタイトル */
#header .site-name-text,
#header .header-title,
#header h1,
#header h1 a {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 56px !important;
  font-weight: 300 !important;
  color: #ddeaff !important;
  letter-spacing: 0.18em !important;
  text-shadow: 0 0 50px rgba(100,150,255,0.2) !important;
  text-decoration: none !important;
}

/* サイトキャッチフレーズ（サブタイトル） */
#header .site-description,
#header .header-description,
.tagline {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: rgba(180,210,255,0.55) !important;
  letter-spacing: 0.22em !important;
}

/* ナビゲーション */
#navi,
#navi .navi-in > ul {
  background: #0d1220 !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

#navi .navi-in > ul > li > a {
  color: rgba(180,210,255,0.65) !important;
  letter-spacing: 0.15em !important;
  font-size: 13px !important;
}

#navi .navi-in > ul > li > a:hover {
  color: rgba(220,235,255,0.95) !important;
  background: rgba(255,255,255,0.04) !important;
}
/* ===== ヘッダーここまで ===== */

/* ===== スマホ対応（768px以下） ===== */
@media screen and (max-width: 768px) {
  #header {
    padding: 28px 16px 24px !important;
  }

  #header .site-name-text,
  #header .header-title,
  #header h1,
  #header h1 a {
    font-size: clamp(17px, 5.2vw, 22px) !important;
    letter-spacing: 0.05em !important;
  }

  #header .site-description,
  #header .header-description,
  .tagline {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }

  #navi .navi-in > ul > li > a {
    font-size: 11px !important;
    padding: 10px 12px !important;
    letter-spacing: 0.08em !important;
  }
}
/* ===== スマホ対応ここまで ===== */