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

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

/* =====================================================================
   ciel-siberian.com  カスタムCSS（整理版）
   ---------------------------------------------------------------------
   ・基調色  : #446e72（青緑） / #f9f7f2（生成り） … 既存を踏襲
   ・フォント : Kiwi Maru を全体に適用
   ・ヒーロー : トップの .appeal を画像表示用に整理（JS不要のCSSのみ）
   ・配慮     : prefers-reduced-motion でアニメ抑制（アクセシビリティ）
   ===================================================================== */


/* ---- 基本設定（カラー変数の一元管理） ------------------------------- */
:root{
  /* レイアウト寸法 */
  --header-h: 72px;
  --header-h-narrow: 96px;
  --hero-max-h: 1000px;
  --hero-min-h: 100svh;
  --hero-content-max: 1100px;

  /* ブランドカラー */
  --brand-main: #446e72;   /* 青緑（キーカラー） */
  --brand-text: #f9f7f2;   /* 生成り（文字・反転用） */
  --brand-base: #f9f7f2;   /* 背景の生成り */
  --brand-ink:  #2b2721;   /* 本文の濃い文字色 */
  --brand-link: #7a1a00;   /* リンク・ホバーの差し色 */
  --brand-accent: #9abbbc; /* 見出し装飾などの淡い青緑 */
  --brand-mid: #6f959a;    /* 中間の緑（main と accent の中間）。ボタン等によく使う */

  /* フロントページのセクション交互背景色（薄ベージュ ↔ 白）。
     ベージュスタート：1つ目(奇数=新着記事)がベージュ、次(偶数)が白。 */
  --sec-a: #f9f7f2;        /* 薄ベージュ（＝ブログ標準背景。奇数セクション。1つ目もこれ） */
  --sec-b: #ffffff;        /* 白（偶数セクション） */

  /* ヒーロー画像の上に重ねる暗幕 */
  --hero-overlay: translate;

  /* ヒーロー画像の表示位置（被写体に合わせて調整可） */
  --focal-x: 50%;
  --focal-y: 50%;
}

/* マウス操作のPC等では、ヘッダー高さを引いた高さをヒーローに使う */
@media (hover:hover) and (pointer:fine){
  :root{ --hero-min-h: calc(100dvh - var(--header-h)); }
}
@media (hover:hover) and (pointer:fine) and (max-width: 1280px){
  :root{ --hero-min-h: calc(100dvh - var(--header-h-narrow)); }
}

/* svh/dvh非対応の古いブラウザ向けフォールバック */
@supports not (height: 100svh){
  @media (hover:hover) and (pointer:fine){
    :root{ --hero-min-h: calc(100vh - var(--header-h)); }
  }
  @media (hover:hover) and (pointer:fine) and (max-width: 1280px){
    :root{ --hero-min-h: calc(100vh - var(--header-h-narrow)); }
  }
}


/* ---- フォントを全体に適用 ------------------------------------------ */
/* 修正前は「.body」（クラス指定）で空振りしていた。
   要素セレクタ body にして全体へ適用する。 */
/* Cocoonのサイトフォント設定より優先させるため、html body と
   主要セレクタを重ねて詳細度を上げ、!important で確実に適用する。
   （子テーマstyle.cssはCocoon内で優先度が低いため、ここまで必要） */
html body,
html body .article,
html body .entry-content,
html body .entry-content *:not(.fa):not([class*="fa-"]):not(.material-icons),
html body p,
html body li,
html body h1,
html body h2,
html body h3,
html body h4,
html body input,
html body button,
html body textarea,
html body select{
  font-family: "Kiwi Maru", serif !important;
  font-weight: 400;
  font-style: normal;
}


/* ---- 背景色 -------------------------------------------------------- */
.main,
.sidebar{
  background: var(--brand-base);
}


