@charset "utf-8";

/* よく流れるリスト詳細枠 */

#main {
	    width: 92%;
}

/* HOA リスト */

/* 基本 */

	h2 {
		height: 25px;
		display: flex;
		align-items: center;
		border: 1px solid #fff;
    	border-radius: 5px;
    	margin: 1px;
    	padding: 5px;
    	font-size: 1em;
    	color: #fff;
    	text-shadow: 1px 1px 0 #939393, 1px 1px 1px #000;
	}
	h3 {
    	margin: 1px;
		font-size : 80%;
		font-weight: normal;
		color: #fff;
	}

	h3::before {
	  content: "■ ";
	}

	/* コンテンツエリアの制御 */
    .tab-content {
      display: none; /* デフォルトで非表示 */
/*      padding: 0 15px;
      border: 1px solid #e0e0e0;*/

      border-radius: 4px;
	  padding: 0px;
      border: 3px solid #f93;
      border-radius: 7px;
      background-color: #f93;
    }

/* タブナビゲーション全体のコンテナ */
.tab-nav {
  display: flex;
  flex-wrap: wrap; /* 画面幅が狭い時に折り返す場合（横スクロールにしたい場合は nowrap に変更してください） */
  gap: 4px; /* タブ同士の間隔 */
/*  border-bottom: 3px solid #ffbc7a;*/ /* タブの下線（選択中カラーと合わせる） */
  padding-left: 8px; /* 左側の余白 */
}

/* 通常のタブ（button要素のブラウザデフォルトスタイルをリセット＆タブ化） */
.tab-btn {
  background-color: #ffbc7a; /* 通常時の背景色 */
  color: #fff; /* 文字色（白で見づらい場合は #333 等に変更してください） */
  border: none;
  border-radius: 6px 6px 0 0; /* 上の角だけ丸みをつける */
  padding: 2px 8px;/*padding: 8px 16px;*/
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  outline: none;
  height: 20px;
  margin-bottom: 0;
  margin-top: 4px;
}

/* ホバー時の挙動 */
.tab-btn:hover {
  /*opacity: 0.9;*/
  background-color: #f93;
}

/* 選択中のタブ（JavaScriptで .is-active や .active を付与する想定） */
.tab-btn.is-active,
.tab-btn.active,
.tab-btn[aria-selected="true"] {
  background-color: #f93; /* 選択中の背景色 */
  color: #fff; /* 選択中の文字色（明るい色なので暗めの文字色が見やすいです） */
  /* 選択中タブを少し強調したい場合（必要に応じて調整してください） */
  font-size: 14px;
  font-weight: bold;
  height: 24px;
  margin-top: 0px;
}

    /* アクティブなパネルのみ表示 */
    .tab-content.active {
      display: block;
    }

    /* 曲リスト */
	.oa_heavy, .oa_mid, .oa_lite, .oa_sl {
		padding: 2px 0;
		 border-radius: 4px;
	}

	.oa_heavy > span, .oa_mid > span {
      display: block;
	  border-radius: 3px;
/*	  background-color: #fea; */
	  padding: 5px 10px;
	  margin-bottom: 1px;

	}	


	.oa_heavy > span:nth-of-type(odd), .oa_mid > span:nth-of-type(odd) {
	background-color: #fe6;
	}	

	.oa_heavy > span:nth-of-type(even), .oa_mid > span:nth-of-type(even) {
	background-color: #fea;
	}

	.oa_heavy span a, .oa_mid span a{
		color: #000;
		text-decoration: none;
	}

	.oa_heavy span .liti, .oa_mid span .liti{
	  display:inline;
	  font-weight: bold;
	  font-size: 120%;
	  text-shadow: 1px 1px 0 #939393, 1px 1px 1px #fff;
	}

	.oa_heavy , .oa_mid {
	  margin: 2px 0;
	}	

	.oa_heavy {
      background-color: #f00;
	}

	.oa_heavy span.rpdate{
		display:inline;
		font-size:12px;
	}	

	.oa_mid {
      background-color: #090;
	}	

	.oa_lite span {
	  font-size:12px;
    }	

	.oa_lite span, .oa_sl span {
	  margin-right:5px
	}	
	.oa_lite span::before, .oa_sl span::before {
	  content: "・";
	}	

	.oa_lite span, .oa_sl span {
	  margin-right:5px;
	  display:inline;
	}	

	.oa_lite div, .oa_sl div {
	  border: 2px solid #fff;
      border-radius: 5px;
      background-color: #fea;
	  padding: 3px 10px;
	}	

	.oa_sl{
      /*display: none;*/
	}

	.oa_sl span{
      /*display: none;*/
	  font-size:10px;
	}	
	.hoa-comment {
		display: block;	  
		margin: 10px 20px;
		border: 1px solid #f93;
      	border-radius: 5px;
      	background-color: #fff;
		font-size: 10px;
		padding: 10px 20px;
	}

	.hoa-com-tit {
		display: block;	  
	  font-weight: bold;
	}

	.c_fire::after {
	  content: "FIREの可能性あり";
	  background-color: #f69;
	  color: #fff;
	  font-size: 10px;
    margin-left: 5px;
    border-radius: 8px;
    padding: 4px;
	}	

	.c_firem::after {
	  content: "F";
	  background-color: #f69;
	  color: #fff;
	  font-size: 8px;
    margin-left: 2px;
    border-radius: 8px;
    padding: 1px 4px;
	}	

@media screen and (min-width: 600px) and (max-width: 899px) {
	.yearend {
		display:none;
	}
}

@media screen and (min-width: 1px) and (max-width: 599px) {
	.yearend {
		display:none;
	}
	.tab-nav {
		margin-bottom: 5px;
	}
	/* 横短い用出力 */
	.tab-nav::before {
		content: "(年代)";
	  font-size: 0.7em;
	  color: #666;
	  padding-top: 8px;

	}

	.tab-btn {
		display:block;
		float: right;

		border-color: #E1E0DC #C9C8C1 #B2AFA5;
		border-image: none;
		border-radius: 1em;
		border-style: solid;
		border-width: 1px;
		box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0), 0 0 0 1px rgba(255, 255, 255, 0) inset, 0 1px 0 0 #FFFFFF;

		color: #6B635B;
		text-align:center;

	}

}