/* =========================================================
   TOP と下層ページで共有する節（2026-11）
   保護者の声（includes/voice.php）・よくある質問（includes/faq.php）・
   Swimmyをもっと知る（includes/ask-ai.php）と、それらが使う見出し・コンテナ・横に流す列・波。
   どのページでも同じ見た目にするため css2/top.css から切り出し、header.php が全ページで読む
   （top.css より前に読むので、TOP 固有の上書きは top.css に残してある）。
   1024px 以上が PC の組み、1023px 以下はスマホの組み（TOP と同じ）。
   ========================================================= */

/* 共有の節の文字の土台。TOP の main（.page-top main）と同じ値にして、下層ページでも同じ見た目にする */
.tp-shared {
  --tp-gutter: 40px;
  color: var(--ink);
  font-family: var(--font-ja);
  font-size: 16px;
  line-height: 2;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.tp-shared h2,
.tp-shared h3 { color: inherit; font-weight: 700; }

/* よくある質問と Swimmyをもっと知る は、TOP と同じクリームの地に置く（下層ページの紙地のままだと、
   白いカードが地に溶けて見えないため）。TOP では main の地と同じ色なので見た目は変わらない */
.tp-faq.tp-shared,
.tp-ai.tp-shared { background: var(--cream); }

/* よくある質問の一覧の下の一言（管理画面の「FAQ下の一言」。空なら出ない） */
.tp-faq__cta {
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}

@media (max-width: 1023px) {
  .tp-shared {
    --tp-gutter: max(40px, calc((100vw - 680px) / 2));
    font-size: 15px;
    line-height: 1.95;
  }
  .tp-faq__cta { margin-top: 20px; font-size: 13px; }
}
@media (max-width: 780px) {
  .tp-shared { --tp-gutter: 20px; }
}



.tp-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.tp-container--narrow { max-width: 900px; }

/* -------------------------------------------------
   見出し
------------------------------------------------- */
.tp-en {
  margin: 0;
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.24em;
}
.tp-en--lg { font-size: 20px; font-weight: 700; }
.tp-en--blue { color: var(--blue-ink); }
.tp-en--green { color: var(--green-ink); }
.tp-en--orange { color: var(--orange-ink); }
.tp-title {
  margin: 16px 0 0;
  font-size: 34px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.tp-center-head { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* 節の境目の波（PC とスマホで形が違う） */
.tp-wave { line-height: 0; }
.tp-wave svg { display: block; width: 100%; }
.tp-wave .tp-wave__sp { display: none; }

/* 横スクロールの列（指で送る。スクロールバーは出さない） */
.tp-rail {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tp-rail::-webkit-scrollbar { display: none; }
.tp-rail > * { flex: none; scroll-snap-align: start; }
/* 横に流す節の見出し行（作品・保護者の声で共通）。右に前後の矢印を置く */
.tp-rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  width: min(1120px, calc(100% - 80px));
  margin: 0 auto;
}
.tp-rail-nav { display: flex; flex: none; gap: 10px; }
.tp-rail-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  transition: opacity 0.15s ease;
}
.tp-rail-nav__btn:disabled { opacity: 0.35; cursor: default; }

/* -------------------------------------------------
   保護者の声（本文は管理画面の「保護者の声」）
   カードを横に流す（作品の節と同じ組み）。冒頭だけを見せ、
   「続きを読む」で全文を小窓（<dialog>）に出す。カードの高さは揃える。
------------------------------------------------- */
.tp-voice { padding: 24px 0 64px; background: var(--pale-green); }
.tp-voice__rail {
  align-items: stretch;
  gap: 20px;
  margin-top: 32px;
  padding: 0 40px 6px max(40px, calc((100% - 1120px) / 2));
  scroll-padding-left: max(40px, calc((100% - 1120px) / 2));
}
.tp-voice__card {
  display: flex;
  flex-direction: column;
  width: 360px;
  padding: 28px 28px 22px;
  border-radius: 24px;
  background: #fff;
}
/* 声の画像（管理画面でアップロードするイラストのアイコン。1000×700 の白地の中央に色の丸）から
   丸の内側を切り出す。丸の中心は横 49%・縦 50% あたり */
.tp-voice__avatar { position: relative; display: block; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: #d3e6d1; }
.tp-voice__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; transform: scale(1.5); }
.tp-voice__quote { margin: 18px 0 0; }
.tp-voice__quote p { margin: 0; font-size: 16px; line-height: 1.95; letter-spacing: 0.04em; }
/* 「続きを読む」はカードの下端に揃える */
.tp-voice__open {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-top: auto;
  padding: 12px 0 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--green-ink);
}
.tp-voice__open[hidden] { display: none; }
.tp-voice__open:hover { text-decoration: underline; text-underline-offset: 4px; }
.tp-voice__note {
  width: min(1120px, calc(100% - 80px));
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-soft);
}
/* 全文の小窓 */
.tp-voice__dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 60px -24px rgba(40, 44, 46, 0.55);
  overflow: auto;
  overscroll-behavior: contain;
}
.tp-voice__dialog::backdrop { background: rgba(40, 44, 46, 0.55); }
.tp-voice__dialog-inner { position: relative; padding: 32px 32px 34px; }
.tp-voice__avatar--lg { width: 76px; height: 76px; }
.tp-voice__dialog-text { margin: 18px 0 0; }
.tp-voice__dialog-text p { margin: 0; font-size: 16px; line-height: 2; letter-spacing: 0.04em; }
.tp-voice__dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--ink);
}
.tp-voice__dialog-close:hover { background: #d9ead7; }

/* -------------------------------------------------
   よくある質問（管理画面の FAQ。開閉は details）
------------------------------------------------- */
.tp-faq { padding: 40px 0 0; }
.tp-faq__list { display: grid; gap: 12px; margin-top: 44px; }
.tp-faq__item { border-radius: 18px; background: #fff; }
.tp-faq__item summary { display: flex; align-items: center; gap: 20px; padding: 20px 22px 20px 30px; cursor: pointer; list-style: none; }
.tp-faq__item summary::-webkit-details-marker { display: none; }
.tp-faq__q { flex: none; font-family: var(--font-en); font-size: 22px; line-height: 1; font-weight: 600; color: var(--blue-ink); }
.tp-faq__question { flex: 1; font-size: 17px; line-height: 1.7; font-weight: 700; letter-spacing: 0.04em; }
.tp-faq__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pale-blue);
  color: var(--blue-ink);
}
.tp-faq__icon svg { display: block; }
/* ＋の縦線を 90 度回して－にする（開閉の動きに合わせてなめらかに回す）。
   閉じる動きの間は open がまだ付いているので、js/main.js が付ける .is-closing で先に＋へ戻す */