/* ---- トップのヒーロー画像エリア（.appeal） ------------------------- */
.appeal,
.appeal-in{
  position: relative;
  width: 100%;
  min-height: clamp(560px, var(--hero-min-h), var(--hero-max-h));
  margin: 0;
  padding: 0;
  overflow: clip;
}

.appeal .appeal-image{
  position: absolute;
  inset: 0;
  line-height: 0;
}

.appeal .appeal-image img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Cocoon既定を上書きするため !important を維持 */
  object-fit: cover !important;
  object-position: var(--focal-x) var(--focal-y) !important;
  transform: translateZ(0);
  will-change: transform;
}

/* 画像の上に重ねる暗幕（文字の可読性確保） */
.appeal::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  pointer-events: none;
}

.appeal .appeal-content{
  position: relative;
  z-index: 2;
  width: min(100%, var(--hero-content-max));
  margin: 0 auto;
  padding: clamp(16px, 4vw, 40px);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--brand-text);
  animation: fadeUp .6s ease-out both;
}

/* fadeUp が未定義だったので定義を追加（.appeal-content が参照） */
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(16px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* 縦長画面では被写体がやや上に来るよう焦点を調整 */
@media (max-aspect-ratio: 3/4){
  :root{ --focal-y: 40%; }
}
@media (min-aspect-ratio: 21/9){
  :root{ --focal-x: 50%; --focal-y: 50%; }
}

/* ヒーロー下の「Scroll↓」誘導（JS不要・CSSのみで生成）
   以前は<head>に手書きしたJSで要素を作っていたが、
   ::before で同じ見た目を実現し、JSを不要にした。 */
.appeal::before{
  content: "Scroll \2193";   /* \2193 は下向き矢印 ↓ */
  position: absolute;
  left: 0;
  right: 0;                   /* 左右0で幅いっぱい→text-alignで中央に */
  bottom: clamp(24px, 6vh, 64px);
  z-index: 1;                 /* 画像・暗幕より前面に */
  text-align: center;
  white-space: nowrap;
  line-height: 1.1;
  font-weight: 500;
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: 0.08em;
  color: var(--brand-ink);   /* 元の濃い色(#2b2721)に戻す */
  text-shadow: 0 1px 2px rgba(255,255,255,.4);  /* 暗い画像でも見えるよう薄い白縁 */
  opacity: .9;
  pointer-events: none;
  animation: scrollBounce 1.4s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes scrollBounce{
  0%   { transform: translateY(0);   opacity: .85; }
  50%  { transform: translateY(8px); opacity: 1;   }
  100% { transform: translateY(0);   opacity: .85; }
}

/* アニメーションを減らす設定のユーザーには動きを止める（配慮） */
@media (prefers-reduced-motion: reduce){
  .appeal .appeal-content,
  .appeal::before{
    animation: none;
  }
}


/* ---- プロフィール（著者ボックス） ---------------------------------- */
.nwa .author-box .author-description{
  text-align: center;
}


/* ---- リンクのホバー演出（下線がスッと伸びる） ---------------------- */
a{
  transition: all 0.3s ease;
}

.menu-header a,
#footer-in a{
  transition: color .6s;
  text-decoration: none;
}

#footer-in a{
  position: relative;
  display: inline-block;
}

.menu-header a:hover{
  color: var(--brand-link) !important;  /* Cocoon既定の色に勝つため維持 */
}

#footer-in a:hover{
  background-color: var(--brand-main) !important;
}

.menu-header a::after,
#footer-in a::after{
  position: absolute;
  content: '';
  height: 1.5px;
  bottom: 5px;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .6s;
}

.menu-header a::after{
  background: var(--brand-link);
  left: 10%;
  width: 80%;
}

#footer-in a::after{
  background: var(--brand-base);
  left: 0;
  width: 100%;
}

.author-name a::after{
  bottom: 0 !important;
}

@media (hover: hover) and (pointer: fine){
  .menu-header a:hover::after,
  #footer-in a:hover::after{
    transform: scale(1, 1);
    transform-origin: left top;
  }
}


