/* kotonokinote トップ 磨き上げレイヤー（top.php は触らず、見た目と並びだけ整える） */
:root{--kp-navy:#13294B;--kp-r:20px;--kp-sh:5px 6px 0 #13294B;--kp-cream:#FFF8EC}

/* ---------- ヒーロー：便利ツール行はヘッダーのボタンと二重なので隠す ---------- */
body.kp-on .kn-hero .kn-benrirow{display:none !important}
body.kp-on .kn-hero .kn-btns{margin-top:14px}
/* 検索チップの下地：柵と重なっても読めるように少し太い縁取り */
body.kp-on .kn-hero .kn-srchtags button{box-shadow:0 0 0 3px rgba(255,255,255,.75),2px 3px 0 var(--kp-navy)}
/* ヒーローの絵にゆるい動き：雲は既存、船はゆれ、太陽はゆっくり回る（既存）。路面電車は既存のまま */
body.kp-on .kn-hero svg .kn-boat{animation:kp-boat 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes kp-boat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(3px) rotate(1.5deg)}}
body.kp-on .kn-hero svg .ki-petal{animation:kp-sway 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
body.kp-on .kn-hero svg .ki-petal:nth-of-type(2n){animation-delay:-1.3s}
body.kp-on .kn-hero svg .ki-petal:nth-of-type(3n){animation-delay:-2.4s}
@keyframes kp-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
/* ---------- 新ヒーローの動き（弱め・くり返しが目立たない） ---------- */
body.kp-on .kn-hero svg .kp-swing{animation:kp-swing 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
@keyframes kp-swing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
body.kp-on .kn-hero svg .kp-birds{animation:kp-birds 28s linear infinite}
@keyframes kp-birds{0%{transform:translate(-80px,10px)}100%{transform:translate(260px,-14px)}}
body.kp-on .kn-hero svg .kp-balloon{animation:kp-bob 4s ease-in-out infinite}
body.kp-on .kn-hero svg .kp-buoy{animation:kp-bob 3.4s ease-in-out infinite -1s}
@keyframes kp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
body.kp-on .kn-hero svg .kn-tram{animation:kp-tram 22s linear infinite}
@keyframes kp-tram{0%{transform:translateX(-200px)}100%{transform:translateX(1900px)}}
body.kp-on .kn-hero svg .kp-waves{animation:kp-waves 5s ease-in-out infinite}
@keyframes kp-waves{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
@media (prefers-reduced-motion:reduce){body.kp-on .kn-hero svg *{animation:none !important}}

/* ---------- セクションの型を1つに：見出し＋手書き風サブ＋余白 ---------- */
body.kp-on .kn-sec{margin-top:34px}
body.kp-on .kn-sec .kn-sechead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
body.kp-on .kn-sec .kn-sechead .kn-h2{font-size:20px;line-height:1.3}
body.kp-on .kn-sec .kn-sechead .kn-hand{font-size:13px;opacity:.85}

/* アプリのパネル：紫グラデをやめ、イベント欄と同じ「やさしい単色の地＋紺フチ」に */
body.kp-on .kn-apps{background:#E4DCFF !important;background-image:none !important;border:2.5px solid var(--kp-navy) !important;border-radius:var(--kp-r) !important;box-shadow:var(--kp-sh) !important}
body.kp-on .kn-apps .kn-appshead,body.kp-on .kn-apps .kn-appshead h2,body.kp-on .kn-apps .kn-appshead p{color:var(--kp-navy) !important}
body.kp-on .kn-apps .kn-appshead{margin-bottom:12px;background:none !important;background-image:none !important}

/* ---------- なにしてあそぶ：孤立する「ぜんぶ見る」を横長バーに、ドットマップを他と同じ明るさに ---------- */
body.kp-on .kn-gnrs > a:last-child{grid-column:1 / -1}
body.kp-on .kn-gnrs > a:last-child b::after{content:"　→"}
body.kp-on .kn-gnrs > a[href*="dotmap"]{background:#fff !important;color:var(--kp-navy) !important}
body.kp-on .kn-gnrs > a[href*="dotmap"] b,body.kp-on .kn-gnrs > a[href*="dotmap"] small{color:var(--kp-navy) !important}

/* ---------- アプリ：6本だけ見せて「もっと見る」、NEWは新しい3本だけ ---------- */
body.kp-on .kn-applist > .kn-app.kp-hide{display:none}
body.kp-on .kn-applist > .kn-app .kn-appnew.kp-hide{display:none}
body.kp-on .kp-more{display:flex;justify-content:center;margin:16px 0 4px}
body.kp-on .kp-more button{font:inherit;font-weight:900;color:var(--kp-navy);background:#FFC53D;border:2.5px solid var(--kp-navy);border-radius:999px;padding:10px 22px;box-shadow:3px 4px 0 var(--kp-navy);cursor:pointer}
body.kp-on .kp-more button:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--kp-navy)}

/* ---------- ジャンルからさがす → 「見たいページへ」：下の2本の帯もカードの型に ---------- */
body.kp-on #genre .kgs-entry,body.kp-on #genre .kjt-entry{border:2.5px solid var(--kp-navy);border-radius:16px;box-shadow:var(--kp-sh);background:#fff;margin-top:14px}

/* ---------- イベントカレンダー：過ぎた週は畳む・マスを低く ---------- */
body.kp-on #kn-cal .cg > .kp-pastweek{display:none}
body.kp-on #kn-cal .cg > span.e,body.kp-on #kn-cal .cg > button.d{min-height:72px !important;height:auto !important;padding:8px 6px 20px}
body.kp-on #kn-cal .cg > button.d{aspect-ratio:auto !important}
body.kp-on .kp-calnote{font-size:12px;color:#5b6678;margin:8px 2px 0}

/* ---------- 新着・更新：見出し行をほかと揃える ---------- */
body.kp-on #news .kn-sechead{align-items:center}

/* ---------- 最近見たスポット：ほかのカードと同じ角丸・影 ---------- */
body.kp-on .kn-recent .kn-recrow > *{border-radius:14px}

/* スマホ */
@media (max-width:640px){
  body.kp-on .kn-sec{margin-top:26px}
  body.kp-on .kn-sec .kn-sechead .kn-h2{font-size:18px}
  /* ヒーロー：検索チップは1行で横スクロール（縦を節約） */
  body.kp-on .kn-hero .kn-srchtags{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body.kp-on .kn-hero .kn-srchtags::-webkit-scrollbar{display:none}
  body.kp-on .kn-hero .kn-srchtags button{flex:0 0 auto}
  /* なにしてあそぶ：3列のコンパクト型（説明は省き、名前と数だけ） */
  body.kp-on .kn-gnrs{grid-template-columns:repeat(3,1fr) !important;gap:8px !important}
  body.kp-on .kn-gnrs > a.kn-gnr{padding:10px 4px 9px !important;grid-template-columns:1fr !important;justify-items:center;text-align:center;row-gap:4px}
  body.kp-on .kn-gnrs > a.kn-gnr .ic{width:40px;height:40px}
  body.kp-on .kn-gnrs > a.kn-gnr .ic svg{width:24px;height:24px}
  body.kp-on .kn-gnrs > a.kn-gnr b{font-size:12.5px;line-height:1.2}
  body.kp-on .kn-gnrs > a.kn-gnr small{display:none}
  body.kp-on .kn-gnrs > a.kn-gnr em{font-size:10px;padding:1px 7px}
  body.kp-on .kn-gnrs > a:last-child{grid-column:1 / -1;grid-template-columns:auto auto auto !important;column-gap:10px;padding:10px 12px !important}
  body.kp-on .kn-gnrs > a:last-child .ic{width:34px;height:34px}
  /* カレンダー */
  body.kp-on #kn-cal .cg > span.e,body.kp-on #kn-cal .cg > button.d{min-height:56px !important;padding:6px 3px 16px}
}
body.kp-on .kn-hero svg .hb-mill{animation:hb-mill 14s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes hb-mill{to{transform:rotate(360deg)}}
body.kp-on .kn-hero svg .hb-ferry{animation:hb-ferry 70s linear infinite}
@keyframes hb-ferry{0%{transform:translateX(-200px)}100%{transform:translateX(1900px)}}
body.kp-on .kn-hero svg .hb-seesaw{animation:hb-seesaw 4.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes hb-seesaw{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
body.kp-on .kn-hero svg .hb-spring{animation:hb-spring 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes hb-spring{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
body.kp-on .kn-hero svg .hb-glow{animation:hb-glow 6s ease-in-out infinite}
@keyframes hb-glow{0%,100%{opacity:.75}50%{opacity:1}}
body.kp-on .kn-hero svg .hb-beacon{animation:hb-beacon 2s ease-in-out infinite}
@keyframes hb-beacon{0%,100%{opacity:1}50%{opacity:.3}}