/*
:root {
  --bg:#0b0b0c;
  --fg:#e7e7ea;
}
*/

/*
html, body {
  background: var(--bg);
  color:var(--fg);
}
*/

.logo-image {
  height: 100px;
  width: auto;
  display: block;
}

.header {
  background: linear-gradient(90deg, #C4C9F2, #A3E9D0);
  color: #ffffff; 
  padding: 20px 0;
}

.header-container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;  /* 垂直方向中央揃え */
  justify-content: space-between;  /* 要素間を左右に振り分ける */
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 1px;
}

.nav ul {
  list-style: none;
  display: flex; /* リストの要素を横並びにする */
}

.na{
  margin-left: 25px; /* 項目間のスペース */
}

.nav ul li a {
  color: #ecf0f1;
  text-decoration: none; /* 下線なし */
  transition: color 0.5s ease;
}

.nav ul li a:hover {
  color: #f39c12;
}

btn-primary, .btn-secondary, .btn-ghost {
  font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid #333; cursor: pointer;
}

.btn-primary { 
  background-color: #6AC990;
  color: #ffffff;
  border: none;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.6s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-secondary { background: #ddd; }
.btn-ghost { background: transparent; }