/* =========================================================
   ks-common.css — 全ページで読み込む共通スタイル
   （デザイントークン / ヘッダー / フッター）

   fp-style.css はトップページ限定で読み込まれるため、
   全ページに効かせたいものはこちらに置く。

   ■ 詳細度についての注意
   カスタマイザーの「追加CSS」は <style id="wp-custom-css"> として
   このファイルより後に出力される。同じ詳細度では勝てないため、
   追加CSS を打ち消す箇所は body を前置して詳細度を上げている。
   ========================================================= */

/* ---------- デザイントークン（カンプから起こした値） ---------- */

:root {
  --ks-blue:     #0E7FB0;  /* ロゴ・主要ボタン・見出し */
  --ks-blue-d:   #0A6690;  /* ボタン影 / hover */
  --ks-blue-l:   #E7F4FA;  /* 淡い背景・チップ */
  --ks-yellow:   #FFC93C;  /* 「未来」アクセント・応援する */
  --ks-yellow-d: #E9A800;
  /* 黄色を「面」で使うときの淡い側。ベタで置くと注意標識の配色になって
     きつく見えるため、広い面はこちらを使う（トップの寄付カードと同じ作法） */
  --ks-yellow-q:    #FFF4D6;
  --ks-yellow-q-d:  #FFEBB8;  /* hover */
  --ks-yellow-line: #FFD26B;  /* 淡い面のふち */
  --ks-pink:     #F4919B;  /* 参加する */
  --ks-green:    #4FB477;  /* 仲間になる */
  --ks-cream:    #FCF7EC;  /* 活動の様子・参加セクション背景 */
  --ks-ink:      #2E3A45;
  --ks-ink-soft: #7A8794;
  --ks-line:     #E4EBF1;

  /* 旧トークン（fp-style.css の既存セクションが参照中） */
  --fp-sky:      var(--ks-blue);
  --fp-sky-l:    var(--ks-blue-l);
  --fp-yellow:   var(--ks-yellow);
  --fp-pink:     var(--ks-pink);
  --fp-green:    var(--ks-green);
  --fp-ink:      var(--ks-ink);
  --fp-ink-soft: var(--ks-ink-soft);
  --fp-cream:    #FFFFFF;
}

/* =========================================================
   共通ボタン
   トップ・下層どちらでも使う
   ========================================================= */

.ks-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 1vw, 1.52rem);
  text-decoration: none;
  padding: 0.85em 1.6em;
  border-radius: 4.8rem;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}

.ks-btn-primary {
  background: var(--ks-blue);
  color: #fff;
  box-shadow: 0 4px 0 var(--ks-blue-d);
}
.ks-btn-primary:hover {
  color: #fff;
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ks-blue-d);
}

.ks-btn-ghost {
  background: #fff;
  color: var(--ks-blue);
  border: 2px solid var(--ks-blue);
  box-shadow: 0 4px 0 rgba(14,127,176,0.25);
}
.ks-btn-ghost:hover {
  background: var(--ks-blue);
  color: #fff;
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(14,127,176,0.25);
}

.ks-btn-arrow { font-size: 1.1em; line-height: 1; }

/* =========================================================
   ヘッダー

   賢威のDOMでは .keni-header_wrap と .keni-gnav_wrap が兄弟なので、
   CSSだけでは1行に組めない。PCでは .keni-gnav_wrap を
   .keni-container 基準の絶対配置でヘッダー行に重ねて1行に見せる。
   タブレット以下は従来どおり縦積み（ハンバーガー）のまま。
   ========================================================= */

.ks-head-tagline {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ks-ink-soft);
  margin: 0;
  white-space: nowrap;
}

