@charset "utf-8";
/* CSS Document */


/*ChartBox----------------------------------------*/
ul.ChartBox { list-style: none; width: 100%}
.ChartBox li { background-color: #FFFFFF; border-right: 2px #C8C8C8 solid; border-bottom: 2px #C8C8C8 solid;
               box-sizing: border-box; padding: 10px; margin-bottom: 20px; border-top: 1px #DCDCDC solid; border-left: 1px #DCDCDC solid;}

.ChartBox h2 { font-size: 2.5rem !important; margin: 0px !important; padding: 10px 0px 8px 0px !important;
	border: 0px !important; margin-bottom: 10px !important; color: #4B4B4B !important; font-weight: normal !important}

.ChartBox h3 { font-size: 1.8rem !important}

.CB-L { width: 100% }
.CB-R { width: 100% }

.CBR-R { float: right; width: 100% }

.CBArea { width: 20%; margin: 2px; float: left; font-size: 1.4rem; font-weight: bold; border: 1px #B9B9B9 solid; box-sizing: border-box;
          padding: 5px 5px 5px 5px; text-align: center; position: relative; background-color: #ffffff;}

.CBArea2 { width: 20%; margin: 2px; float: right; font-size: 1.6rem; font-weight: bold; border: 2px #B9B9B9 solid; box-sizing: border-box;
  padding: 5px 5px 5px 5px; text-align: center; position: relative; background-color: #ffffff; }
  
.CBCast { width: 25%; margin: 2px; float: right; font-size: 1.4rem; background-color: #252525; color: #FFFFFF; box-sizing: border-box;
          padding: 5px 5px 5px 10px; text-align: center; position: relative}
.CBCast:before { content: ''; position: absolute; top:10px; left:6px;
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url(../img/sikyou/cast.svg);
  background-size: contain;
  vertical-align: middle; background-repeat: no-repeat; }


.CBArrow { width: 40%; margin: 2px; float: left; font-size: 1.4rem; border: 1px #B9B9B9 solid; box-sizing: border-box; display: inline-block;
          padding: 5px 5px 5px 5px; text-align: left; position: relative}

.CBA-1:after { background-image: url(../img/sikyou/arrow-01.svg); background-size: contain; vertical-align: middle;
	background-repeat: no-repeat; content: ''; position: absolute; top:3px; right:3px;
  display: inline-block;
  width: 40px;
  height: 40px;}
.CBA-2:after { background-image: url(../img/sikyou/arrow-02.svg); background-size: contain; vertical-align: middle;
	background-repeat: no-repeat; content: ''; position: absolute; top:3px; right:3px;
  display: inline-block;
  width: 40px;
  height: 40px;}
.CBA-3:after { background-image: url(../img/sikyou/arrow-03.svg); background-size: contain; vertical-align: middle;
	background-repeat: no-repeat; content: ''; position: absolute; top:3px; right:3px;
  display: inline-block;
  width: 40px;
  height: 40px;}
.CBA-4:after { background-image: url(../img/sikyou/arrow-04.svg); background-size: contain; vertical-align: middle;
	background-repeat: no-repeat; content: ''; position: absolute; top:3px; right:3px;
  display: inline-block;
  width: 40px;
  height: 40px;}
.CBA-5:after { background-image: url(../img/sikyou/arrow-05.svg); background-size: contain; vertical-align: middle;
	background-repeat: no-repeat; content: ''; position: absolute; top:3px; right:3px;
  display: inline-block;
  width: 40px;
  height: 40px;}


  @media all and (-ms-high-contrast: none) {
    .CBA-1:after,.CBA-2:after,.CBA-3:after,.CBA-4:after,.CBA-5:after{
      top: -5px;
    }
  }



/* width 769以上 */

@media print, screen and (min-width : 769px){

/*ChartBox----------------------------------------*/
.ChartBox h2 { padding: 0px !important}

.ChartBox li { padding: 40px 40px 20px 40px}

.CBR-R { width: 70% !important; float: right }
.CBR-R2 { width: 100% !important; float: right }

.CB-L { width: 60%; float: left }
.CB-R { width: 40%; float: right }

.CBArea { width: 125px; }
.CBCast { width: 80px; }
.CBArrow { width: 125px;}


}


/*ChartBox----------------------------------------*/
ul.ChartBox2 { list-style: none; width: 100%}
.ChartBox2 li { background-color: #FFFFFF; border-right: 2px #C8C8C8 solid; border-bottom: 2px #C8C8C8 solid;
               box-sizing: border-box; padding: 10px; margin-bottom: 20px; border-top: 1px #DCDCDC solid; border-left: 1px #DCDCDC solid;}

.ChartBox2 h2 { font-size: 2.0rem !important; margin: 0px !important; padding: 10px 0px 8px 0px !important;
	border: 0px !important; margin-bottom: 10px !important; color: #4B4B4B !important; font-weight: normal !important}

.ChartBox2 h5 { font-size: 1.8rem !important; margin: 0px !important; padding: 10px 0px 8px 0px !important;
  	border: 0px !important; margin-bottom: 10px !important; color: #4B4B4B !important; font-weight: normal !important}

.ChartBox2 h3 { font-size: 1.8rem !important}

.CB2-L { width: 100% }
.CB2-R { width: 100% }

.CBR2-R { float: right; width: 100% }

.CBCast2 { width: 30%; float: left; font-size: 1.4rem; background-color: #252525; color: #FFFFFF; box-sizing: border-box;
          padding: 5px 10px 5px 20px; text-align: center; position: relative}
.CBCast2:before { content: ''; position: absolute; top:10px; left:6px;
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url(../img/sikyou/cast.svg);
  background-size: contain;
  vertical-align: middle; background-repeat: no-repeat; }


.CBArrow2 { clear:both; width: 65%; margin: 2px; float: left; font-size: 1.4rem; border: 1px #B9B9B9 solid; box-sizing: border-box; display: inline-block;
          padding: 5px 10px 5px 10px; text-align: left; position: relative}

.CBA2-1:after { background-image: url(../img/sikyou/arrow-01.svg); background-size: contain; vertical-align: middle;
	background-repeat: no-repeat; content: ''; position: absolute; top:3px; right:6px;
  display: inline-block;
  width: 40px;
  height: 40px;}
.CBA2-2:after { background-image: url(../img/sikyou/arrow-02.svg); background-size: contain; vertical-align: middle;
	background-repeat: no-repeat; content: ''; position: absolute; top:3px; right:6px;
  display: inline-block;
  width: 40px;
  height: 40px;}
.CBA2-3:after { background-image: url(../img/sikyou/arrow-03.svg); background-size: contain; vertical-align: middle;
	background-repeat: no-repeat; content: ''; position: absolute; top:3px; right:6px;
  display: inline-block;
  width: 40px;
  height: 40px;}
.CBA2-4:after { background-image: url(../img/sikyou/arrow-04.svg); background-size: contain; vertical-align: middle;
	background-repeat: no-repeat; content: ''; position: absolute; top:3px; right:6px;
  display: inline-block;
  width: 40px;
  height: 40px;}
.CBA2-5:after { background-image: url(../img/sikyou/arrow-05.svg); background-size: contain; vertical-align: middle;
	background-repeat: no-repeat; content: ''; position: absolute; top:3px; right:6px;
  display: inline-block;
  width: 40px;
  height: 40px;}


  @media all and (-ms-high-contrast: none) {
    .CBA2-1:after,.CBA2-2:after,.CBA2-3:after,.CBA2-4:after,.CBA2-5:after{
      top: -5px;
    }
  }



/* width 769以上 */

@media print, screen and (min-width : 769px){

/*ChartBox----------------------------------------*/
.ChartBox2 h2 { padding: 0px !important}
.ChartBox2 h5 { padding: 0px !important}

.ChartBox2 li { padding: 40px 40px 20px 40px}

.CBR2-R { width: 80% !important; float: right }
.CBR2-R2 { width: 100% !important; float: right }

.CB2-L { width: 60%; float: left }
.CB2-R { width: 40%; float: right }


.CBCast2 { width: 115px; }
.CBArrow2 { width: 125px;}


}

/* 市況画像差し込み用 ---------------------------------------- */

.ChartSubTitle {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #333333;
}

.ChartImage {
  margin-top: 20px;
}

.ChartImage img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #DCDCDC;
  box-sizing: border-box;
}

.ChartArticle:after {
  content: "";
  display: block;
  clear: both;
}

/* スマホ */
@media print, screen and (max-width : 768px){

  .ChartArticle .ChartHead,
  .ChartArticle .ChartText {
    margin-right: 0;
  }

  .ChartArticle .ChartImage {
    clear: both;
    margin-top: 8px;      /* ← 画像とサブ見出しの間を詰める */
    margin-bottom: 12px;
  }

  /*  上ブロック → 見出し */
  .ChartArticle .ChartHead {
    padding-top: 36px;    /* ← 今より広げる */
  }

  /*  見出し → サブ見出し */
  .ChartArticle .ChartHead h2 {
    margin-bottom: 1px !important;
    padding-bottom: 1px !important;
  }

  /*  サブ見出し → 下 */
  .ChartArticle .ChartSubTitle {
    margin-bottom: 12px;
    line-height: 1.5;
  }

}

/* PC */
@media print, screen and (min-width : 769px){

  /* 右上情報を右上に固定 */
  .ChartArticle .ChartMeta {
    float: right;
    width: 213px;
    margin-left: 40px;
  }

  .ChartArticle .ChartMeta .CBR-R {
    width: 213px !important;
    float: right !important;
  }

  /* 画像はその下に右寄せ */
  .ChartArticle .ChartImage {
    float: right;
    clear: right;
    width: 300px;
    margin: 20px 0 0 40px;
  }

  /* 左側は右カラム分をあらかじめ空ける */
  .ChartArticle .ChartHead,
  .ChartArticle .ChartText {
    margin-right: 340px;
  }
}