/* ito-help-nav.css :: ヘルプへの導線（メニュー / パネル / インラインリンク / FAB）
   ============================================================================
   ito-help.css がヘルプ「センターの中」の見た目を持つのに対し、
   このファイルはヘルプ「への入口」だけを持つ。入口はウォレット、加盟店、
   マーケットプレイスなど ito-frontend.css を読み込まない画面にも置くため、
   --ito-* トークンにはすべて既定値を添えて、単体でも成立するようにしてある。

   接頭辞は .hn-（help navigation）。既存の .ito-* とは衝突しない。
   ========================================================================= */

.hn-menu,
.hn-panel,
.hn-inline,
.hn-fab,
.hn-footnav {
  --hn-blue-d:  var(--ito-blue-d,  #1a4b8c);
  --hn-blue-m:  var(--ito-blue-m,  #2563a8);
  --hn-blue-l:  var(--ito-blue-l,  #3b82c4);
  --hn-blue-xl: var(--ito-blue-xl, #dbeafe);
  --hn-blue-2:  var(--ito-blue-2,  #eff6ff);
  --hn-text:    var(--ito-text,    #1e3a5f);
  --hn-muted:   var(--ito-muted,   #4a6fa5);
  --hn-bdr:     var(--ito-bdr,     #c7dcf5);
  --hn-r:       var(--ito-r,       10px);
  --hn-rl:      var(--ito-rl,      16px);
  --hn-font:    var(--ito-font, -apple-system, BlinkMacSystemFont, 'Noto Sans JP', sans-serif);
  font-family: var(--hn-font);
}

/* ── カテゴリの色味 ──────────────────────────────────────
   アイコンは配色を内部に持つので、ここでは面と罫線だけを変える。 */
.hn-tint-sky   { --hn-tint-bg: #eff6ff; --hn-tint-bd: #c7dcf5; }
.hn-tint-slate { --hn-tint-bg: #f1f5f9; --hn-tint-bd: #cbd5e1; }
.hn-tint-rose  { --hn-tint-bg: #fdf2f6; --hn-tint-bd: #f4cddd; }
.hn-tint-mint  { --hn-tint-bg: #eefaf4; --hn-tint-bd: #bfe6d5; }
.hn-tint-amber { --hn-tint-bg: #fdf6e8; --hn-tint-bd: #f0dcb4; }

/* ══════════════════════════════════════════════════════════
   1. ヘッダーのメガメニュー
   ══════════════════════════════════════════════════════════ */
.hn-menu { position: relative; display: inline-block; }
.hn-menu > summary { list-style: none; cursor: pointer; }
.hn-menu > summary::-webkit-details-marker { display: none; }

.hn-menu-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--hn-r);
  font-size: 13.5px; font-weight: 600; color: var(--hn-blue-d);
  transition: background .15s, color .15s;
}
.hn-menu-btn:hover { background: var(--hn-blue-2); }
.hn-menu > summary:focus-visible .hn-menu-btn {
  outline: 2px solid var(--hn-blue-l); outline-offset: 2px;
}
.hn-menu-btn-ico { flex: none; }
.hn-menu-caret {
  width: 0; height: 0; margin-left: 1px;
  border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0;
  transition: transform .15s;
}
.hn-menu[open] .hn-menu-caret { transform: rotate(180deg); }

.hn-menu-panel {
  position: absolute; top: calc(100% + 10px); z-index: 900;
  width: min(640px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--hn-bdr); border-radius: var(--hn-rl);
  box-shadow: 0 16px 44px rgba(26, 75, 140, .16);
  padding: 16px; animation: hn-drop .14s ease-out;
}
.hn-menu--right .hn-menu-panel { right: 0; }
.hn-menu--left  .hn-menu-panel { left: 0; }

@keyframes hn-drop { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .hn-menu-panel { animation: none; } }

/* 検索 */
.hn-menu-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--hn-bdr); border-radius: var(--hn-r);
  padding: 8px 12px; margin-bottom: 14px; color: var(--hn-muted);
  background: var(--hn-blue-2);
}
.hn-menu-search:focus-within { border-color: var(--hn-blue-l); background: #fff; }
.hn-menu-search input {
  flex: 1; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 13.5px; color: var(--hn-text);
}

/* カテゴリ2列 */
.hn-menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.hn-menu-col { list-style: none; margin: 0; padding: 0; }

.hn-menu-cat {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--hn-r);
  border: 1px solid transparent; text-decoration: none;
  transition: background .14s, border-color .14s;
}
.hn-menu-cat:hover {
  background: var(--hn-tint-bg, #eff6ff);
  border-color: var(--hn-tint-bd, #c7dcf5);
}
.hn-menu-cat-ico { flex: none; display: flex; }
.hn-menu-cat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hn-menu-cat-txt strong {
  font-size: 13.5px; font-weight: 700; color: var(--hn-blue-d); line-height: 1.3;
}
.hn-menu-cat-txt small {
  font-size: 11.5px; color: var(--hn-muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hn-menu-cat-n {
  flex: none; font-size: 10.5px; font-weight: 700; color: var(--hn-blue-m);
  background: rgba(37, 99, 168, .09); border-radius: 20px; padding: 2px 7px;
}

/* 下部のクイックリンク */
.hn-menu-quick {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
  margin: 14px 0 0; padding: 13px 0 0; border-top: 1px solid var(--hn-bdr);
}
.hn-menu-quick a {
  display: inline-block; font-size: 12px; color: var(--hn-blue-m);
  background: var(--hn-blue-2); border-radius: 20px; padding: 5px 11px;
  text-decoration: none; transition: background .14s;
}
.hn-menu-quick a:hover { background: var(--hn-blue-xl); }

.hn-menu-all {
  display: block; margin-top: 12px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: var(--hn-blue-m); text-decoration: none;
}
.hn-menu-all:hover { text-decoration: underline; }

/* 狭い画面ではドロップダウンではなく全幅のシートにする。
   親のヘッダーが overflow:hidden でも切れないよう fixed で出す。 */
@media (max-width: 720px) {
  .hn-menu-panel {
    position: fixed; left: 8px; right: 8px; top: auto;
    width: auto; max-height: 72vh; overflow-y: auto;
  }
  .hn-menu-cols { grid-template-columns: 1fr; }
  .hn-menu-cat-txt small { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════
   2. 画面下部の「この画面のヘルプ」
   ══════════════════════════════════════════════════════════ */
.hn-panel {
  background: #fff; border: 1px solid var(--hn-bdr); border-radius: var(--hn-rl);
  padding: 20px 22px; margin: 28px 0;
}
.hn-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hn-panel-ico { flex: none; display: flex; }
.hn-panel-head h3 {
  margin: 0; font-size: 15px; font-weight: 800; color: var(--hn-blue-d);
}

.hn-panel-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.hn-panel-list a {
  display: block; height: 100%; padding: 11px 13px;
  border: 1px solid var(--hn-bdr); border-radius: var(--hn-r);
  background: var(--hn-blue-2); text-decoration: none;
  transition: border-color .14s, transform .14s;
}
.hn-panel-list a:hover {
  border-color: var(--hn-blue-l); transform: translateY(-1px);
}
.hn-panel-list strong {
  display: block; font-size: 13.5px; font-weight: 700; color: var(--hn-blue-d);
}
.hn-panel-list small {
  display: block; margin-top: 3px; font-size: 11.5px; color: var(--hn-muted); line-height: 1.5;
}

.hn-panel-foot {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--hn-bdr);
}
.hn-panel-foot a {
  font-size: 12.5px; font-weight: 600; color: var(--hn-blue-m); text-decoration: none;
}
.hn-panel-foot a:hover { text-decoration: underline; }

.hn-panel--compact { padding: 14px 16px; margin: 18px 0; }
.hn-panel--compact .hn-panel-list { grid-template-columns: 1fr; gap: 6px; }

@media (max-width: 720px) {
  .hn-panel-list { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   3. 項目に添えるインラインリンク
   ══════════════════════════════════════════════════════════ */
.hn-inline {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--hn-blue-m);
  text-decoration: none; vertical-align: middle;
}
.hn-inline:hover { color: var(--hn-blue-d); text-decoration: underline; }
.hn-inline svg { flex: none; opacity: .8; }
.hn-inline:hover svg { opacity: 1; }

.hn-inline--icon {
  width: 22px; height: 22px; justify-content: center; gap: 0;
  border-radius: 50%; color: var(--hn-muted);
}
.hn-inline--icon:hover { background: var(--hn-blue-xl); color: var(--hn-blue-d); }

/* ══════════════════════════════════════════════════════════
   4. 右下のヘルプボタン
   ══════════════════════════════════════════════════════════ */
.hn-fab { position: fixed; bottom: 20px; z-index: 880; }
.hn-fab--right { right: 20px; }
.hn-fab--left  { left: 20px; }

.hn-fab > summary { list-style: none; cursor: pointer; }
.hn-fab > summary::-webkit-details-marker { display: none; }
.hn-fab > summary {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--hn-blue-m); color: #fff;
  border-radius: 24px; padding: 10px 16px;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(26, 75, 140, .28);
  transition: background .15s;
}
.hn-fab > summary:hover { background: var(--hn-blue-d); }

.hn-fab-panel {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  width: min(300px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--hn-bdr); border-radius: var(--hn-rl);
  box-shadow: 0 14px 38px rgba(26, 75, 140, .18);
  padding: 15px 16px;
}
.hn-fab--left .hn-fab-panel { right: auto; left: 0; }
.hn-fab-panel h4 {
  margin: 0 0 9px; font-size: 13px; font-weight: 800; color: var(--hn-blue-d);
}
.hn-fab-panel ul { list-style: none; margin: 0; padding: 0; }
.hn-fab-panel li + li { margin-top: 2px; }
.hn-fab-panel li a {
  display: block; padding: 7px 9px; border-radius: 8px;
  font-size: 13px; color: var(--hn-text); text-decoration: none;
}
.hn-fab-panel li a:hover { background: var(--hn-blue-2); color: var(--hn-blue-d); }

.hn-fab-foot {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--hn-bdr);
}
.hn-fab-foot a, .hn-fab-chat {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--hn-blue-m);
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: none;
}
.hn-fab-foot a:hover, .hn-fab-chat:hover { text-decoration: underline; }

/* 画面が狭いときはラベルを畳んで丸ボタンにする。
   入力欄の上に重なって操作を妨げるのを避けるため。 */
@media (max-width: 560px) {
  .hn-fab { bottom: 14px; }
  .hn-fab--right { right: 14px; }
  .hn-fab > summary { padding: 11px; border-radius: 50%; }
  .hn-fab-txt { display: none; }
}

/* ══════════════════════════════════════════════════════════
   5. フッターの索引
   ══════════════════════════════════════════════════════════ */
.hn-footnav h5 {
  margin: 0 0 10px; font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--hn-blue-d);
}
.hn-footnav ul { list-style: none; margin: 0; padding: 0; }
.hn-footnav li + li { margin-top: 5px; }
.hn-footnav a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--hn-muted); text-decoration: none;
}
.hn-footnav a:hover { color: var(--hn-blue-m); text-decoration: underline; }
.hn-footnav-n {
  font-size: 10px; font-weight: 700; color: var(--hn-blue-m);
  background: rgba(37, 99, 168, .09); border-radius: 20px; padding: 1px 6px;
}
.hn-footnav-all { margin-top: 10px !important; }
.hn-footnav-all a { font-weight: 700; color: var(--hn-blue-m); }

/* ══════════════════════════════════════════════════════════
   6. ヘルプトップのカテゴリカード（index.blade.php で使う）
   ══════════════════════════════════════════════════════════ */
.hn-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.hn-cat {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--hn-bdr); border-radius: var(--hn-rl);
  padding: 22px 24px; text-decoration: none;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.hn-cat:hover {
  border-color: var(--hn-tint-bd, #c7dcf5); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 75, 140, .08);
}
.hn-cat-ico {
  flex: none; width: 62px; height: 62px; border-radius: 14px;
  background: var(--hn-tint-bg, #eff6ff);
  display: flex; align-items: center; justify-content: center;
}
.hn-cat-body { flex: 1; min-width: 0; }
.hn-cat-body h4 {
  margin: 0 0 5px; font-size: 16.5px; font-weight: 800; color: var(--hn-blue-d);
}
.hn-cat-body > p {
  margin: 0 0 12px; font-size: 13px; color: var(--hn-muted); line-height: 1.65;
}
.hn-cat-body ul {
  list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--hn-bdr);
}
.hn-cat-body li {
  display: flex; gap: 7px; font-size: 12.5px; color: var(--hn-muted); padding: 2.5px 0;
}
.hn-cat-body li::before { content: '›'; color: var(--hn-blue-l); flex: none; }

@media (max-width: 820px) {
  .hn-cats { grid-template-columns: 1fr; }
  .hn-cat { padding: 18px; gap: 13px; }
  .hn-cat-ico { width: 50px; height: 50px; }
}

/* ══════════════════════════════════════════════════════════
   7. カテゴリページ（/help/{category}）
   ══════════════════════════════════════════════════════════ */
.hn-cathero {
  display: flex; align-items: flex-start; gap: 20px;
  --hn-blue-d: var(--ito-blue-d, #1a4b8c);
  --hn-muted:  var(--ito-muted,  #4a6fa5);
  --hn-bdr:    var(--ito-bdr,    #c7dcf5);
  --hn-blue-l: var(--ito-blue-l, #3b82c4);
  --hn-blue-m: var(--ito-blue-m, #2563a8);
  --hn-blue-2: var(--ito-blue-2, #eff6ff);
  --hn-r:      var(--ito-r,      10px);
}
.hn-cathero-ico {
  flex: none; width: 88px; height: 88px; border-radius: 20px;
  background: var(--hn-tint-bg, #eff6ff);
  display: flex; align-items: center; justify-content: center;
}
.hn-cathero-lead {
  margin: 10px 0 0; max-width: 60ch;
  font-size: 14px; line-height: 1.75; color: var(--hn-muted);
}

/* 記事一覧。番号を残すのは、順番に読む前提の章立てがあるため。 */
.hn-artlist {
  list-style: none; margin: 0; padding: 0;
  background: #fff; border: 1px solid var(--hn-bdr); border-radius: var(--ito-rl, 16px);
  overflow: hidden;
}
.hn-artlist li + li { border-top: 1px solid var(--hn-bdr); }
.hn-artlist a {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px; text-decoration: none; transition: background .14s;
}
.hn-artlist a:hover { background: var(--hn-blue-2); }
.hn-artlist-n {
  flex: none; font-family: var(--ito-mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 700; color: var(--hn-blue-l);
}
.hn-artlist-txt { flex: 1; min-width: 0; }
.hn-artlist-txt strong {
  display: block; font-size: 14.5px; font-weight: 700; color: var(--hn-blue-d);
}
.hn-artlist-txt small {
  display: block; margin-top: 3px; font-size: 12.5px; color: var(--hn-muted); line-height: 1.6;
}
.hn-artlist-go { flex: none; color: var(--hn-blue-l); font-size: 15px; }
.hn-artlist a:hover .hn-artlist-go { color: var(--hn-blue-m); }

@media (max-width: 720px) {
  .hn-cathero { flex-direction: column; gap: 14px; }
  .hn-cathero-ico { width: 64px; height: 64px; border-radius: 16px; }
  .hn-artlist a { padding: 14px 16px; gap: 12px; }
}

/* ══════════════════════════════════════════════════════════
   8. 記事本文の図版
   ══════════════════════════════════════════════════════════
   .md の中に <figure class="ito-help-fig"> として書く。
   図は幅いっぱいまで伸ばし、縦横比は viewBox に任せる。 */
.ito-help-fig {
  margin: 24px 0; padding: 18px 20px 14px;
  background: var(--ito-blue-2, #eff6ff);
  border: 1px solid var(--ito-bdr, #c7dcf5);
  border-radius: var(--ito-rl, 16px);
}
.ito-help-fig svg { display: block; width: 100%; height: auto; }
.ito-help-fig figcaption {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--ito-bdr, #c7dcf5);
  font-size: 12.5px; line-height: 1.7; color: var(--ito-muted, #4a6fa5);
}

/* 図を横に2つ並べたいとき */
.ito-help-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; }
.ito-help-figs .ito-help-fig { margin: 0; }
@media (max-width: 720px) { .ito-help-figs { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   9. FAQ ↔ ヘルプセンターの連携
   ══════════════════════════════════════════════════════════
   frontend/faq.blade.php と frontend/sections/faq.blade.php、
   および faq-help-link / faq-help-cta が使う。

   もとは _append-to-ito-help.css として置かれ、ito-help.css へ
   追記される想定だったが、FAQ が出るのはトップと
   /frequently-asked-questions で、どちらも ito-help.css を読み込まない。
   導線用のこのファイルに移し、partial 側から読み込ませる。

   .ito-fq 系の基本形は ito-frontend.css が持つ。ここでは
   FAQ 専用ページ（.ito-faq-list--wide）でだけ上書きする。
   トップページの FAQ セクションは短い一覧なので、既存のままにしておく。 */

/* ── ヒーローのリード文 ── */
.ito-faq-lead{
  max-width:62ch; margin:14px 0 0;
  font-size:14.5px; line-height:1.85; color:var(--ito-muted, #4a6fa5);
}

/* ── FAQ 専用ページの一覧 ── */
.ito-faq-list--wide{ max-width:840px; gap:10px; }

.ito-faq-list--wide .ito-fq{
  border-radius:var(--ito-rl, 16px);
  transition:border-color .16s, box-shadow .16s;
}
.ito-faq-list--wide .ito-fq:hover{ border-color:#9dc0e2; }
.ito-faq-list--wide .ito-fq.open{
  border-color:#9dc0e2; box-shadow:0 4px 16px rgba(26,75,140,.07);
}

/* 質問。開閉するものだと分かるように、余白と字を大きめに取る */
.ito-faq-list--wide .ito-fq-q{
  padding:18px 24px; font-size:15px; font-weight:700; line-height:1.6;
}
.ito-faq-list--wide .ito-fq-q:focus-visible{
  outline:2px solid var(--ito-blue-l, #3b82c4); outline-offset:-2px;
}

/* 開いた記号は丸で囲む。行の右端に文字が1つ浮いているように見えるのを防ぐ */
.ito-faq-list--wide .ito-fq-ch{
  width:24px; height:24px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ito-blue-2, #eff6ff); font-size:15px; line-height:1;
}
.ito-faq-list--wide .ito-fq.open .ito-fq-ch{ background:var(--ito-blue-xl, #dbeafe); }

.ito-faq-list--wide .ito-fq-a{ padding:16px 24px 20px; font-size:14px; line-height:1.9; }
.ito-faq-list--wide .ito-fq-a p{ margin:0; }

.ito-faq-empty{
  max-width:840px; margin:0 auto; padding:40px 0; text-align:center;
  font-size:14px; color:var(--ito-muted, #4a6fa5);
}

/* ── 各回答の下に出る「詳しくは」リンク ──
   答えの続きではなく「別の場所へ移る」導線なので、
   本文とのあいだに区切りを入れて、答えの一部に見えないようにする。 */
.ito-faq-more{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px; padding:7px 13px;
  font-family:var(--ito-font, inherit); font-size:12.5px; font-weight:700;
  color:#2563a8; background:#eff6ff;
  border:1px solid #c7dcf5; border-radius:20px;
  text-decoration:none; transition:background .15s, border-color .15s, color .15s;
}
.ito-faq-more:hover{ background:#dbeafe; border-color:#9dc0e2; color:#1a4b8c; }
.ito-faq-more span{ transition:transform .15s; }
.ito-faq-more:hover span{ transform:translateX(2px); }

.ito-fq-a .ito-faq-more{
  margin-top:16px; padding-top:7px;
}
.ito-fq-a > p + .ito-faq-more{
  margin-top:16px;
  border-top:0;
}

/* 旧テーマ側のアコーディオンが残っている画面用 */
.accordion-content .ito-faq-more{ margin-top:10px; }

/* ── 一覧の下に置くヘルプセンター導線 ──
   ここは「FAQ を読み終えたが解決していない人」だけが見る場所。
   本文と地続きに見えると読み飛ばされるので、面と枠で明確に切る。 */
.ito-help-cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px 32px; flex-wrap:wrap;
  max-width:840px; margin:28px auto 0; padding:26px 30px;
  background:#fff; border:1px solid var(--ito-bdr, #c7dcf5);
  border-radius:var(--ito-rl, 16px);
  position:relative; overflow:hidden;
}
/* 左端の帯。見出しが大きくなくても、目が止まる手がかりになる */
.ito-help-cta::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, #3b82c4, #1a4b8c);
}
.ito-help-cta-text{ flex:1 1 340px; min-width:0; }
.ito-help-cta h3{
  font-size:17px; font-weight:800; color:var(--ito-blue-d, #1a4b8c);
  margin:0 0 6px; line-height:1.5;
}
.ito-help-cta p{
  font-size:13.5px; color:var(--ito-muted, #4a6fa5); margin:0; line-height:1.85;
}
.ito-help-cta-links{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; flex:none;
}
.ito-help-cta-sub{
  font-size:12.5px; color:#2563a8; font-weight:600; text-decoration:none;
}
.ito-help-cta-sub:hover{ color:#1a4b8c; text-decoration:underline; }

/* ito-btn-primary が読み込まれていない画面でも、押せるものに見せる */
.ito-help-cta-links .ito-btn-primary{
  display:inline-block; padding:11px 22px; border-radius:var(--ito-r, 10px);
  font-size:13.5px; font-weight:700; text-decoration:none; white-space:nowrap;
}

@media (max-width:720px){
  .ito-help-cta{ padding:22px; gap:18px; }
  .ito-help-cta-links{ width:100%; }
  .ito-help-cta-links .ito-btn-primary{ width:100%; text-align:center; }
  .ito-faq-list--wide .ito-fq-q{ padding:15px 18px; font-size:14.5px; }
  .ito-faq-list--wide .ito-fq-a{ padding:14px 18px 18px; }
}

/* ── FAQ ページの検索欄 ──
   ヘルプセンターの .ito-help-search と同じ形だが、あちらは ito-help.css に
   あり、FAQ ページはそれを読み込まない。クラス名を分けて独立させる。
   同じクラス名で二重に定義すると、片方だけ直したときに食い違う。 */
.ito-faq-search{
  display:flex; max-width:520px; margin-top:20px;
  border:1px solid var(--ito-bdr, #c7dcf5); border-radius:var(--ito-r, 10px);
  background:#fff; overflow:hidden;
}
.ito-faq-search input{
  flex:1; border:0; outline:none; background:transparent;
  font-family:var(--ito-font, inherit); font-size:14px;
  color:var(--ito-text, #1e3a5f); padding:11px 15px;
}
.ito-faq-search input::placeholder{ color:var(--ito-muted, #4a6fa5); opacity:.75; }
.ito-faq-search:focus-within{
  border-color:var(--ito-blue-l, #3b82c4); box-shadow:0 0 0 3px rgba(59,130,196,.15);
}
.ito-faq-search button{
  border:0; background:var(--ito-blue-m, #2563a8); color:#fff;
  font-family:var(--ito-font, inherit); font-size:13px; font-weight:700;
  padding:0 20px; cursor:pointer; transition:background .15s;
}
.ito-faq-search button:hover{ background:var(--ito-blue-d, #1a4b8c); }

/* テーマ側に sr-only が無いため、読み上げ用のラベルを自前で隠す */
.ito-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}