@charset "UTF-8";

#header {
	height: 390px;
	border-top: 2px solid #80442B;
	width: 100%;
	background-image: url(../support/img/top02.jpg);
	background-position: center top;
}

#money {
	text-align: center;
}

tbody tr .item {
	width: 33%;
}

.s_title {
	width: 100%;
	margin-bottom: 20px;
	float: left;
}

.sp-scroll{display: none;}


@media screen and (max-width: 768px) {

	#header {
		height: 70vw;
	}

	.sp-scroll{display: block; color: red;}

	#money {
    /* 表全体をスクロール可能なブロック要素にする */
    display: block;
    width: 100%;
    overflow-x: auto; /* 横スクロールを有効化 */
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかに */

    /* セルの幅が潰れないように設定 */
    border-collapse: collapse;
    white-space: nowrap; /* テキストの折り返しを禁止して横幅を確保 */
  }

  /* 見やすさのための調整（任意） */
  #money th, #money td {
    padding: 10px; /* タップしやすいように少し広げる */
    font-size: 14px; /* 文字サイズ調整 */
  }

  /* 【推奨】左端の「コース名」だけ固定してスクロールさせる設定
     これがあるとスクロールしてもコース名が見えたままになります */
  #money td:first-child {
    position: sticky;
    left: 0;
    background-color: #F1F1F1; /* 背景色がないと文字が重なるため指定 */
    border-right: 1px solid #ccc;
    z-index: 1; /* 重なり順を上に */
  }

  /* ヘッダーの1列目も同様に固定 */
  #money tr:first-child td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #F1F1F1;
  }
}