body {
    background-color: #fff2d6 /* 全体背景 */
}

.wrapper { /* wrapperをclass属性としたためセレクタを変更 */
	font-family: sans-serif;
/*    position: relative; */
    display: -webkit-box; /* 未対応ブラウザ向け記述 */
    display: -ms-flexbox; /* 未対応ブラウザ向け記述 */
    display: flex;
    flex-flow: row wrap; /* 左→右かつ上→下の順に並べる */
    -ms-flex-wrap: wrap; /* 未対応ブラウザ向け記述 */
    justify-content: space-around; /* 均等に余白を設定 */
    -ms-flex-pack: justify; /* 未対応ブラウザ向け記述 */
    -webkit-box-pack: justify; /* 未対応ブラウザ向け記述 */
    align-items: flex-start; /* 左端から並べ始める */
    align-content: flex-start; /* 各要素の上端を揃える */
/*    margin: 0.5em auto; */
    width: 96%; /* ディスプレイ幅に対する相対指定 */
}

a:link {
	color: #3b3b3b; /* 本文のリンク文字色 */
	text-decoration: underline;
}
a:visited {
	color: #3b3b3b; /* 本文のリンク文字クリック後の色 */
	text-decoration: none;
}

a:hover {
	color: #7f3653; /* 本文のリンク文字にカーソルを当てたときの色 */
	text-decoration: none;
}

a:active {
	color: #7f3653; /* 本文のリンク文字をクリックしているときの色 */
	text-decoration: none;
}

#header {
/* 	color: #7f3653; 文字色 */
	font-size: 32pt;
	font-weight: bold;
	padding: 10px 0 0 10px;
    font-family: san-serif;
}

#header a { 
	color: #7f3653; /* 文字色 */
	text-decoration: none;
}

#navi {
/*    width: 800px;*/
    padding: 0;
    margin: 0;
    list-style-type: none;
	font-family: san-serif;
}

#navi li {
	width: 16%;
	float: left;
	padding: 0;
	margin: 0;
	text-align: center;
}

#navi li a {
    width: auto;
    color: #FFFFFF; /* ヘッダのバーのリンク文字色 */
    font-size: 15px;
    font-weight: bold;
     
    padding: 10px 0;
    text-decoration: none;
    display: block;
    background: #7f3653; /* ヘッダのバーの色 */
    }

#navi li a:hover {
	color: #333333; /* 文字色 */
    background: #f5cedd; /* ヘッダにカーソルを当てたときの色 */
}

#pagetitle {
	margin: 30px 50px 10px 50px;
	color: #7f3653; /* 文字色 */
	font-size: 18pt;
	font-weight: bold;
	align-self: stretch;
}

#contop {
	background: #ffdb8f; /* #ffd375; */ /* 本文の背景色 */
	margin: 50px 0 20px 20px;
	padding: 20px;
	color: #330000; /* 文字色 */
	border-radius: 10px; /* 角丸加工 */
	font-size: 14pt;
	overflow-wrap: break-word;
    flex-basis: 40%;
    float: left; 
	align-self: stretch;
}


#poster {
	margin: 50px 0 20px 20px;
	color: #6A4A3C; /* 文字色 */
	font-size: 14pt;
	float: right; 
    flex-basis: 30%;
	align-self: stretch;
}

img.poster{
	margin: 15px 0 30px 30px;
    max-width: 300px;
    height: auto;
/* 	border:2px solid #ffffff; ポスターサムネイルが背景と同化したときに使う */
}


#content {
	background: #ffdb8f; /* #ffd375; */ /* 本文の背景色 */
	margin: 10px 50px 20px 50px;
	padding: 20px;
	color: #000000; /* 文字色 */
	border-radius: 10px; /* 角丸加工 */
    flex-basis: 70%;
    float: left; 
	align-self: stretch;
}


#sponsor {
	margin: 10px 0 20px 20px;
	color: #6A4A3C; /* 文字色 */
    float: left;  
    flex-basis: 30%; 
	align-self: stretch;
}

#twitter {
	margin: 10px 0 20px 20px;
    float: right;
    flex-basis: 30%; 
	align-self: stretch;
}

p.f_red {
	color:#ff0000
}

p.bunkac {
	margin-left: 1%;
	margin-right: 5%;
}



/* ここから企業協賛バナーの設定 2020skmt */
.spnsor_banner {
	display: flex;
	flex-wrap:wrap;
}

.spnsor_banner li {
	display:  inline-block;     /* インラインブロック要素にする */
	width: 234px;	/*←指定ハーフバナーサイズを指定*/
	height: 60px;	/*←指定ハーフバナーサイズを指定*/
	padding:0 5px;	/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
	}
			
.spnsor_banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 0px transparent; /*←背景透過*/
}

/* ここから下が企業協賛募集中ボタンのCSS */
.btn-border {
  display: flex;
  flex-wrap:wrap;
  max-width: 234px;
  text-align: left;
  border: 2px solid #a84117; /* ヘッダのバーと同じ色 */;
  font-size: 14px;
  color: #a84117; /* ヘッダのバーと同じ色 */;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  transition: .4s;
}

.btn-border:hover {
  background-color: #cab972; /* ヘッダにカーソルを当てたときと同じ色 */
  border-color: #f4f4f2 /* テキスト部分背景と同じ色 */
  color: #FFFFFF;
}

/* ここまで企業協賛バナーの設定 2020skmt */

/* ここから配信有無まとめ表設定 2023 */
.live_table {
  width: 100%;
}
.live_table thead th {
  background: #7f3653; /* フッタのバーと同じ色 */
}

.live_table tbody th {
  background: #cab972; /* ナビバーhoverと同じ色 */
  color: #333333; /* ページタイトルと同じ色 */
  font-weight: normal;
}

.live_table th {
  text-align: center;
  vertical-align: center;
  white-space: nowrap;
  color: #FFF;
  background: #f4f4f2; /* テキスト部分背景と同じ色 */
}
.live_table th,
.live_table td {
  padding: 7px;
  text-align: center;
  border: 1px solid #d4d4d4; /* 全体背景と同じ色だと浮くので別色 */
}
/* ここまで配信有無まとめ表設定 2023 */


/* これがfloatの解除 */
.clear {
    clear: both;
}


#footer {
	background: #7f3653; /* フッタのバーの色 */
	padding: 5px;
	text-align: center;
	font-size: 10pt;	
	width: 96%;
}

#footer a:link { 
	color: #FFFFFF;
}
#footer a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

#footer a:hover {
	color: #d7003a; /* ヘッダにカーソルを当てたときと同じ色 */
	text-decoration: none;
}

#footer a:active {
	color: #FFFFFF; /* ヘッダにカーソルを当てたときと同じ色 */
	text-decoration: none;
}

/* boxのfloat用設定 */
/* もっとうまい書き方があるはず… */
.boxContainer { 
	overflow: hidden;
}

.floatText{
	float: left;
	width: 70%;
}

.floatImg{
	float:left;
	padding-right: 10px;
}

 
.boxContainer:after {
    clear: both;
}