@charset "UTF-8";

/* ホームページ　*/

BODY	{
  background-image: url(../image/b080.jpg);
  background-image: url(../image/b028.jpg);
  margin: 1px 2px 1px 2px;

  /*  フォントの種類  */
  font-family: -apple-system, BlinkMacSystemFont,
  "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /*  フォントのサイズ  */
  font-size: 16px;

  /*  フォントの色  */
  color: #333;

  /* 文字間隔の調整の設定 */
  letter-spacing: 1.5px;

  /* 行間の設定 */
  line-height: 1.75;
}

/* API取得ページのCSS　*/
body.api{
  width:60%;
  background-image: none;
  background-color: #ffffff;
  margin: auto;
}

.api H1{

  margin-top:20px;
  font-size: 40px;


}

.api p{
  
padding-left:1em;
margin-bottom: 3em;
padding:10px;
}

.api H2{

  margin-top:20px;
  font-size: 30px;



}
.api H3{

  margin-top:20px;
  font-size: 25px;


}

.api ul{
  margin-top:20px;

}

.api hr{
  margin-top:20px;
  border-radius: 2px;
  border: 2px solid hsl(0, 0%, 60%);
  width: 100%;

}

.api hr.hr_1{
  border: 1px solid hsl(59, 90%, 53%);

}

.api blockquote {
  position: relative;
  margin: 2em 0;
  padding: 1em 1em 1em 2.6em;
  font-size: .9em;
  border-left: 5px solid #CCC;
  border-radius: 2px;
  }
  blockquote:after{
  position: absolute;
  bottom: 0;
  right: 0;
  content: '”';
  font-family: sans-serif;
  font-size: 6em;
  opacity: .1;
  }


  .api img{
    width: initial;
    height: initial;
    max-width: 100%;
    height: auto;
    margin: 20px;
    float:none;
    border-width: 1px;
    border-style: solid ;
    border-color: #CCC;
    
  }












input,select{
  margin: 5px;
  padding:10px;
  border-radius: 10px;

  font-size: large;

}

.textbox_s{
  border-radius: 1em;
  margin: 0px;
  padding:0px;
  font-size: 1em;
  width: 3em;
  height: 1.3em;
  text-align: center;

}

.textbox_d{
  border-radius: 1em;
  margin: 0px;
  padding:0px;
  font-size: 1em;
  width: 6em;
  height: 1.3em;
  text-align: center;

}

.owner{
  background-color: gold;
  padding:5px;
  font-weight:bold
}

.moderator{
  color: blue;
  font-weight:bold
}

.sponsor{
  background-color: aqua;
  padding:5px;
  font-weight:bold
}



/*要素を隠す*/
.hidden{

  display:none

}

table {

  margin-left: auto;
  margin-right: auto;
}


button{
  border-radius: 10px;
  margin: 0px 1px 0px 1px;
}
/*上、右、下、左*/
.fgh_bg{
  font-size: large;
  background:#ff0000;
  line-height: 1.3em;
  padding: 3px 5px 3px 5px;
  border-radius:10px;
  color:white
}

.ioz_bg{
  font-size: large;
  background:green;
  line-height: 1.3em;
  padding: 3px 5px 3px 5px;
  border-radius:10px;
  color:white
}

.aeu_bg{
  font-size: large;
  background:#2d8fdd;
  line-height: 1.3em;
  padding: 3px 5px 3px 5px;
  border-radius:10px;
  color:white
}

.id_sta1{
  
  font-size: large;
  line-height: 1.3em;
  padding: 3px 5px 3px 5px;
  border-radius:10px;
}










.txt_trans{
  font-size: large;
  line-height: 1.3em;
  padding: 3px 5px 3px 5px;
  border-radius:10px;
  color:transparent;
}

.fgh_txt{

  color:#ff0000;

}

.ioz_txt{

  color:green;

}
.aeu_txt{

  color:#2d8fdd;

}

.time_a{
  
  background:linear-gradient(transparent 90%, red 0%);

}

.time_b{

  background:linear-gradient(transparent 90%, yellow 0%);

}

.end{

  font-size: 1.3em;
  
  color: red;


}



img{
  width: 48px;
  height: 48px;
  border-radius: 24px;
  float:none;
  
}

table.left {
  margin-left: auto;
  border-collapse: collapse;
}

table.right {
  margin-right: auto;
}

table.center {
  margin: auto;
  border-collapse: collapse;
}

/*テーブル装飾*/
.question table{
  width: 100%;
  border-collapse:separate;
  border-spacing: 0;
}

