@import url('https://fonts.googleapis.com/css2?family=Kosugi&family=M+PLUS+2:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

body{

}

*{
    margin: 0px;
    font-family: Noto Sans JP;
}

#header_content{
    display: inline-block;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    background: #ffffffc9;
}

#header_content:before{
    content: '';
    background: inherit;/*.bgImageで設定した背景画像を継承する*/
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    position: absolute;
    z-index: -1;/*重なり順序を一番下にしておく*/
  }

#header_logo{
    margin-top: 5px;
    margin-left: 20px;
    display: inline-block;
    padding: 5.5px;
    
}

#header_logo img{
    height: 48px;
}

.color_eee_1_25px_border_bottom_anime{
    background-color: #eee;
    width: 100%;
    height: 1px;
    display: block;
    animation: slide_anime01 1.5s;
}

#main_content{
    margin-left: 42px;
    margin-top: -5px;
}

@keyframes slide_anime01 {
    0%{
        transform: translateX(-100%);
    }

    100%{
        transform: translateX(0%);
    }
}

@keyframes startup {
    0%{
        filter: blur(3px);
        opacity: 0.5;
    }

    80%{
        filter: blur(0.2px);
        opacity: 1;
    }

    
    100%{
        filter: blur(0px);
        opacity: 1;
    }
}



.txt_title span{
    display: inline-block;
    height: 48px;
    width: 8px;
    vertical-align: -22%;
    margin-right: 10px;
    background: #74beff;
}


#picup{
    background: url(/img/obu-3.jpg);
    width: 100%;
    height: 32vh;
}

#picup span{
    font-weight: bold;
    position: absolute;
    left: 80px;

    color: #fff;

    z-index: 2;
}

@media (max-width: 1200px) {
    #picup span{
        font-size: 2.2rem;
        top: 26.5%;
    }

    #picup{
        background-position-y: -475px;
        background-size: 2000px;
        background-position-x: -900px;
    }

    #picup div{
        width: 550px;
        height: 32vh;
        background: #00000060;
        animation: startup_slide 0.3s;
    }
}


@media (min-width: 1200px) {
    #picup span{   
        font-size: 3.2rem;
        top: 23%;
    }

    #picup{
        background-position-y: -475px;
        background-size: 2000px;

    }

    #picup div{
        width: 550px;
        height: 32vh;
        background: #0000004a;
        animation: startup_slide 0.3s;
        
    }

}

@keyframes startup_slide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }

}