@charset "UTF-8";
/* ==========================================================================
   癒しストア - コンポーネントレイヤー
   --------------------------------------------------------------------------
   トークンは base.css。ここは親テーマ (賢威8) と cs-shop プラグインの
   見た目を上書きするコンポーネント層。最後に読み込まれるので、
   同じ詳細度なら勝つ。!important は原則使わない。

   Dials: DESIGN_VARIANCE 5 / MOTION_INTENSITY 3 / VISUAL_DENSITY 3
   モーションは :hover / :active の transition のみ。JS は増やさない。
   ========================================================================== */

/* ==========================================================================
   1. レイアウト骨格
   ========================================================================== */

.keni-container {
  width: 100%;
  max-width: none;
  background-color: var(--iy-bg);
}

.keni-header_outer,
.keni-gnav_outer,
.keni-main_outer,
.keni-footer_outer,
.keni-breadcrumb-list_wrap .keni-breadcrumb-list {
  width: 100%;
  max-width: var(--iy-wrap);
  margin-inline: auto;
  padding-inline: var(--iy-space-5);
}

.keni-main_wrap {
  background-color: var(--iy-bg);
}

/* 親テーマは float + padding-right でサイドバーを作っている。
   Grid に置き換えて計算を消す（flex の % 計算も同様に避ける）。 */
@media (min-width: 1024px) {
  .keni-main_outer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--iy-space-7);
    align-items: start;
  }

  /* 親テーマは float + padding-right + margin-right:-320px の三点セットで
     サイドバーの居場所を作っている。Grid では全て邪魔になるので全部戻す。 */
  .keni-main_outer > .keni-main {
    float: none;
    width: auto;
    min-width: 0;
    margin-right: 0;
    padding-right: 0;
  }

  .keni-main_outer > .keni-sub {
    float: none;
    width: auto;
    min-width: 0;
    position: sticky;
    top: calc(var(--iy-header-h, 68px) + var(--iy-space-4));
  }
}

/* 1023px 以下は 1カラムに落とす */
@media (max-width: 1023px) {
  .keni-main_outer > .keni-main,
  .keni-main_outer > .keni-sub {
    float: none;
    width: 100%;
    margin-right: 0;
    padding-right: 0;
  }
}

/* 中身の無いフリーエリアは高さを取らせない。
   ウィジェット未設定のまま min-height だけが効いており、
   トップページに合計 200px の白い空白が出ていた。 */
.keni-main .free-area:not(:has(*)),
.keni-main_inner > header:not(:has(*)) {
  min-height: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.keni-main_inner {
  padding-block: var(--iy-space-6);
}

/* 親テーマの白カードを剥がして、セクションごとに余白で区切る */
.keni-main .keni-section_wrap {
  margin-bottom: var(--iy-space-7);
  background: none;
  border: 0;
  box-shadow: none;
}

.keni-main .keni-section {
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* ==========================================================================
   2. ヘッダー
   ========================================================================== */

.keni-header_wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--iy-surface);
  border-bottom: 1px solid var(--iy-border);
  box-shadow: none;
}

.keni-header_wrap .keni-header,
.keni-header_wrap .keni-header_inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--iy-space-4);
  width: auto;
  min-height: 0;
  padding: 0;
  background: none;
}

/* .keni-header_inner は .keni-header の唯一の flex 子。
   flex: 1 を与えないと自然幅まで縮み、サイトタイトルが 2行に折れる。 */
.keni-header_wrap .keni-header_inner {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding-block: var(--iy-space-4);
}

.keni-header_wrap .site-title {
  flex: 1 1 auto;
  min-width: 0;
}

/* サイトタイトル。従来は line-height が詰まっていて
   「癒し。」のディセンダが見切れていた。 */
