/* 右のサイド（2026-10-02 エンジョイ東京型）
   jstork19_custom/assets/kami-et-side.css … kami/et-parts.php の kai_ets_side() が出すサイドの見た目。
   et-parts.php が wp_head 10003 で、apply_filters( 'kai_ets_side_on', kai_ets_on() ) が true のページだけ読む
   （記事は関門 KAI_ETS_PUBLIC・?ets=1。一覧・検索・固定・404 はチャット③がフィルタで足す）
   ・中身は今のサイドバー kai_sidebar() と同じ記事・同じリンク・同じ順（よく読まれている記事5・早見表・新着5・広告4枠・カテゴリ14）。
     見出しは今と同じく h2 にしない（ページの見出しの並びを変えない）
   ・PC（1000px以上）は幅 300px の列の中の形。999px 以下は本文の後ろに流れる幅広の形（見本の下の章）、767.9px 以下はスマホの形
   ・セレクタの頭は .k-ain .ets-side（body の class に頼らない）。案2の kami-zk.css（body.zkd …）より強くするため .ets-side を必ず挟む
   ・判子は kami-zk.js が [data-zk2] に zk2-go を付けたときに押す。PC の最初の画面にあるときは CSS の時間差で上から押す
   ・2列の枠（本文とサイドの並び）はページの側の CSS が持つ（記事は kami-et-single.css の .ets-main） */

