@charset "utf-8";

/* うるみんぱーく
 *
 * 手書きCSS。フレームワークもビルドツールも使わない。
 * 仕様書 §6「サイトらしさの4要素」を実装する:
 *   1 セクションごとに背景色が交互に変わる
 *   2 見出しの上に小さい英字ラベル（letter-spacing: 0.18em）
 *   3 丸ゴシック（Zen Maru Gothic）
 *   4 大きい余白（セクション間 100px 前後）
 *
 * 角丸を大きく取りすぎない、影を多用しない。
 * それらは「AIが作ったサイト」の記号として読まれやすいため。
 */

:root {
  --bg:       #fffdf7;
  --bg-alt:   #fff6de;
  --ink:      #3a3226;
  --ink-soft: #8a7f6d;
  --accent:   #f5c518;
  --line:     #eadfc6;
  /* セクションの上下に入る余白。上下ぶんが足されるので、
     セクションの間隔はこの2倍になる。仕様書 §6 は100px前後。 */
  --gap:      clamp(2.4rem, 6vw, 4rem);

  --measure: 46rem;
}

/* ---- 土台 ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  font-size: 16px;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wrap {
  width: min(100% - 2.5rem, 62rem);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--bg);
  padding: 0.5rem 1rem;
  border: 2px solid var(--accent);
}

/* ---- ヘッダー ---- */

.head {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.head__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 1.1rem 0;
}

/* サイト名は手描きのロゴ。
 *
 * 高さで揃える。横幅は字数で決まるものなので、高さを決めれば形が保たれる。
 * 元画像は真っ黒で本文の色（--ink）より濃いため、少し薄くして馴染ませる。
 * プロフィールの茶々丸と同じ扱い。 */
.head__home {
  display: inline-flex;
  text-decoration: none;
}

/* 幅で決めて高さは成り行きにする。高さを決めて幅を auto にすると、
 * 画面が狭いときに横がはみ出す（320pxで .wrap の内側が280pxしかない）。
 * 幅が 100% を超えられない形にしておけば、その事故が起きない。 */
.head__home img {
  display: block;
  width: min(100%, clamp(10rem, 26vw, 13.5rem));
  height: auto;
  opacity: 0.82;
}

.head__home:hover img {
  opacity: 1;
}

