@charset "UTF-8";

/* ===============================================
    共通CSSに対して上書き
================================================= */
main{
    margin-top: 50px;
}
@media print,screen and (min-width: 600px) {
    main{
        margin-top: 80px;
    }
}

.ly_footer {
    background: #E6E6E6;
}


/* ===============================================
    各ページのCSS
================================================= */
.ly_parallaxArea {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    background: #FFF;
}

@media screen and (max-width: 599px) {
    .ly_parallaxArea {
        width: 100%;
    }
}

/* ------------ 導入シーン ------------ */
.bl_introScene {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    height: 617px;
}

.bl_introScene_container{
    max-width: 375px;
    width: 375px;
    margin: 0 auto;
}

.bl_introScene_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bl_introScene_bg img {
    width: 100%;
    object-fit: cover;
}

.bl_introScene_title {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    will-change: opacity;
}

.el_introTitle {
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0.4px;
    color: #000;
}

.bl_introScene_kikiki {
    position: absolute;
    top: -117px;
    left: -145px;
    width: 665px;
    height: 536px;
    z-index: 1;
    will-change: transform;
    opacity: 0;
}

.bl_introScene_kikiki img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.bl_introScene_road {
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translateX(-50%);
    width: 345px;
    height: auto;
    opacity: 0;
    z-index: 0;
    will-change: opacity;
}

.bl_introScene_road img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.bl_introScene_car {
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translateX(-50%);
    width: 345px;
    z-index: 0;
    will-change: transform;
}

.bl_introScene_car img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.bl_introScene_balloon {
    position: absolute;
    top: 419px;
    left: 0;
    width: 449px;
    opacity: 0;
    z-index: 2;
    will-change: opacity, transform;
}

.bl_introScene_balloon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.bl_introScene_woman {
    position: absolute;
    top: 379px;
    left: 50%;
    transform: translateX(-50%);
    width: 345px;
    z-index: 0;
    will-change: transform;
}

.bl_introScene_woman img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.bl_introScene_crash {
    position: absolute;
    top: 310px;
    left: 50%;
    transform: translateX(-50%);
    width: 345px;
    opacity: 0;
    z-index: 0;
    will-change: transform, opacity;
}

.bl_introScene_crash > img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.bl_introScene_crash_cars {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bl_introScene_crash_cars img {
    position: absolute;
    width: 330px;
    height: auto;
    opacity: 0;
}

.js-crash-car-red {
    top: 45%;
    left: -350px;
    transform: translateY(-50%);
    opacity: 0;
}

.js-crash-car-blue {
    top: 45%;
    right: -350px;
    transform: translateY(-50%);
    opacity: 0;
}

.bl_introScene_worried {
    position: absolute;
    top: 385px;
    left: 50%;
    transform: translateX(-50%);
    width: 333px;
    opacity: 0;
    z-index: 3;
    will-change: opacity;
}

.bl_introScene_worried img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.3));
}

.bl_introScene_dashcam {
    position: absolute;
    top: 350px;
    left: 50%;
    transform: translateX(-50%);
    width: 345px;
    z-index: 2;
}

.bl_introScene_dashcam_balloon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    will-change: opacity, transform;
}

.bl_introScene_dashcam_balloon img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.bl_introScene_dashcam_operator {
    position: absolute;
    top: 218px;
    left: 50%;
    transform: translateX(-50%);
    width: 124px;
    height: auto;
    opacity: 0;
    will-change: opacity;
}

.bl_introScene_dashcam_operator img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.bl_introScene_dashcam_calling {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    width: 37%;
    height: auto;
    aspect-ratio: 161 / 39;
    opacity: 0;
    will-change: opacity;
}

.bl_introScene_dashcam_calling img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.bl_introScene_reassurance {
    position: absolute;
    top: 1045px;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    z-index: 4;
    will-change: transform, opacity;
}

.bl_introScene_reassurance img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

