@charset "utf-8";
/*================================
news 一覧
===================================*/
#news-mv{ overflow: hidden; padding: 20px 3%; background: #fff; position: relative;}
#news-mv .inner{ max-width: 1000px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; z-index: 10;}
/**/
#news-mv .ttl_h1 { height:30vh; min-height:300px; position: static;}
#news-mv .ttl_h1 h1{ display: flex; flex-direction: column; position: relative; z-index: 1; margin: 15vh 0 0 5%;}
#news-mv .ttl_h1 h1 .eng, 
#news-mv .ttl_h1 h1 .eng *{ font-size: 34px; letter-spacing: 0.3em; line-height: 1em;}
#news-mv.ser-top .inner .tit h1 .eng *{ font-size:24px;}
#news-mv.ser-top .inner .tit h1 .eng br{ display: none;}
#news-mv .ttl_h1 h1 .jp, 
#news-mv .ttl_h1 h1 .jp *{ font-size: 12px; padding-bottom: 5px; line-height: 1em; letter-spacing: 0.2em;}
.opBody1 #news-mv .ttl_h1 h1 * { opacity: 1; transition: 1.8s;}
/**/
#news-mv .nBox{ width: 100vw; height: 40vh; font-size: 60vh; display: flex; align-items: center; justify-content: flex-end; line-height: 1em; font-weight: 500; position: absolute; right: 100vw; letter-spacing:0.4em; z-index: 100; color: #000;}
#news-mv .nBox.num1{ top: 0;}
#news-mv .nBox.num2{ top: 15%;}
#news-mv .nBox.num3{ top: 30%;}
#news-mv .nBox.num4{ top: 45%;}
.opBody #news-mv .nBox.num1{ animation: news-mv-num 1.4s 0.6s 1 forwards;}
.opBody #news-mv .nBox.num2{ animation: news-mv-num 1.2s 0.8s 1 forwards;}
.opBody #news-mv .nBox.num3{ animation: news-mv-num 1.5s 0.4s 1 forwards;}
.opBody #news-mv .nBox.num4{ animation: news-mv-num 2.2s 0.2s 1 forwards;}
@keyframes news-mv-num{
0%{ right: 300vw; letter-spacing:0.4em; justify-content: flex-end; opacity: 1;}
100%{ right: -120vw; letter-spacing:-0.5em; justify-content: flex-start; opacity: 0;}
}
#news-mv .inner .tit{ padding: 50px 25% 50px 5%; width: 100%;}
#news-mv .inner .tit p{ line-height: 2.2em; opacity: 0.1;}
.opBody1 #news-mv .inner .tit p { animation: news-mv-p 1.2s 1.2s ease-in 1 forwards;}
@keyframes news-mv-p {
0% {  opacity: 0.1;}
100% {  opacity: 1;}
}
@media screen and (max-width: 800px) {
#news-mv .inner{ height:80vh; min-height: 0; align-items: center;}
#news-mv .ttl_h1 h1{ margin: 5vh 0 0;}
#news-mv .inner .tit{ padding: 50px 0%;}
}
@media screen and (max-width: 700px) {
#news-mv .ttl_h1 h1 .eng, 
#news-mv .ttl_h1 h1 .eng *{ font-size: 7.2vw;}
#news-mv .ttl_h1 h1 .jp, 
#news-mv .ttl_h1 h1 .jp *{ font-size: 2.2vw;}
}


/*-----------*/
.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 span, 
.news_list ul.year li a[aria-current="page"],
.news_list ul.year li a:hover{ background: var(--color1); color: #fff; border: solid 1px var(--color1);}
.news_list ul.year li a{ background: #fff; color: #000;}
.news_list ul.year li.now a{ font-size: 10px;;}
.news_list ul.year li a:hover{ border: solid 1px #444; background: #555; color: #fff;}
/**/
.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; padding: 5px 0; z-index: 400; color: #000; font-size: 13px;}
.news_list ul.list li a .tag{ border: solid 1px #aaa; font-size: 10px; padding: 2px 0; margin-top: 5px; width: 90px; text-align: center; border-radius:2px;}
.news_list ul.list li a .txt{ flex: 1; font-size: 12px; color: #555; padding-left: 20px;}
.news_list ul.list li a:hover{ box-shadow:0 8px 18px rgba(0,0,0,.3); border-bottom: solid 0px #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 .date{ 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 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: 60px 0; max-width:640px; display: flex; flex-direction: column;}
#news-list-section #news-main{ max-width:800px;}

#news-main #breadcrumbs ul{ padding: 10px 0;}
#news-main main{ align-items: flex-start;}
#news-main main .ttl{ width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 20px 0; margin-bottom: 20px; border-bottom: solid 1px #ddd;}
#news-main main .ttl h1{ display: block; font-size: 18px;}
#news-main main .ttl p { display: flex; justify-content: flex-start; align-items: center; padding-top: 6px;}
#news-main main .ttl p .date{ font-size: 14px; display: block; margin-right: 15px;}
#news-main main .ttl p .cate{ font-size: 10px; line-height: 1em; padding: 2px 6px; border: solid 1px #aaa; border-radius: 4px;}
/*news-post*/
#news-main main .news-post{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#news-main main .news-post > *{ width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 40px;}
#news-main main .news-post .img{ justify-content: center;}
#news-main main .news-post .img img{ max-width: 100%; max-height: 100%; width: auto !important; height: auto !important;}
#news-main main .news-post h3{ font-size: 16px; margin-top: 20px;}
#news-main main .news-post p{ font-size: 14px;}
#news-main main .news-post p.gray{ padding: 20px; border-radius: 8px; background: #eee;}
/**/
#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;}





aa