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

/* =========================================================================
   emotazu.com デザインリニューアル CSS
   えもたずウェブ最終デザイン.ai（2026-08-20）準拠
   貼り付け先: 外観 → テーマファイルエディター → cocoon-child-master / style.css の末尾
   （このファイルがマスター。WordPress側を直接編集したら必ずここへ反映すること）

   前提: WordPress + Cocoon + cocoon-child-master 子テーマ
   画像URL: /wp-content/uploads/2026/09/...（2026-09-16 アップロード済み・実URL反映済み）
            画像を上げ直すと年月フォルダが変わるので、その時はここを一括置換する
   ========================================================================= */

/* --- Webフォント（既定オフ）-----------------------------------------------
   Mac / iOS は Hiragino Maru Gothic ProN が標準搭載なので、読み込まなくても
   丸ゴシックで表示される。Windows / Android にも丸ゴシックを効かせたい場合だけ
   次の1行を有効化する。日本語サブセットで +100〜300KB 増えるため、
   有効化したら PageSpeed Insights で前後比較すること。
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap");
-------------------------------------------------------------------------- */

/* =========================================================
   1. デザイントークン
   ========================================================= */
:root {
  --emo-brown: #422620;   /* 文字・線（主役） */
  --emo-mint:  #DAEDEA;   /* 背景 */
  --emo-lime:  #EBF2AD;   /* アクセント面 */
  --emo-pink:  #DD57A6;   /* 差し色（面積は小さく） */
  --emo-cream: #FBEEDC;   /* 補助面 */
  --emo-sub:   #8A7A70;   /* 日付などのサブ文字 */
  --emo-white: #FFFFFF;

  --emo-radius:      24px; /* カード */
  --emo-radius-s:    16px; /* サムネイル */
  --emo-shadow:      0 6px 18px rgba(66, 38, 32, .08);
  --emo-border:      3px solid var(--emo-brown);
  --emo-font-round:  "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Quicksand", sans-serif;

  /* 画像のベースURL（アップロード先に合わせて書き換える） */
  --emo-img: "/wp-content/uploads/2026/09";
}

/* =========================================================
   2. ベース
   ========================================================= */
body {
  background-color: var(--emo-mint);
  color: var(--emo-brown);
}

#container,
.wrap { color: var(--emo-brown); }

a { color: var(--emo-brown); }
a:hover { color: var(--emo-pink); }

/* 本文まわりの白面（記事本文・固定ページ）をカード化 */
main.main,
#sidebar .widget,
.article,
.related-entries,
.comment-area {
  background-color: var(--emo-white);
  border-radius: var(--emo-radius);
  box-shadow: var(--emo-shadow);
  border: none;
}

/* Cocoon の余白調整（カード化で内側に余白が必要） */
main.main { padding: 32px 28px; }

/* =========================================================
   3. ヘッダー
   ========================================================= */
#header-container,
.header-container { background-color: var(--emo-mint); }

#header .header-in { padding: 10px 0; }

/* ロゴ画像（Cocoon設定 → ヘッダー → ヘッダーロゴ で画像を設定した場合） */
.logo-header img {
  max-height: 56px;
  width: auto;
}

/* ロゴを画像化するまでの暫定：テキストロゴを丸ゴシック・ブラウンに */
.logo-header .site-name-text {
  font-family: var(--emo-font-round);
  font-weight: 700;
  color: var(--emo-brown);
}

/* キャッチフレーズはロゴ画像に含まれるので非表示 */
.tagline { display: none; }

/* グローバルナビ */
#navi .navi-in > ul { background-color: transparent; }

#navi .navi-in > ul > li > a {
  font-family: var(--emo-font-round);
  font-weight: 700;
  color: var(--emo-brown);
  background-color: transparent;
  letter-spacing: .04em;
}

#navi .navi-in > ul > li > a:hover {
  color: var(--emo-pink);
  background-color: transparent;
}

/* Cocoonが出力する「ヘッダー文字色=白」を打ち消す
   実測（2026-09-16）: Cocoonは head 内のインラインCSSで
   `.header,.header .site-name-text,#navi .navi-in a,#navi .navi-in a:hover{color:#fff}`
   を出力する。ミント背景に白文字は読めないのでブラウンに戻す。
   子テーマCSSはそのインラインより後に読まれるので !important は不要。 */
.header,
.header .site-name-text,
#navi .navi-in a { color: var(--emo-brown); }

#navi .navi-in a:hover {
  color: var(--emo-pink);
  background-color: transparent;
}

/* モバイルメニューボタン */
.menu-drawer,
#navi-menu-content { background-color: var(--emo-mint); }

/* =========================================================
   4. ヘッダーバナー
   インデックス上ウィジェット（カスタムHTML）に
   <div class="emo-banner"></div> を置くだけで表示される
   ========================================================= */
.emo-banner {
  width: 100%;
  aspect-ratio: 2.32 / 1;
  background-image: url("/wp-content/uploads/2026/09/header-banner.webp");
  background-size: cover;
  background-position: center;
  border-radius: var(--emo-radius);
  margin-bottom: 40px;
}

