/* トップの並び（DESIGN.md §44）。paper.css の組み立て元は運営者のPCにあるので、クラウドではこのファイルに足す */

/* 02 町を探す：小さなボタン4つ（B の形） */
.pg-top .sagasu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.pg-top .sk{display:flex;flex-direction:column;gap:4px;padding:14px 44px 14px 16px;position:relative;
  background:#FFFCF3;color:#23302F;text-decoration:none;border:2px solid #23302F;border-radius:6px;box-shadow:0 3px 0 #23302F;
  transition:translate .08s,box-shadow .08s;-webkit-tap-highlight-color:transparent}
.pg-top .sk b{font-family:var(--f-title);font-size:19px;line-height:1.35}
.pg-top .sk small{font-size:13.5px;color:#4c5758;line-height:1.5}
.pg-top .sk::after{content:"→";position:absolute;right:16px;top:50%;translate:0 -50%;font-weight:700;font-size:18px}
.pg-top .sk:active{translate:0 3px;box-shadow:0 0 0 #23302F}
@media (hover:hover){.pg-top .sk:hover{translate:0 1px;box-shadow:0 2px 0 #23302F;background:#F4ECDB}}
@media (max-width:760px){.pg-top .sagasu{grid-template-columns:1fr;gap:12px}.pg-top .sk{padding:12px 40px 12px 14px}.pg-top .sk b{font-size:17px}}

/* 03 遊ぶと読む：窓の1年の入口 */
.pg-top .mado-mini{display:block;position:relative;margin-top:18px;max-width:560px;aspect-ratio:4/3;overflow:hidden;border:2px solid #23302F;border-radius:6px;background:#E3D8C2}
.pg-top .mado-mini img{display:block;width:100%;height:100%;object-fit:cover;animation:mm-pan 24s ease-in-out infinite alternate}
.pg-top .mado-mini .mm-frame{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(#23302F,#23302F) 50% 0/6px 100% no-repeat,linear-gradient(#23302F,#23302F) 0 50%/100% 6px no-repeat;box-shadow:inset 0 0 0 8px #FFFCF3,inset 0 0 0 10px #23302F}
@keyframes mm-pan{from{transform:scale(1.08) translateX(-2%)}to{transform:scale(1.08) translateX(2%)}}
@media (prefers-reduced-motion:reduce){.pg-top .mado-mini img{animation:none}}
.pg-top .t-asobu .t-note{margin-top:6px}
.pg-top .mm-go{margin-top:16px}
.pg-top .mm-skip{margin:16px 0 0;font-size:14px}
.pg-top .mm-skip a{color:#2E6E73;text-underline-offset:3px}
.pg-top .yomi-go{margin:22px 0 0}

/* 04 ランキング：貼り紙1枚＋ほかのランキングの名前 */
.pg-top .rk-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.pg-top .rk-chips a{display:inline-flex;align-items:center;min-height:36px;padding:4px 12px;background:#FFFCF3;color:#23302F;font-size:14px;font-weight:700;text-decoration:none;border:1.5px solid #23302F;border-radius:6px;box-shadow:0 2px 0 #23302F}
.pg-top .rk-chips a:active{translate:0 2px;box-shadow:0 0 0 #23302F}

/* 05 都道府県から：スマホでは名前の出ないタイル地図を出さず、県の一覧だけにする */
@media (max-width:760px){.pg-top .tiles{display:none}}
.pg-top .mado-mini:active{translate:0 2px}

/* いちばん大事なボタン A（診断と窓の1年の入口の帯）。DESIGN.md §45
   後ろの版画の絵と同じ2色・同じざらざらだと絵の一部に見えて押されにくいので、
   つやのある青緑の「物」にして、名前は黄色の札、説明は名前の下に置く2段にする */
.pg-top a.shin-go{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:6px;
  width:100%;max-width:520px;box-sizing:border-box;padding:10px 12px 12px;
  color:#fff;background:linear-gradient(#2F7F84,#1D5B60);background-image:linear-gradient(#2F7F84,#1D5B60);
  border:2px solid #0E2A2C;border-radius:12px;outline:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 6px 0 #0E2A2C,0 10px 16px rgba(14,42,44,.3);
  -webkit-tap-highlight-color:transparent;transition:translate .08s,box-shadow .08s}
.pg-top a.shin-go .sg-l{grid-column:1;justify-self:start;padding:6px 14px;font-size:21px;
  color:#23302F;background:#FFD25A;background-image:none;border-radius:8px;box-shadow:0 2px 0 #B8862A}
.pg-top a.shin-go .sg-t{grid-column:1;padding:0 2px;font-size:15.5px;font-weight:700;line-height:1.5;opacity:1;color:#fff}
.pg-top a.shin-go .sg-b{grid-column:2;grid-row:1/3;width:44px;height:44px;margin:0 0 0 18px;font-size:24px;
  color:#1D5B60;background:#fff;background-image:none}
/* 押したとき（スマホでも）沈む */
.pg-top a.shin-go:active{translate:0 4px;transform:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 #0E2A2C,0 4px 8px rgba(14,42,44,.25)}
@media (hover:hover){.pg-top a.shin-go:hover{transform:none;translate:0 2px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 4px 0 #0E2A2C,0 8px 12px rgba(14,42,44,.28)}}
.pg-top a.shin-go:focus-visible{outline:3px solid #E0A93B;outline-offset:3px}
/* 横いっぱいにせず、中身の幅に合わせる（文字と矢印のあいだが空きすぎるため。ひろさん 10/20） */
.pg-top a.shin-go{display:inline-grid;width:auto}