/* 初めての方へ（淡いよもぎ色の面。白い角丸の質問を押すと、なめらかに答えが開く） */
.faq__inner { position: relative; z-index: 2; width: 90%; max-width: 720px; margin: 0 auto; }
.faq .ttl__en { color: var(--deep); }
.faq__txt { margin-bottom: 48px; text-align: center; }
.faq__item {
  border-radius: 1rem;
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.faq__item + .faq__item { margin-top: 1rem; }
.faq__q {
  position: relative;
  display: block;
  padding: 1.75rem 5.5rem 1.75rem 4.6rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.44;
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
  content: "Q.";
  position: absolute;
  top: 1.5rem;
  left: 1.6rem;
  font-family: var(--f-en); font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.68;
  letter-spacing: 0.1em;
  color: var(--mid);
}
/* 開閉の丸（＋が回って − になる） */
.faq__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -1.25rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--white), var(--white)) center / 13px 3px no-repeat,
    linear-gradient(var(--white), var(--white)) center / 3px 13px no-repeat,
    var(--pink);
  transition: transform 0.4s ease-out, background-color 0.4s ease-out;
}
.faq__item.is-open .faq__q::after {
  transform: rotate(180deg);
  background:
    linear-gradient(var(--white), var(--white)) center / 13px 3px no-repeat,
    linear-gradient(transparent, transparent) center / 3px 13px no-repeat,
    var(--mid);
}
.faq__q:focus-visible { outline: 3px solid var(--deep); outline-offset: -3px; border-radius: 1rem; }
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 2.75rem 2rem; line-height: 1.75; letter-spacing: 0.02em; }

/* 左右の吹き出しと小さな印（1920px の枠に置く。画面が狭いと端が隠れる） */

@media (max-width: 767px) {
  .faq__inner { width: 86%; }
  .faq__txt { margin-bottom: 32px; text-align: left; }
  .faq__item + .faq__item { margin-top: 14px; }
  .faq__q { padding: 1.5rem 4rem 1.5rem 3.4rem; font-size: 1.125rem; }
  .faq__q::before { top: 1.25rem; left: 1.2rem; }
  .faq__q::after { right: 1rem; width: 2.2rem; height: 2.2rem; margin-top: -1.1rem; }
  .faq__a p { padding: 0 1.5rem 1.5rem; }
  /* スマホは質問の下に吹き出しと印を並べる */
}
}