/* ===========================================================
   AI real CG 公式サイト — 集約ページ専用CSS
   features.html（機能で選ぶ詳細） / usecases.html（目的で選ぶ詳細）
   ・支給の構成案HTMLのレイアウトを踏襲し、色・フォント・ボタンは
     common.css と home-b.css のトークンに寄せている
   =========================================================== */

/* ---------- ページヒーロー ---------- */
.phero { padding: 128px 0 56px; background: var(--b-cream); }
.phero__inner { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.phero__crumb { margin: 0 0 26px; font-size: 12px; color: var(--muted); }
.phero__crumb a { text-decoration: underline; }
.phero__title { margin: 20px 0 0; font-weight: 900; font-size: 44px; line-height: 1.32; letter-spacing: -0.015em; text-align: center; color: var(--ink); }
.phero__lead { margin: 18px auto 0; max-width: 44em; font-size: 15px; line-height: 2; text-align: center; color: var(--muted); }

/* 一覧カード（アンカー） */
.pindex { margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pindex__card {
  position: relative; display: block; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.pindex__card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.09); }
.pindex__card--soon { border: 2px solid var(--yellow); }
.pindex__thumb { display: block; aspect-ratio: 4 / 3; background: var(--b-cream); }
.pindex__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pindex__body { display: block; padding: 16px 18px 18px; }
.pindex__num { display: block; font-weight: 900; font-size: 11px; letter-spacing: .12em; color: #b08900; }
.pindex__ttl { display: block; margin: 5px 0 0; font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--ink); }
.pindex__role { display: block; margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.pindex__soon { position: absolute; top: 12px; left: 12px; z-index: 1; }
@media (max-width: 900px) { .pindex { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .phero { padding: 104px 0 40px; }
  .phero__title { font-size: 28px; }
  .pindex { gap: 12px; }
  .pindex__body { padding: 13px 14px 15px; }
}

/* ---------- 追従アンカーナビ ---------- */
.panchor {
  position: sticky; top: 60px; z-index: 900;
  background: rgba(246,243,236,0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.panchor__list {
  list-style: none; margin: 0 auto; padding: 11px 24px; max-width: 1152px;
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
}
.panchor__list::-webkit-scrollbar { display: none; }
.panchor__link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--border);
  font-weight: 700; font-size: 13px; color: var(--muted);
  transition: background .18s, border-color .18s, color .18s;
}
.panchor__link:hover, .panchor__link.is-active { background: var(--yellow-soft); border-color: rgba(245,197,24,0.65); color: #6b4e00; }
.panchor__dot { width: 7px; height: 7px; border-radius: 50%; background: #a8322d; flex: 0 0 auto; }

/* ---------- 共通：COMING SOON バッジ ---------- */
/* NEWバッジ（2026-10-08 ローンチ）。以前は COMING SOON の赤だった */
.psoon {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 999px; background: #c0392b;
  color: #fff; font-weight: 900; font-size: 12px; letter-spacing: .16em; line-height: 1.4;
}
.psoon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pBlink 1.2s infinite; }
@keyframes pBlink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .psoon::before { animation: none; } }

/* ---------- 共通：黄色角丸のタイトルバッジ ---------- */
.ptag {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: var(--yellow-soft); border: 1px solid rgba(245,197,24,0.65);
  color: #6b4e00; font-weight: 700; font-size: 15px; line-height: 1.4;
}

/* ---------- 詳細セクション ---------- */
/* 下の8pxパディングは、黄色のページ末CTAとフッターの間に白い帯として
   見えてしまうため 2026-10-08 に外した（features / usecases / guide）。 */
.pbody { background: #fff; }
.pwrap { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.pitem { padding: 84px 0 0; scroll-margin-top: 130px; }
.pitem__card { background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.pitem--soon .pitem__card { border: 2px solid var(--yellow); }
.pitem__top { display: grid; grid-template-columns: 1.08fr 1fr; }
.pitem__visual { position: relative; background: var(--b-cream); min-height: 340px; }
.pitem__visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pitem__visual .psoon { position: absolute; top: 18px; left: 18px; z-index: 2; font-size: 14px; padding: 9px 20px; }
/* Before/After の子画像 */
.pitem__ba {
  position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 34%; aspect-ratio: 4 / 3;
  border-radius: 10px; overflow: hidden; border: 3px solid #fff; background: var(--b-cream);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.pitem__ba img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pitem__balabel {
  position: absolute; top: 8px; left: 8px; z-index: 3; padding: 3px 10px; border-radius: 999px;
  background: rgba(17,17,17,0.82); color: #fff; font-weight: 700; font-size: 10px; letter-spacing: .08em;
}
.pitem__afterlabel {
  position: absolute; top: 16px; left: 16px; z-index: 2; padding: 4px 12px; border-radius: 999px;
  background: var(--yellow); color: #111; font-weight: 700; font-size: 11px; letter-spacing: .08em;
}
.pitem__intro { padding: 44px 44px 40px; }
.pitem__num { font-weight: 900; font-size: 12px; letter-spacing: .14em; color: #b08900; }
.pitem__intro .ptag { margin-top: 12px; }
.pitem__intro h2 { margin: 14px 0 0; font-weight: 900; font-size: 27px; line-height: 1.5; color: var(--ink); }
.pitem__intro p { margin: 14px 0 0; font-size: 14px; line-height: 1.95; color: var(--muted); }

.pitem__detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding: 40px 44px 44px; border-top: 1px solid var(--border); }
.pitem__detail--block { display: block; }
.ph3 { margin: 0 0 16px; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.ph3::before { content: ""; width: 4px; height: 17px; border-radius: 2px; background: var(--yellow); flex: 0 0 auto; }

.ppoints { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ppoints li { background: var(--b-cream); border-radius: 12px; padding: 17px 19px; scroll-margin-top: 150px; }
.ppoints li.is-pick { background: var(--yellow-soft); outline: 1px solid rgba(245,197,24,0.65); }
.ppoints b { display: block; font-size: 14px; color: var(--ink); }
.ppoints span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.75; color: var(--muted); }

.pscenes { list-style: none; margin: 0; padding: 0; }
.pscenes li { padding: 13px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; line-height: 1.8; color: var(--body); }
.pscenes li:first-child { padding-top: 0; }
.pscenes li:last-child { border-bottom: 0; }
.pscenes b { display: block; font-size: 12px; font-weight: 700; color: #b08900; }

.psteps { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; counter-reset: ps; }
.psteps--col { flex-direction: column; }
.psteps li {
  flex: 1; background: var(--b-cream); border-radius: 10px; padding: 13px 14px;
  font-weight: 700; font-size: 13px; line-height: 1.6; color: var(--ink); counter-increment: ps; text-align: center;
}
.psteps--col li { text-align: left; }
.psteps li::before { content: "STEP " counter(ps); display: block; font-size: 10px; letter-spacing: .1em; color: #b08900; }

.ppains { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ppains li { position: relative; background: var(--b-cream); border-radius: 12px; padding: 19px 20px 17px; font-size: 13.5px; line-height: 1.8; color: var(--body); }
.ppains li::before { content: "“"; position: absolute; top: 0; right: 14px; font-size: 42px; line-height: 1; color: #ddd4c2; font-family: Georgia, serif; }
.ppains b { display: block; margin-bottom: 5px; font-size: 11.5px; font-weight: 700; color: #b08900; }

.psolve { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.psolve__list { list-style: none; margin: 0; padding: 0; counter-reset: sv; }
.psolve__list li { position: relative; padding: 0 0 18px 44px; counter-increment: sv; }
.psolve__list li::before {
  content: counter(sv, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: #111;
  font-weight: 900; font-size: 12px; display: grid; place-items: center;
}
.psolve__list b { display: block; font-size: 14px; color: var(--ink); }
.psolve__list span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.8; color: var(--muted); }

.pchips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.pchips a, .pchips .pchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border); font-weight: 700; font-size: 12.5px; color: var(--ink);
}
.pchips a:hover { background: var(--yellow-soft); border-color: rgba(245,197,24,0.65); }
.pchips a::after { content: "→"; font-size: 11px; color: var(--muted); }
/* AUN2 #61: 同上 */
.pchips .psoon { font-size: 9px; padding: 2px 8px; letter-spacing: .06em; margin-right: 5px; }
.pchips .psoon::before { width: 5px; height: 5px; }

.pitem__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 22px 44px; background: var(--b-cream); border-top: 1px solid var(--border);
}
.pitem__foot small { font-size: 12px; color: var(--muted); }
/* AUN2 #59: ボタンが2つ並ぶ列。狭いときは縦に積む */
.pitem__footbtns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.ptotop { font-size: 12px; color: var(--muted); }
.ptotop:hover { color: var(--ink); }
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border-radius: 999px; background: var(--b-dark); color: #fff;
  font-weight: 700; font-size: 14px; transition: background .2s, transform .18s;
}
.pbtn::after { content: "→"; }
.pbtn:hover { background: #2a2a2a; transform: translateY(-2px); }
.pbtn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.pbtn--ghost:hover { background: var(--b-cream); }

@media (max-width: 960px) {
  .pitem__top, .pitem__detail, .psolve { grid-template-columns: 1fr; }
  .pitem__visual { min-height: 0; aspect-ratio: 16 / 10; }
  .ppains { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .panchor { top: 56px; }
  .pitem { padding-top: 56px; }
  .pitem__intro, .pitem__detail { padding: 26px 20px; }
  .pitem__foot { padding: 18px 20px; }
  .ppoints { grid-template-columns: 1fr; }
  .psteps { flex-direction: column; }
  .psteps li { text-align: left; }
  .pitem__intro h2 { font-size: 21px; }
  .pitem__foot .pbtn { width: 100%; }
  .pitem__footbtns { width: 100%; flex-direction: column; }
}

/* ---------- 比較表 ---------- */
.pcompare { padding: 96px 0 0; scroll-margin-top: 130px; }
.pcompare__head { text-align: center; margin-bottom: 36px; }
.pcompare__head h2 { margin: 18px 0 0; font-weight: 900; font-size: 32px; line-height: 1.4; color: var(--ink); }
.ptable-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: 16px; }

/* ---------- 横スクロールの合図（2026-10-08） ----------
   SPで表が横に続いていることが分からない、という指摘への対応。

   ★グラデーションは「スクロールしない外側の箱」に置く。
     スクロールする要素の中に position:absolute で置くと、
     中身と一緒に動いてしまい、表の途中に白い帯が被る。
     js/pages-v2.js が .pscroll の箱で包み、その箱に
     is-start / is-end を付け外しする。 */
.pscroll { position: relative; }
.pscroll::before,
.pscroll::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; width: 44px;
  pointer-events: none; z-index: 2; opacity: 1; transition: opacity .25s ease;
}
.pscroll::before {
  left: 1px; border-radius: 16px 0 0 16px;
  background: linear-gradient(to right, #fff 10%, rgba(255,255,255,0));
}
.pscroll::after {
  right: 1px; border-radius: 0 16px 16px 0;
  background: linear-gradient(to left, #fff 10%, rgba(255,255,255,0));
}
.pscroll.is-start::before { opacity: 0; }
.pscroll.is-end::after { opacity: 0; }

.pscroll__hint {
  display: none; align-items: center; justify-content: flex-end; gap: 6px;
  margin: 0 0 8px; font-size: 11.5px; font-weight: 700; color: var(--muted);
}
.pscroll__hint::after {
  content: "→"; display: inline-block; color: #b08900;
  animation: pHintSlide 1.4s ease-in-out infinite;
}
@keyframes pHintSlide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .pscroll__hint::after { animation: none; } }
.pscroll__hint.is-on { display: flex; }
.pscroll__hint.is-off { display: none; }

/* 追従アンカーナビ側。白ではなく帯の地色に合わせる */
.panchor .pscroll::before,
.panchor .pscroll::after { top: 0; bottom: 0; width: 32px; border-radius: 0; }
.panchor .pscroll::before { left: 0; background: linear-gradient(to right, var(--bg-gray) 20%, rgba(247,247,247,0)); }
.panchor .pscroll::after  { right: 0; background: linear-gradient(to left,  var(--bg-gray) 20%, rgba(247,247,247,0)); }

/* ---------- 比較表 ---------- */
.pcompare { padding: 96px 0 0; scroll-margin-top: 130px; }
.pcompare__head { text-align: center; margin-bottom: 36px; }
.pcompare__head h2 { margin: 18px 0 0; font-weight: 900; font-size: 32px; line-height: 1.4; color: var(--ink); }
.ptable-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: 16px; }

/* ---------- 横スクロールの合図（2026-10-08） ----------
   SPで表が横に続いていることが分からない、という指摘への対応。
   ・右端にグラデーションを重ねて「まだ続く」ことを示す
   ・左端にも同じものを出して、戻れることを示す
   ・端まで来たらその側のグラデーションを消す（js/pages-v2.js が
     is-start / is-end を付け外しする）
   ・表の上に「横にスクロールできます」の一言を出す（スクロールしたら消える）
   JSが動かない環境では、グラデーションは出たまま・一言も出たままになる。
   どちらも操作の邪魔はしない。 */
.pscroll { position: relative; }
.pscroll::before,
.pscroll::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; width: 44px;
  pointer-events: none; z-index: 2; opacity: 1; transition: opacity .25s ease;
}
.pscroll::before {
  left: 1px; border-radius: 16px 0 0 16px;
  background: linear-gradient(to right, #fff 10%, rgba(255,255,255,0));
}
.pscroll::after {
  right: 1px; border-radius: 0 16px 16px 0;
  background: linear-gradient(to left, #fff 10%, rgba(255,255,255,0));
}
.pscroll.is-start::before { opacity: 0; }
.pscroll.is-end::after { opacity: 0; }

.pscroll__hint {
  display: none; align-items: center; justify-content: flex-end; gap: 6px;
  margin: 0 0 8px; font-size: 11.5px; font-weight: 700; color: var(--muted);
}
.pscroll__hint::after {
  content: "→"; display: inline-block; color: #b08900;
  animation: pHintSlide 1.4s ease-in-out infinite;
}
@keyframes pHintSlide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .pscroll__hint::after { animation: none; } }
.pscroll__hint.is-on { display: flex; }
.pscroll__hint.is-off { display: none; }

/* 追従アンカーナビ側。白ではなく帯の地色に合わせる */
.panchor .pscroll::before,
.panchor .pscroll::after { top: 0; bottom: 0; width: 32px; border-radius: 0; }
.panchor .pscroll::before { left: 0; background: linear-gradient(to right, var(--bg-gray) 20%, rgba(247,247,247,0)); }
.panchor .pscroll::after  { right: 0; background: linear-gradient(to left,  var(--bg-gray) 20%, rgba(247,247,247,0)); }

.ptable { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 13.5px; }
.ptable th, .ptable td { padding: 16px 18px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.ptable thead th { background: var(--b-cream); font-weight: 700; color: var(--ink); }
.ptable tbody th { width: 170px; font-weight: 700; color: var(--muted); }
.ptable tr:last-child th, .ptable tr:last-child td { border-bottom: 0; }
.ptable td.is-good { font-weight: 700; color: var(--ink); background: rgba(245,197,24,0.07); }
.ptable .pmark { color: #b08900; font-weight: 900; margin-right: 4px; }
/* AUN2 #60: バッジは行頭に置くので、右に余白を取る */
.ptable .psoon { font-size: 9px; padding: 2px 7px; margin-right: 5px; }
.ptable .psoon::before { width: 5px; height: 5px; }
@media (max-width: 620px) { .pcompare { padding-top: 64px; } .pcompare__head h2 { font-size: 23px; } }

/* ---------- 料金 ---------- */
.pprice { padding: 96px 0 0; scroll-margin-top: 130px; }
.pprice__card {
  margin: 0 auto; max-width: 820px; background: #fff; border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden;
}
.pprice__main { display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center; padding: 36px 40px; }
.pprice__name { margin: 0; font-weight: 700; font-size: 13px; color: #b08900; }
.pprice__num { margin: 8px 0 0; font-weight: 900; font-size: 44px; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.pprice__num small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 5px; }
.pprice__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pprice__list li { position: relative; padding-left: 24px; font-size: 14px; color: var(--body); }
.pprice__list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 13px; height: 8px;
  border-left: 2px solid #c79400; border-bottom: 2px solid #c79400; transform: rotate(-45deg);
}
.pprice__subsidy { padding: 20px 40px 22px; border-top: 1px solid var(--border); background: var(--yellow-soft); text-align: center; }
.pprice__subsidy b { display: block; font-size: 14px; color: #6b5200; }
.pprice__subsidy p { margin: 5px 0 0; font-size: 13px; line-height: 1.8; color: var(--body); }
.pprice__subsidy small { display: block; margin-top: 5px; font-size: 11.5px; color: #7a6a3a; }
.pprice__subsidy a { text-decoration: underline; }
@media (max-width: 760px) {
  .pprice { padding-top: 64px; }
  .pprice__main { grid-template-columns: 1fr; gap: 22px; padding: 28px 22px; }
  .pprice__subsidy { padding: 18px 22px 20px; }
}

/* ---------- ページ末CTA ---------- */
.pcta { margin-top: 96px; background: var(--yellow); padding: 76px 24px; text-align: center; }
.pcta__heading { margin: 0; font-weight: 900; font-size: 30px; line-height: 1.45; color: #111; }
.pcta__lead { margin: 14px 0 0; font-size: 14px; line-height: 1.9; color: rgba(0,0,0,0.66); }
.pcta__btns { margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pcta__btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 18px 36px; border-radius: 999px;
  background: #111; color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.2); transition: transform .16s, box-shadow .2s;
}
.pcta__btn::after { content: "→"; }
.pcta__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,0.26); }
.pcta__btn--ghost { background: transparent; color: #111; border: 1px solid #111; box-shadow: none; }
.pcta__btn--ghost:hover { background: rgba(0,0,0,0.06); box-shadow: none; }
.pcta__free { margin: 18px 0 0; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: rgba(0,0,0,0.62); }
.pcta__free em { font-style: normal; font-weight: 900; font-size: 16px; color: #111; }
@media (max-width: 620px) {
  .pcta { margin-top: 64px; padding: 60px 20px; }
  .pcta__heading { font-size: 22px; }
  .pcta__btn { width: 100%; justify-content: center; }
}

/* ===========================================================
   使い方動画 一覧（faq.html・AUN #27）
   =========================================================== */
.hv__tabs { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.hv__tab {
  padding: 8px 20px; border-radius: 999px; border: 1px solid var(--border); background: #fff;
  font-family: inherit; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.hv__tab:hover { border-color: #c9c9c9; color: var(--ink); }
.hv__tab.is-active { background: var(--yellow); border-color: var(--yellow); color: #111; }

.hv__list { list-style: none; margin: 22px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.hv__item { border-bottom: 1px solid var(--border); }
.hv__item:last-child { border-bottom: 0; }
.hv__btn {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 22px;
  background: none; border: 0; text-align: left; font-family: inherit; cursor: pointer;
  transition: background .15s;
}
.hv__btn:hover { background: var(--b-cream); }
.hv__btn--static { cursor: default; }
.hv__btn--static:hover { background: none; }
.hv__num { flex: 0 0 auto; font-weight: 900; font-size: 12px; letter-spacing: .08em; color: #b08900; font-feature-settings: "tnum"; }
.hv__body { flex: 1 1 auto; min-width: 0; }
.hv__title { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.hv__desc { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.hv__play {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); color: #111; font-size: 12px;
}
.hv__len { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--muted); }
.hv__soon {
  flex: 0 0 auto; padding: 4px 11px; border-radius: 999px; background: var(--bg-gray);
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.hv__item.is-soon .hv__title { color: #555; }
.hv__empty { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 560px) {
  .hv__btn { padding: 14px 16px; gap: 12px; }
  .hv__title { font-size: 13.5px; }
}

/* モーダル */
.hv-modal {
  position: fixed; inset: 0; z-index: 1250; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,0.9);
}
.hv-modal[hidden] { display: none; }
.hv-modal__inner { width: min(960px, 92vw); }
.hv-modal__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.hv-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hv-modal__cap { margin: 12px 0 0; font-weight: 700; font-size: 13px; color: #eee; text-align: center; }
.hv-modal__close {
  position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.hv-modal__close:hover { background: rgba(255,255,255,0.26); }

/* 操作ガイドの案内（faq.html・AUN #28） */
.faqpage__guide {
  margin-top: 20px; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; background: var(--b-cream); border: 1px solid var(--border);
  border-radius: 12px; padding: 22px 26px;
}
.faqpage__guide-note { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .faqpage__guide .pbtn { width: 100%; } }

/* ===========================================================
   操作ガイド（guide.html）
   =========================================================== */
.gchapters { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.gchapter { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px 28px 28px; }
.gchapter__num { font-weight: 900; font-size: 12px; letter-spacing: .12em; color: #b08900; }
.gchapter__title { margin: 8px 0 0; font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--ink); }
.gchapter__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.gchapter__list li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.gchapter__list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.gnote {
  margin: 40px 0 0; background: var(--yellow-soft); border: 1px solid rgba(245,197,24,0.55);
  border-radius: 12px; padding: 22px 26px;
}
.gnote b { display: block; font-size: 14px; color: #6b5200; }
.gnote p { margin: 6px 0 0; font-size: 13px; line-height: 1.85; color: var(--body); }
@media (max-width: 760px) { .gchapters { grid-template-columns: 1fr; gap: 14px; } }

/* 平面図のサムネは図なので切り抜かず全体を見せる（USE CASE 04・AUN2 #27） */
.pitem__ba--plan { background: #fff; }
.pitem__ba--plan img { object-fit: contain; }