/*
  サイト内の FAQ を、トップ（index.html #faq）と同じ動きと見た目に揃える（2026-11-03 Tom）
  「サイト内の FAQ はメイン LP の FAQ の動きと全部同じにして。カラーは変わってもいいから」

  ■ 形
    ・頁の HTML は今のまま（記事の h3 + p、旅の種類の details など）。js/faq.js が読み込みのあとに
      トップと同じ形（.faq-item / button.faq-q / .faq-q-num / .faq-q-icon / .faq-a / .faq-a-inner）へ組み替え、
      外枠に .sg-faq を付ける。
      ⚠️ HTML の形を変えないのは、JSON-LD の FAQPage（scripts/lp/faq-schema.py・ldsync.py）と
         訳の道具（build-article-langs.py）が h3 / p をそのまま読んでいるから。
      ⚠️ JS が動かない時は、今までどおり質問と答えが全部見える。検索エンジンにも答えの文が HTML で残る
  ■ 値はトップの計算値を写したもの（WebKit 1440 / 390 で実測）
    ・枠 1px・角丸 18px・間 14px・質問 16px/600/行 1.4・余白 24px 28px・番号 16px/700 右 14px
    ・答え 14.5px/行 1.85・余白 0 28px 26px。電話の幅（768px まで）は 13.5px・18px 20px・13px・13px/1.8・0 20px 20px
    ・開くと面が青（#2563EB）、字は白、山形の印は黒く 180° 回る（印は mask で描き、色を地に合わせられるようにした）
    ・動き: 高さ max-height .4s ease／印の回転 .35s ease／字の色 .25s ease。面の色は一度に変わる
      （トップでも .faq-item の transition は後の指定に上書きされ、面は一度に変わっている）
  ■ 色は頁の地に合わせて --os-* から取る。暗い頁（body.jy-dark / body.sd-dark）は --os-* が暗い値なので、
    ここで名指ししなくても線・字・番号（明るい青）が変わる。開いた面の青と白い字はどちらの地でも同じ
  ■ 2つの型（2026-11-03 Tom「見せる頁は開閉、読ませる頁は開いたまま」）
    ・開閉: 上のとおり（トップ・journey-*・japan-beauty-wellness-concierge）
    ・開いたまま（.sg-faq--open）: 記事 blog-*・japan-travel/dining/shopping-concierge・atelier/journal（白い地）。
      番号・質問の字の大きさ・書体・枠・余白はトップと同じ。山形・青い面・押しどころは無し。
      答えは本文の色（#3A3A42・記事の本文と同じ）と広めの行間で、最初から見える。型は js/faq.js が元の形で決める
  ⚠️ staygo-os.css（と journey-dark.css / show-dark.css）のあとに読む
*/
.sg-faq {
  --faq-line: var(--os-border, #E9E9ED);
  --faq-ink: var(--os-ink, #111113);
  --faq-num: var(--os-accent, #2563EB);
  /* トップの山形は data URI の currentColor が効かず、閉じても開いても黒（実測）。ここでは字の色に合わせ、暗い地でも見えるようにする */
  --faq-icon: var(--faq-ink);
  --faq-hover: rgba(255, 255, 255, 0.04);
  --faq-open-bg: #2563EB;
  --faq-open-ink: #FFFFFF;
  --faq-open-icon: #0D0D0D;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: var(--faq-mt, 32px) 0 0;
  padding: 0;
  border: 0;
  max-width: 880px;
}
.sg-faq .faq-item {
  background: var(--faq-item-bg, transparent);
  border: 1px solid var(--faq-line);
  border-radius: 18px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
/* トップ（index と各言語の #faq）もこの部品で動く。見た目を1pxも変えないよう、上の間（56px）と
   閉じた山形の色（トップは data URI の currentColor が効かず黒）だけトップの値に戻す */
#faq .sg-faq { --faq-mt: 56px; --faq-icon: #000000; --faq-open-icon: #000000; --faq-item-bg: rgba(255, 255, 255, 0.025); }
/* トップの山形はトップ自身の頁の中の指定（data URI の絵）のまま描く。mask で描くと WebKit で回した時に縁の滲みが1px違う */
#faq .sg-faq .faq-q-icon::before {
  -webkit-mask: none; mask: none; background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='currentColor' stroke-width='2'><path d='M1 1l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}

/* 旅の種類の .jy-faq-list は上に線を引いていた。中に一覧を置くので線を外す */
.sg-faq-host { border-top: 0 !important; }
.sg-faq-host > .sg-faq { margin-top: 0; }

@media (hover: hover) and (pointer: fine) {
  .sg-faq .faq-item:hover { background: var(--faq-hover); }
}
.sg-faq .faq-item.open { background: var(--faq-open-bg); border-color: var(--faq-open-bg); }

/* 質問の見出し。記事の h3（.article-body .article-faq h3）や旅の頁の h3 の指定を外す */
.sg-faq .faq-item > h3.faq-h {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: inherit !important;
  /* 大域の h3 の text-wrap: balance が質問の折り返しに効くと、電話の幅で行が早く折れる。トップと同じ普通の折り返しに */
  text-wrap: wrap !important;
}
.sg-faq .faq-q {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  margin: 0;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  color: var(--faq-ink) !important;
  font-family: inherit;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  line-height: 1.4 !important;
  text-transform: none;
  transition: color .25s ease;
  min-height: 44px;
}
.sg-faq .faq-q:focus-visible { outline: 2px solid var(--faq-num); outline-offset: -4px; border-radius: 18px; }
.sg-faq .faq-q-num {
  display: inline-block;
  flex-shrink: 0;
  color: var(--faq-num) !important;
  font-weight: 700;
  font-size: 16px;
  margin-right: 14px;
}
.sg-faq .faq-q-text { flex: 1; }
.sg-faq .faq-q-icon {
  flex-shrink: 0;
  margin-left: 24px;
  width: 14px;
  height: 14px;
  position: relative;
  color: var(--faq-icon);
  transition: color .3s ease, transform .35s ease;
}
.sg-faq .faq-q-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='black' stroke-width='2'><path d='M1 1l6 6 6-6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='black' stroke-width='2'><path d='M1 1l6 6 6-6'/></svg>") center / contain no-repeat;
  transform: translateY(-50%);
}
.sg-faq .faq-item.open .faq-q,
.sg-faq .faq-item.open .faq-q-num { color: var(--faq-open-ink) !important; }
.sg-faq .faq-item.open .faq-q-icon { color: var(--faq-open-icon); transform: rotate(180deg); }

.sg-faq .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.sg-faq .faq-a-inner { padding: 0 28px 26px; font-size: 14.5px; line-height: 1.85; color: var(--faq-open-ink); }
.sg-faq .faq-a-inner :is(p, li) {
  margin: 0 0 12px !important;
  max-width: none !important;
  font-size: 14.5px !important;
  line-height: 1.85 !important;
  color: var(--faq-open-ink) !important;
}
.sg-faq .faq-a-inner > :last-child { margin-bottom: 0 !important; }
/* 答えの中のリンク: 大域の a（青・!important）のままだと青い面の上で消える */
.sg-faq .faq-a-inner a, .sg-faq .faq-a-inner a:hover {
  color: var(--faq-open-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  background-image: none !important;
}
.sg-faq .faq-a-inner :is(strong, b) { color: var(--faq-open-ink) !important; }

/* ヒンディー語は上下に付く記号のため行間を広く（staygo-os.css の :lang(hi) p と同じ 1.85。トップの答えも 1.85） */
:lang(hi) .sg-faq .faq-a-inner :is(p, li) { line-height: 1.85 !important; }

@media (max-width: 768px) {
  .sg-faq .faq-q { font-size: 13.5px !important; padding: 18px 20px; line-height: 1.45 !important; }
  .sg-faq .faq-q-num { font-size: 13px; margin-right: 10px; }
  .sg-faq .faq-a-inner { padding: 0 20px 20px; }
  .sg-faq .faq-a-inner :is(p, li) { font-size: 13px !important; line-height: 1.8 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-faq :is(.faq-q, .faq-q-icon, .faq-a) { transition: none; }
}

/* ── 開いたままの型（読ませる頁・2026-11-03 Tom） ── */
.sg-faq--open { --faq-read-ink: #3A3A42; }
.sg-faq.sg-faq--open .faq-item,
.sg-faq.sg-faq--open .faq-item:hover { background: var(--faq-item-bg, transparent); }
.sg-faq.sg-faq--open .faq-q { cursor: auto; justify-content: flex-start; align-items: baseline; padding-bottom: 12px; }
.sg-faq.sg-faq--open .faq-a { max-height: none; overflow: visible; transition: none; }
.sg-faq.sg-faq--open .faq-a-inner { color: var(--faq-read-ink); }
.sg-faq.sg-faq--open .faq-a-inner :is(p, li) {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: var(--faq-read-ink) !important;
}
.sg-faq.sg-faq--open .faq-a-inner :is(strong, b) { color: var(--faq-ink) !important; }
.sg-faq.sg-faq--open .faq-a-inner a,
.sg-faq.sg-faq--open .faq-a-inner a:hover { color: var(--os-accent, #2563EB) !important; text-decoration: underline !important; }
@media (max-width: 768px) {
  .sg-faq.sg-faq--open .faq-q { padding-bottom: 10px; }
  .sg-faq.sg-faq--open .faq-a-inner :is(p, li) { font-size: 14.5px !important; line-height: 1.8 !important; }
}
:lang(hi) .sg-faq.sg-faq--open .faq-a-inner :is(p, li) { line-height: 1.9 !important; }
/* 開いたままの型に .open が付いても（検査の道具など）、開閉の型の白い字・青い面にならないよう名指しで止める */
.sg-faq.sg-faq--open .faq-item.open { background: var(--faq-item-bg, transparent); border-color: var(--faq-line); }
.sg-faq.sg-faq--open .faq-item .faq-q,
.sg-faq.sg-faq--open .faq-item .faq-q-text { color: var(--faq-ink) !important; }
.sg-faq.sg-faq--open .faq-item .faq-q-num { color: var(--faq-num) !important; }
.sg-faq.sg-faq--open .faq-item .faq-a-inner :is(p, li) { color: var(--faq-read-ink) !important; }

/* 和文と中文の質問は、トップの見出し（お店と体験は…）と同じ W8 に。
   ⚠️ 共通部品にそろえた 11/3 に 600 へ下がり、記事の質問が細く見えた（Tom 2026-11-03） */
.sg-faq .faq-q:is(:lang(ja), :lang(zh), :lang(zh-Hant)) { font-weight: 800 !important; }