.ks-head-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.ks-head-insta,
.ks-head-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ks-head-insta {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  border: 2px solid var(--ks-blue);
  color: var(--ks-blue);
}
.ks-head-insta:hover { background: var(--ks-blue); color: #fff; }
.ks-head-insta svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ks-head-insta svg .ks-dot { fill: currentColor; stroke: none; }

.ks-head-contact {
  gap: 0.7rem;
  background: var(--ks-blue);
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  padding: 1.05rem 2.2rem;
  border-radius: 3.2rem;
}
.ks-head-contact:hover { background: var(--ks-blue-d); color: #fff; }
.ks-head-contact svg {
  width: 1.8rem; height: 1.8rem;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- ロゴのリンクを押しやすくする ---

   親テーマのままだと a が display:inline で、
   中のロゴ画像（高さ56px）を包み切れていなかった。
   リンクの当たり判定は 160×45px しかなく、しかも
   **画像の上端11pxがリンクの外**にはみ出していた。押しづらい原因。

   inline-block にして画像を正しく包み、
   さらに padding で当たり判定を広げる。
   同じ量の負のマージンで相殺するので、見た目の位置は動かない。 */

body .keni-header_inner .site-title a {
  display: inline-block;
  padding: 1rem;
  margin: -1rem;
}
/* インライン画像の下にできる隙間を消して、当たり判定と見た目をそろえる */
body .keni-header_inner .site-title img { display: block; }

/* --- 切り替え幅は 768px ---

   賢威がグローバルナビを「ハンバーガー」から「横並び」に切り替えるのが
   768px。ここを 1000px にしていたため、768〜999px では
   賢威の横並びナビが出ているのに、こちら側はスマホ扱いのままだった。
   その帯だけ、スマホ用に足した「LINEで相談」が横並びの中に現れていた。
   賢威の切り替え幅に合わせる。 */

@media (min-width: 768px) {
  .keni-container { position: relative; }

  /* ヘッダー行の高さを固定して、重ねるナビと縦位置を揃える */
  body .keni-header_wrap { position: relative; z-index: 3; background: #fff; padding: 0; }
  body .keni-header_inner .site-title img { height: 5.6rem; width: auto; }

  /* ヘッダー行だけ既定の980pxより広く使う（ロゴ＋ナビ＋ボタンを1行に収めるため）。
     親テーマ base.css の `.col1 .keni-header_outer{max-width:980px}` と
     同じ詳細度で書き、後勝ちで上書きする。 */
  .col1 .keni-header_outer,
  .col1 .keni-gnav_outer,
  .col2 .keni-header_outer,
  .col2 .keni-gnav_outer { max-width: 1240px; }

  /* 左に「ロゴ／その下にタグライン」、右にボタン群。
     .keni-header_cont は display:contents なので、中の
     .ks-head-tagline と .ks-head-actions が直接グリッドアイテムになる。 */
  body .keni-header .keni-header_inner {
    margin: 0 auto;
    padding: 1.2rem 3.2rem;
    min-height: 10rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    gap: 0.2rem 1.6rem;
  }

  .keni-header_cont { display: contents; }

  body .keni-header_inner .site-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    /* 親テーマの max-width:50% はグリッドの auto 列と噛み合わず
       ロゴが潰れるので解除する */
    max-width: none;
  }
  .ks-head-tagline {
    grid-column: 1;
    grid-row: 2;
    /* ロゴ画像はリンクの内側で 10px 分内寄りに描かれるので、左端を揃える */
    padding-left: 1rem;
  }
  .ks-head-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  /* グローバルナビをヘッダー行に重ねて1行に見せる */
  body .keni-gnav_wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    min-height: 10rem;      /* ヘッダー行と同じ高さにして縦位置を揃える */
    display: flex;
    align-items: center;
    background: transparent;
    border: 0;
    pointer-events: none;   /* 余白でヘッダーのクリックを奪わない */
  }
  body .keni-gnav_outer,
  body .keni-gnav { width: 100%; background: transparent; border: 0; }

  /* ヘッダー右のボタン群（Instagram / お問い合わせ）を外したので、
     ナビは右端まで使える。 */
  body .keni-gnav .keni-gnav_inner {
    margin: 0 auto;
    padding: 0 3.2rem;
    pointer-events: none;
    background: transparent;
  }

  body .keni-gnav_inner ul.keni-gnav_cont {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
    background: transparent;
    /* この ul は右寄せでも要素そのものは横幅いっぱいに広がる。
       ここでクリックを受けると、重なっている **ロゴの上まで覆ってしまう**。
       受け取るのは個々の項目だけにする。 */
    pointer-events: none;
  }
  body .keni-gnav_inner ul.keni-gnav_cont > li {
    background: transparent;
    border: 0;
    pointer-events: auto;
  }

  /* 追加CSSが付けている矢印画像・左padding・フォントサイズを打ち消す。
     向こうは `.keni-gnav_inner li.menu-item-118 a`（詳細度 0,2,2）で
     このファイルより後に読まれるため、li[class] で 0,2,3 にして勝つ。 */
  body .keni-gnav_inner li[class] a,
  body .keni-gnav_inner li a {
    background-image: none;
    padding: 0.6rem 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ks-ink);
    white-space: nowrap;
  }
  body .keni-gnav_inner li[class] a:hover,
  body .keni-gnav_inner li a:hover { color: var(--ks-blue); }

  /* --- 「応援する」だけボタンに見せる ---
     メニュー項目のまま扱い、管理画面での並べ替えを一元化するため、
     ヘッダーに別途HTMLを置くのではなくメニュー項目に
     ks-nav-cta クラスを付けてスタイルだけ変えている。 */
  /* 色は青ではなく黄色。
     トップの「一緒に活動しませんか？」でも寄付するだけ黄色なので、
     サイト内で「寄付＝黄色」がそろう。

     ただし**面は淡い黄**にする。以前は #FFC93C のベタ＋硬い影
     （0 4px 0）だったが、
       ・ヘッダーで奥行きを持つ要素がここだけで、玩具のボタンのように浮く
       ・高彩度の黄＋ほぼ黒は注意標識と同じ配色で、威圧感が出る
       ・サイトの他の場所（トップの寄付カード）は「淡い地＋黄のアクセント」で、
         ヘッダーだけ作法が違っていた
     の3点で暑苦しく見えていた。淡い面＋ふちに変えて作法をそろえる。
     文字はインクのまま（10.6:1）。

     フォントはナビが親テーマの游ゴシックを引き継いでいるので、
     ここだけ丸ゴシックに戻す。M PLUS Rounded 1c は
     見出しで読み込み済みなので追加コストは無い。
     line-height を決め打ちしているのは、高さを 40px に収めるため
     （親から来る 24px のままだと 44px になる）。 */
  body .keni-gnav_inner li.ks-nav-cta { margin-left: 1.2rem; }
  body .keni-gnav_inner li.ks-nav-cta[class] a,
  body .keni-gnav_inner li.ks-nav-cta a {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background: var(--ks-yellow-q);
    color: var(--ks-ink);
    border: 1.5px solid var(--ks-yellow-line);
    padding: 0.6em 1.45em;
    line-height: 1.45;
    border-radius: 999px;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  /* 矢印。「押すと進む」をサイト内で矢印に統一しているので
     （フッターCTA / 記事下CTA / 詳しく見る）、ヘッダーにも合わせる。
     メニュー項目のタイトルはDBにあり、そこへ入れるとハンバーガーや
     管理画面にも出てしまうため、CSSの ::after で足している。
     ホバーで2px右に出るのは「押せる」ことの予告。 */
  body .keni-gnav_inner li.ks-nav-cta[class] a::after,
  body .keni-gnav_inner li.ks-nav-cta a::after {
    content: '→';
    display: inline-block;
    margin-left: 0.5em;
    transition: transform 0.15s ease;
  }
  body .keni-gnav_inner li.ks-nav-cta[class] a:hover,
  body .keni-gnav_inner li.ks-nav-cta a:hover {
    background: var(--ks-yellow-q-d);
    border-color: var(--ks-yellow);
    color: var(--ks-ink);
  }
  body .keni-gnav_inner li.ks-nav-cta[class] a:hover::after,
  body .keni-gnav_inner li.ks-nav-cta a:hover::after {
    transform: translateX(2px);
  }
  @media (prefers-reduced-motion: reduce) {
    body .keni-gnav_inner li.ks-nav-cta a::after { transition: none; }
    body .keni-gnav_inner li.ks-nav-cta a:hover::after { transform: none; }
  }

  /* スマホのハンバーガー専用の項目はPCでは出さない */
  body .keni-gnav_inner li.ks-nav-sp { display: none; }

  body .keni-gnav_btn_wrap { display: none; }
}

/* 検索フォームはカンプに無いので隠す。
   スマホのハンバーガーの中では黒い帯として出てしまうため、
   画面幅にかかわらず消す。 */
body .keni-gnav_inner li.menu-search { display: none; }

/* --- スマホのハンバーガーの中身 ---
   これまで中はメニュー項目だけで、行動の導線がひとつも無かった。
   「寄付をする」を黄色、「LINEで相談」を緑のボタンにして目立たせる。

   ここだけは**PCのヘッダーと違い、黄色のベタのまま**にしてある。
   PCの淡い面は「細いリンクが並ぶ白い帯の中で浮かせない」ための処理で、
   こちらは横いっぱいのブロックが2つ縦に並ぶ別の場面。
   隣が緑のベタなので、片方だけ淡くすると寄付が副次的に見えてしまう。
   幅の境目は上と揃えて 767px。 */
@media (max-width: 767px) {
  body .keni-gnav_inner li.ks-nav-cta a,
  body .keni-gnav_inner li.ks-nav-line a {
    display: block;
    margin: 0.8rem 1.6rem;
    padding: 1.1rem 1.6rem;
    border: 0;
    border-radius: 0.8rem;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    background-image: none;
  }
  body .keni-gnav_inner li.ks-nav-cta a {
    background: var(--ks-yellow);
    color: var(--ks-ink);   /* 黄色に白文字は読めない */
  }
  body .keni-gnav_inner li.ks-nav-line a {
    background: #06C755;    /* LINEの緑 */
    color: #fff;
  }
}

/* =========================================================
   記事内の写真の横並び

   画像だけの段落に、functions.php の kogaseed_auto_photo_grid() が
   自動で .ks-photos を付ける。PCでは横並び、スマホでは縦積みになるので、
   for-pc / for-sp で同じ画像を二重に書く必要がない。
   1枚でも付くので、写真の左右位置が枚数によってばらつかない。

   max-width で「上限」だけを決めているのがポイント。
   幅を指定すると小さい画像が引き伸ばされてぼやけるため、
   元のサイズより大きくはしない。
   ========================================================= */

/* --- ブログ記事の写真は自動で角丸＋細い線に ---

   これまでは画像ごとに rc12 クラスを手で付けていた（しかも rc12 は
   角丸だけで線は入っていなかった）。記事ページに限って自動で当てる。

   `[class*="wp-image-"]` に絞っているのが肝。
   メディアから挿入した画像にだけ付く WordPress 標準のクラスなので、
   **絵文字（img.emoji）やプラグインのアイコンには当たらない**。
   記事本文には絵文字が画像として何枚も入っているため、この絞り込みは必須。

   固定ページには当てない（ユーザーの希望どおり記事だけ）。 */

body.single .article-body img[class*="wp-image-"] {
  box-sizing: border-box;
  border-radius: 12px;
  /* --ks-line だと青みが強く白っぽい写真で消えるため、
     写真の縁取りにはニュートラルな半透明の線を使う */
  border: 1px solid rgba(46, 58, 69, 0.14);
}

.ks-photos {
  display: flex;
  flex-wrap: wrap;
  /* 左そろえ。本文の行頭と縦の線がそろい、
     文章に混ざった写真（.ks-photos が付かないもの）とも位置が一致する */
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.2rem;
  margin: 0 0 1.8em;
}

.ks-photos img,
.ks-photos a {
  margin: 0;
  height: auto;
}

/* 2枚・4枚は2列 */
.ks-photos img { max-width: calc(50% - 0.6rem); }

/* 3枚・5枚以上は3列 */
.ks-photos-3 img { max-width: calc(33.333% - 0.8rem); }

/* 1枚だけのときは原寸のまま。
   .ks-photos の中央揃えに乗せることで、複数枚のときと縦の線がそろう */
.ks-photos-1 img { max-width: 100%; }

/* スマホは1枚ずつ縦に積む */
@media (max-width: 600px) {
  .ks-photos { gap: 1rem; }
  .ks-photos img,
  .ks-photos-3 img { max-width: 100%; }
}

/* =========================================================
   記事の最後の導線（応援する / 仲間になる）

   本文のすぐ下に置く。読み終えた気持ちのまま
   支援や参加にたどりつけるようにするため。
   トップの「一緒に活動しませんか？」の4枚カードとは
   形を変えて、繰り返し感が出ないようにしている。
   ========================================================= */

.ks-post-cta {
  margin: clamp(4rem, 6vw, 6.4rem) 0 1.6rem;
  padding: clamp(2.8rem, 4vw, 4rem) clamp(2rem, 4vw, 4rem);
  background: linear-gradient(170deg, #FFFCF4 0%, var(--ks-cream) 60%, #F4EFE0 100%);
  border-radius: 1.6rem;
  text-align: center;
}

.ks-post-cta-lead {
  margin: 0 0 0.6rem;
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--ks-ink-soft);
}

.ks-post-cta-title {
  margin: 0 0 clamp(2rem, 3vw, 2.8rem);
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 2.4vw, 2.4rem);
  line-height: 1.5;
  color: var(--ks-ink);
}

/* 寄付のボタン。ここが主役なので、本文中の .ks-btn より一回り大きい。
   色はヘッダーの「寄付をする」と揃えて黄色。 */
.ks-post-cta-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.4vw, 1.9rem);
  line-height: 1.4;
  padding: 1em 2.6em;
  border-radius: 999px;
  background: var(--ks-yellow);
  color: var(--ks-ink);
  box-shadow: 0 4px 0 var(--ks-yellow-d);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* 賢威の本文リンク色が勝たないように、hover でも色を固定する */
