@charset "UTF-8";

/* ============================================================
   DISCOGRAPHY 複数件表示用
   ------------------------------------------------------------
   配置先想定 : contents/1/MV/assets/css/discography.css
   読み込み   : CMS共通定義の <head> 内、style.css より後ろに <link> を追記
   ------------------------------------------------------------
   共通定義から全ページで読み込まれる前提のため、
   既存クラスに触る指定はすべて :has(.p-disco) でこのページ限定に閉じている。
   ============================================================ */

/* テンプレート側の白カードを解除（枠は1件ごとに .p-disco__item で持たせる）
   下方向の余白は .p-disco の padding-bottom 側で一元管理するため 0 に倒す。
   （margin だと親子で相殺され、BACKボタンとの間隔が読めなくなる） */
.p-detail-content__post:has(.p-disco) {
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  margin-bottom: 0;
}

/* テンプレートが自動出力するCMS添付画像を隠す
   （CMSの画像添付欄を未登録にし、本文HTMLの <img> のみで運用する場合は不要） */
.p-detail-content:has(.p-disco) img:not(.p-disco__jacket img) {
  display: none;
}

/* ------------------------------------------------------------
   ここから下は .p-disco 配下のみ。他ページには一切当たらない
   ------------------------------------------------------------ */
.p-disco {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* 最後のカードとBACKボタンの間隔。
     padding なので相殺が起きず、BACKボタンが .p-disco の
     兄弟／親の外側どちらにあっても同じ間隔になる */
  padding-bottom: 60px;
}

/* 1件分のくくり */
.p-disco .p-disco__item {
  padding: 30px 20px;
  background-color: #FFFFFF;
  box-shadow: 0 0 20px rgba(2, 185, 171, 0.1);
}

/* ------------------------------------------------------------
   左カラム（ジャケット / タイトル / 日付 / 種別）
   ------------------------------------------------------------ */
.p-disco .p-disco__jacket {
  max-width: 400px;
  margin: 0 auto 20px;
}

/* 既存 .p-detail-content__post img { width: auto; margin: 0 auto; } の打ち消し */
.p-disco .p-disco__jacket img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.p-disco .p-disco__title {
  font-family: "Gilda Display", serif;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  color: #434343;
  margin-bottom: 10px;
}

.p-disco .p-disco__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.p-disco .p-disco__date {
  font-family: "Gilda Display", serif;
  font-size: 14px;
  line-height: 1;
  color: #02B9AB;
}

.p-disco .p-disco__type {
  display: inline-block;
  font-family: "Gilda Display", serif;
  font-size: 12px;
  line-height: 1;
  color: #02B9AB;
  padding: 4px 10px 3px;
  border: 1px solid #02B9AB;
  border-radius: 2px;
}

/* ------------------------------------------------------------
   右カラム（各種リンク / 説明文）
   ------------------------------------------------------------ */
/* 元ページの本文は body の明朝がそのまま効いていた。
   説明文を <p> にしたことで style.css の
   .p-detail-content__post p { font-family: "Noto Sans JP" } を拾ってしまうため、
   右カラムは明朝で固定して打ち消す。
   （文字サイズ・行間・字送りは body から継承させる） */
.p-disco .p-disco__right,
.p-disco .p-disco__right p {
  font-family: 小塚明朝, YakuHanMP, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 游明朝, "Yu Mincho", 游明朝体, YuMincho, HG明朝E, "MS P明朝", "MS PMincho", "MS 明朝", serif;
}

.p-disco .p-disco__links {
  margin-bottom: 20px;
}

.p-disco .p-disco__links dt {
  font-weight: bold;
}

.p-disco .p-disco__links dd {
  margin: 0 0 12px;
}

.p-disco .p-disco__links a {
  display: inline;
  border-bottom: 1px solid;
  /* SP幅の word-break: break-all を打ち消し、URLはURLとして折り返す */
  word-break: normal;
  overflow-wrap: anywhere;
}

.p-disco .p-disco__links a:hover {
  color: #02B9AB;
  border-color: #02B9AB;
}

.p-disco .p-disco__text {
  text-align: left;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------
   ボタンを2つ並べるくくり
   SP : 縦並び・中央揃え / PC : 横並び（下のメディアクエリ側）
   下方向の余白は既存の .u-mb20 などをそのまま併用する
   ------------------------------------------------------------ */
.p-disco .p-disco__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* ============================================================
   PC（既存サイトと同じ 1024px を境界にする）
   ============================================================ */
@media (min-width: 1024px) {
  .p-disco {
    gap: 40px;
    padding-bottom: 80px;
  }

  .p-disco .p-disco__item {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding: 50px;
  }

  .p-disco .p-disco__jacket {
    max-width: none;
    margin: 0 0 20px;
  }

  .p-disco .p-disco__title {
    font-size: 22px;
  }

  .p-disco .p-disco__meta {
    margin-bottom: 0;
  }

  /* PCは横並び。入り切らない幅になったら折り返して崩れないようにする */
  .p-disco .p-disco__buttons {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px;
  }

  /* 横並びの寄せを変えたいとき（既存の .--external と同じ修飾子の書き方） */
  .p-disco .p-disco__buttons.--center {
    justify-content: center;
  }

  .p-disco .p-disco__buttons.--right {
    justify-content: flex-end;
  }

  /* 2つを均等幅にしたいとき */
  .p-disco .p-disco__buttons.--fit > * {
    flex: 1 1 0;
  }
}