@charset "UTF-8";

html{margin-top: 0 !important;}

a:link { color: #333; }
a:visited { color: #333; }
a:hover { color: #444; }
a:active { color: #444; }
a{text-decoration: none;}

li{list-style: none;}

.content img{
  width: 100%;
}

div.check{
  border: solid 3px #ffaf58;
  padding: 25px;
  margin-top: 50px;
}

div.check h5{
  font-size: 20px;
  margin-bottom: 15px;
}

#coffee div.grade img,
#film img,
#design img{
  width: 80%;
  margin: 0 10% 50px;
}

#coffee div.grade p{
  margin-bottom: 100px;
}

#coffee ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}

#filter ul{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 50px;
}

#coffee ul li ul{
  display: grid;
  grid-template-columns: 15% 80%;
  gap: 5%;
}

#filter ul li ul{
  display: grid;
  grid-template-columns: 30% 65%;
  gap: 5%;
}

#coffee ul li ul li,
#filter ul li ul li{
  display: flex;
  align-items: center;
}

/*#coffee li p,
#filter li p{
  font-size: 14.5px;
}*/

#coffee li h3,
#filter li h3{
  font-size: 20px;
  padding-bottom: 15px;
  text-align: left;
}

#coffee,#coffee,#filter,#film,#design{
  padding: 80px 0;
}

/*----------------------------------------------

タブレットCSS

----------------------------------------------*/


@media (max-width: 1024px){


#coffee div.grade p{
  margin-bottom: 80px;
}

#coffee ul li ul{
  grid-template-columns: 25% 70%;
}

#coffee,#coffee,#filter,#film,#design{
  margin-top: 0px;
}

}



@media (max-width: 600px){

#coffee div.grade img,
#film img,
#design img{
  width: 100%;
  margin: 0 0 30px;
}

div.check{
  margin-top: 30px;
}

#coffee ul{
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
}

#coffee ul li ul{
  grid-template-columns: 15% 80%;
  gap: 5%;
}

#filter ul{
  gap: 30px;
}

#filter ul li ul{
  grid-template-columns: repeat(1, 1fr);
  gap: 15px;
}

#coffee li h3,
#filter li h3 {
  padding-bottom: 10px;
}

#coffee,#coffee,#filter,#film,#design{
  padding: 60px 0;
}


}