/* DYES IWASAKI Official Website — 静的再現サイト共通スタイル
   元サイト(Wix)のデザイントークンは crawl/extracted/design.md 参照。
   font_2(和文見出し)= メイリオ/ヒラギノ角ゴ、font_0(見出し)= marzo-w00-regular(未同梱、フォールバック)、
   font_1/7-10(補助)= helvetica-w01-light(未同梱、フォールバック)、font_3-6= raleway(セルフホスト済) */

:root {
  --color-bg: #ffffff;
  --color-text: #222222;
  --color-text-sub: #656565;
  --color-border: #c9c9c9;
  --color-muted: #979797;
  --color-accent: #27d3b4;
  --color-accent-dark: #309c89;
  --color-accent-light: #85f0dc;
  --site-width: 980px;

  --font-heading: 'marzo-w00-regular', 'Poppins', 'Montserrat', 'Raleway', sans-serif;
  --font-jp-heading: 'メイリオ', meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
  --font-en: 'raleway', sans-serif;
  --font-en-light: 'helvetica-w01-light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'raleway', 'helvetica-w01-light', 'Helvetica Neue', Helvetica, Arial,
    'メイリオ', meiryo, 'ヒラギノ角ゴ Pro W3', sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  /* ヘッダーロゴ削除(2026-07-29)に伴い、ナビ/ハンバーガーを右寄せに変更 */
  justify-content: flex-end;
  gap: 16px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  /* 元サイト仕様: 四角い枠線付き(会長指示 2026-07-30 検品部隊報告) */
  border: 1px solid var(--color-border);
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ハンバーガー→✕変形(本家準拠、会長判断不要の実装バグ修正)。
   aria-expandedはjs/site.jsで既にtoggle済みのためCSSのみで対応可能、JS改修不要。 */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span {
    transition: none;
  }
}

.global-nav ul {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-item {
  position: relative;
}

.nav-item > a {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-text);
  padding: 6px 2px;
  white-space: nowrap;
}

.nav-item > a:hover,
.nav-item.is-active > a {
  color: var(--color-accent-dark);
  border-bottom: 2px solid var(--color-accent);
}

.nav-item.has-submenu .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 140px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nav-item.has-submenu:hover .submenu,
.nav-item.has-submenu:focus-within .submenu,
.nav-item.has-submenu.is-open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu li a {
  display: block;
  padding: 8px 16px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.submenu li a:hover,
.submenu li.is-active a {
  color: var(--color-accent-dark);
  background: #f3fdfb;
}

/* ---------- Main layout ---------- */

.site-main {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 36px 20px 60px;
  min-height: 50vh;
}

/* 全ページ見出し統一(会長決定 2026-07-31「B案：全ページ統一」)。
   HOME(D2-a)の章見出し.ed-chapter__titleと同一のサイズ・ウェイト・字間を基準にし、
   フォントも英語見出し用の--font-en(raleway、セルフホスト済み)へ統一する
   (旧来のfont-jp-heading/メイリオは日本語見出し用のため、"PROFILE"等の英字見出しには
   本来不要だった)。clamp()でビューポート幅に連動させ、768px以下用の個別指定を廃止する
   (旧: デスクトップ80px/モバイル26pxの決め打ち値をclampへ統合)。

   修正(2026-07-31 会長指摘「全体的に文字がでかい」「DISCOGRAPHY見出しが見切れる/
   ゴースト数字と衝突する」): 旧clamp(36px,8vw,110px)は1440px幅で110px(clamp上限)に
   達し、最長見出し"DISCOGRAPHY"(11文字)が.ed-chapter__titleのmax-width:80%
   (980px*0.8=784px)にほぼ収まらず、右上に絶対配置される.ed-chapter__num
   (ゴースト数字、1440pxで190px角)と衝突していた(実測: 旧110pxでのDISCOGRAPHY文字幅
   は784px枠をはみ出し、ゴースト数字の左端と重複)。上限を72pxへ縮小し、実測で
   DISCOGRAPHYがmax-width内に収まりゴースト数字と重ならないことを確認して採用
   (詳細実測値はtmp_R8_提案/00_統合ログ_ステップ11.md参照)。新デザインとしての
   迫力を保つため、元の34px相当までは落とさず64〜80px軸の範囲で決定。
   モバイル下限も36px→32pxへ微調整。 */
.page-title {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(32px, 6.5vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  color: var(--color-text);
}

/* ---------- Home / hero ---------- */
/* 【2026-07-30 D2-a「間の暴発・標準」統合に伴い、HOME(page-home)の
   「1画面完結・縦flex」レイアウトは廃止した。旧.page-home / .page-home .site-mainの
   定義はここにあったが、D2-aは複数章を縦スクロールで見せる構成のため不要になった。
   HOME固有のスタイルは本ファイル末尾「D2-a HOME専用スタイル」セクションに集約している
   (.ed-main{padding-bottom:0}のみ、通常の.site-mainルールをそのまま活かす設計)。
   .heroは引き続きCoverセクションの背景配置(display:flexでの縦横中央寄せ)に使うため
   定義を維持する(flex:1 1 auto/min-height:0は親が非flex化した現在は単に無効化されるだけで無害)。 */
.hero {
  flex: 1 1 auto;
  min-height: 0;
  /* 616px = DISCOGRAPHYグリッド2カラム分(ジャケット292px×2 + gap32px)。
     vh/vw依存をやめ、他ページと同じ固定pxスケールに揃える。 */
  background-size: 616px auto;
  background-position: right center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
}

.hero__inner {
  text-align: left;
  padding: 0;
}

/* 会長指示 2026-08-03「Official Websiteとのバランス感と位置は元サイトを参考に」。
   元サイト(https://www.dyesiwasaki.com/ 1425px幅)の実測値:
     ロゴ 525x122px / タグライン 16px・字送り4.8px(0.3em)・幅196px
     => タグライン幅はロゴ幅の37%
   対して静的版は 260px vs 221.8px = 85% で、タグラインが太りすぎていた。
   会長評「元のサイズはでかすぎるかも」を汲み、ロゴは525pxまで上げず400pxとし、
   タグライン側を元サイトと同じ16px・0.3emへ戻して比率を55%まで寄せる。 */
/* ロゴの表示幅は --logo-w 1箇所で持つ(定義は親の.ed-cover__layer--mid側。
   CSS変数は継承でしか届かないため、兄弟のタグラインから参照できるよう親に置く)。
   タグラインの位置決めはこの幅に比例させる。%を使わないのは、marginの%が
   包含ブロック幅基準で解決されるところ、親が width:max-content のため
   基準幅が意図せず縮むため(実測: 400px想定に対し196pxで解決された)。 */
.hero__logo {
  max-width: var(--logo-w);
  margin: 0;
}

/* 会長指示 2026-08-03「もう少し大きくしたい」で 15px -> 17px、続く
   「もっとでかくしていい」で 21px相当まで拡大。

   ⚠ 罠: 親の.ed-cover__layer--midは中身に合わせて縮む箱で、その幅は
   最大要素である.hero__logo(max-width:min(70vw,260px))が決めている。
   そのためタグラインは260pxを超えると黙って2行に折り返し、行ボックスは
   1行分(36px)のまま2行目だけが枠外へ34pxはみ出していた(実測)。
   「要素の高さ÷line-height」で行数を見ると1行に見えてしまうため、
   検証はRange#getClientRectsで実際の行数を数えること。
   white-space:nowrapで折り返しを禁止し、箱をテキスト幅まで広げて解決する。
   幅がロゴ(260px)を超えるのは想定どおり(会長裁可済み)。
   モバイルでも1行を保つため、サイズはvw連動のclampで与える
   (375px時は約16px=実幅267px < 表示可能幅335px)。 */
/* 位置合わせ(会長指示 2026-08-03「オフィシャルウェブサイトこういう感じで同じ位置に、
   フォントも似た感じで」＋元サイトのロゴ画像を提示)。
   元サイトはタグラインをロゴ画像の"中"――「DYES IWASAKI」の真下の余白――に置いている。
   logo_new.png(900x195)をピクセル解析した実測値:
     円マーク x34-185 / 「D」の左端 x221 = 幅の24.56% / 文字下端 y133 = 高さの68.2%
     文字の下に61px(高さの31.3%)の余白があり、ここが元サイトでタグラインの入る場所。
   marginの%は包含ブロック(.ed-cover__layer--mid = ロゴ幅)の"幅"基準で解決されるため、
   %指定にしておけばPC(400px)でもモバイル(280px)でも同じ構図で追従する。
     margin-left  24.56%  … 「D」の左端に揃える
     margin-top   -6.4%   … ロゴ下端から持ち上げて文字下の余白へ入れる
                            (ロゴ高さ=幅x0.2167、その29.5%上げ = 幅x0.0639)
   フォントは元サイトの実測(lucida sans unicode / 字送り0.3em)に寄せる。 */
.hero__tagline {
  font-family: "Lucida Sans Unicode", "Lucida Grande", var(--font-en);
  font-weight: 400;
  letter-spacing: 0.3em;
  font-size: clamp(14px, 1.15vw, 16px);
  white-space: nowrap;
  /* 色は黒(本文色)に。会長指示 2026-08-03「色味も黒にしてほしい」。 */
  color: var(--color-text);
  /* 縦位置。ロゴ文字「DYES IWASAKI」の下端との間隔(gap)を一定pxに保つ。
     会長評: 7.9px=「少し離れてる」／0px(円マーク下端揃え)=「詰めすぎ」
     → その中間の 4px を採る。
     logo_new.png実測: 画像195/900 → ロゴ高 = --logo-w * 0.2167、
     文字下端は高さの68.21% ⇒ 文字下端からロゴ下端までは高さの31.79%。
       gap = margin-top + (行高-文字高)/2 + ロゴ高 * 0.3179
     行高 = 文字高 * 1.7 なので (行高-文字高)/2 = 0.35 * 文字高。よって
       margin-top = gap - 0.35 * 文字高 - 0.0689 * --logo-w
     文字高は--logo-wに比例しない(clamp)ため項を分けている。この形なら
     PC(400px/16px)・モバイル(263px/14px)のどちらでもgapは4pxで一定。 */
  margin: calc(4px - 0.35 * clamp(14px, 1.15vw, 16px) - 0.0689 * var(--logo-w)) 0 0 calc(var(--logo-w) * 0.2456);
  text-transform: none;
}

/* 重ねてある局所染色レイヤーは、字形・字送り・折り返し・位置の全てが
   本体と一致していないと染色が本体からズレる。上と同じ値を与える。 */
.hero__tagline-stain {
  font-family: "Lucida Sans Unicode", "Lucida Grande", var(--font-en);
  letter-spacing: 0.3em;
  font-size: clamp(14px, 1.15vw, 16px);
  white-space: nowrap;
  text-transform: none;
}

/* ---------- Profile ---------- */

/* メインビジュアル(元サイトは画面幅いっぱいの大型ネオン画像)。
   会長指示 2026-07-30: 静的版は小さな正方形写真になっていたため規模感を合わせる。 */
/* 大きさ(会長指摘 2026-08-03「でかすぎ」→「縦幅は戻して、単純にサイズが
   でかすぎるのでは」)。
   max-heightを詰める方法は誤りだった: object-fit:cover のため画像の上下を
   切り落としているだけで、写真そのものは縮まない。
   正しくは幅で絞る。元画像は2912x2184(4:3)。max-width:700pxなら表示は
   700x525となり、トリミングなしで全体が入り、かつ本文コンテナ(940px)より
   小さくなって縦の占有も560px→525pxに収まる。
   max-heightは会長指示により元の560pxへ戻す(この幅では発動しない=保険)。 */
.profile__hero {
  margin: 0 0 32px;
  max-width: 700px;
  max-height: 560px;
  overflow: hidden;
  border-radius: 4px;
}

.profile__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

/* 読み仮名との間隔(会長指摘 2026-08-03「間少しつめてもいいかも」)。
   marginは4pxしかなく、見た目の19.4pxのうち15.4pxは行ボックスの余白だった
   (本文用のline-height 1.7が効き、28px文字の上下に9.8pxずつの余白が付く)。
   marginを削っても15px残るため、見出しとして line-height を1.2まで詰める。
   結果、見た目の間隔は約12pxになる。 */
.profile__name {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 4px;
}

/* SNSアイコン8個(黒丸塗り+白抜きロゴ)。見出し「DYES IWASAKI」直下に横並び。 */
.profile__socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}

.profile__socials a {
  display: block;
  width: 34px;
  height: 34px;
  line-height: 0;
  transition: transform 0.15s ease;
}

.profile__socials a:hover {
  transform: scale(1.08);
}

.profile__socials img {
  width: 100%;
  height: 100%;
}

.profile__kana {
  color: var(--color-text-sub);
  margin: 0 0 8px;
}

.profile__role {
  font-family: var(--font-en-light);
  color: var(--color-text-sub);
  margin: 0 0 4px;
}

.profile__from {
  margin: 0 0 24px;
}

.profile__from a {
  color: var(--color-accent-dark);
  border-bottom: 1px solid var(--color-accent);
}

.profile__lead {
  margin: 0 0 20px;
  font-weight: 600;
}

.profile__bio p {
  margin: 0 0 16px;
}

.profile__credits,
.profile__tieup,
.profile__videos {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.profile__credits h3,
.profile__tieup h3,
.profile__videos h3 {
  font-size: 17px;
  margin: 0 0 14px;
}

.profile__videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.profile__video {
  position: relative;
  aspect-ratio: 16 / 9;
}

.profile__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 768px) {
  .profile__videos-grid {
    grid-template-columns: 1fr;
  }
}

.profile__credits ul {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.profile__credits li {
  font-size: 14px;
  color: var(--color-text-sub);
}

/* 実績リスト末尾からWORKSハブ(294件)へ送る導線。
   年表セクション「主なタイアップなど」廃止(2026-08-03)の受け皿。 */
.profile__credits-more {
  margin: 28px 0 0;
}

/* ---------- CONTACTフォーム ----------
   会長指示 2026-08-03「フォームを設置してほしい」。項目は元Wixサイトを踏襲
   (お名前* / メールアドレス* / 件名 / メッセージ)。
   見た目は枠線ボックスを使わず下線1本(WORKS検索欄と同じ方針。SaaS風を避ける)。 */
.contact-form {
  margin: 32px 0 0;
  max-width: 560px;
}

.contact-form__row {
  margin-bottom: 24px;
}

.contact-form__label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
  margin-bottom: 6px;
}

.contact-form__label span {
  color: var(--color-accent-dark);
  margin-left: 2px;
}

.contact-form__input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  padding: 8px 2px;
  font: inherit;
  font-size: 15px;
  color: var(--color-text);
  border-radius: 0;
  transition: border-color 0.2s ease;
}

