/* QUERYY カテゴリページのハブ（.qch）と監修者プロフィール（.qap）
   カテゴリ・投稿者ページだけで読み込む。色はQUERYYトップB案と共通 */
.qch, .qap {
  --qh-acc: #0a5cff;
  --qh-acc-d: #0040c8;
  --qh-ink: #0b1a33;
  --qh-ink2: #4a5874;
  --qh-line: #e3e8f0;
  --qh-soft: #f4f7fc;
  color: var(--qh-ink);
  font-feature-settings: "palt";
}
.qch *, .qap * { box-sizing: border-box; }
.qch h2, .qch h3, .qap h2, .qap h3 { text-align: left; }
.qch h2 span, .qch h3 span { margin: 0; }
.qch h2::before, .qch h2::after, .qch h3::before, .qch h3::after, .qap h2::before, .qap h2::after, .qap h3::before, .qap h3::after { content: none; display: none; }
.qch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- ハブ全体 ---- */
.qch { margin: 48px auto 0; }
.qch__in { max-width: 1240px; margin: 0 auto; display: grid; gap: 40px; }

/* 要約（定義・要点・監修者・最終更新） */
.qch-sum { display: grid; grid-template-columns: 220px 1fr; gap: 8px 40px; padding: 32px 0; border-top: 2px solid var(--qh-ink); border-bottom: 1px solid var(--qh-line); }
.qch-sum__label { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--qh-acc); }
.qch-sum__ttl { margin: 0; font-size: 28px; font-weight: 900; line-height: 1.35; }
.qch-sum__def { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.85; color: var(--qh-ink); }
.qch-sum__points { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.qch-sum__points li { position: relative; margin: 0; padding: 0 0 0 30px; font-size: 16px; font-weight: 600; line-height: 1.7; }
.qch-sum__points li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--qh-acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.qch-sum__meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 20px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--qh-line); font-size: 14px; color: var(--qh-ink2); }
.qch-sum__meta div { display: flex; gap: 8px; }
.qch-sum__meta dt { font-weight: 800; color: var(--qh-ink); }
.qch-sum__meta dd { margin: 0; }
.qch-sum__meta a { color: var(--qh-acc); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 小見出し */
.qch-h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; font-size: 22px; font-weight: 900; line-height: 1.4; }
.qch-h3__num { font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--qh-acc); font-variant-numeric: tabular-nums; }

