@charset "utf-8";
.pageInner { width: 100%; display: flex; justify-content: center; padding: 0 3%; max-width: 800px;}
.pageInner .blog-inner{ width: 100%;}
/*-----------------------------
news一覧
-------------------------*/
.news-list h1{ width: 100%; display: block; line-height: 1em; padding:90px 1.5% 70px; font-size: 54px; font-weight: 400;}
.news-list{ padding-bottom: 90px;}
.news-list .inner{ flex-wrap: wrap; align-items: flex-start; justify-content: space-between;}
.news-list .inner h2{ width: 100%; display: block; margin-bottom: 20px; padding: 0 1.5%; }
.news-list .inner h2 a{ font-size: 26px; font-weight: bold; text-decoration: none;}
.news-list .inner h2 a:hover{ text-decoration: underline; color: #555;}
.news-list .inner .box { display: flex;  width: 45%; margin: 0 1.5% 70px;}
.news-list .inner .box a { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; }
.news-list .inner .box a > *{ padding: 0 5px 5px;} 
.news-list .inner .box a .image{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0; overflow: hidden; aspect-ratio: 45 / 26; }
.news-list .inner .box a .image img{ width:auto; height: auto; max-width: none; object-fit: cover; display: block; padding: 0; transition: 0.6s;}

.news-list .inner .box a .date{ margin-top: 20px; display: block; font-size: 20px; font-weight: 500;}
.news-list .inner .box a h3{ width: 100%; margin: 0; font-size: 32px; line-height: 1.4em; font-weight: bold; border-bottom: solid 2px #000; padding-bottom: 25px; margin-bottom: 25px;}
.news-list .inner .box a .txt{ font-size: 22px; line-height: 1.7em;}
.news-list .inner .box a:hover h3{ text-decoration: underline; color: #666;}
.news-list .inner .box a:hover .image img{ transition: 0.5s; transform: scale(1.06,1.06);}
@media screen and (max-width: 950px) {
}
@media screen and (max-width: 700px) {
.news-list .inner{ flex-direction: column; align-items: center; padding: 0 5%;}
.news-list .inner h2{ width: 90%; margin: 0 5% 20px;}
.news-list .inner h2 a{ padding-left: 5%;}
.news-list .inner .box { width: 100%; max-width: 495px;}
.news-list .inner .box a .date{ margin-top: 15px;} 
.news-list .inner .box a > *{ padding: 0 5px 5px;} 
.news-list .inner .box a .date{ font-size: 18px;}
.news-list .inner .box a h3{ font-size: 26px; padding-bottom: 18px; margin-bottom: 18px;}

.news-list .inner .box a .txt{ font-size: 18px;}
}

.news-list .pager{ width: 100%; display: block; padding: 10px 0 80px;}
.news-list .pager ul{width: 100%; display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap;}
.news-list .pager ul li{ display: block; margin:0 0 20px 8px;}
.news-list .pager ul li *{ width: 100%; height: 100%;  font-size:26px; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0 10px;}
.news-list .pager ul li span{ color: #000; text-decoration: underline;}
.news-list .pager ul li a{ color: #000; text-decoration: none;}
.news-list .pager ul li a:hover{ text-decoration: underline; color: #555;}
@media screen and (max-width: 800px) {
.news-list h1{ padding:130px 0 70px;}
.news-list .pager { padding: 10px 5% 60px;}
}
@media screen and (max-width: 700px) {
.news-list h1{ font-size: 48px;}
.news-list .pager{ padding: 0;}
.news-list .pager ul li{ width: 34px; height: 50px; margin:0 0 15px 14px; text-align: center;}
.news-list .pager ul li *{font-size:5.0vw; left: 0;}
}


/*-----------------------------
news一覧
-------------------------*/
.news-info h1{ width: 100%; display: block; line-height: 1em; padding:110px 1.5% 70px; font-size: 54px; font-weight: 400;}
.news-info .inner{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-bottom: 100px; padding: 0 5%;}
.news-info .image{ width: 47%;}
.news-info .image img{ width: auto; height: auto; max-width: 100%;}
/**/
.news-info .txt_area{ width: 46%; display: flex; flex-direction: column;}
.news-info .txt_area .date{ display: block; font-size: 24px; font-weight: 500;}
.news-info .txt_area h2{ display: block; font-size: 32px; line-height: 1.4em; font-weight: 500; padding: 15px 0 25px; border-bottom: solid 1px #000; margin-bottom: 30px;}
.news-info .txt_area .txt{ display: block; font-size: 24px; line-height: 1.8em; margin-bottom: 40px; white-space:pre-wrap;}
.news-info .txt_area .txt > a{ display: inline-block; margin-bottom: 10px; line-height: 1.2em; color:dodgerblue; text-decoration: underline; font-size: 20px; word-wrap: break-word; overflow-wrap:anywhere;}

.news-info .txt_area .txt a:hover{ color: #aaa !important; text-decoration: none;}
.news-info .txt_area h3{ display: block; font-size: 28px; font-weight: 500;}
.news-info .txt_area .links{ display: block;}
.news-info .txt_area .links h4{ display: block; font-size: 24px; font-weight: 500;}
.news-info .txt_area .links p{ display: flex; flex-direction: column; width: 100%;}
.news-info .txt_area .links p a{ display: inline-block; text-decoration: underline; font-size: 24px; margin: 10px 0; line-height: 1.2em;}
.news-info .txt_area .links p a:hover{ color: #aaa !important; text-decoration: none;}

.news-info .txt_area .back { width: 100%; display: flex; justify-content: flex-start; margin-top: 80px;}
.news-info .txt_area .back a { display: block; padding: 0 10px 0 40px; position: relative; border: solid 1px #000; font-size: 14px; font-weight: 500;}
.news-info .txt_area .back a::before{ content: "<"; font-size: 11px; position: absolute; left: 10px; top: 50%; line-height: 12px; margin-top: -6px; transition: 0.4s;}
.news-info .txt_area .back a:hover{ color: #666; border: solid 1px #666; background: #eee;}
.news-info .txt_area .back a:hover::before{ left: 5px; color: #555;}
@media screen and (max-width: 800px) {
.news-info .inner{ flex-direction: column; }
.news-info .image{ width: 100%; display: flex; justify-content: center; margin-bottom: 30px;}
.news-info .txt_area{ width: 100%; display: flex; flex-direction: column;}
}

@media screen and (max-width: 600px) {
.news-info h1{ font-size: 44px;}
.news-info .txt_area h2{ font-size: 30px;}
.news-info .txt_area h3{ font-size: 22px;}
.news-info .txt_area .date, 
.news-info .txt_area .txt, 
.news-info .txt_area .links h4, 
.news-info .txt_area .links p, 
.news-info .txt_area .links p a{ font-size: 20px;}

.news-info .txt_area .txt > a{ font-size: 16px;}

.news-info .txt_area .back {justify-content: center;}

}