@charset "UTF-8";

.h3{
	line-height: 150%;
}
table.aaa {
	width: 100%;
  margin-top:0px;
  margin-bottom:10px;
  border-collapse: collapse; /* */
  border: solid 1px white; /*  */
  text-align: center; 
  color: #212121; /*  */
  overflow:hidden;}


  
table.aaa tr td:nth-child(3) { /* 画像 */
  grid-column: 1; /* 1列目に配置 */
  grid-row: 1 / span 2; /* 1行目から2行分を占有（他の要素が複数行になる可能性を考慮） */
  display: block; /* ブロック要素として表示 */
  max-width: 100%; /* 画像の幅を親要素に合わせる */
  height: auto; /* 高さを自動調整 */
  margin-bottom: 0; /* 個別のマージンをリセット */
}

table.aaa th{
  border:solid 1px white;
  font-size:0.9em;
  text-align:center;
  padding:5px 8px;
}
table.aaa tr td:last-child {
  margin-bottom: 0;
}
table.aaa td { /*
  border-right:1px solid gray;
  border-left:1px solid gray;*/
  padding: 5px; /*   */
  }
/* 1?s?U */
table.aaa tr td:nth-of-type(1){
  width:80px;
  text-align:center; /* ?f????? */
  color: #212121; 
  font-weight:bold; /* ?e??? */
  font-size:small;
  white-space:nowrap; 
  font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  -webkit-text-size-adjust:100%;}

