:root {
    --header-lg-h: 64px;
    --header-sm-h: 56px;
}
html, body {
    margin: 0;
    padding: 0;
    font-family: "Meiryo", "メイリオ", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", sans-serif;
}

/* header & footer colors*/
header {
    --bg: #141B29;
    --fg: #E6EDF3;
    --muted: #9FB0C0;
    --primary: #8FB4FF;
    --secondary: #5DD0C4;
    --acc: #8FB4FF;
    --focus: #99CCFF;
    --link: #8FB4FF;
}

footer {
    --bg: #F5F8FC;
    --fg: #1A1F29;
    --muted: #5C6B7A;
    --primary: #3366CC;
    --secondary: #26A69A;
    --acc: #3366CC;
    --focus: #6699FF;
    --link: #3366CC;
}

/* section themes*/

/* ===================== Main default (ライト系) ===================== */
main {
    --bg: #F5F8FC;
    --bg-alt: #FFFFFF;

    --fg: #1A1F29;
    --fg-strong: #0D121A;
    --fg-inv: #F2F5FA;
    --muted: #5C6B7A;

    --primary: #3366CC;
    --secondary: #26A69A;
    --acc: #3366CC;
    --link: #3366CC;
    --focus: #6699FF;
    --hover: #285199;

    --border: #CCD6E0;
}

/* ===================== Section: dark (ダーク系) ===================== */
main section[data-theme="dark"] {
    --bg: #202B3A;
    --bg-alt: #273349;

    --fg: #E6EDF3;
    --fg-strong: #F7FAFD;
    --fg-inv: #1A1F29;
    --muted: #AAB9C8;

    --primary: #8FB4FF;
    --secondary: #5DD0C4;
    --acc: #8FB4FF;
    --link: #8FB4FF;
    --focus: #99CCFF;
    --hover: #A6C2FF;

    --border: #415272;
}

/* ===================== Section: hero (ダーク系) ===================== */
main section[data-theme="hero"] {
    --bg: #243247;
    --bg-alt: #2C3E55;       /* 少し明るい面背景 */
    --fg: #FFFFFF;
    --fg-strong: #F7FAFD;
    --fg-inv: #0C1726;
    --muted: #B5C4D3;

    --primary: #5FAFFF;      /* 水色の主色（既存acc相当） */
    --secondary: #FFB366;    /* 暖色寄りサブで視線誘導 */
    --acc: #5FAFFF;
    --link: #5FAFFF;
    --focus: #88C5FF;
    --hover: #7ABFFF;        /* Hoverで少し明るく */

    --border: #3B4C65;
}

/* ===================== Section: warm (ライト系) ===================== */
main section[data-theme="warm"] {
    --bg: #FFF8F0;
    --bg-alt: #FFFFFF;
    --fg: #2E1B12;
    --fg-strong: #1F120B;
    --fg-inv: #F2F5FA;
    --muted: #8B6F5A;

    --primary: #E67E22;      /* 濃いめオレンジ */
    --secondary: #CC5A1A;    /* 暗め補助 */
    --acc: #E67E22;
    --link: #E67E22;
    --focus: #FFB366;
    --hover: #FF9933;        /* Hoverで明度アップ */

    --border: #E0D6CC;
}

/* ===================== Section: cool (ライト系) ===================== */
main section[data-theme="cool"] {
    --bg: #E8F6F7;
    --bg-alt: #FFFFFF;
    --fg: #102828;
    --fg-strong: #0B1C1C;
    --fg-inv: #F2F5FA;
    --muted: #5A7A7A;

    --primary: #26A69A;      /* ティール主色 */
    --secondary: #3366CC;    /* ブルー副色で相性良 */
    --acc: #26A69A;
    --link: #26A69A;
    --focus: #5DD0C4;
    --hover: #33BFB2;        /* Hoverで明度アップ */

    --border: #C2DDDD;
}

/* ===================== Section: accent-dark (ダーク系) ===================== */
main section[data-theme="accent-dark"] {
    --bg: #1C2230;
    --bg-alt: #262E40;
    --fg: #F2F5FA;
    --fg-strong: #FFFFFF;
    --fg-inv: #0C1726;
    --muted: #A0A8B5;

    --primary: #FF6B6B;      /* 赤系の主色 */
    --secondary: #88C5FF;    /* 寒色副色でコントラスト */
    --acc: #FF6B6B;
    --link: #FF6B6B;
    --focus: #FF9999;
    --hover: #FF8080;        /* Hoverで少し明るく */

    --border: #3A4155;
}

/* ===================== Section: neutral (ライト系) ===================== */
main section[data-theme="neutral"] {
    --bg: #F4F4F4;
    --bg-alt: #FFFFFF;
    --fg: #1F1F1F;
    --fg-strong: #0F0F0F;
    --fg-inv: #F2F5FA;
    --muted: #666666;

    --primary: #888888;      /* ニュートラル基調 */
    --secondary: #5555FF;    /* 差し色として寒色 */
    --acc: #888888;
    --link: #5555FF;
    --focus: #AAAAAA;
    --hover: #999999;        /* Hoverでやや明るく */

    --border: #DDDDDD;
}

