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



/* 20250420追記 */

/* === Cocoonの影響をリセット === */
body,
.entry-content,
.post {
  background-color: #F5F5F5;
  font-family: '游明朝体', 'Yu Mincho', 'Noto Serif JP', serif;
  color: #2B2B2B;
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  margin: 0;
  padding: 0;
}

/* 見出しスタイル */
.entry-content h1 {
  font-size: 32px;
  font-weight: bold;
  margin: 2.5em 0 1em;
  line-height: 1.4;
  color: #2B2B2B;
}

.entry-content h2 {
  font-size: 24px;
  font-weight: bold;
  margin: 2.5em 0 1em;
  line-height: 1.6;
  color: #2B2B2B;
}

/* pタグの余白調整 */
.entry-content p {
  margin: 1.4em 0;
}

/* リストやblockquoteの余白と色を整える */
.entry-content ul,
.entry-content ol {
  padding-left: 1.5em;
  margin: 1.4em 0;
}

.entry-content blockquote {
  border-left: 4px solid #CCCCCC;
  padding-left: 1em;
  margin: 2em 0;
  color: #555;
  font-style: italic;
  background: none;
}

/* 画像のスタイル */
.entry-content img {
  max-width: 100%;
  height: auto;
  margin: 2em 0;
  display: block;
}

/* テーブルの初期リセット */
.entry-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 2em 0;
}

.entry-content th,
.entry-content td {
  border: 1px solid #DDD;
  padding: 0.6em;
  text-align: left;
}

/* Cocoon独自要素を消す */
.toc,
.article-footer,
.sns-share,
.related-entry,
.widgets,
.author-info,
.navigation,
.category-tags,
.meta-info,
.comment-area,
.ad-area {
  display: none !important;
}

/* SNSアイコンなどを下部でシンプルに出したい場合はこの辺を後で調整 */


/*  著者情報（Author Box）をCSSで非表示  */

.author-box,
.author-info,
.author-profile,
.entry-author {
  display: none !important;
}


/*  背景カラー  */

.main,
.content,
.content-in,
.content-inner {
  background-color: transparent !important;
}


/* ========== Fade-in アニメーション ========== */

/* 初期状態：透明＆下に少しズレた状態 */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
    transition: opacity 1.8s ease, transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 表示範囲に入ったら適用されるクラス（CSSで「登場」させる） */
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* 管理画面で .fade-in を強制表示（編集しやすくする） */
body.wp-admin .fade-in {
  opacity: 1 !important;
  transform: none !important;
}


/* サイトタイトルに Allura フォントを適用 */
.site-title,
#site-title,
.site-name {
  font-family: 'Allura', cursive;
  font-weight: normal;
  font-size: 2.2em; /* 必要なら調整 */
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.2;
  color: #223344;
}


/* ------------------------------------------------------
  詩的パートのH1見出し専用：.custom-h1
------------------------------------------------------- */
.entry-content h1.custom-h1 {
  font-family: 'Crimson Pro', serif;
  font-weight: 200;
  font-size: 4.2em;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-top: 1em;
  margin-bottom: 1.5em;
  text-align: left;
  color: #223344;
}






/* 1〜2章：詩的パート（背景グレー・欧文セリフ＋和文保険） */
/* 本文・リスト・引用などへの共通指定 */
.intro-section,
.intro-section p,
.intro-section li,
.intro-section blockquote {
  font-family: 'Spectral', 'Noto Serif JP', serif !important;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.9;
  color: #223344;
}

/* 見出しH2は別で強調調整 */
.entry-content h2.intro-section {
  font-family: 'Spectral', 'Noto Serif JP', serif !important;
  font-weight: 500;
  font-size: 1.8em;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #223344;
  margin-top: 2.2em;
  margin-bottom: 1.2em;
}



/* 3章以降：実用パート（背景白・サンセリフ） */
/* ------------------------------------------------------
  3章以降：実用パート（背景白・Noto Sans）
  グループブロックに「practical-section」クラスを付与
  → セクション全体の背景・フォント・構造を切り替える
------------------------------------------------------- */