.contact-form__input:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.8;
}

/* ボット除け。人間には見えないが display:none だと一部のボットに読まれるため
   画面外へ飛ばす。 */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__submit {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 40px;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.contact-form__submit:hover {
  opacity: 0.85;
}

.contact-form__submit[disabled] {
  opacity: 0.5;
  cursor: default;
}

.contact-form__status {
  margin: 16px 0 0;
  font-size: 14px;
  min-height: 1.6em;
}

.contact-form__status.is-error {
  color: #c0392b;
}

.contact-form__status.is-ok {
  color: var(--color-accent-dark);
}

/* ---------- GOODS(BOOTH商品一覧) ----------
   ナビのGOODSがBOOTHへの外部リンクだったのをサイト内ページへ変えたもの
   (会長採用 2026-08-03)。外部へ出るのは購入する直前(各カード/最下部リンク)だけ。 */
.goods-lede {
  margin: 0 0 28px;
  color: var(--color-text-sub);
}

.goods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.goods-card a {
  display: block;
  color: inherit;
}

.goods-card__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: #f4f4f4;
}

.goods-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.goods-card a:hover .goods-card__thumb img {
  transform: scale(1.04);
}

.goods-card__title {
  display: block;
  margin: 12px 0 4px;
  font-size: 14px;
  line-height: 1.6;
}

.goods-card__price {
  display: block;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
}

/* 「BOOTHで購入」は既定で隠し、ホバー/フォーカス時だけ出す
   (カードが並ぶ画面で同じ文言が17回並ぶのを避けるため)。 */
.goods-card__buy {
  display: block;
  margin-top: 6px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-accent-dark);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.goods-card a:hover .goods-card__buy,
.goods-card a:focus-visible .goods-card__buy {
  opacity: 1;
}

@media (hover: none) {
  .goods-card__buy {
    opacity: 1;
  }
}

.goods-more {
  margin: 40px 0 0;
}

@media (max-width: 480px) {
  .goods-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
}

/* ---------- MUSIC棚(.pl-shelf) ----------
   会長提示のYouTubeチャンネルページのUIに寄せた横スクロール棚(2026-08-03)。
   従来のMOVIE(動画8本を2カラムで個別埋め込み)を置き換えたもの。
   サムネはi.ytimg.comを直接参照する(他社MVサムネを自サイトへ複製しないため)。 */
.pl-shelf + .pl-shelf {
  margin-top: 36px;
}

.pl-shelf__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 14px;
}

.pl-shelf__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.pl-shelf__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-sub);
}

.pl-shelf__all:hover {
  color: var(--color-text);
}

.pl-shelf__play {
  font-size: 11px;
}

/* 送りボタンを重ねるため相対配置。トラック自体がスクロールコンテナ。
   min-width:0 が要る: grid/flexアイテムの既定 min-width:auto は「中身より小さくならない」
   ため、これが無いと横一列のカード群が祖先(.profile > .profile__main)ごと押し広げ、
   overflow-x:auto が効かずページ全体が横スクロールする(実測 body幅5342px/表示幅1265px)。 */
.profile,
.profile__main,
.profile__videos,
.pl-shelf,
.pl-shelf__viewport {
  min-width: 0;
}

.pl-shelf__viewport {
  position: relative;
}

.pl-shelf__track {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pl-shelf__track::-webkit-scrollbar {
  display: none;
}

.pl-card {
  flex: 0 0 200px;
  min-width: 0;
}

.pl-card a {
  display: block;
  color: inherit;
}

/* hqdefault.jpg は4:3(上下レターボックス)のため、16:9枠へcoverで入れて黒帯を落とす。 */
.pl-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #eee;
}

