/*共通*/
ul{padding:0;}
li{list-style:none;}


/*タイトル付き（見出しボックス）*/
.card-product{
margin: 1em auto; /* ボックスの余白 */
background-color: #fff; /* ボックス背景色 */
padding: 4em 2em 2em; /* ボックス内側余白 */
position:relative; /*配置(ここを基準に)*/
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/
width:100%;
max-width:900px;
display:flex;
border-radius:15px;
}

.card-title {
background-color: #000; /* タイトル背景色 */
font-size: 25px;/* タイトル文字の大きさ */
color: #fff; /* タイトル文字色 */
padding:15px;/*タイトル余白*/
text-align: center;	/* タイトル中央寄せ */
position:absolute;	/* 配置(ここを動かす) */
top:0;	/*上から(0px)に配置 */
left:0; /*左から(0px)に配置 */
width:100%;/*横幅最大幅 */
font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", メイリオ, sans-serif;
font-weight:bold;
border-radius:15px 15px 0px 0px;
}

.card-body{
    padding: 0;
    border: none;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.col-md-4{
  width:49%;
  left:0;
  right:0;
  margin:auto;
}

.col-md-4 img{
width:100%!important;
}


.col-md-4.card-text{　
padding:0px;
margin:0px;
}

.col-md-4:nth-child(2){
display:table;
}

.col-md-4 figure{
vertical-align: middle;
}

li.newsList span:nth-child(1) {
flex-basis: 120px;
}

.col-md-4 li.newlist{
padding:0px!important;
margin:0px;
display:flex;
flex-wrap:nowrap;
margin: 20px 0px 10px 0px;
font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", メイリオ, sans-serif;  
}

li.newsList p{
color: #000;
font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", メイリオ, sans-serif;  
letter-spacing:0.08em;
font-size:16px;
}

li.newsList span{
 color: #fff;
 padding: 5px 10px;
 text-align: center;
 background-color: #000;
 font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", メイリオ, sans-serif;  
 width:120px;
 letter-spacing:0.1em;
 font-weight:600;
 font-size:18px;
}


a.button_solid020{
    position: relative;
    display:block;
    max-width: 200px;
    padding: 10px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #EB620C;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
    margin-top:20px;
    text-align:center;
    font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", メイリオ, sans-serif;  
    letter-spacing:0.08em;
     font-size:18px;
}

a.button_solid020:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}
a.button_solid020:after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg) translateY(-48%);
    position: absolute;
    top: 48%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

@media screen and (min-width:768px) and (max-width:1000px) {
 .card-product{
    width:85%;
  }
.card-body{
  display: flex;
  flex-direction:column;
}
  .col-md-4{
  text-align:center;    
  width:90%;
}
  a.button_solid020{
  margin:auto;
 }
  .card-title {
    font-size:25px;
  }
      
  li.newsList span{
      font-size:16px;
}
  
    li.newsList p{
      font-size:18px;
}
 a.button_solid020{
  margin-top:40px;
  margin-bottom:10px;
}

  
}


@media screen and (max-width:768px) { 
   {/* スクリーンサイズが768px以下の場合に適用 */}

   .card-product{
    width:85%;
  }
  .card-title {
    font-size:25px;
  }
      
  li.newsList span{
      font-size:16px;
}
  
    li.newsList p{
      font-size:18px;
}
 a.button_solid020{
  margin-top:40px;
  margin-bottom:10px;
}
}
  
@media screen and (max-width:480px) { 
   {/* スクリーンサイズが480px以下の場合に適用 */} 
  .card-product{
    width:85%;
  }
.card-body{
  display: flex;
  flex-direction:column;
}
  .col-md-4{
  text-align:center;    
  width:90%;
}
  a.button_solid020{
  margin:auto;
 }
  .card-title {
    font-size:18px;
  }
      
  li.newsList span{
      font-size:14px;
}
  
    li.newsList p{
      font-size:15px;
}
 a.button_solid020{
  margin-top:40px;
  margin-bottom:10px;
  font-size:16px;
}

}