.keni-header_wrap .site-title {
  margin: 0;
  padding: 0;
  font-size: clamp(1.8rem, 1.36rem + 1.1vw, 2.4rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: var(--iy-track-heading);
  overflow: visible;
}

.keni-header_wrap .site-title a {
  display: inline-block;
  color: var(--iy-fg);
  text-decoration: none;
  transition: color .2s var(--iy-ease);
}

.keni-header_wrap .site-title a:hover {
  color: var(--iy-accent);
}

.keni-header_wrap .keni-header_cont {
  width: auto;
  padding: 0;
  text-align: right;
}

.keni-header_wrap .site-description {
  margin: 0;
  color: var(--iy-fg-subtle);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .keni-header_wrap .keni-header_cont {
    display: none; /* 狭い画面ではキャッチコピーよりタイトルを優先 */
  }
}

/* ==========================================================================
   3. グローバルナビ
   従来 .keni-gnav_wrap は 92px あり、うち約 50px が空白帯だった。
   ========================================================================== */

.keni-gnav_wrap {
  min-height: 0;
  height: auto;
  background-color: var(--iy-surface);
  border-bottom: 1px solid var(--iy-border);
  box-shadow: none;
}

.keni-gnav_wrap .keni-gnav,
.keni-gnav_wrap .keni-gnav_inner {
  width: auto;
  min-height: 0;
  height: auto;
  padding: 0;
  background: none;
}

.keni-gnav_wrap .keni-gnav_cont {
  display: flex;
  flex-wrap: nowrap;      /* デスクトップでは 1行に収める */
  align-items: stretch;
  gap: 0;
  width: auto;
  margin: 0;
  padding: 0;
  overflow-x: auto;       /* 項目が増えても折り返さず横スクロール */
  scrollbar-width: none;
  list-style: none;
}

.keni-gnav_wrap .keni-gnav_cont::-webkit-scrollbar {
  display: none;
}

/* SP 用ハンバーガーの器がデスクトップでも 50px の空帯として残っていた。
   ナビ本体は 44px しかないのに .keni-gnav_wrap が 95px あった原因。 */
@media (min-width: 768px) {
  .keni-gnav_wrap .keni-gnav_btn_wrap {
    display: none;
  }
}

@media (max-width: 767px) {
  .keni-gnav_wrap .keni-gnav_btn_wrap {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

.keni-gnav_wrap .keni-gnav_cont > li {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.keni-gnav_wrap .keni-gnav_cont > li > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 44px;       /* タップ目標 */
  padding: var(--iy-space-3) var(--iy-space-4);
  color: var(--iy-fg-muted);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border: 0;
  transition: color .2s var(--iy-ease);
}

/* 現在地とホバーは下線 2px で示す。背景の塗り替えはしない */
.keni-gnav_wrap .keni-gnav_cont > li > a::after {
  content: "";
  position: absolute;
  inset-inline: var(--iy-space-4);
  bottom: 0;
  height: 2px;
  background-color: var(--iy-accent);
  transform: scaleX(0);
  transition: transform .2s var(--iy-ease);
}

.keni-gnav_wrap .keni-gnav_cont > li > a:hover,
.keni-gnav_wrap .keni-gnav_cont > li.current-menu-item > a,
.keni-gnav_wrap .keni-gnav_cont > li.current-menu-ancestor > a {
  color: var(--iy-accent);
  background: none;
}

.keni-gnav_wrap .keni-gnav_cont > li > a:hover::after,
.keni-gnav_wrap .keni-gnav_cont > li.current-menu-item > a::after,
.keni-gnav_wrap .keni-gnav_cont > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* 下層メニュー */
.keni-gnav_wrap .keni-gnav_cont ul {
  min-width: 19.2rem;
  padding: var(--iy-space-2);
  background-color: var(--iy-surface);
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r);
  box-shadow: var(--iy-shadow-lg);
}

.keni-gnav_wrap .keni-gnav_cont ul > li > a {
  padding: var(--iy-space-2) var(--iy-space-3);
  border-radius: var(--iy-r-input);
  color: var(--iy-fg-muted);
  font-size: 1.5rem;
  background: none;
}

.keni-gnav_wrap .keni-gnav_cont ul > li > a:hover {
  background-color: var(--iy-accent-soft);
  color: var(--iy-accent);
}

/* ==========================================================================
   4. 記事一覧カード
   構成: 先頭 1件を横組みのリード、以降を 2カラムのグリッド。
   単調な等幅 3列の繰り返しを避けつつ、変化は 1段だけに留める。
   ========================================================================== */

.keni-main .entry-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--iy-space-6);
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .keni-main .entry-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--iy-space-5);
  }
}

/* 親テーマは旧デザイン（高さ固定の横並びリスト）用に
   article へ height:240px + overflow:hidden を当てている。
   カード化して縦積みにしたので、はみ出した本文が切れる。高さは内容に委ねる。 */
.keni-main .entry-list > article {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.keni-main .entry-list .entry {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--iy-surface);
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r);
  box-shadow: var(--iy-shadow-sm);
  transition: box-shadow .25s var(--iy-ease), border-color .25s var(--iy-ease), transform .25s var(--iy-ease);
}

.keni-main .entry-list .entry:hover {
  border-color: var(--iy-accent-line);
  box-shadow: var(--iy-shadow);
  transform: translateY(-2px);
}

.keni-main .entry-list .entry:active {
  transform: translateY(0);
}

/* --- リードカード: 先頭 1件だけ横組みで全幅 --- */
@media (min-width: 768px) {
  .keni-main .entry-list > article:first-child {
    grid-column: 1 / -1;
  }

  .keni-main .entry-list > article:first-child .entry {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
  }

  .keni-main .entry-list > article:first-child .entry_thumb {
    height: 100%;
  }

  .keni-main .entry-list > article:first-child .entry_title {
    font-size: 2.2rem;
  }

  .keni-main .entry-list > article:first-child .entry_inner {
    padding: var(--iy-space-6);
  }
}

/* --- サムネイル ---
   親テーマは左サムネの回り込みレイアウト用に .entry_thumb へ
   float:left / width:200px / max-width:35% を当てている。
   カード化したので 3つとも解除してカード幅いっぱいに戻す。 */
.keni-main .entry-list .entry_thumb {
  position: relative;
  flex: 0 0 auto; /* flex 子として縮ませない。SP で高さが潰れる */
  float: none;
  width: 100%;
  max-width: none;
  max-height: none; /* 親テーマの max-height:220px を解除 */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--iy-surface-sunk);
}

