/* エンジョイ東京型（DB の一覧 /event-db/ /michinoeki/ /sapa/）2026-10-02 ④。inc/hk-db-etd.php が描く一覧ページだけで読む（body.hkdb-etd）。
   寸法と並びは見本（enjoytokyo.jp の /event/list/ と /theme/area1316/ を 2026-10-02 21:30 に実測）から。色・書体・券と判子の飾りは案2のまま。
   個別ページ（①の db-et.css・body.hkdb-et）と同じ部品はそちらの値を写した（①の CSS は body.hkdb-et の下なので一覧には効かない）。
   見本から変えた所：英字の見出しは付けない／影と細い線は使わない（面と余白で分ける）／ボタンと札は案2の券の形（左右の切り欠き）／シェアは出さない。
   イベント＝body.hkdb-etd--event（カード PC 3列・章の見出しは字の下に2色の帯）／道の駅・SA/PA＝body.hkdb-etd--spot（カード PC 2列・章の見出しは色の帯）
   JS が動くと html に etd-js、動いてよいときは etd-m が付く（inc の頭の印）。JS が無ければ畳まず、検索の行もそのまま見せる */
body.hkdb-etd .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;--et-blue:#2b66cc;
 --etd-pin:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232b66cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s-6.8-6-6.8-11.3a6.8 6.8 0 0 1 13.6 0c0 5.3-6.8 11.3-6.8 11.3z'/%3E%3Ccircle cx='12' cy='9.8' r='2.5'/%3E%3C/svg%3E");
 --etd-cal:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232b66cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5' width='16.8' height='15.6' rx='2.2'/%3E%3Cpath d='M3.6 10h16.8M8.6 2.8v4.2M15.4 2.8v4.2'/%3E%3C/svg%3E");
 --etd-road:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232b66cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 3.5 4.5 20.5M15.5 3.5l4 17M12 4.5v2.6M12 10.7v2.6M12 16.9v2.6'/%3E%3C/svg%3E");
 --etd-q:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232b66cc' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.6 15.6L21 21'/%3E%3C/svg%3E");
 --etd-caret:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234f5f6e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
 --etd-cut:radial-gradient(circle at 0 50%,var(--etd-cbg,#fff) 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,var(--etd-cbg,#fff) 5px,#0000 5.5px)}

/* ── 頭：題（大）だけ。案2の券の面・頭の駅スタンプ・題の下のミシン目は付けない（①と同じ） ── */
body.hkdb-etd .hkdb .hkdb-hero{background:none;border-radius:0;padding:0;margin:26px 0 0;overflow:visible}
body.hkdb-etd .hkdb .hkdb-hero::before,body.hkdb-etd .hkdb .zkb-hero .hkdb-hero__title::after{content:none;display:none}
body.hkdb-etd .hkdb .zkb-hero .zkb-stamp{display:none}
body.hkdb-etd .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}

/* ── 検索の行（search）：PC は横1列。選ぶ欄と検索欄の箱 48px・地は案2の面・左に絵・ラベルは箱の上に小さく ── */
body.hkdb-etd .hkdb .hketd-open{display:none;margin:0}
body.hkdb-etd .hkdb .hketd-find{margin:48px 0 0}
body.hkdb-etd .hkdb .hketd-find__hd,body.hkdb-etd .hkdb .hketd-find__ft{display:none}
body.hkdb-etd .hkdb .hketd-find__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:end}
body.hkdb-etd .hkdb .hketd-find__row:has(>.hkdb-filters>.hkdb-frow:nth-child(2)){grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
body.hkdb-etd .hkdb .hketd-find .hkdb-filters{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;background:none;border-radius:0;padding:0;margin:0}
body.hkdb-etd .hkdb .hketd-find .hkdb-frow{margin:0;min-width:0}
body.hkdb-etd .hkdb .hketd-find .hkdb-search{max-width:none;min-width:0;margin:0}
body.hkdb-etd .hkdb .hketd-find .hkdb-label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:700;line-height:1.5;color:var(--et-sub)}
body.hkdb-etd .hkdb .hketd-find .hkdb-select,body.hkdb-etd .hkdb .hketd-find .hkdb-search__in{display:block;width:100%;max-width:none;height:48px;margin:0;padding:0 40px 0 44px;border:0;border-radius:4px;
 font-size:16px;font-weight:700;line-height:48px;color:var(--et-ink);-webkit-appearance:none;appearance:none;transition:background-color .3s;
 background:var(--etd-pin) no-repeat 14px 50%/20px 20px,var(--etd-caret) no-repeat calc(100% - 16px) 50%/14px 14px,var(--etd-cut),var(--hk-surface)}