@media print, screen and (min-width: 600px) {
    .bl_introScene {
        width: 100%;
        max-width: 600px;
        aspect-ratio: 375 / 667;
        min-height: 600px;
        height: 1100px;
    }

    .bl_introScene_title {
        top: 112px;
    }

    .el_introTitle {
        font-size: 24px;
    }

    .bl_introScene_kikiki {
        width: 1564px;
        left: 55%;
        transform: translateX(-50%);
        top: 0px;
    }

    .bl_introScene_road {
        width: 552px;
        top: 272px;
    }

    .bl_introScene_car {
        width: 552px;
        top: 272px;
    }

    .bl_introScene_balloon {
        width: 670px;
        top: 670px;
    }

    .bl_introScene_woman {
        width: 552px;
        top: 598.4px;
    }

    .bl_introScene_crash {
        width: 552px;
        top: 480px;
    }

    .bl_introScene_crash > img {
        width: 100%;
    }

    .bl_introScene_crash_cars img {
        width: 100%;
    }

    .bl_introScene_worried {
        width: 532.8px;
        top: 584px;
    }

    .bl_introScene_dashcam_balloon img {
        width: 87%;
        height: auto;
        margin: 0;
    }

    .bl_introScene_dashcam {
        top: 500px;
        height: auto;
    }

    .bl_introScene_dashcam_balloon {
        top: 300px;
        left: -40px;
        width: 500px;
    }
    
    .bl_introScene_dashcam_operator {
        top: 283px;
        left: 45%;
    }

    .bl_introScene_dashcam_calling {
        top: 365px;
        left: 45%;
    }
    
    .bl_introScene_reassurance {
        top: 1460px;
    }
}


/* ------------ オペレーターシーン ------------ */
.bl_operatorScene {
    position: relative;
    width: 100%;
    height: 690px;
    background: #FFF;
    overflow: hidden;
}

.bl_operatorScene_container {
    position: relative;
    width: 345px;
    height: 690px;
    margin: 0 auto;
}

.bl_operatorScene_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 1;
    border: 4px solid #000;
    border-bottom: none;
}

.bl_operatorScene_bg img {
    width: 100%;
    height: auto;
    display: block;
}

.bl_operatorScene_bg_tall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    opacity: 0;
    border: 4px solid #000;
    border-bottom: none;
}

.bl_operatorScene_bg_tall img {
    width: 100%;
    height: auto;
    display: block;
}

.bl_operatorScene_bg_ambulance {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    opacity: 0;
    border: 4px solid #000;
    border-bottom: none;
}

.bl_operatorScene_bg_ambulance img {
    width: 100%;
    height: auto;
    display: block;
}

.bl_operatorScene_operator {
    position: absolute;
    bottom: 240px;
    width: 100%;
    z-index: 2;
    opacity: 1;
    will-change: opacity, transform;
    border: 4px solid #000;
    border-top: none;
}

.bl_operatorScene_operator img {
    width: 100%;
    height: auto;
    display: block;
}

.bl_operatorScene_balloon {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    z-index: 3;
    opacity: 1;
    will-change: opacity, transform;
}

.bl_operatorScene_balloon img {
    width: 92%;
    height: auto;
    display: block;
    opacity: 1 !important;
    margin: 0 auto;
}

.bl_operatorScene_wrecker {
    position: absolute;
    top: 280px;
    left: 49%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    z-index: 4;
    opacity: 0;
    will-change: opacity, transform;
}

