/* カスタム CSS をここに入力してください */

/* たて向きテーブル */

.wp-table-tate {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0px;
  table-layout: fixed;
}
.wp-table-tate th {
  background-color: #FFFAF0 !important;
  color: #000 !important;
  text-align: center;
  font-weight: normal;
}
.wp-table-tate td {
  background-color: #fff;
}
.wp-table-tate td {
  text-align: center;
}
.wp-table-tate th, .wp-table-tate td {
  padding: 10px;
  border: solid 1px #ddd;
}

p.sample_movie{
  margin:0px;
}

p.eye_catch{
  margin-top: 25px;
  margin-bottom: 0px;
}




/*こんな方におすすめ（ポイントボックスの応用）*/
.content .recommend {
	position: relative;
    border-radius: 5px;
    padding:20px;
	margin-top:25px;
}
.content .recommend::before {
	content: "こんな方にオススメ";
	position: absolute;
	top: -15px;
	left: 15px;
	font-size: 1.8rem;
	font-weight: 700;
    background-color: #ffffff;
    color: #c53929;
    padding: 0 10px;
}

/*文字強調（黒太字）*/
.content .bold{font-weight: bold; font-size: 17px}
/*文字強調（赤太字）*/
.content .bold_r{font-weight: bold; font-size: 17px; color:#E70F5A; border-bottom: 3px dotted #E70F5A}
/*文字強調（黒太字黄色背景）*/
.content .bold_y{font-weight: bold; font-size: 17px; background: #ffff99; padding: 3px}



.content table tr:nth-child(2n+1){background: #fff}

/*ボタン関連*/
.content .btn_container{margin-top: 20px; text-align: center;}
.content .btn a.btn5 {font-size: 16px;}
.content .btn .btn5 {
 display: inline-block;
 width: 98%;
 height: 60px;
 text-align: center;
 text-decoration: none;
 line-height: 60px;
 outline: none;
 position: relative;
 z-index: 2;
 background-color: green;
 border: 2px solid green;
 color: #fff;
 font-weight: bold;
 margin-top: 10px;
 margin-bottom: 10px;
 margin-left: 1%;
 margin-right: 1%;
}
.btn5::before,
.btn5::after {
 position: absolute;
 z-index: -1;
 display: block;
 content: '';
 top: 0;
 width: 50%;
 height: 100%;
 background-color: green;
}

.btn5,
.btn5::before,
.btn5::after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: .3s;
  transition: all .3s;}

.content .btn .btn5:hover {
 background-color: #fff;
 border-color: #fb9935;
 color: #fb9935;
}
.btn5::before {
 right: 0;
}
.btn5::after {
 left: 0;
}
.btn5:hover::before,
.btn5:hover::after {
 width: 0;
 background-color: #fb9935;
}


/*教材のキャッチコピー*/
.content .kyozai{border: 1px solid #dddddd; padding: 15px; margin-top: 15px; border-radius: 10px; box-shadow: 0 0 10px #dddddd;}
.content .material .cap{margin-top: 2%}
.content .catch_copy{background: red; color: #fff; font-size: 17px; font-weight: bold; padding: 5px; border-radius: 10px}
.content .catch_copy2{background: #0066cc; color: #fff; font-size: 17px; font-weight: bold; padding: 5px; border-radius: 10px}
.content .catch_copy3{background: orange; color: #fff; font-size: 17px; font-weight: bold; padding: 5px; border-radius: 10px}
.content .detail{margin-top: 10px; padding-top: 15px; padding-bottom: 15px;}






/*文頭のチェックマーク*/
.content .check{margin-top: 0.3em; margin-bottom: 0.3em; padding-left: 1.7em}
.content .check{ position:relative}
.content .check::before {position: absolute;
                         content: '\f00c';
		                     color: #FF0000;
				                 font-family: 'FontAwesome';
				                 left: 0px;
 　　　　　　　　　　　　top: -10px;
                         font-size: 17px;
                         } 




/*Checkタブ*/
.content .detail{
position: relative;
color: black;
border-top: 2px solid #80c8d1;
border-bottom: 1px dotted #000;
/*border-bottom: 1px dotted #000;*/
padding-top: 15px;
padding-bottom: 15px;
margin-top: 25px;

}

/*Checkタブ*/
.content .detail:after {
  position: absolute;
  font-family: 'FontAwesome','Quicksand','Avenir','Arial',sans-serif;
  content: '\f0a4  Check';
  background: #80c8d1;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.05em
  }

/*--------------------
 吹き出しを作る
--------------------*/

.voice {
  margin-top: 30px;
  margin-bottom: 30px;
}
/* 左画像 */
.voice-img-left {
  margin-left: 4px;
  margin-top: -1px;
  float: left;
  width: 60px;
  height: 60px;
}
/* 右画像 */
.voice-img-right {
  margin-right: 4px;
  margin-top: -1px;
  float: right;
  width: 60px;
  height: 60px;
}
.voice figure img {
  width: 100%;
  height: 100%;
  border: 2px solid #eee;
  border-radius: 50%;
  margin: 0;
}
/* 画像の下のテキスト */
.voice-img-description {
  padding: 5px 0 0;
  font-size: 11px;
  text-align: center;
}
/* 左からの吹き出しテキスト */
.voice-text-right {
  /*color: #444;*/
  color: #000;
  position: relative;
  margin-left: 80px;
  padding: 1.2em;
  border: 1px solid #ccc;
  background-color: #E0EEEE;
  /*background-color: #fff;*/
  border-radius: 10px;
  box-shadow: 0 0 7px #eee;
}
/* 右からの吹き出しテキスト */
.voice-text-left {
  position: relative;
  margin-right: 80px;
  padding: 1.2em;
  border: 1px solid #ccc;
 /*background-color: #FFF9FA;*/
  background-color: #FEFBEB;
  border-radius: 10px;
  box-shadow: 0 0 7px #eee;
}

p.voice-text {
  margin: 0 0 8px;
  
}


p.voice-text:last-child {
  margin-bottom: 0px;
}
/* 左の三角形を作る */
.voice-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #ccc;
  top: 47px;
  left: -20px;
}
.voice-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #E0EEEE;
  /*border-right: 10px solid #fff;*/
  
  top: 47px;
  left: -18px;
}
/* 右の三角形を作る */
.voice-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #ccc;
  top: 47px;
  right: -21px;
}
.voice-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
 /*border-left: 10px solid #FFF9FA;*/
  border-left: 10px solid #FEFBEB;
  top: 47px;
  right: -19px;
}
/* 回り込み解除 */
.voice:after,.voice:before {
  clear: both;
  content: "";
  display: block;
}

/*デフォルトでリンクオーバーでボーダーボトムが入り、画像リンクだとデザインが崩れるのを防ぐ*/
.content a.official:hover {border: none;}

/*広告ボタンの上下マージン*/
.content p.banner {margin: 50px 0 50px 0}

/*Chromeではaタグにopacityを指定しても有効にならない。aタグ内の要素（ここではimg）に対してopacityを指定すると機能する*/
.content a.official:hover img {opacity: 0.8}


/*Table of Contents plusで「・」が付くの消す*/
#toc_container .toc_list li:before{
  content: "";
}

/*Table of Contents plusのマージン設定*/
#toc_container {
  margin-top: 2em;
}

/*マーカー設定*/
.content .marker_o {
      border-bottom: solid 5px #90C9CE;
}

.content .official_link{font-size: 18px;
                        font-weight: bold}

@media (min-width: 768px){
  
  .content .wrap {margin-top: 10px;}
  
  .content .wrap:after {content: "";
                        display: block;
                        clear: both}
  
  .content .text {float: left;
                  width: 55%;}
  
  .content p.topimg{float: right;
                   width: 45%;}

  
  
}