/* ============================================================
   Bible Zion — PraiseScore と同型 UI
   基準黄 × スレート紺 × クール生成り
   ============================================================ */

/* ─── 0. Tokens ─────────────────────────────────────────── */
:root {
  --c-navy: #121a26;
  --c-navy-deep: #0a0f17;
  --c-white: #f7f9fc;
  --c-bg-soft: #edf2f9;
  --c-yellow: #e8b400;
  --c-yellow-soft: #fff3c2;
  --c-yellow-line: #e0d48a;
  --c-text: #141a22;
  --c-muted: #5c6778;
  --c-line: #dce4ee;

  --cut: 5.5vw;            /* 斜めカットの高さ */
  --cut-sm: 2.4vw;         /* マルキー用小カット */

  --font-main: 'Inter', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC',
    ui-sans-serif, system-ui, -apple-system, sans-serif;

  --nav-h: 80px;
  --langbar-h: 44px;
  --header-h: calc(var(--nav-h) + var(--langbar-h));
  --page-max: 1200px;
  --radius: 6px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 14px 34px rgba(18, 26, 38, 0.10);
  --shadow-lift: 0 20px 44px rgba(18, 26, 38, 0.16);

  /* ホーム（terasu）ボタン・スクロール用 */
  --c-text-sub: #050505;
  --radius-btn: 3rem;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* セクション番号（大きな 01〜08） */
  --idx-stroke-dark: rgba(232, 180, 0, 0.55);
  --idx-fill-dark: rgba(232, 180, 0, 0.12);
  --idx-stroke-light: rgba(18, 26, 38, 0.28);
  --idx-fill-light: rgba(18, 26, 38, 0.06);
}

/* ─── 1. Reset / Base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  background: var(--c-navy);
}

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #ffffff;                    /* デフォルトは紺の上＝白 */
  background: var(--c-navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

h1, h2, h3, h4, p, ul, ol, li { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

::selection { background: var(--c-yellow); color: var(--c-navy); }

:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: 8px 15px; background: var(--c-yellow); color: var(--c-navy);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.skip-link:focus { left: 15px; top: 15px; }

/* ─── 2. タイポ・共通パーツ ─────────────────────────────── */
.ps-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* 黄色の斜めスラッシュ（ラベルの左に付く躍動感アクセント） */
.ps-label--slash {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  opacity: 1;
}
.ps-label--slash::before {
  content: "";
  width: 38px;
  height: 9px;
  background: var(--c-yellow);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  flex-shrink: 0;
}

.ps-display {
  font-weight: 700;
  font-size: clamp(38px, 6.6vw, 84px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.ps-h2 {
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* ボタン（唯一の強CTA＝黄） */
.ps-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-navy);
  background: var(--c-yellow);
  border: 2px solid var(--c-yellow);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
              background 0.25s, color 0.25s;
}
.ps-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(232, 180, 0, 0.38);
}
.ps-pill--lg { padding: 16px 34px; font-size: 15px; }
.ps-pill--invert {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #ffffff;
}
.ps-pill--invert:hover { box-shadow: 0 12px 26px rgba(28, 22, 8, 0.4); }

/* ゴーストリンク（副CTA） */
.ps-ghost-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 2px solid transparent;
  border-radius: 4px;
  transition: border-color 0.3s var(--ease-out);
}
.ps-ghost-link .ps-arrow { color: var(--c-yellow); transition: transform 0.3s var(--ease-out); }
.ps-ghost-link:hover { border-bottom-color: currentColor; }
.ps-ghost-link:hover .ps-arrow { transform: translateX(4px); }

/* セクション導入文 */
.ps-section-lead {
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.78;
  max-width: 62ch;
  margin-bottom: 46px;
}

/* ─── 3. セクション帯（斜めカット） ─────────────────────── */
.ps-section {
  position: relative;
  padding: 119px 0;
}
/* 白い帯：上下を斜めにカット（背後の紺が見える） */
.ps-section--band {
  background: var(--c-white);
  color: var(--c-text);
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut)));
  padding: calc(var(--cut) + 90px) 0;
}
/* 紺セクションには薄い斜線テクスチャ（躍動感） */
.ps-hero::after,
.ps-section:not(.ps-section--band)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    -58deg,
    transparent 0 26px,
    rgba(255, 255, 255, 0.03) 26px 27px
  );
}

