@charset "utf-8";


#spclty > div > p {
  font-size: min(1vw, 1.2rem);
  margin: 0 auto 39px;
}

#spclty > div > ul.flx {
  gap: 30px 0;
}
#spclty > div > ul > li {
  width: 48%;
  display: grid;
    grid-template-columns: 1fr 1.4fr; 
    /* 縦幅の比率：上の①はコンテンツ分の高さ、下の③は残りの広さ */
    grid-template-rows: auto 1fr; 
    gap: 15px;
    grid-template-areas:
      "area-2 area-1"
      "area-2 area-3";
}
#spclty > div > ul > li h4 {
  color: #776554;
  font-size: min(2vw, 2rem);
  grid-area: area-1;
}
#spclty > div > ul > li img {
  width: 100%;
  grid-area: area-2;
}
#spclty > div > ul > li p {
  font-size: min(1vw, 1.2rem);
  grid-area: area-3;
  line-height: 1.4;
}




#cncpt > div > ul > li {
  width: calc(15% - 32px);
  padding: 16px;
  background: url(../../img/cncpt/bg_li2.png) no-repeat center center / 100% 100%;
  color: #4b3829;
  display: flex;
    justify-content: center;
    align-items: center;
  line-height: 1.6;
  font-size: 1vw;
  font-weight: bolder;
  text-align: center;
}


/* tbl */
@media screen and (max-width: 820px) {
  #spclty > div > p,
  #spclty > div > ul > li p {
    font-size: 1.4vw
  };
}

/* sp */
@media screen and (max-width: 640px) {

  #spclty > div > ul > li {display: revert;}
  #spclty > div > ul > li h4 {
    margin: 0 auto 9px;
    font-size: 1.2rem;
  }
  #spclty > div > ul > li p {font-size: 3.6vw;}

  #spclty > div > p {font-size: 1rem;}
  #spclty > div > ul > li h4 {font-size: 1.3rem;}
  #spclty > div > ul > li img {margin: 0 auto 9px;}
}
/* e.o.c. */