.ks-post-cta-main,
.ks-post-cta-main:hover,
.ks-post-cta-main:visited { color: var(--ks-ink); text-decoration: none; }
.ks-post-cta-main:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ks-yellow-d);
}

/* 仲間になるほうは添えるだけ。寄付と並べて同じ大きさにすると
   どちらへも進まれにくくなるため、下に小さく置く。 */
.ks-post-cta-sub {
  margin: clamp(1.6rem, 2.4vw, 2.2rem) 0 0;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--ks-ink-soft);
}
.ks-post-cta-sub a,
.ks-post-cta-sub a:visited { color: var(--ks-blue); font-weight: 700; }

@media (max-width: 480px) {
  /* 画面が狭いときは横幅いっぱいのボタンにして押しやすくする */
  .ks-post-cta-main { display: flex; width: 100%; padding-left: 1.2em; padding-right: 1.2em; }
}

/* 記事下（関連記事・前後リンク）の左右の余白。

   追加CSS が .keni-main_inner の余白を 0 にしているため、
   スマホでは記事下の要素が画面の端に貼りついていた。
   本文は .keni-section_wrap.article_wrap が padding 10px + margin 10px = 20px を
   持っているので、記事下もそこに合わせる。 */
@media (max-width: 767px) {
  body .behind-article-area,
  body .keni-breadcrumb { padding-left: 2rem; padding-right: 2rem; }
}