/* 1. セクション全体のレイアウトと背景色 */
.practical-section {
  background-color: #ffffff;
  padding: 3em 1em;

  /* Gutenbergグループをページ幅いっぱいに */
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* 2. 本文用要素（段落、リストなど）にフォント・サイズを適用 */
.practical-section,
.practical-section p,
.practical-section li,
.practical-section blockquote {
  font-family: 'Noto Sans', sans-serif !important;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #223344; /* 実用パートの本文カラー（やや濃いグレー） */
}

/* 3. 見出し要素：フォントのみ上書き（サイズはテーマに委ねる） */
.practical-section h2,
.practical-section h3,
.practical-section h4 {
  font-family: 'Noto Sans', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #223344;
  margin-top: 2em;
  margin-bottom: 0.8em;
}

/* 4. リストの余白調整（必要に応じて） */
.practical-section ul,
.practical-section ol {
  padding-left: 1.4em;
  margin-bottom: 1.5em;
}

/* 5. 引用の装飾（必要なら） */
.practical-section blockquote {
  border-left: 3px solid #ccc;
  padding-left: 1em;
  color: #444;
  font-style: italic;
}






/* ------------------------------------------------------
  ドロップキャップ（2章冒頭の段落などに使用）
  使用方法：
    Gutenbergの段落ブロックにクラス「dropcap」を追加
    → 最初の1文字だけ大きく装飾されます
------------------------------------------------------- */
.dropcap::first-letter {
  /* 左に回り込みさせる（テキストの先頭に浮かぶように） */
  float: left;

  /* フォントサイズを大きく（ベース文字の約3〜3.5倍） */
  font-size: 3.4em;

  /* 行高はそのまま1行分 */
  line-height: 1;

  /* 文字と本文との余白を調整 */
  padding-right: 0.12em;
  padding-top: 0.05em;

  /* フォントウェイトはやや細めに（Spectralの繊細さを活かす） */
  font-weight: 300;

  /* フォント指定（Spectral＋日本語用にNoto Serif JPも保険） */
  font-family: 'Spectral', 'Noto Serif JP', serif;
}


/* ------------------------------------------------------
  フッター帯（濃藍で落ち着きある締め）
------------------------------------------------------- */
footer#footer {
  background-color: #1b2d4a;
  color: #ffffff;
  padding: 2em 1em;
  text-align: center;
  font-size: 14px;
}

footer#footer p {
  margin: 0;
}


/* ------------------------------------------------------
  フッターの外（上）に表示するナビゲーション（← Back / Home）
------------------------------------------------------- */
.footer-nav-outer {
  text-align: center;          /* 中央揃え */
  padding: 2.5em 0 1.5em;      /* 上に余白を多め、下にも間隔を確保 */
  background: none;            /* 背景なし、本文の延長に見せる */
  display: block;              /* ブロックとして明示 */
}

/* 各リンクの共通スタイル */
.footer-link {
  margin: 0 1.2em;             /* リンク間の余白 */
  color: #1b2d4a;              /* 濃藍で統一感を持たせる（または #223344） */
  font-size: 14px;             /* 控えめなサイズでページ末尾に合う */
  text-decoration: underline; /* 下線でリンクとわかるように */
  opacity: 0.9;                /* 少し薄めで静かな存在感 */
  transition: opacity 0.3s ease;
}

.footer-link:hover {
  opacity: 1;
  text-decoration: none;
}



/* ------------------------------------------------------
  鼓動を表現するseparator
------------------------------------------------------- */

.pulse-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 5em auto;
}

.pulse-line {
  width: 100%;
  display: block;
}

.pulse-glow {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: #f5f5f5;
  animation: pulse-move 5.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse-move {
  0% {
    left: -4px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    left: 100%;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}


/* 20250420追記 */

@media screen and (max-width: 768px) {
  .custom-h1 {
    margin-top: 0.3em !important;
    font-size: 1.8em !important;
    line-height: 1.3 !important;
  }

  .custom-h1 .indent-only {
    display: none;
  }

	
  /* H2調整：モバイル限定で小さく */
  .entry-content h2.intro-section {
    font-size: 1.4em !important;
    line-height: 1.4;
  }

  /* フッター内サイトタイトルは非表示のまま */
  .footer-bottom-logo {
    display: none;
  }

  /* フッターの高さを調整 */
  #footer {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  #footer-in {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .footer-bottom {
    padding: 0.4em 0 !important; /* ←ここで高さ調整 */
    margin: 0 !important;
  }

  .footer-bottom-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
  }

  .footer-bottom-content .copyright {
    margin: 0 !important;
  }
}