.pl-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.pl-card a:hover .pl-card__thumb img {
  transform: scale(1.05);
}

.pl-card__len {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* タイトルは2行で打ち切る(棚の高さを揃えるため)。 */
.pl-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 8px 0 2px;
  font-size: 13px;
  line-height: 1.5;
}

.pl-card__owner {
  display: block;
  font-size: 12px;
  color: var(--color-text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-shelf__nav {
  position: absolute;
  top: calc((200px / 16 * 9) / 2);
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
  transition: opacity 0.2s ease;
}

.pl-shelf__nav--prev {
  left: -12px;
}

.pl-shelf__nav--next {
  right: -12px;
}

.pl-shelf__nav:disabled {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .pl-card {
    flex: 0 0 150px;
  }

  .pl-shelf__nav {
    top: calc((150px / 16 * 9) / 2);
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .pl-shelf__nav--prev {
    left: -6px;
  }

  .pl-shelf__nav--next {
    right: -6px;
  }
}

/* ---------- 日本語本文の折り返し品質 ----------
   会長確認 2026-08-03「文章の改行が気になる部分があれば」。375pxで実測したところ、
   小書き仮名と長音符が行頭に落ちる禁則違反が出ていた:
     「学生時代にラ / ッパーとして」「などジ / ャンルの境界」「ゲ / ームタイトル」
   line-break:strict で小書き仮名・長音符の行頭を禁止する。
   あわせて word-break:auto-phrase(文節単位で折る)と text-wrap:pretty
   (最終行が1〜2文字だけ残るのを避ける)を指定。後者2つは未対応ブラウザでは
   無視されるだけで、従来どおりの折り返しに戻るため安全。 */
.profile__lead,
.profile__bio p,
.ed-profile__lede,
.credit-category li,
.goods-lede,
.works-hub__lead {
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 長い項目が2行になったとき、折り返した行を字下げして「同じ1項目の続き」だと
   一目で分かるようにする(会長指摘 2026-08-04「折り返しの感じどうにかできないか」)。
   これが無いと2行目が左端に戻り、隣の1行項目と並んで別項目に見える。
   1行で収まる項目の見た目は変わらない。横並びカテゴリでは下で打ち消す。 */
.credit-category li {
  padding-left: 1em;
  text-indent: -1em;
}

.credit-category--inline li {
  padding-left: 0;
  text-indent: 0;
}

/* 会長が意図して折った行(LINE_BREAK_FLUSH)では、上のぶら下げインデントを
   打ち消して1行目と同じ左端に揃える。自動折り返しではないので字下げは不要で、
   むしろ「空きすぎ」に見える(会長指摘 2026-08-04)。
   幅0のインライン要素に負のマージンを与えて後続の文字を左へ引き戻す。
   モバイルでは .lb 自体が無効化され折り返しに戻るため、これも打ち消す。 */
.credit-category .lb-flush {
  display: inline-block;
  width: 0;
  margin-left: -14px;
}

@media (max-width: 768px) {
  .credit-category .lb-flush {
    margin-left: 0;
  }
}

/* 会長が指定した位置での改行(.lb)。PC幅ではそのまま折り、モバイルでは
   無効化して自然な折り返しに戻す。PC前提の改行位置を狭い画面へ持ち込むと
   短い行と長い行が交互に出て崩れるため。日本語主体なので、改行を消しても
   前後が不自然に繋がることはない。 */
@media (max-width: 768px) {
  br.lb {
    display: none;
  }
}

/* 注: HOMEのPROFILE章リード(.ed-profile__lede)には .lb を入れていない。
   あの段落は js/site.js の splitLines() が読み込み時に文字単位へ分解して
   行を組み直すため、<br>はその時点で消費されCSSからは制御できない
   (display:noneにしても行数は変わらないことを実測で確認済み)。
   改行指定が効くのはPROFILEページ側の本文(.profile__lead / .profile__bio)だけ。 */

/* 短い名前だけが並ぶカテゴリ(◆ アーティスト・グループ)は横に流す。
   会長指摘 2026-08-03「縦一列なの微妙」。18名を1行1項目で積むと縦に
   間延びするため、折り返し可の横並びにして中黒で区切る。 */
.credit-category--inline ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}

.credit-category--inline li {
  display: inline-flex;
  align-items: center;
}

.credit-category--inline li:not(:last-child)::after {
  content: "・";
  color: var(--color-border);
  margin: 0 2px;
}

/* リスト末尾の「など」(会長指示 2026-08-03)。そのカテゴリが抜粋であることを示す。
   横並びの場合、直前の項目に付く中黒を消して「Reol など」と自然に繋げる
   (:has非対応ブラウザでは「Reol・など」となるだけで実害はない)。 */
/* liでもspanでも効かせる(縦リストでは直前の項目末尾のspanとして出る)。 */
.credit-category .etc {
  color: var(--color-text-sub);
}

.credit-category--inline li.etc::after {
  content: none;
}

.credit-category--inline li.etc {
  margin-left: 6px;
}

.credit-category--inline li:has(+ li.etc)::after {
  content: none;
}

/* 横並びの途中で行を折るための空アイテム(flexコンテナ内では<br>が効かないため)。
   幅100%を占めて次の項目を強制的に次行へ送る。中黒の区切りも出さない。
   モバイルでは1行に入る数が違うので無効化し、自動折り返しに任せる。 */
.credit-category--inline li.row-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
}

.credit-category--inline li.row-break::after {
  content: none;
}

@media (max-width: 768px) {
  .credit-category--inline li.row-break {
    display: none;
  }
}

/* 実績リストのカテゴリ別区切り(会長確定稿 2026-07-30 反映)。
   tieup-yearと同じ見出し+リスト構成で、カテゴリごとに縦積みする。 */
.credit-category {
  margin-top: 20px;
}

.credit-category:first-child {
  margin-top: 0;
}

.credit-category h4 {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-accent-dark);
  margin: 0 0 6px;
}

.tieup-year {
  margin-bottom: 18px;
}

.tieup-year h4 {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-accent-dark);
  margin: 0 0 6px;
}

.tieup-year p {
  margin: 0 0 4px;
  font-size: 14px;
}

/* ---------- Studio ---------- */

/* 元サイトは1枚ワイド表示(実測790x436px相当)+矢印送りのスライドショー
   (会長指示 2026-07-30: 検品部隊が突合。外部ライブラリなしの自前JS/site.jsで実装)。 */
.studio-photo {
  position: relative;
  max-width: 790px;
  aspect-ratio: 790 / 436;
  overflow: hidden;
  border-radius: 4px;
  background: #eee;
}

.studio-photo__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.studio-photo__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

.studio-photo__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.studio-photo__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-photo__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.studio-photo__nav:hover {
  background: #ffffff;
}

.studio-photo__nav--prev {
  left: 12px;
}

.studio-photo__nav--next {
  right: 12px;
}

/* キャプション(会長指示 2026-07-30: 「STUDIO / 」連結の重複表記バグを解消し、
   元サイト同様「DYES IWASAKI Private Studio」単体の見出しとして表示)。 */
.studio-photo__caption {
  margin: 16px 0 28px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 33px;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.equip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.equip-category h3 {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin: 0 0 10px;
}

.equip-category li {
  font-size: 13px;
  color: var(--color-text);
  margin-bottom: 6px;
  line-height: 1.5;
}

/* ---------- Discography ---------- */

/* 列数(会長指摘 2026-08-03「3列ってどう思う…？」)。
   minmax(260px)では940pxのコンテナに3列しか入らず、32件が11行になって
   最終行に2件だけ残り右端が空いていた(実測)。
   最小幅を200pxへ下げると 200*4 + gap32*3 = 896 <= 940 で4列に収まり、
   32 / 4 = 8行ちょうど、歯抜けが消える。
   auto-fillのため画面が狭まれば列数は自動で減る(375pxでは従来どおり1列)。 */
.releases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px;
}

/* ジャケット(サムネ)のみのタイル。タイトル・トラックリスト等は<template>内に
   格納しクリック時のライトボックス(works共通コンポーネント)でのみ表示する。 */
.release-card {
  cursor: pointer;
}

.release-card__jacket img {
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  transition: transform 0.25s ease;
}

.release-card:hover .release-card__jacket img {
  transform: scale(1.05);
}

/* ジャケット直下のタイトル(会長指示 2026-07-30: 元サイト同様に一覧へ復元)。
   worksの文字なしグリッドには影響させないためdiscography専用クラスとする。 */
.release-card__title {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
}

.release-card__noimage {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  background: #eee;
  border-radius: 4px;
}

/* 以下はモーダル(lightbox-box)内の詳細表示専用。 */
.release-card__date {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--color-text-sub);
  margin: 0 0 8px;
}

.release-card__tracks li {
  font-size: 13px;
  margin-bottom: 2px;
  color: var(--color-text);
}

.release-card__credit,
.release-card__note {
  font-size: 12px;
  color: var(--color-text-sub);
  margin: 8px 0 0;
}

.lightbox-box__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.lightbox-box__links .lightbox-box__link {
  margin: 0;
}

