@charset "UTF-8";
/* ==========================================================================
   privacypolicy.css — プライバシーポリシー
   並び：見出し → 目次（PCは左に固定）→ 本文
   各ブロックの中で「ベース → 1024px以下 → 768px以下」
   ========================================================================== */

.phead__lead, .pitem p, .pitem li, .pdl dd { word-break: auto-phrase; }

/* ---------- 見出し ---------- */
.phead { padding: calc(var(--header-h) + clamp(24px, 4vw, 56px)) var(--m) clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--c-line); }
.phead__label { font-size: 12px; letter-spacing: .24em; color: var(--c-accent); }
.phead__title { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.phead__en { font-size: clamp(52px, 9vw, 140px); font-weight: 700; line-height: .88; letter-spacing: -.045em; }
.js .phead__en .char > span { transform: translateY(110%); transition: transform .85s var(--ease-out) calc(var(--i) * 28ms); }
.phead__en.is-inview .char > span { transform: none; }
.phead__ja { font-size: clamp(18px, 1.8vw, 24px); letter-spacing: .08em; }
.phead__lead { max-width: 46em; margin-top: clamp(24px, 3vw, 40px); font-size: 15px; line-height: 2.1; color: var(--c-sub); }

/* ---------- 目次＋本文 ---------- */
.policy { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 760px); justify-content: space-between; gap: clamp(32px, 6vw, 120px); padding: clamp(48px, 6vw, 88px) var(--m) var(--sec); }

.ptoc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.ptoc__cap { margin-bottom: 14px; font-size: 11px; letter-spacing: .24em; color: var(--c-mute); }
.ptoc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--c-line); }
.ptoc a { position: relative; display: flex; gap: 12px; padding: 7px 0 7px 18px; font-size: 13px; line-height: 1.6; color: var(--c-gray); text-decoration: none; transition: color .3s; }
.ptoc a span { flex: none; font-size: 11px; letter-spacing: .08em; color: var(--c-mute); font-variant-numeric: tabular-nums; transition: color .3s; }
/* 今読んでいる項目：左の線が黄色く伸びる */
.ptoc a::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--c-accent); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease-io); }
.ptoc a.is-current { color: var(--c-text); }
.ptoc a.is-current span { color: var(--c-accent); }
.ptoc a.is-current::before { transform: none; }
@media (hover: hover) {
  .ptoc a:hover { color: var(--c-text); }
}

.pbody { min-width: 0; }
.pitem { padding: clamp(32px, 4vw, 48px) 0; border-top: 1px solid var(--c-line); scroll-margin-top: calc(var(--header-h) + 16px); }
.pitem:first-child { padding-top: 0; border-top: 0; }
.pitem h2 { display: flex; align-items: baseline; gap: 16px; font-size: clamp(20px, 2vw, 26px); line-height: 1.5; }
.pitem__no { flex: none; font-size: 13px; letter-spacing: .1em; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.pitem > * + * { margin-top: 1.2em; }
.pitem p, .pitem li { font-size: 15px; line-height: 2.05; color: var(--c-sub); }
.pitem ul { padding: 0; list-style: none; }
.pitem li { position: relative; padding-left: 1.5em; }
.pitem li + li { margin-top: .3em; }
.pitem li::before { content: ""; position: absolute; left: .1em; top: 1em; width: .7em; height: 2px; background: var(--c-accent); }
.pitem a { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: .3em; }
.pitem a:hover { color: var(--c-accent); }

.pdl { border-top: 1px solid var(--c-line); }
.pdl > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.pdl dt { font-size: 13px; letter-spacing: .06em; color: var(--c-gray); }
.pdl dd { font-size: 15px; line-height: 1.95; color: var(--c-sub); }
.pdl--contact > div { grid-template-columns: 120px minmax(0, 1fr); }
.pdl dd a { text-decoration: none; }

.ptable { overflow-x: auto; border: 1px solid var(--c-line); }
.ptable table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.8; }
.ptable th, .ptable td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable th { font-size: 12px; font-weight: 400; letter-spacing: .08em; color: var(--c-mute); background: var(--c-bg-2); }
.ptable td { color: var(--c-sub); }
.ptable td:first-child { color: var(--c-text); font-weight: 700; }
.ptable small { font-size: 12px; font-weight: 400; color: var(--c-mute); }

/* 項目が画面に入ると番号から順に現れる */
.js .pitem h2, .js .pitem > :not(h2) { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .8s var(--ease-out); }
.js .pitem > :not(h2) { transition-delay: .12s; }
.pitem.is-inview h2, .pitem.is-inview > :not(h2) { opacity: 1; transform: none; }

.pdate { margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--c-line); font-size: 13px; line-height: 2; color: var(--c-mute); text-align: right; }

@media (max-width: 1024px) {
  .policy { grid-template-columns: minmax(0, 1fr); }
  .ptoc { position: static; }
  .ptoc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; border-top: 1px solid var(--c-line); }
  .ptoc li { border-bottom: 1px solid var(--c-line); }
  .ptoc a { padding: 12px 8px; }
  .ptoc a::before { display: none; }
}
@media (max-width: 768px) {
  .phead__lead br { display: none; }
  .ptoc ol { grid-template-columns: minmax(0, 1fr); }
  .pdl > div, .pdl--contact > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}