@charset "UTF-8";

:root {  /* 初期値 */
    --width_1_Large: 20vw;
    --height_1_Large: 20vh;

    --width_2_Large: 20vw;
    --height_2_Large: 70vh;

    --width_3_Large: 94vw;
    --height_3_Large: 70vh;

    --width_1_ExtraLarge: 15vw;
    --height_1_ExtraLarge: 20vh;

    --width_2_ExtraLarge: 15vw;
    --height_2_ExtraLarge: 70vh;

    --width_3_ExtraLarge: 94vw;
    --height_3_ExtraLarge: 70vh;
}



/* --------------------
Card Container
-------------------- */

#cardContainer h4.card-title {
    margin-bottom: 0;
}

/* .card-body {
    display: flex;
} */



/* --------------------
Card Block
-------------------- */

#detailTopContainer {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    align-items: flex-end;
}

#detailSummaryContainer {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    display: none;
    font-size: 1.0rem;
    text-align: center;
}

#detailTabContainer {
    /* opacity: 0.0; */
    display: none;
    padding: 0 1rem 1rem 1rem;
}

#detailTab_ComsDesc, #detailTab_StocksDesc {
    display: none;
}

#chartDetailArea {
    background-color: #FFF;
    border: solid 2px #0B394B;
}



/* --------------------
Card Element
-------------------- */

#summaryBtn {
    width: 100%;
}

#detailBtn {
    width: 100%;
}

.detailSummary {
    width: 100%;
    margin-bottom: 1em;
}

.nav-link {
    cursor: pointer;
}

.nav-link.active {
    cursor: default;
}

#importtotal,
#exporttotal {
    font-size: 0.6rem;
    text-align: center;
}

#importedPie {
    margin: auto;
}



/* --------------------
    keyframes
-------------------- */

/* 1.hide to 1.hide */

.card1to1 {
    animation-name: ca1to1;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    @keyframes ca1to1 {
        0% {
            width: var(--width_1_Large);
            height: var(--height_1_Large);
        }
    
        100% {
            width: var(--width_1_Large);
            height: var(--height_1_Large);
        }
    }
}

@media (min-width: 1200px) {
    @keyframes ca1to1 {
        0% {
            width: var(--width_1_ExtraLarge);
            height: var(--height_1_ExtraLarge);
        }
    
        100% {
            width: var(--width_1_ExtraLarge);
            height: var(--height_1_ExtraLarge);
        }
    }
}



/* 1.hide to 2.summary */

.card1to2 {
    animation-name: ca1to2;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    @keyframes ca1to2 {
        0% {
            width: var(--width_1_Large);
            height: var(--height_1_Large);
        }
    
        100% {
            width: var(--width_2_Large);
            height: var(--height_2_Large);
        }
    }
}

@media (min-width: 1200px) {
    @keyframes ca1to2 {
        0% {
            width: var(--width_1_ExtraLarge);
            height: var(--height_1_ExtraLarge);
        }
    
        100% {
            width: var(--width_2_ExtraLarge);
            height: var(--height_2_ExtraLarge);
        }
    }
}

/* @keyframes ca1to2 {
    0% {
        width: 10vw;
        height: 15vh;
    }

    100% {
        height: 70vh;
    }
} */



/* 2.summary to 1.hide */

.card2to1 {
    animation-name: ca2to1;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    @keyframes ca2to1 {
        0% {
            width: var(--width_2_Large);
            height: var(--height_2_Large);
        }
    
        100% {
            width: var(--width_1_Large);
            height: var(--height_1_Large);
        }
    }
}

@media (min-width: 1200px) {
    @keyframes ca2to1 {
        0% {
            width: var(--width_2_ExtraLarge);
            height: var(--height_2_ExtraLarge);
        }
    
        100% {
            width: var(--width_1_ExtraLarge);
            height: var(--height_1_ExtraLarge);
        }
    }
}

/* @keyframes ca2to1 {
    0% {
        height: 70vh;
    }

    100% {
        width: 10vw;
        height: 15vh;
    }
} */



/* 2.summary to 3.detail */

.card2to3 {
    animation-name: ca2to3;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    @keyframes ca2to3 {
        0% {
            width: var(--width_2_Large);
            height: var(--height_2_Large);
        }
    
        100% {
            width: var(--width_3_Large);
            height: var(--height_3_Large);
        }
    }
}

@media (min-width: 1200px) {
    @keyframes ca2to3 {
        0% {
            width: var(--width_2_ExtraLarge);
            height: var(--height_2_ExtraLarge);
        }
    
        100% {
            width: var(--width_3_ExtraLarge);
            height: var(--height_3_ExtraLarge);
        }
    }
}

/* @keyframes ca2to3 {
    0% {
        width: 10vw;
        height: 70vh;
    }

    100% {
        width: 93vw;
        height: 70vh;
    }
} */



/* 3.detail to 1.hide */

.card3to1 {
    animation-name: ca3to1;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    @keyframes ca3to1 {
        0% {
            width: var(--width_3_Large);
            height: var(--height_3_Large3);
        }
    
        100% {
            width: var(--width_1_Large);
            height: var(--height_1_Large);
        }
    }
}

@media (min-width: 1200px) {
    @keyframes ca3to1 {
        0% {
            width: var(--width_3_ExtraLarge);
            height: var(--height_3_ExtraLarge);
        }
    
        100% {
            width: var(--width_1_ExtraLarge);
            height: var(--height_1_ExtraLarge);
        }
    }
}

/* @keyframes ca3to1 {
    0% {
        width: 93vw;
        height: 70vh;
    }

    100% {
        width: 10vw;
        height: 15vh;
    }
} */