@charset "utf-8";

/* 「日程別おすすめ企画」新レイアウト試作。
   企画を縦に並べたアコーディオンで見せる。
   展開前は 画像・企画名・ジャンル、展開後に 団体名・お気に入り・説明文・場所・日時・ボタン。
   ブレークポイントは persona.css / search/pickup/pickup.css に合わせて 1024px。 */

/* ---- ページ全体 ---- */

.pd-page {
  max-width: 720px;
  margin: 0 auto;
  /* 下は main の margin-bottom（共通。スマホ 45px・PC 150px）が別に付くので、ここは少しだけ（校正 #201 #214。以前は 80px。PC は下で 0） */
  padding: 24px 16px 24px;
  line-height: 1.8;
  color: var(--themevintage);
}

/* 共通の p { color: var(--themeblack) }（common_general.css）を打ち消して、親の色（--themevintage）を継がせる。
   :where() で詳細度を p と同じにしてあるので、個別に色を決めたものはそちらが勝つ */
:where(.pd-page) p {
  color: inherit;
}

.pd-page__lead {
  margin: 0;
  font-size: 15px;
  color: var(--themevintage);
}

/* その日のおすすめ企画がまだ決まっていないとき */
.pd-empty {
  margin: 24px 0;
  text-align: center;
  font-size: 14px;
  color: var(--themevintage);
}

/* DB に繋がらずサンプル表示になっているときの注意書き */
.pd-notice {
  padding: 10px 14px;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--themevintage);
  background: var(--themeskyblue);
  border-radius: 6px;
}

/* ---- 日程タブ ---- */
/* 56回の pickup_day.php と同じ #day1 / #day2 / #day3 のハッシュ＋active クラス方式。
   ハッシュを変えると common_header.php からのリンクが効かなくなるので固定。 */

.pd-tabs {
  display: flex;
  margin-top: 24px;
  padding: 4px 8px;
  background: #fff;
  border-radius: 12px;
}

/* タブ。文字は企画名と同じグラデ（themeocean → その日の色）。選ばれているタブだけ濃く出て、
   タブの下に線、文字の右上に飾りが出る。
   線はタブ（a）の幅いっぱいに引くので .pd-tab に、飾りは文字の右上に置くので中の .pd-tab__label に付ける */
