/*-------------------------------------------------------------------------------------------------
キンドリ記事一覧
-------------------------------------------------------------------------------------------------*/
#article_main_image{
  width: 100%;
  background: url(../../img/article/kindori_top_bk.png) repeat-x;
}

#articles{
  width: 1000px;
  overflow: hidden;
  margin: 0 auto;
  padding: 30px 0px;
}

.article_data{
  width: 33.3%;
  height: 550px;
  padding: 0 1.5%;
  float: left;
}

.article_data a,
.article_data a:active,
.article_data a:hover,
.article_data a:link,
.article_data a:visited{
  color: #000;
}

.article_data img{
  width: 100%;
}

.article_data h3{
  width: 100%;
  height: auto;
  margin-top: 15px;
  text-align: left;
  padding-left: 10px;
  border-left: 2px solid #036eb8;
}

.article_data p{
  width: 100%;
  height: auto;
  margin-top: 10px;
  text-indent: 1em;
  text-align: left;
}

.article_data p span{
  display: block;
  width: 100%;
  text-align: right;
  color: #036eb8;
  margin-right: 5px;
}


/*-----sp_cording-----*/


@media only screen and (max-width: 1300px) and (max-width: 786px){

  #article_main_image img{
  width: 100%;
  }

  #articles{
    width: 95%;
    padding: 0;
    margin: 30px 2.5%;
    text-align: left;
  }

  .article_data{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 3px 0;
    float: none;
    overflow: hidden;
  }

  .article_data p span{
    margin-top: 20px;
    margin-bottom: 40px;
  }

}


/*-----sp_cording_end-----*/


/*-------------------------------------------------------------------------------------------------
キンドリ各種記事
-------------------------------------------------------------------------------------------------*/
#article_contents{
  width: 1000px;
  height: auto;
  margin: 0 auto 60px;
}

#article_contents,
#article_contents .annotation{
  display: flex;
}

/*article_data_left*/
#article_data_left{
  width: 70%;
}

#article_data_left dl,
#article_data_left dt,
#article_data_left dd,
#article_data_left img,
#article_data_left h2,
#article_data_left h3,
#article_data_left p{
  width: 100%;
  height: auto;
  text-align: left;
}

#article_data_left dl{
  margin-bottom: 40px;
}

#article_data_left img{
  margin-bottom: 20px;
}

#article_data_left h2{
  font-size: 22px;
  margin-bottom: 15px;
}

#article_data_left h3{
  margin-top: 50px;
}

#article_data_left p{
  margin-top: 10px;
  text-indent: 1em;
  white-space: pre-wrap;
}

#article_data_left .article_marker{
color: #00A29A;
margin-right: 5px;
font-size: 22px;
}

#article_data_left .article_lb_button{
  white-space: normal;
  padding: 10px 0;
}

#article_contents .annotation{
  flex-wrap: wrap;
  align-items: flex-steat;
}

#article_contents .annotation img{
  width: 65%;
  margin-right: 5%;
  height: auto;
}

#article_contents .annotation div{
  width: 30%;
}

#article_contents .annotation div ul{
  padding: 10px 0;
}


@media only screen and (max-width: 1300px) and (max-width: 786px){

  #article_contents .annotation img,
  #article_contents .annotation div{
    width: 100%;
  }
}


/*article_data_right*/

#article_data_right{
width: 25%;
height: max-content;
margin-left: 5%;
box-sizing: border-box;
background-color: #dcdcdd;
padding: 30px 20px;
position: -moz-sticky;
position: -webkit-sticky;
position: sticky;
top: 0;
}

#article_data_right h4{
width: 100%;
height: auto;
background-color: #000;
color: #fff;
font-size: 20px;
padding: 10px 0;
text-align: center
}

#article_data_right dl{
width: 100%;
height: auto;
overflow: hidden;
margin-top: 15px;
background: #fff;
}

#article_data_right dl dt{
text-align: left;
margin: 10px 5px;
line-height: 18px;
}

#article_data_right a{
text-decoration: none;
}

#article_data_right dl dt span{
color: #00A29A;
margin-right: 5px;
font-size: 20px;
text-decoration: none;
}

#article_data_right dl img{
width: 100%;
height: auto;
overflow: hidden;
}

/*-----sp_cording-----*/


@media only screen and (max-width: 1300px) and (max-width: 786px){

  #article_contents{
  width: 95%;
  height: auto;
  padding: 0;
  margin: 2.5%;
  display: inherit;
  text-align: left;
  }

  #article_data_left{
    width: 100%;
  }

  #article_data_right{
    display: none;
  }

}


/*-----sp_cording_end-----*/