//ヘッダー透過設定時、かつトップページでしか読み込まれない
@import "../foundation/mixin/**";
@import "../foundation/setting/variable";


.c-infoBar {
    display: none;
}

.l-header {
    // position: fixed !important;
    top: 0;
    left: 0;
    transition: background-color .25s;

    @include pc {

        &[data-pcfix="1"] {
            position: fixed;
        }

        &[data-pcfix="0"] {
            position: absolute;
            transition-duration: 0s;
        }
    }

    @include sp {

        &[data-spfix="1"] {
            position: fixed;
        }

        &[data-spfix="0"] {
            position: absolute;
            transition-duration: 0s;
        }
    }

    .l-header__body {
        // transition: color .25s; //ナビやアイコンには各自 transition がついている
        color: #fff;
    }

    .c-headLogo {
        position: relative;
    }
    // 初期状態で、普通のロゴは非表示
    .c-headLogo__img {
        transition: opacity .25s;
    }

    .c-headLogo__img.-common {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0;
    }

    // これは設定によって変える ?
    // .l-container {
    //     max-width: 100%;
    // }

}

[data-scrolled="false"] {

    .l-header {
        background-color: transparent;
    }

    .c-gnav > .menu-item > a::after {
        background: #fff;
    }

}

@include pc {

    // 固定設定ありの時だけ、スクロールされたときに通常時の見た目に戻す
    [data-scrolled="true"] {

        [data-pcfix="1"] {

            .l-header__body {
                color: inherit;
            }

            .c-headLogo__img.-top {
                opacity: 0;
            }

            .c-headLogo__img.-common {
                opacity: 1;
            }

        }
    }

    // PCで固定設定なしの時
    .l-header[data-pcfix="0"] {
        top: 0 !important;
        // data-scrolled=" true"でも透明を維持
        background-color: transparent;
    }
}

@include sp {

    // 固定設定ありの時だけ、スクロールされたときに通常時の見た目に戻す
    [data-scrolled="true"] {

        [data-spfix="1"] {

            .l-header__body {
                color: inherit;
            }

            .c-headLogo__img.-top {
                opacity: 0;
            }

            .c-headLogo__img.-common {
                opacity: 1;
            }

        }
    }

    // SPで固定設定なしの時
    .l-header[data-spfix="0"] {
        top: 0 !important;
        // data-scrolled=" true"でも透明を維持
        background-color: transparent;
    }
}


.l-headerUnder {
    transition: background-color .25s;
}

// 透明に。
.l-headerUnder:not([data-fix]),
[data-scrolled="false"] .l-headerUnder[data-fix] {
    color: #fff;
    background-color: transparent;
}


// ナビが fix しない場合 & ナビだけが fix の場合
.l-headerUnder:not([data-fix]),
[data-pcfix="0"] + .l-headerUnder[data-fix] {
    position: absolute;
    top: var(--header_height);
}

// ナビだけが fix の場合 (ちょっとチラつくが、このパターンは非推奨で。)
[data-scrolled="true"] [data-pcfix="0"] + .l-headerUnder[data-fix] {
    position: fixed;
    top: 0;
}

[data-scrolled="true"] .admin-bar [data-pcfix="0"] + .l-headerUnder[data-fix] {
    top: 32px;
}


// ヘッダーもナビだけも fix の場合
[data-pcfix="1"] + .l-headerUnder[data-fix] {
    position: fixed;
    top: calc(var(--header_height));
}

.admin-bar [data-pcfix="1"] + .l-headerUnder[data-fix] {
    top: calc(var(--header_height) + 32px);
}