/* ベースリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#wrapper{
	margin: 0 auto !important;
	padding: 0 !important;
	max-width:unset;
}
.fusion-body #wrapper.wrapper_blank {
  display: block !important;
 }
 .fusion-tb-footer {
  border: 1px solid #000;
 }
 #main {
  max-width: 1200px !important;
  margin: 0 auto;
  width: 90% !important;
  display: flex;
}
body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: #fafafa;
}
.onebox{
  margin: 3rem 0 7rem 0;
  line-height: 1;
  padding: 0;
}
.join{
  margin: 30px 0 10px;
}
/* テーブル全体 */
.my-table {
  width: 100%;
  border-collapse: collapse; /* セル間の線をくっつけてスッキリ */
  margin-top: 1em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ヘッダー行 */
.my-table th {
  background-color: #005f99;
  color: white;
  font-weight: bold;
  padding: 10px 12px;
  text-align: left;
}

/* データセル */
.my-table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  color: #333;
  font-size: 14px;
}

/* 交互背景色（ゼブラ柄）*/
.my-table tbody tr:nth-child(odd) {
  background-color: #f7f7f7;
}

.my-table tbody tr:nth-child(even) {
  background-color: #ffffff;
}

/* ホバーでハイライト */
.my-table tbody tr:hover {
  background: #f0f8ff;
  transition: background 0.2s ease-in-out;
}

/* 重要セル（例えば合計など）*/
.my-table tfoot td {
  font-weight: bold;
  background: #e2e2e2;
}


@media screen and (max-width: 768px) {
 #main {
    padding: 0 !important;
}
}
@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block; /* 全てブロック要素にして縦に積む */
  }
  
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr {
    border: 1px solid #ccc;
    margin-bottom: 5px;
  }
  
  td {
    border: none;
    position: relative;
    padding-left: 50%; /* ラベル用のスペース */
  }
  
  /* data-label 属性を使って項目名を表示する */
  td:before {
    position: absolute;
    left: 6px;
    content: attr(data-label); /* HTMLで設定したラベルを取得 */
  }
}