/* recoheader2.CSS */
.recoheader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px; /* PCサイズ */
    z-index: 9999;
    background-color: #fff;
    border-bottom: 11px solid #f5c905;
}
.header-inner {
    margin: 0 auto;     /* 中央寄せ */
    width: 100%;
    height: 100%;       /* ヘッダーの高さ(100px)一杯に広げる */
    display: flex;      /* ★ここでFlexを開始 */
    align-items: center; /* 上下中央 */
    justify-content: space-between; /* ★これで左右に分かれる */
    padding: 5px 20px 0px 20px;    /* ロゴが端にくっつかないための余白 */
    box-sizing: border-box;
}
.logo { display: flex; align-items: center;  flex-shrink: 0; }
.logo img { height: clamp(45px, 4.0vw, 65px); width: auto; }
.menu-toggle { display: none; flex-direction: column; cursor: pointer; padding: 6px; gap: 3px; z-index: 100; }
.menu-toggle span { width: 28px; height: 3px; background: #f5c905; 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: 300; }
nav a { color: #f5c905; 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) {
    .menu-toggle { display: flex ; order: 3; margin-left: auto ; margin-right: 15px ; flex-shrink: 0 ; min-width: 40px ; 
    }
    .recoheader { padding: 5px 5px ; height: 50px;}
    .logo {
        flex: 1; /* スペースを確保して中央に寄せやすくする */ }
    .logo img { height: clamp(35px, 3.5vw, 40px); width: auto;}
    nav { order: 2; margin: 0; }
    nav ul {
        display: none;
        position: fixed; 
        top: 70px;       /* ヘッダーの高さに合わせて微調整 */
        left: 0;
        right: 0;
        background: linear-gradient(#e4c78c, #fff);
        flex-direction: column;
        padding: 20px 15px;
        z-index: 9998; /* ヘッダー(9999)のすぐ下 */
    }
    nav ul.active { display: flex ; }
    nav a { padding: 10px 15px ; font-size: 0.9rem ; text-align: center ; width: 100% ; color: #f99e01 ; 
    }
    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); }
}
    
 @media (max-width: 486px) {
    .recoheader {
        padding: 5px 10px 2px 10px;
        width: 100%;
    }

    .logo img { height: clamp(40px, 3.5vw, 50px); width: auto; }

    nav ul {
        top: 55px; /* ヘッダーが細くなった分、メニューの位置も上げる */
    }
}