@charset "utf-8";
#page-news{ background: #fff;}
#post{ background: #fff; padding-top: 100px;}
@media screen and (min-width: 800.01px) {
.under-main main { margin-bottom: 0;}
}
@media screen and (max-width: 800px) {
#post{ padding-top: 10px;}

}
#breadcrumbs{ background: #fff !important;}
.under-main #breadcrumbs *{ color: #111 !important;}

/*-------------------
#under-mvリセット
---------------------*/
.news_ttl { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin: 40px 0;}
.news_ttl h1{}
.news_ttl h1 * { font-size: 20px; line-height: 1em;}
.news_ttl p * { font-size: 12px; line-height: 1em;}

/*================================
news list
===================================*/
#news_list{ padding: 100px 5% 60px;}
#news_list > .wrap{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
#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: 70px;}
#news_list .inner h2 .en{ font-size: 50px; line-height: 1em;}
#news_list .inner h2 .jp{ font-size: 12px; width: auto; display: flex; align-items: center; line-height: 1.4em;}
#news_list .inner h2 .jp span{ font-size: 12px;}
/**/
#news_list .inner .year{ display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; margin-bottom: 0px; padding-bottom: 30px;}
#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: 12px; line-height: 16px; padding: 8px 20px; border-radius: 2px; text-align: center;}
#news_list .inner .year li span{ background: #e5e5e5; color: #777; border: solid 1px #ccc;}
#news_list .inner .year li a{ background: #fff; color: #000; transition: 0.2s;}
#news_list .inner .year li a[aria-current="page"], 
#news_list .inner .year li a:hover{ background: var(--about-color);}
/**/
#news_list .inner .list { display: flex; width: 100%; flex-direction: column; margin-bottom: 40px;}
#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:space-between; align-items: flex-start; border-radius: 8px;}
#news_list .inner .list li a .date{ width: 15%; white-space: nowrap; padding: 5px 0; z-index: 400; color: #000; letter-spacing: 0; font-size: 14px;}
#news_list .inner .list li a .tag{ border: solid 1px #aaa; font-size: 12px; padding: 2px 0; margin-top: 5px; width: 10%; min-width: 120px; text-align: center; border-radius: 4px;}
#news_list .inner .list li a .txt{ width: 62%; font-size: 14px; color: #555;}
#news_list .inner .list li a:hover{ box-shadow:0 4px 16px rgba(0,0,0,.1); }
#news_list .inner .list li a:hover .txt{ } 
@media screen and (max-width: 840px) {
#news_list .inner .list li a .date{ width: auto; margin-right: 20px;}
#news_list .inner .list li a .txt{ width: 60%}
#news_list ul.page-numbers{ justify-content: flex-start !important;}
}
@media screen and (max-width: 700px) {
#news_list .inner .year{ padding-bottom: 10px;}
#news_list { padding-bottom: 100px;}
#news_list .inner h2{ margin-bottom: 30px;}
#news_list .inner .list li a{ flex-wrap: wrap; justify-content: flex-start;}
#news_list .inner .list li a .date{ width: 100px;}
#news_list .inner .list li a .txt{ width: 100%; margin: 10px 0 0;}
}
@media screen and (max-width: 600px) {
#news_list { padding-bottom: 30px; padding: 50px 5%;}
#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: 11px; padding: 10px 15px;}
}

#news_list .inner{ position: relative;}
#news_list .inner .subMenu{ display: flex; flex-direction: column; position: absolute; right: 0; top: -20px;}
#news_list .inner .subMenu li{ display: block; margin: 3px 0;}
#news_list .inner .subMenu li a{ display: block; line-height: 20px; font-size: 12px; font-weight: 300; position: relative; color: #777;}
#news_list .inner .subMenu li a:hover{ color: #000;}
#news_list .inner .subMenu li a::after{ width: 0; height: 1px; position: absolute; left: 0; bottom: 0; content: ""; background: #aaa; transition: 0.3s;}
#news_list .inner .subMenu li a:hover::after{ width: 100%;}
#news_list .inner .subMenu li a::before{ content: "・"; line-height: 20px; position: absolute; left: -20px; top: 0;}
#news_list .inner .subMenu li a.active{ color: #000; font-weight: 500;}
#news_list .inner .subMenu li a.active::before{ content: "●"; }
#news_list .inner .subMenu li a.active::after{ display: none !important;}

@media screen and (max-width: 700px){
#page-mv .inner .titleArea ul{ margin: 0 3%; flex-direction: row; flex-wrap: nowrap;}
#news_list .inner .subMenu{ flex-direction: row; position: relative; margin-bottom: 20px; right: auto; top: auto;}
#news_list .inner .subMenu li{ margin: 0 5px 5px 0;}
#news_list .inner .subMenu li a{ line-height: 1em; padding: 6px 8px; border: solid 1px #777; border-radius: 20px; font-size: 2.1vw; letter-spacing: 0;}
#news_list .inner .subMenu li a:hover{ color: #000;}
#news_list .inner .subMenu li a::after, 
#news_list .inner .subMenu li a:hover::after, 
#news_list .inner .subMenu li a::before, 
#news_list .inner .subMenu li a.active::before{ display: none !important;}
#news_list .inner .subMenu li a.active{ color: #fff; background: #222;}
/**/


}