/*
 * reset.css
 * 要素のデフォルトスタイルをリセット（margin / padding / list-style 等）
 * 変数・ベースは common.css で定義。読み込み順: reset.css → common.css → style.css
 */

/* ==========================================================================
   1. ボックスモデル
   ========================================================================== */

*,
*::before,
*::after {

  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

/* ==========================================================================
   2. ドキュメント（html）
   ========================================================================== */

html {

  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  word-break: normal;
  overflow-wrap: break-word;
  overflow-x: hidden;

}

/* ==========================================================================
   3. ボディ
   ========================================================================== */

body {

  margin: 0;
  padding: 0;
  overflow-x: hidden;

}

/* ==========================================================================
   4. タイポグラフィ
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {

  margin: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;

}

p {

  margin: 0;

}

/* ==========================================================================
   5. リスト
   ========================================================================== */

ul, ol {

  margin: 0;
  padding: 0;
  list-style: none;

}

li {

  margin: 0;
  padding: 0;

}

/* ==========================================================================
   6. リンク
   ========================================================================== */

a {

  color: inherit;
  text-decoration: none;
  background-color: transparent;
  transition: color var(--transition-base);

}

@media (hover: hover) and (pointer: fine) {
a:hover {

  color: var(--color-primary);

}}


/* ==========================================================================
   7. 画像・メディア
   ========================================================================== */

img, picture, video, canvas, svg {

  display: block;
  max-width: 100%;
  height: auto;

}

img {

  border-style: none;

}

svg {

  overflow: hidden;

}

/* ==========================================================================
   8. フォーム要素
   ========================================================================== */

input, button, textarea, select {

  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  outline: none;

}

button, input[type="submit"], input[type="button"] {

  cursor: pointer;

}

button:disabled {

  cursor: not-allowed;
  opacity: 0.6;

}

/* ==========================================================================
   9. テーブル
   ========================================================================== */

table {

  border-collapse: collapse;
  border-spacing: 0;

}

th, td {

  padding: 0;
  text-align: left;

}

/* ==========================================================================
   10. 埋め込みコンテンツ
   ========================================================================== */

iframe, embed, object {

  border: none;
  max-width: 100%;

}

/* ==========================================================================
   11. details / summary / dialog
   ========================================================================== */

details {

  display: block;

}

summary {

  display: list-item;
  cursor: pointer;

}

dialog {

  padding: 0;
  border: none;
  background: transparent;

}

/* ==========================================================================
   12. アクセシビリティ
   ========================================================================== */

/* 🔴 「動きを減らす」設定（prefers-reduced-motion）で動きを止める規則は置かない。
   このサイトは設定に関係なく全員に同じ演出を出す（2026-09-24 ご指示。理由は script.js の先頭） */

:focus-visible {

  outline: 2px solid var(--color-primary);
  outline-offset: 2px;

}

/* ==========================================================================
   13. ユーティリティ（スクリーンリーダー・スキップリンク）
   ========================================================================== */

.sr-only {

  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;

}

.skip-link {

  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--color-primary);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: var(--z-tooltip);

}

.skip-link:focus {

  top: 6px;

}

/* ==========================================================================
   14. レイアウトユーティリティ（common の変数を使用）
   ========================================================================== */

.container {

  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-md);

}

.grid {

  display: grid;
  gap: var(--spacing-md);

}

.flex {

  display: flex;

}

.flex-col {

  flex-direction: column;

}

.items-center {

  align-items: center;

}

.justify-center {

  justify-content: center;

}

.justify-between {

  justify-content: space-between;

}

/* ==========================================================================
   15. レスポンシブ
   ========================================================================== */

@media (max-width: 768px) {

  .container {

    padding: 0 var(--spacing-sm);
  
}

}

/* ==========================================================================
   16. 印刷
   ========================================================================== */

@media print {

  *,
  *::before,
  *::after {

    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  
}

  a, a:visited {

    text-decoration: underline;
  
}

  a[href]::after {

    content: " (" attr(href) ")";
  
}

  abbr[title]::after {

    content: " (" attr(title) ")";
  
}

  pre {

    white-space: pre-wrap !important;
  
}

  pre, blockquote {

    border: 1px solid #999;
    page-break-inside: avoid;
  
}

  thead {

    display: table-header-group;
  
}

  tr, img {

    page-break-inside: avoid;
  
}

  p, h2, h3 {

    orphans: 3;
    widows: 3;
  
}

  h2, h3 {

    page-break-after: avoid;
  
}

}

/* ==========================================================================
   17. ダークモード・ハイコントラスト（common の変数を上書き）
   ========================================================================== */

@media (prefers-color-scheme: dark) {

  :root {

    --color-text: #fff;
    --color-text-light: #ccc;
    --color-bg: #1a1a1a;
    --color-bg-light: #2a2a2a;
    --border-color-light: #444;
    --border-color-muted: #333;
  
}

}

@media (prefers-contrast: high) {

  :root {

    --color-text: #000;
    --color-bg: #fff;
    --border-color-light: #000;
  
}

}