/* ---------- Works (1ページ統合＋年フィルタ、会長指示 2026-08-03) ----------
   旧: works2011〜works2026の16ページ＋左サイドバー縦積み年ナビ(見辛い)。
   新: 294件を1ページに集約し、横一列ピル型タブの年ナビで絞り込む。
   R7審査(works_W1.html 01_審査結果.md)の「検索ボックス+チップがSaaS風」
   指摘を踏まえ、検索ボックス・役割フィルタは実装せず年のみに絞ってエディトリアル
   トーン(白地+グレー+最小限のティール)を守る。 */

.works-hub__lead {
  max-width: 640px;
  margin: 8px 0 24px;
  color: var(--color-text-sub);
  font-size: 14px;
  line-height: 1.8;
}

.works-hub__noscript {
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--color-text-sub);
  background: #f7f7f7;
}

/* 会長実測(1440px)で12/12/5/5の不揃い4段に折り返る不具合が発覚(2026-08-03)。
   flex-wrapでの折り返しは項目数(17個)に対して幅の見積りが崩れやすく、
   「段がバラバラ」という会長の元の不満(縦16個の見辛さ)を別の形で再発させていた。
   flex-wrapをやめ、1段の横スクロール(overflow-x:auto)に変更して段組み自体を
   無くす。スクロールバーは非表示にしつつスクロール自体は維持する。 */
/* 余白(2026-08-03 会長指摘「スペース詰める」)。
   リード文「2011年から2026年まで。」を削除した結果、絞り込み欄と件数表示の
   周囲だけが間延びして見えたため、下側の余白を 40px -> 20px に詰める
   (件数表示 .works-hub__status 側も 32px -> 16px)。 */
.works-controls {
  margin: 0 0 20px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* JS有効時のみ画面上部に固定(絞り込み操作の到達性を確保)。fixedではなく
   stickyなのでルール「filter/transformがposition:fixedの祖先にならない」には
   抵触しない。JS無効時は固定せず通常フローのまま(操作不要のため)。 */
html.js .works-controls {
  position: sticky;
  top: var(--header-h, 64px);
  z-index: 30;
  background: var(--color-bg);
}

.works-year-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.works-year-nav::-webkit-scrollbar {
  display: none;
}

/* 修正(2026-08-03 会長指摘「Aに一回してみて」): 件数span削除(build_site.py側)後も
   1440pxでscrollWidth996px/clientWidth940pxと56pxはみ出していたため、gap 5px→4px・
   左右padding 12px→10pxで詰め、17個(ALL+2026〜2011)を940px幅の1段に収める
   (実測: scrollWidth=940px<=clientWidth940pxで収まりoverflow=0を確認)。 */
.year-tab {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  background: var(--color-bg);
  cursor: pointer;
  white-space: nowrap;
}

.year-tab:hover {
  border-color: var(--color-accent-dark);
  color: var(--color-accent-dark);
}

.year-tab.is-current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* .year-tab__count は会長指示(2026-08-03 A案採用)によりHTML側(build_site.py
   render_works_year_nav)から件数spanの出力を削除したため、対応するこのルールも
   撤去(各年の件数は works-year-heading__count に残っている)。 */

/* ---------- Works 検索(会長指示 2026-08-03「前作った検索もできたりするのはどう？」)
   R7審査(01_審査結果.md)で「検索ボックス+チップがSaaS風」と指摘された反省を踏まえ、
   枠線ボックス化はせず下線1本のみ・虫眼鏡アイコン無し・短いプレースホルダーに絞る。
   年ナビの下に控えめに配置(年ナビ行に詰め込むと横スクロールの間隔を圧迫するため)。 */
.works-search {
  display: none;
}

html.js .works-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  max-width: 260px;
}

.works-search__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  padding: 4px 2px;
  border-radius: 0;
}

.works-search__input::placeholder {
  color: var(--color-text-sub);
}

.works-search__input:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}

.works-search__clear {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--color-text-sub);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  visibility: hidden;
}

.works-search__clear.is-visible {
  visibility: visible;
}

.works-search__clear:hover {
  color: var(--color-text);
}

.works-hub__status {
  display: none;
  margin: 0 0 16px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--color-text-sub);
}

/* ヒット件数はJS(絞り込み)が動く時だけ意味を持つ。JS無効時は
   非表示のまま(全294件がそのまま並ぶため件数表示自体が不要)。 */
html.js .works-hub__status {
  display: block;
}

.works-hub__empty {
  margin: 40px 0;
  text-align: center;
  color: var(--color-text-sub);
  font-size: 14px;
}

.works-year-group {
  margin: 0 0 56px;
}

.works-year-group:last-child {
  margin-bottom: 0;
}

/* 絞り込みの非表示切替はJS有効時のみ(html.jsスコープ)。JS無効時は
   全294件が年見出し付きですべて読める状態を維持する。 */
html.js .works-year-group.is-hidden {
  display: none;
}

/* 検索でマッチしなかった個々のカードを隠す(年グループ自体は年フィルタでのみ
   出し分ける。検索は年グループ内のカード単位で絞り込む)。 */
html.js .work-card.is-search-hidden {
  display: none;
}

.works-year-heading {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
  color: var(--color-text);
}

.works-year-heading__count {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-sub);
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* ジャケット(サムネ)のみのタイル。タイトル等は<template>内に格納し
   クリック時のライトボックス(共通コンポーネント)でのみ表示する。 */
.work-card {
  cursor: pointer;
}

.work-card__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: #f2f2f2;
}

.work-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.work-card:hover .work-card__thumb img {
  transform: scale(1.05);
}

.work-card__noimage {
  width: 100%;
  height: 100%;
  background: #eee;
}

/* ---------- Lightbox (works/discography共通コンポーネント) ----------
   カード要素内の<template class="...__detail">の中身をクリック時に
   このオーバーレイへ複製表示する。site.jsのopenLightbox参照。 */

body.lightbox-lock {
  overflow: hidden;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-box {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 6px;
  padding: 40px 32px 32px;
  /* 内側スクロールバーを非表示にする(会長指示 2026-08-01「スクロールする感じの
     やつを外したい」)。スクロール自体は維持し、内容が溢れた場合の保険として残す。 */
  scrollbar-width: none;
}

.lightbox-box::-webkit-scrollbar {
  display: none;
}

.lightbox-box__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--color-text-sub);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-box__close:hover {
  color: var(--color-text);
}

.lightbox-box__media img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 20px;
}

.lightbox-box__title {
  font-size: 20px;
  margin: 0 0 8px;
  line-height: 1.4;
}

.lightbox-box__credit {
  font-size: 14px;
  color: var(--color-text-sub);
  margin: 0 0 20px;
}

.lightbox-box__link {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--color-accent);
  padding: 8px 20px;
  border-radius: 999px;
  overflow-wrap: break-word;
  word-break: break-all;
}

.lightbox-box__link:hover {
  background: var(--color-accent-dark);
}

/* ◆Streaming 直下に並ぶ配信URL(元サイトは本文テキスト扱い。こちらはクリック可) */
.lightbox-box__inline-link {
  color: var(--color-accent-dark);
  overflow-wrap: break-word;
  word-break: break-all;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .lightbox-box {
    padding: 36px 20px 24px;
  }
}

/* ---------- Works/Discography lightbox: 2カラム(元Wixサイト仕様の再現、会長指示 2026-08-01。
   worksへの適用拡大は会長指示2026-08-03「worksのジャケットクリック時をdiscographyと
   同じ仕様にしてほしい」)。
   画像を左、タイトル/トラックリスト(discographyのみ)/クレジット/リンクを右に並べる。
   768px以上でのみ2カラム化し、768px未満(横幅不足)は既存の縦積み(画像→情報)を維持する。
   works(render_work_item)もdiscography(render_release)と同じ.lightbox-box__media+
   .lightbox-box__infoの2要素構造でtemplateを出力しているため、同一ルールを両ページに
   適用できる。
   2026-08-02: 一度画像max-height+object-fit:coverの縮小表示に変更したが、トラックリストが
   長いアルバムでジャケットが上下に切り抜かれる不具合が発生したため撤回(会長指摘)。
   2026-08-03、2カラムへ復元。画像は正方形の縦横比を保ったまま全体表示し
   (object-fit:coverによる切り抜きは行わない)、情報側(右カラム)がトラックリストで
   縦に伸びても画像側は正方形のまま上部に留まる。
   会長実機確認(「黒鳥姫」等)で「右カラムがスカスカ、情報が縦中央に浮いて見える」と
   再指摘(2026-08-03)。align-items:centerだけでは画像とdiscoと同じ960px/48%のままだと
   絶対的な余白量が大きすぎたため、worksはモーダル自体を640pxまで縮小し画像比率も
   42%に下げ(=画像の絶対サイズを縮小)、かつalign-items:flex-startで情報を画像上端に
   揃える(centerによる「浮遊感」も解消)。discographyは960px/44%/stretchのまま不変。 */
