body {background-color:#151d28}
.main-content {color:#e5e7eb;padding:20px 4%;}
/*リンク*/
.main-content a:link {color:white;text-decoration:none;}
.main-content a:visited{color:white;text-decoration:none;}
.main-content a:hover {color:#60a5fa;text-decoration:none}
.main-content a:active {color:#60a5fa;text-decoration:none}
/*navのリンク色*/
a.navlink-articles{background-color:#008899;font-weight:bold;}

.articles-title{
  padding-left: 10px;
  color: #e5e7eb}
.articles-title-english{border-left:10px solid #a78bfa}
.articles-title-coding{border-left: 10px solid #60a5fa;}
  
.articles{margin-bottom:70px}
.articles:last-of-type {margin-bottom:0}
.articleimg{border:solid 0.5px #abb8c8}
.articletitle{font-weight:1.3em;font-weight:bold;}
.article-tag-date{color:#abb8c8;}

.new-letter{position:absolute;font-weight:bold;background-color:#DA1A56;color:black;padding:0 20px;box-shadow:1px 1px 5px black}


/*スマホ*/
@media (max-width: 600px) {
  .articles{border:solid 1px white;padding:0.6em;border-radius:10px;}
  .articles-english{background:#2e1e3b}
  .articles-coding{background-color:#1e293b}
  
  .article{width:100%;height:90px;border-bottom:dashed 1px #abb8c8;padding:10px 0;}
  .article:first-of-type {padding-top:0}
  .article:last-of-type {border-bottom:none;padding-bottom:0}
  .articledetail{display:flex;flex-direction:row-reverse;/*逆並び*/;justify-content:space-between}
  .articleimg{width:36%;object-fit:cover;aspect-ratio:25/13;border-radius:10px;margin-left:0.6em;}
  .articletitle{overflow-y:auto;max-height:55px}
  .article-tag-date{font-size:0.8em;text-align:left}
  
  .new-letter{bottom:7px;right:15px;}


}


/*pcでの表示*/
@media (min-width: 768px) {
  .articles{display:flex;flex-wrap:wrap;gap:20px;}
  .articles-english .article{background:#2e1e3b}
  .articles-coding .article{background:#1e293b;}
  
  .article{
    width: calc((100% - 60px) / 4)/*gap:20pxが3個で60px*/;
    border:solid 1px white;
    border-radius:6px;
    padding:0.5em;
    box-sizing:border-box;}
  .articleimg{width:100%;object-fit:cover;aspect-ratio:25/13;margin-bottom:0.5em;border-radius:6px;}
  .articletitle{height:80px;overflow-y:auto}
  .article-tag-date{font-size:0.7em}
  
  .new-letter{
    top:0; right:-10px;
    opacity:0.9;
    transform: rotate(20deg);
  }

}





/*▲▲▲▲▲bottom▲▲▲▲▲*/