.question table th:first-child{
  border-radius: 10px 0 0 0;
}

.question table th:last-child{
  border-radius: 0 10px 0 0;
  border-right: 1px solid #3c6690;
}

.question table th{
  text-align: center;
  color:white;
  background: linear-gradient(#829ebc,#225588);
  border-left: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  padding: 1px 0;
}

.question table td{
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  padding: 0px 0;
}

.question table td:last-child{
  border-right: 1px solid #a8b7c5;
  white-space: nowrap;
}
.question tr td:nth-child(2) {

  text-align: center;

}
.question tr td:nth-child(3) {

  text-align: left;

}
.question tr td:nth-child(4) {

  text-align: center;

}

.question table tr:last-child td:first-child {
  border-radius: 0 0 0 10px;
}

.question table tr:last-child td:last-child {
  border-radius: 0 0 10px 0;
}
.question img{
  margin: 0px;
  padding:0px;

  border-radius: 44px;
  width: 88px;

}


td{
  margin: 0px;
  padding:2px;

}
td.font{
  font-size: medium;
}

 td.chat{

  font-size: 1.3em;
  font-family: monospace;
  border-width: 0 1px 0 1px;
	border-style: dashed;
	border-color: #ffb300;

}

td.chat2{

 border-width: 0 0 0 1px;
 border-style: dashed;
 border-color: #ffb300;

}


tr.main{
  border-width:  0 0 3px 0;
	border-style: solid;
	border-color: #43a047;
}

tr.main2{
  border-width:  0 0 3px 0;
	border-style: solid;
	border-color: #a04343;
}


.ch_log{
  font-size: medium;

  border-width:  0 0 1px 0;
	border-style: solid;
	border-color: #e3f592;
}


dl_inpur{

  /*スクロールバーを表示する*/
  overflow: scroll;
  /*デフォルトで水平方向のスクロールバーが入ってくるので非表示にする*/
  overflow-x: hidden;
  
    }

/* カラム組　*/

.culumn {
  display: flex ;
  justify-content: space-between;
}


/* カラム組　左*/

.c_left {
  width: 15%;
  text-align: right;
  height: 50%;
  margin: 0 0 0 auto;
  position: sticky;
  top: 0; /* 下を基準 */
  right: 0; /* 左を基準 */
}


/* カラム組　中*/
.c_center {
  width: 60%;
}

/* カラム組　右*/

.c_right {
  padding:0px;
  width: 25%;
  height: 50%;
  margin: 0 auto 0 0;
  position: sticky;
  top: 0; /* 下を基準 */
  right: 0; /* 左を基準 */
}

.sen tr :nth-child(1) {
  border-right: solid  red;
  white-space: nowrap; 
  text-align: center;
}
.sen tr :nth-child(2) {
  border-right: solid red;
  white-space: nowrap; 
  text-align: center;
}
.sen td{
  border-top: solid  red;

}

.middle{
  width: 2em;

  font-size: medium;
}

.normal {

  border-right: solid  red;
  
} 

textarea.ch{
  width:95%;
  height: 35em;
}

textarea.ch0{
  width:80%;
  height: 5em;
}


textarea.error{
  width:50em;
  height: 5em;
}


.caption_box{
  position: relative;
  border-radius: 0;

  padding-top: 0.3em;
  margin: 1em;
  border-top: 10px solid red;
}

.caption_box .caption{
  position: absolute;
  top: 0em;
  left: 0;

  font-size: 1em;
  background-image: url(../image/b080.jpg);
  transform: translateY(-60%) translateX(11em);
}

.va_c{
  vertical-align: middle;

}

HR.pat{
	border-style: solid; /* 線種 */
  color: red;

}

HR.normal {
	border-style: solid; /* 線種 */
	clear: both;
  margin: 0.5em;
	border: 0;
	height: 5px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0, 255, 255, 0.75), rgba(0,0,0,0));
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(255,0,0,0.75), rgba(0,0,0,0));
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));

}

.black{

  background-color: #000000;
  
}


H1,H2,H3	{
  margin:0em 0em 0em 0em;
  text-align:center;

}

.sc_block{
  display:inline-block;
  text-align:left;

}

ul{
  list-style: none;
  margin-top: 1em;
}

P{
padding-left:1em;
margin-bottom: 0em;
}

.no  { white-space: nowrap;}

.red {
  color: #ff0000;
}