/* ---- フッター/ウィジェット見出しのアイコン ------------------------- */
.footer-title::before,
.wp-block-heading::before{
  font-family: FontAwesome;
  font-size: 100%;
  font-weight: 500;
  margin-right: 8px;
}
.widget_author_box .footer-title::before{ content: "\f007"; } /* 人 */
.widget_search .footer-title::before{ content: "\f002"; }     /* 虫眼鏡 */
.wp-block-group .wp-block-heading::before{ content: "\f07c"; } /* フォルダ */
.widget_pages .footer-title::before{ content: "\f132"; }      /* 盾 */


/* ---- 検索ボタン ---------------------------------------------------- */
.search-submit{
  color: var(--brand-main);
  display: flex;          /* 中身を並べる箱にする */
  align-items: center;    /* 上下中央にそろえる */
  justify-content: center;/* 左右中央にそろえる */
  line-height: 1;         /* 行の高さによる微妙なズレを消す */
}

/* ---- 目次（ez-toc） ------------------------------------------------ */
#ez-toc-container p.ez-toc-title{
  display: block;
  text-align: center;
  margin-bottom: 5px;
}
ul.ez-toc-list a:hover{
  background-color: transparent !important;
  transition: none !important;
}

/* ---- 目次：通常は黒字、ホバーでふわっと赤茶色＋下線フェード ---------- */

/* 通常時：黒字 → 数字(::before)だけ赤茶色に */
#ez-toc-container ul.ez-toc-list li,
#ez-toc-container ul.ez-toc-list a.ez-toc-link,
#ez-toc-container ul.ez-toc-list a.ez-toc-link::before{
  color: var(--brand-ink) !important;
  transition: color .2s ease;
}

/* リンク本体 */
#ez-toc-container ul.ez-toc-list a.ez-toc-link{
  display: inline;
  position: relative;
  text-decoration: none !important;
  background-image: none !important;
  padding-bottom: 2px;
  transition: color .2s ease;
}

/* 下線（通常は透明） */
#ez-toc-container ul.ez-toc-list a.ez-toc-link::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--brand-link);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

/* ホバー時 */
#ez-toc-container ul.ez-toc-list a.ez-toc-link:hover{
  color: var(--brand-link) !important;
}
@media (hover: hover) and (pointer: fine){
  #ez-toc-container ul.ez-toc-list a.ez-toc-link:hover::after{
    opacity: 1;
  }
}

/* ホバー時にプラグイン既定の背景色が付くのを抑制 */
#ez-toc-container ul.ez-toc-list a:hover{
  background-color: transparent !important;
}


/* ---- PRラベル（広告表記など） -------------------------------------- */
.pr-label{
  background-color: var(--brand-main);
  color: var(--brand-text);
}


/* ---- パンくずリスト ------------------------------------------------ */
.breadcrumb,
.breadcrumb a{
  color: var(--brand-main);
}


/* ---- 記事内の見出しデザイン（h2/h3/h4） ---------------------------- */
.article h2,
.article h3,
.article h4{
  background: none;
  border: none;
  border-radius: 0;
}

.article h2{
  position: relative;
  box-shadow: 6px 6px #333;
  outline: 5px solid var(--brand-base);
  border: 1px solid var(--brand-ink);
  background-color: var(--brand-accent);
  color: var(--brand-ink);
}

.article h3{
  position: relative;
  padding: 0.3em 0;
  border-bottom: solid 3px var(--brand-accent);
  color: var(--brand-ink);
}
.article h3::after{
  position: absolute;
  content: '';
  display: block;
  border-bottom: solid 3px var(--brand-main);
  bottom: -3px;
  width: 30%;
}

.article h4{
  border-left: double 10px var(--brand-accent);
  color: var(--brand-ink);
}

/* ---- Contact Form 7 送信ボタン ----------------------------------- */
.wpcf7 .wpcf7-submit,
.article .wpcf7-submit{
  background-color: var(--brand-main);  /* 背景：青緑 */
  color: var(--brand-text);             /* 文字：生成り */
  border: none;
  border-radius: 6px;
  padding: 10px 28px;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}