@media (min-width: 769px) {
  .page-discography .lightbox-box {
    max-width: 960px;
  }

  /* 修正(2026-08-03 会長指摘「文章が折り返しちゃう」): 640px/42%だと右カラム(情報側)
     幅が実測302px相当になり、294件中264件(89.8%)しか1行に収まらなかった。
     works.jsonの全294件のcreditを実DOM(.lightbox-box__creditと同条件)で計測した
     結果、右カラム幅を350px程度まで広げるとカバー率が278/294(94.6%)まで伸び、
     そこから420pxまでさらに広げても+1%(281/294)しか伸びない実測上の頭打ち点だった
     (95%以上に届けるには520px超が必要で、それは「広げすぎるな」との指摘に反する)。
     640→680pxへの拡大(+40px)と画像比率42%→38%の組み合わせで右カラムを約350pxまで
     広げ、94.6%のカバー率を確保する。white-space:nowrapでの強制1行化はしない
     (長いクレジットが枠外に溢れるため)。 */
  /* 修正(2026-08-03 会長指摘「WORKSとディスコグラフィでジャケットの表示サイズが
     ちがう。WORKSでかくしてもいい」): 680px/38% では画像が約258pxで、
     discography(960px/44% = 約422px)の6割程度しかなかった。
     画像だけ拡大すると右カラムが狭まり「文章が折り返す」問題(上記)が再発するため、
     モーダル自体を860pxへ広げたうえで画像比率を49%に上げる。
       画像   860*0.49 = 約421px … discographyの422pxとほぼ同一
       右カラム 860-421-32(gap) = 約407px … 従来の350pxより広く、折り返しも改善
     discographyは960px/44%のまま不変。 */
  .page-works .lightbox-box {
    max-width: 860px;
  }

  .page-discography .lightbox-box__content,
  .page-works .lightbox-box__content {
    display: flex;
    gap: 32px;
  }

  .page-discography .lightbox-box__content {
    align-items: stretch;
  }

  /* worksは情報量が少なく画像の下端まで内容が届かないため、情報ブロックを
     画像の上端に揃える(centerだと視覚的に宙に浮いて見えるため上寄せに変更)。 */
  .page-works .lightbox-box__content {
    align-items: flex-start;
  }

  .page-discography .lightbox-box__media {
    flex: 0 0 44%;
    margin-bottom: 0;
  }

  .page-works .lightbox-box__media {
    flex: 0 0 49%;
    margin-bottom: 0;
  }

  .page-discography .lightbox-box__media img,
  .page-works .lightbox-box__media img {
    width: 100%;
    height: auto;
    margin-bottom: 0;
  }

  .page-discography .lightbox-box__info,
  .page-works .lightbox-box__info {
    flex: 1 1 auto;
    min-width: 0;
  }

}

/* ---------- Contact ---------- */

.contact {
  max-width: 560px;
}

.contact h2 {
  font-family: var(--font-en);
  font-size: 22px;
  margin: 0 0 12px;
}

/* 黒丸塗りつぶし背景+白抜きロゴ。見出し直後に配置(元サイト仕様、
   会長指示 2026-07-30)。profile__socialsと同じ画像を共用。 */
.contact__socials {
  display: flex;
  gap: 12px;
  margin: 0 0 20px;
}

.contact__socials a {
  display: block;
  width: 36px;
  height: 36px;
  line-height: 0;
  transition: transform 0.15s ease;
}

.contact__socials a:hover {
  transform: scale(1.08);
}

.contact__socials img {
  width: 100%;
  height: 100%;
}

.contact__lead {
  margin: 0 0 16px;
}

.contact__note {
  font-size: 13px;
  color: var(--color-text-sub);
  margin: 0 0 24px;
  padding: 16px;
  background: #f7f7f7;
  border-radius: 4px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 24px 20px 40px;
  text-align: center;
}

.site-footer p {
  font-family: var(--font-en-light);
  font-size: 12px;
  color: var(--color-text-sub);
  margin: 0;
}

/* ---------- Responsive ---------- */

/* 縦の短いウィンドウ保護: hero高さが616px指定(高さ464.1px)を下回る環境では
   高さ基準に切り替えて1画面を維持する。モバイル(cover指定)には及ぼさない。 */
