/* ===================================
   base.css — 全ページ共通の土台
   リセット / CSS変数 / 要素デフォルト
   読み込み順: base → layout → components → ページ別
=================================== */
/* ===================================
   RESET & BASE
=================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-red:    #C30D23;   /* Figma: Primary/Accent1 */
  --color-white:  #FFFFFF;
  --color-black:  #000000;
  --color-dark:   #111111;
  --color-gray:   #888888;
  --color-overlay: rgba(0, 0, 0, 0.35);

  --font-ja:  'Noto Sans JP', sans-serif;
  --font-en:  'Montserrat', sans-serif;

  --header-h: 100px;  /* Figma: Header height */
  --transition: 0.3s ease;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* htmlレベルで横スクロール完全抑止 */
  background: #ffffff;  /* iPhone Safari セーフエリア（ステータスバー上・ホームインジケーター下）の背景色 */
}

body {
  font-family: var(--font-ja);
  background: #ffffff;
  color: var(--color-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===================================
   ページ別 body 背景（コンテンツ領域の管理）
   セーフエリアは html で一元管理、body は各ページのコンテンツ用
=================================== */
body.detail-page,
body.news-page {
  background: #ffffff;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

@media (max-width: 768px) {

  :root {
    --header-h: 60px;
  }
}