@charset "UTF-8";

/* ========================================
   qa.css  v4
   よくある質問
======================================== */

/* --- ページ外側背景：白（左右グレーなし） --- */
.lower-bg-wrapper {
  background: #ffffff;
  background-image: none !important;
  padding: 0;
}

/* QAページはタイトルエリアを非表示（白い箱の中に移動） */
.lower-title-area {
  display: none;
}

/* --- 白い箱 --- */
.lower-main-content .white-box {
  padding: 50px 60px 60px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #ffffff !important;
}

/* --- ページタイトル（中央揃え） --- */
.qa-page-title {
  display: flex !important;
  align-items: center;
  justify-content: center; /* 中央揃え */
  gap: 15px;
  width: 100%;
  font-family: 'Inria Sans', sans-serif;
  font-size: 32px;
  font-weight: 550;
  color: #3B4E59 !important;
  border-bottom: 1.5px solid #3B4E59 !important;
  padding: 0 0 20px;
  margin: 0 0 50px;
}

/* タイトル左のアイコン */
.qa-page-title::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: url('../images/common/icon-qa.svg') no-repeat center center / contain;
}

/* --- カテゴリナビ --- */
.qa-category-nav {
  list-style: none;
  padding: 0;
  width: 100%;
  max-width: 502px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto 60px;
}

.qa-category-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 53px;
  padding: 0 25px;
  background: #0D518C;
  color: #ffffff;
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: none !important;
  transition: background-color 0.3s ease;
}

.qa-category-nav a:hover {
  background: #75838A;
}

.qa-category-nav a img {
  width: 6px;
  height: auto;
  flex-shrink: 0;
}

/* --- QAセクション --- */
.qa-section {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 40px;
  text-align: left;
}

.qa-section:last-child {
  margin-bottom: 0;
}

/* アンカースクロール：固定ヘッダー分のオフセット */
#usage,
#spec,
#maintenance,
#products {
  scroll-margin-top: calc(var(--header-h-pc) + 20px);
}

/* --- セクションタイトル（中央揃え・テキスト幅に下線） --- */
.qa-section-title {
  font-family: 'Inria Sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #4B5B64;
  margin: 0 auto 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #A9A9A9;
  box-shadow: none !important;
  /* テキスト幅に合わせて中央揃え */
  width: fit-content;
  text-align: center;
}

/* --- QAカード群 --- */
.qa-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- QAカード（Q＋A一体型） --- */
.qa-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 25px;
  background: #ffffff;
  border-radius: 4px;
  outline: 1px solid #D9D9D9;
  box-shadow: 4px 4px 4px rgba(206, 206, 206, 0.20);
}

.qa-card-q,
.qa-card-a {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* QA SVGアイコン */
.qa-icon {
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.qa-icon--q {
  background-image: url('../images/qa/icon-q.svg');
}

.qa-icon--a {
  background-image: url('../images/qa/icon-a.svg');
}

.qa-card-q p,
.qa-card-a p {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #4B5B64;
  line-height: 1.6;
  margin: 0;
  padding-top: 4px;
}

/* Q/A区切り線 */
.qa-card-divider {
  width: 100%;
  height: 0;
  border: none;
  outline: 1px solid #CECECE;
  margin: 0;
}


/* TOPへ戻るエリア → lower.css のグローバルスタイルを使用 */




/* ============================
   SP レイアウト
============================ */
@media (max-width: 768px) {

  /* SP：外側背景は白、余白なし */
  .lower-bg-wrapper {
    background: #ffffff;
    padding: 0;
  }

  /* SP：タイトルエリア非表示は継続 */
  .lower-title-area {
    display: none;
  }

  /* 白い箱 */
  .lower-main-content .white-box {
    padding: 0 20px 24px;
    background: #ffffff !important;
  }

  /* タイトル */
  .qa-page-title {
    font-size: 20px !important;
    gap: 10px;
    padding: 17px 0 14px;
    margin-bottom: 24px;
  }

  .qa-page-title::before {
    width: 26px;
    height: 26px;
  }

  /* カテゴリナビ */
  .qa-category-nav {
    max-width: 100%;
    gap: 10px;
    margin-bottom: 30px;
  }

  .qa-category-nav a {
    height: 40px;
    font-size: 13px;
  }

  /* QAセクション */
  .qa-section {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .qa-section:last-child {
    margin-bottom: 0;
  }

  /* セクションタイトル */
  .qa-section-title {
    font-size: 16px;
    margin-bottom: 15px;
    /* SP：テキスト幅に合わせる */
    width: fit-content;
    max-width: 100%;
  }

  /* QAカード群 */
  .qa-cards {
    gap: 10px;
  }

  /* QAカード */
  .qa-card {
    padding: 15px 20px;
  }

  .qa-card-q,
  .qa-card-a {
    gap: 12px;
  }

  .qa-icon {
    width: 27px;
    height: 27px;
  }

  .qa-card-q p,
  .qa-card-a p {
    font-size: 14px;
    padding-top: 3px;
  }

  /* SP：アンカースクロールオフセット */
  #usage,
  #spec,
  #maintenance,
  #products {
    scroll-margin-top: calc(var(--header-h-sp) + 16px);
  }

  /* TOPへ戻るボタン → lower.css のグローバルスタイルを使用 */
}