/* ==========================================================================
   使い方説明ページ (howto.html)
   上部に「動画一覧（ジャンプ用）」、その下に全動画を縦にずらっと配置
   ========================================================================== */
.howto-hero { background: var(--color-cream); padding: var(--space-16) 0 var(--space-12); text-align: center; }
.howto-hero h1 { font-size: var(--text-h2); font-weight: 900; letter-spacing: var(--ls-heading); margin-bottom: var(--space-3); }
.howto-hero p { color: var(--color-text-secondary); font-size: var(--text-small); }

.howto-body { padding: var(--space-12) 0 var(--space-24); }
.howto-wrap { max-width: 880px; margin: 0 auto; }

/* アプリ／PCブラウザのタブ（2026-11-02） */
.howto-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  padding: var(--space-2); margin-bottom: var(--space-8);
  background: var(--color-cream); border-radius: var(--radius-card);
}
.howto-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-3) var(--space-2); border: 0; border-radius: calc(var(--radius-card) - 4px);
  background: transparent; color: var(--color-text-secondary); cursor: pointer; font: inherit;
  transition: background var(--duration-micro) var(--ease-out), color var(--duration-micro) var(--ease-out);
}
.howto-tab-label { font-size: var(--text-body); font-weight: 700; }
.howto-tab-sub { font-size: 12px; }
.howto-tab[aria-selected="true"] { background: var(--color-white); color: var(--color-brand-teal); box-shadow: var(--shadow-card); }
.howto-tab:focus-visible { outline: 2px solid var(--color-brand-teal); outline-offset: 2px; }
.howto-panel[hidden] { display: none; }
.howto-panel-note {
  margin-top: var(--space-12); padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-card); background: var(--color-cream);
  font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.8;
}
.howto-panel-note a { color: var(--color-brand-teal); font-weight: 700; text-decoration: underline; }

/* ジャンプ用インデックス */
.howto-index {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
  padding: var(--space-6);
  margin-bottom: var(--space-12);
  box-shadow: var(--shadow-card);
}
.howto-index-head { font-weight: 700; font-size: var(--text-body); margin-bottom: var(--space-4); }
.howto-index-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
}
.howto-index-list a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--duration-micro) var(--ease-out);
}
.howto-index-list a:hover { background: var(--color-cream); }
.howto-index-list .num {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--color-teal-light); color: var(--color-brand-teal);
}
.howto-index-list .t { font-size: var(--text-small); font-weight: 500; min-width: 0; }

/* 動画ブロック（縦にずらっと） */
.howto-videos { display: flex; flex-direction: column; gap: var(--space-16); }
.howto-video-block { scroll-margin-top: calc(76px + var(--space-6)); }
.hv-head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.hv-no {
  flex: none; font-size: 12px; font-weight: 900; letter-spacing: var(--ls-label);
  color: var(--color-white); background: var(--color-brand-teal);
  padding: 3px 10px; border-radius: var(--radius-pill);
}
.hv-title { font-size: var(--text-h3); font-weight: 700; }
.hv-dur { margin-left: auto; font-size: var(--text-small); color: var(--color-text-secondary); flex: none; }
.hv-stage {
  aspect-ratio: 16 / 9; background: #000;
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-hover);
}
.hv-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
/* アプリ（縦の動画）: スマホの画面の高さに収める */
.hv-stage--vertical { aspect-ratio: 9 / 16; width: min(100%, 420px, calc((100vh - 140px) * 9 / 16)); margin: 0 auto; }

@media (max-width: 640px) {
  .howto-index-list { grid-template-columns: 1fr; }
  .hv-title { font-size: var(--text-body); }
}

/* フッター（legal.css非読込のため同梱） */
.legal-footer { background: #1c2830; color: rgba(255,255,255,0.82); padding: var(--space-8) 0; }
.legal-footer .container { text-align: center; }
.legal-footer .legal-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-4); }
.legal-footer a { color: rgba(255,255,255,0.85); font-size: var(--text-small); }
.legal-footer a:hover { color: #fff; }
.legal-footer .copy { font-size: 12px; opacity: 0.7; }

/* 2026-11-03：タブを上に横いっぱい、その下で「一覧＋動画」の2列にする
   （interior.css が .howto-wrap を2列にしていたため、タブが左の細い列に入っていた） */
.interior.howto-page .howto-wrap { display: block; }
.interior.howto-page .howto-tabs { max-width: 520px; margin: 0 auto var(--space-12); }
.interior.howto-page .howto-panel:not([hidden]) {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: start;
}
.interior.howto-page .howto-panel-note { grid-column: 2; margin-top: 0; }
@media (max-width: 1000px) {
  .interior.howto-page .howto-panel:not([hidden]) { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
  .interior.howto-page .howto-tabs { margin-bottom: var(--space-8); }
  .interior.howto-page .howto-panel:not([hidden]) { grid-template-columns: 1fr; gap: 40px; }
  .interior.howto-page .howto-panel-note { grid-column: auto; }
}