@charset "UTF-8";

.order-form {
    grid-auto-columns: 1fr;

    border: solid 2px hsl(230, 33%, 50%);
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
    gap: 15px;

    background-color: hsl(230, 33%, 82%);
    height:max-content;

    input, select, textarea, button{
        background-color: hsl(230, 50%, 97%);
        text-indent: 3px;
        border: solid 1px hsl(230, 15%, 55%);
        border-radius: 3px;
        font-size: max( 14pt, 1.5vmin );

        min-width: 130px;
        height: 6ch;
    }

    select{
        white-space: pre-line;
    }

    button{
        border-width: 2px;
        font-size: max( 24pt, 6vmin );
    }

    header{
        font-size: max( 14pt, 3vmin );
    }

    main {
        grid-template-columns: minmax( 40px, 150px ) 1fr max-content;
        /* grid-auto-rows: max-content; */
    
        column-gap: 3px;
        row-gap: 10px;

        > * {
            padding: 4px 0;
        }
        
        label{
            white-space: pre-line;
            justify-content: right;
            text-align: right;
            align-self: center;
            font-size: max( 14pt, 1.5vmin );
        }

        > label:has([name="send-simulation"]){
            /* background: hsl(128, 25%, 82%); */
            grid-template-columns: 40px minmax( 40px, 450px );
            gap: 5px;
            justify-content: center;
            text-align: left;
            line-height: 4ch;
            align-items: center;
            grid-column: 1 / span 3;

            input{
                max-width: 35px;
                min-width: 35px;
            }
        }

        > .simulation{
            margin: -10px 0 0 0;
            padding: 10px;
            grid-column: 1 / span 3;
            grid-template-columns: max-content max-content 1fr;
            border-top: none;

            :nth-last-child(2){
                grid-column: 1 / span 2;
            }

            :nth-last-child(1){
                grid-column: 3 / span 1;
            }

            > *{
                width: 100%;
                height: 6ch;
                margin: -0.5px;

                text-justify: center;
                text-align: center;
                align-items: center;
                justify-content: center;
                padding: 3px;
            
                border: solid 1px hsl(128, 33%, 60%);
            }
        }

        > label:has([type="checkbox"][name="send-simulation"]:checked){
            border: solid 2px hsl(128, 33%, 70%);
            background: linear-gradient(0.4turn, hsl(128, 25%, 90%), hsl(128, 25%, 82%));
        }

        > label:has([type="checkbox"][name="send-simulation"]:not(:checked)) + .simulation {
            display: none !important;
        }

        textarea{
            resize: none;
            height: 6em;
            text-align: left;
        }

        input{
            text-align: left;
        }

        select[name="construction"]{
            display: none;
        }

        .mandatory::after{
            content:"必須";
            font-size:large;
            color: hsl(10, 31%, 5%);
            border: solid hsl(10, 60%, 70%) 1px;
            background-color: hsl(10, 40%, 90%);
            border-radius: 5px;
            padding: 0 2px;
            justify-content: center;
            align-content: center;
        }

        .validate-ng {
            border: solid hsl(10, 80%, 70%) 2px;
            color: hsl(10, 59%, 10%);
            border-radius: 3px;
        }
    }

    footer{

        gap: 10px;

        button{
            font-size: max( 14pt, 1.5vmin );
            padding: 10px 30px;
            width: 100%;
        }
    }

    :disabled {
        opacity: 0.3;
    }

    .confirm :disabled{
        opacity: 0.7;
        color: hsl(135, 31%, 1%);
    }
}

