@charset "UTF-8";
/* CSS Document */


/* ================================================================================================================================
   PETITCAM SIMULATOR
================================================================================================================================ */


/* ================================================================================================================================
   MODAL
================================================================================================================================ */

.modal {
    display: none;

    width: 100vw;
    height: 100vh;

    position: fixed;
    top: 0;
    left: 0;

    background: #000;

    opacity: 0;
    pointer-events: none;

    z-index: -10;

    transition: opacity .5s ease;
}

.modal.open {
    display: block !important;

    opacity: 1;
    pointer-events: auto;

    z-index: 1000;
}

/* -------------------------------------------------------------------------------------------------------------------------------
   CLOSE BUTTON
-------------------------------------------------------------------------------------------------------------------------------- */

.modal-close__wrap {
    position: absolute;
    z-index: 200;

    background: #fff;
    padding: 10px;
}

.modal-close {
    display: block;

    width: 28px;
    height: 28px;

    padding: 0;
    margin: 0;

    background: transparent;
    border-color: transparent;

    cursor: pointer;
}

.modal-close span {
    position: relative;

    display: block;

    width: 100%;
    height: 1px;

    background: #000;
}

.modal-close span:nth-child(1) {
    transform: rotate(45deg);
}

.modal-close span:nth-child(2) {
    transform: rotate(-45deg);
}


@media screen and (min-width: 1280px) {

    .modal-close__wrap {
        top: 0;
        left: 0;

        padding: 20px;
    }

}


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

    .modal-close__wrap {
        top: 0;
        right: 0;
    }

}


/******************画面した固定シミュレーションバナー**********************/
@media (max-width:767px) {
.sim-btn-wrapper {
    position: fixed;
    bottom: 10px;
    right: -130px;
    width: 150px;
    background: white;
    border-radius: 10px;
    z-index: 98;
    transition-duration: 0.8s;
}
}

@media (min-width:768px) {
.sim-btn-wrapper {
    position: fixed;
    bottom: 50px;
    right: -250px;
    width: 300px;
    background: white;
    border-radius: 10px;
    z-index: 98;
    transition-duration: 0.8s;
}
}
.sim-btn-inner {
    position: relative;
}
.sim-btn-wrapper.active {
    right: 0px;
}
.sim-btn-img img {
    border-radius: 0 0 10px 10px;
}
.sim-btn-text {
    padding: 10px 0 5px 20px;
    font-size: 10px;
}
#close, #open {
    padding: 10px;
    line-height: 20px;
    background: black;
    color: white;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: -14px;
    left: -14px;
    display: block;
    border-radius: 27%;
    cursor: pointer;
}
/* ================================================================================================================================
   OVERLAY
================================================================================================================================ */

.overlay {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: 100%;

    display: none;

    background: #000;

    z-index: 100;
}

.overlay.open {
    display: block;
}


/* ================================================================================================================================
   SIMULATION
================================================================================================================================ */

.simulation-content {
    width: 100%;
}

.simulation-wrap {
    background: #000;
}

.main {
    position: relative;
}


/* PC */

@media screen and (min-width: 1280px) {

    .simulation-content {
        width: 100vw;
    }

    .main {
        width: 100vw;
    }

}


/* SP */

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

    .simulation-content {
        padding: 0 20px;
        box-sizing: border-box;
    }

}


/* ================================================================================================================================
   TITLE / TEXT
================================================================================================================================ */

.simulation-title {
    margin-top: 0 !important;

    padding: 20px 10px 0;

    color: #fff;

    font-size: 1.3rem !important;
}

.simulation-text {
    padding: 10px 20px;

    color: #fff;

    line-height: 1.8;
}


/* ================================================================================================================================
   SIMULATION IMAGE
================================================================================================================================ */
#sim-base{margin: 0 0 0 auto;}
.pics-wrapper {
    position: relative;
}

.pics {
    position: relative;
}


/*
    BASE画像が画像エリアのサイズを決定します。
*/

.pics .space {
    display: block;
}


/*
    LEATHER / accent

    BASE画像の上に重ねます。
*/

.pics .pic {
    position: absolute;

    top: 0;
    left: 0;
}


/* PC */

@media screen and (min-width: 1280px) {
.pics .pic {
 left: auto;
    right: 0;
}
    .pics {
        text-align: right;
        background: #000;
    }

    .pics img {
        width: auto;
        max-width: 100%;
        height: 100vh;

        object-fit: cover;
    }

}


/* SP */

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

    .pics .pic,
    .pics .space {
        max-width: 110%;
    }

}


/* ================================================================================================================================
   IMAGE GRADIENT
================================================================================================================================ */


/* PC */

@media screen and (min-width: 1280px) {

    .pics::after {
        content: "";

        position: absolute;

        top: 0;
        left: 0;

        width: 60%;
        height: 100%;

        background-image:
            linear-gradient(
                -90deg,
                transparent 0 11%,
                #000 80%
            );

        pointer-events: none;
    }

}


/* SP */

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

    .pics::after {
        content: "";

        position: absolute;

        bottom: 0;
        left: 0;

        width: 100%;
        height: 50px;

        background-image:
            linear-gradient(
                180deg,
                transparent 0 11%,
                #000 80%
            );

        pointer-events: none;
    }

}