@media screen and (max-width: 834px) {
  .emo-banner {
    background-image: url("/wp-content/uploads/2026/09/header-banner-sp.webp");
    border-radius: var(--emo-radius-s);
    margin-bottom: 28px;
  }
}

/* =========================================================
   5. 記事カード（インデックス・関連記事）
   ========================================================= */
.entry-card-wrap,
.related-entry-card-wrap,
.vertical-card-wrap {
  background-color: var(--emo-white);
  border-radius: var(--emo-radius);
  box-shadow: var(--emo-shadow);
  border: none;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.entry-card-wrap:hover,
.related-entry-card-wrap:hover,
.vertical-card-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(66, 38, 32, .14);
  background-color: var(--emo-white);
}

.entry-card-thumb img,
.vertical-card-thumb img,
.related-entry-card-thumb img {
  border-radius: var(--emo-radius-s);
}

.entry-card-title,
.vertical-card-title,
.related-entry-card-title {
  color: var(--emo-brown);
  font-weight: 700;
  line-height: 1.55;
}

.entry-card-meta,
.vertical-card-meta,
.related-entry-card-meta,
.post-date,
.post-update {
  color: var(--emo-sub);
  font-size: 13px;
}

/* カテゴリピル（デザインのカフェ／旅行／銭湯の見た目をCSSで再現）
   画像ではなくCSSなので、カテゴリが増減しても作り直し不要 */
.cat-label,
.entry-card-categorys .category-link,
.cat-link {
  background-color: var(--emo-lime);
  color: var(--emo-brown);
  border: 2px solid var(--emo-brown);
  border-radius: 999px;
  font-family: var(--emo-font-round);
  font-size: 13px;
  font-weight: 700;
  padding: 2px 14px;
  line-height: 1.6;
}

/* サムネイル左上のカテゴリラベルはデザインに合わせてカード下へ寄せる */
.entry-card-thumb .cat-label {
  top: auto;
  bottom: 8px;
  left: 8px;
}

/* --- トップページだけ「白パネル1枚の中に3カード」にする（モックアップ準拠）---
   カテゴリページ・アーカイブは1枚ずつの白カードのまま */
body.front-top-page main.main {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}

body.front-top-page #list {
  background-color: var(--emo-white);
  border-radius: var(--emo-radius);
  box-shadow: var(--emo-shadow);
  padding: 28px 24px 32px;

  /* ---- 3カラム化 ----
     Cocoon設定の「縦型カード3列」は使わない。あれは専用サイズのサムネイルを
     要求し、未生成だと原寸画像にフォールバックしてトップが159KB→5,645KB（35倍）
     に膨らむため（2026-09-16 実測）。エントリーカードのまま（=既存の
     320x180サムネイルを使ったまま）CSSで3カラムに組み替える。 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 20px;
}

/* エントリーカードは既定が「サムネ左・本文右」の横並びなので、縦積みに変える */
body.front-top-page .entry-card-thumb {
  float: none;
  width: 100%;
  margin: 0;
  position: relative;
  padding-bottom: 34px;   /* カテゴリピルを画像の下に置くための余白 */
}

body.front-top-page .entry-card-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* カテゴリピルは画像に重ねず、下の余白に置く（モックアップ準拠） */
body.front-top-page .entry-card-thumb .cat-label {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
}

body.front-top-page .entry-card-content {
  margin: 0;
  padding: 0;
}

/* 抜粋はモックアップに無いので出さない（タイトルと日付だけ） */
body.front-top-page .entry-card-snippet { display: none; }

body.front-top-page .entry-card-title {
  font-size: 17px;
  margin: 0 0 6px;
}

@media screen and (max-width: 834px) {
  body.front-top-page #list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media screen and (max-width: 480px) {
  body.front-top-page #list { grid-template-columns: 1fr; padding: 20px 16px 24px; }
}

/* パネルの先頭に「新着記事」見出し画像を出す（ウィジェット設置が不要になる）
   content に文字を入れて text-indent で画面外へ送ることで、見た目は画像のまま
   スクリーンリーダーには「新着記事」が読まれる（他の .emo-h 見出しと同じ方式） */
body.front-top-page #list::before {
  content: "新着記事";
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: 240px;
  height: 44px;
  margin-bottom: 20px;
  flex-basis: 100%;      /* Cocoonのカード型インデックス（flex）用 */
  grid-column: 1 / -1;   /* grid実装だった場合用 */
  background: url("/wp-content/uploads/2026/09/heading-new-posts.webp") left center / contain no-repeat;
}

/* グリッド/フレックス内で画像がはみ出すのを防ぐ保険 */
body.front-top-page #list > * { min-width: 0; }

body.front-top-page .entry-card-wrap,
body.front-top-page .entry-card-wrap:hover {
  background-color: transparent;
  box-shadow: none;
}

/* =========================================================
   6. 見出し（手書きフォントは画像・それ以外はCSS）
   ========================================================= */

/* 画像見出し：ウィジェットタイトル等に
   <span class="emo-h emo-h--new-posts"></span> を置いて使う */
