/* ヘッダー関連の全CSS */
header {
    display: flex; justify-content: space-between; align-items: center;
    flex: 0 0 auto; min-height: 70px; padding: 5px 10px; z-index: 1000; position: relative;
}
.logo { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.logo img { height: clamp(45px, 7vw, 65px); width: auto; }
.logo-content { display: flex; flex-direction: column; gap: 1px; }
.header-title { 
    font-size: clamp(1.3rem, 4vw, 1.6rem); font-weight: 800; font-family: serif; font-style: italic; 
    white-space: nowrap; color: #000; 
}
.header-title a {
  color: inherit;
  text-decoration: none;
}

.header-title a:hover {
  text-decoration: underline;
}

.header-title2 { 
    font-size: clamp(0.8rem, 2.5vw, 1rem); 
    color: #000; white-space: nowrap; 
}
.menu-toggle { display: none; flex-direction: column; cursor: pointer; padding: 6px; gap: 3px; z-index: 1001; }
.menu-toggle span { width: 28px; height: 3px; background: #000; border-radius: 3px; transition: all 0.3s ease; transform-origin: center; }
nav {
  display: flex; align-items: center; justify-content: flex-end; 
  margin-right: 30px;
}
nav ul { display: flex; list-style: none; gap: 8px; margin: 0 0 0 20px; z-index: 3002; }
nav a { color: #000; font-weight: 600; text-decoration: none; transition: all 0.3s ease; margin-left: 10px; font-size: clamp(0.9rem, 3vw, 1rem); }
nav a:hover { color: #77e11b; }

/* メディアクエリ（ヘッダー部分） */
@media (max-width: 768px) {
    nav { order: 2; flex-shrink: 0; margin: 0 10px 0 0; }
    .menu-toggle { display: flex ; order: 3; margin-left: auto ; margin-right: 15px ; flex-shrink: 0 ; min-width: 40px ; }
    header { padding: 3px 15px ; margin-bottom: 10px; }
    nav ul {
        display: none ; position: absolute ; top: 100% ; left: 0 ; right: 0 ; 
        background: linear-gradient(#605f5f, #2a2a28) ; flex-direction: column ; padding: 20px 15px ;
        gap: 12px ; margin-top: 2px ; border-bottom: 3px solid #718096 ; z-index: 9999 ; width: 100% ;
    }
    nav ul.active { display: flex ; }
    nav a { padding: 10px 15px ; font-size: 0.9rem ; text-align: center ; width: 100% ; color: #fff ; }
    nav a:hover { color: #77e11b; }
    .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
    .menu-toggle.active span:nth-child(2) { opacity: 0; }
    .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(8px, -7px); }
}