/* ================================================================================================================================
   VIEW SWITCH
   運転席ビュー / 荷室ビュー
================================================================================================================================ */

.simulation-view-switch {
    position: absolute;

    top: 30px;
    right: 30px;

    display: flex;

    padding: 4px;

    background: rgba(0, 0, 0, .55);

    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50px;

    z-index: 50;
}


/* -------------------------------------------------------------------------------------------------------------------------------
   VIEW BUTTON
-------------------------------------------------------------------------------------------------------------------------------- */

.simulation-view-button {
    display: flex;

    align-items: center;
    justify-content: center;

    padding: 10px 20px;

    background: transparent;

    border: none;
    border-radius: 50px;

    color: #fff;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease;
}

.simulation-view-button:hover {
    background: rgba(255, 255, 255, .15);
}

.simulation-view-button.active {
    background: #fff;
    color: #000;
}


/* SP */

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

    .simulation-view-switch {
        top: 10px;
        left: 50%;
        right: auto;

        transform: translateX(-50%);

        white-space: nowrap;
    }

    .simulation-view-button {
        padding: 8px 14px;

        font-size: 11px;
    }

}


/* ================================================================================================================================
   CURRENT SELECTION
================================================================================================================================ */

#choice {
    position: absolute;

    bottom: 20px;
    left: 20px;

    z-index: 20;
}

#choice span {
    color: #fff;
}

.choice-item {
    margin-top: 20px;

    letter-spacing: .08em;
}

.choice-item .text-small {
    font-size: .8em;
}

.choice-item #leather-color,
.choice-item #accent-color {
    font-weight: 700;
}

.choice-item.border-bottom {
    margin-bottom: 10px;

    border-bottom: .5px solid #fff;
}


/* PC */

@media screen and (min-width: 1280px) {

    #choice {
        bottom: 100px;
        left: 500px;
    }

    #choice span {
        font-size: 15px;
    }

    #choice #leather-color,
    #choice #accent-color {
        padding: 10px;

        font-size: 25px;
    }

}


/* LARGE PC */

@media screen and (min-width: 1980px) {

    #choice {
        bottom: 100px;
        left: 800px;
    }

}


/* SP */

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

    .choice-item {
        margin-top: 5px;
    }

    .choice-item .text-small {
        font-size: .6em;
    }

    #choice #leather-color,
    #choice #accent-color {
        font-size: 10px;
    }

}


/* ================================================================================================================================
   COLOR SELECT AREA
================================================================================================================================ */

.btns-block {
    padding: 10px;
}


/* PC */

@media screen and (min-width: 1280px) {

    .btns-block {
        position: absolute;

        top: 30px;

        width: 30vw;
        max-width: 400px;
        max-height: 88vh;

        padding: 10px;

        overflow-y: auto;
        overflow-x: hidden;

        border-right: .5px solid #fff;

        -ms-overflow-style: none;

        z-index: 30;
    }

}


/* LARGE PC */

@media screen and (min-width: 1980px) {

    .btns-block {
        width: 30vw;
        max-width: 650px;
    }

}


/* SP */

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

    .btns-block {
        max-height: 400px;

        overflow-y: auto;
        overflow-x: hidden;
    }

}


/* scrollbar hidden */

.btns-block::-webkit-scrollbar {
    display: none;
}


/* ================================================================================================================================
   COLOR SECTION
================================================================================================================================ */

.btns-block h5 {
    padding-left: 5px;

    color: #fff;
}

.btns-block span {
    padding-top: 5px;

    line-height: 1.2em;
}


/* ================================================================================================================================
   LOGO
================================================================================================================================ */

.logo-block {
    margin-top: 30px;
}

.logo-block img {
    max-width: 300px;
}

.logo-block p {
    color: #fff;
}


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

    .logo-block img {
        max-width: 200px;
    }

}


/* ================================================================================================================================
   COLOR BUTTON
================================================================================================================================ */

.btn-leather,
.btn-accent {
    cursor: pointer;
}

.btn-leather img,
.btn-accent img {
    display: block;

    width: 100%;

    border: 2px solid transparent;
    border-radius: 10px;

    box-sizing: border-box;

    transition:
        border-color .2s ease,
        opacity .2s ease;
}

.btn-leather span,
.btn-accent span {
    display: block;

    padding-top: 5px;

    color: #fff;

    font-size: 10px;
    line-height: 1.2em;
}


/* ACTIVE */

.btn-leather.active img,
.btn-accent.active img {
    border-color: #fff;
}


/* HOVER */

.btn-leather:hover img,
.btn-accent:hover img {
    opacity: .8;
}


/* ================================================================================================================================
   SP
================================================================================================================================ */

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

    .btns {
        background: #000;
    }

}



/* ================================================================================================================================
   SIMULATOR LOADING
================================================================================================================================ */

.simulation-loading{
    position:absolute;
    top:50%;
    left:50%;
    z-index:100;

    display:flex;
    align-items:center;
    justify-content:center;

    width:200px;
    height:200px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translate(-50%, -50%);

    transition:
        opacity .2s ease,
        visibility .2s ease;
}

.simulation-loading.is-loading{
    opacity:1;
    visibility:visible;
}

.simulation-loading img{
    display:block;
    width:100%;
    height:auto;
}


/* SP */

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

    .simulation-loading{
        width:50px;
        height:50px;
    }

}