.article ul{
  margin-left:30px;
}
.article ul>li{
  margin-bottom:5px;
}

/* 画面サイズの横幅が 768px 以下で適用 */
@media screen and (max-width: 768px) {
    .article{
      
    }
    .article-div{
      position: relative;
      overflow: hidden;
      background: white !important;
        border-left:none;
        border-bottom: dashed 3px #4ec4d3;
      box-shadow: none !important;
    }
    .div-left{
      width:40% !important;
      float: left;

    }
    .div-right{
      text-align: left;
      width:58%;
      float:  left;   /* 回り込み指定 */
    }
    .img-left{
      width:50% !important;
      float: left;

    }
    .img-right{
      text-align: center;
      width:50%;
      float:  left;   /* 回り込み指定 */
    }
    .img-flex{/*スマホ画像など縦長の画像に使う*/
      width:75%;
    }
    .img-flex-2col{/*スマホ画像の二段組画像に使う*/
      padding:0px 0px 0px 10px;
      width:98%;
    }
    .div-lower-right{
      text-align: right;
      width:58%;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .div-lower-right p{
      font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
      font-size:15px;
      margin:0px;
    }
    .thumbnail-article{
      width:100%;
      padding:5px;
      border-radius: 10px;
    }
    .article-category{
      font-weight:bold;
      font-family:"Lato", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "YuGothic M", "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS ゴシック", "MS Gothic", sans-serif;
      font-size:21px;
        padding:0px;/*文字周りの余白*/
        color: #696969;
        background: white !important;
      box-shadow: none !important;
      margin:0px 0px 10px 0px;
    }
    /*カテゴリーのセレクトボックスデザイン*/
    .cp_ipselect {
      overflow: hidden;
      width: 90%;
      margin: 2em auto;
      text-align: center;
    }
    .cp_ipselect select {
      width: 100%;
      padding-right: 1em;
      cursor: pointer;
      text-indent: 0.01px;
      text-overflow: ellipsis;
      border: none;
      outline: none;
      background: transparent;
      background-image: none;
      box-shadow: none;
      -webkit-appearance: none;
      appearance: none;
    }
    .cp_ipselect select::-ms-expand {
        display: none;
    }
    .cp_ipselect.cp_sl01 {
      position: relative;
      border: 1px solid #bbbbbb;
      border-radius: 2px;
      background: #ffffff;
    }
    .cp_ipselect.cp_sl01::before {
      position: absolute;
      top: 0.8em;
      right: 0.9em;
      width: 0;
      height: 0;
      padding: 0;
      content: '';
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #666666;
      pointer-events: none;
    }
    .cp_ipselect.cp_sl01 select {
      padding: 8px 38px 8px 8px;
      color: #666666;
    }
    /*記事のフォントクラス*/
    .p-emphasis{/*強調*/
      font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
      font-size:22px;
    }

    /*合わせて読みたい記事のリンクデザイン*/
    .blog-card {
      border: 2px solid #e5e5e5;
      word-wrap: break-word;
      box-sizing: border-box;
      max-width: 100%;
      margin: 1em 0;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
    }
    
    .blog-card:hover {
      cursor: pointer;
      box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
      -moz-transform: translateY(-2px);
      -webkit-transform: translateY(-2px);
      transform: translateY(-2px);
    }
    
    .blog-card a {
      text-decoration: none;
      display: block;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
    }
    
    .blog-card a:hover {
      color: #333;
      background: rgba(235, 235, 235, 0.8);
      text-decoration: none;
    }
    
    .blog-card-thumbnail {
      width: 100px;
      display: table-cell;
      vertical-align: middle;
    }
    
    .blog-card-thumbnail img {
      padding: 0;
      max-width: 100%;
    }
    
    .blog-card-content {
      display: table-cell;
      vertical-align: middle;
      padding: 0.4em;
      border-left: #e5e5e5 solid 2px;
    }
    
    .blog-card-title {
      font-size: .85em;
      font-weight: bold;
      line-height: 1.4;
      color: #333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .blog-card-excerpt {
      display: none;/*消します*/
    }
    
    .blog-card .clear {
      clear: both;
    }

}
/* 画面サイズの横幅が 769px 以上で適用 */
@media screen and (min-width: 769px) { 
    .article{
      margin: 50px 0px 0px 0px;  
    }
    .article-div{
      position: relative;
      overflow: hidden;
      background: white !important;
        border-left:none;
        border-bottom: dashed 3px #4ec4d3;
      box-shadow: none !important;
      margin-bottom:10px;
    }
    .div-left{
      width:40% !important;
      float: left;

    }
    .div-right{
      text-align: left;
      width:58%;
      float:  left;   /* 回り込み指定 */
    }
    .img-left{
      width:50% !important;
      float: left;

    }
    .img-right{
      text-align: center;
      width:50%;
      float:  left;   /* 回り込み指定 */
    }
    .img-flex{
      width:40%;
    }
    .img-flex-2col{/*スマホ画像の二段組画像に使う*/
      padding:0px 0px 0px 30px;
      width:80%;
    }
    .div-lower-right{
      text-align: right;
      width:58%;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .div-lower-right p{
      font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
      font-size:15px;
      margin:0px;
    }
    .thumbnail-article{
      width:80%;
      padding:10px;
      border-radius: 20px;
    }
    .article-category{
      font-weight:bold;
      font-family:"Lato", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "YuGothic M", "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS ゴシック", "MS Gothic", sans-serif;
      font-size:21px;
        padding:0px;/*文字周りの余白*/
        color: #696969;
        background: white !important;
      box-shadow: none !important;
      margin:0px 0px 10px 0px;
    }
    /*カテゴリーのセレクトボックスデザイン*/
    .cp_ipselect {
      overflow: hidden;
      width: 90%;
      margin: 2em auto;
      text-align: center;
    }
    .cp_ipselect select {
      width: 100%;
      padding-right: 1em;
      cursor: pointer;
      text-indent: 0.01px;
      text-overflow: ellipsis;
      border: none;
      outline: none;
      background: transparent;
      background-image: none;
      box-shadow: none;
      -webkit-appearance: none;
      appearance: none;
    }
    .cp_ipselect select::-ms-expand {
        display: none;
    }
    .cp_ipselect.cp_sl01 {
      position: relative;
      border: 1px solid #bbbbbb;
      border-radius: 2px;
      background: #ffffff;
    }
    .cp_ipselect.cp_sl01::before {
      position: absolute;
      top: 0.8em;
      right: 0.9em;
      width: 0;
      height: 0;
      padding: 0;
      content: '';
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #666666;
      pointer-events: none;
    }
    .cp_ipselect.cp_sl01 select {
      padding: 8px 38px 8px 8px;
      color: #666666;
    }
    /*記事のフォントクラス*/
    .p-emphasis{
      font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
      font-size:22px;
    }

    /*合わせて読みたい記事のリンクデザイン*/
    .blog-card {
      border: 2px solid #e5e5e5;
      word-wrap: break-word;
      box-sizing: border-box;
      max-width: 100%;
      margin: 1em 0;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
    }
    
    .blog-card:hover {
      cursor: pointer;
      box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
      -moz-transform: translateY(-2px);
      -webkit-transform: translateY(-2px);
      transform: translateY(-2px);
    }
    
    .blog-card a {
      text-decoration: none;
      display: block;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
    }
    
    .blog-card a:hover {
      color: #333;
      background: rgba(235, 235, 235, 0.8);
      text-decoration: none;
    }
    
    .blog-card-thumbnail {
      width: 200px;
      display: table-cell;
      vertical-align: middle;
    }
    
    .blog-card-thumbnail img {
      padding: 0;
      max-width: 100%;
    }
    
    .blog-card-content {
      display: table-cell;
      vertical-align: middle;
      padding: 0.4em;
      border-left: #e5e5e5 solid 2px;
    }
    
    .blog-card-title {
      font-size: 1.5em;
      font-weight: bold;
      line-height: 1.4;
      color: #333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .blog-card-excerpt {
      display: none;/*消します*/
    }
    
    .blog-card .clear {
      clear: both;
    }
}