@charset "UTF-8";
/* ==========================================================================
   pages/info.css — よくある質問／取り組み／スポーツ支援／お問い合わせの確認・完了／ポリシー／404（p-系）（SPD-v2）
   型はどれも F（機能）か、既存の B・C の組み合わせ。飾りは足さず、行長と見出しの階層だけ整える
   ========================================================================== */

/* よくある質問のKV：写真の左にあるロゴマークが、コピーの上に見えるように寄せる */
.p-faqKv .c-hero-bg img { object-position: 0% 100%; }

/* --- よくある質問 ---------------------------------------------------------
   C（目次＋本文）の右側にアコーディオン。項目は _wide（見出しの下に全幅）で積む（2列にすると質問の行が短くなりすぎる） */
.p-faq .c-index-item {
  @media print, screen and (min-width: 1024px) {
    padding-block: 6.4rem;

    &:first-child { padding-block-start: 0; }
  }
}

.p-faq-a {
  display: grid;
  gap: 1.2rem;

  & a {
    color: var(--cl-blue);
    text-decoration: underline;
  }

  & .c-list { margin: 0; }
}

/* 導入文の下に置くページ内リンク（SP・タブレットのみ表示） */
.c-secBody > .c-text + .c-anchorNav { margin-block-start: 2.4rem; }

/* --- 写真の一覧（スポーツ支援） ------------------------------------------ */
.p-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
  }

  & a {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale var(--ease-t-slow) var(--ease-out);
  }

  @media (any-hover: hover) {
    & a:hover { opacity: 1; }
    & a:hover img { scale: 1.04; }
  }
}

/* イベントの詳細（Zico All-Star Game） */
.u-inner.p-eventInner { max-inline-size: calc(96rem + var(--inner-pad) * 2); }

.p-eventKv {
  margin-block-end: 4rem;

  & img {
    inline-size: 100%;
    block-size: auto;
  }
}

/* --- お問い合わせ（確認・完了）／404 -------------------------------------- */
.u-inner.p-stepInner { max-inline-size: calc(88rem + var(--inner-pad) * 2); }

/* KVを出さないページ（確認・完了・ポリシー）の見出し */
.p-pageTitle {
  margin-block-end: 3.2rem;

  @media print, screen and (min-width: 1024px) { margin-block-end: 4.8rem; }
}

.p-step-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  margin-block-start: 4.8rem;

  & .c-btn { min-inline-size: min(28rem, 100%); }
}

.p-confirm {
  margin-block-start: 3.2rem;
  border-block-start: 1px solid var(--cl-ln);

  & div {
    display: grid;
    gap: 0.6rem;
    padding: 1.8rem 0.4rem;
    border-block-end: 1px solid var(--cl-ln);

    @media print, screen and (min-width: 640px) {
      grid-template-columns: 22rem minmax(0, 1fr);
      gap: 2.4rem;
    }
  }

  & dt {
    color: var(--cl-key);
    font-size: var(--fs-m);
    font-weight: 700;
  }

  & dd {
    font-size: var(--fs-m);
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

.p-notFound-links {
  display: grid;
  gap: 1.6rem;
  margin-block-start: 4rem;
  padding-block-start: 3.2rem;
  border-block-start: 1px solid var(--cl-ln);
}

/* --- ポリシー（個人情報保護方針・コンプライアンス方針） --------------------
   読み物なので行長を 1行 40字前後に抑える */
.u-inner.p-policyInner { max-inline-size: calc(80rem + var(--inner-pad) * 2); }

.p-policy {
  display: grid;
  gap: 4.8rem;
}

.p-policy-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.6rem;
  margin-block-end: 1.6rem;
  padding-block-end: 1.2rem;
  border-block-end: 1px solid var(--cl-ln);
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.5;

  & span {
    color: var(--cl-gold);
    font-size: var(--fs-m);
    letter-spacing: 0.08em;
  }
}

.p-policy-body {
  display: grid;
  gap: 1.2rem;
  font-size: var(--fs-m);
  line-height: 1.9;

  & strong {
    display: block;
    color: var(--cl-key);
  }
}

.p-policy-list {
  display: grid;
  gap: 1.2rem;
  padding-inline-start: 2.4em;
  list-style: decimal;

  & & {
    gap: 0.4rem;
    margin-block-start: 0.6rem;
    list-style: lower-roman;
  }

  & li::marker { color: var(--cl-txt-sub); }
}

.p-policy-box {
  padding: 2rem 2.4rem;
  background-color: var(--cl-bggr);
}