.emo-h {
  display: block;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-indent: -9999px;   /* 読み上げ用テキストは要素内に残す */
  overflow: hidden;
  height: 44px;
  margin-bottom: 20px;
}
.emo-h--new-posts { background-image: url("/wp-content/uploads/2026/09/heading-new-posts.webp"); width: 240px; }
.emo-h--top3      { background-image: url("/wp-content/uploads/2026/09/heading-top3.webp");      width: 280px; }
.emo-h--about-us  { background-image: url("/wp-content/uploads/2026/09/heading-about-us.webp");  width: 240px; }
.emo-h--category  { background-image: url("/wp-content/uploads/2026/09/heading-category.webp");  width: 260px; margin: 0 auto 24px; background-position: center; }

/* 記事本文の見出しは第19節（記事ページのデザイン）へ移した */

/* =========================================================
   7. サイドバー / ウィジェット
   ========================================================= */
#sidebar .widget {
  padding: 24px 20px;
  margin-bottom: 28px;
}

.widget-sidebar-standard .widget-sidebar-standard-title,
#sidebar .widget-title {
  font-family: var(--emo-font-round);
  color: var(--emo-brown);
  background-color: transparent;
  border: none;
  border-bottom: 3px dotted var(--emo-lime);
  font-size: 18px;
  padding-bottom: 8px;
}

/* 人気記事ウィジェット＝「アクセス数TOP3」。番号をライム円に */
.widget-entry-cards .widget-entry-card-link { border-radius: var(--emo-radius-s); }

.popular-entry-card-rank,
.widget-entry-card-title ~ .rank,
.card-thumb .rank {
  display: inline-block;
  flex: 0 0 auto;
  background-color: var(--emo-lime);
  color: var(--emo-brown);
  border: 2px solid var(--emo-brown);
  border-radius: 50%;
  font-family: var(--emo-font-round);
  font-weight: 700;
  width: 28px;
  height: 28px;
  line-height: 24px;
  text-align: center;
}

/* プロフィールウィジェット＝「ABOUT US」 */
.author-box {
  background-color: var(--emo-white);
  border: none;
  border-radius: var(--emo-radius);
  box-shadow: var(--emo-shadow);
  padding: 24px 20px;
}

.author-box .author-thumb img,
.emo-face {
  background-color: var(--emo-lime);
  border-radius: 50%;
  border: 3px solid transparent;
}

.author-box .author-name { font-family: var(--emo-font-round); }

/* ABOUT US のキャッチコピー画像（カスタムHTMLウィジェット用） */
.emo-about-lead {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: 0 auto;
}

/* キャラクターの丸アイコン2つ（カスタムHTMLウィジェット用） */
.emo-faces {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-top: 20px;
}
.emo-faces figure {
  margin: 0;
  text-align: center;
  font-family: var(--emo-font-round);
  font-weight: 700;
}
.emo-faces img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  object-position: top;
  background-color: var(--emo-lime);
  border-radius: 50%;
}

/* トップページの2カラム（アクセス数TOP3 ／ ABOUT US） */
.emo-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.emo-two-col > * { min-width: 0; }

.emo-card {
  background-color: var(--emo-white);
  border-radius: var(--emo-radius);
  box-shadow: var(--emo-shadow);
  padding: 24px 20px;
}

@media screen and (max-width: 834px) {
  .emo-two-col { grid-template-columns: 1fr; }
  .emo-faces { gap: 20px; }
}

/* 「プロフィールをみる」ボタン（画像ではなくCSSで再現） */
.emo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 420px;
  margin: 20px auto 0;
  padding: 14px 24px;
  background-color: var(--emo-white);
  color: var(--emo-brown);
  border: var(--emo-border);
  border-radius: 999px;
  font-family: var(--emo-font-round);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .18s ease;
}
.emo-btn::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--emo-pink);
  border-right: 3px solid var(--emo-pink);
  transform: rotate(45deg);
}
.emo-btn:hover { background-color: var(--emo-lime); color: var(--emo-brown); }

/* =========================================================
   8. CATEGORY 導線（モックアップ未設計のため新規デザイン）
   インデックス下ウィジェットにカスタムHTMLで設置する
   ========================================================= */
.emo-category-nav {
  margin: 56px 0;
  text-align: center;
}

.emo-category-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.emo-category-list a {
  display: block;
  padding: 24px 12px;
  background-color: var(--emo-lime);
  border: var(--emo-border);
  border-radius: var(--emo-radius);
  font-family: var(--emo-font-round);
  font-size: 18px;
  font-weight: 700;
  color: var(--emo-brown);
  text-decoration: none;
  transition: transform .18s ease;
}
.emo-category-list a:hover { transform: translateY(-3px); color: var(--emo-brown); }
.emo-category-list .emo-category-count {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--emo-sub);
}

