@charset "utf-8";
/* news css */

.bg_imgbox {
background-image: url("../img/news/title_bg.jpg");
background-size: cover;
}
.page_member_news .bg_imgbox {
background-image: url("../img/club/title_bg.jpg");
background-size: cover;
}

@media all and (max-width : 767px ){
.bg_imgbox {
background-image: url("../img/news/title_bg_sp.png");
background-size: cover;
}
.page_member_news .bg_imgbox {
background-image: url("../img/club/title_bg_sp.png");
background-size: cover;
}
}

.sec_bgimg {
position: absolute;
right: 20px;
top: -30px;
max-width: 200px;
height: auto;
z-index: 15;
}

.page_member_news .sec_bgimg {
position: absolute;
right: 20px;
top: -150px;
max-width: 180px;
height: auto;
z-index: 15;
}

@media all and (max-width : 1024px ){
.page_member_news .sec_bgimg {
position: absolute;
right: 20px;
top: -130px;
max-width: 100px;
}
}

/* News一覧
-------------------------------------------------- */

.header_search {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 35px;
}
.all_btn a {
white-space: nowrap;
padding: 10px 20px;
background-color: #F4F4F4;
border: solid 1px #4496B3;
text-decoration: none;
border-radius: 3px;
transition: ease 0.5s;
}
.all_btn a:hover {
background-color: #003C76;
color: #fff;
border: solid 1px #003C76;
transition: ease 0.5s;
}
.header_search_inputs {
width: 300px;
margin-left: 20px;
border: solid 1px #4496B3;
border-radius: 5px;
background: #F4F4F4;
}
.header_search_inputs input, .header_search_inputs select {
width: 98%;
height: 45px;
padding: 10px 20px;
line-height: 100%;
background: #F4F4F4;
border: none;
cursor: pointer;
}


/*-------------------------------------------------
News Box
-------------------------------------------------*/

.news_box {
display: flex;
padding: 25px 20px;
border-bottom: 1px solid rgba(68,150,179,0.5);
margin-bottom: 20px;
}
.news_box:first-child {
padding: 45px 20px;
border-top: 1px solid rgba(68,150,179,0.5);
}
.news_thum {
width: 177px;
height: auto;
position: relative;
overflow: hidden;
background: #000;
}
.news_thum img {
width: 100%;
transition-duration: 0.7s;	
aspect-ratio: 16 / 9;
object-fit: cover;
}
.news_thum img:hover {
transform: scale(1.05);	
transition-duration: 0.7s;	
opacity: 0.8;
}
.news_box_right {
max-width: 700px;
width: 100%;
margin-left: 60px;
margin-top: 10px;
}

@media all and (max-width : 1024px ){
.news_box_right {
margin-left: 30px;
}
}

