/* ============================================================
   KANADE コラム記事 詳細ページ レイアウト
   フェーズ1：相対リンクで使用（ローカルのディープパスで閲覧可）
   ※ デザイントークンは ../ds-*.css / ../kanade.css に依存
   ============================================================ */
/* ルート(html)に overflow-x: clip — iOSのドキュメント横スクロールはルートで決まるため。
   clip はスクロールコンテナを作らないので sticky(.col-top) は壊さない。 */
html, body { margin: 0; padding: 0; overflow-x: clip; }
body {
  background: #0E0509;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
/* overflow-x: clip — 横はみ出しを抑止しつつ sticky(.col-top) を壊さない（clipはスクロールコンテナを作らない） */
.col-shell { max-width: 440px; margin: 0 auto; min-height: 100vh; background: var(--cp-bg); position: relative; overflow-x: clip; }

/* 上部バー（LPと同じ白・グラデKANADE） */
.col-top {
  position: sticky; top: 0; z-index: 10;
  height: 64px; background: #FFFFFF;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
}
.col-back {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #F2F2F4; border: 1px solid rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #0A0508; text-decoration: none; cursor: pointer;
}
.col-back:active { transform: translateY(-50%) scale(0.94); }
.col-back svg { display: block; }
.col-brandwrap { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; }
.col-brand {
  font-weight: 900; letter-spacing: 0.28em; font-size: 17px;
  background-image: linear-gradient(90deg,#F5D60A 0%,#F7B30A 26%,#F5910F 46%,#F26511 64%,#E5331B 82%,#C2151B 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 1.5px rgba(0,0,0,0.22); padding-left: 0.28em;
}
.col-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #0A0508; white-space: nowrap; }

/* 本文 */
.col-main { padding: 0 0 56px; }
.col-hero { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #0E0509; }
.col-hero img { width: 100%; height: 100%; object-fit: contain; display: block; }
.col-body { padding: 22px 22px 0; }
.col-cat {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 5px;
  background: var(--pink-100); color: var(--pink-700);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
}
.col-title {
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 800; font-size: 22px; line-height: 1.4; letter-spacing: -0.01em;
  color: var(--cp-ink); margin: 12px 0 8px; text-wrap: pretty;
}
.col-date { font-size: 11px; color: var(--cp-ink-mute); font-weight: 600; letter-spacing: 0.04em; }
.col-article { margin-top: 20px; }
.col-article p { font-size: 14px; line-height: 2.0; color: var(--cp-ink-soft); margin: 0 0 16px; text-wrap: pretty; }
.col-article h2 {
  font-size: 16px; font-weight: 800; color: var(--cp-ink);
  margin: 28px 0 12px; padding-left: 11px; border-left: 4px solid var(--pink-500); line-height: 1.5;
}
.col-article strong { color: var(--pink-600); font-weight: 800; }
.col-article h3 {
  font-size: 14px; font-weight: 800; color: var(--cp-ink);
  margin: 22px 0 6px; padding: 4px 0 4px 11px; line-height: 1.5;
  border-left: 3px solid var(--pink-400);
}
/* 小見出し（ビデオ通話／ライブ配信 等）：左ラインではなく下に赤いライン */
.col-article h3.col-uh {
  display: inline-block;
  border-left: none; padding: 0 0 2px 0;
  margin: 24px 0 10px;
  font-size: 16px; font-weight: 800; color: var(--cp-ink);
  border-bottom: 3px solid #E61342;
}

/* 弱・中・強：文頭に置く赤下線マーカー（インライン） */
.col-article .col-lv {
  font-size: 16px; font-weight: 800; color: var(--cp-ink);
  border-bottom: 3px solid #E61342; padding-bottom: 1px;
}
.col-article ul { margin: 4px 0 18px; padding: 0; list-style: none; }
.col-article ul li {
  position: relative; padding-left: 18px; margin-bottom: 8px;
  font-size: 14px; line-height: 1.9; color: var(--cp-ink-soft);
}
.col-article ul li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pink-500);
}

.col-cta-wrap { margin-top: 28px; }
a.k-cta { text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; }
.col-hr { border: 0; border-top: 1px solid var(--cp-line); margin: 36px 0 22px; }
.col-related-title { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--cp-ink); margin-bottom: 12px; }
.col-related { display: flex; flex-direction: column; gap: 8px; }
.col-rel {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: var(--cp-r-sm,12px);
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  text-decoration: none; transition: border-color .15s ease;
}
.col-rel:active { border-color: rgba(230,19,66,0.40); }
.col-rel-q { flex: 1; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--cp-ink); }
.col-rel-chev { color: var(--pink-700); font-size: 18px; font-weight: 700; flex-shrink: 0; }

/* 記事一覧ページ */
.col-index-main { padding: 28px 22px 56px; }
.col-index-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.22em;
  color: var(--pink-500); text-shadow: 0 0 16px rgba(230,19,66,0.45); margin-bottom: 8px;
}
.col-index-title {
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 800; font-size: 25px; line-height: 1.4; color: var(--cp-ink); margin: 0 0 20px;
}
.col-index-list { display: flex; flex-direction: column; gap: 10px; }
.col-index-item {
  display: flex; gap: 12px; align-items: center;
  padding: 10px; border-radius: var(--cp-r,16px);
  background: var(--cp-surface); border: 1px solid var(--cp-line);
  text-decoration: none; transition: border-color .15s ease;
}
.col-index-item:active { border-color: rgba(230,19,66,0.40); }
.col-index-thumb {
  flex-shrink: 0; width: 96px; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: #000;
}
.col-index-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-index-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.col-index-cat {
  align-self: flex-start; padding: 2px 8px; border-radius: 4px;
  background: var(--pink-100); color: var(--pink-700);
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.4;
}
.col-index-ttl {
  font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--cp-ink);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.col-index-date { font-size: 10px; color: var(--cp-ink-mute); font-weight: 600; letter-spacing: 0.04em; }