header {
    background-color: #d8c8c8;
    height: 100px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}



html, body {
     margin: 0; 
     padding: 0; 
     background: #494949;
}

/* PC・タブレット用（通常） */
.logo {
  height: clamp(40px, 8vw, 80px);
  width: auto;
}

.title {
  height: clamp(40px, 10vw, 80px);
  width: auto;
}

/* スマホ用（画面幅600px以下） */
@media (max-width: 600px) {
  .logo {
    width: 40vw;   /* ← スマホでは幅で指定した方が大きく見える */
    height: auto;
  }

  .title {
    width: 70vw;   /* ← タイトルは横長なので幅基準が最適 */
    height: auto;
  }
}




.menu {
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  background: #ffffff;
}


.menu ul {
    list-style:none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 6vw;
    flex-wrap: nowrap;
}



.menu a {
  font-size: clamp(14px, 2vw, 22px);
  font-family: "Kosugi Maru", sans-serif;
  text-decoration: none;
  color: black;
}

/* スマホ用（600px以下） */
@media (max-width: 600px) {
  .menu a {
    font-size: clamp(18px, 5vw, 30px); /* ← スマホでは大きめに */
  }

  .menu ul {
    gap: 10vw; /* ← 文字が大きくなるので間隔も広げる */
  }

  .menu {
    height: 60px; /* ← メニューの高さも増やすとバランスが良い */
  }
}