/* マウスを乗せたとき（ホバー） */
.wpcf7 .wpcf7-submit:hover,
.article .wpcf7-submit:hover{
  background-color: var(--brand-link);  /* 背景：差し色の赤茶 */
  color: var(--brand-text);
}

/* ---- 固定ページでは投稿日・更新日を非表示 -------------------------- */
.page .post-date,
.page .post-update,
.page .date-tags .post-date,
.page .date-tags .post-update{
  display: none;
}

.entry-content img {
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.50);
}

.cat-label {
  display: none !important;
}

/* カード風スタイル（ナチュラル・丸め強め） */
.entry-card-wrap {
  border-radius: 14px;
  border: 1.5px solid #e8ddd3;
  box-shadow: 0 4px 12px rgba(180, 150, 120, 0.25);
  transform: translateY(0);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  background: #fff;
  padding: 0 !important;
}

/* aタグの場合 */
a.entry-card-wrap {
  padding: 0 !important;
}

/* サムネイル画像のmarginを消す＋区切り線 */
figure.entry-card-thumb {
  margin: 0 !important;
}

/* コンテンツエリアの余白 */
div.entry-card-content {
  padding: 12px !important;
}

/* ホバー時 */
.entry-card-wrap:hover {
  box-shadow: 0 10px 24px rgba(180, 150, 120, 0.35);
  transform: translateY(-6px);
  background: #fff;
}

/* ---- 見出しの余白調整 ---------------------------------------------- */
.article h2 {
  margin-top: 3em;
}

.article h3 {
  margin-top: 2.5em;
}

.article h4 {
  margin-bottom: 1.0em;
}

.article ul:not(.toc-content):not(.ez-toc-list):not(.cat-category-grid) li {
  list-style: none;
  position: relative;
  padding-left: 0.8em;
}
.article ul:not(.toc-content):not(.ez-toc-list):not(.cat-category-grid) li::before {
  content: "🐾";
  position: absolute;
  left: -1.0em;
}

.alt-caption {
  display: block;
  margin-top: 0.7em;      /* 画像との隙間を広げる */
  text-align: center;
  font-size: 0.85em;
  color: #777;
  line-height: 1.4;
}

.alt-caption-icon {
  position: relative;
  top: -1px;
  margin-right: 0.3em;
}

/* ---- 「もっと見る」ボタン（list-more-button） --------------------- */
.list-more-button{
  position: relative;
  background-color: var(--brand-mid) !important;    /* 通常：中間の緑 #6f959a */
  color: transparent !important;
  border: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.list-more-button::after{
  content: "More";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-base);
  letter-spacing: 0.12em;
}

/* ホバー（PCのみ・スマホのタップ残りを防ぐ） */
@media (hover: hover) and (pointer: fine){
  .list-more-button:hover{
    background-color: var(--brand-main) !important;  /* ホバー：濃い緑 #446e72 */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
    transform: translateY(-2px);
  }
}


/* ---- カテゴリーページ：画像カードグリッド -------------------------- */
.cat-category-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2vw, 20px);
  list-style: none;
  margin: 0;
  padding: 4px 0 40px 0 !important;
}

.cat-category-card{
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  background-color: var(--brand-accent);
  background-image: var(--card-bg, none);
  background-size: cover;
  background-position: center;
  aspect-ratio: 4 / 3;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
  padding: 0;
  margin: 0;
}

.cat-category-card::before{
  display: none;
}

.cat-category-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  text-decoration: none;
}


@media screen and (max-width: 599px){
  .cat-category-grid{
    grid-template-columns: 1fr;
  }
  .cat-category-card{
    aspect-ratio: 4 / 3;
  }
}


/* ---- スマホ表示の調整 ---------------------------------------------- */
@media screen and (max-width: 1023px){
  .logo-header{ display: none; }
}

