/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/*--------------------------------------
  カード型_06
--------------------------------------*/
.l-wrapper_06 {
  margin: 1rem auto;
  width: 100%;
}
/*
.l-wrapper_06:hover {
  transform: translateY(-5px);
  box-shadow: 0 7px 34px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
  transition: all .5s;
}
*/
.card_06 {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ccc;
}

.card-img_06 {
  border-radius: 5px 5px 0 0;
  max-width: 100%;
  height: auto;
}
.card-content_06 {
  padding: 8px 20px 20px;
}
.card-title_06 {
  font-size: 1.6em;
  color: #333;
  font-weight: 700;
}
.card-text_06 {
  color: #777;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0.2em;
}
.card-link_06 {
  text-align: center;
  /*border-top: 1px solid #eee;*/
  padding: 20px;
}
.card-link_06 a {
  text-decoration: none;
  color: #4f96f6;
  margin: 0 10px;
}
.card-link_06 a:hover {
  color: #6bb6ff;
}

.card-content_06 p {
  margin-bottom:0;s
}


.article_list-box {
    align-items: flex-start;
    display: flex;
    position: relative;
    transition: .14s;
  margin:0 auto;
  max-width:760px;
    padding: 15px 0;
}
.article_list-img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    max-width: 235px;
}
.article_list-detail {
    flex: 1 1;
    padding-left: 20px;
}
.div-link{
  width:100%;
 position:relative;
}
.link-in-div{
position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

/*横並びボックス*/
.flex-parent {
  width:100%;
  display:flex;
  flex-wrap:wrap; /*折り返し*/
  justify-content:space-between;/*両端揃え*/
}
.flex-child {
  width:32%;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  border-radius:16px;
  background-color:#fff;
  padding:30px 25px 15px;
}
.flex-grandchild-img {
  width:100%;
  height:auto;
  position:relative;
}
.flex-grandchild-img::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:64%;
}
.flex-grandchild-img img {
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;left:0;
  border-radius:16px 16px 0 0;
}
.flex-grandchild-inner {
  display:flex;
  flex-direction:column;
  flex-grow:1;
  width:100%;
}
.flex-grandchild-inner h3 {
  display:flex;
  align-items:center;
  min-height:56px;
  font-size:1.4rem;
  line-height:1.2;
  padding:5px 0;
  margin:0 auto;
  box-sizing:border-box;
  text-align:center;
}
.flex-grandchild-inner h3 img {
  display:block;
  width:12.5%;
  height:auto;
  margin-right:8px;
}
.flex-grandchild-innerText {
  flex-grow:1;
  padding:5px 10px;
  box-sizing:border-box;
  text-align:center;
      line-height:1.2;
}
.flex-grandchild-innerLink {
  width:100%;
  height:auto;
}
.flex-grandchild-innerLink a {
  width:90%;
  height:48px;
  margin:10px auto 20px auto;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  font-weight:bold;
  text-decoration:none;
  background:#0686f9;
  border-radius:8px;
}
.flex-grandchild-innerLink a:hover {
  background:#046cc7;
  
}
@media screen and (max-width: 1360px) {
  .flex-parent {
    width:90%;
    max-width:initial;
    height:auto;
    margin:0 auto;
  }
}

@media screen and (max-width: 780px) {
  .flex-child {
    width:100%;
    display:flex;
    flex-direction:row;
    box-sizing:border-box;
    border-radius:16px;
  }
  .flex-child:nth-of-type(n+2) {
    margin-top:40px;
  }
  .flex-grandchild-img img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    top:0;left:0;
    border-radius:16px 0 0 16px;/*角丸変更*/
  }
  .flex-grandchild-inner h3 {
    padding:10px 0;
  }
  .flex-grandchild-innerText {
    min-height:50px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:4;/* 4行以上は省略 */
  }
}
@media screen and (max-width: 750px) {
  .flex-parent {
    width:70%;
    margin:0 auto;
  }
  .flex-child {
    flex-direction:column;
  }
  .flex-grandchild-img img {
    border-radius:16px 16px 0 0;/*角丸変更*/
  }
}
@media screen and (max-width: 480px) {
  .flex-parent {
    width:90%;/*全体の幅を90%に*/
  }
}





/*SP対応*/

/*.article_list-box-sp {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ccc;
}
*/
 @media screen and (max-width:821px) { 
.article_list-box {
    align-items: flex-start;
    display: block;
    position: relative;
    transition: .14s;
  margin:0 auto;
  max-width:100%;
}
   .article_list-img {
    width:100% ;
    max-width: 100%;
}
   .article_list-detail {
    flex: 1 1;
    padding-left: 0;
}
}



.flex-grandchild-innerLink-cta {
  width:100%;
  height:auto;
}
.flex-grandchild-innerLink-cta a {
  width:90%;
  height:48px;
  margin:10px auto 20px auto;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  font-weight:bold;
  text-decoration:none;
  background:#0686f9;
  border-radius:8px;
}
.flex-grandchild-innerLink-cta a:hover {
  background:#046cc7;
  
}