/* スマホ表示の改善（rx-mobile）。テーマと各プラグインの後に読む */

/* タップの反応を速く（ダブルタップ拡大の待ちをなくす） */
a,button,label,summary,input,select,textarea,[role=button]{touch-action:manipulation}

/* 外部リンクの印を少し読みやすく */
.ext{font-size:11.5px}

/* ---------- ヘッダー：スマホ・タブレットでは上に固定 ---------- */
@media (max-width:1180px){
  html{scroll-padding-top:84px}
  .site-header{position:sticky;top:0;transition:transform .25s ease,box-shadow .25s ease}
  .site-header.rxmo-hide{transform:translateY(-105%);box-shadow:none}
  .admin-bar .site-header{top:32px}
  .site-header .gnav{max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain}
  .gnav li a{min-height:46px}
  .nav-toggle{min-height:40px}
}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
@media (max-width:600px){.admin-bar .site-header{top:0}}

/* ---------- スマホ（820px以下） ---------- */
@media (max-width:820px){
  /* 入力欄を押したとき iPhone が拡大しないよう 16px に */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=color]),
  select,textarea{font-size:16px!important}

  /* ログイン・マイページのボタン */
  .rxm-acct{min-width:40px;min-height:40px;justify-content:center}

  /* 「もっと見る」などの文字リンクを押しやすく */
  .cm-more,.cm-post,.fa-more{min-height:44px;display:inline-flex;align-items:center}
  .hl-more{display:inline-flex;align-items:center;min-height:40px}

  /* 並べ替え・地域・絞り込みのチップ */
  .bd-sort a,.jb-sort a{display:inline-flex;align-items:center;min-height:38px}
  .jb-region a{min-height:36px}
  .pb-jump a{display:inline-flex;align-items:center;min-height:40px}
  .pb-page{display:inline-flex;align-items:center;min-height:40px}
  .gsim-rate button{min-height:38px;padding:6px 14px;font-size:13.5px}
  .rxa-link{padding:10px 0}
  .os-reset{min-height:40px}
  .jb-logout{display:inline-flex;align-items:center;min-height:40px}
  .bd-rules-box>summary,.ksim-break>summary{padding-top:10px;padding-bottom:10px}
  .cm-chips a{display:inline-flex;align-items:center;min-height:36px}
  /* 一覧の文字リンク：行の高さは変えずに押せる範囲だけ広げる */
  .hl-items li a,.pb-list li a{padding:7px 0}

  /* 小さすぎるチェックボックス・ラジオボタン */
  .sup-onlynew,.bd-check input[type=checkbox],
  label input[type=checkbox]:not([class]),label input[type=radio]:not([class]){width:19px;height:19px;accent-color:var(--ai,#14806f)}

  /* トップ「目的から探す」の各リンクは行全体を押せるように */
  .ix li{padding:0;align-items:center}
  .ix li a{flex:1;padding:11px 0;min-height:44px;display:flex;align-items:center}

  /* フッターのリンク */
  .site-footer .fnav{gap:0 18px}
  .site-footer .fnav a{display:inline-block;padding:9px 0}
}

/* ---------- 小さいスマホ（640px以下） ---------- */
@media (max-width:640px){
  /* よく使うページ：名前を省略せず2行まで折り返す */
  .quick .q-t{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;font-size:13px;word-break:keep-all;overflow-wrap:anywhere}
  .quick a{min-height:52px}

  /* 目的から探す：開閉式（JS が .rxmo-ix を付けたときだけ） */
  .rxmo-ix .ix{padding:14px 16px}
  .rxmo-ix .ix-head{position:relative;margin-bottom:0;padding-right:46px}
  .rxmo-ix .ix-head h3{font-size:17px}
  .rxmo-ix .ix ul{display:none;margin-top:10px}
  .rxmo-ix .ix.is-open ul{display:block}
  .rxmo-ix-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:12px;background:rgba(255,255,255,.8);color:var(--tfg,var(--ai,#14806f));display:grid;place-items:center;cursor:pointer}
  .rxmo-ix-btn svg{transition:transform .2s}
  .ix.is-open .rxmo-ix-btn svg{transform:rotate(180deg)}
  .rxmo-ix-btn:focus-visible{outline:2px solid var(--ai,#14806f);outline-offset:2px}
}

/* ---------- 横にスクロールできる表の案内 ---------- */
.rxmo-xhint{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:6px 2px 0;font-size:12.5px;color:var(--sub,#5b6b70);transition:opacity .3s}
.rxmo-xhint svg{flex:none}
.rxmo-xhint.is-done{opacity:0}

/* ---------- ページの先頭へ戻るボタン ---------- */
.rxmo-top{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;width:48px;height:48px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ai,#14806f) 30%,#fff);background:rgba(255,255,255,.94);color:var(--ai,#14806f);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(20,60,50,.16);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility .2s,background .15s}
.rxmo-top.is-on{opacity:1;visibility:visible;transform:none}
.rxmo-top:hover{background:var(--ai,#14806f);color:#fff}
.rxmo-top:focus-visible{outline:3px solid var(--ai,#14806f);outline-offset:3px}
@media (min-width:1181px){.rxmo-top{right:28px;bottom:28px;width:52px;height:52px}}
@media print{.rxmo-top{display:none}}

@media (prefers-reduced-motion:reduce){
  .site-header,.rxmo-ix-btn svg,.rxmo-xhint,.rxmo-top{transition:none}
}