.ps-container {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: 30px;
}

.ps-section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 56px;
}
.ps-section__label { margin-bottom: 19px; }
.ps-section__index {
  font-size: clamp(76px, 10vw, 150px);
  line-height: 0.78;
  font-weight: 700;
  color: var(--idx-fill-dark);
  -webkit-text-stroke: 2px var(--idx-stroke-dark);
  user-select: none;
  flex-shrink: 0;
}
.ps-section--band .ps-section__index {
  color: var(--idx-fill-light);
  -webkit-text-stroke: 2px var(--idx-stroke-light);
}

/* ─── 4. ヘッダー ───────────────────────────────────────── */
.ps-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: rgba(10, 15, 23, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.ps-head.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  background: rgba(10, 15, 23, 0.96);
}
.ps-head__inner {
  max-width: var(--page-max);
  height: var(--nav-h);
  width: 100%;
  margin-inline: auto;
  padding-inline: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ps-wordmark { line-height: 1.1; display: inline-flex; flex-direction: column; gap: 3px; }
.ps-wordmark__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ps-wordmark__by {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-yellow);
}

.bz-langbar {
  height: var(--langbar-h);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.bz-langbar__inner {
  max-width: var(--page-max);
  height: 100%;
  margin-inline: auto;
  padding-inline: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.bz-langbar__btn {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.78);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.bz-langbar__btn:hover {
  color: #fff;
  border-color: var(--c-yellow);
}
.bz-langbar__btn.is-active {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: var(--c-navy);
}

.ps-head__nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 28px;
}
.ps-head__links {
  display: flex;
  align-items: center;
  gap: 22px;
}
.ps-head__links a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  padding: 5px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s, color 0.25s;
}
.ps-head__links a:hover { color: #fff; border-bottom-color: var(--c-yellow); }

.ps-langs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ps-langs a {
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  padding: 5px 0;
  transition: color 0.25s;
}
.ps-langs a:hover { color: #fff; }
.ps-langs a.is-active { color: var(--c-yellow); border-bottom: 2px solid var(--c-yellow); }
.ps-langs .ps-langs__sep { color: rgba(255, 255, 255, 0.25); user-select: none; }

.ps-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer; padding: 0;
}
.ps-burger span {
  display: block; width: 26px; height: 2px;
  background: #fff; margin-inline: auto;
  transition: transform 0.3s var(--ease-out);
}

/* ─── 5. メニューオーバーレイ ───────────────────────────── */
.ps-menu {
  position: fixed; inset: 0; z-index: 1500;
  background: var(--c-navy-deep);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 30px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}
.ps-menu.is-open { opacity: 1; visibility: visible; }
.ps-menu__top { display: flex; justify-content: space-between; align-items: center; }
.ps-menu__close {
  background: none; border: none; font-size: 36px; line-height: 1;
  color: #fff; cursor: pointer; padding: 5px;
}
.ps-menu__links { display: flex; flex-direction: column; gap: 18px; }
.ps-menu__links a {
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ps-menu__idx {
  font-size: 12px;
  letter-spacing: 0.09em;
  color: var(--c-yellow);
  vertical-align: super;
  margin-right: 8px;
}
.ps-menu__foot { display: flex; flex-direction: column; gap: 19px; }
body.menu-open { overflow: hidden; }

/* ─── 6. ヒーロー ───────────────────────────────────────── */
.ps-hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 76px);
  padding-bottom: 90px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* 大きな黄色スラッシュ（右肩） */
.ps-hero::before {
  content: "";
  position: absolute;
  top: -12%;
  right: -14%;
  width: 46vw;
  height: 130%;
  background: linear-gradient(160deg, rgba(232, 180, 0, 0.22), rgba(232, 180, 0, 0.04) 60%);
  clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
  pointer-events: none;
}
.ps-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: 30px;
}
.ps-hero__label { margin-bottom: 30px; }
.ps-hero__title { max-width: 20ch; margin-bottom: 30px; }
.ps-hero__sub {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  max-width: 52ch;
  margin-bottom: 46px;
}
.ps-hero__actions {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.ps-hero__meta {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ps-hero__meta li + li::before {
  content: "/";
  margin-right: 15px;
  color: var(--c-yellow);
}

.ps-scroll {
  position: absolute;
  right: 30px; bottom: 30px;
  z-index: 2;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: opacity 0.5s;
}
.ps-scroll__dot { color: var(--c-yellow); animation: psScrollDrop 1.8s var(--ease-out) infinite; }
.ps-scroll.is-hidden { opacity: 0; }
@keyframes psScrollDrop {
  0% { transform: translateY(-3px); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(5px); opacity: 0; }
}

/* ─── 7. マルキー（帯と文字を同じ角度で一体に傾ける） ─ */
.ps-marquee {
  position: relative;
  overflow: hidden;
  padding: 22px 0 34px;
  user-select: none;
}
.ps-marquee__ribbon {
  background: var(--c-yellow);
  color: var(--c-navy);
  padding: 16px 0;
  transform: rotate(-1.7deg) scale(1.08);
  transform-origin: 50% 50%;
  will-change: transform;
}
.ps-marquee__track {
  display: flex;
  align-items: center;
  gap: 46px;
  width: max-content;
  animation: psMarquee 42s linear infinite;
  will-change: transform;
}
.ps-marquee__track span {
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ps-marquee__sep { opacity: 0.4; }
@keyframes psMarquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ─── 8. 製品 (00) ──────────────────────────────────────── */
.ps-product { margin-bottom: 76px; }
.ps-product__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
  max-width: 68ch;
  margin-top: 19px;
}

/* 差別化 3カード（白帯の上） */
.ps-diff { border-top: 2px solid var(--c-line); padding-top: 46px; }
.ps-diff__label { margin-bottom: 15px; color: var(--c-muted); opacity: 1; }
.ps-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
}
.ps-diff-cell {
  background: var(--c-white);
  color: var(--c-text);
  border: 1px solid var(--c-line);
  border-top: 6px solid var(--c-yellow);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 28px 26px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ps-diff-cell:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.ps-diff-cell__num {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--c-yellow);
  display: block; margin-bottom: 15px;
}
.ps-diff-cell__title {
  font-size: 19px; font-weight: 700; line-height: 1.35;
  margin-bottom: 10px;
  color: var(--c-text);
}
.ps-diff-cell__desc { font-size: 14px; line-height: 1.7; color: var(--c-muted); }
.ps-diff-cell__note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-muted);
  opacity: 0.9;
}

