#content {display:flex; flex-wrap:nowrap; width:95%; max-width:1400px; margin:0 auto; background:#fff; min-height:100vh;}
#middle p {font:18px/22px 'Roboto', sans-serif; color:#000;}

img.now {display:block; max-width:100%; height:auto;}

#right {flex: 0 0 250px; background:#eee; padding-top:50px;}

#middle {width:calc(100% - 410px);}
	#about-text {padding:40px 20px;}
	#about-text  h4 {font:25px/35px 'Roboto', sans-serif; color:#000;}

.listBox {margin-bottom:80px;}
.listBox dl {
    width: 220px;
    margin: 5px auto;
}
.listBox dd {font:15px/20px 'Roboto', sans-serif; color:#000;
    margin: 0;
	width:200px;
    margin-top: 10px;
    border: 1px solid #9c0;
    border-radius: 10px;
    box-shadow: 0 15px 10px -15px rgba(0, 0, 0, 0.4);
    padding: 10px 10px 0 10px;
	background:#f8f8f8;
	transition:0.5s;
}
.listBox dd a {font:18px/24px 'Roboto', sans-serif; color:#080; transition:0.5s; text-decoration:none; padding-left:45px; background-image:url('../images/pickle-icon.png'); background-size: 40px 20px; background-repeat:no-repeat;}
.listBox dd a:hover {color:#000; font-weight:600;}
.listBox dd:has(a:hover) {background:#fff;}


@keyframes fadein {
  0% {opacity:0; transform:translateY(100px);}
  50% {opacity:0.5; transform:translateX(0);}
  75% {opacity:1; transform:translateX(0);}
  100% {opacity:1; transform:translateX(0);}
}

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

#content {flex-wrap:wrap;}
#middle {width:calc(100% - 190px);}
#right {flex: 0 1 100%;}
.listBox dl {width:90%; margin:0 auto; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}

}

@media only screen and (max-width: 800px) {
#content {height:auto;}
#menu {flex: 0 1 100%; padding-bottom:20px;}
#menu a {display:inline-block; margin:0 10px;}
#menu h4 {margin:10px;}
#middle {width:100%; height:auto;)
#about-text {padding:0px 20px;}

}