/* U30 着地ページ。2026-09-27 Codex Astra。
   写真と言葉を並べた案内状。原稿・共通部品・トークンは維持。
   本文は最初から表示し、ページ固有の JavaScript は使わない。FV の動きは CSS だけ（2026-09-27 夜 Opus、下の FV の節）。 */
.u30-body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.9 var(--sans);
  -webkit-text-size-adjust: 100%;
}
.u30-body *, .u30-body *::before, .u30-body *::after { box-sizing: border-box; }
.u30-body .skip-link { position: fixed; top: -100px; left: 0; z-index: 200; padding: var(--s-3); background: var(--paper); color: var(--ink); }
.u30-body .skip-link:focus { top: 0; }
.u30-body :focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.u30 p { margin: 0; }
.u30 img { display: block; width: 100%; height: auto; }
.u30 a { color: var(--blue); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.u30 h1, .u30 h2, .u30 h3 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.6; }
.u30 h2 { font-size: clamp(24px, 2.5vw, 32px); letter-spacing: .025em; }
.u30 h3 { font-size: 24px; }
.u30 h2 span, .u30 h3 span { display: inline-block; }
.u30-sec { width: min(1200px, 100% - 2 * var(--s-12)); margin-inline: auto; }
.u30-sec { padding-block: var(--s-20); border-top: 1px solid var(--line); scroll-margin-top: 104px; }
.u30 figcaption { margin-top: var(--s-3); color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ── FV（2026-09-27 夜 Opus 作り直し） ─────────────────────────────
   渡邉さん「FVがクソダサすぎる。30点」。前の FV は左に文・右に正方形の写真の2列で、主役が無かった。
   作り直しの筋：画面いっぱいの実写の上で「規則が変わった」を1枚の絵にする。
     看板「大学生だけ／じゃない。」→ 参加できる人の欄の「大学生・専門学校生」に朱の線 → 「30歳以下なら、社会人も高校生も。」→ U30 の印が押される。
   / の FV（実写・明朝の大きな看板・出入国印・夜明け）と同じ世界の、U30 だけの場面。
   並べ方：写真・印・看板・申込みの紙を、1つのグリッドのマス（1/1）に重ねる（絶対配置を使わない。高さが中身で伸びても崩れない）。
   動きは CSS だけで、prefers-reduced-motion: no-preference の下にだけ書く（止めた人・JS の無い人は最後の絵がそのまま出る）。 */
.u30-fv {
  --hh: 84px;                       /* 共通ヘッダーの高さ（Header.astro：1181px 以上 84px、以下 72px） */
  --fv-ink: rgb(23 44 46);          /* = --cinema。写真に掛ける膜の色（rgb で透明度を付けるため数字で持つ） */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: var(--hh);
  background: var(--paper);
  overflow: hidden;
}
.u30-fv > * { grid-area: 1 / 1; min-width: 0; }

/* 写真：ヘッダーの下から画面の下まで。上下に藍の膜を掛け、文字と印を読めるようにする */
.u30 .u30-fv-photo { position: relative; margin: 0; min-height: max(600px, calc(100svh - var(--hh))); background: var(--cinema); overflow: hidden; }
.u30 .u30-fv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.u30-fv-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgb(23 44 46 / .94) 0%, rgb(23 44 46 / .72) 26%, rgb(23 44 46 / .18) 52%, rgb(23 44 46 / 0) 64%),
    linear-gradient(to bottom, rgb(23 44 46 / .5) 0%, rgb(23 44 46 / 0) 30%);
}
/* 写真の注記は、右の端に縦に（写真のクレジットの置き方）。写真から離さない */
.u30 .u30-fv-photo figcaption {
  position: absolute; z-index: 1; right: var(--s-4); top: 50%; transform: translateY(-50%);
  margin: 0; writing-mode: vertical-rl; letter-spacing: .12em;
  color: var(--paper); font-size: 16px; line-height: 1.4; text-shadow: 0 1px 6px rgb(23 44 46 / .8);
}