@media screen and (max-width: 640px) {
  .emo-category-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* =========================================================
   9. フッター
   ========================================================= */
#footer,
.footer-container {
  background-color: transparent;
  background-image: url("/wp-content/uploads/2026/09/footer-illust.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  color: var(--emo-brown);
  /* 犬イラストが帯の上にはみ出す分の余白 */
  padding-top: 120px;
  margin-top: 40px;
}

#footer a,
.footer-bottom a { color: var(--emo-brown); }
#footer a:hover { color: var(--emo-pink); }

.footer-bottom { border: none; }

#navi-footer .menu-footer a {
  font-family: var(--emo-font-round);
  font-weight: 500;
}

/* フッターのテキストロゴは小さく（ロゴ画像を設定するなら不要） */
.logo-footer .site-name-text { font-size: 15px; }

.copyright { color: var(--emo-brown); opacity: .75; }

@media screen and (max-width: 834px) {
  #footer,
  .footer-container {
    padding-top: 70px;
    background-size: 160% auto;   /* SPは犬が小さくなりすぎないよう拡大 */
  }
}

/* =========================================================
   10. 細部
   ========================================================= */

/* 検索フォーム */
.search-box .search-edit,
#sidebar .search-edit {
  border: var(--emo-border);
  border-radius: 999px;
  background-color: var(--emo-white);
  padding: 10px 18px;
  color: var(--emo-brown);
}
.search-box .search-submit { color: var(--emo-brown); }

/* パンくず */
#breadcrumb,
.breadcrumb { color: var(--emo-sub); }
.breadcrumb a { color: var(--emo-sub); }

/* ページャ */
.pagination .page-numbers {
  border: 2px solid var(--emo-brown);
  border-radius: 999px;
  color: var(--emo-brown);
  background-color: var(--emo-white);
}
.pagination .current,
.pagination a:hover {
  background-color: var(--emo-lime);
  color: var(--emo-brown);
}

/* 目次は第19節（記事ページのデザイン）へ移した */

/* ブログカード（内部リンク） */
.blogcard {
  border: 2px solid var(--emo-brown);
  border-radius: var(--emo-radius-s);
  background-color: var(--emo-white);
}

/* Instagram アイコン（ヘッダー等に <a class="emo-ig">）
   ⚠️ 2026-09-16 の決定により現状は未使用（アカウント無しのため出さない）。
   将来アカウントを作ったら icon-instagram.png をアップロードするだけで使える。 */
.emo-ig {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url("/wp-content/uploads/2026/09/icon-instagram.png");
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  vertical-align: middle;
}

/* 「トップへ戻る」ボタン（Cocoon設定の #f8b500 オレンジを上書き） */
.go-to-top .go-to-top-button {
  background-color: var(--emo-brown);
  color: var(--emo-white);
}

/* モバイル微調整 */
@media screen and (max-width: 834px) {
  main.main { padding: 20px 16px; border-radius: var(--emo-radius-s); }
}

/* =========================================================
   11. Cocoonのキーカラー（#4da8da）が残る箇所の打ち消し
   実測 2026-09-21。Cocoonは head 内のインラインCSSで下記を出力しており、
   セレクタが本CSSより強い／本CSSが拾えていなかった4箇所が水色のまま残っていた。
   子テーマCSSはインラインより後に読まれるので !important は不要。
   ========================================================= */

/* ① ロゴ帯。#header-container は塗っていたが、内側の .header が塗られていなかった
   Cocoon: .header{background-color:#4da8da} */
.header { background-color: var(--emo-mint); }

/* ② アイキャッチ上のカテゴリラベル
   Cocoon: .eye-catch .cat-label{...} の方が .cat-label より強い */
.eye-catch .cat-label {
  background-color: var(--emo-lime);
  color: var(--emo-brown);
  border: 2px solid var(--emo-brown);
  border-radius: 999px;
  padding: 2px 14px;
}

/* ③ サイドバーの見出し。ブロックエディタ製なので h2.wp-block-heading であり、
   .widget-title では拾えていなかった
   Cocoon: .article h3, .sidebar h2, .sidebar h3{border-left:5px solid #4da8da} */
.sidebar h2,
.sidebar h3 {
  font-family: var(--emo-font-round);
  color: var(--emo-brown);
  background-color: transparent;
  border: none;
  border-bottom: 3px dotted var(--emo-lime);
  border-radius: 0;
  font-size: 18px;
  padding: 0 0 8px;
}

/* ④ 「次のページ」ボタン（キーカラーの枠線） */
.key-btn,
.pagination-next-link {
  background-color: var(--emo-white);
  border-color: var(--emo-brown);
  color: var(--emo-brown);
  border-radius: 999px;
}
.key-btn:hover,
.pagination-next-link:hover {
  background-color: var(--emo-lime);
  color: var(--emo-brown);
}

/* ⑤ スマホ下部のフッターボタン帯
   Cocoon: .blogcard-label, .cat-link, .cat-label, .tag-link, ... と同じ
   共通ルールでキーカラーに塗られている */
.mobile-footer-menu-buttons,
.mobile-header-menu-buttons,
.menu-button-in {
  background-color: var(--emo-lime);
  color: var(--emo-brown);
}

/* ボタン個々は Cocoon が .mobile-menu-buttons .menu-button > a （詳細度 0,2,1）
   で塗っているので、同じセレクタで上書きする */
.mobile-menu-buttons .menu-button > a {
  background-color: var(--emo-lime);
  color: var(--emo-brown);
}