/* SNS ボタンは共有数取得スクリプトを外している都合で中身が空のまま、
   60px の帯とドットだけが残っていた（一覧カードと本文上部の両方）。
   空の時だけ畳む。ボタンを復活させれば自動で表示に戻る。 */
.keni-main .sns-btn_wrap:not(:has(a)) {
  display: none;
}

.keni-main .entry-list .entry_thumb > a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.keni-main .entry-list .entry_thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .4s var(--iy-ease);
}

.keni-main .entry-list .entry:hover .entry_thumb img {
  transform: scale(1.03);
}

/* --- 商品画像サムネイル（§82 で補完したもの） ---
   アフィリエイト API から来る商品写真は縦横比も背景もまちまちなので、
   16:10 の枠に contain で収める。台紙はほぼ無彩色の一段沈んだ面にする。

   カテゴリ色の淡いグラデーション + mix-blend-mode: multiply も試したが、
   白背景でない商品写真（屋外カットなど）が濁るため採用しない。
   グリッドの色の変化はアイキャッチ未設定時のプレースホルダ側で担保する。 */
.keni-main .entry-list .iy-thumb--product > a {
  display: block;
  aspect-ratio: 16 / 10;
  padding: var(--iy-space-3);
  background-color: var(--iy-surface-2);
}

.keni-main .entry-list .iy-thumb--product img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto; /* 枠は親が持つ。画像側の 16:10 指定を外す */
  object-fit: contain;
}

/* 暗背景では白地の商品写真がそのままだと眩しく浮くので、
   明るい台紙を敷いた上に置いて写真そのものは加工しない。 */
@media (prefers-color-scheme: dark) {
  .keni-main .entry-list .iy-thumb--product > a {
    background-color: var(--iy-slate-50);
  }
}

/* --- アイキャッチ未設定時のプレースホルダ ---
   実写を捏造せず、ブランドのティールの範囲内で色相だけを
   カテゴリごとにずらしてグリッドに変化を出す。 */
.keni-main .entry-list .iy-thumb--ph > a {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: var(--iy-space-4);
  background-image:
    linear-gradient(
      145deg,
      hsl(var(--iy-ph-h, 183) 34% 92%) 0%,
      hsl(var(--iy-ph-h, 183) 26% 86%) 100%
    );
}

.keni-main .entry-list .iy-thumb__label {
  color: hsl(var(--iy-ph-h, 183) 42% 26%);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .keni-main .entry-list .iy-thumb--ph > a {
    background-image:
      linear-gradient(
        145deg,
        hsl(var(--iy-ph-h, 183) 20% 20%) 0%,
        hsl(var(--iy-ph-h, 183) 22% 14%) 100%
      );
  }

  .keni-main .entry-list .iy-thumb__label {
    color: hsl(var(--iy-ph-h, 183) 34% 74%);
  }
}

/* --- カード本文 --- */
.keni-main .entry-list .entry_inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--iy-space-3);
  padding: var(--iy-space-5);
  text-align: left; /* 親テーマのレイアウトスタイルが中央寄せを持ち込むことがある */
}

.keni-main .entry-list .entry_title {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--iy-fg);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--iy-track-heading);
}

.keni-main .entry-list .entry_title a {
  color: inherit;
  text-decoration: none;
}

.keni-main .entry-list .entry_title a:hover {
  color: var(--iy-accent);
  text-decoration: underline;
}

.keni-main .entry-list .entry_description {
  margin: 0;
  color: var(--iy-fg-muted);
  font-size: 1.5rem;
  line-height: 1.85;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* --- メタ情報 --- */
.keni-main .entry_status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iy-space-2) var(--iy-space-3);
  margin: 0;
  padding: 0;
}

.keni-main .entry_status .entry_date,
.keni-main .entry_status .entry_category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iy-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.keni-main .entry_status .entry_date_item {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--iy-fg-subtle);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.keni-main .entry_status .entry_category_item {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.keni-main .entry_status .entry_category_item a {
  display: inline-block;
  padding: .2em .75em;
  border: 1px solid var(--iy-accent-line);
  border-radius: var(--iy-r-pill);
  background-color: var(--iy-accent-soft);
  color: var(--iy-accent);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.7;
  text-decoration: none;
  transition: background-color .2s var(--iy-ease), color .2s var(--iy-ease);
}

.keni-main .entry_status .entry_category_item a:hover {
  background-color: var(--iy-accent);
  color: var(--iy-on-accent);
}

/* --- 続きを読む ---
   従来の枠付きピルボタンをやめ、矢印つきのテキストリンクにする。
   カード全体がホバーで持ち上がるので、二重のボタンは要らない。 */
.keni-main .entry-list .ently_read-more,
.keni-main .entry-list .iy-readmore {
  align-self: flex-start;
  margin: auto 0 0;
  padding-top: var(--iy-space-2);
  text-align: left; /* 親テーマはボタン用に中央寄せしている */
}

.keni-main .entry-list .ently_read-more a,
.keni-main .entry-list .iy-readmore a {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--iy-accent);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  transition: gap .2s var(--iy-ease), color .2s var(--iy-ease);
}

