html { scroll-behavior: smooth; }

.category-section { margin: 20px 20px 0px 20px; }
.category-heading { margin: 0 0 12px 20px; font-size: 1.25rem; font-weight: bold; }
.question-heading { margin: 50px 0 30px 0; font-size: 1.5rem; font-weight: bold; color: #2aa3c0; }

.question { border: 1px solid #ccc; border-radius: 6px; margin-bottom: 10px; padding: 0 10px; cursor: pointer; }
.question ul li a { text-decoration: none; }
.question ul li a:hover { text-decoration: underline; }

.question h2 {
    font-weight: bold;
    margin-top: 10px;
}

/* 開閉部分-開始 */
.question ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  padding-left: 1.2em; /* お好み */
  margin: 0;
}
/* 開いている時 */
.question.open ul { padding-bottom: 15px; }
/* h2 に矢印アイコン */
.question h2 {
  position: relative;
  padding-right: 25px;
  cursor: pointer;
}
/* ▼ の矢印 */
.question h2::after {
  content: "▼";
  font-size: 0.7em;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .3s ease;
}
/* 開いたとき矢印を回転（▲風） */
.question.open h2::after {
  transform: translateY(-50%) rotate(180deg);
}
/* 開閉部分-終了 */

.category-section h2 { font-size: 1.1em; }

.question ul li {
  line-height: 1.65;
  margin-bottom: 5px;
}

.il-faqlist { scroll-margin-top: 100px; }
.il-faqlist dt:hover { background-color: #f5f5f5; border-radius: 4px; }

.category-section {
    grid-template-columns:1fr;
    grid-template-areas:unset;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .category-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
        "member order"
        "credit cancel"
        "product install"
        "point install";
        gap: 20px;
        align-items: flex-start;
    }
    .question {
        margin-bottom: 0;
    }
    
    .question:nth-child(1) { grid-area: member; }
    .question:nth-child(2) { grid-area: order; }
    .question:nth-child(3) { grid-area: credit; }
    .question:nth-child(4) { grid-area: cancel; }
    .question:nth-child(5) { grid-area: product; }
    .question:nth-child(6) { grid-area: install; }
    .question:nth-child(7) { grid-area: point; }
    
}

/* アイコン */
.category-icon {
  position: relative;
  padding-left: 28px; /* アイコンの幅 + 余白 */
  line-height: 1.3;
  display: flex;
  align-items: center; /* テキストとアイコンの縦位置を揃える */
}
.category-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("/html/user_data/assets/img/icon/icon-point.svg") no-repeat center / contain;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.q-title {
  display: flex;
  align-items: center;
}
.q-title::before {
  content: "";
  width: 24px;
  height: 24px;
  background: url("/html/user_data/assets/img/icon/icon-point-b.svg") no-repeat center / contain;
  margin-right: 12px;
}