@charset "UTF-8";

@media all and  (min-width: 769px) {
#contents .concept{
    margin-right: -8.342857%;
    margin-left: -8.342857%;
    position: relative;
    background: url(image/background.jpg) center top/cover no-repeat;
    height: 100vh;
}
#contents .concept h1{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 33px;
    font-weight: bold;
    position: absolute;
    top: calc(80px + 5%);
    left: 10%;
    z-index: 100;
}
@media all and  (max-height: 500px) {
    #contents .concept h1{
        font-size: 18px;
    }
}
#contents .concept h1>span{
    display: table;
    background: rgba(255,255,255,0.6);
    margin-left: 1rem;
    padding: 1rem 0;
}
#contents .concept .fade_img{
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}
#contents .concept .fade_img .fade1{
    z-index: 2;
    transform: translateX(-4vw);
    width: 50%;
}
#contents .concept .fade_img .fade2{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-60%)!important;
    width: 50%;
}
#contents .concept .fade_img .fade3{
    z-index: 2;
    width: 42%;
}
}

@media all and (min-width: 481px) and (max-width: 768px) {
    #contents .concept{
        margin-right: -8.342857%;
        margin-left: -8.342857%;
        position: relative;
        background: url(image/background.jpg) center top/cover no-repeat;
        height: 80vh;
    }
    #contents .concept h1{
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: 24px;
        font-weight: bold;
        position: absolute;
        top: calc(80px + 5%);
        left: 10%;
        z-index: 100;
    }
    @media all and  (max-height: 500px) {
        #contents .concept h1{
            font-size: 18px;
        }
    }
    #contents .concept h1>span{
        display: table;
        background: rgba(255,255,255,0.6);
        margin-left: 1rem;
        padding: 1rem 0;
    }
    #contents .concept .fade_img{
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: flex-end;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
    }
    #contents .concept .fade_img .fade1{
        z-index: 2;
        transform: translateX(-4vw);
        width: 50%;
    }
    #contents .concept .fade_img .fade2{
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-60%)!important;
        width: 50%;
    }
    #contents .concept .fade_img .fade3{
        z-index: 2;
        width: 42%;
    }
}

@media all and  (max-width: 480px) {
    #contents .concept{
        margin-right: -8.342857%;
        margin-left: -8.342857%;
        position: relative;
        background: url(image/background.jpg) center top/cover no-repeat;
        height: 80vh;
    }
    #contents .concept h1{
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: 20px;
        font-weight: bold;
        position: absolute;
        top: calc(65px + 5%);
        left: 10%;
        z-index: 100;
    }
    #contents .concept h1>span{
        display: table;
        background: rgba(255,255,255,0.6);
        margin-left: 1rem;
        padding: 1rem 0;
    }
    #contents .concept .fade_img{
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: flex-end;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
    }
    #contents .concept .fade_img .fade1{
        z-index: 2;
        transform: translateX(-4vw);
        width: 50%;
    }
    #contents .concept .fade_img .fade2{
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-60%)!important;
        width: 50%;
    }
    #contents .concept .fade_img .fade3{
        z-index: 2;
        width: 42%;
    }
}
/* js用のcss */
.opa0{
    opacity: 0;
}