/* エンジョイ東京型（イベント詳細・スポット詳細）2026-10-02 ①。inc/hk-db-et.php が描く個別ページだけで読む（body.hkdb-et）。
   寸法と並びは見本（enjoytokyo.jp の event/2003517・spot/l_20129644 を 2026-10-02 20:45 に実測）から。色・書体・券と判子の飾りは案2のまま。
   見本から変えた所：英字の見出しは付けない／影は付けない（白い面は方眼の上で面だけで分ける）／区切りの線は 2px／茶とピンクの地は水色に。
   イベント＝body.hkdb-et--event（見出しは字の下に太い2色の帯）／道の駅・SA/PA＝body.hkdb-et--spot（見出しは色の帯） */
body.hkdb-et .hkdb{--et-ink:#101820;--et-sub:#4f5f6e;--et-grad:linear-gradient(90deg,#2d69d0,#2bcccc);--et-track:#e3ecf7;--et-line:#e3ecf7;--et-band:#eef6ff;--et-paper:#f7fafe;--et-grid:#e1eaf5}

/* ── 頭：題（大）＋アイコン付きの情報の行。案2の券の面・頭の駅スタンプ・題の下のミシン目は付けない ── */
body.hkdb-et .hkdb .hkdb-hero{background:none;border-radius:0;padding:0;margin:26px 0 0;overflow:visible}
body.hkdb-et .hkdb .hkdb-hero::before,body.hkdb-et .hkdb .zkb-hero .hkdb-hero__title::after{content:none;display:none}
body.hkdb-et .hkdb .zkb-hero .zkb-stamp{display:none}
body.hkdb-et .hkdb .hkdb-hero__title{font-size:28px;line-height:1.5;font-weight:800;letter-spacing:.01em;color:var(--et-ink);margin:0;padding:0}
body.hkdb-et .hkdb .hket-info{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 40px}
body.hkdb-et .hkdb .hket-info__i{display:flex;align-items:flex-start;gap:8px;margin:0;padding:0;font-size:14px;line-height:1.6;color:#2b3a47}
body.hkdb-et .hkdb .hket-ic{flex:none;width:16px;height:16px;margin-top:3px;fill:none;stroke:#2b66cc;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
body.hkdb-et .hkdb .hket-info__l{flex:none;position:relative;margin-top:1px;padding:0 9px;border-radius:3px;font-size:11.5px;font-weight:700;line-height:20px;color:#2b66cc;white-space:nowrap;
 background:radial-gradient(circle at 0 50%,#fff 3px,#0000 3.5px),radial-gradient(circle at 100% 50%,#fff 3px,#0000 3.5px),#e4effc}
body.hkdb-et .hkdb .hket-info__v{min-width:0;font-weight:700;color:var(--et-ink)}
body.hkdb-et .hkdb .hket-info__v small{display:block;font-size:12.5px;font-weight:400;color:var(--et-sub);line-height:1.6}

/* 結論のバッジ（検印）とアフィリの枠：頭とタブの間 */
body.hkdb-et .hkdb .hkdb-hero+.hkdb-badges--big{margin:22px 0 0}
body.hkdb-et .hkdb .hkdb-badges--big+.hkdb-affil{margin-top:24px}
body.hkdb-et .hkdb .hkdb-affil{margin-top:22px}

/* ── ページの中のタブ（anchor-button-menu）：字だけ・今の場所に下線（案2の券の青緑のグラデーション）。
      見本と同じく折り返さない1段。収まらない幅では横に送る（980px ではイベントの9本でも 950px で収まる） ── */
body.hkdb-et .hkdb .hket-tabs{margin:30px 0 0;overflow-x:auto;scrollbar-width:none}
body.hkdb-et .hkdb .hket-tabs::-webkit-scrollbar{display:none}
body.hkdb-et .hkdb .hket-tabs__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap}
body.hkdb-et .hkdb .hket-tabs__i{flex:none;margin:0;padding:0}
body.hkdb-et .hkdb .hket-tab,body.hkdb-et .hkdb-wrap .hkdb .hket-tab{position:relative;display:block;padding:17px 10px;font-size:16px;font-weight:800;line-height:16px;color:#3d4b57;text-decoration:none;white-space:nowrap}
body.hkdb-et .hkdb .hket-tab:hover,body.hkdb-et .hkdb-wrap .hkdb .hket-tab:hover{color:#2b66cc;text-decoration:none}
body.hkdb-et .hkdb .hket-tab.is-on::after{content:"";display:block;position:absolute;left:7px;right:7px;bottom:5px;height:3px;border-radius:1.5px;background:var(--et-grad)}

/* ── まとめ（experience-section）：方眼の地・左に写真か記念スタンプ・右に白い面（角は左下だけ四角） ── */
body.hkdb-et .hkdb .hket-rep{position:relative;margin:6px -30px 0;padding:40px 30px;scroll-margin-top:70px;
 background-color:var(--et-paper);background-image:linear-gradient(var(--et-grid) 1px,#0000 1px),linear-gradient(90deg,var(--et-grid) 1px,#0000 1px);background-size:27px 27px;background-position:-1px -1px}
body.hkdb-et .hkdb .hket-rep__in{display:flex;gap:44px;align-items:stretch}
body.hkdb-et .hkdb .hket-rep__vis{flex:0 0 340px;display:flex;align-items:center;justify-content:center;min-width:0}
body.hkdb-et .hkdb .hket-rep__fig{margin:0;width:100%}
body.hkdb-et .hkdb .hket-rep__zoom{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;border-radius:10px;overflow:hidden}
body.hkdb-et .hkdb .hket-rep__zoom img{display:block;width:100%;height:auto;border-radius:10px}
body.hkdb-et .hkdb .hket-rep__cap{margin:8px 0 0;font-size:12px;line-height:1.6;color:#5c6b78}
body.hkdb-et .hkdb .hket-rep__cap a{color:#5c6b78;text-decoration:underline;text-underline-offset:2px}
body.hkdb-et .hkdb .hket-rep__card{flex:1 1 auto;min-width:0;background:#fff;border-radius:64px 64px 64px 0;padding:40px 44px 36px}
body.hkdb-et .hkdb .hket-rep__h{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 22px;font-size:18px;font-weight:800;line-height:1.4;color:var(--et-ink)}
body.hkdb-et .hkdb .hket-rep__h::before,body.hkdb-et .hkdb .hket-rep__h::after{content:"";flex:none;width:16px;height:2px;background:#a9bdd9}
body.hkdb-et .hkdb .hket-rep__lead{margin:0;font-size:16px;line-height:1.8;color:#16232d}
body.hkdb-et .hkdb .hket-rep__note{margin:18px 0 0;font-size:12px;line-height:1.75;color:#66727e}
body.hkdb-et .hkdb .hket-rep__card .hkdb-kpis{display:grid;gap:12px;margin:22px 0 0;grid-template-columns:repeat(3,minmax(0,1fr))}
body.hkdb-et .hkdb .hket-rep__card .hkdb-kpis:has(>.hkdb-kpi:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
body.hkdb-et .hkdb .hket-rep__card .hkdb-kpi{background:var(--et-band)}

/* 記念スタンプ（写真が無いページ）：青インク・輪に名前・真ん中に絵か県の形・帯に日付か数。画面に入るとポンと押す */
body.hkdb-et .hkdb .hket-stamp{display:block;position:relative;width:236px;height:236px;color:#23519f;pointer-events:none}
body.hkdb-et .hkdb .hket-stamp__s{display:block;width:100%;height:100%;overflow:visible;mix-blend-mode:multiply;opacity:.9;transform:rotate(-10deg)}
body.hkdb-et .hkdb .hket-stamp__s text{fill:currentColor;font-family:var(--zk2-stamp,"Hiragino Sans",sans-serif);font-weight:700;letter-spacing:.06em}
body.hkdb-et .hkdb .hket-stamp__s .hket-stamp__d{font-family:var(--zk2-digit,"Arial Narrow",sans-serif);font-weight:600;letter-spacing:.04em}
body.hkdb-et .hkdb .hket-stamp::after{content:"";position:absolute;inset:6px;border-radius:50%;box-shadow:0 0 0 3px #23519f;opacity:0}
html.zk-m.et-io body.hkdb-et .hkdb .hket-rep:not(.et-go) .hket-stamp__s{opacity:0}
html.zk-m body.hkdb-et .hkdb .hket-rep.et-go .hket-stamp__s{animation:zkb-press .7s .15s cubic-bezier(.2,.8,.3,1.1) both}
html.zk-m body.hkdb-et .hkdb .hket-rep.et-go .hket-stamp::after{animation:zkb-ring .6s .52s ease-out forwards}

/* ── 本文の章：面の箱をやめて白の上に置く（見本は章を箱に入れない）。章の間は余白で分ける ── */
body.hkdb-et .hkdb .hkdb-sec{background:none;border-radius:0;padding:0;margin:76px 0 0;scroll-margin-top:70px;--zkb-bg:#fff}
body.hkdb-et .hkdb .hkdb-sec .zk2-ht{--zk2-hbg:#fff}
body.hkdb-et .hkdb .hkdb-sec__lead{font-size:16px;line-height:1.9;margin:0 0 18px}
body.hkdb-et .hkdb .hkdb-affil{background:var(--hk-surface);border-radius:20px;padding:22px 22px;--zkb-bg:var(--hk-surface)}

/* イベント：見出しの字の下に太い2色の帯（wysiwyg-teble-title。青緑の90px＋薄い水色の地 388px・8px） */
body.hkdb-et--event .hkdb .hkdb-sec__t.zk2-h{margin:0 0 34px;padding:0 0 22px}
body.hkdb-et--event .hkdb .hkdb-sec__t.zk2-h::after{content:"";display:block;position:absolute;left:0;right:auto;top:auto;bottom:0;width:min(388px,100%);height:8px;border-radius:4px;background:var(--et-track)}
body.hkdb-et--event .hkdb .hkdb-sec__t.zk2-h::before{content:"";display:block;position:absolute;left:0;bottom:0;width:90px;height:8px;border-radius:4px;background:var(--et-grad);z-index:1}

/* 道の駅・SA/PA：見出しは色の帯（article-section-header）。帯の下のほうに白いミシン目（見本の白い2px の線の場所） */
body.hkdb-et--spot .hkdb .hkdb-sec__t.zk2-h{margin:0 0 34px;padding:14px 18px 24px;color:#fff;background:linear-gradient(90deg,#23519f,#2b66cc)}
body.hkdb-et--spot .hkdb .hkdb-sec__t.zk2-h::after{content:"";display:block;position:absolute;left:0;right:0;top:auto;bottom:8px;height:4px;background:radial-gradient(circle 1.4px,rgba(255,255,255,.92) 90%,#0000) 0 50%/7px 4px repeat-x}
body.hkdb-et--spot .hkdb .hkdb-sec__t.zk2-h .zk2-ht__b{background:radial-gradient(circle 1.4px,rgba(43,102,204,.7) 90%,#0000) var(--zk2-px) 3px/3px 6.4px repeat-y,#fff;color:#2b66cc}
body.hkdb-et--spot .hkdb .hkdb-sec__t.zk2-h .zk2-ht{--zk2-hbg:#2b66cc}

/* 章の中の部品を白の地に合わせる */
body.hkdb-et .hkdb .hkdb-sec .hkdb-rows{background:none;border-radius:0;padding:0;margin:0 0 18px;border-top:2px solid var(--et-line)}
body.hkdb-et .hkdb .hkdb-sec .hkdb-row{margin:0;padding:14px 0;border-bottom:2px solid var(--et-line)}
body.hkdb-et .hkdb .hkdb-sec .hkdb-row dt{flex:0 0 150px;font-size:14px;color:#3d4b57}
body.hkdb-et .hkdb .hkdb-sec .hkdb-quote{background:var(--et-paper);border-radius:12px;padding:14px 16px}
body.hkdb-et .hkdb .hkdb-sec .hkdb-quote__l{background:radial-gradient(circle at 0 50%,var(--et-paper) 3.5px,#0000 4px),radial-gradient(circle at 100% 50%,var(--et-paper) 3.5px,#0000 4px),#e4effc}
body.hkdb-et .hkdb .hkdb-sec .hkdb-links li a{background:radial-gradient(circle at 0 50%,#fff 6px,#0000 6.5px),radial-gradient(circle at 100% 50%,#fff 6px,#0000 6.5px),var(--hk-surface)}
body.hkdb-et .hkdb .hkdb-sec .hkdb-links li a:hover{background:radial-gradient(circle at 0 50%,#fff 6px,#0000 6.5px),radial-gradient(circle at 100% 50%,#fff 6px,#0000 6.5px),var(--hk-chip)}
body.hkdb-et .hkdb .hkdb-sec .hkdb-links--chips li a{background:radial-gradient(circle at 0 50%,#fff 3.5px,#0000 4px),radial-gradient(circle at 100% 50%,#fff 3.5px,#0000 4px),var(--hk-surface)}
body.hkdb-et .hkdb .hkdb-sec .hkdb-det summary{background:radial-gradient(circle at 0 50%,#fff 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,#fff 5px,#0000 5.5px),var(--hk-surface)}
body.hkdb-et .hkdb .hkdb-faq .hkdb-qa{background:var(--et-paper);border-radius:14px}
body.hkdb-et .hkdb .hkdb-sec .hkdb-fig,body.hkdb-et .hkdb .hkdb-sec .hkdb-fig>div{background:var(--et-paper)}
body.hkdb-et .hkdb .hkdb-sec .hkdb-fig>div:nth-child(even){background:var(--hk-sky)}

/* ── 基本情報（wysiwyg-teble）：ラベル左・値右。行は 2px の線で分ける ── */
body.hkdb-et .hkdb .hket-tbl{margin:0;padding:0;border-top:2px solid var(--et-line)}
body.hkdb-et .hkdb .hket-tbl__r{display:flex;margin:0;border-bottom:2px solid var(--et-line)}
body.hkdb-et .hkdb .hket-tbl dt{flex:0 0 170px;margin:0;padding:16px 24px 16px 0;font-size:14px;font-weight:700;line-height:1.75;color:#3d4b57}
body.hkdb-et .hkdb .hket-tbl dd{flex:1 1 auto;min-width:0;margin:0;padding:16px 0;font-size:15px;line-height:1.75;color:#16232d;overflow-wrap:anywhere}
body.hkdb-et .hkdb .hket-tbl dd small{font-size:13px;color:var(--et-sub)}
body.hkdb-et .hkdb .hket-basic .hkdb-src{margin:26px 0 0}
/* 出どころに説明の行があるとき、行頭の「・」だけが1行目に浮くので、説明の行の頭に置き直す（器の元からある崩れ。新しい型の中だけで直す） */
body.hkdb-et .hkdb .hket-basic .hkdb-src__list li:has(>.hkdb-src__n){position:relative}
body.hkdb-et .hkdb .hket-basic .hkdb-src__list li:has(>.hkdb-src__n)::before{position:absolute;left:0;top:0;text-indent:0}

/* ── 近いもの（same-event-list）：色の地を画面の幅いっぱいに敷いてカード ── */
body.hkdb-et .hkdb .hket-band{margin:96px 0 0;padding:76px 0 88px;--zkb-bg:var(--et-band);border-image:linear-gradient(var(--et-band),var(--et-band)) fill 0//0 100vw}
body.hkdb-et .hkdb .hket-band .zk2-ht{--zk2-hbg:var(--et-band)}
body.hkdb-et--spot .hkdb .hket-band .hkdb-sec__t.zk2-h .zk2-ht{--zk2-hbg:#2b66cc}
body.hkdb-et .hkdb .hket-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
body.hkdb-et .hkdb .hket-cards__i{margin:0;padding:0;min-width:0}
body.hkdb-et .hkdb .hket-card,body.hkdb-et .hkdb-wrap .hkdb .hket-card{display:block;color:inherit;text-decoration:none}
body.hkdb-et .hkdb .hket-card__t{display:block;margin:0 0 14px;font-size:18px;font-weight:800;line-height:1.5;letter-spacing:.03em;color:var(--hk-link,#0075e0)}
body.hkdb-et .hkdb .hket-card:hover .hket-card__t{text-decoration:underline;text-underline-offset:3px}
body.hkdb-et .hkdb .hket-card__img{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;margin:0 0 14px;border-radius:10px;overflow:hidden;background:#fff}
body.hkdb-et .hkdb .hket-card__img img{display:block;width:100%;height:100%;object-fit:contain}
body.hkdb-et .hkdb .hket-card__ic{width:58px;height:58px;fill:none;stroke:#2b66cc;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
body.hkdb-et .hkdb .hket-card__shape{width:46%;height:70%;fill:#2b66cc;opacity:.85}
body.hkdb-et .hkdb .hket-card__s{display:block;font-size:14px;font-weight:700;line-height:1.6;letter-spacing:.04em;color:#2b3a47}
body.hkdb-et .hkdb .hket-cards--pref .hket-card__img{aspect-ratio:2/1}
/* 写真の無いカードは記念スタンプ（まとめの欄と同じ絵・押す動きは付けない） */
body.hkdb-et .hkdb .hket-card__img .hket-stamp{width:min(150px,62%);height:auto;aspect-ratio:1}
body.hkdb-et .hkdb .hket-card__img .hket-stamp__s{transform:rotate(-8deg)}

/* 戻る・最終更新は案2のまま。帯のあとに少し余白 */
body.hkdb-et .hkdb .hket-band+.hkdb-back{margin-top:44px}

/* ── 下へ送ると題が上に貼り付く（event-header-title.fixed）。db-et.js が作る ── */
body.hkdb-et .hket-fix{position:fixed;left:0;right:0;top:0;z-index:60;background:#fff;transform:translateY(-110%);visibility:hidden;transition:transform .3s,visibility 0s .3s}
body.hkdb-et .hket-fix.is-on{transform:none;visibility:visible;transition:transform .3s}
body.hkdb-et .hket-fix::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#2d69d0,#2bcccc)}
body.hkdb-et .hket-fix__t{max-width:980px;margin:0 auto;padding:14px 20px 16px;font-size:18px;font-weight:800;line-height:1.3;color:#101820;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 本文・基本情報・よくある質問・近いもの：画面に入ると 0.8 秒でふわっと出る（見本の .invisible→.visible）。JS が無ければ最初から見える */
html.et-io body.hkdb-et .hkdb>.hkdb-sec:not(.hkdb-affil){transition:opacity .8s ease .1s}
html.et-io body.hkdb-et .hkdb>.hkdb-sec:not(.hkdb-affil):not(.et-in){opacity:0}

/* 写真を大きく見る（image-view-overlay） */
.hket-lb{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:rgba(10,20,35,.88);cursor:zoom-out}
.hket-lb img{display:block;max-width:min(1100px,100%);max-height:calc(100vh - 110px);width:auto;height:auto;border-radius:6px}
.hket-lb p{margin:0;font-size:12.5px;line-height:1.6;color:#e6edf5;text-align:center}
.hket-lb p a{color:#e6edf5}
.hket-lb button{position:absolute;right:14px;top:12px;min-width:44px;min-height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;cursor:pointer}

/* 681〜1039px は外側の余白が 20px なので、方眼の面も 20px だけ外へ出す（30px だと左右 10px ずつ切れる） */
@media (min-width:681px) and (max-width:1039px){
 body.hkdb-et .hkdb .hket-rep{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
 body.hkdb-et .hkdb .hket-tabs{margin-left:-20px;margin-right:-20px}
 body.hkdb-et .hkdb .hket-tabs__l{padding:0 10px}
}

/* ── スマホ（器の切り替え 680px にそろえる） ── */
@media (max-width:680px){
 body.hkdb-et .hkdb .hkdb-hero{margin-top:18px}
 body.hkdb-et .hkdb .hkdb-hero__title{font-size:22px}
 body.hkdb-et .hkdb .hket-info{grid-template-columns:minmax(0,1fr);margin-top:10px;gap:8px}
 body.hkdb-et .hkdb .hket-tabs{margin:24px -20px 0;-webkit-overflow-scrolling:touch}
 body.hkdb-et .hkdb .hket-tabs__l{padding:0 8px}
 body.hkdb-et .hkdb .hket-tab,body.hkdb-et .hkdb-wrap .hkdb .hket-tab{padding:17px 16px}
 body.hkdb-et .hkdb .hket-tab.is-on::after{left:13px;right:13px}
 body.hkdb-et .hkdb .hkdb-sec .hkdb-fig>div:nth-child(4n+3){background:var(--hk-surface)}
 body.hkdb-et .hkdb .hket-rep{margin:4px -20px 0;padding:40px 20px}
 body.hkdb-et .hkdb .hket-rep__in{flex-direction:column;align-items:stretch;gap:26px}
 body.hkdb-et .hkdb .hket-rep__card{display:contents}
 body.hkdb-et .hkdb .hket-rep__h{order:-1;align-self:center;margin:0;padding:14px 28px;border-radius:20px;background:#fff}
 body.hkdb-et .hkdb .hket-rep__vis{order:0;flex:none}
 body.hkdb-et .hkdb .hket-rep__body{order:1;background:#fff;border-radius:10px;padding:20px}
 body.hkdb-et .hkdb .hket-rep__lead{line-height:2}
 body.hkdb-et .hkdb .hket-stamp{width:200px;height:200px}
 body.hkdb-et .hkdb .hkdb-sec{margin-top:60px}
 body.hkdb-et--event .hkdb .hkdb-sec__t.zk2-h{margin-bottom:26px;padding-bottom:18px}
 body.hkdb-et--spot .hkdb .hkdb-sec__t.zk2-h{margin:0 -20px 26px;padding:12px 20px 22px}
 body.hkdb-et .hkdb .hkdb-sec .hkdb-row dt{flex-basis:88px;font-size:13px}
 body.hkdb-et .hkdb .hket-tbl dt{flex-basis:104px;padding:13px 10px 13px 0;font-size:13px;word-break:auto-phrase}
 body.hkdb-et .hkdb .hket-rep__card .hkdb-kpis,body.hkdb-et .hkdb .hket-rep__card .hkdb-kpis:has(>.hkdb-kpi:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
 body.hkdb-et .hkdb .hket-rep__card .hkdb-kpi:last-child:nth-child(odd){grid-column:1 / -1}
 body.hkdb-et .hkdb .hket-tbl dd{padding:13px 0;font-size:14px}
 body.hkdb-et .hkdb .hket-band{margin-top:72px;padding:56px 0 64px}
 body.hkdb-et .hkdb .hket-cards{grid-template-columns:minmax(0,1fr);gap:32px}
 body.hkdb-et .hket-fix__t{padding:13px 16px 15px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
 body.hkdb-et .hket-fix,body.hkdb-et .hket-fix.is-on{transition:none}
}