.bl_operatorScene_wrecker img {
    width: 85%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.bl_operatorScene_ambulance_balloon {
    position: absolute;
    top: 365px;
    left: 53%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    z-index: 5;
    opacity: 0;
    will-change: opacity, transform;
}

.bl_operatorScene_ambulance_balloon img {
    width: 57%;
    height: auto;
    display: block;
}

.bl_operatorScene_ambulance {
    position: absolute;
    top: 460px;
    left: -100%;
    transform: translateY(-50%);
    width: 58.7%;
    height: auto;
    z-index: 6;
    opacity: 0;
    will-change: transform, opacity;
}

.bl_operatorScene_ambulance img {
    width: 127%;
    height: auto;
    display: block;
}

.bl_operatorScene_family_balloon {
    position: absolute;
    top: 62.5%;
    top: 430px;
    left: 68%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 0;
    will-change: opacity, transform;
}

.bl_operatorScene_family_balloon img {
    width: 75%;
    height: auto;
    display: block;
}

.bl_operatorScene_police_balloon {
    position: absolute;
    top: 500px;
    left: 73%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 0;
    will-change: opacity, transform;
}

.bl_operatorScene_police_balloon img {
    width: 70%;
    height: auto;
    display: block;
}

.bl_operatorScene_police {
    position: absolute;
    top: 400px;
    right: -100%;
    transform: translateY(-50%);
    width: 58.7%;
    height: auto;
    z-index: 8;
    opacity: 0;
    will-change: transform, opacity;
}

.bl_operatorScene_police img {
    width: 127%;
    height: auto;
    display: block;
}

.bl_operatorScene_final_message {
    position: absolute;
    top: 307px;
    left: 50%;
    transform: translateX(-50%);
    width: 345px;
    height: auto;
    z-index: 10;
    opacity: 0;
    will-change: opacity;
}

.bl_operatorScene_final_message img {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.bl_operatorScene_cta {
    position: absolute;
    top: 89%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 40px 15px;
    z-index: 11;
    opacity: 0;
    will-change: opacity;
}

@media print, screen and (min-width: 600px) {
    .bl_operatorScene {
        /* min-height: 135vh; */
        height: 1180px;
    }

    .bl_operatorScene_container {
        width: 100%;
        aspect-ratio: auto;
        position: static;
        /* height: 1250px; */
    }

    .bl_operatorScene_bg,
    .bl_operatorScene_bg_tall,
    .bl_operatorScene_bg_ambulance {
        width: 552px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bl_operatorScene_bg_ambulance {
        top: -175px;
    }

    .bl_operatorScene_operator {
        bottom: auto;
        top: 315px;
        left: 50%;
        transform: translateX(-50%);
        width: 552px;
    }

    .bl_operatorScene_balloon {
        top: 152px;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(90%, 540px);
    }

    .bl_operatorScene_wrecker {
        top: 390px;
        left: 49%;
        transform: translate(-50%, -50%);
        width: min(70%, 500px);
    }
    
    .bl_operatorScene_wrecker img {
        width: 100%;
    }
    
    .bl_operatorScene_ambulance_balloon {
        top: 570px;
        left: 48%;
        transform: translate(-50%, -50%);
        width: min(75%, 500px);
    }
    
    .bl_operatorScene_ambulance_balloon img {
        width: 67%;
    }
    
    .bl_operatorScene_ambulance {
        top: 625px;
        left: -100%;
        transform: translateY(-50%);
        width: min(58.7%, 220px);
    }

    .bl_operatorScene_family_balloon {
        top: 610px;
        left: 72%;
        transform: translate(-50%, -50%);
        width: min(65%, 500px);
    }
    
    .bl_operatorScene_family_balloon img {
        width: 82%;
    }
    
    .bl_operatorScene_police_balloon {
        top: 680px;
        left: 75%;
        transform: translate(-50%, -50%);
        width: min(65%, 500px);
    }
    
    .bl_operatorScene_police_balloon img {
        width: 74%;
    }
    
    .bl_operatorScene_police {
        top: 580px;
        right: -100%;
        transform: translateY(-50%);
        width: min(58.7%, 220px);
    }
    .bl_operatorScene_final_message {
        top: 545px;
        width: 552px;
    }

    .bl_operatorScene_cta {
        top: auto;
    }
    .bl_operatorScene_cta{
        top: 1040px;
    }
}