@charset "utf-8";

/*
 * I-01 FAQブロック カスタマイズ用CSS
 * ------------------------------------------------------------
 * HTMLは I-01 FAQブロックのテンプレート側で出力される。
 *   PC : /60032134/wp-content/themes/multipress/temp/i-01.php
 *   SP : /60032134/wp-content/themes/smartpress/temp/i-01.php
 *
 * ・質問を全件表示し、「回答を見る」ボタンで答えを開閉する
 * ・質問／答えの文言は管理画面（項目一覧）の登録内容をそのまま使用
 * ------------------------------------------------------------
 */


/* =================================================================================================================== */
/* 回答エリアの初期状態（閉じる）                                                                                       */
/* ※ faq_acc_ready は faq.js が読み込まれた時点で html要素に付与される。                                                 */
/*   JSが読み込めない環境では付与されないため、回答は開いたまま表示される（内容が読めなくなるのを防ぐフォールバック）。      */
/* =================================================================================================================== */
.faq_acc_ready .faq_acc_body {
  height: 0;
  overflow: hidden;
}


/* =================================================================================================================== */
/* アコーディオン本体                                                                                                   */
/* =================================================================================================================== */
.faq_acc {
  clear: both;
  margin: 0 0 30px;
  width: 100%;
}
.faq_acc_list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border_color, #dddddd);
  list-style: none;
}
.faq_acc_list li.faq_acc_item {
  margin: 0;
  padding: 18px 4px;
  border-bottom: 1px solid var(--border_color, #dddddd);
  list-style: none;
  background: none;
}

/* --- 質問 ------------------------------------------------------------------------------------------------------- */
.faq_acc_q {
  display: flex;
  align-items: flex-start;
  color: var(--body_text_color, #333333);
  font-weight: bold;
  font-size: var(--font_size_15, 15px);
  line-height: 1.7;
}
.faq_acc_q_mark {
  flex: 0 0 auto;
  margin-right: 10px;
  color: var(--link_color, #1a5fb4);
  font-weight: bold;
  font-size: var(--font_size_16, 16px);
  line-height: 1.7;
}
.faq_acc_q_text {
  flex: 1 1 auto;
}
.faq_acc_q_text .q_title {
  font-weight: bold;
}

/* --- 「回答を見る」ボタン ---------------------------------------------------------------------------------------- */
.faq_acc_btn {
  display: inline-block;
  margin: 12px 0 0;
  padding: 7px 18px;
  border: 1px solid var(--link_color, #1a5fb4);
  border-radius: 30px;
  background-color: transparent;
  color: var(--link_color, #1a5fb4);
  vertical-align: middle;
  font-family: inherit;
  font-size: var(--font_size_13, 13px);
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
  -webkit-appearance: none;
          appearance: none;
}
.faq_acc_btn:hover {
  background-color: var(--link_color, #1a5fb4);
  color: #ffffff;
}
.faq_acc_btn:focus-visible {
  outline: 2px solid var(--link_color, #1a5fb4);
  outline-offset: 2px;
}
.faq_acc_btn_label {
  vertical-align: middle;
}
.faq_acc_btn_icon {
  display: inline-block;
  margin: -4px 0 0 10px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  vertical-align: middle;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.faq_acc_btn[aria-expanded="true"] .faq_acc_btn_icon {
  margin-top: 2px;
  transform: rotate(-135deg);
}

/* --- 答え ------------------------------------------------------------------------------------------------------- */
.faq_acc_body {
  transition: height 0.3s ease;
}
.faq_acc_a {
  display: flex;
  align-items: flex-start;
  margin: 14px 0 4px;
  padding: 16px 18px;
  border-radius: 6px;
  background-color: var(--kdb_background_color, #f5f5f5);
  color: var(--body_text_color, #333333);
  font-size: var(--font_size_14, 14px);
  line-height: 1.9;
}
.faq_acc_a_mark {
  flex: 0 0 auto;
  margin-right: 10px;
  color: var(--link_color, #1a5fb4);
  font-weight: bold;
  font-size: var(--font_size_16, 16px);
  line-height: 1.9;
}
.faq_acc_a_text {
  flex: 1 1 auto;
  min-width: 0;
}
.faq_acc_a_text .a_content {
  display: block;
}
.faq_acc_a_text p:last-child {
  margin-bottom: 0;
}
.faq_acc_a_text img {
  max-width: 100%;
  height: auto;
}


/* =================================================================================================================== */
/* スマートフォン                                                                                                       */
/* =================================================================================================================== */
@media screen and (max-width: 767px) {
  .faq_acc_list li.faq_acc_item {
    padding: 15px 0;
  }
  .faq_acc_q {
    font-size: var(--font_size_14, 14px);
  }
  .faq_acc_btn {
    display: block;
    width: 100%;
    text-align: center;
  }
  .faq_acc_a {
    padding: 14px;
    font-size: var(--font_size_13, 13px);
  }
}


/* =================================================================================================================== */
/* アニメーション抑制設定／印刷                                                                                          */
/* =================================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .faq_acc_body,
  .faq_acc_btn,
  .faq_acc_btn_icon {
    transition: none !important;
  }
}
@media print {
  .faq_acc_btn {
    display: none;
  }
  .faq_acc_body {
    height: auto !important;
  }
  .faq_acc_body[hidden] {
    display: block !important;
  }
}