@media (min-width: 769px) and (max-height: 640px) {
  .hero {
    background-size: auto 92%;
  }
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .global-nav {
    position: fixed;
    top: var(--header-h, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    padding: 16px 0;
  }

  .global-nav.is-open {
    transform: translateX(0);
  }

  .global-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-item > a {
    display: block;
    padding: 14px 24px;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-item.has-submenu .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    display: none;
    padding-left: 12px;
  }

  .nav-item.has-submenu.is-open .submenu {
    display: block;
  }

  .profile__hero {
    max-height: 280px;
  }

  .site-main {
    padding: 24px 16px 48px;
  }

  .hero {
    padding-left: 0;
    background-size: cover;
    background-position: center;
  }

  .hero__inner {
    max-width: calc(100vw - 32px);
  }

  /* モバイルはロゴを280pxへ。タグラインの位置決めもこの値に連動する。 */
  .ed-cover__layer--mid {
    --logo-w: 280px;
  }

  /* 年ナビは常時ピル型横並び(デスクトップと共通)のため、モバイル専用の
     上書きは不要。ここでは間隔だけ詰める。 */
  .works-year-nav {
    gap: 5px;
    margin-bottom: 24px;
    padding: 12px 0;
  }

  .year-tab {
    font-size: 11px;
    padding: 5px 10px;
  }

  /* サムネのみ2列グリッド(元サイトのモバイル仕様に合わせる) */
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .studio-photo__nav {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .studio-photo__caption {
    font-size: 24px;
    margin: 14px 0 24px;
  }
}

/* =====================================================================
   D2-a「間の暴発・標準」HOME専用スタイル
   (tmp_R8_提案/D2_a_間の暴発_標準/index_D2_a.html 統合、2026-07-30)
   ---------------------------------------------------------------------
   ここから下のセレクタは全て "ed-" プレフィックス(index.htmlの<main>にのみ
   付与される.ed-mainおよびその子孫)で、既存の他20ページのクラス名とは
   非衝突(D案骨格仕様.md 5章で確認済み)。.ed-main自体もHOME(body.page-home)
   のmain要素にしか出現しないため、他ページのレイアウトへ漏れることはない。
   詳細設計・アニメ秒数・イージングは 設計メモ.md 2-3章参照。
   ===================================================================== */

.ed-main { padding-bottom: 0; }

/* ---------- Cover (hero) ---------- */
/* Cover下端(=Z水彩が見切れる位置)からティッカーまでの間隔。
   8pxしかなく、画像の直後に帯が始まって窮屈だった
   (会長指摘 2026-08-03「このスクロールが↑に詰まってる」)。48pxへ開ける。 */
.ed-cover { position: relative; margin-bottom: 48px; }

.ed-cover__hero {
  position: relative;
  /* 修正(2026-07-31 会長指摘「上に詰めてほしい」): 旧76vhは1440px高900pxで684pxに
     達し、.hero(display:flex;align-items:center)による縦中央寄せと相まって
     ヘッダー直下に画面の半分以上の空白ができていた。52vhへ縮小し、画像(background)
     とロゴブロック(.hero__inner)は引き続き同じhero矩形内で中央寄せのまま
     (両者の相対関係は維持)、全体を上へ詰める。詰めすぎるとヘッダーに密着するため
     適度な間は残す(実測値はtmp_R8_提案/00_統合ログ_ステップ11.md参照)。 */
  /* 一度44vhまで詰めたが、Cover画像の見え方が変わるため会長指示で52vhへ戻した
     (2026-08-03「トップページの画像サイズ元に戻して」)。
     ヘッダー下端からロゴまでは242pxに戻る。 */
  min-height: 52vh;
  padding: 0;
  /* 背景画像自体はHTML側のインラインstyle(build_site.py)で注入する
     (site.css本体に画像URLをハードコードしない既存流儀に合わせる)。 */
}

/* =====================================================================
   Coverホバー演出「H1light6」統合(2026-08-02、_work/tmp_R10_カバー/H1_深度より)
   ---------------------------------------------------------------------
   試作段階では複数のバリアント([data-h1-variant]属性)を切り替えて比較する
   実装だったが、本体はH1light6の1本のみを採用する単一実装のため、
   属性セレクタによるスコープは全て外し、通常のクラスセレクタにしている
   (「属性が付いていないと効かない」という事故を防ぐため)。
   採用する演出は4点:
   1) Z水彩の局所彩度アップ(カーソル周辺だけsaturateが効く、.ed-cover__layer--zglow)
   2) ロゴがZ水彩と同じ色に局所的に染まる(.hero__logo-stain)
   3) タグライン「OFFICIAL WEBSITE」も同じ色に局所染色(.hero__tagline-stain)
   4) マーク内部の白線が明るくなる(.hero__logo-lineglow)
   視差(要素の移動)・傾き(rotate)・ロゴのdrop-shadow(接地感の影)は会長の
   最終指示により全て不採用。要素自体は一切動かない。
   DOM構造: .ed-cover__hero(id="h1-stage")直下に、奥(z)→中(front/mid)の順で
   レイヤを重ねる(z-index: z/zglow=0 < front/mid=1)。 */
.ed-cover__layer {
  will-change: transform;
}

/* 奥: Z水彩。従来.heroの背景画像だったものを絶対配置レイヤとして敷き直す。 */
.ed-cover__layer--z {
  position: absolute;
  inset: 0;
  background-size: 616px auto;
  background-position: right center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* Z水彩の光の主役。.ed-cover__layer--zと全く同じ背景画像をもう1枚重ね、
   彩度を上げたfilterを掛けたうえで、ポインタ位置を中心にしたradial-gradientの
   maskで「その部分だけ」見せる。白地の部分はこの要素自体が透過PNGの
   透明部分なので何も起きない(色を足さず、元の水彩の彩度を起こすだけ)。 */
.ed-cover__layer--zglow {
  position: absolute;
  inset: 0;
  background-size: 616px auto;
  background-position: right center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  filter: saturate(3.2);
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle 260px at var(--h1-zgx, 50%) var(--h1-zgy, 50%), #000 0%, #000 55%, transparent 88%);
  mask-image: radial-gradient(circle 260px at var(--h1-zgx, 50%) var(--h1-zgy, 50%), #000 0%, #000 55%, transparent 88%);
  transition: opacity 0.35s ease;
}

/* 中(タグライン)・手前(ロゴ): hero__innerの通常フロー内に残しつつ、
   スタッキング文脈化のためposition:relativeのみ指定(要素は動かさない)。 */
.ed-cover__layer--front,
/* width:max-content が要る(2026-08-03 タグライン拡大時に判明)。
   このレイヤーは中身に合わせて縮む箱で、既定では最大要素である
   .hero__logo(max-width:min(70vw,260px))が幅を決めてしまう。
   タグラインを21pxまで拡大すると260pxに収まらず、しかもjs/site.jsの
   splitLines()が読み込み時に行を確定させるため、CSSのnowrap指定より先に
   2行へ分解され、.ed-lineのマスク(overflow:hidden)から2行目が
   はみ出したまま固定されていた(実測: 枠外へ34px)。
   箱を中身の幅まで広げてタグラインを1行に保つ。max-width:100%は
   モバイルで画面外へ出さないための保険。 */
.ed-cover__layer--mid {
  --logo-w: min(70vw, 400px);
  position: relative;
  z-index: 1;
  width: max-content;
  max-width: 100%;
}

@media (max-width: 768px) {
  .ed-cover__layer--z,
  .ed-cover__layer--zglow {
    background-size: cover;
    background-position: center;
  }
}

@media (min-width: 769px) and (max-height: 640px) {
  .ed-cover__layer--z,
  .ed-cover__layer--zglow {
    background-size: auto 92%;
  }
}

/* タッチ端末(hoverなし): JS側でも演出を張らないが、CSSでも保険として光を隠す */
@media (hover: none) {
  .ed-cover__layer--zglow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ed-cover__layer--z,
  .ed-cover__layer--mid,
  .ed-cover__layer--front {
    transform: none !important;
  }
  .ed-cover__layer--zglow {
    opacity: 0 !important;
    transition: none !important;
  }
}

/* マーク内部の白線glow。円マーク部分の黒本体のうち、線ぎわだけを白の
   アルファでグラデーションさせた別画像(logo_new_lines_glow.png)を重ね、
   既定opacity:0、ホバー時のみopacity:1にしてdrop-shadowでごく淡い
   白のにじみを足す。 */
.hero__logo-lineglow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 0.8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.55));
  transition: opacity 0.35s ease;
}

@media (hover: none) {
  .hero__logo-lineglow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo-lineglow {
    opacity: 0 !important;
    transition: none !important;
  }
}

/* ロゴの局所染色。ロゴ画像(黒一色、透過PNG)のアルファをmask-imageの1枚目に
   使い、Z水彩から切り出した色源(logo_stain_source_v9b.jpg)を透かす。
   maskをもう1枚(ポインタ中心のradial-gradient)重ねてintersectすることで、
   「ロゴの形」×「カーソル周辺だけ」の局所染色にする。
   url()はCSSファイル自身の場所が基準になるため、assets/への相対パスは
   "../"が必須(これを忘れるとcss/assets/...という誤ったパスになり404、
   マスクが効かずfront要素いっぱいの矩形がそのまま見える事故が起きる)。 */
.hero__logo-stain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: saturate(2.6);
  -webkit-mask-image: url('../assets/images/logo_new.png'),
    radial-gradient(circle 110px at var(--h1-sgx, 50%) var(--h1-sgy, 50%), #000 0%, #000 45%, transparent 85%);
  mask-image: url('../assets/images/logo_new.png'),
    radial-gradient(circle 110px at var(--h1-sgx, 50%) var(--h1-sgy, 50%), #000 0%, #000 45%, transparent 85%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-composite: source-in; /* 1枚目(ロゴ形状)の上に2枚目(局所円)をAND合成 */
  mask-composite: intersect; /* 標準構文。2枚目レイヤーに適用される演算子 */
  transition: opacity 0.35s ease;
}

@media (hover: none) {
  .hero__logo-stain {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo-stain {
    opacity: 0 !important;
    transition: none !important;
  }
}

/* タグライン「OFFICIAL WEBSITE」の局所染色。常時表示の元テキスト(.hero__tagline)の
   上に、同じ文言を複製したaria-hidden要素を重ね、background-clip:text +
   color:transparentで文字の形に色源を流し込む。stainの既定opacityは0の
   ため、JS無効・reduced-motion時は元のグレーテキストがそのまま見える
   (「文字が消える」事故を構造的に回避)。 */
/* 座標(2026-08-03): 本体.hero__taglineに margin-left を与えて「D」の真下へ
   寄せたため、inset:0(親いっぱい)のままでは染色だけ左に residual してズレる。
   ロゴは別レイヤー(.ed-cover__layer--front)にあり、この親(--mid)の上端は
   タグライン本体の上端と一致する(親の高さ=タグライン1行分)。
   したがって縦は top:0 でよく、横だけ本体と同じ左オフセットを与える。 */
.hero__tagline-stain {
  position: absolute;
  inset: auto;
  top: 0;
  left: calc(var(--logo-w) * 0.2456);
  width: max-content;
  margin: 0;
  pointer-events: none;
  color: transparent;
  background-image: url('../assets/images/logo_stain_source_v9b.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  filter: saturate(2.6);
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle 110px at var(--h1-tgx, 50%) var(--h1-tgy, 50%), #000 0%, #000 45%, transparent 85%);
  mask-image: radial-gradient(circle 110px at var(--h1-tgx, 50%) var(--h1-tgy, 50%), #000 0%, #000 45%, transparent 85%);
  transition: opacity 0.35s ease;
}

@media (hover: none) {
  .hero__tagline-stain {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__tagline-stain {
    opacity: 0 !important;
    transition: none !important;
  }
}

.ed-cover__eyebrow {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 18px;
}

.ed-cover__scrollcue {
  position: absolute;
  left: 4px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-sub);
}

.ed-cover__scrollcue-line {
  position: relative;
  width: 1px;
  height: 34px;
  background: var(--color-border);
  overflow: hidden;
}

.ed-cover__scrollcue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: translateY(-100%);
  animation: ed-scrollcue 1.8s ease-in-out infinite;
}

@keyframes ed-scrollcue {
  0% { transform: translateY(-100%); }
  60% { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

@media (max-width: 768px) {
  .ed-cover__hero { min-height: 62vh; }
}

/* ---------- Ticker (marquee) ---------- */
/* 上下の余白(会長指摘 2026-08-03「上と下で同じにしてほしい。上を基準にして」)。
   padding自体は14px/14pxで左右対称、実測でも罫線から文字まで上17.0px/下18.1pxと
   ほぼ同値だった。それでも下が広く見えるのは**文字の描画位置**による:
   ここに並ぶのは "ONE PIECE FILM RED" のような英大文字が中心で、
   英大文字はベースラインで止まるため上へ寄って見え、下側に視覚的な余白が残る。
   上(14px)は動かさず、下だけ11pxへ詰めて見た目を揃える。 */
.ed-ticker {
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 0 11px;
  /* 帯の上下の空きを揃える(会長指示 2026-08-04「上と下高さ揃えて。赤線ね」)。
     基準は**Cover装飾(斜め線画)の下端→ティッカー上端 = 48px**(1440px実測。
     装飾はCover下端で切れるため実質Cover下端が起点)。下側はティッカー下端→
     ゴースト数字01の上端で、旧140pxでは48pxに対し92px広かった。
     下の空き = このmargin-bottom + ノンブルのtop(calc、1440pxで約-5.5px)。
     54pxにすると 54-5.5 ≒ 48px で上下対称になる。
     ※旧記録(2026-08-03「タグライン下端基準で上200px→140px」)はこの指示で上書き。
     ⚠ Cover高(.ed-cover__hero min-height)・ノンブルtopのcalc・head padding-top
       を変えたら、ここも実測して連動させること。 */
  margin: 0 0 54px;
}

/* ⚠ 所要時間はTICKER_ITEMSの件数を変えるたびに調整すること(2026-08-03)。
   このアニメーションは「トラック幅の50%を指定秒で移動」する仕様のため、
   項目数が変わると秒数据え置きでは流れる速度が変わってしまう。
   基準は約47px/秒(14件・46s時の体感)。実測値:
     14件 1周2170px -> 46s (47px/秒)
     21件 1周3256px -> 46sのままだと71px/秒(1.5倍速)
     17件 1周2611px -> 56s (47px/秒)
     14件 1周2152px -> 46s (47px/秒)
     14件 1周2250px -> 48s (47px/秒)  ← 現在(「サンリオ」を正式名称
                                       「サンリオピューロランド」へ戻した分、幅が増えた)
   算出式: 秒数 = 1周の幅(px) / 47 */
.ed-ticker__track {
  display: flex;
  width: max-content;
  gap: 36px;
  animation: ed-ticker-scroll 48s linear infinite;
}

/* text-transform:uppercase を廃止(会長指示 2026-08-03 表記校正)。
   ここに並ぶのは固有名詞であり、大文字化すると正式表記から外れる:
     Ado -> ADO / Reol -> REOL / Gawr Gura -> GAWR GURA /
     Hey! Say! JUMP -> HEY! SAY! JUMP
   デザイン上の統一より、アーティスト名・作品名の正確さを優先する。 */
.ed-ticker__track span {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
  white-space: nowrap;
}

.ed-ticker__track span.is-dot {
  color: var(--color-border);
}

@keyframes ed-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Chapters ---------- */
.ed-chapter {
  position: relative;
  padding: 0 0 20vh;
}

.ed-chapter:last-of-type {
  padding-bottom: 8vh;
}

.ed-chapter__head {
  position: sticky;
  top: var(--header-h, 64px);
  z-index: 5;
  background: var(--color-bg);
  padding: 28px 0 20px;
}

/* 巨大ノンブル: **数字の見た目の底(インク)を見出し下の罫線(.ed-rule)に固定**
   （01〜04すべて同一・完全静止）。
   🔴 2026-08-04: 旧実装はJSのスクロール視差→静的translateY(15px)と変遷したが、
   会長指摘「赤線に03.04の一番下をあわせてね」で方式を確定。topをcalcで算出する:
     罫線のY = head padding-top(60px) + 見出し高(clamp(32,6.5vw,72)*0.92)
              + 罫線margin-top(18px)   ※見出しmargin-bottom14pxは18pxに相殺される
     top = 罫線のY − font-size * 0.895
   ⚠ 係数 --num-drop は「罫線から数字の箱のtopまでを何em引き上げるか」で、
     **数字の字形ごとに違う**。Ralewayの数字はオールドスタイル数字で、
     canvas TextMetrics実測(fs190px): ベースライン下へのインク突出が
     01=2px / 02=2px / **03=28px / 04=24px**（3と4には下に尻尾がある）。
     ゆえに1つの係数では全章揃わない（2026-08-04の実害: 03基準の0.895では
     01・02のインクが線から約25px浮いた。会長指摘「01.02が少し上にいっちゃった」）。
     算出式: (ベースライン位置0.7553em + 各字のdescent(em))
       ベースライン位置 = (0.8em − (ascent179+descent44)/190em)/2 + 179/190em
       01・02: 0.7553 + 2/190   = 0.766
       03:     0.7553 + 28/190  = 0.903
       04:     0.7553 + 24/190  = 0.882
   ⚠ getBoundingClientRectの「箱」やrect検証では揃って見える。**検証は必ず
     ピクセル実測かcanvas TextMetricsで行え**（rect検証の合格報告が2度誤った）。
   ⚠ head padding-top / 見出しclamp / 罫線margin / 数字のfont-size・line-height /
     フォント自体 / 章番号の数字 のどれかを変えたら、必ず実測で合わせ直せ。 */
.ed-chapter__num {
  position: absolute;
  --num-drop: 0.766;
  top: calc(78px + clamp(32px, 6.5vw, 72px) * 0.92 - clamp(64px, 13vw, 190px) * var(--num-drop));
  right: 0;
  font-family: var(--font-en);
  font-weight: 800;
  line-height: 0.8;
  font-size: clamp(64px, 13vw, 190px);
  color: var(--color-border);
  opacity: 0.6;
  z-index: -1;
  user-select: none;
}

/* 字形ごとの--num-drop補正（上のコメント参照）。3と4は下に尻尾が垂れるため深く引く */
.ed-chapter--disco .ed-chapter__num {
  --num-drop: 0.903;
}
.ed-chapter--contact .ed-chapter__num {
  --num-drop: 0.882;
}

/* 修正(2026-07-31): .page-titleと同じ理由でclamp上限を110px→72pxへ縮小
   (会長指摘「文字がでかい」「DISCOGRAPHYが見切れる/ゴースト数字と衝突する」対応。
   詳細はtmp_R8_提案/00_統合ログ_ステップ11.md参照)。 */
.ed-chapter__title {
  position: relative;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(32px, 6.5vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  max-width: 80%;
}

.ed-chapter__lede {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-sub);
  margin: 0 0 4px;
  max-width: 480px;
}

.ed-chapter--profile .ed-chapter__lede,
.ed-chapter--disco .ed-chapter__lede {
  margin-left: 0;
}

/* CONTACT章のリード文が1440pxで「お問い合わせく／ださい。」と単語の途中で
   2行に折り返す不具合対応(会長指摘2026-08-03「折り返しいらない」)。
   実測: 共通の.ed-chapter__lede{max-width:480px}では実測540px相当の本文が
   収まらず2行になる。CONTACTのみmax-widthを560pxへ拡張し1440pxで1行に収める
   (実測540px+余裕20px。他章より大幅に広げると不揃いになるため最小限の拡張に
   留める)。1280pxでも実測540px<コンテナ幅のため1行に収まる。375pxはコンテナ幅
   不足で引き続き2行に折り返すが、word-break:keep-allにより「公式アカウント」
   が「アカウン／ト」と分割されず「公式アカウントより」の直前で改行されるよう
   実測確認して調整(単語途中の分割を避ける配慮)。 */
.ed-chapter--contact .ed-chapter__lede {
  max-width: 560px;
  word-break: keep-all;
}

.ed-chapter--profile .ed-chapter__head,
.ed-chapter--contact .ed-chapter__head {
  padding-left: 0;
}

/* 修正(2026-07-31 会長指摘): PROFILE/CONTACTの見出しだけ900px以上でmargin-left:56pxが
   付与されており、WORKS/DISCOGRAPHYと左端が揃っていなかった(左詰め崩れの原因)。
   全章で左端Xを統一するため撤去(詳細実測はtmp_R8_提案/00_統合ログ_ステップ11.md参照)。 */

.ed-chapter__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-accent-dark);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
}

.ed-chapter__link:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

/* 章見出しの上下パディング(2026-08-03 会長指摘)。
   上: 「01の上、逆に少しスペース開けてもいいかも」→ Coverを44vhに詰めた結果
       ティッカーとWORKS見出しが32pxまで接近していたため 28px -> 44px へ。
       さらに同日「01の上少しスペースあけてもいいかも」の再指摘で 44px -> 60px
       (ティッカー下端から見出しまで実測48px -> 64px)。
   下: 一度10pxまで削ったが、**ゴースト数字(高さ150px・絶対配置)がコンテンツへ
       迫って「03が被っている」状態になった**(実測で余裕40px)。24pxへ戻して
       数字とジャケットの間に余裕を作る。bodyに置いたリンク/コンテンツの
       上余白もここで決まる。 */
.ed-chapter__head {
  padding-top: 60px;
  padding-bottom: 24px;
}

/* 余白(2026-08-03 会長指摘「上に少し詰める。他と比べてみて」)。
   罫線からコンテンツまでの距離を実測したところ、head内にコンテンツを持つ
   PROFILE/CONTACTが4pxなのに対し、bodyに持つWORKS/DISCOGRAPHYは54px空いていた
   (head padding-bottom 20px + body padding-top 6px + 各コンテンツ側の余白)。
   head側の下パディングとbody側の上パディングを削って詰める。
   PROFILE/CONTACTはコンテンツがhead内にあるため、この変更の影響を受けない。 */
.ed-chapter__body {
  padding-top: 0;
}

/* ---------- 行マスクリビール（.ed-line） ----------
   JSがテキストを1文字ずつ<span class="ed-char">に分解→計測→
   行ごとに <span class="ed-line"><span class="ed-line__inner">…</span></span>
   へ再構築する。外側 overflow:hidden がマスク、内側が下からtranslateYで立ち上がる。 */
.ed-line { display: block; overflow: hidden; }
.ed-line__inner { display: block; }

html.js .ed-line__inner {
  transform: translateY(112%);
  transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js .ed-reveal.is-visible .ed-line__inner {
  transform: translateY(0);
}

/* 修正2: PROFILEのリード文はsticky見出し(.ed-chapter__head)の内側に配置しているため、
   head自身がis-visibleになった瞬間、子孫結合子(.ed-reveal.is-visible .ed-line__inner)が
   祖先経由でリード文の行マスクにも一致してしまい、本来の「溜め」演出より早く
   開いてしまう。リード文自身がまだ.is-visibleを得ていない間は強制的に非表示状態を
   維持し、JS側(headDuration+TAME後)のクラス付与タイミングどおりに開くようにする。 */
html.js .ed-chapter--profile .ed-profile__lede:not(.is-visible) .ed-line__inner {
  transform: translateY(112%);
}

/* ---------- 罫線（hairline）ドロー：章の区切り ---------- */
.ed-rule {
  display: block;
  height: 1px;
  margin: 18px 0 4px;
  background: var(--color-border);
  transform-origin: left center;
}

html.js .ed-rule {
  transform: scaleX(0);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js .ed-reveal.is-visible .ed-rule {
  transform: scaleX(1);
}

/* 修正(2026-08-03 ステップ19): 前回のz-index:-2対応は効果が無かった。原因は
   ".ed-chapter__num"がopacity:0.6の半透明グレーであること――背面に回しても
   透けて線が見えてしまう。加えてPROFILE/DISCOGRAPHY章は罫線が見出し直下
   (リード文が無い)に来るため縦位置が高く、ゴースト数字の矩形(実測: 1280pxで
   y=1731.6〜1864.7、1440pxでy=1729.9〜1879.7)の内側に罫線(y=1857/1857が
   それぞれ該当)が入り込み、x方向も数字の左端(1280px x=913.97〜、1440px
   x=968.16〜)まで線が伸びているため物理的に交差していた(重ね順ではなく
   矩形交差そのものが原因)。
   重ね順(z-index)で誤魔化すのをやめ、罫線の右端をゴースト数字の左端より
   手前で止めることで交差そのものを無くす。ゴースト数字は2桁固定(01-04)で
   実測描画幅がfont-size(clamp(64px,13vw,190px))の約1.19倍になることを
   確認(1280px: num幅197px/font-size166px、1440px: 222px/187px、375px:
   76px/64pxで倍率一致)。安全マージンを見て1.25倍+40pxを右側に確保する
   max-widthを設定する。
   375px未満はnumのfont-sizeがclampの最小値64pxに張り付き、numの高さ自体が
   小さくtitleの下に収まるため実測上そもそも交差していない(1280/1440だけの
   問題)。この縮小を適用すると不要に線を短くしてしまうため、600px以上でのみ
   適用する。

   追記(2026-08-03 4章統一): 会長指摘「01〜04の統一感がない」対応。
   罫線の位置をHTML側で4章とも「見出し直下」(title→rule→lede/コンテンツ)に
   揃えた(旧WORKS/CONTACTはlede→ruleの順で、位置がPROFILE/DISCOGRAPHYと
   ズレていた)。位置を揃えた結果、上のmax-width短縮もWORKS/CONTACTへ適用
   しないと4章目テンプレートで長さだけ不揃いになるため、対象を4章全部に
   拡大する。 */
@media (min-width: 600px) {
  .ed-chapter--profile .ed-rule,
  .ed-chapter--disco .ed-rule,
  .ed-chapter--works .ed-rule,
  .ed-chapter--contact .ed-rule {
    max-width: calc(100% - clamp(64px, 13vw, 190px) * 1.25 - 40px);
  }
}

/* ---------- 簡易フェード（.ed-fade）：ロゴ画像・章リンク等、非テキスト/小要素用 ---------- */
html.js .ed-fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js .ed-fade.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- アイテム・スタガー（.ed-stagger の直下の子を連続開放） ---------- */
html.js .ed-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--i, 0) * 65ms);
}

html.js .ed-reveal.is-visible.ed-stagger > * {
  opacity: 1;
  transform: none;
}

/* ---------- Works strip ---------- */
.ed-strip {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  margin-top: 24px;
}

.ed-strip__track {
  display: flex;
  gap: 22px;
  padding: 4px 4px 14px;
  margin: 0;
  list-style: none;
}

.ed-strip__item {
  flex: 0 0 auto;
  width: 216px;
  scroll-snap-align: start;
}

.ed-strip__item a,
.ed-strip__item .ed-strip__link {
  display: block;
  color: inherit;
}

.ed-strip__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: #f2f2f2;
}

.ed-strip__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ed-strip__noimage {
  width: 100%;
  height: 100%;
  background: #eee;
}

.ed-strip__item a:hover .ed-strip__thumb img,
.ed-strip__item a:focus-visible .ed-strip__thumb img {
  transform: scale(1.06);
}

.ed-strip__year {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent-dark);
  margin: 12px 0 4px;
}

.ed-strip__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 4px;
}

