.header-list{
  margin: 0 0 0 20px;
}

/* カードの見出しを強制的に目立たせる */
.card-title{
  margin: 0 0 12px;
  font-size: 1.5rem;     /* 24px */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #111827;        /* gray-900相当 */
  line-height: 1.2;
}

/* バッジ風 */
.card-title__badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;  /* gray-200 */
  background: #f9fafb;        /* gray-50 */
}

.a4-frame {
  /*aspect-ratio: 1 / 1.414;*/
  aspect-ratio: 1 / 1.25;
}

/* H1の大きさを変える */
@media (max-width: 639px) {
  .page-title { font-size: 1.5rem; line-height: 2rem; } /* text-2xl */
}
@media (min-width: 640px) {
  .page-title { font-size: 1.875rem; line-height: 2.25rem; } /* text-3xl */
}

/*ヘッダーのリンク操作*/
@media (max-width: 640px) {
  /* いったん全部表示 */
  .header-list a { display: inline; }

  /* 消す：2=ツールの使い方, 3=利用条件, 5=お問い合わせ */
  .header-list a:nth-child(2),
  .header-list a:nth-child(3) {
    display: none;
  }
}

/*スマホのパンくず*/
/* breadcrumb: mobile readability (2nd item as top) */
@media (max-width: 640px) {
  /* 折り返し防止 */
  nav[aria-label="breadcrumb"] ol {
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
  }

  /* スマホでは全て一旦非表示 */
  nav[aria-label="breadcrumb"] ol > li {
    display: none;
  }

  /* スマホでは「2番目の階層（= 3つ目のli）」をトップとして表示 */
  nav[aria-label="breadcrumb"] ol > li:nth-child(3) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4b5563; /* text-gray-600相当（お好みで） */
  }

  /* 「帳票作成ツール一覧」をスマホだけ「一覧」に短縮表示 */
  nav[aria-label="breadcrumb"] ol > li:nth-child(3) {
    position: relative;
    font-weight: 600;
  }
}