.pd-tab {
  position: relative;
  flex: 1;
  /* 文字の大きさが違っても、3つのタブの文字の高さが揃うように上下中央に置く */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 4px;
  font-family: "Kiwi Maru", sans-serif;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* 文字のグラデは .pd-item__title と同じ作り。選ばれていないタブは薄くしておく */
.pd-tab__label {
  position: relative;
  display: inline-block;
  padding: 0 4px;
  background: linear-gradient(
    to right,
    #0c5f81 0%,
    var(--text-color, color-mix(in srgb, var(--style-color, #6bd3f6) 65%, #000))
      100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25));
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

.pd-tab:hover .pd-tab__label,
.pd-tab.active .pd-tab__label {
  opacity: 1;
}

/* 下線。ふだんは幅0で、hover で真ん中から左右に伸びる。active では伸びたまま。
   高さはキラキラの大きさに合わせてあり、線そのものは縦の中央に 1.5px で描く */
.pd-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px; /* タブの下の padding（12px）の中に収める */
  height: 10px;
  /* 線は文字と同じグラデーション（themeocean → その日の色。校正。以前は ocean の単色） */
  background: var(--pd-tab-line) no-repeat center / 80% 1.5px; /* active（下）と同じ幅 */
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.34, 1, 0.64, 1);
}

.pd-tab:hover::after,
.pd-tab.active::after {
  transform: scaleX(1);
}

/* active のときだけ、線の中央にキラキラ（img/tab_deco_small.svg）を重ねる。先に書いた背景が上になる */
.pd-tab.active::after {
  background:
    url(/visitor/img/tab_deco_small.svg) no-repeat center / contain,
    var(--pd-tab-line) no-repeat center / 80% 1.5px;
}

/* 下線のグラデ。.pd-tab__label の文字と同じ色の並び */
.pd-tab {
  --pd-tab-line: linear-gradient(
    to right,
    #0c5f81 0%,
    var(--text-color, color-mix(in srgb, var(--style-color, #6bd3f6) 65%, #000))
      100%
  );
}

/* 右上の飾り（img/tab_deco.svg）。繰り返さず、縦横比を保って 36px の枠に収める */
.pd-tab__label::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -18px;
  width: 30px;
  height: 30px;
  background: url(/visitor/img/tab_deco.svg) no-repeat center / contain;
  transform: scale(0);
  transition: transform 0.25s ease;
}

.pd-tab.active .pd-tab__label::before {
  transform: scale(1);
}

/* 22日・23日は、右上の飾りをその日の色にする（校正 #127 #151）。下線の中央のキラキラは元の色のまま。
   21日は元の絵（水色）のまま。飾りは画像を mask にして、その形をその日の色で塗る */
.pd-tab[href="#day2"] .pd-tab__label::before,
.pd-tab[href="#day3"] .pd-tab__label::before {
  background: var(--tab-deco-color);
  -webkit-mask: url(/visitor/img/tab_deco.svg) no-repeat center / contain;
  mask: url(/visitor/img/tab_deco.svg) no-repeat center / contain;
}

.pd-tab[href="#day2"] {
  --tab-deco-color: var(--text-color);
}

.pd-tab[href="#day3"] {
  --tab-deco-color: var(
    --text-color
  ); /* 琥珀色（#b07d00）。タブの文字のグラデの右端と同じ色 */
}

@media (prefers-reduced-motion: reduce) {
  .pd-tab__label,
  .pd-tab::after,
  .pd-tab__label::before {
    transition: none;
  }
}

.pd-panel {
  display: none;
}

.pd-panel.active {
  display: block;
  padding-top: 4px;
}

/* 一覧の下にもう一組。切り替えるのに上まで戻らなくて済むように */
.pd-tabs--bottom {
  margin-top: 32px;
}

/* ---- アコーディオン ---- */

/* 枠と企画名・タブの文字のグラデに使う色（--style-color）。日ごとに 21日=水色・22日=赤・23日=黄。
   22日・23日は白を50%混ぜて淡くしている。企画形式の色に戻すときは day.php の displayDayAccordion を見る
   （タブは日ごとの色のまま残る）。
   PC だけカード右上を淡く色付けしている（このファイルの末尾）。
   --text-color は、タブ・企画名のグラデの右端と写真の枠に使う濃い色。白を混ぜた --style-color に黒を足すと
   灰色が入ってくすむので、白を混ぜる前の色から作る。21日は水色に黒10%（白地と約3.1:1）、
   23日は黒ではなくオレンジ寄りに濃くした琥珀色（約3.6:1）。22日は従来どおり（文字は黒35%、枠は黒20%）。
   企画形式の色に戻すときは、21日・23日の --text-color も外す（日ごとの色のまま残るため）。 */
#day1 .pd-item,
.pd-tab[href="#day1"] {
  --style-color: color-mix(
    in srgb,
    #1cb0e6 55%,
    #fff
  ); /* 21日は鮮やかな水色に白を45% */
  --text-color: color-mix(in srgb, #1cb0e6 90%, #000); /* ≒ #199ecf */
}

#day2 .pd-item,
.pd-tab[href="#day2"] {
  --style-color: color-mix(in srgb, var(--decoration) 50%, #fff);
  --text-color: color-mix(in srgb, var(--style-color) 65%, #000);
  --frame-color: color-mix(in srgb, var(--style-color) 80%, #000);
}

#day3 .pd-item,
.pd-tab[href="#day3"] {
  --style-color: color-mix(in srgb, var(--booth, #b07d00) 13%, transparent);
  --text-color: #b07d00; /* --booth（#f4ca00）を琥珀色に濃くしたもの */
}

.pd-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.pd-item {
  overflow: hidden;
  background: white;
  border-radius: 10px;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.pd-item:hover,
.pd-item[open] {
  box-shadow: 1px 1px 4px var(--style-color);
  transform: translate(2px, 2px);
}

/* 展開前（常に見えている部分） */

.pd-item__summary {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  list-style: none; /* 既定の三角マーカーを消す */
}

.pd-item__summary::-webkit-details-marker {
  display: none;
}

/* img には疑似要素が付かないので、包みの span に付ける
   ::before = 右下にずれた影（写真の後ろ）
   枠は .pd-item__frame（下に説明） */
.pd-item__imgwrap {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  width: 72px;
  aspect-ratio: 1 / 1;
}

.pd-item__imgwrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: translate(4px, 4px);
  background-color: #c8e4e9;
  box-shadow: 0 0 3px #c8e4e9;
}

/* 光るグラデーションの枠。グラデの枠は mask でくり抜くしかなく、くり抜くと
   同じ要素の box-shadow も消えるので、2段に分ける。
   .pd-item__frame         = 光（filter は子をくり抜いた後に効くので、枠の形に沿って光る）
   .pd-item__frame::before = グラデの枠そのもの
   枠は写真の外側に付ける（枠の太さぶん外へ広げる）ので、写真の端は隠れない */
.pd-item__frame {
  --pd-frame-width: 2px; /* 枠の太さ */
  position: absolute;
  z-index: 1;
  inset: calc(-1 * var(--pd-frame-width));
  filter: drop-shadow(0 0 0px rgba(12, 95, 129, 0.8));
  pointer-events: none;
}

.pd-item__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 枠は border で描く（校正。以前は背景を mask でくり抜いていて、画像の位置が 0.4px のような半端な所に来ると
     辺によって太さが違って見えた。border は画面のピクセルにそろえて描かれるので、4辺が同じ太さになる）。
     色は今までどおり、左上の日の色 → 右下の ocean のグラデーション */
  border: var(--pd-frame-width) solid transparent;
  border-image: linear-gradient(
      120deg,
      var(
        --frame-color,
        var(
          --text-color,
          color-mix(in srgb, var(--style-color, #8ccbd0) 80%, #000)
        )
      ),
      var(--themeocean)
    )
    1;
}

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

.pd-item__headtext {
  flex: 1;
  min-width: 0;
}

.pd-item__title {
  font-family: "Kiwi Maru", sans-serif;
  font-size: 17px;
  /* スマホで企画名が2行になったとき、行間がワードの枠との間より広く見えないよう詰める（校正 #142。以前は 1.5。PC は下で 1.5） */
  line-height: 1.3;
  /* 文字をグラデーションにする（背景を文字の形で切り抜き、文字色を透明にする） */
  width: fit-content; /* 背景を文字の幅に合わせ、グラデの端まで文字に乗るようにする */
  background: linear-gradient(
    to right,
    #0c5f81 0%,
    var(--text-color, color-mix(in srgb, var(--style-color, #6bd3f6) 65%, #000))
      100%
  ); /* 右端は日ごとの --text-color（無ければ --style-color に黒を35%） */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* text-shadow だと透明な文字の下から影が透けて濁るので、filter で付ける */
  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25));
}

.pd-item__genre {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
  margin-top: 8px; /* 企画名との間を少し空ける（校正 #149。以前は 4px） */
  font-size: 12px;
  color: var(--themevintage);
}

.pd-item__genre-icon {
  flex-shrink: 0; /* ワードが長くてもアイコンは縮めない */
  width: 18px;
  height: 18px;
}

/* パンフ企画ワード（まだ無い企画はジャンル名）を囲む丸い枠。persona の .pk-koma__genre と同じ形 */
.pd-item__pill {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
  padding: 0 7px; /* 校正 #139 */
  border: 1px solid var(--themevintage);
  border-radius: 999px;
}

/* スマホは文字が小さく（12px）、行の高さとアイコン（18px）が同じでアイコンが枠に付いてしまう
   （パフォーマンスの人の絵が上下ぎりぎり）。アイコンを少し小さくし、上下にも少し余白を取る（校正 #213） */
@media screen and (max-width: 1023px) {
  .pd-item__pill {
    padding: 1px 8px 1px 7px;
  }

  .pd-item__pill .pd-item__genre-icon {
    width: 16px;
    height: 16px;
  }
}

/* 狭いスマホ（360px 以下）は、写真と余白を詰めてワードの枠に幅を回す。
   ワードは1行に入りきらないと2つ目が隠れる（.pd-item__words）ので、350px を切ると
   「講演会 / 学部別講義」の「学部別講義」が消えていた。写真 72→60px、間 12→8px、カードの内側 10→8px で
   約 20px 空き、320px まで2つとも出る */
@media screen and (max-width: 360px) {
  .pd-item__summary {
    gap: 8px;
    padding: 8px;
  }

  .pd-item__imgwrap {
    width: 60px;
  }
}

/* 展開前に出す、表示中のタブの日の開催時間。スマホでは出さない（PC だけ。下の @media） */
.pd-item__time {
  display: none;
  gap: 5px;
  align-items: center;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--themevintage);
}

.pd-item__time-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* パンフ企画ワード。1と2を横に並べ、1行に入りきらなければ2を次の行へ折り返させて隠す
   （高さを1行分に固定して overflow: hidden）。1だけでも長いときは … で切る */
.pd-item__words {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5em;
  min-width: 0;
  height: 1.5em;
  line-height: 1.5;
  overflow: hidden;
}

.pd-item__word {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2つ並ぶときは間に「/」。2の頭に付けるので、2が折り返して隠れるときは「/」も一緒に消える */
.pd-item__word + .pd-item__word::before {
  content: "/";
  margin-right: 0.5em;
}

/* 開閉の矢印。画像を使わず CSS で描いている */
.pd-item__chevron {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 2px solid var(--themeocean);
  border-bottom: 2px solid var(--themeocean);
  transition: transform 0.25s ease;
  transform: rotate(45deg) translate(-3px, -3px);
}

.pd-item[open] .pd-item__chevron {
  transform: rotate(-135deg) translate(-3px, -3px);
}

/* 展開後 */

.pd-item__body {
  overflow: hidden;
}

.pd-item__bodyinner {
  padding: 0 5% 16px;
  border-top: 1px solid var(--themeskyblue);
}

.pd-item__circlerow {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
}

.pd-item__circle {
  margin: 0;
  font-size: 14px;
  color: var(--themevintage);
}

.pd-item__fav {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
}

.pd-item__fav img {
  width: 100%;
  height: 100%;
  transition: transform 0.2s;
}

/* 押したときに少し跳ねる（タイムテーブルの♡ .card_heart_tt.clicked と同じ動き。clicked は pickup_fav.js が付ける。校正 #203） */
.pd-item__fav.clicked {
  animation: pdHeartClick 0.6s ease-in-out;
}

@keyframes pdHeartClick {
  0% {
    transform: scale(1) translateY(0);
  }
  25% {
    transform: scale(1.2) translateY(-3px);
  }
  50% {
    transform: scale(1.1) translateY(-5px);
  }
  75% {
    transform: scale(1.2) translateY(-3px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* PC はカーソルを合わせると少し大きくなる（タイムテーブルの♡と同じ。校正 #203） */
@media (hover: hover) and (pointer: fine) {
  .pd-item__fav:hover img {
    transform: scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-item__fav.clicked {
    animation: none;
  }
}

.pd-item__desc {
  margin: 8px 0 0;
  padding: 5px 0;
  font-size: 12px;
}

/* 紹介文は Markdown から作った HTML（<p> や見出しを含む）。前後の余白だけ詰める */
.pd-item__desc > :first-child {
  margin-top: 0;
}
.pd-item__desc > :last-child {
  margin-bottom: 0;
}

/* 紹介文の見出し。手元の簡易変換（search/lib/lib.php の v2_md_mini）は ## を h5 にずらすが、
   Parsedown を置くと ## は h2 のまま出るので、どの段でも同じ見た目になるよう全部まとめて指定する */
.pd-item__desc :is(h1, h2, h3, h4, h5, h6) {
  font-size: 14px;
}

/* 見出しらしく見せるため、文字を themevintage → themeocean のグラデーションにし、ocean の影を付ける
   （校正 #326。以前は【】で囲んでいた）。文字の大きさ・太さは変えない。
   グラデを文字の幅に合わせるため fit-content にする（ブロックの幅いっぱいだと短い見出しが vintage 寄りの色だけになる） */
.pd-item__desc :is(h1, h2, h3, h4, h5, h6) {
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(to left, var(--themevintage), var(--themeocean));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* text-shadow だと透明な文字の下から影が透けて濁るので、filter で付ける（day.css の企画名と同じ） */
  filter: drop-shadow(
    0 1px 1px color-mix(in srgb, var(--themeocean) 25%, transparent)
  );
}

/* 紹介文と場所・日時の間の区切り線。作りは h2（common_general.css）と同じで、
   線の上に飾りの SVG を重ねる。SVG の白い四角が線を隠すので、飾りの部分だけ線が切れて見える */
/* 両端は紹介文・場所日時と同じ位置にそろえる（校正 #325。以前は左右 5% ずつ内側に凹ませていた） */
.pd-item__line {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 14px 0; /* 紹介文と場所の間を少し詰める（校正。以前は 20px の7割） */
  background: var(--themeocean);
}

/* ひし形と点々（img/desc_deco.svg）。線の右寄りに、縦の中央を線に合わせて置く */
.pd-item__line::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0; /* 線の右端にそろえる（校正 #325。以前は 5px 内側） */
  width: 25px;
  aspect-ratio: 211 / 181; /* SVG の viewBox と同じ比率 */
  background: url(/visitor/img/desc_deco.svg) no-repeat center / contain;
  transform: translateY(-50%);
}

.pd-item__meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--themevintage);
}

.pd-meta {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.pd-meta__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 8px;
}

.pd-meta__body {
  flex: 1;
}

/* 共通の p { color: var(--themeblack) } が親の色を上書きするので、ここでも指定する */
.pd-meta__place {
  color: var(--themevintage);
  margin: 0;
  padding: 7px 0;
}

/* 雨天時の会場などの注記は次の行に（persona.css の .pk-meta__note と同じ） */
.pd-meta__note {
  display: block;
}

/* 日ごとの時間。日付は枠で囲んだマスを縦に積み、開催がある日（.is-open）だけ色を付ける */
.pd-day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 5px 0;
}

/* 2行目からは上に1px重ねて、マスの境目の線が2重にならないようにする */
.pd-day + .pd-day {
  margin-top: -1px;
}

.pd-day__label {
  flex-shrink: 0;
  width: 40px;
  border-radius: 3px;
  border: 1px solid var(--themeocean);
  text-align: center;
  opacity: 0.5;
}

.pd-day.is-open .pd-day__label {
  background: var(--themeocean);
  color: var(--themewhite);
  opacity: 1;
}

.pd-day__time {
  flex: 1;
}

.pd-item__btn {
  margin-top: 14px;
}

.pd-btn {
  display: block;
  padding: 10px 24px;
  font-size: 15px;
  color: var(--themeocean);
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--themeocean);
  border-radius: 999px;
  transition:
    opacity 0.2s ease,
    background 0.2s ease;
}

.pd-btn:hover {
  background: var(--themeocean);
  color: white;
}

/* ---- 一番下の、ほかのおすすめページへの誘導（校正 #136 #141） ---- */
.pd-more {
  margin-top: 48px;
  text-align: center;
}

.pd-more__lead {
  margin: 0 0 4px;
  text-align: center; /* 共通の p の text-align を上書き */
  font-family: "Kiwi Maru", sans-serif;
  font-size: 14px;
  color: var(--themeocean);
}

/* ---- PC ---- */

@media screen and (min-width: 1024px) {
  .pd-page {
    max-width: 800px;
    padding-bottom: 0; /* main の margin-bottom 150px だけにする（校正 #201） */
  }

  .pd-more__lead {
    font-size: 16px;
  }

  .pd-tab {
    padding: 14px 4px;
    font-size: 18px;
  }

  /* 左右は展開後の中身（.pd-item__bodyinner の 5%）にそろえる。
     画像が少し右へ（校正 #211。以前は 14px）、矢印が少し左へ寄り（校正 #210）、
     矢印と展開後の♡の左右の中心がそろう（校正 #205。矢印の幅は下の .pd-item__chevron） */
  .pd-item__summary {
    gap: 18px;
    padding: 14px 5%;
  }

  .pd-item__imgwrap {
    width: 80px;
  }

  /* 画像が大きくなる分、影と枠のずらし・枠の太さも大きくする（スマホは上の 3px / 2px） */
  .pd-item__imgwrap::before {
    transform: translate(5px, 5px);
  }

  .pd-item__title {
    font-size: 23px;
    line-height: 1.5;
  }

  .pd-item__genre,
  .pd-item__time {
    font-size: 14px;
  }

  /* PC は時間をワードの右に並べる */
  .pd-item__sub {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
  }

  .pd-item__time {
    display: flex;
    flex-shrink: 0;
    font-size: 16px; /* 展開前の時間（校正 #143） */
    margin-top: 0;
  }

  /* ワードの楕円と時間を上下中央にそろえる（校正）。企画名との間の余白（ワードの margin-top 8px）を
     並びの段（.pd-item__sub）に移す。ワードだけが余白を持っていて、時間が 2px 上に寄っていた */
  .pd-item__sub {
    margin-top: 8px;
  }

  .pd-item__sub > .pd-item__genre {
    margin-top: 0;
  }

  /* 開閉の矢印。細く大きく（校正 #216。スマホは上の 9px・2px のまま）。
     回すと幅が √2 倍になるので、外から見た幅が♡（25px）の中に収まり、中心が♡と同じ所に来るよう
     左右の余白で 25px の箱にしている（校正 #205。#134 で右端に寄せていたのはやめた） */
  .pd-item__chevron {
    width: 13px;
    height: 13px;
    margin: 0 6px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
  }

  .pd-item__desc {
    font-size: 14px;
  }

  .pd-item__desc :is(h1, h2, h3, h4, h5, h6) {
    font-size: 16px;
  }

  .pd-item__circle {
    font-size: 16px;
  }

  /* 場所・日時とボタンを最下段で横に並べる */
  .pd-item__bodyinner {
    display: grid;
    grid-template-areas:
      "circle circle"
      "desc   desc"
      "line   line"
      "meta   btn";
    grid-template-columns: 1fr auto;
    column-gap: 0; /* 校正 #137（以前は 24px） */
    align-items: end;
    padding: 0 5% 20px;
  }

  .pd-item__circlerow {
    grid-area: circle;
  }
  .pd-item__desc {
    grid-area: desc;
  }
  .pd-item__line {
    grid-area: line;
  }
  .pd-item__meta {
    grid-area: meta;
    flex-direction: row;
    gap: 32px;
    padding-right: 16px; /* 時間が長いとき（FINALE など）にボタンとくっつかないように（校正 #217） */
  }

  .pd-item__btn {
    grid-area: btn;
  }

  .pd-btn {
    display: inline-block;
    white-space: nowrap;
    padding: 10px 70px;
  }
}

/* ---- PC だけ、カード右上を淡く色付けする ----
   スマホは白のまま（上の .pd-item の background: white）。
   淡い色（--pd-tint）は、色相だけタブの色に合わせ、彩度・明度・不透明度は #cf4f4f21 にそろえている。
   23日だけは黄色（--booth）そのものを13%で（校正 #204）。 */
@media screen and (min-width: 1024px) {
  #day1 .pd-item {
    --pd-tint: hsl(196 57% 56% / 13%);
  }

  #day2 .pd-item {
    --pd-tint: hsl(0 57% 56% / 13%);
  }

  #day3 .pd-item {
    /* 23日は明るい黄色（--booth #f4ca00）を13%で（校正 #204。以前は琥珀色 --text-color で、くすんで汚く見えた） */
    --pd-tint: color-mix(in srgb, var(--booth, #f4ca00) 13%, transparent);
  }

  .pd-item {
    background: linear-gradient(
      220deg,
      var(--pd-tint, #cf4f4f21) 0%,
      white 33% 22%
    );
  }
}