/* 記事下の「関連記事」の見出し。
   賢威の既定は幅いっぱいの青帯で、CTAのすぐ下に来ると浮く。
   h2:not(.title_no-style) が追加CSSであとから当たるため body で詳細度を上げる */
body .keni-related-title {
  background: none;
  border: 0;
  border-bottom: 2px solid var(--ks-line);
  padding: 0 0 0.8rem;
  margin: 0 0 1.6rem;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--ks-ink);
}

/* =========================================================
   記事一覧（カテゴリー・タグ・検索結果）

   賢威の既定は写真の有無で高さがばらつき、抜粋も
   「[…]」で途切れる。写真の比率をそろえたカードに置き換える。
   template-parts/content-archive.php と対になっている。
   ========================================================= */

/* 一覧の見出し（「活動報告」の記事一覧） */
body .archive_title_wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2.4rem, 4vw, 4rem) clamp(1.92rem, 3vw, 3.2rem)
           clamp(1.6rem, 2.4vw, 2.4rem);
}
body .archive_title_wrap .archive_title {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 2.8vw, 2.8rem);
  line-height: 1.5;
  color: var(--ks-ink);
}

/* 賢威のセクション枠を外して、カードだけが並ぶようにする */
body .entry-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 2.6vw, 3.2rem) clamp(1.6rem, 2vw, 2.4rem);
  margin: 0;
  padding: 0;
}