/* =========================================================
   12. ダークモードの打ち消し（スキン simple-darkmode 対策）
   実測 2026-09-21: OSがダークモードだと記事本文が
   「白背景 #ffffff に白文字 #faf8f7」になり読めなかった。
   スキンが @media (prefers-color-scheme: dark) で :root 変数を
   暗色に差し替えるため。本デザインはライト1本で完結させる方針なので、
   同じメディアクエリでライト時の値に戻す。
   子テーマCSSはスキンより後に読まれるので :root 同士で上書きできる。
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --text-main: #1c1a1a;
    --bg4: rgb(244, 244, 244);
    --bg3: #fff;
    --bg2: #ffffff;
    --bg1: #ebebeb;
    --bg1-on: #f0f8ffea;
    --underline-blue: #a8dafb;
    --underline: #ff9;
    --underline-red: #ffd0d1;
  }

  /* スキンが変数を使わず直接指定している箱所 */
  a { color: var(--emo-brown); }
  a:hover { color: var(--emo-pink); }
  .marker { background: var(--underline); color: var(--emo-brown); }
}

/* =========================================================
   13. 記事ページの余白とフッター高さの修正（2026-09-21）
   ========================================================= */

/* 白カードの左右余白が28pxしか無く、860px幅のカードに対して
   狭すぎて本文が端に寄って見えていたので広げる。
   トップページは body.front-top-page 側で padding:0 にしているので影響なし */
main.main { padding: 36px 48px; }

/* フッターの犬が上部で切れていた。
   背景画像は 1600x328（比 4.878:1）で、幅100%で表示すると
   高さは 100vw/4.878 = 約20.5vw 必要なのに、フッターの高さが
   226pxしか無く66px足りなかった（1440px時の実測）。
   幅に連動する vw で最低高さを確保する */
#footer,
.footer-container {
  min-height: 21vw;
  padding-top: 8vw;
}

@media screen and (max-width: 834px) {
  main.main { padding: 20px 16px; }
  /* SPは背景を160%に拡大しているので、必要な高さもその分増える */
  #footer,
  .footer-container {
    min-height: 33vw;
    padding-top: 12vw;
  }
}

/* =========================================================
   14. グローバルナビの影を消す（2026-09-21）
   Cocoonが .navi に box-shadow: 0 1px 3px rgba(0,0,0,.25) をかけており、
   ナビ部分だけが浮いたパネル（枠線）のように見えていた。
   ヘッダー帯と同じミントなので、影を消して一体に見せる */
#navi,
.navi {
  box-shadow: none;
}

/* =========================================================
   15. コンテンツ幅の左右余白（2026-09-21）
   画面幅1024pxで実測したところ、白カードがウィンドウ左端から5pxの位置にあり
   余白がほぼ無かった。Cocoonの .wrap（#header-in / #content-in / #footer-in）は
   左右パディングを持たず、ウィンドウが max-width より狭いと端に貼り付くため。
   box-sizing は border-box なので、パディングを足しても幅は破綻しない。
   ========================================================= */
#header-in,
#content-in,
#footer-in {
  padding-left: 24px;
  padding-right: 24px;
}

@media screen and (max-width: 480px) {
  #header-in,
  #content-in,
  #footer-in {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* =========================================================
   16. 本文の左右余白を画面幅に連動させる（2026-09-21）
   固定48pxだと画面幅によっては本文が左端に寄って見えるという指摘を受け、
   clamp で幅に応じて広がるようにした。
     375px → 約19px / 834px → 約42px / 1024px → 約51px / 1440px → 72px
   第13節の固定値と、第10・13節の 834px 以下の上書きを、これで統一する。
   ========================================================= */
main.main {
  padding: 36px clamp(16px, 5vw, 72px);
}

@media screen and (max-width: 834px) {
  main.main {
    padding: 24px clamp(16px, 5vw, 72px);
  }
}

/* =========================================================
   17. 白カードの二重化を解消（2026-09-21）★真因
   第2節で main.main と .article の両方に白カード（背景+影+角丸）を
   当てていたため、記事ページは「白カードの中に白カード」になっていた。
   内側の .article には余白が無く、本文が内側カードの左端に貼り付いていた。
   main.main にいくら padding を足しても解決しなかったのはこのため。

   → main は透明な器に戻し、白カードは中身の各ブロックが持つ。
     余白もそのブロック自身に持たせる（トップページと同じ構造になる）。
   ========================================================= */
main.main {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}

.article,
.related-entries,
.comment-area {
  padding: clamp(20px, 4vw, 56px);
}

/* 関連記事・コメントは記事カードと離して独立したカードに見せる */
.related-entries,
.comment-area {
  margin-top: 28px;
}

/* =========================================================
   18. サイドバーの折り返しとフッター文字の重なりを修正（2026-09-21）
   ========================================================= */

/* --- サイドバー ---
   第15節で #content-in に左右24pxの余白を足したため、1257px以上で
   Cocoonの固定幅（本文860＋サイドバー376）が内側幅1208pxに収まらず、
   flex-wrap でサイドバーが本文の下に折り返していた（1280/1440pxで実測）。
   折り返しを禁止し、本文側を縮めて吸収する。 */
@media screen and (min-width: 1024px) {
  #content-in {
    flex-wrap: nowrap;
    column-gap: 24px;
  }
  #content-in > main.main {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
  #content-in > #sidebar {
    flex: 0 0 auto;
    margin-left: 0;
    margin-right: 0;
  }
}

