/* プロフィールページ
---------------------------------------------------------------------------*/
/*ボックス全体*/
dl.line2 {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
	margin: 0 2rem 2rem;	/*上下、左右へのボックスの外に空けるスペース*/
}

/*見出し(dt)とコメント(dd)*/
dl.line2 dt, dl.line2 dd {
	padding: 0.5rem;
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
    font-size: 1.1rem; /**/
}

/*見出し(dt)*/
dl.line2 dt {
	width: calc(100% - 15em);
}

/*コメント(dd)*/
dl.line2 dd {
	width: 15em;
/*	text-align: right; */
}


	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {


	/*見出し(dt)*/
	dl.line2 dt {
		width: calc(50% - 15em - 10px);	/*大きな端末向けの再設定。２列にしたいので、100%でなく半分の50%から引いています。*/
	}
	
	/*コメント(dd)*/
	dl.line2 dd {
		margin-right: 10px;				/*２列になった際の間のスペース*/
	}

	dl.line2 {border-top: none;}

	dl.line2 dt:nth-of-type(1), dl.line2 dd:nth-of-type(1),
	dl.line2 dt:nth-of-type(2), dl.line2 dd:nth-of-type(2) {
		border-top: 1px solid #ccc;
	}

	}/*追加指定ここまで*/


.dtPostDay {
	text-align: right;
	color: ##005438; /* 深緑 */
	font-weight: bold;
}

.toBirthday {
	font-weight: bold;
	font-size: 1.2em;
}

/*テーブル(ta2)
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2 caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta2 th, .ta2 td」のpaddingと揃えておけばOKです。*/
	background: #777;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 2rem;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta2テーブルブロック設定*/
.ta2 {
/*	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 2rem;		/*最後の「2rem」がテーブルの下に空けるスペースです*/
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*tr（１行分）タグ設定*/
.ta2 tr {
/*	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta2 th, .ta2 td {
	padding: 2px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta2 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid #ccc;	/*テーブルの線。幅、線種、色*/
}

/*th（左側）のみの設定*/
.ta2 th {
	width: 35%;				/*幅*/
	background: #e3def1;	/* 薄紫 */
}

.ellipsis {
    width: 100px; /* 省略せずに表示するサイズを指定 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*テーブル１行目に入った見出し部分（※caption）*/
		.ta2 caption {
			padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
		}

		/*th（左側）、td（右側）の共通設定*/
		.ta2 th, .ta2 td {
			padding: 2px 5px;		/*上下、左右へのボックス内の余白*/
			border: 1px solid #e3def1; /* 薄紫 */	/*テーブルの線。幅、線種、色*/
		}

		/*th（左側）のみの設定*/
		.ta2 th {
			width: 20%;		/*幅*/
		}

	}/*追加指定ここまで*/

/*---------------------------------------------------------------------------------------------------------*/
/*テーブル(ta3)
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta3 caption {
	font-weight: bold;	/* 太字に */
	padding: 10px 5px;		/* 上下、左右へのボックス内の余白。基本的に数行下の「.ta3 th, .ta3 td」のpaddingと揃えておけばOKです。*/
	background: #777;		/* 背景色 */
	color: #fff;			/* 文字色 */
	margin-bottom: 2rem;	/* 下に空けるスペース */
	border-radius: 5px;		/* 角を丸くする指定 */
}

