.form-contact {
    max-width: 1000px;
    /* フォーム全体の幅を広げる */
    margin: 0 auto;
    /* フォーム全体を画面中央に寄せる */
    padding: 20px;
    background-color: #f9f9f9;
    /* 背景色を設定 (任意) */
    border-radius: 8px;
    /* 角を丸める (任意) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* 見た目を強調 (任意) */
    text-align: left;
    /* 内容を左揃え */
  }

  .form-block {
    margin-bottom: 20px;
    /* 各フォーム要素の間隔 */
  }

  .select {
    width: 100%;
    /* 幅を100%に設定 */
    padding: 10px;
    /* 内部余白 */
    border: 1px solid #ccc;
    /* ボーダーの色 */
    border-radius: 4px;
    /* 角丸 */
    background-color: #fff;
    /* 背景色 */
    appearance: none;
    /* デフォルトの矢印をカスタマイズ可能にする */
  }

  .select:focus {
    outline: none;
    /* フォーカス時のアウトラインを消す */
    border-color: #007bff;
    /* フォーカス時のボーダー色 */
  }

  .option:disabled {
    color: #999;
    /* デフォルトの選択肢を薄い色で表示 */
  }

  .ex01-tbl-border th,
  .ex01-tbl-border td {
    padding: 0.5em;
    border: none;
  }

  .ex01-tbl-tp table {
    width: 100%;
    border-collapse: collapse;
  }

  .ex01-tbl-tp th,
  .ex01-tbl-tp td {
    text-align: left;
    padding: 10px;
    vertical-align: middle;
  }

  .ex01-tbl-tp td.color-and-image {
    display: flex;
    /* フレックスボックスで配置調整 */
    align-items: center;
    /* 縦方向を中央揃え */
  }

  .ex01-tbl-tp td.color-and-image span {
    margin-right: 10px;
    /* 文字と画像の間隔を調整 */
    font-weight: bold;
    /* テキストを目立たせる */
  }

  .ex01-tbl-tp td.color-and-image img {
    max-width: 120px;
    /* 画像サイズを制限 */
    height: auto;
  }

  /* テーブルスタイル */
  .ex01-tbl-rd table {
    width: 100%;
    border-collapse: collapse;
  }

  .ex01-tbl-rd th,
  .ex01-tbl-rd td {
    text-align: left;
    padding: 10px;
    vertical-align: top;
  }

  /* シリアルナンバーのブロック調整 */
  .serial-number-block {
    margin-top: 20px;
    /* 前の段落との間隔 */
    padding: 10px;
    /* border-top: 1px solid #ddd; */
    /* 視覚的に区切りを追加 */
    /* background-color: #f9f9f9; */
    /* 背景色を追加して目立たせる */
  }

  /* シリアルナンバーセクション（画像など） */
  .serial-number-section {
    text-align: center;
    margin-top: 20px;
    /* 上下の間隔を調整 */
  }

  /* 画像調整 */
  .serial-image {
    max-width: 200px;
    height: auto;
    margin: 10px;
    /* 画像間の余白 */
    display: inline-block;
  }

  /* 行全体を中央揃え */
  .centered-row td {
    text-align: center;
    vertical-align: middle;
  }

  .contact-text {
    margin-bottom: 5px;
    /* 段落間の余白を調整 */
    line-height: 1.4;
    /* 行間を詰める */
  }

  /* 全体の右寄せ */
  .main-content {

    /* 内側余白を設定 */
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
  }

  .tight-spacing {
    margin-bottom: 10px;
    margin-top: 4px;
  }

  .compact-list {
    margin: 0;
    padding: 0;
    list-style: none;
    /* list-style: disc inside; /* 中点をリストスタイルとして表示 */
  }

  .compact-list li {
    margin: 2px 0;
    /* 各リスト項目の間隔を最小限に */
    line-height: 1.2;
    /* 行間を詰める */
  }

  .serial-container {
    margin-left: 20px;
    /* ＜対象シリアルナンバー＞全体を右に寄せる */
    /* line-height: 0.1; */
    /* 行間を調整 */
  }

  .serial-numbers {
    margin-left: 40px;
    /* シリアル番号部分をさらに右に寄せる */
    /* line-height: 0.9; */
    /* 行間を調整 */
  }

  .info-table {
    width: 100%;
    margin-top: 20px;
  }

  .info-table th,
  .info-table td {
    border: none;
    padding: 8px;
    text-align: left;
  }

  .section-title {
    font-weight: bold;
    background-color: #f4f4f4;
    padding: 10px;
  }

  .section-subtitle {
    font-weight: bold;
    margin-top: 10px;
  }

  /* 対象カラー画像の横並び設定 */
  .color-images {
    display: flex;
    flex-wrap: wrap;
    /* レスポンシブ対応 */
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px;
    position: relative;
  }

  .color-item {
    flex: 1 1 calc(50% - 20px);
    /* 横2列、スペース分を調整 */
    text-align: center;
    position: relative;
  }

  .color-item img {
    max-width: 100%;
    /* 画像が親要素の幅を超えないよう調整 */
    height: auto;
  }

  .color-item span {
    position: absolute;
    /* top: 10%; */
    /* 画像の上部中央に配置 */
    left: 50%;
    transform: translate(-50%, -10%);
    /* color: white;
    background-color: rgba(0, 0, 0, 0.5); */
    /* 半透明背景 */
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    z-index: 1;
    /* 文字が画像の上に表示されるよう設定 */
  }

  /* レスポンシブ対応 */
  @media screen and (max-width: 768px) {
    .color-item {
      flex: 1 1 100%;
      /* 横幅100%で縦並び */
    }
  }

  /* シリアル番号セクションの画像横並び設定 */
  .serial-number-section {
    display: flex;
    /* 横並びにする */
    justify-content: space-between;
    /* 画像間のスペースを均等化 */
    gap: 20px;
    /* 画像間のスペース */
    margin-top: 10px;
  }

  .serial-number-section img {
    width: 45%;
    /* 各画像の幅を親要素の45%に縮小 */
    height: auto;
    /* 縦横比を保持 */
    object-fit: contain;
    /* 画像を枠内に収める */
  }

  /* スマホ用レスポンシブ対応: 縦並びに変更 */
  @media screen and (max-width: 768px) {
    .serial-number-section {
      flex-direction: column;
      /* 縦並びにする */
    }

    .serial-number-section img {
      width: 100%;
      /* スマホでは幅100%に設定 */
    }
  }

  .note {
    margin-top: 10px;
    padding: 10px;
    background-color: #f9f9f9; /* 薄い背景色で区別 */
    border-left: 3px solid #ccc; /* 左側の線で注意書きを強調 */
    font-size: 14px;
    line-height: 1.6;
  }
  
  /* お手続きの流れ - 行間調整 */
  .info-table ol {
    margin: 0;
    padding-left: 20px;
  }

  .info-table ul {
    margin: 0;
    padding-left: 20px;
  }

  .info-table li {
    margin-bottom: 10px;
    /* 通常のリスト行間 */
  }

  .info-table li:nth-child(2),
  /* 2番目の項目 */
  .info-table li:nth-child(3) {
    /* 3番目の項目 */
    margin-bottom: 5px;
    /* 2.と3.の行間を詰める */
  }