/* CPJ｜クリエイター誌の特集号（灰の紙・墨・蛍光ピンク）
   余白の共通値：横の余白20px／区画の上下64px／見出し→本文16px／本文→写真24px／項目どうし28px */
/* 見出し用の書体（Noto Sans JP Black・SIL OFL、見出しで使う文字だけを収めた版）。
   行の箱を1emに揃えて、詰めた行間でも文字の箱どうしが重ならないようにする */
@font-face {
  font-family: "CPJ Display";
  src: url("assets/fonts/noto-sans-jp-900-sub.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}
:root {
  --paper: #e8e7e4;
  --paper-deep: #d7d6d2;
  --outside: #cfceca;
  --ink: #151515;
  --ink-soft: #4a4946;
  --pink: #ff3d8b;
  --gutter: 20px;
  --sec: 64px;
  --s-head: 16px;
  --s-media: 24px;
  --s-item: 28px;
  --display: "CPJ Display", "Noto Sans JP", sans-serif;
  --body: "Noto Sans JP", "Hiragino Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--outside);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.75;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

/* 刷り物の紙ざらつきは誌面の背景に敷く（写真・ボタンより下の層） */
.page {
  max-width: 460px;
  margin: 0 auto;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .45  0 0 0 0 .44  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  min-height: 100vh;
  padding-bottom: 24px;
}
section { padding: var(--sec) var(--gutter) 0; }
.pink { color: var(--pink); }

.display {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.display .ln { display: block; white-space: nowrap; }
/* カンプの刷り文字（生成画像から切り抜いた透過PNG）。読み上げはalt */
.type img { width: 100%; height: auto; }

/* 写真：角は立てる。線や枠は使わない */
.fv__photo img, .method__photo img, .field__photo img, .polish__photos img, .join__photo img {
  width: 100%; height: 100%; object-fit: cover;
}

/* 縦組みの見出し：1文字ずつ積む */
.tate { display: flex; flex-direction: row-reverse; gap: .08em; font-family: var(--display); font-weight: 900; line-height: 1; }
.tate__col { display: flex; flex-direction: column; }
.tate__col > span { display: block; writing-mode: vertical-rl; text-orientation: upright; width: 1em; height: 1em; text-align: center; }

/* ---------- FV ---------- */
.fv { padding-top: 14px; }
.masthead { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 900; line-height: 1.4; letter-spacing: .02em; }
.fv__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 14px;
  margin-top: 14px;
}
.fv__title { display: contents; font-weight: 900; }
.fv__key {
  grid-column: 1; grid-row: 1 / 4;
  width: min(42vw, 192px);
  height: auto;
  margin-left: -6px;
}
.fv__lead {
  grid-column: 2; grid-row: 1;
  font-family: var(--display);
  font-size: clamp(16px, 4.6vw, 20px);
  line-height: 1.3;
  white-space: nowrap;
  padding-top: 10px;
}
.fv__photo { grid-column: 2; grid-row: 2; margin-top: 12px; min-height: 0; }
.fv__photo img { object-position: 52% 50%; }
.fv__hito {
  grid-column: 2; grid-row: 3;
  align-self: end;
  font-family: var(--display);
  font-size: clamp(34px, 11vw, 46px);
  line-height: 1;
  padding-top: 12px;
  margin-left: -10px;
}
.fv__sub { margin-top: 20px; font-weight: 900; font-size: clamp(17px, 5vw, 21px); line-height: 1.5; letter-spacing: .01em; }

.status { margin-top: 14px; font-size: 13px; font-weight: 700; line-height: 1.5; display: flex; align-items: center; gap: 10px; }
.status::before { content: ""; width: 12px; height: 12px; background: var(--pink); flex: none; }

.cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 12px;
  min-height: 60px;
  padding: 14px 16px;
  background: var(--pink);
  color: var(--ink);
  font-weight: 900;
  font-size: clamp(15px, 4.4vw, 17px);
  line-height: 1.35;
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta:hover, .cta:focus-visible { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--ink); }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.note { margin-top: 14px; font-size: 12px; line-height: 1.7; color: var(--ink-soft); }

/* ---------- 聞く。提案する。届ける。 ---------- */
.method { padding-top: 80px; }
.method__title { width: 94%; }
.method__photo { width: 66%; margin: var(--s-media) 0 0 auto; aspect-ratio: 3 / 2; }
.steps { margin-top: 36px; display: grid; gap: var(--s-item); }
.steps li { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: start; }
.steps li:nth-child(2) { margin-left: 18px; }
.steps li:nth-child(3) { margin-left: 36px; }
.steps__num { font-size: 46px; line-height: 1; color: var(--pink); font-weight: 900; }
.steps h3 { font-weight: 900; font-size: 20px; line-height: 1.4; }
.steps p { margin-top: 4px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }

/* ---------- 仲間と学び、現場でつくる。 ---------- */
.field__top { display: flex; gap: 16px; align-items: stretch; }
.field__top .tate { font-size: clamp(38px, 11.5vw, 48px); flex: none; }
.field__photo { flex: 1; min-width: 0; }
.marks { margin-top: var(--s-media); display: grid; gap: 6px; }
.marks li { display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 18px; line-height: 1.5; }
.marks li::before { content: ""; width: 12px; height: 12px; background: var(--pink); flex: none; }

.media { margin-top: var(--s-media); position: relative; background: var(--ink); }
.media--wide { aspect-ratio: 16 / 9; }
.media > video, .media > iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.media__play {
  position: relative; display: block; width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer; background: var(--ink);
}
.media__play img { width: 100%; height: 100%; object-fit: cover; }
.playmark {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%);
  background: var(--pink);
  transition: transform .15s ease;
}
.playmark::after {
  content: ""; position: absolute; left: 25px; top: 19px;
  border-left: 20px solid var(--ink); border-top: 13px solid transparent; border-bottom: 13px solid transparent;
}
.media__play:hover .playmark, .media__play:focus-visible .playmark { transform: translate(-50%, -50%) scale(1.08); }
.media__play:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* ---------- 講師 ---------- */
.teachers__title { font-size: clamp(40px, 12.4vw, 54px); white-space: nowrap; }
.teachers__row { display: flex; justify-content: space-between; margin-top: var(--s-media); }
.teachers__row--2 { margin-top: 28px; }
.person figcaption { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 15px; line-height: 1.4; }
.person figcaption::before { content: ""; width: 11px; height: 11px; background: var(--pink); flex: none; }
/* 切り抜きは紙の上に直接置く。顔の大きさが揃うよう、行内の幅の比を切り抜きの縦横比から決める */
.person__img { display: flex; align-items: flex-end; }
.person__img img { width: 100%; height: auto; }
.teachers__row { align-items: flex-end; gap: 12px; }
.person--a { width: calc((100% - 12px) * .726); }
.person--b { width: calc((100% - 12px) * .274); }
.person--c { width: calc((100% - 12px) * .383); }
.person--d { width: calc((100% - 12px) * .617); }
.person__img--pair img:first-child { width: 48.1%; }
.person__img--pair img:last-child { width: 51.9%; }

/* ---------- 作品 ---------- */
.works__title { font-size: clamp(40px, 12.4vw, 54px); }
.works__sub { margin-top: var(--s-head); font-weight: 700; font-size: 14px; }
.works__gp { margin-top: var(--s-media); display: flex; gap: 18px; align-items: flex-start; }
.media--tall { margin-top: 0; width: 50%; aspect-ratio: 9 / 16; }
.tate--label { font-size: clamp(38px, 12vw, 52px); color: var(--pink); }
.works__second { margin-top: 40px; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 8vw, 34px); line-height: 1.2; }
.media--yt { width: 86%; margin: 14px 0 0 auto; aspect-ratio: 16 / 9; }