/* サイドバー自体の白背景を外す（中のウィジェットが1つずつ白カードなので二重になっていた） */
#sidebar {
  background-color: transparent;
  padding: 0;
}

/* --- フッター ---
   背景画像 1600x328 の縦構造を実測:
     0-177 透明 / 177-179 波線 / 179-313 ライムの帯 / 313-315 下線 / 315-328 透明
   帯の上端は画像の54.9%の位置。画像を下寄せにしていたため、余白を増やしても
   フッターごと伸びて帯も一緒に下がり、文字が波線に重なり続けていた。
   → 画像を上寄せにし、その上にライム単色レイヤーを重ねて下線より下を塗り延ばす
     （画像の下線と下の透明部分はこのレイヤーで隠れる）。
   幅100%表示での位置: 帯の上端 179/1600=11.2vw、下線 313/1600=19.6vw、画像の高さ 20.5vw */
#footer,
.footer-container {
  background-color: transparent;
  background-image:
    linear-gradient(var(--emo-lime), var(--emo-lime)),
    url("/wp-content/uploads/2026/09/footer-illust.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center top;
  background-size: 100% calc(100% - 19.2vw), 100% auto;
  min-height: 20.5vw;
  padding-top: calc(11.2vw + 28px);
  padding-bottom: 32px;
}

@media screen and (max-width: 834px) {
  /* SPは画像を160%に拡大しているので位置も1.6倍: 帯の上端17.9vw、下線31.3vw、画像高32.8vw */
  #footer,
  .footer-container {
    background-size: 100% calc(100% - 31vw), 160% auto;
    /* 160%拡大＋中央寄せだと右端の犬が画面外に切れるので、SPは右寄せにして犬を優先する */
    background-position: center bottom, right top;
    min-height: 32.8vw;
    padding-top: calc(17.9vw + 20px);
    padding-bottom: 24px;
  }
}

/* =========================================================
   19. 記事ページのデザイン（2026-10-13）
   デザイン案: site/theme/article-designs/（御岳山記事の「おしゃれ案」＝明朝の見出し・ナチュラル）
   投稿・固定ページの本文（.article）だけに効かせる。ヘッダー・フッター・サイドバー・トップは触らない。
   第6節にあった旧 .article h2/h3/h4（ライム帯の見出し）と第10節の .toc はこの節に置き換えた。

   見出しの明朝はWebフォントを読み込まず端末の明朝を使う（決定5：Webフォントはオフ）。
     Mac/iPhone = ヒラギノ明朝 / Windows = 游明朝 / Android = Noto Serif CJK
   しっぽり明朝を足す場合は、Cocoon設定 → アクセス解析・認証 → ヘッド用コード に
   Google Fonts の <link> を入れる（style.css の途中では @import が効かないため）。

   本文に入れて使う部品（段落ブロック等の「追加CSSクラス」に書く）:
     emo-route  ルートの箱（水色）      emo-memo  補足メモ（薄い黄緑）
     emo-subh   本文中の小見出し（段落）  emo-price  見出しのすぐ下に置く価格のピル（段落）
     emo-num    h2 に付けると ①②③ の番号が順に付く（付けたh2だけ。既存記事には付けない）
   ※ 見出しの中に <span> を入れても、Cocoonの自動目次が見出しの中身を文字だけに作り直すので消える。
     見出しの装飾は「見出しブロックの追加CSSクラス」か、前後の段落で行う。
   ========================================================= */
:root {
  --emo-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --emo-stone: #ece6d6;      /* 細い線 */
  --emo-wash:  #f6f8e4;      /* もくじ・メモの面 */
  --emo-pink-soft: #fbe1ef;
  --emo-sky:   #e3eefb;
  --emo-muted: #a19c95;
}
/* 英語ページは欧文セリフを先に */
html[lang^="en"] { --emo-mincho: Georgia, "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif; }

/* --- タイトル・日付・カテゴリ --- */
.article .entry-title {
  font-family: var(--emo-mincho);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.65;
  letter-spacing: .05em;
  color: var(--emo-brown);
  margin-bottom: 12px;
}
.article .date-tags { color: var(--emo-muted); font-size: 13.5px; }
.article .eye-catch img { border-radius: 4px; box-shadow: none; }
.article .entry-categories-tags .cat-link,
.article .entry-categories-tags .tag-link {
  background-color: transparent;
  border: 1px solid #cbc6bf;
  border-radius: 999px;
  font-weight: 500;
  color: var(--emo-brown);
}

/* --- 本文 --- */
.article .entry-content {
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: .03em;
  color: var(--emo-brown);
}
.article .entry-content p { margin: 0 0 16px; }

.article .entry-content a {
  color: var(--emo-pink);
  text-decoration: none;
  border-bottom: 1px solid rgba(221, 87, 166, .45);
}
.article .entry-content a:hover { border-bottom-color: var(--emo-pink); }
/* 画像リンク・ブログカード・目次には下線を付けない */
.article .entry-content a:has(img),
.article .entry-content .blogcard-wrap,
.article .entry-content .toc a { border-bottom: 0; }

/* 太字は太くするだけ。ライムのマーカーは Cocoon の「マーカー（下線）」を使った所だけに引く。
   既存記事は太字が多く（小樽の記事だけで154か所）、太字すべてに引くとうるさくなるため */
.article .entry-content strong { font-weight: 700; background: none; }
.article .entry-content .marker-under {
  background: linear-gradient(transparent 70%, var(--emo-lime) 70%);
}

.article .entry-content li::marker { color: var(--emo-pink); }

/* --- 見出し --- */
.article h2 {
  font-family: var(--emo-mincho);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--emo-brown);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--emo-stone);
  border-radius: 0;
  margin: 76px 0 26px;
  padding: 0 0 14px;
  text-wrap: balance;
  word-break: auto-phrase;
}
.article h2::before,
.article h2::after { display: none; }