.question-simulation{
    border: solid 2px hsl(128, 33%, 70%);
    background: linear-gradient(0.4turn, hsl(128, 25%, 90%), hsl(128, 25%, 82%));
    
    > main{
        > input[type="radio"]{
            display: none;
        }

        grid-template-columns: 1fr;
        gap: 0;
        height: max-content;

        > #q-sim-page-tabs{
            margin: 0;
            padding: 0 5px 0 5px;

            grid-template-columns: repeat(6, 1fr);
            gap: 1vmin;
            
            > label{
                cursor: pointer;
                background-color: hsl(128, 25%, 98%);
                border:solid 2px transparent;
                border-bottom: none;
                justify-content: center;
                text-align: center;
                padding: 0.5vmin;
                padding-right: 0;
                display: flex;
                grid-template-columns: 1fr max-content;
                flex-direction: column;

                border-top-left-radius: 1vmin;
                border-top-right-radius: 1vmin;
                transition: all 600ms cubic-bezier(0.9, 0.1, 0.1, 0.9);

                grid-template-columns: 1fr 0;

                &::before{
                    content: "済";
                    opacity: 0;
                    margin-bottom: -12%;
                    margin-right: -66%;
                    width: 25px;
                    height: 25px;
                    font-size: 18px;
                    justify-content: center;
                    align-content: center;
                    align-self: center;
                    text-align: center;
                    color: hsl(13, 63%, 50%);
                    border:solid 1px hsl(13, 63%, 50%);
                    border-radius: 50%;
                    transform-origin: center;
                    transform: rotate(0.015turn);
                }
            }

        }

        > #q-sim-pages{
            margin: 0;
            padding-top: 0;
            grid-template-columns: 1fr;
            background-color: hsl(128, 25%, 96%);
            border:solid 1px hsl(128, 12%, 70%);
            border-top: solid 1px hsl(128, 12%, 80%);
            
            > div{
                grid-template-columns: 1fr;
                
                grid-column: 1 / span 1;
                grid-row: 1 / span 1;

                transition: all 600ms cubic-bezier(0.9, 0.1, 0.1, 0.9);
                opacity: 0;
                transform: scaleY(0);
                pointer-events: none;
                transform-origin: bottom;

                > header{
                    grid-template-columns: 1fr;
                    justify-content: stretch;

                    :nth-child(1){
                        justify-content: left;
                        justify-items: left;
                        text-align: left;
                        padding: 1vmin;
                        border-radius: 1;
                        white-space: pre-line;
                    }
                }

                > main{
                    input[type="radio"]{
                        display: none;
                    }

                    display: flex;
                    justify-content: space-evenly;
                    justify-items: center;
                    flex-wrap: wrap;
                    padding-left: 20px;
                    padding-right: 20px;

                    > label{
                        cursor: pointer;
                        background-color: hsl(128, 25%, 100%);
                        box-shadow: hsla(240, 3%, 12%, 0.05) 2px 2px 2px;
                        border-radius: 0.5vmin;
                        padding: 1vmin;
                        margin: 1vmin;
                        white-space: pre-line;
                        word-break: break-all;
                        border: solid 4px transparent;
                        text-align: center;
                    }

                    input:disabled + label{
                        opacity: 0.5;
                        pointer-events: none;
                        cursor: default;
                        background-color: hsl(128, 12%, 30%);
                    }

                    input:nth-of-type(1):checked ~ label:nth-of-type(1),
                    input:nth-of-type(2):checked ~ label:nth-of-type(2),
                    input:nth-of-type(3):checked ~ label:nth-of-type(3),
                    input:nth-of-type(4):checked ~ label:nth-of-type(4),
                    input:nth-of-type(5):checked ~ label:nth-of-type(5),
                    input:nth-of-type(6):checked ~ label:nth-of-type(6){
                        border: solid 4px hsl(128, 35%, 70%);
                        background-color: hsl(128, 25%, 92%);
                    }
                }

                > footer{
                    display: none;

                    grid-template-columns: max-content 1fr;

                    @media (max-width: 500px){
                        grid-template-columns: 1fr 1fr;
                    }



                    justify-content: space-around;
                    padding: 1vmin;

                    > label{
                        padding: 1vmin;
                        width: 100%;

                        border: solid 2px hsl(230, 15%, 75%);
                        box-shadow: hsla(128, 3%, 12%, 0.05) 2px 2px 2px;
                        border-radius: 0.5vmin;
                        gap: 5vmin;

                        text-align: center;
                        justify-content: center;

                        &.prev{
                            cursor: pointer;
                            grid-row: 1;
                            grid-column: 1 / span 1;
                            background: hsl(30, 51%, 95%);   
                        }

                        &.next{
                            grid-row: 1;
                            cursor: pointer;
                            grid-column: 2 / span 1;
                            background: hsl(230, 50%, 95%);
                        }

                        &.result{
                            background: transparent;
                            box-shadow: none;
                            border: none;
                        }
                    }
                }
            }
        }

        > input:nth-of-type(1):checked ~ #q-sim-page-tabs > label:nth-of-type(1),
        > input:nth-of-type(2):checked ~ #q-sim-page-tabs > label:nth-of-type(2),
        > input:nth-of-type(3):checked ~ #q-sim-page-tabs > label:nth-of-type(3),
        > input:nth-of-type(4):checked ~ #q-sim-page-tabs > label:nth-of-type(4),
        > input:nth-of-type(5):checked ~ #q-sim-page-tabs > label:nth-of-type(5),
        > input:nth-of-type(6):checked ~ #q-sim-page-tabs > label:nth-of-type(6){
            background-color: hsl(128, 25%, 100%);
            box-shadow: inset 0 0 20px 1px hsl(128, 25%, 50%);
            border:solid 2px hsl(128, 12%, 99%);
            border-bottom: none;
            cursor: default;
        }

        &:has( #q-sim-pages > :nth-child(1) input[type="radio"]:checked) > #q-sim-page-tabs > label:nth-child(1)::before,
        &:has( #q-sim-pages > :nth-child(2) input[type="radio"]:checked) > #q-sim-page-tabs > label:nth-child(2)::before,
        &:has( #q-sim-pages > :nth-child(3) input[type="radio"]:checked) > #q-sim-page-tabs > label:nth-child(3)::before,
        &:has( #q-sim-pages > :nth-child(4) input[type="radio"]:checked) > #q-sim-page-tabs > label:nth-child(4)::before,
        &:has( #q-sim-pages > :nth-child(5) input[type="radio"]:checked) > #q-sim-page-tabs > label:nth-child(5)::before,
        &:has( #q-sim-pages > :nth-child(6) input[type="radio"]:checked) > #q-sim-page-tabs > label:nth-child(6)::before {
            opacity: 1;
        }


        > input:nth-of-type(1):checked ~ #q-sim-pages > div:nth-of-type(1),
        > input:nth-of-type(2):checked ~ #q-sim-pages > div:nth-of-type(2),
        > input:nth-of-type(3):checked ~ #q-sim-pages > div:nth-of-type(3),
        > input:nth-of-type(4):checked ~ #q-sim-pages > div:nth-of-type(4),
        > input:nth-of-type(5):checked ~ #q-sim-pages > div:nth-of-type(5),
        > input:nth-of-type(6):checked ~ #q-sim-pages > div:nth-of-type(6){
            opacity: 1;
            transform: scaleY(1);
            pointer-events: all;
            transform-origin: top;
        }


    }
    
    > footer{
        > button{
            cursor: default;
            pointer-events: none;
            opacity: 0.5;
            background-color: hsl(128, 12%, 30%);
        }

        #q-sim-result-label{
            color: hsl(13, 63%, 50%);
        }

        .weak {
            font-size: medium;
            white-space: pre-line;
        }
    }

    > main:has( #q-sim-pages div:nth-child(1) [type="radio"]:checked ):has( #q-sim-pages div:nth-child(2) [type="radio"]:checked ):has( #q-sim-pages div:nth-child(3) [type="radio"]:checked ):has( #q-sim-pages div:nth-child(4) [type="radio"]:checked ):has( #q-sim-pages div:nth-child(5) [type="radio"]:checked):has( #q-sim-pages div:nth-child(6) [type="radio"]:checked )
         ~ footer {
        button{
            cursor: pointer;
            pointer-events: all;
            opacity: 1;
            border-color: hsl(13, 63%, 50%);
            color: hsl(13, 63%, 50%);
            background-color: hsl(13, 33%, 97%);
        }
    }
}

html{
    background-color: hsl(230, 33%, 21%);
    scroll-behavior: smooth;

    body{
        padding: 0 10px 10px 10px;
        margin: 0;
        height:max-content;
    
        * {
            display: grid;
            font-family: "Noto Sans JP", sans-serif;
            font-optical-sizing: auto;
            font-weight: normal;
            font-style: normal;
            font-size: max( 14pt, 3vmin );
        
            text-align: center;
            align-content: stretch;
            justify-content: center;
    
            box-sizing: border-box;
            padding: 0;
            margin: 0;
    
            color: hsl(230, 33%, 5%);
        }
    
        .no-wrap{
            display: flex;
            flex-wrap: wrap;
            justify-content: left;
        }
    
        label, div{
            user-select: none;
        }
        
        ruby{
            ruby-position: over;
        }
    
        a{
            color:darkblue;
        }

        > #site-title{
            background-color: hsl(230, 33%, 21%);
            background: linear-gradient(hsl(230, 33%, 21%) 70%, hsl(230, 33%, 28%));
    
            color: hsl(230, 33%, 90%);
            align-items: center;
            align-content: center;
            width: 100%;
            padding: 5px;
            justify-content: left;
            text-shadow: hsla(0, 0%, 100%, 0.5) 1px 1px 2px;
            font-size: max( 18pt, 4vmin );
            line-height: max( 32pt, 5vmin );
            z-index: 10;
        }
    
        .container {
            grid-template-columns: 1fr;
    
            background-color: hsl(235, 50%, 98%);
            padding: 7vmin 5vmin;
            z-index: 10;
    
            justify-content: start;
            justify-items: start;
            align-content: start;
            align-items: start;
            min-width: 100%;
            max-width: 100%;
            position: relative;
    
            .container-label {
                justify-self: left;
                justify-items: left;
                justify-content: left;
                align-items: end;
                text-align: left;
                text-shadow: hsla(240, 3%, 12%, 0.322) 1px 1px 2px;
                box-shadow: hsla(240, 3%, 12%, 0.05) -2px 2px 2px;
                width: 100%;
    
                font-size: max( 18pt, 5vmin );
                border-left: 4px solid #252525;
    
                padding: .4em .5em;
                margin: 0 0 30px 0;
    
                display: inline-flex;
                flex-wrap: wrap;

                white-space: pre-line;
                word-break: break-all;
    
                > .strong{
                    display: inline;
                    font-size: max( 24pt, 8vmin );
                    white-space: pre-line;
                    word-break: break-all;
                }
            }

            div{
                justify-content: start;
                justify-items: start;
                align-content: start;
                align-items: start;
            }

            p {
                justify-self: left;
                text-align: left;
                text-shadow: hsla(240, 3%, 12%, 0.322) 1px 1px 2px;
                text-indent: 1em;
                font-size: max( 14pt, 3vmin );
                display: inline-flex;
                flex-wrap: wrap;
                white-space: pre-line;
                word-break: break-all;
                
                line-height: 1.7em;
            }

            > section > img{
                object-fit: contain;
                height: 30vmin;
                justify-self: center;
                margin: 15px 0;

            }
    
            .step{
                grid-template-columns: 1fr;
                width: calc( 100% - 40px );
                margin: 50px 20px 50px 20px;
                padding: 20px;
                
                background-color: hsl(235, 50%, 90%);
                box-shadow: 2px 5px 5px 1px hsla(220, 20%, 10%, 12%);

                .step-title{
                    width: max-content;
                    margin-top: -50px;
                    margin-left: -40px;

                    grid-auto-flow: column;
                    border-radius: 1em;
                    background-color:#a3d0dd;
                    padding: 5px 15px;
                    font-weight: bolder;
                    white-space: nowrap;
                    color: #3f2e2e;
                    text-align: center;
                    font-size: max( 14pt, 3vmin );
        
                    .strong{
                        right: 0;
        
                        font-weight: bold;
                        margin: 0 5px;
                        color: hsl(19, 62%, 53%);
                        border-radius: 1em;
                    }
                }
            }


            .merit{
                grid-template-columns: 1fr;
                width: calc( 100% - 40px );
                margin: 50px 20px 50px 20px;
                padding: 20px;
                
                background-color: hsl(60, 50%, 90%);

                &.confidence{
                    background-color: hsl(200, 49%, 90%);
                }
                box-shadow: 2px 5px 5px 1px hsla(220, 20%, 10%, 12%);

                .merit-title{
                    margin-left: -20px;
                    margin-top: -10px;
                    margin-bottom: 30px;

                    justify-content: start;
        
                    grid-auto-flow: column;
                    padding: 5px 15px;
                    font-weight: bolder;
                    color: #3f2e2e;
                    font-size: max( 14pt, 3vmin );
                    font-size: max( 18pt, 5vmin );
    
                    align-items: end;
    
                    text-decoration-style: solid;
                    text-decoration-color: hsla(329, 65%, 50%, 0.8);
                    text-decoration-line: underline;
                    text-decoration-thickness: max(7pt, 1.5vmin);
                    white-space: pre-wrap;


                    &.confidence{
                        color: hsl(226, 16%, 21%);
                        text-decoration-color: hsla(237, 54%, 49%, 0.8);
                    }
                }
            }
            
            
            @media (max-width: 500px){
                padding: 30px 10px;
    
                .step-title,
                .merit-title{
                    margin-left: -20px !important;
                    margin-top: -50px;
                }
    
                .step,
                .merit {
                    min-width: 100%;
                    max-width: 100%;
                    margin-left: 0;
                    /* padding: 20px; */
                }
            }
    
        }
    
        /* .thin{
            min-height: 100px;
            max-height: 100px;
        } */
    
        > #side-menu-switch{
            display: none;
        }
    
        > #side-menu-label{
            position: absolute;
            cursor: pointer;
            align-items: center;
            z-index: 120;
    
            top: 0px;
            right: 20px;
    
            width: 48px;
            height: max( 36pt, 5vmin );
            transform: rotate(0.25turn);
    
            > div {
                position: absolute;
    
                height: 100%;
                border: solid 1px hsl(230, 33%, 90%);
                box-shadow: hsla(0, 0%, 100%, 0.5) 1px 1px 2px;
    
                &:nth-child(1),
                &:nth-child(2){
                    left: 10px;
                    transition: all 600ms cubic-bezier(0.9, 0.1, 0.1, 0.9);
                }
    
                &:nth-child(3){
                    left: 24px;
                    transition: all 600ms cubic-bezier(0.9, 0.1, 0.1, 0.9);
                }
    
                &:nth-child(4){
                    left: 24px;
                    transition: all 600ms cubic-bezier(0.9, 0.1, 0.1, 0.9);
                }
    
                &:nth-child(5),
                &:nth-child(6){
                    left: 38px;
                    transition: all 600ms cubic-bezier(0.9, 0.1, 0.1, 0.9);
                }
            }
        }
    
        > #side-menu{
            position: absolute;
    
            z-index: 100;
    
            max-width: 300px;
            min-width: 300px;
    
            
            height: max-content;
            
            top: 0;
            right: 0;
            opacity: 0;
            pointer-events: none;
            
            background: linear-gradient(hsl(240, 10%, 95%), hsl(240, 10%, 89%));
            transition: all 800ms cubic-bezier(0.9, 0.1, 0.1, 0.9);
            padding: 40px 40px 20px 20px;
            gap: 5px;
            border: solid 1px #BAC0D5;
    
            box-shadow: 0 0 20px 2px hsla(0, 0%, 30%, 0.33);
    
            > label{
                color: hsl(230, 15%, 35%);
                font-size: larger;
                text-shadow: hsla(230, 15%, 35%, 0.322) 1px 1px 2px;
    
            }
            
            > a{
                width: 100%;
                background: linear-gradient(hsl(240, 30%, 99%), hsl(240, 30%, 97%));
                white-space: nowrap;
                
                grid-auto-flow: column;
                grid-auto-columns: 1fr;
                display: inline-block;
                
                color: hsl(230, 15%, 35%);
                border: solid 1px hsl(227, 15%, 85%);
                
                font-size: large;
                text-shadow: hsla(230, 15%, 35%, 0.322) 1px 1px 2px;
                box-shadow: inset 0 0 30px 1px hsla(220, 20%, 10%, 7%);
                
                padding: 20px 0;
                white-space: pre-line;
                word-break: break-all;
            }
        }
    
        > #side-menu-switch:checked{
            &~#side-menu-label {
                div{
                    &:nth-child(1),
                    &:nth-child(2){
                        opacity: 0;
                    }
    
                    &:nth-child(3){
                        border-color: hsl(12, 70%, 35%);
                        box-shadow: hsla(0, 0%, 20%, 0.66) 1px 1px 2px;
                        transform: rotate(30deg);
                        transform-origin: center center;
                    }
            
                    &:nth-child(4){
                        border-color: hsl(12, 70%, 35%);
                        box-shadow: hsla(0, 0%, 20%, 0.66) 1px 1px 2px;
                        transform: rotate(-30deg);
                        transform-origin: center center;
                    }
            
                    &:nth-child(5),
                    &:nth-child(6){
                        opacity: 0;
                    }
                }
            }
    
            &~#side-menu{
                opacity: 1;
                pointer-events: all;
            }
        }
        
    
        > #title-container{
            position: relative;
            justify-items: center;
            width: 100%;
            /* height: 40vmin; */
            height: max-content;
            background-size: cover;
            background-position: 0% 18%;

    
            background-image: 
                linear-gradient(transparent 0%, hsla(235, 50%, 98%, 80%) 10%, hsla(235, 50%, 98%, 100%) 40%, hsl(235, 50%, 98%)),
                url("img/cover_241130_1.jpg");
    
            > label{
                zoom: 1.3;
                display: inline-flex;
                
                .weak{
                    font-size: 6vmin;
                    align-self: end;
                    justify-self: end;
                }

                @media (max-width: 1023px){
                    zoom: 1.2;
                }

                font-size: 8vmin;

                &:nth-child(1)::after{
                    content: 'など';
                    position: absolute;
                    margin-top: 9vmin;
                    margin-left: 58vmin;
                    font-size: 5vmin;
                    transform: rotate(15deg);
                }
        
                &:nth-child(2)::before{
                    content: 'プロの\A職人集団が';
                    white-space: pre-line;
                    position: absolute;
                    margin-top: 1vmin;
                    margin-left: -52vmin;
                    font-size: 3.5vmin;
                    color: hsl(22, 82%, 66%);
                }
        
                &:nth-child(2)::after{
                    content: '悪徳業者撲滅!!';
                    white-space: pre-line;
                    position: absolute;
                    margin-top: 6vmin;
                    margin-right: -50vmin;
                    font-size: 3vmin;
                    transform: rotate(-7.5deg);
                    color: hsl(355, 82%, 66%);
                }

            }
        }
    
        > #top-container {
            @media (max-width: 1700px) {
                grid-template-columns: 1fr;
            }
    
            @media not (max-width: 1700px){
                grid-template-columns: 1fr max-content;
    
                > #summery-section{
                    grid-column: 1 / span 1;
                    grid-row: 1 / span 1;
                }
                
                > #area-section{
                    grid-column: 1 / span 1;
                    grid-row: 2 / span 1;
                }    
    
                /* > #human-image{
                    grid-column: 1 / span 1;
                    grid-row: 2 / span 1;
                } */
    
                > #top-form-section{
                    grid-column: 2 / span 1;
                    grid-row: 1 / span 2;
                }
            }
    
            background-color: hsl(235, 50%, 98%);
            width: 100%;
    
            > #summery-section,
            > #area-section{
                grid-template-columns: 100%;
                padding-top: 20px;
                padding-bottom: 20px;
    
                width: 100%;
                height: max-content;
    
                background: transparent;
                border: none;
    
                justify-items: left;
                justify-content: left;
            }

            > #summery-section{

                grid-template-columns: 1fr max-content;

                :nth-child(1){
                    grid-column: 1 / span 2;
                }

                mix-blend-mode: multiply;

                > #human-image {

                    grid-column: 2 / span 1;
                    grid-row: 2 / 6;
        
                    max-width: 22vmin;
                    width: 22vmin;
                    object-fit: contain;
        

                    @media (max-width: 1700px){
                        margin-top: -5vmin;
                        margin-right: 5vmin;
                        justify-self: right;
                        align-self: end;
                        justify-content: end;
                        align-content: end;
                        mix-blend-mode: multiply;
                        /* margin-left: 400px; */
                    }
                    /* @media (orientation: landscape){ */
                    @media not (max-width: 1700px){
                        /* margin-top: -100px; */
                        /* margin-left: 400px; */
        
                    }
                }
            }
    
            > #top-form-section {
                grid-template-columns: 1fr;
                gap: 20px;
                align-content: top;
                align-items: top;
                height: max-content;

                /* @media (orientation: portrait) { */
                @media (max-width: 1700px){
                    margin: 0 10px;
                    padding: 0 3vmin 0 3vmin;
                }
                /* @media (orientation: landscape){ */
                @media not (max-width: 1700px){
                    margin: 25px 5px 0 0;
                    max-width: 550px;
                    width: 550px;
                    padding: 0 4vmin 0 0;
                }
            }
    
            #area-images-container{
                @media (max-width: 1700px){
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                }
            }
    
            > #area-section{
                padding-top: 20px;
        
                width: 100%;
                height: max-content;
        
                background: transparent;
                border: none;
        
                #area-images{
                    
                    max-width: min(80%, 900px);
        
                    grid-template-columns: 20% repeat(5, 16%);
                    grid-template-rows: repeat(2, max-content);
                    grid-auto-flow: column;
                    column-gap: 2vmin;
                    
                    > :nth-child(2n + 1) {
                        align-self: end;
                        overflow-y: hidden;
                        width: 100%;
                        padding-bottom: 100%;
                        height: 0;
                        border-radius: 100%;
                        
                        img{
                            width: 100%;
                        }
                    }
        
                    > :nth-child(2n) {
                        grid-template-columns: 1fr;

                        white-space: pre;


                        > :nth-child(1){
                            text-indent: 0.5ch;
                            font-size: max( 14pt, 3vmin );
                        }

                        > :nth-child(2){
                            text-indent: 2ch;
                            margin-top: 5px;
                        }

                        > :nth-child(n + 2){
                            font-size: max( 9pt, 1.5vmin );
                        }

                        > :nth-child(n + 3){
                            text-indent: 4ch;
                        }

                    }
        
                    @media (max-width: 750px) {
                        /* grid-template-columns: minmax(25%, 150px) repeat(2, minmax(20%, 120px)); */
                        /* grid-template-columns: max(25%, 150px) repeat(2, max(20%, 120px)); */
                        grid-template-columns: 25% repeat(2, 20%);
        
                        grid-template-rows: repeat(4, max-content);
                        grid-auto-flow: dense;
        
                        min-width: 100%;
                        max-width: 100%;
                        justify-content: space-evenly;
        
                        > :nth-child(-2n + 6){
                            grid-row: 1;
                        }
        
                        > :nth-child(-2n + 6){
                            grid-row: 2;
                        }
        
                        > :nth-child(2n + 8){
                            grid-row: 3;
                        }
        
                        > :nth-child(2n + 8){
                            grid-row: 4;
                        }
        
                        > :nth-child(6n + 7){
                            transform: scale(0.8);
                            transform-origin: bottom;
                        }
                    }
                }
            }
        }
        
        > #bottom-form-container{
            grid-template-columns: 1fr max-content;
            background-color: hsl(235, 50%, 98%);
            width: 100%;

            > #bottom-form{
                grid-column: 1 / -1;
                margin: 0 5vmin 0 5vmin;

            }
        }
    
        > #construction-examples-container{
    
            > .container-label{
                grid-column: 1 / span 2;
            }
            
            > [name="ce-radios"]{
                display: none;
            }
    
            @media (min-width: 1023px){
    
                > #ce-labels{
                    background-color: white;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                    border:solid 1px #e0e0e0;
                    /* border-bottom: solid 1px #d0d0d0; */
                    /* border-bottom: none; */
                    box-shadow: 2px 5px 5px 1px hsla(220, 20%, 10%, 12%);
    
                    grid-column: 1 / span 1;
                    
                    min-width: 100%;
                    max-width: 100%;
                    column-gap: 20px;
                    padding: 0 12px 0 12px;
                    
                    display: flex;
                    flex-wrap: wrap;
                    /* grid-auto-flow: column; */
                    grid-auto-columns: max-content;
                    justify-items: baseline;
                    align-items: end;
                    font-size: max( 14pt, 3vmin );
                    margin: 20px 0 0 0;
    
    
                    > label{
                        cursor: pointer;
                        padding: 10px 20px;
                        min-width: 72px;
    
                        border-top-left-radius: 7px;
                        border-top-right-radius: 7px;
                        
                        border: solid 1px hsl(235, 30%, 30%);
                        border-bottom: none;
    
                        background-color: hsl(220, 48%, 94%);
                        box-shadow: inset 0 0 30px 1px hsla(220, 20%, 10%, 7%);
                        
                    }
                }
    
                > #ce-selectors {
                    display: none;
                }
            }
    
            @media (max-width: 1023px){
                
                > #ce-labels{
                    
                    display: none;
                }
                
                > #ce-selectors {
                    font-size: max( 14pt, 3vmin );
    
                    background-color: white;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                    border:solid 1px #e0e0e0;
                    border-bottom: none;
    
                    padding: 10px;
                    width: 100%;
                    display: grid;
                    grid-template-columns: max-content 1fr;
    
                    >label{
                        padding: 10px;
                        width: 100%;
                    }
    
                    >select {
                        font-size: max( 14pt, 3vmin );
    
                        border: solid 1px hsl(230, 15%, 55%);
                        border-radius: 3px;
                        padding: 10px;
                        width: 100%;
                        margin: 0 0px;
                    }
                }
            }
    
            
    
            > #ce-images-container {
                grid-column: 1 / span 1;
    
                width: 100%;
                grid-template-columns: 30px 1fr 30px;
                align-content: center;
                align-items: center;
                justify-items: center;
                box-shadow: 2px 5px 5px 1px hsla(220, 20%, 10%, 12%);
                background-color: white;
    
                border:solid 1px #e0e0e0;
                border-top:none;
    
    
    
                > #ce-images {
    
                    grid-row: 2 / span 1;
                    grid-column: 1 / span 3;
    
                    max-width: 100%;
                    min-width: 100%;
                    
                    height: 50vh;

                    background-color: hsl(220, 48%, 94%);
    
                    box-sizing: content-box;
                    gap: 20px;
    
                    display: flex;
                    flex-direction: column;
    
                    overflow: scroll;
                    scroll-behavior: smooth;
    
                    > div{
                        display: none;
    
                        > label{
                            font-size: max( 14pt, 3vmin );
    
                            position: sticky;
                            left: 0;
                            background-color: hsl(235, 50%, 99%);
                            
                            padding: 10px;
                            border: solid 1px hsl(235, 30%, 70%);
                            border-bottom: none;
    
                            border-top-left-radius: 10px;
                            border-top-right-radius: 10px;
            
                        }
    
                        > div{
                            display: flex;
    
                            position: relative;
                            gap: 10px;

                            > img{
                                scroll-snap-align: center;
                                border: solid 1px hsl(235, 30%, 90%);
                                background-image: linear-gradient(-45deg, hsl(235, 32%, 90%), hsl(235, 32%, 95%));
                                object-fit: cover;

                                width: 25vh;
                                height: 25vh;
                            }
                        }
    
                    }
                }
            }
    
            input:nth-of-type(1):checked ~ #ce-labels > label:nth-of-type(1),
            input:nth-of-type(2):checked ~ #ce-labels > label:nth-of-type(2),
            input:nth-of-type(3):checked ~ #ce-labels > label:nth-of-type(3),
            input:nth-of-type(4):checked ~ #ce-labels > label:nth-of-type(4),
            input:nth-of-type(5):checked ~ #ce-labels > label:nth-of-type(5),
            input:nth-of-type(6):checked ~ #ce-labels > label:nth-of-type(6),
            input:nth-of-type(7):checked ~ #ce-labels > label:nth-of-type(7) {
                border: solid 2px hsl(235, 30%, 30%);
                border-bottom: none;
                padding: 30px 35px;
                margin-top: -30px;
                font-size: max( 16pt, 4vmin );
                
    
                background-color: hsl(220, 61%, 82%);
                box-shadow: inset 0 0 30px 1px hsla(220, 61%, 91%, 60%);
            }
    
            input:nth-of-type(1):checked ~ #ce-images-container > #ce-images > .roof,
            input:nth-of-type(2):checked ~ #ce-images-container > #ce-images > .wall,
            input:nth-of-type(3):checked ~ #ce-images-container > #ce-images > .waterproof,
            input:nth-of-type(4):checked ~ #ce-images-container > #ce-images > .exterior,
            input:nth-of-type(5):checked ~ #ce-images-container > #ce-images > .interior,
            input:nth-of-type(6):checked ~ #ce-images-container > #ce-images > .disintegrate,
            input:nth-of-type(7):checked ~ #ce-images-container > #ce-images > .others {
                display: grid;
            }
    
        }
    }
}

_::-webkit-full-page-media,
_:future,
:root body{

    #title-container{

        label {

            font-size: 7.8vmin;

            &:nth-child(1)::after{
                margin-top: 11.7vmin !important;
                margin-left: 75vmin !important;
            }
    
            &:nth-child(2)::before{
                margin-top: 1.3vmin !important;
                margin-left: -67.6vmin !important;
            }
    
            &:nth-child(2)::after{
                margin-top: 7.8vmin !important;
                margin-right: -65vmin !important;
            }

            /* @media (max-width: 1023px){
                font-size: 8vmin;
            } */
        }
    }

    #area-images{
        column-gap: 10px;
    }
}