:root {
  --recColor: #FF94CD;
}

body {
  background: var(--systemColor--thin--blueGreen);
  color: #535353
}

/* リセット */
body,
h2,
h3,
p,
ul {
  margin: 0;
  padding: 0;
}

img,
svg,
li {
  line-height: 0;
  list-style: none;
}


/* 共通指定 */
main svg {
  color: var(--recColor);
}

main {
  min-width: 300px;
}

button,
a {
  cursor: pointer;
  text-decoration: none;
}

button:hover,
a:hover {
  opacity: 0.8;
}


@media (min-width: 768px) {
    #faqBlock__main,#faqBlock__form {
        max-width: 950px;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 4vw;
    }
}

#faqBlock__main h2{
 font-size: var(--font-size-lg);
 margin:0 0 1.5rem 0;
}
/* セクションタイトル */
.faqSection_title {
  background-color:var(--systemColor--blueGreen);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  margin-bottom: var(--space-lg);
}
.faqSection__questionCont{
  margin-bottom: var(--space-md);
}

.faqSection__questionBox{
  margin-left: 3.7em;
  background-color: var(--systemColor--thin--red--clear);
  border: 1px solid var(--systemColor--thin--gray);
  border-radius: 10px;
  padding: 0.5em 1em;
  position: relative;
  margin-bottom: var(--space-sm);
}
.faqSection__questionBox::marker{
  content: "";
}
.faqSection__questionBox::before{
  content: "";
  display: block;
  width: 44px;
  height: 44px;
    background: url(../images/faq/mascot01.png);
    background-size: 100%;
    background-repeat: no-repeat;
    left: -3.8em;
    position: absolute;
    top: 0;
}

/* キャラクター */
.faqSection__img {
  width: 44px;
  height: 44px;
}
@media (min-width: 768px) {
.faqSection__img {
  width: 60px;
  height: 60px;
}
}
/* ▼マークをborderで作る */
.faqSection__questionBox::after {
  content: "";
  position: absolute;
  right: 1em;
  top: 50%;
  width: 8px;
  height: 8px;
  border-left: 3px solid #000;
  border-bottom: 3px solid #000;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform 0.3s ease;
}
/* 開いたときは上向き（反転） */
details[open] .faqSection__questionBox::after {
  transform: translateY(-50%) rotate(135deg);
}

.faqSection__answerCont{
 display: flex;
 flex-direction: row-reverse; /* ← これだけで反転！ */
  gap: 0.5rem;
}
.faqSection__answerBox{
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border: solid 1px var(--systemColor--thin--gray) ;
  border-radius: 5px;
  width: 100%;
}

.faqSection__qmark,
.faqSection__amark {
  font-weight: 700;
  color: var(--systemColor--blueGreen);
  margin-right: 0.35em;
}


#faqBlock__form h2{
 font-size: var(--font-size-lg);
 margin:0 0 1.5rem 0;
}


.faqBlock__form h2{
 font-size: var(--font-size-lg);
 margin:0 0 1.5rem 0;
}

.faqSection__back {
  margin-top: var(--space-md);
}

.faqSection__backLink {
  color: var(--systemColor--blueGreen);
  text-decoration: underline;
}