@charset "utf-8";
/*================================
news 一覧
===================================*/
#news-list{ width: 94%; margin: 0 3%; padding: 60px 0; max-width:800px; display: flex; flex-direction: column;}

.news_list ul.year{ display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; margin-bottom: 0px; padding-bottom: 30px;}
.news_list ul.year li{ display: block; margin: 0 15px 6px 0;}
.news_list ul.year li span, 
.news_list ul.year li a{ height:30px; display: flex; justify-content:center; align-items: center; border: solid 1px #999; font-size: 12px; padding: 0px 20px; border-radius: 2px; text-align: center; font-family: 'Josefin Sans', sans-serif;}
.news_list ul.year li.now a{ background: var(--color1); color: #fff; border: solid 1px var(--color1); pointer-events: none;}
.news_list ul.year li a:hover{ background: var(--color2); color: #000;}
/**/
.news_list ul.list { display: flex; width: 100%; flex-direction: column; margin-bottom: 40px; border-top: solid 1px #ddd;}
.news_list ul.list li { display: block; width: 100%; position: relative;}
.news_list ul.list li a { padding:30px 20px; display: flex; flex-direction: row; justify-content:space-between; align-items: flex-start; border-radius: 8px; border-bottom: solid 1px #ddd;}
.news_list ul.list li a .date{ width: 120px; white-space: nowrap; z-index: 400; color: #000; font-size: 13px; margin-top: 2px;}

.news_list ul.list li a .tag{ border: solid 1px #aaa; font-size: 10px; padding: 2px 0; margin-top: 1px; width: 90px; text-align: center; border-radius:2px;}
.news_list ul.list li a .txt{ flex: 1; font-size: 15px; color: #000; padding-left: 20px;}

.news_list ul.list li a:hover{ box-shadow:0 8px 18px rgba(0,0,0,.3); border-bottom: solid 1px #fff;}

.news_list ul.list li a:hover .txt{ } 
@media screen and (max-width: 840px) {
.news_list ul.list li a{ flex-wrap: wrap;}
.news_list ul.list li a .data{ width: auto; margin-right: 20px;}
.news_list ul.list li a .txt{ width: 60%}
.news_list ul.page-numbers{ justify-content: flex-start !important;}
}
@media screen and (max-width: 700px) {
#news-list{ padding: 30px 0;}

.news_list ul.year{ padding-bottom: 10px;}
.news_list { padding-bottom: 100px;}
.news_list h2{ margin-bottom: 30px;}
.news_list ul.list li a{ flex-wrap: wrap; justify-content: flex-start;}
.news_list ul.list li a .date{ width: 100px;}
.news_list ul.list li a .txt{ width: 100%; flex: none; padding: 0; margin: 10px 0 0;}
}
@media screen and (max-width: 600px) {
.news_list { padding-bottom: 30px;}
.news_list h2{ font-size: 22px;}
.news_list ul.year li{ display: block; margin: 0 10px 10px 0;}
.news_list ul.year li span, 
.news_list ul.year li a{ font-size: 14px; padding: 10px 15px;}
}






/*================================
news 詳細
===================================*/
#news-main{ width: 94%; margin: 0 3%; padding: 40px 0 60px; max-width:700px; display: flex; flex-direction: column;}
#news-main .ttl{ width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 40px 0; margin-bottom: 20px; border-bottom: solid 1px #ddd;}
#news-main .ttl h1{ display: block; font-size: 22px;}
#news-main .ttl p { display: flex; justify-content: flex-start; align-items: center; padding-top: 6px;}
#news-main .ttl p .date{ font-size: 12px; display: block; margin-right: 15px; letter-spacing: 1px;}
#news-main .ttl p .cate{ font-size: 10px; line-height: 1em; padding: 4px 6px; border: solid 1px #aaa; border-radius: 2px;}
/*news-post*/
#news-main .news-post{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#news-main .news-post > *{ width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 40px;}
#news-main .news-post .img{ justify-content: center;}
#news-main .news-post .img img{ max-width: 100%; max-height: 100%; width: auto !important; height: auto !important;}
#news-main .news-post h3{ font-size: 16px; margin-top: 20px; padding: 2px 1% 2px 5px; font-weight: 600; color: #333; border-left: solid 4px #333;}
#news-main .news-post p{ display: block; font-size: 15px; padding: 0 1%; line-height: 1.8em;}
#news-main .news-post p a{ display: inline; color: var(--link-color); text-decoration: underline; overflow-wrap: break-word; word-break: break-all; line-height: 1.2em; padding: 3px 0;}
#news-main .news-post p a:hover{ color: var(--link-color-hover);}

#news-main .news-post p.gray{ padding: 20px; border-radius: 8px; background: rgba(255,255,255,.7); border: solid 1px #ccc;}
/**/
#news-main #blog_page_link{ padding: 40px 0 60px !important;}
@media screen and (max-width: 600px){
#news-main #blog_page_link{ padding: 40px 0 0px !important;}
}
/**/
#news-main #blog-post-bottom .blog_post_list { border-bottom: solid 1px #ddd;}

#news-main #blog-post-bottom .blog_post_list{ margin-bottom: 100px;}
#news-main #blog-post-bottom .blog_post_list h2, 
#news-main #blog-post-bottom .blog_post_list h2 a{ font-size: 11px !important;}
#news-main #blog-post-bottom .blog_post_list h2{ padding: 20px 10px !important; color: #000 !important; border: none!important; border-bottom: solid 1px #000 !important; font-weight: 400 !important; background: none !important; border-radius: 0 !important; font-size: 14px !important;} 
/**/
#news-main #blog-post-bottom .blog_post_list ul{}
#news-main #blog-post-bottom .blog_post_list ul li{ display: block;}
#news-main #blog-post-bottom .blog_post_list ul li a{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding:15px 20px 10px; text-decoration: none; border-bottom: solid 1px #ccc;}
#news-main #blog-post-bottom .blog_post_list ul li a:hover{ box-shadow: 0 6px 12px rgba(0,0,0,.2); background: #f5f5f5;}
#news-main #blog-post-bottom .blog_post_list ul li a .date{ display: flex; align-items: center;}
#news-main #blog-post-bottom .blog_post_list ul li a .date b.en{ font-size: 12px; font-weight: 200; margin-right: 25px;}
#news-main #blog-post-bottom .blog_post_list ul li a .date span.cate{ font-size: 10px; line-height: 1.4em; padding: 1px 4px; border: solid 1px #ccc; border-radius: 2px; color: #777}
#news-main #blog-post-bottom .blog_post_list ul li a .txt{ font-size: 12px; line-height: 1.4em; margin-top: 6px;}

@media screen and (max-width:800px) {
#news-main #blog-post-bottom .blog_post_list ul li a .date b.en{ font-size: 12px;}
}