/* ============================================================
   _base/style.css
   共通変数・リセット・ベーススタイル
   ============================================================ */

/* ------------------------------------------------------------
   CSS Custom Properties（デフォルト値）
   各デモの style.css で上書きして使う
   ------------------------------------------------------------ */
:root {
  /* カラー */
  --color-primary:    #333333;
  --color-accent:     #f5f0eb;
  --color-text:       #333333;
  --color-text-sub:   #888888;
  --color-bg:         #ffffff;
  --color-bg-alt:     #f8f8f6;
  --color-border:     #e0e0e0;
  --color-white:      #ffffff;
  --color-btn-solid-text: #ffffff; /* btn--solid のテキスト色。明るいprimaryを使う場合は上書き */

  /* フォント */
  --font-main:        'Noto Sans JP', sans-serif;
  --font-heading:     'Noto Sans JP', sans-serif;

  /* シェイプ */
  --radius:           6px;
  --radius-lg:        12px;

  /* シャドウ */
  --shadow:           0 2px 12px rgba(0, 0, 0, .08);
  --shadow-lg:        0 4px 24px rgba(0, 0, 0, .12);

  /* スペーシング */
  --spacing-xs:       0.5rem;
  --spacing-sm:       1rem;
  --spacing-base:     1.5rem;
  --spacing-md:       2rem;
  --spacing-lg:       3rem;
  --spacing-xl:       4rem;

  /* セクション */
  --section-padding:  80px;

  /* コンテナ */
  --container-width:  1100px;
  --container-px:     1.5rem;

  /* トランジション */
  --transition:       0.25s ease;
}

/* ------------------------------------------------------------
   リセット
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}

/* リンク */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity var(--transition);
}
a:hover {
  opacity: 0.75;
}

/* 画像 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* リスト */
ul, ol {
  list-style: none;
}

/* フォーム要素の継承 */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
}

/* ------------------------------------------------------------
   コンテナ
   ------------------------------------------------------------ */
.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* ------------------------------------------------------------
   セクション共通
   ------------------------------------------------------------ */
.section {
  padding-block: var(--section-padding);
}

/* 背景色の交互 */
.section--white {
  background-color: var(--color-bg);
}
.section--alt {
  background-color: var(--color-bg-alt);
}
.section--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* セクション見出し（共通） */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}
.section-header__title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: var(--spacing-xs);
}
.section-header__sub {
  color: var(--color-text-sub);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------
   ユーティリティ
   ------------------------------------------------------------ */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-sub     { color: var(--color-text-sub); }

.mt-sm  { margin-top: var(--spacing-sm); }
.mt-base{ margin-top: var(--spacing-base); }
.mt-md  { margin-top: var(--spacing-md); }
.mt-lg  { margin-top: var(--spacing-lg); }

.mb-sm  { margin-bottom: var(--spacing-sm); }
.mb-base{ margin-bottom: var(--spacing-base); }
.mb-md  { margin-bottom: var(--spacing-md); }
.mb-lg  { margin-bottom: var(--spacing-lg); }

/* 非表示（アクセシビリティ対応） */
.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;
}

/* ------------------------------------------------------------
   グリッド補助
   ------------------------------------------------------------ */
.grid {
  display: grid;
  gap: var(--spacing-base);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  :root {
    --section-padding: 56px;
  }
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   フェードインアニメーション（scroll-animation.js と連携）
   ------------------------------------------------------------ */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}