/* --- ダイアログ本体のアニメーション設定 --- */
dialog {
border: none;
border-radius: 16px;
padding: 30px;
width: 90%;
max-width: 90%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

/* 既存のプロパティに追加 */
z-index: 9999;
/* カードのz-indexより確実に大きくする */
position: fixed;
/* 念のため固定配置を明示 */

/* アニメーションの基本設定 */
transition:
  opacity 0.4s ease,
  transform 0.4s ease,
  display 0.4s allow-discrete,
  overlay 0.4s allow-discrete;

/* 閉じている時の状態 */
opacity: 0;
transform: translateY(-20px) scale(0.95);
}

/* 開いている時の状態 */
dialog[open] {
opacity: 1;
transform: translateY(0) scale(1);
}

/* 表示が始まる瞬間の初期状態 */
@starting-style {
dialog[open] {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
}
}

/* --- 背景（グレーアウト）のアニメーション --- */
dialog::backdrop {
background-color: rgba(0, 0, 0, 0);
transition:
  background-color 0.4s,
  display 0.4s allow-discrete,
  overlay 0.4s allow-discrete;
cursor: pointer;
/* 背景をクリックできることが伝わるように */
}

dialog[open]::backdrop {
background-color: rgba(0, 0, 0, 0.6);
}

@starting-style {
dialog[open]::backdrop {
  background-color: rgba(0, 0, 0, 0);
}
}

/* 1. 親要素（カードを囲むコンテナにこのクラスを付与してください） */
.card-container {
display: flex;
flex-wrap: wrap;
/* スマホで折り返すために必須 */
gap: 1.5rem;
/* カード間の隙間 */
align-items: stretch;
/* 高さを一番高いカードに自動で合わせる */
}

/* 2. card-link（統合版） */
.card-link {
/* 高さを揃えるための追加設定 */
flex: 1;
/* 幅を均等に広げる */
min-width: 300px;
/* 画面が狭くなったら自動で1枚（100%）に切り替わる */
display: flex;
/* 中身の配置も制御可能に */
flex-direction: column;
/* 中身を縦に並べる */

/* 現行のデザインを維持 */
position: relative;
border-radius: .5rem;
padding: 2rem 2.5rem;
color: #333;
background-color: #fff;
border: 0.1rem solid #e0e0e0;
text-decoration: none;
/* 下線を消す */

/* 前回のtransitionも活かしています */
transition: background-color .3s ease-out, transform .2s ease-out;
-webkit-box-shadow: rgb(4 0 0 / 20%) 0 1px 5px;
box-shadow: rgb(4 0 0 / 20%) 0 1px 5px;
}

/* 項目一行（pタグ）を横並びにし、折り返しを禁止する */
.card-link p {
display: flex;
align-items: baseline;
/* 文字の底辺を揃える */
/* white-space: nowrap; */
/* 1行に強制的に収める（はみ出す場合は調整が必要） */
margin: 0.2rem 0;
/* 行間の微調整 */
}

/* 項目名（ラベル部分）の幅を固定して揃える */
.card-link p .s-fz-11 {
display: inline-block;
flex-shrink: 0;
/* ラベルが潰れないように固定 */
width: 76px;
/* ★ここの数値でコロンの位置を調整（一番長い文字に合わせる） */
color: #666;
/* ラベルの色を少し薄くすると読みやすい */
}

/* 中身（値の部分）の設定 */
.card-link p .s-fz-16 {
flex-grow: 1;
/* 残りの幅をすべて使う */
overflow: hidden;
/* はみ出し防止 */
}

/* スマホ表示の時だけテキストを小さくする設定（メディアクエリ） */
@media screen and (max-width: 760px) {
.card-container {
  /* コンテナ自体の幅を80%にして中央に寄せる */
  margin: 0 auto;

  /* カード同士が縦に並ぶ際の間隔（必要に応じて） */
  gap: 2rem;
}

.card-link {
  z-index: 1;
  /* カード1枚の幅をコンテナいっぱいに広げる */
  flex: 0 0 100%;
  min-width: 0;
  /* さきほどの300px設定を解除して80%に収まるようにする */

  /* 最初のご質問の「テキストを小さく」もここにまとめられます */
  font-size: 14px;
  padding: 1.5rem;
}
}

/* 状態別のスタイル */
a.card-link:visited {
color: #333;
}

.card-link:hover {
text-decoration: none;
background-color: #f5f5f5;
}

/* 無効化されたカードの見た目 */
.card-link.is-disabled {
cursor: default;
/* カーソルを矢印にする */
box-shadow: none;
/* 影を消して「押せない感」を出す */
}

/* 無効カードの時だけホバー演出を消す */
.card-link.is-disabled:hover {
background-color: #fff;
transform: none;
}

/* 2行に収めたいタイトル部分 */
.auto-adjust {
/* 現在の設定を反映 */
font-size: 2rem;
line-height: 2.6rem;

/* 2行分の高さを厳密に指定 (2.6rem * 2 = 5.2rem) */
height: 5.2rem;

/* はみ出し防止と2行制限の表示設定 */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

/* 文字がつながっている場合に備えて */
word-break: break-all;

/* 念のため上下の余白をリセット（JSの判定狂いを防ぐため） */
margin: 0;
padding: 0;
}