@charset "UTF-8";

/* =============================================================
   FAQ Accordion 部品 CSS
   ガイドライン: coding_css.md / DESIGN.md §2(色) §4(余白) §7-14(Accordion)
   ============================================================= */



/* ---------- m_autoFaqAccordionWrap（ラッパー） ---------- */
.m_autoFaqAccordionWrap {
  --color-main: #8F1E35;
  --color-text: #333333;
  --color-link: #052674;
  --color-border: #efefef;
  --color-bk-sub: #F0F0F0;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --transition: 0.2s;
}
.m_autoFaqAccordionWrap__body {}
.m_autoFaqAccordionWrap__footer{
  margin-top: var(--space-md);
}
.m_autoFaqAccordionWrap__footerLink{
  position: relative;
  display: block;
  width: fit-content;
  margin-left: auto;
  padding-left: .8em;
  color: var(--color-link);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition);
}
.m_autoFaqAccordionWrap__footerLink:hover{
  color: var(--color-main);
}
.m_autoFaqAccordionWrap__footerLink::before{
  content: "\f105";
  position: absolute;
  left: 0;
  display: block;
  font-family: fontAwesome;
}


/* ---------- m_autoFaqAccordionList（並び・区切り線） ---------- */
.m_autoFaqAccordionList {}
.m_autoFaqAccordionList__item {}
.m_autoFaqAccordionList__item + .m_autoFaqAccordionList__item{
  margin-top: var(--space-sm);
}

/* ---------- m_autoFaqAccordion（開閉は element.style を使わず grid 0fr/1fr） ---------- */
.m_autoFaqAccordion {}
.m_autoFaqAccordion__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding-left: 32px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  background: none;
  color: var(--color-text);
  transition: color var(--transition);
  cursor: pointer;
}
.m_autoFaqAccordion__head::before{
  content: "Q.";
  position: absolute;
  top: -3px;
  left: 0;
  display: block;
  font-size: 22px;
  color: var(--color-main);
}
.m_autoFaqAccordion__head:hover {
  color: var(--color-main);
}
.m_autoFaqAccordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.m_autoFaqAccordion__icon::before,
.m_autoFaqAccordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--color-main);
  transition: transform var(--transition), opacity var(--transition);
}
.m_autoFaqAccordion__icon::before {
  transform: translate(-50%, -50%);
}
.m_autoFaqAccordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.m_autoFaqAccordion__head.is_open .m_autoFaqAccordion__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}
.m_autoFaqAccordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition);
}
.m_autoFaqAccordion__body.is_open {
  grid-template-rows: 1fr;
}
.m_autoFaqAccordion__bodyInner {
  overflow: hidden;
  min-height: 0;
}
.m_autoFaqAccordion__txt {
  position: relative;
  padding: var(--space-sm);
  padding-left: 32px;
}
.m_autoFaqAccordion__txt::before{
  content: "A.";
  position: absolute;
  top: 6px;
  left: 0;
  display: block;
  font-size: 22px;
  font-weight: bold;
  color: var(--color-main);
}

/* ---------- m_articleBody（CMS prose・型指定子孫の限定例外。coding_css.md §3.2） ---------- */
.m_autoFaqBody > * + * {
  margin-top: var(--space-md);
}
.m_autoFaqBody * > * + * {
  margin-top: var(--space-xs);
}
.m_autoFaqBody a {
  color: var(--color-link);
  text-decoration: underline;
}
.m_autoFaqBody strong {
  font-weight: 700;
  color: var(--color-main);
}
/* 追加分：既存 m_articleBody（DESIGN.md §7）に無い dl/img 系。今回の回答本文（定義リスト・手順画像）に対応するため型指定子孫として拡張 */
.m_autoFaqBody dt {
  font-weight: 700;
}
.m_autoFaqBody dd {
  padding-left: var(--space-sm);
}
.m_autoFaqBody img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
}