.keni-main .entry-list .ently_read-more a::after,
.keni-main .entry-list .iy-readmore a::after {
  content: "\2192"; /* rightwards arrow */
  font-size: 1.05em;
  line-height: 1;
}

.keni-main .entry-list .ently_read-more a:hover,
.keni-main .entry-list .iy-readmore a:hover {
  gap: .7em;
  color: var(--iy-accent-hover);
}

/* 親テーマのアイコンフォント矢印は不要 */
.keni-main .entry-list .ently_read-more a .icon_arrow_s_right,
.keni-main .entry-list .iy-readmore a .icon_arrow_s_right {
  display: none;
}

/* ==========================================================================
   5. 記事本文
   ========================================================================== */

.keni-main .article_wrap .keni-section {
  padding: 0;
}

.keni-main .article-header {
  margin-bottom: var(--iy-space-6);
  padding-bottom: var(--iy-space-5);
  border-bottom: 1px solid var(--iy-border);
}

.keni-main .article-header .entry_title {
  margin: 0 0 var(--iy-space-4);
  padding: 0;
  background: none;
  border: 0;
  color: var(--iy-fg);
  font-size: clamp(2.4rem, 1.76rem + 1.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: var(--iy-track-heading);
}

.keni-main .article-body {
  max-width: var(--iy-measure);
  color: var(--iy-fg);
  font-size: var(--iy-fs-body);
  line-height: var(--iy-lh-body);
}

.keni-main .article-body > p {
  margin: 0 0 var(--iy-space-6);
}

.keni-main .article-visual {
  margin: 0 0 var(--iy-space-6);
}

.keni-main .article-visual img {
  width: 100%;
  border-radius: var(--iy-r);
}

/* --- 見出し ---
   従来は h2 が幅いっぱいのティールのベタ塗りバーだった。
   罫と字面の強さで階層を作り、色は縦罫だけに残す。 */
.keni-main .article-body h2 {
  margin: var(--iy-space-8) 0 var(--iy-space-5);
  padding: 0 0 var(--iy-space-3) var(--iy-space-4);
  border: 0;
  border-left: 3px solid var(--iy-accent);
  border-bottom: 1px solid var(--iy-border);
  border-radius: 0;
  background: none;
  color: var(--iy-fg);
  font-size: clamp(2rem, 1.68rem + .8vw, 2.4rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: var(--iy-track-heading);
}

.keni-main .article-body h3 {
  margin: var(--iy-space-7) 0 var(--iy-space-4);
  padding: 0;
  border: 0;
  background: none;
  color: var(--iy-fg);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--iy-track-heading);
}

.keni-main .article-body h4,
.keni-main .article-body h5 {
  margin: var(--iy-space-6) 0 var(--iy-space-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--iy-fg-muted);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.6;
}

/* --- 本文中のリンク ---
   色だけに頼らず常に下線を出す。 */
.keni-main .article-body a {
  color: var(--iy-accent);
  text-decoration: underline;
  text-decoration-color: var(--iy-accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: text-decoration-color .2s var(--iy-ease), color .2s var(--iy-ease);
}

.keni-main .article-body a:hover {
  color: var(--iy-accent-hover);
  text-decoration-color: currentColor;
}

/* --- リスト --- */
.keni-main .article-body ul,
.keni-main .article-body ol {
  margin: 0 0 var(--iy-space-6);
  padding-left: 1.4em;
}

.keni-main .article-body li {
  margin-bottom: var(--iy-space-2);
}

/* --- 引用 --- */
.keni-main .article-body blockquote {
  margin: 0 0 var(--iy-space-6);
  padding: var(--iy-space-5);
  border: 0;
  border-left: 3px solid var(--iy-accent-line);
  border-radius: 0 var(--iy-r) var(--iy-r) 0;
  background-color: var(--iy-surface-2);
  color: var(--iy-fg-muted);
}

.keni-main .article-body blockquote > :last-child {
  margin-bottom: 0;
}

/* --- 表 --- */
.keni-main .article-body table {
  width: 100%;
  margin: 0 0 var(--iy-space-6);
  border-collapse: collapse;
  font-size: 1.5rem;
}

.keni-main .article-body th,
.keni-main .article-body td {
  padding: var(--iy-space-3) var(--iy-space-4);
  border: 0;
  border-bottom: 1px solid var(--iy-border);
  text-align: left;
  vertical-align: top;
}

.keni-main .article-body thead th {
  background-color: var(--iy-surface-2);
  color: var(--iy-fg-muted);
  font-size: 1.4rem;
  font-weight: 700;
}

/* --- コード --- */
.keni-main .article-body code,
.keni-main .article-body pre {
  font-family: var(--iy-font-mono);
  font-size: .875em;
}

.keni-main .article-body pre {
  overflow-x: auto;
  margin: 0 0 var(--iy-space-6);
  padding: var(--iy-space-4);
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r);
  background-color: var(--iy-surface-2);
}

/* --- タグ --- */
.keni-main .post-tag {
  margin-top: var(--iy-space-7);
  padding-top: var(--iy-space-5);
  border-top: 1px solid var(--iy-border);
}

.keni-main .post-tag dl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--iy-space-3);
  margin: 0;
}