body .entry-list .ks-card {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  width: auto;
  float: none;
}

.ks-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--ks-line);
  border-radius: 1.2rem;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ks-card-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(46, 58, 69, 0.1);
}

/* 比率をそろえるのがカードの高さを統一する肝 */
.ks-card-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--ks-blue-l);
  overflow: hidden;
}
.ks-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* 写真も本文の画像も見つからなかったとき */
.ks-card-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--ks-blue);
  opacity: 0.5;
}

.ks-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.6rem 1.6rem 1.8rem;
}

.ks-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.2rem;
  color: var(--ks-ink-soft);
}
.ks-card-new {
  background: var(--ks-pink);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.35em 0.6em;
  border-radius: 0.4rem;
}
.ks-card-cat {
  background: var(--ks-blue-l);
  color: var(--ks-blue-d);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.35em 0.7em;
  border-radius: 999px;
}

.ks-card-title {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.55;
  color: var(--ks-ink);
}
.ks-card-link:hover .ks-card-title { color: var(--ks-blue-d); }

.ks-card-desc {
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--ks-ink-soft);
}

/* ページ送り。既定は角ばった水色の四角で、丸みのある全体のトーンから浮く */
body .page-nav { margin: clamp(3.2rem, 4vw, 4.8rem) 0 0; }
body .page-nav ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin: 0; padding: 0; }
body .page-nav li { list-style: none; margin: 0; padding: 0; }
body .page-nav li a,
body .page-nav li.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  padding: 0.7rem 1.2rem;
  border-radius: 0.8rem;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: none;
}
body .page-nav li a {
  background: #fff;
  color: var(--ks-blue);
  border: 1px solid var(--ks-line);
}
body .page-nav li a:hover { background: var(--ks-blue-l); color: var(--ks-blue-d); }
body .page-nav li.current { background: var(--ks-blue); color: #fff; }

@media (max-width: 900px) {
  body .entry-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 736px) {
  /* 追加CSSが .keni-main_inner の余白を 0 にしているため、
     このままではカードが画面の端に貼りつく。
     見出し（.archive_title_wrap）と同じ値を入れて左右をそろえる。

     親テーマが .keni-section_wrap に左右 10px のマージンを持っており、
     それが残ると見出しより10pxずれるので先に外す。 */
  body .keni-section_wrap_style02 { margin-left: 0; margin-right: 0; }
  body .entry-list {
    padding-left: clamp(1.92rem, 3vw, 3.2rem);
    padding-right: clamp(1.92rem, 3vw, 3.2rem);
  }
}

@media (max-width: 560px) {
  /* 1列では写真が大きくなりすぎるので横並びのリストに切り替える */
  body .entry-list { grid-template-columns: 1fr; gap: 1.4rem; }
  .ks-card-link { flex-direction: row; align-items: stretch; }
  .ks-card-thumb { flex: 0 0 34%; aspect-ratio: 1 / 1; }
  .ks-card-body { flex: 1 1 auto; padding: 1.2rem 1.4rem; gap: 0.5rem; }
  .ks-card-title { font-size: 1.45rem; }
  .ks-card-desc { display: none; }
}

/* =========================================================
   お問い合わせ・応募フォーム（Contact Form 7）

   カスタマイザーの「追加CSS」がこのファイルより後に読まれるため、
   打ち消す箇所は body を前置して詳細度を上げている。
   例: 追加CSS の `.wpcf7 input[type="submit"]`（0,2,1）に対して
       ここでは `body .wpcf7 input[type="submit"]`（0,2,2）。
   ========================================================= */

.wpcf7 { font-family: 'Zen Maru Gothic', sans-serif; }

body .wpcf7 form p {
  font-size: 1.5rem;
  line-height: 1.9;
  font-weight: 500;
  margin-bottom: 2.4rem;
}

/* --- 必須 / 任意 のマーク --- */

body .wpcf7 .must,
body .wpcf7 .free {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  padding: 0.5rem 0.9rem;
  margin-right: 0.8rem;
  border-radius: 0.4rem;
  vertical-align: 0.15em;
}
body .wpcf7 .must { background: #E4707C; }
body .wpcf7 .free { background: var(--ks-ink-soft); }

/* --- 入力欄 --- */

body .wpcf7 input.wpcf7-text,
body .wpcf7 input.wpcf7-date,
body .wpcf7 input.wpcf7-number,
body .wpcf7 textarea.wpcf7-textarea,
body .wpcf7 select.wpcf7-select {
  width: 100%;
  max-width: 42rem;
  margin: 0.8rem 0 0;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--ks-line);
  border-radius: 0.8rem;
  background: #fff;
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--ks-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* 必須項目の黄色い背景は使わない（「必須」マークで十分伝わるため） */
body .wpcf7 input.wpcf7-text.wpcf7-validates-as-required,
body .wpcf7 textarea.wpcf7-textarea.wpcf7-validates-as-required { background: #fff; }

body .wpcf7 input.wpcf7-text:focus,
body .wpcf7 textarea.wpcf7-textarea:focus,
body .wpcf7 select.wpcf7-select:focus {
  outline: none;
  border-color: var(--ks-blue);
  box-shadow: 0 0 0 3px rgba(14,127,176,0.15);
}

body .wpcf7 textarea.wpcf7-textarea { height: 20rem; max-width: 100%; }
body .wpcf7 select.wpcf7-select { max-width: 18rem; }

/* --- ラジオ・チェックボックス --- */

body .wpcf7 span.wpcf7-list-item { display: block; margin: 0 0 0.8rem; }
body .wpcf7 span.wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}
body .wpcf7 input[type="radio"],
body .wpcf7 input[type="checkbox"] {
  width: 1.8rem;
  height: 1.8rem;
  accent-color: var(--ks-blue);
  flex-shrink: 0;
}

/* --- 送信ボタン --- */

body .wpcf7 input.wpcf7-submit,
body .wpcf7 input[type="submit"] {
  display: block;
  width: auto;
  min-width: 28rem;
  margin: 3.2rem auto 0;
  padding: 1.4rem 3.2rem;
  border: 0;
  border-radius: 4.8rem;
  background: var(--ks-blue);
  color: #fff;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ks-blue-d);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
body .wpcf7 input.wpcf7-submit:hover,
body .wpcf7 input[type="submit"]:hover {
  background: var(--ks-blue-d);
  color: #fff;
  border: 0;
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ks-blue-d);
}

body .wpcf7 .wpcf7-spinner { display: block; margin: 1.2rem auto 0; }

/* --- エラー表示 --- */

body .wpcf7 span.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #D2323F;
}
body .wpcf7 .wpcf7-response-output {
  margin: 2.4rem 0 0;
  padding: 1.2rem 1.6rem;
  border-width: 2px;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.8;
}

/* =========================================================
   ヘッダー（タブレット以下）

   この幅では賢威の標準どおり「ロゴ＋ハンバーガー」の縦積みになる。
   .keni-header_cont（タグライン・Instagram・お問い合わせ）は
   追加CSS が display:none !important で隠しているのでここでは出さない。
   ========================================================= */

@media (max-width: 767px) {
  /* タグラインはPCヘッダーのグリッドでのみ置き場所がある。
     追加CSS は 736px 以下でしか .keni-header_cont を隠していないため、
     737〜767px だけタグラインがヘッダー右上に浮いていた。ここで揃える。 */
  body .keni-header_cont { display: none; }

  /* 親テーマの max-width:50% でロゴが小さく潰れるので解除して高さで揃える */
  body .keni-header_inner .site-title { max-width: none; margin: 0; }
  body .keni-header_inner .site-title img { height: 4.2rem; width: auto; max-width: none; }

  /* ハンバーガーの水色（追加CSS）をサイトの青に合わせる */
  body .keni-gnav_btn { background: var(--ks-blue); border-radius: 0 0 0 0.8rem; }
  body .keni-gnav_btn_icon-open,
  body .keni-gnav_btn_icon-open::before,
  body .keni-gnav_btn_icon-open::after { background-color: #fff; }
  body .keni-gnav_btn_icon-close { color: #fff; }

  /* --- ヘッダーを通常の位置に戻す ---

     追加CSS（736px以下）が旧デザインの名残で

       .keni-header_wrap { position: absolute; top: 0; background: transparent; }

     としてヘッダーをメインビジュアル画像の上に重ねている。
     その分は各ページの見出しに padding-top: 100〜130px を付けて逃がしていた
     （.article-header h1 / .archive_title）。

     新デザインではメインビジュアルを使わないので重ねる必要がない。
     通常フローに戻し、逃がすための padding も打ち消す。
     これをやらないと、見出しの padding を外したページで
     本文がヘッダーの下に潜り込む。 */
  body .keni-header_wrap {
    position: static;
    background: #fff;
  }
  body .article-header h1,
  body .single .article-header h1,
  body .archive_title { padding-top: 0; }
}

/* =========================================================
   フッター
   3つのウィジェットエリアを 1fr 1.3fr 1.4fr の3カラムに並べる。
   中身（ロゴ / リンク / 寄付CTA）はウィジェット側のHTML。
   ========================================================= */

body .keni-footer_wrap { background: #fff; }

/* 親テーマは .col1 .keni-footer_outer を 980px に絞る。
   コピーライトの青帯を画面いっぱいに敷きたいので解除し、
   幅の制御は内側（_inner / .keni-copyright）で行う。 */
.col1 .keni-footer_outer,
.col2 .keni-footer_outer { max-width: none; }

.keni-footer_inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3.2rem, 4vw, 5.6rem) clamp(1.92rem, 3vw, 3.2rem);
}

body .keni-footer-cont_wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.4fr);
  gap: clamp(2.4rem, 3vw, 4.8rem);
  align-items: start;
}

