@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){
  /*必要ならばここにコードを書く*/
}

/*
Theme Name: Cocoon Child – DAISEN
Theme URI: https://daisen.life
Description: Cocoon Child テーマ DAISEN カスタマイズ版
Author: DAISEN
Author URI: https://daisen.life
Template: cocoon-master
Version: 1.0.0
*/

/* ============================================================
   CSS カスタムプロパティ（グローバル変数）
   ============================================================ */
:root {
  /* ブランドカラー */
  --ds-black:       #0a0a0f;
  --ds-dark:        #111118;
  --ds-surface:     #1a1a28;
  --ds-border:      #2a2a3e;
  --ds-white:       #ffffff;
  --ds-off-white:   #e8e8f0;
  --ds-muted:       #9898aa;

  /* アクセントカラー */
  --ds-blue:        #00b4d8;
  --ds-green:       #06d6a0;
  --ds-purple:      #7209b7;
  --ds-pink:        #f72585;
  --ds-orange:      #fb8500;
  --ds-gold:        #ffd700;
  --ds-gold-glow:   #ffec70;

  /* 特設サイトカラー */
  --site-fcs:   #00b4d8;
  --site-si:    #06d6a0;
  --site-psd:   #7209b7;
  --site-nexus: #f72585;
  --site-log:   #fb8500;

  /* タイポグラフィ */
  --font-sans:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-display: 'Montserrat', 'Noto Sans JP', sans-serif;

  /* スペーシング */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  32px;
  --sp-xl:  64px;
  --sp-2xl: 128px;

  /* 角丸 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* シャドウ */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.15);
  --shadow-md: 0 8px 32px rgba(0,0,0,.25);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.4);

  /* トランジション */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --duration:   0.4s;

  /* 記事テーマカラー（投稿ページで上書き） */
  --post-theme-color: #00b4d8;
}

/* ============================================================
   グローバル リセット
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   ベーススタイル（Cocoon 投稿ページ向け補正）
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.85;
  color: #333;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--post-theme-color);
  text-decoration: none;
  transition: opacity var(--duration) var(--ease-out);
}
a:hover { opacity: .75; }

img { max-width: 100%; height: auto; }

/* ============================================================
   固定ページ：テーマ影響を受けないベースリセット
   （ページテンプレートが読み込む前に適用）
   ============================================================ */
.daisen-page-wrap {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Cocoon のコンテンツ幅制限を解除 */
.daisen-page-wrap .entry-content {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* ============================================================
   投稿ページ 記事カスタムスタイル
   ============================================================ */

/* --- 導入文 --- */
.daisen-post-intro {
  background: linear-gradient(135deg, rgba(0,180,216,.06), rgba(0,180,216,.02));
  border-left: 4px solid var(--post-theme-color);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px;
  margin: 0 0 32px;
  font-size: 1.05rem;
  line-height: 1.9;
  color: #444;
}

/* --- 「この記事で分かること」「まとめ」共通ボックス --- */
.daisen-post-know,
.daisen-post-summary {
  border: 2px solid var(--post-theme-color);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 40px 0;
  background: #fff;
  position: relative;
}
.daisen-box-heading {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--post-theme-color);
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid currentColor;
}
.daisen-post-know ul,
.daisen-post-summary ul {
  margin: 0;
  padding-left: 20px;
}
.daisen-post-know li,
.daisen-post-summary li {
  margin-bottom: 8px;
  line-height: 1.7;
}
.daisen-post-know li::marker {
  color: var(--post-theme-color);
}
.daisen-post-summary li::marker {
  color: var(--post-theme-color);
}

/* --- アイキャッチ オーバーレイ --- */
.daisen-eyecatch-wrap {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.daisen-eyecatch-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  padding: 48px 24px 24px;
  color: #fff;
}
.daisen-eyecatch-overlay .main {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 1.8rem);
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.daisen-eyecatch-overlay .sub {
  display: block;
  font-size: .875rem;
  margin-top: 8px;
  opacity: .85;
}

/* --- 投稿タイトル カラーライン --- */
.single .entry-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--post-theme-color);
  margin-top: 12px;
  border-radius: 2px;
}

/* --- コードブロック --- */
.entry-content pre {
  background: #0f0f1a;
  color: #e8e8f0;
  border-radius: var(--radius-md);
  padding: 20px;
  overflow-x: auto;
  font-size: .875rem;
  line-height: 1.7;
  border-left: 4px solid var(--post-theme-color);
}

/* --- テーブル --- */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}
.entry-content th {
  background: var(--post-theme-color);
  color: #fff;
  padding: 10px 16px;
  font-weight: 600;
}
.entry-content td {
  padding: 10px 16px;
  border: 1px solid #e0e0e0;
}
.entry-content tr:nth-child(even) td {
  background: #f8f8fc;
}

/* ============================================================
   共通フッター（daisen-footer）
   ============================================================ */
.daisen-footer {
  background: var(--ds-black);
  color: var(--ds-off-white);
  padding: var(--sp-xl) 0 var(--sp-lg);
  font-family: var(--font-display);
}
.daisen-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}
.daisen-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md) var(--sp-lg);
  margin-bottom: var(--sp-lg);
  justify-content: center;
}
.daisen-footer__nav a {
  color: var(--ds-muted);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-decoration: none;
  transition: color var(--duration) var(--ease-out);
}
.daisen-footer__nav a:hover {
  color: var(--ds-white);
  opacity: 1;
}
.daisen-footer__copyright {
  text-align: center;
  font-size: .75rem;
  color: var(--ds-muted);
  letter-spacing: .08em;
  border-top: 1px solid var(--ds-border);
  padding-top: var(--sp-lg);
}
.daisen-footer__copyright a {
  color: var(--ds-off-white);
  font-weight: 700;
  transition: color var(--duration);
}
.daisen-footer__copyright a:hover { color: var(--ds-gold); opacity: 1; }

/* ============================================================
   スクロールバー カスタマイズ
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ds-black); }
::-webkit-scrollbar-thumb { background: var(--ds-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-muted); }

/* ============================================================
   ユーティリティ
   ============================================================ */
.ds-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.ds-sr-only { display: none; }

/* ============================================================
   メディアクエリ（投稿ページ補正）
   ============================================================ */
@media (max-width: 768px) {
  body { font-size: 15px; line-height: 1.8; }
  .daisen-post-intro { padding: 16px 18px; }
  .daisen-post-know,
  .daisen-post-summary { padding: 18px 20px; }
  .daisen-footer__nav { gap: var(--sp-sm) var(--sp-md); }
  .daisen-footer__nav a { font-size: .8rem; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  .daisen-eyecatch-overlay .main { font-size: 1rem; }
}