@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&family=Zen+Kaku+Gothic+New:wght@500;700&family=Zen+Maru+Gothic:wght@700&display=swap');

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（nazo.imakoreda.com）
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* =========================================================
 * レトロSFデザイン ステップ1：色とフォント
 * ======================================================= */

/* ----- 色の設定（ここを変えると全体の色が変わる） ----- */
:root {
  --retro-bg: #f2e3c6;      /* 背景のクリーム色 */
  --retro-paper: #fbf3e2;   /* 記事・サイドバーの紙の色 */
  --retro-ink: #2b2118;     /* 文字・枠の濃い茶色 */
  --retro-sub: #4a3b2c;     /* 日付などの薄い文字 */
  --retro-orange: #e0843c;  /* アクセント（オレンジ） */
  --retro-teal: #1d5f5f;    /* アクセント（青緑） */
  --retro-line: #e6d3ad;    /* 線・薄い背景 */
}

/* ----- 全体の背景・文字・フォント ----- */
body {
  background: var(--retro-bg);
  color: var(--retro-ink);
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 本文の文字をくっきり */
.entry-content {
  color: #1f1811;
}

/* ----- リンクの色 ----- */
a {
  color: var(--retro-teal);
}

a:hover {
  color: var(--retro-orange);
}

/* =========================================================
 * レトロSFデザイン ステップ2：ヘッダー
 * ======================================================= */

/* ----- ヘッダー全体（右上にオレンジの丸と輪っか） ----- */
.header-container,
.header {
  background: var(--retro-bg);
}

.header-container {
  position: relative;
  overflow: hidden;
}

.header-container::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -150px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: var(--retro-orange);
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

.header-container::after {
  content: "";
  position: absolute;
  right: 170px;
  top: 40px;
  width: 340px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--retro-teal);
  transform: rotate(-12deg);
  z-index: 0;
  pointer-events: none;
}

.header,
.navi {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* ----- サイト名とキャッチコピーを左寄せで縦に並べる ----- */
.header-in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  height: auto;
  min-height: 0;
  padding: 36px 0 20px;
}

.header-in .logo-header {
  order: 1;
  margin: 0;
  padding: 0;
  text-align: left;
}

.logo .site-name-text,
.site-name-text {
  font-family: 'RocknRoll One', sans-serif;
  font-weight: 400;
  font-size: 40px;
  color: var(--retro-ink);
  letter-spacing: 0.06em;
}

.header-in .site-name,
.header-in .site-name-text-link {
  margin: 0;
  padding: 0;
}

.site-name-text-link:hover .site-name-text {
  color: var(--retro-teal);
}

/* キャッチコピー：青緑の丸いラベル */
.header-in .tagline {
  order: 2;
  display: inline-block;
  margin: 0;
  padding: 6px 16px;
  background: var(--retro-teal);
  color: var(--retro-paper);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
}

/* ----- グローバルメニュー：丸いボタン ----- */
.navi-in > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 0 28px;
}

.navi-in > ul > li {
  width: auto;
  height: auto;
  line-height: 1.5;
}

.navi-in > ul > li > a {
  display: block;
  padding: 10px 22px;
  background: var(--retro-paper);
  border: 2px solid var(--retro-ink);
  border-radius: 999px;
  color: var(--retro-ink);
  font-weight: 700;
  font-size: 15px;
  transition: background 0.2s, color 0.2s;
}

.navi-in > ul > li > a:hover,
.navi-in > ul > li.current-menu-item > a,
.navi-in > ul > li.current-post-ancestor > a,
.navi-in > ul > li.current-category-ancestor > a {
  background: var(--retro-ink);
  color: var(--retro-paper);
}

/* ----- カテゴリラベル（アイキャッチ左上など）：オレンジの丸ラベル ----- */
.cat-label {
  background: var(--retro-orange);
  color: var(--retro-ink);
  border: none;
  border-radius: 999px;
  padding: 3px 12px;
  font-weight: 700;
  top: 10px;
  left: 10px;
}

.cat-link {
  background: var(--retro-orange);
  color: var(--retro-ink);
  border-radius: 999px;
  font-weight: 700;
}

.cat-link:hover {
  background: var(--retro-teal);
  color: var(--retro-paper);
}

/* ----- 記事・サイドバーの背景 ----- */
.main,
.sidebar {
  background: var(--retro-paper);
}

/* ----- 記事タイトル・一覧タイトル ----- */
.entry-title,
.archive-title {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  color: var(--retro-ink);
  line-height: 1.45;
}

/* ----- 本文の見出し ----- */
.article h2 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  background: var(--retro-line);
  color: var(--retro-ink);
  border: none;
  border-radius: 12px;
}

.article h3 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  color: var(--retro-ink);
  border-color: var(--retro-teal);
}

/* =========================================================
 * レトロSFデザイン ステップ3：記事本文
 * ======================================================= */

/* ----- 記事エリア：太い枠と影 ----- */
.main {
  border: 3px solid var(--retro-ink);
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--retro-ink);
}

/* ----- 「確かな事実」「語られている説」「今も残る謎」の丸アイコン ----- */
.article h2.nazo-h {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.article h2.nazo-h::before {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  font-size: 0.85em;
  line-height: 1;
}

.article h2.nazo-h-fact::before {
  content: "\4e8b"; /* 事 */
  background: var(--retro-teal);
  color: var(--retro-paper);
}

.article h2.nazo-h-theory::before {
  content: "\8aac"; /* 説 */
  background: var(--retro-orange);
  color: var(--retro-ink);
}

.article h2.nazo-h-mystery::before {
  content: "\8b0e"; /* 謎 */
  background: var(--retro-ink);
  color: var(--retro-paper);
}

/* ----- 「僕のひとりごと」：青緑のボックス ----- */
.entry-content .nazo-hitorigoto {
  margin: 3.5em 0 2em;
  padding: 1.6em 1.8em 0.4em;
  background: var(--retro-teal);
  color: var(--retro-paper);
  border-radius: 20px;
}

.entry-content .nazo-hitorigoto h2 {
  margin: 0 0 1em;
  padding: 0 0 0.6em;
  background: none;
  border: none;
  border-bottom: 2px dashed rgba(251, 243, 226, 0.5);
  border-radius: 0;
  color: var(--retro-paper);
  font-size: 1.2em;
}

.entry-content .nazo-hitorigoto p {
  color: var(--retro-paper);
}

.entry-content .nazo-hitorigoto a {
  color: #f5c89a;
}

/* =========================================================
 * レトロSFデザイン ステップ4：サイドバー
 * ======================================================= */

/* ----- サイドバー全体：記事と同じ太い枠と影 ----- */
.sidebar {
  border: 3px solid var(--retro-ink);
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--retro-ink);
}

/* ----- ウィジェットの見出し：オレンジの丸＋下線 ----- */
.sidebar h2,
.sidebar h3,
.sidebar .widget-sidebar-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.8em;
  padding: 0 0 0.5em;
  background: none;
  border: none;
  border-bottom: 3px solid var(--retro-ink);
  border-radius: 0;
  color: var(--retro-ink);
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 1.1em;
}

.sidebar h2::before,
.sidebar h3::before,
.sidebar .widget-sidebar-title::before {
  content: "";
  flex: 0 0 auto;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--retro-orange);
}

.sidebar h2::after,
.sidebar h3::after,
.sidebar .widget-sidebar-title::after {
  display: none;
}

/* ----- リンク一覧（最近の投稿・カテゴリー・アーカイブ） ----- */
.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar li {
  margin: 0;
  border-bottom: 1px dashed var(--retro-line);
}

.sidebar li:last-child {
  border-bottom: none;
}

.sidebar li a {
  display: block;
  padding: 0.6em 0.2em;
  color: var(--retro-ink);
  line-height: 1.6;
  text-decoration: none;
}

.sidebar li a:hover {
  color: var(--retro-teal);
  background: var(--retro-line);
  border-radius: 8px;
}

/* マウスを乗せた時の背景（Cocoon標準の青っぽい色をクリーム系に） */
.a-wrap:hover {
  background-color: var(--retro-line);
}

/* ----- 検索フォーム：丸い入力欄とオレンジのボタン ----- */
.sidebar .wp-block-search__label {
  font-weight: 700;
  color: var(--retro-ink);
}