/* 親テーマは各カラムを float + % 幅で並べる。グリッドに任せるため解除する。 */
body .keni-footer-cont_wrap .keni-footer-cont {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  background: none;
}

/* ウィジェットの外枠（.keni-section_wrap）に親テーマが
   padding:20px / margin:0 10px 40px を当てていて、
   ブロックの下に大きな余白ができるので打ち消す。 */
body .keni-footer-cont .keni-section_wrap,
body .keni-footer-cont .keni-section {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* 賢威のウィジェットタイトルはカンプに無いので隠す */
.keni-footer-cont .keni-section_title,
.keni-footer-cont .widget-title { display: none; }

/* ---------- 1列目：ロゴ ---------- */

.ks-foot-brand { display: block; }

.ks-foot-logo {
  display: block;
  width: clamp(140px, 14vw, 180px);
  height: auto;
  margin: 0 0 1.2rem;
}

.ks-foot-name {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ks-ink);
  margin: 0 0 0.4rem;
}

.ks-foot-tag {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--ks-ink-soft);
  margin: 0;
}

/* ---------- 2列目：リンク＋連絡先 ---------- */

.ks-foot-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 2.5vw, 3.2rem);
}

.ks-foot-h {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ks-ink);
  margin: 0 0 1.2rem;
}

