/* ボタンの見た目を3種類にそろえる（DESIGN.md §43）
   A いちばん大事なボタン：トップの「移住先診断」の帯（.shin-go）と、診断の「結果を見る」のはんこ。ここでは触らない
   B ふつうのボタン：紙の地・墨の2pxの線・角6px・下に厚みの影。押すと沈む
   C 文の中のリンク：今のまま（下線）
   paper.css の組み立て元（scripts/dev/）は運営者のPCにあるので、クラウドではこのファイルに足す */
:root{--kb-ink:#23302F;--kb-paper:#FFFCF3}

/* ---- B ふつうのボタン ---- */
.pg-top .m-go,.pg-top .n-more,.pg-top .t-more a,.pg-top .pc-go,
.pg-pref .n-more,.pg-rank .k-more,
.tp .btns .btn,.hk-cta a,.kb,
.ad-card .ad-link a:not(:has(img:not([width="1"]))){
  display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;
  padding:9px 16px;margin-top:14px;
  background:var(--kb-paper) !important;color:var(--kb-ink) !important;
  border:2px solid var(--kb-ink) !important;border-radius:6px !important;
  box-shadow:0 3px 0 var(--kb-ink) !important;
  font-weight:700;font-size:15px;line-height:1.4;text-decoration:none;
  transition:translate .08s,box-shadow .08s;-webkit-tap-highlight-color:transparent}
.pg-top .n-more,.pg-pref .n-more,.pg-rank .k-more,.pg-top .pc-go{font-size:14px;min-height:40px;padding:7px 14px}
.pg-top .t-more{text-align:left}
.tp .btns .btn{margin-top:0}
.hk-cta a{display:flex;margin-top:0;line-height:1.45}
.hk-cta a::after,.kb::after{content:"→";margin-left:auto;padding-left:8px}

/* 押したとき（スマホの指・パソコンのクリック）に沈む。パソコンでは乗せたときに少し沈む */
.pg-top .t-more a:active,.pg-top .pc-go:active,.tp .btns .btn:active,.hk-cta a:active,.kb:active,
.ad-card .ad-link a:active,
.pg-top .m:active .m-go,.pg-top .notice:active .n-more,.pg-top .pc:active .pc-go,
.pg-pref .notice:active .n-more,.pg-rank .kami:active .k-more{
  translate:0 3px;box-shadow:0 0 0 var(--kb-ink) !important}
@media (hover:hover){
  .pg-top .t-more a:hover,.tp .btns .btn:hover,.hk-cta a:hover,.kb:hover,.ad-card .ad-link a:hover,
  .pg-top .m:hover .m-go,.pg-top .notice:hover .n-more,.pg-top .pc:hover .pc-go,
  .pg-pref .notice:hover .n-more,.pg-rank .kami:hover .k-more{translate:0 1px;box-shadow:0 2px 0 var(--kb-ink) !important;background:#F4ECDB !important}}

/* 町のページの「もっと見る」「閉じる」も同じ形に */
.more2>summary,.close2{border-radius:6px !important;box-shadow:0 3px 0 var(--kb-ink);transition:translate .08s,box-shadow .08s;-webkit-tap-highlight-color:transparent}
.more2>summary:active,.close2:active{translate:0 3px;box-shadow:0 0 0 var(--kb-ink)}

/* 紙のカード全体が押せるもの（はがき・窓口・貼り紙）：押すと少し沈む */
.pg-top .pc,.pg-top .m,.pg-top .notice,.pg-pref .notice,.pg-rank .kami,.tp a.pnote{-webkit-tap-highlight-color:transparent;transition:translate .08s}
.pg-top .pc:active,.pg-top .m:active,.pg-top .notice:active,.pg-pref .notice:active,.pg-rank .kami:active,.tp a.pnote:active{translate:0 2px}

/* はがきの「この町のカルテを見る」 */
.pg-top .pc-go{align-self:flex-start;margin-top:10px}

/* 町のページの「この町らしさ」の付せん：押すと、その話が載っているグループへ飛ぶ */
.tp a.pnote{display:block;color:inherit;text-decoration:none}
.tp a.pnote .pn-go{display:inline-block;margin-left:6px;font-style:normal;font-weight:700;font-size:13px;color:#2E6E73;white-space:nowrap}

/* スマホのメニューの「すべて」（DESIGN.md §44）。640px より狭いとき（ランキングが上に出ないとき）だけ出す */
.site-nav .nav-all{display:none;position:relative}
.site-nav .nav-all>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:2px 10px;
  border:1.5px solid var(--kb-ink);border-radius:6px;background:var(--kb-paper);box-shadow:0 2px 0 var(--kb-ink);font-weight:700;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.site-nav .nav-all>summary::-webkit-details-marker{display:none}
.site-nav .nav-all>summary::after{content:"▾"}
.site-nav .nav-all[open]>summary::after{content:"▴"}
.site-nav .nav-all>summary:active{translate:0 2px;box-shadow:0 0 0 var(--kb-ink)}
.site-nav .na-p{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:230px;display:flex;flex-direction:column;
  background:var(--kb-paper);border:2px solid var(--kb-ink);border-radius:6px;box-shadow:0 4px 0 var(--kb-ink);padding:6px 0}
.site-nav .na-p a{display:flex;align-items:center;min-height:44px;padding:0 16px;font-size:15px;font-weight:700;color:var(--kb-ink)}
.site-nav .na-p a+a{border-top:1px dotted #B9AE97}
@media (max-width:640px){.site-nav .nav-all{display:block}}
@media (max-width:430px){.site-nav .nav-hikaku{display:none}}
@media (max-width:370px){.site-nav a[href="/nita-machi/"]{display:none}.site-nav .nav-all>summary{padding:2px 8px}.logo span{font-size:15px}}

/* 診断の結果のカードの下と、町のページのはじめの「次にすること」（DESIGN.md §46・§47）。A 窓の1年（トップの帯と同じ形）・B 町のページ・C 似た町 */
.pg-sd .sd-next,.tp .tp-next{display:flex;flex-direction:column;gap:12px;margin:18px -4px 0;padding:16px 12px 6px;border-top:2px dashed var(--kb-ink)}
.pg-sd .sd-next a,.tp .tp-next a{text-decoration:none;-webkit-tap-highlight-color:transparent;transition:translate .08s,box-shadow .08s}
:is(.pg-sd,.tp) .nx-a{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:4px;padding:10px 12px 12px;color:#fff;
  background:linear-gradient(#2F7F84,#1D5B60);border:2px solid #0E2A2C;border-radius:12px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 5px 0 #0E2A2C}
:is(.pg-sd,.tp) .nx-a b{justify-self:start;padding:4px 10px;font-family:var(--f-title);font-size:17px;color:var(--kb-ink);background:#FFD25A;border-radius:7px;box-shadow:0 2px 0 #B8862A}
:is(.pg-sd,.tp) .nx-a small{grid-column:1;font-size:13.5px;font-weight:700;line-height:1.45}
:is(.pg-sd,.tp) .nx-a i{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;margin-left:8px;border-radius:50%;background:#fff;color:#1D5B60;font-style:normal;font-weight:700;font-size:20px}
:is(.pg-sd,.tp) .nx-a:active{translate:0 4px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 1px 0 #0E2A2C}
:is(.pg-sd,.tp) .nx-b{display:flex;align-items:center;min-height:46px;box-sizing:border-box;padding:8px 14px;font-size:15px;font-weight:700;color:var(--kb-ink);
  background:var(--kb-paper);border:2px solid var(--kb-ink);border-radius:6px;box-shadow:0 3px 0 var(--kb-ink)}
:is(.pg-sd,.tp) .nx-b::after{content:"→";margin-left:auto;padding-left:8px}
:is(.pg-sd,.tp) .nx-b:active{translate:0 3px;box-shadow:0 0 0 var(--kb-ink)}
:is(.pg-sd,.tp) .nx-c{align-self:flex-start;font-size:14px;color:#2E6E73;text-decoration:underline !important;text-underline-offset:3px;padding:2px}
@media (hover:hover){:is(.pg-sd,.tp) .nx-a:hover{translate:0 2px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 #0E2A2C}
  :is(.pg-sd,.tp) .nx-b:hover{translate:0 1px;box-shadow:0 2px 0 var(--kb-ink);background:#F4ECDB}}
/* パソコンでは3枚が横に並んでカードが細いので、丸い矢印を外して文字を小さく */
@media (min-width:761px){.pg-sd .nx-a{grid-template-columns:1fr}.pg-sd .nx-a i{display:none}
  .pg-sd .nx-a b{font-size:15px}.pg-sd .nx-a small{font-size:12.5px}.pg-sd .nx-b{font-size:14px;padding:8px 10px}}

/* 町のページ：はじめの紹介の下に置く。窓の1年は診断へ、小さく「答えずに見てみる」 */
.tp .tp-next{flex:1 1 100%;max-width:520px;margin:4px 0 0;padding:0;border-top:0}
.tp .tp-next .nx-skip{margin:-4px 0 4px;font-size:14px}
.tp .tp-next .nx-skip a{color:#2E6E73;text-decoration:underline;text-underline-offset:3px}
/* 町のページのいちばん下の「Xで紹介する」 */
.tp .t-sharex{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:26px 24px 0}
.tp .t-sharex span{font-size:14px;color:#3c4647}
@media (max-width:760px){.tp .t-sharex{margin:22px 12px 0}}
/* 県のページ：表紙の下から、町の台帳（一覧）へ飛ぶ（DESIGN.md §47） */
.pg-pref .p-jump{margin:18px 24px 0}
.pg-pref .p-jump .kb{margin-top:0}
.pg-pref .p-jump .kb::after{content:"↓"}
@media (max-width:760px){.pg-pref .p-jump{margin:16px 12px 0}.pg-pref .p-jump .kb{display:flex}}
.pg-pref #daicho{scroll-margin-top:12px}
/* 県のページの「この県で、町が決まらなければ。」（DESIGN.md「サイト内の動線」）。形は町のページの .nx-b と同じ */
.pg-pref .p-nx{display:flex;flex-direction:column;gap:12px;max-width:560px}
.pg-pref .p-nx .nx-b{display:flex;align-items:center;min-height:46px;box-sizing:border-box;padding:8px 14px;font-size:15px;font-weight:700;color:var(--kb-ink);text-decoration:none;
  background:var(--kb-paper);border:2px solid var(--kb-ink);border-radius:6px;box-shadow:0 3px 0 var(--kb-ink);-webkit-tap-highlight-color:transparent;transition:translate .08s,box-shadow .08s}
.pg-pref .p-nx .nx-b::after{content:"→";margin-left:auto;padding-left:8px}
.pg-pref .p-nx .nx-b:active{translate:0 3px;box-shadow:0 0 0 var(--kb-ink)}