.keni-main .post-tag dt {
  margin: 0;
  color: var(--iy-fg-subtle);
  font-size: 1.3rem;
  font-weight: 700;
}

.keni-main .post-tag dd {
  margin: 0;
}

.keni-main .post-tag ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iy-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.keni-main .post-tag li {
  margin: 0;
}

.keni-main .post-tag li a {
  display: inline-block;
  padding: .2em .75em;
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r-pill);
  background-color: var(--iy-surface-2);
  color: var(--iy-fg-muted);
  font-size: 1.2rem;
  line-height: 1.7;
  text-decoration: none;
  transition: border-color .2s var(--iy-ease), color .2s var(--iy-ease);
}

.keni-main .post-tag li a:hover {
  border-color: var(--iy-accent-line);
  color: var(--iy-accent);
}

/* ==========================================================================
   6. 見出し付きパネル (関連記事 / 投稿ナビ / コメント)
   ========================================================================== */

.keni-main .keni-section > h2,
.keni-main .keni-section_wrap > h2,
.keni-main #comments h2,
.keni-main .keni-related-posts h2 {
  margin: 0 0 var(--iy-space-5);
  padding: 0 0 var(--iy-space-3);
  border: 0;
  border-bottom: 1px solid var(--iy-border);
  border-radius: 0;
  background: none;
  color: var(--iy-fg);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--iy-track-heading);
}

/* --- 関連記事 --- */
.keni-main .related-entry-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--iy-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 640px) {
  .keni-main .related-entry-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.keni-main .related-entry-list_item {
  display: flex;
  align-items: center;
  gap: var(--iy-space-3);
  margin: 0;
  padding: var(--iy-space-3);
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r);
  background-color: var(--iy-surface);
  transition: border-color .2s var(--iy-ease);
}

.keni-main .related-entry-list_item:hover {
  border-color: var(--iy-accent-line);
}

.keni-main .related-entry_thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--iy-r-input);
  background-color: var(--iy-surface-sunk);
}

.keni-main .related-entry_thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

.keni-main .related-entry_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.keni-main .related-entry-list_item a {
  color: var(--iy-fg);
  font-size: 1.5rem;
  line-height: 1.6;
  text-decoration: none;
}

.keni-main .related-entry-list_item a:hover {
  color: var(--iy-accent);
  text-decoration: underline;
}

/* --- アイキャッチ未設定の穴埋め ---
   親テーマは共通の no-image.jpg（グレーのクリップアート）を出す。
   一覧カードは content-archive.php で置き換え済みだが、関連記事や
   ウィジェットなど親テーマ側のテンプレートには残る。
   実写を捏造せず、ブランドの面で静かに埋める。 */
.keni-main img[src*="no-image"],
.keni-sub img[src*="no-image"] {
  opacity: 0;
}

.keni-main :is(figure, div, span, p):has(> img[src*="no-image"]),
.keni-main :is(figure, div, span, p):has(> a > img[src*="no-image"]),
.keni-sub :is(figure, div, span, p):has(> img[src*="no-image"]),
.keni-sub :is(figure, div, span, p):has(> a > img[src*="no-image"]) {
  background-image: linear-gradient(145deg, var(--iy-accent-soft), var(--iy-surface-sunk));
}

/* 記事本文内のカテゴリ内部リンク (§68) */
.keni-child-hub-links {
  margin-top: var(--iy-space-7);
  padding: var(--iy-space-5);
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r);
  background-color: var(--iy-surface-2);
}

.keni-child-hub-links__title {
  margin: 0 0 var(--iy-space-3);
  color: var(--iy-fg);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
}

.keni-child-hub-links__hub {
  margin: 0 0 var(--iy-space-3);
}

.keni-child-hub-links__hub a {
  color: var(--iy-accent);
  font-weight: 700;
  text-decoration: none;
}

.keni-child-hub-links__hub a:hover {
  text-decoration: underline;
}

.keni-child-hub-links__list {
  margin: 0;
  padding-left: 1.25em;
}

.keni-child-hub-links__list li {
  margin-bottom: var(--iy-space-2);
}

.keni-child-hub-links__list a {
  color: var(--iy-fg-muted);
  text-decoration: none;
}

.keni-child-hub-links__list a:hover {
  color: var(--iy-accent);
  text-decoration: underline;
}

/* ==========================================================================
   7. cs-shop 商品カード
   アフィリエイト導線。ここが実質のコンバージョン地点なので、
   画像の枠を固定して CLS を出さないことを優先する。
   ========================================================================== */

.keni-main .csshop-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--iy-space-4);
  margin: 0 0 var(--iy-space-6);
}

@media (max-width: 480px) {
  .keni-main .csshop-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--iy-space-3);
  }
}

.keni-main .csshop-item {
  display: flex;
  flex-direction: column;
  gap: var(--iy-space-2);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--iy-space-3);
  overflow: hidden;
  background-color: var(--iy-surface);
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r);
  box-shadow: none;
  transition: border-color .2s var(--iy-ease), box-shadow .2s var(--iy-ease);
}

