/* EN /faq/ 再設計候補 v1（ローカル・非公開）。body.en-faq-proto にスコープ。
   用途：調べもの。写真や暗色帯は足さず、カテゴリの索引（PCは左に追従／スマホは上に横並び）と、カテゴリ→質問→回答の階層で探しやすくする。
   Q/Aの全文・順序・リンク・#cancellation は変更しない。HTMLの追加は「カテゴリ索引（ナビ）」と、各カテゴリへのid、のみ。実表示は未確認。 */
body.en-faq-proto {
  --serif: Georgia, "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
}
body.en-faq-proto #single_page { padding-top: var(--h-h); }
body.en-faq-proto .page_faq .content_block {
  max-width: 1160px; margin: 0 auto; padding: clamp(36px, 6vw, 80px) var(--gutter) clamp(64px, 9vw, 128px);
  display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: clamp(40px, 6vw, 88px); align-items: start;
}
body.en-faq-proto .page_faq h1.block_title { grid-column: 1 / -1; margin: 0 0 clamp(32px, 5vw, 64px); text-align: left; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.8vw, 64px); line-height: 1.08; color: var(--ink); }
body.en-faq-proto .page_faq h1.block_title:after { display: none; }
body.en-faq-proto .page_faq h1.block_title span { display: block; margin-top: 14px; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .3em; color: var(--ink-soft); }
/* カテゴリ索引（PC：左の列で追従） */
body.en-faq-proto .fx-index { grid-column: 1; grid-row: 2 / span 60; align-self: start; position: sticky; top: calc(var(--h-h) + 28px); }
body.en-faq-proto .fx-index ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
body.en-faq-proto .fx-index li { margin: 0; padding: 0; float: none; width: auto; }
body.en-faq-proto .fx-index a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 17px; line-height: 1.4; letter-spacing: .005em; color: var(--ink); text-decoration: none; transition: color .3s var(--ease), padding-left .3s var(--ease); }
body.en-faq-proto .fx-index a:hover { color: var(--green); padding-left: 6px; }
body.en-faq-proto .fx-index a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* カテゴリ見出し（質問より一段大きく）・質問・回答 */
body.en-faq-proto .faq_category, body.en-faq-proto .faq_category.f7 { grid-column: 2; max-width: none; margin: clamp(56px, 7vw, 88px) 0 0; padding: 0; background: transparent; scroll-margin-top: calc(var(--h-h) + 20px); }
body.en-faq-proto .faq_category:first-of-type { margin-top: 0; }
body.en-faq-proto .faq_category h2 { max-width: none; margin: 0; padding: 0 0 16px; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.2; letter-spacing: .005em; color: var(--ink); border-bottom: 1px solid var(--ink); }
body.en-faq-proto .faq_block { grid-column: 2; max-width: none; margin: 0; padding: 28px 0 30px; background: none; border-bottom: 1px solid var(--line); }
body.en-faq-proto .faq_q p { position: relative; margin: 0; padding: 0 0 0 2.4em; font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.7; letter-spacing: .02em; color: var(--ink); }
body.en-faq-proto .faq_q p:before { content: "Q"; position: absolute; top: 0; left: 0; width: auto; height: auto; font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1.4; color: var(--green); }
body.en-faq-proto .faq_a { padding: 12px 0 0 2.4em; max-width: 44em; }
body.en-faq-proto .faq_a p { margin: 0; padding: 0; font-size: 15px; line-height: 2.05; letter-spacing: .02em; color: var(--ink-soft); }
body.en-faq-proto .faq_a a { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
body.en-faq-proto .faq_block#cancellation { scroll-margin-top: calc(var(--h-h) + 16px) !important; }
@media (max-width: 900px) {
  body.en-faq-proto .page_faq .content_block { display: block; }
  /* スマホ：索引は上に横並び（ヘッダーの下に追従）。スクロールできる1行 */
  body.en-faq-proto .fx-index { position: sticky; top: var(--h-h); z-index: 5; margin: 0 calc(-1 * var(--gutter)) 8px; padding: 10px var(--gutter); background: rgba(243,239,232,.96); box-shadow: 0 1px 0 var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.en-faq-proto .fx-index ul { display: flex; gap: 8px; border: 0; width: max-content; }
  body.en-faq-proto .fx-index a { padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--sans); font-size: 13px; letter-spacing: .04em; white-space: nowrap; }
  body.en-faq-proto .fx-index a:hover { padding-left: 16px; }
  body.en-faq-proto .faq_category, body.en-faq-proto .faq_category.f7 { margin-top: 44px; scroll-margin-top: calc(var(--h-h) + 70px); }
  body.en-faq-proto .faq_category:first-of-type { margin-top: 28px; }
  body.en-faq-proto .faq_q p { font-size: 16px; }
}

/* EN FAQ スマホ索引の折返し案（未適用・faq-redesign-v1.css の末尾に追記）。本文・順序・リンク・HTMLは不変。
   目的：3カテゴリ全部を常に見せる（横スクロールをやめ、3等分の小さな段組み）。長い見出しは2行まで折返す。 */
@media (max-width: 767px) {
  body.en-faq-proto .fx-index { overflow: visible; padding-top: 8px; padding-bottom: 8px; }
  body.en-faq-proto .fx-index ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: auto; }
  body.en-faq-proto .fx-index a {
    display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 6px;
    font-size: 12.5px; line-height: 1.3; letter-spacing: .02em; text-align: center; white-space: normal; border-radius: 10px;
  }
  body.en-faq-proto .fx-index a:hover { padding-left: 6px; }
  /* 索引の高さが約60pxになるため、見出しが索引の下に隠れない余白（従来70px→96px） */
  body.en-faq-proto .faq_category, body.en-faq-proto .faq_category.f7 { scroll-margin-top: calc(var(--h-h) + 96px); }
}