/* ===== Reset: bodyの余白を完全にゼロ ===== */
* {
  margin: 0;
  padding: 0;
}
html, body {
  margin: 0 !important;
  padding: 0;
}

.loading {
  display: none;
}

/* ===== Header: ロゴのサイズ/整列を調整 ===== */
#header .h-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 2%;
  max-width: 1200px;
  margin: 0 auto;
}
.h-left,
.h-userinfo { float: none; } /* 既存floatを無効化 */
.h-left { display: flex; align-items: center; gap: 12px; }

/* ロゴは「高さ固定・横は自動」で崩れ防止 */
.h-logo { width: auto; line-height: 0; }
.h-logo a { display: inline-flex; align-items: center; }
.h-logo img {
  height: 40px;        /* デスクトップ標準高さ */
  width: auto;         /* 縦基準でアスペクト維持 */
  max-height: 40px;    /* 念のための上限 */
}
@media (max-width: 768px) {
  .h-logo img { height: 36px; max-height: 36px; }
}
@media (max-width: 550px) {
  .h-logo img { height: 32px; max-height: 32px; }
}

/* ===== Footer: ULは中央配置・中身は左揃え、著作表記は中央 ===== */
#footer {
  background: #fafafa;
  border-top: 1px solid #ebebeb;
  width: 100%;
}
.f-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* ULの塊を中央へ */
  align-items: flex-start;
  gap: 24px 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 4%;
}
#footer .fw-item {
  list-style: none;          /* discなし */
  text-align: left;          /* テキストは左揃え */
  padding: 0;
  margin: 0;
  min-width: 240px;          /* 2列になりやすい下限 */
  max-width: 360px;
  flex: 1 1 260px;           /* 画面幅で1〜2列に可変 */
}
#footer .fw-item li { margin: 4px 0; padding: 0; }
#footer .fw-item a {
  color: #666;
  padding: 0 2px;
  border-radius: 4px;
  transition: background-color .2s, color .2s;
}
#footer .fw-item a:hover { color: #111; background: #ededed; }

/* 著作表記は常に中央寄せ */
.fopyright, .f-copyright {
  display: block;
  text-align: center;
  color: #999;
  margin: 8px auto 16px;
}

/* ===== Dark Mode（body背景で暗転、リンクは読みやすい色へ） ===== */
@media (prefers-color-scheme: dark) {
  body:not(.force-light) {
    background: #0f1113;
    color: #e8e8e8;
  }
  body:not(.force-light) #header {
    background: #444;
    border-bottom: 1px solid #2a2f34;
    box-shadow: 0 1px 0 rgba(255,255,255,.02) inset;
  }
  body:not(.force-light) #footer {
    background: #0f1113;
    border-top: 1px solid #2a2f34;
  }
}