.k-ain .ets-side{--ets-ink:#101820;--ets-pale:#F2F6FC;min-width:0}

/* ── 1 PC：今のサイドバーの中身を見本のトンマナで。黒い帯の見出しはやめて、硬券の札＋太字。章の間は余白で区切る */
.k-ain .ets-side > * + *{margin-top:48px}
.k-ain .ets-side .ets-sb__h{display:flex;align-items:center;gap:11px;margin:0 0 18px;font-size:19px;line-height:1.4;font-weight:800;letter-spacing:.02em;color:var(--ets-ink)}
.k-ain .ets-side .ets-sb__h .zk2-ht{width:46px;height:30px;--zk2-px:32px;--zk2-is:17px;--zk2-ix:7.5px;--zk2-cx:20px;--zk2-cw:9px;--zk2-ch:7px;--zk2-nr:4.6px}

/* よく読まれている記事：見本のランキング（写真の左上に順位の札）。札は判子＝1位は朱の丸判子・2〜5位は青インクの丸い印。
   PC のサイドは 1位を大きい写真、2〜5位を写真が左の横並びに */
.k-ain .ets-side .ets-rank__l{display:flex;flex-direction:column;gap:20px;margin:0;padding:0;list-style:none}
.k-ain .ets-side .ets-rank__i{margin:0;padding:0;list-style:none}
.k-ain .ets-side .ets-rank__i::before,.k-ain .ets-side .ets-rank__i::marker{content:none}
.k-ain .ets-side .ets-rank__a{position:relative;display:grid;grid-template-columns:116px minmax(0,1fr);gap:14px;align-items:start;color:var(--ets-ink);text-decoration:none}
.k-ain .ets-side .ets-rank__i:first-child .ets-rank__a{grid-template-columns:minmax(0,1fr);gap:12px}
.k-ain .ets-side .ets-rank__img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#e9eef5;border-radius:4px;
 -webkit-mask:radial-gradient(circle 6px at 0 100%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 6px at 100% 100%,#0000 94%,#000) 100% 0/51% 100% no-repeat;
 mask:radial-gradient(circle 6px at 0 100%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 6px at 100% 100%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
.k-ain .ets-side .ets-rank__img img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.k-ain .ets-side .ets-rank__a:hover .ets-rank__img img{opacity:.75}
.k-ain .ets-side .ets-rank__no{position:absolute;left:-7px;top:-9px;z-index:2;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff;
 color:var(--zk2-ink,#23519f);font-family:var(--zk2-digit);font-size:16px;font-weight:600;transform:rotate(-8deg);
 box-shadow:inset 0 0 0 2px var(--zk2-ink,#23519f),inset 0 0 0 4px #fff,inset 0 0 0 5px var(--zk2-ink,#23519f)}
.k-ain .ets-side .ets-rank__i:first-child .ets-rank__no{width:48px;height:48px;left:-10px;top:-13px;color:var(--zk2-shu,#cc3727);font-family:var(--zk2-stamp);font-size:23px;font-weight:700;transform:rotate(-10deg);
 box-shadow:inset 0 0 0 3px var(--zk2-shu,#cc3727),inset 0 0 0 5.5px #fff,inset 0 0 0 7px var(--zk2-shu,#cc3727)}
.k-ain .ets-side .ets-rank__txt{display:block;min-width:0}
.k-ain .ets-side .ets-rank__txt .ai-badge{display:inline-block;margin:0 0 6px}
.k-ain .ets-side .ets-rank__t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.55;font-weight:800}
.k-ain .ets-side .ets-rank__i:first-child .ets-rank__t{font-size:16px;line-height:1.6}
.k-ain .ets-side .ets-rank__a:hover .ets-rank__t{text-decoration:underline;text-underline-offset:3px}
@keyframes ets-thump{0%{opacity:0;transform:translateY(-22px) rotate(-30deg) scale(1.5)}55%{opacity:1;transform:translateY(0) rotate(-8deg) scale(.9)}75%{transform:rotate(-8deg) scale(1.06)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes ets-thump1{0%{opacity:0;transform:translateY(-26px) rotate(-34deg) scale(1.55)}55%{opacity:1;transform:translateY(0) rotate(-10deg) scale(.9)}75%{transform:rotate(-10deg) scale(1.06)}100%{opacity:1;transform:rotate(-10deg) scale(1)}}
html.zk-io .k-ain .ets-side .ets-rank:not(.zk2-go):not(.zk2-done) .ets-rank__no{opacity:0}
html.zk-m .k-ain .ets-side .ets-rank.zk2-go .ets-rank__no{animation:ets-thump .6s calc(var(--i,0) * 130ms + .15s) cubic-bezier(.2,.8,.3,1.1) both}
html.zk-m .k-ain .ets-side .ets-rank.zk2-go .ets-rank__i:first-child .ets-rank__no{animation-name:ets-thump1}

/* 持ち込み早見表の入口：PC のサイドでは今の縦長の入場券のまま（案2の kami-zk.css）。下の余白だけ章の間にそろえる */
.k-ain .ets-side > .ai-mochi{margin-bottom:0}

/* 新着記事：写真が左の横並び（写真は半券＝右の辺にミシン目と上下の切り欠き） */
.k-ain .ets-side .ets-fresh__l{display:flex;flex-direction:column;gap:18px;margin:0;padding:0;list-style:none}
.k-ain .ets-side .ets-fresh__i{margin:0;padding:0;list-style:none}
.k-ain .ets-side .ets-fresh__i::before,.k-ain .ets-side .ets-fresh__i::marker{content:none}
.k-ain .ets-side .ets-fresh__a{display:grid;grid-template-columns:116px minmax(0,1fr);gap:14px;align-items:start;color:var(--ets-ink);text-decoration:none}
.k-ain .ets-side .ets-fresh__img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#e9eef5;
 -webkit-mask:radial-gradient(circle 5px at 100% 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 5px at 100% 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat;
 mask:radial-gradient(circle 5px at 100% 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 5px at 100% 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat}
.k-ain .ets-side .ets-fresh__img::after{content:"";position:absolute;right:1px;top:6px;bottom:6px;width:3px;background:radial-gradient(circle 1.3px,rgba(255,255,255,.95) 90%,#0000) 0 0/3px 6px repeat-y;pointer-events:none}
.k-ain .ets-side .ets-fresh__img img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.k-ain .ets-side .ets-fresh__a:hover .ets-fresh__img img{opacity:.75}
.k-ain .ets-side .ets-fresh__txt{display:block;min-width:0}
.k-ain .ets-side .ets-fresh__txt .ai-meta{margin:0 0 5px}
.k-ain .ets-side .ets-fresh__t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.55;font-weight:800}
.k-ain .ets-side .ets-fresh__a:hover .ets-fresh__t{text-decoration:underline;text-underline-offset:3px}

/* 広告の枠：今のサイドバーのカスタムHTMLの4つ（中身はそのまま）。黒い帯をやめて薄い面の箱に */
.k-ain .ets-side .ets-ads{display:flex;flex-direction:column;gap:16px}
.k-ain .ets-side .ets-ad{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 14px;border-radius:10px;background:#F6F8FB}
.k-ain .ets-side .ets-ad__t{margin:0;font-size:13px;line-height:1.5;font-weight:800;text-align:center;color:var(--ets-ink)}
.k-ain .ets-side .ets-ad .ai-box__body{display:flex;justify-content:center;width:100%;padding:0;line-height:0}
.k-ain .ets-side .ets-ad .ai-box__body img{max-width:100%;height:auto;margin:0}

/* カテゴリから探す：薄い面に札（札は案2の小さな硬券のまま） */
.k-ain .ets-side .ets-cats{padding:24px 20px 26px;border-radius:12px;background:var(--ets-pale)}
.k-ain .ets-side .ets-cats .ets-sb__h{margin-bottom:16px}
.k-ain .ets-side .ets-cats .zk2-ht{--zk2-hbg:var(--ets-pale)}
.k-ain .ets-side .ets-cats .ai-tagwrap{display:flex;flex-wrap:wrap;gap:8px;padding:0}
.k-ain .ets-side .ets-cats .ai-tag{font-size:12.5px;padding-top:7px;padding-bottom:7px;background:#fff}


@media (min-width:1000px){
 html.zk-m .k-ain .ets-side > .ets-rank:first-child .ets-rank__no{animation:ets-thump .6s calc(var(--i,0) * 140ms + 1.2s) cubic-bezier(.2,.8,.3,1.1) both}
 html.zk-m .k-ain .ets-side > .ets-rank:first-child .ets-rank__i:first-child .ets-rank__no{animation-name:ets-thump1}
}

@media (max-width:999px){
 .k-ain .ets-side > * + *{margin-top:80px}
 .k-ain .ets-side .ets-sb__h{gap:14px;margin-bottom:24px;font-size:24px}
 .k-ain .ets-side .ets-sb__h .zk2-ht{width:56px;height:36px;--zk2-px:39px;--zk2-is:21px;--zk2-ix:9px;--zk2-cx:24px;--zk2-cw:11px;--zk2-ch:8px;--zk2-nr:5.5px}
 .k-ain .ets-side .ets-rank__l{display:grid;grid-template-columns:repeat(6,1fr);gap:32px 24px}
 .k-ain .ets-side .ets-rank__i{grid-column:span 2}
 .k-ain .ets-side .ets-rank__i:nth-child(n+4){grid-column:span 3}
 .k-ain .ets-side .ets-rank__a,.k-ain .ets-side .ets-rank__i:first-child .ets-rank__a{display:block}
 .k-ain .ets-side .ets-rank__img{-webkit-mask:radial-gradient(circle 8px at 0 100%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 100%,#0000 94%,#000) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(circle 8px at 0 100%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 100%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
 .k-ain .ets-side .ets-rank__no{width:40px;height:40px;left:-8px;top:-10px;font-size:19px}
 .k-ain .ets-side .ets-rank__i:first-child .ets-rank__no{width:50px;height:50px;left:-10px;top:-13px;font-size:24px}
 .k-ain .ets-side .ets-rank__txt{margin:12px 0 0}
 .k-ain .ets-side .ets-rank__t,.k-ain .ets-side .ets-rank__i:first-child .ets-rank__t{font-size:16px;line-height:1.6}
 .k-ain .ets-side .ets-mochi{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"en t b" "en d b";align-items:center;gap:6px 40px;padding:26px 30px;border-radius:8px;
  background:radial-gradient(circle 1.6px,#5d728c 90%,#0000) 160px 14px/4px 9px repeat-y,var(--ai-ink,#101820);
  -webkit-mask:radial-gradient(circle 9px at 162px 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 9px at 162px 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat;
  mask:radial-gradient(circle 9px at 162px 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 9px at 162px 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat}
 .k-ain .ets-side .ets-mochi .ai-mochi__en{grid-area:en;width:96px;margin:0;font-size:12px;letter-spacing:.14em}
 .k-ain .ets-side .ets-mochi .ai-mochi__t{grid-area:t;margin:0;font-size:22px;line-height:1.4}
 .k-ain .ets-side .ets-mochi .ai-mochi__t br{display:none}
 .k-ain .ets-side .ets-mochi .ai-mochi__d{grid-area:d;margin:0;font-size:13px;line-height:1.7}
 .k-ain .ets-side .ets-mochi .ai-mochi__b{grid-area:b;margin:0;padding-left:18px;padding-right:18px;white-space:nowrap}
 .k-ain .ets-side .ets-fresh__l{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px}
 .k-ain .ets-side .ets-fresh__a{grid-template-columns:150px minmax(0,1fr);gap:16px}
 .k-ain .ets-side .ets-fresh__t{-webkit-line-clamp:2;font-size:15px;line-height:1.6}
 .k-ain .ets-side .ets-ads{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
 .k-ain .ets-side .ets-cats{padding:36px 40px 44px}
 .k-ain .ets-side .ets-cats .ets-sb__h{justify-content:center;font-size:20px;margin-bottom:22px}
 .k-ain .ets-side .ets-cats .ai-tagwrap{justify-content:center;gap:10px}
 .k-ain .ets-side .ets-cats .ai-tag{font-size:13.5px}
}

@media (max-width:767.9px){
 .k-ain .ets-side > * + *{margin-top:60px}
 .k-ain .ets-side .ets-sb__h{font-size:20px;gap:11px;margin-bottom:20px}
 .k-ain .ets-side .ets-sb__h .zk2-ht{width:46px;height:30px;--zk2-px:32px;--zk2-is:17px;--zk2-ix:7.5px;--zk2-cx:20px;--zk2-cw:9px;--zk2-ch:7px;--zk2-nr:4.6px}
 .k-ain .ets-side .ets-rank__l{display:flex;flex-direction:column;gap:22px}
 .k-ain .ets-side .ets-rank__a,.k-ain .ets-side .ets-rank__i:first-child .ets-rank__a{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:start}
 .k-ain .ets-side .ets-rank__no{width:32px;height:32px;font-size:16px;left:-6px;top:-8px}
 .k-ain .ets-side .ets-rank__i:first-child .ets-rank__no{width:40px;height:40px;font-size:20px;left:-8px;top:-10px}
 .k-ain .ets-side .ets-rank__txt{margin:0}
 .k-ain .ets-side .ets-rank__t,.k-ain .ets-side .ets-rank__i:first-child .ets-rank__t{font-size:15px;line-height:1.55}
 .k-ain .ets-side .ets-mochi{grid-template-columns:1fr;grid-template-areas:"en" "t" "d" "b";gap:8px;padding:22px 20px;
  background:radial-gradient(circle 1.6px,#5d728c 90%,#0000) 14px 46px/9px 4px repeat-x,var(--ai-ink,#101820);
  -webkit-mask:radial-gradient(circle 8px at 0 48px,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 48px,#0000 94%,#000) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(circle 8px at 0 48px,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 48px,#0000 94%,#000) 100% 0/51% 100% no-repeat}
 .k-ain .ets-side .ets-mochi .ai-mochi__en{width:auto;margin-bottom:18px}
 .k-ain .ets-side .ets-mochi .ai-mochi__t{font-size:20px}
 .k-ain .ets-side .ets-mochi .ai-mochi__b{margin-top:8px}
 .k-ain .ets-side .ets-fresh__l{grid-template-columns:1fr;gap:18px}
 .k-ain .ets-side .ets-fresh__a{grid-template-columns:132px minmax(0,1fr);gap:14px}
 .k-ain .ets-side .ets-fresh__t{font-size:15px}
 .k-ain .ets-side .ets-ads{grid-template-columns:1fr;gap:16px}
 .k-ain .ets-side .ets-cats{margin-left:-20px;margin-right:-20px;padding:28px 20px 34px;border-radius:0}
}