/* エンジョイ東京型の記事ページ（2026-10-02）
   jstork19_custom/assets/kami-et-single.css … kami/et-parts.php が記事ページ（関門が開いているとき）で読む。全部 body.ets の下
   見本 https://www.enjoytokyo.jp/article/204958/ ほかを PC1440・SP390 で実測した型に、今のトンマナ（青 #2b66cc・7色のカテゴリ・
   案2「きっぷとスタンプ」の券の形と判子）を当てたもの。
   ・藤井さんの選択（10/2 21:00）：PCだけ右にサイドバーを残す。型は見本のまま、PC では広告4枠・ランキング・早見表・新着・カテゴリを記事の横に残す
   ・並び：PC（1000px以上）は 本文 820px＋間 40px＋サイド 300px。本文は 大きいアイキャッチ → 題 → 情報の行（カテゴリ・公開・更新・読了・日付印）
          → 答えの一言 → 目次の箱 → 本文 → 前後の記事 → 関連記事。サイドは よく読まれている記事 → 早見表 → 新着記事 → 広告の枠 → カテゴリ
          999px以下はサイドが本文の後ろへ流れて、見本の下の章の見た目になる（今のサイトと同じ順）
   ・見本から変えた所（10/1 のトップと同じ決まり）：英字の見出しと右へ伸びる点線は付けない／1px の線は面か 2px に／点々の地は敷かない／
     写真は 16:9 を切らない／見出しの縦帯と小見出しの色はカテゴリの色、目次と UI は今の青
   ・動き：見本と同じく、ブロックが画面に入ったら 0.8 秒で浮かび出る（opacity だけ・並びは動かさない）。目次は長いと畳んで「目次を開く」。
     案2の動き（日付印・h2 の入鋏・消印・確認印・カテゴリの札の入鋏）はそのまま。順位の判子は画面に入ったら上から押す
   ・本文（the_content）の中は CSS と、JS が足す aria-hidden の飾り・class だけ。文字は触らない
   ・右のサイドの中の見た目は別ファイル kami-et-side.css（一覧・検索・固定・404 も同じものを読む）。ここには2列の枠と記事の中だけ */

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

/* ── 1 器：PC は本文と右のサイドの2列（今のサイトと同じ 1200px の枠）。999px 以下は1列で、サイドは本文の後ろへ */
body.ets .ets-wrap{max-width:var(--ai-wrap,1200px)}
body.ets .ets-wrap > .ai-crumb{padding:16px 0 0}
body.ets .ets-main{display:grid;grid-template-columns:minmax(0,1fr) var(--ets-side);column-gap:40px;align-items:start;padding:14px 0 72px}
body.ets .ets-col{min-width:0}

/* ── 2 記事の頭：アイキャッチを大きく → 題 → 情報の行 */
body.ets .ets-art .ai-single__eye{position:relative;margin:0;background:#e9eef5;line-height:0;overflow:hidden}
body.ets .ets-art .ai-single__eye img{display:block;width:100%;height:auto}
body.ets .ets-art .ai-single__head{position:relative;margin:40px 0 0;padding:0;border:0}
body.ets .ets-art .ai-single__title{margin:0;font-size:32px;line-height:1.5;font-weight:900;letter-spacing:.01em;color:var(--ets-ink)}
body.ets .ets-art .ai-single__info{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:18px 0 0;padding:0}
body.ets .ets-art .ai-single__info > .ai-meta{display:flex;margin:0 4px 0 0}
body.ets .ets-art .ai-single__info > span{color:var(--ets-muted)}
/* 日付印：アイキャッチの右下の角に、券へ押した消印のように重ねる（案2の押し方のまま） */
body.ets .ets-art .ai-single__head > .zk2-dst{top:-88px;right:12px;bottom:auto;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.94);mix-blend-mode:normal}
/* 広告を試している2本は functions.php がパンくずを題の後ろへ動かす（今と同じ）。そのときの余白 */
body.ets .ets-art > .ai-crumb{margin:22px 0 0;padding:0}

/* 答えの一言（functions.php が題のすぐ下へ動かす）と、答えの一言が無い記事の目次より前の最初の段落＝見本の「導入文」 */
body.ets .ets-art .ai-single__head + .k-ans{margin:32px 0 0 !important;padding:0 !important;background:none !important;border-radius:0 !important;
 font-size:18px !important;line-height:1.85 !important;font-weight:700 !important;color:var(--ets-text) !important}
