/* /css/common.css */
:root {
  --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --primary-color: #007BFF;
  --text-color: #333;
  --background-color: #fff;
  --border-color: #ccc;
  --footer-text-color: #666;
  --base-margin: 40px;
  --base-padding: 20px;
  --base-line-height: 1.8;
  --h1-size: 28px;
  --h1-size-sm: 22px;
  --font-size-base: 16px;
  --link-color: blue;
  --container-max-width: 800px;
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 20px;
  --space-lg: 40px;
  --fs-lg: 20px;
  --radius: 4px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  max-width: var(--container-max-width);
  margin: var(--base-margin) auto;
  padding: var(--base-padding);
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: var(--base-line-height);
}

header {
  text-align: center;
  margin-bottom: 30px;
}

h1 {
  font-size: var(--h1-size);
  margin-bottom: 20px;
}

p {
  font-size: var(--font-size-base);
  margin-bottom: 20px;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

footer {
  text-align: center;
  font-size: 14px;
  color: var(--footer-text-color);
  margin-top: var(--base-margin);
  padding: var(--base-padding);
}

footer a {
  margin: 0 8px;
}

@media (max-width: 768px) {
  footer {
    padding: 5px 10px;     /* 内側余白をコンパクトに */
    margin-top: 10px;      /* 上部余白も少なめに */
    font-size: 12px;       /* 文字サイズを小さく */
    line-height: 1.2;      /* 行間を詰める */
    background-color: #fff; /* 背景色を揃える場合 */
  }
  /* フッター内のリストをflexでレイアウト */
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  /* 各リスト項目の設定 */
  .footer-links li {
    /* 横幅は2列になるように（4リンクの場合） */
    flex: 1 1 45%;
    margin: 4px 2%;
    text-align: center;
  }
  /* リンクそのもののスタイル（必要に応じて） */
  .footer-links li a {
    text-decoration: none;
    color: var(--link-color);
  }
}