@charset "UTF-8";
/* ==========================================================================
   よりそいモバイル - よくあるご質問ページ専用スタイル

   開閉には details / summary を用いているため、
   JavaScript が動かない環境でも開閉できる。
   ========================================================================== */

/* --------------------------------------------------------------------------
   すべて開くボタン
   -------------------------------------------------------------------------- */
.faq__tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.faq__toggle-all {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--c-green-deep);
  background: var(--c-green-bg);
  border-radius: 999px;
  padding: 0.6em 1.4em;
  transition: background-color 0.25s, color 0.25s;
}
.faq__toggle-all:hover { background: var(--c-green); color: var(--c-white); }

/* --------------------------------------------------------------------------
   カテゴリ
   -------------------------------------------------------------------------- */
.faq__group { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.faq__group:last-of-type { margin-bottom: 0; }

.faq__group-title {
  display: flex; align-items: center; gap: 0.9rem;
  font-size: clamp(1.125rem, 2.4vw, 1.3125rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--c-pink);
}
.faq__group-title span {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--c-green);
  color: var(--c-white);
  display: grid; place-items: center;
  font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   質問と答え
   -------------------------------------------------------------------------- */
.faq__item {
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius-m);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color 0.25s;
}
.faq__item[open] { border-color: var(--c-pink); }

.faq__q {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 3.5rem 1.25rem 3.75rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
  transition: background-color 0.25s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--c-pink-bg); }

/* Q マーク */
.faq__q::before {
  content: "Q";
  position: absolute;
  left: 1.25rem; top: 1.3rem;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-pink);
  color: var(--c-ink);
  display: grid; place-items: center;
  font-size: 0.8125rem;
}

/* 開閉のしるし（＋ / −） */
.faq__q::after {
  content: "";
  position: absolute;
  right: 1.5rem; top: 50%;
  width: 14px; height: 2px;
  border-radius: 2px;
  background: var(--c-green-deep);
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 transparent;
}
.faq__mark {
  position: absolute;
  right: calc(1.5rem + 6px); top: 50%;
  width: 2px; height: 14px;
  border-radius: 2px;
  background: var(--c-green-deep);
  transform: translateY(-50%);
  transition: opacity 0.2s;
}
.faq__item[open] .faq__mark { opacity: 0; }

.faq__a {
  padding: 0 1.5rem 1.5rem 3.75rem;
  font-size: 0.9375rem;
  line-height: 2.1;
  color: var(--c-ink-mid);
}
.faq__a > * + * { margin-top: 1rem; }

/* A マーク */
.faq__a { position: relative; }
.faq__a::before {
  content: "A";
  position: absolute;
  left: 1.25rem; top: 0.15rem;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-green-bg);
  color: var(--c-green-deep);
  display: grid; place-items: center;
  font-size: 0.8125rem;
  font-weight: 700;
}

@media (max-width: 560px) {
  .faq__q { padding: 1.125rem 3rem 1.125rem 3.25rem; font-size: 0.9375rem; }
  .faq__q::before { left: 0.875rem; top: 1.15rem; width: 26px; height: 26px; font-size: 0.75rem; }
  .faq__a { padding: 0 1.125rem 1.25rem 3.25rem; }
  .faq__a::before { left: 0.875rem; width: 26px; height: 26px; font-size: 0.75rem; }
}

/* --------------------------------------------------------------------------
   ページ末のご案内
   -------------------------------------------------------------------------- */
.faq__end {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--c-pink-bg);
  border-radius: var(--radius-l);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.faq__end-text { font-size: 0.9375rem; color: var(--c-ink-mid); margin-bottom: 1.5rem; }