.mobile-menu-buttons{
  background-color: var(--brand-base);
  color: var(--brand-ink);
}
.mobile-menu-buttons .menu-caption{
  display: none;
}

/* スマホ：Scroll↓ を少し上に */
@media (max-width: 1023px){
  .appeal::before{
    bottom: clamp(48px, 10vh, 100px);
  }
}


/* ===== フロントページ（front-page.php） ============================= */

/* フルブリードで生じる横スクロールを抑える。
   overflow-x: clip は hidden と違い sticky を壊さないので安全。 */
html{ overflow-x: clip; }

/* ラッパー自体は .main 幅のまま。背景をブログ標準色(--sec-a #f9f7f2)に
   しておくと、上のヒーローや .main の背景（同色）と地続きになり継ぎ目が出ない。 */
.fp-wrapper{
  width: 100%;
  background: var(--sec-a);
}

/* 各セクションの中身（見出し・カード）を中央寄せ・最大1100pxで包む箱。
   背景色はセクション側に付くので、この箱は横方向の余白だけ持つ。 */
.fp-section__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* セクション：背景色を交互に切り替えて“帯”にする。
   ・width:100vw + margin-left:calc(50% - 50vw) で、親(.main)の幅制限を抜けて
     背景帯を画面の左右いっぱいまで広げる（フルブリード）。
   ・上下の余白は帯の内側に持たせ、セクション同士はぴったり隣接させる
     （すき間があると境目の波線がつながらないため margin-bottom は付けない）。 */
.fp-section{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 56px 0 72px;   /* 下は境目の波線ぶん(60px)を確保して広めに */
}

/* 交互の背景色。1つ目(奇数=新着記事)はベージュで、上のヒーロー下の
   ベージュ背景と自然になじみ、境目が目立たない。 */
.fp-section:nth-child(odd){  background: var(--sec-a); }
.fp-section:nth-child(even){ background: var(--sec-b); }

/* セクションの境目：1うねりのゆるやかな波線。
   そのセクションの“下端”に、次のセクションの色をゆるやかな波で
   せり上がらせることで、色が切り替わることを直感的に伝える。
   最後のセクションには付けない（そのままフッターへ流す）。
   ※波の色は「下に来るセクションの背景色」に合わせる（変数参照で自動追従）。
     奇数(ベージュ)の下 → 白(--sec-b)
     偶数(白)の下       → ベージュ(--sec-a)

   波の高さ(height)は画面幅で切り替える。背景画像は幅いっぱいに
   引き伸ばしているため、PC(広い)ほど横に間延びして波が浅く見える。
   そこで広い画面では height を上げて振幅を稼ぎ、うねりを保つ。
   スマホは今の見え方が良いので 60px のまま据え置く。 */
.fp-section:not(:last-child)::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;                 /* スマホ基準（据え置き） */
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: bottom center;
          mask-position: bottom center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  pointer-events: none;
}
/* タブレット〜：波を高くして間延びを補正 */
@media (min-width: 768px){
  .fp-section{ padding-bottom: 112px; }
  .fp-section:not(:last-child)::after{ height: 96px; }
}
/* PC：さらに高く */
@media (min-width: 1200px){
  .fp-section{ padding-bottom: 150px; }
  .fp-section:not(:last-child)::after{ height: 132px; }
}

/* 色（背景色）＝下に来るセクションの背景色。形は mask で作るので、
   色と形を別々に指定できる。奇数(ベージュ)の下は白、偶数(白)の下はベージュ。 */
.fp-section:nth-child(odd):not(:last-child)::after{  background-color: var(--sec-b); }
.fp-section:nth-child(even):not(:last-child)::after{ background-color: var(--sec-a); }

/* 波の形は3パターンを順番に使い、境目ごとに位置・うねりをずらす。
   （全部そろって“きっちり”見えないように、開始位置と山の場所を変えている） */