/* 2?s?U */
table.aaa tr td:nth-of-type(2){
  font-size:small;
  font-weight:bold;
  text-align:center; /* ?f????? */
  color: #212121;}
table.aaa tr td:nth-of-type(3){
  display: ;}
table.aaa tr th:nth-of-type(3){
  display: ;}
table.aaa img{
	width: 140px;
}
/* 4?s?U */
table.aaa tr td:nth-of-type(4){
  width:auto;
  text-align:left; /*  */
  font-size:small;
  font-weight:bold;
}

/* 5?s?U */
table.aaa tr td:nth-of-type(5){
  white-space: nowrap;
	padding:3px 10px;
	
  text-align: right;
  color: #212121;
  font-weight: bold; /* */ 
  font-size:0.8em;}

table.aaa tr:nth-child(2n+1){
   background:#dbe8f5;}

table.aaa a{ color:black;
    font-weight:bold;
    text-decoration:underline
dotted;
text-underline-offset:0.3em;}

table.aaa a:hover{
  color:red;
  text-decoration:underline;
  font-weight:bold;}

table.aaa h3{
	line-height: 170%;
	margin-bottom: 5px;
}
table.aaa h4{
	line-height: 1.2em;
}
.setsumei{
  color:darkblue;
  font-size:0.85em;
line-height: 150%;
}

.setsu{
	color:red;
	font-size: 0.85em;
	line-height: 150%;
}
/*????f???I??????d?I?T*/
.kakomu{
	padding:3px 10px; /* ?g?A??????I?o?O */
	margin:0 10px 10px 0; /* ?g?I?O?I?o?O */
	background-color:#d3d3d3; /* ?g?I?hw?i?F */
	border:0px solid #777; /* ?g?I?u?I?e??3?E?i?T?E?F */
	border-radius:3px; /* ?g?I?p?d?U?-??E?e */
	font-family:inherit; /* ?t?H??g?g?I?i?T?d?p?3??E?e */
	font-size:0.9em;	/* ?t?H??g?g?I?ea????3 */
	display: inline-block;

}

.kakomu a{
	text-decoration: none;
}
.kakutei{
  padding:3px 10px; /* ?g?A??????I?o?O */
	margin:0px; /* ?g?I?O?I?o?O */
	background-color:#f15b55; /* ?g?I?hw?i?F */
	border:0px solid #777; /* ?g?I?u?I?e??3?E?i?T?E?F */
	border-radius:2px; /* ?g?I?p?d?U?-??E?e */
	font-family:inherit; 
	font-size:0.9em;	/* ?t?H??g?g?I?ea????3 */
  color:white;
  white-space:nowrap;
	display: inline-block;
}


.mikomi{
  padding:3px 10px; /* ?g?A??????I?o?O */
	margin:0px; /* ?g?I?O?I?o?O */
	background-color:#28598f; /* ?g?I?hw?i?F */
	border:0px solid #777; /* ?g?I?u?I?e??3?E?i?T?E?F */
	border-radius:2px; /* ?g?I?p?d?U?-??E?e */
	font-family:inherit; /* ?t?H??g?g?I?i?T?d?p?3??E?e */
	font-size:0.9em;	/* ?t?H??g?g?I?ea????3 */
  color:white;
  white-space:nowrap;
	display: inline-block;
}

.toi{
  padding:3px 10px; /* ?g?A??????I?o?O */
	margin:0px; /* ?g?I?O?I?o?O */
	background-color:#999900; /* ?g?I?hw?i?F */
	border:0px solid #777; /* ?g?I?u?I?e??3?E?i?T?E?F */
	border-radius:2px; /* ?g?I?p?d?U?-??E?e */
	font-family:inherit; /* ?t?H??g?g?I?i?T?d?p?3??E?e */
	font-size:0.9em;	/* ?t?H??g?g?I?ea????3 */
  color:white;
  font-weight:bold;
  white-space:nowrap;
	display: inline-block;
}

.boshu{
  padding:1px 2px; /* ?g?A??????I?o?O */
	margin:0 3px; /* ?g?I?O?I?o?O */
	background-color:grey; /* ?g?I?hw?i?F */
	border:0px solid #777; /* ?g?I?u?I?e??3?E?i?T?E?F */
	border-radius:2px; /* ?g?I?p?d?U?-??E?e */
	font-family:inherit; /* ?t?H??g?g?I?i?T?d?p?3??E?e */
	font-size:0.9em;	/* ?t?H??g?g?I?ea????3 */
  color:white;
  font-weight:bold;
  white-space:nowrap;
}

.nenyu{
  padding:2px 8px; /* ?g?A??????I?o?O */
	margin:2px 5px; /* ?g?I?O?I?o?O */
	background-color:#a3006b; /* ?g?I?hw?i?F */
	border:0px solid #777; /* ?g?I?u?I?e??3?E?i?T?E?F */
	border-radius:4px; /* ?g?I?p?d?U?-??E?e */
	font-family:inherit; /* ?t?H??g?g?I?i?T?d?p?3??E?e */
	font-size:0.9em;	/* ?t?H??g?g?I?ea????3 */
	color:white;
	display: ;
  
  font-weight:normal;
}





/****************************************
******* ?X?}?[?g?t?H??gview?I?Y?fe ***********/

 
 /** ???X?|??g?V?u?eI??? -------- */
@media screen and (max-width:600px){
	table.aaa tr {
    display: grid; /* trをグリッドコンテナとして扱う */
    grid-template-columns: 1fr 3fr; /* 左側（画像）1fr、右側（その他全て）3fr */
    /* グリッドエリアを定義し、各tdの配置を明確にする */
    grid-template-areas: "image_area content_area"; /* 1行で定義 */
    gap: 0px 5px ; /* 列間のスペース */
    align-items: start; /* グリッドアイテムの垂直方向の位置を上揃え */
    padding: 10px;
  }
 table.aaa tr td {
    border: none; /* グリッドレイアウトになったらセルのボーダーを削除 */
    padding: 0; /* セルのパディングもリセット（グリッドのgapで調整） */
    display: block; /* tdをブロック要素として扱い、flexboxの調整を可能に */
  }
  /* 3番目の<td>（画像）を左側の画像エリアに配置 */
  table.aaa tr td:nth-child(3) { /* 画像 */
    grid-column: 1; /* 1列目に配置 */
    grid-row: 1 / span 2; /* 1行目から2行分を占有（他の要素が複数行になる可能性を考慮） */
    /* display: block; は既に上で設定済み */
    margin-bottom: 0; /* 個別のマージンをリセット */
  }
  /* 残りの全ての<td>を右側のコンテンツエリアにまとめて配置 */
  table.aaa tr td:nth-child(1), /* 9月10日 */
  table.aaa tr td:nth-child(2), /* 催行確定 */
  table.aaa tr td:nth-child(4), /* 詳細説明 */
  table.aaa tr td:nth-child(5) { /* 598,000円 */
     grid-column: 2; /* 2列目に配置 */
    display: flex; /* これらの要素をFlexboxコンテナとして扱う */
    flex-direction: column; /* 縦並びにする */
    gap: 5px; /* 要素間のスペース */
    margin-bottom: 0; /* 個別のマージンをリセット */
  }
  /* td(1)とtd(2)を横並びにするためのFlexboxグループ */
  /* ここでtd(1)とtd(2)が格納される仮のコンテナを作成 */
  /* HTMLを変更しないため、td(1)とtd(2)の親要素として振る舞う部分を擬似的に定義 */
  table.aaa tr td:nth-child(1) { /* 日付 */
    display: flex; /* td(1)自体をFlexboxコンテナにする */
    flex-direction: row; /* 横並び */
    align-items: center; /* 垂直方向中央揃え */
    gap: 10px; /* 日付と催行確定の間のスペース */
    order: 1; /* 右側コンテンツエリアでの表示順序 */
  }

  table.aaa tr td:nth-child(2) { /* 催行確定 */
    /* td(1)のFlexboxの子要素として横並びに配置されるので、特別なdisplay設定は不要 */
    order: 2; /* 日付の次に表示 */
  }
  /* td(4)とtd(5)の表示順序を調整 */
  table.aaa tr td:nth-child(4) { /* 詳細説明 */
    order: 3;
  }
  table.aaa tr td:nth-child(5) { /* 価格 */
    order: 4;
  }
	
	
.table.aaa td a{
	text-decoration: none;
}


.kakomu{
	padding:3px 10px; /* ?g?A??????I?o?O */
	margin:0 5px 5px 0; /* ?g?I?O?I?o?O */