body > header { 
    background-color: var(--main-color);
    width: 100%;
    top: 0;
    left: 0;
    position: sticky;
    z-index: 10;
}

body > header > .header-inner { 
    /* base固定 */
    max-width: var(--width-limit);
    width: 100%;
    padding-inline: var(--pad-3) var(--pad-2);
    padding-block: 0 var(--pad-1);
    margin-inline: auto;

    /* grid構造（ロゴ2行貫通＋上下段） */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: minmax(auto, 45px)  minmax(auto, 41px);
    align-items: center;
}

body > header h1 {
    width: 132px;
    height: 60px;
    grid-row: span 2;
    align-self: end;
    position: relative;
    z-index: 999;
    margin-bottom: 5px;
    animation: all .5s linear;
}
body > header a { color: var(--color-white); }

body > header .nav.nav--info a, body > header .main-menu a { position: relative; }
body > header .nav.nav--info a::after, body > header .main-menu a::after {
    position: absolute;
    bottom: 5px;
    left: 0px;
    right: 0px;
    transform: scaleX(0);
    height: 1px;
    background-color: var(--color-white);
    transition: 0.25s;
    content: "";
}
body > header .nav.nav--info a::after { bottom: -10px; }
body > header .main-menu li.flow a::after { right: -8px; }
/* リンクアニメーション */
body > header .nav.nav--info a:hover::after, body > header .main-menu a:hover::after {
    transform: scaleX(1);
}
  

/* .main-menu ul { display: flex; } をnav.cssに記入済み*/
:where(.header-top, .main-menu ul) {
    justify-content: end;
}

.header-top {
    display: flex;
    align-items: end;
    gap: 28px;
}
/* === ヘッダーナビゲーション === */
/* 保護者の声〜 headerのみに使用*/
.nav.nav--info {
    display: flex;
    gap: 11px;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    bottom: 7px;
}
.nav.nav--info a { padding-inline: 2px; }

/* === Utility CTA === */
/*ベースはnav.cssに記載済み*/
header .nav.nav--utility {
    --btn-w: 124px;
    --btn-h: 44px;
    --btn-radius: 5px;
    --ico-size: 1.2em;
    --ico-shift: -2px;

    display: flex;
    gap: 5px;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    top: -1px;
}

header .nav.nav--utility li {
    width: var(--btn-w);
    height: var(--btn-h);
    border-radius: 0 0 var(--btn-radius) var(--btn-radius);
    letter-spacing: 0.025em;
}

header .nav.nav--utility li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    width: 100%;
    height: 100%;
    padding-inline: 9px 7px;
}

header .nav.nav--utility li > a::before {
    margin-top: var(--ico-shift);
}

/* ===　各ボタンの見た目 === */

/* 資料請求 */
header .nav.nav--utility .request { background-color: var(--color-request); }
header .nav.nav--utility .request > a { gap: 13px; }

/* 無料体験 */
header .nav.nav--utility .trial { background-color: var(--color-trial); }
header .nav.nav--utility .trial > a { gap: 9px; }

/* お問い合わせ */
header .nav.nav--utility .contact { background-color: var(--color-contact); }
header .nav.nav--utility .contact > a { gap: 4px; font-size: 14px;}

.bg-extend-top {
    color: #333;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  
  .bg-extend-top::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: -100%;
    transition: .4s;
    z-index: -1;
  }
  .request.bg-extend-top::before {/*varが使えなかったため直書き*/
    background-color: rgba(0, 160, 218, 0.8);
  }
  .trial.bg-extend-top::before {
    background-color: rgba(0, 119, 73, 0.8);
  }
  .contact.bg-extend-top::before {
    background-color: rgba(200, 70, 0, 0.8);
  }
  
  .bg-extend-top:hover::before {
    top: 0;
  }

/* Responsive */
@media (max-width: 920px) {
:root { --header-offset: 75px; }

    body > header > .header-inner { 
        display: flex;
        justify-content: space-between;
        padding-block: var(--pad-1);
    }

    header .menu-trigger summary {
        background-color: transparent;
    }
    body > header h1 {
        width: 110px;
        height: 50px;
    }
    body > header .header-bottom {
        width: fit-content;
    }
}

@media (max-width: 520px) {
    body > header {
        display: flex;
        justify-content: space-between;
        padding-inline: 4.4vw 3.7vw;
    }
    body > header > .header-inner{
        padding-inline: calc(var(--padding) * 0.1418);
    }
    header .main-menu ul {
        padding-top: 100px;
    }
}