/* U30 の印と「初めて開きます」 */
.u30-fv-seal {
  z-index: 2; align-self: start; justify-self: end;
  margin: var(--s-10) calc(var(--s-16) + var(--s-4)) 0 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-4);
  color: var(--paper); text-align: right;
}
.u30-seal { display: block; width: clamp(168px, 14vw, 216px); height: auto; overflow: visible; color: var(--coral); transform: rotate(-12deg); filter: drop-shadow(0 6px 14px rgb(23 44 46 / .35)); }
.u30-seal-paper { fill: var(--paper); }
.u30-seal-ring { font: 700 13.5px/1 var(--sans); letter-spacing: .16em; }
.u30-seal-u30 { font: 700 50px/1 var(--serif); letter-spacing: .02em; }
.u30-seal-sub { font: 700 12px/1 var(--sans); letter-spacing: .2em; }
.u30-first { font: 600 17px/1.7 var(--serif); text-shadow: 0 1px 8px rgb(23 44 46 / .9); }
.u30-first > span { display: inline-block; }
.u30-first > span:first-child { display: block; }

/* 看板と、変わった規則 */
.u30-fv-copy {
  z-index: 2; align-self: end; justify-self: start;
  padding: 0 var(--s-16) var(--s-16);
  color: var(--paper);
}
.u30-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-1); font-size: 16px; font-weight: 600; letter-spacing: .06em; }
.u30-kicker strong { color: var(--light-dawn); font-size: 22px; letter-spacing: .04em; }
.u30 .u30-fv h1 { margin-top: var(--s-3); font-size: clamp(64px, 6.8vw, 112px); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
/* 看板は「大学生だけ／じゃない。」の 2 行で決め打ち（1 行だと右の紙にかかる） */
.u30-h1-line { display: block; overflow: hidden; padding-bottom: .06em; }
.u30-h1-line > span { display: inline-block; }
.u30-swap {
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: var(--s-2) var(--s-6);
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgb(255 253 247 / .45);
}
.u30-swap-label { font-size: 16px; font-weight: 700; letter-spacing: .08em; color: var(--light-dawn); }
.u30-swap-old { font-size: 18px; font-weight: 500; color: rgb(255 253 247 / .78); }
.u30-swap-old s { position: relative; text-decoration: none; white-space: nowrap; }
/* 朱の線：手で引いた1本（わずかに傾ける）。<s> の意味はそのまま、見た目の線だけ描き替える */
.u30-swap-old s::after {
  content: ''; position: absolute; left: -.2em; right: -.2em; top: 52%; height: 3px;
  background: var(--coral); transform: rotate(-3deg); transform-origin: left center; border-radius: 2px;
}
.u30-lead { display: flex; flex-wrap: wrap; font: 700 clamp(26px, 2.2vw, 32px)/1.45 var(--serif); letter-spacing: .01em; }
.u30-lead > span { display: inline-block; }
.u30-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 申込みの紙：PC では写真の右下に置いた1枚の紙。スマホでは写真の下に続く */
.u30-fv-sheet {
  z-index: 2; align-self: end; justify-self: end;
  width: min(360px, 30vw);
  margin: 0 calc(var(--s-16) + var(--s-4)) var(--s-16) 0;
  padding: var(--s-6) var(--s-6) var(--s-5);
  background: var(--paper); color: var(--ink);
  border-top: 4px solid var(--coral);
  display: grid; gap: var(--s-3);
}
.u30-lead-team { font: 700 20px/1.6 var(--serif); }
.u30-when { font-size: 16px; font-weight: 600; line-height: 1.8; padding-bottom: var(--s-3); border-bottom: 1px dashed var(--ticket-perforation); }
.u30-sp-br { display: none; }
.u30-fv-sheet .u30-actions { flex-direction: column; align-items: stretch; gap: var(--s-2); margin-top: var(--s-1); }
.u30-fv-sheet .u30-button-line { width: 100%; }
.u30-fv-sheet .u30-button-sub { align-self: flex-start; }

/* 1180px 以下：ヘッダーが 72px。看板は 2 行に（1 行だと写真の顔にかかる） */
@media (max-width: 1180px) {
  .u30-fv { --hh: 72px; }
  .u30 .u30-fv h1 { font-size: clamp(64px, 9.6vw, 104px); }
  .u30-swap { grid-template-columns: auto 1fr; }
  .u30-swap .u30-lead { grid-column: 1 / -1; }
  .u30-fv-copy { padding: 0 var(--s-10) var(--s-12); }
  .u30-fv-seal { margin: var(--s-8) var(--s-12) 0 0; }
}
/* 1180px 以下：申込みの紙は写真の下へ（iPad 横で紙が細くなり、顔にもかかるため） */
@media (max-width: 1180px) {
  .u30-fv > .u30-fv-sheet { grid-area: 2 / 1; justify-self: stretch; width: auto; margin: 0; padding: var(--s-8) var(--s-10) var(--s-10); border-top: 0; }
  .u30-fv-sheet { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--s-8); }
  .u30-fv-sheet .u30-lead-team, .u30-fv-sheet .u30-when { grid-column: 1; }
  .u30-fv-sheet .u30-actions { grid-column: 2; grid-row: 1 / span 2; }
}
/* スマホ：写真は上 2/3。看板は写真の下の端から藍の地へ。印は右上、「初めて開きます」は左上 */
@media (max-width: 767px) {
  /* 写真の枠はマス全体（注記を藍の地の下端に置くため）。絵そのものは上の 56svh だけ */
  .u30-fv { --photo-h: max(340px, 56svh); }
  .u30 .u30-fv-photo { min-height: 0; }
  .u30 .u30-fv-photo img { bottom: auto; height: var(--photo-h); object-position: 60% 50%; }
  .u30-fv-photo::after {
    bottom: auto; height: var(--photo-h);
    background:
      linear-gradient(to top, rgb(23 44 46 / 1) 0%, rgb(23 44 46 / .88) 10%, rgb(23 44 46 / .5) 28%, rgb(23 44 46 / 0) 48%),
      linear-gradient(to bottom, rgb(23 44 46 / .5) 0%, rgb(23 44 46 / 0) 34%);
  }
  .u30-fv { background: linear-gradient(to bottom, var(--paper) 0 var(--hh), var(--cinema) var(--hh)); }
  .u30 .u30-fv-photo figcaption { right: var(--s-5); left: var(--s-5); top: auto; bottom: var(--s-6); transform: none; writing-mode: horizontal-tb; text-align: right; letter-spacing: .04em; color: rgb(255 253 247 / .8); text-shadow: none; }
  .u30-fv-seal { flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; justify-self: stretch; margin: var(--s-4) var(--s-4) 0 var(--s-5); text-align: left; }
  .u30-seal { width: 118px; flex: none; }
  .u30-first { font-size: 16px; line-height: 1.65; padding-top: var(--s-1); }
  .u30-fv-copy { align-self: start; margin-top: calc(var(--photo-h) - 112px); padding: 0 var(--s-5) var(--s-16); }
  .u30-kicker { font-size: 16px; }
  .u30-kicker strong { font-size: 20px; }
  .u30-kicker { letter-spacing: 0; white-space: nowrap; }
  .u30 .u30-fv h1 { font-size: clamp(44px, 13.4vw, 60px); line-height: 1.12; margin-top: var(--s-1); }
  .u30-swap { grid-template-columns: auto 1fr; gap: 0 var(--s-4); margin-top: var(--s-3); padding-top: var(--s-3); }
  .u30-swap-old { font-size: 17px; }
  .u30-lead { font-size: clamp(24px, 7vw, 28px); line-height: 1.5; margin-top: var(--s-1); }
  .u30-fv > .u30-fv-sheet { grid-area: 2 / 1; padding: var(--s-8) var(--s-5) var(--s-10); border-top: 4px solid var(--coral); }
  .u30-fv-sheet { grid-template-columns: 1fr; }
  .u30-fv-sheet .u30-actions { grid-column: 1; grid-row: auto; }
  .u30-sp-br { display: inline; }
}

