@charset "utf-8";
main{ margin-top: 90px; padding-top: 40px;}
article{ display: flex; justify-content: center; flex-direction: column; align-items: center;}
@media screen and (max-width: 850px) {
main{ margin-top: 50px; padding-top: 0px;}
}
@media screen and (max-width: 700px) {
article {margin-bottom: 80px !important;}
}
/*========================================
ニュース詳細
========================================*/
#blog-main { width: 100%; max-width: 740px; padding: 20px;}
#blog-main .blog-post-title, 
#blog-main .pageInner { width: 100%;}
#blog-main .blog-post-title{ padding: 10px 0; border-bottom: double 3px #999; margin-bottom: 30px; padding-bottom: 20px;}
#blog-main .blog-post-title h1{ font-size: 28px; line-height: 1.2em;}
#blog-main .blog-post-title p{ letter-spacing: 0; margin-top: 5px;}
.blog-article > p{ margin-bottom: 30px;}

/*.blog_post_list ul*/
.blog_post_list ul li{}
.blog_post_list ul li a{ padding:15px 10px !important; border-bottom: dashed 1px #ccc;}
.blog_post_list ul li:last-child a{ border-bottom: none;}
.blog_post_list ul li a div { display: flex; flex-direction: row;}
.blog_post_list ul li a div h3 { width: 120px; display: flex; align-items: center;}
.blog_post_list ul li a div h3 .date{ letter-spacing: 0; white-space: nowrap;}
.blog_post_list ul li a div h3 .cate{ display: none;}
.blog_post_list ul li a div p{ font-weight: 300; font-size: 13px !important; flex: 1;}

@media screen and (max-width: 600px) {
#blog-main { padding:50px 20px;}

#blog-main .blog-post-title h1{ letter-spacing: 0;}
.blog_post_list h2, 
.blog_post_list h2 *{ font-size: 14px !important;}
.blog_post_list ul li a div h3 { width: 95px;}
.blog_post_list ul li a div h3 .date{ font-size: 12px;}
.blog_post_list ul li a div p{ font-size: 13px; padding:8px 0; font-size: 14px;}
}



/*========================================
ニュース一覧
========================================*/
#news_list{ padding: 20px 5% 0;}
#news_list .inner{ max-width: 800px;}
#news_list .inner.mb50{ margin-bottom: 50px;}
#news_list .inner h2{ display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px;}
#news_list .inner h2 .en{ font-size: 46px; line-height: 1em; font-weight: 200;}
#news_list .inner h2 .jp{ font-size: 12px; width: auto; display: inline-block; line-height: 1.4em;}
/**/
#news_list .inner .year{ display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; margin-bottom: 0px; padding-bottom: 15px;}
#news_list .inner .year li{ display: block; margin: 0 15px 6px 0;}
#news_list .inner .year li span, 
#news_list .inner .year li a{ display: block; border: solid 1px #999; font-size: 16px; line-height: 16px; padding: 8px 20px; border-radius: 6px; text-align: center;}
#news_list .inner .year li span{ background: #111; color: #fff; border: solid 1px #111;}
#news_list .inner .year li a{ background: #fff; color: #000;}
#news_list .inner .year li a[aria-current="page"], 
#news_list .inner .year li a:hover{ background:#111; border: solid 1px #111; color: #fff;}
/**/
#news_list .inner .list { display: flex; width: 100%; flex-direction: column; margin-bottom: 40px; border-bottom: solid 1px #ccc;}
#news_list .inner .list li { display: block; width: 100%; position: relative;}
#news_list .inner .list li::after{ width: 100%; height: 1px; background: #ccc; position: absolute; left: 0; top: 0px; border-radius: 4px; content: ""; }
#news_list .inner .list li a{ padding:30px 20px; display: flex; flex-direction: row; justify-content:flex-start; align-items: flex-start; border-radius: 8px;}
#news_list .inner .list li a .date{ width: 116px; flex-wrap: nowrap; white-space: nowrap; z-index: 400; color: #000; letter-spacing: 0; font-size: 14px;}
#news_list .inner .list li a .tag{ width: 70px; border: solid 1px #888; color: #666; font-size: 10px; padding: 2px 0; text-align: center; border-radius: 2px; margin:0 15px 0 0;}

#news_list .inner .list li a .txt{ width: 100%; flex: 1; font-size: 14px; color: #555;}
#news_list .inner .list li a:hover{ box-shadow:0 8px 18px rgba(0,0,0,.3); }
#news_list .inner .list li a:hover .txt{ } 
@media screen and (max-width: 700px) {
#news_list .inner .year{ padding-bottom: 10px;}
#news_list { padding-bottom: 100px;}
#news_list .inner .list li a{ flex-wrap: wrap; justify-content: flex-start;}
#news_list .inner .list li a .txt{ width: 100%;}
}
@media screen and (max-width: 600px) {
#news_list { padding: 50px 5% 30px;}
#news_list .inner h2{ font-size: 22px;}
#news_list .inner .year li{ display: block; margin: 0 10px 10px 0;}
#news_list .inner .year li span, 
#news_list .inner .year li a{ font-size: 14px; padding: 10px 15px;}
#news_list .inner .list{ margin-bottom: 20px;}
#news_list .inner .list li a{ flex-wrap: wrap; padding:20px 10px;}
#news_list .inner .list li a .txt{ min-width: 100%; margin-top: 5px;}

}