/* ==========================================================================
   faq.css — よくあるご質問（開閉式）
   --------------------------------------------------------------------------
   <details> / <summary> で組む。JS を足さない。
   name 属性は付けない（複数開ける）。FAQ は読み比べる場面があるので
   «同時にひとつだけ» にしない。

   マークアップ：
     <div class="faq">
       <details class="faq__item">
         <summary>
           <span class="faq__q-mark u-numeric" aria-hidden="true">Q</span>
           <h3 class="faq__q">質問</h3>
         </summary>
         <div class="faq__a">
           <span class="faq__a-mark u-numeric" aria-hidden="true">A</span>
           <p>回答</p>
         </div>
       </details>
     </div>

   ★既定の三角マーカーは消し、右端に «＋ / −» を自前で置く。
     マーカーの形はブラウザごとに違うので、揃えないと «作りが雑» に見える。
   ★角丸を付けない。上下の 1px 罫だけで区切る。
   ========================================================================== */

/* よくある質問の節レイアウト。左に節見出し、右に質問一覧を置く共通2カラム。 */
@media (min-width: 1000px) {
  .faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--space-20);
    align-items: start;
  }

  .faq-layout__intro .sec-head {
    margin-bottom: 0;
  }

  .faq-layout__intro .sec-head__title {
    max-width: none;
    white-space: normal;
    text-wrap: wrap;
  }
}

.faq {
  border-top: var(--border-width) solid var(--color-border-strong);
}

.faq__item {
  border-bottom: var(--border-width) solid var(--color-border-strong);
}

.faq__item summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-6) var(--space-4);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
  .faq__item summary:hover {
    background-color: var(--navy-100);
  }
}

.faq__item summary:focus-visible {
  background-color: var(--navy-100);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__q-mark,
.faq__a-mark {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.faq__q-mark {
  color: var(--color-action);
}

/* ★★字送りは **inherit**。**この 1 行を消すと折り返しが動く。**
   質問は <span> から <h3> になった（2026-09-14）。base.css は h1〜h6 に
   --ls-heading を当てるので、明示しないと字送りが変わる。
   ★★ここで var(--ls-body) と書き直してはいけない。em の字送りは
     **宣言した要素の font-size で px に決まり、以降は px として継承する**。
     body（17px）の 0.03em は 0.51px。19px の質問に 0.03em を書き直すと 0.57px になり、
     span だったころより 0.06px ずつ広がる。inherit なら元の 0.51px がそのまま来る。 */
.faq__q {
  color: var(--color-text-strong);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: inherit;
  word-break: auto-phrase;
}

/* 開閉の印。＋ を 2 本の罫で描き、開いたら横棒だけ残して − にする */
.faq__item summary::after {
  content: "";
  position: relative;
  align-self: center;
  width: 14px;
  height: 14px;
  background-image:
    linear-gradient(var(--color-action), var(--color-action)),
    linear-gradient(var(--color-action), var(--color-action));
  background-size: 14px 2px, 2px 14px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: background-size var(--duration-base) var(--ease-out);
}

.faq__item[open] summary::after {
  background-size: 14px 2px, 2px 0;
}

.faq__a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  /* ★★2026-09-15 三嶋指示で左右の余白を足した。
     **値は質問（summary）と同じ 16px（--space-4）。**
     最初 24px で入れたところ «Q より A のほうが余白が大きい» とご指摘があり、揃えた。
     ★Q と同じ値なので、Q の記号と A の記号の左端がそろう。
     ★画面幅で変えない。summary も全幅で 16px のため。 */
  /* ★★上に 16px（--space-4）。**0 だと Q と A が詰まって見える**（2026-09-16 三嶋指摘）。
     ★summary の下余白 24px（--space-6）だけが両者の間にあり、
       «Q の文字 → 24px → A の文字» で、行間（1.65）に対して近すぎた。
       16px 足して 40px にすると «開いた» ことが分かる間合いになる。
     ★下は従来どおり 24px。上 16px ／ 下 24px で、A のかたまりが
       «Q 側に寄る» ようになり、どの Q の答えかが見た目で結びつく。
     ★共通部品なのでサービス詳細ページ（demo/service-newbiz/・11 問）も同じだけ広がる。
       トップページは FAQ を持たないので影響しない。 */
  padding-block: var(--space-4) var(--space-6);
  padding-inline: var(--space-4);
}


.faq__a-mark {
  color: var(--color-text-muted);
}

.faq__a p {
  max-width: var(--measure);
  color: var(--color-text);
}

.faq__a p + p {
  margin-top: var(--space-3);
}