/*ta3テーブルブロック設定*/
.ta3 {
/*	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 98%;
	margin: 0 auto 2rem;		/*最後の「2rem」がテーブルの下に空けるスペースです*/
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*tr（１行分）タグ設定*/
.ta3 tr {
/*	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta3 th, .ta3 td {
	padding: 2px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta3 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid #ccc;	/*テーブルの線。幅、線種、色*/
}

/*th（左側）のみの設定*/
.ta3 th {
	width: 30%;				/* 幅 */
	background: #e3def1;	/* 薄紫 */
}
.ellipsis {
    width: 100px; /* 省略せずに表示するサイズを指定 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*テーブル１行目に入った見出し部分（※caption）*/
		.ta3 caption {
			padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
		}

		/*th（左側）、td（右側）の共通設定*/
		.ta3 th, .ta3 td {
			padding: 2px 5px;		/*上下、左右へのボックス内の余白*/
			border: 1px solid #e3def1; /* 薄紫 */	/*テーブルの線。幅、線種、色*/
		}

		/*th（左側）のみの設定*/
		.ta3 th {
			width: 20%;		/*幅*/
		}

	}/*追加指定ここまで*/
/*---------------------------------------------------------------------------------------------------------*/


.monKazari {
	font-weight: bold;
	color: #000;
	background-color: #e3def1; /* 薄紫 */
}
.tanMD {
	text-align: right;
	width: 25%;
}

.happyBirthday {
	font-weight: bold;
	font-size: 1.5em;
/*	color: #005438; /* 深緑 */
	color: #ff1493; /* DeepPink */
}

.box1-5 {
	padding:0.5em;/*内側余白*/
	background-color:#e3def1; /* 薄紫 */
	font-size: 1.0em;
    display: flex;
    justify-content: space-evenly;
/*    height: 50px; */
/*    justify-content: center; */
    align-items: center;
    overflow-x: scroll;
    white-space: nowrap;
}

/* indexページ もっと見る */
.mottomiru {
	font-size: 1.1em;
	font-weight: bold;
}

/* 部屋一覧 */
  .grid-container {
    display: grid;
    gap: 10px; /* 各要素間の間隔 */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  /* 各グリッドアイテムのスタイル */
  .grid-item {
/*
1)#E5DFF1 上品な淡い紫
2)#F5F5F5 シンプルな淡いグレー
3)#FFF4E1 柔らかいベージュ
4)#DCE7F3 爽やかなブルーグレー
*/
    background-color: #E5DFF1;
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 1.1em;
  }

  /* PCでは最大5列 ->6 */
  @media (min-width: 1024px) {
    .grid-container {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  /* タブレットでは自動的に列数が調整される */
  @media (min-width: 768px) and (max-width: 1023px) {
    .grid-container {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
  }

  /* スマホでは最大2列 */
  @media (max-width: 767px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }


/*-------------------------------------------------------
/* 本日の決まり手一覧 */
  .grid-kimarite {
    display: grid;
    gap: 10px; /* 各要素間の間隔 */
/*    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));*/
    grid-template-columns: repeat(3, 1fr);
  }

  /* 各グリッドアイテムのスタイル */
  .grid-item2 {
    background-color: #EEE;
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 1.1em;
  }
-------------------------------------------------------*/

/* テーブル全体のスタイリング */
/*-----------------------------------------------------*/
.ta3 {
  width: 100%;
  border-collapse: collapse;
  overflow-x: scroll;
/*  overflow-x: auto; /* テーブルを横スクロール可能にする */
}

/* テーブル見栄えのための基本スタイル */
.ta3 th,
.ta3 td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

/* ヘッダーを目立たせるためのスタイル */
.ta3 th {
  background-color: #f4f4f4;
  font-weight: bold;
}

/* PC用のスタイリング */
@media (min-width: 1024px) {
  .ta3 th,
  .ta3 td {
    padding: 15px;
  }
  .ta3 th {
    font-size: 1.1rem;
  }
}

/* スマホ・タブレット用のレスポンシブスタイル */
@media (max-width: 1023px) {
  .ta3 {
    display: block;
    overflow-x: scroll;
/*  overflow-x: auto; /* テーブルを横スクロール可能にする */
    -webkit-overflow-scrolling: touch;
    white-space: nowrap; /* 各セルを改行させない */
  }
  .ta3 th,
  .ta3 td {
    padding: 8px;
    font-size: 1.1rem;
  }
}
/* テーブル全体のスタイリング 部屋別力士のソートあり */
/*-----------------------------------------------------*/
.ta4 {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto; /* テーブルを横スクロール可能にする */
}

/* テーブル見栄えのための基本スタイル */
.ta4 th,
.ta4 td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

/* ヘッダーを目立たせるためのスタイル */
.ta4 th {
  background-color: #f4f4f4;
  font-weight: bold;
  cursor: pointer; /* ソート可能な列を示す */
  position: relative;
}
/* ソート可能なthにだけ適用するスタイル */
.ta4 th.sortable {
  cursor: pointer;
}

/* ソート中の方向を示すアイコン */
.ta4 th.sortable:after {
  content: "▾"; /* 初期状態のアイコン */
  position: absolute;
  right: 8px;
  font-size: 0.8em;
}

.ta4 th.sortable.asc:after {
  content: "▲"; /* 昇順 */
}

.ta4 th.sortable.desc:after {
  content: "▼"; /* 降順 */
}

/* PC用のスタイリング */
@media (min-width: 1024px) {
  .ta4 th,
  .ta4 td {
    padding: 15px;
  }
  .ta4 th {
    font-size: 1.1rem;
  }
}

/* スマホ・タブレット用のレスポンシブスタイル */
@media (max-width: 1023px) {
  .ta4 {
    display: block;
    overflow-x: auto; /* スマホ・タブレットで横スクロールが可能に */
    white-space: nowrap; /* 各セルを改行させない */
  }
  .ta4 th,
  .ta4 td {
    padding: 8px;
    font-size: 1.1rem;
  }
}

/* 記事投稿 */
/*---------------------------------*/
.postBlog {
	width: 100%;
	font-size: 1.1rem;
	line-height: 1.4em;
	margin: 0 auto;
}

/* indexで縦スクロールが効かない問題の対応 */
/*---------------------------------------------------*/
.ebi ul {
	list-style-type: none; /* デフォルトの箇条書きマークを消す */
	padding: 0;
}
.ebi li {
	margin-bottom: 5px; /* 各liの間にスペースを設ける */
}
.ebi .topPage dl {
	display: grid;
/*	grid-template-columns: 150px 1fr 1fr 1fr 1fr; /* 各カラムの幅を指定 */
	grid-template-columns: 90px 1fr; /* 各カラムの幅を指定 */
	gap: 10px; /* 各要素の間隔を設定 */
	align-items: center; /* 各行の垂直位置を中央に揃える */
}
.ebi dt {
/*	font-weight: bold; */
	grid-column: 1; /* 最初のカラムに配置 */
}
.ebi dd {
	grid-column: span 1; /* 各ddを次のカラムに配置 */
	margin: 0; /* デフォルトの余白を消す */
	border-bottom: 1px solid #ccc;
}
.ebi span.icon-bg1 {
	background: #006acd;	/* ニッカン 青系 */
	color: #fff;
}
.ebi span.icon-bg2 {
	background: #cd0000;	/* サンスポ 赤系 */
	color: #fff;
}
.ebi span.icon-bg3 {
	background: #000000;	/* デイリー 黄系 */
	color: #fff100;			/* デイリー 文字 */
}
.ebi span.icon-bg4 {
	background: #00cd33;	/* スポニチ 緑系 */
	color: #555555;			/* スポニチ 文字 */
}
.ebi span.icon-bg5 {
	background: #ffb6c1;	/* カテゴリ  */
	color: #555555;			/* カテゴリ 文字 */
}
.ebi span.icon-bg6 {
	background: #FFF100;	/* 報知 黄色系 */
	color: #009844;			/* 報知 文字 */
}
.ebi span.icon-bg10 {
	color: #ffffff;			/* 文字 */
	background: #0000ff;	/* blue */
}
.ebi span.icon-bg11 {
	color: #ffffff;			/* 文字 */
	background: #0000cd;	/* midiumblue */
}
.ebi span.icon-bg12 {
	color: #ffffff;			/* 文字 */
	background: #00008b;	/* darkblue */
}
.ebi span.icon-bg13 {
	color: #ffffff;			/* 文字 */
	background: #008080;	/* teal(緑系) */
}
/*---------- 以下chatGPTより追加 ----------*/
.ebi span.icon-bg14 {
    color: #000000;
    background: #FFD700; /* ゴールド系の明るい黄色 */
}
.ebi span.icon-bg15 {
    color: #000000;
    background: #98FB98; /* パステル系の明るい緑 */
}
.ebi span.icon-bg16 {
    color: #ffffff;
    background: #4682B4; /* スモーキーな青 */
}
.ebi span.icon-bg17 {
    color: #000000;
    background: #F0E68C; /* カーキがかったパステル黄色 */
}
.ebi span.icon-bg18 {
    color: #ffffff;
    background: #9370DB; /* パステル系のラベンダー色 */
}
.ebi span.icon-bg19 {
    color: #ffffff;
    background: #FF7F50; /* コーラルオレンジ */
}
.ebi span.icon-bg20 {
    color: #000000;
    background: #AFEEEE; /* 淡いターコイズブルー */
}
.ebi span.icon-bg21 {
    color: #000000;
    background: #FFF5EE; /* 優しいクリーム色 */
}
.ebi span.icon-bg22 {
    color: #000000;
    background: #DDA0DD; /* 淡いプラム色 */
}
.ebi span.icon-bg23 {
    color: #ffffff;
    background: #FF69B4; /* 鮮やかなピンク */
}


/* 部屋詳細で縦スクロールが効かない問題の対応 */
/*--------------------------------------------*/
.rikishi-list {
  list-style: none; /* リストマーカーを非表示にする */
  padding: 0;
  margin: 0;
}

.rikishi-list li {
  display: grid;
/*  grid-template-columns: 0.8fr 0.8fr 0.4fr 0.4fr 0.8fr; /* 各列の幅を調整 */
  grid-template-columns: 0.8fr 0.8fr 0.8fr 0.8fr; /* 各列の幅を調整 */
  gap: 10px; /* 各列間のスペース */
  padding: 10px 0;
  border-bottom: 1px solid #ddd; /* 各行の下に区切り線 */
}

.rikishi-list li span {
  display: inline-block;
}

.rikishi-list li:nth-child(odd) {
  background-color: #e3def1; /* 奇数行：薄紫 */
}

.rikishi-list li:nth-child(even) {
  background-color: #ffffff; /* 偶数行：白 */
}

.rikishi-list li:hover {
  background-color: #eef; /* ホバー時にうっすら青く */
}

.arrow-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  flex-shrink: 0;
}

/* スマホ（狭い画面）の場合：縦並び + 横スクロールなし */
@media (max-width: 768px) {
  .rikishi-list {
    padding: 0;
    margin: 0;
  }

  .rikishi-list li {
    display: block;               /* blockで縦に */
    padding: 10px 5px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
  }

  .rikishi-list li span {
    display: block;               /* 縦に並べる */
    font-size: 20px;
    margin-bottom: 3px;       /* 少しだけスペース残す */
    line-height: 1.2;         /* 行間を詰める（1.2〜1.3くらいが自然） */
  }
  .rikishi-list li span:first-child {
    font-weight: bold;
    font-size: 24px;
  }
}

/* blogの決まり手テーブル用 */
/*--------------------------------------------*/
.ta20241110 {
	width: 90%;
	border-collapse: collapse;
}
th {
	background-color: #eee;
	border: 1px solid #000;
}
td {
	border: 1px solid #000;
}
.ta20241110 td {
text-align:center;
}

/* テーブル用その２ */
/*--------------------------------------------*/
.ta20241116 {
	width: 100%;
	border-collapse: collapse;
}
th {
	background-color: #eee;
	border: 1px solid #000;
}
td {
	border: 1px solid #000;
}
.ta20241116 td {
text-align:center;
}

/* セレクトBOX */
/*--------------------------------------------*/
.selectbox-2 {
    position: relative;
}

.selectbox-2::before,
.selectbox-2::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

.selectbox-2::before {
    right: 0;
    display: inline-block;
    width: 2.8em;
    height: 2.8em;
    border-radius: 0 25px 25px 0;
    background-color: #745399;
    content: '';
}

.selectbox-2::after {
    position: absolute;
    top: 50%;
    right: 1.4em;
    transform: translate(50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
}

.selectbox-2 select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 230px;
    height: 2.8em;
    padding: .4em 3.6em .4em .8em;
    border: 2px solid #745399;
    border-radius: 25px;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}

.selectbox-2 select:focus {
    outline: 1px solid #745399;
}


/* ページネーション */
/*--------------------------------------------*/
.pagination {
	text-align: center;
	margin-top: 20px;
}
.pagination a {
	display: inline-block;
	padding: 5px 10px;
	margin: 0 3px;
	background: #e3def1; /* 薄紫 */
	color: #333;
	text-decoration: none;
	border-radius: 4px;
}
.pagination a.active {
	background: #745399; /* 江戸紫 */
	color: #ddd;
}

/* ボタン */
/*--------------------------------------------*/
.button-08 a {
  font-family: 'Noto Sans JP', serif;
  font-size: 1.1em;;
  letter-spacing: 0.1em;
  color: #000;
  background: #e3def1; /* 薄紫 */
  font-weight: 700;
  border: solid 3px #745399;
  border-radius: 999px;
  display: block;
  box-sizing: border-box;
  max-width: 300px;
  text-align: center; 
  padding: 16px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.button-08 a:hover {
  color: #333;
  background: initial;
  transition: all 0.3s;
}

.blogDate {
	color: #00552e;
	font-weight: bold;
	font-size: 1.1rem;
	text-align: right;
}


/* 広告用 */
.af8-01 {
	background-color: #16c2af;
	border-radius: 20px;
	font-size: 1.2em;
}