/* -------------------------------------
   RoJリンク用：記事下のクロスサイト案内
   表示例：Also available: Reality of J...
   ------------------------------------- */
.cross-site-link {
  text-align: center;          /* 中央寄せで落ち着いた印象に */
  margin: 2em 0 1em;           /* 上にゆったり、下は控えめ */
  font-size: 1.1em;            /* 視認性を高める少し大きめのサイズ */
  color: #223344;              /* 本文と調和したダークブルー */
  font-style: italic;          /* 全体にやわらかさを添える斜体 */
}

.cross-site-link a {
  color: #2a7f78;              /* リンク色：深めの青緑で落ち着いた誘導 */
  text-decoration: underline;  /* 明確にリンクとわかるように */
  font-style: normal;          /* 読みやすさのため、リンクだけ斜体を解除 */
}


/* ======================================
   カテゴリページ用：右下三角形画像のフロート表示
   ※ 画像ファイルは /img/スラッグ_triangle.png に配置
   ====================================== */
.category-bg-image {
  position: fixed;          /* スクロールしても常に右下に固定表示 */
  right: 0;                 /* 右端にピッタリ寄せる */
  bottom: 0;                /* 下端にピッタリ寄せる */
  width: 50vw;              /* ← サイズ拡大 */
  opacity: 0.30;            /* ← やや濃く */
  pointer-events: none;     /* 背景なのでクリック干渉しないように */
  z-index: 0;               /* 背景レイヤーとして一番奥に配置 */
}


/* ======================================
   カテゴリページ：カテゴリ名中央寄せ
   ====================================== */
.category-title {
  text-align: center;
  font-family: 'Crimson Pro', serif;
  margin-bottom: 0.5em;
  color: #223344;
}

.category-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background-color: #223344;
  margin: 0.5em auto 1.5em auto;
  opacity: 0.2;
  border-radius: 1px;
}

.intro-section h1.category-title {
  font-size: 3em;
  font-weight: 200;
}


/* ======================================
   カテゴリページ：記事間の縦スペースを明示的に確保
   ====================================== */

.category-posts {
  /* display や gap は削除 */
}

/* 各記事のスタイル：幅制限＋下マージン */
.category-post {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 6.0em auto; /* 上左右0、下4.5em */
}

/* 最後の記事の下だけ余白を消す */
.category-post:last-child {
  margin-bottom: 0;
}


/* 左寄せ：ブロックを左に寄せてテキスト左揃え */
.article-left {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

/* 右寄せ：ブロックを右に寄せてテキスト右揃え */
.article-right {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}


/* ======================================
   カテゴリページ：記事タイトルと抜粋
   ====================================== */

.category-post .post-title {
  font-family: 'Crimson Pro', serif;
  color: #223344;
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: 0.3em;
}

.category-post .post-excerpt {
  font-family: 'Spectral', serif;
  color: #223344;
  font-weight: 300;
  font-size: 0.95em;
  line-height: 1.6;
}

/* ======================================
   カテゴリページ：リンク装飾
   ====================================== */

.category-post a {
  text-decoration: none;
}

.category-post a:hover {
  text-decoration: underline;
}


/* ======================================
   カテゴリページ：記事リンクの装飾（ホバーアニメーション）
   ====================================== */

.category-post a {
  text-decoration: none;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.category-post a:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);  /* 薄くてぼんやり */
  opacity: 0.88;
  text-decoration: none;
}


/* カテゴリページ、投稿ページのバウンス防止 */
html, body {
  overscroll-behavior: none;
}

/* トップページだけ overscroll を許可 */
body.home {
  overscroll-behavior-y: auto !important;
  overscroll-behavior-x: auto !important;
}

}

/* 会話文の行間と縦線調整（強化版） */
blockquote {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


.intro-section blockquote {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-left: none !important;
  padding-left: 0.8em !important;
  margin-top: 0.8em !important;
  margin-bottom: 0.8em !important;
}

/* 全体の本文（.intro-section） */
.intro-section p {
  line-height: 1.7 !important;     /* 今よりやや詰める */
  margin-top: 0.8em !important;
  margin-bottom: 0.8em !important;
}

.intro-section blockquote p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}