/* PUBREF 共通の外枠（ヘッダー・フッター）タスク15041。合格モック shared-frame.html（v5）の sf- 部分が正。
   クラスは sf- 接頭辞で独立。style.css を読まないページ（ai_chat / voice）でも崩れないよう var(--x, 実値) で参照する。
   2段／1段の境界＝1199px。余白は 4/8/12/16/24/32/48 の段だけ。 */
:root { --sf-loaded: 1; }                            /* site-frame.js が CSS 読込を確認する目印 */

/* 同期差し替え時に高さが変わらないよう、差し込み枠の段階で高さを確保（M-8） */
#sf-header-slot[data-sf-variant="standard"] { min-height: 100px; }
#sf-header-slot[data-sf-variant="compact"],
#sf-header-slot[data-sf-variant="compact-slot"] { min-height: 56px; }
@media (min-width: 1200px) {
  #sf-header-slot[data-sf-variant] { min-height: 72px; }
}
.sf-gnav { --sf-cover: 76px; }                       /* 続きボタン44px＋ぼかし32px。JS はこの値を読む */

/* ---------- ページ内リンクで見出しがヘッダーに隠れないように（M-3）。外枠が描画された後だけ ---------- */
html.sf-ready { scroll-padding-top: 112px; }
html.sf-ready.sf-compact { scroll-padding-top: 64px; }
@media (min-width: 1200px) {
  html.sf-ready, html.sf-ready.sf-compact { scroll-padding-top: 80px; }
}
.sf-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  font-family: "Noto Sans JP", -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  letter-spacing: 0.04em;
  --sf-gnav-bg: #ffffff;
}
.sf-bar {
  max-width: var(--max-width, 1080px);
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ロゴ（トップへ戻る） */
.sf-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-decoration: none;
  flex-shrink: 0;
}
.sf-logo svg { width: 34px; height: 34px; flex-shrink: 0; }
.sf-logo-text {
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--color-primary, #1c3464);
  letter-spacing: 0.04em;
}