/* h2の番号（①②③…）。番号を文字で書くと目次が「1. ①…」と二重になるので、CSSで付ける */
@counter-style emo-circled {
  system: fixed;
  symbols: ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳;
}
.article .entry-content { counter-reset: emo-h2; }
.article h2.emo-num::before {
  display: inline;
  content: counter(emo-h2, emo-circled);
  counter-increment: emo-h2;
  color: var(--emo-pink);
  margin-right: .35em;
  font-weight: 800;
}

.article h3 {
  font-family: var(--emo-mincho);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--emo-brown);
  background: none;
  border: 0;
  border-left: 2px solid var(--emo-pink);
  border-radius: 0;
  margin: 40px 0 14px;
  padding: 0 0 0 12px;
  text-wrap: balance;
  word-break: auto-phrase;
}
.article h3::before,
.article h3::after { display: none; }

.article h4 {
  font-family: var(--emo-mincho);
  font-weight: 700;
  font-size: 17px;
  color: var(--emo-brown);
  background: none;
  border: 0;
  margin: 28px 0 10px;
  padding: 0;
}
.article h4::before,
.article h4::after { display: none; }

/* 見出しのすぐ下の価格ピル（段落ブロックに emo-price） */
.article .entry-content p.emo-price {
  display: table;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  padding: 6px 12px 5px;
  margin: -4px 0 14px;
  border: 1.5px solid var(--emo-brown);
  border-radius: 999px;
  background-color: var(--emo-lime);
}

/* 本文中の小見出し（段落ブロックに emo-subh） */
.article .entry-content .emo-subh {
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.6;
  margin: 30px 0 12px;
}

/* --- もくじ（Cocoonの自動目次） --- */
.article .toc {
  display: block;
  width: auto;
  background-color: var(--emo-wash);
  border: 0;
  border-radius: 0;
  padding: 22px 28px;
  margin: 26px 0 8px;
  font-size: 15px;
  line-height: 1.9;
}
.article .toc-title {
  font-family: var(--emo-mincho);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .2em;
  color: var(--emo-brown);
  text-align: left;
}
.article .toc-content { padding: 0; }
.article .toc a { color: var(--emo-brown); text-decoration: none; }
.article .toc a:hover { color: var(--emo-pink); }
.article .toc-list { margin: 6px 0 0; padding-left: 1.5em; }
.article .toc-list > li { margin: 4px 0; }
.article .toc-list li::marker { color: var(--emo-pink); font-family: var(--emo-mincho); font-weight: 700; }
/* 2階層目は小さなチップで横に並べる */
.article .toc-list ol,
.article .toc-list ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 4px 0 8px;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.7;
}
.article .toc-list ol li,
.article .toc-list ul li { margin: 0; }
.article .toc-list ol a,
.article .toc-list ul a {
  display: inline-block;
  padding: 1px 12px;
  background-color: var(--emo-white);
  border: 1.5px solid var(--emo-stone);
  border-radius: 999px;
}
.article .toc-list ol ol { display: none; }  /* 3階層目（h4）は出さない */

/* --- 写真・ギャラリー：ページ全体で同じ幅（80%）にそろえる --- */
.article .entry-content .wp-block-image,
.article .entry-content .wp-block-gallery,
.article .entry-content .wp-block-jetpack-tiled-gallery {
  width: 80%;
  max-width: 80%;
  margin: 8px auto 20px;
}
.article .entry-content .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 1px 0 var(--emo-stone), 0 4px 12px rgba(61, 36, 32, .08);
}
.article .entry-content .wp-block-gallery img,
.article .entry-content .tiled-gallery__item img { border-radius: 10px; }
.article .entry-content .wp-block-gallery { gap: 8px; }
.article .entry-content figcaption,
.article .entry-content .wp-element-caption {
  margin-top: 6px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--emo-sub);
}
.article .entry-content .wp-block-image figcaption::before { content: "✿ "; color: var(--emo-pink); }
/* ギャラリー内のキャプションは写真に重ねるWordPress標準の見た目を外して下に置く */
.article .entry-content .wp-block-gallery figure.wp-block-image figcaption {
  position: static;
  background: none;
  color: var(--emo-sub);
  padding: 0;
  max-height: none;
  text-shadow: none;
}
.article .entry-content .wp-block-gallery figure.wp-block-image { flex-direction: column; }