.keni-main .csshop-item:hover {
  border-color: var(--iy-accent-line);
  box-shadow: var(--iy-shadow-sm);
}

/* 画像枠を固定。API 画像は縦横比がばらつくので contain で収める */
.keni-main .csshop-item img,
.keni-main .cc-card-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  background-color: var(--iy-surface-2);
  border-radius: var(--iy-r-input);
}

.keni-main .csshop-item-title,
.keni-main .csshop-item a {
  color: var(--iy-fg);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.65;
  text-decoration: none;
}

.keni-main .csshop-item-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.keni-main .csshop-item a:hover {
  color: var(--iy-accent);
  text-decoration: underline;
}

.keni-main .csshop-buy-button,
.keni-main .csshop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .6em 1.4em;
  background: var(--iy-accent);
  background-image: none;
  border: 0;
  border-radius: var(--iy-r-pill);
  box-shadow: none;
  color: var(--iy-on-accent); /* accent 上で 5.17:1 (WCAG AA) */
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s var(--iy-ease), transform .1s var(--iy-ease);
}

.keni-main .csshop-buy-button:hover,
.keni-main .csshop-btn:hover {
  background-color: var(--iy-accent-hover);
  color: var(--iy-on-accent);
}

.keni-main .csshop-buy-button:active,
.keni-main .csshop-btn:active {
  transform: scale(.98);
}

/* 検索フォーム: 既定のグレー系グラデーションをブランドの面に置き換える */
.keni-main .csshop-search-form {
  padding: var(--iy-space-5);
  background: var(--iy-surface-2);
  background-image: none;
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r);
  box-shadow: none;
}

.keni-main .csshop-search-form input[type="text"],
.keni-main .csshop-search-form select {
  padding: .65em .9em;
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r-input);
  background-color: var(--iy-surface);
  box-shadow: none;
  color: var(--iy-fg);
  font-family: inherit;
  font-size: 1.6rem;
}

.keni-main .csshop-search-form ::placeholder {
  color: var(--iy-fg-subtle);
  opacity: 1;
}

.keni-main .csshop-search-form input[type="text"]:focus,
.keni-main .csshop-search-form select:focus {
  border-color: var(--iy-accent);
  outline: 2px solid var(--iy-accent);
  outline-offset: 1px;
  box-shadow: none;
}

.keni-main .csshop-page-navi a.page,
.keni-main .csshop-page-navi span.current {
  min-width: 4rem;
  padding: .5em .8em;
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r-input);
  color: var(--iy-fg-muted);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.keni-main .csshop-page-navi span.current {
  background-color: var(--iy-accent);
  border-color: var(--iy-accent);
  color: var(--iy-on-accent);
}

.keni-main .csshop-service-credits img {
  opacity: .75;
}

/* ==========================================================================
   8. サイドバー
   ========================================================================== */

.keni-sub .keni-section_wrap {
  margin-bottom: var(--iy-space-5);
  padding: 0;
  overflow: hidden;
  background-color: var(--iy-surface);
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r);
  box-shadow: none;
}

/* 従来は #333 のベタ塗り帯。面はカードに任せて見出しは字で立てる。
   親テーマの .sub-section_title（詳細度 0,2,0）に勝つため同じ形で指定する。 */
/* 親テーマは .keni-section の内側余白を打ち消すため
     .keni-section .sub-section_title        { margin: 0 -20px 16px }   (0,2,0)
     .keni-sub .widget > .keni-section .sub-section_title { margin-top: -20px } (0,4,0)
   を当てている。こちらは .keni-section の余白を 0 にしたので負マージンは害になり、
   見出しがカードの外へはみ出して上端で切れていた。詳細度 (0,4,0) で打ち消す。 */
.keni-sub .keni-section_wrap > .keni-section > .sub-section_title,
.keni-sub .widget > .keni-section .sub-section_title,
.keni-sub .keni-section_wrap > .keni-section > h3,
.keni-sub .keni-section_wrap > h2 {
  margin: 0;
  padding: var(--iy-space-4) var(--iy-space-5);
  border: 0;
  border-bottom: 1px solid var(--iy-border);
  border-radius: 0;
  background: var(--iy-surface-2);
  color: var(--iy-fg);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--iy-track-heading);
}

/* 見出しは器の縁まで伸ばしたいので .keni-section 自体には余白を持たせず、
   見出し以外の直下要素にだけ内側の余白を配る。 */
.keni-sub .keni-section {
  padding: 0;
  background: none;
  border: 0;
}

.keni-sub .keni-section > *:not(.sub-section_title):not(h2):not(h3) {
  margin: 0;
  padding: var(--iy-space-4) var(--iy-space-5);
}

.keni-sub ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.keni-sub li {
  margin: 0;
  border-bottom: 1px solid var(--iy-border-soft);
}

.keni-sub li:last-child {
  border-bottom: 0;
}

.keni-sub li a {
  display: block;
  padding: var(--iy-space-3) 0;
  color: var(--iy-fg-muted);
  font-size: 1.5rem;
  line-height: 1.7;
  text-decoration: none;
  transition: color .2s var(--iy-ease);
}