/* 動き：夜明け → 看板 → 朱の線 → 新しい規則 → 印。3 秒で終わる。止めた人には何も動かさない */
@media (prefers-reduced-motion: no-preference) {
  .u30 .u30-fv-photo img { animation: u30-夜明け 2.4s var(--ease-sink) both, u30-寄る 9s var(--ease-out) both; }
  .u30-kicker { animation: u30-浮く .7s var(--ease-out) .15s both; }
  .u30-h1-line > span { animation: u30-組む .95s var(--ease-out) both; }
  .u30-h1-line:nth-child(1) > span { animation-delay: .3s; }
  .u30-h1-line:nth-child(2) > span { animation-delay: .48s; }
  .u30-swap { animation: u30-浮く .7s var(--ease-out) .95s both; }
  .u30-swap-old s::after { animation: u30-線を引く .45s cubic-bezier(.6, 0, .3, 1) 1.45s both; }
  .u30-swap-old { animation: u30-退く .4s linear 1.9s both; }
  .u30-lead { animation: u30-浮く .8s var(--ease-out) 1.95s both; }
  .u30-seal { animation: u30-押す .38s cubic-bezier(.3, 0, .2, 1) 2.55s both; }
  .u30-first { animation: u30-浮く .7s var(--ease-out) 2.85s both; }
  .u30-fv-sheet { animation: u30-浮く .8s var(--ease-out) 2.2s both; }
}
/* 寄る動きは、スマホでは絵の下の端が藍の地へはみ出して線に見えるので付けない（夜明けだけ） */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .u30 .u30-fv-photo img { animation: u30-夜明け 2.4s var(--ease-sink) both; }
  .u30-fv-sheet { animation: none; }
}
@keyframes u30-夜明け { from { filter: brightness(.42) saturate(.45); } to { filter: none; } }
@keyframes u30-寄る { from { transform: scale(1.07); } to { transform: none; } }
@keyframes u30-浮く { from { opacity: 0; transform: translateY(var(--arrive-rise)); } to { opacity: 1; transform: none; } }
@keyframes u30-組む { from { transform: translateY(108%); } to { transform: none; } }
@keyframes u30-線を引く { from { transform: rotate(-3deg) scaleX(0); } to { transform: rotate(-3deg) scaleX(1); } }
@keyframes u30-退く { to { color: rgb(255 253 247 / .6); } }
@keyframes u30-押す {
  0% { opacity: 0; transform: rotate(-4deg) scale(1.9); }
  70% { opacity: 1; transform: rotate(-12deg) scale(.96); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}

/* 相談への入口。角のあるLINEの緑と、押下時の手応えを共通LPから継ぐ。 */
.u30-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-4); margin-top: var(--s-2); }
.u30-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: var(--s-3) var(--s-6); font-size: 16px; font-weight: 700; text-decoration: none; }
.u30 .u30-button-line { background: var(--green); color: var(--footer-bg); border: 1px solid var(--footer-bg); box-shadow: 0 3px 0 var(--footer-bg); }
.u30 .u30-button-line:hover { background: var(--line-pressed); }
.u30 .u30-button-line:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--footer-bg); }
.u30 .u30-button-sub { padding-inline: 0; min-height: 44px; border-bottom: 1px solid var(--ink); font-weight: 500; }
.u30-more a, .u30-qa dd a { display: inline-flex; align-items: center; min-height: 44px; }

