.photoCanvasArea{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:solid red;
    display:flex;
    flex-wrap:wrap;
    opacity:0.1;
    visibility:hidden;
    pointer-events:none;
    overflow:hidden;
}

.photoCanvas{
    border:solid blue;
}

.wrapper{
   /*border:solid red;*/
}

.kv{
    height: 110lvh;   
}

.kv__title{
    position:absolute;
    bottom:5.375em;
    bottom:calc(10lvh + 5.375em);
    left:5em;
    transform-origin: left bottom;
    
}

.kv__title h1{
    font-family: "Oswald", sans-serif;
    font-weight:700;
    font-size:3em;
    line-height:1.48;
    margin-bottom: 0.8em;
}

.kv__title-h1{
    transition:opacity 1.5s cubic-bezier(.73,0,.28,1) 0s;
    opacity:0;
    line-height:0;
}

.kv__title-h1:nth-of-type(2){
    transition-delay:0.075s;
}

.kv__title-h1:nth-of-type(3){
    transition-delay: 0.15s;
}

.kv__title p{
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size:1em;
    font-weight:300;
    line-height:1.6;
    opacity:0;
    transition:opacity 1.25s cubic-bezier(.73,0,.28,1) 0.4s;
}

.kv__title.show .kv__title-h1,
.kv__title.show p{
     opacity:1;
}

.kv__title-area{
    max-width:1600px;
    margin:0 auto;
}


@media screen and (min-aspect-ratio:3){
    .kv__title{
     /*jsで実装*/
    }
}

@media screen and (max-width:768px){

    .kv{
        height: 100lvh;   
    }

    @supports (-webkit-touch-callout: none) {
        .kv {
          height: 100svh;
        }
    }

    .kv__title {
       font-size: min(3.2vw , 15.4px);
        left: 1.66em;
        bottom: calc(10svh + 0.4em + 38px);
        bottom: calc(100lvh - 100svh + 3.0em);
        

    }

    @supports (-webkit-touch-callout: none) {
        .kv__title {
            bottom: 6.5svh;
        }
    }

    .kv__title h1 {
        line-height: 1.47;
        margin-bottom: 0.6em;
    }

    .kv__title p {
       font-size : min(4.2vw , 11.73px);
    }

    .photoCanvasArea{
        height:100svh;
    }

}