.head__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.head__nav a {
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.head__nav a:hover { color: var(--ink); }

.head__nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---- 見出し ---- */

.hero {
  padding: calc(var(--gap) * 0.28) 0 calc(var(--gap) * 0.55);
  background: var(--bg-alt);
  text-align: center;
}

/* サイト名と説明だけ左に寄せる。
 * .hero ごと left にすると動画のタイトルまで左に付くので、.wrap の中だけにする。 */
.hero .wrap { text-align: left; }

/* サイト名と動画のあいだは詰める。ひと続きの見せ場にする。 */
.hero .wrap + .stage { margin-top: 1.6rem; }

.sec__label {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* ヘッダーと同じ手描きのロゴ。ここが本体で、上のは小さく置いた版。
 * 同じファイルなので2枚目の読み込みは起きない。
 * 高さで揃えるのはヘッダーと同じ理由。薄さも揃えて、同じ印に見せる。 */
.hero__title {
  margin: 0;
  line-height: 0;
}

.hero__title img {
  display: block;
  width: min(100%, 30rem);
  height: auto;
  opacity: 0.82;
}

/* 薄い字にしない。ここはサイトの説明なので、本文と同じ濃さで読ませる。 */
.hero__lead {
  margin: 0.9rem 0 0;
  max-width: 36rem;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  line-height: 1.95;
  color: var(--ink);
}

/* 名前に色は付けない。太さだけで示す。 */
.hero__name { font-weight: 700; }

/* ---- セクション（交互に背景色が変わる） ---- */

.sec { padding: var(--gap) 0; }

main .sec:nth-of-type(even) { background: var(--bg-alt); }

.sec__title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* 見出しの横にそっと添える絵。
 * 文字より少し大きいくらいに留めて、主張させない。
 * 真っ黒なままだと本文の色より濃くなるので、少し薄くして馴染ませる。 */
.sec__icon {
  display: inline-block;
  height: 1.5em;
  width: auto;
  margin-left: 0.45em;
  vertical-align: -0.32em;
  opacity: 0.82;
}

.sec__title::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 3px;
  margin-top: 0.8rem;
  background: var(--accent);
  border-radius: 2px;
}

.sec__note {
  margin: 0 0 2rem;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.sec__title + .rows,
.sec__title + .profile,
.sec__title + .prose { margin-top: 2rem; }

/* ---- 本文 ---- */

.prose {
  max-width: var(--measure);
}
.prose h2 { font-size: 1.2rem; margin: 2.2rem 0 0.6rem; }
.prose h3 { font-size: 1.05rem; margin: 1.8rem 0 0.4rem; }
.prose p { margin: 0 0 1.2rem; }
.prose ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.prose a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }

.empty {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.more {
  margin: 1.8rem 0 0;
  font-size: 0.92rem;
}
.more a {
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

/* ---- 公式への導線 ---- */

.official {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.official__btn {
  display: inline-block;
  padding: 0.85rem 1.7rem;
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
}

.official__btn:hover { filter: brightness(1.06); }

/* ---- プロフィール ---- */

.profile {
  margin: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  border-top: 1px solid var(--line);
}

.profile > div {
  display: flex;
  gap: 1rem;
  padding: 0.85rem 0.2rem;
  border-bottom: 1px solid var(--line);
}

.profile dt {
  flex: 0 0 7.5rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.profile dd { margin: 0; }

/* ---- 一覧 ---- */

.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1.2rem;
  padding: 1rem 0.2rem;
  border-bottom: 1px solid var(--line);
}

.row__date {
  flex: 0 0 8.5rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.row__body { flex: 1 1 18rem; }

.row__main {
  margin: 0;
  line-height: 1.7;
}

.row__meta {
  margin: 0.15rem 0 0;
  color: var(--ink-soft);
  font-size: 0.83rem;
  line-height: 1.7;
}

.row__link {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.row__link:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* 行のどこを押しても、その行の公式ページへ飛ぶ。
 *
 * このサイトの仕事は読者を公式に送ること（仕様書 §4）なので、
 * 当たり判定は「公式↗」の5文字ぶんではなく行全体にする。
 * ただし <a> で行を丸ごと包むと、中の引用元リンクが <a> の入れ子になって
 * HTMLとして壊れる。リンクの実体は「公式↗」1つのままにして、
 * その当たり判定だけを疑似要素で行いっぱいに広げる。
 *
 * 引き換えに、行の文字をマウスでドラッグして選べなくなる。
 * 日付もタイトルも公式側に同じものがあるので、ここでは飛べることを取る。 */
.row { position: relative; }

.row__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* 引用元や感想の中のリンクは重なりより上に出す。押せなくなると
 * 「画像の例外」（仕様書 §3）で示した出典に辿り着けなくなる。 */
.row__body a {
  position: relative;
  z-index: 1;
}

/* 行のどこかに触れたら「公式↗」も一緒に光らせる。
 * 行全体が押せることが、押す前に分かるように。 */
.row:hover .row__link {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---- 日付の札（今日・予定） ---- */

.row__badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  vertical-align: 0.08em;
}

/* 「予定」はこれから。塗らずに枠だけにして、記録と区別する。 */
.row__badge:not(:empty) { white-space: nowrap; }

.rows .row__badge { font-weight: 500; }

/* ---- 引用元・関連リンク ----
 *
 * TikTokやXは埋め込まない。外部スクリプトが要るうえ、
 * サムネイルURLに期限が入っていて5年もたない。
 * リンクなら永続するし、消えたときはリンクチェックが気づく。
 */

.refs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.7rem 0 0.2rem;
  padding: 0;
  list-style: none;
}

.refs__a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.8rem;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.refs__a:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.refs__site {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.refs__label { color: var(--ink-soft); }

.refs__arrow { color: var(--ink-soft); font-size: 0.72rem; }

/* 画像付きの引用元（仕様書 §3「画像の例外」）。
 * 画像は保存せず、投稿元を参照するだけ。投稿が消えれば表示も消える。 */

.refs--cards {
  gap: 0.8rem;
}

/* 引用元が2つ以上あるときは横に並べる。
 *
 * 24rem 固定だと、置き場の幅が足りず必ず縦に積まれていた。
 * 投稿と動画の2枚で行の高さが667pxになり、一覧として読めなくなる。
 *
 * basis を 16rem にして、入るときだけ横に並ぶようにする。
 * 狭い画面では 100% になって1枚ずつに戻る（説明文が潰れないため）。
 * max-width は、1枚しかないときに横いっぱいに伸びないようにするもの。 */
.refs__card {
  flex: 1 1 min(100%, 16rem);
  max-width: 24rem;
}

.refs__card a {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.refs__card a:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.refs__card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* 切り取る位置を上に寄せる。
   *
   * 投稿画像は縦長のことが多い（454×680 など）。16/9 の枠に cover で入れると
   * 高さの4割弱しか映らず、中央のままだと上から31%〜69%の帯だけが残る。
   * 人物写真の顔はだいたい上から1〜4割にあるので、中央で切ると顔が消えて
   * 首から下だけが並ぶ。誰の記事か見て分からなくなる。
   *
   * 10% は縦長・横長の実物4枚で確かめた値。顔と見出しが枠に入り、
   * 代わりに落ちるのは足元や余白で、意味を持つ部分ではない。 */
  object-position: center 10%;
  background: var(--bg-alt);
}

/* 既定の上寄せが合わない画像だけ、データ側から上書きする。
 * 投稿画像の作りは媒体ごとに違うので、CSSで一律には決めきれない。
 * 指定するのは links[].crop（top / center / bottom）。 */
.refs__card img[data-crop="top"]    { object-position: center top; }
.refs__card img[data-crop="center"] { object-position: center; }
.refs__card img[data-crop="bottom"] { object-position: center bottom; }

.refs__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem 0.65rem;
  font-size: 0.78rem;
}

.refs__card .refs__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 「どこの誰の、いつの投稿か」。仕様書 §3「画像の例外」が求めている表示。
 * 本文は出さない。アカウント名と投稿日は事実なので出してよい。 */
.refs__meta {
  color: var(--ink-soft);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* カードでは行を分ける。ラベルと同じ行に入れると3つとも潰れる。 */
.refs__card .refs__meta { flex: 0 0 100%; }

/* ---- 運営者の感想 ----
 *
 * 事実と混ざって見えないようにする（仕様書 §3）。
 * 区別を色だけに任せない。「感想」の札を必ず出す。
 * 色が見えない人にも、読み上げにも、白黒印刷にも、区別が残る。
 */

.note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.7rem 0 0.2rem;
  padding: 0.7rem 0.9rem;
  background: rgba(245, 197, 24, 0.09);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  font-size: 0.88rem;
  line-height: 1.85;
}

.note__tag {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.note__main {
  min-width: 0;
  flex: 1 1 auto;
}

/* 感想は運営者が書いた文章そのまま。行の分け方も本人の書き方なので、
   改行を潰さずに出す。連続する空行はまとめられる（pre-line の挙動）。 */
.note__body {
  min-width: 0;
  margin: 0;
  white-space: pre-line;
}

/* 長い感想を3行で畳む。
 *
 * このクラスを付けるのは app.js。HTMLに最初から書かない。
 * 書いてしまうと、JSが動かない環境で4行目以降が読めなくなる。
 * 畳むのは「見やすさ」のためであって、隠すためではない。
 *
 * line-clamp は折り返し後の見た目の行数を数える。長い1行が2行に
 * 折り返された場合もその通りに数えるので、枠の高さが揃う。 */
.note__body.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* 続きボタン。感想の主役は本文なので、控えめに置く。 */
.note__more {
  margin-top: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  cursor: pointer;
}

.note__more:hover {
  color: var(--ink);
}

.note__more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- セトリ ---- */

.setlist {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.setlist__title { margin: 0; font-size: 1.05rem; }
.setlist__title span { color: var(--ink-soft); font-size: 0.85rem; font-weight: 400; }
.setlist__meta { margin: 0.2rem 0 1rem; color: var(--ink-soft); font-size: 0.85rem; }
.setlist__songs { margin: 0; padding-left: 1.6rem; }
.setlist__songs li { padding: 0.15rem 0; }
.setlist__songs .is-absent { color: var(--ink-soft); }
.setlist__note { color: var(--ink-soft); font-size: 0.82rem; }

/* ---- 年月でたたむ ----
 *
 * details/summary をそのまま使う。JSは要らない。
 * JSが止まっても開閉できるし、検索やページ内検索も中身を拾える。
 */

.months {
  border-top: 1px solid var(--line);
}

.month {
  border-bottom: 1px solid var(--line);
}

.month__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  padding: 0.95rem 0.2rem;
  cursor: pointer;
  list-style: none;
  transition: background 0.2s ease;
}

.month__head::-webkit-details-marker { display: none; }

.month__head:hover { background: rgba(245, 197, 24, 0.07); }

/* 開閉の印。閉じているとき右向き、開くと下向き。 */
.month__head::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 0.42rem;
  border-color: transparent transparent transparent var(--ink-soft);
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

.month[open] > .month__head::before {
  transform: rotate(90deg) translateX(-1px);
}

.month__when {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.month__count {
  flex: 0 0 auto;
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

/* 閉じたままでも誰が書いたか見える */
.month__who {
  flex: 1 1 14rem;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.7;
}

.month .rows {
  border-top: 1px solid var(--line);
  margin: 0 0 0.6rem;
}

.month .row:last-child { border-bottom: none; }

/* 折りたたみの中身は最初から見えている扱いにする。
   details が閉じている間 IntersectionObserver が反応せず、
   開いたときに透明のままになるのを防ぐ。 */
.js .month .reveal { opacity: 1; transform: none; }

/* ---- こらむの一覧 ----
 *
 * 一覧は日付と題だけ。中身は開いて読むもの。
 * 冒頭を抜き出して並べると、開く理由が先に消える。 */

.cols {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cols__item { border-bottom: 1px solid var(--line); }

.cols__item:first-child { border-top: 1px solid var(--line); }

.cols__link {
  display: block;
  padding: 1.5rem 0.2rem;
  text-decoration: none;
}

.cols__link:hover { background: rgba(245, 197, 24, 0.07); }

.cols__date {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.cols__title {
  display: block;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.6;
}

.cols__link:hover .cols__title {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}

.cols__lead {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* ---- ページ送り ----
 *
 * 静的サイトなので /news/2/ のような実ページになる。
 * いまのページは押せない札にする。押せるのに動かない、をなくす。 */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1rem;
  margin-top: 2.6rem;
  padding-top: 2rem;
}

.pager__nums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 数字は枠で囲まない。ページの本体は上の一覧で、ここは添えるもの。
   いまのページは押せないので、色を薄くして押せないことを示す。 */
.pager__nums a,
.pager__now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.pager__nums a { color: var(--ink); }

.pager__nums a:hover {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

.pager__now { color: var(--ink-soft); opacity: 0.55; }

.pager__arrow {
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
}

.pager__arrow:hover { color: var(--ink); }

/* 端に来たら見せない。場所は空けたままにして、
   めくるたびに数字の位置が横にずれないようにする。 */
.pager__arrow.is-off { visibility: hidden; }

/* ---- お問い合わせ ----
 *
 * 見た目は普通のフォームだが、送信先はこのサイトではない。
 * 押すと mailto: が組み立てられて、読む人自身のメールソフトが開く。
 *
 * フォームを出すのは .js が付いているとき、つまりJSが動いているときだけ。
 * 動かない環境では宛先の案内だけが残る。窓口は閉じない（仕様書 §2）。
 * 動かないのに押せるボタンを見せて、無反応で終わらせるほうが不親切。
 */

.contact {
  max-width: var(--measure);
}

.contact__lead {
  margin: 0 0 1.2rem;
}

.contact__form { display: none; }
.js .contact__form { display: block; }

.contact__privacy {
  margin: 0 0 2rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.contact__privacy strong { color: var(--ink); }

.field {
  margin: 0 0 1.8rem;
  padding: 0;
  border: 0;
}

.field__label {
  display: block;
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 700;
}

/* 「任意」「必須」の札。色だけに頼らず文字で書く。
   感想の札と同じ考え方で、色が見えない人にも読み上げにも残るように。 */
.field__tag {
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  vertical-align: 0.08em;
}

.field__tag--req {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

.field__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  /* 入力欄だけ別の書体になると、書いた文字が本文と地続きに見えない */
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.8;
}

.field__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.field__area {
  resize: vertical;
  min-height: 9rem;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choices__label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.choices__label input { accent-color: var(--accent); }

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 2rem 0 0;
}

.contact__send,
.contact__copy {
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.contact__send {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink);
}

/* コピーは「開かなかったとき」の逃げ道。
   主役ではないので、塗らずに枠だけにして並びの強さを分ける。 */
.contact__copy {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-weight: 500;
}

.contact__send:hover { filter: brightness(1.06); }
.contact__copy:hover { color: var(--ink); border-color: var(--accent); }

/* 押したあと何が起きたかを必ず文字で返す。
   メールソフトは別のアプリで開くので、画面上は何も変わらないことがある。 */
.contact__status {
  margin: 1rem 0 0;
  min-height: 1.9em;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.contact__direct {
  margin: 2.4rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--line);
}

.contact__sub {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.contact__address {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

.contact__address a {
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

.contact__direct p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* ---- フッター ---- */

.foot {
  margin-top: var(--gap);
  padding: calc(var(--gap) * 0.7) 0 3rem;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.foot__notice {
  max-width: var(--measure);
  margin: 0 0 1rem;
  line-height: 1.9;
}

.foot__notice strong { color: var(--ink); }

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.foot__links a { text-decoration-color: var(--line); text-underline-offset: 3px; }
.foot__links a:hover { color: var(--ink); }

.foot__copy { margin: 1.6rem 0 0; font-size: 0.8rem; }

/* ---- 画面が狭いとき ---- */

@media (max-width: 40rem) {
  .row__date { flex-basis: 100%; }
  .profile dt { flex-basis: 6rem; }
}

/* ---- スクロールで出現 ----
 *
 * .js が付いているときだけ透明にする。
 * JSが落ちた環境で本文が透明のまま消えるのを防ぐため、
 * 初期状態を「見える」側に置いてある。
 */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 0.68, 0.3, 1);
}

/* 並んだものは少しずつ遅らせて出す。順に咲いていくように見せる。 */
.js .reveal.is-in:nth-child(2) { transition-delay: 0.06s; }
.js .reveal.is-in:nth-child(3) { transition-delay: 0.12s; }
.js .reveal.is-in:nth-child(4) { transition-delay: 0.18s; }
.js .reveal.is-in:nth-child(5) { transition-delay: 0.24s; }

/* ---- 横スクロールカルーセル ----
 *
 * scroll-snap だけで成立する。JSは前へ/次へボタンのためだけ。
 * JSが動かなくても、指やトラックパッドで普通に横スクロールできる。
 */

.carousel { position: relative; }

.carousel__track {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0.25rem 0 1.25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.carousel__track::-webkit-scrollbar { height: 8px; }
.carousel__track::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

.carousel__item {
  flex: 0 0 min(76%, 19rem);
  scroll-snap-align: start;
}

.carousel__ctrl {
  display: none;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

/* JSが動いたときにだけ現れる。押しても何も起きないボタンを置かない。 */
.carousel.has-ctrl .carousel__ctrl { display: flex; }

.carousel__btn {
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.carousel__btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
}

.carousel__btn:active:not(:disabled) { transform: scale(0.94); }

.carousel__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---- カード ---- */

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem 1.4rem 1.3rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  /* サムネイルを角まで届かせる。はみ出しは角丸で切る */
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

/* カードの頭に乗せるサムネイル。
 * 内側の余白を打ち消して、左右と上は端まで出す。 */
.card__thumb {
  display: block;
  margin: -1.5rem -1.4rem 0.8rem;
}

.card__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-alt);
}

.sec:nth-of-type(even) .card { background: #fffdf7; }

.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.card__meta {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

.card__title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.6;
}

.card__sub {
  margin: 0;
  font-size: 0.83rem;
  color: var(--ink-soft);
}

.card__link {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.card__link:hover { color: var(--ink); }

/* ---- 動画のステージ（サイト名の真下） ----
 *
 * 1本を大きく見せて、横に流れて次へ移る。
 * scroll-snap で成立させ、自動送りだけを app.js が担当する。
 * JSが止まっても、指やトラックパッドで普通に横スクロールできる。
 *
 * 両端に次の動画を少しだけ覗かせる。
 * 「まだ続きがある」「横に動く」ことが、触る前に分かるようにするため。
 */

.stage { position: relative; }

.stage__track {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0 0 0.5rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.stage__track::-webkit-scrollbar { display: none; }

.stage__item {
  flex: 0 0 min(100% - 3.5rem, 60rem);
  scroll-snap-align: center;
  text-align: left;
}

/* 両端の余白ぶん、最初と最後も中央に来るようにする */
.stage__track::before,
.stage__track::after {
  content: "";
  flex: 0 0 max(0.25rem, calc((100% - min(100% - 3.5rem, 60rem)) / 2 - 1rem));
}

.stage__open,
.stage__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #2a251c;
}

.stage__open {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 26px rgba(58, 50, 38, 0.13);
}

.stage__open:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 34px rgba(58, 50, 38, 0.2);
}

.stage__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 縦動画は切り取らずに収める */
.stage__item[data-shorts] .stage__thumb { object-fit: contain; }

.stage__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.93);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
  transition: background 0.25s ease, transform 0.25s ease;
}

.stage__play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.8rem 0 0.8rem 1.35rem;
  border-color: transparent transparent transparent var(--ink);
  transform: translateX(3px);
}

.stage__open:hover .stage__play {
  background: var(--accent);
  transform: scale(1.09);
}

.stage__cap { padding: 0.85rem 0.2rem 0; }

.stage__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.6;
}
.stage__title a { text-decoration-color: var(--line); text-underline-offset: 3px; }
.stage__title a:hover { text-decoration-color: var(--accent); }

.stage__channel {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ---- ステージの操作 ---- */

.stage__ui {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

/* JSが動いたときにだけ出す。押しても効かない部品を置かない。 */
.stage.has-ctrl .stage__ui { display: flex; }

.stage__btn {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.stage__btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.stage__btn:active:not(:disabled) { transform: scale(0.94); }
.stage__btn:disabled { opacity: 0.32; cursor: default; }

.stage__dots {
  display: flex;
  gap: 0.45rem;
  margin: 0 0.5rem;
}

.stage__dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}

.stage__dot[aria-selected="true"] {
  width: 1.6rem;
  background: var(--accent);
}

/* ---- 細かい動き ---- */

.official__btn {
  transition: transform 0.18s ease, filter 0.18s ease;
}
.official__btn:hover { transform: translateY(-2px); }
.official__btn:active { transform: translateY(0) scale(0.98); }

.row {
  transition: background 0.2s ease;
}
.row:hover { background: rgba(245, 197, 24, 0.06); }

.more a {
  transition: letter-spacing 0.2s ease;
}
.more a:hover { letter-spacing: 0.06em; }

/* ---- 動きを減らす設定 ----
 *
 * 尊重する。飾りの動きは全部止めるが、内容は必ず見えるままにする。
 */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}