@charset "utf-8";

:root {
    --main: #82d7dc;
}

#pc_header {
    &.fixed_header {
        background: var(--main);
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;

        +#content {
            padding-block: 170px 0;
        }
    }
}


.sp_header_container {
    position: relative;

    &.fixed_header {
        background: var(--main);
        left: 50%;
        max-inline-size: 930px;
        position: fixed;
        top: 0;
        translate: -50% 0;
        width: 100%;
        z-index: 999;

        &::before,
        &::after {
            background: var(--main);
            content: "";
            display: block;
            height: 100%;
            position: fixed;
            top: 0;
            translate: 0 0;
            width: 100cqi;
            z-index: -999;
        }
        &::before{
            right: 0;
        }
        &::after{
            left: 0;
        }
    }

    .w_728_max {
        display: block;
        position: absolute;
        right: 2%;
        top: 26%;

        @media screen and (min-width: 728px) {
            display: none;
        }
    }
}


.w_728_min {
    display: none;

    @media screen and (min-width: 728px) {
        display: block;
    }
}

#hd_inner:has(.fixed_header) .hd_inner02 {
    padding-block: 80px 0;
}