body.ets .ets-art .ai-body{margin-top:32px;font-size:16px;line-height:2;color:var(--ets-text)}
body.ets .ets-art .ai-body > p{line-height:2}
body.ets .ets-art:not(:has(> .k-ans)) .ai-body > p:first-of-type:has(~ #rtoc-mokuji-wrapper){font-size:18px;line-height:1.85}

/* ── 3 目次：見本の「この記事で紹介しているスポット」の箱（薄い面・角10px・見出しを真ん中に・2px の下線と小さな三角）。
   番号は案2の券番号の欄のまま。長い目次は畳んで「目次を開く」（kami-et-single.js） */
body.ets #rtoc-mokuji-wrapper.rtoc-mokuji-content{margin:48px 0 !important;padding:32px 36px 30px !important;background:var(--ets-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.ets #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.ets #rtoc-mokuji-wrapper #rtoc-mokuji-title > span{display:inline-flex;align-items:center;padding:0 6px 12px 50px;border-bottom:2px solid var(--ets-blue);font-size:20px;line-height:34px;font-weight:800;letter-spacing:.08em;color:var(--ets-ink)}
body.ets #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.ets #rtoc-mokuji-wrapper #rtoc-mokuji-title > span::after{left:16px;top:-1px}
/* 下線の真ん中の小さな三角（見本は下向きの三角） */
body.ets #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(--ets-blue);pointer-events:none}
body.ets #rtoc-mokuji-wrapper .rtoc_open_close{display:none !important}
body.ets #rtoc-mokuji-wrapper .level-1 > li.rtoc-item{padding:7px 0 7px 48px !important}
body.ets #rtoc-mokuji-wrapper .level-1 > li.rtoc-item::before{top:7px}
body.ets #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.ets #rtoc-mokuji-wrapper .level-2 > li.rtoc-item > a{font-size:13.5px !important;color:var(--ets-muted) !important}
body.ets #rtoc-mokuji-wrapper .level-2 > li.rtoc-item::before{background:#9fb6d8}
body.ets #rtoc-mokuji-wrapper a:hover{text-decoration:underline;text-underline-offset:3px}
/* 畳んだ目次（JS が class を付けたときだけ） */
body.ets #rtoc-mokuji-wrapper.ets-toc--fold{position:relative;overflow:hidden;max-height:440px;padding-bottom:84px !important}
body.ets #rtoc-mokuji-wrapper.ets-toc--fold.is-open{max-height:none}
body.ets .ets-toc-fade{position:absolute;left:0;right:0;bottom:62px;height:150px;background:linear-gradient(rgba(242,246,252,0),var(--ets-pale) 70%);pointer-events:none}
body.ets .is-open > .ets-toc-fade{display:none}
body.ets .ets-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(--ets-pale);color:var(--ets-blue);font:700 13px/1 var(--ai-jp);letter-spacing:.08em}
body.ets .ets-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.ets .is-open > .ets-toc-btn::after{transform:translateY(2px) rotate(-135deg)}
body.ets .ets-toc-btn:focus-visible{outline:2px solid var(--ets-blue);outline-offset:-4px}

/* ── 4 見出し：h2 は左にカテゴリ色の縦帯（見本と同じ型）。帯は券の半券の形（白いミシン目・上に入鋏の切れ込み）。
   h3 は色付きの小見出し（見本の article-catch の型・カテゴリの濃い色の文字）。h4 は太字 */
