/* 今日どこいく？ トップ「おすすめの記事とイベント」エンジョイ東京型  kami-top4-et.css   2026-10-01
   読むのはトップだけ（kami/top4et.php が kami-top4.css の後ろに置く）。中身の HTML も top4et.php。
   見本は https://www.enjoytokyo.jp/ のトップ。寸法・角丸・余白・動きは実サイトの common.css と script.js の実測値（作業フォルダ ref/）。
   色と書体は今のトップのまま（青 #2b66cc・水色との2色グラデーション・游ゴシック）。
   このサイトの決まりで見本から変えたところ
     ・英字の見出しと右へ伸びる点線は付けない（日本語の見出しだけ・左の縦棒は残す）
     ・1pxの線（日付の上下・カードの点線・札の枠・写真の枠・ボタンの枠）は面か2pxに置き換える。点々の地は敷かない
     ・記事の写真は16:9のアイキャッチを切らない（見本は3:2）。押せる所は44px以上
   ★見出しが細く見えていた原因（2026-10-01）
     書体の並びに「游ゴシック Medium / Yu Gothic Medium」が入っていると、その名前の書体には太字の面が無いので
     font-weight:700 でも Medium のまま描かれる（Windows と、Windows の游ゴシックを入れた Mac）。
     見出しと太字の所だけ、Medium の名前を外した並び（--z5-bold）にして太字の面を使わせる */

