/* 記事アーカイブと記事ページ。3カラムはサービスと同じ。
   投稿のタイトル・本文・パーマリンクに載せ替えられる形。 */

.page-column .p-sv {
  height: 100dvh;
  overflow: hidden;
}

.page-column .p-sv__scale,
.page-column .p-sv__col--1,
.page-column .p-sv__col--2,
.page-column .p-sv__col--3 {
  height: 100%;
}

.page-column .p-sv__col--1,
.page-column .p-sv__col--3 {
  position: relative;
}

.page-column .p-sv__col--2 {
  padding: 0;
  overflow: hidden;
  background: #e9f0f4;
}

.page-column--archive .p-col__sky,
.page-column--archive .p-col__planet {
  position: absolute;
  height: 100%;
  margin-bottom: 0;
}

.page-column--archive .p-col__stage {
  height: 100%;
  overflow: hidden;
}

.page-column--archive .p-col__scroll {
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page-column--archive .p-col__scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.p-col__lead {
  position: absolute;
  top: 31.39%;
  left: 28.08%;
  width: 43.82%;
  margin: 0;
  color: #4c5e6f;
  font-size: calc(14 * var(--u));
  line-height: calc(35.07 * var(--u));
  text-align: center;
}

.p-col__lead p {
  margin: 0;
  color: #4c5e6f;
  white-space: nowrap;
}

.p-col__lead p + p {
  margin-top: calc(35.07 * var(--u));
}

.p-col__title {
  position: absolute;
  top: 52.53%;
  left: 8%;
  right: 8%;
  margin: 0;
  color: #4c5e6f;
  font-size: calc(15.27 * var(--u));
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.p-col__stage {
  position: relative;
  min-height: 100%;
  overflow: visible;
}

.p-col__sky,
.p-col__planet {
  position: sticky;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100dvh;
  margin-bottom: -100dvh;
  pointer-events: none;
}

.p-col__sky {
  z-index: 0;
  object-fit: cover;
}

.p-col__planet {
  z-index: 1;
  object-fit: contain;
  object-position: center center;
  transform-origin: 50% 50%;
}

.p-col__back {
  position: absolute;
  z-index: 3;
  top: calc(63.5 * var(--u));
  left: calc(527 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  width: calc(133.88 * var(--u));
  height: calc(50.03 * var(--u));
  background: #fff;
  border: 0;
  box-shadow: 0 0 calc(8 * var(--u)) rgba(0, 0, 0, 0.2);
  color: #000;
  font-size: max(12px, calc(19.87 * var(--u)));
  line-height: 1;
  text-decoration: none;
}

.page-column .p-sv__col--2 .p-col__back,
.page-column .p-sv__col--2 .p-col__back span {
  color: #000;
}

.p-col__back::after {
  content: "";
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(4.35 * var(--u)) 0 calc(4.35 * var(--u)) calc(7.53 * var(--u));
  border-color: transparent transparent transparent #001932;
}

.p-col__scroll {
  position: relative;
  z-index: 2;
  padding-top: calc(156 * var(--u));
  padding-bottom: calc(48 * var(--u));
  overflow: visible;
}

.p-col__grid {
  display: flex;
  flex-wrap: wrap;
  gap: calc(44.18 * var(--u)) calc(9.58 * var(--u));
  width: calc(666.14 * var(--u));
  max-width: calc(100% - 68 * var(--u));
  margin: 0 0 calc(48 * var(--u)) calc(34 * var(--u));
}

.p-col__post {
  position: relative;
  display: block;
  width: calc(215.52 * var(--u));
  color: #4c5e6f;
  text-decoration: none;
}

.p-col__post-circle {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(0, 0, 0, 0.16));
}

.page-column .p-sv__col--2 .p-col__post-title {
  color: #4c5e6f;
}

.p-col__post-title {
  position: absolute;
  top: 41%;
  left: 0;
  right: 0;
  margin: 0;
  color: #4c5e6f;
  font-size: 8px;
  line-height: calc(27.1 * var(--u));
  text-align: center;
  white-space: nowrap;
}

.p-col__post--wide .p-col__post-title {
  top: 32.7%;
}

.p-col__post-title--plain {
  top: 34%;
  padding: 0 2%;
  white-space: normal;
}

.p-col__empty {
  margin: 0;
  color: #4c5e6f;
  font-size: calc(14 * var(--u));
  line-height: 1.6;
}

.p-col__post-chevron {
  position: absolute;
  top: 81.8%;
  left: 50%;
  width: calc(11.88 * var(--u));
  height: auto;
  transform: translateX(-50%);
}

.p-col__sheet {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  min-height: 100dvh;
  padding: calc(79.57 * var(--u)) calc(33.8 * var(--u)) calc(48 * var(--u));
  overflow: visible;
}

.p-col__sheet .p-col__back {
  position: absolute;
  top: calc(79.57 * var(--u));
  left: auto;
  right: calc(73.7 * var(--u));
}

.p-col__card {
  display: grid;
  /* Figma: 本文開始 ≈39.56%（左アイキャッチ帯 ≈264.2u / 667.82） */
  grid-template-columns: minmax(0, calc(264.2 * var(--u))) minmax(0, 1fr);
  column-gap: calc(16 * var(--u));
  align-items: start;
  margin-top: calc(134.81 * var(--u));
  min-height: calc(667.83 * var(--u));
  padding: calc(40 * var(--u)) calc(23.6 * var(--u)) calc(40 * var(--u)) calc(18 * var(--u));
  background: #fff;
  border-radius: calc(23.92 * var(--u));
}

.p-col__eye {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(580 * var(--u));
  margin: 0;
  object-fit: contain;
  object-position: center center;
  user-select: none;
}

.page-column .p-sv__col--2 .p-col__body,
.page-column .p-sv__col--2 .p-col__body :is(p, li, span) {
  color: #7f8c98;
}

.p-col__body {
  min-width: 0;
  color: #7f8c98;
  font-size: max(12px, calc(10.01 * var(--u)));
  line-height: 1.87;
}

.p-col__body p {
  margin: 0;
}

.p-col__body p + p {
  margin-top: 1.4em;
}

/*
 * シングル PC:
 * - ページ全体＝100dvh固定（枠外はスクロール不可）
 * - 空・惑星・戻るは従来どおりの見た目を維持
 * - 白枠だけ残り高さを使い、本文のみ枠内スクロール／イラスト固定
 */
body.page-column--single {
  height: 100dvh;
  overflow: hidden;
}

body.page-column--single .l-main {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.page-column--single .p-sv,
.page-column--single .p-sv__scale {
  height: 100%;
  overflow: hidden;
}

.page-column--single .p-sv__col--2 {
  height: 100%;
  overflow: hidden;
}

.page-column--single .p-col__stage {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* スクロール無しでも背景が画面いっぱいになるよう絶対配置（sticky の代替） */
.page-column--single .p-col__sky,
.page-column--single .p-col__planet {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.page-column--single .p-col__sheet {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: calc(79.57 * var(--u)) calc(33.8 * var(--u)) calc(48 * var(--u));
  overflow: hidden;
}

.page-column--single .p-col__sheet .p-col__back {
  position: absolute;
  top: calc(79.57 * var(--u));
  left: auto;
  right: calc(73.7 * var(--u));
}

.page-column--single .p-col__card {
  flex: 1 1 auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  /* 戻るボタン下の余白（従来 margin-top 134.81 相当をシート内に収める） */
  margin-top: calc(134.81 * var(--u));
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
}

.page-column--single .p-col__card:not(:has(.p-col__eye)) {
  grid-template-columns: minmax(0, 1fr);
}

.page-column--single .p-col__eye {
  align-self: center;
  width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
}

.page-column--single .p-col__body {
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: calc(6 * var(--u));
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.page-column--single .p-col__body::-webkit-scrollbar {
  width: 6px;
}

.page-column--single .p-col__body::-webkit-scrollbar-thumb {
  background: rgba(76, 94, 111, 0.35);
  border-radius: 999px;
}

/* SP 専用タイトルは PC では非表示。toolbar は PC で透過（戻るは従来どおりシート直下扱い） */
.p-col__title--stage {
  display: none;
}

.p-col__toolbar {
  display: contents;
}

@media (max-width: 720px) {
  .p-col__lead p,
  .p-col__post-title {
    white-space: normal;
  }
}

/* ========== COLUMN SP（Figma 864） ========== */
@media (max-width: 720px) {
  body.has-sp-chrome.page-column .p-sv {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.has-sp-chrome.page-column .p-sv__scale {
    display: block;
    width: 100%;
    height: auto;
    min-height: calc(var(--sp-stage-h) - var(--sp-foot-h));
  }

  body.has-sp-chrome.page-column .p-sv__col--1,
  body.has-sp-chrome.page-column .p-sv__col--3 {
    display: none;
  }

  body.has-sp-chrome.page-column .p-sv__col--2 {
    display: block;
    width: 100%;
    height: auto;
    min-height: calc(var(--sp-stage-h) - var(--sp-foot-h));
    padding-inline: var(--sp-col-pad-x);
    overflow: visible;
    background: transparent;
  }

  body.has-sp-chrome.page-column .p-col__stage {
    position: relative;
    min-height: calc(var(--sp-stage-h) - var(--sp-foot-h));
    padding-bottom: calc(280 * var(--sp));
  }

  /* 空: ビューポート全面（stage-h だとフッター手前で見切れる） */
  body.has-sp-chrome.page-column {
    background: #e9f0f4;
  }

  body.has-sp-chrome.page-column .p-col__sky {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    background-color: #e9f0f4;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
  }

  /*
   * 惑星: planet_4_building（3738:19530）。CULTURE SP と同じ枠（650×650 / top 899 / left 107）。
   */
  body.has-sp-chrome.page-column .p-col__planet {
    position: fixed;
    z-index: 1;
    top: calc(899 * var(--sp));
    right: auto;
    bottom: auto;
    left: calc(107 * var(--sp));
    width: calc(650 * var(--sp));
    height: calc(650 * var(--sp));
    max-height: none;
    margin: 0;
    object-fit: contain;
    object-position: center center;
    transform-origin: 50% 50%;
    pointer-events: none;
  }

  /* ----- アーカイブ: Frame 73 / 3712:19082 ----- */
  body.has-sp-chrome.page-column--archive .p-col__back--archive {
    display: none;
  }

  body.has-sp-chrome.page-column--archive .p-sv,
  body.has-sp-chrome.page-column--archive .p-sv__scale,
  body.has-sp-chrome.page-column--archive .p-sv__col--2,
  body.has-sp-chrome.page-column--archive .p-col__stage {
    height: auto;
    min-height: 0;
  }

  body.has-sp-chrome.page-column--archive .p-col__stage {
    padding-bottom: 0;
  }

  body.has-sp-chrome.page-column--archive .p-col__scroll {
    height: auto;
    overflow: visible;
    padding-bottom: 0;
  }

  body.has-sp-chrome.page-column--archive .p-col__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(19.84 * var(--sp));
    row-gap: calc(19.84 * var(--sp));
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  body.has-sp-chrome.page-column--archive .p-col__post {
    width: 100%;
    min-width: 0;
  }

  body.has-sp-chrome.page-column--archive .p-col__post-title {
    top: 41%;
    font-size: calc(24 * var(--sp));
    line-height: calc(36 * var(--sp));
    text-align: center;
    white-space: nowrap;
  }

  body.has-sp-chrome.page-column--archive .p-col__post-title--plain {
    white-space: normal;
    padding: 0;
  }

  body.has-sp-chrome.page-column--archive .p-sv__col--2 .p-col__post-title {
    text-align: center;
  }

  body.has-sp-chrome.page-column--archive .p-col__post--wide .p-col__post-title {
    top: 32.7%;
  }

  body.has-sp-chrome.page-column--archive .p-col__post-chevron {
    top: 81.8%;
    width: calc(11.88 * var(--sp));
  }

  /*
   * シングル SP:
   * - デバイス縦幅固定（ヘッダー／フッター分を除く stage）
   * - 空・惑星は共通の fixed 配置を維持（崩さない）
   * - 枠外スクロール禁止／本文のみ白枠内スクロール
   */
  body.has-sp-chrome.page-column--single {
    box-sizing: border-box;
    height: 100dvh;
    overflow: hidden;
  }

  body.has-sp-chrome.page-column--single .l-main {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.has-sp-chrome.page-column--single .p-sv,
  body.has-sp-chrome.page-column--single .p-sv__scale,
  body.has-sp-chrome.page-column--single .p-sv__col--2 {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.has-sp-chrome.page-column--single .p-col__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
  }

  /* 空・惑星は上の page-column 共通（fixed）をそのまま使う */

  body.has-sp-chrome.page-column--single .p-col__sheet {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    /* 上段タイトル行 + 下余白（フッター被り防止） */
    padding: calc(52 * var(--sp)) 0 calc(52 * var(--sp));
    overflow: hidden;
  }

  /* タイトル・戻るは白カードの外（シート上段） */
  body.has-sp-chrome.page-column--single .p-col__toolbar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 3;
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(12 * var(--sp));
    height: auto;
    margin: 0 0 calc(20 * var(--sp));
    pointer-events: none;
  }

  body.has-sp-chrome.page-column--single .p-col__toolbar > * {
    pointer-events: auto;
  }

  /* Figma title: left 0 / font 19.84（カード外） */
  body.has-sp-chrome.page-column--single .p-col__title--stage {
    display: block;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #000;
    font-size: calc(19.84 * var(--sp));
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
  }

  /* 戻る: 幅はラベルに合わせる（固定 width なし） */
  body.has-sp-chrome.page-column--single .p-col__sheet .p-col__back,
  body.has-sp-chrome.page-column--single .p-col__toolbar .p-col__back {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    flex: 0 0 auto;
    align-items: center;
    gap: calc(8 * var(--sp));
    width: auto;
    height: calc(50 * var(--sp));
    padding: 0 calc(20 * var(--sp));
    font-size: calc(15.59 * var(--sp));
    box-shadow: 0 0 calc(8 * var(--sp)) rgba(0, 0, 0, 0.2);
    white-space: nowrap;
  }

  body.has-sp-chrome.page-column--single .p-col__sheet .p-col__back::after,
  body.has-sp-chrome.page-column--single .p-col__toolbar .p-col__back::after {
    border-width: calc(3.5 * var(--sp)) 0 calc(3.5 * var(--sp)) calc(7 * var(--sp));
  }

  body.has-sp-chrome.page-column--single .p-col__card {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, calc(257.5 * var(--sp))) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: calc(16 * var(--sp));
    align-items: stretch;
    margin-top: 0;
    min-height: 0;
    height: auto;
    padding: calc(31.2 * var(--sp)) calc(29.3 * var(--sp)) calc(31.2 * var(--sp)) calc(18 * var(--sp));
    border-radius: calc(23.92 * var(--sp));
    background: #fff;
    box-shadow: 0 0 calc(12 * var(--sp)) rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }

  body.has-sp-chrome.page-column--single .p-col__eye {
    display: block;
    align-self: center;
    width: 100%;
    height: auto;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center center;
  }

  /* アイキャッチ無し（WP未設定時）は本文を全幅に */
  body.has-sp-chrome.page-column--single .p-col__card:not(:has(.p-col__eye)) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.has-sp-chrome.page-column--single .p-col__body {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    padding: 0 calc(4 * var(--sp)) 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #4c5e6f;
    font-size: calc(9.92 * var(--sp));
    line-height: calc(24 * var(--sp));
    white-space: normal;
    scrollbar-width: thin;
  }

  body.has-sp-chrome.page-column--single .p-sv__col--2 .p-col__body,
  body.has-sp-chrome.page-column--single .p-sv__col--2 .p-col__body :is(p, li, span) {
    color: #4c5e6f;
    text-align: left;
  }

  body.has-sp-chrome.page-column--single .p-col__body p {
    margin: 0;
  }

  /* Figma: 段落間 mb-0（行間24のみ） */
  body.has-sp-chrome.page-column--single .p-col__body p + p {
    margin-top: 0;
  }
}