/* エンジョイ東京型の一覧・検索・固定ページ・404（2026-10-02）
   jstork19_custom/assets/kami-et-list.css … kami/etl-parts.php が関門の開いたページ（body.etl）でだけ読む。全部 body.etl の下
   見本 https://www.enjoytokyo.jp/article/list/cat01/・/news/list/・/policy/・404 を PC1440・SP390 で実測した型に、
   今のトンマナ（青 #2b66cc・7色のカテゴリ・案2「きっぷとスタンプ」の券の形と判子）を当てたもの。
   ・器：本文の列＋右のサイド（PC だけ・300px・間40px）。999px 以下は1列でサイドは本文の後ろ。サイドの見た目は記事のチャットの kami-et-side.css
   ・一覧：題の頭に硬券の札・件数のパタパタの板。記事一覧は白いカード2列（スマホは写真が左の横並び）、ニュースだけ横長の行
   ・固定ページ：本文の列の頭を券面に。本文の見出し・目次・表は記事（kami-et-single.css）と同じ値
   ・404：真ん中の箱に改札機（切符が戻されて扉が閉まる）・題・文・券のボタン・404の消印
   ・動き：見本と同じく、ブロックが画面に入ったら 0.8 秒で浮かび出る（opacity だけ）。最初の画面にあるもの・広告は隠さない
   ・見本から変えた所：英字の見出しの札を外す／1px の線は使わず面と余白で区切る／写真は 16:9 を切らない／カードの題は 15px（見本 12px）
   ・本文（the_content）とフォームの中は CSS だけ。文字・欄・隠しの欄には触らない */