body.ets .ets-art .ai-body > h2{position:relative;margin:80px 0 32px;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(--ets-ink)}
body.ets .ets-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(--c,var(--ets-blue));-webkit-mask:none;mask:none}
body.ets .ets-art .ai-body > h2::after{left:0;top:calc(.18em - 1px);width:12px;height:6px;background:#fff}
body.ets .ets-art .ai-body > h2 > .zk2-h2chip{left:0;top:calc(.18em - 1px);width:12px;height:6px;background:var(--c,var(--ets-blue))}
body.ets .ets-art .ai-body > h2:first-child{margin-top:0}
body.ets .ets-art .ai-body > h3{position:relative;margin:48px 0 16px;padding:0;background:none;border:0;border-radius:0;
 font-size:20px;line-height:1.6;font-weight:800;color:var(--ci,var(--ets-blue))}
body.ets .ets-art .ai-body > h3::before,body.ets .ets-art .ai-body > h3::after{content:none;display:none}
body.ets .ets-art .ai-body > h4{margin:36px 0 12px;padding:0;background:none;border:0;font-size:17px;line-height:1.7;font-weight:800;color:var(--ets-ink)}
body.ets .ets-art .ai-body > h4::before,body.ets .ets-art .ai-body > h4::after{content:none;display:none}

/* ── 5 写真と図：見本の写真とキャプション（左寄せの灰色の小さい字・頭に小さな三角＝見本の「▲」を CSS で描く） */
body.ets .ets-art .ai-body figure{margin:32px 0}
body.ets .ets-art .ai-body figure:not(.icon) > figcaption{position:relative;margin:9px 0 0;padding:0 0 0 16px;text-align:left;font-size:14px;line-height:1.5;color:var(--ets-muted)}
body.ets .ets-art .ai-body figure:not(.icon) > figcaption::before{content:"";position:absolute;left:1px;top:.42em;border:5px solid transparent;border-top:0;border-bottom:8px solid currentColor;opacity:.75}
body.ets .ets-art .ai-body li::marker{color:var(--c,var(--ets-blue))}

/* ── 6 表：線で区切らず面で（見出しの行は薄い青・行は1つおきに薄い灰色） */
body.ets .ets-art .ai-body table{border:0 !important;border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden;background:#fff}
body.ets .ets-art .ai-body th,body.ets .ets-art .ai-body td{border:0 !important;padding:12px 14px}
body.ets .ets-art .ai-body th,body.ets .ets-art .ai-body thead td{background:var(--ets-pale2) !important;color:var(--ets-ink);font-weight:700}
body.ets .ets-art .ai-body tbody tr:nth-child(even) td{background:#F6F8FB}
body.ets .ets-art .ai-body tbody tr:nth-child(odd) td{background:#fff}

/* ── 7 箱：「この記事が見た公式ページ」は見本の情報カードの角と余白に（検札票と朱の確認印はそのまま）。
   本文に埋め込んだ記事のカードは見本の「オリジナル記事」の型（薄い面・写真左・題太字・線なし） */
body.ets .ets-art .ai-body .k-verify{margin:48px 0;padding:40px 28px 24px;border-radius:10px}
body.ets .ets-art .ai-body .related_article{margin:32px 0}
body.ets .ets-art .ai-body .related_article a{display:flex;gap:18px;align-items:center;padding:16px;border:0 !important;border-radius:10px;background:#F4F6F9 !important;box-shadow:none !important;text-decoration:none}
body.ets .ets-art .ai-body .related_article a:hover{background:var(--ets-pale2) !important}
body.ets .ets-art .ai-body .related_article .related_article__ttl,body.ets .ets-art .ai-body .related_article .ttl{font-size:16px !important;line-height:1.6 !important;font-weight:800 !important;color:var(--ets-ink) !important}
body.ets .ets-art .ai-body .k-verify + .k-report{margin-top:-28px}
/* 引用：細い枠をやめて薄い面に（今の本番で出ている文字化けの飾り＝枠の角の四角も外す） */
body.ets .ets-art .ai-body blockquote{border:0 !important;border-radius:10px;background:#F4F6F9;padding:22px 26px}
body.ets .ets-art .ai-body blockquote::before,body.ets .ets-art .ai-body blockquote::after{content:none !important;display:none !important}
body.ets .ets-art .ai-body .k-report{text-align:right}

/* ── 8 記事の後ろ：タグ・前後の記事・関連記事 */
body.ets .ets-art .ai-tags{margin:40px 0 0}
body.ets .ets-col > .ai-nav{margin:64px 0 0}

/* 章の見出し（関連記事）：見本の章の見出しの大きさ。左の印は案2の硬券の札 */
body.ets .ets-wrap .ai-sec__head{margin:0 0 24px;padding:0;border:0}
body.ets .ets-wrap .ai-sec__title.zk2-h{gap:14px;margin:0;font-size:24px;line-height:1.4;font-weight:800;color:var(--ets-ink)}
body.ets .ets-wrap .ai-sec__en{display:none}
body.ets .ets-col > .ai-rel{margin:72px 0 0}
body.ets .ets-col > .ai-rel + .ai-rel{margin-top:56px}

/* 関連記事のカード：見本の「あなたにオススメの記事」の4列（写真は 16:9 のまま・題は太字3行まで）。本文の列が狭い幅では2列 */
body.ets .ai-rel .ai-grid{display:grid;gap:28px 20px}
body.ets .ai-rel .ai-grid--4{grid-template-columns:repeat(4,1fr)}
body.ets .ai-rel .ai-grid--2{grid-template-columns:repeat(2,1fr)}
body.ets .ai-rel .ai-card__title{font-size:15px;line-height:1.6;font-weight:800}
body.ets .ai-rel .ai-card__title a:hover{text-decoration:underline;text-underline-offset:3px}
body.ets .ai-rel .ai-card__media img{transition:opacity .3s}
body.ets .ai-rel .ai-card__media:hover img{opacity:.75}

/* ── 10 動き：見本と同じく、ブロックが画面に入ったら浮かび出る（opacity 0→1・0.8秒・0.1秒待つ）。最初の画面にあるものは隠さない。
   9/18 の「下から順に出る」（kami-top.css）は、この型ではこちらに置き換える */
html.kx body.ets.k-ain:not(.home) .ets-art :is(.ai-body > table,.ai-body figure,.k-verify),
html.kx body.ets.k-ain:not(.home) .ets-wrap :is(.ai-nav,.ai-mochi),
html.kx body.ets.k-ain:not(.home) .ets-art .rtoc-mokuji > *{opacity:1;transform:none;animation:none}
html.ets-io body.ets .ets-fx.ets-h{opacity:0 !important}
html.ets-io body.ets .ets-fx{transition:opacity .8s ease .1s}
html.zk-still body.ets .ets-fx{opacity:1 !important;transition:none !important}

/* ── 11 本文の列が狭い PC（1000〜1139px）は関連記事を2列に */
@media (min-width:1000px) and (max-width:1139px){
 body.ets .ai-rel .ai-grid--4{grid-template-columns:repeat(2,1fr)}
}

/* ── 12 999px 以下：1列。サイドは本文の後ろへ流れる（サイドの中の見た目は kami-et-side.css） */
@media (max-width:999px){
 body.ets .ets-main{grid-template-columns:minmax(0,1fr);padding-top:10px}
 body.ets .ai-rel .ai-grid--4{grid-template-columns:repeat(2,1fr)}
 body.ets .ets-side{margin-top:80px}
}

/* ── 13 スマホ（本番の切り替え 767.9px にそろえる）。見本のスマホは写真が端まで・題 22px・本文 16px/28px */
@media (max-width:767.9px){
 body.ets .ets-wrap > .ai-crumb{padding-top:10px}
 body.ets .ets-main{padding-top:0;padding-bottom:44px}
 body.ets .ets-side{margin-top:60px}
 body.ets .ets-art .ai-single__eye{margin:10px -20px 0}
 body.ets .ets-art .ai-single__head{margin-top:28px}
 body.ets .ets-art .ai-single__title{font-size:23px;line-height:1.5}
 body.ets .ets-art .ai-single__info{gap:8px 14px;margin-top:14px;padding-right:0}
 body.ets .ets-art .ai-single__head > .zk2-dst{top:-68px;right:6px;width:74px;height:74px}
 body.ets .ets-art .ai-single__head + .k-ans{margin-top:26px !important;font-size:16px !important;line-height:1.8 !important}
 body.ets .ets-art .ai-body{margin-top:26px;line-height:1.85}
 body.ets .ets-art .ai-body > p{line-height:1.85}
 body.ets .ets-art:not(:has(> .k-ans)) .ai-body > p:first-of-type:has(~ #rtoc-mokuji-wrapper){font-size:16px;line-height:1.85}
 body.ets #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.ets #rtoc-mokuji-wrapper #rtoc-mokuji-title{padding-bottom:16px !important;margin-bottom:18px !important}
 body.ets #rtoc-mokuji-wrapper #rtoc-mokuji-title > span{font-size:18px;line-height:30px;padding:0 4px 8px 46px}
 body.ets #rtoc-mokuji-wrapper #rtoc-mokuji-title > span::before{width:38px;height:24px}
 body.ets #rtoc-mokuji-wrapper #rtoc-mokuji-title::after{top:36px}
 body.ets #rtoc-mokuji-wrapper .level-1 > li.rtoc-item{padding:6px 0 6px 44px !important}
 body.ets #rtoc-mokuji-wrapper .level-1 > li.rtoc-item > a{font-size:14px !important}
 body.ets #rtoc-mokuji-wrapper .level-2 > li.rtoc-item > a{font-size:13px !important}
 body.ets #rtoc-mokuji-wrapper.ets-toc--fold{max-height:400px;padding-bottom:70px !important}
 body.ets .ets-toc-fade{bottom:52px;height:120px}
 body.ets .ets-toc-btn{left:12px;right:12px;height:52px;font-size:12.5px}
 body.ets .ets-art .ai-body > h2{margin:56px 0 22px;padding-left:24px;font-size:20px;line-height:1.55}
 body.ets .ets-art .ai-body > h2::before{width:10px}
 body.ets .ets-art .ai-body > h2::after,body.ets .ets-art .ai-body > h2 > .zk2-h2chip{width:10px;height:5px}
 body.ets .ets-art .ai-body > h3{margin:36px 0 12px;font-size:18px}
 body.ets .ets-art .ai-body > h4{font-size:16px}
 body.ets .ets-art .ai-body figcaption{margin-top:5px;font-size:12px}
 body.ets .ets-art .ai-body .k-verify{padding:38px 16px 20px}
 body.ets .ets-col > .ai-nav{margin-top:48px}
 body.ets .ets-wrap .ai-sec__title.zk2-h{font-size:20px;gap:11px}
 body.ets .ets-col > .ai-rel{margin-top:56px}
 body.ets .ai-rel .ai-grid{gap:22px 14px}
 body.ets .ai-rel .ai-card__title{font-size:14px}
}
html:not(.zk-m) body.ets #rtoc-mokuji-wrapper.rtoc-mokuji-content{transition:none}