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


/*表全体*/


.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%;
    max-height: 300px; /* ← 高さ制限を追加 */
    overflow-x: auto;  /* 横スクロール */
    overflow-y: scroll; /* 縦スクロールも許可 */
    -webkit-overflow-scrolling: touch; /* iOSスムーズスクロール */
    border: solid 4px #cccccc;
    border-radius: 5px;
  }

  .box1 table {
    min-width: 800px; /* 横に広げて右にスクロール可能に */
  }

  /* スマホでも通常の表形式を維持 */
  .box1 thead {
    display: table-header-group;
  }

  .box1 tr {
    display: table-row;
  }

  .box1 td {
    display: table-cell;
    text-align: center;
    white-space: nowrap;
  }

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

  .box1 td:before {
    content: none; /* data-labelによる擬似ラベルをオフ */
  }
}

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

    .step-highlight {
      display: inline-block;
      background-color: #309230; /* グリーン　ここは雛形に色を合わせる*/
      color: #fff;
      font-size: 0.9em;
      font-weight: bold;
      padding: 5px 10px;
      border-radius: 20px;
      margin: 5px 5px;
    }
    #content article h3 {
    padding: 0.5em 1em;
    color: #4a4a4a; 
    background: #C8F5A0;/* グリーン　ここは雛形に色を合わせる*/
    border-left: solid 5px #309230; /* 左端のボーダーカラーグリーン */
    }

    #content article h4 {
    padding: 0.5em 1em;
    color: #4a4a4a; 
    background: #C8F5A0;/* グリーン　ここは雛形に色を合わせる*/
    font-size: 120%;
    font-weight: bold;    }

    #content article h5 {
    padding: 0.5em 1em;
    color: #4a4a4a; 
    font-size: 120%;
    font-weight: bold;    }

    article h2 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-size: 1.5em;
    color: #4a4a4a; 
    background: #fdecec;
    border-bottom: 2px solid #cccccc; /* グレーのアンダーラインを追加 */
        }
	        .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");
            }
        }


.freespace{
	max-width: 1024px;
	margin: 0 auto;
	padding: 1rem 0;	
}