.ed-strip__credit {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-sub);
  margin: 0;
}

@media (max-width: 768px) {
  .ed-strip__item { width: 62vw; max-width: 236px; }
}

/* ---------- Works strip: 矢印送りボタン(会長指示 2026-08-03) ----------
   横スクロール自体は既存のまま生かす(トラックパッド横スワイプ・ドラッグは
   殺さない)。ボタンはあくまで追加の操作手段。スクロールバーは非表示にする
   が、overflow-x:autoは維持しスクロール自体は可能なままにする。 */
.ed-strip-wrap {
  position: relative;
}

.ed-strip {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ed-strip::-webkit-scrollbar {
  display: none;
}

.ed-strip__nav {
  position: absolute;
  top: 112px; /* サムネ(216px角、track padding-top4px)の縦中心付近。
                 年/タイトル/クレジット欄には掛からない高さ */
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ed-strip__nav:hover {
  background: #fff;
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

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

.ed-strip__nav:disabled {
  opacity: 0.32;
  cursor: default;
}

.ed-strip__nav--prev { left: 2px; }
.ed-strip__nav--next { right: 2px; }

/* モバイルはタッチスワイプの方が自然な操作なため矢印ボタンを隠す
   (ボタンサイズに対してカード幅[62vw]が狭く、被さると押しにくいため)。
   スクロール自体は.ed-stripのoverflow-x:autoでそのまま動作する。 */
@media (max-width: 768px) {
  .ed-strip__nav { display: none; }
}

/* ---------- Profile ---------- */
.ed-profile__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 22px;
}

@media (min-width: 760px) {
  .ed-profile__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
  }
}

.ed-profile__lede {
  font-size: 16px;
  line-height: 1.9;
  margin: 0;
}

.ed-profile__stats {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ed-profile__stats li {
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

/* 先頭項目の上罫線は削除(会長指示 2026-08-03)。この線だけはリスト内の区切りではなく
   統計欄の外枠として働き、ゴースト数字「02」の真下を横切って見えていた。
   項目どうしの区切り(2件目以降のborder-top)は残す。 */
.ed-profile__stats li:first-child {
  border-top: 0;
  padding-top: 0;
}

.ed-profile__stat-num {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 30px;
  color: var(--color-text);
  white-space: nowrap;
}

.ed-profile__stat-label {
  font-size: 12px;
  color: var(--color-text-sub);
  line-height: 1.5;
}

/* ---------- Discography shelf ---------- */
.ed-disco__shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 22px;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .ed-disco__shelf { grid-template-columns: repeat(6, 1fr); }
}

.ed-disco__shelf li {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ed-disco__shelf img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  background: #f2f2f2;
}

/* DISCOGRAPHYジャケットのホバー(2026-08-02、_work/tmp_R10_カバー/H1_深度より統合)。
   WORKS章(.ed-strip__thumb img、上部1353行)と完全に同じ値(scale(1.06)・
   transition 0.3s ease)を適用し、挙動の一貫性を持たせる。DISCOGRAPHYの<li>は
   WORKSと異なり<a>で包まれていない(装飾的なジャケットでクリック遷移が無いため)
   ため、トリガーはli:hoverにしている。クリップ用のoverflow:hidden入れ物として
   .ed-disco__thumb(imgラッパー)を新設(build_site.py側、render_ed_disco_shelf)。 */
.ed-disco__thumb {
  overflow: hidden;
  border-radius: 4px;
}

.ed-disco__shelf img {
  transition: transform 0.3s ease;
}

.ed-disco__shelf li:not(.ed-disco__more):hover img {
  transform: scale(1.06);
}

.ed-disco__shelf li span {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
}

.ed-disco__more a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  padding: 12px;
  gap: 4px;
  color: inherit;
}

.ed-disco__more a:hover {
  border-color: var(--color-accent);
}

.ed-disco__shelf .ed-disco__more-num {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 26px;
  color: var(--color-accent-dark);
}

.ed-disco__more span:last-child {
  font-size: 11px;
  color: var(--color-text-sub);
  font-weight: 400;
  letter-spacing: 0;
}

/* ---------- Reduced motion: kill all decorative motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .ed-line__inner {
    transform: none !important;
    transition: none !important;
  }
  html.js .ed-rule {
    transform: none !important;
    transition: none !important;
  }
  html.js .ed-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.js .ed-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* 2026-08-04: ノンブルは完全静止（topのcalcで罫線に固定、transform不使用）に
     なったため、reduced-motionでも通常時と同一。過去のJS注入transformの残骸を
     念のため無効化するだけ。 */
  .ed-chapter__num {
    transform: none !important;
  }
  .ed-ticker__track {
    animation: none !important;
    transform: none !important;
  }
  .ed-cover__scrollcue-line::after {
    animation: none !important;
    transform: translateY(0) !important;
  }
  .ed-strip__item a:hover .ed-strip__thumb img,
  .ed-strip__item a:focus-visible .ed-strip__thumb img {
    transform: none !important;
  }
  .ed-disco__shelf li:not(.ed-disco__more):hover img {
    transform: none !important;
  }
  .ed-disco__shelf img {
    transition: none !important;
  }
  * {
    scroll-behavior: auto !important;
  }
}

/* 視覚的に隠すが、スクリーンリーダーと検索エンジンには読める。
   トップページのh1(2026-08-06 SEO監査で追加)に使用。
   display:none や visibility:hidden では読み上げ・検索から消えるため使わない。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}