main {
    position: relative;
    margin-left: auto;
    margin-right: auto;

    width: 100%;

    background-color: var(--color-test);
}
        main[data-media="landscape__portrait--PC"] {
            margin-top: calc(90px * var(--scale_1200));

            min-height: calc(var(--100vh_start) - 434px * var(--scale_1200));
            max-width: 1200px;
        }
        main[data-media="portrait--mobile"] {
            margin-top: calc(80px * var(--scale_1200));

            min-height: calc(100vh - 941px * var(--scale_1200));
        }
    section {
        position: relative;
        margin-bottom: calc(40px * var(--scale_1200));
        scroll-margin-top: calc(70px * var(--scale_1200));
    }
        main .outer {

        }
        main .inner {

        }
                main .inner[data-media="landscape__portrait--PC"] {
                    width: 1200px;
                }
                main .inner[data-media="portrait--mobile"] {
                    width: 600px;
                }
            .chron_vertical-divide-line {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 50%;
                
                width: calc(4px * var(--scale_1200));

                transform: translateX(-50%) scale(0.01);
                transform-origin: top center;

                background-color: #beb1b1;

                animation: chron_vertical-divide-line 1500ms ease-in-out 0s 1 normal forwards paused;
            }
                    @keyframes chron_vertical-divide-line {
                        0% {
                            /* top: 0; */
                            transform: translateX(-50%) scale(0.01);
                        }
                        100% {
                            /* top: calc(37px * var(--scale_1200)); */
                            transform: translateX(-50%) scale(1);
                        }
                    }
            .h2-wrapper {
                height: 60px;
                width: 100%;
            }
                h2 {
                    position: relative;
                    display: inline-block;
                    z-index: 2;
                    top: 0;
                    left: 50%;
                    
                    height: 36px;
                    width: fit-content;
                    padding: 1px 12px 0 12px;

                    transform: translateX(-50%) scale(0.01);
                    transform-origin: top center;
                    
                    color: white;

                    border-radius: 20px;
                    background-color: #beb1b1;

                    transition: background-color 1s ease-in-out;
                    animation: h2 1s ease-in-out 0s 1 normal forwards paused;
                }
                        @keyframes h2 {
                            0% {transform: translateX(-50%) scale(0.01);}
                            100% {transform: translateX(-50%) scale(1);}
                        }
                        h2[data-media="pointer--fine"]:hover {
                            background-color: red;
                        }
            .chron-section {
                position: relative;
                width: 50%;

                background-color: var(--color-test);
            }
                    .chron-section.right {
                        margin-left: 50%;
                    }
                    .chron-section.left {
                        margin-right: 50%;
                    }
                    .chron-section .text-left {
                        text-align: left;
                        text-align-last: left;
                    }
                    .chron-section .text-red {
                        color: red;
                    }
                .chron-date {
                    margin: 0 auto;

                    transform: scale(0.01);

                    font-size: 20px;
                    line-height: 20px;
                    font-weight: bold;
                    color: #286fc7;

                    background-color: var(--color-test);

                    transition: color 0.5s ease-in-out;
                    animation: chron-date 1s ease-in-out 0s 1 normal forwards paused;
                }
                        @keyframes chron-date {
                            0% {transform: scale(0.01);}
                            100% {transform: scale(1);}
                        }
                        .chron-date[data-media="landscape__portrait--PC"] {
                            width: calc(100% - 40px);
                        }
                        .chron-date[data-media="portrait--mobile"] {
                            width: calc(100% - 30px);
                        }
                        .chron-section.right .chron-date {
                            text-align: left;
                            transform-origin: top left;
                        }
                        .chron-section.left .chron-date {
                            text-align: right;
                            transform-origin: top right;
                        }
                        .chron-section[data-media="pointer--fine"]:hover .chron-date {
                            color: red;
                        }
                .chrone-section_divide-line {
                    position: relative;
                    display: block;
                    
                    height: 2px;

                    margin: 4px auto 8px auto;
                    width: calc(100% - 20px);

                    transform: scale(0.01);

                    background-color: #beb1b1;

                    animation: chrone-section_divide-line 1s ease-in-out 0s 1 normal forwards paused;
                }
                        @keyframes chrone-section_divide-line {
                            0% {transform: scale(0.01);}
                            100% {transform: scale(1);}
                        }
                        .chron-section.right .chrone-section_divide-line {
                            transform-origin: center left;
                        }
                        .chron-section.left .chrone-section_divide-line {
                            transform-origin: center right;
                        }
                        .chrone-section_divide-line::before {
                            position: absolute;
                            z-index: 1;
                            top: 50%;
                            
                            height: 16px;
                            width: 16px;

                            content: "";

                            border-radius: 8px;
                            background-image: linear-gradient( 135deg, rgb(232,212,212) 0%, rgb(135,125,125) 100%);
                        }
                                .chron-section.right .chrone-section_divide-line::before {
                                    left: 0;

                                    transform: translate(calc(-100% - 2px), -50%);
                                }
                                .chron-section.left .chrone-section_divide-line::before {
                                    left: 100%;

                                    transform: translate(2px, -50%);
                                }
                        .chrone-section_divide-line::after {
                            position: absolute;
                            z-index: 2;
                            top: 50%;
                            
                            height: 16px;
                            width: 16px;

                            content: "";
                            opacity: 0;

                            border-radius: 8px;
                            background-image: linear-gradient( 135deg, rgb(255, 201, 201) 0%, rgb(255, 0, 0) 100%);

                            transition: all 0.5s ease-in-out;
                        }
                                .chron-section.right .chrone-section_divide-line::after {
                                    left: 0;

                                    transform: translate(calc(-100% - 2px), -50%);
                                }
                                .chron-section.left .chrone-section_divide-line::after {
                                    left: 100%;

                                    transform: translate(2px, -50%);
                                }
                                .chron-section[data-media="pointer--fine"]:hover .chrone-section_divide-line::after {
                                opacity: 1;
                            }
                .chron-text {
                    margin: 0 auto;

                    font-size: 19.5px;

                    transform: scale(0.01);

                    background-color: var(--color-test);

                    animation: chron-text 1s ease-in-out 0s 1 normal forwards paused;
                }
                        @keyframes chron-text {
                            0% {transform: scale(0.01);}
                            100% {transform: scale(1);}
                        }
                        .chron-text[data-media="landscape__portrait--PC"] {
                            width: calc(100% - 40px);
                            line-height: 24px;
                        }
                        .chron-text[data-media="portrait--mobile"] {
                            width: calc(100% - 30px);
                            line-height: 20px;
                        }
                        .chron-section.right .chron-text {
                            transform-origin: top left;
                            
                            text-align: justify;
                            text-align-last: left;
                        }
                        .chron-section.left .chron-text {
                            transform-origin: top right;
                            
                            text-align: justify;
                            text-align-last: right;
                        }
                    .chron-text ul[data-media="landscape__portrait--PC"] {
                        width: calc(100% - 70px);
                        padding-left: 70px;

                        list-style-type: none;
                        text-align: left;
                        text-align-last: left;
                    }
                    .chron-text ul[data-media="portrait--mobile"] {
                        width: calc(100% - 20px);
                        padding-left: 20px;

                        list-style-type: none;
                        text-align: left;
                        text-align-last: left;
                    }
                        .chron-text ul > li {
                            position: relative;
                        }
                                .chron-text ul > li[data-media="landscape__portrait--PC"]::before {
                                    position: absolute;
                                    top: 0;
                                    left: -20px;

                                    content: "•";
                                }
                                .chron-text ul > li[data-media="portrait--mobile"]::before {
                                    position: absolute;
                                    top: 0;
                                    left: -14px;

                                    content: "•";
                                }