/* ページ側の差し込み枠（H-3）：ロゴとボタンの間。中身はページが渡す */
.sf-slot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sf-slot:empty { display: none; }
.sf-quota {                                   /* 残り質問数の札 */
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-primary-soft, #e3eaf5);
  color: var(--color-primary, #1c3464);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.sf-slot-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary, #1c3464);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* グローバルナビ（文字リンク） */
.sf-gnav { flex: 1; min-width: 0; position: relative; display: flex; justify-content: center; }
.sf-gnav-list {
  position: relative;                         /* 表示中項目の位置計算の基準 */
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: auto;                           /* H-1：PCでも収まらない環境の保険 */
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 48px;                /* L-1：フォーカス移動で左右ボタンの下に隠れない */
}
.sf-gnav-list::-webkit-scrollbar { display: none; }
.sf-gnav-list li { flex-shrink: 0; }
.sf-gnav-list a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text, #1f2937);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 6px;
}
.sf-gnav-list a:hover { background: var(--color-bg-soft, #f8fafc); color: var(--color-primary, #1c3464); }
.sf-gnav-list a[aria-current="page"] { color: var(--color-primary, #1c3464); font-weight: 700; }
.sf-gnav-list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent, #475569);
}

/* 「続きを表示」ボタン（H-2・M-1）：一覧より上に重ねる実ボタン */
.sf-gnav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--sf-gnav-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sf-gnav-btn[hidden] { display: none; }
.sf-gnav-next { right: 0; }
.sf-gnav-prev { left: 0; }
/* ボタンの内側に幅40pxのぼかし。80%から塗りつぶし＝次の項目の頭が1〜2文字見える。
   ぼかし部分はタップを下のリンクへ通す */
.sf-gnav-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
}
.sf-gnav-next::before { right: 100%; background: linear-gradient(to right, transparent 0%, var(--sf-gnav-bg) 80%); }
.sf-gnav-prev::before { left: 100%;  background: linear-gradient(to left,  transparent 0%, var(--sf-gnav-bg) 80%); }
.sf-gnav-btn-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-gnav-btn svg { width: 10px; height: 18px; display: block; }
.sf-gnav-btn:hover .sf-gnav-btn-circle { border-color: var(--color-primary, #1c3464); }

/* ログイン／無料登録（常時表示） */
.sf-auth { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  border-radius: var(--radius, 6px);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.sf-btn--primary {
  background: var(--color-accent, #475569);
  border-color: var(--color-accent, #475569);
  color: #ffffff;
}
.sf-btn--primary:hover { background: var(--color-accent-dark, #334155); border-color: var(--color-accent-dark, #334155); color: #ffffff; }
.sf-btn--secondary {
  background: #ffffff;
  border-color: var(--color-primary, #1c3464);
  color: var(--color-primary, #1c3464);
}
.sf-btn--secondary:hover { background: var(--color-primary, #1c3464); color: #ffffff; }

/* フォーカス枠（L-1）：ヘッダー内は横スクロールで切れないよう内側に描く */
.sf-header a:focus-visible,
.sf-header button:focus-visible {
  outline: 3px solid var(--color-primary-light, #2a4d8f);
  outline-offset: -3px;
}
.sf-footer a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* ---------- スマホ・タブレット（1199px以下）＝2段（H-1） ---------- */
@media (max-width: 1199px) {
  .sf-header { --sf-gnav-bg: var(--color-bg-soft, #f8fafc); }
  .sf-bar {
    height: auto;
    padding: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo slot auth"
      "nav  nav  nav";
    gap: 0;
  }
  .sf-logo { grid-area: logo; padding-left: 16px; }
  .sf-logo svg { width: 30px; height: 30px; }
  .sf-logo-text { font-size: 18px; }
  .sf-slot { grid-area: slot; padding-left: 8px; gap: 6px; }
  .sf-auth { grid-area: auth; padding: 6px 16px 6px 8px; }  /* 1段目の高さ＝44+12＝56px */
  .sf-btn { padding: 0 12px; }

  /* 2段目：文字リンクの横スクロール列 */
  .sf-gnav {
    grid-area: nav;
    justify-content: flex-start;
    border-top: 1px solid var(--color-border, #e5e7eb);
    background: var(--sf-gnav-bg);
  }
  .sf-gnav-list {
    width: 100%;
    gap: 0;
    padding: 0 4px;                  /* 端ではボタンが消えるので大きな余白は不要（L-5） */
    -webkit-overflow-scrolling: touch;
  }
  .sf-gnav-list a { border-radius: 0; }
  .sf-gnav-list a:hover { background: transparent; }
}

/* 差し込み枠があるページ（ai_chat・voice）の狭い画面：ロゴはマークのみ */
@media (max-width: 479px) {
  .sf-header--has-slot .sf-logo-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .sf-header--has-slot .sf-auth { padding-left: 6px; }
  .sf-slot { overflow: hidden; }      /* 中身が長くてもボタンに重ならない保険（H-4） */
}

/* 改行位置を固定する部品（U-1）。400px以上は通常の文字の並び */
.sf-br, .sf-br-xs { display: inline; }

/* 399px以下（Android標準360px等）：差し込み枠を詰める（H-4・U-1）
   「困りごとを見る」は <span class="sf-br"> で「困りごと／を見る」の2行に固定する。
   折り返しをフォント任せにしない（Windows では「困りごとを／見る」になるため） */
@media (max-width: 399px) {
  .sf-slot { padding-left: 4px; }
  .sf-quota { padding: 0 6px; }
  .sf-slot-link {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 1.25;
    white-space: nowrap;
  }
  .sf-br { display: block; }
}

/* 359px以下：札も「残り／150問」の2行にする（U-1②） */
@media (max-width: 359px) {
  .sf-quota {
    flex-direction: column;
    justify-content: center;
    white-space: normal;
    line-height: 1.15;
    text-align: center;
    border-radius: 10px;
    padding: 2px 6px;
  }
  .sf-br-xs { display: block; }
}

/* 389px以下（360px級でログイン中のボタン2つが溢れない）：外枠を詰める */
@media (max-width: 389px) {
  .sf-logo-text { font-size: 16px; }
  .sf-logo svg { width: 28px; height: 28px; }
  .sf-auth { gap: 6px; padding-right: 12px; }
  .sf-btn { padding: 0 10px; font-size: 14px; }
}

/* PC：ヘッダー内側の最大幅（L-6） */
@media (min-width: 1200px) {
  .sf-bar { max-width: 1160px; }
}

/* 横向き（高さが低い画面）では追従させない（M-4） */
@media (max-height: 500px) {
  .sf-header { position: static; }
  html.sf-ready, html.sf-ready.sf-compact { scroll-padding-top: 0; }
}

/* 差し込み枠があるページ（ai_chat・voice）は1199px以下では追従させない（入力欄・キーボードで画面が狭くなるため） */
@media (max-width: 1199px) {
  .sf-header--has-slot { position: static; }
  html.sf-ready:has(.sf-header--has-slot), html.sf-ready.sf-compact:has(.sf-header--has-slot) { scroll-padding-top: 0; }
}

/* 認証3画面：外枠のロゴと二重にならないよう画面内のロゴは隠し、高さは外枠ぶん引く */
html.sf-ready .auth-logo { display: none; }
html.sf-compact .auth-wrap { min-height: calc(100vh - 57px); }

/* 簡易版（ログイン・登録・決済完了・AI司書・音声）：2段目なし */
.sf-header--compact .sf-gnav { display: none; }
.sf-header--compact .sf-auth { margin-left: auto; }
@media (max-width: 1199px) {
  .sf-header--compact .sf-bar { grid-template-areas: "logo slot auth"; }
}

/* ---------- フッター ---------- */
.sf-footer {
  background: var(--color-primary-dark, #14254a);
  color: rgba(255,255,255,0.85);
  padding: 48px 24px 32px;
  font-family: "Noto Sans JP", -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}
/* 画面下に固定の入力欄があるページ（ai_chat・voice）：入力欄の高さぶん下に余白（M-5）
   --sf-fixed-bar-h はページ側が実測して渡す（既定72px） */
.sf-footer.has-fixed-bar { padding-bottom: calc(32px + var(--sf-fixed-bar-h, 72px)); }
.sf-footer-inner { max-width: var(--max-width, 1080px); margin: 0 auto; }
.sf-footer a { color: rgba(255,255,255,0.85); text-decoration: none; }
.sf-footer a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

.sf-f-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
}
.sf-f-brand { font-size: 18px; font-weight: 700; color: #ffffff; line-height: 1.5; margin: 0; }
.sf-f-lead { font-size: 14px; margin: 8px 0 0; color: rgba(255,255,255,0.8); }
.sf-f-operator { margin: 16px 0 0; font-size: 14px; }
.sf-f-operator dt { font-size: 13px; color: rgba(255,255,255,0.7); }
.sf-f-operator dd { margin: 0 0 8px; color: #ffffff; }
.sf-f-contact {                                  /* L-3：問い合わせは独立した行・44px */
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-size: 15px;
}

.sf-f-heading {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.sf-f-links { list-style: none; margin: 0; padding: 0; }
.sf-f-links a { display: flex; align-items: center; min-height: 44px; font-size: 15px; }

.sf-f-family,
.sf-f-share,
.sf-f-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 24px 0;
}
.sf-f-family-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.sf-f-family-list a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; color: rgba(255,255,255,0.8); }
.sf-ext { font-size: 13px; color: rgba(255,255,255,0.7); }   /* L-4 （別サイト） */

.sf-f-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sf-f-share-label { font-size: 14px; margin-right: 8px; }
.sf-f-share a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 6px;
  font-size: 14px; font-weight: 700; color: #ffffff;
}
.sf-f-share a:hover { background: rgba(255,255,255,0.12); text-decoration: none; }

.sf-f-bottom { padding-bottom: 0; }
.sf-f-disclaimer { font-size: 13px; color: rgba(255,255,255,0.75); margin: 0 0 12px; }
.sf-f-copy { font-size: 13px; color: rgba(255,255,255,0.7); margin: 0; }

@media (max-width: 767px) {
  .sf-footer { padding: 40px 16px 32px; }
  .sf-footer.has-fixed-bar { padding-bottom: calc(32px + var(--sf-fixed-bar-h, 72px)); }
  .sf-f-top { grid-template-columns: 1fr; gap: 24px; }
  .sf-f-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .sf-f-links--legal { display: block; }          /* L-2：規約リンクだけ1列（長い名称が2列だと折り返すため） */
  .sf-f-family-list { gap: 0 16px; }
}

/* 簡易版フッター：規約と運営者だけ */
.sf-footer--compact { padding: 32px 16px 24px; }
.sf-footer--compact .sf-f-top { grid-template-columns: 1fr; gap: 16px; padding-bottom: 16px; }
.sf-footer--compact .sf-f-links--legal { display: flex; flex-wrap: wrap; gap: 0 24px; }
@media (max-width: 767px) {
  .sf-footer--compact .sf-f-links--legal { display: block; }
}

/* ---------- 読み込み失敗時の最小表示（M-7）＝差し込み枠の初期内容 ----------
   CSS 自体が読めなくても素のリンク列として読める構造にしてある */
.sf-fallback { font-size: 15px; line-height: 1.6; padding: 8px 16px; }
.sf-fallback a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 16px; }
.sf-fallback--header { border-bottom: 1px solid var(--color-border, #e5e7eb); background: #ffffff; }
.sf-fallback--footer { border-top: 1px solid var(--color-border, #e5e7eb); background: var(--color-bg-soft, #f8fafc); padding: 16px; }
.sf-fallback--footer p { margin: 4px 0 0; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .sf-gnav-list { scroll-behavior: auto; }
}

.sf-gnav-btn polyline { fill: none; stroke: #1c3464; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }