@charset "utf-8";

/* CSS Document */
/*レイアウト*/

.wrapper {
    display: grid;
    grid-template-columns: min(20%, 300px) 1fr min(20%, 300px);
    /*grid-template-columns: minmax(200px, 300px) 1fr minmax(200px, 300px);*/
    grid-template-rows: 1fr auto;
}

.grid1 {
    height: 100vh;
    position: sticky;
    top: 0;
    grid-row: 1 / 3;
}

.grid3{
    height: 100%;
    grid-row: 1 / 3;
    top: 0;
}
.grid1 {
    background: #fff;
    grid-column: 1 / 2;
    box-shadow: 3px 0 15px rgba(141, 108, 26, 0.3);

}

.grid2 {
    grid-column: 2 / 3;
    z-index: 1;
}

.grid3 {
    background: var(--base2);
    grid-column: 3 / 4;
}

.grid4 {
    grid-column: 2 / 3;
    z-index: 5;
}

.sp {
    display: none !important;
}

.pc {
    display: inline-block !important;
}

@media screen and (max-width:1200px) {
    .flex {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

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

    .wrapper {
        display: block;
    }
    .grid1{
    box-shadow: 0px 0 5px rgba(141, 108, 26, 0.3);}
    
    .grid1,
    .grid3 {
        height: auto;
        position: relative;
    }

    .pc {
        display: none !important;
    }

    .sp {
        display: inline-block !important;
    }

}