.ks-foot-links,
.ks-foot-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ks-foot-links li,
.ks-foot-contact li { margin-bottom: 1rem; }

.ks-foot-links a,
.ks-foot-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.3rem;
  color: var(--ks-ink-soft);
  text-decoration: none;
}
.ks-foot-links a:hover,
.ks-foot-contact a:hover { color: var(--ks-blue); text-decoration: underline; }

.ks-foot-contact svg {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ks-blue);
}
/* LINEのアイコンは塗りのパス1本で描いてあるので塗りに戻す
   （Instagram は rect / circle なので影響しない） */
.ks-foot-contact svg path { fill: currentColor; stroke: none; }
.ks-foot-contact svg .ks-dot { fill: currentColor; stroke: none; }

/* ---------- 3列目：寄付CTAカード ---------- */

.ks-foot-cta {
  position: relative;
  background: var(--ks-blue-l);
  border-radius: 1.2rem;
  padding: clamp(2rem, 2.4vw, 2.8rem);
  /* 右下のイラスト分だけ空ける。空けすぎるとリード文が不自然に折り返す。
     内訳は イラストの幅（58〜80px）＋ right（20〜28px）＋ 余白16px */
  padding-right: clamp(9.6rem, 11vw, 12.4rem);
  overflow: hidden;
}

