body {
    margin: 0;
    display: flex;
    font-size: 1rem;
    min-height: 100vh;
}

	/* 2カラムサイトにする */
	.wrapper {
	    width: 80%;
	    display: flex;
	    margin: 20px auto;
	    justify-content: center;
	}

	.main, .side {
	    padding: 5px;
	}

	.main {
	    background: pink;
	    width: 90%;
	    margin-right: 20px;
	}

	.side p, ul {
	    background-color: #FFFF66;
	    padding: 25px;
		padding-top: 2px;
	}

	/* 2カラムコンテンツにする */

	.archive {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-around;
	}

	.archive div {
	    margin-bottom: 3rem;
	    padding: 3rem;
	    width: 35%;
	    background-color: #f0f0f0f0;
	}

	.archive img {
	    display: block;
	    margin-bottom: 3rem;
	    width: 100%;
	    height: auto;
	}


	.side {
	    background: skyblue;
	    width: 20%;
	}

aside {
    width: 20%;
    min-width: 250px;
    display: flex;
    flex-direction: column;

}
ul {
    list-style: none;
    padding: 2;
    margin: 0;
}
div {
    margin-top: auto;
    height: 300px;
}

/*  */
.open,
.close {
    display: none;
}
input[type="checkbox"] {
    position: absolute;
    left: -50vw;
}
/*  */

@media screen and (max-width: 768px) {
    main {
        width: 100%;
        padding-top: 50px;
    }
    /* ?? */
    .open,
    .close {
        display: block;
    }
    .open {
        position: absolute;
	    background-color: none;     /* 背景色指定 */
	    padding:  2px;             /* 余白指定 */
	    left:  2px;                /* 左からの位置指定 */
	    top: 1px;                  /* 上からの位置指定 */

    }
    aside {
        position: absolute;
        left: -250px;
        height: 100%;
        transition: all 0.2s;
        background: #ffffff;
    }
    input[type="checkbox"]:checked ~ aside {
        left: 0;
    }
    input[type="checkbox"]:checked ~ .back {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8) !important;
    }
    /*  */
}