/* パターン１ ２列表示 */
.charalist {
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 1024px) {
  .charalist {
    grid-template-columns: 1fr;
  }
}

/* パターン２ １列表示*/
.charalist--2 {
  grid-template-columns: 1fr;
  gap: 40px;
}

/* パターン1、2共通 */
.charalist__item {
  position: relative;
  align-items: flex-start;
  height: 100%;
}
.charalist__item .charalist__img {
  width: 40%;
  height: 100%;
  max-height: 40vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.charalist__item .charalist__body {
  width: calc(60% - 20px);
}
.charalist__item .charalist__body > :first-child {
  margin-top: 0;
}
.charalist__item .charalist__body .charalist__name {
  font-size: larger;
}

.charalist--2 .charalist__item .charalist__img {
  max-height: 80vh;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .charalist__item.flex {
    display: block;
  }
  .charalist__item.flex .charalist__img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .charalist__item.flex .charalist__img img {
    width: 100%;
    height: auto;
  }
  .charalist__item.flex .charalist__body {
    width: 100%;
  }
}/* ここにCSSコードを追加

例:
.example {
    color: red;
}

CSS の知識に磨きをかけるためにご覧ください。
http://www.w3schools.com/css/css_syntax.asp

コメント終わり */ 


/* ここにCSSコードを追加
/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

OFFLINE

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.off-list {
 gap: 60px;
 margin-bottom: 80px;
}

.storelist {
 gap: 10px;
 margin: 20px 0;
}

/* タブレット */
@media screen and (min-width:769px) and (max-width: 1024px) {
 .off-list {
  gap: 20px;
 }
}
例:
.example {
    color: red;
}

CSS の知識に磨きをかけるためにご覧ください。
http://www.w3schools.com/css/css_syntax.asp

コメント終わり */ 


/* ここにCSSコ/* アコーディオンボディ（Q）の背景色 */
 .ark-block-accordion__title {
  background: #fff5f6;
}ードを追加

例:
.example {
    color: red;
}

CSS の知識に磨きをかけるためにご覧ください。
http://www.w3schools.com/css/css_syntax.asp

コメント終わり */