/* =========================================
   Character List
   ======================================= */

body {
 opacity: 1;
}
.character-list {
 padding-block: 60px 0;
 height: auto;
 overflow: hidden;
 text-align: left;
}
.section-title-character-list {
 margin-inline: 60px;
 margin-bottom: 60px;
}
.container {
 max-width: unset;
 padding-inline: unset;
 margin-inline: 60px;
 width: auto;
}
.character-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
}
.character-item {
 width: calc((100% - 24px * 3) / 4); /* PC: 4 列 */
 text-align: center;
 color: #393939;
 text-align: center;
 font-size: 1rem;
 font-style: normal;
 font-weight: 700;
 text-decoration: none;
}
.character-item .image {
 position: relative;
 width: 100%;
 display: flex;
 align-items: center;
 aspect-ratio: 1/1;
 border-radius: 8px;
 overflow: hidden;
}
.character-item .image img.character-thumb {
 width: 100%;
 object-fit: cover;
 aspect-ratio: 1 / 1;
 transition: all 0.4s ease;
}
.character-title {
 margin-top: 8px;
 font-size: 1rem;
 font-weight: 700;
 line-height: 1.5;
 color: #393939;
}

@media (min-width: 769px) {
 .character-item:hover img {
  transform: scale(1.1);
 }
}

/* レスポンシブ */
@media (max-width: 768px) {
 .section-title-character-list {
  margin-inline: 30px;
  margin-bottom: 30px;
 }
 .container {
  margin-inline: 30px;
 }
}

@media (max-width: 600px) {
 .character-list {
  padding-block: 30px 0;
 }
 .section-title-character-list {
  margin-inline: 20px;
  margin-bottom: 30px;
 }
 .container {
  margin-inline: 20px;
 }
 .character-grid {
  gap: 20px;
 }
 .character-item {
  width: calc((100% - 20px * 1) / 2);
 }
}