@charset "UTF-8";

#recom h2 {
	padding: 0 0 .5em 0;
	line-height: 1.5;
	color: #0d4394;
}
#recom h3 {
	font-size: 18px;
}
#recom .recom_section {
    padding: 0 0 4em 0;
}
#recom .text {
    padding: 0 0 1em 0;
}
#recom .mb_2em{
	margin-bottom: 2em;
}
#recom .update{
	text-align: right;
}
#recom ul.list {
	margin: 0 0 0 1.5em;
}
#recom ul.list li {
	list-style: disc;
}
#recom a{
	color: #0d4394;
	text-decoration:underline;
}
/*スマホ-----------------------------*/
@media (max-width: 767px){
	#recom .recom_section {
    padding: 0 0 2em 0;
}
}

/*テーブル1-------------------------*/
#recom .tbl_1{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #cfd8dc;
  background: #fff;
  table-layout: fixed;
}
#recom .tbl_1 thead th{
  width: 50%;
  padding: 14px 16px;
  background: #d5ecfc;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid #cfd8dc;
}
#recom .tbl_1 thead th:first-child{
  border-right: 2px solid #cfd8dc;
}
#recom .tbl_1 tbody td{
  padding: 16px 20px;
  vertical-align: top;
}
#recom .tbl_1 tbody td:first-child{
  border-right: 2px solid #cfd8dc;
}

#recom .tbl_1 ul{
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
}
#recom .tbl_1 li{
  line-height: 1.9;
}
/* スマホ：theadを隠し、tdを縦積み＋tdの前に見出しを出す */
@media (max-width: 767px){
  #recom .tbl_1 thead{ display:none; }

  #recom .tbl_1 tbody, .tbl_1 tbody tr{ display:block; }
  #recom .tbl_1 tbody td{
    display:block;
    width:100%;
    border-right:none;
    border-bottom:2px solid #cfd8dc;
    padding:64px 20px 16px;
    position:relative;
  }
  #recom .tbl_1 tbody td::before{
    content: attr(data-th);                /* ← ここで列名を出す */
    position:absolute;
    top:0; left:0; right:0;
    padding:12px 16px;
    background:#d5ecfc;
    border-bottom:2px solid #cfd8dc;
    font-weight:700;
    text-align:center;
  }
#recom .tbl_1 tbody td:last-child{ border-bottom:none; }
#recom .tbl_1 tbody td:first-child{
  border-right: 0px;
}
}
/*テーブル1 END-------------------------*/

/*テーブル2-------------------------*/
#recom .tbl_2{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #cfd8dc;
  background: #fff;
  table-layout: auto;
}
#recom .tbl_2 thead th{
  padding: 14px 16px;
  background: #d5ecfc;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid #cfd8dc;
}
#recom .tbl_2 thead th:first-child,
#recom .tbl_2 thead th:nth-child(2){
  border-right: 2px solid #cfd8dc;
}
#recom .tbl_2 tbody td{
  padding: 16px 20px;
  vertical-align: top;
}

#recom .tbl_2 tbody td:first-child,
#recom .tbl_2 tbody td:nth-child(2){
  border-right: 2px solid #cfd8dc;
}
/* 最後の行以外の td にだけ下線 */
#recom .tbl_2 tbody tr:not(:last-child) > td{
  border-bottom: 2px solid #cfd8dc;
}
/* 1・2列目を折り返さない（th/td 両方） */
#recom .tbl_2 th:nth-child(1),
#recom .tbl_2 td:nth-child(1),
#recom .tbl_2 th:nth-child(2),
#recom .tbl_2 td:nth-child(2){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*スマホ-----------------------------*/
@media (max-width: 767px){	
/* 3列目（理由）を折り返さない（th/td 両方） */
#recom .tbl_2 th:nth-child(3),
#recom .tbl_2 td:nth-child(3){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 横にスクロール */
.table-scroll {
        overflow: scroll;
    }
}
/*テーブル2 END-------------------------*/