/*成約ページテーブル関連*/


/*表全体*/


.box1 {
margin: 5px auto;
width: 97%;
height: 300px;
text-align: center;
overflow-y: scroll;
background-color: #ffffff;
border: solid 4px #cccccc;
scrollbar-color: #FAF8D8 #cccccc;
scrollbar-width: auto;
border-radius: 5px;

}

main a{
	text-decoration: none;
	color: #1a73e8;
}

main a:hover {
    color: #ff0000; /* ホバー時の色 */
}
.box1::-webkit-scrollbar {
    width: 8px;
}

.box1::-webkit-scrollbar-thumb {
    width: 6px;
    border-radius: 5px;
}

@supports not (display: grid) { //gridの使用ができないブラウザの場合、括弧の中の記述を適応。
  div {
    display: flex; 
  }
}

.box1 td:first-child {
  background: #fbf5f5;
}

.box1 td , .box1 th , .box1 tr{
    white-space: nowrap;
    padding: 2px ;　/* 上下 2pxの余白 */
    border-collapse: collapse;
    border: 1px solid #a3a3a3;　/*表全体を1pxの線で囲う*/

  }

.box1 table,.box2 table {
margin-right: auto;
margin-left: auto;
border-collapse: collapse;
text-align: center;
width: 100%;
empty-cells: useful;

}

.box1 thead th,.box2 thead th {
color: #666;
background-color: #a2d4fa;
padding: 0.8rem 0.5rem;
text-align: center;
position: sticky;
top: 0;
empty-cells: useful;

}

.scroller::-webkit-scrollbar {
    width: 8px;
    background-color: #DE94BF; 
}

.scroller::-webkit-scrollbar-thumb {
    background: #FAF8D8;
    width: 6px;
    border-radius: 5px;
}


.c_price {
color: #00acfe;
font-size: 24px;
font-weight: bold;
}
.b_price {
color: #192cff;
font-weight: bold;
}
.c_green {
color: #19bf19;
font-weight: bold;
}
.c_red {
color: #ff2c2f;
font-weight: bold;
}

@media screen and (max-width: 640px) {
  .box1 {
    width: 100%;
  }
  .box1 thead {
    display: none;
    empty-cells: useful;

 }
  .box1 tr {
    width: 100%;
 }
  .box1 td {
    display: block;
    text-align: right;
    width: 100%; /* DJ BH は97％　他は100％ */
    padding: 2px ;/* 上下 2pxの余白 */
    white-space: nowrap;
    empty-cells: useful;

  }
  .box1 td:first-child {
    background: #a2d4fa;
    color: #666;
    font-weight: bold;
    text-align: center;
    empty-cells: useful;
  }
  .box1 td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
    empty-cells: useful;

  }
}
    .step-heading {
      font-size: 1.5em;
      font-weight: bold;
      text-align: center;
      margin: 20px 0;
      color: #333;
    }

    .step-highlight {
      display: inline-block;
      background-color: #d6000f; /* パープル  ここは雛形に色を合わせる*/
      color: #fff;
      font-size: 0.9em;
      font-weight: bold;
      padding: 5px 10px;
      border-radius: 20px;
      margin: 5px 5px;
    }
	        .container_img {
            max-width: 95%;
            margin: 30px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            background-color: #f9f9f9;
        }
        .screenshot {
            margin: 20px 0;
            border: 2px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .caption {
            font-size: 1.1em;
            color: #555;
            margin-top: 10px;
        }
        .highlight {
            color: #007BFF;
            font-weight: bold;
        }

        /* PC用スタイル */
        @media (min-width: 768px) {
            .screenshot {
                content: url("../images/areasample.jpg");
            }
        }

        /* スマホ用スタイル */
        @media (max-width: 767px) {
            .screenshot {
                content: url("../images/areasample_sp.jpg");
            }
        }