.fp-section:nth-child(3n+1):not(:last-child)::after{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C 480,48 960,12 1440,30 L1440,60 L0,60 Z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C 480,48 960,12 1440,30 L1440,60 L0,60 Z' fill='%23000'/%3E%3C/svg%3E");
}
.fp-section:nth-child(3n+2):not(:last-child)::after{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C 400,52 820,6 1440,32 L1440,60 L0,60 Z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C 400,52 820,6 1440,32 L1440,60 L0,60 Z' fill='%23000'/%3E%3C/svg%3E");
}
.fp-section:nth-child(3n):not(:last-child)::after{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,36 C 560,6 1000,52 1440,24 L1440,60 L0,60 Z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,36 C 560,6 1000,52 1440,24 L1440,60 L0,60 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* セクション見出し：カテゴリアイコン ＋（英字キッカー＋和文タイトル）。
   左にカテゴリの雰囲気が伝わる絵文字、右に2段の見出しを置く。
   アイコンと英字キッカーの色はカテゴリごとに切り替える（下の --cat-* 参照）。 */
.fp-section__head{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.fp-section__head::before{
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  /* アイコンの色はカテゴリ色(--cat-color)。形は各カテゴリの --cat-icon（線アイコン）を
     mask で流し込む。色はWordPressのカテゴリー色に合わせている。 */
  background-color: var(--cat-color, #5c554c);
  -webkit-mask-image: var(--cat-icon);
          mask-image: var(--cat-icon);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.fp-section__heading{
  min-width: 0;
}
.fp-section__kicker{
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cat-color, #8a8178);   /* カテゴリ色（英字キッカー） */
  line-height: 1;
}
.fp-section__title{
  position: relative;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-ink);   /* カテゴリー名は読みやすい濃い墨色に固定 */
  margin: 6px 0 0;
  padding: 0;
  border: none;
}

/* カテゴリごとの線アイコン＋色（色はWordPressのカテゴリー色に合わせる）。
   星＝新着、肉球＝日常、バッグ＝グッズ、ハート＝ケア、魚＝食事。
   新着は色指定がないので中立のグレー。 */
.fp-section--new{
  --cat-color: #9aa3a3;         /* 新着：中立のグレー */
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4L13.6 10.4L20 12L13.6 13.6L12 20L10.4 13.6L4 12L10.4 10.4Z'/%3E%3C/svg%3E");
}
.fp-section--diary{
  --cat-color: #9abbbc;         /* シエルの日常 */
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.2' cy='9.2' r='1.5'/%3E%3Ccircle cx='12' cy='7.8' r='1.5'/%3E%3Ccircle cx='15.8' cy='9.2' r='1.5'/%3E%3Cpath d='M12 12.4C9.5 12.4 7.6 14.1 7.6 16 7.6 17.5 9.4 17.9 12 17.9 14.6 17.9 16.4 17.5 16.4 16 16.4 14.1 14.5 12.4 12 12.4Z'/%3E%3C/svg%3E");
}
.fp-section--goods{
  --cat-color: #bc9c9a;         /* 猫グッズ・お迎え準備 */
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8 6 20 18 20 17 8Z'/%3E%3Cpath d='M9.2 8C9.2 5.8 10.4 5 12 5 13.6 5 14.8 5.8 14.8 8'/%3E%3C/svg%3E");
}
.fp-section--health{
  --cat-color: #ab9abc;         /* 猫の健康・ケア */
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19C4.5 13.5 6 7.5 9.3 7.5 10.9 7.5 12 9 12 9 12 9 13.1 7.5 14.7 7.5 18 7.5 19.5 13.5 12 19Z'/%3E%3C/svg%3E");
}
.fp-section--food{
  --cat-color: #bcb69a;         /* 猫の食事・フード */
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12C6.5 8.5 11.5 8.5 14.5 12 11.5 15.5 6.5 15.5 4 12Z'/%3E%3Cpath d='M14.5 12 20 9 20 15Z'/%3E%3Ccircle cx='7.6' cy='11' r='0.7'/%3E%3C/svg%3E");
}

/* カードグリッド */
.fp-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px){
  .fp-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .fp-cards{ grid-template-columns: 1fr; }
}

/* カード（Cocoonの entry-card-wrap と同じ見た目） */
.fp-card{
  border-radius: 14px;
  border: 1.5px solid #e8ddd3;
  box-shadow: 0 4px 12px rgba(180,150,120,.25);
  overflow: hidden;
  background: #fff;
  transition: box-shadow .3s ease, transform .3s ease;
}
.fp-card:hover{
  box-shadow: 0 10px 24px rgba(180,150,120,.35);
  transform: translateY(-6px);
}
.fp-card__link{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* サムネイル */
.fp-card__thumb{
  margin: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.fp-card__thumb img{
  width: 100%;
  /* アイキャッチ画像の実寸（768×403 ≒ 40:21）に枠を合わせる。
     以前は 16/9 で枠が縦長寄りだったため、object-fit:cover が
     画像の左右を少し切っていた。実寸と同じ比率にして切れを解消。 */
  aspect-ratio: 40 / 21;
  object-fit: cover;
  display: block;
}

/* カード本文 */
.fp-card__body{
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fp-card__title{
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-ink);
  line-height: 1.55;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fp-card__date{
  font-size: 0.7rem;
  color: #999;
  margin-top: 6px;
  /* アイコン＋日付を右寄せで横並び。絵文字時計(⏰)はやめ、下の線アイコンに */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
/* 投稿日の前の時計アイコン（単色ライン・文字色と同じグレー） */
.fp-card__date::before{
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12L15 13.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12L15 13.5'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* もっと見るボタン */
.fp-more{
  text-align: center;
  margin-top: 28px;
}
.fp-more__btn{
  display: inline-block;
  padding: 10px 44px;
  border: 2px solid var(--brand-mid);
  border-radius: 30px;
  color: var(--brand-mid);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background .2s, color .2s;
}
@media (hover: hover) and (pointer: fine){
  .fp-more__btn:hover{
    background: var(--brand-mid);
    color: #fff;
  }
}


/* ===== 新着記事一覧ページ（page-new.php） ============================= */

.new-page-title{
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-ink);
  margin: 12px 16px;
}

/* カード1件 */
.new-card{
  border-radius: 12px;
  border: 1.5px solid #e8ddd3;
  box-shadow: 0 4px 12px rgba(180,150,120,.25);
  overflow: hidden;
  background: #fff;
  margin-bottom: 20px;
  transition: box-shadow .3s ease, transform .3s ease;
}
.new-card:hover{
  box-shadow: 0 10px 24px rgba(180,150,120,.35);
  transform: translateY(-4px);
}

/* スマホ：縦並び（画像上・テキスト下） */
.new-card__link{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* PC：横並び（画像左・テキスト右） */
@media (min-width: 640px){
  .new-card__link{
    flex-direction: row;
  }
}

/* サムネイル */
.new-card__thumb{
  flex: none;
  width: 100%;
  margin: 0;
  overflow: hidden;
  line-height: 0;
}
@media (min-width: 640px){
  .new-card__thumb{
    flex: 0 0 45%;
    width: auto;
  }
}
.new-card__thumb img,
.new-card__noimg{
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  aspect-ratio: 40 / 21;
}
@media (min-width: 640px){
  .new-card__thumb img,
  .new-card__noimg{
    height: 100%;
  }
}
.new-card__noimg{
  background: var(--brand-accent);
}

/* テキストエリア */
.new-card__body{
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.new-card__title{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand-ink);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.new-card__date{
  font-size: 0.72rem;
  color: #999;
  margin: 0;
}

/* ページング */
.new-pagination{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.new-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1.5px solid var(--brand-mid);
  color: var(--brand-mid);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.new-pagination .page-numbers.current,
.new-pagination .page-numbers:hover{
  background: var(--brand-mid);
  color: #fff;
}
.new-pagination .page-numbers.dots{
  border-color: transparent;
  background: transparent;
  color: #999;
}

.new-empty{
  text-align: center;
  color: #999;
  padding: 40px 0;
}


/* ---- 記事内の内部リンクカード（おすすめ記事） ------------------- */
/* 使い方：記事本文に「カスタムHTML」ブロックで .ciel-linkcard を貼る。
   トップページの .new-card と同じ空気感（丸め・やわらかい影・ホバーで浮く）
   にそろえて、記事の中でも浮かずになじむようにしている。 */
.ciel-linkcard{
  position: relative;
  margin: 40px 0 32px;      /* 上のラベル分を見込んで上を広めに取る */
  border-radius: 14px;      /* カードは四隅とも丸める */
  border: 1.5px solid #e8ddd3;
  background: #fff;
  box-shadow: 0 4px 12px rgba(180,150,120,.25);
  transition: box-shadow .3s ease, transform .3s ease;
}
.ciel-linkcard:hover{
  box-shadow: 0 10px 24px rgba(180,150,120,.35);
  transform: translateY(-4px);
}

/* 「おすすめ記事」ラベル：カードの左端にそろえ、上辺に半分かぶせる */
.ciel-linkcard__label{
  position: absolute;
  top: -13px;        /* ラベルの高さ約26px。半分がカードに重なる */
  left: 0;
  z-index: 1;
  display: inline-block;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--brand-mid);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.7;
  box-shadow: 0 2px 6px rgba(180,150,120,.3);
}

/* カード全体をリンクにする。PC・スマホとも横並び（画像左・タイトル右） */
.ciel-linkcard__link{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  text-decoration: none !important;  /* Cocoon既定の下線に勝つため */
  color: inherit;
  border-radius: 14px;
  overflow: hidden;    /* 画像の外側の角だけ、カードの丸みに沿って切り取られる */
  padding: 0;          /* 画像をカードの上下左にピッタリ付ける */
}

/* サムネイル（左）
   アイキャッチは 40:21 の横長。枠を同じ比率にして、上下左右を切らずに全部見せる。
   align-self: stretch（既定）でカードの上下いっぱいに広げ、隙間なく詰める。
   タイトル側が画像より高くならないよう、文字サイズと行数を下で抑えてある。
   margin は .ciel-linkcard を付けて（詳細度を上げて）テーマ側の figure 余白を打ち消す。 */
.ciel-linkcard .ciel-linkcard__thumb{
  flex: 0 0 48%;
  max-width: 300px;
  aspect-ratio: 40 / 21;
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
}
@media (min-width: 640px){
  .ciel-linkcard .ciel-linkcard__thumb{
    flex: 0 0 38%;
  }
}
/* 画像は切り取らず全体を表示。角丸・影は付けない
   （.entry-content img の border-radius / box-shadow をここで打ち消している） */
.ciel-linkcard__thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

/* テキストエリア（右）：タイトルだけを上下中央に置く */
.ciel-linkcard__body{
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 640px){
  .ciel-linkcard__body{
    padding: 16px 20px;
  }
}
/* margin:0 は .ciel-linkcard を付けて、テーマ側の「pの下余白」に勝たせる。
   下余白が残ると、上下中央に置いたときにタイトルが上へずれて見える。 */
.ciel-linkcard .ciel-linkcard__title{
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--brand-ink);
  transition: color .3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* 長いタイトルは3行で切る */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px){
  .ciel-linkcard .ciel-linkcard__title{
    font-size: 1rem;
    line-height: 1.55;
  }
}
.ciel-linkcard:hover .ciel-linkcard__title{
  color: var(--brand-link);
}

/* 動きを減らす設定の人には、浮き上がりを止める（配慮） */
@media (prefers-reduced-motion: reduce){
  .ciel-linkcard{ transition: none; }
  .ciel-linkcard:hover{ transform: none; }
}