.ps-diff-devices {
  margin-top: 30px;
  padding: 18px 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
  max-width: 72ch;
}
.ps-diff-devices__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.ps-diff-devices__text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-muted);
}

/* ─── 9. こんな方に (01) — 紺の上に白カード ────────────── */
.ps-audience {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ps-aud-cell {
  background: var(--c-white);
  color: var(--c-text);
  border-radius: var(--radius);
  border-top: 6px solid var(--c-yellow);
  box-shadow: var(--shadow-card);
  padding: 30px 28px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ps-aud-cell:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.ps-aud-cell__num {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--c-yellow);
  display: block; margin-bottom: 15px;
}
.ps-aud-cell__title { font-size: 19px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; }
.ps-aud-cell__desc { font-size: 14px; line-height: 1.7; color: var(--c-muted); }

/* ─── 10. できること (02) — 参考写真風カード ───────────── */
.ps-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ps-feat-cell {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-top: 6px solid var(--c-yellow);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 28px 26px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ps-feat-cell:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.ps-feat-cell__num {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--c-yellow);
}
.ps-feat-cell__title { font-size: 18px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.ps-feat-cell__desc { font-size: 14px; line-height: 1.7; color: var(--c-muted); white-space: pre-line; }

/* ─── 11. ステップ (03) — 紺の上に黄数字 ───────────────── */
.ps-steps { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.ps-step {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 30px;
  padding: 38px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.3s var(--ease-out);
}
.ps-step:hover { background: rgba(255, 255, 255, 0.04); }
.ps-step__num {
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  color: var(--c-yellow);
}
.ps-step__title { font-size: 20px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.ps-step__desc {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
  max-width: 62ch;
}
.ps-step__arrow {
  font-size: 26px;
  color: var(--c-yellow);
  transition: transform 0.3s var(--ease-out);
}
.ps-step:hover .ps-step__arrow { transform: translateX(6px); }

/* ─── 12. 団体 vs 個人 (04) ─────────────────────────────── */
.ps-important {
  display: flex;
  align-items: baseline;
  gap: 19px;
  background: var(--c-navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 19px 26px;
  margin-bottom: 40px;
}
.ps-important__tag {
  background: var(--c-yellow);
  color: var(--c-navy);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  white-space: nowrap;
}
.ps-important__text { font-size: 15px; line-height: 1.6; }

/* テーブル共通 */
.ps-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: var(--c-white);
}
.ps-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--c-text);
}
.ps-table th, .ps-table td {
  padding: 16px 19px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
  line-height: 1.55;
}
.ps-table tbody tr:last-child th,
.ps-table tbody tr:last-child td { border-bottom: none; }
.ps-table thead th {
  background: var(--c-navy);
  color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* 強調列＝黄色 */
.ps-table thead th.ps-table__hl { background: var(--c-yellow); color: var(--c-navy); }
.ps-table tbody th { font-weight: 700; white-space: nowrap; color: var(--c-muted); }
.ps-table td.ps-table__hl-col { background: var(--c-yellow-soft); }

/* 警告ボックス */
.ps-warning {
  margin-top: 40px;
  background: var(--c-yellow-soft);
  border: 1px solid var(--c-yellow-line);
  border-left: 8px solid var(--c-yellow);
  border-radius: var(--radius);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}
.ps-warning__sign {
  width: 46px; height: 46px;
  background: var(--c-yellow);
  color: var(--c-navy);
  font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.ps-warning__label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  display: block; margin-bottom: 8px;
  color: var(--c-text);
}
.ps-warning__text { font-size: 15px; line-height: 1.7; }

/* チェックリスト */
.ps-checklist-box { margin-top: 30px; }
.ps-checklist-box h3 {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  margin-bottom: 19px;
  color: var(--c-muted);
}
.ps-checklist { display: flex; flex-direction: column; gap: 14px; }
.ps-checklist li {
  position: relative;
  padding-left: 34px;
  font-size: 15px;
  line-height: 1.6;
}
.ps-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 2px;
  width: 18px; height: 18px;
  background: var(--c-yellow);
  color: var(--c-navy);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
}

/* ─── 13. 料金 (05) ─────────────────────────────────────── */
.ps-pricing-sub {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 5px 12px;
  margin-bottom: 40px;
}

/* プランサマリーカード（紺の上に白） */
.ps-plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}
.ps-plan-card {
  background: var(--c-white);
  color: var(--c-text);
  border-radius: var(--radius);
  border-top: 6px solid var(--c-line);
  box-shadow: var(--shadow-card);
  padding: 30px 28px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ps-plan-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.ps-plan-card--pro { border-top-color: var(--c-yellow); }
.ps-plan-card__name {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.ps-plan-card--pro .ps-plan-card__name { color: var(--c-navy); }
.ps-plan-card__price {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.1;
}
.ps-plan-card__note { font-size: 11px; color: var(--c-muted); font-weight: 400; }
.ps-plan-card__desc { font-size: 14px; line-height: 1.65; color: var(--c-muted); margin-top: 6px; }

/* 無料ハイライト（紺の上） */
.ps-free {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 60px;
}
.ps-free li {
  border-top: 2px solid rgba(255, 255, 255, 0.25);
  padding-top: 15px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}
.ps-free li::before {
  content: "✓";
  display: block;
  color: var(--c-yellow);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* 詳細料金表の最初の行（月額） */
.ps-pricing-table tbody tr:first-child td {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
}

.ps-pricing-note {
  display: block;
  margin-top: 19px;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}

.ps-addons { margin-top: 40px; }
.ps-addons h3 {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 15px;
}
.ps-addons ul { display: flex; flex-direction: column; gap: 6px; }
.ps-addons li {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  padding-left: 19px;
  position: relative;
}
.ps-addons li::before { content: "+"; position: absolute; left: 0; color: var(--c-yellow); font-weight: 700; }

.ps-pricing-cta {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 19px;
}
.ps-pricing-cta p {
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
  max-width: 60ch;
}

/* ─── 14. 推奨端末 (06) ─────────────────────────────────── */
.ps-devices { border-top: 2px solid var(--c-line); }
.ps-devices li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 19px;
  padding: 19px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 17px;
  font-weight: 500;
  transition: padding-left 0.3s var(--ease-out);
}
.ps-devices li:hover { padding-left: 15px; }
.ps-devices .ps-arrow { color: var(--c-yellow); font-weight: 700; flex-shrink: 0; }

/* ─── 15. FAQ (07) — 紺の上に白カード ──────────────────── */
.ps-faq { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.ps-faq-item {
  background: var(--c-white);
  color: var(--c-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ps-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.25s;
}
.ps-faq-item summary:hover { background: var(--c-bg-soft); }
.ps-faq-item__mark {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: var(--c-yellow);
  color: var(--c-navy);
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  transition: transform 0.3s var(--ease-out);
}
.ps-faq-item[open] summary .ps-faq-item__mark { transform: rotate(45deg); }
.ps-faq-item__a {
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 26px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-muted);
  border-top: 1px solid transparent;
  transition:
    height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
  will-change: height, opacity;
}
.ps-faq-item__a.bz-faq-panel--open {
  opacity: 1;
  border-top-color: var(--c-line);
}
.ps-faq-item__a p {
  padding-top: 18px;
  padding-bottom: 22px;
}
.ps-faq-item__a[data-i18n-html] {
  padding-top: 18px;
  padding-bottom: 22px;
}
.ps-faq-item__a[data-i18n-html] p:first-child { margin-top: 0; }
.ps-faq-item__a[data-i18n-html] p:last-child { margin-bottom: 0; }

/* ─── 16. 最終CTA（黄帯）＋フッター（紺） ──────────────── */
.ps-final {
  position: relative;
  background: var(--c-yellow);
  color: var(--c-navy);
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%);
  padding: calc(var(--cut) + 90px) 30px 100px;
  overflow: hidden;
}
.ps-final .ps-container,
.ps-final__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.ps-final .ps-label { color: var(--c-navy); opacity: 0.7; }
.ps-final .ps-label--slash::before { background: var(--c-navy); }
.ps-final__title {
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.ps-final__sub { font-size: 17px; color: rgba(18, 26, 38, 0.75); }

.ps-foot {
  background: var(--c-navy-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ps-foot__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 19px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ps-foot__links { display: flex; gap: 19px; flex-wrap: wrap; }
.ps-foot__links a { transition: color 0.25s; }
.ps-foot__links a:hover { color: var(--c-yellow); }

/* ─── 17. Reveal（ホーム terasu と同じ） ───────────────── */
.rv {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.rv.in {
  opacity: 1;
  transform: none;
}

/* ─── 17b. ボタン c-btn-blob（ホームと同じ goo） ───────── */
.goo-filter { position: absolute; width: 0; height: 0; }

.c-btn-blob {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 22rem;
  min-height: 0;
  height: auto;
  padding: 1.05rem 2.75rem;
  border: 1.5px solid var(--c-text-sub);
  border-radius: 999px;
  background: #fff;
  transform: translateZ(0);
  backface-visibility: hidden;
  font-size: clamp(15px, 1.5rem, 18px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 2px 0 rgba(5, 5, 5, 0.06);
  transition: color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  text-decoration: none;
  color: var(--c-text-sub);
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}
.c-btn-blob:hover {
  opacity: 1;
  color: var(--c-navy);
  box-shadow: 0 4px 18px rgba(232, 180, 0, 0.35);
}
.c-btn-blob__inner {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
}
.c-btn-blob__blobs {
  position: relative;
  display: block;
  height: 100%;
  filter: url("#goo");
}
.c-btn-blob__blobs span {
  position: absolute;
  top: 0;
  width: 25%;
  height: 100%;
  background: var(--c-yellow);
  border-radius: 100%;
  transform: translate3d(0, 150%, 0) scale(1.7);
  transition: transform 0.45s var(--ease);
}
.c-btn-blob__blobs span:nth-child(1) { left: 0; transition-delay: 0s; }
.c-btn-blob__blobs span:nth-child(2) { left: 25%; transition-delay: 0.06s; }
.c-btn-blob__blobs span:nth-child(3) { left: 50%; transition-delay: 0.12s; }
.c-btn-blob__blobs span:nth-child(4) { left: 75%; transition-delay: 0.18s; }
.c-btn-blob:hover .c-btn-blob__blobs span {
  transform: translate3d(0, 0, 0) scale(1.7);
}

.ps-head .c-btn-blob {
  min-width: auto;
  min-height: 0;
  height: auto;
  padding: 0.62rem 1.5rem;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  border-width: 1.5px;
  flex-shrink: 0;
}
.ps-menu__foot .c-btn-blob {
  width: 100%;
  max-width: 28rem;
}
.bz-mid-cta .c-btn-blob,
.ps-hero__actions .c-btn-blob,
.ps-final .c-btn-blob {
  min-width: min(22rem, 100%);
  max-width: 100%;
}
.ps-hero__actions .c-btn-blob {
  margin-block: 6px;
}
.bz-mid-cta .c-btn-blob {
  margin-block: 4px;
}

/* ─── 18. レスポンシブ ──────────────────────────────────── */
@media (max-width: 1024px) {
  .ps-head__links { display: none; }
  .ps-audience, .ps-feat-grid, .ps-diff-grid { grid-template-columns: 1fr 1fr; }
  .ps-plan-cards { grid-template-columns: 1fr 1fr; }
  .ps-plan-card--pro { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  :root { --nav-h: 62px; --langbar-h: 42px; --cut: 8vw; }

  .ps-head__nav .ps-langs,
  .ps-head__nav .c-btn-blob { display: none; }
  .ps-burger { display: flex; }

  .ps-hero { min-height: auto; padding-bottom: 110px; }
  .ps-hero::before { width: 90vw; right: -30%; }
  .ps-hero__title { max-width: none; }
  .ps-hero__actions { gap: 19px; margin-bottom: 40px; }
  .ps-scroll { display: none; }

  .ps-section { padding: 76px 0; }
  .ps-section--band { padding: calc(var(--cut) + 66px) 0; }
  .ps-section__head { margin-bottom: 40px; }
  .ps-section__index { font-size: 58px; }

  .ps-audience, .ps-feat-grid, .ps-diff-grid,
  .ps-plan-cards, .ps-free { grid-template-columns: 1fr; gap: 19px; }
  .ps-plan-card--pro { grid-column: auto; }

  .ps-step { grid-template-columns: 60px 1fr; gap: 19px; padding: 28px 0; }
  .ps-step__num { font-size: 40px; }
  .ps-step__arrow { display: none; }

  .ps-important { flex-direction: column; gap: 10px; align-items: flex-start; }
  .ps-warning { grid-template-columns: 1fr; gap: 15px; }

  .ps-final { padding: calc(var(--cut) + 70px) 19px 80px; }

  .ps-head__inner, .ps-container, .ps-hero__inner, .bz-langbar__inner { padding-inline: 19px; }
  .bz-langbar__inner { justify-content: center; gap: 4px; }
  .bz-langbar__btn { font-size: 10px; padding: 6px 8px; }
  .ps-foot__inner { padding: 19px; }
}

/* ─── 19. Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ps-marquee__track { animation: none; }
  .ps-scroll__dot { animation: none; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* ─── 20. Bible Zion 追加パーツ ─────────────────────────── */
.bz-hero .ps-hero__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bz-hero .ps-hero__title { max-width: 18ch; margin-bottom: 18px; }
.bz-catch {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.65;
  max-width: 32ch;
  margin-bottom: 16px;
}
.ps-h2--break { text-wrap: balance; }
.bz-hero .ps-hero__sub { max-width: 48ch; }
.bz-hero .ps-hero__actions { justify-content: center; flex-direction: column; align-items: center; gap: 18px; }
.bz-hero .ps-hero__meta { justify-content: center; }
.bz-hero .ps-wordmark { margin-bottom: 22px; }

/* App Store 風：同じ高さの画面を横スクロール */
.bz-shots {
  padding: 28px 0 20px;
}
.bz-shots__head {
  max-width: var(--page-max);
  margin: 0 auto 22px;
  padding-inline: 30px;
}
.bz-shots__scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 30px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-yellow) transparent;
}
.bz-shots__card {
  flex: 0 0 auto;
  width: min(72vw, 760px);
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0e151c;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.bz-shots__card img,
.bz-shots__card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .bz-shots__head,
  .bz-shots__scroll { padding-inline: 19px; }
  .bz-shots__card { width: min(88vw, 760px); border-radius: 10px; }
}
.bz-cta-note {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
}
.bz-hero .bz-cta-note { margin-top: 0; }
.bz-sublinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.bz-sublinks a { border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 2px; }
.bz-sublinks a:hover { border-bottom-color: var(--c-yellow); color: var(--c-yellow); }
.bz-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}
.bz-trust a { color: inherit; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.bz-trust a:hover { color: var(--c-yellow); }

.bz-mid-cta {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.ps-section--band .bz-cta-note,
.ps-section--band .bz-sublinks a { color: var(--c-muted); }
.ps-section--band .bz-sublinks a { border-bottom-color: var(--c-line); }
.ps-section--band .bz-trust { color: var(--c-muted); }
.ps-section--band .bz-trust a { border-bottom-color: var(--c-line); }

.bz-audience-list { display: flex; flex-direction: column; gap: 16px; max-width: 72ch; }
.bz-audience-list li {
  position: relative;
  padding-left: 38px;
  font-size: 17px;
  line-height: 1.65;
}
.bz-audience-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 3px;
  width: 22px; height: 22px;
  background: var(--c-yellow);
  color: var(--c-navy);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
}

.bz-scripture {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 36px 32px;
}
.bz-scripture h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 28px 0 12px;
}
.bz-scripture h3:first-of-type { margin-top: 0; }
.bz-scripture p, .bz-scripture li {
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-muted);
}
.bz-scripture ul { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bz-scripture__import-list li { display: flex; flex-direction: column; gap: 4px; }
.bz-scripture__import-sub { font-size: 14px; color: var(--c-muted); line-height: 1.55; }
.bz-scripture__footnotes { margin-top: 12px; }
.bz-scripture__footnotes li::before { content: none; }
.bz-scripture__footnotes li { padding-left: 0; font-size: 14px; color: var(--c-muted); }
.bz-faq-format { margin: 12px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; }
.bz-scripture li { padding-left: 16px; position: relative; }
.bz-scripture li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--c-yellow);
  font-weight: 700;
}
.bz-scripture__note {
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.75;
  font-weight: 700;
  color: var(--c-text);
}

.bz-pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 36px 0 40px;
}
.bz-pay-col {
  background: var(--c-white);
  color: var(--c-text);
  border-top: 6px solid var(--c-yellow);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
}
.bz-pay-col h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.bz-pay-col ul { display: flex; flex-direction: column; gap: 10px; }
.bz-pay-col li {
  font-size: 15px;
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
}
.bz-pay-col li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--c-yellow);
  font-weight: 700;
}

.bz-notice {
  background: var(--c-yellow-soft);
  border: 1px solid var(--c-yellow-line);
  border-radius: var(--radius);
  padding: 28px 30px;
}
.bz-notice__tag {
  display: inline-block;
  background: var(--c-yellow);
  color: var(--c-navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.bz-notice ul { display: flex; flex-direction: column; gap: 12px; }
.bz-notice li {
  font-size: 15px;
  line-height: 1.7;
  padding-left: 16px;
  position: relative;
}
.bz-notice li::before {
  content: "·";
  position: absolute;
  left: 0;
  font-weight: 700;
}

.bz-recover {
  margin-top: 36px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  padding: 22px 26px;
  max-width: 72ch;
}
.bz-recover h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  color: var(--c-yellow);
}
.bz-recover p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
}

.ps-final .bz-sublinks a { border-bottom-color: rgba(18, 26, 38, 0.35); color: var(--c-navy); }
.ps-final .bz-sublinks a:hover { border-bottom-color: var(--c-navy); }
.ps-final .bz-trust { color: rgba(18, 26, 38, 0.55); }
.ps-final .bz-trust a { border-bottom-color: rgba(18, 26, 38, 0.3); color: inherit; }
.ps-final .bz-cta-note { color: rgba(18, 26, 38, 0.6); }
.ps-final__inner { align-items: center; text-align: center; }
.ps-foot__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
}

@media (max-width: 768px) {
  .bz-pay-grid { grid-template-columns: 1fr; }
}