body.etl{--etl-blue:var(--zk2-blue,#2b66cc);--etl-pale:#F2F6FC;--etl-pale2:#E6EEFA;--etl-ink:#101820;--etl-text:#16232D;--etl-muted:#5C7080;--etl-side:300px;--etl-shu:var(--zk2-shu,#cc3727)}

/* ── 1 器：記事と同じ数字（本文の列＋間40px＋サイド300px） */
body.etl .etl-wrap{max-width:var(--ai-wrap,1200px)}
body.etl .etl-wrap > .ai-crumb{padding:16px 0 0}
body.etl .etl-main{display:grid;grid-template-columns:minmax(0,1fr) var(--etl-side);column-gap:40px;align-items:start;padding:14px 0 72px}
body.etl .etl-col,body.etl .etl-main > .ai-aside{min-width:0}
body.etl .etl-main--full{grid-template-columns:minmax(0,1fr)}

/* ── 2 一覧の頭：見本の「「グルメ」の記事一覧」の型（左寄せの太字の題・下に小さな字の行）。左の印は案2の硬券の札 */
body.etl .etl-head{position:relative;margin:24px 0 0;padding:0}
body.etl .etl-head__row{display:flex;align-items:center;gap:16px}
body.etl .etl-head__row > .zk2-ht{flex:0 0 auto;width:56px;height:36px;--zk2-hbg:var(--cp,var(--etl-pale));--zk2-px:39px;--zk2-is:21px;--zk2-ix:9px;--zk2-cx:24px;--zk2-cw:11px;--zk2-ch:8px;--zk2-nr:5.5px}
body.etl .etl-head__t{margin:0;padding:0;background:none;border:0;font-size:28px;line-height:1.5;font-weight:800;letter-spacing:.02em;color:var(--etl-ink)}
body.etl .etl-head__t::before,body.etl .etl-head__t::after{content:none;display:none}
body.etl .etl-head__d{margin:14px 0 0;font-size:14px;line-height:1.85;color:var(--etl-muted);max-width:70ch}
body.etl .etl-head__d p{margin:0}
body.etl .etl-head__meta{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--etl-muted)}
body.etl .etl-head__count{display:inline-flex;align-items:center;gap:6px}
body.etl .etl-head__count > b{font-size:16px;font-weight:800;color:var(--etl-ink)}
body.zkd.etl .etl-head__count > b{display:inline-flex;align-items:center;font-size:0;line-height:1}
body.zkd.etl .etl-head__count .zk2-flap--n{font-size:21px}
body.etl .etl-head__upd{display:inline-block;padding:0 7px;border-radius:2px;background:#edf3fb;color:#2a4f8f;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;letter-spacing:.03em;line-height:1.75}
body.etl .etl-head .ai-subcats{margin:14px 0 0}

/* ── 3 記事一覧のカード：見本の2列のカード（白・角5px・ふんわり影・中の余白16px）。線は引かない。
   写真は 16:9 のまま（案2の切り欠きとミシン目・青インクの消印はそのまま）。題は太字3行・抜粋2行・札と日付は下にそろえる */
body.etl .etl-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:36px 0 0}
body.etl .etl-card{position:relative;display:flex;flex-direction:column;margin:0;padding:16px;border-radius:5px;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.2)}
body.etl .etl-card .ai-card__media{border-radius:2px}
body.etl .etl-card .ai-card__media img{transition:opacity .3s}
body.etl .etl-card:hover .ai-card__media img{transform:none;opacity:.75}
body.etl .etl-card .ai-card__body{display:flex;flex-direction:column;flex:1;padding:14px 0 0}
body.etl .etl-card .ai-card__title{margin:0;font-size:15px;line-height:1.6;font-weight:800;color:var(--etl-ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.etl .etl-card .ai-card__title a{color:inherit;text-decoration:none}
body.etl .etl-card:hover .ai-card__title{color:var(--etl-ink)}
body.etl .etl-card:hover .ai-card__title a{text-decoration:underline;text-underline-offset:3px}
body.etl .etl-card .ai-card__ex{margin:8px 0 0;font-size:13px;line-height:1.7;color:var(--etl-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.etl .etl-card .ai-meta{margin-top:auto;padding-top:14px}
/* 消印は写真の右下の角に（案2の位置を中の余白16pxのぶんずらす） */
body.zkd.etl .etl-card > .zk2-pm{right:6px;top:16px;margin-top:calc((100% - 32px) * .5625 - 40px)}

/* ── 4 ニュースの一覧：見本の横長の行（写真が左・題 → 抜粋 → 札と日付）。行の間は線でなく余白 */
body.etl .etl-rows{display:flex;flex-direction:column;gap:6px;margin:36px 0 0}
body.etl .etl-rows .ai-row{grid-template-columns:150px minmax(0,1fr);gap:20px;padding:16px 0;border:0}
body.etl .etl-rows .ai-row:first-child{padding-top:0}
body.etl .etl-rows .ai-row > div{display:flex;flex-direction:column;min-width:0}
body.etl .etl-rows .ai-row__title{order:1;margin:0;font-size:16px;line-height:1.6;font-weight:800;color:var(--etl-ink)}
body.etl .etl-rows .ai-row__title a{color:inherit;text-decoration:none}
body.etl .etl-rows .ai-row:hover .ai-row__title{color:var(--etl-ink)}
body.etl .etl-rows .ai-row:hover .ai-row__title a{text-decoration:underline;text-underline-offset:3px}
body.etl .etl-rows .ai-row__ex{order:2;margin:6px 0 0;font-size:13px;line-height:1.7}
body.etl .etl-rows .ai-row .ai-meta{order:3;margin:10px 0 0}
body.etl .etl-rows .ai-row__media img{transition:opacity .3s}
body.etl .etl-rows .ai-row:hover .ai-row__media img{transform:none;opacity:.75}
body.zkd.etl .etl-rows .ai-row > .zk2-pm{left:102px;top:-6px;width:54px;height:54px}
body.zkd.etl .etl-rows .ai-row:first-child > .zk2-pm{top:-18px}

/* ── 5 ページ送り：見本の大きさと真ん中寄せ（触ると薄く）。形は案2の小さな硬券のまま。下に「全N件中 1〜10件」 */
body.etl .etl-pager{margin:44px 0 0;gap:8px}
body.etl .etl-pager .page-numbers{min-width:40px;height:40px;padding:0 12px;font-size:14px;font-weight:600;border-radius:5px;transition:opacity .2s}
body.etl .etl-pager a.page-numbers:hover{opacity:.7}
body.etl .etl-sum{margin:14px 0 0;text-align:center;font-size:14px;line-height:1.6;font-weight:600;color:rgba(22,35,45,.7)}
body.etl .etl-empty{margin:36px 0 0;padding:48px 24px;border:0;border-radius:10px;background:var(--etl-pale);text-align:center;font-size:15px;line-height:1.8;color:var(--etl-text)}

/* ── 6 章の見出し（404 の新しく書いた記事）：記事の章の見出しと同じ値（左の印は案2の硬券の札） */
body.etl .etl-col > .ai-sec{margin:64px 0 0}
body.etl .etl-col .ai-sec__head{margin:0 0 4px;padding:0;border:0}
body.etl .etl-col .ai-sec__title{gap:14px;margin:0;font-size:24px;line-height:1.4;font-weight:800;color:var(--etl-ink)}
body.etl .etl-col .ai-sec__en{display:none}
body.etl .etl-col > .ai-sec .etl-cards{margin-top:20px}

/* ── 7 固定ページ：本文の列の頭を券面に（発行元の小さな字・題・更新日・右の半券に青インクの日付印）。
   券の切り欠きとミシン目は右の半券の境目。開くと上の辺に入鋏の切れ込みが入る（案2の zk2-cut）*/
body.etl .etl-art{margin:0}
body.etl .etl-art > .ai-single__head{position:relative;margin:24px 0 0;padding:30px 168px 28px 34px;border:0;border-radius:10px;
 background:radial-gradient(circle 1.6px,#a9bddb 90%,#0000) calc(100% - 131px) 12px/3px 8px repeat-y,linear-gradient(90deg,var(--etl-pale) calc(100% - 130px),#E9F0FA calc(100% - 130px));
 -webkit-mask:radial-gradient(circle 10px at calc(100% - 130px) 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 10px at calc(100% - 130px) 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat;
 mask:radial-gradient(circle 10px at calc(100% - 130px) 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 10px at calc(100% - 130px) 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat}
body.etl .etl-art > .ai-single__head::before{content:"";position:absolute;left:34px;top:0;width:12px;height:9px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;pointer-events:none}
html.zk-m body.etl .etl-art > .ai-single__head::before{animation:zk2-cut .34s .45s cubic-bezier(.3,1.7,.6,1) both}
body.etl .etl-issuer{display:block;margin:0 0 6px;font-size:12px;line-height:1.5;font-weight:800;letter-spacing:.24em;color:var(--etl-blue)}
body.etl .etl-art .ai-single__title{margin:0;font-size:28px;line-height:1.5;font-weight:800;letter-spacing:.02em;color:var(--etl-ink)}
body.etl .etl-art .ai-single__info{margin:12px 0 0}
body.zkd.etl .etl-art > .ai-single__head > .zk2-dst{right:22px;top:50%;bottom:auto;width:88px;height:88px;margin-top:-44px}

/* 本文：記事（kami-et-single.css）と同じ値 */
body.etl .etl-art .ai-body{margin-top:36px;font-size:16px;line-height:2;color:var(--etl-text)}
body.etl .etl-art .ai-body > p{line-height:2}
body.etl #rtoc-mokuji-wrapper.rtoc-mokuji-content{margin:44px 0 !important;padding:32px 36px 30px !important;background:var(--etl-pale) !important;border-radius:10px !important;box-shadow:none !important;
 -webkit-mask:radial-gradient(circle 8px at 0 84px,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 84px,#0000 94%,#000) 100% 0/51% 100% no-repeat;
 mask:radial-gradient(circle 8px at 0 84px,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 84px,#0000 94%,#000) 100% 0/51% 100% no-repeat;
 transition:max-height .3s ease}
body.etl #rtoc-mokuji-wrapper #rtoc-mokuji-title{position:relative;display:flex;justify-content:center;align-items:center;padding:0 0 22px !important;margin:0 0 26px !important;background:none !important}
body.etl #rtoc-mokuji-wrapper #rtoc-mokuji-title > span{display:inline-flex;align-items:center;padding:0 6px 12px 50px;border-bottom:2px solid var(--etl-blue);font-size:20px;line-height:34px;font-weight:800;letter-spacing:.08em;color:var(--etl-ink)}
body.etl #rtoc-mokuji-wrapper #rtoc-mokuji-title > span::before{top:0;margin-top:2px;width:40px;height:26px;background-size:15px 15px,3px 6px,auto,auto;background-position:6px 50%,27px 2px,0 0,0 0}
body.etl #rtoc-mokuji-wrapper #rtoc-mokuji-title > span::after{left:16px;top:-1px}
body.etl #rtoc-mokuji-wrapper #rtoc-mokuji-title::after{content:"";position:absolute;left:50%;top:44px;width:0;height:0;margin-left:-6px;border:6px solid transparent;border-top:8px solid var(--etl-blue);pointer-events:none}
body.etl #rtoc-mokuji-wrapper .rtoc_open_close{display:none !important}
body.etl #rtoc-mokuji-wrapper .level-1 > li.rtoc-item{padding:7px 0 7px 48px !important}
body.etl #rtoc-mokuji-wrapper .level-1 > li.rtoc-item::before{top:7px}
body.etl #rtoc-mokuji-wrapper .level-1 > li.rtoc-item > a{font-size:15px !important;font-weight:600 !important;line-height:1.7 !important;color:#26333d !important}
body.etl #rtoc-mokuji-wrapper .level-2 > li.rtoc-item > a{font-size:13.5px !important;color:var(--etl-muted) !important}
body.etl #rtoc-mokuji-wrapper .level-2 > li.rtoc-item::before{background:#9fb6d8}
body.etl #rtoc-mokuji-wrapper a:hover{text-decoration:underline;text-underline-offset:3px}
body.etl #rtoc-mokuji-wrapper.etl-toc--fold{position:relative;overflow:hidden;max-height:440px;padding-bottom:84px !important}
body.etl #rtoc-mokuji-wrapper.etl-toc--fold.is-open{max-height:none}
body.etl .etl-toc-fade{position:absolute;left:0;right:0;bottom:62px;height:150px;background:linear-gradient(rgba(242,246,252,0),var(--etl-pale) 70%);pointer-events:none}
body.etl .is-open > .etl-toc-fade{display:none}
body.etl .etl-toc-btn{position:absolute;left:36px;right:36px;bottom:0;height:62px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
 background:radial-gradient(circle 1.6px,#9fb6d8 90%,#0000) 0 0/9px 4px repeat-x,var(--etl-pale);color:var(--etl-blue);font:700 13px/1 var(--ai-jp);letter-spacing:.08em}
body.etl .etl-toc-btn::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
body.etl .is-open > .etl-toc-btn::after{transform:translateY(2px) rotate(-135deg)}
body.etl .etl-toc-btn:focus-visible{outline:2px solid var(--etl-blue);outline-offset:-4px}
body.etl .etl-art .ai-body > h2{position:relative;margin:72px 0 28px;padding:2px 0 2px 30px;background:none;border:0;border-radius:0;box-shadow:none;-webkit-mask:none;mask:none;
 font-size:24px;line-height:1.55;font-weight:800;letter-spacing:.01em;color:var(--etl-ink)}
body.etl .etl-art .ai-body > h2::before{content:"";display:block;position:absolute;left:0;top:.18em;bottom:.18em;width:12px;height:auto;margin:0;border-radius:2px;
 background:radial-gradient(circle 1.4px,rgba(255,255,255,.95) 90%,#0000) 50% 3px/3px 6px repeat-y,var(--etl-blue);-webkit-mask:none;mask:none}
body.etl .etl-art .ai-body > h2::after{left:0;top:calc(.18em - 1px);width:12px;height:6px;background:#fff}
body.etl .etl-art .ai-body > h2 > .zk2-h2chip{left:0;top:calc(.18em - 1px);width:12px;height:6px;background:var(--etl-blue)}
body.etl .etl-art .ai-body > h2:first-child{margin-top:0}
body.etl .etl-art .ai-body > h3{position:relative;margin:44px 0 14px;padding:0;background:none;border:0;border-radius:0;font-size:20px;line-height:1.6;font-weight:800;color:var(--etl-blue)}
body.etl .etl-art .ai-body > h3::before,body.etl .etl-art .ai-body > h3::after{content:none;display:none}
body.etl .etl-art .ai-body li::marker{color:var(--etl-blue)}
body.etl .etl-art .ai-body figure{margin:32px 0}
body.etl .etl-art .ai-body table{width:100%;border:0 !important;border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden;background:#fff}
body.etl .etl-art .ai-body th,body.etl .etl-art .ai-body td{border:0 !important;padding:14px 16px;vertical-align:top}
body.etl .etl-art .ai-body th,body.etl .etl-art .ai-body thead td{background:var(--etl-pale2) !important;color:var(--etl-ink);font-weight:700}
body.etl .etl-art .ai-body tbody tr:nth-child(even) td{background:#F6F8FB}
body.etl .etl-art .ai-body tbody tr:nth-child(odd) td{background:#fff}
body.etl .etl-art .ai-body tbody td:first-child{width:34%;background:var(--etl-pale2) !important;color:var(--etl-ink);font-weight:700}
/* 固定ページの表（運営者情報など）：案2の券の飾り（左の青い半券と細い枠）を外して、見本の情報の表と同じ面だけにする */
body.etl .etl-art .ai-body > figure.wp-block-table{margin:32px 0;padding:0;border:0;border-radius:8px;background:none;box-shadow:none;-webkit-mask:none;mask:none;overflow:hidden}
body.etl .etl-art .ai-body > figure.wp-block-table::before,body.etl .etl-art .ai-body > figure.wp-block-table::after{content:none;display:none}
body.etl .etl-art .ai-body blockquote{border:0 !important;border-radius:10px;background:#F4F6F9;padding:22px 26px}
body.etl .etl-art .ai-body blockquote::before,body.etl .etl-art .ai-body blockquote::after{content:none !important;display:none !important}

/* お問い合わせ：欄は線でなく薄い面（角6px・高さ48px）。選ぶと白地に青の2pxの縁。送信は案2の券のボタン（240px の幅）。
   フォームの欄・隠しの欄・迷惑メール対策には触らない（見た目だけ） */
body.etl .etl-art .wpcf7-form > p{margin:0 0 24px}
body.etl .etl-art .wpcf7-form label{display:block;font-size:14px;line-height:1.7;font-weight:700;color:var(--etl-ink)}
body.etl .etl-art .wpcf7-form .wpcf7-form-control-wrap{display:block;margin-top:8px}
body.etl .etl-art .wpcf7-form :is(input[type=text],input[type=email],input[type=tel],input[type=url],textarea){display:block;width:100%;max-width:100%;min-height:48px;margin:0;padding:12px 14px;
 border:0;border-radius:6px;background:var(--etl-pale);box-shadow:inset 0 0 0 2px transparent;font:inherit;font-size:16px;font-weight:400;line-height:1.6;color:var(--etl-ink);transition:background .2s,box-shadow .2s}
body.etl .etl-art .wpcf7-form textarea{min-height:220px;resize:vertical}
body.etl .etl-art .wpcf7-form :is(input[type=text],input[type=email],input[type=tel],input[type=url],textarea):focus{outline:0;background:#fff;box-shadow:inset 0 0 0 2px var(--etl-blue)}
body.etl .etl-art .wpcf7-form .wpcf7-submit{min-width:240px;min-height:52px;font-size:15px}
body.etl .etl-art .wpcf7-form .wpcf7-not-valid-tip{margin-top:6px;font-size:13px}

/* ── 8 404：見本の真ん中の箱（注意の印 → 題 → 文 → ボタン）。注意の三角の代わりに改札機（切符が戻されて扉が閉まり、ランプが赤）。
   右上に案2の404の消印。ボタンは券の形 */
body.etl .etl-404{position:relative;margin:24px 0 0;padding:44px 40px 46px;border-radius:12px;background:var(--etl-pale);text-align:center}
body.etl .etl-404__t{margin:22px 0 0;padding:0;background:none;border:0;font-size:24px;line-height:1.5;font-weight:800;color:var(--etl-ink)}
body.etl .etl-404__t::before,body.etl .etl-404__t::after{content:none;display:none}
body.etl .etl-404__d{margin:16px auto 0;max-width:34em;font-size:15px;line-height:1.9;color:var(--etl-text)}
body.etl .etl-404__b{margin:30px 0 0}
body.etl .etl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:240px;min-height:52px;padding:0 34px;border-radius:5px;background:var(--etl-blue);color:#fff;
 font-size:15px;font-weight:700;letter-spacing:.08em;text-decoration:none;transition:background .2s;
 -webkit-mask:radial-gradient(circle 7px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat;
 mask:radial-gradient(circle 7px at 0 50%,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 94%,#000) 100% 0/51% 100% no-repeat}
body.etl .etl-btn::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
body.etl .etl-btn:hover{background:var(--zk2-blue-d,#1f52ab);color:#fff}
body.zkd.etl .etl-404 > .zk2-dst--404{left:auto;right:30px;top:26px;bottom:auto;margin-top:0;width:92px;height:92px}
/* 改札機（aria-hidden の絵）。開いて1回だけ：切符が左から入る → 扉が閉まる・ランプが赤の × → 切符が戻される。
   動きを止めているとき（?still=1・動きを減らす設定・JSなし）は最後の形（扉が閉まり・ランプが赤・切符は手前）で止まって見える */
body.etl .etl-gate4{display:block;width:280px;height:121px;margin:0 auto;overflow:visible}
body.etl .etl-gate4__floor{fill:none;stroke:#b9cbe6;stroke-width:3;stroke-linecap:round}
body.etl .etl-gate4__m path{fill:#fff;stroke:var(--etl-blue);stroke-width:3;stroke-linejoin:round}
body.etl .etl-gate4__m .etl-gate4__ln{fill:none;stroke:#9fb6d8;stroke-width:2.4;stroke-linecap:round}
body.etl .etl-gate4__m .etl-gate4__slot{fill:none;stroke:var(--etl-ink);stroke-width:3.4;stroke-linecap:round}
body.etl .etl-gate4__rd{fill:#fff;stroke:var(--etl-blue);stroke-width:2.4}
body.etl .etl-gate4__door path{fill:var(--etl-shu)}
body.etl .etl-gate4__door{transform-box:fill-box}
body.etl .etl-gate4__door--l{transform-origin:0 50%}
body.etl .etl-gate4__door--r{transform-origin:100% 50%}
body.etl .etl-gate4__lamp circle{fill:var(--etl-shu)}
body.etl .etl-gate4__lamp path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
body.etl .etl-gate4__tk{transform:translate(30px,40px) rotate(-10deg)}
body.etl .etl-gate4__tk rect{fill:#fff;stroke:var(--etl-blue);stroke-width:2.6}
body.etl .etl-gate4__tk path{fill:none;stroke:var(--etl-blue);stroke-width:2.2;stroke-dasharray:2 3}
@keyframes etl-g4-tk{0%{transform:translate(16px,40px) rotate(0)}28%{transform:translate(99px,40px) rotate(0)}36%,46%{transform:translate(99px,47px) rotate(0)}
 58%{transform:translate(99px,34px) rotate(5deg)}80%{transform:translate(24px,38px) rotate(-15deg)}90%{transform:translate(32px,41px) rotate(-8deg)}100%{transform:translate(30px,40px) rotate(-10deg)}}
@keyframes etl-g4-door{0%,44%{transform:scaleX(0)}56%{transform:scaleX(1.12)}66%,100%{transform:scaleX(1)}}
@keyframes etl-g4-lamp{0%,46%{fill:#3d7be0}47%,100%{fill:var(--etl-shu)}}
@keyframes etl-g4-x{0%,46%{opacity:0}54%,100%{opacity:1}}
html.zk-m body.etl .etl-gate4__tk{animation:etl-g4-tk 2.4s .35s cubic-bezier(.45,0,.3,1) both}
html.zk-m body.etl .etl-gate4__door{animation:etl-g4-door 2.4s .35s cubic-bezier(.3,1.4,.5,1) both}
html.zk-m body.etl .etl-gate4__lamp circle{animation:etl-g4-lamp 2.4s .35s step-end both}
html.zk-m body.etl .etl-gate4__lamp path{animation:etl-g4-x 2.4s .35s ease-out both}

/* ── 9 動き：見本と同じく、ブロックが画面に入ったら浮かび出る（opacity 0→1・0.8秒・0.1秒待つ）。JS が class を付けたときだけ */
html.etl-io body.etl .etl-fx.etl-h{opacity:0 !important}
html.etl-io body.etl .etl-fx{transition:opacity .8s ease .1s}
html.zk-still body.etl .etl-fx{opacity:1 !important;transition:none !important}
/* 9/18 の「下から順に出る」（kami-top.css・kami-top.js の SOLOS と GROUPS）は、この型ではこちらに置き換える（記事のチャットと同じ止め方） */
html.kx body.etl.k-ain:not(.home) .etl-art :is(.ai-body > table,.ai-body figure,.k-verify),
html.kx body.etl.k-ain:not(.home) .etl-wrap .ai-mochi,
html.kx body.etl.k-ain:not(.home) .etl-art .rtoc-mokuji > *{opacity:1;transform:none;animation:none}

/* ── 10 幅ごと（記事と同じ切り替え 999px・767.9px） */
@media (max-width:999px){
 body.etl .etl-main{grid-template-columns:minmax(0,1fr);padding-top:10px}
 body.etl .etl-main > .ai-aside{margin-top:80px}
}
@media (max-width:767.9px){
 body.etl .etl-wrap > .ai-crumb{padding-top:10px}
 body.etl .etl-main{padding-top:0;padding-bottom:44px}
 body.etl .etl-main > .ai-aside{margin-top:60px}
 body.etl .etl-head{margin-top:18px}
 body.etl .etl-head__row{gap:12px}
 body.etl .etl-head__row > .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}
 body.etl .etl-head__t{font-size:22px;line-height:1.45}
 body.zkd.etl .etl-head__count .zk2-flap--n{font-size:18px}
 /* カード：見本のスマホと同じく写真が左の横並び（写真 132px） */
 body.etl .etl-cards{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:24px}
 body.etl .etl-card{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:start;padding:10px}
 body.etl .etl-card .ai-card__media{-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}
 body.etl .etl-card .ai-card__media::after{left:auto;right:1px;top:6px;bottom:6px;width:3px;height:auto;background:radial-gradient(circle 1.3px,rgba(255,255,255,.95) 90%,#0000) 0 0/3px 6px repeat-y}
 body.etl .etl-card .ai-card__body{padding:0;min-width:0}
 body.etl .etl-card .ai-card__title{font-size:15px;line-height:1.55}
 body.etl .etl-card .ai-card__ex{display:none}
 body.etl .etl-card .ai-meta{padding-top:8px;gap:6px}
 body.zkd.etl .etl-card > .zk2-pm{left:104px;right:auto;top:4px;margin-top:0;width:42px;height:42px}
 body.etl .etl-rows{margin-top:24px;gap:4px}
 body.etl .etl-rows .ai-row{grid-template-columns:132px minmax(0,1fr);gap:14px;padding:12px 0}
 body.etl .etl-rows .ai-row__title{font-size:15px;line-height:1.55}
 body.zkd.etl .etl-rows .ai-row > .zk2-pm{left:96px;top:4px;width:42px;height:42px}
 body.zkd.etl .etl-rows .ai-row:first-child > .zk2-pm{top:-10px}
 body.etl .etl-pager{margin-top:32px;gap:6px}
 body.etl .etl-pager .page-numbers{min-width:44px;height:44px;padding:0 14px}
 body.etl .etl-col > .ai-sec{margin-top:48px}
 body.etl .etl-col .ai-sec__title{font-size:20px;gap:11px}
 /* 固定ページ */
 body.etl .etl-art > .ai-single__head{margin-top:14px;padding:22px 104px 22px 20px;
  background:radial-gradient(circle 1.4px,#a9bddb 90%,#0000) calc(100% - 87px) 10px/3px 7px repeat-y,linear-gradient(90deg,var(--etl-pale) calc(100% - 86px),#E9F0FA calc(100% - 86px));
  -webkit-mask:radial-gradient(circle 8px at calc(100% - 86px) 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 8px at calc(100% - 86px) 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat;
  mask:radial-gradient(circle 8px at calc(100% - 86px) 0,#0000 94%,#000) 0 0/100% 51% no-repeat,radial-gradient(circle 8px at calc(100% - 86px) 100%,#0000 94%,#000) 0 100%/100% 51% no-repeat}
 body.etl .etl-art > .ai-single__head::before{left:20px}
 body.etl .etl-art .ai-single__title{font-size:22px;line-height:1.45}
 body.zkd.etl .etl-art > .ai-single__head > .zk2-dst{right:9px;width:68px;height:68px;margin-top:-34px}
 body.etl .etl-art .ai-body{margin-top:28px;line-height:1.85}
 body.etl .etl-art .ai-body > p{line-height:1.85}
 body.etl #rtoc-mokuji-wrapper.rtoc-mokuji-content{margin:36px 0 !important;padding:22px 18px 20px !important;
  -webkit-mask:radial-gradient(circle 7px at 0 66px,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 7px at 100% 66px,#0000 94%,#000) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(circle 7px at 0 66px,#0000 94%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 7px at 100% 66px,#0000 94%,#000) 100% 0/51% 100% no-repeat}
 body.etl #rtoc-mokuji-wrapper #rtoc-mokuji-title{padding-bottom:16px !important;margin-bottom:18px !important}
 body.etl #rtoc-mokuji-wrapper #rtoc-mokuji-title > span{font-size:18px;line-height:30px;padding:0 4px 8px 46px}
 body.etl #rtoc-mokuji-wrapper #rtoc-mokuji-title > span::before{width:38px;height:24px}
 body.etl #rtoc-mokuji-wrapper #rtoc-mokuji-title::after{top:36px}
 body.etl #rtoc-mokuji-wrapper .level-1 > li.rtoc-item{padding:6px 0 6px 44px !important}
 body.etl #rtoc-mokuji-wrapper .level-1 > li.rtoc-item > a{font-size:14px !important}
 body.etl #rtoc-mokuji-wrapper .level-2 > li.rtoc-item > a{font-size:13px !important}
 body.etl #rtoc-mokuji-wrapper.etl-toc--fold{max-height:400px;padding-bottom:70px !important}
 body.etl .etl-toc-fade{bottom:52px;height:120px}
 body.etl .etl-toc-btn{left:12px;right:12px;height:52px;font-size:12.5px}
 body.etl .etl-art .ai-body > h2{margin:52px 0 20px;padding-left:24px;font-size:20px;line-height:1.55}
 body.etl .etl-art .ai-body > h2::before{width:10px}
 body.etl .etl-art .ai-body > h2::after,body.etl .etl-art .ai-body > h2 > .zk2-h2chip{width:10px;height:5px}
 body.etl .etl-art .ai-body > h3{margin:34px 0 10px;font-size:18px}
 body.etl .etl-art .ai-body th,body.etl .etl-art .ai-body td{padding:12px}
 body.etl .etl-art .wpcf7-form .wpcf7-submit{width:100%}
 /* 404 */
 body.etl .etl-404{margin-top:14px;padding:34px 18px 36px}
 body.etl .etl-gate4{width:224px;height:97px}
 body.etl .etl-404__t{margin-top:16px;font-size:19px}
 body.etl .etl-404__d{font-size:14px;line-height:1.85;text-align:left}
 body.etl .etl-btn{width:100%;min-width:0}
 body.zkd.etl .etl-404 > .zk2-dst--404{right:10px;top:12px;width:62px;height:62px}
}
html:not(.zk-m) body.etl #rtoc-mokuji-wrapper.rtoc-mokuji-content{transition:none}