@charset "UTF-8";
/* ==========================================================
   ゲレンデマップ配布ページ（coursemap.html / en-coursemap.html）
   2026-09-18 打ち合わせ反映で新設（2026-09-21 実装）
   PC: 地図（左・可変）＋ 保存方法とQR（右・340px）
   SP: 地図 → 保存方法 → QR の縦積み
   ========================================================== */
.cm-lead { max-width: 760px; }

.cm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
  margin-top: 32px;
}

.cm-map { margin: 0; }
.cm-map__link { display: block; border-radius: 12px; overflow: hidden; border: 1px solid #d9e2ee; background: #fff; }
.cm-map__img { display: block; width: 100%; height: auto; }
.cm-map__cap { margin-top: 10px; font-size: 14px; line-height: 1.6; letter-spacing: 0.05em; color: #5f6761; }

.cm-side { display: grid; gap: 24px; position: sticky; top: 24px; }

.cm-card { padding: 26px 24px 24px; }
.cm-card .cx-panel__heading { margin-bottom: 18px; }
.cm-card__btn { width: 100%; }

.cm-howto { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.cm-howto__item { font-size: 14px; line-height: 1.75; letter-spacing: 0.03em; color: var(--cx-ink); }
.cm-howto__os {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--cx-blue);
  color: #fff;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.cm-qr__img { display: block; width: 180px; height: 180px; margin: 0 auto; }
.cm-qr__note { margin-top: 14px; font-size: 13px; line-height: 1.7; }
.cm-qr__note a { color: var(--cx-blue); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .cm-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cm-side { position: static; }
}
@media (max-width: 768px) {
  .cm-layout { margin-top: 20px; }
  .cm-map__link { border-radius: 8px; }
  .cm-map__cap { font-size: 13px; }
  .cm-card { padding: 22px 18px 20px; }
  .cm-qr__img { width: 160px; height: 160px; }
  .cm-qr__note { font-size: 12px; }
}