@charset "UTF-8";

/* ディスコグラフィー（?view=discography）
   template-parts/sakamichi-search/section-discography.php。
   1作品1段の台帳。PC: 左の列にジャケ写とその下に段の頭（作品番号・題・発売日）、右の列に収録曲（2列）とその下に MV。
   スマホ: 段の頭の右にジャケ写、その下に収録曲と MV
*/

/* 種類と並び順の切り替え */
.saka-discography__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 4px 0 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--sakamichi-hairline);
}
.saka-discography__controls[hidden] {
  display: none;
}
.saka-discography__control-group {
  display: inline-flex;
  gap: 14px;
}
.saka-discography__control {
  appearance: none;
  margin: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--sakamichi-ink-3);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}
.saka-discography__control:hover {
  color: var(--sakamichi-ink);
}
.saka-discography__control[aria-pressed="true"] {
  color: var(--sakamichi-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.saka-discography__control:focus-visible {
  outline: 2px solid var(--sakamichi-ink);
  outline-offset: 2px;
}

/* 発売年 */
.saka-discography__year[hidden] {
  display: none;
}
.saka-discography__year {
  --saka-discography-accent-rgb: var(--theme-accent-rgb, 28, 26, 22);
}
.saka-discography__year--legacy {
  --saka-discography-accent-rgb: var(--sakamichi-keyaki-chip-rgb);
}
.saka-discography__year-title {
  margin: 20px 0 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 2px solid var(--sakamichi-ink);
  border-radius: 0;
  background: none;
  color: var(--sakamichi-ink);
  font-family: var(--sakamichi-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* 1作品の段 */
.saka-discography-release {
  display: grid;
  gap: 12px;
  align-items: start;
  /* 作品同士の区切り: 年の見出し（2px の墨）より弱く、小見出しの下線より強い線と、上下の広めの空きで段をはっきり分ける */
  padding: 30px 0 30px;
  border-bottom: 1px solid var(--sakamichi-ink-3);
  /* URL の #release-… で段へ飛んだ時に、上に付いてくるヘッダーと見出しの帯の下に隠れないように */
  scroll-margin-top: 112px;
}
.saka-discography-release[hidden] {
  display: none;
}
/* 年の最後の作品（種類の切り替えで隠れた作品は数えない）は、すぐ下に次の年の線が来るので区切り線を引かない */
.saka-discography-release:not(:has(~ .saka-discography-release:not([hidden]))) {
  border-bottom: 0;
}
/* 段のアクセントの色（作品番号）はグループ色。欅坂46・けやき坂46 の時期の作品は欅坂46 の緑
   （新曲の印・MV のリンクも緑にする） */
.saka-discography-release {
  --saka-discography-accent: var(--theme-gradient-from, var(--sakamichi-ink));
  --saka-discography-accent-rgb: var(--theme-accent-rgb, 28, 26, 22);
}
.saka-discography-release--legacy {
  --saka-discography-accent: var(--sakamichi-keyaki-chip);
  --saka-discography-accent-rgb: var(--sakamichi-keyaki-chip-rgb);
  --theme-link-color: var(--sakamichi-keyaki-deep);
}
/* 左の列（ジャケ写と段の頭）と右の列（収録曲と MV）。スマホでは縦に積み、段の頭の右にジャケ写 */
.saka-discography-release__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  grid-template-areas: "head jacket";
  gap: 14px;
  align-items: start;
  min-width: 0;
  /* ジャケ写と題の列に、グループ色（legacy は欅坂46 の緑）をごく薄く敷く */
  padding: 10px;
  background: rgba(var(--saka-discography-accent-rgb), 0.05);
}
.saka-discography-release__main {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.saka-discography-release__jacket {
  grid-area: jacket;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--sakamichi-paper-2);
}
/* ジャケ写は絵柄に手を加えない。白っぽいジャケ写が紙の地に溶けないよう、上に重ねた層で内側に細い枠だけ引く */
.saka-discography-release__jacket {
  position: relative;
}
.saka-discography-release__jacket::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(28, 26, 22, 0.1);
  pointer-events: none;
}
.saka-discography-release__jacket img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.saka-discography-release__jacket--empty {
  display: grid;
  place-items: center;
  background: var(--sakamichi-paper-2);
  color: var(--sakamichi-ink-3);
  font-family: var(--sakamichi-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.saka-discography-release__head {
  grid-area: head;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.saka-discography-release__label {
  margin: 0;
  color: var(--saka-discography-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.saka-discography-release__title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sakamichi-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  /* 題は意味のまとまりの間（テンプレートが入れる <wbr>）だけで折り、行の長さをそろえる */
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 意味のまとまり（inc/sakamichi-universe-phrase-break.php が包む）は途中で折らない */
.saka-discography .saka-phrase {
  white-space: nowrap;
}
.saka-discography-release__title a {
  color: inherit;
  text-decoration: none;
}
.saka-discography-release__title a:hover {
  text-decoration: underline;
}
.saka-discography-release__date {
  margin: 0;
  color: var(--sakamichi-ink-3);
  font-size: 12px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* 右の列の区画（トラックリスト・MV一覧）。小見出しは小さい太字に細い下線だけ（年の罫線より強い線を段の中に置かない）。
   見出しの分だけ中身が下がり、左のジャケ写と段の重心がそろう */
.saka-discography-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.saka-discography-section__title {
  margin: 0;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid var(--sakamichi-hairline-strong);
  background: none;
  color: var(--sakamichi-ink-strong);
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

/* 収録曲 */
.saka-discography-tracks {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.saka-discography-tracks__item {
  display: flex;
  align-items: baseline;
  gap: 2px 12px;
  margin: 0;
  /* 行の左右に余白を取り、番号と種別が列の端に張り付かないように */
  padding: 6px 6px;
  border-bottom: 1px solid var(--sakamichi-hairline);
  line-height: 1.5;
}
.saka-discography-tracks__no {
  flex: none;
  width: 1.8em;
  margin-right: -6px;
  color: var(--sakamichi-ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* 番号の右の箱。曲名と種別をこの中で折り返すので、長い曲名でも頭は番号の右にそろう */
.saka-discography-tracks__body {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
}
/* 種別は右端にそろえる（PC は収録曲を2列にするので、曲名と離れすぎない）。
   1行に入らない時は、曲名を途中で折らずに種別を次の行へ送る。曲名だけで箱に入らない時は、曲名を箱の中で折る */
.saka-discography-tracks__title {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--sakamichi-ink);
  font-weight: 500;
}
.saka-discography-tracks__title a {
  color: inherit;
  text-decoration: none;
}
.saka-discography-tracks__title a:hover {
  text-decoration: underline;
}
.saka-discography-tracks__note {
  flex: none;
  margin-left: auto;
  color: var(--sakamichi-ink-3);
  font-size: 11.5px;
  white-space: nowrap;
  /* 全角の括弧の外側の空きを詰める。右端にそろえた時に「（N期生）」の行だけ左に寄って見えないように */
  font-feature-settings: "halt";
}
/* アルバムで初めて出た曲の印（種別の前） */
.saka-discography-tracks__new {
  margin-right: 8px;
  color: var(--theme-link-color, var(--sakamichi-ink));
  font-weight: 700;
}
/* 相手の系統の曲（日向坂46 の表の漢字欅の曲・櫻坂46 の表のひらがなけやきの曲）は、番号・曲名・種別をそろえて薄くし、細字にする。
   地色は敷かない（敷くとかえって目立つ） */
/* 区切り線の濃さはほかの行とそろえるため、薄くするのは行の中身だけ */
.saka-discography-tracks__item--cross > * {
  opacity: 0.5;
}
.saka-discography-tracks__item--cross .saka-discography-tracks__title {
  font-weight: 400;
}

/* MV（シングル詳細の「MV一覧」と同じ札） */
.saka-discography-mv {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.saka-discography-mv__card {
  display: flex;
  flex-direction: column;
  /* 曲名とマークの行の間は詰める（サムネと曲名の間は曲名の上の余白で 4px） */
  gap: 2px;
  min-width: 0;
  margin: 0;
}
.saka-discography-mv__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sakamichi-ink-strong);
}
.saka-discography-mv__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.saka-discography-mv__title {
  margin-top: 2px;
  color: var(--sakamichi-ink-2);
  /* 札が一番狭い時（PC 1024px で 114px）に、意味のまとまりが全角10字まで1行に入る大きさ */
  font-size: 11px;
  line-height: 1.45;
  /* 曲名は意味のまとまりの間（テンプレートが入れる <wbr>）だけで折る */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.saka-discography-mv__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* マークは札の右端に寄せる */
  justify-content: flex-end;
  gap: 4px 6px;
  /* 同じ行の札で曲名の行数が違っても、リンクの行を下でそろえる */
  margin: auto 0 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.4;
}
/* 曲名の下の行に置く時は、マークの上下の余白を取らない（曲名の箱からマークまで 2px） */
.saka-discography-mv__card:not(.is-inline) .saka-discography-mv__links a.saka-discography-mv__link {
  padding: 0;
}
/* 同じ行の札が全部、マークを曲名の行に入れられる時（js/sakamichi-discography.js が is-inline を付ける）は、
   マークを曲名の1行目の右端に置く（曲名が2行以上でも上ぞろえ） */
.saka-discography-mv__card.is-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: start;
  column-gap: 8px;
}
.saka-discography-mv__card.is-inline .saka-discography-mv__thumb {
  grid-column: 1 / -1;
}
/* 曲名はほかの札と同じ位置のまま。マーク（上下の余白込みで 18px）を曲名の行（16px）の中央に合わせる */
.saka-discography-mv__card.is-inline .saka-discography-mv__title {
  align-self: start;
}
.saka-discography-mv__card.is-inline .saka-discography-mv__links {
  flex-wrap: nowrap;
  align-self: start;
  margin: 1px 0 0;
}
.saka-discography-mv__links a {
  color: var(--theme-link-color, var(--sakamichi-ink));
  font-weight: 700;
  text-decoration: none;
}
.saka-discography-mv__links a:hover {
  text-decoration: underline;
}
/* YouTube・のぎ動画の単色のマーク（濃い紙色。区切り線の紙色 --sakamichi-hairline-strong より一段濃い。グループ色にはしない） */
.saka-discography-mv__links a.saka-discography-mv__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 0;
  color: #9a917e;
}
.saka-discography-mv__links a.saka-discography-mv__link:hover {
  color: var(--sakamichi-ink-3);
}
.saka-discography-mv__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.saka-discography-mv__mark {
  display: block;
  height: 14px;
}
.saka-discography-mv__mark--youtube {
  width: 20px;
  fill: currentColor;
}
.saka-discography-mv__mark--nogidoga {
  width: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: miter;
}
.saka-discography-mv__link-number {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

/* 画像の出所（ページの右下。歴代MV一覧と同じ書き方で、字は小さめ。最後の作品との間を広めに空ける） */
.saka-discography__image-source-note {
  margin: 36px 0 0;
  color: var(--text-sub, var(--sakamichi-ink-3));
  font-size: 11.5px;
  line-height: 1.5;
  text-align: right;
}
@media (max-width: 767px) {
  .saka-discography__image-source-note {
    margin-top: 32px;
    font-size: 10.5px;
  }
}

@media (min-width: 768px) {
  /* 左の列（ジャケ写と段の頭）の地色は、年の見出しと段をまたいで上から下まで1本につなげる。
     そのため段の上下の空きは左右の列の内側に取る。年の 2px の線は全幅、作品の 1px の区切り線は右の列の幅だけに引く */
  .saka-discography__list {
    margin-top: 16px;
  }
  .saka-discography__year-title {
    position: relative;
    margin: 0;
    padding: 22px 12px 6px;
    border-bottom: 0;
    background: linear-gradient(to right, rgba(var(--saka-discography-accent-rgb), 0.05) 0 192px, transparent 192px);
    font-size: 18px;
    line-height: 1.3;
  }
  .saka-discography__year-title::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid var(--sakamichi-ink);
  }
  /* ジャケの列は 192px（ジャケ写 168px と左右の余白 12px。題が意味のまとまりで1行に入る幅。タブレットの幅でも同じ） */
  .saka-discography-release {
    position: relative;
    grid-template-columns: 192px minmax(0, 1fr);
    gap: 24px;
    padding: 0;
    border-bottom: 0;
  }
  .saka-discography-release::after {
    content: "";
    position: absolute;
    left: 216px;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--sakamichi-ink-3);
  }
  .saka-discography-release:not(:has(~ .saka-discography-release:not([hidden])))::after {
    content: none;
  }
  /* 左の列: ジャケ写（168px）の下に段の頭。地色は段の高さいっぱい（上下の空きも含めて）に敷き、上下の段とつなげる */
  .saka-discography-release__aside {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "jacket"
      "head";
    align-content: start;
    align-self: stretch;
    gap: 14px;
    padding: 34px 12px 30px;
  }
  .saka-discography-release__main {
    gap: 18px;
    padding: 34px 0 30px;
  }
  /* ジャケ写の内側の細い枠は、ジャケ写の大きさに合わせて太くする（スマホの 96px に 1px と同じ比率で、168px に 2px） */
  .saka-discography-release__jacket::after {
    box-shadow: inset 0 0 0 2px rgba(28, 26, 22, 0.1);
  }
  /* MV は小さいサムネ（128px）を左から詰める */
  .saka-discography-mv {
    grid-template-columns: repeat(auto-fill, 128px);
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  .saka-discography-release {
    grid-template-columns: 192px minmax(0, 1fr);
  }
  /* 収録曲は右の列の幅で2列（上から下へ、左の列から）。1行が横に間延びしないように */
  .saka-discography-tracks {
    display: grid;
    grid-template-rows: repeat(var(--saka-discography-rows, 1), auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    column-gap: 48px;
    align-content: start;
  }
  /* MV は1作品で多くても6本なので、右の列の幅に6本ちょうど並ぶ大きさにする（少ない作品も同じ大きさで左から） */
  .saka-discography-mv {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px 12px;
  }
}

/* スマホの幅で、読んでいる作品のジャケ写・作品番号・題をヘッダーの下に出す帯（js/sakamichi-discography.js が出し入れする）。
   隠れている間は自分の高さぶん上（手前にあるヘッダー・補助ヘッダーの裏）にいて、出る時はそこから下りてくる。
   消える時はヘッダーの裏へ戻り、戻りきってから visibility を落とす */
.saka-discography-sticky {
  --saka-discography-sticky-accent-rgb: var(--theme-accent-rgb, 28, 26, 22);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px var(--saka-discography-bleed-right, 16px) 6px var(--saka-discography-bleed-left, 16px);
  border-bottom: 1px solid var(--sakamichi-ink-3);
  background:
    linear-gradient(rgba(var(--saka-discography-sticky-accent-rgb), 0.05), rgba(var(--saka-discography-sticky-accent-rgb), 0.05)),
    var(--sakamichi-paper);
  cursor: pointer;
  pointer-events: none;
  visibility: hidden;
  transform: translate3d(0, -100%, 0);
  transition: transform var(--saka-dur-base) var(--saka-ease-in-out), visibility 0s linear var(--saka-dur-base);
}
.saka-discography-sticky.is-visible {
  pointer-events: auto;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition: transform var(--saka-dur-slow) var(--saka-ease-out), visibility 0s;
}
.saka-discography-sticky.is-legacy {
  --saka-discography-sticky-accent-rgb: var(--sakamichi-keyaki-chip-rgb);
}
.saka-discography-sticky__thumb {
  flex: none;
  position: relative;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: var(--sakamichi-paper-2);
}
.saka-discography-sticky__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.saka-discography-sticky__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(28, 26, 22, 0.1);
}
.saka-discography-sticky__text {
  display: grid;
  min-width: 0;
}
.saka-discography-sticky__label {
  color: rgb(var(--saka-discography-sticky-accent-rgb));
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.saka-discography-sticky__title {
  color: var(--sakamichi-ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .saka-discography-sticky {
    display: none;
  }
}
/* スマホの幅: 作品の頭（題とジャケ写）の地色を画面の左右の端まで広げる。中身の左右は本文の端（帯の中身と同じ位置）にそろえる */
/* 一番狭いスマホ（360px など）では MV の札が 105px ほどになるので、曲名の字を少し小さくして全角10字を1行に入れる */
@media (max-width: 379px) {
  .saka-discography-mv__title {
    font-size: 10.5px;
  }
}
@media (max-width: 767px) {
  .saka-discography-release__aside {
    margin-right: calc(-1 * var(--saka-discography-bleed-right, 16px));
    margin-left: calc(-1 * var(--saka-discography-bleed-left, 16px));
    padding: 14px var(--saka-discography-bleed-right, 16px) 14px var(--saka-discography-bleed-left, 16px);
  }
}