.ks-foot-cta-lead {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.2vw, 1.65rem);
  line-height: 1.75;
  color: var(--ks-ink);
  margin: 0 0 1.6rem;
}

.ks-foot-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--ks-blue);
  color: #fff;
  font-weight: 700;
  font-size: 1.35rem;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 3.2rem;
  transition: background 0.15s;
}
.ks-foot-cta-btn:hover { background: var(--ks-blue-d); color: #fff; }

/* 中身は images/foot-heart.png（ks-foot-cta-img.php でウィジェットに差し込む）。
   right / bottom は **カードの padding と同じ値**。こうすると絵の下端がボタンの
   下端に、右端が本文の右端にそろう。カードの padding を変えるならここも同じ値にする。
   カード側の padding-right がこの幅ぶん（幅＋right＋余白）を空けている。 */
.ks-foot-cta-art {
  position: absolute;
  right: clamp(2rem, 2.4vw, 2.8rem);
  bottom: clamp(2rem, 2.4vw, 2.8rem);
  display: block;
  width: clamp(58px, 6vw, 80px);
  height: auto;
  pointer-events: none;
}

/* ---------- コピーライト（青帯） ---------- */

body .keni-copyright_wrap { background: var(--ks-blue); }

.col1 .keni-copyright,
.col2 .keni-copyright {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.6rem 3.2rem;
  text-align: center;
  color: #fff;
}
body .keni-copyright small { font-size: 1.2rem; }
body .keni-copyright small + small {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 1rem;
  opacity: 0.75;
}
/* 追加CSS の a.google{color:#333} より詳細度を上げて白にする（青帯の上なので） */
body .keni-copyright a,
body .keni-copyright a.google:link,
body .keni-copyright a.google:visited,
body .keni-copyright a.google:hover { color: #fff; text-decoration: underline; }

/* ---------- フッター SP ---------- */

@media (max-width: 860px) {
  body .keni-footer-cont_wrap { grid-template-columns: 1fr; }
  /* 1カラムになるとカードが横に広がる。イラストも確保枠に合わせて大きくする
     （padding-right とこの幅は対。片方だけ変えると余る／文字に重なる）。
     リード文はイラストの高さと縦にかぶるので、幅ぶんは必ず空けておくこと */
  .ks-foot-cta { padding-right: clamp(10rem, 24vw, 13rem); }
  .ks-foot-cta-art { width: clamp(70px, 18vw, 96px); }
}

/* リンク2列は 390px 幅でも収まるので、かなり狭い端末まで2列を保つ */
@media (max-width: 380px) {
  .ks-foot-cols { grid-template-columns: 1fr; }
}