/* 同じ・違う：まず違いを一段で示し、仕様は一つの罫線表に。 */
.u30 #same { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-16); align-items: start; }
.u30-section-head { display: grid; gap: var(--s-6); }
.u30-section-head h2 { font-size: 26px; }
.u30-section-head p { font-size: 17px; }
.u30-facts { min-width: 0; display: grid; gap: var(--s-8); }
.u30-table { width: 100%; border-collapse: collapse; line-height: 1.85; }
.u30-table caption { text-align: left; font: 600 22px/1.6 var(--serif); padding-bottom: var(--s-4); border-bottom: 2px solid var(--ink); }
.u30-table th, .u30-table td { padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.u30-table tbody th { width: 10em; font-size: 16px; font-weight: 600; }
.u30-table td { font-size: 16px; }
.u30-table thead th { font-size: 16px; font-weight: 500; color: var(--muted); }
.u30-table th:first-child { padding-left: 0; }
.u30-table-different tbody th { width: 7em; }
.u30-table-different td:first-of-type, .u30-table-different thead th:nth-child(2) { background: var(--paper-letter); }
.u30-table-different td:last-child { width: 28%; }
.u30-more { font-size: 16px; }

/* 相談の前に読む、二人への手紙。回答を畳まず、全てそのまま読める。 */
.u30 #for { display: grid; gap: var(--s-10); }
.u30-for { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); }
.u30-for-col { min-width: 0; }
.u30-for-col h3 { border-top: 3px solid var(--coral); padding-top: var(--s-5); padding-bottom: var(--s-6); }
.u30-for-col + .u30-for-col h3 { border-color: var(--blue); }
.u30-qa { margin: 0; }
.u30-qa dt { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); font-weight: 700; font-size: 18px; }
.u30-qa dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.u30-qa dd { margin: var(--s-3) 0 0; }
.u30-qa dd a { margin-top: var(--s-2); }
.u30-photo { margin: var(--s-6) 0 0; display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-6); align-items: end; }
.u30-photo img { aspect-ratio: 16/9; object-fit: cover; object-position: center 45%; }
.u30-photo figcaption { border-top: 1px solid var(--line); padding-top: var(--s-4); }

