/* ========================================
   Garage Memo Header v1.0 Official
   Refactored CSS
======================================== */

/* bodyスタイルはページ側へ移動
body{
    margin:0;
    background:#f7f3ec;
    font-family:"Noto Sans JP",sans-serif;
}
*/

/* Header */
.header{
    width:100%;
    position:relative;
    background:linear-gradient(180deg,#5b3b2a 0%,#4a3124 100%);
    border-bottom:3px solid #b88a44;
}

/* Header Container */
.header-container{
    max-width:1200px;
    margin:0 auto;
    padding:20px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
}

/* Brand */
.brand{
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex:1;
    min-width:0;
    min-height:113px;
    gap:10px;
}

/* Logo */
.logo{
    display:inline-flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    width:445px;
    max-width:100%;
    cursor:pointer;
    transition:transform .2s ease,opacity .2s ease,filter .2s ease;
}
.logo:hover{
    opacity:.9;
    transform:translateY(-1px);
}
.logo:active{
    transform:translateY(1px) scale(.98);
}
.logo img{
    display:block;
    width:100%;
    height:auto;
    filter:brightness(0) invert(1);
}

/* Subtitle */
.subtitle{
    width:445px;
    max-width:100%;
    margin:0;
    font-size:1.25rem;
    line-height:1.4;
    color:#f4ede2;
    text-align:center;
    align-self:flex-start;
}

/* Navigation */
.pc-nav{
    display:flex;
    align-items:center;
    gap:20px;
    flex-shrink:0;
}
.mobile-nav{
    display:none;
    flex-shrink:0;
}
.icon-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    font-size:2rem;
    text-decoration:none;
    cursor:pointer;
    color:#fff;
    border:none;
    background:none;
    border-radius:12px;
    transition:color .2s ease,transform .2s ease;
}
.icon-btn:hover{
    color:#d4a84f;
    transform:translateY(-1px);
}
.icon-btn:active{
    transform:translateY(1px) scale(.97);
}

/* Hamburger */
.menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:998;
}
.menu-overlay.is-open{
    opacity:1;
    visibility:visible;
}
body.menu-open{
    overflow:hidden;
}
.hamburger-menu{
    position:absolute;
    top:100%;
    right:0;
    width:360px;
    max-width:100%;
    display:flex;
    flex-direction:column;
    padding:24px;
    gap:16px;
    background:linear-gradient(180deg,#5b3b2a 0%,#4a3124 100%);
    border-left:1px solid #b88a44;
    display:none;
    z-index:999;

    max-height:100dvh;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
}
.hamburger-menu.is-open{display:flex;}
.menu-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-bottom:12px;
    border-bottom:2px solid rgba(184,138,68,.35);
}
.menu-home,.accordion-content a{
    color:#fff;
    text-decoration:none;
    padding:6px 0;
}
.accordion-btn i,.menu-home i{color:#d4a84f;margin-right:8px;}
.accordion-btn{
    width:100%;
    text-align:left;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
    color:#fff;
    font-weight:700;
    font-size:1rem;
}
.accordion-content{
    display:none;
    flex-direction:column;
    gap:8px;
    padding-left:16px;
}
.accordion-content.is-open{
    display:flex;
}

.menu-home,
.accordion-btn{
    display:flex;
    align-items:center;
    gap:12px;
}

.menu-home i,
.accordion-btn i{
    width:20px;
    flex:0 0 20px;
    text-align:center;
    margin-right:0;
    position:relative;
    top:-1px;
}

.accordion-content a{
    display:block;
    padding-left:32px;
    line-height:1.5;
    word-break:break-word;
}

.menu-home:hover,.accordion-btn:hover,.accordion-content a:hover{opacity:.9;}

/* Responsive */
@media (max-width:1024px){
 .header-container{padding:14px 24px;}
 .logo,.subtitle{width:360px;}
 .subtitle{font-size:1.1rem;}
}
@media (max-width:768px){
 .header-container{padding:13px 20px;}
 .pc-nav{display:none;}
 .mobile-nav{display:flex;align-items:center;}
 .brand{min-height:83px;gap:8px;}
 .logo,.subtitle{width:300px;}
 .subtitle{font-size:1rem;}
 .icon-btn{width:48px;height:48px;font-size:1.7rem;}
 .hamburger-menu{width:100%;left:0;right:0;}
}
@media (max-width:480px){
 .header-container{gap:16px;padding:11px 16px;}
 .logo,.subtitle{width:240px;}
 .subtitle{font-size:.9rem;}
 .hamburger-menu{padding:20px;}
}

/* Logo shine */
.logo::after{
 content:"";
 position:absolute;
 top:-20%;left:-35%;
 width:22%;height:140%;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
 transform:skewX(-25deg) translateX(-250%);
 pointer-events:none;
}
.logo:hover{
 filter:brightness(1.08);
}
.logo:hover::after{
 animation:logoShine .7s ease;
}
@keyframes logoShine{
 to{transform:skewX(-25deg) translateX(700%);}
}