body.hkdb-etd .hkdb .hketd-find .hkdb-select[data-hkdb-select="m"]{background-image:var(--etd-cal),var(--etd-caret),radial-gradient(circle at 0 50%,#fff 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,#fff 5px,#0000 5.5px)}
body.hkdb-etd .hkdb .hketd-find .hkdb-select[data-hkdb-select="road"]{background-image:var(--etd-road),var(--etd-caret),radial-gradient(circle at 0 50%,#fff 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,#fff 5px,#0000 5.5px)}
body.hkdb-etd .hkdb .hketd-find .hkdb-search__in{padding-right:14px;background:var(--etd-q) no-repeat 14px 50%/20px 20px,var(--etd-cut),var(--hk-surface)}
body.hkdb-etd .hkdb .hketd-find .hkdb-search__in::placeholder{font-weight:500;color:#6d7f90;opacity:1}
body.hkdb-etd .hkdb .hketd-find .hkdb-select:hover,body.hkdb-etd .hkdb .hketd-find .hkdb-search__in:hover{background-color:var(--hk-chip)}
body.hkdb-etd .hkdb .hketd-find .hkdb-select:focus,body.hkdb-etd .hkdb .hketd-find .hkdb-search__in:focus{outline:3px solid rgba(43,102,204,.38);outline-offset:2px;transform:none}

/* ── ページの中のタブ（theme-tab）：字だけ・今の場所に下線（案2の券の青緑のグラデーション）。①と同じく折り返さない1段。
      収まらない幅では横に送る。「このページの中」の字は読み上げのためだけに残して画面には出さない ── */
body.hkdb-etd .hkdb .hkdb-jump{display:flex;flex-wrap:nowrap;gap:0;align-items:stretch;margin:36px 0 0;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
body.hkdb-etd .hkdb .hkdb-jump::-webkit-scrollbar{display:none}
body.hkdb-etd .hkdb .hkdb-jump__lb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
body.hkdb-etd .hkdb .hkdb-jump a,body.hkdb-etd .hkdb-wrap .hkdb .hkdb-jump a{position:relative;flex:none;display:block;margin:0;padding:17px 9px;border-radius:0;background:none;font-size:15px;font-weight:800;line-height:16px;letter-spacing:.01em;color:#3d4b57;text-decoration:none;white-space:nowrap;transform:none;transition:color .3s}
body.hkdb-etd .hkdb .hkdb-jump a:hover,body.hkdb-etd .hkdb-wrap .hkdb .hkdb-jump a:hover{background:none;color:var(--et-blue);text-decoration:none;transform:none}
body.hkdb-etd .hkdb .hkdb-jump a.is-on::after,body.hkdb-etd .hkdb-wrap .hkdb .hkdb-jump a.is-on::after{content:"";display:block;position:absolute;left:6px;right:6px;bottom:5px;height:3px;border-radius:1.5px;background:var(--et-grad)}
/* 11本以上（道の駅11・SA/PA 12）は 1000px 以上で左右の余白を 9→7px に詰めて1段に収める（SA/PA は 980px を 22px 越えて「よくある質問」が切れて見えた）。
   字は 15px のまま。下線は字から 3px ずつ出す形を保つ。999px 以下は今まで通り横に送る */
@media (min-width:1000px){
 body.hkdb-etd .hkdb .hkdb-jump:has(>a:nth-of-type(11)) a,body.hkdb-etd .hkdb-wrap .hkdb .hkdb-jump:has(>a:nth-of-type(11)) a{padding-left:7px;padding-right:7px}
 body.hkdb-etd .hkdb .hkdb-jump:has(>a:nth-of-type(11)) a.is-on::after,body.hkdb-etd .hkdb-wrap .hkdb .hkdb-jump:has(>a:nth-of-type(11)) a.is-on::after{left:4px;right:4px}
}

/* ── まとめ（experience-section）：方眼の地・左に記念スタンプ・右に白い面（角は左下だけ四角）。①の hket-rep と同じ ── */
body.hkdb-etd .hkdb .hketd-rep{position:relative;margin:10px -30px 0;padding:40px 30px;scroll-margin-top:20px;
 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-etd .hkdb .hketd-rep__in{display:flex;gap:40px;align-items:stretch}
body.hkdb-etd .hkdb .hketd-rep__vis{flex:0 0 270px;display:flex;align-items:center;justify-content:center;min-width:0}
body.hkdb-etd .hkdb .hketd-rep__card{flex:1 1 auto;min-width:0;background:#fff;border-radius:64px 64px 64px 0;padding:40px 44px 34px;--zkb-bg:#fff}
body.hkdb-etd .hkdb .hketd-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-etd .hkdb .hketd-rep__h::before,body.hkdb-etd .hkdb .hketd-rep__h::after{content:"";display:block;flex:none;width:16px;height:2px;background:#a9bdd9}
body.hkdb-etd .hkdb .hketd-rep__body .hkdb-p{font-size:16px;line-height:1.85;color:#16232d;margin:0 0 16px}
body.hkdb-etd .hkdb .hketd-rep__body>:last-child{margin-bottom:0}
body.hkdb-etd .hkdb .hketd-rep__body .hkdb-h3{margin:22px 0 10px;font-size:15px;color:var(--et-ink)}
body.hkdb-etd .hkdb .hketd-rep__body .hkdb-own{background:none;padding:0;margin:0 0 6px}
body.hkdb-etd .hkdb .hketd-rep__body .hkdb-kpis{display:grid;gap:10px;margin:0;grid-template-columns:repeat(3,minmax(0,1fr))}
body.hkdb-etd .hkdb .hketd-rep__body .hkdb-kpi{background:var(--et-band);padding:12px 14px 10px}
body.hkdb-etd .hkdb .hketd-rep__body .hkdb-links{margin:0 0 16px;--zkb-bg:#fff}
body.hkdb-etd .hkdb .hketd-rep__body .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(--et-band)}
body.hkdb-etd .hkdb .hketd-rep__body .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-etd .hkdb .hketd-rep__body .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(--et-band)}
body.hkdb-etd .hkdb .hketd-rep__body .hkdb-links--chips li a:hover{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-chip)}
body.hkdb-etd .hkdb .hketd-rep__note{margin:18px 0 0;font-size:12px;line-height:1.75;color:#66727e}

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

/* ── 一覧（article-list）。切り替え → くわしい条件 → 件数のバー → カード ── */
body.hkdb-etd .hkdb .hketd-list{margin:64px 0 0;scroll-margin-top:16px}

/* 切り替え（switch）：真ん中に並べた券。触ると 0.3 秒で反転（青の地に白い字）。押しているものは反転のまま＋入鋏の穴 */
body.hkdb-etd .hkdb .hketd-sw .hkdb-filters{background:none;border-radius:0;padding:0;margin:0;--zkb-bg:#fff}
body.hkdb-etd .hkdb .hketd-sw .hkdb-frow{margin:0}
body.hkdb-etd .hkdb .hketd-sw .hkdb-label{margin:0 0 14px;text-align:center;font-size:13px;font-weight:700;color:var(--et-sub)}
body.hkdb-etd .hkdb .hketd-sw .hkdb-chips{justify-content:center;gap:14px 16px}
body.hkdb-etd .hkdb .hketd-sw .hkdb-chip,body.hkdb-etd .hkdb .hketd-acc .hkdb-chip{transition:background-color .3s,color .3s;transform:none;
 background-image:radial-gradient(circle at 0 50%,var(--zkb-bg) 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,var(--zkb-bg) 5px,#0000 5.5px);background-color:var(--hk-surface)}
body.hkdb-etd .hkdb .hketd-sw .hkdb-chip{display:inline-flex;align-items:center;justify-content:center;min-width:180px;min-height:44px;font-size:14px;font-weight:700;color:var(--et-ink)}
body.hkdb-etd .hkdb .hketd-acc .hkdb-chip{color:var(--et-ink);background-color:#fff}
body.hkdb-etd .hkdb .hketd-sw .hkdb-chip[aria-pressed="true"],body.hkdb-etd .hkdb .hketd-acc .hkdb-chip[aria-pressed="true"]{background-color:var(--hk-dark);color:#fff}
@media (hover:hover){
 body.hkdb-etd .hkdb .hketd-sw .hkdb-chip:hover,body.hkdb-etd .hkdb .hketd-acc .hkdb-chip:hover{background-color:var(--hk-dark);color:#fff;transform:none}
}

/* くわしい条件（accordion）：PC は開いたまま（見出しだけ）・スマホは畳んで＋／－（0.3 秒）。JS が無ければどちらも開いたまま */
body.hkdb-etd .hkdb .hketd-acc{margin:30px 0 0;border-radius:6px;background:var(--hk-surface);--zkb-bg:var(--hk-surface)}
body.hkdb-etd .hkdb .hketd-acc__b{position:relative;display:block;width:100%;margin:0;padding:22px 24px 14px;border:0;border-radius:6px;background:none;text-align:left;font-size:17px;font-weight:800;line-height:1.5;color:var(--et-ink);cursor:default}
body.hkdb-etd .hkdb .hketd-acc__b::before,body.hkdb-etd .hkdb .hketd-acc__b::after{content:none}
body.hkdb-etd .hkdb .hketd-acc__in{padding:0 24px 8px}
body.hkdb-etd .hkdb .hketd-acc .hkdb-filters{background:none;border-radius:0;padding:0;margin:0}
body.hkdb-etd .hkdb .hketd-acc .hkdb-frow{margin:0 0 16px}
body.hkdb-etd .hkdb .hketd-acc .hkdb-label{margin:0 0 8px}

/* 件数のバー（器のまま・貼り付くのはこの一覧の中だけ） */
body.hkdb-etd .hkdb .hketd-list .hkdb-bar{margin:30px 0 8px}

/* 群の見出し（案2の券の札＋件数）。見本の章の見出し 24px にそろえる */
body.hkdb-etd .hkdb .hketd-list .hkdb-grp{margin:0;scroll-margin-top:150px}
body.hkdb-etd .hkdb .hketd-list .hkdb-grp__t.zk2-h{margin:56px 0 24px;font-size:24px}
body.hkdb-etd .hkdb .hketd-list .hkdb-bar+.hkdb-listwrap>.hkdb-grp:first-child>.hkdb-grp__t.zk2-h{margin-top:36px}
/* 見出しの最後の1字だけが次の行へ落ちないように（スマホの「都道府県から道の駅を探／す」など）。行の長さをそろえ、Chrome は文節で折る。
   Safari は文節で折れないので行の長さをそろえるだけ。「ー」や小さい字は行の頭に置かない */
body.hkdb-etd .hkdb .hkdb-hero__title,body.hkdb-etd .hkdb .hkdb-grp__t,body.hkdb-etd .hkdb .hkdb-sec__t{text-wrap:balance;word-break:auto-phrase;line-break:strict}

/* カード（article-list_vertical / horizontal）。イベントは PC 3列・道の駅と SA/PA は PC 2列・スマホ1列。
   自動広告が格子に入ったら1行ぶん取る。名前の小さい字（場所・種類）は見本の「東京都 豊島区」の行と同じく名前の上へ */
body.hkdb-etd .hkdb .hketd-list .hkdb-cards{gap:24px}
body.hkdb-etd--event .hkdb .hketd-list .hkdb-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
body.hkdb-etd--spot .hkdb .hketd-list .hkdb-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
body.hkdb-etd .hkdb .hketd-list .hkdb-cards>:not(.hkdb-card){grid-column:1 / -1;min-width:0}
body.hkdb-etd .hkdb .hketd-list .hkdb-card{min-width:0;scroll-margin-top:150px}
body.hkdb-etd .hkdb .hketd-list .hkdb-card--row{grid-template-columns:auto minmax(0,1fr);align-content:start}
body.hkdb-etd .hkdb .hketd-list .hkdb-card--row>.hkdb-card__name{grid-column:2}
body.hkdb-etd .hkdb .hketd-list .hkdb-card__name{display:flex;flex-direction:column-reverse;justify-content:flex-end;font-size:17px;line-height:1.5;letter-spacing:.02em}
body.hkdb-etd .hkdb .hketd-list .hkdb-card__name small{margin:0 0 3px;font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.04em;color:var(--et-sub)}
body.hkdb-etd .hkdb .hketd-list .hkdb-card--row .hkdb-card__name{align-self:center;margin:0}
body.hkdb-etd .hkdb .hketd-list .hkdb-note{font-size:13px;line-height:1.75;letter-spacing:.04em;color:#3f566e}
/* 「〜を見る」：字が2行になっても矢印は字の右に置く（3列のカードで矢印だけ次の行へ落ちないように） */
body.hkdb-etd .hkdb .hketd-list .hkdb-more,body.hkdb-etd .hkdb-wrap .hkdb .hketd-list .hkdb-more{display:inline-flex;align-items:center;max-width:100%;font-size:13.5px;line-height:1.5}
body.hkdb-etd .hkdb .hketd-list .hkdb-more::after{flex:none}
/* イベント：PC と中くらいの幅は格子を1行ずつ（見本の情報の行と同じく、項目名を左・値を右）。3列のカードに4マスでは数字が折れる。スマホは器の2列のまま */
@media (min-width:681px){
 body.hkdb-etd--event .hkdb .hketd-list .hkdb-fig{grid-template-columns:minmax(0,1fr)}
 body.hkdb-etd--event .hkdb .hketd-list .hkdb-fig>div{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:7px 12px;background:var(--hk-paper)}
 body.hkdb-etd--event .hkdb .hketd-list .hkdb-fig>div:nth-child(even){background:var(--hk-sky)}
 body.hkdb-etd--event .hkdb .hketd-list .hkdb-fig dt{flex:none;margin:0}
 body.hkdb-etd--event .hkdb .hketd-list .hkdb-fig dd{min-width:0;text-align:right}
 body.hkdb-etd--event .hkdb .hketd-list .hkdb-fig dd:has(>.hkdb-cbar){flex:none;max-width:none;min-width:116px;padding:3px 12px;text-align:left;white-space:nowrap}
 body.hkdb-etd--event .hkdb .hketd-list .hkdb-fig .hkdb-big{font-size:20px}
}
/* 道の駅・SA/PA：左の印を大きい四角にして見本の写真の位置に置く */
body.hkdb-etd--spot .hkdb .hketd-list .hkdb-card--row{gap:0 16px}
body.hkdb-etd--spot .hkdb .hketd-list .hkdb-card--row>.hkdb-mark{width:96px;height:64px;border-radius:6px;font-size:16px;letter-spacing:.04em}
body.hkdb-etd--spot .hkdb .hketd-list .hkdb-card--row>.hkdb-mark[data-len="4"]{font-size:14px}
body.hkdb-etd--spot .hkdb .hketd-list .hkdb-card--row>.hkdb-mark[data-len="5"]{font-size:12.5px}
body.hkdb-etd--spot .hkdb .hketd-list .hkdb-card__name{font-size:18px}
body.hkdb-etd--spot .hkdb .hketd-list .hkdb-card .hkdb-card__name+.hkdb-badges{--zkb-pg:18px;margin-top:14px}

/* もっと見る（readmore-button）：真ん中の券 240×48。押すと次の24件がふわっと出る。絞り込み・検索のあいだは畳まない */
body.hkdb-etd .hkdb .hketd-rm{display:flex;justify-content:center;margin:28px 0 0}
body.hkdb-etd .hkdb .hketd-rm__b{display:inline-flex;align-items:baseline;justify-content:center;gap:10px;min-width:240px;min-height:48px;margin:0;padding:13px 30px;border:0;border-radius:6px;cursor:pointer;
 background-image:radial-gradient(circle at 0 50%,#fff 6px,#0000 6.5px),radial-gradient(circle at 100% 50%,#fff 6px,#0000 6.5px);background-color:var(--hk-surface);
 font-size:14px;font-weight:800;line-height:1.5;color:var(--et-ink);transition:background-color .3s,color .3s}
body.hkdb-etd .hkdb .hketd-rm__b small{font-size:12px;font-weight:700;color:var(--et-sub);transition:color .3s}
@media (hover:hover){
 body.hkdb-etd .hkdb .hketd-rm__b:hover{background-color:var(--hk-dark);color:#fff}
 body.hkdb-etd .hkdb .hketd-rm__b:hover small{color:#fff}
}
body.hkdb-etd .hkdb .hketd-rm__b:focus-visible{outline:3px solid rgba(43,102,204,.38);outline-offset:2px}
html.etd-js body.hkdb-etd .hkdb .hketd-list:not(.hketd-all) .hketd-x{display:none}
body.hkdb-etd .hkdb .hketd-all .hketd-rm,body.hkdb-etd .hkdb .hketd-grp-all .hketd-rm{display:none}
html:not(.etd-js) body.hkdb-etd .hkdb .hketd-rm{display:none}
html.etd-m body.hkdb-etd .hkdb .hkdb-card.hketd-in{animation:hketd-fade .3s ease both}
@keyframes hketd-fade{from{opacity:0}to{opacity:1}}

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

/* イベント：見出しの字の下に太い2色の帯（wysiwyg-teble-title。青緑の90px＋薄い水色の地 388px・8px） */
body.hkdb-etd--event .hkdb .hkdb-sec__t.zk2-h{margin:0 0 34px;padding:0 0 22px}
body.hkdb-etd--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-etd--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）。帯の下のほうに白いミシン目 */
body.hkdb-etd--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-etd--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-etd--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-etd--spot .hkdb .hkdb-sec__t.zk2-h .zk2-ht{--zk2-hbg:#2b66cc}

/* 章の中の部品を白の地に合わせる（①と同じ） */
body.hkdb-etd .hkdb .hkdb-sec .hkdb-rows{background:var(--et-paper);border-radius:12px;padding:14px 16px;margin:0 0 18px}
body.hkdb-etd .hkdb .hkdb-sec .hkdb-quote{background:var(--et-paper);border-radius:12px;padding:14px 16px}
body.hkdb-etd .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-etd .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-etd .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-etd .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-etd .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-etd .hkdb .hkdb-sec .hkdb-own:not(.hkdb-own--wide){background:var(--et-paper);--zkb-bg:var(--et-paper)}
body.hkdb-etd .hkdb .hkdb-faq .hkdb-qa{background:var(--et-paper);border-radius:14px}
body.hkdb-etd .hkdb .hkdb-sec .hkdb-fig,body.hkdb-etd .hkdb .hkdb-sec .hkdb-fig>div{background:var(--et-paper)}
body.hkdb-etd .hkdb .hkdb-sec .hkdb-fig>div:nth-child(even){background:var(--hk-sky)}

/* 長いリンクの並び（47県・81路線＝13件以上）は見本の keyword-link（白いピル 14px 太字）を券の形で。触ると 0.3 秒で反転 */
body.hkdb-etd .hkdb .hkdb-sec .hkdb-links--grid:has(>li:nth-child(13)){display:flex;flex-wrap:wrap;gap:10px 8px}
body.hkdb-etd .hkdb .hkdb-sec .hkdb-links--grid:has(>li:nth-child(13)) li a{display:inline-flex;align-items:baseline;gap:6px;min-height:40px;padding:8px 16px 8px 17px;border-radius:5px;transition:background-color .3s,color .3s;
 background:radial-gradient(circle at 0 50%,#fff 4px,#0000 4.5px),radial-gradient(circle at 100% 50%,#fff 4px,#0000 4.5px);background-color:var(--hk-surface)}
body.hkdb-etd .hkdb .hkdb-sec .hkdb-links--grid:has(>li:nth-child(13)) li a b{display:inline;font-size:14px;line-height:1.5;transition:color .3s}
body.hkdb-etd .hkdb .hkdb-sec .hkdb-links--grid:has(>li:nth-child(13)) li a span{display:inline;margin:0;font-size:12px;line-height:1.5;transition:color .3s}
@media (hover:hover){
 body.hkdb-etd .hkdb .hkdb-sec .hkdb-links--grid:has(>li:nth-child(13)) li a:hover{background:radial-gradient(circle at 0 50%,#fff 4px,#0000 4.5px),radial-gradient(circle at 100% 50%,#fff 4px,#0000 4.5px);background-color:var(--hk-dark);transform:none}
 body.hkdb-etd .hkdb .hkdb-sec .hkdb-links--grid:has(>li:nth-child(13)) li a:hover b,body.hkdb-etd .hkdb .hkdb-sec .hkdb-links--grid:has(>li:nth-child(13)) li a:hover span{color:#fff}
}

/* 出どころに説明の行があるとき、行頭の「・」だけが1行目に浮く（器の元からある崩れ。①と同じく新しい型の中だけで直す） */
body.hkdb-etd .hkdb .hkdb-src__list li:has(>.hkdb-src__n){position:relative}
body.hkdb-etd .hkdb .hkdb-src__list li:has(>.hkdb-src__n)::before{position:absolute;left:0;top:0;text-indent:0}

/* 画面に入ると 0.8 秒でふわっと出る（見本の .invisible→.visible）。最初の画面に入っているものと広告は隠さない。JS が無ければ最初から見える */
html.etd-io body.hkdb-etd .hkdb>.hkdb-sec:not(.hkdb-affil),html.etd-io body.hkdb-etd .hkdb>.hketd-rep,html.etd-io body.hkdb-etd .hkdb .hketd-list .hkdb-grp{transition:opacity .8s ease .1s}
html.etd-io body.hkdb-etd .hkdb>.hkdb-sec:not(.hkdb-affil):not(.etd-in),html.etd-io body.hkdb-etd .hkdb>.hketd-rep:not(.etd-in),html.etd-io body.hkdb-etd .hkdb .hketd-list .hkdb-grp:not(.etd-in){opacity:0}

/* 681〜1039px は外側の余白が 20px なので、方眼の面も 20px だけ外へ出す（①と同じ） */
@media (min-width:681px) and (max-width:1039px){
 body.hkdb-etd .hkdb .hketd-rep{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
 body.hkdb-etd .hkdb .hkdb-jump{margin-left:-20px;margin-right:-20px;padding:0 10px}
}
/* イベントのカードは 999px 以下で2列 */
@media (min-width:681px) and (max-width:999px){
 body.hkdb-etd--event .hkdb .hketd-list .hkdb-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.hkdb-etd .hkdb .hketd-rep__vis{flex-basis:220px}
 body.hkdb-etd .hkdb .hketd-stamp{width:200px;height:200px}
}

/* ── スマホ（器の切り替え 680px にそろえる） ── */
@media (max-width:680px){
 body.hkdb-etd .hkdb .hkdb-hero{margin-top:18px}
 body.hkdb-etd .hkdb .hkdb-hero__title{font-size:22px}
 body.hkdb-etd .hkdb .hketd-find{margin-top:26px}
 body.hkdb-etd .hkdb .hketd-find__row,body.hkdb-etd .hkdb .hketd-find__row:has(>.hkdb-filters>.hkdb-frow:nth-child(2)){grid-template-columns:minmax(0,1fr);gap:16px}
 body.hkdb-etd .hkdb .hketd-find .hkdb-filters{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);gap:16px}

 /* 「条件で絞り込む」（search-button 240×48）から右から出る面（.search が translateX で 0.3 秒）。JS が無ければ出さず、行をそのまま見せる */
 html.etd-js body.hkdb-etd .hkdb .hketd-open{display:flex;justify-content:center;margin:24px 0 0}
 body.hkdb-etd .hkdb .hketd-open__b{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:240px;min-height:48px;margin:0;padding:0 30px;border:0;border-radius:6px;cursor:pointer;
  background:var(--etd-q) no-repeat 22px 50%/20px 20px,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);
  padding-left:52px;font-size:15px;font-weight:800;line-height:1.4;color:var(--et-ink)}
 body.hkdb-etd .hkdb .hketd-open__b[data-n]::after{content:attr(data-n);display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--hk-dark);color:#fff;font-size:12px;font-weight:800;line-height:1}
 html.etd-js body.hkdb-etd .hkdb .hketd-find{position:fixed;left:0;top:0;right:0;bottom:0;z-index:1001;margin:0;display:flex;flex-direction:column;background:#f3f7fc;
  transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
 html.etd-js body.hkdb-etd .hkdb .hketd-find.is-open{transform:none;visibility:visible;transition:transform .3s ease}
 html.etd-js body.hkdb-etd .hkdb .hketd-find__hd{display:flex;flex:none;align-items:center;gap:6px;min-height:56px;padding:6px 8px;background:#fff}
 html.etd-js body.hkdb-etd .hkdb .hketd-find__x{display:inline-flex;align-items:center;gap:4px;min-width:44px;min-height:44px;margin:0;padding:0 12px 0 8px;border:0;border-radius:6px;background:none;font-size:14px;font-weight:700;color:var(--et-blue);cursor:pointer}
 html.etd-js body.hkdb-etd .hkdb .hketd-find__x::before{content:"";display:block;width:9px;height:9px;border-left:2.4px solid currentColor;border-bottom:2.4px solid currentColor;transform:rotate(45deg);margin-right:2px}
 html.etd-js body.hkdb-etd .hkdb .hketd-find__t{flex:1 1 auto;margin:0;padding-right:58px;text-align:center;font-size:16px;font-weight:800;color:var(--et-ink)}
 html.etd-js body.hkdb-etd .hkdb .hketd-find__row{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;align-content:start;padding:24px 16px 28px}
 html.etd-js body.hkdb-etd .hkdb .hketd-find .hkdb-select,html.etd-js body.hkdb-etd .hkdb .hketd-find .hkdb-search__in{--etd-cbg:#f3f7fc;
  background-image:var(--etd-pin),var(--etd-caret),radial-gradient(circle at 0 50%,#f3f7fc 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,#f3f7fc 5px,#0000 5.5px);background-color:#fff}
 html.etd-js body.hkdb-etd .hkdb .hketd-find .hkdb-select[data-hkdb-select="m"]{background-image:var(--etd-cal),var(--etd-caret),radial-gradient(circle at 0 50%,#f3f7fc 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,#f3f7fc 5px,#0000 5.5px)}
 html.etd-js body.hkdb-etd .hkdb .hketd-find .hkdb-select[data-hkdb-select="road"]{background-image:var(--etd-road),var(--etd-caret),radial-gradient(circle at 0 50%,#f3f7fc 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,#f3f7fc 5px,#0000 5.5px)}
 html.etd-js body.hkdb-etd .hkdb .hketd-find .hkdb-search__in{background-image:var(--etd-q),radial-gradient(circle at 0 50%,#f3f7fc 5px,#0000 5.5px),radial-gradient(circle at 100% 50%,#f3f7fc 5px,#0000 5.5px)}
 html.etd-js body.hkdb-etd .hkdb .hketd-find__ft{display:block;flex:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#fff}
 html.etd-js body.hkdb-etd .hkdb .hketd-find__go{display:block;width:100%;min-height:50px;margin:0;padding:0 20px;border:0;border-radius:6px;cursor:pointer;
  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-dark);font-size:16px;font-weight:800;line-height:50px;color:#fff}
 html.etd-lock,html.etd-lock body{overflow:hidden}

 body.hkdb-etd .hkdb .hkdb-jump{margin:26px -20px 0;padding:0 8px}
 body.hkdb-etd .hkdb .hkdb-jump a,body.hkdb-etd .hkdb-wrap .hkdb .hkdb-jump a{padding:17px 14px;font-size:15px}
 body.hkdb-etd .hkdb .hkdb-jump a.is-on::after,body.hkdb-etd .hkdb-wrap .hkdb .hkdb-jump a.is-on::after{left:11px;right:11px}

 body.hkdb-etd .hkdb .hketd-rep{margin:6px -20px 0;padding:40px 20px}
 body.hkdb-etd .hkdb .hketd-rep__in{flex-direction:column;align-items:stretch;gap:24px}
 body.hkdb-etd .hkdb .hketd-rep__card{display:contents}
 body.hkdb-etd .hkdb .hketd-rep__h{order:-1;align-self:center;margin:0;padding:14px 28px;border-radius:20px;background:#fff}
 body.hkdb-etd .hkdb .hketd-rep__vis{order:0;flex:none}
 body.hkdb-etd .hkdb .hketd-rep__body{order:1;background:#fff;border-radius:10px;padding:20px 18px}
 body.hkdb-etd .hkdb .hketd-rep__body .hkdb-p{line-height:2}
 body.hkdb-etd .hkdb .hketd-rep__body .hkdb-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.hkdb-etd .hkdb .hketd-rep__body .hkdb-kpi:last-child:nth-child(odd){grid-column:1 / -1}
 body.hkdb-etd .hkdb .hketd-stamp{width:190px;height:190px}

 body.hkdb-etd .hkdb .hketd-list{margin-top:48px}
 body.hkdb-etd .hkdb .hketd-sw .hkdb-chips{gap:10px 8px}
 body.hkdb-etd .hkdb .hketd-sw .hkdb-chip{min-width:0;flex:1 1 calc(50% - 4px);padding-left:24px;padding-right:12px;font-size:13px;line-height:1.35;white-space:normal}
 body.hkdb-etd--event .hkdb .hketd-sw .hkdb-chip{flex-basis:calc(33.333% - 6px)}
 body.hkdb-etd .hkdb .hketd-acc{margin-top:24px}
 html.etd-js body.hkdb-etd .hkdb .hketd-acc__b{padding:16px 52px 16px 20px;font-size:16px;cursor:pointer}
 html.etd-js body.hkdb-etd .hkdb .hketd-acc__b::before,html.etd-js body.hkdb-etd .hkdb .hketd-acc__b::after{content:"";position:absolute;right:22px;top:50%;width:13px;height:2.4px;margin-top:-1.2px;border-radius:1.2px;background:var(--et-blue)}
 html.etd-js body.hkdb-etd .hkdb .hketd-acc__b::after{transform:rotate(90deg);transition:transform .3s}
 html.etd-js body.hkdb-etd .hkdb .hketd-acc.is-open .hketd-acc__b::after{transform:rotate(0deg)}
 html.etd-js body.hkdb-etd .hkdb .hketd-acc:not(.is-open):not(.is-moving) .hketd-acc__in{display:none}
 body.hkdb-etd .hkdb .hketd-acc__in{padding:0 16px 4px}
 html.etd-js body.hkdb-etd .hkdb .hketd-acc.is-moving .hketd-acc__in{overflow:hidden;transition:height .3s ease}

 body.hkdb-etd .hkdb .hketd-list .hkdb-grp__t.zk2-h{margin:44px 0 18px;font-size:20px}
 body.hkdb-etd .hkdb .hketd-list .hkdb-bar+.hkdb-listwrap>.hkdb-grp:first-child>.hkdb-grp__t.zk2-h{margin-top:28px}
 body.hkdb-etd--event .hkdb .hketd-list .hkdb-cards,body.hkdb-etd--spot .hkdb .hketd-list .hkdb-cards{grid-template-columns:minmax(0,1fr);gap:14px}
 body.hkdb-etd--spot .hkdb .hketd-list .hkdb-card--row{gap:0 12px}
 body.hkdb-etd--spot .hkdb .hketd-list .hkdb-card--row>.hkdb-mark{width:72px;height:52px;font-size:14px}
 body.hkdb-etd--spot .hkdb .hketd-list .hkdb-card--row>.hkdb-mark[data-len="4"]{font-size:12px}
 body.hkdb-etd--spot .hkdb .hketd-list .hkdb-card--row>.hkdb-mark[data-len="5"]{font-size:11px}
 /* 格子のマスが奇数（SA/PA の「大型・普通・二輪」の3マス）だと、2列で空いた最後のマスに格子の白い地が出て空の四角に見えた。空いた所はカードの地のままにする。
    3マス目を横いっぱいに広げると棒の物差しが倍の長さになり、上の2マスと比べられなくなるので広げない */
 body.hkdb-etd .hkdb .hketd-list .hkdb-fig:has(>div:last-child:nth-child(odd)){background:none}
 body.hkdb-etd .hkdb .hketd-list .hkdb-card{scroll-margin-top:146px}
 body.hkdb-etd .hkdb .hketd-rm__b{min-width:min(100%,280px)}

 body.hkdb-etd .hkdb .hkdb-sec{margin-top:64px}
 body.hkdb-etd--event .hkdb .hkdb-sec__t.zk2-h{margin-bottom:26px;padding-bottom:18px}
 body.hkdb-etd--spot .hkdb .hkdb-sec__t.zk2-h{margin:0 -20px 26px;padding:12px 20px 22px}
 body.hkdb-etd .hkdb .hkdb-sec .hkdb-fig>div:nth-child(4n+3){background:var(--hk-surface)}
 body.hkdb-etd .hkdb .hkdb-sec .hkdb-links--grid:has(>li:nth-child(13)) li a{padding:8px 13px 8px 14px}
}
@media (prefers-reduced-motion:reduce){
 html.etd-js body.hkdb-etd .hkdb .hketd-find,html.etd-js body.hkdb-etd .hkdb .hketd-find.is-open{transition:none}
 body.hkdb-etd .hkdb .hketd-sw .hkdb-chip,body.hkdb-etd .hkdb .hketd-acc .hkdb-chip,body.hkdb-etd .hkdb .hketd-rm__b{transition:none}
}