header {
  display: flex;
  flex-direction: column; /* 上：ロゴ、下：ナビ+右ツール */
  gap: 20px;              /* ロゴとナビ+右ツールの間隔 */
  padding: 15px 60px;
  margin-bottom: 50px;    /* ← ここで下のスペースを追加 */
}
/* ロゴ */
.logo-area .logo_top {
  width: 100%;
  height: auto;
  display: block;
}

/* ナビ + 右ツールを横並び */
.nav-right-tools {
  display: flex;
  align-items: center;
  justify-content: center; /* ← ここで中央寄せ */
  gap: 200px; /* ナビと右ツールの間隔 */
}

.logo-area {
  margin-bottom: 30px; /* ロゴ下の余白 */
}

/* ナビ */
nav {
  display: flex;
  gap: 100px;
  font-size: 20px;
}

nav a {
  text-decoration: none;  /* 下線を消す */
  color: #fff;
  transition: 0.3s;
}

nav a:hover {
  opacity: 0.7;
  text-decoration: none; /* ホバー時も下線なし */
}

/* 右ツール */
.right-tools {
  display: flex;
  align-items: center;
  gap: 20px;
}

.language-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #000;
  padding: 4px 10px;
  border-radius: 2px;
  font-size: 18px;
}

.language-links {
  display: flex;
  gap: 6px;
  font-size: 17px;
}

.language-links a {
  color: #fff; /* 通常は白 */
  text-decoration: none;
}

.language-links a.active {
  color: #f1c40f; /* 現在の言語だけ黄色 */
  font-weight: bold;
}

.mail-icon {
  width: 34px;
  height: 34px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mail-icon::before {
  content: "✉️";
  font-size: 16px;
}

/* レスポンシブ */
@media (max-width: 900px) {
  .nav-right-tools {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
	
	
  nav {
    flex-wrap: wrap;
    gap: 20px;
  }
}

@media (max-width: 900px) {
  header {
    padding: 15px 20px;
    gap: 20px;
  }

  /* ロゴを少し小さく */
  .logo-area img {
    width: 60%; /* 横幅を画面幅に応じて縮小 */
    height: auto;
  }

  /* ナビと右ツールを中央寄せで少し縮小 */
  .nav-right-tools {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  nav {
    gap: 25px;          /* ナビの間隔を少し狭く */
    font-size: 14px;    /* ← 文字を少し小さく */
  }

  .language-box {
    font-size: 13px; /* 言語ボタンも少し小さく */
    padding: 3px 8px;
  }

  .language-links {
    font-size: 12px;
  }

  .mail-icon {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 900px) {
  .nav-right-tools {
    display: flex;
    flex-direction: row;   /* ← 横並びに変更 */
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;       /* 幅が狭いときは折り返しOK */
  }

  nav {
    display: flex;
    justify-content: center;
    gap: 40px;
  }

  .right-tools {
    display: flex;
    align-items: center;
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .navbar a,
  .navbar-right a {
    font-size: 16px;
    margin: 6px 0;
  }

  .logo img {
    width: 80%;
  }
}