.zm-zp4.z5{--z5-blue:#2b66cc;--z5-blue-d:#1d4fa6;--z5-grad:linear-gradient(to bottom right,#2d69d0,#2bcccc);--z5-gray:#f4f4f4;--z5-pale:#f0f7ff;--z5-pale2:#e8f0fb;--z5-ink:#111;--z5-sub:#555;
 --z5-bold:"游ゴシック体",YuGothic,"游ゴシック","Yu Gothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif}

/* 0. トップ全体の見出しを太字に（注目のイベント・早見表・比較表・エリアから道の駅を探す・季節と時期の記事・一覧から探す・よくある質問も） */
.zm-zp4.z5 :is(h2,h3){font-family:var(--z5-bold);font-weight:700}
/* お知らせの帯を外したので、注目のイベントの上に余白を足す（ナビのすぐ下に見出しが詰まらないように） */
.zm-zp4.z5 .z4-pick{padding-top:40px}

/* 1. 共通の部品 ───────────────────────────── */
/* 見出し（見本 c-section-title--left：左に幅6pxの縦棒・字の左20px。英字の代わりに日本語を英字の大きさ32px（SP 24px）で） */
.zm-zp4 .z5-ttl{position:relative;padding-left:20px;margin-bottom:48px;font-size:32px;line-height:1.35;letter-spacing:.04em;color:var(--z5-ink)}
.zm-zp4 .z5-ttl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(to bottom,#2d69d0,#2bcccc)}
.zm-zp4 .z5-ttl--w{color:#fff}
.zm-zp4 .z5-ttl--w::before{background:#fff}
/* 真ん中の見出し（見本 c-section-title--center。左右の棒は線になるので、同じ太さ6px・幅60pxの帯を字の下へ） */
.zm-zp4 .z5-ttl--c{padding-left:0;text-align:center;margin-bottom:56px}
.zm-zp4 .z5-ttl--c::before{left:50%;top:auto;bottom:-16px;width:60px;height:6px;transform:translateX(-50%);background:linear-gradient(to right,#2d69d0,#2bcccc)}
/* 斜めの棒の見出し（見本 c-section-title--slash：幅3pxの棒を25度ずつ傾けて字の左右に） */
.zm-zp4 .z5-slash{display:flex;justify-content:center;align-items:stretch;gap:14px;margin-bottom:36px;font-size:28px;line-height:1.5;letter-spacing:.04em;text-align:center;color:var(--z5-ink)}
.zm-zp4 .z5-slash::before,.zm-zp4 .z5-slash::after{content:"";display:block;flex:none;width:3px;background:var(--z5-blue);transform-origin:bottom center}
.zm-zp4 .z5-slash::before{transform:rotate(-25deg)}
.zm-zp4 .z5-slash::after{transform:rotate(25deg)}

/* 丸いボタン（見本 c-btn：幅400・高さ53・丸19の中に矢印・触ると矢印が3px右へ） */
.zm-zp4 .z5-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;width:100%;max-width:400px;min-height:53px;padding:14px 28px 14px 36px;border-radius:999px;
 font-family:var(--z5-bold);font-size:16px;font-weight:700;line-height:1.5;letter-spacing:2px;transition:all .3s}
.zm-zp4 .z5-btn--w{background:#fff;color:var(--z5-blue)}
.zm-zp4 .z5-btn--o{background:#fff;color:var(--z5-blue);box-shadow:inset 0 0 0 2px var(--z5-blue)}
.zm-zp4 .z5-btn__l{white-space:nowrap}
.zm-zp4 .z5-btn__i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--z5-blue);color:#fff;transition:all .3s}
.zm-zp4 .z5-btn__svg{width:11px;height:11px;stroke-width:2.6}
.zm-zp4 .z5-btn:hover .z5-btn__i,.zm-zp4 .z5-btn:focus-visible .z5-btn__i{transform:translateX(3px)}

/* 文字のリンク（見本 p-top__videos-more-link：13px太字・色字・触ると不透明度.88） */
.zm-zp4 .z5-tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--z5-blue);font-family:var(--z5-bold);font-size:14px;font-weight:700;transition:all .3s}
.zm-zp4 .z5-tlink:hover{opacity:.7}

/* 札（見本は枠線の丸い札 → 面の札） */
.zm-zp4 .z5-tag{display:inline-block;background:var(--z5-pale2);color:var(--z5-blue);border-radius:999px;font-family:var(--z5-bold);font-size:12px;font-weight:700;line-height:1.5;padding:1px 10px;letter-spacing:.04em}
/* 今日公開（見本 c-badge--today：角の1つだけ尖った札＋下に小さな折り返し。左端に付ける） */
.zm-zp4 .z5-today{position:absolute;left:0;top:10px;z-index:1;background:var(--z5-blue);color:#fff;border-radius:4px 4px 4px 0;font-family:var(--z5-bold);font-size:14px;font-weight:700;line-height:1;padding:4px 5px}
.zm-zp4 .z5-today::after{content:"";position:absolute;left:0;top:100%;width:5px;height:6px;background:var(--z5-blue-d);clip-path:polygon(0 0,100% 0,0 100%)}
/* 順位（今の札の青。1pxの縁は付けない） */
.zm-zp4 .z5-rank{position:absolute;left:8px;top:8px;z-index:1;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--z5-blue);color:#fff;font-family:var(--z5-bold);font-size:17px;font-weight:700;line-height:1;box-shadow:0 2px 6px rgba(19,30,51,.25)}
.zm-zp4 .z5-rank--l{left:14px;top:14px;width:48px;height:48px;font-size:24px}
/* あと◯日（今の注目のイベントの札と同じ形） */
.zm-zp4 .z5-left{position:absolute;left:16px;top:16px;z-index:2;background:var(--z5-blue);color:#fff;border-radius:5px;font-family:var(--z5-bold);font-size:16px;font-weight:700;line-height:1.5;padding:5px 14px}

/* 写真（全部 object-fit:cover・触ると1.06倍に寄る＝見本の .3s） */
.zm-zp4 :is(.z5-ev__img,.z5-tc__img,.z5-vc__img,.z5-nc__img,.z5-pr__img,.z5-pop__mimg,.z5-fc__img) img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .3s;-webkit-user-drag:none}

/* 2. 日程が決まっているイベント（見本 p-top__events） ───────── */
.zm-zp4 .z5-ev{padding-top:80px}
.zm-zp4 .z5-ev__main{display:flex;align-items:stretch}
.zm-zp4 .z5-ev__card{position:relative;z-index:1;box-sizing:border-box;width:calc(45% + 48px);padding:3% calc(48px + 2%) 3% 3%;background:var(--z5-blue);color:#fff;display:flex;flex-direction:column;gap:24px}
.zm-zp4 .z5-ev__tag{align-self:flex-start;background:#fff;color:var(--z5-blue);border-radius:999px;font-family:var(--z5-bold);font-size:13px;font-weight:700;line-height:1.5;padding:2px 12px;margin-bottom:-10px}
.zm-zp4 .z5-ev__name{font-size:22px;line-height:1.4;color:#fff}
.zm-zp4 .z5-ev__lead{font-size:14px;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.zm-zp4 .z5-ev__meta{display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.5}
.zm-zp4 .z5-ev__mi{display:flex;align-items:center;gap:8px}
.zm-zp4 .z5-ev__ic{width:17px;height:17px;flex:none;stroke-width:1.9}
.zm-zp4 .z5-ev__cta{display:flex;justify-content:center;margin-top:auto;padding-top:8px}
.zm-zp4 .z5-ev__img{position:relative;z-index:2;display:block;width:55%;margin-left:-48px;transform:translateY(40px);aspect-ratio:3/2;border-radius:0 30px;overflow:hidden;background:#d9e6f5}
.zm-zp4 .z5-ev__img::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,0);transition:all .3s;pointer-events:none}
.zm-zp4 .z5-ev__img:hover img{transform:scale(1.06)}
.zm-zp4 .z5-ev__img:hover::after{background:rgba(0,0,0,.06)}

/* 開催月・種類で探す（見本 p-top__events-search：幅460の灰色の箱2つ・間40・見出しに蛍光ペンの下線と吹き出しの尾） */
.zm-zp4 .z5-find{display:flex;justify-content:center;gap:40px;margin-top:80px}
.zm-zp4 .z5-find__box{flex:1 1 0;max-width:460px;box-sizing:border-box;background:var(--z5-gray);padding:24px 20px;text-align:center}
.zm-zp4 .z5-find__h{position:relative;display:inline-block;margin-bottom:32px;padding:0 4px;font-size:18px;line-height:1.4;color:var(--z5-ink);background:linear-gradient(to top,#b9dcf5 40%,transparent 40%)}
.zm-zp4 .z5-find__h::after{content:"";position:absolute;left:50%;bottom:-9px;width:16px;height:10px;transform:translateX(-50%);background:#b9dcf5;clip-path:polygon(0 100%,30% 0,100% 0)}
.zm-zp4 .z5-find__list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
/* 札（見本 c-chip：白・丸・幅110・高さ32・触ると色の面に白字。1pxの枠は付けない。押せる所は上下に6pxずつ広げて44px） */
.zm-zp4 .z5-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:110px;min-height:32px;padding:6px 18px;border-radius:999px;background:#fff;color:var(--z5-ink);font-size:14px;font-weight:500;line-height:1.4;transition:all .3s}
.zm-zp4 .z5-chip::before{content:"";position:absolute;inset:-6px 0}
.zm-zp4 .z5-chip:hover,.zm-zp4 .z5-chip:focus-visible{background:var(--z5-blue);color:#fff}
/* 札から飛んだ先（一覧から探すのまとまり）を少しのあいだ色付けする */
.zm-zp4 .z4-acc__grp{scroll-margin-top:24px}
.zm-zp4 .z4-acc__grp.z5-hit{animation:z5-hit 2.6s ease}
@keyframes z5-hit{0%,60%{background:#fff3c4}100%{background:transparent}}

/* 3. 開催が近い順（見本 p-top__open：灰色の帯・止まらず流れるカード・下に点） ───────── */
.zm-zp4 .z5-tick{margin-top:80px;background:var(--z5-gray);padding:56px 0}
.zm-zp4 .z5-tick__view{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-top:16px;touch-action:pan-y pan-x}
.zm-zp4 .z5-tick__view::-webkit-scrollbar{display:none}
.zm-zp4 .z5-tick__track{display:flex;gap:40px;width:max-content;padding:0 20px}
.zm-zp4 .z5-tick.is-run .z5-tick__view{overflow:hidden;touch-action:pan-y;cursor:grab}
.zm-zp4 .z5-tick.is-run .z5-tick__track{will-change:transform}
.zm-zp4 .z5-tick__view.is-drag{cursor:grabbing;-webkit-user-select:none;user-select:none}
.zm-zp4 .z5-tick__view.is-drag a{pointer-events:none}
.zm-zp4 .z5-tick__item{flex:none;width:387px}
.zm-zp4 .z5-tc{position:relative;display:flex;gap:12px;box-sizing:border-box;height:175px;padding:20px;background:#fff;transition:all .3s}
.zm-zp4 .z5-tc:hover{opacity:.88}
.zm-zp4 .z5-tc:hover .z5-tc__img img{transform:scale(1.06)}
.zm-zp4 .z5-tc__badge{position:absolute;left:50%;top:0;z-index:1;transform:translate(-50%,-50%);white-space:nowrap;background:var(--z5-blue);color:#fff;border-radius:999px;font-family:var(--z5-bold);font-size:16px;font-weight:700;line-height:1.5;letter-spacing:.06em;padding:2px 16px}
.zm-zp4 .z5-tc__img{flex:none;width:135px;height:135px;overflow:hidden;background:#d9e6f5}
.zm-zp4 .z5-tc__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px}
.zm-zp4 .z5-tc__ttl{flex:1 1 auto;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--z5-bold);font-size:15px;font-weight:700;line-height:1.5;color:var(--z5-ink)}
.zm-zp4 .z5-tc__date{text-align:center}
.zm-zp4 .z5-tc__dt{display:inline-block;background:var(--z5-pale2);color:var(--z5-blue);border-radius:5px;font-family:var(--z5-bold);font-size:15px;font-weight:700;line-height:1.5;letter-spacing:.04em;padding:4px 10px}
/* 点（見本 p-top__open-pagination：6pxの丸・今の1つは9px） */
.zm-zp4 .z5-tick__dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:24px;min-height:10px;visibility:hidden}
.zm-zp4 .z5-tick.is-run .z5-tick__dots{visibility:visible}
.zm-zp4 .z5-tick__dot{position:relative;width:6px;height:6px;border-radius:50%;background:#b9c1ca;transition:all .3s}
.zm-zp4 .z5-tick__dot::before{content:"";position:absolute;inset:-10px -4px}
.zm-zp4 .z5-tick__dot.is-on{width:9px;height:9px;background:var(--z5-blue)}

/* 4. 人出の多いイベント（見本 p-top__videos：色の帯・縦長9:16のカード240×427・帯に64px重ねる・左右の矢印） ───────── */
.zm-zp4 .z5-big{margin-top:0}
.zm-zp4 .z5-big__head{background:var(--z5-grad);padding:80px 0 56px}
.zm-zp4 .z5-big__head .z5-ttl{margin-bottom:48px}
.zm-zp4 .z5-big__in{position:relative;margin-top:-64px}
.zm-zp4 .z5-big__slider{position:relative}
.zm-zp4 .z5-big__track{display:flex;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.zm-zp4 .z5-big__track::-webkit-scrollbar{display:none}
.zm-zp4 .z5-big__item{flex:none;width:240px;scroll-snap-align:start}
.zm-zp4 .z5-vc{position:relative;display:block;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:#333;color:#fff;transition:all .3s}
.zm-zp4 .z5-vc__img{position:absolute;inset:0;display:block}
.zm-zp4 .z5-vc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));pointer-events:none}
.zm-zp4 .z5-vc:hover .z5-vc__img img{transform:scale(1.06)}
.zm-zp4 .z5-vc__pill{position:absolute;left:12px;top:12px;z-index:1;background:var(--z5-blue);color:#fff;border-radius:999px;font-family:var(--z5-bold);font-size:14px;font-weight:700;line-height:1.5;padding:3px 12px}
.zm-zp4 .z5-vc__txt{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;gap:6px;padding:0 16px 18px}
.zm-zp4 .z5-vc__tag{align-self:flex-start;background:#fff;color:var(--z5-blue);border-radius:999px;font-family:var(--z5-bold);font-size:12px;font-weight:700;line-height:1.5;padding:1px 10px}
.zm-zp4 .z5-vc__ttl{font-family:var(--z5-bold);font-size:18px;font-weight:700;line-height:1.45;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.zm-zp4 .z5-vc__when{font-size:14px;line-height:1.5}
/* 左右の矢印（今の棚と同じ丸いグラデーションのボタン） */
.zm-zp4 .z5-snav{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;display:flex;align-items:center;justify-content:center;transition:opacity .3s}
.zm-zp4 .z5-snav--prev{left:-10px}
.zm-zp4 .z5-snav--next{right:-10px}
.zm-zp4 .z5-snav__c{width:40px;height:40px;border-radius:50%;background:var(--z5-grad);border:2px solid #fff;box-sizing:border-box;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:2px 2px 5px rgba(0,0,0,.15)}
.zm-zp4 .z5-snav__c .z4-arw{width:14px;height:14px}
.zm-zp4 .z5-snav--prev .z4-arw{transform:rotate(180deg)}
.zm-zp4 .z5-snav:hover{opacity:.8}
.zm-zp4 .z5-snav.is-off{opacity:0;pointer-events:none}
.zm-zp4 .z5-big__more{margin-top:12px;text-align:right}

/* 5. 新着記事（見本 p-top__latest：6列の格子・1〜2本目は3列ぶん・3本目から2列ぶん・間40） ───────── */
.zm-zp4 .z5-new{padding:80px 0}
.zm-zp4 .z5-new__list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px}
.zm-zp4 .z5-nc{grid-column:span 2;min-width:0}
.zm-zp4 .z5-nc--l{grid-column:span 3}
.zm-zp4 .z5-nc__a{display:flex;flex-direction:column;height:100%;transition:all .3s}
.zm-zp4 .z5-nc__a:hover{opacity:.88}
.zm-zp4 .z5-nc__a:hover .z5-nc__img img{transform:scale(1.06)}
.zm-zp4 .z5-nc__img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#d9e6f5}
.zm-zp4 .z5-nc--l .z5-nc__img{border-radius:30px 30px 0 0}
.zm-zp4 .z5-nc--l .z5-today{top:30px}
.zm-zp4 .z5-nc__body{display:flex;flex-direction:column;gap:6px;padding:10px 4px 0}
.zm-zp4 .z5-nc__date{font-size:12px;line-height:1.5;color:var(--z5-sub);letter-spacing:.04em}
.zm-zp4 .z5-nc__ttl{font-family:var(--z5-bold);font-size:16px;font-weight:700;line-height:1.5;color:var(--z5-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.zm-zp4 .z5-nc__meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px}
.zm-zp4.z4-js .z5-new:not(.is-open) .z5-nc--more{display:none}
.zm-zp4 .z5-new__cta{display:none;justify-content:center;margin-top:48px}
.zm-zp4.z4-js .z5-new__cta{display:flex}
.zm-zp4.z4-js .z5-new.is-open .z5-new__cta{display:none}

/* 6. テーマ別の記事（見本 p-top__pr：白い箱・角丸10・余白40/32・3列で間32。点々の地の代わりに薄い青の面） ───────── */
.zm-zp4 .z5-theme{background:var(--z5-pale);padding:80px 0}
.zm-zp4 .z5-theme__box{background:#fff;border-radius:10px;padding:48px 32px 40px}
.zm-zp4 .z5-theme__grp+.z5-theme__grp{margin-top:48px}
.zm-zp4 .z5-theme__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.zm-zp4 .z5-theme__h{display:flex;align-items:center;gap:12px;font-size:22px;line-height:1.4;color:var(--z5-ink)}
.zm-zp4 .z5-theme__ico{flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(to bottom right,var(--g1),var(--g2));color:#fff;display:flex;align-items:center;justify-content:center}
.zm-zp4 .z5-theme__ico .z4-i{width:22px;height:22px;stroke-width:1.8}
.zm-zp4 .z5-theme__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.zm-zp4 .z5-pr__a{display:block;transition:all .3s}
.zm-zp4 .z5-pr__a:hover{opacity:.88}
.zm-zp4 .z5-pr__a:hover .z5-pr__img img{transform:scale(1.06)}
.zm-zp4 .z5-pr__img{display:block;aspect-ratio:16/9;overflow:hidden;background:#d9e6f5}
.zm-zp4 .z5-pr__ttl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;padding:10px 4px 0;font-family:var(--z5-bold);font-size:15px;font-weight:700;line-height:1.5;color:var(--z5-ink)}
.zm-zp4 .z5-pr__date{display:block;padding:6px 4px 0;font-size:12px;line-height:1.5;color:var(--z5-sub);letter-spacing:.04em}

/* 7. よく読まれている記事（見本 p-top__features：右へはみ出す灰色の面・1件目を写真＋色の面・4列で間40） ───────── */
.zm-zp4 .z5-pop{padding:80px 0 160px;overflow:hidden;overflow:clip}
.zm-zp4 .z5-pop__in{position:relative;z-index:0}
.zm-zp4 .z5-pop__in::before{content:"";position:absolute;z-index:-1;top:-80px;bottom:-80px;left:11%;right:calc(50% - 50vw);border-radius:30px 0 0 30px;background:var(--z5-gray)}
.zm-zp4 .z5-pop__main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;margin-bottom:40px;border-radius:10px;overflow:hidden;background:var(--z5-blue);color:#fff;transition:all .3s}
.zm-zp4 .z5-pop__main:hover{opacity:.88}
.zm-zp4 .z5-pop__main:hover .z5-pop__mimg img{transform:scale(1.06)}
.zm-zp4 .z5-pop__mimg{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#d9e6f5}
.zm-zp4 .z5-pop__mbody{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:28px 32px}
.zm-zp4 .z5-pop__mtag{align-self:flex-start;background:#fff;color:var(--z5-blue);border-radius:999px;font-family:var(--z5-bold);font-size:13px;font-weight:700;line-height:1.5;padding:2px 12px}
.zm-zp4 .z5-pop__mttl{font-family:var(--z5-bold);font-size:22px;font-weight:700;line-height:1.45}
.zm-zp4 .z5-pop__mdate{font-size:14px;line-height:1.5;letter-spacing:.04em}
.zm-zp4 .z5-pop__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.zm-zp4 .z5-fc__a{display:block;transition:all .3s}
.zm-zp4 .z5-fc__a:hover{opacity:.88}
.zm-zp4 .z5-fc__a:hover .z5-fc__img img{transform:scale(1.06)}
.zm-zp4 .z5-fc__img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#d9e6f5}
.zm-zp4 .z5-fc__ttl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding:10px 4px 0;font-family:var(--z5-bold);font-size:14px;font-weight:700;line-height:1.4;color:var(--z5-ink)}

/* 8. 写真の出典（一番下の1行。押すと開く） ───────── */
.zm-zp4 .z5-credit{padding:20px 0 40px}
.zm-zp4 .z5-credit__s{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-size:13px;line-height:1.5;color:var(--z5-sub)}
.zm-zp4 .z5-credit__s::-webkit-details-marker{display:none}
.zm-zp4 .z5-credit__s:hover{color:var(--z5-blue)}
.zm-zp4 .z5-credit__pm{position:relative;flex:none;width:10px;height:10px}
.zm-zp4 .z5-credit__pm::before,.zm-zp4 .z5-credit__pm::after{content:"";position:absolute;left:0;top:4px;width:10px;height:2px;background:var(--z5-blue);transition:transform .3s}
.zm-zp4 .z5-credit__pm::after{transform:rotate(90deg)}
.zm-zp4 .z5-credit__d[open] .z5-credit__pm::after{transform:rotate(0)}
.zm-zp4 .z5-credit__d .z4-credit__list{margin-top:8px}

/* 9. スマホ（見本の 768px 未満） ───────── */
@media (max-width:1023.9px){
 .zm-zp4 .z5-tick__track{gap:32px}
}
@media (max-width:767.9px){
 .zm-zp4 .z5-ttl{font-size:24px;margin-bottom:24px}
 .zm-zp4 .z5-ttl--c{margin-bottom:36px}
 .zm-zp4 .z5-ttl--c::before{bottom:-12px;width:40px;height:5px}
 .zm-zp4 .z5-slash{font-size:20px;gap:6px;margin-bottom:24px}
 .zm-zp4 .z5-btn{max-width:none;min-height:49px}

 .zm-zp4.z5 .z4-pick{padding-top:24px}
 .zm-zp4 .z5-ev{padding-top:40px}
 .zm-zp4 .z5-ev__main{flex-direction:column-reverse}
 .zm-zp4 .z5-ev__img{width:100%;margin:0 0 -48px;transform:none;border-radius:0 20px}
 .zm-zp4 .z5-ev__card{width:auto;padding:72px 0 24px;gap:16px;background:transparent;border-image:linear-gradient(#2b66cc,#2b66cc) fill 0//0 100vw 0 100vw}
 .zm-zp4 .z5-ev__name{font-size:18px}
 .zm-zp4 .z5-ev__tag{margin-bottom:-6px}
 .zm-zp4 .z5-left{left:10px;top:10px;font-size:14px;padding:3px 10px}
 .zm-zp4 .z5-find{flex-direction:column;gap:24px;margin-top:24px}
 .zm-zp4 .z5-find__box{max-width:none;padding:24px 0}
 .zm-zp4 .z5-find__list{gap:12px 10px}
 .zm-zp4 .z5-find__h{font-size:16px;margin-bottom:24px}

 .zm-zp4 .z5-tick{margin-top:40px;padding:40px 0}
 .zm-zp4 .z5-tick__view{padding-top:12px}
 .zm-zp4 .z5-tick__track{gap:24px;padding:0 15px}
 .zm-zp4 .z5-tick__item{width:300px}
 .zm-zp4 .z5-tc{height:144px;padding:12px}
 .zm-zp4 .z5-tc__img{width:115px;height:120px}
 .zm-zp4 .z5-tc__ttl{font-size:14px}
 .zm-zp4 .z5-tc__dt{font-size:13px;padding:3px 8px}
 .zm-zp4 .z5-tc__badge{font-size:14px;padding:1px 12px}

 .zm-zp4 .z5-big__head{padding:40px 0 32px}
 .zm-zp4 .z5-big__head .z5-ttl{margin-bottom:24px}
 .zm-zp4 .z5-big__in{margin-top:-32px}
 .zm-zp4 .z5-big__item{width:61.5vw;max-width:240px}
 .zm-zp4 .z5-vc__ttl{font-size:16px}
 .zm-zp4 .z5-vc__txt{padding:0 12px 14px}
 .zm-zp4 .z5-snav--prev{left:-6px}
 .zm-zp4 .z5-snav--next{right:-6px}

 .zm-zp4 .z5-new{padding:40px 0}
 .zm-zp4 .z5-new__list{grid-template-columns:minmax(0,1fr);gap:24px}
 .zm-zp4 .z5-nc,.zm-zp4 .z5-nc--l{grid-column:auto}
 .zm-zp4 .z5-nc:not(:first-child) .z5-nc__a{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:12px;align-items:start}
 .zm-zp4 .z5-nc:first-child .z5-nc__img{border-radius:20px 20px 0 0}
 .zm-zp4 .z5-nc:not(:first-child) .z5-nc__img{border-radius:0}
 .zm-zp4 .z5-nc:not(:first-child) .z5-nc__body{padding:0}
 .zm-zp4 .z5-nc__body{padding:8px 4px 0}
 .zm-zp4 .z5-nc__ttl{font-size:14px}
 .zm-zp4 .z5-nc:first-child .z5-nc__ttl{font-size:16px}
 .zm-zp4 .z5-nc--l .z5-today,.zm-zp4 .z5-today{top:10px;font-size:12px}
 .zm-zp4 .z5-nc:first-child .z5-today{top:20px}
 .zm-zp4 .z5-new__cta{margin-top:32px}

 .zm-zp4 .z5-theme{padding:40px 0}
 .zm-zp4 .z5-theme__box{padding:28px 12px 24px}
 .zm-zp4 .z5-theme__grp+.z5-theme__grp{margin-top:32px}
 .zm-zp4 .z5-theme__head{margin-bottom:12px}
 .zm-zp4 .z5-theme__h{font-size:18px;gap:8px}
 .zm-zp4 .z5-theme__ico{width:28px;height:28px}
 .zm-zp4 .z5-theme__ico .z4-i{width:17px;height:17px}
 .zm-zp4 .z5-theme__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
 .zm-zp4 .z5-pr__ttl{font-size:14px;padding:8px 2px 0}
 .zm-zp4 .z5-pr__date{padding:4px 2px 0}

 .zm-zp4 .z5-pop{padding:40px 0 80px}
 .zm-zp4 .z5-pop__in::before{top:-40px;bottom:-40px}
 .zm-zp4 .z5-pop__main{grid-template-columns:minmax(0,1fr);border-radius:5px;margin-bottom:24px}
 .zm-zp4 .z5-pop__mbody{padding:16px;gap:10px}
 .zm-zp4 .z5-pop__mttl{font-size:16px}
 .zm-zp4 .z5-pop__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
 .zm-zp4 .z5-fc__ttl{padding:8px 2px 0}
 .zm-zp4 .z5-rank{left:6px;top:6px;width:28px;height:28px;font-size:14px}
 .zm-zp4 .z5-rank--l{left:10px;top:10px;width:38px;height:38px;font-size:19px}
}

/* 10. 動きを減らす設定では寄りも色の変化も止める（流れる帯は JS が動かさない） */
@media (prefers-reduced-motion:reduce){
 .zm-zp4.z5 [class*="z5-"],.zm-zp4.z5 [class*="z5-"] img,.zm-zp4.z5 [class*="z5-"]::before,.zm-zp4.z5 [class*="z5-"]::after{transition:none!important;animation:none!important}
 .zm-zp4.z5 [class*="z5-"]:hover img{transform:none!important}
 .zm-zp4 .z5-btn:hover .z5-btn__i,.zm-zp4 .z5-btn:focus-visible .z5-btn__i{transform:none}
}