/* 個人情報の取り扱い（/privacy/・/en/privacy/）。スマホ基準。900px 以上でヒーローをPC組みに、1100px 以上で目次を左に置く。 */

/* ============================================================ 01 ページ見出し */
.pv-hero { padding-top: var(--header-h); }

.pv-hero .wrap { padding-block: 36px 48px; }

.pv-hero__crumb {
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0.1em;
  color: var(--cream-sub);
}

.pv-hero__crumb a:hover { color: var(--cream-text); text-decoration: underline; text-underline-offset: 4px; }

.pv-hero__label {
  margin-top: 24px;
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.02em;
  color: var(--copper-light);
}

.pv-hero__h1 {
  margin-top: 8px;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 43px;
  letter-spacing: 0.04em;
  color: var(--cream-text);
}

.pv-hero__lead {
  margin-top: 16px;
  font-size: 14px;
  line-height: 27px;
  letter-spacing: 0.02em;
  color: var(--cream-sub);
}

@media (min-width: 900px) {
  .pv-hero .wrap { padding-block: 80px 96px; }
  .pv-hero__crumb { font-size: 12px; line-height: 19.2px; }
  .pv-hero__label { margin-top: 32px; font-size: 20px; line-height: 28px; }
  .pv-hero__h1 { margin-top: 12px; font-size: 46px; line-height: 69px; }
  .pv-hero__lead { max-width: 640px; margin-top: 24px; font-size: 16px; line-height: 32px; }
}

/* ============================================================ 02 本文 */
.pv-body { background: var(--paper); }

.pv-body__inner { padding-block: 40px 64px; }

/* 目次 */
.pv-toc {
  margin-bottom: 16px;
  padding: 20px;
  background: var(--brown-light);
}

.pv-toc__h {
  font-weight: 500;
  font-size: 12px;
  line-height: 19px;
  letter-spacing: 0.1em;
  color: var(--plum-soft);
}

.pv-toc__list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.pv-toc__link {
  display: flex;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.pv-toc__link:hover .pv-toc__t { text-decoration: underline; text-underline-offset: 4px; }

.pv-toc__no {
  flex: none;
  width: 20px;
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  color: var(--copper);
}

/* 各項目 */
.pv-sec {
  padding-block: 24px;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 16px;
}

.pv-sec__h {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pv-sec__no {
  flex: none;
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: var(--copper);
}

.pv-sec__t {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0.04em;
  color: var(--plum);
}

.pv-sec__p {
  margin-top: 10px;
  font-weight: 300;
  font-size: 14px;
  line-height: 27px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.pv-date {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .pv-sec { padding-block: 32px; }
  .pv-sec__h { gap: 16px; }
  .pv-sec__no { font-size: 22px; line-height: 28.6px; }
  .pv-sec__t { font-size: 22px; line-height: 33px; }
  .pv-sec__p { margin-top: 12px; font-size: 15px; line-height: 30px; }
  .pv-date { padding-top: 32px; font-size: 13px; line-height: 20.8px; }
}

@media (min-width: 1100px) {
  .pv-body__inner {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    padding-block: 112px 128px;
  }

  .pv-toc {
    position: sticky;
    top: 24px;
    flex: none;
    width: 300px;
    margin-bottom: 0;
    padding: 28px;
  }

  .pv-toc__h { font-size: 13px; line-height: 20.8px; }
  .pv-toc__list { gap: 10px; margin-top: 10px; }
  .pv-toc__link { gap: 12px; font-size: 14px; line-height: 23.8px; }
  .pv-toc__no { width: 22px; }

  .pv-main { flex: 1 1 0; min-width: 0; }
}

/* ============================================================ 英語版 */
html[lang="en"] .pv-hero__crumb { letter-spacing: 0.06em; }
html[lang="en"] .pv-hero__h1 { font-family: var(--ff-en); font-weight: 400; font-size: 28px; line-height: 35px; letter-spacing: 0; }
html[lang="en"] .pv-hero__lead,
html[lang="en"] .pv-toc__link,
html[lang="en"] .pv-sec__p { letter-spacing: 0; }
html[lang="en"] .pv-toc__h,
html[lang="en"] .pv-date { letter-spacing: 0; }
html[lang="en"] .pv-sec__t { font-family: var(--ff-en); font-weight: 400; font-size: 18px; line-height: 25.2px; letter-spacing: 0; }

@media (min-width: 900px) {
  html[lang="en"] .pv-hero__h1 { font-size: 46px; line-height: 59.8px; }
  html[lang="en"] .pv-sec__t { font-size: 22px; line-height: 33px; }
  html[lang="en"] .pv-sec__p { line-height: 27px; }
  html[lang="en"] .pv-date { letter-spacing: 0.04em; }
}

@media (min-width: 1100px) {
  html[lang="en"] .pv-toc__h { letter-spacing: 0.1em; }
}