/* チケットは共通部品のまま。最後の案内は一枚の便箋として。 */
.u30 #rounds { display: grid; gap: var(--s-8); }
.u30-next { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-16); border-top: 3px solid var(--ink); margin-bottom: var(--s-16); }
.u30-next h2 { grid-row: span 2; }
.u30-next .u30-button { justify-self: start; margin-top: var(--s-2); }

@media (max-width: 1100px) {
  .u30-sec { width: calc(100% - 2 * var(--s-8)); }
  .u30 #same { grid-template-columns: 1fr; gap: var(--s-8); }
  .u30-section-head { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
  .u30-for { gap: var(--s-10); }
}
@media (max-width: 767px) {
  .u30-sec { width: calc(100% - 2 * var(--s-5)); padding-block: var(--s-12); scroll-margin-top: 92px; }
  .u30-section-head { grid-template-columns: 1fr; gap: var(--s-4); }
  .u30-section-head h2 { font-size: 24px; }
  .u30-table thead { display: none; }
  .u30-table tr { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); padding-block: var(--s-4); gap: var(--s-2); }
  .u30-table th, .u30-table td { width: auto !important; padding: 0; border: 0; }
  .u30-table td[data-label] { padding: var(--s-3); }
  .u30-table td[data-label]::before { content: attr(data-label) '：'; display: block; font-weight: 700; color: var(--ink); }
  .u30-table caption { font-size: 21px; }
  .u30-more a { font-size: 16px; }
  .u30-for { grid-template-columns: 1fr; gap: var(--s-12); }
  .u30-for-col h3 { font-size: 23px; }
  .u30-qa dt { font-size: 17px; }
  .u30-photo { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
  .u30-photo img { aspect-ratio: 3/2; }
  .u30-photo figcaption { border: 0; padding: 0; }
  .u30-next { grid-template-columns: 1fr; gap: var(--s-6); margin-bottom: var(--s-4); }
  .u30-next h2 { grid-row: auto; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .u30-body *, .u30-body *::before, .u30-body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .u30 .u30-button-line:active { transform: none; }
}

/* 共通部品のファイルを変えず、U30内の実用情報とLINEの文字だけ読みやすくする。 */
.u30 figcaption { font-size: 16px; }
.u30 #rounds .pass-band > span,
.u30 #rounds .pass-dest span,
.u30 #rounds .pass-main dt,
.u30 #rounds .pass-main dd,
.u30 #rounds .pass-note,
.u30 #rounds .pass-go,
.u30 #rounds .pass-status { font-size: 16px; }
.u30 #rounds .pass-go-line { color: var(--footer-bg); }
.u30 #rounds .pass-status-open { background: var(--blue); color: var(--paper); }
.u30 #rounds .pass-days b { color: var(--light-ink); }