/* 今日どこいく？ トップ 案4（チケットぴあ型） kami-top4.css   2026-10-01
   ★手で直さない。元は作業フォルダの preview/zp4/style.css と tools/build.py の打ち消し。
     honban/tools/build_assets.py で組む。読むのはトップだけ（kami/top4.php が <head> の最後に置く）
   1. 本番テーマの一般的な指定（h2の余白・pの行間・liの印・buttonの灰色・aの0.3秒の変化・imgのheight:auto）を案4の中だけ打ち消す（強さ 0,1,1）
   2. 案4の見た目（.zm-zp4 から書いてある） */
div.zm{display:block;color:#111;font-family:"Helvetica Neue",Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;letter-spacing:normal}
div.zm :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,figure,figcaption,table,blockquote){margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
div.zm :where(ul,ol,li){list-style:none}
div.zm a{color:inherit;text-decoration:none;transition:none;backface-visibility:visible}
div.zm :where(img,svg){max-width:100%;vertical-align:top}
div.zm button{background:none;padding:0;margin:0;border:0;color:inherit;font:inherit;line-height:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
div.zm small{font-size:inherit}
div.zm em{font-style:normal}
div.zm [hidden]{display:none!important}

/* ─────────────────────────────────────────────────────────────
 案4 チケットぴあ型（zp4）― https://t.pia.jp/ の実測値（2026-09-30 22:20・top_style_renewal.css と top_renewal.js）
 幅    本文 1,180px（SPは左右15px）。章は全部1列。柱なし。
 書体  游ゴシック体（YuGothic）・font-feature-settings "pkna"・字間 .025em・行間 1.6・本文 16px（SP 14px）・太字は700
 色    文字 #000／地 #fff／薄い面 #f4f4f4／青 #2b66cc／検索の枠 #2b99cc／区切り #bebebe／券の台 #d9e6f5／下の面 #f0f7ff
       青の面 linear-gradient(to bottom right,#2d69d0,#2bcccc)（FVの帯は不透明度 .3・高さ 260px／SP 120px）
 検索  幅720・高さ約56・地 #f4f4f4・角丸5（SP 10）・outline 2px #2b99cc・文字18px・右に幅65の虫めがね
 カルーセル 720×240（3:1）・角丸5・影 2px 2px 10px rgba(19,30,51,.2)・間40・1.6枚見せ（SP 1枚・間8）
       送りの棒 20×5（SP 10×4）角丸3・間15（SP10）白／今の1本 #2b66cc・スライドの下45
       自動 2秒（見本）→ 6秒（恒久ルール8）・送り .3秒・ホバーで1.05倍（.4秒）・矢印はホバーで出る（.4秒）
 ジャンル 215×約70・間10・角丸10・枠2px（2色のグラデーション）・中の白は角丸8・padding 18/13/17
       アイコンの丸32（白の線画20）・名前16px太字・ホバーで明るさ1.2（.4秒）／SP 190幅・間8・2段の横スクロール・丸30（線画18）
 章    上下80px（SP 40）・h2 34px（SP 22）・h2の下30（SP 15）
 棚    見出し h3 26px（SP 16）・アイコン26（SP 18）・もっと見る 14px太字 #2b66cc・棚の間60（SP 40）
       見本は見出しの下に 2px #2b66cc の線（全幅）→ 恒久ルール2で外した。代わりにアイコンをグラデーションの丸36（SP 26）にした
       カード幅 約238・間30・4.45枚見せ（SP 幅175・間20・1.86枚）・写真の台 240×240（SP 175）padding 10/12/14
       写真は contain・角丸5・下に券の形の台（#d9e6f5・240×99・上が弧）／題16px太字2行（SP 14）・日付14px太字（SP 13）
       右端に白いぼかし50px＋丸い矢印40（グラデーション・白1pxの縁・影 2px 2px 5px rgba(0,0,0,.15)）・ホバーで写真1.05倍と題の不透明度.5
 小バナー 外 #f4f4f4 の上20・中は白 padding 20/40・バナーの高さ84（SP 64）・間30・4.45枚（SP 1.8枚・間20）
 お知らせ 地 #f4f4f4・padding 40（SP 20）・見出し24px（SP 16）・行14px・行の間10（SP 15）
 エリア 青の面・padding 80（SP 40）・白い箱 角丸10・padding 22/40（SP 10/20）・行の上下18（SP 20）
       見本の行の間の 2px #bebebe の線 → 恒久ルール2（区切りは面と余白）で薄い青の面 #f0f7fe と8pxの間にした
 格子  260×3列・間40・説明12px（→ 本文14px以上にするため14px）
 折りたたみ 地 #f0f7ff・padding 80（SP 40）・白い箱 角丸10・影 2px 2px 15px rgba(19,30,51,.2)・padding 22/40・＋の印 #2b66cc 15×2（.4秒で回る）
───────────────────────────────────────────────────────────── */

.zm-zp4.zm{font-family:"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
 font-feature-settings:"pkna";font-size:16px;line-height:1.6;letter-spacing:.025em;color:#000;background:#fff;font-weight:400;overflow-wrap:break-word}
.zm-zp4 .z4-in{width:min(1180px,calc(100% - 30px));margin:0 auto}
.zm-zp4 .z4-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* 2026-10-01 札と日付は区切りのいい所（「・」の後ろ・「〜」の前・ひらがなとカタカナの境目）でだけ折り返す。
   スマホで「宿・温泉・キャン／プ」「〜11月23／日」のように1文字だけ次の行へ落ちていたため。1行に入りきらないときだけ中でも折れる */
.zm-zp4 .z4-nw{display:inline-block}
.zm-zp4 .z4-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;overflow:visible}
.zm-zp4 .z4-arw{width:12px;height:12px;stroke-width:2.4}
.zm-zp4 .z4-arw--down{transform:rotate(90deg)}
/* 2026-10-01 本番の body.k-ain a:focus-visible（強さ 0,2,2・赤い2px）に負けていたので .zm を足して強くした */
.zm-zp4.zm a:focus-visible,.zm-zp4.zm button:focus-visible,.zm-zp4.zm summary:focus-visible{outline:3px solid #2b66cc;outline-offset:2px}

/* 1 お知らせの帯 */
.zm-zp4 .z4-bar{background:#f4f4f4;padding:10px 0;margin-bottom:20px}
.zm-zp4 .z4-bar__p{font-size:14px;line-height:1.85}
.zm-zp4 .z4-bar__a{color:#000;transition:opacity .4s ease}
.zm-zp4 .z4-bar__a:hover{opacity:.5}
.zm-zp4 .z4-bar__a .z4-arw{width:11px;height:11px;margin-right:6px;color:#2b66cc;vertical-align:-1px}

/* 2 注目のイベント（2026-10-01 検索窓と入れ替えた。いまの本番の「イベントから決める」の上の段をぴあの部品で組み直した）
   大1＋中2のカード（角丸5・影はカルーセルと同じ・写真の下に白い文字の面）＋右に「よく調べられている」5件（薄い青の面・順位の丸） */
.zm-zp4 .z4-pick{padding:10px 0 40px}
.zm-zp4 .z4-pick .z4-shelf__head{margin-bottom:22px}
.zm-zp4 .z4-pick__grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:stretch}
.zm-zp4 .z4-pick__cards{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:auto auto;gap:20px 24px}
.zm-zp4 .z4-pick__l{grid-row:1/3}
.zm-zp4 .z4-pc{position:relative;display:flex;flex-direction:column;height:100%;box-sizing:border-box;border-radius:5px;overflow:hidden;background:#fff;box-shadow:2px 2px 10px rgba(19,30,51,.2)}
.zm-zp4 .z4-pc__img{display:block;overflow:hidden;background:#e9eef5;aspect-ratio:2/1}
.zm-zp4 .z4-pc--l .z4-pc__img{flex:1 1 auto;min-height:300px;aspect-ratio:auto}
.zm-zp4 .z4-pc__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.zm-zp4 .z4-pc:hover .z4-pc__img img{transform:scale(1.05)}
.zm-zp4 .z4-pc__left{position:absolute;left:10px;top:10px;background:#2b66cc;color:#fff;border-radius:5px;font-size:14px;font-weight:700;line-height:1.5;padding:4px 12px}
.zm-zp4 .z4-pc__txt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px 16px}
.zm-zp4 .z4-pc__ttl{font-size:16px;font-weight:700;line-height:1.5;transition:opacity .4s ease}
.zm-zp4 .z4-pc:hover .z4-pc__ttl{opacity:.5}
.zm-zp4 .z4-pc__meta{display:flex;flex-wrap:wrap;gap:0 12px;font-size:14px;font-weight:700;line-height:1.5;color:#5c5c5c}
.zm-zp4 .z4-pc--l .z4-pc__txt{padding:18px 22px 20px;gap:8px}
.zm-zp4 .z4-pc--l .z4-pc__ttl{font-size:24px;line-height:1.4}
.zm-zp4 .z4-pc--l .z4-pc__meta{font-size:16px}
.zm-zp4 .z4-pc--l .z4-pc__left{left:14px;top:14px;font-size:16px;padding:5px 14px}
.zm-zp4 .z4-pick__rank{display:flex;flex-direction:column;box-sizing:border-box;background:#f0f7ff;border-radius:10px;padding:18px 18px 16px}
.zm-zp4 .z4-pick__h3{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;line-height:1.5;margin-bottom:14px}
.zm-zp4 .z4-pick__hi{width:20px;height:20px;color:#2b66cc;stroke-width:2}
.zm-zp4 .z4-pick__list{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.zm-zp4 .z4-pr__a{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center}
.zm-zp4 .z4-pr__img{position:relative;display:block;width:84px;height:63px}
.zm-zp4 .z4-pr__img img{display:block;width:100%;height:100%;object-fit:cover;border-radius:5px}
.zm-zp4 .z4-pr__no{position:absolute;left:-6px;top:-6px;width:26px;height:26px;box-sizing:border-box;border-radius:50%;background:#fff;border:1px solid #2b66cc;
 color:#2b66cc;font-size:14px;font-weight:700;line-height:1;letter-spacing:0;display:flex;align-items:center;justify-content:center}
.zm-zp4 .z4-pr__txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.zm-zp4 .z4-tag--s{padding:0 8px}
.zm-zp4 .z4-pr__ttl{font-size:15px;font-weight:700;line-height:1.45;transition:opacity .4s ease}
.zm-zp4 .z4-pr__a:hover .z4-pr__ttl{opacity:.5}
.zm-zp4 .z4-pr__pv{font-size:14px;line-height:1.5;color:#333;white-space:nowrap}
.zm-zp4 .z4-pr__pv b{margin:0 2px;color:#2b66cc;font-size:16px;font-weight:700}

/* 3 バナーのカルーセル */
.zm-zp4 .z4-hero{position:relative;overflow:hidden;padding:25px 0 30px;isolation:isolate}
.zm-zp4 .z4-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:260px;background:linear-gradient(to bottom right,#2d69d0,#2bcccc);opacity:.3;z-index:-1}
.zm-zp4 .z4-hero__in{width:min(1180px,calc(100% - 30px));margin:0 auto}
.zm-zp4 .z4-hero__view{position:relative;--gap:40px}
/* 2026-10-01 JSなしのスマホで列が中身の720pxに広がって右が切れていたので、列を枠の幅に収めた（JSありは下で absolute になるので変わらない） */
.zm-zp4 .z4-hero__track{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;justify-items:center}
.zm-zp4 .z4-slide{width:720px;max-width:100%;aspect-ratio:3/1}
.zm-zp4.z4-js .z4-hero__view{width:720px;max-width:100%;margin:0 auto;aspect-ratio:3/1}
.zm-zp4.z4-js .z4-hero__track{display:block;position:absolute;inset:0}
.zm-zp4.z4-js .z4-slide{position:absolute;inset:0;width:100%;height:100%;transform:translateX(calc(var(--o) * (100% + var(--gap))));transition:transform .3s ease}
.zm-zp4.z4-js .z4-slide.is-jump{transition:none}
.zm-zp4 .z4-slide__a{display:flex;height:100%;border-radius:5px;overflow:hidden;background:#fff;box-shadow:2px 2px 10px rgba(19,30,51,.2);transition:transform .4s ease}
.zm-zp4 .z4-slide__a:hover{transform:scale(1.05)}
.zm-zp4 .z4-slide__img{flex:none;height:100%;aspect-ratio:16/9;background:#e9eef5}
.zm-zp4 .z4-slide__img img{display:block;width:100%;height:100%;object-fit:cover}
.zm-zp4 .z4-slide__txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px 22px}
.zm-zp4 .z4-slide__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.zm-zp4 .z4-tag{display:inline-block;background:#f4f4f4;color:#2b66cc;border-radius:5px;font-size:14px;font-weight:700;line-height:1.5;padding:4px 14px}
.zm-zp4 .z4-slide__date{font-size:14px;font-weight:700;color:#5c5c5c}
.zm-zp4 .z4-slide__ttl{font-size:20px;font-weight:700;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.zm-zp4 .z4-nav{position:absolute;top:0;bottom:0;z-index:2;width:50px;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.zm-zp4 .z4-nav--prev{left:-25px}
.zm-zp4 .z4-nav--next{right:-25px}
.zm-zp4 .z4-hero:hover .z4-nav,.zm-zp4 .z4-hero:focus-within .z4-nav{opacity:1;visibility:visible}
.zm-zp4 .z4-nav__c,.zm-zp4 .z4-snav__c{width:40px;height:40px;border-radius:50%;background:linear-gradient(to bottom right,#2d69d0,#2bcccc);border:1px solid #fff;
 box-shadow:2px 2px 5px rgba(0,0,0,.15);color:#fff;display:flex;align-items:center;justify-content:center;transition:filter .4s ease}
.zm-zp4 .z4-nav__c .z4-arw,.zm-zp4 .z4-snav__c .z4-arw{width:15px;height:15px}
.zm-zp4 .z4-nav--prev .z4-arw,.zm-zp4 .z4-snav--prev .z4-arw{transform:rotate(180deg)}
.zm-zp4 .z4-nav:hover .z4-nav__c,.zm-zp4 .z4-snav:hover .z4-snav__c{filter:brightness(1.2)}
.zm-zp4 .z4-dots{display:flex;justify-content:center;height:44px;margin-top:25px}
.zm-zp4 .z4-dot{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.zm-zp4 .z4-dot::before{content:"";width:20px;height:5px;border-radius:3px;background:#fff;transition:background-color .3s}
.zm-zp4 .z4-dot.is-on::before{background:#2b66cc}
.zm-zp4:not(.z4-js) .z4-nav,.zm-zp4:not(.z4-js) .z4-dots{display:none}

/* 4 ジャンルのボタン → テーマ19個 */
.zm-zp4 .z4-genre{padding-top:40px}
.zm-zp4 .z4-genre__wrap{margin-bottom:20px}
.zm-zp4 .z4-genre__list{display:flex;flex-wrap:wrap;gap:10px}
.zm-zp4 .z4-gb{display:block;width:215px;padding:2px;border-radius:10px;background:linear-gradient(to bottom right,var(--g1),var(--g2));font-weight:700;transition:filter .4s ease}
.zm-zp4 .z4-gb:hover{filter:brightness(1.2)}
.zm-zp4 .z4-gb__in{display:flex;align-items:center;gap:10px;padding:18px 13px 17px;background:#fff;border-radius:8px}
.zm-zp4 .z4-gb__ico{flex:none;width:32px;height:32px;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 .z4-gb__svg{width:20px;height:20px;stroke-width:1.8}
.zm-zp4 .z4-gb__name{font-size:16px;line-height:1.6;white-space:nowrap}
.zm-zp4 .z4-genre__more{text-align:right;line-height:1}
.zm-zp4 .z4-textarw{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#2b66cc;font-size:14px;font-weight:700;transition:opacity .4s ease}
.zm-zp4 .z4-textarw:hover{opacity:.5}

/* 5 おすすめ・棚 */
.zm-zp4 .z4-rec{padding:80px 0}
.zm-zp4 .z4-h2{font-size:34px;font-weight:700;line-height:1.5;margin-bottom:30px}
.zm-zp4 .z4-h2s{font-size:24px;font-weight:700;line-height:1.5}
.zm-zp4 .z4-shelf+.z4-shelf{margin-top:60px}
.zm-zp4 .z4-shelf__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.zm-zp4 .z4-shelf__ttl{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:700;line-height:1.5}
.zm-zp4 .z4-shelf__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 .z4-shelf__ico .z4-i{width:22px;height:22px;stroke-width:1.8}
.zm-zp4 .z4-more{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;color:#2b66cc;font-size:14px;font-weight:700;transition:opacity .4s ease}
.zm-zp4 .z4-more:hover{opacity:.5}
.zm-zp4 .z4-slider{position:relative}
.zm-zp4 .z4-slider__track{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:30px}
.zm-zp4.z4-js .z4-slider__track{display:flex;gap:30px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 8px;scrollbar-width:none;padding:8px}
.zm-zp4.z4-js .z4-slider__track::-webkit-scrollbar{display:none}
.zm-zp4.z4-js .z4-card{flex:0 0 238px;scroll-snap-align:start}
.zm-zp4 .z4-snav{position:absolute;top:0;bottom:0;z-index:1;width:50px;display:flex;align-items:center;justify-content:center}
.zm-zp4 .z4-snav--prev{left:-1px;background:linear-gradient(to right,#fff 0,rgba(255,255,255,0))}
.zm-zp4 .z4-snav--next{right:-1px;background:linear-gradient(to left,#fff 0,rgba(255,255,255,0))}
.zm-zp4 .z4-snav.is-off{visibility:hidden}
.zm-zp4:not(.z4-js) .z4-snav{display:none}
.zm-zp4 .z4-card{position:relative;min-width:0}
.zm-zp4 .z4-card__a{display:block;position:relative}
.zm-zp4 .z4-card__img{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:240px;padding:10px 12px 14px;margin-bottom:15px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 99'%3E%3Cpath fill='%23d9e6f5' d='M0 24C44 8 84 0 124 0s82 9 116 24v68a7 7 0 0 1-7 7H7a7 7 0 0 1-7-7z'/%3E%3C/svg%3E") no-repeat center bottom/100% auto}
.zm-zp4 .z4-card__img img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;margin:0 auto;border-radius:5px;transition:transform .4s ease}
.zm-zp4 .z4-card__a:hover .z4-card__img img{transform:scale(1.05)}
.zm-zp4 .z4-card__ttl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:16px;font-weight:700;line-height:1.6;margin-bottom:5px;transition:opacity .4s ease}
.zm-zp4 .z4-card__a:hover .z4-card__ttl{opacity:.5}
.zm-zp4 .z4-card__date{display:block;font-size:14px;font-weight:700;line-height:1.6;margin-bottom:3px}
.zm-zp4 .z4-card__loc{display:block;font-size:14px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zm-zp4 .z4-card__rank{position:absolute;right:8px;top:180px;z-index:1;width:45px;height:45px;box-sizing:border-box;border-radius:50%;background:#fff;border:1px solid #2b66cc;
 color:#2b66cc;font-size:18px;font-weight:700;line-height:1;letter-spacing:0;display:flex;align-items:center;justify-content:center}
/* 記事の棚（16:9のアイキャッチ）だけ、240角の台を写真に合わせて詰める（イベントの棚の縦長の実写はそのまま）。
   写真は台の幅いっぱい 238×134、台は写真の下に16px出る。見出しの下端→写真の上端は 72.5px（SP 32px）。
   見本は h3 の下端→縦長ポスターの上端が 90px（SP 44px）、そのうち見出しの下の線（h3から17px・SP 12px）→ポスターの上端が 73px（SP 32px）。
   案は線をルール2で外したので、線から下の空きに合わせた。 */
.zm-zp4 .z4-shelf__head{min-height:44px}
.zm-zp4 .z4-shelf--post .z4-shelf__head{margin-bottom:62px}
.zm-zp4 .z4-shelf--post .z4-card__img{display:block;height:auto;padding:0 0 16px;margin-bottom:15px}
.zm-zp4 .z4-shelf--post .z4-card__img img{width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:16/9;object-fit:contain}
.zm-zp4 .z4-shelf--post .z4-card__rank{top:90px}


/* 6 小さいバナーの列 → 早見表・比較表 */
.zm-zp4 .z4-bnr{background:#f4f4f4;padding-top:20px}
.zm-zp4 .z4-bnr__white{background:#fff;padding:20px 0 40px}
.zm-zp4 .z4-bnr__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.zm-zp4 .z4-slider--bnr .z4-slider__track{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.zm-zp4.z4-js .z4-slider--bnr .z4-slider__track{gap:30px}
.zm-zp4.z4-js .z4-db{flex:0 0 242px;scroll-snap-align:start}
.zm-zp4 .z4-db__a{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;height:84px;padding:0 18px;background:var(--c);color:#fff;transition:transform .4s ease}
.zm-zp4 .z4-db__a:hover{transform:scale(1.05)}
.zm-zp4 .z4-db__num{font-size:24px;font-weight:700;line-height:1.2;letter-spacing:.02em}
.zm-zp4 .z4-db__nm{font-size:14px;font-weight:700;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zm-zp4 .z4-slider--bnr .z4-snav{background:none}

/* 7 重要なお知らせ → おでかけニュース */
.zm-zp4 .z4-news{background:#f4f4f4;padding:40px 0}
.zm-zp4 .z4-news .z4-h2s{margin-bottom:15px}
.zm-zp4 .z4-news__li{position:relative;padding-left:17px;font-size:14px;line-height:1.7;margin-bottom:10px}
.zm-zp4 .z4-news__li>.z4-arw{position:absolute;left:0;top:.42em;width:11px;height:11px;color:#2b66cc}
.zm-zp4 .z4-news__a{transition:opacity .4s ease}
.zm-zp4 .z4-news__a:hover{opacity:.5}
.zm-zp4 .z4-news__date{white-space:nowrap}
.zm-zp4.z4-js .z4-news__li--more{display:none}
.zm-zp4.z4-js .z4-news.is-open .z4-news__li--more{display:block}
.zm-zp4 .z4-news__foot{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:0 28px}
.zm-zp4 .z4-news__more{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#2b66cc;font-size:14px;font-weight:700}
.zm-zp4 .z4-news.is-open .z4-arw--down{transform:rotate(-90deg)}
.zm-zp4:not(.z4-js) .z4-news__more{display:none}

/* 8 エリアから探す → 道の駅 */
.zm-zp4 .z4-area{background:linear-gradient(to bottom right,#2d69d0,#2bcccc);padding:80px 0}
.zm-zp4 .z4-h2--w{color:#fff}
.zm-zp4 .z4-area__box{background:#fff;border-radius:10px;padding:22px 40px;display:grid;gap:8px}
.zm-zp4 .z4-area__row{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:4px 20px;padding:12px 20px;background:#f0f7fe;border-radius:5px}
.zm-zp4 .z4-area__name{font-size:16px;font-weight:700}
.zm-zp4 .z4-area__prefs{display:flex;flex-wrap:wrap;gap:0 24px}
.zm-zp4 .z4-area__prefs li{font-size:16px;line-height:2}
.zm-zp4 .z4-area__a{color:#2b66cc;font-weight:700;transition:opacity .4s ease}
.zm-zp4 .z4-area__a:hover{opacity:.5}

/* 9 バナーの格子 → 季節と時期の記事 */
.zm-zp4 .z4-feat{padding:40px 0}
.zm-zp4 .z4-feat .z4-in{width:min(860px,calc(100% - 30px))}
.zm-zp4 .z4-feat .z4-h2s{margin-bottom:20px}
.zm-zp4 .z4-feat__grid{display:grid;grid-template-columns:repeat(3,minmax(0,260px));gap:40px;justify-content:center}
.zm-zp4 .z4-feat__a{display:block;transition:transform .4s ease}
.zm-zp4 .z4-feat__a:hover{transform:scale(1.05)}
.zm-zp4 .z4-feat__img img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.zm-zp4 .z4-feat__ttl{display:block;margin-top:15px;font-size:14px;line-height:1.6;text-align:center}
.zm-zp4 .z4-feat__date{display:block;margin-top:8px;font-size:14px;color:#5c5c5c;text-align:center}

/* 10 折りたたみ → 一覧から探す */
.zm-zp4 .z4-list{background:#f0f7ff;padding:80px 0}
.zm-zp4 .z4-list .z4-h2s{margin-bottom:20px}
.zm-zp4 .z4-acc{background:#fff;border-radius:10px;box-shadow:2px 2px 15px rgba(19,30,51,.2);padding:22px 40px;display:grid;gap:8px}
.zm-zp4 .z4-acc__sum{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;box-sizing:border-box;padding:12px 20px;background:#f0f7fe;border-radius:5px;font-weight:700;cursor:pointer}
.zm-zp4 .z4-acc__sum::-webkit-details-marker{display:none}
.zm-zp4 .z4-acc__sum:hover{opacity:.7}
.zm-zp4 .z4-acc__pm{position:relative;flex:none;width:15px;height:15px}
.zm-zp4 .z4-acc__pm::before,.zm-zp4 .z4-acc__pm::after{content:"";position:absolute;left:0;top:50%;width:15px;height:2px;margin-top:-1px;border-radius:1px;background:#2b66cc;transition:transform .4s ease}
.zm-zp4 .z4-acc__pm::after{transform:rotate(90deg)}
.zm-zp4 .z4-acc__item[open] .z4-acc__pm::after{transform:rotate(180deg)}
.zm-zp4 .z4-acc__panel{padding:16px 20px 8px}
.zm-zp4 .z4-acc__grp+.z4-acc__grp{margin-top:14px}
.zm-zp4 .z4-acc__gname{font-size:14px;font-weight:700;margin-bottom:2px}
.zm-zp4 .z4-acc__links{display:flex;flex-wrap:wrap}
.zm-zp4 .z4-acc__links li{font-size:14px;line-height:2;margin-right:22px}
.zm-zp4 .z4-acc__links a{transition:opacity .4s ease}
.zm-zp4 .z4-acc__links a:hover{opacity:.5;text-decoration:underline}

/* よくある質問（2026-10-01 足した。「一覧から探す」と同じ面と折りたたみの部品） */
.zm-zp4 .z4-faq{background:#f0f7ff;padding:0 0 80px}
.zm-zp4 .z4-faq .z4-h2s{margin-bottom:20px}
.zm-zp4 .z4-faq__q{flex:1;min-width:0}
.zm-zp4 .z4-faq__a p{font-size:16px;line-height:1.8}
.zm-zp4 .z4-faq__a a{color:#2b66cc;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* 写真の出典 */
.zm-zp4 .z4-credit{padding:40px 0 60px}
.zm-zp4 .z4-credit__h{font-size:16px;font-weight:700;margin-bottom:10px}
.zm-zp4 .z4-credit__list{columns:2;column-gap:40px}
.zm-zp4 .z4-credit__list li{break-inside:avoid;font-size:14px;line-height:1.7;margin-bottom:4px;color:#333}
.zm-zp4 .z4-credit__list a{color:#2b66cc;text-decoration:underline;text-underline-offset:2px}
.zm-zp4 .z4-credit__note{margin-top:10px;font-size:14px;color:#333}

/* ── SP（見本の切り替えは 767.9px） */
@media (max-width:767.9px){
 .zm-zp4.zm{font-size:14px}
 .zm-zp4 .z4-in,.zm-zp4 .z4-hero__in,.zm-zp4 .z4-feat .z4-in{width:auto;padding:0 15px}
 .zm-zp4 .z4-pick{padding:5px 0 24px}
 .zm-zp4 .z4-pick .z4-shelf__head{margin-bottom:12px}
 .zm-zp4 .z4-pick__grid{grid-template-columns:minmax(0,1fr);gap:15px}
 .zm-zp4 .z4-pick__cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:15px}
 .zm-zp4 .z4-pick__l{grid-row:auto;grid-column:1/3}
 .zm-zp4 .z4-pc--l .z4-pc__img{flex:none;min-height:0;aspect-ratio:16/10}
 .zm-zp4 .z4-pc__txt{padding:10px 12px 12px;gap:4px}
 .zm-zp4 .z4-pc__ttl{font-size:14px}
 .zm-zp4 .z4-pc__meta{gap:0 8px}
 .zm-zp4 .z4-pc__left{left:8px;top:8px;padding:2px 8px}
 .zm-zp4 .z4-pc--l .z4-pc__txt{padding:12px 14px 14px;gap:6px}
 .zm-zp4 .z4-pc--l .z4-pc__ttl{font-size:18px}
 .zm-zp4 .z4-pc--l .z4-pc__meta{font-size:14px}
 .zm-zp4 .z4-pc--l .z4-pc__left{left:10px;top:10px;font-size:14px;padding:3px 10px}
 .zm-zp4 .z4-pick__rank{padding:14px 14px 12px}
 .zm-zp4 .z4-pick__h3{font-size:16px;margin-bottom:10px}
 .zm-zp4 .z4-pr__a{grid-template-columns:88px minmax(0,1fr);gap:12px}
 .zm-zp4 .z4-pr__img{width:88px;height:66px}
 .zm-zp4 .z4-pr__ttl{font-size:14px}
 .zm-zp4 .z4-pr__pv{white-space:normal}
 .zm-zp4 .z4-hero{padding:20px 0}
 .zm-zp4 .z4-hero::before{height:120px}
 .zm-zp4 .z4-hero__view{--gap:8px}
 .zm-zp4 .z4-slide__txt{gap:6px;padding:8px 10px}
 .zm-zp4 .z4-slide__date{display:none}
 .zm-zp4 .z4-tag{font-size:13px;padding:2px 8px}
 .zm-zp4 .z4-slide__ttl{font-size:14px;line-height:1.45;-webkit-line-clamp:3}
 .zm-zp4 .z4-dots{margin-top:5px}
 .zm-zp4 .z4-dot::before{width:10px;height:4px}
 .zm-zp4 .z4-nav{display:none}
 .zm-zp4 .z4-genre{padding-top:30px}
 .zm-zp4 .z4-genre__wrap{margin:0 -15px 10px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
 .zm-zp4 .z4-genre__wrap::-webkit-scrollbar{display:none}
 .zm-zp4 .z4-genre__list{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:190px;gap:8px;width:max-content;padding:0 15px}
 .zm-zp4 .z4-gb{width:190px}
 .zm-zp4 .z4-gb__in{padding:15px 8px}
 .zm-zp4 .z4-gb__ico{width:30px;height:30px}
 .zm-zp4 .z4-gb__svg{width:18px;height:18px}
 .zm-zp4 .z4-gb__name{font-size:14px}
 .zm-zp4 .z4-rec{padding:40px 0}
 .zm-zp4 .z4-h2{font-size:22px;margin-bottom:15px}
 .zm-zp4 .z4-h2s{font-size:16px}
 .zm-zp4 .z4-shelf+.z4-shelf{margin-top:40px}
 .zm-zp4 .z4-shelf__head{margin-bottom:12px}
 .zm-zp4 .z4-shelf__ttl{font-size:16px;gap:8px}
 .zm-zp4 .z4-shelf__ico{width:26px;height:26px}
 .zm-zp4 .z4-shelf__ico .z4-i{width:16px;height:16px}
 .zm-zp4 .z4-slider__track{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 15px}
 .zm-zp4.z4-js .z4-slider__track{gap:20px;margin:0 -15px;padding:0 15px;scroll-padding:0 15px}
 .zm-zp4.z4-js .z4-card{flex:0 0 175px}
 .zm-zp4 .z4-card__img{height:175px;padding:10px;margin-bottom:10px}
 .zm-zp4 .z4-card__ttl{font-size:14px}
 .zm-zp4 .z4-card__date,.zm-zp4 .z4-card__loc{font-size:14px}
 .zm-zp4 .z4-card__rank{right:5px;top:128px;width:36px;height:36px;font-size:15px}
 .zm-zp4 .z4-shelf--post .z4-shelf__head{margin-bottom:23px}
 .zm-zp4 .z4-shelf--post .z4-card__img{height:auto;padding:0 0 12px;margin-bottom:10px}
 .zm-zp4 .z4-shelf--post .z4-card__rank{top:62px}
 .zm-zp4 .z4-snav{display:none}
 .zm-zp4 .z4-bnr__white{padding:16px 0 30px}
 .zm-zp4 .z4-slider--bnr .z4-slider__track{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .zm-zp4.z4-js .z4-slider--bnr .z4-slider__track{gap:20px}
 .zm-zp4.z4-js .z4-db{flex:0 0 190px}
 .zm-zp4 .z4-db__a{height:64px;padding:0 12px}
 .zm-zp4 .z4-db__num{font-size:18px}
 .zm-zp4 .z4-db__nm{font-size:14px}
 .zm-zp4 .z4-news{padding:20px 0}
 .zm-zp4 .z4-news__li{margin-bottom:15px}
 .zm-zp4 .z4-area{padding:40px 0}
 .zm-zp4 .z4-area__box{padding:10px;gap:6px}
 .zm-zp4 .z4-area__row{grid-template-columns:5.6em 1fr;align-items:start;gap:0 10px;padding:8px 12px}
 .zm-zp4 .z4-area__name{font-size:14px;line-height:2.14}
 .zm-zp4 .z4-area__prefs{gap:0 14px}
 .zm-zp4 .z4-area__prefs li{font-size:15px}
 .zm-zp4 .z4-feat{padding:30px 0}
 .zm-zp4 .z4-feat .z4-h2s{margin-bottom:12px}
 .zm-zp4 .z4-feat__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 15px}
 .zm-zp4 .z4-feat__ttl{margin-top:8px;text-align:left}
 .zm-zp4 .z4-feat__date{margin-top:4px;text-align:left}
 .zm-zp4 .z4-list{padding:40px 0}
 .zm-zp4 .z4-list .z4-h2s{margin-bottom:12px}
 .zm-zp4 .z4-acc{padding:10px;box-shadow:2px 2px 10px rgba(19,30,51,.15);gap:6px}
 .zm-zp4 .z4-acc__sum{padding:12px 14px;font-size:14px}
 .zm-zp4 .z4-acc__panel{padding:12px 6px 4px}
 .zm-zp4 .z4-acc__links li{margin-right:18px}
 .zm-zp4 .z4-faq{padding:0 0 40px}
 .zm-zp4 .z4-faq .z4-h2s{margin-bottom:12px}
 .zm-zp4 .z4-faq__a p{font-size:14px}
 .zm-zp4 .z4-credit__list{columns:1}
}

/* 動きを減らす設定では全部止める */
@media (prefers-reduced-motion:reduce){
 .zm-zp4 *,.zm-zp4 *::before,.zm-zp4 *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
 .zm-zp4 .z4-slide__a:hover,.zm-zp4 .z4-card__a:hover .z4-card__img img,.zm-zp4 .z4-pc:hover .z4-pc__img img,.zm-zp4 .z4-db__a:hover,.zm-zp4 .z4-feat__a:hover{transform:none}
}