.keni-sub li a:hover {
  color: var(--iy-accent);
}

/* ==========================================================================
   9. パンくず
   ========================================================================== */

.keni-breadcrumb-list_wrap {
  padding-block: var(--iy-space-4);
  background-color: var(--iy-bg);
  border-top: 1px solid var(--iy-border);
}

.keni-breadcrumb-list_wrap ol,
.keni-breadcrumb-list_wrap ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iy-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.keni-breadcrumb-list_wrap li {
  color: var(--iy-fg-subtle);
  font-size: 1.3rem;
  line-height: 1.6;
}

.keni-breadcrumb-list_wrap a {
  color: var(--iy-fg-muted);
  text-decoration: none;
}

.keni-breadcrumb-list_wrap a:hover {
  color: var(--iy-accent);
  text-decoration: underline;
}

/* ==========================================================================
   10. フッター
   ========================================================================== */

.keni-footer_wrap {
  margin-top: var(--iy-space-8);
  background-color: var(--iy-surface);
  border-top: 1px solid var(--iy-border);
  color: var(--iy-fg-muted);
}

.keni-footer_wrap .keni-footer,
.keni-footer_wrap .keni-footer_inner {
  width: auto;
  padding: 0;
  background: none;
}

.keni-footer_wrap .keni-footer_inner {
  padding-block: var(--iy-space-7);
}

.keni-footer-cont_wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--iy-space-6);
}

.keni-footer_wrap h2,
.keni-footer_wrap h3 {
  margin: 0 0 var(--iy-space-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--iy-fg);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
}

.keni-footer_wrap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.keni-footer_wrap li a,
.footer-menu a {
  color: var(--iy-fg-muted);
  font-size: 1.4rem;
  line-height: 2;
  text-decoration: none;
}

.keni-footer_wrap li a:hover,
.footer-menu a:hover {
  color: var(--iy-accent);
  text-decoration: underline;
}

.footer-menu {
  padding-block: var(--iy-space-4);
  border-top: 1px solid var(--iy-border);
  background: none;
}

.footer-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--iy-space-2) var(--iy-space-5);
  max-width: var(--iy-wrap);
  margin-inline: auto;
  padding-inline: var(--iy-space-5);
  list-style: none;
}

.keni-copyright_wrap {
  padding-block: var(--iy-space-5);
  border-top: 1px solid var(--iy-border);
  background: none;
  text-align: center;
}

.keni-copyright small {
  color: var(--iy-fg-subtle);
  font-size: 1.3rem;
}

/* ==========================================================================
   11. ページネーション / ページトップ
   ========================================================================== */

/* 実際のマークアップは nav.page-nav > ol > li（現在地の li は a を持たない）。
   親テーマの現在地は旧ティール #05A5AB に白抜きで 3.01:1 しかなく AA 未達だった。 */
.keni-main .page-nav ol,
.keni-main .keni-pagenation,
.keni-main .pagenation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--iy-space-2);
  margin: var(--iy-space-7) 0 0;
  padding: 0;
  list-style: none;
}

.keni-main .page-nav ol > li {
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.keni-main .page-nav ol > li > a,
.keni-main .page-nav ol > li.current,
.keni-main .keni-pagenation a,
.keni-main .keni-pagenation span,
.keni-main .pagenation a,
.keni-main .pagenation span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .75em;
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r-input);
  background-color: var(--iy-surface);
  color: var(--iy-fg-muted);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color .2s var(--iy-ease), color .2s var(--iy-ease);
}

.keni-main .page-nav ol > li > a:hover,
.keni-main .keni-pagenation a:hover,
.keni-main .pagenation a:hover {
  border-color: var(--iy-accent);
  color: var(--iy-accent);
}

.keni-main .page-nav ol > li.current,
.keni-main .keni-pagenation .current,
.keni-main .pagenation .current {
  background-color: var(--iy-accent); /* 白抜きで 5.17:1 (WCAG AA) */
  border-color: var(--iy-accent);
  color: var(--iy-on-accent);
}

.page-top a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r-pill);
  background-color: var(--iy-surface);
  box-shadow: var(--iy-shadow);
  color: var(--iy-accent);
  transition: border-color .2s var(--iy-ease), transform .2s var(--iy-ease);
}

.page-top a:hover {
  border-color: var(--iy-accent);
  transform: translateY(-2px);
}

/* ==========================================================================
   12. 検索フォーム (ヘッダー / ウィジェット)
   ========================================================================== */

.keni-main .searchform input[type="text"],
.keni-sub .searchform input[type="text"],
.keni-main .search-field,
.keni-sub .search-field {
  width: 100%;
  padding: .6em .9em;
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r-input);
  background-color: var(--iy-surface);
  color: var(--iy-fg);
  font-family: inherit;
  font-size: 1.6rem;
}

.keni-main .searchform ::placeholder,
.keni-sub .searchform ::placeholder {
  color: var(--iy-fg-subtle);
  opacity: 1;
}

/* ==========================================================================
   12b. 親テーマのハードコード色の残り
   ダークモードの実測（全要素のコントラスト走査）で拾った漏れを潰す。
   トークン経由にしておけばライトとダークの両方で正しくなる。
   ========================================================================== */