.sidebar .wp-block-search__input,
.sidebar .search-edit {
  background: var(--retro-paper);
  border: 2px solid var(--retro-ink);
  border-radius: 999px;
  padding: 0.6em 1em;
  color: var(--retro-ink);
}

.sidebar .wp-block-search__button {
  background: var(--retro-orange);
  color: var(--retro-ink);
  border: 2px solid var(--retro-ink);
  border-radius: 999px;
  padding: 0.6em 1.2em;
  font-weight: 700;
}

.sidebar .wp-block-search__button:hover {
  background: var(--retro-teal);
  color: var(--retro-paper);
}

/* ----- フッター ----- */
.footer {
  background: var(--retro-ink);
  color: var(--retro-paper);
}

.footer a {
  color: var(--retro-paper);
}

.footer a:hover {
  color: var(--retro-orange);
}

/* ----- アイキャッチ：縦長・横長の画像も16:9にそろえる ----- */
.eye-catch img,
.eye-catch-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

/* ----- 記事一覧・関連記事のサムネイルも同じ比率に ----- */
.entry-card-thumb img,
.related-entry-card-thumb img,
.widget-entry-card-thumb img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ----- 本文の読みやすさ（行間・段落の間隔を広めに） ----- */
.entry-content p {
  line-height: 2;
  margin-bottom: 1.8em;
}

.entry-content h2 {
  margin-top: 3em;
  margin-bottom: 1.4em;
}

.entry-content h3 {
  margin-top: 2.4em;
  margin-bottom: 1.2em;
}

.entry-content ul,
.entry-content ol {
  margin-bottom: 1.8em;
}

.entry-content li {
  line-height: 1.9;
  margin-bottom: 0.6em;
}

/* ----- 参考情報のボックス（レトロSFの色に変更） ----- */
.entry-content .nazo-refs {
  margin: 3.5em 0 2em;
  padding: 1.4em 1.6em 1.2em;
  background: var(--retro-bg);
  border: 1px solid var(--retro-line);
  border-radius: 12px;
}

.entry-content .nazo-refs h2 {
  margin: 0 0 0.9em;
  padding: 0 0 0.6em;
  background: none;
  border: none;
  border-bottom: 2px solid var(--retro-teal);
  border-radius: 0;
  color: var(--retro-ink);
  font-size: 1.05em;
  letter-spacing: 0.05em;
}

.entry-content .nazo-refs h2::before,
.entry-content .nazo-refs h2::after {
  display: none;
}

.entry-content .nazo-refs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry-content .nazo-refs li {
  position: relative;
  margin: 0;
  padding: 0.55em 0 0.55em 1.2em;
  border-bottom: 1px dashed var(--retro-line);
  font-size: 0.85em;
  line-height: 1.6;
}

.entry-content .nazo-refs li:last-child {
  border-bottom: none;
}

.entry-content .nazo-refs li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 1.05em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--retro-orange);
}

.entry-content .nazo-refs a {
  color: var(--retro-sub);
  text-decoration: none;
  word-break: break-word;
}

.entry-content .nazo-refs a:hover {
  color: var(--retro-orange);
  text-decoration: underline;
}

/* ----- 画像のクレジット ----- */
.entry-content .nazo-credit {
  margin: 1.5em 0 0;
  padding: 0.8em 1em;
  border-left: 3px solid var(--retro-line);
  background: transparent;
  color: var(--retro-sub);
  font-size: 0.75em;
  line-height: 1.7;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  .logo .site-name-text,
  .site-name-text {
    font-size: 28px;
  }

  .header-in {
    padding: 22px 0 14px;
    gap: 10px;
  }

  .header-in .tagline {
    font-size: 12px;
    border-radius: 14px;
  }

  .header-container::before {
    width: 200px;
    height: 200px;
    right: -80px;
    top: -90px;
  }

  .header-container::after {
    display: none;
  }

  .main {
    border-width: 2px;
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--retro-ink);
  }

  .entry-content .nazo-hitorigoto {
    padding: 1.2em 1.2em 0.2em;
    border-radius: 14px;
  }

  .sidebar {
    border-width: 2px;
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--retro-ink);
  }

  .entry-content p {
    line-height: 1.9;
    margin-bottom: 1.6em;
  }

  .entry-content .nazo-refs {
    padding: 1.1em 1.1em 0.9em;
  }
}