.tp-faq__plus { transform-box: fill-box; transform-origin: center; transition: transform 0.3s ease; }
.tp-faq__item[open] .tp-faq__plus { transform: rotate(90deg); }
.tp-faq__item[open].is-closing .tp-faq__plus { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tp-faq__plus { transition: none; }
}
.tp-faq__answer { margin: 0; padding: 0 30px 26px 72px; font-size: 15.5px; line-height: 2; }

/* -------------------------------------------------
   Swimmyをもっと知る（生成AIに聞く）
------------------------------------------------- */
.tp-ai { padding: 72px 0 128px; }
.tp-ai__panel { display: flex; flex-direction: column; align-items: center; padding: 44px 32px 34px; border-radius: 24px; background: #fff; text-align: center; }
.tp-ai__lead { margin: 10px 0 0; font-size: 16px; line-height: 1.9; }
.tp-ai__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 26px; }
.tp-ai__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border: 2px solid var(--ai-color);
  border-radius: 999px;
  background: #fff;
  font-size: 14.5px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--ai-color);
}
.tp-ai__btn:hover { opacity: 0.85; }
.tp-ai__btn img { flex: none; width: 20px; height: 20px; }
.tp-ai__btn--chatgpt { --ai-color: #10a37f; }
.tp-ai__btn--gemini { --ai-color: #8e75b2; }
.tp-ai__btn--claude { --ai-color: #d97757; }
.tp-ai__btn--perplexity { --ai-color: #20808d; }
.tp-ai__note { margin: 22px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }

@media (max-width: 1023px) {
  .tp-container,
  .tp-container--narrow { max-width: none; padding: 0 var(--tp-gutter); }
  .tp-wave .tp-wave__pc { display: none; }
  .tp-wave .tp-wave__sp { display: block; }

  .tp-en { font-size: 13px; }
  .tp-en--lg { font-size: 19px; letter-spacing: 0.2em; }
  .tp-title { margin-top: 12px; font-size: 25px; line-height: 1.5; }
  .tp-rail-head { width: auto; margin: 0; padding: 0 var(--tp-gutter); }
  .tp-rail-nav { display: none; }

  /* 保護者の声：横スワイプ */
  .tp-voice { padding: 14px 0 36px; }
  .tp-voice__rail { gap: 12px; margin-top: 18px; padding: 0 var(--tp-gutter) 6px; scroll-padding: 0 var(--tp-gutter); }
  .tp-voice__card { width: 280px; padding: 20px 18px 14px; border-radius: 20px; }
  .tp-voice__avatar { width: 52px; height: 52px; }
  .tp-voice__quote { margin-top: 14px; }
  .tp-voice__quote p { font-size: 14.5px; line-height: 1.85; }
  .tp-voice__open { padding-top: 10px; font-size: 13px; }
  .tp-voice__note { width: auto; margin: 12px 0 0; padding: 0 var(--tp-gutter); font-size: 12px; line-height: 1.7; }
  .tp-voice__dialog-inner { padding: 26px 22px 26px; }
  .tp-voice__avatar--lg { width: 64px; height: 64px; }
  .tp-voice__dialog-text p { font-size: 15px; line-height: 1.95; }

  /* よくある質問 */
  .tp-faq { padding: 28px 0 0; }
  .tp-faq__list { gap: 10px; margin-top: 26px; }
  .tp-faq__item { border-radius: 16px; }
  .tp-faq__item summary { gap: 12px; padding: 14px 14px 14px 20px; }
  .tp-faq__q { font-size: 19px; }
  .tp-faq__question { font-size: 15px; line-height: 1.65; }
  .tp-faq__icon { width: 34px; height: 34px; }
  .tp-faq__icon svg { width: 12px; height: 12px; }
  .tp-faq__answer { padding: 0 20px 18px 50px; font-size: 14px; line-height: 1.9; }

  /* AI */
  .tp-ai { padding: 40px 0 64px; }
  .tp-ai__panel { padding: 30px 16px 22px; border-radius: 20px; }
  .tp-ai__lead { margin-top: 8px; font-size: 14px; line-height: 1.85; word-break: auto-phrase; }
  .tp-ai__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; margin-top: 18px; }
  .tp-ai__btn { gap: 6px; height: 46px; font-size: 13px; letter-spacing: 0; box-shadow: 0 2px 0 var(--ai-color); }
  .tp-ai__btn img { width: 16px; height: 16px; }
  .tp-ai__note { margin-top: 18px; font-size: 12px; word-break: auto-phrase; }
}