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


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

.card-title1 {
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-body1{
    padding: 0;
    border: none;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

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

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


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

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

.col-md-5 figure{
display:table-cell;
vertical-align: middle;
}

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

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


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


li.newsList1 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;
font-weight:bold;
  font-size:18px;
}

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

a.button_solid018: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_solid018: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;
}

.title-taio{
  margin-top:40px;
  background:#000;
  border-radius:10px;
}

h3.title-taio{
font-size:25px;
color:#fff;
text-align:center;
font-weight:bold;
font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", メイリオ, sans-serif;  
}

.al_taio{
    padding: 0;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.item31{
width:49%;
    left:0;
  right:0;
  margin:auto;
}
.item31 img{
width:85%;
    left:0;
  right:0;
  margin:auto;
    position:relative;
  display:block;
}

.item31 p{
  margin-top:10px;
  font-size:18px;
  color:#000;
  letter-spacing:0.1em;
  text-align:center;
  font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", メイリオ, sans-serif;
  font-weight:600;
}

.button_solid019{
  left:0;
  right:0;
  margin:auto;
}

a.button_solid019{
    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_solid019: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_solid019: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 (max-width:768px) { 
   {/* スクリーンサイズが768px以下の場合に適用 */}

   .card-product1{
    width:85%;
  }
  .card-title1 {
    font-size:25px;
  }
      
  li.newsList1 span{
      font-size:16px;
}
  
    li.newsList1 p{
      font-size:18px;
}
 a.button_solid018{
  margin-top:40px;
  margin-bottom:10px;
}
}
  

@media screen and (max-width:480px) { 
   {/* スクリーンサイズが480px以下の場合に適用 */} 
  .card-product1{
    width:85%;
  }
.card-body1{
  display: flex;
  flex-direction:column;
}
  .card-title1 {
    font-size:18px;
  }
  
  .col-md-5{
  text-align:center;    
  width:90%;
}
  a.button_solid018{
  margin:auto;
  margin-top:40px;
  margin-bottom:10px;
  }
  .al_taio{
  display: flex;
  flex-direction:column;
}
  .item31{
  text-align:center;    
  width:90%;
}
  
    li.newsList1 span{
      font-size:14px;
}
  
    li.newsList1 p{
      font-size:15px;
} 
  
 a.button_solid019{
  margin-top:20px;
  margin-bottom:10px;
   font-size:16px;
}
  .item31 p{
     font-size:14px;
}
}