/* ---------- 磨き合う ---------- */
.polish { padding-top: 80px; }
.polish__title { width: 100%; }
.polish__body { margin-top: var(--s-head); font-weight: 700; font-size: 15px; }
.polish__photos { margin-top: var(--s-media); position: relative; padding-bottom: 30%; }
.polish__p1 { width: 70%; aspect-ratio: 3 / 2; }
.polish__p2 { position: absolute; right: 0; bottom: 0; width: 56%; aspect-ratio: 3 / 2; box-shadow: -8px -8px 0 var(--paper); }

/* ---------- 最終CTA ---------- */
.join { padding-top: 80px; padding-bottom: 32px; scroll-margin-top: 0; }
.join__title { width: 100%; }
.join__sub { margin-top: var(--s-head); font-weight: 900; font-size: clamp(19px, 5.6vw, 23px); line-height: 1.5; }
.join__photo { margin-top: var(--s-media); aspect-ratio: 3 / 2; }
.join .status { margin-top: 20px; }
.org { margin-top: 28px; font-size: 12px; font-weight: 700; }

/* ---------- 追従CTA（画像） ---------- */
.floating-cta {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 40;
  width: min(calc(100vw - 28px), 420px);
  transform: translate(-50%, 16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.floating-cta.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s ease, transform .25s ease; }
.floating-cta img { width: 100%; height: auto; }
.floating-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta, .floating-cta, .floating-cta.is-on, .playmark { transition: none; }
}

@media (min-width: 768px) {
  body { padding: 32px 0; }
}