/* まず読む記事 */
.qch-start__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.qch-start__item { margin: 0; padding: 0; }
.qch-start__item::before, .qch-start__item::marker { content: none; }
.qch-start__link { position: relative; display: flex; flex-direction: column; height: 100%; padding: 16px; border: 1px solid var(--qh-line); border-radius: 14px; background: #fff; color: var(--qh-ink); text-decoration: none; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s; }
.qch-start__link:hover { transform: translateY(-3px); border-color: var(--qh-acc); box-shadow: 0 14px 30px -18px rgba(10, 92, 255, .45); }
.qch-start__step { align-self: flex-start; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; background: var(--qh-acc); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.qch-start__img { display: block; aspect-ratio: 16 / 9; margin-bottom: 12px; overflow: hidden; border-radius: 8px; background: var(--qh-soft); }
.qch-start__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qch-start__title { flex: 1; font-size: 16px; font-weight: 800; line-height: 1.6; }
.qch-start__more { margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--qh-acc); }
.qch-start__more span { display: inline-block; transition: transform .25s; }
.qch-start__link:hover .qch-start__more span { transform: translateX(3px); }

/* テーマ別に読む */
.qch-topics__nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.qch-topics__nav a { padding: 7px 14px; border: 1px solid var(--qh-line); border-radius: 999px; background: #fff; color: var(--qh-ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .2s, color .2s; }
.qch-topics__nav a:hover { border-color: var(--qh-acc); color: var(--qh-acc); }
.qch-topics__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.qch-topic { padding: 24px; border: 1px solid var(--qh-line); border-radius: 14px; background: #fff; scroll-margin-top: 90px; }
.qch-topic__ttl { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.4; }
.qch-topic__lead { margin: 6px 0 0; font-size: 14px; line-height: 1.7; color: var(--qh-ink2); }
.qch-topic__center { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; margin: 16px 0 0; padding: 12px; border-radius: 10px; background: var(--qh-soft); color: var(--qh-ink); text-decoration: none; transition: background .2s; }
.qch-topic__center:hover { background: #e9f0ff; }
.qch-topic__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: #fff; }
.qch-topic__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qch-topic__badge { display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: 4px; background: var(--qh-ink); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.qch-topic__ctitle { display: block; font-size: 15px; font-weight: 800; line-height: 1.55; }
.qch-topic__list { margin: 12px 0 0; padding: 0; list-style: none; }
.qch-topic__list li { margin: 0; border-bottom: 1px solid var(--qh-line); }
.qch-topic__list li:last-child { border-bottom: 0; }
.qch-topic__list li::before { content: none; }
.qch-topic__list a { position: relative; display: block; padding: 11px 22px 11px 0; color: var(--qh-ink); font-size: 15px; font-weight: 600; line-height: 1.6; text-decoration: none; }
.qch-topic__list a::after { content: "→"; position: absolute; right: 2px; top: 11px; color: var(--qh-acc); font-weight: 800; transition: transform .2s; }
.qch-topic__list a:hover { color: var(--qh-acc); }
.qch-topic__list a:hover::after { transform: translateX(3px); }

/* 支援事例 */
.qch-cases__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.qch-cases__list li { margin: 0; }
.qch-cases__list li::before { content: none; }
.qch-case { display: flex; flex-direction: column; height: 100%; color: var(--qh-ink); text-decoration: none; }
.qch-case__img { display: block; aspect-ratio: 16 / 9; margin-bottom: 12px; overflow: hidden; border-radius: 10px; background: var(--qh-soft); }
.qch-case__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.qch-case:hover .qch-case__img img { transform: scale(1.03); }
.qch-case__ttl { flex: 1; font-size: 16px; font-weight: 800; line-height: 1.6; }

/* 関連資料 */
.qch-doc { display: grid; grid-template-columns: 340px 1fr; align-items: center; gap: 32px; padding: 28px; border-radius: 18px; background: var(--qh-soft); }
.qch-doc__cover { display: block; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 18px 36px -22px rgba(11, 26, 51, .45); }
.qch-doc__cover img { display: block; width: 100%; height: auto; }
.qch-doc__label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--qh-ink2); }
.qch-doc__tag { padding: 2px 8px; border-radius: 4px; background: #ff5a36; color: #fff; font-size: 12px; }
.qch-doc__title { margin: 0 0 8px; font-size: 24px; font-weight: 900; line-height: 1.4; }
.qch-doc__txt { margin: 0 0 18px; font-size: 15px; line-height: 1.8; color: var(--qh-ink2); }
.qch-doc__btn { display: inline-flex; align-items: center; gap: 4px; padding: 14px 26px; border-radius: 999px; background: var(--qh-acc); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; transition: background .2s, transform .15s; }
.qch-doc__btn:hover { background: var(--qh-acc-d); color: #fff; }
.qch-doc__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.qch-doc__btn--sub { background: #fff; color: var(--qh-acc); box-shadow: inset 0 0 0 2px var(--qh-acc); }
.qch-doc__btn--sub:hover { background: var(--qh-acc); color: #fff; }
.qch-doc--nocover { grid-template-columns: 1fr; }
.qch-doc__btn:active { transform: scale(.98); }

/* FAQ */
.qch-faq__list { border-top: 1px solid var(--qh-line); }
.qch-faq__item { border-bottom: 1px solid var(--qh-line); }
.qch-faq__q { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 20px 44px 20px 0; font-size: 17px; font-weight: 800; line-height: 1.6; cursor: pointer; list-style: none; }
.qch-faq__q::-webkit-details-marker { display: none; }
.qch-faq__q::after { content: ""; position: absolute; right: 8px; top: 28px; width: 10px; height: 10px; border-right: 2px solid var(--qh-ink); border-bottom: 2px solid var(--qh-ink); transform: rotate(45deg); transition: transform .25s; }
.qch-faq__item[open] .qch-faq__q::after { transform: rotate(-135deg); top: 32px; }
.qch-faq__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--qh-ink); color: #fff; font-size: 14px; font-weight: 900; }
.qch-faq__mark--a { background: var(--qh-acc); }
.qch-faq__a { display: flex; align-items: flex-start; gap: 14px; padding: 0 0 22px; }
.qch-faq__a p { margin: 2px 0 0; font-size: 15px; line-height: 1.9; color: var(--qh-ink2); }
.qch-faq__more { display: inline-block; margin-top: 8px; color: var(--qh-acc); font-size: 14px; font-weight: 700; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; }
.qch-faq__more:hover { text-decoration: none; }
.qch-faq__q:focus-visible, .qch-start__link:focus-visible, .qch-doc__btn:focus-visible, .qch-topic__center:focus-visible, .qch-topic__list a:focus-visible, .qch-topics__nav a:focus-visible, .qch-case:focus-visible { outline: 3px solid var(--qh-acc); outline-offset: 3px; }

/* カテゴリ見出し横の相談ボタン（共通 .buttonItem）：アイコンを右に1つだけ、文字と重ならないよう flex で並べる */
.queryy-page-header__cta .buttonItem { height: auto; }
.queryy-page-header__cta .buttonItem__link { gap: 12px; min-height: 52px; padding: 12px 14px 12px 28px; line-height: 1.5; text-align: left; white-space: nowrap; }
.queryy-page-header__cta .buttonItem__link::before, .queryy-page-header__cta .buttonItem__link::after { content: none; display: none; }
.queryy-page-header__cta .buttonItem__ico { position: relative; inset: auto; order: 2; flex: none; width: 28px; height: 28px; margin: 0; transform: none; }
.queryy-page-header__cta .buttonItem__ico--enter { width: 11.2px; height: 11.2px; opacity: 1; transform: none; transition: transform .25s; }
.queryy-page-header__cta .buttonItem__ico--leave { display: none; }
/* 共通ボタンはhoverで矢印(enter)をopacity:0にして leave と入れ替えるが、ここでは leave を消しているので enter を出したままにする */
.queryy-page-header__cta .buttonItem__link:hover .buttonItem__ico .buttonItem__ico--enter { opacity: 1; transform: translateX(2px); }

/* ---- タグページ（.qth。カテゴリハブと同じ部品を使い、タグ固有の部分だけ定義） ---- */
.qth { margin-top: 40px; }
.qth--bottom { margin: 64px auto 0; }
.qth--bottom .qch__in { gap: 48px; }
.qth-sum { grid-template-columns: 220px 1fr; }
.qth-start--few { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qth-list-ttl { flex-wrap: wrap; margin: 8px 0 0; padding-top: 32px; border-top: 1px solid var(--qh-line); }
.qth-list-ttl__num { font-size: 14px; font-weight: 700; color: var(--qh-ink2); }
.qth-nav { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: stretch; }
.qth-parent { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 56px 24px 24px; border-radius: 14px; background: var(--qh-ink); color: #fff; text-decoration: none; transition: background .2s, transform .2s; }
.qth-parent:hover { background: #13284d; color: #fff; }
.qth-parent__label { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: #8fb3ff; }
.qth-parent__ttl { font-size: 18px; font-weight: 900; line-height: 1.5; }
.qth-parent__txt { font-size: 14px; line-height: 1.7; color: #c9d4e8; }
.qth-parent__arrow { position: absolute; right: 22px; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--qh-acc); font-size: 16px; font-weight: 900; line-height: 1; transition: transform .2s; }
.qth-parent:hover .qth-parent__arrow { transform: translateX(3px); }
.qth-related { padding: 22px 24px; border: 1px solid var(--qh-line); border-radius: 14px; background: #fff; }
.qth-related__ttl { margin: 0 0 12px; font-size: 16px; font-weight: 900; line-height: 1.4; }
.qth-related__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qth-related__list li { margin: 0; }
.qth-related__list li::before { content: none; }
.qth-related__list a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 14px; border: 1px solid var(--qh-line); border-radius: 999px; background: #fff; color: var(--qh-ink); font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; transition: border-color .2s, color .2s; }
.qth-related__list a:hover { border-color: var(--qh-acc); color: var(--qh-acc); }
.qth-related__num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--qh-soft); color: var(--qh-ink2); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qth-parent:focus-visible, .qth-related__list a:focus-visible { outline: 3px solid var(--qh-acc); outline-offset: 3px; }
.qth-breadcrumb { margin-top: 48px; }

/* ---- 監修者プロフィール ---- */
.qap { margin: 40px 0 0; }
.qap__ttl { margin: 0 0 16px; font-size: 22px; font-weight: 900; }
.qap__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
.qap-box { padding: 24px; border: 1px solid var(--qh-line); border-radius: 14px; background: #fff; }
.qap-box__ttl { margin: 0 0 14px; font-size: 15px; font-weight: 900; color: var(--qh-acc); letter-spacing: .04em; }
.qap-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qap-tags li { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--qh-soft); font-size: 14px; font-weight: 700; }
.qap-tags li::before { content: none; }
.qap-tl { margin: 0; padding: 0; list-style: none; }
.qap-tl__item { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 0 0 14px 18px; border-left: 2px solid var(--qh-line); }
.qap-tl__item::before { content: ""; position: absolute; left: -6px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--qh-acc); }
.qap-tl__item:last-child { padding-bottom: 0; }
.qap-tl__when { font-size: 14px; font-weight: 800; color: var(--qh-ink); font-variant-numeric: tabular-nums; }
.qap-tl__what { font-size: 15px; line-height: 1.7; color: var(--qh-ink2); }
.qap-books { margin-top: 20px; }
.qap-books__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.qap-book { margin: 0; }
.qap-book::before { content: none; }
.qap-book__ttl { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.6; }
.qap-book__role { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 4px; background: var(--qh-soft); font-size: 12px; font-weight: 800; color: var(--qh-acc); vertical-align: 2px; }
.qap-book__meta { margin: 4px 0 0; font-size: 13px; color: var(--qh-ink2); }
.qap-book__desc { margin: 8px 0 0; font-size: 15px; line-height: 1.8; color: var(--qh-ink2); }
.qap-book__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.qap-book__links a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border: 2px solid var(--qh-acc); border-radius: 999px; color: var(--qh-acc); font-size: 14px; font-weight: 800; text-decoration: none; transition: background .2s, color .2s; }
.qap-book__links a:hover { background: var(--qh-acc); color: #fff; }
.qap-book__links a:focus-visible { outline: 3px solid var(--qh-acc); outline-offset: 3px; }
.qap__policy { margin: 16px 0 0; font-size: 14px; color: var(--qh-ink2); }
.qap__policy a { color: var(--qh-acc); }

/* ---- 右サイドバーの資料DL（スクロール追従）----
   top は JS（inc/queryy-category-hub.php）が画面の高さとバナーの高さから計算して --qside-top に入れる。
   バナーが画面より長い時は下端が見えた位置で止まる */
@media (min-width: 769px) {
  .queryy-archive-list__sidebar > :last-child:not(:first-child) { position: sticky; top: var(--qside-top, 96px); }
}

/* ---- SP ---- */
@media (max-width: 768px) {
  .qch { margin-top: 32px; padding: 0 16px; }
  .qap-tl__item { grid-template-columns: 56px 1fr; gap: 8px; }
  .qch__in { gap: 32px; }
  .qch-sum { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .qch-sum__ttl { font-size: 22px; }
  .qch-sum__def { font-size: 16px; }
  .qch-sum__points li { font-size: 15px; }
  .qch-topics__nav { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .qch-topics__nav a { flex: none; }
  .qch-topics__grid { grid-template-columns: 1fr; gap: 12px; }
  .qch-topic { padding: 18px; }
  .qch-topic__ttl { font-size: 18px; }
  .qch-topic__center { grid-template-columns: 96px 1fr; }
  .qch-cases__list { grid-template-columns: 1fr; gap: 16px; }
  .qch-h3 { font-size: 19px; }
  .qch-start__list { grid-template-columns: 1fr; gap: 12px; }
  .qch-start__link { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto 1fr auto; column-gap: 12px; padding: 12px; }
  .qch-start__step { grid-column: 1 / -1; justify-self: start; margin-bottom: 8px; }
  .qch-start__img { grid-column: 1; grid-row: 2 / span 2; margin: 0; }
  .qch-start__title { grid-column: 2; font-size: 15px; }
  .qch-start__more { grid-column: 2; margin-top: 6px; }
  .qch-doc { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .qch-doc__title { font-size: 20px; }
  .qch-doc__btns { flex-direction: column; }
  .qch-doc__btn { width: 100%; justify-content: center; }
  .qch-faq__q { font-size: 16px; }
  .queryy-page-header__cta .buttonItem__link { padding: 12px 12px 12px 22px; font-size: 14px; white-space: normal; }
  .qap__grid { grid-template-columns: 1fr; }
  .qth { margin-top: 28px; }
  .qth--bottom { margin-top: 48px; }
  .qth--bottom .qch__in { gap: 36px; }
  .qth-sum { grid-template-columns: 1fr; }
  .qth-start--few { grid-template-columns: 1fr; }
  .qth-list-ttl { padding-top: 24px; }
  .qth-nav { grid-template-columns: 1fr; gap: 12px; }
  .qth-parent { padding: 20px 56px 20px 20px; }
  .qth-parent__ttl { font-size: 16px; }
  .qth-related { padding: 18px; }
  .qth-breadcrumb { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .qch *, .qap * { transition: none !important; }
}