.date_box_wrap .date {
font-family: 'Quicksand', sans-serif;
font-weight: 500;
font-size: 1.3rem;
letter-spacing: 0.05em;
line-height: 100%;
padding-right: 15px;
position: relative;
margin-right: 15px;
}
.date_box_wrap .date::after {
content: "|";
display: inline-block;
color: #999;
position: absolute;
right: 0;
top: 0;
}
.date_box_wrap .news_cate {
display: flex;
font-size: 1.2rem;
font-weight: 500;
color: #C4302B;
line-height: 100%;
}
.date_box_wrap .news_cate li {
margin-right: 12px;
line-height: 100%;
padding-left: 8px;
position: relative;
}
.date_box_wrap .news_cate li::before {
content: "#";
display: inline-block;
position: absolute;
left: 0;
top: 0;
font-size: 1.0rem;
}
.date_box_wrap {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.head_date_box {
margin-bottom: 10px;
}
.news_title a {
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.2em;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}

@media all and (max-width : 820px ){
.news_title a {
font-size: 1.4rem;
}
}

.news_title a:hover {
text-decoration: underline;
}
.new_icon {
font-family: 'Quicksand', sans-serif;
font-weight: 500;
font-size: 1.0rem;
padding: 5px 10px 4px;
color: #fff;
background-color: #003D79;
margin-bottom: 7px;
line-height: 100%;
display: inline-block;
border-radius: 5px;
}



/* ニュース一覧ページ　スマートフォン
-------------------------------------------------- */

@media all and (max-width : 767px ){
.header_search {
margin-bottom: 25px;
}
.all_btn a {
font-size: 1.0rem;
padding: 9px 5px;
}
.header_search_inputs {
margin-left: 10px;
border-radius: 1px;
}
.header_search_inputs input, .header_search_inputs select {
font-size: 1.0rem;
width: 100%;
height: 35px;
padding: 9px 0px;
}

/*-------------------------------------------------
News Box
-------------------------------------------------*/

.news_box {
display: flex;
padding: 15px 10px;
margin-bottom: 5px;
}
.news_box:first-child {
padding: 18px 10px 15px;
}
.news_thum {
width: 100px;
height: auto;
background-color: transparent ; 
}
.news_box_right {
margin-left: 15px;
margin-top: 2px;
}
.date_box_wrap .date {
font-size: 1.0rem;
padding-right: 10px;
margin-right: 10px;
}
.date_box_wrap .news_cate {
font-size: 1.0rem;
letter-spacing: 0.05em;
}
.date_box_wrap .news_cate li {
margin-right: 10px;
padding-left: 8px;
}
.date_box_wrap {
margin-bottom: 8px;
}
.head_date_box {
margin-bottom: 2px;
}
.news_title a {
font-size: 1.2rem;
letter-spacing: 0.1em;
}
.new_icon {
font-size: 0.8rem;
padding: 4px 5px 3px;
margin-bottom: 5px;
}
}



/* ニュース詳細
-------------------------------------------------- */

.page_news_dtl .news_inner {
max-width: 1260px;
margin: 0 auto;
background: #fff;
padding: 50px 0 100px;
border-radius: 20px;
}

@media all and (max-width : 1260px ){
.page_news_dtl .news_inner {
padding: 50px 20px 80px;
margin: 0 20px;
}
}


.page_news_dtl .date_box_wrap .date {
padding: 0px 15px 0 0;
}
.page_news_dtl .box p {
line-height: 200%;
font-size: 1.4rem;
display: block;
padding: 0px 10px 20px 0;
}
.page_news_dtl .box .date02 {
font-family: 'Quicksand', sans-serif;
font-weight: 500;
font-size: 1.4rem;
padding: 0px;
margin-bottom: 13px;
line-height: 100%;
}
.page_news_dtl .news_dtl_title {
font-family: "fot-tsukuardgothic-std", sans-serif;
font-weight: 700;
font-size: 2.2rem;
line-height: 100%;
padding-bottom: 18px;
border-bottom: solid 1px #ddd;
margin-bottom: 30px;
}
.page_news_dtl .box_s img {
margin: 20px auto;
}
.page_news_dtl .box_s article a {
color: #005CA2;
text-decoration: underline;
}
.page_news_dtl .box_s article a:hover {
text-decoration: none;
}
.page_news_dtl .link_btn_box {
	margin: 60px auto 50px;
}


@media all and (max-width : 767px) {

.page_news_dtl .news_inner {
padding: 20px 0px 20px;
margin: 0 20px;
}
.page_news_dtl .box p {
font-size: 1.2rem;
line-height: 180%;
padding: 0px 10px 20px 0;
}
.page_news_dtl .box .date02 {
font-size: 1.3rem;
margin-bottom: 10px;
}
.page_news_dtl .news_dtl_title {
font-size: 1.4rem;
line-height: 160%;
padding-bottom: 15px;
margin-bottom: 20px;
}
.page_news_dtl .link_btn_box {
margin: 20px auto 20px;
}
}