/* ===================== Footer (ダーク系) ===================== */
footer {
    --bg: #141B29;
    --bg-alt: #1A2133;
    --fg: #E6EDF3;
    --fg-strong: #FFFFFF;
    --fg-inv: #0C1726;
    --muted: #9FB0C0;

    --primary: #8FB4FF;
    --secondary: #5DD0C4;
    --acc: #8FB4FF;
    --link: #8FB4FF;
    --focus: #99CCFF;
    --hover: #A6C2FF;        /* Hoverで明度アップ */

    --border: #2F3E52;
}


/* header & footer styles */
header .container,
footer .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 16px;
}

.nav-list{
    display: flex;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.nav-link{
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--fg);
    border-radius: 8px;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.nav-link:hover{
    background: rgba(255,255,255,0.06);
    color: var(--acc);
}
.nav-link:focus-visible{
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    color: var(--acc);
}

/* ---- 共通：ブランド ---- */
.brand{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.brand-logo{
    display: block;
    height: 40px; /* フッターで必要なら個別に上書き */
}
.brand-text{
    font-family: "Bebas Neue", system-ui, sans-serif;
    letter-spacing: .5px;
    font-size: 24px;
}

/* ---- 共通：アクセシビリティ ---- */
:where(.nav-toggle):focus-visible,
:where(.global-nav a, .footer-nav a):focus-visible{
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* ================================
   Header
   ================================ */

.header{
    height: var(--header-lg-h);
    background: var(--bg);
    color: var(--fg);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 1000;
}

.header__inner{
    /* .container をベースに追加のグリッド指定 */
    padding: 10px 16px;
    max-width: 1100px;
    margin: 0 auto;

    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

/* ハンバーガー */
.nav-toggle{
    --size: 44px;
    --bar-w: 28px;
    --bar-h: 2px;
    --radius: 2px;
    justify-self: end;
    inline-size: var(--size);
    block-size: var(--size);
    display: none;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    position: relative;
    color: var(--fg);
    cursor: pointer;
}
.nav-toggle:focus-visible{
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
.nav-toggle span{
    --bar-w: 28px;
    --bar-h: 2px;
    position: absolute;
    left: 0; right: 0;
    margin-left: auto; margin-right: auto;
    top: calc(50% + var(--offset, 0px));
    width: var(--bar-w);
    height: var(--bar-h);
    display: block;
    background: currentColor;
    border-radius: 2px;
    transform: rotate(0deg);
    transition: top .25s ease, transform .25s ease, opacity .2s ease;
    will-change: transform, top;
}
.nav-toggle span:nth-child(1){ --offset: -8px; }
.nav-toggle span:nth-child(2){ --offset: 0px; }
.nav-toggle span:nth-child(3){ --offset: 8px; }
.nav-toggle.is-active span:nth-child(1),
.nav-toggle[aria-expanded="true"] span:nth-child(1){
    top: 50%;
    transform: rotate(45deg);
    height: calc(var(--bar-h) * 1.25);
}
.nav-toggle.is-active span:nth-child(2),
.nav-toggle[aria-expanded="true"] span:nth-child(2){
    opacity: 0;
}
.nav-toggle.is-active span:nth-child(3),
.nav-toggle[aria-expanded="true"] span:nth-child(3){
    top: 50%;
    transform: rotate(-45deg);
    height: calc(var(--bar-h) * 1.25);
}

/* グローバルナビ（PC基準） */
.global-nav{
    display: block;
    justify-self: end;
}

/* ヘッダー内リンクのサイズ指定は .nav-link を上書き */
.global-nav .nav-list{
    gap: 18px;
}
.global-nav .nav-list a{
    height: 40px;
    padding: 0 8px;
    font-size: 15px;
}

/* モバイル展開 */
@media (max-width: 768px){
    .nav-toggle{ display: inline-grid; z-index: 1001; }

    .global-nav{
        position: absolute;
        left: 0; right: 0;
        top: var(--header-lg-h, 64px);
        background: var(--bg);
        border-top: 1px solid var(--line);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-4px);
        transition: max-height .28s ease, opacity .18s ease, transform .18s ease;
        pointer-events: none;
    }
    .global-nav .nav-list{
        display: grid;
        gap: 6px;
        padding: 12px 16px;
    }
    .global-nav .nav-list a{
        height: 44px;
        border-radius: 10px;
    }
    .global-nav.is-open{
        max-height: 60vh;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* ================================
   Footer
   ================================ */

.footer{
    background: var(--bg);
    color: var(--fg);
    border-top: 1px solid var(--line);
}

.footer__inner{
    /* .containerのパディングをフッター仕様に上書き */
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px 24px;
}

.site-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* フッターではロゴサイズを少し小さく */
footer .brand-logo{ height: 36px; }

/* フッターナビは共通.nav-list/.nav-linkを使用しつつサイズ調整 */
.footer-nav .nav-list{ gap: 16px; }
.footer-nav .nav-list a{
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
}

.footer__bottom{
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    text-align: center;
}
.footer__bottom small{
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 768px){
    .footer__top{
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .footer-nav .nav-list{
        justify-content: center;
        gap: 10px;
    }
    .footer-nav .nav-list a{
        height: 44px;
        padding: 0 14px;
        font-size: 15px;
    }
}