/* 写真の横並び（カラムブロックに emo-gallery。md_to_blocks.py が写真の縦横比から列幅を割り、高さをそろえる） */
.article .entry-content .wp-block-columns.emo-gallery {
  width: 80%;
  max-width: 80%;
  margin: 8px auto 20px;
  gap: 8px;
}
.article .entry-content .emo-gallery .wp-block-column { min-width: 0; }
.article .entry-content .emo-gallery .wp-block-image { width: 100%; max-width: 100%; margin: 0; }

/* --- 表 --- */
.article .entry-content .wp-block-table {
  overflow-x: auto;
  margin: 0 0 20px;
  border: 1px solid var(--emo-stone);
  border-radius: 4px;
}
.article .entry-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  border: 0;
}
.article .entry-content th,
.article .entry-content td {
  border: 0;
  padding: 9px 12px;
  vertical-align: top;
  color: var(--emo-brown);
}
.article .entry-content th {
  background-color: var(--emo-wash);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.article .entry-content td { border-top: 1.5px solid var(--emo-stone); }
.article .entry-content tr:nth-child(even) td { background-color: #fdfef5; }
/* WordPress標準の「見出し行の下の太線（3px）」を消す */
.article .entry-content .wp-block-table thead,
.article .entry-content .wp-block-table tfoot { border: 0; }
.article .entry-content thead + tbody tr:first-child td { border-top: 0; }

/* --- 引用・メモ・ルート・FAQ・区切り線 --- */
.article .entry-content blockquote {
  background-color: var(--emo-wash);
  border: 0;
  border-radius: 0;
  padding: 18px 24px;
  margin: 0 0 20px;
  color: var(--emo-brown);
  font-style: normal;
}
.article .entry-content blockquote::before,
.article .entry-content blockquote::after { display: none; }
.article .entry-content blockquote > :last-child { margin-bottom: 0; }

.article .entry-content .emo-memo {
  background-color: var(--emo-wash);
  border: 0;
  border-radius: 0;
  padding: 12px 18px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--emo-sub);
}
.article .entry-content .emo-memo strong { color: var(--emo-brown); }

.article .entry-content .emo-route {
  background-color: var(--emo-sky);
  border: 1.5px solid var(--emo-brown);
  border-radius: 18px;
  padding: 14px 20px;
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

.article .entry-content .blank-box,
.article .entry-content .faq-wrap {
  border: 1px solid var(--emo-stone);
  border-radius: 4px;
}
.article .entry-content .faq-question-label { color: var(--emo-pink); font-family: var(--emo-mincho); }
.article .entry-content .faq-answer-label { color: var(--emo-brown); font-family: var(--emo-mincho); }

.article .entry-content hr.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--emo-stone);
  margin: 48px auto;
  width: 100%;
  opacity: 1;
}
/* タイムライン（「10:00 小樽駅着 ↓ 徒歩 …」をコード・整形済みブロックで書いた所。既存11記事）
   灰色の箱をやめて、もくじと同じ薄い黄緑の面にする。矢印の位置がずれないよう等幅のまま */
.article .entry-content pre.wp-block-code,
.article .entry-content pre.wp-block-preformatted {
  background-color: var(--emo-wash);
  color: var(--emo-brown);
  border: 0;
  border-radius: 4px;
  padding: 18px 22px;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
}
.article .entry-content pre.wp-block-code code { background: none; color: inherit; font-size: inherit; padding: 0; }
.article .entry-content pre.wp-block-code:has(> code:empty) { display: none; }  /* 中身の無いコードブロック */

/* h2の直前の区切り線は出さない（h2自体に上の余白と下線があり、線と余白が二重になるため） */
.article .entry-content hr.wp-block-separator:has(+ h2) { display: none; }

/* --- スマホ --- */
@media screen and (max-width: 640px) {
  .article .entry-title { font-size: 21px; }
  .article .entry-content { font-size: 15.5px; }
  .article h2 { font-size: 20px; margin-top: 60px; }
  .article h3 { font-size: 17px; }
  .article .toc { padding: 16px 16px; }
  .article .entry-content .emo-route { font-size: 14px; padding: 12px 14px; }
  .article .entry-content .wp-block-image,
  .article .entry-content .wp-block-gallery,
  .article .entry-content .wp-block-jetpack-tiled-gallery,
  .article .entry-content .wp-block-columns.emo-gallery { width: 100%; max-width: 100%; }
  .article .entry-content .wp-block-columns.emo-gallery { gap: 6px; }
  .article .entry-content table { font-size: 13px; }
  .article h1, .article h2, .article h3, .article .entry-content p, .article .entry-content li { overflow-wrap: anywhere; }
}