ul, ol {
  background: #f1f8ff;
  box-shadow: 0px 0px 0px 10px #f1f8ff;/*線の外側*/
  border: dashed 2px #668ad8;/*破線*/
  border-radius: 9px;
  margin-left: 10px;/*はみ出ないように調整*/
  margin-right: 10px;/*はみ出ないように調整*/
  padding: 0.5em 0.5em 0.5em 0.5em;
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.list_1{
  display:inline-block; 
  color: #000000;
  border-left: solid 6px #2d8fdd;/*左側の線*/
  background: #ffffff;/*背景色*/
  margin-bottom: 0px;/*下のバーとの余白*/
   line-height: 1;
  padding: 0.2em;
  list-style-type: none!important;/*ポチ消す*/
}

.list_2{
  display:inline-block; 
  color: #000000;
  border-left: solid 6px #dd2d71;/*左側の線*/
  background: #Ffff33;/*背景色*/
  margin-bottom: 0px;/*下のバーとの余白*/
   line-height: 1;
  padding: 0.2em;
  list-style-type: none!important;/*ポチ消す*/
}

.list_3{
  display:inline-block; 
  color: #000000;
  border: dashed 2px #0ae40a;/*破線*/
  border-left: solid 6px #0ae40a;/*左側の線*/
  background: #ffffff;/*背景色*/
  margin-bottom: 0px;/*下のバーとの余白*/
   line-height: 1;
  padding: 0.2em;
  list-style-type: none!important;/*ポチ消す*/
}

.list_4{
  display:inline-block; 
  color: #000000;
  border: dashed 2px #f1f52a;/*破線*/
  border-left: solid 6px #f1f52a;/*左側の線*/
  background: #ffffff;/*背景色*/
  margin-bottom: 0px;/*下のバーとの余白*/
   line-height: 1;
  padding: 0.2em;
  list-style-type: none!important;/*ポチ消す*/
}

.list_5{
  display:inline-block; 
  color: #000000;
  border-left: solid 6px #2d8fdd;/*左側の線*/
  background: #ffffff;/*背景色*/
  margin-bottom: 0px;/*下のバーとの余白*/
   line-height: 1;
  padding: 0.2em;
  list-style-type: none!important;/*ポチ消す*/
}

















.r {text-align:right}
.l {text-align:left}
.t {vertical-align:top}
.c {text-align:center}
.under{border-bottom: 1px solid;;}
.cn {text-align:center;}
.ln {text-align:left;}
.x {font-size: x-large;}
.xx {font-size: xx-large;}
.s {font-size: x-small;}
.ss {font-size: xx-small;}
/*IMG	{float:none;margin: auto;border-collapse: collapse}*/
.title {position: relative;}/*相対配置*/

.title H1 {
	position: absolute;
  background-image: url(../image/b084.jpg);
	top: 50%;
  left: 40%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-30%,-50%);
  margin:1em;
  padding:0;
  line-height: 1.4em;
  color: #00BCD4;
  text-shadow: 2px 2px #fff, 5px 5px rgba(0, 188, 212, 0.4);
}

 
.tableArea td:empty {
  /* ▼ 斜線はSVG画像を背景として設定 */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoxMDAlO2hlaWdodDoxMDAlOyI+PGxpbmUgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSIgc3R5bGU9InN0cm9rZTogIzMzMzMzMztzdHJva2Utd2lkdGg6IDE7Ij48L2xpbmU+PC9zdmc+');
}
/*
 tr :nth-child(1) {  white-space: nowrap; }
 tr :nth-child(2) {  white-space: nowrap; }
 tr :nth-child(3) {  white-space: nowrap; }
 tr :nth-child(4) {  white-space: nowrap; }
 tr :nth-child(5) {  white-space: nowrap; }
 tr :nth-child(7) {  white-space: nowrap; }
 tr :nth-child(8) {  white-space: nowrap; }
 tr :nth-child(9) {  white-space: nowrap; }
*/


@media (max-width: 1670px) {


  .c_center {
    width: 100%;
  }


}

@media (max-width: 1380px) {


  .culumn {
    flex-direction: column;
  }

  textarea.ch{
    width:100%;
    height: 5em;
  }

  
  /* カラム組　左*/
  .c_left {
    text-align:center;
    width: 100%;
    
    margin: 0 auto;
  position: relative;
  }
  
  /* カラム組　中*/
  .c_center {
    width: 100%;
  margin: 0 auto;
  }

  /* カラム組　右*/
  .c_right {
    width: 100%;
  margin: 0 auto;
  position: relative;
  }

}