/**
 * common.css - 全ページ共通スタイル
 * スムーススクロール、フォームエラー、FAQアコーディオン、スクロールバー非表示など
 * 使用ページ: トップ、商品、コラム、ガイド、会社概要、特定商取引法、プライバシー、アカウント、チェックアウト等
 */

/* ==========================================
   スムーススクロール
   アンカーリンクやスクロール操作時の滑らかな遷移
   ========================================== */
html {
  scroll-behavior: smooth;
}

/* ==========================================
   ヘッダー追従時の余白（アンカーリンク先の見え方調整）
   ========================================== */
.scroll-mt {
  scroll-margin-top: 2rem;
}

/* ==========================================
   フォームエラー表示
   .form-group 内の input/select がエラー時に .has-error を付与
   .error-msg はエラー時のみ表示
   ========================================== */
.has-error input,
.has-error textarea,
.has-error select {
  border-color: #b22222 !important;
  background-color: #fff5f5 !important;
}

.error-msg {
  display: none;
  color: #b22222;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  font-weight: bold;
}

.has-error .error-msg {
  display: block;
}

/* ==========================================
   FAQアコーディオン用
   details/summary のデフォルト矢印を非表示にし、
   開閉時のアイコン回転を制御
   ========================================== */
details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] summary .faq-icon {
  transform: rotate(45deg);
}

/* ==========================================
   スクロールバー非表示
   横スクロールエリアやコードブロック等で使用
   ========================================== */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}