/* 黒直書きのリンク: パンくず / フッターメニュー / 投稿ナビ / SP メニューアイコン。
   ダークでは背景に沈んで読めなくなっていた（コントラスト比 1.16〜1.27）。 */
.keni-breadcrumb-list_wrap .keni-breadcrumb-list_inner li a,
.keni-breadcrumb-list_wrap .keni-breadcrumb-list_inner li a span,
.footer-menu .menu li a,
.keni-footer_wrap .menu li a {
  color: var(--iy-fg-muted);
}

.keni-breadcrumb-list_wrap .keni-breadcrumb-list_inner li a:hover,
.footer-menu .menu li a:hover,
.keni-footer_wrap .menu li a:hover {
  color: var(--iy-accent);
}

.keni-gnav_wrap .keni-gnav_btn .keni-gnav_btn_icon-open,
.keni-gnav_wrap .keni-gnav_btn .keni-gnav_btn_icon-close {
  color: var(--iy-fg);
}

/* グローバルメニューの ul 自身が #fff 直書きだった */
.keni-gnav_wrap .keni-gnav_cont,
.keni-gnav_wrap .keni-gnav_cont > li {
  background-color: transparent;
}

/* 投稿ナビゲーション（前後の記事） */
.keni-main .post-navigation .nav-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--iy-space-3);
  margin-top: var(--iy-space-6);
}

.keni-main .post-navigation .nav-links > div {
  margin: 0;
  padding: var(--iy-space-4);
  border: 1px solid var(--iy-border);
  border-radius: var(--iy-r);
  background-color: var(--iy-surface);
}

.keni-main .post-navigation .nav-links a {
  color: var(--iy-fg);
  font-size: 1.5rem;
  line-height: 1.6;
  text-decoration: none;
}

.keni-main .post-navigation .nav-links a:hover {
  color: var(--iy-accent);
  text-decoration: underline;
}

/* 必須マーク。親テーマ既定は白抜き赤でコントラスト比 3.97:1（AA 未達）だった */
.keni-main .comment-form .required,
.keni-main label .required {
  padding: .1em .6em;
  border-radius: var(--iy-r-pill);
  background-color: var(--iy-danger);
  color: var(--iy-on-danger);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
}

/* タグチップは li ではなく中の a を面にしている。li の地色は消す */
.keni-main .post-tag li,
.keni-main .post-tag ul {
  background-color: transparent;
}

/* コメントフォームの各行が薄いグレーの帯で塗られており、
   ダークでは白い帯として浮いていた。面はページ側に任せる。 */
.keni-main .comment-form_item_title,
.keni-main .comment-form_item_input,
.keni-main .comment-form_item_textarea,
.keni-main .comment-form-comment {
  padding-inline: 0;
  background-color: transparent;
  border-color: var(--iy-border);
}

/* ==========================================================================
   13. ダークモード: 親テーマとプラグインのハードコード色を潰す
   トークンで届かない箇所だけを名指しで上書きする。
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .keni-container,
  .keni-header_wrap,
  .keni-gnav_wrap,
  .keni-main_wrap,
  .keni-footer_wrap,
  .keni-footer-panel_wrap,
  .keni-breadcrumb-list_wrap {
    background-color: var(--iy-bg);
  }

  .keni-header_wrap,
  .keni-gnav_wrap,
  .keni-footer_wrap {
    background-color: var(--iy-surface);
  }

  .keni-main .keni-section,
  .keni-main .keni-section_wrap,
  .keni-sub .keni-section,
  .keni-main .article-body,
  .keni-main .entry,
  .keni-main .entry_inner {
    color: var(--iy-fg);
  }

  /* 賢威8 の #333 / #fff 直書きを無効化 */
  .keni-sub h3,
  .keni-sub .keni-section_wrap > h2,
  .keni-main .keni-section > h2,
  .keni-main .article-body h2,
  .keni-main .article-body h3 {
    background-color: var(--iy-surface-2);
    color: var(--iy-fg);
  }

  .keni-main .article-body h2 {
    background-color: transparent;
  }

  .keni-main .csshop-search-form,
  .keni-main .csshop-item {
    background-color: var(--iy-surface);
    background-image: none;
    color: var(--iy-fg);
  }

  /* 白背景前提で作られた透過 GIF / ロゴを暗背景でも読めるようにする */
  .keni-main .csshop-service-credits img,
  .keni-footer_wrap img[src*="credit"] {
    background-color: var(--iy-slate-0);
    border-radius: var(--iy-r-input);
    padding: 2px 4px;
  }

  /* 埋め込みの iframe は暗転させない */
  .keni-main .article-body iframe {
    background-color: var(--iy-slate-0);
    border-radius: var(--iy-r);
  }
}

/* ==========================================================================
   14. 印刷以外で不要な装飾の抑制
   ========================================================================== */

/* 親テーマのカード影を全体的に外す。面の分離は境界線で行う */
.keni-main .keni-section_wrap_style01,
.keni-main .keni-section_wrap_style02,
.keni-main .keni-section_wrap_style03 {
  box-shadow: none;
  border: 0;
  background: none;
}