/*========= サイト用のオリジナルCSS ===============*/

/*youtube 上のロゴ */
.on-youtubbg-logo{
  position:absolute;
  z-index: 2;/*下から2番目に表示*/
/*天地中央配置*/
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
/*色指定*/
  color:#fff;
  text-shadow: 0 0 15px #666;
  width: auto;
  height: auto;
  max-width: 800px; /* 画像の幅を制限 */
  max-height: 90vh; /* 画像の高さを制限 */
  object-fit: contain; /* アスペクト比を保持 */
}

/*下のコンテンツ*/

#container{
    position: relative;/*relativeを指定してfixed指定をした#youtube-areaの上に表示*/
    z-index: 3;/*一番上に表示*/
    /*見た目の調整*/
    background: #333;
    color: #fff;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0px;
    text-align: center;
}


.sec01{
	background-image: url("../siteimg/bgtable.webp");
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size: cover;
}

.sec03{
	background-image: url("../siteimg/bgtable.webp");
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size: cover;
}

.bginfo{
	background-image: url("../siteimg/bglive.webp");
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size: cover;
}

.marchtable{
	margin: 10px auto; /* テーブルをセンターに配置 */
    border-collapse: collapse; /* セルの間にスペースを持たせる */
    width: 95%; /* 幅を60%に設定（サイズを小さく） */
    background-color: rgba(0,0,0,0.80); /* 背景色を半透明に設定 */
    backdrop-filter: blur(10px); /* 背景をぼかしてモダンな効果を追加 */
    border-radius: 10px; /* 角を丸くする */
    overflow: hidden; /* 角丸を適用するための設定 */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* 影を追加して浮いているように見せる */
}


/* テーブルのスタイル修正 */
.performance-table {
    margin: 0 auto; /* テーブルをセンターに配置 */
    border-collapse: collapse; /* セルの間にスペースを持たせる */
    width: 80%; /* 幅を100%に設定 */
	max-width: 100%;
    background-color: rgba(0,0,0,0.80); /* 背景色を半透明に設定 */
    backdrop-filter: blur(10px); /* 背景をぼかしてモダンな効果を追加 */
    border-radius: 10px; /* 角を丸くする */
    overflow: hidden; /* 角丸を適用するための設定 */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* 影を追加して浮いているように見せる */
}

.performance-table th, .performance-table td {
    padding: 15px; /* セル内の余白を設定 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* セルの下に半透明の境界線を追加 */
}

.performance-table th {
    background-color: rgba(0, 0, 0, 0.3); /* ヘッダーセルの背景色を半透明に設定 */
    font-weight: bold; /* ヘッダーセルのフォントを太字に */
    text-transform: uppercase; /* ヘッダーセルのテキストを大文字に */
    color: #fff; /* ヘッダーセルのテキスト色を白に */
}

.performance-table td {
    color: #fff; /* テーブルのセルのテキスト色を白に */
}

.performance-table td:first-child {
    text-align: right; /* 最初の列のセルのテキストを右揃え */
}

.performance-table td:last-child {
    text-align: left; /* 最後の列のセルのテキストを左揃え */
}